/* ── Nachrüstung für ältere Browser (Fernseher, Set-Top-Boxen) ─────────────────────────── WARUM (Dieter 14.08.2026, mit Foto vom Hisense-Fernseher): Auf dem VIDAA-Browser stand die Willkommensseite rosa eingefärbt da, der Text lag über der Kopfzeile, die Bühne war zu hoch. Sein Auftrag: *„Guck mal, ob du daran etwas verbessern kannst, ohne die anderen Ansichten auf Standardbrowser zu gefährden."* URSACHE, gemessen am Stilblatt: Die Seite benutzt 67 Mal `color-mix()`, 94 Mal die Einheit `dvh` und 21 Mal `:has()`. Alle drei sind jung (color-mix ab Chrome 111, dvh ab 108, :has() ab 105); der Fernseher-Browser ist deutlich älter. Kennt ein Browser einen FARBWERT nicht, verwirft er die Deklaration — und was dann durchscheint, ist der Grund des Elternelements. Genau das erzeugt den Rosaschleier: Die Bühnenflächen verlieren ihre Farbe. Kennt er `dvh` nicht, hat die Bühne keine Höhe und der Inhalt läuft ineinander. WIE ES NICHTS GEFÄHRDET: Alles steht in `@supports not (…)`-Blöcken. Ein moderner Browser sagt „doch, ich kann das" und überspringt den ganzen Block — er sieht diese Regeln nie. Nur wer die Fähigkeit wirklich vermisst, bekommt die einfache Fassung. Das Blatt wird NACH `stil.css` geladen, damit seine Werte gewinnen. ⚠ Es ersetzt keine Gestaltung, es rettet die Lesbarkeit: feste Farben statt gemischter, Bildschirmhöhe statt dynamischer Höhe, ein ruhiges Blockraster statt feiner Rasterkunst. ─────────────────────────────────────────────────────────────────────────────────────── */ /* ── 1. Gemischte Farben ──────────────────────────────────────────────────────────────── */ @supports not (background: color-mix(in srgb, #000 50%, #fff)) { /* Die Bühne und ihre Flächen bekommen feste Werte aus der Hausfarbe (CI: Bronze #9B7A4A, Creme #F8F1E7, Fläche #F8F6F3) — dieselben Töne, nur ohne Mischung. */ .buehne, .feld, .szene { background: #F8F1E7; } .inhaltsrahmen, .nativblatt { background: #FFFFFF; } .i-raster > div { background: #FBF8F4; border-color: #E8E3DC; } .i-raster > div:nth-child(4n+1), .i-raster > div:nth-child(4n+2), .i-raster > div:nth-child(4n+3), .i-raster > div:nth-child(4n+4) { background: #FBF8F4; border-color: #E8E3DC; } .ware, .weg-knopf, .karte, .kachel{ background: #FFFFFF; border-color: #E8E3DC; } .tat { background: #9B7A4A; color: #FFFFFF; } .tat.leise { background: #FFFFFF; color: #9B7A4A; border: 1px solid #9B7A4A; } .medien-dunkel, .medien-hero { background: #14120F; color: #F4EFE9; } /* Text bleibt lesbar, auch wenn eine Fläche ausfällt. */ body, .i-text, .satz, .rede { color: #1A1A1A; } } /* ── 2. Dynamische Höhen (dvh) ────────────────────────────────────────────────────────── */ @supports not (height: 1dvh) { /* ⚠ Am erzwungenen Probelauf gesehen (14.08.): Eine feste Bildschirmhöhe ist hier FALSCH — ohne die feinen Rasterregeln stapeln sich die Blöcke, und 100vh schiebt die Figur aus dem Bild und lässt darunter eine leere Fläche. Auf einem Gerät, das ohnehin scrollt, ist die natürliche Höhe die bessere: Der Inhalt bestimmt sie, nichts wird abgeschnitten. */ .buehne, .feld, .szene { min-height: 0; height: auto; } .feld.fuellt { height: auto; min-height: 0; } .zone-figur img, .figur img { max-height: 42vh; width: auto; } .i-film { --film-maxh: 48vh; } .inhaltsrahmen.tv-rahmen { height: 46vh; } .buchrahmen { --buch-maxh: 70vh; } /* ⚠ NACHTRAG 14.08.2026 abends, nach Dieters zweiter Meldung: *„kopf und fusszeile treffen sich beide in der mitte der seiteninhalte überlagernd."* Der Grund ist die Kombination aus zwei Dingen: Ohne dynamische Höhe wird die Bühne so hoch wie ihr Inhalt (Regel oben) — und alles, was am Bildschirmrand KLEBT (Wortmarke, Motto, die fünf Pfeile, der Sprungknopf), klebt weiterhin am Rand des Fensters bzw. der geschrumpften Bühne. Beides zusammen schiebt Kopf und Fuß in die Mitte des Textes. Auf einem Gerät, das ohnehin scrollt, gibt es dafür eine einfache Lösung: **nichts klebt.** Jeder Baustein steht im Fluss, in seiner natürlichen Reihenfolge — dann kann sich nichts überlagern. Die Pfeile werden dabei sichtbar gemacht: Auf einem Fernseher gibt es kein Mouse-over, das sie einblenden würde. */ .wortmarke, .motto, .pfeil, .pfeil-hoch, .pfeil-runter, .pfeil-links, .pfeil-rechts, .pfeil-tradition, .sprungknopf, .medien-knopf { position: static; transform: none; inset: auto; } .pfeil, .pfeil-hoch, .pfeil-runter, .pfeil-links, .pfeil-rechts, .pfeil-tradition { opacity: 1; pointer-events: auto; display: inline-block; margin: 6px 10px 6px 0; } .pfeil-hinweis { position: static; opacity: 1; transform: none; } .wortmarke { margin: 10px 0 6px; } .buehne, .feld, .szene { display: block; } /* ⚠ ZWEITER NACHTRAG 14.08.2026, nach Dieters Foto von 18:10 („keine Änderung in Sicht"): Die erste Fassung hat die falschen Bausteine gelöst. Auf dem Bild steht die MENÜLEISTE mitten auf der Seite, daneben die kleine Wortmarke — und genau die beiden standen nicht in der Liste. Der Mechanismus ist aufschlussreich: `.hauptleiste.dock` und `.marke-klein` sind absolut gesetzt, ihr `top` rechnet aber mit dynamischer Höhe. Ein Browser, der die Einheit nicht kennt, verwirft NUR diese eine Zeile — das Element bleibt absolut, verliert aber seinen Anker und fällt an die Stelle, an der es im Dokument steht: mitten hinein. Dasselbe gilt für die Pfadzeile (fest gesetzt, unten) und den Vorschlag rechts. Lehre: Es genügt nicht, die Höhe der Bühne zu heilen — jeder Baustein, dessen ANKER aus einer dynamischen Höhe stammt, muss zurück in den Fluss. */ .hauptleiste, .hauptleiste.dock, .marke-klein, .buehne .pfadzeile, .buehne.aktiv > .pfadzeile, .buehne .naechste-vorschlag, .buehne.aktiv > .naechste-vorschlag, .moderator, .tv-ton, .film-los, .fokus-schild, .kachel-hinweis { position: static; transform: none; inset: auto; margin-left: 0; margin-right: 0; } /* Der obere Innenabstand der Bühne war für das schwebende Menü reserviert — es steht jetzt im Fluss, also wird der Platz nicht mehr gebraucht. */ .buehne.aktiv { padding-top: 8px; } .hauptleiste.dock { width: auto; max-width: 100%; justify-content: flex-start; flex-wrap: wrap; margin: 0 0 10px; } .buehne .pfadzeile { margin: 8px 0; } /* Ohne ihre gerechneten Größen laufen einzelne Bausteine ins Riesenhafte — gemessen mit `tools/altbrowser_probe.mjs`: die kleine Wortmarke wurde 1920 × 3362 groß (das nackte Bildmaß), das Menü 1285 px hoch, die Figur 1554 px. Auf einem Fernseher ist das eine Bildschirmwand pro Element. Deshalb hier schlichte, feste Obergrenzen. */ .marke-klein { width: 150px; max-width: 40%; height: auto; margin: 6px 0 10px; } .marke-klein img { width: 100%; height: auto; } .hauptleiste { display: block; width: auto; } .hauptleiste .hauptpunkt { display: inline-block; margin: 0 10px 6px 0; } /* Die Klappmenüs bleiben auf dem Fernseher zu: Ohne Mouse-over lassen sie sich ohnehin nicht bedienen, und im Fluss blähen sie die Leiste auf 811 px auf (gemessen). Die Hauptpunkte führen alle auf eigene Seiten — es geht nichts verloren. */ .klappe, .klappe-zweig { display: none; } .figur, .zone-figur { max-height: 46vh; } .figur img, .figur video, .zone-figur img, .zone-figur video { max-height: 46vh; width: auto; height: auto; } } /* ── 3. Feine Rasterkunst und moderne Selektoren ──────────────────────────────────────── */ @supports not (selector(:has(*))) { /* Wo eine Regel an `:has()` hängt, greift sie hier gar nicht — statt eines halb gebauten Rasters lieber ein ruhiges, gleichmäßiges. */ .i-raster { display: block; } .i-raster > div { margin: 0 0 12px; } .wahl { display: block; } .wahl .weg-knopf { display: block; margin: 0 0 14px; } } /* ── 4. Der Rest, der auf alten Geräten stört ─────────────────────────────────────────── */ @supports not (backdrop-filter: blur(3px)) { .film-breit, .kopfzeile, header { backdrop-filter: none; background: rgba(255,255,255,.94); } }