dogfather-universe/workspace/reaktion-foyer.html

<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>Reaction · Team Dogi</title>
<meta name="robots" content="noindex, nofollow" />
<link rel="manifest" href="/workspace/app.webmanifest" />
<meta name="theme-color" content="#06090f" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png?v=202610081102" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202610081102" />
<link rel="stylesheet" href="assets/css/gate.css?v=202610081102" />
<link rel="stylesheet" href="assets/css/start.css?v=202610081102" />
<link rel="stylesheet" href="assets/css/foyer.css?v=202610081102" />
<link rel="stylesheet" href="assets/css/module.css?v=202610081102" />
<link rel="stylesheet" href="assets/css/haus.css?v=202610081102" />
</head>

<body class="start">

<div class="schleier" aria-hidden="true"></div>

<header class="kopfleiste">
  <button type="button" class="zurueck-knopf" id="zurueck" hidden>
    <svg class="zurueck-knopf__pfeil" viewBox="0 0 24 24" aria-hidden="true">
      <path d="M14.5 5.5 8 12l6.5 6.5" />
    </svg>
    <span class="zurueck-knopf__text">Zurück</span>
  </button>
  <p class="marke"><span class="marke__text"><a class="zurueck" href="start.html">Team&nbsp;Dogi</a> · Reaction</span></p>
  <div class="kopfleiste__rechts">
    <span class="wer" id="wer">…</span>
    <button type="button" class="abmelden" id="abmelden">Abmelden</button>
  </div>
</header>

<!-- ======================================================================
     DAS FOYER (08.10.2026)

     Filipe: „diese kachel soll nicht mehr geschlossen sein, ABER wenn
     man drauf drückt geht zuerst eine seite auf mit
     reihen/kategorien. links eine reihe wo die nächsten geplanten
     videos schon bereit stehen. wan und umd wie viel uhr … und das
     soll geschlossen sein außer für vanvan und dogfather. in der
     mitte sollen die leute dan wenn eine sendung läuft drauf drücken
     können und der sendung beitreten. auch bei der vorschau schon und
     dan rechts will ich die letzte reihe/kategorie, da sollen die
     leute alle mir videos anraten können."

     ---------------------------------------------------------------------
     WARUM DAS EINE EIGENE SEITE IST UND KEIN VIERTER ZUSTAND DES SAALS

     Der Saal meldet jeden an, der ihn oeffnet („dabei"), baut
     Verbindungen auf und haelt den Ereignisstrom offen. Das ist
     richtig fuer jemanden, der zusieht -- und falsch fuer jemanden,
     der nur nachsehen will, ob heute Abend etwas laeuft. Waere das
     Foyer der vierte Zustand derselben Seite, zaehlte jeder Blick
     als Zuschauer, und die Zahl im Regiepult saehe nach Publikum
     aus, wo niemand zusieht.

     Hier wird nur GELESEN. Erst der Knopf in der Mitte fuehrt in den
     Saal, und ab da gilt alles, was dort gilt.

     ---------------------------------------------------------------------
     DREI REIHEN, UND DIE MITTE IST DIE BREITESTE

     Links der Plan, in der Mitte der Weg hinein, rechts die
     Vorschlaege. Die Mitte bekommt mehr Platz, weil sie das Einzige
     ist, weswegen die meisten hier sind -- und weil ein Knopf, der
     in eine laufende Sendung fuehrt, nicht gesucht werden soll.

     AM HANDY STEHT DIE MITTE OBEN. Dort ist „links" nur noch „vor
     allem anderen", und das waere die falsche Reihenfolge: Wer am
     Telefon nachsieht, ob es laeuft, soll es in der ersten Zeile
     sehen und nicht nach zwei Bildschirmhoehen Plan.
     ====================================================================== -->
<main class="inhalt inhalt--breit" id="foyer">

  <section class="kopf-zeile">
    <div>
      <p class="marke">Reaction</p>
      <h1 class="titel">Zusammen schauen</h1>
      <p class="unterzeile" id="kopf-satz">Wird geladen …</p>
    </div>
  </section>

  <p class="fehler" id="fehler" role="alert" aria-live="polite" hidden></p>

  <div class="foyer-reihen" id="reihen">

    <!-- ============ LINKS: DER PLAN ===========================
         Nur fuer DogFather und VanVan. Filipe: „und das soll
         geschlossen sein außer für vanvan und dogfather."

         SIE STEHT GAR NICHT ERST DA, statt leer oder gesperrt zu
         sein. Ein Kasten mit Schloss darauf erzaehlt, dass es etwas
         zu sehen gaebe -- und genau das soll er nicht. -->
    <section class="foyer-reihe foyer-reihe--plan" id="reihe-plan" hidden>
      <header class="foyer-reihe__kopf">
        <h2 class="foyer-reihe__ueber">Was ansteht</h2>
        <span class="foyer-reihe__nur">nur ihr zwei</span>
      </header>
      <p class="foyer-reihe__satz">
        Die Warteschlange aus der Regie — hier nach Termin sortiert.
        Was noch keinen hat, steht unten.
      </p>
      <ol class="plan-liste" id="plan-liste"></ol>
      <p class="foyer-reihe__fuss">
        Termine setzt du im Saal unter <strong>Regie → Warteschlange</strong>.
      </p>
    </section>

    <!-- ============ MITTE: HINEIN ============================= -->
    <section class="foyer-reihe foyer-reihe--saal" id="reihe-saal">
      <header class="foyer-reihe__kopf">
        <h2 class="foyer-reihe__ueber">Die Sendung</h2>
        <span class="foyer-lampe" id="lampe" data-stand="laedt">
          <span class="foyer-lampe__punkt" aria-hidden="true"></span>
          <span class="foyer-lampe__wort" id="lampe-wort">…</span>
        </span>
      </header>

      <div class="saal-karte" id="saal-karte" data-bild="nein">
        <img id="saal-bild" alt="" />
        <span class="saal-karte__leer" id="saal-leer">Gerade läuft nichts.</span>
      </div>

      <strong class="saal-titel" id="saal-titel">—</strong>
      <p class="saal-satz" id="saal-satz"></p>

      <!-- DER KNOPF IST EIN LINK UND KEIN BUTTON. Wer ihn mit der
           mittleren Maustaste antippt, bekommt einen neuen Reiter --
           genau das tut man, wenn man die Sendung nebenher laufen
           lassen will. Ein `button` mit `location.href` kann das
           nicht, und man merkt es erst, wenn es nicht geht. -->
      <a class="saal-knopf" id="saal-knopf" href="reaktion.html" hidden>
        <span class="saal-knopf__wort" id="saal-knopf-wort">Beitreten</span>
      </a>
      <p class="saal-zahl" id="saal-zahl" hidden></p>
    </section>

    <!-- ============ RECHTS: ANRATEN ===========================
         Filipe: „da sollen die leute alle mir videos anraten können.
         also da können die leute videos reinschicken und nur ich und
         vanvan sehen sie."

         JEDER DARF SCHICKEN, NIEMAND SIEHT FREMDE. Was man selbst
         geschickt hat, steht darunter mit seinem Stand -- sonst
         waere das Feld ein Loch, in das man etwas wirft. -->
    <section class="foyer-reihe foyer-reihe--raten" id="reihe-raten">
      <header class="foyer-reihe__kopf">
        <h2 class="foyer-reihe__ueber">Video anraten</h2>
        <span class="foyer-reihe__zahl" id="raten-zahl" hidden></span>
      </header>
      <p class="foyer-reihe__satz" id="raten-satz">
        Schick uns ein Video, das wir zusammen schauen sollen.
        Sehen tun das nur DogFather und VanVan.
      </p>

      <form class="raten-form" id="raten-form">
        <label class="raten-feld">
          <span>YouTube-Adresse</span>
          <input type="text" id="raten-video" autocomplete="off"
                 placeholder="Adresse einfügen" />
        </label>
        <!-- KEIN `maxlength` HIER. Die Zahl stand sonst zweimal: hier
             und als `VORSCHLAG_NOTIZ_MAX` im Server. Wer sie dort
             aendert, haette hier die alte stehen gelassen, und der
             Zaehler neben „Warum?“ hätte eine Grenze gezählt, die es
             nicht mehr gibt. Das Feld lernt sie von der Auskunft
             (`notiz_max`); bis dahin schneidet der Server ohnehin ab. -->
        <label class="raten-feld">
          <span>Warum? <span class="raten-rest" id="raten-rest"></span></span>
          <input type="text" id="raten-notiz"
                 placeholder="Freiwillig — ein Satz reicht" />
        </label>
        <!-- `knopf` und nicht `knopf-still--haupt`: Der Hauptknopf des
             Hauses steht in `gate.css`, und die lädt diese Seite.
             `knopf-still--haupt` wird in `reaktion.css` gestaltet --
             die gehört dem Saal und wird hier nicht geladen. Die
             Klasse hätte also im Quelltext ausgesehen, als sei etwas
             hervorgehoben, und auf dem Bildschirm wäre es ein
             gewöhnlicher Knopf gewesen. Gefunden hat das
             `pruef-css-klassen`. -->
        <button type="submit" class="knopf" id="raten-los">Abschicken</button>
      </form>

      <ol class="raten-liste" id="raten-liste"></ol>
      <p class="foyer-reihe__fuss" id="raten-fuss"></p>
    </section>

  </div>
</main>

<!-- bereiche.js VOR kopf.js: Dort steht `window.Bereiche`, und kopf.js
     liest daraus die Leitungsrollen. -->
<script src="assets/js/bereiche.js?v=202610081102" defer></script>
<script src="assets/js/wahl.js?v=202610081102" defer></script>
<script src="assets/js/nachfrage.js?v=202610081102" defer></script>
<script src="assets/js/meldung.js?v=202610081102" defer></script>
<script src="assets/js/installieren.js?v=202610081102" defer></script>
<script src="assets/js/kopf.js?v=202610081102" defer></script>
<script src="assets/js/glocke.js?v=202610081102" defer></script>
<script src="assets/js/reaktion-foyer.js?v=202610081102" defer></script>
</body>
</html>