/* =====================================================================
   Balkonstudio · Balkonbau Lüneburg – Farbschema „Nachtstahl“
   Wird von studio_marke.py als css/marke.css hinter studio.css eingebunden
   (nur das Studio, nicht das Backoffice). Gleiche Welt wie die Website:
   Nachtstahl-Grund, Licht-Schrift, Messing nur für Handlung und Auswahl,
   Haarlinien statt Schatten, fast rechtwinklige Kanten, Michroma-Versalien
   für Titel, Albert Sans für alles Lesbare. Quelle: website/DESIGN.md.
   ===================================================================== */
@font-face { font-family: 'Michroma'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/michroma-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Michroma'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/michroma-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  color-scheme: dark;
  /* Markenfarben (website/DESIGN.md) */
  --nacht: #0f1519; --tief: #1a232a; --tief-2: #212c34; --tief-3: #2a3740;
  --licht: #eeeae2; --licht-g: #d6d1c8; --stahl-hell: #a8b2b8; --stahl: #7f8b92;
  --messing: #c6a26a; --messing-hell: #d9bb8a;
  --platte: rgb(15 21 25 / .86);
  --marke: 'Michroma', 'Eurostile', 'Microgramma', sans-serif;

  /* Studio-Variablen auf Nachtstahl umgestellt */
  --ink: var(--licht); --ink-2: var(--licht-g); --muted: var(--stahl-hell); --faint: var(--stahl);
  --line: rgb(238 234 226 / .12); --line-2: rgb(238 234 226 / .26);
  --surface: var(--tief); --surface-2: var(--tief-2); --surface-3: var(--tief-3); --bg: var(--nacht);
  --rot: var(--messing); --rot-d: var(--messing-hell); --rot-hell: rgb(198 162 106 / .14);
  --blau: #8fb0ff; --blau-hell: rgb(143 176 255 / .14);
  --gruen: #6fcf97; --gruen-hell: rgb(111 207 151 / .12);
  --gelb: #e0a650; --gelb-d: #e8b765; --gelb-hell: rgb(224 166 80 / .14);
  --kopf: var(--nacht); --kopf-2: var(--tief);
  --r-sm: 2px; --r: 2px; --r-lg: 2px;
  --sh-1: none; --sh-2: none; --sh-3: none;
}

/* ---------- Browser-Flächen ---------- */
body { background: var(--nacht); color: var(--licht); }
::selection { background: var(--messing); color: var(--nacht); }
input, textarea { caret-color: var(--messing); }
:focus-visible { outline-color: var(--messing); }
.zahl:has(input:focus-visible) { outline-color: var(--messing); }
.leiste-oben :focus-visible, .toast :focus-visible, .tipp :focus-visible { outline-color: var(--messing); }
* { scrollbar-color: #3a4750 transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #3a4750; border: 2px solid var(--tief); border-radius: 6px; }
input, select, textarea { background-color: var(--tief); color: var(--licht); }
select option { background: var(--tief); color: var(--licht); }
a { color: var(--messing-hell); }
button.link, .link, .zeile button.link { color: var(--messing-hell); }
.num, .preisstatus .v, .zeile .wert, .karte-preis, .zahl input { font-variant-numeric: tabular-nums; }

/* ---------- Titel in Michroma-Versalien ---------- */
.panel-titel, .dialog-kopf h2, .schublade-kopf h2, .einstieg-kopf h2 {
  font-family: var(--marke); font-weight: 400; text-transform: uppercase; letter-spacing: .06em; line-height: 1.3;
}
.panel-titel { font-size: 17px; margin-top: 4px; }
.dialog-kopf h2, .schublade-kopf h2 { font-size: 15px; }
.einstieg-kopf h2 { font-size: 17px; letter-spacing: .05em; }
.abschnitt-titel { color: var(--stahl-hell); font-weight: 600; letter-spacing: .14em; }
.fortschritt-text { color: var(--messing); letter-spacing: .12em; }

/* ---------- Rahmen: Kopf, Navigation, Auswahlbereich, Fuß ---------- */
.leiste-oben { color: var(--licht); border-bottom: 1px solid var(--line); }
.modus { background: var(--tief); border: 1px solid var(--line); }
.modus button[aria-pressed="true"] { background: var(--rot-hell); color: var(--messing-hell); box-shadow: inset 0 0 0 1px var(--messing); }
.varianten-wahl { background: var(--tief); color: var(--licht); border-color: var(--line-2); }
.navi { background: var(--nacht); border-right-color: var(--line); }
.navi-punkt[aria-current="step"] { background: var(--rot-hell); box-shadow: inset 2px 0 0 var(--messing); }
.navi-punkt[aria-current="step"] .navi-titel { color: var(--licht); }
.navi-bild { border-color: var(--line); }
.panel { background: var(--tief); border-left-color: var(--line); }
.panel-kopf { border-bottom-color: var(--line); }
.leiste-unten { background: var(--nacht); border-top: 1px solid var(--line); }
.preisstatus .v { color: var(--licht); font-weight: 700; letter-spacing: 0; }
@keyframes preis-neu { 0% { color: var(--messing-hell); } 100% { color: var(--licht); } }

/* ---------- Knöpfe ---------- */
.btn-primaer { background: var(--messing); color: var(--nacht); }
.btn-sekundaer { background: transparent; border-color: var(--line-2); color: var(--licht); }
.leiste-oben .rueckruf { color: var(--licht); border-color: var(--line-2); }
@media (hover: hover) and (pointer: fine) {
  .btn-primaer:hover:not(:disabled) { background: var(--messing-hell); color: var(--nacht); }
  .btn-sekundaer:hover:not(:disabled), .leiste-oben .rueckruf:hover { border-color: var(--messing); background: transparent; color: var(--licht); }
  .karte:hover:not(.gesperrt), .material:hover, .chip:hover, .extra-karte:hover { border-color: var(--stahl-hell); }
  .navi-punkt:hover { background: var(--tief); }
  .werkzeug:hover { color: var(--licht); background: var(--tief-2); }
  .segment button:hover:not([aria-pressed="true"]) { color: var(--licht); }
}

/* ---------- Auswahl: Messing als Ring und Schrift, nie als Fläche ---------- */
.karte, .material, .extra-karte { background: var(--tief); border-color: var(--line-2); }
.karte[aria-pressed="true"], .karte.aktiv, .material[aria-pressed="true"], .extra-karte[aria-pressed="true"] { border-color: var(--messing); box-shadow: inset 0 0 0 1px var(--messing); }
.karte .haken { background: var(--messing); color: var(--nacht); }
.karte .marke { background: var(--nacht); color: var(--licht); border: 1px solid var(--line-2); }
.karte-preis.plus { color: var(--licht-g); }
.karte-bild, .material-bild { border-bottom-color: var(--line); }
.segment { background: var(--nacht); border-color: var(--line); }
.segment button[aria-pressed="true"] { background: var(--rot-hell); color: var(--messing-hell); box-shadow: inset 0 0 0 1px var(--messing); }
.chip { background: transparent; border-color: var(--line-2); color: var(--licht-g); }
.chip[aria-pressed="true"] { background: var(--rot-hell); color: var(--messing-hell); border-color: var(--messing); }
.extras-reiter button { background: transparent; }
.extras-reiter button[aria-pressed="true"] { background: var(--rot-hell); border-color: var(--messing); color: var(--messing-hell); }
.standardmasse button { background: transparent; }
.standardmasse button[aria-pressed="true"] { border-color: var(--messing); color: var(--messing-hell); }
.farbfeld { border-color: rgb(238 234 226 / .18); }
.farbfeld[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--tief), 0 0 0 4px var(--messing); }
.schalter input { background: var(--tief-3); border: 1px solid var(--line-2); }
.schalter input::after { top: 2px; left: 2px; background: var(--licht); }
.schalter input:checked { background: var(--messing); border-color: var(--messing); }
.schalter input:checked::after { background: var(--nacht); }
.eig { background: transparent; border-color: var(--line); color: var(--stahl-hell); }
.zahl { background: var(--nacht); }
.zahl button { background: var(--tief-2); color: var(--licht-g); }
.zahl input { background: transparent; color: var(--licht); }
.zahl .einheit { background: transparent; }
.eingabe, .auswahlfeld { background: var(--nacht); color: var(--licht); }
.empfehlung-haken { color: var(--nacht); }
.planungshilfe { background: var(--tief-2); color: var(--licht-g); border: 1px solid var(--line); }
.grundriss .haus { fill: #33414a; }

/* ---------- Hinweise ---------- */
.hinweis[data-art="konflikt"] { background: var(--rot-hell); color: var(--messing-hell); }
.hinweis[data-art="pruefen"] { background: var(--blau-hell); color: #c3d3ff; }
.hinweis[data-art="fehlt"] { background: var(--gelb-hell); color: #f1cf96; }
.hinweis-aktionen .btn { background: transparent; }
.bearbeite { background: var(--blau-hell); color: #c3d3ff; }
.marke-art[data-art="offen"] { color: var(--gelb-d); }
.marke-art[data-art="geschaetzt"] { color: #c3d3ff; }

/* ---------- 3D-Fläche: Abenddämmerung wie auf der Website ---------- */
.buehne { background: linear-gradient(180deg, #4d6690 0%, #8a86a3 42%, #e6a170 74%, #f6c690 100%); }
.lade { color: var(--licht-g); }
.spinner { border-color: rgb(238 234 226 / .16); border-top-color: var(--messing); }
.bereich { background: var(--platte); border-color: var(--line); color: var(--licht); }
.bereich select { background: var(--tief-2); color: var(--licht); }
.werkzeuge { background: var(--platte); border-color: var(--line); }
.werkzeug { color: var(--stahl-hell); }
.werkzeug[aria-pressed="true"] { background: var(--rot-hell); color: var(--messing-hell); }
.werkzeug-trenner { background: var(--line); }
.werkzeug-menue { background: var(--tief); border-color: var(--line-2); }
.szene-blase { background: var(--platte); color: var(--licht); border: 1px solid var(--line-2); }
.szene-blase::after { border-top-color: rgb(15 21 25 / .86); }
.szene-tip { background: var(--nacht); color: var(--licht); border: 1px solid var(--line-2); }
.mass-label { background: var(--platte); color: var(--licht); }
.mass-label.klickbar { background: var(--tief); color: var(--licht); border-color: var(--messing); }
.mass-editor { background: var(--tief); border-color: var(--line-2); }
.mass-editor input { background: var(--nacht); color: var(--licht); border-color: var(--line-2); }

/* ---------- Schwebende Ebenen: Haarlinie statt Schatten ---------- */
.schublade { background: var(--tief); border-left: 1px solid var(--line-2); }
.schublade-kopf, .dialog-kopf, .dialog-fuss { border-color: var(--line); }
.dialog-hg { background: rgb(6 9 12 / .62); }
.dialog { background: var(--tief); border: 1px solid var(--line-2); }
.einstieg-hg { background: rgb(6 9 12 / .42); }
.einstieg { background: var(--tief); border: 1px solid var(--line-2); border-top: 1px solid var(--messing); }
.einstieg-fuss { border-top-color: var(--line); }
.einstieg-nr { background: transparent; color: var(--messing); border: 1px solid var(--messing); font-weight: 600; font-variant-numeric: tabular-nums; }
.einstieg-punkte span { background: var(--line-2); }
.einstieg-punkte span.fertig { background: rgb(198 162 106 / .55); }
.einstieg-punkte span.an { background: var(--messing); }
.fortschritt-balken button { background: var(--line-2); }
.fortschritt-balken button.fertig { background: rgb(198 162 106 / .55); }
.toast { background: var(--tief-2); color: var(--licht); border: 1px solid var(--line-2); }
.toast button { color: var(--messing-hell); }
.tipp { background: var(--tief-2); color: var(--licht); border: 1px solid var(--line-2); border-top-color: var(--messing); }
.tipp p { color: var(--licht-g); }
.tipp-fuss .klein { color: var(--stahl-hell); }
.tipp .link { color: var(--messing-hell); }
.tipp-rahmen { border-color: var(--messing); }
.preis-delta { background: var(--licht); color: var(--nacht); }
.preis-delta.minus { background: var(--gruen); color: var(--nacht); }

/* ---------- Kanten: fast rechtwinklig wie Stahlprofil ---------- */
.modus, .modus button, .bereich, .bereich select, .chip, .bearbeite, .planungshilfe, .preis-delta, .extras-reiter button,
.segment button, .werkzeuge, .werkzeug, .werkzeug-menue button, .standardmasse button, .toast, .tipp, .farbfeld,
.karte .marke, .material .abverkauf, .marke-art, .mass-label, .szene-tip, .szene-blase, .eig, .navi-bild, .schalter input { border-radius: 2px; }
.schalter input::after { border-radius: 1px; }

@media (max-width: 820px) {
  .panel { background: var(--tief); border-radius: 0; border-top: 1px solid var(--line-2); box-shadow: none; }
  .navi { background: var(--nacht); border-bottom: 1px solid var(--line); }
  .navi-punkt { border-radius: 2px; border-color: var(--line-2); }
  .navi-punkt[aria-current="step"] { box-shadow: inset 0 0 0 1px var(--messing); }
  .panel-titel { font-size: 15px; }
  .einstieg-kopf h2 { font-size: 15px; }
}