/* MassKante · Werkzeugseiten im hellen Rahmen
   Konfigurator, Warenkorb, Messanleitung und Messprotokoll stammen aus der alten dunklen
   Seite (site.css). Diese Datei wird nach neu.css und nach konfigurator.css bzw. messen.css
   geladen. Sie bildet die alten Variablen auf die CI-Werte ab (CI.md, Abschnitt 3) und
   baut die wenigen site.css-Regeln hell nach, die die Werkzeugseiten brauchen.
   Hell ist die Grundstimmung (Kalk, Richtung B seit 19.10.2026), dunkel bleibt nur die 3D-Bühne (.k-stage). */

/* ---------- Alte Namen → helle Werte ---------- */
:root {
  --text: var(--ink);
  --text-muted: var(--muted);
  --washi: var(--ink);
  --washi-hot: var(--ink);
  --washi-2: var(--paper-2);
  --rib: var(--oak);
  --rib-dim: var(--line);
  --rib-ink: var(--oak-deep);
  --room: var(--paper);
  --room-edge: var(--paper-2);
  --room-mid: var(--paper);
  --paper-ink: var(--ink);
  --paper-muted: var(--muted);
  --font: var(--sans);
  --sec-y: var(--section);
  --maxw: var(--container);
  --h1: clamp(2.2rem, 4.4vw, 3.6rem);
  --h2: clamp(1.7rem, 3vw, 2.5rem);
  --h3: 1.3rem;
  --lead: clamp(1.1rem, 1.3vw, 1.25rem);
  --hero-pad-top: clamp(32px, 5vw, 64px);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --head-h: 76px; /* klebriger Kopf aus neu.css (.site-head .wrap min-height), auf allen Breiten */
}

/* ---------- Grundlagen, die site.css setzte und neu.css nicht ---------- */
:where(#inhalt) :is(ul, ol) { list-style: none; margin: 0; padding: 0; }
:where(#inhalt) p { margin: 0; }
:where(#inhalt) address { font-style: normal; }
:where(#inhalt) svg { display: block; max-width: 100%; }
:where(#inhalt) :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
.k-field input[type="range"]:focus-visible { outline-color: var(--ink); }
.k-num:focus-within { border-bottom-color: var(--ink); }
:where(#inhalt) button { font-family: inherit; }

/* ---------- Kopf: konfigurator.css hatte den alten Warenkorb-Link umgestaltet, hier gilt neu.css ---------- */
.head-cart { margin-left: 0; display: inline-flex; gap: 0; width: 42px; height: 42px; padding: 0; font-size: 1rem; color: var(--ink); justify-content: center; }
.head-cart:hover, .head-cart[aria-current="page"] { color: var(--ink); background: var(--paper-2); }
.head-cart::before { content: none; }
.head-cart .cart-n, .head-cart.has-items .cart-n { border: 0; color: var(--paper); background: var(--ink); }
.head-cart .cart-n:empty, .head-cart .cart-n[data-n="0"] { display: none; }
.head-actions .menu-btn { margin-left: 0; }

/* ---------- Bausteine aus site.css, hell nachgebaut ---------- */
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-line-ink { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-line-ink:hover { background: rgba(26, 25, 23, .05); }
.link-quiet { display: inline-block; color: var(--ink); text-decoration: underline; text-decoration-color: var(--messing); text-underline-offset: 4px; font-weight: 480; }
.link-quiet:hover { text-decoration-color: var(--ink); }
.stamp-label { font: 500 .66rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.sheet { color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.page-shot { position: relative; margin: 0; }
.page-shot img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.page-shot figcaption { position: absolute; left: 16px; bottom: 16px; background: rgba(26, 25, 23, .78); color: var(--paper); font: 500 .72rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 8px 10px; border-radius: 3px; }
.small-head { margin-top: 40px; font-size: var(--h3); font-weight: 480; letter-spacing: 0; color: var(--ink); }
.checklist { margin-top: 16px; counter-reset: c; display: grid; max-width: 36rem; }
.checklist li { counter-increment: c; display: grid; grid-template-columns: 48px 1fr; padding: 16px 0; border-top: 1px solid var(--line); color: var(--ink-2); }
.checklist li::before { content: counter(c); font: 400 1.3rem/1 var(--serif); color: var(--messing); padding-top: 2px; }
.checklist li:last-child { border-bottom: 1px solid var(--line); }
.mono-num { font: 500 clamp(1.8rem, 3vw, 2.6rem)/1 var(--mono); color: var(--ink); letter-spacing: -.02em; }
.prose p + p { margin-top: 16px; }
.sub-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(40px, 6vw, 104px); }
.bullets { display: grid; margin-top: 8px; padding: 0; color: var(--ink-2); }
.bullets li { padding: 14px 0; border-top: 1px solid var(--line); }
.bullets li:last-child { border-bottom: 1px solid var(--line); }
.bullets b { font-weight: 520; color: var(--ink); }
.field { display: grid; gap: 8px; margin-bottom: 22px; align-content: start; }
.field > label { margin-bottom: 0; }
.page-hero { padding: clamp(40px, 6vw, 80px) 0 clamp(48px, 6vw, 88px); }
.page-hero h1 { max-width: 16ch; }
.page-hero .lead { margin-top: 20px; max-width: 36rem; }
.page-hero .btn-row { margin-top: 32px; }

/* Abschluss: wie .finale der neuen Seiten, nur mit .finale-light und .btn-row aus dem alten Aufbau */
.finale { background: var(--paper-2); border-top: 1px solid var(--line); padding: var(--section) var(--gutter); text-align: center; }
.finale-light { position: static; max-width: var(--container); margin: 0 auto; padding: 0; background: none; box-shadow: none; color: var(--ink); }
.finale-light::before { content: none; }
.finale h2 { font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.04; font-weight: 400; max-width: 16ch; margin: 0 auto 24px; }
.finale .btn-row { justify-content: center; margin-top: 0; }

/* Fragen: neu.css kennt .faq nur als schmale Liste, hier ist .faq der ganze Abschnitt */
section.faq { max-width: none; padding: var(--section) 0; }
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 104px); }
.faq h2 { font-size: var(--h2); line-height: 1.06; }
.faq-head .link-quiet { margin-top: 24px; }
.faq-list { border-top: 1px solid var(--line); }
.faq details { border-top: 0; border-bottom: 1px solid var(--line); }
.faq summary { padding: 20px 0; font-size: 1.1rem; font-weight: 500; color: var(--ink); }
.faq summary::after { margin-top: 0; }
.faq details p { padding: 0 48px 24px 0; color: var(--ink-2); max-width: 68ch; }

/* ---------- Konfigurator ---------- */
.konf { background: var(--paper); }

/* Die Bühne bleibt dunkel: alte Werte nur hier, alles darin (Toolbar, Etiketten, Hinweise) liest sie */
.k-stage {
  --text: #EEE7DA; --text-muted: #ABA292; --washi: #F7EFDF; --washi-hot: #FFF9EE;
  --rib: #C9A97C; --rib-dim: rgba(201, 169, 124, .28); --room: #171513; --room-edge: #111213; --error: #F08A6C;
  color: var(--text);
  background: radial-gradient(ellipse 70% 65% at 50% 46%, #2A241E 0%, #171513 52%, #111213 100%);
}
.k-stage.is-raum { background: radial-gradient(ellipse 90% 80% at 50% 40%, #3A352F 0%, #23201C 70%, #111213 100%); }

/* Bedienfeld */
.k-panel { background: var(--paper); border-left: 1px solid var(--line); }
.k-intro h1 { font-weight: 400; color: var(--ink); }
.k-intro p { color: var(--ink-2); }
.k-n { color: var(--messing); }
.k-prod button { border-radius: 0; }
.k-prod svg { color: var(--muted); }
.k-prod small { color: var(--muted); }
.k-prod button:hover svg { color: var(--ink-2); }
.k-prod button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.k-prod button[aria-pressed="true"] svg { color: var(--ink); }
.k-field input[type="range"]::-webkit-slider-thumb { background: var(--ink); }
.k-field input[type="range"]::-moz-range-thumb { background: var(--ink); }
.k-num { border-bottom-color: var(--oak); }
.k-num:hover { border-bottom-color: var(--ink); }
.stepper button { font-weight: 400; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.stepper button:hover { border-color: var(--ink); background: var(--paper-2); }
.mod:hover, .mod:focus-within { background: linear-gradient(90deg, rgba(26, 25, 23, .03), rgba(26, 25, 23, 0)); }
.hinge em { color: var(--muted); }
.opt, .pick, .hb { background: #fff; border-radius: var(--radius); }
.opt:hover, .pick:hover, .hb:hover { border-color: var(--ink); color: var(--ink); }
.opt[aria-pressed="true"], .pick[aria-pressed="true"], .hb[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--ink); }
.opt:disabled { background: transparent; }
.opt:disabled:hover { border-color: var(--line); }
.sw { border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(26, 25, 23, .14); }
.sw[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 2px; }
.swname code { color: var(--muted); }
.k-panel .swatches { margin: 0; }
.toggle input { background: #fff; border-color: var(--muted); border-radius: var(--radius); }
.toggle input:hover { border-color: var(--ink); }
.toggle input:checked { background: var(--ink); border-color: var(--ink); }
.toggle input::after { border-color: #fff; }
.breakdown div { color: var(--ink-2); }
.breakdown .tot, .breakdown .tot span:last-child { color: var(--ink); }
details.intern { border-radius: var(--radius); }

/* Hinweis auf den nächsten Schritt und Preisleiste */
.k-more { color: var(--ink); background: linear-gradient(180deg, rgba(251, 248, 242, 0), var(--paper) 78%); }
.k-more:hover, .k-more:focus-visible { color: var(--oak-deep); }
.k-pricebar { background: rgba(251, 248, 242, .97); border-top: 1px solid var(--line); border-left: 1px solid var(--line); box-shadow: 0 -16px 32px -24px rgba(26, 25, 23, .25); }
.k-price output { font: 500 1.75rem/1.1 var(--mono); font-feature-settings: "tnum"; color: var(--ink); }
.k-price output.is-pending { color: var(--muted); font: 400 1.05rem/1.4 var(--sans); }
.k-added { border-bottom-color: var(--line); }
.k-save { border-bottom-color: var(--line); }
.k-save input { border-color: var(--line); background: var(--paper); color: var(--ink); }
.k-close { border-radius: var(--radius); }
.k-close:hover { color: var(--ink); border-color: var(--line); background: var(--paper-2); }

/* ---------- Warenkorb ---------- */
.cart h1 { font-weight: 400; }
.cart-chips span { border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(26, 25, 23, .14); }
.cart-empty p { color: var(--ink-2); }
.cart .render-note { font: 400 .9rem/1.5 var(--sans); letter-spacing: 0; text-transform: none; color: var(--muted); }
.cart-sum { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.cart-sum .toggle { margin-top: 16px; }
.cart-remove { border-radius: 0; }

/* ---------- Messanleitung ---------- */
.m-n { background: #fff; border: 1px solid var(--ink); color: var(--ink); }
.m-label { color: var(--muted); }
.m-service-sec { padding: 0 0 clamp(48px, 6vw, 88px); }
.m-service .m-label { color: var(--messing); }
.m-service-lead { color: var(--ink-2); }
.m-service-facts li { border-top-color: var(--line); }
.m-service-facts li:last-child { border-bottom-color: var(--line); }
.m-service-facts span { color: var(--ink-2); }
.m-toc a { color: var(--ink-2); background: #fff; border-color: var(--line); border-radius: var(--radius); }
.m-toc a::before { color: var(--messing); }
.m-toc a:hover { border-color: var(--ink); color: var(--ink); }
.m-tools .bullets { color: var(--ink-2); }
.m-tools .bullets b { color: var(--ink); }
.m-step .prose, .m-example, .m-traps-head p, .m-traps p, .m-calc-head p { color: var(--ink-2); }
.m-tips li { color: var(--ink-2); }
.m-tips li::before { background: var(--oak); }
.m-tips b, .m-example b { color: var(--ink); }
.m-keys p { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); color: var(--ink-2); }
.m-kipp { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); color: var(--ink-2); }
.m-formula { border-left: 3px solid var(--messing); border-radius: 0 var(--radius) var(--radius) 0; background: var(--paper); color: var(--ink); }
.m-formula span:first-child { color: var(--ink); }
.m-group legend { color: var(--ink); font-weight: 520; }
.m-calc .field { margin-bottom: 16px; }
.m-three .field > label { color: var(--muted); }
.m-types span { background: #fff; }
.m-calc-out { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.m-notes li { color: var(--ink-2); }
.m-notes li::before { background: var(--oak); }
.m-notes li.is-warn { color: var(--error); }
.m-notes li.is-warn::before { background: var(--error); }
.m-notes li.is-ok::before { background: var(--ok); }
.m-count { color: var(--ink); }
/* Abschnitte wechseln zwischen Papier und Papier 2 */
#breite, #tiefe, #stolperfallen, #rechner { background: var(--paper-2); }

/* Messprotokoll */
.m-proto-page { padding: clamp(32px, 5vw, 56px) 0 var(--section); }
.m-proto-bar { margin-bottom: 20px; }

/* ---------- Kleinere Bildschirme ---------- */
@media (max-width: 1000px) {
  :root { --head-h: 76px; }
}
@media (max-width: 1000px) {
  .sub-grid, .faq-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .faq details p { padding-right: 0; }
  .m-formula { padding: 16px 18px; font-size: .88rem; overflow-wrap: anywhere; }
  .m-keys p { padding: 20px; }
  .m-kipp { padding: 20px; }
  .m-proto-head { flex-wrap: wrap; }
}

/* ---------- Druck ---------- */
@media print {
  .promise-bar, .head-actions, .k-pricebar { display: none !important; }
  .sheet, .m-calc-out, .m-keys p, .m-kipp { box-shadow: none !important; }
}