/* portal.css — Videoportal dieweltklarsehen.de
Erzeugt/gepflegt über Claude-DWKS-Portal-Bau.py (Arbeitsplan Schritt 10).
KEINE NEUE FARBWELT: alle Farben stammen aus den Variablen der style.css
(Siegelblau, Gold-Familie, Box-Norm, Säulenfarben S1–S4). Diese Datei
ergänzt nur die Bausteine, die es auf der bisherigen Website nicht gab:
Kachelraster, Zwei-Klick-Spieler, Abschrift, Suche.
KONTRAST: Für Text auf dunklem Grund werden NICHT die satten Balkenfarben
(--s1 … --s4) benutzt, sondern die aufgehellten Varianten aus der
style.css-Zeile ".saeule.sN .kicker". Die satten Töne bleiben Flächen und
Balken vorbehalten. Gemessen mit Claude-Web-Kontrast.py (WCAG 2.2), die
Messwerte stehen im Kopf jenes Werkzeugs und in der Videoportal-Notiz. */
/* ---------- Kopf: Marke wird klickbar ----------
UMGEZOGEN am 20.09.2026 nach ../style.css. Die Kopfleiste ist seither auf
jeder Seite dieselbe (Claude-Web-Kopfleiste.py); eine Regel dafuer darf
nicht in einer Datei stehen, die nur das Portal laedt. Einfachschreibung:
sie steht dort einmal, hier gar nicht mehr. */
.versteckt {
position: absolute;
width: 1px; height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/* ---------- Brotkrume ---------- */
/* POLSTER ÜBER DEM INHALT (Uwe-Weisung 20.09.2026, 22:46). Die Portalseiten
erbten aus style.css `main { padding: 4rem 1.5rem 5rem }` — 64 px allein
über der Brotkrume, dazu 26 px unter ihr. Zusammen 90 px, bevor überhaupt
eine Überschrift beginnt. Der Wert stammt von den Textseiten (Impressum,
Datenschutz), wo er richtig ist; eine Übersichtsseite braucht ihn nicht. */
main.uebersicht,
main.portalstart,
main.videoseite,
main.suchseite {
padding-top: 0.45rem;
}
/* NACHTRAG 21.09.2026, 06:57 (Uwe: "nimm die Leerzeilen oberhalb von
'Videoportal' heraus" und "loesche die Leerzeile oberhalb des Titels").
Gemessen vorher: Kopfleiste endet bei 72 px, die Brotkrume begann bei 93
und der Titel bei 126 — 54 px Luft fuer zwei Abstaende. Jetzt beginnt die
Krume bei 79 und der Titel unmittelbar darunter. */
.krume {
font-size: 0.86rem;
color: var(--text-gedaempft);
margin: 0 0 0.2rem;
letter-spacing: 0.02em;
}
/* IM GOLDTON, NICHT IM GRAU (Uwe-Weisung 22.09.2026: "sämtliche
Überschriften wie 'Videoportal > Medien &...' ... sollen in dem
DWKS-Goldton seien"). Die Krume ist die Ueberschriftenzeile ueber dem
Titel — sie sagt, wo der Besucher steht, und gehoert damit zur
Beschriftung der Seite, nicht zum Beiwerk. Sie stand bis heute auf
`--text-gedaempft`; die Goldumstellung vom 21.09.2026 hatte sie
uebersehen, weil sie ihre Farbe in einer eigenen Regel setzt.
Der Hover bleibt heller (`--gold-hell`): Waeren Ruhe und Zeigen
derselbe Ton, faellt die Rueckmeldung weg — dieselbe Begruendung wie
bei der Umstellung selbst. */
.krume { color: var(--gold); }
.krume a { color: var(--gold); text-decoration: none; }
.krume a:hover { color: var(--gold-hell); text-decoration: underline; }
/* ---------- Rubrikkopf ---------- */
/* ZWEISPALTIG UND FLACH (Uwe-Weisung 20.09.2026, 22:46: "Auf den
Säulenseiten ist der Kopfbereich viel zu hoch und verbraucht fast die
halbe Bildschirmhöhe. Das muss deutlich reduziert werden in eine zwei-
oder dreispaltige Darstellung." — gilt ausdrücklich auch für die
Portalstartseite, alle Themenseiten und die Einzelseiten.)
GEMESSEN VOR DEM UMBAU [1400x900 px, Claude-Web-Geometrie.mjs]:
Säulenseite — Kopfleiste 72 · Krume 136 · Rubrikkopf 186 bis 410 (224 px
in VIER gestapelten Zeilen: Kicker, Titel, Claim, Zahl) · erster Inhalt
erst bei top 448. Das sind 49,8 Prozent der Fensterhöhe, bevor der erste
Sachinhalt beginnt — Uwes "fast die halbe Bildschirmhöhe" ist keine
Schätzung, sondern trifft auf den Prozentpunkt.
DIE LÖSUNG IST DAS UMLEGEN, NICHT DAS WEGLASSEN: Links steht, WAS die
Seite ist (Kicker und Titel), rechts, WAS SIE ENTHÄLT (Claim, Zahl,
Suchfeld). Aus vier Zeilen werden zwei, ohne dass eine Angabe verloren
geht. Unter 760 px fällt der Kopf in eine Spalte zurück — nebeneinander
wäre dort beides unleserlich schmal. */
.rubrikkopf {
border-bottom: 1px solid var(--rahmen-gold-zart);
padding-bottom: 0.45rem;
margin-bottom: 0.9rem;
}
.rubrikkopf:not(.schmal) {
display: grid;
/* DIE LINKE SPALTE HAT VORFAHRT, und zwar gemessen: Mit `1fr auto` zog der
zweizeilige Beschreibungssatz der Themenübersicht die rechte Spalte so
weit auf, dass die Überschrift "Alle Themen" auf **1 px** Breite
gequetscht wurde und senkrecht Buchstabe für Buchstabe umbrach
[gemessen ▸ 20.09.2026, 23:05]. `auto` heißt für ein Grid: so breit wie
der Inhalt will — bei Fließtext also fast alles. Deshalb bekommt die
Titelspalte eine Untergrenze von 45 Prozent und die Beschreibungsspalte
eine Obergrenze von 26 rem. */
grid-template-columns: minmax(45%, 1fr) minmax(0, 26rem);
column-gap: 2rem;
row-gap: 0.1rem;
align-items: center;
}
/* Links die Benennung, rechts die Beschreibung — feste Zuweisung statt
automatischer Platzierung, weil die drei Seitentypen ihre Bausteine in
verschiedener Reihenfolge liefern (Themenübersicht: Zahl VOR Claim). */
.rubrikkopf:not(.schmal) .kicker { grid-column: 1; grid-row: 1; }
.rubrikkopf:not(.schmal) .titelzeile,
.rubrikkopf:not(.schmal) > h1 { grid-column: 1; grid-row: 2; }
.rubrikkopf:not(.schmal) .claim { grid-column: 2; grid-row: 1; text-align: right; }
.rubrikkopf:not(.schmal) .zahl { grid-column: 2; grid-row: 2; text-align: right; }
.rubrikkopf:not(.schmal) .rubriktext { grid-column: 1 / -1; grid-row: 3; }
.rubrikkopf:not(.schmal) .suchleiste { grid-column: 2; grid-row: 1 / span 2; }
.rubrikkopf .kicker { color: var(--gold); margin: 0; }
.rubrikkopf h1 {
font-size: clamp(1.5rem, 2.6vw, 2.1rem);
color: #FFFFFF;
margin: 0;
line-height: 1.15;
}
.rubrikkopf .claim {
color: var(--gold);
font-style: italic;
font-size: 1rem;
margin: 0;
}
.rubrikkopf .rubriktext {
color: var(--text-gedaempft);
margin: 0.4rem 0 0;
max-width: 52rem;
}
.rubrikkopf .zahl {
font-family: "Bebas Neue", "Arial Narrow", sans-serif;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--gold);
font-size: 0.95rem;
margin: 0;
}
/* Am Telefon zurück in eine Spalte: 342 px Inhaltsbreite auf zwei Spalten
verteilt ergäbe zwei unleserliche Säulen. Die Ersparnis kommt dort aus den
kleineren Abständen, nicht aus der Spaltenzahl. */
@media (max-width: 760px) {
.rubrikkopf:not(.schmal) {
grid-template-columns: minmax(0, 1fr);
row-gap: 0.25rem;
}
.rubrikkopf:not(.schmal) .claim,
.rubrikkopf:not(.schmal) .zahl,
.rubrikkopf:not(.schmal) .suchleiste {
grid-column: 1;
grid-row: auto;
text-align: left;
}
.rubrikkopf:not(.schmal) .kicker,
.rubrikkopf:not(.schmal) .titelzeile,
.rubrikkopf:not(.schmal) > h1,
.rubrikkopf:not(.schmal) .rubriktext {
grid-column: 1;
grid-row: auto;
}
}
.rubrikkopf.s1 { border-bottom-color: var(--s1); }
.rubrikkopf.s2 { border-bottom-color: var(--s2); }
.rubrikkopf.s3 { border-bottom-color: var(--s3); }
.rubrikkopf.s4 { border-bottom-color: var(--s4); }
.rubrikkopf.s1 .kicker { color: #6FB2DE; }
.rubrikkopf.s2 .kicker { color: #E0736F; }
.rubrikkopf.s3 .kicker { color: #D0A75E; }
.rubrikkopf.s4 .kicker { color: #A995DB; }
/* ---------- Einzeiliger Rubrikkopf (Uwe-Festlegung 20.09.2026) ----------
"Das ist zuviel unnoetiger Bildschirmflaechenverbrauch ohne relevanten
Inhalt. Besser ist alles in eine Zeile zu schreiben."
Das Jahresarchiv hatte vier Zeilen uebereinander: Brotkrume, Kicker
"JAHRESARCHIV", eine riesige Jahreszahl und die Videozahl — zusammen mehr
als ein Drittel des ersten Bildschirms, ohne eine Information, die nicht
auch in eine Zeile passt. */
.rubrikkopf.schmal {
margin: 0 0 1.1rem;
padding-bottom: 0.7rem;
}
.rubrikkopf .einzeiler {
margin: 0;
font-size: 1.5rem;
line-height: 1.25;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.5rem;
}
.rubrikkopf .einzeiler a {
color: var(--gold);
text-decoration: none;
}
.rubrikkopf .einzeiler a:hover { text-decoration: underline; }
.rubrikkopf .einzeiler .pfeil { color: var(--text-gedaempft); font-family: inherit; }
.rubrikkopf .einzeiler .beiwerk {
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
text-transform: none;
letter-spacing: 0;
font-size: 0.95rem;
font-weight: 400;
color: var(--text-gedaempft);
}
/* ---------- Kachelraster ---------- */
.kacheln {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
gap: 1.5rem;
}
.kachel a {
display: flex;
flex-direction: column;
height: 100%;
text-decoration: none;
color: inherit;
background: linear-gradient(180deg, var(--box-oben), var(--box-unten));
border: 1px solid var(--rahmen-gold-zart);
border-radius: 12px;
overflow: hidden;
transition: border-color 0.16s ease, transform 0.16s ease;
}
/* DIE KACHEL UNTER DER MAUS TRITT DEUTLICH HERAUS (Uwe-Weisung 22.09.2026:
"Auf Auswahlseiten mit mehr als einem dargestellten Video soll dasjenige
Video auf dem die Maus gerade liegt besonders farblich markiert werden.
z.B. durch einen deutlich erkennbaren goldenen Rahmen").
VORHER war der Hover `border-color: var(--rahmen-gold)` — und das ist
`rgba(198,168,109,0.55)`, also ein zu 55 Prozent durchscheinender Ton auf
einem 1 px breiten Rahmen. Auf dem dunklen Grund ist der Unterschied zum
Ruhezustand (`--rahmen-gold-zart`, 0.28) kaum zu sehen; man erkennt eher
die Anhebung als die Farbe.
JETZT der volle Goldton `--gold` #CBA25A, deckend, als 2 px breiter Ring.
ALS box-shadow UND NICHT ALS BREITERE BORDER: Ein Rahmenwechsel von 1 auf
2 px verschiebt den Inhalt jeder Kachel um ein Pixel, und im Raster
springt dann die ganze Zeile. Ein Ring liegt ausserhalb des Kastens und
kostet kein Layout. Die Anhebung um 3 px bleibt — Farbe und Bewegung
zusammen sind auch fuer jemanden erkennbar, der Gold gegen Dunkelblau
schlecht unterscheidet. */
.kachel a:hover,
.kachel a:focus-visible {
border-color: var(--gold);
box-shadow: 0 0 0 2px var(--gold), 0 10px 26px rgba(0, 0, 0, 0.45);
transform: translateY(-3px);
}
.kachel-bild {
display: block;
aspect-ratio: 16 / 9;
background: #0b1a25;
overflow: hidden;
}
.kachel-bild img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.kein-bild {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-family: "Anton", "Arial Narrow", sans-serif;
letter-spacing: 0.3em;
color: var(--rahmen-gold);
background: var(--siegel-blau);
font-size: 1.4rem;
}
.kein-bild.gross { aspect-ratio: 16 / 9; font-size: 2.6rem; }
/* ENG AM BILD (Uwe-Festlegung 20.09.2026: "In der Darstellung der 5 Videozeilen
sind die einzelnen Bloecke vertikal viel zu hoch. Das Datum kann dichter an
das Thumbnail. die max. 3 Zeilen koennen dichter an das Datum. und nach
unten zum Rand braucht nur ein minimaler Abstand zu stehen.")
Der Titel wird auf DREI Zeilen geklemmt — sonst bestimmt der laengste Titel
die Hoehe aller Kacheln einer Reihe, und genau das machte die Bloecke hoch. */
.kachel-text { display: block; padding: 0.4rem 0.8rem 0.45rem; }
.kachel-datum {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.8rem;
line-height: 1.25;
color: var(--text-gedaempft);
letter-spacing: 0.04em;
margin-bottom: 0.12rem;
}
.kachel-titel {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
font-family: "Anton", "Arial Narrow", sans-serif;
text-transform: uppercase;
letter-spacing: 0.03em;
line-height: 1.14;
font-size: 1.02rem;
color: #FFFFFF;
}
.punkt {
width: 9px; height: 9px;
border-radius: 50%;
display: inline-block;
}
.punkt.s1 { background: var(--s1); }
.punkt.s2 { background: var(--s2); }
.punkt.s3 { background: var(--s3); }
.punkt.s4 { background: var(--s4); }
.leer { color: var(--text-gedaempft); font-style: italic; }
.mehr { margin-top: 1.6rem; }
/* ---------- Infopunkt und Titelzeile ----------
UMGEZOGEN am 20.09.2026 nach ../style.css: Seit die Startseite dieselben
Infopunkte benutzt (Uwe-Festlegung "Die Beschreibungen der Saeulen sollen
als Infopunkte hinter die Kurztitel"), darf die Regel nicht mehr in einer
Datei stehen, die nur das Videoportal laedt. Einfachschreibung: dort
einmal, hier gar nicht. */
/* ---------- Regal: waagerechte Videoreihe (Uwe-Festlegung 20.09.2026) ----------
"Unter dem Suchfeld sollen 5 Zeilen mit Videos sein so wie bei YT."
Fuenf Reihen: Neu auf dem Kanal, dann je eine je Saeule.
GESCHOBEN WIRD MIT CSS, nicht mit Skript: overflow-x plus scroll-snap
tragen Wischen, Mausrad und Tastatur von Haus aus. Die beiden Pfeile sind
eine Zugabe fuer die Maus und stehen hidden im Quelltext, bis portal.js
sie freigibt -- so steht ohne Skript kein toter Knopf herum. */
/* OHNE QUERSTRICH UND ENGER (Uwe-Festlegung 20.09.2026: "Der designerische
Querstrich unterhalb einer Videozeile kann ganz weg. 'Nach Jahr' kann
deutlich weiter nach oben."). Die Saeulenfarbe traegt die Reihe ohnehin
ueber die Kennmarke links im Titel — ein zweiter Traeger derselben
Information kostet nur Hoehe. */
.regal { margin: 0 0 1.5rem; }
.regal-kopf {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.75rem;
margin: 0 0 0.6rem;
padding-bottom: 0;
border-bottom: 0;
}
.regal-kopf h2 {
margin: 0;
font-family: "Anton", "Arial Narrow", sans-serif;
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 1.32rem;
color: var(--text-hell);
}
.regal-saeule {
display: inline-block;
margin-right: 0.6rem;
padding: 0.15rem 0.55rem;
border-radius: 4px;
font-size: 0.78rem;
letter-spacing: 0.1em;
color: #FFFFFF;
background: var(--siegel-blau);
vertical-align: 0.14em;
}
.regal.s1 .regal-saeule { background: var(--s1); }
.regal.s2 .regal-saeule { background: var(--s2); }
.regal.s3 .regal-saeule { background: var(--s3); }
.regal.s4 .regal-saeule { background: var(--s4); }
/* S3 IST DIE AUSNAHME, UND ZWAR GEMESSEN, NICHT NACH GEFUEHL:
weiss auf dem Gold-Ocker #A57A31 ergibt 3.87:1 und verfehlt die 4.5 aus
WCAG 1.4.3 fuer normalen Text; dunkel auf derselben Flaeche ergibt 4.80:1.
Die anderen drei tragen weiss (S1 4.69 · S2 6.43 · S4 5.13).
[gemessen ▸ 20.09.2026, Claude-Web-Kontrast.py --portal] */
.regal.s3 .regal-saeule { color: #1A1200; }
/* Die vier farbigen Trennlinien sind mit dem Querstrich entfallen
(20.09.2026). Die Saeulenfarbe steht weiterhin in der Kennmarke links
im Reihentitel — sie ist damit nicht verlorengegangen, nur nicht mehr
doppelt. */
.regal-alle {
margin-left: auto;
flex: 0 0 auto;
font-size: 0.88rem;
color: var(--gold);
text-decoration: none;
border: 1px solid var(--rahmen-gold-zart);
border-radius: 999px;
padding: 0.3rem 0.85rem;
white-space: nowrap;
transition: all 0.15s;
}
.regal-alle:hover { background: var(--gold); border-color: var(--gold); color: #1A1200; }
.regal-band { position: relative; }
.regal-band:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 12px; }
/* Die Reihe uebersteuert das Kachelraster: aus dem Gitter wird ein Band. */
.regal-reihe {
display: flex;
gap: 1.1rem;
overflow-x: auto;
scroll-snap-type: x proximity;
scroll-behavior: smooth;
/* WAAGERECHT KEIN POLSTER, und das ist kein Schoenheitsgrund: mit
padding-left: 0.25rem rastete scroll-snap die erste Kachel auf
scrollLeft = 4 statt 0 ein [gemessen ▸ 20.09.2026, Browser]. Der
Linkspfeil galt damit als "es geht noch weiter" und blieb hell,
obwohl die Reihe ganz links stand. Oben/unten bleibt das Polster,
dort braucht die Kachel Platz fuer ihren Hover-Hub. */
padding: 0.25rem 0 1rem;
scroll-padding-left: 0;
margin: 0;
list-style: none;
/* KEINE SICHTBARE SCHIEBELEISTE (Uwe, dritte Durchsicht 20.09.2026:
"Weg mit dem horizontalen Trennstreich"). Gemeint war die Leiste unter
jeder Videoreihe -- sie sah wie ein gestalterischer Strich zwischen zwei
Reihen aus und trennte optisch, wo nichts zu trennen war.
Geschoben wird weiterhin: Wischen, Mausrad, Tastatur und die beiden
Pfeile bleiben unberuehrt. Es verschwindet allein die Anzeige. */
scrollbar-width: none;
-ms-overflow-style: none;
}
/* VIER GANZE VIDEOS JE REIHE (Uwe-Festlegung 20.09.2026: "Es sollen stets 4
ganze Videos in einer reihe sein"). Vier Kacheln plus drei Zwischenraeume
fuellen die Reihe genau aus — dadurch steht am rechten Rand kein
angeschnittenes Bild mehr.
UNTERHALB VON 1000 px GILT DAS NICHT, und das ist keine Nachlaessigkeit:
Vier Kacheln auf einem 390 px breiten Telefon waeren 88 px breit, also
unlesbar. Dort bleibt es bei einer Kachel je Blick mit angeschnittener
naechster — das ist der Hinweis, dass die Reihe weitergeht. Die Schwelle
selbst ist eine Geschmacksfrage und steht als Entscheidung E6. */
.regal-reihe > .kachel {
flex: 0 0 calc((100% - 3 * 1.1rem) / 4);
max-width: calc((100% - 3 * 1.1rem) / 4);
scroll-snap-align: start;
}
@media (max-width: 999px) {
.regal-reihe > .kachel {
flex-basis: calc((100% - 1.1rem) / 2);
max-width: calc((100% - 1.1rem) / 2);
}
}
.regal-reihe::-webkit-scrollbar { height: 0; width: 0; display: none; }
.regal-pfeil {
position: absolute;
top: calc(50% - 1.4rem);
transform: translateY(-50%);
z-index: 20;
width: 2.6rem;
height: 2.6rem;
border-radius: 50%;
border: 1px solid var(--rahmen-gold);
background: rgba(7, 19, 28, 0.88);
color: var(--gold);
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.regal-pfeil.links { left: -0.6rem; }
.regal-pfeil.rechts { right: -0.6rem; }
.regal-pfeil:hover { background: var(--gold); color: #1A1200; }
.regal-pfeil[disabled] { opacity: 0.25; cursor: default; }
.regal-pfeil[disabled]:hover { background: rgba(7, 19, 28, 0.88); color: var(--gold); }
@media (max-width: 620px) {
.regal-reihe > .kachel { flex-basis: 78vw; max-width: 78vw; }
.regal-alle { margin-left: 0; }
}
/* ---------- Themenkacheln (Säulenseite) ---------- */
.themenkacheln {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
gap: 1rem;
}
/* MIT REIHENBILD (Uwe, dritte Durchsicht 20.09.2026: "Die Saeulenthemen sind
Playlists. Also gehoeren dort auch die Thumbnails der Playlists
dargestellt."). Das Polster wandert vom Verweis in den Textteil, sonst
stuende das Bild in einem Rahmen aus Luft. */
.themenkachel a {
display: flex;
flex-direction: column;
gap: 0;
height: 100%;
padding: 0;
overflow: hidden;
text-decoration: none;
border: 1px solid var(--rahmen-gold-zart);
border-left-width: 6px;
border-radius: 10px;
background: rgba(9, 53, 80, 0.32);
transition: background 0.16s ease, border-color 0.16s ease;
}
.themenkachel-bild {
display: block;
aspect-ratio: 16 / 9;
background: #0b1a25;
overflow: hidden;
}
.themenkachel-bild img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.themenkachel-text {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding: 0.7rem 0.9rem 0.8rem;
}
.themenkachel a:hover { background: rgba(9, 53, 80, 0.6); border-color: var(--rahmen-gold); }
.themenkachel.s1 a { border-left-color: var(--s1); }
.themenkachel.s2 a { border-left-color: var(--s2); }
.themenkachel.s3 a { border-left-color: var(--s3); }
.themenkachel.s4 a { border-left-color: var(--s4); }
.themenkachel-titel {
font-family: "Anton", "Arial Narrow", sans-serif;
text-transform: uppercase;
letter-spacing: 0.03em;
color: #FFFFFF;
line-height: 1.24;
}
.themenkachel-zahl { font-size: 0.82rem; color: var(--text-gedaempft); }
/* ---------- Portal-Startseite: Säulen als Links ----------
GEGENSTANDSLOS seit 20.09.2026: Die vier Saeulenkacheln standen bis dahin
als Textbloecke auf der Portalstartseite. Sie sind durch die vier
Videoreihen ersetzt (.regal), die Beschreibung sitzt im Infopunkt.
Die Regeln bleiben hier NICHT stehen -- eine tote Regel ist eine Falle
fuer den Naechsten, der sie fuer wirksam haelt. */
/* „NACH JAHR" RÜCKT HOCH (Uwe-Festlegung 20.09.2026). Gemessen lagen zwischen
der letzten Videoreihe und der Überschrift 72 px, fast ausschließlich aus
dem Vorlaufabstand der Überschrift. */
.portalstart .jahre { margin-top: 0; }
.portalstart .jahre h2 { margin-top: 0; margin-bottom: 0.6rem; }
.portalstart .regal:last-of-type { margin-bottom: 0.8rem; }
/* ---------- Jahresleiste ---------- */
/* FLACHER, MIT ROTEM HOVER UND ABSTAND NACH UNTEN (Uwe-Festlegung 20.09.2026:
"Die Jahresarchive mit rotem Hover-Mouseover und geringere Pillenhoehen und
mehr Abstand von den Videos"). Das Rot ist dasselbe #8b1a1a wie im Kopfmenue
der ganzen Website — kein neuer Farbton, sondern der vorhandene. */
.jahresleiste { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 2.2rem; }
.jahresleiste a {
padding: 0.15rem 0.85rem;
border: 1px solid var(--rahmen-gold-zart);
border-radius: 999px;
text-decoration: none;
font-family: "Bebas Neue", "Arial Narrow", sans-serif;
letter-spacing: 0.12em;
line-height: 1.5;
color: var(--text-gedaempft);
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.jahresleiste a:hover {
background: #8b1a1a;
border-color: #8b1a1a;
color: #FFFFFF;
}
.jahresleiste a.jetzt {
background: var(--siegel-blau);
border-color: var(--rahmen-gold);
color: var(--gold);
}
/* ---------- Videoseite ---------- */
.videoseite h1 {
font-size: clamp(1.7rem, 4.2vw, 2.6rem);
color: #FFFFFF;
margin: 0 0 0.8rem;
}
/* ---------- TRENNREGEL (Silbentrennung) ----------
Uwe-Befund 21.09.2026: im Titel der Videoseite stand "SE-HEN".
URSACHE, gemessen: `hyphens: auto` allein benutzt die CSS-Vorgabe
`hyphenate-limit-chars: auto auto auto` = Wort ab 5 Zeichen trennen,
2 Zeichen davor, 2 danach. "SEHEN" hat genau 5 Zeichen -- der Bruch war
nach der Vorgabe zulaessig und trotzdem falsch.
NEUE GRENZE: erst ab 12 Zeichen trennen, mindestens 4 Zeichen vor und
4 nach dem Trennstrich. Gemessen an 674 Kanaltiteln (6097 Woerter):
469 Woerter bleiben trennbar -- darunter jedes echte Kompositum bis
"Kontaktpersonennachverfolgung" (29 Zeichen), das auf einem 360-px-
Telefon ohne Trennung ueber den Rand liefe. Gesperrt sind alle Kurz-
woerter, u. a. "sehen" (5) und "Machtringe" (10).
BROWSER: Chrome/Edge ab 109, Firefox ab 137. Safari kennt die Kurzform
nicht und braucht die beiden -webkit-Langformen; dort fehlt nur die
Mindestwortlaenge, die 4/4-Grenze wirkt. -webkit-hyphens ist Pflicht,
sonst trennt Safari/iOS gar nicht und lange Komposita laufen ueber.
overflow-wrap ist das Netz fuer Browser ganz ohne Silbentrennung. */
.kachel-titel,
.videoseite h1 {
hyphens: auto;
-webkit-hyphens: auto;
hyphenate-limit-chars: 12 4 4;
-webkit-hyphenate-limit-before: 4;
-webkit-hyphenate-limit-after: 4;
overflow-wrap: break-word;
}
/* KOPF DER EINZELSEITE, zweispaltig (Uwe-Weisung 20.09.2026, 22:46: "der
kopfbereich der einzelseiten ist ebenfalls viel zu groß geraten").
Vorher standen Brotkrume, Datum und Titel in drei Zeilen übereinander und
der Spieler begann bei top 283 von 900 px [gemessen ▸ 1400 px]. Titel und
Datum gehören aber nebeneinander: der Titel nimmt den Platz, den er
braucht, das Datum steht rechts an der Grundlinie. Am Telefon bleibt es
untereinander — dort ist der Titel zwei- bis dreizeilig, und ein Datum
daneben hätte keine Spalte mehr. */
.videokopf {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
column-gap: 1.4rem;
align-items: baseline;
margin: 0 0 0.8rem;
}
.videoseite .kicker { color: var(--gold); margin: 0; text-align: right; white-space: nowrap; }
@media (max-width: 760px) {
.videokopf { grid-template-columns: minmax(0, 1fr); }
.videoseite .kicker { text-align: left; white-space: normal; }
}
/* CHIPLEISTE DER VIDEOSEITE — hieß bis zum 20.09.2026 `themenzeile` und
kollidierte damit mit dem Listeneintrag der Themenübersicht weiter unten.
Diese Regel setzte `margin: 0 0 1.8rem`, und weil sie später im Stilblatt
steht als die Listenregel, bekam JEDER Themeneintrag 29 px Zwischenraum
geschenkt — Uwes "Leerzeile zwischen den Zeilen". Ein Name, zwei
Bedeutungen: derselbe Verstoß wie eine Information an zwei Orten, nur im
Stilblatt. Neuer Name, und die Listenregel steht jetzt für sich. */
.themenchips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.4rem; }
.marke-thema {
font-size: 0.78rem;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 0.28rem 0.7rem;
border-radius: 999px;
text-decoration: none;
border: 1px solid var(--rahmen-gold-zart);
color: var(--text-gedaempft);
}
.marke-thema:hover { border-color: var(--rahmen-gold); color: var(--champagner); }
.marke-thema.s1 { border-left: 4px solid var(--s1); }
.marke-thema.s2 { border-left: 4px solid var(--s2); }
.marke-thema.s3 { border-left: 4px solid var(--s3); }
.marke-thema.s4 { border-left: 4px solid var(--s4); }
/* ---------- Zwei-Klick-Spieler (Schritt 12) ---------- */
.spieler { margin: 0 0 2.4rem; }
.spieler-start {
display: block;
position: relative;
width: 100%;
padding: 0;
border: 2px solid var(--rahmen-gold);
border-radius: 14px;
overflow: hidden;
background: #0b1a25;
cursor: pointer;
}
.spieler-start img { width: 100%; height: auto; display: block; }
.spieler-start:hover .spieler-knopf { background: #8b1a1a; color: #fff; transform: translate(-50%, -50%) scale(1.06); }
.spieler-knopf {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: 5.2rem; height: 5.2rem;
border-radius: 50%;
background: rgba(9, 53, 80, 0.88);
border: 2px solid var(--gold);
color: var(--gold);
font-size: 2rem;
display: flex;
align-items: center;
justify-content: center;
padding-left: 0.35rem;
transition: background 0.16s ease, transform 0.16s ease, color 0.16s ease;
}
.spieler-rahmen { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; border: 2px solid var(--rahmen-gold); }
.spieler-rahmen iframe { width: 100%; height: 100%; display: block; border: 0; }
/* ---------- Der Hinweis unter dem Spieler ----------
UWE-WEISUNG 22.09.2026: Der Hinweis wird ein Infopunkt, und sein voller
Text steht nur so lange offen, wie in dieser Browsersitzung noch kein
Video lief. Die Umschaltung macht portal.js ueber die Klasse `entfaltet`;
hier stehen die beiden Zustaende.
ZUSTAND A (`entfaltet`, der Ausgangszustand): Das runde `i` steht links,
der Text daneben — also genau dort, wo bisher der Absatz stand. Die
schwebende Tafel des normalen Infopunkts wird dafuer zurueckgebaut: Ein
Text, der von sich aus offen dasteht, darf den Inhalt darunter nicht
verdecken, und eine Tafel mit Rahmen und Schlagschatten sieht an dieser
Stelle nach Warnung aus. Was bleibt, ist Fliesstext.
ZUSTAND B (ohne `entfaltet`): der gewoehnliche Infopunkt — nur das `i`,
die Tafel kommt auf Zeigen oder Klick. */
.spieler-hinweis {
margin: 0.8rem 0 0;
font-size: 0.86rem;
color: var(--text-gedaempft);
line-height: 1.6;
}
/* Zustand A: Zeichen und Text nebeneinander, der Text bricht unter sich
selbst um und nicht unter das Zeichen. */
.spieler-hinweis.entfaltet > .infopunkt {
display: flex;
align-items: flex-start;
gap: 0.6rem;
}
.spieler-hinweis.entfaltet > .infopunkt > summary { flex: 0 0 auto; }
/* BESCHRIFTET GEHOERT DER TEXT UNTER DIE PILLE, NICHT DANEBEN
(nachgezogen 23.09.2026, im selben Zug wie die Beschriftung selbst).
Nebeneinander funktionierte, solange das Zeichen ein 25 px breiter Kreis
war. Die Pille "i Was dabei uebertragen wird" ist rund 220 px breit und
schiebt den Text in eine entsprechend schmalere Spalte — der kam damit
`[gemessen ▸ Bildbeleg 23.09.2026 bei 1473x700 px]` auf DREI Zeilen statt
zwei. Genau diese eine Zeile fehlt dem Videobild darueber, und damit
haette die Loesung des einen Befunds den anderen verschlechtert.
Uebereinander nimmt der Text die volle Breite zurueck. Die Pille bleibt,
wo Uwe sie haben wollte: als erstes Element der Zeile. */
.spieler-hinweis.entfaltet > .infopunkt.beschriftet {
display: block;
}
.spieler-hinweis.entfaltet > .infopunkt.beschriftet > .infotext {
margin-top: 0.45rem;
}
.spieler-hinweis.entfaltet .infotext {
position: static;
z-index: auto;
width: auto;
max-width: 62ch;
padding: 0;
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
font-size: inherit;
line-height: inherit;
}
/* Der Rueckverweis in die Datenschutzerklaerung bleibt als Link erkennbar —
im Fliesstext traegt die Farbe allein zu wenig. */
.spieler-hinweis.entfaltet .infotext a { text-decoration: underline; }
/* ---------- Kernpunkte und Einführung ---------- */
.einfuehrung p { margin: 0 0 1.2rem; }
.schlagzeilen { margin-top: 3rem; }
.schlagzeilen ul { list-style: none; margin: 0; padding: 0; }
.schlagzeilen li {
border-left: 3px solid var(--rahmen-gold);
padding: 0.2rem 0 0.2rem 1.1rem;
margin: 0 0 1.1rem;
color: var(--text-gedaempft);
}
.schlagzeilen li strong { color: var(--gold); }
/* ---------- Abschrift ---------- */
.transkript { margin-top: 3.4rem; }
.standhinweis {
border: 1px solid var(--rahmen-gold-zart);
border-radius: 10px;
background: rgba(9, 53, 80, 0.35);
padding: 1rem 1.3rem;
margin: 0 0 2rem;
}
.standhinweis p { margin: 0 0 0.4rem; font-size: 0.92rem; color: var(--text-gedaempft); }
.standhinweis p:last-child { margin: 0; }
.standhinweis strong { color: var(--gold); }
.rede { margin: 0 0 1.5rem; }
.redekopf {
margin: 0 0 0.25rem;
display: flex;
align-items: baseline;
gap: 0.6rem;
}
.sprecher {
font-family: "Bebas Neue", "Arial Narrow", sans-serif;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--gold);
font-size: 0.95rem;
}
.sprungmarke {
background: none;
border: 1px solid var(--rahmen-gold-zart);
border-radius: 999px;
color: var(--text-gedaempft);
font-size: 0.78rem;
font-variant-numeric: tabular-nums;
padding: 0.1rem 0.6rem;
cursor: pointer;
}
.sprungmarke:hover { border-color: var(--gold); color: var(--champagner); }
.redetext { margin: 0; color: var(--text-hell); }
/* ---------- Abschrift-Klappe (A18) und Abschriftschutz (A23) ----------
A18: "Abschriften für Suchmaschinen lesbar, für Besucher erst auf Klick."
Der Text steht vollständig im ausgelieferten HTML und ist nur zugeklappt.
A23: "vor dem Herunterladen schützen, SOWEIT es Suchmaschinen nicht
behindert." Mehr als Markieren und Kopieren lässt sich nicht verhindern,
und das ist keine Nachlässigkeit, sondern die Folge der Bedingung: Ein
Text, den eine Suchmaschine liest, steht im Quelltext — und was im
Quelltext steht, kann jeder herausholen, der es darauf anlegt.
user-select:none hält den beiläufigen Griff auf, nicht den entschlossenen.
Wer mehr will, muss die Abschrift aus dem Dokument nehmen und damit auf
die Auffindbarkeit verzichten. */
.abschrift-klappe > summary {
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
gap: 0.7rem;
margin-top: 1.2rem;
padding: 0.7rem 1.1rem;
border: 1px solid var(--rahmen-gold-zart);
border-radius: 8px;
background: rgba(9, 53, 80, 0.45);
color: var(--gold);
font-weight: 600;
letter-spacing: 0.02em;
}
.abschrift-klappe > summary::-webkit-details-marker { display: none; }
.abschrift-klappe > summary::before {
content: "\25B8";
color: var(--gold);
transition: transform 0.15s;
}
.abschrift-klappe[open] > summary::before { transform: rotate(90deg); }
.abschrift-klappe > summary:hover { border-color: var(--gold); }
.abschrift-klappe > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.abschrift-zahl {
margin-left: auto;
font-weight: 400;
font-size: 0.86rem;
color: var(--text-gedaempft);
}
.abschrift-text {
margin-top: 1.4rem;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
/* Die Sprungmarken bleiben bedienbar -- sie sind Knöpfe, kein Lesetext. */
.abschrift-text .sprungmarke { user-select: auto; }
.abschrift-fuss {
margin: 2rem 0 0;
padding-top: 0.9rem;
border-top: 1px solid var(--rahmen-gold-zart);
font-size: 0.86rem;
color: var(--text-gedaempft);
-webkit-user-select: text;
user-select: text;
}
.zurueck { margin-top: 3rem; color: var(--text-gedaempft); }
/* ---------- Suche ---------- */
.suchleiste { display: flex; gap: 0.6rem; margin-top: 1.6rem; max-width: 40rem; }
/* HELLER ALS DER SEITENGRUND (Uwe-Festlegung 20.09.2026: "Das Suchfeld muss
heller gemacht werden. So wird es uebersehen"). Vorher lag das Feld mit
#0b1a25 nur 2 Helligkeitsstufen ueber dem Seitengrund #07131C und der Rahmen
war der zarte Goldton — auf einem dunklen Bildschirm war es praktisch
unsichtbar. Jetzt hebt sich das Feld ab und der Rahmen ist das volle Gold;
der Textkontrast ist dabei nachgerechnet, nicht geschaetzt. */
.suchleiste input {
flex: 1;
padding: 0.7rem 1rem;
border-radius: 8px;
border: 1px solid var(--rahmen-gold);
background: #16344b;
color: var(--text-hell);
font-size: 1rem;
font-family: inherit;
box-shadow: 0 0 0 3px rgba(203, 162, 90, 0.12);
}
.suchleiste input::placeholder { color: #cfd8e0; opacity: 1; }
.suchleiste input:focus { outline: 2px solid var(--gold); border-color: var(--gold); }
.suchleiste button {
padding: 0.7rem 1.4rem;
border-radius: 8px;
border: 1px solid var(--rahmen-gold);
background: var(--siegel-blau);
color: var(--gold);
font-family: "Bebas Neue", "Arial Narrow", sans-serif;
letter-spacing: 0.14em;
font-size: 1rem;
cursor: pointer;
}
.suchleiste button:hover { background: var(--champagner); color: var(--text-dunkel); }
.suchleiste.gross input { font-size: 1.1rem; padding: 0.9rem 1.1rem; }
.filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.2rem 0 0.9rem; }
.filterknopf {
padding: 0.35rem 0.9rem;
border-radius: 999px;
border: 1px solid var(--rahmen-gold-zart);
background: none;
color: var(--text-gedaempft);
font-size: 0.85rem;
cursor: pointer;
}
.filterknopf:hover { border-color: var(--rahmen-gold); color: var(--champagner); }
.filterknopf.jetzt { background: var(--siegel-blau); border-color: var(--gold); color: var(--gold); }
.filterknopf.s1.jetzt { border-color: var(--s1); }
.filterknopf.s2.jetzt { border-color: var(--s2); }
.filterknopf.s3.jetzt { border-color: var(--s3); }
.filterknopf.s4.jetzt { border-color: var(--s4); }
.trefferzahl {
font-family: "Bebas Neue", "Arial Narrow", sans-serif;
letter-spacing: 0.14em;
color: var(--gold);
margin: 0.4rem 0 0;
}
.suchtiefe { font-size: 0.82rem; color: var(--text-gedaempft); margin: 0.25rem 0 0; opacity: 0.8; }
.treffer-liste { list-style: none; margin: 0 -0.7rem; padding: 0; }
.treffer-liste li { border-bottom: 1px solid var(--rahmen-gold-zart); }
/* AUCH DIE TREFFERZEILE IST EINE AUSWAHL (Uwe-Weisung 22.09.2026, dieselbe
Anweisung wie bei den Kacheln — „auf Auswahlseiten mit mehr als einem
dargestellten Video"). Die Trefferliste zeigt bis zu 120 Videos
untereinander; ohne Markierung weiss man beim Klicken nicht sicher,
welche Zeile man trifft. Der Ring sitzt hier INNEN (`inset`), weil die
Zeilen ohne Abstand aneinanderstossen — ein aeusserer Ring wuerde die
Nachbarzeile ueberlappen. */
.treffer-liste a:hover,
.treffer-liste a:focus-visible {
box-shadow: inset 0 0 0 2px var(--gold);
border-radius: 8px;
background: rgba(203, 162, 90, 0.06);
}
/* DIE VIER ZEILEN RECHTS MUESSEN SO HOCH SEIN WIE DAS VORSCHAUBILD LINKS
(Uwe-Festlegung 20.09.2026: "Hier sind die Zeilenabstaende viel zu gross").
Vorher erbte der Trefferblock die Zeilenhoehe des Fliesstexts (1.7) und war
dadurch deutlich hoeher als das Bild; die Liste wirkte luftig und leer.
Gerechnet: Bild 10rem breit im Format 16:9 = 5,625rem hoch. Rechts stehen
Titel (1.15), Meta (1.25) und zwei Textzeilen (1.4) plus zwei kleine
Abstaende — zusammen rund 5,6rem. Nachgemessen im Browser, nicht geschaetzt. */
.treffer-liste a {
display: grid;
grid-template-columns: 10rem 1fr;
gap: 1.1rem;
/* Seitliches Polster plus gegenlaeufige Einrueckung der Liste: Der
Hover-Ring braucht Luft zum Text, die Zeilen sollen aber weiterhin
buendig unter der Ueberschrift stehen. Beide Werte gehoeren zusammen —
wer einen aendert, aendert den anderen. */
padding: 0.85rem 0.7rem;
text-decoration: none;
color: inherit;
align-items: start;
}
/* MOUSEOVER IM GOLDTON (Uwe-Weisung 22.09.2026, zweiter Teil derselben
Anweisung: "und Mouseover bei Videotitel in Suchergebnislisten").
Der Titel steht in Ruhe weiss; beim Zeigen wechselt er auf das
DWKS-Gold. Gemessen [Claude-Web-Kontrast.py]: #CBA25A auf dem
Seitengrund #07131C 7,91:1 — ueber AAA, der Titel bleibt also im
Hover besser lesbar als die Mehrzahl der Portaltexte. */
.treffer-liste a:hover .treffer-titel { color: var(--gold); }
.treffer-liste img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 6px; display: block; }
.treffer-titel {
font-family: "Anton", "Arial Narrow", sans-serif;
text-transform: uppercase;
letter-spacing: 0.03em;
color: #FFFFFF;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 0.15rem;
line-height: 1.15;
}
.treffer-meta {
font-size: 0.8rem;
color: var(--text-gedaempft);
display: block;
line-height: 1.25;
margin-bottom: 0.2rem;
}
/* Zwei Zeilen, keine mehr: sonst waechst der Trefferblock ueber das Bild
hinaus und die Liste wird von Treffer zu Treffer unterschiedlich hoch. */
.treffer-text {
font-size: 0.9rem;
color: var(--text-gedaempft);
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Herkunftsmarke der Trefferzeile: sie sagt, dass der Suchbegriff nicht in
der Beschreibung, sondern in einer Kapitelueberschrift steht. Ohne sie
sieht ein sachlich richtiger Treffer wie ein Fehltreffer aus. */
.treffer-woher {
display: inline-block;
font-size: 0.72rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--gold);
border: 1px solid rgba(203, 162, 90, 0.45);
border-radius: 3px;
padding: 0 0.35em;
margin-right: 0.4em;
vertical-align: 0.05em;
}
/* ---------- Die Fundstelle in der Trefferliste ----------
UWE-WEISUNG 22.09.2026: "Dasselbe gilt für die Markierung der Suchwörter
in den Ergebnislisten. Das muss aber optisch stärker markiert werden.
Siehe analog zu den Suchlistenergebnissen in der Prüftabelle."
VORHER war die Markierung eine Lasur: `rgba(203,162,90,0.3)` als Flaeche,
Champagner als Schrift. Auf dem dunklen Portalgrund hob sie das Wort
kaum heraus — man musste die Zeile lesen, um die Fundstelle zu finden,
und genau das soll eine Markierung abnehmen.
JETZT wie in der Pruefanalyse (`css/prueftabelle.css`, `.pt-row mark`):
volle Flaeche, dunkle Schrift, fett. Dort ist die Flaeche `#ffd56b`;
hier steht dafuer der DWKS-Goldton `--gold`, weil die Weisung ihn nennt.
DAMIT ENTFAELLT DIE ALTE AUSNAHME. Bis heute stand `mark` ausdruecklich
NICHT in der Goldumstellung vom 21.09.2026, und der Grund war der
Kontrast: Gold auf goldlasierter Flaeche mass 4,52:1 — der schlechteste
Wert des Portals ausgerechnet dort, wohin das Auge beim Suchen zuerst
faellt. Die Umkehrung loest das: dunkle Schrift auf voller Goldflaeche
misst #1A1200 auf #CBA25A = 7,83:1, im Hover auf `--gold-hell` 10,60:1
`[gemessen ▸ Claude-Web-Kontrast.py --portal, 22.09.2026, beide Paare
in der Messliste ergaenzt]`. Beide liegen ueber AAA (7,0:1); der alte
Wert von 4,52:1 lag nur knapp ueber AA. Die staerkere Markierung ist
also zugleich die besser lesbare — das ist hier kein Zufall, sondern
der Grund, warum die Pruefanalyse es von Anfang an so macht. */
mark {
background: var(--gold);
color: #1A1200;
font-weight: 700;
border-radius: 3px;
padding: 0 0.2em;
}
/* Beim Zeigen hellt die Flaeche auf — dieselbe Rueckmeldung, die die
Pruefanalyse mit `#ffe89a` gibt. */
.treffer-liste a:hover mark { background: var(--gold-hell); }
@media (max-width: 620px) {
.kacheln { grid-template-columns: 1fr; }
.treffer-liste a { grid-template-columns: 6rem 1fr; gap: 0.8rem; }
.spieler-knopf { width: 3.6rem; height: 3.6rem; font-size: 1.4rem; }
.suchleiste { flex-direction: column; }
}
/* ---------- Themenübersicht (E2, Uwe-Entscheidung 20.09.2026: "beides") ----
Alle Reihen auf einem Blatt. Jede Zeile führt an ZWEI Orte: in das Portal
(Abschrift, Suche) und an den Kanal (Playlist am Stück). Das ist keine
Doppelung derselben Sache, sondern zwei Werkzeuge für zwei Absichten. */
.themenuebersicht .themenblock { margin: 0 0 2.6rem; }
.themenuebersicht .themenblock h2 {
display: flex;
align-items: center;
gap: 0.7rem;
margin: 0 0 0.3rem;
}
.themenuebersicht .themenblock .zahl {
margin: 0 0 0.9rem;
font-size: 0.92rem;
color: var(--text-gedaempft);
}
.themenliste-lang { list-style: none; margin: 0; padding: 0; }
.themenzeile {
display: flex;
align-items: center;
gap: 0.9rem;
padding: 0.5rem 0.2rem 0.5rem 0.9rem;
border-bottom: 1px solid rgba(198, 168, 109, 0.16);
border-left: 3px solid transparent;
}
/* Playlist-Titelbild als Miniatur vor der Zeile (Uwe-Weisung 20.09.2026).
Feste Breite, damit alle Titel auf einer senkrechten Linie beginnen —
eine Reihe eingerückter Titel wäre schlechter lesbar als gar kein Bild.
Das Bild ist reine Zugabe: Es trägt keinen eigenen Text, wiederholt nur
das Ziel des Titel-Links und ist deshalb aus dem Tastaturweg und aus der
Vorlesereihenfolge genommen. Wer nur die Tastatur benutzt, springt
weiterhin von Titel zu Titel. */
.themenzeile-bild {
flex: 0 0 auto;
display: block;
width: 128px;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 6px;
background: rgba(9, 53, 80, 0.55);
border: 1px solid var(--rahmen-gold-zart);
}
.themenzeile-bild img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.themenzeile-bild .kein-bild {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: 0.72rem;
letter-spacing: 0.08em;
color: var(--text-gedaempft);
}
.themenzeile:hover { background: rgba(9, 53, 80, 0.35); }
.themenzeile.s1 { border-left-color: var(--s1); }
.themenzeile.s2 { border-left-color: var(--s2); }
.themenzeile.s3 { border-left-color: var(--s3); }
.themenzeile.s4 { border-left-color: var(--s4); }
.themenzeile-titel {
flex: 1 1 auto;
min-width: 0;
color: var(--text-hell);
text-decoration: none;
font-weight: 600;
}
.themenzeile-titel:hover { color: var(--champagner); }
.themenzeile-unter {
display: block;
font-weight: 400;
font-size: 0.85rem;
color: var(--text-gedaempft);
}
.themenzeile-zahl {
flex: 0 0 auto;
font-size: 0.88rem;
color: var(--text-gedaempft);
white-space: nowrap;
}
.themenzeile-kanal {
flex: 0 0 auto;
font-size: 0.84rem;
white-space: nowrap;
padding: 0.15rem 0.6rem;
border: 1px solid var(--rahmen-gold-zart);
border-radius: 999px;
text-decoration: none;
}
.themenzeile-kanal:hover { border-color: var(--gold); background: rgba(198, 168, 109, 0.12); }
.themenzeile-kanal.leer { border-color: transparent; color: var(--text-gedaempft); }
/* Verweis auf die Kanalliste im Kopf einer einzelnen Themenseite */
.kanalliste { margin: 0.6rem 0 0; font-size: 0.92rem; }
/* Podcast-Icons (Uwe 06.10.2026): das Zeichen der Plattform vor ihrem Namen,
in der Zeile unter dem Spieler und in der Leiste "Als Podcast hören" auf der
Portalstartseite. Die Dateien liegen lokal unter /videos/podcast/.
Groesse an der Schrift gekoppelt (1.15em), damit Icon und Name in beiden
Schriftgroessen (0.92rem Zeile, Bebas-Leiste) zusammenpassen. */
.pc-icon {
width: 1.15em;
height: 1.15em;
vertical-align: -0.2em;
margin-right: 0.35em;
border-radius: 0.22em;
}
.jahresleiste a .pc-icon { vertical-align: -0.15em; }
.kanalliste.podcast a { white-space: nowrap; }
@media (max-width: 620px) {
.themenzeile { flex-wrap: wrap; gap: 0.4rem 0.8rem; align-items: center; }
/* Am Handy steht das Bild NEBEN dem Titel, nicht über ihm: die Zeile
bricht nach dem Titel um, Zahl und Kanalknopf rücken darunter. */
.themenzeile-bild { width: 72px; }
.themenzeile-titel { flex: 1 1 0; min-width: 8rem; }
.themenzeile-zahl, .themenzeile-kanal { margin-left: calc(72px + 0.9rem); }
}
/* Zweitdatum auf der Videoseite (Uwe, dritte Durchsicht 20.09.2026):
Angezeigt wird das AUFNAHMEdatum. Wo es vom Hochladedatum abweicht, steht
beides — sonst widerspricht die Seite dem Kanal, ohne es zu sagen. */
.videoseite .kicker .datum-zweit {
display: block;
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
text-transform: none;
letter-spacing: 0;
font-size: 0.82rem;
color: var(--text-gedaempft);
margin-top: 0.15rem;
}
/* ---------- RUBRIK-BADGE: die Saeule steht NEBEN dem Titel ----------
(Uwe 21.09.2026, 06:57: "ich sehe keinerlei aenderungen in den
kopfbereichen bezueglich der flaechenreduktion")
Der Umbau vom Vorabend hat die vier gestapelten Zeilen auf zwei gebracht,
aber die erste davon war weiter zweizeilig: "SAEULE 1" und darunter der
Untertitel "DIE KRAEFTE HINTER DEN EREIGNISSEN" — zusammen 56 px, die
nichts sagen, was der Titel und die Frage daneben nicht schon sagen.
Jetzt steht die Saeulennummer als BADGE in derselben Zeile wie der Titel,
und der Untertitel ist in den Infopunkt gewandert, wo er beim Aufklappen
ohnehin erklaert wird. Aus zwei Zeilen wird eine.
Gemessen an der Saeulenseite bei 1400x900: erster Inhalt vorher 275 px
(nach dem ersten Umbau), Ziel unter 200. */
.rubrik-badge {
font-family: "Bebas Neue", "Arial Narrow", sans-serif;
letter-spacing: 0.12em;
text-transform: uppercase;
font-size: 0.82rem;
color: var(--siegel-blau-tief);
background: var(--gold);
border-radius: 999px;
padding: 0.12rem 0.6rem 0.04rem;
white-space: nowrap;
align-self: center;
}
.rubrik-badge.s1 { background: #6FB2DE; }
.rubrik-badge.s2 { background: #E0736F; }
.rubrik-badge.s3 { background: #D0A75E; }
.rubrik-badge.s4 { background: #A995DB; }
.titelzeile {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0.55rem;
min-width: 0;
}
/* ---------- SUCHSEITE: Titel, Suchfeld, Filter, Stand in drei Zeilen ----------
(Uwe 21.09.2026: "Platzverschwendung in der oberen Seitenhaelfte bei
Videoportal-Suche")
Vorher: Kicker, Titel, Suchfeld, Filterreihe, Trefferzahl und Suchtiefe in
SECHS Bausteinen uebereinander, Kopf 221 px, erster Treffer bei 347 px von
900 [gemessen ▸ 21.09.2026, 06:58, live]. Der Kicker "Alle 547 Videos" ist
in die Standzeile gewandert, Trefferzahl und Suchtiefe stehen in einer
Zeile, und die Filterreihe sitzt neben dem Suchfeld. */
/* RASTERKOLLISION, gemessen und behoben [21.09.2026, 07:10]: Die allgemeine
Regel gibt `.suchleiste` zwei Zeilen (`grid-row: 1 / span 2`), weil sie auf
der Portalstartseite neben Kicker UND Titel steht. Auf der Suchseite kommt
die Filterreihe hinzu — mit `grid-row: 2` landete sie in derselben Zelle
wie das Suchfeld und lag 15 px darüber. Hier bekommt das Suchfeld deshalb
nur EINE Zeile, die Filterreihe die zweite. */
/* SPEZIFITAET, gemessen [21.09.2026, 07:12]: Die allgemeine Regel
`.rubrikkopf:not(.schmal) .suchleiste` waehlt mit drei Klassenstufen und
schlaegt deshalb ein blosses `.suchkopf .suchleiste` mit zwei — die
Korrektur wirkte nicht, obwohl sie spaeter im Stilblatt stand und richtig
geschrieben war. Erst der doppelt qualifizierte Selektor greift. Eine
Aenderung, die nicht wirkt, ist nicht dieselbe wie eine falsche Aenderung:
hier stimmte die Absicht und die Gewichtung nicht. */
/* DIE TREFFERZAHL STEHT NEBEN DEM SUCHFELD, NICHT DARUNTER
(Uwe 21.09.2026: "Die Trefferzahl rechts neben das Suchfeld platzieren").
Vorher sass sie in der zweiten Rasterzeile unter dem Feld [gemessen ▸
21.09.2026, 09:15: Feld top 107 + 54 hoch, Trefferzahl top 188]. Feld und
Zahl liegen jetzt in EINEM Flex-Behaelter `.suchzeile`, deshalb steht die
Zahl auf derselben Hoehe und wandert am Telefon von selbst darunter. */
.rubrikkopf.suchkopf:not(.schmal) .suchzeile { grid-column: 2; grid-row: 1; }
.rubrikkopf.suchkopf:not(.schmal) .titelzeile { grid-column: 1; grid-row: 1; }
/* ZWEI ZEILEN: oben Titel mit Infopunkt und Suchfeld mit Trefferzahl, unten
die Filterreihe ueber die VOLLE Breite. Sie bekommt beide Spalten, weil
sie sonst in 560 px zwei Knopfzeilen braucht (64 px statt 28) — und
einzeilig ist sie ausdruecklich gewollt (Uwe 21.09.2026: "Alle Saeulen …
einzeilig"). */
.rubrikkopf.suchkopf:not(.schmal) .filter {
grid-column: 1 / -1;
grid-row: 2;
justify-content: flex-start;
flex-wrap: nowrap;
}
.suchkopf .suchzeile {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.3rem 0.9rem;
}
/* `min-width: 0` ist hier kein Feinschliff, sondern die Bedingung dafuer,
dass die Zahl NEBEN dem Feld bleibt: Ein bringt eine eigene
Mindestbreite mit (Browservorgabe size=20, rund 250 px), und ein
Flex-Kind schrumpft nie unter seine Mindestbreite — die Zahl waere
umgebrochen, sobald die Spalte enger wird als Feld + Zahl.
[gemessen ▸ 21.09.2026, 09:26: bei 1100 px stand die Zahl 58 px unter
dem Feld, bei 1400 px daneben — derselbe Stand, zwei Bilder.] */
.suchkopf .suchzeile .suchleiste { flex: 1 1 10rem; margin-top: 0; min-width: 0; }
.suchkopf .suchzeile .suchleiste input { min-width: 0; }
.suchkopf .trefferzahl { margin: 0; font-weight: 600; white-space: nowrap; flex: 0 0 auto; }
/* Der Suchhinweis steht jetzt IM Infopunkt (Uwe 21.09.2026: "Gesucht wird
in … als Info-Punkt") und ist dort kein Kleingedrucktes mehr, sondern der
Inhalt der Tafel — also in Tafelgroesse und ohne die Daempfung, die ihn
als Randnotiz auszeichnete. */
.infopunkt .infotext .suchtiefe {
font-size: 0.95rem;
opacity: 1;
margin: 0;
color: var(--text-gedaempft);
}
@media (max-width: 760px) {
/* AM TELEFON ALLES UNTEREINANDER UND VOLLE BREITE. Gemessen bei 390 px
ergab der Rasterstand aus der PC-Ansicht eine Filterreihe mit BREITE 0
und 278 px Hoehe — die Knoepfe stapelten sich senkrecht in einer auf
Null geschrumpften Spalte, und das Suchfeld stand um 32 px eingerueckt.
`justify-self: stretch` und volle Breite stellen das ab. Die Filterreihe
darf hier wieder umbrechen: fuenf Knoepfe passen in 342 px nicht in eine
Zeile, und eine waagerechte Schiebeleiste am Telefon versteckt Knoepfe. */
.rubrikkopf.suchkopf:not(.schmal) .titelzeile,
.rubrikkopf.suchkopf:not(.schmal) .suchzeile,
.rubrikkopf.suchkopf:not(.schmal) .filter {
grid-column: 1;
grid-row: auto;
justify-self: stretch;
justify-content: flex-start;
text-align: left;
width: 100%;
}
.rubrikkopf.suchkopf:not(.schmal) .filter { flex-wrap: wrap; }
}
/* ---------- VIDEOSEITE: das Datum steht HINTER dem Titel ----------
(Uwe 21.09.2026: "Positioniere das Datum hinter der Titelzeile")
Es sass rechts am Seitenrand in derselben Rasterzeile — weit weg vom
Titel, auf den es sich bezieht. Jetzt haengt es unmittelbar hinter dem
Titeltext an derselben Grundlinie und bricht mit ihm um. */
.videokopf { display: block; margin: 0 0 0.6rem; }
.videoseite .videokopf h1 { display: inline; }
.videoseite .videokopf .kicker {
display: inline;
margin-left: 0.7rem;
white-space: nowrap;
font-size: 0.95rem;
vertical-align: baseline;
}
/* ==================================================================
VIDEOSEITE, Umbau 21.09.2026 nach vier Uwe-Punkten
================================================================== */
/* 1 PLAYLISTNAME NACH RECHTS, LEERZEILE WEG (Uwe: "Die Kennzeichnung der
Playlist ... kann rechts hinter das Datum oder ganz nach rechts. Dann die
Leerzeile loeschen.") Der Chip stand als eigener Absatz UNTER dem Titel und
kostete dort eine ganze Zeile plus 1,4 rem Abstand. Jetzt sitzt er in
derselben Kopfzeile ganz rechts, zusammen mit dem Abschrift-Punkt.
Am Telefon faellt die rechte Gruppe unter den Titel — nebeneinander waere
bei 342 px beides unleserlich (dieselbe Grenze wie ueberall im Portal). */
.videoseite .videokopf {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
column-gap: 1.4rem;
row-gap: 0.4rem;
margin: 0 0 1rem;
}
.videoseite .videokopf h1 { display: inline; flex: 1 1 22rem; min-width: 0; }
.videoseite .kopf-rechts {
display: flex;
align-items: center;
gap: 0.6rem;
flex: 0 0 auto;
}
.videoseite .kopf-rechts .themenchips { margin: 0; }
/* 2 DIE ERSTE PLAYERANSICHT LAESST DEN BESCHREIBUNGSTEXT INS BILD
(Uwe: "Die erste Playeransicht des Videos soll so bemessen sein, dass auf
einem PC-Bildschirm der Beschreibungstext komplett zu sehen ist.")
Ein 16:9-Bild ueber die volle Textbreite ist bei 1008 px Spalte 567 px hoch
— zusammen mit Kopfleiste, Titel und Datenschutzhinweis bleibt vom
900-px-Fenster nichts fuer den Text. Die Hoehe wird deshalb GEDECKELT und
die Breite folgt ihr (aspect-ratio rechnet sie aus), statt umgekehrt.
`min()` mit vh haelt es auf kleinen Schirmen klein und auf grossen
begrenzt; die Mitte bleibt, damit kein Bild am linken Rand klebt. */
.videoseite .spieler {
/* GEMESSEN, NICHT GESCHAETZT [1400x900, Claude-Web-Geometrie.mjs]:
Mit 46vh/26rem endete der Beschreibungstext bei 939 px — 39 px unter der
Fensterkante, also gerade NICHT mehr vollstaendig sichtbar. Uwes
Bedingung ist binaer ("komplett zu sehen"), deshalb entscheidet die
Nachmessung und nicht das Augenmass. */
/* ZWEITE NACHMESSUNG [live, 1400x900]: Die Fussleiste ist STICKY und beginnt
bei 864 px — der Text endete bei 881 und steckte mit 17 px dahinter. Die
Bezugskante ist also nicht der Fensterrand, sondern die Oberkante der
Fussleiste; wer gegen den Fensterrand misst, misst 36 px zu viel. */
/* DRITTE NACHMESSUNG [22.09.2026, Uwe: "Die Regel, dass auch der
Beschreibungstext beim ersten Aufschlagen eines Videos am PC sichtbar
sein soll ist nicht eingehalten."]
Der Wert `min(35vh, 19rem)` war gegen GENAU EIN Fensterformat geprueft
— 1400x900. Dort stimmte er auch weiterhin (31 px Luft). Darunter
nicht: Gemessen am Anlassvideo bei 1843 px Breite endete der
Beschreibungstext
bei 900 px Fenster -> 833, Fussleiste ab 864 (+31, haelt)
bei 860 px Fenster -> 830, Fussleiste ab 824 ( -6, bricht)
bei 800 px Fenster -> 809, Fussleiste ab 764 (-45, bricht)
bei 700 px Fenster -> 795, Fussleiste ab 664 (-131, bricht)
DIE FEHLERKLASSE ist nicht der Zahlenwert, sondern die EINZELMESSUNG:
Eine binaere Regel ("komplett zu sehen") an einem einzigen Format zu
pruefen sagt nichts ueber den Bereich, in dem sie gilt. Seit heute
misst `Claude-Web-Gestaltungsregeln.mjs` sie als Regel 4 ueber vier
Fensterhoehen (700/800/860/940). EINE DATEI `Claude-Web-Schirmprobe.mjs`
GIBT ES NICHT — hier stand bis zum 22.09.2026 ein erfundener Dateiname.
`vh` ALLEIN TRAEGT NICHT, und das ist der Grund fuer die zweite
Bedingung: Ueber dem Spieler stehen Kopfleiste und Titel, und der
Titel ist ein bis drei Zeilen hoch — ein reiner Prozentsatz der
Fensterhoehe weiss davon nichts. `min()` mit einem festen Abzug haelt
deshalb auch dann, wenn der Titel umbricht. */
/* FUENFTE NACHMESSUNG [22.09.2026, Uwe: "Die Darstellung der Videos ist
mangelhaft"] — und diesmal war der Fehler nicht der Kompromiss, sondern
die ARITHMETIK. Der Abzug von 37rem war nicht gemessen, sondern aus
Einzelposten aufaddiert und aufgerundet. Gemessen mit
Claude-Web-Geometrie.mjs am Anlassvideo, Fenster 1580 breit:
Fenster 700 -> Bild 192x108, Beschreibung endet 562, Fussleiste 664
Fenster 800 -> Bild 370x208, Beschreibung endet 662, Fussleiste 764
Fenster 900 -> Bild 540x304, Beschreibung endet 758, Fussleiste 864
In JEDER Zeile bleiben rund 102 px ungenutzt — der Abzug war um diesen
Betrag zu gross, und zwar gleichmaessig. 37rem - 6.4rem = 30.6rem; auf
33rem gesetzt, damit ein dreizeiliger Titel (gemessen +39 px gegenueber
dem zweizeiligen hier) noch Platz hat.
DIE 19rem-GRENZE IST ERSATZLOS GEFALLEN. Sie deckelte das Bild auf
304 px — auch auf einem 1080-px-Schirm, auf dem 175 px Leerraum unter
der Beschreibung standen. Ein fester rem-Deckel kennt die Fensterhoehe
nicht; 42vh kennt sie. Damit waechst das Bild mit dem Schirm, statt auf
einer Zahl aus einem einzigen Testfenster stehenzubleiben.
SECHSTE UND LETZTE RUNDE: Auch 33rem war wieder EINE Zahl fuer ALLE
Seiten — und genau daran scheiterte sie. Die Beschreibungen sind
unterschiedlich lang (gemessen: 119 px auf der einen, 268 px auf der
anderen Videoseite, 149 px Unterschied). Kein fester Abzug kann beides
treffen; der naechste Zahlenwert waere die siebte Runde gewesen.
DIE HOEHE WIRD DESHALB SEIT DEM 22.09.2026 GEMESSEN, nicht geschaetzt —
in `portal.js`, Abschnitt "DIE SPIELERHOEHE WIRD GEMESSEN". Dort steht
auch, warum das hier keine neue Abhaengigkeit schafft: Ohne Skript gibt
es auf dieser Seite ueberhaupt kein Video.
DIESER WERT IST NUR NOCH DER RUECKFALL fuer den Fall, dass das Skript
nicht laeuft. Er ist bewusst der VORSICHTIGE der beiden: lieber ein zu
kleines Vorschaubild als ein Beschreibungstext hinter der Fussleiste.
Wer ihn aendert, aendert nicht die Darstellung im Betrieb. */
/* UNTERGRENZE — EIN VIDEO, DAS NIEMAND ANSEHEN MAG, ERFUELLT KEINE REGEL
(Uwe-Ruege 23.09.2026: "Schon wieder sind die Einzelvideos nur als
Miniatur dargestellt.")
`[gemessen ▸ 23.09.2026 an der Videoseite im Netz, Breite 1473 px, ueber
den Hoehenbereich: bei 934 px Fensterhoehe 756x425 px · bei 800 px
517x291 · bei 747 px 423x238 · bei 700 px 340x191 · bei 623 px
203x114 px. Uwes Bild zeigte 340x191 — also genau den 700-px-Fall.]`
DIE ALTE FORMEL KANNTE NUR EINE RICHTUNG. `calc(100vh - 37rem)` faellt
bei 700 px Fensterhoehe auf 108 px und bei 623 px auf 12 px; es gab
keinen Boden. Sie war als VORSICHTIGER Rueckfall gedacht ("lieber ein zu
kleines Vorschaubild als ein Beschreibungstext hinter der Fussleiste") —
und diese Vorsicht ist der Fehler: Sie kauft die Sichtbarkeit des
Begleittextes mit der Unbrauchbarkeit der Hauptsache.
DIE AUFLOESUNG DES ZIELKONFLIKTS, ausdruecklich benannt: Reicht der Platz
nicht fuer beides, gewinnt ab hier das VIDEO. Die Beschreibung rutscht
dann unter die Falz und wird durch Scrollen erreicht — sie ist seit E17
ohnehin auf drei Zeilen gedeckelt und hat ihren Aufklapper. Die aeltere
Weisung vom 21.09.2026 ("Beschreibungstext komplett zu sehen") bleibt
erfuellt, solange der Platz reicht; sie wird nur nicht mehr durch
Schrumpfen des Bildes ERZWUNGEN.
270 px Hoehe sind 480 px Breite — die Groesse, ab der das Vorschaubild
seine Schrift noch traegt. Der geruegte Zustand lag mit 191 px deutlich
darunter. */
--spieler-mindesthoehe: 270px;
--spieler-hoehe: max(var(--spieler-mindesthoehe), min(35vh, 19rem, calc(100vh - 37rem)));
max-width: calc(var(--spieler-hoehe) * 16 / 9);
margin: 0 auto 1.2rem;
}
.videoseite .spieler-start,
.videoseite .spieler-rahmen { aspect-ratio: 16 / 9; }
.videoseite .spieler-start img { height: 100%; object-fit: cover; }
.videoseite .spieler-hinweis { margin: 0.6rem 0 0; font-size: 0.8rem; }
.videoseite .einfuehrung { margin-top: 1rem; }
.videoseite .einfuehrung p { margin: 0 0 0.9rem; }
/* DIE BESCHREIBUNG ZEIGT DREI ZEILEN, DER REST KOMMT AUF KLICK
(Uwe-Entscheidung E17 vom 22.09.2026: "die Beschreibung soll nur wenige
Zeilen darstellen, was darueber hinausgeht kann mit '…' zur manuellen
Klickerweiterung angeboten werden.")
WARUM DAS DEN ZIELKONFLIKT AUFLOEST und nicht nur verschiebt: Bis heute
stritten zwei Regeln um denselben Platz — "Video gross" gegen
"Beschreibung ohne Scrollen sichtbar". Der Streit entstand, weil die
Beschreibung UNTERSCHIEDLICH viel Platz nahm: gemessen 119 px auf der
einen, 268 px auf der anderen Videoseite. Gedeckelt auf drei Zeilen
braucht sie IMMER gleich viel — rund 89 px. Damit ist der Platzbedarf
keine Unbekannte mehr, und das Bild bekommt auf jeder Seite denselben
Rest.
DER DECKEL SITZT AUF DEM TEXT, NICHT AUF DEM ABSCHNITT: Der Knopf steht
INNERHALB von `.einfuehrung`, damit Regel 4 des Gestaltungs-Gates ihn
mitmisst. Saesse er darunter, waere er genau das, was die Regel verbietet
— ein Bedienelement hinter der Fussleiste.
OHNE SKRIPT bleibt der Text vollstaendig stehen (die Klasse `gekuerzt`
setzt `portal.js`). Die Fehlrichtung ist mit Absicht diese: lieber die
ganze Beschreibung als ein abgeschnittener Text ohne Knopf. */
/* DER DECKEL SITZT AUF DER GEMESSENEN ZEILENHOEHE, NICHT AUF EINER GERATENEN.
ZWEI VERWORFENE ANLAEUFE, damit sie niemand wiederholt:
1. `max-height: calc(3 * 1.62em)` — der Zeilenabstand war geschaetzt.
Gemessen sind es 26,2 px statt 27,5; die vierte Zeile lugte 4 px unter
dem Deckel hervor und musste mit einem Farbverlauf zugedeckt werden.
Kosmetik ueber einem Rechenfehler.
2. `-webkit-line-clamp: 3` — schneidet zwar zeilengenau, setzt aber ein
EIGENES Auslassungszeichen ans Zeilenende. Zusammen mit dem klickbaren
Knopf standen dann ZWEI davon untereinander, und das browsereigene ist
gerade nicht anklickbar. Uwe hat genau ein „…" bestellt, und zwar das,
das etwas tut.
JETZT: `portal.js` misst `line-height` im Browser und schreibt sie als
`--zeilenhoehe` hierher. Der Deckel ist damit exakt drei Zeilen hoch, es
bleibt kein Rest sichtbar, und das einzige Auslassungszeichen der Seite
ist der Knopf. Der Rueckfallwert 1.55em gilt nur, falls das Skript nicht
laeuft — dann gibt es ohnehin keinen Knopf und der Deckel faellt weg. */
.videoseite .einfuehrung-text.gekuerzt {
--zeilen: 3;
max-height: calc(var(--zeilen) * var(--zeilenhoehe, 1.55em));
overflow: hidden;
}
.videoseite .einfuehrung-text.gekuerzt > p { margin-bottom: 0; }
/* DER KNOPF IST DAS EINZIGE AUSLASSUNGSZEICHEN DER SEITE und muss als
Bedienelement zu erkennen sein — ein 0,92-rem-Zeichen von 20 px Breite war
im Bildbeleg kaum auffindbar. Groesser gesetzt, mit Rahmen und Flaeche. */
.videoseite .einfuehrung-mehr {
background: rgba(203, 162, 90, 0.10);
border: 1px solid var(--rahmen-gold-zart);
border-radius: 6px;
color: var(--gold);
font: inherit;
font-size: 1.15rem;
line-height: 1;
letter-spacing: 0.08em;
cursor: pointer;
padding: 0.15rem 0.8rem 0.35rem;
margin: 0.5rem 0 0;
}
.videoseite .einfuehrung-mehr:hover { color: var(--champagner); border-bottom-color: var(--rahmen-gold); }
.videoseite .einfuehrung-mehr:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* ======================================================================
DER BESCHREIBUNGSTEXT PASST INS FENSTER — DIE PLATZRECHNUNG VON GRUND AUF
(Uwe-Ruege 28.09.2026: "Die Regel, dass auf dem PC auch der komplette
Beschreibungstext zu sehen sein soll, ist nicht erfuellt. Das ist
offensichtlich ein struktureller Fehler." · FK-vd)
DIE MESSUNG, DIE ALLES ERKLAERT: Uwes Browser laeuft mit 150 % Seitenzoom
`[gemessen 28.09.2026: screen 1920x1080, devicePixelRatio 1.5,
innerHeight 633, innerWidth 1243]`. Der Zoom teilt die verfuegbaren
CSS-Pixel — aus 942 px Fensterinnenraum werden 633. Die Seite war fuer
835 px gebaut. Sie hat also NIE gepasst, und das Gate sprach sie frei,
weil es die Frage "ab wann passt es ueberhaupt?" nicht stellte.
DIE BILANZ VORHER, bei 633 px verfuegbar und 832 px gebraucht:
Kopfleiste 72 · Krume+Abstand 35 · Titel 116 · Video 270 ·
Hinweis offen 118 · Beschreibung 126 · Abstaende 51 · Fuss+Luft 44
WAS HIER NACHGIBT UND WAS NICHT — das ist der Kern, und er folgt Uwes
eigener Rangfolge: Das VIDEO bleibt auf 270 px (Ruege 23.09.2026, "keine
Miniatur"), die BESCHREIBUNG bleibt dreizeilig (E17). Nachgegeben haben
die Posten, die keine Weisung tragen — Titel, Krume, Abstaende,
Knopfzeile — plus der Datenschutzhinweis, der auf Uwes Entscheidung vom
28.09.2026 zugeklappt startet statt entfaltet.
`[gemessen ▸ jeder Wert einzeln am Live-DOM bei 1243x633: Titel 116 -> 61,
Krume -14, Abstaende -35, Knopfzeile -7, Hinweis 118 -> 29. Schwelle
835 -> 614 px, also 19 px Luft im schlechtesten gemessenen Fall
(zweizeiliger Titel).]` */
/* DIE STRAFFUNG GILT NUR, WO DER PLATZ FEHLT — NACH FENSTERHOEHE GESTAFFELT.
Der erste Entwurf schrumpfte Titel, Krume und Kopfleiste GLOBAL. Das
loest das Problem bei 633 px und beschaedigt die Seite bei 1080 px, wo
reichlich Platz ist: Dort stuende ein kleiner Titel ohne Grund. Eine
Hoehen-Media-Query trennt beides sauber — sie fragt genau die Groesse ab,
um die gestritten wird.
`[gemessen ▸ am Pruefserver bei 1243x633: Schwelle 835 -> 620 px, also
13 px Luft; bei 1080 px Fensterhoehe greift die Query nicht und die
Gestaltung bleibt unveraendert]` */
@media (max-height: 820px) {
.videoseite .videokopf h1 { font-size: clamp(1.2rem, 2.2vw, 1.45rem); line-height: 1.16; }
/* Die Beschreibung behaelt ihre DREI Zeilen (E17) — nur ihr Zeilenabstand
wird knapper. 1.45em sind bei 17 px Schrift 24,6 px und bleiben gut
lesbar; die Deckelung rechnet mit derselben Variablen weiter. */
.videoseite .einfuehrung { --zeilenhoehe: 1.45em; }
.videoseite .einfuehrung p { line-height: 1.45; }
.videoseite .krume { font-size: 0.72rem; margin: 0 0 0.1rem; line-height: 1.2; }
.videoseite .videokopf { margin: 0 0 0.25rem; row-gap: 0.15rem; }
.videoseite .spieler { margin: 0 auto 0.35rem; }
.videoseite .spieler-hinweis { margin: 0.25rem 0 0; }
.videoseite .einfuehrung { margin-top: 0.25rem; }
/* Die Kopfleiste ist GESCHWISTER von , nicht ihr
Kind — `.videoseite header.site` griff deshalb nie (gemessen: 72 px
blieben 72 px). `:has()` fragt den Rahmen von aussen ab; kennt ein
Browser es nicht, bleibt die Leiste 72 px und der Text rutscht 16 px
tiefer. Ein Schoenheitsfehler, kein Bruch. */
body:has(main.videoseite) header.site { padding: 0.4rem 1.5rem; }
body:has(main.videoseite) header.site img { width: 34px; height: 34px; }
}
/* DER AUFKLAPPKNOPF STEHT IN DER TEXTZEILE, NICHT DARUNTER.
Eine eigene Zeile fuer drei Punkte kostete 37 px — mehr als der Abstand
zwischen zwei Absaetzen. Inline bleibt er gleich gut zu treffen (die
Polsterung bleibt), kostet aber nur noch die Zeilenhoehe, die ohnehin da
ist. */
.videoseite .einfuehrung-mehr {
display: inline;
margin: 0 0 0 0.4rem;
padding: 0 0.45rem 0.1rem;
vertical-align: baseline;
}
@media (max-width: 760px) {
/* Am Telefon zaehlt die Breite, nicht die Hoehe: dort steht der Text
ohnehin unter dem Bild, und ein gedeckeltes Video waere nur kleiner. */
.videoseite .spieler { --spieler-hoehe: 100vh; max-width: 100%; }
}
/* 3 DIE GANZE ABSCHRIFT STECKT IM INFOPUNKT (Uwe: "Der gesamte Abschriftblock
soll in einen I-Punkt 'Abschrift' und oben rechts neben dem Playlistnamen
platziert werden.") Der Punkt traegt sein Wort sichtbar — ein nackter
i-Kreis neben einem Playlist-Chip verriete nicht, dass dahinter der
vollstaendige Text liegt. */
.infopunkt.beschriftet > summary {
width: auto;
height: auto;
border-radius: 999px;
padding: 0.2rem 0.8rem 0.2rem 0.4rem;
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: "Bebas Neue", "Arial Narrow", sans-serif;
font-style: normal;
font-size: 0.9rem;
letter-spacing: 0.1em;
text-transform: uppercase;
line-height: 1.4;
}
.infopunkt.beschriftet > summary .ip-zeichen {
font-family: Georgia, "Times New Roman", serif;
font-style: italic;
width: 1.25rem; height: 1.25rem;
border-radius: 50%;
border: 1px solid currentColor;
display: inline-flex; align-items: center; justify-content: center;
font-size: 0.85rem; letter-spacing: 0;
}
/* DIE TAFEL IST EIN LESERAUM, KEIN TOOLTIP. 70 Abschnitte brauchen Breite und
eine eigene Bildlaufleiste; ohne `max-height` waere sie hoeher als der
Bildschirm und ihr Ende unerreichbar. Sie kippt nach LINKS, weil ihr Punkt
am rechten Seitenrand sitzt — nach rechts ragte sie aus dem Fenster. */
.abschrift-punkt > .infotext.abschrift-tafel {
left: auto;
right: 0;
width: min(58rem, 92vw);
max-height: 72vh;
overflow-y: auto;
overscroll-behavior: contain;
text-align: left;
}
.abschrift-tafel .abschrift-kopf {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1rem;
margin: 0 0 0.4rem;
color: var(--gold);
}
.abschrift-tafel .abschrift-zahl {
font-family: "Bebas Neue", "Arial Narrow", sans-serif;
letter-spacing: 0.12em;
color: var(--text-gedaempft);
font-size: 0.85rem;
white-space: nowrap;
}
.abschrift-tafel .abschrift-stand {
font-size: 0.85rem;
color: var(--text-gedaempft);
border-bottom: 1px solid var(--rahmen-gold-zart);
padding-bottom: 0.7rem;
margin: 0 0 0.9rem;
}
.abschrift-tafel .abschrift-text { user-select: none; }
.abschrift-tafel .abschrift-text p { margin: 0 0 0.8rem; }
.abschrift-tafel .abschrift-fuss {
border-top: 1px solid var(--rahmen-gold-zart);
padding-top: 0.7rem;
font-size: 0.82rem;
color: var(--text-gedaempft);
}
/* DIE TAFEL WEICHT, WENN SIE DAS VIDEO VERDECKT (Uwe 22.09.2026: "Wenn man
eine Zeitmarke in der Abschrift klickt, startet zwar das Video, aber es
wird von der Abschrift verdeckt").
WARUM EINE EIGENE KLASSE und nicht einfach `open = false`: Der Infopunkt
geht seit dem 20.09.2026 SCHON BEI MOUSEOVER auf. Nach dem Klick steht der
Zeiger noch auf der Tafel — `:hover` und `:focus-within` halten sie also
sofort wieder offen, und das Zuklappen bleibt wirkungslos. `weggeklappt`
uebersteuert beide Zustaende (0,3,1 schlaegt 0,2,1) und wird vom Skript
erst entfernt, wenn der Zeiger die Tafel verlassen hat. Ohne Skript
aendert die Klasse nichts — die Tafel bleibt in jedem Fall bedienbar. */
.infopunkt.weggeklappt > .infotext,
.infopunkt.weggeklappt:hover > .infotext,
.infopunkt.weggeklappt:focus-within > .infotext { display: none; }
@media (max-width: 760px) {
/* Am Telefon haengt die Tafel nicht am Punkt, sondern nimmt die Seite:
eine 58-rem-Tafel neben einem 342-px-Fenster waere unlesbar.
BERICHTIGT AM 23.09.2026 — `position: static` war hier genau das Falsche,
und es erzeugte den groessten Einzelbefund des ganzen Auftritts:
`[gemessen ▸ Gestaltungs-Gate gegen dieweltklarsehen.de, Videoseite bei
390 px: die Abschrift-Tafel war 5140 px BREIT und ragte 4934 px aus dem
Fenster — das Dreizehnfache der Fensterbreite]`
DIE URSACHE IST EINE KETTE AUS ZWEI HARMLOSEN ZEILEN: `.infopunkt` ist
`display: inline-block`, schrumpft also auf seinen Inhalt. Solange die
Tafel `absolute` steht, ist sie AUS DEM FLUSS und zaehlt dabei nicht mit
— der Punkt bleibt 25 px schmal. `position: static` holt sie zurueck IN
den Fluss; ab da bestimmt der laengste unumbrochene Textzug die Breite
des Elternteils, und `width: 100%` misst sich dann an genau dieser
aufgeblaehten Breite. Ein Transkript mit 70 Abschnitten ergibt so eine
Tafel von fuenf Metern. Die Zeile war als Entspannung gemeint und wirkte
als Entfesselung.
DIE ABHILFE HAELT DEN LESERAUM UND NIMMT IHM DEN ANKER: `fixed` heftet
die Tafel ans Fenster statt an den Punkt — damit ist ihre Breite durch
`left` und `right` gesetzt und haengt an keinem Inhalt mehr. Der Rest
der Absicht von damals bleibt unveraendert: sie nimmt die Seite, hat
ihre eigene Bildlaufleiste und traegt keinen Schlagschatten. */
.abschrift-punkt > .infotext.abschrift-tafel {
position: fixed;
left: 0.6rem;
right: 0.6rem;
/* 05.10.2026: die gemessene Kante aus portal.js (lageSetzen) gilt auch
hier. Feste Werte `top: auto; bottom: 0.6rem` ueberstimmten sie, und
die Tafel stand 143 px unter ihrem Punkt (Gestaltungs-Gate, 390 px). */
top: var(--tafel-oben, auto);
bottom: var(--tafel-unten, 0.6rem);
width: auto;
max-width: none;
max-height: 72vh;
box-shadow: none;
z-index: 200;
}
}
/* ==================================================================
SCHRIFTFARBEN DES PORTALS AUF DAS DUNKLERE GOLD
(Uwe-Weisung 21.09.2026: "im Videoportal sollen die Schriftfarben von
dem recht hellen [Champagner] auf die etwas dunklere Goldfarbe
umgestellt werden", mit dem Datum der Videoseite als Farbmuster.)
Gemeint ist `--gold` #CBA25A -- genau der Ton, in dem das Datum hinter
der Titelzeile steht. Die hellen Toene `--champagner` #E3CC96 und
`--gold-hell` #E0C079 bleiben als HOVER-Farben erhalten: Waeren Ruhe
und Hover derselbe Ton, faellt die Rueckmeldung beim Zeigen weg.
Die 14 Einzelregeln weiter oben sind an Ort und Stelle umgestellt.
Dieser Block holt die Bausteine nach, die das Portal aus der
gemeinsamen style.css erbt -- Saeulen-Claims und Infopunkte. Er steht
hier und nicht in style.css, weil die Weisung das PORTAL nennt: die
Kopfleiste, die Rechtstexte und die Sitzrechner behalten ihren Kanon
(h3 Champagner, Uwe-Weisung vom selben Tag, 10:00).
Kontrast gemessen [Claude-Web-Kontrast.py]: #CBA25A auf dem
Seitengrund #07131C 7,91:1, auf dem Siegelblau #093550 5,41:1 --
beides ueber AA (4,5:1), das erste auch ueber AAA (7,0:1).
FRUEHERE AUSNAHME `mark`, AUFGEHOBEN AM 22.09.2026: Hier stand, die
Suchtreffer-Hervorhebung bleibe Champagner, weil Gold auf ihrer
goldlasierten Flaeche nur 4,52:1 erreicht. Das Argument galt der
LASUR. Uwes Weisung vom 22.09.2026 ("optisch stärker markiert ...
analog zu den Suchlistenergebnissen in der Prüftabelle") hat die
Lasur durch die volle Goldflaeche mit dunkler Schrift ersetzt; damit
ist der Kontrast kein Gegenargument mehr, sondern das Gegenteil
(9,71:1). Die Regel steht oben bei `.treffer-liste`.
================================================================== */
.saeule .claim,
.infopunkt .infotext .claim,
.infopunkt .infotext a,
.infopunkt > summary,
details.erklaerung > summary {
color: var(--gold);
}
/* Auch die Textlinks im Inhalt: sie erben aus der style.css das helle
Champagner. Gemessen auf der Themenuebersicht waren das 37 von 40
hellen Stellen -- haetten sie ihren Ton behalten, waere die Umstellung
dort unsichtbar geblieben. Der Hover zieht NICHT mit (style.css:
`a:hover` bleibt `--gold-hell`), damit das Zeigen weiter aufhellt.
Kachel- und Trefferlinks sind nicht betroffen: die setzen in ihren
eigenen Klassenregeln `color: inherit` und haben die hoehere
Spezifitaet. */
main a { color: var(--gold); }