/* =========================================================
   SECKLER Bad · Solar · Heizung GmbH
   Design-System & Stylesheet
   Keine externen Fonts/CDNs (DSGVO-freundlich, kein Google-Fonts-Request)
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  /* Marke */
  --gold:      #FFC627;
  --gold-2:    #F5A114;
  --gold-3:    #965A00;   /* 5.6:1 auf Weiss – WCAG AA fuer Kleintext */
  --aqua:      #22A7E0;
  --aqua-2:    #0A6EA5;   /* eine Spur dunkler als #0B79B3: traegt auch auf --bg-soft und --aqua-3 die 4,5:1 */
  --aqua-3:    #E8F6FD;

  /* Neutral */
  --ink:       #0C1520;
  --ink-2:     #14202E;
  --ink-3:     #1E2C3D;
  --slate:     #44586F;
  --muted:     #586C80;   /* 5.4:1 auf Weiss */
  --line:      #E3EAF1;
  --line-2:    #EEF3F8;
  --bg:        #FFFFFF;
  --bg-soft:   #F5F8FB;
  --bg-soft-2: #EDF3F8;

  --ok:        #16A34A;
  --warn:      #DC2626;

  /* Layout */
  --wrap:      1200px;
  --gutter:    clamp(1.1rem, 4vw, 2.5rem);
  --r-sm:      10px;
  --r:         16px;
  --r-lg:      24px;
  --r-xl:      32px;

  /* Schatten */
  --sh-1: 0 1px 2px rgba(12,21,32,.06), 0 2px 8px rgba(12,21,32,.05);
  --sh-2: 0 2px 6px rgba(12,21,32,.06), 0 12px 28px rgba(12,21,32,.09);
  --sh-3: 0 4px 12px rgba(12,21,32,.08), 0 24px 60px rgba(12,21,32,.14);
  --sh-gold: 0 6px 20px rgba(245,161,20,.35);

  /* Typografie */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", "Noto Sans", Arial, sans-serif;

  --step--1: clamp(.82rem, .79rem + .12vw, .89rem);
  --step-0:  clamp(1rem, .96rem + .18vw, 1.09rem);
  --step-1:  clamp(1.16rem, 1.08rem + .34vw, 1.4rem);
  --step-2:  clamp(1.38rem, 1.22rem + .66vw, 1.85rem);
  --step-3:  clamp(1.62rem, 1.34rem + 1.16vw, 2.45rem);
  --step-4:  clamp(1.95rem, 1.44rem + 2.1vw, 3.3rem);
  --step-5:  clamp(2.3rem, 1.4rem + 3.6vw, 4.4rem);

  --header-h: 82px;
}

/* ---------- 2. Reset / Basis ---------- */
*,*::before,*::after{ box-sizing:border-box; }
/* `hidden` ist im Browser-Stylesheet nur `display:none` mit minimaler Spezifität –
   jede eigene display-Regel (z. B. `.form__row{display:grid}`) schlägt es sonst. */
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:110px; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
body{
  margin:0;
  font-family:var(--font);
  font-size:var(--step-0);
  line-height:1.68;
  color:var(--slate);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{ max-width:100%; height:auto; display:block; }

/* Seit 09/2026 steckt jedes Foto in <picture> (WebP mit JPEG-Rückfall).
   display:contents nimmt die Hülle aus dem Layout, damit Grid und Flex
   weiter direkt auf das Bild wirken – sonst wäre die Hülle das Kind. */
picture{ display:contents; }
/* Mit display:contents wird das leere <source> selbst zum Raster- oder Flex-Element: ein
   Kästchen von 0 px Höhe, das eine Zelle belegt. Am 28.09.2026 schob es in der Teamkarte (Handy)
   Name, Rolle und Qualifikationen je eine Zeile nach unten. Die Bildauswahl des Browsers hängt
   nicht an der Darstellung des <source> – ausblenden ist gefahrlos. */
picture > source{ display:none; }

/* Eine Ausnahme, die beim Umbau am 11.09.2026 aufgefallen ist: Eine Hülle
   ohne Kasten ist auch kein Bezug mehr für `height:100%`. Das Bild fiel
   dadurch auf seine Eigenhöhe zurück – im Textblock 458 statt 560 Pixel.
   Wo ein Bild eine Fläche ausfüllen soll, bekommt die Hülle ihren Kasten
   zurück und reicht die Höhe durch. (Stretch hilft hier nicht: auf
   ersetzte Elemente wie <img> wirkt es nicht.) */
.split__media > picture{ display:block; height:100%; }
h1,h2,h3,h4{
  color:var(--ink); line-height:1.14; margin:0 0 .55em; letter-spacing:-.022em; font-weight:800;
  overflow-wrap:break-word; text-wrap:balance;
}
/* Deutsche Komposita wie „Geschäftsbedingungen“ sind länger als so manche
   Handy-Zeile. Silbentrennung deshalb nur dort, wo der Platz wirklich fehlt –
   auf breiten Schirmen sieht ein getrenntes „Ab-nahme“ nur nach Panne aus. */
@media (max-width:700px){
  h1,h2,h3,h4{ hyphens:auto; }
}
h1{ font-size:var(--step-5); letter-spacing:-.032em; }
/* h2 lag auf Stufe 4 und war damit bei 1440 px 52,8 px groß – nur sechs Prozent
   kleiner als die h1 mit 56,3. Zwei Ebenen, die gleich laut rufen, sind keine
   Ordnung mehr. Auf Stufe 3 sind es 39,2 px: klar unter der h1, klar über der
   h3 mit 29. Stufe 4 bleibt der h1 der Unterseiten und dem Preis im Shop. */
h2{ font-size:var(--step-3); letter-spacing:-.024em; }
h3{ font-size:var(--step-2); }
h4{ font-size:var(--step-1); }
p{ margin:0 0 1.1em; }
a{ color:var(--aqua-2); text-decoration:none; }
a:hover{ text-decoration:underline; }
ul,ol{ margin:0 0 1.2em; padding-left:1.25em; }
li{ margin:.32em 0; }
strong{ color:var(--ink); font-weight:700; }
hr{ border:0; border-top:1px solid var(--line); margin:2.5rem 0; }
table{ border-collapse:collapse; width:100%; }
:focus-visible{ outline:3px solid var(--aqua); outline-offset:3px; border-radius:4px; }
::selection{ background:var(--gold); color:var(--ink); }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.skip{
  position:absolute; left:-9999px; top:0; z-index:9999;
  background:var(--ink); color:#fff; padding:.9rem 1.4rem; border-radius:0 0 var(--r-sm) 0;
}
.skip:focus{ left:0; }
.linkish{ background:none; border:0; padding:0; font:inherit; color:inherit; cursor:pointer; text-decoration:underline; }

/* ---------- 3. Buttons ---------- */
.btn{
  --btn-bg:var(--ink); --btn-fg:#fff; --btn-bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:.86em 1.55em;
  font-size:.97rem; font-weight:700; letter-spacing:-.01em; line-height:1.2;
  color:var(--btn-fg); background:var(--btn-bg);
  border:2px solid var(--btn-bd); border-radius:999px;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s, background .18s, color .18s, border-color .18s;
}
.btn:hover{ text-decoration:none; transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn--gold{
  --btn-fg:#26160A;
  background:linear-gradient(135deg,var(--gold) 0%,var(--gold-2) 100%);
  box-shadow:0 3px 10px rgba(245,161,20,.3);
}
.btn--gold:hover{ box-shadow:var(--sh-gold); }
.btn--dark{ --btn-bg:var(--ink); }
.btn--dark:hover{ --btn-bg:var(--ink-3); }
.btn--soft{ --btn-bg:var(--bg-soft-2); --btn-fg:var(--ink); }
.btn--soft:hover{ --btn-bg:#DFE9F2; }
.btn--outline{ --btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:var(--line); }
.btn--outline:hover{ --btn-bd:var(--ink); }
.btn--outline-light{ --btn-bg:transparent; --btn-fg:#fff; --btn-bd:rgba(255,255,255,.4); }
.btn--outline-light:hover{ --btn-bd:#fff; background:rgba(255,255,255,.1); }
.btn--ghost{ --btn-bg:rgba(255,255,255,.08); --btn-fg:#fff; --btn-bd:rgba(255,255,255,.22); }

/* WhatsApp: im Ruhezustand unauffällig wie die Nachbarknöpfe, beim Überfahren
   im Grün des Dienstes – damit der Knopf erkennbar zu WhatsApp gehört und nicht
   nach einer beliebigen zweiten Handlung aussieht. Nur für echte Zeiger, weil
   ein :hover auf dem Handy nach der Berührung kleben bleibt. */
@media (hover:hover) and (pointer:fine){
  .btn--wa:hover{
    --btn-bd:#25D366;
    --btn-bg:rgba(37,211,102,.16);
    box-shadow:0 0 0 1px rgba(37,211,102,.35),
               0 6px 20px rgba(18,140,126,.34),
               0 0 26px rgba(37,211,102,.22);
  }
  .btn--outline-light.btn--wa:hover{ background:rgba(37,211,102,.16); }
}
/* Auf der Tastatur derselbe Hinweis wie mit der Maus. */
.btn--wa:focus-visible{
  --btn-bd:#25D366;
  box-shadow:0 0 0 1px rgba(37,211,102,.35), 0 6px 20px rgba(18,140,126,.34);
}
.btn--lg{ padding:1.02em 1.9em; font-size:1.02rem; }
.btn--block{ display:flex; width:100%; }
/* Auf sehr schmalen Geräten dürfen lange Button-Beschriftungen umbrechen,
   sonst sprengt z. B. „Komplettpreis inkl. Einbau anfragen“ das Layout. */
@media (max-width:430px){
  .btn{ white-space:normal; text-align:center; max-width:100%; }
  .actions{ align-items:stretch; }
}
.btn__ico{ flex:none; }

/* ---------- 4. Topbar ---------- */
.topbar{ background:var(--ink); color:#B6C6D6; font-size:.8rem; border-bottom:1px solid rgba(255,255,255,.07); }
.topbar__in{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:38px; flex-wrap:wrap; }
.topbar__badge{
  display:inline-flex; align-items:center; gap:.45em; font-weight:600; color:var(--gold);
}
.topbar__badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 3px rgba(255,198,39,.2); }
.topbar__right{ display:flex; align-items:center; gap:1.35rem; flex-wrap:wrap; }
.topbar__link{ display:inline-flex; align-items:center; gap:.4em; color:#C9D7E4; }
.topbar__link:hover{ color:#fff; text-decoration:none; }
@media (max-width:640px){
  .topbar__left{ display:none; }
  .topbar__in{ justify-content:center; }
  .topbar__link--hide-sm{ display:none; }
}
@media (max-width:980px){ .topbar__link--hide-md{ display:none; } }

/* ---------- 5. Header / Navigation ---------- */
/* Achtung: hier bewusst KEIN backdrop-filter/transform/filter.
   Solche Eigenschaften machen den Header zum Containing Block für
   position:fixed-Kinder – das Off-Canvas-Menü (.nav) würde dann nicht mehr
   am Viewport, sondern am Header ausgerichtet. */
.header{
  position:sticky; top:0; z-index:900;
  background:var(--ink);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:box-shadow .25s, background .25s;
}
.header.is-stuck{ box-shadow:0 10px 34px rgba(6,12,20,.4); }
.header__in{
  display:flex; align-items:center; gap:1.5rem; min-height:var(--header-h);
  transition:min-height .28s cubic-bezier(.2,.8,.3,1);
  /* Bezugsrahmen für das Mega-Menü: Das Panel zentriert sich am Kopfbereich,
     nicht am einzelnen Menüpunkt – sonst ragt ein 940 px breites Panel unter
     „Leistungen“ rechts aus dem Viewport und die Seite lässt sich seitlich ziehen. */
  position:relative;
}
.brand{ flex:none; display:block; }
.brand img{ height:clamp(40px, 3.4vw, 52px); width:auto; transition:height .28s cubic-bezier(.2,.8,.3,1); }
.header__cta{ margin-left:auto; }
@media (max-width:1100px){ .header__cta{ display:none; } }

/* Der Header rueckt beim Scrollen zusammen – gewinnt Platz zurueck und
   signalisiert nebenbei, dass die Seite in Bewegung ist. Nur ab Desktop:
   darunter hängt das Off-Canvas-Menue an der festen Hoehe --header-h. */
@media (min-width:1101px){
  .header.is-stuck .header__in{ min-height:64px; }
  .header.is-stuck .brand img{ height:clamp(34px, 2.7vw, 42px); }
}

/* Lesefortschritt als haarfeine Linie an der Unterkante */
.header__progress{
  position:absolute; left:0; right:0; bottom:-1px; height:2px;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg, var(--gold) 0%, var(--gold-2) 45%, var(--aqua) 100%);
  pointer-events:none; will-change:transform;
}

.nav{ margin-left:auto; }
.nav__list{ display:flex; align-items:center; gap:.15rem; list-style:none; margin:0; padding:0; }
.nav__item{ position:relative; margin:0; }
.nav__link{
  display:inline-flex; align-items:center; gap:.35em;
  padding:.7rem .85rem; border-radius:10px;
  color:#D5E0EB; font-weight:600; font-size:.94rem; letter-spacing:-.01em;
  transition:color .16s, background .16s;
}
.nav__link{ position:relative; }
.nav__link:hover{ color:#fff; background:rgba(255,255,255,.08); text-decoration:none; }
.nav__link.is-active{ color:var(--gold); }
@media (min-width:1101px){
  /* Der Balken waechst aus der Mitte – beim Hovern angedeutet, beim aktiven
     Punkt vollstaendig. So sieht man immer, wo man gerade steht. */
  .nav__link::after{
    content:""; position:absolute; left:.85rem; right:.85rem; bottom:.34rem; height:2px;
    border-radius:2px; background:linear-gradient(90deg,var(--gold),var(--gold-2));
    transform:scaleX(0); transform-origin:50% 50%;
    transition:transform .26s cubic-bezier(.2,.9,.3,1), opacity .2s;
    opacity:0;
  }
  .nav__link:hover::after{ transform:scaleX(.5); opacity:.55; }
  .nav__link.is-active::after{ transform:scaleX(1); opacity:1; }
}
.nav__caret{ opacity:.6; transition:transform .2s; }
.nav__item--has-sub:hover .nav__caret{ transform:rotate(180deg); }
/* ---------- Mega-Menü ----------
   Panel hängt am Header, nicht am Listenpunkt: so kann es über die volle
   Breite laufen, ohne aus dem Viewport zu ragen. */
.nav__link--btn{ background:none; border:0; font:inherit; cursor:pointer; }
/* Das Panel hängt am Kopfbereich (.header__in ist position:relative), nicht
   am Menüpunkt: So bleibt es immer innerhalb des Seitenrahmens, egal wie weit
   rechts der Reiter steht. Der Menüpunkt selbst darf deshalb auf dem Desktop
   kein eigener Bezugsrahmen sein. */
@media (min-width:1101px){ .nav__item--has-sub{ position:static; } }
.mega{
  position:absolute; top:100%; left:50%; transform:translate(-50%, 8px);
  width:min(940px, 100%);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:0 24px 70px rgba(8,14,22,.28), 0 3px 10px rgba(8,14,22,.1);
  padding:1.1rem; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s ease, transform .24s cubic-bezier(.2,.9,.3,1), visibility .24s;
  z-index:20;
}
.nav__item--has-sub.is-open .mega{
  opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%, 0);
}
.mega__inner{ display:grid; gap:1.1rem; }
.mega[data-cols="2"] .mega__inner{ grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); }
.mega__list{ list-style:none; margin:0; padding:0; display:grid; gap:.2rem; }
.mega[data-cols="2"] .mega__list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.mega__list li{ margin:0; }
.mega__link{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:.75rem; align-items:start;
  padding:.7rem .8rem; border-radius:12px; color:var(--ink);
  transition:background .16s, transform .16s;
}
.mega__link:hover{ background:var(--bg-soft); text-decoration:none; transform:translateX(2px); }
.mega__icowrap{
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center; flex:none;
  background:var(--aqua-3); color:var(--aqua-2); transition:background .18s, color .18s;
}
.mega__link:hover .mega__icowrap{
  background:linear-gradient(135deg,var(--gold),var(--gold-2)); color:#26160A;
}
.mega__txt{ display:grid; gap:.1rem; min-width:0; }
.mega__txt b{ font-size:.96rem; font-weight:700; letter-spacing:-.01em; }
.mega__txt em{ font-style:normal; font-size:.82rem; color:var(--muted); line-height:1.4; }

.mega__promo{
  background:linear-gradient(150deg,var(--ink) 0%,var(--ink-3) 100%);
  border-radius:var(--r); padding:1.3rem; color:#B7C9D8;
  display:grid; align-content:start; gap:.45rem; position:relative; overflow:hidden;
}
.mega__promo::before{
  content:""; position:absolute; right:-50px; top:-50px; width:170px; height:170px;
  background:radial-gradient(circle, rgba(255,198,39,.22), transparent 65%);
}
.mega__promo-eyebrow{
  font-size:.68rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--gold);
}
.mega__promo-title{ margin:0; color:#fff; font-weight:800; font-size:1rem; line-height:1.3; }
.mega__promo-txt{ margin:0; font-size:.83rem; line-height:1.5; }
.mega__promo-btn{
  justify-self:start; margin-top:.5rem; padding:.6rem 1.1rem; border-radius:999px;
  background:linear-gradient(135deg,var(--gold),var(--gold-2)); color:#26160A;
  font-weight:800; font-size:.92rem; position:relative;
}
.mega__promo-btn:hover{ text-decoration:none; transform:translateY(-1px); }
.mega__promo .status{ position:relative; justify-self:start; }

.mega__all{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:.9rem;
  padding:.6rem .8rem; border-radius:10px;
  font-size:.87rem; font-weight:700; color:var(--aqua-2);
}
.mega__all:hover{ background:var(--aqua-3); text-decoration:none; }

.nav__mobile-extra{ display:none; }

.burger{
  display:none; margin-left:auto; width:46px; height:46px; flex:none;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16);
  border-radius:12px; cursor:pointer; padding:0;
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
}
.burger span{ display:block; width:20px; height:2px; background:#fff; border-radius:2px; transition:transform .25s, opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:1100px){
  .burger{ display:flex; }
  /* Off-Canvas-Panel: im geschlossenen Zustand unsichtbar statt aus dem Viewport
     geschoben – ein nach rechts verschobenes position:fixed-Element wird von
     overflow-x:hidden nicht beschnitten und erzeugt sonst horizontales Scrollen. */
  .nav{
    position:fixed; inset:calc(var(--header-h) + 38px) 0 0 auto; width:min(380px,86vw);
    background:var(--ink-2); padding:1.4rem var(--gutter) 3rem; overflow-y:auto;
    border-left:1px solid rgba(255,255,255,.08);
    opacity:0; visibility:hidden; pointer-events:none;
    transform:translateY(-14px);
    transition:opacity .28s ease, transform .28s cubic-bezier(.4,0,.2,1), visibility .28s;
    box-shadow:-24px 0 60px rgba(4,8,14,.45);
  }
  .nav.is-open{ opacity:1; visibility:visible; pointer-events:auto; transform:none; }
  .nav__list{ flex-direction:column; align-items:stretch; gap:.15rem; }
  .nav__link{ font-size:1.05rem; padding:.85rem .9rem; }
  .nav__caret{ margin-left:auto; }
  .nav__link--btn{ width:100%; text-align:left; }
  /* Im Off-Canvas ist das Panel ein normaler Block, der auf- und zuklappt.
     Die Transform-Regel muss dieselbe Spezifität haben wie die Desktop-Variante
     `.nav__item--has-sub.is-open .mega`, sonst zieht die den Panel nach links. */
  .mega{
    position:static; width:auto; background:rgba(255,255,255,.05);
    border:0; box-shadow:none; border-radius:12px;
    padding:.3rem .2rem .6rem; margin:.1rem 0 .6rem;
    display:none;
  }
  .nav__item--has-sub.is-open .mega{
    display:block; transform:none; opacity:1; visibility:visible; pointer-events:auto;
    animation:megaAuf .26s cubic-bezier(.2,.8,.3,1);
  }
  @keyframes megaAuf{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
  .mega__inner,
  .mega[data-cols="2"] .mega__inner,
  .mega[data-cols="2"] .mega__list{ grid-template-columns:minmax(0,1fr); }
  .mega__link{ color:#D5E0EB; padding:.6rem .7rem; }
  .mega__link:hover{ background:rgba(255,255,255,.08); }
  .mega__txt b{ color:#fff; }
  .mega__txt em{ color:#93A9BD; }
  .mega__icowrap{ width:34px; height:34px; background:rgba(255,255,255,.08); color:var(--gold); }
  .mega__promo{ display:none; }
  .mega__all{ color:var(--gold); padding-left:.7rem; }
  .mega__all:hover{ background:rgba(255,255,255,.08); }
  .nav__caret{ transition:transform .25s; }
  .nav__item--has-sub.is-open .nav__caret{ transform:rotate(180deg); }
  .nav__mobile-extra{ display:grid; gap:.6rem; margin-top:1.6rem; }
}
body.is-locked{ overflow:hidden; }

/* ---------- 6. Sections ---------- */
.section{ padding:clamp(3.4rem, 7vw, 7rem) 0; }
.section--tight{ padding:clamp(2.4rem, 5vw, 4.5rem) 0; }
.section--soft{ background:var(--bg-soft); }
.section--dark{ background:var(--ink); color:#AFC2D3; }
.section--dark h2,.section--dark h3,.section--dark h4{ color:#fff; }
.section--dark strong{ color:#fff; }
/* .lead und .muted bringen eine eigene dunkle Farbe mit und gewinnen sonst gegen
   die Abschnittsfarbe – dann steht Dunkelgrau auf Fast-Schwarz (Kontrast 2,5). */
.section--dark .lead{ color:#C4D4E2; }
.section--dark .muted{ color:#9FB4C6; }

.eyebrow{
  display:inline-flex; align-items:baseline; gap:.55em;
  font-size:.78rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-3); margin:0 0 .9rem;
}
/* Vor jeder Rubrik ein Wassertropfen aus dem Seckler-Logo – statt des Goldstrichs, den man aus
   unzähligen Vorlagen kennt (Wunsch von Ilyas, 28.09.2026: „nicht nach KI“). Blauer Tropfen vor
   goldener Schrift ist genau die Paarung des Logos. Ausrichtung an der Grundlinie: Der Tropfen steht
   wie ein Buchstabe auf der Zeile – auch wenn die Rubrik auf dem Handy umbricht (dann an der ersten). */
.eyebrow::before{
  content:""; flex:none; width:.6em; height:.8em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3ClinearGradient id='t' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%236FCDF4'/%3E%3Cstop offset='1' stop-color='%231583C9'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23t)' d='M6 .5C4.3 3.3 1 7.3 1 10.4a5 5 0 0 0 10 0C11 7.3 7.7 3.3 6 .5Z'/%3E%3Cellipse cx='4.1' cy='10.6' rx='1' ry='1.7' fill='%23fff' fill-opacity='.55'/%3E%3C/svg%3E") center/contain no-repeat;
}
.eyebrow--light{ color:var(--gold); }
.eyebrow--center{ justify-content:center; }

.section__head{ max-width:56ch; margin-bottom:clamp(2rem,4vw,3.2rem); }
.section__head--center{ margin-inline:auto; text-align:center; }
.section__head--center .eyebrow{ justify-content:center; }
.lead{ font-size:var(--step-1); line-height:1.55; color:var(--slate); }
.muted{ color:var(--muted); }
.small{ font-size:var(--step--1); }

/* ---------- 7. Hero ---------- */
.hero{ position:relative; isolation:isolate; color:#fff; overflow:hidden; }
.hero__media{ position:absolute; inset:0; z-index:-2; }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center 58%; }
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(102deg, rgba(8,14,22,.95) 0%, rgba(8,14,22,.9) 26%, rgba(8,14,22,.6) 48%,
                            rgba(8,14,22,.2) 68%, rgba(8,14,22,.06) 86%, rgba(8,14,22,.02) 100%),
    linear-gradient(0deg, rgba(8,14,22,.6), rgba(8,14,22,0) 42%);
}
/* Der Slideshow-Hero lebt vom Bild: rechts bleibt deutlich mehr offen, dafür
   sorgt unten ein eigener Verlauf für den Halt unter der Bereichsleiste. */
/* Ein Bild, das hinter allem liegt – auch hinter der Schrift.
   Der erste Versuch scheiterte an einer fast deckenden Fläche links: entweder
   war der Text lesbar oder vom Motiv etwas zu sehen. Die Lösung ist nicht mehr
   Deckung, sondern zwei getrennte Werkzeuge:
     1. das Bild selbst wird gleichmäßig abgedunkelt (filter) – damit ist jede
        der vier Aufnahmen gleich hell, egal ob dunkles Bad oder heller Himmel;
     2. darüber liegt ein Schleier, der nach rechts aufmacht, aber nirgends
        zumacht – das Motiv bleibt überall sichtbar;
     3. die Schrift bekommt einen weichen Schatten und trägt sich damit selbst,
        statt sich auf die Fläche zu verlassen.
   Ergebnis: das Bad liegt sichtbar hinter der Überschrift, ohne sie zu stören. */
/* Kein Helligkeitsfilter auf dem Bild: der würde auch die rechte Seite
   mattieren, und genau dort soll das Motiv teuer aussehen. Die gesamte
   Abdunklung steckt im Verlauf – links dicht, rechts bei null. Ein leichtes
   Nachschärfen der Sättigung darf bleiben, das kostet keine Helligkeit. */
.hero--slides .hero__slide{ filter:saturate(1.06); }
.hero--slides::after{
  background:
    linear-gradient(100deg, rgba(8,14,22,.88) 0%, rgba(8,14,22,.82) 26%, rgba(8,14,22,.62) 46%,
                            rgba(8,14,22,.3) 63%, rgba(8,14,22,.08) 78%, rgba(8,14,22,0) 90%),
    linear-gradient(0deg, rgba(8,14,22,.8) 0%, rgba(8,14,22,.34) 14%, rgba(8,14,22,0) 30%),
    linear-gradient(180deg, rgba(8,14,22,.42) 0%, rgba(8,14,22,0) 20%);
}
/* Der Schatten ist das eigentliche Sicherheitsnetz: er hält die Schrift auch
   dann, wenn hinter ihr zufällig eine helle Fliese oder ein Fenster liegt. */
.hero--slides h1,
.hero--slides .hero__text,
.hero--slides .eyebrow--light{
  text-shadow:0 1px 2px rgba(6,11,18,.55), 0 3px 22px rgba(6,11,18,.45);
}
.hero--slides .heronav__txt b,
.hero--slides .heronav__txt em{ text-shadow:0 1px 3px rgba(6,11,18,.7); }

@media (min-width:1024px){
  .hero--slides .hero__in > *{ max-width:min(100%, 40rem); }
  /* Spezifischer als `.hero--slides .hero__in > *`, sonst kappt die 40rem-Regel
     die Leiste und der vierte Beleg rutscht in eine zweite Zeile. */
  .hero--slides .hero__in > .hero__trust{ max-width:min(100%, 56rem); }
  .hero--slides .hero__in > .gesichter--hero{ max-width:none; }  /* Kreise und Satz in einer Zeile (44 statt 77 px) */
  .hero--slides h1{ font-size:clamp(2.2rem, 1rem + 2.8vw, 3.6rem); max-width:min(100%, 38rem); }
}

/* Zwischen 820 und 1024 px ist für zwei Spalten kein Platz: dort wieder
   Bild hinter Text, mit voller Abdeckung. */
@media (min-width:821px) and (max-width:1023px){
  .hero--slides::after{
    background:
      linear-gradient(100deg, rgba(8,14,22,.95) 0%, rgba(8,14,22,.9) 45%, rgba(8,14,22,.7) 75%, rgba(8,14,22,.55) 100%),
      linear-gradient(0deg, rgba(8,14,22,.75) 0%, rgba(8,14,22,0) 34%);
  }
}
/* Auf schmalen Schirmen steht der Text über dem Bild, nicht daneben –
   dort muss die Fläche wieder geschlossen sein. */
@media (max-width:820px){
  .hero::after,
  .hero--slides::after{
    background:
      linear-gradient(180deg, rgba(8,14,22,.88) 0%, rgba(8,14,22,.82) 40%,
                              rgba(8,14,22,.62) 72%, rgba(8,14,22,.84) 92%,
                              rgba(8,14,22,.9) 100%);
  }
}
.hero__in{ padding-block:clamp(3.6rem, 9vw, 8.5rem) clamp(3rem, 6vw, 5.5rem); }
/* Die Zeilenlänge begrenzen die Kinder – nicht der Kasten. Sonst wandert der
   ganze Textblock in die Mitte und bricht die Flucht mit dem übrigen Raster. */
.hero__in > *{ max-width:63ch; }
.hero h1{ color:#fff; margin-bottom:.42em; text-wrap:balance; }
.hero h1 em{ font-style:normal; color:var(--gold); }
.hero__text{ font-size:var(--step-1); color:#D3E0EC; max-width:52ch; margin-bottom:2rem; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.85rem; margin-bottom:2.6rem; }
.hero__trust{ display:flex; flex-wrap:wrap; gap:.5rem .55rem; list-style:none; margin:0; padding:0; }
.hero__trust li{
  display:inline-flex; align-items:center; gap:.45em; margin:0;
  padding:.45rem .95rem; border-radius:999px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  font-size:.83rem; font-weight:600; color:#EAF2F8; backdrop-filter:blur(6px);
}
.hero__trust svg{ color:var(--gold); flex:none; }
.hero__trust--rating{ background:rgba(255,198,39,.16) !important; border-color:rgba(255,198,39,.42) !important; }
.hero__trust--rating strong{ color:var(--gold); }
.hero__stars{ color:var(--gold); letter-spacing:.02em; font-size:.9rem; line-height:1; }

.hero--sub .hero__in{ padding-block:clamp(2.8rem,6vw,5rem) clamp(2.4rem,5vw,4rem); }
.hero--sub h1{ font-size:var(--step-4); }

/* Einblenden beim Laden: die Elemente kommen der Reihe nach, nicht alle auf einmal.
   Kein JavaScript nötig – reine CSS-Choreografie. */
.hero__in > *{ animation:heroIn .75s cubic-bezier(.2,.8,.25,1) backwards; }
.hero__in > *:nth-child(1){ animation-delay:.05s; }
.hero__in > *:nth-child(2){ animation-delay:.14s; }
.hero__in > *:nth-child(3){ animation-delay:.23s; }
.hero__in > *:nth-child(4){ animation-delay:.32s; }
.hero__in > *:nth-child(5){ animation-delay:.41s; }
.hero__in > *:nth-child(6){ animation-delay:.50s; }
.hero__in > *:nth-child(n+7){ animation-delay:.58s; }
@keyframes heroIn{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
.hero__media img{ animation:heroZoom 1.6s cubic-bezier(.2,.8,.25,1) backwards; }
@keyframes heroZoom{ from{ transform:scale(1.06); } to{ transform:none; } }
@media (prefers-reduced-motion: reduce){
  .hero__in > *, .hero__media img{ animation:none; }
}

/* Breadcrumb */
.crumbs{ display:flex; flex-wrap:wrap; gap:.4rem; list-style:none; margin:0 0 1.3rem; padding:0; font-size:.83rem; color:#9FB4C6; }
.crumbs li{ margin:0; }
.crumbs li+li::before{ content:"›"; margin-right:.45rem; opacity:.55; }
.crumbs a{ color:#C4D5E3; }
.crumbs a:hover{ color:#fff; }

/* ---------- 8. Karten / Grids ---------- */
.grid{ display:grid; gap:clamp(1rem,2.2vw,1.8rem); }
.grid--2{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.grid--3{ grid-template-columns:repeat(auto-fit,minmax(285px,1fr)); }
/* Ein Satz, der einen Kartenblock einordnet, statt eine vierte Karte zu
   sein – eine Waise in der Dreierreihe sieht nach Versehen aus. */
.nachsatz{
  max-width:74ch; margin:clamp(1.4rem,2.6vw,2.1rem) 0 0;
  padding-top:clamp(1.2rem,2.4vw,1.7rem); border-top:1px solid var(--line);
  color:var(--slate); font-size:var(--step-0); line-height:1.62;
}
.nachsatz strong{ color:var(--ink); }
.section--dark .nachsatz{ color:#B7C9D8; border-color:rgba(255,255,255,.16); }
.section--dark .nachsatz strong{ color:#fff; }
.grid--4{ grid-template-columns:repeat(auto-fit,minmax(225px,1fr)); }

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.5rem,2.4vw,2.1rem); box-shadow:var(--sh-1);
  transition:transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s, border-color .25s;
  display:flex; flex-direction:column;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); border-color:#D3E0EC; }
.card h3{ margin-bottom:.45em; }
.card p:last-child{ margin-bottom:0; }
.card__ico{
  width:54px; height:54px; border-radius:16px; flex:none;
  display:grid; place-items:center; margin-bottom:1.15rem;
  background:linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%);
  color:#26160A; box-shadow:0 4px 14px rgba(245,161,20,.28);
}
.card__ico--aqua{ background:linear-gradient(135deg,var(--aqua) 0%,var(--aqua-2) 100%); color:#fff; box-shadow:0 4px 14px rgba(34,167,224,.3); }
.card__ico--ink{ background:linear-gradient(135deg,var(--ink-3) 0%,var(--ink) 100%); color:var(--gold); box-shadow:0 4px 14px rgba(12,21,32,.25); }
.card__more{ margin-top:auto; padding-top:1.1rem; font-weight:700; color:var(--aqua-2); display:inline-flex; align-items:center; gap:.4em; }
.card__more::after{ content:"→"; transition:transform .2s; }
.card:hover .card__more::after{ transform:translateX(4px); }

/* Bildkarte */
.tile{
  position:relative; display:block; border-radius:var(--r-lg); overflow:hidden;
  background:var(--ink); box-shadow:var(--sh-1); isolation:isolate; color:#fff;
  transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s;
}
.tile:hover{ transform:translateY(-5px); box-shadow:var(--sh-3); text-decoration:none; }
.tile img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .55s cubic-bezier(.2,.8,.3,1); }
.tile:hover img{ transform:scale(1.06); }
.tile__body{
  position:absolute; inset:auto 0 0 0; padding:1.5rem;
  background:linear-gradient(0deg, rgba(8,14,22,.93) 12%, rgba(8,14,22,.6) 55%, rgba(8,14,22,0) 100%);
}
/* 800 ist das Gewicht der Überschriften. Auf einem Bild, direkt über einer
   Unterzeile, wirkt es erschlagen statt hochwertig – 700 trägt genauso. */
.tile__title{ color:#fff; font-size:var(--step-1); font-weight:700;
  letter-spacing:-.018em; margin:0 0 .3em; }
.tile__sub{ margin:0; color:#C9D8E5; font-size:.9rem; line-height:1.5; }
/* 3/4 war zu schmal: Von einem querformatigen Foto blieben 42 Prozent der
   Breite übrig, der Rest fiel weg – beim Klimabild stand die Kachel danach
   fast nur auf leerer Wand. 4/5 lässt mehr stehen, und am Handy, wo die
   Kachel ohnehin die volle Breite hat, ist Querformat das Richtige: das
   ganze Bild ist zu sehen und die Startseite wird nebenbei kürzer. */
.tile--tall img{ aspect-ratio:4/5; }
@media (max-width:760px){ .tile--tall img{ aspect-ratio:16/10; } }

/* ---------- 9. USP-Leiste ---------- */
.usp{ background:var(--ink-2); color:#fff; }
.usp__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr)); gap:1px; background:rgba(255,255,255,.1); }
.usp__item{ background:var(--ink-2); padding:clamp(1.3rem,3vw,2.4rem) clamp(1rem,2.5vw,2rem); }
.usp__n{ font-size:var(--step-3); font-weight:900; color:var(--gold); letter-spacing:-.03em; line-height:1; margin-bottom:.35rem; }
.usp__l{ font-size:.92rem; color:#A9BECF; margin:0; }

/* ---------- 10. Split (Text + Bild) ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.8rem,4vw,4rem); align-items:center; }
.split--reverse .split__media{ order:-1; }
@media (max-width:900px){
  .split{ grid-template-columns:minmax(0,1fr); }
  .split--reverse .split__media{ order:0; }
}
.split__media{ position:relative; }
.split__media img{ width:100%; border-radius:var(--r-lg); box-shadow:var(--sh-2); }
.split__media--stack{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.split__media--stack img{ aspect-ratio:4/3; object-fit:cover; }
.split__media--stack > img:first-child,
.split__media--stack > picture:first-child > img{ grid-column:1/-1; aspect-ratio:16/10; }

.badge-float{
  position:absolute; bottom:-18px; left:-18px;
  background:#fff; border-radius:var(--r); padding:1rem 1.3rem;
  box-shadow:var(--sh-3); border:1px solid var(--line); max-width:230px;
}
.badge-float strong{ display:block; font-size:var(--step-2); color:var(--ink); line-height:1.05; margin-bottom:.35rem; }
.badge-float span{ font-size:.8rem; line-height:1.45; display:block; color:var(--muted); }
@media (max-width:900px){ .badge-float{ left:12px; bottom:-14px; } }

/* ---------- 11. Checkliste ---------- */
.checks{ list-style:none; padding:0; margin:0 0 1.6em; display:grid; gap:.6rem; }
.checks li{ position:relative; padding-left:2.1rem; margin:0; }
.checks li::before{
  content:""; position:absolute; left:0; top:.34em; width:1.35rem; height:1.35rem;
  border-radius:50%; background:var(--aqua-3);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B79B3' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size:.85rem; background-position:center; background-repeat:no-repeat;
}
.section--dark .checks li::before{ background-color:rgba(255,198,39,.16);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFC627' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); }
.checks--2{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }

/* Leistungs-Spalten */
.svc-cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:clamp(1.2rem,2.5vw,2rem); }
.svc-col{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:1.6rem 1.5rem; box-shadow:var(--sh-1); }
.svc-col h3{ font-size:var(--step-1); display:flex; align-items:center; gap:.55rem; margin-bottom:.9rem; padding-bottom:.9rem; border-bottom:1px solid var(--line-2); }
.svc-col h3 span{
  width:34px; height:34px; border-radius:10px; flex:none; display:grid; place-items:center;
  background:var(--aqua-3); color:var(--aqua-2);
}
.svc-col ul{ list-style:none; padding:0; margin:0; font-size:.95rem; }
.svc-col li{ padding:.3rem 0 .3rem 1.15rem; position:relative; margin:0; }
.svc-col li::before{ content:""; position:absolute; left:0; top:1.1em; width:5px; height:5px; border-radius:50%; background:var(--gold-2); }

/* ---------- 12. Ablauf als Zeitstrahl ----------
   Die Nummerierung bildet hier einen echten Ablauf ab, keine Dekoration:
   die Schritte folgen zeitlich aufeinander. */
.steps{ counter-reset:step; position:relative; display:grid; gap:clamp(1rem,2vw,1.5rem); grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); }
@media (min-width:1080px){
  .steps{ grid-template-columns:repeat(5,1fr); padding-top:2.9rem; }
  /* Verbindungslinie hinter den Punkten */
  .steps::before{
    content:""; position:absolute; top:1.05rem; left:10%; right:10%; height:2px;
    background:linear-gradient(90deg, var(--line) 0%, var(--gold) 12%, var(--gold) 88%, var(--line) 100%);
    opacity:.55;
  }
}
.step{ position:relative; padding:1.7rem 1.4rem 1.5rem; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1); transition:transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s; }
.step:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); }
.step::before{
  counter-increment:step; content:counter(step,decimal-leading-zero);
  display:block; font-size:var(--step-2); font-weight:900; letter-spacing:-.04em;
  color:transparent; background:linear-gradient(135deg,var(--gold),var(--gold-3));
  -webkit-background-clip:text; background-clip:text; margin-bottom:.5rem; line-height:1;
}
@media (min-width:1080px){
  /* Punkt auf der Linie */
  .step::after{
    content:""; position:absolute; top:-2.42rem; left:50%; width:14px; height:14px;
    margin-left:-7px; border-radius:50%;
    background:linear-gradient(135deg,var(--gold),var(--gold-2));
    box-shadow:0 0 0 5px var(--bg-soft), 0 3px 10px rgba(245,161,20,.5);
  }
  .section--soft .step::after{ box-shadow:0 0 0 5px var(--bg-soft), 0 3px 10px rgba(245,161,20,.5); }
}
.step h3{ font-size:var(--step-1); margin-bottom:.35em; }
.step p{ margin:0; font-size:.94rem; }

/* ---------- 12a. Förderungs-Balken ----------
   Stapelt die vier Förderbausteine maßstabsgetreu auf 70 %. */
.foerder{ display:grid; gap:1.1rem; }
.foerder__bar{
  display:flex; height:clamp(46px,7vw,58px); border-radius:999px; overflow:hidden;
  background:var(--bg-soft-2); box-shadow:inset 0 1px 3px rgba(12,21,32,.1);
}
/* Standard ist die Endbreite – ohne JavaScript steht der Balken sofort richtig.
   `is-armed` setzt ihn auf null zurück, `is-in` zieht ihn dann auf. */
.foerder__seg{
  display:grid; place-items:center; min-width:0;
  font-weight:800; font-size:clamp(.72rem,1.6vw,.92rem); color:#26160A; white-space:nowrap;
  width:var(--w); transition:width 1.1s cubic-bezier(.22,1,.36,1);
}
.foerder.is-armed .foerder__seg{ width:0; }
.foerder.is-armed.is-in .foerder__seg{ width:var(--w); }
.foerder__seg:nth-child(1){ background:linear-gradient(135deg,#FFD97A,#FFC627); }
.foerder__seg:nth-child(2){ background:linear-gradient(135deg,#FFC627,#F5A114); }
.foerder__seg:nth-child(3){ background:linear-gradient(135deg,#F5A114,#DE8A06); }
.foerder__seg:nth-child(4){ background:linear-gradient(135deg,#DE8A06,#C97B05); color:#fff; }
/* Innenabstand schrumpft mit dem Bildschirm: Seit den KfW-Sätzen 2026 ist das Stück „+16 %“
   bei 320 px nur 44 px breit – mit festen .3rem wurde daraus „+16…“ (29.09.2026). */
.foerder__seg span{ overflow:hidden; text-overflow:ellipsis; padding-inline:clamp(.1rem,.6vw,.3rem); }
.foerder__legend{ display:grid; gap:.5rem; margin:0; padding:0; list-style:none; }
.foerder__legend li{ display:grid; grid-template-columns:auto auto 1fr; gap:.7rem; align-items:baseline; margin:0; font-size:.93rem; }
.foerder__dot{ width:11px; height:11px; border-radius:3px; align-self:center; }
/* 5.4em: Platz für den breitesten Wert „+10–40 %“ (seit 29.09.2026), damit alle
   Beschreibungen auf einer Linie beginnen. */
.foerder__pct{ font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; min-width:5.4em; }
.foerder__sum{
  display:flex; align-items:baseline; gap:.6rem; padding-top:.9rem; margin-top:.2rem;
  border-top:2px solid var(--gold);
}
.foerder__sum b{ font-size:var(--step-3); font-weight:900; color:var(--gold-3); letter-spacing:-.03em; line-height:1; }
@media (prefers-reduced-motion: reduce){
  .foerder__seg{ width:var(--w); transition:none; }
}

/* ---------- 12b. Interaktive Vorher/Nachher-Karte ----------
   Beide Fotos liegen übereinander; umgeschaltet wird per Button. Bewusst kein
   Wisch-Regler: die beiden Aufnahmen stammen aus verschiedenen Blickwinkeln,
   ein Überblenden würde einen Vergleich vortäuschen, den es nicht gibt. */
.vamix{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:clamp(1rem,2.2vw,1.6rem); }
.vacard{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--sh-1); display:flex; flex-direction:column;
  transition:transform .28s cubic-bezier(.2,.8,.3,1), box-shadow .28s;
}
.vacard:hover{ transform:translateY(-4px); box-shadow:var(--sh-3); }
.vacard__stage{ position:relative; aspect-ratio:4/3; background:var(--bg-soft-2); overflow:hidden; }
.vacard__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:opacity .45s ease, transform .7s cubic-bezier(.2,.8,.3,1);
}
.vacard__img--vorher{ opacity:0; transform:scale(1.05); }
.vacard.is-vorher .vacard__img--vorher{ opacity:1; transform:none; }
.vacard.is-vorher .vacard__img--nachher{ opacity:0; transform:scale(1.05); }

.vacard__tag{
  position:absolute; top:.85rem; left:.85rem; z-index:2;
  font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  padding:.34rem .75rem; border-radius:999px; backdrop-filter:blur(6px);
  background:linear-gradient(135deg,var(--gold),var(--gold-2)); color:#26160A;
  box-shadow:0 3px 10px rgba(12,21,32,.28);
}
.vacard.is-vorher .vacard__tag{ background:rgba(12,21,32,.82); color:#fff; }

.vacard__switch{
  position:absolute; right:.85rem; bottom:.85rem; z-index:2;
  display:inline-flex; padding:.22rem; gap:.15rem; border-radius:999px;
  background:rgba(12,21,32,.72); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.18); box-shadow:0 4px 14px rgba(0,0,0,.3);
}
.vacard__opt{
  border:0; cursor:pointer; font:inherit; font-size:.76rem; font-weight:700;
  padding:.34rem .82rem; border-radius:999px; background:transparent; color:#D5E0EB;
  transition:background .2s, color .2s;
}
.vacard__opt[aria-pressed="true"]{ background:#fff; color:var(--ink); }
.vacard__opt:hover{ color:#fff; }
.vacard__opt[aria-pressed="true"]:hover{ color:var(--ink); }

.vacard__body{ padding:1.1rem 1.35rem 1.3rem; }
.vacard__title{ font-size:1.05rem; font-weight:800; color:var(--ink); margin:0 0 .2rem; }
.vacard__meta{ margin:0; font-size:.85rem; color:var(--muted); }

/* ---------- 13. Vorher/Nachher-Galerie ---------- */
.gallery{ display:grid; grid-template-columns:1fr; align-items:start; gap:clamp(.8rem,1.8vw,1.4rem); }
@media (min-width:620px){ .gallery{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:940px){ .gallery{ grid-template-columns:repeat(3,1fr); } }
.shot{
  position:relative; border-radius:var(--r); overflow:hidden; background:var(--bg-soft);
  border:1px solid var(--line); box-shadow:var(--sh-1);
  transition:transform .28s cubic-bezier(.2,.8,.3,1), box-shadow .28s;
}
.shot:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); }
.shot img{ width:100%; display:block; }
.shot figcaption{
  padding:.85rem 1.1rem; font-size:.88rem; font-weight:600; color:var(--ink);
  background:#fff; border-top:1px solid var(--line-2);
}
.shot figcaption em{ display:block; font-style:normal; font-weight:500; color:var(--muted); font-size:.82rem; margin-top:.1rem; }
.tag-va{
  position:absolute; top:.75rem; left:.75rem; z-index:2;
  background:rgba(12,21,32,.82); color:#fff; font-size:.7rem; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; padding:.32rem .7rem; border-radius:999px;
  backdrop-filter:blur(4px);
}
.tag-va--gold{ background:linear-gradient(135deg,var(--gold),var(--gold-2)); color:#26160A; }

/* ---------- 14. Team ---------- */
/* Feste Spaltenzahl statt auto-fit (Regel „Raster mit fester Spaltenzahl“ im Skill marke):
   Mit auto-fit bekamen die Dreier-Reihen (Leitung, Nachwuchs) 356 px breite Porträts, die
   Vierer-Reihe der Monteure nur 261 px – die Azubis wären größer abgebildet gewesen als der
   Meister. Jetzt: am Rechner immer vier Spalten, darunter eine. Gemessen 28.09.2026. */
.team{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(.9rem,2vw,1.4rem); }
.member{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:1.5rem 1.35rem; box-shadow:var(--sh-1);
  transition:transform .25s, box-shadow .25s;
}
.member:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); }
/* Porträt oben in der Karte. Alle Fotos sind mit werkzeug/teamfoto.swift auf dasselbe Maß
   gebracht (28.09.2026): 4:5, Augenlinie bei 40 %, Gesicht 37 % der Bildhöhe. Deshalb stehen
   die Köpfe im Raster auf einer Linie, egal wie unterschiedlich die Handyfotos waren. */
.member{ overflow:hidden; }
.member__foto{
  display:block; width:calc(100% + 2.7rem); max-width:none; height:auto;
  aspect-ratio:4/5; object-fit:cover;
  margin:-1.5rem -1.35rem 1.15rem;
  background:linear-gradient(180deg,#F4F8FB,#E3EDF5 55%,#CFDFEB);
}
/* Noch ohne Foto: derselbe Rahmen und derselbe Hintergrund wie die Porträts. So bleibt das
   Raster geschlossen, und die Lücke liest sich als „kommt noch“, nicht als Fehler. */
.member__foto--folgt{
  display:grid; place-items:center; align-content:center; gap:.55rem;
  background:
    radial-gradient(95% 70% at -10% -5%, rgba(255,198,39,.36), rgba(255,198,39,.12) 50%, transparent 100%),
    radial-gradient(90% 70% at 112% 45%, rgba(34,167,224,.34), transparent 100%),
    linear-gradient(180deg,#F4F8FB,#E3EDF5 55%,#CFDFEB);
}
.member__foto--folgt span{ font-size:2.6rem; font-weight:800; letter-spacing:-.03em; line-height:1; color:rgba(12,21,32,.26); }
.member__foto--folgt em{ font-style:normal; font-size:.64rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
/* Unter 1000 px: eine Spalte, Karte quer – Porträt links oben im ursprünglichen 4:5, Text rechts,
   Nachweise darunter über die volle Breite. Hochkant untereinander wären es auf dem Handy zehn
   430 px hohe Fotos (rund 6.000 px Seite). Die erste Fassung ließ das Foto die ganze Kartenhöhe
   füllen – bei Artur (drei Qualifikationen, ein Nachweis) wurde es dadurch ein 116 × 271-Streifen,
   Ohr und Wange abgeschnitten. Deshalb festes 4:5 statt Streckung.
   Zeile 3 (Qualifikationen) nimmt mit 1fr den Rest auf, damit Name und Rolle oben zusammenbleiben,
   wenn das Foto höher ist als der Text. */
@media (max-width:999px){
  .team{ grid-template-columns:minmax(0,1fr); max-width:36rem; }
  .member{
    display:grid; grid-template-columns:6.5rem minmax(0,1fr); grid-template-rows:auto auto 1fr;
    column-gap:1.1rem; align-items:start; padding:1rem 1.1rem;
  }
  .member > *{ grid-column:2; }
  .member > .nachweise, .member > .member__docs{ grid-column:1 / -1; }
  .member__foto{
    grid-column:1; grid-row:1 / span 3; width:6.5rem; height:auto; aspect-ratio:4/5;
    margin:0; border-radius:calc(var(--r-lg) - .4rem);
  }
  .member__foto--folgt span{ font-size:1.9rem; }
  .member__name{ margin-top:.3rem; }
}
/* Öffnungszeiten-Tabelle auf dunklem Grund (Kontaktseite): Kopfzellen aufhellen */
.footer__hours[style] th{ color:#DCE7F0; }
.member__name{ font-size:1.06rem; font-weight:800; color:var(--ink); margin:0 0 .15rem; }
.member__role{ font-size:.82rem; font-weight:700; color:var(--gold-3); text-transform:uppercase; letter-spacing:.07em; margin:0 0 .6rem; }
.member__quals{ list-style:none; padding:0; margin:0; font-size:.88rem; color:var(--muted); }
.member__quals li{ margin:.18rem 0; padding-left:.85rem; position:relative; }
.member__quals li::before{ content:"·"; position:absolute; left:.15rem; color:var(--aqua); font-weight:900; }

/* ---------- 15. FAQ ---------- */
.faq{ max-width:840px; margin-inline:auto; }
.faq details{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  margin-bottom:.7rem; box-shadow:var(--sh-1); overflow:hidden;
  transition:border-color .2s, box-shadow .2s;
}
.faq details[open]{ border-color:#CFE1EF; box-shadow:var(--sh-2); }
.faq summary{
  cursor:pointer; list-style:none; padding:1.15rem 3.2rem 1.15rem 1.4rem;
  font-weight:700; color:var(--ink); font-size:1.03rem; position:relative; line-height:1.45;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:1.3rem; top:50%; width:12px; height:12px;
  margin-top:-6px; border-right:2.4px solid var(--aqua-2); border-bottom:2.4px solid var(--aqua-2);
  transform:rotate(45deg) translateY(-3px); transition:transform .25s;
}
.faq details[open] summary::after{ transform:rotate(225deg) translateY(-3px); }
.faq .faq__a{ padding:0 1.4rem 1.35rem; font-size:.97rem; }
.faq .faq__a p:last-child{ margin-bottom:0; }

/* ---------- 16. Notdienst / Alert-Band ---------- */
.alert-band{
  background:linear-gradient(120deg,var(--ink) 0%,var(--ink-3) 100%);
  color:#fff; border-radius:var(--r-xl); padding:clamp(1.8rem,4vw,3rem);
  /* Mittig wie die Handlungsbänder (28.09.2026): Zeichen oben, Text, Knopf darunter – vorher
     stand der Knopf rechts außen. */
  display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; text-align:center; gap:1.1rem;
  box-shadow:var(--sh-3); position:relative; overflow:hidden;
}
.alert-band::before{
  content:""; position:absolute; right:-60px; top:-60px; width:280px; height:280px;
  background:radial-gradient(circle, rgba(255,198,39,.22), transparent 62%);
}
.alert-band__ico{
  width:64px; height:64px; border-radius:20px; display:grid; place-items:center; flex:none;
  background:linear-gradient(135deg,var(--gold),var(--gold-2)); color:#26160A;
}
.alert-band h2{ color:#fff; font-size:var(--step-2); margin-bottom:.25em; }
.alert-band p{ margin:0 auto; max-width:60ch; color:#B9CBDA; }
.alert-band .actions{ justify-content:center; }

/* ---------- 17. Förderung ---------- */
.money{
  background:linear-gradient(135deg,#FFF8E6 0%,#FFEFC9 100%);
  border:1px solid #F5DFA6; border-radius:var(--r-lg); padding:clamp(1.5rem,3vw,2.2rem);
}
.money h3{ display:flex; align-items:center; gap:.55rem; }
.money__pct{
  display:inline-block; font-size:var(--step-3); font-weight:900; letter-spacing:-.04em;
  color:var(--gold-3); line-height:1;
}

/* ---------- 18. Produkt ---------- */
.product{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(1.8rem,4vw,3.5rem); align-items:center; }
@media (max-width:840px){ .product{ grid-template-columns:minmax(0,1fr); } }
.product__media{
  position:relative;  /* Bezugsrahmen für den KI-Vermerk am Produktbild */
  background:linear-gradient(160deg,#fff,var(--bg-soft-2)); border:1px solid var(--line);
  border-radius:var(--r-xl); padding:clamp(1.5rem,4vw,3rem); box-shadow:var(--sh-1);
}
.price{ display:flex; align-items:baseline; gap:.65rem; flex-wrap:wrap; margin:.5rem 0 1.2rem; }
.price__val{ font-size:var(--step-4); font-weight:900; color:var(--ink); letter-spacing:-.035em; line-height:1; }
.price__note{ font-size:.85rem; color:var(--muted); }
.pills{ display:flex; flex-wrap:wrap; gap:.45rem; list-style:none; padding:0; margin:0 0 1.4rem; }
.pills li{
  margin:0; font-size:.8rem; font-weight:700; padding:.4rem .85rem; border-radius:999px;
  background:var(--aqua-3); color:var(--aqua-2);
}
.pills li.is-ok{ background:#E7F8EE; color:#15803D; }

/* Download-Karte */
.dl{
  display:flex; align-items:center; gap:1.1rem; padding:1.15rem 1.35rem;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh-1); transition:box-shadow .2s, transform .2s;
}
.dl:hover{ box-shadow:var(--sh-2); transform:translateY(-2px); text-decoration:none; }
.dl__ico{ width:46px; height:46px; border-radius:12px; background:#FDE8E8; color:#C81E1E; display:grid; place-items:center; flex:none; font-weight:800; font-size:.72rem; }
.dl__name{ font-weight:700; color:var(--ink); display:block; font-size:.97rem; }
.dl__meta{ font-size:.82rem; color:var(--muted); }

/* ---------- 19. Kontakt / Formular ---------- */
.contact-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(1.8rem,4vw,3.5rem); align-items:start; }
/* Einspaltig rutscht das Formular sonst unter die komplette Kontaktkarte –
   auf dem Handy lag der Anfang bei 1.800 Pixeln. Wer auf „Beratung anfragen“
   tippt, will das Formular sehen, nicht erst die Öffnungszeiten. Telefon und
   WhatsApp bleiben über die klebende Kopfzeile und den Wählknopf erreichbar. */
@media (max-width:900px){
  .contact-grid{ grid-template-columns:minmax(0,1fr); }
  .contact-grid > #anfrage{ order:-1; }
}

.info-card{
  background:var(--ink); color:#B7C9D8; border-radius:var(--r-xl);
  padding:clamp(1.7rem,3.5vw,2.6rem); box-shadow:var(--sh-3);
  position:relative; overflow:hidden;
}
.info-card::after{
  content:""; position:absolute; right:-70px; bottom:-70px; width:250px; height:250px;
  background:radial-gradient(circle, rgba(34,167,224,.28), transparent 62%);
}
.info-card h3,
/* Die Kartenüberschriften sind semantisch h2 (kein Sprung h1→h3 mehr),
   optisch bleiben sie auf der h3-Stufe – 38 px wären in der Karte zu laut. */
.info-card .info-card__h{ color:#fff; font-size:var(--step-2); }
.info-card__head{ position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem; margin-bottom:1.4rem; }
.info-card__head h3,
.info-card__head .info-card__h{ margin:0; }
.info-list{ list-style:none; padding:0; margin:0 0 1.8rem; display:grid; gap:1.15rem; position:relative; }
.info-list li{ display:flex; gap:1rem; margin:0; }
.info-list__ico{
  width:42px; height:42px; border-radius:13px; flex:none; display:grid; place-items:center;
  background:rgba(255,255,255,.09); color:var(--gold); border:1px solid rgba(255,255,255,.12);
}
.info-list__k{ display:block; font-size:.76rem; text-transform:uppercase; letter-spacing:.1em; color:#8AA3B8; font-weight:700; margin-bottom:.15rem; }
.info-list__v{ color:#fff; font-weight:600; }
.info-list__v a{ color:#fff; }
.info-list__v a:hover{ color:var(--gold); }

.form{ background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); padding:clamp(1.6rem,3.5vw,2.6rem); box-shadow:var(--sh-2); }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:600px){ .form__row{ grid-template-columns:minmax(0,1fr); } }
/* Zeilen mit Auswahlknoepfen bleiben einspaltig: in einer 234-px-Haelfte passt
   kein einziger Knopf zu zweit, jeder bekaeme eine eigene Zeile und die langen
   brechen um – die Spalte franst aus und wird dreimal so hoch wie noetig. */
.form__row--breit{ grid-template-columns:minmax(0,1fr); }
.field{ margin-bottom:1.05rem; }
.field label{ display:block; font-size:.86rem; font-weight:700; color:var(--ink); margin-bottom:.4rem; }
.field .req{ color:var(--warn); }
.field input,.field select,.field textarea{
  width:100%; font:inherit; font-size:.97rem; color:var(--ink);
  padding:.8rem .95rem; border:1.5px solid var(--line); border-radius:12px;
  background:var(--bg-soft); transition:border-color .18s, background .18s, box-shadow .18s;
}
.field textarea{ min-height:145px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--aqua); background:#fff;
  box-shadow:0 0 0 4px rgba(34,167,224,.14);
}
.field input::placeholder,.field textarea::placeholder{ color:#9BB0C4; }
.field select{ appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2344586F' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; background-size:12px; padding-right:2.6rem;
}
/* Der frühere Pflicht-Haken zur Datenschutzerklärung ist entfallen: Rechtsgrundlage der
   Anfrage ist Art. 6 Abs. 1 lit. b und f DSGVO, nicht die Einwilligung. Der Hinweis steht
   jetzt als Text unter dem Absenden-Knopf (.form__note). */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form__note{ font-size:.8rem; color:var(--muted); margin:.9rem 0 0; }
.form__msg{ margin:0 0 1.2rem; padding:.95rem 1.15rem; border-radius:12px; font-size:.92rem; font-weight:600; display:none; }
.form__msg.is-ok{ display:block; background:#E7F8EE; color:#15803D; border:1px solid #B7E6C9; }
.form__msg.is-err{ display:block; background:#FEECEC; color:#B91C1C; border:1px solid #F5C2C2; }

/* Karte / Consent-Platzhalter */
.mapbox{ border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); box-shadow:var(--sh-1); background:var(--bg-soft); }
.mapbox iframe{ display:block; width:100%; height:380px; border:0; }
/* Der Platzhalter selbst steht in Abschnitt 22 (.mapstub) - ein Baustein für beide Karten. */

/* ---------- 19a. Qualifikations-Siegel ----------
   Die Nachweise sind das stärkste Sachargument eines Handwerksbetriebs –
   sie bekommen deshalb eine eigene, siegelartige Darstellung statt einer Textliste. */
.siegel{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr)); gap:clamp(.9rem,2vw,1.4rem); }
.siegel__item{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:1.6rem 1.5rem 1.5rem; box-shadow:var(--sh-1); overflow:hidden;
  transition:transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s, border-color .25s;
  /* Die Karten sind gleich hoch, ihr Inhalt war es nicht: Die Wege am Fuß
     starteten je nach Textlänge bei 259, 303 oder 328 Pixeln – bis zu 69 Pixel
     Versatz in einer Reihe. Als Spalte mit `margin-top:auto` am Fuß sitzen
     sie bündig, egal wie lang der Text darüber ist. */
  display:flex; flex-direction:column;
}
.siegel__item > .siegel__wege{ margin-top:auto; }
.siegel__item > .nachweis{ margin-bottom:1rem; }
.siegel__item::before{
  content:""; position:absolute; right:-42px; top:-42px; width:130px; height:130px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,198,39,.16), transparent 68%);
  pointer-events:none;
}
.siegel__item:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); border-color:#E6D08C; }
.siegel__mark{
  width:62px; height:62px; margin-bottom:1.05rem; display:grid; place-items:center; position:relative;
  filter:drop-shadow(0 3px 8px rgba(245,161,20,.28));
}
.siegel__mark svg{ position:absolute; inset:0; width:100%; height:100%; color:var(--gold-2); }
.siegel__mark svg path:first-child{ opacity:.28; }
.siegel__mark svg path:last-child{ opacity:1; stroke-width:1.9; }
/* Bis 11.09.2026 standen hier Buchstaben: M, F, WHG, LPG, VI, IM. Vier davon
   versteht kein Besucher – „F" sollte F-Gase heißen, „LPG" ist die englische
   Abkürzung für Flüssiggas, „VI" und „IM" waren reine Initialen. Jetzt steht
   in der Rosette ein Piktogramm, das ohne Erklärung trägt. */
.siegel__sym{ position:relative; color:#7A4900; }
.siegel__name{ font-size:1.04rem; font-weight:800; color:var(--ink); margin:0 0 .35rem; line-height:1.25; }
.siegel__txt{ margin:0; font-size:.9rem; color:var(--slate); }
.siegel__law{
  display:inline-block; margin-top:.7rem; font-size:.72rem; font-weight:700; letter-spacing:.04em;
  color:var(--gold-3); background:var(--gold-soft, #FFF6E0); padding:.25rem .6rem; border-radius:6px;
}

/* ---------- 19b. Verwandte Seiten ---------- */
.rel-sec{ border-top:1px solid var(--line); }
.rel{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:.8rem; }
.rel__item{
  display:grid; gap:.15rem; padding:1.1rem 1.3rem;
  background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--r);
  transition:transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s, border-color .2s;
}
.rel__item:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); border-color:#CFE1EF; text-decoration:none; }
.rel__name{ font-weight:800; color:var(--ink); display:flex; align-items:center; gap:.4em; }
.rel__name::after{ content:"→"; color:var(--aqua-2); transition:transform .2s; }
.rel__item:hover .rel__name::after{ transform:translateX(3px); }
.rel__teaser{ font-size:.86rem; color:var(--muted); }

/* ---------- 20. Einzugsgebiet ---------- */
.places{ display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; padding:0; margin:0; }
.places li{
  margin:0; font-size:.87rem; font-weight:600; color:var(--ink);
  padding:.5rem 1rem; border-radius:999px; background:#fff; border:1px solid var(--line);
  transition:transform .22s ease, background-color .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.section--dark .places li{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.14); color:#DCE7F0; }

/* Auf dem Handy bleibt ein :hover nach der Berührung kleben – deshalb nur für
   echte Zeiger. Die Orte sind kein Link; der Schein hebt sie nur hervor. */
@media (hover:hover) and (pointer:fine){
  .places li:hover{
    transform:translateY(-2px);
    border-color:var(--gold);
    box-shadow:0 0 0 1px rgba(255,198,39,.28), 0 8px 18px rgba(12,21,32,.12);
  }
  .section--dark .places li:hover{
    background:rgba(255,198,39,.13);
    border-color:rgba(255,198,39,.72);
    color:#fff;
    box-shadow:0 0 0 1px rgba(255,198,39,.3),
               0 10px 26px rgba(0,0,0,.45),
               0 0 24px rgba(255,198,39,.20);
  }
}

/* ---------- 21. Zitat ---------- */
.quote{
  border-left:4px solid var(--gold); padding:.4rem 0 .4rem 1.5rem;
  font-size:var(--step-1); line-height:1.55; color:var(--ink); font-weight:600; font-style:italic;
}
.quote cite{ display:block; font-size:.86rem; font-weight:600; font-style:normal; color:var(--muted); margin-top:.7rem; }

/* ---------- 20b. Vertrauen am Formular ----------
   Drei kleine Bausteine an der Stelle, an der entschieden wird. */
.saison{
  margin:1rem 0 0; padding:.7rem .95rem; border-left:3px solid var(--gold);
  background:rgba(255,198,39,.10); border-radius:0 var(--r) var(--r) 0;
  font-size:var(--step--1); line-height:1.5; color:var(--ink);
}
.form__proof{
  display:flex; flex-wrap:wrap; align-items:center; gap:.4em;
  margin:0 0 .9rem; font-size:var(--step--1); color:var(--slate); line-height:1.4;
}
.form__proof b{ color:var(--ink); }
.form__stars{ color:var(--gold-2); letter-spacing:.06em; }
.danach{
  list-style:none; counter-reset:schritt; margin:1.4rem 0 0; padding:1.1rem 0 0;
  border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.9rem;
}
.danach li{ counter-increment:schritt; display:flex; flex-direction:column; gap:.15rem; font-size:.84rem; line-height:1.4; color:var(--slate); }
.danach li::before{
  content:counter(schritt); width:1.55rem; height:1.55rem; border-radius:999px; margin-bottom:.35rem;
  display:grid; place-items:center; font-size:.78rem; font-weight:800;
  background:rgba(255,198,39,.18); color:#7A4900;
}
.danach b{ color:var(--ink); font-weight:700; }
@media (max-width:560px){
  .danach{ grid-template-columns:1fr; gap:.7rem; }
  .danach li{ flex-direction:row; align-items:baseline; gap:.5rem; flex-wrap:wrap; }
  .danach li::before{ margin:0; }
}

/* ---------- 21a. Meilenstein ----------
   Ein Ereignis der Firmengeschichte als ruhiger Textblock – ohne Bild, weil
   ein Beispielbild neben einer konkreten Jahreszahl die Aussage schwächt. */
.meilenstein{
  max-width:64ch; margin-inline:auto; text-align:center;
  padding:clamp(1.2rem,3vw,2.4rem) clamp(1rem,3vw,2.4rem);
  border-left:3px solid var(--gold); border-right:3px solid var(--gold);
}
.meilenstein .eyebrow{ justify-content:center; }
.meilenstein .actions{ justify-content:center; }
@media (max-width:560px){ .meilenstein{ border-left:0; border-right:0; border-top:3px solid var(--gold); border-bottom:3px solid var(--gold); } }

/* ---------- 21b. Zwischenband ----------
   Ein leiser Anstoß zwischen zwei Abschnitten: kein Kasten, keine Fläche,
   nur zwei Haarlinien, ein Satz und ein Knopf. Das große CTA-Band darunter
   beendet eine Seite – dieses hier unterbricht sie nur kurz. */
.anstoss-sec{ padding:0; }
/* Seit 28.09.2026 mittig: Satz oben, Knopf darunter. Vorher Satz links, Knopf rechts außen –
   Wunsch von Ilyas: ruhiger und symmetrischer. */
.anstoss{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:1rem;
  padding:clamp(1.15rem,2.1vw,1.65rem) 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.anstoss__txt{
  margin:0; max-width:46ch;
  /* Auf Stufe 1 geriet der Satz zweizeilig und das Band 134 px hoch – das ist
     ein Absatz, kein Zwischenruf. Auf Stufe 0 mit etwas mehr Gewicht bleibt es
     eine Zeile und liest sich als beiläufige Bemerkung. */
  font-size:var(--step-0); line-height:1.5; font-weight:600;
  color:var(--ink); text-wrap:balance;
}
.anstoss .btn{ flex:0 0 auto; }
/* Im dunklen Abschnitt tragen die Haarlinien und die Schrift nicht. */
.section--dark .anstoss{ border-color:rgba(255,255,255,.16); }
.section--dark .anstoss__txt{ color:#EDF3F8; }
@media (max-width:560px){
  .anstoss .btn{ width:100%; justify-content:center; }
}

/* ---------- 22. CTA-Band ---------- */
.cta-band{
  background:linear-gradient(120deg,var(--ink) 0%,var(--ink-3) 55%,#233549 100%);
  color:#fff; position:relative; overflow:hidden;
}
.cta-band::before{
  content:""; position:absolute; left:-80px; bottom:-120px; width:420px; height:420px;
  background:radial-gradient(circle, rgba(255,198,39,.16), transparent 62%);
}
.cta-band__in{
  display:grid; grid-template-columns:1fr auto; gap:2rem; align-items:center;
  padding:clamp(2.4rem,5vw,4rem) var(--gutter); position:relative;
}
@media (max-width:880px){ .cta-band__in{ grid-template-columns:minmax(0,1fr); } }
.cta-band__title{ color:#fff; font-size:var(--step-3); margin-bottom:.3em; max-width:22ch; text-wrap:balance; }
.cta-band__text{ color:#B7C9D8; margin:0; max-width:52ch; }
.cta-band__actions{ display:flex; flex-wrap:wrap; gap:.8rem; }

/* ---------- 23. Footer ---------- */
.footer{ background:var(--ink); color:#93A9BD; font-size:.92rem; position:relative; }
/* Haarfeine Lichtkante nach oben – trennt den Footer sauber vom Inhalt,
   ohne eine harte Linie zu ziehen. */
.footer::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,198,39,.5) 22%, rgba(34,167,224,.4) 78%, transparent);
}

/* Vertrauensleiste über den Spalten */
.trustbar{ border-bottom:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.02); }
/* Die vier Nachweise sollen als Reihe lesbar sein, nicht als vier Einzelteile.
   Deshalb oben ausgerichtet statt mittig: So sitzen alle vier Symbole auf einer
   Linie, auch wenn ein Text zwei Zeilen braucht und der daneben nur eine.
   Vorher wanderte jedes Symbol auf die Mitte seines eigenen Textes - das war
   das schiefe Bild. */
/* Spaltenzahl fest statt auto-fit: auto-fit machte zwischen rund 830 und 1080 px
   drei plus einen – der vierte Punkt stand allein in der zweiten Zeile, eingerückt
   und mit verwaistem Trennstrich. Jetzt 4 · 2×2 · 1, nie eine halbe Reihe. */
.trustbar__in{
  display:grid; grid-template-columns:minmax(0,1fr);
  gap:1.15rem 1.8rem; align-items:start;
  /* Nur oben und unten nullen: Ein „margin:0“ hier schluckte das margin-inline:auto
     von .wrap – die Leiste klebte links, rechts blieben 225 px frei (28.09.2026). */
  list-style:none; margin-block:0; padding:1.3rem var(--gutter);
}
.trustbar__item{ margin:0; }
.trustbar__item,
.trustbar__link{ display:flex; align-items:flex-start; gap:.8rem; }
/* Feine Trennlinien zwischen den Spalten, solange sie nebeneinander stehen –
   bei 2×2 nur vor dem rechten Punkt jeder Reihe, bei vier vor jedem außer dem ersten. */
@media (min-width:560px){
  .trustbar__in{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .trustbar__item:nth-child(even){
    border-left:1px solid rgba(255,255,255,.08); padding-left:1.8rem; margin-left:-.9rem;
  }
}
@media (min-width:1080px){
  .trustbar__in{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .trustbar__item + .trustbar__item{
    border-left:1px solid rgba(255,255,255,.08); padding-left:1.8rem; margin-left:-.9rem;
  }
}
.trustbar__link{ color:inherit; }
.trustbar__link:hover{ text-decoration:none; }
.trustbar__link:hover .trustbar__txt b{ color:var(--gold); }
.trustbar__ico{
  width:36px; height:36px; border-radius:11px; flex:none; display:grid; place-items:center;
  background:rgba(255,255,255,.07); color:#9FD6F2;
  transition:background .2s, color .2s, transform .25s cubic-bezier(.2,1.2,.4,1);
}
.trustbar__ico--gold{ background:rgba(255,198,39,.14); color:var(--gold); }
.trustbar__link:hover .trustbar__ico{ transform:translateY(-2px); }
.trustbar__txt{ display:flex; flex-direction:column; gap:.1rem; line-height:1.4; min-width:0; font-size:.78rem; color:#7F95AA; }
.trustbar__txt b{ font-size:.9rem; color:#EAF2F8; font-weight:700; transition:color .2s; }

.footer__grid{
  display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(1.6rem,3vw,3rem);
  padding:clamp(2.8rem,5vw,4.5rem) var(--gutter) clamp(2rem,4vw,3rem);
}
@media (max-width:980px){ .footer__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .footer__grid{ grid-template-columns:minmax(0,1fr); } }
.footer__home{ display:inline-block; margin-bottom:1.2rem; border-radius:10px; }
.footer__home:focus-visible{ outline:2px solid var(--gold); outline-offset:6px; }
.footer__logo{ height:46px; width:auto; display:block; transition:opacity .18s; }
.footer__home:hover .footer__logo{ opacity:.82; }
.footer__claim{ max-width:36ch; }
/* Basis-`strong` ist fast schwarz – im dunklen Footer sonst unsichtbar. */
.footer strong{ color:#fff; }
.footer__leit{ color:var(--gold); font-size:1.02rem; }
.footer__leit strong{ color:var(--gold); }
.footer__h{ color:#fff; font-size:.82rem; text-transform:uppercase; letter-spacing:.13em; margin-bottom:1.1rem; font-weight:800; }
.footer__list{ list-style:none; padding:0; margin:0; columns:1; }
.footer__list li{ margin:.42rem 0; }
.footer a{ color:#A9BFD2; }
.footer a:hover{ color:var(--gold); text-decoration:none; }
.footer__list a{ display:inline-block; transition:color .18s, transform .18s; }
.footer__list a:hover{ transform:translateX(3px); }
.footer__hours{ margin-top:1.4rem; }
.footer__address{ font-style:normal; line-height:1.75; }
.footer__address strong{ color:#fff; }
.footer__hours{ font-size:.88rem; }
.footer__hours th{ text-align:left; font-weight:600; color:#C7D8E6; padding:.28rem 1rem .28rem 0; vertical-align:top; white-space:nowrap; }
.footer__hours td{ padding:.28rem 0; }
.footer__hint{ font-size:.8rem; margin:1rem 0 0; color:#7C93A8; }
/* ---------- Agentur-Credit (Junker Media), Markengelb #FECA1E ----------
   Bewusst als eigener, dunklerer Streifen mit gelber Oberkante abgesetzt,
   damit er nicht mit dem Kunden-Footer verschmilzt. Die ganze Zeile ist ein Link. */
.agency{
  background:#070C13;
  border-top:2px solid #FECA1E;
  position:relative; overflow:hidden;
}
.agency::before{
  content:""; position:absolute; left:0; right:0; top:0; height:120px;
  background:radial-gradient(60% 100% at 12% 0%, rgba(254,202,30,.14), transparent 70%);
  pointer-events:none;
}
.agency__link{
  display:grid; grid-template-columns:auto 1fr auto; gap:1.1rem 2rem; align-items:center;
  padding:1.5rem var(--gutter); position:relative;
  transition:background .22s;
}
.agency__link:hover{ text-decoration:none; background:rgba(254,202,30,.05); }
@media (max-width:940px){
  .agency__link{ grid-template-columns:minmax(0,1fr); gap:1rem; }
}
.agency__brand{ display:flex; align-items:center; gap:.85rem; }
.agency__brand img{
  width:46px; height:46px; border-radius:12px; flex:none;
  box-shadow:0 0 0 1px rgba(254,202,30,.28), 0 6px 18px rgba(0,0,0,.5);
  transition:transform .22s cubic-bezier(.2,1.2,.4,1), box-shadow .22s;
}
.agency__link:hover .agency__brand img{
  transform:translateY(-2px) rotate(-4deg);
  box-shadow:0 0 0 1px rgba(254,202,30,.6), 0 8px 24px rgba(254,202,30,.28);
}
.agency__name{ display:flex; flex-direction:column; line-height:1.22; }
.agency__name small{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:#7C93A8; }
.agency__name b{ font-size:1.06rem; color:#FECA1E; letter-spacing:-.01em; }
.agency__text{ margin:0; font-size:.84rem; line-height:1.6; color:#8093A6; max-width:64ch; }
.agency__text strong{ color:#C7D8E6; font-weight:700; }
.agency__cta{
  display:inline-flex; align-items:center; gap:.5em; justify-self:start;
  background:#FECA1E; color:#191203; font-weight:800; font-size:.94rem;
  padding:.72rem 1.35rem; border-radius:999px; white-space:nowrap;
  box-shadow:0 4px 14px rgba(254,202,30,.3);
  transition:transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s;
}
.agency__link:hover .agency__cta{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(254,202,30,.45); }
.agency__link:focus-visible{ outline:3px solid #FECA1E; outline-offset:-3px; }

/* ---------- Standort-Band ---------- */
.standort{ background:var(--bg-soft); border-top:1px solid var(--line); }
.standort__in{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(1.6rem,4vw,3.5rem); align-items:center;
  padding:clamp(2.4rem,5vw,4rem) var(--gutter);
}
@media (max-width:880px){ .standort__in{ grid-template-columns:minmax(0,1fr); } }
.standort__title{ font-size:var(--step-2); margin-bottom:.4em; }
.standort__text{ max-width:46ch; }
.standort__status{ margin-bottom:1.3rem; }
.standort__map{
  border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--sh-2); background:#fff; min-height:290px; display:grid;
}
.standort__map iframe{ width:100%; height:100%; min-height:290px; border:0; display:block; }
.mapstub{
  display:grid; justify-items:center; align-content:center; gap:.55rem; text-align:center;
  padding:2.2rem 1.4rem;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(34,167,224,.1), transparent 62%),
    repeating-linear-gradient(45deg, var(--line-2) 0 2px, transparent 2px 16px),
    #fff;
}
.mapstub__pin{
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--gold),var(--gold-2)); color:#26160A;
  box-shadow:0 6px 18px rgba(245,161,20,.35); margin-bottom:.3rem;
}
.mapstub__name{ margin:0; font-weight:800; color:var(--ink); font-size:1rem; }
.mapstub__addr{ margin:0 0 .7rem; font-size:.9rem; color:var(--muted); }
.mapstub__actions{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; }
.mapstub__note{ margin:.6rem 0 0; max-width:46ch; font-size:.82rem; color:var(--muted); line-height:1.5; }
/* Große Variante auf der Kontaktseite - gleicher Baustein, mehr Luft. */
.mapstub--gross{ min-height:340px; padding:clamp(2.4rem,5vw,3.4rem) 1.5rem; }
.mapstub--gross .mapstub__pin{ width:60px; height:60px; }
.mapstub--gross .mapstub__name{ font-size:var(--step-1); }
.mapstub--gross .mapstub__addr{ font-size:1rem; margin-bottom:1.1rem; }
.mapstub--gross .mapstub__note{ font-size:.82rem; margin-top:1rem; }
/* Auf der Kontaktseite steht bereits eine große Karte im Inhalt */
body.no-standort .standort{ display:none; }

.footer__bar{ border-top:1px solid rgba(255,255,255,.09); }
/* Unten extra Luft, damit der Speed-Dial die Rechtslinks nicht überdeckt */
.footer__bar-in{
  display:flex; flex-wrap:wrap; gap:.8rem 1.5rem; justify-content:space-between; align-items:center;
  padding:1.2rem var(--gutter) calc(1.2rem + env(safe-area-inset-bottom)); font-size:.83rem;
}
@media (max-width:760px){ .footer__bar-in{ padding-bottom:calc(5.2rem + env(safe-area-inset-bottom)); } }
.footer__bar p{ margin:0; }
.footer__legal{ display:flex; flex-wrap:wrap; gap:.4rem 1.15rem; list-style:none; margin:0; padding:0; }
.footer__legal li{ margin:0; }

.social{ display:flex; gap:.6rem; margin-top:1.4rem; }
.social__link{
  width:42px; height:42px; border-radius:13px; display:grid; place-items:center;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); color:#C7D8E6;
  transition:background .2s, color .2s, transform .2s; position:relative;
}
.social__link:hover{ background:var(--gold); color:#26160A; transform:translateY(-2px); }
/* Im Fuß bleibt es ruhig – dort stehen Symbole, kein Aufruf. Instagram bekommt
   aber einen farbigen Rand, damit es sich vom grauen Nachbarn abhebt, und beim
   Berühren den vollen Verlauf. Auf dem Handy, wo niemand „hovert", trägt schon
   der Rand die Unterscheidung. */
.social__link--in{ border:1px solid #DC2743; color:#F09433; }
.social__link--in:hover{
  background:linear-gradient(45deg,#F09433,#DC2743 55%,#BC1888);
  border-color:transparent; color:#fff;
}
.social__link--soon{ opacity:.65; cursor:default; }
.social__link--soon:hover{ background:rgba(255,255,255,.07); color:#C7D8E6; transform:none; }
.social__link--soon em{
  position:absolute; top:-7px; right:-9px; font-style:normal; font-size:.58rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.05em;
  background:var(--gold); color:#26160A; padding:.1rem .32rem; border-radius:5px;
}

/* ---------- 23b. Bewertungs-Laufband ----------
   Endlosband aus zwei identischen Kartensätzen. Animiert wird der Track um -50 %;
   weil der zweite Satz eine exakte Kopie ist, springt der Umlauf nicht sichtbar. */
.rvsec{ background:var(--ink); color:#B7C9D8; padding:clamp(2.4rem,5vw,3.6rem) 0; overflow:hidden; }
.rvsec__in{ display:flex; justify-content:center; }
.rvhead{ display:grid; justify-items:center; gap:.55rem; text-align:center; margin-bottom:clamp(1.5rem,3vw,2.2rem); }
.rvhead__badge{
  width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  background:#fff; box-shadow:0 4px 16px rgba(0,0,0,.35);
}
.rvhead__title{ color:#fff; font-size:var(--step-2); margin:0; }
.rvhead__score-row{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:.15rem .5rem; margin:0; }
.rvhead__score{ font-size:var(--step-3); font-weight:900; color:var(--gold); letter-spacing:-.03em; line-height:1; }
.rvhead__of{ font-size:.95rem; color:#8AA3B8; }
.rvhead__link{ color:#DCE7F0; font-weight:600; font-size:.95rem; }
.rvhead__link:hover{ color:var(--gold); }
.rvhead__stand{ font-size:.78rem; color:#7C93A8; width:100%; }

.rvbar{
  position:relative;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.rvbar__track{ display:flex; width:max-content; animation:rvscroll 46s linear infinite; }
.rvbar__set{ display:flex; gap:1rem; padding-inline:.5rem; }
/* Auf dem Handy läuft kein Band mehr, sondern man wischt.
   Grund: Bei eigener Höhe je Karte blieb unter den kurzen Zitaten bis zu
   167 px schwarze Fläche stehen, weil das Band so hoch ist wie die längste
   Karte. Und ein dauerhaft laufender Transform ist auf dem Handy ohnehin
   schwer zu lesen — wer mitliest, kämpft gegen die Bewegung.
   Gewischt wird selbst, eine Karte je Ansicht, die nächste lugt hervor. */
/* Das Band läuft auf dem Handy genauso wie am Rechner – ein stehendes
   Karussell wirkt tot. Nur langsamer: Auf 390 px Breite braucht eine Karte
   so rund 15 Sekunden statt 11, das reicht zum Mitlesen. Antippen hält an. */
@media (max-width:760px){
  .rvbar{
    overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    padding-bottom:.2rem;
  }
  /* Vier Sätze ergeben auf dem Handy ein 5.125 px breites Band mit 16 Karten –
     das bewegt der Browser bei jedem Bild neu, und auf schwächeren Geräten
     ruckelt es. Zwei Sätze reichen hier: Ein Satz ist 1.281 px breit, also weit
     mehr als der Bildschirm, und die Schleife bleibt trotzdem lückenlos.
     Das `!important` muss sein – `--rv-saetze` setzt der Generator am Element. */
  .rvbar__track{
    animation-duration:64s; width:max-content;
    --rv-saetze:2 !important;
    will-change:transform;
  }
  .rvbar__set{ align-items:stretch; gap:.8rem; padding-inline:.4rem; }
  .rvbar__set[aria-hidden="true"]{ display:flex; }
  /* Muss nach der aria-hidden-Zeile stehen: gleiche Spezifität, die spätere
     Regel gewinnt. Andersherum bliebe das Ausblenden wirkungslos. */
  .rvbar__set:nth-of-type(n+3){ display:none; }
  .rv{ flex:0 0 min(340px, 84vw); }
}
.rvbar:hover .rvbar__track,
.rvbar:focus-within .rvbar__track,
.rvbar.is-paused .rvbar__track{ animation-play-state:paused; }
/* Laufrichtung: die Karten wandern von links nach rechts. */
/* Ein Umlauf verschiebt um genau einen Satz – dadurch sitzt die erste Karte
   nach dem Sprung exakt dort, wo die Wiederholung gerade stand. Der Übergang
   ist nicht zu sehen, egal wie viele Stimmen es sind. */
@keyframes rvscroll{
  from{ transform:translateX(calc(-100% / var(--rv-saetze, 2))); }
  to  { transform:translateX(0); }
}
@media (prefers-reduced-motion: reduce){
  .rvbar{ overflow-x:auto; overflow-y:hidden; -webkit-mask-image:none; mask-image:none;
          scroll-snap-type:x mandatory; scrollbar-width:none; }
  .rvbar::-webkit-scrollbar{ display:none; }
  .rvbar__track{ animation:none; }
  .rvbar__set[aria-hidden="true"]{ display:none; }
  .rv{ scroll-snap-align:center; }
}

.rv{
  flex:0 0 min(340px, 82vw); margin:0;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-lg); padding:1.35rem 1.5rem;
  display:flex; flex-direction:column; gap:.75rem;
}
.rv__stars{ display:flex; gap:.1rem; font-size:1rem; line-height:1; }
.rv__star{ color:var(--gold); }
.rv__star.is-off{ color:rgba(255,255,255,.22); }
.rv__text{ margin:0; font-size:.95rem; line-height:1.6; color:#DCE7F0; }
/* Zitate sind zwischen 33 und 227 Zeichen lang, die Karten aber alle gleich hoch.
   Ohne Staffelung stand unter dem kürzesten Lob 182 px leere Fläche – auf dem
   Handy die halbe Karte. Je kürzer das Zitat, desto größer die Schrift; damit
   füllt jede Karte sich selbst. Die Stufe vergibt `build.py` nach Zeichenzahl. */
.rv--m .rv__text{ font-size:1.12rem; line-height:1.55; }
.rv--l .rv__text{ font-size:1.45rem; line-height:1.42; letter-spacing:-.012em; }
.rv--xl .rv__text{ font-size:1.85rem; line-height:1.3; letter-spacing:-.022em; color:#fff; }
/* Was dann noch übrig bleibt, verteilt sich über und unter das Zitat, statt
   sich unten zu sammeln – eine mittig sitzende Zeile wirkt gesetzt, eine
   oben klebende wirkt vergessen. */
.rv__text{ margin-block:auto; }
.rv__text::before{ content:"„"; }
.rv__text::after{ content:"“"; }
.rv__by{ margin-top:auto; display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem .55rem; }
.rv__name{ font-weight:700; color:#fff; font-size:.9rem; }
.rv__meta{ font-size:.78rem; color:#8AA3B8; }
.rv__cut{ font-size:.68rem; color:#7C93A8; width:100%; font-style:italic; }

.rvsec__foot{ display:grid; justify-items:center; gap:.9rem; text-align:center; margin-top:clamp(1.4rem,3vw,2rem); }
.rvsec__foot .btn--outline{ --btn-fg:#fff; --btn-bd:rgba(255,255,255,.32); }
.rvsec__foot .btn--outline:hover{ --btn-bd:#fff; background:rgba(255,255,255,.08); }
.rvsec__note{ margin:0; font-size:.82rem; color:#7C93A8; max-width:62ch; }

/* ---------- 24. Öffnungsstatus-Pill ---------- */
.status{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:.79rem; font-weight:700; letter-spacing:-.005em;
  padding:.28rem .8rem .28rem .62rem; border-radius:999px;
  border:1px solid transparent; white-space:nowrap;
}
.status[hidden]{ display:none; }
.status__dot{ width:8px; height:8px; border-radius:50%; flex:none; position:relative; }
.status.is-open{ background:rgba(22,163,74,.16); border-color:rgba(74,222,128,.4); color:#7BEBA4; }
.status.is-open .status__dot{ background:#4ADE80; }
.status.is-open .status__dot::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:2px solid #4ADE80; animation:ping 2s cubic-bezier(0,0,.2,1) infinite;
}
.status.is-closed{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.14); color:#A9BFD2; }
.status.is-closed .status__dot{ background:#94A3B8; }
@keyframes ping{ 0%{ transform:scale(.8); opacity:.9; } 75%,100%{ transform:scale(2); opacity:0; } }
@media (prefers-reduced-motion: reduce){ .status.is-open .status__dot::after{ animation:none; opacity:.5; } }

.status--lg{ font-size:.92rem; padding:.5rem 1.1rem .5rem .85rem; }
@media (max-width:520px){ .status--lg{ white-space:normal; align-items:flex-start; line-height:1.4; } .status--lg .status__dot{ margin-top:.42em; } }
/* Auf hellem Grund (Standort-Band) */
.standort .status.is-open{ background:#E7F8EE; border-color:#8FE0B0; color:#15803D; }
.standort .status.is-closed{ background:var(--bg-soft-2); border-color:var(--line); color:var(--slate); }
/* Die Pille ist auf dem Handy wichtiger als die Mailadresse: statt sie zu
   verstecken, zeigt die Topbar dort die Kurzform („Jetzt geöffnet“). */
.status__kurz{ display:none; }
@media (max-width:820px){
  .topbar .status .status__txt{ display:none; }
  .topbar .status .status__kurz{ display:inline; }
  .topbar .status{ padding:.25rem .8rem .25rem .6rem; font-size:.84rem; }
}

/* ---------- 25. Kontakt-Speed-Dial ----------
   Eine Pille, ein Aufklapp-Signal (der Pfeil im Knopf), vier Wege.
   Bewusst KEINE Stapel-Vorschau, keine Zählerblase, kein Pulsring und keine
   Hinweisblase mehr – fünf konkurrierende Signale wirkten unruhig. */
.dial{
  position:fixed; right:clamp(.9rem,2vw,1.6rem); bottom:clamp(.9rem,2vw,1.6rem);
  z-index:860; display:flex; flex-direction:column; align-items:flex-end; gap:.65rem;
}
/* Weggefahren beim Abwärtslesen - siehe speedDial() in main.js. Nur auf
   kleinen Bildschirmen, am Rechner stört die Pille niemanden. */
@media (max-width:760px){
  .dial{ transition:transform .22s ease, opacity .22s ease; }
  .dial.is-weg{ transform:translateY(140%); opacity:0; pointer-events:none; }
  /* Solange der Seitenkopf im Bild ist, bleibt der Knopf unten. Dort stehen
     „Beratung anfragen" und die Telefonnummer ohnehin schon – der Knopf wäre
     doppelt und verdeckte am 10.09.2026 gemessen den dritten Beleg. */
  .dial.is-im-kopf{ transform:translateY(140%); opacity:0; pointer-events:none; }
}
@media (prefers-reduced-motion: reduce){
  .dial{ transition:none; }
}
.dial__items{
  display:flex; flex-direction:column; align-items:flex-end; gap:.55rem;
  pointer-events:none;
}
.dial__item{
  display:flex; align-items:center; gap:.65rem;
  opacity:0; transform:translateY(12px) scale(.92); pointer-events:none;
  transition:opacity .2s ease, transform .26s cubic-bezier(.2,1.1,.4,1);
}
.dial.is-open .dial__items{ pointer-events:auto; }
.dial.is-open .dial__item{ opacity:1; transform:none; pointer-events:auto; }
.dial.is-open .dial__item:nth-child(1){ transition-delay:.12s; }
.dial.is-open .dial__item:nth-child(2){ transition-delay:.08s; }
.dial.is-open .dial__item:nth-child(3){ transition-delay:.04s; }
.dial.is-open .dial__item:nth-child(4){ transition-delay:0s; }
/* Beim Schließen in umgekehrter Reihenfolge einklappen – so fühlt es sich wie
   ein Vorgang an, nicht wie ein Abschalten. */
.dial:not(.is-open) .dial__item:nth-child(1){ transition-delay:0s; }
.dial:not(.is-open) .dial__item:nth-child(2){ transition-delay:.04s; }
.dial:not(.is-open) .dial__item:nth-child(3){ transition-delay:.08s; }
.dial:not(.is-open) .dial__item:nth-child(4){ transition-delay:.12s; }
.dial__item:hover{ text-decoration:none; }

.dial__label{
  background:#fff; color:var(--ink); font-weight:700; font-size:.87rem;
  padding:.46rem .9rem; border-radius:999px; white-space:nowrap;
  border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(12,21,32,.1), 0 8px 22px rgba(12,21,32,.14);
}
.dial__ico{
  width:46px; height:46px; border-radius:50%; flex:none;
  display:grid; place-items:center; color:#fff;
  box-shadow:0 1px 2px rgba(12,21,32,.2), 0 8px 22px rgba(12,21,32,.24),
             inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .18s, box-shadow .18s;
}
.dial__item:hover .dial__ico{ transform:scale(1.07); }
.dial__item--wa   .dial__ico{ background:#1FAF54; }   /* WhatsApp-Grün, abgedunkelt: 3,4:1 auf Weiß statt 1,9:1 */
.dial__item--call .dial__ico{ background:var(--aqua-2); }
.dial__item--mail .dial__ico{ background:var(--ink-3); }
.dial__item--form .dial__ico{ background:linear-gradient(135deg,var(--gold),var(--gold-2)); color:#26160A; }
/* Instagram war das einzige Symbol ohne eigene Farbe und verschwand dadurch
   neben WhatsApp-Grün und Gold. Der Markenverlauf ist an dieser Stelle richtig:
   Jedes Symbol im Knopf trägt hier die Farbe seines Dienstes, und Instagram
   erkennt man an nichts so sicher wie daran. Weiß darauf bleibt gut lesbar –
   die hellste Stelle des Verlaufs ist #F09433, das trägt weiße Symbolkanten. */
.dial__item--ig .dial__ico{
  background:linear-gradient(45deg,#F09433 0%,#E6683C 25%,#DC2743 50%,#CC2366 75%,#BC1888 100%);
  color:#fff;
}

/* --- Die Pille --- */
.dial__toggle{
  position:relative; z-index:2; overflow:hidden;
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.45rem .5rem .45rem .5rem; border-radius:999px; border:0; cursor:pointer;
  background:linear-gradient(158deg,#FFDD79 0%,var(--gold) 44%,var(--gold-2) 100%); color:#26160A;
  font:inherit; font-weight:800; font-size:.95rem; letter-spacing:-.01em;
  /* Drei Lagen statt einer: harte Kante, weiche Höhe, heller Grat oben.
     Das ist der Unterschied zwischen "gefärbt" und "gefertigt". */
  box-shadow:
    0 1px 2px rgba(38,22,10,.22),
    0 10px 30px rgba(245,161,20,.42),
    inset 0 1px 0 rgba(255,255,255,.62),
    inset 0 -1px 0 rgba(38,22,10,.10);
  transition:transform .2s cubic-bezier(.2,1.1,.4,1), box-shadow .2s, background .2s, color .2s;
}
.dial__toggle:hover{
  transform:translateY(-2px);
  box-shadow:
    0 2px 4px rgba(38,22,10,.24),
    0 16px 38px rgba(245,161,20,.5),
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -1px 0 rgba(38,22,10,.12);
}
.dial__toggle:active{ transform:translateY(0); }
.dial__toggle:focus-visible{ outline:3px solid var(--aqua); outline-offset:3px; }
.dial.is-open .dial__toggle{
  background:linear-gradient(158deg,#1B2C3C 0%,var(--ink) 100%); color:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 30px rgba(12,21,32,.4), inset 0 1px 0 rgba(255,255,255,.12);
}

/* Das Symbol sitzt in einer eigenen Mulde – dadurch bekommt die Pille eine
   Gliederung (Symbol · Wort · Knopf) statt einer durchgehenden Fläche. */
.dial__stack{
  position:relative; display:grid; place-items:center; width:34px; height:34px; flex:none;
  border-radius:50%; background:rgba(38,22,10,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
  transition:background .2s;
}
.dial.is-open .dial__stack{ background:rgba(255,255,255,.14); box-shadow:inset 0 1px 0 rgba(255,255,255,.1); }

/* Erreichbarkeitspunkt: grün, solange das Büro wirklich besetzt ist. Die
   Information liegt ohnehin vor (openState in main.js) – sie kostet hier
   keinen Platz und verspricht nichts, was nicht stimmt. */
.dial__stack::after{
  content:""; position:absolute; top:-1px; right:-1px;
  width:11px; height:11px; border-radius:50%;
  background:rgba(38,22,10,.34); border:2px solid var(--gold);
  transition:background .25s, border-color .25s;
}
.dial.is-live .dial__stack::after{ background:#22C55E; }
.dial:not(.is-live) .dial__toggle{ }
.dial.is-open .dial__stack::after{ border-color:#16273a; }
.dial.is-open:not(.is-live) .dial__stack::after{ background:rgba(255,255,255,.34); }
.dial__toggle-ico{ grid-area:1/1; display:grid; place-items:center; transition:opacity .2s, transform .25s; }
.dial__toggle-ico--close{ opacity:0; transform:rotate(-90deg) scale(.7); }
.dial.is-open .dial__toggle-ico--open{ opacity:0; transform:rotate(90deg) scale(.7); }
.dial.is-open .dial__toggle-ico--close{ opacity:1; transform:none; }

/* Beschriftung wechselt mit dem Zustand, ohne die Breite springen zu lassen */
.dial__word{ display:grid; white-space:nowrap; }
.dial__word > span{ grid-area:1/1; transition:opacity .18s, transform .22s; }
.dial__word-b{ opacity:0; transform:translateY(6px); }
.dial.is-open .dial__word-a{ opacity:0; transform:translateY(-6px); }
.dial.is-open .dial__word-b{ opacity:1; transform:none; }

/* Der Knopf mit dem Pfeil ist das einzige Aufklapp-Signal – und er nickt
   leise, bis einmal geöffnet wurde. Danach ist die Funktion bekannt. */
.dial__knob{
  width:28px; height:28px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:rgba(38,22,10,.14); color:#26160A;
  transition:transform .3s cubic-bezier(.2,1.1,.4,1), background .2s, color .2s;
}
.dial__toggle:hover .dial__knob{ background:rgba(38,22,10,.22); }
.dial.is-open .dial__knob{ background:rgba(255,255,255,.14); color:#fff; transform:rotate(180deg); }

/* ---- Bewegung: zwei Dinge, nicht fünf ----
   Das Nicken des Pfeils ist ersetzt. Stattdessen wandert alle acht Sekunden
   ein Lichtstreifen über das Gold, so wie Licht über eine lackierte Fläche
   läuft. Das zieht den Blick, ohne etwas zu fordern - und es hört auf,
   sobald der Knopf offen ist. */
.dial__toggle::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg,
    transparent 42%, rgba(255,255,255,.5) 50%, transparent 58%);
  transform:translateX(-130%);
  animation:dialGlanz 8s cubic-bezier(.4,0,.2,1) 2.4s infinite;
}
.dial.is-open .dial__toggle::after{ animation:none; opacity:0; }
@keyframes dialGlanz{
  0%   { transform:translateX(-130%); }
  14%  { transform:translateX(130%); }
  100% { transform:translateX(130%); }
}

/* Der Erreichbarkeitspunkt atmet, solange das Büro wirklich besetzt ist.
   Das ist eine Aussage, keine Werbung - deshalb darf er sich bewegen. */
.dial.is-live .dial__stack::after{ animation:dialPuls 2.6s ease-out infinite; }
@keyframes dialPuls{
  0%      { box-shadow:0 0 0 0 rgba(34,197,94,.55); }
  62%,100%{ box-shadow:0 0 0 7px rgba(34,197,94,0); }
}

/* Auftritt beim Laden: kommt einmal von unten herein, mit Nachschwingen.
   Danach gilt wieder der normale Zustand, damit das Wegfahren beim
   Scrollen unverändert funktioniert. */
.dial{ animation:dialAuftritt .78s cubic-bezier(.16,1.12,.3,1) .35s backwards; }
@keyframes dialAuftritt{
  from{ transform:translateY(150%); opacity:0; }
  to  { transform:translateY(0); opacity:1; }
}

@media (prefers-reduced-motion: reduce){
  .dial,
  .dial__toggle::after,
  .dial.is-live .dial__stack::after{ animation:none; }
  .dial__item{ transition:opacity .15s; transform:none; }
}
@media (max-width:400px){
  .dial__toggle{ padding:.6rem .45rem .6rem .78rem; gap:.4rem; font-size:.88rem; }
  .dial__knob{ width:26px; height:26px; }
}
@media (max-width:339px){ .dial__word{ display:none; } }

.totop{
  position:fixed; left:clamp(.9rem,2vw,1.6rem); bottom:clamp(.9rem,2vw,1.6rem); z-index:840;
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line);
  background:#fff; color:var(--ink); cursor:pointer; display:grid; place-items:center;
  box-shadow:var(--sh-2); opacity:0; transform:translateY(10px); transition:opacity .25s, transform .25s;
}
.totop.is-on{ opacity:1; transform:none; }
@media (max-width:760px){ .totop{ display:none; } }

/* ---------- 25. Cookie-Banner ---------- */
.cookie{ position:fixed; inset:0; z-index:1000; display:grid; place-items:end center; padding:clamp(.8rem,2vw,1.6rem); background:rgba(8,14,22,.5); backdrop-filter:blur(3px); }
.cookie[hidden]{ display:none; }
.cookie__box{
  width:min(680px,100%); background:#fff; border-radius:var(--r-xl);
  padding:clamp(1.5rem,3.5vw,2.2rem); box-shadow:var(--sh-3);
  animation:cookieUp .35s cubic-bezier(.2,.8,.3,1);
}
@keyframes cookieUp{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }
.cookie__title{ font-size:var(--step-1); margin-bottom:.5em; }
.cookie__text{ font-size:.92rem; margin-bottom:1.2rem; }
.cookie__opts{ list-style:none; padding:0; margin:0 0 1.4rem; display:grid; gap:.6rem; }
.cookie__opts li{ margin:0; }
.cookie__actions{ display:flex; flex-wrap:wrap; gap:.6rem; }
.cookie__actions .btn{ font-size:.9rem; padding:.72rem 1.3rem; }

.switch{ display:flex; gap:.9rem; align-items:flex-start; padding:.85rem 1rem; border:1px solid var(--line); border-radius:14px; cursor:pointer; background:var(--bg-soft); }
.switch.is-locked{ cursor:default; opacity:.85; }
.switch input{ position:absolute; opacity:0; width:0; height:0; }
.switch__ui{ width:44px; height:25px; border-radius:999px; background:#C6D4E1; flex:none; position:relative; transition:background .2s; margin-top:.15rem; }
.switch__ui::after{ content:""; position:absolute; top:3px; left:3px; width:19px; height:19px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .2s; }
.switch input:checked + .switch__ui{ background:var(--aqua-2); }
.switch input:checked + .switch__ui::after{ transform:translateX(19px); }
.switch input:focus-visible + .switch__ui{ box-shadow:0 0 0 3px rgba(34,167,224,.35); }
.switch__txt{ font-size:.88rem; }
.switch__txt strong{ display:block; margin-bottom:.1rem; }
.switch__txt em{ font-style:normal; color:var(--muted); font-size:.83rem; line-height:1.5; display:block; }

/* ---------- 26. Rechtstexte ---------- */
.legal{ max-width:820px; }
.legal h2{ font-size:var(--step-2); margin-top:2.4rem; padding-top:2.4rem; border-top:1px solid var(--line); }
.legal h2:first-of-type{ margin-top:0; padding-top:0; border-top:0; }
.legal h3{ font-size:var(--step-1); margin-top:1.9rem; }
/* Lange URLs und Aktenzeichen dürfen umbrechen, sonst schiebt sich die Seite
   auf schmalen Displays seitlich raus. */
.legal p,.legal li{ font-size:.97rem; overflow-wrap:anywhere; }
.legal a{ overflow-wrap:anywhere; }

/* Muster-Widerrufsformular: Ausfülllinien über CSS statt Unterstrich-Ketten */
.formblock{ display:grid; gap:1rem; margin:1.4rem 0 0; }
.formblock__row{ display:grid; gap:.3rem; }
.formblock__row span{ font-size:.8rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; }
.formblock__line{ border-bottom:1.5px dashed #B9C7D6; min-height:1.9rem; }
.formblock__line--tall{ min-height:4.5rem; }
@media (min-width:560px){ .formblock--2{ grid-template-columns:1fr 1fr; } }
.legal__meta{
  background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--r);
  padding:1.2rem 1.4rem; font-size:.9rem; margin-bottom:2.2rem;
}
.legal__meta p{ margin:0; }
.data-table{ font-size:.95rem; margin-bottom:1.8rem; }
.data-table th,.data-table td{ text-align:left; padding:.7rem 1rem .7rem 0; border-bottom:1px solid var(--line-2); vertical-align:top; }
/* width:1% schrumpft die Spalte auf die kleinstmögliche Breite. Zusammen mit
   hyphens:auto trennte der Browser dafür jedes Wort: aus "Versandkosten" wurde
   "Ver-sand-kos-ten" über vier Zeilen. Deshalb kein Umbruch mehr in der
   Beschriftungsspalte - unter 620 px stehen die Zeilen ohnehin untereinander. */
.data-table th{
  color:var(--ink); font-weight:700; width:1%; padding-right:2rem;
  white-space:nowrap; hyphens:manual;
}
/* Auf schmalen Displays untereinander statt zweispaltig – sonst quetschen sich
   die Werte in eine 40-px-Spalte. */
@media (max-width:620px){
  .data-table,.data-table tbody,.data-table tr,.data-table th,.data-table td{ display:block; width:auto; }
  .data-table tr{ padding:.7rem 0; border-bottom:1px solid var(--line-2); }
  .data-table th{ padding:0 0 .2rem; border:0; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); white-space:normal; }
  .data-table td{ padding:0; border:0; }
}

/* Sitemap-Seite */
.sitemap-tree{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.6rem; }
.sitemap-tree > li{ margin:0; }
.sitemap-tree > li > a{ font-weight:800; color:var(--ink); font-size:1.05rem; }
.sitemap-tree ul{ list-style:none; padding:.6rem 0 0 .9rem; margin:0; border-left:2px solid var(--line); }
.sitemap-tree ul li{ margin:.35rem 0; }

/* ---------- 27. Utilities ---------- */
.center{ text-align:center; }
.mb-0{ margin-bottom:0 !important; }
.mt-2{ margin-top:1.4rem; }
.mt-3{ margin-top:2.2rem; }
.mt-4{ margin-top:3rem; }
.actions{ display:flex; flex-wrap:wrap; gap:.75rem; }
/* Gesichterreihe (Startseite, „Warum SECKLER“): leicht überlappende Kreise mit weißem Ring,
   daneben ein Satz. Die ganze Zeile ist ein Link zur Teamseite. Der linke Innenabstand gleicht
   die negative Überlappung des ersten Kreises aus – :first-child greift hier nicht, weil jedes
   Bild vom Generator in ein eigenes <picture> gelegt wird. */
.gesichter{ display:flex; align-items:center; flex-wrap:wrap; gap:.7rem 1rem; margin:1.5rem 0 1.3rem; color:var(--ink); text-decoration:none; }
.gesichter__reihe{ display:flex; padding-left:10px; }
.gesichter__reihe img, .gesichter__mehr{
  width:clamp(36px, 9vw, 44px); height:clamp(36px, 9vw, 44px); flex:none;
  border-radius:50%; object-fit:cover; margin-left:-10px;
  border:2.5px solid #fff; box-shadow:0 1px 3px rgba(12,21,32,.18); background:#E3EDF5;
  transition:transform .2s;
}
.gesichter__mehr{ display:grid; place-items:center; font-size:.76rem; font-weight:800; color:var(--ink-3); }
.gesichter__txt{ font-size:.95rem; line-height:1.45; }
.gesichter__txt u{ font-weight:700; text-decoration-color:var(--gold); text-decoration-thickness:2px; text-underline-offset:3px; }
.gesichter:hover .gesichter__txt u, .gesichter:focus-visible .gesichter__txt u{ color:var(--aqua-2); text-decoration-color:var(--aqua-2); }
/* Die ganze Zeile ist ein Link – ohne diese Zeile unterstreicht a:hover beim Drüberfahren den
   ganzen Satz samt „+2“ (Screenshot von Ilyas, 28.09.2026). Unterstrichen bleibt nur „Team kennenlernen“. */
.gesichter:hover{ text-decoration:none; }
/* Im Seitenkopf (seit 28.09.2026, vorher im Zahlenband unter den Bewertungen): Ring in Kopf-Dunkel,
   damit die Kreise auf dem Foto sauber überlappen; Satz in den Farben des Kopfes, mit demselben
   weichen Schatten wie Überschrift und Einleitung. */
.hero__actions + .gesichter--hero{ margin-top:-.75rem; }
.gesichter--hero{ margin-bottom:1.2rem; color:#fff; text-shadow:0 1px 2px rgba(6,11,18,.55), 0 3px 18px rgba(6,11,18,.4); }
.gesichter--hero .gesichter__reihe img, .gesichter--hero .gesichter__mehr{ border-color:#0C1520; box-shadow:0 2px 10px rgba(0,0,0,.35); }
.gesichter--hero .gesichter__mehr{ background:rgba(255,255,255,.16); color:#fff; backdrop-filter:blur(6px); text-shadow:none; }
.gesichter--hero .gesichter__txt{ color:#D3E0EC; }
.gesichter--hero .gesichter__txt b{ color:#fff; }
.gesichter--hero .gesichter__txt u{ color:var(--gold); }
.gesichter--hero:hover .gesichter__txt u, .gesichter--hero:focus-visible .gesichter__txt u{ color:#fff; text-decoration-color:var(--gold); }
/* Am Rechner füllt der Kopf genau den ersten Bildschirm. Vorher lugte darunter ein Streifen des
   Bewertungsblocks hervor – je nach Bildschirm 63 bis 314 px, mitten durch das Google-Zeichen
   (gemessen 28.09.2026). --kopf = Höhe von Infoleiste + Menü: ab 1020 px 122 (39 + 83), darunter
   bricht die Infoleiste um. Wer Kopf oder Infoleiste in der Höhe ändert, zieht --kopf mit.
   Der Inhalt sitzt mittig im freien Raum, die Bereichsleiste bleibt unten. min-height steht im CSS
   ab dem ersten Bild – nichts springt beim Laden. */
@media (min-width:768px){
  .hero--slides{
    --kopf:156px;  /* Tablet: Infoleiste bricht um (gemessen 155–172 px) */
    display:flex; flex-direction:column;
    min-height:calc(100vh - var(--kopf)); min-height:calc(100svh - var(--kopf));
  }
  .hero--slides > .wrap{ width:100%; }
  /* Knappere Innenabstände als früher (115/77 px bei 1280): Die Mitte verteilt den Platz jetzt
     selbst. Mit den alten Abständen schnitt der Kopf bei 1280 × 800 die Bereichsleiste um 18 px an,
     bei 1366 × 768 um 64 px. */
  .hero--slides > .hero__in{ margin-block:auto; padding-block:clamp(2.2rem,5vw,4rem) clamp(1.8rem,3.5vw,3rem); }
}
@media (min-width:1020px){ .hero--slides{ --kopf:122px; } }
/* Niedrige Laptopfenster (1366 × 768 hat nach Browser- und Taskleiste rund 657 px): etwas weniger
   Luft über der Rubrik und unter der Einleitung, damit Knöpfe, Gesichter und Siegel ins erste Bild passen. */
@media (min-width:1020px) and (max-height:860px){
  .hero--slides > .hero__in{ padding-top:2.2rem; }
  .hero--slides .hero__text{ margin-bottom:1.5rem; }
  .hero--slides .heronav{ padding-bottom:1rem; }  /* MacBook Air (Fenster ~790 px): Leiste passt ganz */
}
@media (hover:hover){ .gesichter:hover .gesichter__reihe img{ transform:translateY(-2px); } }
@media (prefers-reduced-motion:reduce){ .gesichter__reihe img{ transition:none; } }
.actions--center{ justify-content:center; }
.stack > * + *{ margin-top:1.1rem; }

.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s cubic-bezier(.2,.8,.3,1), transform .6s cubic-bezier(.2,.8,.3,1); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; } }

/* ---------- 28. Print ---------- */
@media print{
  .topbar,.header,.fab,.totop,.cookie,.cta-band,.footer__grid{ display:none !important; }
  body{ color:#000; font-size:11pt; }
  a{ color:#000; text-decoration:underline; }
  .section{ padding:1rem 0; }
}

/* ---------- 29. Formular mit Tiefe ----------
   Themenauswahl als Kacheln statt Dropdown: sichtbar, mit dem Daumen bedienbar
   und Auslöser für die passenden Anschlussfragen. */
.fset{ border:0; padding:0; margin:0 0 1.9rem; }
.fset__legend{
  display:flex; align-items:center; gap:.6rem; padding:0; margin-bottom:1rem;
  font-size:1.02rem; font-weight:800; color:var(--ink); letter-spacing:-.015em;
}
.fset__no{
  width:26px; height:26px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--gold),var(--gold-2)); color:#26160A;
  font-size:.8rem; font-weight:900;
}

.picks{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr)); gap:.6rem; }
.pick{ position:relative; display:block; cursor:pointer; }
.pick input{ position:absolute; opacity:0; width:0; height:0; }
.pick__box{
  display:grid; justify-items:center; gap:.5rem; text-align:center;
  padding:1rem .7rem; border-radius:14px;
  border:1.5px solid var(--line); background:var(--bg-soft); color:var(--slate);
  transition:border-color .18s, background .18s, color .18s, transform .18s, box-shadow .18s;
}
.pick:hover .pick__box{ border-color:#CFE1EF; background:#fff; transform:translateY(-2px); box-shadow:var(--sh-1); }
.pick__ico{ color:var(--aqua-2); transition:color .18s, transform .25s; }
.pick__label{ font-size:.85rem; font-weight:700; color:var(--ink); line-height:1.25; }
.pick input:checked + .pick__box{
  border-color:var(--gold-2); background:linear-gradient(160deg,#FFFBF0,#FFF3D9);
  box-shadow:0 4px 16px rgba(245,161,20,.25);
}
.pick input:checked + .pick__box .pick__ico{ color:var(--gold-3); transform:scale(1.12); }
.pick input:focus-visible + .pick__box{ outline:3px solid var(--aqua); outline-offset:2px; }

.field__hint{ margin:.45rem 0 0; font-size:.81rem; color:var(--muted); line-height:1.5; }
.field__hint a{ color:var(--aqua-2); }

/* Anschlussfragen fahren beim Einblenden weich auf */
[data-when]{ animation:fadeSlide .32s cubic-bezier(.2,.8,.3,1); }
@keyframes fadeSlide{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ [data-when]{ animation:none; } }

.alert-inline{
  display:grid; grid-template-columns:auto 1fr; gap:.8rem; align-items:start;
  padding:.95rem 1.1rem; margin-bottom:1.05rem; border-radius:12px;
  background:var(--gold-soft, #FFF6E0); border-left:3px solid var(--gold-2); color:var(--slate);
}
.alert-inline svg{ color:var(--gold-3); margin-top:.15rem; }
.alert-inline p{ margin:0; font-size:.9rem; line-height:1.55; }
.alert-inline a{ color:var(--gold-3); }

/* Feld mit fehlender Pflichtangabe nach dem Absendeversuch */
.field.is-bad input, .field.is-bad select, .field.is-bad textarea{
  border-color:var(--warn); background:#FEF6F6;
}
.field__error{ margin:.35rem 0 0; font-size:.8rem; font-weight:600; color:var(--warn); }
.picks.is-bad{ outline:2px solid var(--warn); outline-offset:6px; border-radius:16px; }
/* Die Meldung zur Themenauswahl steht unter der ganzen Gruppe, nicht in
   einer Kachel – deshalb etwas mehr Luft nach dem Rahmen. */
.field__error--gruppe{ margin-top:1rem; }

/* ---------- 30. Bewegung ----------
   Regie statt Deko: Bewegung markiert hier Reihenfolge (was gehört zusammen,
   was kommt danach) und Zustand (wo stehe ich). Alles läuft unter
   `prefers-reduced-motion` sofort still. */

/* Gestaffeltes Einblenden – Kinder kommen nacheinander statt im Block */
.reveal--stagger.is-in > *{ animation:aufSteigen .62s cubic-bezier(.2,.8,.25,1) backwards; }
.reveal--stagger.is-in > *:nth-child(1){ animation-delay:.02s; }
.reveal--stagger.is-in > *:nth-child(2){ animation-delay:.10s; }
.reveal--stagger.is-in > *:nth-child(3){ animation-delay:.18s; }
.reveal--stagger.is-in > *:nth-child(4){ animation-delay:.26s; }
.reveal--stagger.is-in > *:nth-child(5){ animation-delay:.34s; }
.reveal--stagger.is-in > *:nth-child(6){ animation-delay:.42s; }
.reveal--stagger.is-in > *:nth-child(n+7){ animation-delay:.5s; }
@keyframes aufSteigen{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:none; } }

/* Der Tropfen der Rubrik fällt beim Erscheinen ein kleines Stück */
.reveal .eyebrow::before{ opacity:0; transform:translateY(-.45em); transition:opacity .4s ease .12s, transform .55s cubic-bezier(.2,.8,.25,1) .12s; }
.reveal.is-in .eyebrow::before{ opacity:1; transform:none; }

/* Bild fährt hinter einer Blende hervor */
.reveal--wipe img{ clip-path:inset(0 0 0 100%); transition:clip-path .85s cubic-bezier(.65,0,.35,1); }
.reveal--wipe.is-in img{ clip-path:inset(0 0 0 0); }

/* Karten bekommen beim Hovern eine Goldkante an der Oberkante */
.card{ position:relative; overflow:hidden; }
.card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,var(--gold),var(--gold-2));
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .35s cubic-bezier(.2,.8,.3,1);
}
.card:hover::before{ transform:scaleX(1); }
.card__ico{ transition:transform .3s cubic-bezier(.2,1.2,.4,1); }
.card:hover .card__ico{ transform:translateY(-2px) rotate(-4deg); }

/* Leistungsspalten heben sich beim Hovern genauso an wie die Karten */
.svc-col{ transition:transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s, border-color .25s; }
.svc-col:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); border-color:#D3E0EC; }
.svc-col h3 span{ transition:transform .3s cubic-bezier(.2,1.2,.4,1), background .22s, color .22s; }
.svc-col:hover h3 span{ background:linear-gradient(135deg,var(--gold),var(--gold-2)); color:#26160A; transform:rotate(-5deg); }

/* Die Verbindungslinie des Ablaufs zeichnet sich, wenn der Abschnitt kommt */
@media (min-width:1080px){
  .steps.reveal::before{ transform:scaleX(0); transform-origin:0 50%; transition:transform 1.1s cubic-bezier(.65,0,.35,1) .15s; }
  .steps.reveal.is-in::before{ transform:scaleX(1); }
  .steps.reveal .step::after{ transform:scale(0); transition:transform .5s cubic-bezier(.2,1.4,.4,1); }
  .steps.reveal.is-in .step::after{ transform:scale(1); }
  .steps.reveal.is-in .step:nth-child(1)::after{ transition-delay:.30s; }
  .steps.reveal.is-in .step:nth-child(2)::after{ transition-delay:.46s; }
  .steps.reveal.is-in .step:nth-child(3)::after{ transition-delay:.62s; }
  .steps.reveal.is-in .step:nth-child(4)::after{ transition-delay:.78s; }
  .steps.reveal.is-in .step:nth-child(5)::after{ transition-delay:.94s; }
}

/* Sanfter Tiefenversatz im Hero. Der Versatz sitzt auf dem Medien-Container,
   nicht auf dem Bild – sonst kollidiert er mit dessen eigener Zoom-Animation.
   Der Container ragt oben und unten über den Hero hinaus, damit beim
   Verschieben keine Lücke aufreißt; der Hero selbst schneidet ab. */
.hero--parallax .hero__media{ top:-58px; bottom:-58px; will-change:transform; }

/* FAQ: der Pfeil dreht, die Antwort fällt weich auf */
.faq details[open] > .faq__a{ animation:faqAuf .3s cubic-bezier(.2,.8,.3,1); }
@keyframes faqAuf{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce){
  .reveal--stagger.is-in > *,
  .faq details[open] > .faq__a{ animation:none; }
  .reveal .eyebrow::before{ opacity:1; transform:none; transition:none; }
  .reveal--wipe img{ clip-path:none; transition:none; }
  .steps.reveal::before,
  .steps.reveal .step::after{ transform:none; transition:none; }
  .hero--parallax .hero__media{ transform:none !important; }
}

/* ---------- 31. Bildkennzeichnung ----------
   Ein Teil der Aufnahmen zeigt typische Ausführungen, keine konkreten
   Kundenprojekte. Das steht nicht nur im Kleingedruckten, sondern am Bild
   selbst – dezent, aber lesbar. */
.split__media,
.shot{ position:relative; }
/* Der Vermerk muss da sein – mehr aber auch nicht. Er soll erkennbar bleiben
   und sonst niemandem im Weg stehen: gedeckte Schrift statt Weiß, ruhigerer
   Grund, kleiner Punkt. */
.imgnote{
  position:absolute; right:.7rem; bottom:.7rem; z-index:2;
  display:inline-flex; align-items:center; gap:.32em;
  padding:.24rem .55rem; border-radius:999px;
  background:rgba(8,14,22,.62); color:#CBD8E4;
  font-size:.64rem; font-weight:600; letter-spacing:.03em;
  backdrop-filter:blur(4px); pointer-events:none;
}
.imgnote::before{ content:""; width:4px; height:4px; border-radius:50%; background:rgba(255,198,39,.8); flex:none; }
/* Im Kopfbild unten links: rechts unten steht der feste Kontaktknopf. */
.hero .imgnote{ right:auto; left:var(--gutter); bottom:.9rem; z-index:3; }
@media (max-width:520px){ .imgnote{ font-size:.63rem; padding:.2rem .46rem; } }

/* ---------- 32. Mini-Raster ----------
   Drei bis vier kurze Erklärstücke unter einem Fließtext – kompakter als
   Karten, klarer als eine Aufzählung. */
.minigrid{ display:grid; gap:.7rem; margin:0 0 1.5rem; }
.minigrid--3{ grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); }
.minigrid__item{
  display:grid; gap:.2rem; padding:.85rem 1rem;
  border-left:3px solid var(--line); border-radius:0 10px 10px 0;
  background:var(--bg-soft); transition:border-color .2s, background .2s, transform .2s;
}
.section--soft .minigrid__item{ background:#fff; }
.minigrid__item:hover{ border-left-color:var(--gold-2); transform:translateX(3px); }
.minigrid__item b{ font-size:.94rem; color:var(--ink); }
.minigrid__item span{ font-size:.87rem; line-height:1.55; color:var(--muted); }
/* In der Galerie sitzt die Bildunterschrift unter dem Foto – der Hinweis
   wandert deshalb nach oben rechts, gegenüber dem Vorher/Nachher-Etikett. */
.shot .imgnote{ top:.7rem; right:.7rem; bottom:auto; }

/* ---------- 33. Eckdaten im Unterseiten-Hero ----------
   Drei harte Angaben direkt unter der Überschrift. Sie beantworten die
   stille Frage „Wissen die, wovon sie reden?“, bevor jemand weiterscrollt. */
.hero__facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  gap:0; list-style:none; margin:2.2rem 0 0; padding:0;
  border-top:1px solid rgba(255,255,255,.16);
}
.hero__facts li{
  margin:0; padding:1.05rem 1.4rem 1.05rem 0;
  border-right:1px solid rgba(255,255,255,.12);
  display:grid; gap:.15rem; align-content:start;
}
.hero__facts li:last-child{ border-right:0; }
.hero__facts li + li{ padding-left:1.4rem; }
.hero__facts b{
  font-size:1.32rem; font-weight:900; letter-spacing:-.03em; line-height:1.1;
  color:var(--gold);
}
.hero__facts span{ font-size:.83rem; line-height:1.45; color:#B7CADA; }
@media (max-width:620px){
  .hero__facts li{ border-right:0; border-bottom:1px solid rgba(255,255,255,.12); padding-right:0; }
  .hero__facts li:last-child{ border-bottom:0; }
  .hero__facts li + li{ padding-left:0; }
}
/* Der Unterseiten-Hero darf mit den Eckdaten etwas mehr Luft bekommen */
.hero--sub .hero__in > *{ max-width:70ch; }
.hero--sub .hero__facts{ max-width:min(100%, 62rem); }

/* ---------- 34. Verwandte Seiten mit mehr Gewicht ---------- */
.rel__item{ position:relative; overflow:hidden; }
.rel__item::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-2));
  transform:scaleX(0); transform-origin:0 50%; transition:transform .3s cubic-bezier(.2,.8,.3,1);
}
.rel__item:hover::after{ transform:scaleX(1); }

/* Bis 28.09.2026 stand hier eine Handy-Regel, die den Goldstrich als eigene Zeile über die Rubrik
   setzte – beim Umbruch landete er sonst mitten im Text. Der Tropfen richtet sich an der Grundlinie
   der ersten Zeile aus und darf vor dem Text bleiben. */

/* Im Off-Canvas stehen unter den Links die drei direkten Wege plus Adresse –
   wer das Menü öffnet, sucht oft genau das und nicht die nächste Unterseite. */
.nav__mobile-extra .status{ justify-self:start; margin-bottom:.3rem; }
.nav__addr{
  font-style:normal; font-size:.83rem; line-height:1.6; color:#8FA6BA;
  margin-top:.9rem; padding-top:.9rem; border-top:1px solid rgba(255,255,255,.09);
}
.nav__addr a{ color:#C4D5E3; }

/* Silbentrennung ist im Fließtext ein Segen und in einer Schlagzeile ein
   Fluch: „Ihre Hei-zung“ liest sich wie ein Satzfehler. Überschriften im
   Hero brechen deshalb nur an Wortgrenzen. */
.hero h1{ hyphens:manual; }

/* Sechs Vertrauens-Chips schieben auf dem Handy den halben Hero nach unten.
   Die letzten beiden stehen ohnehin noch einmal in der Fußleiste. */
@media (max-width:560px){
  .hero__trust li:nth-child(n+5){ display:none; }
}

/* Im Bilderstapel mischen sich echte Projektfotos und erzeugte Aufnahmen.
   Der Hinweis muss dort am einzelnen Bild sitzen, nicht am Container. */
.imgwrap{ position:relative; display:block; }
.split__media--stack .imgwrap--wide{ grid-column:1/-1; }
.split__media--stack .imgwrap img{ aspect-ratio:16/10; object-fit:cover; }
.mb-4{ margin-bottom:clamp(2rem,4vw,3.2rem); }

/* ---------- 35. Feinschliff Split & Karten ----------
   Steht neben einem langen Textblock ein 3:2-Foto, klafft über und unter dem
   Bild viel Weißraum. Das Bild wächst deshalb mit der Spalte mit – aber nur
   bis 560 px, damit der Beschnitt nicht zu heftig wird. */
.split__media:not(.split__media--stack){
  /* Die Box selbst wächst mit der Zeile (height:100 % löst gegen die
     Grid-Area auf) und wird bei 560 px gedeckelt. Weil der Hinweis „Ausstattungs-
     beispiel“ absolut an dieser Box hängt, sitzt er dadurch immer am Bild
     und nicht irgendwo im Leerraum darunter. */
  display:grid; height:100%; max-height:560px; align-self:center;
}
.split__media:not(.split__media--stack) > img,
.split__media:not(.split__media--stack) > picture > img{
  width:100%; height:100%; object-fit:cover;
}

/* Deutsche Komposita wie „Regenwassernutzung“ sprengen schmale Kartenspalten.
   In diesen kurzen Überschriften ist eine saubere Silbentrennung besser als
   ein Umbruch mitten im Wort. */
.card h3, .svc-col h3, .minigrid__item b{ hyphens:auto; }

/* ---------- 36. Hero mit wechselnden Bereichen ----------
   Vier Bilder, vier Geschäftsbereiche. Der Wechsel ist keine Zierde: er zeigt
   in acht Sekunden, was der Betrieb macht – ohne dass jemand scrollen muss. */
.hero--slides .hero__media{ overflow:hidden; }
.hero__slide{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 58%;
  opacity:0; transform:scale(1.08);
  transition:opacity 1.1s ease, transform 8s linear;
  will-change:opacity, transform;
}
.hero__slide.is-on{ opacity:1; transform:scale(1); }
/* Die Einzel-Animation des statischen Heros darf hier nicht mitlaufen */
.hero--slides .hero__media img{ animation:none; }

/* Bereichs-Leiste am unteren Rand */
.heronav{
  position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(.5rem,1.6vw,1.6rem);
  padding-bottom:clamp(1.1rem,2.4vw,1.9rem);
}
.heronav__item{
  display:grid; gap:.55rem; padding:0 0 .1rem; border:0; background:none; cursor:pointer;
  text-align:left; font:inherit; color:#A9BCCC; text-decoration:none;
  transition:color .25s, transform .25s cubic-bezier(.2,.8,.3,1);
}
.heronav__item:hover,
.heronav__item:focus-visible,
.heronav__item.is-on{ color:#fff; text-decoration:none; }
.heronav__item:hover{ transform:translateY(-2px); }
.heronav__bar{
  display:block; height:3px; border-radius:3px;
  background:rgba(255,255,255,.26); overflow:hidden;
}
.heronav__bar i{
  display:block; height:100%; width:100%; border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-2));
  transform:scaleX(0); transform-origin:0 50%;
}
/* Der Balken läuft nur beim aktiven Bereich – und zwar genau so lange,
   wie das Bild steht. Dauer und Skript-Intervall hängen zusammen. */
.heronav__item.is-on .heronav__bar i{ animation:heroBalken 7s linear forwards; }
@keyframes heroBalken{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.heronav__item.is-done .heronav__bar i{ transform:scaleX(1); animation:none; opacity:.45; }

.heronav__txt{ display:grid; gap:.05rem; min-width:0; }
.heronav__txt b{
  display:inline-flex; align-items:center; gap:.4em;
  font-size:.97rem; font-weight:700; letter-spacing:-.015em; line-height:1.2;
}
/* Der Pfeil sagt: hier geht es weiter – nicht nur ein anderes Bild */
.heronav__txt b svg{ opacity:0; transform:translateX(-4px); transition:opacity .22s, transform .22s; flex:none; }
.heronav__item:hover .heronav__txt b svg,
.heronav__item:focus-visible .heronav__txt b svg{ opacity:.9; transform:none; }
.heronav__txt em{
  font-style:normal; font-size:.79rem; line-height:1.35; color:#93A8BA;
  display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.heronav__item.is-on .heronav__txt em{ color:#A9BFD2; }
.heronav__item:focus-visible{ outline:3px solid var(--gold); outline-offset:4px; border-radius:6px; }

@media (max-width:760px){
  .heronav{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:.45rem; }
  .heronav__txt em{ display:none; }
  .heronav__txt b{ font-size:.78rem; }
}
@media (max-width:400px){
  .heronav__txt b{ font-size:.72rem; }
}

/* Ohne Bewegung: das erste Bild bleibt stehen, die Leiste bleibt bedienbar */
@media (prefers-reduced-motion: reduce){
  .hero__slide{ transition:opacity .2s; transform:none; }
  .hero__slide.is-on{ transform:none; }
  .heronav__item.is-on .heronav__bar i{ animation:none; transform:scaleX(1); }
}

/* Der Slideshow-Hero muss auf einen Laptop-Bildschirm passen – sonst liegt die
   Bereichsleiste unter der Kante und der ganze Effekt verpufft. Deshalb hier
   knappere Innenabstände als beim ruhigen Hero der Unterseiten. */
.hero--slides .hero__in{
  padding-block:clamp(2.6rem, 5vw, 4.4rem) clamp(1.2rem, 2vw, 1.8rem);
}
/* Unterhalb von 1024 px liegt der Text über dem Bild und darf breiter laufen.
   Ab 1024 px teilt sich der Hero in zwei Spalten – die schmalere Textbreite
   dafür steht weiter oben bei der Aufteilung. */
@media (max-width:1023px){
  .hero--slides .hero__in > *{ max-width:68ch; }
  /* Die Belegzeile ist eine Leiste, kein Fließtext – sie darf über die
     Textbreite hinauslaufen und passt so in eine Reihe statt in zwei. */
  .hero--slides .hero__trust{ max-width:min(100%, 66rem); }
}
.hero--slides .hero__actions{ margin-bottom:1.5rem; }
/* Vier Belege in einer Zeile wirken sicherer als sechs in zwei. Die beiden
   weiteren Zulassungen stehen ausführlich auf „Unternehmen“. */
/* Auf der Startseite immer dieselben vier Belege – vier in einer Reihe wirken
   sicherer als sechs in zwei. Die beiden weiteren Zulassungen stehen
   ausführlich auf „Unternehmen“ und in der Fußleiste. */
@media (min-width:561px){
  .hero--slides .hero__trust li:nth-child(n+5){ display:none; }
}
/* Auf dem Handy stapeln sich sechs Belege zu vier Zeilen und füllen ein
   Viertel der Höhe – gemessen am 10.09.2026: Der Kopf war von 5 % bis 100 %
   durchgehend mit Text belegt, das Bild konnte gar nicht wirken. Drei Belege
   genügen dort; die übrigen stehen ausführlich auf „Unternehmen". */
@media (max-width:560px){
  .hero--slides .hero__trust li:nth-child(n+4){ display:none; }
}
/* Nach eigener Auswahl markiert der Balken nur noch den Stand, er läuft nicht */
.heronav.is-manuell .heronav__item .heronav__bar i{ animation:none; transform:scaleX(0); }
.heronav.is-manuell .heronav__item.is-on .heronav__bar i{ transform:scaleX(1); }

/* ---------- Ausbauflächen (nur im Vorschaustand) ----------
   Markiert Stellen, an denen Material des Kunden fehlt. build.py setzt den Baustein
   nur bei `--staging` ein; der Livestand enthält ihn nicht. */
.slot{
  width:min(var(--wrap), 100% - 2 * var(--gutter));
  margin:clamp(1.6rem,4vw,2.6rem) auto; padding:1.5rem 1.6rem;
  border:2px dashed #B7CADA; border-radius:var(--r-lg);
  background:repeating-linear-gradient(45deg, rgba(34,167,224,.05) 0 8px, transparent 8px 18px);
  text-align:center;
}
.slot__label{
  margin:0 0 .5rem; font-size:.68rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--aqua-2, #1583B4);
}
.slot__title{ margin:0 0 .4rem; font-weight:800; color:var(--ink, #10202E); font-size:1.02rem; }
.slot__hint{ margin:0 auto; max-width:60ch; font-size:.88rem; line-height:1.6; color:var(--muted, #5B7085); }

/* ---------- 30. Handy: Bedienbarkeit ----------
   Die Besucher sind überwiegend Hauseigentümer ab 50, häufig unterwegs und
   einhändig. Dieser Block macht die Seite nicht anders, nur treffsicherer:
   nichts unter 44 px, keine Schrift unter 13 px, keine Tastatur-Zoomsprünge.
   Gemessen am 02.09.2026 bei 375 px. */
@media (max-width:760px){

  /* --- Formular: iOS zoomt beim Antippen in jedes Feld unter 16 px hinein.
     Danach steht die Seite verschoben und muss von Hand zurückgezogen werden. */
  .field input, .field select, .field textarea{
    font-size:16px;
    padding:.85rem 1rem;
    min-height:52px;
  }
  .field textarea{ min-height:150px; }
  .field label{ font-size:.95rem; }

  /* --- Telefonnummer im Kopf: war 21 px hoch, also kaum zu treffen. */
  .topbar__in{ min-height:0; padding-block:.15rem; }
  .topbar__link{ min-height:44px; padding-inline:.2rem; font-size:.9rem; }
  .topbar .status{ min-height:38px; }

  /* --- Die vier Bereiche unter der Bühne: 27 px hoch, vier nebeneinander. */
  .heronav__item{ min-height:52px; padding-block:.55rem; }
  .heronav__txt b{ font-size:.92rem; }

  /* --- Vorher/Nachher-Umschalter in den Referenzkarten. */
  .vacard__opt{ min-height:44px; padding-inline:1.1rem; font-size:.9rem; }

  /* --- Bewertungs- und Vertrauensleiste. */
  .rvhead__link, .trustbar__link{ min-height:44px; align-items:center; }

  /* --- Listen- und Adresslinks lagen zwischen 16 und 25 px Höhe und stehen
     dicht untereinander. Luft über Polsterung statt über Zeilenhöhe: So bleibt
     ein umbrechender Link („Klima & Lüftung“) eine Fläche und wird nicht doppelt hoch. */
  .nav__addr a, .footer__address a, .footer__legal a, .footer__bar a,
  .footer__list a, .info-list__v a, .crumbs a, .footer__legal .linkish{
    display:inline-block; padding-block:.72rem;
  }
  .footer__list a, .info-list__v a{ padding-inline-end:.4rem; }
  .footer__legal{ gap:0 1.35rem; }
  .crumbs{ padding-block:.1rem; }

  /* --- Telefon, Mobil und E-Mail auf der Kontaktseite: die wichtigsten
     Schaltflächen der ganzen Seite, vorher 19 px hoch. */
  .info-list__v a{ font-size:1.02rem; font-weight:600; }

  /* --- Rest: Logo, Netzwerk-Symbole, die vier Wege im Kontaktknopf. */
  .brand{ min-height:44px; }
  .social__link{ width:44px; height:44px; }
  .dial__item{ min-height:44px; }

  /* --- Schriftgrößen: nichts unter 13 px.
     Gemessen am 04.09.2026 bei 375 px lagen 22 Stellen bei 11 bis 12 px.
     Der Fließtext steht bei 16 px und bleibt, angehoben wird die kleine
     Seite der Skala — Beschriftungen, Hinweise, Fußzeile. Wer auf Armlänge
     liest, gibt bei 11 px auf, statt sich zu bemühen. */
  .status{ font-size:.82rem; }
  .small, .muted.small, figcaption em{ font-size:.85rem; }
  /* Ausgenommen: der KI-Vermerk. Die 13-px-Grenze gilt dem, was gelesen
     werden soll. Der Vermerk ist eine Pflichtangabe am Bild, kein Text
     zum Lesen – er bleibt klein und erkennbar. */
  .eyebrow{ font-size:.8rem; letter-spacing:.13em; }
  .heronav__txt b{ font-size:.95rem; }
  .heronav__txt em{ font-size:.82rem; }
  .rv__meta{ font-size:.82rem; }
  .rv__cut{ font-size:.76rem; }
  .rvsec__note, .mapstub__note{ font-size:.82rem; }
  .footer__h{ font-size:.88rem; }
  .footer__hint, .nav__addr, .switch__txt, .agency__text{ font-size:.88rem; }
  .pills li, .is-ok{ font-size:.88rem; }
  .rvhead__stand{ font-size:.82rem; }
  .rv__cut{ font-size:.78rem; }
  .agency__name small{ font-size:.78rem; letter-spacing:.12em; }
}

/* ---------- 37. Bildbetrachter ----------
   Nach dem Kundentermin 08.09.2026: Referenzbilder müssen anklickbar sein.
   Der Betrachter wird per JavaScript befüllt; ohne JavaScript bleiben die
   Bilder einfach normale Bilder – nichts geht verloren. */
.shot, .vacard__stage{ cursor:zoom-in; }
.shot:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }

/* Lupe erscheint beim Überfahren – zeigt, dass hier mehr zu sehen ist. */
.zoomcue{
  position:absolute; z-index:3; right:.75rem; top:.75rem;
  width:2.35rem; height:2.35rem; display:grid; place-items:center;
  border:0; border-radius:999px; cursor:zoom-in;
  background:rgba(12,21,32,.72); color:#fff; backdrop-filter:blur(8px);
  box-shadow:0 4px 14px rgba(0,0,0,.32);
  opacity:0; transform:scale(.85); transition:opacity .22s, transform .22s, background .22s;
}
.shot{ position:relative; }
.shot:hover .zoomcue,
.shot:focus-within .zoomcue,
.vacard:hover .zoomcue,
.vacard:focus-within .zoomcue{ opacity:1; transform:none; }
.zoomcue:hover{ background:var(--gold); color:#26160A; }
.zoomcue:focus-visible{ opacity:1; transform:none; outline:3px solid var(--gold); outline-offset:2px; }
/* Auf Touchgeräten gibt es kein Überfahren – dort dauerhaft sichtbar. */
@media (hover:none){ .zoomcue{ opacity:1; transform:none; } }

.lbox{
  position:fixed; inset:0; z-index:1200; display:none;
  align-items:center; justify-content:center;
  background:rgba(8,14,22,.94); backdrop-filter:blur(6px);
  padding:clamp(.75rem,3vw,2.5rem);
}
.lbox.is-on{ display:flex; animation:lboxAuf .24s ease both; }
@keyframes lboxAuf{ from{ opacity:0 } to{ opacity:1 } }

.lbox__fig{
  position:relative; margin:0; max-width:min(1180px,100%); max-height:100%;
  display:flex; flex-direction:column; gap:.9rem;
}
.lbox__stage{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  background:#0C1520; box-shadow:0 24px 70px rgba(0,0,0,.55);
  min-height:0;
}
.lbox__img{
  display:block; width:100%; height:auto; max-height:calc(100vh - 13rem);
  object-fit:contain; background:#0C1520;
}
.lbox__img--vorher{ position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity .35s ease; }
.lbox.is-vorher .lbox__img--vorher{ opacity:1; }

.lbox__cap{
  color:#E7EDF3; font-size:.95rem; line-height:1.5; text-align:center;
  max-width:62ch; margin-inline:auto;
}
.lbox__cap b{ display:block; font-size:1.05rem; font-weight:800; color:#fff; margin-bottom:.15rem; }

/* Bedienelemente: schließen, blättern, vorher/nachher */
.lbox__x, .lbox__nav{
  position:absolute; z-index:2; border:1px solid rgba(255,255,255,.22);
  background:rgba(12,21,32,.7); color:#fff; cursor:pointer;
  display:grid; place-items:center; border-radius:999px;
  backdrop-filter:blur(8px); transition:background .2s, transform .2s;
}
.lbox__x{ top:-3.1rem; right:0; width:2.6rem; height:2.6rem; }
.lbox__nav{ top:50%; transform:translateY(-50%); width:3rem; height:3rem; }
.lbox__nav--prev{ left:.75rem; }
.lbox__nav--next{ right:.75rem; }
.lbox__x:hover, .lbox__nav:hover{ background:var(--gold); color:#26160A; border-color:transparent; }
.lbox__nav:hover{ transform:translateY(-50%) scale(1.06); }
.lbox__x:focus-visible, .lbox__nav:focus-visible, .lbox__opt:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }
.lbox__nav[hidden]{ display:none; }

.lbox__switch{
  position:absolute; left:50%; bottom:.9rem; transform:translateX(-50%); z-index:2;
  display:inline-flex; padding:.24rem; gap:.15rem; border-radius:999px;
  background:rgba(12,21,32,.78); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.2); box-shadow:0 6px 18px rgba(0,0,0,.4);
}
.lbox__switch[hidden]{ display:none; }
.lbox__opt{
  border:0; cursor:pointer; font:inherit; font-size:.82rem; font-weight:700;
  padding:.42rem 1rem; border-radius:999px; background:transparent; color:#D5E0EB;
  transition:background .2s, color .2s; min-height:2.25rem;
}
.lbox__opt[aria-pressed="true"]{ background:#fff; color:var(--ink); }

.lbox__zaehler{
  position:absolute; top:-2.9rem; left:0; color:#9FB0C0;
  font-size:.82rem; letter-spacing:.06em; font-variant-numeric:tabular-nums;
}

@media (max-width:760px){
  /* Gemessen am 11.09.2026: 2,4 rem sind 38 px – unter der Grenze von 44,
     ausgerechnet beim Knopf, der wieder aus dem Fenster führt. */
  .lbox__x{ top:-3rem; width:2.75rem; height:2.75rem; }
  .lbox__nav{ width:2.75rem; height:2.75rem; }
  .lbox__img{ max-height:calc(100vh - 11rem); }
  .lbox__cap{ font-size:.88rem; }
}
@media (prefers-reduced-motion:reduce){
  .lbox.is-on{ animation:none; }
  .lbox__img--vorher, .zoomcue{ transition:none; }
}

/* ---------- 38. Referenzen präsenter ----------
   Daniel am 08.09.2026: „Vorher-nachher Bilder sind zu klein." Die Karten
   standen in einem 1200er Raster zu dritt – rund 350 px pro Bild. Jetzt:
   breiterer Rahmen, größere Mindestbreite, höhere Bühne. Auf dem Handy
   bleibt es eine Spalte, dort war die Größe nie das Problem. */
.wrap--breit{ max-width:1420px; }

.vamix{ grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:clamp(1.1rem,2vw,1.9rem); }
.vamix .vacard__stage{ aspect-ratio:5/4; }
.vamix .vacard__body{ padding:1.25rem 1.5rem 1.45rem; }
.vamix .vacard__title{ font-size:1.18rem; }
.vamix .vacard__meta{ font-size:.9rem; }
/* Der Umschalter darf mitwachsen – er ist jetzt das Bedienelement im Bild. */
.vamix .vacard__opt{ font-size:.82rem; padding:.42rem .95rem; min-height:2.2rem; }
.vamix .vacard__tag{ font-size:.72rem; padding:.4rem .85rem; }

@media (max-width:760px){
  .vamix{ grid-template-columns:1fr; }
  .vamix .vacard__stage{ aspect-ratio:4/3; }
}

/* Referenzblock auf dunklem Grund: die weißen Karten treten dadurch hervor.
   Die Bildunterschriften bleiben dunkel auf Weiß – nur der Fließtext des
   Abschnitts erbt die helle Farbe. */
.section--dark .vacard{ border-color:rgba(255,255,255,.14); box-shadow:0 18px 44px rgba(0,0,0,.36); }
.section--dark .vacard:hover{ box-shadow:0 26px 60px rgba(0,0,0,.48); }
.section--dark .vacard__title{ color:var(--ink); }
.section--dark .vacard__meta{ color:var(--muted); }

/* ---------- 39. Auswahl als Schaltflächen ----------
   Daniel am 08.09.2026: „Buttons einbauen in das Formular." Aufklappmenüs
   verstecken die Möglichkeiten hinter einem Klick – auf dem Handy sind sie
   zusätzlich ein Systemdialog. Sichtbare Schaltflächen zeigen sofort, was
   zur Wahl steht, und sind mit dem Daumen sicher zu treffen (44 px).
   Technisch bleiben es echte Radio-Eingaben: Tastatur, Screenreader und
   das Absenden funktionieren unverändert. */
.field__label{
  display:block; font-size:.86rem; font-weight:700; color:var(--ink); margin-bottom:.55rem;
}
.field--voll{ grid-column:1/-1; }

.chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{ margin:0; position:relative; }
.chip input{
  position:absolute; inset:0; width:100%; height:100%;
  margin:0; opacity:0; cursor:pointer;
}
.chip span{
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:2.75rem; padding:.6rem 1.05rem;
  border:1.5px solid var(--line); border-radius:999px; background:#fff;
  font-size:.9rem; font-weight:600; color:var(--ink); line-height:1.25;
  transition:border-color .18s, background .18s, color .18s, box-shadow .18s;
}
.chip:hover span{ border-color:var(--gold); }
.chip input:focus-visible + span{ outline:3px solid var(--gold); outline-offset:2px; }
.chip input:checked + span{
  border-color:var(--gold); background:linear-gradient(135deg,var(--gold),var(--gold-2));
  color:#26160A; box-shadow:0 3px 12px rgba(255,198,39,.34);
}

/* Der Budgetrahmen sitzt in einer Reihe, solange Platz ist – die Staffelung
   soll als Skala lesbar sein, nicht als beliebige Liste. */
.chips--budget .chip span{ font-variant-numeric:tabular-nums; }

@media (max-width:560px){
  .chips{ gap:.45rem; }
  .chip span{ font-size:.88rem; padding:.6rem .85rem; }
}

/* Bewerten und Lesen stehen gleichwertig nebeneinander; der Aufruf zum
   Bewerten steht vorn, weil er neu ist und aktiv gewünscht wurde. */
.rvsec__cta{ display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; }
.rvsec__einladung{
  margin:.95rem auto 0; max-width:52ch; text-align:center;
  font-size:.93rem; line-height:1.55; color:#AFC2D3;
}
@media (max-width:560px){
  .rvsec__cta{ flex-direction:column; align-items:stretch; }
  .rvsec__cta .btn{ justify-content:center; }
}

/* ---------- 40. Kontaktknopf: Fächer statt Liste ----------
   Daniel am 08.09.2026: „cleaner, wie ein Rad, nicht zu viele Punkte."
   Umgesetzt als Viertelfächer: Die Einträge stehen weiter untereinander –
   das ist für ältere Besucher die sicherste Trefferfläche – laufen aber
   nach oben hin nach links aus. Dadurch liest sich das Ganze als Bogen,
   ohne dass die Beschriftungen wegfallen. Die Beschriftungen bleiben:
   reine Symbole wären für die Zielgruppe ein Rückschritt.

   Beim Öffnen schrumpft die Pille zu einem Kreis. Das gibt dem Fächer den
   Mittelpunkt, den ein Rad braucht, und nimmt gleichzeitig Fläche weg. */
.dial.is-open .dial__word{
  max-width:0; opacity:0; margin-left:-.55rem;
  transition:max-width .28s cubic-bezier(.2,.8,.3,1), opacity .16s, margin .28s;
}
.dial__word{ max-width:14rem; transition:max-width .3s cubic-bezier(.2,.8,.3,1), opacity .22s .06s, margin .3s; overflow:hidden; }
.dial.is-open .dial__knob{ display:none; }

/* Fächerversatz: je weiter oben, desto weiter links. Die Werte folgen einem
   Kreisbogen; der unterste Eintrag sitzt genau über dem Knopf. */
.dial__item{ transition:opacity .2s ease, transform .3s cubic-bezier(.2,1.05,.4,1); }
.dial.is-open .dial__item{ transform:translateX(var(--faecher,0)); }
.dial__items > *:nth-last-child(1){ --faecher:0; }
.dial__items > *:nth-last-child(2){ --faecher:-10px; }
.dial__items > *:nth-last-child(3){ --faecher:-26px; }
.dial__items > *:nth-last-child(4){ --faecher:-48px; }

/* Geschlossen fahren die Einträge in den Knopf zurück, statt einfach zu
   verblassen – das erklärt, wo sie herkommen. */
.dial:not(.is-open) .dial__item{ transform:translate(14px,18px) scale(.86); }

.dial__item--ig .dial__ico{
  background:linear-gradient(135deg,#F9CE34 0%,#EE2A7B 48%,#6228D7 100%);
}

@media (max-width:560px){
  .dial__items > *:nth-last-child(2){ --faecher:-6px; }
  .dial__items > *:nth-last-child(3){ --faecher:-16px; }
  .dial__items > *:nth-last-child(4){ --faecher:-30px; }
}
@media (prefers-reduced-motion:reduce){
  .dial__item, .dial__word{ transition:none; }
  .dial.is-open .dial__item{ transform:none; }
  .dial:not(.is-open) .dial__item{ transform:none; }
}

/* ---------- 41. Kurzformular am Seitenende ---------- */
.kurzform{ display:grid; gap:clamp(1.6rem,3.5vw,3rem); align-items:start; }
@media (min-width:940px){ .kurzform{ grid-template-columns:minmax(0,.85fr) minmax(0,1fr); } }
.kurzform__text h2{ margin-top:.35rem; }
.kurzform__text .checks{ margin:1.1rem 0 1.2rem; }
.kurzform__form{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.25rem,3vw,2rem); box-shadow:var(--sh-2);
}
.kurzform__form .field:last-of-type{ margin-bottom:1.25rem; }
@media (max-width:560px){
  .kurzform__form{ padding:1.1rem; }
}

/* ---------- 42. Nachweise verknüpfen ----------
   Daniel am 08.09.2026: Die Zertifikate sollen die Information transportieren
   und gleichzeitig neugierig auf die anderen Bereiche machen. Jedes Siegel
   bekommt deshalb ein bis zwei Wege in die Tiefe – zum Leistungsbereich, in
   dem es zum Tragen kommt, und zur Person, die den Nachweis hält. */
.siegel__wege{
  display:flex; flex-wrap:wrap; gap:.4rem .5rem;
  margin-top:.85rem; padding-top:.8rem; border-top:1px solid var(--line-2);
}
.siegel__weg{
  display:inline-flex; align-items:center; gap:.35em;
  font-size:.8rem; font-weight:700; color:var(--aqua-2);
  padding:.32rem .6rem .32rem 0; border-radius:6px;
  transition:color .18s, gap .18s;
}
.siegel__weg:hover{ color:var(--ink); gap:.55em; text-decoration:none; }
.siegel__weg svg{ flex:none; transition:transform .18s; }
.siegel__weg:hover svg{ transform:translateX(2px); }

/* Verlinkte Qualifikation auf der Teamseite: als Verweis erkennbar, aber
   ohne die Liste in eine Linksammlung zu verwandeln. */
.member__quals a{
  color:var(--ink); text-decoration:underline; text-decoration-color:var(--gold);
  text-underline-offset:3px; text-decoration-thickness:2px;
}
.member__quals a:hover{ color:var(--aqua-2); text-decoration-color:var(--aqua-2); }

/* Angesprungene Ziele kurz hervorheben – sonst weiß niemand, wo er gelandet ist. */
.siegel__item:target, .member:target{
  outline:2.5px solid var(--gold); outline-offset:4px;
  animation:zielBlitz 1.6s ease 1;
}
@keyframes zielBlitz{
  0%,40%{ background:rgba(255,198,39,.16); }
  100%  { background:transparent; }
}
@media (prefers-reduced-motion:reduce){
  .siegel__item:target, .member:target{ animation:none; }
}
/* Anker nicht unter den fixierten Kopf laufen lassen */
.siegel__item, .member{ scroll-margin-top:7rem; }

/* ---------- 43. Partnerhinweis ---------- */
.partner{
  display:flex; gap:clamp(1rem,2.5vw,1.8rem); align-items:flex-start;
  background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.2rem,3vw,2rem);
}
.partner__mark{
  flex:none; width:3.2rem; height:3.2rem; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--gold),var(--gold-2)); color:#26160A;
  box-shadow:0 4px 14px rgba(255,198,39,.3);
}
.partner__text h2{ font-size:var(--step-2); margin:.2rem 0 .6rem; }
.partner__text p{ max-width:64ch; margin-bottom:1rem; }
@media (max-width:620px){
  .partner{ flex-direction:column; }
}

/* ---------- 44. Referenzseite neu ----------
   Das alte Raster ließ die Bilder die Kachelhöhe bestimmen. Weil die
   Vorlagen von 3:1 bis 1:2 reichen, entstand ein zerrissenes Bild – der
   Hauptkritikpunkt am 08.09.2026. Jetzt hat jede Kachel eine gleich hohe
   Bühne; das Bild sitzt vollständig darin (contain) auf dunklem Grund.
   Nichts wird abgeschnitten, nichts springt, und die Collagen mit
   Vorher/Nachher bleiben in einem Stück lesbar. */
.gallery .shot{ display:flex; flex-direction:column; background:#fff; }
.gallery .shot img{
  width:100%; height:auto; aspect-ratio:4/3; object-fit:contain;
  background:var(--ink); display:block;
}
.gallery .shot figcaption{ margin-top:auto; }

/* Auf schmalen Bildschirmen darf die Bühne etwas höher werden – dort steht
   nur eine Kachel nebeneinander und die Collagen brauchen die Fläche. */
@media (max-width:620px){
  .gallery .shot img{ aspect-ratio:5/4; }
}

/* Sprungleiste unter dem Seitenkopf */
.refnav{
  position:sticky; top:var(--headerH,64px); z-index:40;
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.refnav__in{
  display:flex; gap:.4rem; overflow-x:auto; scrollbar-width:none;
  padding-block:.6rem;
}
.refnav__in::-webkit-scrollbar{ display:none; }
.refnav a{
  flex:none; display:grid; gap:.1rem; padding:.55rem .95rem; border-radius:10px;
  border:1px solid transparent; transition:background .18s, border-color .18s;
}
.refnav a:hover{ background:var(--bg-soft); border-color:var(--line); text-decoration:none; }
.refnav a b{ font-size:.9rem; font-weight:700; color:var(--ink); white-space:nowrap; }
.refnav a span{ font-size:.76rem; color:var(--muted); white-space:nowrap; }
/* Anker nicht unter Kopf und Sprungleiste laufen lassen */
.section[id]{ scroll-margin-top:9.5rem; }

.galnote{
  margin:1.4rem auto 0; max-width:64ch; text-align:center;
  font-size:.88rem; line-height:1.6; color:var(--muted);
}

/* Der Seitenkopf der Referenzseite darf höher sein – das Bild ist das Argument. */
.hero--ref{ min-height:clamp(360px,52vh,560px); }

@media (max-width:760px){
  .refnav{ position:static; }
  .refnav__in{ padding-inline:var(--gutter); }
}

/* Passepartout statt schwarzer Balken: Hinter dem Bild liegt dasselbe Motiv
   groß, unscharf und abgedunkelt. Die Kachel bleibt gleich hoch, das Bild
   bleibt vollständig sichtbar – und der Rand sieht nach Absicht aus.
   Der Pfad kommt als --shot-bg aus dem Seitenquelltext. */
.gallery .shot{ position:relative; isolation:isolate; }
.gallery .shot::before{
  content:""; position:absolute; inset:0 0 auto 0; aspect-ratio:4/3; z-index:0;
  background-image:var(--shot-bg); background-size:cover; background-position:center;
  filter:blur(26px) saturate(1.15) brightness(.42); transform:scale(1.2);
}
.gallery .shot img{ position:relative; z-index:1; background:transparent; }
.gallery .shot > .tag-va, .gallery .shot > .imgnote, .gallery .shot > .zoomcue{ z-index:3; }
.gallery .shot figcaption{ position:relative; z-index:2; }
@media (max-width:620px){ .gallery .shot::before{ aspect-ratio:5/4; } }


/* ---------- 45. Feinschliff Typografie & Schaltflächen ----------
   Überschriften ohne einsame letzte Wörter; die goldene Schaltfläche
   bekommt beim Überfahren einen leisen Lichtlauf – dieselbe Sprache wie
   der Kontaktknopf, nur zurückhaltender. */
h1, h2, h3, .lead{ text-wrap:balance; }
.lead, p{ text-wrap:pretty; }

.btn--gold{ position:relative; overflow:hidden; isolation:isolate; }
.btn--gold::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.42) 50%, transparent 70%);
  transform:translateX(-120%); transition:transform .6s cubic-bezier(.2,.8,.3,1);
}
.btn--gold:hover::after, .btn--gold:focus-visible::after{ transform:translateX(120%); }

/* Derselbe Glanzstreifen wie beim Goldknopf – in Grün statt Weiß. */
.btn--wa{ position:relative; overflow:hidden; isolation:isolate; }
.btn--wa::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg, transparent 30%, rgba(37,211,102,.38) 50%, transparent 70%);
  transform:translateX(-120%); transition:transform .6s cubic-bezier(.2,.8,.3,1);
}
.btn--wa:hover::after, .btn--wa:focus-visible::after{ transform:translateX(120%); }

/* Schaltflächen im Formular quittieren den Tipp kurz spürbar */
.chip input:active + span, .pick input:active + .pick__box{ transform:scale(.97); }
.chip span, .pick__box{ transition:transform .12s, border-color .18s, background .18s, color .18s, box-shadow .18s; }

/* Vermerk „Ausstattungsbeispiel“ auch auf Kacheln und im Seitenkopf mit Bildwechsel */
.tile{ position:relative; }
.tile .imgnote{ top:.7rem; right:.7rem; bottom:auto; left:auto; z-index:3; }
.hero--slides > .imgnote{ position:absolute; top:1rem; right:var(--gutter); left:auto; bottom:auto; z-index:3; }
.hero--ref > .imgnote{ position:absolute; top:1rem; right:var(--gutter); left:auto; bottom:auto; z-index:3; }

@media (prefers-reduced-motion:reduce){
  .btn--gold::after{ transition:none; display:none; }
  .chip span, .pick__box{ transition:none; }
}


/* ---------- 46. Formular in Bewegung ----------
   Das Formular soll zeigen, dass es zuhört: erledigte Schritte bekommen
   einen Haken, die Leiste oben füllt sich, Anschlussfragen kommen weich
   statt zu springen, eine gewählte Schaltfläche quittiert kurz. Unter
   „weniger Bewegung" bleibt alles still, die Zustände bleiben sichtbar. */
.form__progress{ display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; margin:0 0 1.5rem; }
.form__progress i{ display:block; height:4px; border-radius:4px; background:var(--line); position:relative; overflow:hidden; }
.form__progress i::after{
  content:""; position:absolute; inset:0; border-radius:4px;
  background:linear-gradient(90deg,var(--gold),var(--gold-2));
  transform:scaleX(0); transform-origin:0 50%; transition:transform .5s cubic-bezier(.2,.8,.3,1);
}
.form__progress i.is-on::after{ transform:scaleX(1); }

.fset__no{ transition:background .25s, color .25s, transform .25s cubic-bezier(.2,1.2,.4,1); }
.fset.is-done .fset__no{ background:var(--ink); color:#fff; transform:scale(1.06); font-size:0; }
.fset.is-done .fset__no::after{ content:"✓"; font-size:.85rem; font-weight:800; }

[data-when]:not([hidden]){ animation:blockAuf .38s cubic-bezier(.2,.8,.3,1) both; }
@keyframes blockAuf{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

.chip input:checked + span, .pick input:checked + .pick__box{ animation:wahlPop .28s cubic-bezier(.2,1.4,.4,1); }
@keyframes wahlPop{ 0%{ transform:scale(.96); } 60%{ transform:scale(1.04); } 100%{ transform:scale(1); } }

.field:focus-within > label, .field:focus-within > .field__label{ color:var(--gold-3); }
.form__msg.is-ok, .form__msg.is-err{ animation:msgAuf .4s cubic-bezier(.2,.8,.3,1); }
@keyframes msgAuf{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

/* ---------- 47. Nachweise ----------
   Urkunde vorhanden: Link. Urkunde fehlt: steht sichtbar da, statt so zu
   tun, als wäre der Beleg schon erbracht. */
.siegel__doc{
  display:inline-flex; align-items:center; gap:.35em; margin-top:.6rem;
  font-size:.8rem; font-weight:700; color:var(--ink);
}
.siegel__doc svg{ transition:transform .18s; }
.siegel__doc:hover svg{ transform:translate(2px,-2px); }
.siegel__doc--folgt{ color:var(--muted); font-weight:600; }
.siegel__doc--folgt::before{ content:""; width:.55rem; height:.55rem; border-radius:50%; border:1.5px dashed currentColor; flex:none; }
.member__docs{ list-style:none; margin:.55rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.35rem; }
.member__doc{
  display:inline-flex; align-items:center; gap:.3em; font-size:.74rem; font-weight:700;
  padding:.3rem .65rem; border-radius:999px; background:var(--bg-soft); border:1px solid var(--line); color:var(--ink);
}
.member__doc:hover{ border-color:var(--gold); text-decoration:none; }

/* ---------- 47b. Nachweise: Vorschau statt blossem Link ----------
   Ein Link, der ein PDF in einem neuen Tab öffnet, reisst den Besucher aus der
   Seite. Hier steht die erste Seite der Urkunde als Bild da – man sieht schon
   vor dem Klick, dass es eine echte gibt – und der Klick öffnet sie im
   Betrachter der Seite. Ohne JavaScript bleibt es der Link von vorher. */
.nachweis{
  display:flex; align-items:center; gap:.9rem;
  margin-top:1rem; padding:.6rem .9rem .6rem .6rem;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  color:var(--ink); text-decoration:none; cursor:zoom-in;
  transition:border-color .2s, box-shadow .2s, transform .2s;
}
.nachweis:hover{
  border-color:var(--gold); text-decoration:none;
  box-shadow:0 6px 18px rgba(12,21,32,.10); transform:translateY(-1px);
}
.nachweis:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }

.nachweis__bild{
  position:relative; flex:none; width:54px; height:74px; border-radius:6px;
  overflow:hidden; background:var(--bg-soft); border:1px solid var(--line-2);
  box-shadow:0 2px 6px rgba(12,21,32,.12);
}
.nachweis__bild img{
  width:100%; height:100%; object-fit:cover; object-position:top center;
  transition:transform .3s cubic-bezier(.2,.8,.3,1);
}
.nachweis:hover .nachweis__bild img{ transform:scale(1.05); }

/* Die Lupe sagt: hier ist mehr zu sehen. */
.nachweis__lupe{
  position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(12,21,32,.42); color:#fff;
  opacity:0; transition:opacity .22s;
}
.nachweis:hover .nachweis__lupe,
.nachweis:focus-visible .nachweis__lupe{ opacity:1; }
@media (hover:none){ .nachweis__lupe{ opacity:1; background:rgba(12,21,32,.3); } }

.nachweis__txt{ display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.nachweis__txt b{ font-size:.9rem; font-weight:700; line-height:1.3; hyphens:auto; overflow-wrap:break-word; }
/* Der Kasten darf schmaler werden als sein längstes Wort: „Sachkundenachweis“ ist 209 px breit und
   ragte in schmalen Teamkarten über den Rand (gemessen 28.09.2026: 320–380 px und 1000–1070 px
   Fensterbreite). hyphens:auto trennt deutsch, weil <html lang="de"> gesetzt ist. */
.nachweise > .nachweis{ min-width:0; max-width:100%; }
.nachweis__txt em{ font-style:normal; font-size:.78rem; color:var(--muted); }

/* Bei den Personen auf der Teamseite sitzen mehrere nebeneinander. */
.nachweise{ display:flex; flex-wrap:wrap; gap:.6rem; }
.nachweis--klein{ margin-top:.7rem; padding:.45rem .8rem .45rem .45rem; gap:.7rem; }
.nachweis--klein .nachweis__bild{ width:42px; height:58px; }
.nachweis--klein .nachweis__txt b{ font-size:.82rem; }
.nachweis--klein .nachweis__txt em{ font-size:.72rem; }

/* Im dunklen Abschnitt trägt Weiß nicht. */
.section--dark .nachweis{
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); color:#EDF3F8;
}
.section--dark .nachweis__txt em{ color:#9FB4C6; }

@media (max-width:420px){
  .nachweis{ gap:.7rem; }
  .nachweis__txt b{ font-size:.85rem; }
}

/* ---------- 48. Barrierefreiheitserklärung ---------- */
.checks--neutral li::before{ background-color:rgba(12,21,32,.08); }

@media (prefers-reduced-motion:reduce){
  .form__progress i::after{ transition:none; }
  .fset__no{ transition:none; }
  [data-when]:not([hidden]), .chip input:checked + span, .pick input:checked + .pick__box,
  .form__msg.is-ok, .form__msg.is-err{ animation:none; }
}

/* ---------- 49. Seitenkopf: fünf Bereiche ----------
   Vier Bereiche waren ein Artefakt der vier Bilder, kein Grund. Menü,
   Leistungsübersicht und Formular führen fünf – der Seitenkopf jetzt auch.
   Die Gewichtung trägt damit die Reihenfolge (Heizung zuerst, Solar zuletzt)
   statt des Weglassens. */
.heronav{ grid-template-columns:repeat(5, minmax(0,1fr)); }

@media (max-width:760px){
  .heronav{ grid-template-columns:repeat(5, minmax(0,1fr)); gap:.4rem; }
  /* Bei fünf Spalten wird „Bad + WC“ zu breit – auf dem Handy genügt „Bad“. */
  .heronav__lang{ display:none; }
  /* Der Pfeil ist ein Hinweis für die Maus; auf dem Touchscreen erscheint er
     nie und würde nur Breite kosten. */
  .heronav__txt b svg{ display:none; }
  .heronav__txt b{ font-size:.74rem; }
}
@media (max-width:400px){
  .heronav{ gap:.3rem; }
  .heronav__txt b{ font-size:.68rem; letter-spacing:-.02em; }
}


/* ---------- 50. Bewegtbild im Seitenkopf ----------
   Das Video liegt über dem Standbild und blendet erst auf, wenn es
   tatsächlich abspielt. Lädt es nicht – Datensparmodus, altes Gerät,
   abgeschaltetes Autoplay –, bleibt einfach das Standbild stehen und
   niemand merkt, dass etwas fehlt. */
.hero__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 58%;
  opacity:0; transition:opacity 1.1s ease;
}
.hero__video.is-on{ opacity:1; }
@media (max-width:767px){ .hero__video{ display:none; } }

/* Der Vermerk sitzt im Seitenkopf oben rechts. Bei schmalen Fenstern wird er
   zweizeilig und schiebt sich über die Brotkrumen – dort gehört er unter das
   Bild statt darüber. */
/* Im Kopfbild der Referenzseite steht unten nichts – dort darf der Vermerk
   bei schmalen Fenstern nach unten links. Im Kopfbild der Startseite sitzt
   unten die Bereichsleiste; gemessen am 11.09.2026 lag der Vermerk genau
   darauf. Dort bleibt er oben rechts, wo die ersten 55 Pixel frei sind. */
@media (max-width:620px){
  .hero--ref > .imgnote{
    top:auto; bottom:.75rem; right:auto; left:var(--gutter);
    max-width:calc(100% - 2 * var(--gutter));
  }
  .hero--slides > .imgnote{ top:.55rem; right:var(--gutter); }
}
@media (prefers-reduced-motion:reduce){
  .hero__video{ display:none; }
}


/* ---------- 51. Seitenkopf: Bildausschnitt am Handy ----------
   Am Rechner ist der Kopf breiter als hoch – dort schneidet der Browser oben
   und unten ab, die zweite Zahl in object-position steuert das. Am Handy ist
   es umgekehrt: Der Ausschnitt wird hochkant, beschnitten wird links und
   rechts, und die vertikale Angabe hat gar keine Wirkung mehr. Nachgemessen
   am 10.09.2026: Sichtbar sind dort nur 35 bis 47 Prozent der Bildbreite.
   Deshalb bekommt jedes Bild eine eigene waagerechte Angabe fürs Handy –
   sonst steht das Motiv halb außerhalb. */
.hero__slide{ object-position: var(--op-gross, center 58%); }
@media (max-width:760px){
  .hero__slide{ object-position: var(--op-klein, center); }
}