/* Betriebsleitung GO · Raumkarte. Farbwelt und Bildidee nach Raumdeuter-Raumkarte v0.2 und den Renderings iteration_2 (nur Inspiration, keine Bilddatei im Einsatz). */
:root{--bg:#f5efe4;--surface:#fffaf0;--ink:#25251f;--muted:#6b6457;--line:#d7c8b4;--amber:#c98a28;--amber-dark:#a8660f;
  --sage:#6d8a62;--green:#345c37;--terra:#b26843;--focus:#1d4ed8;--shadow:0 22px 60px rgba(80,61,34,.14)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{min-height:100%}
body{margin:0;color:var(--ink);font-family:Inter,"Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif;font-size:15px;line-height:1.45;
  background:radial-gradient(circle at 52% 22%,rgba(255,255,255,.82),transparent 36%),linear-gradient(180deg,#fbf6ec 0%,var(--bg) 62%,#efe3d1 100%);background-attachment:fixed}
.nur-vorlesen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
a{color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px}

.kopf{height:56px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 20px;border-bottom:1px solid rgba(190,173,148,.62);
  background:rgba(255,250,240,.9);position:sticky;top:0;z-index:5}
.marke{display:flex;align-items:center;gap:10px;color:var(--green);font-size:19px;font-weight:760;white-space:nowrap}
.marke-zeichen{display:inline-grid;grid-template-columns:6px 6px;grid-template-rows:6px 6px;gap:2px;padding:4px;border:1.5px solid var(--green);border-radius:6px;background:#fffdf7}
.marke-zeichen i{background:var(--green)}.marke-zeichen i:nth-child(2),.marke-zeichen i:nth-child(3){background:var(--amber)}
.standort{margin:0;display:flex;align-items:center;gap:7px;min-height:32px;padding:0 12px;border:1px solid rgba(190,173,148,.78);border-radius:999px;
  background:#fffdf7;color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.standort strong{color:var(--ink)}
.standort-pin{width:9px;height:9px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 3px rgba(201,138,40,.22);flex:0 0 auto}
.zurueck{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid rgba(190,173,148,.9);border-radius:8px;background:#fffdf7;
  color:var(--green);font-weight:700;text-decoration:none;white-space:nowrap}

.buehne{padding:14px 20px 18px}
.karte-rahmen{position:relative;border:1px solid rgba(190,173,148,.72);border-radius:10px;box-shadow:var(--shadow);overflow:hidden;
  background:radial-gradient(ellipse at 12% 0%,rgba(255,236,190,.95),rgba(255,236,190,0) 46%),radial-gradient(circle at 50% 66%,rgba(255,251,241,.92),rgba(255,250,240,.2) 46%,transparent 70%),
    repeating-linear-gradient(90deg,rgba(150,126,92,.07) 0 1px,transparent 1px 86px),repeating-linear-gradient(0deg,rgba(150,126,92,.07) 0 1px,transparent 1px 52px),linear-gradient(160deg,#f7ecd6 0%,#efe0c4 55%,#e6d3b2 100%)}
.karte{display:block;margin:0 auto}

/* Grundriss: Gartenpavillon aus Glas, Holz und Stein. Licht von links oben. Füllungen mit Verlauf stehen als Attribut im SVG. */
.bau-schatten{fill:#5b4322;opacity:.26;pointer-events:none}
.bau-sockel{fill:#e9dcc4;stroke:rgba(120,104,78,.5);stroke-width:1;pointer-events:none}
.garten-flaeche{stroke:rgba(90,122,84,.3);stroke-width:1}
.garten-linie{fill:none;stroke:rgba(255,255,255,.7);stroke-width:1.1}
.garten-rand{fill:none;stroke:rgba(255,255,255,.55);stroke-width:2.5;pointer-events:none}
.kegel,.pfad,.knoten,.gruen,.waende,.platz-hof,.platz-glas,.standpunkt,.standpunkt-hof{pointer-events:none}
.pfad{fill:none;stroke:rgba(255,255,255,.8);stroke-width:1.3}
.knoten{fill:#fffdf4;stroke:rgba(86,150,140,.75);stroke-width:1.6}
.gruen .gs{fill:#3d4a26;opacity:.2}
.gruen .g1{fill:#6e8d58}.gruen .g2{fill:#7f9d66}.gruen .g3{fill:#98b47c}.gruen .g4{fill:#b9cf9c}
.gruen.baum .g1{fill:#66804f}.gruen.baum .g2{fill:#748f5a}.gruen.baum .g3{fill:#8aa56c}.gruen.baum .g4{fill:#a9c08a}
.gruen.baum .gs{opacity:.13}
.platz-glas{fill:rgba(214,232,232,.7);stroke:#5f6f76;stroke-width:1.6}
.platz{stroke:var(--amber);stroke-width:2.4}
.moebel{fill:#c9a574;stroke:rgba(110,82,46,.55);pointer-events:none}
.moebel.teppich,.teppich{fill:rgba(255,255,255,.5);stroke:rgba(150,128,96,.3);pointer-events:none}
.topf-s{fill:#3d4a26;opacity:.2}.topf1{fill:#789a62}.topf2{fill:#a6c389}
.platz-titel{font-weight:760;fill:var(--ink);text-anchor:middle;pointer-events:none}
.platz-unter{fill:var(--muted);text-anchor:middle;pointer-events:none}
.standpunkt-hof{fill:rgba(255,196,84,.38)}
.standpunkt{fill:var(--amber);stroke:#fffdf4;stroke-width:2.2}
.weg{fill:none;stroke:#e0a32e;stroke-width:3.4;stroke-linecap:round;pointer-events:none}
.weg-schein{fill:none;stroke:#ffc24a;stroke-width:11;stroke-linecap:round;opacity:.55;pointer-events:none}
.weg-punkt{fill:#fffdf7;stroke:var(--amber);stroke-width:4;pointer-events:none}

/* Räume: bereit = gebaut, verglast, Tür offen, eingerichtet · in Entwicklung = Rohbau, gestrichelt, schraffiert · Entwurf = nur angerissen */
.raum{cursor:pointer;text-decoration:none}
.raum .segment{stroke:#5f6f76;stroke-width:1.5}
.raum .glas{fill:rgba(190,224,230,.9);stroke:#5f6f76;stroke-width:1;pointer-events:none}
.raum .schwelle{fill:#ffcf70;stroke:#c98a28;stroke-width:1;pointer-events:none}
.raum .licht{fill:#ffc24a;stroke:#fff6dc;stroke-width:1;pointer-events:none}
.raum .wand{fill:none;stroke:#56666e;stroke-linecap:butt;pointer-events:none}
.raum .wand.bau{stroke:#8a8474;stroke-dasharray:9 6}
.raum .bau-muster{pointer-events:none}
.raum .holzdeck{fill:rgba(196,156,104,.3);stroke:rgba(140,108,66,.28);stroke-width:.8;pointer-events:none}
.raum .schein{fill:#fff0c2;opacity:0;pointer-events:none}
.trennwand{stroke:#56666e;stroke-linecap:round}
.trennwand.bau{stroke:#8a8474;stroke-dasharray:6 5}
.pfosten{fill:#46555c;stroke:#f4ead6;stroke-width:1.2}
.raum .name{font-weight:720;fill:#2d2c27;text-anchor:middle;pointer-events:none}
.raum .zustand{fill:#5d574b;text-anchor:middle;pointer-events:none}
.raum .nummer{font-weight:740;fill:#2d2c27;text-anchor:middle;pointer-events:none}
.raum .lampe{pointer-events:none}
.raum.bereit .lampe{fill:#4f7a4a}
.raum.in_entwicklung .segment{stroke:#7d776a;stroke-dasharray:7 5}
.raum.in_entwicklung .lampe{fill:var(--amber)}
.raum.entwurf .segment{stroke:rgba(96,104,95,.75);stroke-dasharray:2 5}
.raum.entwurf .name{fill:#4a463d;font-weight:650}
.raum.entwurf .lampe{fill:none;stroke:var(--muted);stroke-width:1.4}
.raum:hover .schein,.raum.gewaehlt .schein,.raum:focus-visible .schein{opacity:.62}
.raum:hover .segment,.raum.gewaehlt .segment{stroke:var(--amber);stroke-width:2.2}
.raum:focus{outline:none}
.raum:focus-visible .segment{stroke:var(--focus);stroke-width:3.5;stroke-dasharray:none}
.kompakt .raum{cursor:default}
.kompakt .raum .segment{pointer-events:none;stroke-width:1}

/* Legende und Auswahl im Sockel unter dem Halbkreis */
.legende{position:absolute;left:16px;bottom:14px;margin:0;padding:0;list-style:none;display:grid;gap:5px;color:var(--muted);font-size:12.5px}
.legende li{display:flex;align-items:center;gap:8px}
.legende{padding:8px 11px;border-radius:9px;background:rgba(255,251,241,.78);color:#5d574b}
.muster{width:22px;height:13px;border-radius:3px;border:1.6px solid #56666e;background:linear-gradient(180deg,#ffcf70 0 3px,#fbf1dd 3px);flex:0 0 auto}
.muster.in_entwicklung{border-style:dashed;border-color:#7d776a;background:repeating-linear-gradient(128deg,rgba(138,132,116,.45) 0 1.2px,#ece5d6 1.2px 5px)}
.muster.entwurf{border-style:dotted;background:transparent}
.auswahl{position:absolute;right:16px;bottom:14px;border:1px solid rgba(190,173,148,.85);border-radius:9px;background:rgba(255,253,247,.96);
  box-shadow:0 12px 30px rgba(80,61,34,.12);padding:10px 14px;display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:center}
.auswahl-kopf{grid-column:1/-1;margin:0;color:var(--muted);font-size:11.5px;font-weight:760;letter-spacing:.06em;text-transform:uppercase}
.auswahl h2{margin:0;font-size:16.5px;line-height:1.25}
.auswahl-status{grid-column:1;margin:0;color:var(--muted);font-size:13.5px;min-height:19px}
.knopf{grid-column:2;grid-row:2/4;display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 16px;border-radius:8px;
  border:1px solid var(--amber-dark);background:#b8700f;color:#fff;font-weight:720;font-size:14px;text-decoration:none;white-space:nowrap}
.knopf[hidden]{display:none}

/* Liste (Hochformat ergänzend, Smartphone als Hauptbedienung) */
.liste-rahmen{margin-top:14px}
.liste{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px}
.zeile{width:100%;min-height:52px;display:grid;grid-template-columns:34px 1fr auto 16px;align-items:center;gap:10px;padding:6px 12px;text-align:left;
  border:1px solid rgba(190,173,148,.85);border-radius:9px;background:rgba(255,253,247,.92);color:var(--ink);font:inherit;text-decoration:none;cursor:pointer}
.zeile .nr{font-weight:760;color:var(--muted);font-variant-numeric:tabular-nums}
.zeile .nm{font-weight:720;overflow-wrap:anywhere}
.zeile .zs{color:var(--muted);font-size:13px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.zeile .zs::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--sage)}
.zeile.in_entwicklung{border-style:dashed}.zeile.in_entwicklung .zs::before{background:var(--amber)}
.zeile.entwurf{border-style:dotted;background:rgba(255,253,247,.55)}.zeile.entwurf .zs::before{background:transparent;border:1.4px solid var(--muted)}
.zeile .pf{color:var(--amber-dark);font-weight:760}
.zeile.gewaehlt{border-color:var(--amber);border-style:solid;background:rgba(255,246,222,.98);box-shadow:0 0 0 2px rgba(201,138,40,.25)}

/* Smartphone: kompakter Bogen, Auswahl und Legende im Fluss, Liste führt */
.kompakt .buehne{padding:10px 12px 16px}
.kompakt .legende{position:static;background:none;display:flex;flex-wrap:wrap;gap:4px 14px;padding:0 12px 10px;justify-content:center}
.kompakt .auswahl{position:sticky;top:64px;right:auto;bottom:auto;margin:0 10px 10px;z-index:3}
.kompakt .liste{grid-template-columns:1fr}

/* Demo-Ziel */
.raum-buehne{max-width:720px;margin:0 auto;padding:36px 20px}
.raum-buehne h1{margin:6px 0 10px;font-size:30px;letter-spacing:-.01em}
.raum-text{color:var(--muted);margin:0 0 22px}
.seite-raum .knopf{grid-column:auto}
@media(max-width:560px){.standort-lang{display:none}.kopf{padding:0 12px}.marke{font-size:17px}}

@media(prefers-reduced-motion:no-preference){
  .raum .schein{transition:opacity .18s ease}
  .weg{stroke-dasharray:1;animation:weg-zeichnen .3s ease-out both}
  /* Betreten eines fertigen Raums: eine einzige gezielte Fahrt auf die offene Tür zu */
  .karte{transition:transform .43s cubic-bezier(.55,0,.25,1),opacity .43s ease-in}
  .legende,.auswahl{transition:opacity .2s ease}
  .betritt .karte{transform:scale(2.5);opacity:0}
  .betritt .legende,.betritt .auswahl{opacity:0}
  .seite-raum .raum-buehne{animation:ankommen .32s ease-out both}
  .zeile{transition:background-color .16s ease,border-color .16s ease}
}
@keyframes weg-zeichnen{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes ankommen{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}