/* rewind-card.css – Rewind-Karte der Hero-Stage (Layout "V1-Editorial")
Gehoert zu js/rewind-card.js. GETEILT von index.html und admin/buehne.php –
bitte nichts davon nach css/style.css kopieren, sonst laufen Startseite und
Admin-Vorschau auseinander. Regelwerk: _docs/Hero-Stage-Regeln.md
MASSE: Die Vorlage (social-card/formats.jsx, GEO.square) ist auf einer
Flaeche von 1080x1080 px entworfen. Jeder Wert hier ist derselbe Wert der
Vorlage, umgerechnet mit cqw = px / 1080 * 100 – deshalb sitzt die Karte
auf jeder Breite pixelgenau wie im Entwurf. Wer sie aendert, aendert zuerst
die Vorlage und rechnet dann um; es gibt bewusst keine zweite Zahlenliste.
Die Karte ist SELBSTTRAGEND: sie bringt ihr eigenes Quadrat (aspect-ratio)
und ihren eigenen Query-Container mit. Sie braucht also nichts vom Gastgeber
ausser einer Breite – auf der Startseite ersetzt sie das im .hero-image
und gibt ihm dieselbe Hoehe, im Admin genuegt ein beliebiger Block.
Browser ohne Container-Queries (vor Chrome 105 / Safari 16 / Firefox 110)
bekommen die Karte gar nicht erst: js/app.js prueft die Unterstuetzung und
zeigt dort das normale Sendungsbild. Lieber schlicht als zerlegt – deshalb
steht hier auch kein px-Fallback herum.
KEINE MINDESTGROESSEN. Alles skaliert rein proportional, es gibt bewusst
keinen `max(10px, …)`-Boden und keine Breakpoints. Ein Boden wuerde genau
das kaputtmachen, was er schuetzen soll: Die Schrift bliebe stehen, waehrend
Balken und Abstaende weiterschrumpfen – ab etwa 250px Kartenbreite laeuft
das Fussleisten-Label dann aus dem Balken. Proportional kann das nie
passieren, weil jedes Verhaeltnis erhalten bleibt.
Der Preis: unterhalb von ~300px wird das Fussleisten-Label klein (bei 288px
rund 8.5px). Das ist vertretbar, weil dieselbe Angabe direkt ueber der Karte
im Eyebrow steht. Wer die Karte irgendwo einbaut, sorgt deshalb fuer
mindestens ~300px Breite – siehe .rw-preview unten. */
.hero-rewind {
/* Farben lokal, damit die Karte auch ohne css/style.css stimmt (Admin) */
--rw-navy: #1e2a3a;
--rw-blue: #528BC5;
--rw-paper: #F2F2F2;
/* Eigenes Quadrat + eigener Bezugsrahmen fuer alle cqw-Werte darin */
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
container-type: inline-size;
overflow: hidden;
border-radius: 12px;
background: var(--rw-paper);
font-family: 'Roboto', system-ui, -apple-system, sans-serif;
/* Auf Mobil liegt der ganzflaechige Play-Button ueber dem Bild. Ohne das
hier schluckt die Karte jeden Tap darauf. */
pointer-events: none;
}
/* Riesige, blasse Folgennummer oben links */
.rw-ghost {
position: absolute;
top: -7.78cqw;
left: -5.19cqw;
font-size: 64.44cqw;
font-weight: 900;
line-height: 1;
letter-spacing: -0.04em;
color: var(--rw-blue);
opacity: 0.06;
font-variant-numeric: tabular-nums;
}
/* Headline oben links: Zeile 1 navy, Zeile 2 blau */
.rw-head {
position: absolute;
top: 6.48cqw;
left: 5.74cqw;
right: 5.74cqw;
display: flex;
flex-direction: column;
}
.rw-l1,
.rw-l2 {
font-weight: 900;
letter-spacing: 0;
white-space: pre-line;
}
.rw-l1 { font-size: 11.11cqw; color: var(--rw-navy); }
.rw-l2 { font-size: 11.11cqw; color: var(--rw-blue); margin-top: 0.1em; }
/* Gegner-Reloaded: kurze Kopfzeile, darunter die Partie deutlich kleiner */
.hero-rewind--a .rw-l1 { line-height: 1; }
.hero-rewind--a .rw-l2 { font-size: 4.63cqw; line-height: 1.14; }
/* Jubilaeum: beide Zeilen gross und eng */
.hero-rewind--b .rw-l1 { line-height: 0.92; }
.hero-rewind--b .rw-l2 { line-height: 0.92; }
/* Ball + Kicker-Badge + Info-Block als eine Einheit, rechts oben */
.rw-stat {
position: absolute;
top: 33.33cqw;
right: 5.93cqw;
display: flex;
align-items: flex-start;
gap: 1.48cqw;
text-align: right;
}
.rw-ball {
/* Vorlage: marginTop = (badgeH 64 - ball 120) / 2 = -28 */
margin-top: -2.59cqw;
height: 11.11cqw;
width: auto;
display: block;
flex: 0 0 auto;
}
.rw-stat-right { text-align: right; }
.rw-badge {
display: inline-block;
background: var(--rw-navy);
color: #fff;
padding: 0.93cqw 1.85cqw;
font-size: 3.70cqw;
font-weight: 800;
letter-spacing: 0.24em;
text-transform: uppercase;
white-space: nowrap;
}
.rw-block {
margin-top: 0.18em;
padding-right: 1.85cqw;
display: flex;
flex-direction: column;
}
/* Gegner-Reloaded: grosses Ergebnis + Datum */
.rw-value {
font-size: 11.85cqw;
font-weight: 900;
color: var(--rw-navy);
line-height: 0.86;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.rw-sub {
font-size: 3.70cqw;
font-weight: 700;
color: var(--rw-navy);
letter-spacing: 0.06em;
margin-top: 0.4em;
}
/* Jubilaeum: Kurztitel blau, darunter die Partie navy */
.rw-stat-title {
font-size: 3.70cqw;
font-weight: 700;
color: var(--rw-blue);
line-height: 1.2;
letter-spacing: 0.04em;
white-space: pre-line;
}
.rw-stat-lines {
font-size: 3.70cqw;
font-weight: 700;
color: var(--rw-navy);
line-height: 1.2;
letter-spacing: 0.04em;
margin-top: 0.22em;
white-space: pre-line;
}
/* Foto, angeschnitten und gekippt. Der Ueberstand nach links wird vom
overflow:hidden des Containers abgeschnitten – genau wie im Entwurf. */
.rw-photo {
position: absolute;
bottom: 11.85cqw;
left: -4.44cqw;
width: 59.07cqw;
height: 29.81cqw;
transform: rotate(-6deg);
filter: drop-shadow(0 2.78cqw 4.63cqw rgba(30, 42, 58, 0.30));
}
/* Jubilaeum schiebt das Foto weiter nach links (photoDxSquare -128) */
.hero-rewind--b .rw-photo { left: -16.30cqw; }
.rw-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: grayscale(1) contrast(1.05);
border: 0.74cqw solid #fff;
box-sizing: border-box;
}
/* Navy-Fussbalken mit Folgen-Label und Titel */
.rw-bar {
position: absolute;
left: 0;
right: 0;
bottom: 0;
background: var(--rw-navy);
padding: 2.41cqw 5.93cqw 2.78cqw;
display: flex;
flex-direction: column;
}
.rw-bar-label {
color: rgba(255, 255, 255, 0.8);
font-size: 2.96cqw;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
margin-bottom: 0.93cqw;
}
.rw-bar-title {
color: #fff;
font-size: 4.63cqw;
font-weight: 900;
line-height: 1;
letter-spacing: -0.01em;
}
/* --- Vorschaukasten im Admin ---------------------------------------------
Die Karte bringt Quadrat und Container selbst mit; hier geht es nur um die
Breite. Die Vorschau steht auf einer EIGENEN ZEILE unter der Auswahlzeile,
nicht in der Textspalte daneben: dort blieben auf einem 360px-Handy nur rund
220px uebrig (Checkbox + Thumb + Abstaende gehen ab), und darunter wird die
Fussleiste unleserlich. Volle Zeile heisst ~330px – das reicht.
Es bleibt ein