/* ============================================================ Komponente: hero-slider ------------------------------------------------------------ Quelle: Figma „Screens: App und Web" → Entdecken Slider mit marke, node 13844:15471, ausgelesen am 04.09.2026. Die Content-Karte mit Bild aus SKILL.md §9, als Slideshow: Bild, zwei Verläufe darüber, Marken-Pill oben links, Titel unten links, Pagination-Dots unten rechts. DREI SLIDES, NICHT NEUN. In der Figma-Komponente hängt eine Notiz mit den Matomo-Zahlen: von 70 Visits mit sichtbarem Slider haben 8 geklickt (11 %), nachweisbar gewischt haben 2 (3 %), und 13 der 14 Klicks liegen auf den Positionen 1–3. Bei 5,5 s Rotation und 26,5 s medianer Sichtdauer werden die Slides 6–9 in den meisten Sessions nie gezeigt. Drei Slides sind damit gedeckt — ob der Slider überhaupt bleibt, ist es nicht: dafür fehlt ein Vergleich gegen statische Teaser. ZWEI VERLÄUFE ÜBEREINANDER, so gemessen: 1. über dem ganzen Bild transparent → Schwarz 50 % 2. hinter dem Inhalt transparent → Schwarz 90 %, Blur 3 Der zweite ist der, der die Schrift trägt. §9 nennt nur den ersten („Ebenendeckkraft 50 %") — der zweite ist neu und gehört dort ergänzt. Setzt tokens.css und base.css voraus. ------------------------------------------------------------ GEMESSENE MASSE OHNE TOKEN-GRUNDLAGE 674 x 253 Kartenmaß auf Entdecken, Tablet. 331 x 218 Kartenmaß der beiden kleinen darunter, Tablet, 12 Abstand dazwischen. 353 x 218 Dieselbe Karte MOBIL (Design System, „Entdecken Slider mit marke", 11272:1739). Sie ist dort nicht flacher, sondern höher im Verhältnis: 1,62 gegen 2,66 auf dem Tablet. 170,5 x 218 Die beiden kleinen mobil — 353 minus 12 Abstand, halbiert (Variante „2 colums"). 66,7 x 24 Marken-Pill, feste Breite. 3 Blur hinter dem Inhalt. ============================================================ */ .hero-slider { position: relative; width: 100%; aspect-ratio: 674 / 253; /* gemessen, siehe Kopf */ border-radius: var(--radius-md); overflow: hidden; /* 1 px label-outline wie jede Fläche. Als inset box-shadow und nicht als border — der border würde das Bild beschneiden. */ box-shadow: inset 0 0 0 var(--outline-default) var(--label-outline); } .hero-slider__slide { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; /* Nur der aktive Slide ist sichtbar UND bedienbar. */ opacity: 0; pointer-events: none; } .hero-slider__slide[aria-current="true"] { opacity: 1; pointer-events: auto; } .hero-slider__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* DER AUSSCHNITT IST GEMESSEN, NICHT GESCHÄTZT. ------------------------------------------------------------ Figma skaliert das Bild in der großen Karte auf 250,75 % der Kartenhöhe und setzt es bei −33,08 % an (13844:15471). Sichtbar ist damit das Band von 13,2 % bis 53,1 % des Bildes. `cover` zeigt hier 38 % der Bildhöhe. Mit `object-position: center P` liegt das Band bei [P · 0,62 ; P · 0,62 + 0,38] — für P = 21 % ergibt das 13,0 % bis 51,0 % und trifft Figma. Vorher stand hier `top`, also das Band 0–38 %: zu viel Fassade über dem Kopf, zu wenig von der Person. Lisi, 05.09.2026: „das sieht noch nicht richtig aus wie in Figma." */ object-position: center 21%; } /* AUSSER IN DEN KLEINEN KARTEN. Die sind mit 331 x 218 fast quadratisch, die Bilder hochformatig (0,56 : 1) — oben ausgerichtet sieht man nur Himmel, und das Motiv liegt darunter. Figma schneidet dort ebenfalls aus der Mitte (13844:15472: das Bild ist 279 % hoch und sitzt bei −90 %, sichtbar ist also das mittlere Drittel). Lisi, 04.09.2026: „man sieht nur einen kleinen Ausschnitt". */ .hero-slider--einzeln .hero-slider__bild { object-position: center; } /* Verlauf 1: über dem ganzen Bild, transparent auf 50 %. Die Deckkraft steht am Element, nicht in der Farbe (AGENTS.md §15). SCHWARZ, NICHT surface-primary — in BEIDEN Modes (korrigiert 09.09.2026, Lisi: „im light mode ist der gradient im hero weiß, der ist aber schwarz egal ob light oder dark mode"). Hier stand surface-primary, und das kippt in Light auf #ECEFF1: der Schleier wurde hell, und der weiße Titel darauf war nicht mehr zu lesen. In Figma stehen an den Stopps 121A2D und Colors/Black — Primitive, die den Mode nicht mitmachen. Das muss auch so sein: der Schleier trägt die Lesbarkeit weißer Schrift auf einem Foto (§18), und ein heller Schleier kann das nicht. `transparent` als erster Stopp ist hier kein anderer Wert, sondern derselbe: CSS mischt Verläufe mit vormultiplizierter Deckkraft, eine durchsichtige Farbe bringt also keine eigene mit. Ein grauer Saum entsteht nicht. */ .hero-slider__schleier { position: absolute; inset: 0; opacity: 0.5; background-image: linear-gradient( to bottom, transparent, var(--black) ); pointer-events: none; } /* Verlauf 2: hinter dem Inhalt, transparent auf 90 %, mit Blur. Er trägt die Lesbarkeit des Titels — §18 sagt dazu, dass ein transparenter Fill die Lesbarkeit allein nicht tragen kann. */ /* DER INHALT IST SO HOCH WIE DIE KARTE, nicht so hoch wie sein Text. Nur dann kann `space-between` an den Texten die Marken-Pill nach ganz OBEN und den Titel nach ganz UNTEN schieben — so steht es in Figma, wo der Container ausdrücklich `h-[218px]`, also volle Kartenhöhe, trägt. Vorher saß der Inhalt nur unten und war so hoch wie Pill + 48 + Titel: die Pill hing dadurch mitten in der Karte statt an ihrer Oberkante. Aufgefallen am 04.09.2026. Der zweite Verlauf läuft damit über die ganze Karte statt nur über das untere Drittel — auch das ist in Figma so. */ .hero-slider__inhalt { position: relative; flex: 1; display: flex; align-items: flex-end; gap: var(--space-2xl); /* 48 */ padding: var(--space-md); /* 16 */ opacity: 0.999; /* eigener Stapelkontext */ } .hero-slider__inhalt::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0.9; /* Schwarz in beiden Modes, wie Verlauf 1 — Begründung dort. In Figma am Inhalts-Container abgelesen: Stopps 121A2D bei 0 % und Colors/Black, Deckkraft der Füllung 90 %. */ background-image: linear-gradient( to bottom, transparent, var(--black) ); backdrop-filter: blur(3px); /* gemessen, siehe Kopf */ } .hero-slider__texte { display: flex; flex-direction: column; justify-content: space-between; /* Der gap ist eine UNTERGRENZE, kein Abstand: mit voller Höhe verteilt space-between den Rest. Er greift nur noch, wenn die Karte einmal sehr flach wird. */ gap: var(--space-2xl); flex: 1 0 0; min-width: 0; align-self: stretch; } /* Die Marken-Pill. §9 nennt sie „eigene Komponente, noch nicht spezifiziert" — hier aus der Instanz gemessen: 1 px Rand in label-text-active (weiß), Radius voll, das Verlagslogo als Bild darin. Die Hintergrundfarbe kommt vom Logo selbst, nicht aus einem Token: sie ist Teil der Marke. */ /* Die Pille hat eine FESTE Breite, das Logo wird eingepasst. In Figma ist sie 66,667 x 24 und das Logo liegt als object-contain darin — nicht umgekehrt. Ohne die feste Breite bestimmt jedes Verlagslogo mit seinem eigenen Seitenverhältnis die Pillengröße, und die Reihe wackelt von Slide zu Slide. Gemessen: mit „auto" war sie 46 statt 67 breit. */ .hero-slider__marke { align-self: flex-start; width: 66.7px; /* gemessen, siehe Kopf */ height: 24px; border-radius: var(--radius-full); border: var(--outline-default) solid var(--label-text-active); overflow: hidden; /* DIE PILLE IST GEFÜLLT, NICHT NUR UMRANDET. In Figma liegt unter dem Verlagslogo eine Fläche (11422:5241). Ohne sie scheint das Foto durch die freigestellten Stellen des Logos. DER GRUND IST DER DES LOGOS, nicht immer weiß. „Gala" steht auf Rot, „stern" und „WELT" auf Weiß — eine weiße Pille um ein rotes Logo sähe aus wie ein Fehler. Die Farbe kommt je Instanz über --marke-grund aus dem Markup; sie gehört zur Marke und nicht ins System, deshalb steht sie dort bei der Bilddatei. Weiß ist der Rückfall. Weiß als --white und nicht --label-text: die Pille dreht NICHT mit dem Mode, weil die Logos für hellen Grund gemacht sind. Lisi, 04.09.2026. DIE 5 PX SEITLICH halten das Logo von den runden Enden weg. Ohne sie schneidet der Radius in die Wortmarke — bei „WELT" gut zu sehen, dessen Logo mit 3,8 : 1 breiter ist als die Pille mit 2,78 : 1. Der Wert kommt aus Figma: dort ist das WELT-Logo 84,89 % breit und beginnt bei 7,55 %, das sind 5,03 von 66,7. */ background-color: var(--marke-grund, var(--white)); padding-inline: 5px; } .hero-slider__marke img { width: 100%; height: 100%; display: block; object-fit: contain; } /* Titel: H2 Outfit Bold in Weiß, mit einem weichen Schatten gegen unruhige Bildstellen (§18: das Icon trägt, hier trägt die Schrift und der Schatten verstärkt). */ .hero-slider__titel { font-family: var(--font-family-display); font-size: var(--font-size-h2); line-height: var(--line-height-h2); font-weight: var(--font-weight-bold); color: var(--white); text-shadow: 0 0 6px var(--transparent-black-15); } /* ------------------------------------------------------------ EINZELN: dieselbe Karte, aber ohne Slideshow ------------------------------------------------------------ Quelle: Figma „Screens: App und Web" → Entdecken, node 13844:15472, ausgelesen am 04.09.2026. Unter dem großen Slider stehen zwei kleinere Karten nebeneinander, je 331 x 218 mit 12 Abstand. In Figma ist das dieselbe Komponente „Entdecken Slider mit marke" — nur mit zwei Kindern statt einem und ohne Punkte. Deshalb hier ein Modifier und keine zweite Datei. Zwei Unterschiede zur großen Karte: · Der Titel ist H3 (19), nicht H2 (23). · Es gibt nichts zu blättern, also keine Punkte und keine Slideshow-Auszeichnung — die Karte ist ein Ziel, kein Karussell. ------------------------------------------------------------ */ .hero-slider--einzeln { aspect-ratio: 331 / 218; /* gemessen, siehe Kopf */ } /* Ohne Slideshow gibt es keinen inaktiven Zustand. Die Fläche ist immer sichtbar und immer bedienbar. */ .hero-slider--einzeln .hero-slider__slide { opacity: 1; pointer-events: auto; } .hero-slider--einzeln .hero-slider__titel { font-size: var(--font-size-h3); line-height: var(--line-height-h3); } /* ------------------------------------------------------------ Pagination-Dots ------------------------------------------------------------ Liegen seit dem 05.09.2026 in components/pagination.css — §9 nennt sie als eigenständige Komponente, und mit dem Intro gibt es die zweite Verwendung. Der Slider nutzt sie mit `.pagination__punkt` als Knopf; hier bleibt nur, was mit der Karte zu tun hat. ------------------------------------------------------------ */ /* Die Klickfläche der Punkte wächst über .touch-target — 7 px sind weit unter der Untergrenze (§11.2). Die 24 x 24 aus WCAG 2.5.8 gelten laut §19.7 nur für Symbole im Fluss; ein Punkt, der einen Slide wechselt, ist ein Bedienelement. Form, Farbe und Übergang stehen in pagination.css. */ /* Der Slidewechsel selbst blendet über — keine Ortsveränderung. §23.1 lässt transform und opacity zu; ein Schieben wäre auch möglich, aber die Karte gehört zu keinem Auslöser, aus dem sie kommen könnte (dieselbe Begründung wie beim Dialog). */ .hero-slider__slide { transition: opacity calc(var(--motion-dialog) * var(--motion-scale)) var(--motion-ease-out); } @media (prefers-reduced-motion: reduce) { .hero-slider__slide { transition: none; } } /* ============================================================ OFFEN ------------------------------------------------------------ · Die Marken-Pill ist laut §9 noch nicht spezifiziert. · Der zweite Verlauf (90 %, Blur 3) fehlt in §9. · Ob der Slider im SOLL bleibt, ist offen — siehe Kopf. · Der Slider wechselt hier nur auf Klick, nicht automatisch: eine Auto-Rotation, die 5,5 s stehen bleibt, ist im Review mehr Störung als Auskunft, und §23.3 nennt Bewegung, die hundertfach am Tag passiert, ausdrücklich als Fall gegen Animation. ============================================================ */ /* ------------------------------------------------------------ Mobil ------------------------------------------------------------ Das Seitenverhältnis ist ein anderes, nicht nur eine kleinere Fassung desselben: mobil ist die Karte 353 x 218 (1,62), auf dem Tablet 674 x 253 (2,66). Ohne diese Regel lief die Tablet-Proportion in ein 353 breites Feld und die Karte war nur 133 hoch — der Titel stand dann über dem Bildrand (Lisi, 08.09.2026). ------------------------------------------------------------ */ /* ------------------------------------------------------------ DIE HOEHE STEHT, DIE BREITE FUELLT (mobil, entschieden am 09.09.2026) Vorher stand hier ein Seitenverhaeltnis. Ein Verhaeltnis rechnet die Hoehe aus der Breite — und weil die Mobile-Fassung keine Obergrenze fuer die Breite hat, wuchs die Karte mit dem Fenster mit: bei 736 px (das ist ein Telefon im Querformat, iPhone Plus) war der Hero 435 hoch. Von 414 px Bildschirmhoehe blieb nichts uebrig, der Titel lag unter der Bottom Nav und die beiden kleinen Karten waren gar nicht zu sehen. Die kleinen Karten selbst wurden dort 442 hoch. Jetzt gilt im ganzen Mobile-Breakpoint die Hoehe aus Figma und nur die Breite fuellt. Nebeneffekt: die Karte trifft Figma jetzt auf jeder Breite genau — mit dem Verhaeltnis war sie bei 393 px 222,9 hoch statt 218, weil unser Padding 16 ist und das Figma-Frame mit 20 gerechnet war. Das Verhaeltnis 674 / 253 ab 768 bleibt unberuehrt — dort ist dieselbe Frage offen, aber die Zahlen muessen aus Figma kommen (siehe skill-changelog.md, 09.09.2026). ------------------------------------------------------------ */ @media (max-width: 767px) { .hero-slider { aspect-ratio: auto; height: 218px; /* Figma: 353 x 218 */ } .hero-slider--einzeln { aspect-ratio: auto; height: 218px; /* Figma: 170,5 x 218 */ } } /* Dasselbe im Tablet-Breakpoint, mit den Tablet-Hoehen aus Figma (674 x 253 und 331 x 218). Ohne diese Regel war der Hero bei 834 px 301 hoch und bei 1199 px 438 — die Breite ist dort so frei wie mobil. AB 1200 STEHT DIE HOEHE NOCH NICHT. Dort gilt weiter das Verhaeltnis, weil es fuer Desktop keine gemessene Kartenhoehe gibt. Offen, siehe skill-changelog.md 09.09.2026. */ @media (min-width: 768px) and (max-width: 1199px) { .hero-slider { aspect-ratio: auto; height: 253px; /* Figma: 674 x 253 */ } .hero-slider--einzeln { aspect-ratio: auto; height: 218px; /* Figma: 331 x 218 */ } }