/* ============================================================
   DESIGN TOKENS  (1:1 aus der Vorlage)
   ============================================================ */
:root{
  /* Markenfarbe = Orange */
  --brand:        #f74808;
  --brand-light:  #ff5e0d;
  --brand-dark:   #d4470b;
  --brand-darker: #ab3000;
  --brand-5:  #f748080d;
  --brand-10: #f747081a;
  --brand-50: #f7480880;

  /* Neutrale */
  --black:      #141414;
  --blacklight: #211e21;
  --charcoal:   #413842;
  --gray:       #615760;
  --cream:      #ccc7c2;
  --white:  #ffffff;
  --white1: #f5f2f0;
  --white2: #e6e0da;

  /* Typo-Skala (Desktop) */
  --font-h1: 5em;
  --font-h2: 3.5em;
  --font-h3: 2.8em;
  --font-h4: 1.9em;
  --font-h5: 1.4em;
  --font-p:  1.15em;

  /* Fonts */
  --sans:  "Inter", Arial, sans-serif;
  --serif: "Spectral", Georgia, serif;
  --mono:  "Inconsolata", monospace;

  /* Spacing-Skala */
  --xxs: .5rem;  --xs: .75rem; --s: 1.5rem; --m: 2.5rem;
  --l: 4.5rem;   --xl: 7.5rem; --xxl: 9rem;  --xxxl: 15rem;

  --radius: 1rem;
  --container: 1440px;
  --pad: 2rem;
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  font-size:100%;
  line-height:1.55;
  color:var(--gray);
  background:var(--white1);
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5{color:var(--blacklight);line-height:1.08;font-weight:600;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:var(--font-h1)}
h2{font-size:var(--font-h2)}
h3{font-size:var(--font-h3)}
h4{font-size:var(--font-h4)}
h5{font-size:var(--font-h5)}
p{font-size:var(--font-p)}

.container{
  width:100%;max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--pad);
  position:relative;
}
.section{padding-block:var(--xxl)}
.text-serif{font-family:var(--serif);font-weight:400}
.text-brand{color:var(--brand)}
.text-mono{font-family:var(--mono)}
.eyebrow{
  font-family:var(--mono);
  font-size:.85rem;letter-spacing:.02em;
  color:var(--brand);
  text-transform:uppercase;
}

/* Sichtbarer Tastaturfokus auf allen interaktiven Elementen */
a:focus-visible,.btn:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:.4rem}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--mono);font-size:.95rem;font-weight:500;
  padding:.85rem 1.4rem;border-radius:.6rem;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  cursor:pointer;border:1px solid transparent;
}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-dark)}
.btn-ghost{border-color:var(--charcoal);color:var(--blacklight)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand)}
.btn:active{transform:translateY(1px)}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(245,242,240,.8);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--white2);
}
.nav .container{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:.55rem;font-weight:700;color:var(--blacklight);font-size:1.15rem}
.logo-mark{width:28px;height:28px;border-radius:7px;background:var(--brand);
  display:grid;place-items:center;color:#fff;font-family:var(--mono);font-weight:700;font-size:.85rem}
.nav-links{display:flex;gap:2rem;align-items:center}
.nav-links a{font-size:.95rem;color:var(--charcoal)}
.nav-links a:hover{color:var(--brand)}
.nav-cta{display:flex;gap:.75rem;align-items:center}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding-top:var(--l);padding-bottom:var(--m);text-align:center;overflow:hidden}
.announce{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.85rem;font-family:var(--mono);
  background:var(--brand-10);color:var(--brand-dark);
  padding:.4rem .9rem;border-radius:2rem;margin-bottom:var(--s);
}
.announce .dot{width:7px;height:7px;border-radius:50%;background:var(--brand)}
.hero h1{max-width:16ch;margin-inline:auto}
.hero .lead{
  font-size:1.35rem;color:var(--gray);
  max-width:56ch;margin:var(--s) auto var(--m);
}
.hero-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* Schema-Diagramm: der CMR Frachtbrief-Fluss (Absender, Frachtfuehrer, Empfaenger) */
.diagram{
  margin-top:var(--xl);
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;
  max-width:960px;margin-inline:auto;text-align:left;
}
.tbl{
  background:#fff;border:1px solid var(--white2);border-radius:var(--radius);
  overflow:hidden;box-shadow:0 1px 0 var(--white2);
}
.tbl-head{
  font-family:var(--mono);font-size:.8rem;font-weight:600;
  background:var(--blacklight);color:#fff;padding:.55rem .85rem;
  display:flex;justify-content:space-between;
}
.tbl-row{
  font-family:var(--mono);font-size:.82rem;color:var(--charcoal);
  padding:.5rem .85rem;border-top:1px solid var(--white1);
}
.tbl-row.new{color:var(--brand);background:var(--brand-5)}
.tbl-foot{font-family:var(--mono);font-size:.72rem;color:var(--gray);
  padding:.45rem .85rem;background:var(--white1);border-top:1px solid var(--white2)}

/* Logo-Marquee */
.marquee-wrap{margin-top:var(--xl);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee{display:flex;gap:3.5rem;width:max-content;animation:scroll 32s linear infinite}
.marquee span{
  font-family:var(--mono);font-weight:600;font-size:1.1rem;
  color:var(--cream);white-space:nowrap;letter-spacing:.02em;
}
@keyframes scroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee{animation:none}}

/* ============================================================
   FEATURE-SEKTIONEN (alternierend Text/Media)
   ============================================================ */
.feature{padding-block:var(--l)}
.feature .row{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--l);align-items:center;
}
.feature:nth-of-type(even) .media{order:-1}
.feature h2{margin-bottom:var(--s)}
.feature p{color:var(--gray);max-width:46ch;margin-bottom:var(--s)}
.feature .btn-ghost{margin-top:.5rem}
.media{
  aspect-ratio:16/10;border-radius:var(--radius);
  background:
    radial-gradient(120% 120% at 20% 10%, var(--brand-5), transparent 60%),
    var(--white);
  border:1px solid var(--white2);
  display:grid;place-items:center;
  font-family:var(--mono);color:var(--cream);font-size:.9rem;text-align:center;padding:1rem;
  box-shadow:0 20px 50px -30px rgba(0,0,0,.4);
}

/* Sektion auf Markenfarben-Verlauf */
.section-brand{
  background-image:linear-gradient(180deg,var(--brand-darker) 4%,var(--brand) 48%,var(--brand-light) 82%,var(--brand-dark));
  color:#fff;border-radius:calc(var(--radius)*2);
  margin-inline:var(--pad);
}
.section-brand h2,.section-brand p{color:#fff}
.section-brand p{opacity:.92}
.section-brand .media{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff}
.section-brand .btn-ghost{border-color:#fff;color:#fff}
.section-brand .btn-ghost:hover{background:#fff;color:var(--brand)}

/* ============================================================
   PRODUKT-GRID
   ============================================================ */
.products{text-align:center;padding-block:var(--xl)}
.products .eyebrow{display:block;margin-bottom:var(--s)}
.products h2{max-width:22ch;margin:0 auto var(--l)}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;text-align:left}
.product-box{
  background:#fff;border:1px solid var(--white2);border-radius:var(--radius);
  padding:var(--s);transition:border-color .2s ease, transform .2s ease;
}
.product-box:hover{border-color:var(--brand);transform:translateY(-4px)}
.product-box .p-mark{
  width:40px;height:40px;border-radius:10px;background:var(--brand-10);
  display:grid;place-items:center;color:var(--brand);font-family:var(--mono);
  font-weight:700;margin-bottom:var(--xs)}
.product-box h4{margin-bottom:.4rem}
.product-box p{font-size:1rem;color:var(--gray)}
.product-box .p-link{display:inline-block;margin-top:1rem;font-family:var(--mono);
  font-size:.9rem;color:var(--brand)}

/* ============================================================
   KONTAKT / CTA + FOOTER
   ============================================================ */
.cta{text-align:center;padding-block:var(--xxl)}
.cta h2{max-width:18ch;margin:0 auto var(--s)}
.cta p{max-width:48ch;margin:0 auto var(--m);color:var(--gray)}
.cta .kontaktzeile{margin-top:var(--s);font-family:var(--mono);font-size:.95rem;color:var(--charcoal)}
.cta .kontaktzeile a{color:var(--brand)}

.footer{background:var(--blacklight);color:var(--cream);padding-block:var(--l) var(--m)}
.footer .container{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--m)}
.footer .logo{color:#fff}
.footer h6{color:#fff;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;
  font-family:var(--mono);margin-bottom:1rem;font-weight:600}
.footer ul{list-style:none}
.footer li{margin-bottom:.6rem}
.footer a{font-size:.95rem;color:var(--cream)}
.footer a:hover{color:var(--brand-light)}
.footer .foot-note{grid-column:1/-1;border-top:1px solid var(--charcoal);
  margin-top:var(--s);padding-top:var(--s);font-size:.85rem;color:var(--gray);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  :root{--font-h1:3.6em;--font-h2:2.7em;--font-h3:2.3em;--xxl:6.5rem;--xl:5rem;--l:3.2rem}
  .feature .row{grid-template-columns:1fr;gap:var(--m)}
  .feature:nth-of-type(even) .media{order:0}
  .product-grid{grid-template-columns:1fr 1fr}
  .footer .container{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
}
@media (max-width:640px){
  :root{--font-h1:3.2em;--font-h2:2.4em;--pad:1rem}
  .diagram{grid-template-columns:1fr}
  .hero .lead{font-size:1.15rem}
  .product-grid{grid-template-columns:1fr}
  .footer .container{grid-template-columns:1fr}
  .nav-cta .btn-ghost{display:none}
}

/* ============================================================
   MEHRSEITIG: Seitenkopf, aktiver Navi-Zustand, Schritte
   ============================================================ */
.nav-links a[aria-current="page"]{color:var(--brand)}
.page-header{text-align:center;padding-block:var(--l) var(--m)}
.page-header .eyebrow{display:block;margin-bottom:var(--s)}
.page-header h1{max-width:22ch;margin:0 auto var(--s);font-size:var(--font-h2)}
.page-header p{max-width:56ch;margin:0 auto;color:var(--gray);font-size:1.2rem}

.schritte{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;text-align:left}
.schritt{background:#fff;border:1px solid var(--white2);border-radius:var(--radius);padding:var(--s)}
.schritt .num{font-family:var(--mono);font-weight:700;color:var(--brand);font-size:1.1rem;margin-bottom:.4rem}
.schritt h4{margin-bottom:.4rem}
.schritt p{font-size:1rem;color:var(--gray)}
@media (max-width:1024px){.schritte{grid-template-columns:1fr}}

/* Bilder fuellen die Medienbox; Platzhalter bleibt dezent beschriftet */
.media{overflow:hidden;position:relative}
.media img{width:100%;height:100%;object-fit:cover;display:block}
.media .platzhalter{font-family:var(--mono);font-size:.85rem;color:var(--gray);letter-spacing:.02em}