@font-face{font-family:'GEES';font-style:normal;font-weight:500;font-display:swap;src:url('/schriften/gees-medium-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'GEES';font-style:normal;font-weight:500;font-display:swap;src:url('/schriften/gees-medium-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'GEES';font-style:normal;font-weight:700;font-display:swap;src:url('/schriften/gees-bold-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'GEES';font-style:normal;font-weight:700;font-display:swap;src:url('/schriften/gees-bold-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'GEES';font-style:normal;font-weight:800;font-display:swap;src:url('/schriften/gees-extrabold-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'GEES';font-style:normal;font-weight:800;font-display:swap;src:url('/schriften/gees-extrabold-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'GEES';font-style:normal;font-weight:400;font-display:swap;src:url('/schriften/gees-regular-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'GEES';font-style:normal;font-weight:400;font-display:swap;src:url('/schriften/gees-regular-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'GEES';font-style:normal;font-weight:600;font-display:swap;src:url('/schriften/gees-semibold-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'GEES';font-style:normal;font-weight:600;font-display:swap;src:url('/schriften/gees-semibold-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('/schriften/manrope-regular-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('/schriften/manrope-regular-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('/schriften/manrope-medium-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('/schriften/manrope-medium-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('/schriften/manrope-semibold-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('/schriften/manrope-semibold-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('/schriften/manrope-bold-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('/schriften/manrope-bold-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url('/schriften/manrope-extrabold-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url('/schriften/manrope-extrabold-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Merriweather';font-style:normal;font-weight:300;font-display:swap;src:url('/schriften/merriweather-light-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Merriweather';font-style:normal;font-weight:300;font-display:swap;src:url('/schriften/merriweather-light-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Merriweather';font-style:normal;font-weight:400;font-display:swap;src:url('/schriften/merriweather-regular-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Merriweather';font-style:normal;font-weight:400;font-display:swap;src:url('/schriften/merriweather-regular-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --navy:#16375E; --navy-dunkel:#0F2946; --blau:#00A6E0; --blau-text:#0072A3;
  --tinte:#24313F; --grau:#5A6B7C; --papier:#F2F5F8;
  --linie:#D9E2EA; --linie-kraeftig:#C0CEDA; --gewaehlt:#EAF4FA;
  --wa:#128C7E;
  --kopf:'GEES',Arial,sans-serif;
  --text:'GEES',Arial,sans-serif;
  --breit:1200px;
  /* Laufzeitwerte, keine Gestaltungs-Tokens: Kopfmasse (schrumpfen beim Scrollen) und
     Reglerstand des Vorher/Nachher-Vergleichs. Hier nur registriert; gesetzt werden sie
     an .nav / [data-nav="klein"] / [data-vgl-buehne]. */
  --nav-hoehe:90px;
  --nav-pad:19px;
  --nav-zeichen:52px;
  --nav-wort:26px;
  --belichtung:50;
}
*{margin:0;padding:0;box-sizing:border-box}
/* ⚠️ [hidden] ist nur eine UA-Regel mit display:none und verliert gegen JEDE eigene
   display-Angabe. Die Leistungs-Reiter liegen auf .raster{display:grid} — ohne diese
   Zeile standen alle drei Gruppen gleichzeitig auf der Seite, und das Umschalten sah aus,
   als tue es nichts. */
[hidden]{display:none !important}
html{scroll-behavior:smooth;scroll-padding-top:90px;-webkit-text-size-adjust:100%}
/* Die Buehne ist der Papierton, nicht Weiss. Karten und die hellen Sektionen liegen ALS
   Flaechen darauf — das ist der Unterschied zwischen "Text auf Seite" und "Objekt auf
   Buehne", und der groesste Hebel fuers Hochwertige. Der Hell-Dunkel-Rhythmus bleibt
   erhalten, er ist nur umgekehrt: .ton ist jetzt die weisse Insel. */
body{font-family:var(--text);color:var(--tinte);background:var(--papier);font-size:16.5px;line-height:1.6;
     -webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
h1,h2,h3{font-family:var(--kopf);color:var(--navy);line-height:1.12;text-wrap:balance}
p,li{text-wrap:pretty}
a{color:var(--blau-text)}
a:hover{color:var(--navy)}
.bahn{max-width:var(--breit);margin:0 auto;padding:0 clamp(18px,4vw,40px)}
section{padding:clamp(48px,7vw,86px) 0}
/* 13 px, nicht 12: unter 13 px meldet mobil-audit.mjs zu Recht, und eine gesperrte
   Grossbuchstaben-Zeile liest sich am Handy noch schlechter als normaler Text derselben
   Groesse. Die Sperrung ist minimal enger, damit die Zeile nicht laenger wird. */
.eyebrow{font-weight:600;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--blau-text)}
/* Auf Dunkelblau NICHT der Akzent selbst: Hellblau auf Navy misst 4,32:1 und faellt fuer
   diese kleine Schrift durch — genau die Regel, die Kapitel 04 des Handbuchs aufstellt.
   Der aufgehellte Ton traegt 6,83:1. */
.dunkel .eyebrow{color:#6ECFF5}
h1{font-size:clamp(31px,5vw,52px);font-weight:800;letter-spacing:-.015em}
h2{font-size:clamp(24px,3.4vw,36px);font-weight:800;letter-spacing:-.01em}
h3{font-size:19px;font-weight:700}
.blei{font-size:clamp(16.5px,1.6vw,19px);line-height:1.6;max-width:64ch}

/* ── Kopf ────────────────────────────────────────────────────────────────────────── */
.oben{background:var(--navy);color:#B9CBDD;font-size:13.5px}
.oben .bahn{display:flex;justify-content:center;gap:10px 28px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.oben b{color:#fff;font-weight:600}
.oben a{color:#fff;text-decoration:none;font-weight:600}
/* Der Kopf startet gross und schrumpft beim Scrollen. Die Groessen haengen an drei
   Variablen, damit der Uebergang EINE Regel ist statt vier verstreuter Ueberschreibungen;
   .nav--klein setzt sie um, das JavaScript kennt nur diese eine Klasse.
   Warum ueberhaupt: ganz oben ist Platz und die Marke soll wirken, beim Lesen ist die
   Leiste im Weg. Faellt das Skript aus, bleibt der grosse Zustand stehen — der ist
   vollstaendig bedienbar, nur hoeher. Das ist die richtige Richtung fuer einen Ausfall.
   ⚠️ Nur diese drei Variablen animieren, NICHT height am Kopf selbst: die Leiste ist
   sticky, und eine Hoehenanimation am sticky-Element laesst den Inhalt darunter ruckeln. */
.nav{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--linie);
     --nav-pad:19px;--nav-zeichen:52px;--nav-wort:26px;
     transition:background-color .25s ease,border-color .25s ease}
/* Startseite: ganz oben liegt die Leiste durchsichtig auf dem Hero-Foto, weiss wird sie erst
   mit .nav--klein beim Scrollen. Das Foto traegt oben einen Navy-Verlauf, damit Weiss darauf
   lesbar bleibt. Auf schmalen Geraeten bleibt das Klappmenue weiss — dort gilt die weisse
   Schrift nur fuer Marke und Menue-Knopf. */
.nav--glas:not(.nav--klein){background:transparent;border-bottom-color:transparent}
.nav--glas:not(.nav--klein) .marke__wort,.nav--glas:not(.nav--klein) .nav__auf{color:#fff}
.nav--glas:not(.nav--klein) .marke__sub{color:#B9E6F7}
.nav--glas:not(.nav--klein) .marke svg rect[fill="#16375E"]{fill:#fff}
.nav--glas:not(.nav--klein) .nav__auf:hover{color:#B9E6F7}
@media (min-width:901px){
  .nav--glas:not(.nav--klein) .nav__links a,.nav--glas:not(.nav--klein) .nav__wa{color:#fff}
  .nav--glas:not(.nav--klein) .nav__links a:hover,.nav--glas:not(.nav--klein) .nav__wa:hover{color:#fff;background:rgba(255,255,255,.14)}
  .nav--glas:not(.nav--klein) .nav__links a.knopf{background:#fff;color:var(--navy);border-color:#fff}
  .nav--glas:not(.nav--klein) .nav__links a.knopf:hover{background:#DCE8F0;color:var(--navy);border-color:#DCE8F0}
}
[data-nav="klein"]{--nav-pad:11px;--nav-zeichen:36px;--nav-wort:20px}
.nav .bahn{display:flex;align-items:center;justify-content:space-between;gap:18px;
           padding-top:var(--nav-pad);padding-bottom:var(--nav-pad);
           transition:padding-top .22s ease,padding-bottom .22s ease}
/* 44 px Mindesthoehe: gemessen war die Wortmarke in der Leiste 38 px hoch und damit
   unter der Grenze fuer ein Beruehrungsziel. */
.marke{display:flex;align-items:center;gap:11px;text-decoration:none;min-height:44px}
.marke svg{width:var(--nav-zeichen);height:var(--nav-zeichen);flex:0 0 auto;
           transition:width .22s ease,height .22s ease}
/* display:block, sonst laufen Wortmarke und Subline als Inline-Elemente in EINE Zeile
   und es steht "GE+ESGEBÄUDEREINIGUNG" in der Leiste. */
.marke__wort{display:block;font-family:var(--kopf);font-weight:800;font-size:var(--nav-wort);color:var(--navy);
             line-height:1;transition:font-size .22s ease}
.marke__sub{display:block;font-weight:600;font-size:8.5px;letter-spacing:.2em;color:var(--blau-text);margin-top:2px}
.nav__links{display:flex;align-items:center;gap:6px}
.nav__links a{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 13px;
              font-weight:600;font-size:15px;color:var(--navy);text-decoration:none;border-radius:5px}
.nav__links a:hover{color:var(--blau-text);background:var(--papier)}
.nav__links a[aria-current="page"]{color:var(--blau-text)}
/* ⚠️ .nav__links a hat zwei Klassen Spezifitaet, .knopf nur eine. Ohne diese Regel
   ueberschreibt die Navigationsfarbe das Weiss des Knopfes: Dunkelblau auf Dunkelblau,
   gemessen 1,00:1 — der Knopf war da, sein Text unsichtbar. */
.nav__links a.knopf{color:#fff;background:var(--navy);border-color:var(--navy)}
.nav__links a.knopf:hover{color:#fff;background:var(--navy-dunkel);border-color:var(--navy-dunkel)}
/* Startseite: sobald die Leiste beim Scrollen weiss wird, zeichnet sich ein handgezogener Ring
   im CI-Hellblau um den Eintrag „Fenster-Rechner" — einmalig, ueber stroke-dashoffset. Er liegt
   AUSSEN um den Link (negative Einzuege), damit die Beschriftung frei bleibt. Nur am Schreibtisch:
   im Klappmenue steht der Link in einer Liste, dort waere der Ring ein Fremdkoerper. */
.nav__links a.nav__ringtraeger{position:relative;overflow:visible}
.nav__ring{display:none;position:absolute;left:-8px;top:-2px;width:calc(100% + 16px);height:calc(100% + 4px);
           pointer-events:none;overflow:visible}
.nav__ring path{fill:none;stroke:var(--blau);stroke-width:2.5;stroke-linecap:round;vector-effect:non-scaling-stroke;
                stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s cubic-bezier(.4,0,.2,1) .2s}
.nav--klein .nav__ring path{stroke-dashoffset:0}
@media (min-width:901px){ .nav__ring{display:block} }
@media (prefers-reduced-motion:reduce){ .nav__ring path{transition:none} }
/* Auf breiten Fenstern gibt es nichts zum Aufklappen: die Zusammenfassung faellt weg und
   die Links stehen offen, unabhaengig davon ob das <details> geoeffnet ist. Ohne die
   zweite Zeile war die Navigation am Schreibtisch komplett unsichtbar. */
/* WhatsApp in der Leiste: gruenes Symbol, aber KEIN gruener Knopf. Das Handbuch sagt
   ausdruecklich, WhatsApp-Gruen sei nur fuer das kleine Symbol da; alle Knoepfe bleiben
   dunkelblau oder Kontur. */
.nav__wa{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 13px;
         font-weight:600;font-size:15px;color:var(--navy);text-decoration:none;border-radius:5px}
.nav__wa:hover{color:var(--blau-text);background:var(--papier)}
.nav__auf{display:none}
.nav__kurz,.fuss__kurz,.fuss__erreichbar{display:none}

/* ── Knöpfe ──────────────────────────────────────────────────────────────────────── */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;
       padding:13px 22px;font:700 15px/1.2 var(--kopf);text-decoration:none;border:2px solid var(--navy);
       background:var(--navy);color:#fff;border-radius:6px;cursor:pointer;text-align:center}
.knopf:hover{background:var(--navy-dunkel);border-color:var(--navy-dunkel);color:#fff}
.knopf--kontur{background:#fff;color:var(--navy)}
.knopf--kontur:hover{background:var(--papier);color:var(--navy);border-color:var(--navy)}
.knopf--hell{background:#fff;color:var(--navy);border-color:#fff}
.knopf--hell:hover{background:#DCE8F0;color:var(--navy);border-color:#DCE8F0}
/* Weiss auf #8296AB misst 3,04:1 und faellt durch. Der Grauton der Marke traegt 5,48:1.
   Ein deaktivierter Knopf ist kein Grund, die Lesbarkeit aufzugeben. */
/* ⚠️ Die Schriftfarbe MUSS hier mit gesetzt werden. Ohne sie behaelt ein
   .knopf--kontur sein Dunkelblau, und Dunkelblau auf dem Graugrund misst 2,20:1.
   Der deaktivierte Zustand ist eine eigene Kombination, keine Abwandlung. */
.knopf[disabled],.knopf[aria-disabled="true"]{opacity:1;background:var(--grau);
       border-color:var(--grau);color:#fff;cursor:not-allowed}
/* Der Rechner-Einstieg im Hero. Bewusst KEIN Knopf (siehe Begruendung im Generator),
   sondern eine gut sichtbare Zeile: Akzentfarbe als TEXT, nicht als Flaeche — ein dritter
   farbiger Kasten haette mit den beiden Knoepfen darueber um dieselbe Aufmerksamkeit
   konkurriert. Unterstrichen, damit er als Link lesbar bleibt. */
.hero__rechner{margin-top:14px;font-size:15.5px}
.hero__rechner a{color:var(--blau-text);text-decoration:underline;text-underline-offset:3px;
  /* inline-block + Polster: als reine Textzeile war das Beruehrungsziel 21 px hoch und die
     eigene Pruefung hat es zu Recht gemeldet. 21 + 2x12 = 45 px. */
  display:inline-block;padding:12px 0}
/* Derselbe Fall im Privatkunden-Hinweis des Rechners: ein Link mitten im Satz ist auf dem
   Handy kein Tippziel. Er steht deshalb als eigene Zeile mit Polster darunter. */
.privatweg{margin-top:10px;font-size:13.5px;color:var(--grau);max-width:70ch}
.privatweg a{display:inline-block;padding:12px 0;color:var(--blau-text);text-decoration:underline;text-underline-offset:3px}
.hero__rechner a:hover{text-decoration-thickness:2px}
.hero__rechner b{font-weight:650}

.knopfreihe{display:flex;gap:12px;flex-wrap:wrap}

/* ── Hero ────────────────────────────────────────────────────────────────────────────
   Vollflaechiges Teamfoto, Text unten links auf einem Navy-Verlauf. Die Leiste liegt ganz oben
   durchsichtig darauf: der Hero wird um die Kopfhoehe nach oben gezogen (--nav-hoehe misst das
   Skript, 90 px ist der Ausweichwert) und polstert den Inhalt um denselben Betrag. */
.hero{position:relative;isolation:isolate;overflow:hidden;padding:0;
      margin-top:calc(-1 * var(--nav-hoehe,90px));min-height:min(92vh,900px);
      display:flex;align-items:flex-end;background:var(--navy)}
.hero__bild{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center 33%}
/* ⚠️ Das Foto ist 4:3, der Hero deutlich breiter — mit cover fuellt es die Breite exakt und laesst
   sich waagerecht nicht verschieben. Deshalb 114 % Breite, links angeschlagen: Fahrzeug und der
   Kollege an der Tuer ruecken nach rechts, und der Textblock (max. 460 px) bleibt links davon.
   Ausschnitt 33 % von oben: der Kopf auf dem Dach steht auch bei 800 px Fensterhoehe unter der
   Leiste. Gerechnet fuer 1440 und 1920 px Breite; wer das Foto tauscht, rechnet neu. */
@media (min-width:901px){ .hero__bild{width:114%} .hero h1,.hero .blei{max-width:460px} }
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom,rgba(15,41,70,.55),rgba(15,41,70,0) 34%),
             linear-gradient(to top,rgba(15,41,70,.9) 0%,rgba(15,41,70,.55) 40%,rgba(15,41,70,.08) 78%)}
.hero .bahn{width:100%;padding-top:calc(var(--nav-hoehe,90px) + 72px);padding-bottom:clamp(40px,6vw,72px)}
.hero__inhalt{max-width:760px}
.hero__ort{display:inline-block;background:#fff;color:var(--navy);font:600 13px/1 var(--text);
           letter-spacing:.14em;text-transform:uppercase;padding:10px 14px;border-radius:5px}
.hero h1{color:#fff;font-size:clamp(32px,3.7vw,52px);line-height:1.06;letter-spacing:-.02em;margin:22px 0 16px}
.hero .blei{color:#fff;font-size:clamp(16px,1.3vw,17.5px);line-height:1.55}
.hero .knopf--glas{background:rgba(22,55,94,.32);color:#fff;border-color:rgba(255,255,255,.6);backdrop-filter:blur(6px)}
.hero .knopf--glas:hover{background:rgba(22,55,94,.6);border-color:#fff;color:#fff}
.hero .knopf--glas svg path:last-child{fill:#fff}
/* Google-Wertung als Textlink neben den Knoepfen: dieselbe Zeile, dieselbe Hoehe, kein dritter
   Kasten. Weiss auf dem Navy-Verlauf; die Sterne bleiben Grafikfarbe. */
.hero__gwert{display:inline-flex;flex-direction:column;justify-content:center;gap:2px;min-height:48px;
             padding:0 4px 0 8px;text-decoration:none;color:#fff}
.hero__gwert .fakt__wert{display:flex;align-items:center;gap:8px}
.hero__gwert b{font-family:var(--kopf);font-weight:800;font-size:21px;line-height:1.1;color:#fff}
.hero__gwert .gwert__sterne svg{width:15px;height:15px}
.hero__gwert .fakt__label{font-size:14px;line-height:1.2;color:#D6E3EE;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.45)}
.hero__gwert:hover .fakt__label{color:#fff;text-decoration-color:#fff}
.fragen-start .abschnittkopf{text-align:center;margin-left:auto;margin-right:auto}
.fragen-mehr .frage + .frage{margin-top:11px}
/* Vier gleich gebaute Zellen statt einer Flex-Reihe mit gemischten Bauarten. Als Raster
   bricht es auf dem Handy sauber auf 2x2, statt eine einzelne Zelle in eine zweite Zeile
   zu schieben. Die Trennlinien machen aus vier Angaben eine Leiste — ohne sie schwimmen
   sie im Weissraum, genau der Eindruck von „unbeholfen". */
.fakten{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;
        gap:0;margin-top:28px;padding-top:22px;border-top:1px solid var(--linie)}
.fakt{display:flex;flex-direction:column;align-items:flex-start;gap:3px;
      padding:2px 22px;border-left:1px solid var(--linie);text-decoration:none;color:inherit}
.fakt:first-child{padding-left:0;border-left:0}
.fakt b{font-family:var(--kopf);font-weight:800;font-size:21px;color:var(--navy);line-height:1.15}
.fakt__label{font-size:14px;color:var(--grau);line-height:1.3}
/* ⚠️ Zwei Fassungen davor waren falsch, beide aus demselben Grund: die Sterne standen in
   einer EIGENEN Zeile (erst ueber der Zahl, dann in der Label-Zeile). Ueber der Zahl wurde
   die Zelle dreizeilig und „4,8" sass tiefer als „24 h". In der Label-Zeile drueckten die
   fuenf Sterne den Text „bei Google" aus der Zellbreite, sodass er auf „bei" / „Google"
   umbrach — das ist der Zustand im Screenshot.
   Jetzt stehen die Sterne NEBEN der Zahl in derselben Zeile: die Zelle ist zweizeilig wie
   die drei anderen, das Label bleibt einzeilig, und nichts kann mehr umbrechen. */
.fakt__wert{display:flex;align-items:center;gap:9px}
.fakt--google .fakt__label{white-space:nowrap}
.fakt--google .gwert__sterne svg{width:14px;height:14px}
.fakt--google:hover b{color:var(--blau-text)}
@media (max-width:720px){
  .fakten{grid-template-columns:repeat(2,1fr);gap:18px 0;justify-content:stretch}
  .fakt{padding:0 16px}
  .fakt:nth-child(odd){padding-left:0;border-left:0}
}
.bildstapel{display:grid;gap:12px}
.bildstapel__reihe{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* ⚠️ Die Streifen sind kraeftiger als in der ersten Fassung. Dort waren sie #E7EDF2/#F3F7FA
   — auf weissem Grund richtig, aber seit die Buehne der Papierton #F2F5F8 ist, lagen sie
   praktisch auf ihrer eigenen Farbe und der halbe Bildstapel im Hero verschwand. Eine
   Flaeche, die zeigen soll "hier fehlt noch ein Foto", muss sichtbar sein. */
.platzhalter{background:repeating-linear-gradient(45deg,#DAE3EC,#DAE3EC 9px,#E9EFF5 9px,#E9EFF5 18px);
             border:1px solid var(--linie-kraeftig);border-radius:8px;display:flex;align-items:center;
             justify-content:center;text-align:center;padding:16px;min-height:150px;
             font:400 11.5px/1.45 ui-monospace,Consolas,monospace;color:#4A5B6E;letter-spacing:.04em}

/* ── Raster und Karten ───────────────────────────────────────────────────────────── */
.raster{display:grid;gap:16px}
.r2{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.r3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.r4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
/* Karten heben sich ueber eine HAARLINIE ab, nicht ueber Tiefe. Hier stand bis zum
   02.09.2026 ein zweistufiger Schatten mit der Begruendung, weisse Karten waeren auf der
   weissen .ton-Insel sonst unsichtbar — richtig ist nur der zweite Teil: sie brauchen eine
   Abgrenzung, aber keine Erhebung. Anlass war der Vergleich mit stepcleaning.de: deren
   Flaechen tragen NULL Schatten, und genau daher kommt die Ruhe, die dort teuer wirkt.
   Gemessen war der Abstand Karte zu Grund mit und ohne Schatten praktisch gleich (1,094),
   der Schatten leistete also nichts fuer die Lesbarkeit und alles fuer den Template-Eindruck.
   Der Ring statt border haelt das Layout still: 1 px border liesse jede Karte um 2 px wachsen.
   ⚠️ Kein Schatten-Wachstum beim Hover (§8) — der Hover verdickt nur den Ring auf den Akzent. */
.karte{border-radius:14px;padding:22px 24px;background:#fff;
       box-shadow:0 0 0 1px var(--linie)}
.karte:hover{box-shadow:0 0 0 1.5px var(--blau)}
.karte h3{margin-bottom:7px}
.karte p{font-size:15px;color:#44556A}
/* Umgekehrter Rhythmus: die Buehne ist der Papierton (body), .ton ist die weisse Insel. */
.ton{background:#fff}
.dunkel{background:var(--navy);color:#B9CBDD}
.dunkel h2,.dunkel h3{color:#fff}
/* Auf Navy traegt kein Schatten — dort ist die Kante die Abgrenzung. */
.dunkel .karte{background:rgba(255,255,255,.04);border:1px solid #2C4C73;box-shadow:none}
.dunkel .karte:hover{box-shadow:none;border-color:#4A7099}
.dunkel .karte p{color:#B9CBDD}

.abschnittkopf{max-width:70ch;margin-bottom:26px}
.abschnittkopf h2{margin:9px 0 12px}
/* Grundlinie aus dem Logo als Abschnittsmarke. */
.strich{width:44px;height:6px;background:var(--blau);margin:0 0 16px}

/* ── Leistungen: Kopf ────────────────────────────────────────────────────────────────
   Zweispaltig: links Ueberschrift und Weiche, rechts die Bildflaeche. Die Weiche sitzt UNTEN
   im Textblock (space-between), damit sie auf der Unterkante des Bildes steht — sie ist die
   erste Handlung des Abschnitts und darf nicht in der Mitte haengen.
   Uebernommen aus dem Design-Handoff design_handoff_leistungen_1a (02.09.2026). */
/* ⚠️ 480 px Bildspalte, nicht die 520 des Handoffs, und 380 statt 520 im Koerper darunter.
   Gemessen bei 1440 px Fensterbreite mit den Handoff-Werten: die Textspalte einer Leistungs-
   karte blieb 268 px breit (Bahn 1120 − 520 Einleitung − 64 Abstand − 72 Kachel − 28 − 140
   Aufklapper), die Ueberschriften brachen dreizeilig und das Merkmal-Feld zweizeilig, waehrend
   links unter der Einleitung rund 800 px leer standen. Der Handoff rechnet mit einer 1240er
   Bahn — 40 px mehr, die den Unterschied nicht machen. Mit 380/56 sind es 416 px Text. */
.lst-kopf{display:grid;grid-template-columns:1fr 480px;gap:56px;align-items:stretch}
.lst-kopf__text{display:flex;flex-direction:column;justify-content:space-between}
.lst-kopf h2{font-size:clamp(30px,4.4vw,54px);line-height:1.04;margin-top:10px}
.lst-kopf .blei{margin-top:22px;max-width:560px}
/* Die Bildflaeche traegt die Platzhalter-Sprache der Seite (45-Grad-Streifen), nur groesser und
   mit der Beschriftung unten links statt mittig — dort verdeckt sie kein Motiv, sobald eines da
   ist. Der Chip ist neutral weiss mit Haarlinie: KEIN akzentfarbener Kantenstreifen (§8). */
.lst-bild{min-height:420px;align-items:flex-end;justify-content:flex-start;padding:22px}
.lst-bild__label{background:#fff;border:1px solid var(--linie);border-radius:4px;padding:8px 12px;
                 color:var(--navy);text-align:left}

/* ── Weiche Zuhause / Betrieb ────────────────────────────────────────────────────────
   Ein Schalter aus zwei Feldern auf Papierton; gewaehlt ist eine Navy-Flaeche mit weissem Text.
   Vorgaenger waren zwei Wahlkarten nebeneinander, davor zwei Filter-Pillen (die lasen sich als
   „Ansicht umschalten", nicht als „das bin ich").
   ⚠️ Der Design-Handoff loest die gewaehlte Flaeche als GLEITENDEN Thumb: ein absolut
   positioniertes Geschwister, ueber das der Text per z-index gelegt wird. Im echten Chrome
   gemessen faellt das durch — der Thumb ist kein VORFAHR des Textes, die Flaeche unter
   „Fuer Ihr Zuhause" ist damit der Papierton und weiss darauf misst 1,09:1. Auf dem Bild sieht
   es richtig aus, in jeder Messung ist es falsch, und ein Zustand, dessen Lesbarkeit an der
   Malreihenfolge zweier Geschwister haengt, ist auch wirklich zerbrechlich. Die Flaeche sitzt
   deshalb am Knopf selbst und wird ueberblendet statt geschoben. Nebenwirkung, die zum Haus
   passt: der Schatten des Thumbs war der einzige der ganzen Seite (Karten heben sich hier
   ueber eine Haarlinie ab, nicht ueber Tiefe). */
.weiche{margin-top:40px}
.weiche__frage{font:600 13px/1 var(--text);letter-spacing:.18em;text-transform:uppercase;
             color:var(--grau);margin-bottom:12px}
.weiche__schalter{display:grid;grid-template-columns:1fr 1fr;gap:6px;
                background:var(--papier);border:1px solid var(--linie);border-radius:8px;padding:6px}
.weiche__opt{cursor:pointer;padding:15px 18px 17px;border:0;background:none;
           border-radius:5px;color:var(--navy);text-align:left;font-family:var(--text);
           transition:background-color .25s ease,color .25s ease}
.weiche__opt:hover:not([aria-selected="true"]){background:#E4EBF2}
/* Weiss auf Navy misst 13,6:1, die Erklaerzeile bei 82 % Deckung noch 8,9:1. */
.weiche__opt[aria-selected="true"]{background:var(--navy);color:#fff}
@media (prefers-reduced-motion:reduce){ .weiche__opt{transition:none} }
.weiche__opt:focus-visible{outline:3px solid var(--blau);outline-offset:2px}
.weiche__zeile{display:flex;align-items:center;gap:10px}
.weiche__punkt{width:18px;height:18px;border-radius:50%;border:2px solid currentColor;flex:0 0 auto}
.weiche__opt[aria-selected="true"] .weiche__punkt{background:radial-gradient(circle,var(--blau) 0 4px,transparent 4.5px)}
.weiche__opt b{font:700 18px/1.2 var(--kopf);color:inherit}
/* ⚠️ Echte Farben statt opacity. Der Handoff dimmt die Erklaerzeile mit opacity:.78 — das
   veraendert die gemessene Farbe nicht (getComputedStyle liefert weiterhin die volle), macht
   den Text aber sichtbar blasser: jede Kontrastpruefung ist dann zu optimistisch.
   Gemessen: #5A6B7C auf Papier #F2F5F8 = 5,48:1, #B9CBDD auf Navy = 7,40:1. */
.weiche__sub{display:block;margin-top:4px;padding-left:28px;font-size:13.5px;color:var(--grau)}
.weiche__opt[aria-selected="true"] .weiche__sub{color:#B9CBDD}
.weiche__hinweis{margin-top:10px;font-size:13.5px;color:var(--grau);display:flex;align-items:center;gap:8px}
.weiche__hinweis b{font-size:15px;color:var(--blau-text);font-weight:500}

/* ⚠️ Beide Tafeln liegen in DERSELBEN Rasterzelle uebereinander, damit der Kasten so hoch ist wie
   die hoehere von beiden. Sonst springt beim Wechsel alles darunter: gemessen am 02.09.2026 auf
   gees-reinigung.de wird die Leistungs-Sektion vom Privat- zum Gewerbe-Reiter 232 px hoeher
   (651 → 883 px bei 1440 px Breite), und die dunkelblaue Kante des naechsten Abschnitts wandert
   genau um diesen Betrag — der Userbefund „die blaue Spalte verschiebt sich beim Wechseln".
   Die versteckte Tafel wird deshalb nicht ausgeraeumt, sondern nur unsichtbar gemacht.
   Erst ab 1180 px: darunter ist der Unterschied 322 bis 680 px statt 232, und Umschalter und
   Abschnittsende passen ohnehin nicht mehr gemeinsam ins Bild (gemessene Spanne 1.512 px bei
   834 px Breite, 2.458 px auf dem Handy) — dort waere der Ausgleich ein grosses Loch ohne
   sichtbaren Gewinn. Der freie Platz sammelt sich am ENDE der kuerzeren Tafel, nicht davor:
   zwischen Katalog und Abschluss-Kasten gelegt las er sich als Fehler (250 px Loch mitten im
   Abschnitt, am Bild geprueft), am Rand liest ihn niemand als solchen. */
@media (min-width:1180px){
  .tafeln{display:grid}
  .tafeln > [role="tabpanel"]{grid-area:1/1;display:flex;flex-direction:column}
  /* ⚠️ Das !important ist hier kein Notnagel, sondern die einzige Moeglichkeit: Chrome setzt
     [hidden]:not([hidden="until-found"]) im eigenen Stylesheet selbst auf display:none
     !important, und eine gewoehnliche Autorenregel kommt dagegen nicht an — ohne das Wort
     blieb der Kasten 651 px hoch und der Sprung von 231 px stand unveraendert (gemessen).
     Genau auf diese eine Stelle begrenzt; das hidden-Attribut bleibt am Element, weil
     visibility:hidden dieselbe Wirkung auf Tabulator- und Vorlesereihenfolge hat. */
  .tafeln > [role="tabpanel"][hidden]{display:flex !important;visibility:hidden}
}

/* ── Ausserdem im Angebot ────────────────────────────────────────────────────────────
   Was nicht Kernleistung ist, steht in einem Raster mit 1-px-Gitterlinien: die Zellen stossen
   aneinander an, statt als einzelne Kaesten zu schweben. Das Gitter entsteht ueber gap:1px auf
   der Linienfarbe — kein border je Zelle, sonst laegen an den Innenkanten zwei Linien.
   ⚠️ Die Vorgaengerfassung war Spaltensatz (columns:3) mit der Begruendung, ein Raster ziehe
   beim Aufklappen die Nachbarzellen mit hoch. Das stimmt weiterhin — aber es ist hier kein
   Schaden mehr: die Nachbarn sind weisse Flaechen zwischen Gitterlinien, eine hoehere Zeile
   liest sich als aufgehende Tabelle und nicht als Loch zwischen schwebenden Kaesten. Genau
   dieser Unterschied hat den Spaltensatz ueberhaupt erst noetig gemacht. */
/* ⚠️ KEINE eigene Trennlinie. Der Abschnitt lag im Handoff neben der Leistungsliste, nicht
   darunter — untereinander stossen dann zwei Haarlinien im Abstand von 60 px aufeinander (die
   Unterkante der letzten Leistung und die Oberkante hier), und dazwischen steht eine leere
   Zeile, die wie ein Fehler aussieht. Die Liste schliesst sich selbst ab; hier reicht Abstand. */
.mehr{margin-top:56px}
.mehr__kopf{display:flex;align-items:baseline;gap:14px;margin-bottom:22px;flex-wrap:wrap}
.mehr__kopf h3{font-size:22px;font-weight:800}
/* 13 px, nicht 12,5: darunter meldet mobil-audit.mjs zu Recht, und die Zahl ist eine Information,
   kein Ornament. */
.mehr__zahl{font:700 13px/1 var(--text);color:var(--blau-text)}
.mehr__raster{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
              background:var(--linie);border:1px solid var(--linie)}
.mz{background:#fff}
.mz summary{display:grid;grid-template-columns:30px 1fr auto;gap:16px;align-items:center;
            padding:18px 20px;min-height:62px;cursor:pointer;list-style:none}
.mz summary::-webkit-details-marker{display:none}
.mz summary:hover{background:var(--papier)}
.mz summary:focus-visible{outline:3px solid var(--blau);outline-offset:-3px}
.mz__zeichen{width:30px;height:30px;display:grid;place-items:center}
.mz__zeichen svg{width:30px;height:30px}
.mz__text{min-width:0}
.mz__text b{display:block;font:700 16px/1.25 var(--kopf);color:var(--navy)}
.mz__text > span{display:block;margin-top:3px;font-size:13.5px;color:var(--grau)}
.mz__plus{width:24px;height:24px;display:grid;place-items:center}
.mz__plus svg{width:14px;height:14px;color:var(--blau-text);transition:transform .25s ease}
.mz[open] .mz__plus svg{transform:rotate(135deg);color:var(--navy)}
@media (prefers-reduced-motion:reduce){ .mz__plus svg{transition:none} }
.mz__liste,.mz__lang{list-style:none;padding:0 20px 18px 66px;font-size:14px;line-height:1.5;color:#44556A}
.mz__liste li{padding-left:16px;position:relative;margin-bottom:5px}
.mz__liste li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;background:var(--blau)}

/* Die alten Pillen-Regeln standen hier und sind ersatzlos weg. Sie NUR umzubenennen haette
   nicht gereicht: zwei von ihnen zielten weiterhin auf .reiter und standen weiter unten im
   Stylesheet — sie haetten die neue Weiche stillschweigend ueberschrieben. */

/* ── Branchen ────────────────────────────────────────────────────────────────────── */
/* Das Symbol sass frei neben dem Text mit 30 px und verschwand dadurch. Jetzt steht es in
   einer getoenten Kachel und ist 46 px gross — dieselbe Behandlung wie in den Leistungen,
   damit beide Raster als eine Familie lesen und nicht als zwei Entwuerfe. */
/* ⚠️ AKTUELL UNGENUTZT seit dem 02.09.2026: der Abschnitt „Objektarten" ist von der Startseite
   genommen (Begruendung in baue-website.mjs). Die Regeln bleiben zusammen mit BRANCHEN geparkt,
   damit er ohne Nachbau zurueckkann — Daten und Gestaltung gehoeren zusammen, sonst holt man
   sich den Abschnitt spaeter ungestaltet zurueck. Wer sicher ist, dass er nicht wiederkommt,
   loescht BEIDES: diesen Block und BRANCHEN. */
.branche{display:flex;gap:16px;align-items:flex-start;border-radius:14px;padding:20px 22px;background:#fff;
         box-shadow:0 0 0 1px var(--linie)}
.branche:hover{box-shadow:0 0 0 1.5px var(--blau)}
.branche__kachel{flex:0 0 auto;width:56px;height:56px;border-radius:11px;background:var(--gewaehlt);
                 display:grid;place-items:center}
.branche__kachel svg{width:36px;height:36px}
.branche h3{font-size:16.5px;margin-bottom:5px}
.branche p{font-size:14.5px;color:#44556A}
/* ⚠️ min-width:0, sonst schrumpft das Textkind nicht unter seine Inhaltsbreite und ein
   langes Wort ohne Trennstelle laeuft aus der Karte. Genau der Befund vom 31.08.2026. */
.branche > div:last-child{min-width:0}

/* ── Schlusskarten ───────────────────────────────────────────────────────────────── */
/* ⚠️ Die beiden Knoepfe standen auf verschiedenen Hoehen, weil der eine Text eine Zeile
   laenger ist. Zwei gleichrangige Angebote nebeneinander muessen ihre Aktion auf einer
   Linie haben, sonst liest eins als das wichtigere. Geloest ueber die Karte als
   Flex-Spalte mit space-between, nicht ueber eine geratene Mindesthoehe am Text. */
.schlusskarte{padding:30px 32px;display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.schlusskarte h3{font-size:23px;margin:9px 0 10px}
.schlusskarte__tat{margin:0}

/* ── Vorteilskarte (Karriere) ────────────────────────────────────────────────────── */
.vorteil{display:flex;gap:14px;align-items:flex-start}
.vorteil > div{min-width:0}
.vorteil__haken{flex:0 0 auto;width:30px;height:30px;border-radius:8px;background:var(--gewaehlt);
                display:grid;place-items:center;color:var(--blau-text)}
.vorteil__haken svg{width:17px;height:17px}

/* ── Stellenkarte ────────────────────────────────────────────────────────────────── */
/* Die Karriereseite hing vorher an EINER allgemeinen Karte ganz unten („Feste Objekte,
   pünktlicher Lohn"). Wer nicht sucht, klickt darauf nicht. Jetzt stehen die Stellen mit
   Namen auf der Startseite — bei einem Betrieb, der Personal braucht, ist das der zweite
   Besucherstrom neben den Auftraggebern. */
/* ⚠️ Erste Fassung: drei gleich hohe Kaesten mit Chip, Titel, Text, Knopf — auf Navy sah
   das aus wie ein Formular. Was gefehlt hat, ist HIERARCHIE innerhalb der Karte und ein
   Grund, warum die Sektion dunkel ist. Jetzt traegt jede Stelle eine grosse Nummer als
   Wasserzeichen (dieselbe Balken-Sprache wie die Ablauf-Strecke), der Chip sitzt oben in
   der Zeile mit der Nummer, und der Knopf ist eine Textzeile mit Pfeil statt eines
   weissen Klotzes — drei weisse Knoepfe nebeneinander waren die eigentliche Unruhe. */
.stelle{display:flex;flex-direction:column;justify-content:space-between;position:relative;
        overflow:hidden;padding:24px 26px}
.stelle__kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.stelle__art{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.14em;
             text-transform:uppercase;color:var(--navy);background:#6ECFF5;
             border-radius:999px;padding:6px 13px}
.stelle__nr{font-family:var(--kopf);font-weight:800;font-size:34px;line-height:1;
            color:rgba(110,207,245,.28);letter-spacing:-.03em}
.stelle h3{font-size:18.5px;margin-bottom:8px}
.stelle p{font-size:14.5px}
/* Textknopf mit Pfeil: er tritt zurueck, bleibt aber ein 44-px-Ziel. */
.stelle__tat{display:inline-flex;align-items:center;gap:9px;min-height:44px;margin-top:18px;
             font:700 15px/1 var(--kopf);color:#fff;text-decoration:none;
             border-bottom:2px solid rgba(110,207,245,.5);align-self:flex-start;padding:0 2px 4px}
.stelle__tat:hover{color:#6ECFF5;border-bottom-color:#6ECFF5}
.stelle__tat svg{width:17px;height:17px;transition:translate .18s ease}
.stelle__tat:hover svg{translate:3px 0}
@media (prefers-reduced-motion:reduce){ .stelle__tat svg{transition:none} }

/* ── Leistungen: Koerper ─────────────────────────────────────────────────────────────
   Links die Einleitung (schmale, feste Spalte), rechts die Leistungen als Liste. Die feste
   520-px-Spalte ist Absicht: eine Einleitung, die mit der Fensterbreite mitwaechst, wird auf
   grossen Schirmen zur Textwand. */
/* Einleitung, Segmente, Leistungen, Angebot und Aufforderung stehen UNTEREINANDER ueber die
   volle Bahnbreite. Der Handoff stellt Einleitung und Liste nebeneinander; das kostete gemessen
   515 px (Zuhause) bzw. 379 px (Betrieb) Leerraum in der schmalen Spalte, und auch gefuellt und
   klebend blieben 300 bzw. 163 px. Zweispaltig war hier nicht zu retten. */
.lst-intro{font-size:18px;line-height:1.6;max-width:68ch;margin-top:48px}
/* Die Aufforderung je Kundentyp, am ENDE des Abschnitts. Neutrale Trennlinie, kein Kasten und
   kein akzentfarbener Kantenstreifen (§8) — sie schliesst den Abschnitt ab, sie ist keine
   Werbeflaeche darin. Text links, Knoepfe rechts; bricht auf schmalen Geraeten von selbst um. */
.lst-tat{margin-top:44px;padding-top:28px;border-top:1px solid var(--linie);
         display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}
.lst-tat p{font-family:var(--kopf);font-weight:700;font-size:19px;line-height:1.35;
           color:var(--navy);max-width:52ch}
/* Die Segmentliste: EINE Zeile statt acht Karten. Sie ersetzt den Abschnitt „Objektarten"
   (815 px Desktop / 1.416 px Handy) und haelt genau das fest, was sonst nirgends mehr
   vorkaeme — die Namen der Kundensegmente.
   ⚠️ Sie stand bis zum 02.09.2026 als Fliesstext mit Trennpunkten dort, wo jetzt Chips stehen.
   Der Trennpunkt war ein ::after am VORHERIGEN Eintrag, weil er als ::before beim Umbruch an
   den Zeilenanfang rutschte — die Falle ist mit den Chips weg, aber sie war echt: wer hier
   wieder auf Fliesstext geht, faengt sie sich erneut ein. */
.segmente{margin-top:22px}
.segmente__label{font:600 13px/1 var(--text);letter-spacing:.18em;text-transform:uppercase;
                 color:var(--grau);margin-bottom:12px}
.segmente__liste{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.segmente__liste li{font:500 14px/1 var(--text);color:var(--navy);padding:9px 12px;
                    border:1px solid var(--linie-kraeftig);border-radius:3px}

/* ── Leistungskarte ──────────────────────────────────────────────────────────────────
   Eine Karte ist eine Listenzeile: 2 px Navy als Oberkante der Liste, Haarlinie unter jeder
   Zeile, Symbolkachel 72 px links, Aufklapp-Knopf rechts oben. Keine Kartenflaeche, kein
   Radius, kein Schatten — die Ruhe kommt aus dem Raster, nicht aus Tiefe.
   ⚠️ Die ganze Karte ist ein <details>; alles Sichtbare liegt im <summary>, das selbst das
   Raster aufspannt. Deshalb greifen dieselben Rasterregeln auf .lk--fest (Karte ohne Liste). */
.karten{border-top:2px solid var(--navy);margin-top:34px}
.lk{border-bottom:1px solid var(--linie)}
.lk > summary,.lk--fest{display:grid;grid-template-columns:72px 1fr auto;gap:0 28px;
                        padding:32px 0;align-items:start}
.lk > summary{cursor:pointer;list-style:none}
.lk > summary::-webkit-details-marker{display:none}
.lk > summary:focus-visible{outline:3px solid var(--blau);outline-offset:-3px}
.lk__zeichen{grid-column:1;grid-row:1/span 3;width:72px;height:72px;background:var(--papier);
             display:grid;place-items:center}
.lk__zeichen svg{width:52px;height:52px}
.lk__titel{grid-column:2;grid-row:1;font-size:24px;font-weight:800;line-height:1.15}
.lk__text{grid-column:2;grid-row:2;display:block;margin-top:10px;font-size:16px;line-height:1.55;max-width:520px}
.lk__meta{grid-column:2;grid-row:3;display:flex;gap:8px 18px;align-items:center;flex-wrap:wrap;margin-top:14px}
/* Die konkrete Angabe. Sie ist der Unterschied zwischen einer Leistung und einer Behauptung —
   deshalb steht sie als eigenes Feld und nicht im Fliesstext. */
.lk__tag{font:600 14px/1.2 var(--text);color:var(--navy);background:var(--papier);padding:8px 10px}
/* Der Weg zum Richtpreis steht dort, wo der Besucher gerade ueber Fenster liest — nicht erst
   in der Navigation. Ein Textlink, kein zweiter Knopf: die Zeile hat schon eine Aufgabe.
   44 px, nicht 32: die Pruefung hat den Link am 02.09.2026 zu Recht als zu kleines
   Beruehrungsziel gemeldet (252x32 auf dem Tablet). Ein Textlink ist auf dem Handy ein Knopf. */
.lk__rechner{font:600 15px/1 var(--text);text-decoration:none;display:inline-flex;align-items:center;
             gap:6px;min-height:44px}
.lk__rechner:hover{text-decoration:underline}
.lk__schalter{grid-column:3;grid-row:1;display:flex;align-items:center;gap:10px;white-space:nowrap;
              font:600 14px/1 var(--text);color:var(--navy);min-height:44px}
/* ⚠️ Gedreht wird das ZEICHEN, nicht der Kasten. Die Vorlage fuer diese Mechanik ist das runde
   Plus der FAQ, dort dreht der Kasten mit und man sieht es nicht. Hier hat der Kasten eine
   1,5-px-Kontur und wird beim Drehen zur Raute mit einem Kreuz darin — im Bild sofort zu
   sehen, in keiner Messung. */
.lk__plus{flex:0 0 auto;width:30px;height:30px;border:1.5px solid var(--navy);display:grid;
          place-items:center}
.lk__plus svg{width:14px;height:14px;color:var(--navy);transition:transform .25s ease}
.lk[open] .lk__plus svg{transform:rotate(135deg)}
@media (prefers-reduced-motion:reduce){ .lk__plus svg{transition:none} }
/* EINE Spalte, auch wenn die Liste lang wird — „schwer zugaengliche Fenster, sofern eine sichere
   Durchfuehrung moeglich ist" bricht zweispaltig sechsmal um und liest sich als Schlangenlinie.
   Der Einzug von 100 px stellt sie unter die Textspalte (72 px Kachel + 28 px Abstand). */
.lk__liste{list-style:none;margin-top:-6px;padding:14px 0 32px 100px;border-top:1px solid var(--linie);
           font-size:14.5px;line-height:1.5;color:#44556A}
.lk__liste li{padding-left:16px;position:relative;margin-bottom:5px}
/* Der Punkt ist ein Quadrat auf der Grundlinie des Zeichens, kein Listenpunkt aus dem Browser
   und kein akzentfarbener Kantenstreifen (globale CLAUDE.md §8) — der Handoff zeichnet hier
   eine 2-px-Linie links, das ist genau das verbotene Muster. */
.lk__liste li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;background:var(--blau)}

/* ── Terminbuchung ───────────────────────────────────────────────────────────────── */
/* Das Zeitfenster steht als eigene Zeile unter dem Bleitext, nicht als weiterer Absatz darin:
   es ist eine Angabe, kein Argument. Getoente Flaeche mit neutralem Rand — kein Akzent-Kantenstreifen. */
.termin-zeitfenster{margin-top:16px;padding:12px 16px;border:1px solid var(--linie);border-radius:10px;
                    background:#fff;font-size:14.5px;line-height:1.55;max-width:64ch}
.termin-zeitfenster b{color:var(--blau-text)}
.termin-raster{display:grid;grid-template-columns:1fr;gap:26px}
@media (min-width:900px){
  .termin-raster{grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr);gap:34px;align-items:start}
}
/* Kein 40-px-Zahlenwert wie im Rechner: hier steht ein Satz, keine Summe. */
.termin-summe__wert{font-family:var(--kopf);font-weight:700;font-size:18px;color:#fff;
                    line-height:1.35;margin:8px 0 18px}
.termin-summe .knopf{width:100%}
.termin-summe p{font-size:13.5px;margin-top:14px}

/* ── Vorher/Nachher-Vergleich ────────────────────────────────────────────────────── */
/* Technik uebernommen von Cloud Four image-compare (MIT, github.com/cloudfour/image-compare):
   ein NATIVER <input type="range"> treibt eine CSS-Variable, die per clip-path das obere
   Bild freigibt. Herkunft und Abwaegung stehen in reference/components.md.
   Warum nachgebaut statt eingebunden: die Auslieferung faehrt script-src 'self' ohne
   Build, und ein Web Component mit Shadow DOM sperrt unsere Tokens aus. Uebernommen ist
   das VERHALTEN, nicht das Stylesheet.
   Der Gewinn gegen einen eigenen Drag-Handler: Tastatur (Pfeile, Bild auf/ab, Pos1/Ende),
   Screenreader-Ansage und Touch kommen vom Browser und nicht von uns. */
.vgl{position:relative}
.ergebnisse{display:grid;gap:32px}
.ergebnisse .vgl{margin:0;min-width:0}
.ergebnisse .vgl__lage{aspect-ratio:3/2}
.ergebnisse .vgl__lage > div{min-height:0;overflow:hidden}
.ergebnisse .vgl__lage img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 80%}
.ergebnisse .vgl__regler::-webkit-slider-thumb{position:relative;top:50%;transform:translateY(-50%)}
.ergebnisse__paar{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ergebnisse__paar > div{position:relative;min-width:0}
.ergebnisse__paar img{display:block;width:100%;height:auto;border-radius:9px}
.ergebnisse__label{position:absolute;top:12px;left:12px;padding:8px 12px;border-radius:5px;
  background:var(--navy);color:#fff;font-size:13px;font-weight:600;line-height:1}
@media(min-width:760px){.ergebnisse{grid-template-columns:1fr 1fr}}
.objektvideo{display:grid;gap:24px;margin:48px 0 0;padding-top:32px;border-top:1px solid var(--linie);scroll-margin-top:100px}
.objektvideo video{display:block;width:100%;max-width:320px;height:auto;aspect-ratio:9/16;
  border-radius:14px;background:var(--navy)}
.objektvideo figcaption{max-width:420px}
.objektvideo p{margin-top:12px}
@media(min-width:760px){.objektvideo{grid-template-columns:320px 1fr;align-items:center;gap:40px}}
.vgl__buehne{position:relative;border-radius:14px;overflow:hidden;background:var(--papier);
             box-shadow:0 0 0 1px var(--linie)}
[data-vgl-buehne]{--belichtung:50}
.vgl__lage{display:grid}
/* Beide Lagen liegen in DERSELBEN Rasterzelle uebereinander. Kein position:absolute:
   so bestimmt das Vorher-Bild die Hoehe, und die Buehne kann nie auf 0 zusammenfallen,
   wenn ein Bild noch nicht geladen ist. */
.vgl__lage > *{grid-area:1/1}
.vgl__nachher{clip-path:inset(0 calc(100% - var(--belichtung) * 1%) 0 0)}
.vgl__flaeche{min-height:clamp(230px,32vw,330px);display:flex;align-items:center;justify-content:center;
              text-align:center;padding:18px;font:400 11.5px/1.45 ui-monospace,Consolas,monospace;
              letter-spacing:.04em}
.vgl__flaeche img{width:100%;height:100%;object-fit:cover;display:block}
/* Die beiden Platzhalter muessen sich UNTERSCHEIDEN, sonst sieht man beim Ziehen nichts
   und der Regler wirkt kaputt. Sie sind bewusst als Platzhalter lesbar beschriftet —
   sobald die Aufnahmen da sind, wird hier ein <img> eingehaengt, sonst nichts. */
.vgl__flaeche--vorher{background:repeating-linear-gradient(45deg,#B9C4CE,#B9C4CE 9px,#C7D1DA 9px,#C7D1DA 18px);
                      color:#3A4756}
.vgl__flaeche--nachher{background:repeating-linear-gradient(45deg,#E7F3FA,#E7F3FA 9px,#F7FCFF 9px,#F7FCFF 18px);
                       color:var(--blau-text)}
.vgl__kante{position:absolute;top:0;bottom:0;width:3px;background:#fff;pointer-events:none;
            left:calc(var(--belichtung) * 1%);transform:translateX(-50%);
            box-shadow:0 0 0 1px rgba(22,55,94,.25)}
/* ⚠️ Solide Farben, keine rgba(). Mit .88 bzw. .92 Deckkraft mass mobil-audit.mjs hier
   **1,09:1** auf allen drei Geraeten — real ist der Grund bei .88 zwar dunkel genug, aber
   ein halbtransparenter Textgrund laesst sich nicht messen, und ein Pruefer, der zehn
   unechte Befunde meldet, macht die echten unglaubwuerdig. Auf einem hellen Foto waere es
   ausserdem wirklich knapp. Schriftgroesse 11 → 13 px, weil unter 13 px auf dem Handy
   niemand eine Grossbuchstaben-Sperrung liest. */
.vgl__marke{position:absolute;top:12px;z-index:2;pointer-events:none;background:#16375E;
            color:#fff;font:600 13px/1 var(--text);letter-spacing:.12em;text-transform:uppercase;
            padding:8px 12px;border-radius:5px}
.vgl__marke--vorher{right:12px}
.vgl__marke--nachher{left:12px;background:#006E99}
/* Der Regler liegt UEBER der Buehne und ist bis auf den Griff unsichtbar.
   ⚠️ touch-action:pan-y ist Pflicht: ohne das frisst der Regler auf dem Handy die
   senkrechte Wischgeste, und die Seite laesst sich an dieser Stelle nicht mehr scrollen. */
.vgl__regler{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;
             background:transparent;appearance:none;-webkit-appearance:none;cursor:ew-resize;
             touch-action:pan-y;z-index:3}
.vgl__regler:focus-visible{outline:3px solid var(--blau);outline-offset:3px}
.vgl__regler::-webkit-slider-runnable-track{background:transparent;height:100%}
.vgl__regler::-moz-range-track{background:transparent;height:100%}
.vgl__regler::-webkit-slider-thumb{-webkit-appearance:none;width:46px;height:46px;border-radius:50%;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2316375E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center/22px no-repeat;
  box-shadow:0 2px 10px rgba(22,55,94,.35);cursor:ew-resize}
.vgl__regler::-moz-range-thumb{width:46px;height:46px;border:0;border-radius:50%;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2316375E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center/22px no-repeat;
  box-shadow:0 2px 10px rgba(22,55,94,.35);cursor:ew-resize}
.vgl figcaption{margin-top:13px;font-size:15px;color:#44556A}
.vgl figcaption b{color:var(--navy);font-family:var(--kopf);font-weight:700}

/* ── Google-Wertung ──────────────────────────────────────────────────────────────── */
/* Echte Zahlen aus dem Unternehmensprofil, nicht nachgebaute Sterne-Optik ohne Deckung.
   Das Stand-Datum steht mit auf der Seite: eine Bewertungszahl ohne Datum ist eine
   Behauptung ueber einen Bestand, den niemand nachgezaehlt hat.
   ⚠️ Das Sternengelb #F5A623 ist eine GRAFIKfarbe (Flaeche, kein Text) — die 3:1 fuer
   grafische Elemente reicht, 4,5:1 gilt hier nicht. Die Zahl daneben traegt den Kontrast. */
.gwert{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:inherit;
       min-height:44px}
/* Eine Reihe, fuenf ganze Sterne. Die frueheren zwei uebereinanderliegenden Lagen sind
   samt ihrer Doppelkontur weg (siehe STERNE() im Generator). */
.gwert__sterne{display:inline-flex;gap:2px;flex:0 0 auto;line-height:0}
.gwert__text{font-size:15px;color:var(--grau);line-height:1.25;display:inline-flex;
             align-items:baseline;gap:7px}
.gwert__text b{font-family:var(--kopf);font-weight:800;font-size:22px;color:var(--navy)}
.gwert:hover .gwert__text b{color:var(--blau-text)}
.gwert--dunkel .gwert__text{color:#B9CBDD}
.gwert--dunkel .gwert__text b{color:#fff}
/* Die grosse Fassung in der Bewertungs-Sektion: hier ist die Wertung der Inhalt, nicht
   eine Randnotiz — also mittig und in einer eigenen Flaeche. */
.gtafel{display:grid;grid-template-columns:1fr;gap:24px;align-items:center;
        background:#fff;border-radius:14px;padding:30px 32px;
        box-shadow:0 0 0 1px var(--linie)}
@media (min-width:760px){
  .gtafel{grid-template-columns:auto 1fr;gap:38px;padding:34px 38px}
  /* Senkrechte Trennung statt einer waagerechten Linie: die beiden Haelften sind
     gleichrangig, nicht Kopf und Rumpf. */
  .gtafel__text{border-left:1px solid var(--linie);padding-left:38px}
}
/* Verfasserzeile einer echten Google-Rezension: Initial-Kreis statt Profilbild (die
   liegen auf Google-Hosts, die CSP laesst nur eigene Bilder zu) plus Zeitangabe — beides
   zusammen ist die von Google verlangte Attribution. */
.zitat__sterne{display:flex;gap:2px;line-height:0;margin-bottom:12px}
.zitat__sterne svg{width:16px;height:16px}
/* ⚠️ Die Karte ist eine Flex-SPALTE, damit die Verfasserzeile per margin-top:auto nach
   unten faellt. Vorher klebte sie direkt am Zitat — und weil die Zitate verschieden lang
   sind, sass der Trennstrich in jeder Karte auf einer anderen Hoehe. Das ist der Unterschied
   zwischen drei Karten und einer Reihe. */
/* ⚠️ Zwei Klassen statt einer: weiter unten steht .zitat__wer mit margin-top 14px —
   gleiche Spezifitaet, aber spaeter im Stylesheet, und damit gewinnt sie. Gemessen kam am
   Element 14px an statt auto. Zwei Klassen heben die Regel eindeutig darueber,
   unabhaengig von der Reihenfolge. */
.zitat{display:flex;flex-direction:column}
.zitat .zitat__wer--google{display:flex;align-items:center;gap:11px;margin-top:auto;
                           padding-top:14px;border-top:1px solid var(--linie)}
.zitat > p{margin-bottom:16px}
.zitat__initial{flex:0 0 auto;width:36px;height:36px;border-radius:50%;background:var(--gewaehlt);
                display:grid;place-items:center;font:700 15px/1 var(--kopf);color:var(--navy)}
.zitat__wann{display:block;font-size:13px;color:var(--grau);margin-top:1px}
#gbewertungen:empty{display:none}
#gbewertungen{margin-bottom:22px}

.gtafel__wert{text-align:center}
.gtafel__anzahl{margin-top:10px;font-size:14px;color:var(--grau)}
.gtafel p{font-size:15.5px;color:#44556A;line-height:1.6}
.gwert--gross{flex-direction:column;gap:10px;text-align:center}
.gwert--gross .gwert__sterne svg{width:26px;height:26px}
.gwert--gross .gwert__text{flex-direction:column;gap:2px;font-size:15px}
.gwert--gross .gwert__text b{font-size:46px;line-height:1}

/* ── Karussell ───────────────────────────────────────────────────────────────────── */
/* Natives CSS-Karussell (CSS Overflow 5): scroll-snap plus ::scroll-button() und
   ::scroll-marker. Kein Swiper, kein Splide, kein JavaScript — Tastaturbedienung,
   Fokusverwaltung, disabled-Zustand der Knoepfe und die Ansage des aktiven Elements
   kommen vom Browser. Der zweite Teil von content ("/ Vorheriges") ist der
   Barrierefreiheits-Name des Knopfes, nicht Dekoration.
   Chrome und Edge koennen es; Firefox und Safari sind unterwegs.
   ⚠️ Der Fallback darf nicht stumm sein: die naechste Karte ist ABSICHTLICH angeschnitten
   sichtbar (86 % Breite). Das ist die Wisch-Einladung, die ueberall funktioniert — ohne sie
   sieht ein Nutzer ohne Knoepfe nicht, dass es weitergeht. */
.karussell{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
           scroll-behavior:smooth;padding:4px 4px 6px;margin:0 -4px;
           scrollbar-color:var(--linie-kraeftig) transparent}
.karussell > *{flex:0 0 min(560px,86%);scroll-snap-align:center;margin:0}
/* Eine Bedienzeile statt verstreuter Bedienteile: Pfeil · Punkte · Pfeil, mittig unter dem
   Karussell. Die erste Fassung setzte die Pfeile oben rechts und liess die Punkte allein
   unten stehen — dazu lief die Systemscrollbar quer durchs Bild. Das las sich als drei
   verschiedene Bedienangebote fuer dieselbe Sache.
   Die Punktegruppe ist der ANKER, die beiden Pfeile haengen sich links und rechts daran.
   So bleibt die Zeile mittig, egal wie viele Punkte es sind. */
@supports (scroll-marker-group: after) and (position-anchor: --a){
  .karussell{scroll-marker-group:after;scrollbar-width:none}
  .karussell::-webkit-scrollbar{display:none}
  /* ⚠️ width:fit-content ist hier kein Feinschliff, sondern der Unterschied zwischen
     "laeuft" und "kaputt": als Block nimmt die Punktegruppe die volle Bahnbreite ein,
     und ein Pfeil, der sich an ihre RECHTE Kante haengt, landet ausserhalb. Gemessen
     436 > 390 auf dem Handy, 865 > 834 auf dem Tablet — jedes Mal genau eine
     Knopfbreite. Mit fit-content ist die Box so breit wie die Punkte, und die Pfeile
     stehen direkt daneben. */
  .karussell::scroll-marker-group{anchor-name:--gpunkte;display:flex;justify-content:center;
    align-items:center;gap:10px;margin:24px auto 0;width:fit-content;min-height:46px}
  .karussell > *::scroll-marker{content:"";width:9px;height:9px;border-radius:50%;
    background:var(--linie-kraeftig);cursor:pointer;transition:background .2s ease}
  .karussell > *::scroll-marker:target-current{background:var(--navy);width:11px;height:11px}
  .karussell > *::scroll-marker:focus-visible{outline:3px solid var(--blau);outline-offset:3px}
  .karussell::scroll-button(left),.karussell::scroll-button(right){
    position:absolute;position-anchor:--gpunkte;
    width:46px;height:46px;border:0;border-radius:50%;background:#fff;color:var(--navy);
    font:400 20px/1 var(--text);cursor:pointer;
    box-shadow:0 1px 2px rgba(22,55,94,.10),0 4px 14px -4px rgba(22,55,94,.22)}
  .karussell::scroll-button(*):disabled{opacity:.3;cursor:default;box-shadow:none}
  .karussell::scroll-button(*):focus-visible{outline:3px solid var(--blau);outline-offset:2px}
  .karussell::scroll-button(left){content:"\2190" / "Vorheriges Ergebnis";
    position-area:left center;margin-right:18px}
  .karussell::scroll-button(right){content:"\2192" / "Naechstes Ergebnis";
    position-area:right center;margin-left:18px}
}
/* Ohne die nativen Knoepfe (Firefox, Safari) bleibt die Scrollbar sichtbar — sie ist
   dort das einzige Bedienelement neben der Wischgeste und wird deshalb NICHT versteckt. */
/* Nur fuer Screenreader. Nicht display:none — das nimmt sie ihnen mit weg. */
.nur-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
        clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ── Ablauf als Strecke ────────────────────────────────────────────────────────────
   ⚠️ ZURUECKGEBAUT am 02.09.2026 abends auf Wunsch des Auftraggebers. Dazwischen stand hier die
   Kachel-Fassung aus dem Design-Handoff (vier Navy-Kacheln 2x2 mit Geisterziffer und Kurz-Label,
   Klassen .ablauf__*). Sie ist raus — nicht weil sie schlechter gemessen haette, sondern weil
   der Betrieb seine Strecke wiedererkennen will. Wer sie zurueckholt: Commit eb78527.
   Die Dauer kommt bei der Terminwahl aus modvio und wird nicht in dieser Darstellung festgelegt. */
/* Vier Karten nebeneinander sagen nicht, dass es eine REIHENFOLGE ist — das tut erst die
   Linie. Auf dem Handy laeuft sie senkrecht, weil vier Schritte nebeneinander auf 390 px
   entweder unlesbar klein oder ein Querueberlauf waeren.
   Die Linie ist ein Pseudo-Element hinter den Punkten, kein Rand an den Karten: so bleibt
   sie eine Linie und wird nicht zu vier Strichen mit Luecken. */
.strecke{display:grid;gap:26px;position:relative;list-style:none}
.strecke__punkt{width:40px;height:40px;border-radius:50%;background:var(--blau);color:#fff;
                display:grid;place-items:center;font:800 15px/1 var(--kopf);
                position:relative;z-index:1;flex:0 0 auto}
.strecke__schritt{display:flex;gap:16px;align-items:flex-start}
.strecke__schritt h3{font-size:17px;margin-bottom:5px;color:#fff}
.strecke__schritt p{font-size:14.5px;color:#B9CBDD}
/* Senkrechte Linie zwischen den Punkten (Handy). Sie endet am letzten Schritt, sonst
   haengt ein Strich ins Leere. */
.strecke__schritt:not(:last-child)::before{content:"";position:absolute;left:19.5px;
  width:2px;background:#2C4C73;margin-top:40px;height:calc(100% - 40px)}
.strecke__schritt{position:relative}
@media (min-width:860px){
  .strecke{grid-template-columns:repeat(4,1fr);gap:22px}
  .strecke__schritt{flex-direction:column;gap:14px}
  .strecke__schritt:not(:last-child)::before{left:40px;top:19px;margin-top:0;
    width:calc(100% + 22px - 40px);height:2px}
}

/* ── Ablauf ──────────────────────────────────────────────────────────────────────── */
.schritt__nr{font-family:var(--kopf);font-weight:800;font-size:15px;color:var(--navy);
             background:var(--blau);width:34px;height:34px;border-radius:6px;
             display:flex;align-items:center;justify-content:center;margin-bottom:13px}

/* ── Zitate ──────────────────────────────────────────────────────────────────────── */
.zitat p{font-size:16px;line-height:1.6;color:var(--tinte)}
.zitat__wer{margin-top:14px;padding-top:13px;border-top:1px solid var(--linie);
            font-size:13.5px;color:var(--grau)}
.zitat__wer b{color:var(--navy)}
.beispielhinweis{margin-top:16px;font-size:13.5px;color:var(--grau)}

/* ── Rechner ─────────────────────────────────────────────────────────────────────── */
.rechner{display:grid;grid-template-columns:1.55fr 1fr;gap:26px;align-items:start}
.posten{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
        border:1px solid var(--linie);border-radius:9px;padding:16px 20px;margin-bottom:11px}
.posten__text{flex:1;min-width:180px}
.posten__text b{display:block;font-family:var(--kopf);font-weight:700;font-size:16px;color:var(--navy)}
.posten__text span{font-size:13.5px;color:var(--grau)}
.zaehler{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.zaehler button{width:44px;height:44px;font:700 20px/1 var(--kopf);border:1px solid var(--linie-kraeftig);
                background:#fff;color:var(--navy);border-radius:6px;cursor:pointer}
.zaehler button:hover{background:var(--papier)}
.zaehler output{min-width:74px;text-align:center;font-family:var(--kopf);font-weight:700;font-size:17px;color:var(--navy)}
.zaehler output span{font-family:var(--text);font-weight:400;font-size:13px;color:var(--grau)}
.posten__summe{min-width:92px;text-align:right;font-family:var(--kopf);font-weight:700;font-size:17px;color:var(--navy)}
.summe{position:sticky;top:96px;background:var(--navy);color:#B9CBDD;border-radius:10px;padding:26px 28px}
.summe__label{font-weight:600;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#8FA8C2}
.summe__wert{font-family:var(--kopf);font-weight:800;font-size:40px;color:#fff;line-height:1.1;margin:8px 0 4px}
.summe__hinweis{font-size:14px;margin-bottom:20px}
.summe .knopf{width:100%}
/* Die Fehlermeldung liegt zwischen den Rechner-CTAs; deshalb allgemeiner Geschwisterselektor. */
.summe .knopf ~ .knopf{margin-top:9px}
.summe p{font-size:12.5px;line-height:1.55;color:#8FA8C2;margin-top:16px}
/* Heller als .termin-status--fehler (#8b2635), das auf weissem Grund steht — hier ist der
   Grund navy (.summe), das dunkle Rot waere dort kaum lesbar. */
.rechner-fehler{margin-top:9px;font-size:13.5px;line-height:1.5;color:#FFC9BE}
/* ⚠️ Warnband fuer die Testwerte im Rechner. Bewusst auffaellig und bewusst OHNE Akzentfarbe als
   Kantenstreifen — getoente Flaeche mit neutralem Rand, wie alle Hinweiskaesten dieser Seite.
   Es verschwindet automatisch, sobald TESTWERTE in website-inhalt.mjs auf false steht. */
.testhinweis{margin-top:18px;padding:14px 18px;border:1px solid var(--linie-kraeftig);border-radius:10px;
             background:#FFF6E5;color:#5A4008;font-size:14.5px;line-height:1.55;max-width:70ch}
.testhinweis b{color:#3D2B05}
/* Eine Frage = ein Block. Die Trennlinie oben ersetzt Ueberschriften-Getoese: sieben Fragen
   brauchen Rhythmus, nicht sieben H3. */
.frageblock + .frageblock{margin-top:10px;padding-top:6px;border-top:1px solid var(--linie)}
.frageblock .wahl{margin-bottom:6px}
.frageblock .posten:last-of-type{margin-bottom:4px}
.frageblock__hinweis{font-size:14px;color:var(--grau);margin:-4px 0 12px;max-width:64ch}
/* Drei kurze Optionen sollen nebeneinander passen — 240 px liessen nur zwei je Zeile zu.
   ⚠️ Doppelte Klasse mit Absicht: .wahl steht weiter unten im Stylesheet (Abschnitt Termin) und
   haette diese Regel bei gleicher Spezifitaet sonst ueberschrieben. Live gemessen am 02.09.2026 —
   die dritte Option stand allein in einer zweiten Zeile. */
.wahl.wahl--breit{grid-template-columns:repeat(auto-fit,minmax(178px,1fr))}
/* Kein eigenes Ankreuzfeld mehr: die Fensterbänke sind ein .kacheln-Schalter wie jede andere
   Auswahl. Ein <input type=checkbox> ist 20x20 gross und fiel bei mobil-audit durch. */

/* ── Termin ──────────────────────────────────────────────────────────────────────── */
.wahl{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-bottom:30px}
.wahl button{text-align:left;padding:18px 20px;border:1px solid var(--linie);background:#fff;
             border-radius:9px;cursor:pointer;min-height:44px}
.wahl button:hover{border-color:var(--blau)}
.wahl button[aria-pressed="true"]{border-color:var(--navy);background:var(--gewaehlt)}
.wahl b{display:block;font-family:var(--kopf);font-weight:700;font-size:16.5px;color:var(--navy);margin-bottom:3px}
.wahl span{font-size:14px;color:var(--grau)}
.stufe{font-family:var(--kopf);font-weight:700;font-size:14px;letter-spacing:.04em;
       color:var(--navy);margin:26px 0 12px}
.kacheln{display:flex;gap:9px;flex-wrap:wrap}
.kacheln button{min-width:78px;min-height:56px;padding:9px 14px;border:1px solid var(--linie);
                background:#fff;border-radius:8px;cursor:pointer;font:600 15px/1.35 var(--text);color:var(--navy)}
.kacheln button:hover{border-color:var(--blau)}
.kacheln button[aria-pressed="true"]{border-color:var(--navy);background:var(--gewaehlt)}
.kacheln small{display:block;font-weight:400;font-size:13px;color:var(--grau)}
.felder{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.feld label{display:block;font-size:13.5px;font-weight:600;color:var(--navy);margin-bottom:5px}
.feld input,.feld select{width:100%;min-height:48px;padding:11px 14px;font:400 16px/1.4 var(--text);color:var(--tinte);
            border:1px solid var(--linie-kraeftig);border-radius:6px;background:#fff}
.feld input:focus,.feld select:focus{outline:2px solid var(--blau);outline-offset:1px;border-color:var(--navy)}
.zusammenfassung{margin-top:10px;font-size:14.5px;color:var(--grau)}
.bestaetigt{border:1px solid var(--linie-kraeftig);background:var(--papier);border-radius:10px;padding:28px 30px}
.bestaetigt h2{font-size:24px;margin-bottom:10px}
.rechtshinweis{font-size:13px;color:var(--grau);max-width:70ch;margin-top:18px}
.termin-status{width:100%;font-size:14px;color:var(--grau);padding:10px 0}
.termin-status--fehler{color:#8b2635}
.karriere-job{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.karriere-job > div{flex:1;min-width:250px}

/* ── Fuß ─────────────────────────────────────────────────────────────────────────── */
.fuss{background:var(--navy);color:#B9CBDD;padding:clamp(40px,5vw,64px) 0 0}
.fuss__raster{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:32px}
.fuss h3{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#8FA8C2;
         font-family:var(--text);margin-bottom:14px}
.fuss ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.fuss a,.fuss li{color:#B9CBDD;text-decoration:none;font-size:14.5px}
.fuss a:hover{color:#fff}
.fuss__marke{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.fuss__marke svg{width:38px;height:38px}
.fuss__marke .marke__wort{color:#fff}
.fuss__marke .marke__sub{color:#8FA8C2}
.fuss p{font-size:14.5px;line-height:1.6}
/* Oeffnungszeiten in der Kontakt-Spalte: durch einen Abstand und eine Linie von den Kontaktwegen
   getrennt, damit sie nicht als fuenfter Kontaktweg gelesen werden. Bewusst KEIN farbiger
   Kantenstreifen (globale CLAUDE.md §8) — die neutrale Linie in Fussfarbe reicht. */
.fuss__zeiten{margin-top:16px;padding-top:14px;border-top:1px solid #2C4C73;color:#B9CBDD}
.fuss__zeiten b{color:#fff;font-weight:600}
.fuss__note{margin-top:8px;color:#8FA8C2;font-size:13.5px}
/* ⚠️ align-items:center fehlte. Die Rechtslinks sind 44 px hohe Beruehrungsziele, die
   Copyright-Zeile ist eine Textzeile — ohne Ausrichtung sass sie an der Oberkante und
   die Links darunter versetzt. Zwei Dinge in einer Zeile stehen auf einer Linie. */
.fuss__unten{margin-top:40px;border-top:1px solid #2C4C73;padding:18px 0 26px;
             display:flex;justify-content:space-between;align-items:center;
             gap:14px 26px;flex-wrap:wrap;font-size:13.5px}
/* "AGB" mass 28 px Breite. Ein Beruehrungsziel braucht 44 px in BEIDEN Richtungen. */
.fuss__unten nav{display:flex;gap:8px;flex-wrap:wrap}
.fuss__unten nav a{min-width:44px;min-height:44px;display:inline-flex;align-items:center;
                   justify-content:center;padding:0 8px}

/* ── Studio-Credit ───────────────────────────────────────────────────────────────── */
/* ⚠️ Der Punkt steht NICHT im Studio-Rost #c44a2c, sondern in der fuer dunklen Grund
   aufgehellten Rolle. Alle Werte im Browser ueber Canvas gemessen, nicht gerechnet —
   eine Handrechnung lag hier um 0,3 daneben und haette 4,25:1 als "grün" durchgelassen:
     #c44a2c auf --navy #16375E  2,50:1   (auf Weiss dagegen 4,81:1 — dort bleibt es richtig)
     #EA7A52                     4,25:1   (reicht nicht)
     #EE8560                     4,68:1   ← gesetzt, derselbe Rostton, sicherer Abstand
   Zum Vergleich: GZL faehrt #c44a2c auf fast schwarzem Grund und kommt dort auf 3,56:1.
   Das ist die Kontrast-ROLLE aus CLAUDE.md §8, kein Marken-Tausch. */
.fuss__credit{border-top:1px solid #2C4C73;text-align:center;padding:20px 16px 26px;line-height:1.45}
.fuss__credit a{display:inline-block;text-decoration:none;color:inherit;padding:4px 10px}
.fuss__credit-k{display:block;font-size:11.5px;font-weight:600;letter-spacing:.2em;
                text-transform:uppercase;color:#8FA8C2}
.fuss__credit-m{display:block;font-family:var(--kopf);font-weight:800;font-size:19px;
                letter-spacing:-.03em;color:#fff;margin-top:7px}
.fuss__credit-m span{color:#EE8560}
.fuss__credit a:hover .fuss__credit-m{color:#DCE8F0}
.fuss__software{display:block;font-size:13.5px;margin-top:8px;color:#B9CBDD}
.fuss__software a{font-weight:700;text-decoration:underline;text-underline-offset:3px}
.fuss .fuss__credit > a{display:inline-block}

/* ── Bento: Kacheln mit je EINEM Inhaltstyp ──────────────────────────────────────── */
/* Der Unterschied zwischen Bento und "Karten in einer Reihe" ist NICHT die Optik, sondern
   dass jede Kachel genau einen Inhaltstyp traegt (Zahl, Liste, Ort, Bild, Aktion) und die
   Groessen absichtlich ungleich sind. Ein Raster aus sechs gleich grossen Textkarten ist
   kein Bento, es sieht nur so aus.
   ⚠️ DOM-Reihenfolge = sichtbare Reihenfolge. Keine grid-Umsortierung, sonst laeuft die
   Tastatur-Reihenfolge gegen das Auge. */
.bento{display:grid;gap:16px;grid-template-columns:repeat(6,1fr)}
.bento > *{grid-column:span 6}
@media (min-width:760px){
  .bento{grid-auto-rows:minmax(148px,auto)}
  /* ⚠️ Erste Fassung gab JEDER Kachel span 3 — sechs gleich grosse Karten in zwei Spalten.
     Das ist kein Bento, es sieht nur so aus (der Unterschied ist die absichtliche
     Ungleichheit, nicht der abgerundete Rand). Jetzt zwei hohe Anker links, daneben die
     kleineren Aussagen. Die DOM-Reihenfolge folgt genau dieser Lesefolge, damit Tastatur
     und Auge nicht auseinanderlaufen. */
  .bento__anker{grid-column:span 3;grid-row:span 2}
  .bento__halb{grid-column:span 3}
  .bento__breit{grid-column:span 4}
  .bento__schmal{grid-column:span 2}
  /* ⚠️ Der Rechner lag bis zum 02.09.2026 als zweite halbe Kachel unter dem Rhythmus, und
     die Fotokachel spannte daneben zwei Rasterreihen. Gemessen war der Abschnitt damit
     1.739 px = 21 % der Startseite, doppelt so viel wie der naechstgroesste (883 px) — und
     der groesste Block darin war ein LEERER Foto-Platzhalter von 756 px. Als Querband
     unter dem Raster kostet der Rechner 1.416 statt 1.739 px, ohne dass ein Inhalt
     wegfaellt: die Fotokachel braucht dann nur noch eine Reihe.
     Zurueck zur Handoff-Komposition sind es zwei Zeilen: hier span 2 an .bento__breit,
     und .bento__band wieder auf span 2. */
  .bento__band{grid-column:span 6}
}
.bento .karte{display:flex;flex-direction:column;justify-content:space-between;gap:14px}
/* ⚠️ Sechs weisse Kacheln nebeneinander sind ein Raster, kein Bento — auch wenn die
   Groessen stimmen. Was bei Speed4You den Unterschied macht, ist der WECHSEL der
   Flaechen: helle Kacheln, eine dunkle, eine getoente. Deshalb tragen die beiden
   Zahl-Kacheln eigene Gruende. Das ist kein Ornament, es ist der Rhythmus, der ohne
   Fotos sonst fehlt.
   ⚠️ Ehrlich dazu: den vollen Eindruck macht erst ein echtes Foto in der Bildkachel.
   Farbe ersetzt kein Motiv, sie ueberbrueckt nur die Zeit bis dahin. */
.bento__dunkel{background:var(--navy);box-shadow:none}
.bento__dunkel h3{color:#fff}
.bento__dunkel p{color:#B9CBDD}
.bento__dunkel .eyebrow{color:#6ECFF5}
.bento__dunkel .bento__zahl{color:#fff}
.bento__dunkel:hover{box-shadow:0 0 0 1.5px var(--blau)}
.bento__getoent{background:var(--gewaehlt);box-shadow:none}
.bento__getoent:hover{box-shadow:0 0 0 1.5px var(--blau)}
/* Die Festpreis-Kachel traegt als einzige einen Akzentring: sie ist die Aussage, wegen der
   der Abschnitt existiert. Ein Ring RINGSUM, kein Kantenstreifen an einer Seite (§8) — und
   der Ring bleibt beim Hover stehen, sonst spraenge er auf die 1,5 px der Grundregel. */
.bento__preis,.bento__preis:hover{box-shadow:0 0 0 2px var(--blau)}
.bento__getoent .bento__orte span{background:#fff}
.bento__zahl{font-family:var(--kopf);font-weight:800;font-size:clamp(34px,3.6vw,44px);color:var(--navy);
             line-height:1;letter-spacing:-.02em}
.bento__zahl span{font-size:.42em;letter-spacing:0}
.bento__liste{list-style:none;display:flex;flex-direction:column;gap:11px;margin-top:2px}
.bento__liste li{display:flex;align-items:center;gap:11px;font-size:15px;color:#44556A}
/* Der Haken sitzt in einer getoenten Scheibe, wie die Zeichenflaechen im Rest der Seite
   (.vorteil__haken, .branche__kachel). Das ist dieselbe Sprache, nur kleiner — kein
   zweites Muster fuer dieselbe Sache. */
.bento__haken{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--gewaehlt);
              display:grid;place-items:center}
.bento__haken svg{width:12px;height:12px;color:var(--blau-text)}
.bento__orte{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
.bento__orte span{font-size:13.5px;font-weight:600;color:var(--navy);background:var(--gewaehlt);
                  border-radius:999px;padding:5px 11px}

/* Einzugsgebiet-Kachel: Text und Karte NEBENEINANDER. Untereinander wuchs die Kachel so
   stark, dass die zwei Reihen hohe Nachbarkachel mitwuchs und ihr Leerraumloch zurueckkam
   (gemessen 426 → 838 px). Schmal bleibt es gestapelt, dort ist Hoehe kein Problem. */
/* ⚠️ Mit .bento davor, NICHT nur .bento__gebiet: die Grundregel .bento .karte setzt
   display:flex und traegt zwei Klassen Spezifitaet. Eine einzelne Klasse verliert dagegen,
   und die Karte stand dann unter dem Text statt daneben — die Kachel wuchs und schob das
   Leerraumloch in die Nachbarkachel zurueck. */
/* ⚠️ Erst ab 1040 px nebeneinander, nicht ab 900: die halbe Kachel misst bei 900 px nur
   406 px, und 200 px Karte liessen dem Text 132 px — das ist keine Spalte mehr. */
.bento .bento__gebiet{display:grid;gap:16px;align-content:start}
@media (min-width:1100px){
  .bento .bento__gebiet{grid-template-columns:1fr 200px;align-items:center;align-content:center}
}

/* Rechner-Querband: Text links, Schritte in der Mitte, Knopf rechts.
   ⚠️ Diese Regel MUSS nach .bento .karte stehen. Beide tragen zwei Klassen, also entscheidet
   die Reihenfolge — im 760er-Block weiter oben blieb display:flex stehen und das Band war
   427 statt 180 px hoch. Dieselbe Falle wie bei .bento__gebiet, zwei Bloecke tiefer.
   Erst ab 900 px nebeneinander: darunter ist das Band schmaler als Text + Schritte + Knopf
   zusammen, und die drei Spalten liefen aus der Karte. */
@media (min-width:900px){
  .bento .bento__band{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:26px}
  .bento .bento__band .schritte{margin:0;grid-template-columns:repeat(3,minmax(92px,1fr))}
  .bento .bento__band .bento__tat{margin:0}
}

/* Gebietskarte: echter OSM-Ausschnitt als eigene Datei, entfaerbt und im Papierblau der
   Marke getont — die Tonung steckt IM Bild, nicht in einem mix-blend-mode. */
.gk{margin:0;display:flex;flex-direction:column;gap:7px}
.gk__blatt{position:relative;width:200px;max-width:100%;margin:0 auto;border-radius:12px;
           overflow:hidden;box-shadow:0 0 0 1px rgba(22,55,94,.10)}
.gk__blatt img{display:block;width:100%;height:auto}
.gk__blatt span{position:absolute;border-radius:50%;transform:translate(-50%,-50%)}
.gk__ort{width:11px;height:11px;background:var(--blau);box-shadow:0 0 0 2.5px #fff}
/* Der Sitz traegt einen Hof, damit er ohne eigene Beschriftung als der besondere Punkt
   liest — den Ortsnamen schreibt die Karte selbst darunter. */
.gk__sitz{width:15px;height:15px;background:var(--navy);
          box-shadow:0 0 0 3px #fff,0 0 0 9px rgba(0,166,224,.22)}
.gk__quelle{font-size:13px;color:var(--grau);text-align:center}
/* Die Trefferflaeche wird auf 44 px gezogen, das Polster aber per negativer Aussenkante
   wieder herausgerechnet — sonst schoebe die Quellenzeile die Kachel auseinander.
   Ohne das mass das Gate den Link mit 92x17 px und meldete ihn auf allen drei Geraeten. */
.gk__quelle a{color:var(--grau);display:inline-block;padding:14px 8px;margin:-14px -8px}

/* Zeitachse in der Antwortzeit-Kachel: eine Obergrenze, keine Skala. Liegt auf Dunkelblau,
   deshalb helle Spur und weisse Endpunkte. */
.bento__achse{margin:12px 0 2px}
.bento__achse-spur{position:relative;height:3px;border-radius:999px;background:rgba(255,255,255,.22);
                   margin:0 5px}
.bento__achse-spur span{position:absolute;top:50%;width:11px;height:11px;border-radius:50%;
                        transform:translate(-50%,-50%)}
.bento__achse-start{left:0;background:#fff}
/* Das Ziel bleibt offen (Ring statt Scheibe): erreicht ist es erst mit der Antwort. */
.bento__achse-ziel{left:100%;background:var(--navy);box-shadow:inset 0 0 0 2.5px #6ECFF5}
.bento__achse-marken{display:flex;justify-content:space-between;gap:12px;margin-top:11px;
                     font-size:13px;color:#B9CBDD}
.bento__achse-marken span:last-child{color:#fff;font-weight:600}

/* Der Knopf steht mittig in seiner Kachel, nicht linksbuendig unter dem Text. */
.bento__tat{text-align:center;margin-top:4px}

/* Ziffernblatt der Antwortzeit-Kachel. Ring, 24 Striche, ein Punkt auf zwoelf Uhr —
   das Uhrgesicht sagt "Zeit", die Zahl in der Mitte sagt welche. Der Zeiger fehlt mit
   Absicht: 24 h ist eine Obergrenze, keine Uhrzeit.
   ⚠️ Feste 210 px, keine Skalierung mit der Kachel. Die Beschriftung in der Mitte steht
   in px (13 px Untergrenze); ein mitschrumpfendes Blatt wuerde sie herausdruecken. */
.zb{position:relative;width:160px;max-width:100%;aspect-ratio:1;margin:0 auto}
.zb__blatt{display:block;width:100%;height:auto}
.zb__ring{fill:none;stroke:var(--blau);stroke-width:14}
.zb__tick{stroke:#6ECFF5;stroke-width:2;stroke-linecap:round}
.zb__voll{stroke:#fff;stroke-width:2;stroke-linecap:round}
.zb__halo{fill:rgba(255,255,255,.18)}
.zb__jetzt{fill:#fff}
.zb__mitte{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
           justify-content:center;gap:4px;text-align:center}
.zb__mitte b{font-family:var(--kopf);font-weight:800;font-size:30px;line-height:1;
             letter-spacing:-.02em;color:#fff}
.zb__mitte b span{font-size:.52em;color:#6ECFF5}
/* 13 px, nicht die 11 px des Entwurfs: darunter meldet mobil-audit.mjs zu Recht. */
.zb__mitte em{font-style:normal;font-size:13px;font-weight:600;letter-spacing:.12em;
              text-transform:uppercase;color:#B9CBDD}
/* Blatt neben den Text erst, wenn beide Spalten ihre Breite haben. Darunter steht es
   zentriert unter dem Text — die Kachel wird dann hoeher, und genau das darf sie in der
   rechten Spalte auch (die Ankerkachel links ist mit dem Preisvergleich hoch genug). */
.bento .bento__zeit{display:grid;gap:18px;align-content:center}
@media (min-width:1100px){
  .bento .bento__zeit{grid-template-columns:1fr 160px;align-items:center}
}

/* Preisvergleich in der Festpreis-Kachel: zwoelf ungleiche Balken gegen zwoelf gleiche.
   ⚠️ Unterschieden wird ueber FLAECHE, Hoehe und Typo, nicht ueber einen akzentfarbenen
   Kantenstreifen — der ist projektweit verboten (CLAUDE.md §8, generisches KI-Klischee).
   Die obere Reihe bleibt bewusst grau und gestrichelt: sie ist das, was man NICHT bekommt. */
/* ⚠️ flex:1 ist hier kein Schoenheitsfehler, sondern der Grund, warum die Kachel kein Loch
   hat. .bento__anker spannt zwei Rasterreihen und bekommt seine Hoehe von den Nachbarn
   rechts; zusammen mit justify-content:space-between der Grundregel sammelt sich jeder
   Ueberschuss als Luecke IN DER MITTE. Auf Tablet waren das gemessen 151 px. Das
   Balkenfeld nimmt ihn stattdessen auf — bis zur Deckelung in .pv__feld, danach verteilt
   space-between den Rest auf die Zeilenabstaende und er faellt nicht mehr auf. */
.pv{display:flex;flex:1;flex-direction:column;justify-content:space-between;gap:10px;
    background:var(--papier);border-radius:12px;padding:16px 18px;margin:14px 0 2px}
.pv__kopf{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
          font-size:13.5px;font-weight:600;color:var(--grau)}
.pv__kopf span{min-width:0}
.pv__kopf b{flex:0 0 auto;font-family:var(--kopf);font-weight:700;color:var(--grau)}
.pv__kopf--fest{color:var(--navy)}
.pv__kopf--fest b{color:var(--blau-text);font-weight:800}
/* 92 px ist die Entwurfshoehe und bleibt die Untergrenze; nach oben darf das Feld die
   ueberschuessige Kachelhoehe aufnehmen, aber nicht unbegrenzt — ab etwa 156 px liest das
   Diagramm als Balkengebirge statt als Nebenbemerkung zum Absatz darueber. */
/* min 64 ist die verkleinerte Entwurfshoehe, max 156 der Puffer fuer die Ankerkachel.
   ⚠️ Die Obergrenze stand kurz auf 96 px. Auf Tablet ist der Anker rund 254 px hoeher als
   sein Inhalt (die beiden Nachbarn rechts stapeln dort Text UND Grafik), und was die Balken
   nicht aufnehmen, verteilt space-between auf die vier Zeilenabstaende im getoenten Kasten —
   gemessen 63 px je Abstand, und das liest als auseinandergerissen. Mit 156 sind es 33 px.
   Hoeher NICHT: dann wird aus der Nebenbemerkung ein Balkengebirge. */
.pv__feld{position:relative;flex:1;min-height:64px;max-height:156px;display:flex;
          align-items:flex-end;gap:6px}
.pv__feld i{flex:1;height:var(--h);border-radius:5px 5px 2px 2px;background:var(--linie-kraeftig)}
.pv__feld--fest i{background:var(--navy)}
/* Die Linien sitzen in Prozent, weil das Feld mitwaechst: 34 bzw. 28 px des 92-px-Entwurfs. */
.pv__linie{position:absolute;left:0;right:0}
/* Gestrichelt gegen durchgezogen ist der ganze Unterschied: die eine Linie sucht einen
   Mittelwert, die andere ist der Preis. */
.pv__linie--offen{top:37%;border-top:2px dashed var(--linie-kraeftig)}
.pv__linie--fest{top:30.4%;border-top:3px solid var(--blau);border-radius:2px}
.pv__frage{position:absolute;right:0;top:8px;font:700 13px/1 var(--kopf);color:var(--grau);
           background:var(--papier);padding:2px 6px}
/* Weiss auf --blau misst 2,6:1 und faellt durch; --blau-text traegt 4,68:1. Der Akzent
   bleibt Flaeche in den Balken, als Schriftgrund steht die dunklere Rolle (CLAUDE.md §8). */
.pv__pille{position:absolute;right:0;top:-3px;font:800 13px/1 var(--kopf);color:#fff;
           background:var(--blau-text);padding:5px 11px;border-radius:999px}
.pv__trenner{height:1px;background:var(--linie)}

/* Rhythmus-Kachel: drei Saeulen statt drei Prozentzahlen im Fliesstext, darunter zwoelf
   Monatssegmente. Die Saeulenhoehe IST der Preis — je niedriger, desto guenstiger. */
.bento__takt-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.bento__pille{flex:0 0 auto;background:var(--navy);color:#fff;font:800 13.5px/1 var(--kopf);
              padding:7px 12px;border-radius:999px}
.tk{display:flex;flex-direction:column;gap:10px;margin:12px 0 2px}
/* ⚠️ KEINE feste Hoehe. Sie stand hier auf 190 px, passend zum hoechsten Balken von 140 plus
   den zwei Beschriftungen. Beim Verkleinern auf 116 px reichte sie nicht mehr: der Inhalt
   misst Balken + zwei Zeilen + zwei Abstaende, und die Monatssegmente darunter lagen quer
   ueber "Einzeln / Vierteljährl. / Monatlich". align-items:end richtet die Saeulen auch ohne
   Hoehenangabe unten aus — dann kann die Zeile nie zu klein sein. */
.tk__saeulen{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:end}
.tk__saeule{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px}
.tk__saeule b{font:700 13.5px/1 var(--kopf);color:var(--grau)}
.tk__saeule i{display:block;position:relative;width:100%;height:var(--h);
              border-radius:9px 9px 3px 3px;background:#E4EAF0}
/* 13 px ist die Untergrenze, nicht 12,5: darunter meldet mobil-audit.mjs zu Recht, und
   auf dem Handy liest die Zeile sonst niemand.
   ⚠️ Die Beschriftungen tragen im HTML ein weiches Trennzeichen (Viertel&shy;jährl.,
   Monat&shy;lich). Auf Tablet ist eine Saeule nur rund 57 px breit — ein Wort ohne
   Trennstelle laeuft dann in die Nachbarsaeule. Kuerzen statt trennen waere die
   Alternative gewesen, aber der Entwurf schreibt die langen Formen. */
.tk__saeule span{font-size:13px;font-weight:700;color:var(--grau);text-align:center;
                 overflow-wrap:break-word}
.tk__saeule--mittel i{background:#B7DEF2}
/* Die guenstigste Saeule ist die Aussage der Kachel, also traegt nur sie die Leitfarbe. */
.tk__saeule--beste b{font-size:15px;font-weight:800;color:var(--navy)}
.tk__saeule--beste i{background:var(--navy)}
.tk__saeule--beste span{color:var(--navy);font-weight:800}
.tk__saeule em{position:absolute;left:0;right:0;top:10px;font:800 13px/1 var(--kopf);
               font-style:normal;text-align:center;color:#6ECFF5}
.tk__monate{display:flex;gap:4px}
.tk__monate span{flex:1;height:6px;border-radius:3px;background:var(--blau)}

/* Drei Schritte vor dem Rechner. Nummernkreise statt Listenmarker, Schritt drei getoent —
   er ist der, der den Preis bewegt. */
/* ⚠️ auto-fit, NICHT repeat(3,1fr): zwischen 760 und rund 1000 px ist .bento__schmal nur
   etwa 245 px breit, und drei feste Spalten liessen "Rhythmus wählen" 47,7 px aus der
   Karte laufen (von pruefe.mjs auf Tablet und Handy-quer gemeldet). Mit auto-fit bricht
   der dritte Schritt dort in eine zweite Zeile, statt die Kachel zu sprengen. */
.schritte{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));
          gap:9px;margin:14px 0 2px}
.schritte li{display:flex;flex-direction:column;gap:8px;background:var(--papier);
             border-radius:11px;padding:10px}
.schritte__nr{width:23px;height:23px;border-radius:50%;background:var(--navy);color:#fff;
              font:800 13px/1 var(--kopf);display:grid;place-items:center}
.schritte li span:last-child{font-size:13.5px;font-weight:700;line-height:1.3;color:var(--navy)}
.schritte__jetzt{background:var(--gewaehlt)}
/* Weiss auf --blau misst 2,6:1. Siehe .pv__pille — dieselbe Rolle, derselbe Grund. */
.schritte__jetzt .schritte__nr{background:var(--blau-text)}

/* Die Bildkachel traegt ihre Beschriftung als Leiste UNTER dem Motiv, nicht darauf.
   ⚠️ Erste Fassung legte sie absolut ueber das Bild. Das war schon mit solidem Grund ein
   Risiko (ein Verlauf davor hatte den Titel auf 1,00:1 gedrueckt) und beschneidet mit
   einem echten Foto immer dessen unteres Drittel. Als Leiste im Fluss gibt es diesen
   Konflikt gar nicht erst. Die Cyan-Kante oben spricht die Balken-Sprache des Zeichens. */
.bento__bild{overflow:hidden;padding:0;display:flex;flex-direction:column;min-height:250px}
.bento__bild .platzhalter{flex:1;border:0;border-radius:0;min-height:170px;align-items:flex-start;padding-top:26px}
.bento__bild figcaption{padding:22px 26px 24px;background:var(--navy);
  border-top:4px solid var(--blau);color:#fff}
.bento__bild figcaption b{display:block;font-family:var(--kopf);font-weight:800;font-size:20px;margin-bottom:5px}
.bento__bild figcaption span{font-size:15px;color:#D6E3EE}

/* ── Häufige Fragen ──────────────────────────────────────────────────────────────── */
/* Natives <details>, kein JavaScript. Die Hoehen-Animation laeuft ueber
   ::details-content + interpolate-size (Chromium); wo das fehlt, klappt es ohne
   Uebergang auf — auf und zu geht ueberall, das ist der Punkt an progressive enhancement. */
@supports (interpolate-size:allow-keywords){ :root{interpolate-size:allow-keywords} }
.fragen{display:flex;flex-direction:column;gap:11px;max-width:860px;margin:0 auto}
.frage{border-radius:14px;background:#fff;
       box-shadow:0 0 0 1px var(--linie)}
.frage summary{display:flex;align-items:center;justify-content:space-between;gap:18px;
               min-height:44px;padding:19px 22px;cursor:pointer;list-style:none;
               font:700 17px/1.35 var(--kopf);color:var(--navy)}
.frage summary::-webkit-details-marker{display:none}
.frage summary:focus-visible{outline:3px solid var(--blau);outline-offset:-3px;border-radius:14px}
/* Das Plus dreht sich zum Minus. Ein Zeichen, keine zwei Icons: sonst springt die Breite. */
.frage__zeichen{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--gewaehlt);
                display:grid;place-items:center;transition:transform .25s ease,background .2s ease}
.frage__zeichen svg{width:15px;height:15px;color:var(--blau-text)}
.frage[open] .frage__zeichen{transform:rotate(135deg);background:var(--navy)}
.frage[open] .frage__zeichen svg{color:#fff}
.frage__inhalt{padding:0 22px 21px;font-size:15.5px;line-height:1.62;color:#44556A;max-width:70ch}
.frage::details-content{block-size:0;overflow:hidden;transition:block-size .3s ease,content-visibility .3s allow-discrete;
                        content-visibility:hidden}
.frage[open]::details-content{block-size:auto;content-visibility:visible}
@media (prefers-reduced-motion:reduce){
  .frage__zeichen,.frage::details-content{transition:none}
  /* Der Kopf springt dann zwischen gross und klein statt zu gleiten. Die Groessen
     aendern sich weiterhin — abgeschaltet wird die Bewegung, nicht die Funktion. */
  .nav .bahn,.marke svg,.marke__wort{transition:none}
}

/* ── Rechtsseiten ────────────────────────────────────────────────────────────────── */
/* Beschreibungsliste statt Tabelle: das IST eine Zuordnung Begriff → Angabe, und ein
   Screenreader liest sie als solche vor. Auf schmalen Geraeten untereinander. */
.rechtsliste{display:grid;gap:0;margin-top:8px}
.rechtszeile{display:grid;grid-template-columns:1fr;gap:2px;padding:14px 0;
             border-bottom:1px solid var(--linie)}
.rechtszeile:first-child{border-top:1px solid var(--linie)}
.rechtszeile dt{font-weight:600;font-size:14.5px;color:var(--navy)}
.rechtszeile dd{font-size:15.5px;line-height:1.6;color:#44556A}
.rechtszeile__norm{display:block;font-weight:400;font-size:13px;color:var(--grau);margin-top:2px}
@media (min-width:680px){
  .rechtszeile{grid-template-columns:minmax(180px,32%) 1fr;gap:24px;align-items:baseline}
}
.rechtstext{font-size:15.5px;line-height:1.65;color:#44556A;max-width:70ch;margin-top:10px}
/* ⚠️ Telefon und E-Mail im Impressum sind die meistgetippten Links der ganzen Seite und
   massen 130x21 bzw. 160x21 px. Nur bei grobem Zeiger aufziehen — auf Desktop-Textlinks
   angewandt erzeugt die 44-px-Regel nur Rauschen. Die negative Margin haelt den
   Zeilenabstand, damit die Liste nicht auseinanderfaellt. */
@media (pointer: coarse){
  .marke__sub{font-size:13px;letter-spacing:.015em}
  .lst-bild__label{font-size:13px}
  .rechtszeile dd a,.rechtstext a,.rechtshinweis a{display:inline-flex;align-items:center;min-height:44px;margin:-11px 0}
}

/* ── Lücken-Markierung ───────────────────────────────────────────────────────────── */
/* Eine noch offene Angabe. Bewusst KEIN Link und keine erfundene Nummer: was hier steht,
   soll niemand anrufen koennen. Sichtbar unfertig ist besser als plausibel falsch. */
/* Gemessen: #8296AB auf Weiss sind 3,04:1, --grau sind 5,48:1.
   ⚠️ Im deaktivierten Knopf stand die Luecke zuvor in DERSELBEN Farbe wie dessen
   Hintergrund — Verhaeltnis 1,00:1, also unsichtbar. Deshalb dort eine eigene Regel. */
.luecke{font-family:ui-monospace,Consolas,monospace;font-size:.92em;color:var(--grau);
        border:1px dashed currentColor;border-radius:4px;padding:1px 6px;white-space:nowrap}
.dunkel .luecke,.fuss .luecke,.oben .luecke,.summe .luecke{color:#B9CBDD}
/* Im Knopf immer weiss: der deaktivierte Zustand faerbt den Grund grau, und eine graue
   Luecke darauf ergab 1,00:1 — also unsichtbar. */
.knopf .luecke{color:#fff}

/* ── Schmale Geräte ──────────────────────────────────────────────────────────────── */
/* Die drei Handoff-Abschnitte brechen bei 1100 und 680 px, nicht bei den 900/640 der uebrigen
   Seite: sie haben feste Spalten (520 px Text, 420 px Kopf, 340 px Knopfsaeule), und die
   klemmen frueher als ein Fliesslayout. Eine Zahl, die aus dem Inhalt kommt, ist besser als
   eine, die aus Einheitlichkeit kommt. */
@media (max-width:1100px){
  .lst-kopf{grid-template-columns:1fr;gap:36px}
  .lst-bild{min-height:280px}
  .mehr__raster{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  .weiche__schalter{grid-template-columns:1fr}
  .lk > summary,.lk--fest{grid-template-columns:56px 1fr;gap:0 20px}
  .lk__zeichen{width:56px;height:56px}
  .lk__zeichen svg{width:40px;height:40px}
  .lk__titel{font-size:21px}
  /* Der Aufklapp-Knopf rutscht unter den Text: in zwei Spalten waere die dritte Spalte so
     schmal, dass "Was dazugehoert" umbricht und die Zeile 30 px hoeher wuerde. */
  .lk__schalter{grid-column:2;grid-row:4;margin-top:16px}
  .lk__liste{padding-left:76px}
  .mehr__raster{grid-template-columns:1fr}
  .ablauf__liste{grid-template-columns:1fr}
}
@media (max-width:900px){
  .hero .bahn{grid-template-columns:1fr}
  .rechner{grid-template-columns:1fr}
  .summe{position:static}
  .fuss__raster{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  /* Zeiten und Antwortzusage stehen weiterhin im Footer und im Inhalt. Am Handy
     beginnt die Seite mit Marke und Angebot statt mit drei Kopfzeilen. */
  .oben{display:none}
  .nav,.nav--klein{--nav-pad:12px;--nav-zeichen:36px;--nav-wort:24px}
  .nav .bahn{position:relative;gap:10px}
  .marke{gap:8px}
  .marke__sub{font-size:13px;letter-spacing:.015em}
  .nav__klapp{margin-left:auto;flex:none}
  .nav__auf{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 4px;cursor:pointer;
            list-style:none;font:650 15px/1 var(--kopf);color:var(--navy)}
  .nav__auf::-webkit-details-marker{display:none}
  .nav__symbol{position:relative;width:20px;height:16px}
  .nav__symbol::before,.nav__symbol::after{content:"";position:absolute;left:0;width:20px;height:2px;background:currentColor;top:3px}
  .nav__symbol::after{top:11px}
  .nav__klapp[open] .nav__symbol::before{transform:translateY(4px) rotate(45deg)}
  .nav__klapp[open] .nav__symbol::after{transform:translateY(-4px) rotate(-45deg)}
  .nav__auf:hover{color:var(--blau-text)}
  .nav__links{display:none;position:absolute;top:100%;left:18px;right:18px;
    grid-template-columns:1fr 1fr;align-items:center;gap:0 16px;padding:12px 20px 20px;background:#fff;
    border:1px solid var(--linie);border-radius:0 0 8px 8px;box-shadow:0 12px 24px #16375E14;
    max-height:calc(100dvh - 90px);overflow-y:auto}
  .nav__klapp[open] .nav__links{display:grid}
  .nav__links a{border:0;justify-content:flex-start;padding:0;min-height:48px;border-radius:0;font-size:15px}
  .nav__links .nav__wa,.nav__links .knopf{margin-top:12px}
  .nav__links .knopf{justify-content:center;border-radius:5px}
  .nav__lang{display:none}.nav__kurz{display:inline}
}
@media (max-width:640px){
  /* ⚠️ Hier stand bis zum 18.09.2026 die eigene mobile KURZFASSUNG der alten Startseite:
     .hero__text wurde ausgeblendet und .hero__mobil eingeblendet, dazu .mobil-text und
     .mobil-mehr. Dieses Markup gibt es seit dem Relaunch „Briede" nicht mehr — die Seite ist
     durchgehend responsiv. Die Regeln sind mit ihm raus; .hero__text{display:none} hatte den
     Vorspann im Hero auf JEDER Seite am Handy verschluckt. */
  .fuss__raster{grid-template-columns:1fr}
  section{padding:38px 0}
  .hero{min-height:min(78vh,640px)}
  .hero .bahn{padding-top:calc(var(--nav-hoehe,68px) + 40px);padding-bottom:32px}
  .hero__ort{letter-spacing:.08em;font-size:13px;line-height:1.35;padding:8px 12px}
  .hero h1{font-size:32px;line-height:1.12;margin:14px 0 16px}
  .hero .knopfreihe{display:grid;gap:10px}
  .hero .knopf{width:100%;min-height:52px}
  .fakten{margin-top:24px;padding-top:20px;gap:16px 0}
  .fakt b{font-size:20px}
  /* Noch fehlende Fotomotive kosten am Handy keinen Bildschirm. Sobald echte
     Bilder eingesetzt werden, erscheinen die vorgesehenen Bildflächen wieder. */
  .bildstapel:not(:has(img,video)),.lst-bild:not(:has(img,video)),
  .bento__bild .platzhalter:not(:has(img,video)){display:none}
  .lst-kopf{gap:24px}
  .lk > summary,.lk--fest{grid-template-columns:40px 1fr;gap:0 12px}
  .lk__zeichen{width:40px;height:40px}.lk__zeichen svg{width:30px;height:30px}
  .lk__liste{padding-left:52px}.lk__schalter{margin-top:10px}
  .bento .karte{padding:22px;gap:16px}
  .bento .pv,.bento .zb,.bento .tk,.bento .schritte,.bento__achse,.bento .gk{display:none}
  .bento__bild figcaption{padding:22px}
  .bento__bild.karte{padding:0}
  .bento__zeit .bento__zahl{font-size:36px}
  .stelle__art,.platzhalter,.fuss h3,.fuss__credit-k{font-size:13px}
  .fuss__credit-k{letter-spacing:.12em}
  .fuss__raster{gap:26px}
  .fuss__unten{margin-top:26px;padding-bottom:12px}
  .termin-zeitfenster{font-size:14px}
  .abschnittkopf{margin-bottom:26px}
  .r2,.r3,.r4{grid-template-columns:minmax(0,1fr)}
  /* Echte Stimmen bleiben vollständig erreichbar, ohne drei Karten untereinander
     vor den Kontaktweg zu stellen. Native horizontale Liste, keine JS-Laufzeit. */
  #gbewertungen{display:flex;align-items:flex-start;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;gap:14px;padding:2px 2px 14px}
  #gbewertungen > .zitat{flex:0 0 90%;scroll-snap-align:start}
  #gbewertungen:focus-visible{outline:2px solid var(--blau-text);outline-offset:4px}
  .gtafel{padding:22px}
  #karriere-start .stelle{padding:18px 20px}
  #karriere-start .stelle__kopf{margin-bottom:10px}
  #karriere-start .stelle__nr,#karriere-start .stelle p{display:none}
  #karriere-start .stelle__tat{margin-top:6px}
  .startseite h2{font-size:27px;line-height:1.15}
  .startseite .abschnittkopf .blei{display:none}
  .hero__gwert{align-items:center;padding:4px 0 0}
  .hero__gwert .fakt__wert{justify-content:center}
  .fenster-einstieg .eyebrow,.fenster-einstieg .blei,.fenster-einstieg .schritte,
  .fenster-einstieg .ablaufliste,.fenster-einstieg .fe2__link{display:none}
  .fe2__raster{grid-template-columns:1fr}
  .fenster-einstieg h2{max-width:14ch}
  .lst-kopf__text .blei,.weiche__frage,.weiche__sub,.weiche__hinweis,.weiche__punkt,
  .lst-intro,.segmente,.lst-tat{display:none}
  .weiche{margin-top:24px}
  .weiche__schalter{grid-template-columns:1fr 1fr}
  .weiche__opt{padding:12px;min-height:44px}.weiche__opt b{font-size:15px}
  .karten{margin-top:24px}
  .lk > summary,.lk--fest{grid-template-columns:28px 1fr 24px;gap:0 12px;padding:16px 0;align-items:center}
  .lk__zeichen{grid-row:1;width:28px;height:28px;background:none}
  .lk__zeichen svg{width:24px;height:24px}
  .lk__titel{font-size:18px}
  .lk__schalter{grid-column:3;grid-row:1;margin:0;gap:0}
  .lk__mehr-text{display:none}
  .lk__plus{width:24px;height:24px;border:0}
  .lk:not([open]) .lk__text,.lk:not([open]) .lk__meta{display:none}
  .lk--fest .lk__text{display:block}
  .lk__text{font-size:15px}
  .lk__liste{padding:12px 0 20px 40px;font-size:15px}
  .mehr{margin-top:16px}.mehr__kopf{display:none}
  .ergebnisse .vgl:nth-child(n+2){display:none}
  .video-mehr{margin-top:16px;border-top:1px solid var(--linie)}
  .objektvideo{margin-top:0;padding-top:12px;border:0}
  .gtafel{display:block;margin-top:16px;padding:0;border:0;border-radius:0;box-shadow:none;background:none}
  .gtafel__wert,.gtafel__text > p:first-child{display:none}
  .gtafel__text > p{margin-top:0}
  .gtafel .knopf{width:100%;border:0;padding:12px 0;justify-content:space-between;background:none;
    border-radius:0;color:var(--navy);border-bottom:1px solid var(--linie)}
  .gtafel .knopf::after{content:"↗";font-size:20px}
  .gtafel .knopf:hover{color:var(--blau-text);border-color:var(--blau-text)}
  #gbewertungen .zitat .zitat__wer--google{margin-top:0}
  .fragen-start .abschnittkopf{text-align:left}
  .fragen{gap:0}
  .fragen-mehr .frage + .frage{margin-top:0}
  .frage{border-radius:0;box-shadow:none;border:0;border-bottom:1px solid var(--linie);background:none}
  .frage summary{padding:16px 0;font-size:16px;min-height:60px}
  .frage__inhalt{padding:0 0 20px}
  .fragen-mehr{border-bottom:1px solid var(--linie)}
  .schluss-start .schlusskarte:first-child{display:none}
  .schluss-start .schlusskarte{padding:0;border:0;box-shadow:none;background:none;gap:16px}
  .schluss-start .schlusskarte .eyebrow{display:none}
  .schluss-start .schlusskarte p{max-width:36ch}
  .schluss-start .knopf{width:100%}
}
@media (max-width:900px){
  /* Keine zweite Navigation im Footer. Kontakt und Pflichtlinks bleiben direkt sichtbar. */
  .fuss{padding-top:12px}
  .fuss__betrieb,.fuss__wege,.fuss__kontakt h3,.fuss__kontakt li:nth-child(n+3),.fuss__note{display:none}
  .fuss__raster{display:block}
  .fuss__kontakt ul{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
  .fuss__kontakt ul a{min-height:44px;font-weight:600}
  .fuss__lang,.fuss__zeiten{display:none}.fuss__kurz{display:inline}
  .fuss__erreichbar{display:block}
  .fuss__erreichbar summary{display:flex;align-items:center;justify-content:space-between;min-height:44px;
    cursor:pointer;list-style:none;font-size:13px}
  .fuss__erreichbar summary::-webkit-details-marker{display:none}
  .fuss__erreichbar summary:hover{color:#fff}
  .fuss__erreichbar summary > span{font-size:20px}
  .fuss__erreichbar[open] summary > span{transform:rotate(45deg)}
  .fuss__erreichbar p{padding:0 0 12px;font-size:13px}
  .fuss__unten{margin-top:4px;padding:4px 0;gap:0 8px;font-size:13px}
  .fuss__unten nav{gap:8px}
  .fuss__unten nav a{padding:0 4px;font-size:13px}
  .fuss__credit{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 0 8px;text-align:left}
  .fuss .fuss__credit > a{display:inline-flex;gap:5px;align-items:center;padding:0;min-height:44px}
  .fuss__credit-k{display:inline;font-size:13px;letter-spacing:0;text-transform:none}
  .fuss__credit-m{display:inline;font-size:14px;margin:0}
  .fuss__software{margin-top:0;font-size:13px}
  .fuss__software a{padding:0 4px}
}
@media (pointer:coarse){
  .fuss a,.oben a{min-height:44px;display:inline-flex;align-items:center}
  .summe__label,.summe p,.stelle__art,.platzhalter,.fuss h3,.fuss__credit-k{font-size:13px}
}
@media print{ .nav,.oben,.knopfreihe,.summe .knopf{display:none} }

/* ── Schluss-Block und Fuss (Neuentwurf, 17.09.2026) ─────────────────────────────────
   Uebernommen aus neu.css. Eigene Klassennamen (fuss2__*), damit die alten Mobilregeln fuer
   den vierspaltigen Fuss hier nicht greifen. Steht bewusst am ENDE des Stylesheets. */
.schluss-neu{padding:clamp(28px,4vw,48px) 0}
.split{display:grid;grid-template-columns:1fr 1fr;border-radius:22px;overflow:hidden;background:var(--navy);min-height:440px}
.split__bild{position:relative;min-height:300px}
.split__bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split__text{padding:clamp(32px,4.5vw,64px);color:#D6E3EE;display:flex;flex-direction:column;justify-content:center}
.split .eyebrow{color:#6ECFF5}
.split h2{color:#fff;margin:12px 0 16px}
.split .blei{color:#D6E3EE}
.split__hinweis{font-size:13.5px;color:#B9CBDD;margin-top:14px}
.knopf--glas{background:rgba(22,55,94,.32);color:#fff;border-color:rgba(255,255,255,.6);backdrop-filter:blur(6px)}
.knopf--glas:hover{background:rgba(22,55,94,.6);border-color:#fff;color:#fff}
.fuss.fuss--neu{padding:clamp(48px,6vw,72px) 0 24px}
.fuss2__kopf{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding-bottom:30px;border-bottom:1px solid rgba(255,255,255,.2)}
.fuss--neu .fuss__marke{margin:0}
.fuss--neu .fuss__marke svg{width:40px;height:40px}
.fuss--neu .fuss__marke .marke__wort{font-size:26px}
.fuss2__claim{font-family:var(--kopf);font-weight:800;font-size:clamp(26px,3.2vw,42px);color:#fff;letter-spacing:-.025em;line-height:1}
.fuss2__unten{margin-top:28px;border-top:1px solid rgba(255,255,255,.2);padding-top:18px;display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap;font-size:13.5px}
.fuss2__unten nav{display:flex;gap:6px;flex-wrap:wrap}
.fuss--neu .fuss2__unten a{color:#B9CBDD;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;padding:0 8px;font-size:13.5px}
.fuss--neu .fuss2__unten a:hover{color:#fff}
@media (max-width:900px){
  .split{grid-template-columns:1fr}
  .split__bild{min-height:260px}
  .fuss2__kopf{align-items:flex-start}
}
@media (max-width:640px){
  .split .knopfreihe{display:grid;gap:10px}
  .split .knopf{width:100%}
}

/* ── Politur 18.09.2026: Fenster-Band, Bewertungen, Fuss ─────────────────────────
   Weniger Kaesten, mehr Linie. Die drei Chips im Fenster-Band werden eine Schrittliste
   mit Haarlinien, die Bewertungs-Tafel wandert als Kennzahl in den Abschnittkopf, der
   Fuss bekommt ein festes Raster statt Flex-Luecken. */
.fe2 .fe2__raster{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(36px,6vw,110px);align-items:center}
.fe2 .blei{color:#B9CBDD;max-width:52ch}
.fe2__knoepfe{align-items:center;gap:12px 28px}
.fe2__link{display:inline-flex;align-items:center;min-height:44px;color:#fff;text-decoration:underline;text-underline-offset:5px;text-decoration-color:rgba(255,255,255,.4);text-decoration-thickness:1px;font-weight:600;font-size:15.5px;transition:text-decoration-color .15s}
.fe2__link:hover{text-decoration-color:#fff}
.ablaufliste{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.16)}
.ablaufliste li{display:grid;grid-template-columns:48px 1fr;gap:12px;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.16);align-items:start}
.ablaufliste__nr{font:800 13px/1 var(--kopf);letter-spacing:.14em;color:#6ECFF5;padding-top:5px}
.ablaufliste h3{color:#fff;font-size:18px;margin:0 0 5px;letter-spacing:-.005em}
.ablaufliste p{font-size:15px;color:#B9CBDD;margin:0;line-height:1.5}

.bew-kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:20px 40px;flex-wrap:wrap;margin-bottom:30px}
.bew-kopf .abschnittkopf{margin-bottom:0}
.bew-kopf .abschnittkopf h2{margin-bottom:0}
.bew-wert{display:inline-flex;align-items:center;gap:14px;padding-bottom:6px}
.bew-wert .gwert__text b{font-size:40px;line-height:1;letter-spacing:-.02em}
.bew-wert__rechts{display:flex;flex-direction:column;gap:4px;font-size:14px;color:var(--grau);line-height:1.2}
.bew-wert__rechts .gwert__sterne svg{width:16px;height:16px}
.bew-wert__sub{color:var(--navy);font-weight:700}
.bew-neu .karte.zitat{background:var(--papier);box-shadow:none;border-radius:16px;padding:30px 30px 24px}
.bew-neu .karte.zitat:hover{box-shadow:none}
.bew-neu .zitat > p{font-size:17px;line-height:1.6;color:var(--tinte);margin-bottom:22px}
.bew-neu .zitat__sterne{margin-bottom:16px}
.bew-neu .zitat__sterne svg{width:15px;height:15px}
.bew-neu .zitat .zitat__wer--google{border-top-color:rgba(22,55,94,.1);font-size:14px}
.bew-neu .zitat__initial{background:#fff;box-shadow:0 0 0 1px var(--linie)}
.bew-neu #gbewertungen{margin-bottom:0}
.bew-fuss{margin-top:26px;padding-top:20px;border-top:1px solid var(--linie);display:flex;justify-content:space-between;align-items:center;gap:12px 32px;flex-wrap:wrap}
.bew-fuss p{font-size:14.5px;color:var(--grau);margin:0}
.bew-fuss__link{display:inline-flex;align-items:center;min-height:44px;font-weight:700;font-size:15px;color:var(--navy);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;text-decoration-color:var(--linie-kraeftig);white-space:nowrap;transition:color .15s,text-decoration-color .15s}
.bew-fuss__link::after{content:"→";margin-left:8px;transition:transform .15s}
.bew-fuss__link:hover{color:var(--blau-text);text-decoration-color:var(--blau-text)}
.bew-fuss__link:hover::after{transform:translateX(3px)}

.fuss2__claim{font-size:clamp(22px,2.4vw,32px);font-weight:700;letter-spacing:-.02em;color:#D6E3EE}
.fuss2__unten{margin-top:0;padding-top:20px}
.fuss2__unten nav{gap:22px}
.fuss--neu .fuss2__unten a{padding:0}
@media (max-width:900px){
  .bew-kopf .bew-wert{display:none}
  .bew-fuss{margin-top:16px;padding-top:0;border:0}
  .bew-fuss p{display:none}
  .bew-fuss__link{width:100%;justify-content:space-between;text-decoration:none;padding:12px 0;border-bottom:1px solid var(--linie)}
}

/* Tablet quer (901–1060 px): Leiste wird eng, nichts darf umbrechen. */
.nav__links a,.nav__wa{white-space:nowrap}
@media (min-width:901px) and (max-width:1060px){
  .nav__links{gap:2px}
  .nav__links a,.nav__wa{padding:0 9px;font-size:14.5px}
  .nav__links a.knopf{padding:10px 14px !important}
}

/* ═══ GE+ES — Gestaltungsschicht der Website (Stand 19.09.2026) ════════════════════════
   Aufsatz auf website.css (Tokens, Grundlayout, Rechner-/Termin-Mechanik, Footer).
   Reihenfolge: Schrift & Basis → Leiste → Hero → Startseiten-Bloecke → Unterseiten → Knopfsystem → Mobil.

   ⚠️ Herkunft: portiert aus dem Design-Handoff `design_handoff_briede_relaunch` (18.09.2026).
   Datei und Klassen heissen seit 19.09.2026 nach dem Betrieb (gees), nicht nach der Vorlage —
   die Vorlage ist Herkunft, nicht Marke. */

/* ── Schrift: Manrope als Hausschrift, Merriweather als Serif fuer grosse Textbloecke ── */
:root{--kopf:'Manrope',Arial,sans-serif;--text:'Manrope',Arial,sans-serif;--serif:'Merriweather',Georgia,serif}
body{font-family:var(--text)}
h1,h2,h3,.knopf,.marke__wort{font-family:var(--kopf)}

/* ── Leiste: Logo links, Links mittig, rechts Knopf + WhatsApp-Pille; durchsichtig ueber dem Hero ── */
.nav--gees{--nav-pad:16px;--nav-zeichen:44px;--nav-wort:24px;background:#F6F8FA;border-bottom:1px solid var(--linie)}
[data-nav="klein"].nav--gees{--nav-pad:10px;--nav-zeichen:36px;--nav-wort:20px}
.nav--gees .bahn{gap:28px}
.nav--gees .nav__links{gap:6px;flex:1;justify-content:center}
.nav--gees .nav__links a{font-weight:500;font-size:16px;color:var(--tinte);padding:0 14px}
.nav--gees .nav__links a:hover{background:none;color:var(--navy)}
.nav--gees .nav__rechts{display:flex;align-items:center;gap:10px;margin-left:auto}
.nav--gees .nav__links a.nav__pille{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.nav--gees .nav__links a.nav__insta{display:inline-flex;align-items:center;justify-content:center;width:46px;min-width:46px;min-height:46px;padding:0;border:1.5px solid var(--navy);border-radius:50%;color:var(--navy)}
.nav--gees .nav__links a.nav__insta:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.nav__insta svg{width:20px;height:20px;flex:0 0 auto}
.nav__insta span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* ⚠️ Durchsichtig heisst hier wirklich durchsichtig (Nutzerentscheid 19.09.2026). Bis zum
   18.09.2026 trug diese Regel weiter unten einen eigenen Navy-Schleier (.88 → .68). Der war
   kontrastseitig richtig, las sich aber als eigener dunkler Balken ueber dem Bild — genau
   das, was der Betrieb nicht wollte. Der Schleier ist nicht weg, sondern in den HERO
   gewandert (hero--gees::before, unten): dasselbe Navy, aber als Teil des Bildverlaufs statt
   als Kasten.
   ⚠️ Die Messung von damals gilt weiter und ist der Grund fuer den staerkeren Hero-Verlauf:
   ohne jede Abdunklung stand weisse Schrift auf Karriere und Fenster-Rechner bei 1,09:1.
   Wer den Hero-Verlauf anfasst, misst die Leiste neu — pruefe.mjs misst sie am Bild nach. */
.nav--durchsichtig.nav--glas:not(.nav--klein){background:transparent;border-bottom-color:transparent}
.nav--durchsichtig.nav--glas.nav--klein{background:#fff}
@media (min-width:901px){
  .nav--durchsichtig.nav--glas:not(.nav--klein) .nav__links a{color:#fff}
  .nav--durchsichtig.nav--glas:not(.nav--klein) .nav__links a:hover{color:#B9E6F7}
}
/* ⚠️ Die Unterzeile der Wortmarke steht ueber dem Foto WEISS, nicht hellblau. Gemessen am
   19.09.2026 am Bild: mit #B9E6F7 waren es auf /termin/ 4,03:1 und auf /karriere/ 3,88:1 —
   unter den 4,5:1, die 8,5-px-Schrift braucht. Weiss bringt dieselben Stellen auf 5,2 bis
   5,4:1. Die Rangordnung zur Wortmarke traegt die Groesse, nicht die Farbe. */
.nav--durchsichtig.nav--glas:not(.nav--klein) .marke__sub{color:#fff}
@media (max-width:1100px){.nav--gees .nav__links a.nav__pille--wa span{display:none}.nav--gees .nav__links a.nav__pille--wa{padding:0 14px}.nav--gees .nav__links a{padding:0 10px}.nav--gees .bahn{gap:16px}}
@media (max-width:1060px) and (min-width:901px){.nav--gees .nav__links a{padding:0 8px;font-size:15px}.nav--gees .nav__links a.knopf{padding:0 16px}.nav--gees .bahn{gap:14px}}
@media (max-width:900px){.nav--gees .nav__links{flex:none;justify-content:stretch}.nav--gees .nav__rechts{margin-left:0;flex-direction:column;align-items:stretch}.nav--gees .nav__links a.nav__pille--wa span{display:inline}}

/* ── Hero: Foto voll, Text unten links, Serif-Headline ── */
.hero--gees{margin-top:calc(-1 * var(--nav-hoehe,90px));align-items:flex-end;min-height:clamp(600px,52vw,1040px)}
/* Start-Hero hoeher (28.09.2026): das Teamfoto ist eine hohe Gruppe (Mitarbeiterin auf dem Dach,
   darunter die Stehenden). Bei 1,92 : 1 (52vw) stand das Gesicht des linken Kollegen hinter der
   Ueberschrift, egal wie zugeschnitten; erst ab etwa 1,6 : 1 passen alle Gesichter zwischen
   Leistenverlauf und Textblock.
   01.10.2026: 62vw allein liess in einem 1190 x 793 px grossen Fenster 55 px des hellen
   Folgeabschnitts sehen. Der Hero ist deshalb mindestens so hoch wie das sichtbare Geraet;
   der bisherige Bildbedarf bleibt die zweite Untergrenze und darf auf flachen Fenstern scrollen. */
@media (min-width:641px){.hero--gees:not(.hero--klein){min-height:max(100svh,clamp(600px,62vw,1040px))}}
.hero--gees .bahn{padding-top:calc(var(--nav-hoehe,90px) + 48px);padding-bottom:clamp(48px,6vw,88px)}
.hero--gees .hero__bild{object-position:var(--fokus,center 50%)}
/* Bildflaechen mit zwei Zuschnitten (mache-webbilder.py, 28.09.2026): das <source> im <picture>
   tauscht die Datei, diese Regeln tauschen den Fokus. ⚠️ Die Bedingungen muessen exakt denen in
   baue-website.mjs entsprechen (HOCHKANT, SCHMAL, GALERIE_SCHMAL), sonst sitzt der Fokus des
   einen Zuschnitts auf dem anderen Bild. */
.hero picture,.split__bild picture,.konzept__bild picture,.galerie picture{display:contents}
@media (max-width:640px){.hero--gees .hero__bild{object-position:var(--fokus-schmal,var(--fokus,center 50%))}}
.split__bild img{object-position:var(--fokus,50% 50%)}
@media (max-width:900px){.split__bild img{object-position:var(--fokus-schmal,var(--fokus,50% 50%))}}
@media (min-width:901px){.hero--gees .hero__bild{width:100%}.hero--gees h1{max-width:none}.hero--gees .blei{max-width:58ch}}
/* Oberer Verlauf traegt jetzt auch die Leiste: kraeftig am Rand, vollstaendig weg bei 34 %
   der Herohoehe. Werte am hellsten Pixel des Leistenstreifens gemessen, nicht geschaetzt. */
.hero--gees::before{background:linear-gradient(to bottom,rgba(15,41,70,.9) 0%,rgba(15,41,70,.78) 9%,rgba(15,41,70,.36) 20%,rgba(15,41,70,0) 34%),linear-gradient(to top,rgba(15,41,70,.85) 0%,rgba(15,41,70,.45) 45%,rgba(15,41,70,0) 80%)}
.hero--gees h1{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;line-height:1.08;font-size:clamp(34px,4.4vw,64px)}
.hero--gees .hero__text{font-size:clamp(16px,1.3vw,18px);max-width:58ch}

/* ── Konzept: Text links, Foto rechts, darunter vier Kacheln ── */
.konzept{background:var(--papier);padding:clamp(56px,7vw,96px) 0}
.konzept__raster{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:center;margin-bottom:clamp(48px,6vw,80px)}
.konzept h2{font-family:var(--serif);font-weight:400;color:var(--navy);font-size:clamp(30px,3.6vw,50px);letter-spacing:-.01em;line-height:1.14;margin:0 0 22px}
.konzept__text p{font-size:clamp(16px,1.3vw,18px);line-height:1.55;color:var(--tinte);max-width:56ch;margin:0 0 18px}
.konzept__text > p:first-of-type{font-family:var(--serif);font-weight:300;font-size:clamp(17px,1.35vw,19px);line-height:1.65}
.konzept__text p.konzept__leise{font-size:15.5px;color:var(--grau);margin:0}
.konzept__bild{margin:0;border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:#fff}
.konzept__bild img{width:100%;height:100%;object-fit:cover;object-position:var(--fokus,50% 45%);display:block}
/* Kacheln: ein Grund, ein Symbolraster, Kennzahl ueber der Zeile. Kein margin-auto mehr —
   der Inhalt steht oben, das Raster gleicht die Hoehen aus (grid-auto-rows:1fr). */
.kacheln4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:1fr;gap:20px}
.kachel4{display:flex;flex-direction:column;border-radius:14px;padding:28px 26px 30px;background:var(--navy);color:#fff;border:1px solid rgba(255,255,255,.14)}
.kachel4__icon{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;color:#6ECFF5;
  background:rgba(110,207,245,.12);border:1px solid rgba(110,207,245,.3);margin-bottom:22px}
.kachel4__wert{font-family:var(--kopf);font-weight:700;font-size:clamp(30px,2.6vw,38px);line-height:1;letter-spacing:-.03em;color:#fff;margin-bottom:10px;font-variant-numeric:tabular-nums}
.kachel4__wert a{color:#fff;text-decoration:none}
.kachel4__wert a:hover{color:#6ECFF5}
.kachel4__wert b{font-weight:700}
.kachel4 h3{color:#fff;font-weight:600;font-size:17px;letter-spacing:-.01em;line-height:1.25;margin:0 0 10px}
.kachel4 h3 a{color:#fff;text-decoration:none}
.kachel4 h3 a:hover{color:#B9E6F7}
/* ⚠️ #B9CBDD auf Navy sind 7,33:1 — gemessen, nicht geschaetzt. Gegen den frueheren
   stahlblauen Grund (#4E6B8C) waeren es 2,03:1 gewesen; die Farbe haengt an dem einen
   Grund oben und darf nicht ohne neue Messung dorthin zurueck. */
.kachel4 p{color:#B9CBDD;font-weight:500;font-size:15px;line-height:1.55;margin:0}
.kachel4 p a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.kachel4 p a:hover{color:#6ECFF5}
@media (max-width:1100px){.kacheln4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.konzept__raster{grid-template-columns:1fr}}

/* ── Erster CTA: Teamfoto links, Navy-Tafel rechts ── */
.cta-termin{background:var(--papier);padding:0 0 clamp(56px,7vw,96px)}
.split--eckig{border-radius:14px;min-height:520px}
.split--eckig .split__text{padding:clamp(36px,5vw,72px)}
.split--eckig h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.6vw,50px);letter-spacing:-.01em;line-height:1.1;margin:0 0 18px;max-width:14ch}
.cta-termin__lead{font-size:clamp(16px,1.25vw,18px);color:#D6E3EE;line-height:1.55;max-width:44ch;margin:0 0 30px}
.cta-termin__zeiten{display:flex;gap:16px 48px;flex-wrap:wrap;margin:0}
.cta-termin__zeiten dt{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#8FA9C2;font-weight:600;margin-bottom:6px}
.cta-termin__zeiten dd{margin:0;font-size:17px;line-height:1.45;color:#fff;font-weight:500}
@media (max-width:900px){.split--eckig h2{max-width:none}}

/* ── Galerie auf Weiss: grosses Bild, darunter Laufband in Bahnbreite ── */
.galerie--hell{background:#fff;padding:clamp(56px,7vw,96px) 0;overflow:hidden}
.galerie__kopf{max-width:70ch;margin-bottom:clamp(32px,4vw,48px)}
.galerie__kopf h2{font-family:var(--serif);font-weight:400;color:var(--navy);font-size:clamp(28px,3.4vw,44px);letter-spacing:-.01em;line-height:1.12;margin:12px 0 14px}
.galerie__kopf .blei{color:#3A4B5E;margin:0}
.galerie__gross{margin:0;border-radius:14px;overflow:hidden;background:var(--papier);aspect-ratio:2.3/1}
.galerie__gross img{width:100%;height:100%;object-fit:cover;object-position:var(--fokus,center 40%);display:block}
@media (max-width:640px){.galerie__gross img{object-position:var(--fokus-schmal,var(--fokus,center 40%))}}
.laufband{margin-top:16px;overflow:hidden;border-radius:14px}
.laufband__spur{display:flex;gap:16px;width:max-content;animation:laufband 60s linear infinite}
.laufband:hover .laufband__spur{animation-play-state:paused}
.laufband__spur figure{margin:0;flex:0 0 auto;width:clamp(260px,32vw,580px);aspect-ratio:3/2;border-radius:14px;overflow:hidden;background:var(--papier)}
.laufband__spur img{width:100%;height:100%;object-fit:cover;object-position:var(--fokus,50% 50%);display:block}
@keyframes laufband{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 8px))}}
@media (prefers-reduced-motion:reduce){.laufband__spur{animation:none}.laufband{overflow-x:auto}}

/* ── Leistungen: Kopfzeile mit Umschalter, vier Karten ── */
.leistungen3{background:#DCE8F0;padding:clamp(56px,7vw,96px) 0}
.leistungen3__raster{display:grid;grid-template-columns:1fr auto;gap:clamp(28px,4vw,64px);align-items:end;margin-bottom:clamp(32px,4vw,48px)}
.leistungen3 h2{font-family:var(--serif);font-weight:400;color:var(--navy);font-size:clamp(36px,4.6vw,66px);letter-spacing:-.015em;line-height:1.05;margin:0 0 20px}
.leistungen3__kopf p{font-size:clamp(16px,1.25vw,17.5px);line-height:1.55;color:var(--tinte);margin:0;max-width:60ch}
.leistungen3__steuer{display:flex;flex-direction:column;gap:12px;width:320px}
.leistungen3__steuer .knopf{width:100%}
.umschalter{position:relative;display:grid;grid-template-columns:1fr 1fr;background:#fff;border-radius:999px;padding:4px;width:100%}
.umschalter__ring{position:absolute;top:-3px;bottom:-3px;left:0;width:50%;pointer-events:none;overflow:visible;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.umschalter__ring path{fill:none;stroke:var(--blau);stroke-width:2.5;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;animation:ringGewerbe .9s cubic-bezier(.4,0,.2,1) .1s forwards}
.leistungen3:has(#seg-privat:checked) .umschalter__ring{transform:translateX(100%)}
.leistungen3:has(#seg-privat:checked) .umschalter__ring path{animation-name:ringPrivat}
@keyframes ringGewerbe{to{stroke-dashoffset:0}}
@keyframes ringPrivat{to{stroke-dashoffset:0}}
.umschalter input{position:absolute;opacity:0;pointer-events:none}
.umschalter label{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;min-height:42px;border-radius:999px;font-weight:500;font-size:15px;color:var(--grau);cursor:pointer;user-select:none;transition:color .25s ease}
.umschalter label:hover{color:var(--navy)}
.umschalter input:checked + label{color:var(--navy);font-weight:700}
.umschalter input:focus-visible + label{outline:3px solid var(--blau);outline-offset:2px}
.leistungen3__karten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:1fr;gap:20px}
.lk3{background:#fff;border-radius:14px;padding:28px 26px 26px;display:flex;flex-direction:column;min-height:300px;animation:lk3ein .35s ease both}
@keyframes lk3ein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.lk3__tag{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--blau-text);font-weight:700;margin-bottom:14px}
/* ⚠️ „Treppenhausreinigung" ist EIN Wort mit 20 Zeichen. Bei 24px Manrope 600 misst es
   ~245 px, die Karte bot am 19.09.2026 bei 1440px Fenster nur 213 px Innenbreite — das Wort
   stand sichtbar ueber dem Kartenrand (Nutzerbefund). Deutsche Komposita brauchen hier
   beides: Trennung (html lang=de ist gesetzt) und als letzte Reissleine den Umbruch im
   Wort. Ohne overflow-wrap traegt hyphens allein den Fall nicht, wenn keine Trennstelle
   passt. */
.lk3 h3{font-weight:600;font-size:clamp(19px,1.5vw,23px);letter-spacing:-.015em;line-height:1.2;color:var(--navy);margin:0 0 14px;
  hyphens:auto;overflow-wrap:break-word}
/* Die Ueberschrift der Karte fuehrt auf die Leistungsseite. Als Link, nicht als Knopf:
   sie ist der Name der Sache, und ihr Text ist gleichzeitig das Wort, unter dem gesucht
   wird. Die Handlungszeile darunter bleibt, was sie war. */
.lk3 h3 a{color:inherit;text-decoration:none}
.lk3 h3 a:hover{color:var(--blau-text);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.lk3 h3 a:focus-visible{outline:3px solid var(--blau);outline-offset:3px;border-radius:4px}
/* Am Finger 44 px hoch. Die einzeiligen Ueberschriften massen 26 px — gemessen am
   19.09.2026 auf Tablet, Handy und Handy-Querformat. Nur unter pointer:coarse, damit das
   Raster am Schreibtisch unveraendert bleibt. */
@media (pointer:coarse){.lk3 h3 a{display:flex;align-items:center;min-height:44px}}
.lk3 p{font-size:15.5px;line-height:1.55;color:#3A4B5E;margin:0 0 18px}
.lk3 > p{flex:1}
.lk3 .pfeillink{margin-top:auto;font-size:15px;white-space:nowrap}
.leistungen3:has(#seg-gewerbe:checked) .lk3[data-seg="privat"]{display:none}
.leistungen3:has(#seg-privat:checked) .lk3[data-seg="gewerbe"]{display:none}
.pfeillink{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;font-size:15.5px;color:var(--navy);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;text-decoration-color:var(--linie-kraeftig)}
.pfeillink::after{content:"→";transition:transform .15s}
.pfeillink:hover{color:var(--blau-text);text-decoration-color:var(--blau-text)}
.pfeillink:hover::after{transform:translateX(3px)}
@media (max-width:1100px){.leistungen3__karten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.leistungen3__raster{grid-template-columns:1fr}.leistungen3__steuer{width:100%;max-width:360px}}
@media (max-width:640px){.leistungen3__karten{grid-template-columns:1fr}}

/* ── Leistungsverzeichnis in der Karte: zugeklappt, Haarlinie, kein Kasten ── */
.lk3__lv{margin:0 0 16px;border-top:1px solid var(--linie);padding-top:12px}
.lk3__lv summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:32px;font:700 13.5px/1.3 var(--text);letter-spacing:.02em;color:var(--navy)}
.lk3__lv summary::-webkit-details-marker{display:none}
.lk3__lv summary:hover{color:var(--blau-text)}
.lk3__lv summary:focus-visible{outline:3px solid var(--blau);outline-offset:3px;border-radius:5px}
.lk3__lvzeichen{position:relative;width:18px;height:18px;flex:0 0 auto;color:var(--navy);transition:transform .25s ease}
.lk3__lvzeichen svg{width:18px;height:18px;display:block}
.lk3__lv[open] .lk3__lvzeichen{transform:rotate(45deg)}
.lk3__lv ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:5px}
.lk3__lv li{position:relative;padding-left:16px;font-size:14px;line-height:1.45;color:#3A4B5E}
.lk3__lv li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--blau)}
.lk3 .pfeillink{margin-top:auto}

/* ── Leistungsseite: Leistungsverzeichnis als breite Spaltenliste ── */
.lv{margin-top:clamp(26px,3.4vw,40px);padding-top:clamp(24px,3vw,32px);border-top:2px solid var(--navy)}
.lv h3{font-weight:600;font-size:clamp(19px,1.6vw,22px);letter-spacing:-.01em;color:var(--navy);margin:0 0 18px}
.lv__liste{list-style:none;margin:0;padding:0;columns:3;column-gap:40px}
.lv__liste li{break-inside:avoid;position:relative;padding-left:18px;margin-bottom:9px;font-size:15.5px;line-height:1.5;color:#3A4B5E}
.lv__liste li::before{content:"";position:absolute;left:0;top:.58em;width:7px;height:7px;border-radius:50%;background:var(--blau)}
.lv__hinweis{margin:22px 0 0;font-size:14.5px;line-height:1.6;color:var(--grau);max-width:80ch}
.cta-termin--seite{background:#fff;padding:0 0 clamp(56px,7vw,96px)}
/* Zwei Abschnitte stossen auf der Leistungsseite direkt aneinander, und beide bringen ihre
   volle Polsterung mit: gemessen am 19.09.2026 lagen 184 px Leere zwischen dem Hinweis unter
   dem Leistungsverzeichnis und „So laeuft es ab." Der Abstand bleibt ein Abschnittswechsel,
   aber einer, den man ueberblickt. */
.unterseite .ablauf{padding-top:clamp(34px,4vw,60px)}
@media (max-width:900px){.lv__liste{columns:2}}
@media (max-width:560px){.lv__liste{columns:1}}

/* ── Ablauf: vier Schritte als Haarlinien-Strecke, Ziffern in der Serif ── */
.ablauf{background:#fff;padding:clamp(56px,7vw,96px) 0}
.ablauf__kopf{max-width:62ch;margin-bottom:clamp(30px,4vw,46px)}
.ablauf h2{font-family:var(--serif);font-weight:400;color:var(--navy);font-size:clamp(28px,3.4vw,44px);letter-spacing:-.01em;line-height:1.12;margin:0 0 14px}
.ablauf__kopf p{font-size:clamp(15.5px,1.2vw,17px);line-height:1.55;color:#3A4B5E;margin:0}
.ablauf__strecke{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
/* Strecke (29.09.2026, Nutzer: „nur 1 blau, Hover und Scroll passiert nix"): die graue Linie
   ist die Schiene, ::before die Fuellung. website.js setzt --bereit und fuellt die Schritte
   nacheinander, sobald sie ins Bild kommen. Ohne Skript oder bei reduzierter Bewegung
   steht die Strecke sofort ganz in Navy. Hover hebt den Schritt hellblau hervor. */
.ablauf__schritt{position:relative;padding:26px 28px 4px 0;border-top:2px solid var(--linie-kraeftig)}
.ablauf__schritt::before{content:"";position:absolute;left:0;right:0;top:-2px;height:2px;background:var(--navy);transform-origin:left center;
  transition:transform .6s cubic-bezier(.4,0,.2,1) var(--verzug,0ms),background-color .2s ease,height .2s ease,top .2s ease}
.ablauf__strecke--bereit .ablauf__schritt::before{transform:scaleX(0)}
.ablauf__strecke--bereit .ablauf__schritt--an::before{transform:scaleX(1)}
.ablauf__nr{transition:transform .25s ease,color .25s ease}
@media (hover:hover){
  .ablauf__schritt:hover::before{background:var(--blau);height:4px;top:-3px}
  .ablauf__schritt:hover .ablauf__nr{transform:translateY(-4px);color:var(--navy)}
}
.ablauf__nr{display:block;font-family:var(--serif);font-weight:400;font-size:34px;line-height:1;color:var(--blau-text);margin-bottom:14px}
.ablauf__schritt h3{font-weight:600;font-size:18px;letter-spacing:-.01em;color:var(--navy);margin:0 0 8px}
.ablauf__schritt p{font-size:15px;line-height:1.55;color:#3A4B5E;margin:0}
@media (max-width:900px){.ablauf__strecke{grid-template-columns:repeat(2,minmax(0,1fr))}.ablauf__schritt{padding-right:20px}}
@media (max-width:560px){.ablauf__strecke{grid-template-columns:1fr}.ablauf__schritt{padding:18px 0 14px}}

/* ── Bewertungen: Kopf mit Wertung, drei Zitate, Haarlinien-Abschluss ── */
.bewertungen{background:var(--papier);padding:clamp(56px,7vw,96px) 0}
.bew-kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:20px 40px;flex-wrap:wrap;margin-bottom:clamp(26px,3.4vw,40px)}
.bewertungen h2{font-family:var(--serif);font-weight:400;color:var(--navy);font-size:clamp(28px,3.4vw,44px);letter-spacing:-.01em;line-height:1.12;margin:10px 0 0}
.bew-wert{display:inline-flex;align-items:baseline;gap:10px;text-decoration:none;min-height:44px}
.bew-wert b{font-family:var(--kopf);font-weight:700;font-size:34px;letter-spacing:-.03em;color:var(--navy)}
.bew-wert span{font-size:14.5px;color:var(--grau)}
.bew-wert:hover b{color:var(--blau-text)}
.zitate{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.bewertungen .karte.zitat{background:#fff;border-radius:14px;padding:26px 24px;box-shadow:none;display:flex;flex-direction:column;gap:14px}
.bewertungen .karte.zitat:hover{box-shadow:none}
.zitat__sterne{display:flex;gap:3px}
.zitat__sterne svg{width:17px;height:17px;display:block}
.bewertungen .zitat p{font-size:15.5px;line-height:1.6;color:var(--tinte);margin:0;flex:1}
.zitat__wer{display:flex;align-items:center;gap:10px}
.zitat__initial{width:34px;height:34px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  background:var(--papier);color:var(--navy);font:700 15px/1 var(--kopf);box-shadow:0 0 0 1px var(--linie)}
.zitat__wer b{display:block;font-size:14.5px;font-weight:600;color:var(--navy)}
.zitat__wann{display:block;font-size:12.5px;color:var(--grau)}
@media (max-width:900px){.zitate{grid-template-columns:1fr}}

/* ── Stellen-Teaser: Navy-Band zwischen den beiden hellen Abschnitten ── */
.karriere-start{padding:clamp(56px,7vw,96px) 0}
.karriere-start__kopf{max-width:64ch;margin-bottom:clamp(26px,3.4vw,40px)}
.karriere-start h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.4vw,44px);letter-spacing:-.01em;line-height:1.12;margin:10px 0 14px}
.karriere-start__kopf p{font-size:clamp(15.5px,1.2vw,17px);line-height:1.55;color:#B9CBDD;margin:0 0 24px}
.karriere-start .raster.r3{gap:18px}
.karriere-start .karte.stelle{border-radius:14px}
@media (max-width:640px){.karriere-start{padding:44px 0}.karriere-start .knopf{width:100%}}

/* ── Rechner-CTA: weisse Buehne, Navy-Karte, Eingabe + Knopf in einer Pille ── */
.rechner-cta--clean{background:#fff;padding:clamp(64px,8vw,120px) 0}
.rcta{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center;background:var(--navy);border-radius:16px;padding:clamp(40px,5vw,72px) clamp(32px,4.5vw,64px)}
.rcta h2{color:#fff;font-family:var(--kopf);font-weight:700;font-size:clamp(26px,2.6vw,34px);letter-spacing:-.02em;line-height:1.15;margin:0 0 14px}
.rcta__text p{color:#D6E3EE;font-size:clamp(15.5px,1.15vw,17px);line-height:1.55;max-width:52ch;margin:0}
.rcta__klein{margin-top:26px !important;font-size:13.5px;color:#B9CBDD}
/* Stern neben der Wertung (Nutzerwunsch 29.09.2026): Hellblau wie der Ring im selben Feld,
   4,3:1 auf Navy. Gold wie bei den Rezensionen waere hier die einzige Warmfarbe der Tafel. */
.rcta__stern{display:inline-block;width:15px;height:15px;fill:var(--blau);vertical-align:-2px;margin-right:6px}
.rcta__form{display:flex;flex-direction:column;gap:10px}
.rcta__pille{position:relative;display:flex;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:6px 6px 6px 22px;min-height:62px}
.rcta__eingabe{position:relative;flex:1;min-width:0;display:flex;align-items:center}
.rcta__input{flex:1;min-width:120px;height:auto;border:0;border-radius:0;padding:0;background:transparent;font:500 16.5px/1 var(--text);color:var(--navy);-moz-appearance:textfield}
.rcta__input::-webkit-outer-spin-button,.rcta__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.rcta__input::placeholder{color:#7A8B9C}
.rcta__input:focus{outline:none;box-shadow:none}
.rcta__ring{position:absolute;left:-16px;top:-11px;width:min(196px,calc(100% + 24px));height:calc(100% + 22px);pointer-events:none;overflow:visible}
/* ⚠️ stroke-dasharray 2 statt 1, obwohl pathLength=1 ist. Grund, gemessen am 19.09.2026:
   Der Ring wird ueber preserveAspectRatio=none stark in die Breite gezogen (am Handy
   200x60 Einheiten auf 302x62 px). Mit vector-effect:non-scaling-stroke rechnet Chrome die
   Strichmuster am GEZEICHNETEN Pfad, der dadurch laenger ist als die eine Einheit aus
   pathLength — der Strich reichte nur um rund zwei Drittel der Schleife, der Rest blieb
   Luecke, und der Kreis sah aus wie abgeschnitten. Zwei Einheiten decken auch die staerkste
   Streckung. Die Zeichenbewegung ist dadurch frueher fertig als die Ueberblendung; sichtbar
   ist das nicht, ein offener Kreis war es. */
.rcta__ring path{fill:none;stroke:var(--blau);stroke-width:2.5;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:2;stroke-dashoffset:2;transition:stroke-dashoffset 1.3s cubic-bezier(.4,0,.2,1) .25s}
.rcta--sichtbar .rcta__ring path,.rcta__eingabe:focus-within .rcta__ring path{stroke-dashoffset:0}
@media (max-width:1000px){.rcta{grid-template-columns:1fr}}
/* ⚠️ Am Handy wird die Pille zur Spalte: Eingabe oben, Knopf darunter. Der Ring umkreist
   dann nur noch die Eingabezeile — genau die, um die es geht. Bis zum 18.09.2026 stand
   darunter `.rcta__ring{display:none}` in der 640er-Regel; damit fehlte am Handy die
   einzige Auszeichnung, die „hier Zahl eintragen" sagt (Nutzerbefund 19.09.2026). */
@media (max-width:560px){.rcta__pille{flex-direction:column;align-items:stretch;border-radius:16px;padding:14px}.rcta__input{height:44px;padding:0 4px}.rcta__knopf{width:100%}
  /* ⚠️ max-width:none ist Pflicht: website.css klemmt jedes svg auf max-width:100%, und
     der Ring war dadurch genau so breit wie die Eingabe statt 10 px darueber hinaus.
     Und die Pille bekommt 14 px Abstand statt 8 — sonst liegt der untere Bogen des Rings
     hinter dem navyfarbenen Knopf und der Kreis sieht aus, als fehle ihm ein Stueck. */
  .rcta__pille{gap:14px}
  .rcta__ring{left:-10px;top:-9px;width:calc(100% + 20px);height:calc(100% + 18px);max-width:none}}
@media (prefers-reduced-motion:reduce){.rcta__ring path{transition:none;stroke-dashoffset:0}}

/* ── FAQ: Kopf links, Fragen rechts als Haarlinien-Liste ── */
.faq{background:var(--papier);padding:clamp(64px,8vw,120px) 0}
.faq__raster{display:grid;grid-template-columns:minmax(260px,.8fr) 1.5fr;gap:clamp(36px,5vw,80px);align-items:start}
.faq__kopf{position:sticky;top:110px}
.faq h2{font-family:var(--serif);font-weight:400;color:var(--navy);font-size:clamp(32px,3.8vw,52px);letter-spacing:-.015em;line-height:1.08;margin:0 0 18px}
.faq__kopf p{font-size:clamp(15.5px,1.2vw,17px);line-height:1.55;color:var(--tinte);max-width:36ch;margin:0 0 26px}
.faq__liste{border-top:1px solid var(--linie-kraeftig)}
.faq__item{border-bottom:1px solid var(--linie-kraeftig)}
.faq__item summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr 28px;gap:20px;align-items:center;padding:22px 0;font:600 clamp(17px,1.35vw,19px)/1.35 var(--text);color:var(--navy)}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--blau-text)}
.faq__item summary:focus-visible{outline:3px solid var(--blau);outline-offset:4px;border-radius:6px}
.faq__zeichen{position:relative;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--navy);transition:background-color .25s ease,border-color .25s ease}
.faq__zeichen::before,.faq__zeichen::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:var(--navy);transform:translate(-50%,-50%);transition:transform .3s cubic-bezier(.22,1,.36,1),background-color .25s ease}
.faq__zeichen::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq__item[open] .faq__zeichen{background:var(--navy);border-color:var(--navy)}
.faq__item[open] .faq__zeichen::before,.faq__item[open] .faq__zeichen::after{background:#fff}
.faq__item[open] .faq__zeichen::after{transform:translate(-50%,-50%) rotate(180deg)}
.faq__antwort{padding:0 48px 24px 0}
.faq__antwort p{font-size:16px;line-height:1.6;color:#3A4B5E;margin:0;max-width:64ch}
@media (max-width:900px){.faq__raster{grid-template-columns:1fr}.faq__kopf{position:static}.faq__antwort{padding-right:0}}

/* ── Unterseiten: knapper Hero, ruhige Bloecke, Formulare in Pillenform ── */
.hero--klein{min-height:clamp(420px,46vw,620px)}
.hero--klein .bahn{padding-bottom:clamp(40px,5vw,72px)}
.hero--klein h1{font-size:clamp(32px,4vw,56px)}
/* Unterseiten am Schreibtisch (28.09.2026): das Foto steht als rechte Flaeche neben dem Text statt
   randlos dahinter. Das Material ist fast nur hochkant (Handyvideos, WhatsApp-Fotos); randlos in
   1440 x 540 blieb davon ein Streifen mit halbem Kopf unter Text und Verlauf. Die Flaeche beginnt
   40 px rechts der Mitte (mindestens bei 600 px), die Textspalte endet 520 px nach ihrem Anfang;
   bei 1200 px Bahn liegen dazwischen immer mindestens 40 px Navy. Der Verlauf unten entfaellt,
   der Text steht nicht mehr auf dem Foto; der obere bleibt fuer die Leiste. Ab 641 px, denn
   Tablet hoch und Handy quer haben einen FLACHEN Hero (820 x 393): randlos lag dort der Text auf
   den Gesichtern. Darunter bleibt es randlos mit dem Hochkant-Zuschnitt.
   ⚠️ Breite AUSDRUECKLICH setzen: ein <img> ist ein ersetztes Element, bei width:auto nimmt es
   Hoehe mal Seitenverhaeltnis und ignoriert right:0 (gemessen 28.09.2026: 58 px Luecke bei 1440,
   299 px bei 1920, darunter ragte es ueber den Rand). sizes in heroKlein() rechnet dieselben Masse.
   ⚠️ Die Ueberschrift ist daneben kleiner: „Treppenhausreinigung“ lief bei 56 px ueber 520 px. */
@media (min-width:641px){
  .hero--gees.hero--klein .hero__bild{left:50%;width:50%}
  .hero--gees.hero--klein::before{background:linear-gradient(to bottom,rgba(15,41,70,.9) 0%,rgba(15,41,70,.78) 9%,rgba(15,41,70,.36) 20%,rgba(15,41,70,0) 34%)}
  .hero--gees.hero--klein .hero__inhalt{max-width:calc(50vw - 70px)}
  .hero--gees.hero--klein h1{font-size:clamp(28px,3.2vw,46px)}
}
@media (min-width:901px){
  .hero--gees.hero--klein .hero__bild{left:max(600px,calc(50% + 40px));width:calc(100% - max(600px,calc(50% + 40px)))}
  .hero--gees.hero--klein .hero__inhalt{max-width:520px}
}
.hero--klein .hero__text{max-width:56ch}
.us-block{padding:clamp(48px,6vw,88px) 0;background:#fff}
.us-block--papier{background:var(--papier)}
/* Textverweise im Fliesstext am Finger: 23 px hoch (Glas-Rechner „Leistungsseite“, Pruefer-Hinweis seit 12.10.2026).
   Vertikales Padding vergroessert bei Inline-Elementen nur die Tippflaeche, nicht die Zeilenhoehe. */
@media (pointer:coarse){.us-block p a{padding-block:11px}}
.us-kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 40px;flex-wrap:wrap;margin-bottom:clamp(28px,3.5vw,44px)}
.us-kopf h2{font-family:var(--serif);font-weight:400;color:var(--navy);font-size:clamp(28px,3.2vw,42px);letter-spacing:-.01em;line-height:1.12;margin:0}
.us-kopf p{margin:12px 0 0;font-size:clamp(15.5px,1.2vw,17px);line-height:1.55;color:#3A4B5E;max-width:60ch}
.us-zusagen{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14.5px;color:var(--navy);font-weight:600}
.us-zusagen li{display:inline-flex;align-items:center;gap:8px}
.us-zusagen li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--blau)}
.rechner{gap:32px}
.stufe{font-family:var(--text);font-weight:700;font-size:15px;letter-spacing:0;text-transform:none;color:var(--navy);margin:0 0 12px;padding-top:8px}
.frageblock + .frageblock{margin-top:22px;padding-top:18px;border-top:1px solid var(--linie)}
.wahl{gap:10px;margin-bottom:8px}
.wahl button{border-radius:14px;padding:16px 18px;border:1.5px solid var(--linie);transition:border-color .2s ease,background-color .2s ease}
.wahl button:hover{border-color:var(--navy)}
.wahl button[aria-pressed="true"]{border-color:var(--navy);background:var(--gewaehlt)}
.wahl b{font-family:var(--text);font-weight:600;font-size:16px}
.posten{border-radius:14px;border:1.5px solid var(--linie);padding:14px 18px}
.posten__text b{font-family:var(--text);font-weight:600}
.zaehler button{border-radius:50%;width:42px;height:42px;font:600 20px/1 var(--text);border:1.5px solid var(--linie-kraeftig)}
.zaehler button:hover{border-color:var(--navy);background:#fff}
.kacheln button{border-radius:999px !important;min-height:44px;padding:0 18px;font:600 14.5px/1 var(--text);border:1.5px solid var(--linie-kraeftig)}
.kacheln button[aria-pressed="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}
.summe{border-radius:16px;padding:30px 30px 26px;top:110px}
.summe__wert{font-family:var(--text);font-weight:700;letter-spacing:-.02em}
.summe .knopf{width:100%;margin-top:0}
.summe .knopf ~ .knopf{margin-top:10px}
.summe .knopf[style]{background:transparent !important;border-color:rgba(255,255,255,.7) !important;color:#fff}
.summe .knopf[style]:hover{background:#fff !important;color:var(--navy);border-color:#fff !important}
/* ── Rechner entschlackt (19.09.2026) ────────────────────────────────────────────────
   Drei Griffe, alle am selben Befund („whitespacig entschlacken, beste UX"):
   Zaehler zweispaltig, Frageabstaende enger, EINE Schluss-Karte statt zwei. */
.posten-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:10px}
/* Das Zaehlerfeld stand mit 74 px Mindestbreite fuer eine einstellige Zahl. In halber
   Kartenbreite sind das 30 px, die dem Beschriftungstext fehlen — „Kleine Fenster" brach
   deswegen auf zwei Zeilen. Die 44 px reichen bis dreistellig. */
.posten-raster .zaehler output{min-width:44px}
/* ⚠️ Im Raster wird der Posten ein Grid, kein Flex: als Flex mit flex:1 auf dem Text
   schrumpfte der bei halber Breite auf die Breite des laengsten WORTES (gemessen
   19.09.2026: „Kleine Fenster" stand untereinander, der Hinweis einzeln pro Wort).
   Grid gibt dem Text 1fr und laesst dem Zaehler seine natuerliche Breite.
   ⚠️ Der Betrag steht UNTER dem Zaehler, nicht daneben (01.10.2026, Nutzerbefund „wenn ich +
   druecke verschieben sich plus und minus"). Als dritte auto-Spalte mass er bei „–" 10 px,
   bei „700,00 €" 75 px; um die Differenz rutschten beide Knoepfe nach links und der Titel
   brach um. Jetzt bestimmt allein der Zaehler die Spaltenbreite. Beide Zeilen strecken sich
   gleich, Zaehler unten und Betrag oben halten das Paar deshalb mittig neben dem Text. */
.posten-raster .posten{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"text zaehler" "text summe";align-items:center;gap:6px 10px;padding:12px 14px}
.posten-raster .posten__text{grid-area:text;min-width:0}
.posten__text b{font-size:15.5px}
.posten__text span{display:block;line-height:1.35}
.posten-raster .zaehler{grid-area:zaehler;align-self:end}
.posten-raster .posten__summe{grid-area:summe;align-self:start;min-width:0;text-align:center}
.frageblock + .frageblock{margin-top:18px;padding-top:15px}
.us-block .rechner .stufe{padding-top:0}
@media (max-width:900px){.posten-raster{grid-template-columns:1fr}.posten-raster .zaehler output{min-width:74px}}
/* Glasversiegelung (28.09.2026): Hinweise, Mengen je Groesse, getrennte Ergebniszeilen. */
.v-hinweise{margin:10px 0 14px;padding-left:18px;font-size:14px;line-height:1.5;color:var(--grau);max-width:64ch}
.v-hinweise li + li{margin-top:4px}
.v-mengen{margin-top:12px}
.v-leer{margin:10px 0 0}
.summe__brutto{font-size:15px;font-weight:600;color:#fff;margin:0 0 4px}
.summe__posten{margin:0 0 20px;padding-top:14px;border-top:1px solid rgba(255,255,255,.16);display:grid;gap:10px}
.summe__posten div{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.summe__posten dt{font-size:14px;line-height:1.4;color:#fff}
.summe__posten dt small{display:block;font-size:12.5px;color:#B9CBDD;margin-top:2px}
.summe__posten dd{margin:0;font-weight:700;font-size:15.5px;color:#fff;white-space:nowrap}
.extras{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:32px}
.extras--eins{grid-template-columns:1fr}
.extras--eins .karte{padding:30px 34px}
.extras--eins p + p{margin-top:12px}
.extras .karte{border-radius:16px;padding:30px;box-shadow:none;background:var(--papier)}
.extras .karte:hover{box-shadow:none}
.extras h3{font-weight:600;font-size:20px;letter-spacing:-.01em;margin:0 0 10px;color:var(--navy)}
.extras p{font-size:15.5px;line-height:1.55;color:#3A4B5E;margin:0 0 20px}
.extras .knopfreihe{gap:10px}
.felder{gap:14px}
.feld input,.feld select{border-radius:12px;border:1.5px solid var(--linie);min-height:50px;padding:0 16px;font:500 16px/1 var(--text)}
.feld input:focus,.feld select:focus{border-color:var(--navy);outline:none;box-shadow:0 0 0 3px rgba(0,166,224,.2)}
.feld label{font-weight:600;font-size:14px;color:var(--navy)}
.termin-summe__wert{font-family:var(--text);font-weight:600}
.bestaetigt{border-radius:16px}
.kacheln3{grid-template-columns:repeat(3,minmax(0,1fr))}
.kacheln3 .kachel4{padding:30px 28px}
.kacheln3 .kachel4 h3{margin:0 0 12px;font-weight:600;font-size:20px}
.raster.r3 .karte.vorteil{border-radius:14px;padding:28px;box-shadow:none;background:var(--papier)}
.raster.r3 .karte.vorteil:hover{box-shadow:none}
.vorteil h3{font-weight:600;font-size:18px;margin:0 0 8px;color:var(--navy)}
.vorteil p{font-size:15px;line-height:1.55;color:#3A4B5E}
.vorteil__haken{border-radius:50%;background:var(--blau);color:#fff;width:32px;height:32px}
#karriere-stellen .karte,#karriere-stellen .stelle{border-radius:14px;box-shadow:none}
.rechtliches .abschnittkopf{margin-bottom:36px}
.rechtliches__h1{font-family:var(--serif);font-weight:400;color:var(--navy);font-size:clamp(34px,4vw,54px);letter-spacing:-.01em;line-height:1.08}
.rechtliches h2{font-family:var(--serif);font-weight:400;color:var(--navy);font-size:clamp(24px,2.4vw,32px)}
.rechtliches__h3{font-weight:700;font-size:17px;letter-spacing:-.01em;line-height:1.3;color:var(--navy);margin:30px 0 0}
@media (max-width:1000px){.posten__text{min-width:140px}.posten__summe{min-width:0}.posten{gap:10px 14px}}
@media (max-width:900px){.rechner{grid-template-columns:1fr}.summe{position:static}.extras{grid-template-columns:1fr}.kacheln3{grid-template-columns:1fr}}

/* ── Ein Knopfsystem: alles Pillen, 50 px, Manrope 600/15, kein Schatten ──
   primaer (Navy) · sekundaer hell (weiss, Navy-Kontur) · auf Navy (weiss gefuellt / weisse Kontur). */
.knopf,.nav--gees .nav__links a.knopf,.nav--gees .nav__links a.nav__pille,.rcta__alt,.rcta__knopf,.leistungen3__steuer .knopf{
  display:inline-flex;white-space:nowrap;min-height:50px;height:auto;padding:0 24px;border-radius:999px;border:1.5px solid var(--navy);
  font:600 15px/1 var(--text);letter-spacing:0;box-shadow:none;transform:none;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease}
.knopf:hover,.nav--gees .nav__links a.knopf:hover,.rcta__knopf:hover{transform:translateY(-1px);box-shadow:none}
.knopf:active{transform:none}
.knopf,.nav--gees .nav__links a.knopf,.rcta__knopf{background:var(--navy);color:#fff;border-color:var(--navy)}
.knopf:hover,.nav--gees .nav__links a.knopf:hover,.rcta__knopf:hover{background:var(--navy-dunkel);border-color:var(--navy-dunkel);color:#fff}
.knopf--kontur,.nav--gees .nav__links a.nav__pille{background:#fff;color:var(--navy);border-color:var(--navy)}
.knopf--kontur:hover,.nav--gees .nav__links a.nav__pille:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
/* ── WhatsApp: gruen ist das ZEICHEN, nicht der Knopf (Nutzerentscheid 19.09.2026) ────
   Der erste Anlauf desselben Tages fuellte die Knoepfe gruen. Das riss sie aus dem
   Knopfsystem — und mit dem Markengruen selbst ging es ohnehin nicht: weisse Schrift auf
   #25D366 sind gemessen 1,98:1, die Seite haelt ueberall 4,5:1.
   Jetzt laufen die Knoepfe im System mit (Kontur, hell, Glas — je nach Grund), und WhatsApp
   erkennt man an der Original-Sprechblase, die auf allen gleich aussieht.
   ⚠️ Der Farbwert steht auch in baue-website.mjs (WA_MARKE), weil das Zeichen dort als SVG
   mit festen Farben entsteht. Wer dreht, dreht beides. */
:root{--wa-marke:#25D366}
.knopf svg,.nav__pille--wa svg{flex:0 0 auto}
/* Der WhatsApp-Weg in den Leistungskarten ist ein Textlink, kein Knopf — er bekommt
   dasselbe Zeichen, behaelt aber die Bauart seiner Nachbarn. */
.pfeillink--wa{gap:8px}
.pfeillink--wa::after{content:none}
.knopf--hell{background:#fff;color:var(--navy);border-color:#fff}
.knopf--hell:hover{background:#DCE8F0;border-color:#DCE8F0;color:var(--navy)}
.knopf--glas,.rcta__alt{background:transparent;color:#fff;border-color:rgba(255,255,255,.7);backdrop-filter:none}
.knopf--glas:hover,.rcta__alt:hover{background:#fff;color:var(--navy);border-color:#fff}
.rcta__alt{justify-content:center;gap:8px;text-decoration:none;font-size:14.5px;min-height:46px}
.rcta__knopf{min-height:50px}
@media (min-width:901px){
  .nav--durchsichtig.nav--glas:not(.nav--klein) .nav__links a.knopf{background:#fff;color:var(--navy);border-color:#fff}
  .nav--durchsichtig.nav--glas:not(.nav--klein) .nav__links a.knopf:hover{background:#DCE8F0;border-color:#DCE8F0;color:var(--navy)}
  /* Ueber dem Foto laeuft die Pille im Glas-Zustand mit — das gruene Zeichen darin bleibt
     gruen und traegt allein die Wiedererkennung. */
  .nav--durchsichtig.nav--glas:not(.nav--klein) .nav__links a.nav__pille--wa{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
  .nav--durchsichtig.nav--glas:not(.nav--klein) .nav__links a.nav__pille--wa:hover{background:#fff;color:var(--navy);border-color:#fff}
  .nav--durchsichtig.nav--glas:not(.nav--klein) .nav__links a.nav__insta{color:#fff;border-color:rgba(255,255,255,.7)}
  .nav--durchsichtig.nav--glas:not(.nav--klein) .nav__links a.nav__insta:hover{background:#fff;color:var(--navy);border-color:#fff}
}
.nav--gees .nav__links a.knopf,.nav--gees .nav__links a.nav__pille{min-height:46px;padding:0 20px}
.summe .knopf,.termin-summe .knopf,.leistungen3__steuer .knopf{display:flex;justify-content:center}
@media (prefers-reduced-motion:reduce){.umschalter__ring,.knopf{transition:none}.umschalter__ring path{animation:none;stroke-dashoffset:0}.lk3{animation:none}}

/* ── Mobil (≤ 640 px): 44-px-Ziele, eine Spalte, Hero ohne Leisten-Ueberlappung ── */
@media (max-width:900px){
  .nav--gees .nav__links{grid-template-columns:1fr}
  .nav--gees .nav__links a.knopf,.nav--gees .nav__links a.nav__pille{width:100%;justify-content:center;margin-top:0}
  .nav--gees .nav__links a.nav__insta{width:100%;min-height:50px;gap:9px;border-radius:999px;color:#fff;border-color:rgba(255,255,255,.7);font-size:15px}
  .nav--gees .nav__links a.nav__insta:hover{background:#fff;color:var(--navy);border-color:#fff}
  .nav__insta span{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}
  .nav--gees .nav__rechts{gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--linie)}
  /* Startseite: Foto und Copy sind auf allen schmalen Geraeten zwei Flaechen. max-width:640px
     allein reicht nicht, weil ein Handy quer 844 px breit sein kann und der Text dort sonst
     wieder ueber dem Foto liegt. */
  .startseite .hero--gees:not(.hero--klein){--startbild-hoehe:clamp(240px,40svh,430px);--startbild-uebergang:28px;display:block;min-height:100svh}
  /* Das Foto laeuft unterhalb seiner eigentlichen Flaeche weich ins Navy aus. Bei Beginn der
     Copy ist es vollstaendig ausgeblendet: mehr Bildwirkung, aber weiterhin kein Text auf Koepfen. */
  .startseite .hero--gees:not(.hero--klein) .hero__bild{inset:0 0 auto;height:calc(var(--startbild-hoehe) + var(--startbild-uebergang));
    -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 72px),rgba(0,0,0,.62) calc(100% - 40px),transparent 100%);
    mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 72px),rgba(0,0,0,.62) calc(100% - 40px),transparent 100%)}
  .startseite .hero--gees:not(.hero--klein)::before{inset:0 0 auto;height:calc(var(--startbild-hoehe) + var(--startbild-uebergang));
    background:linear-gradient(to bottom,rgba(15,41,70,.84) 0%,rgba(15,41,70,.6) 18%,rgba(15,41,70,0) 44%)}
  .startseite .hero--gees:not(.hero--klein) .bahn{padding-top:calc(var(--startbild-hoehe) + var(--startbild-uebergang));padding-bottom:44px}
}
@media (max-width:900px) and (max-height:500px){
  .startseite .hero--gees:not(.hero--klein){--startbild-hoehe:clamp(180px,50svh,220px)}
}
@media (max-width:640px) and (max-height:720px){
  /* Auf kurzen Hochformat-Handys bleibt die Hauptaktion im ersten Bildschirm. Der Generator
     liefert hier den Querzuschnitt: in der flachen Flaeche bleiben damit alle Koepfe ganz. */
  .startseite .hero--gees:not(.hero--klein){--startbild-hoehe:clamp(190px,30svh,230px);--startbild-uebergang:20px}
  .startseite .hero--gees:not(.hero--klein) .hero__bild{object-position:50% 25%}
}
@media (max-width:640px){
  section,.us-block,.konzept,.galerie--hell,.leistungen3,.faq,.rechner-cta--clean{padding:44px 0}
  /* Hero fuellt am Handy genau den Bildschirm (Nutzerwunsch 19.09.2026): svh statt vh,
     weil vh in Safari die eingefahrene Adressleiste mitrechnet und der Hero dann hinter
     ihr weiterlaeuft. min-height, nicht height — im Querformat ist der Text hoeher als
     der Bildschirm, und abgeschnittener Text waere schlimmer als ein Hero, der scrollt. */
  .hero--gees{min-height:100svh;align-items:flex-end}
  .hero--gees .bahn{padding-top:calc(var(--nav-hoehe,80px) + 28px);padding-bottom:44px}
  /* Unterseiten: derselbe saubere Anschnitt, aber als Band — sonst stuende der Rechner
     erst nach einem ganzen Bildschirm Foto. */
  /* 76 statt 60svh (28.09.2026): Ueberschrift, Vorspann und Knopf belegen rund 330 px; bei 60svh
     (506 px) blieb fuer die Gesichter nur ein Streifen unter der Leiste, und der Titel lag auf ihnen. */
  .hero--gees.hero--klein,.unterseite .hero--gees.hero--klein{min-height:76svh}
  .hero--gees h1{font-size:34px;line-height:1.1}
  .hero--gees .hero__text{font-size:16px}
  .hero--gees .knopfreihe{display:grid;gap:10px}
  .hero--gees .knopf{width:100%}
  .konzept h2,.galerie__kopf h2,.leistungen3 h2,.faq h2,.us-kopf h2,.split--eckig h2{font-size:30px}
  .konzept__raster{gap:24px;margin-bottom:32px}
  .kacheln4{grid-template-columns:1fr;gap:12px}
  .kachel4{padding:22px 22px 24px}
  .kachel4__icon{margin-bottom:16px}
  .kachel4__wert{font-size:32px}
  .cta-termin{padding-bottom:44px}
  .split--eckig{min-height:0}
  .split--eckig .split__text{padding:28px 22px 30px}
  .split--eckig .knopf{width:100%}
  .galerie__gross{aspect-ratio:4/3}
  .laufband__spur figure{width:72vw}
  .leistungen3__raster{gap:20px;margin-bottom:24px}
  .leistungen3__steuer{max-width:none}
  .lk3{min-height:0;padding:24px 22px}
  .rcta{padding:28px 22px;border-radius:14px}
  .rcta h2{font-size:26px}
  .faq__item summary{padding:18px 0;font-size:17px}
  .faq__kopf .knopf{width:100%}
  .us-kopf{gap:14px;margin-bottom:22px}
  .summe{padding:24px 22px}
  .posten__summe{width:100%;text-align:left;min-width:0}
  .extras .karte{padding:24px 22px}
  .extras .knopfreihe{display:grid;gap:10px}
  .extras .knopf{width:100%}
  .fuss2__claim{font-size:22px}
  .fuss2__unten{flex-direction:column;align-items:flex-start;gap:10px}
}

/* Hellblau-Marker in Ueberschriften: zeichnet sich, sobald der Block im Bild ist (website.js). */
.marker{position:relative;display:inline-block;white-space:nowrap}
.marker__ring{position:absolute;left:-.26em;top:-.2em;width:calc(100% + .52em);height:calc(100% + .42em);max-width:none;max-height:none;pointer-events:none;overflow:visible}
.marker__ring path{fill:none;stroke:var(--blau);stroke-width:2.5;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s cubic-bezier(.4,0,.2,1) .2s}
.marker--sichtbar .marker__ring path{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){.marker__ring path{transition:none;stroke-dashoffset:0}}

/* ── Terminwahl in der Tafel: Kalender und Uhrzeiten auf Navy (19.09.2026) ───────────
   Die Tafel traegt jetzt die ganze Terminwahl (Begruendung im Markup, terminSeite()).
   Alle Farben sind gegen den Navy-Grund gemessen: #B9CBDD 7,33:1, #8FA9C2 5,01:1 —
   deshalb steht ein ausgebuchter Tag in #8FA9C2 und nicht in einem dunkleren Grau. */
.termin-art .wahl{margin-bottom:26px}
.termin-summe{position:static;padding:26px 26px 24px}
/* Am Handy zuerst die Verfuegbarkeit, dann die Kontaktdaten: wer nicht weiss, ob ueberhaupt
   ein Termin frei ist, tippt seine Telefonnummer nicht vorher ein. */
@media (max-width:900px){.termin-summe{order:-1}}
.termin-summe__wert{font-size:17px;line-height:1.4;color:#fff;margin:6px 0 0}
.termin-feld{margin-top:22px}
.termin-feld__label{font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#8FA9C2;margin-bottom:10px}
.termin-summe .knopf{margin-top:22px}
/* Absenden: am Computer in der Tafel, am Handy unter den Kontaktfeldern (Grund im Markup). */
.termin-senden-unten{display:none}
@media (max-width:900px){
  .termin-summe #senden{display:none}
  .termin-senden-unten{display:flex;justify-content:center;width:100%;margin-top:18px}
}

.kalender__kopf{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.kalender__monat{font-family:var(--kopf);font-weight:600;font-size:16px;color:#fff}
.kalender__pfeil{width:36px;height:36px;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);background:transparent;
  color:#fff;font:400 20px/1 var(--text);cursor:pointer;display:grid;place-items:center;transition:background-color .2s ease,border-color .2s ease}
.kalender__pfeil:hover:not(:disabled){background:rgba(255,255,255,.14);border-color:#fff}
.kalender__pfeil:disabled{opacity:.35;cursor:default}
.kalender__wochentage,.kalender__raster{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.kalender__wochentage{margin-bottom:4px}
.kalender__wochentage span{text-align:center;font-size:11.5px;font-weight:600;letter-spacing:.06em;color:#8FA9C2}
.kalender__raster > *{display:grid;place-items:center;aspect-ratio:1;border-radius:10px;font:600 14.5px/1 var(--text)}
/* ⚠️ Deckende Farbe, kein rgba(255,255,255,.08): pruefe.mjs liest die Hintergrundfarbe roh
   aus und nimmt ab 5 % Deckkraft an, sie sei der Grund — bei weiss mit 8 % rechnete es
   weisse Schrift gegen Weiss und meldete am 19.09.2026 dreimal 1,00:1. #20456E ist derselbe
   Ton, den die Kachel vorher zeigte, nur ausgerechnet statt uebereinandergelegt: weiss
   darauf sind 9,82:1. */
.kalender__raster button{background:#20456E;border:1.5px solid transparent;color:#fff;cursor:pointer;transition:background-color .15s ease,border-color .15s ease}
.kalender__raster button:hover{background:#2C5688;border-color:rgba(255,255,255,.5)}
.kalender__raster button[aria-pressed="true"]{background:#fff;color:var(--navy);border-color:#fff}
.kalender__raster button:focus-visible{outline:3px solid var(--blau);outline-offset:2px}
.kalender__zu{color:#8FA9C2}
.termin-slots{display:flex;flex-wrap:wrap;gap:8px}
.termin-slots button{border-radius:999px;min-height:44px;padding:0 14px;font:600 14.5px/1 var(--text);
  background:#20456E;border:1.5px solid rgba(255,255,255,.3);color:#fff;cursor:pointer}
.termin-slots button:hover{background:#2C5688;border-color:#fff}
.termin-slots button[aria-pressed="true"]{background:#fff;color:var(--navy);border-color:#fff}
.termin-summe .termin-status{font-size:13.5px;color:#B9CBDD;margin:0}
.termin-summe .termin-status--fehler{color:#FFD2C2}
@media (pointer:coarse){.kalender__raster > *{min-height:44px}.kalender__pfeil{width:44px;height:44px}}

/* Termin: dichter — weniger Luft zwischen Kopf, Auswahl und Feldern. */
.unterseite .hero--klein{min-height:clamp(380px,40vw,540px)}
.unterseite .us-block{padding-top:clamp(40px,5vw,64px)}
.unterseite .us-kopf{margin-bottom:clamp(22px,2.6vw,32px)}
.unterseite .wahl{margin-bottom:16px}
.unterseite .stufe{margin:0 0 10px;padding-top:2px}
.unterseite .kacheln{margin-bottom:18px}
.unterseite .felder{gap:12px}
.unterseite .rechtshinweis{margin-top:14px}
.termin-raster{gap:28px}

/* ── Mobiles Menue: ganzer Bildschirm in Navy, Links in Serif, Ring zeichnet sich um den Rechner ── */
@media (max-width:900px){
  body:has(.nav__klapp[open]){overflow:hidden}
  .nav--gees:has(.nav__klapp[open]){background:var(--navy);border-bottom-color:transparent}
  .nav--gees:has(.nav__klapp[open]) .marke__wort,.nav--gees:has(.nav__klapp[open]) .nav__auf{color:#fff}
  .nav--gees:has(.nav__klapp[open]) .marke__sub{color:#B9E6F7}
  .nav--gees:has(.nav__klapp[open]) .marke svg rect[fill="#16375E"]{fill:#fff}
  .nav--gees .nav__klapp[open] .nav__auf{position:relative;z-index:2}
  .nav--gees .nav__klapp[open] .nav__links{position:fixed;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:flex-start;gap:0;
    padding:calc(var(--nav-hoehe,80px) + 28px) 24px 28px;background:var(--navy);border:0;border-radius:0;box-shadow:none;max-height:none;overflow:auto}
  .nav--gees .nav__klapp[open] .nav__links > a{align-self:flex-start;font-family:var(--serif);font-weight:400;font-size:clamp(30px,8.5vw,40px);line-height:1.15;color:#fff;
    min-height:0;padding:12px 0;border:0;background:none;opacity:0;transform:translateY(18px);animation:menuEin .55s cubic-bezier(.22,1,.36,1) forwards}
  .nav--gees .nav__klapp[open] .nav__links > a:nth-child(1){animation-delay:.05s}
  .nav--gees .nav__klapp[open] .nav__links > a:nth-child(2){animation-delay:.14s}
  .nav--gees .nav__klapp[open] .nav__links > a:nth-child(3){animation-delay:.23s}
  .nav--gees .nav__klapp[open] .nav__links > a:hover{color:#B9E6F7}
  .nav--gees .nav__klapp[open] .nav__rechts{margin-top:auto;border:0;padding-top:28px;gap:10px;opacity:0;transform:translateY(18px);animation:menuEin .55s .38s cubic-bezier(.22,1,.36,1) forwards}
  .nav--gees .nav__klapp[open] .nav__links a.knopf{background:#fff;color:var(--navy);border-color:#fff;font-family:var(--text);font-size:15px;opacity:1;transform:none;animation:none;align-self:stretch;padding:0 20px;min-height:50px}
  .nav--gees .nav__klapp[open] .nav__links a.nav__pille--wa{background:transparent;color:#fff;border-color:rgba(255,255,255,.7);font-family:var(--text);font-size:15px;opacity:1;transform:none;animation:none;align-self:stretch;padding:0 20px;min-height:50px}
  .nav--gees .nav__klapp[open] .nav__links a.nav__insta{background:transparent;color:#fff;border-color:rgba(255,255,255,.7);font-family:var(--text);font-size:15px;opacity:1;transform:none;animation:none;align-self:stretch;padding:0 20px;min-height:50px}
  .nav--gees .nav__klapp[open] .nav__links a.nav__pille--wa span{display:inline}
  .nav--gees .nav__klapp[open] .nav__ring{display:none}
  /* Das Zeichen zeichnet sich mittig in Hellblau nach: vier Konturen nacheinander, dann fuellen sie sich. */
  .nav--gees .nav__klapp[open] .menu__logo{display:block;width:min(46vw,190px);height:auto;margin:auto;flex:0 0 auto;overflow:visible}
  .nav--gees .nav__klapp[open] .menu__logo rect{fill:var(--blau);fill-opacity:0;stroke:var(--blau);stroke-width:2.2;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;stroke-linejoin:round;stroke-linecap:butt;
    animation:logoZug 1s cubic-bezier(.4,0,.2,1) forwards,logoFuellen .5s ease forwards}
  .nav--gees .nav__klapp[open] .menu__logo rect:nth-child(1){animation-delay:.45s,1.35s}
  .nav--gees .nav__klapp[open] .menu__logo rect:nth-child(2){animation-delay:.65s,1.5s}
  .nav--gees .nav__klapp[open] .menu__logo rect:nth-child(3){animation-delay:.85s,1.65s}
  .nav--gees .nav__klapp[open] .menu__logo rect:nth-child(4){animation-delay:1.05s,1.8s}
}
.menu__logo{display:none}
@keyframes logoZug{to{stroke-dashoffset:0}}
@keyframes logoFuellen{to{fill-opacity:1;stroke-opacity:0}}
@keyframes menuEin{to{opacity:1;transform:none}}
@keyframes ringMenu{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.nav__klapp[open] .nav__links > a,.nav__klapp[open] .nav__rechts{animation:none;opacity:1;transform:none}.nav__klapp[open] .menu__logo rect{animation:none;stroke-dashoffset:0;fill-opacity:1}}

/* Kontur-Pille unter Knoepfen: Text sitzt sicher in der Pille, egal welche Basisregel greift. */
.rcta__alt{display:flex !important;align-items:center;justify-content:center;gap:8px;min-height:50px;line-height:1.2;padding:12px 20px;box-sizing:border-box;text-align:center;white-space:normal}

/* ── Fuss: Kopfband mit Handlung, EIN Raster mit vier Spalten, Studio-Credit mittig ──
   Umbau 28.09.2026 (Nutzer: „etwas voll, lang und unuebersichtlich"). Vorher lagen zwei
   Raster mit verschiedener Spaltenzahl uebereinander (drei Kontaktwege je Zeile mit
   Trennstrichen, darunter vier Linkspalten), dazwischen und darunter vier Haarlinien. Jetzt:
   Kopfband · ein Raster · Schlusszeile · Credit. Rangfolge ueber Farbe statt ueber Kaesten:
   Kontaktwege weiss und kraeftig (die Hauptsache des Fusses), Seitenlinks hellgrau,
   Spaltenkoepfe und Nachsaetze gedaempft.
   ⚠️ Alle Regeln tragen .fuss--neu davor: website.css faerbt und bemisst jeden Verweis, jede
   Liste und jeden Absatz im Fuss (.fuss a / .fuss ul / .fuss p, je 0,1,1). */
.fuss2__kopf{align-items:center}
.fuss2__absender{flex:1 1 360px;min-width:0}
.fuss--neu .fuss2__gebiet{margin:8px 0 0;font-size:14.5px;line-height:1.55;color:#B9CBDD;max-width:56ch}
/* ⚠️ Farbe und Groesse ausdruecklich: .fuss a (website.css) faerbt JEDEN Verweis im Fuss
   auf #B9CBDD bei 14,5px und ist mit Element+Klasse spezifischer als .knopf--hell. Ohne
   diese Zeile stand am 19.09.2026 hellgraue Schrift auf der weissen Pille — gemessen
   1,17:1, praktisch unsichtbar. */
.fuss2__tat{display:flex;gap:10px;flex-wrap:wrap}
.fuss .fuss2__tat .knopf{font-size:15px}
.fuss .fuss2__tat .knopf--hell{color:var(--navy)}
.fuss .fuss2__tat .knopf--hell:hover{color:var(--navy)}
.fuss .fuss2__tat .knopf--glas{color:#fff}
.fuss .fuss2__tat .knopf--glas:hover{color:var(--navy)}

.fuss2__raster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 40px;padding:36px 0 34px}
.fuss--neu .fuss2__raster h3{font-family:var(--text);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#8FA9C2;font-weight:600;margin:0 0 14px}
.fuss--neu .fuss2__raster ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.fuss--neu .fuss2__raster a{display:inline-flex;align-items:center;min-height:32px;color:#D6E3EE;font-size:14.5px;text-decoration:none;transition:color .15s}
.fuss--neu .fuss2__raster a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
/* Kontaktwege: Zeichen gedaempft, Wert weiss. Die Zeichen stehen in Strich und Groesse wie
   das Instagram-Zeichen (website-inhalt.mjs), damit die drei Zeilen eine Reihe bilden. */
.fuss--neu .fuss2__raster .fuss2__weg{gap:10px;color:#fff;font-weight:600;font-size:15px}
.fuss--neu .fuss2__raster .fuss2__weg:hover{color:#6ECFF5;text-decoration:none}
.fuss--neu .fuss2__weg svg{flex:none;color:#8FA9C2;transition:color .15s}
.fuss--neu .fuss2__weg:hover svg{color:#6ECFF5}
.fuss--neu .fuss2__ort address{font-style:normal;font-size:14.5px;line-height:1.6;color:#D6E3EE}
.fuss--neu .fuss2__zeiten{margin:12px 0 0;font-size:14.5px;line-height:1.6;color:#B9CBDD}
.fuss--neu .fuss2__zeiten b{color:#fff;font-weight:600}
/* Die Linklisten sind <details open>. Am Schreibtisch sehen sie aus wie eine Spalte mit
   Kopf: kein Dreieck, kein Handzeiger (website.js sperrt dort auch das Zuklappen). */
.fuss2__gruppe > summary{display:block;list-style:none;cursor:default}
.fuss2__gruppe > summary::-webkit-details-marker{display:none}
.fuss2__unten{margin-top:0}
.fuss--neu .fuss2__unten > span{color:#8FA9C2}
/* 901 bis 1100 px (kleine Laptops, iPad quer): weiter vier Spalten, aber so breit wie ihr Inhalt,
   der Rest wird Luft dazwischen. Gleich breite Spalten sind dort zu schmal fuer die E-Mail-Adresse;
   zwei Spalten mit offenen Listen (bis zur Pruefung am 28.09.2026) machten den Fuss HOEHER als am
   Handy: 946 px bei 1024 px Breite, 1.056 px mit Touch. */
@media (max-width:1100px) and (min-width:901px){
  .fuss2__raster{grid-template-columns:repeat(4,auto);justify-content:space-between;column-gap:24px}
}
@media (pointer:coarse){.fuss--neu .fuss2__raster a{min-height:44px}}

/* Studio-Credit: mittig unter dem Fuss, Bauart wie speed4you und fb-erdbau. */
.fcred{text-align:center;padding:22px 16px 26px;line-height:1.45;border-top:1px solid rgba(255,255,255,.14)}
.fcred__marke{display:inline-block;text-decoration:none;color:inherit}
.fcred__k{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#8FA9C2;font-weight:600}
.fcred__m{display:block;font-family:var(--kopf);font-size:19px;font-weight:700;letter-spacing:-.04em;color:#fff;margin-top:7px}
.fcred__m span{color:#F26522}
.fcred__marke:hover .fcred__m{color:#6ECFF5}
.fcred__s{display:block;font-size:12px;letter-spacing:.02em;color:#8FA9C2;margin-top:8px}
.fcred__s a{color:#B9CBDD;text-decoration:underline;text-underline-offset:3px}
.fcred__s a:hover{color:#fff}
/* Schmal und am Finger nicht unter 13 px (mobil-audit), Spaltenkoepfe des Fusses ebenso. Die alte Credit-Klasse .fuss__credit-k hatte diese Regel
   in website.css; beim Umzug auf .fcred (19.09.2026) blieb sie dort zurueck. */
@media (max-width:900px),(pointer:coarse){.fcred__k{font-size:13px;letter-spacing:.12em}.fcred__s{font-size:13px}.fuss--neu .fuss2__raster h3{font-size:13px}}
@media (pointer:coarse){
  /* .fuss a macht unter pointer:coarse jeden Verweis zur Flex-ZEILE (website.css, 0,1,1). Die
     Marke lag damit bis 28.09.2026 am Handy als „KONZEPT & UMSETZUNG barzik." in einer Zeile. */
  .fuss .fcred__marke{flex-direction:column;padding:6px 12px}
  .fcred__s a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
}

/* Schmaler Fuss (bis 900 px, dieselbe Grenze wie das Menue und website.js): Kontakt und
   Anschrift nebeneinander, darunter die zwei Linklisten als Klappzeilen ueber die volle
   Breite. Bis 28.09.2026 hing das nur an 640 px; das Handy quer (852 px) bekam dann offene
   Listen mit 13 px hohen Spaltenkoepfen, die als Knopf zaehlen, aber nichts tun.
   ⚠️ Keine Schrift unter 13 px: mobil-audit meldet jede Zeile darunter. */
@media (max-width:900px){
  .fuss2__raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;padding:28px 0 0}
  .fuss2__raster > .fuss2__spalte{padding-bottom:26px}
  .fuss--neu .fuss2__raster h3{font-size:13px;margin-bottom:8px}
  .fuss2__gruppe{grid-column:1 / -1;border-top:1px solid rgba(255,255,255,.16)}
  .fuss2__gruppe > summary{display:flex;align-items:center;justify-content:space-between;min-height:52px;cursor:pointer}
  .fuss2__gruppe > summary::after{content:"";width:8px;height:8px;margin-right:6px;border-right:2px solid #B9CBDD;border-bottom:2px solid #B9CBDD;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
  .fuss2__gruppe[open] > summary::after{transform:translateY(2px) rotate(-135deg)}
  .fuss--neu .fuss2__gruppe h3{margin:0;color:#D6E3EE}
  .fuss--neu .fuss2__gruppe ul{padding-bottom:12px}
  .fuss--neu .fuss2__raster a{font-size:15px}
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){.fuss2__gruppe > summary::after{transition:none}}
/* Handy hoch: alles in einer Spalte, Anschrift und Zeiten nebeneinander. */
@media (max-width:640px){
  .fuss.fuss--neu{padding:36px 0 0}
  .fuss2__kopf{padding-bottom:22px;gap:14px;align-items:flex-start;flex-direction:column}
  .fuss2__absender{flex:none}
  .fuss--neu .fuss__marke svg{width:30px;height:30px}
  .fuss--neu .fuss__marke .marke__wort{font-size:20px}
  .fuss--neu .fuss__marke .marke__sub{display:none}
  .fuss2__claim{font-size:22px}
  .fuss--neu .fuss2__gebiet{font-size:14px;margin-top:6px}
  .fuss2__tat{width:100%;display:grid;gap:10px}
  .fuss2__tat .knopf{width:100%}
  .fuss2__raster{grid-template-columns:minmax(0,1fr);padding-top:22px}
  .fuss2__raster > .fuss2__spalte{padding-bottom:0}
  .fuss--neu .fuss2__raster h3{margin-bottom:6px}
  .fuss2__ort{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
  .fuss2__raster > .fuss2__ort{padding:18px 0 22px}
  .fuss2__ort h3{grid-column:1 / -1}
  .fuss--neu .fuss2__ort address,.fuss--neu .fuss2__zeiten{font-size:14px;margin:0}
  .fuss2__unten{padding-top:14px;gap:4px 16px;flex-direction:column-reverse;align-items:flex-start;font-size:13px;padding-bottom:10px}
  .fuss2__unten nav{gap:14px;width:100%}
  .fuss--neu .fuss2__unten a{min-height:36px;font-size:13.5px;padding:0}
}


/* ── Abweichung vom Handoff: Beruehrungsziele ─────────────────────────────────────────
   Gemessen am 18.09.2026 im echten Chrome auf Tablet, Handy und Handy-Querformat. Der
   Handoff unterschreitet an fuenf Stellen die 44 px, die diese Website seit dem 08.09.2026
   ueberall einhaelt (Fuss-Umbau nach Nutzerkritik):
     Zaehler im Rechner 42x42 · Fusszeile Impressum/Datenschutz/AGB 36 px hoch (AGB seit 28.09.2026 weg) ·
     E-Mail-Zeile im Fuss 20 px · barzik./modvio 18 px · Google-Wertung in der Kachel 27 px.
   Korrigiert wird NUR unter pointer:coarse — am Schreibtisch bleibt das Raster des Handoffs
   unveraendert, auf dem Finger wird es bedienbar. */
.zaehler button{width:44px;height:44px}
@media (pointer:coarse){
  .fuss--neu .fuss2__unten a{min-height:44px}
  /* 46 statt 44: mit exakt 44 meldete pruefe.mjs am 19.09.2026 weiter „44x44 unter 44 px" —
     die tatsaechliche Hoehe lag durch die Zeilenhoehe knapp darunter und wurde nur gerundet
     angezeigt. Zwei Pixel Luft sind billiger als ein Waechter, den man wegdiskutiert. */
  .kachel4 h3 a,.kachel4__wert a{display:inline-flex;align-items:center;justify-content:center;min-height:46px;min-width:46px}
  .bew-wert{min-height:44px}
}
@media (pointer:coarse){
  /* „AGB" (bis 28.09.2026 im Fuss) war ein kurzes Wort: 44 px hoch nach der Regel oben, aber nur 25 px
     breit. Ein Beruehrungsziel gilt in BEIDE Richtungen. */
  .fuss--neu .fuss2__unten a{min-width:44px;justify-content:center}
}



/* Ergänzungen aus dem Website-Auftrag 09.10.2026. Bestehende Farben und Knöpfe. */
.nav__kontakt{display:none}
.leistung-text{max-width:760px;margin-top:32px}
.leistung-text h3{margin-bottom:10px}
.leistung-text p,.einsatzgebiet p{font-size:17px;line-height:1.7}
.einsatzgebiet h2{margin-bottom:16px}
.einsatzgebiet p{max-width:860px}
.termin-auswahl{margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid var(--linie)}
.termin-auswahl p{margin-top:12px;line-height:1.6;overflow-wrap:anywhere}
.preisleiste{display:none}
#rechner-ergebnis{scroll-margin-top:110px}
@media(max-width:900px){
  .nav--gees .bahn{gap:8px}
  .nav__kontakt{display:flex;margin-left:auto;gap:2px}
  .nav__kontakt a{display:flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--navy);border-radius:8px;transition:background .2s}
  .nav__kontakt a:hover{background:#E7F0F7}
  .nav--glas:not(.nav--klein) .nav__kontakt a{color:#fff}
  .nav--glas:not(.nav--klein) .nav__kontakt a:hover{background:var(--navy)}
  .nav--gees:has(.nav__klapp[open]) .nav__kontakt{visibility:hidden}
  .nav--gees .nav__klapp{margin-left:0}
  .preisleiste:not([hidden]){display:flex;align-items:center;justify-content:space-between;gap:14px;position:fixed;bottom:0;left:0;right:0;z-index:40;padding:12px 20px calc(12px + env(safe-area-inset-bottom));background:var(--navy);color:#fff;box-shadow:0 -3px 16px rgba(0,0,0,.15)}
  .preisleiste b{display:block;font-size:23px;line-height:1.2}
  .preisleiste span{display:block;font-size:13px;margin-top:4px}
  .preisleiste .knopf{min-height:44px;padding:0 20px}
  body.hat-preisleiste{padding-bottom:calc(90px + env(safe-area-inset-bottom))}
  body:has(.nav__klapp[open]) .preisleiste{display:none}
}
@media(pointer:coarse){.einsatzgebiet a{display:inline-flex;align-items:center;min-height:44px}.leistung-text a{display:inline-flex;align-items:center;min-height:44px}}
@media(max-width:420px){
  .nav--gees .marke__sub{display:none}
  .nav--gees .marke{gap:6px;--nav-wort:20px;--nav-zeichen:32px}
}
@media(max-width:380px){
  .nav--gees .nav__auf{font-size:0;gap:0;min-width:44px;justify-content:center}
  .extras .karte{min-width:0}
  .extras .knopf{white-space:normal;text-align:center;max-width:100%}
}