/* Volume – Stylesheet der Website
   Basis: Design/tokens.css (Farbkonzept Galerie). Komponenten aus Design/index.html. */

/* ---------- Schrift (selbst gehostet) ---------- */
@font-face{font-family:"Hanken Grotesk";src:url(../assets/fonts/HankenGrotesk-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(../assets/fonts/HankenGrotesk-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(../assets/fonts/HankenGrotesk-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(../assets/fonts/HankenGrotesk-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --brand:#1C1C1B;      /* Hauptfarbe: Wortmarke, große Überschriften */
  --secondary:#E3DDD3;  /* Zweitfarbe: Haarlinien, Trenner – nie Text */
  --accent:#E5D5C5;     /* Akzent: Buttons (Schrift dunkel), feine Linien – nie Text */
  --accent-hover:#DAC6B2;
  --surface:#FBFAF7;    /* Hintergrund off-white */
  --placeholder:#F1EEE8;/* Bildplatzhalter */
  --ink:#1C1C1B;        /* Textfarbe */
  --ink-muted:#5F5D59;  /* Nebentext */
  --on-accent:#1C1C1B;
  --input-border:#9A968F;
  --input-bg:#FFFFFF;
  --font-sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --space-2:8px;--space-4:16px;--space-6:24px;--space-8:32px;
  --radius-sm:4px;--radius-md:8px;--radius-lg:16px;
}

/* ---------- Basis ---------- */
html{scroll-behavior:smooth}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--font-sans);font-size:16px;line-height:24px;-webkit-font-smoothing:antialiased}
:where(h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote){margin:0}
img{max-width:100%}
a{color:var(--ink)}
a:hover{color:var(--ink-muted)}

/* ---------- Layout ---------- */
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.sec{padding:72px 0;border-top:1px solid var(--secondary)}
.sec--flush{border-top:0}
.split{display:grid;gap:40px;margin-top:40px}
.split--top{margin-top:0}
.pic{margin:0;max-width:440px}
.pic img{display:block;width:100%;height:auto;border-radius:var(--radius-lg)}

/* ---------- Kopfzeile ---------- */
.hdr{display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px}
.hdr__logo{display:block;line-height:0}
.hdr__logo img{height:24px;width:auto;max-width:none;margin-left:-6px}
.nav{display:none;gap:32px;font-size:14px}
.nav a{text-decoration:none;color:var(--ink-muted)}
.nav a:hover{color:var(--ink)}

/* ---------- Typografie ---------- */
.lbl{font-size:12px;line-height:16px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted)}
.lbl::after{content:"";display:block;width:28px;height:1px;background:var(--accent);margin-top:12px}
.h1{font-size:40px;line-height:44px;font-weight:600;letter-spacing:-.025em;margin-top:20px;color:var(--brand)}
.h2{font-size:30px;line-height:36px;font-weight:600;letter-spacing:-.02em;margin-top:20px;max-width:720px;color:var(--brand)}
.h3{font-size:19px;line-height:26px;font-weight:600}
.lead{font-size:17px;line-height:27px;color:var(--ink-muted);margin-top:16px;max-width:620px}
.lead--first{margin-top:0}
.muted{color:var(--ink-muted)}
.small{font-size:13px;line-height:19px;color:var(--ink-muted)}

/* Abstands-Helfer */
.mt-6{margin-top:6px}
.mt-12{margin-top:12px}
.mt-16{margin-top:16px}
.mt-20{margin-top:20px}
.mt-24{margin-top:24px}
.mt-32{margin-top:32px}
.mt-40{margin-top:40px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;background:var(--accent);color:var(--on-accent);font-family:inherit;font-weight:600;font-size:15px;line-height:20px;text-decoration:none;border:0;border-radius:var(--radius-md);cursor:pointer}
.btn:hover{background:var(--accent-hover);color:var(--on-accent)}
.btn:disabled{opacity:.6;cursor:progress}
.btn-s{min-height:44px;padding:10px 16px;font-size:14px}

/* ---------- Bildplatzhalter ---------- */
.ph{background:var(--placeholder);border:1px solid var(--secondary);border-radius:var(--radius-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:24px;color:var(--ink-muted);font-size:13px;line-height:19px}
.ph--link{text-decoration:none}
.ph--220{min-height:220px}
.ph--280{min-height:280px}
.ph--360{min-height:360px}

/* ---------- Startbereich ---------- */
.hero{display:grid;gap:40px;padding-top:32px;padding-bottom:64px}
.hero__img{margin:0}
.hero__img img{display:block;width:100%;height:auto;border-radius:var(--radius-lg)}
.hero__img--farbe{position:relative;max-width:560px;width:100%;justify-self:center}
.hero__img--farbe img{aspect-ratio:4/5;object-fit:cover}
.hero__img--farbe[data-farbe="schwarz"] .is-weiss,.hero__img--farbe[data-farbe="weiss"] .is-schwarz{display:none}
.farbwahl{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;gap:4px;padding:4px;background:rgba(255,255,255,.85);border:1px solid var(--secondary);border-radius:999px}
.farbwahl button{font:inherit;font-size:14px;border:0;background:none;padding:6px 14px;border-radius:999px;cursor:pointer;color:inherit}
.farbwahl button[aria-pressed="true"]{background:#1C1C1B;color:#fff}
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.duo figure{margin:0}
.duo img{display:block;width:100%;height:auto;border-radius:var(--radius-lg)}
.duo figcaption{margin-top:6px}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:32px}

/* Kennzahlen-Leiste */
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--secondary);border-bottom:1px solid var(--secondary)}
.fact{padding:20px 12px 20px 0}
.fact:nth-child(2n){padding-left:16px;border-left:1px solid var(--secondary)}
.fact:nth-child(n+3){border-top:1px solid var(--secondary)}
.fact:nth-child(3){grid-column:1/-1}
.fact b{display:block;font-size:22px;line-height:28px;font-weight:600;letter-spacing:-.01em}
.fact span{font-size:12px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}

/* ---------- Nutzen ---------- */
.g3{display:grid;gap:32px;margin-top:40px}
.item{border-top:1px solid var(--secondary);padding-top:20px}
.item h3{font-size:19px;line-height:26px;font-weight:600}
.item p{margin-top:8px;color:var(--ink-muted)}

/* ---------- Kundenstimmen ---------- */
.quotes{display:grid;gap:16px;margin-top:40px}
.quote{border:1px dashed var(--accent);border-radius:var(--radius-lg);padding:24px;color:var(--ink-muted)}
.quote figcaption{margin-top:12px}

/* ---------- Setup ---------- */
.tbl{width:100%;border-collapse:collapse;margin-top:12px;font-size:15px}
.tbl th,.tbl td{text-align:left;padding:14px 8px 14px 0;border-bottom:1px solid var(--secondary);vertical-align:top}
.tbl th{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);font-weight:500}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{border:1px solid var(--secondary);border-radius:999px;padding:6px 14px;font-size:14px}
.incl{list-style:none;padding:0;margin-top:12px}
.incl li{padding:10px 0;border-bottom:1px solid var(--secondary)}

/* ---------- Ablauf ---------- */
.steps{list-style:none;padding:0;margin-top:40px;display:grid;gap:0}
.step{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:22px 0;border-top:1px solid var(--secondary)}
.step .n{font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--ink-muted);padding-top:2px}
.step h3{font-size:18px;line-height:25px;font-weight:600}
.step p{margin-top:6px;color:var(--ink-muted)}
.price{margin-top:40px;border:1px solid var(--secondary);border-radius:var(--radius-lg);padding:28px;display:grid;gap:20px}
.price .big{font-size:36px;line-height:40px;font-weight:600;letter-spacing:-.02em}
.price .net{font-size:18px;font-weight:400;color:var(--ink-muted)}

/* ---------- FAQ ---------- */
.faq{margin-top:40px;display:grid;gap:0}
.qa{padding:24px 0;border-top:1px solid var(--secondary)}
.qa dt{font-size:18px;line-height:25px;font-weight:600}
.qa dd{margin-top:8px;color:var(--ink-muted);max-width:680px}

/* ---------- Formular ---------- */
.form{display:grid;gap:20px}
.row2{display:grid;gap:20px}
.fld{display:flex;flex-direction:column;gap:8px}
.fld label{font-size:14px;line-height:20px;font-weight:500}
.fld label span{font-weight:400;color:var(--ink-muted)}
.in{width:100%;min-height:48px;padding:12px 14px;font-family:inherit;font-size:16px;line-height:22px;color:var(--ink);background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--radius-md)}
.in:focus{outline:2px solid var(--ink);outline-offset:1px}
textarea.in{min-height:132px;resize:vertical}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ok:focus{outline:none}
.ok{border:1px solid var(--secondary);border-radius:var(--radius-lg);padding:32px}
.form-error{color:var(--ink)}
[hidden]{display:none !important}

/* ---------- Fußbereich ---------- */
.ftr{border-top:1px solid var(--secondary);padding:48px 0 40px}
.fgrid{display:grid;gap:28px}
.ftr__logo{width:170px;height:auto;margin-left:-10px}
.flinks{display:flex;flex-direction:column;gap:4px;font-size:14px}
.ftr__bottom{margin-top:40px;padding-top:20px;border-top:1px solid var(--secondary)}

/* ---------- Unterseiten (Impressum, Datenschutz) ---------- */
.legal{padding-top:32px;padding-bottom:96px}
.legal .h2{margin-top:20px}
.legal h2.h3{margin-top:40px}
.legal p{margin-top:12px;max-width:680px}
.legal ol{margin-top:12px;max-width:680px;padding-left:1.4em}
.legal li{margin-top:10px}
.legal .entwurf{padding:14px 18px;border:1px solid currentColor;border-radius:8px}

/* ---------- Desktop ab 900 px ---------- */
@media (min-width:900px){
 .wrap{padding:0 48px}
 .nav{display:flex}
 .hero{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;gap:64px;padding-top:56px;padding-bottom:96px}
 .h1{font-size:60px;line-height:62px}
 .facts{grid-template-columns:repeat(3,minmax(0,1fr))}
 .fact:nth-child(3){grid-column:auto}
 .fact{padding:28px 24px}
 .fact:first-child{padding-left:0}
 .fact:nth-child(n){border-left:1px solid var(--secondary);border-top:0}
 .fact:first-child{border-left:0}
 .fact b{font-size:28px;line-height:34px}
 .sec{padding:120px 0}
 .h2{font-size:42px;line-height:48px}
 .g3{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
 .split{grid-template-columns:repeat(2,minmax(0,1fr));gap:80px;align-items:start}
 .split--mid{align-items:center}
 .split--mid .pic{justify-self:end}
 .quotes{grid-template-columns:repeat(3,minmax(0,1fr))}
 .steps{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:64px}
 .price{grid-template-columns:auto 1fr auto;align-items:center;gap:48px;padding:36px 40px}
 .faq{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:64px}
 .row2{grid-template-columns:repeat(2,minmax(0,1fr))}
 .fgrid{grid-template-columns:2fr 1fr 1fr}
 .legal{padding-top:56px;padding-bottom:120px}
}

/* Mehrseitiges Formular */
.mf-progress{height:2px;background:var(--secondary);border-radius:2px;overflow:hidden}
.mf-progress span{display:block;height:100%;width:33.34%;background:var(--ink);transition:width .3s}
.form:not(.is-multi) .mf-progress,.form:not(.is-multi) .mf-count,.form:not(.is-multi) [data-next],.form:not(.is-multi) [data-prev]{display:none}
.mf-count{margin-top:-8px}
.mf-step,.grp{border:0;padding:0;margin:0;min-width:0;display:grid;gap:20px}
.grp{gap:12px}
.mf-step>legend{padding:0;margin-bottom:20px;float:left;width:100%}
.mf-step>legend:focus{outline:none}
.mf-step>legend+*{clear:both}
.grp>legend{padding:0;margin-bottom:12px;font-size:14px;line-height:20px;font-weight:500;float:left;width:100%}
.grp>legend+*{clear:both}
.grp>legend span{font-weight:400;color:var(--ink-muted)}
.opts{display:grid;gap:8px}
.opts--row{display:flex;flex-wrap:wrap;gap:8px}
.opts--grid{grid-template-columns:1fr}
.opt{display:flex;align-items:flex-start;gap:10px;min-height:44px;padding:11px 14px;background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--radius-md);font-size:15px;line-height:21px;cursor:pointer}
.opt input{margin:3px 0 0;flex:none;width:16px;height:16px;accent-color:var(--ink)}
.opt small{color:var(--ink-muted);font-size:13px}
.opt:has(input:checked){border-color:var(--ink)}
.opt:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:1px}
.mf-note{color:var(--ink);background:var(--secondary);border-radius:var(--radius-md);padding:12px 14px}
.mf-nav{display:flex;justify-content:space-between;gap:12px;margin-top:8px}
.mf-nav [data-next]:only-child,.mf-nav [type=submit]:only-child{margin-left:auto}
.mf-nav .btn-s{background:transparent;border:1px solid var(--input-border)}
.mf-drop{list-style:none;padding:0;margin:0;counter-reset:d;border-top:1px solid var(--secondary)}
.mf-drop li{counter-increment:d;display:grid;grid-template-columns:32px 1fr;column-gap:12px;padding:14px 0;border-bottom:1px solid var(--secondary)}
.mf-drop li::before{content:counter(d,decimal-leading-zero);grid-row:span 2;font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--ink-muted);padding-top:2px}
.mf-drop b{font-weight:600}
.mf-drop span{color:var(--ink-muted);font-size:15px;line-height:22px}
@media (min-width:900px){
 .opts--grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .row2--plz{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
}

/* Faceplate-Konfigurator */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.kfg{padding-top:32px;padding-bottom:96px}
.kfg .lead{max-width:720px}
.kfg__steps{margin-top:32px;padding:20px;border:1px solid var(--secondary);border-radius:var(--radius-lg)}
.kfg__nav{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-wrap:wrap;gap:6px}
.kfg__nav button{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;background:none;border:1px solid var(--secondary);border-radius:999px;font:inherit;font-size:14px;line-height:20px;color:var(--ink);cursor:pointer}
.kfg__nav button span{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--secondary);font-size:12px;font-weight:600}
.kfg__nav button.is-akt{border-color:var(--ink)}
.kfg__nav button.is-akt span,.kfg__nav button.is-ok span{background:var(--ink);color:#fff}
.kfg__nav button.is-weg{color:var(--ink-muted);text-decoration:line-through}
.kfg__nav button.is-weg span{background:var(--secondary);color:var(--ink-muted)}
.kfg__nav button:disabled{opacity:.45;cursor:default}
.kfg__step h2:focus{outline:none}
.kfg__list--wahl{max-height:none;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));margin-top:12px}
.kfg__list--wahl button{min-height:62px;height:100%;align-content:center}
.kfg__list button[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.kfg__list button:disabled{opacity:.45;cursor:not-allowed}
.kfg__steps .kfg__seg{max-width:720px}
.kfg__steps .kfg__seg button{white-space:normal}
.kfg__weiter{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:20px}
.kfg__weiter p:empty{display:none}
.kfg__weiter p{color:var(--ink-muted);flex-basis:100%}
.kfg__erkl{display:grid;gap:16px}
.kfg__erkl .kfg__lapsvg{max-width:420px}
.kfg__summe{margin:8px 0 0;padding-left:18px;display:grid;gap:4px}
.kfg__stage{margin-top:40px}
.kfg__stage > .lbl{margin-bottom:12px}
.kfg__bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px}
.btn-ghost{background:transparent;border:1px solid var(--input-border)}
.btn-ghost:hover{background:var(--secondary)}
.btn:disabled{opacity:.4;cursor:default}
.kfg__pos{color:var(--ink-muted);margin-left:4px}
.kfg__svg{display:block;width:100%;height:auto;touch-action:none;user-select:none;-webkit-user-select:none}
.kfg__rand{font-size:16px;fill:var(--ink-muted);letter-spacing:.08em;text-transform:uppercase}
.kfg__front{font-size:18px;fill:var(--ink-muted);letter-spacing:.08em;text-transform:uppercase}
body.is-dragging{user-select:none;-webkit-user-select:none}
.kfg__item{outline:none}
.kfg__item path{fill:#E5D5C5;fill-opacity:.9;stroke:#1C1C1B;stroke-width:1.5}
.kfg__item.is-sel path{stroke-width:4}
.kfg__item:focus-visible path{stroke-width:4;stroke-dasharray:10 6}
.kfg__item.is-bad path{fill:#F3D6D2;stroke:#B3261E}
.kfg__grp{fill:none;stroke:#5F5D59;stroke-width:1.5;stroke-dasharray:8 6;pointer-events:none}
.kfg [hidden]{display:none!important}
.kfg__rowbtns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;justify-content:center}
.kfg__rowbtns:not(:has(button:not([hidden]))){margin-top:0}
.kfg__info{margin-top:12px;padding:12px 14px;border-radius:var(--radius-md);background:#F1ECE4;color:var(--ink)}
.kfg__sink{margin-top:8px;padding:12px 14px;border-radius:var(--radius-md);background:#F1ECE4;color:var(--ink)}
.kfg .is-disabled{opacity:.4;pointer-events:auto;cursor:not-allowed}
.kfg__lock{color:var(--ink)}
.kfg__sinkpart:not([hidden]) ~ .kfg__sinkpart:not([hidden]){margin-top:18px}
.kfg__sinksvg{display:block;width:100%;max-width:520px;height:auto;margin-top:10px}
.kfg__item text{fill:#1C1C1B;font-family:inherit;pointer-events:none}
.kfg__item .n{font-weight:600}
.kfg__item .m{fill:#5F5D59}
.kfg__msg{margin-top:12px;padding:12px 14px;border-radius:var(--radius-md);background:var(--secondary);color:var(--ink);text-align:center}
.kfg__msg.is-bad{background:#F3D6D2}
.kfg__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.kfg__cats{margin-top:12px;display:grid;gap:8px}
.kfg__cat{border-top:1px solid var(--secondary);padding-top:8px}
.kfg__cat summary{cursor:pointer;font-weight:600;font-size:15px;padding:6px 0}
.kfg__list{list-style:none;padding:0;margin:6px 0 0;display:grid;gap:6px;max-height:520px;overflow:auto}
.kfg__list button{width:100%;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:12px;align-items:center;text-align:left;padding:10px 14px;background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--radius-md);font:inherit;font-size:15px;line-height:20px;color:var(--ink);cursor:pointer}
.kfg__list button:hover{border-color:var(--ink)}
.kfg__list small{grid-column:1;color:var(--ink-muted);font-size:13px}
.kfg__list b{grid-column:2;grid-row:1/3;font-size:22px;font-weight:400}
.kfg__lap{margin-top:24px;border-top:1px solid var(--secondary);padding-top:16px}
.kfg__lapsvg{display:block;width:100%;height:auto;margin-top:12px;cursor:pointer}
.kfg__lapplay{margin-top:4px;padding:0;background:none;border:0;font:inherit;font-size:14px;color:var(--ink-muted);text-decoration:underline;cursor:pointer}
.kfg__lapplay:hover{color:var(--ink)}
.kfg__seg{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.kfg__seg:not(:has(button:not([hidden]))){display:none}
.kfg__seg button{flex:1 1 0;padding:8px 10px;background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--radius-md);font:inherit;font-size:14px;line-height:20px;color:var(--ink);cursor:pointer;white-space:nowrap}
.kfg__seg button:hover:not(:disabled){border-color:var(--ink)}
.kfg__seg button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.kfg__seg button:disabled{opacity:.4;cursor:not-allowed}
.kfg__lapmsg:empty{display:none}
.kfg__lapmsg.is-bad{padding:8px 10px;border-radius:var(--radius-md);background:#F3D6D2}
.kfg__lapg{pointer-events:none}
.kfg__lapg .lt{fill:#FFFFFF;fill-opacity:.6;stroke:#5F5D59;stroke-width:1.5;stroke-dasharray:8 6}
.kfg__lapg .pl{fill:#D9C3A5;stroke:#1C1C1B;stroke-width:1.2}
.kfg__lapg .sl{fill:none;stroke:#1C1C1B;stroke-width:1;stroke-dasharray:3 2}
.kfg__lapg text{font-size:16px;fill:#5F5D59}
.kfg__lapg .lo{fill:#1C1C1B}
.kfg__lapg.is-bad .lt{fill:#F3D6D2;stroke:#B3261E}
.row2--tight{grid-template-columns:1fr 1fr;gap:12px}
@media (min-width:900px){
 .kfg{padding-top:56px;padding-bottom:120px}
 .kfg__steps{padding:28px 32px}
 .kfg__erkl{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:32px}
}

/* Anfrage im Konfigurator */
.konf{border:1px solid var(--secondary);border-radius:var(--radius-md);padding:16px 20px}
.konf ul{margin:8px 0 0;padding-left:18px;display:grid;gap:4px}
.price__cta{display:grid;gap:8px;justify-items:start}
.kfg__tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.kfg__tabs button{padding:8px 14px;background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--radius-md);font:inherit;font-size:15px;font-weight:600;line-height:20px;color:var(--ink);cursor:pointer}
.kfg__tabs button:hover{border-color:var(--ink)}
.kfg__tabs button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.mehr{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.mehr:empty{display:none}
.mehr li{display:grid;gap:8px;padding:12px 14px;border:1px solid var(--secondary);border-radius:var(--radius-md)}
.mehr__kopf{display:flex;align-items:baseline;gap:12px}
.mehr__kopf b{font-size:15px;font-weight:600}
.mehr__btn{padding:0;background:none;border:0;font:inherit;font-size:14px;color:var(--ink);text-decoration:underline;cursor:pointer}
.mehr__btn:first-of-type{margin-left:auto}
.mehr__weg{padding:0;background:none;border:0;font:inherit;font-size:14px;color:var(--ink-muted);text-decoration:underline;cursor:pointer}
.mehr__weg:hover{color:var(--ink)}
.mehr__add{justify-self:start}

/* Gesamtpreis unten (Konfigurator) */
.kfg__preis{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:10px 16px;background:var(--surface);border-top:1px solid var(--secondary);box-shadow:0 -4px 16px rgba(28,28,27,.06);text-align:center}
.kfg__preis p{margin:0}
.kfg__preis b{font-weight:600;margin-right:6px}
.kfg__preisteile{color:var(--ink-muted);margin-top:2px}
body:has(.kfg__preis){padding-bottom:76px}

/* Beratungscall: Terminbuchung zum Aufklappen (Felix 10.10.2026) */
.termin{margin-top:24px;padding:16px;border:1px solid var(--secondary);border-radius:var(--radius-md)}
.termin p{margin:0}
.termin__box{margin-top:12px}
.termin__box summary{list-style:none;cursor:pointer;display:inline-flex}
.termin__box summary::-webkit-details-marker{display:none}
.termin__frame{display:block;width:100%;height:640px;margin-top:12px;border:0;border-radius:var(--radius-md);background:#fff}
.mf-summe{margin:0 0 12px}

/* 3D-Skizze aus Sicht des Publikums */
.kfg__3dbox{margin-top:40px;position:sticky;top:24px}
.kfg__3d{display:block;width:100%;max-width:440px;max-height:62vh;height:auto;margin:8px 0 0}
.kfg__3dtxt{color:var(--ink-muted);margin-top:4px}
/* Übersicht vor dem Absenden (Felix 13.10.2026) */
.uebersicht{margin-top:16px;display:grid;gap:12px}
.uebersicht__blk{padding:14px 16px;border:1px solid var(--secondary);border-radius:12px}
.uebersicht__kopf{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:4px}
.uebersicht__blk p+p{margin-top:4px}
.kfg__diy button{border-style:dashed}
/* Einblendung beim Scrollen (js/reveal.js) */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}