/* ═══════════════════════════════════════════════════════════════════ Anordnung der Bedienansicht (16.09.2026) Match View (CourtPanel.tsx, React) und Referee View (refereeView.html, ohne Bauschritt) sind zwei getrennte Umsetzungen - sie tragen aber DIESELBEN Bloecke in derselben Reihenfolge: Kopf, Stand, Punkt-Tasten, Fussbereich (Undo, Sperre, Aufgabe). Eine Variante ist deshalb keine zweite Umsetzung, sondern eine andere ANORDNUNG derselben Teile. Eine gemeinsame Schicht, die beide Ansichten laden, gesteuert ueber `data-bedien` am -Element. ── ZWEI BEFUNDE AUS DEM BROWSER, DIE DEN ENTWURF UMGEWORFEN HABEN ─── Beide waren im Quelltext unsichtbar: die Datei parst, die Selektoren stimmen, die Klassen sassen "richtig". Es brauchte eine Messung an der laufenden Seite. 1. DIE KLASSEN SASSEN AUF DEN FALSCHEN ELEMENTEN. Von aussen sieht #scoreTable nach dem Spielstand aus. Gemessen ist es in BEIDEN Formaten `display: none` - der Stand steht in #lvPanels, und der liegt mit den Punkt-Tasten (#editWrap) zusammen in #courtBgWrap. Stand und Tasten sind also Geschwister, nur eine Ebene tiefer als vermutet. Der Container der Schicht ist deshalb #courtBgWrap, nicht #mainPage - sonst haette die Zweispalten-Variante zwei Bloecke getrennt, von denen einer gar nicht sichtbar ist. 2. ID-REGELN DER WIRTSSEITE SCHLAGEN DIESE SCHICHT. #mainPage setzt flex-direction, #courtBgWrap und #editWrap setzen flex und margin - alles ueber ID-Selektoren (1,0,0). Die Selektoren hier kommen auf (0,3,0) und verlieren. Die Regeln standen da und taten nichts. In derselben Herkunft schlaegt nur !important eine ID. Deshalb traegt jede Anordnungs-Eigenschaft hier !important. Das ist der Fall, fuer den es gedacht ist: eine Schicht, die bewusst UEBER den Stilen der Wirtsseite liegt. Es steht ausschliesslich auf Anordnung - nirgends auf Farben, Schrift oder Abstaenden. ── DREI WEITERE EIGENSCHAFTEN ─────────────────────────────────────── 1. `klassisch` hat KEINE einzige Regel. Der Werksstandard ist damit nicht "sieht aus wie vorher", sondern IST vorher. Eine Variante, die den Normalzustand nachbaut, laeuft irgendwann auseinander - und dann aendert sich die Ansicht jedes Vereins, der nie etwas umgestellt hat. 2. `display` steht hier, obwohl der erste Entwurf daran gescheitert ist: damals sass .vb-bedien auf #mainPage, und das ist bis zur Platzwahl `display: none` - eine Regel von hier haette die Hauptansicht neben der Platzauswahl eingeblendet. Mit #courtBgWrap als Container kann das nicht passieren: er wird nie einzeln versteckt, nur zusammen mit seinem Elternteil. 3. Jede Variante hat eine Bedingung. Zwei Spalten sind auf einem Handy hochkant keine Hilfe, sondern zwei unbedienbar schmale Spalten. Was nicht passt, faellt auf die normale Anordnung zurueck - ueber Breite und Seitenverhaeltnis, nicht ueber die Geraeteart. ═══════════════════════════════════════════════════════════════════ */ /* Gemeinsames Vokabular. Beide Ansichten vergeben diese Klassen an ihre entsprechenden Bloecke; welche das sind, steht dort im Kommentar. Leere Regeln als Beleg, dass die Namen zum Vertrag gehoeren - wer eine umbenennt, sieht hier, dass sie woanders erwartet wird. */ .vb-bedien { } .vb-bedien-kopf { } .vb-bedien-stand { } .vb-bedien-tasten { } .vb-bedien-fuss { } /* Der Container ist in beiden Ansichten der Block, in dem Stand und Tasten GESCHWISTER sind - im Referee View #courtBgWrap, im Match View der Primaerblock. Beide sind nie fuer sich versteckt (ihre Eltern schon), ein `display` von hier kann also nichts einblenden, was verborgen sein soll. Genau daran war der erste Entwurf gescheitert: die Klasse sass auf #mainPage, und das ist bis zur Platzwahl `display: none`. */ :root[data-bedien="daumen"] .vb-bedien, :root[data-bedien="standgross"] .vb-bedien { display: flex !important; } /* ── A · Daumen unten ──────────────────────────────────────────────── Der Stand oben, die Punkt-Tasten am unteren Rand - dort, wo der Daumen hinkommt, wenn das Geraet in einer Hand liegt. Fuer Handy und Tablet hochkant; quer greift sie nicht, dort ist der untere Rand von beiden Daumen gleich weit weg. `flex: 1 1 auto` statt einer Hoehenangabe: der Container nimmt den Platz, der nach der Kopfzeile UEBRIG ist. Ein `min-height: 100dvh` stand hier zuerst und war falsch gerechnet - bei 420x900 endete der Container bei 994px, die Seite scrollte um 94px, und die Punkt-Tasten lagen unter dem sichtbaren Rand. Das Gegenteil dessen, wofuer diese Variante da ist, und nur im Browser zu sehen. */ @media (max-aspect-ratio: 3/4) { :root[data-bedien="daumen"] .vb-bedien { flex-direction: column !important; flex: 1 1 auto !important; } /* margin-top:auto schiebt die Tasten an den unteren Rand, ohne eine feste Hoehe anzunehmen - der Stand darf so gross sein, wie er will. */ :root[data-bedien="daumen"] .vb-bedien > .vb-bedien-tasten { margin-top: auto !important; } :root[data-bedien="daumen"] .vb-bedien > .vb-bedien-fuss { order: 99 !important; } } /* ── B · Zwei Seiten ───────────────────────────────────────────────── Stand links, Tasten rechts. Nur auf einer Flaeche, die deutlich breiter als hoch ist - also Tablet quer. Wer so haelt, erreicht die rechte Spalte ohne umzugreifen, und der Stand bleibt dabei ununterbrochen sichtbar. Umgesetzt mit flex-wrap statt Grid, und das hat einen Grund: ein Grid braucht `display: grid` auf dem Container, und genau dieses `display` darf hier nicht stehen (siehe Kopf). `flex-direction` aendert keine Sichtbarkeit - ein verstecktes Element bleibt versteckt. Die Untergrenze von 760px ist keine Geraeteart, sondern die Breite, ab der zwei Spalten je rund 360px bekommen - darunter waeren die Punkt-Tasten schmaler als ein Finger. */ @media (min-width: 760px) and (min-aspect-ratio: 4/3) { :root[data-bedien="zweiseiten"] .vb-bedien { flex-direction: row !important; flex-wrap: wrap !important; align-items: flex-start !important; align-content: flex-start !important; column-gap: 14px !important; } /* Alles, was keine eigene Spalte ist, bleibt volle Breite und stapelt sich in seiner bisherigen Reihenfolge. */ :root[data-bedien="zweiseiten"] .vb-bedien > * { flex: 0 0 100% !important; min-width: 0; } :root[data-bedien="zweiseiten"] .vb-bedien > .vb-bedien-stand { flex: 0 0 calc(52% - 7px) !important; order: 5 !important; } :root[data-bedien="zweiseiten"] .vb-bedien > .vb-bedien-tasten { flex: 0 0 calc(48% - 7px) !important; order: 6 !important; /* Die Tastenspalte auf die Hoehe der Standspalte ziehen und den Inhalt darin mittig setzen. Ohne das kleben die Tasten oben in der Ecke, waehrend darunter die halbe Spalte leer bleibt - im Browser nachgemessen, im Quelltext nicht zu sehen. Mittig statt oben, weil die Hand am Rand des Geraets liegt, nicht an seiner Oberkante. */ align-self: stretch !important; display: flex !important; flex-direction: column !important; justify-content: center !important; } /* Der Fussbereich gehoert zu keiner Seite und steht unter beiden. */ :root[data-bedien="zweiseiten"] .vb-bedien > .vb-bedien-fuss { order: 9 !important; } } /* ── C · Stand gross ───────────────────────────────────────────────── Der Spielstand nimmt so viel Hoehe, wie da ist; die Tasten werden auf das Noetige zusammengezogen. Fuer den Fall, dass jemand mitliest - Zuschauer am Zaun, Gegner auf der anderen Seite. Anders als A und B ohne Bedingung: mehr Platz fuer den Stand schadet auf keinem Geraet. Begrenzt wird nur die Hoehe der Tasten nach UNTEN, und zwar auf 44px - unter dieser Grenze trifft ein Finger den Nachbarknopf (die 36px-Regel des Panels plus Abstand). Eine Variante, die den Stand auf Kosten der Bedienbarkeit vergroessert, waere keine. */ :root[data-bedien="standgross"] .vb-bedien { flex-direction: column !important; flex: 1 1 auto !important; } :root[data-bedien="standgross"] .vb-bedien > .vb-bedien-stand { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; justify-content: center !important; min-height: 0 !important; } :root[data-bedien="standgross"] .vb-bedien > .vb-bedien-tasten { flex: 0 0 auto !important; } :root[data-bedien="standgross"] .vb-bedien-tasten button { min-height: 44px !important; } /* ═══════════════════════════════════════════════════════════════════ Gewichtung: welcher Wert dominiert (16.09.2026, Nachtrag) Die vier Anordnungen oben verschieben BLOECKE. Diese drei hier verschieben das GEWICHT innerhalb des Spielstands - auf ausdrueckliche Rueckmeldung: "die Punkte Sektion und auch die Saetze Sektion gehoert groesser". Gemessen war der Grund dafuer klar: im Match View ist die grosse Ziffer der GAMES-Stand (clamp bis 340px), waehrend "Punkte" mit Groesse 32 darunter steht und die Satzzeilen noch kleiner sind. Im Referee View ist es umgekehrt - dort dominiert der Punkt. Die beiden Ansichten gewichten also gegensaetzlich, und keine der beiden Wahlen war je einstellbar. Drei Sektionen tragen dafuer Namen, in BEIDEN Ansichten dieselben: .vb-saetze die Satzzeilen .vb-games der Games-Stand .vb-punkte der laufende Punkt Die Groessen sind ANTEILIG (vh/vw mit clamp), nicht fest: dieselbe Variante muss auf einem 10-Zoll-Tablet und einem Handy funktionieren. Untergrenzen stehen ueberall - eine Variante, die einen Wert kleiner macht als er lesbar ist, waere keine Wahl, sondern ein Fehler. ═══════════════════════════════════════════════════════════════════ */ /* ── D · Punkte gross ──────────────────────────────────────────────── Der laufende Punkt ist der Wert, der sich am oeftesten aendert und auf den beim Zaehlen jeder schaut. Games treten zurueck, bleiben aber deutlich groesser als die Satzzeilen. */ :root[data-bedien="punktegross"] .vb-punkte { font-size: clamp(34px, min(11vw, 13vh), 120px) !important; font-weight: 900 !important; line-height: 1.05 !important; } :root[data-bedien="punktegross"] .vb-punkte > * { font-size: inherit !important; } /* Die Beschriftung ("Punkte") bleibt deutlich kleiner als der Wert - sonst frisst das Wort den Platz, um den es hier geht. */ :root[data-bedien="punktegross"] .vb-punkte > *:nth-child(2) { font-size: 0.34em !important; } :root[data-bedien="punktegross"] .vb-games, :root[data-bedien="punktegross"] .vb-punkte.lv-pts { font-size: clamp(28px, min(9vw, 11vh), 96px) !important; } :root[data-bedien="punktegross"] .vb-saetze > * { font-size: clamp(14px, 2.6vh, 26px) !important; } /* ── E · Saetze gross ──────────────────────────────────────────────── Der Satzverlauf ist das, was am Ende zaehlt - und die Zeile, die im Gedraenge bisher zuerst klein wurde. Hier bekommt sie Gewicht, ohne die beiden anderen unlesbar zu machen. */ :root[data-bedien="saetzegross"] .vb-saetze > * { font-size: clamp(22px, min(6vw, 7vh), 64px) !important; font-weight: 800 !important; } :root[data-bedien="saetzegross"] .vb-saetze > * > *:nth-child(2) { font-size: 0.44em !important; } :root[data-bedien="saetzegross"] .vb-games { font-size: clamp(30px, min(10vw, 12vh), 110px) !important; } :root[data-bedien="saetzegross"] .vb-punkte { font-size: clamp(26px, min(8vw, 10vh), 88px) !important; font-weight: 800 !important; } :root[data-bedien="saetzegross"] .vb-punkte > * { font-size: inherit !important; } :root[data-bedien="saetzegross"] .vb-punkte > *:nth-child(2) { font-size: 0.36em !important; } /* ── F · Dreiklang ─────────────────────────────────────────────────── Saetze, Games und Punkte gleich gewichtet und alle drei gross. Keiner der drei Werte dominiert; wer von weiter weg mitliest, sieht alles. Braucht Hoehe - deshalb faellt sie auf sehr flachen Flaechen (unter 420px Hoehe) auf die normalen Groessen zurueck, statt drei Zeilen uebereinanderzuschieben. */ @media (min-height: 420px) { :root[data-bedien="dreiklang"] .vb-saetze > *, :root[data-bedien="dreiklang"] .vb-punkte, :root[data-bedien="dreiklang"] .vb-games { font-size: clamp(26px, min(7.5vw, 9vh), 84px) !important; font-weight: 800 !important; } :root[data-bedien="dreiklang"] .vb-punkte > * { font-size: inherit !important; } :root[data-bedien="dreiklang"] .vb-saetze > * > *:nth-child(2), :root[data-bedien="dreiklang"] .vb-punkte > *:nth-child(2) { font-size: 0.4em !important; } }