/* Reifen Krautwurst - Komponentenstile
   Erzeugt aus prototyp/v4-final.html durch theme/_build_css.py.
   Nicht von Hand aendern: beim naechsten Lauf wird die Datei ueberschrieben.
   Farben stammen aus theme.json; die Werte hier sind nur Rueckfallwerte. */

:root{
  --blue:var(--wp--preset--color--blau,#004B93);
  --blue-deep:var(--wp--preset--color--blau-tief,#003567);
  --blue-mid:var(--wp--preset--color--blau-mittel,#0A5EAF);
  --blue-bright:var(--wp--preset--color--blau-hell,#4A90D9);
  --green:var(--wp--preset--color--gruen,#36A431);
  --green-bright:var(--wp--preset--color--gruen-hell,#4ECC46);
  --green-deep:var(--wp--preset--color--gruen-tief,#26761F);   /* 2C8A28 erreichte nur 4,40:1, jetzt 5,69 */
  --rust:var(--wp--preset--color--rost,#C25A1E);
  --rust-deep:var(--wp--preset--color--rost-tief,#A04A19);   /* Rost als Text. #C25A1E liegt bei 4,40:1 */
  --ink:var(--wp--preset--color--tinte,#0A1420);
  --ink-70:#41505F;
  /* 6E7C8C erreichte auf Weiss 4,26:1, auf --sky 3,96 und auf --sky-2
     3,67. Der Ton traegt Zeitangaben, jede Erklaerung unter einer
     Auswahlkachel und jeden Hinweistext beider Formulare, also lauter
     Fliesstext mit Schwelle 4,5:1. 5D6B7A liegt bei 5,46 / 5,07 / 4,70.
     Gleiche Neutralfamilie, kein neuer Farbton. Gemessen 2026-08-28. */
  --ink-50:#5D6B7A;
  --sky:var(--wp--preset--color--himmel,#F3F7FC);
  --sky-2:var(--wp--preset--color--himmel-2,#E6EFF9);
  --line:rgba(10,20,32,.11);
  --line-blue:rgba(255,255,255,.16);

  --r:18px;
  --r-sm:12px;
  --r-xs:8px;
  --wrap:1240px;
  --gut:clamp(1.25rem,4vw,2.75rem);

  --f-d:"Fira Sans Condensed","Fira Sans","Arial Narrow",Arial,sans-serif;
  --f-b:"Fira Sans","Helvetica Neue",Arial,sans-serif;
  --f-m:"Fira Sans","Helvetica Neue",Arial,sans-serif;

  /* Fokusring. Gemessen am 28.08.2026: --green-bright erreicht auf Weiss nur
     2,09:1, auf --sky 1,94:1 und auf --sky-2 1,80:1. WCAG 2.2 SC 1.4.11
     verlangt fuer Nicht-Text 3:1, und Schriftgroesse hilft dort nicht.
     --green-deep liegt bei 4,40 / 4,09 / 3,79:1.
     Auf dunklem Grund ist es umgekehrt: --green-deep kaeme dort auf 2,80:1,
     --green-bright auf 5,89:1. Deshalb setzen dunkle Flaechen --fokus um. */
  --fokus:var(--green-deep);

  /* Bewegung. Die eingebauten CSS-Kurven sind zu weich: ease-in laesst eine
     Flaeche traege wirken, weil die ersten Millisekunden nichts passieren -
     genau der Moment, in dem hingesehen wird. Diese drei geben der Bewegung
     Kontur.
       --e-out    alles, was auftaucht oder auf eine Eingabe antwortet
       --e-io     Bewegung von A nach B auf der sichtbaren Flaeche
       --e-blatt  Menue und Schubladen, die iOS-Kurve aus Ionic */
  --e-out:cubic-bezier(.23,1,.32,1);
  --e-io:cubic-bezier(.77,0,.175,1);
  --e-blatt:cubic-bezier(.32,.72,0,1);
}

/* Dunkle Flaechen kehren den Fokusring um. Vererbt sich an alles darin. */
.top,.hero,.mobar,.foot,.tile-blue,.tile-deep{--fokus:var(--green-bright)}

/* Weisse Karten, die in einer dunklen Flaeche liegen, drehen zurueck.
   Wichtigster Fall: das Anfrageformular steht auf der Startseite mitten
   im Hero. Ohne diese Zeile erbten seine Felder den hellen Ring auf Weiss. */
.anfrage,.status-card,.karte,.tile-white{--fokus:var(--green-deep)}

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;background:var(--sky);color:var(--ink);
  font-family:var(--f-b);font-size:1.0625rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Versalien-Schmalschrift für die grossen Überschriften (aus V3) */
h1,h2{font-family:var(--f-d);font-weight:800;letter-spacing:-.01em;line-height:1;margin:0;text-wrap:balance;hyphens:auto;hyphenate-limit-chars:10 4 4;overflow-wrap:break-word}
h3{font-family:var(--f-b);font-weight:700;letter-spacing:-.02em;line-height:1.15;margin:0}
p{margin:0}
a{color:inherit}
img,svg{max-width:100%}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.stack{display:flex;flex-direction:column}

:where(a,button,input,select,textarea,summary):focus-visible{outline:3px solid var(--fokus);outline-offset:3px;border-radius:6px}

/* Weisse Schrift auf --green misst 3,23:1. Das reicht nur als Grosstext,
   also ab 18,66 px bei Gewicht 700. Deshalb tragen alle gruenen Flaechen
   mit Text darauf 1.1875rem/700. Entscheidung vom 28.08.2026: die
   point-S-Flaechenfarbe #36A431 bleibt unangetastet, die Schrift waechst. */
.skip{position:absolute;left:-9999px;background:var(--green);color:#fff;padding:.8rem 1.1rem;z-index:200;font-weight:700;font-size:1.1875rem}
.skip:focus{left:0;top:0}

/* --blue-bright erreicht auf Weiss nur 3,34:1. Das Label steht in 12 px
   Gewicht 700, ist also Fliesstext mit Schwelle 4,5:1. --blue liegt bei
   8,65:1. Auf dunklem Grund uebernimmt .eyebrow.on-blue. */
.eyebrow{font-family:var(--f-m);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);display:inline-block}
.eyebrow.on-blue{color:#8FC0F5}

/* ---------- Kopfzeile ---------- */
.top{position:sticky;top:0;z-index:80;background:var(--blue-deep)}
.top-in{display:flex;align-items:center;gap:1.25rem;min-height:68px;position:relative}
.brand{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.brand svg{width:200px;height:auto;display:block}
.nav{margin-left:auto;display:flex;gap:.2rem;background:rgba(255,255,255,.07);padding:.3rem;border-radius:999px}
.nav a{font-size:.9063rem;font-weight:500;text-decoration:none;color:#CFE0F5;padding:.5rem .95rem;border-radius:999px;white-space:nowrap;transition:background .18s var(--e-out),color .18s var(--e-out)}
.nav a:hover{background:#fff;color:var(--blue-deep)}
.top-cta{display:inline-flex;align-items:center;gap:.5rem;background:var(--green);color:#fff;font-weight:700;font-size:1.1875rem;text-decoration:none;padding:.5rem 1.15rem;border-radius:999px;transition:background .18s var(--e-out);white-space:nowrap}
.top-cta:hover{background:var(--green-bright);color:var(--blue-deep)}
.burger{display:none;margin-left:auto;background:rgba(255,255,255,.1);border:0;color:#fff;border-radius:999px;padding:.9rem 1rem;font-family:var(--f-m);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}

.hinweis{background:var(--green);color:#fff;font-weight:700;font-size:1.1875rem;position:relative;z-index:79}
.hinweis .wrap{padding-block:.7rem}
.hinweis[hidden]{display:none}

/* ---------- Hero: Hallenlicht aus V3 über der Farbfläche aus V2 ---------- */
.hero{position:relative;background:var(--blue-deep);color:#fff;overflow:hidden;padding-block:clamp(2.75rem,6vw,4.5rem) clamp(5.5rem,9vw,8rem)}
.hero-foto{
  position:absolute;inset:0;
  background:repeating-linear-gradient(78deg,rgba(255,255,255,.016) 0 20px,transparent 20px 48px),var(--blue-deep);
}
.hero-licht{
  position:absolute;inset:-25% -12%;pointer-events:none;
  background:
    linear-gradient(78deg,transparent 33%,rgba(80,160,255,.20) 45%,rgba(47,127,224,.05) 56%,transparent 65%),
    radial-gradient(62% 60% at 76% 6%,rgba(0,67,141,.6),transparent 72%);
}
.hero-marke{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--f-m);font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.34);text-align:center;pointer-events:none;line-height:2;
}
.hero .wrap{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:clamp(2rem,4.5vw,3.5rem);align-items:center}
.hero h1{font-size:clamp(2.5rem,6.6vw,5rem);color:#fff;margin-block:1.2rem 1.2rem;max-width:15ch}
.hero .lead{color:#B9D2ED;max-width:44ch;font-size:clamp(1rem,1.4vw,1.1563rem)}
.hero-alt{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem;align-items:center}

/* Auftritt des Heros. Laeuft beim Laden, nicht beim Scrollen, und ist
   deshalb kurz gehalten: 480 ms fuer das letzte Stueck, davor drei Stufen
   zu 70 ms.
   Die Ueberschrift bekommt bewusst eine eigene Kurve ohne Deckkraft.
   Chrome zaehlt ein Element mit opacity:0 nicht als gemalt; die Zeile waere
   sonst LCP-Kandidat und wuerde die Messung um die Dauer der Blende nach
   hinten schieben. Verschieben allein kostet nichts. */
.hero-grid > div > *{animation:hero-auf .48s var(--e-out) backwards}
.hero-grid > div > *:nth-child(2){animation-delay:.07s}
.hero-grid > div > *:nth-child(3){animation-delay:.14s}
.hero-grid > div > *:nth-child(n+4){animation-delay:.21s}
.hero-grid > div:nth-child(2) > *{animation-delay:.14s}
.hero-grid h1{animation-name:hero-titel}
@keyframes hero-auf{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes hero-titel{from{transform:translateY(16px)}to{transform:none}}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;text-decoration:none;font-weight:700;font-size:1.1875rem;padding:.95rem 1.6rem;border-radius:999px;border:1.5px solid transparent;transition:background .16s var(--e-out),color .16s var(--e-out),border-color .16s var(--e-out),transform .16s var(--e-out);cursor:pointer;font-family:var(--f-b)}
@media (hover:hover) and (pointer:fine){.btn:hover{transform:translateY(-2px)}}
.btn-go{background:var(--green);color:#fff}
.btn-go:hover{background:var(--green-bright);color:var(--blue-deep)}
.btn-clear{border-color:rgba(255,255,255,.35);color:#fff;background:none}
.btn-clear:hover{background:#fff;color:var(--blue-deep);border-color:#fff}
.btn-dark{background:var(--blue-deep);color:#fff}
.btn-dark:hover{background:var(--blue)}
.btn-soft{background:#fff;color:var(--blue-deep);border-color:var(--line)}
.btn-soft:hover{border-color:var(--blue)}
.btn-back{background:none;border:0;color:var(--ink-50);font-weight:600;padding:.6rem .2rem;cursor:pointer;font-family:var(--f-b);font-size:.9375rem}
.btn-back:hover{color:var(--blue)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}

/* =========================================================
   SCHNELLANFRAGE
   ========================================================= */
.anfrage{background:#fff;border-radius:var(--r);padding:clamp(1.4rem,2.4vw,1.9rem);color:var(--ink);box-shadow:0 26px 70px rgba(1,32,63,.32)}
.anfrage-kopf{display:flex;align-items:baseline;gap:.75rem;margin-bottom:.35rem}
.anfrage-kopf h2{font-size:1.5rem;color:var(--ink)}
.anfrage-kopf .zeit{margin-left:auto;font-family:var(--f-m);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--green-deep);white-space:nowrap}
.anfrage>.sub{font-size:.9063rem;color:var(--ink-50);margin-bottom:1.1rem}

.fortschritt{display:flex;gap:.4rem;margin-bottom:1.4rem}
.fortschritt div{flex:1;height:4px;border-radius:999px;background:var(--sky-2);overflow:hidden}
.fortschritt div::after{content:"";display:block;height:100%;width:0;background:var(--green);transition:width .28s var(--e-out)}
.fortschritt div.an::after,.fortschritt div.fertig::after{width:100%}

.schritt{display:none;flex-direction:column;gap:1.1rem}
.schritt.an{display:flex;animation:rein .26s var(--e-out)}
@keyframes rein{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
.schritt legend,.feldkopf{font-family:var(--f-m);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-50);padding:0;margin-bottom:.65rem;display:block}
.schritt fieldset{border:0;padding:0;margin:0}

/* Auswahlkacheln */
.wahl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.wahl.drei{grid-template-columns:repeat(3,minmax(0,1fr))}
.wahl label{position:relative;display:block}
.wahl input{position:absolute;opacity:0;width:0;height:0}
.wahl span{
  display:flex;flex-direction:column;gap:.15rem;align-items:flex-start;
  border:1.5px solid var(--line);border-radius:var(--r-xs);padding:.75rem .9rem;
  font-weight:600;font-size:.9688rem;cursor:pointer;transition:border-color .15s var(--e-out),background .15s var(--e-out),transform .12s var(--e-out);
}
.wahl span em{font-style:normal;font-weight:400;font-size:.8125rem;color:var(--ink-50)}
.wahl label:hover span{border-color:var(--blue-bright)}
.wahl input:checked + span{border-color:var(--green);background:rgba(54,164,49,.08);box-shadow:inset 0 0 0 1px var(--green)}
.wahl input:focus-visible + span{outline:3px solid var(--fokus);outline-offset:2px}

/* Reifenflanke */
.flanke{
  background:var(--blue-deep);border-radius:var(--r-sm);padding:1rem 1.1rem;color:#fff;
  display:flex;align-items:center;justify-content:center;gap:.35rem;
  font-family:var(--f-m);font-size:clamp(1.25rem,3.4vw,1.75rem);font-weight:500;letter-spacing:.02em;
}
.flanke b{padding:.1rem .35rem;border-radius:5px;transition:background .2s var(--e-out),color .2s var(--e-out);font-weight:500}
/* Die leeren Segmente tragen die Reifengroesse, die der Besucher noch
   eintragen soll. Das ist Inhalt, kein Dekor: #5E7EA0 lag bei 2,91:1
   auf --blue-deep und 2,05 auf --blue. #A8C6E4 liegt bei 6,96 und 4,89
   und steht schon im Stylesheet. Gemessen 2026-08-28. */
.flanke b.leer{color:#A8C6E4}
.flanke b.hat{background:var(--green);color:#fff}
.flanke i{font-style:normal;color:#A8C6E4}

.groesse{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;margin-top:.7rem}
select,input[type="text"],input[type="tel"],input[type="email"]{
  width:100%;font:inherit;font-size:1rem;padding:.75rem .85rem;border:1.5px solid var(--line);
  border-radius:var(--r-xs);background:#fff;color:var(--ink);font-family:var(--f-b);
}
select:hover,input:hover{border-color:var(--blue-bright)}
.feld{display:flex;flex-direction:column;gap:.35rem}
.feld > label{font-size:.8125rem;font-weight:600;color:var(--ink-70)}
.feld small{font-size:.75rem;color:var(--ink-50)}

.umschalt{background:none;border:0;padding:0;color:var(--blue);font-weight:600;font-size:.875rem;text-decoration:underline;cursor:pointer;text-align:left;font-family:var(--f-b)}
.umschalt:hover{color:var(--green-deep)}

.unbekannt{display:none;flex-direction:column;gap:.9rem;background:var(--sky);border-radius:var(--r-sm);padding:1rem}
.unbekannt.an{display:flex}
.gr-normal.aus{display:none}

.zustimmung{display:flex;gap:.65rem;align-items:flex-start;font-size:.8125rem;color:var(--ink-70);line-height:1.5}
.zustimmung input{margin-top:.25rem;width:18px;height:18px;flex:0 0 auto;accent-color:var(--green)}

.fehler{color:var(--rust-deep);font-size:.875rem;font-weight:600;display:none}
.fehler.an{display:block}

/* Zusage direkt ueber dem Buchungsknopf. Rueckversicherung wirkt dort,
   nicht als Warnkasten am Seitenanfang. Kein Rost: das ist kein Fehler
   und keine Warnung, sondern eine Zusage. */
.buchhinweis{font-size:.875rem;color:var(--ink-70);line-height:1.5;margin-top:.2rem}
.buchhinweis a{color:var(--blue);font-weight:600}

/* ---------- Druckzustand ----------
   Bis 2026-08-28 hatte nichts auf der Seite ein :active. Am Telefon gibt
   es keinen Hover, also gab es dort ueberhaupt keine Rueckmeldung beim
   Druecken, in einem Formular mit acht Weiter- und Zurueck-Knoepfen.
   Kurz und knapp: 0.08s, damit es wie Anfassen wirkt und nicht wie eine
   Animation. prefers-reduced-motion schaltet die Dauer ohnehin ab, die
   Rueckmeldung bleibt. */
.btn:active,.top-cta:active,.mobar a:active{transform:translateY(0) scale(.97);transition-duration:.08s}
.wahl label:active span{transform:scale(.985)}
.tile:active{transform:translateY(-1px)}
.service-punkt:active{background:#fff;transform:scale(.98)}
.btn-back:active{transform:scale(.97)}

.aktionen{display:flex;align-items:center;gap:.75rem;margin-top:.3rem;flex-wrap:wrap}
.aktionen .btn{flex:1}
/* Knopfschrift ist seit dem Kontrastfix 19 px. Auf sehr schmalen Geraeten
   passt "Termin verbindlich buchen" damit nicht mehr neben den Zurueck-Link,
   also nimmt der Knopf dort die ganze Zeile. */
@media (max-width:420px){.aktionen .btn{flex:1 1 100%}}

/* Zusammenfassung */
.fertig-karte{display:none;flex-direction:column;gap:1rem}
.fertig-karte.an{display:flex}
.haken{width:46px;height:46px;border-radius:50%;background:var(--green);display:grid;place-items:center;color:#fff;font-size:1.5rem}
.zsm{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem;background:var(--sky);border-radius:var(--r-sm);padding:1rem}
.zsm li{display:flex;gap:1rem;font-size:.9375rem}
.zsm li b{font-family:var(--f-m);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-50);flex:0 0 8.5rem;font-weight:500}
.merk{font-size:.8125rem;color:var(--ink-50);border-left:3px solid var(--blue-bright);padding-left:.85rem}

/* ---------- Statuskarte ---------- */
.status-lift{margin-top:clamp(-4.5rem,-6vw,-3rem);position:relative;z-index:10}
.status-card{background:#fff;border-radius:var(--r);padding:1.35rem clamp(1.4rem,3vw,2.2rem);box-shadow:0 24px 60px rgba(1,32,63,.16);display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem}
.puls{position:relative;width:11px;height:11px;border-radius:50%;background:var(--green);flex:0 0 auto;box-shadow:0 0 0 5px rgba(54,164,49,.18)}
/* Der Punkt sagt schon durch seine Farbe, dass geoeffnet ist. Der Ring sagt,
   dass die Angabe eben jetzt gilt und nicht aus dem Zwischenspeicher stammt.
   Deshalb laeuft er nur im Zustand offen - bei Pause und geschlossen waere
   er eine Bewegung ohne Aussage. 3,2 s, damit er nebenher liegt. */
.puls::after{
  content:"";position:absolute;inset:-1px;border-radius:50%;
  border:2px solid var(--green);pointer-events:none;
  animation:puls-ring 3.2s var(--e-out) infinite;
}
.puls.pause::after,.puls.zu::after{content:none}
@keyframes puls-ring{
  0%{transform:scale(1);opacity:.5}
  70%,100%{transform:scale(2.4);opacity:0}
}
.puls.pause{background:#E0930B;box-shadow:0 0 0 5px rgba(224,147,11,.18)}
.puls.zu{background:var(--ink-50);box-shadow:0 0 0 5px rgba(110,124,140,.15)}
.status-card b{font-family:var(--f-b);font-size:1.25rem;font-weight:700}
.status-card .sub{font-family:var(--f-m);font-size:.8125rem;color:var(--ink-50)}
.status-card .tel{margin-left:auto;font-family:var(--f-b);font-weight:600;font-variant-numeric:tabular-nums;font-size:1.5rem;text-decoration:none;color:var(--blue)}
.status-card .tel:hover{color:var(--green-deep)}

/* ---------- Laufband ---------- */
.band{background:var(--blue);color:#fff;padding-block:1.3rem;overflow:hidden;margin-top:clamp(3rem,6vw,4.5rem)}
.band-track{display:flex;gap:3.5rem;width:max-content;animation:lauf 34s linear infinite}
.band:hover .band-track{animation-play-state:paused}
@keyframes lauf{to{transform:translateX(-50%)}}
.band span{font-family:var(--f-d);font-weight:800;font-size:1.35rem;letter-spacing:.01em;opacity:.92;white-space:nowrap}

/* ---------- Abschnitte ---------- */
section{padding-block:clamp(3.5rem,7vw,5.5rem)}
.head{margin-bottom:clamp(2rem,4vw,3rem)}
.head h2{max-width:22ch;font-size:clamp(1.9rem,4.6vw,3.5rem);margin-top:1rem}
.head p{color:var(--ink-70);margin-top:1.1rem;max-width:56ch}

.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.tile{border-radius:var(--r);padding:clamp(1.5rem,2.6vw,2.1rem);text-decoration:none;display:flex;flex-direction:column;min-height:240px;transition:transform .22s var(--e-out),box-shadow .22s var(--e-out)}
@media (hover:hover) and (pointer:fine){.tile:hover{transform:translateY(-4px);box-shadow:0 20px 48px rgba(1,32,63,.14)}}
.tile h3{font-size:1.6rem;margin-block:.7rem .6rem}
.tile p{font-size:.9688rem;flex:1}
.tile .go{margin-top:1.2rem;font-weight:600;font-size:.9375rem}
.tile-blue{background:var(--blue);color:#fff;grid-column:span 2}
.tile-blue p{color:#C2D9F2}
.tile-white{background:#fff;color:var(--ink);border:1px solid var(--line)}
.tile-white p{color:var(--ink-70)}
.tile-white .go{color:var(--blue)}
/* Gruen ist hier ab 2026-08-28 Akzent, nicht Flaeche. DESIGN.md,
   Flaechenregel: keine Sektion bekommt einen gruenen Grund, so verlangt
   es das point S Corporate Design. Acht Kacheln auf der Seite standen
   dagegen, und das Eyebrow darin lag auf Gruen bei 1,04:1, war also
   unsichtbar. Die Kachel bleibt als vierte Variante unterscheidbar,
   jetzt ueber die gruene Oberkante und das gruene Icon. */
.tile-green{background:#fff;color:var(--ink);border:1px solid var(--line);border-top:3px solid var(--green)}
.tile-green p{color:var(--ink-70)}
/* --green-deep liegt bei 4,40:1 und damit knapp unter der Schwelle,
   der Verweis ist 15 px und zaehlt als Fliesstext. Deshalb derselbe
   Blauton wie bei tile-white, 8,65:1. Gruen traegt die Kachel ueber
   die Oberkante und das Icon, das reicht als Unterscheidung. */
.tile-green .go{color:var(--blue)}
.tile-deep{background:var(--blue-deep);color:#fff;grid-column:span 2}
.tile-deep p{color:#A8C6E4}

.chips{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;margin:0;padding:0}
.chips li{background:#fff;border:1px solid var(--line);border-radius:999px;padding:.7rem 1.25rem;font-weight:500;transition:border-color .18s var(--e-out),background .18s var(--e-out)}
.chips li:hover{border-color:var(--blue);background:var(--sky-2)}

.ph{margin:0;border-radius:var(--r);aspect-ratio:var(--ar,16/9);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;text-align:center;padding:1.25rem;background:repeating-linear-gradient(78deg,rgba(0,67,141,.038) 0 16px,transparent 16px 36px),var(--sky-2);border:1.5px dashed rgba(0,67,141,.3);color:var(--blue)}
.ph b{font-family:var(--f-m);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase}
.ph span{font-family:var(--f-m);font-size:.75rem;opacity:.7}

.hist{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.hist-sticky{position:sticky;top:110px}
.jahre{display:flex;flex-direction:column;gap:1rem}
.jahr{background:#fff;border-radius:var(--r-sm);padding:1.35rem 1.6rem;border:1px solid var(--line);display:flex;gap:1.4rem;align-items:baseline}
.jahr b{font-family:var(--f-d);font-weight:800;font-size:1.5rem;color:var(--blue);flex:0 0 auto;font-variant-numeric:tabular-nums}
.jahr p{color:var(--ink-70);font-size:.9688rem}
.jahr.offen{background:var(--sky-2);border-style:dashed;border-color:rgba(0,67,141,.35)}

.zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;margin-top:clamp(2.5rem,5vw,3.5rem)}
.zahl{background:var(--blue-deep);color:#fff;border-radius:var(--r-sm);padding:1.7rem 1.5rem}
.zahl b{font-family:var(--f-d);font-size:clamp(2.4rem,4.6vw,3.4rem);font-weight:800;display:block;line-height:.95;font-variant-numeric:tabular-nums}
.zahl span{display:block;margin-top:.6rem;color:#A8C6E4;font-size:.9375rem}
.zahl em{font-style:normal;font-family:var(--f-m);font-size:.6875rem;letter-spacing:.08em;color:#FFB38A;display:block;margin-top:.5rem}

.bew{background:#fff;border:1.5px dashed rgba(0,67,141,.3);border-radius:var(--r);padding:clamp(2rem,4.5vw,3rem);display:grid;gap:1.1rem;justify-items:start}
.bew h3{font-size:clamp(1.4rem,2.8vw,2rem)}
.bew p{color:var(--ink-70);max-width:62ch}

.kontakt{background:var(--blue-deep);color:#fff;border-radius:var(--r);overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.kontakt-txt{padding:clamp(2rem,4.5vw,3.25rem);display:flex;flex-direction:column;gap:1.7rem}
.kontakt h2{font-size:clamp(1.8rem,3.4vw,2.75rem)}
.kontakt a{color:#fff;font-weight:600}
.zeiten{width:100%;border-collapse:collapse;font-family:var(--f-m);font-size:.875rem}
.zeiten{--zeit-tag:var(--ink-70);--zeit-zu:var(--ink-50)}
.foot .zeiten,.tile-blue .zeiten,.tile-deep .zeiten{--zeit-tag:#A8C6E4;--zeit-zu:#A8C6E4}
.zeiten th{text-align:left;font-weight:400;color:var(--zeit-tag);padding:.4rem 0}
.zeiten td{text-align:right;padding:.4rem 0;font-variant-numeric:tabular-nums;border-bottom:1px solid var(--line-blue)}
.zeiten tr:last-child td{border-bottom:0}
.zeiten .zu{color:var(--zeit-zu)}   /* wie --zeit-tag kontextabhaengig: auf der
   weissen Kontaktkarte mass #A8C6E4 nur 1,77:1 */

.foot{background:var(--blue-deep);color:#A8C6E4;padding-block:clamp(3rem,6vw,4rem) 2rem;margin-top:clamp(3.5rem,7vw,5.5rem)}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:2.25rem}
/* Stufe 2 statt 4: die Fusszeile setzte fest h4, unabhaengig davon, was
   auf der Seite darueber stand. Auf /ueber-uns/ ergab das die Folge
   h1 h4 h4 h4, also einen Sprung um zwei Stufen. Die Fusszeile ist ein
   eigener Landmark, h2 ist dort richtig und springt nirgends.
   Farbe von #6E9BC8 auf #A8C6E4: 4,21:1 auf 6,96. */
.foot h2{font-family:var(--f-m);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:#A8C6E4;margin-bottom:1rem;font-weight:500}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.foot a{color:#fff;text-decoration:none}
.foot a:hover{color:var(--green-bright)}
.foot-bot{margin-top:2.75rem;padding-top:1.5rem;border-top:1px solid var(--line-blue);display:flex;flex-wrap:wrap;gap:1rem 1.75rem;align-items:center;font-size:.9375rem}
.foot-bot nav{display:flex;flex-wrap:wrap;gap:1.5rem;margin-left:auto}

.mobar{display:none}

.rise{opacity:0;transform:translateY(24px);transition:opacity .5s var(--e-out),transform .5s var(--e-out)}
.rise.da{opacity:1;transform:none}

@media (max-width:1040px){
  .hero-grid{grid-template-columns:1fr;gap:2.25rem}
  .hero h1{max-width:20ch}
  .hero-marke{display:none}
}
@media (max-width:980px){
  .hist,.kontakt{grid-template-columns:1fr}
  .hist-sticky{position:static}
  .bento{grid-template-columns:1fr}
  .tile-blue,.tile-deep{grid-column:auto}
}
@media (max-width:800px){
  .burger{display:block}
  .nav{
    display:none;position:absolute;left:0;right:0;top:calc(100% + .5rem);
    flex-direction:column;background:var(--blue-mid);border-radius:var(--r-sm);
    padding:.6rem;gap:.2rem;box-shadow:0 20px 50px rgba(1,32,63,.45);
    /* Es klappt aus dem Knopf heraus auf, nicht aus der Mitte. Der Knopf
       steht rechts, also ist dort der Ursprung. */
    transform-origin:top right;opacity:0;transform:translateY(-6px) scale(.97);
    transition:opacity .19s var(--e-out),transform .19s var(--e-blatt),display .19s allow-discrete;
  }
  .nav[data-open="true"]{display:flex;opacity:1;transform:none}
  /* Ohne @starting-style klappt es weiterhin auf, nur ohne Bewegung.
     Aeltere Browser verlieren nichts ausser dem Uebergang. */
  @starting-style{.nav[data-open="true"]{opacity:0;transform:translateY(-6px) scale(.97)}}
  .nav a{padding:.8rem 1rem;font-size:1rem}
  .top-cta{display:none}
  .brand svg{width:156px}
  .status-card .tel{margin-left:0;width:100%}
  .wahl.drei{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zsm li{flex-direction:column;gap:.1rem}
  .zsm li b{flex:none}
  .mobar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:95;gap:.6rem;padding:.65rem;background:rgba(1,32,63,.94);backdrop-filter:blur(10px);border-top:1px solid var(--line-blue)}
  .mobar a{flex:1;text-align:center;padding:.85rem;border-radius:999px;text-decoration:none;font-weight:600;font-size:.9688rem}
  .mobar .a1{background:#fff;color:var(--blue-deep)}
  .mobar .a2{background:var(--green);color:#fff}
  body{padding-bottom:4.75rem}
  }

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .rise{opacity:1;transform:none}
}

/* --- Reifenflanke mit fünf Segmenten ---
   Untergrenze 1.5rem = 24 px: die gefuellten Segmente tragen weisse Ziffern
   auf --green und liegen damit bei 3,23:1. Unter 24 px waere das Fliesstext
   und muesste 4,5:1 halten. Der Weg ueber Gewicht 700 steht nicht offen,
   IBM Plex Mono liegt nur als 400 und 500 im Theme. */
.flanke{font-size:clamp(1.5rem,3.6vw,1.75rem);gap:.22rem;flex-wrap:wrap;position:relative;padding:1.35rem 1rem .95rem}
.flanke::before{content:"Reifenflanke";position:absolute;left:.9rem;top:.45rem;font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:#A8C6E4}
.flankehinweis{font-size:.8125rem;color:var(--ink-70);background:#FFF3E7;border-left:3px solid var(--rust);padding:.7rem .85rem;border-radius:0 var(--r-xs) var(--r-xs) 0;margin-top:.7rem;line-height:1.5}
.groesse.fuenf{grid-template-columns:repeat(5,minmax(0,1fr))}
.groesse.fuenf .feld > label{font-size:.6875rem}
.feld > label small{font-weight:400;color:var(--ink-50)}

/* --- Fotoweg --- */
.fotoweg{display:none;flex-direction:column;gap:.7rem}
.fotoweg.an{display:flex}
.gr-normal{display:block}
.gr-normal.aus{display:none}
.ablage{position:relative;display:block;border:1.5px dashed rgba(0,67,141,.35);border-radius:var(--r-sm);background:var(--sky);padding:1.6rem 1rem;text-align:center;cursor:pointer;transition:border-color .18s var(--e-out),background .18s var(--e-out),transform .18s var(--e-out)}
@media (hover:hover) and (pointer:fine){.ablage:hover{border-color:var(--green);background:rgba(54,164,49,.06)}}
/* Der Sprung auf .hat ist die einzige Rueckmeldung, dass das Foto
   angekommen ist. Ein Hauch Groesse macht sie sichtbar, ohne die Zeile
   darunter zu verschieben. */
.ablage.hat{transform:scale(1.012)}
.ablage input{position:absolute;opacity:0;width:0;height:0}
.ablage b{display:block;font-size:.9688rem}
.ablage span{display:block;font-size:.8125rem;color:var(--ink-50);margin-top:.25rem}
.ablage.hat{border-style:solid;border-color:var(--green);background:rgba(54,164,49,.08)}
.ablage:focus-within{outline:3px solid var(--fokus);outline-offset:3px}

@media (max-width:800px){
  .groesse.fuenf{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wahl.drei{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wahl.drei span{font-size:.8438rem;padding:.65rem .5rem}
}
.lasthinweis{font-size:.75rem;color:var(--ink-50);margin-top:.5rem;line-height:1.5}
.lasthinweis.treffer{color:var(--green-deep);background:rgba(54,164,49,.09);border-radius:var(--r-xs);padding:.5rem .7rem}
.lasthinweis b{font-weight:600}
.lasthinweis .beispiel{display:block;margin-top:.3rem;color:var(--rust-deep);font-family:var(--f-m);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase}

.nav a.aktiv{background:rgba(255,255,255,.22);color:#fff}
.seitenkopf{background:var(--blue-deep);color:#fff;padding-block:clamp(2.5rem,5vw,4rem);position:relative;overflow:hidden}
.seitenkopf::before{content:"";position:absolute;inset:-30% -10%;pointer-events:none;
  background:linear-gradient(78deg,transparent 36%,rgba(80,160,255,.16) 47%,transparent 62%),
             radial-gradient(60% 60% at 78% 4%,rgba(0,67,141,.55),transparent 72%)}
.seitenkopf .wrap{position:relative}
.seitenkopf h1{font-size:clamp(2rem,5.2vw,3.75rem);color:#fff;margin-top:1rem;max-width:20ch}
.seitenkopf p{color:#B9D2ED;max-width:56ch;margin-top:1.1rem}

.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.karte{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.4rem,2.4vw,2rem);display:flex;flex-direction:column;gap:.6rem}
.karte h3{font-size:1.3rem}
.karte p{color:var(--ink-70);font-size:.9688rem}
.karte .wann{font-family:var(--f-m);font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase;color:var(--green-deep)}
.karte.blau{background:var(--blue-deep);color:#fff;border-color:transparent}
.karte.blau p{color:#B9D2ED}
.karte.blau .wann{color:#8FC0F5}

.person{display:flex;flex-direction:column;gap:.55rem}
.person .ph{border-radius:var(--r-sm);aspect-ratio:4/5}
.person b{font-size:1.0625rem;font-weight:700;display:block;line-height:1.3}
.person span{font-size:.875rem;color:var(--ink-50)}
.gruppe{margin-bottom:clamp(2rem,4vw,3rem)}
.gruppe > .eyebrow{margin-bottom:1.1rem;display:block}
.leute{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1.25rem}

.liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.liste li{display:flex;gap:.8rem;align-items:flex-start;color:var(--ink-70)}
.liste li::before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--green);margin-top:.6rem}

.rechtsblock{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.5rem,3vw,2.25rem);display:flex;flex-direction:column;gap:1rem}
.rechtsblock h3{font-size:1.25rem}
.rechtsblock dl{margin:0;display:grid;grid-template-columns:11rem 1fr;gap:.6rem 1rem;font-size:.9375rem}
.rechtsblock dt{font-family:var(--f-m);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-50);padding-top:.15rem}
.rechtsblock dd{margin:0}
.luecke{color:var(--rust-deep);font-weight:600}
@media (max-width:600px){.rechtsblock dl{grid-template-columns:1fr;gap:.15rem 0}.rechtsblock dt{margin-top:.6rem}}

textarea{width:100%;font:inherit;font-family:var(--f-b);font-size:1rem;padding:.75rem .85rem;border:1.5px solid var(--line);border-radius:var(--r-xs);background:#fff;color:var(--ink);min-height:8rem;resize:vertical}
textarea:hover{border-color:var(--blue-bright)}

.i{fill:#fff}

/* ---------- Kernblöcke von WordPress ----------
   Damit der Block-Editor dieselben Bausteine erzeugt, die das Theme kennt. */
.wp-block-group.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wp-block-heading{text-wrap:balance}

/* Buttons: Grundaussehen steht in theme.json, hier nur, was dort nicht geht.
   Zwei Klassen im Selektor, damit die Regel gegen WordPress' :root :where(...) besteht. */
.wp-block-button .wp-block-button__link{
  display:inline-flex;align-items:center;gap:.6rem;
  transition:background .16s var(--e-out),color .16s var(--e-out),border-color .16s var(--e-out),transform .16s var(--e-out);
  /* Groesse und Gewicht muessen hier stehen, nicht nur in theme.json.
     WordPress macht aus dem dortigen 1.1875rem eine fluide Groesse
     clamp(0.875rem, 0.7856rem + 0.447vw, 1.188rem), die bei 1200 px
     Fensterbreite 16,06 px ergibt. Weisse Schrift auf --gruen misst
     3,23:1 und braucht 18,66 px bei Gewicht 700, sonst gilt sie als
     Fliesstext mit Schwelle 4,5. Gemessen am 28.08.2026 auf /kontakt/. */
  font-size:1.1875rem;font-weight:700;
}
.wp-block-button .wp-block-button__link:active{transform:translateY(0) scale(.97);transition-duration:.08s}
@media (hover:hover) and (pointer:fine){
  .wp-block-button .wp-block-button__link:hover{transform:translateY(-2px)}
}
.wp-block-button.is-style-outline .wp-block-button__link{
  background:none;border-color:rgba(10,20,32,.28);color:var(--blue-deep);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover{
  background:#fff;border-color:var(--blue);color:var(--blue-deep);
}

/* Umriss-Buttons auf dunklem Grund.
   Ohne das steht die Schrift in Hintergrundfarbe und der Rahmen ist
   dunkel auf dunkel - der Button ist dann schlicht unsichtbar.
   Vier Klassen im Selektor, damit die Regel sicher gewinnt. */
.hero .wp-block-button.is-style-outline .wp-block-button__link,
.kontakt .wp-block-button.is-style-outline .wp-block-button__link,
.tile-blue .wp-block-button.is-style-outline .wp-block-button__link,
.tile-deep .wp-block-button.is-style-outline .wp-block-button__link{
  border-color:rgba(255,255,255,.45);color:#fff;
}
.hero .wp-block-button.is-style-outline .wp-block-button__link:hover,
.kontakt .wp-block-button.is-style-outline .wp-block-button__link:hover,
.tile-blue .wp-block-button.is-style-outline .wp-block-button__link:hover,
.tile-deep .wp-block-button.is-style-outline .wp-block-button__link:hover{
  background:#fff;color:var(--blue-deep);border-color:#fff;
}
.wp-block-buttons{display:flex;flex-wrap:wrap;gap:.75rem}

/* Ohne JavaScript sind alle vier Schritte gleichzeitig sichtbar.
   Das Formular bleibt damit benutzbar, die Pruefung uebernimmt der Server. */
form.anfrage:not(.mit-js) .schritt{display:flex}
form.anfrage:not(.mit-js) .fortschritt,
form.anfrage:not(.mit-js) [data-weiter],
form.anfrage:not(.mit-js) [data-zurueck]{display:none}
form.anfrage:not(.mit-js) .gr-normal.aus{display:block}
form.anfrage:not(.mit-js) .fotoweg{display:flex}


/* ---------- Reifenflanke erklaert ---------- */
.flanke-erklaert{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);align-items:center}
/* Untergrenze 1.5rem = 24 px, wie bei .flanke: die gefuellten Segmente
   tragen weisse Ziffern auf --green bei 3,23:1 und muessen deshalb
   Grosstext sein. Vorher 1.4rem, das waren 22,4 px und damit Fliesstext
   mit Schwelle 4,5:1. Am 28.08.2026 am gerenderten Ergebnis gemessen. */
.flanke.gross{font-size:clamp(1.5rem,4.2vw,2.4rem);padding:1.8rem 1.2rem 1.4rem}
.flanke-legende{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.6rem 1.1rem;align-items:baseline}
.flanke-legende dt{
  font-family:var(--f-m);font-weight:600;font-size:1rem;color:#fff;background:var(--blue-deep);
  border-radius:6px;padding:.15rem .55rem;text-align:center;min-width:2.6rem;
}
.flanke-legende dd{margin:0;color:var(--ink-70);font-size:.9688rem}
.flanke-legende dd b{color:var(--ink);font-weight:600}
@media (max-width:800px){.flanke-erklaert{grid-template-columns:1fr}}



/* ---------- Schnellanfrage auf schmalen Geraeten ----------
   Zwei Ursachen fuer zu grosse Mindestbreite:
   1. "Reifenangebot" und "4 Schritte" standen in einer Zeile ohne Umbruch
      und erzwangen zusammen 360 px.
   2. Rasterfelder haben von Haus aus min-width:auto und koennen deshalb
      nicht unter ihren Inhalt schrumpfen. */
.hero-grid > *{min-width:0}
.anfrage-kopf{flex-wrap:wrap}
.anfrage{max-width:100%}

@media (max-width:520px){
  .anfrage-kopf .zeit{white-space:normal;margin-left:0;width:100%;margin-top:.2rem}
  .anfrage-kopf h2{font-size:1.35rem}
}



/* ---------- Kleine Labels und Zwischenueberschriften ----------
   Das Label war 11 px Monospace in Versalien - als leises Kleingedrucktes
   gedacht, aber auf Seiten wie "Team" trug es die ganze Gliederung. Dort
   stand dann eine 11-px-Zeile als einzige Ueberschrift ueber einer Gruppe.
   Jetzt lesbarer, mit einem kurzen gruenen Strich davor als Anker. */
.eyebrow{
  /* Seit 2026-08-25 keine Schreibmaschinenschrift mehr. Monospace war
     die Bildsprache technischer Dokumentation und der Hauptgrund, warum die
     Seite kalt wirkte. Halbfett und gesperrt bleibt das Label ein Label,
     nur eben aus derselben Familie wie alles andere. Monospace behalten wir
     dort, wo echte Zahlen stehen: Reifengroesse und Oeffnungszeiten. */
  font-family:var(--f-b);font-weight:600;
  font-size:.8125rem;letter-spacing:.14em;
  display:inline-flex;align-items:center;gap:.7rem;
}
.eyebrow::before{
  content:"";width:22px;height:2px;background:var(--green);flex:0 0 auto;
}
.eyebrow.on-blue::before{background:var(--green-bright)}

/* Echte Zwischenueberschrift fuer Gruppen innerhalb einer Seite.
   Kleiner als h2, aber unmissverstaendlich eine Ueberschrift. */
.gruppentitel{
  /* Zieht mit h1 und h2 mit: keine Versalien mehr, schmaler und schwerer. */
  font-family:var(--f-d);font-weight:800;
  font-size:clamp(1.45rem,2.8vw,2rem);line-height:1.05;letter-spacing:-.005em;
  color:var(--ink);margin:0 0 1.2rem;padding-bottom:.6rem;
  border-bottom:2px solid var(--line);
}

/* ---------- Kopfzeile ----------
   Eine Stelle fuer alles, was den Kopf betrifft. Vorher waren es drei
   Bloecke aus drei Korrekturrunden mit vier widersprechenden Groessen -
   die letzte gewann, nicht die gemeinte.

   Das echte Firmenlogo ist blau auf hellem Reifenprofil und traegt beide
   Partnermarken. Auf dunklem Grund waere es unlesbar, also ist der Kopf
   weiss. Das nimmt der Seite oben zugleich die Schwere.
   Seitenverhaeltnis 2,32:1 - bei 180 px Breite also 78 px hoch. */
.top{background:#fff;border-bottom:1px solid var(--line);backdrop-filter:none}
.top-in{min-height:auto;padding-block:.8rem;gap:1.5rem}
.brand{flex:0 0 auto}
.brand picture{display:block}
.brand img{width:180px;height:auto;display:block}

.nav{background:var(--sky-2)}
.nav a{color:var(--blue-deep)}
.nav a:hover{background:var(--blue);color:#fff}
.burger{background:var(--sky-2);color:var(--blue-deep)}
.top-cta{background:var(--green);color:#fff}
.top-cta:hover{background:var(--green-deep);color:#fff}

/* Die point-S-Marke mit Claim in der Fusszeile */
.foot-marke{width:200px;height:auto;display:block}

/* Umschaltpunkt: Logo 180 + Menue 558 + Knopf 138 + Abstaende und Rand
   brauchen rund 1000 px. Gemessen am 25.08. bei 960 px Fensterbreite: Der
   Knopf stand 17 px ueber den Rand hinaus und die Seite liess sich seitlich
   schieben. Der Wert war fuer fuenf kurze Menuepunkte gerechnet; seit
   "Termin buchen" dazugekommen ist, braucht die Zeile mehr. */
@media (max-width:1024px){
  .burger{display:block}
  .nav{
    display:none;position:absolute;left:0;right:0;top:calc(100% + .4rem);
    flex-direction:column;background:#fff;border:1px solid var(--line);
    border-radius:var(--r-sm);padding:.6rem;gap:.2rem;
    box-shadow:0 20px 50px rgba(1,32,63,.18);z-index:90;
    /* Das Blatt ist hier weiss, nicht blau wie im Kopf. Der Fokusring erbt
       sonst --green-bright von .top und stuende auf Weiss bei 2,09:1. */
    --fokus:var(--green-deep);
  }
  /* Es klappt aus dem Knopf heraus auf, nicht aus der Mitte: Der Burger
     steht rechts, also liegt dort der Ursprung. Ohne Uebergang sprang das
     Blatt vorher schlagartig ins Bild und verdeckte die halbe Seite.
     allow-discrete haelt es beim Schliessen so lange sichtbar, bis die
     Blende durch ist. Browser ohne @starting-style schalten weiterhin
     hart um - sie verlieren die Bewegung, nicht die Funktion. */
  .nav{
    transform-origin:top right;opacity:0;transform:translateY(-6px) scale(.97);
    transition:opacity .19s var(--e-out),transform .19s var(--e-blatt),display .19s allow-discrete;
  }
  .nav[data-open="true"]{display:flex;opacity:1;transform:none}
  @starting-style{
    .nav[data-open="true"]{opacity:0;transform:translateY(-6px) scale(.97)}
  }
  .nav a{padding:.8rem 1rem;font-size:1rem}
  .top-cta{display:none}
}

@media (max-width:760px){
  .brand img{width:146px}
  .top-in{padding-block:.6rem;gap:.75rem}
  .foot-marke{width:170px}
}


/* ---------- Markenreihe ---------- */
.marken{
  display:flex;flex-wrap:wrap;gap:.75rem 2.5rem;align-items:center;
  font-family:var(--f-m);font-size:.8125rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-50);
}

/* ---------- Profiltiefe ---------- */
.profiltiefe{display:flex;flex-direction:column;gap:.5rem}
.profiltiefe .stufe{display:grid;grid-template-columns:4.5rem 1fr;gap:.9rem;align-items:center}
.profiltiefe .mm{font-family:var(--f-m);font-weight:500;font-size:.9375rem;text-align:right;font-variant-numeric:tabular-nums}
.profiltiefe .balken{
  height:2.1rem;border-radius:4px;display:flex;align-items:center;padding-inline:.7rem;
  background:var(--blue);color:#fff;font-size:.875rem;font-weight:500;white-space:nowrap;
  width:calc(28% + var(--anteil) * 72%);
}
/* Zwei Fehler in zwei Zeilen, gefunden am 28.08.2026 auf /reifen-und-raeder/:
   Die Variable heisst --rust, nicht --rost, es griff also nur der
   Rueckfallwert. Und #C25A1E traegt hier weisse Schrift (4,40:1) sowie die
   Zahl auf --sky (4,09:1), beides unter der Schwelle. --rust-deep bringt
   6,02 beziehungsweise 5,60. Der Balken ist die gesetzliche Mindesttiefe,
   also die Zeile, auf die es in der Grafik ankommt. */
.profiltiefe .stufe.grenze .balken{background:var(--rust-deep)}
.profiltiefe .stufe.grenze .mm{color:var(--rust-deep);font-weight:600}
@media (max-width:600px){
  .profiltiefe .stufe{grid-template-columns:3.4rem 1fr;gap:.5rem}
  .profiltiefe .balken{font-size:.8125rem;padding-inline:.5rem}
}

/* ---------- Fachbegriff im Fließtext ---------- */
.begriff{
  font-family:var(--f-m);font-size:.9em;background:var(--sky-2);
  border-radius:4px;padding:.1em .4em;white-space:nowrap;
}

/* Bildplatz auf dunklem Grund - Rostrot waere dort kaum lesbar. */
.bildplatz.auf-dunkel{
  color:#FFB38A;border-color:#FFB38A;background:rgba(255,179,138,.09);
  align-self:start;max-width:52ch;
}

/* Hinweis auf ein fehlendes Bild - faellt auf, falls er versehentlich live geht */
.bildplatz{
  font-family:var(--f-m);font-size:.8125rem;color:var(--rust-deep);
  border:1.5px dashed var(--rust);border-radius:var(--r-xs);padding:.8rem 1rem;
}

/* ---------- Einblenden beim Scrollen ----------
   Laeuft ueber site.js und einen IntersectionObserver.

   Am 2026-08-25 einmal auf reines CSS umgestellt und wieder
   zurueckgenommen. `animation-timeline: view()` meldet sich im Browser als
   unterstuetzt, lieferte aber keinen Fortschritt: Alle Elemente standen
   sofort auf voll sichtbar, bei vier verschiedenen Bereichsangaben. Nicht
   nachweisbar funktionierend heisst hier: nicht ausliefern. Wer es noch
   einmal versucht, misst zuerst die Deckkraft eines Elements weit
   unterhalb des Fensters. Steht die auf 1, laeuft nichts.

   ERSTE REGEL, wichtig: `.rise` startet im Prototypen auf `opacity:0` und
   wird nur per JavaScript sichtbar. Ohne Skript blieb alles unterhalb des
   Heros unsichtbar. Deshalb wird der Block selbst nie versteckt, nur seine
   Kinder, und die nur mit der Markierung `js`, die ein Zweizeiler im Kopf
   setzt. Kommt das Skript nicht durch, wird nichts versteckt.

   ZWEITENS der Rhythmus: Der Block bewegt sich nicht mehr als Ganzes,
   dafuer kommen seine Kinder nacheinander. */
.rise{opacity:1;transform:none;transition:none}
.js .rise > *{
  opacity:0;transform:translateY(16px);
  transition:opacity .5s var(--e-out),transform .5s var(--e-out);
}
.js .rise.da > *{opacity:1;transform:none}
.js .rise.da > *:nth-child(2){transition-delay:.06s}
.js .rise.da > *:nth-child(3){transition-delay:.12s}
.js .rise.da > *:nth-child(4){transition-delay:.18s}
.js .rise.da > *:nth-child(5){transition-delay:.24s}
.js .rise.da > *:nth-child(6){transition-delay:.3s}
.js .rise.da > *:nth-child(7){transition-delay:.36s}
.js .rise.da > *:nth-child(n+8){transition-delay:.42s}

/* Ohne diese Zeile blieben die Kinder bei abgestellter Bewegung auf
   opacity:0 stehen: Die Regel weiter oben schaltet alle Uebergaenge ab. */
@media (prefers-reduced-motion:reduce){
  .js .rise > *{opacity:1;transform:none}
}

/* Zwei Punkte, die es nur im Burger-Menue gibt: Termin und
   Felgenkonfigurator. Auf dem Schreibtisch stehen sie in der Servicezeile,
   dort waere die Navigation sonst wieder zu breit und der Umschaltpunkt von
   1024 px faellt auseinander. */
.nav .nur-handy{display:none}
@media (max-width:1024px){
  .nav .nur-handy{display:block;border-top:1px solid var(--line);margin-top:.35rem;padding-top:.55rem}
}

/* ---------- Laufflaechenstreifen ----------
   `B.trenner()` erzeugt `<div class="profilstreifen">`, sechsmal im Inhalt.
   Diese Regel ERSETZT seit dem 2026-08-26 die urspruengliche aus dem
   Prototyp-Zusatz: die zeichnete nur eine Streifenlage in Blau mit 7 Prozent
   Deckkraft und war praktisch unsichtbar, weshalb sie erst fuer nicht
   vorhanden gehalten wurde. Kurz standen beide Bloecke in der Datei, der
   spaetere gewann; zusammengelegt nach der Lehre "Vier Regeln fuer dieselbe
   Sache" aus der Theme-Notiz.

   Das Muster ist ein Reifenprofil, abgeleitet aus dem Firmenlogo: dort ist
   78 Grad die haeufigste Richtung, und dieselbe Schraege benutzen auch der
   Hero und die Kachelflaechen. Zwei Streifenlagen uebereinander, damit es
   nach Profil aussieht und nicht nach Schraffur: breite Bloecke, dazwischen
   ein feiner Schnitt.

   Bewusst leise. Ein Trenner, der lauter ist als die Abschnitte, die er
   trennt, hat seinen Zweck verfehlt. */
.profilstreifen{
  height:34px;
  background:
    repeating-linear-gradient(78deg,
      var(--sky-2) 0 18px,
      transparent 18px 22px,
      var(--sky-2) 22px 40px,
      transparent 40px 46px),
    var(--sky);
  border-block:1px solid var(--line);
}

@media (max-width:760px){
  .profilstreifen{height:26px}
}

/* ---------- Servicezeile ----------
   Die schmale Zeile unter der Kopfzeile. Vier Dinge, die Kunden am
   haeufigsten suchen und die vorher fast nur in der Fusszeile standen.

   Nicht klebend, im Gegensatz zur Kopfzeile darueber: Zwei klebende Zeilen
   fressen am Handy zu viel Hoehe. Wer sie sucht, scrollt nach oben, und am
   Handy liegt unten ohnehin die Handyleiste mit Anrufen und Reifenangebot.

   Am Handy laesst sich die Zeile seitlich schieben, statt umzubrechen. Vier
   Punkte in zwei Reihen sehen aus wie ein zweites Menue; eine Reihe, die
   man schiebt, bleibt eine Zeile. */
/* Getoenter Grund, nicht weiss.

   Erster Versuch war Weiss mit einem Haarstrich zur Kopfzeile. Da beide
   weiss waren, las sich die Zeile wie eine versehentliche Luecke statt wie
   ein gewolltes Band. Derselbe Ton wie die Navigationspille darueber bindet
   sie sichtbar an die Kopfzeile. */
.service{
  background:var(--sky-2);
  position:relative;z-index:78;
}
.service-in{
  display:flex;align-items:center;gap:.15rem;
  overflow-x:auto;scrollbar-width:none;
  padding-block:.4rem;
}
.service-in::-webkit-scrollbar{display:none}

/* Zwischen 761 und 1000 px passen die sieben Punkte nicht in eine Zeile:
   gemessen am 2026-08-28 bei 768 px Fensterbreite 908 px Inhalt in 753 px
   Container, also 155 px verdeckt. Es gab weder Leiste noch Verlauf, und
   drei Punkte galten dem DOM nach als sichtbar, ohne es zu sein. Statt
   einen Hinweis auf das Abschneiden zu bauen, bricht die Zeile dort um.
   Unter 760 px greift die Regel weiter unten und blendet alles ausser der
   Zeitangabe aus, darueber passt wieder alles nebeneinander. */
@media (min-width:761px) and (max-width:1000px){
  .service-in{flex-wrap:wrap;overflow-x:visible;row-gap:.1rem}
}

.service-punkt{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.5rem .8rem;border-radius:999px;
  text-decoration:none;color:var(--blue-deep);white-space:nowrap;
  transition:background .18s;
}
.service-punkt:hover{background:#fff}
.service-punkt .icon{color:var(--blue)}
.service-punkt b{font-size:.875rem;font-weight:600;display:block;line-height:1.25}
.service-punkt em{
  font-family:var(--f-m);font-style:normal;font-size:.6875rem;
  color:var(--ink-50);display:block;line-height:1.3;
}
.service-punkt em:empty{display:none}

/* Der Oeffnungsstatus stand als einziger Eintrag zweizeilig da, waehrend
   die anderen drei einzeilig waren. Die Zeile sah dadurch ausgefranst aus.
   Jetzt laeuft er in einer Zeile, mit einem Mittelpunkt als Trenner. */
.service-zeit{gap:.5rem}
.service-zeit > span{display:flex;align-items:baseline;gap:.4rem}
.service-zeit b,.service-zeit em{display:inline}
.service-zeit em:not(:empty)::before{content:"·";margin-right:.4rem;color:var(--ink-50)}
.service-zeit .puls{width:9px;height:9px;box-shadow:0 0 0 4px rgba(54,164,49,.16)}
.service-zeit .puls.pause{box-shadow:0 0 0 4px rgba(224,147,11,.16)}
.service-zeit .puls.zu{box-shadow:0 0 0 4px rgba(110,124,140,.14)}

/* Zeigt ein Eintrag auf die Seite, auf der man schon steht: gedaempft und
   ohne Zeigefinger, aber sichtbar. Die Zeile bleibt dadurch auf jeder Seite
   gleich lang und springt nicht. */
.service-punkt[aria-current="page"]{
  color:var(--ink-50);cursor:default;
}
.service-punkt[aria-current="page"] .icon{color:var(--ink-50)}
.service-punkt[aria-current="page"]:hover{background:none}

/* Die Telefonnummer nach rechts, sie ist der Notausgang und gehoert ans
   Ende der Zeile, nicht mitten hinein. Ein feiner Strich davor, sonst steht
   sie ohne Bezug in der Flaeche. */
.service-tel{margin-left:auto;position:relative;padding-left:1.4rem}
.service-tel::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:18px;background:var(--line);
}
.service-tel b{font-family:var(--f-m);letter-spacing:.01em}

/* Am Handy nur der Oeffnungsstatus.

   Erster Versuch war eine seitlich schiebbare Zeile. Gemessen bei 375 px:
   Der Inhalt war 766 px breit, drei von vier Eintraegen standen komplett
   ausserhalb des Bildschirms. Sichtbar war nur ein abgeschnittenes
   Bruchstueck, und ein Schiebebalken, den niemand sucht, macht das nicht
   besser.

   Jetzt bleibt hier die eine Angabe, die wirklich eine Angabe ist und kein
   Verweis: ob gerade offen ist. Eine Zeile, kein Schieben, kein Abschnitt.

   Die anderen drei sind am Handy nicht verloren:
     Termin und Felgenkonfigurator stehen im Burger-Menue,
     Anrufen und Reifenangebot in der Leiste am unteren Rand. */
@media (max-width:760px){
  .service-in{
    gap:.4rem;padding-inline:var(--gut);
    overflow-x:visible;
  }
  .service-in > .service-punkt:not(.service-zeit){display:none}
  .service-zeit{padding-inline:0}
  .service-zeit b{font-size:.8125rem}
}

/* ---------- Icons ----------
   Alle Icons sind Striche in currentColor, sie nehmen also die Farbe des
   Textes daneben an. Deshalb braucht es hier fast nichts: nur verhindern,
   dass sie im Flex-Layout gestaucht werden.

   Sie stehen nie allein. Neben jedem steht eine Ueberschrift oder ein
   Listenpunkt, und darum sind sie fuer Vorleseprogramme ausgeblendet. */
.icon{flex:0 0 auto;display:block}

/* Icon ueber der Kartenueberschrift. Der Kasten dahinter macht aus einem
   duennen Strich einen ruhigen Block, sonst franst die Kartenspalte aus. */
.karte-icon{
  width:46px;height:46px;border-radius:var(--r-sm);
  background:var(--sky-2);color:var(--blue);
  display:grid;place-items:center;margin-bottom:.15rem;
}
.karte.blau .karte-icon{background:rgba(255,255,255,.1);color:#8FC0F5}

/* Dasselbe in der Kachel. Die Kacheln sind farbige Flaechen, deshalb hier
   ein durchscheinender Kasten statt eines hellblauen: Er funktioniert auf
   Blau, Gruen und Dunkelblau gleich, ohne vier Sonderfaelle. */
.kachel-icon{
  width:52px;height:52px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.14);color:#fff;
  display:grid;place-items:center;margin-bottom:.9rem;
}
.tile-white .kachel-icon{background:var(--sky-2);color:var(--blue)}
/* Die gruene Kachel ist seit 2026-08-28 weiss mit gruener Oberkante.
   Der durchscheinende Kasten aus der Grundregel wuerde darauf
   verschwinden, deshalb hier dieselbe Behandlung wie bei tile-white,
   nur in Gruen. --green-deep, weil das Icon klein ist. */
.tile-green .kachel-icon{background:rgba(54,164,49,.12);color:var(--green-deep)}

/* Liste mit Icons statt Punkten. Der gruene Punkt aus der Grundregel muss
   weg, sonst stehen Punkt und Icon nebeneinander. */
.liste.mit-icons li::before{display:none}
.liste.mit-icons li>.icon{color:var(--green-deep);margin-top:.1rem}
.liste.mit-icons li>span{flex:1}

/* ---------- Schrift: Fira Sans ----------
   Seit 2026-09-16 Fira Sans statt Archivo. Die CI-Hausschrift The Sans ist
   nicht lizenziert, Fira Sans ist ihr als humanistische Grotesk am
   naechsten (SIL Open Font License, liegt im Theme).

   Ueberschriften: Fira Sans Condensed 800, ohne Versalien (die Versalien
   sind seit 2026-08-25 raus, sie lasen sich wie technische Doku). Die
   schmale Wirkung kommt jetzt aus dem Condensed-Schnitt, nicht mehr aus
   einer Breitenachse - font-stretch hat hier nichts mehr zu suchen.
   Fira hat eine hohe x-Hoehe und lange Oberlaengen: unter 1.0 Zeilenhoehe
   stossen Umlaute an die Unterlaengen der Zeile darueber. */
h1,h2{
  font-family:var(--f-d);font-weight:800;
  text-transform:none;letter-spacing:-.01em;line-height:1;
}

/* ---------- Deutscher Satz ----------
   Die Condensed-Ueberschriften sind auf wenige Zeichen Breite begrenzt.
   Ohne Trennung laufen "Assistenzsysteme" oder "Winterreifenpflicht" am
   Telefon ueber den Rand. Trennen erst ab 10 Zeichen, mindestens 4 davor
   und danach, damit keine "Rei-fen"-Brueche entstehen. Die Sprache kommt
   aus lang="de-DE" von WordPress. */
h1,h2,h3,.gruppentitel{hyphens:auto;hyphenate-limit-chars:10 4 4;overflow-wrap:break-word}
p,li,dd,blockquote{text-wrap:pretty;hyphens:auto;hyphenate-limit-chars:12 5 5}
.eyebrow,.btn,.wp-block-button__link,.nav a,.begriff,a[href^="tel:"]:not(.tile){hyphens:manual}

/* Helle Schrift auf dunklem Grund wirkt duenner und enger als dunkle auf
   hellem. Etwas mehr Zeilenhoehe und Laufweite gleicht das aus. */
.hero .lead,.seitenkopf p{line-height:1.65;letter-spacing:.005em}

/* Redaktionsnotizen ("Bildplatz: ... diesen Hinweis loeschen") sind fuer
   die Leute gedacht, die Inhalte pflegen, nicht fuer Kunden. WordPress
   setzt logged-in am body, sobald jemand angemeldet ist. */
body:not(.logged-in) .bildplatz{display:none}

/* Seit 2026-09-16 keine Monospace mehr: Tobias gefiel IBM Plex Mono an
   Telefonnummer und Oeffnungszeiten nicht. --f-m zeigt jetzt auf Fira Sans.
   Damit Zahlen trotzdem sauber untereinander stehen, ueberall gleich
   breite Ziffern, wo frueher Monospace stand. */
body{font-variant-numeric:tabular-nums}

/* Saisontexte: Die Body-Klasse kommt aus rk_reifensaison() in
   inc/krauti.php. Ohne Klasse (Prototyp, fremde Vorlage) gilt Winter.
   Die Sommerfassung steht im Hero hinter der Winterfassung, deshalb
   braucht sie ihre eigene Staffelung beim Auftritt. */
body:not(.reifensaison-sommer) .nur-sommer,
.reifensaison-sommer .nur-winter{display:none}
.hero-grid > div > .nur-sommer{animation-delay:0s}
.hero-grid > div > h1.nur-sommer{animation-delay:.07s}
.hero-grid > div > .lead.nur-sommer{animation-delay:.14s}

/* ---------- Jahreszahlen ----------
   Ziehen mit den Ueberschriften mit, sonst stehen im selben Abschnitt zwei
   verschiedene Typografien nebeneinander. */
.zahl b{
  font-family:var(--f-d);font-weight:800;line-height:.92;letter-spacing:-.01em;
}

/* ---------- Krauti ----------
   Das Maskottchen. Es taucht bewusst nur an vier Stellen auf: dort wo ein
   Portraet fehlt, auf der 404-Seite, bei den Stellenangeboten und einmal auf
   der Startseite. Ueberall waere es zu viel: Die Seite verkauft
   Achsvermessung und ADAS-Kalibrierung, nicht Comics. */
.krauti{display:block;height:auto;max-width:100%}

/* Krauti in der Portraetkachel. Der gestrichelte Rahmen bleibt, weil dort
   wirklich noch etwas fehlt. Aber er sagt es jetzt freundlicher. */
.ph-krauti{padding:.5rem;overflow:hidden}
.ph-krauti img{
  width:auto;height:100%;max-width:none;object-fit:contain;
  object-position:center bottom;display:block;
}

/* Krauti neben einem Textblock. Am Handy unter den Text statt daneben,
   sonst bleibt fuer beides zu wenig Breite. */
.mit-krauti{display:grid;grid-template-columns:1fr auto;gap:clamp(1.5rem,4vw,3rem);align-items:center}
.mit-krauti .krauti{width:clamp(120px,16vw,210px)}
@media (max-width:760px){
  .mit-krauti{grid-template-columns:1fr;justify-items:center;text-align:left}
  .mit-krauti .krauti{width:150px}
}

/* ---------- Hero mit Foto ----------
   Das Foto liegt als Hintergrund hinter dem Text, nicht als img: Es ist
   Schmuck und soll von einem Vorleseprogramm nicht angekuendigt werden.

   Darueber eine dunkle Blende. Ohne sie ist weisse Schrift auf einem
   Werkstattfoto stellenweise unlesbar, und zwar genau dort, wo eine helle
   Hallenlampe oder ein weisses Auto im Bild sitzt. Die Blende ist links
   dichter als rechts, weil der Text links steht und rechts das
   Anfrageformular oder freie Flaeche liegt.

   Am Handy steht der Text ueber der ganzen Breite, dort muss die Blende
   ueberall dicht sein. */
.hero-foto.hat-bild{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  /* Voreinstellung ist die kleine Fassung. Wer ein schmales Fenster hat,
     zahlt oft auch fuer sein Datenvolumen. Die grosse kommt erst, wenn die
     Flaeche sie wirklich braucht. 1200 px reichen bis 900 px Fensterbreite
     auch auf einem Bildschirm mit doppelter Punktdichte. */
  background-image:var(--hero-klein);
}
@media (min-width:901px){
  .hero-foto.hat-bild{background-image:var(--hero-gross)}
}
.hero-foto.hat-bild::after{
  content:"";position:absolute;inset:0;
  /* Nachgerechnet am 2026-08-25: Die Ueberschrift reicht bis 52 Prozent der
     Hero-Breite, der Fliesstext bis 42. Bis dorthin ist die Blende jetzt
     DICHTER als vorher, danach faellt sie schnell ab. Das Foto wird rechts
     sichtbar, ohne dass links Kontrast verloren geht.

     Gegen einen schneeweissen Bildpunkt gerechnet: bei 52 Prozent 9,2:1
     statt vorher 6,4:1, bei 42 Prozent 8,4:1 fuer den Fliesstext.
     Gefordert sind 3,0 und 4,5.

     Wer hier dreht, misst zuerst nach, wie weit die Ueberschrift reicht.
     Auf den Unterseiten ist das dieselbe Stelle, das Raster behaelt die
     zweite Spalte auch ohne Inhalt. */
  background:linear-gradient(100deg,
    rgba(1,32,63,.95) 0%,
    rgba(1,32,63,.90) 40%,
    rgba(1,32,63,.78) 56%,
    rgba(1,32,63,.34) 78%,
    rgba(1,32,63,.22) 100%);
}
/* Das Hallenlicht aus dem Entwurf wuerde das Foto zumatschen. Auf die
   Haelfte, damit die Schraege noch zu ahnen ist. */
.hero-foto.hat-bild ~ .hero-licht{opacity:.45}

@media (max-width:900px){
  .hero-foto.hat-bild::after{
    /* Am Handy laeuft der Text ueber die ganze Breite, deshalb bleibt es
       oben dicht. Unterhalb des Textes darf das Foto durchkommen. */
    background:linear-gradient(180deg,
      rgba(1,32,63,.93) 0%,
      rgba(1,32,63,.9) 62%,
      rgba(1,32,63,.55) 100%);
  }
}

/* ---------- Google-Bewertungen ----------
   Zwei Zustaende, siehe inc/bewertungen.php. Der leere Kasten .bew kommt
   aus dem Prototyp und bleibt unveraendert. Hier steht nur der volle.

   Die Sterne sind keine Bilder und keine Schriftzeichen, sondern eine
   Form mit clip-path plus ein Verlauf. Das ergibt halbe Sterne in jeder
   Groesse ohne eine einzige zusaetzliche Datei, und 4,7 sieht dann auch
   wirklich nach 4,7 aus statt nach aufgerundeten 5. */
.bew-block{display:grid;gap:1.6rem}

.bew-kopf{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.bew-wert{display:flex;align-items:center;gap:.7rem}
.bew-wert b{
  font-family:var(--f-d);font-size:clamp(2.6rem,6vw,3.6rem);font-weight:800;
  line-height:1;letter-spacing:-.01em;color:var(--blue-deep)
}
.bew-kopf-text p{margin:.15rem 0 0;color:var(--ink-70)}

.bew-sterne{display:inline-flex;gap:.18em;font-size:1rem;line-height:1}
.bew-sterne.gross{font-size:1.5rem}
.bew-sterne i{
  width:1em;height:1em;display:block;
  /* Fuenfzackiger Stern, im Uhrzeigersinn ab der Spitze */
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  background:linear-gradient(90deg,#F5A623 var(--f,100%),rgba(10,20,32,.15) var(--f,100%))
}

.bew-liste{list-style:none;margin:0;padding:0;display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.bew-karte{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.1rem,2vw,1.5rem);display:flex;flex-direction:column;gap:.7rem
}
.bew-karte blockquote{margin:0;color:var(--ink-70);font-size:.95rem;line-height:1.55}
/* Anfuehrungszeichen als Schmuck, nicht als Zeichen: es soll nicht
   vorgelesen und nicht mitkopiert werden. */
.bew-karte blockquote::before{
  content:"";display:block;width:1.6rem;height:1.6rem;margin-bottom:.35rem;
  background:var(--blue);opacity:.16;
  -webkit-mask:var(--anfuehrung) center/contain no-repeat;
  mask:var(--anfuehrung) center/contain no-repeat
}
.bew-karte{--anfuehrung:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 5C6 6.4 4 9.3 4 13v6h7v-7H7.6c.2-2 1.3-3.5 3.3-4.4zm10 0C16 6.4 14 9.3 14 13v6h7v-7h-3.4c.2-2 1.3-3.5 3.3-4.4z'/%3E%3C/svg%3E")}

.bew-wer{display:flex;align-items:center;gap:.6rem;margin-top:auto}
.bew-wer b{display:block;font-size:.9rem;font-weight:700}
.bew-wer em{display:block;font-style:normal;font-size:.8rem;color:var(--ink-50)}
.bew-initial{
  flex:0 0 2rem;width:2rem;height:2rem;border-radius:50%;
  display:grid;place-items:center;font-weight:700;font-size:.9rem;
  background:var(--sky-2);color:var(--blue-deep)
}

.bew-fuss{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin:0}
.bew-fuss small{color:var(--ink-50);font-size:.82rem;max-width:44ch}

@media (max-width:560px){
  /* Auf dem Handy nur die erste Karte. Drei untereinander sind kein
     Vertrauensbeweis mehr, sondern eine Strecke, an der man vorbeiscrollt. */
  .bew-liste li:nth-child(n+2){display:none}
}

/* ---------- Handyleiste ----------
   Im Entwurf lag der Umschaltpunkt bei 800 px, das Burger-Menue schaltet
   inzwischen bei 1024. Dazwischen war weder der Knopf oben noch die Leiste
   unten zu sehen: ein Fenster von 224 px Breite ganz ohne Handlungsknopf.
   Deshalb hier derselbe Punkt wie oben. Wenn einer davon wandert, muss der
   andere mit.

   Die Regeln stehen absichtlich noch einmal vollstaendig da statt nur den
   Umschaltpunkt zu verschieben - der Block aus dem Prototypen bleibt
   unangetastet, damit der naechste Bau ihn nicht zurueckdreht. */
@media (max-width:1024px){
  .mobar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:95;
    gap:.6rem;padding:.65rem;background:rgba(1,32,63,.94);
    backdrop-filter:blur(10px);border-top:1px solid var(--line-blue);
    padding-bottom:calc(.65rem + env(safe-area-inset-bottom));
  }
  /* 1.1875rem/700: .a2 traegt weisse Schrift auf --green und liegt bei
     3,23:1. Das haelt ab 18,66 px und Gewicht 700 als Grosstext.
     .a1 zieht mit, damit die beiden Tasten gleich gross sind. */
  .mobar a{
    flex:1;text-align:center;padding:.85rem;border-radius:999px;
    text-decoration:none;font-weight:700;font-size:1.1875rem;
  }
  .mobar .a1{background:#fff;color:var(--blue-deep)}
  .mobar .a2{background:var(--green);color:#fff}
  /* Leiste ist durch die groessere Schrift rund 5 px hoeher, 4.75 -> 5.25rem */
  body{padding-bottom:calc(5.25rem + env(safe-area-inset-bottom))}
}


/* Grosse Bento-Kachel: kachel(..., gross=True) erzeugt sie, aber die Regel
   fehlte bislang - die Kachel blieb einspaltig. Verhaelt sich wie tile-blue:
   zwei Spalten am Schreibtisch, eine am Handy. */
.tile-gross{grid-column:span 2}
@media (max-width:980px){.tile-gross{grid-column:auto}}

/* =========================================================
   ONLINE-TERMINPLANER
   Kundenseite des Terminplaners, Vorschaustand. Baut auf der
   Formularsprache der Schnellanfrage auf: gleiche Karte, gleiche
   Schrittsteuerung, gleiche Wahlkacheln, gleiche Fertig-Karte. Neu ist
   nur, was es dort nicht gibt: Nummernschild, Tageskacheln, Zeitraster
   und die Fahrzeugakte mit den Laufflaechen.
   ========================================================= */
:root{
  --amber:var(--wp--preset--color--bernstein,#E0930B);
  --amber-deep:var(--wp--preset--color--bernstein-tief,#8A5A00);
  --rust-deep:var(--wp--preset--color--rost-tief,#A04A19);
}

.terminplaner{display:flex;flex-direction:column;gap:1.5rem}
.terminplaner .anfrage{max-width:820px;margin-inline:auto;width:100%}

/* Umschaltbare Bloecke: das Skript schaltet sie an. Alle sind
   Flex-Container; die Richtung bringt das Element selbst mit (.spalte).
   Ohne JavaScript zeigt das Formular alle Varianten gleichzeitig, wie
   die Schnellanfrage ihre Schritte. */
.terminplaner .schalt{display:none}
.terminplaner .schalt.an{display:flex}
form.anfrage:not(.mit-js) .schalt{display:flex}
.terminplaner .spalte{flex-direction:column;gap:1.1rem}
/* Die Leistungswahl verschwindet, wenn die Lagerart sie ueberfluessig macht.
   Die Kacheln bleiben im Baum, das Skript kreuzt die richtige an. */
.terminplaner .aus{display:none}

.gruppenname{font-size:.8125rem;color:var(--ink-70);font-weight:600}
.zweispaltig{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}

/* ---------- Nummernschild ----------
   Derselbe Kniff wie die Reifenflanke der Schnellanfrage: das Feld sieht
   aus wie das, was der Kunde abliest. Der Sternenkranz ist Abbild des
   echten Schilds, so wie ein Foto - deshalb dort ein fester Farbwert. */
.kennzeichen{display:flex;align-items:stretch;border:3px solid var(--ink);border-radius:10px;overflow:hidden;background:#fff;cursor:text}
.kennzeichen:hover{border-color:var(--blue)}
.kennzeichen .euband{background:var(--blue);flex:0 0 46px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:.6rem 0 .5rem}
.kennzeichen .euband b{color:#fff;font-weight:700;font-size:1rem;line-height:1}
.kennzeichen input{border:0;border-radius:0;font-family:var(--f-m);font-weight:500;font-size:clamp(1.4rem,4vw,2rem);letter-spacing:.06em;text-transform:uppercase;padding:.8rem 1rem}
.kennzeichen input:focus-visible{outline-offset:-3px}

/* ---------- Meldungen: erkannt oder Neukunde ---------- */
.meldung{align-items:flex-start;gap:.75rem;background:var(--sky-2);border-radius:var(--r-sm);padding:.9rem 1rem;color:var(--blue)}
.meldung svg{flex:0 0 auto;margin-top:2px}
.meldung b{font-size:.9688rem;display:block;color:var(--ink)}
.meldung p{font-size:.8125rem;color:var(--ink-70)}
.meldung.gut{background:rgba(54,164,49,.08);color:var(--green-deep)}

/* Wartehinweis, waehrend eine Frage beim Dienst in der Warteschlange liegt.
   Gemessen wartet der Kunde im Schnitt 1,6 Sekunden - sichtbar machen,
   nicht verstecken, und nach 15 Sekunden bricht die Seite ehrlich ab. */
.warte{align-items:center;gap:.6rem;font-size:.875rem;color:var(--ink-70)}
/* Der Punkt daneben ist derselbe wie in der Servicezeile, meint hier aber
   etwas anderes: nicht "geoeffnet", sondern "laeuft gerade". Deshalb
   schlaegt sein Ring schneller. Ein zuegiger Takt laesst eine Wartezeit
   kuerzer wirken als ein gemaechlicher, bei gleicher Dauer. */
.warte .puls::after{animation-duration:1.2s}

/* ---------- Leistungen: eine Kachel je Zeile ---------- */
.wahl.eins{grid-template-columns:1fr}
.wahl span b{font-weight:600;font-size:.9688rem}

/* ---------- Tageskacheln ----------
   Fuenf Tage mit der Zahl freier Zeiten statt eines Monatskalenders:
   die Kacheln beantworten die Frage sofort, ein Kalender zwingt zum
   Suchen. Am Handy scrollen sie seitwaerts statt sich zu quetschen. */
.wahl.tage{grid-template-columns:repeat(4,minmax(0,1fr))}
.wahl.tage span{align-items:center;text-align:center;gap:.15rem;padding:.7rem .3rem}
.wahl.tage small{font-family:var(--f-m);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-50);font-weight:400}
.wahl.tage b{font-weight:700;font-size:1.15rem;line-height:1.1}
.wahl.tage em{font-style:normal;font-weight:600;font-size:.75rem;color:var(--green-deep)}
@media (max-width:600px){
  .wahl.tage{display:flex;overflow-x:auto;padding-bottom:.4rem}
  .wahl.tage label{flex:0 0 84px}
}

/* Blaettern zwischen den Tagesfenstern: vier Tage auf einmal, der Rest
   ueber "Spaetere Tage". 70 Tage als Kachelwand beantworten keine Frage. */
.tagnav{display:flex;justify-content:space-between;align-items:center;margin-top:.5rem;min-height:1.4rem}
.tagnav .umschalt{display:none}
.tagnav .umschalt.an{display:inline}

/* ---------- Zeitraster ----------
   Mindestens 46 px hoch, damit der Daumen sicher trifft. */
.wahl.zeiten{grid-template-columns:repeat(6,minmax(0,1fr))}
.wahl.zeiten span{align-items:center;justify-content:center;font-family:var(--f-m);font-size:.875rem;padding:.65rem .3rem;min-height:46px}
@media (max-width:800px){.wahl.zeiten{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:520px){.wahl.zeiten{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- Kontakt: verkuerzte Mailadresse ---------- */
.mailzeile{display:flex;align-items:center;gap:.75rem;border:1.5px solid var(--line);border-radius:var(--r-xs);padding:.85rem 1rem}
.mailzeile svg{color:var(--ink-70);flex:0 0 auto}
.mailzeile .umschalt{margin-left:auto}

/* =========================================================
   FUHRPARK
   Wer mehrere Fahrzeuge betreut, tippt keine Kennzeichen ab: anmelden,
   Fahrzeug aus der Liste waehlen, danach laeuft der gewohnte Weg weiter.
   Die groesste Flotte im Bestand hat 139 Fahrzeuge, deshalb ein Suchfeld
   und eine Liste statt Kacheln.
   ========================================================= */
/* ---------- Die zwei Anmeldungen ----------
   Beide gingen im ersten Wurf unter: ein duenner Strich, kleine Schrift,
   Knopf in Umrissen. Ansage Tobias 16.09.2026. Sie teilen sich deshalb
   eine Karte mit Balken in Blau, groesserer Ueberschrift und gefuelltem
   Knopf. Ein Angebot, das man uebersieht, gibt es nicht.
   Gilt fuer beide: Fuhrparkzugang in Schritt 1 und Kundennummer in
   Schritt 2. Sie sehen gleich aus, weil sie dasselbe sind. */
.anmeldekarte{display:flex;flex-direction:column;gap:1rem;background:var(--sky);border:1.5px solid var(--sky-2);border-left:4px solid var(--blue);border-radius:var(--r-sm);padding:1.1rem 1.25rem;color:var(--blue)}
.anmeldekarte-kopf{display:flex;align-items:center;gap:.9rem}
.anmeldekarte-kopf svg{flex:0 0 auto;color:var(--blue)}
.anmeldekarte-kopf b{font-size:1.0625rem;display:block;color:var(--ink);line-height:1.25}
.anmeldekarte-kopf p{font-size:.875rem;color:var(--ink-70);margin-top:.15rem}
.anmeldekarte-kopf .btn{margin-left:auto;white-space:nowrap;padding:.7rem 1.35rem;font-size:.9375rem}
.anmeldekarte .feld{flex-direction:column;gap:.75rem}
.anmeldekarte .feld > .btn{align-self:flex-start;padding:.75rem 1.4rem;font-size:.9375rem}
/* Die Eingabefelder stehen auf blauem Grund und brauchen deshalb Weiss,
   sonst verschwimmen sie mit der Karte. */
/* Passwort und Suche sehen aus wie jedes andere Feld. Die Grundregel im
   Prototyp nennt nur text, tel und email, deshalb stand das Passwortfeld
   als duenner Strich neben dem Benutzerfeld und das Suchfeld der
   Fahrzeugliste ebenso. Gemeldet von Tobias am 16.09.2026. Gehoert
   eigentlich in die Grundregel in v4-final.html; dort liegt aber gerade
   offene Arbeit an der Startseite, deshalb steht es vorerst hier. */
input[type="password"],input[type="search"]{
  width:100%;font:inherit;font-size:1rem;padding:.75rem .85rem;border:1.5px solid var(--line);
  border-radius:var(--r-xs);background:#fff;color:var(--ink);font-family:var(--f-b);
}
.anmeldekarte input[type=text],.anmeldekarte input[type=password]{background:#fff}
/* Der Fuhrpark-Einstieg steht immer da, ist also kein .schalt und bringt
   sein display selbst mit. Mit .aus verschwindet er, sobald die Liste
   steht. Der Abstand trennt ihn vom gruenen Knopf darueber. */
.fuhrpark-tor{margin-top:1.4rem}
@media (max-width:620px){
  .anmeldekarte-kopf{flex-wrap:wrap;gap:.6rem}
  .anmeldekarte-kopf .btn{margin-left:0;width:100%}
  .anmeldekarte .zweispaltig{grid-template-columns:1fr}
  .anmeldekarte .feld > .btn{width:100%}
}

/* Rueckweg in die Flotte, sichtbar in jedem Schritt solange jemand
   angemeldet ist. Wer das falsche Fahrzeug erwischt hat, soll nicht bis
   zum Ende durchklicken muessen. Ansage Tobias 16.09.2026. */
.terminplaner .fuhrpark-zurueck{align-self:flex-start;margin-bottom:.4rem}
.terminplaner .fuhrpark-zurueck.an{display:inline-flex}

.fuhrparkliste{flex-direction:column;gap:1.1rem;max-width:820px;margin-inline:auto;width:100%;background:#fff;border-radius:var(--r);padding:clamp(1.2rem,2.4vw,1.7rem);box-shadow:0 26px 70px rgba(1,32,63,.18)}
.fuhrpark-liste-kopf{display:flex;align-items:flex-start;gap:1rem}
.fuhrpark-liste-kopf h2{font-size:1.5rem;margin-top:.2rem}
.fuhrpark-liste-kopf .btn-back{margin-left:auto;white-space:nowrap}

/* Liste statt Kacheln: bei 139 Fahrzeugen zaehlt, wie schnell das Auge die
   Kennzeichen von oben nach unten liest, nicht wie gross sie sind. */
.fuhrpark-fahrzeuge{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem;max-height:26rem;overflow-y:auto}
.fp-fahrzeug{display:flex;align-items:center;gap:.9rem;width:100%;text-align:left;font:inherit;cursor:pointer;background:var(--sky);border:1.5px solid transparent;border-radius:var(--r-xs);padding:.7rem .9rem;color:var(--ink)}
.fp-fahrzeug:hover{border-color:var(--blue-bright);background:var(--sky-2)}
.fp-fahrzeug:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
/* Per Skript fokussierte Bereiche (Schrittwechsel fuer Vorleseprogramme)
   bekommen tabindex=-1. Der Browser malt sonst seinen schwarzen Rahmen. */
[tabindex="-1"]:focus{outline:none}
/* Das Kennzeichen in derselben Schrift wie im Nummernschild, damit die
   Spalte untereinander steht und beim Ueberfliegen nicht tanzt. */
.fp-kz{font-family:var(--f-m);font-weight:500;font-size:1.0625rem;letter-spacing:.04em;flex:0 0 8.5rem}
.fp-name{font-size:.9375rem;color:var(--ink-70);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fp-lager{margin-left:auto;flex:0 0 auto;font-size:.75rem;font-weight:650;color:var(--green-deep);background:rgba(54,164,49,.1);border-radius:999px;padding:.2rem .6rem;white-space:nowrap}
/* Schon gebucht: der Termin steht statt des Lagervermerks, damit beim
   Durchbuchen einer Flotte sichtbar bleibt, was erledigt ist. Ein Haken
   allein reicht nicht, die Farbe traegt die Aussage nicht allein. */
.fp-gebucht{margin-left:auto;flex:0 0 auto;font-size:.75rem;font-weight:650;color:var(--blue-deep);background:var(--sky-2);border-radius:999px;padding:.2rem .6rem;white-space:nowrap}
/* Haken als echtes Zeichen, nicht als CSS-Escape: der Block hier ist ein
   gewoehnlicher Python-String, und \27.. waere dort eine Oktalfolge. Das
   hat am 15.09.2026 ein Nullbyte in site.css geschrieben. */
.fp-gebucht::before{content:"✓ "}
.fp-fahrzeug.ist-gebucht .fp-kz{color:var(--ink-50)}
@media (max-width:560px){
  .fp-fahrzeug{flex-wrap:wrap;gap:.3rem .7rem}
  .fp-kz{flex:0 0 auto}
  /* Eigene Zeile, aber die Pille bleibt so breit wie ihr Text. */
  .fp-lager,.fp-gebucht{margin-left:0;flex-basis:100%;align-self:flex-start;width:fit-content}
}

/* =========================================================
   FAHRZEUGAKTE
   Sichtbar erst nach Anmeldung mit der Kundennummer. Das Kennzeichen
   bucht, die Nummer zeigt. Aufbau vom Zustandsbericht gelernt, Layout
   eigen: Empfehlung im Klartext zuerst, die Millimeter stehen AUF der
   Laufflaeche, INNEN und AUSSEN je Fahrzeugseite gespiegelt.
   ========================================================= */
.akte{flex-direction:column;max-width:880px;margin-inline:auto;width:100%}
.akte-kopf{background:var(--blue-deep);color:#fff;border-radius:var(--r) var(--r) 0 0;padding:1.4rem 1.6rem}
.akte-kopf .feldkopf{color:#8FC0F5;margin-bottom:.4rem}
.akte-kopf h2{color:#fff;font-size:1.9rem}
.akte-kopf p{color:#C2D9F2;margin-top:.35rem;font-size:.9375rem}
.akte-leib{background:#fff;border-radius:0 0 var(--r) var(--r);padding:clamp(1.4rem,2.4vw,1.9rem);box-shadow:0 26px 70px rgba(1,32,63,.18);display:flex;flex-direction:column;gap:1.6rem}

.akte-empfehlung{display:grid;grid-template-columns:190px minmax(0,1fr);gap:1.5rem;align-items:center}
.fzg{display:flex;flex-direction:column;align-items:center;gap:.35rem}
.fzg [data-rad]{fill:var(--sky-2);stroke:rgba(10,20,32,.3);stroke-width:1.5}
.fzg-label{font-family:var(--f-m);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-50)}
.akte-text{display:flex;flex-direction:column;gap:.7rem}
.akte-text b{font-size:1.375rem;line-height:1.25;font-weight:700}
.akte-text p{font-size:.9375rem;color:var(--ink-70)}
@media (max-width:700px){.akte-empfehlung{grid-template-columns:1fr;justify-items:center}}

/* Ampelfarben. Bernstein erreicht auf Weiss nur 2,45:1 Kontrast, deshalb
   steht neben jeder Farbe immer auch ein Wort und auf Bernstein-Flaechen
   dunkle statt weisser Schrift. */
.fzg .rad-gruen{fill:var(--green)}
.fzg .rad-gelb{fill:var(--amber)}
.fzg .rad-rot{fill:var(--rust)}
.p-gruen{background:var(--green)}
.p-gelb{background:var(--amber)}
.p-rot{background:var(--rust)}
.legende{display:flex;gap:1.1rem;flex-wrap:wrap;font-size:.8125rem;color:var(--ink-70)}
.legende span{display:flex;align-items:center;gap:.45rem}
/* Die Kontur macht die Ampelfarben auch auf hellem Grund greifbar:
   Bernstein allein erreicht auf Weiss nur 2,5:1, die Grenze zieht der Rand. */
.legende i{width:11px;height:11px;border-radius:3px;flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(10,20,32,.22)}

.akte-zeile{display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap}
.akte-zeile small{margin-left:auto;font-size:.8125rem;color:var(--ink-50)}

.radkarten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}
@media (max-width:700px){.radkarten{grid-template-columns:1fr}}
.radkarte{border:1.5px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:#fff}

/* Der Kartenkopf spricht die Toenungssprache des Themes: zarter Grund,
   Farbstrich links, dunkle Textfarbe. Vorher waren es satte Farbbalken mit
   weisser Schrift - auf Gruen nur 3,2:1 Kontrast, auf Rost 4,4:1, beides
   unter den geforderten 4,5. Die satte CI-Farbe traegt jetzt der Strich,
   der keine Schrift ist und deshalb kein Kontrastmass braucht. */
.radkarte-kopf{display:flex;align-items:center;gap:.6rem;padding:.6rem .9rem;border-left:3px solid transparent;border-bottom:1px solid var(--line)}
.radkarte-kopf b{font-size:.9375rem;color:var(--ink)}
.radkarte-kopf span{margin-left:auto;font-family:var(--f-m);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;font-weight:500}
.rk-gruen{background:rgba(54,164,49,.09);border-left-color:var(--green)}
.rk-gruen span{color:var(--green-deep)}
.rk-gelb{background:rgba(224,147,11,.12);border-left-color:var(--amber)}
.rk-gelb span{color:var(--amber-deep)}
.rk-rot{background:rgba(194,90,30,.10);border-left-color:var(--rust)}
.rk-rot span{color:var(--rust-deep)}

/* Die Lauffläche ist gezeichnet, kein Foto: die echten Raederaufnahmen
   waeren 8 Stueck je Satz mit rund 1 MB und lange Abrufzeit. Die dunklen
   Toene bilden Gummi ab und sind bewusst keine Palettenfarben, so wie
   auch ein Foto keine haette. */
.lauffl{position:relative;margin:.8rem;border-radius:var(--r-xs);height:104px;display:flex;align-items:center;justify-content:space-around;padding:0 1.6rem;background:
  linear-gradient(90deg,transparent 0 18%,rgba(0,0,0,.35) 18% 20.5%,transparent 20.5% 39%,rgba(0,0,0,.35) 39% 42.5%,transparent 42.5% 61%,rgba(0,0,0,.35) 61% 63.5%,transparent 63.5% 80%,rgba(0,0,0,.35) 80% 82%,transparent 82%),
  linear-gradient(0deg,transparent 0 45%,rgba(255,255,255,.045) 45% 52%,transparent 52%),
  #23282E}
.lauffl .mm{font-family:var(--f-m);font-weight:500;font-size:1.25rem;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.lauffl .mm.hebt{color:#FFC46B}
.seitlabel{position:absolute;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;font-family:var(--f-m);font-size:.625rem;letter-spacing:.12em;color:rgba(255,255,255,.55)}
.seitlabel.links{left:6px}
.seitlabel.rechts{right:6px}
.radfuss{display:flex;align-items:center;gap:.6rem;padding:0 .9rem .9rem}
.radfuss .punkt{width:10px;height:10px;border-radius:50%;flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(10,20,32,.22)}
.radfuss .befund{font-size:.8438rem;font-weight:600;color:var(--ink-70)}
.radfuss .befund.mahnt{color:var(--rust-deep)}
.radfuss .kleinster{margin-left:auto;font-family:var(--f-m);font-size:.75rem;color:var(--ink-50);font-variant-numeric:tabular-nums}

.stammliste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem 1.4rem}
@media (max-width:700px){.stammliste{grid-template-columns:1fr}}
.stammliste div{display:flex;gap:.9rem;font-size:.9375rem;border-bottom:1px solid var(--line);padding-bottom:.55rem}
.stammliste b{font-family:var(--f-m);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-50);flex:0 0 6.5rem;font-weight:500;padding-top:.15rem}

/* TÜV: nur wenn das Datum plausibel ist, mit Hinweis nur wenn es bald ist */
.tuev{gap:.85rem;align-items:flex-start;border-radius:var(--r-sm);padding:1rem 1.1rem;background:var(--sky);color:var(--blue)}
.tuev.mahnt{background:rgba(194,90,30,.08);border-left:3px solid var(--rust);color:var(--rust-deep)}
.tuev svg{flex:0 0 auto;margin-top:3px}
.tuev b{font-size:.9688rem;color:var(--ink)}
.tuev p{font-size:.8438rem;color:var(--ink-70);margin-top:.35rem}

/* Anmerkungsfeld der Anfrage: mehrzeilig, aber kompakter als die 8rem-Vorgabe */
#rk-anmerkung{min-height:5rem}

/* ---------- Auftauchende Teile des Formulars ----------
   Alles, was per Klasse von display:none auf sichtbar springt: Meldungen
   nach der Kennzeichenabfrage, Fehlertexte nach einem Klick auf Weiter,
   die freigeschaltete Fahrzeugakte, die Bestaetigungskarte.

   Bewusst @keyframes und nicht @starting-style: Diese Teile werden
   einmalig eingeblendet, nicht im Sekundentakt umgeschaltet, also bringt
   die Unterbrechbarkeit von Uebergaengen hier nichts - dafuer laufen
   Keyframes in jedem Browser, den das Geschaeft ausliefert.

   Die Richtung ist nicht beliebig: Diese Kaesten schieben den Inhalt
   darunter nach unten. Kommen sie von oben herein, laeuft die Bewegung
   mit dem Umbruch statt gegen ihn. */
.terminplaner .schalt.an,
.fehler.an,
.unbekannt.an,
.fotoweg.an{
  animation:rk-auftauchen .24s var(--e-out);
}
@keyframes rk-auftauchen{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:none}
}

/* Die Bestaetigungskarte ist der Moment, auf den der ganze Planer
   zulaeuft - einmal pro Termin, nie im Vorbeigehen. Sie darf deshalb
   etwas laenger brauchen und aus der Flaeche heraus wachsen. Von 0.97,
   nicht von 0: Nichts in der Welt taucht aus dem Nichts auf. */
.fertig-karte.an{
  animation:rk-fertig .32s var(--e-out);
}
@keyframes rk-fertig{
  from{opacity:0;transform:scale(.97) translateY(8px)}
  to{opacity:1;transform:none}
}

/* Bei abgestellter Bewegung reicht animation:none nicht: Der Ring am
   Oeffnungspunkt bliebe dann als starrer zweiter Kreis um den Punkt
   stehen. Er wird deshalb ganz entfernt. */
@media (prefers-reduced-motion:reduce){
  .puls::after{content:none}
}

/* Terminseite: weniger Luft ueber dem Formular. Der Kopf ist hier nur
   Ueberschrift, das Formular ist der Inhalt und soll ohne Scrollen
   anfangen. Ansage Tobias 16.09.2026. :has() statt eigener Klasse, damit
   der Seiteninhalt unveraendert bleibt. */
.hero:has(+ section .terminplaner){padding-block:clamp(2rem,4vw,3rem) clamp(2.5rem,5vw,3.5rem)}
.hero:has(+ section .terminplaner) h1{font-size:clamp(2.1rem,4.6vw,3.5rem);margin-block:.8rem}
section:has(.terminplaner){padding-top:clamp(1.5rem,3vw,2.25rem)}

/* Monatsansicht: auf Knopfdruck der ganze Monat, Mo bis Sa. Nicht
   buchbare Tage bleiben als blasse Zahl stehen, damit das Blatt als
   Kalender lesbar bleibt. */
.tagnav .monat-knopf{display:inline;margin-inline:auto}
.wahl.tage.monat{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.35rem;overflow:visible;padding-bottom:0}
.wahl.tage.monat label{flex:none}
.wahl.tage.monat span{padding:.45rem .2rem;min-height:52px;justify-content:center}
.wahl.tage.monat b{font-size:1rem}
.wahl.tage.monat em{font-size:.6875rem}
.monat-titel{grid-column:1/-1;font-weight:700;font-size:1.05rem;margin-bottom:.2rem}
.monat-wt{text-align:center;font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-50)}
.wahl.tage.monat .monat-leer,.wahl.tage.monat .monat-zu{border:0;background:none;box-shadow:none;padding:0}
.monat-zu{display:flex;align-items:center;justify-content:center;min-height:52px;color:var(--ink-50);opacity:.55;font-size:.9375rem}
@media (max-width:600px){
  .wahl.tage.monat em{display:none}
  .wahl.tage.monat span,.monat-zu{min-height:44px}
}

/* ---------- Nur fuer Vorleseprogramme ---------- */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Dienst-Kacheln ----------
   Aus dem Agenturentwurf uebernommen: das weisse Flaechen-Icon auf der
   blauen, abgerundeten Kachel liest sich schneller als ein duenner Strich.
   Nicht uebernommen: die Kachel ohne Ziel und ohne Text. Jede Kachel hier
   ist ein Link mit Titel und einem Satz. */
.dienste{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem 1.25rem;margin-top:clamp(1.5rem,3vw,2.25rem)}
.dienst{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.35rem;text-decoration:none;color:var(--ink);padding:.5rem .25rem;border-radius:var(--r)}
.dienst b{font-family:var(--f-b);font-weight:700;font-size:1.0625rem;margin-top:.5rem;line-height:1.2}
.dienst>span:last-child{color:var(--ink-70);font-size:.9063rem;line-height:1.4;max-width:20ch}
.dienst-icon{width:72px;height:72px;border-radius:var(--r);background:var(--blue);color:#fff;display:grid;place-items:center;transition:transform .22s var(--e-out),box-shadow .22s var(--e-out)}
@media (hover:hover) and (pointer:fine){
  .dienst:hover .dienst-icon{transform:translateY(-4px);box-shadow:0 14px 32px rgba(1,32,63,.22)}
}
.dienst:active .dienst-icon{transform:scale(.96);transition-duration:.08s}
@media (max-width:600px){
  .dienste{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.75rem}
  .dienst-icon{width:64px;height:64px}
  .dienst-icon .icon{width:32px;height:32px}
}

/* Die Leistungskarten auf /autoservice/ tragen dasselbe Icon in derselben
   Sprache, damit der Sprung von der Startseite dorthin sich anfuehlt wie
   derselbe Ort. */
.karte-icon{width:56px;height:56px;background:var(--blue);color:#fff}
.karte.blau .karte-icon{background:rgba(255,255,255,.12);color:#fff}
.karte h3[id]{scroll-margin-top:7rem}

/* ---------- Einblicke: Bild-Akkordeon ----------
   Hohe Bildstreifen, einer offen. Der Aufbau folgt dem Agenturentwurf,
   das Verhalten nicht: Knoepfe mit aria-expanded statt Klick auf das
   Bild, sichtbarer Fokusring, Hover als Vorschau, Pfeiltasten in site.js,
   Handy gestapelt, ohne JavaScript ein Raster mit allen Bildunterschriften.
   Die Bewegung geht mit prefers-reduced-motion ueber die globale Regel aus. */
.einblicke{display:flex;gap:.75rem;height:clamp(420px,52vh,560px);margin-top:clamp(1.5rem,3vw,2.25rem);--fokus:var(--green-bright)}
.einblick{position:relative;flex:0 0 72px;min-width:0;margin:0;border-radius:var(--r);overflow:hidden;background:var(--blue-deep);transition:flex-basis .45s var(--e-out),flex-grow .45s var(--e-out);isolation:isolate}
.einblick picture,.einblick img{position:absolute;inset:0;width:100%;height:100%}
.einblick img{object-fit:cover;display:block}
.einblick::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,26,56,.82) 0%,rgba(0,26,56,.35) 34%,rgba(0,26,56,0) 60%);pointer-events:none}
.einblick button{position:absolute;inset:0;z-index:2;width:100%;background:none;border:0;padding:0;cursor:pointer;display:flex;align-items:flex-start;justify-content:center;padding-top:.75rem}
.einblick button:focus-visible{outline-offset:-4px;border-radius:var(--r)}
.einblick-icon{width:46px;height:46px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;flex:0 0 auto;box-shadow:0 6px 18px rgba(1,32,63,.35)}
.einblick figcaption{position:absolute;left:0;right:0;top:0;z-index:1;padding:.9rem 1.1rem .9rem 4.75rem;color:#fff;opacity:0;transform:translateY(.6rem);transition:opacity .3s var(--e-out) .15s,transform .3s var(--e-out) .15s;pointer-events:none}
.einblick figcaption b{display:block;font-family:var(--f-d);font-weight:800;font-size:clamp(1.35rem,2.2vw,1.75rem);line-height:1.05;letter-spacing:-.01em}
.einblick figcaption p{margin-top:.3rem;font-size:.9688rem;color:#C2D9F2;max-width:38ch}
.einblick.offen{flex:1 1 20rem}
.einblick.offen button{justify-content:flex-start;padding-left:.75rem}
.einblick.offen figcaption{opacity:1;transform:none}
@media (hover:hover) and (pointer:fine){
  .einblick:not(.offen):hover{flex-basis:132px}
}
@media (max-width:760px){
  .einblicke{flex-direction:column;height:auto;gap:.5rem}
  .einblick{flex:0 0 64px}
  .einblick.offen{flex:0 0 300px}
  .einblick button{justify-content:flex-start;padding-left:.6rem;padding-top:.6rem}
  .einblick figcaption{padding:.8rem 1rem .8rem 4.25rem}
  @media (hover:hover) and (pointer:fine){.einblick:not(.offen):hover{flex-basis:64px}}
}
/* Ohne JavaScript klappt nichts: alle Bilder mit Unterschrift. */
html:not(.js) .einblicke{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));height:auto}
html:not(.js) .einblick{aspect-ratio:16/10;flex:none}
html:not(.js) .einblick button{display:none}
html:not(.js) .einblick figcaption{opacity:1;transform:none;padding-left:1.1rem}

/* ---------- Zeitleiste ----------
   Die Karten bleiben, dazu eine Achse links mit einem Punkt je Jahr.
   Vorher war es eine Liste weisser Karten, die man fuer irgendeine Liste
   halten konnte. */
.jahre{position:relative;padding-left:2.25rem}
.jahre::before{content:"";position:absolute;left:.5rem;top:1.25rem;bottom:1.25rem;width:2px;background:var(--line);border-radius:1px}
.jahr{position:relative}
.jahr::before{content:"";position:absolute;left:-2.25rem;top:1.55rem;width:14px;height:14px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 3px #fff,0 0 0 4px var(--line);margin-left:.0625rem}
.jahr:last-child::before{background:var(--green)}
.jahr:last-child b{color:var(--green-deep)}

/* Terminseite am Handy ohne Schnellleiste. "Termin buchen" fuehrt dorthin,
   wo man schon ist, und die feste Leiste deckte beim Buchen den Knopf und
   den Hinweis darueber ab. Ansage Tobias 16.09.2026. */
@media (max-width:1024px){
  body:has(.terminplaner) .mobar{display:none}
  body:has(.terminplaner){padding-bottom:env(safe-area-inset-bottom)}
}

/* Kalenderknopf: im schmalen Knopf wurde das Icon vom Text zusammen-
   gedrueckt. Am Handy stehen die Knoepfe nach der Buchung untereinander,
   dann passt "In den Kalender eintragen" in eine Zeile. */
.fertig-karte [data-ics] svg{flex:0 0 auto;width:22px;height:22px}
@media (max-width:600px){
  .fertig-karte .aktionen .btn{flex:1 1 100%;font-size:1.0625rem;padding-inline:1rem}
}