DogFatherGitandClaude Opus 5
807d7d4a1c
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 … und nur ich und
vanvan sehen sie."
Haus: Team Dogi (crew.dogfather-universe.com). Die Agentur ist nicht
berührt -- pruef-haus-trennung 107/0, pruef-workspace-seiten 37/0.
WARUM EINE EIGENE SEITE UND KEIN VIERTER ZUSTAND DES SAALS
Der Saal meldet jeden an, der ihn öffnet („dabei"), baut Verbindungen
auf und hält den Ereignisstrom offen. Das ist richtig für jemanden,
der zusieht -- und falsch für jemanden, der nur nachsehen will, ob
heute Abend etwas läuft. Wäre das Foyer der vierte Zustand derselben
Seite, zählte jeder Blick als Zuschauer, und die Zahl im Regiepult
sähe nach Publikum aus, wo niemand zusieht.
Im Foyer wird nur gelesen: Stand holen, zeichnen, alle 20 Sekunden
nachfragen -- und nicht, solange der Reiter im Hintergrund liegt. Kein
Ereignisstrom: Der hielte eine Verbindung offen, und manche Browser
geben je Adresse nur sechs her; im Saal wird jede davon gebraucht.
DREI REIHEN
LINKS die Warteschlange, nach TERMIN sortiert statt nach Platz.
Was keinen hat, steht unten; was vorbei ist, bekommt
„· überfällig". Nur admin und rechte Hand -- und für alle
anderen steht sie gar nicht erst da, statt leer oder
gesperrt zu sein. Ein Kasten mit Schloss erzählt, dass es
etwas zu sehen gäbe. Entschieden wird das am Server; die
Seite fragt nicht nach der Rolle, sondern danach, ob die
Auskunft gekommen ist.
MITTE Lampe (Geschlossen / Gleich / Auf Sendung), Vorschaubild,
Titel, Satz -- und der Knopf, der NUR dasteht, wenn er auch
hineinführt. Er ist ein Link und kein Button: Wer ihn mit
der mittleren Maustaste antippt, bekommt einen neuen Reiter.
RECHTS Video anraten. Jeder darf schicken, niemand sieht fremde,
jeder sieht seine eigenen mit Stand. Vier Sperren, und jede
beantwortet etwas anderes: zu schnell (45 s), zu viele offen
(5 je Person), schon angeraten, steht schon bereit.
Am Telefon steht die MITTE oben. Dort ist „links" nur noch „vor allem
anderen", und das wäre die falsche Reihenfolge.
WAS SONST NOCH DAZUGEHÖRT
* Jede Zeile der Warteschlange im Saal hat jetzt ein Terminfeld.
* Die Kachel sagt nicht mehr „geschlossen" -- das Foyer ist immer
offen. „gleich" und „● live" bleiben: Sie sagen etwas, das man ohne
sie nicht weiß.
* reaktion.html steht in OHNE_KACHEL_UEBERALL. Die erlaubten Seiten
werden aus den Kachelzielen abgeleitet; als die Kachel aufs Foyer
zeigte, war der Saal plötzlich von keiner mehr genannt und
antwortete mit einer Umleitung.
DREI DOPPELTE ANTWORTEN BESEITIGT
* „Wie viele Vorschläge darf einer offen haben" stand VIERMAL:
dreimal als `je_person_max || 5` und einmal als Wort „fünf" im Satz
(plus ein fünftes Mal in meldung.js). Kommt jetzt vom Server.
* `maxlength="200"` im Formular neben VORSCHLAG_NOTIZ_MAX im Server.
Das Feld lernt die Grenze von der Auskunft.
* Die drei Foyer-Tafeln hatten eine eigene Fläche (Weiß mit 4,5 %) und
eine eigene Form. Beides gibt es im Haus längst: Material in
start.css (45 Klassen, gemessen), Form in module.css. Die eigene
Fläche war dazu fast durchsichtig -- über einem hellen
Hintergrundbild stand der Text ohne deckenden Grund. Gefunden hat
das nicht eine Prüfung, sondern das Bildschirmfoto.
EINE LÜCKE IN DER PRÜFUNG GESCHLOSSEN
In module.css steht dieselbe 48er-Klassenliste ACHTMAL. Sieben trugen
die Marke MODULLISTE und wurden verglichen; die achte -- die Umrandung
beim Tabben (:focus-visible) -- nicht. Sie war damit die Einzige, die
still hätte abweichen können, ausgerechnet bei der Regel, die nur
sieht, wer mit der Tastatur bedient. pruef-css-klassen erwartet jetzt
acht. Eine steigende Prüfzahl, und sie ist begründet.
UND EINER, DEN KEIN WERKZEUG FINDEN KANN
Der Satz oben lautete „Links steht, was ansteht; rechts kannst du
etwas anraten." Für die Community gibt es „links" gar nicht, und am
Telefon stehen die Reihen untereinander. Eine Richtung im Text ist
eine Aussage über das Aussehen -- und das ändert sich mit dem
Bildschirm und mit der Rolle. Jetzt steht dort, WAS geht, nicht WO.
GEMESSEN
mess-foyer (neu) 70 Messungen, 0 Fehler, 9 Bildschirmfotos
pruef-reaktion 538, 0 Fehler (vorher 478)
pruef-handy-teamdogi 263 Seitenaufrufe, 0 Befunde (vorher 244)
pruef-sackgassen 14, 0 Fehler
pruef-crew-adresse 173, 0 Fehler
pruef-haus-trennung 107, 0 Fehler
pruef-struktur 102, 0 Fehler
pruef-neue-seiten 109, 0 Fehler
pruef-portnummern 41, 0 Fehler
pruef-haus-seiten 38, 0 Fehler
pruef-workspace-seiten 37, 0 Fehler
pruef-breiten 45 Seiten auf fünf Breiten, 0 beanstandet
pruef-community-sicht 10, 0 Fehler
pruef-deutsche-texte 12, 0 Fehler
pruef-css-klassen grün
mess-foyer klickt den ganzen Weg durch: Ein Gast schickt ein Video,
DogFather sieht es mit Namen, nimmt es, und es muss links im Plan
stehen. Zum Schluss macht es sechs seiner Messungen absichtlich kaputt
und prüft, dass sie das merken.
NICHT BEHOBEN, WEIL NICHT MEINS: pruef-meldungen ist rot (28
Kennungen ohne Satz, 3 Rohanzeigen) -- gemessen im worktree auf dem
letzten Commit schon vorher, Zeichen für Zeichen dieselbe Liste. Die
Dateien gehören überwiegend der Agentur; das gehört in einen eigenen
Durchgang.
Co-Authored-By: Claude Opus 5 <[email protected]>
479 lines
19 KiB
CSS
479 lines
19 KiB
CSS
/* =====================================================================
|
||
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; }
|
||
|
||
.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;
|
||
}
|
||
.foyer-reihe__ueber {
|
||
margin: 0;
|
||
font-size: .78rem; font-weight: 800;
|
||
letter-spacing: .14em; text-transform: uppercase;
|
||
color: var(--text-leise, #a9a3bd);
|
||
}
|
||
/* „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. */
|
||
.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: #cfe0ff;
|
||
background: rgba(154, 183, 255, .12);
|
||
border: 1px solid rgba(154, 183, 255, .3);
|
||
}
|
||
.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; }
|
||
.plan-zeile {
|
||
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 {
|
||
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.
|
||
===================================================================== */
|
||
@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; }
|
||
.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; }
|
||
}
|