/* ============================================================
   Meisterbetrieb Berbergil – Design V2
   Schriften: Sora (Überschriften) + Inter (Text),selbst gehostet
   ============================================================ */

@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/sora-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/sora-latin-800-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/inter-latin-800-normal.woff2') format('woff2')}

:root{
  --rot:#e2001a;
  --rot-tief:#b30014;
  --rot-soft:rgba(226,0,26,.08);
  --tinte:#161b22;
  --stahl:#5b636e;
  --textgrau:#3d434c;
  --papier:#f5f3ef;
  --porzellan:#f5f3ef;
  --himmel1:#EAF4F8;
  --himmel2:#F6F9F6;
  --wiese1:#DDEBD6;
  --wiese2:#CFE3C5;
  --welle-oben:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 46' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0 0h1440v12C1010 40 430 40 0 12z'/%3E%3C/svg%3E");
  --welle-unten:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 46' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0 46h1440V34C1010 6 430 6 0 34z'/%3E%3C/svg%3E");
  --linie:#e7e4de;
  --kopf:'Sora',system-ui,sans-serif;
  --text:'Inter',system-ui,sans-serif;
  --r-s:10px; --r-m:14px; --r-l:18px;
  --sch-s:0 2px 10px rgba(22,27,34,.06);
  --sch-m:0 10px 30px rgba(22,27,34,.10);
  --sch-l:0 22px 55px rgba(22,27,34,.16);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--text);color:var(--tinte);background:#fff;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block} /* height:auto: verhindert Verzerrung,wenn max-width greift */
a{color:inherit;text-decoration:none}
ul{list-style:none}
[id]{scroll-margin-top:96px} /* Sprungziele nicht unterm festen Menü verstecken (Verschönerung C2) */

h1,h2,h3,.nr,.zahl b{font-family:var(--kopf);letter-spacing:-.02em;line-height:1.15}
h1{font-weight:800;font-size:clamp(2rem,4.6vw,3.4rem)}
h2{font-weight:800;font-size:clamp(1.5rem,3vw,2.15rem)}
h3{font-weight:700;font-size:1.12rem}
p{color:var(--textgrau)}

.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
/* 200%-Schrift (Prüfung 07.08.2026,Punkt 29): Wer die Schrift verdoppelt,soll
   nicht seitlich schieben müssen. break-word greift NUR,wenn ein Wort sonst
   überliefe – bei normaler Größe ändert sich nichts. min-width:0 erlaubt
   Raster-Spalten das Schrumpfen (sonst erzwingt der breiteste Inhalt Überbreite). */
h1,h2,h3,h4,p,li,figcaption,a,b,span{overflow-wrap:break-word}
.hero .wrap>*,.zweispalt>*,footer .wrap>*,.karten>*,.dreier>*,.hero-zeile>*,.kontakt-grid>*,.zahlen>*,.zahl>*,.wahlen>*,.wahl>*,.partner-grid>*,.projekt-grid>*,.cta-block>*,.zertleiste span,.zertleiste span>*{min-width:0}
.sektion{padding:76px 0}
.sektion.grau{background:linear-gradient(180deg,#f8f6f1,#f5f3ef 30%,#f2efe8)} /* Papierton „atmet": hauchzarter Verlauf statt flacher Fläche (Modernisierung Schritt 1) */
.sektion.grau+.sektion.grau{background:#f2efe8} /* Folge-Grau bleibt flach: sonst startet jeder Block seinen eigenen Verlauf und an den Stößen entsteht eine feine Querkante (Sichtprüfung 08.08.,kundendienst) */
/* Weiche Hügelkante an echten Weiß→Grau-Nahtstellen (Modernisierung Schritt 2).
   Steuerklassen setzt der Generator (bzw. jobs.html von Hand): welle-oben = weiße
   Sektion davor,welle-unten = weiße Sektion danach. Nie zwischen zwei Grau-Sektionen,nie direkt vor dem Footer. */
.sektion.grau.welle-oben{padding-top:100px;background:var(--welle-oben) top center/100% 46px no-repeat,linear-gradient(180deg,#f8f6f1,#f5f3ef 30%,#f2efe8)}
.sektion.grau.welle-unten{padding-bottom:100px;background:var(--welle-unten) bottom center/100% 46px no-repeat,linear-gradient(180deg,#f8f6f1,#f5f3ef 30%,#f2efe8)}
.sektion.grau.welle-oben.welle-unten{background:var(--welle-oben) top center/100% 46px no-repeat,var(--welle-unten) bottom center/100% 46px no-repeat,linear-gradient(180deg,#f8f6f1,#f5f3ef 30%,#f2efe8)}
/* Endabnahme 08.08.: Folge-Grau MIT welle-unten behält seine Wellenkante (die
   Flach-Regel oben hat 4 Klassen und überstimmte sonst die 3-Klassen-Wellenregel) */
.sektion.grau+.sektion.grau.welle-unten{background:var(--welle-unten) bottom center/100% 46px no-repeat,#f2efe8}
@media(max-width:640px){ /* Handy: flachere Welle,kompaktere Abstände */
  .sektion.grau.welle-oben{padding-top:68px;background-size:100% 32px,auto}
  .sektion.grau.welle-unten,.sektion.grau+.sektion.grau.welle-unten{padding-bottom:68px;background-size:100% 32px,auto}
  .sektion.grau.welle-oben.welle-unten{background-size:100% 32px,100% 32px,auto}
}
.kopf{margin-bottom:36px;max-width:52em}
/* Mobil: Abschnitts-Abstände kompakter,damit keine Leerlöcher entstehen (Desktop bleibt großzügig) */
@media(max-width:640px){
  .sektion{padding:44px 0}   /* wirkt: Grundregel .sektion steht Zeile 59, also DAVOR */
}
/* Kleine Handys (Sichtprüfung 08.08.,B1): Seitenkopf straffen,damit die Hero-Knöpfe
   im ERSTEN Bild über der Anrufleiste enden – auf lueftung-klima (längster Einleitungstext)
   lagen sie sonst halb dahinter. Nur Feinabstände,kein Umbau. */
@media(max-width:480px){
  .seiten-hero .hero-btns{margin-top:12px}
  /* "Jetzt anrufen" ist hier doppelt: direkt darunter liegt die Anrufleiste mit
     demselben Knopf. Weglassen schafft die Zeile, die "Beratung anfragen" braucht,
     um über der Leiste zu bleiben. */
  .seiten-hero .hero-btns a[href^="tel:"]{display:none}
  .kopf{margin-bottom:24px}  /* wirkt: Grundregel .kopf steht Zeile 77, also DAVOR */
}
/* ACHTUNG (Fund 12.08.2026): Die Abstands-Anweisungen für .hero und .seiten-hero
   standen früher HIER und waren wirkungslos – ihre Grundregeln stehen weiter unten
   (.hero Zeile ~170,.seiten-hero Zeile ~590) und gewinnen bei gleicher Stärke.
   Nur die beiden .hero-btns-Regeln oben haben gewirkt (höhere Spezifität),deshalb
   sah die Abnahme am 08.08. bei den Knöpfen richtig aus. Die Abstände stehen jetzt
   im Block „Handy-Nachbesserungen“ ganz am DATEIENDE. Merksatz: eine Handy-Regel
   gehört immer HINTER die Grundregel,die sie überschreiben soll. */

.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.74rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--stahl);max-width:100%;flex-wrap:wrap;margin-right:-.18em} /* max-width+wrap+Ausgleich des Buchstabenabstands hinter dem letzten Zeichen: nichts ragt bei 200% raus (Punkt 29) */
.eyebrow::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--rot);flex:none}
.kopf h2{margin-top:10px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--kopf);font-weight:700;font-size:.95rem;line-height:1.65;padding:.85em 1.5em;border-radius:var(--r-s);border:2px solid transparent;cursor:pointer;transition:transform .16s,box-shadow .16s,background .16s} /* line-height fest: a- und button-Elemente gleich hoch (Audit A4) */
.btn-rot{background:linear-gradient(135deg,var(--rot),var(--rot-tief));color:#fff;box-shadow:0 8px 22px rgba(226,0,26,.28)}
.btn-rot:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(226,0,26,.34)}
.btn-ghost{border-color:var(--tinte);color:var(--tinte);background:#fff}
/* Hover entschärft (Modernisierung Schritt 19): zartes Rot statt hartem Dunkel-Aufblitzen */
.btn-ghost:hover{background:var(--rot-soft);border-color:rgba(226,0,26,.35);color:var(--rot);transform:translateY(-2px)}
.btn .ico{width:18px;height:18px}

.ico{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- Skip & Fokus ---------- */
.skip{position:absolute;left:-9999px;top:10px;z-index:200;background:#fff;color:var(--rot);font-weight:800;padding:12px 18px;border-radius:var(--r-s);box-shadow:var(--sch-m)}
.skip:focus{left:10px}
#inhalt:focus{outline:none} /* das Sprungziel selbst braucht keinen Rahmen um den ganzen Inhalt */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--rot);outline-offset:2px}
/* Auf dem roten Abschluss-Kasten wäre der rote Ring unsichtbar (gemessen 1,00:1) –
   dort wird er weiß (Prüfung 07.08.2026,Punkt 15) */
.cta-block a:focus-visible,.btn-rot:focus-visible,.callbar .anruf:focus-visible{outline-color:#fff}

/* ---------- Topbar & Header ---------- */
.topbar{background:var(--tinte);color:#fff;font-size:.82rem;padding:9px 0}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:14px}
.topbar a{font-weight:600;display:inline-flex;align-items:center;gap:7px}
.topbar a:hover{color:#ffb3bc}
.topbar .ico{width:15px;height:15px}

header{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--linie)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:13px;padding-bottom:13px}
.logo img{height:84px;width:auto;transition:height .25s}
.nav-desktop{display:none;align-items:center;gap:26px;font-weight:600;font-size:.94rem}
.nav-desktop>li{position:relative}
.nav-desktop a{padding:6px 0;position:relative;white-space:nowrap} /* "Über uns" darf bei 920–1100px nicht zweizeilig werden (Sichtprüfung 08.08.) */
@media(min-width:920px) and (max-width:1120px){.nav-desktop{gap:16px}} /* schmale Desktops: Menü rückt zusammen statt umzubrechen */
.nav-desktop a::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:2.5px;background:var(--rot);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .18s}
.nav-desktop a:hover::after,.nav-desktop a.aktiv::after{transform:scaleX(1)}
.nav-desktop .btn{padding:.6em 1.2em}
.nav-desktop .btn::after{display:none}
.hat-sub:hover .sub,.hat-sub:focus-within .sub{opacity:1;visibility:visible;transform:translateY(0)}
.sub{position:absolute;top:100%;left:-16px;background:#fff;border-radius:var(--r-m);box-shadow:var(--sch-l);padding:10px;min-width:230px;opacity:0;visibility:hidden;transform:translateY(8px);transition:all .18s}
.sub a{display:block;padding:10px 14px;border-radius:8px}
.sub a:hover{background:var(--rot-soft);color:var(--rot)}
.sub a::after{display:none}
.menue-btn{background:none;border:0;cursor:pointer;display:grid;gap:5px;padding:8px;min-width:44px;min-height:44px;place-content:center} /* Klickfläche 44px,Balken bleiben gleich (Audit B4) */
.menue-btn span{width:26px;height:3px;background:var(--tinte);border-radius:2px;transition:.2s}
/* HINWEIS (07.08.2026): Das Sicherheitsnetz "ohne JavaScript bleibt die Navigation
   erreichbar" steckt NICHT mehr hier,sondern als <noscript><style> im Kopf jeder Seite
   (eingesetzt von seo-postprozess.py). Grund: als html:not(.js)-Regel klappte das Menü
   vor dem Skriptstart bei JEDEM Besucher kurz auf – die Seite sprang danach 630px nach
   oben (gemessenes CLS 0,48; Google-Grenze 0,10). <noscript> greift nur ohne JavaScript,also gibt es den Sprung nicht mehr und das Netz bleibt trotzdem gespannt.
   Kein Inline-<script> als Ersatz nehmen: die CSP in livegang/.htaccess blockiert es. */
.nav-mobil{display:none;background:#fff;border-top:1px solid var(--linie);padding:14px 22px 20px}
body.menue-offen{overflow:hidden} /* Bedien-Jagd 16.08.: Seite hinter dem offenen Menue scrollte beim Wischen mit */
/* Paket A1 + Reparatur 07.08.2026: 100dvh statt 100vh – auf echten Handys rechnet 100vh
   mit der GROSSEN Ansicht (ohne Adressleiste),der Kasten wurde dadurch höher als der
   sichtbare Bildschirm und "Jobs"/"Kontakt" waren nicht einmal erwischbar. Das
   padding-bottom hält die letzten Punkte über der Anrufleiste frei. */
.nav-mobil.offen{display:block;max-height:calc(100dvh - 190px);overflow-y:auto;overscroll-behavior:contain;padding-bottom:120px}
.nav-mobil a{display:block;padding:12px 4px;font-weight:600;border-bottom:1px solid var(--linie)}
.nav-mobil .einzug{padding:11px 4px 11px 26px;font-weight:400;color:var(--textgrau)}
.nav-mobil .gruppe{font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--stahl);padding:16px 4px 6px;border-bottom:1px solid var(--linie)}
@media(min-width:920px){.nav-desktop{display:flex}.menue-btn{display:none}}

/* ---------- Hero ---------- */
/* Panorama-Himmel statt Blaupausen-Raster (Modernisierung Schritt 5,zentral mit Kadir
   entschieden): sanfter Himmel-Verlauf,darüber liegt das Deko-SVG (.deko-himmel). */
.hero{background:linear-gradient(180deg,var(--himmel1) 0%,var(--himmel2) 45%,#fff 92%);padding:74px 0 96px;position:relative;overflow:hidden}
.hero .wrap{display:grid;gap:44px;align-items:center;position:relative;z-index:1}
/* Deko-Himmel: Sonne + Wolken,rein dekorativ (aria-hidden,keine Klickziele).
   xMaxYMin hält die Sonne oben rechts. Am Handy übernimmt seit 12.08.2026 die
   schmale Fassung (.dh-schmal) – Regeln im Block „Handy-Nachbesserungen“ am
   Dateiende. Druck blendet die Deko ganz aus (@media print). */
.deko-himmel{position:absolute;inset:0;pointer-events:none;z-index:0}
.deko-himmel svg{width:100%;height:100%;display:block}
@media(min-width:920px){.hero .wrap{grid-template-columns:1.05fr .95fr}}
.hero h1{margin:16px 0 18px}
.hero h1 em{font-style:normal;color:var(--rot)}
.hero p{font-size:1.08rem;max-width:33em}
.hero-bild{position:relative}
.hero-bild img{border-radius:var(--r-l);box-shadow:var(--sch-l);aspect-ratio:4/3;object-fit:cover;width:100%}
/* Pastell-Kissen statt rotem Rahmen-Eck (Modernisierung Schritt 6): ruhige,weich gerundete Farbflaeche links unten hinter dem Foto,kein wilder Blob. */
.hero-bild::after{content:"";position:absolute;left:-18px;bottom:-18px;width:85%;height:85%;background:#FBE5E8;border-radius:30px;z-index:-1}
.hero-tag{position:absolute;top:16px;left:16px;background:linear-gradient(135deg,var(--rot),var(--rot-tief));color:#fff;font-family:var(--kopf);font-weight:700;font-size:.8rem;padding:.5em 1em;border-radius:999px;box-shadow:0 8px 20px rgba(226,0,26,.35)}
.hero-badge{position:absolute;right:18px;bottom:-20px;background:#fff;border-radius:var(--r-m);box-shadow:var(--sch-l);padding:14px 20px;display:grid;gap:2px;text-align:center}
.hero-badge b{font-family:var(--kopf);font-size:1.3rem;color:var(--tinte)}
.hero-badge span{font-size:.74rem;font-weight:600;color:var(--stahl)}

/* ---------- Startseiten-Hero: EIN Foto statt Collage (Kadir,06.08.2026) ----------
   Kadir fand den Bildbereich mit Bild-im-Bild unruhig ("sieht komisch aus").
   Entschieden wurde Fassung R: ein einzelnes Foto in SEINEN Proportionen,.hc-*) bleiben ungenutzt stehen,damit man jederzeit zurück kann. */
.hero-solo{display:grid;gap:14px;align-self:center}
.hero-solo::after{display:none}     /* Farbpunkte aus */
.hero-solo img{display:block;width:100%;height:auto;
  aspect-ratio:1508/704;                 /* ECHTES Verhaeltnis des Fotos: Platz steht
                                            beim Laden fest -> kein Springen (Audit
                                            20.08.); hebt zugleich das 4:3 auf. Bei
                                            Foto-Tausch MIT neuen Massen nachziehen! */
  object-fit:initial;                    /* kein cover -> Browser beschneidet nicht nach */
  border-radius:var(--r-l);box-shadow:var(--sch-l)}
.hero-solo .hero-tag{top:16px;left:16px;z-index:2}
/* Drei Zahlen unter dem Foto – füllt den Platz,den vorher das zweite Foto belegte */
.hero-zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,6.5em),1fr));gap:2px;background:var(--linie); /* auto-fit: bei 200% Schrift stapeln sich die drei Kacheln statt überzulaufen (Punkt 29) */
  border-radius:var(--r-m);overflow:hidden;box-shadow:var(--sch-s)}
.hero-zahlen>*{background:#fff;padding:15px 12px;text-align:center;display:block}
.hero-zahlen b{display:block;font-family:var(--kopf);font-weight:800;font-size:1.2rem;color:var(--tinte)}
.hero-zahlen span{display:block;font-size:.75rem;font-weight:600;color:var(--stahl);margin-top:2px;line-height:1.3}
.hero-zahlen a:hover b{color:var(--rot)}
@media(max-width:640px){
  .hero-zahlen b{font-size:1.04rem}
  .hero-zahlen>*{padding:12px 8px}
}
/* Hero mittig ausrichten,damit das Foto nicht oben klebt */
.hero .wrap{align-items:center}

/* ---------- Zertleiste ---------- */
/* Pastell-Band mit Farbkreisen statt weisser Leiste mit Linien und roten
   Vor-Punkten (Modernisierung Schritt 7): jeder Eintrag traegt einen kleinen
   Elementfarben-Kreis mit weissem Mini-Symbol (.zert-kreis,aria-hidden). */
.zertleiste{background:var(--papier);padding:20px 0}
.zertleiste .wrap{display:flex;gap:14px 40px;justify-content:center;flex-wrap:wrap;font-family:var(--kopf);font-weight:700;font-size:.9rem;color:var(--tinte)}
.zertleiste span{display:inline-flex;align-items:center;gap:10px}
.zertleiste a{color:var(--rot-tief);font-weight:700} /* rot-tief: AA auf Papierton (Audit 21.08.) */
.zert-kreis{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none;box-shadow:0 4px 10px rgba(22,27,34,.14)}
.zert-kreis svg{width:14px;height:14px;display:block}

/* ---------- Hersteller-Logo-Band ---------- */
/* Sitzt direkt unter der Zertleiste: schlanker weisser Streifen mit den
   Hersteller-Logos in Originalfarben. Die Zertleiste nennt dafuer KEINE
   Herstellernamen mehr (sonst stand dieselbe Aussage zweimal untereinander).
   Logos sind SVG (Wortmarken) -> auf jedem Bildschirm scharf. */
.logoband{background:#fff;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);padding:26px 0}
.logoband .wrap{display:flex;flex-direction:column;align-items:center;gap:15px}
.lb-titel{font-family:var(--kopf);font-weight:800;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stahl);margin:0;text-align:center}
.lb-logos{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:18px 46px;list-style:none;margin:0;padding:0}
.lb-logos li{display:flex;align-items:center;justify-content:center}
.lb-logos img{height:34px;width:auto;max-width:170px;object-fit:contain;display:block}
.lb-fuss{font-size:.84rem;color:var(--stahl);margin:0;text-align:center}
.lb-fuss a{color:var(--rot);font-weight:800}
@media(max-width:640px){
  .logoband{padding:20px 0}
  .lb-logos{gap:16px 30px}
  .lb-logos img{height:27px;max-width:130px}
}

/* ---------- Leistungs-Karten ---------- */
.karten{display:grid;gap:22px}
@media(min-width:640px){.karten{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.karten{grid-template-columns:repeat(4,1fr)}}
.karte{background:#fff;border-radius:var(--r-l);padding:28px 24px;box-shadow:var(--sch-s);display:flex;flex-direction:column;gap:12px;transition:transform .18s,box-shadow .18s}
.karte:hover{transform:translateY(-5px);box-shadow:var(--sch-m)}
.karte svg{width:54px;height:54px;stroke:var(--rot);fill:none;stroke-width:1.7;background:var(--rot-soft);border-radius:var(--r-m);padding:12px}
/* Vier Gewerke in ihren Elementfarben – Darstellung wie im Signet:
   gefüllter Farbkreis mit weißem Symbol (Palette: Sonne/Feuer/Wasser/Luft).
   *= statt =,damit es auch in der Ein-Datei-Vorschau greift (dort wird heizung.html zu #heizung) */
.karte[href*="heizung"] svg,.karte[href*="bad-sanitaer"] svg,.karte[href*="solar"] svg,.karte[href*="lueftung-klima"] svg{stroke:#fff;border-radius:50%}
.karte[href*="heizung"] svg{background:#E2001A;box-shadow:0 10px 22px rgba(226,0,26,.30)}
.karte[href*="bad-sanitaer"] svg{background:#1E3A5F;box-shadow:0 10px 22px rgba(30,58,95,.30)}
.karte[href*="solar"] svg{background:#EE9C0C;box-shadow:0 10px 22px rgba(238,156,12,.30)}
.karte[href*="lueftung-klima"] svg{background:#37839B;box-shadow:0 10px 22px rgba(55,131,155,.30)}
/* Gewerke-Karten im Saison-Karten-Kleid: Farbhauch von links + feine 1px-Umrandung
   je Elementfarbe (Modernisierung Schritt 4). Karten OHNE href (z. B. jobs) bleiben weiß. */
.karte[href*="heizung"]{background:linear-gradient(115deg,rgba(226,0,26,.06),rgba(226,0,26,0) 60%),#fff;border:1px solid rgba(226,0,26,.16)}
.karte[href*="bad-sanitaer"]{background:linear-gradient(115deg,rgba(30,58,95,.06),rgba(30,58,95,0) 60%),#fff;border:1px solid rgba(30,58,95,.16)}
.karte[href*="solar"]{background:linear-gradient(115deg,rgba(238,156,12,.07),rgba(238,156,12,0) 60%),#fff;border:1px solid rgba(238,156,12,.2)}
.karte[href*="lueftung-klima"]{background:linear-gradient(115deg,rgba(55,131,155,.07),rgba(55,131,155,0) 60%),#fff;border:1px solid rgba(55,131,155,.2)}
.karte p{font-size:.94rem;flex:1}

.hinweis-balken{margin-top:26px;background:var(--tinte);color:#fff;border-radius:var(--r-l);padding:22px 28px;display:flex;gap:16px 22px;align-items:center;justify-content:flex-start;flex-wrap:wrap} /* flex-start statt space-between: riss auf Tablet Icon und Titel auseinander (Audit 21.08.) */
/* Mobil: alles linksbündig untereinander statt auseinandergezogen */
@media(max-width:640px){.hinweis-balken{justify-content:flex-start;padding:18px 20px;gap:10px 12px}}
.hinweis-balken b{font-family:var(--kopf)}
.hinweis-balken a{color:#ff8d9a;font-weight:800}
.hinweis-balken a:hover{color:#fff}

/* ---------- Ablauf ---------- */
/* „Warmes Grau“ (Kadirs Wahl 22.07.2026): helle gerundete Fläche,alles mittig */
/* Mini-Landschaft (Modernisierung Schritt 8): Himmel-Hauch oben,flache Wiesenkante
   unten (abgesegneter Panorama-Ton Wiese #DDEBD6),Grund bleibt das warme Papier */
.ablauf{background:linear-gradient(180deg,var(--himmel1),rgba(234,244,248,0) 36%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath fill='%23DDEBD6' fill-opacity='.8' d='M0 40V24C240 12 480 8 720 14S1200 22 1440 12V40z'/%3E%3C/svg%3E") bottom center/100% 40px no-repeat var(--papier);border-radius:clamp(24px,4vw,40px);margin:0 12px;padding:64px 0;text-align:center}
.ablauf .intro{margin:8px auto 0}
@media(max-width:640px){.ablauf{margin:0 8px;padding:44px 0}}
.schritte{display:grid;gap:34px;margin-top:44px}
@media(min-width:820px){.schritte{grid-template-columns:repeat(3,1fr)}}
/* Gestrichelter roter Weg zwischen den drei Schritten (Modernisierung Schritt 8):
   NUR im Ablauf der Startseite (.ablauf .schritte) – die Schritt-Listen auf
   heizung/bad-sanitaer nutzen .schritte OHNE .ablauf-Eltern und bleiben ohne Linie.
   Höhe nachgemessen: 32px Kartenpolster + 27px halber Nummern-Kreis = Mitte bei 59px. */
@media(min-width:820px){
  .ablauf .schritte{position:relative}
  .ablauf .schritte::before{content:"";position:absolute;left:12%;right:12%;top:57.5px;border-top:3px dashed rgba(226,0,26,.25)}
  .ablauf .schritt{position:relative;z-index:1}
}
/* Variante „Alles mittig“ (Kadirs Wahl 22.07.2026): Kreis oben,alles zentriert */
/* Puls-Effekt (Kadirs Wahl 22.07.2026): weiche Wellen pulsieren sanft nach außen */
.schritt .nr{width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,var(--rot),var(--rot-tief));color:#fff;display:grid;place-content:center;font-size:1.5rem;font-weight:800;margin-bottom:16px;box-shadow:0 0 0 9px rgba(226,0,26,.13),0 0 0 18px rgba(226,0,26,.05),0 8px 20px rgba(226,0,26,.3);animation:nr-puls 2.8s ease-in-out infinite}
.schritt:nth-child(2) .nr{animation-delay:.45s}
.schritt:nth-child(3) .nr{animation-delay:.9s}
/* Heizung (6 Schritte) und Bad (5): Welle läuft bis zum Ende durch (Verschönerung C8) */
.schritt:nth-child(4) .nr{animation-delay:1.35s}
.schritt:nth-child(5) .nr{animation-delay:1.8s}
.schritt:nth-child(6) .nr{animation-delay:2.25s}
@keyframes nr-puls{
  0%,100%{box-shadow:0 0 0 8px rgba(226,0,26,.13),0 0 0 16px rgba(226,0,26,.05),0 8px 20px rgba(226,0,26,.3)}
  50%{box-shadow:0 0 0 13px rgba(226,0,26,.10),0 0 0 26px rgba(226,0,26,.04),0 8px 20px rgba(226,0,26,.3)}
}
/* Wer Bewegung reduziert hat,bekommt die ruhigen Wellen ohne Animation */
@media(prefers-reduced-motion:reduce){.schritt .nr{animation:none}}
.schritt h3{margin:0 0 10px}
.schritt p{font-size:.95rem}
/* Basisregel VOR der Mobil-Regel,damit die Kompakt-Polsterung greift (Audit A5) */
.schritt{background:#fff;border-radius:var(--r-l);padding:32px 26px;box-shadow:var(--sch-s);display:flex;flex-direction:column;align-items:center;text-align:center}
/* Mobil: kompakte Kästen */
@media(max-width:819px){
  .schritte{gap:14px;margin-top:30px}
  .schritt{padding:22px 20px}
  .schritt .nr{width:46px;height:46px;font-size:1.25rem;margin-bottom:12px}
}

/* ---------- Vorher/Nachher ---------- */
.ba{position:relative;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sch-m);max-width:860px;margin:0 auto;--pos:50%}
.ba img{width:100%;aspect-ratio:16/10;object-fit:cover;user-select:none;pointer-events:none}
.ba .oben{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba .oben img{position:absolute;inset:0;height:100%}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize}
.ba:has(input:focus-visible){outline:3px solid var(--rot);outline-offset:3px}
.ba .label{position:absolute;top:14px;font-family:var(--kopf);font-size:.72rem;font-weight:700;letter-spacing:.1em;background:rgba(22,27,34,.82);color:#fff;padding:.45em .9em;border-radius:999px;z-index:2}
.ba .label.v{left:14px}.ba .label.n{right:14px}
.ba-hinweis{text-align:center;font-size:.8rem;color:var(--stahl);margin-top:14px}

/* ---------- Dreier / Versprechen ---------- */
.dreier{display:grid;gap:22px}
@media(min-width:820px){.dreier{grid-template-columns:repeat(3,1fr)}}
.punkt{background:#fff;border-radius:var(--r-l);padding:26px;box-shadow:var(--sch-s);transition:transform .18s,box-shadow .18s;overflow:clip} /* clip: Rundungsreste bei 200% Schrift bleiben in der Karte (Punkt 29) */
.punkt:hover{transform:translateY(-3px);box-shadow:var(--sch-m)}
.punkt h3{display:flex;gap:10px;align-items:center;margin-bottom:8px;overflow-wrap:anywhere} /* Titel bleibt NEBEN dem Icon (Kadir-Einwand 08.08.) und bricht notfalls im Wort statt unter das Icon zu rutschen – deckt auch 200% Schrift ab (Punkt 29) */
/* Pastell-Medaillon hinterm Icon (Modernisierung Schritt 17) – NUR das Medaillon,die Karte selbst bleibt bewusst ohne Farbhauch */
.punkt .ico{stroke:var(--rot);width:42px;height:42px;padding:10px;background:var(--rot-soft);border-radius:50%}
.punkt p{font-size:.94rem}

/* ---------- Zahlen ---------- */
.zahlen{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;text-align:center;overflow-x:clip;overflow-y:visible} /* clip nur seitlich: der Deko-Kreis (::before,right:-18px) darf bei 200% nicht die Seite verbreitern (Punkt 29),sein oberer Rand (top:-12px) darf aber NICHT abgeschnitten werden (Kadir-Fund 12.08.) */
@media(min-width:820px){.zahlen{grid-template-columns:repeat(3,1fr)}} /* 3 Kennzahlen = 3 Spalten,symmetrisch (Audit A3) */
.zahl b{display:block;font-size:2.6rem;font-weight:800;color:var(--rot)} /* nowrap entfernt (Punkt 29): bei 200% Schrift darf "15 Jahre" zweizeilig werden,normal passt es einzeilig */
/* Weiche Pastell-Sonnen hinter den Zahlen (Modernisierung Schritt 9) – bewusst OHNE
   Gewerke-Farbpunkte in der Unterzeile (Waechter: Punkte-Trennzeilen-Muster) */
.zahl b{position:relative;display:inline-block}
.zahl span{display:block} /* Unterzeile bleibt eigene Zeile,obwohl b jetzt inline-block ist */
.zahl b::before{content:"";position:absolute;width:54px;height:54px;border-radius:50%;top:-12px;right:-18px;z-index:-1}
.zahlen .zahl:nth-child(1) b::before{background:rgba(238,156,12,.14)}
.zahlen .zahl:nth-child(2) b::before{background:rgba(226,0,26,.08)}
.zahlen .zahl:nth-child(3) b::before{background:rgba(55,131,155,.12)}
@media(max-width:420px){.zahl b{font-size:2rem}}
.zahlen > .zahl:last-child:nth-child(odd){grid-column:1/-1}
@media(min-width:820px){.zahlen > .zahl:last-child:nth-child(odd){grid-column:auto}}
.zahl span{font-weight:600;color:var(--stahl);font-size:.9rem}

/* ---------- Kundenstimmen / Google ---------- */
.stimmen{display:grid;gap:22px;margin-top:34px}
@media(min-width:820px){.stimmen{grid-template-columns:repeat(3,1fr)}}
.stimme{background:#fff;border-radius:var(--r-l);padding:24px;box-shadow:var(--sch-s);display:flex;flex-direction:column;gap:10px}
/* Sterne: Sonnen-Orange BLEIBT (Kadir 28.08.2026,Variante C),bekommt aber
   eine dunkle Kante. Die Fuellung allein hat auf Weiss nur 2,23:1 und verstiess
   damit gegen Regel 9. Die Sterne sind ein BILD-Element (Bewertung),kein
   Fliesstext - dafuer verlangt die Richtlinie 3,0:1 fuer die erkennbare KANTE.
   #9A6A0A auf Weiss = 4,73:1,also erfuellt. paint-order sorgt dafuer,dass die
   Kante HINTER der Fuellung liegt und die Sternform nicht auffrisst. */
.sterne{color:#EE9C0C;letter-spacing:2px;-webkit-text-stroke:.55px #9A6A0A;paint-order:stroke fill} /* Sonnen-Orange statt Fremdton (Kadir,Variante B,07.08.2026) */
.stimme p{font-size:.94rem;flex:1}
.stimme .wer{font-weight:800;font-size:.86rem;color:var(--stahl)}
.gb-livetag{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:800;color:var(--stahl)}
.gb-livetag::before{content:"";width:8px;height:8px;border-radius:50%;background:#1db954;animation:puls 1.6s infinite}
@keyframes puls{50%{opacity:.4}}
.gmaps-box{background:#fff;border-radius:var(--r-l);box-shadow:var(--sch-m);padding:30px;text-align:center;max-width:760px;margin:34px auto 0} /* Sonnen-Orange (Variante B) */
.gmaps-box b{font-family:var(--kopf);font-size:1.5rem;display:block;margin-top:6px}
.gmaps-box p{margin:8px 0 18px}
.gmaps-box iframe{width:100%;border:0;border-radius:var(--r-m);margin-top:14px}
.stimmen-cta{text-align:center;margin-top:30px}

/* ---------- Kontaktblock ---------- */
.kontakt-grid{display:grid;gap:26px;align-items:start}
@media(min-width:920px){.kontakt-grid{grid-template-columns:1fr 1fr}}
.kbox{background:#fff;border-radius:var(--r-l);padding:30px;box-shadow:var(--sch-s)}
.adresse{line-height:1.9}
.adresse .tel{font-family:var(--kopf);font-size:1.5rem;font-weight:800;color:var(--rot)}
.zeiten{margin-top:6px}
.zeiten h3{margin-bottom:10px}
.zeiten div{display:flex;justify-content:space-between;border-bottom:1px dashed var(--linie);padding:9px 2px;font-size:.94rem}
.stoer{margin-top:14px;font-size:.9rem;background:var(--rot-soft);border:1px solid rgba(226,0,26,.18);padding:12px 14px;border-radius:var(--r-s)}
.anfahrt-bild{width:100%;height:auto;border-radius:var(--r-m);margin-bottom:8px} /* Foto ist jetzt selbst 4:3 zugeschnitten – kein Beschnitt mehr,das "B" bleibt ganz (Prüfung 07.08.2026,W6) */
.anfahrt-hinweis{display:block;font-size:.8rem;color:var(--stahl);margin-bottom:14px}

/* ---------- Formulare ---------- */
.formular{display:grid;gap:16px}
.formular label{font-weight:800;font-size:.88rem;display:block;margin-bottom:5px}
.formular input,.formular textarea{width:100%;font:inherit;font-size:max(1rem,16px);padding:.8em 1em;border:1.5px solid #d5d1c9;border-radius:var(--r-s);background:#fff;transition:border-color .15s,box-shadow .15s}
/* font-size max(1rem,16px) NACH font:inherit (Kadir-Fund 12.08.,iPhone):
   iOS zoomt die ganze Seite heran,sobald ein fokussiertes Feld unter 16px
   Schrift hat - die feste Anrufleiste wirkt dann riesig. Solo-Seite hat 16px,aber in Einbettungen (z. B. der Vorschau-Huelle von claude.ai mit 14px
   Grundschrift) erbten die Felder zu wenig. rem haengt am Wurzelelement und
   ist gegen solche Huellen immun. */
/* B1 (Verbesserungsrunde 07.08.2026,Kadir-Freigabe): normales Tippen = Wasser-Blau,Rot ist ab jetzt EXKLUSIV die Fehlerfarbe (aria-invalid). Vorher wirkte schon das
   Ausfüllen wie eine Fehlermeldung (dreifach roter Rahmen). */
.formular input:focus,.formular textarea:focus{border-color:#1E3A5F;box-shadow:0 0 0 4px rgba(30,58,95,.14)}
.formular input:focus-visible,.formular textarea:focus-visible{outline-color:#1E3A5F}
/* Fehlerzustand gewinnt auch im Fokus (Rot bleibt eindeutig) */
.formular [aria-invalid="true"]:focus,.formular [aria-invalid="true"]:focus-visible{border-color:var(--rot);box-shadow:0 0 0 3px rgba(226,0,26,.12);outline-color:var(--rot)}
.formular .btn{justify-self:start}
.demo-hinweis{font-size:.8rem;color:var(--stahl)}
.hp{position:absolute;left:-9999px}
.feld-tipp{display:block;font-size:.8rem;color:var(--stahl);margin-top:5px}
.foto-feld{width:100%;font:inherit;padding:.7em .9em;border:1.5px dashed #cfcabf;border-radius:var(--r-s);margin-top:5px;background:var(--papier)}
.foto-feld:focus{outline:2px solid var(--rot)}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:0 auto}
.faq details{background:#fff;border-radius:var(--r-m);box-shadow:var(--sch-s);margin-bottom:12px;overflow:hidden}
.faq summary{cursor:pointer;font-weight:700;font-family:var(--kopf);font-size:.98rem;padding:18px 22px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;transition:color .15s}
.faq summary:hover{color:var(--rot)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.5rem;color:var(--rot);transition:transform .2s;flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 22px 20px;font-size:.95rem}
.faq details[open] p{animation:einblenden .25s ease} /* Antwort gleitet weich auf (Verschönerung C6) */

/* ---------- CTA-Block ---------- */
.cta-block{background:linear-gradient(135deg,var(--rot),var(--rot-tief));border-radius:var(--r-l);color:#fff;padding:44px 36px;display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;box-shadow:0 20px 45px rgba(226,0,26,.3)}
.cta-block h2{color:#fff;flex:1 0 100%} /* Überschrift eigene Zeile – vorher fiel auf 5 Seiten der Knopf allein in Zeile 3 (Prüfung 07.08.2026,W2) */
.cta-block p{color:#fff3f4;flex:1 1 380px} /* Text teilt sich die Zeile mit Nummer+Knopf,statt sie zu verdrängen (W2) */
.cta-block .btn{background:#fff;color:var(--rot);box-shadow:none}
.cta-block .btn:hover{transform:translateY(-2px)}
.cta-block .tel-gross{font-family:var(--kopf);font-size:1.35rem;font-weight:800;color:#fff;display:inline-flex;gap:10px;align-items:center}

/* ---------- Galerie & Referenzen ---------- */
.galerie{display:grid;gap:20px}
@media(min-width:640px){.galerie{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.galerie{grid-template-columns:repeat(3,1fr)}}
.galerie figure{background:#fff;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sch-s);border:1px solid rgba(22,27,34,.06);transition:transform .16s,box-shadow .16s}
.galerie figure:hover{transform:translateY(-4px);box-shadow:var(--sch-m)}
/* Passepartout: Foto sitzt wie gerahmt mit weißem Rand in der Karte (Modernisierung Schritt 12) */
.foto-rahmen{display:block;margin:10px 10px 0;border-radius:calc(var(--r-l) - 6px);overflow:hidden}
.galerie img{aspect-ratio:4/3;object-fit:cover;width:100%;height:auto;display:block}
.galerie figcaption{padding:14px 18px;font-weight:700;font-family:var(--kopf);font-size:.95rem}
.galerie figcaption small{display:block;font-family:var(--text);font-weight:400;color:var(--stahl);margin-top:2px}
/* Foto-Platzhalter als Mini-Panorama: Himmel oben,Wiese unten – „hier wächst etwas" (Modernisierung Schritt 13) */
.foto-folgt{aspect-ratio:4/3;display:grid;place-content:center;text-align:center;gap:10px;background:linear-gradient(180deg,var(--himmel1),var(--himmel2) 68%,var(--wiese1) 68%,var(--wiese2));border:1px solid rgba(22,27,34,.08);border-radius:var(--r-l);color:var(--tinte);font-weight:600;font-size:.9rem;padding:20px;position:relative;overflow:hidden}
.foto-folgt .ico{width:34px;height:34px;margin:0 auto;stroke:#b8b2a6}
.foto-folgt .ff-deko{position:absolute;top:8px;left:0;width:100%;height:auto;pointer-events:none}
.foto-folgt .ff-signet{display:grid;place-content:center;margin:0 auto;background:#fff;border-radius:50%;padding:10px;box-shadow:var(--sch-s);position:relative}
.foto-folgt img{width:48px;height:48px;display:block}

.projekt-grid{display:grid;gap:18px} /* Karten einer Reihe gleich hoch (Audit A2) */
@media(min-width:640px){.projekt-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.projekt-grid{grid-template-columns:repeat(3,1fr)}}
.projekt-karte{background:linear-gradient(180deg,rgba(226,0,26,.05),rgba(226,0,26,0) 22%),#fff;border:1px solid rgba(226,0,26,.14);border-radius:var(--r-l);padding:24px;box-shadow:var(--sch-s);display:flex;flex-direction:column}
.projekt-karte .ort{font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--stahl)}
.projekt-karte h3{margin:8px 0 12px}
.projekt-karte ul{list-style:none}
.projekt-karte li{font-size:.9rem;color:var(--textgrau);padding-left:18px;position:relative;margin-bottom:6px}
.projekt-karte li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--rot)}
.projekt-fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;margin-top:16px} /* auto-fill: Kacheln bleiben klein (K2) · Fotos folgen direkt dem Text statt am Kartenboden zu kleben – vorher klaffte in kurzen Karten ein Loch in der Mitte (Kadir-Einwand 08.08.2026) */
/* Mini-Passepartout für die Projekt-Vorschaufotos (Modernisierung Schritt 12).
   Zoom liegt auf der ganzen gerahmten Kachel,damit der weiße Rand beim
   Hover sichtbar bleibt (QA-Nacharbeit Paket 4). */
.projekt-fotos a{display:block;cursor:zoom-in;border-radius:var(--r-s);border:1px solid rgba(22,27,34,.08);background:#fff;padding:3px;overflow:hidden;transition:transform .2s}
.projekt-fotos img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:7px;display:block}
.projekt-fotos a:hover{transform:scale(1.05)}

/* ---------- Zertifikate ---------- */
.zert-link{display:block;cursor:zoom-in;background:#fff;border-radius:var(--r-m);overflow:hidden;box-shadow:var(--sch-s);transition:transform .16s,box-shadow .16s}
.zert-link:hover{transform:translateY(-4px);box-shadow:var(--sch-m)}
.zert-link img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}

.lightbox{position:fixed;inset:0;background:rgba(15,18,23,.9);display:none;place-content:center;z-index:120;padding:24px;cursor:zoom-out}
.lightbox.offen{display:grid;animation:einblenden .25s ease} /* Großansicht blendet sanft ein (Verschönerung C7) */
.lightbox img{max-width:min(92vw,1000px);max-height:88vh;border-radius:var(--r-m);box-shadow:var(--sch-l)}
.lightbox .schliessen{position:absolute;top:16px;right:16px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:1.5rem;line-height:1;display:grid;place-content:center;cursor:pointer}
.lightbox .schliessen:hover{background:rgba(255,255,255,.3)}
/* B2 (07.08.2026): Blättern in der Großansicht – Pfeile + Zähler */
.lightbox .lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:var(--tinte);font-size:1.7rem;font-weight:700;line-height:1;display:grid;place-content:center;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.lightbox .lb-nav:hover{background:#fff}
.lightbox .lb-zurueck{left:12px}
.lightbox .lb-weiter{right:12px}
.lightbox .lb-nav[hidden]{display:none}
.lightbox .lb-zaehler{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);color:#fff;font-family:var(--kopf);font-weight:700;font-size:.95rem;text-shadow:0 1px 6px rgba(0,0,0,.6)}

/* ---------- Interaktives Berbergil-Haus (Team-Sektion) ---------- */
.haus-team{align-items:center}
.team-haus{width:100%;max-width:440px;margin:0 auto}
.team-haus .haus-linie{stroke:var(--tinte);stroke-width:3;stroke-linejoin:round;fill:none}
.team-haus .zone-flaeche{fill:#fff;cursor:pointer;transition:fill .25s}
.team-haus .elem-kreis{transition:transform .25s;transform-origin:center;transform-box:fill-box}
.team-haus .elem-icon{stroke:#fff;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.team-haus .haus-zone{cursor:pointer}
.team-haus .haus-zone:hover .zone-flaeche{fill:rgba(22,27,34,.05)}
.team-haus .haus-zone.aktiv[data-team="feuer"] .zone-flaeche{fill:rgba(226,0,26,.12)}
.team-haus .haus-zone.aktiv[data-team="wasser"] .zone-flaeche{fill:rgba(30,58,95,.12)}
.team-haus .haus-zone.aktiv[data-team="sonne"] .zone-flaeche{fill:rgba(238,156,12,.16)}
.team-haus .haus-zone.aktiv[data-team="luft"] .zone-flaeche{fill:rgba(55,131,155,.14)}
.team-haus .haus-zone.aktiv .elem-kreis{transform:scale(1.25)}
.team-tipp{font-weight:800;color:var(--stahl);font-size:.9rem;margin-bottom:14px}
.team-text{background:linear-gradient(115deg,rgba(226,0,26,.07),rgba(226,0,26,0) 60%),#fff;border:1px solid rgba(226,0,26,.16);border-radius:var(--r-m);box-shadow:var(--sch-s);padding:20px 22px}
.team-text[data-team="wasser"]{background:linear-gradient(115deg,rgba(30,58,95,.08),rgba(30,58,95,0) 60%),#fff;border-color:rgba(30,58,95,.18)}
.team-text[data-team="sonne"]{background:linear-gradient(115deg,rgba(238,156,12,.10),rgba(238,156,12,0) 60%),#fff;border-color:rgba(238,156,12,.25)}
.team-text[data-team="luft"]{background:linear-gradient(115deg,rgba(55,131,155,.09),rgba(55,131,155,0) 60%),#fff;border-color:rgba(55,131,155,.22)}
.team-text h3{margin-bottom:6px}
.team-text + .team-text{margin-top:14px}
/* Es wird immer nur ein Text gezeigt. Umgedreht am 07.08.2026: früher hing das an der
   js-Klasse,die script.js erst am Seitenende setzt – bis dahin standen ALLE Texte da
   und die Seite sprang danach zusammen. Ohne JavaScript stellt <noscript> alles zurück. */
.team-text{display:none;margin-top:0}
.team-text.aktiv{display:block}
.team-zur-anfrage{margin-top:16px}
/* ---------- Saison-Startseite: der Saison-Tipp passt sich dem Kalender an ---------- */
/* ohne JavaScript keine halb leere Sektion – siehe <noscript> im Seitenkopf */
.saison-band{padding:40px 0 0}
.saison-karte{display:none}
.saison-karte.aktiv{display:flex;align-items:center;gap:24px;border-radius:var(--r-l);box-shadow:var(--sch-s);padding:26px 30px;background:linear-gradient(115deg,rgba(226,0,26,.08),rgba(226,0,26,0) 60%),#fff;border:1px solid rgba(226,0,26,.16)}
.saison-karte[data-saison="fruehling"].aktiv{background:linear-gradient(115deg,rgba(238,156,12,.11),rgba(238,156,12,0) 60%),#fff;border-color:rgba(238,156,12,.28)}
.saison-karte[data-saison="sommer"].aktiv{background:linear-gradient(115deg,rgba(55,131,155,.10),rgba(55,131,155,0) 60%),#fff;border-color:rgba(55,131,155,.25)}
.saison-kreis{flex:0 0 auto;width:58px;height:58px;border-radius:50%;display:grid;place-content:center;background:#E2001A;box-shadow:0 10px 22px rgba(226,0,26,.30)}
.saison-karte[data-saison="fruehling"] .saison-kreis{background:#EE9C0C;box-shadow:0 10px 22px rgba(238,156,12,.38)}
.saison-karte[data-saison="sommer"] .saison-kreis{background:#37839B;box-shadow:0 10px 22px rgba(55,131,155,.38)}
.saison-kreis svg{width:28px;height:28px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.saison-text{flex:1}
.saison-text h2{font-size:1.3rem;margin:4px 0 6px}
.saison-text p{margin:0;font-size:.95rem}
.saison-text p a{color:var(--rot-tief);font-weight:800} /* rot-tief: AA auf Farbwasch (Audit 21.08.) */
.saison-aktion{flex:0 0 auto}
@media(max-width:820px){
  .saison-karte.aktiv{flex-direction:column;align-items:flex-start;gap:14px;padding:22px}
}
.partner-grid{display:grid;gap:16px;grid-template-columns:repeat(2,1fr);align-items:stretch}
@media(min-width:760px){.partner-grid{grid-template-columns:repeat(3,1fr)}}
.partner-grid figure{background:#fff;border-radius:var(--r-m);box-shadow:var(--sch-s);padding:20px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;min-height:150px;transition:transform .16s,box-shadow .16s}
.partner-grid figure:hover{transform:translateY(-4px);box-shadow:var(--sch-m)}
.partner-grid img{width:100%;max-width:160px;height:56px;object-fit:contain;filter:grayscale(1);opacity:.75;transition:filter .2s,opacity .2s}
.partner-grid figure:hover img,.partner-grid img:hover{filter:none;opacity:1}
.partner-grid figcaption{font-size:.8rem;font-weight:600;color:var(--stahl);line-height:1.35}

/* ---------- Unterseiten ---------- */
/* Seitenkopf mit Panorama-Himmel (Modernisierung Schritt 5,wie .hero) */
.seiten-hero{background:linear-gradient(180deg,var(--himmel1) 0%,var(--himmel2) 45%,#fff 92%);padding:60px 0 48px;position:relative;overflow:hidden}
.seiten-hero .wrap{position:relative;z-index:1}
.seiten-hero h1{margin-top:12px}
.seiten-hero p{max-width:44em;margin-top:12px;font-size:1.04rem}
/* Szenen-Vignette im Seitenkopf der Leistungsseiten (Modernisierung Schritt 14):
   Text links,kleine Panorama-Szene rechts – mobil untereinander,Deko bleibt klein */
.hero-zeile{display:grid;gap:28px;align-items:center}
@media(min-width:880px){.hero-zeile{grid-template-columns:1.15fr .85fr}}
.hero-vignette{display:block;width:100%;height:auto;max-height:220px;margin:0 auto;pointer-events:none}
@media(max-width:879px){.hero-vignette{max-width:320px}}
.hero-vignette .v-icon{stroke:#fff;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.zweispalt{display:grid;gap:40px;align-items:center}
@media(min-width:880px){.zweispalt{grid-template-columns:1.05fr .95fr}}
.zweispalt img{border-radius:var(--r-l);box-shadow:var(--sch-m)}
.haken{margin-top:16px;list-style:none}
.haken li{padding-left:30px;position:relative;margin-bottom:11px;font-size:.98rem;color:var(--textgrau)}
.haken li::before{content:"✓";position:absolute;left:0;top:2px;color:#fff;background:var(--rot);width:20px;height:20px;border-radius:50%;font-size:.7rem;display:grid;place-content:center;font-weight:800}
/* Rechtstexte (Impressum/Datenschutz/AGB): Container so breit wie der Rest der
   Seite (.wrap-Maß),damit der Text LINKS an derselben Kante beginnt wie die
   Überschrift im Kopf – vorher stand die schmale Spalte mittig ("sieht scheiße
   aus",Kadir 17.08.2026). Die Zeilenlänge bleibt per Innen-Deckel lesbar. */
.rechtstext{max-width:1180px;margin:0 auto;padding:0 22px 44px} /* oben 0: der Hero bringt schon Luft mit (Kadir 17.08.: Abstand war zu groß) */
.rechtstext h2,.rechtstext h3,.rechtstext p,.rechtstext ul{max-width:820px}
.rechtstext h1{overflow-wrap:break-word;hyphens:auto}
@media(max-width:420px){.rechtstext h1{font-size:1.7rem}}
.rechtstext h2{font-size:1.25rem;margin:30px 0 10px}
.rechtstext h3{font-size:1.05rem;margin:22px 0 8px} /* Zwischenpunkte der AGB (1. Vertragsschluss usw.) */
.rechtstext p,.rechtstext li{font-size:.95rem;margin-bottom:10px}
.rechtstext ul{list-style:disc;padding-left:22px}

/* ---------- Anfrage-Assistent ---------- */
.assi{padding:34px 30px}
.assi-kopf{margin-bottom:22px}
/* Fortschritt als runde Weg-Stationen (Modernisierung Schritt 10): nummerierte
   Punkte,erledigte Schritte bekommen ein ploppendes weisses Haekchen.
   Klassen .aktiv/.fertig setzt js/script.js (Block "Anfrage-Assistent"). */
.assi-punkte{display:flex;align-items:center;gap:14px;margin-top:12px}
.assi-punkte .dot{position:relative;width:26px;height:26px;border-radius:50%;display:grid;place-content:center;font-family:var(--kopf);font-weight:800;font-size:.8rem;background:var(--rot-soft);color:var(--rot);transition:background .2s,color .2s}
.assi-punkte .dot+.dot::before{content:"";position:absolute;right:100%;top:50%;transform:translateY(-50%);width:14px;height:2px;background:var(--linie)} /* duenner Verbindungsstrich (liegt in der 14px-Luecke) */
.assi-punkte .dot::after{content:"✓";position:absolute;inset:0;display:grid;place-content:center;color:#fff;font-weight:800;transform:scale(0);transition:transform .22s cubic-bezier(.34,1.56,.64,1)}
.assi-punkte .dot.aktiv{background:var(--rot);color:#fff}
.assi-punkte .dot.fertig{background:var(--rot);color:transparent} /* Ziffer weicht dem Haekchen */
.assi-punkte .dot.fertig::after{transform:scale(1)}
@media(prefers-reduced-motion:reduce){.assi-punkte .dot::after{transition:none}}
/* Pflichtfelder (07.08.2026): roter Stern am Label + dauerhafte rote Markierung
   vergessener Felder (aria-invalid setzt script.js beim Absende-Versuch) */
.stern{color:var(--rot);font-weight:700}
.formular [aria-invalid="true"]{border-color:var(--rot);box-shadow:0 0 0 3px rgba(226,0,26,.12)}
.assi fieldset{border:0;margin:0;padding:0}
.assi-schritt{scroll-margin-top:110px} /* Schritt-Überschrift bleibt beim Auto-Scroll UNTER dem klebenden Kopf sichtbar (Sichtprüfung 08.08.) */
.assi legend{font-weight:800;font-family:var(--kopf);font-size:1.08rem;margin-bottom:18px}
/* Umgedreht am 07.08.2026 (Hauptursache des Sprungs auf kontakt.html): hing das an der
   js-Klasse,standen bis zum Skriptstart alle drei Schritte untereinander und die Seite
   klappte danach schlagartig zusammen (gemessenes CLS 0,56). Schritt 1 trägt schon im
   HTML die Klasse "aktiv",ist also vom ersten Bild an sichtbar. */
.assi-schritt{display:none}
.assi-schritt.aktiv{display:block;animation:einblenden .25s ease}
@keyframes einblenden{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.wahlen{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.wahlen{grid-template-columns:repeat(3,1fr)}}
.wahlen.zeit{grid-template-columns:1fr}
@media(min-width:640px){.wahlen.zeit{grid-template-columns:repeat(3,1fr)}}
.wahl{position:relative;border:1.5px solid var(--linie);border-radius:var(--r-m);padding:18px 14px;text-align:center;cursor:pointer;display:grid;gap:9px;justify-items:center;font-size:.9rem;font-weight:800;background:#fff;transition:border-color .15s,box-shadow .15s,transform .1s}
.wahl:hover{border-color:var(--stahl)}
.wahl:active{transform:scale(.97)}
.wahl svg{width:44px;height:44px;stroke:var(--rot);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;border-radius:50%;padding:9px} /* runde Enden (23.08.): als einzige Symbolgruppe hatten die Kacheln abgeschnittene Linien – Sonnenstrahlen sahen aus wie Splitter */
/* Gewerke-Kacheln im Assistenten wie das Signet: gefüllte Farbkreise mit weißem Symbol
   (Reihenfolge in Schritt 1: Heizung,Bad,Solar,Lüftung,Störung,Sonstiges) */
.wahlen .wahl:nth-child(1) svg{stroke:#fff;background:#E2001A}
.wahlen .wahl:nth-child(2) svg{stroke:#fff;background:#1E3A5F}
.wahlen .wahl:nth-child(3) svg{stroke:#fff;background:#EE9C0C}
.wahlen .wahl:nth-child(4) svg{stroke:#fff;background:#37839B}
.wahlen .wahl:nth-child(5) svg{stroke:#fff;background:var(--tinte)}
.wahlen .wahl:nth-child(6) svg{stroke:#fff;background:var(--stahl)}
/* Schritt 2 (Zeitraum) hat keine Symbole – Regeln greifen dort ins Leere,ohne Schaden */
.wahl small{font-weight:600;color:var(--stahl)}
.wahl input{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0}
.wahl:has(input:checked){border-color:var(--rot);background:var(--rot-soft);box-shadow:0 8px 20px rgba(226,0,26,.14)}
/* Gewerke-Kacheln leuchten in der EIGENEN Elementfarbe (Modernisierung Schritt 11).
   WARTUNG: Die Farb-Reihenfolge haengt an der Kachel-Reihenfolge in generator.py
   (assistent(),Schritt "Worum geht es?"): 1 Heizung=Rot #E2001A · 2 Bad=Wasser
   #1E3A5F · 3 Solar=Sonne #EE9C0C · 4 Lueftung=Luft #37839B · 5 Stoerung=Tinte
   (neutral) · 6 Sonstiges=Stahlgrau (neutral). Wird dort umsortiert,MUESSEN die
   nth-child-Regeln hier (und die Icon-Kreise oben) mitziehen.
   Die Zeitraum-Kacheln (.wahlen.zeit) bleiben komplett rot – daher :not(.zeit). */
.wahlen:not(.zeit) .wahl:nth-child(1):hover{border-color:rgba(226,0,26,.45);background:rgba(226,0,26,.04)}
.wahlen:not(.zeit) .wahl:nth-child(2):hover{border-color:rgba(30,58,95,.45);background:rgba(30,58,95,.04)}
.wahlen:not(.zeit) .wahl:nth-child(3):hover{border-color:rgba(238,156,12,.45);background:rgba(238,156,12,.04)}
.wahlen:not(.zeit) .wahl:nth-child(4):hover{border-color:rgba(55,131,155,.45);background:rgba(55,131,155,.04)}
.wahlen:not(.zeit) .wahl:nth-child(5):hover{border-color:rgba(22,27,34,.45);background:rgba(22,27,34,.04)}
.wahlen:not(.zeit) .wahl:nth-child(6):hover{border-color:rgba(91,99,110,.45);background:rgba(91,99,110,.04)}
.wahlen:not(.zeit) .wahl:nth-child(1):has(input:checked){border-color:#E2001A;background:linear-gradient(115deg,rgba(226,0,26,.09),transparent 60%),#fff;box-shadow:0 8px 20px rgba(226,0,26,.14)}
.wahlen:not(.zeit) .wahl:nth-child(2):has(input:checked){border-color:#1E3A5F;background:linear-gradient(115deg,rgba(30,58,95,.09),transparent 60%),#fff;box-shadow:0 8px 20px rgba(30,58,95,.14)}
.wahlen:not(.zeit) .wahl:nth-child(3):has(input:checked){border-color:#EE9C0C;background:linear-gradient(115deg,rgba(238,156,12,.09),transparent 60%),#fff;box-shadow:0 8px 20px rgba(238,156,12,.14)}
.wahlen:not(.zeit) .wahl:nth-child(4):has(input:checked){border-color:#37839B;background:linear-gradient(115deg,rgba(55,131,155,.09),transparent 60%),#fff;box-shadow:0 8px 20px rgba(55,131,155,.14)}
.wahlen:not(.zeit) .wahl:nth-child(5):has(input:checked){border-color:var(--tinte);background:linear-gradient(115deg,rgba(22,27,34,.09),transparent 60%),#fff;box-shadow:0 8px 20px rgba(22,27,34,.14)}
.wahlen:not(.zeit) .wahl:nth-child(6):has(input:checked){border-color:var(--stahl);background:linear-gradient(115deg,rgba(91,99,110,.09),transparent 60%),#fff;box-shadow:0 8px 20px rgba(91,99,110,.14)}
/* Kleines Auswahl-Haekchen oben rechts,ploppt federnd auf (Farbe je Kachel wie oben) */
.wahlen:not(.zeit) .wahl::after{content:"✓";position:absolute;top:8px;right:8px;width:20px;height:20px;border-radius:50%;background:var(--rot);color:#fff;font-size:.68rem;font-weight:800;display:grid;place-content:center;transform:scale(0);transition:transform .22s cubic-bezier(.34,1.56,.64,1)}
.wahlen:not(.zeit) .wahl:nth-child(2)::after{background:#1E3A5F}
.wahlen:not(.zeit) .wahl:nth-child(3)::after{background:#EE9C0C}
.wahlen:not(.zeit) .wahl:nth-child(4)::after{background:#37839B}
.wahlen:not(.zeit) .wahl:nth-child(5)::after{background:var(--tinte)}
.wahlen:not(.zeit) .wahl:nth-child(6)::after{background:var(--stahl)}
.wahlen:not(.zeit) .wahl:has(input:checked)::after{transform:scale(1)}
@media(prefers-reduced-motion:reduce){.wahlen:not(.zeit) .wahl::after{transition:none}}
.wahl:has(input:focus-visible){outline:3px solid var(--rot);outline-offset:2px}
.assi-nav{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
.assi-weiter,.assi-senden{margin-left:auto}
/* Ebenfalls umgedreht am 07.08.2026 – die Knopfzeile sprang sonst mit. <noscript> im
   Seitenkopf stellt die Fassung ohne JavaScript wieder her (Senden sichtbar,Weiter weg). */
.assi-zurueck,.assi-senden{display:none}
.assi-zurueck.sichtbar,.assi-senden.sichtbar{display:inline-flex}
.assi-weiter{display:inline-flex}
.assi-weiter.versteckt{display:none}
.assi .demo-hinweis{display:block;margin-top:14px}
.assi-wa{display:none}
.assi-wa.sichtbar{display:grid;gap:6px;margin-top:18px;padding-top:18px;border-top:1px solid var(--linie)}
.assi-wa .wa-btn{width:100%}

.pillen{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.pille{position:relative;border:1.5px solid #cfcabf;border-radius:999px;padding:.55em 1.2em;font-size:.88rem;font-weight:800;cursor:pointer;background:#fff}
.pille input{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0}
.pille:has(input:checked){border-color:var(--rot);background:var(--rot);color:#fff}
.pille:has(input:focus-visible){outline:3px solid var(--rot);outline-offset:2px}

/* ---------- Vorgangsnummer (Danke-Seite) ---------- */
.vorgangs-box{max-width:440px;margin:0 auto 28px;background:linear-gradient(115deg,rgba(226,0,26,.06),rgba(226,0,26,0) 60%),#fff;border:1px solid rgba(226,0,26,.16);border-radius:var(--r-m);box-shadow:var(--sch-s);padding:22px 26px;display:grid;gap:6px;text-align:center}
.vorgangs-box[hidden]{display:none} /* Schluss-Abnahme-Fund: ohne Vorgangsnummer (Direktaufruf) bleibt die Box unsichtbar */
.vorgangs-box span{font-size:.8rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--stahl)}
.vorgangs-box b{font-family:var(--kopf);font-size:1.9rem;letter-spacing:.06em;color:var(--rot)}
.vorgangs-box small{font-size:.8rem;color:var(--stahl)}

/* ---------- WhatsApp ---------- */
/* WhatsApp-Schwebeknopf braucht JavaScript – ohne JS wird .nur-wa vom <noscript>
   im Seitenkopf ausgeblendet,damit kein toter Knopf stehen bleibt (Audit B5). */
.wa-block{margin-top:18px;display:grid;gap:8px}
.wa-btn{background:#25d366;color:#fff;border-color:transparent;box-shadow:0 8px 20px rgba(37,211,102,.3)}
.wa-btn:hover{background:#1eb857;transform:translateY(-2px)}
.wa-tipp{font-size:.8rem;color:var(--stahl)}
.wa-textlink{font-weight:800;color:#0f7038;cursor:pointer;text-decoration:underline} /* dunkleres Grün: 3,17:1 -> 4{margin-top:14px;font-size:.9rem;color:var(--textgrau);text-align:center}

/* ---------- Footer ---------- */
/* Wiesensaum vor dem Footer (Modernisierung Schritt 15): die Seite endet im Garten.
   Der Abstand nach oben (80px) wandert vom Footer auf die Kante; die rote
   4px-Oberkante des Footers bleibt gerade. Druck blendet .fuss-kante aus. */
.fuss-kante{margin-top:80px;pointer-events:none}
/* Höhe folgt immer der Zeichnung (1400:104) statt einer festen Deckelung – die
   alte clamp-Höhe ließ "slice" ab ~1400px OBEN abschneiden (Baumkronen geköpft,Kadir-Fund 17.08.2026) und bei 641–719px SEITLICH (Bäume ganz weg). */
.fuss-kante svg{display:block;width:100%;height:auto}
/* Am Handy schnitt der Bild-Ausschnitt die Bäumchen weg und ließ das Wärmepumpen-
   Kästchen halb stehen – deshalb war die Deko unter 640px ganz aus (07.08.2026,K3).
   Seit 12.08.2026 gibt es stattdessen eine eigene schmale Wiese (.fk-schmal),die
   nichts abschneidet – Regeln im Block „Handy-Nachbesserungen“ am Dateiende. */
@media(max-width:640px){.fuss-kante .fk-deko{display:none}}
footer{background:var(--tinte);color:#d4d9df;margin-top:0;border-top:4px solid var(--rot)}
footer .wrap{padding:56px 22px 36px;display:grid;gap:36px}
@media(min-width:820px){footer .wrap{grid-template-columns:1.3fr 1fr}}
footer img{height:56px;width:auto;background:#fff;padding:9px 14px;border-radius:var(--r-s)}
footer h3{color:#fff;margin-bottom:10px}
footer p{color:#9aa2ac;font-size:.9rem;margin-top:10px;max-width:34em}
footer a:hover{color:#fff}
/* Vertrauens-Pillen im Footer (Modernisierung Schritt 18): drei belegbare
   Aussagen als ruhige Kapseln,je mit kleinem Elementfarben-Punkt */
.f-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.f-badges li{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:.35em .95em;font-size:.8rem;color:#c3c9d1}
.f-badges li::before{content:"";width:9px;height:9px;border-radius:50%;flex:none}
.f-badges li:nth-child(1)::before{background:var(--rot)}
.f-badges li:nth-child(2)::before{background:#EE9C0C}
.f-badges li:nth-child(3)::before{background:#37839B}
.social{display:flex;gap:12px;margin-top:18px}
.social a{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-content:center;transition:.16s}
.social a:hover{background:var(--rot);transform:translateY(-2px)}
.social .ico{width:20px;height:20px;stroke:#fff}
.social svg{width:20px;height:20px;color:#fff;flex:none}
.flinks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 26px;align-content:start;list-style:none} /* minmax(0,…): Spalten dürfen bei 200% Schrift schrumpfen,Wörter brechen dann um (Punkt 29) */
/* Linkliste: beim Überfahren gleitet ein kleiner roter Punkt davor (Schritt 18) */
.flinks a{font-size:.92rem;color:#c3c9d1;padding:4px 0;display:block;position:relative;transition:padding-left .16s,color .16s}
.flinks a::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:var(--rot);opacity:0;transition:opacity .16s}
.flinks a:hover{color:#fff;padding-left:14px}
.flinks a:hover::before{opacity:1}
.unten{border-top:1px solid rgba(255,255,255,.1);padding:18px 22px;font-size:.8rem;color:#8b929c;text-align:center}

/* ---------- Mobile Anrufleiste ---------- */
/* Schwebende Insel statt Vollbreiten-Balken (Modernisierung Schritt 16): weiße
   Kapsel mit Luft zum Rand,der Nachricht-Knopf wird hell,Rot sticht stärker. */
/* Reparatur 07.08.2026: auto-fit statt fester Spaltenreihe. Vorher fielen bei 150 %
   Schrift "Nachricht" und bei 200 % auf schmalen Handys auch "WhatsApp" aus der Kapsel
   heraus (overflow:hidden -> Knöpfe weg,nicht nur verschoben). Jetzt stapeln sich die
   Knöpfe,sobald es eng wird. Bei normaler Schrift ändert sich nichts. */
.callbar{position:fixed;left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));z-index:60;display:flex;flex-wrap:wrap;gap:0;padding:4px;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 -8px 24px rgba(22,27,34,.18)}
/* flex:1 1 7em – bei normaler Schrift stehen die drei Knöpfe wie bisher nebeneinander,bei 150 % rutscht "Nachricht" in eine zweite Zeile,bei 200 % steht jeder für sich.
   min-width:0 erlaubt das Schrumpfen,sonst schoben sie sich aus der Kapsel heraus. */
.callbar a{flex:1 1 5em;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:7px 4px;border-radius:14px;font-family:var(--kopf);font-weight:700;font-size:.7rem;line-height:1.2;letter-spacing:.01em;color:var(--tinte);transition:background .12s}
.callbar a:active{background:rgba(22,27,34,.07)} /* kurzes Druck-Feedback */
.callbar .anruf{color:var(--rot-tief)}
.callbar .wa{color:#11873C} /* dunkleres Gruen als WhatsApp-Original: kleine
                              Schrift auf Weiss braucht 4,5:1 (Regel 9) */
.callbar .mail{color:var(--tinte)}
/* Chat-Knopf (22.08.2026,Kadir-Wunsch): Die schwebende Blase klebte am Handy
   halb auf der Leiste und wirkte aufgesetzt. Jetzt sitzt der Chat als schmaler
   Icon-Knopf IN der Leiste - die drei Text-Knoepfe behalten ihren Platz. */
.callbar .chat{color:var(--wasser)}

.callbar .ico{width:20px;height:20px}
@media(min-width:920px){.callbar{display:none}}
/* Platz fuer die Anrufleiste: waechst mit ihrer Hoehe. 76px galten fuer die
   alte Pillen-Leiste (62px); im App-Stil (70px) lagen die Orts-Knoepfe der
   Landkarte GENAU unter der Leiste - ein Tipp traf die Leiste statt den Ort
   (Smoke-Test-Fund 22.08.2026). Bei jeder Aenderung der Leistenhoehe mitziehen. */
@media(max-width:919px){body{padding-bottom:78px}}

/* ---------- Animation ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.sichtbar{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *{animation:none!important;transition:none!important}
  .karte:hover svg,.saison-karte:hover .saison-kreis,.punkt:hover .ico{transform:none} /* auch Feder-Hover ruhigstellen (Schritt 3) */
  .callbar a:active{transform:none} /* Druck-Feedback der Anrufleiste ruhigstellen (Schritt 16) */
  .karte-chips button:active{transform:none} /* dito Orts-Pillen (15.08.) */
  html{scroll-behavior:auto}
}

/* ---------- Abgleich: Klassen aus dem Bestand ---------- */
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.trust{display:flex;gap:8px 22px;flex-wrap:wrap;margin-top:26px;font-size:.86rem;font-weight:600;color:var(--stahl)}
.trust span{display:inline-flex;align-items:center;gap:8px}
.trust .ico,.trust svg{width:16px;height:16px;stroke:var(--rot)}
/* Bewertungszeile auf den Unterseiten (Audit-Stufe 1,21.08.2026): der
   4,8er-Beweis stand nur auf der Startseite. Schrift rot-tief,nie
   Sonnen-Orange (Regel 9); rot-tief statt rot wegen AA auf getoenten
   Flaechen (Audit-Kontrastmessung). */
.hero-sterne{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:6px;margin-top:16px;font-size:.86rem;font-weight:600;color:var(--stahl);text-decoration:none}
.hero-sterne b{color:var(--rot-tief);font-weight:700;font-size:.95rem}
.hero-sterne .hs-link{text-decoration:underline;text-underline-offset:2px}
.hero-sterne:hover .hs-link,.hero-sterne:focus-visible .hs-link{color:var(--rot-tief)}
/* Fremde Markenzeichen behalten ihre Originalform (Kadir 27.08.2026):
   Das Facebook-"f" IST eine gefuellte Flaeche - die globale .ico-Regel
   (fill:none) wuerde daraus eine Kontur machen. Instagram bleibt Umriss,denn so sieht das echte Instagram-Zeichen aus. */
.social .fb-logo{fill:currentColor;stroke:none}
/* Notdienst-Paket (Audit 21.08.) */
.hero-hilfe{display:inline-block;margin-top:14px;color:var(--rot-tief);font-weight:800;font-size:.92rem;text-decoration:none}
.hero-hilfe:hover,.hero-hilfe:focus-visible{text-decoration:underline}
.hero-hilfe:hover .pfeil{transform:translateX(4px)}
.trust a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.not-kasten{margin-top:26px;max-width:44em}
.not-kasten b{color:var(--rot-tief)}
.f-notfall{margin:10px 0 0;font-weight:600;color:#fff;font-size:.9rem}
.intro{font-size:1.06rem;max-width:46em}
.klein{font-size:.8rem;color:var(--stahl)}
.mehr{color:var(--rot-tief);font-weight:800;font-size:.92rem} /* inline statt flex (Kontroll-Befund REGM) · rot-tief: Kleinschrift auf getönten Flächen war 4,29:1,jetzt 6,25:1 (Punkt 30 – Berbergil-Rot selbst unangetastet) */
/* Pfeil gleitet beim Überfahren mit (Verschönerung C1) */
.mehr .pfeil{display:inline-block;transition:transform .18s}
.pfeil-halt{white-space:nowrap} /* letztes Wort + Pfeil bleiben zusammen – der Pfeil rutscht nie allein in die nächste Zeile (Sichtprüfung 08.08.) */
.mehr:hover .pfeil,.karte:hover .pfeil{transform:translateX(4px)}
.tag{display:inline-block;background:var(--rot-soft);color:var(--rot);font-family:var(--kopf);font-weight:700;font-size:.74rem;padding:.4em .9em;border-radius:999px;margin-right:8px}
.einzug{padding-left:18px}
.gruppe{display:block}
.gb-badge{display:inline-flex;align-items:center;gap:12px;background:#fff;border-radius:var(--r-m);box-shadow:var(--sch-s);padding:10px 18px}
.gb-note{font-family:var(--kopf);font-weight:800;font-size:1.5rem;color:var(--tinte)}
.gb-anzahl{font-size:.8rem;font-weight:600;color:var(--stahl)}
.gmaps-consent p{font-size:.9rem;max-width:36em;margin:0 auto 16px}
.header-cta{display:none;white-space:nowrap}
@media(min-width:920px){.header-cta{display:inline-flex}}

/* ---------- V2.1 Feinschliff ---------- */
::selection{background:var(--rot);color:#fff}
/* Federnde Icon-Bewegung wie das Panorama-Häkchen (Modernisierung Schritt 3) */
.karte:hover svg{transform:scale(1.12)}
.karte svg,.saison-kreis,.punkt .ico{transition:transform .22s cubic-bezier(.34,1.56,.64,1)}
.saison-karte:hover .saison-kreis,.punkt:hover .ico{transform:scale(1.12)}
.galerie figure{overflow:hidden}
.galerie .foto-rahmen img{transition:transform .3s} /* Zoom clippt im Passepartout-Rahmen (Schritt 12) */
.galerie figure:hover .foto-rahmen img{transform:scale(1.04)}
.karten>.reveal:nth-child(2),.dreier>.reveal:nth-child(2),.schritte>.reveal:nth-child(2){transition-delay:.09s}
.karten>.reveal:nth-child(3),.dreier>.reveal:nth-child(3),.schritte>.reveal:nth-child(3){transition-delay:.18s}
.karten>.reveal:nth-child(4){transition-delay:.27s}
header{transition:box-shadow .2s}
header.kompakt{box-shadow:0 6px 24px rgba(22,27,34,.1)}
header.kompakt .wrap{padding-top:9px;padding-bottom:9px}
header .wrap{transition:padding .2s}
.f-logo{height:64px;width:auto;background:none!important;padding:0!important;border-radius:0!important;margin-bottom:14px}

/* SEO-Struktur: Breadcrumbs,Einzugsgebiet,Querverweise */
.brotkrumen{display:flex;gap:8px;align-items:center;font-size:.8rem;font-weight:600;color:var(--stahl);margin-bottom:14px}
.brotkrumen a:hover{color:var(--rot)}
.orte-chips{display:flex;flex-wrap:wrap;gap:10px}
.orte-chips span{background:#fff;border:1.5px solid var(--linie);border-radius:999px;padding:.5em 1.1em;font-weight:600;font-size:.88rem}
.quer{margin:34px 0 0;font-size:.92rem;color:var(--stahl);font-weight:600}
.quer a{color:var(--rot);font-weight:800}
.quer a:hover{text-decoration:underline}

/* Druckansicht: nur der Inhalt */
@media print{.wa-schwebe{display:none}
  /* Doppelter Boden (16.08.): Einblend-Flaechen haengen am Scroll-Schalter -
     beim Drucken scrollt niemand. Chrome behandelt Druck zwar als "Bewegung
     reduziert" (dann greift die Regel oben), aber darauf verlassen wir uns
     bei anderen Browsern nicht: im Druck ist IMMER alles sichtbar. */
  .reveal,html.js .einblenden{opacity:1!important;transform:none!important}
  .topbar,header,.callbar,.skip,.assi-nav,.hero-btns,.social,.btn,.deko-himmel,.fuss-kante,.hero-vignette,.hinweis-banner{display:none!important} /* hinweis-banner: wurde mitgedruckt (Kontrollrunde 12.08.2026) */
  body{padding:0;background:#fff}
  .sektion{padding:20px 0}
  .sektion.grau{background:var(--papier)!important;padding:20px 0!important} /* Hügelkanten-Deko wird nicht mitgedruckt */
  .ablauf{background:var(--papier)!important} /* Mini-Landschaft (Schritt 8) nicht mitdrucken */
  .ablauf .schritte::before{display:none!important} /* gestrichelter Weg nicht mitdrucken */
}

/* „Jetzt geöffnet“-Status */
.topbar .status{display:inline-flex;align-items:center;gap:8px;font-weight:800;white-space:nowrap}
.topbar .status i{width:8px;height:8px;border-radius:50%;display:inline-block}
.topbar .status.offen i{background:#1db954;animation:puls 1.8s infinite}
.topbar .status.zu i{background:#8b929c}
@media(max-width:640px){.topbar .status{display:none}}

/* Hinweisbanner (Urlaub,Feiertage …) */
.hinweis-banner{background:#ffd800;color:#161b22;font-family:var(--kopf);font-weight:700;text-align:center;font-size:.94rem}
/* Das ganze Band ist ein Anruf-Link (07.08.2026): Polster liegt auf dem Link,damit
   die komplette Fläche tippbar ist. Farbe erbt das dunkle Tinte-Schwarz. */
.hinweis-banner a{display:block;padding:12px 20px;color:inherit}

/* Zeitleiste */
.zeitachse{position:relative;max-width:760px;padding-left:26px}
.zeitachse::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:var(--linie)} /* minmax(0{content:"";position:absolute;left:-26px;top:6px;width:16px;height:16px;border-radius:50%;background:var(--rot);border:3px solid #fff;box-shadow:0 0 0 2px var(--rot)}

/* Erste-Hilfe-Liste */
.hilfe-liste{max-width:720px;counter-reset:schritt;list-style:none;display:grid;gap:14px}
.hilfe-liste li{background:#fff;border-radius:var(--r-m);box-shadow:var(--sch-s);padding:18px 20px 18px 64px;position:relative;font-size:.97rem;color:var(--textgrau)}
.hilfe-liste li::before{counter-increment:schritt;content:counter(schritt);position:absolute;left:18px;top:16px;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--rot),var(--rot-tief));color:#fff;font-family:var(--kopf);font-weight:800;display:grid;place-content:center;font-size:.9rem}
.hilfe-schluss{margin-top:20px;max-width:720px;font-size:1rem}
.hilfe-schluss small{display:block;margin-top:8px;color:var(--stahl)}
.elemente-grid{display:grid;gap:36px;align-items:center;justify-items:center}
@media(min-width:820px){.elemente-grid{grid-template-columns:auto 1fr;justify-items:start}}
.signet-gross{width:min(300px,70vw);height:auto}
.elemente-liste{display:grid;gap:12px}
.elemente-liste li{display:flex;align-items:center;gap:14px;font-size:1rem;color:var(--textgrau)}
.elemente-liste i{width:16px;height:16px;border-radius:50%;flex:none}

/* Logo-Auftritt: volle Marke beim Ankommen,kompakt beim Scrollen */
@media(max-width:919px){.logo img{height:70px}}
header.kompakt .logo img{height:58px}

/* ---------- Erlebnis: sanfte Einblendungen + klickbares Bewertungs-Schild ---------- */
/* Einblenden-Klassen setzt js/script.js (Block "Sanfte Einblendungen") – ohne JavaScript bleibt alles sofort sichtbar */
html.js .einblenden{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
html.js .einblenden.da{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html.js .einblenden{opacity:1;transform:none;transition:none}}
a.hero-badge{transition:transform .16s,box-shadow .16s}
a.hero-badge:hover,a.hero-badge:focus-visible{transform:translateY(-3px);box-shadow:0 18px 40px rgba(22,27,34,.22)}


/* ---------- Schwebender WhatsApp-Knopf (Sofort-Kontakt,Kadir 05.08.2026) ---------- */
.wa-schwebe{position:fixed;left:18px;bottom:18px;z-index:55;width:56px;height:56px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-content:center;box-shadow:var(--sch-l);transition:transform .16s}
.wa-schwebe .ico{width:28px;height:28px} /* 23.08.2026: WhatsApp ist jetzt ueberall dieselbe UMRISS-Zeichnung (ICO_WA_LINIE) – die Fuell-Ausnahme entfaellt */
.wa-schwebe:hover{transform:translateY(-3px)}
.ws-text{position:absolute;left:66px;bottom:6px;background:#fff;color:var(--tinte);font-size:.78rem;font-weight:700;line-height:1.35;padding:9px 14px;border-radius:12px;box-shadow:var(--sch-m);white-space:nowrap;opacity:0;pointer-events:none;transform:translateX(-6px);transition:opacity .18s,transform .18s}
.wa-schwebe:hover .ws-text,.wa-schwebe:focus-visible .ws-text{opacity:1;transform:none}
@media(max-width:919px){.wa-schwebe{display:none}} /* mobil übernimmt die Anrufleiste den WhatsApp-Weg */
@media(prefers-reduced-motion:reduce){.wa-schwebe,.ws-text{transition:none}}


/* ---------- Paket A (Pruefbericht 06.08.2026): Reparaturen ---------- */
/* A2: Anrufleiste auf sehr schmalen Handys - dritter Knopf nicht mehr abgeschnitten */
@media(max-width:389px){
  .callbar a{padding:9px 2px;font-size:.68rem}
}
/* A3: Kontrast-Paket - dunkle Tinte statt Weiss auf WhatsApp-Gruen (Gruen ist keine Markenfarbe,bleibt) */
.wa-btn{color:var(--tinte)}
.wa-btn .ico,.wa-schwebe .ico{stroke:var(--tinte)} /* dunkle Tinte auf Gruen (Kontrast-Paket A3) */
/* A4: Team-Haus - sichtbarer Tastatur-Fokus wie bei der Haus-Anfrage */
.team-haus .haus-zone:focus{outline:none}
.team-haus .haus-zone:focus-visible{outline:3px solid var(--tinte);outline-offset:3px}

/* ---------- Lebendes Haus (Startseite,Kadir-OK 13.08.2026) ----------
   Aufgeschnittenes Haus als Gewerke-Einstieg. Erscheint nur mit JavaScript
   (script.js,Block „Lebendes Haus"); ohne JS bleiben die Kacheln
   #gewerke-karten sichtbar. hidden-Wächter unten NICHT entfernen: display:grid
   würde das hidden-Attribut sonst stillschweigend überstimmen. */
.haus-buehne{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);gap:28px;align-items:stretch;margin-bottom:6px}
.haus-buehne[hidden],#gewerke-karten[hidden]{display:none}
.haus-rahmen{border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sch-s);border:1px solid var(--linie);min-width:0}
.lebendes-haus{display:block;width:100%;height:auto}
.info-spalte{display:grid;min-width:0}
.info-karte{grid-area:1/1;display:flex;flex-direction:column;justify-content:center;gap:12px;
  padding:28px 26px;border-radius:var(--r-l);background:#fff;border:1px solid var(--linie);box-shadow:var(--sch-s);
  opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s,transform .25s,visibility .25s}
.haus-buehne[data-aktiv="start"] .info-karte[data-b="start"],.haus-buehne[data-aktiv="heizung"] .info-karte[data-b="heizung"],.haus-buehne[data-aktiv="bad"] .info-karte[data-b="bad"],.haus-buehne[data-aktiv="solar"] .info-karte[data-b="solar"],.haus-buehne[data-aktiv="klima"] .info-karte[data-b="klima"]{opacity:1;visibility:visible;transform:none}
.info-karte h3{font-size:1.2rem}
.info-karte p{font-size:.96rem}
.info-karte .ikreis{width:54px;height:54px;border-radius:50%;display:grid;place-content:center;margin-bottom:2px}
.info-karte .ikreis svg{width:28px;height:28px;stroke:#fff;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.info-karte[data-b="heizung"]{background:linear-gradient(115deg,rgba(226,0,26,.07),rgba(226,0,26,0) 60%),#fff;border-color:rgba(226,0,26,.2)}
.info-karte[data-b="heizung"] .ikreis{background:#E2001A;box-shadow:0 10px 22px rgba(226,0,26,.3)}
.info-karte[data-b="bad"]{background:linear-gradient(115deg,rgba(30,58,95,.07),rgba(30,58,95,0) 60%),#fff;border-color:rgba(30,58,95,.2)}
.info-karte[data-b="bad"] .ikreis{background:#1E3A5F;box-shadow:0 10px 22px rgba(30,58,95,.3)}
.info-karte[data-b="solar"]{background:linear-gradient(115deg,rgba(238,156,12,.08),rgba(238,156,12,0) 60%),#fff;border-color:rgba(238,156,12,.25)}
.info-karte[data-b="solar"] .ikreis{background:#EE9C0C;box-shadow:0 10px 22px rgba(238,156,12,.3)}
.info-karte[data-b="klima"]{background:linear-gradient(115deg,rgba(55,131,155,.08),rgba(55,131,155,0) 60%),#fff;border-color:rgba(55,131,155,.25)}
.info-karte[data-b="klima"] .ikreis{background:#37839B;box-shadow:0 10px 22px rgba(55,131,155,.3)}
.legende{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.legende .chip{display:inline-flex;align-items:center;gap:7px;font-size:.85rem;font-weight:600;padding:6px 12px;border-radius:999px;background:#fff;border:1px solid var(--linie)}
.legende .chip i{width:10px;height:10px;border-radius:50%;display:inline-block}
/* Zonen im Haus: Räume färben sich beim Zeigen in der Elementfarbe */
.lebendes-haus .zone{cursor:pointer}
.lebendes-haus .raum{transition:fill .25s,stroke .25s;stroke-width:2;stroke:transparent}
.lebendes-haus .zone[data-b="bad"] .raum{fill:#F2F5F9}
.lebendes-haus .zone[data-b="heizung"] .raum{fill:#FAF1F2}
.lebendes-haus .zone[data-b="klima"] .raum{fill:#F8F4EC}
.lebendes-haus .zone[data-b="bad"]:hover .raum,.lebendes-haus .zone[data-b="bad"]:focus-visible .raum,.haus-buehne[data-aktiv="bad"] .zone[data-b="bad"] .raum{fill:#DDE5EF;stroke:#1E3A5F}
.lebendes-haus .zone[data-b="heizung"]:hover .raum,.lebendes-haus .zone[data-b="heizung"]:focus-visible .raum,.haus-buehne[data-aktiv="heizung"] .zone[data-b="heizung"] .raum{fill:#F8DCE0;stroke:#E2001A}
.lebendes-haus .zone[data-b="klima"]:hover .raum,.lebendes-haus .zone[data-b="klima"]:focus-visible .raum,.haus-buehne[data-aktiv="klima"] .zone[data-b="klima"] .raum{fill:#DAEAF0;stroke:#37839B}
.lebendes-haus .dachband{stroke:#D9A05B;transition:stroke .25s}
.lebendes-haus .zone[data-b="solar"]:hover .dachband,.lebendes-haus .zone[data-b="solar"]:focus-visible .dachband,.haus-buehne[data-aktiv="solar"] .zone[data-b="solar"] .dachband{stroke:#EE9C0C}
.lebendes-haus .zone:focus{outline:none} /* :focus statt :focus-visible - Chrome malt bei SVG das Rechteck schon beim Maus-Klick (Fund 14.08.) */
.lebendes-haus .zone:focus-visible .raum{stroke-width:4}
/* Das Haus lebt: Rauch,Wolken,Sonnenstrahlen,Räder,Flamme */
@keyframes lh-rauch{0%{transform:translateY(0);opacity:0}25%{opacity:.55}100%{transform:translateY(-46px);opacity:0}}
.lh-rauch circle{animation:lh-rauch 4.2s linear infinite;opacity:0}
.lh-rauch circle:nth-child(2){animation-delay:1.4s}
.lh-rauch circle:nth-child(3){animation-delay:2.8s}
@keyframes lh-wolken{from{transform:translateX(0)}to{transform:translateX(26px)}}
.lh-wolken{animation:lh-wolken 26s ease-in-out infinite alternate}
@keyframes lh-drehen{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.lh-sonnenstrahlen{animation:lh-drehen 90s linear infinite;transform-origin:920px 88px;transform-box:view-box}
.lh-fluegel{animation:lh-drehen 9s linear infinite;transform-box:fill-box;transform-origin:center}
.lh-wp-rad{animation:lh-drehen 11s linear infinite;transform-box:fill-box;transform-origin:center}
.lebendes-haus .zone[data-b="klima"]:hover .lh-fluegel,.haus-buehne[data-aktiv="klima"] .lh-fluegel{animation-duration:1.6s}
@keyframes lh-flackern{0%,100%{transform:scale(1)}50%{transform:scale(1.18) translateY(-1px)}}
.lh-flamme{animation:lh-flackern 1.1s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 90%}
@keyframes lh-tropfen{0%{transform:translateY(0);opacity:0}15%{opacity:.9}100%{transform:translateY(24px);opacity:0}}
.lh-tropfen circle{opacity:0}
.lebendes-haus .zone[data-b="bad"]:hover .lh-tropfen circle,.haus-buehne[data-aktiv="bad"] .lh-tropfen circle{animation:lh-tropfen 1.3s linear infinite}
.lh-tropfen circle:nth-child(2){animation-delay:.45s}
.lh-tropfen circle:nth-child(3){animation-delay:.9s}
@keyframes lh-gleissen{0%,100%{opacity:0}50%{opacity:.85}}
.lh-gleiss{opacity:0}
.lebendes-haus .zone[data-b="solar"]:hover .lh-gleiss,.haus-buehne[data-aktiv="solar"] .lh-gleiss{animation:lh-gleissen 1.6s ease-in-out infinite}
@keyframes lh-zug{to{stroke-dashoffset:-38}}
.lh-luftlinien path{stroke-dasharray:10 28;opacity:0;transition:opacity .3s}
.lebendes-haus .zone[data-b="klima"]:hover .lh-luftlinien path,.haus-buehne[data-aktiv="klima"] .lh-luftlinien path{opacity:.8;animation:lh-zug 1.2s linear infinite}
.lh-waerme path{stroke-dasharray:8 20;opacity:0;transition:opacity .3s}
.lebendes-haus .zone[data-b="heizung"]:hover .lh-waerme path,.haus-buehne[data-aktiv="heizung"] .lh-waerme path{opacity:.6;animation:lh-zug 1.4s linear infinite}
/* Jahreszeiten-Schmuck (Kadir-Wahl 13.08.2026): script.js setzt lh-saison-…
   auf #lebendes-haus – gleiche Monatsgrenzen und derselbe ?saison=-Testschalter
   wie beim Saison-Tipp. Ohne JavaScript: neutrales Haus,kein Schmuck. */
.lh-winter,.lh-sommer,.lh-herbst,.lh-fruehling{display:none;pointer-events:none}
#lebendes-haus.lh-saison-winter .lh-winter{display:block}
#lebendes-haus.lh-saison-sommer .lh-sommer{display:block}
#lebendes-haus.lh-saison-herbst .lh-herbst{display:block}
#lebendes-haus.lh-saison-fruehling .lh-fruehling{display:block}
#lebendes-haus.lh-saison-winter .lh-blumen{display:none}   /* im Winter blüht nichts */
#lebendes-haus.lh-saison-herbst .lh-blumen{display:none}
#lebendes-haus.lh-saison-herbst .lh-laub{fill:#D49A5F}     /* Baum färbt sich */
#lebendes-haus.lh-saison-sommer .lh-wp-rad{animation-duration:4.5s} /* WP kühlt sichtbar */
/* Jede Jahreszeit hat ihre eigene Stimmung: Himmel und Wiese färben sich um
   (die Stop-Klassen sitzen im Farbverlauf des Haus-SVG). Nachschärfung
   14.08.2026 – Kadir fand die erste Fassung zu dezent. */
#lebendes-haus.lh-saison-winter .lh-h1{stop-color:#DDE7F0}
#lebendes-haus.lh-saison-winter .lh-h2{stop-color:#F2F6FA}
#lebendes-haus.lh-saison-winter .lh-w1{stop-color:#F4F7FA}  /* Wiese liegt unter Schnee */
#lebendes-haus.lh-saison-winter .lh-w2{stop-color:#E2E9F1}
#lebendes-haus.lh-saison-winter .lh-laub{fill:#C9D6E2}      /* verschneite Baumkrone – kräftig genug,um vor dem Winterhimmel zu stehen (Sicht-Fund: heller verschwand sie) */
#lebendes-haus.lh-saison-winter .lh-busch{fill:#D9E3EA}     /* Büsche unterm Schnee */
#lebendes-haus.lh-saison-herbst .lh-busch{fill:#B5BC85}     /* trockene Herbstbüsche */
#lebendes-haus.lh-saison-winter .lh-sonnenkern,#lebendes-haus.lh-saison-winter .lh-sonnenstrahlen{opacity:.45} /* blasse Wintersonne */
#lebendes-haus.lh-saison-sommer .lh-h1{stop-color:#CFEAF6}  /* sattes Sommerblau */
#lebendes-haus.lh-saison-sommer .lh-h2{stop-color:#EAF7EF}
#lebendes-haus.lh-saison-sommer .lh-w1{stop-color:#CFE6AE}  /* sattes Sommergrün */
#lebendes-haus.lh-saison-sommer .lh-w2{stop-color:#B9D896}
#lebendes-haus.lh-saison-sommer .lh-sonnenkern{fill:#F5C242}
#lebendes-haus.lh-saison-sommer .lh-sonnenstrahlen{stroke:#F5C242}
#lebendes-haus.lh-saison-herbst .lh-h1{stop-color:#E7ECE9}  /* milchiger Herbsthimmel */
#lebendes-haus.lh-saison-herbst .lh-h2{stop-color:#F4F2E9}
#lebendes-haus.lh-saison-herbst .lh-w1{stop-color:#E0E0BC}  /* trockenes Gras */
#lebendes-haus.lh-saison-herbst .lh-w2{stop-color:#CFCB9F}
#lebendes-haus.lh-saison-herbst .lh-wolken{fill:#E9E7DE;opacity:1} /* graue Wolken */
#lebendes-haus.lh-saison-fruehling .lh-h1{stop-color:#DFF1FA} /* frischer Frühlingshimmel */
#lebendes-haus.lh-saison-fruehling .lh-h2{stop-color:#F1FAEE}
#lebendes-haus.lh-saison-fruehling .lh-w1{stop-color:#DCF2C4} /* junges Grün */
#lebendes-haus.lh-saison-fruehling .lh-w2{stop-color:#C4E5A8}
/* Nacht (Kadir-Wahl 14.08.2026): abends dämmert der Himmel,Mond und Sterne
   erscheinen,das Badfenster leuchtet warm – DRINNEN bleibt alles hell,das
   ist die Botschaft. Steht bewusst NACH den Jahreszeiten-Regeln: bei
   gleicher Stärke gewinnt die spätere Regel,die Nacht überstimmt also
   Himmel und Wiese jeder Saison (Schnee,Blätter usw. bleiben sichtbar).
   Blaue Stunde statt tiefer Nacht – keine dunklen Flächen (Regel 8). */
.lh-nachtdeko{display:none;pointer-events:none}
#lebendes-haus.lh-nacht .lh-nachtdeko{display:block}
#lebendes-haus.lh-nacht .lh-h1{stop-color:#6F82A6}   /* Dämmerhimmel oben */
#lebendes-haus.lh-nacht .lh-h2{stop-color:#AFBDD3}
#lebendes-haus.lh-nacht .lh-w1{stop-color:#A5BC9E}   /* Wiese im Abendlicht */
#lebendes-haus.lh-nacht .lh-w2{stop-color:#8CA689}
#lebendes-haus.lh-nacht.lh-saison-winter .lh-w1{stop-color:#C9D4E2} /* Schnee im Mondlicht */
#lebendes-haus.lh-nacht.lh-saison-winter .lh-w2{stop-color:#AEBDD0} /* (drei Klassen schlagen die Abend-Wiese) */
#lebendes-haus.lh-nacht .lh-sonnenkern,#lebendes-haus.lh-nacht .lh-sonnenstrahlen,#lebendes-haus.lh-nacht .lh-sommer{display:none}     /* Sonne und Schwalben schlafen */
#lebendes-haus.lh-nacht .lh-wolken{opacity:.35}
#lebendes-haus.lh-nacht .lh-fenster{fill:#F7D98B}    /* das Fenster leuchtet warm */
@keyframes lh-funkeln{0%,100%{opacity:1}50%{opacity:.3}}
.lh-stern{animation:lh-funkeln 2.6s ease-in-out infinite}
.lh-stern:nth-of-type(2){animation-delay:.7s}
.lh-stern:nth-of-type(3){animation-delay:1.3s}
.lh-stern:nth-of-type(4){animation-delay:.4s}
.lh-stern:nth-of-type(5){animation-delay:1.9s}
.lh-stern:nth-of-type(6){animation-delay:1s}
.lh-stern:nth-of-type(7){animation-delay:2.2s}
.lh-stern:nth-of-type(8){animation-delay:1.6s}
@keyframes lh-flocke{0%{transform:translateY(-26px);opacity:0}25%{opacity:.95}100%{transform:translateY(64px);opacity:0}}
.lh-flocke{animation:lh-flocke 5s linear infinite}
.lh-flocke:nth-of-type(2){animation-delay:1.1s;animation-duration:6.2s}
.lh-flocke:nth-of-type(3){animation-delay:2.3s;animation-duration:5.4s}
.lh-flocke:nth-of-type(4){animation-delay:.6s;animation-duration:6.8s}
.lh-flocke:nth-of-type(5){animation-delay:3.1s;animation-duration:5.8s}
.lh-flocke:nth-of-type(6){animation-delay:1.7s;animation-duration:6.4s}
.lh-flocke:nth-of-type(7){animation-delay:2.8s;animation-duration:5.2s}
.lh-flocke:nth-of-type(8){animation-delay:.3s;animation-duration:6s}
.lh-flocke:nth-of-type(9){animation-delay:1.9s;animation-duration:5.6s}
.lh-flocke:nth-of-type(10){animation-delay:3.6s;animation-duration:6.6s}
.lh-flocke:nth-of-type(11){animation-delay:.9s;animation-duration:5s}
.lh-flocke:nth-of-type(12){animation-delay:2.1s;animation-duration:6.2s}
.lh-flocke:nth-of-type(13){animation-delay:4.2s;animation-duration:5.7s}
.lh-flocke:nth-of-type(14){animation-delay:1.4s;animation-duration:6.9s}
@keyframes lh-blatt{0%{transform:translate(0,-12px) rotate(0deg);opacity:0}20%{opacity:.9}100%{transform:translate(28px,72px) rotate(140deg);opacity:0}}
.lh-blatt{animation:lh-blatt 4.6s ease-in infinite;transform-box:fill-box;transform-origin:center}
.lh-blatt:nth-of-type(2){animation-delay:1.6s;animation-duration:5.4s}
.lh-blatt:nth-of-type(3){animation-delay:3.1s;animation-duration:5s}
.lh-blatt:nth-of-type(4){animation-delay:.8s;animation-duration:5.8s}
.lh-blatt:nth-of-type(5){animation-delay:2.4s;animation-duration:4.8s}
.lh-blatt:nth-of-type(6){animation-delay:3.9s;animation-duration:5.6s}
@media (prefers-reduced-motion:reduce){
  .lh-rauch circle,.lh-wolken,.lh-sonnenstrahlen,.lh-fluegel,.lh-wp-rad,.lh-flamme,.lh-tropfen circle,.lh-gleiss,.lh-luftlinien path,.lh-waerme path,.lh-flocke,.lh-blatt,.lh-stern{animation:none}
}

/* ---------- Projekt-Reise (Startseite,14.08.2026) ----------
   Der Ablauf als gezeichneter Weg. script.js setzt .los,sobald die Szene in
   Sicht scrollt - erst dann laufen die Einzugs-Animationen. WICHTIG: Alle
   Start-Zustaende (unsichtbar,verschoben) leben NUR in den Keyframes
   (fill-mode both). Ohne JavaScript oder mit prefers-reduced-motion steht
   die Szene dadurch einfach fertig da - nichts bleibt unsichtbar haengen. */
.reise-rahmen{border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sch-s);border:1px solid var(--linie);margin-top:36px}
.projekt-reise{display:block;width:100%;height:auto}
.projekt-reise text{font-family:var(--kopf);font-weight:800;fill:#fff}
.reise-texte{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:22px;text-align:left}
.reise-hoch{display:none} /* Hochformat-Fassung: nur am Handy sichtbar (Block 21) */
.reise-schritt h2,.reise-schritt h3{font-size:1.12rem;display:flex;align-items:center;gap:10px} /* h2: danke.html sprang von h1 auf h3 (Audit 21.08.) */
.reise-schritt .rnr{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--rot),var(--rot-tief));color:#fff;display:grid;place-content:center;font-family:var(--kopf);font-weight:800;font-size:1rem;box-shadow:0 6px 14px rgba(226,0,26,.3)}
.reise-schritt p{font-size:.95rem;margin-top:8px}
/* Die Regie (Kadir-Wunsch 14.08.: „Schritt für Schritt",nicht alles auf einmal):
   0,0–2,0s  das Telefon KLINGELT – Medaillon wackelt,Klingel-Bögen blinken
   1,8s      Station 1 poppt auf (der Anruf ist angenommen)
   2,2–4,4s  der Weg zeichnet sich langsam durch die Wiese
   2,9s      der Bauplan taucht auf · 3,6s Station 2 poppt
   4,6–6,4s  der Firmenwagen fährt zur Baustelle
   6,6s      Station 3 poppt · 7,0s das Häkchen-Fähnchen erscheint */
@keyframes pr-zeichnen{from{stroke-dashoffset:1300}to{stroke-dashoffset:0}}
@keyframes pr-ein{from{opacity:0}to{opacity:.8}}
@keyframes pr-plopp{from{transform:scale(0)}70%{transform:scale(1.15)}to{transform:scale(1)}}
@keyframes pr-fahren{from{transform:translateX(-190px)}to{transform:translateX(0)}}
@keyframes pr-klingeln{0%,100%{transform:rotate(0)}12%{transform:rotate(-9deg)}24%{transform:rotate(9deg)}36%{transform:rotate(-7deg)}48%{transform:rotate(7deg)}60%{transform:rotate(-4deg)}72%{transform:rotate(4deg)}}
@keyframes pr-blinken{0%,100%{opacity:1}30%{opacity:.15}60%{opacity:1}}
@keyframes pr-auftauchen{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.reise-rahmen.los .pr-telefon{animation:pr-klingeln 1s ease-in-out 2;transform-box:fill-box;transform-origin:center}
.reise-rahmen.los .pr-klingel{animation:pr-blinken 1s ease-in-out 2}
.reise-rahmen.los .pr-weg{stroke-dasharray:1300;animation:pr-zeichnen 2.2s ease-in-out 2.2s both}
.reise-rahmen.los .pr-mittellinie{animation:pr-ein .7s ease-out 4s both}
.reise-rahmen.los .pr-plan{animation:pr-auftauchen .7s ease-out 2.9s both}
/* Die drei Stationen sind die LETZTEN g-Elemente im SVG – deshalb
   nth-LAST-of-type (nth-of-type zählte alle g-Geschwister mit). */
.reise-rahmen.los .pr-station{animation:pr-plopp .5s cubic-bezier(.34,1.56,.64,1) 1.8s both;transform-box:fill-box;transform-origin:center}
.reise-rahmen.los .pr-station:nth-last-of-type(2){animation-delay:3.6s}
.reise-rahmen.los .pr-station:nth-last-of-type(1){animation-delay:6.6s}
.reise-rahmen.los .pr-wagen{animation:pr-fahren 1.8s ease-in-out 4.6s both}
/* Hochformat-Fahrt (Kadir-Fund 14.08. abends): im Hochformat kommt der Wagen
   nicht von links wie im Panorama,sondern fährt von Station 2 den Weg
   HINUNTER zum Haus. Die Stützpunkte nähern die Kurve des Wegs an;
   Endpunkt = Ruhelage des Wagens. Muss HINTER der Panorama-Regel stehen. */
@keyframes prh-fahren{from{transform:translate(-90px,-88px)}55%{transform:translate(-36px,-14px)}to{transform:translate(0,0)}}
.reise-rahmen.los .reise-hoch .pr-wagen{animation-name:prh-fahren}
.reise-rahmen.los .pr-wimpel{animation:pr-plopp .55s cubic-bezier(.34,1.56,.64,1) 7s both;transform-box:fill-box;transform-origin:50% 100%}
@media (prefers-reduced-motion:reduce){
  .reise-rahmen.los .pr-weg,.reise-rahmen.los .pr-mittellinie,.reise-rahmen.los .pr-station,.reise-rahmen.los .pr-wagen,.reise-rahmen.los .pr-wimpel,.reise-rahmen.los .pr-telefon,.reise-rahmen.los .pr-klingel,.reise-rahmen.los .pr-plan{animation:none}
}

/* ---------- Bewertungs-Kopf mittig (Kadir-Fund 14.08.2026) ----------
   Unter der Überschrift ist alles zentriert (Karte,Sterne,Knöpfe) –
   linksbündig wirkte sie verrutscht. Muster wie beim Ablauf-Abschnitt. */
.bewertungen-mittig .kopf{text-align:center;max-width:none}

/* ---------- Die Werkbank (Über uns,Kadir: "WOWWW" 14.08.2026) ----------
   Ersetzt die frühere Zeitleiste. Nutzt die Bühnen-Bausteine des lebenden
   Hauses (.haus-buehne,.info-karte); Zeigen/Antippen hebt das Werkzeug an
   und blendet die Grundsatz-Karte ein. Ohne JavaScript: stilles Bild plus
   Start-Karte (data-aktiv="start" steht im Markup). */
.werkbank-bild{display:block;width:100%;height:auto}
.werkbank-orte .wb-zone{cursor:pointer}
.werkbank-orte .wb-zone:focus{outline:none} /* :focus - siehe Klick-Rechteck-Fund 14.08. */
.werkbank-orte .werkzeug{transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.werkbank-orte .wb-zone:hover .werkzeug,.werkbank-orte .wb-zone:focus-visible .werkzeug,.werkbank-orte[data-aktiv="waage"] .wb-zone[data-w="waage"] .werkzeug,.werkbank-orte[data-aktiv="zollstock"] .wb-zone[data-w="zollstock"] .werkzeug,.werkbank-orte[data-aktiv="zange"] .wb-zone[data-w="zange"] .werkzeug,.werkbank-orte[data-aktiv="besen"] .wb-zone[data-w="besen"] .werkzeug,.werkbank-orte[data-aktiv="handschuh"] .wb-zone[data-w="handschuh"] .werkzeug{transform:translateY(-8px)}
.werkbank-orte[data-aktiv="waage"] .info-karte[data-b="waage"],.werkbank-orte[data-aktiv="zollstock"] .info-karte[data-b="zollstock"],.werkbank-orte[data-aktiv="zange"] .info-karte[data-b="zange"],.werkbank-orte[data-aktiv="besen"] .info-karte[data-b="besen"],.werkbank-orte[data-aktiv="handschuh"] .info-karte[data-b="handschuh"]{opacity:1;visibility:visible;transform:none}
.wb-grundsatz{font-size:.85rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--rot)}
@media (prefers-reduced-motion:reduce){.werkbank-orte .werkzeug{transition:none}}

/* ---------- Wartungs-Jahresrad (Kundendienst,kleine Drei 14.08.2026) ----------
   Nutzt die Bühnen-Bausteine des lebenden Hauses (.haus-buehne,.info-karte).
   Ohne JavaScript ist Herbst vorgewählt (data-aktiv im Markup); script.js
   stellt beim Laden auf die echte Jahreszeit um und verdrahtet das Antippen. */
.jahresrad-bild{display:block;width:100%;max-width:440px;height:auto;margin:0 auto}
.jahres-orte .rad-zone{cursor:pointer}
.jahres-orte .rad-zone:focus{outline:none} /* :focus - siehe Klick-Rechteck-Fund 14.08. */
.jahres-orte .rad-flaeche{transition:fill .25s;stroke:#fff;stroke-width:3}
.jahres-orte .rad-zone[data-j="fruehling"] .rad-flaeche{fill:#EBF2F5}
.jahres-orte .rad-zone[data-j="sommer"] .rad-flaeche{fill:#F8E4C0}
.jahres-orte .rad-zone[data-j="herbst"] .rad-flaeche{fill:#FBE5E8}
.jahres-orte .rad-zone[data-j="winter"] .rad-flaeche{fill:#EAEDF2}
.jahres-orte .rad-zone[data-j="fruehling"]:hover .rad-flaeche,.jahres-orte .rad-zone[data-j="fruehling"]:focus-visible .rad-flaeche,.jahres-orte[data-aktiv="fruehling"] .rad-zone[data-j="fruehling"] .rad-flaeche{fill:#37839B}
.jahres-orte .rad-zone[data-j="sommer"]:hover .rad-flaeche,.jahres-orte .rad-zone[data-j="sommer"]:focus-visible .rad-flaeche,.jahres-orte[data-aktiv="sommer"] .rad-zone[data-j="sommer"] .rad-flaeche{fill:#EE9C0C}
.jahres-orte .rad-zone[data-j="herbst"]:hover .rad-flaeche,.jahres-orte .rad-zone[data-j="herbst"]:focus-visible .rad-flaeche,.jahres-orte[data-aktiv="herbst"] .rad-zone[data-j="herbst"] .rad-flaeche{fill:#E2001A}
.jahres-orte .rad-zone[data-j="winter"]:hover .rad-flaeche,.jahres-orte .rad-zone[data-j="winter"]:focus-visible .rad-flaeche,.jahres-orte[data-aktiv="winter"] .rad-zone[data-j="winter"] .rad-flaeche{fill:#1E3A5F}
.jahres-orte .rad-label{font-family:var(--text);font-weight:600;font-size:19px;fill:var(--tinte);text-anchor:middle;pointer-events:none;transition:fill .25s}
.jahres-orte .rad-zone:hover .rad-label,.jahres-orte .rad-zone:focus-visible .rad-label{fill:#fff}
.jahres-orte[data-aktiv="fruehling"] .rad-zone[data-j="fruehling"] .rad-label,.jahres-orte[data-aktiv="sommer"] .rad-zone[data-j="sommer"] .rad-label,.jahres-orte[data-aktiv="herbst"] .rad-zone[data-j="herbst"] .rad-label,.jahres-orte[data-aktiv="winter"] .rad-zone[data-j="winter"] .rad-label{fill:#fff}
/* Sommer-Segment: Tinte statt Weiß (Kadir-OK 15.08.,Bildvergleich) – Weiß
   auf Sonnen-Orange #EE9C0C schafft nur ~2,3:1,Tinte dagegen 7,7:1
   (gleiche Paarung wie die dokumentierte A3-Regel weiter oben). */
.jahres-orte .rad-zone[data-j="sommer"]:hover .rad-label,.jahres-orte .rad-zone[data-j="sommer"]:focus-visible .rad-label,.jahres-orte[data-aktiv="sommer"] .rad-zone[data-j="sommer"] .rad-label{fill:var(--tinte)}
.jahres-orte .rad-mitte{font-family:var(--kopf);font-weight:700;font-size:22px;fill:var(--tinte)}
.jahres-orte[data-aktiv="fruehling"] .info-karte[data-b="fruehling"],.jahres-orte[data-aktiv="sommer"] .info-karte[data-b="sommer"],.jahres-orte[data-aktiv="herbst"] .info-karte[data-b="herbst"],.jahres-orte[data-aktiv="winter"] .info-karte[data-b="winter"]{opacity:1;visibility:visible;transform:none}

/* ---------- Danke-Seite: die Vorgangsnummer als Ticket (kleine Drei,14.08.2026) ----------
   Gleiche IDs wie bisher (#vorgangs-box/#vorgangs-code - JS und Smoke-Test
   haengen daran),nur das Kleid ist neu: rotes Kopfband,grosse Nummer,Perforations-Linie wie an einem Abriss-Coupon. */
.vorgangs-box{padding:0;overflow:hidden;gap:0;background:#fff}
.vorgangs-box span{background:linear-gradient(135deg,var(--rot),var(--rot-tief));color:#fff;padding:12px 16px}
.vorgangs-box b{padding:18px 26px 10px;font-size:2.1rem}
.vorgangs-box small{padding:0 26px 18px}
.vorgangs-box small::before{content:"";display:block;border-top:2px dashed var(--linie);margin:0 auto 12px}
.danke-weiter .reise-schritt h2,.danke-weiter .reise-schritt h3{justify-content:center}
.danke-weiter .reise-schritt p{text-align:center}

/* ---------- 404: der verfahrene Monteur (kleine Drei,14.08.2026) ---------- */
.monteur-verfahren{display:block;width:100%;max-width:520px;height:auto;margin:0 auto 26px}
@keyframes mv-wippen{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.mv-frage{animation:mv-wippen 1.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center;font-family:var(--kopf)}
@media (prefers-reduced-motion:reduce){.mv-frage{animation:none}}

/* ---------- Projekt-Landkarte (Referenzen,13.08.2026) ----------
   Nutzt die Bühnen-Bausteine des lebenden Hauses (.haus-buehne,.info-karte,.legende) – hier kommen nur Karte,Pins und die Sichtbarkeits-Regeln der
   acht Projekt-Karten dazu. Die Start-Karte deckt schon die
   .haus-buehne[data-aktiv="start"]-Regel oben ab. */
.projekt-landkarte{display:block;width:100%;height:auto}
.projekt-orte[data-aktiv="koeln"] .info-karte[data-b="koeln"],.projekt-orte[data-aktiv="frankfurt"] .info-karte[data-b="frankfurt"],.projekt-orte[data-aktiv="seligenstadt"] .info-karte[data-b="seligenstadt"],.projekt-orte[data-aktiv="aschaffenburg"] .info-karte[data-b="aschaffenburg"],.projekt-orte[data-aktiv="grossostheim"] .info-karte[data-b="grossostheim"],.projekt-orte[data-aktiv="hoechst"] .info-karte[data-b="hoechst"],.projekt-orte[data-aktiv="woerth"] .info-karte[data-b="woerth"],.projekt-orte[data-aktiv="grossheubach"] .info-karte[data-b="grossheubach"]{opacity:1;visibility:visible;transform:none}
.projekt-orte .info-karte{justify-content:flex-start;gap:10px;padding:24px}
.projekt-orte .info-karte img{width:100%;max-height:150px;object-fit:cover;border-radius:var(--r-m);border:1px solid var(--linie)}
.projekt-orte .p-ort{font-size:.85rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--stahl)}
.projekt-orte .p-ort b{color:var(--rot)}
.projekt-orte .info-karte h3{font-size:1.15rem}
.projekt-orte .info-karte p{font-size:.94rem}
/* Pins: wachsen beim Zeigen aus der Spitze,Betrieb pulsiert */
.projekt-landkarte .pin{cursor:pointer}
.projekt-landkarte .pin .pin-form{transition:transform .2s cubic-bezier(.34,1.56,.64,1);transform-box:fill-box;transform-origin:50% 100%}
.projekt-landkarte .pin:hover .pin-form,.projekt-landkarte .pin:focus-visible .pin-form{transform:scale(1.18)}
.projekt-orte[data-aktiv="koeln"] .pin[data-p="koeln"] .pin-form,.projekt-orte[data-aktiv="frankfurt"] .pin[data-p="frankfurt"] .pin-form,.projekt-orte[data-aktiv="seligenstadt"] .pin[data-p="seligenstadt"] .pin-form,.projekt-orte[data-aktiv="aschaffenburg"] .pin[data-p="aschaffenburg"] .pin-form,.projekt-orte[data-aktiv="grossostheim"] .pin[data-p="grossostheim"] .pin-form,.projekt-orte[data-aktiv="hoechst"] .pin[data-p="hoechst"] .pin-form,.projekt-orte[data-aktiv="woerth"] .pin[data-p="woerth"] .pin-form,.projekt-orte[data-aktiv="grossheubach"] .pin[data-p="grossheubach"] .pin-form{transform:scale(1.18)}
.projekt-landkarte .pin:focus{outline:none} /* :focus - siehe Klick-Rechteck-Fund 14.08. */
/* Orts-Pillen (Kadir-Wahl "Variante B" 14.08. abends): am Handy ersetzen sie
   die winzigen Karten-Beschriftungen als Tippziele. Grundzustand versteckt,die Handy-Weiche steht in Block 22 am DATEIENDE (CSS-Reihenfolge). */
.landkarte-hoch{display:none} /* Hochformat-Karte: nur am Handy sichtbar (Block 22) */
/* Safari-Antipp-Blitz abschalten (Kadir-Fund 15.08. am iPhone: "kurz ein
   Quadrat schwarz" beim Tippen auf die Orts-Pillen). iOS legt beim Tippen
   ein dunkles Rechteck über das Element - bei unseren gezeichneten Flächen
   und Pillen wirkt das wie ein Fehler. Die Rückmeldung übernehmen die
   eigenen Zustände (Färbung,roter Rand,Druck-Feedback). */
.karte-chips button,.projekt-landkarte .pin,.lebendes-haus .zone,.werkbank-orte .wb-zone,.jahres-orte .rad-zone,.team-haus .haus-zone{-webkit-tap-highlight-color:transparent}
.karte-chips{display:none;flex-wrap:wrap;gap:8px;margin-top:4px}
.karte-chips button{font-family:var(--text);font-weight:600;font-size:.9rem;color:var(--tinte);background:#fff;border:1px solid var(--linie);border-radius:999px;padding:10px 15px;min-height:44px;cursor:pointer;box-shadow:0 2px 8px rgba(22,27,34,.06)}
.karte-chips button.aktiv{border-color:var(--rot);color:var(--rot)}
.karte-chips button:active{transform:scale(.97)} /* kurzes Druck-Feedback wie die Anrufleiste */
.karte-chips button:focus-visible{outline:3px solid var(--tinte);outline-offset:2px}
/* Bedien-Jagd 16.08.: Der "Zum Projekt"-Sprung landete 3px unterm Kopfbalken,weil das Ziel beim Springen noch um die Einblende-Verschiebung (22px)
   versetzt steht - deshalb hier mehr Sprung-Polster als die globalen 96px. */
.projekt-karte{scroll-margin-top:124px}
.projekt-landkarte .ortslabel{font-family:var(--text);font-weight:600;font-size:20px;fill:var(--tinte);pointer-events:none;paint-order:stroke;stroke:#fff;stroke-width:5px;stroke-linejoin:round}
.projekt-landkarte .gebietslabel{font-family:var(--text);font-weight:600;font-size:19px;letter-spacing:.12em}
@keyframes hq-puls{0%{transform:scale(.6);opacity:.55}100%{transform:scale(1.9);opacity:0}}
.projekt-landkarte .hq-ring{animation:hq-puls 2.6s ease-out infinite;transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:reduce){
  .projekt-landkarte .hq-ring{animation:none;opacity:0}
  .projekt-landkarte .pin .pin-form{transition:none}
}

/* ============================================================
   HANDY-NACHBESSERUNGEN (12.08.2026,Kadir-Freigabe)
   Dieser Block steht bewusst ganz am DATEIENDE: Handy-Regeln müssen HINTER
   den Grundregeln stehen,die sie überschreiben – sonst gewinnt die spätere
   Grundregel und die Handy-Regel ist wirkungslos (Fund 12.08.,siehe Zeile ~92).
   ============================================================ */

/* 1) Die Abstände aus der Sichtprüfung 08.08. – jetzt wirksam */
@media(max-width:640px){
  .seiten-hero{padding:36px 0 60px} /* mehr Luft nach unten: Hero-Knöpfe nicht hinter der Anrufleisten-Insel */
}
@media(max-width:480px){
  .seiten-hero{padding-top:16px}
  .seiten-hero h1{margin-top:8px}
  .seiten-hero p{font-size:.98rem;margin-top:10px;line-height:1.55}
  .hero{padding:44px 0 64px}
}

/* 2) Schwarze Zeile am Handy kürzer: "Meisterbetrieb für Haustechnik" steht
      direkt darunter im Logo,doppelt braucht es das auf kleinen Geräten nicht. */
@media(max-width:640px){.topbar .nur-desk{display:none}}

/* 3) Handy-Himmel: Sonne + Wolken in ECHTER Größe statt des auf 84px
      geschrumpften Desktop-Panoramas (dort wäre die Sonne nur 19px groß –
      deshalb war die Deko am Handy früher ganz abgeschaltet). */
.deko-himmel svg.dh-schmal{display:none}
@media(max-width:700px){
  .deko-himmel{display:block}
  .deko-himmel>svg:not(.dh-schmal){display:none}
  .deko-himmel svg.dh-schmal{display:block;position:absolute;height:auto}
  /* Feste Größe,Anker rechts oben: so hält die Sonne auf JEDER Bildschirmbreite
     Abstand zur längsten Eyebrow-Zeile (endet bei x≈303). Eine mitskalierende
     Fassung lief bei 360px in das Wort „QUALIFIKATIONEN" (Fund 12.08.). */
  .deko-himmel .dh-sonne{top:4px;right:6px;width:72px}
  .deko-himmel .dh-wolken{top:12px;left:14px;width:min(200px,54%)}
}
/* Unter 390px wird es zwischen der längsten Eyebrow-Zeile und der Sonne zu eng.
   Statt die Sonne zu opfern (Kadir will die Symbole gerade AM HANDY sehen),hält
   die Zeile den Eckplatz frei und bricht dort um – kostet eine Zeile,nur auf
   sehr kleinen Geräten. */
@media(max-width:389px){
  /* Block statt Flex: sonst rutscht der ganze Text als EIN Flex-Element in die
     zweite Zeile und der rote Punkt bleibt allein oben stehen (im Bild gesehen).
     Als Block bricht der Text normal um und der Punkt bleibt am ersten Wort. */
  .hero .eyebrow,.seiten-hero .eyebrow{display:block;padding-right:74px}
  .hero .eyebrow::before,.seiten-hero .eyebrow::before{display:inline-block;vertical-align:middle;margin-right:10px;position:relative;top:-1px}
}

/* 4) Handy-Wiese: eigene schmale Fassung. Die Desktop-Wiese wird per
      "slice" auf die Höhe skaliert – am Handy sieht man dadurch nur den
      mittleren Ausschnitt,Bäumchen und Wärmepumpe fallen raus. */
.fuss-kante svg.fk-schmal{display:none}
@media(max-width:640px){
  .fuss-kante>svg:not(.fk-schmal){display:none}
  .fuss-kante svg.fk-schmal{display:block;width:100%;height:auto}
}

/* 5) Google-Bewertung in der Vertrauens-Zeile: die Note darf kräftiger sein
      als der Rest der Zeile,bleibt aber Tinte-Schwarz (kein neuer Farbton). */
.trust .stern{color:var(--tinte);font-weight:800}

/* ============================================================
   TOPF 3 – PLATZ UND LESBARKEIT AM HANDY (12.08.2026,Kadir-Freigabe)
   Steht wie Topf 1 bewusst am DATEIENDE,damit die Handy-Regeln ihre
   Grundregeln sicher überschreiben.
   ============================================================ */

/* 6) Zeitleiste auf „Über uns": Jahr ÜBER den Text statt daneben.
      Die 76px-Jahresspalte plus Achse fraßen 142 der 360 Handy-Pixel –
      gemessen blieben 20 Zeichen pro Zeile (angenehm sind 45–75). */
@media(max-width:640px){
  .zeitachse{padding-left:22px}
  .za-punkt{grid-template-columns:1fr;gap:2px;margin-bottom:22px}
  .za-punkt::before{left:-22px}
}

/* 7) Erste-Hilfe-Liste (Kundendienst): 64px Einzug für einen 30px-Kreis
      ließen nur 18 Zeichen pro Zeile übrig. */
@media(max-width:640px){
  .hilfe-liste li{padding:16px 16px 16px 54px}
  .hilfe-liste li::before{left:14px;top:14px}
}

/* 8) Kasten-Polster: keiner dieser Bausteine hatte eine Handy-Fassung.
      22/18px statt 24–34px holt in jeder Karte rund 24px Textbreite zurück –
      „Keltenstraße 1 · 63939 Wörth am Main" bricht damit nicht mehr um. */
@media(max-width:640px){
  .cta-block{padding:28px 22px;gap:14px}
  .kbox,.gmaps-box{padding:22px 18px}
  .assi{padding:24px 18px}
  .karte{padding:22px 18px}
  .punkt{padding:22px 18px}
  .stimme,.projekt-karte{padding:20px 18px}
}

/* 9) Menü: 120px Polster sollten die letzten Punkte über der Anrufleiste
      halten – die ist bei offenem Menü aber gar nicht sichtbar (die weiße
      Kopfleiste liegt darüber). Es war reine Leerfläche unter „Kontakt". */
@media(max-width:919px){
  .nav-mobil.offen{padding-bottom:32px}
}

/* 10) Tippziele auf 44px bringen (Daumenmaß). Die Anrufleiste selbst bleibt
       unangetastet – ihr Umbruch bei großer Schrift ist eine Errungenschaft. */
@media(max-width:919px){
  .flinks a{padding:9px 0}
  .pille{padding:.7em 1.2em}
  .social a{width:44px;height:44px}
  .adresse .tel{display:inline-block;padding:7px 0}
}

/* 11) entfallen 14.08. abends: letzte Reste der zurückgebauten Haus-Anfrage
       (.anfrage-haus) aufgeräumt – kein Markup nutzt die Klasse mehr. */

/* 12) Sicherheitsabstand unten robuster: 76px war eine feste Zahl,während die
       Anrufleiste bei großer Schrift zweizeilig wird. Dazu scroll-padding,damit Sprungziele und fokussierte Felder nicht unter der Leiste landen. */
@media(max-width:919px){
  body{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  html{scroll-padding-bottom:96px}
}

/* 13) Leistungs-Karten am Handy kompakt (Kadir-Freigabe 12.08. nach Vergleichsbild):
       Symbol neben den Titel statt darüber – spart 203px,also rund ein Viertel
       Handy-Bildschirm auf dem Weg zu den Referenzen. Elementfarben und die
       Klickfläche der ganzen Karte bleiben unangetastet.
       Die Projektfotos auf referenzen bleiben BEWUSST dreispaltig: die zweispaltige
       Fassung wurde gebaut und angesehen – die Karte wurde doppelt so hoch und das
       letzte Foto stand allein in seiner Reihe (Kadir-Entscheidung 12.08.). */
@media(max-width:640px){
  /* minmax(0,1fr) statt 1fr: sonst darf die Titelspalte nicht schrumpfen und die
     Jobs-Seite lief bei 200% Schrift quer (415px statt 390 – sofort gemessen und
     behoben). Dieselbe Falle wie bei Punkt 29. */
  .karte{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;row-gap:8px;padding:22px 18px}
  .karte svg{width:44px;height:44px;padding:10px}
  .karte h3{align-self:center;margin:0;overflow-wrap:anywhere}
  .karte p,.karte .mehr{grid-column:1/-1;min-width:0}
}

/* ============================================================
   TOPF 4 – FLUSS DURCH DIE SEITEN (12.08.2026)
   ============================================================ */

/* 14) Vor der Wiese standen am Handy ~124px leere Fläche (80px Rand + 44px
       Sektionspolster) – fast ein Sechstel Bildschirm. Die Seite hörte auf und
       DANN kam der Garten,statt im Garten zu enden. */
@media(max-width:640px){.fuss-kante{margin-top:40px}}

/* 15) Vertrauens-Leiste auf der Startseite (Kadir-Freigabe 12.08.): Sie war der
       einzige Grau-Block der Website mit rasiermesserscharfen Querlinien – genau
       die Stoesse,die das Wellen-System sonst ueberall weichzeichnet. Und sie
       liegt im ersten Scroll-Moment der Startseite. Beide Nachbarn sind weiss
       (Hero laeuft unten in Weiss aus,Logo-Band ist weiss),die Wellen sitzen
       also an echten Weiss/Grau-Naehten. Die Trennlinie zum Logo-Band entfaellt,sonst laege eine harte Kante direkt unter der weichen. */
.zertleiste{padding:44px 0;
  background:var(--welle-oben) top center/100% 26px no-repeat,
             var(--welle-unten) bottom center/100% 26px no-repeat,
             var(--papier)}
.zertleiste+.logoband{border-top:0}
@media(max-width:640px){
  .zertleiste{padding:34px 0;background-size:100% 18px,100% 18px,auto}
}

/* 16) Zertleiste am Handy - FASSUNG 4 (Kadir-Wunsch 16.08.,per Vorschau-Bild
      abgenommen): Symbol mittig OBEN,darunter Stichwort und fette Erklärzeile,jeder Punkt in sich zentriert und symmetrisch,Symbole leicht vergrößert.
      Löst das "sieht komisch aus in der Ausrichtung"-Gefühl der gestapelten
      Liste (Fassung 3,12./13.08.). VERWORFEN bleiben und nie wiederholen:
      mittige EINZELZEILEN (wirkten verrutscht) · flex-wrap (Text fiel unters
      Symbol,lief bei 200% quer) · Tabellen-Spalten (Wortbrüche) ·
      width:max-content (läuft bei 200% Schrift quer). Desktop: eine Zeile. */
@media(max-width:640px){
  .zertleiste .wrap{flex-direction:column;align-items:center;gap:22px}
  .zertleiste>.wrap>span{max-width:100%;flex-direction:column;align-items:center;text-align:center;gap:8px}
  .zertleiste .zl-text{min-width:0;display:block}
  .zertleiste .zl-text b{display:block;margin-top:2px}
  .zertleiste .zert-kreis{width:34px;height:34px}
  .zertleiste .zert-kreis svg{width:18px;height:18px}
}

/* 17) iOS-Zoom-Bremse fuer ALLE uebrigen Bedienelemente (Kadir-Fund 12.08.,siehe Kommentar bei .formular input): jedes fokussierbare Feld unter
      16px loest am iPhone den Seiten-Zoom aus. Gilt auch fuer die visuell
      versteckten Radio-Inputs der Kacheln/Pillen (per Tastatur fokussierbar). */
input,textarea,select{font-size:max(1rem,16px)}

/* 18) Kontakt-Kopf kompakt (Kadir-Wunsch 13.08.2026): Der Kopf und der
      Anfrage-Assistent ruecken zusammen (vorher 124px toter Leerraum) und
      der Kopf hat KEINE eigene Sonne mehr (DEKO_WOLKEN im Generator).
      Galt urspruenglich der Haus-Anfrage-Grafik; die ist am 13.08.2026 auf
      Kadirs Wunsch entfallen - jetzt rueckt der Assistent selbst hoch
      (.anfrage-oben). Steht bewusst am DATEIENDE,damit es die .sektion-/
      .seiten-hero-Grundregeln sicher ueberschreibt (CSS-Reihenfolge-Regel!). */
.seiten-hero.kompakt{padding-bottom:16px}
.sektion.anfrage-oben{padding-top:30px}
@media (max-width:700px){
  .seiten-hero.kompakt{padding-bottom:8px}
  .sektion.anfrage-oben{padding-top:14px}
}

/* 19) Lebendes Haus am Handy: Haus und Info-Karte untereinander statt
      nebeneinander. Steht am DATEIENDE hinter seiner Grundregel
      (.haus-buehne,weiter oben) – CSS-Reihenfolge-Regel. */
@media (max-width:860px){
  .haus-buehne{grid-template-columns:1fr;gap:16px}
}

/* 20) Partner-Raster am Handy (14.08.2026): Bei ungerader Kachelzahl stuende
      die letzte Kachel allein halbbreit da (Sicht-Fund bei 9 Kacheln,Geberit).
      Eine einzelne letzte Kachel laeuft deshalb ueber die volle Breite –
      wirkt gewollt statt verrutscht. Greift nur im 2-Spalten-Raster. */
@media (max-width:759px){
  .partner-grid figure:last-child:nth-child(odd){grid-column:1/-1}
}

/* 21) Projekt-Reise am Handy: die drei Texte untereinander,und statt des
      Panoramas erscheint die HOCHFORMAT-Fassung (Kadir-Wahl 14.08. abends,Variante B) – der Weg schlängelt von oben nach unten,nichts ist
      abgeschnitten,kein Wischen. Das frühere Wisch-Panorama wirkte am
      Handy abgeschnitten. Am Desktop bleibt das breite Panorama.
      Steht am DATEIENDE hinter den Grundregeln (CSS-Reihenfolge). */
@media (max-width:760px){
  .reise-texte{grid-template-columns:1fr;gap:18px}
}
@media (max-width:640px){
  .projekt-reise{display:none}
  .projekt-reise.reise-hoch{display:block}
}

/* 22) Projekt-Landkarte am Handy UND Tablet (Kadir-OK 15.08.,erweitert
      16.08. nach Kadir-Frage "woran nicht gedacht?"): Die Quer-Karte blieb
      am Handy ein flacher Streifen (~6px-Namen) - und im Tablet-Land
      861-1079px schrumpften die Ortsnamen ebenfalls unter 12px (gemessen:
      9,5px bei 880,11,2px bei 1024; erst ab ~1080px sind es >=12px).
      Deshalb gilt das Reise-Rezept bis 1079px: Quer-Karte aus,HOCHFORMAT-
      Fassung an,Bühne einspaltig (die generische Regel greift nur bis
      860px),Orts-Pillen als Tippziele. Ab 1080px die Quer-Karte wie gehabt. */
@media (max-width:1079px){
  #projekt-landkarte{grid-template-columns:1fr}
  .projekt-landkarte{display:none}
  /* max-width: sonst wuerde die Hochkant-Karte auf dem quergehaltenen
     Tablet ~1400px hoch - gedeckelt und zentriert bleibt sie handlich */
  .projekt-landkarte.landkarte-hoch{display:block;max-width:640px;margin:0 auto}
  .karte-chips{display:flex;justify-content:center}
}

/* 15) Schlanker Kopf fuer die Rechtsseiten (Kadir-Fund 17.08.,iPhone):
      Der Seitenkopf traegt am Handy 60px Extra-Luft nach unten,damit
      Hero-Knoepfe nicht hinter der Anruf-Insel verschwinden. Impressum/
      Datenschutz/AGB haben keine Knoepfe - sie erbten die Luft trotzdem
      und wirkten "leer". Zwei Klassen schlagen die eine Klasse der
      Handy-Regel,deshalb wirkt diese Regel bei allen Breiten. */
.seiten-hero.hero-schlank{padding-bottom:20px}

/* 16) Breitbild-Anker fuer den Deko-Himmel (Kadir 17.08.: Sonne war je nach
      Seite/Monitor unterschiedlich gross und hing einsam am Fensterrand;
      Messung: ab ~2260px deckelt der flache Unterseiten-Kopf die Sonne bei
      110px,die Startseite waechst weiter -> uneinheitlich). Gleiches Rezept
      wie die Handy-Sonne vom 12.08. (feste Groesse + fester Anker),nur am
      oberen Ende: Ab 1400px Fensterbreite wird die Himmel-Zeichnung nicht
      mehr mitgedehnt,sondern bleibt 1400px breit mittig ueber der
      Inhaltsspalte verankert - Sonne ueberall exakt gleich gross und gleich
      nah am Inhalt. Unter 1400px aendert sich nichts. */
@media(min-width:1400px){
  .deko-himmel>svg:not(.dh-schmal){width:1400px;height:300px;margin:0 auto}
}

/* ---------- Handy-Feinschliff (Audit 21.08.2026) ---------- */
@media(max-width:430px){.nur-seit{display:none}} /* Topbar: "seit 2011" faellt weg statt umzubrechen */
@media(max-width:360px){.hero-zahlen > :last-child:nth-child(odd){grid-column:1/-1}} /* keine leere Kachelzelle */
@media(max-width:640px){footer .unten{padding-right:84px}} /* Chat-Blase verdeckte die Copyright-Zeile */