/* Website-Demo Betongoldschmiede v2 · 28.10.2026
   Farben/Schriften: „Markenstil Betongoldschmiede“. Grammatik nach LEK-20261007 (Website-KI-Look):
   jeder Abschnitt eigene Form, echtes Material, keine Kicker über jeder Überschrift, keine Pill-Etiketten,
   keine 3er-Kartenraster, keine Häkchenlisten, kein Glow. Bewegung: eine Kurve, 0,6 s. */
@font-face{font-family:Anton;src:url(fonts/Anton-Regular.woff2) format("woff2");font-display:swap}
@font-face{font-family:Inter;src:url(fonts/Inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--teal:#0F2F39;--teal2:#1B4A58;--gold:#D4A144;--goldh:#F2B544;--creme:#F3EFE5;--papier:#FBF8F1;--tinte:#12282F;--grau:#5F6B70;--linie:#D9D1C0;--max:1200px;--kurve:cubic-bezier(.22,1,.36,1)}
body.verwaltung{--teal:#1F3B33;--teal2:#2E5246;--gold:#C9A66B;--goldh:#E0C08A;--creme:#F1F0EA;--papier:#FAFAF6;--tinte:#17231F}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,sans-serif;font-size:17.5px;line-height:1.62;color:var(--tinte);background:var(--creme);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
.demo{background:var(--tinte);color:#E9E3D3;font-size:12.5px;text-align:center;padding:7px 16px;letter-spacing:.2px}
.demo b{color:var(--goldh)}
/* Kopf */
header.top{position:sticky;top:0;z-index:30;background:rgba(243,239,229,.92);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--linie)}
.top .wrap{display:flex;align-items:center;gap:28px;height:76px}
.marke{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--teal)}
.marke img{width:40px;height:40px}
.marke span{font-family:Anton;font-size:21px;letter-spacing:.5px;text-transform:uppercase;line-height:1}
.marke small{display:block;font-family:Inter;font-size:12px;font-weight:600;letter-spacing:.2px;text-transform:none;color:var(--grau);margin-top:4px}
nav.haupt{margin-left:auto;display:flex;gap:2px;align-items:center}
nav.haupt a{text-decoration:none;font-size:15px;font-weight:600;padding:9px 12px;color:var(--tinte);position:relative}
nav.haupt a:not(.knopf):after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--kurve)}
nav.haupt a:hover:after,nav.haupt a.aktiv:after{transform:scaleX(1)}
.menue-knopf{display:none;margin-left:auto;background:none;border:1.5px solid var(--teal);border-radius:10px;padding:8px 13px;font:inherit;font-weight:700;color:var(--teal)}
.knopf{display:inline-flex;align-items:center;gap:10px;background:var(--teal);color:var(--creme);font-weight:700;text-decoration:none;padding:14px 22px;border-radius:12px;border:0;font-size:15.5px;cursor:pointer;transition:transform .5s var(--kurve),background .3s;font-family:inherit}
.knopf:hover{transform:translateY(-2px);background:var(--teal2)}
.knopf.gold{background:var(--gold);color:var(--teal);box-shadow:0 10px 24px -14px rgba(15,47,57,.7)}
.knopf.gold:hover{background:var(--goldh)}
.knopf.linie{background:transparent;color:var(--teal);border:1.5px solid rgba(15,47,57,.35)}
.auf-dunkel .knopf.linie{color:var(--creme);border-color:rgba(243,239,229,.45)}
nav.haupt .knopf{padding:10px 16px;font-size:14.5px;margin-left:10px}
.textlink{font-weight:700;text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:1px}
.unternav{background:var(--teal);color:var(--creme)}
.unternav .wrap{display:flex;gap:4px;align-items:center;height:48px;overflow-x:auto;scrollbar-width:none}
.unternav b{font-family:Anton;font-weight:400;letter-spacing:.6px;margin-right:18px;white-space:nowrap;color:var(--goldh);font-size:16px}
.unternav a{text-decoration:none;font-size:14px;font-weight:600;padding:6px 11px;border-radius:8px;white-space:nowrap;color:#C9D5D2;transition:color .3s}
.unternav a:hover{color:#fff}.unternav a.aktiv{color:#fff;background:rgba(255,255,255,.09)}
/* Typo */
h1,h2,h3{margin:0 0 .4em;line-height:1.14}
h1{font-family:Anton;font-weight:400;font-size:clamp(42px,5.8vw,80px);letter-spacing:.2px;color:var(--teal)}
h2{font-family:Anton;font-weight:400;font-size:clamp(32px,3.7vw,50px);letter-spacing:.2px;color:var(--teal)}
h3{font-size:21px;font-weight:800;letter-spacing:-.1px}
.box{background:var(--gold);color:var(--teal);padding:.02em .16em .04em;border-radius:8px;box-decoration-break:clone;-webkit-box-decoration-break:clone;line-height:1.3}
.auf-dunkel h1,.auf-dunkel h2,.auf-dunkel h3{color:var(--creme)}
.lead{font-size:20.5px;line-height:1.55;color:#2C434A;max-width:640px;margin:0}
.auf-dunkel .lead{color:#D2DCD9}
.ort{font-size:14.5px;font-weight:600;color:var(--grau);margin:0 0 18px}
.auf-dunkel .ort{color:#9FB3AF}
section{padding:110px 0}.eng{padding:72px 0}
.auf-dunkel{background:var(--teal);color:var(--creme)}
.hell{background:var(--papier)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.grid.oben{align-items:start}
.sw{max-width:780px}
.fn{font-size:13.5px;color:var(--grau);margin-top:22px}.auf-dunkel .fn{color:#8FA5A0}
sup.bw{color:#9A7420;font-weight:800;font-size:.72em;margin-left:2px}
.auf-dunkel sup.bw{color:var(--goldh)}
/* Startseite: Kopf mit Wegen */
.start{padding:56px 0 96px}
.start .grid{grid-template-columns:1.12fr .88fr;align-items:end}
.wege{margin-top:40px;border-top:1.5px solid var(--teal)}
.weg{display:grid;grid-template-columns:52px 1fr auto;gap:18px;align-items:center;padding:20px 4px;border-bottom:1px solid var(--linie);text-decoration:none;transition:background .5s var(--kurve),padding .5s var(--kurve)}
.weg b{font-family:Anton;font-weight:400;font-size:20px;color:var(--grau)}
.weg strong{display:block;font-family:Anton;font-weight:400;font-size:clamp(24px,2.4vw,31px);color:var(--teal);letter-spacing:.2px;line-height:1.15}
.weg span{display:block;color:#3C5359;font-size:15.5px;margin-top:3px}
.weg i{font-style:normal;font-size:26px;color:var(--teal);transition:transform .5s var(--kurve)}
.weg:hover{background:rgba(212,161,68,.12);padding-left:14px}.weg:hover i{transform:translateX(6px)}
.weg.leise strong{color:#5F7378}
.portrait{position:relative;margin:0}
.portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:6px;box-shadow:0 40px 70px -40px rgba(15,47,57,.75),0 12px 24px -16px rgba(15,47,57,.5)}
.portrait figcaption{position:absolute;left:-26px;bottom:34px;background:var(--papier);padding:14px 18px;border-radius:4px;box-shadow:0 18px 36px -20px rgba(15,47,57,.6);font-size:14px;line-height:1.4;max-width:250px}
.portrait figcaption b{display:block;font-size:16px}
/* Zahlenband */
.zahlen{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.zahl{border-top:2px solid rgba(243,239,229,.22);padding-top:22px}
.zahl b{display:block;font-family:Anton;font-weight:400;font-size:clamp(48px,5.4vw,74px);line-height:1;color:var(--goldh)}
.zahl span{display:block;margin-top:12px;color:#CBD7D3;font-weight:600}
/* Beleg (Papier) */
.beleg{background:var(--papier);color:var(--tinte);border-radius:4px;padding:30px 32px 26px;box-shadow:0 34px 60px -34px rgba(15,47,57,.7),0 10px 18px -12px rgba(15,47,57,.35);position:relative}
.beleg .kopfzeile{display:flex;justify-content:space-between;gap:16px;font-size:13px;font-weight:700;color:var(--grau);padding-bottom:12px;border-bottom:1.5px dashed #CFC5B1;margin-bottom:16px}
.beleg h3,.beleg h2{font-size:23px;margin-bottom:14px}
.beleg dl{display:grid;grid-template-columns:1fr auto;margin:0;font-size:16px}
.beleg dt,.beleg dd{padding:9px 0;border-bottom:1px solid #E6DECD;margin:0}
.beleg dd{text-align:right;font-weight:800;font-variant-numeric:tabular-nums;padding-left:16px}
.beleg .summe{font-family:Anton;font-size:30px;font-weight:400;color:var(--teal)}
.schraeg{transform:rotate(-1.2deg)}.schraeg2{transform:rotate(.9deg)}
.vn{display:grid;grid-template-columns:1fr 64px 1fr;align-items:center;gap:8px}
.vn .pfeil{font-family:Anton;font-size:44px;color:var(--gold);text-align:center}
.vn .nachher dd{color:#0E5A3A}
/* Formular-Papier im Kopf */
.anbieten-papier{max-width:470px;margin-left:auto}
.anbieten-papier .frage{font-family:Anton;font-weight:400;font-size:28px;color:var(--teal);line-height:1.15;margin:0 0 16px}
.wahl{display:grid;gap:10px}
.wahl a{display:flex;justify-content:space-between;align-items:center;padding:15px 16px;border:1.5px solid #D7CDB8;border-radius:10px;text-decoration:none;font-weight:700;background:#fff;transition:border-color .4s,transform .5s var(--kurve)}
.wahl a:hover{border-color:var(--gold);transform:translateX(4px)}
.wahl small{font-weight:500;color:var(--grau)}
/* Bild-Kopf */
.bildkopf{position:relative;min-height:600px;display:flex;align-items:center;color:var(--creme);padding:0;overflow:hidden}
.bildkopf>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.85)}
.bildkopf:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,47,57,.93) 0%,rgba(15,47,57,.72) 46%,rgba(15,47,57,.3) 100%)}
.bildkopf .wrap{position:relative;z-index:2;width:100%;padding-top:80px;padding-bottom:80px}
.bildkopf h1{color:var(--creme)}
.bn{position:relative}
.bildnachweis{position:absolute;right:10px;bottom:8px;z-index:3;font-size:11px;line-height:1.35;color:rgba(255,255,255,.92);background:rgba(10,32,40,.6);padding:2px 7px;border-radius:4px;max-width:calc(100% - 20px);text-align:right}
/* Zusagen */
.zusagen{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid rgba(243,239,229,.18)}
.zusage{padding:26px 26px 4px 0}
.zusage+.zusage{padding-left:26px;border-left:1px solid rgba(243,239,229,.14)}
.zusage b{display:block;font-size:18px;margin-bottom:6px;color:#fff}.zusage span{font-size:15px;color:#C4D1CD}
/* Steckbrief */
.steckbrief{background:var(--papier);border:1px solid var(--linie);border-radius:6px;padding:10px 30px;box-shadow:0 26px 50px -36px rgba(15,47,57,.55);margin:0}
.steckbrief div{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid #E6DECD}
.steckbrief div:last-child{border-bottom:0}
.steckbrief dt{font-weight:700;color:var(--grau);font-size:15px}.steckbrief dd{margin:0;font-weight:700;font-size:17.5px}
/* Zeitstrahl */
.strahl{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(var(--n,5),1fr);position:relative}
.strahl:before{content:"";position:absolute;left:0;right:0;top:19px;height:2px;background:var(--teal)}
.strahl li{position:relative;padding:0 22px 0 0}
.strahl li:before{content:attr(data-n);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--teal);color:var(--goldh);font-family:Anton;font-size:18px;position:relative;margin-bottom:18px;box-shadow:0 0 0 6px var(--creme)}
.hell .strahl li:before{box-shadow:0 0 0 6px var(--papier)}
.strahl.jahre li:before{width:auto;padding:0 14px;border-radius:20px}
.auf-dunkel .strahl:before{background:rgba(243,239,229,.35)}
.auf-dunkel .strahl li:before{background:var(--gold);color:var(--teal);box-shadow:0 0 0 6px var(--teal)}
.strahl b{display:block;font-size:17.5px;margin-bottom:4px}.strahl span{font-size:15.5px;color:#3C5359;display:block}
.auf-dunkel .strahl span{color:#C4D1CD}
/* Index-Liste (redaktionell) */
.index{border-top:1.5px solid var(--teal)}
.index a{display:grid;grid-template-columns:90px 1fr 1.1fr auto;gap:24px;align-items:center;padding:26px 6px;border-bottom:1px solid var(--linie);text-decoration:none;transition:background .5s var(--kurve)}
.index a:hover{background:rgba(212,161,68,.1)}
.index .nr{font-family:Anton;font-size:22px;color:var(--grau)}
.index strong{font-family:Anton;font-weight:400;font-size:28px;color:var(--teal);letter-spacing:.2px}
.index em{font-style:normal;color:#3C5359}
.index i{font-style:normal;font-size:24px;color:var(--teal);transition:transform .5s var(--kurve)}
.index a:hover i{transform:translateX(6px)}
.index .extern strong:after{content:" ↗";font-family:Inter;font-size:20px;color:var(--grau)}
/* Übersicht mit Status */
.liste{border-top:1.5px solid var(--teal)}
.zeile{display:grid;grid-template-columns:1.1fr 1.6fr 170px;gap:24px;padding:24px 0;border-bottom:1px solid var(--linie);align-items:baseline}
.zeile h3{margin:0;font-size:21px}.zeile p{margin:0;color:#3C5359}
.zeile .status{font-size:14px;font-weight:700;color:var(--grau);text-align:right}
.zeile .status.ja{color:#0E5A3A}
.zeile a{font-weight:700}
/* Reels */
.reels{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,240px));gap:30px}
.reel{border-radius:22px;overflow:hidden;background:#0B2129;aspect-ratio:9/16;box-shadow:0 0 0 7px #0B1A20,0 30px 50px -28px rgba(0,0,0,.7)}
.reel video{width:100%;height:100%;object-fit:cover;display:block}
.reel-titel{font-weight:700;font-size:15px;margin-top:18px}
/* Zitat */
.zitat{font-size:clamp(25px,2.7vw,36px);font-weight:700;line-height:1.36;margin:0;max-width:820px}
.zitat:before{content:"„";display:block;font-family:Anton;font-size:96px;line-height:.55;color:var(--gold);margin-bottom:12px}
.zitat-wer{margin-top:22px;font-weight:700;font-size:15px;color:var(--goldh)}
/* Abschluss-Band */
.abschluss{background:var(--teal);color:var(--creme);padding:96px 0}
.abschluss .grid{grid-template-columns:1.4fr .6fr}
.abschluss h2{color:var(--creme)}.abschluss p{color:#C4D1CD;margin:0;font-size:18.5px}
.abschluss .knoepfe{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
/* Artikel */
.artikel{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:72px}
.artikel .text{max-width:720px}
.artikel .text h2{font-size:34px;margin-top:1.5em}
.artikel .text p,.artikel .text li{font-size:18.5px;color:#22383E}
.artikel .text ol,.artikel .text ul{padding-left:22px}.artikel .text li{margin:.4em 0}
.hinweis{border-left:3px solid var(--gold);padding:4px 0 4px 18px;font-size:15px;color:#3A5057;margin:30px 0}
.auf-dunkel .hinweis{color:#C4D1CD}
.quelle{font-size:13.5px;color:var(--grau)}
.seite{position:sticky;top:120px;display:flex;flex-direction:column;gap:22px}
.person{display:flex;gap:16px;align-items:center}
.person img{width:66px;height:66px;border-radius:50%;object-fit:cover;object-position:50% 16%}
.kasten{background:var(--papier);border:1px solid var(--linie);border-radius:6px;padding:24px}
.kasten p{margin:.5em 0 0;color:#3A5057;font-size:15.5px}
.brot{font-size:14px;color:var(--grau);margin-bottom:22px}.brot a{text-decoration:none}.brot a:hover{text-decoration:underline}
.rechnung{background:var(--papier);border:1px solid var(--linie);border-radius:6px;padding:20px 24px;font-size:17px;margin:24px 0}
.rechnung .ergebnis{display:inline-block;background:var(--gold);color:var(--teal);font-family:Anton;font-size:28px;padding:2px 12px;border-radius:8px;margin-top:8px}
/* FAQ */
.faq details{border-bottom:1px solid var(--linie);padding:20px 0}
.faq summary{cursor:pointer;font-weight:700;font-size:19px;list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";font-family:Anton;font-size:26px;color:var(--teal2);transition:transform .5s var(--kurve)}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq details p{margin:.7em 0 0;color:#3A5057}
/* Formulare */
form.papier{background:var(--papier);border:1px solid var(--linie);border-radius:6px;padding:36px;box-shadow:0 30px 60px -40px rgba(15,47,57,.6)}
.fortschritt{display:flex;gap:8px;margin-bottom:26px}.fortschritt span{flex:1;height:5px;border-radius:4px;background:#E4DCCB;transition:background .5s}.fortschritt span.an{background:var(--gold)}
.schrittbox{display:none}.schrittbox.an{display:block;animation:rein .6s var(--kurve)}
@keyframes rein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.schrittbox h3,.schrittbox h2{font-family:Anton;font-weight:400;font-size:29px;color:var(--teal)}
.feld{margin:16px 0}.feld label{display:block;font-weight:700;font-size:14.5px;margin-bottom:6px}
.feld input,.feld select,.feld textarea{width:100%;font:inherit;padding:13px 14px;border:1.5px solid #D2C8B4;border-radius:10px;background:#fff;transition:border-color .3s}
.feld input:focus,.feld select:focus,.feld textarea:focus{border-color:var(--teal2);box-shadow:0 0 0 3px rgba(27,74,88,.18)}
.feld input:focus-visible,.feld select:focus-visible,.feld textarea:focus-visible{outline:3px solid var(--teal2);outline-offset:2px}
.feld2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rollen{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.rollen label{border:1.5px solid #D2C8B4;border-radius:10px;padding:16px;cursor:pointer;font-weight:700;display:flex;gap:8px;align-items:center;background:#fff;transition:border-color .3s}
.rollen label:has(input:checked){border-color:var(--gold);background:#FBF1DC}
.upload{border:2px dashed #CFC5B1;border-radius:10px;padding:26px;text-align:center;color:var(--grau);background:#fff}
form .nav{display:flex;justify-content:space-between;margin-top:26px}
.danke{display:none;padding:20px 0}.danke.an{display:block;animation:rein .6s var(--kurve)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:#3A5057;margin-top:14px}
/* Platzhalter */
.platzhalter{border:2px dashed #CFC5B1;border-radius:6px;display:grid;place-items:center;min-height:220px;color:var(--grau);text-align:center;padding:24px;font-weight:600}
/* Fuß */
footer{background:#0A2028;color:#B3C2BE;padding:72px 0 36px;font-size:14.5px}
footer .spalten{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
footer h4,footer .h4{color:var(--creme);font-size:14px;margin:0 0 14px;font-weight:700}
footer a{text-decoration:none;display:block;padding:3px 0;opacity:.85}footer a:hover{opacity:1;text-decoration:underline}
footer .unten{border-top:1px solid rgba(255,255,255,.1);margin-top:44px;padding-top:22px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px}
.anbieter{font-size:12.5px;color:#879B96;margin-top:14px}
/* Bewegung: eine Kurve, nur Einblenden beim Scrollen */
html.js [data-r]{transition:opacity .7s var(--kurve),transform .7s var(--kurve)}
html.js [data-r]:not(.da){opacity:0;transform:translateY(18px)}
[data-r].da{opacity:1;transform:none}
.schraeg[data-r].da{transform:rotate(-1.2deg)}.schraeg2[data-r].da{transform:rotate(.9deg)}
@media (prefers-reduced-motion:reduce){html.js [data-r],html.js [data-r]:not(.da){opacity:1;transform:none;transition:none}}
@media (max-width:980px){
 nav.haupt{display:none;position:absolute;top:76px;left:0;right:0;background:var(--creme);flex-direction:column;align-items:stretch;padding:12px 24px 22px;border-bottom:1px solid var(--linie)}
 nav.haupt.offen{display:flex}.menue-knopf{display:block}
 .grid,.start .grid,.abschluss .grid,.artikel,.vn{grid-template-columns:1fr}
 .vn .pfeil{transform:rotate(90deg)}
 .zusagen{grid-template-columns:1fr 1fr}.zusage:nth-child(3){padding-left:0;border-left:0}
 .strahl{grid-template-columns:1fr;gap:26px}.strahl:before{left:19px;right:auto;width:2px;height:auto;top:0;bottom:0}
 .strahl li{padding-left:62px}.strahl li:before{position:absolute;left:0;top:0}
 .strahl.jahre li{padding-left:92px}
 .index a{grid-template-columns:56px 1fr auto}.index em{grid-column:2}
 .seite{position:static}.anbieten-papier{margin:0}
 footer .spalten{grid-template-columns:1fr 1fr}
 .portrait figcaption{left:12px}
}
@media (max-width:620px){
 body{font-size:16.5px}.wrap{padding:0 20px}section{padding:72px 0}
 .zahlen,.zusagen,.feld2,.rollen{grid-template-columns:1fr}
 .zusage+.zusage{padding-left:0;border-left:0;border-top:1px solid rgba(243,239,229,.14)}
 .reels{grid-template-columns:repeat(2,1fr);gap:18px}
 .zeile{grid-template-columns:1fr;gap:6px}.zeile .status{text-align:left}
 .steckbrief div{grid-template-columns:1fr;gap:2px}
 .beleg,form.papier{padding:24px 20px}
 .bildkopf{min-height:auto}
 .marke small{display:none}
 footer .spalten{grid-template-columns:1fr}
 .schraeg,.schraeg2,.schraeg[data-r].da,.schraeg2[data-r].da{transform:none}
}
/* Startseite: ruhigere Überschrift, Bildband mit echtem Haus */
.start h1{font-size:clamp(40px,4.7vw,68px)}
.bildband{position:relative;height:clamp(320px,42vw,520px);padding:0;display:flex;align-items:flex-end;overflow:hidden;color:#fff}
.bildband>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.bildband:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,47,57,0) 45%,rgba(15,47,57,.78) 100%)}
.bildband .wrap{position:relative;z-index:2;width:100%;padding-bottom:34px}
.bildband p{margin:0;font-family:Anton;font-size:clamp(24px,2.6vw,36px);line-height:1.2;max-width:760px;letter-spacing:.2px}
.bildband .bildnachweis{top:10px;bottom:auto}
/* v2.1 nach unabhängiger Design-Kritik 28.10.: Zurückhaltung statt Plakat */
.box{background:none;padding:0;color:var(--teal2);border-radius:0}
.auf-dunkel .box,.bildkopf .box{color:var(--goldh)}
h1{font-size:clamp(38px,4.4vw,62px);line-height:1.12}
.start h1{font-size:clamp(38px,4.4vw,62px)}
.artikel .text h2{font-family:Inter;font-weight:800;font-size:26px;letter-spacing:-.2px;margin-top:1.6em}
.schrittbox h3,.schrittbox h2,.anbieten-papier .frage{font-family:Inter;font-weight:800;font-size:22px;letter-spacing:-.1px}
form.papier h3{font-size:17.5px;font-weight:700;color:var(--tinte);letter-spacing:0}
.schraeg,.schraeg2,.schraeg[data-r].da,.schraeg2[data-r].da{transform:none}
.beleg{box-shadow:0 24px 44px -30px rgba(15,47,57,.55)}
.weg{grid-template-columns:1fr auto}.weg b{display:none}
.weg{transition:background .5s var(--kurve)}.weg:hover{padding-left:4px}.weg div{transition:transform .5s var(--kurve)}.weg:hover div{transform:translateX(8px)}
.index a{grid-template-columns:minmax(0,360px) 1fr auto}.index .nr{display:none}
.index .extern strong:after{content:""}
.start .grid{align-items:center}
.strahl.jahre li:before{width:max-content}
.reel{border-radius:10px;box-shadow:0 26px 44px -28px rgba(0,0,0,.6)}
.person .quelle{display:block;line-height:1.35}
/* Prüfhinweise (Quellen, Beispielwerte) nur auf Knopfdruck */
body:not(.notizen) .fn,body:not(.notizen) sup.bw{display:none}
.notiz-knopf{background:none;border:1px solid rgba(233,227,211,.4);color:#E9E3D3;font:inherit;font-size:12px;border-radius:6px;padding:2px 9px;cursor:pointer;margin-left:6px}
@media (max-width:980px){.index a{grid-template-columns:1fr auto;gap:4px 16px}.index strong,.index em{grid-column:1}.index i{grid-column:2;grid-row:1/3;align-self:center}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Neue Bereiche 28.10.: Objekte, Termin, Gutachten, Gruppe, Portfolio */
.filter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:30px}
.filter button{font:inherit;font-weight:600;font-size:14.5px;padding:9px 16px;border-radius:10px;border:1.5px solid var(--linie);background:var(--papier);cursor:pointer;color:var(--tinte)}
.filter button.an{background:var(--teal);color:var(--creme);border-color:var(--teal)}
.objekte{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:36px 28px}
.objekt{text-decoration:none;display:block}
.objekt .bn{border-radius:6px;overflow:hidden;aspect-ratio:4/3}.objekt .bn img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--kurve)}
.objekt:hover .bn img{transform:scale(1.03)}
.o-text{padding-top:16px}.o-art{font-size:14px;font-weight:600;color:var(--grau)}.o-text h3,.o-text h2{margin:4px 0 4px;font-family:Inter;font-size:21px;font-weight:800;letter-spacing:-.1px;color:var(--tinte)}.o-text p{margin:0 0 6px;color:#3C5359}.o-text b{font-size:18px}
.kalender{background:#fff;border:1px solid var(--linie);border-radius:6px;overflow:hidden}
.zahlung{display:flex;justify-content:space-between;padding:16px 18px;border:1.5px solid #D2C8B4;border-radius:10px;background:#fff;font-weight:600}
.index em .erl{display:block;font-size:13.5px;color:var(--grau);margin-top:4px}
.diagramm{width:100%;height:auto;display:block}
.legende{display:flex;gap:22px;flex-wrap:wrap;margin-top:12px;font-size:14.5px;font-weight:600}.legende i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:7px;vertical-align:-1px}
.reel.leer{display:grid;place-items:center;text-align:center;color:#9FB3AF;font-weight:700;background:#123642;border:1.5px dashed rgba(243,239,229,.25)}
input,select,textarea{accent-color:var(--teal)}
.knopf:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--teal2);outline-offset:3px}
.wrap.sw{max-width:var(--max)}.wrap.sw>*{max-width:780px}
.objekt[hidden]{display:none}.leer-hinweis{margin-top:10px;font-weight:600}
/* RND-Bestellstrecke */
fieldset.objekt-block{border:1.5px solid #D7CDB8;border-radius:10px;padding:18px 22px 6px;margin:0 0 22px;position:relative;background:#fff}
fieldset.objekt-block legend{font-weight:800;font-size:18px;padding:0 8px}
.weg-x{position:absolute;right:16px;top:-12px;background:var(--papier);border:1.5px solid #D7CDB8;border-radius:8px;font:inherit;font-size:13px;padding:3px 10px;cursor:pointer}
.janein{display:flex;gap:18px;padding:11px 0}.janein label{font-weight:600;display:flex;gap:6px;align-items:center;margin:0}
.modern{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.mod{display:grid;grid-template-columns:22px 1fr 96px;align-items:center;gap:8px;border:1.5px solid #E2D9C6;border-radius:9px;padding:6px 8px 6px 10px;font-weight:600;margin:0}
.mod input[type=number]{padding:7px 8px;border:1.5px solid #D2C8B4;border-radius:8px;font:inherit;width:100%}
.mod input[type=number]:disabled{background:#F4F0E7;border-color:#EAE3D3}
.mod:has(input[type=checkbox]:checked){border-color:var(--gold);background:#FBF3E2}
.falsch input,.falsch select,.falsch textarea{border-color:#B3261E!important;background:#FFF6F5}.feld.falsch>label,label.falsch{color:#B3261E}
@media (max-width:620px){.modern{grid-template-columns:1fr}}
.feld input[type=radio],.feld input[type=checkbox]{width:auto;padding:0;margin:0}
.feld .mod{display:grid;grid-template-columns:22px 1fr 96px;margin:0}
.feld .rollen label{justify-content:flex-start}
#rnd,#fertig{scroll-margin-top:110px}
/* Termin: Calendly erst nach Einwilligung (28.10.2026) */
.einwilligung{padding:36px;display:grid;gap:14px;align-content:start;min-height:420px}
.einwilligung h2{margin:0;font-size:30px}.einwilligung p{margin:0}.einwilligung .knopf{justify-self:start}
/* Formulare (28.10.2026): Spam-Falle unsichtbar, Fehler, Vorschau-Hinweis nur vor Livegang */
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fehler{color:#9B2C2C;font-weight:700}
.nur-vorschau{display:block;font-size:14px;color:var(--grau);border-top:1px dashed var(--linie);padding-top:10px;margin-top:14px}
.danke-box{background:var(--papier);border:1px solid var(--linie);border-radius:6px;padding:36px}
/* Handy: Ankauf-Leiste zeigt, dass sie seitlich weitergeht */
@media (max-width:900px){.unternav .wrap{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent);padding-right:40px}}
/* Hauptmenü mit 7 Punkten: unter 1180 px Breite Menü-Knopf statt Umbruch (28.10.2026) */
nav.haupt a{white-space:nowrap}
@media (max-width:1180px){
 nav.haupt{display:none;position:absolute;top:76px;left:0;right:0;background:var(--creme);flex-direction:column;align-items:stretch;padding:12px 24px 22px;border-bottom:1px solid var(--linie);z-index:50}
 nav.haupt.offen{display:flex}.menue-knopf{display:block}
 nav.haupt .knopf{margin:10px 0 0;justify-content:center}
}
/* Klickflächen am Handy: Häkchen-Zeilen mindestens 26 px hoch, Bildnachweise lesbar */
.check{min-height:26px}.check input{width:18px;height:18px;flex:0 0 auto;margin-top:1px}
.bildnachweis{font-size:12px}

.knopf-als-link{background:none;border:0;padding:0;font:inherit;cursor:pointer}

/* Exposé: Titel oben über beiden Spalten; am Handy Reihenfolge Bild → Eckdaten/Preis → Anfrage → Beschreibung → Energieausweis */
.ex-kopf{margin:6px 0 26px}.ex-kopf h1{margin:0}
@media (max-width:980px){.expose{display:flex;flex-direction:column}.expose .ex-links,.expose .ex-rechts{display:contents}
 .ex-bild{order:1}.ex-steck{order:2;margin-top:22px}.ex-aktion{order:3}.ex-text{order:4}.ex-energie{order:5}}
/* Formular wird gesendet (Seite.astro, bgsSenden): sichtbar gesperrt, Text „Wird gesendet …“ */
.knopf[aria-busy="true"]{opacity:.7;cursor:progress}

/* 31.10.2026: Vergleich mit renommierten Seiten (Zugänglichkeit, Kontaktwege, Druck, Stichtage) */
.skip{position:absolute;left:-999px;top:10px;z-index:100;background:var(--teal);color:var(--creme);padding:10px 16px;border-radius:8px;font-weight:700;text-decoration:none}
.skip:focus{left:10px}
:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--teal2);outline-offset:2px}
.auf-dunkel :focus-visible,.unternav :focus-visible,footer :focus-visible,.bildkopf :focus-visible,.reel :focus-visible,video:focus-visible{outline-color:var(--goldh)}
.menue-knopf[aria-expanded="true"]{background:var(--teal);color:var(--creme)}
nav.haupt .tel{font-weight:700;color:var(--teal);white-space:nowrap}
footer .kontaktzeile{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0 0 10px;font-size:15px}
footer .kontaktzeile a{color:var(--creme)}
footer .sozial{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0}
footer .sozial a{font-size:14.5px;font-weight:600;color:#C9D5D2}
footer .unten{flex-wrap:wrap;gap:8px 18px}
.stichtag{font-size:13.5px;color:#9FB3AF;margin:22px 0 0}
.hell .stichtag,section:not(.auf-dunkel) .stichtag{color:var(--grau)}
.byline{font-size:14px;color:var(--grau);margin:-6px 0 26px}
.byline b{color:var(--tinte);font-weight:600}
.faq h2{font-family:Inter;font-weight:800;font-size:22px;letter-spacing:-.1px;margin:44px 0 6px}
.faq h2:first-child{margin-top:0}
@media (max-width:980px){nav.haupt .tel{padding:9px 12px}}
@media print{header.top,footer,.unternav,.skip,video,.knopf,.menue-knopf,.reels,.bildband,.notiz-knopf,.bildkopf>img{display:none!important}.bildkopf,.bildkopf *{color:#000!important;background:#fff!important}[data-r]{opacity:1!important;transform:none!important}body{background:#fff;color:#000;font-size:12pt}section{padding:18pt 0}.auf-dunkel{background:#fff;color:#000}.auf-dunkel *,.stichtag,.quelle,.fn{color:#000!important}a{color:#000;text-decoration:none}main a[href^="http"]:after{content:" (" attr(href) ")";font-size:9pt;color:#555}}
.auf-dunkel .nur-vorschau,.auf-dunkel .quelle{color:#A9BCB8}
/* Überschriften-Reihenfolge: auf Formularseiten sind Kästen h2, sehen aber wie h3 aus */
.kasten h2,.danke h2,.danke-box h2,form.papier h2:not(.schrittbox h2),.person h2{font-family:Inter;font-size:21px;font-weight:800;letter-spacing:-.1px;color:var(--tinte);line-height:1.14}
.auf-dunkel .kasten h2{color:var(--creme)}

/* Kundenstimmen (src/lib/stimmen.mjs), 03.11.2026 */
.stimmen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.stimmen-block+.stimmen-block{margin-top:34px}
.stimmen-gruppe{font-size:15px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--grau);margin:0 0 14px}
.stimme{margin:0;background:var(--papier);border:1px solid var(--linie);border-radius:6px;padding:28px 28px 24px;display:flex;flex-direction:column;gap:18px}
.stimme blockquote{margin:0;font-size:16.5px;line-height:1.6;color:var(--tinte)}
.stimme blockquote:before{content:"\201C";display:block;font-family:Anton;font-size:64px;line-height:1;height:30px;overflow:hidden;color:var(--gold);margin-bottom:10px}
.stimme blockquote p{margin:0 0 .7em}.stimme blockquote p:last-child{margin-bottom:0}
.stimme figcaption{display:flex;gap:14px;align-items:center;border-top:1px solid var(--linie);padding-top:16px}
.stimme figcaption img{width:48px;height:48px;border-radius:50%;object-fit:cover;object-position:50% 20%}
.stimme-kreis{flex:0 0 48px;width:48px;height:48px;border-radius:50%;background:var(--teal);color:var(--creme);display:grid;place-items:center;font-weight:800;font-size:15px;letter-spacing:.04em}
.stimme figcaption b{display:block;font-size:16px}.stimme figcaption small{display:block;color:var(--grau);font-size:14px;line-height:1.35}
.stimmen-echtheit{margin-top:22px;max-width:820px;font-size:13.5px}
.hell .stimme{background:var(--creme)}
@media (max-width:760px){.stimmen{grid-template-columns:1fr;gap:16px}.stimme{padding:22px 20px 20px}}

/* Startseite „Was wir machen“: Nummern zählen automatisch (live fehlen Vorschau-Punkte, sonst Lücke 01, 03 …) */
.index.zaehlt{counter-reset:nr}.index.zaehlt a{counter-increment:nr}.index.zaehlt .nr:before{content:counter(nr,decimal-leading-zero)}

/* Hinweis auf Carstens Kanäle (seiten.mjs mitSozial) */
.sozial-zeile{grid-column:1/-1;margin:26px 0 0;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline;font-size:15.5px}.sozial-zeile span:first-child{color:var(--grau);font-weight:600}