/* ──────────────────────────────────────────────────────────────
   COLEMAN MEISTERBETRIEB SHK · Blau-Variante (responsive)
   Eine Datei für Desktop + Mobile.
   ────────────────────────────────────────────────────────────── */

/* ─────────── SCHRIFTEN (lokal gehostet, kein Google-CDN) ───────────
   Erzeugt aus der Google-Fonts-CSS; Geist und Geist Mono sind Variable
   Fonts, daher eine Datei je Subset mit Gewichts-Range. */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/geist-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/geist-normal-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: 'Geist Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('fonts/geist-mono-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('fonts/geist-mono-normal-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: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrument-serif-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrument-serif-italic-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: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrument-serif-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrument-serif-normal-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;
}

:root {
  /* Blauton-Familie aus dem Logo abgeleitet: --sky ist exakt das Logo-Cyan (#00a6e4).
     --blue/-deep/-700 sind dieselbe Farbe abgedunkelt — das Logo-Cyan selbst erreicht
     mit weisser Schrift nur 2,8:1 und taugt daher nicht fuer Buttons oder Links.
     Die neutralen Toene tragen denselben Blaustich (Hue ~199), damit alles zusammenpasst. */
  --blue:       #0078b4;
  --blue-deep:  #005d92;
  --blue-700:   #004a7b;
  --sky:        #00a6e4;
  --sky-soft:   #bce4f3;
  --ink:        #122229;
  --ink-2:      #273c45;
  --muted:      #5b6d74;
  --line:       #d9e7ee;
  --line-2:     #c6dbe5;
  --mist:       #eaf4f8;
  --mist-2:     #e2eff6;
  --paper:      #f7f7f7;   /* identisch zum Hintergrund der Logodatei, damit das
                              Logo ohne Freistellen nahtlos sitzt */
  --white:      #ffffff;

  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans:  "Geist", "Helvetica Neue", Arial, sans-serif;
  --mono:  "Geist Mono", ui-monospace, monospace;

  --max: 1280px;
  --pad: clamp(20px, 4vw, 56px);

  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  font-family: var(--sans);
  font-size: 16px; line-height: 1.55; color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* 'height: auto' gehoert zwingend zu 'max-width: 100%'. Ohne die Zeile wirken die
   width/height-Attribute im Markup als Praesentationshinweis weiter: die Breite wird
   von max-width gedeckelt, die Hoehe bleibt aber auf dem Attributwert stehen — das
   Bild wird gestaucht. Die Attribute selbst bleiben stehen, sie verhindern Layout-
   Shift (CLS). Regeln, die bewusst eine feste Hoehe setzen (.nav__brand img,
   .menu__top img), sind spezifischer und stechen diese hier. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: rgba(0,120,180,.15); }
button { font: inherit; }
::selection { background: var(--blue); color: #fff; }

.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.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;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-2);
}
.eyebrow__line { display: inline-block; width: 36px; height: 1px; background: var(--blue); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 22px; border-radius: 999px;
  font-size: 15px; font-weight: 500; letter-spacing: -0.005em;
  transition: transform .15s, background .2s, color .2s, border-color .2s;
  cursor: pointer; border: 1px solid transparent; white-space: nowrap;
}
.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--blue-deep); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--ghost-light { color: #eaf4f8; border-color: rgba(234,244,248,.3); }
.btn--ghost-light:hover { border-color: #fff; background: rgba(255,255,255,.04); }
.btn .arrow { transition: transform .2s; }
.btn:hover .arrow { transform: translateX(3px); }

/* ─────────── NAV ─────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  /* Bewusst deckend statt Milchglas: backdrop-filter zwingt den Browser, beim
     Scrollen in jedem Frame den Hintergrund hinter dem Header neu weichzuzeichnen.
     Das flackert auf manchen GPUs/Browsern sichtbar. Deckende Flaeche ist ruhig
     und deutlich guenstiger zu rendern. */
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding-top: var(--safe-top);
}
.nav__inner {
  max-width: var(--max); margin: 0 auto; padding: 12px var(--pad);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px;
}
/* object-fit verhindert, dass das Bild horizontal gestaucht wird, wenn die
   Grid-Spalte auf schmalen Schirmen enger wird als das Logo. Ohne das wurde das
   Header-Logo leicht schmalgedrueckt — im Menue aber nicht, was beim Auf- und
   Zuklappen wie ein Zucken aussah. */
.nav__brand img { height: 58px; width: auto; display: block; object-fit: contain; }
.nav__links {
  display: flex; gap: 26px; justify-content: center;
  font-size: 14.5px; color: var(--ink-2);
}
.nav__links a { position: relative; padding: 6px 0; transition: color .15s; }
.nav__links a:hover { color: var(--blue); }
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 1px;
  background: var(--blue); transition: right .25s;
}
.nav__links a:hover::after { right: 0; }
.nav__cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px; border-radius: 999px; background: var(--blue); color: #fff;
  font-size: 14px; font-weight: 500; transition: background .2s;
}
.nav__cta:hover { background: var(--blue-deep); }
.nav__cta-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--sky);
  box-shadow: 0 0 0 4px rgba(0,166,228,.3);
  animation: pulse 2.2s ease-in-out infinite;
}
.nav__actions {
  display: flex; align-items: center; gap: 10px; justify-content: flex-end;
}
.nav__menu-btn {
  display: none;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--mist); border: 1px solid var(--line);
  place-items: center; cursor: pointer; padding: 0; color: var(--ink-2);
}
.nav__menu-btn svg { width: 18px; height: 18px; }

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(0,166,228,.3); }
  50%      { box-shadow: 0 0 0 7px rgba(0,166,228,.08); }
}

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__menu-btn { display: grid; }
  .nav__cta { padding: 9px 12px; font-size: 13px; gap: 7px; white-space: nowrap; }
  .nav__cta-dot { width: 7px; height: 7px; }
  .nav__brand img { height: 46px; }
  .nav__actions { gap: 8px; }
  .nav__inner { grid-template-columns: auto 1fr auto; gap: 8px; padding: 10px var(--pad); }
}

/* ─────────── OFFCANVAS MENU (mobile only) ─────────── */
.menu {
  position: fixed; inset: 0; z-index: 80;
  background: var(--paper);
  transform: translateX(100%);
  /* visibility mit ueberblenden: ohne das springt das Panel beim Schliessen
     sofort auf hidden und die Slide-Animation bricht sichtbar ab (Flackern).
     visibility schaltet beim Oeffnen sofort auf visible und beim Schliessen
     erst am Ende der Laufzeit auf hidden — genau das, was wir brauchen. */
  transition: transform .3s cubic-bezier(.4,0,.2,1), visibility .3s;
  display: flex; flex-direction: column;
  padding-top: var(--safe-top);
  visibility: hidden;
}
.menu.is-open { transform: translateX(0); visibility: visible; }
.menu__top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px var(--pad); border-bottom: 1px solid var(--line);
}
/* Bewusst KEINE eigene Logohoehe: das Menue-Logo erbt .nav__brand img und liegt
   damit deckungsgleich ueber dem Header-Logo (gleiches Padding, gleiche Hoehe).
   Beim Auf- und Zuklappen bleibt das Logo dadurch optisch stehen. */
.menu__close {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--mist); border: 1px solid var(--line);
  display: grid; place-items: center; cursor: pointer; padding: 0; color: var(--ink-2);
}
.menu__close svg { width: 18px; height: 18px; }
.menu__list { list-style: none; padding: 8px var(--pad); margin: 0; flex: 1; counter-reset: menu; }
.menu__list li { border-bottom: 1px solid var(--line); counter-increment: menu; }
.menu__list a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 4px;
  font-family: var(--serif); font-size: 30px; color: var(--ink); letter-spacing: -0.01em;
}
.menu__list a em { font-style: italic; color: var(--blue); }
/* Nummer aus dem Counter, nicht aus dem Markup — dann stimmt die Reihenfolge auch,
   wenn ein Menüpunkt über site.features abgeschaltet ist (siehe .build/partials/menu.html). */
.menu__list .num { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--muted); }
.menu__list .num::before { content: counter(menu, decimal-leading-zero); }
.menu__cta {
  padding: 18px var(--pad) calc(18px + var(--safe-bottom));
  display: grid; gap: 10px; background: var(--mist); border-top: 1px solid var(--line);
}
.menu__cta .btn { width: 100%; }
body.no-scroll { overflow: hidden; }

/* ─────────── HERO ─────────── */
.hero {
  position: relative;
  padding: clamp(48px, 8vw, 96px) var(--pad) 0;
  max-width: var(--max); margin: 0 auto;
}
/* Bis Laptopbreite einspaltig: Text, darunter die Kennzahlen (siehe die
   min-width-Regel unter .hero__stats). Begrenzt, damit die Ueberschrift nicht
   ueber die volle Bandbreite laeuft. */
.hero__grid { max-width: 900px; }
.hero__title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(48px, 7vw, 96px); line-height: .98; letter-spacing: -0.02em;
  color: var(--ink); margin: 22px 0 24px;
  text-wrap: balance;
}
.hero__title em { font-style: italic; color: var(--blue); }
.hero__title em:nth-of-type(2) { color: var(--blue-700); }
.hero__lede {
  font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; color: var(--ink-2);
  max-width: 52ch; margin: 0 0 32px; text-wrap: pretty;
}
.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 48px; }
.hero__stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin: 0; padding-top: 32px; border-top: 1px solid var(--line);
}
.hero__stats div { display: flex; flex-direction: column; gap: 6px; }
/* Ab Laptopbreite stehen die Kennzahlen rechts neben der Ueberschrift statt darunter.
   Der Platz dafuer war ohnehin leer, seit die Produktkarte entfallen ist. Untergrenze
   1024px: darunter braucht die zweizeilige Ueberschrift die volle Breite. Die rechte
   Spalte ist fest 300px breit, damit die Ueberschrift die Aufteilung bestimmt und
   nicht umgekehrt. */
@media (min-width: 1024px) {
  .hero__grid {
    max-width: none;
    display: grid; grid-template-columns: minmax(0, 1fr) 300px;
    gap: clamp(48px, 5vw, 72px); align-items: end;
  }
  .hero__copy { min-width: 0; }
  /* Der Abstand trennte die Buttons von den Kennzahlen darunter. Nebeneinander ist er
     tote Luft und wuerde die Kennzahlen tiefer haengen lassen als die Buttons. */
  .hero__ctas { margin-bottom: 0; }
  .hero__stats {
    grid-template-columns: 1fr; gap: 26px;
    padding: 4px 0 4px 40px;
    border-top: 0; border-left: 1px solid var(--line);
  }
}
.hero__stats dt { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hero__stats dd { margin: 0; font-family: var(--serif); font-size: 19px; line-height: 1.2; color: var(--ink); }
/* Global gilt 'a { color: inherit; text-decoration: none }' — ohne eigene Regel waere
   der Foerderlink hier nicht als Link erkennbar. */
.hero__stats dd a {
  color: var(--blue); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
  transition: color .15s;
}
.hero__stats dd a:hover { color: var(--blue-700); }

/* Die Ueberschrift soll zweizeilig bleiben. "Bäder mit Charakter." ist die laengere
   Zeile und braucht bei 48px rund 323px; ab etwa 375px Viewport passt das. Darunter
   (360px ist eine haeufige Android-Breite) wuerde jede Zeile ein zweites Mal
   umbrechen — deshalb dort eine Stufe kleiner. */
@media (max-width: 374px) {
  .hero__title { font-size: 40px; }
}

.marquee {
  margin-top: clamp(56px, 8vw, 96px);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  overflow: hidden; padding: 22px 0;
}
.marquee__track {
  display: flex; gap: 36px; white-space: nowrap;
  animation: marquee 38s linear infinite;
  font-family: var(--serif); font-size: 22px; color: var(--ink-2);
  width: max-content;
}
.marquee__track span:nth-child(even) { color: var(--sky); font-size: 16px; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ─────────── SECTION HEADS ─────────── */
.section-head { max-width: 720px; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(36px, 4.6vw, 64px); line-height: 1.02; letter-spacing: -0.015em;
  margin: 18px 0 18px; color: var(--ink); text-wrap: balance;
}
.section-title em { font-style: italic; color: var(--blue); }
.section-sub {
  font-size: clamp(16px, 1.2vw, 18px); color: var(--ink-2);
  max-width: 56ch; margin: 0; text-wrap: pretty;
}

/* ─────────── LEISTUNGEN ─────────── */
.services { padding: clamp(80px, 10vw, 140px) 0; }
.service-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.service-card {
  padding: 36px 32px 32px; border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 14px;
  position: relative; transition: background .25s;
}
.service-card:last-child { border-right: none; }
.service-card:hover { background: var(--mist); }
.service-card__num { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--muted); }
.service-card__icon { color: var(--blue); margin: 8px 0 4px; }
.service-card--bath .service-card__icon { color: var(--sky); }
.service-card h3 {
  font-family: var(--serif); font-weight: 400; font-size: 38px;
  line-height: 1.05; margin: 0; letter-spacing: -0.01em;
}
.service-card p { margin: 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }
/* 'margin-top: auto' schiebt Liste UND Link gemeinsam an den Kartenboden. Dadurch
   sitzt die gestrichelte Linie in allen Karten auf derselben Hoehe, auch wenn der
   Absatz darueber unterschiedlich lang ist. Sass das auto am Link, wanderte nur
   dieser nach unten und die Linie folgte der Textlaenge. */
.service-card__list {
  list-style: none; margin: auto 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
  border-top: 1px dashed var(--line-2); padding-top: 16px;
}
.service-card__list li { position: relative; padding-left: 22px; font-size: 14px; color: var(--ink-2); }
.service-card__list li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 12px; height: 1px; background: var(--blue);
}
.service-card__link {
  padding-top: 18px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--blue); transition: color .2s;
  display: inline-flex; align-items: center;
}
.service-card__link:hover { color: var(--blue-700); }

@media (max-width: 920px) {
  .service-grid { grid-template-columns: 1fr; }
  .service-card { border-right: none; border-bottom: 1px solid var(--line); }
  .service-card:last-child { border-bottom: none; }
}

/* ─────────── DER MEISTER ─────────── */
.meister { padding: clamp(80px, 10vw, 140px) 0; background: var(--mist); }
.meister__grid {
  display: grid; grid-template-columns: .82fr 1.18fr;
  gap: clamp(36px, 5vw, 72px); align-items: start;
}
.meister__aside { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 20px; }
/* Frueher ein starrer 4:5-Rahmen mit 'overflow: hidden', in dem ein Platzhaltermuster
   lag. Das Bild bestimmt seine Hoehe jetzt selbst — so kann nichts beschnitten werden,
   auch wenn spaeter ein anders proportioniertes Foto eingesetzt wird. */
.meister__portrait { position: relative; margin: 0; }
.meister__portrait img {
  display: block; width: 100%; height: auto;
  border-radius: 16px; border: 1px solid var(--line);
  box-shadow: 0 30px 60px -34px rgba(18,34,41,.24);
}
/* Liegt bewusst auf dem Foto (position: absolute im relativen Rahmen darueber) und
   verdeckt dessen unteres Sechstel — beim aktuellen Portraet nur Guertel und Huefte. */
.meister__namecard {
  position: absolute; left: 16px; right: 16px; bottom: 16px;
  background: rgba(247,247,247,.94); backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 3px;
}
.meister__namecard-k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.meister__namecard-v { font-family: var(--serif); font-size: 24px; line-height: 1.05; color: var(--ink); }
.meister__facts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0;
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
}
.meister__facts > div { padding: 16px 14px; display: flex; flex-direction: column; gap: 6px; }
.meister__facts > div + div { border-left: 1px solid var(--line); }
.meister__facts dt { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.meister__facts dd { margin: 0; font-family: var(--serif); font-size: 22px; line-height: 1; color: var(--blue); }
.meister__lede {
  font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6; color: var(--ink-2);
  max-width: 56ch; margin: 18px 0 16px; text-wrap: pretty;
}
.meister__note {
  font-size: 15px; line-height: 1.6; color: var(--muted);
  max-width: 56ch; margin: 0 0 8px;
  padding: 16px 18px; background: var(--paper);
  border: 1px dashed var(--line-2); border-radius: 10px;
  font-style: italic;
}
.werdegang { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); }
.werdegang__head {
  font-family: var(--mono); font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 24px;
}
.werdegang__list { list-style: none; margin: 0; padding: 0; position: relative; }
.werdegang__list::before {
  content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px; background: var(--line-2);
}
.wd {
  position: relative; display: grid; grid-template-columns: 96px 1fr;
  gap: 20px; padding: 0 0 28px 32px;
}
.wd:last-child { padding-bottom: 0; }
.wd::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--line-2); z-index: 1;
}
.wd--accent::before {
  background: var(--blue); border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(0,120,180,.15);
}
.wd__year {
  font-family: var(--mono); font-size: 13px; letter-spacing: .04em;
  color: var(--blue); padding-top: 4px; font-weight: 500;
}
.wd--accent .wd__year { color: var(--blue-700); }
.wd__body h4 {
  font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.1;
  letter-spacing: -0.01em; margin: 0 0 5px; color: var(--ink);
}
.wd__body p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
/* Eingeklappter Werdegang-Text (nur auf dem Handy, gesetzt von app.js). Ohne
   JavaScript bleibt der Text vollstaendig sichtbar statt dauerhaft abgeschnitten.
   Das abschliessende "…" erzeugt line-clamp selbst. */
.wd__body p.is-collapsed {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;
  overflow: hidden;
}
/* Der Schalter wird von app.js eingefuegt — es gibt ihn nur, wo der Text
   tatsaechlich laenger als eine Zeile ist. */
.wd__more {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 8px; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--blue); transition: color .15s;
}
.wd__more:hover { color: var(--blue-700); }
.wd__more::after {
  content: ""; width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; transition: transform .18s;
}
.wd__more[aria-expanded="true"]::after { transform: rotate(180deg); }

@media (max-width: 920px) {
  .meister__grid { grid-template-columns: 1fr; }
  .meister__aside { position: static; }
  /* Einspaltig wuerde das Portraet sonst die volle Breite einnehmen (auf Tablets
     ueber 800px). Das Foto hat 1120px Breite und wuerde dort auf Retina-Schirmen
     sichtbar weich — ausserdem dominiert ein so grosses Portraet die Sektion. */
  .meister__portrait { max-width: 420px; }
}
@media (max-width: 560px) {
  .wd { grid-template-columns: 1fr; gap: 4px; }
}

/* ─────────── FÖRDERUNG (dunkler Block) ─────────── */
.foerderung {
  background: var(--ink); color: #eaf4f8;
  padding: clamp(80px, 10vw, 140px) 0;
  position: relative; overflow: hidden;
}
.foerderung::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at top right, rgba(0,166,228,.18), transparent 50%),
    radial-gradient(ellipse at bottom left, rgba(255,255,255,.04), transparent 60%);
}
/* Frueher zweispaltig: Text links, Panel mit den Foerderbalken rechts. Das Panel ist
   entfallen, das Raster hielt aber weiter eine leere zweite Spalte frei — rund die
   halbe Sektionsbreite. Jetzt einspaltig und auf dasselbe Mass wie der Hero begrenzt,
   damit die Ueberschrift nicht ueber die volle Bandbreite laeuft. */
.foerderung__inner { position: relative; max-width: 900px; }
.eyebrow--light { color: #eaf4f8; }
.eyebrow--light .eyebrow__line { background: var(--sky); }
.foerderung__title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(34px, 4.6vw, 60px); line-height: 1.05; letter-spacing: -0.015em;
  margin: 18px 0 22px; color: #fff; text-wrap: balance;
}
.foerderung__title .big-num { font-style: italic; color: var(--sky); }
.foerderung__sub {
  font-size: clamp(15px, 1.1vw, 17px); color: rgba(234,244,248,.78);
  max-width: 52ch; margin: 0 0 32px; text-wrap: pretty;
}
.foerderung__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.foerderung .btn--primary { background: var(--sky); color: var(--ink); }
.foerderung .btn--primary:hover { background: #fff; }
.foerderung__breakdown {
  background: rgba(255,255,255,.05); border: 1px solid rgba(234,244,248,.12);
  border-radius: 14px; padding: 28px; backdrop-filter: blur(4px);
}
.bar-item { margin-bottom: 18px; }
.bar-item:last-of-type { margin-bottom: 14px; }
.bar-item__label {
  display: flex; justify-content: space-between;
  font-size: 13px; margin-bottom: 8px; color: rgba(234,244,248,.85);
  font-family: var(--mono); letter-spacing: .02em;
}
.bar { height: 6px; background: rgba(234,244,248,.08); border-radius: 999px; overflow: hidden; }
.bar span { display: block; height: 100%; background: rgba(234,244,248,.55); border-radius: 999px; transition: width .8s; }
.bar--sky span { background: var(--sky); }
.bar-item--total {
  padding-top: 18px; border-top: 1px solid rgba(234,244,248,.12); margin-top: 4px;
}
.bar-item--total .bar-item__label {
  color: #fff; font-family: var(--serif); font-size: 17px; letter-spacing: 0;
}
.bar-item--total .bar { height: 8px; }
.foerderung__fineprint {
  font-family: var(--mono); font-size: 11px; line-height: 1.55;
  color: rgba(234,244,248,.5); margin: 22px 0 0;
  padding-top: 16px; border-top: 1px solid rgba(234,244,248,.08);
}

/* ─────────── ABLAUF ─────────── */
.ablauf { background: var(--mist); padding: clamp(80px, 10vw, 140px) 0; }
.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; position: relative;
}
.step {
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  padding: 24px; display: flex; flex-direction: column; gap: 14px;
  transition: transform .2s, box-shadow .2s;
}
.step:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -20px rgba(18,34,41,.2); }
.step__num { font-family: var(--serif); font-style: italic; font-size: 46px; line-height: 1; color: var(--blue); }
.step h3 { font-family: var(--sans); font-weight: 500; font-size: 20px; margin: 0; letter-spacing: -0.005em; }
.step p { margin: 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }
.step__meta {
  margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line-2);
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}

@media (max-width: 1024px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .steps { grid-template-columns: 1fr; } }

/* ─────────── KONTAKT ─────────── */
.kontakt { padding: clamp(80px, 10vw, 140px) 0; }
.kontakt__grid {
  display: grid; grid-template-columns: 1fr 1.1fr;
  gap: clamp(40px, 6vw, 80px); align-items: start;
}
.kontakt__title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(36px, 4.4vw, 60px); line-height: 1.02;
  letter-spacing: -0.015em; margin: 18px 0 18px; text-wrap: balance;
}
.kontakt__title em { font-style: italic; color: var(--blue); }
.kontakt__sub { font-size: 16.5px; color: var(--ink-2); max-width: 44ch; margin: 0 0 32px; }
.kontakt address { font-style: normal; }
.kontakt__list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.kontakt__list li {
  display: grid; grid-template-columns: 110px 1fr; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.kontakt__k {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); padding-top: 3px;
}
.kontakt__v { font-size: 15.5px; color: var(--ink); line-height: 1.5; }
a.kontakt__v { color: var(--blue); }
a.kontakt__v:hover { color: var(--blue-700); }
.kontakt__form {
  background: var(--mist); border: 1px solid var(--line);
  border-radius: 18px; padding: clamp(24px, 3vw, 36px);
}
.form-fields { display: flex; flex-direction: column; gap: 16px; transition: opacity .3s; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kontakt__form label { display: flex; flex-direction: column; gap: 6px; }
.kontakt__form label > span:first-child {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.kontakt__form input,
.kontakt__form textarea {
  font-family: var(--sans); font-size: 15px;
  padding: 12px 14px; border: 1px solid var(--line-2);
  border-radius: 10px; background: var(--white); color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.kontakt__form input:focus,
.kontakt__form textarea:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0,120,180,.14);
}
.kontakt__form textarea { resize: vertical; min-height: 100px; }
.chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: inline-block; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--white);
  font-size: 14px; color: var(--ink-2); transition: all .15s;
}
.chip:hover span { border-color: var(--ink-2); }
.chip input:checked + span { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn--full { justify-content: center; width: 100%; padding: 16px; }
.btn[disabled] { opacity: .6; cursor: not-allowed; }
.form-success {
  padding: 18px; background: var(--white); border: 1px solid var(--blue);
  border-radius: 10px; font-size: 15px;
}
.form-success strong { color: var(--blue-deep); }
.form-error {
  padding: 14px 16px; background: #fff5f5; border: 1px solid #f5b8b8;
  border-radius: 10px; font-size: 14px; color: #8a2929;
}
.honeypot {
  position: absolute; left: -10000px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

@media (max-width: 920px) { .kontakt__grid { grid-template-columns: 1fr; } }
@media (max-width: 540px) {
  .form-row { grid-template-columns: 1fr; }
  /* 16px Inputs verhindern iOS-Auto-Zoom */
  .kontakt__form input,
  .kontakt__form textarea { font-size: 16px; }
}

/* ─────────── FOOTER ─────────── */
.foot {
  background: var(--ink); color: rgba(234,244,248,.7);
  padding: 64px 0 24px; margin-top: 32px;
}
/* Frueher vier Spalten (1.4fr 1fr 1fr 1fr). Es sind nur noch zwei Bloecke uebrig,
   die beiden leeren Spalten liessen knapp die halbe Breite frei. Flex statt Raster:
   Brand links, Rechtliches rechts — die Breite trennt sie, nicht leere Zellen.
   Bei zu wenig Platz bricht die Zeile von selbst um. */
.foot__grid {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 32px 40px;
  padding-bottom: 48px; border-bottom: 1px solid rgba(234,244,248,.08);
}
.foot__brand p { font-size: 14px; line-height: 1.6; margin: 0; max-width: 30ch; }
.foot__col h3 {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; margin: 6px 0 14px;
}
.foot__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.foot__col a { font-size: 14px; transition: color .15s; }
.foot__col a:hover { color: var(--sky); }
.foot__bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding-top: 24px; font-family: var(--mono);
  font-size: 11px; letter-spacing: .06em; color: rgba(234,244,248,.4);
}
.foot__mark { color: var(--sky); }

/* Auf schmalen Schirmen nebeneinander zu quetschen bringt nichts — untereinander
   statt space-between, sonst kleben die beiden Bloecke an den Raendern. */
@media (max-width: 480px) { .foot__grid { flex-direction: column; } }

/* ─────────── STICKY BOTTOM CTA (mobile only) ─────────── */
.stickybar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  background: rgba(247,247,247,.96);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-top: 1px solid var(--line);
  padding: 10px var(--pad) calc(10px + var(--safe-bottom));
  grid-template-columns: 1fr 1fr; gap: 8px;
  transition: transform .3s ease;
}
.stickybar.is-hidden { transform: translateY(115%); }
.stickybar .btn { min-height: 48px; padding: 12px; font-size: 14px; width: auto; }
.stickybar svg { width: 14px; height: 14px; }

@media (max-width: 860px) {
  .stickybar { display: grid; }
  body { padding-bottom: calc(76px + var(--safe-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─────────── SKIP-LINK ───────────
   Nur sichtbar, solange er den Fokus hat — erstes Ziel beim Tabben. */
.skiplink {
  position: absolute; left: 8px; top: -100px; z-index: 100;
  background: var(--blue-deep); color: var(--paper);
  padding: 10px 16px; border-radius: 8px;
  font-size: 14px; font-weight: 500; text-decoration: none;
  transition: top .15s ease;
}
.skiplink:focus { top: 8px; }

/* ─────────── RECHTSTEXTE (Impressum, Datenschutz, 404) ─────────── */
.legal { padding: clamp(44px, 8vw, 88px) 0 clamp(56px, 9vw, 104px); }
.legal__inner { max-width: 720px; }
.legal h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(40px, 7vw, 66px); line-height: 1.03; letter-spacing: -0.01em;
  margin: 16px 0 0; color: var(--ink);
}
.legal h1 em { font-style: italic; color: var(--blue); }
.legal__lede { color: var(--muted); font-size: 16px; margin: 18px 0 0; max-width: 56ch; }
.legal__block { margin-top: 38px; padding-top: 26px; border-top: 1px solid var(--line); }
.legal__block:first-of-type { margin-top: 44px; }
.legal h2 {
  font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--blue-deep); margin: 0 0 14px;
}
.legal p { margin: 0 0 10px; color: var(--ink-2); }
.legal p:last-child { margin-bottom: 0; }
.legal strong { font-weight: 600; color: var(--ink); }
.legal__name { font-family: var(--serif); font-size: 24px; line-height: 1.25; color: var(--ink); margin-bottom: 12px; }
.legal a { color: var(--blue-deep); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--blue); }
.legal__k { display: inline-block; min-width: 132px; color: var(--muted); }
.legal__stand { margin-top: 40px; font-size: 13px; color: var(--muted); }

/* Abschnittsnummern der Datenschutzerklärung laufen über einen Zähler, statt fest im Text
   zu stehen: der Badkonfigurator-Abschnitt hängt am Feature-Flag, und eine harte
   Nummerierung hinterließe bei abgeschaltetem Flag eine Lücke in der Reihenfolge. */
.legal--nummeriert .legal__inner { counter-reset: legal-abschnitt; }
.legal--nummeriert .legal__block h2::before {
  counter-increment: legal-abschnitt;
  content: counter(legal-abschnitt) ". ";
}

@media (max-width: 560px) {
  .legal__k { display: block; min-width: 0; }
}

/* ─────────── BAUSTELLENSEITE (Platzhalter bis zum Go-Live) ───────────
   Eigenständige Seite ohne Nav und Footer: solange nur sie erreichbar ist,
   würden Menü- und Footer-Links alle auf sie selbst zurückführen. */
.baustelle {
  min-height: 100svh;
  display: flex; align-items: center;
  padding: clamp(48px, 9vw, 96px) 0;
}
.baustelle__inner { max-width: 620px; }
.baustelle__logo { margin-bottom: clamp(28px, 5vw, 44px); }
.baustelle h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(38px, 6.5vw, 60px); line-height: 1.05; letter-spacing: -0.01em;
  margin: 16px 0 0; color: var(--ink);
}
.baustelle__lede {
  color: var(--muted); font-size: 16px; line-height: 1.6;
  margin: 22px 0 0; max-width: 46ch;
}
.baustelle__actions {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: clamp(26px, 4vw, 34px);
}

.baustelle__legal {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: clamp(34px, 5vw, 46px) 0 0;
  padding-top: 26px; border-top: 1px solid var(--line);
  font-size: 14px; color: var(--muted);
}
.baustelle__legal a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.baustelle__legal a:hover { color: var(--ink); }

/* Balkenbreiten als Klassen statt Inline-Styles — hält die CSP ohne 'unsafe-inline'. */
.bar__fill { width: 0; }
.bar__fill--30 { width: 30%; }
.bar__fill--50 { width: 50%; }
.bar__fill--70 { width: 70%; }
.bar__fill--80 { width: 80%; }