/* Mr. Entrümpler — Quote tool · "Maison" noir+gold theme
   Loads alongside colors_and_type.css (fonts + base tokens). */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,500;1,600&display=swap');

:root{
  --noir:#0C0B09; --noir-2:#15120D; --noir-3:#1C1810; --noir-soft:#11100C;
  --ivory:#F2EADB; --ivory-dim:rgba(242,234,219,.66); --ivory-faint:rgba(242,234,219,.42);
  --orange:#C89B3C; --orange-br:#DCB453; --gold:#C99A4E; --gold-soft:#E2C786;
  --hair:rgba(242,234,219,.13); --hair-mid:rgba(242,234,219,.22);
  --gold-hair:rgba(201,154,78,.42); --gold-hair-2:rgba(201,154,78,.26);
  --serif:'Cormorant Garamond', Georgia, serif;
}
* { box-sizing:border-box; }
body { margin:0; font-family:var(--font-body); color:var(--ivory); background:var(--noir); -webkit-font-smoothing:antialiased; }
button { font-family:inherit; }
::selection{ background:var(--orange); color:#1a1206; }

.app { display:grid; grid-template-columns:360px 1fr; min-height:100vh; }

/* ---------- aside / progress ---------- */
.aside { background:var(--noir-soft); border-right:1px solid var(--gold-hair-2); color:var(--ivory); padding:40px 36px; display:flex; flex-direction:column; }
.aside .brand { display:flex; align-items:center; gap:12px; font:500 21px var(--serif); letter-spacing:.01em; color:var(--ivory); margin-bottom:50px; white-space:nowrap; text-decoration:none; }
.aside .brand img { height:40px; width:auto; }
.prog { display:flex; flex-direction:column; gap:2px; flex:1; }
.pstep { display:flex; gap:16px; align-items:flex-start; padding:13px 0; opacity:.5; transition:opacity var(--dur-base); }
.pstep.active, .pstep.done { opacity:1; }
.pstep__n { width:42px; height:42px; border-radius:50%; border:1px solid var(--gold-hair); display:flex; align-items:center; justify-content:center; font:500 19px/1 var(--serif); font-feature-settings:'lnum' 1, 'tnum' 1; color:var(--gold-soft); flex:none; transition:all var(--dur-base); }
.pstep.active .pstep__n { border-color:var(--gold); color:var(--gold-soft); box-shadow:0 0 0 3px rgba(201,154,78,.16); }
.pstep.done .pstep__n { background:var(--orange); border-color:var(--orange); color:#190f02; transition:none !important; }
.pstep.done .pstep__n svg { stroke-width:3; }
.prog--done .pstep__n { background:var(--orange) !important; border-color:var(--orange) !important; color:#190f02; transition:none !important; }
.pstep__n svg { width:16px; height:16px; }
.pstep__n .ic { color:inherit; }
.pstep.done .pstep__n .ic, .prog--done .pstep__n .ic { color:#190f02; }
.pstep b { font:500 17.5px var(--serif); display:block; line-height:1.3; color:var(--ivory); }
.pstep span { font:400 13px var(--font-body); color:var(--ivory-dim); }
.aside__trust { border-top:1px solid var(--hair); padding-top:24px; margin-top:24px; display:flex; flex-direction:column; gap:13px; }
.aside__trust div { display:flex; align-items:center; gap:12px; font:400 13px var(--font-body); color:var(--ivory-dim); }
.aside__trust svg { width:16px; height:16px; color:var(--gold); flex:none; }
.aside__back { display:inline-flex; align-items:center; gap:9px; margin-top:26px; font:600 12px var(--font-body); letter-spacing:.1em; text-transform:uppercase; color:var(--ivory-faint); text-decoration:none; transition:color var(--dur-base); }
.aside__back:hover { color:var(--gold-soft); }
.aside__back svg { width:15px; height:15px; }

/* ---------- main ---------- */
.main { display:flex; flex-direction:column; }
.bar { display:flex; align-items:center; gap:14px; justify-content:space-between; padding:24px 48px; border-bottom:1px solid var(--hair); background:rgba(12,11,9,.82); backdrop-filter:blur(10px); position:sticky; top:0; z-index:5; }
.bar__back { display:none; align-items:center; justify-content:center; width:42px; height:42px; border-radius:2px; border:1px solid var(--hair-mid); background:transparent; color:var(--ivory); flex:none; }
.bar__back svg { width:20px; height:20px; }
.bar__back:hover { border-color:var(--gold); color:var(--gold-soft); }
.bar__step { font:600 12.5px var(--font-body); color:var(--gold); letter-spacing:.14em; text-transform:uppercase; }
.estimate { display:flex; align-items:center; gap:9px; border:1px solid var(--gold-hair-2); border-radius:2px; padding:9px 17px; }
.estimate svg { width:15px; height:15px; color:var(--gold); }
.estimate span { font:600 12.5px var(--font-body); letter-spacing:.08em; text-transform:uppercase; color:var(--ivory-dim); }

.panel { flex:1; overflow-y:auto; padding:44px 48px 140px; }
.panel__in { max-width:780px; margin:0 auto; }
.panel h2 { font:500 42px var(--serif); color:var(--ivory); margin:0 0 12px; letter-spacing:-.01em; }
.panel h2 em { font-style:italic; color:var(--gold-soft); }
.panel .sub { font:400 17px/1.6 var(--font-body); color:var(--ivory-dim); margin:0 0 44px; }

/* section heading inside a step (Auszug / Einzug / Leistungen) */
.qsec { display:flex; align-items:center; gap:10px; margin:38px 0 4px; padding-bottom:12px;
  border-bottom:1px solid var(--hair-mid); font:600 13px var(--font-body); letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold-soft); }
.qsec:first-of-type { margin-top:8px; }
.qsec svg { width:17px; height:17px; color:var(--gold); }

/* eyebrow inside panel (if used) */
.panel .eyebrow{ display:inline-flex; align-items:center; gap:12px; font:600 11px var(--font-body); letter-spacing:.28em; text-transform:uppercase; color:var(--gold); margin:0 0 20px; }
.panel .eyebrow::before{ content:""; width:28px; height:1px; background:var(--gold-hair); }

/* option cards */
.opts { display:grid; gap:16px; }
.opts.cols2 { grid-template-columns:1fr; }
@media (min-width:1080px){ .opts.cols2 { grid-template-columns:1fr 1fr; } }
.opt.wide { grid-column:1 / -1; }
.opts-note { display:flex; align-items:center; justify-content:center; gap:10px; margin:26px 0 0;
  font:400 13px var(--font-body); color:var(--ivory-dim); letter-spacing:.01em; }
.opts-note svg { width:15px; height:15px; color:var(--gold); flex:none; }
.opt { display:flex; align-items:center; gap:22px; background:var(--noir-3); border:1px solid var(--hair); border-radius:2px; padding:28px 30px; cursor:pointer; transition:all var(--dur-base) var(--ease-out); text-align:left; }
.opt:hover { border-color:var(--gold-hair); }
.opt.sel { border-color:var(--gold); background:rgba(201,154,78,.06); box-shadow:inset 0 0 0 1px var(--gold-hair); }
.opt .tile { width:58px; height:58px; border-radius:2px; border:1px solid var(--gold-hair); background:rgba(201,154,78,.05); color:var(--gold); display:flex; align-items:center; justify-content:center; flex:none; transition:all var(--dur-base); }
.opt.sel .tile { background:var(--orange); border-color:var(--orange); color:#190f02; }
.opt .tile svg { width:26px; height:26px; }
.opt .ot { flex:1; }
.opt .ot b { font:500 22px var(--serif); color:var(--ivory); display:block; }
.opt .ot span { font:400 14px/1.5 var(--font-body); color:var(--ivory-dim); margin-top:2px; display:block; }
.opt .chk { width:26px; height:26px; border-radius:50%; border:1px solid var(--hair-mid); flex:none; display:flex; align-items:center; justify-content:center; transition:all var(--dur-base); }
.opt.sel .chk { background:var(--orange); border-color:var(--orange); }
.opt .chk svg { width:14px; height:14px; color:#190f02; opacity:0; }
.opt.sel .chk svg { opacity:1; }

/* fields */
.ic { display:inline-flex; align-items:center; justify-content:center; }
.frow { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:26px; }
.field { margin-top:26px; margin-bottom:0; }
.frow .field { margin-top:0; }
.field label { display:block; font:600 12.5px var(--font-body); letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-bottom:10px; }
.field input { width:100%; font:400 15px var(--font-body); color:var(--ivory); background:var(--noir-2); border:1px solid var(--hair-mid); border-radius:2px; padding:14px 15px; transition:border-color var(--dur-base); }
.field input::placeholder { color:var(--ivory-faint); }
.field input:focus { outline:none; border-color:var(--gold); }
.field textarea { width:100%; font:400 15px var(--font-body); color:var(--ivory); background:var(--noir-2); border:1px solid var(--hair-mid); border-radius:2px; padding:14px 15px; min-height:112px; resize:vertical; line-height:1.55; transition:border-color var(--dur-base); }
.field textarea::placeholder { color:var(--ivory-faint); }
.field textarea:focus { outline:none; border-color:var(--gold); }
.lbl-hint { color:var(--ivory-faint); font-weight:500; text-transform:none; letter-spacing:0; }

/* size slider */
.slide { background:var(--noir-2); border:1px solid var(--hair); border-radius:2px; padding:24px; margin-top:26px; }
.field > .slide { margin-top:12px; }
.slide__val { display:flex; align-items:baseline; gap:9px; margin-bottom:16px; }
.slide__val b { font:500 40px var(--serif); color:var(--gold-soft); }
.slide__val span { font:500 14px var(--font-body); color:var(--ivory-dim); }
input[type=range] { -webkit-appearance:none; width:100%; height:2px; border-radius:2px; background:var(--hair-mid); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:var(--orange); cursor:pointer; border:none; box-shadow:0 0 0 4px rgba(224,138,43,.18); }
input[type=range]::-moz-range-thumb { width:22px; height:22px; border-radius:50%; background:var(--orange); cursor:pointer; border:none; }
.slide__sc { display:flex; justify-content:space-between; font:500 11px var(--font-mono); color:var(--ivory-faint); margin-top:10px; }

/* chips */
.chips { display:flex; gap:11px; flex-wrap:wrap; }
.chip { font:500 13px var(--font-body); letter-spacing:.02em; padding:12px 20px; border-radius:2px; border:1px solid var(--hair-mid); background:transparent; color:var(--ivory-dim); cursor:pointer; transition:all var(--dur-base); }
.chip:hover { border-color:var(--gold-hair); color:var(--ivory); }
.chip.sel { background:var(--orange); border-color:var(--orange); color:#190f02; font-weight:600; }

/* footer nav */
.navbar { position:fixed; bottom:0; left:360px; right:0; background:var(--noir-soft); border-top:1px solid var(--hair); padding:20px 48px; display:flex; align-items:center; justify-content:space-between; z-index:6; }
.btn { display:inline-flex; align-items:center; gap:10px; font:600 14.5px var(--font-body); letter-spacing:.08em; text-transform:uppercase; border-radius:2px; padding:16px 32px; border:1px solid transparent; cursor:pointer; transition:all var(--dur-base) var(--ease-out); }
.btn svg { width:17px; height:17px; }
.btn--primary { background:var(--orange); color:#190f02; border-color:var(--orange); }
.btn--primary:hover { background:var(--orange-br); border-color:var(--orange-br); transform:translateY(-2px); }
.btn--primary:disabled { background:transparent; color:var(--ivory-faint); border-color:var(--hair); cursor:not-allowed; transform:none; }
.btn--ghost { background:transparent; color:var(--ivory-dim); border:none; }
.btn--ghost:hover { color:var(--gold-soft); }

/* success */
.done { text-align:center; max-width:540px; margin:48px auto; }
.done__ic { width:88px; height:88px; border-radius:50%; border:1px solid var(--gold-hair); background:rgba(224,138,43,.08); color:var(--orange); display:flex; align-items:center; justify-content:center; margin:0 auto 26px; animation:pop .5s var(--ease-spring); }
.done__ic svg { width:42px; height:42px; }
@keyframes pop { from { transform:scale(.5); opacity:0 } }
.done h2 { font:500 40px var(--serif); color:var(--ivory); margin:0 0 12px; }
.done h2 em { font-style:italic; color:var(--gold-soft); }
.done p { font:400 16px/1.66 var(--font-body); color:var(--ivory-dim); margin:0 0 30px; }
.summary { background:var(--noir-2); border:1px solid var(--hair-mid); border-radius:2px; padding:28px; text-align:left; }
.summary h4 { font:600 11px var(--font-body); text-transform:uppercase; letter-spacing:.18em; color:var(--gold); margin:0 0 18px; }
.summary .sr { display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--hair); font:400 15px var(--font-body); }
.summary .sr:last-child { border:none; }
.summary .sr span { color:var(--ivory-dim); }
.summary .sr b { color:var(--ivory); font-weight:500; }
.summary .sr.total b { color:var(--gold-soft); font-family:var(--font-mono); font-size:17px; }
.done__actions { margin-top:28px; display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }
.done__actions .btn { text-decoration:none; }
.done__hint { display:flex; align-items:center; gap:9px; justify-content:center; font:400 13px var(--font-body); color:var(--ivory-dim); margin:18px 0 0; }
.done__hint svg { width:15px; height:15px; color:var(--gold); flex:none; }

@media (max-width:860px){
  .app { grid-template-columns:1fr; }
  .aside { display:none; }
  .navbar { left:0; }
  .bar__back { display:inline-flex; }
  .frow { grid-template-columns:1fr; }
  .opts.cols2 { grid-template-columns:1fr; }
  .panel { padding:36px 24px 140px; }
  .bar { padding:20px 24px; }
}