/* ============================================================ Komponente: chip-leiste ------------------------------------------------------------ Quelle: Figma „Screens: App und Web" · Genre-Leiste auf der Kategorie-Seite 13791:14478 · Magazine Chips in „Magazine Entdecken" I13844:15571;11950:1884 ausgelesen am 09. und 11.09.2026. Eine waagerecht scrollende Reihe aus Chips, mit der man den Inhalt darunter einschränkt. Erster Chip ist immer „Alle" (chip.css). Einfachauswahl: genau einer ist aktiv, und der Zustand hängt an aria-pressed. Die Leiste ist BREITER ALS IHR CONTAINER und läuft rechts über den Rand — dieselbe Ansage wie bei den Cover-Reihen: „hier geht es weiter". In Figma sind es 2076 in einem 674 breiten Container. Setzt tokens.css, base.css und components/chip.css voraus. VERWENDUNG
…
Der Abstand NACH OBEN und NACH UNTEN kommt von dort, wo die Leiste liegt — diese Datei setzt ihn nicht. Sie rechnet nur ihr eigenes Polster wieder heraus (siehe unten), damit sie genau dort sitzt, wo sie ohne dieses Polster läge. ------------------------------------------------------------ ZWEI FALLEN, BEIDE SCHON GETRETEN ------------------------------------------------------------ 1. DER FOKUS-RING BRAUCHT LUFT, UND DIE LUFT DARF NICHTS VERSCHIEBEN. overflow-x: auto schneidet an ALLEN vier Kanten ab, auch oben, unten und links. Ohne Polster war der Ring des ersten Chips gekappt — zu sehen am aktiven „Alle" (Lisi, 09.09.2026: „der chip bei inhalte ist abgeschnitten"): rechts ein blauer Bogen, links eine gerade Kante. Das Polster schiebt die Schnittkante nach außen, der negative Außenabstand holt die Leiste an ihren Platz zurück. Die Luft muss für ZWEI Dinge reichen, nicht nur für den Ring: der aktive Chip trägt zusätzlich einen Glow mit Blur 4 (--glow-chip, §5). 4 Ring-Abstand + 2 Ring + 4 Glow = 10. Mit nur 6 war der aktive Chip oben sichtbar angeschnitten. 2. DIE CHIPS DÜRFEN NICHT SCHRUMPFEN. In einem scrollenden Flexkasten gibt ein Chip sonst Breite ab, sein Label bricht um, und die Leiste wird doppelt so hoch — statt zu scrollen. Gemessen: 99 px statt 45. ============================================================ */ .chip-leiste { --fokus-luft: calc(var(--focus-ring-offset) + var(--focus-ring-width) + var(--glow-blur-s)); /* 10 */ display: flex; align-items: center; gap: var(--space-xs); /* 8 (§7) */ overflow-x: auto; /* Fasst man die Leiste an, soll nicht die Seite mitscrollen. */ overscroll-behavior-x: contain; /* Bis an die Screenkante und darüber hinaus. Der Rand kommt vom Screen, genau wie bei .sektion__reihe. */ /* NACH BEIDEN SEITEN, NICHT NUR NACH RECHTS (15.09.2026, Lisi: „der horizontal scroll sollte wenn man scrollt bis ans ende gehen, nicht abgeschnitten. bis an an die kante"). Nur rechts zu überlaufen reicht nicht: beim Scrollen wurden die Kacheln schon am Screenrand-Abstand abgeschnitten, also 24 (bzw. mobil 20) VOR der Kante. Dazwischen blieb ein toter Streifen, in dem nichts mehr zu sehen war — im Rahmen laufen sie bis an die Kante heraus. Das Polster hält den ersten Eintrag trotzdem am Screenrand, solange nicht gescrollt ist. Sichtbar ändert sich also nur der ABGANG. */ margin-inline: calc(-1 * var(--sektion-rand, var(--space-lg))); padding-inline: var(--sektion-rand, var(--space-lg)); /* Luft für Ring und Glow oben und unten. Links und rechts stellt sich die Frage nicht mehr: dort läuft die Leiste über den Rand, und das Polster dorthin ist größer als die Luft, die der Ring braucht. Bis zum 15.09.2026 stand links ein eigenes Paar aus --fokus-luft; es ist im Screenrand aufgegangen. */ padding-block: var(--fokus-luft); margin-block: calc(-1 * var(--fokus-luft)); /* Kein Scrollbalken: in Figma ist keiner, und auf dem Tablet gibt es keinen. Über Rad und Trackpad bleibt das Scrollen möglich, und die Reihe läuft sichtbar über den Rand — das ist die Affordanz. */ scrollbar-width: none; } .chip-leiste::-webkit-scrollbar { display: none; } .chip-leiste > .chip { flex-shrink: 0; white-space: nowrap; } /* ============================================================ OFFEN ------------------------------------------------------------ · Wie bei .sektion__reihe: ob der versteckte Scrollbalken für Maus-Bedienung im Web reicht, ist offen. ============================================================ */