/* Libre Baskerville 700 — NUR für Zitate (einzige Serifen-Ausnahme, lokal
   eingebunden). Bernds Entscheidung 02.08.: aufrecht, 700 — Playfair war
   „zu verschnörkelt"; Cormorant (bis 04.08.) wirkte zu fein. */
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/cms-assets/handwertig-v2/fonts/libre-baskerville-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: 'Libre Baskerville';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/cms-assets/handwertig-v2/fonts/libre-baskerville-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;
}/* ============================================================================
   HANDWERTIG V2 — main.css
   handwertig.com Relaunch · Konzept: docs/handwertig-relaunch-konzept.md
   Regeln: flat, KEINE Schatten, border-radius 0, Linien statt Tiefe,
   gestrichelte Trennlinien als Mikro-Detail, WCAG 2.1 AA.
   Struktur: Fonts → Tokens → Base/A11y → Buttons/Chips → Header/Nav →
             Hero → Sektionen → Footer → Motion/Reveals → Responsive
   ========================================================================== */

/* ─── 1. Fonts (self-hosted, DSGVO) ────────────────────────────────────── */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/cms-assets/handwertig/fonts/montserrat-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: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/cms-assets/handwertig/fonts/montserrat-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;
}
/* ─── 2. Design-Tokens (Konzept Kap. 7.2) ─────────────────────────────── */
:root {
  --hw-ink: #101112;        /* Text, 18,9:1 auf Weiß */
  --hw-navy: #222357;       /* Flächen, 14,5:1 */
  /* Ein einziges Marken-Pink (Bernds Vorgabe 03.08.2026). Gemessen 4,44:1 auf
     Weiss — knapp unter den 4,5:1, die WCAG AA fuer normal grossen Text fordert.
     Fuer Flaechen, Rahmen und grossen/fetten Text ist der Wert ausreichend. */
  --hw-pink: #E22278;
  --hw-pink-deep: #E22278;  /* Alias: bleibt fuer Bestandsverweise erhalten */
  --hw-sky: #47B5ED;        /* Heller Akzent NUR auf Navy (dort 6,3:1) */
  --hw-paper: #FFFFFF;
  --hw-mist: #fafafa;
  --hw-line: #D8DAE0;
  --hw-ok: #1E7B4F;
  --hw-err: #B3261E;
  --font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-quote: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
  --header-h: 76px;
}

/* ─── 3. Base + Barrierefreiheit ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; border-radius: 0 !important; box-shadow: none !important; }
/* [hidden] muss jede display-Regel schlagen (sonst zeigen .btn/.nav-panel trotz hidden) */
[hidden] { display: none !important; }
html {
  scroll-behavior: smooth;
  /* Fluid: Schrift wächst mit der Bildschirmbreite (1280px ≈ 17,5px · 1920px ≈ 21px).
     --hw-zoom setzt die Bedienhilfe (1 bis 1,5); alles Weitere haengt an rem und
     skaliert damit mit. Deshalb wird hier multipliziert statt eine feste Groesse
     zu setzen — die fluide Kurve bleibt erhalten. */
  font-size: calc(clamp(17.5px, 0.55vw + 10.4px, 23px) * var(--hw-zoom, 1));
}
body.hw {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--hw-ink);
  background: var(--hw-paper);
  -webkit-font-smoothing: antialiased;
}
body.hw.nav-open { overflow: hidden; }

.hw img { max-width: 100%; height: auto; }
.hw a { color: var(--hw-pink); }

.hw h1, .hw h2, .hw h3 { margin: 0; font-weight: 800; line-height: 1.15; letter-spacing: .01em; }
.hw h1, .hw h2 { text-transform: uppercase; }
.hw p { margin: 0; }
/* Deutsche Komposita in grossen Ueberschriften muessen auf schmalen Geraeten
   umbrechen duerfen — sonst schieben sie die Seite quer. */
.hw .display { font-size: clamp(38px, 5.2vw, 76px); line-height: 1.08; overflow-wrap: break-word; hyphens: auto; }
.hw .h2 { font-size: clamp(27px, 3vw, 44px); }
.hw .h3 { font-size: 1.2188rem; font-weight: 700; text-transform: none; letter-spacing: 0; }
/* Vorspann: nur eine Stufe ueber dem Fliesstext (05.08., Bernd — 1.1875rem
   lag auf h3-Niveau und stach unangenehm heraus); Gewicht traegt den Rest. */
.hw .lead { font-size: 1.0625rem; font-weight: 500; line-height: 1.65; }
/* Nebentext eine klare Stufe unter dem Kartentext (0.9688) — 0.9375 war
   optisch nicht unterscheidbar (Skalen-Harmonisierung 05.08.) */
.hw .small { font-size: 0.875rem; }
.hw .lbl { font-size: 0.8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

/* Der Rahmen waechst mit der Bildschirmbreite (ab ~1590px), gedeckelt bei
   1920px. Text tragende Bloecke haben eigene Deckel, damit die Zeilen nicht
   zu lang werden — die Breite kommt den Rastern zugute, nicht dem Fliesstext. */
/* Nur die horizontalen Werte setzen: Die Kurzform `padding` wuerde die
   vertikalen Abstaende der Module ueberschreiben, die .wrap mitfuehren
   (Footer-Raster, Hero, Kennzahlen-Band). */
.hw .wrap { max-width: clamp(1400px, 90vw, 1920px); margin: 0 auto; padding-left: clamp(20px, 3vw, 56px); padding-right: clamp(20px, 3vw, 56px); }

/* Sichtbarer Tastatur-Fokus überall (WCAG 2.4.7) */
.hw :focus-visible { outline: 3px solid var(--hw-navy); outline-offset: 2px; }
.site-header :focus-visible, .hero :focus-visible, .quote-band :focus-visible,
.stats :focus-visible, .site-footer :focus-visible, .landing-main :focus-visible { outline-color: var(--hw-sky); }

/* Skip-Link: erstes fokussierbares Element, sichtbar nur bei Fokus */
.skip-link {
  position: absolute; left: -9999px; top: 12px; z-index: 200;
  background: var(--hw-navy); color: #fff; font-weight: 700; font-size: 0.9688rem;
  padding: 12px 18px; text-decoration: none;
}
.skip-link:focus-visible { left: 12px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ─── 4. Buttons, Flag, Chips ─────────────────────────────────────────── */
.hw .btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font); font-size: 0.9688rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  padding: 16px 30px; border: 2px solid transparent; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.hw .btn--primary { background: var(--hw-pink); color: #fff; }
.hw .btn--primary:hover { background: var(--hw-navy); color: #fff; }
.hw .btn--ghost { background: transparent; color: var(--hw-ink); border-color: var(--hw-ink); }
.hw .btn--ghost:hover { background: var(--hw-ink); color: #fff; }
.hw .btn--ghost-invert { background: transparent; color: #fff; border-color: #fff; }
.hw .btn--ghost-invert:hover { background: #fff; color: var(--hw-navy); }
.hw .btn--quiet { background: transparent; color: var(--hw-pink); border: 0; padding: 14px 0; text-decoration: underline; text-underline-offset: 4px; }

/* Pink-Flag mit Schräg-Abriss (1:1 Ist-Bestand: 24px/18px) */
.hw .flag {
  position: relative; display: inline-block; background: var(--hw-pink); color: #fff;
  font-size: 0.9062rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 8px 16px; margin-bottom: 28px;
}
.hw .flag::after {
  content: ""; position: absolute; left: 0; top: 100%; width: 0; height: 0;
  border-left: 24px solid var(--hw-pink); border-bottom: 18px solid transparent;
}

.hw .chip {
  font-size: 0.9062rem; font-weight: 600; color: var(--hw-navy);
  border: 0; padding: 12px 19px; text-decoration: none; background: var(--hw-mist);
  transition: border-color .15s ease, color .15s ease;
}
.hw .chip:hover { background: #EFEFF1; color: var(--hw-pink); }

.hw .pchip {
  display: inline-flex; align-items: center; gap: 8px; font-size: 0.9062rem; font-weight: 600;
  border: 1px solid var(--hw-navy); color: var(--hw-navy); padding: 7px 12px; background: #fff;
}
.hw .pchip button { border: 0; background: none; color: var(--hw-pink); font-weight: 800; cursor: pointer; padding: 0 2px; font-size: 0.9062rem; }

/* ─── 5. Header (reduziert; transparent über Hero, sticky navy) ───────── */
.site-header {
  position: absolute; left: 0; right: 0; top: 0; z-index: 100;
  border-bottom: 1px dashed rgba(255,255,255,.45);
}
.site-header__bar {
  display: flex; align-items: center; gap: clamp(20px, 2.2vw, 40px);
  padding: clamp(24px, 2.2vw, 38px) clamp(20px, 3vw, 56px); max-width: clamp(1400px, 90vw, 1920px); margin: 0 auto;
}
.site-header .logo { color: #fff; display: inline-flex; align-items: center; padding: 10px 0; min-height: 48px; }
/* Logo wächst mit der Bildschirmbreite (Bernd: „in Navigation bitte größer") */
.site-header .logo svg { width: clamp(150px, 9.5vw, 200px); height: auto; }
.site-footer .footer-logo { width: clamp(140px, 10vw, 190px); height: auto; }
.site-header .logo svg { display: block; }

.main-nav ul { list-style: none; display: flex; gap: clamp(2px, 0.6vw, 12px); margin: 0; padding: 0; flex-wrap: nowrap; }
.nav-drop { position: relative; }
.nav-toggle {
  font-family: var(--font); font-size: 0.9688rem; font-weight: 500; letter-spacing: .03em;
  color: #fff; background: none; border: 0; cursor: pointer; padding: 12px 10px;
  white-space: nowrap;
}
.nav-toggle[aria-expanded="true"], .nav-toggle:hover { color: var(--hw-sky); }
.chev { font-size: 0.8125rem; opacity: .7; margin-left: 5px; }

/* Breite (Bernd 29.08.2026): Die einspaltigen Panels tragen zweizeilige
   Eintraege (Titel + <small>). Bei 320-460 px brach die Erlaeuterung regelmaessig
   auf drei Zeilen um — „Leerwohnungen und ganze Haeuser wieder vermietbar
   machen" oder „3D-Scan, Grundrisse, Wohnflaechen — Landkreis Konstanz".
   Das Gewerke-Panel (.nav-panel--cols) bleibt unberuehrt: Es hat einzeilige
   Eintraege und seine eigene, breitere Regel. */
.nav-panel {
  position: absolute; left: 0; top: calc(100% + 14px); background: #fff;
  border: 1px solid var(--hw-line); min-width: clamp(420px, 34vw, 620px); max-width: 92vw; z-index: 120; text-align: left;
}
.nav-panel a {
  display: block; padding: 14px 18px; font-size: 0.9375rem; font-weight: 700;
  color: var(--hw-ink); text-decoration: none; border-bottom: 1px solid var(--hw-line);
}
.nav-panel a:last-child { border-bottom: 0; }
.nav-panel a:hover { color: var(--hw-pink); }
.nav-panel a small { display: block; font-weight: 400; color: #4A4D57; font-size: 0.8125rem; margin-top: 1px; }
.nav-panel--cols { display: grid; grid-template-columns: 1fr 1fr; min-width: clamp(440px, 44vw, 760px); }
.nav-panel--cols[hidden] { display: none; }
.nav-panel--cols a { font-weight: 600; padding: 10px 14px; }
/* Sammel-Link am Fuss des Gewerke-Panels: laeuft ueber beide Spalten. */
.nav-panel__all { grid-column: 1 / -1; border-top: 1px solid var(--hw-line); border-bottom: 0 !important; color: var(--hw-pink) !important; }

.header-actions { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.cta-drop { position: relative; }
.btn-cta {
  white-space: nowrap;
  font-family: var(--font); background: var(--hw-pink); color: #fff;
  font-size: 0.9062rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 14px 22px; border: 0; cursor: pointer;
  display: inline-flex; gap: 10px; align-items: center; white-space: nowrap;
  transition: background-color .15s ease;
}
.btn-cta:hover, .btn-cta[aria-expanded="true"] { background: var(--hw-navy); }
.btn-cta .arr { font-size: 1.0312rem; line-height: 1; }

.drop-panel {
  position: absolute; right: 0; top: calc(100% + 8px); background: #fff;
  border: 1px solid var(--hw-line); min-width: clamp(320px, 26vw, 460px); max-width: 92vw; z-index: 120; text-align: left;
}
.drop-panel a {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 15px 18px; font-size: 0.9375rem; font-weight: 700; color: var(--hw-ink);
  text-decoration: none; border-bottom: 1px solid var(--hw-line);
}
.drop-panel a:last-child { border-bottom: 0; }
.drop-panel a:hover { color: var(--hw-pink); }
.drop-panel a small { display: block; font-weight: 400; color: #4A4D57; font-size: 0.8125rem; margin-top: 2px; }
.drop-panel a .count { background: var(--hw-pink); color: #fff; font-size: 0.75rem; font-weight: 800; padding: 2px 7px; flex: 0 0 auto; }
.drop-panel a.quiet { font-weight: 500; color: #4A4D57; background: var(--hw-mist); }

/* Sticky-Zustand: nach dem Hero fixiert auf Navy */
.site-header.is-stuck {
  position: fixed; top: 0; background: var(--hw-navy);
  border-bottom-color: rgba(255,255,255,.25);
  animation: headerIn .25s ease;
}
@keyframes headerIn { from { transform: translateY(-100%); } to { transform: translateY(0); } }

/* Burger (nur mobil sichtbar) — Touch-Ziel ≥ 44 px */
.burger { display: none; background: none; border: 0; cursor: pointer; padding: 13px 9px; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.burger__lines {
  display: block; width: 26px; height: 18px; position: relative;
  border-top: 3px solid #fff; border-bottom: 3px solid #fff;
}
.burger__lines::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px;
  background: var(--hw-pink); transform: translateY(-50%);
}

/* Mobiles Vollbild-Menü */
.mnav {
  position: fixed; inset: 0; top: var(--header-h); z-index: 90;
  background: var(--hw-navy); overflow-y: auto; padding: 18px 24px 120px;
}
.mnav details { border-bottom: 1px dashed rgba(255,255,255,.35); }
.mnav summary {
  color: #fff; font-size: 1.1875rem; font-weight: 700; padding: 16px 4px;
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center;
}
.mnav summary::-webkit-details-marker { display: none; }
.mnav summary::after { content: "+"; font-weight: 800; color: var(--hw-pink); font-size: 1.375rem; }
.mnav details[open] summary::after { content: "–"; }
.mnav details a {
  display: block; color: rgba(255,255,255,.9); text-decoration: none;
  font-size: 1.0312rem; padding: 10px 4px 10px 16px;
}
.mnav__actions { display: grid; gap: 12px; margin-top: 26px; }
.mnav__actions .btn { justify-content: center; }

/* ─── 6. Hero (Bestandsbild + Navy-Overlay, H1 komplett weiß) ─────────── */
.hero {
  position: relative; color: #fff;
  background:
    linear-gradient(112deg, rgba(34,35,87,.90) 0 55%, rgba(46,47,110,.80) 55% 100%),
    url('/cms-assets/handwertig-v2/hero/willkommen-1920.jpg') center / cover no-repeat,
    var(--hw-navy);
}
/* Hero-Motiv nach Viewport: mobil laedt keine 2000-px-Datei mehr. WebP mit
   JPG-Basis als Fallback; nur background-image ueberschreiben, damit
   center/cover aus der Kurzform erhalten bleiben. Breakpoints identisch mit
   den preload-media-Attributen in meta.tpl — bei Aenderung BEIDE anfassen. */
@media (max-width: 768px) {
  .hero { background-image:
    linear-gradient(112deg, rgba(34,35,87,.90) 0 55%, rgba(46,47,110,.80) 55% 100%),
    url('/cms-assets/handwertig-v2/hero/willkommen-768.webp'); }
}
@media (min-width: 769px) and (max-width: 1280px) {
  .hero { background-image:
    linear-gradient(112deg, rgba(34,35,87,.90) 0 55%, rgba(46,47,110,.80) 55% 100%),
    url('/cms-assets/handwertig-v2/hero/willkommen-1280.webp'); }
}
@media (min-width: 1281px) {
  .hero { background-image:
    linear-gradient(112deg, rgba(34,35,87,.90) 0 55%, rgba(46,47,110,.80) 55% 100%),
    url('/cms-assets/handwertig-v2/hero/willkommen-1920.webp'); }
}
.hero .wrap { padding-top: clamp(178px, 14vw, 268px); padding-bottom: clamp(112px, 9vw, 176px); }
.hero__inner { max-width: 74rem; }  /* Prozent bezog sich auf .wrap, nicht auf den Viewport → war zu schmal */
/* Die Startseiten-H1 traegt die Seite und darf deutlich groesser sein als die
   Unterseiten-Variante. Enger gesetzt, damit sie als Block wirkt statt zu zerfallen. */
.hero .display { font-size: clamp(40px, 6.6vw, 108px); line-height: 1.02; letter-spacing: -.005em; }
.hero .lead { color: rgba(255,255,255,.88); max-width: 42rem; margin-top: 26px; line-height: 1.72; }
.hero__ctas { display: flex; gap: 16px; margin-top: clamp(36px, 3.4vw, 52px); flex-wrap: wrap; }
/* Hero-Variante des Aktions-Buttons: groesser, Klappmenue oeffnet nach links. */
.btn-cta--hero { font-size: 1rem; padding: 20px 32px; letter-spacing: .06em; }
.cta-drop--hero .drop-panel { right: auto; left: 0; min-width: clamp(360px, 30vw, 520px); }
/* Auf dem Navy-Hero darf der geoeffnete Button nicht navy werden — sonst
   verschwindet er im Hintergrund. */
.btn-cta--hero[aria-expanded="true"] { background: var(--hw-navy); }

/* ─── 7. Sektionen ────────────────────────────────────────────────────── */
.hw section.pad { padding: clamp(56px, 5vw, 96px) 0; }
.hw section.mist { background: var(--hw-mist); }
.hw .sec-head { max-width: 46rem; margin-bottom: 40px; }
.hw .sec-head .lead { margin-top: 10px; color: #3B3E48; }

/* Zielgruppen-Chipleiste */
.audience { border-bottom: 1px solid var(--hw-line); background: #fff; }
.audience .wrap { display: flex; align-items: center; gap: 14px; padding-top: 18px; padding-bottom: 18px; flex-wrap: wrap; }
.audience .lbl { color: #5A5E6A; white-space: nowrap; }

/* Zielgruppen-Split (spiegelt Nav-Gruppen) */
/* Zwei Wege: erst „Das sind Sie" (pillar__wer), dann die Leistung, dann genau
   ein naechster Schritt. Weg B steht auf Navy, damit die Wahl sofort auffaellt
   und die beiden Karten nicht wie Zwillinge wirken. */
.pillars { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.pillar { border: 0; background: var(--hw-mist); padding: clamp(28px, 2.6vw, 40px); display: flex; flex-direction: column; gap: 0; }
.pillar .lbl { color: var(--hw-pink); }
.pillar__h { font-size: clamp(23px, 1.9vw, 30px); font-weight: 800; text-transform: uppercase; line-height: 1.15; margin-top: 10px; }
.pillar__wer { margin-top: 14px; font-size: 1rem; line-height: 1.6; color: #3B3E48; max-width: 34rem; }
.pillar__ueber { margin-top: 34px; font-size: 0.8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8A8E9A; padding-bottom: 10px; border-bottom: 1px dashed var(--hw-line); }
.pillar .check { margin-top: 16px; }
.pillar__foot { margin-top: auto; padding-top: 28px; }
/* .hw noetig: der Absatz-Reset `.hw p` (0,1,1) schlaegt eine reine
   Klassenregel (0,1,0) — die Marge kam sonst nie an (05.08.). */
.hw .pillar__hint { margin-top: 26px; color: #4A4D57; line-height: 1.55; }

/* Weg B invertiert */
.pillar--dark { background: var(--hw-navy); color: #fff; }
.pillar--dark .lbl { color: var(--hw-sky); }
.pillar--dark .pillar__wer { color: rgba(255,255,255,.85); }
.pillar--dark .pillar__ueber { color: rgba(255,255,255,.6); border-bottom-color: rgba(255,255,255,.28); }
.pillar--dark .check li::before { color: var(--hw-sky); }
.pillar--dark .pillar__hint { color: rgba(255,255,255,.75); }

.pillar ul.pillar-list { list-style: none; display: grid; gap: 10px; margin: 6px 0 8px; padding: 0; }
/* Begriff und Erklärung untereinander — bei größerer Schrift sonst unruhig */
.pillar-list li { display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; font-size: 1rem; font-weight: 600; }
.pillar-list li::before { content: ""; width: 10px; height: 10px; background: var(--hw-pink); flex: 0 0 auto; transform: translateY(2px); }
.pillar-list li small { flex: 1 1 100%; margin-left: 22px; font-weight: 400; font-size: 0.9375rem; color: #4A4D57; line-height: 1.5; }
.pillar .btn { align-self: flex-start; }
.pillar .pillar__sub { color: #4A4D57; margin-top: -4px; font-size: 0.9375rem; }

/* Gewerke-Grid (echte SVG-Icons, Linien-Look) */
/* Gewerke-Raster: rahmenlos, Icon ueber der Bezeichnung, beides zentriert.
   Sieben Spalten ergeben bei 14 Gewerken genau zwei volle Reihen. */
.gewerke { display: grid; grid-template-columns: repeat(7, 1fr); gap: clamp(8px, 1vw, 18px); margin-top: 40px; }
.gewerk { padding: 22px 10px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: 14px; color: inherit; text-decoration: none; }
.gewerk:hover { background: var(--hw-mist); }
.gewerk:hover span { color: var(--hw-pink); }
.gewerk img { width: 64px; height: 64px; display: block; }
.gewerk span { font-size: 0.9062rem; font-weight: 600; line-height: 1.4; color: var(--hw-ink); }
@media (max-width: 1100px) { .gewerke { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px)  { .gewerke { grid-template-columns: repeat(2, 1fr); } .gewerk img { width: 52px; height: 52px; } }

/* „Über Handwertig"-Band: Ist-Text + Kennzahlen 2×2 + weiße Unterschrift */
.stats { background: var(--hw-navy); color: #fff; }
.stats .wrap { display: grid; grid-template-columns: 2fr 1fr; gap: clamp(40px, 4vw, 72px); padding-top: 64px; padding-bottom: 64px; align-items: center; }
/* Raster-Zellen duerfen unter ihre Mindestbreite schrumpfen — sonst schiebt die
   grosse Kennzahl auf schmalen Geraeten die ganze Seite nach rechts. */
.stats .wrap > * { min-width: 0; }
.stats .lbl { color: var(--hw-sky); }
.stats h2 { color: #fff; margin-top: 10px; }
/* Einstiegssatz des Ist-Bestands: langer Satz, deshalb kleiner als eine
   normale H2 und in Satzschreibung statt Versalien. */
.stats .about__h { font-size: clamp(21px, 1.8vw, 29px); line-height: 1.35; text-transform: none; letter-spacing: 0; max-width: 34rem; }
.stats .about p { color: rgba(255,255,255,.85); font-size: 1rem; line-height: 1.7; margin-top: 14px; max-width: 40rem; }
.stats .about b, .stats .about strong { color: #fff; }
.stats .sig { height: clamp(96px, 7vw, 127px); width: auto; filter: brightness(0) invert(1); opacity: .92; margin-top: 22px; display: block; }
/* In der schmalen Drittelspalte stehen die Kennzahlen untereinander, mit
   gestrichelter Trennung — nebeneinander passte die groesste Zahl nicht. */
.statgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-content: center; }
.statgrid .stat { padding: 22px 0; border-bottom: 1px dashed rgba(255,255,255,.28); }
.statgrid .stat:first-child { padding-top: 0; }
.statgrid .stat:last-child { border-bottom: 0; padding-bottom: 0; }
.stat b { display: block; font-size: 2.75rem; font-weight: 800; line-height: 1; color: #fff; }
.stat b em { font-style: normal; color: var(--hw-sky); }
.stat span { font-size: 0.8438rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.75); display: block; margin-top: 8px; }

/* Prozess */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.step { border-top: 3px solid var(--hw-pink); padding-top: 16px; }
.step .num { font-size: 0.9062rem; font-weight: 800; color: var(--hw-pink); letter-spacing: .1em; }
.step h3 { margin: 6px 0 8px; }
.step p { font-size: 0.9688rem; color: #3B3E48; }

/* Referenzen */
.refs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ref { border: 0; background: #fff; }
.ref__img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; display: block; border-bottom: 1px solid var(--hw-line); }
.ref__body { padding: 20px; }
.ref__body p { margin-top: 6px; color: #3B3E48; font-size: 0.9688rem; }
.ref__meta { display: flex; gap: 14px; font-size: 0.8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--hw-navy); margin-top: 10px; }

/* Zitat-Band (Libre Baskerville, aufrecht) */
/* Das Bild steht beim Scrollen still, der Text laeuft darueber hinweg.
   Nur auf Zeigegeraeten mit Hover: iOS Safari kennt background-attachment:fixed
   nicht und skaliert das Bild dort auf die gesamte Dokumenthoehe — es waere
   also unscharf und falsch beschnitten. Dort bleibt es mitlaufend.
   Bei prefers-reduced-motion ebenfalls mitlaufend, weil ein stehender
   Hintergrund als Parallaxe wahrgenommen wird. */
.quote-band {
  color: #fff;
  background:
    linear-gradient(rgba(34,35,87,.90), rgba(34,35,87,.90)),
    url('/cms-assets/handwertig/images/handwertig-modernisierung.jpg') center / cover no-repeat,
    var(--hw-navy);
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .quote-band { background-attachment: scroll, fixed; }
}
.quote-band .wrap { padding-top: 76px; padding-bottom: 76px; }
.quote-band blockquote { margin: 0; }
.qtext {
  font-family: var(--font-quote); font-style: normal; font-weight: 700;
  font-size: clamp(28px, 3vw, 46px); line-height: 1.4; max-width: 52rem; margin: 6px 0 14px;
}
.qtext .qm { color: var(--hw-pink); }
.quote-band cite { display: block; font-style: normal; font-size: 0.9375rem; letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: 26px; }
.quote-band .lead { color: rgba(255,255,255,.9); max-width: 42rem; }

/* Team (schräger Foto-Anschnitt wie Ist-Bestand) + Zertifikate */
/* Team wie im Ist-Bestand: heller Sektionsgrund (--hw-mist), weisse Karten ohne Rahmen,
   quadratische Fotos mit dem schraegen Anschnitt. Der Kopftext sitzt als erste
   Rasterzelle, damit die erste Reihe nur drei Personen zeigt. */
.team-section { background: var(--hw-mist); }
.team-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; margin-top: 8px; }
.team-intro { padding: 4px 8px 0 0; }
.team-intro .h2 { margin-top: 12px; }
.team-intro p { color: #3B3E48; margin-top: 16px; line-height: 1.65; }
.team-card { background: #fff; border: 0; margin: 0; display: flex; flex-direction: column; }
.team-card .imgwrap { clip-path: polygon(100% 0, 100% 94%, 0 100%, 0 0); display: block; }
.team-card .imgwrap img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.team-card figcaption { padding: 18px 22px 26px; flex: 1 1 auto; }
.team-card figcaption b { font-size: 1.2188rem; font-weight: 800; }
.team-card figcaption small { display: block; font-weight: 400; font-size: 0.9062rem; color: #4A4D57; margin-top: 6px; line-height: 1.5; }

/* Pinke Kachel „Alle Mitarbeiter einblenden" — gleiche Masse wie eine Karte. */
.team-card--more { display: none; padding: 0; border: 0; text-align: left; font: inherit; cursor: pointer; background: var(--hw-pink); width: 100%; }
.js .team-card--more { display: flex; flex-direction: column; }
.team-card--more:hover { background: var(--hw-navy); }
.team-card__label { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; text-align: center; min-height: 96px; padding: 18px 22px; color: #fff; font-size: 0.9375rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.45; }
/* Ohne JavaScript stehen alle Personen im Raster; erst mit JS wird geklappt. */
.js .team-grid:not(.is-open) .team-card--rest { display: none; }

@media (max-width: 1100px) { .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 780px)  { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }

/* Nachweis-Raster: volle Breite, keine Rahmen. Struktur entsteht ausschliesslich
   ueber gestrichelte Linien — dieselbe Sprache wie Header-Trenner und Fakten.
   Drei Spalten = drei Kategorien; alle 18 Nachweise stehen offen da, es gibt
   nichts mehr aufzuklappen. */
.certs-wrap { margin-top: clamp(44px, 4vw, 72px); border-top: 1px dashed var(--hw-line); padding-top: clamp(32px, 3vw, 48px); }
.certs-wrap > p { color: #4A4D57; margin: 8px 0 0; }
.certs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(28px, 3vw, 64px); margin-top: clamp(26px, 2.4vw, 38px); }
.certs__cat { margin: 0; font-size: 0.8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--hw-pink); padding-bottom: 12px; border-bottom: 1px dashed var(--hw-line); }
.certs ul { list-style: none; margin: 0; padding: 0; }
.certs li { padding: 15px 0; border-bottom: 1px dashed var(--hw-line); font-size: 0.9688rem; font-weight: 600; line-height: 1.45; }
.certs li:last-child { border-bottom: 0; }
.certs li span { display: block; margin-top: 5px; font-weight: 400; font-size: 0.875rem; color: #5A5E6A; line-height: 1.5; }
@media (max-width: 1000px) { .certs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; } .certs__col + .certs__col .certs__cat { margin-top: 0; } }
@media (max-width: 660px)  { .certs { grid-template-columns: minmax(0, 1fr); } .certs__col + .certs__col { margin-top: 30px; } }

/* Akkordeon (FAQ, Rechtstexte): gestrichelte Trennlinie statt Kasten. */
.hw details.acc { border: 0; border-bottom: 1px dashed var(--hw-line); background: transparent; }
.hw details.acc summary {
  font-size: 1.0625rem; font-weight: 700; padding: 20px 0; cursor: pointer;
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px;
}
.hw details.acc summary::-webkit-details-marker { display: none; }
.hw details.acc summary::after { content: "+"; font-weight: 800; color: var(--hw-pink); flex: 0 0 auto; }
.hw details.acc[open] summary::after { content: "\2013"; }
.hw details.acc > p, .hw details.acc .acc-body { padding-bottom: 8px; }

/* Partner-Leiste (Logos einheitlich schwarz) */
/* Partner-Leiste: Logos laufen endlos von rechts nach links. Die zweite Reihe
   im Markup ist die Kopie fuer den nahtlosen Umlauf (aria-hidden). Bei
   prefers-reduced-motion steht das Band still und bricht um. */
/* Bernds Vorgabe 04.08. abends: clamp(100px, 1.4vw, 10px) — min > max
   loest die Formel konstant zu 100px auf (max(MIN, min(VAL, MAX))). */
.partner-strip { border: 0; background: #fff; overflow: hidden; padding: clamp(100px, 1.4vw, 10px) 0; }
.partners-marquee { display: flex; width: max-content; animation: hw-marquee 46s linear infinite; }
/* Pause nur auf echten Zeigergeraeten (Fix 16.08.2026, damals nur in der DB
   gepflegt und beim Umzug „Repo = Quelle der Templates" verlorengegangen —
   06.09.2026 wieder eingezogen): iPadOS haelt :hover dauerhaft (Sticky-Tap,
   WebKit 158517) bzw. ein auf der vollbreiten Leiste parkender Trackpad-Cursor
   pausiert das Band permanent. iPadOS meldet als Primaereingabe hover:none/
   pointer:coarse — die Regel greift dort also nicht mehr, Desktop unveraendert.
   Fokus-Pause ueber :has(:focus-visible) statt :focus-within: nur sichtbarer
   Tastaturfokus soll anhalten, nicht ein Maus-Klick auf ein Logo.
   MERKE (CLAUDE.md/Task.md): Interaktions-Pausen IMMER hinter (hover:hover). */
@media (hover: hover) and (pointer: fine) {
  .partner-strip:hover .partners-marquee { animation-play-state: paused; }
}
.partners-marquee:has(:focus-visible) { animation-play-state: paused; }
.partners { display: flex; align-items: center; gap: clamp(24px, 5vw, 60px); margin: 0; padding: 0 clamp(22px, 2.5vw, 44px); list-style: none; flex: 0 0 auto; }
/* Die Logos sind freigestellt und haben deshalb sehr unterschiedliche
   Seitenverhaeltnisse: von 0,93:1 (KARA, Bildzeichen ueber dem Wort) bis
   7,85:1 (Pfeiffer & May, reiner Schriftzug). Deshalb bekommt jede Zelle eine
   feste Buehne und das Logo passt sich darin ein — breite Logos fuellen die
   Breite, hohe die Hoehe, keins wird angeschnitten. Skalierte man stattdessen
   nur ueber die Hoehe, waere Pfeiffer & May viermal so breit wie AXOR. */
.partners li { display: flex; align-items: center; justify-content: center;
  width: clamp(150px, 12vw, 220px); height: clamp(44px, 3.4vw, 68px); }
/* KEIN filter: brightness(0). Die Regel stammt von den alten Logos und faerbt
   alles Deckende schwarz — bei farbtex (50 % helle Flaeche), Farben Klotz (81 %)
   und FX Ruch (11 %) verschwindet damit das Logo in einem schwarzen Kasten,
   weil diese Marken auf einer hellen Flaeche stehen bzw. helle Elemente tragen.
   Die Dateien sind ohnehin alle graustufig (Modus LA), das Band wirkt also auch
   ohne Filter einheitlich. */
/* Seit der <picture>-Umstellung (AVIF/WebP) ist picture das Flex-Kind der
   Zelle — ohne eigene Masse bezog sich max-height:100% des Bildes auf ein
   unbegrenztes Element und quadratische Logos (Farben Klotz, KARA) liefen
   aus der Zeile (Bernd 05.08.). picture fuellt jetzt die Zelle. */
.partners li picture { display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; }
.partners img { max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; opacity: 1; display: block; }
@keyframes hw-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .partners-marquee { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .partners[aria-hidden="true"] { display: none; }
}

/* Einzugsgebiet-Karte im Navy-Band: weisse Linien, weisse Schrift, sonst nichts.
   Sie sitzt unter den Kennzahlen in der rechten Spalte und nimmt deren Breite. */
/* Karte sitzt in der Kennzahlen-Spalte unter den vier Zahlen. Deshalb sind im
   SVG auch nur fuenf Orte beschriftet — 25 Namen waeren hier nicht lesbar. */
/* Keine eigene Oberlinie: die letzte Kennzahl bringt bereits eine gestrichelte
   Trennung mit, sonst stehen zwei Linien uebereinander. */
.einzugsgebiet { margin: clamp(26px, 2.6vw, 38px) 0 0;
  /* Die statgrid wird mobil zweispaltig — die Karte muss trotzdem beide Spalten belegen. */
  grid-column: 1 / -1; }
.einzugsgebiet > b { display: block; font-size: 0.8125rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--hw-sky); margin-bottom: 14px; }
.einzugsgebiet .lkk { width: 100%; height: auto; display: block; }
.einzugsgebiet figcaption { margin-top: 12px; font-size: 0.875rem; line-height: 1.6;
  color: rgba(255,255,255,.78); }
.einzugsgebiet figcaption small { display: block; margin-top: 8px; font-size: 0.8125rem;
  color: rgba(255,255,255,.55); }

/* CTA-Banner mit Prefill-Status */
.cta-banner { border: 0; background: #fff; padding: clamp(28px, 2.8vw, 44px); display: grid; grid-template-columns: 1.2fr .8fr; gap: 36px; align-items: center; }
.cta-banner .lbl { color: var(--hw-pink); }
.cta-banner h2 { margin-top: 8px; }
.progress { height: 8px; background: var(--hw-mist); border: 1px solid var(--hw-line); margin: 16px 0 10px; position: relative; }
.progress i { position: absolute; inset: 0; right: 100%; background: var(--hw-pink); transition: right .4s ease; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
/* Hinweistexte einheitlich auf der .small-Stufe (05.08., Bernd) */
.privacy-note { font-size: 0.875rem; color: #5A5E6A; margin-top: 14px; }
.cta-banner__side { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }

/* Ratgeber-Teaser */
.articles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
/* Flex-Spalte statt block: der Abschlusslink sitzt per margin-top:auto unten,
   damit alle Karten einer Reihe gleich hoch enden. Vorher endete jede Karte
   dort, wo ihr Titel aufhoerte — das Raster wirkte ausgefranst. */
.article { border: 0; padding: clamp(22px, 2vw, 30px); background: var(--hw-mist);
  display: flex; flex-direction: column; text-decoration: none; color: inherit; }
/* .hw noetig: .hw a (0,1,1) faerbte sonst die ganze Karte pink (Hub-Befund 05.08.) */
.hw a.article { color: inherit; }
.article p { color: #3B3E48; font-size: 0.9688rem; }
.article > span:last-child { margin-top: auto; padding-top: 16px; }
.article:hover { border-color: var(--hw-pink); }
.article .lbl { color: var(--hw-pink); }
.article h3 { margin: 8px 0; }
.article span { color: var(--hw-pink); font-weight: 700; font-size: 0.9062rem; text-decoration: underline; text-underline-offset: 4px; }

/* Hinweis-Box */
.infobox { border: 0; border-left: 4px solid var(--hw-navy); background: var(--hw-mist); padding: 18px 22px; font-size: 0.9688rem; }
.infobox--warn { border-left-color: var(--hw-err); }

/* ─── Unterseiten: schlanker Hero, Breadcrumb, Split, Checkliste, Kontakt ── */
.hero-slim {
  color: #fff;
  background:
    linear-gradient(112deg, rgba(34,35,87,.94) 0 62%, rgba(46,47,110,.86) 62% 100%),
    url('/cms-assets/handwertig-v2/hero/willkommen-1920.jpg') center / cover no-repeat,
    var(--hw-navy);
}
@media (max-width: 768px) {
  .hero-slim { background-image:
    linear-gradient(112deg, rgba(34,35,87,.94) 0 62%, rgba(46,47,110,.86) 62% 100%),
    url('/cms-assets/handwertig-v2/hero/willkommen-768.webp'); }
}
@media (min-width: 769px) and (max-width: 1280px) {
  .hero-slim { background-image:
    linear-gradient(112deg, rgba(34,35,87,.94) 0 62%, rgba(46,47,110,.86) 62% 100%),
    url('/cms-assets/handwertig-v2/hero/willkommen-1280.webp'); }
}
@media (min-width: 1281px) {
  .hero-slim { background-image:
    linear-gradient(112deg, rgba(34,35,87,.94) 0 62%, rgba(46,47,110,.86) 62% 100%),
    url('/cms-assets/handwertig-v2/hero/willkommen-1920.webp'); }
}
/* Unterseiten-Hero: bewusst eine Stufe unter der Startseite (dort bis 108px),
   aber im selben Verhaeltnis von Luft und Schriftgroesse. */
.hero-slim .wrap { padding-top: clamp(140px, 11vw, 212px); padding-bottom: clamp(62px, 5.6vw, 98px); }
.hero-slim .display { font-size: clamp(34px, 4.6vw, 76px); line-height: 1.04; margin-top: 14px; }
.hero-slim .lead { color: rgba(255,255,255,.88); max-width: 46rem; margin-top: 20px; line-height: 1.7; }

.crumb { font-size: 0.8438rem; color: rgba(255,255,255,.7); margin-bottom: 14px; }
.crumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.crumb li::after { content: "/"; margin-left: 8px; opacity: .55; }
.crumb li:last-child::after { content: ""; }
.crumb a { color: rgba(255,255,255,.8); text-decoration: none;
  /* Trefferflaeche >=24px (WCAG 2.5.8) ohne Layoutverschiebung */
  display: inline-block; padding: 8px 2px; margin: -8px -2px; }
.crumb a:hover { color: #fff; }
.crumb [aria-current] { color: #fff; font-weight: 600; }

.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: start; }
.check { list-style: none; display: grid; gap: 12px; margin: 18px 0 0; padding: 0; }
/* Haken haengend statt als Flex-Item: bei display:flex wuerde jedes Inline-Element
   im Listenpunkt (strong, a) zu einem eigenen Flex-Item und damit zu einer eigenen
   Spalte — Fettungen und Links zerrissen den Satz. */
.check li { position: relative; padding-left: 26px; font-size: 1rem; line-height: 1.55; }
.check li::before { content: "✓"; color: var(--hw-ok); font-weight: 800; position: absolute; left: 0; top: 0; }

.media-figure img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.media-figure figcaption { font-size: 0.8125rem; color: #5A5E6A; margin-top: 8px; }

/* Gesichterreihe (Karriereseite): quadratische Portraits ohne Rahmen, damit
   der Anruf ein Gegenueber bekommt. Zwei Reihen zu zwei Bildern. */
.team-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.team-strip img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

/* Weiterfuehrende Ziele am Abschnittsende. Gleiche Sprache wie .step (pinke
   Oberkante), aber als Link mit einer Zeile Erklaerung — ersetzt nackte
   Button-Reihen dort, wo das Ziel mehr verdient als seinen Namen. */
.jumps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px;
  margin-top: clamp(56px, 5.5vw, 84px); }
.jump { border-top: 3px solid var(--hw-pink); padding-top: 16px; display: block; text-decoration: none; color: inherit; }
.jump .lbl { color: var(--hw-pink); }
.jump h3 { margin: 6px 0 8px; }
.jump p { font-size: 0.9688rem; color: #3B3E48; }
/* Themenwelten-Zeile auf der Ratgeber-Uebersicht (Wissens-Hubs, 05.08.) */
.hub-jumps { margin-bottom: 40px; }
.jump .go { display: inline-block; margin-top: 12px; color: var(--hw-pink); font-weight: 700; font-size: 0.9062rem; text-decoration: underline; text-underline-offset: 4px; }
.jump:hover .go { text-decoration-thickness: 2px; }

.contact-card { border: 0; background: var(--hw-mist); padding: 26px; display: flex; gap: 20px; align-items: center; }
.contact-card img { width: 84px; height: 84px; object-fit: cover; flex: 0 0 auto; }
.contact-card .lbl { color: var(--hw-pink); }
.contact-card p { font-size: 0.9375rem; color: #4A4D57; margin-top: 4px; }
.contact-card a { color: var(--hw-pink); }

/* Problem-/Nutzen-Karten (3 Spalten) */
/* Lesezeit-Zeile unter dem Lead eines Ratgeber-Artikels. */
.hero-slim .crumb-meta { font-size: 0.9062rem; color: rgba(255,255,255,.7); margin-top: 10px; }

/* Ratgeber-Uebersicht: Suchfeld, Themenfilter und Kartenraster.
   Markup kommt aus CmsFrontendController::renderBlogOverview() + blog_overview.tpl. */
.blog-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; margin: 26px 0 34px; }
.blog-search { flex: 1 1 20rem; max-width: 28rem; border: 1px solid var(--hw-line); padding: 12px 16px; font: inherit; font-size: 1rem; background: #fff; color: var(--hw-ink); }
.blog-search:focus-visible { outline: 3px solid var(--hw-pink); outline-offset: 2px; }
.blog-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.blog-filter-btn { border: 1px solid var(--hw-line); background: #fff; color: #3B3E48; padding: 9px 16px; font: inherit; font-size: 0.9062rem; font-weight: 600; cursor: pointer; min-height: 44px; }
.blog-filter-btn:hover { border-color: var(--hw-pink); color: var(--hw-pink); }
.blog-filter-btn.is-active { background: var(--hw-navy); border-color: var(--hw-navy); color: #fff; }
.blog-info { font-size: 0.9375rem; color: #4A4D57; margin-bottom: 18px; }
.blog-empty { padding: 48px 0; text-align: center; }
/* Viele Karten: enger rastern als das dreispaltige .trio der Leistungsseiten. */
.blog-cards { grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 20px; }
.blog-pages { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; list-style: none; margin: 32px 0 0; padding: 0; }
.blog-page-btn { border: 1px solid var(--hw-line); background: #fff; color: var(--hw-pink); padding: 10px 16px; font: inherit; font-size: 0.9062rem; font-weight: 700; cursor: pointer; min-height: 44px; min-width: 44px; }
.blog-page-btn:hover { border-color: var(--hw-pink); }
.blog-page-btn.is-active { background: var(--hw-pink); border-color: var(--hw-pink); color: #fff; cursor: default; }
@media (max-width: 700px) { .blog-tools { gap: 14px; } .blog-search { max-width: 100%; } }

/* Kurz-gefasst-Block der Gewerkeseiten: traegt die rechte Spalte unter dem Akkordeon. */
.fakten { border-top: 1px solid var(--hw-line); margin-top: 12px; }
.fakt { display: grid; grid-template-columns: 10.5rem 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--hw-line); }
.fakt b { font-size: 0.8438rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--hw-navy); }
.fakt span { font-size: 0.9375rem; color: #3B3E48; line-height: 1.55; }
@media (max-width: 620px) { .fakt { grid-template-columns: 1fr; gap: 4px; } }

.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* ─── 8. Footer + Sticky-Bar ──────────────────────────────────────────── */
.site-footer { background: var(--hw-navy); color: #fff; }
/* ACHTUNG Spezifitaet: Das Raster traegt zugleich .wrap, und `.hw .wrap` setzt
   `padding: 0 …`. Eine Ein-Klassen-Regel verliert dagegen — der Footer sass
   deshalb buendig an der Oberkante. Selektor muss `.hw` mitfuehren und spaeter
   stehen als `.hw .wrap`. Gleiches gilt fuer jedes kuenftige Modul auf .wrap. */
.hw .site-footer__grid { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.45fr) minmax(0,1.05fr);
  gap: clamp(28px, 3vw, 56px); padding-top: clamp(56px, 5vw, 80px); padding-bottom: clamp(44px, 4vw, 64px);
  align-items: start; }
.footer-logo { color: #fff; }
.site-footer__address { font-size: 0.9375rem; color: rgba(255,255,255,.75); margin-top: 18px; line-height: 1.9; }
.site-footer__address a { color: #fff; text-decoration: none; }
.site-footer h2 { font-size: 0.8438rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.65); margin: 0 0 18px; padding-bottom: 12px;
  border-bottom: 1px dashed rgba(255,255,255,.25); }
.site-footer__grid a { display: block; color: #fff; text-decoration: none; font-size: 0.9688rem;
  line-height: 1.45; padding: 5px 0; margin-bottom: 3px; }
.site-footer__grid a:hover { color: var(--hw-sky); }
.site-footer__grid a.sky { color: var(--hw-sky); }
/* minmax(0,…) statt 1fr: sonst ist die Mindestbreite der Spalte die des laengsten
   Wortes und „Kleinreparaturen" schiebt sich in die Nachbarspalte. */
.site-footer .cols2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 20px; }
.site-footer .cols2 a { hyphens: auto; }
/* Unternehmensgegenstand und Meisterpflicht-Hinweis. Laengerer Fliesstext als
   die Rechtszeile, deshalb hoehere Deckkraft (.78 statt .65) und gedeckelte
   Zeilenlaenge. Eigenes Innenmass statt .wrap — `.hw .wrap` (zwei Klassen)
   wuerde eine Ein-Klassen-Regel hier ohnehin ueberstimmen. */
.site-footer__hinweis {
  border-top: 1px dashed rgba(255,255,255,.35);
  padding: 26px clamp(20px, 3vw, 56px) 4px; max-width: clamp(1400px, 90vw, 1920px); margin: 0 auto;
  font-size: 0.875rem; line-height: 1.6; color: rgba(255,255,255,.78); /* Hinweis-Stufe = .small (05.08.) */
}
.site-footer__hinweis p { max-width: 72rem; }
.site-footer__hinweis p + p { margin-top: 10px; }

.site-footer__legal {
  border-top: 1px dashed rgba(255,255,255,.35);
  padding: 22px clamp(20px, 3vw, 56px); max-width: clamp(1400px, 90vw, 1920px); margin: 0 auto; font-size: 0.8438rem;
  color: rgba(255,255,255,.65); display: flex; gap: 22px; flex-wrap: wrap; align-items: center;
}
.site-footer__legal a { color: rgba(255,255,255,.85); text-decoration: none; }
.site-footer__legal a:hover { color: #fff; }
.site-footer__copy { margin-left: auto; }
.site-footer__copy .herz { color: var(--hw-pink); }
.site-footer__social svg { vertical-align: -3px; margin-right: 2px; }

/* Sticky-Bar: Anrufen | Anfrage — NUR auf Telefon und Tablet.
   Sie war am 06.09.2026 kurzzeitig auch am Desktop sichtbar; Bernd hat das
   noch am selben Tag zurueckgenommen („auf desktop bitte den stoerer unten
   nicht mehr anzeigen. nur tablet und mobile"). Basis ist deshalb wieder
   display:none; sichtbar wird sie allein im Block @media (max-width: 900px)
   weiter unten — derselben Schwelle, an der auch der Kopf-CTA weicht. */
.sticky-split { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: none; grid-template-columns: 1fr 1.5fr; }
.sticky-split a {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 17px 10px; font-size: 0.9688rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; text-decoration: none; color: #fff;
}
.sticky-split__call { background: var(--hw-navy); }
.sticky-split__go { background: var(--hw-pink); }

/* ─── 7b. Anfrage-Assistent (/anfrage) ────────────────────────────────────
   Ohne JS: ein langes, vollständiges Formular (alle fieldsets sichtbar).
   Mit JS: Schritt-für-Schritt, Fortschritt, Zusammenfassung, Prefill.
   Auswahl = echte Radio-/Checkbox-Inputs (WCAG 1.4.1: Rahmen + Haken, nicht nur Farbe).
   ------------------------------------------------------------------------ */
/* Offen statt Kasten: Der Konfigurator ist kein eingebettetes Widget, sondern
   die Seite selbst. Kein Rahmen, keine weisse Karte, kein Seitenspalten-Raster —
   die Frage ist die Ueberschrift, die Auswahl sind grosse Flaechen. */
.cfg { border: 0; background: transparent; max-width: none; margin: 0; }
.cfg__head { border: 0; padding: 0 0 clamp(26px, 2.6vw, 40px); }
.cfg__body { display: block; }
.cfg__main, .cfg__side { min-width: 0; }
.cfg__main { padding: 0; border: 0; }
/* Die Zusammenfassung sitzt jetzt ueber der Frage und zeigt nur, was schon
   entschieden ist — offene Punkte blendet sie aus (.empty kommt aus anfrage.js). */
.cfg__side { padding: 0; background: transparent; margin-bottom: clamp(22px, 2.2vw, 32px); }
.cfg__foot { border: 0; border-top: 1px dashed var(--hw-line); margin-top: clamp(30px, 3vw, 46px); padding: clamp(24px, 2.4vw, 34px) 0 0; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cfg__foot [data-next], .cfg__foot [data-submit] { margin-left: auto; font-size: 1rem; padding: 19px 34px; }
.cfg__foot [data-prev] { border-width: 1px; }
/* Beruhigungstext und Datenschutzhinweis stehen jetzt unter dem Assistenten. */
/* Buchungs-Widget (telefontermin.css kommt von der Live-Site): Wir geben ihm
   nur Rahmen und Abstand, das Innenleben bleibt unberuehrt. */
.hw-booking { margin-top: clamp(24px, 2.4vw, 36px); }
.cfg-fuss { margin-top: clamp(26px, 2.6vw, 38px); display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(20px, 2.4vw, 40px); align-items: start; }
@media (max-width: 900px) { .cfg-fuss { grid-template-columns: minmax(0, 1fr); } }

.stepper { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 0.875rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #5A5E6A; margin: 0; padding: 0; list-style: none; }
.stepper li.is-done { cursor: pointer; }
.stepper li { display: flex; align-items: center; gap: 9px; }
.stepper .dot { width: 34px; height: 34px; border: 0; background: var(--hw-mist); display: inline-flex; align-items: center; justify-content: center; font-size: 0.875rem; font-weight: 800; color: #5A5E6A; }
.stepper .is-done .dot { background: var(--hw-navy); color: #fff; }
.stepper .is-done .dot::after { content: "\2713"; }
.stepper .is-done .dot { font-size: 0; }
.stepper .is-done .dot::after { font-size: 15px; }
.stepper .is-current { color: var(--hw-ink); }
.stepper .is-current .dot { background: var(--hw-pink); color: #fff; }
.stepper .sep { width: clamp(16px, 2vw, 40px); height: 1px; background: var(--hw-line); }

.step-panel { border: 0; padding: 0; margin: 0 0 34px; }
.js .step-panel { margin: 0; }
.step-panel legend { padding: 0; font-size: clamp(28px, 3vw, 44px); font-weight: 800; text-transform: uppercase; line-height: 1.12; letter-spacing: .01em; }
.step-panel .hint { font-size: 1rem; color: #4A4D57; margin-top: 12px; max-width: 44rem; line-height: 1.6; }

.optgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.2vw, 18px); margin-top: clamp(24px, 2.4vw, 34px); }
.optgrid--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt label {
  display: flex; flex-direction: column; gap: 8px; height: 100%;
  border: 0; padding: clamp(20px, 2vw, 28px); cursor: pointer; background: var(--hw-mist);
  font-size: 1.0312rem; font-weight: 700; line-height: 1.35;
  transition: background-color .12s ease, color .12s ease;
}
.opt label small { font-weight: 400; font-size: 0.9062rem; color: #4A4D57; line-height: 1.5; }
.opt label:hover { background: #EFEFF1; }
.opt input:checked + label { background: var(--hw-navy); color: #fff; }
.opt input:checked + label small { color: rgba(255,255,255,.8); }
.opt input:checked + label::after {
  content: "✓"; position: absolute; top: 0; right: 0; width: 30px; height: 30px;
  background: var(--hw-pink); color: #fff; font-weight: 800; font-size: 0.9375rem;
  display: flex; align-items: center; justify-content: center;
}
.opt input:focus-visible + label { outline: 3px solid var(--hw-navy); outline-offset: 2px; }

/* „Wie moechten Sie weitermachen?" — zwei Wege mit Preis, Erklaerung und Umfang,
   im Aufbau der bisherigen handwertig.com. Auswahl bleibt eine echte Radio-Gruppe. */
.wege { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(14px, 1.5vw, 22px); margin-top: clamp(24px, 2.4vw, 34px); align-items: stretch; }
.weg { position: relative; display: flex; }
.weg label { display: flex; flex-direction: column; gap: 0; width: 100%; padding: clamp(24px, 2.4vw, 34px); background: var(--hw-mist); cursor: pointer; }
.weg label:hover { background: #EFEFF1; }
.weg input:checked + label { background: var(--hw-navy); color: #fff; }
.weg__badge { align-self: flex-start; background: var(--hw-pink); color: #fff; font-size: 0.8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; margin-bottom: 16px; }
.weg__preis { display: flex; flex-direction: column; gap: 2px; padding-bottom: 16px; border-bottom: 1px dashed var(--hw-line); }
.weg__preis b { font-size: 0.8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--hw-pink); }
.weg__preis span { font-size: clamp(23px, 2vw, 30px); font-weight: 800; line-height: 1.1; }
.weg__titel { font-size: 1.2188rem; font-weight: 800; margin-top: 18px; line-height: 1.25; }
.weg__text { font-size: 0.9688rem; font-weight: 400; color: #3B3E48; line-height: 1.6; margin-top: 10px; }
.weg__liste { display: grid; gap: 8px; margin-top: 18px; }
.weg__liste span { display: flex; gap: 10px; font-size: 0.9375rem; font-weight: 400; line-height: 1.45; }
.weg__liste span::before { content: "\2713"; color: var(--hw-ok); font-weight: 800; flex: 0 0 auto; }
.weg__anrechnung { margin-top: auto; padding-top: 18px; font-size: 0.9062rem; font-weight: 700; color: var(--hw-pink); }
/* Invertierte Karte: alle Farbwerte mitziehen, sonst verschwindet der Text. */
.weg input:checked + label .weg__preis b { color: var(--hw-sky); }
.weg input:checked + label .weg__preis { border-bottom-color: rgba(255,255,255,.3); }
.weg input:checked + label .weg__text { color: rgba(255,255,255,.85); }
.weg input:checked + label .weg__liste span::before { color: var(--hw-sky); }
.weg input:checked + label .weg__anrechnung { color: var(--hw-sky); }
.weg input:focus-visible + label { outline: 3px solid var(--hw-navy); outline-offset: 2px; }
.weg input:checked + label::after {
  content: "✓"; position: absolute; top: 0; right: 0; width: 30px; height: 30px;
  background: var(--hw-pink); color: #fff; font-weight: 800; font-size: 0.9375rem;
  display: flex; align-items: center; justify-content: center;
}
@media (max-width: 860px) { .wege { grid-template-columns: minmax(0, 1fr); } }

.fields2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0 clamp(18px, 2vw, 32px); }
.field { margin-top: 22px; }
.field label { display: block; font-size: 0.9062rem; font-weight: 700; margin-bottom: 6px; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea {
  width: 100%; border: 1px solid var(--hw-line); padding: 14px 16px;
  font-family: var(--font); font-size: 0.9688rem; background: #fff; color: var(--hw-ink);
}
.field textarea { min-height: 96px; resize: vertical; }
.field .help { display: block; font-size: 0.8125rem; color: #5A5E6A; margin-top: 5px; }
.field--error input, .field--error textarea { border: 2px solid var(--hw-err); }
.field .err, .agree .err { display: block; font-size: 0.8438rem; color: var(--hw-err); font-weight: 600; margin-top: 6px; }
.agree.field--error input { outline: 2px solid var(--hw-err); outline-offset: 1px; }
/* Fokus auf der Schritt-Überschrift: Ring nur bei Tastatur-Navigation
   (focus-visible) — programmatischer Fokus beim Seitenaufruf bleibt unsichtbar */
.step-panel legend { outline: none; }
.step-panel legend:focus-visible { outline: 3px solid var(--hw-navy); outline-offset: 3px; }

/* Auswahlkarten in einem .field (z. B. „Was ist zu tun?") behalten ihr Karten-Layout:
   .field label { display:block } würde sonst Titel und <small> in eine Zeile ziehen. */
.field .opt label { display: flex; flex-direction: column; gap: 5px; margin-bottom: 0; font-size: 0.9688rem; }

.agree { display: flex; gap: 10px; font-size: 0.9062rem; align-items: flex-start; margin-top: 14px; color: #33363F; }
.agree input { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; accent-color: var(--hw-pink); }

.cfg__side { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sumline { display: inline-flex; align-items: baseline; gap: 8px; font-size: 0.9062rem; padding: 9px 14px; background: var(--hw-mist); border-bottom: 0; }
.sumline span { color: #5A5E6A; }
.sumline:has(.empty) { display: none; }
.sumline b { font-weight: 700; }
.sumline .empty { color: #5A5E6A; font-weight: 400; }

.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Foto-Upload in den Assistenten (Punkt 15, 09/2026) — nur bestehende Tokens,
   keine Radien, kein Schatten. Ohne JS ist das native Dateifeld sichtbar und der
   Knopf bleibt verborgen; das Umschalten macht NICHT `html.js`, sondern die
   Klasse `is-js`, die das Upload-Modul erst setzt, wenn es die Zone wirklich
   uebernimmt (DataTransfer vorhanden). Sonst haette ein Browser mit JS, aber
   ohne DataTransfer weder Feld noch Knopf — der Upload waere unerreichbar.
   Weggeblendet wird per opacity, NICHT display:none: das Feld muss per Tastatur
   fokussierbar bleiben. */
.upload__zone {
  position: relative; border: 1px dashed var(--hw-line); background: var(--hw-mist);
  padding: clamp(18px, 2vw, 26px); display: grid; gap: 10px; justify-items: center; text-align: center;
}
.upload__zone.is-drag { border-color: var(--hw-pink); background: #fff; }
.upload.is-js .upload__zone input[type="file"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.upload__zone input[type="file"]:focus-visible ~ [data-upload-knopf] { outline: 3px solid var(--hw-navy); outline-offset: 2px; }
.upload__text { font-size: 0.9688rem; color: #3B3E48; max-width: 34rem; margin: 0; }
.upload__zone .help { margin-top: 0; }
.upload__liste { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.upload__datei { display: flex; align-items: center; gap: 10px; background: var(--hw-mist); padding: 9px 14px; font-size: 0.9062rem; }
.upload__datei small { color: #5A5E6A; }
.upload__entfernen { margin-left: auto; background: none; border: 0; padding: 4px 8px; font: inherit; font-weight: 700; color: var(--hw-navy); cursor: pointer; }
.upload__entfernen:hover { color: var(--hw-err); }

/* ─── 7c. Fließtext-Seiten (Impressum, Datenschutz, AGB, Barrierefreiheit) ── */
.prose { max-width: 48rem; }
.prose h2 { font-size: clamp(23px, 2.5vw, 34px); margin: 40px 0 14px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.1875rem; font-weight: 700; text-transform: none; letter-spacing: 0; margin: 28px 0 10px; }
.prose h4 { font-size: 1.0312rem; font-weight: 700; margin: 22px 0 8px; }
.prose p { margin: 0 0 14px; font-size: 1.0625rem; line-height: 1.75; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 20px; }
.prose li { margin-bottom: 8px; font-size: 1.0625rem; line-height: 1.7; }
.prose a { color: var(--hw-pink); }
.prose strong, .prose b { font-weight: 700; }
/* Bilder im Fliesstext: die Ratgeber-Artikel bringen rohe <img> aus der
   Migration mit, teils 1536x2048. Ohne diese Regel sprengen sie die
   Textspalte. Gilt fuer alles, was im Artikel landet — auch fuer kuenftige
   Bilder, die jemand im CMS einfuegt. */
.prose img { max-width: 100%; height: auto; display: block; }
.prose figure { margin: 24px 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 1.0rem; }
.prose th, .prose td { border: 1px solid var(--hw-line); padding: 10px 12px; text-align: left; vertical-align: top; }
.prose th { background: var(--hw-mist); font-weight: 700; }
.prose__toc { border: 0; background: var(--hw-mist); padding: 22px 26px; margin-bottom: 36px; }
/* In den Rechtstexten stehen ausgeschriebene URLs als Linktext — die muessen
   auf schmalen Geraeten umbrechen duerfen, sonst laeuft die Seite quer. */
.prose a { overflow-wrap: anywhere; }
/* Deutsche Komposita in Rechtstext-Ueberschriften („Dokumentationsgrundsatz")
   passen auf schmalen Geraeten nicht in eine Zeile und schoben die Seite quer. */
.prose h2, .prose h3, .prose h4 { overflow-wrap: break-word; hyphens: auto; }
.prose__toc h2 { font-size: 0.9062rem; letter-spacing: .1em; margin: 0 0 12px; }
.prose__toc ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.prose__toc a { font-size: 0.9688rem; font-weight: 600; text-decoration: none; }
.prose__toc a:hover { text-decoration: underline; }
/* Sprungmarken aus der Migration: als Chips statt als Fließtext */
.prose .toc-inline { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0 0 8px; }
.prose .toc-inline li { margin: 0; }
.prose .toc-inline a { display: inline-block; border: 0; background: var(--hw-mist); padding: 10px 15px;
  font-size: 0.9375rem; font-weight: 600; text-decoration: none; background: #fff; }
.prose .toc-inline a:hover { border-color: var(--hw-pink); }
/* Migrierte Seiten bringen eigene Container mit — Abstand oben nicht verdoppeln */
.prose > *:first-child { margin-top: 0; }
.prose > section:first-child > *:first-child { margin-top: 0; }
.prose section { margin-bottom: 10px; }
/* Aus der Migration übernommene Akkordeons (FAQ) + Eyebrow-Label */
.prose details.acc { margin-bottom: 10px; }
.prose details.acc summary { font-size: 1.0312rem; }
.prose .acc-body { padding: 0 20px 6px; }
.prose .acc-body p:last-child { margin-bottom: 12px; }
.prose .lbl--inline { color: var(--hw-pink); font-size: 0.8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin: 32px 0 6px; }
.prose .lbl--inline + h2 { margin-top: 0; }
/* Sehr lange Rechtstexte dürfen horizontal scrollen statt zu überlaufen */
.prose > div, .prose > table { overflow-x: auto; }

/* ─── 8b. Cookie-Banner (Markup aus dem gemeinsamen cookie_banner.tpl) ──── */
#hw-cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
  background: var(--hw-navy); color: #fff;
  border-top: 1px dashed rgba(255,255,255,.35);
  padding: 22px 32px; font-size: 0.9375rem; line-height: 1.6;
}
#hw-cookie-banner .hw-cookie-view { max-width: 1200px; margin: 0 auto; }
.hw-cookie-title { font-size: 1.0312rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.hw-cookie-text { color: rgba(255,255,255,.85); margin-bottom: 8px; max-width: 900px; }
.hw-cookie-text-small { font-size: 0.8438rem; color: rgba(255,255,255,.7); }
#hw-cookie-banner a, .hw-cookie-link { color: var(--hw-sky); }
.hw-cookie-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.hw-cookie-btns button {
  font-family: var(--font); font-size: 0.9062rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; padding: 12px 20px;
  border: 2px solid #fff; background: transparent; color: #fff; cursor: pointer;
  min-height: 44px;
}
/* Nach KLASSE einfaerben, nicht nach Position: sonst ist immer der letzte
   Knopf pink — und in der neuen Uebersicht steht dort „Lieber nicht". */
.hw-cookie-btns .hw-cookie-btn-primary { background: var(--hw-pink); border-color: var(--hw-pink); }
.hw-cookie-btns button:hover { background: #fff; color: var(--hw-navy); }
.hw-cookie-btns .hw-cookie-btn-primary:hover { background: #fff; color: var(--hw-pink); }
/* Sticky-Bar weicht dem Banner aus, solange er offen ist: siehe
   `html.hw-consent-offen .sticky-split` weiter unten. Hier stand bis zum
   06.09.2026 zusaetzlich ein Geschwister-Selektor
   `#hw-cookie-banner:not([hidden]) ~ .sticky-split`. Der hat nie gegriffen —
   der Banner steht im DOM HINTER der Bar, und `~` trifft nur vorwaerts
   (querySelector dafuer liefert null). Entfernt, weil er beim Lesen eine
   Wirkung vortaeuschte, die es nicht gab. */

/* ─── Bedienhilfe (Barrierefreiheit) ──────────────────────────────────────
   Fester Knopf am rechten Rand, klappt ein kleines Menue auf: Schrift groesser
   und kleiner, Kontrast verstaerken, alles zuruecksetzen. Wird von main.js
   erzeugt — ohne JavaScript ist der Knopf nicht da, die Seite bleibt aber
   vollstaendig bedienbar. Die Einstellungen liegen im localStorage und gelten
   damit fuer den ganzen Besuch. */
.a11y { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 310;
  display: flex; align-items: flex-start; }
.a11y__leiste { display: flex; flex-direction: column; gap: 1px; flex: 0 0 auto; }
.a11y__knopf {
  width: 52px; height: 52px; display: grid; place-items: center; flex: 0 0 auto;
  background: var(--hw-navy); color: #fff; border: 0; cursor: pointer; padding: 0;
  transition: background-color .15s ease;
}
.a11y__knopf:hover { background: var(--hw-pink); }
/* Zweiter Knopf, gleiche Flaeche, etwas heller — er ist die seltenere Handlung. */
.a11y__knopf--ds { background: #34356E; }
.a11y__knopf--ds:hover { background: var(--hw-pink); }
.a11y__knopf svg { width: 26px; height: 26px; display: block; }
.a11y__panel {
  background: #fff; border: 1px solid var(--hw-line); border-right: 0;
  padding: 20px 22px; width: clamp(230px, 20vw, 280px); order: -1;
}
.a11y__panel[hidden] { display: none; }
.a11y__panel h2 { font-size: 0.8125rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--hw-navy); margin: 0 0 14px; }
.a11y__zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-top: 1px dashed var(--hw-line); }
.a11y__zeile:first-of-type { border-top: 0; padding-top: 0; }
.a11y__zeile > span { font-size: 0.9062rem; }
.a11y__stufen { display: flex; gap: 6px; flex: 0 0 auto; }
.a11y__btn {
  min-width: 40px; min-height: 40px; padding: 0 10px; font: inherit; font-size: 1.0625rem;
  font-weight: 700; line-height: 1; cursor: pointer;
  background: var(--hw-mist); color: var(--hw-ink); border: 1px solid var(--hw-line);
}
.a11y__btn:hover { border-color: var(--hw-pink); color: var(--hw-pink); }
.a11y__btn[aria-pressed="true"] { background: var(--hw-navy); border-color: var(--hw-navy); color: #fff; }
.a11y__btn:disabled { opacity: .4; cursor: default; }
.a11y__btn:disabled:hover { border-color: var(--hw-line); color: var(--hw-ink); }
.a11y__wert { min-width: 3.4em; text-align: right; font-size: 0.9062rem;
  font-variant-numeric: tabular-nums; color: #4A4D57; }
.a11y__fuss { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--hw-line);
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.a11y__fuss button, .a11y__fuss a { font-size: 0.8438rem; color: var(--hw-pink);
  background: none; border: 0; padding: 4px 0; cursor: pointer; font-family: inherit;
  text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
  /* Ueber der Sticky-Bar bleiben, sonst verdeckt die den Knopf. */
  .a11y { top: auto; bottom: 64px; transform: none; }
  .a11y__panel { width: min(260px, calc(100vw - 76px)); }
}

/* Cookie-Banner beim Erstbesuch. Der Banner kommt aus dem gemeinsamen
   cookie_banner.tpl (auch Live-Projekt und Maler-Seiten) — deshalb wird er hier
   nur umgestellt, nicht veraendert. Solange keine Entscheidung vorliegt, traegt
   <html> die Klasse hw-consent-offen; dann steht der Banner als Dialog in der
   Mitte statt als Streifen am Fuss. Nach der Entscheidung faellt die Klasse weg
   und ein spaeteres Oeffnen ueber den Datenschutz-Knopf bleibt der ruhige
   Streifen. */
html.hw-consent-offen body.hw::before {
  content: ""; position: fixed; inset: 0; z-index: 299;
  background: rgba(16, 17, 18, .72);
}
html.hw-consent-offen #hw-cookie-banner {
  top: 50%; bottom: auto; left: 50%; right: auto;
  transform: translate(-50%, -50%);
  /* box-sizing erzwingen: das gemeinsame Banner-CSS rechnet die Innenabstaende
     zur Breite hinzu, sonst laeuft der Dialog auf schmalen Geraeten ueber. */
  box-sizing: border-box;
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100vh - 32px); overflow-y: auto;
  border-top: 6px solid var(--hw-pink);
}
html.hw-consent-offen #hw-cookie-banner * { box-sizing: border-box; max-width: 100%; }
/* Uebersichts-Ansicht in der V2-Formensprache. Der Rest des Banners
   (Detail-Ansicht, Schalter) bleibt wie er ist. */
.hw-cookie-view--v2 .hw-cookie-eyebrow {
  margin: 0 0 10px; font-size: 0.75rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--hw-sky);
}
.hw-cookie-view--v2 .hw-cookie-title {
  font-size: clamp(24px, 2.4vw, 34px); line-height: 1.15; margin: 0 0 12px;
}
.hw-cookie-view--v2 .hw-cookie-fakten {
  list-style: none; margin: 16px 0 4px; padding: 0; display: grid; gap: 9px;
}
.hw-cookie-view--v2 .hw-cookie-fakten li {
  position: relative; padding-left: 26px; font-size: 0.9375rem; line-height: 1.55;
  color: rgba(255,255,255,.88);
}
.hw-cookie-view--v2 .hw-cookie-fakten li::before {
  content: "✓"; position: absolute; left: 0; top: 0; color: var(--hw-sky); font-weight: 800;
}
.hw-cookie-view--v2 .hw-cookie-fakten strong { color: #fff; }
.hw-cookie-mehr {
  background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}

/* Detail-Ansicht: die beiden Kategorien als abgesetzte Bloecke. Vorher lief
   alles als Fliesstext ineinander und der Schalter war ein nacktes Kaestchen. */
.hw-cookie-view--v2 .hw-cookie-cat {
  border-top: 1px dashed rgba(255,255,255,.28); padding: 18px 0 4px; margin-top: 4px;
}
.hw-cookie-view--v2 .hw-cookie-cat-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 8px;
}
.hw-cookie-view--v2 .hw-cookie-cat-name { font-size: 1.0625rem; font-weight: 700; color: #fff; }
.hw-cookie-view--v2 .hw-cookie-cat-fixed {
  font-size: 0.8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.6); flex: 0 0 auto;
}
.hw-cookie-view--v2 .hw-cookie-cat-desc {
  margin: 0 0 10px; font-size: 0.9375rem; line-height: 1.6; color: rgba(255,255,255,.85);
  max-width: 62rem;
}
.hw-cookie-view--v2 .hw-cookie-cat-services summary {
  font-size: 0.875rem; color: var(--hw-sky); cursor: pointer; padding: 4px 0;
}
.hw-cookie-view--v2 .hw-cookie-cat-services ul {
  margin: 8px 0 0; padding-left: 20px; font-size: 0.875rem; line-height: 1.6;
  color: rgba(255,255,255,.78);
}
.hw-cookie-view--v2 .hw-cookie-cat-services li { margin-bottom: 5px; }
.hw-cookie-view--v2 .hw-cookie-cat-services code {
  background: rgba(255,255,255,.12); padding: 1px 5px; font-size: 0.8125rem;
}

/* Schalter: rechteckig wie alles andere, kein Rundlutscher. */
.hw-cookie-view--v2 .hw-cookie-toggle {
  position: relative; display: inline-flex; align-items: center; flex: 0 0 auto; cursor: pointer;
}
.hw-cookie-view--v2 .hw-cookie-toggle input {
  position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.hw-cookie-view--v2 .hw-cookie-toggle-slider {
  width: 62px; height: 32px; background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.45); display: block; position: relative;
  transition: background-color .15s ease, border-color .15s ease;
}
.hw-cookie-view--v2 .hw-cookie-toggle-slider::after {
  content: ""; position: absolute; top: 4px; left: 4px; width: 22px; height: 22px;
  background: #fff; transition: transform .15s ease;
}
.hw-cookie-view--v2 .hw-cookie-toggle input:checked + .hw-cookie-toggle-slider {
  background: var(--hw-pink); border-color: var(--hw-pink);
}
.hw-cookie-view--v2 .hw-cookie-toggle input:checked + .hw-cookie-toggle-slider::after {
  transform: translateX(28px);
}
.hw-cookie-view--v2 .hw-cookie-toggle input:focus-visible + .hw-cookie-toggle-slider {
  outline: 3px solid var(--hw-sky); outline-offset: 2px;
}

/* GLEICHRANGIG: Zustimmen und Ablehnen stehen nebeneinander, gleich breit,
   gleich hoch, gleiche Schriftgroesse. Das ist keine Geschmacksfrage — eine
   Einwilligung, die ueber Gestaltung erzwungen wird, ist unwirksam, und dann
   sind auch die Statistikdaten rechtswidrig erhoben. */
html.hw-consent-offen .hw-cookie-btns {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  margin-top: 20px;
}
html.hw-consent-offen .hw-cookie-btn {
  width: 100%; text-align: center; justify-content: center;
  min-height: 52px; font-size: 1rem;
}
html.hw-consent-offen #hw-cookie-view-detail .hw-cookie-btns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 620px) {
  html.hw-consent-offen .hw-cookie-btns { grid-template-columns: minmax(0, 1fr); }
}

/* Die Sticky-Bar tritt zurueck, solange die Entscheidung aussteht — die
   Bedienhilfe NICHT: Wer den Banner nicht lesen kann, muss die Schrift auch
   dann vergroessern koennen. Sie liegt deshalb ueber der Abdunklung. */
html.hw-consent-offen .sticky-split { display: none; }
html.hw-consent-offen .a11y { z-index: 320; }

@media (prefers-reduced-motion: no-preference) {
  html.hw-consent-offen #hw-cookie-banner { animation: hw-consent-auf .28s ease-out both; }
  @keyframes hw-consent-auf {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 14px)); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
  }
}

/* Verstaerkter Kontrast: keine anderen Farben, nur kraeftigere. Die gedeckten
   Grautoene gehen auf --hw-ink, halbtransparente Weisstoene auf volles Weiss,
   Rahmen werden sichtbar. Pink wird abgedunkelt (#A8135A = 7,3:1 auf Weiss),
   weil das Marken-Pink mit 4,44:1 unter AA fuer normalen Text liegt. */
html.hw-kontrast {
  --hw-line: #6B6F7A;
  --hw-pink: #A8135A;
  --hw-mist: #fff;
}
html.hw-kontrast .hw .small,
html.hw-kontrast .prose p, html.hw-kontrast .prose li,
html.hw-kontrast .step p, html.hw-kontrast .article .small,
html.hw-kontrast .fakt span, html.hw-kontrast .team-card figcaption small,
html.hw-kontrast .jump p, html.hw-kontrast .pillar__wer,
html.hw-kontrast .a11y__wert { color: var(--hw-ink); }
html.hw-kontrast .stats, html.hw-kontrast .site-footer,
html.hw-kontrast .hero, html.hw-kontrast .hero-slim, html.hw-kontrast .quote-band { color: #fff; }
html.hw-kontrast .stats *, html.hw-kontrast .site-footer *,
html.hw-kontrast .hero *, html.hw-kontrast .hero-slim *, html.hw-kontrast .quote-band * {
  color: #fff !important;
}
html.hw-kontrast .site-footer__grid a.sky, html.hw-kontrast .stat em,
html.hw-kontrast .einzugsgebiet > b { color: #9FD4FF !important; }
html.hw-kontrast .article, html.hw-kontrast .pillar, html.hw-kontrast .infobox,
html.hw-kontrast .cta-banner, html.hw-kontrast .contact-card {
  border: 1px solid var(--hw-line); background: #fff;
}
/* Dunkle Pillars behalten im Kontrastmodus ihren Grund - sonst stehen die weisse
   Landkreis-Karte (Region) und weisser Text (Start, Aufmass, Ankaufsprofil) auf Weiss. */
html.hw-kontrast .pillar--dark { background: var(--hw-navy); }
html.hw-kontrast .btn--primary { background: var(--hw-pink); border-color: var(--hw-pink); }
html.hw-kontrast .flag { background: var(--hw-pink); }
html.hw-kontrast :focus-visible { outline: 3px solid var(--hw-pink); outline-offset: 2px; }

/* ─── Abstands- und Hilfsklassen ───────────────────────────────────────────
   Ersetzen die frueheren Inline-Styles auf den Unterseiten. Sektionen bestehen
   oefter aus mehreren gestapelten Bloecken; dafuer gibt es genau drei Abstufungen
   plus eine Button-Reihe. Mehr braucht es nicht — alles andere gehoert ins Modul. */
.hw .stack-sm { margin-top: 12px; }
.hw .stack    { margin-top: clamp(26px, 2.6vw, 34px); }
.hw .stack-lg { margin-top: clamp(40px, 4vw, 56px); }
.hw .btn-row  { margin-top: clamp(22px, 2.2vw, 28px); display: flex; gap: 14px; flex-wrap: wrap; }
/* Konfigurator-Fuss: Hinweis unter dem Formular, gleiche Breite wie .cfg */
.hw .cfg-note { max-width: 68rem; margin: 16px auto 0; color: #4A4D57; }
/* Einspaltiger Konfigurator (Kontaktseite): keine Trennlinie zur Seitenspalte */
.hw .cfg--einspaltig .cfg__main { border-right: 0; }

/* Nebentext ist grundsaetzlich gedaempft — auf dunklen Flaechen ueberschreiben
   die jeweiligen Module (.stats, .pillar--dark, .quote-band, .hero).
   .hero-slim fehlte in dieser Liste: Die Kopfzone der Unterseiten traegt
   dieselbe Navy-Flaeche wie .hero, aber ein .small darin blieb auf dem
   gedaempften Grau — grau auf blau, gemessen 1,72 : 1 (Meldung Bernd,
   29.08.). Faellt nur auf, sobald jemand ein .small in die Kopfzone setzt;
   bis dahin gab es dort keins. */
.hw .small { color: #4A4D57; }
.hero .small, .hero-slim .small, .stats .small, .quote-band .small,
.pillar--dark .small, .cta-banner .small { color: inherit; }
.hw .h2 + .small, .hw .h3 + .small, .hw .lbl + .small { margin-top: 8px; }

/* Modul-Eigenheiten, die vorher als Inline-Style an der Seite klebten */
.hw .infobox { margin-top: clamp(20px, 2vw, 26px); }
.hw .prose .infobox:first-child, .hw .split > div > .infobox:first-child { margin-top: 0; }
.hw details.acc > p { padding: 0 0 20px; color: #3B3E48; margin: 0; }
.hw .article img { margin-bottom: 10px; }
.hw .article .small { margin: 8px 0; }
.hw .ref__meta { margin-top: 16px; }
.hw .privacy-note { margin-top: 16px; }
.hw [data-hw-intent-reset] { color: var(--hw-pink); font-weight: 600; }

/* ─── 9. Scroll-Effekte ───────────────────────────────────────────────────
   Progressive Enhancement: Der Startzustand (unsichtbar) gilt NUR, wenn JS
   läuft (html.js wird von main.js sofort gesetzt). Ohne JS bleibt jeder
   Inhalt sichtbar — sonst wäre die Seite bei JS-Fehler leer (WCAG „robust").
   ------------------------------------------------------------------------ */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal.r2 { transition-delay: .08s; }
.js .reveal.r3 { transition-delay: .16s; }
.js .reveal.r4 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .reveal { opacity: 1; transform: none; transition: none; }
  .site-header.is-stuck { animation: none; }
  .progress i { transition: none; }
  .hw .btn, .btn-cta, .hw .chip { transition: none; }
}

/* ─── 10. Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1300px) {
  .main-nav { display: none; }
  .burger { display: inline-flex; }
  .hero .wrap { padding-top: 128px; }
  .pillars, .steps, .refs, .articles, .team-grid, .trio { grid-template-columns: 1fr 1fr; }
  .gewerke { grid-template-columns: repeat(3, 1fr); }
  .split { grid-template-columns: 1fr; gap: 36px; }
  .hero-slim .wrap { padding-top: 112px; }
  .cfg__body { grid-template-columns: 1fr; }
  .cfg__main { border-right: 0; border-bottom: 1px solid var(--hw-line); }
  .stats .wrap { grid-template-columns: 1fr; gap: 40px; }
  .cta-banner { grid-template-columns: 1fr; }
  .hw .site-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 900px) {
  /* Die Wege-Karten tragen jetzt mehr Text — nebeneinander wird es ab hier eng. */
  .pillars { grid-template-columns: minmax(0, 1fr); }
  .sticky-split { display: grid; }
  body.hw { padding-bottom: 52px; }
  .cta-drop { display: none; } /* Header-CTA weicht der Sticky-Bar */
  .site-header__bar { padding: 16px 20px; }
}
@media (max-width: 640px) {
  .hw .wrap { padding-left: 20px; padding-right: 20px; }
  /* Touch-Ziele: Listen-Links im Footer/Menü großzügiger (WCAG 2.5.8) */
  .site-footer__grid a { padding: 9px 0; margin-bottom: 2px; }
  .site-footer__legal { gap: 10px 22px; }
  .site-footer__legal a { padding: 12px 0; }
  /* Listen-Links (check-Listen, Ratgeber-Begleitspalte): Zeile als Flaeche */
  .check a, .art-seite li a { display: inline-block; padding: 5px 0; }
  /* Sektionsabstand mobil: 44px wirkte gedraengt (Feinschliff 04.08.) */
  .hw section.pad { padding: 56px 0; }
  .pillars, .steps, .refs, .articles, .trio, .jumps { grid-template-columns: 1fr; }
  .hero-slim .wrap { padding-top: 96px; padding-bottom: 40px; }
  .contact-card { flex-direction: column; align-items: flex-start; }
  .optgrid, .optgrid--2, .fields2 { grid-template-columns: 1fr; }
  .cfg__main, .cfg__side, .cfg__head, .cfg__foot { padding: 20px; }
  .cfg__foot .btn { flex: 1; justify-content: center; }
  /* Stepper mobil: nur der aktuelle Schritt trägt Text, Rest nur Punkte */
  .stepper li { font-size: 0; gap: 0; }
  .stepper li .dot { font-size: 0.875rem; }
  .stepper li.is-current { font-size: 0.8125rem; gap: 9px; }
  .stepper .sep { width: 12px; }
  .team-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .gewerke { grid-template-columns: 1fr 1fr; }
  .hero .wrap { padding-top: 108px; padding-bottom: 52px; }
  .hero__ctas .btn { width: 100%; justify-content: center; }
  /* Das 2x2-Raster bleibt, aber die Zahlen muessen kleiner werden: bei 44px
     war die Mindestbreite zweier Spalten groesser als das Telefon (Querlauf). */
  .statgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 18px; }
  .statgrid .stat:nth-child(2) { padding-top: 0; }
  .statgrid .stat:nth-last-child(2) { border-bottom: 0; }
  .stat b { font-size: 2rem; }
  .hw .site-footer__grid { grid-template-columns: minmax(0, 1fr); }
  .partners { gap: 24px; }
  .partners li { width: 118px; height: 36px; }
}

/* ─── Landingpages (QR-Ziele: standort, auto, links, rollup — landing.tpl) ─ */
.landing-main { background: var(--hw-navy); min-height: 100vh; padding: clamp(30px, 6vw, 72px) 20px 44px; }
.landing { max-width: 560px; margin: 0 auto; }
.hw .landing__logo { display: inline-block; color: #fff; margin-bottom: clamp(20px, 4vw, 32px); }
.landing__kopf h1 { color: #fff; }
.landing__kopf .lead { color: rgba(255,255,255,.85); margin-top: 10px; }
.landing__karten { display: grid; gap: 12px; margin-top: clamp(22px, 4vw, 32px); }
.hw .lkarte { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: #fff; color: var(--hw-ink); padding: 17px 20px; text-decoration: none; font-weight: 700; }
.lkarte small { display: block; font-weight: 400; font-size: 0.875rem; color: #5A5E6A; margin-top: 3px; }
.lkarte .pfeil { color: var(--hw-pink); font-weight: 800; }
.hw .lkarte--pink { background: var(--hw-pink); color: #fff; }
.lkarte--pink small { color: rgba(255,255,255,.88); }
.lkarte--pink .pfeil { color: #fff; }
.landing__notiz { color: rgba(255,255,255,.65); font-size: 0.875rem; margin-top: 18px; }
.landing__box { background: #fff; padding: clamp(18px, 3vw, 26px); margin-top: clamp(26px, 5vw, 40px); }
.landing__box .h3 { margin-top: 0; }
.landing__box select { width: 100%; padding: 12px 14px; border: 1px solid var(--hw-line); background: #fff; font: inherit; color: var(--hw-ink); }
.landing__fuss { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: clamp(28px, 5vw, 44px); font-size: 0.875rem; }
.hw .landing__fuss a { color: rgba(255,255,255,.7); text-decoration: none; }
.hw .landing__fuss a:hover { color: #fff; text-decoration: underline; }
html.hw-kontrast .landing__kopf .lead, html.hw-kontrast .landing__notiz { color: #fff; }

/* ─── Ratgeber-Detail: Text links, Begleitspalte rechts (Controller-injiziert) ─ */
.art-seite { display: grid; gap: 16px; margin-top: 32px; }
@media (min-width: 980px) {
  /* Nur SPALTEN-Abstand: gap wuerde auch zwischen den (bis zu 40, meist leeren)
     Reihen wirken — unter kurzem Text entstand so fast 2 m weisser Raum. */
  .wrap:has(> .art-seite) { display: grid; grid-template-columns: 2fr 1fr; column-gap: clamp(32px, 4vw, 64px); row-gap: 0; align-items: start; }
  /* Alle Textkinder links untereinander, die Spalte rechts ueber alle Reihen —
     robust auch, wenn der wrap mehr als ein Kind vor der Spalte traegt. */
  .wrap:has(> .art-seite) > * { grid-column: 1; }
  .wrap:has(> .art-seite) > .art-seite { grid-column: 2; grid-row: 1 / span 40; }
  /* Bewusst NICHT sticky: die Spalte ist hoeher als der Viewport — festgepinnt
     blieben Karte und Leistungs-Links dauerhaft unterhalb des Sichtfensters. */
  .art-seite { margin-top: 0; }
}
.art-box { background: var(--hw-mist); padding: clamp(18px, 2.5vw, 26px); }
.art-box .h3 { margin: 0 0 12px; }
.art-box--dunkel { background: var(--hw-navy); color: #fff; }
.art-box--dunkel .h3 { color: #fff; }
.art-box--dunkel .small { color: rgba(255,255,255,.75); margin-top: 10px; }
.artfakt { padding: 10px 0; border-bottom: 1px dashed rgba(255,255,255,.28); }
.artfakt:last-child { border-bottom: 0; padding-bottom: 0; }
.artfakt b { display: block; font-size: 1.75rem; font-weight: 800; line-height: 1.1; color: #fff; }
.artfakt span { font-size: 0.8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.art-box--dunkel img { width: 100%; height: auto; display: block; }
.art-box--dunkel .lkk { width: 100%; height: auto; display: block; }
.art-seite .media-figure { margin: 0; }
.art-seite .media-figure img { width: 100%; height: auto; display: block; }
.art-seite .btn { margin-top: 14px; }

/* ─── Tooltip (Auto-Links, Designkatalog): navy Flaeche, eckig, ohne Schatten ─ */
.hw [data-tip] { position: relative; }
.hw [data-tip]::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 60;
  background: var(--hw-navy); color: #fff; font-size: 0.8125rem; font-weight: 400; line-height: 1.5;
  padding: 8px 12px; width: max-content; max-width: 260px;
  opacity: 0; visibility: hidden; transition: opacity .15s ease;
}
.hw [data-tip]:hover::after, .hw [data-tip]:focus-visible::after { opacity: 1; visibility: visible; }
/* Auf Navy-Flaechen invertiert der Tooltip — navy auf navy waere unsichtbar */
.hero [data-tip]::after, .hero-slim [data-tip]::after, .stats [data-tip]::after,
.quote-band [data-tip]::after, .landing-main [data-tip]::after,
.art-box--dunkel [data-tip]::after, .pillar--dark [data-tip]::after,
.site-footer [data-tip]::after { background: #fff; color: var(--hw-ink); }
/* Auto-Begriffserklaerung: kein Link, nur Erklaerung — gestrichelt unterstrichen (Markendetail) */
.hw .begriff { text-decoration: underline dashed; text-decoration-color: var(--hw-line); text-underline-offset: 3px; cursor: help; }
/* Begriff-Spans erben IMMER die Typo ihres Kontexts — Listen wie die
   Schulungsliste stylen `li span` als kleine graue Namenszeile und trafen
   sonst auch die injizierten Erklaerungen (Screenshot-Befund 04.08.). */
.hw span.begriff { display: inline; margin: 0; padding: 0; font-size: inherit;
  font-weight: inherit; color: inherit; line-height: inherit; }

/* ─── Team-Flip (Gimmick, 04.08.): Bild dreht auf die Bewerbungs-Rueckseite ─
   Nur auf Hover-Geraeten; Tastatur via focus-within; bei reduced-motion ohne
   Drehung (sofortiger Wechsel). Die schraege Unterkante des imgwrap-clip-path
   gilt auch fuer die Rueckseite. */
.team-card .imgwrap { position: relative; perspective: 900px; }
.team-card .imgwrap picture { display: block; backface-visibility: hidden; transform: rotateY(0); transition: transform .55s ease; }
.hw .team-flip { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px;
  padding: 18px 20px; background: var(--hw-navy); color: #fff; text-decoration: none;
  backface-visibility: hidden; transform: rotateY(180deg); transition: transform .55s ease; }
.hw .team-flip b { font-size: 1.125rem; font-weight: 800; }
.hw .team-flip span { font-size: 0.875rem; line-height: 1.5; color: rgba(255,255,255,.85); }
.hw .team-flip i { font-style: normal; font-weight: 700; color: var(--hw-sky); margin-top: 4px; }
@media (hover: hover) {
  /* Hover dreht erst nach 1 s Verweilen (Bernd, 04.08.) — wer nur drueberfaehrt,
     sieht keinen Flip; der Rueckweg hat kein Delay und klappt sofort zurueck.
     Tastatur-Fokus dreht ohne Wartezeit: wer fokussiert, will die Rueckseite. */
  .team-card .imgwrap:hover picture { transform: rotateY(-180deg); transition-delay: 1s; }
  .team-card .imgwrap:hover .team-flip { transform: rotateY(0); transition-delay: 1s; }
  .team-card .imgwrap:focus-within picture { transform: rotateY(-180deg); transition-delay: 0s; }
  .team-card .imgwrap:focus-within .team-flip { transform: rotateY(0); transition-delay: 0s; }
}
@media (hover: none) { .hw .team-flip { display: none; } }
@media (prefers-reduced-motion: reduce) {
  /* Dauer 0 statt transition:none — so bleibt das 1-s-Delay wirksam und die
     Karte wechselt nach der Wartezeit ohne Drehanimation. */
  .team-card .imgwrap picture, .hw .team-flip { transition-duration: 0s; }
}

/* ─── Newsletter-Abo-Band (vor dem Footer, volle Content-Breite) ─────────── */
.nl-band .sec-head { max-width: none; }
.nl-form { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; margin-top: clamp(20px, 2.4vw, 30px); }
.nl-form .field { margin: 0; flex: 1 1 200px; }
.nl-form input { width: 100%; height: 100%; }
.nl-form .btn { flex: 0 0 auto; }
.hw .nl-consent { margin-top: 12px; color: #5A5E6A; }
@media (max-width: 640px) { .nl-form { flex-direction: column; } }

/* ─── Desktop-Grundmassstab 90 % (Bernd 04.08.: nach ⌘− in Safari „sieht
   alles super aus") — zoom bildet genau diese Browser-Verkleinerung ab.
   Nur ab 1025px; der mobile 390-px-Feinschliff bleibt unangetastet. ──── */
@media (min-width: 1025px) {
  body { zoom: 0.9; }
}

/* ─── Küchen-Assistent: Digital-Aufmaß & Piktos (06.08.) ────────────────── */
.kf-pikto { display: block; margin-bottom: 8px; }
.kskizze-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px clamp(20px, 2.5vw, 36px); align-items: start; }
.kskizze { margin: 0; border: 1px solid var(--hw-line); background: #fff; padding: 10px; }
.kskizze svg { display: block; width: 100%; height: auto; }
.kskizze figcaption { margin-top: 6px; color: #5A5E6A; }
.kplaner { margin: 6px 0 22px; }
.kplaner[hidden] { display: none; }
.kplaner__palette { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.kplaner__palette-lbl { flex: 1 1 100%; color: #5A5E6A; }
.kplaner__palette button {
  border: 1px solid var(--hw-line); background: #fff; border-radius: 0;
  font-family: var(--font); font-size: 0.9062rem; font-weight: 600;
  padding: 10px 14px; min-height: 44px; cursor: pointer;
}
.kplaner__palette button:hover { border-color: var(--hw-navy); }
.kplaner__palette button[disabled] { opacity: .45; cursor: default; }
.kplaner__palette .kplaner__reset { color: #5A5E6A; }
.kplaner__palette [data-kundo] { margin-left: auto; }
.kskizze svg { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
/* Touch: Seite bleibt scrollbar, nur die greifbaren Teile fangen den Finger */
#kw-skizze { touch-action: pan-y; }
#kw-skizze [data-kel], #kw-skizze [data-insel], #kw-skizze [data-kdel], #kw-skizze [data-klen] { touch-action: none; }
.kw-feld-insel[hidden] { display: none; }
/* Element-Liste unter der Skizze: Tastatur-Äquivalent zum Drag */
.kplaner__liste { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; }
.kplaner__liste:empty { display: none; }
.kplaner__liste li { display: flex; align-items: stretch; }
.kchip { border: 1px solid var(--hw-navy); background: #fff; font-family: var(--font); font-size: 0.8125rem; font-weight: 600; color: var(--hw-navy); padding: 8px 10px; cursor: pointer; border-radius: 0; text-align: left; }
.kchip__x { border: 1px solid var(--hw-navy); border-left: 0; background: var(--hw-navy); color: #fff; font-size: 0.9375rem; font-weight: 700; padding: 0 12px; cursor: pointer; border-radius: 0; }
.kplaner__alt { margin-top: 10px; color: #5A5E6A; }
/* Zusammenfassung im letzten Schritt: untereinander, auch offene Punkte
   (die Sidebar-Regel .sumline:has(.empty) blendet sonst genau die aus,
   die der Ändern-Knopf noch füllen soll) */
[data-recap] .sumline, [data-recap] .sumline:has(.empty) { display: flex; background: transparent; padding: 7px 0; border-bottom: 1px dashed var(--hw-line); }
[data-recap] .sumline:last-of-type { border-bottom: 0; }
[data-recap] .sumline span { min-width: 130px; }
[data-recap] .sumline b { flex: 1; }
[data-recap] > p:first-child { margin-bottom: 6px; }
.recap-aendern { border: 0; background: none; color: var(--hw-pink); font-family: var(--font); font-size: 0.8125rem; font-weight: 700; text-decoration: underline; cursor: pointer; padding: 0 0 0 10px; }
/* Plan-Skizzen auf den Küchen-Seiten */
.plan-figur { margin: 0; }
.plan-figur svg { display: block; width: 100%; height: auto; }
.plan-figur figcaption { margin-top: 10px; font-size: 0.875rem; color: #5A5E6A; }
@media (max-width: 820px) { .kskizze-wrap { grid-template-columns: 1fr; } }

/* ─── Konfigurator-Widget im Anfrage-Look (Bernd 29.08.2026) ───────────────
   Das Modul-Widget (hw-configurator.css, geteilt von 17 Konfiguratoren über
   alle CMS-Projekte) bringt eine eigene Handschrift mit: weisse Karten mit
   duennen Rahmen, kleine Versal-Buttons (0,75 rem), 5-Spalten-Raster, Pink als
   Auswahlfarbe. Der Anfrage-Assistent auf derselben Domain sieht anders aus:
   keine Karten, grosse Flaechen in --hw-mist, Auswahl navy mit pinkem Haken,
   Frage im H2-Mass, grosse Buttons.

   Diese Sektion zieht das Widget auf die Anfrage-Handschrift — und zwar NUR
   HIER. Die geteilte hw-configurator.css bleibt unangetastet, sonst haetten
   maler-*, sanitaer-* und bautrocknung-* ungefragt ein neues Design.
   Gescopet auf .hw (body-Klasse des V2-Templates) + Wrapper, damit die
   Ein-Klassen-Regeln des Widgets sicher geschlagen werden.
   Referenz: Abschnitt 7b oben, Designkatalog 2.5.
   ------------------------------------------------------------------------ */
.hw .hw-configurator-wrapper { max-width: none; font-family: var(--font); }

/* Kopf: Schrittzeile, Frage im H2-Mass, Hinweis darunter */
.hw .hw-configurator-wrapper .hw-cfg-header { padding: 0 0 clamp(20px, 2vw, 30px); }
.hw .hw-configurator-wrapper .hw-cfg-step-label {
  font-size: 0.875rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: #5A5E6A; margin-bottom: 12px;
}
.hw .hw-configurator-wrapper .hw-cfg-title {
  font-size: clamp(28px, 3vw, 44px); font-weight: 800; text-transform: uppercase;
  line-height: 1.12; letter-spacing: .01em; color: var(--hw-ink); margin: 0;
}
.hw .hw-configurator-wrapper .hw-cfg-subtitle {
  font-size: 1rem; color: #4A4D57; line-height: 1.6; max-width: 44rem; margin-top: 12px; font-weight: 400;
}
.hw .hw-configurator-wrapper .hw-cfg-body { padding: 0; }

/* Auswahlflaechen: Objekttyp, Gewerke-Raster, Badges und Profilkarten teilen
   sich dieselbe Optik wie .opt label im Anfrage-Assistenten. */
.hw .hw-configurator-wrapper .hw-cfg-gewerke-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.2vw, 18px); }
.hw .hw-configurator-wrapper .hw-cfg-badges,
.hw .hw-configurator-wrapper .hw-cfg-profil-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.2vw, 18px); }
/* Die Optionen liegen INNERHALB einer Objektkarte — anders als die Gewerke-
   Kacheln, die das ganze Raster fuellen. Feste drei Spalten waren hier falsch:
   Traegt eine Karte nur eine Option (Aufmass-Konfigurator: sechs Objektarten,
   je eine Option), bekam der Knopf ein Drittel der Kartenbreite — gemessen
   95 px bei 318 px Karte, der Text lief 11 bis 30 px ueber (Meldung Bernd,
   29.08.). auto-fit legt so viele Spalten an, wie bei 180 px Mindestbreite
   hineinpassen: eine Option fuellt die Zeile, mehrere teilen sie sich, und
   ein 95-px-Knopf kann nicht mehr entstehen. */
.hw .hw-configurator-wrapper .hw-cfg-obj-card-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: clamp(12px, 1.2vw, 18px); }

.hw .hw-configurator-wrapper .hw-cfg-gewerk-card,
.hw .hw-configurator-wrapper .hw-cfg-badge,
.hw .hw-configurator-wrapper .hw-cfg-profil-card,
.hw .hw-configurator-wrapper .hw-cfg-obj-option {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  height: 100%; width: 100%; border: 0; border-top: 0; padding: clamp(20px, 2vw, 28px);
  background: var(--hw-mist); color: var(--hw-ink); text-align: left; cursor: pointer;
  font-family: var(--font); font-size: 1.0312rem; font-weight: 700; line-height: 1.35;
  text-transform: none; letter-spacing: 0;
  transition: background-color .12s ease, color .12s ease;
}
.hw .hw-configurator-wrapper .hw-cfg-gewerk-card:hover,
.hw .hw-configurator-wrapper .hw-cfg-badge:hover,
.hw .hw-configurator-wrapper .hw-cfg-profil-card:hover,
.hw .hw-configurator-wrapper .hw-cfg-obj-option:hover { background: #EFEFF1; color: var(--hw-ink); border-color: transparent; }

.hw .hw-configurator-wrapper .hw-cfg-gewerk-card.selected,
.hw .hw-configurator-wrapper .hw-cfg-badge.selected,
.hw .hw-configurator-wrapper .hw-cfg-profil-card.selected,
.hw .hw-configurator-wrapper .hw-cfg-obj-option.selected {
  background: var(--hw-navy); color: #fff; border: 0; font-weight: 700;
}
/* Der pinke Haken oben rechts ist im Anfrage-Assistenten das Auswahlsignal.
   Das Widget bringt eigene Marker mit — die werden hier ersetzt, nicht ergaenzt. */
.hw .hw-configurator-wrapper .hw-cfg-gewerk-card.selected::after,
.hw .hw-configurator-wrapper .hw-cfg-badge.selected::after,
.hw .hw-configurator-wrapper .hw-cfg-profil-card.selected::after,
.hw .hw-configurator-wrapper .hw-cfg-obj-option.selected::after {
  content: "✓"; position: absolute; top: 0; right: 0; width: 30px; height: 30px;
  background: var(--hw-pink); color: #fff; font-weight: 800; font-size: 0.9375rem;
  display: flex; align-items: center; justify-content: center;
}
.hw .hw-configurator-wrapper .hw-cfg-gewerk-check,
.hw .hw-configurator-wrapper .hw-cfg-obj-option-marker,
.hw .hw-configurator-wrapper .hw-cfg-profil-card-check { display: none; }
.hw .hw-configurator-wrapper .hw-cfg-gewerk-svg { width: 40px; height: 40px; margin: 0; }
.hw .hw-configurator-wrapper .hw-cfg-gewerk-label,
.hw .hw-configurator-wrapper .hw-cfg-profil-card-label {
  font-size: 1.0312rem; font-weight: 700; text-transform: none; letter-spacing: 0;
  color: inherit; line-height: 1.35; text-align: left;
}
.hw .hw-configurator-wrapper .hw-cfg-profil-card-desc,
.hw .hw-configurator-wrapper .hw-cfg-obj-card-name {
  font-size: 0.9062rem; font-weight: 400; color: #4A4D57; line-height: 1.5;
}
.hw .hw-configurator-wrapper .selected .hw-cfg-profil-card-desc { color: rgba(255,255,255,.8); }
.hw .hw-configurator-wrapper .hw-cfg-profil-group-title,
.hw .hw-configurator-wrapper .hw-cfg-section-title,
.hw .hw-configurator-wrapper .hw-cfg-zustand-title,
.hw .hw-configurator-wrapper .hw-cfg-detail-group-title,
.hw .hw-configurator-wrapper .hw-cfg-booking-title,
.hw .hw-configurator-wrapper .hw-cfg-s5-booking-label {
  font-size: 1.1875rem; font-weight: 800; color: var(--hw-ink);
  border-bottom: 0; padding-bottom: 0; margin: clamp(26px, 2.6vw, 38px) 0 14px; text-transform: none;
}

/* Formularfelder wie .field im Anfrage-Assistenten */
.hw .hw-configurator-wrapper .hw-cfg-label { font-size: 0.9062rem; font-weight: 700; margin-bottom: 6px; color: var(--hw-ink); }
.hw .hw-configurator-wrapper .hw-cfg-input,
.hw .hw-configurator-wrapper .hw-cfg-textarea,
.hw .hw-configurator-wrapper .hw-cfg-sqm-input {
  border: 1px solid var(--hw-line); padding: 14px 16px; font-size: 0.9688rem;
  font-family: var(--font); background: #fff; color: var(--hw-ink);
}
.hw .hw-configurator-wrapper .hw-cfg-input:focus,
.hw .hw-configurator-wrapper .hw-cfg-textarea:focus { border-color: var(--hw-navy); }
.hw .hw-configurator-wrapper .hw-cfg-input-hint,
.hw .hw-configurator-wrapper .hw-cfg-nlp-hint { font-size: 0.8125rem; color: #5A5E6A; font-style: normal; margin-top: 5px; }
.hw .hw-configurator-wrapper .hw-cfg-upload-zone { border: 1px dashed var(--hw-line); background: var(--hw-mist); padding: clamp(20px, 2vw, 28px); }
.hw .hw-configurator-wrapper .hw-cfg-upload-zone:hover { border-color: var(--hw-navy); background: #EFEFF1; }
.hw .hw-configurator-wrapper .hw-cfg-checkbox-label { font-size: 0.9062rem; color: #33363F; }
.hw .hw-configurator-wrapper .hw-cfg-checkbox-wrap input { width: 18px; height: 18px; accent-color: var(--hw-pink); }

/* Fussleiste: gestrichelte Trennlinie, Weiter-Knopf rechts und gross (.cfg__foot) */
.hw .hw-configurator-wrapper .hw-cfg-footer {
  border-top: 1px dashed var(--hw-line); margin-top: clamp(30px, 3vw, 46px);
  padding: clamp(24px, 2.4vw, 34px) 0 0; justify-content: flex-start; gap: 18px;
}
.hw .hw-configurator-wrapper .hw-cfg-btn {
  font-family: var(--font); font-size: 1rem; font-weight: 700; letter-spacing: .02em;
  text-transform: none; padding: 19px 34px;
}
.hw .hw-configurator-wrapper .hw-cfg-btn-next,
.hw .hw-configurator-wrapper .hw-cfg-btn-submit {
  margin-left: auto; background: var(--hw-pink); color: #fff; border: 0; flex: 0 0 auto;
}
.hw .hw-configurator-wrapper .hw-cfg-btn-next:hover,
.hw .hw-configurator-wrapper .hw-cfg-btn-submit:hover { background: var(--hw-navy); color: #fff; border: 0; }
.hw .hw-configurator-wrapper .hw-cfg-btn-next::before,
.hw .hw-configurator-wrapper .hw-cfg-btn-submit::before { display: none; }
.hw .hw-configurator-wrapper .hw-cfg-btn-back { border: 1px solid var(--hw-line); color: var(--hw-ink); background: transparent; }
.hw .hw-configurator-wrapper .hw-cfg-btn-back:hover { border-color: var(--hw-navy); background: transparent; }

/* Fortschritt: 34-px-Punkte wie .stepper, statt 6-px-Striche */
.hw .hw-configurator-wrapper .hw-cfg-step-dots { gap: 10px; }
.hw .hw-configurator-wrapper .hw-cfg-dot { width: 12px; height: 12px; background: var(--hw-mist); }
.hw .hw-configurator-wrapper .hw-cfg-dot.done { background: var(--hw-navy); width: 12px; }
.hw .hw-configurator-wrapper .hw-cfg-dot.active { background: var(--hw-pink); width: 28px; }
.hw .hw-configurator-wrapper .hw-cfg-progress-bar { background: var(--hw-pink); }

/* Zusammenfassung als Chipzeile (.sumline) statt Tabelle */
.hw .hw-configurator-wrapper .hw-cfg-summary { background: transparent; padding: 0; }
.hw .hw-configurator-wrapper .hw-cfg-summary-row { background: var(--hw-mist); padding: 9px 14px; font-size: 0.9062rem; }
.hw .hw-configurator-wrapper .hw-cfg-summary-key { color: #5A5E6A; }
.hw .hw-configurator-wrapper .hw-cfg-summary-val { font-weight: 700; }

/* Buchungskarten in der Sprache von .weg */
.hw .hw-configurator-wrapper .hw-cfg-booking-options { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(14px, 1.5vw, 22px); }
.hw .hw-configurator-wrapper .hw-cfg-booking-card { background: var(--hw-mist); border: 0; padding: clamp(24px, 2.4vw, 34px); text-align: left; }
.hw .hw-configurator-wrapper .hw-cfg-booking-card:hover { background: #EFEFF1; }
.hw .hw-configurator-wrapper .hw-cfg-booking-card.selected { background: var(--hw-navy); color: #fff; }
.hw .hw-configurator-wrapper .hw-cfg-bc-title { font-size: 1.2188rem; font-weight: 800; color: inherit; }
.hw .hw-configurator-wrapper .hw-cfg-bc-desc { font-size: 0.9688rem; font-weight: 400; line-height: 1.6; color: #3B3E48; }
.hw .hw-configurator-wrapper .selected .hw-cfg-bc-desc { color: rgba(255,255,255,.85); }
.hw .hw-configurator-wrapper .hw-cfg-bc-check-item { font-size: 0.9375rem; font-weight: 400; }

/* ─── Gewaehlte Buchungskarte ────────────────────────────────────────────
   Die geteilte Widget-CSS setzt fuer .hw-cfg-bc-v2.selected
   `background:#fff !important` (hw-configurator.css). Das schlaegt jede
   Angabe ohne !important — die Navy-Flaeche aus dem Override oben fiel
   deshalb aus, waehrend das weisse Schriftbild blieb: weisse Schrift auf
   weisser Flaeche, gemessener Kontrast 1,0 (Meldung Bernd, 29.08.).
   Hier also ebenfalls !important, sonst ist die Regel wirkungslos.
   Ergebnis ist dieselbe Sprache wie bei den uebrigen Auswahlflaechen:
   navy Flaeche, weisse Schrift, keine Rahmen, kein Anheben. */
.hw .hw-configurator-wrapper .hw-cfg-booking-card.hw-cfg-bc-v2.selected {
  background: var(--hw-navy) !important;
  border: 0 !important;
  box-shadow: none;
  transform: none;
  color: #fff;
}
.hw .hw-configurator-wrapper .hw-cfg-bc-v2.selected .hw-cfg-bc-header {
  background: transparent; border-bottom-color: rgba(255,255,255,.2);
}
.hw .hw-configurator-wrapper .selected .hw-cfg-bc-title { color: #fff; }
.hw .hw-configurator-wrapper .selected .hw-cfg-bc-check-item { color: rgba(255,255,255,.85); }
/* Die fast schwarze „Kostenfrei"-Plakette verschwindet auf Navy; umgedreht
   bleibt sie lesbar. Die pinke Festpreis-Plakette traegt sich auf Navy selbst. */
.hw .hw-configurator-wrapper .selected .hw-cfg-bc-price.free { background: #fff; color: var(--hw-navy); }
.hw .hw-configurator-wrapper .hw-cfg-error-msg,
.hw .hw-configurator-wrapper .hw-cfg-step-error { font-size: 0.8438rem; color: var(--hw-err); font-weight: 600; }

/* Bestellbereich v33: Zusatzleistungen und Partnercode in derselben Sprache
   wie die Auswahlflaechen des Assistenten — .hw-mist statt weisser Karten,
   Navy fuer die getroffene Wahl, keine eigenen Rahmenfarben. Die neutrale
   Grundgestaltung steht in hw-configurator.css; die teilen sich 17
   Konfiguratoren, deshalb bleibt sie dort unberuehrt. */
.hw .hw-configurator-wrapper .hw-cfg-addons { border: 0; background: var(--hw-mist); padding: clamp(20px, 2vw, 28px); margin-top: clamp(16px, 1.8vw, 24px); }
.hw .hw-configurator-wrapper .hw-cfg-addons-title { font-size: 1.0938rem; font-weight: 800; color: var(--hw-navy); }
.hw .hw-configurator-wrapper .hw-cfg-addons-hint { font-size: 0.9062rem; color: #5A5E6A; line-height: 1.6; }
.hw .hw-configurator-wrapper .hw-cfg-addon { border: 0; background: #fff; padding: 13px 16px; gap: 14px; }
.hw .hw-configurator-wrapper .hw-cfg-addon:hover { background: #F7F7F8; }
.hw .hw-configurator-wrapper .hw-cfg-addon.selected { background: var(--hw-navy); }
.hw .hw-configurator-wrapper .hw-cfg-addon.selected .hw-cfg-addon-label,
.hw .hw-configurator-wrapper .hw-cfg-addon.selected .hw-cfg-addon-preis { color: #fff; }
.hw .hw-configurator-wrapper .hw-cfg-addon.selected .hw-cfg-addon-desc { color: rgba(255,255,255,.8); }
.hw .hw-configurator-wrapper .hw-cfg-addon-mark { border-color: #C7C8CD; }
.hw .hw-configurator-wrapper .hw-cfg-addon.selected .hw-cfg-addon-mark { border-color: var(--hw-pink); background: var(--hw-pink); }
.hw .hw-configurator-wrapper .hw-cfg-addon-label { font-size: 0.9688rem; font-weight: 700; }
.hw .hw-configurator-wrapper .hw-cfg-addon-desc { font-size: 0.875rem; }
.hw .hw-configurator-wrapper .hw-cfg-addon-preis { font-size: 0.9375rem; font-weight: 800; }
.hw .hw-configurator-wrapper .hw-cfg-addons-summe { border-top: 1px solid var(--hw-line); font-size: 1.0312rem; padding-top: 14px; margin-top: 16px; }
.hw .hw-configurator-wrapper .hw-cfg-partnercode-hint,
.hw .hw-configurator-wrapper .hw-cfg-beauftragung-hinweis { font-size: 0.875rem; color: #5A5E6A; line-height: 1.7; }

.hw .hw-configurator-wrapper .hw-cfg-success { text-align: left; padding: clamp(30px, 3vw, 48px) 0; }
.hw .hw-configurator-wrapper .hw-cfg-success-check { margin: 0 0 20px; border-color: var(--hw-pink); }
.hw .hw-configurator-wrapper .hw-cfg-success-title { font-size: clamp(28px, 3vw, 44px); font-weight: 800; letter-spacing: .01em; }

@media (max-width: 900px) {
  /* .hw-cfg-obj-card-options steht hier bewusst NICHT mehr: Es liegt innerhalb
     einer Objektkarte und regelt seine Spalten seit 29.08. selbst ueber
     auto-fit. Eine feste Zweispaltigkeit haette hier denselben zu schmalen
     Knopf erzeugt wie vorher die Dreispaltigkeit. */
  .hw .hw-configurator-wrapper .hw-cfg-gewerke-grid,
  .hw .hw-configurator-wrapper .hw-cfg-badges,
  .hw .hw-configurator-wrapper .hw-cfg-profil-options { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hw .hw-configurator-wrapper .hw-cfg-booking-options { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .hw .hw-configurator-wrapper .hw-cfg-gewerke-grid,
  .hw .hw-configurator-wrapper .hw-cfg-badges,
  .hw .hw-configurator-wrapper .hw-cfg-profil-options { grid-template-columns: minmax(0, 1fr); }
  .hw .hw-configurator-wrapper .hw-cfg-btn { width: 100%; justify-content: center; }
  .hw .hw-configurator-wrapper .hw-cfg-btn-next,
  .hw .hw-configurator-wrapper .hw-cfg-btn-submit { margin-left: 0; }
}

/* ─── Scan-Umschalter „Ein Termin, vier Ergebnisse" (Bernd 29.08.2026) ─────
   Kernstueck der Aufmass-Seite: Statt einer neunzeiligen Aufzaehlung zeigt
   die Seite dieselbe Wohnung in vier Auswertungen — Rundgang, Grundriss,
   Wohnflaeche, Punktwolke. Ein Klick, ein Bild: Der Besucher sieht in zwei
   Sekunden, was er bekommt.
   Ohne JavaScript sind alle vier Tafeln untereinander sichtbar (wie .reveal);
   erst html.js macht daraus Reiter. Verhalten: main.js, [data-hw-scanshow].
   ------------------------------------------------------------------------ */
.scanshow { margin-top: clamp(24px, 2.4vw, 34px); }
.scanshow__tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1vw, 14px); }
.js .scanshow__tabs { margin-bottom: clamp(20px, 2vw, 30px); }
.scanshow__tabs:not([hidden]) { display: grid; }
.scanshow__tab {
  border: 0; background: var(--hw-mist); color: var(--hw-ink); cursor: pointer;
  font-family: var(--font); font-size: 1.0312rem; font-weight: 700; line-height: 1.3;
  padding: clamp(16px, 1.6vw, 22px); text-align: left; position: relative;
  display: flex; flex-direction: column; gap: 6px;
  transition: background-color .12s ease, color .12s ease;
}
.scanshow__tab small { font-weight: 400; font-size: 0.8438rem; color: #4A4D57; line-height: 1.45; }
.scanshow__tab:hover { background: #EFEFF1; }
.scanshow__tab[aria-selected="true"] { background: var(--hw-navy); color: #fff; }
.scanshow__tab[aria-selected="true"] small { color: rgba(255,255,255,.8); }
.scanshow__tab[aria-selected="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--hw-pink);
}
.scanshow__tab:focus-visible { outline: 3px solid var(--hw-navy); outline-offset: 2px; }

.scanshow__panel { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 52px); align-items: center; }
.js .scanshow__panel + .scanshow__panel { margin-top: 0; }
.scanshow__panel + .scanshow__panel { margin-top: clamp(34px, 3.4vw, 56px); }
.scanshow__vis { margin: 0; background: var(--hw-mist); padding: clamp(18px, 2vw, 30px); }
.scanshow__vis svg { display: block; width: 100%; height: auto; }
.scanshow__cap { margin-top: 12px; font-size: 0.8438rem; color: #5A5E6A; }
.scanshow__text h3 { font-size: clamp(21px, 1.9vw, 27px); font-weight: 800; line-height: 1.2; margin: 0 0 12px; }
.scanshow__text p { font-size: 1.0312rem; line-height: 1.65; margin: 0 0 14px; }
.scanshow__text .check { margin: 0; }
.scanshow__fuer { display: inline-block; margin-top: 16px; font-size: 0.8438rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--hw-pink); }

/* Die gezeichnete Wohnung: eine Geometrie, vier Auswertungen. Farben kommen
   aus den Tokens, damit der Kontrastmodus der Bedienhilfe mitzieht. */
.planfig .wand { fill: none; stroke: var(--hw-navy); stroke-width: 6; stroke-linejoin: miter; }
.planfig .oeffnung { stroke: var(--hw-mist); stroke-width: 7; }
.planfig .flaeche { fill: var(--hw-navy); opacity: .09; }
.planfig .flaeche--akzent { fill: var(--hw-pink); opacity: .14; }
.planfig .mass { stroke: var(--hw-pink); stroke-width: 1.5; }
.planfig .masstext { font-family: var(--font); font-size: 11px; font-weight: 700; fill: var(--hw-pink); }
.planfig .raumtext { font-family: var(--font); font-size: 12px; font-weight: 700; fill: var(--hw-ink); }
.planfig .raumtext tspan { font-size: 11px; font-weight: 400; fill: #4A4D57; }
.planfig .standpunkt { fill: var(--hw-pink); }
.planfig .sicht { fill: var(--hw-pink); opacity: .16; }
.planfig .weg { stroke: var(--hw-pink); stroke-width: 2; stroke-dasharray: 5 5; fill: none; }
.planfig .punkt { fill: var(--hw-navy); }

@media (max-width: 1000px) {
  .scanshow__panel { grid-template-columns: minmax(0, 1fr); }
  .scanshow__tabs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 560px) { .scanshow__tabs { grid-template-columns: minmax(0, 1fr); } }

/* Technikkarte Matterport Pro3: Bildplatz + Datenblatt nebeneinander */
.geraet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 3vw, 52px); align-items: start; }
.geraet__bild { margin: 0; background: var(--hw-mist); padding: clamp(20px, 2.2vw, 34px); }
.geraet__bild svg { display: block; width: 100%; height: auto; }
.geraet__bild figcaption { margin-top: 14px; font-size: 0.8438rem; color: #5A5E6A; line-height: 1.5; }
@media (max-width: 1000px) { .geraet { grid-template-columns: minmax(0, 1fr); } }


/* Selbsttest (Ausbau-Punkt 22): reine Komposition aus .step-panel, .optgrid, .opt,
   .stepper, .check, details.acc und .infobox — keine neuen Farben, Variablen oder
   Breakpoints. Es braucht nur ein paar Korrekturen fuer die neuen Nachbarschaften. */
.hw .hw-selbsttest { max-width: 48rem; }
/* Im Ratgeber steht das Widget in .prose; dort schlaegt `.prose ul { padding-left: 20px }`
   die .check-Liste und der Haken haengt versetzt. */
.hw .hw-selbsttest .check { padding-left: 0; margin-top: 10px; }
/* .step-panel bringt 34px Aussenabstand mit (Assistent ohne JS); hier stapelt .stack. */
.hw .hw-selbsttest .step-panel { margin-bottom: 0; }
/* Im Ergebnisblock stossen Eyebrow, Liste und Empfehlung sonst aneinander. */
.hw .hw-selbsttest .acc-body .lbl { margin-top: 16px; }
.hw .hw-selbsttest .check + p { margin-top: 14px; }
/* Auf einer mist-Sektion (Schimmelseite) waeren mist-farbene Kacheln unsichtbar.
   Nur der NICHT gewaehlte Zustand wird aufgehellt: `.opt input:checked + label` traegt
   nur (0,2,1) und verlor sonst gegen diese Regel — die Kachel blieb weiss, waehrend die
   Schrift schon auf Weiss stand (unlesbar, gemessen 06.09.). */
.hw section.mist .hw-selbsttest .opt input:not(:checked) + label { background: #fff; }
.hw section.mist .hw-selbsttest .opt input:not(:checked) + label:hover { background: #EFEFF1; }