@font-face{font-family:"Newsreader";font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/Newsreader.woff2) format("woff2")}
@font-face{font-family:"Work Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/WorkSans.woff2) format("woff2")}
:root{
  --graphit:#2E2A27; --graphit-2:#3A3531;
  --terra:#5A2A2F; --terra-dark:#431F23; --terra-tint:#F0E8E6;
  --greige:#B3AA9F; --stein:#E4DED6; --weiss:#F5F1EC; --leinen:#FBF9F6;
  --soft:#5C554F; --on-dark:#F1ECE5; --sand:#D4C2A4;
  --serif:"Newsreader", Georgia, serif; --sans:"Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter:clamp(16px,4vw,56px); --max:1240px;
  --img-hero:url("img/kh-hero.jpg"); --img-person:url("img/hero.jpg");
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{margin:0; background:var(--weiss); color:var(--graphit); font:400 17px/1.55 var(--sans); -webkit-font-smoothing:antialiased; overflow-x:hidden}
h1,h2,h3{font-family:var(--serif); font-weight:400; letter-spacing:-0.02em; line-height:1.05; margin:0; text-wrap:balance}
p{margin:0} a{color:inherit} img,svg{display:block; max-width:100%}
button{font:inherit; color:inherit}
.wrap{max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter)}
section{padding-block:clamp(80px,10vw,160px)}
:focus-visible{outline:2px solid var(--terra); outline-offset:3px}
.skip{position:absolute; left:16px; top:-60px; z-index:100; background:var(--graphit); color:#fff; padding:12px 16px; text-decoration:none}
.skip:focus{top:12px}
button,a,input,label{touch-action:manipulation}
.send-err{display:none; color:var(--terra-dark); font-size:.92rem; margin-top:10px; text-align:center}
.send-err.show{display:block}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:.6em; min-height:52px; padding:.95em 1.6em; border:1.5px solid transparent; border-radius:2px; font-weight:500; font-size:1rem; text-decoration:none; cursor:pointer; transition:background .2s, color .2s, transform .2s, border-color .2s}
.btn:active{transform:translateY(1px)}
.btn svg{transition:transform .2s}
.btn:hover svg{transform:translateX(4px)}
.btn-primary{background:var(--terra); color:#fff}
.btn-primary:hover{background:var(--terra-dark)}
.btn-line{border-color:currentColor; background:transparent}
.btn-line:hover{background:var(--graphit); color:var(--on-dark); border-color:var(--graphit)}
.btn[disabled]{opacity:.4; cursor:not-allowed}

/* Header */
.head{position:sticky; top:0; z-index:60; background:var(--weiss)}
.head .wrap{display:flex; align-items:center; gap:24px; min-height:72px}
.logo img{height:36px; width:auto; mix-blend-mode:multiply}
.head nav{display:flex; gap:clamp(16px,2.4vw,32px); margin-inline:auto}
.head nav a{text-decoration:underline; text-decoration-color:transparent; text-underline-offset:6px; text-decoration-thickness:1.5px; font-weight:500; font-size:.95rem; transition:text-decoration-color .2s}
.head nav a:hover{text-decoration-color:var(--terra)}
.head-tel{display:inline-flex; align-items:center; gap:10px; font-weight:600; text-decoration:none; white-space:nowrap; padding:6px 14px 6px 6px; border:1.5px solid var(--stein); border-radius:40px; transition:border-color .2s, background .2s}
.head-tel:hover{border-color:var(--terra); background:var(--leinen)}
.head-tel .ico{width:36px; height:36px; border-radius:50%; background:var(--terra); color:#fff; display:grid; place-items:center; flex:none}
.head-tel .t{display:flex; flex-direction:column; line-height:1.2}
.head-tel small{display:block; font-weight:400; font-size:12.5px; color:var(--soft)}
.head .btn{min-height:46px; padding:.7em 1.2em}
.head nav a,.head .btn{white-space:nowrap}
@media (max-width:1180px){ .head nav{display:none} .head-tel{margin-left:auto} }
@media (max-width:620px){ .head .btn{display:none} .logo img{height:30px} .head-tel small{display:none} .head-tel{padding-right:12px} .head-tel .ico{width:32px; height:32px} }

/* Hero */
.hero{position:relative; isolation:isolate; color:var(--on-dark); padding-block:clamp(48px,7vw,104px) clamp(56px,7vw,96px); background:var(--graphit) var(--img-hero) 50% 55%/cover no-repeat}
.hero::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(28,25,23,.9) 0%, rgba(28,25,23,.74) 50%, rgba(28,25,23,.38) 100%)}
.hero-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,490px); gap:clamp(32px,5vw,72px); align-items:start}
@media (max-width:1020px){ .hero-grid{grid-template-columns:1fr} }
.hero h1{font-size:clamp(2.2rem,4.2vw,3.5rem); color:#fff; max-width:19ch}
.hero-sub{font-family:var(--serif); font-size:clamp(1.25rem,1.9vw,1.55rem); line-height:1.3; color:var(--sand); margin-top:18px; max-width:30ch}
.hero-text{margin-top:22px; max-width:46ch; font-size:1.08rem}
.checks{list-style:none; padding:0; margin:28px 0 0; display:grid; gap:10px}
.checks li{display:flex; gap:10px; align-items:flex-start; font-weight:500}
.checks svg{flex:none; margin-top:4px}
.hero-person{display:flex; align-items:center; gap:14px; margin-top:32px}
.hero-person .face{width:56px; height:56px; border-radius:50%; background:var(--terra); color:#FBF9F6; display:grid; place-items:center; flex:none}
.hero-person p{font-size:.98rem}
.hero-person a{font-weight:600}
@media (max-width:620px){ .hero-text,.hero-person{display:none} .hero h1{font-size:2.15rem} .checks{margin-top:18px; gap:6px} .checks li{font-size:.95rem} }

/* Funnel */
.funnel{background:var(--leinen); color:var(--graphit); border-radius:4px; padding:clamp(20px,3vw,36px)}
.f-top{display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:.92rem; color:var(--soft)}
.f-bar{height:3px; background:var(--stein); margin:10px 0 22px}
.f-bar i{display:block; height:100%; width:20%; background:var(--terra); transition:width .35s ease}
.f-preview{position:relative; background:var(--graphit); margin:0 0 20px; aspect-ratio:600/300; overflow:hidden}
.f-preview img{width:100%; height:100%; object-fit:cover; display:block; transition:opacity .35s ease}
.f-preview figcaption{position:absolute; left:10px; bottom:10px; background:rgba(28,25,23,.78); color:#fff; font-size:.82rem; padding:4px 9px}
.f-quip{min-height:1.5em; font-family:var(--serif); font-size:1.12rem; color:var(--terra-dark); margin:-6px 0 14px}
.step{display:none}
.step.on{display:block; animation:rise .35s ease both}
@keyframes rise{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){ .step.on{animation:none} }
.step h2{font-size:clamp(1.55rem,2.4vw,1.95rem); margin-bottom:16px}
.opts{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
.opts.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:420px){ .opts.three{grid-template-columns:repeat(2,minmax(0,1fr))} }
.opt{display:flex; align-items:center; gap:12px; min-height:60px; padding:12px 14px; background:var(--weiss); border:1.5px solid transparent; border-radius:2px; text-align:left; cursor:pointer; font-weight:500; transition:border-color .18s, background .18s, transform .18s}
.opt:hover{border-color:var(--greige); transform:translateY(-1px)}
.opt[aria-pressed="true"]{border-color:var(--terra); background:var(--terra-tint)}
.opt svg{flex:none}
.opt .sw{width:28px; height:28px; border-radius:50%; flex:none}
.opt.wide{grid-column:1/-1}
@media (max-width:420px){ .opt{gap:8px; padding:12px 10px} .opt svg{width:30px} }
.f-nav{display:flex; justify-content:space-between; align-items:center; margin-top:18px; min-height:44px}
.f-back{background:none; border:0; padding:10px 0; cursor:pointer; color:var(--soft); font-weight:500}
.f-back:hover{color:var(--graphit)}
.f-back[hidden]{display:inline-block; visibility:hidden}
.field{margin-bottom:12px}
.field label{display:block; font-weight:500; font-size:.95rem; margin-bottom:6px}
.field label span{font-weight:400; color:var(--soft)}
.field input{width:100%; min-height:52px; padding:.8em 1em; border:1px solid #D3CBC1; border-radius:2px; background:#fff; font:inherit; color:inherit}
.field input:focus{outline:none; border-color:var(--terra)}
.field.bad input{border-color:var(--terra-dark)}
.err{display:none; color:var(--terra-dark); font-size:.9rem; margin-top:5px}
.field.bad .err{display:block}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media (max-width:420px){ .row2{grid-template-columns:1fr} }
.chk{display:flex; gap:10px; align-items:flex-start; font-size:.92rem; color:var(--soft); margin:6px 0 4px; cursor:pointer}
.chk input{width:20px; height:20px; accent-color:var(--terra); flex:none; margin-top:2px}
.chk a{color:var(--terra-dark)}
.chk-err{display:none; color:var(--terra-dark); font-size:.9rem}
.chk-err.show{display:block}
.hp{position:absolute; left:-9999px}
.f-submit{width:100%; margin-top:14px}
.f-note{text-align:center; font-size:.92rem; color:var(--soft); margin-top:12px}
.done h2{font-size:2rem; margin-bottom:10px}
.done p+p{margin-top:10px}
.done ol{padding-left:1.2em; margin:16px 0 0; display:grid; gap:6px}
.demo{display:none; font-size:.88rem; color:var(--terra-dark); margin-top:14px}
.demo.show{display:block}

/* Marken */
.brands{padding-block:clamp(32px,4vw,52px); background:var(--leinen)}
.brands .wrap{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 40px}
.brands p{color:var(--soft); font-size:.98rem}
.brand-row{display:flex; flex-wrap:wrap; align-items:center; gap:22px clamp(22px,3.4vw,48px)}
.brand-row img{height:30px; width:auto; filter:grayscale(1) contrast(1.1); opacity:.72; mix-blend-mode:multiply; transition:filter .25s, opacity .25s}
.brand-row img.tall{height:40px}
.brand-row img.xl{height:46px}
.brand-row img:hover{filter:none; opacity:1}
.brand-row .wm{font-weight:600; font-size:1.55rem; letter-spacing:.06em; color:#58524D}
.social{display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px; width:100%; margin-top:10px}
.social p{font-family:var(--serif); font-size:1.15rem; color:var(--graphit)}
.social a{display:inline-flex; align-items:center; gap:10px; font-weight:600; text-decoration:none; color:var(--graphit)}
.social a:hover{color:var(--terra-dark)}
.social svg{flex:none}

/* Ablauf */
.lead-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,5vw,80px); align-items:end; margin-bottom:clamp(40px,5vw,72px)}
.lead-head h2{font-size:clamp(2.3rem,4.6vw,3.9rem)}
.lead-head p{font-size:1.1rem; max-width:48ch}
@media (max-width:820px){ .lead-head{grid-template-columns:1fr} }
.flow{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,28px)}
@media (max-width:900px){ .flow{grid-template-columns:1fr} }
.flow li{display:flex; flex-direction:column}
.flow figure{margin:0 0 22px; background:var(--stein); aspect-ratio:4/3}
.flow figure img{width:100%; height:100%; object-fit:cover; display:block}
.flow h3{font-size:1.85rem; margin-bottom:8px}
.flow p{color:var(--soft)}
.flow .time{margin-top:12px; font-weight:600; color:var(--graphit)}

/* Stile */
.styles{background:var(--leinen)}
.style-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,1.6vw,22px)}
@media (max-width:980px){ .style-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .style-grid{grid-template-columns:1fr} }
.style-card{display:flex; flex-direction:column; text-align:left; background:none; border:0; padding:0; cursor:pointer}
.style-card .pic{aspect-ratio:4/3; overflow:hidden; background:var(--stein)}
.style-card .pic svg{width:100%; height:100%; transition:transform .6s ease}
.style-card:hover .pic svg{transform:scale(1.04)}
.style-card h3{font-size:1.65rem; margin:16px 0 6px}
.style-card p{color:var(--soft)}
.style-card .go{margin-top:10px; font-weight:600; color:var(--terra-dark); display:inline-flex; gap:.4em; align-items:center}
.style-card:hover .go svg{transform:translateX(4px)}
.style-card .go svg{transition:transform .2s}

/* Vertrauen */
.trust{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(32px,5vw,88px); align-items:start}
@media (max-width:900px){ .trust{grid-template-columns:1fr} }
.trust-photo{aspect-ratio:4/5; background:var(--graphit) var(--img-person) 64% 30%/cover; position:sticky; top:100px}
@media (max-width:900px){ .trust-photo{position:static; aspect-ratio:16/11} }
.trust h2{font-size:clamp(2.3rem,4.6vw,3.9rem); margin-bottom:20px}
.trust .intro{font-size:1.12rem; max-width:52ch}
.promises{list-style:none; padding:0; margin:44px 0 0; display:grid; gap:34px}
.promises h3{font-size:1.65rem; margin-bottom:6px}
.promises p{color:var(--soft); max-width:56ch}
.promises li{padding-left:28px; position:relative}
.promises li::before{content:""; position:absolute; left:0; top:.55em; width:12px; height:12px; background:var(--terra)}

/* Galerie */
.gal{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:12px}
.gal > *{margin:0; background:var(--stein); overflow:hidden}
.gal figure{position:relative}
.gal img{width:100%; height:100%; object-fit:cover; display:block}
.gal figcaption{position:absolute; left:12px; bottom:12px; background:rgba(28,25,23,.78); color:#fff; font-size:.85rem; padding:5px 10px}
.gal .g1{grid-column:span 7; aspect-ratio:16/11}
.gal .g2{grid-column:span 5; aspect-ratio:auto}
.gal .g3,.gal .g4,.gal .g5,.gal .g6{grid-column:span 3; aspect-ratio:3/4}
@media (max-width:760px){ .gal .g1,.gal .g2{grid-column:span 12} .gal .g2{aspect-ratio:4/3} .gal .g3,.gal .g4,.gal .g5,.gal .g6{grid-column:span 6} }

/* Bewertungen */
.reviews{background:var(--stein)}
.rev-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,5vw,80px); align-items:center}
@media (max-width:820px){ .rev-grid{grid-template-columns:1fr} }
.reviews h2{font-size:clamp(2.3rem,4.6vw,3.9rem)}
.reviews .intro{margin-top:18px; font-size:1.1rem; max-width:46ch}
.rev-slot{background:var(--leinen); padding:clamp(24px,3vw,40px); min-height:260px; display:flex; flex-direction:column; justify-content:center; gap:14px}
.stars{display:flex; gap:4px}
.rev-slot strong{font-family:var(--serif); font-weight:400; font-size:1.6rem}
.rev-slot p{color:var(--soft)}

/* Sprüche */
.quips{background:var(--graphit); color:var(--on-dark); padding-block:clamp(64px,8vw,112px)}
.quips h2{color:#fff; font-size:clamp(2.1rem,4vw,3.3rem); margin-bottom:clamp(32px,4vw,56px); max-width:20ch}
.fn-link{color:inherit; text-decoration:none; margin-left:1px}
.fn{font-size:.85rem; color:var(--soft); width:100%; max-width:80ch}
.quip-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(28px,4vw,56px)}
@media (max-width:820px){ .quip-grid{grid-template-columns:1fr} }
.quip-grid p{font-family:var(--serif); font-size:clamp(1.3rem,2vw,1.65rem); line-height:1.25}
.quip-grid p:nth-child(3n+1){color:var(--sand)}

/* FAQ */
.faq-grid{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:clamp(32px,5vw,88px)}
@media (max-width:900px){ .faq-grid{grid-template-columns:1fr} }
.faq h2{font-size:clamp(2.1rem,3.4vw,3rem)}
.faq .side p{margin-top:18px; font-size:1.08rem; max-width:34ch}
.faq .side .btn{margin-top:26px}
.faq details{background:var(--leinen); margin-bottom:4px}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:16px; align-items:center; padding:22px clamp(16px,2.4vw,28px); font-family:var(--serif); font-size:clamp(1.2rem,1.8vw,1.45rem); line-height:1.25}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--terra-dark)}
.faq .pm{flex:none; width:18px; height:18px; position:relative}
.faq .pm::before,.faq .pm::after{content:""; position:absolute; left:50%; top:50%; background:currentColor; transform:translate(-50%,-50%)}
.faq .pm::before{width:16px; height:1.5px}
.faq .pm::after{width:1.5px; height:16px; transition:transform .25s}
.faq details[open] .pm::after{transform:translate(-50%,-50%) scaleY(0)}
.faq details p{padding:0 clamp(16px,2.4vw,28px) 24px; color:var(--soft); max-width:64ch}

/* Kontakt / Abschluss */
.close{background:var(--graphit); color:var(--on-dark)}
.close-grid{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(32px,5vw,88px); align-items:center}
@media (max-width:900px){ .close-grid{grid-template-columns:1fr} }
.close h2{color:#fff; font-size:clamp(2.5rem,5.4vw,4.6rem)}
.close .intro{margin-top:20px; font-size:1.12rem; max-width:46ch}
.close .ctas{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.close .btn-line{color:#fff}
.close .btn-line:hover{background:#fff; color:var(--graphit); border-color:#fff}
.visit{background:var(--graphit-2); padding:clamp(24px,3vw,40px)}
.visit svg{width:100%; height:auto; margin-bottom:22px}
.visit h3{color:#fff; font-size:1.7rem; margin-bottom:10px}
.visit p{color:var(--on-dark)}
.visit p+p{margin-top:6px}
.slogan{margin-top:clamp(56px,7vw,96px); font-family:var(--serif); font-size:clamp(1.6rem,3.4vw,2.6rem); color:var(--sand)}

/* Footer */
footer{background:var(--stein); padding:56px 0 calc(40px + env(safe-area-inset-bottom))}
footer .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px; align-items:flex-start}
footer .logo img{height:40px}
footer nav{display:flex; flex-wrap:wrap; gap:12px 28px}
footer small{display:block; width:100%; color:var(--soft); font-size:.9rem}
.legal{width:100%; display:grid; gap:12px}
.legal details{background:var(--leinen); padding:4px 22px}
.legal summary{cursor:pointer; padding:14px 0; font-family:var(--serif); font-size:1.25rem; list-style:none}
.legal summary::-webkit-details-marker{display:none}
.legal .lt{padding:0 0 22px; max-width:72ch; font-size:.95rem; color:var(--graphit)}
.legal .lt h3{font-family:var(--serif); font-weight:400; font-size:1.15rem; margin:22px 0 6px}
.legal .lt p{margin-top:8px}

/* Sticky Mobile */
.mbar{display:none}
@media (max-width:760px){
  .mbar{display:grid; grid-template-columns:1fr auto auto; gap:8px; position:fixed; left:0; right:0; bottom:0; z-index:70; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:var(--weiss); transform:translateY(110%); transition:transform .3s ease}
  .mbar.show{transform:none}
  .mbar a{min-height:50px}
  .mbar .ic{width:50px; padding:0}
  body{padding-bottom:76px}
}

/* Consent */
.consent{position:fixed; z-index:80; left:16px; right:16px; bottom:16px; max-width:440px; background:var(--leinen); color:var(--graphit); padding:22px; box-shadow:0 18px 50px -20px rgba(0,0,0,.45)}
.consent[hidden]{display:none}
.consent p{font-size:.92rem; color:var(--soft)}
@media (min-width:1021px){ .consent{left:auto} }
@media (max-width:620px){ .consent{left:8px; right:8px; bottom:8px; padding:16px} .consent strong{font-size:1.1rem} .consent .long{display:none} .consent .row{margin-top:12px} .fresh .f-preview, .fresh .f-quip{display:none} .checks li:nth-child(3){display:none} .f-preview{aspect-ratio:600/240} }
.consent strong{display:block; font-family:var(--serif); font-weight:400; font-size:1.3rem; color:var(--graphit); margin-bottom:6px}
.consent .row{display:flex; gap:8px; margin-top:16px; flex-wrap:wrap}
.consent .btn{flex:1; min-height:46px; padding:.6em 1em}

/* Bewegung */
@media (prefers-reduced-motion: no-preference){
  .js .rv{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
  .js .rv.in{opacity:1; transform:none}
}

/* Werbebalken oben */
.promo{background:var(--graphit); color:#FBF9F6}
.promo .wrap{display:flex; align-items:center; justify-content:center; gap:18px; min-height:52px; padding-block:8px}
.promo .tag{flex:none; background:var(--sand); color:var(--graphit); font-weight:600; font-size:.82rem; letter-spacing:.04em; padding:5px 10px; border-radius:2px; text-transform:uppercase}
.promo .msgs{position:relative; display:grid; flex:0 1 auto; min-width:0}
.promo .msg{grid-area:1/1; font-size:1.02rem; font-weight:500; opacity:0; transform:translateY(6px); transition:opacity .45s ease, transform .45s ease; pointer-events:none}
.promo .msg.on{opacity:1; transform:none; pointer-events:auto}
.promo .msg b{color:var(--sand); font-weight:600}
.promo .msg i{font-style:normal; opacity:.75; font-weight:400}
.promo .go{flex:none; color:#fff; font-weight:600; font-size:.95rem; text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--sand)}
.promo .go:hover{color:var(--sand)}
@media (max-width:760px){ .promo .tag{display:none} .promo .msg{font-size:.92rem; text-align:center} .promo .msg i{display:none} .promo .go{display:none} .promo .wrap{min-height:48px} }
@media (prefers-reduced-motion: reduce){ .promo .msg{transition:none} }

/* Terminwahl im Planer */
.choice{display:grid; gap:10px}
.choice button{display:grid; grid-template-columns:auto 1fr; gap:4px 14px; align-items:start; text-align:left; padding:18px; background:var(--weiss); border:1.5px solid transparent; border-radius:2px; cursor:pointer; transition:border-color .18s, transform .18s}
.choice button:hover{border-color:var(--terra); transform:translateY(-1px)}
.choice .ci{grid-row:span 2; width:44px; height:44px; border-radius:50%; background:var(--terra); color:#fff; display:grid; place-items:center}
.choice .ci.alt{background:var(--graphit)}
.choice strong{font-family:var(--serif); font-weight:400; font-size:1.35rem; line-height:1.2}
.choice span.d{color:var(--soft); font-size:.95rem}
.choice .badge{display:inline-block; margin-left:8px; font-family:var(--sans); font-size:.75rem; font-weight:600; background:var(--terra-tint); color:var(--terra-dark); padding:2px 8px; vertical-align:middle}
.later{display:block; margin:14px auto 0; background:none; border:0; color:var(--soft); text-decoration:underline; text-underline-offset:4px; cursor:pointer; font-size:.95rem}
.cal-wrap{margin-top:4px}
.cal-wrap iframe{display:block; width:100%; height:680px; border:0; background:#fff}
.cal-ph{background:var(--weiss); padding:22px; color:var(--soft)}
.cal-ph strong{display:block; color:var(--graphit); font-family:var(--serif); font-weight:400; font-size:1.3rem; margin-bottom:6px}
.cal-note{font-size:.85rem; color:var(--soft); margin-top:10px}
.cal-done{width:100%; margin-top:12px}
.cal-back{margin-top:10px; background:none; border:0; color:var(--soft); cursor:pointer; padding:8px 0; font-weight:500}

/* Online-Abschluss-Box im Kontaktbereich */
.online{background:var(--graphit-2); padding:clamp(24px,3vw,40px)}
.online h3{color:#fff; font-size:1.7rem; margin:18px 0 10px}
.online p{color:var(--on-dark)}
.online ul{margin:14px 0 0; padding-left:1.1em; color:var(--on-dark); display:grid; gap:6px}
.online svg{width:100%; height:auto}

/* Unterseiten */
.page-hero{background:var(--graphit); color:var(--on-dark); padding-block:clamp(56px,8vw,112px)}
.page-hero h1{color:#fff; font-size:clamp(2.4rem,5vw,4.2rem); max-width:18ch}
.page-hero p{margin-top:18px; font-family:var(--serif); font-size:clamp(1.2rem,1.8vw,1.5rem); color:var(--sand); max-width:40ch; line-height:1.3}
.page-hero .crumb{font-size:.92rem; color:var(--greige); margin-bottom:18px; font-family:var(--sans)}
.page-hero .crumb a{color:var(--on-dark)}
.sec-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,5vw,80px); align-items:end; margin-bottom:clamp(32px,4vw,56px)}
.sec-head h2{font-size:clamp(2.1rem,4vw,3.4rem)}
.sec-head p{font-size:1.08rem; max-width:50ch}
@media (max-width:820px){ .sec-head{grid-template-columns:1fr} }
.surf-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,2vw,24px)}
@media (max-width:980px){ .surf-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .surf-grid{grid-template-columns:1fr} }
.surf{background:var(--leinen); display:flex; flex-direction:column}
.surf .sw{aspect-ratio:16/10}
.surf .sw svg{width:100%; height:100%}
.surf .in{padding:20px 22px 24px}
.surf h3{font-size:1.6rem; margin-bottom:8px}
.surf p{color:var(--soft)}
.surf dl{display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:16px 0 0; font-size:.95rem}
.surf dt{font-weight:600}
.surf dd{margin:0; color:var(--soft)}
.dots{letter-spacing:3px; color:var(--terra)}
.alt-bg{background:var(--leinen)}
.alt-bg .surf{background:var(--weiss)}
.tech{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,2vw,24px)}
@media (max-width:980px){ .tech{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .tech{grid-template-columns:1fr} }
.tech li{list-style:none; background:var(--weiss); padding:22px}
.tech h3{font-size:1.4rem; margin:14px 0 6px}
.tech p{color:var(--soft); font-size:.98rem}
.tech svg{width:56px; height:56px}
.feature{display:grid; grid-template-columns:minmax(0,6fr) minmax(0,6fr); gap:clamp(24px,5vw,72px); align-items:center; margin-top:clamp(40px,5vw,72px)}
@media (max-width:860px){ .feature{grid-template-columns:1fr} }
.feature figure{margin:0; background:var(--stein); aspect-ratio:4/3}
.feature figure svg{width:100%; height:100%}
.feature h3{font-size:clamp(1.8rem,3vw,2.5rem); margin-bottom:12px}
.feature p{color:var(--soft); max-width:52ch}
.feature ul{margin:14px 0 0; padding-left:1.1em; display:grid; gap:6px; color:var(--graphit)}
.src{font-size:.85rem; color:var(--soft); margin-top:28px}
.cta-band{background:var(--terra-dark); color:#fff; padding-block:clamp(56px,7vw,96px)}
.cta-band .wrap{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px}
.cta-band h2{color:#fff; font-size:clamp(2rem,3.6vw,3rem); max-width:20ch}
.cta-band p{margin-top:10px; color:#EAE0DE; max-width:46ch}
.cta-band .btn{background:#fff; color:var(--graphit)}
.cta-band .btn:hover{background:var(--sand)}
.posts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,28px)}
@media (max-width:900px){ .posts{grid-template-columns:1fr} }
.post{display:flex; flex-direction:column; text-decoration:none; background:var(--leinen)}
.post .pic{aspect-ratio:4/3; background:var(--stein); overflow:hidden}
.post .pic svg{width:100%; height:100%; transition:transform .5s ease}
.post:hover .pic svg{transform:scale(1.04)}
.post .in{padding:20px 22px 26px}
.post .meta{font-size:.88rem; color:var(--soft)}
.post h2{font-size:1.75rem; margin:8px 0 8px}
.post p{color:var(--soft)}
.post .go{margin-top:14px; font-weight:600; color:var(--terra-dark)}
.prose{max-width:70ch; margin-inline:auto}
.prose > * + *{margin-top:1.1em}
.prose h2{font-size:clamp(1.8rem,3vw,2.4rem); margin-top:1.8em}
.prose h3{font-size:1.45rem; margin-top:1.5em}
.prose p,.prose li{font-size:1.08rem}
.prose ul,.prose ol{padding-left:1.2em; display:grid; gap:8px}
.prose figure{margin:1.8em 0; background:var(--stein)}
.prose figure svg{width:100%; height:auto; display:block}
.prose figcaption{background:var(--weiss); font-size:.92rem; color:var(--soft); padding-top:10px}
.prose .tip{background:var(--terra-tint); padding:20px 22px; border-left:4px solid var(--terra)}
.prose .lead{font-family:var(--serif); font-size:1.4rem; line-height:1.4; color:var(--graphit)}
.prose table{width:100%; border-collapse:collapse; font-size:1rem}
.prose th,.prose td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--stein); vertical-align:top}
.prose th{font-weight:600}
.legal-page .prose h2{font-size:1.5rem}
.foot-nav{display:flex; flex-wrap:wrap; gap:12px 28px}
.foot-nav a{text-decoration:none; font-weight:500}
.foot-nav a:hover{text-decoration:underline}

/* Konfigurationen */
.konf{background:var(--graphit); color:var(--on-dark)}
.konf .lead-head h2{color:#fff}
.konf .lead-head p{color:var(--on-dark)}
.konf-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,2vw,26px)}
@media (max-width:980px){ .konf-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ .konf-grid{grid-template-columns:1fr} }
.konf-card{display:flex; flex-direction:column; background:var(--graphit-2)}
.konf-card .ph{aspect-ratio:4/5; overflow:hidden}
.konf-card .ph img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s ease}
.konf-card:hover .ph img{transform:scale(1.035)}
.konf-card .in{padding:22px 22px 26px; display:flex; flex-direction:column; flex:1}
.konf-card h3{color:#fff; font-size:1.8rem}
.konf-card .sub{color:var(--sand); font-family:var(--serif); font-size:1.08rem; margin-top:4px}
.konf-card dl{display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:16px 0 18px; font-size:.95rem}
.konf-card dt{color:var(--greige)}
.konf-card dd{margin:0; color:var(--on-dark)}
.konf-card button{margin-top:auto; align-self:flex-start; background:none; border:1.5px solid var(--sand); color:#fff; padding:.75em 1.2em; cursor:pointer; font-weight:500; border-radius:2px; transition:background .2s, color .2s}
.konf-card button:hover{background:var(--sand); color:var(--graphit)}
.online .ph{aspect-ratio:4/3; overflow:hidden}
.online .ph img{width:100%; height:100%; object-fit:cover; display:block}
.post .pic img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease}
.post:hover .pic img{transform:scale(1.04)}
/* Material-Guide */
.toc{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px}
.toc a{display:inline-block; padding:.55em 1em; border:1.5px solid rgba(255,255,255,.35); color:#fff; text-decoration:none; font-weight:500; font-size:.95rem; border-radius:40px}
.toc a:hover{background:#fff; color:var(--graphit)}
.stone{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(24px,5vw,72px); align-items:start; padding-block:clamp(48px,6vw,88px)}
.stone + .stone{padding-top:0}
@media (max-width:880px){ .stone{grid-template-columns:1fr} }
.stone .pics{display:grid; gap:10px; position:sticky; top:96px}
@media (max-width:880px){ .stone .pics{position:static; grid-template-columns:1fr 1fr} }
.stone .pics figure{margin:0; position:relative; background:var(--stein)}
.stone .pics img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block}
.stone .pics figure.tall img{aspect-ratio:4/5}
.stone .pics figcaption{font-size:.85rem; color:var(--soft); padding:8px 2px 0}
.stone h2{font-size:clamp(2.2rem,4vw,3.3rem)}
.stone .kicker{font-family:var(--serif); font-size:1.3rem; color:var(--terra); margin-top:8px}
.stone p{margin-top:14px; font-size:1.06rem}
.stone h3{font-size:1.4rem; margin-top:26px}
.stone ul{margin:10px 0 0; padding-left:1.2em; display:grid; gap:6px}
.facts{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:22px}
@media (max-width:560px){ .facts{grid-template-columns:repeat(2,minmax(0,1fr))} }
.facts div{background:var(--leinen); padding:12px 14px}
.facts b{display:block; font-size:.8rem; font-weight:600; color:var(--soft); text-transform:uppercase; letter-spacing:.04em}
.facts span{font-family:var(--serif); font-size:1.25rem}
.pc{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:20px}
@media (max-width:560px){ .pc{grid-template-columns:1fr} }
.pc div{background:var(--leinen); padding:16px 18px}
.pc h4{margin:0 0 8px; font-size:1rem}
.pc ul{margin:0}
.cmp-wrap{overflow-x:auto}
.cmp{width:100%; border-collapse:collapse; min-width:720px; font-size:.98rem}
.cmp th,.cmp td{text-align:left; padding:12px 14px; vertical-align:top}
.cmp thead th{background:var(--graphit); color:#fff; font-weight:500}
.cmp tbody tr:nth-child(odd){background:var(--leinen)}
.cmp td:first-child{font-weight:600}