/* Website (Startseite, /autofahrer/, /werkstaetten/, /hilfe/) – bis 20.10.2026 als <style> in start.html, jetzt eine Datei für alle vier Seiten */
/* Zwei Welten: Autofahrer (App, Suche, Karte) oben – Werkstätten darunter in eigenem Farbton (--w-ton, dunkler Kopf) */
:root{--schatten-gross:0 1px 2px rgba(20,24,27,.06),0 24px 48px -28px rgba(20,24,27,.45);--w-ton:#E6EDEF;--store:#0E1113;--store-rand:#0E1113}
:root[data-theme="dark"]{--schatten-gross:0 1px 2px rgba(0,0,0,.4),0 24px 48px -28px rgba(0,0,0,.85);--w-ton:#101B1F;--store:#050607;--store-rand:#3A434A}
/* Sanft scrollen erst nach der ersten Bedienung – ein Aufruf mit #Anker springt sofort */
html.sanft{scroll-behavior:smooth}
body{font-size:17px;line-height:1.55}
[id]{scroll-margin-top:76px}
.breite{max-width:1280px;margin:0 auto;padding-inline:clamp(20px,3vw,40px)}
h1,h2,h3{line-height:1.12;font-variation-settings:"wdth" 88;text-wrap:balance}
h2{font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:780;letter-spacing:-.01em}
h3{font-size:1.1rem;font-weight:720}
.knoepfe{justify-content:flex-start}
.knopf{min-height:50px;padding:12px 22px;font-size:1rem;white-space:nowrap}
.knopf.zweit{background:transparent}
.knopf.klein{min-height:44px;padding:8px 16px;font-size:.94rem}
.nur-vorleser{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Kopf: Navigation · rechts „App laden“ (Hauptknopf) und ein kleiner Text-Link zum Partner-Login */
.kopf{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.kopf .breite{display:flex;align-items:center;gap:18px;min-height:64px}
.kopf .marke{flex-wrap:nowrap}
.hauptnav{display:flex;gap:4px;margin-left:auto}
.hauptnav a,.kopf-login{display:inline-flex;align-items:center;min-height:44px;padding-inline:10px;color:var(--ink-2);text-decoration:none;font-weight:600;font-size:.95rem;border-radius:var(--r-s)}
.hauptnav a:hover,.kopf-login:hover{color:var(--accent)}
.kopf-login{font-size:.88rem;font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong);white-space:nowrap}
.kopf .trenner{width:1px;height:22px;background:var(--line)}
.menue-knopf{display:none;width:44px;height:44px;place-items:center;border:1.5px solid var(--line-strong);border-radius:var(--r-m);background:var(--surface);color:var(--ink);cursor:pointer}
.menue-knopf svg{width:22px;height:22px}
.menue{border-top:1px solid var(--line);background:var(--surface)}
.menue ul{list-style:none;margin:0;padding:8px 20px 14px;display:grid}
.menue a{display:flex;align-items:center;min-height:48px;color:var(--ink);text-decoration:none;font-weight:650;border-bottom:1px solid var(--line)}
.menue li:last-child a{border-bottom:0;color:var(--ink-2);font-weight:600}
@media (max-width:980px){.hauptnav,.kopf-login,.kopf .trenner{display:none}.kopf .knopf.klein{margin-left:auto}.menue-knopf{display:grid}}
@media (min-width:981px){.menue{display:none!important}}
@media (max-width:480px){.kopf .breite{gap:10px;padding-inline:16px}.kopf .marke{font-size:1.05rem;gap:8px}.kopf .marke::before{width:28px;height:28px}.kopf .knopf.klein{padding:8px 14px}}
/* Held: Autofahrer – Suche und App im ersten Blick */
.held{padding-block:48px 64px;background:radial-gradient(1200px 520px at 85% -10%,var(--accent-wash),transparent 70%)}
.held .breite{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:40px;align-items:center}
.held h1{font-size:clamp(2.15rem,5vw,3.4rem);font-weight:800;letter-spacing:-.012em;margin-top:12px;color:var(--ink)}
.held h1 em,.werkstatt-kopf h2 em{font-style:normal;color:var(--accent)}
.lead{margin-top:16px;font-size:1.14rem;color:var(--ink-2);max-width:40ch}
.suchkarte{position:relative;margin-top:24px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 12px;align-items:end;padding:18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--schatten-gross);max-width:540px}
.suchkarte .eingabe > span{font-size:.9rem}
.suchfeld{position:relative}
.suchkarte input{min-height:54px;font-size:1.1rem;padding-left:44px;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E6A73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E") 14px center/20px no-repeat}
.suchkarte .knopf{min-height:54px}
/* „Wann?“ (02.10.2026): der Wunschtag gleich auf der Startseite – freiwillig. Ort oben über die ganze Breite, darunter Tag und Knopf; ohne Ortssymbol */
.suchkarte .suchfeld{grid-column:1/-1}
.suchkarte input#s-tag{padding-left:14px;background-image:none!important;min-width:0}
.suchkarte .eingabe > span small{font-weight:500;color:var(--muted)}
.suchkarte .klein,.suchkarte .grund{grid-column:1/-1}
/* Besondere Fahrzeuge: eine ruhige Zeile mit Sprungmarken in die gefilterte Suche */
.spezialzeile{line-height:1.9}
.spezialzeile a{display:inline-block;padding:2px 8px;border:1px solid var(--line-strong);border-radius:999px;text-decoration:none}
.spezialzeile a:hover,.spezialzeile a:focus-visible{background:var(--surface-2,#EEF1F4)}
.suchkarte .grund{font-size:.92rem;padding:8px 12px}
/* Vorschläge (PLZ oder Ort, ganz Deutschland) */
.vorschlaege{position:absolute;z-index:15;left:0;right:0;top:calc(100% + 6px);margin:0;padding:6px;list-style:none;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-m);box-shadow:var(--schatten-gross);max-height:320px;overflow:auto}
.vorschlaege li{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 10px;border-radius:var(--r-s);cursor:pointer;font-size:1rem}
.vorschlaege li b{font-family:var(--f-mono);font-weight:600;font-size:.95rem;color:var(--ink-2)}
.vorschlaege li small{margin-left:auto;padding-left:8px;color:var(--muted);font-size:.8rem;text-align:right}
.vorschlaege li[aria-selected="true"],.vorschlaege li:hover{background:var(--accent-wash)}
/* Suchkarte nach der Breite ihrer Spalte: schmal (Handy, Tablet, kleiner Laptop) steht der Knopf unter dem Feld */
.held-text{container-type:inline-size;min-width:0}
@container (max-width:500px){.suchkarte{grid-template-columns:1fr}.suchkarte .knopf{width:100%}}
@media (max-width:480px){.suchkarte{padding:16px}}
.vertrauen{display:flex;flex-wrap:wrap;gap:8px 18px;margin:18px 0 0;padding:0;list-style:none;font-size:.92rem;color:var(--ink-2);font-weight:600}
.vertrauen li{display:flex;align-items:center;gap:7px}
.vertrauen li::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;background:var(--ok-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.5L12 5.4' fill='none' stroke='%231B7550' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
@media (max-width:900px){.held .breite{grid-template-columns:1fr;gap:12px}.held{padding-block:28px 40px}}
/* Store-Knöpfe: eigene, neutrale Knöpfe; ohne Adresse „Bald …“ und nicht klickbar. Mit App-Store-Link das offizielle Abzeichen (W105, 30.09.2026) */
.store.store-offiziell{padding:0;background:none;border:0;box-shadow:none;min-width:0}.store.store-offiziell img{display:block;height:50px;width:auto}
.laden{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.store{display:inline-flex;align-items:center;gap:10px;min-height:56px;min-width:184px;padding:8px 20px 8px 14px;border-radius:12px;background:var(--store);color:#fff;border:1.5px solid var(--store-rand);text-decoration:none;line-height:1.1;text-align:left}
.store svg{flex:none;width:26px;height:26px;fill:currentColor}
.store small{display:block;font-size:.74rem;font-weight:600;letter-spacing:.01em}
.store b{display:block;font-size:1.16rem;font-weight:720;letter-spacing:-.005em;font-variation-settings:"wdth" 92;white-space:nowrap}
a.store[href]:hover{background:#262C30}
/* 20.10.2026: Das offizielle Abzeichen bekommt keinen dunklen Kasten beim Darüberfahren – der Link war breiter als das Bild (min-width 184 px) */
a.store.store-offiziell:hover{background:none}
.store.bald{background:transparent;color:var(--ink-2);border:1.5px dashed var(--line-strong);cursor:default}
.im-browser{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:700;color:var(--accent);text-underline-offset:3px}
.laden-zeile{margin-top:4px;font-size:.95rem;color:var(--ink-2)}
/* Store-Knöpfe als Nebenweg (Abschluss): kleiner als der Hauptknopf „Jetzt im Browser buchen“ */
.laden.laden-klein{margin-top:12px}
.laden-klein .store{min-height:44px;min-width:0;padding:6px 14px 6px 10px}
.laden-klein .store b{font-size:1rem}
.laden-klein .store svg{width:20px;height:20px}
@media (max-width:480px){.laden .store{flex:1 1 150px;min-width:0;gap:8px;padding:8px 12px 8px 10px}.store b{font-size:1.04rem}}
/* Handy mit der App */
.app-buehne{position:relative;justify-self:center;width:100%;max-width:500px;display:grid;justify-items:end;padding:18px 12px 8px 0}
.beispiel-marke{margin:0 0 6px;padding:2px 8px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted);font-size:.72rem;font-weight:650;letter-spacing:.02em}
@media (max-width:900px){.app-buehne{justify-items:center;padding-right:0}}
.telefon{width:280px;padding:9px;border-radius:46px;background:#15191C;box-shadow:var(--schatten-gross),inset 0 0 0 1.5px #3A434A}
.app-bild{position:relative;height:572px;border-radius:38px;overflow:hidden;background:var(--bg);display:flex;flex-direction:column;font-size:13px;line-height:1.35}
.app-bild::before{content:"";position:absolute;z-index:2;top:9px;left:50%;width:86px;height:25px;margin-left:-43px;border-radius:14px;background:#15191C}
.app-status{display:flex;justify-content:space-between;align-items:center;height:42px;padding:6px 26px 0 30px;font-weight:700;font-size:12px;background:var(--surface)}
.app-status i{display:inline-block;width:20px;height:9px;border:1.5px solid currentColor;border-radius:3px;position:relative}
.app-status i::after{content:"";position:absolute;inset:1px 4px 1px 1px;background:currentColor;border-radius:1px}
.app-kopf{display:flex;align-items:center;gap:8px;padding:6px 14px 10px;background:var(--surface);border-bottom:1px solid var(--line);font-weight:760;font-size:14px;font-variation-settings:"wdth" 88}
.app-kopf::before{content:"";width:24px;height:24px;border-radius:7px;background:url("logo.svg") center/contain no-repeat}
/* Fünf Ansichten im Wechsel (Suchen → Wählen → Buchen → Freigeben → Abholen); jede Spalte ist so breit wie der Bildschirm,
   sonst schiebt ein langes Abzeichen den Inhalt rechts aus dem Telefon (Fehler bis 28.09.2026) */
.app-inhalt{position:relative;flex:1;overflow:hidden}
.app-seite{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:10px;padding:12px;opacity:0;visibility:hidden;transform:translateX(16px);transition:opacity .45s ease,transform .45s ease,visibility 0s linear .45s}
.app-seite.abgang{transform:translateX(-16px)}
.app-seite.aktiv{opacity:1;visibility:visible;transform:none;transition:opacity .45s ease .1s,transform .45s ease .1s,visibility 0s}
.app-frage{margin-top:2px;font-size:11px;font-weight:650;opacity:.85}
.app-zeile{margin:0;font-size:11.5px;color:var(--muted)}
.app-zeile b{color:var(--ink)}
.app-notiz{display:flex;gap:6px;align-items:flex-start;margin:0;padding:0 2px;font-size:11.5px;color:var(--ink-2)}
.app-notiz svg{flex:none;width:14px;height:14px;margin-top:1px;color:var(--ok)}
.app-hinweis{display:grid;gap:3px;padding:11px 12px;border-radius:14px;border:1.5px solid var(--line)}
.app-hinweis b{font-size:13.5px;line-height:1.25}
.app-hinweis span{font-size:11.5px;color:var(--ink-2)}
.app-hinweis.gut{background:var(--ok-wash);border-color:color-mix(in srgb,var(--ok) 40%,transparent)}
.app-hinweis.gut b{color:var(--ok)}
.app-hinweis.achtung{background:var(--warn-wash);border-color:color-mix(in srgb,var(--warn) 40%,transparent)}
.app-hinweis.achtung b{color:var(--warn)}
.app-stand{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;margin:2px 0 0;padding:0;list-style:none}
.app-stand li{height:5px;border-radius:3px;background:var(--line-strong)}
.app-stand li.erledigt,.app-stand li.jetzt{background:var(--accent)}
.app-stand li.jetzt.achtung{background:var(--warn)}
.app-wahl{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.app-wahl span{padding:8px 4px;border-radius:9px;border:1.5px solid var(--line-strong);text-align:center;font-weight:700;font-size:12px;color:var(--ink-2)}
.app-knopf-voll{display:block;padding:9px;border-radius:10px;background:var(--accent);color:var(--on-accent);text-align:center;font-weight:750}
.app-preis.summe{font-weight:750}
/* Angetippt: ein Ring wie ein Fingertipp, danach ist die Wahl gesetzt */
/* Beim Hinausgleiten (.abgang) bleibt dieselbe Animation stehen – sonst fiele die Wahl mitten im Ausblenden zurück */
.app-seite.aktiv .tipp,.app-seite.abgang .tipp{animation:app-tipp .9s ease 1.7s both}
.app-seite.aktiv .app-slots .tipp,.app-seite.aktiv .app-wahl .tipp,.app-seite.abgang .app-slots .tipp,.app-seite.abgang .app-wahl .tipp{animation:app-tipp .9s ease 1.7s both,app-gewaehlt .25s ease 1.8s both}
.app-wahl .tipp{--wahl:var(--ok);--auf-wahl:#fff}
@keyframes app-tipp{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}30%{transform:scale(.95)}60%{transform:none}100%{box-shadow:0 0 0 12px transparent}}
@keyframes app-gewaehlt{to{background:var(--wahl,var(--accent));border-color:var(--wahl,var(--accent));color:var(--auf-wahl,var(--on-accent))}}
/* Ablauf unter dem Telefon: Fortschritt je Ansicht; die Animation des Balkens schaltet weiter (animationend) */
.app-ablauf{display:flex;align-items:center;gap:8px;width:280px;margin-top:14px}
.ablauf-punkte{flex:1;display:flex;gap:6px;min-width:0;margin:0;padding:0;list-style:none}
.ablauf-punkte li{flex:1 1 auto;display:grid;gap:5px;min-width:0;cursor:pointer;font-size:10.5px;font-weight:650;color:var(--muted);text-align:center;white-space:nowrap}
.ablauf-punkte li.aktiv{color:var(--ink)}
.ablauf-punkte i{display:block;height:4px;border-radius:2px;background:var(--line-strong);overflow:hidden}
.ablauf-punkte i::after{content:"";display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left}
.ablauf-punkte li.fertig i::after{transform:none}
.ablauf-punkte li.aktiv i::after{animation:ablauf 4.6s linear both}
.app-buehne.haelt .ablauf-punkte li.aktiv i::after,.app-buehne.haelt .app-seite.aktiv *{animation-play-state:paused}
@keyframes ablauf{to{transform:none}}
.ablauf-pause{flex:none;width:30px;height:30px;display:grid;place-items:center;padding:0;border-radius:50%;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-2);cursor:pointer}
.ablauf-pause svg{width:12px;height:12px;fill:currentColor}
.ablauf-pause[aria-pressed="true"] .zeichen-pause,.ablauf-pause[aria-pressed="false"] .zeichen-weiter{display:none}
@media (prefers-reduced-motion:reduce){.app-seite,.app-seite.aktiv{transition:none;transform:none}.app-seite.aktiv .tipp{animation:none}.app-seite .app-slots .tipp,.app-seite .app-wahl .tipp{background:var(--wahl,var(--accent));border-color:var(--wahl,var(--accent));color:var(--auf-wahl,var(--on-accent))}.ablauf-punkte li.aktiv i::after{animation:none;transform:none}.ablauf-pause{display:none}}
.app-willkommen{display:grid;gap:7px;padding:13px;border-radius:16px;background:linear-gradient(150deg,#0E6272,#08414C);color:#fff}
.app-willkommen b{font-size:15px;line-height:1.2;font-variation-settings:"wdth" 90}
.app-feld{display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:9px;background:#fff;color:#14181B;font-weight:600}
.app-feld svg{width:13px;height:13px;flex:none}
.app-knopf{display:block;padding:8px;border-radius:9px;background:#fff;color:#0B5563;text-align:center;font-weight:750}
.app-karte{display:grid;gap:6px;padding:11px 12px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.app-karte-kopf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 6px;min-width:0}
.app-karte-kopf b{font-size:13.5px}
.app-karte small{color:var(--muted);font-size:11.5px}
.app-abzeichen{justify-self:start;max-width:100%;font-size:10px;font-weight:700;padding:2px 7px;border-radius:99px;background:var(--ok-wash);color:var(--ok)}
.app-preis{display:flex;justify-content:space-between;align-items:center;gap:6px;padding-top:6px;border-top:1px solid var(--line)}
.app-preis b{font-family:var(--f-mono);font-size:12.5px}
.app-preis .pt{font-size:9px;margin-left:4px}
.app-slots{display:flex;gap:5px}
.app-slots span{flex:1;text-align:center;padding:6px 0;border-radius:8px;border:1px solid var(--line-strong);font-family:var(--f-mono);font-size:10.5px;font-weight:600;color:var(--ink-2)}
.app-slots span.an{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.app-leiste{display:grid;grid-template-columns:repeat(4,1fr);padding:8px 6px 16px;background:var(--surface);border-top:1px solid var(--line);font-size:10px;font-weight:650;color:var(--muted);text-align:center}
.app-leiste span{display:grid;justify-items:center;gap:2px}
.app-leiste svg{width:18px;height:18px}
.app-leiste .an{color:var(--accent)}
.karte-schild{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--schatten-gross);font-size:.84rem;line-height:1.3;max-width:250px}
.karte-schild b{display:block;font-size:.9rem}
.karte-schild small{display:block;color:var(--muted)}
.karte-schild .mono{color:var(--ink-2);font-weight:600}
.karte-schild .kreis{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--ok-wash);color:var(--ok)}
.karte-schild .kreis svg{width:18px;height:18px}
.schild-push{left:0;top:17%}
.schild-push .kreis{background:var(--accent-wash);color:var(--accent)}
.schild-termin{left:3%;bottom:22%}
.schild-fertig{left:0;top:30%}
/* Jede Karte erscheint zu ihrer Ansicht im Telefon – wie eine Mitteilung */
.karte-schild{opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease,visibility 0s linear .4s}
.app-buehne[data-schritt="2"] .schild-termin,.app-buehne[data-schritt="3"] .schild-push,.app-buehne[data-schritt="4"] .schild-fertig{opacity:1;visibility:visible;transform:none;transition-delay:.5s,.5s,0s}
/* Bis 1100 px ist neben dem Telefon kein Platz: die Karten entfallen, das Telefon erzählt allein */
@media (max-width:1100px){.karte-schild{display:none}}
@media (max-width:560px){.telefon{width:250px;border-radius:42px}.app-bild{height:500px;border-radius:34px}.app-ablauf{width:250px}.ablauf-punkte{gap:4px}.ablauf-punkte li{font-size:9.5px}.app-seite .nur-breit{display:none}}
/* Vertrauensband */
.band{padding-block:28px;background:var(--surface);border-block:1px solid var(--line)}
.band ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 24px;margin:0;padding:0;list-style:none}
.band li{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:start;align-content:start}
.band li .symbol{grid-row:span 2}
.band b{font-size:.98rem}
.band span:not(.symbol){color:var(--ink-2);font-size:.9rem;line-height:1.45}
@media (max-width:900px){.band ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.band ul{grid-template-columns:1fr}}
/* Abschnitte */
section.block{padding-block:72px}
section.block.hell{background:var(--surface);border-block:1px solid var(--line)}
.kopfzeile{display:grid;gap:12px;max-width:720px;margin-bottom:36px}
.kopfzeile p{color:var(--ink-2);font-size:1.08rem}
.kopfzeile p.etikett{color:var(--accent);font-size:var(--t-xs)}
.raster3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:860px){.raster3{grid-template-columns:1fr}}
.karte{display:grid;gap:10px;align-content:start;padding:22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l)}
.karte .vorher{font-size:.9rem;color:var(--muted);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--signal) 60%,transparent)}
.karte p{color:var(--ink-2)}
.symbol{width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r-m);background:var(--accent-wash);color:var(--accent)}
.symbol svg{width:24px;height:24px}
.schritte{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:s;padding:0;margin:0;list-style:none}
.schritte li{counter-increment:s;display:grid;gap:8px;align-content:start;padding:22px;border-radius:var(--r-l);background:var(--surface);border:1px solid var(--line)}
.schritte li::before{content:counter(s);width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:var(--accent);color:var(--on-accent);font-weight:800}
.schritte p{color:var(--ink-2)}
@media (max-width:1080px){.schritte{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){.schritte{grid-template-columns:1fr}}
/* Die App: was sie kann, und laden */
.app-teil{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:start}
@media (max-width:900px){.app-teil{grid-template-columns:1fr;gap:28px}}
.app-funktionen{display:grid;gap:18px;margin:0;padding:0;list-style:none}
.app-funktionen li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.app-funktionen b{display:block;font-size:1.05rem}
.app-funktionen span:not(.symbol){color:var(--ink-2)}
.laden-karte{display:grid;gap:14px;padding:26px;border-radius:20px;background:var(--surface);border:1.5px solid var(--accent);box-shadow:var(--schatten-gross)}
.laden-karte .laden{margin-top:0}
.laden-karte .store{flex:1 1 184px}
.qr-block{display:none;grid-template-columns:auto 1fr;gap:16px;align-items:center;padding-top:16px;border-top:1px solid var(--line)}
.qr-block .qr{width:124px;height:124px;padding:8px;border-radius:12px;background:#fff;border:1px solid var(--line)}
.qr-block .qr svg{display:block;width:100%;height:100%}
.qr-block p{color:var(--ink-2);font-size:.94rem}
.qr-block b{display:block;color:var(--ink);font-size:1rem;margin-bottom:2px}
@media (min-width:901px) and (hover:hover){.qr-block.bereit{display:grid}}
/* Ganz Deutschland: Punktkarte (gemeinsam/deutschland.svg, Projektion D3) mit den freigeschalteten Werkstätten */
.land{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:48px;align-items:center}
@media (max-width:900px){.land{grid-template-columns:1fr;gap:24px}}
.land-zahlen{display:flex;gap:12px;max-width:480px;margin:24px 0 0;padding:0;list-style:none}
.land-zahlen li{display:grid;gap:2px;align-content:start;flex:1 1 0;min-width:0;padding:14px 18px;border-radius:var(--r-l);background:var(--bg);border:1px solid var(--line)}
.land-zahlen b{font-size:1.9rem;font-weight:800;line-height:1;font-variation-settings:"wdth" 85;color:var(--ink)}
.land-zahlen span{color:var(--ink-2);font-size:.92rem}
.land-orte{margin-top:16px;color:var(--ink-2)}
.land .knoepfe{margin-top:22px;gap:10px}
.karte-de{position:relative;width:100%;max-width:440px;aspect-ratio:1000/1356;justify-self:center}
.karte-de svg{position:absolute;inset:0;width:100%;height:100%;color:var(--accent)}
/* Sichtbarer Ersatz, wenn die Grundkarte nicht geladen werden konnte – sonst stünden die Punkte auf leerer Fläche */
.karte-de.ohne-grund{border:2px dashed var(--line-strong);border-radius:var(--r-l);background:var(--bg)}
.karte-de.ohne-grund::after{content:"Die Kartengrundlage ließ sich nicht laden. Die Punkte zeigen trotzdem, wo Werkstätten freigeschaltet sind.";position:absolute;left:8%;right:8%;bottom:5%;text-align:center;font-size:.82rem;line-height:1.35;color:var(--muted)}
.stadt{position:absolute;transform:translate(-2.5px,-50%);font-size:.74rem;font-weight:650;color:var(--ink-2);white-space:nowrap;text-shadow:0 0 3px var(--surface),0 0 3px var(--surface),0 0 6px var(--surface);pointer-events:none}
.stadt::before{content:"";display:inline-block;width:5px;height:5px;margin-right:5px;border-radius:50%;background:var(--ink-2);vertical-align:middle}
.stadt.links{transform:translate(calc(-100% + 2.5px),-50%);direction:rtl}
.stadt.links::before{margin:0 0 0 5px}
.wk-punkt{position:absolute;z-index:2;display:grid;place-items:center;min-width:16px;height:16px;transform:translate(-50%,-50%);border-radius:99px;background:var(--signal-ink);color:var(--on-status);border:2px solid var(--surface);box-shadow:0 0 0 0 color-mix(in srgb,var(--signal) 55%,transparent);animation:puls 2.6s ease-out infinite;font-size:.72rem;font-weight:800;line-height:1}
.wk-punkt.viele{min-width:26px;height:26px;padding-inline:5px}
.wk-schild{position:absolute;z-index:2;transform:translate(18px,-50%);padding:3px 9px;border-radius:99px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--schatten);font-size:.76rem;font-weight:700;white-space:nowrap;color:var(--ink)}
@keyframes puls{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--signal) 55%,transparent)}70%,100%{box-shadow:0 0 0 14px transparent}}
/* ---------- Welt der Werkstätten: eigener Farbton, dunkler Kopf ---------- */
.welt-werkstatt{background:var(--w-ton);border-top:1px solid var(--line)}
.werkstatt-kopf{padding-block:64px 80px;background:linear-gradient(160deg,#0B5563,#073A43);color:#fff}
:root[data-theme="dark"] .werkstatt-kopf{background:linear-gradient(160deg,#10292F,#0B1D21);border-bottom:1px solid var(--line)}
.werkstatt-kopf .etikett{color:#9ED8E2}
.werkstatt-kopf h2{color:#fff;font-size:clamp(2rem,4.4vw,3.1rem);font-weight:800;margin-top:12px}
.werkstatt-kopf h2 em{color:#9ED8E2}
.werkstatt-kopf .lead{color:#D5E6E9}
.werkstatt-kopf .vertrauen{color:#D5E6E9}
.werkstatt-kopf .knoepfe{margin-top:28px}
.knopf.hell{background:#fff;color:#0B5563}
.knopf.hell:hover{background:#E2EDEF}
:root[data-theme="dark"] .knopf.hell{background:var(--accent);color:var(--on-accent)}
.werkstatt-kopf :focus-visible{outline-color:#fff}
.zugang{margin-top:14px;font-size:1rem;color:#D5E6E9}
.zugang a{display:inline-flex;align-items:center;min-height:44px;color:#fff;font-weight:700;text-underline-offset:3px}
.werkstatt-held{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.werkstatt-held>*{min-width:0}
@media (max-width:900px){.werkstatt-held{grid-template-columns:1fr}}
@media (max-width:480px){.werkstatt-kopf .knoepfe .knopf,.abschluss .knoepfe .knopf{width:100%;white-space:normal}}
.welt-werkstatt .etikett.ort{display:inline-flex;align-items:center;gap:8px}
.welt-werkstatt .etikett.ort::before{content:"";width:18px;height:18px;border-radius:5px;background:url("werkstatt-192.png") center/cover}
.buehne{position:relative;min-height:420px;color:var(--ink)}
.pc{background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--schatten-gross);overflow:hidden;margin-right:120px}
.pc-kopf{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid var(--line);font-weight:700;font-size:.9rem}
.pc-kopf i{width:9px;height:9px;border-radius:50%;background:var(--surface-2)}
.pc-kopf span{margin-left:8px}
.pc-liste{display:grid;gap:10px;padding:16px}
.eintrag{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:start;padding:12px 96px 12px 14px;border:1px solid var(--line);border-radius:var(--r-m)}
.eintrag div{display:grid;gap:2px;justify-items:start;min-width:0}
.eintrag .zeit{font-family:var(--f-mono);font-size:.82rem;font-weight:600;color:var(--ink-2);padding-top:2px}
.eintrag b{font-size:.95rem}
.eintrag small{color:var(--muted);font-size:.8rem}
.pille{margin-top:4px;font-size:.74rem;font-weight:700;padding:3px 9px;border-radius:var(--r-pille);white-space:nowrap}
.pille.neu{background:var(--warn-wash);color:var(--warn)}
.pille.ok{background:var(--ok-wash);color:var(--ok)}
.pille.kv{background:var(--accent-wash);color:var(--accent)}
.handy{position:absolute;right:0;bottom:-22px;width:210px;background:var(--surface);border:7px solid #1A2024;border-radius:30px;box-shadow:var(--schatten-gross);overflow:hidden}
.handy-inhalt{display:grid;gap:9px;padding:14px 12px 16px;font-size:.8rem}
.handy-inhalt .gruss{font-weight:750;font-size:.95rem}
.kv-karte{display:grid;gap:6px;padding:10px;border-radius:var(--r-m);background:var(--accent-wash)}
.kv-karte b{font-size:.82rem}
.kv-zeile{display:flex;justify-content:space-between;gap:8px;font-family:var(--f-mono);font-size:.68rem;color:var(--ink-2)}
.kv-zeile span:last-child{white-space:nowrap}
.mini-knopf{display:block;text-align:center;padding:8px;border-radius:9px;background:var(--accent);color:var(--on-accent);font-weight:700;font-size:.78rem}
@media (max-width:560px){.eintrag{padding-right:14px}.pc{margin-right:0}.handy{display:none}.buehne{min-height:0}}
.welt-werkstatt section.block{padding-block:64px}
.welt-werkstatt section.block + section.block{padding-top:8px}
.welt-werkstatt .schritte li,.welt-werkstatt .karte,.welt-werkstatt .funktionen .symbol{background:var(--surface)}
.funktionen{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 28px;padding:0;margin:0;list-style:none}
.funktionen li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}
.funktionen li b{display:block}
.funktionen li span{color:var(--ink-2);font-size:.96rem}
.funktionen .symbol{width:38px;height:38px}
@media (max-width:760px){.funktionen{grid-template-columns:1fr}}
/* Preise und Tarifkarten stehen seit dem 28.09.2026 nicht mehr auf der Startseite (Vorgabe des Betreibers: Preise und Tarife
   sieht eine Werkstatt erst nach ihrer Registrierung – in der Werkstatt-Software, „Konto → Tarif & Vertrag“). Geblieben ist „Kein Preiskampf“,
   jetzt unter den Vorteilen: Es sagt etwas über die Reihenfolge der Werkstätten, nicht über einen Tarif. */
.fair{max-width:860px;margin:28px auto 0;display:grid;grid-template-columns:auto 1fr;gap:14px;padding:18px 20px;border-radius:var(--r-l);background:var(--surface);border:1px solid var(--line)}
.fair p{color:var(--ink-2)}
/* FAQ */
.faq{max-width:820px;display:grid;gap:10px}
.faq h3{margin-top:14px;font-size:1rem;color:var(--ink-2)}
.faq h3:first-child{margin-top:0}
.faq details{padding:0 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m)}
.faq summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:56px;padding-block:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.3rem;line-height:1;color:var(--accent)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:-4px 0 16px;color:var(--ink-2)}
/* Abschluss: zwei getrennte Wege */
.abschluss h2{text-align:center;margin-bottom:28px}
.zwei-wege{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:860px){.zwei-wege{grid-template-columns:1fr}}
.weg{display:grid;gap:12px;align-content:start;padding:28px;border-radius:20px;background:var(--bg);border:1px solid var(--line)}
.weg h3{font-size:1.4rem;font-weight:780}
.weg p:not(.etikett){color:var(--ink-2)}
.weg .laden{margin-top:4px}
.weg.werkstatt{background:linear-gradient(160deg,#0B5563,#073A43);border-color:transparent;color:#fff}
:root[data-theme="dark"] .weg.werkstatt{background:linear-gradient(160deg,#10292F,#0B1D21);border-color:var(--line)}
.weg.werkstatt .etikett{color:#9ED8E2}
.weg.werkstatt p:not(.etikett){color:#D5E6E9}
.weg.werkstatt .zugang{margin-top:0}
.weg.werkstatt :focus-visible{outline-color:#fff}
/* Fuß: Autofahrer, Werkstätten, Prüfdienste, Rechtliches */
.fuss{padding-block:44px 56px;border-top:1px solid var(--line);background:var(--surface);color:var(--ink-2);font-size:.92rem}
.fuss-raster{display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:28px 24px}
@media (max-width:980px){.fuss-raster{grid-template-columns:repeat(2,minmax(0,1fr))}.fuss-marke{grid-column:1/-1}}
@media (max-width:420px){.fuss-raster{gap:24px 16px}}
.fuss-marke p{margin-top:10px;max-width:34ch;color:var(--muted)}
.fuss .marke{font-size:1.05rem}
.fuss .marke::before{width:26px;height:26px;border-radius:7px}
.fuss h2{font-size:.78rem;font-weight:760;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);font-variation-settings:"wdth" 100}
.fuss ul{list-style:none;margin:8px 0 0;padding:0}
.fuss li a{display:inline-flex;align-items:center;min-height:40px;color:var(--ink-2);text-underline-offset:3px}
.fuss li a:hover{color:var(--accent)}
.fuss-unten{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:28px;padding-top:18px;background:linear-gradient(var(--line),var(--line)) 20px 0/calc(100% - 40px) 1px no-repeat;color:var(--muted);font-size:.84rem}
.fuss-unten a{color:var(--muted)}
.testhinweis{margin-top:10px}
@media (prefers-reduced-motion:reduce){html.sanft{scroll-behavior:auto}}

/* ---------- Seiten der Website (Aufteilung H2, Wahl des Betreibers vom 20.10.2026): Start, /autofahrer/, /werkstaetten/, /hilfe/ ---------- */
.hauptnav a[aria-current="page"]{color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent)}
.menue a[aria-current="page"]{color:var(--accent)}
/* Auf /werkstaetten/ ist der Werkstatt-Kopf die Überschrift der Seite (h1 statt h2) */
.werkstatt-kopf h1{color:#fff;font-size:clamp(2rem,4.4vw,3.1rem);font-weight:800;margin-top:12px}
.werkstatt-kopf h1 em{font-style:normal;color:#9ED8E2}
/* Kopf der Unterseiten /autofahrer/ und /hilfe/ */
.seitenkopf{padding-block:44px 36px;background:radial-gradient(1200px 520px at 85% -10%,var(--accent-wash),transparent 70%)}
.seitenkopf h1{font-size:clamp(1.9rem,4.4vw,2.9rem);font-weight:800;letter-spacing:-.012em;margin-top:10px;color:var(--ink)}
.seitenkopf h1 em{font-style:normal;color:var(--accent)}
.seitenkopf .lead{max-width:56ch}
.seitenkopf .knoepfe{margin-top:22px;gap:10px}
/* Startseite: „Ich bin …“ – zwei Wege, hell für Autofahrer, dunkel für Werkstätten (wie die zwei Welten der Seiten) */
section.block.wahl-block{padding-block:8px 48px}
.wahl-titel{font-size:clamp(1.4rem,2.6vw,1.8rem);font-weight:800;margin-bottom:16px}
.wahl-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:640px){.wahl-raster{grid-template-columns:1fr}}
.wahl-kachel{display:flex;flex-direction:column;gap:8px;padding:24px;border-radius:20px;text-decoration:none;min-height:180px;box-shadow:var(--schatten-gross);transition:transform .15s ease}
.wahl-kachel b{font-size:1.45rem;font-weight:800;letter-spacing:-.01em}
.wahl-kachel .weiter{margin-top:auto;padding-top:8px;font-weight:700}
.wahl-kachel.fahrer{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.wahl-kachel.fahrer > span:not(.symbol):not(.weiter){color:var(--ink-2)}
.wahl-kachel.fahrer .weiter{color:var(--accent)}
.wahl-kachel.werkstatt{background:linear-gradient(160deg,#0B5563,#073A43);color:#fff}
:root[data-theme="dark"] .wahl-kachel.werkstatt{background:linear-gradient(160deg,#10292F,#0B1D21);border:1px solid var(--line)}
.wahl-kachel.werkstatt .symbol{background:rgba(255,255,255,.14);color:#fff}
.wahl-kachel.werkstatt > span:not(.symbol):not(.weiter){color:#D5E6E9}
.wahl-kachel.werkstatt .weiter{color:#9ED8E2}
.wahl-kachel:hover{transform:translateY(-2px)}
.wahl-kachel:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.wahl-kachel{transition:none}.wahl-kachel:hover{transform:none}}
/* Abschluss mit nur einem Weg (je Unterseite der passende) */
.zwei-wege.ein-weg{grid-template-columns:minmax(0,1fr);max-width:680px;margin-inline:auto}
/* /hilfe/: der Bot steht groß offen (gemeinsam/hilfe.js), darunter alle Fragen als Text */
section.block.hilfe-block{padding-block:8px 56px}