/* Zimmerei Schaefer: Design. ERZEUGT von .work/zerlegen.py aus entwurf/schaefer-design.css und
   entwurf/schaefer-bausteine.css. Nicht hier aendern, sondern dort, dann neu zerlegen und hochladen. */
/* ============================================================================
   Zimmerei & Holzbau Schäfer: Design der Website (Oxygen 6, Projekt-Plugin)
   ----------------------------------------------------------------------------
   Quelle Teil 1: freigegebenes Screendesign Startseite, Schleife 01 (07.09.2026),
   quellen/design/2026-09-07_schleife-01/startseite.html, Werte wörtlich.
   Quelle Teil 2: Styleguide vom 05.10.2026 (hat Vorrang, wo er abweicht),
   quellen/design/2026-10-05_styleguide/assets/schaefer.css.
   Teil 3: Bau-Anpassungen für Oxygen und WordPress, je mit Grund.
   Die Bausteine der Unterseiten stehen in schaefer-bausteine.css.

   Gepflegt wird DIESE Datei (entwurf/), nicht die Kopie im Plugin. .work/zerlegen.py
   nimmt die Farb- und Maßwerte aus :root heraus und legt sie als Oxygen-Variablen an,
   dort kann das Team sie ändern. Werte im Builder an Klassen einzutragen erzeugt eine
   zweite Wahrheit neben dieser Datei.
   ========================================================================== */

/* ===== 0 Schriften, lokal ausgeliefert (kein Google-CDN, DSGVO) ===========
   Figtree: SIL Open Font License (laut Namenstabelle der Datei).
   Material Symbols Outlined: Apache 2.0 (google/material-design-icons),
   statische Instanz opsz 24, wght 300, GRAD 0, FILL 0 bis 1. */
@font-face{font-family:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;
  src:url('fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;
  src:url('fonts/figtree-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Material Symbols Outlined';font-style:normal;font-weight:300;font-display:block;
  src:url('fonts/material-symbols-outlined.woff2') format('woff2')}
.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;
  font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;
  white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';
  font-feature-settings:'liga';-webkit-font-smoothing:antialiased}

/* ===== 1 Grundlagen ======================================================== */
:root{
  /* Alle uebrigen Tokens sind Oxygen-Variablen (Oxygen > Global Settings > Variables). */
  --maserung-bild:url("zeichnungen/zeichnung-maserung-rot.svg");
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{overflow-x:clip;
  font-family:'Figtree',-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--weiss);color:var(--txt);font-size:var(--tx-basis);line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-weight:500;letter-spacing:-.02em;line-height:1.16}
h1{font-size:calc(clamp(32px,3.5vw,47px) * var(--tx-skala))}
h2{font-size:calc(clamp(29px,3.2vw,44px) * var(--tx-skala))}
h3{font-size:calc(21px * var(--tx-skala));letter-spacing:-.01em;line-height:1.32}
p{max-width:64ch;text-wrap:pretty}
h1,h2,h3,blockquote,summary,.aussage-satz,.ueberuns-satz{text-wrap:balance}
strong,b{font-weight:600}
.material-symbols-outlined{font-variation-settings:'FILL'0,'wght'300,'GRAD'0,'opsz'24;line-height:1}
:focus-visible{outline:2px solid var(--petrol);outline-offset:2px}

.wrap{max-width:var(--breite);margin:0 auto;padding-left:var(--rand);padding-right:var(--rand)}
.sektion{padding:calc(clamp(56px,5.6vw,88px) * var(--dichte)) 0}
.papier{background:var(--papier)}
.vorzeile{font-size:13.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rot);margin-bottom:14px}
.vorzeile.hell{color:var(--petrol-hell)}
@media(max-width:600px){
  /* !important aus dem Entwurf: mehrere Sektionen setzen eine festere Regel auf p. */
  .vorzeile{font-size:clamp(11px,3.1vw,13.5px)!important;letter-spacing:.1em!important;white-space:nowrap!important}
}
.lead{font-size:18px;color:var(--grau)}

/* Auftritte beim Scrollen. Bau-Anpassung: Verborgen wird nur unter html.sch-js. Diese
   Klasse setzt ein Schnipsel im Seitenkopf und nimmt sie nach vier Sekunden wieder weg,
   wenn das Design-Skript sich nicht gemeldet hat. Im Builder fehlt sie, dort ist alles
   sichtbar. Ohne das bliebe bei einem Skriptfehler der größte Teil der Seite leer
   (Fittime, gemessen 09.09.2026). */
html.sch-js .auf{opacity:0;transform:translateY(calc(14px * var(--motion)));
  transition:opacity 1s cubic-bezier(.33,.72,.28,1),transform 1s cubic-bezier(.33,.72,.28,1)}
html.sch-js .auf-l{opacity:0;transform:translateX(calc(-30px * var(--motion)));
  transition:opacity 1.05s cubic-bezier(.33,.72,.28,1),transform 1.05s cubic-bezier(.33,.72,.28,1)}
html.sch-js .auf-r{opacity:0;transform:translateX(calc(34px * var(--motion)));
  transition:opacity 1.05s cubic-bezier(.33,.72,.28,1),transform 1.05s cubic-bezier(.33,.72,.28,1)}
html.sch-js .auf.da,html.sch-js .auf-l.da,html.sch-js .auf-r.da{opacity:1;transform:none}
.auf.v2,.auf-l.v2,.auf-r.v2{transition-delay:.1s}
.auf.v3,.auf-l.v3,.auf-r.v3{transition-delay:.2s}
.auf.v4,.auf-l.v4,.auf-r.v4{transition-delay:.3s}
.reveal .z{display:block;overflow:hidden;padding-bottom:.06em}
.reveal .z>span{display:block}
html.sch-js .reveal .z>span{transform:translateY(105%);transition:transform .95s cubic-bezier(.22,.68,.24,1)}
html.sch-js .reveal.da .z>span{transform:none}
.reveal.da .z:nth-child(2)>span{transition-delay:.12s}
.reveal.da .z:nth-child(3)>span{transition-delay:.24s}
@media(max-width:880px){
  html.sch-js .auf-r{transform:translateY(calc(16px * var(--motion)))}
  html.sch-js .auf-l{transform:translateX(calc(-16px * var(--motion)))}
  html.sch-js .auf-r.da,html.sch-js .auf-l.da{transform:none}
}
@media(prefers-reduced-motion:reduce){
  html.sch-js .auf,html.sch-js .auf-l,html.sch-js .auf-r{opacity:1;transform:none;transition:none}
  html.sch-js .reveal .z>span{transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* Buttons und Links (Styleguide 05.10.2026) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 26px;border-radius:var(--r);
  font-size:17px;font-weight:600;text-decoration:none;border:1.5px solid transparent;
  transition:background .18s,color .18s,border-color .18s;white-space:nowrap;font-family:inherit;cursor:pointer;line-height:1.65}
.btn .material-symbols-outlined{font-size:21px}
/* Nebeneinander so breit wie ihr Text. Mobil, wo sie untereinander stehen, laufen alle über
   die volle Breite, damit gestapelte Buttons gleich breit sind (Styleguide 05.10.2026). */
@media(max-width:600px){.btn{width:100%}}
.btn-voll{background:var(--flaeche);color:#fff}
.btn-voll:hover{background:var(--flaeche-dunkel)}
.btn-weiss{background:#fff;color:var(--flaeche)}
.btn-weiss:hover{background:#eef4f4}
.btn-linie{border-color:rgba(255,255,255,.55);color:#fff;background:transparent}
.btn-linie:hover{border-color:#fff;background:rgba(255,255,255,.12)}
.btn-linie-dunkel{border-color:var(--bdr);color:var(--txt);background:transparent}
.btn-linie-dunkel:hover{border-color:var(--petrol)}
.textlink{display:inline-flex;align-items:center;gap:8px;color:var(--flaeche);
  font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--petrol);padding-bottom:3px}
.textlink:hover{color:var(--txt)}
.textlink.hell{color:#fff;border-bottom-color:rgba(255,255,255,.6)}
.textlink.hell:hover{border-bottom-color:#fff}
.textlink .material-symbols-outlined{font-size:18px}
.rund-pfeil{width:48px;height:48px;border-radius:50%;border:1px solid var(--bdr);
  background:#fff;color:var(--txt);cursor:pointer;display:grid;place-items:center;transition:border-color .18s,color .18s}
.rund-pfeil:hover{border-color:var(--petrol);color:var(--flaeche)}
.rund-pfeil:disabled{opacity:.28;cursor:default}

/* ===== Kopfzeile, Reusable R1 ============================================== */
/* Bau-Anpassung: top berücksichtigt die Adminleiste angemeldeter Nutzer. */
.kopf{position:sticky;top:var(--wp-admin--admin-bar--height,0px);z-index:40;background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--bdr);backdrop-filter:saturate(180%) blur(8px)}
.kopf .wrap{display:flex;align-items:center;gap:26px;padding-top:12px;padding-bottom:12px}
.kopf-logo{display:block;flex:none}
.kopf-logo img{height:62px;width:auto}
.menue{display:flex;gap:24px;margin-left:auto;align-items:center}
/* Bau-Anpassung: Die Menüpunkte kommen aus WordPress (Design → Menüs) und stehen deshalb
   als Liste ul.menue-liste > li > a. Werte 1:1 aus .menue>a und .sub des Entwurfs. */
.menue-nav{display:flex;align-items:center}
.menue-liste{display:flex;gap:24px;align-items:center;list-style:none}
.menue-liste>li{position:relative;display:flex;align-items:center;gap:4px}
.menue-liste>li>a{font-size:16px;font-weight:500;text-decoration:none;color:var(--txt);
  padding:8px 0;border-bottom:2px solid transparent;display:inline-flex;align-items:center;gap:4px}
.menue-liste>li>a:hover,
.menue-liste>li.current-menu-item>a,
.menue-liste>li.current-menu-ancestor>a,
.menue-liste>li.current-menu-parent>a{border-bottom-color:var(--petrol)}
.sub-schalter{display:grid;place-items:center;width:22px;height:30px;margin-left:-2px;padding:0;border:0;
  background:transparent;color:var(--txt);cursor:pointer;border-radius:var(--r)}
.sub-schalter .material-symbols-outlined{font-size:19px;transition:transform .16s}
.menue-liste>li.offen .sub-schalter .material-symbols-outlined{transform:rotate(180deg)}
.menue-liste .sub-menu{position:absolute;left:-18px;top:100%;min-width:320px;background:#fff;border:1px solid var(--bdr);
  border-radius:var(--r);padding:8px;list-style:none;opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .16s,transform .16s,visibility .16s;z-index:5}
.menue-liste>li:hover>.sub-menu,.menue-liste>li.offen>.sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.menue-liste>li.zu>.sub-menu{opacity:0;visibility:hidden;transform:translateY(6px)}
.menue-liste .sub-menu a{display:flex;gap:11px;align-items:flex-start;padding:10px 12px;border-radius:var(--r);
  text-decoration:none;font-size:15.5px;line-height:1.4;font-weight:500;color:var(--txt)}
.menue-liste .sub-menu a:hover,.menue-liste .sub-menu .current-menu-item>a{background:var(--papier)}
.menue-liste .sub-menu .current-menu-item>a{color:var(--flaeche)}
/* Symbole der Unterpunkte: CSS-Klasse am Menüpunkt (Design → Menüs → CSS-Klassen),
   z. B. „sym-roofing". Liste der vorbereiteten Symbole in der Team-Anleitung. */
.menue-liste .sub-menu li[class*="sym-"]>a::before{font-family:'Material Symbols Outlined';
  font-variation-settings:'FILL'0,'wght'300,'GRAD'0,'opsz'24;font-size:21px;line-height:1;color:var(--flaeche);
  flex:none;margin-top:1px;-webkit-font-feature-settings:'liga';font-feature-settings:'liga'}
.sym-roofing>a::before{content:"roofing"}
.sym-wb_sunny>a::before{content:"wb_sunny"}
.sym-deck>a::before{content:"deck"}
.sym-home_work>a::before{content:"home_work"}
.sym-foundation>a::before{content:"foundation"}
.sym-carpenter>a::before{content:"carpenter"}
.sym-handyman>a::before{content:"handyman"}
.sym-location_on>a::before{content:"location_on"}
.kopf-tel{display:flex;align-items:center;gap:9px;font-weight:600;text-decoration:none;font-size:17px;
  white-space:nowrap;color:var(--flaeche)}
.kopf-tel .material-symbols-outlined{color:var(--flaeche);font-size:21px}
.kopf-btn.btn{color:#fff;padding:12px 20px;font-size:16px;width:auto}
.kopf-mobil{display:none;margin-left:auto;gap:10px;align-items:center}
.kopf-mobil .tel{display:inline-flex;align-items:center;gap:8px;background:var(--flaeche);color:#fff;
  font-weight:600;font-size:16px;text-decoration:none;padding:11px 16px;border-radius:var(--r)}
.kopf-mobil .tel .material-symbols-outlined{font-size:21px}
.kopf-mobil .burger{display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--bdr);
  border-radius:var(--r);background:#fff;color:var(--txt);cursor:pointer;padding:0}
@media(max-width:1180px){.menue{display:none}.kopf-mobil{display:flex}.kopf-logo img{height:46px}}
@media(max-width:420px){.kopf-mobil .tel span.nr{display:none}.kopf-mobil .tel{padding:11px 13px}}

/* Mobiles Menü-Overlay. Bau-Anpassung: oben unter der Adminleiste, Unterpunkte der
   Leistungen sichtbar (Entscheidung E4 in ARBEITSNOTIZEN.md). */
.mobil-menue{position:fixed;inset:var(--wp-admin--admin-bar--height,0px) 0 0 0;z-index:60;background:var(--tiefe);color:#fff;
  padding:20px var(--rand) 32px;overflow-y:auto;overscroll-behavior:contain;display:none}
.mobil-menue.offen{display:block;animation:menue-rein .28s cubic-bezier(.33,.72,.28,1)}
@keyframes menue-rein{from{transform:translateX(100%)}to{transform:none}}
@media(prefers-reduced-motion:reduce){.mobil-menue.offen{animation:none}}
.mobil-menue-kopf{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}
.mobil-menue-kopf img{height:42px;width:auto}
.mobil-schliessen{width:46px;height:46px;border-radius:var(--r);border:1px solid rgba(255,255,255,.25);
  background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer;padding:0}
.mobil-liste{list-style:none;display:flex;flex-direction:column}
.mobil-liste>li>a{display:block;color:#fff;text-decoration:none;font-size:19px;font-weight:500;
  padding:15px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.mobil-liste .sub-menu{list-style:none;padding:6px 0 10px 16px;border-bottom:1px solid rgba(255,255,255,.14)}
.mobil-liste .sub-menu a{display:block;color:#DCE6E7;text-decoration:none;font-size:16.5px;padding:8px 0}
.mobil-liste .current-menu-item>a{color:var(--petrol-hell)}
.mobil-liste>li.menu-item-has-children>a{border-bottom:0}
.mobil-btn.btn{margin-top:18px;width:100%}
.mobil-menue-kontakt{margin-top:30px;padding-top:24px;border-top:1px solid rgba(255,255,255,.18)}
.mobil-menue-kontakt .nr{display:block;font-size:24px;font-weight:600;color:#fff;text-decoration:none;margin-bottom:10px}
.mobil-menue-kontakt p{color:#DCE6E7;font-size:15.5px;line-height:1.7;max-width:none}
.mobil-menue-kontakt .zeiten{margin-top:14px;color:#9FB1B3;font-size:14.5px}
.mobil-menue-kontakt .zeiten b{color:#DCE6E7}
.mobil-menue-person{display:flex;align-items:center;gap:12px;margin-top:20px}
.mobil-menue-person .bild{width:48px;height:48px;border-radius:50%;overflow:hidden;flex:none}
.mobil-menue-person .bild img{width:100%;height:100%;object-fit:cover}
.mobil-menue-person .wer{font-size:14.5px;color:#B7C6C8}
.mobil-menue-person .wer b{display:block;color:#fff;font-weight:600;font-size:15.5px}
@media(min-width:1181px){.mobil-menue{display:none!important}}
body.menue-offen{overflow:hidden}

/* ===== 1 Hero ============================================================== */
.hero{position:relative;isolation:isolate;display:flex;align-items:center;
  min-height:min(calc(100svh - 88px),880px);padding:clamp(40px,4vw,64px) 0 clamp(80px,8vw,116px)}
.hero-bild{position:absolute;inset:0;z-index:-1;overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% 100%,63% calc(100% - 104px),0 100%)}
.hero-bild img{width:100%;height:100%;object-fit:cover;object-position:46% 58%;
  transform:scale(1.34);transform-origin:44% 54%}
.hero-bild::after{content:"";position:absolute;inset:0 -7% 0 0;
  animation:schimmer 1.5s cubic-bezier(.22,.68,.24,1) both;
  background:linear-gradient(97deg,rgba(10,42,46,.93) 0%,rgba(10,42,46,.86) 34%,rgba(10,42,46,.5) 56%,rgba(10,42,46,.16) 68%,rgba(10,42,46,0) 75%),
             linear-gradient(180deg,rgba(10,42,46,.4) 0%,rgba(10,42,46,0) 34%)}
@keyframes schimmer{from{opacity:0;transform:translateX(-7%)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.hero-bild::after{animation:none}}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);gap:clamp(30px,4.5vw,58px);align-items:center;width:100%}
.hero .karte-kontakt{margin-bottom:56px}
.hero-text{color:#fff;max-width:700px}
.hero-text h1{margin-bottom:18px;max-width:26ch}
.hero-text>p{color:#E2EAEB;font-size:18.5px;max-width:52ch}
.hero-aktion{display:flex;gap:13px;flex-wrap:wrap;margin-top:28px}
.hero-beleg{display:inline-flex;align-items:center;gap:9px;margin-top:26px;padding-top:18px;
  border-top:1px solid rgba(255,255,255,.22);font-size:15.5px;color:#CBD8D9}
.hero-beleg .material-symbols-outlined{font-size:20px;color:var(--petrol-hell)}
.scroll-hin{position:absolute;left:50%;bottom:132px;transform:translateX(-50%);z-index:2;
  display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.7);color:#fff;text-decoration:none}
.scroll-hin span.material-symbols-outlined{font-size:24px;display:block;line-height:1;margin-top:1px}
.scroll-hin::before{content:"";position:absolute;inset:-1.5px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.7);
  animation:pulsieren calc(2.6s / max(var(--motion),.35)) cubic-bezier(.3,0,.7,1) infinite}
.scroll-hin:hover{border-color:#fff;background:rgba(255,255,255,.14)}
@keyframes pulsieren{0%{transform:scale(1);opacity:.7}70%{transform:scale(calc(1 + .35 * var(--motion)));opacity:0}100%{transform:scale(1);opacity:0}}
@media(prefers-reduced-motion:reduce){.scroll-hin::before{animation:none}}

.karte-kontakt{background:#fff;border-radius:var(--r);padding:clamp(22px,2.2vw,30px);
  border:1px solid rgba(23,26,28,.09);color:var(--txt)}
.karte-kontakt .karte-titel{font-size:calc(26px * var(--tx-skala));margin-bottom:6px;font-weight:500;letter-spacing:-.02em;line-height:1.16}
.karte-kontakt .hin{font-size:15.5px;color:var(--grau);margin-bottom:18px}
.feld{margin-bottom:12px}
.feld label{display:block;font-size:13.5px;font-weight:600;color:var(--grau);margin-bottom:6px}
.feld input,.feld select{width:100%;padding:12px 13px;border:1px solid var(--bdr);border-radius:var(--r);
  font:inherit;font-size:16px;background:#fff;color:var(--txt)}
.feld input:focus,.feld select:focus{outline:2px solid var(--petrol);outline-offset:1px;border-color:var(--petrol)}
.karte-kontakt .btn{width:100%;justify-content:center;margin-top:5px}
.karte-tel{margin-top:16px;padding-top:15px;border-top:1px solid var(--bdr)}
.ansprech{display:flex;align-items:center;gap:12px}
.ansprech .portraet{width:54px;height:54px;flex:none;position:relative}
.ansprech .portraet img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.ansprech .punkt{position:absolute;right:-3px;bottom:2px;width:13px;height:13px;border-radius:50%;
  background:#2FA84F;border:2px solid #fff}
.ansprech .wer{font-size:14px;color:var(--grau);line-height:1.35}
.ansprech .wer b{display:block;font-size:15.5px;color:var(--txt);font-weight:600}
.ansprech .nr{margin-left:auto;text-align:right}
.ansprech .nr a{font-size:22px;font-weight:600;color:var(--txt);text-decoration:none;display:block;line-height:1.2}
.ansprech .nr small{font-size:13px;color:var(--grau)}
@media(max-width:560px){
  .ansprech{flex-wrap:wrap}
  .ansprech .nr{margin-left:0;text-align:left;width:100%;margin-top:12px}
  .ansprech .nr a{font-size:25px}
}
@media(max-width:1080px){
  .hero{min-height:0;display:block;padding-top:clamp(40px,6vw,72px)}
  .hero-aktion{flex-direction:column;align-items:stretch}
  .hero-aktion .btn{width:100%;justify-content:center}
  .hero .wrap{grid-template-columns:1fr}
  .hero-bild{clip-path:polygon(0 0,100% 0,100% 100%,63% calc(100% - 40px),0 100%)}
  .hero-bild::after{background:linear-gradient(97deg,rgba(10,42,46,.93) 0%,rgba(10,42,46,.88) 40%,rgba(10,42,46,.6) 75%,rgba(10,42,46,.35) 100%),
             linear-gradient(180deg,rgba(10,42,46,.4) 0%,rgba(10,42,46,0) 34%)}
  .scroll-hin{display:none}
  .ansprech .nr{margin-left:0}
}

/* Rückrufformular (Fluent Forms) im Aussehen von .feld. Bau-Anpassung: Im Entwurf waren die
   Felder Attrappen, im Bau ist es ein echtes Formular. Werte 1:1 aus .feld und .btn-voll. */
.karte-kontakt .fluentform .ff-el-group{margin-bottom:12px}
.karte-kontakt .fluentform .ff-el-input--label{margin-bottom:6px}
.karte-kontakt .fluentform .ff-el-input--label label{font-size:13.5px;font-weight:600;color:var(--grau);margin:0}
.karte-kontakt .fluentform .ff-el-input--label.asterisk-right label:after{color:var(--rot)}
.karte-kontakt .fluentform .ff-el-form-control{width:100%;padding:12px 13px;border:1px solid var(--bdr);border-radius:var(--r);
  font:inherit;font-size:16px;line-height:1.4;background:#fff;color:var(--txt);height:auto;box-shadow:none}
.karte-kontakt .fluentform select.ff-el-form-control{padding-right:34px}
.karte-kontakt .fluentform .ff-el-form-control:focus{outline:2px solid var(--petrol);outline-offset:1px;border-color:var(--petrol)}
.karte-kontakt .fluentform .ff-el-form-control::placeholder{color:#7A8587}
.karte-kontakt .fluentform .ff_submit_btn_wrapper{margin:5px 0 0}
.karte-kontakt .fluentform .ff-btn-submit{width:100%;display:inline-flex;justify-content:center;align-items:center;
  padding:15px 26px;border-radius:var(--r);border:1.5px solid transparent;background:var(--flaeche)!important;color:#fff!important;
  font:inherit;font-size:17px;font-weight:600;line-height:1.65;cursor:pointer;transition:background .18s;box-shadow:none}
.karte-kontakt .fluentform .ff-btn-submit:hover{background:var(--flaeche-dunkel)!important;opacity:1}
.karte-kontakt .fluentform .ff-el-is-error .ff-el-form-control{border-color:var(--rot)}
.karte-kontakt .fluentform .error{color:var(--rot);font-size:14px;margin-top:4px}
.karte-kontakt .ff-message-success{border:0;box-shadow:none;padding:14px 0 0;font-size:16px;color:var(--txt)}
.karte-kontakt p.formular-hinweis{font-size:13px;color:var(--grau);margin-top:10px;line-height:1.5}
.karte-kontakt p.formular-hinweis a{color:var(--flaeche)}

/* ===== 2 Vertrauensleiste, Modul M1 ======================================== */
.vertrauen .wrap{padding-top:calc(clamp(38px,3.8vw,54px) * var(--dichte));
  padding-bottom:calc(clamp(38px,3.8vw,54px) * var(--dichte))}
.vertrauen-raster{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.4vw,34px) clamp(22px,2.8vw,40px)}
.vertrauen-element{display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:start}
.vertrauen .material-symbols-outlined{color:var(--flaeche);font-size:25px;margin-top:2px}
.vertrauen b{display:block;font-size:16.5px;font-weight:600;margin-bottom:1px;white-space:nowrap}
.vertrauen span.txt{font-size:14.5px;color:var(--grau);line-height:1.5;display:block}
@media(max-width:1200px){.vertrauen b{white-space:normal}}
@media(max-width:1000px){.vertrauen-raster{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.vertrauen-raster{grid-template-columns:1fr}}

.kopfzeile-2spaltig{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr);
  gap:clamp(24px,4vw,56px);align-items:end;margin-bottom:clamp(30px,3.4vw,46px)}
@media(max-width:880px){.kopfzeile-2spaltig{grid-template-columns:1fr;align-items:start}}

/* ===== 3 Leistungen, sechs Kacheln ========================================= */
.kacheln{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.5vw,20px)}
.kachel{background:var(--flaeche);color:var(--flaeche-txt);border-radius:var(--r);
  padding:clamp(26px,2.4vw,34px);min-height:300px;display:flex;flex-direction:column;
  text-decoration:none;transition:background .18s,transform .18s}
.kachel:hover{background:var(--flaeche-dunkel);transform:translateY(-3px)}
.kachel .oben{margin-bottom:auto}
.kachel>.material-symbols-outlined{font-size:34px;margin-bottom:12px;opacity:.92}
.kachel h3{min-height:2.64em;white-space:nowrap}
.kachel .was{font-size:15.5px;line-height:1.55;margin-top:9px;opacity:.88;min-height:4.65em;text-wrap:pretty}
.kachel .pfeil{margin-top:14px;font-size:15.5px;font-weight:600;display:inline-flex;align-items:center;gap:7px}
.kachel .pfeil .material-symbols-outlined{font-size:18px}
.kachel.hinweis{background:var(--flaeche-dunkel)}
.kachel.hinweis:hover{background:#004b51}
@media(max-width:1240px){.kachel h3{white-space:normal}}
@media(max-width:1000px){.kacheln{grid-template-columns:repeat(2,1fr)}
  .kachel .was,.kachel h3{min-height:0}}
@media(max-width:600px){.kacheln{grid-template-columns:1fr}.kachel{min-height:0}}
@media(prefers-reduced-motion:reduce){.kachel:hover{transform:none}}

/* ===== 4 Bewohnbar, Aussage ================================================ */
.aussage{position:relative;overflow:hidden;isolation:isolate}
.aussage .zeichnung{position:absolute;left:-26.0505vw;top:-4vw;
  width:118.3854vw;height:auto;max-width:none;opacity:.14;pointer-events:none;z-index:0}
.aussage .wrap{position:relative;z-index:1}
.aussage-satz{margin-left:auto;max-width:830px;font-size:calc(clamp(26px,3vw,40px) * var(--tx-skala));font-weight:500;
  line-height:1.24;letter-spacing:-.02em;text-align:right}
.aussage-satz .leise{color:var(--grau-leise)}
.aussage-fuss{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;
  margin-top:clamp(34px,3.4vw,52px);align-items:start}
.aussage-fuss p{font-size:16.5px;color:var(--grau)}
.aussage-fuss .rechts{text-align:right;max-width:none}
@media(max-width:880px){.aussage-satz{text-align:left}
  .aussage-fuss{grid-template-columns:1fr}.aussage-fuss .rechts{text-align:left}}

/* ===== 5 Baustellen-Versprechen, Modul M4 ================================== */
.bildband{position:relative;background:var(--band-grund)}
.bildband .maserung{position:absolute;left:0;right:0;bottom:0;height:62%;
  background:var(--maserung-bild) center/cover no-repeat;
  opacity:var(--band-zeichnung);pointer-events:none}
.bildband-bild{height:clamp(260px,27vw,380px);position:relative;overflow:hidden}
.bildband-bild img{width:100%;height:100%;object-fit:cover}
.bildband-bild::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,42,46,.5) 0%,rgba(10,42,46,.08) 40%,rgba(10,42,46,.5) 100%)}
.bildband .wrap{position:relative;z-index:1;padding-bottom:clamp(52px,5.4vw,80px)}
.karte-versprechen{background:var(--band-karte);border-radius:var(--r);padding:clamp(26px,2.8vw,44px);
  margin-top:clamp(-130px,-12vw,-92px);position:relative;z-index:2;
  max-width:var(--karte-breite);margin-left:var(--karte-versatz);margin-right:var(--karte-versatz)}
.karte-versprechen h2{margin-bottom:12px}
.versprechen-liste{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,34px);margin-top:28px}
.versprechen-liste .material-symbols-outlined{color:var(--flaeche);font-size:28px;display:block;margin-bottom:10px}
.versprechen-liste b{display:block;font-size:17px;font-weight:600;margin-bottom:4px}
.versprechen-liste span.txt{font-size:15.5px;color:var(--grau);line-height:1.55;display:block}
@media(max-width:780px){.versprechen-liste{grid-template-columns:1fr}}

/* ===== 6 Ablauf als Schieber, Modul M3 ===================================== */
/* Styleguide 05.10.2026: läuft nicht mehr von selbst, nur auf Bedienung. */
.ablauf-lead{margin-top:10px;max-width:none}
.schieber-rahmen{position:relative;margin-top:clamp(26px,3vw,40px)}
.schieber-pfeil{position:absolute;top:0;bottom:calc(clamp(24px,2.6vw,36px) + 9px);
  margin-block:auto;z-index:3;
  width:48px;height:48px;border-radius:50%;border:1px solid var(--bdr);
  background:#fff;color:var(--txt);cursor:pointer;display:grid;place-items:center;padding:0;
  transition:border-color .18s,color .18s,opacity .18s}
.schieber-pfeil:hover:not(:disabled){border-color:var(--petrol);color:var(--flaeche)}
.schieber-pfeil:disabled{opacity:.28;cursor:default}
.schieber-pfeil.links{left:-58px}
.schieber-pfeil.rechts{right:-58px}
.schieber{overflow:hidden;touch-action:pan-y;cursor:grab}
.schieber.greift{cursor:grabbing}
.schieber.greift .schieber-spur{transition:none}
.schieber-spur{display:flex;list-style:none;gap:clamp(20px,2.4vw,34px);
  transition:transform .72s cubic-bezier(.33,.72,.28,1)}
.punkte{display:flex;gap:8px;justify-content:center;margin-top:clamp(24px,2.6vw,36px)}
.punkte button{width:9px;height:9px;padding:0;border-radius:50%;border:0;cursor:pointer;
  background:#C6D0D1;transition:background .2s,width .2s}
.punkte button.an{background:var(--flaeche);width:26px;border-radius:5px}
@media(max-width:1180px){.schieber-pfeil{display:none}}
.schritt{flex:0 0 calc((100% - 2 * clamp(20px,2.4vw,34px)) / 3);min-width:0}
.schritt .nr{display:inline-block;font-size:13px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--flaeche);background:rgba(0,118,127,.09);
  padding:5px 11px;border-radius:var(--r);margin-bottom:14px}
.schritt h3{margin-bottom:7px}
.schritt p{font-size:16px;color:var(--grau)}
@media(max-width:980px){.schritt{flex:0 0 calc((100% - clamp(20px,2.4vw,34px)) / 2)}}
@media(max-width:640px){.schritt{flex:0 0 100%}}
/* Ohne Skript (Builder, Skriptfehler) stehen die Schritte als Raster, nichts ist verborgen. */
html:not(.sch-js) .schieber-spur{flex-wrap:wrap;row-gap:28px}
html:not(.sch-js) .schieber-pfeil,html:not(.sch-js) .punkte:empty{display:none}
@media(prefers-reduced-motion:reduce){.schieber-spur{transition:none}}

/* ===== 7 und 8: gespiegelte 50:50-Sektionen ================================ */
.split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.split-bild{min-height:440px;height:100%;position:relative;overflow:hidden}
.split-bild img{width:100%;height:100%;object-fit:cover}
.projekte .split-bild::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to left,transparent 60%,rgba(10,42,46,.55) 100%),
             linear-gradient(0deg,rgba(10,42,46,.5) 0%,rgba(10,42,46,0) 30%)}
.split-text{display:flex;flex-direction:column;justify-content:center;
  padding-top:clamp(40px,4.6vw,72px);padding-bottom:clamp(40px,4.6vw,72px)}
.split-text.links{padding-left:max(var(--rand),calc(50vw - var(--halb)));padding-right:clamp(28px,4vw,64px)}
.split-text.rechts{padding-right:max(var(--rand),calc(50vw - var(--halb)));padding-left:clamp(28px,4vw,64px)}
@media(max-width:880px){.split{grid-template-columns:1fr}.split-bild{min-height:280px}.projekte .split-bild{aspect-ratio:4/3;max-height:420px}
  .split-text.links,.split-text.rechts{padding-left:var(--rand);padding-right:var(--rand)}}

/* Projekte, Modul M6: Petrol trägt die Textseite.
   Bau-Anpassung (E2): Alle Projekte stehen als Markup in der Seite, das Skript blättert nur.
   Im Entwurf lagen sie als Datenliste im Skript, im Builder nicht pflegbar. Karten und Bilder
   liegen je in einem Gitterfeld übereinander, die Höhe richtet sich nach dem längsten
   Projekt: nichts springt beim Wechsel, ohne gemessene Mindesthöhen wie im Entwurf. */
.projekte{background:var(--flaeche);color:#fff}
.projekte .split-bild{aspect-ratio:4/5;height:auto;max-height:720px}
.projekte .split-bild,.projekte .split-text{touch-action:pan-y}
html.sch-js .projekte .split-bild,html.sch-js .projekte .projekt-karten{cursor:grab}
.projekte .greift{cursor:grabbing}
.projekte .vorzeile{color:rgba(255,255,255,.9)}
.projekte .lead{color:rgba(255,255,255,.86)}
.projekt-karten{display:grid;margin-top:clamp(26px,3vw,42px)}
.projekt-karte{background:var(--projekt-box);border-radius:var(--r);padding:var(--projekt-abstand);
  display:flex;flex-direction:column;transition:opacity .5s cubic-bezier(.33,.72,.28,1),transform .5s cubic-bezier(.33,.72,.28,1),visibility .5s}
html.sch-js .projekt-karte{grid-area:1/1;opacity:0;visibility:hidden;transform:translateX(14px)}
html.sch-js .projekt-karte.an{opacity:1;visibility:visible;transform:none}
html:not(.sch-js) .projekt-karten{gap:14px}
.projekt-meta{display:flex;gap:16px;flex-wrap:wrap;font-size:14.5px;color:rgba(255,255,255,.82);margin-bottom:10px}
.projekt-meta span{display:inline-flex;align-items:center;gap:6px}
.projekt-meta .material-symbols-outlined{font-size:17px;color:rgba(255,255,255,.75)}
.projekt-text{font-size:16.5px;color:rgba(255,255,255,.9);margin-top:8px}
.projekt-karte .textlink{margin-top:20px;align-self:flex-start}
.projekt-fuss{display:flex;align-items:center;gap:12px;margin-top:22px;flex-wrap:wrap}
html:not(.sch-js) .projekt-fuss{display:none}
.projekt-pfeil{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.55);
  background:rgba(10,42,46,.35);color:#fff;cursor:pointer;display:grid;place-items:center;padding:0;
  backdrop-filter:blur(2px)}
.projekt-pfeil:hover{border-color:#fff;background:rgba(10,42,46,.55)}
.projekt-zaehler{font-size:14.5px;color:rgba(255,255,255,.82);margin-left:4px}
.projekt-alle{margin-top:clamp(30px,3.4vw,48px)}
.projekt-bild{transition:opacity .5s cubic-bezier(.33,.72,.28,1)}
html.sch-js .projekt-bilder .projekt-bild{position:absolute;inset:0;opacity:0}
html.sch-js .projekt-bilder .projekt-bild.an{opacity:1}
/* Ohne Skript: alle Bilder als Raster, damit jedes im Builder erreichbar ist. */
html:not(.sch-js) .projekt-bilder{display:grid;grid-template-columns:1fr 1fr;aspect-ratio:auto;max-height:none;align-content:start}
html:not(.sch-js) .projekt-bilder .projekt-bild{aspect-ratio:4/5;height:auto}
@media(max-width:880px){
  .projekte .split-text{padding-bottom:0}
  .projekt-karten{margin-top:18px}
  .projekte .projekt-fuss{margin-top:14px;margin-bottom:0}
  .projekte .projekt-alle{margin-top:10px;margin-bottom:0}
  .projekte .split-bild{margin-top:14px}
}
@media(prefers-reduced-motion:reduce){.projekt-karte,.projekt-bild,.stimme-eintrag{transition:none}
  html.sch-js .projekt-karte{transform:none}}

/* Kundenstimmen, Modul M9. Bau-Anpassung wie bei den Projekten (E2). */
.stimme{background:var(--tiefe)}
.stimme .split-text{color:#fff;padding-top:clamp(36px,3.8vw,56px);padding-bottom:clamp(36px,3.8vw,56px)}
.stimme .split-bild{max-height:min(78svh,700px)}
.sterne-zeile{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.sterne{display:flex;gap:1px;color:var(--gold)}
.sterne .material-symbols-outlined{font-variation-settings:'FILL'1,'wght'300;font-size:20px}
.sterne-zeile .wert{font-size:15px;color:#DDE7E8;font-weight:600}
.stimmen-liste{display:grid}
.stimme-eintrag{transition:opacity .5s cubic-bezier(.33,.72,.28,1),transform .5s cubic-bezier(.33,.72,.28,1),visibility .5s}
html.sch-js .stimme-eintrag{grid-area:1/1;opacity:0;visibility:hidden;transform:translateX(14px)}
html.sch-js .stimme-eintrag.an{opacity:1;visibility:visible;transform:none}
html:not(.sch-js) .stimmen-liste{gap:28px}
.stimme-zitat{font-size:calc(clamp(20px,1.8vw,25px) * var(--tx-skala));line-height:1.45;font-weight:400;
  letter-spacing:-.012em;max-width:32ch}
.stimme-zitat b{font-weight:700}
.stimme-wer{margin-top:18px;font-size:15.5px;color:#B7C6C8}
.stimme-wer b{color:#fff;font-weight:600;display:block}
.stimme-nav{display:flex;align-items:center;gap:12px;margin-top:22px}
html:not(.sch-js) .stimme-nav{display:none}
.stimme-nav button{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.3);
  background:transparent;color:#fff;cursor:pointer;display:grid;place-items:center;padding:0}
.stimme-nav button:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.stimme-nav .zaehler{font-size:14.5px;color:#B7C6C8}
.stimme-quelle{margin-top:20px;font-size:14px;color:#8FA3A5}
.stimme-quelle a{display:inline-flex;align-items:center;gap:7px;color:var(--petrol-hell);
  text-decoration:none;font-weight:600}
.stimme-quelle a .wort{border-bottom:1.5px solid currentColor;padding-bottom:2px}
.stimme-quelle a .material-symbols-outlined{font-size:17px}
@media(max-width:880px){.stimme .split-bild{display:none}}

/* ===== 9 Über uns ========================================================== */
.ueberuns{position:relative;overflow:hidden;min-height:min(880px,92svh)}
.ueberuns .zeichnung{position:absolute;left:-1.9792vw;right:auto;top:3.2292vw;bottom:auto;
  width:52.1875vw;height:auto;max-width:none;opacity:.30;pointer-events:none;z-index:0}
.ueberuns .wrap{position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(28px,3.6vw,60px);
  align-items:stretch}
.ueberuns-text{display:flex;flex-direction:column;justify-content:center;text-align:left}
.ueberuns .ueberuns-satz{line-height:1.3;word-spacing:.04em;margin-bottom:26px;text-align:left}
.ueberuns .ueberuns-satz .leise{display:block;margin-bottom:2px;color:var(--grau-leise)}
.ueberuns p:not(.vorzeile){font-size:16.5px;color:var(--grau);max-width:52ch}
.ueberuns .ueberuns-link{margin-top:22px}
.ueberuns-bild{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;min-height:clamp(420px,52vw,660px)}
.ueberuns-bild .gruppe{width:auto;max-width:100%;height:clamp(360px,44vw,580px);max-height:clamp(360px,44vw,580px);
  object-fit:contain;object-position:bottom}
.ki-zeichen{width:52px;height:auto;opacity:.5}
.ueberuns-bild .ki-zeichen{position:absolute;right:0;bottom:72px;max-width:52px}
.namen{display:flex;gap:clamp(24px,4vw,64px);justify-content:center;margin-top:20px;width:fit-content}
.namen span{font-size:15.5px;font-weight:600;color:var(--txt);text-align:center;line-height:1.3}
.namen small{display:block;font-size:13.5px;font-weight:400;color:var(--grau);margin-top:1px}
@media(max-width:980px){
  .ueberuns{min-height:0}
  .ueberuns .wrap{grid-template-columns:1fr}
  .ueberuns-text{text-align:left;order:1}
  .ueberuns-text p{margin-left:0}
  .ueberuns .ueberuns-satz{text-align:left}
  .ueberuns-bild{order:2;min-height:0;margin-top:36px}
  .ueberuns-bild .gruppe{height:clamp(300px,64vw,420px);max-height:clamp(300px,64vw,420px)}}

/* ===== 10 Einzugsgebiet, Modul M8 ========================================== */
.gebiet{position:relative;overflow:hidden}
.gebiet .transporter{position:absolute;left:52.1266vw;right:auto;top:-8.3557vw;
  width:100.2568vw;height:auto;max-width:none;opacity:.13;pointer-events:none;z-index:0}
.gebiet .wrap{position:relative;z-index:1}
.orte{margin-top:clamp(24px,2.8vw,40px);border-top:1px solid var(--bdr)}
.ort{display:grid;grid-template-columns:190px minmax(0,1fr) 210px;gap:20px;align-items:center;
  padding:18px 0;border-bottom:1px solid var(--bdr)}
.ort b,.ort .ort-name{font-size:calc(20px * var(--tx-skala));font-weight:500}
.ort span.txt{font-size:16px;color:var(--grau)}
.ort a{font-weight:600;color:var(--flaeche);text-decoration:none;font-size:16px;
  display:inline-flex;align-items:center;gap:7px;justify-content:flex-start;width:fit-content}
.ort a .wort{border-bottom:1.5px solid currentColor;padding-bottom:2px}
.ort a .material-symbols-outlined{font-size:17px}
.ort a:hover{color:var(--txt)}
.ort.betont b,.ort.betont .ort-name{font-weight:600}
.ort span.ort-txt{font-weight:600;color:var(--txt);font-size:16px}
@media(max-width:760px){.ort{grid-template-columns:1fr;gap:4px}}

/* ===== 11 Handlungsband, Modul M2 ========================================== */
.band{background:var(--flaeche);color:#fff;position:relative;overflow:hidden}
.band .dachlinie{position:absolute;left:34.0016vw;right:auto;top:0.9505vw;
  width:115.7693vw;height:auto;max-width:none;opacity:.23;pointer-events:none}
.band .wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);
  gap:clamp(30px,4vw,64px);align-items:center;
  padding-top:clamp(48px,4.8vw,76px);padding-bottom:clamp(48px,4.8vw,76px)}
.band .vorzeile{color:rgba(255,255,255,.9)}
.band h2{margin-bottom:12px;max-width:20ch}
.band p{color:rgba(255,255,255,.9);font-size:17.5px}
.band p b{color:#fff}
/* Wechselndes Wort: Styleguide 05.10.2026, kommt zur Ruhe statt endlos zu wechseln. */
.wechsel{display:inline-grid;vertical-align:bottom}
.wechsel span{grid-area:1/1;white-space:nowrap}
html.sch-js .wechsel span{opacity:0;transform:translateY(6px);
  transition:opacity .6s cubic-bezier(.33,.72,.28,1),transform .6s cubic-bezier(.33,.72,.28,1)}
html.sch-js .wechsel span.da{opacity:1;transform:none}
html:not(.sch-js) .wechsel span:not(:first-child){visibility:hidden}
.band .karte-kontakt p{color:var(--grau)}
/* Im Entwurf erbte der Kartentitel im Band Abstand und Breite von .band h2 (gleiche Spezifität,
   spätere Regel). Für 1:1 hier nachgebildet, die Farbe bleibt Text. */
.band .karte-kontakt .karte-titel{margin-bottom:12px;max-width:20ch;color:var(--txt);font-size:calc(26px * var(--tx-skala))}
.band .person{display:flex;align-items:center;gap:14px;margin-top:32px}
.band .person .bild{width:78px;height:78px;flex:none;position:relative}
.band .person .bild img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.band .person .punkt{position:absolute;right:-2px;bottom:5px;width:16px;height:16px;border-radius:50%;
  background:#4ADE80;border:2px solid var(--flaeche)}
.band .person .wer{font-size:15px;color:rgba(255,255,255,.85)}
.band .person .wer b{display:block;font-size:18px;color:#fff;font-weight:600}
.band .person .zeiten{margin-left:auto;text-align:right;font-size:14.5px;color:rgba(255,255,255,.85)}
.band .person .zeiten a{font-size:25px;font-weight:600;color:#fff;text-decoration:none;display:block;line-height:1.25}
@media(max-width:880px){.band .wrap{grid-template-columns:1fr}
  .band .person{flex-wrap:wrap}.band .person .zeiten{margin-left:0;text-align:left;width:100%}}

/* ===== 12 Fragen, Modul M7 ================================================= */
.fragen{position:relative;overflow:hidden}
.fragen .werkzeug{position:absolute;left:17.4911vw;top:auto;bottom:18%;
  width:26.6094vw;height:auto;max-width:none;opacity:.34;pointer-events:none;z-index:0}
.fragen .wrap{position:relative;z-index:1}
.fragen-raster{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(30px,4vw,64px);align-items:start}
.fragen-intro{font-size:16px;color:var(--grau-leise);margin-top:10px;max-width:38ch}
.fragen-tel{margin-top:20px}
.fragen-zeiten{margin-top:10px;font-size:15px;color:var(--grau)}
.fragen-liste{display:flex;flex-direction:column;gap:2px}
details{border-radius:var(--r)}
summary{list-style:none;cursor:pointer;padding:16px 44px 16px 58px;font-size:calc(19px * var(--tx-skala));
  font-weight:500;letter-spacing:-.01em;position:relative;line-height:1.35;border-radius:var(--r)}
summary:hover{color:var(--flaeche)}
summary::-webkit-details-marker{display:none}
summary::before{content:attr(data-nr);position:absolute;left:18px;top:19px;font-size:13px;font-weight:600;
  letter-spacing:.1em;color:var(--flaeche)}
summary::after{content:"add";font-family:'Material Symbols Outlined';font-variation-settings:'wght'300;
  font-size:23px;color:var(--flaeche);position:absolute;right:16px;top:16px;-webkit-font-feature-settings:'liga';font-feature-settings:'liga'}
details[open] summary::after{content:"remove"}
details[open] summary{color:var(--flaeche)}
details p{padding:0 44px 20px 58px;font-size:16.5px;color:var(--grau);max-width:68ch}
@media(max-width:880px){.fragen-raster{grid-template-columns:1fr}}

/* Zeichnungen auf schmalen Fenstern (Entwurf: eigener Satz Werte unter 980 px) */
@media(max-width:980px){
  .aussage .zeichnung{left:-62vw;top:-6vw;width:210vw}
  .ueberuns .zeichnung{left:-18vw;top:auto;bottom:34%;width:160vw}
  .gebiet .transporter{left:-2vw;top:26%;width:160vw}
  .band .dachlinie{left:5vw;top:2vw;width:250vw}
  .fuss .skizze{left:10vw;top:auto;bottom:6%;width:190vw}
  .fragen .werkzeug{display:none}
}

/* ===== Fußzeile, Reusable R2 =============================================== */
.fuss{background:var(--tiefe);color:#fff;padding:clamp(52px,5.2vw,82px) 0 30px;position:relative;overflow:hidden}
.fuss .skizze{position:absolute;left:46vw;right:auto;top:9vw;
  width:87.5vw;height:auto;max-width:none;opacity:.55;pointer-events:none}
.fuss .wrap{position:relative;z-index:1}
.fuss-oben{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(30px,3.4vw,60px)}
.fuss-logo{height:58px;width:auto;margin-bottom:20px}
.fuss-kontakt .adresse{color:#DCE6E7;font-size:16.5px;line-height:1.7}
.fuss-kontakt .adresse b{color:#fff;font-weight:600}
.fuss-kontakt .adresse .werkstatt{color:#9FB1B3}
.fuss-kontakt .nr{display:inline-block;font-size:26px;font-weight:600;color:#fff;text-decoration:none;margin:16px 0 2px}
.fuss-kontakt .nr:hover{color:var(--petrol-hell)}
.fuss-kontakt a{color:#DCE6E7}
.fuss-kontakt .zeiten{margin-top:20px;color:#9FB1B3;font-size:15.5px;line-height:1.6}
.fuss-kontakt .zeiten b{color:#DCE6E7;font-weight:600}
.fuss-daten{display:contents}
/* Bau-Anpassung (E3): Spaltentitel sind Absätze, keine Überschriften. Werte 1:1 aus .fuss-daten h3. */
.fuss-titel{font-size:13px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--petrol-hell);margin-bottom:12px;line-height:1.32}
.fuss-titel.zweite{margin-top:26px}
.fuss-liste{list-style:none}
.fuss-liste li{font-size:16px;color:#DCE6E7;line-height:1.75;list-style:none;white-space:nowrap}
.fuss-liste a{text-decoration:none;color:#DCE6E7}
.fuss-liste a:hover{color:#fff;text-decoration:underline}
.fuss-liste .current-menu-item>a{color:#fff}
.fuss-unten{margin-top:clamp(36px,4.2vw,60px);padding-top:20px;border-top:1px solid rgba(255,255,255,.16);
  display:grid;grid-template-columns:1fr 1.7fr 1fr;gap:16px;font-size:14.5px;color:#9FB1B3;align-items:center}
.fuss-unten a{text-decoration:none}
.fuss-unten a:hover{color:#fff}
.fuss-unten p{max-width:none;font-size:inherit}
.fuss-unten .mitte{text-align:center}
.fuss-unten .rechts{text-align:right}
.fuss-rechtliches{list-style:none;display:flex;flex-wrap:wrap}
.fuss-rechtliches li+li::before{content:"·";margin:0 .55em}
@media(max-width:1100px){.fuss-liste li{white-space:normal}}
@media(max-width:900px){.fuss-oben{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.fuss-oben{grid-template-columns:1fr}}
@media(max-width:880px){
  .fuss-unten{grid-template-columns:1fr;text-align:left}
  .fuss-unten .mitte,.fuss-unten .rechts{text-align:left}}

/* ===== Oxygen-Hüllen ======================================================= */
/* Das Shortcode-Element legt um jede Menüausgabe ein div. Es soll im Layout nicht mitzählen. */
.menue-nav>.oxy-shortcode,.mobil-nav>.oxy-shortcode,.fuss-spalte>.oxy-shortcode,
.fuss-recht>.oxy-shortcode,.formular-ort>.oxy-shortcode{display:contents}
/* Listen in Oxygen: Jeder Listenpunkt trägt sein Textelement als div, das darf keinen Umbruch erzeugen. */
.fuss-liste li>.oxy-text{display:inline}

/* ===== Bildplatz vor dem Laden ============================================= */
/* Oxygen gibt an Bildern weder width noch height aus und lädt verzögert. Ohne Seitenverhältnis
   haben Logo, Personen und Zeichnungen bis zum Laden die Größe null, das Layout springt
   (Skill figma-zu-oxygen, Abnahmekriterium 9). Zeichnungen über ihre Adresse, Fotos über die Klasse. */
img[src*="/zeichnungen/"]{aspect-ratio:2/1}
img[src*="zeichnung-dachbinder"]{aspect-ratio:1400/422}
img[src*="zeichnung-handhobel"]{aspect-ratio:1400/770}
img[src*="zeichnung-transporter"]{aspect-ratio:1400/781}
.kopf-logo img,.mobil-menue-kopf img,.fuss-logo{aspect-ratio:500/217}
.ki-zeichen{aspect-ratio:600/190;overflow:hidden}
/* Feste Höhe: Vor dem Laden nähme sonst der Alt-Text des Kennzeichens 184 px Höhe ein (bildplatz.mjs). */
.ueberuns-bild .ki-zeichen{height:16px}
.uu-szene .ki-zeichen{height:12px}
.ueberuns-bild .gruppe,.uu-szene .gruppe{aspect-ratio:471/821}
.stimme .split-bild img{aspect-ratio:1100/1300}
.portraet img,.bild img{aspect-ratio:1/1}

/* ============================================================================
   Zimmerei & Holzbau Schäfer: Bausteine der Unterseiten
   ----------------------------------------------------------------------------
   Teil A: Styleguide 05.10.2026, Teil 2 „Unterseiten", wörtlich übernommen
           (Kopfbereich, Sprungleiste, Fachabschnitt, leise Zeichnung, Über-uns-Szene).
   Teil B: Neue Bausteine aus der Sitemap (19.08.2026), gestaltet am 05.10.2026 in der
           Formensprache der Startseite. Regeln aus dem Styleguide, die hier gelten:
           Radius 4 px überall, keine Schatten, keine Trennlinien zwischen Sektionen,
           keine Verläufe auf Flächen, Weiß und Papier im Wechsel, Rot nur als Vorzeile,
           helles Petrol nur für Symbole, Linien und Hover, Überschriften Medium.
   Diese Datei hängt .work/zerlegen.py hinter schaefer-design.css.
   ========================================================================== */

/* ===== A Styleguide-Bausteine ============================================== */

/* Kopfbereich der Unterseiten: Papier, ohne Kante, Illustration rechts als Motiv */
.u-kopf{background:var(--papier);position:relative;overflow:hidden;
  padding:clamp(48px,5vw,80px) 0 clamp(40px,4vw,64px)}
.u-kopf .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,56px);align-items:center}
.u-kopf-text h1{margin-bottom:18px;max-width:22ch}
.u-kopf-text>p:not(.vorzeile){font-size:18.5px;color:var(--grau);max-width:46ch}
.u-kopf-aktion{display:flex;gap:22px;flex-wrap:wrap;align-items:center;margin-top:28px}
.u-anker{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:26px;font-size:15.5px}
.u-anker a{color:var(--flaeche);font-weight:600;text-decoration:none;border-bottom:1.5px solid transparent}
.u-anker a:hover{border-bottom-color:var(--petrol)}
.u-kopf-bild{align-self:start;margin-bottom:calc(-1 * clamp(40px,4vw,64px) - 40px)}
.u-kopf-bild img{width:158%;max-width:none;margin-left:-8%;opacity:var(--kopf-deckkraft,.55)}
@media(max-width:880px){
  .u-kopf{padding-top:0}
  .u-kopf .wrap{grid-template-columns:1fr;gap:0}
  .u-kopf-bild{order:-1;margin:0 0 18px;padding-top:16px}
  .u-kopf-bild img{width:100%;margin:0;max-width:100%}
  .u-kopf-text>p:not(.vorzeile){font-size:17px}
  .u-kopf-aktion{flex-direction:column;align-items:stretch;gap:14px;margin-top:22px}
  .u-kopf-aktion .btn{justify-content:center}
  .u-kopf-aktion .textlink{align-self:flex-start}
}
/* Variante ohne Bild (Rechtstexte, Kontakt): eine Spalte, kein Motiv. */
.u-kopf.ohne-bild .wrap{grid-template-columns:minmax(0,1fr)}
@media(max-width:880px){.u-kopf.ohne-bild{padding-top:clamp(40px,8vw,56px)}}

/* Über uns: Freisteller vor der Hauszeichnung (Beispielseite Über uns, Styleguide) */
.uu-rechts{align-self:center}
.uu-szene{position:relative;aspect-ratio:2/1;width:160%;margin-left:-8%}
.uu-szene .haus{position:absolute;left:0;bottom:0;width:100%;max-width:none;opacity:.55;transform:none}
.uu-szene .gruppe{position:absolute;left:19%;bottom:10.8%;height:62%;width:auto}
.uu-szene .ki-zeichen{position:absolute;left:calc(19% + 4px);bottom:calc(10.8% + 8px);width:38px;opacity:.6}
.uu-namen{display:flex;gap:28px;margin:4px 0 0 22%;font-size:15px;font-weight:600}
.uu-namen small{display:block;font-weight:400;color:var(--grau);font-size:14px}
@media(max-width:880px){
  .uu-rechts{order:-1;margin:0 0 20px;padding-top:16px}
  .uu-szene{width:100%;margin-left:0}
  .uu-szene .haus{left:0;width:100%;transform:none}
  .uu-szene .gruppe{left:21%;height:74%}
  .uu-namen{display:none}
}

/* Sprungnavigation: klebt unter der Kopfzeile, ohne Schatten.
   Bau-Anpassung: Die Höhe der Kopfzeile misst das Skript (--kopf-hoehe), dazu die Adminleiste. */
.sprung{position:sticky;top:calc(var(--wp-admin--admin-bar--height,0px) + var(--kopf-hoehe,87px));z-index:30;background:var(--papier);
  border-bottom:1px solid var(--bdr)}
.sprung .wrap{display:flex;gap:28px;overflow-x:auto;scrollbar-width:none}
.sprung .wrap::-webkit-scrollbar{display:none}
.sprung a{flex:none;padding:14px 0 12px;font-size:15.5px;font-weight:500;text-decoration:none;color:var(--txt);
  border-bottom:2px solid transparent;white-space:nowrap}
.sprung a:hover,.sprung a.aktiv{border-bottom-color:var(--petrol);color:var(--flaeche)}
.sprung{--sprung-rand:var(--papier)}
.sprung .weiter{display:none}
@media(max-width:880px){
  .sprung .wrap{padding-right:64px;scroll-padding-left:var(--rand)}
  .sprung::after{content:"";position:absolute;right:0;top:0;bottom:1px;width:84px;pointer-events:none;
    background:linear-gradient(90deg,rgba(246,243,239,0),var(--sprung-rand) 62%)}
  .sprung .weiter{display:grid;place-items:center;position:absolute;right:max(10px,calc(var(--rand) - 10px));top:50%;
    transform:translateY(-50%);z-index:1;width:34px;height:34px;border-radius:50%;border:1px solid var(--bdr);
    background:#fff;color:var(--flaeche);cursor:pointer;padding:0}
  .sprung .weiter .material-symbols-outlined{font-size:20px}
  .sprung.am-ende::after,.sprung.am-ende .weiter{display:none}
}
/* Bau-Anpassung: Sprungziele landen unter Kopfzeile und Sprungleiste, nicht dahinter. */
main section[id],.sprung-ziel{scroll-margin-top:calc(var(--wp-admin--admin-bar--height,0px) + var(--kopf-hoehe,87px) + 52px)}

/* Lange Fachabschnitte: Überschrift links, Text rechts */
.fach{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(28px,3.6vw,60px);align-items:start}
.fach-text p{font-size:17px;color:var(--grau);margin-bottom:16px}
.fach-text p strong{color:var(--txt)}
.fach-text ul{list-style:none;margin:6px 0 18px;max-width:64ch}
.fach-text li{position:relative;padding-left:26px;margin-bottom:8px;color:var(--grau)}
.fach-text li::before{content:"";position:absolute;left:2px;top:.72em;width:12px;height:1.5px;background:var(--petrol)}
.fach-text .btn{margin-top:6px}
@media(max-width:880px){.fach{grid-template-columns:1fr;gap:14px}}

/* Leise Zeichnung im Weißraum unter der Überschrift, nicht hinter langem Fließtext */
.mit-flaeche{position:relative;overflow:hidden;isolation:isolate}
.fach-links{position:relative}
.mit-flaeche .flaeche-zeichnung{position:absolute;z-index:-1;pointer-events:none;max-width:none;
  left:-34%;top:calc(100% - 46px);width:150%;opacity:var(--flaeche-deckkraft,.2)}
@media(max-width:880px){.mit-flaeche .flaeche-zeichnung{display:none}}

/* ===== B Neue Bausteine ==================================================== */

/* Gemeinsame Kleinteile, damit jeder Baustein dieselben Maße nutzt */
.b-kopf{margin-bottom:clamp(30px,3.4vw,46px)}
.b-kopf h2{max-width:24ch}
.b-kopf .lead,.fach-lead,.kosten-lead,.aufbau-lead{margin-top:12px}
.aufbau-lead{margin-bottom:26px}
.marke{display:inline-block;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--flaeche);background:rgba(0,118,127,.09);padding:5px 11px;border-radius:var(--r)}
.fakten{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.fakten li{font-size:14px;font-weight:600;color:var(--txt);background:#fff;border:1px solid var(--bdr);
  border-radius:var(--r);padding:5px 10px;line-height:1.4}
.papier .fakten li{background:#fff}

/* B1 Leistungsteile: was wir erneuern, je Teil Anlass und Nutzen (Dachsanierung Nr. 3) */
.teile{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.5vw,20px)}
.teil{background:#fff;border-radius:var(--r);padding:clamp(24px,2.4vw,34px);display:flex;flex-direction:column}
.sektion:not(.papier) .teil{background:var(--papier)}
.teil>.material-symbols-outlined{font-size:30px;color:var(--flaeche);margin-bottom:12px}
.teil h3{margin-bottom:14px}
.teil dl{display:grid;gap:10px;margin-bottom:auto}
.teil dt{font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--grau)}
.teil dd{font-size:16px;color:var(--grau);line-height:1.55;margin-top:-6px}
.teil dd strong{color:var(--txt)}
.teil .textlink{margin-top:18px;align-self:flex-start;font-size:15.5px}
@media(max-width:760px){.teile{grid-template-columns:1fr}}

/* B2 Ablauf ausführlich: senkrechte Schrittfolge mit Faden (Dachsanierung Nr. 6) */
.ablauf-lang{list-style:none;position:relative;counter-reset:schritt}
.ablauf-lang::before{content:"";position:absolute;left:23px;top:8px;bottom:8px;width:1.5px;background:var(--bdr)}
.ablauf-lang li{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);gap:20px;padding-bottom:clamp(22px,2.4vw,32px)}
.ablauf-lang li:last-child{padding-bottom:0}
.ablauf-lang .punkt{position:relative;z-index:1;width:48px;height:48px;border-radius:50%;background:#fff;
  border:1.5px solid var(--petrol);color:var(--flaeche);display:grid;place-items:center;
  font-size:14px;font-weight:600;letter-spacing:.06em}
.papier .ablauf-lang .punkt{background:var(--papier)}
.ablauf-lang h3{margin:10px 0 6px}
.ablauf-lang p{font-size:16.5px;color:var(--grau)}
.ablauf-lang .hinweis{display:flex;gap:8px;align-items:flex-start;margin-top:10px;font-size:15px;color:var(--txt)}
.ablauf-lang .hinweis .material-symbols-outlined{font-size:19px;color:var(--flaeche);margin-top:2px}

/* B3 Kosten mit Angebots-Checkliste (Dachsanierung Nr. 7, alle Leistungsseiten „Planung und Kosten") */
.kosten{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);gap:clamp(28px,3.6vw,60px);align-items:start}
.faktoren{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px clamp(20px,2.4vw,34px);margin-top:clamp(24px,2.6vw,34px)}
.faktor{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;align-items:start}
.faktor .material-symbols-outlined{font-size:24px;color:var(--flaeche);margin-top:1px}
.faktor b{display:block;font-size:16.5px;font-weight:600}
.faktor span.txt{display:block;font-size:15px;color:var(--grau);line-height:1.5}
.checkliste{background:var(--flaeche-dunkel);color:#fff;border-radius:var(--r);padding:clamp(24px,2.6vw,36px)}
.checkliste .vorzeile{color:var(--petrol-hell)}
.checkliste-titel{font-size:calc(24px * var(--tx-skala));font-weight:500;letter-spacing:-.02em;line-height:1.25;margin-bottom:16px;max-width:none}
.checkliste ul{list-style:none;display:grid;gap:10px}
.checkliste li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;font-size:16px;line-height:1.5;color:#E2EAEB}
.checkliste li .material-symbols-outlined{font-size:21px;color:var(--petrol-hell);margin-top:1px}
.checkliste .fuss-hinweis{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.2);font-size:14.5px;color:#CBD8D9}
@media(max-width:980px){.kosten{grid-template-columns:1fr}}
@media(max-width:600px){.faktoren{grid-template-columns:1fr}}

/* B4 Vergleichsmatrix mit Anker-Buttons (Dachfenster oder Gaube, Nr. 2) */
.matrix-rahmen{overflow-x:auto}
.matrix{width:100%;border-collapse:collapse;font-size:16px;background:#fff;border-radius:var(--r)}
.matrix th,.matrix td{text-align:left;vertical-align:top;padding:16px 20px;border-bottom:1px solid var(--bdr)}
.matrix thead th{font-size:17px;font-weight:600;color:var(--txt);border-bottom:1.5px solid var(--petrol);white-space:nowrap}
.matrix thead th .material-symbols-outlined{font-size:22px;color:var(--flaeche);vertical-align:-5px;margin-right:6px}
.matrix tbody th{font-weight:600;color:var(--txt);width:26%}
.matrix td{color:var(--grau)}
.matrix tbody tr:last-child th,.matrix tbody tr:last-child td{border-bottom:0}
.matrix .wert{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--txt)}
.matrix .wert .material-symbols-outlined{font-size:19px;color:var(--flaeche)}
.anker-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,2.4vw,30px)}
.anker-knoepfe .btn{font-size:16px;padding:12px 20px}
@media(max-width:760px){
  .matrix thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .matrix,.matrix tbody,.matrix tr,.matrix th,.matrix td{display:block;width:100%}
  .matrix tr{padding:16px 18px;border-bottom:1px solid var(--bdr)}
  .matrix tbody tr:last-child{border-bottom:0}
  .matrix th,.matrix td{padding:0;border:0}
  .matrix tbody th{margin-bottom:8px;width:100%}
  .matrix td{padding:6px 0 4px}
  .matrix td::before{content:attr(data-spalte);display:block;font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--flaeche);margin-bottom:2px}
}

/* B5 Varianten zur Auswahl (Carport, Pergola oder Terrassenüberdachung, Nr. 2) */
.varianten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.5vw,20px)}
/* Gemeinsames Zeilenraster: Trennlinie und Link stehen in allen Karten auf einer Höhe. */
.variante{background:#fff;border-radius:var(--r);padding:clamp(24px,2.4vw,32px);display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0;align-content:start}
.sektion:not(.papier) .variante{background:var(--papier)}
.variante>.material-symbols-outlined{font-size:34px;color:var(--flaeche);margin-bottom:12px}
.variante h3{margin-bottom:8px}
.variante>p{font-size:16px;color:var(--grau)}
.variante .passt{align-self:start;margin-top:18px;padding-top:16px;border-top:1px solid var(--bdr)}
.variante .passt-titel{font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--grau);margin-bottom:8px}
.variante ul{list-style:none;display:grid;gap:6px}
.variante li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px;font-size:15.5px;color:var(--txt);line-height:1.5}
.variante li .material-symbols-outlined{font-size:19px;color:var(--flaeche);margin-top:1px}
.variante .textlink{margin-top:20px;align-self:end;justify-self:start;font-size:15.5px}
@media(max-width:980px){.varianten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.varianten{grid-template-columns:1fr}}

/* B6 Gegenüberstellung, zwei gleich lange Spalten (Maßanfertigung oder Bausatz; Dach oder Elektrik) */
.gegenueber{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.5vw,20px)}
.seite{border-radius:var(--r);padding:clamp(24px,2.6vw,36px);background:#fff;border:1px solid var(--bdr)}
.seite.betont{background:var(--flaeche);border-color:var(--flaeche);color:#fff}
.seite-kopf{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.seite-kopf .material-symbols-outlined{font-size:28px;color:var(--flaeche)}
.seite.betont .seite-kopf .material-symbols-outlined{color:var(--petrol-hell)}
.seite-kopf h3{margin:0}
.seite ul{list-style:none;display:grid;gap:12px}
.seite li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;font-size:16px;line-height:1.5;color:var(--grau)}
.seite li .material-symbols-outlined{font-size:20px;color:var(--flaeche);margin-top:1px}
.seite.betont li{color:#E2EAEB}
.seite.betont li .material-symbols-outlined{color:var(--petrol-hell)}
.seite li b{color:var(--txt);font-weight:600}
.seite.betont li b{color:#fff}
.gegenueber-fuss{margin-top:clamp(20px,2.2vw,28px);font-size:16px;color:var(--grau);max-width:70ch}
@media(max-width:760px){.gegenueber{grid-template-columns:1fr}}

/* B7 Kurzantwort mit Stand und Quellen (Solarpflicht, GEO-Antworten) */
.antwort{background:#fff;border-radius:var(--r);padding:clamp(24px,2.8vw,40px);border:1px solid var(--bdr)}
.papier .antwort{border-color:transparent}
.antwort-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:16px}
.antwort-stand{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--grau)}
.antwort-stand .material-symbols-outlined{font-size:18px;color:var(--flaeche)}
.antwort-satz{font-size:calc(clamp(21px,2vw,26px) * var(--tx-skala));font-weight:500;line-height:1.38;letter-spacing:-.012em;color:var(--txt);max-width:44ch;margin-bottom:16px}
.antwort>p:not(.antwort-satz){font-size:16.5px;color:var(--grau);margin-bottom:12px}
.antwort ul{list-style:none;margin:6px 0 14px}
.antwort ul li{position:relative;padding-left:26px;margin-bottom:8px;color:var(--grau);font-size:16.5px}
.antwort ul li::before{content:"";position:absolute;left:2px;top:.72em;width:12px;height:1.5px;background:var(--petrol)}
.quellen{margin-top:18px;padding-top:16px;border-top:1px solid var(--bdr);font-size:14.5px;color:var(--grau)}
.quellen-titel{font-weight:600;color:var(--txt);margin-bottom:6px}
.quellen ol{margin:0;padding-left:20px;display:grid;gap:4px}
.quellen a{color:var(--flaeche);text-decoration:underline;text-underline-offset:2px}
/* Variante Grenze: was nicht zum Angebot gehört, ruhig und ohne Warnfarbe */
.antwort.grenze{display:grid;grid-template-columns:36px minmax(0,1fr);gap:16px;align-items:start}
.antwort.grenze>.material-symbols-outlined{font-size:30px;color:var(--flaeche)}
.antwort.grenze .antwort-satz{font-size:calc(21px * var(--tx-skala));margin-bottom:8px}

/* B8 Weiterführende Leistungen, zwei Wege (Modul M5 Cross-Teaser) */
.weiter-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.5vw,20px)}
.weiter-karte{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);align-items:stretch;background:#fff;
  border:1px solid var(--bdr);border-radius:var(--r);text-decoration:none;color:var(--txt);overflow:hidden;
  transition:border-color .18s,transform .18s}
.papier .weiter-karte{border-color:transparent}
.weiter-karte:hover{border-color:var(--petrol);transform:translateY(-3px)}
.weiter-text{padding:clamp(22px,2.4vw,32px);display:flex;flex-direction:column}
.weiter-text .vorzeile{margin-bottom:10px}
.weiter-text h3{margin-bottom:8px}
.weiter-text .txt{font-size:15.5px;color:var(--grau);line-height:1.55;margin-bottom:16px}
.weiter-text .pfeil{margin-top:auto;display:inline-flex;align-items:center;gap:7px;font-size:15.5px;font-weight:600;color:var(--flaeche)}
.weiter-text .pfeil .material-symbols-outlined{font-size:18px}
.weiter-bild{background:var(--papier);position:relative;overflow:hidden;min-height:180px}
.papier .weiter-bild{background:#EFEAE3}
.weiter-bild img{position:absolute;left:-6%;bottom:-8%;width:128%;max-width:none;opacity:.6}
@media(max-width:980px){.weiter-raster{grid-template-columns:1fr}}
@media(max-width:520px){.weiter-karte{grid-template-columns:1fr}.weiter-bild{order:-1;min-height:150px}}
@media(prefers-reduced-motion:reduce){.weiter-karte:hover{transform:none}}

/* B9 Bildpaar vorher und nachher (Holz durch Witterung, Fassade Nr. 3) */
.bildpaar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.5vw,20px)}
.bildpaar figure{margin:0}
.bildpaar .bildrahmen{position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--papier)}
.bildpaar .bildrahmen img{width:100%;height:100%;object-fit:cover}
.bildpaar .marke{position:absolute;left:14px;top:14px;background:#fff}
.bildpaar figcaption{margin-top:12px;font-size:15.5px;color:var(--grau);line-height:1.55;max-width:52ch}
.bildpaar figcaption b{color:var(--txt)}
@media(max-width:640px){.bildpaar{grid-template-columns:1fr}}

/* B10 Zeitstrahl (Seit über 30 Jahren in Winnenden, Über uns Nr. 5) */
.zeitstrahl{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0 clamp(20px,2.4vw,34px);position:relative}
.zeitstrahl li{position:relative;padding-top:34px}
.zeitstrahl li::before{content:"";position:absolute;left:0;right:calc(-1 * clamp(20px,2.4vw,34px));top:9px;height:1.5px;background:var(--bdr)}
.zeitstrahl li:last-child::before{right:0}
.zeitstrahl li::after{content:"";position:absolute;left:0;top:3px;width:14px;height:14px;border-radius:50%;
  background:var(--weiss);border:1.5px solid var(--petrol)}
.papier .zeitstrahl li::after{background:var(--papier)}
.zeitstrahl li.jetzt::after{background:var(--flaeche);border-color:var(--flaeche)}
.zeitstrahl .jahr-zahl{display:block;font-size:calc(clamp(28px,2.6vw,36px) * var(--tx-skala));font-weight:500;letter-spacing:-.02em;color:var(--flaeche);line-height:1.1;margin-bottom:8px}
.zeitstrahl h3{margin-bottom:6px}
.zeitstrahl p{font-size:15.5px;color:var(--grau);line-height:1.55}
@media(max-width:760px){
  .zeitstrahl{grid-template-columns:1fr;gap:0;padding-left:30px}
  .zeitstrahl li{padding-top:0;padding-bottom:26px}
  .zeitstrahl li:last-child{padding-bottom:0}
  .zeitstrahl li::before{left:-23px;right:auto;top:10px;bottom:-10px;width:1.5px;height:auto}
  .zeitstrahl li:last-child::before{display:none}
  .zeitstrahl li::after{left:-30px;top:10px}
}

/* B11 Nachweise und Partner (Ausbildungsbetrieb und Partner, Über uns Nr. 7) */
.nachweise{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.5vw,20px)}
.nachweis{background:#fff;border-radius:var(--r);padding:clamp(20px,2vw,28px);display:flex;flex-direction:column;gap:10px}
.sektion:not(.papier) .nachweis{background:var(--papier)}
.nachweis-logo{height:64px;display:flex;align-items:center}
.nachweis-logo img{max-height:64px;width:auto;max-width:100%;object-fit:contain}
.nachweis-logo .material-symbols-outlined{font-size:40px;color:var(--flaeche)}
.nachweis-logo.platzhalter{border:1px dashed var(--bdr);border-radius:var(--r);justify-content:center;font-size:13px;color:var(--grau);letter-spacing:.06em;text-transform:uppercase}
.nachweis-titel{font-size:16.5px;font-weight:600}
.nachweis span.txt{font-size:15px;color:var(--grau);line-height:1.5}
@media(max-width:1000px){.nachweise{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.nachweise{grid-template-columns:1fr}}

/* B12 Kontakt-Kopf: links Telefon und Ansprechpartner, rechts das Formular
   (Styleguide: Kontakt ohne Zeichnung, zweispaltig, auf dem Handy steht das Telefon zuerst) */
.kontakt-kopf{background:var(--papier);padding:clamp(48px,5vw,80px) 0 clamp(56px,5.6vw,88px)}
.kontakt-kopf .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
.kontakt-kopf h1{margin-bottom:16px;max-width:20ch}
.kontakt-kopf .einleitung{font-size:18.5px;color:var(--grau);max-width:44ch}
.kontakt-nummer{display:inline-flex;align-items:center;gap:12px;margin-top:28px;font-size:clamp(28px,3vw,38px);font-weight:600;
  color:var(--flaeche);text-decoration:none;letter-spacing:-.01em;line-height:1.1}
.kontakt-nummer .material-symbols-outlined{font-size:1em}
.kontakt-nummer:hover{color:var(--txt)}
.kontakt-zeiten{margin-top:8px;font-size:15.5px;color:var(--grau)}
.kontakt-kopf .ansprech{margin-top:26px;padding-top:22px;border-top:1px solid var(--bdr);max-width:440px}
.kontakt-wege{list-style:none;display:grid;gap:14px;margin-top:26px}
.kontakt-wege li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;font-size:16px;color:var(--grau);line-height:1.5}
.kontakt-wege .material-symbols-outlined{font-size:22px;color:var(--flaeche);margin-top:1px}
.kontakt-wege b{display:block;color:var(--txt);font-weight:600}
.kontakt-wege .li-text{display:block}
.kontakt-wege a{color:var(--flaeche);font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--petrol)}
.kontakt-kopf .karte-kontakt{border-color:transparent}
.vertrauen-schlank{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;margin-bottom:14px}
.vertrauen-schlank li{display:inline-flex;align-items:center;gap:7px;font-size:14.5px;font-weight:600;color:var(--txt)}
.vertrauen-schlank .material-symbols-outlined{font-size:19px;color:var(--flaeche)}
/* Oxygen legt um Listeninhalt ein Textelement; es darf das Raster der Listenpunkte nicht brechen. */
.variante li>.oxy-text,.checkliste li>.oxy-text,.seite li>.oxy-text,.kontakt-wege li>.oxy-text{min-width:0}
@media(max-width:980px){.kontakt-kopf .wrap{grid-template-columns:1fr}}

/* B13 Anfahrt und richtiger Ansprechpartner (Kontakt Nr. 5). Keine eingebettete Karte:
   ein Kartendienst lädt sonst ohne Einwilligung fremde Inhalte. Der Link öffnet die Route. */
.anfahrt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.5vw,20px)}
.ort-karte{background:#fff;border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.sektion:not(.papier) .ort-karte{background:var(--papier)}
.ort-bild{aspect-ratio:2.8/1;position:relative;overflow:hidden;background:var(--papier)}
.sektion:not(.papier) .ort-bild{background:#EFEAE3}
.ort-bild img{position:absolute;left:15%;bottom:0;width:70%;max-width:none;opacity:.6}
.ort-text{padding:clamp(22px,2.4vw,32px);display:flex;flex-direction:column;flex:1}
.ort-text .marke{align-self:flex-start}
.ort-text h3{margin:10px 0 8px}
.ort-text address{font-style:normal;font-size:16.5px;color:var(--txt);line-height:1.6}
.ort-text .zustaendig{margin-top:12px;font-size:15.5px;color:var(--grau)}
.ort-text .textlink{margin-top:18px;align-self:flex-start;font-size:15.5px}
@media(max-width:760px){.anfahrt{grid-template-columns:1fr}}

/* B14 Projektraster (Über uns Nr. 9, Leistungsseiten „Projekte", Modul M6 als Raster) */
.projektraster{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.5vw,20px)}
.p-karte{background:#fff;border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.sektion:not(.papier) .p-karte{background:var(--papier)}
.p-bild{aspect-ratio:4/3;overflow:hidden;background:var(--papier)}
.p-bild img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--kurve)}
.p-karte:hover .p-bild img{transform:scale(1.03)}
.p-text{padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;flex:1}
.p-meta{display:flex;gap:6px 14px;flex-wrap:wrap;font-size:14px;color:var(--grau);margin-bottom:10px}
.p-meta span{display:inline-flex;align-items:center;gap:5px}
.p-meta .material-symbols-outlined{font-size:16px;color:var(--flaeche)}
.p-text h3{margin-bottom:12px}
.p-schritte{display:grid;gap:8px;margin-bottom:16px}
.p-schritte dt{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--flaeche)}
.p-schritte dd{font-size:15.5px;color:var(--grau);line-height:1.5;margin-top:-4px}
.p-karte .fakten{margin-top:auto}
@media(max-width:1000px){.projektraster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.projektraster{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.p-karte:hover .p-bild img{transform:none}}

/* B15 Projektfall: ein Fall ausführlich (Ortsseiten „Ein echtes Projekt", Dachsanierung „Beratung") */
.projektfall{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,3.6vw,60px);align-items:center}
.projektfall-bild{position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden}
.projektfall-bild img{width:100%;height:100%;object-fit:cover}
.projektfall-text h2{margin-bottom:14px}
.projektfall-text .p-meta{margin-bottom:14px}
.fall-schritte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:22px 0 20px;padding-top:20px;border-top:1px solid var(--bdr)}
.fall-schritte dt{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--flaeche);margin-bottom:6px}
.fall-schritte dd{font-size:15.5px;color:var(--grau);line-height:1.55}
.projektfall .textlink{margin-top:20px}
@media(max-width:980px){.projektfall{grid-template-columns:1fr}}
@media(max-width:640px){.fall-schritte{grid-template-columns:1fr}}

/* B16 Aufbau erklärt: Zeichnung mit nummerierter Legende (Holzrahmenbau für Laien, Altbau Nr. 8) */
.aufbau{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,3.6vw,60px);align-items:center}
.aufbau-bild{position:relative}
.aufbau-bild img{width:118%;max-width:none;margin-left:-9%;opacity:.75}
.legende{list-style:none;display:grid;gap:18px;counter-reset:legende}
.legende li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px;align-items:start;counter-increment:legende}
.legende li::before{content:counter(legende);width:36px;height:36px;border-radius:50%;border:1.5px solid var(--petrol);
  color:var(--flaeche);font-size:15px;font-weight:600;display:grid;place-items:center}
.legende b{display:block;font-size:17px;font-weight:600;margin-bottom:2px;padding-top:5px}
.legende span.txt{display:block;font-size:15.5px;color:var(--grau);line-height:1.55}
@media(max-width:880px){.aufbau{grid-template-columns:1fr}.aufbau-bild img{width:100%;margin:0}}

/* B17 Rechtstext (Impressum, Datenschutz): Titel und Text, ohne Bild (Styleguide) */
.rechtstext{max-width:780px}
.rechtstext h2{font-size:calc(clamp(24px,2.4vw,32px) * var(--tx-skala));margin:clamp(34px,3.4vw,46px) 0 12px}
.rechtstext h2:first-child{margin-top:0}
.rechtstext h3{margin:24px 0 8px}
.rechtstext p,.rechtstext li{font-size:16.5px;color:var(--grau);line-height:1.7}
.rechtstext p{margin-bottom:12px;max-width:none}
.rechtstext ul{list-style:none;margin:6px 0 16px}
.rechtstext ul li{position:relative;padding-left:26px;margin-bottom:6px}
.rechtstext ul li::before{content:"";position:absolute;left:2px;top:.78em;width:12px;height:1.5px;background:var(--petrol)}
.rechtstext a{color:var(--flaeche);text-decoration:underline;text-underline-offset:2px}
.rechtstext strong{color:var(--txt)}

/* Kompakte Vertrauensleiste der Leistungsseiten (Modul M1, vier Punkte und Weg zu Über uns) */
.vertrauen.kompakt .vertrauen-raster{grid-template-columns:repeat(4,minmax(0,1fr))}
.vertrauen.kompakt .wrap{padding-top:calc(clamp(30px,3vw,44px) * var(--dichte));padding-bottom:calc(clamp(30px,3vw,44px) * var(--dichte))}
.vertrauen-fuss{margin-top:clamp(22px,2.4vw,30px)}
@media(max-width:1000px){.vertrauen.kompakt .vertrauen-raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.vertrauen.kompakt .vertrauen-raster{grid-template-columns:1fr}}

/* ===== Interne Blockübersicht (nur Prüfseite, nie auf Kundenseiten) ======== */
.block-kennung{background:var(--tiefe);color:#DCE6E7;padding:18px 0;border-top:3px solid var(--petrol)}
.block-kennung .wrap{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px}
.block-nr{font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--petrol-hell)}
.block-name{font-size:18px;font-weight:600;color:#fff}
.block-info{font-size:14px;color:#9FB1B3;flex-basis:100%;max-width:none}
.block-uebersicht-kopf{background:var(--papier);padding:clamp(40px,4vw,64px) 0}
.block-uebersicht-kopf h1{margin-bottom:12px}
.block-uebersicht-kopf p{color:var(--grau);font-size:17px}
.block-sprung{list-style:none;columns:3 220px;column-gap:28px;margin-top:22px;font-size:15px}
.block-sprung li{break-inside:avoid;margin-bottom:6px}
.block-sprung a{color:var(--flaeche);text-decoration:none;font-weight:600}
.block-sprung a:hover{text-decoration:underline}

/* Oxygen zerlegt einen Listenpunkt mit Text und Link in zwei Elemente (Textblock plus Link).
   Inline gesetzt, damit Text und Link in einer Zeile weiterlaufen wie im Entwurf. */
.rechtstext li>.oxy-text,.fach-text li>.oxy-text,.antwort li>.oxy-text,.quellen li>.oxy-text{display:inline}