/* 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(--sky-2);color:var(--blue-deep);padding-block:1.3rem;overflow:hidden;margin-top:clamp(3rem,6vw,4.5rem);border-block:1px solid var(--line);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.band-track{display:flex;gap:1.25rem;width:max-content;animation:lauf linear infinite}
.band:hover .band-track{animation-play-state:paused}
@keyframes lauf{to{transform:translateX(-50%)}}
.band span{display:flex;align-items:center;justify-content:center;width:220px;height:60px;background:#fff;border-radius:var(--r-xs);font-family:var(--f-d);font-weight:800;font-size:1.35rem;letter-spacing:.01em;white-space:nowrap}
.band .marke img{display:block;width:220px;height:60px;object-fit:contain;border-radius:var(--r-xs)}

/* ---------- Zusage-Band ----------
   Eine Aussage, die Kunden sonst beim Autohaus haelt (Herstellergarantie).
   Eigenes Band nach dem Vorbild von kuzka.de, damit sie nicht im Fliesstext
   untergeht. Titel und Text sind normale Bloecke, im Editor aenderbar. */
.zusage{background:var(--blue);color:#fff;padding-block:clamp(2rem,4vw,3rem)}
.zusage .zusage-innen{display:flex;gap:1.5rem;align-items:center}
.zusage-icon{flex:none;width:64px;height:64px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center}
.zusage-icon svg{width:34px;height:34px}
.zusage h2{color:#fff;margin:0 0 .35rem;font-size:clamp(1.5rem,3vw,2.1rem)}
.zusage p{margin:0;color:#dbe6f3;max-width:62ch}
.zusage a{color:#fff;font-weight:600}
@media (max-width:600px){.zusage .zusage-innen{flex-direction:column;align-items:flex-start}}

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

/* Im Editor eingestellte Knopfgroesse (Startseite, gruener Hero-Knopf 1.2rem,
   KNOPF_STILE in _build_import.py) macht WordPress fluide:
   clamp(0.875rem, ..., 1.2rem), am Handy 14 px. Kleiner als der Telefonknopf
   daneben (19 px), und weiss auf --gruen braucht 18,66 px. Deshalb fest.
   !important, weil die Groesse als style-Attribut am Link steht. */
.wp-block-button .wp-block-button__link.has-custom-font-size{font-size:1.2rem !important}

/* 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%}
/* Auf /termin/ ist der Planerkopf die h1 (der Hero ist dort ausgeblendet,
   Pruefung 30.09.2026). Gleich gross wie die h2 der anderen Formulare. */
.anfrage-kopf h1{font-size:1.5rem;color:var(--ink)}

@media (max-width:520px){
  .anfrage-kopf .zeit{white-space:normal;margin-left:0;width:100%;margin-top:.2rem}
  .anfrage-kopf h2,.anfrage-kopf h1{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}

/* Menue mittig zwischen Logo und Knopf statt rechts angeschoben
   (29.09.2026). Zwei gleich breite Aussenspalten halten die Mitte, auch
   wenn Logo und Knopf verschieden breit sind. Nur ab 1025 px, darunter
   uebernimmt der Burger. */
@media (min-width:1025px){
  .top-in{display:grid;grid-template-columns:1fr auto 1fr}
  .nav{margin-left:0}
  .brand{justify-self:start}
  .top-cta{justify-self:end}
}

/* Untermenue unter "Reifenservice" und "Kfz-Service" (29.09.2026).
   Oeffnet per :hover und :focus-within, also auch mit der Tastatur, ohne
   Skript. Der unsichtbare Steg ::before ueberbrueckt die Luecke zwischen
   Reiter und Blatt, sonst schliesst es auf dem Weg dorthin. */
.nav-gruppe{position:relative}
.nav-kopf::after{content:"";display:inline-block;width:.38em;height:.38em;margin-left:.5em;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-.2em) rotate(45deg)}
.nav-unter{display:none;position:absolute;left:0;top:100%;margin-top:.45rem;min-width:16rem;
  flex-direction:column;gap:.15rem;padding:.5rem;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-sm);box-shadow:0 20px 50px rgba(1,32,63,.18);z-index:95;--fokus:var(--green-deep)}
.nav-unter::before{content:"";position:absolute;left:0;right:0;top:-.6rem;height:.6rem}
.nav-gruppe:hover .nav-unter,.nav-gruppe:focus-within .nav-unter{display:flex}
.nav .nav-unter a{border-radius:var(--r-xs)}

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

/* ---------- Fusszeile: beide Systempartner (29.09.2026) ----------
   point S und Automeister gleichberechtigt nebeneinander, so verlangt es die
   point-S-CI. Farbig mit weissem Umriss wie in der Terminmail, beide gleich
   hoch; der Claim gehoert zum point-S-Bild. Eigene Zeile ueber dem Raster,
   in der ersten Spalte (261 px bei 1280) passten beide nicht nebeneinander. */
.foot-marken{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem 2.5rem;margin-bottom:2.25rem}
.foot-marken picture{display:block}
.foot-marken .foot-marke{width:auto;height:64px}

/* ---------- Seitenkopf ueber die volle Breite ----------
   B.kopf() setzt kein align full, der Kopf stuende sonst als 1240-px-Kasten
   mit Seitenrand da. Die Regel macht, was WordPress bei alignfull macht:
   Inhaltsbreite aufheben, Randabstand der Wurzel zuruecknehmen. */
body .seitenkopf{max-width:none}
body .has-global-padding > .seitenkopf{
  margin-left:calc(var(--wp--style--root--padding-left) * -1) !important;
  margin-right:calc(var(--wp--style--root--padding-right) * -1) !important;
}
/* Flach, weil direkt darunter das Formular kommt: Kopf hoechstens rund
   200 px bei 1280, Formularbeginn bei 1280x800 unter 400 px (29.09.2026).
   Eine Zeile Titel, ein Satz. Der volle Abschnittsabstand und die 24 px
   von WordPress davor fallen hier weg. */
.seitenkopf{padding-block:clamp(1.5rem,3vw,2rem)}
.seitenkopf h1{font-size:clamp(1.9rem,3.6vw,2.75rem);max-width:none;margin-top:.5rem}
.seitenkopf h1 + p{margin-top:.5rem;max-width:70ch}
body .seitenkopf + section{padding-top:1.5rem;margin-block-start:0}

/* Fusszeile: Die zweite Gruppe einer Spalte ("Betrieb" unter "Kfz-Service")
   klebte an der Liste darueber. Derselbe Abstand wie zwischen den Spalten. */
.foot ul + h2{margin-top:2.25rem}

/* WhatsApp nur am Handy (Tobias, 29.09.2026): Fusszeile und Kontaktwege
   tragen nur-handy. Dieselbe Klasse steht schon an zwei Menuepunkten; die
   Regeln dort (.nav .nur-handy, bis 1024 px) sind staerker und bleiben. */
@media (min-width:761px){.nur-handy{display:none}}

/* WhatsApp abschaltbar (Einstellungen -> Oeffnungszeiten, 30.09.2026):
   Haken aus -> body.ohne-whatsapp. p.nur-handy ist nur der Satz
   "Auf WhatsApp antwortet ..." auf der Kontaktseite. Mit zwei Knoepfen
   passt "Termin buchen" wieder ganz in die Handyleiste. */
.ohne-whatsapp .mobar .a3,
.ohne-whatsapp .nur-handy:has(a[href*="wa.me"]),
.ohne-whatsapp p.nur-handy{display:none !important}
@media (max-width:760px){.ohne-whatsapp .mobar .zusatz{display:inline}}

/* ---------- Kontaktseite: Formular und Kontaktwege ----------
   Formular links, breiter, Kontaktwege rechts. Unter 1000 px untereinander,
   das Formular zuerst: Es stand vorher ganz unten und wurde uebersehen. */
.karten.kontakt-raster{grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:1000px){
  .karten.kontakt-raster{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
}
/* Name, Telefon, E-Mail: ab 700 px eine Reihe, darunter Name allein. */
.kontakt-reihe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.kontakt-reihe > :first-child{grid-column:1 / -1}
@media (min-width:700px){
  .kontakt-reihe{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kontakt-reihe > :first-child{grid-column:auto}
}
.kontakt-hilfe{font-size:.75rem;margin-top:-.4rem}

/* ---------- Karte auf Klick ----------
   Bis zum Klick steht ein eigenes Foto da, kein Aufruf zu Google. karte() in
   site.js ersetzt Bild und Knopf durch das iframe. Ohne JavaScript bleibt der
   Knopf verborgen, dann fuehrt "Route planen" zu Google. */
.kartenfeld{display:flex;flex-direction:column;gap:.6rem}
.kartenvorschau{
  position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;
  background:var(--sky-2);display:grid;place-items:center;
}
.kartenvorschau > img,.kartenvorschau > iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
}
.kartenvorschau > img{object-fit:cover;filter:brightness(.5)}
.kartenvorschau > .btn{position:relative;z-index:1;margin:1rem;text-align:center;box-shadow:0 0 0 2px #fff}
/* Foto auf halbe Helligkeit, dazu ein weisser Ring um den Knopf: Gruen
   gegen das Foto kam an hellen Stellen (Schriftzug, Himmel) nur auf 1,6:1,
   der Ring haelt ueberall mindestens 3:1 (gemessen 29.09.2026). */
html:not(.js) .kartenvorschau > .btn{display:none}
.kartenhinweis{font-size:.875rem;color:var(--ink-70)}

/* 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}
  /* Im Burger: Unterpunkte immer offen, eingerueckt unter dem Reiter. */
  .nav-kopf{font-weight:700}
  .nav-kopf::after{display:none}
  .nav-unter{display:flex;position:static;margin:0 0 .3rem;padding:0 0 0 .9rem;min-width:0;
    border:0;box-shadow:none;background:none}
  .nav-unter::before{display:none}
  .nav .nav-unter a{padding:.55rem 1rem;font-size:.95rem}
}

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


/* ---------- Markenreihe ----------
   [rk_marken stil="liste"] (inc/marken.php): dieselben Kacheln wie im
   Laufband, nur fest im Raster. Ohne Logo steht der Name wie im Band.
   Seitenverhaeltnis 220:60 wie im Band, dann fuellen die Logos mit
   eigenem Farbkasten die Kachel ganz aus. Am Handy zwei Spalten. */
.marken{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(200px,40%),1fr));gap:.75rem}
.marken > span{
  display:flex;align-items:center;justify-content:center;aspect-ratio:11/3;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xs);
  font-family:var(--f-d);font-weight:800;font-size:1.2rem;color:var(--blue-deep);white-space:nowrap;
}
.marken .marke img{display:block;width:100%;height:100%;object-fit:contain}

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

/* ---------- DOT-Nummer (29.09.2026) ----------
   Baut auf .flanke-erklaert, .flanke.gross und .flanke-legende auf. Jedes
   Segment traegt eine Beschriftung darunter; gruen ist nur das Datum, in
   der Legende dazu die beiden Kaestchen in --green-deep. Weiss darauf misst
   nur 4,40:1 (29.09.2026 nachgerechnet), deshalb dort 19 px fett: Grosstext,
   Schwelle 3:1. */
.dot-erklaert .flanke{align-items:flex-start;gap:.5rem .6rem}
.dot-seg{display:flex;flex-direction:column;align-items:center;gap:.3rem}
.dot-seg > i,.dot-seg > b{padding:.1rem .35rem;line-height:1.25}
.dot-seg small{font-family:var(--f-b);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:#A8C6E4;font-weight:600}
.dot-erklaert .flanke-legende dt.hat{background:var(--green-deep);font-size:1.1875rem;font-weight:700;padding-block:.05rem}
.dot-ort{margin-top:1rem;color:var(--ink-70);font-size:.9688rem}

/* ---------- Bildkarte (29.09.2026) ----------
   Karte mit Bild oben, 4:3, randlos. Solange kein Foto da ist, steht das
   Flaechenmotiv gross auf Hallenblau, mit demselben Lichtstreifen wie der
   Seitenkopf. So sieht niemand eine leere Bildflaeche. */
.karte.bildkarte{--pad:clamp(1.4rem,2.4vw,2rem);padding:0 var(--pad) var(--pad);overflow:hidden}
.bildkarte-bild{
  display:block;width:calc(100% + 2 * var(--pad));max-width:none;margin:0 calc(var(--pad) * -1) .5rem;
  aspect-ratio:4/3;object-fit:cover;
}
.bildkarte-motiv{
  display:grid;place-items:center;color:#fff;
  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%),var(--blue-deep);
}
.bildkarte-motiv .icon{width:38%;height:auto;max-width:150px}

/* ---------- Text und Foto nebeneinander (29.09.2026) ----------
   Erst eingesetzt auf /achsvermessung/ fuer den Hunter-Messstand. */
.text-foto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);align-items:center}
body .text-foto > *{margin-block-start:0}
.text-foto-bild{margin:0}
.text-foto-bild img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
@media (max-width:800px){.text-foto{grid-template-columns:1fr}}

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

/* ---------- Reifenspur ----------
   `B.trenner()` erzeugt `<div class="profilstreifen">`, sechsmal im Inhalt.
   Bis zum 2026-09-27 war das eine Schraege aus zwei Streifenlagen, die als
   Reifenprofil gemeint war, aber wie eine Schraffur wirkte (Tobias: "das
   soll ein Reifenprofil sein"). Jetzt ein Abdruck einer Lauffläche in
   Laufrichtung: Schulterbloecke schraeg, unten gespiegelt, Mittelrippe
   durchgehend, helle Lamellen in den Bloecken. Der SVG-Filter raut die
   Kanten auf und macht den Druck fleckig wie Gummi auf Asphalt; eine erste
   Fassung mit Punktraster sah nach Tapete aus. Die Maske blendet die Enden
   aus, die Spur laeuft ins Nichts statt an den Rand zu stossen.

   Bewusst leise (Deckkraft .32). Ein Trenner, der lauter ist als die
   Abschnitte, die er trennt, hat seinen Zweck verfehlt. Vorschau zum
   Nachstellen: entwuerfe/reifenspur-test.html. */
.profilstreifen{
  height:60px;background-color:var(--sky);
  /* Reifenabdruck in Laufrichtung: Schulterbloecke schraeg, unten
     gespiegelt, Mittelrippe durchgehend, helle Lamellen in den Bloecken.
     Der SVG-Filter raut die Kanten auf und laesst den Druck fleckig, wie
     Gummi auf Asphalt. Kachel 96 x 60, wiederholt sich nur waagerecht. */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='60' viewBox='0 0 96 60'><defs><filter id='g' x='-5%' y='-5%' width='110%' height='110%'><feTurbulence type='fractalNoise' baseFrequency='.08 .12' numOctaves='3' seed='7' result='t'/><feDisplacementMap in='SourceGraphic' in2='t' scale='2.2' xChannelSelector='R' yChannelSelector='G' result='d'/><feTurbulence type='fractalNoise' baseFrequency='.35' numOctaves='2' seed='3' result='k'/><feColorMatrix in='k' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 .35' result='m'/><feComposite in='d' in2='m' operator='in'/></filter></defs><g fill='%230f2f52' filter='url(%23g)'><path d='M3 3h25l-9 20H-7zM35 3h25l-9 20H25zM67 3h25l-9 20H57zM99 3h25l-9 20H89z'/><path d='M-7 37h25l9 20H3zM25 37h25l9 20H35zM57 37h25l9 20H67zM89 37h25l9 20H99z'/><path d='M0 26h96v8H0z'/><path d='M-4 3h4l-8 20h-4zM28 3h4l-8 20h-4zM60 3h4l-8 20h-4zM92 3h4l-8 20h-4z' fill-opacity='.45'/></g><g stroke='%23f3f7fc' stroke-width='1.3' fill='none' stroke-opacity='.95'><path d='M10 8l-3 8M16 8l-3 8M22 8l-3 8M42 8l-3 8M48 8l-3 8M54 8l-3 8M74 8l-3 8M80 8l-3 8M86 8l-3 8'/><path d='M7 44l3 8M13 44l3 8M19 44l3 8M39 44l3 8M45 44l3 8M51 44l3 8M71 44l3 8M77 44l3 8M83 44l3 8'/><path d='M14 26l4 8M46 26l4 8M78 26l4 8M30 34l4-8M62 34l4-8M94 34l4-8'/></g></svg>");
  background-repeat:repeat-x;background-position:center;
  opacity:.32;
  -webkit-mask-image:linear-gradient(90deg,transparent 1%,#000 16%,rgba(0,0,0,.7) 50%,#000 84%,transparent 99%);
  mask-image:linear-gradient(90deg,transparent 1%,#000 16%,rgba(0,0,0,.7) 50%,#000 84%,transparent 99%);
}
@media (max-width:760px){.profilstreifen{height:42px;background-size:67px 42px}}

/* Kalender-Icon vor "Termin buchen" (Tobias, 27.09.) in Kopfzeile und
   Handyleiste. Die Kopfzeile ist schon inline-flex mit gap, die Handyleiste
   zieht hier nach. */
.mobar a{display:flex;align-items:center;justify-content:center;gap:.4rem}
.mobar .icon{width:18px;height:18px}
/* "Termin buchen": zwischen Text und .zusatz stand die Flex-Luecke .4rem
   plus das &nbsp;, sah nach zwei Leerzeichen aus. Nur das &nbsp; bleibt. */
.mobar .zusatz{margin-left:-.4rem}

/* ---------- Gruss in Handschrift und Krauti im Hero ----------
   Seit 2026-09-27, Vorbild ist das Werbebanner der Agentur von 2018:
   "Herzlich willkommen in Erlangens freundlicher Werkstatt!" in Desyrel,
   Krauti daneben. Nur auf der Startseite, siehe B.hero(gruss=, krauti_motiv=).

   Desyrel ist eine Handschrift ohne Fettschnitt, deshalb Gewicht 400 und
   groesser als die Condensed-Ueberschrift, sonst wirkt sie duenn. Kein
   text-wrap:balance: die Zeilen sollen ungleich lang sein wie von Hand. */
:root{--f-hand:"Desyrel","Caveat","Segoe Print",cursive}
.hero h1.gruss{
  font-family:var(--f-hand);font-weight:400;letter-spacing:0;
  font-size:clamp(2.7rem,6.4vw,5.4rem);line-height:1.04;
  max-width:16ch;text-wrap:wrap;margin-block:.5rem 1rem;
}

/* Krauti lehnt links unten an der Formularkarte und zeigt auf sie. Die
   rechte Spalte wird dafuer zum Bezugsrahmen; der Abstand der Spalten
   waechst, damit er nicht in den Text ragt. */
.hero-grid:has(.hero-krauti){gap:clamp(4rem,9vw,8rem)}
.hero-grid:has(.hero-krauti) > div:nth-child(2){position:relative}
.hero-krauti{
  position:absolute;left:-150px;bottom:-40px;z-index:3;
  width:clamp(150px,15vw,220px);height:auto;
  transform:rotate(6deg);
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.35));
}
@media (max-width:1040px){
  /* Einspaltig: die Karte steht unter dem Text, Krauti lehnt wie am
     Schreibtisch links unten an ihr (Tobias, 27.09.). Er ueberlappt dabei
     die Ecke des gruenen Knopfs; pointer-events:none, damit der Tipp
     trotzdem den Knopf trifft. Der Hero hat unten genug Polster, dass er
     nicht in die Statuskarte ragt. */
  .hero-krauti{left:-12px;bottom:-34px;width:120px;transform:rotate(-4deg);pointer-events:none;
    transition:opacity .35s var(--e-out),transform .35s var(--e-out)}
  /* Ab Schritt 2 steht links unten "Zurueck", genau unter Krauti (Tobias
     am Handy, 28.09.). Er rutscht dann raus und kommt in Schritt 1 wieder. */
  .hero-grid > div:has(.anfrage.mit-js .schritt[data-schritt="1"]:not(.an)) .hero-krauti{
    opacity:0;transform:translate(-40px,30px) rotate(-12deg)}
}
@media (max-width:1040px) and (prefers-reduced-motion:reduce){.hero-krauti{transition:none}}
/* Nach dem Absenden ist die Karte kurz, Krautis Hand lag dann auf dem
   Text (Tobias 02.10.). Die Karte kommt nach vorn, er steht dahinter; am
   Handy geht er wie ab Schritt 2. Nicht weiter nach links schieben: bei
   1100 px laege er dann 93 px auf dem Herotext. */
.hero-grid > div:has(.fertig-karte.an) .anfrage{position:relative;z-index:4}
@media (max-width:1040px){
  .hero-grid > div:has(.fertig-karte.an) .hero-krauti{opacity:0;transform:translate(-40px,30px) rotate(-12deg)}
}
/* Den Auftritt beim Laden erbt Krauti von .hero-grid > div > *, keine
   eigene Regel. */

/* ---------- 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 laufen ueber currentColor (Tabler-Striche, Icongeek26-Flaechen),
   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;
}

/* Teamkarten aus [rk_team] (inc/team.php): .person mit Bild und zwei
   Absaetzen. Ohne Foto stehen Initialen auf hellblauer Flaeche (.ohne-foto),
   nicht mehr Krauti: Elfmal dasselbe Maskottchen wirkte unfertig und zog
   den Blick von den echten Fotos weg (Tobias, 29.09.2026).
   Alle Abteilungen stehen in einem Abschnitt; der Abstand dazwischen ist
   bewusst kleiner als zwischen zwei Abschnitten (Tobias, 29.09.2026). */
.abteilung + .abteilung{margin-top:clamp(2.25rem,4vw,3rem)}
/* Hoechstens fuenf Spalten: bei sechs blieben in kleinen Abteilungen bis
   zu fuenf Plaetze einer Reihe leer. */
.leute{grid-template-columns:repeat(auto-fill,minmax(max(160px,calc((100% - 5rem)/5)),1fr))}
.leute > .person,.leute .person > *{margin:0}
.leute .person{gap:.3rem}
/* Foto und Initialen im selben Rahmen und mit demselben Abstand darunter,
   sonst stehen die Namen 4 px versetzt und weisse Fotogruende
   verschwimmen mit dem Seitengrund. */
.person .wp-block-image,.person .ohne-foto{margin:0 0 .25rem}
.person .wp-block-image img,.person .ohne-foto{
  display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  border-radius:var(--r-sm);border:1px solid var(--line);box-sizing:border-box;
}
.person .ohne-foto{
  aspect-ratio:4/5;border-radius:var(--r-sm);background:var(--sky-2);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-d);font-weight:800;font-size:clamp(1.75rem,5vw,2.5rem);
  letter-spacing:.02em;color:var(--blue);
}
/* Am Handy zwei Spalten: bei einer Spalte war die Seite mit 20 Leuten
   vierzehn Bildschirme lang. */
@media (max-width:560px){
  .leute{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem .875rem}
  .person .name{font-size:1rem}
}
.person .name{font-size:1.0625rem;font-weight:700;line-height:1.3}
.person .rolle{font-size:.875rem;color:var(--ink-50)}

/* 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-wann{margin-top:auto;font-size:.8rem;color:var(--ink-50)}

.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}

/* Mit JavaScript ein Laufband wie bei den Marken (@keyframes lauf).
   site.js haengt die Karten so oft an, dass eine Runde breiter ist als
   der Block, und verdoppelt dann: -50 % ist genau eine Runde. Abstand
   ueber margin statt gap, sonst stimmt die Haelfte um einen halben
   Abstand nicht und das Band ruckt an der Nahtstelle. */
.js .bew-band{overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.js .bew-liste{display:flex;width:max-content;gap:0;
  animation:lauf var(--dauer,60s) linear infinite}
.js .bew-liste > li{flex:0 0 min(20rem,78vw);margin-right:1rem}
.js .bew-band:hover .bew-liste,.bew-band.halt .bew-liste{animation-play-state:paused}
.bew-pause{justify-self:start;background:none;border:0;padding:.2rem 0;
  font:inherit;font-size:.82rem;color:var(--ink-50);text-decoration:underline;cursor:pointer}

@media (max-width:560px){
  /* Ohne JavaScript auf dem Handy nur die erste Karte. Drei untereinander
     sind kein Vertrauensbeweis mehr, sondern eine Strecke. */
  html:not(.js) .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}
  /* WhatsApp als dritter Knopf, nur unter 760 px (29.09.2026). Weiss wie
     Anrufen, damit Gruen der eine Hauptweg bleibt. */
  .mobar .a3{display:none;background:#fff;color:var(--blue-deep)}
  /* 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))}
}
@media (max-width:760px){
  .mobar .a3{display:flex}
  /* Drei Knoepfe in einer Zeile bis 360 px: weniger Innenabstand, kein
     Umbruch in der Beschriftung. */
  .mobar{gap:.4rem;padding-inline:.5rem}
  .mobar a{padding-inline:.4rem;white-space:nowrap;min-width:0}
  /* "Termin buchen" passt bei 390 px nicht in ein Drittel (gemessen:
     Text breiter als 120 px), deshalb dort nur "Termin". */
  .mobar .zusatz{display:none}
}


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

/* ---------- Reifenflanke als Eingabe ----------
   Jede Zahl der Flanke ist eine echte Auswahlliste. Leer: gestrichelt mit
   Fragezeichen, die naechste leere pulsiert. Gefuellt: gruen. Am Handy
   oeffnet sich das gewohnte Auswahlrad des Telefons. */
.anleitung{font-size:.9375rem;color:var(--ink-70);margin:.2rem 0 .6rem;line-height:1.5}
.anleitung b{font-family:var(--f-m);color:var(--ink);font-weight:600;white-space:nowrap}
.flanke.eingabe{padding:1.9rem .8rem 1.1rem;gap:.35rem .3rem;align-items:flex-end;flex-wrap:wrap}
.flanke.eingabe > i{font-size:1.5rem;padding-bottom:.55rem}
.flanke .seg{display:flex;flex-direction:column;align-items:center;gap:.25rem;cursor:pointer;position:relative}
/* Leer: der blasse Beispielwert liegt hinter der durchsichtigen Auswahl. */
.flanke .seg .bsp{position:absolute;left:0;right:0;bottom:0;height:52px;display:flex;align-items:center;justify-content:center;font-family:var(--f-m);font-size:clamp(1.35rem,4.4vw,1.75rem);font-weight:500;color:#A8C6E4;opacity:.55;pointer-events:none}
.anfrage:not(.mit-js) .bsp,.flanke .seg.hat .bsp{display:none}
.anfrage.mit-js .flanke .seg:not(.hat) select{color:transparent}
.flanke .seg small{font-family:var(--f-b);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:#A8C6E4;font-weight:600}
.flanke .seg select{
  -webkit-appearance:none;appearance:none;width:auto;min-width:3.4ch;min-height:52px;
  font-family:var(--f-m);font-size:clamp(1.35rem,4.4vw,1.75rem);font-weight:600;color:#fff;
  text-align:center;text-align-last:center;padding:.3rem .45rem;cursor:pointer;
  background:rgba(255,255,255,.07);border:2px dashed #A8C6E4;border-radius:8px;
  transition:background .2s var(--e-out),border-color .2s var(--e-out);
}
.flanke .seg select:hover{background:rgba(255,255,255,.16);border-color:#fff}
.flanke .seg select:focus-visible{outline:3px solid var(--fokus);outline-offset:2px}
.flanke .seg option{color:var(--ink);background:#fff;font-weight:500}
.flanke .seg.hat select{background:var(--green);border:2px solid var(--green)}
.flanke .seg.frei:not(.hat){opacity:.8}
.flanke .seg.dran select{border-color:#fff;animation:seg-puls 1.6s ease-in-out infinite}
@keyframes seg-puls{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.45)}50%{box-shadow:0 0 0 6px rgba(255,255,255,0)}}
@media (prefers-reduced-motion:reduce){.flanke .seg.dran select{animation:none}}
.flanke .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Mischbereifung: zweite Flanke; Einzeln: Stueckzahl. Ohne Skript sichtbar. */
.achsname{font-size:.8125rem;font-weight:600;color:var(--ink-70);margin:.2rem 0 .35rem}
.achse + .achse{margin-top:.7rem}
.anfrage.mit-js:not(.misch) .nur-misch,.anfrage.mit-js:not(.einzeln) .nur-einzeln,.anfrage.mit-js:not(.kompl) .nur-kompl,.anfrage.kompl .ohne-kompl{display:none}
.kompl{display:flex;flex-direction:column;gap:.9rem;margin:.3rem 0 .2rem}
.nur-einzeln{margin-top:.7rem}

/* Segmentstufe: drei Plaetze wie eine Bewertung, volle Reifen in Blau. */
.wahl .stufe{display:flex;gap:3px;color:var(--blue);margin-bottom:.35rem;font-style:normal}
.wahl .stufe svg.aus{color:var(--line)}

/* ---------- 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:36px;height:36px}
}

/* 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: Fotoraster (29.09.2026) ----------
   Vorher ein Bild-Akkordeon nach dem Agenturentwurf. Tobias fand es zu nah
   an der Agenturseite, die Icons passten nicht. Jetzt ein ruhiges Raster,
   die Bildunterschrift steht unter dem Foto, damit sie auf jedem Bild
   lesbar bleibt. Kein JavaScript. Varianten Rundgang und Scroll-Band in
   entwuerfe/einblicke-varianten.html. */
.einblicke{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,2.6vw,2rem) clamp(1rem,2vw,1.5rem);margin-top:clamp(1.5rem,3vw,2.25rem)}
.einblicke.einblicke-vier{grid-template-columns:repeat(4,minmax(0,1fr))}
.einblick{margin:0}
.einblick img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-sm);background:var(--sky-2)}
.einblick figcaption{margin-top:.7rem;font-size:.9375rem;line-height:1.5;color:var(--ink-70);max-width:44ch}
@media (max-width:900px){.einblicke,.einblicke.einblicke-vier{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.einblicke,.einblicke.einblicke-vier{grid-template-columns:1fr}}
.einblick-titel{color:var(--ink);font-weight:600}

/* ---------- Einblicke: Foto-Stapel (30.09.2026) ----------
   Entwurf aus Claude Design, Variante "Stapel". site.js (stapel) setzt
   .stapel und baut Buehne, Text, Striche und Knoepfe aus der Bildliste.
   Ohne JavaScript bleibt das Raster oben stehen. Das aktive Foto liegt
   oben, die naechsten drei versetzt darunter; Lage und Drehung setzt
   site.js je Foto als transform. */
.einblicke.stapel{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(2rem,4vw,4rem);outline:none}
.einblicke.stapel:focus-visible{outline:3px solid var(--fokus);outline-offset:6px;border-radius:var(--r-sm)}
.stapel-buehne{flex:1 1 480px;min-width:0;padding:28px 36px 20px 8px}
.stapel-fotos{position:relative;aspect-ratio:4/3;cursor:pointer;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.stapel-fotos .einblick{position:absolute;inset:0;margin:0}
.stapel-fotos .einblick img{width:100%;height:100%;border-radius:var(--r-sm);-webkit-user-drag:none;
  transition:transform .75s var(--e-blatt),opacity .55s var(--e-out),box-shadow .5s}
.stapel-fotos figcaption{display:none}
.stapel-text{flex:1 1 300px;min-width:0;display:grid;gap:20px}
.stapel-kopf{display:grid;gap:10px}
.stapel-kopf.neu{animation:stapel-text .55s var(--e-out)}
@keyframes stapel-text{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.stapel-nr{font:800 clamp(3.5rem,7vw,5.5rem)/.9 var(--f-d);color:var(--blue);font-variant-numeric:tabular-nums}
.stapel-kopf h3{margin:0;font:700 clamp(1.5rem,2.4vw,2rem)/1.2 var(--f-d);color:var(--ink)}
.stapel-kopf p{margin:0;font-size:1.0625rem;line-height:1.55;color:var(--ink-70);max-width:40ch;text-wrap:pretty}
.stapel-striche{display:flex;gap:6px}
.stapel-striche button{flex:1;height:44px;border:0;padding:0;background:none;cursor:pointer;display:flex;align-items:center}
.stapel-striche span{display:block;width:100%;height:4px;border-radius:2px;background:var(--sky-2);transition:background .3s}
.stapel-striche [data-stand="gesehen"]{background:var(--blue-bright)}
.stapel-striche [data-stand="aktiv"]{background:var(--blue)}
.stapel-knoepfe{display:flex;gap:10px}
.stapel-zurueck{font:700 1.25rem/1 var(--f-d);color:var(--blue);background:none;border:2px solid var(--sky-2);border-radius:999px;width:44px;height:44px;cursor:pointer;transition:border-color .2s}
.stapel-zurueck:hover{border-color:var(--blue)}
.stapel-weiter{font:700 1rem/1 var(--f-d);color:#fff;background:var(--blue);border:0;border-radius:999px;padding:0 22px;height:44px;cursor:pointer;transition:background .2s}
.stapel-weiter:hover{background:var(--blue-deep)}
@media (max-width:520px){.stapel-buehne{padding:20px 24px 12px 4px}}
@media (prefers-reduced-motion:reduce){.stapel-fotos .einblick img{transition:none}.stapel-kopf.neu{animation:none}}

/* ---------- Bildkacheln (29.09.2026, Bloecke seit 02.10.2026) ----------
   "Was wir sonst noch fuer Ihre Raeder tun": Foto 16:10 oben, Text
   darunter. Gebaut aus normalen Bloecken, damit Foto und Text im Editor
   tauschbar sind. Der Link sitzt auf dem Verweis unten, sein ::after
   deckt die ganze Kachel ab. Die erste Kachel (bildkachel-haupt) geht
   ueber die ganze Reihe, Foto links, Text auf Blau. Die Bildunterschrift
   ist der Bildplatz-Hinweis, sichtbar nur fuer Angemeldete. */
.bildkacheln{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:clamp(1.5rem,3vw,2.25rem)}
body .bildkacheln > *{margin-block-start:0}
.bildkachel{position:relative;display:flex;flex-direction:column;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .22s var(--e-out),box-shadow .22s var(--e-out);--fokus:var(--green-deep)}
@media (hover:hover) and (pointer:fine){.bildkachel:hover{transform:translateY(-4px);box-shadow:0 20px 48px rgba(1,32,63,.14)}}
.bildkachel:active{transform:translateY(-1px)}
.bildkachel:has(:is(.go,.go-knopf) a:focus-visible){outline:3px solid var(--fokus);outline-offset:3px}
.bildkachel :is(.go,.go-knopf) a:focus-visible{outline:none}
.bildkachel :is(.go,.go-knopf) a::after{content:"";position:absolute;inset:0}
.bildkachel > *,.bildkachel-text > *{margin-block:0}
.bildkachel > .bildkachel-bild{position:relative;aspect-ratio:16/10;margin:0;background:var(--sky-2)}
.bildkachel .bildkachel-bild img{display:block;width:100%;height:100%;object-fit:cover}
.bildkachel .bildkachel-bild figcaption{position:absolute;left:.75rem;right:.75rem;bottom:.75rem;margin:0;background:#fff;text-align:left;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}
body:not(.logged-in) .bildkachel-bild figcaption{display:none}
.bildkachel-text{display:flex;flex-direction:column;flex:1;padding:clamp(1.25rem,2.2vw,1.75rem)}
.bildkachel h3{font-size:1.375rem;margin-block:.5rem}
.bildkachel-text p:not(.eyebrow,.go,.go-knopf){font-size:.9688rem;color:var(--ink-70);flex:1}
.bildkachel .go{margin-top:1.1rem;font-weight:600;font-size:.9375rem}
.bildkachel .go a{color:var(--blue);text-decoration:none}
.bildkachel-haupt{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);background:var(--blue);border-color:var(--blue);color:#fff;--fokus:var(--green-bright)}
.bildkachel-haupt > .bildkachel-bild{aspect-ratio:auto;min-height:14rem}
.bildkachel-haupt .bildkachel-text{justify-content:center;padding:clamp(1.5rem,3.2vw,2.75rem)}
.bildkachel-haupt h3{font-size:clamp(1.5rem,2.4vw,1.875rem)}
.bildkachel-haupt .bildkachel-text p:not(.eyebrow,.go-knopf){flex:0 1 auto;color:#C2D9F2;max-width:52ch}
.bildkachel-haupt .go-knopf{margin-top:1.4rem}
@media (hover:hover) and (pointer:fine){.bildkachel-haupt:hover .btn-go{background:var(--green-bright);color:var(--blue-deep)}}
@media (max-width:760px){
  .bildkacheln{grid-template-columns:1fr}
  .bildkachel-haupt{grid-template-columns:1fr}
}

/* ---------- 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)}
/* Seit 1.78 aus Bloecken: Jahr ist ein Absatz .jahr-zahl statt <b>.
   Die Flow-Abstaende von WordPress zwischen den Absaetzen stoeren im Flex. */
.jahre > .jahr,.jahr > p{margin:0}
.jahr .jahr-zahl{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:last-child .jahr-zahl{color:var(--green-deep)}

/* ---------- Zeitleiste als Chronik (30.09.2026) ----------
   Entwurf aus Claude Design, Variante "Chronik". site.js (chronik) baut aus
   der .jahre-Liste zwei Spalten: links klebt das aktuelle Jahr mit
   "Kapitel n von m" und Sprungmarken, rechts die Eintraege an einer Achse,
   die beim Scrollen blau volllaeuft. Der letzte Eintrag ("Heute") ist gruen.
   Ohne JavaScript bleibt die Kartenliste oben. */
.jahre.chronik{container-type:inline-size;display:flex;flex-direction:row;flex-wrap:wrap;gap:clamp(2rem,5vw,4.5rem);align-items:flex-start;padding-left:0;margin-top:clamp(1.5rem,3vw,2.25rem)}
.jahre.chronik::before{content:none}
.chronik-seite{flex:0 1 340px;min-width:0;position:sticky;top:110px;display:grid;gap:18px}
.chronik-kapitel{font:600 13px/1 var(--f-m);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-50)}
.chronik-rahmen{overflow:hidden}
.chronik-jahr{display:block;font:800 clamp(4.5rem,10vw,8rem)/.9 var(--f-d);color:var(--blue);font-variant-numeric:tabular-nums;letter-spacing:-.02em;transition:color .4s}
.chronik-jahr.heute{color:var(--green)}
.chronik-marken{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chronik-marken button{font:700 14px/1 var(--f-d);font-variant-numeric:tabular-nums;color:var(--blue);background:var(--sky-2);border:0;border-radius:999px;padding:0 14px;height:44px;cursor:pointer;transition:background .3s,color .3s}
.chronik-marken button[aria-current="true"]{background:var(--blue);color:#fff}
.chronik-liste{flex:1 1 440px;min-width:0;list-style:none;margin:0;padding:0 0 0 44px;position:relative;display:grid;gap:clamp(3rem,7vw,5.5rem)}
.chronik-liste::before,.chronik-liste::after{content:"";position:absolute;left:11px;top:8px;width:2px;border-radius:1px}
.chronik-liste::before{bottom:8px;background:var(--line)}
.chronik-liste::after{height:var(--fuell,0);background:var(--blue)}
.chronik-eintrag{position:relative;display:grid;gap:14px}
.chronik-eintrag.wartet{opacity:0;transform:translateY(28px)}
.chronik-eintrag.da{transition:opacity .8s var(--e-out),transform .9s var(--e-out)}
.chronik-punkt{position:absolute;left:-41px;top:4px;width:16px;height:16px;border-radius:50%;background:#fff;
  box-shadow:inset 0 0 0 2px rgba(10,20,32,.2),0 0 0 5px #fff;transition:background .4s,box-shadow .4s,transform .5s var(--e-out)}
.chronik-eintrag.erreicht .chronik-punkt{background:var(--blue);box-shadow:inset 0 0 0 2px var(--blue),0 0 0 5px #fff}
.chronik-eintrag.erreicht.heute .chronik-punkt{background:var(--green);box-shadow:inset 0 0 0 2px var(--green),0 0 0 5px #fff}
.chronik-eintrag.aktiv .chronik-punkt{transform:scale(1.35)}
.chronik-eintrag h3{margin:0;font:700 clamp(1.5rem,2.6vw,2.125rem)/1.15 var(--f-d);color:var(--ink);font-variant-numeric:tabular-nums}
.chronik-eintrag.heute h3{color:var(--green-deep)}
.chronik-eintrag p{margin:0;font-size:1.0625rem;line-height:1.6;color:var(--ink-70);max-width:48ch;text-wrap:pretty}
/* Foto je Jahr (seit 1.80), quer 3:2 wie im Entwurf aus Claude Design.
   Ohne JavaScript steht es unter dem Text der Karte. */
.jahr{flex-wrap:wrap}
.jahr-bild{margin:0;flex:1 1 100%;max-width:560px}
.jahr-bild img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-sm);background:var(--sky-2)}
.chronik-eintrag .jahr-bild{margin-top:8px}
/* Nebeneinander brauchen die Spalten 340 + 440 px plus Luecke. Haengt an
   der Blockbreite, nicht am Fenster: sonst bricht die Spalte um und klebt
   trotzdem weiter (Hinweis aus der Chronik-Session, 30.09.). */
@container (max-width:880px){
  .chronik-seite{flex-basis:100%;position:static}
  .chronik-marken{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .chronik-marken button{flex:0 0 auto}
}
@media (prefers-reduced-motion:reduce){.chronik-eintrag.wartet{opacity:1;transform:none}.chronik-jahr{transition:none}}

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

/* Kontaktformular auf der Kontaktseite: dieselbe Karte wie die zwei
   Nachbarn darueber, nur auf Blau mit weisser Schrift (Tobias 27.09.).
   Die Klasse heisst bewusst nicht "kontakt", das ist der blaue Block. */
.kontaktformular{box-shadow:none;background:var(--blue-deep);color:#fff}
.kontaktformular .anfrage-kopf h2{font-size:clamp(1.8rem,3.4vw,2.75rem);color:#fff}
.kontaktformular .anfrage-kopf{margin-bottom:.6rem}
.kontaktformular .sub,.kontaktformular .feld > label,.kontaktformular .zustimmung,.kontaktformular .fehler{color:#fff}
.kontaktformular small{color:#A8C6E4}
.kontaktformular a{color:#fff}
.kontaktformular .fehler{background:var(--rust-deep);padding:.6rem .85rem;border-radius:var(--r-xs)}

/* ---------- Navigation, zweite Fassung (29.09.2026) ----------
   Steht bewusst am Ende: ueberschreibt die aelteren Menueregeln weiter oben,
   ohne dass drei Stellen gleichzeitig angefasst werden muessen.

   Schreibtisch: ein einziger Lichtfleck (.nav-licht, von site.js gesetzt)
   gleitet zwischen den Reitern, statt dass jeder Reiter einzeln aufblinkt.
   In Ruhe liegt er weiss unter der aktuellen Seite, beim Zeigen wird er
   blau. Ohne Skript bleibt der alte Hover je Reiter.

   Handy: ein Blatt vom Kopf bis zum Bildschirmrand, das sich von oben
   aufdeckt (clip-path), die Eintraege laufen gestaffelt ein. Unterpunkte
   stehen immer offen unter ihrem Reiter (Tobias, 29.09.2026: kein Akkordeon). */

@media (min-width:1025px){
  /* Die Gruppenreiter standen 3 px hoeher als "Ueber uns" und "Kontakt":
     Als Inline-Link im div zaehlte ihr Innenabstand nicht mit. */
  .nav-gruppe{display:flex}
  .nav-kopf{display:flex;align-items:center}
  .nav{position:relative;isolation:isolate}
  .nav-licht{position:absolute;z-index:-1;top:.3rem;bottom:.3rem;left:0;width:var(--w,0);
    transform:translateX(var(--x,0));border-radius:999px;background:#fff;opacity:0;pointer-events:none;
    box-shadow:0 1px 2px rgba(1,32,63,.08),0 6px 14px -6px rgba(1,32,63,.18);
    transition:transform .34s var(--e-out),width .34s var(--e-out),background-color .2s var(--e-out),
      box-shadow .2s var(--e-out),opacity .2s var(--e-out)}
  .nav-licht.still{transition:background-color .2s var(--e-out),opacity .2s var(--e-out)}
  .nav-licht.da{opacity:1}
  .nav-licht.zeigt{background:var(--blue);box-shadow:0 8px 18px -8px rgba(0,75,147,.6)}
  .nav.hat-licht > a:hover,.nav.hat-licht .nav-kopf:hover{background:transparent}
  .nav.hat-licht > a,.nav.hat-licht .nav-kopf{transition:color .2s var(--e-out)}
  .nav.hat-licht [data-licht]{color:#fff}

  /* Klappmenue: blendet ein statt umzuschalten. Beim Verlassen wartet es
     einen Moment, damit ein schraeger Weg mit der Maus es nicht schliesst. */
  .nav-unter{display:flex;visibility:hidden;opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top left;
    transition:opacity .14s var(--e-out) .1s,transform .14s var(--e-out) .1s,visibility 0s linear .24s}
  .nav-gruppe:hover .nav-unter,.nav-gruppe:focus-within .nav-unter{visibility:visible;opacity:1;transform:none;
    transition:opacity .2s var(--e-out),transform .26s var(--e-out),visibility 0s}
  .nav-kopf::after{transition:transform .22s var(--e-out)}
  .nav-gruppe:hover .nav-kopf::after,.nav-gruppe:focus-within .nav-kopf::after{transform:translateY(.1em) rotate(225deg)}
  .nav .nav-unter a{color:var(--blue-deep)}
  .nav .nav-unter a:hover{background:var(--sky);color:var(--blue)}
  .nav .nav-unter a[aria-current="page"]{color:var(--blue);font-weight:600}
}

/* Kopf bekommt beim Scrollen einen weichen Schatten. Reines CSS, an die
   Scrollstrecke gebunden; Browser ohne scroll() behalten die Linie. */
@supports (animation-timeline:scroll()){
  .top{animation:kopf-schatten linear both;animation-timeline:scroll();animation-range:0 90px}
  @keyframes kopf-schatten{to{box-shadow:0 12px 30px -14px rgba(1,32,63,.28);border-bottom-color:transparent}}
}

@media (max-width:1024px){
  .nav-licht{display:none}
  .burger{display:inline-flex;align-items:center;gap:.65rem;padding:.8rem 1.05rem .8rem .95rem}
  .burger-icon{position:relative;width:18px;height:12px;flex:0 0 auto}
  .burger-icon::before,.burger-icon::after{content:"";position:absolute;left:0;right:0;height:2px;border-radius:2px;
    background:currentColor;transition:transform .32s var(--e-blatt)}
  .burger-icon::before{top:0}
  .burger-icon::after{bottom:0}
  .burger[aria-expanded="true"] .burger-icon::before{transform:translateY(5px) rotate(45deg)}
  .burger[aria-expanded="true"] .burger-icon::after{transform:translateY(-5px) rotate(-45deg)}

  .nav{display:flex;position:fixed;left:0;right:0;top:var(--kopf-unten,72px);bottom:0;
    flex-direction:column;gap:0;margin:0;padding:.5rem clamp(1.25rem,4vw,2.75rem) calc(6rem + env(safe-area-inset-bottom));
    background:#fff;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none;
    overflow-y:auto;overscroll-behavior:contain;opacity:1;transform:none;
    clip-path:inset(0 0 100% 0);visibility:hidden;
    transition:clip-path .3s var(--e-blatt),visibility 0s linear .3s}
  .nav[data-open="true"]{clip-path:inset(0 0 0 0);visibility:visible;
    transition:clip-path .46s var(--e-blatt),visibility 0s}
  @starting-style{.nav[data-open="true"]{opacity:1;transform:none}}
  html:has(.nav[data-open="true"]){overflow:hidden}

  .nav > a,.nav > .nav-gruppe{opacity:0;transform:translateY(12px);border-bottom:1px solid var(--line);
    transition:opacity .16s var(--e-out),transform .16s var(--e-out)}
  .nav[data-open="true"] > a,.nav[data-open="true"] > .nav-gruppe{opacity:1;transform:none;
    transition:opacity .34s var(--e-out) calc(var(--i,0) * 35ms + 60ms),transform .5s var(--e-out) calc(var(--i,0) * 35ms + 60ms)}
  .nav > a,.nav .nav-kopf{display:flex;align-items:center;min-height:3.4rem;padding:.3rem .1rem;
    font-size:1.1875rem;font-weight:600;color:var(--blue-deep);border-radius:0;background:none}
  .nav > a:hover,.nav .nav-kopf:hover{background:none;color:var(--blue)}
  .nav > a[aria-current="page"]::after,.nav .nav-kopf[aria-current="page"]::after,.nav .nav-unter a[aria-current="page"]::after{
    content:"";display:inline-block;width:7px;height:7px;margin-left:.6rem;border-radius:50%;background:var(--green)}
  .nav .nur-handy{display:flex;border-top:0;margin-top:0;padding-top:.3rem}

  .nav-unter{display:flex;flex-direction:column;position:static;gap:.1rem;margin:0;padding:0;
    min-width:0;border:0;box-shadow:none;background:none;visibility:visible;opacity:1;transform:none}
  .nav .nav-unter a{padding:.65rem .85rem;font-size:1.0625rem;font-weight:500;color:var(--ink-70);border-radius:var(--r-xs)}
  .nav .nav-unter a:hover{background:var(--sky);color:var(--blue)}
  .nav .nav-unter a:last-child{margin-bottom:.7rem}
}

/* ---------- Abstaende von WordPress in Rastern abstellen (29.09.2026) ----------
   WordPress gibt in "flow"-Gruppen jedem Kind ausser dem ersten einen
   Abstand nach oben (24 px). In einem Raster schob das die zweite bis
   letzte Kachel nach unten; die erste stand hoeher. Den Abstand regelt
   dort gap. Dasselbe zwischen Kopf, Inhalt und Fuss: ein 24-px-Streifen
   in Seitenfarbe unter der Servicezeile und ueber der Fusszeile.
   "body" davor, damit die Regel die gleich starke von WordPress schlaegt,
   egal in welcher Reihenfolge die Stile geladen werden. */
body .wp-site-blocks > *,
body :is(.karten,.bento,.hero-grid,.mit-krauti,.zusage-innen,.fehler-in) > *{margin-block-start:0}

/* ---------- 404 ---------- */
.fehlerseite{min-height:min(72vh,680px);display:grid;align-items:center;padding-block:clamp(3rem,8vw,6rem)}
.fehler-in{position:relative;display:grid;grid-template-columns:auto 1fr;gap:clamp(1.5rem,5vw,4.5rem);align-items:center}
.fehler-in .krauti{width:clamp(150px,19vw,250px)}
.fehler-in h1{margin-top:.9rem}
.fehler-wege{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
@media (max-width:700px){
  .fehlerseite{min-height:0}
  .fehler-in{grid-template-columns:1fr;gap:1.25rem}
  .fehler-in .krauti{width:120px}
  .fehler-wege .btn{flex:1 1 100%}
}

/* ---------- Werkstattanfrage auf /autoservice/ (29.09.2026) ----------
   Dieselbe blaue Karte wie das Kontaktformular (.kontaktformular), dazu
   Anliegen und Fahrzeug nebeneinander. Der Hero-Knopf springt auf #anfrage,
   der Abstand haelt das Formular unter der klebenden Kopfzeile frei. */
.werkstatt-reihe{display:grid;grid-template-columns:minmax(0,1fr);gap:.6rem}
@media (min-width:700px){.werkstatt-reihe{grid-template-columns:repeat(2,minmax(0,1fr))}}
#anfrage{scroll-margin-top:7rem}

/* ---------- Hinweise: Band und Fenster (inc/hinweise.php) ----------
   Band wie bisher, mehrere untereinander mit einer feinen Linie. Das
   Fenster ist ein <dialog>, das site.js (hinweisfenster()) einmal je
   Besucher oeffnet. Ohne Skript (html ohne .js) oder ohne Browser-Speicher
   (.als-band) steht es als Band da, ohne Schliessen-Knopf. */
.hinweis + .hinweis{border-top:1px solid rgba(255,255,255,.35)}
.hinweis a{color:#fff}
.hinweis strong ~ .hinweis-text{font-weight:400}
.hinweis-fenster{width:min(34rem,calc(100% - 2.5rem));max-width:none;padding:0;border:0;
  border-radius:var(--r);background:#fff;color:var(--ink);box-shadow:0 24px 60px rgba(1,32,63,.3)}
.hinweis-fenster::backdrop{background:rgba(0,33,66,.55)}
/* Mitte des Fensters: WordPress nimmt Kindern der Seitenbloecke den oberen Rand. */
dialog.hinweis-fenster[open]{margin:auto}
.hinweis-fenster-in{display:flex;flex-direction:column;gap:1rem;padding:clamp(1.4rem,3vw,2.1rem)}
.hinweis-fenster h2{font-size:clamp(1.7rem,4vw,2.4rem)}
.hinweis-fenster p{margin:0;color:var(--ink-70)}
.hinweis-fenster .aktionen{margin-top:.4rem}
html:not(.js) .hinweis-fenster:not([open]),.hinweis-fenster.als-band:not([open]){display:block;position:static;
  width:auto;margin:0;border-radius:0;box-shadow:none;background:var(--green);color:#fff;z-index:79;
  border-top:1px solid rgba(255,255,255,.35)}
html:not(.js) .hinweis-fenster .hinweis-fenster-in,.hinweis-fenster.als-band .hinweis-fenster-in{
  max-width:var(--wrap);margin-inline:auto;
  padding:.7rem var(--gut);gap:.3rem;font-weight:700;font-size:1.1875rem}
html:not(.js) .hinweis-fenster :is(h2,p),.hinweis-fenster.als-band :is(h2,p){color:#fff;font-size:inherit;font-family:inherit;font-weight:inherit;line-height:1.4;margin:0}
html:not(.js) .hinweis-fenster .aktionen,.hinweis-fenster.als-band .aktionen{display:block;margin:0}
html:not(.js) .hinweis-fenster .btn,.hinweis-fenster.als-band .btn{display:inline;padding:0;border:0;background:none;color:#fff;text-decoration:underline;font-size:inherit}
/* Nach der .btn-Regel, sonst gewinnt deren display. */
html:not(.js) .hinweis-fenster .hinweis-zu,.hinweis-fenster.als-band .hinweis-zu{display:none}

/* ---------- Haeufige Fragen (B.faq, Kernblock Details) ---------- */
.faq-liste h2{margin-bottom:1.2rem}
.wp-block-details.faq{max-width:70ch;border-top:1px solid var(--line);padding:0}
.wp-block-details.faq:last-child{border-bottom:1px solid var(--line)}
.wp-block-details.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;
  padding:1rem 0;font-weight:700;font-size:1.125rem;color:var(--ink)}
.wp-block-details.faq summary::-webkit-details-marker{display:none}
.wp-block-details.faq summary::after{content:"+";flex:none;font-family:var(--f-m);font-size:1.4rem;line-height:1;color:var(--blue)}
.wp-block-details.faq[open] summary::after{content:"\2212"}
.wp-block-details.faq p{margin:0 0 1.1rem;color:var(--ink-70)}