:root{--weiss:#FBF8F2;--leinen:#F1EADD;--papier:#fff;--tinte:#1D2433;--grau:#555C6C;--faden:#C8B99F;--gruen:#0A8A0A;--blau:#1242B2;--orange:#F58A2E;--gelb:#E3B100;--h:'Fraunces',Georgia,serif;--t:'Figtree',system-ui,sans-serif;--sb:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--weiss);color:var(--tinte);font:400 17px/1.62 var(--t);overflow-x:hidden}
img,svg{max-width:100%;display:block}
h1,h2,h3{font-family:var(--h);font-weight:700;line-height:1.08;margin:0 0 16px;letter-spacing:-.01em}
h1{font-size:clamp(40px,11.4vw,78px)}h2{font-size:clamp(29px,4.4vw,48px)}h3{font-size:clamp(22px,2.2vw,26px);font-weight:600;line-height:1.2}
p{margin:0 0 16px}a{color:var(--blau)}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:var(--gelb);color:var(--tinte);padding:10px 14px;z-index:99}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}.schmal{max-width:820px}
.vor{display:inline-flex;align-items:center;gap:10px;font:700 14px var(--t);letter-spacing:.14em;text-transform:uppercase;color:var(--grau);margin-bottom:14px}
.vor i{display:flex;gap:4px}.vor i b{width:9px;height:9px;border-radius:50%}
.lead{font-size:clamp(18px,2vw,21px);max-width:58ch}
.kp{flex:none;transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
/* Knopfloch: der Knopf der Seite */
.kn{position:relative;display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:8px 26px 8px 10px;border-radius:999px;background:var(--tinte);color:#fff;font:700 17px var(--t);text-decoration:none;border:0;cursor:pointer;box-shadow:0 10px 24px rgba(29,36,51,.18)}
.kn:after{content:"";position:absolute;inset:5px;border-radius:999px;border:2px dashed rgba(255,255,255,.42);pointer-events:none}
.kn .kp{width:40px;height:40px;position:relative;z-index:1}.kn span{position:relative;z-index:1;line-height:1.2}
.kn small{display:block;font:500 14px var(--t);opacity:.86}
.kn:hover .kp,.kn:focus-visible .kp{transform:rotate(90deg)}
.kn.hell{background:var(--papier);color:var(--tinte);box-shadow:0 8px 20px rgba(29,36,51,.1)}.kn.hell:after{border-color:rgba(29,36,51,.3)}
.kn.gruen{background:var(--gruen)}
.knoepfe{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
/* Naht */
.naht{height:0;border-top:2px dashed var(--faden);margin:0 20px}
/* Kopf */
.kopf{position:sticky;top:0;z-index:40;background:rgba(251,248,242,.94);backdrop-filter:blur(8px);border-bottom:2px dashed var(--faden)}
.kopf .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px}
.marke img{height:50px;width:auto}
.nav{display:none;gap:30px;align-items:center}
.nav a{display:inline-flex;align-items:center;gap:9px;color:var(--tinte);text-decoration:none;font-weight:700;font-size:17px;padding:10px 0}
.nav a .kp{width:20px;height:20px}.nav a:hover .kp,.nav a.an .kp{transform:rotate(90deg) scale(1.15)}
.nav a.an{box-shadow:0 2px 0 var(--tinte)}
.kopf-tel{display:none}
.mk{display:inline-flex;align-items:center;gap:10px;background:none;border:0;padding:6px 2px 6px 6px;font:700 17px var(--t);color:var(--tinte);cursor:pointer;min-height:48px}
.mk .kp{width:40px;height:40px}.mk[aria-expanded=true] .kp{transform:rotate(180deg)}
/* Knopfleiste: Handymenü */
.leiste-menue{position:fixed;inset:74px 0 0 0;z-index:39;background:var(--leinen);padding:28px 20px 120px;overflow:auto}
.leiste-menue[hidden]{display:none}
.km{position:relative;max-width:440px;margin:0 auto;background:var(--papier);border-radius:18px;padding:12px 18px 12px 0;box-shadow:0 20px 40px rgba(29,36,51,.12)}
.km:before{content:"";position:absolute;left:46px;top:14px;bottom:14px;border-left:2px dashed var(--faden)}
.km a{position:relative;display:flex;align-items:center;gap:18px;padding:14px 0 14px 20px;color:var(--tinte);text-decoration:none;font:600 24px var(--h)}
.km a .kp{width:54px;height:54px}.km a.an{color:var(--blau)}
.km-fuss{max-width:440px;margin:22px auto 0}
/* Einstieg */
.held{position:relative;padding:38px 0 46px;overflow:hidden}
.held .wrap{display:grid;gap:30px;align-items:center}
.held h1 em{font-style:normal;color:var(--blau)}
.faden{width:min(100%,520px);height:34px;margin:2px 0 16px}
.faden path{fill:none;stroke:var(--orange);stroke-width:3;stroke-linecap:round;stroke-dasharray:900;stroke-dashoffset:900;transition:stroke-dashoffset 1.8s ease .25s}
.da .faden path,.faden.da path{stroke-dashoffset:0}
.sub{font-size:19px;max-width:44ch;margin-bottom:14px}
.status{display:inline-flex;align-items:center;gap:10px;font:700 15px var(--t);color:var(--gruen)}
.status:before{content:"";width:12px;height:12px;border-radius:50%;background:currentColor;box-shadow:0 0 0 5px rgba(10,138,10,.16)}
.status.zu{color:#B4470A}.status.zu:before{box-shadow:0 0 0 5px rgba(180,71,10,.14)}

.buehne{position:relative;background:var(--blau);border-radius:26px;padding:30px 22px 0;overflow:hidden;box-shadow:0 24px 50px rgba(18,66,178,.28)}
.buehne:after{content:"";position:absolute;inset:10px;border:2px dashed rgba(255,255,255,.45);border-radius:18px;pointer-events:none}
.hemd{display:block;width:min(100%,400px);margin:0 auto -34px;filter:drop-shadow(0 18px 22px rgba(0,0,0,.28))}
.hemd text{font:700 21px var(--t);fill:var(--tinte)}
.hemd a .kp{transform-origin:center;transform-box:fill-box;transition:transform .5s cubic-bezier(.3,1.4,.5,1)}.hemd a:hover .kp{transform:rotate(90deg)}
.reihe{display:flex;gap:12px;margin-top:26px;align-items:center}.reihe .kp{width:46px;height:46px}
.reihe:after{content:"";flex:1;border-top:2px dashed var(--faden)}
/* Abschnitte */
.ab{padding:64px 0}.ab.leinen{background:var(--leinen)}
.kz{max-width:760px;margin-bottom:38px}.kz p{font-size:19px;color:var(--grau)}
.vier{display:grid;gap:34px 22px;margin-top:20px}
.lk{position:relative;display:block;background:var(--papier);border-radius:16px;padding:48px 24px 24px;color:var(--tinte);text-decoration:none;border:2px dashed var(--f);box-shadow:0 14px 30px rgba(29,36,51,.07)}
.lk>.kp{position:absolute;top:-28px;left:22px;width:68px;height:68px;filter:drop-shadow(0 6px 8px rgba(29,36,51,.2))}
.lk:hover>.kp{transform:rotate(90deg)}
.lk p{color:var(--grau);margin:0 0 14px}.lk .ab-preis{display:block;font:700 16px var(--t);color:var(--tinte);margin-bottom:14px}
.lk .weiter{display:inline-block;font:700 16px var(--t);color:var(--tinte);border-bottom:2px dashed var(--f);padding-bottom:3px}
.zwei{display:grid;gap:32px;align-items:center}
.zitat{font:600 clamp(26px,3.6vw,40px)/1.2 var(--h);margin:0 0 14px}
.zitat-von{font:700 15px var(--t);letter-spacing:.1em;text-transform:uppercase;color:var(--grau)}
.fakten{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:40px}
.fk{background:var(--papier);border-radius:14px;padding:18px 16px;border-top:6px solid var(--f)}
.fk b{display:block;font:700 clamp(24px,3vw,34px)/1.1 var(--h);margin-bottom:6px}.fk span{font-size:16px;color:var(--grau);line-height:1.35;display:block}
.marken{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.marke-t{display:inline-flex;align-items:center;gap:9px;background:var(--papier);border:2px dashed var(--faden);border-radius:999px;padding:9px 16px 9px 10px;font-weight:700;font-size:16px}
.marke-t .kp{width:24px;height:24px}
/* Preisfrage */
.frage{background:var(--papier);border-radius:20px;padding:26px 22px;box-shadow:0 18px 40px rgba(29,36,51,.09);border:2px dashed var(--faden)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 20px}
.chip{font:700 16px var(--t);min-height:46px;padding:8px 18px;border-radius:999px;border:2px solid var(--tinte);background:none;color:var(--tinte);cursor:pointer}
.chip.an{background:var(--tinte);color:#fff}
.antwort{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;border-top:2px dashed var(--faden);padding-top:18px}
.antwort b{font:700 clamp(40px,7vw,64px)/1 var(--h);color:var(--blau)}.antwort span{font-size:17px;color:var(--grau)}
/* Preisliste */
.suche{display:flex;align-items:center;gap:12px;background:var(--papier);border:2px solid var(--tinte);border-radius:999px;padding:6px 20px 6px 8px;max-width:560px}
.suche .kp{width:44px;height:44px}
.suche input{flex:1;min-width:0;border:0;background:none;font:500 19px var(--t);color:var(--tinte);padding:12px 0;outline:0}
.suche:focus-within{box-shadow:0 0 0 4px rgba(18,66,178,.18)}
.treffer{font-weight:700;margin:16px 0 0;min-height:27px}
.liste{display:grid;gap:22px;margin-top:26px}
.gruppe{background:var(--papier);border-radius:16px;padding:22px 20px 12px;border-top:6px solid var(--f)}
.gruppe h3{margin-bottom:8px}
.zeile{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:11px 0;border-bottom:2px dashed var(--leinen);font-size:17px}
.zeile:last-child{border-bottom:0}.zeile b{white-space:nowrap;font-weight:700}
.zeile[hidden],.gruppe[hidden]{display:none}
/* Leistungen lang */
.ls{display:grid;gap:20px}
.lb{position:relative;background:var(--papier);border-radius:16px;padding:26px 22px 24px 22px;border-left:8px solid var(--f);scroll-margin-top:100px}
.lb .kp{width:58px;height:58px;margin-bottom:14px}.lb p{margin:0;font-size:18px}
/* Besuch */
.zeiten{background:var(--papier);border-radius:18px;padding:10px 20px;border:2px dashed var(--faden)}
.tag{display:flex;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:2px dashed var(--leinen);font-size:17px}
.tag:last-child{border-bottom:0}.tag b{font-weight:700}.tag span{text-align:right}
.tag.heute{color:var(--blau)}.tag b{white-space:nowrap}.tag.heute b:after{content:"heute";display:inline-block;vertical-align:2px;font:700 13px var(--t);letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--blau);border-radius:999px;padding:3px 9px;margin-left:8px}
.weg{background:var(--papier);border-radius:20px;padding:14px;border:2px dashed var(--faden)}
.weg .pfad{fill:none;stroke:var(--orange);stroke-width:5;stroke-linecap:round;stroke-dasharray:14 12}
.schritte{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px;counter-reset:s}
.schritte li{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;font-size:17px}
.schritte li .kp{width:44px;height:44px}
.karte2{background:var(--papier);border-radius:18px;padding:24px 22px;border-top:6px solid var(--f)}
.karte2 h3{margin-bottom:8px}.karte2 p{margin:0 0 10px}.karte2 a.t{font-weight:700;color:var(--tinte)}
.drei{display:grid;gap:18px}
/* Unterseitenkopf */
.uk{padding:44px 0 40px}.uk h1{font-size:clamp(36px,7.4vw,66px);max-width:16ch}
/* Rufkasten */
.ruf{padding:20px 0 70px}
.ruf-in{position:relative;background:var(--tinte);color:#fff;border-radius:24px;padding:34px 24px;display:grid;gap:18px;overflow:hidden}
.ruf-in:after{content:"";position:absolute;inset:9px;border:2px dashed rgba(255,255,255,.28);border-radius:17px;pointer-events:none}
.ruf-in h2{margin:0 0 8px;color:#fff}.ruf-in p{margin:0;color:rgba(255,255,255,.86);font-size:18px}
.ruf-in .knoepfe{margin-top:6px;position:relative;z-index:1}
/* Recht */
.recht h2{font-size:clamp(24px,3vw,30px);margin-top:34px}.recht p{font-size:17px}
/* Fuß */
.fuss{background:var(--tinte);color:rgba(255,255,255,.86);padding:50px 0 34px}
.fuss .wrap{display:grid;gap:30px}
.fuss h4{font:700 14px var(--t);letter-spacing:.14em;text-transform:uppercase;color:var(--gelb);margin:0 0 12px}
.fuss a{display:block;color:#fff;text-decoration:none;padding:7px 0;font-size:17px}
.fuss p{margin:0;font-size:17px}
.f-kn{display:flex;gap:8px;margin-bottom:16px}.f-kn .kp{width:30px;height:30px}
.band{background:#0b0b0c}
.band a{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1200px;margin:0 auto;padding:8px 20px;text-decoration:none}
.band b{font:500 13px var(--t);color:rgba(255,255,255,.72)}.band img{width:150px;height:auto}
/* feste Leiste Handy */
.unten{position:fixed;left:0;right:0;bottom:0;z-index:38;display:grid;grid-template-columns:1fr 1fr;background:var(--weiss);border-top:2px dashed var(--faden);padding:8px 10px calc(8px + var(--sb));gap:8px}
.unten a{display:flex;align-items:center;justify-content:center;gap:9px;min-height:50px;border-radius:999px;font:700 16px var(--t);text-decoration:none;color:#fff;background:var(--gruen)}
.unten a+a{background:var(--tinte)}.unten .kp{width:28px;height:28px}
body{padding-bottom:calc(68px + var(--sb))}
.js .zeig{opacity:0;transform:translateY(18px);transition:opacity .7s,transform .7s}.js .zeig.da{opacity:1;transform:none}
@media (min-width:700px){.vier{grid-template-columns:1fr 1fr}.fakten{grid-template-columns:repeat(4,1fr)}.liste{grid-template-columns:1fr 1fr}.ls{grid-template-columns:1fr 1fr}.drei{grid-template-columns:repeat(3,1fr)}.fuss .wrap{grid-template-columns:1.3fr 1fr 1fr 1fr}.band b{font-size:14px}.band img{width:180px}.wrap{padding:0 32px}.naht{margin:0 32px}}
@media (min-width:1000px){
.nav{display:flex}.mk,.unten{display:none}body{padding-bottom:0}.kopf-tel{display:inline-flex;min-height:50px;padding:5px 22px 5px 7px;font-size:17px}.kopf-tel .kp{width:36px;height:36px}
.marke img{height:58px}.kopf .wrap{min-height:84px}
.held{padding:70px 0 84px}.held .wrap{grid-template-columns:1.15fr .85fr;gap:60px}
.buehne{padding:44px 40px 0}.hemd{width:min(100%,430px)}
.ab{padding:96px 0}.vier{grid-template-columns:repeat(4,1fr)}.zwei{grid-template-columns:1fr 1fr;gap:70px}.zwei.breit{grid-template-columns:.9fr 1.1fr}
.ruf-in{grid-template-columns:1fr auto;align-items:center;padding:46px 50px}.uk{padding:70px 0 56px}
.liste{grid-template-columns:repeat(3,1fr)}.ls{grid-template-columns:repeat(4,1fr)}.frage{padding:36px 38px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}.js .zeig{opacity:1;transform:none}.faden path{stroke-dashoffset:0}}
/* ===== Runde 2: Knopfleiste, Farbflächen, Knopfkarte ===== */
.band-f{background:var(--gelb);color:var(--tinte);padding:20px 0}
.band-f ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;font:700 clamp(20px,2.3vw,28px)/1.15 var(--h)}
.band-f li{display:flex;align-items:center;gap:12px}.band-f .kp{width:30px;height:30px}
.kz.mitte{margin-bottom:46px}
.kl{position:relative;display:grid;gap:52px}
.kl:before{content:"";position:absolute;left:27px;top:10px;bottom:10px;border-left:3px dashed var(--faden)}
.kr{position:relative;display:grid;grid-template-columns:56px 1fr;grid-template-areas:"k b" "k t";gap:6px 18px;color:var(--tinte);text-decoration:none}
.kr>.kp{grid-area:k;width:56px;height:56px;position:relative;z-index:1;border-radius:50%;box-shadow:0 0 0 7px var(--weiss)}
.kr-b{grid-area:b}.kr-t{grid-area:t}
.rundw{width:min(100%,270px);padding:8px;border:3px dashed var(--f);border-radius:50%;margin-bottom:16px}
.rund{width:100%;height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;display:block}
.rund.farbe{display:grid;place-items:center;background:var(--f);color:#fff;font:700 clamp(21px,5.6vw,27px)/1.15 var(--h);text-align:center;padding:26px}
.kr-t h3{font-size:clamp(26px,3vw,36px);font-weight:700;margin-bottom:8px}
.kr-t p{color:var(--grau);font-size:18px;margin:0 0 12px;max-width:34ch}
.kr-t .ab-preis{display:block;font:700 17px var(--t);margin-bottom:12px}
.kr-t .weiter{display:inline-block;font:700 17px var(--t);border-bottom:3px dashed var(--f);padding-bottom:3px}
.kr:hover>.kp{transform:rotate(90deg)}
.ab.blau{background:var(--blau);color:#fff}.ab.blau h2{color:#fff}.ab.blau .vor{color:rgba(255,255,255,.82)}.ab.blau .lead{color:rgba(255,255,255,.92)}
.ab.blau .frage{color:var(--tinte);border-color:transparent}
.ab.gelb{background:var(--gelb)}.ab.gelb .vor{color:var(--tinte)}
.lband{padding:56px 0;scroll-margin-top:70px}
.lband.t-blau{background:#E3E9F8}.lband.t-gelb{background:#FAEFC6}.lband.t-orange{background:#FDE7D2}
.lband.voll{background:var(--f);color:#fff}.lband.voll h2{color:#fff}.lband.voll .lead{color:rgba(255,255,255,.94)}
.lband>.wrap .kp{width:64px;height:64px;margin-bottom:14px}.lband .kn .kp{width:40px;height:40px;margin:0}
.gross{font:700 clamp(40px,9vw,84px)/1.02 var(--h);letter-spacing:-.02em}
.fotow{margin:0;padding:8px;border:3px dashed var(--f);border-radius:28px}
.fotow img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px}
.fotow.hoch{max-width:440px}.fotow.hoch img{aspect-ratio:4/5}
.pz{list-style:none;margin:6px 0 4px;padding:0;max-width:440px}
.pz li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:2px dashed rgba(29,36,51,.22);font-size:18px}.pz b{white-space:nowrap}
.lband.voll .pz li{border-color:rgba(255,255,255,.45)}
.pk{display:grid;gap:22px;margin-top:26px}
.tabs{display:flex;flex-wrap:wrap;gap:10px}
.tab{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:6px 18px 6px 6px;border-radius:999px;border:2px solid transparent;background:var(--papier);font:700 16px var(--t);color:var(--tinte);cursor:pointer;text-align:left}
.tab .kp{width:38px;height:38px}.tab.an{border-color:var(--tinte);box-shadow:0 8px 18px rgba(29,36,51,.14)}.tab.an .kp{transform:rotate(90deg)}
.kkarte{position:relative;background:var(--papier);border-radius:18px;padding:66px 26px 22px;box-shadow:0 22px 46px rgba(29,36,51,.14);min-height:380px}
.kkarte:before{content:"";position:absolute;top:22px;left:50%;width:58px;height:20px;margin-left:-29px;border-radius:999px;background:var(--leinen);box-shadow:inset 0 2px 4px rgba(29,36,51,.25)}
.kkarte:after{content:"";position:absolute;inset:9px;border:2px dashed var(--faden);border-radius:12px;pointer-events:none}
.kkarte h3{font-size:clamp(26px,3vw,34px);font-weight:700;margin-bottom:10px}
.kkarte .zeile{font-size:19px;padding:14px 0;border-bottom-color:var(--leinen)}
.kkarte .treffer{position:relative;z-index:1;font-weight:700;font-size:18px;margin:10px 0 0}.treffer[hidden]{display:none}
.zettel{position:relative;background:var(--papier);border-radius:18px;display:grid;box-shadow:0 20px 44px rgba(29,36,51,.14)}
.zettel>div{padding:26px 24px;border-bottom:2px dashed var(--faden)}.zettel>div:last-child{border-bottom:0}
.zettel h3{margin-bottom:8px}.zettel p{margin:0 0 8px}.zettel a.t{font-weight:700;color:var(--tinte)}
@media (min-width:1000px){
.kz.mitte{text-align:center;margin-left:auto;margin-right:auto}
.kl{gap:10px}.kl:before{left:50%;margin-left:-1.5px}
.kr{grid-template-columns:1fr 96px 1fr;grid-template-areas:"b k t";align-items:center;gap:0 46px}
.kr:nth-child(even){grid-template-areas:"t k b"}
.kr>.kp{width:96px;height:96px;box-shadow:0 0 0 10px var(--weiss)}
.kr-b{display:flex;justify-content:flex-end}.kr:nth-child(even) .kr-b{justify-content:flex-start}
.kr:nth-child(even) .kr-t{text-align:right}.kr:nth-child(even) .kr-t p{margin-left:auto}
.rundw{width:300px;margin:0}
.lband{padding:84px 0}.zwei.um>:first-child{order:2}.fotow.hoch{justify-self:center}
.pk{grid-template-columns:320px 1fr;gap:34px;align-items:start}.tabs{flex-direction:column;align-items:stretch}.kkarte{padding:72px 44px 30px}
.zettel{grid-template-columns:repeat(3,1fr)}.zettel>div{border-bottom:0;border-right:2px dashed var(--faden);padding:34px 32px}.zettel>div:last-child{border-right:0}
}
.ab.blau .vor i b,.lband.voll .vor i b{box-shadow:0 0 0 1.5px rgba(255,255,255,.75)}.ab.gelb .vor i b{box-shadow:0 0 0 1.5px rgba(29,36,51,.45)}
.kkarte{scroll-margin-top:92px}
