/* ============================================================
   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:1.5rem;align-items:center}
.nav-links a{font-size:.95rem;color:var(--charcoal);white-space:nowrap}
.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}

/* ============================================================
   MARKTPLATZ: Angebote, Filter, Charts, Ablauf, Animationen
   ============================================================ */

/* Einblenden beim Scrollen (nur wenn JS + Bewegung erlaubt) */
.animiert .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease var(--d,0ms),transform .6s ease var(--d,0ms)}
.animiert .reveal.sichtbar{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.animiert .reveal{opacity:1;transform:none;transition:none}}

/* Filterleiste (Ansicht) */
.filterleiste{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:center;margin-bottom:var(--m)}
.filter-pill{font-family:var(--mono);font-size:.85rem;color:var(--charcoal);background:#fff;border:1px solid var(--white2);border-radius:2rem;padding:.5rem 1rem;cursor:pointer;transition:border-color .15s ease,color .15s ease}
.filter-pill:hover,.filter-pill[aria-pressed="true"]{border-color:var(--brand);color:var(--brand)}

/* Angebots-Raster */
.angebote{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;text-align:left}
.angebot{background:#fff;border:1px solid var(--white2);border-radius:var(--radius);padding:var(--s);display:flex;flex-direction:column;gap:.6rem;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.angebot:hover{border-color:var(--brand);transform:translateY(-4px);box-shadow:0 20px 50px -34px rgba(0,0,0,.5)}
.angebot .kopf{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.angebot .material{font-weight:600;color:var(--blacklight);font-size:1.15rem}
.angebot .typ{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;padding:.2rem .5rem;border-radius:2rem}
.angebot .typ.anbieter{background:var(--brand-10);color:var(--brand-dark)}
.angebot .typ.gesuch{background:#e9ecef;color:var(--charcoal)}
.angebot dl{display:grid;grid-template-columns:auto 1fr;gap:.3rem .8rem;margin:0;font-family:var(--mono);font-size:.82rem}
.angebot dt{color:var(--gray)}
.angebot dd{margin:0;color:var(--charcoal);text-align:right}
.angebot .fuss{display:flex;align-items:center;justify-content:space-between;margin-top:.4rem;padding-top:.7rem;border-top:1px solid var(--white1)}
.angebot .preis{font-family:var(--mono);font-size:.85rem;color:var(--blacklight)}
.angebot .anfragen{font-family:var(--mono);font-size:.85rem;color:var(--brand)}
.beispiel-hinweis{text-align:center;font-family:var(--mono);font-size:.8rem;color:var(--gray);margin-top:var(--s)}

/* Angebots-Band (Ticker) */
.ticker-wrap{overflow:hidden;border-block:1px solid var(--white2);background:#fff;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker{display:flex;gap:2.5rem;width:max-content;padding:.8rem 0;animation:scroll 40s linear infinite}
.ticker span{font-family:var(--mono);font-size:.85rem;color:var(--charcoal);white-space:nowrap}
.ticker b{color:var(--brand);font-weight:600}
@media (prefers-reduced-motion:reduce){.ticker{animation:none}}

/* Markt-Charts */
.markt-charts{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.chart-karte{background:#fff;border:1px solid var(--white2);border-radius:var(--radius);padding:var(--s)}
.chart-karte h4{margin-bottom:.2rem}
.chart-karte .unter{font-family:var(--mono);font-size:.78rem;color:var(--gray);margin-bottom:var(--s)}
.balken-reihe{display:flex;align-items:flex-end;gap:.75rem;height:180px}
.balken-spalte{flex:1;display:flex;flex-direction:column;align-items:center;gap:.5rem;height:100%;justify-content:flex-end}
.balken{width:100%;background:linear-gradient(180deg,var(--brand-light),var(--brand));border-radius:.4rem .4rem 0 0;transform:scaleY(0);transform-origin:bottom;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.los .balken{transform:scaleY(1)}
.balken-spalte .wert{font-family:var(--mono);font-size:.72rem;color:var(--gray)}
.balken-spalte .name{font-family:var(--mono);font-size:.72rem;color:var(--charcoal);text-align:center}
.spark{width:100%;height:180px;display:block}
.spark .linie{fill:none;stroke:var(--brand);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1000;stroke-dashoffset:1000;transition:stroke-dashoffset 1.6s ease}
.los .spark .linie{stroke-dashoffset:0}
.spark .flaeche{fill:var(--brand-5);opacity:0;transition:opacity 1s ease .6s}
.los .spark .flaeche{opacity:1}

/* Vermittlungs-Ablauf */
.ablauf{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;position:relative}
.ablauf-schritt{background:#fff;border:1px solid var(--white2);border-radius:var(--radius);padding:var(--s);text-align:center}
.ablauf-schritt .kreis{width:52px;height:52px;margin:0 auto var(--xs);border-radius:14px;background:var(--brand-10);color:var(--brand);display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:1.2rem}
.ablauf-schritt h4{margin-bottom:.4rem}
.ablauf-schritt p{font-size:1rem;color:var(--gray)}

@media (max-width:1024px){
  .angebote{grid-template-columns:1fr 1fr}
  .markt-charts{grid-template-columns:1fr}
  .ablauf{grid-template-columns:1fr}
}
@media (max-width:640px){
  .angebote{grid-template-columns:1fr}
}

/* Ohne JavaScript oder bei reduzierter Bewegung sind die Charts sofort da.
   Erst wenn die Animation aktiv ist, starten sie bei null. */
.balken{transform:scaleY(1)}
.spark .linie{stroke-dashoffset:0}
.spark .flaeche{opacity:1}
.animiert .balken{transform:scaleY(0)}
.animiert .los .balken{transform:scaleY(1)}
.animiert .spark .linie{stroke-dashoffset:1000}
.animiert .los .spark .linie{stroke-dashoffset:0}
.animiert .spark .flaeche{opacity:0}
.animiert .los .spark .flaeche{opacity:1}

/* ============================================================
   ZUSAGE, STANDORT, ERFAHRUNG, TEAM
   ============================================================ */

/* Zusage-Band: die eine Kernaussage, ruhig gesetzt */
.zusage{background:var(--blacklight);color:var(--cream);border-radius:calc(var(--radius)*2);padding:var(--l) var(--m);text-align:center;margin-inline:var(--pad)}
.zusage h2{color:#fff;max-width:20ch;margin:0 auto var(--s)}
.zusage p{color:var(--cream);opacity:.85;max-width:56ch;margin:0 auto}
.zusage .btn-ghost{border-color:#fff;color:#fff;margin-top:var(--m)}
.zusage .btn-ghost:hover{background:#fff;color:var(--blacklight)}

/* Standort */
.standort{display:grid;grid-template-columns:1fr 1fr;gap:var(--l);align-items:center}
.standort-karte{background:#fff;border:1px solid var(--white2);border-radius:var(--radius);padding:var(--s) var(--m);font-family:var(--mono);font-size:.92rem;color:var(--charcoal);line-height:2}
.standort-karte .zeile-label{color:var(--gray)}
.standort-karte .fehlt{color:var(--brand);font-style:normal}

/* Erfahrung: ruhige Aussagenreihe statt erfundener Kennzahlen */
.erfahrung{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;text-align:left}
.erfahrung-punkt{border-left:2px solid var(--brand);padding-left:var(--s)}
.erfahrung-punkt h4{margin-bottom:.4rem;font-size:1.35rem}
.erfahrung-punkt p{font-size:1rem;color:var(--gray)}

/* Team */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;text-align:left}
.team-karte{background:#fff;border:1px solid var(--white2);border-radius:var(--radius);padding:var(--s);transition:border-color .2s ease,transform .2s ease}
.team-karte:hover{border-color:var(--brand);transform:translateY(-4px)}
.team-karte .bild{aspect-ratio:4/3;border-radius:calc(var(--radius) - .2rem);overflow:hidden;margin-bottom:var(--s);
  background:radial-gradient(120% 120% at 30% 20%,var(--brand-5),transparent 60%),var(--white1);
  border:1px solid var(--white2);display:grid;place-items:center;
  font-family:var(--mono);font-size:.8rem;color:var(--gray)}
.team-karte .bild img{width:100%;height:100%;object-fit:cover}
.team-karte h4{margin-bottom:.15rem}
.team-karte .rolle{font-family:var(--mono);font-size:.78rem;color:var(--brand);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.6rem}
.team-karte p{font-size:1rem;color:var(--gray)}

@media (max-width:1024px){
  .standort{grid-template-columns:1fr}
  .erfahrung{grid-template-columns:1fr}
  .team{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .team{grid-template-columns:1fr}
  .zusage{padding:var(--m) var(--s)}
}

/* ============================================================
   EIGENE GRAFIKEN IN DEN MEDIENBOXEN
   Keine Fotos, sondern erklaerende Zeichnungen in der Marke.
   ============================================================ */
.media svg{width:100%;height:100%;display:block}
.g-label{font-family:var(--mono);font-size:9px;fill:var(--gray);letter-spacing:.14em}
.g-klein{font-family:var(--mono);font-size:8.5px;fill:var(--gray)}
.g-text{font-family:var(--mono);font-size:9px;fill:var(--charcoal)}
.g-box{fill:#fff;stroke:var(--white2);stroke-width:1.2}
.g-box.g-aktiv{stroke:var(--brand);stroke-width:1.6}
.g-linie{fill:none;stroke:var(--white2);stroke-width:1.6}
.g-linie.g-stark{stroke:var(--brand);stroke-width:2}
.g-kreis{fill:var(--brand)}
.g-mitte{font-family:var(--mono);font-size:10px;font-weight:700;fill:#fff}
.g-bar{fill:#f2e3db}
.g-bar.g-bar2{fill:#e9e2dc}
.g-route{fill:none;stroke:var(--white2);stroke-width:2.5;stroke-linecap:round}
.g-stop{fill:#fff;stroke:var(--charcoal);stroke-width:1.6}
.g-stop.g-stop-aktiv{fill:var(--brand);stroke:var(--brand)}
.g-seg1{fill:var(--brand)}
.g-seg2{fill:var(--brand-light)}
.g-seg3{fill:var(--cream)}
.g-land{fill:#f3e7e1;stroke:var(--white2);stroke-width:1.5}
.g-weg{fill:none;stroke:var(--brand);stroke-width:1.8;stroke-linecap:round}
.g-pin{fill:var(--brand)}
.g-pin2{fill:var(--charcoal)}

/* Zwei Zielgruppen nebeneinander */
.zielgruppen{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.zielgruppe{background:#fff;border:1px solid var(--white2);border-radius:var(--radius);padding:var(--m);transition:border-color .2s ease,transform .2s ease}
.zielgruppe:hover{border-color:var(--brand);transform:translateY(-4px)}
.zielgruppe .marke{font-family:var(--mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--brand);margin-bottom:.6rem;display:block}
.zielgruppe h3{font-size:1.9rem;margin-bottom:.6rem}
.zielgruppe p{color:var(--gray);margin-bottom:var(--s)}
.zielgruppe ul{list-style:none;margin:0 0 var(--s);padding:0}
.zielgruppe li{position:relative;padding-left:1.2rem;margin-bottom:.5rem;font-size:1rem;color:var(--charcoal)}
.zielgruppe li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--brand)}
@media (max-width:1024px){.zielgruppen{grid-template-columns:1fr}}

/* Echtes Logo statt Buchstabenkachel */
.logo img{height:30px;width:auto;display:block}
.footer .logo img{height:32px}
@media (max-width:640px){.logo img{height:26px}}

/* ============================================================
   Echte Europakarte im Abschnitt Standort und Reichweite
   ============================================================ */
.media.karte-media{aspect-ratio:auto;max-width:380px;margin-inline:auto;
  background:radial-gradient(120% 100% at 30% 8%,var(--brand-5),transparent 60%),var(--white);
  display:flex;flex-direction:column;gap:.9rem;padding:var(--s)}
.media.karte-media svg{width:100%;height:auto}
.k-land{fill:#f3e7e1;stroke:var(--white2);stroke-width:.6;stroke-linejoin:round}
.k-ch{fill:var(--brand);stroke:var(--brand-darker);stroke-width:.7}
.k-weg{fill:none;stroke:var(--brand);stroke-width:1.1;stroke-dasharray:4 5;opacity:.5}
.k-quelle{fill:var(--gray)}
.k-halo{fill:var(--brand);opacity:.15}
.k-pin{fill:var(--brand);stroke:#fff;stroke-width:1.4}
.karte-legende{font-family:var(--mono);font-size:.8rem;color:var(--gray);text-align:center;margin:0}

/* ============================================================
   Was das System kann: Fähigkeiten als eigene Punkte
   ============================================================ */
.kann-gitter{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s)}
@media(max-width:760px){.kann-gitter{grid-template-columns:1fr}}
.kann{display:flex;gap:1rem;background:var(--white);border:1px solid var(--white2);
  border-radius:var(--radius);padding:var(--s);box-shadow:0 1px 0 var(--white2)}
.kann-marke{flex:none;width:42px;height:42px;border-radius:11px;background:var(--brand-10);
  color:var(--brand);display:grid;place-items:center}
.kann-marke svg{width:22px;height:22px}
.kann-offen{background:var(--white1)}
.kann-offen .kann-marke{background:var(--white2);color:var(--gray)}
.kann-text{min-width:0;text-align:left}
.kann h3{font-size:1.05rem;line-height:1.3;margin-bottom:.45rem;
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.kann p{color:var(--gray);font-size:.95rem;margin:0}
.kann-badge{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;
  letter-spacing:.05em;color:var(--brand-dark);background:var(--brand-10);
  padding:.15rem .5rem;border-radius:2rem;font-weight:600}
.kann-mehr{display:inline-block;margin-top:.7rem;font-family:var(--mono);
  font-size:.82rem;color:var(--brand)}
.kann-mehr:hover{color:var(--brand-dark)}

/* ============================================================
   Preise: Abo-Stufen fuer den e-CMR und FAQ
   ============================================================ */
.preis-gitter{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s);align-items:stretch}
@media(max-width:900px){.preis-gitter{grid-template-columns:1fr;max-width:30rem;margin-inline:auto}}
.preis-karte{position:relative;background:var(--white);border:1px solid var(--white2);
  border-radius:var(--radius);padding:var(--m) var(--s) var(--s);display:flex;flex-direction:column;
  gap:.35rem;box-shadow:0 1px 0 var(--white2)}
.preis-karte.hervor{border-color:var(--brand);box-shadow:0 24px 60px -40px rgba(0,0,0,.55)}
.preis-tag{position:absolute;top:-.7rem;left:var(--s);font-family:var(--mono);font-size:.66rem;
  text-transform:uppercase;letter-spacing:.06em;color:#fff;background:var(--brand);
  padding:.2rem .6rem;border-radius:2rem;font-weight:600}
.preis-karte h3{font-size:1.35rem;margin:0}
.preis-fuer{color:var(--gray);font-size:.9rem;margin:0}
.preis-betrag{margin:.7rem 0 .1rem;display:flex;flex-direction:column;gap:.1rem}
.preis-auf{font-family:var(--mono);font-size:1.2rem;font-weight:600;color:var(--charcoal)}
.preis-takt{font-size:.82rem;color:var(--gray)}
.preis-nutzer{font-weight:600;margin:.3rem 0 .5rem}
.preis-liste{list-style:none;padding:0;margin:.2rem 0 var(--s);display:flex;flex-direction:column;gap:.55rem;flex:1}
.preis-liste li{position:relative;padding-left:1.6rem;color:var(--charcoal);font-size:.92rem;line-height:1.4}
.preis-liste li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--brand);font-weight:700}
.preis-karte .btn{margin-top:auto;width:100%;text-align:center}

.faq{max-width:66ch;margin:0 auto;display:flex;flex-direction:column;gap:.6rem}
.faq details{background:var(--white);border:1px solid var(--white2);border-radius:var(--radius);overflow:hidden}
.faq summary{cursor:pointer;font-weight:600;padding:.95rem 2.4rem .95rem 1rem;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:1rem;top:.85rem;color:var(--brand);
  font-weight:700;font-size:1.2rem;transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 1rem 1rem;margin:0;color:var(--gray)}
.faq details p a{color:var(--brand)}

/* ============================================================
   Mehr Bewegung: Hover auf allen Kacheln, Hero-Kacheln blenden ein
   ============================================================ */
/* Hover-Anheben fuer die Kacheln, die es noch nicht hatten */
.ablauf-schritt{transition:transform .2s ease}
.ablauf-schritt:hover{transform:translateY(-4px)}
.schritt{transition:transform .2s ease}
.schritt:hover{transform:translateY(-4px)}
.kann{transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.kann:hover{border-color:var(--brand);transform:translateY(-4px);box-shadow:0 20px 50px -34px rgba(0,0,0,.5)}
.preis-karte{transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.preis-karte:hover{transform:translateY(-6px);box-shadow:0 26px 64px -40px rgba(0,0,0,.55)}
.chart-karte{transition:transform .2s ease,box-shadow .2s ease}
.chart-karte:hover{transform:translateY(-4px);box-shadow:0 20px 50px -36px rgba(0,0,0,.45)}
.erfahrung-punkt{transition:transform .2s ease}
.erfahrung-punkt:hover{transform:translateX(3px)}

/* Hero-Kacheln blenden beim Laden nacheinander ein (nur mit .animiert,
   also nicht bei prefers-reduced-motion; ohne Skript bleiben sie sichtbar). */
.tbl{transition:transform .2s ease,box-shadow .2s ease}
.tbl:hover{transform:translateY(-3px);box-shadow:0 18px 40px -30px rgba(0,0,0,.45)}
/* Nur Deckkraft animieren: der Endzustand haengt nicht an der Animation,
   und die Transform bleibt frei fuer den Hover (sonst verschwaenden die
   Kacheln beim Ueberfahren). */
@keyframes kachel-auf{from{opacity:0}to{opacity:1}}
.animiert .diagram .tbl{animation:kachel-auf .6s ease both}
.animiert .diagram .tbl:nth-child(1){animation-delay:.15s}
.animiert .diagram .tbl:nth-child(2){animation-delay:.28s}
.animiert .diagram .tbl:nth-child(3){animation-delay:.41s}

/* Echtes Foto in einer Feature-Zeile (Hochformat, natuerliche Proportion) */
.foto{border-radius:var(--radius);overflow:hidden;border:1px solid var(--white2);
  box-shadow:0 24px 60px -34px rgba(0,0,0,.5);max-width:420px;margin-inline:auto}
.foto img{width:100%;height:auto;display:block}

/* ============================================================
   Dezente Leiste: Speditionen, die den e-CMR nutzen
   ============================================================ */
.kunden{padding-block:var(--l)}
.kunden-titel{text-align:center;font-family:var(--mono);font-size:.85rem;letter-spacing:.04em;text-transform:uppercase;color:var(--gray);margin:0 0 var(--s)}
.kunden-wrap{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.kunden-lauf{display:flex;gap:1.5rem;width:max-content;animation:scroll 45s linear infinite}
@media(prefers-reduced-motion:reduce){.kunden-lauf{animation:none;flex-wrap:wrap;justify-content:center;width:auto}}
.kunden-tile{display:flex;align-items:center;gap:.7rem;background:#fff;border:1px solid var(--white2);border-radius:var(--radius);padding:.7rem 1.1rem;white-space:nowrap}
.kunden-logo{width:38px;height:38px;border-radius:9px;background:var(--white1);border:1px solid var(--white2);display:grid;place-items:center;font-family:var(--mono);font-weight:700;color:var(--gray);font-size:.8rem}
.kunden-name{font-weight:600;color:var(--charcoal)}