/* Zeigerhaus – hell und klar
   Weiß und kühles Hellgrau als Grund, Navy als einzige Markenfarbe, eine Schrift (Archivo).
   Große, gut lesbare Texte auch für ältere Menschen. Statt Stockfotos feine Linienzeichnungen
   einer markenneutralen Uhr; eigene Fotos des Auftraggebers dort, wo sie passen. */

@font-face{font-family:Archivo;font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(../fonts/archivo.woff2) format("woff2")}

:root{
  --weiss:#FFFFFF;
  --papier:#F3F5F8;
  --linie:#D9DFE7;
  --linie-stark:#AEB9C7;
  --navy:#132941;
  --navy-hell:#21426C;
  --navy-zart:#E6ECF4;
  --text:#18202B;
  --grau:#4B5565;
  --auf-navy:#FFFFFF;
  --auf-navy-leise:#C9D3E0;
  --fehler:#A12A2A;
  --fehler-grund:#FBF1F1;
  --platzhalter:#6A7382;
  color-scheme:light;
  --schrift:Archivo,"Helvetica Neue",Arial,sans-serif;
  --breite:1240px;
  --rand:clamp(20px,4vw,56px);
  --abstand:clamp(80px,9vw,132px);
  --rund:14px;
  --sanft:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:16px;background:var(--papier);scrollbar-color:var(--linie-stark) var(--papier)}
body{margin:0;background:var(--weiss);color:var(--text);font:400 1.1875rem/1.65 var(--schrift);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
img{display:block;max-width:100%;height:auto}
picture{display:block}
a{color:var(--navy);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--navy-hell);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--navy);outline-offset:3px;border-radius:4px}
/* Auf den Navy-Bändern ist der Fokusrahmen weiß, in der weißen Formularzeile wieder Navy */
:is(.band,.schluss,.hinweis-navy,.bj-frage-box) :focus-visible{outline-color:var(--weiss)}
.schnell-zeile :focus-visible,.schnell-zeile .eingabe:focus{outline-color:var(--navy)}
::selection{background:var(--navy-zart);color:var(--text)}
[hidden]{display:none!important}
.springen{position:absolute;left:16px;top:-80px;z-index:30;display:inline-flex;align-items:center;min-height:48px;padding:10px 20px;border-radius:999px;background:var(--navy);color:var(--weiss);font:600 1.0625rem var(--schrift);text-decoration:none}
.springen:focus{top:12px}
.springen:hover{color:var(--weiss)}
.innen{max-width:var(--breite);margin:0 auto;padding:0 var(--rand)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.ico{width:20px;height:20px;flex:none}

/* ---------- Schrift ---------- */
.h1,.h2{font-family:var(--schrift);font-weight:600;font-stretch:108%;color:var(--navy);letter-spacing:-.018em;text-wrap:balance}
.h1{font-size:clamp(2.375rem,4.6vw,4rem);line-height:1.07}
.h2{font-size:clamp(1.9375rem,3.2vw,2.875rem);line-height:1.12}
.h3{font:600 1.3125rem/1.3 var(--schrift);color:var(--navy);text-wrap:balance}
.lead{font-size:clamp(1.1875rem,1.5vw,1.3125rem);line-height:1.6;color:var(--grau)}
.label{font:600 0.9375rem/1.4 var(--schrift);color:var(--navy)}
.text p+p{margin-top:1em}
.text{color:var(--grau)}
.kopfzeile{max-width:820px;margin:0 auto clamp(48px,6vw,80px);text-align:center}
.kopfzeile p{max-width:40em;margin:22px auto 0;color:var(--grau)}
/* Ablauf, Fakten und Fragen beginnen linksbündig, damit nicht jeder Abschnitt gleich eröffnet */
:is(#ablauf,#kurz,#fragen) .kopfzeile{max-width:860px;margin-left:0;text-align:left}
:is(#ablauf,#kurz,#fragen) .kopfzeile p{margin-left:0}
:is(#kurz .fakten,#fragen .fragen){margin-left:0}

/* ---------- Knöpfe ---------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 32px;border:2px solid var(--navy);border-radius:999px;background:var(--navy);color:var(--weiss);font:600 1.0625rem/1.2 var(--schrift);text-decoration:none;text-align:center;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.knopf:hover{background:var(--navy-hell);border-color:var(--navy-hell);color:var(--weiss);text-decoration:none}
.knopf-rahmen{background:transparent;color:var(--navy)}
.knopf-rahmen:hover{background:var(--navy-zart);border-color:var(--navy);color:var(--navy)}
.knopf-klein{min-height:48px;padding:0 22px;font-size:1rem}
.knopf-breit{width:100%}
.knopf:disabled{opacity:.6;cursor:default}
.textknopf{min-height:48px;background:none;border:0;padding:8px 4px;font:600 1.0625rem/1.2 var(--schrift);color:var(--navy);text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.textknopf:hover{color:var(--navy-hell)}
.aktionen{display:flex;flex-wrap:wrap;align-items:center;gap:18px 32px}
/* Auf Navy-Bändern */
:is(.band,.schluss) .knopf{background:var(--weiss);border-color:var(--weiss);color:var(--navy)}
:is(.band,.schluss) .knopf:hover{background:var(--navy-zart);border-color:var(--navy-zart);color:var(--navy)}
:is(.band,.schluss) .schnell-zeile .knopf{background:var(--navy);border-color:var(--navy);color:var(--weiss)}
:is(.band,.schluss) .schnell-zeile .knopf:hover{background:var(--navy-hell);border-color:var(--navy-hell)}

/* Telefon als Symbol statt ausgeschriebener Nummer */
.tel-knopf{display:inline-flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;border:2px solid var(--navy);border-radius:50%;color:var(--navy);text-decoration:none;transition:background-color .2s,color .2s}
.tel-knopf:hover{background:var(--navy);color:var(--weiss)}
.tel-knopf .ico{width:19px;height:19px}
:is(.band,.schluss) .tel-knopf{border-color:var(--weiss);color:var(--weiss)}
:is(.band,.schluss) .tel-knopf:hover{background:var(--weiss);color:var(--navy)}
.tel{display:flex;align-items:center;gap:14px;font:400 1.125rem/1.45 var(--schrift);color:var(--grau)}
:is(.band,.schluss) .tel{color:var(--auf-navy-leise)}

/* ---------- Kopf ---------- */
.kopf{position:relative;z-index:5;background:var(--weiss);border-bottom:1px solid var(--linie)}
.kopf-in{max-width:1320px;margin:0 auto;padding:0 var(--rand);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;min-height:92px}
.kopf-nav{display:flex;gap:30px}
.kopf-nav a,.kopf-link{padding:12px 0;font:500 1.0625rem/1.2 var(--schrift);color:var(--text);text-decoration:underline 2px transparent;text-underline-offset:10px;white-space:nowrap;transition:text-decoration-color .2s}
.kopf-nav a:hover,.kopf-link:hover{color:var(--navy);text-decoration-color:var(--linie-stark)}
.kopf-nav a[aria-current],.kopf-link[aria-current]{color:var(--navy);text-decoration-color:var(--navy)}
/* "Baujahr bestimmen" steht am Desktop rechts neben dem Telefon, auf schmalen Bildschirmen im Menü */
.kopf-nav .nav-baujahr{display:none}

/* Pfadangabe über dem Seitenkopf: zeigt, wo man ist, und führt zurück */
.pfad{display:flex;flex-wrap:wrap;align-items:center;margin-bottom:10px;font:400 0.9375rem/1.4 var(--schrift);color:var(--grau)}
.pfad a{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding-right:10px;color:var(--grau);text-decoration:none}
.pfad a::after{content:"";width:6px;height:6px;border-top:1.5px solid var(--linie-stark);border-right:1.5px solid var(--linie-stark);transform:rotate(45deg)}
.pfad a:hover{color:var(--navy);text-decoration:underline}
.pfad [aria-current]{color:var(--text)}
.anfrage-kopf .pfad{justify-content:center}
.einstieg:has(.pfad){padding-top:clamp(12px,2vw,24px)}
.kopf-logo{display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 0;text-decoration:none}
.kopf-logo img{height:38px;width:auto}
.kopf-zusatz{font:400 0.9063rem/1.2 var(--schrift);color:var(--grau);white-space:nowrap}
.kopf-rechts{display:flex;justify-content:flex-end;align-items:center;gap:16px}

/* ---------- Linienzeichnungen ---------- */
.uhrzeichnung{display:block;width:100%;height:auto;color:var(--navy);fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.uhrzeichnung .flaeche{fill:var(--weiss)}
.uhrzeichnung .fein,.uhrzeichnung .naht,.uhrzeichnung .fuehrung,.uhrzeichnung .werk{stroke-width:1}
.uhrzeichnung .naht{stroke-dasharray:4 5}
.uhrzeichnung .werk{stroke-dasharray:3 6}
.uhrzeichnung .punkt{fill:currentColor;stroke:none}
.uhrzeichnung .nummer{fill:var(--weiss);stroke-width:1.5}
.uhrzeichnung text{fill:currentColor;stroke:none;font:600 20px var(--schrift)}
.uhrzeichnung .zeiger{transform-box:view-box;transform-origin:200px 300px;transition:transform 1.8s var(--sanft)}
.uhrzeichnung .zeiger-stunde{transform:rotate(305deg)}
.uhrzeichnung .zeiger-minute{transform:rotate(60deg)}
/* Erklärte Uhr: Mitte des Zifferblatts bei 320/300; die Zeiger laufen etwas ruhiger, parallel zu den Hinweislinien */
.uhr-erklaert .zeiger{transform-origin:320px 300px;transition-duration:2.2s}
.mini-uhr{display:block;width:56px;height:56px;color:var(--navy);fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.mini-uhr .fein{stroke-width:1;stroke:var(--linie-stark)}
.mini-uhr .zeiger-linie{stroke-width:2.4}
.mini-uhr .punkt{fill:currentColor;stroke:none}

/* ---------- Einstieg: Text und Karte links, gezeichnete Uhr rechts ---------- */
.einstieg{padding:clamp(40px,5vw,72px) 0 clamp(56px,6vw,88px)}
.einstieg-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(32px,5vw,88px);align-items:center}
.einstieg .h1{max-width:13em;font-size:clamp(2.25rem,3.6vw,2.9375rem);font-stretch:104%}
.einstieg .lead{max-width:34em;margin-top:22px}
.einstieg .aktionen{margin-top:34px}
.einstieg-bild{margin:0;justify-self:center;width:100%;max-width:440px}
.einstieg-bild figcaption{margin-top:14px;font:400 1.0625rem/1.5 var(--schrift);color:var(--grau);text-align:center;text-wrap:balance}
.einstieg-foto{max-width:520px}
.einstieg-foto img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--rund)}

/* Formularkarte */
.schnellstart{margin-top:32px;max-width:580px;padding:clamp(22px,2.4vw,32px);background:var(--papier);border-radius:var(--rund)}
.schnellstart-schritt{margin-top:10px;font:500 1rem/1.4 var(--schrift);color:var(--grau);text-align:center}
.schnellstart-titel{margin-bottom:18px;font:600 1.5rem/1.25 var(--schrift);color:var(--text);letter-spacing:-.01em;text-wrap:balance}
.schnellstart-felder{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.schnellstart-feld{margin-bottom:18px}
.vorteile{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:16px;font:500 1rem/1.4 var(--schrift);color:var(--grau)}
.vorteile li{display:flex;align-items:center;gap:8px}
.vorteile li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--navy)}
.tel-zeile{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--linie);font:400 1.0625rem/1.45 var(--schrift);color:var(--grau)}

/* ---------- Zusagen ---------- */
.zusagen{background:var(--papier)}
.zusagen ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.zusagen li{padding:34px 28px;border-left:1px solid var(--linie)}
.zusagen li:first-child{border-left:0;padding-left:0}
.zusagen b{display:block;font:600 1.1875rem/1.3 var(--schrift);color:var(--navy)}
.zusagen span{display:block;margin-top:6px;font:400 1.125rem/1.5 var(--schrift);color:var(--grau)}

/* ---------- Abschnitte ---------- */
.abschnitt{padding:var(--abstand) 0}
.abschnitt-hell{background:var(--papier)}
.zwei{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(40px,6vw,104px);align-items:center}
.zwei .h2{margin-bottom:26px}
/* Bild links, Text rechts: damit nicht jeder Abschnitt gleich aufgebaut ist */
.zwei-umgekehrt{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.zwei-umgekehrt>figure{order:-1}
.foto{margin:0}
.foto img{width:100%;border-radius:var(--rund);object-fit:cover;background:var(--papier)}
/* Solange ein Foto lädt, steht eine ruhige Fläche in Seitenfarbe statt eines weißen Kastens */
.einstieg-foto img,.bildreihe img{background:var(--papier)}
.band .foto img{background:var(--navy-hell)}
.foto-hoch img{aspect-ratio:4/5}
.foto-quer img{aspect-ratio:3/2}
.foto figcaption{margin-top:14px;font:400 1.0625rem/1.5 var(--schrift);color:var(--grau)}
.zitat{max-width:30ch;margin:clamp(64px,8vw,112px) auto 0;font:500 clamp(1.625rem,2.8vw,2.375rem)/1.3 var(--schrift);letter-spacing:-.012em;color:var(--navy);text-align:center;text-wrap:balance}

/* ---------- Prüfung: erklärte Zeichnung und Prüfzettel ---------- */
.pruef-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(40px,6vw,96px);align-items:center}
.pruef-zeichnung{margin:0}
.pruef-zeichnung figcaption{margin-top:12px;font:400 1.0625rem/1.5 var(--schrift);color:var(--grau);text-align:center}
.zettel{background:var(--weiss);border-radius:var(--rund);padding:clamp(24px,3vw,40px)}
.zettel-kopf{display:flex;justify-content:space-between;gap:16px;padding-bottom:16px;border-bottom:2px solid var(--navy);font:600 1.0625rem/1.4 var(--schrift);color:var(--navy)}
.zettel-kopf span:last-child{color:var(--grau);font-weight:500}
.zettel dl{counter-reset:z}
.zettel-zeile{display:grid;grid-template-columns:40px minmax(0,1fr);gap:4px 16px;padding:18px 0;border-bottom:1px solid var(--linie);counter-increment:z}
.zettel-zeile::before{content:counter(z);grid-row:1/span 2;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:1.5px solid var(--navy);border-radius:50%;font:600 1rem/1 var(--schrift);color:var(--navy)}
.zettel-zeile dt{font:600 1em/1.35 var(--schrift);color:var(--text)}
.zettel-zeile dd{font-size:1em;line-height:1.55;color:var(--grau)}
.zettel-fuss{padding-top:18px;font:600 1.125rem/1.5 var(--schrift);color:var(--navy)}
/* Nummern nur dort, wo sie zu einem Hinweis in der Zeichnung gehören (1 bis 4 auf der Startseite) */
.pruef-grid .zettel-zeile:nth-child(n+5),.zettel-markenseite .zettel-zeile{grid-template-columns:minmax(0,1fr)}
.pruef-grid .zettel-zeile:nth-child(n+5)::before,.zettel-markenseite .zettel-zeile::before{display:none}
.pruef-grid .zettel-zeile:nth-child(n+5){padding-left:56px}
.pruef-grid .zettel-zeile:nth-child(5){border-top:1px solid var(--linie-stark)}
.zettel-markenseite{max-width:880px;margin:0 auto;background:var(--papier)}

/* ---------- Ablauf als Zeitachse ---------- */
.ablauf{--luecke:clamp(24px,3vw,44px);position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--luecke)}
/* Verbindungslinie je Schritt: von der Uhr bis zur naechsten Uhr, endet beim letzten Schritt */
.ablauf li:not(:last-child)::before{content:"";position:absolute;left:56px;right:calc(-1 * var(--luecke));top:28px;height:1px;background:var(--linie-stark)}
/* Die Zeitangabe steht als Beschriftung neben der kleinen Uhr auf der Zeitachse, nicht über der Überschrift */
.ablauf li{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:14px;align-items:center;align-content:start}
.ablauf .mini-uhr{position:relative;background:var(--weiss);border-radius:50%}
.ablauf .wann{position:relative;justify-self:start;padding-right:12px;background:var(--weiss);font:600 1.0625rem/1.3 var(--schrift);color:var(--navy)}
.abschnitt-hell .ablauf :is(.mini-uhr,.wann){background:var(--papier)}
.ablauf .h3{grid-column:1/-1;margin:24px 0 10px}
.ablauf p{grid-column:1/-1;font-size:1em;line-height:1.6;color:var(--grau)}
.mitte{display:flex;flex-direction:column;align-items:center;gap:22px;margin-top:clamp(52px,6vw,80px);text-align:center}
.mitte .aktionen{justify-content:center}

/* ---------- Ansprechpartner: Navy-Band ---------- */
.band{background:var(--navy);color:var(--auf-navy)}
.band-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center;padding-block:var(--abstand)}
.band .h2{color:var(--weiss);max-width:16ch;margin-bottom:22px}
.band-text>p:not(.tel){max-width:32em;margin-bottom:34px;color:var(--auf-navy-leise);font-size:1.25rem}
.band .foto img{aspect-ratio:4/3}

/* ---------- Marken ---------- */
.markenliste{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(24px,3vw,48px);max-width:1080px;margin:0 auto}
.markenliste li{border-top:1px solid var(--linie);font:500 1.1875rem/1.4 var(--schrift)}
.markenliste li:nth-last-child(-n+4){border-bottom:1px solid var(--linie)}
.markenliste a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 0;color:var(--text);text-decoration:none}
.markenliste a::after{content:"";flex:none;width:8px;height:8px;border-top:2px solid var(--navy);border-right:2px solid var(--navy);transform:rotate(45deg)}
.markenliste a:hover{color:var(--navy);text-decoration:underline}
.markenliste li:not(:has(a)){padding:15px 0;color:var(--text)}
.weitere-marken{max-width:860px;margin:40px auto 0;font-size:1em;color:var(--grau);text-align:center}
.bildreihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);max-width:1080px;margin:clamp(56px,7vw,88px) auto 0}
.bildreihe img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--rund)}
.bildreihe figcaption{margin-top:12px;font:500 1.0625rem/1.4 var(--schrift);color:var(--grau)}

/* ---------- Auf einen Blick ---------- */
.fakten{max-width:960px;margin:0 auto;border-top:2px solid var(--navy)}
.fakten div{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:28px;padding:20px 0;border-bottom:1px solid var(--linie)}
.fakten dt{font:600 1.125rem/1.5 var(--schrift);color:var(--navy)}
.fakten dd{font-size:1em;line-height:1.6;color:var(--text)}

/* ---------- Fragen ---------- */
.fragen{max-width:900px;margin:0 auto;border-top:1px solid var(--linie)}
.fragen details{border-bottom:1px solid var(--linie)}
.fragen summary{list-style:none;cursor:pointer;position:relative;display:block;padding:24px 56px 24px 0;font:600 1.25rem/1.4 var(--schrift);color:var(--text)}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::before,.fragen summary::after{content:"";position:absolute;right:6px;top:50%;width:18px;height:2px;background:var(--navy);transition:transform .25s}
.fragen summary::after{transform:rotate(90deg)}
.fragen details[open] summary::after{transform:rotate(0)}
.fragen summary:hover{color:var(--navy)}
.fragen details p{max-width:46em;padding:0 56px 28px 0;font-size:1em;line-height:1.7;color:var(--grau)}

/* ---------- Schluss: Navy-Band mit Formularzeile ---------- */
.schluss{background:var(--navy);color:var(--weiss);padding:var(--abstand) 0;text-align:center}
.schluss .h2{color:var(--weiss);max-width:26ch;margin:0 auto 20px}
.schluss .innen>p:not(.tel){max-width:36em;margin:0 auto 40px;color:var(--auf-navy-leise);font-size:1.25rem}
.schnell-zeile{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:12px;max-width:900px;margin:0 auto;padding:14px;background:var(--weiss);border-radius:var(--rund);text-align:left}
.schnell-zeile.zwei{grid-template-columns:minmax(0,1fr) auto;max-width:680px}
.schluss .tel{justify-content:center;margin-top:30px}

/* ---------- Über uns ---------- */
.grundsaetze{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(40px,6vw,96px);max-width:1080px;margin:0 auto}
.grundsaetze li{padding:30px 0;border-top:1px solid var(--linie)}
.grundsaetze li:nth-child(-n+2){border-top:2px solid var(--navy)}
.grundsaetze .h3{margin-bottom:10px}
.grundsaetze p{font-size:1em;line-height:1.7;color:var(--grau)}
.netz{margin-top:30px;border-top:2px solid var(--navy)}
.netz li{display:grid;grid-template-columns:160px 1fr;gap:20px;padding:16px 0;border-bottom:1px solid var(--linie);font-size:1em;color:var(--grau)}
.netz b{font-weight:600;color:var(--navy)}
.schmal{max-width:780px;margin:0 auto;text-align:center}
.schmal .h2{margin-bottom:24px}

/* ---------- Seitenköpfe ---------- */
.seitenkopf,.anfrage-kopf{background:var(--papier);padding:clamp(48px,6vw,88px) 0 clamp(44px,5vw,72px);text-align:center}
.seitenkopf .h1,.anfrage-kopf .h1{max-width:20ch;margin:0 auto}
.seitenkopf .lead,.anfrage-kopf .lead{max-width:40em;margin:22px auto 0}
.anfrage-kopf{padding-bottom:clamp(110px,11vw,150px)}
.anfrage-kopf .h1{font-size:clamp(2.125rem,4vw,3.375rem)}
.uebersicht-kopf,.danke .anfrage-kopf{padding-bottom:clamp(48px,6vw,80px)}

/* ---------- Markenübersicht ---------- */
.markenraster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(24px,3vw,44px);max-width:1160px;margin:0 auto}
.markenraster li{border-top:1px solid var(--linie)}
.marke-karte{display:flex;flex-direction:column;gap:4px;height:100%;padding:22px 0 24px;text-decoration:none}
.marke-name{font:600 1.375rem/1.25 var(--schrift);color:var(--navy)}
.marke-modelle{font:400 1rem/1.5 var(--schrift);color:var(--grau)}
.marke-karte:hover .marke-name{text-decoration:underline;text-underline-offset:.2em}

/* ---------- Rechtliches ---------- */
.recht-buehne{padding:0 var(--rand) var(--abstand)}
.recht{max-width:840px;margin:0 auto;padding-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:minmax(0,1fr);gap:34px;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
.recht section{padding-top:26px;border-top:1px solid var(--linie)}
.recht section:first-child{padding-top:0;border-top:0}
.recht h2{margin-bottom:12px;font:600 1.3125rem/1.35 var(--schrift);color:var(--navy)}
.recht p{margin-bottom:12px;font-size:1em;line-height:1.75;color:var(--text)}
.recht .stand{padding-top:20px;border-top:1px solid var(--linie);font-size:1rem;color:var(--grau)}

/* ---------- Danke ---------- */
.danke .ablauf{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1000px;margin:0 auto}

/* ---------- Formularfelder ---------- */
.feld{display:grid;gap:8px;font:600 1rem/1.4 var(--schrift);color:var(--text)}
.feld .zeile{display:flex;justify-content:space-between;gap:12px}
.opt{white-space:nowrap;font-weight:400;font-size:0.9375rem;color:var(--grau)}
.eingabe{width:100%;min-height:56px;border:1.5px solid var(--linie-stark);border-radius:10px;background:var(--weiss);padding:0 16px;font:400 1.125rem var(--schrift);color:var(--text);caret-color:var(--navy)}
textarea.eingabe{min-height:130px;padding:14px 16px;line-height:1.5;resize:vertical}
.eingabe:focus{outline:3px solid var(--navy);outline-offset:1px;border-color:var(--navy)}
::placeholder{color:var(--platzhalter);opacity:1}
.auswahl{position:relative;display:block}
.auswahl select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:48px}
.auswahl::after{content:"";position:absolute;right:20px;top:50%;width:9px;height:9px;margin-top:-7px;border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);transform:rotate(45deg);pointer-events:none}
fieldset{border:0;margin:0;padding:0;display:grid;gap:10px;min-width:0}
legend{padding:0;margin-bottom:10px;font:600 1rem/1.4 var(--schrift);color:var(--text)}
.option{display:flex;align-items:center;gap:14px;min-height:60px;padding:12px 18px;border:1.5px solid var(--linie-stark);border-radius:10px;background:var(--weiss);font:500 1.125rem/1.4 var(--schrift);color:var(--text);cursor:pointer}
.option input{flex:none;width:22px;height:22px;margin:0;accent-color:var(--navy)}
.option .d{font-weight:400;color:var(--grau)}
.option:has(input:checked){border-color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--navy);background:var(--navy-zart)}
.optionen-zwei{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.anrede-name{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:14px}
.upload{display:grid;gap:8px;font:600 1rem/1.4 var(--schrift);color:var(--text)}
.upload-feld{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:170px;padding:22px;border:2px dashed var(--linie-stark);border-radius:var(--rund);background:var(--papier);text-align:center;cursor:pointer}
.upload-feld:hover{border-color:var(--navy)}
.upload-feld:focus-within{outline:3px solid var(--navy);outline-offset:3px}
.upload-feld input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.upload-cta{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;border-radius:999px;background:var(--navy);color:var(--weiss);font:600 1.0625rem/1.2 var(--schrift)}
.upload-info{font:400 1rem/1.5 var(--schrift);color:var(--grau)}
.upload-tipp{font:400 1rem/1.6 var(--schrift);color:var(--grau)}
.zustimmung{display:flex;gap:14px;align-items:flex-start;font:400 1.0625rem/1.6 var(--schrift);color:var(--text);cursor:pointer}
.zustimmung input{flex:none;width:22px;height:22px;margin:2px 0 0;accent-color:var(--navy)}
.form-notiz{text-align:center;font:400 1rem/1.6 var(--schrift);color:var(--grau)}
.form-fehler{padding:16px 18px;border:2px solid var(--fehler);border-radius:10px;background:var(--fehler-grund);color:var(--fehler);font:500 1.0625rem/1.6 var(--schrift)}
/* Fehler direkt am Feld: bleibt stehen, bis die Angabe stimmt */
.feld-fehler{display:block;font:500 1rem/1.5 var(--schrift);color:var(--fehler)}
.hat-fehler .eingabe,.hat-fehler .option,.hat-fehler .upload-feld{border-color:var(--fehler)}
.zustimmung.hat-fehler{flex-wrap:wrap}
.zustimmung .feld-fehler{flex-basis:100%;padding-left:36px}
/* Ohne Skript: Nach einem Sendefehler springt der Server auf #versand-fehler, der Hinweis erscheint über :target */
.ohne-js-fehler{display:none;margin-bottom:28px}
.ohne-js-fehler:target{display:block}
.koeder{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Anfrage ---------- */
.anfrage-buehne{background:var(--papier);padding:0 0 var(--abstand)}
.anfrage-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:clamp(28px,4vw,64px);align-items:start;margin-top:calc(-1 * clamp(72px,8vw,110px))}
.formkarte{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--rund);padding:clamp(24px,4vw,56px)}
.fortschritt{display:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:40px;counter-reset:f}
.js .fortschritt{display:grid}
.fortschritt li{counter-increment:f;padding-bottom:12px;border-bottom:4px solid var(--linie);font:600 1rem/1.35 var(--schrift);color:var(--grau)}
.fortschritt li::before{content:counter(f) ". "}
.fortschritt li.aktiv,.fortschritt li.erledigt{color:var(--navy);border-bottom-color:var(--navy)}
.schritt{display:grid;gap:28px}
.schritt+.schritt{margin-top:48px;padding-top:40px;border-top:1px solid var(--linie)}
.js .schritt{margin-top:0;padding-top:0;border-top:0}
.js .schritt:not(.aktiv){display:none}
.schritt-titel{font:600 clamp(1.625rem,2.5vw,2rem)/1.2 var(--schrift);letter-spacing:-.012em;color:var(--navy)}
.schritt-titel+.f-hinweis{margin-top:-16px}
.f-hinweis{font:400 1.125rem/1.6 var(--schrift);color:var(--grau)}
.schritt-knoepfe{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:6px}
.schritt-knoepfe .knopf{min-width:240px}
.schritt-knoepfe .weiter-allein{margin-left:auto}
.anfrage-seite{position:sticky;top:24px;display:grid;gap:20px;padding-top:clamp(86px,9vw,124px)}
.hinweis{padding:26px;background:var(--weiss);border:1px solid var(--linie);border-radius:var(--rund)}
.hinweis .h3{margin-bottom:12px;font-size:1.1875rem}
.hinweis p{font-size:1.125rem;line-height:1.6;color:var(--grau)}
.hinweis ol{counter-reset:s}
.hinweis ol li{counter-increment:s;display:grid;grid-template-columns:32px 1fr;gap:6px;padding:12px 0;border-top:1px solid var(--linie);font-size:1.125rem;line-height:1.55;color:var(--grau)}
.hinweis ol li::before{content:counter(s);display:flex;align-items:center;justify-content:center;width:26px;height:26px;border:1.5px solid var(--navy);border-radius:50%;font:600 0.875rem/1 var(--schrift);color:var(--navy)}
.hinweis .tel{margin-top:14px;font-size:1.0625rem}
.hinweis-navy{background:var(--navy);border-color:var(--navy)}
.hinweis-navy p:not(.label){font:600 1.25rem/1.4 var(--schrift);color:var(--weiss)}

/* ---------- Fuß ---------- */
.fuss{background:var(--papier);color:var(--text);font:400 1.0625rem/1.6 var(--schrift);border-top:1px solid var(--linie)}
.fuss-in{max-width:var(--breite);margin:0 auto;padding:clamp(56px,7vw,88px) var(--rand) 40px;display:grid;grid-template-columns:minmax(0,1.4fr) max-content repeat(3,minmax(0,1fr));gap:40px}
.fuss-logo{display:inline-block;padding:6px 0}
.fuss-logo img{height:32px;width:auto}
.fuss-marke .fuss-zusatz{margin-top:8px;font-size:0.9375rem;color:var(--grau);white-space:nowrap}
.fuss-marke p:not(.fuss-zusatz){max-width:24em;margin-top:20px;color:var(--grau)}
.fuss-h{margin-bottom:12px;font:600 1.0625rem/1.4 var(--schrift);color:var(--navy)}
.fuss-spalte a{display:block;width:fit-content;padding:5px 0;color:var(--text);text-decoration:none}
.fuss-spalte a:hover{color:var(--navy);text-decoration:underline}
.fuss-spalte p{padding:5px 0;color:var(--text)}
.fuss-spalte .fuss-mail{white-space:nowrap}
.fuss-spalte .fuss-tel{display:inline-flex;align-items:center;gap:9px}
.fuss-tel .ico{width:17px;height:17px;color:var(--navy)}
/* Instagram im Fuß: gleicher Aufbau wie "Anrufen", Symbol in Navy, Beschriftung daneben */
.fuss-spalte .fuss-sozial{display:inline-flex;align-items:center;gap:9px}
.fuss-sozial .ico{width:17px;height:17px;color:var(--navy);transition:transform .25s var(--sanft)}
.fuss-sozial:hover .ico{transform:scale(1.08)}
.fuss-spalte .fuss-alle{display:inline-flex;align-items:center;gap:10px;margin-top:4px;font-weight:600;color:var(--navy)}
.fuss-spalte .fuss-alle::after{content:"";width:7px;height:7px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}
.fuss-marke p.fuss-anschrift{margin-top:6px;font-size:0.9375rem;color:var(--grau)}
.fuss-unten{max-width:var(--breite);margin:0 auto;padding:22px var(--rand) 34px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 32px;font-size:0.9375rem;color:var(--grau);border-top:1px solid var(--linie)}

/* ---------- Cookie-Einwilligung ---------- */
.einwilligung{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:0 16px calc(16px + env(safe-area-inset-bottom,0px));pointer-events:none}
.einwilligung-in{pointer-events:auto;max-width:780px;margin:0 auto;padding:26px 28px;background:var(--weiss);color:var(--text);border:1px solid var(--linie);border-radius:var(--rund);box-shadow:0 20px 50px -20px rgba(19,41,65,.4)}
.einwilligung .label{margin-bottom:8px;font-size:1.0625rem}
.einwilligung-text{font:400 1.0625rem/1.6 var(--schrift);color:var(--text)}
.einwilligung-optionen{display:grid;gap:10px;margin-top:16px}
.einwilligung-option{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1.5px solid var(--linie);border-radius:10px;font:400 1rem/1.5 var(--schrift);color:var(--grau);cursor:pointer}
.einwilligung-option input{flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--navy)}
.einwilligung-option b{display:block;font-weight:600;color:var(--text)}
.einwilligung-knoepfe{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:18px}

/* ---------- Baujahr bestimmen ---------- */
.bj-kopf .lead{max-width:36em}
.bj-karte{position:relative;z-index:2;max-width:920px;margin:calc(-1 * clamp(72px,8vw,110px)) auto 0;background:var(--weiss);border:1px solid var(--linie);border-radius:var(--rund);padding:clamp(24px,4vw,56px)}
.bj-karte .fortschritt{margin-bottom:34px}
.bj-ansicht{display:grid;gap:24px}
/* Der Fokus springt nach jedem Schritt auf die Überschrift, damit Vorleseprogramme sie ansagen; ohne Rahmen */
.bj-ansicht [tabindex="-1"]:focus{outline:none}
.bj-mehr:empty{display:none}
.bj-marken{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.bj-marke{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;width:100%;min-height:74px;padding:12px 18px 12px 20px;border:1.5px solid var(--linie-stark);border-radius:10px;background:var(--weiss);font:inherit;text-align:left;cursor:pointer;transition:border-color .2s,background-color .2s}
.bj-marke::after{content:"";grid-column:2;grid-row:1/span 2;width:8px;height:8px;border-top:2px solid var(--navy);border-right:2px solid var(--navy);transform:rotate(45deg);transition:transform .25s var(--sanft)}
.bj-marke:hover{border-color:var(--navy);background:var(--navy-zart)}
.bj-marke:hover::after{transform:translateX(3px) rotate(45deg)}
.bj-marke-name{font:600 1.1875rem/1.25 var(--schrift);color:var(--navy)}
.bj-marke-jahre{font:400 0.9375rem/1.35 var(--schrift);color:var(--grau);font-variant-numeric:tabular-nums}
.bj-andere{padding-top:26px;border-top:1px solid var(--linie)}
.bj-andere p{max-width:40em;margin-top:8px;font-size:1.0625rem;line-height:1.6;color:var(--grau)}
.bj-andere-liste{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.bj-kopfzeile{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 20px}
.bj-form{display:grid;gap:22px}
.bj-optionen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.bj-eingabe{min-height:66px;font-size:1.625rem;letter-spacing:.05em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.bj-eingabe::placeholder{font-size:1.1875rem;letter-spacing:0;text-transform:none}
.bj-hilfe{padding:20px 22px;background:var(--papier);border-radius:10px;font-size:1.0625rem;line-height:1.6;color:var(--grau)}
.bj-hilfe p+p{margin-top:8px}
.bj-hilfe .bj-hilfe-titel{margin-top:0;font-weight:600;color:var(--navy)}
.bj-hilfe-titel+p{margin-top:4px}
.bj-suche{display:flex;flex-direction:column;align-items:center;gap:18px;padding:44px 0 36px;text-align:center;font-size:1.1875rem;color:var(--grau)}
.bj-suche .mini-uhr{width:84px;height:84px}
.bj-suche .zeiger-min{animation:bj-drehen 1.1s linear infinite}
.bj-suche .zeiger-std{animation:bj-drehen 13.2s linear infinite}
.bj-echo{font:500 1.0625rem/1.4 var(--schrift);color:var(--grau)}
.bj-ergebnis{display:grid;gap:10px}
.bj-satz{font:500 clamp(1.3125rem,2vw,1.5rem)/1.4 var(--schrift);color:var(--text)}
.bj-jahr{display:block;margin-top:8px;font:600 clamp(2.875rem,6.4vw,4.875rem)/1.02 var(--schrift);font-stretch:108%;letter-spacing:-.02em;color:var(--navy);font-variant-numeric:tabular-nums;animation:auftauchen .6s var(--sanft) both}
.bj-jahr-klein{margin-top:2px;font-size:clamp(1.9375rem,3.2vw,2.875rem)}
.bj-liste{display:grid;gap:14px;margin-top:6px}
.bj-liste li+li{padding-top:14px;border-top:1px solid var(--linie)}
.bj-bedingung{display:block;font:500 1.0625rem/1.45 var(--schrift);color:var(--grau)}
.bj-gewaehr{margin-top:4px;font-size:1.0625rem;line-height:1.55;color:var(--grau)}
.bj-kein p{font-size:1.1875rem;line-height:1.65;color:var(--text)}
.bj-kein p+p{margin-top:10px}
.bj-frage-box{padding:clamp(24px,3vw,36px);background:var(--navy);border-radius:var(--rund);color:var(--auf-navy-leise)}
.bj-frage-titel{font:600 clamp(1.4375rem,2.2vw,1.75rem)/1.25 var(--schrift);letter-spacing:-.01em;color:var(--weiss)}
.bj-frage-box p{margin-top:10px;font-size:1.125rem;line-height:1.6}
.bj-frage-box .aktionen{margin-top:22px}
.bj-frage-box .knopf{background:var(--weiss);border-color:var(--weiss);color:var(--navy)}
.bj-frage-box .knopf:hover{background:var(--navy-zart);border-color:var(--navy-zart);color:var(--navy)}
.bj-frage-box .textknopf{color:var(--weiss)}
.bj-frage-box .textknopf:hover{color:var(--auf-navy-leise)}
.bj-mehr{font-size:1.0625rem;line-height:1.65;color:var(--grau)}
.bj-mehr p+p{margin-top:10px}
.bj-mehr b{font-weight:600;color:var(--text)}
.bj-ohne-text{max-width:40em;font-size:1.1875rem;line-height:1.65;color:var(--text)}
.bj-dienst{max-width:920px;margin:22px auto 0;font-size:1.0625rem;line-height:1.6;color:var(--grau);text-align:center}
.bj-aktionen{margin-top:32px}
.bj-codes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;max-width:1080px;margin:0 auto}
.bj-codes div{display:flex;align-items:baseline;gap:14px;padding:16px 18px;background:var(--weiss);border-radius:10px}
.bj-codes dt{min-width:1.1ch;font:600 1.625rem/1 var(--schrift);color:var(--navy)}
.bj-codes dd{font-size:1.0625rem;color:var(--text);font-variant-numeric:tabular-nums}
.tabelle-rahmen{overflow-x:auto;padding-bottom:28px}
.bj-tabelle{width:100%;border-collapse:collapse;font-size:1.0625rem;font-variant-numeric:tabular-nums}
.bj-tabelle th{padding:10px 12px;border-bottom:2px solid var(--navy);font-weight:600;color:var(--navy);text-align:left;white-space:nowrap}
.bj-tabelle td{padding:9px 12px;border-bottom:1px solid var(--linie);color:var(--text);white-space:nowrap}
.bj-tabelle :is(th,td):first-child{padding-left:0}
/* Referenzen auf den Modellseiten: Merkmale dürfen umbrechen, Referenz in Navy hervorgehoben */
.ref-rahmen{max-width:1080px;margin:0 auto;padding-bottom:0}
.ref-tabelle th:first-child{width:25%}
.ref-tabelle th:nth-child(2){width:18%}
.ref-tabelle td{padding:14px 12px;vertical-align:top;white-space:normal;line-height:1.5}
.ref-tabelle td:first-child{font-weight:600;color:var(--navy)}
.ref-tabelle td:nth-child(2){white-space:nowrap}
.ref-hinweis{max-width:40em;margin:28px auto 0;color:var(--grau);text-align:center}

/* ---------- Leiste unten auf dem Handy ---------- */
.mobil-leiste{display:none}

/* ---------- Bewegung: dezent und nur, wenn keine reduzierte Bewegung gewünscht ist ---------- */
@keyframes auftauchen{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes minute-rund{from{transform:rotate(-360deg)}to{transform:rotate(0deg)}}
@keyframes bj-drehen{from{transform:rotate(var(--w,0deg))}to{transform:rotate(calc(var(--w,0deg) + 360deg))}}
@keyframes klingeln{0%,100%{transform:rotate(0)}20%{transform:rotate(-12deg)}40%{transform:rotate(10deg)}60%{transform:rotate(-6deg)}80%{transform:rotate(3deg)}}
/* Nach einem Seitenwechsel erscheinen Überschrift und Einleitung sanft, damit der neue Seitenanfang klar ist */
:is(.einstieg,.anfrage-kopf,.seitenkopf) :is(.h1,.lead){animation:auftauchen .7s var(--sanft) both}
:is(.einstieg,.anfrage-kopf,.seitenkopf) .lead{animation-delay:.08s}
/* Kleine Uhren im Ablauf: Minutenzeiger dreht eine Runde, Stundenzeiger rückt nach, Schritt für Schritt */
.mini-uhr :is(.zeiger-std,.zeiger-min){transform-box:view-box;transform-origin:28px 28px}
.mini-uhr .zeiger-std{transform:rotate(var(--w,0deg))}
.bewegung-an .ablauf:not(.sichtbar) .zeiger-std{transform:rotate(calc(var(--w,0deg) - 30deg))}
.ablauf.sichtbar .zeiger-std{transition:transform 1.6s var(--sanft) calc(var(--i,0) * .22s)}
.ablauf.sichtbar .zeiger-min{animation:minute-rund 1.6s var(--sanft) calc(var(--i,0) * .22s) both}
.ablauf li:nth-child(2){--i:1}
.ablauf li:nth-child(3){--i:2}
.ablauf li:nth-child(4){--i:3}
/* Erklärte Zeichnungen: Hinweislinien ziehen sich nacheinander zur Nummer */
.uhr-erklaert .ruf .fuehrung{stroke-dasharray:1 1}
.bewegung-an .uhr-erklaert:not(.sichtbar) .ruf .fuehrung{stroke-dashoffset:1}
.bewegung-an .uhr-erklaert:not(.sichtbar) .ruf :is(.nummer,text){opacity:0}
.uhr-erklaert.sichtbar .ruf .fuehrung{transition:stroke-dashoffset .8s var(--sanft) calc(var(--i,0) * .3s + .2s)}
.uhr-erklaert.sichtbar .ruf :is(.nummer,text){transition:opacity .45s ease calc(var(--i,0) * .3s + .75s)}
/* Pfeile rücken beim Zeigen ein Stück nach rechts, das Telefon klingelt kurz */
.markenliste a::after,.fuss-spalte .fuss-alle::after{transition:transform .25s var(--sanft)}
.markenliste a:hover::after,.fuss-spalte .fuss-alle:hover::after{transform:translateX(3px) rotate(45deg)}
:is(.tel-knopf,.mobil-tel,.fuss-tel):hover .ico{animation:klingeln .6s ease}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* ---------- Breiten ---------- */
@media (max-width:1240px){
  .fuss-in{grid-template-columns:max-content repeat(3,minmax(0,1fr))}
  .fuss-marke{grid-column:1/-1}
  .kopf-rechts .knopf{display:none}
}
@media (max-width:1180px){
  .kopf-nav{gap:24px}
  .kopf-nav .nav-pruefen{display:none}
}
@media (max-width:1100px){
  .zusagen ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zusagen li{padding:26px 24px}
  .zusagen li:nth-child(odd){border-left:0;padding-left:0}
  .zusagen li:nth-child(n+3){border-top:1px solid var(--linie)}
  .ablauf{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:48px}
  .ablauf li::before{display:none}
  .markenliste{grid-template-columns:repeat(3,minmax(0,1fr))}
  .markenliste li:nth-last-child(-n+4){border-bottom:0}
  .markenliste{border-bottom:1px solid var(--linie)}
  .anfrage-grid{grid-template-columns:minmax(0,1fr) 290px}
}
/* Kopf zweizeilig: Logo und Telefon oben, Menü darunter */
@media (max-width:1000px){
  .kopf-in{grid-template-columns:auto 1fr;gap:0 16px;min-height:0;padding-top:14px}
  .kopf-logo{grid-column:1;grid-row:1;align-items:flex-start;gap:5px;padding:0}
  .kopf-logo img{height:30px}
  .kopf-zusatz{font-size:0.875rem}
  .kopf-rechts{grid-column:2;grid-row:1}
  .kopf-link{display:none}
  .kopf-nav{grid-column:1/-1;grid-row:2;flex-wrap:wrap;gap:0 26px;margin-top:8px;border-top:1px solid var(--linie)}
  .kopf-nav .nav-baujahr{display:block}
  .kopf-nav a{padding:14px 0;font-size:1.0313rem}
  .bj-codes{grid-template-columns:repeat(4,minmax(0,1fr))}
  .fuss-in{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .einstieg-grid{grid-template-columns:1fr}
  .einstieg-bild{max-width:320px;margin-top:8px}
  .einstieg-foto{max-width:420px}
  .einstieg .h1{max-width:none}
  .schnellstart{max-width:none}
  .zwei,.pruef-grid,.band-in{grid-template-columns:1fr}
  .zwei-umgekehrt>figure{order:0}
  .pruef-zeichnung{max-width:520px;margin:0 auto}
  /* Einspaltig: Hochformat-Fotos nicht über die volle Tablet-Breite ziehen (sonst über 900 px hoch) */
  .zwei .foto-hoch{width:100%;max-width:440px;margin-inline:auto}
  .band .foto{width:100%;max-width:560px;margin-inline:auto}
}
@media (max-width:860px){
  .bj-marken{grid-template-columns:repeat(2,minmax(0,1fr))}
  .markenraster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .anfrage-grid{grid-template-columns:1fr}
  .anfrage-seite{position:static;padding-top:0}
  .grundsaetze{grid-template-columns:1fr}
  .grundsaetze li:nth-child(2){border-top:1px solid var(--linie)}
  .schnell-zeile{grid-template-columns:1fr}
  .fuss-in{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Feste Leiste unten: auf Smartphones und auf Touch-Tablets bis 1240 px, wo der Kopf keinen Bewertungsknopf zeigt */
@media (max-width:860px),(max-width:1240px) and (pointer:coarse){
  .mobil-leiste{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;justify-content:center;gap:10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--weiss);border-top:1px solid var(--linie);box-shadow:0 -6px 20px -12px rgba(19,41,65,.3)}
  .mobil-leiste .knopf{flex:1;max-width:440px;min-height:52px;padding:0 16px}
  .mobil-tel{display:inline-flex;align-items:center;justify-content:center;flex:none;width:52px;height:52px;border:2px solid var(--navy);border-radius:50%;color:var(--navy)}
  .mit-leiste{padding-bottom:76px}
}
@media (max-width:860px),(pointer:coarse){
  .fuss-spalte a{padding:10px 0}
}

/* Smartphone */
@media (max-width:600px){
  body{font-size:1.125rem}
  .einstieg{padding-top:28px}
  .einstieg-bild{max-width:240px}
  .schnellstart{margin-top:26px;padding:20px}
  .schnellstart-felder{grid-template-columns:1fr}
  .schnellstart-titel{font-size:1.375rem}
  .zusagen ul{grid-template-columns:1fr}
  .zusagen li,.zusagen li:nth-child(odd){padding:20px 0;border-left:0}
  .zusagen li+li{border-top:1px solid var(--linie)}
  .ablauf,.danke .ablauf{grid-template-columns:1fr;row-gap:36px}
  .markenliste{grid-template-columns:repeat(2,minmax(0,1fr))}
  .markenliste li{font-size:1.125rem}
  .bildreihe{gap:10px}
  .bildreihe figcaption{font-size:0.9375rem}
  .fakten div{grid-template-columns:1fr;gap:4px}
  .fragen summary{font-size:1.1563rem;padding:20px 44px 20px 0}
  .fragen details p{padding-right:0}
  .netz li{grid-template-columns:1fr;gap:2px}
  .optionen-zwei,.anrede-name{grid-template-columns:1fr}
  .schritt-knoepfe{flex-direction:column-reverse;align-items:stretch}
  .schritt-knoepfe .knopf{width:100%;min-width:0}
  .fuss-in{gap:28px 20px;padding-top:48px}
  .fuss-spalte a,.fuss-spalte p{overflow-wrap:anywhere}
  /* Kontakt über die volle Breite, damit die E-Mail-Adresse nicht umbricht; Rechtliches darunter in zwei Spalten statt allein in einer Zeile */
  .fuss-kontakt,.fuss-recht{grid-column:1/-1}
  .fuss-spalte .fuss-mail{overflow-wrap:normal}
  .fuss-recht{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
  .fuss-recht .fuss-h{grid-column:1/-1}
  /* Referenzen: jede Zeile als Block, Bauzeit rechts, Merkmale darunter */
  .ref-tabelle thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
  .ref-tabelle tbody{border-top:2px solid var(--navy)}
  .ref-tabelle tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;padding:16px 0;border-bottom:1px solid var(--linie)}
  .ref-tabelle td,.ref-tabelle td:first-child{padding:0;border:0}
  .ref-tabelle td:nth-child(2){color:var(--grau);text-align:right}
  .ref-tabelle td:nth-child(3){grid-column:1/-1}
  .fuss-unten{flex-direction:column}
  .aktionen{flex-direction:column;align-items:stretch;text-align:center}
  .aktionen .tel{justify-content:center}
  .einwilligung{padding:0 10px calc(10px + env(safe-area-inset-bottom,0px))}
  .einwilligung-in{padding:20px}
  .einwilligung-knoepfe .knopf{flex:1 1 calc(50% - 10px)}
  /* Menü in einer Zeile: "Baujahr bestimmen" heißt hier kurz "Baujahr"; erst unter etwa 340 px bricht es um */
  .kopf-nav{justify-content:space-between;column-gap:14px}
  .kopf-nav a{padding:13px 0;font-size:0.9688rem}
  .nav-lang{display:none}
  .bj-karte .fortschritt{margin-bottom:26px}
  .bj-marke{grid-template-columns:minmax(0,1fr);min-height:68px;padding:10px 14px}
  .bj-marke::after{display:none}
  .bj-marke-name{font-size:1.125rem}
  .bj-optionen{grid-template-columns:1fr}
  .bj-eingabe{font-size:1.3125rem}
  .bj-hilfe{padding:16px 18px}
  .bj-codes{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .bj-codes div{padding:12px 14px}
}
@media (max-width:400px){
  .fuss-in{grid-template-columns:1fr}
  .fuss-recht{display:block}
  .markenraster,.markenliste{grid-template-columns:1fr}
}
@media (max-width:370px){
  .kopf-zusatz{white-space:normal;max-width:220px;line-height:1.3}
  .kopf-nav{column-gap:12px}
  .kopf-nav a{font-size:0.9375rem}
  .kopf-logo img{height:26px}
}