/** * agenic Komponenten-CSS – Tabs (Organismus) — Figma `tabs` (1665:24919), * `tabs-bar` (854:2856), `tab-item` (853:2836), gemessen 10.08.2026. * Theme light·dark × Size M·L; Status aktiv·default·hover·disabled = CSS-States. * Aktiv trägt Unterstreichung UND Schriftgewicht (Quelle: Farbe allein kein Träger). * Kontrakt: kontrakte-welle-b-10-08. */ .ag-tabs, .ag-tabs * { box-sizing: border-box; } .ag-tabs { --ag-tabs-fg: var(--color-text-standard); --ag-tabs-muted: var(--color-text-grey); --ag-tabs-border: var(--color-border); /* Figma Border */ --ag-tabs-disabled: var(--color-text-disabled); /* Figma Text/disabled */ --ag-tabs-space-before: 0px; --ag-tabs-space-after: 0px; display: flex; flex-direction: column; gap: var(--spacing-xxl); /* Leiste → Inhalt (tabs: 64) */ margin-block-start: var(--ag-tabs-space-before); margin-block-end: var(--ag-tabs-space-after); font-family: var(--font-sans); color: var(--ag-tabs-fg); letter-spacing: -0.02em; } .ag-tabs--dark { --ag-tabs-fg: var(--color-text-inverse-soft); --ag-tabs-muted: var(--color-text-grey-inverse); --ag-tabs-border: var(--color-border-inverse); } /* Leiste: die Fusion-Linie läuft über die VOLLE Breite und liegt im Ruhezustand schwach; der aktive bzw. fokussierte Reiter blendet nur seinen Abschnitt voll ein. (Feedback Vincent Punkt 17, 11.08.2026 — Abweichung von der Quelle, die eine einfarbige Border zeigt. Rückspielung nach 0.5 vorgesehen.) */ .ag-tabs__bar { position: relative; display: flex; flex-wrap: wrap; width: 100%; border-bottom: 0; } .ag-tabs__bar::after { content: ''; position: absolute; inset-inline: 0; bottom: 0; height: var(--border-width-xs); background: var(--gradient-fusion-basic); opacity: var(--ag-tabs-linie-ruhe, .25); pointer-events: none; } /* ── Die Reiter: Optik liegt seit 3.36.0 im Atom `tab-item` ────────────────── assets/css/tab-item.css ist die einzige Quelle für Polster, Schrift, Farben, Zustände, Linienabschnitt und Fokus. Hier stehen nur noch die Punkte, an denen DIESE Leiste bewusst von der Atom-Voreinstellung abweicht — als L3-Überschreibungen, nicht als zweite Ausschreibung derselben Regeln. (Entscheidung Vincent 19.08.2026, E2 — Doppelrollen-Regel.) Vier dokumentierte Abweichungen, alle Bestand und alle vor dieser Umstellung schon so: 1. Reiter füllen die Leiste (`flex: 1 1 0`) statt HUG — Startseiten-Messung 10.08.2026. Das ist eine Entscheidung der LEISTE, nicht des Reiters. 2. Polster links/rechts `ms` (12) statt der Atom-Werte 8/0. 3. Ruhefarbe grau statt `Text/standard` — die Quelle führt beide Zustände auf derselben Textfarbe, diese Leiste hebt den aktiven ab. 4. Fusion-Mechanik: die Linie ruht auf 0 und blendet ein, statt als einfarbige Border dazustehen (Feedback Vincent Punkt 17, 11.08.2026 — Abweichung von der Quelle, Rückspielung nach 0.5 vorgesehen). */ .ag-tabs .ag-tab-item { flex: 1 1 0; /* 1 */ --ag-tab-item-pad-inline-start: var(--spacing-ms); /* 2 */ --ag-tab-item-pad-inline-end: var(--spacing-ms); /* 2 */ --ag-tab-item-fg: var(--ag-tabs-muted); /* 3 */ --ag-tab-item-fg-aktiv: var(--ag-tabs-fg); --ag-tab-item-fg-disabled: var(--ag-tabs-disabled); --ag-tab-item-linie: var(--gradient-fusion-basic); /* 4 */ --ag-tab-item-linie-disabled: var(--gradient-fusion-basic); --ag-tab-item-linie-deckkraft: 0; --ag-tab-item-linie-deckkraft-hover: .6; --ag-tab-item-linie-deckkraft-aktiv: 1; --ag-tab-item-fokus-flaeche: var(--ag-tabs-fokus-flaeche, rgba(128, 128, 128, .08)); } /* Size L: das Atom bringt Schriftgröße und Zeilenhöhe selbst mit, die Leiste reicht die Achse nur durch. Fünfte dokumentierte Abweichung — und die einzige, die bei der Umstellung neu entstanden wäre: Die Quelle gibt Size L ein asymmetrisches Polster (oben 8, unten 12, Reiterhöhe 52). Diese Leiste läuft seit jeher symmetrisch mit 8/8 und damit 48 hoch. Der Regressionsvergleich vom 19.08.2026 hat den Unterschied gemessen: 48 → 52, padding-bottom 8 → 12, in beiden Themes. Das Aussehen von `ag_tabs` bleibt hier bewusst unverändert — die Angleichung an die Quelle ist eine eigene Entscheidung und kein Nebeneffekt dieser Umstellung (Finding F11). Size M ist unverändert, 36 von 36 Messwerten. */ .ag-tabs--l .ag-tab-item { --ag-tab-item-pad-block-end: var(--spacing-s); /* Bestand: 8 statt 12 — F11 */ --ag-tab-item-pad-inline-start: var(--spacing-ms); --ag-tab-item-pad-inline-end: var(--spacing-ms); } .ag-tabs__panel[hidden] { display: none; } /* ── Panel-Wechsel: weiches Erscheinen (Wunsch Vincent, 19.08.2026) ────────── Animiert wird ausschliesslich das ERSCHEINENDE Panel. Ein zusaetzliches Ausblenden des alten Panels ist bewusst NICHT gebaut: Beide Panels laegen waehrend der Ueberblendung gleichzeitig im Fluss, das Layout wuerde springen. Das alte Panel geht deshalb sofort auf `display: none`, das neue kommt aus `@starting-style` weich herein — Fade plus kleiner Versatz von unten, in Richtung der Leseordnung. Kein JS-Timing noetig: Das Panel wechselt von `display: none` auf sichtbar, und `@starting-style` liefert dafuer die Startwerte. tabs.js setzt nur die Klasse `is-wechsel` auf der Wurzel, sobald der Mensch zum ersten Mal umschaltet — ohne sie wuerde die Regel auch beim ersten Rendern der Seite greifen und mit der Reveal-Einblendung des ganzen Widgets kollidieren. Tokens: duration/l 550ms · distance/reveal 36 · Motion/easing-standard (Figma 0.7 · Animation). Wo `@starting-style` fehlt, erscheint das Panel wie bisher hart — kein Fehler, nur kein Weichzeichner (gleiches Muster wie accordion.css). Nachgeschaerft am 19.08.2026 (Rueckmeldung Vincent: „nicht deutlich genug und zu schnell"). Drei Stellschrauben, alle als L3-Variable ausgefuehrt, damit sich der Effekt ohne Eingriff in die Regeln nachziehen laesst: Dauer duration/s 350 -> duration/l 550 Distanz spacing/s 8 -> distance/reveal 36 (dasselbe Mass wie das Reveal des Widgets — der Wechsel liest sich dadurch als dieselbe Bewegungssprache) Groesse neu: der Inhalt startet auf 98 % und waechst auf 100 %. Das ist der Anteil, der den Effekt „deutlich" macht — ein reiner Versatz wirkt bei einer breiten Karte klein. Der Skalenfaktor ist ein Verhaeltnis, keine Laenge, und hat deshalb kein Token in der Leiter (Finding: Figma 0.7 fuehrt bislang keine Skalenwerte). */ .ag-tabs { --ag-tabs-panel-dauer: var(--motion-duration-l); --ag-tabs-panel-distanz: var(--motion-distance-reveal); --ag-tabs-panel-skala: .98; /* tmp — kein Figma-Token */ } @supports (transition-behavior: allow-discrete) { .ag-tabs.is-wechsel .ag-tabs__panel { transition: opacity var(--ag-tabs-panel-dauer) var(--motion-ease-standard), transform var(--ag-tabs-panel-dauer) var(--motion-ease-standard); transform-origin: 50% 0; } @starting-style { .ag-tabs.is-wechsel .ag-tabs__panel:not([hidden]) { opacity: 0; transform: translateY(var(--ag-tabs-panel-distanz)) scale(var(--ag-tabs-panel-skala)); } } } @media (prefers-reduced-motion: reduce) { .ag-tabs.is-wechsel .ag-tabs__panel { transition: none; } } /* Einblendung */ html.ag-anim-ready .ag-tabs[data-ag-anim="reveal"] { transition: opacity var(--motion-reveal) var(--motion-ease-standard), transform var(--motion-reveal) var(--motion-ease-standard); } html.ag-anim-ready .ag-tabs[data-ag-anim="reveal"]:not(.is-inview) { opacity: 0; transform: translateY(var(--motion-distance-reveal)); } @media (prefers-reduced-motion: reduce) { html.ag-anim-ready .ag-tabs[data-ag-anim="reveal"], html.ag-anim-ready .ag-tabs[data-ag-anim="reveal"]:not(.is-inview) { transition: none; transform: none; opacity: 1; } } /* ── Innenabstand steuerbar (3.88.0) ───────────────────────────────────── Entscheidung Vincent, 24.08.2026: Der Innenabstand soll bei jedem Widget am Control liegen, nicht nur der Außenabstand. Dieses Widget führt im Design kein Blockpolster — die Vorgabe ist deshalb 0, und die Regel wird erst wirksam, wenn jemand am Control etwas wählt. Steht bewusst am Dateiende: gleiche Spezifität wie die Regeln oben, die spätere gewinnt. Nur oben und unten; seitlich begrenzt die Content-Breite. */ .ag-tabs { padding-block: var(--ag-tabs-pad-oben, 0px) var(--ag-tabs-pad-unten, 0px); } /* ── Mobil: eine Zeile zum Wischen statt Umbruch (25.09.2026) ──────────── Auftrag Vincent, 25.09.2026 (SS2): „Tabs scrollbare Leiste, kein Umbruch". Bis hier brach die Leiste unter 768 in zwei Zeilen um, und die Reiter der zweiten Zeile verteilten sich über die Breite (`flex: 1 1 0`). Jetzt: eine Zeile, die Reiter so breit wie ihre Beschriftung, die Leiste scrollt seitlich. Die Kanten laufen weich aus wie in der schwebenden Leiste (ag_tabs_bar_pill, Stil e) — nur dort, wo wirklich Reiter verborgen sind; die Klassen hat-fade-links/-rechts setzt tabs.js. Die Ruhelinie (`__bar::after`) darf nicht mitscrollen: Sie hängt deshalb mobil nicht an der Leiste (die wird `static`), sondern an der Wurzel. Ohne top/bottom bleibt sie an ihrer statischen Stelle — per align-self am Fuß der Leiste — und läuft über die volle Breite, egal wie weit gescrollt ist. Gemessen in Chromium, 390 px, scrollLeft 300: Linie 16 → 374, fest. */ @media (max-width: 767px) { .ag-tabs { position: relative; --ag-tabs-anschnitt: var(--spacing-3xl); /* 96, wie --ag-tabs-bar-pill-anschnitt */ } .ag-tabs__bar { position: static; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; --ag-tabs-fade-links: 0px; --ag-tabs-fade-rechts: 0px; -webkit-mask-image: linear-gradient(90deg, transparent 0, black var(--ag-tabs-fade-links), black calc(100% - var(--ag-tabs-fade-rechts)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, black var(--ag-tabs-fade-links), black calc(100% - var(--ag-tabs-fade-rechts)), transparent 100%); } .ag-tabs__bar::-webkit-scrollbar { display: none; } .ag-tabs__bar.hat-fade-links { --ag-tabs-fade-links: var(--ag-tabs-anschnitt); } .ag-tabs__bar.hat-fade-rechts { --ag-tabs-fade-rechts: var(--ag-tabs-anschnitt); } .ag-tabs__bar::after { top: auto; bottom: auto; align-self: flex-end; } .ag-tabs .ag-tab-item { flex: 0 0 auto; } }