/* ==========================================================================
   FRAMES V2 (Basiszentrale V2, §8) — 9 Rahmenfamilien, verwandte Formensprache,
   je Station eine sekundaere Akzentfarbe. Cyan bleibt gemeinsame Grundfarbe.
   Baut auf .hud (kellerzentrale.css) auf; nur unter #scene-base gescoped.
   §7: mehr Umgebung sichtbar (Panels fokussiert, nicht vollflaechig).
   ========================================================================== */

/* ==========================================================================
   Auftrag 018 Phase B: die 9 Familien unterscheiden sich STRUKTURELL, nicht nur
   farblich. Gemeinsame DNA (dunkles Bunker-HUD, Cyan-Kante, Cut-Corner, Lampe)
   bleibt; jede Familie traegt ein eigenes `.frame-struct` (per app.js injiziert)
   mit einer charakteristischen Form an einer EIGENEN Seite -> auch in Graustufen
   auseinanderzuhalten. `.frame-struct` ist rein dekorativ (aria-hidden).
   ========================================================================== */

/* ---- gemeinsame Basis: sekundaerer Akzent als Variable ---- */
#scene-base .hud { --f-accent: var(--kz-cyan); --f-accent2: var(--kz-cyan-dim); }
#scene-base .hud .hud-title { color: var(--f-accent); }
#scene-base .hud .hud-title::before { color: var(--f-accent); }
#scene-base .hud > .hud-deco::before { background-image: repeating-linear-gradient(45deg, var(--f-accent) 0 2px, transparent 2px 5px); }
#scene-base .hud > .hud-deco::after { background: linear-gradient(90deg, transparent, var(--f-accent)); box-shadow: 0 0 8px var(--f-accent); }
#scene-base .frame-lamp { position: absolute; top: 5px; right: 10px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--f-accent); box-shadow: 0 0 8px var(--f-accent); z-index: 3; }

/* Strukturelement-Basis: zwei Pseudo-Elemente je Familie, an den Raendern. */
#scene-base .frame-struct { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
#scene-base .frame-struct::before, #scene-base .frame-struct::after { content: ''; position: absolute; }
@media (prefers-reduced-motion: no-preference) { /* keine Animation - bewusst statisch */ }

/* ---- 1. command (Lagezentrum): LINKE Lage-/Koordinatenschiene + obere Taktik-Segmente (Amber) ---- */
#scene-base .frame--command { --f-accent: var(--kz-amber); --f-accent2: #7a5410; }
#scene-base .frame--command .frame-struct::before {   /* linke vertikale Schiene mit Teilstrichen */
  left: 5px; top: 16px; bottom: 16px; width: 9px;
  background: linear-gradient(90deg, var(--f-accent) 0 2px, transparent 2px),
              repeating-linear-gradient(to bottom, var(--f-accent) 0 2px, transparent 2px 15px);
  background-size: 100% 100%, 9px 15px; }
#scene-base .frame--command .frame-struct::after {    /* obere, horizontale Taktik-Segmente rechts */
  right: 34px; top: 6px; width: 118px; height: 5px;
  background: repeating-linear-gradient(90deg, var(--f-accent) 0 11px, transparent 11px 17px); }

/* ---- 2. basebuild (Basisbau): untere MASSLEISTE + Eckwinkel oben links (Industriegelb) ---- */
#scene-base .frame--basebuild { --f-accent: #ffd21f; --f-accent2: #7a6410; }
#scene-base .frame--basebuild .frame-struct::before {  /* untere Maßleiste ueber die ganze Breite */
  left: 16px; right: 16px; bottom: 6px; height: 9px;
  background: linear-gradient(0deg, var(--f-accent) 0 2px, transparent 2px),
              repeating-linear-gradient(90deg, var(--f-accent2) 0 2px, transparent 2px 18px);
  background-size: 100% 100%, 18px 100%; }
#scene-base .frame--basebuild .frame-struct::after {   /* Eckwinkel oben links (Konstruktion) */
  left: 6px; top: 6px; width: 15px; height: 15px;
  border-left: 3px solid var(--f-accent); border-top: 3px solid var(--f-accent); }

/* ---- 3. personnel (Personal): linke REGISTERLASCHEN + Kopf-Unterstrich (Dossier, Oliv) ---- */
#scene-base .frame--personnel { --f-accent: #c3d59a; --f-accent2: #6f7d4a; }
#scene-base .frame--personnel .frame-struct::before {  /* drei Registerlaschen am linken Rand */
  left: 0; top: 30px; width: 6px; height: 13px;
  background: var(--f-accent2);
  box-shadow: 0 22px 0 var(--f-accent2), 0 44px 0 var(--f-accent2); }
/**
 * 048 §25 A — DER UNTERSTRICH LAG AUF DEM TITEL, NICHT DARUNTER.
 *
 * Gemessen an der Personalstation, in allen drei Auflösungen identisch:
 * der Titel reicht von 20 px bis 41 px unter der Rahmenkante, die Linie stand auf 32 px —
 * also mitten im Wort. Aufgefallen ist es im 1024er-Schirm, wo „PERSONAL" durchgestrichen
 * aussah; es betraf aber jede Breite gleichermassen.
 *
 * Jetzt 46 px: fünf Pixel unter der Textunterkante. Kein Rätselraten — der Wert stammt aus
 * der Messung, nicht aus dem Augenmass.
 */
#scene-base .frame--personnel .frame-struct::after {   /* Unterstrich UNTER dem Titel */
  left: 16px; top: 46px; width: 130px; height: 2px; background: var(--f-accent); opacity: .8; }

/* ---- 4. research (Forschung): obere FEINE MESSSKALA + rechter Datenkanal (Violett) ---- */
#scene-base .frame--research { --f-accent: #c39cff; --f-accent2: #5b3f86; }
#scene-base .frame--research .frame-struct::before {   /* feine Skala oben ueber die Breite */
  left: 16px; right: 34px; top: 6px; height: 8px;
  /* 027D-Grafikfix: 1px-Striche aliasten bei Windows-Skalierung (DPR 1,25/1,5) zu einem
     unregelmaessigen "Kamm" (mal dick, mal fast unsichtbar). 2px-Striche + 10px-Periode
     runden auf jedem DPR sauber; Grundlinie ebenfalls 2px. Optik: ruhige Messskala. */
  background: linear-gradient(0deg, var(--f-accent2) 0 2px, transparent 2px),
              repeating-linear-gradient(90deg, var(--f-accent) 0 2px, transparent 2px 10px);
  background-size: 100% 100%, 10px 100%; opacity: .85; }
#scene-base .frame--research .frame-struct::after {    /* schmaler Datenkanal am rechten Rand */
  right: 6px; top: 18px; bottom: 18px; width: 3px;
  background: repeating-linear-gradient(to bottom, var(--f-accent) 0 3px, transparent 3px 9px); opacity: .75; }

/* ---- 5. engineering (Werkstatt/Lager): untere LASTKANTE + Warnschraffur-Ecke (Orange) ---- */
#scene-base .frame--engineering { --f-accent: #ff9e3d; --f-accent2: #7a4c15; }
#scene-base .frame--engineering .frame-struct::before { /* schwere Lastkante unten */
  left: 12px; right: 12px; bottom: 5px; height: 7px;
  background: var(--f-accent2); border-top: 2px solid var(--f-accent); }
#scene-base .frame--engineering .frame-struct::after {  /* Warnschraffur unten rechts (nur ein Segment) */
  right: 10px; bottom: 14px; width: 46px; height: 10px;
  background: repeating-linear-gradient(-45deg, var(--f-accent) 0 6px, #14100a 6px 12px); }

/* ---- 6. radio (Funk/Archiv): obere WELLENFORM + rechte PEGELSKALA (Gruen) ---- */
#scene-base .frame--radio { --f-accent: #6fd08a; --f-accent2: #2f6a41; }
#scene-base .frame--radio .frame-struct::before {      /* Wellenform oben links */
  left: 16px; top: 6px; width: 58px; height: 13px;
  background:
    linear-gradient(to top, var(--f-accent) 35%, transparent 35%),
    linear-gradient(to top, var(--f-accent) 70%, transparent 70%),
    linear-gradient(to top, var(--f-accent) 50%, transparent 50%),
    linear-gradient(to top, var(--f-accent) 85%, transparent 85%),
    linear-gradient(to top, var(--f-accent) 40%, transparent 40%),
    linear-gradient(to top, var(--f-accent) 60%, transparent 60%);
  background-size: 4px 100%; background-repeat: no-repeat;
  background-position: 0 0, 8px 0, 16px 0, 24px 0, 32px 0, 40px 0; }
#scene-base .frame--radio .frame-struct::after {       /* vertikale Pegelskala rechts */
  right: 5px; top: 18px; bottom: 18px; width: 7px;
  background: repeating-linear-gradient(to bottom, var(--f-accent) 0 2px, transparent 2px 7px); opacity: .8; }

/* ---- 7. warning (Feindlage): DOPPELRAND + Warnschraffur + Symbol im Titel (Amber/Rot) ---- */
#scene-base .frame--warning { --f-accent: var(--kz-amber); --f-accent2: var(--kz-red); }
#scene-base .frame--warning::before { background: var(--kz-amber) !important; }
#scene-base .frame--warning .hud-title::before { content: '\26A0'; }   /* Warnsymbol zusaetzlich zur Farbe */
#scene-base .frame--warning .frame-struct::before {    /* innerer Doppelrand */
  inset: 4px; border: 1px solid var(--f-accent); opacity: .55;
  clip-path: polygon(0 12px, 12px 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 12px)); }
#scene-base .frame--warning .frame-struct::after {     /* Warnschraffur oben */
  left: 16px; right: 34px; top: 6px; height: 8px;
  background: repeating-linear-gradient(-45deg, var(--kz-amber) 0 8px, #1a1206 8px 16px); }

/* ---- 8. dialog (Optionen/Speichern): ruhig, symmetrisch, hohe Deckkraft ---- */
#scene-base .frame--dialog { --f-accent: var(--kz-cyan); }
#scene-base .frame--dialog { background: linear-gradient(160deg, rgba(9,20,28,.9), rgba(6,14,20,.95)); }
#scene-base .frame--dialog::after { background: linear-gradient(160deg, rgba(9,20,28,.92), rgba(6,14,20,.96)); }
#scene-base .frame--dialog > .hud-deco::before { display: none; }   /* keine Schraffur -> ruhig */
#scene-base .frame--dialog .frame-struct::before {     /* symmetrische Markierung oben mittig */
  left: 50%; transform: translateX(-50%); top: 5px; width: 46px; height: 2px; background: var(--f-accent2); }
#scene-base .frame--dialog .frame-struct::after {      /* symmetrische Markierung unten mittig */
  left: 50%; transform: translateX(-50%); bottom: 5px; width: 46px; height: 2px; background: var(--f-accent2); }

/* ---- 9. compact-status (kleine Anzeigen): schmal, EINE Akzentkante links ---- */
#scene-base .frame--compact { padding: 8px 10px 8px 14px; --cut: 8px; }
#scene-base .frame--compact .hud-title { font-size: 10.5px; margin-bottom: 4px; }
#scene-base .frame--compact > .hud-deco::before { display: none; }
#scene-base .frame--compact .frame-struct::before {    /* eine schmale Kante links, kein weiteres Dekor */
  left: 4px; top: 8px; bottom: 8px; width: 2px; background: var(--f-accent); }
#scene-base .frame--compact .frame-struct::after { display: none; }

/* ==========================================================================
   AUFTRAG 020 PHASE E: Rahmen deutlicher + GRAUSTUFEN-DISTINKT.
   Behebt „Rahmen im Spiel nicht distinkt genug". Die Familien behalten ihre
   eindeutige Struktur-POSITION (command=links · personnel=links-Laschen ·
   research=oben · basebuild=unten · engineering=unten+Gefahrenecke · radio=rechts),
   werden aber KRAEFTIGER und bekommen einen neutral-hellen Anteil, damit die
   Silhouette auch OHNE Farbe (Graustufe) erkennbar ist. Alle Basisregeln oben
   bleiben unveraendert (Struktur-Tests gruen); dies verstaerkt nur.
   ========================================================================== */
#scene-base [class*="frame--"] .frame-struct::before,
#scene-base [class*="frame--"] .frame-struct::after {
  filter: drop-shadow(0 0 0.6px rgba(240,246,252,.8));   /* neutraler Hell-Saum -> greyscale-lesbar */
}
/* command: linke Schiene breiter + heller Grundstrich (kontinuierliche Schiene) */
#scene-base .frame--command .frame-struct::before { width: 13px; opacity: 1;
  box-shadow: inset 2px 0 0 rgba(240,246,252,.6); }
#scene-base .frame--command .frame-struct::after { height: 6px; }
/* personnel: linke LASCHEN groesser (klar „Register", nicht „Schiene") */
#scene-base .frame--personnel .frame-struct::before { width: 12px; height: 17px;
  box-shadow: 0 25px 0 var(--f-accent2), 0 50px 0 var(--f-accent2), inset 0 0 0 1px rgba(240,246,252,.5); }
#scene-base .frame--personnel .frame-struct::after { height: 3px; opacity: 1; }
/* research: obere MESSSKALA hoeher + heller Grundstrich */
#scene-base .frame--research .frame-struct::before { height: 13px; opacity: 1;
  border-top: 1px solid rgba(240,246,252,.55); }
#scene-base .frame--research .frame-struct::after { width: 4px; opacity: 1; }
/* basebuild: untere MASSLEISTE hoeher + heller Grundlinie */
#scene-base .frame--basebuild .frame-struct::before { height: 13px;
  border-bottom: 1px solid rgba(240,246,252,.55); }
/* engineering: schwere LASTKANTE hoeher + Gefahren-Ecke groesser (klar „schwer/unten") */
#scene-base .frame--engineering .frame-struct::before { height: 11px;
  border-top: 3px solid rgba(240,246,252,.6); }
#scene-base .frame--engineering .frame-struct::after { width: 64px; height: 15px; }
/* radio: rechte PEGELSKALA breiter + heller (klar „rechts") */
#scene-base .frame--radio .frame-struct::after { width: 12px; opacity: 1;
  box-shadow: inset -2px 0 0 rgba(240,246,252,.6); }
/* warning: Schraffur kraeftiger (Doppelrand + Symbol bleiben) */
#scene-base .frame--warning .frame-struct::after { height: 12px; opacity: 1; }
#scene-base .frame--warning .frame-struct::before { opacity: .8; }

/* ---- Statusfarben (gemeinsam; Status NICHT nur ueber Farbe -> siehe Warnsymbol) ---- */
#scene-base .fx-confirm { color: #4fd68a; border-color: #2f7a4a; }
#scene-base .fx-locked  { color: #8090a0; border-color: #3a4652; opacity: .8; }
#scene-base .fx-warn    { color: var(--kz-amber); border-color: var(--kz-amber); }

/* ==========================================================================
   047 §4/§5 — DIE 620-px-DECKELUNG IST AUFGEHOBEN.

   ⚠️ HIER STAND: „§7: Panels fokussieren, damit >=55% Umgebung sichtbar bleibt.“
   Diese Regel stammt aus einem früheren Auftrag und war für KPI-Kacheln gedacht. Seit
   046 stehen in diesen Panels Bildkarten mit Produktfotos, Nutzensätzen und Kostenmarken.
   Auf 1920 px nutzte die Forschung damit rund 32 % der Breite; rechts standen über
   1000 px Kulisse. Auftrag 047 hebt die Regel für die INFORMATIONSSEITEN ausdrücklich auf:
   der Keller bleibt sichtbar, aber er ist Kulisse, nicht Hauptinhalt.

   ⚠️ `clamp()` STATT EINER FESTEN ZAHL.
   Gefordert sind ~1050–1250 px bei 1920 px Breite, entsprechend 55–68 % der Fläche. Eine
   feste Zahl wäre bei genau einer Auflösung richtig. `min()` aus Prozentanteil und
   Obergrenze löst beides zugleich:
     1920 px → min(1920*0.64, 1250) = 1229 px   (64 %)
     1600 px → min(1024, 1250)      = 1024 px   (64 %)
     1366 px → min(874, 1250)       =  874 px   (64 %)
     1280 px → Tablet-Zweig unten    ≈ volle Breite
   Die Untergrenze 640 px verhindert, dass die Karten bei sehr schmalen Fenstern
   zusammenbrechen, bevor der Tablet-Zweig greift.
   ========================================================================== */
#scene-base .stage .tabpanel[data-panel="crew"] .hud,
#scene-base .stage .tabpanel[data-panel="forschung"] .hud,
#scene-base .stage .tabpanel[data-panel="werkstatt"] .hud,
#scene-base .stage .tabpanel[data-panel="lager"] .hud,
#scene-base .stage .tabpanel[data-panel="archiv"] .hud {
  max-width: clamp(640px, 64vw, 1250px);
  height: auto; max-height: 100%;
}

/*
 * Tablet und schmale Fenster: keine künstliche Grenze mehr (§5).
 * Unterhalb von 1280 px ist die Kulisse ohnehin kaum noch als Raum lesbar; dort zählt
 * nur, dass der Inhalt ohne Quetschen Platz hat.
 */
@media (max-width: 1280px) {
  #scene-base .stage .tabpanel[data-panel="crew"] .hud,
  #scene-base .stage .tabpanel[data-panel="forschung"] .hud,
  #scene-base .stage .tabpanel[data-panel="werkstatt"] .hud,
  #scene-base .stage .tabpanel[data-panel="lager"] .hud,
  #scene-base .stage .tabpanel[data-panel="archiv"] .hud {
    max-width: 100%;
  }
}
/* Auftrag 020 Phase D: Basisbau nutzt die rechte Flaeche (grosse Vorschau + Bildkatalog)
   -> breiter als die frueheren 900px, damit Grundriss UND rechte Spalte Platz haben. */
#scene-base .stage .tabpanel[data-panel="bau"] .hud { max-width: 1180px; }
#scene-base .stage .tabpanel[data-panel="optionen"] .hud { max-width: 720px; }
/*
 * 047 §10 — DAS FUNKPULT WAR MIT 560 px ZU KLEIN.
 * Es soll Stationscharakter haben: große Modusschalter, gut sichtbarer Titel, breite
 * Regler mit fassbaren Griffen. 960 px geben dafür Platz, ohne den Raum zu überdecken.
 */
#scene-base .stage .tabpanel[data-panel="radio"] .hud { max-width: min(92vw, 960px); }
/* ==========================================================================
   Lagezentrum (Auftrag 018 Phase C): EINE schmale linke Saeule statt KPI-Raster.
   Mission dominant; Mitte/rechts = Kommandotisch-Kulisse. <=520px Panelbreite,
   zentrale ~46% frei, >=60% Kulisse.
   ========================================================================== */
/* 045 §13: ENTFERNT — diese Regel traf `.lz-layout` im Panel `lagezentrum`. Beides gibt es
   nicht mehr: die Station heisst `lage`, das Raster heisst `.lage-layout` und steht in
   css/lage.css. Die Regel hätte hier als toter Code weitergelebt und beim nächsten Umbau
   den Eindruck erweckt, sie sei wirksam — die 520-px-Deckelung wäre dann als „Kartenbreite
   passt nicht“ wieder aufgeschlagen. Die `.lz-*`-Modulregeln unten bleiben: sie sind NICHT
   panelgebunden und gestalten die drei Module in der neuen Säule unverändert weiter. */
#scene-base .lz-mission { flex: 1 1 52%; min-height: 170px; }  /* aktueller Einsatz = DOMINANT */
#scene-base .lz-threat  { flex: 0 0 auto; min-height: 0; }
#scene-base .lz-statusbar { flex: 0 0 auto; margin-top: 2px; }
#scene-base .lz-mission .panelscroll { max-height: calc(100vh - 470px); min-height: 120px; }
/* Feindlage im Lagezentrum: Karten fliessen vollständig (KEIN interner 220px-Deckel mehr,
   der mitten durch das Forschungs-/Sperrband schnitt). Bei Bedarf scrollt die ganze Spalte. */
#scene-base .lz-threat .intel-grid { grid-template-columns: 1fr; gap: 6px; }
#scene-base .lz-threat .intel-grouppic,
#scene-base .lz-threat .intel-sensor { max-height: 128px; object-fit: cover; object-position: center 30%; }
#scene-base .lz-threat .intel-card { padding: 6px 8px; }

/* Kleines Bedrohungsmodul: Schluessel/Wert-Zeilen (keine grossen Karten) */
#scene-base .lz-threat-readout { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
#scene-base .lzr-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px;
  padding: 3px 0; border-bottom: 1px solid rgba(79,214,255,.12); }
#scene-base .lzr-k { color: #9fb6c4; }
#scene-base .lzr-v { color: #eaf9ff; font-weight: 600; }
#scene-base .lzr-row.warn .lzr-v { color: var(--kz-amber); }

/* Kompaktes Statusband: kleine Werte in EINER Reihe (kein 2x3-Kartenraster) */
#scene-base .lz-statusrow { display: flex; flex-wrap: wrap; gap: 6px; }
#scene-base .lz-stat { flex: 1 1 auto; min-width: 60px; text-align: center;
  padding: 5px 8px; background: rgba(79,214,255,.05); border: 1px solid rgba(79,214,255,.14); border-radius: 4px; }
#scene-base .lz-stat-v { display: block; font-size: 17px; font-weight: 700; color: #eaf9ff; line-height: 1.12; }
#scene-base .lz-stat-k { display: block; font-size: 10.5px; color: #9fb6c4; letter-spacing: .03em; }
#scene-base .lz-stat.ok .lz-stat-v { color: #9fe0c0; }
#scene-base .lz-stat.warn .lz-stat-v { color: var(--kz-amber); }
#scene-base .lz-note.small { font-size: 11.5px; color: #8ba0ae; margin-top: 6px; line-height: 1.35; }

/* Bei knappen Hoehen scrollen die fokussierten Frames intern statt zu wachsen */
/* ⚠️ `100vh - 220px` ist geraten, nicht gemessen: 220 px unterstellt eine bestimmte Höhe von
   Kopfzeile UND Stationsleiste. Stimmt die Annahme nicht, reicht der Scrollbereich UNTER die
   Stationsleiste — die letzte Zeile liegt dann dauerhaft darunter und ist nicht antippbar
   (gemessen auf 1180×820, Auftrag 037 Abschnitt 24). `min(…, 100%)` deckelt zusätzlich am
   tatsächlich verfügbaren Platz, damit die Schätzung nie über die Wirklichkeit hinausschiesst. */
#scene-base .stage .tabpanel .hud .panelscroll { max-height: min(calc(100vh - 220px), 100%); }

@media (max-width: 900px) {
  #scene-base .stage .tabpanel .hud { max-width: none !important; }
}

/* Basis audit: decoration stays outside all reading and interaction areas. */
#scene-base .hud>.frame-struct::before,#scene-base .hud>.frame-struct::after{display:none}
#scene-base .hud>.hud-deco::before{display:none}
#scene-base .hud>.hud-deco::after{height:2px;width:70px;top:5px;right:24px;box-shadow:none}
#scene-base .hud .intel-unknown-head,#scene-base .hud .row-blocked{overflow-wrap:anywhere}
#scene-base .workshop-future{margin:14px 0 22px;border-top:1px solid #53707855;padding-top:12px}
#scene-base .workshop-future>summary{cursor:pointer;color:#b0c1c9;padding:8px 0;font-size:14px}
#scene-base .workshop-future[open]>summary{margin-bottom:10px}