/* ════════════════════════════════════════════════════════════════════════════════════════
   farben.css — das Schema INSTRUMENT als Palette und Material. OHNE Layout.

   ⚠ WARUM DIESE DATEI 2026-09-07 AUS instrument.css HERAUSGELÖST WURDE.
   CHR: „mache ein sauberes redesign nicht eine bastelstunde mit den komischen fenstern."
   Die alte Datei mischte zwei Dinge: die PALETTE (Werte aus themes.js) und das
   HUD-LAYOUT (`.hud{position:fixed}` plus fünf feste Plätze). Jede Bühne erbte beides —
   das Kästen-Vokabular war damit PFLICHT, nicht Wahl. Genau daran bin ich hängen
   geblieben: ich habe die Kästen nicht entschieden, ich habe sie geerbt und ihre
   Koordinaten repariert.
   Jetzt: hier stehen Farbe, Schrift, Material und die Bedienelemente — die Dinge, die
   für JEDE Fassung gelten. Die Kästen stehen in `hud.css` und werden dazugenommen,
   wenn eine Bühne sie will. Die Palette bleibt EINE Wahrheit; sie steht nur hier.

   HERKUNFT unverändert: sites/hologlobe/v1/js/themes.js:159-190 und css/holo.css.
   ════════════════════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Die Palette, themes.js:163-175 ──────────────────────────────────────────────── */
  --grund:      #04080c;   /* hintergrund — das Papier */
  --koerper:    #050d12;   /* koerper — eine Spur heller als der Grund */
  --gitter:     #7fd8ff;   /* gitter — Linien, Skalen, Teilstriche */
  --gitter-fein:#2b6c8c;   /* gitterFein — die feine Teilung */
  --plasma:     #9fe8ff;   /* plasma — die Schale der Kugel */
  --atmo-lo:    #3f7f9f;
  --atmo-hi:    #ffc978;
  --knoten:     #ffb347;   /* knoten — der EINE warme Akzent */
  --knoten-hart:#ff6a4a;   /* knotenStark — was auffällt */
  --bogen:      #dfefff;

  /* ── Die HUD-Variablen, themes.js:177-181 ────────────────────────────────────────── */
  --schrift:    #cfe8ff;   /* --gruen im Original: kühles Papierweiß-Blau */
  --schrift-d:  #5f8fa8;   /* --gruen-d: Stahlblau, gedämpft — die zweite Stimme */
  --gold:       #ffb347;   /* --gold: Kontext, Herkunft, Vorbehalt */
  --warn:       #ff6a4a;   /* --warn: nur für echte Lücken */
  --hud-bg:     rgba(6, 14, 20, .68);
  --hud-rand:   rgba(127, 216, 255, .24);

  /* ── Bandfarben je Haus, aus themes.js:184-187 (bandFarben des Schemas) ──────────── */
  /* Kühle Abstufungen mit warmen Akzenten für das, was auffällt — die Sprache eines
     Messgeräts, nicht eines Leuchtreklameschilds. */
  /* Vier Häuser (NAMENSREGISTER 2026-09-06) — Werte aus themes.js:181-184.
     Die Bewohner-Farben darunter bleiben stehen: sie werden im Haus-Block gezeigt. */
  --band-forschung: #bfe3d0;
  --band-limes:     #9fe8ff;
  --band-kernel:    #a8c8d8;
  --band-zeitung: #ffb347;
  --band-terminal:#9fe8ff;
  --band-zetesis: #bfe3d0;
  --band-chronos: #7fb8d8;
  --band-atlas:   #ffd9a0;
  --band-archiv:  #a8c8d8;

  /* ── Schrift: der Stack des Hologlobe, unverändert ───────────────────────────────── */
  --mono: "SF Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;

  --rand: 14px;            /* Abstand zum Bildrand — im Original ÜBERALL 14px */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  background: var(--grund);
  color: var(--schrift);
  /* holo.css:21, Wert für Wert */
  font: 12px/1.5 var(--mono);
}

a { color: inherit; text-decoration: none; }

/* Zahlen laufen tabellarisch — holo.css:122. Eine Skala, deren Ziffern springen,
   ist keine Skala. */
.zahl, table { font-variant-numeric: tabular-nums; }

/* ── Legende, holo.css:63-74 ──────────────────────────────────────────────────────── */
.lg-titel { color: var(--schrift-d); font-size: 9px; letter-spacing: .18em;
            text-transform: uppercase; margin: 6px 0 3px; }
.lg-titel:first-child { margin-top: 0; }
.lg-klein { color: var(--schrift-d); font-size: 10px; }

/* ── Schalter, holo.css:96-106 ────────────────────────────────────────────────────────
   Ruhezustand: nur Umriss in der Dämpffarbe. Aktiv: INVERTIERT — Vollfläche in der
   Schriftfarbe, Beschriftung im Grund. Nie halb gefüllt, nie zwei Zustände nebeneinander. */
.schalter {
  background: none;
  border: 1px solid var(--hud-rand);
  border-radius: 0;
  color: var(--schrift-d);
  font: inherit;
  font-size: 10px;
  letter-spacing: .1em;
  padding: 2px 7px;
  cursor: pointer;
  text-transform: uppercase;
}
.schalter:hover { color: var(--schrift); }
.schalter.aktiv { color: var(--grund); background: var(--schrift); border-color: var(--schrift); }
.trenner { width: 1px; height: 16px; background: var(--hud-rand); }
.bl      { font-size: 9px; color: var(--schrift-d); }

/* Tastatur muss sichtbar sein (VORLAGE §8) — im Hologlobe fehlt das, hier nicht. */
:focus-visible { outline: 1px solid var(--gitter); outline-offset: 2px; }


/* ── Bandfarben als KLASSEN, nicht als style-Attribut (#1014) ─────────────────────── */
.f-forschung{ --farbe: var(--band-forschung); }
.f-limes    { --farbe: var(--band-limes); }
.f-kernel   { --farbe: var(--band-kernel); }
.f-zeitung  { --farbe: var(--band-zeitung); }
.f-terminal { --farbe: var(--band-terminal); }
.f-zetesis  { --farbe: var(--band-zetesis); }
.f-chronos  { --farbe: var(--band-chronos); }
.f-atlas    { --farbe: var(--band-atlas); }
.f-archiv   { --farbe: var(--band-archiv); }

#buehne canvas { display: block; }

/* ── Fehlerfall, holo.css:132-136 ─────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════════════════
   DIE TÜR — Bühne D. Zwei Zonen, ein Schirm.
   ═══════════════════════════════════════════════════════════════════════════════════════
   CHR 2026-09-07: „mache ein sauberes redesign nicht eine bastelstunde mit den komischen
   fenstern. du machst den gleichen fehler wie admin."

   ⭐ WAS DIESE DATEI ANDERS MACHT ALS IHRE VORGÄNGERIN — und warum das keine Geschmacksfrage
   ist. Die alte Bühne D erbte aus `instrument.css` das HUD-Vokabular: `.hud{position:fixed}`
   plus fünf feste Plätze. Sie hat den Globus dann mit `top: calc(...)`, `setViewOffset` und
   einem Raster über den Kästen wieder in die Mitte GERECHNET. Jede dieser Runden war eine
   Reparatur an einer Form, die nie entschieden wurde.
   Der Hologlobe hat Kästen, weil er ein MESSGERÄT ist, das Werte anzeigt. Eine Tür ist kein
   Messgerät. Sie sagt vier Dinge und öffnet vier Häuser — dafür braucht sie Typografie.
   ⇒ Diese Bühne nimmt aus dem Theme nur `farben.css` (Palette, Material, Schalter).
     `hud.css` wird von `bau.py` hier BEWUSST NICHT dazugelegt — das Kästen-Vokabular ist
     damit eine Wahl, keine Erbschaft. Prüfbar: in dieser Datei steht kein `position: fixed`.

   DIE FORM (CHR-Entscheid): DACH = Wortmarke über dem Globus · BLATT = drei Worte, vier
   Häuser, Fuß. Ein Zeitungsgebäude mit dem Globus obendrauf.

   ⚠ KEIN `overflow: hidden` auf `#tuer`. Es würde „ein Schirm" nur VORTÄUSCHEN: `scrollHeight`
     fiele auf die Fensterhöhe zurück und die Prüfung wäre blind für genau den Fehler, den sie
     sucht. Die Seite passt, oder die Sonde sieht es.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

:root {
  /* ⭐ DER GRUND DER TÜR IST SCHWARZ — und das ist eine MESSUNG, keine Geschmacksfrage.
     Die Leinwand des Globus kann nicht durchsichtig sein: `UnrealBloomPass` zeichnet einen
     Vollbild-Quad mit `AdditiveBlending` und Alpha 1.0 (vendor/addons/postprocessing/
     UnrealBloomPass.js:131 und :400) — dadurch wird JEDES Pixel der Leinwand undurchsichtig.
     Gemessen im Screenshot: Leinwand rgb(0,0,0), Seite daneben rgb(4,8,12) → ein sichtbarer
     dunkler Kasten um den Globus.
     Zwei Versuche daran sind gescheitert und beide stehen als Warnung da: `scene.background`
     aus `--grund` zu setzen (das Tone-Mapping frisst die Farbe, Ergebnis rgb(0,0,1)) und die
     Kante weich auszublenden (dann war es kein Kasten mehr, sondern ein dunkles OVAL — im
     Bild gesehen, nachdem die Eckmessung längst grün war).
     ⇒ Im Hologlobe fällt das nie auf, weil die Leinwand dort den GANZEN Schirm deckt; #04080c
       ist dort ein Wert, den niemand je sieht. Die Tür zeigt die Leinwand nur im Dach — und
       damit beide Gründe nebeneinander. Es kann also nur EINEN geben, und es muss der sein,
       den der Globus tatsächlich malt. Der Unterschied #04080c → #000 ist für sich genommen
       unsichtbar; sichtbar war allein die NAHT zwischen beiden. */
  --grund: #000;
}

#tuer {
  height: 100svh;                 /* svh, nicht vh: auf dem Telefon ist 100vh GRÖSSER als
                                     der sichtbare Bereich (Adressleiste) — daran scheitert
                                     „ein Schirm" dort als erstes. */
  display: grid;
  /* ⭐ Der Globus nimmt den Rest, nicht das Blatt. Erste Fassung war umgekehrt
     (`38svh` fürs Dach, `1fr` fürs Blatt) — gemessen auf 390x844: die Häuserzeile war
     432 px hoch bei 320 px Inhalt, also 112 px Leere MITTEN im Blatt, während der Globus
     auf 205 px gedrückt war. Ein Loch zwischen Text und Fuß sieht nicht nach Ruhe aus,
     sondern nach unfertig. Jetzt ist das Blatt so hoch wie sein Text und der Globus
     bekommt, was übrig bleibt — auf großen Schirmen wird er groß, auf kleinen klein. */
  grid-template-rows: minmax(clamp(150px, 22svh, 340px), 1fr) auto;
  gap: clamp(6px, 1.6vmin, 18px);
  padding: clamp(10px, 2.2vmin, 24px);
}

/* ── DAS DACH ──────────────────────────────────────────────────────────────────────────
   Wortmarke, Globus, eine Fußnote. Der Globus bekommt die Restzeile (`1fr`) und `min-height:0`
   — ohne das zweite behält ein Grid-Kind seine Inhaltsgröße und drückt die Zeile auf. */
#dach {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  justify-items: center;
  gap: clamp(2px, .8vmin, 8px);
  min-height: 0;
}

/* Die Blende des Farb-Shifts. Ohne JS steht `--text-auf` nicht und der Rückfallwert 1
   gilt — die Seite ist dann einfach da, wie vorher. */
#marke, #unter, #blatt { opacity: var(--text-auf, 1); }

#marke {
  margin: 0;
  font-size: clamp(17px, 5.4vmin, 44px);
  font-weight: 400;
  letter-spacing: clamp(.10em, .055em + .9vmin, .34em);
  text-transform: uppercase;
  color: var(--schrift);
  text-align: center;
  line-height: 1.1;
}
#unter {
  margin: 0;
  font-size: clamp(8px, 1.5vmin, 11px);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--schrift-d);
  text-align: center;
}
#buehne { width: 100%; min-height: 0; min-width: 0; position: relative; }
/* ⚠ DAS STANDBILD BRAUCHT DIESELBE REGEL WIE DIE LEINWAND — und das ist der teuerste
   Fund dieses Umbaus. Auf einem Telefon zeigt `tuer.mjs` gar keinen Globus, sondern ruft
   `standbild()` (kugel.mjs:84); das setzt ein <img> mit den ATTRIBUTEN width=420 height=420
   ein. Ohne Regel dafür stand ein 420-px-Bild in einer 300-px-Zelle: die Seite lief über,
   auf jedem echten Telefon.
   ⚠ Gesehen habe ich es erst, als `i18n.js` beim Sprachwechsel die Seite NEU LUD — meine
     Sonde hatte bis dahin immer erst geladen und dann emuliert, und die Startprüfung
     `kurzfassungsGeraet()` liest `screen` und `pointer` genau EINMAL, beim Laden. Die
     Emulation ohne Neuladen misst deshalb ein Gerät, das es nicht gibt. */
#buehne canvas,
#buehne img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;   /* das Standbild ist quadratisch, die Zelle ist es nie */
}
#bildunter {
  margin: 0;
  font-size: clamp(7px, 1.2vmin, 9px);
  letter-spacing: .14em;
  color: var(--schrift-d);
  text-align: center;
  opacity: .75;
}

/* ── DAS BLATT ─────────────────────────────────────────────────────────────────────────
   Drei Worte, vier Häuser, Fuß. Kein Rahmen, keine Fläche — die Trennung macht der Abstand. */
#blatt {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: clamp(8px, 2vmin, 22px);
  align-content: start;
  min-height: 0;
  min-width: 0;
  width: min(100%, 74ch);
  justify-self: center;
}

/* Drei Worte. `dt` ist das Wort, `dd` die Bedeutung — eine Beschreibungsliste, weil es
   genau das ist. Das Raster hält die Bedeutungen auf einer Kante. */
#worte { margin: 0; display: grid; gap: clamp(1px, .5vmin, 5px); }
.wort {
  display: grid;
  grid-template-columns: clamp(62px, 13vmin, 108px) minmax(0, 1fr);
  align-items: baseline;
  column-gap: clamp(6px, 1.6vmin, 16px);
}
.wort dt {
  font-size: clamp(8px, 1.45vmin, 11px);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
}
.wort dd {
  margin: 0;
  font-size: clamp(9px, 1.6vmin, 12px);
  color: var(--schrift);
  line-height: 1.45;
}

/* ── DIE VIER HÄUSER ───────────────────────────────────────────────────────────────────
   Name + Adresse, keine Beschreibungssätze. CHR: „Eine Tür ist ein Durchgang, kein
   Aufenthaltsort." Ein Haus MIT Bewohnern (Forschung, LIMES) ist eine Überschrift ohne
   eigenes Ziel — sonst stünde dieselbe Adresse zweimal auf der Seite. */
#haeuser {
  display: grid;
  gap: clamp(5px, 1.4vmin, 14px);
  align-content: start;
  min-height: 0;
}
.haus { display: grid; gap: 1px; border-left: 1px solid var(--farbe); padding-left: clamp(6px, 1.4vmin, 12px); }
.hkopf, .bew {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: clamp(5px, 1.2vmin, 10px);
  padding: clamp(1px, .5vmin, 5px) 0;
}
.hkopf b {
  font-weight: 400;
  font-size: clamp(10px, 1.85vmin, 14px);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--schrift);
}
.bew { padding-left: clamp(10px, 2.4vmin, 20px); }
/* ⚠ WO KEIN NAME STEHT, IST DIE ADRESSE DER NAME. Bei ① und ④ ist das Haus selbst das
   Ziel — die Zeile fuehrt deshalb nur die Adresse. Ohne diese Regel traege sie die
   Nebentypografie (.adr, 1.35vmin, .8 Deckkraft) und die Zeile saehe neben ZETESIS oder
   SCHATTENATLAS wie eine Fussnote aus statt wie ein gleichrangiger Eintrag. Dazu ist sie
   das EINZIGE Klickziel dieses Hauses, seit der Kopf kein Link mehr ist. */
.bew.selbst .adr { font-size: clamp(9px, 1.55vmin, 12px); opacity: 1; }
.bew b {
  font-weight: 400;
  font-size: clamp(9px, 1.55vmin, 12px);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--schrift-d);
}
.nr { color: var(--farbe); font-size: clamp(10px, 1.9vmin, 15px); line-height: 1; }
.adr {
  font-size: clamp(8px, 1.35vmin, 11px);
  color: var(--schrift-d);
  opacity: .8;
  white-space: nowrap;      /* eine umgebrochene Adresse liest sich wie zwei Adressen */
}
a.hkopf:hover b, a.bew:hover b, a.hkopf:focus-visible b, a.bew:focus-visible b { color: var(--farbe); }
/* ⚠ Die Adresse traegt die Rueckmeldung MIT. Bei ① und ④ ist das Haus selbst das Ziel;
   seine Zeile fuehrt deshalb nur die Adresse und kein <b>. Ohne diese Regel haetten genau
   die zwei Haeuser, deren Gestalt am 14.09. angeglichen wurde, keine Hover-Antwort mehr —
   angeglichen und dabei kaputtgemacht. */
a.hkopf:hover .adr, a.bew:hover .adr,
a.hkopf:focus-visible .adr, a.bew:focus-visible .adr { opacity: 1; color: var(--farbe); }
/* Ein Haus ohne eigenes Ziel bekommt beim Klick aufs Band die Hervorhebung — der Klick
   springt NICHT auf gut Glück zum ersten Bewohner (tuer.mjs). */
.haus.gewaehlt { background: rgba(127, 216, 255, .06); }

/* ⚠ HIER STAND `.pult` — entfernt 2026-09-14 mit dem Steuerpult selbst (CHR: „den link
   zur steuerung WEG von der apex seite"). Eine Regel ohne Markup ist kein harmloser Rest:
   sie liest sich beim naechsten Mal wie ein Bauteil, das es gibt. */

/* ── DER FUSS ──────────────────────────────────────────────────────────────────────────
   Sprache und Marken. Kein `position: fixed` — er ist die letzte Rasterzeile und liegt
   deshalb unten, ohne dass ihm jemand einen Platz zuweist. */
#fuss {
  display: grid;
  gap: clamp(4px, 1.1vmin, 10px);
  border-top: 1px solid var(--hud-rand);
  padding-top: clamp(5px, 1.3vmin, 12px);
}
#sprache, #marken { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: clamp(4px, 1.1vmin, 9px); }
#marken { font-size: clamp(8px, 1.35vmin, 11px); color: var(--schrift-d); letter-spacing: .1em; text-transform: uppercase; }
#marken a:hover { color: var(--schrift); }

/* ══ HOCHKANT ═════════════════════════════════════════════════════════════════════════
   Dach ÜBER Blatt, eine Spalte — die Voreinstellung oben. Auf dem Telefon rückt der Globus
   etwas zusammen, damit das Blatt vollständig neben ihn passt.
   ⚠ Hier weicht die Tür bewusst von CHRONOS ab. Dort steht für Telefon-Hochkant eine
     SPERRPLATTE (chronos.css:588: alles aus, „bitte drehen"). Für ein Messinstrument ist das
     richtig. Für eine Tür wäre es das Gegenteil ihrer Aufgabe — wer über einen geteilten Link
     kommt, kommt hochkant. CHRs Vorgabe war „hochkant OPTIMIERT", nicht „hochkant abgewiesen". */
@media (orientation: portrait) and (max-height: 900px) {
  /* Auf dem Telefon bekommt der Text Vorrang: der Globus darf bis auf sein Mindestmaß
     zusammengehen, statt das Blatt zu drücken. Eine Tür, deren Türen man nicht liest,
     ist ein Bild. */
  #tuer { gap: clamp(5px, 1.2vmin, 12px); }
  #blatt { gap: clamp(7px, 1.6vmin, 14px); }
}

/* ══ QUER ═════════════════════════════════════════════════════════════════════════════
   Dach NEBEN Blatt: links der Globus, rechts die vier Häuser — zwei mal zwei.
   Gefragt ist die AUSRICHTUNG, nicht die Breite: dasselbe Gerät gedreht bekommt dieselbe
   Anordnung wie der Schreibtisch, und niemand muss etwas nachladen. */
@media (orientation: landscape) {
  #tuer {
    grid-template-rows: minmax(0, 1fr);
    grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
    gap: clamp(10px, 2.4vmin, 30px);
    align-items: center;
  }
  #dach { height: 100%; }
  #blatt { align-content: center; }
  #haeuser {
    display: block;
    columns: 2;
    column-gap: clamp(10px, 2.4vmin, 26px);
  }
  .haus { break-inside: avoid; margin-bottom: clamp(5px, 1.4vmin, 14px); }
  .wort { grid-template-columns: clamp(70px, 11vmin, 116px) minmax(0, 1fr); }
}

/* Sehr flach (Telefon quer, ~360-430 px hoch): die Wortmarke darf nicht die halbe Höhe
   nehmen, und der Fuß rückt in EINE Zeile. */
@media (orientation: landscape) and (max-height: 460px) {
  #marke { font-size: clamp(15px, 4.4vmin, 24px); letter-spacing: .18em; }
  #tuer { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); }
  /* ⚠ Hier stand `grid-auto-flow: column`. Gemessen bei 800x360: es presste #sprache in
     eine 242-px-Spalte, in der die drei Sprachknöpfe auf zwei Reihen umbrachen — der Fuß
     wurde dadurch 78 px hoch statt 40. Ein Kniff, der Höhe sparen sollte und sie kostete.
     Flex nimmt die volle Breite und bricht erst um, wenn es wirklich nicht passt. */
  #fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
          column-gap: clamp(10px, 2.4vmin, 24px); row-gap: 4px; }
}

/* ══ FINGER STATT MAUS ════════════════════════════════════════════════════════════════
   Nach der EINGABEART gefragt, nicht nach der Breite — die Regel steht in chronos.css
   ausgeschrieben und gilt allgemein: ein Touch-Bildschirm am Schreibtisch bekäme sonst
   weiter Maus-Größen, ein schmales Fenster mit Maus unnötig fette.
   ⚠ Nur ANKLICKBARES wird 44 px. Die beiden Überschriften ohne Ziel (Forschung, LIMES) sind
     keine Ziele — sie mitzuvergrößern kostete auf dem Telefon 88 px Höhe für nichts. */
@media (pointer: coarse) {
  a.hkopf, a.bew { min-height: 44px; align-items: center; }
  .schalter { min-height: 34px; padding: 4px 10px; }
}

/* ══ RUHE ═════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  #buehne canvas { animation: none; }
}