/* D14 Werrewerk · Station 4 Ihr Raum · raum.css · v0.14 Stand 2026-10-11: Maße, Preise und Kennzahlen in der Textschrift der Seite, Etiketten in normaler Schreibung;
   die Schreibmaschinenschrift bleibt allein für die Maßzahlen im Grundriss (.p-text). Rechnung und Bedienung unverändert.
   v0.13: Fließtext, Hinweise, Fehlertexte und Preisposten ab 16 px, Etiketten ab 12 px
   Herkunft: Kopie aus raum/probe/index.html (Probe v0.2, Stand 2026-10-08), Regeln auf #raum begrenzt;
   Probe-Kopf und Uebergabe-Feld entfallen, Ueberschriften als Klassen (.r-h1 bis .r-h4), weil die Seite eine Ebene tiefer gliedert. */
#raum { --grund: #14100c; --flaeche: #1d1813; --linie: rgba(243,236,226,.14); --text: #f3ece2; --leise: rgba(243,236,226,.66);
          --messing: #D4A853; --boden: #2a231c; --stein: #8f8478; --steinkante: #c2b6a5; --fehler: #f0a08a;
          --mono: "JetBrains Mono", ui-monospace, Menlo, monospace; }
#raum * { box-sizing: border-box; }
#raum { margin: 0; background: var(--grund); color: var(--text); font: 16px/1.5 Inter, system-ui, sans-serif; }
#raum button { font: inherit; color: inherit; }
#raum .arbeit { display: grid; grid-template-columns: 420px minmax(0, 1fr); grid-template-areas: "intro buehne" "felder buehne"; grid-template-rows: auto 1fr; }
#raum .intro { grid-area: intro; padding: 40px 32px 0; background: var(--flaeche); border-right: 1px solid var(--linie); }
#raum .felder { grid-area: felder; padding: 24px 32px 40px; background: var(--flaeche); border-right: 1px solid var(--linie); display: flex; flex-direction: column; gap: 20px; }
#raum .buehne { grid-area: buehne; padding: 32px 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 560px; }
#raum .schritt { font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--messing); margin: 0 0 12px; }
#raum .r-h1 { font: 700 30px/1.12 Archivo, sans-serif; margin: 0; letter-spacing: -.01em; }
#raum .r-h2 { font: 700 24px/1.2 Archivo, sans-serif; margin: 0; }
#raum .r-h3 { font: 700 19px/1.2 Archivo, sans-serif; margin: 0; }
#raum .einleitung { margin: 10px 0 0; color: var(--leise); }
#raum .masse { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
#raum .feld label { display: block; font-weight: 500; margin-bottom: 6px; }
#raum .feld label small { display: block; color: var(--leise); font-weight: 400; font-size: 14px; }
#raum .eingabe { display: flex; align-items: center; background: var(--grund); border: 1px solid var(--linie); border-radius: 10px; }
#raum .eingabe:focus-within { border-color: var(--messing); }
#raum .eingabe input { flex: 1; min-width: 0; width: 100%; background: none; border: 0; color: var(--text); font: 600 19px/1 Inter, sans-serif; font-variant-numeric: tabular-nums; padding: 12px 12px; outline: none; }
#raum .eingabe span { padding-right: 12px; color: var(--leise); font-size: 14px; white-space: nowrap; }
#raum .feld.falsch .eingabe { border-color: var(--fehler); }
#raum .fehler { margin: 6px 0 0; color: var(--fehler); font-size: 16px; line-height: 1.4; }
#raum .hinweis { margin: 0; color: var(--leise); font-size: 16px; }
#raum .haupt { appearance: none; border: 0; border-radius: 999px; background: var(--messing); color: #1a140d; font: 600 16px/1 Inter, sans-serif;
           padding: 17px 26px; cursor: pointer; min-height: 52px; transition: filter .2s; }
#raum .haupt:hover { filter: brightness(1.08); }
#raum .haupt:focus-visible, #raum .zweit:focus-visible, #raum .stufe:focus-visible, #raum .punkt:focus-visible, #raum .textknopf:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
#raum .haupt[disabled] { opacity: .6; cursor: progress; }
#raum .zweit { appearance: none; background: none; border: 1px solid var(--messing); color: var(--messing); border-radius: 999px; padding: 13px 20px; min-height: 46px;
           font-weight: 600; cursor: pointer; }
#raum .textknopf { appearance: none; background: none; border: 0; padding: 0; color: var(--messing); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-weight: 500; }
#raum .live { margin: 0; font-size: 16px; color: var(--leise); border-left: 2px solid var(--messing); padding-left: 10px; }
#raum .plan-rahmen { display: flex; justify-content: center; width: 100%; }
#raum .plan-rahmen svg { display: block; max-width: 100%; height: auto; }
#raum .legende { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; font-size: 16px; color: var(--leise); margin: 0; padding: 0; list-style: none; }
#raum .legende li { display: flex; align-items: center; gap: 8px; }
#raum .legende svg { width: 26px; height: 14px; }
#raum .vermerk { margin: 0; font: 16px/1.5 Inter, system-ui, sans-serif; color: var(--leise); text-align: center; max-width: 80ch; }
#raum .p-boden { fill: var(--boden); }
#raum .p-wand { fill: none; stroke: var(--text); }
#raum .p-schnitt { fill: var(--boden); }
#raum .p-fenster { stroke: var(--text); fill: none; }
#raum .p-tuer { stroke: var(--text); fill: none; }
#raum .p-zeile { fill: var(--stein); stroke: var(--steinkante); }
#raum .p-sym { fill: none; stroke: #1d1813; }
#raum .p-hoch { fill: #4a433b; stroke: #c2b6a5; }
#raum .p-kuehl { fill: #e9e1d4; stroke: #1d1813; }
#raum .plan-legende { justify-content: flex-start; margin: 0 0 16px; }
#raum .plan-legende svg { width: 30px; height: 18px; }
#raum .p-dreieck { fill: rgba(212,168,83,.10); stroke: var(--messing); stroke-dasharray: 6 5; }
#raum .p-mass { stroke: var(--leise); }
#raum .p-text { fill: var(--leise); font-family: var(--mono); }
#raum .wand-knopf { cursor: pointer; outline: none; }
#raum .wand-knopf .treffer { fill: transparent; }
#raum .wand-knopf:hover .treffer { fill: rgba(212,168,83,.10); }
#raum .wand-knopf:focus-visible .treffer { fill: rgba(212,168,83,.14); stroke: var(--text); }
#raum .wand-knopf .chip { fill: var(--grund); stroke: var(--messing); }
#raum .wand-knopf[data-zustand="leer"] .chip { fill: var(--grund); stroke: rgba(243,236,226,.45); }
#raum .wand-knopf .chip-text { fill: var(--text); font-family: Inter, sans-serif; font-weight: 600; text-anchor: middle; dominant-baseline: central; }
#raum .ergebnis { padding: 48px 32px 64px; border-top: 1px solid var(--linie); scroll-margin-top: var(--kopf); }
#raum .pruefgang { max-width: 640px; }
#raum .pruefgang ol { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
#raum .pruefgang li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; color: var(--leise); }
#raum .pruefgang li i { width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; border: 1.5px solid var(--linie); display: block; }
#raum .pruefgang li.laeuft i { border-color: var(--messing); border-top-color: transparent; animation: drehen .7s linear infinite; }
#raum .pruefgang li.fertig { color: var(--text); }
#raum .pruefgang li.fertig i { border-color: var(--messing); background: var(--messing); box-shadow: inset 0 0 0 3px var(--grund); }
#raum .pruefgang li small { display: block; color: var(--leise); font-size: 16px; }
@keyframes drehen {to { transform: rotate(360deg); }
 }
#raum .erg-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px 40px; margin-bottom: 24px; }
#raum .erg-kopf p { margin: 6px 0 0; color: var(--leise); }
#raum .werkzeug { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
#raum .stufen-zeile { display: flex; align-items: center; gap: 12px; }
#raum .stufen-zeile > span { font-size: 16px; color: var(--leise); }
#raum .stufen { display: inline-flex; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 999px; padding: 4px; }
#raum .stufe { appearance: none; border: 0; background: none; color: var(--leise); padding: 10px 18px; min-height: 44px; border-radius: 999px; cursor: pointer; font-weight: 500; }
#raum .stufe[aria-checked="true"] { background: var(--messing); color: #1a140d; }
#raum .hoehe { margin: 0; font-size: 16px; }
#raum .hoehe strong { color: var(--messing); font-weight: 600; font-variant-numeric: tabular-nums; }
#raum .karten { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 24px; }
#raum .karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
#raum .karte.vorschlag { border-color: rgba(212,168,83,.55); }
#raum .karte.gewaehlt { border-color: var(--messing); box-shadow: 0 0 0 1px var(--messing); }
#raum .karte-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
#raum .marker { font: 600 14px/1 Inter, sans-serif; color: #1a140d; background: var(--messing); padding: 6px 9px; border-radius: 999px; }
#raum .marker.wahl { background: var(--text); }
#raum .grund { margin: -6px 0 0; font-size: 16px; color: var(--text); border-left: 2px solid var(--messing); padding-left: 10px; }
#raum .karte .plan { background: var(--grund); border-radius: 12px; padding: 12px; display: flex; justify-content: center; }
#raum .kennzahlen { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0; }   /* v0.13: eine Spalte, seit der Erklärtext 16 px hat (zwei Spalten erst ab 1900 px, breit.css) */
#raum .kennzahlen dt { font-size: 14px; color: var(--leise); }
#raum .kennzahlen dd { margin: 2px 0 0; font: 600 17px/1.3 Inter, sans-serif; font-variant-numeric: tabular-nums; }
#raum .kennzahlen dd small { display: block; font: 400 16px/1.4 Inter, sans-serif; color: var(--leise); }
#raum .preis .rahmen { font: 700 22px/1.2 Archivo, sans-serif; color: var(--messing); margin-top: 2px; }
#raum .preis > span { font-size: 14px; color: var(--leise); }
#raum .preis ul { list-style: none; margin: 10px 0 0; padding: 0; font-size: 16px; }
#raum .preis li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px dashed var(--linie); }
#raum .preis li span:last-child { font-variant-numeric: tabular-nums; font-weight: 500; font-size: 16px; white-space: nowrap; }
#raum .randnotiz { font-size: 16px; color: var(--leise); }
#raum .randnotiz .r-h4 { margin: 0 0 6px; font: 600 16px/1.3 Inter, sans-serif; color: var(--text); }
#raum .randnotiz ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
#raum .randnotiz p { margin: 0; }
#raum .karte .aktion { margin-top: auto; padding-top: 4px; }
#raum .karte .aktion .haupt, #raum .karte .aktion .zweit { width: 100%; }
#raum .gewaehlt-status { display: block; text-align: center; padding: 13px; font-weight: 600; color: var(--messing); }
#raum .punkte { display: none; }
#raum .nicht { margin: 24px 0 0; font-size: 16px; color: var(--leise); }
#raum .nicht strong { color: var(--text); font-weight: 500; }
#raum .wahl-leiste { margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; padding: 20px 24px;
                 background: var(--flaeche); border: 1px solid var(--messing); border-radius: 18px; }
#raum .wahl-leiste p { margin: 0; }
#raum .wahl-leiste strong { font: 700 18px/1.3 Archivo, sans-serif; display: block; }
#raum .keine { max-width: 70ch; display: grid; gap: 14px; justify-items: start; }
#raum .keine p { margin: 0; color: var(--leise); }
#raum .keine-knoepfe { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
#raum .ladefehler { margin: 32px; padding: 20px; border: 1px solid var(--fehler); border-radius: 12px; }
@media (min-width: 2000px) {
#raum .ergebnis { padding-left: 48px; padding-right: 48px; }
#raum .arbeit { grid-template-columns: 480px minmax(0, 1fr); }
 }
@media (max-width: 1099px) and (min-width: 900px) {
#raum .karten { gap: 16px; }
#raum .karte { padding: 18px; }
 }
@media (max-width: 899px) {
#raum .arbeit { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "buehne" "felder"; grid-template-rows: none; }
#raum .intro { padding: 24px 16px 4px; border-right: 0; background: none; }
#raum .felder { padding: 16px 16px 32px; border-right: 0; background: none; }
#raum .buehne { padding: 12px 16px; min-height: 0; }
#raum .r-h1 { font-size: 24px; }
#raum .ergebnis { padding: 32px 0 48px; }
#raum .ergebnis > * { padding-left: 16px; padding-right: 16px; }
#raum .erg-kopf, #raum .werkzeug { align-items: flex-start; }
#raum .stufen-zeile { flex-wrap: wrap; }
#raum .karten { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 6px; scrollbar-width: none; }
#raum .karten::-webkit-scrollbar { display: none; }
#raum .karte { flex: 0 0 calc(100% - 32px); scroll-snap-align: center; padding: 18px; }
#raum .punkte { display: flex; justify-content: center; gap: 4px; margin-top: 10px; }
#raum .punkt { appearance: none; border: 0; background: none; width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer; }
#raum .punkt i { width: 8px; height: 8px; border-radius: 50%; background: var(--linie); }
#raum .punkt[aria-current="true"] i { background: var(--messing); }
#raum .wahl-leiste { position: sticky; bottom: 0; margin: 20px 0 0; border-radius: 16px 16px 0 0; padding: 14px 16px; z-index: 3; }
#raum .wahl-leiste .haupt { width: 100%; }
 }
@media (prefers-reduced-motion: reduce) {
#raum .pruefgang li.laeuft i { animation: none; }
#raum .haupt { transition: none; }
 }

/* v0.17 · Direkt über „Ihr Raum“ steht jetzt die Farbwahl, ebenfalls dunkel. Eine feine Linie trennt die beiden Flächen, damit die am Rechner
   in sich rollende Leiste der Farbwahl nicht in den Raumplaner zu laufen scheint. */
#umgestalten + #raum { border-top: 1px solid var(--linie); }