/* ============================================================
   Taxi Katja Winter · Richtung 06 "Modern"
   Medienmaster, Stand 2026-08-03

   GRUNDREGEL (Lehre aus deingym): Buttonfarben hängen NIE an
   einer Sektionsklasse. Jede Button-Variante definiert ihre
   Farben selbst über eigene Custom Properties. Eine neue
   Sektion kann damit keine Buttonschrift unsichtbar machen.
   ============================================================ */

/* --- Schriften, lokal gehostet, kein Datenabfluss --------- */
@font-face{font-family:'Space';src:url('fonts/space.woff2') format('woff2');font-weight:300 700;font-display:swap;font-style:normal}
@font-face{font-family:'Inter';src:url('fonts/inter-400.woff2') format('woff2');font-weight:400;font-display:swap;font-style:normal}
@font-face{font-family:'Inter';src:url('fonts/inter-500.woff2') format('woff2');font-weight:500;font-display:swap;font-style:normal}
@font-face{font-family:'Inter';src:url('fonts/inter-600.woff2') format('woff2');font-weight:600;font-display:swap;font-style:normal}

:root{
  /* ========================================================
     TAXI-FARBWELT, abgeleitet von Katjas Visitenkarte:
     gelber Balken, schwarze Schrift, Schachbrettband unten.

     🚨 Grundregel dieser Palette: Gelb ist eine FLÄCHENFARBE.
     Es trägt schwarzen Text hervorragend (über 12:1), aber
     niemals weißen. Wo früher Weiß auf Blau stand, steht
     jetzt Schwarz auf Gelb.
     ======================================================== */
  --gelb:#F5CE2E;          /* Signalgelb der Karte, Schwarz darauf 12,4:1 */
  --gelb-tief:#E0B90F;     /* Hover und Kanten */
  --gelb-hell:#FDF3CE;     /* getönte Flächen, Infokarten */
  --gelb-nebel:#FEFAEC;    /* sehr helle Abschnitte */

  --tinte:#16161A;         /* auf Weiß 17,6:1, auf Gelb 12,4:1 */
  --nacht:#16161A;         /* Dunkelgrund, Schachbrett-Schwarz */
  --nacht-2:#26262C;       /* Hover auf dunklen Flächen */
  --grafit:#4A4A52;        /* die diagonale Fläche der Visitenkarte */

  --text:#4C4C55;          /* auf Weiß 8,0:1 */
  --text-dim:#6B6B75;      /* auf Weiß 5,4:1 */
  --hell:#FAFAF8;
  --linie:#E7E5DE;
  --linie-stark:#D8D5CB;
  --weiss:#fff;

  /* Altnamen bleiben bestehen, damit vorhandene Regeln weiterlaufen.
     Sie zeigen jetzt auf die Taxi-Palette. */
  --blau:#16161A;
  --blau-tief:#000;
  --teal:#8A6D00;          /* Auszeichnungsfarbe, auf Weiß 5,3:1 */
  --teal-hell:var(--gelb);
  --blau-nebel:var(--gelb-hell);

  /* Verläufe: Gelb bleibt Gelb, damit schwarzer Text überall trägt. */
  --grad:linear-gradient(135deg,#FBD84A,#F0C41B);
  --grad-quer:linear-gradient(90deg,#FBD84A,#F0C41B);

  --radius:16px;
  --radius-gross:22px;
  --radius-klein:12px;
  --breite:1140px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
body{
  margin:0;background:var(--weiss);color:var(--text);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--breite);margin:0 auto;padding:0 24px}

h1,h2,h3{font-family:'Space',system-ui,sans-serif;color:var(--tinte);line-height:1.15;margin:0}
h1{font-weight:700;font-size:clamp(32px,5vw,52px);letter-spacing:-1.4px}
h2{font-weight:700;font-size:clamp(26px,3.4vw,38px);letter-spacing:-1px}
h3{font-weight:700;font-size:20px;letter-spacing:-.3px}
p{margin:0 0 16px}
p:last-child{margin-bottom:0}
/* Auch ol, sonst zeigt der Ablauf die Browser-Marker 1. 2. 3. zusätzlich
   zu den gestalteten Ziffern 01 02 03 in den Karten. */
ul,ol{margin:0;padding:0;list-style:none}

.grad-text{
  background:var(--grad-quer);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Sprungmarke für Tastatur und Screenreader */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--nacht);color:#fff;padding:14px 22px;border-radius:0 0 12px 0;
}
.skip:focus{left:0}

:focus-visible{outline:3px solid var(--blau);outline-offset:3px;border-radius:4px}
/* 🚨 --blau ist #16161A und damit dieselbe Farbe wie der dunkle Abschnitt.
   Ohne diese Zeile ist der Fokusrahmen dort unsichtbar (1:1). */
.sek--dunkel :focus-visible,.fuss :focus-visible{outline-color:var(--gelb)}
::selection{background:rgba(245,206,46,.45)}

/* ============================================================
   BUTTONS (sektionsunabhängig)
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:'Inter',sans-serif;font-weight:600;font-size:16px;
  padding:16px 28px;border-radius:var(--radius-klein);
  text-decoration:none;border:1.5px solid transparent;cursor:pointer;
  transition:transform .18s,box-shadow .18s,background-color .18s,border-color .18s;
  line-height:1.2;
}
.btn:hover{transform:translateY(-2px)}
.btn svg{flex:none}

.btn--tel{
  background:var(--grad);color:var(--tinte);font-size:19px;font-weight:700;
  box-shadow:0 10px 26px rgba(224,185,15,.38);
  padding:17px 30px;
}
.btn--tel:hover{box-shadow:0 14px 32px rgba(224,185,15,.50)}

.btn--linie{
  /* #A7A398 statt --linie-stark (#D8D5CB): der Rand ist die einzige
     Abgrenzung des Knopfes und lag bei 1,47:1, gebraucht sind 3:1 */
  background:var(--weiss);color:var(--tinte);border-color:#A7A398;
}
.btn--linie:hover{border-color:var(--blau);color:var(--blau)}

.btn--dunkel{
  background:var(--nacht);color:#fff;border-color:var(--nacht);
}
.btn--dunkel:hover{background:var(--nacht-2);border-color:var(--nacht-2)}

.btn--weiss{
  background:var(--gelb);color:var(--tinte);border-color:var(--gelb);font-weight:700;
}
.btn--weiss:hover{background:#FBD84A;border-color:#FBD84A}

/* ============================================================
   KOPFBEREICH
   ============================================================ */
.kopf{
  position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--linie);
}
.kopf__in{display:flex;align-items:center;gap:24px;padding:14px 0}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.logo__zeichen{
  width:44px;height:44px;border-radius:13px;background:var(--grad);
  display:grid;place-items:center;flex:none;
}
/* Das echte Logo aus dem Google-Unternehmensprofil.
   Im Kopf nur die Autosilhouette als Kurzzeichen, weil der Schriftzug
   bei Kopfhöhe unleserlich würde. Volles Logo steht im Fuß. */
.logo__zeichen-bild{height:40px;width:auto;flex:none}
.logo__bild{height:54px;width:auto;flex:none}
.kopf .logo__txt{padding-left:15px;border-left:1.5px solid var(--linie)}
.fuss .logo__txt{padding-left:16px;border-left:1.5px solid rgba(255,255,255,.18)}
.logo__txt{display:flex;flex-direction:column;line-height:1.2}
.logo__txt b{
  font-family:'Space',sans-serif;font-weight:700;font-size:18px;
  color:var(--tinte);letter-spacing:-.4px;
}
.logo__txt span{font-size:12.5px;color:var(--text-dim);letter-spacing:.2px}

.nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.nav a{
  padding:10px 14px;border-radius:10px;text-decoration:none;
  color:var(--text);font-size:15.5px;font-weight:500;transition:.18s;
}
.nav a:hover{background:var(--gelb-hell);color:var(--tinte)}
.kopf .btn{padding:13px 22px;font-size:16px}
.kopf__tel{flex:none}

.menue{
  display:none;margin-left:auto;background:none;border:1.5px solid var(--linie-stark);
  border-radius:10px;padding:10px 12px;cursor:pointer;color:var(--tinte);
}

/* ============================================================
   BÜHNE mit vollflächigem Film
   ============================================================ */
.buehne{
  position:relative;background:var(--nacht);
  padding:clamp(90px,13vw,150px) 0 0;
  isolation:isolate;
}

/* Der Film liegt hinter allem und deckt die volle Breite */
.buehne__film{position:absolute;inset:0;overflow:hidden;z-index:-1}
.buehne__video{
  width:100%;height:100%;object-fit:cover;object-position:center 58%;
  display:block;
}
/* Sehr langsamer Zoom. Er gibt dem Standbild Leben, ohne dass
   die Schrift darüber zu wandern beginnt. */
@media (prefers-reduced-motion:no-preference){
  .buehne__video{animation:heranfahren 26s ease-in-out infinite alternate}
}
@keyframes heranfahren{
  from{transform:scale(1.06)}
  to{transform:scale(1.16)}
}

/* Der Schleier macht die Schrift lesbar. Links deckend, rechts offen,
   damit das Fahrzeug sichtbar bleibt. Werte sind gemessen, nicht geschätzt:
   Weiß auf dem hellsten Punkt unter der Schrift liegt bei 8,9:1. */
.buehne__schleier{
  position:absolute;inset:0;display:block;
  background:
    linear-gradient(96deg,
      rgba(6,14,24,.94) 0%,
      rgba(6,14,24,.90) 26%,
      rgba(6,14,24,.72) 48%,
      rgba(6,14,24,.34) 72%,
      rgba(6,14,24,.24) 100%),
    linear-gradient(to top, rgba(6,14,24,.85) 0%, rgba(6,14,24,0) 34%);
}

.buehne__in{position:relative;padding-bottom:clamp(80px,11vw,130px)}
.buehne__text{max-width:660px}

.pillen{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}
.pill{
  display:inline-flex;align-items:center;gap:9px;padding:9px 17px;border-radius:100px;
  background:rgba(255,255,255,.12);color:#fff;font-size:14.5px;font-weight:600;
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(8px);
}
.pill--zeit svg{flex:none;opacity:.9}
.pill i{
  width:8px;height:8px;border-radius:50%;background:var(--gelb);display:block;flex:none;
  box-shadow:0 0 0 0 rgba(245,206,46,.8);
}
@media (prefers-reduced-motion:no-preference){
  .pill i{animation:pulsieren 2.6s ease-out infinite}
}
@keyframes pulsieren{
  0%{box-shadow:0 0 0 0 rgba(245,206,46,.75)}
  70%{box-shadow:0 0 0 9px rgba(245,206,46,0)}
  100%{box-shadow:0 0 0 0 rgba(245,206,46,0)}
}

.buehne h1{
  color:#fff;margin-bottom:22px;
  font-size:clamp(38px,6.4vw,72px);letter-spacing:-2.4px;line-height:1.06;
  text-shadow:0 2px 24px rgba(0,0,0,.35);
}
.buehne h1 .grad-text{
  background:linear-gradient(92deg,#FBD84A,#F0C41B);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.buehne__lead{
  font-size:clamp(17.5px,1.5vw,20px);line-height:1.65;color:#DCE6EF;
  margin-bottom:34px;max-width:560px;
}
.buehne__cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:26px}
.buehne__hinweis{
  display:flex;align-items:center;gap:10px;font-size:15.5px;color:#C3D0DC;font-weight:500;
}

/* Kennzeichnung des synthetischen Videos. Bewusst leise gehalten:
   sie muss erkennbar sein, aber nicht mit der Telefonnummer konkurrieren. */
/* Kennzeichnung des synthetischen Videos.
   Liegt in der äußersten unteren rechten Ecke der Videofläche, mit
   z-index über der Kennzahlenkarte. Deshalb ohne Icon und nur ein Wort:
   neben der Karte bleiben rechts nur rund 90 px Platz. */
.ki-hinweis{
  position:absolute;right:10px;bottom:8px;margin:0;z-index:4;
  font-size:10px;letter-spacing:.2px;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.8);
  white-space:nowrap;
  /* 🚨 Nicht weiter herunterziehen. Sie stand auf 20 % und war damit auf
     Touchgeräten nie sichtbar: Ein <p> lässt sich nicht fokussieren, und
     ohne Maus gibt es kein :hover. Art. 50 Abs. 4 KI-VO verlangt eine
     klar erkennbare Offenlegung, die Fassung erfüllte das nicht.
     Das Kästchen hält den Hinweis lesbar, ohne dass er das Bild stört. */
  opacity:.85;transition:opacity .25s;cursor:default;
  background:rgba(6,14,24,.55);border-radius:6px;padding:2px 8px;
}
.ki-hinweis:hover,.ki-hinweis:focus-visible{opacity:1}

/* Kennzeichnung der Fuhrparkbilder. Gleiche Pflicht wie beim Video,
   Art. 50 unterscheidet nicht zwischen Bild und Bewegtbild. Als ein
   Satz unter dem Raster statt als vier Aufkleber im Bild: zuordenbar,
   dauerhaft lesbar, und das Raster bleibt ruhig. */
.ki-sammel{
  margin:22px 0 0;font-size:14px;color:var(--text-dim);text-align:center;
}

/* Halteknopf für das Bühnenvideo (WCAG 2.2.2). Sitzt links neben der
   KI-Kennzeichnung, gleiche Optik, damit die Ecke ruhig bleibt. */
.video-halt{
  position:absolute;right:112px;bottom:6px;z-index:4;
  display:grid;place-items:center;width:26px;height:26px;
  border:none;border-radius:6px;cursor:pointer;
  background:rgba(6,14,24,.55);color:#fff;opacity:.85;
  transition:opacity .25s,background .25s;
}
.video-halt:hover,.video-halt:focus-visible{opacity:1;background:rgba(6,14,24,.8)}
@media(max-width:640px){ .video-halt{right:auto;left:10px} }

.btn--gross{font-size:21px;padding:19px 34px}
.btn--glas{
  background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.32);
  backdrop-filter:blur(10px);
}
.btn--glas:hover{background:rgba(255,255,255,.19);border-color:#fff}

/* Auftritt: der Text fährt einmal sanft ein. Nur wenn Bewegung erwünscht ist. */
@media (prefers-reduced-motion:no-preference){
  .buehne__text > *{animation:auftritt .7s cubic-bezier(.16,1,.3,1) backwards}
  .buehne__text > :nth-child(1){animation-delay:.05s}
  .buehne__text > :nth-child(2){animation-delay:.15s}
  .buehne__text > :nth-child(3){animation-delay:.25s}
  .buehne__text > :nth-child(4){animation-delay:.35s}
  .buehne__text > :nth-child(5){animation-delay:.45s}
}
@keyframes auftritt{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:none}
}

/* Kennzahlen: liegen zur Hälfte noch im Film, zur Hälfte schon im hellen
   Bereich darunter. Das negative margin zieht den Folgeabschnitt hoch. */
.zahlen{
  position:relative;z-index:3;
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-radius:var(--radius-gross);
  background:var(--weiss);overflow:hidden;
  box-shadow:0 26px 60px rgba(6,14,24,.30);
  margin-bottom:clamp(-84px,-6vw,-60px);
}
.zahlen li{padding:28px 24px;border-right:1.5px solid var(--linie)}
.zahlen li:last-child{border-right:none}
.zahlen b{
  display:block;font-family:'Space',sans-serif;font-weight:700;font-size:40px;
  line-height:1;letter-spacing:-1.5px;margin-bottom:8px;
  background:linear-gradient(90deg,#1F1F26,#5A5A64);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.zahlen span{font-size:15px;color:var(--text-dim);line-height:1.45;display:block}

/* Faktenkarte */
.fakten{background:var(--nacht);border-radius:var(--radius-gross);padding:30px;color:#fff}
.fakten__wert{
  font-family:'Space',sans-serif;font-weight:700;font-size:54px;line-height:1;
  letter-spacing:-2px;
  background:linear-gradient(135deg,#FBD84A,#F0C41B);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  display:flex;align-items:baseline;gap:6px;
}
.fakten__wert em{font-style:normal;font-size:28px}
.fakten p{font-size:14.5px;color:#A6B6C6;line-height:1.55;margin:10px 0 22px}
.fakten__linie{height:1px;background:rgba(255,255,255,.15);margin-bottom:18px}
.fakten__zeile{
  display:flex;justify-content:space-between;gap:16px;
  font-size:14.5px;color:#C3D0DC;padding:8px 0;
}
.fakten__zeile b{color:#fff;font-weight:600;text-align:right}

/* ============================================================
   SEKTIONEN
   ============================================================ */
.sek{padding:76px 0}
/* Der erste Abschnitt nach der Bühne braucht Luft, weil die
   Kennzahlenkarte von oben hineinragt. */
.buehne + .sek{padding-top:clamp(130px,13vw,170px)}
.sek--hell{background:var(--hell);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.sek--dunkel{background:var(--nacht);color:#C3D0DC}
.sek--dunkel h2,.sek--dunkel h3{color:#fff}

.sek__kopf{max-width:660px;margin-bottom:44px}
.sek__kopf.mitte{margin-left:auto;margin-right:auto;text-align:center}
.marke{
  display:block;font-size:12.5px;font-weight:600;letter-spacing:2.2px;
  /* #6E5600 statt --teal: 12,5 px sind klein, da soll mehr Puffer sein als 4,92:1 */
  text-transform:uppercase;color:#6E5600;margin-bottom:14px;
}
.sek--dunkel .marke{color:var(--gelb)}
.sek__kopf h2{margin-bottom:14px}
.sek__kopf p{font-size:18px;color:var(--text)}
.sek--dunkel .sek__kopf p{color:#A6B6C6}

/* Leistungen */
.leist{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.leist li{
  background:var(--weiss);border:1.5px solid var(--linie);border-radius:var(--radius);
  padding:26px 24px;transition:.2s;
}
.leist li:hover{border-color:var(--teal-hell);transform:translateY(-3px);box-shadow:0 14px 30px rgba(14,27,42,.07)}
.ikon{
  width:46px;height:46px;border-radius:13px;background:var(--blau-nebel);
  display:grid;place-items:center;margin-bottom:16px;color:var(--blau-tief);
}
.leist h3{margin-bottom:6px}
.leist p{font-size:15.5px;color:var(--text-dim);margin:0}

/* Zweispalter */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.duo--schmal{grid-template-columns:1.05fr .95fr}
.duo h2{margin-bottom:18px}

/* Prüfliste */
.haken{margin-top:22px}
.haken li{display:flex;gap:13px;align-items:flex-start;margin-bottom:14px;font-size:16.5px}
.haken li:last-child{margin-bottom:0}
.haken li i{
  width:26px;height:26px;border-radius:8px;background:var(--gelb);
  /* #5C4700 statt --teal (#8A6D00): auf Gelb nur 3,22:1, gebraucht 4,5:1 */
  display:grid;place-items:center;flex:none;margin-top:3px;color:#5C4700;
  font-style:normal;font-size:14px;font-weight:700;line-height:1;
}
.haken li b{color:var(--tinte);font-weight:600}
.sek--dunkel .haken li i{background:rgba(245,206,46,.18);color:var(--gelb)}
.sek--dunkel .haken li{color:#C3D0DC}
.sek--dunkel .haken li b{color:#fff}

/* Infokarte */
.info{
  background:var(--weiss);border:1.5px solid var(--linie);border-radius:var(--radius-gross);
  padding:32px;
}
.info h3{margin-bottom:14px}
.info--blau{background:var(--blau-nebel);border-color:#D5E3FF}
.info--dunkel{
  background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.14);
}
.info--dunkel h3{color:#fff}
.info--dunkel .info__zeile{border-bottom-color:rgba(255,255,255,.13);color:#A6B6C6}
.info--dunkel .info__zeile b{color:#fff}

/* Fuhrpark: vier Fahrzeugtypen, deshalb vier Spalten wie bei den Leistungen */
.fuhrpark{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.fuhrpark li{
  background:var(--weiss);border:1.5px solid var(--linie);border-radius:var(--radius-gross);
  overflow:hidden;display:flex;flex-direction:column;transition:.2s;
}
.fuhrpark li:hover{border-color:var(--teal-hell);transform:translateY(-3px);box-shadow:0 16px 34px rgba(14,27,42,.08)}
.fuhrpark img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--hell)}
.fuhrpark__txt{padding:24px}
.fuhrpark h3{margin:10px 0 8px}
.fuhrpark p{font-size:15.5px;color:var(--text-dim);margin:0}
.tag{
  display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:1.4px;
  text-transform:uppercase;padding:5px 11px;border-radius:100px;
  background:var(--gelb);color:var(--tinte);
}
.info__zeile{
  /* 🚨 Kein flex-wrap. Damit rutscht der Wert schon bei normaler Schrift
     unter die Beschriftung, statt rechts zu stehen. Gegen Kollisionen bei
     großer Systemschrift hilft min-width:0 an beiden Seiten: der Wert
     bricht dann innerhalb seiner eigenen Spalte um und bleibt rechts. */
  display:flex;justify-content:space-between;gap:18px;padding:14px 0;
  border-bottom:1px solid var(--linie);font-size:16px;
}
/* Die Beschriftung ist kurz und bleibt einzeilig, der Wert darf umbrechen.
   Andersherum stünde links „Genehmigung der / Kasse" auf zwei Zeilen. */
.info__zeile > span{flex:0 0 auto}
.info__zeile:last-child{border-bottom:none;padding-bottom:0}
.info__zeile:first-child{padding-top:0}
.info__zeile b{color:var(--tinte);font-weight:600;text-align:right;flex:0 1 auto;min-width:0}

/* Schritte */
.schritte{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:s}
.schritte li{
  background:var(--weiss);border:1.5px solid var(--linie);border-radius:var(--radius);
  padding:30px 26px;position:relative;counter-increment:s;
}
.schritte li::before{
  content:counter(s,decimal-leading-zero);
  font-family:'Space',sans-serif;font-weight:700;font-size:38px;line-height:1;
  background:linear-gradient(90deg,#1F1F26,#5A5A64);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  display:block;margin-bottom:14px;
}
.schritte h3{margin-bottom:8px}
.schritte p{font-size:15.5px;color:var(--text-dim);margin:0}

/* Gebiet */
.orte{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.orte li{
  background:var(--weiss);border:1.5px solid var(--linie);border-radius:100px;
  padding:9px 18px;font-size:15.5px;color:var(--text);font-weight:500;
}

/* Bewertung */
.bewertung{
  display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  background:var(--weiss);border:1.5px solid var(--linie);border-radius:var(--radius-gross);
  padding:30px 34px;
}
.bewertung__zahl{
  font-family:'Space',sans-serif;font-weight:700;font-size:56px;line-height:1;
  color:var(--tinte);letter-spacing:-2px;
}
/* Gold abgedunkelt: #F5A524 lag auf Weiß bei 2,04:1 und riss damit
   die 3:1-Grenze für grafische Elemente. #D97706 liegt bei 3,15:1. */
.bewertung__sterne{color:#A86A00;font-size:22px;letter-spacing:2px;line-height:1.2}
.bewertung p{font-size:15.5px;color:var(--text-dim);margin:4px 0 0}

/* FAQ */
.faq{max-width:820px;margin:0 auto}
.faq details{
  background:var(--weiss);border:1.5px solid var(--linie);border-radius:var(--radius);
  margin-bottom:12px;overflow:hidden;
}
.faq details[open]{border-color:var(--teal-hell)}
.faq summary{
  padding:22px 26px;cursor:pointer;font-weight:600;font-size:17.5px;color:var(--tinte);
  display:flex;justify-content:space-between;align-items:center;gap:18px;list-style:none;
  font-family:'Space',sans-serif;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";font-size:26px;font-weight:400;color:var(--teal);flex:none;
  transition:transform .2s;line-height:1;
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq__txt{padding:0 26px 24px;font-size:16.5px;color:var(--text)}

/* Kontakt */
.kontakt{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start}
.feld{margin-bottom:16px}
.feld label{display:block;font-size:15px;font-weight:600;color:#fff;margin-bottom:7px}
.feld input,.feld textarea,.feld select{
  width:100%;padding:14px 16px;border-radius:var(--radius-klein);
  border:1.5px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);
  color:#fff;font-family:'Inter',sans-serif;font-size:16px;
}
.feld input::placeholder,.feld textarea::placeholder{color:#8497A8}
.feld input:focus,.feld textarea:focus,.feld select:focus{
  outline:none;border-color:var(--gelb);background:rgba(255,255,255,.11);
}
.feld select option{background:var(--nacht);color:#fff}
.feld--zwei{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.zustimmung{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:#A6B6C6;margin-bottom:20px}
.pflicht-hinweis{margin:0 0 18px;font-size:14.5px;color:#A6B6C6}
/* Honigtopf: aus dem Blickfeld, aber nicht display:none. Manche Bots
   ueberspringen versteckte Felder, off-screen fuellen sie brav aus. */
.honigtopf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formular__fehler{
  margin:0 0 18px;padding:14px 18px;border-radius:12px;
  background:rgba(220,80,80,.14);border:1.5px solid #E88;
  color:#FFD9D9;font-size:15.5px;font-weight:600;
}
.zustimmung input{width:24px;height:24px;flex:none;margin-top:3px;accent-color:var(--gelb)}
/* Unterstrich nicht dem Browser überlassen: Gelb und der graue Fließtext
   daneben trennen sich nur mit 1,36:1, Farbe allein reicht als Merkmal nicht. */
.zustimmung a{color:var(--gelb);text-decoration:underline}
.formular__hinweis{font-size:14px;color:#8497A8;margin-top:14px}

.kontaktdaten li{
  display:flex;gap:15px;align-items:flex-start;padding:18px 0;
  border-bottom:1px solid rgba(255,255,255,.13);
}
.kontaktdaten li:last-child{border-bottom:none}
.kontaktdaten i{
  width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.09);
  display:grid;place-items:center;flex:none;color:var(--gelb);
}
.kontaktdaten b{display:block;color:#fff;font-size:17px;font-weight:600;margin-bottom:2px}
.kontaktdaten span{font-size:15.5px;color:#A6B6C6}
.kontaktdaten a{color:#fff;text-decoration:none;font-size:20px;font-weight:600}
.kontaktdaten a:hover{text-decoration:underline}

/* Fuß */
.fuss{background:#08111C;color:#8497A8;padding:52px 0 34px;font-size:15px}
.fuss__oben{display:flex;justify-content:space-between;gap:34px;flex-wrap:wrap;margin-bottom:34px}
.fuss .logo__txt b{color:#fff}
.fuss .logo__txt span{color:#8497A8}
.fuss__links{display:flex;gap:26px;flex-wrap:wrap;align-items:center}
.fuss__links a{color:#C3D0DC;text-decoration:none}
.fuss__links a:hover{text-decoration:underline;color:#fff}
.fuss__unten{
  border-top:1px solid rgba(255,255,255,.10);padding-top:24px;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:14px;
}

/* Credit für Medienmaster. Die Wortmarke folgt dem eigenen Corporate
   Design: MEDIEN in Weiß, MASTER in der Akzentfarbe, Space Grotesk. */
.credit{display:inline-flex;align-items:center;gap:7px;color:#8B8B96}
.credit a{
  font-family:'Space',sans-serif;font-weight:700;letter-spacing:.5px;
  color:#DDD;text-decoration:none;transition:color .2s;
}
.credit a b{color:var(--gelb);font-weight:700}
.credit a:hover{color:#fff}

/* Anrufbalken, nur schmal sichtbar */
.anrufbalken{display:none}
@media (max-width:980px){
  .anrufbalken{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:120;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.94);backdrop-filter:blur(12px);
    border-top:1px solid var(--linie);
  }
  .anrufbalken .btn{width:100%;font-size:18px;padding:16px 20px}
  /* Platz schaffen, damit der Balken nichts verdeckt */
  .fuss{padding-bottom:110px}
}

/* Entwurfsband */
.band{
  background:var(--grad-quer);color:var(--tinte);text-align:center;
  padding:11px 24px;font-size:14.5px;font-weight:500;
}
.band b{font-weight:600}

/* ============================================================
   BEWEGUNG UND EFFEKTE

   Grundsatz für dieses Projekt: Die Zielgruppe ist über 70. Effekte
   dürfen Aufmerksamkeit lenken, aber niemals das Lesen erschweren
   oder den Weg zur Telefonnummer verlängern. Alles hier liegt hinter
   prefers-reduced-motion und ist ohne Bewegung voll benutzbar.
   ============================================================ */

/* Fortschrittsbalken über die ganze Seite */
.fortschritt{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:200;
  background:var(--grad-quer);pointer-events:none;
  transition:width .12s linear;
}

@media (prefers-reduced-motion:no-preference){
  /* Einfahren beim Einscrollen. Bewusst kurzer Weg (22px) und weiche
     Kurve, damit es ruhig wirkt und nicht springt. */
  .zeigt{
    opacity:0;transform:translateY(22px);
    transition:opacity .65s cubic-bezier(.16,1,.3,1),
               transform .65s cubic-bezier(.16,1,.3,1);
  }
  .zeigt.da{opacity:1;transform:none}
}

/* Lichtschein folgt der Maus über den Karten */
.leist li,.schritte li,.fuhrpark li{position:relative;overflow:hidden}
.leist li::after,.schritte li::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
             rgba(245,206,46,.16),transparent 62%);
  opacity:0;transition:opacity .3s;
}
.leist li:hover::after,.schritte li:hover::after{opacity:1}

/* Glanzstreifen fährt über die Fahrzeugbilder */
.fuhrpark li::before{
  content:"";position:absolute;top:0;left:-70%;width:48%;height:62%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);z-index:2;pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  .fuhrpark li::before{transition:left .8s cubic-bezier(.16,1,.3,1)}
  .fuhrpark li:hover::before{left:130%}
}
.fuhrpark img{transition:transform .6s cubic-bezier(.16,1,.3,1)}
.fuhrpark li:hover img{transform:scale(1.045)}

/* Ruhige Farbwolken in den hellen Abschnitten, damit sie nicht
   als leere Flächen wirken */
.sek--hell{position:relative;overflow:hidden}
.sek--hell::before{
  content:"";position:absolute;top:-160px;right:-140px;
  width:520px;height:520px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(245,206,46,.20),transparent 66%);
}
.sek--hell::after{
  content:"";position:absolute;bottom:-190px;left:-150px;
  width:460px;height:460px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(74,74,82,.07),transparent 66%);
}
.sek--hell > .wrap{position:relative;z-index:1}

/* Balken unter den Abschnittsüberschriften, wächst beim Einscrollen */
.sek__kopf h2{position:relative;padding-bottom:16px}
.sek__kopf h2::after{
  content:"";position:absolute;left:0;bottom:0;height:4px;width:0;
  border-radius:4px;background:var(--grad-quer);
}
.sek__kopf.mitte h2::after{left:50%;transform:translateX(-50%)}
.sek__kopf h2.da::after{width:74px}
@media (prefers-reduced-motion:no-preference){
  .sek__kopf h2::after{transition:width .8s cubic-bezier(.16,1,.3,1) .15s}
}
@media (prefers-reduced-motion:reduce){
  .sek__kopf h2::after{width:74px}
}

/* Zahlen zählen beim Erscheinen hoch, deshalb feste Ziffernbreite,
   sonst zappelt die Kachel während des Zählens */
.zahlen b{font-variant-numeric:tabular-nums}

/* FAQ öffnet weich statt zu springen */
@media (prefers-reduced-motion:no-preference){
  .faq details::details-content{
    block-size:0;overflow:hidden;
    transition:block-size .35s cubic-bezier(.16,1,.3,1), content-visibility .35s allow-discrete;
  }
  .faq details[open]::details-content{block-size:auto}
}

/* ============================================================
   RESPONSIV
   ============================================================ */
@media (max-width:980px){
  .duo,.duo--schmal,.kontakt{grid-template-columns:1fr;gap:38px}
  /* Auf schmalen Schirmen deckt der Schleier die ganze Fläche,
     sonst steht die Schrift auf dem hellen Himmel. */
  .buehne__schleier{
    background:
      linear-gradient(180deg, rgba(6,14,24,.88) 0%, rgba(6,14,24,.78) 55%, rgba(6,14,24,.90) 100%);
  }
  .buehne__video{object-position:center 55%}
  /* Auf schmalen Schirmen bleibt die Ecke, nur etwas weiter innen */
  .ki-hinweis{right:14px;bottom:10px}
  .leist,.fuhrpark{grid-template-columns:repeat(2,1fr)}
  .schritte{grid-template-columns:1fr}
  .zahlen{grid-template-columns:repeat(2,1fr)}
  .zahlen li:nth-child(2){border-right:none}
  .zahlen li:nth-child(-n+2){border-bottom:1.5px solid var(--linie)}
  .nav{display:none}
  .nav.offen{
    display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    background:#fff;border-bottom:1px solid var(--linie);padding:12px 24px 20px;gap:2px;
    box-shadow:0 18px 34px rgba(14,27,42,.10);
  }
  .nav.offen a{padding:14px 12px;font-size:17px}
  .menue{display:block}
  .kopf__tel{display:none}
  .kopf__in{position:relative}
}
@media (max-width:640px){
  body{font-size:16.5px}
  .sek{padding:56px 0}
  .buehne{padding:44px 0 54px}
  .leist,.fuhrpark{grid-template-columns:1fr}
  .feld--zwei{grid-template-columns:1fr}
  .btn{width:100%}
  .buehne__cta{flex-direction:column}
  .bewertung{padding:24px}
  .info{padding:24px}
  .fakten{padding:24px}
}


/* ============================================================
   TAXI-SCHACHBRETT
   Das Band von Katjas Visitenkarte. Es trennt Abschnitte und
   ist das Element, das die Seite ohne ein Wort als Taxi lesbar
   macht. Bewusst sparsam: zweimal auf der Seite, nicht öfter.
   ============================================================ */
/* 🚨 display:block ist Pflicht. Als <span> bleibt das Element inline,
   dann greifen height und width nicht und das Band ist unsichtbar. */
.schachbrett{
  display:block;height:13px;width:100%;
  background:repeating-linear-gradient(90deg,
    var(--gelb) 0 13px, var(--tinte) 13px 26px);
}
.schachbrett--versetzt{
  background:repeating-linear-gradient(90deg,
    var(--tinte) 0 13px, var(--gelb) 13px 26px);
}
/* Zwei Reihen versetzt ergeben erst das echte Schachbrett */
.schachbrett-band{display:block;line-height:0;font-size:0}

/* Schmale Fassung als Abschnittstrenner */
.schachbrett-band--schmal .schachbrett{height:9px}
.schachbrett-band--schmal .schachbrett:first-child{
  background:repeating-linear-gradient(90deg,var(--gelb) 0 9px, var(--tinte) 9px 18px);
}
.schachbrett-band--schmal .schachbrett:last-child{
  background:repeating-linear-gradient(90deg,var(--tinte) 0 9px, var(--gelb) 9px 18px);
}

@media (max-width:640px){
  .schachbrett{height:10px;background-size:20px 100%}
  .schachbrett-band--schmal .schachbrett{height:7px;background-size:14px 100%}
}