:root{--tanne:#1E3D2B;--tanne-tief:#152C1F;--papier:#FAF9F5;--messing:#D9A521;
--messing-ink:#886708;--ink:#20281E;--muted:#5C6A57;--linie:#B9C4AE;--karte:#FAFBF6;
--blume-rot:#F14A58;--blume-rosa:#F9C1BE;--blume-gelb:#E6CF3C;--blatt:#3A593C}
@font-face{font-family:'Archivo';src:url('fonts/Archivo.woff2') format('woff2-variations'),
url('fonts/Archivo.woff2') format('woff2');font-weight:100 900;font-stretch:62% 125%;font-display:swap}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Archivo',system-ui,'Segoe UI',Arial,sans-serif;background:var(--papier);
color:var(--ink);line-height:1.6;font-size:16.5px}
img,svg{display:block;max-width:100%}
a{color:var(--messing-ink)}
.wrap{max-width:1060px;margin:0 auto;padding:0 22px}
.skip{position:absolute;left:-9999px;top:0;background:var(--messing);color:var(--tanne-tief);
padding:10px 16px;font-weight:700;z-index:100}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:3px solid var(--messing);outline-offset:2px}
/* Kopf */
.top{background:var(--messing);border-bottom:3px solid var(--tanne);position:sticky;top:0;z-index:50}
.top .wrap{display:flex;align-items:center;gap:14px;min-height:70px;position:relative}
.marke{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0;overflow:hidden}
.marke .logo{height:46px;width:auto;flex:0 0 auto}
.fuss .marke .logo{height:86px}
.wordmark{font-weight:900;letter-spacing:.07em;font-variation-settings:'wdth' 118;
font-size:20px;color:var(--tanne-tief);line-height:1.1}
.wordmark small{display:block;font-size:9.5px;font-weight:600;letter-spacing:.32em;
color:var(--tanne);margin-top:2px}
.amp{color:var(--tanne)}
.nav-t{position:absolute;opacity:0;pointer-events:none}
.burger{display:none}
nav.haupt{margin-left:auto;display:flex;align-items:center;gap:16px;flex-wrap:nowrap}
nav.haupt a{color:var(--tanne-tief);text-decoration:none;font-weight:600;font-size:15.5px;padding:6px 0;
border-bottom:2px solid transparent;white-space:nowrap}
nav.haupt a:hover{color:var(--messing-ink)}
nav.haupt a.aktiv{color:var(--tanne-tief);border-bottom-color:var(--tanne)}
nav.haupt a.tel-cta{display:inline-flex;align-items:center;gap:10px;background:var(--tanne);
color:var(--papier)!important;font-weight:800;font-size:17px;line-height:1;
letter-spacing:.01em;padding:13px 22px;border-radius:999px;border-bottom:none!important;
white-space:nowrap;box-shadow:0 3px 0 var(--tanne-tief)}
.tel-cta svg{width:19px;height:19px;flex:0 0 auto}
.tel-cta:hover{background:var(--tanne-tief);box-shadow:0 2px 0 #0B1A11}
.tel-cta:active{transform:translateY(2px);box-shadow:none}
@media(max-width:1150px){
 .burger{display:flex;flex-direction:column;gap:5px;margin-left:auto;cursor:pointer;padding:10px;border:0;background:none;flex-shrink:0}
 .burger span{width:26px;height:3px;background:var(--tanne-tief);border-radius:2px}
 nav.haupt{display:none;position:absolute;left:0;right:0;top:70px;background:var(--messing);
 flex-direction:column;align-items:flex-start;gap:0;padding:8px 22px 20px;border-bottom:3px solid var(--tanne)}
 nav.haupt a{padding:12px 0;font-size:17px;width:100%;border-bottom:1px solid rgba(21,44,31,.15)}
 nav.haupt a.aktiv{border-bottom-color:var(--tanne)}
 nav.haupt a.tel-cta{margin-top:12px;width:100%;justify-content:center}
 .nav-t:checked ~ nav.haupt{display:flex}
}
/* Held */
.held{padding:56px 0 48px}
.held .wrap{display:grid;grid-template-columns:1.12fr .88fr;gap:10px 44px;
grid-template-areas:"text schild" "punkte schild";align-items:start}
.held-text{grid-area:text}
.held-schild{grid-area:schild;align-self:center}
.held-punkte{grid-area:punkte;list-style:none;margin-top:14px}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--messing-ink)}
h1{font-size:clamp(29px,4.6vw,47px);line-height:1.06;font-weight:900;
font-variation-settings:'wdth' 106;color:var(--tanne-tief);margin:14px 0 18px}
h1 .z2{color:var(--messing-ink)}
.sub{font-size:18px;max-width:56ch}
.held-punkte li{display:flex;gap:10px;align-items:baseline;padding:5px 0;font-weight:600;font-size:15.5px}
.held-punkte li::before{content:"";width:9px;height:9px;background:var(--messing);
transform:rotate(45deg) translateY(1px);flex:0 0 auto}
.kopfzeile{padding:52px 0 14px}
@media(max-width:880px){
 .held{padding:30px 0 36px}
 .held .wrap{grid-template-columns:1fr;grid-template-areas:"text" "schild" "punkte";gap:24px}
 .sub{font-size:17px}
}
/* Emailleschild */
.schild{background:var(--tanne);color:var(--papier);border-radius:12px;padding:30px 28px 26px;
box-shadow:inset 0 0 0 4px var(--tanne),inset 0 0 0 6px rgba(242,244,236,.85),
inset 0 0 0 11px var(--tanne),0 14px 40px rgba(21,44,31,.22)}
.schild .label{font-size:12.5px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
color:var(--messing);text-align:center}
.schritte{margin:18px 0 0;display:flex;flex-direction:column;gap:12px}
.schritt{display:flex;gap:12px;align-items:baseline;font-size:16px}
.nr{flex:0 0 auto;width:23px;height:23px;border-radius:50%;background:var(--messing);
color:var(--tanne-tief);font-size:13px;font-weight:800;display:flex;align-items:center;
justify-content:center;transform:translateY(3px)}
.schild .nummer{margin-top:20px;padding-top:18px;border-top:1px solid rgba(242,244,236,.3);text-align:center}
.schild .nummer .klein{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#CBDCC6;font-weight:600}
.schild .nummer .gross{font-size:clamp(22px,3vw,30px);font-weight:900;letter-spacing:.03em;margin-top:4px}
.schild .nummer .gross a{color:var(--papier);text-decoration:none}
.schild a.mail{color:#CBDCC6}
.knoepfe{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.btn{display:inline-block;text-decoration:none;font-weight:800;padding:13px 20px;border-radius:6px;font-size:15.5px}
.btn-wa{background:var(--messing);color:var(--tanne-tief)}
.btn-wa:hover{background:#E7B637}
.btn-tel{border:2px solid rgba(242,244,236,.7);color:var(--papier)}
.btn-tel:hover{border-color:var(--papier)}
.mikro{font-size:13px;color:#CBDCC6;text-align:center;margin-top:12px}
.ph{color:#F3C64B;border-bottom:2px dashed #F3C64B;white-space:nowrap}
/* Klebeleiste (nur mobil) */
.klebeleiste{display:none}
@media(max-width:740px){
 .klebeleiste{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
 background:var(--tanne-tief);padding:10px 12px calc(10px + env(safe-area-inset-bottom));gap:10px;
 box-shadow:0 -6px 18px rgba(21,44,31,.35)}
 .klebeleiste .btn{flex:1;text-align:center;padding:13px 8px;font-size:15px}
 body.mit-leiste{padding-bottom:82px}
}
/* Abschnitte */
section{padding:54px 0}
h2{font-size:clamp(23px,3vw,31px);font-weight:900;font-variation-settings:'wdth' 108;
color:var(--tanne-tief);margin-bottom:12px}
h2::after{content:"";display:block;width:44px;height:9px;margin-top:10px;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 9'%3E%3Cpath d='M0 9 L5.5 0 L11 9 L16.5 0 L22 9 L27.5 0 L33 9 L38.5 0 L44 9' fill='none' stroke='%23D9A521' stroke-width='2.6'/%3E%3C/svg%3E") no-repeat;
background-size:44px 9px}
.recht h2::after,.cta-final h2::after{margin-left:auto;margin-right:auto}
.recht h2::after{display:none}
.cta-final h2::after{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 9'%3E%3Cpath d='M0 9 L5.5 0 L11 9 L16.5 0 L22 9 L27.5 0 L33 9 L38.5 0 L44 9' fill='none' stroke='%23D9A521' stroke-width='2.6'/%3E%3C/svg%3E") no-repeat;background-size:44px 9px}
.vorspann{color:var(--muted);max-width:64ch;margin-bottom:26px;font-size:17px}
.txt{max-width:66ch;margin:4px 0 14px}
svg.hecke{margin-bottom:-1px}
.band-gruen{background:var(--karte);color:var(--ink);padding:52px 0;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.band-gruen h2{color:var(--tanne-tief)}
.band-gruen .txt{color:var(--muted)}
.warum{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:16px 28px;margin-top:6px}
.warum div{display:flex;gap:10px;align-items:baseline;font-weight:700;font-size:16px}
.warum div::before{content:"";width:9px;height:9px;background:var(--messing);
transform:rotate(45deg) translateY(1px);flex:0 0 auto}
.band-messing{background:var(--messing);color:var(--tanne-tief);padding:24px 0;font-weight:700;font-size:17px}
.band-messing b{font-weight:900}
.band-messing a{color:var(--tanne-tief);font-weight:900;white-space:nowrap}
.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.karte{background:var(--karte);border:1px solid var(--linie);border-radius:10px;
padding:26px 24px;display:flex;flex-direction:column;gap:10px}
.karte h3{font-size:20px;font-weight:800;color:var(--tanne)}
.karte p{font-size:15.5px;color:var(--muted);flex:1}
.karte .ab{font-weight:800;font-size:15.5px}
.karte a.mehr{font-weight:800;text-decoration:none}
.karte a.mehr:hover{text-decoration:underline}
.karte-breit{grid-column:1/-1;background:var(--tanne);border-color:var(--tanne)}
.karte-breit h3,.karte-breit .ab{color:var(--papier)}
.karte-breit p{color:#CBDCC6}
.karte-breit a.mehr{color:var(--messing)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 4px}
.chip{border:2px solid var(--messing);color:var(--messing-ink);font-weight:700;font-size:14.5px;
padding:5px 13px;border-radius:999px}
.preisliste{margin-top:8px;max-width:780px}
.zeile{display:flex;align-items:baseline;padding:12px 0;font-size:16.5px}
.zeile .was b{font-weight:700}
.zeile .was small{display:block;font-size:14px;color:var(--muted);margin-top:2px}
.zeile .dots{flex:1 0 30px;border-bottom:2px dotted var(--linie);margin:0 12px;transform:translateY(-5px)}
.zeile .preis{font-weight:800;white-space:nowrap}
.hinweis{font-size:14.5px;color:var(--muted);max-width:66ch;margin-top:10px}
.faq{max-width:780px;margin-top:6px}
.faq details{border-top:1px solid var(--linie)}
.faq details:last-child{border-bottom:1px solid var(--linie)}
.faq summary{cursor:pointer;font-weight:700;padding:15px 0;font-size:16.5px;color:var(--tanne-tief)}
.faq summary::marker{color:var(--messing-ink)}
.faq p{padding:0 0 16px;color:var(--muted);max-width:66ch}
/* Foto-Rahmen mit Messing-Ecken */
.rahmen{position:relative;background:var(--karte);border:1px solid var(--linie);
border-radius:8px;padding:10px;margin:0}
.rahmen i{position:absolute;inset:-2px;pointer-events:none}
.rahmen::before,.rahmen::after,.rahmen i::before,.rahmen i::after{content:"";position:absolute;
width:18px;height:18px;border-color:var(--messing);border-style:solid;border-width:0}
.rahmen::before{top:-2px;left:-2px;border-top-width:3.5px;border-left-width:3.5px}
.rahmen::after{bottom:-2px;right:-2px;border-bottom-width:3.5px;border-right-width:3.5px}
.rahmen i::before{top:0;right:0;border-top-width:3.5px;border-right-width:3.5px}
.rahmen i::after{bottom:0;left:0;border-bottom-width:3.5px;border-left-width:3.5px}
.rahmen img{width:100%;border-radius:4px}
.rahmen figcaption{font-size:13.5px;color:var(--muted);padding:8px 4px 2px;text-align:center}
.zitate{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.zitat{background:var(--karte);border:1px solid var(--linie);border-radius:10px;padding:22px;font-size:15.5px}
.zitat b{display:block;margin-top:10px;color:var(--tanne);font-size:14px}
.cta-final{text-align:center;max-width:640px;margin:0 auto}
.cta-final .gross{font-size:clamp(24px,3.4vw,34px);font-weight:900;letter-spacing:.02em;margin:14px 0 4px}
.cta-final .gross a{color:var(--tanne-tief);text-decoration:none}
.cta-final .klein{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--messing-ink);font-weight:600}
.cta-final .btn-tel{border-color:var(--tanne);color:var(--tanne-tief)}
.cta-final .btn-tel:hover{border-color:var(--tanne-tief)}
/* Feinschliff */
::selection{background:var(--messing);color:var(--tanne-tief)}
[id]{scroll-margin-top:92px}
.tel-kompakt{display:none}
@media(max-width:1150px){
 .tel-kompakt{display:flex;align-items:center;justify-content:center;width:42px;height:42px;
 border-radius:50%;background:var(--tanne);margin-left:auto;flex:0 0 auto}
 .tel-kompakt svg{width:20px;height:20px}
 .burger{margin-left:0}
 .marke{gap:9px}
 .wordmark{font-size:19px}
 .wordmark small{display:none}
 .wordmark{white-space:nowrap}
}
@media(max-width:400px){
 .marke .logo{height:34px}
 .wordmark{font-size:18px}
}
/* Sehr schmale Handys: Marke bleibt einzeilig, Telefon-Knopf bleibt frei */
@media(max-width:380px){
 .top .wrap{gap:9px}
 .marke .logo{height:31px}
 .wordmark{font-size:16px}
 .tel-kompakt{width:38px;height:38px}
 .burger{padding:9px}
}
@media(max-width:340px){
 .wrap{padding:0 14px}
 .wordmark{font-size:15px;letter-spacing:.04em}
}
.btn-wa{box-shadow:0 3px 0 #A87D0F}
.btn-wa:active{transform:translateY(2px);box-shadow:0 1px 0 #A87D0F}
@media(hover:hover){.karte{transition:transform .15s ease}.karte:hover{transform:translateY(-3px)}}
.schild{position:relative}
.schrauben{position:absolute;inset:0;pointer-events:none}
.schrauben::before,.schrauben::after,.schild::before,.schild::after{content:"";position:absolute;
width:9px;height:9px;border-radius:50%;
background:radial-gradient(circle at 35% 35%,#FDFDF8,#C9CFC0 55%,#7E8A74);
box-shadow:inset 0 -1px 1px rgba(21,44,31,.55)}
.schild::before{top:9px;left:9px}
.schild::after{top:9px;right:9px}
.schrauben::before{bottom:9px;left:9px}
.schrauben::after{bottom:9px;right:9px}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--messing-ink);font-weight:900;font-size:22px;line-height:1;flex:0 0 auto}
.faq details[open] summary::after{content:"\2013"}
.wordmark small{white-space:nowrap;letter-spacing:.26em}
@media(max-width:480px){
 .zeile{flex-wrap:wrap}
 .zeile .dots{display:none}
 .zeile .preis{width:100%;margin-top:3px;color:var(--messing-ink)}
 .knoepfe .btn{width:100%;text-align:center}
}
footer{border-top:3px solid var(--messing)}
/* Recht */
.recht{max-width:800px;padding:52px 0 72px}
.recht h1{font-size:clamp(28px,3.6vw,40px);margin-bottom:16px}
.recht h2{font-size:20px;margin:30px 0 8px}
.recht p,.recht li{font-size:15.5px;margin-bottom:10px;max-width:72ch}
.recht ul{padding-left:22px}
.entwurf{background:#FFF6D9;border:1px solid #E3C558;border-radius:8px;padding:14px 16px;
font-size:14.5px;color:#5b4a10;margin:26px 0;max-width:72ch}
/* Fuss */
footer{background:var(--tanne-tief);color:#BCCDB7}
.fuss{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:32px;padding:46px 0 30px}
.fuss h4{color:var(--papier);font-size:14px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}
.fuss a{color:#BCCDB7;text-decoration:none;display:block;padding:4px 0;font-size:15px}
.fuss a:hover{color:var(--papier)}
.fuss p{font-size:15px;max-width:34ch}
.fuss .marke{margin-bottom:10px}
.fuss .wordmark{font-size:18px}
.fuss-unten{border-top:1px solid rgba(242,244,236,.15);padding:16px 0 24px;font-size:13.5px;
display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media(max-width:760px){.fuss{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
.kasten{background:var(--karte);border:2px solid var(--linie);border-radius:8px;padding:20px 22px;margin:18px 0}
.kasten h3{margin-top:14px}.kasten h3:first-child{margin-top:0}
.pruefen{background:#FCEFC7;color:#5A4300;padding:1px 6px;border-radius:3px;font-weight:600}
/* 10-Schritte-Hook = Haupt-Hero, 1:1 nach Flyer-Vorderseite */
.hook-held{background:var(--messing);padding:54px 0 0}
.hook-held .wrap{padding-bottom:30px}
.hook-held .kicker{font-size:clamp(15px,2vw,18px);font-weight:800;color:var(--papier);letter-spacing:.01em}
.hook-h1{font-size:clamp(40px,7.6vw,76px);line-height:.97;font-weight:900;
font-variation-settings:'wdth' 102;color:var(--papier);margin:12px 0 0;letter-spacing:-.015em}
.hook-h1 .z2{color:var(--tanne-tief)}
.hook-schritte{background:var(--papier);padding:36px 0 48px}
.hook-grid{display:grid;grid-template-columns:1fr 1.35fr;gap:20px}
.hook-karte{background:var(--karte);border:1px solid var(--linie);border-radius:10px;
padding:22px 22px 20px}
.hook-karte.du{background:var(--tanne);color:var(--papier);border-color:var(--tanne)}
.hook-nr{display:inline-block;font-weight:900;font-size:15px;letter-spacing:.04em;
background:var(--messing);color:var(--tanne-tief);border-radius:99px;padding:3px 13px;margin-bottom:12px}
.hook-karte b{display:block;font-size:clamp(19px,2.4vw,23px);line-height:1.2;margin-bottom:8px}
.hook-karte p{font-size:15.5px}
.hook-karte.du p{color:#D6E3D2}
.hook-liste{list-style:none;margin-top:12px;columns:2;column-gap:26px;font-size:15px}
.hook-liste li{padding:3px 0;break-inside:avoid;display:flex;gap:8px;align-items:baseline}
.hook-liste li::before{content:"";width:7px;height:7px;background:var(--messing);
transform:rotate(45deg);flex:0 0 auto}
/* Abschluss: grosse Telefonnummer wie auf dem Flyer */
.hook-cta{margin-top:30px;display:flex;gap:22px 40px;flex-wrap:wrap;align-items:center;
justify-content:space-between}
.hook-ruf{font-size:clamp(15px,2.2vw,20px);font-weight:900;letter-spacing:.03em;
text-transform:uppercase;color:var(--messing-ink)}
.hook-tel{display:block;font-weight:900;font-size:clamp(32px,5.6vw,54px);line-height:1.04;
color:var(--tanne-tief);text-decoration:none;letter-spacing:.01em;margin-top:2px}
.hook-tel:hover{color:var(--tanne)}
.hook-knoepfe{display:flex;gap:12px;flex-wrap:wrap}
.hook-knoepfe .btn{padding:14px 22px;font-size:16px}
.btn-gruen{background:var(--tanne);color:var(--papier);box-shadow:0 3px 0 var(--tanne-tief)}
.btn-gruen:hover{background:var(--tanne-tief)}
.btn-gruen:active{transform:translateY(2px);box-shadow:0 1px 0 var(--tanne-tief)}
.hook-mikro{font-size:14.5px;color:var(--muted);margin-top:20px;max-width:72ch}
@media(max-width:820px){.hook-grid{grid-template-columns:1fr}.hook-liste{columns:1}
 .hook-cta{gap:20px}.hook-knoepfe .btn{flex:1 1 auto;text-align:center}}
/* Zweiter Block: das bisherige Held-Versprechen */
.held-solo{padding:46px 0 8px}
.held-solo .wrap{display:block}
.held-solo h2 .z2{color:var(--messing-ink)}
.held-solo h2{max-width:24ch}
/* Flyer-Signatur: Blumenband + Blumen-Akzente */
.blumenband{height:62px;background:var(--messing) url('blumen-band.svg') repeat-x left bottom;
background-size:auto 100%}
.blume{width:32px;height:auto;flex:0 0 auto}
.eyebrow-row{display:flex;align-items:center;gap:10px}
.zeile .preis{color:var(--messing-ink)}
/* Kontrast auf hellem Schlussband (fruehere Grundfarbe war dunkelgruen) */
.cta-final .ph{color:var(--tanne-tief);border-bottom:none}
.cta-final .mikro{color:var(--muted)}
@media(max-width:600px){.blumenband{height:46px}}
/* Marke im dunklen Fuss: der Kopf ist gold, der Fuss bleibt tannengruen */
.fuss .wordmark{color:var(--papier)}
.fuss .wordmark small{color:#9FB89B}
.fuss .amp{color:var(--messing)}
/* Vertrauensband: heller Goldschleier statt Dunkelgruen */
.band-gruen{background:#F7EBCE;border-top-color:#EBD9A8;border-bottom-color:#EBD9A8}
.band-gruen .warum div::before{background:var(--tanne)}
.band-gruen .txt{color:rgba(21,44,31,.78)}
/* Schlussband: volles Gold wie der Flyer-Kopf */
.band-abschluss{background:var(--messing);border-top-color:var(--messing);
border-bottom-color:var(--messing)}
.band-abschluss .txt{color:rgba(21,44,31,.82)}
.band-abschluss .klein{color:var(--tanne-tief)}
.band-abschluss .mikro{color:rgba(21,44,31,.72)}
.band-abschluss .btn-wa{background:var(--tanne);color:var(--papier);box-shadow:0 3px 0 var(--tanne-tief)}
.band-abschluss .btn-wa:hover{background:var(--tanne-tief)}
.band-abschluss .btn-wa:active{box-shadow:0 1px 0 var(--tanne-tief)}
/* Preise tragen die Signalfarbe */
.karte .ab{color:var(--messing-ink)}
/* Die Nummer ist echt - der gestrichelte Platzhalter-Strich entfaellt */
.ph{border-bottom:none}
/* Kopfzeile: Untertitel verdichten, damit er neben dem grossen Ruf-Knopf
   vollstaendig passt statt abgeschnitten zu werden (.wrap ist auf 1060px gedeckelt) */
.top .wordmark small{font-size:9px;letter-spacing:.13em}
/* ============================================================
   Ab hier: Bausteine der Leistungs- und Ortsteilseiten (SEO-Ausbau)
   ============================================================ */
/* Brotkrumen-Navigation */
.brotkrume{padding:14px 0 0;font-size:14px;color:var(--muted)}
.brotkrume ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.brotkrume li{display:flex;gap:6px;align-items:center}
.brotkrume li+li::before{content:"›";color:var(--linie);font-weight:700}
.brotkrume a{color:var(--muted);text-decoration:none}
.brotkrume a:hover{color:var(--messing-ink);text-decoration:underline}
.brotkrume [aria-current]{color:var(--tanne-tief);font-weight:700}
/* Kopf einer Leistungsseite */
.leist-kopf{padding:26px 0 40px}
.leist-kopf .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:start}
.leist-kopf h1{margin:10px 0 14px}
.leist-kopf .sub{font-size:18px;max-width:54ch}
.leist-punkte{list-style:none;margin-top:18px}
.leist-punkte li{display:flex;gap:10px;align-items:baseline;padding:5px 0;font-weight:600;font-size:15.5px}
.leist-punkte li::before{content:"";width:9px;height:9px;background:var(--messing);
transform:rotate(45deg) translateY(1px);flex:0 0 auto}
@media(max-width:880px){.leist-kopf .wrap{grid-template-columns:1fr;gap:26px}
 .leist-kopf{padding:18px 0 30px}.leist-kopf .sub{font-size:17px}}
/* Preis-Anker im Kopf */
.anker{display:inline-flex;flex-direction:column;gap:2px;background:var(--karte);
border:2px solid var(--messing);border-radius:10px;padding:12px 18px;margin-top:20px}
.anker .von{font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--messing-ink)}
.anker .wert{font-size:clamp(21px,2.6vw,27px);font-weight:900;color:var(--tanne-tief);line-height:1.15}
.anker .zusatz{font-size:13.5px;color:var(--muted)}
/* Leistungsumfang als Haken-Raster */
.umfang{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:12px 28px;margin-top:8px}
.umfang li{list-style:none;display:flex;gap:11px;align-items:baseline;font-size:16px;padding:4px 0}
.umfang li::before{content:"✓";color:var(--messing-ink);font-weight:900;flex:0 0 auto;font-size:15px}
.umfang li b{font-weight:700}
/* Wissensblock (Fristen, Technik, Recht) */
.wissen{background:var(--karte);border:1px solid var(--linie);border-left:5px solid var(--messing);
border-radius:8px;padding:20px 22px;margin:20px 0;max-width:70ch}
.wissen h3{font-size:18px;font-weight:800;color:var(--tanne);margin-bottom:8px}
.wissen p{font-size:15.5px;color:var(--muted);margin-bottom:8px}
.wissen p:last-child{margin-bottom:0}
.wissen strong{color:var(--ink)}
/* Querverweise auf weitere Leistungen */
.quer{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px;margin-top:6px}
.quer a{display:flex;flex-direction:column;gap:5px;background:var(--karte);border:1px solid var(--linie);
border-radius:9px;padding:16px 18px;text-decoration:none;color:var(--ink)}
.quer a:hover{border-color:var(--messing);transform:translateY(-2px)}
@media(hover:hover){.quer a{transition:transform .15s ease,border-color .15s ease}}
.quer b{font-size:16.5px;font-weight:800;color:var(--tanne)}
.quer span{font-size:14.5px;color:var(--muted)}
.quer .pfeil{font-weight:800;color:var(--messing-ink);font-size:14.5px}
/* Verlinkte Gebiets-Chips */
a.chip{text-decoration:none;display:inline-block}
a.chip:hover{background:var(--messing);color:var(--tanne-tief)}
/* Ortsteil-Seiten: Zahlenspiegel */
.fakten{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:14px;margin:18px 0 4px}
.fakt{background:var(--karte);border:1px solid var(--linie);border-radius:9px;padding:15px 17px}
.fakt b{display:block;font-size:19px;font-weight:900;color:var(--tanne-tief);line-height:1.2}
.fakt span{font-size:14px;color:var(--muted)}
/* Fuss mit vier Spalten */
.fuss-4{grid-template-columns:1.25fr 1fr 1fr 1fr}
@media(max-width:960px){.fuss-4{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.fuss-4{grid-template-columns:1fr}}
/* Startseite: Unterzeile im Goldkopf + der Flyer-Haken als H2 */
.hook-unter{font-size:clamp(16px,2.1vw,19.5px);font-weight:600;color:var(--tanne-tief);
margin-top:16px;max-width:58ch;line-height:1.45}
.hook-h2{font-size:clamp(28px,4.6vw,44px);line-height:1.03;font-weight:900;
font-variation-settings:'wdth' 102;color:var(--tanne-tief);margin-bottom:24px;letter-spacing:-.01em}
.hook-h2::after{display:none}
/* Rechtliche Links in der Fusszeile bleiben in einer Zeile */
.fuss-unten a{color:#BCCDB7;text-decoration:none;display:inline}
.fuss-unten a:hover{color:var(--papier);text-decoration:underline}
/* ============================================================
   Einwilligungsbanner (Google Analytics, § 25 Abs. 1 TDDDG)
   ============================================================ */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:200;background:var(--tanne-tief);
color:var(--papier);border-top:3px solid var(--messing);
box-shadow:0 -10px 34px rgba(21,44,31,.45);
padding:22px 0 calc(22px + env(safe-area-inset-bottom))}
.consent[hidden]{display:none}
.consent-box{max-width:1060px;margin:0 auto;padding:0 22px;display:grid;
grid-template-columns:1fr auto;gap:18px 34px;align-items:center}
.consent h2{font-size:19px;font-weight:900;color:var(--papier);margin:0 0 7px}
.consent h2::after{display:none}
.consent p{font-size:14.5px;line-height:1.55;color:#CBDCC6;max-width:74ch}
.consent a{color:var(--messing);font-weight:700}
.consent-knoepfe{display:flex;gap:12px;flex-wrap:wrap}
/* Beide Schaltflaechen gleich gross und gleich kraeftig – Ablehnen darf nicht
   schwerer zu treffen sein als Akzeptieren. */
.consent .btn{border:0;cursor:pointer;font-family:inherit;font-weight:800;
font-size:15.5px;padding:14px 26px;border-radius:6px;white-space:nowrap;line-height:1.2}
.btn-ablehnen{background:#EDEFE6;color:var(--tanne-tief);box-shadow:0 3px 0 #A9B3A2}
.btn-ablehnen:hover{background:#FAF9F5}
.btn-annehmen{background:var(--messing);color:var(--tanne-tief);box-shadow:0 3px 0 #A87D0F}
.btn-annehmen:hover{background:#E7B637}
.consent .btn:active{transform:translateY(2px);box-shadow:none}
/* Solange das Banner steht, weicht die mobile Anrufleiste – sonst stapeln sich zwei
   fixierte Leisten uebereinander. */
body.consent-offen .klebeleiste{display:none}
@media(max-width:820px){
 .consent-box{grid-template-columns:1fr}
 .consent-knoepfe .btn{flex:1 1 46%;text-align:center;padding:14px 12px}
}