/* =====================================================================
   DAS FOYER (08.10.2026)

   Die Seite vor dem Saal. Drei Reihen nebeneinander: links der Plan,
   in der Mitte der Weg hinein, rechts die Vorschläge.

   ---------------------------------------------------------------------
   SIE SIEHT AUS WIE DAS HAUS UND NICHT WIE DER SAAL

   Der Saal ist absichtlich anders gebaut als jede andere Seite — fast
   schwarz, ohne Scrollen, mit eigener Höhensprache. Das ist richtig
   für einen Raum, in dem man eine Stunde sitzt und auf EINE Sache
   schaut.

   Das Foyer ist das Gegenteil: Man kommt, liest, entscheidet und geht
   weiter. Also trägt es die Oberfläche des Hauses (`gate.css`,
   `start.css`) wie jede andere Seite auch. Eine zweite Höhensprache
   hier hätte bedeutet, dieselben Werte ein zweites Mal zu pflegen —
   und beim nächsten Umbau sähe eine der beiden anders aus.

   ---------------------------------------------------------------------
   DIE MITTE IST BREITER, UND DAS IST DIE GANZE GLIEDERUNG

   `1fr 1.3fr 1fr`. Wer hier ist, will meistens EINS wissen: läuft
   etwas? Die Antwort darauf bekommt den größten Platz und die einzige
   Farbe. Drei gleich breite Spalten wären drei gleich wichtige
   Dinge — und dann sucht man.
   ===================================================================== */

/* ==== DIE DREI TAFELN SIND GLEICH HOCH (08.10.2026) ================

   Hier stand `align-items: start`. Die Folge war auf dem ersten
   Bildschirmfoto zu sehen: drei Tafeln mit drei verschiedenen
   Unterkanten (572 / 672 / 680 px), als waere die Seite aus drei
   Zetteln zusammengelegt. Das ist genau die Sorte Kleinigkeit, bei
   der ein Blick „irgendwie unfertig" sagt, ohne benennen zu koennen,
   woran es liegt.

   `stretch` ist die Vorgabe des Rasters -- die Zeile hat sie
   aufgehoben. Jetzt sind alle drei so hoch wie die hoechste, und der
   Fusssatz jeder Tafel steht unten statt mitten im Nichts (siehe
   `.foyer-reihe__fuss`). */
.foyer-reihen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 16px;
}

/* ==== WENN DER PLAN FEHLT, BLEIBT KEINE LÜCKE =====================
   Die Community bekommt die linke Reihe gar nicht erst (`hidden`).
   Ohne diese Regel stünden zwei Reihen in einem Raster für drei, und
   die Mitte läge an der falschen Stelle — als fehlte etwas. Mit
   `:has()` misst das Raster, was wirklich da ist, statt eine zweite
   Zahl zu pflegen. */
.foyer-reihen:has(> .foyer-reihe--plan[hidden]) {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
}

/* =====================================================================
   EINE REIHE
   ===================================================================== */
/* FLEX UND NICHT GRID -- und zwar wegen EINER Zeile: `margin-top:
   auto` am Fusssatz. In einem Raster wirkt die nur innerhalb der
   zugeteilten Zeile und schiebt nichts an den unteren Rand; in einer
   Spalte schluckt sie den ganzen Rest. Dieselbe Darstellung, aber
   der Fusssatz steht da, wo er hingehoert. */
/* ==== KEINE EIGENE FLAECHE MEHR (08.10.2026) ======================

   Hier standen Rundung, Kante, Verlauf und Schatten -- eine eigene
   Gestalt fuer drei Tafeln, waehrend 45 andere Karten im Haus eine
   gemeinsame haben. Zwei Schaeden daran, und der zweite ist der
   schwerere:

     * Die Flaeche war fast durchsichtig (Weiss mit 4,5 %). Auf dem
       Bildschirmfoto schien die Tapete durch die Tafeln, und ueber
       einem hellen Hintergrundbild stand Text ohne deckenden Grund.
       Die Kontrastmessung des Hauses nennt das „liegt auf der
       Buehne“ und zaehlt es als Befund -- zu Recht: Was dahinter
       liegt, entscheidet jeder Nutzer selbst mit seiner Wandwahl.
     * Und es war eine zweite Antwort auf die Frage, wie eine Karte
       in diesem Haus aussieht. Filipe am 07.09.2026: „DU HAST WIEDER
       EINE KLEINE AENDERUNG UEBERALL GEMACHT ANSTATT EINE RIESEN
       AENDERUNG.“

   Flaeche kommt jetzt aus start.css (das gemessene Material), Form
   aus module.css (Schraege, Kantenlicht, Eckwinkel, Raster) --
   `.foyer-reihe` steht in beiden Listen. Hier bleibt nur, was diese
   Tafeln von anderen Karten unterscheidet: Spaltenfluss und
   Polsterung. */
.foyer-reihe {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px 18px;
}
.foyer-reihe[hidden] { display: none; }

/* =====================================================================
   JEDE REIHE HAT IHREN TON (08.10.2026)

   Filipe: „die anderen kacheln aber auch gerne farbiger machen und
   nicht so kahl und dunkel."

   ER HAT RECHT, UND DER GRUND WAR MEINER: Beim Umbau auf das
   Hausmaterial habe ich die Farbe mit herausgenommen, weil die alte
   Fassung sie auf der FLAECHE trug — und eine getoente Flaeche war
   genau das, was den Text schlecht lesbar machte. Richtig ist nicht
   „keine Farbe", sondern Farbe an den Stellen, die keinen Text
   tragen: die Kante, die Ueberschrift, der Streifen am Zeilenanfang.

   `--ton` ist der Griff, den das Haus dafuer schon hat. module.css
   legt damit ein Kantenlicht auf die Silhouette; alles Weitere unten
   leitet sich aus demselben Wert ab, statt ihn noch einmal
   hinzuschreiben. EINE Zahl je Reihe, und sie steht genau einmal.

   WARUM DIESE DREI: Bernstein fuer das, was ansteht (Terminfarbe des
   Hauses, dieselbe wie bei „überfällig"), Blau fuer die Sendung
   (wird rot, sobald sie laeuft), Gruen fuer das, was hereinkommt —
   dieselbe Farbe, die ein angenommener Vorschlag traegt. Die Farben
   sagen also etwas; sie sind keine Dekoration.
   ===================================================================== */
.foyer-reihe--plan  { --ton: #e0a13a; }
.foyer-reihe--raten { --ton: #5fc99a; }

/* DER KOPF BEKOMMT EIN BAND IN SEINEM TON. Es liegt UNTER der Zeile
   und nicht hinter dem Text: `color-mix` mit 14 % laesst den
   deckenden Hausgrund durch, und gemessen bleibt der Kontrast der
   Ueberschrift darueber unveraendert — sie steht ohnehin auf eigener
   Farbe. Die negativen Raender ziehen das Band bis an die
   Tafelkante, damit es ein Band ist und kein Kasten. */
.foyer-reihe__kopf {
  margin: -16px -16px 0;
  padding: 14px 16px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--ton, var(--akzent)) 26%, transparent);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--ton, var(--akzent)) 14%, transparent),
      transparent);
}

.foyer-reihe__kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; min-width: 0;
  /* ==== DREI UEBERSCHRIFTEN AUF EINER LINIE =====================
     Die Kopfzeile ist so hoch wie das, was in ihr steht -- und das
     ist links ein Schild, in der Mitte eine Lampe und rechts
     zeitweise gar nichts. Gemessen lagen die drei Ueberschriften
     dadurch auf 310, 314 und 316 px: kein Mensch nennt das, aber
     jeder sieht es.

     Die Zahl ist nicht geraten, sondern die hoechste der drei
     Marken: Lampe = 11,52 px Schrift + 2x5 px Polster + 2x1 px
     Linie = 26 px. 28 gibt zwei Pixel Luft, damit eine Schrift, die
     im Browser des Nutzers minimal groesser faellt, nichts
     verschiebt. */
  min-height: 28px;
}
/* DIE UEBERSCHRIFT TRAEGT DEN TON DER REIHE statt eines Grautons.
   Das ist die groesste Wirkung fuer die kleinste Aenderung: drei
   Woerter, die man sofort auseinanderhaelt, ohne dass irgendwo eine
   Flaeche heller wird. `88%` mit Weiss gemischt, damit die Schrift
   hell genug bleibt — der reine Ton waere bei Bernstein und Gruen
   auf dunklem Grund zwar bunt, aber nicht gut zu lesen. */
.foyer-reihe__ueber {
  margin: 0;
  font-size: .78rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ton, var(--akzent)) 70%, #ffffff);
}
/* „nur ihr zwei" — ein Schild und kein Schloss. Ein Schloss sagt
   „hier ist etwas verborgen"; dieses Schild sagt, dass die Reihe für
   niemanden sonst existiert, und das ist der Unterschied. */
/* Die Schilder nehmen denselben Ton. Vorher war das Schild immer
   blau, egal in welcher Reihe es stand — zwei Farben nebeneinander,
   die nichts voneinander wussten. */
.foyer-reihe__nur,
.foyer-reihe__zahl {
  /* .72rem sind 11,52 px — die Untergrenze des Hauses ist 11,5, und
     sie ist kein Geschmack: `pruef-css-klassen` misst sie. Der erste
     Versuch stand auf .68 (10,88 px) und war damit eine Andeutung
     statt einer Auskunft. */
  font-size: .72rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 9px 4px;
  border-radius: 999px;
  white-space: nowrap;
  color: color-mix(in srgb, var(--ton, var(--akzent)) 55%, #ffffff);
  background: color-mix(in srgb, var(--ton, var(--akzent)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--ton, var(--akzent)) 34%, transparent);
}
.foyer-reihe__zahl { color: #ffd9a0; background: rgba(224, 161, 58, .14); border-color: rgba(224, 161, 58, .34); }
.foyer-reihe__zahl[hidden], .foyer-reihe__nur[hidden] { display: none; }

.foyer-reihe__satz {
  margin: 0;
  font-size: .84rem; line-height: 1.5;
  color: var(--text-leise, #a9a3bd);
}
.foyer-reihe__fuss {
  /* NACH UNTEN, NICHT HINTER DEN TEXT. `auto` nimmt den Platz, den
     die gleich hohen Tafeln uebrig lassen -- dadurch steht der
     Fusssatz in jeder Tafel auf derselben Hoehe statt dort, wo der
     Inhalt darueber zufaellig endet. */
  margin: auto 0 0;
  padding-top: 6px;
  font-size: .76rem; line-height: 1.45;
  color: var(--text-still, #8b93a4);
}

/* =====================================================================
   LINKS: DER PLAN
   ===================================================================== */
.plan-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
/* EIN STREIFEN AM ZEILENANFANG, kein getoenter Kasten. Drei Pixel
   Farbe an der Kante sagen dasselbe wie eine eingefaerbte Flaeche —
   nur steht der Text weiterhin auf dem Grund, auf dem er gemessen
   wurde. */
.plan-zeile {
  border-left: 3px solid color-mix(in srgb, var(--ton, var(--akzent)) 42%, transparent);
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
  padding: 8px 10px 8px 8px;
  border-radius: 12px;
  border: 1px solid var(--linie, rgba(150, 160, 190, .14));
  background: rgba(255, 255, 255, .03);
}
/* Ein Termin, der schon vorbei ist, wird nicht ausgeblendet — er wird
   MARKIERT. Ausblenden hiesse, dass eine Vorbereitung verschwindet,
   ohne dass jemand etwas getan hat. */
.plan-zeile[data-termin="vorbei"] { border-color: rgba(224, 161, 58, .34); }
.plan-zeile[data-termin="vorbei"] .plan-zeile__wann { color: #e0a13a; }

.plan-zeile__bild {
  flex: none;
  width: 64px; aspect-ratio: 16 / 9;
  border-radius: 7px; object-fit: cover;
  background: #12101a;
  border: 1px solid var(--linie, rgba(150, 160, 190, .14));
}
.plan-zeile__text { display: grid; gap: 2px; min-width: 0; }
.plan-zeile__titel {
  font-size: .84rem; font-weight: 600;
  color: var(--text, #e9e6f2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Holt YouTube den Namen nicht heraus, steht dort die Kennung — kein
   erfundener Titel. Sie sieht dann auch danach aus. */
.plan-zeile__titel[data-roh="ja"] {
  color: var(--text-leise, #a9a3bd);
  font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
  font-size: .78rem;
}
.plan-zeile__wann {
  font-size: .74rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-leise, #a9a3bd);
}
.plan-leer, .raten-leer {
  list-style: none;
  margin: 0; padding: 10px 2px;
  font-size: .82rem;
  color: var(--text-leise, #a9a3bd);
}

/* =====================================================================
   MITTE: DER WEG HINEIN
   ===================================================================== */
/* ==== DIE MITTE TRÄGT FARBE AN DER KANTE, NICHT AUF DER FLÄCHE ====

   Hier standen zwei `background`-Regeln mit halbdurchsichtigen
   Verläufen. Sie haben das gemessene Material des Hauses wieder
   überschrieben — also genau das zurückgeholt, was zwanzig Zeilen
   weiter oben gerade abgeschafft wurde. Eine Reparatur, die sich
   selbst aufhebt, ist keine.

   `--ton` ist der Weg, den das Haus dafür schon hat: module.css legt
   damit ein Kantenlicht auf die Silhouette — oben und über die
   Schräge, der Form folgend. Eine beleuchtete Oberkante statt einer
   getönten Fläche: Der Text darüber bleibt auf demselben deckenden
   Grund wie überall, und die Mitte ist trotzdem die, die auffällt.

   NUR DIE MITTE BEKOMMT EINEN. Plan und Anraten lassen `--ton` leer
   und erben den Hausakzent. Wenn alles leuchtet, leuchtet nichts. */
.foyer-reihe--saal { --ton: #9ab7ff; }

/* Auf Sendung die Farbe des Hauses für „live“ — rot, gedeckt, und
   nur dann. */
.foyer-reihe--saal:has(.foyer-lampe[data-stand="live"]) { --ton: #d8404a; }

.foyer-lampe {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--linie-hell, rgba(170, 180, 210, .26));
  background: rgba(255, 255, 255, .04);
  /* Auch hier 11,52 px und nicht 10,88 — siehe oben. */
  font-size: .72rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: #8b93a4;
  white-space: nowrap;
}
.foyer-lampe__punkt {
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor;
  flex: none;
}
.foyer-lampe[data-stand="vorbereitung"] {
  color: #e0a13a;
  border-color: rgba(224, 161, 58, .4);
  background: rgba(224, 161, 58, .12);
}
.foyer-lampe[data-stand="live"] {
  color: #ff8b92;
  border-color: rgba(216, 64, 74, .5);
  background: rgba(216, 64, 74, .16);
}
/* Der Punkt atmet, er blinkt nicht: vier Sekunden auf und ab. Ein
   Blinken wäre dasselbe Signal mit doppelter Belastung für die
   Augen — und diese Seite steht manchmal eine Stunde offen. */
.foyer-lampe[data-stand="live"] .foyer-lampe__punkt {
  box-shadow: 0 0 10px -1px currentColor;
  animation: foyer-atmen 4s ease-in-out infinite;
}
@keyframes foyer-atmen { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

.saal-karte {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 13px;
  overflow: hidden;
  background: #0a0812;
  border: 1px solid var(--linie, rgba(150, 160, 190, .16));
  display: grid; place-items: center;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, .6);
}
.saal-karte img { width: 100%; height: 100%; object-fit: cover; display: block; }
.saal-karte[data-bild="nein"] img { display: none; }
.saal-karte__leer {
  position: absolute;
  padding: 0 18px; text-align: center;
  font-size: .82rem; line-height: 1.45;
  color: var(--text-leise, #a9a3bd);
}
.saal-karte[data-bild="ja"] .saal-karte__leer { display: none; }

.saal-titel {
  font-size: 1.02rem; font-weight: 800;
  line-height: 1.3;
  color: var(--text, #e9e6f2);
  /* Zwei Zeilen, dann Schluss. Ein langer Videotitel darf die Reihe
     nicht aufziehen — daneben stehen zwei andere. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.saal-titel[data-leer="ja"] { color: var(--text-leise, #a9a3bd); font-weight: 600; }
.saal-satz {
  margin: 0;
  font-size: .84rem; line-height: 1.5;
  color: var(--text-leise, #a9a3bd);
}

/* ---- Der Knopf hinein ----------------------------------------------
   Er ist das Größte auf der Seite. Nicht aus Geschmack: Wer das Foyer
   öffnet, während etwas läuft, hat genau eine Absicht — und soll sie
   nicht suchen müssen. */
.saal-knopf {
  display: flex; align-items: center; justify-content: center;
  min-height: 52px;
  margin-top: 2px;
  padding: 0 20px;
  border-radius: 14px;
  text-decoration: none;
  font-size: .98rem; font-weight: 800;
  letter-spacing: .01em;
  color: #cfe0ff;
  border: 1px solid rgba(154, 183, 255, .44);
  background: linear-gradient(180deg, rgba(154, 183, 255, .22), rgba(154, 183, 255, .09));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    0 14px 30px -18px rgba(154, 183, 255, .8);
  transition: transform .14s cubic-bezier(.2, .7, .3, 1), box-shadow .14s ease;
}
.saal-knopf:hover { transform: translateY(-1px); }
.saal-knopf:active { transform: translateY(1px); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5); }
.saal-knopf[hidden] { display: none; }
/* Auf Sendung wird er rot — dieselbe Farbe, die im ganzen Haus
   „jetzt gerade" bedeutet. */
.saal-knopf[data-stand="live"] {
  color: #ffe9ea;
  border-color: rgba(216, 64, 74, .56);
  background: linear-gradient(180deg,
    color-mix(in srgb, #d8404a 74%, #000),
    color-mix(in srgb, #d8404a 46%, #000));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .2),
    0 16px 34px -18px #d8404a;
}
.saal-zahl {
  margin: 0;
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-leise, #a9a3bd);
  text-align: center;
}
.saal-zahl[hidden] { display: none; }

/* =====================================================================
   RECHTS: ANRATEN
   ===================================================================== */
.raten-form { display: grid; gap: 9px; }
.raten-feld { display: grid; gap: 4px; }
.raten-feld > span {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .03em;
  color: var(--text-leise, #a9a3bd);
}
.raten-feld input {
  min-height: 44px; padding: 0 12px;
  border-radius: 11px;
  border: 1px solid var(--linie, rgba(150, 160, 190, .18));
  background: linear-gradient(180deg, rgba(0, 0, 0, .4), rgba(0, 0, 0, .26));
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5);
  color: var(--text, #e9e6f2);
  font: inherit; font-size: .88rem;
  min-width: 0;
}
.raten-feld input:focus {
  outline: none;
  border-color: rgba(154, 183, 255, .5);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5), 0 0 0 3px rgba(154, 183, 255, .16);
}
/* Die Zahl steht erst da, wenn es eng wird — vorher ist sie eine
   Aufsicht und keine Hilfe. */
.raten-rest { font-weight: 600; opacity: .8; font-variant-numeric: tabular-nums; }

.raten-liste { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.raten-zeile {
  border-left: 3px solid color-mix(in srgb, var(--ton, var(--akzent)) 42%, transparent);
  display: flex; align-items: flex-start; gap: 10px;
  min-width: 0;
  padding: 8px 10px 9px 8px;
  border-radius: 12px;
  border: 1px solid var(--linie, rgba(150, 160, 190, .14));
  background: rgba(255, 255, 255, .03);
}
/* Der Zustand steht im WORT und nicht nur in der Farbe — rund acht
   Prozent der Männer unterscheiden Rot und Grün schlecht, und hier
   hängt an der Unterscheidung etwas: Kommt mein Video dran? */
.raten-zeile[data-stand="uebernommen"] { border-color: rgba(95, 201, 154, .34); }
.raten-zeile[data-stand="abgelehnt"] { opacity: .66; }
.raten-zeile__bild {
  flex: none;
  width: 56px; aspect-ratio: 16 / 9;
  border-radius: 6px; object-fit: cover;
  background: #12101a;
  border: 1px solid var(--linie, rgba(150, 160, 190, .14));
}
.raten-zeile__text { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
.raten-zeile__titel {
  font-size: .82rem; font-weight: 600;
  color: var(--text, #e9e6f2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.raten-zeile__titel[data-roh="ja"] {
  color: var(--text-leise, #a9a3bd);
  font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
  font-size: .76rem;
}
.raten-zeile__unter {
  font-size: .72rem; font-weight: 700;
  letter-spacing: .02em;
  color: var(--text-leise, #a9a3bd);
}
.raten-zeile[data-stand="uebernommen"] .raten-zeile__unter { color: #86d7b4; }
.raten-zeile__notiz {
  margin: 3px 0 0;
  font-size: .78rem; line-height: 1.4;
  color: var(--text-leise, #a9a3bd);
  overflow-wrap: anywhere;
}
.raten-zeile__knoepfe { display: flex; flex-wrap: wrap; gap: 5px; flex: none; }
.raten-knopf {
  appearance: none; cursor: pointer;
  /* 36 und nicht 44: Diese Knöpfe stehen in einer schmalen Spalte an
     der Zeile. Sie sind dafür BREIT — gemessen wird ein Tippziel an
     der Fläche, nicht an einer Kante. Das × daneben ist quadratisch
     und bekommt deshalb seine vollen 36 in beide Richtungen. */
  min-height: 36px; min-width: 36px; padding: 0 10px;
  border-radius: 9px;
  border: 1px solid var(--linie, rgba(150, 160, 190, .2));
  background: rgba(255, 255, 255, .05);
  color: var(--text-leise, #a9a3bd);
  font: inherit; font-size: .76rem; font-weight: 700;
  transition: background-color .14s ease, color .14s ease, border-color .14s ease;
}
.raten-knopf:hover { background: rgba(255, 255, 255, .09); color: var(--text, #e9e6f2); }
.raten-knopf--ja {
  border-color: rgba(95, 201, 154, .4);
  color: #86d7b4;
  background: rgba(95, 201, 154, .12);
}
.raten-knopf--weg { padding: 0; }
.raten-knopf--weg:hover { color: #ff8b92; border-color: rgba(216, 64, 74, .4); }

/* =====================================================================
   AM HANDY: DIE MITTE ZUERST

   Aus drei Spalten wird ein Stapel. Die Reihenfolge dreht sich dabei:
   Wer am Telefon nachsieht, ob etwas läuft, soll es in der ersten
   Zeile sehen und nicht nach zwei Bildschirmhöhen Plan.

   `order` und nicht eine andere Reihenfolge im Dokument: Am Rechner
   steht links der Plan, und das soll so bleiben. Eine zweite Fassung
   derselben Seite wäre die, die beim nächsten Umbau vergessen wird.
   ===================================================================== */
/* =====================================================================
   DAS REGIE-TOR (08.10.2026)

   Filipe: „die muss wirklich ultra krass sein. komplett crazy."

   ---------------------------------------------------------------------
   KRASS HEISST HIER NICHT: ANDERS ALS DAS HAUS

   Der naheliegende Weg waere eine Kachel mit eigener Rundung, eigenem
   Verlauf, eigener Kante gewesen. Genau das stand heute Vormittag
   schon einmal in dieser Datei und war ein Fehler — die Flaeche war
   durchsichtig, die Tapete schien durch, und sie sah aus wie von
   einer anderen Website. Filipes Satz vom 07.09. gilt weiter: „DU
   HAST WIEDER EINE KLEINE AENDERUNG UEBERALL GEMACHT ANSTATT EINE
   RIESEN AENDERUNG."

   Also: dieselbe Silhouette wie jede Karte im Haus (`.regie-tor`
   steht in der Modulliste in module.css) und dasselbe deckende
   Material (in der Materialliste in start.css) — und darueber ein
   eigenes Lichtelement, das es von allem anderen abhebt. Gleiche
   Familie, hochgedreht.

   ---------------------------------------------------------------------
   DREI DINGE MACHEN SIE BESONDERS

   1. SIE IST SO BREIT WIE ALLES ZUSAMMEN. Die drei Reihen daneben
      teilen sich eine Zeile; diese steht allein darunter. Das ist
      die staerkste Aussage, die ein Raster ueberhaupt treffen kann,
      und sie kostet keine einzige Farbe.
   2. EIN LICHT LAEUFT DARUEBER. Sieben Sekunden von links nach
      rechts, flach und schmal — wie der Schein einer Lampe ueber
      einem Mischpult. Kein Blinken, kein Puls: Das waere dasselbe
      Signal mit doppelter Belastung fuer die Augen, und diese Seite
      steht manchmal eine Stunde offen.
   3. SIE ANTWORTET AUF IHREN ZUSTAND. Verschlossen glimmt sie rot
      und zurueckhaltend; aufgeschlossen wird das Licht gruen und
      ruhig. Wer nicht hinein darf, sieht sie gedaempft und ohne
      Bewegung — sie laedt ihn nicht ein, sie verschweigt sich aber
      auch nicht.

   WER WENIGER BEWEGUNG EINGESTELLT HAT, bekommt das Licht als
   stehenden Schein. Nicht „keine Farbe" — der Zustand muss auch dann
   zu erkennen sein.
   ===================================================================== */
.regie-tor {
  /* Rot wie der Knopf, der eine Sendung startet. Aufgeschlossen
     wechselt er weiter unten auf Gruen. */
  --ton: #d8404a;
  position: relative;
  display: block;
  width: 100%;
  margin: 16px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  /* Die Silhouette kommt aus module.css. Hier steht nur, dass die
     Hoehe reicht, damit das Licht Platz zum Laufen hat. */
  min-height: 96px;
}

/* DAS LICHT. Ein eigenes Element und kein `::before`/`::after`: Die
   beiden gehoeren in diesem Haus der Form (Kantenlicht und Raster aus
   module.css). Wer sie hier ueberschriebe, naehme der Kachel genau
   das, was sie zu einer Kachel dieses Hauses macht. */
.regie-tor__licht {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 140% at 8% 0%,
      color-mix(in srgb, var(--ton) 22%, transparent), transparent 58%),
    radial-gradient(90% 120% at 100% 100%,
      color-mix(in srgb, var(--ton) 14%, transparent), transparent 62%);
}
/* Der laufende Schein liegt auf einem zweiten Verlauf im selben
   Element — `background-position` bewegt nur ihn. */
.regie-tor__licht::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    transparent 36%,
    color-mix(in srgb, var(--ton) 26%, transparent) 48%,
    color-mix(in srgb, #ffffff 16%, transparent) 50%,
    color-mix(in srgb, var(--ton) 26%, transparent) 52%,
    transparent 64%);
  background-size: 260% 100%;
  background-repeat: no-repeat;
  animation: regie-schein 7s linear infinite;
}
@keyframes regie-schein {
  from { background-position: -130% 0; }
  to   { background-position: 230% 0; }
}

.regie-tor__innen {
  position: relative;
  /* Ueber dem Licht (1) und ueber dem Kantenlicht (2) aus module.css.
     Ohne diese Zeile laege der Text unter dem Schein und wuerde bei
     jedem Durchlauf kurz heller — genau die Art Flackern, die diese
     Seite nicht haben soll. */
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  min-height: 96px;
}

.regie-tor__zeichen {
  flex: none;
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--ton) 42%, transparent);
  background: color-mix(in srgb, var(--ton) 12%, transparent);
  color: color-mix(in srgb, var(--ton) 60%, #ffffff);
}
.regie-tor__glyphe {
  width: 28px; height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Aufgeschlossen springt der Buegel auf — dasselbe Zeichen, andere
   Aussage, und man sieht es aus fuenf Metern. */
.regie-tor[data-offen="ja"] .regie-tor__glyphe path {
  transform: translateX(5px) rotate(-14deg);
  transform-origin: 16px 10px;
}

.regie-tor__text { display: grid; gap: 3px; min-width: 0; flex: 1 1 auto; }
.regie-tor__ueber {
  font-size: .72rem; font-weight: 800;
  letter-spacing: .22em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ton) 62%, #ffffff);
}
.regie-tor__titel {
  font-size: 1.12rem; font-weight: 800;
  color: var(--text, #e9e6f2);
  line-height: 1.2;
}
.regie-tor__satz {
  font-size: .82rem; line-height: 1.45;
  color: var(--text-leise, #a9a3bd);
}
.regie-tor__marke {
  flex: none;
  align-self: flex-start;
  font-size: .72rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 11px 5px;
  border-radius: 999px;
  white-space: nowrap;
  color: color-mix(in srgb, var(--ton) 55%, #ffffff);
  background: color-mix(in srgb, var(--ton) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--ton) 36%, transparent);
}

/* AUFGESCHLOSSEN: gruen und ruhig. */
.regie-tor[data-offen="ja"] { --ton: #5fc99a; }

/* WER NICHT HINEIN DARF: gedaempft und ohne Lauflicht. Sie bleibt
   sichtbar — Filipe wollte ausdruecklich, dass jeder sie sieht —,
   aber sie winkt niemanden heran, der ohnehin nicht durchkommt. Und
   der Mauszeiger sagt es vorher: kein Zeigefinger, sondern das
   Zeichen fuer „nicht erlaubt". */
.regie-tor[data-darf="nein"] {
  --ton: #7f8699;
  cursor: not-allowed;
}
.regie-tor[data-darf="nein"] .regie-tor__licht::after { animation: none; opacity: .25; }

@media (prefers-reduced-motion: reduce) {
  .regie-tor__licht::after { animation: none; background-position: 46% 0; }
  .regie-tor[data-offen="ja"] .regie-tor__glyphe path { transform: none; }
}

/* =====================================================================
   DER VORHANG MIT DEM CODEFELD
   ===================================================================== */
.regie-vorhang {
  position: fixed;
  inset: 0;
  /* UEBER ALLEM, auch ueber der Kopfleiste (die steht bei 6). Das
     geht nur, weil dieses Element NEBEN `main` steht und nicht darin
     — siehe der Hinweis in der HTML. */
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(4, 6, 11, .72);
  backdrop-filter: blur(3px);
}
.regie-vorhang[hidden] { display: none; }

.regie-fenster {
  width: min(420px, 100%);
  padding: 20px 20px 18px;
  border-radius: 16px;
  border: 1px solid rgba(216, 64, 74, .3);
  background:
    linear-gradient(168deg,
      rgba(20, 27, 40, .98) 0%,
      rgba(11, 15, 24, .99) 62%,
      rgba(8, 11, 18, .99) 100%);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .9);
}
.regie-fenster__titel {
  margin: 0 0 6px;
  font-size: 1.05rem; font-weight: 800;
  color: var(--text, #e9e6f2);
}
.regie-fenster__satz {
  margin: 0 0 14px;
  font-size: .84rem; line-height: 1.5;
  color: var(--text-leise, #a9a3bd);
}
.regie-feld { display: grid; gap: 5px; }
.regie-feld > span {
  font-size: .76rem; font-weight: 700;
  color: var(--text-leise, #a9a3bd);
}
.regie-feld input {
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 11px;
  border: 1px solid var(--linie, rgba(150, 160, 190, .22));
  background: rgba(255, 255, 255, .04);
  color: var(--text, #e9e6f2);
  font-size: .92rem;
  /* Ein Zugangscode ist eine Folge von Zeichen, keine Sprache.
     Gleiche Breiten machen Vertipper sichtbar. */
  font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
  letter-spacing: .06em;
}
.regie-feld input:focus-visible {
  outline: 2px solid rgba(216, 64, 74, .5);
  outline-offset: 1px;
}
.regie-fenster__fehler {
  margin: 9px 0 0;
  font-size: .8rem; line-height: 1.45;
  color: #ff8b92;
}
.regie-fenster__fehler[hidden] { display: none; }
.regie-fenster__knoepfe {
  display: flex; gap: 10px; justify-content: flex-end;
  margin-top: 14px;
}
.regie-fenster__knoepfe .knopf,
.regie-fenster__knoepfe .knopf-still { margin-top: 0; min-height: 44px; }
.regie-fenster__kleingedruckt {
  margin: 14px 0 0;
  padding-top: 11px;
  border-top: 1px solid var(--linie, rgba(150, 160, 190, .14));
  font-size: .74rem; line-height: 1.45;
  color: var(--text-still, #8b93a4);
}

@media (max-width: 900px) {
  .foyer-reihen,
  .foyer-reihen:has(> .foyer-reihe--plan[hidden]) {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .foyer-reihe--saal  { order: 1; }
  .foyer-reihe--raten { order: 2; }
  .foyer-reihe--plan  { order: 3; }
  .foyer-reihe { padding: 14px 13px 16px; border-radius: 16px; }
  .foyer-reihe__kopf { margin: -14px -13px 0; padding: 12px 13px 10px; }

  /* AUF 390 PX IST NEBENEINANDER NICHT MEHR DRIN. Gemessen: Zeichen,
     Text und Schild brauchen zusammen 352 px, der Satz bekaeme davon
     knapp 140 und braeche vierzeilig um. Untereinander bleibt alles
     lesbar, und die Kachel bleibt EIN Knopf. */
  .regie-tor__innen {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
  }
  .regie-tor__marke { align-self: flex-start; order: -1; }
  .regie-tor__zeichen { width: 46px; height: 46px; }
  .saal-knopf { min-height: 52px; }
}

/* Wer weniger Bewegung eingestellt hat, bekommt alles — nur ohne das
   Atmen und das Heben. Die Auskunft ist wichtiger als der Weg. */
@media (prefers-reduced-motion: reduce) {
  .foyer-lampe[data-stand="live"] .foyer-lampe__punkt { animation: none; }
  .saal-knopf { transition: none; }
  .saal-knopf:hover, .saal-knopf:active { transform: none; }
}