/* =========================================================================
   KFZ-MEISTERBETRIEB WENDLAND : Design-System der Musterseite 3
   Rein statische Seite, kein Framework, keine fremden Hosts.

   CORPORATE DESIGN WECHSELN: nur den :root-Block anfassen.
   Alles Weitere leitet sich daraus ab.

   FARBREGEL, vier Rollen, jede mit genau einer Bedeutung:

     warm hell   Inhalt. Der Held und ALLE Kopfbaender sind hell. Das ist
                 die Signatur dieser Seite und der Unterschied zu den
                 beiden anderen Arbeitsproben der Agentur, die beide
                 dunkle Helden mit Text links haben. Es entspricht
                 ausserdem der Branche: alle 21 vermessenen Seiten sind
                 hell, und die Palette ist auf Weiss gerechnet.

     Anthrazit   IMMER der Terminweg und der Absender. Terminkarte im
                 Held, Terminband, Terminkarte der Nebenspalte,
                 gescrollte Kopfleiste, feste Handyleiste, Fussbereich,
                 Kennzahlenband, Fotokacheln. Dazu genau EINE Ausnahme,
                 die grosse Kundenstimme: sie traegt den Abschnitt, in
                 dem sonst nur helle Karten stuenden. Nie blosse
                 Dekoration, und nie ein zweites Mal je Abschnitt.

     Kupfer      Ordnung und Auszeichnung. Schrittzahlen, Symbolflaechen,
                 Etiketten, Kennzahllinien, die Markierung im Held.
                 Grafikfarbe, kein Bedienelement: NIE auf einem Knopf, nie
                 auf einem Link, nie bei Hover. Sie sagt nirgends "hier
                 klicken".

     Signalgruen Die eine Handlung. Ausschliesslich auf den Knoepfen zur
                 Terminanfrage, hoechstens acht Mal je Seite. Nirgends
                 sonst: keine gruenen Sterne, keine gruenen Linien, kein
                 gruenes Logo, und seit dem 22.8.2026 auch keine gruene
                 Statuspille "Jetzt geoeffnet" mehr. Zweitrangige Knoepfe
                 sind dunkel oder umrandet.

   Kupfer und Gruen liegen 94 Grad auseinander (CIELCh h 51 gegen 145), also
   weiter als die 27,5 Grad, die Kupfer und das alte Signalgelb trennten.
   Der Bauplan fuehrt "zwei Gelbtoene nebeneinander" als Fehlerbild der
   Konkurrenz; mit Gruen ist diese Falle gar nicht erst in Reichweite.

   Formregel: Knoepfe und Eingabefelder 8 px, Karten und Bilder 12 px,
   einzig die Statuspille ist rund. Keine Ausnahmen.

   Schriftregel: Saira Condensed traegt alle Ueberschriften, Kennzahlen,
   Preise und die grosse Rufnummer. IBM Plex Sans alles andere. Keine
   Versalien auf Knoepfen.

   Massstab (gemessen an 21 Seiten der Branche, siehe Plan):
   H1 60 px Rechner / 38 px Handy (Verhaeltnis 0,63, der Wert von Bosch),
   Fliesstext 17 px / 16 px bei Zeilenhoehe 1,6, nirgends unter 16 px.
   ========================================================================= */

:root{
  /* --- Flaechen, warm statt kalt ---------------------------------------
     grund-2 und grund-3 lagen bei Farbton 210 Grad, also blaeulich. Das war
     der Hauptgrund, warum die Seite unterhalb des Helds kuehl wirkte: acht
     Abschnitte in Weiss und Blaugrau hintereinander. Jetzt 34 Grad, dieselbe
     Familie wie das Kupfer. ---------------------------------------------- */
  --grund:#FFFFFF;          /* Standardflaeche                              */
  --grund-2:#F7F4F0;        /* jeder zweite Abschnitt, Trennung ohne Linie  */
  --grund-3:#E9E4DD;        /* Rahmen, Trenner, Tabellenzeilen              */
  --anker:#14181D;          /* Terminwege, Fuss, dunkle Baender             */
  --anker-2:#232A31;        /* Karten auf dunklem Grund                     */
  --anker-3:#2E363E;        /* Rahmen auf dunklem Grund                     */

  /* --- Kupfer: Grafikfarbe, nie auf Knoepfen ---------------------------
     Drei Stufen auf demselben CIELCh-Farbton (h etwa 51 Grad), also eine
     Familie und nicht drei zufaellige Brauntoene. Kontraste nachgerechnet. */
  --kupfer:#A9542B;         /* 5,26 auf Weiss, 4,80 auf grund-2             */
  --kupfer-hell:#E07A4E;    /* 6,00 auf anker, 4,88 auf anker-2             */
  --kupfer-tief:#83401F;    /* 7,73 auf Weiss, 6,23 auf kupfer-blass        */
  --kupfer-blass:#F5E4D4;   /* Symbolflaechen                               */
  --kupfer-1:#C97646;       /* Schrittzahl 1, 3,4 auf Weiss (Grossschrift)  */
  --kupfer-nacht:#5E2E14;   /* tiefste Stufe, traegt den Karriere-Streifen  */

  /* --- Marken-Textur ---------------------------------------------------
     Sehr feiner diagonaler Streifen fuer dunkle Flaechen. Gibt dem Anthrazit
     Material, statt es als Loch wirken zu lassen. Reines CSS, keine Datei.

     Am 22.8.2026 aus dem HELD genommen, auf Wunsch des Inhabers: ueber dem
     Werkstattfoto und auf der Terminkarte waren die Striche stoerend
     sichtbar, weil sie sich dort an der Bildstruktur brechen. Auf glattem
     Anthrazit tut sie das nicht, deshalb traegt sie das Terminband und der
     Fussbereich weiter. Wer sie ueberall loswerden will, setzt hier `none`,
     das nimmt sie aus beiden verbliebenen Flaechen. */
  --textur:repeating-linear-gradient(135deg,rgba(255,255,255,.030) 0 1px,transparent 1px 9px);

  /* --- Signal, nur der Hauptaufruf ------------------------------------
     GRUEN seit dem 22.8.2026, vorher Signalgelb #FFB300.
     Grund ist nicht Geschmack, sondern die Nachbarschaft: auf der
     Referenzseite der Agentur stehen vier Arbeitsproben nebeneinander, und
     Malerbetrieb Berlin (Orange, ~25 Grad), Personal Training (Bernstein,
     ~40 Grad) und dieses Gelb (~42 Grad) lagen alle in derselben Ecke des
     Farbkreises. Gruen bei ~145 Grad ist die groesste freie Luecke: Petrol
     (Osnabrueck) liegt bei ~190, Ultramarin (die Agentur selbst) bei ~245.
     Zur Sache passt es auch, gruen heisst "Termin frei".

     WER DAS AENDERT, aendert vier Stellen: hier, den Schattenton bei
     .kw-btn-signal, die Zeichenkette in bauen.py (signal()) und den
     rgb()-Vergleich in pruefen.py. Die beiden Pruefer lesen die Farbe
     nicht aus dem CSS, sie kennen sie auswendig. */
  --signal:#19C25F;
  --signal-hover:#14A851;
  --auf-signal:#14181D;     /* 7,6:1 auf der Signalfarbe                    */

  /* --- Text ----------------------------------------------------------- */
  --text:#1C2126;           /* 15,3:1 auf Weiss, 14,79:1 auf grund-2        */
  --text-leise:#5A646E;     /* 5,2:1 auf Weiss, 5,50:1 auf grund-2          */
  --text-hell:#FFFFFF;
  --text-hell-leise:rgba(255,255,255,.74);
  --linie-hell:rgba(255,255,255,.14);
  --linie-feld:#948C84;     /* Umriss von Eingabefeldern, 3,31 auf Weiss.
                               WCAG 1.4.11 verlangt 3,0 fuer Bedienelemente,
                               der alte Wert #AEB6BE lag bei 2,05.          */
  /* "Jetzt geoeffnet" war bis zum 22.8.2026 gruen (#0B7A4B). Seit die
     Signalfarbe gruen ist, faellt das weg: eine Farbe, eine Bedeutung, und
     Gruen gehoert jetzt der einen Handlung. Offen und geschlossen
     unterscheiden sich ueber Punktfarbe und Schriftfarbe, nicht ueber den
     Farbton. */
  --status-auf:#1C2126;     /* "Jetzt geoeffnet" auf hellem Grund           */

  /* --- Schrift -------------------------------------------------------- */
  --s-kopf:"Saira Condensed","Arial Narrow","Roboto Condensed",sans-serif;
  --s-text:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  /* Die Zwischenwerte sind Geraden durch 390 und 1440 px Fensterbreite. */
  --fs-h1:clamp(38px,29.8px + 2.095vw,60px);
  --fs-h2:clamp(28px,23.5px + 1.143vw,40px);
  --fs-h3:clamp(20px,18.5px + .381vw,24px);
  --fs-lead:clamp(18px,17.25px + .19vw,20px);
  --fs-text:clamp(16px,15.6px + .0952vw,17px);
  --fs-klein:14px;
  --fs-etikett:13px;
  --fs-zahl:clamp(36px,31.5px + 1.143vw,48px);
  --fs-preis:clamp(28px,25px + .76vw,36px);

  /* --- Form ----------------------------------------------------------- */
  --r-knopf:8px;
  --r-feld:8px;
  --r-karte:12px;

  /* --- Raster und Abstaende ------------------------------------------- */
  --max:1200px;
  --max-eng:800px;
  --rand:clamp(18px,4vw,40px);
  --sek-y:clamp(56px,7vw,104px);
  --nav-h:72px;
  --leiste-h:68px;

  /* --- Schatten, in den Anker getoent, nie reines Schwarz -------------- */
  --schatten-s:0 1px 2px rgba(20,24,29,.06),0 2px 10px rgba(20,24,29,.06);
  --schatten-m:0 2px 4px rgba(20,24,29,.05),0 14px 34px rgba(20,24,29,.12);

  --uebergang:.26s cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}

/* --- Schriften, selbst gehostet. Saira Condensed in drei Schnitten,
       IBM Plex Sans als Variable Font mit einer Datei je Zeichenbereich. --- */
@font-face{font-family:"Saira Condensed";font-style:normal;font-weight:600;font-display:swap;
  src:url("/assets/schriften/saira-condensed-600-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:"Saira Condensed";font-style:normal;font-weight:600;font-display:swap;
  src:url("/assets/schriften/saira-condensed-600-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:"Saira Condensed";font-style:normal;font-weight:700;font-display:swap;
  src:url("/assets/schriften/saira-condensed-700-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:"Saira Condensed";font-style:normal;font-weight:700;font-display:swap;
  src:url("/assets/schriften/saira-condensed-700-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:"Saira Condensed";font-style:normal;font-weight:800;font-display:swap;
  src:url("/assets/schriften/saira-condensed-800-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:"Saira Condensed";font-style:normal;font-weight:800;font-display:swap;
  src:url("/assets/schriften/saira-condensed-800-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:"IBM Plex Sans";font-style:normal;font-weight:100 700;font-display:swap;
  src:url("/assets/schriften/plex-sans-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:"IBM Plex Sans";font-style:normal;font-weight:100 700;font-display:swap;
  src:url("/assets/schriften/plex-sans-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}

/* =========================================================================
   Grundlagen
   ========================================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:var(--s-text);
  font-size:var(--fs-text);
  line-height:1.6;
  color:var(--text);
  background:var(--grund);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  margin:0;
  font-family:var(--s-kopf);
  color:var(--anker);
  text-wrap:balance;
}
h1{font-size:var(--fs-h1);font-weight:800;line-height:1.05;letter-spacing:-.02em}
h2{font-size:var(--fs-h2);font-weight:700;line-height:1.15;letter-spacing:-.01em}
h3{font-size:var(--fs-h3);font-weight:700;line-height:1.3}
h4{font-size:18px;font-weight:700;line-height:1.3}
p{margin:0 0 1em;text-wrap:pretty}
p:last-child{margin-bottom:0}
a{color:var(--anker);text-decoration-thickness:1px;text-underline-offset:3px}
img{max-width:100%;height:auto;display:block}
ul,ol{margin:0 0 1em;padding-left:1.15em}
strong{font-weight:600}
svg{flex:none}
:focus-visible{outline:3px solid var(--anker);outline-offset:3px;border-radius:4px}
.kw-band :focus-visible,.kw-fuss :focus-visible,.kw-schub :focus-visible,
.kw-leiste :focus-visible,.kw-stimme-gross :focus-visible,
.kw-heldkarte :focus-visible,.kw-kachel-foto :focus-visible,
.kw-nav.ist-fest :focus-visible,.kw-schub-schalter:checked ~ .kw-nav :focus-visible,
.kw-nebenkarte-dunkel :focus-visible{outline-color:#fff}

.kw-nur-vorleser{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.kw-sprung{position:absolute;left:-999px;top:8px;z-index:100;background:var(--anker);color:#fff;padding:10px 16px;border-radius:var(--r-knopf);text-decoration:none;font-weight:600}
.kw-sprung:focus{left:8px}

.kw-bahn{max-width:var(--max);margin:0 auto;padding:0 var(--rand)}
.kw-bahn-eng{max-width:var(--max-eng);margin:0 auto;padding:0 var(--rand)}
.kw-sek{padding:var(--sek-y) 0}
.kw-sek-hell{background:var(--grund-2)}
.kw-sek-knapp{padding:clamp(36px,4.5vw,64px) 0}
.kw-sek-oben-weg{padding-top:0}

/* --- Sektionskopf ------------------------------------------------------ */
.kw-kopf{max-width:740px;margin-bottom:clamp(28px,4vw,46px)}
.kw-kopf-mitte{margin-left:auto;margin-right:auto;text-align:center}
.kw-kopf h2,.kw-kopf h1{margin-bottom:14px}
.kw-lead{font-size:var(--fs-lead);line-height:1.5;color:var(--text-leise)}
.kw-etikett{display:inline-flex;align-items:center;margin-bottom:14px;font-size:var(--fs-etikett);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--kupfer-tief);line-height:1.2}
.kw-etikett::before{content:"";width:20px;height:2px;margin-right:10px;background:var(--kupfer);flex:none}
.kw-etikett-hell{color:var(--text-hell-leise)}
.kw-etikett-hell::before{background:var(--kupfer-hell)}

/* =========================================================================
   Knoepfe und Links
   ========================================================================= */
.kw-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:13px 28px;border-radius:var(--r-knopf);
  font-family:var(--s-text);font-size:17px;font-weight:700;line-height:1.2;
  text-decoration:none;border:2px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .15s ease,box-shadow var(--uebergang),background var(--uebergang),border-color var(--uebergang);
}
.kw-btn svg{width:20px;height:20px;transition:transform var(--uebergang)}
.kw-btn:hover svg{transform:translateX(3px)}
.kw-btn:active{transform:translateY(1px) scale(.985)}
.kw-btn-signal{background:var(--signal);color:var(--auf-signal);box-shadow:0 1px 0 rgba(20,24,29,.10),0 8px 20px rgba(25,194,95,.24)}
.kw-btn-signal:hover{background:var(--signal-hover);transform:translateY(-1px);box-shadow:0 12px 26px rgba(25,194,95,.32)}
.kw-btn-dunkel{background:var(--anker);color:#fff}
.kw-btn-dunkel:hover{background:var(--anker-2)}
.kw-btn-hell{background:transparent;color:#fff;border-color:rgba(255,255,255,.38)}
.kw-btn-hell:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.kw-btn-rand{background:transparent;color:var(--anker);border-color:var(--anker)}
.kw-btn-rand:hover{background:var(--anker);color:#fff}
.kw-btn-klein{min-height:48px;padding:11px 18px;font-size:16px}
.kw-btn-klein svg{width:18px;height:18px}

.kw-pfeil{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--anker);text-decoration:none;border-bottom:2px solid var(--grund-3);padding-bottom:1px;transition:border-color var(--uebergang)}
.kw-pfeil svg{width:18px;height:18px;transition:transform var(--uebergang)}
.kw-pfeil:hover{border-color:var(--anker)}
.kw-pfeil:hover svg{transform:translateX(3px)}
.kw-pfeil-hell{color:#fff;border-color:var(--linie-hell)}
.kw-pfeil-hell:hover{border-color:#fff}

.kw-tel{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:inherit;text-decoration:none;white-space:nowrap}
.kw-tel svg{width:20px;height:20px}

.kw-aktion{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center}
@media (max-width:600px){
  .kw-aktion .kw-btn:not(.kw-btn-klein){width:100%}
}

/* =========================================================================
   Kopfleiste
   Ueber dem dunklen Kopf jeder Seite durchsichtig, ab 24 px Scrollweg
   mit Grund (Klasse ist-fest, gesetzt von seite.js).
   ========================================================================= */
/* Die Kopfleiste steht ueber hellem Grund und wechselt beim Scrollen die
   Tinte. Statt jede Regel zweimal zu schreiben, haengt alles an vier
   Variablen; umgestellt werden sie an genau einer Stelle. Der Wechsel
   laeuft weich, weil die abhaengigen Eigenschaften ihre Uebergaenge
   behalten, auch wenn der Wert aus einer Variablen kommt. */
.kw-nav{
  position:fixed;top:0;left:0;right:0;z-index:50;height:var(--nav-h);
  --nav-ink:var(--text);
  --nav-ink-leise:var(--text-leise);
  --nav-marke-grund:var(--anker);
  --nav-marke-ink:#fff;
  --nav-hover:rgba(20,24,29,.06);
  color:var(--nav-ink);
  transition:background var(--uebergang),box-shadow var(--uebergang),color var(--uebergang);
}
.kw-nav.ist-fest,
.kw-schub-schalter:checked ~ .kw-nav{
  --nav-ink:#fff;
  --nav-ink-leise:var(--text-hell-leise);
  --nav-marke-grund:#fff;
  --nav-marke-ink:var(--anker);
  --nav-hover:rgba(255,255,255,.09);
}
.kw-nav.ist-fest{background:rgba(20,24,29,.96);box-shadow:0 1px 0 rgba(255,255,255,.06),0 8px 24px rgba(0,0,0,.22);-webkit-backdrop-filter:saturate(140%) blur(8px);backdrop-filter:saturate(140%) blur(8px)}
/* Die Startseite ist die einzige Seite mit `.kw-hero`, alle uebrigen tragen
   ein helles `.kw-kopfband`. Ueber dem Foto steht die Kopfleiste deshalb von
   Anfang an in heller Tinte; beim Scrollen aendert sich dann nur noch der
   Grund, nicht mehr die Schrift. */
body:has(.kw-hero) .kw-nav{
  --nav-ink:#fff;
  --nav-ink-leise:var(--text-hell-leise);
  --nav-marke-grund:#fff;
  --nav-marke-ink:var(--anker);
  --nav-hover:rgba(255,255,255,.09);
  text-shadow:0 1px 14px rgba(20,24,29,.55);
}
/* Sobald die Leiste ihren eigenen Grund hat, braucht sie den Schatten nicht
   mehr, und auf 96 Prozent Anthrazit wuerde er die Schrift nur weichzeichnen. */
body:has(.kw-hero) .kw-nav.ist-fest,
.kw-schub-schalter:checked ~ .kw-nav{text-shadow:none}
body:has(.kw-hero) .kw-nav :focus-visible{outline-color:#fff}
.kw-nav-innen{max-width:var(--max);margin:0 auto;padding:0 var(--rand);height:100%;display:flex;align-items:center;gap:24px}

.kw-logo{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;flex:none}
.kw-logo-mark{width:42px;height:42px;border-radius:var(--r-knopf);background:var(--nav-marke-grund);color:var(--nav-marke-ink);font:800 25px/42px var(--s-kopf);text-align:center;letter-spacing:-.02em;transition:background var(--uebergang),color var(--uebergang)}
.kw-logo-text{display:flex;flex-direction:column;line-height:1.05}
.kw-logo-text strong{font:700 20px/1 var(--s-kopf);letter-spacing:.07em;text-transform:uppercase}
.kw-logo-text span{font-size:11.5px;color:var(--nav-ink-leise);margin-top:4px;letter-spacing:.01em;transition:color var(--uebergang)}

.kw-menue{display:flex;gap:2px;list-style:none;margin:0 0 0 auto;padding:0}
.kw-menue > li > a{display:block;padding:10px 12px;color:var(--nav-ink);font-size:16px;font-weight:500;text-decoration:none;border-radius:6px;white-space:nowrap;transition:background var(--uebergang),color var(--uebergang),box-shadow var(--uebergang)}
.kw-menue > li > a:hover{background:var(--nav-hover)}
.kw-menue > li > a[aria-current="page"]{box-shadow:inset 0 -2px 0 currentColor}
.kw-menue > li > a svg{width:16px;height:16px;vertical-align:-3px;margin-left:2px}
.kw-stellen-marker{display:inline-block;margin-left:7px;padding:2px 7px;border-radius:6px;background:var(--nav-hover,rgba(255,255,255,.14));font-size:12px;font-weight:600;vertical-align:1px}

.kw-klapp{position:relative}
.kw-klapp-inhalt{position:absolute;top:calc(100% + 6px);left:0;min-width:320px;margin:0;padding:8px;list-style:none;background:#fff;color:var(--text);border-radius:var(--r-karte);box-shadow:var(--schatten-m);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity var(--uebergang),transform var(--uebergang),visibility 0s linear .26s}
.kw-klapp:hover .kw-klapp-inhalt,.kw-klapp:focus-within .kw-klapp-inhalt{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.kw-klapp-inhalt a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;color:var(--text);text-decoration:none;font-size:16px;font-weight:500}
.kw-klapp-inhalt a:hover{background:var(--grund-2)}
.kw-klapp-inhalt a svg{width:22px;height:22px;color:var(--anker)}
.kw-klapp-inhalt a small{display:block;color:var(--text-leise);font-size:13px;font-weight:400}
.kw-klapp-inhalt li:last-child a{margin-top:4px;border-top:1px solid var(--grund-3);border-radius:0 0 8px 8px;padding-top:14px;font-weight:600}

.kw-nav-rechts{display:flex;align-items:center;gap:18px;flex:none}
.kw-nav-tel{display:inline-flex;align-items:center;gap:8px;color:var(--nav-ink);transition:color var(--uebergang);font-weight:600;text-decoration:none;white-space:nowrap;font-size:16px}
.kw-nav-tel svg{width:20px;height:20px}

.kw-brenner{display:none;width:44px;height:44px;border-radius:var(--r-knopf);color:var(--nav-ink);cursor:pointer;align-items:center;justify-content:center}
.kw-brenner svg{width:28px;height:28px}
.kw-brenner .kw-ico-zu{display:none}
.kw-schub-schalter{position:absolute;top:0;left:0;width:1px;height:1px;min-height:0;margin:0;padding:0;opacity:0;pointer-events:none}

/* Schublade */
.kw-schub{position:fixed;inset:var(--nav-h) 0 0 0;z-index:45;background:var(--anker);color:#fff;padding:18px var(--rand) 40px;overflow-y:auto;transform:translateX(100%);visibility:hidden;transition:transform var(--uebergang),visibility 0s linear .26s}
.kw-schub ul{list-style:none;margin:0;padding:0}
.kw-schub > ul > li > a{display:block;padding:14px 0;font:600 26px/1.15 var(--s-kopf);color:#fff;text-decoration:none;border-bottom:1px solid var(--linie-hell)}
.kw-schub .kw-schub-unter a{display:block;padding:9px 0 9px 18px;color:var(--text-hell-leise);text-decoration:none;font-size:16px}
.kw-schub .kw-schub-unter:last-of-type a{padding-bottom:16px}
.kw-schub-fuss{display:grid;gap:12px;margin-top:26px}
.kw-schub-fuss .kw-btn{width:100%}
.kw-schub-schalter:checked ~ .kw-nav{background:var(--anker)}
.kw-schub-schalter:checked ~ .kw-schub{transform:none;visibility:visible;transition-delay:0s}
.kw-schub-schalter:checked ~ .kw-nav .kw-ico-auf{display:none}
.kw-schub-schalter:checked ~ .kw-nav .kw-ico-zu{display:block}

@media (max-width:1199px){
  .kw-nav-tel span{display:none}
}
@media (max-width:1023px){
  .kw-menue,.kw-nav-tel{display:none}
  .kw-brenner{display:inline-flex}
  .kw-nav-innen{gap:12px}
  .kw-nav-rechts{margin-left:auto;gap:8px}
}
@media (max-width:420px){
  .kw-nav-cta{display:none}
}

/* =========================================================================
   Held der Startseite: die eigene Halle im Grund, Terminkarte rechts

   Bis zum 22.8.2026 stand der Held auf leerer warmer Flaeche und das Foto
   lief als Band darunter. Am Rechner waren das 800 px Hoehe mit 500 px Luft,
   und das einzige Bild des Betriebs kam erst nach dem ersten Fenster. Jetzt
   liegt das Foto ganzflaechig dahinter.

   Die Ordnung ist geblieben: links das Versprechen, rechts der kuerzeste Weg
   zum Termin. Der Unterschied zu den beiden anderen Arbeitsproben ist damit
   nicht mehr die Helligkeit, sondern die Terminkarte; die Kopfbaender der 16
   Unterseiten bleiben hell und tragen kein Foto.

   Der Schleier ist links dicht und rechts duenn. Das ist kein Geschmack,
   sondern die Bedingung: der Text braucht 4,5:1 auf einem Foto mit weisser
   Wand und weissem Boden, die Halle soll aber neben der Karte noch als Halle
   zu erkennen sein.

   Die Knoepfe der Karte sind dunkel, nicht gelb. Die Signalfarbe bleibt
   damit bei acht je Seite, und die Zahl der Flaechen-CTAs bei sechs.
   ========================================================================= */
.kw-hero{
  position:relative;overflow:hidden;
  background:var(--anker);color:#fff;
  padding:calc(var(--nav-h) + clamp(34px,4.5vw,58px)) 0 clamp(44px,5vw,74px);
}
/* Das Foto haengt am RECHTEN Rand und ragt links ueber die Bahn hinaus.
   Grund: `object-fit:cover` beschnitt am Rechner gar nichts waagerecht (Bild
   1600x1000 in 1440x722 deckt ueber die Breite), also war `object-position`
   in dieser Achse wirkungslos, und der Wagen mit der offenen Motorhaube
   stand ganz rechts hinter der Terminkarte. 20 Prozent Ueberhang nach links
   schieben ihn in die Luecke zwischen Textspalte und Karte. Prozent, nicht
   Pixel: so bleibt der Anteil bei jeder Fensterbreite gleich. */
.kw-hero-foto{position:absolute;top:0;right:0;bottom:0;left:-20%}
/* height:100% schlaegt die globale Regel img{height:auto}. Durch den
   Ueberhang deckt das Bild jetzt ueber die BREITE, also beschneidet cover
   senkrecht, und 47 Prozent legen Motorhaube und Mechatroniker auf die
   Mittelhoehe des Helds. */
.kw-hero-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 47%}
/* ZWEI Schleier uebereinander MULTIPLIZIEREN sich: 40 Prozent unter 24
   Prozent ergeben nicht 64, sondern 1-(0,60 x 0,76) = 54 Prozent. Wer beide
   nach Gefuehl setzt, bekommt eine schwarze Flaeche, auf der die Halle nicht
   mehr zu erkennen ist. Der senkrechte Schleier deckt deshalb nur noch die
   beiden Kanten (Kopfleiste oben, Uebergang zur Bewertungsleiste unten) und
   laesst die Mitte frei; das Lesbarmachen macht allein der waagerechte.

   Gerechnet auf der hellsten Stelle des Fotos (weisser Hallenboden, relative
   Helligkeit rund 0,60): am rechten Rand der Textspalte deckt der Schleier
   74 Prozent, das ergibt fuer weisse Schrift 5,2:1. */
.kw-hero-foto::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(20,24,29,.66) 0,rgba(20,24,29,.10) 13%,rgba(20,24,29,.06) 58%,rgba(20,24,29,.42) 100%),
    linear-gradient(92deg,rgba(20,24,29,.93) 0,rgba(20,24,29,.90) 28%,rgba(20,24,29,.74) 50%,rgba(20,24,29,.42) 72%,rgba(20,24,29,.32) 100%);
}
.kw-hero-innen{
  position:relative;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,428px);
  gap:clamp(28px,4vw,64px);align-items:center;
  min-height:min(520px,calc(100svh - var(--nav-h) - 170px));
}
.kw-hero-text{min-width:0}
.kw-hero h1{margin:0 0 22px;color:#fff;text-shadow:0 2px 26px rgba(20,24,29,.45)}
.kw-hero :focus-visible{outline-color:#fff}

.kw-zusagen{display:flex;flex-wrap:wrap;gap:10px 24px;list-style:none;margin:0 0 30px;padding:0}
.kw-zusagen li{display:flex;align-items:center;gap:9px;font-weight:500;color:var(--text);font-size:var(--fs-text)}
.kw-zusagen svg{width:24px;height:24px;padding:4px;border-radius:50%;background:var(--kupfer-blass);color:var(--kupfer-tief)}
/* Im Held stehen dieselben Zusagen auf dem Foto: helle Schrift, und die
   Symbolflaeche wird zur getoenten Scheibe statt zum blassen Kupferfleck. */
.kw-hero .kw-zusagen li{color:#fff}
.kw-hero .kw-zusagen svg{background:rgba(224,122,78,.22);color:var(--kupfer-hell)}

.kw-hero-tel{display:inline-flex;flex-direction:column;color:var(--anker);text-decoration:none}
.kw-hero-tel strong{display:inline-flex;align-items:center;gap:8px;font:700 26px/1.1 var(--s-kopf);letter-spacing:.01em}
.kw-hero-tel strong svg{width:22px;height:22px}
.kw-hero-tel span{font-size:14px;color:var(--text-leise);margin-top:3px}
.kw-hero .kw-hero-tel{color:#fff}
/* Kraeftiger als --text-hell-leise (0,74). Auf dem Foto misst die Zeile mit
   0,74 am Handy nur 4,46:1, und das ist unter der Schwelle. Gemessen, nicht
   gerechnet: die Sonde nimmt den hellsten Bildpunkt unter dem Textkasten. */
.kw-hero .kw-hero-tel span{color:rgba(255,255,255,.88)}

.kw-bewertung{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:32px;font-size:16px;color:var(--text-leise)}
.kw-bewertung strong{color:var(--anker);font-weight:600}
.kw-sterne{display:inline-flex;gap:2px;color:var(--anker)}
.kw-sterne svg{width:17px;height:17px}
/* Sterne bleiben neutral, hier also weiss. Gelb waere die Signalfarbe, und
   die gehoert ausschliesslich auf den Terminknopf. */
.kw-hero .kw-bewertung{color:rgba(255,255,255,.88)}
.kw-hero .kw-bewertung strong{color:#fff}
.kw-hero .kw-sterne{color:#fff}

/* Die Markierung im Titel: der Unterstrich braucht auf dem dunklen Grund den
   hellen Kupferton, das Kupferfeld hinter "24 Stunden" traegt weisse Schrift
   mit 5,26:1 und bleibt, wie es ist. */
.kw-hero .kw-marke-strich svg{color:var(--kupfer-hell)}

/* --- Die Terminkarte ---------------------------------------------------
   Anthrazit, weil Anthrazit auf dieser Seite immer der Terminweg ist. Auf
   dem Foto steht sie leicht durchscheinend mit Milchglas dahinter: so bleibt
   erkennbar, dass sie AUF der Halle liegt, statt ein schwarzes Loch hinein
   zu schneiden. Der helle Rand trennt sie von den dunklen Bildstellen. */
.kw-heldkarte{
  position:relative;overflow:hidden;
  padding:clamp(24px,2.4vw,30px);
  background:rgba(20,24,29,.72);
  -webkit-backdrop-filter:saturate(125%) blur(20px);
  backdrop-filter:saturate(125%) blur(20px);
  border:1px solid rgba(255,255,255,.15);
  color:#fff;border-radius:var(--r-karte);
  box-shadow:0 2px 4px rgba(20,24,29,.14),0 26px 60px rgba(20,24,29,.38);
}
.kw-heldkarte h2{color:#fff;font-size:26px;margin-bottom:6px}
.kw-heldkarte > p{color:var(--text-hell-leise);font-size:16px;line-height:1.5;margin:0 0 20px}
.kw-anlassknoepfe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
/* Groesser als die uebliche 48-px-Trefferflaeche, und mit Absicht: diese
   sechs Knoepfe sind der Hauptweg der Karte, nicht ihr Kleingedrucktes. */
.kw-anlassknopf{
  display:flex;align-items:center;gap:12px;min-height:78px;padding:13px 14px;
  background:rgba(35,42,49,.78);border:1px solid rgba(255,255,255,.10);border-radius:12px;
  color:#fff;text-decoration:none;
  transition:background var(--uebergang),border-color var(--uebergang),transform .15s ease;
}
.kw-anlassknopf:hover{background:rgba(52,62,71,.92);border-color:rgba(255,255,255,.20);transform:translateY(-1px)}
.kw-anlassknopf:active{transform:translateY(0)}
.kw-anlassknopf svg{width:40px;height:40px;padding:9px;border-radius:10px;background:rgba(224,122,78,.16);color:var(--kupfer-hell)}
.kw-anlassknopf span{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.kw-anlassknopf strong{font-size:16px;font-weight:600}
.kw-anlassknopf small{font:600 14px/1.3 var(--s-kopf);color:var(--text-hell-leise);margin-top:4px;letter-spacing:.02em}
/* Ein Satz statt Oeffnungsstatus und Rufnummer. Beides stand im ersten Bild
   dreimal, und "Jetzt geschlossen" war der letzte Satz unter sechs
   Terminknoepfen. */
.kw-heldkarte-fuss{display:flex;align-items:center;gap:9px;margin:18px 0 0;padding-top:16px;border-top:1px solid var(--linie-hell);font-size:14.5px;color:var(--text-hell-leise)}
.kw-heldkarte-fuss svg{width:19px;height:19px;color:var(--kupfer-hell)}

@media (max-width:959px){
  /* Einspaltig laeuft der Text ueber die ganze Breite, der waagerechte
     Verlauf traegt ihn dort nicht mehr. Also ein senkrechter, durchgehend
     dicht. */
  .kw-hero-foto::after{
    background:
      linear-gradient(180deg,rgba(20,24,29,.82) 0,rgba(20,24,29,.64) 26%,rgba(20,24,29,.68) 66%,rgba(20,24,29,.88) 100%);
  }
  /* Am Handy ist der Held so hoch wie das Bild, senkrecht wird also gar
     nichts beschnitten; sichtbar bleibt ein Streifen von rund 18 Prozent der
     BREITE. In der Mitte waere das ein Rolltor. 62 Prozent legt den Streifen
     auf die offene Motorhaube und den Mechatroniker. */
  .kw-hero-foto img{object-position:62% 50%}
  .kw-hero-innen{grid-template-columns:1fr;min-height:0;gap:28px}
  .kw-hero h1{max-width:none}
  .kw-bewertung{margin-top:26px}
  /* Ohne Milchglas: die Karte ist hier 700 px hoch und scrollt mit, und der
     Schleier unter ihr ist ohnehin so dicht, dass die Unschaerfe nichts mehr
     zeigt. Ein backdrop-filter dieser Groesse kostet auf schwachen Geraeten
     jede Bildwiederholung. */
  .kw-heldkarte{
    max-width:520px;background:rgba(20,24,29,.86);
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
  /* Ohne Milchglas braucht der Knopf wieder eine eigene Deckung, sonst
     scheint das Foto direkt durch die Beschriftung. */
  .kw-anlassknopf{background:rgba(35,42,49,.94)}
}
@media (max-width:600px){
  .kw-hero-text .kw-aktion{gap:18px}
  .kw-hero-text .kw-aktion .kw-btn{width:100%}
  .kw-heldkarte{padding:20px}
  .kw-heldkarte > p{margin-bottom:16px}
}
/* Unter 400 px stehen die sechs Anlaesse untereinander. In der zweizeiligen
   Form waeren das 528 px allein fuer die Knoepfe und ein Held von fast 1.500
   px. Ueber die ganze Breite passt der Preis daneben statt darunter: gleiche
   Trefferflaeche, 72 px weniger Hoehe. */
@media (max-width:400px){
  .kw-anlassknoepfe{grid-template-columns:1fr}
  .kw-anlassknopf{min-height:66px}
  .kw-anlassknopf span{flex-direction:row;align-items:baseline;justify-content:space-between;flex:1;gap:10px}
  .kw-anlassknopf small{margin-top:0;white-space:nowrap}
}

/* =========================================================================
   Handgezeichnete Markierung in der Held-Ueberschrift

   Die Pfade stehen inline im HTML und entstehen beim Bauen (markierung.py),
   nicht im Browser: keine Bibliothek, kein fremder Host, kein Zufall zur
   Laufzeit. Beide SVG sind absolut gesetzt und nehmen deshalb KEINE
   Zeilenhoehe ein, die H1 ist exakt so hoch wie ohne Markierung.

   Ausnahme von der Hausregel "animiert werden nur transform und opacity":
   der Unterstrich laeuft ueber stroke-dashoffset, und das ist Paint je Bild.
   Ein Pfad, 0,85 Sekunden, einmalig, in einem Feld von etwa 260 x 17 px.
   Die transformbasierten Alternativen schneiden die runde Stiftspitze ab,
   und die traegt den gezeichneten Eindruck.
   ========================================================================= */
.kw-marke{position:relative;display:inline-block;z-index:0}
.kw-marke svg{position:absolute;overflow:visible;pointer-events:none}

.kw-marke-strich svg{left:-.05em;width:calc(100% + .1em);top:100%;margin-top:-.18em;height:.28em;color:var(--kupfer)}
.kw-marke-strich path{fill:none;stroke:currentColor;stroke-width:.062em;stroke-linecap:round;vector-effect:non-scaling-stroke}

/* Der Textmarker liegt hinter der Schrift. Weiss auf Kupfer sind 5,26.

   Die Hoehe steht hier ausdruecklich, und das ist kein Schoenheitsfehler:
   ein <svg> mit viewBox ist ein ersetztes Element mit festem
   Seitenverhaeltnis. Sind nur `top` und `bottom` gesetzt, strecken sie es
   NICHT, sondern es behaelt 10:1 aus dem viewBox und wird bei 250 px Breite
   genau 25 px hoch. Der Marker sass dann ueber der Schrift statt dahinter.
   preserveAspectRatio="none" aendert daran nichts, das wirkt erst innerhalb
   der Box.

   Umgekehrt gilt dasselbe: steht nur die Hoehe, rechnet der Browser die
   BREITE aus dem Verhaeltnis und macht 670 px daraus. Bei einem ersetzten
   Element muessen deshalb BEIDE Masse stehen, nie ein Massepaar aus
   gegenueberliegenden Abstaenden. */
.kw-marke-feld{color:#fff}
.kw-marke-feld svg{left:-.16em;width:calc(100% + .28em);top:-.04em;height:calc(100% + .06em);z-index:-1;color:var(--kupfer);transform-origin:0 60%}
.kw-marke-feld path{fill:currentColor;stroke:none}

/* Der FERTIGE Zustand ist der Standard. Ohne Javascript, und auch dann, wenn
   das Skript nicht laeuft, steht die Markierung da. Erst .kw-zeichnet nimmt
   sie zurueck, und die Klasse setzt nur, wer sie auch zeichnen kann. */
.kw-marke-strich path{stroke-dasharray:100;stroke-dashoffset:0}
.kw-marke-feld svg{transform:scaleX(1)}

.kw-zeichnet .kw-marke-strich path{stroke-dashoffset:100;transition:stroke-dashoffset .85s cubic-bezier(.16,1,.3,1)}
.kw-zeichnet .kw-marke-strich path:nth-child(2){transition-delay:.14s}
.kw-zeichnet .kw-marke-feld svg{transform:scaleX(0);transition:transform .5s cubic-bezier(.16,1,.3,1) .45s}
.kw-zeichnet.kw-gezeichnet .kw-marke-strich path{stroke-dashoffset:0}
.kw-zeichnet.kw-gezeichnet .kw-marke-feld svg{transform:scaleX(1)}

/* Wird die Einstellung erst nach dem Laden umgelegt, greift das hier.
   !important, weil .kw-zeichnet die hoehere Spezifitaet hat. */
@media (prefers-reduced-motion:reduce){
  .kw-marke-strich path{stroke-dashoffset:0 !important}
  .kw-marke-feld svg{transform:none !important}
}

/* =========================================================================
   Bewertungsleiste unter dem Held

   Ein Laufband aus zwei gleichen Kartengruppen. Verschoben wird um 50
   Prozent der Bahnbreite, also um genau eine Gruppe: in dem Moment steht die
   zweite dort, wo die erste angefangen hat, und der Sprung ist unsichtbar.
   Bedingung dafuer, dass rechts keine Luecke klafft: EINE Gruppe muss
   breiter sein als das Fenster. Sechs Karten zu 340 px plus Abstaenden sind
   rund 2.160 px, die Inhaltsbreite ist 1.200.

   contain:paint steht da mit Absicht: eine breite Bahn in einem
   overflow-Kasten hat in Chromes Handy-Emulation schon einmal den Viewport
   aufgezogen.
   ========================================================================= */
.kw-bewertungen{padding:clamp(26px,3.4vw,42px) 0 clamp(28px,3.6vw,46px);background:var(--grund);border-bottom:1px solid var(--grund-3)}
.kw-bew-zeile{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-bottom:18px}
.kw-bew-note{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0;font-size:16px;color:var(--text-leise)}
.kw-bew-note strong{font:800 30px/1 var(--s-kopf);color:var(--anker);letter-spacing:-.01em}
.kw-bew-merker{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;background:var(--kupfer-blass);color:var(--kupfer-tief);font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.kw-bew-merker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--kupfer);flex:none}
.kw-g{width:26px;height:26px;flex:none}
.kw-g-klein{width:18px;height:18px}

.kw-marquee{
  display:flex;overflow:hidden;contain:paint;padding-block:12px;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
}
.kw-marquee-bahn{display:flex;width:max-content;flex-shrink:0;animation:kw-laufband 56s linear infinite;will-change:transform}
.kw-marquee:hover .kw-marquee-bahn,
.kw-marquee:focus-within .kw-marquee-bahn{animation-play-state:paused}
/* Der Abstand sitzt rechts IN der Gruppe: nur dann sind beide Gruppen
   gleich breit und die 50 Prozent stimmen auf das Pixel. */
.kw-marquee-gruppe{display:flex;gap:20px;padding-right:20px}
@keyframes kw-laufband{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.kw-bew{flex:0 0 340px;margin:0;padding:20px 22px 22px;background:var(--grund-2);border:1px solid var(--grund-3);border-radius:var(--r-karte);transition:transform .2s ease,box-shadow var(--uebergang)}
.kw-bew:hover{transform:translateY(-3px);box-shadow:var(--schatten-m)}
.kw-bew-kopf{display:flex;align-items:center;gap:10px}
.kw-bew-wer{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.kw-bew-wer strong{font-size:15.5px;font-weight:600}
.kw-bew-wer small{font-size:13px;color:var(--text-leise);margin-top:2px}
.kw-bew-quelle{margin-left:auto;display:flex;align-items:center}
.kw-bew .kw-sterne{margin-top:14px}
.kw-bew blockquote{margin:8px 0 0;font-size:16px;line-height:1.55;color:var(--text)}

/* Bewegung reduzieren: das Band steht still und wird von Hand schiebbar.
   Das Duplikat faellt dabei weg, sonst stuenden alle Stimmen zweimal da. */
@media (prefers-reduced-motion:reduce){
  .kw-marquee-bahn{animation:none}
  .kw-marquee{overflow-x:auto}
  .kw-marquee-gruppe[aria-hidden="true"]{display:none}
}
@media (max-width:600px){
  .kw-bew{flex:0 0 282px;padding:18px 18px 20px}
  .kw-marquee{
    -webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);
    mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);
  }
}

/* Das Fotoband unter der Bewertungsleiste ist am 22.8.2026 entfallen: sein
   Bild steht jetzt im Grund des Helds. Die Anlasskacheln ruecken dadurch rund
   300 px nach oben. */

/* =========================================================================
   Anlass-Kacheln: zwei grosse mit Bild, vier mit Symbol, sechs Zellen
   fuer sechs Inhalte. Der ganze Titel ist Link auf die Detailseite,
   der kleine Link unten rechts springt in die Terminanfrage und waehlt
   den Anlass vor.
   ========================================================================= */
.kw-kacheln{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.kw-kachel{position:relative;display:flex;flex-direction:column;gap:10px;padding:26px 24px 22px;background:#fff;border:1px solid var(--grund-3);border-radius:var(--r-karte);transition:transform var(--uebergang),box-shadow var(--uebergang),border-color var(--uebergang)}
.kw-kachel:hover{transform:translateY(-3px);box-shadow:var(--schatten-m);border-color:transparent}
.kw-kachel-gross{grid-column:span 2;padding:0;overflow:hidden}
.kw-kachel-bild{aspect-ratio:16/9;overflow:hidden;background:var(--grund-2)}
.kw-kachel-bild img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.kw-kachel:hover .kw-kachel-bild img{transform:scale(1.03)}
.kw-kachel-text{display:flex;flex-direction:column;gap:10px;padding:24px 28px 26px;flex:1}
.kw-kachel-ico{width:48px;height:48px;border-radius:10px;background:var(--kupfer-blass);display:grid;place-items:center;color:var(--kupfer-tief);margin-bottom:4px}
.kw-kachel-ico svg{width:26px;height:26px}
.kw-kachel h3{font-size:24px}
.kw-kachel h3 a{color:inherit;text-decoration:none}
.kw-kachel h3 a::after{content:"";position:absolute;inset:0;border-radius:var(--r-karte)}
.kw-kachel p{color:var(--text-leise);font-size:16px;line-height:1.55;flex:1}
.kw-kachel-fuss{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:6px;padding-top:14px;border-top:1px solid var(--grund-3)}
.kw-kachel-preis{font:700 22px/1 var(--s-kopf);color:var(--anker);white-space:nowrap}
.kw-kachel-preis small{display:block;font:500 12.5px/1.2 var(--s-text);color:var(--text-leise);margin-top:3px}
.kw-kachel-termin{display:inline-flex;align-items:center;gap:4px;font-size:14.5px;font-weight:600;color:var(--anker);text-decoration:none;white-space:nowrap}
.kw-kachel-termin svg{width:16px;height:16px;transition:transform var(--uebergang)}
.kw-kachel-termin:hover svg{transform:translateX(3px)}
/* --- Die vier kleinen Kacheln tragen ihr Foto als Grund ----------------
   Der Ausschnitt ist hochkant, die Vorlagen sind quer: --pos haelt fest,
   welcher Teil stehen bleibt (gesetzt aus `kachelpos` in bausteine.py).
   Der Verlauf ist unten kraeftig genug, dass weisser Text auf jedem der
   vier Fotos ueber 4,5 liegt; der Inhalt sitzt deshalb am unteren Rand. */
.kw-kachel-foto{
  min-height:clamp(268px,25vw,318px);
  justify-content:flex-end;
  padding:24px 22px 20px;
  overflow:hidden;
  background:var(--anker);border-color:transparent;color:#fff;
}
.kw-kachel-grund{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:inherit}
/* --zoom und --schub verschieben den Ausschnitt UEBER das hinaus, was
   object-position kann.
   Der Grund steht bei der Klimaservice-Kachel: `cover` deckt dort ueber die
   Hoehe, beschneidet also nur waagerecht, und damit sitzt die Anzeige des
   Bedienfelds immer auf 32 bis 40 Prozent der Kachelhoehe -- genau dort, wo
   Titel und Anrisstext stehen. Kein object-position-Wert der Welt holt sie
   da weg. Ein Zoom schafft Ueberhang, und der Schub zieht die Anzeige nach
   oben in das freie Drittel. Beide Werte sind PROZENTE beziehungsweise
   Faktoren, also von der Kachelgroesse unabhaengig und ueber alle drei
   Rasterstufen (4, 2, 1 Spalten) gueltig. Gesetzt aus `kachelzoom` und
   `kachelschub` in bausteine.py, Standard ist "gar nichts". */
.kw-kachel-grund img{
  width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);
  transform:translate(var(--schub-x,0),var(--schub-y,0)) scale(var(--zoom,1));
  transform-origin:50% 0;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.kw-kachel-grund::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,24,29,.20) 0%,rgba(20,24,29,.34) 26%,rgba(20,24,29,.66) 54%,rgba(20,24,29,.90) 100%)}
.kw-kachel-foto:hover .kw-kachel-grund img{transform:translate(var(--schub-x,0),var(--schub-y,0)) scale(calc(var(--zoom,1) * 1.045))}
.kw-kachel-foto > :not(.kw-kachel-grund){position:relative;z-index:1}
.kw-kachel-foto h3 a{color:#fff}
.kw-kachel-foto p{flex:0 1 auto;color:rgba(255,255,255,.88)}
.kw-kachel-foto .kw-kachel-ico{background:rgba(255,255,255,.16);color:#fff}
.kw-kachel-foto .kw-kachel-fuss{border-top-color:var(--linie-hell)}
.kw-kachel-foto .kw-kachel-preis{color:#fff}
.kw-kachel-foto .kw-kachel-preis small{color:var(--text-hell-leise)}
.kw-kachel-foto .kw-kachel-termin{color:#fff}

@media (max-width:1000px){.kw-kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.kw-kacheln{grid-template-columns:1fr}.kw-kachel-gross{grid-column:auto}}

/* =========================================================================
   Dunkles Band: das Terminversprechen
   ========================================================================= */
.kw-band{background:var(--anker);background-image:var(--textur);color:#fff}
.kw-band h2,.kw-band h3{color:#fff}
.kw-band p{color:var(--text-hell-leise)}
.kw-band-innen{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,96px);align-items:start}
.kw-band-text{position:sticky;top:calc(var(--nav-h) + 32px)}
.kw-band-text .kw-lead{color:var(--text-hell-leise)}
.kw-band-text .kw-aktion{margin-top:30px}
.kw-band-liste{list-style:none;margin:0;padding:0}
.kw-band-liste li{display:grid;grid-template-columns:52px 1fr;gap:20px;padding:24px 0;border-top:1px solid var(--linie-hell)}
.kw-band-liste li:last-child{border-bottom:1px solid var(--linie-hell)}
.kw-band-ico{width:52px;height:52px;border-radius:10px;background:var(--anker-2);display:grid;place-items:center;color:var(--kupfer-hell)}
.kw-band-ico svg{width:26px;height:26px}
.kw-band-liste h3{font-size:23px;margin-bottom:4px}
.kw-band-liste p{font-size:16px;margin:0;line-height:1.55}
@media (max-width:860px){
  .kw-band-innen{grid-template-columns:1fr}
  .kw-band-text{position:static}
}

/* =========================================================================
   Geteilte Abschnitte (Bild und Text), hoechstens zwei hintereinander
   ========================================================================= */
.kw-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,6vw,88px);align-items:center}
.kw-split + .kw-split{margin-top:var(--sek-y)}
.kw-split-bild img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-karte)}
.kw-split-text h2{margin-bottom:16px}
.kw-split-text p{color:var(--text-leise)}
.kw-split-umgekehrt .kw-split-bild{order:2}
.kw-preis-zeile{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:24px 0 28px;padding:16px 20px;background:var(--grund-2);border-radius:10px}
.kw-preis-zeile strong{font:700 var(--fs-preis)/1 var(--s-kopf);color:var(--anker);font-variant-numeric:tabular-nums}
.kw-preis-zeile span{font-size:16px;color:var(--text-leise)}
@media (max-width:860px){
  .kw-split{grid-template-columns:1fr}
  .kw-split-umgekehrt .kw-split-bild{order:0}
}

/* =========================================================================
   Festpreise: zwei Spalten mit je drei Zeilen, Preis rechts in Saira
   ========================================================================= */
.kw-preise{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(32px,5vw,72px)}
.kw-preis{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:20px;row-gap:3px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--grund-3)}
.kw-preis h3{grid-column:1;font-size:21px}
.kw-preis h3 a{color:inherit;text-decoration:none}
.kw-preis h3 a:hover{text-decoration:underline;text-underline-offset:4px}
.kw-preis small{grid-column:1;color:var(--text-leise);font-size:14.5px;line-height:1.45}
.kw-preis strong{grid-column:2;grid-row:1 / 3;align-self:center;font:700 var(--fs-preis)/1 var(--s-kopf);color:var(--anker);font-variant-numeric:tabular-nums;white-space:nowrap}
.kw-preise-fuss{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px 32px;margin-top:32px}
.kw-fussnote{font-size:var(--fs-klein);color:var(--text-leise);line-height:1.5;max-width:560px}
@media (max-width:760px){.kw-preise{grid-template-columns:1fr}}

/* Grosse Preistafel auf /festpreise/ */
.kw-tafel{display:grid;gap:20px}
.kw-tafel-gruppe{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:20px clamp(24px,4vw,56px);padding:clamp(22px,3vw,32px);background:#fff;border:1px solid var(--grund-3);border-radius:var(--r-karte)}
.kw-tafel-gruppe > div:first-child h3{font-size:26px;margin-bottom:8px}
.kw-tafel-gruppe > div:first-child p{color:var(--text-leise);font-size:16px}
.kw-tafel-gruppe .kw-preis{padding:12px 0}
.kw-tafel-gruppe .kw-preis:first-child{padding-top:0}
.kw-tafel-gruppe .kw-preis:last-child{border-bottom:0;padding-bottom:0}
.kw-tafel-gruppe .kw-preis h3{font-size:18px;font-family:var(--s-text);font-weight:600}
.kw-tafel-gruppe .kw-preis strong{font-size:clamp(24px,22px + .5vw,30px)}
@media (max-width:760px){.kw-tafel-gruppe{grid-template-columns:1fr}}

/* =========================================================================
   Kennzahlen
   ========================================================================= */
.kw-zahlen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
/* Auf der Startseite steht die Reihe auf dem Anker: zwischen Preisliste
   und Stimmen standen sonst drei helle Abschnitte hintereinander. */
.kw-zahlenband .kw-zahl{border-top-color:var(--kupfer-hell)}
.kw-zahlenband .kw-zahl-wert{color:#fff}
.kw-zahlenband .kw-zahl-text{color:var(--text-hell-leise)}
.kw-zahl{border-top:3px solid var(--kupfer);padding-top:18px}
.kw-zahl-wert{display:block;font:800 var(--fs-zahl)/1 var(--s-kopf);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--anker)}
.kw-zahl-text{display:block;margin-top:8px;color:var(--text-leise);font-size:16px;line-height:1.45}
@media (max-width:760px){.kw-zahlen{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* =========================================================================
   Kundenstimmen: eine grosse, zwei kleine. Keine Quelle, kein Logo.
   ========================================================================= */
.kw-stimmen{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:20px}
.kw-stimme{display:flex;flex-direction:column;gap:16px;padding:28px 30px;background:var(--grund-2);border-radius:var(--r-karte)}
.kw-stimme blockquote{margin:0;font-size:17px;line-height:1.55}
.kw-stimme-gross{grid-row:span 2;justify-content:center;padding:clamp(30px,4vw,48px);background:var(--anker);color:#fff}
.kw-stimme-gross blockquote{font:600 clamp(22px,18px + 1vw,32px)/1.3 var(--s-kopf);letter-spacing:-.005em}
.kw-stimme-wer{display:flex;align-items:center;gap:12px;font-size:14.5px;color:var(--text-leise)}
.kw-stimme-gross .kw-stimme-wer{color:var(--text-hell-leise)}
.kw-initialen{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--kupfer-blass);border:1px solid var(--kupfer-blass);color:var(--kupfer-tief);font:700 15px/1 var(--s-kopf);flex:none}
.kw-stimme-gross .kw-initialen{background:var(--anker-2);border-color:var(--anker-3);color:#fff}
.kw-stimme .kw-sterne{color:var(--anker)}
.kw-stimme-gross .kw-sterne{color:#fff}
@media (max-width:860px){.kw-stimmen{grid-template-columns:1fr}.kw-stimme-gross{grid-row:auto}}

/* =========================================================================
   Buehne: Foto in voller Breite, Karte ragt hinein
   ========================================================================= */
.kw-buehne{padding-bottom:var(--sek-y)}
.kw-buehne-bild{position:relative;height:clamp(340px,46vw,560px)}
.kw-buehne-bild::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 45%,rgba(20,24,29,.34) 100%)}
.kw-buehne-bild img{width:100%;height:100%;object-fit:cover}
.kw-buehne-karte{position:relative;max-width:var(--max);margin:-120px auto 0;padding:0 var(--rand)}
.kw-buehne-karte > div{max-width:680px;padding:clamp(28px,4vw,48px);background:#fff;border-radius:var(--r-karte);box-shadow:var(--schatten-m)}
.kw-buehne-karte h2{margin-bottom:14px}
.kw-buehne-karte p{color:var(--text-leise)}
.kw-buehne-karte .kw-aktion{margin-top:24px}
@media (max-width:600px){
  .kw-buehne-karte{margin-top:-60px}
}

/* =========================================================================
   Streifen (Karriere auf der Startseite)
   ========================================================================= */
/* Der Karriere-Streifen. Bis zum 23.8.2026 lag er in grund-2 auf Weiss und
   verschwand: derselbe Ton wie der Schlussabschnitt direkt darunter, dazwischen
   nur eine Fuge. Jetzt Kupfer, und das folgt der Farbregel statt sie zu
   biegen: Anthrazit gehoert dem Terminweg, Gruen der einen Handlung, Kupfer
   der Auszeichnung. Eine offene Stelle ist genau das, und sie ist der einzige
   Abschnitt der Startseite, der nicht zum Termin fuehrt - er darf, ja er soll
   anders aussehen als seine Nachbarn.
   Verlauf kupfer-tief -> kupfer-nacht, dazu die Marken-Textur, damit die
   Flaeche Material bekommt und nicht als Farbfleck steht. Kontraste: Weiss
   7,7:1 am hellen Ende, 11,2:1 am dunklen; der Fliesstext in .82 Weiss noch
   5,8:1 beziehungsweise 8,1:1. Die beiden Pfeillinks werden hell, sonst
   stuenden zwei anthrazitfarbene Linien auf Kupfer. */
.kw-streifen{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:center;padding:clamp(32px,4.4vw,52px);border-radius:var(--r-karte);color:#fff;background-color:var(--kupfer-tief);background-image:var(--textur),linear-gradient(118deg,var(--kupfer-tief) 0%,var(--kupfer-nacht) 82%)}
.kw-streifen h2{margin-bottom:10px;color:#fff}
.kw-streifen p{color:rgba(255,255,255,.82);max-width:62ch}
.kw-streifen .kw-pfeil{color:#fff;border-color:var(--linie-hell)}
.kw-streifen .kw-pfeil:hover{border-color:#fff}
.kw-streifen-links{display:grid;gap:14px;justify-items:start}
@media (max-width:760px){.kw-streifen{grid-template-columns:1fr}}

/* =========================================================================
   Schluss: Terminaufruf und Erreichbarkeit
   ========================================================================= */
/* --- Schlussaufruf mit blassem Grund ------------------------------------
   Die Schluesseluebergabe liegt hinter dem Abschnitt, nicht als Wandbild,
   sondern als Andeutung. Drei Sachen halten sie dezent:

   1. Sie sitzt RECHTS und laeuft nach links in nichts aus (Maske). Links
      steht die Ueberschrift, und die soll auf sauberem Grund stehen.
   2. Deckung 0,22 auf entsaettigtem, warm getoentem Bild. Auf #F7F4F0
      schwankt die Helligkeit dadurch um weniger als 0,08 -- der Fliesstext
      liegt weiter bei ueber 12:1, gemessen, nicht geschaetzt.
   3. Die weisse Kontaktkarte bekommt einen etwas tieferen Schatten, damit
      sie sich vom Bild abhebt statt darin zu schwimmen.
   ---------------------------------------------------------------------- */
.kw-schluss-sek{position:relative;overflow:hidden}
.kw-schluss-grund{position:absolute;inset:0;pointer-events:none}
.kw-schluss-grund img{
  width:100%;height:100%;object-fit:cover;object-position:64% 52%;
  opacity:.22;filter:grayscale(.45) contrast(.92);
  -webkit-mask-image:linear-gradient(100deg,transparent 0,transparent 26%,#000 68%,#000 100%);
  mask-image:linear-gradient(100deg,transparent 0,transparent 26%,#000 68%,#000 100%);
}
/* Warme Angleichung: ohne sie stuende ein kuehlgraues Foto auf warmem
   Grund, und genau das war der Grund, warum die Neutraltoene im :root von
   Farbton 210 auf 34 Grad gedreht wurden. */
.kw-schluss-grund::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(247,244,240,.55) 0,rgba(247,244,240,.16) 55%,rgba(233,228,221,.30) 100%)}
.kw-schluss{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,72px);align-items:center}
.kw-schluss h2{margin-bottom:14px}
.kw-schluss .kw-lead{margin-bottom:28px}
.kw-kontaktkarte{padding:28px 30px;background:#fff;border:1px solid var(--grund-3);border-radius:var(--r-karte);box-shadow:var(--schatten-m)}
.kw-kontaktkarte h3{margin-bottom:16px;font-size:22px}
.kw-kontaktkarte dl{display:grid;grid-template-columns:26px minmax(0,1fr);gap:16px 14px;margin:18px 0 0}
.kw-kontaktkarte dt{color:var(--anker)}
.kw-kontaktkarte dt svg{width:22px;height:22px}
.kw-kontaktkarte dd{margin:0;line-height:1.5}
.kw-kontaktkarte dd a{color:var(--anker);font-weight:500}
.kw-kontaktkarte dd small{display:block;color:var(--text-leise);font-size:14px}
.kw-tel-gross{display:inline-block;font:800 clamp(28px,24px + 1vw,38px)/1.1 var(--s-kopf);color:var(--anker);text-decoration:none;letter-spacing:.01em}
.kw-tel-gross:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}

.kw-status{display:inline-flex;align-items:center;gap:9px;padding:6px 13px 6px 11px;border-radius:999px;background:var(--grund-2);font-size:14.5px;font-weight:600;color:var(--text-leise);line-height:1.3}
.kw-status::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--text-leise);flex:none}
.kw-status.ist-offen{color:var(--status-auf)}
.kw-status.ist-offen::before{background:var(--status-auf)}
.kw-band .kw-status,.kw-nebenkarte-dunkel .kw-status,.kw-heldkarte .kw-status{background:var(--anker-2);color:var(--text-hell-leise)}
.kw-band .kw-status::before,.kw-nebenkarte-dunkel .kw-status::before,.kw-heldkarte .kw-status::before{background:var(--text-hell-leise)}
.kw-band .kw-status.ist-offen,.kw-nebenkarte-dunkel .kw-status.ist-offen,.kw-heldkarte .kw-status.ist-offen{color:#fff}
.kw-band .kw-status.ist-offen::before,.kw-nebenkarte-dunkel .kw-status.ist-offen::before,.kw-heldkarte .kw-status.ist-offen::before{background:#fff}
@media (max-width:860px){
  .kw-schluss{grid-template-columns:1fr}
  /* Einspaltig laeuft der Text ueber die ganze Breite; eine Maske von links
     nach rechts wuerde ihn zur Haelfte auf dem Foto stehen lassen. Am Handy
     faellt der Grund deshalb nach unten aus und wird blasser. */
  .kw-schluss-grund img{
    object-position:60% 50%;opacity:.16;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 22%,#000 78%,#000 100%);
    mask-image:linear-gradient(180deg,transparent 0,transparent 22%,#000 78%,#000 100%);
  }
  .kw-schluss-grund::after{background:linear-gradient(180deg,rgba(247,244,240,.50) 0,rgba(247,244,240,.18) 60%,rgba(233,228,221,.30) 100%)}
}

/* =========================================================================
   Fussbereich
   ========================================================================= */
/* Die Kupferkante oben ist die Signatur, die den Fuss abschliesst. */
.kw-fuss{background:var(--anker);background-image:var(--textur);color:var(--text-hell-leise);border-top:3px solid var(--kupfer);padding:clamp(48px,6vw,76px) 0 32px;font-size:16px}
.kw-fuss a{color:rgba(255,255,255,.82);text-decoration:none}
.kw-fuss a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.kw-fuss h3{color:#fff;font-size:19px;margin-bottom:14px;letter-spacing:.01em}
.kw-fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.kw-fuss-oben{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr);gap:40px clamp(24px,4vw,56px)}
.kw-fuss-marke p{margin-top:18px;max-width:34ch;line-height:1.6}
.kw-fuss-kontakt li{display:flex;gap:10px;align-items:flex-start}
.kw-fuss-kontakt svg{width:20px;height:20px;margin-top:3px;color:#fff}
.kw-fuss-gebiete{margin:40px 0 0;padding-top:28px;border-top:1px solid var(--linie-hell);font-size:14.5px;line-height:1.65}
.kw-fuss-gebiete strong{color:#fff}
.kw-fuss-unten{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;margin-top:28px;padding-top:24px;border-top:1px solid var(--linie-hell);font-size:14.5px}
.kw-fuss-unten ul{display:flex;gap:20px}
.kw-muster-hinweis{margin:26px 0 0;font-size:13px;line-height:1.55;color:rgba(255,255,255,.5);max-width:72ch}
@media (max-width:900px){.kw-fuss-oben{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.kw-fuss-oben{grid-template-columns:1fr}}
@media (max-width:899px){.kw-fuss{padding-bottom:calc(32px + var(--leiste-h))}}

/* =========================================================================
   Feste Handyleiste: Anrufen und Termin anfragen
   ========================================================================= */
.kw-leiste{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);gap:10px;padding:10px var(--rand) calc(10px + env(safe-area-inset-bottom));background:rgba(20,24,29,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 -8px 24px rgba(0,0,0,.22);transform:translateY(110%);transition:transform var(--uebergang)}
.kw-leiste.ist-sichtbar{transform:none}
.kw-leiste .kw-btn{width:100%;min-height:48px;padding:10px 14px;font-size:16px}
.kw-leiste .kw-btn svg{width:18px;height:18px}
@media (max-width:899px){.kw-leiste{display:grid}}

/* =========================================================================
   Kopfband der Unterseiten
   ========================================================================= */
/* Hell wie der Held. Das ist die Signatur der Seite, und sie gilt auf
   allen 17 Seiten gleich: ein heller Kopf auf der Startseite und dunkle
   Kopfbaender auf den Unterseiten waeren zwei Stile in einer Website. */
.kw-kopfband{position:relative;overflow:hidden;background:var(--grund-2);color:var(--text);border-bottom:1px solid var(--grund-3);padding:calc(var(--nav-h) + clamp(40px,6vw,76px)) 0 clamp(44px,6vw,80px)}
.kw-kopfband::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(135deg,rgba(169,84,43,.035) 0 1px,transparent 1px 10px)}
.kw-kopfband-innen{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,64px);align-items:center}
.kw-kopfband h1{color:var(--anker);margin-bottom:16px}
.kw-kopfband .kw-lead{color:var(--text-leise);max-width:60ch}
.kw-kopfband .kw-aktion{margin-top:28px}
.kw-kopfband-bild img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-karte);box-shadow:var(--schatten-m)}
.kw-kopfband-schmal .kw-kopfband-innen{grid-template-columns:minmax(0,1fr)}
.kw-kopfband-schmal .kw-kopfband-text{max-width:800px}
.kw-krumen ol{display:flex;flex-wrap:wrap;gap:6px 8px;list-style:none;margin:0 0 18px;padding:0;font-size:14px;color:var(--text-leise)}
.kw-krumen li + li::before{content:"/";margin-right:8px;opacity:.5}
.kw-krumen a{color:inherit;text-decoration:none}
.kw-krumen a:hover{color:var(--anker);text-decoration:underline}
.kw-kopfband-fakten{display:flex;flex-wrap:wrap;gap:10px 26px;list-style:none;margin:22px 0 0;padding:0}
.kw-kopfband-fakten li{display:flex;align-items:center;gap:9px;color:var(--text);font-weight:500;font-size:16px}
.kw-kopfband-fakten svg{width:26px;height:26px;padding:4px;border-radius:50%;background:var(--kupfer-blass);color:var(--kupfer-tief)}
@media (max-width:860px){
  .kw-kopfband-innen{grid-template-columns:1fr}
  .kw-kopfband-bild{order:-1;max-width:520px}
}

/* =========================================================================
   Inhalt mit Nebenspalte
   ========================================================================= */
.kw-inhalt{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(32px,5vw,80px);align-items:start}
.kw-neben{position:sticky;top:calc(var(--nav-h) + 24px);display:grid;gap:20px}
.kw-nebenkarte{padding:24px 26px;border:1px solid var(--grund-3);border-radius:var(--r-karte);background:#fff}
.kw-nebenkarte h3{font-size:21px;margin-bottom:12px}
.kw-nebenkarte p{color:var(--text-leise);font-size:16px}
.kw-nebenkarte ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.kw-nebenkarte ul a{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-weight:500;font-size:16px;padding:6px 0}
.kw-nebenkarte ul a:hover{color:var(--anker);text-decoration:underline;text-underline-offset:3px}
.kw-nebenkarte ul a svg{width:20px;height:20px;color:var(--anker)}
.kw-nebenkarte ul a[aria-current="page"]{font-weight:700}
.kw-nebenkarte-dunkel{background:var(--anker);border-color:var(--anker);color:#fff}
.kw-nebenkarte-dunkel h3{color:#fff}
.kw-nebenkarte-dunkel p{color:var(--text-hell-leise)}
.kw-nebenkarte-dunkel .kw-btn{width:100%;margin-top:16px}
.kw-nebenkarte-dunkel .kw-tel{margin-top:14px;font:700 22px/1.1 var(--s-kopf);color:#fff}
.kw-nebenkarte .kw-status{margin-top:10px}
@media (max-width:900px){
  .kw-inhalt{grid-template-columns:1fr}
  .kw-neben{position:static}
}

/* Fliesstext */
.kw-text{max-width:68ch}
.kw-text h2{font-size:clamp(24px,20px + .95vw,32px);margin:1.8em 0 .55em}
.kw-text h2:first-child{margin-top:0}
.kw-text h3{margin:1.5em 0 .45em}
.kw-text p,.kw-text li{color:var(--text)}
.kw-text > p{color:var(--text-leise)}
.kw-text .kw-lead{color:var(--text-leise)}
.kw-haken{list-style:none;margin:0 0 1.2em;padding:0;display:grid;gap:10px}
.kw-haken li{display:flex;gap:12px;align-items:flex-start;line-height:1.55}
.kw-haken svg{width:22px;height:22px;margin-top:2px;padding:3px;border-radius:50%;background:var(--kupfer-blass);color:var(--kupfer-tief)}
.kw-haken-zwei{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px}
.kw-band .kw-haken svg{background:var(--anker-2);color:var(--kupfer-hell)}
@media (max-width:640px){.kw-haken-zwei{grid-template-columns:1fr}}

.kw-merkbox{margin:0 0 28px;padding:18px 22px;background:var(--grund-2);border-left:4px solid var(--kupfer);border-radius:0 10px 10px 0}
.kw-merkbox h3{font-size:20px;margin-bottom:6px}
.kw-merkbox p{color:var(--text-leise);font-size:16px}

/* Aufklapper */
.kw-faq{border-top:1px solid var(--grund-3)}
.kw-faq details{border-bottom:1px solid var(--grund-3)}
.kw-faq summary{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:18px 0;list-style:none;cursor:pointer;font-size:18px;font-weight:600;line-height:1.4;color:var(--anker)}
.kw-faq summary::-webkit-details-marker{display:none}
.kw-faq summary svg{width:22px;height:22px;margin-top:3px;transition:transform var(--uebergang)}
.kw-faq details[open] summary svg{transform:rotate(45deg)}
.kw-faq-antwort{padding:0 0 22px;max-width:68ch;color:var(--text-leise)}
.kw-faq-antwort p{margin:0}

/* Ablauf in drei Schritten */
.kw-schritte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;counter-reset:schritt;list-style:none;margin:0;padding:0}
.kw-schritt{counter-increment:schritt;padding:26px 24px;border:1px solid var(--grund-3);border-radius:var(--r-karte);background:#fff}
/* Die Folge laeuft von hell nach tief: der Ablauf wird konkreter. Bei
   44 px und Gewicht 800 gilt die Grossschrift-Schwelle von 3,0, alle drei
   liegen darueber (3,4 / 5,26 / 7,73 auf Weiss). */
.kw-schritt::before{content:counter(schritt);display:block;font:800 44px/1 var(--s-kopf);color:var(--kupfer);margin-bottom:14px}
.kw-schritt:nth-child(1)::before{color:var(--kupfer-1)}
.kw-schritt:nth-child(3)::before{color:var(--kupfer-tief)}
.kw-schritt h3{font-size:21px;margin-bottom:8px}
.kw-schritt p{color:var(--text-leise);font-size:16px;margin:0}
@media (max-width:760px){.kw-schritte{grid-template-columns:1fr}}

/* Galerie */
.kw-galerie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.kw-galerie figure{margin:0}
.kw-galerie img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px}
.kw-galerie figcaption{margin-top:8px;font-size:14px;color:var(--text-leise)}
@media (max-width:760px){.kw-galerie{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Rollen im Team, ohne Gesichter */
.kw-rollen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.kw-rolle{padding:22px 22px 20px;border:1px solid var(--grund-3);border-radius:var(--r-karte);background:#fff}
.kw-rolle strong{display:block;font:800 40px/1 var(--s-kopf);color:var(--kupfer);margin-bottom:8px}
.kw-rolle span{display:block;font-weight:600;line-height:1.35}
.kw-rolle small{display:block;color:var(--text-leise);font-size:14px;margin-top:4px;line-height:1.45}
@media (max-width:860px){.kw-rollen{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Stellen */
.kw-stellen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.kw-stelle{position:relative;display:flex;flex-direction:column;gap:12px;padding:28px;border:1px solid var(--grund-3);border-radius:var(--r-karte);background:#fff;transition:transform var(--uebergang),box-shadow var(--uebergang)}
.kw-stelle:hover{transform:translateY(-3px);box-shadow:var(--schatten-m)}
.kw-stelle h3{font-size:25px}
.kw-stelle h3 a{color:inherit;text-decoration:none}
.kw-stelle h3 a::after{content:"";position:absolute;inset:0;border-radius:var(--r-karte)}
.kw-stelle dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 16px;margin:0;font-size:16px}
.kw-stelle dt{color:var(--text-leise)}
.kw-stelle dd{margin:0;font-weight:500}
.kw-stelle p{color:var(--text-leise);font-size:16px;flex:1}
.kw-stelle .kw-pfeil{align-self:flex-start}
@media (max-width:760px){.kw-stellen{grid-template-columns:1fr}}

/* Bildkarte auf Uebersichtsseiten */
.kw-karten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.kw-karte{position:relative;display:flex;flex-direction:column;border:1px solid var(--grund-3);border-radius:var(--r-karte);overflow:hidden;background:#fff;transition:transform var(--uebergang),box-shadow var(--uebergang)}
.kw-karte:hover{transform:translateY(-3px);box-shadow:var(--schatten-m)}
.kw-karte-bild{aspect-ratio:3/2;overflow:hidden}
.kw-karte-bild img{width:100%;height:100%;object-fit:cover}
.kw-karte-text{display:flex;flex-direction:column;gap:10px;padding:22px 24px 22px;flex:1}
.kw-karte h3{font-size:23px}
.kw-karte h3 a{color:inherit;text-decoration:none}
.kw-karte h3 a::after{content:"";position:absolute;inset:0}
.kw-karte p{color:var(--text-leise);font-size:16px;flex:1}
.kw-karte .kw-kachel-fuss{margin-top:4px}
@media (max-width:960px){.kw-karten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.kw-karten{grid-template-columns:1fr}}

/* =========================================================================
   Formulare
   ========================================================================= */
.kw-form{display:grid;gap:24px}
.kw-schritt-feld{margin:0;padding:clamp(20px,3vw,32px);border:1px solid var(--grund-3);border-radius:var(--r-karte);background:#fff;min-width:0}
.kw-schritt-feld legend{display:flex;align-items:center;gap:12px;padding:0 10px;margin-left:-10px;font:700 24px/1.2 var(--s-kopf);color:var(--anker);background:#fff;border-radius:6px}
.kw-schritt-feld legend span{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--anker);color:#fff;font:700 16px/1 var(--s-kopf)}
.kw-schritt-feld > p{color:var(--text-leise);font-size:16px;margin:4px 0 20px}
.kw-felder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
.kw-feld-breit{grid-column:1 / -1}
.kw-feld label{display:block;margin-bottom:6px;font-weight:600;font-size:16px}
.kw-pflicht{color:var(--anker)}
.kw-feld-hilfe{display:block;margin-top:6px;font-size:13.5px;color:var(--text-leise)}
input,select,textarea{width:100%;min-height:48px;padding:11px 14px;border:1px solid var(--linie-feld);border-radius:var(--r-feld);background:#fff;color:var(--text);font:inherit;font-size:16px}
input:focus,select:focus,textarea:focus{outline:3px solid rgba(20,24,29,.22);outline-offset:0;border-color:var(--anker)}
input::placeholder,textarea::placeholder{color:#7C7770}
textarea{min-height:120px;resize:vertical}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231C2126' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:40px}

.kw-wahl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.kw-wahl label{position:relative;display:flex;align-items:center;gap:12px;min-height:58px;padding:14px 16px;border:1px solid var(--grund-3);border-radius:10px;background:#fff;cursor:pointer;font-weight:600;font-size:16px;line-height:1.3;transition:border-color var(--uebergang),background var(--uebergang)}
.kw-wahl label:hover{border-color:#AEB6BE}
.kw-wahl label svg{width:24px;height:24px;color:var(--anker)}
.kw-wahl input{position:absolute;opacity:0;width:1px;height:1px;min-height:0;margin:0}
.kw-wahl label:has(input:checked){border-color:var(--anker);background:var(--grund-2);box-shadow:inset 0 0 0 1px var(--anker)}
.kw-wahl label:has(input:focus-visible){outline:3px solid var(--anker);outline-offset:2px}
.kw-wahl-zeile{display:flex;flex-wrap:wrap}
.kw-wahl-zeile label{min-height:48px;padding:11px 18px;flex:0 1 auto}
@media (max-width:700px){.kw-wahl{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.kw-felder{grid-template-columns:1fr}.kw-wahl{grid-template-columns:1fr}}

.kw-zustimmung{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--text-leise);line-height:1.5}
.kw-zustimmung input{width:20px;height:20px;min-height:0;margin:2px 0 0;flex:none;accent-color:var(--anker)}
.kw-zustimmung a{color:var(--anker)}
.kw-versprechen{display:flex;align-items:center;gap:12px;padding:16px 18px;background:var(--kupfer-blass);border-radius:10px;font-weight:600;line-height:1.4;color:var(--kupfer-tief)}
.kw-versprechen svg{width:24px;height:24px;color:var(--kupfer-tief)}
.kw-form-fuss{display:grid;gap:20px}
.kw-form-fuss .kw-aktion{align-items:center}
.kw-formularhinweis{margin-top:4px;padding:16px 20px;background:var(--grund-2);border-left:4px solid var(--anker);border-radius:0 10px 10px 0;line-height:1.55}
button.kw-btn{font-family:var(--s-text)}

/* =========================================================================
   Auftritt beim Hineinscrollen
   Der versteckte Zustand haengt an .kw-js, das ein Einzeiler im <head>
   setzt. Ohne Javascript bleibt alles sichtbar.
   ========================================================================= */
.kw-js .kw-auftritt{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.kw-js .kw-auftritt.ist-da{opacity:1;transform:none}
.kw-js .kw-auftritt:nth-child(2){transition-delay:.06s}
.kw-js .kw-auftritt:nth-child(3){transition-delay:.12s}
.kw-js .kw-auftritt:nth-child(4){transition-delay:.18s}

@media (prefers-reduced-motion:reduce){
  .kw-js .kw-auftritt{opacity:1;transform:none;transition:none}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* =========================================================================
   Hauptspalte der Unterseiten, Eckdaten, Sonderformen
   ========================================================================= */
.kw-haupt h2{font-size:clamp(24px,20px + .95vw,32px);margin:0 0 .6em}
.kw-haupt > * + h2{margin-top:2em}
.kw-haupt > p{max-width:68ch;color:var(--text-leise)}
.kw-haupt .kw-haken{max-width:68ch;margin-bottom:0}
.kw-haupt .kw-fussnote{margin-top:16px}
.kw-preise-eins{display:grid}
.kw-preise-eins .kw-preis:first-child{padding-top:0}
.kw-hero-tel-dunkel{color:var(--anker)}
.kw-hero-tel-dunkel span{color:var(--text-leise)}

.kw-gruppe{border:0;padding:0;margin:0;min-width:0}
.kw-gruppe legend{padding:0;margin-bottom:6px;font-weight:600;font-size:16px}

.kw-split-hoch .kw-split-bild img{aspect-ratio:5/6}
.kw-split-hoch .kw-split-bild{max-width:520px}
.kw-kopfband-hoch .kw-kopfband-innen{grid-template-columns:minmax(0,7fr) minmax(0,4fr)}
.kw-kopfband-hoch .kw-kopfband-bild img{aspect-ratio:4/5}
.kw-kopfband-hoch .kw-kopfband-bild{max-width:440px;justify-self:end}
@media (max-width:860px){
  .kw-kopfband-hoch .kw-kopfband-innen{grid-template-columns:1fr}
  .kw-kopfband-hoch .kw-kopfband-bild{max-width:360px;justify-self:start}
}

.kw-stimmen-raster{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:960px){.kw-stimmen-raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.kw-stimmen-raster{grid-template-columns:1fr}}

.kw-stelle .kw-pfeil{position:relative;z-index:1}
.kw-kopfband .kw-status{background:#fff;color:var(--text-leise)}
.kw-kopfband .kw-status::before{background:var(--text-leise)}

.kw-zeiten{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 24px;margin:0 0 1em;max-width:460px}
.kw-zeiten dt{font-weight:600}
.kw-zeiten dd{margin:0;color:var(--text-leise)}
.kw-eckdaten{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 16px;margin:0;font-size:16px}
.kw-eckdaten dt{color:var(--text-leise)}
.kw-eckdaten dd{margin:0;font-weight:500}
.kw-kachel-fuss .kw-kachel-preis small{font-size:12.5px}