/* ============================================================
   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}

/* Die Firmierung "Taxi- & Mietwagenservice" ist gut doppelt so lang wie der
   frühere Name im Kopf. Damit die Kopfzeile nicht umbricht, steht sie dort
   eine Spur kleiner und darf nie brechen. Im Fuß ist Platz genug. */
.kopf .logo__txt b{font-size:16px;white-space:nowrap}
.kopf .logo__txt span{white-space:nowrap}

.nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.nav a{
  padding:10px 12px;border-radius:10px;text-decoration:none;
  color:var(--text);font-size:15px;font-weight:500;transition:.18s;
  white-space:nowrap;
}
.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){
  /* Gemessen: die Firmierung ist bei 16px 187px breit, der ganze Logo-Block
     damit 285px. Bei 375px Viewport bleiben neben dem Burger nur rund 275px.
     Bei 14px sind es 162px Text und 260px Block, das passt. */
  .kopf .logo__txt b{font-size:14px}
  .kopf .logo__txt span{font-size:11.5px}
  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}
}

/* Unter 400px reicht auch 14px nicht mehr. Hier darf der Name umbrechen.
   Zwei Zeilen im Kopf sind harmlos, ein waagerechter Überlauf nicht. */
@media (max-width:400px){
  .kopf .logo__txt b{white-space:normal;font-size:13.5px;line-height:1.15}
  .kopf .logo__txt span{white-space:normal}
}


/* ============================================================
   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%}
}