/* Grüne Phase GmbH — erzeugt von stil.py, nicht von Hand ändern */
@font-face{font-family:"Outfit";font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/outfit-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Outfit";font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/outfit-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2")}

:root{
  /* Farbwelt — gemessen am Logo (gruene-phase-logo-schwarz.svg, 06.09.2026) */
  --gruen:#5E950F; --gruen-hell:#84A70B; --gruen-text:#4C7A0B; --gruen-tief:#3F6608;
  --morgen:#E4956F; --morgen-hell:#F5AC8B;
  --l1:#6B3F23; --l2:#28282A; --l3:#767678;   /* Leiterfarben DIN EN 60445: L1 braun, L2 schwarz, L3 grau (Kevin, 06.09.2026) */
  --tinte:#28282A; --grau:#5F5F62; --linie:#D9DBCF;
  --grund:#FBFAF6; --grund-2:#F1F3EA;
  --nacht:#16191B; --nacht-2:#1F2325; --nacht-text:#E8EADF;
  --gelb:#F5CB47; --gelb-hell:#FFF3C4;
  --display:"Outfit",system-ui,sans-serif;
  --text:"Atkinson Hyperlegible",system-ui,sans-serif;
  /* --mono hieß so, solange hier DM Mono stand. Marcel, 01.10.2026: keine Schreibmaschinenschrift —
     alle Kennzeilen, Bildunterschriften und Brotkrumen laufen jetzt in Outfit. */
  --mono:"Outfit",system-ui,sans-serif;
  --breite:1180px; --schmal:760px;
  --rand:clamp(1.25rem,5vw,3rem); --luft:clamp(2.8rem,6vw,4.8rem);
  --t-display:clamp(2.3rem,5vw,4.2rem); --t-h2:clamp(1.7rem,3.2vw,2.5rem); --t-h3:1.25rem;
  --radius:4px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;font-family:var(--text);font-size:1.0625rem;line-height:1.6;color:var(--tinte);background-color:var(--grund)}
h1,h2,h3{font-family:var(--display);line-height:1.1;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:var(--t-display);font-weight:700}
h2{font-size:var(--t-h2);font-weight:700}
h3{font-size:var(--t-h3);font-weight:700}
p{margin:0 0 1em;max-width:68ch}
a{color:var(--gruen-tief)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--gruen-hell);outline-offset:3px}
.wrap{max-width:var(--breite);margin:0 auto;padding:0 var(--rand)}
.skip{position:absolute;left:-999px;top:0;background:var(--nacht);color:#fff;padding:.6rem 1rem;z-index:99}
.skip:focus{left:1rem;top:1rem}
.entwurf{background-color:var(--gelb);color:var(--tinte);font-family:var(--mono);font-size:.8rem;padding:.45rem var(--rand);text-align:center;letter-spacing:.02em}

/* Kopf — dunkel, wie der Hero */
.kopf{position:sticky;top:0;z-index:20;background-color:rgba(22,25,27,.92);backdrop-filter:blur(6px);border-bottom:1px solid #2C3134;color:var(--nacht-text)}
.kopf .wrap{display:flex;align-items:center;gap:1rem;min-height:74px}
/* Die Kopfreihe muss in den Inhaltsraster passen (max. --breite). Logo, acht Menuepunkte
   und der Knopf brauchen zusammen rund 1050 px — daher hier engere Abstaende als sonst.
   Sonst lief die Reihe zwischen 1260 und 1430 px aus dem Raster heraus, die Seite scrollte
   seitlich und der feststehende Kopf schob sich ueber das Logo. */
.kopf .btn{padding:.7rem 1rem;font-size:.9rem}
.logo{display:flex;align-items:center;text-decoration:none;color:inherit}
.logo-quer{display:flex;align-items:center;gap:.7rem}
.logo-quer .lq-signet{height:54px;width:auto}  /* 54 statt 48: der Ausschnitt ist jetzt vollständig, das Zeichen bleibt gleich groß */
.logo-quer .lq-wort{height:30px;width:auto}
.nav{margin-left:auto;display:flex;gap:.95rem;align-items:center}
.nav a{white-space:nowrap;color:var(--nacht-text);text-decoration:none;font-weight:700;font-size:.9rem;padding:.6rem 0;border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--gruen-hell)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:52px;padding:.7rem 1.35rem;border-radius:var(--radius);
  font-family:var(--display);font-weight:600;font-size:1.02rem;text-decoration:none;border:2px solid var(--gruen-text);background-color:var(--gruen-text);color:#fff;transition:background .18s ease}
.btn:hover{background-color:var(--gruen-tief);border-color:var(--gruen-tief)}
.btn-2{background-color:transparent;color:var(--tinte);border-color:var(--tinte)}
.btn-2:hover{background-color:var(--tinte);color:#fff}
.btn-hell,.dunkel a.btn-hell,.kopf a.btn-hell{background-color:var(--gruen-hell);border-color:var(--gruen-hell);color:var(--nacht)}
.btn-hell:hover{background-color:#9CC53A;border-color:#9CC53A}
.btn-rand,.dunkel a.btn-rand{background-color:transparent;color:#fff;border-color:#fff}
.btn-rand:hover{background-color:#fff;color:var(--nacht)}
.btn-tel{background-color:transparent;color:var(--gruen-tief);border-color:transparent;font-family:var(--mono);font-weight:500;letter-spacing:.02em}
.burger{display:none}

/* Knoten (Eyebrow-System): Leitung — Symbol im Kreis — Leitung — Text */
.knoten{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--mono);font-weight:500;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--grau);margin-bottom:1rem}
.knoten .leitung{width:22px;height:2px;background-color:var(--linie);display:inline-block}
.knoten-sym{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;min-width:48px;height:48px;padding:0 .55rem;border:2.5px solid var(--gruen);border-radius:50%;color:var(--gruen-text);font-weight:700;letter-spacing:0;text-transform:none;font-size:1.02rem}  /* 34 → 48 px: Marcel, 01.10.2026 „zu klein“ */
.knoten.k-l1 .knoten-sym{border-color:var(--l1);color:var(--l1)}
.knoten.k-l2 .knoten-sym{border-color:var(--l2);color:var(--l2)}
.knoten.k-l3 .knoten-sym{border-color:var(--l3);color:var(--grau)}
.phasen .leiter span{color:var(--gruen-text)}
.dunkel .knoten{color:#B9BDB0}.dunkel .knoten .leitung{background-color:#3A3F44}.dunkel .knoten-sym{border-color:var(--gruen-hell);color:var(--gruen-hell)}

/* Abschnitte */
section{padding:var(--luft) 0}
.bg-2{background-color:var(--grund-2)}
.dunkel{background-color:var(--nacht);color:var(--nacht-text)}
.dunkel h1,.dunkel h2,.dunkel h3{color:#fff}
.dunkel a{color:var(--gruen-hell)}
.lead{font-size:1.22rem;line-height:1.5;color:#3C3C3F;max-width:60ch}
.dunkel .lead{color:#C7C9BE}

/* Hero: geblurrtes Foto, dunkler Schleier, Schaltplan rechts */
.hero{position:relative;overflow:hidden;padding:clamp(3rem,7vw,6rem) 0 clamp(2.5rem,5vw,4rem);isolation:isolate}
.hero-bild{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center 60%;transform:scale(1.04)}
.hero-schleier{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(22,25,27,.9) 0%,rgba(22,25,27,.78) 50%,rgba(22,25,27,.55) 100%)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.5rem,4vw,4rem);align-items:center}
.hero .lead{color:#D7DACF}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
.ill{width:100%;height:auto;display:block}
.ill-schema{max-width:640px;margin:0 auto}
.sch-mono{font-family:var(--mono);fill:#B9BDB0}
.ill-mono{font-family:var(--mono);fill:var(--grau)}
.ill-nr{font-family:var(--display);font-weight:700;font-size:21px;fill:var(--gruen-text)}

/* Faktenzeile (luftig) */
.fakten{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;padding:1.4rem 0 0;border-top:1px solid #3A3F44;margin-top:2.6rem}
.fakt strong{display:block;font-family:var(--display);font-size:1.3rem;font-weight:700;color:var(--gruen-hell);margin-bottom:.15rem}
.fakt span{color:#B9BDB0;font-size:.95rem}

/* Zweispalter */
.zwei{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:center}
.zwei.umgekehrt>*:first-child{order:2}

/* Fotos */
.foto{margin:0}
.foto img{display:block;width:100%;height:auto;border-top:6px solid var(--gruen)}
.foto figcaption{font-family:var(--mono);font-size:.72rem;color:var(--grau);letter-spacing:.04em;margin-top:.4rem}

/* Drei Phasen */
.phasen{list-style:none;padding:0;margin:1.8rem 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--linie)}
.phasen li{padding:1.4rem 1.4rem 1.4rem 0;position:relative}
.phasen li+li{padding-left:1.4rem;border-left:1px solid var(--linie)}
.phasen .leiter{display:flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.85rem;color:var(--grau);margin-bottom:.8rem}
.phasen .leiter i{display:inline-block;width:36px;height:6px;border-radius:3px}
.phasen li:nth-child(1) .leiter i{background-color:var(--l1)}.phasen li:nth-child(2) .leiter i{background-color:var(--l2)}.phasen li:nth-child(3) .leiter i{background-color:var(--l3)}
.phasen b{display:block;font-family:var(--display);font-size:1.3rem;margin-bottom:.4rem;line-height:1.2}
.phasen p{font-size:.98rem;margin:0;color:#3C3C3F}
.phasen q{font-style:italic;color:var(--tinte)}
.pe-zeile{margin-top:1.4rem;padding:1rem 0 0;border-top:1px solid var(--linie);display:flex;gap:1rem;align-items:flex-start}
.pe-zeile .ikone{color:var(--gruen);flex:none;width:40px;height:40px}
.pe-zeile p{margin:0;font-size:.98rem}

/* Leistungen */
.leistung-haupt{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(1.5rem,4vw,3.5rem);background-color:var(--grund);border:1px solid var(--linie);border-top:6px solid var(--gruen);padding:clamp(1.4rem,3vw,2.6rem);margin:1.5rem 0}
.dazu{list-style:none;padding:0;margin:0;columns:2;column-gap:2rem}
.dazu li{break-inside:avoid;padding:.35rem 0 .35rem 1.4rem;position:relative;font-size:.98rem;hyphens:auto;overflow-wrap:anywhere}  /* lange Woerter wie Marktstammdatenregister machten die Spalte sonst breiter als den Kasten — ab 820 px scrollte die Seite dadurch seitlich */
.dazu li::before{content:"";position:absolute;left:0;top:.95rem;width:.75rem;height:3px;background-color:var(--gruen)}
.dazu-kopf{font-size:.8rem;font-family:var(--mono);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--grau)}
.kacheln{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background-color:var(--linie);border:1px solid var(--linie)}
.kachel{background-color:var(--grund);padding:1.2rem 1.1rem;text-decoration:none;color:inherit;display:block}
.kachel:hover{background-color:#fff}
.kachel .ikone{color:var(--gruen);margin-bottom:.6rem;width:44px;height:44px}
.kachel b{display:block;font-family:var(--display);font-size:1.08rem;margin-bottom:.25rem}
.kachel span{font-size:.92rem;color:var(--grau);display:block}

/* Ablauf */
.ill-ablauf{max-width:900px;margin:1.5rem auto 0}

/* Planung (dunkel, Foto im Hintergrund) */
.planung{position:relative;overflow:hidden;isolation:isolate}
.planung-bild{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;filter:blur(10px);transform:scale(1.08);opacity:.9}
.planung-schleier{position:absolute;inset:0;z-index:-1;background-color:rgba(22,25,27,.9)}
.vier{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem 3rem;margin-top:2rem}
.vier .ikone{color:var(--gruen-hell)}
.vier h3{margin-top:.6rem}
.vier p{color:#C7C9BE;font-size:.98rem}
.normzeile{margin-top:2.5rem;padding-top:1.2rem;border-top:1px solid #3A3F44;font-family:var(--mono);font-size:.85rem;letter-spacing:.06em;color:#B9BDB0;display:flex;flex-wrap:wrap;gap:.6rem 2rem}

/* FAQ */
.faq{margin-top:1.5rem;border-top:1px solid var(--linie)}
.faq details{border-bottom:1px solid var(--linie)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1rem 0;font-family:var(--display);font-weight:600;font-size:1.12rem;min-height:52px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);font-size:1.4rem;color:var(--gruen-text);flex:none}
.faq details[open] summary::after{content:"–"}
.faq details>div{padding:0 0 1.2rem;max-width:68ch}
.faq details>div p{font-size:.98rem}

/* Kontakt */
.kontaktkarte{border:1px solid var(--linie);background-color:var(--grund);padding:1.4rem}
.kontaktkarte address{font-style:normal;line-height:1.7}
.ansprech{display:flex;align-items:center;gap:1rem;margin:0 0 1.2rem}
.ansprech img{display:block;width:120px;height:120px;border-radius:50%;object-fit:cover;border:3px solid var(--gruen-hell);flex:0 0 auto}
.ansprech figcaption{line-height:1.35}.ansprech figcaption b{display:block;font-family:var(--display);font-size:1.15rem}
.ansprech figcaption span{font-size:.9rem;color:var(--grau)}
@media (max-width:360px){.ansprech img{width:96px;height:96px}}

/* Gelbe Kästen — Wolke vor der Sonne */
.offen,.todo{background-color:var(--gelb-hell);border-left:6px solid var(--gelb);padding:.85rem 1rem;margin:1.2rem 0;font-size:.95rem;max-width:68ch;color:var(--tinte)}
.todo{border-left-style:dashed;background-color:#FFFBEA}
.offen-kopf{display:flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:#6E5A00;margin-bottom:.35rem}
.dunkel .offen,.dunkel .todo,.hero .offen{color:var(--tinte)}

/* Fuß */
footer{background-color:var(--nacht);color:var(--nacht-text);padding:var(--luft) 0 1.5rem;border-top:3px solid var(--gruen)}
.fuss{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem}
.fuss h2{font-family:var(--mono);font-weight:500;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:#B9BDB0;margin:0 0 .8rem}
.fuss ul{list-style:none;padding:0;margin:0}.fuss li{margin:.35rem 0}
.fuss a{color:var(--nacht-text);text-decoration:none}.fuss a:hover{text-decoration:underline}
/* Antippbare Groesse: Verweise in Listen und Anschrift sind keine Fliesstext-Verweise,
   sie brauchen mindestens 24 px Hoehe (WCAG 2.5.8). Padding statt groesserer Schrift. */
.fuss li a{display:inline-block;padding:.3rem 0}
address a{display:inline-block;padding:.25rem 0}
/* Ein Verweis, der allein in seinem Absatz steht, ist ein Ziel und kein Fliesstext-Verweis —
   er braucht die 24 px Tippflaeche. Verweise MITTEN im Satz bleiben unangetastet, dort wuerde
   Innenabstand den Zeilenfall zerreissen (WCAG 2.5.8, Ausnahme „inline"). */
p>a:only-child,li>a:only-child{display:inline-block;padding:.3rem 0}
.fuss li{margin:.1rem 0}
.fuss address{line-height:1.5}
.fuss .logo-svg{height:auto;width:100%;max-width:280px;margin-bottom:1.2rem;display:block}  /* Querformat mit GmbH statt Hochformat (01.10.2026) */
.fuss address{font-style:normal;line-height:1.7}
.fuss-unten{margin-top:2.5rem;padding-top:1.2rem;border-top:1px solid #3A3F44;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 2rem;font-size:.85rem;color:#B9BDB0}
.fuss-unten a{color:#B9BDB0;display:inline-block;padding:.2rem 0}


/* Kurvenfuge */
.fuge{line-height:0;height:clamp(36px,6vw,96px);overflow:hidden;background-color:var(--grund)}
.fuge svg{width:100%;height:100%;display:block}
.fuge-flaeche{fill:var(--grund-2)}
.fuge-linie{fill:none;stroke:var(--gruen);stroke-width:3}
.fuge.nach-nacht{background-color:var(--grund)}.fuge.nach-nacht .fuge-flaeche{fill:var(--nacht)}.fuge.nach-nacht .fuge-linie{stroke:var(--gruen-hell)}
.fuge.zu-grund{background-color:var(--grund-2)}.fuge.zu-grund .fuge-flaeche{fill:var(--grund)}
.fuge.von-nacht{background-color:var(--nacht)}.fuge.von-nacht .fuge-flaeche{fill:var(--grund)}.fuge.von-nacht .fuge-linie{stroke:var(--gruen-hell)}
.schnell{display:none}
.nav .nav-klapp{display:none}

@media (max-width:1259px){
  .nav{display:none}
  .burger{display:inline-flex;margin-left:auto;min-height:44px;min-width:44px;align-items:center;justify-content:center;background:none;border:2px solid var(--nacht-text);border-radius:var(--radius);font-family:var(--display);font-weight:600;padding:0 .8rem;color:var(--nacht-text);cursor:pointer}
  .kopf .btn{display:none}
  .js .kopf.menue-auf .nav .nav-klapp{display:block}
  /* Klappmenue: nur wenn main.js laeuft (html.js). Ohne JS bleibt der Burger ein
     Sprunganker auf die Navigation im Fuss — dann darf hier nichts versteckt werden. */
  /* .js .kopf blieb hier bis 03.10.2026 position:relative — damit lief der Kopf am Handy nicht mit
     (Master 6.2: Kopf läuft mit). sticky ist selbst Bezugsrahmen für das aufgeklappte Menü. */
  .js .kopf .wrap{position:static}
  .js .kopf.menue-auf .nav{display:flex;flex-direction:column;align-items:stretch;gap:0;margin:0;
    position:absolute;left:0;right:0;top:100%;z-index:25;
    background-color:var(--nacht);border-bottom:3px solid var(--gruen);
    max-height:calc(100vh - 74px);overflow-y:auto;padding:.5rem 0}
  .js .kopf.menue-auf .nav a{padding:.95rem var(--rand);border-bottom:1px solid #2C3134;font-size:1.05rem}
  .js .kopf.menue-auf .nav a:last-child{border-bottom:0}
  .js .kopf.menue-auf .nav a:hover,.js .kopf.menue-auf .nav a:focus-visible{background-color:#20252A;border-bottom-color:#2C3134}
  .js .kopf.menue-auf .nav a:focus-visible{outline-offset:-3px}  /* Ring innen, sonst schneidet ihn der Rand ab */
  .js .kopf.menue-auf .nav a[aria-current=page]{color:var(--gruen-hell)}
  .js .burger[aria-expanded=true]{background-color:var(--gruen-hell);border-color:var(--gruen-hell);color:var(--nacht)}
}
@media (max-width:900px){
  .fakten{grid-template-columns:repeat(2,1fr)}
  .phasen{grid-template-columns:1fr}
  .phasen li+li{padding-left:0;border-left:0;border-top:1px solid var(--linie)}
  .kacheln{grid-template-columns:repeat(2,1fr)}
  .fuss{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .hero .wrap,.zwei,.leistung-haupt,.vier{grid-template-columns:1fr}
  .zwei.umgekehrt>*:first-child{order:0}
  .hero-schleier{background:rgba(22,25,27,.88)}
  .dazu{columns:1}
  .kacheln{grid-template-columns:repeat(2,1fr)}
  .fuss{grid-template-columns:1fr}
  .schnell{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:30;border-top:3px solid var(--gruen)}
  .schnell a{min-height:52px;display:flex;align-items:center;justify-content:center;gap:.5rem;text-decoration:none;font-family:var(--display);font-weight:600}
  .schnell .s1{background-color:var(--grund);color:var(--tinte)}
  .schnell .s2{background-color:var(--gruen-text);color:#fff}
  body{padding-bottom:56px}
}
@media (max-width:520px){.logo-quer .lq-signet{height:46px}.logo-quer .lq-wort{height:19px}.entwurf{font-size:.7rem}}
@media (max-width:420px){.hero-cta .btn{width:100%}.kacheln{grid-template-columns:1fr}}

/* --- Bau-Ergänzungen (nicht im Entwurf) --- */

/* --- Gewerke-Verbund (bausteine.netz) -------------------------------------
   Genau EINE Bewegung: der Strich wandert auf Schiene und Abgängen zum Sammelpunkt.
   Kein blur(), kein rotierender Ring, keine Endlos-Transformation auf großen Flächen —
   das sind die teuren Sachen, die ein Telefon dauerhaft neu zeichnen lassen. Ein
   wandernder stroke-dashoffset auf dünnen Linien kostet fast nichts. Bei
   „Bewegung reduzieren" steht alles still (Regel ganz oben). */
.netz-abschnitt{padding:var(--luft) 0}
.ill-netz{display:block;width:100%;max-width:440px;height:auto;margin:0 auto}
.netz-schiene{stroke:var(--gruen-tief);stroke-width:8;stroke-linecap:round}
.netz-abgang{fill:none;stroke:var(--linie);stroke-width:2.5}
.netz-fluss{fill:none;stroke:var(--gruen-hell);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:12 30;animation:netz-fluss 3.2s linear infinite}
@keyframes netz-fluss{from{stroke-dashoffset:42}to{stroke-dashoffset:0}}
.netz-fluss-0{stroke-width:4}
.netz-fluss-1{animation-delay:-.5s}.netz-fluss-2{animation-delay:-1s}
.netz-fluss-3{animation-delay:-1.5s}.netz-fluss-4{animation-delay:-2s}
.netz-fluss-5{animation-delay:-2.4s}.netz-fluss-6{animation-delay:-2.8s}
.netz-knoten{fill:var(--grund);stroke:var(--gruen);stroke-width:2.5}
.netz-zeichen{color:var(--gruen-text);fill:none;stroke:currentColor;stroke-width:3;
  stroke-linejoin:round;stroke-linecap:round}
.netz-label{fill:var(--tinte);font-family:var(--display);font-weight:600;font-size:21px}
.netz-sammel{fill:var(--nacht);stroke:none}
.netz-sammel-1{fill:var(--gruen-hell);font-family:var(--mono);font-size:17px;letter-spacing:.06em}
.netz-sammel-2{fill:#fff;font-family:var(--display);font-weight:600;font-size:22px}
.netz-fuss{margin-top:1.2rem;font-size:.95rem}

/* --- Bauformen ohne Dach (bausteine.ill_sonder) --- */
.ill-sonder{display:block;width:100%;height:auto;margin:1.8rem 0}
.ill-sonder .ill-strich{fill:none;stroke:var(--tinte);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.ill-sonder .ill-boden{stroke:var(--grau);stroke-width:3;stroke-linecap:round}
.ill-sonder .ill-gras{stroke:var(--gruen);stroke-width:2.5;stroke-linecap:round;fill:none}
.ill-sonder .ill-modulfeld rect{fill:var(--gruen-tief);fill-opacity:.16;stroke:var(--gruen-text);stroke-width:2.5}
.ill-sonder .ill-modulfeld path{fill:none;stroke:var(--gruen-text);stroke-width:1.6}
.ill-bau-t{fill:var(--tinte);font-family:var(--display);font-weight:600;font-size:21px}
.ill-bau-u{fill:var(--grau);font-family:var(--mono);font-size:15px}
@media (max-width:760px){
  /* Vier Bauformen nebeneinander werden am Telefon zu klein — die Zeichnung bekommt
     ihren eigenen Scrollbereich, die Seite selbst scrollt nicht seitlich. */
  .ill-huelle{overflow-x:auto;margin:1.8rem 0}
  .ill-huelle .ill-sonder{min-width:760px;margin:0}
}
}
.fakten-wrap{margin-top:2.6rem}
.hero-sub{padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(2rem,4vw,3rem)}
.hero-sub .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(1.5rem,4vw,4rem);align-items:center}
.hero-sub h1{font-size:clamp(2rem,4.2vw,3.4rem)}
.hero-sub .foto img{border-top-color:var(--gruen-hell)}
.hero-sub .foto figcaption{color:#B9BDB0}
.brot{font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;color:#B9BDB0;margin-bottom:1rem}
.brot a{color:#B9BDB0;text-decoration:none;display:inline-block;padding:.3rem 0}.brot a:hover{text-decoration:underline}
.brot span{margin:0 .4rem}
.argumente{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem 3rem;margin-top:1.5rem}
.argumente article{padding-top:1rem;border-top:3px solid var(--gruen)}
.argumente h3{font-size:1.15rem;margin-bottom:.4rem}
.argumente p{font-size:.98rem;margin:0}
.dazu-kasten{background-color:var(--grund);border:1px solid var(--linie);border-top:6px solid var(--gruen);padding:clamp(1.4rem,3vw,2.2rem)}
.normteil{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);align-items:start}
.normliste{list-style:none;padding:0;margin:0}
.normliste li{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:1rem;padding:.8rem 0;border-bottom:1px solid #3A3F44}
/* Seit die Norm-Nummern raus sind (25.09.2026), stehen hier ganze Begriffe statt „DIN 18531".
   nowrap hat die Zeile am Telefon aus dem Raster geschoben — jetzt darf sie umbrechen. */
.normliste code{font-family:var(--mono);color:var(--gruen-hell);font-size:.9rem;overflow-wrap:anywhere}
@media (max-width:520px){.normliste li{grid-template-columns:1fr;gap:.25rem}}
.normliste span{color:#C7C9BE;font-size:.95rem}
.weiter{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background-color:var(--linie);border:1px solid var(--linie);margin-top:1.5rem}
.weiter .kachel b{font-size:1rem}
.formular{display:grid;gap:1rem;max-width:640px;position:relative}
.formular label{display:block;font-weight:700;margin-bottom:.3rem}
.formular label small{font-weight:400;color:var(--grau)}
.formular input,.formular textarea{width:100%;font:inherit;padding:.75rem .9rem;border:2px solid var(--linie);border-radius:var(--radius);background-color:#fff;color:var(--tinte);min-height:52px}
.formular textarea{min-height:160px;resize:vertical}
.formular input:focus,.formular textarea:focus{outline:3px solid var(--gruen);outline-offset:2px;border-color:var(--gruen-text)}
.formular .honig{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.formular .fehler{color:#8A1C1C;font-size:.92rem;margin-top:.3rem}
.formular .hinweis{font-size:.9rem;color:var(--grau);margin:0}
.formular button{cursor:pointer}
.formular button[disabled]{opacity:.6;cursor:wait}
.kontaktkarte{color:var(--tinte)}.dunkel .kontaktkarte a{color:var(--gruen-tief)}
.btn{white-space:nowrap}
.kontakt-raster{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(1.5rem,4vw,4rem);align-items:start}
.karte{border:1px solid var(--linie);background-color:var(--grund)}
.karte svg{display:block;width:100%;height:auto}
.karte p{padding:.8rem 1rem;margin:0;font-size:.92rem}
.text-seite{max-width:var(--schmal)}
.text-seite h2{font-size:1.4rem;margin-top:2rem}
.platzhalter{border:2px dashed var(--gelb);background-color:var(--gelb-hell);padding:1.2rem;font-family:var(--mono);font-size:.9rem}
.bildtabelle{width:100%;border-collapse:collapse;font-size:.95rem}
.bildtabelle th,.bildtabelle td{text-align:left;padding:.6rem .5rem;border-bottom:1px solid var(--linie);vertical-align:top}
.bildtabelle th{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--grau)}
.tabellen-rollen{overflow-x:auto}
.vorschau{background-color:var(--gelb);color:var(--tinte);font-family:var(--mono);font-size:.8rem;padding:.45rem var(--rand);text-align:center}
@media (max-width:900px){.argumente{grid-template-columns:1fr}.normteil{grid-template-columns:1fr}.weiter{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.hero-sub .wrap,.kontakt-raster{grid-template-columns:minmax(0,1fr)}}

/* --- Handy, Fund vom 30.09.2026 (Marcel: „man kann die Seite nach links und rechts verschieben“) ---
   Mit echter Geräte-Emulation (iPhone SE, 320 px) gefunden, bei 390 px nicht sichtbar:
   1. Ein Wort, das länger ist als der Bildschirm („Datenschutzerklärung“ als H1), schob die Seite
      seitlich. Überschriften dürfen am Telefon jetzt trennen.
   2. Schaltflächen hatten nowrap: „Maßgeschneidertes Angebot anfordern“ ist breiter als 320 px und
      zog die Spalte mit — Kennzeile, Brotkrumen und Überschrift wurden rechts abgeschnitten.
      Einspaltige Raster jetzt mit minmax(0,1fr), Schaltflächen dürfen umbrechen.
   3. Sicherheitsnetz: html{overflow-x:clip}. Clip statt hidden, weil hidden den mitlaufenden Kopf
      (position:sticky) abschalten würde. Das Netz ersetzt keine Korrektur — pruefung.py sucht
      weiterhin nach Elementen, die über den Rand ragen. */
html{overflow-x:clip}
h1,h2,h3{overflow-wrap:break-word}
@media (max-width:760px){
  .hero .wrap,.zwei,.leistung-haupt,.vier{grid-template-columns:minmax(0,1fr)}
  h1,h2{hyphens:auto;-webkit-hyphens:auto}
}
@media (max-width:420px){
  .btn{white-space:normal;text-align:center;line-height:1.25}
}

/* --- Anfragekarte im Startseiten-Kopf (ersetzt das Anlagenschema, 30.09.2026) --- */
/* Marcels Überschrift ist lang und hat ein 16-Zeichen-Wort („Maßgeschneiderte“). In der alten
   Displaygröße (bis 4,2rem) passte es nicht in die Spalte und wurde mitten im Wort umbrochen.
   Die Größe folgt jetzt dem längsten Wort, nicht der Wirkung. */
.hero:not(.hero-sub) h1{font-size:clamp(2rem,3.6vw,3.4rem);line-height:1.08}
/* Die Kurzfakten stehen unter beiden Spalten über die volle Breite, nicht in der Textspalte */
.hero .wrap.fakten-wrap{display:block}
.hero-anfrage{background:rgba(22,25,27,.78);border:1px solid #3A3F44;border-top:6px solid var(--gruen-hell);
  border-radius:var(--radius);padding:clamp(1.4rem,3vw,2.2rem);max-width:30rem;justify-self:end;width:100%}
.hero-anfrage .dazu-kopf{color:#B9BDB0;margin:0 0 .6rem}
.ha-titel{font-family:var(--display);font-weight:700;font-size:clamp(1.35rem,2.2vw,1.75rem);line-height:1.2;color:#fff;margin:0 0 1.3rem}
.hero-anfrage .ha-btn{display:flex;width:100%;font-size:1.15rem;min-height:60px}
.ha-tel{display:block;margin-top:1rem;font-family:var(--display);font-weight:700;font-size:1.3rem;color:#fff;text-decoration:none;padding:.3rem 0}
.ha-tel:hover{text-decoration:underline}
.ha-zeit{margin:.3rem 0 0;color:#B9BDB0;font-family:var(--mono);font-size:.8rem;letter-spacing:.04em}
@media (max-width:760px){.hero-anfrage{justify-self:stretch;max-width:none}}
/* ---- 01.10.2026, Sprachnachricht Marcel ---- */
/* Startseite mittiger: Abschnittsköpfe und Kurzfakten zentriert */
.kopf-mitte{text-align:center;margin-left:auto;margin-right:auto;max-width:880px}
.kopf-mitte .lead,.kopf-mitte p{margin-left:auto;margin-right:auto}
.kopf-mitte .knoten{justify-content:center}
.fakten .fakt{text-align:center}
.fakten .fakt span{display:block;max-width:30ch;margin:0 auto}
/* Leiterzeichen ohne Beschriftung (Leistungsseiten) */
.knoten-nur .leitung{width:30px}
/* PVT: Rechenhinweis statt offener Frage */
.pvt-rechnung{margin-top:1.6rem;font-size:1.05rem}
/* Netzwerk-Nabe (Leistungen) */
.nabe-abschnitt{padding:var(--luft) 0;background-color:var(--nacht)}
.nabe-buehne{max-width:640px;margin:1.5rem auto 0}
.ill-nabe{width:100%;height:auto;display:block;overflow:visible}
.nabe-ring{fill:none;stroke:#3A3F44;stroke-width:1.5}
.nabe-dreh{fill:none;stroke:var(--gruen-hell);stroke-width:1.5;stroke-dasharray:3 14;opacity:.6;
  transform-box:fill-box;transform-origin:center;animation:nabe-dreh 48s linear infinite}
@keyframes nabe-dreh{to{transform:rotate(360deg)}}
.nabe-speiche{stroke:#3A3F44;stroke-width:2.5}
.nabe-fluss{stroke:var(--gruen-hell);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:6 22;animation:nabe-fluss 2.6s linear infinite}
@keyframes nabe-fluss{from{stroke-dashoffset:28}to{stroke-dashoffset:0}}
.nabe-fluss-1{animation-delay:-.4s}.nabe-fluss-2{animation-delay:-.8s}.nabe-fluss-3{animation-delay:-1.3s}
.nabe-fluss-4{animation-delay:-1.7s}.nabe-fluss-5{animation-delay:-2.1s}
.nabe-knoten circle{fill:var(--nacht-2);stroke:var(--gruen);stroke-width:2;transition:stroke .2s,fill .2s}
.nabe-knoten:hover circle,.nabe-knoten:focus-visible circle{stroke:var(--gruen-hell);fill:#263016}
.nabe-knoten:focus-visible{outline:none}
.nabe-knoten:focus-visible circle{stroke-width:4}
.nabe-zeichen{color:var(--gruen-hell);fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.nabe-label{fill:var(--nacht-text);font-family:var(--display);font-weight:500;font-size:26px}
.nabe-mitte{fill:var(--gruen-tief);stroke:var(--gruen-hell);stroke-width:2}
.nabe-name{fill:#fff;font-family:var(--display);font-weight:700;font-size:34px;letter-spacing:-.01em}
.nabe-gmbh{fill:#D6E4B8;font-family:var(--display);font-weight:500;font-size:15px;letter-spacing:.16em}
.nabe-l1{fill:#743C1B}.nabe-l2{fill:#1556B0}.nabe-l3{fill:var(--gruen-hell)}
@media (max-width:520px){.nabe-label{font-size:30px}}
.rechtstext-stand{margin-top:3rem;font-size:.8rem;color:var(--grau);display:flex;flex-wrap:wrap;gap:.3rem 1.5rem;align-items:center}
.rechtstext-stand a{display:inline-block;padding:.4rem 0;min-height:24px}
/* Kontaktformular Fassung 2 (01.10.2026) */
.briefkopf{border:2px solid var(--linie);border-radius:var(--radius);background-color:var(--grund-2);padding:.4rem 0}
.bk-zeile{display:grid;grid-template-columns:3.4rem minmax(0,1fr);gap:.6rem;align-items:baseline;padding:.45rem .9rem}
.bk-zeile+.bk-zeile{border-top:1px solid var(--linie)}
.bk-label{font-family:var(--display);font-weight:700;color:var(--gruen-text)}
.bk-wert{overflow-wrap:anywhere}
.bk-von{color:var(--grau);font-style:italic}.bk-von.voll{color:var(--tinte);font-style:normal;font-weight:700}
.zwei-felder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
@media (max-width:560px){.zwei-felder{grid-template-columns:minmax(0,1fr)}}
.formular fieldset.wahl{border:0;padding:0;margin:0;min-width:0}
.formular .wahl legend{font-weight:700;margin-bottom:.4rem;padding:0}
.formular .wahl legend small{font-weight:400;color:var(--grau)}
.wahl-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.5rem}
.wahl-drei{grid-template-columns:repeat(3,minmax(0,1fr))}
.formular .wahl-punkt{display:flex;align-items:flex-start;gap:.6rem;font-weight:400;margin:0;padding:.65rem .8rem;border:2px solid var(--linie);border-radius:var(--radius);background-color:#fff;cursor:pointer;min-height:48px}
.formular .wahl-punkt:has(input:checked){border-color:var(--gruen);background-color:#F3F8EA}
.formular .wahl-punkt input{width:1.25rem;height:1.25rem;min-height:0;margin:.15rem 0 0;padding:0;flex:none;accent-color:var(--gruen-text)}
.formular .einwilligung .wahl-punkt{background-color:transparent}
.formular .einwilligung a{display:inline}
.tipp{font-size:.92rem;margin:.35rem 0 0;color:var(--tinte)}
.tipp-knopf{font:inherit;font-weight:700;color:var(--gruen-tief);background:none;border:0;border-bottom:2px solid var(--gruen);padding:0;cursor:pointer;min-height:24px}
.formular-meldung{background-color:#FCEBEB;border-left:4px solid #8A1C1C;color:#5E1111;padding:.8rem 1rem;margin-bottom:1rem;max-width:640px}
.formular [aria-invalid=true]{border-color:#8A1C1C}
.anim-pause .netz-fluss,.anim-pause .nabe-fluss,.anim-pause .nabe-dreh{animation-play-state:paused}
/* ---- 03.10.2026: an Master 6.2 angeglichen ---- */
html{scroll-padding-top:88px}
a,button,input,select,textarea,label,summary{touch-action:manipulation}
/* Rufnummer im Kopf: am Handy/Tablet neben dem Menü, unter 430 px nur als Hörer (Nummer als aria-label).
   Am Rechner bewusst nicht: die Kopfreihe ist mit acht Navigationspunkten und „Anfrage stellen“ voll
   (Rechenexempel 6.2, wie Heidhoff) — die Nummer steht dort im Seitenkopf jeder Seite und im Fuß. */
.kopf-tel{display:none}
@media (max-width:1259px){
  .kopf-tel{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;margin-left:auto;min-height:44px;min-width:44px;
    padding:0 .5rem;color:var(--nacht-text);text-decoration:none;font-family:var(--display);font-weight:600;flex:0 0 auto}
  .kopf-tel svg{width:22px;height:22px;flex:none}
  .burger{margin-left:.4rem;flex:0 0 auto}
  .kopf .logo{flex:0 0 auto}
}
@media (max-width:639px){.kopf-tel span{display:none}}
@media (max-width:400px){.logo-quer{gap:.5rem}.logo-quer .lq-signet{height:40px}.logo-quer .lq-wort{height:16px}.burger{padding:0 .6rem}.kopf-tel{padding:0}}
@media (max-width:400px){.kopf .wrap{gap:.5rem}.burger{margin-left:0}}
@media (max-width:360px){.logo-quer .lq-signet{height:36px}.logo-quer .lq-wort{height:14px}.logo-quer{gap:.4rem}}
/* Logo des Dachdecker-Meisterbetriebs (Dach-Seite) */
.partner-logo{margin:1.6rem 0 0;max-width:260px}
.partner-logo img{display:block;width:100%;height:auto;border-radius:var(--radius)}
.partner-logo figcaption{font-size:.85rem;color:var(--grau);margin-top:.5rem}

.bg-hero{background-image:url(../img/hero-blur.jpg)}
.bg-ziegel{background-image:url(../img/ziegel-blur.jpg)}
.bg-wp{background-image:url(../img/wp-blur.jpg)}
.bg-dach{background-image:url(../img/dach-blur.jpg)}
.bg-fenster{background-image:url(../img/fenster-blur.jpg)}
.bg-verteiler{background-image:url(../img/verteiler-blur.jpg)}