/* ============================================================
Komponente: topbar (feste Leiste oben, mobil)
------------------------------------------------------------
Quelle: Figma „Top Navigation with Logo", 12945:33855,
393 x 69, und examples/scroll-verhalten-alle-screens.html —
dort steht das Scroll-Verhalten im Klartext, mit Demo.
Angelegt am 09.09.2026.
Setzt tokens.css, base.css, wortmarke.css und icon-button.css
voraus. Die Trennlinie hat einen eigenen kurzen Übergang
(120 ms linear, aus der Demo) — das ist der einzige Fall in
dieser Datei und steht deshalb hier statt in motion.css.
SIE STEHT MOBIL, NICHT AUF DEM TABLET. Auf dem Tablet trägt
der Navigationsstreifen links das Logo. Wo die Leiste liegt
und ob sie mitscrollt, entscheidet der Screen — die Komponente
sagt nur, wie sie aussieht und wie sie auf das Scrollen
reagiert.
VERWENDUNG
…
============================================================
DIE REGEL (aus der Demo, wörtlich)
------------------------------------------------------------
„Das große Suchfeld scrollt weg, ein Such-Icon blendet in
der festen Zeile ein. Nichts animiert seine Höhe, deshalb
springt nichts."
„Das Logo weicht nicht dem Scrollen, sondern der Aktion."
Das Logo bleibt also stehen. Es weicht nur, wenn etwas Neues
in die Zeile kommt und der Platz sonst nicht reicht — in der
Demo ist das der Zugangs-Button auf „Entdecken · Ziel B", also
ohne aktiven Zugang.
HAT EIN SCREEN KEIN GROSSES FELD, ändert sich nichts: das Icon
steht dann von Anfang an in der Zeile. Das ist keine Ausnahme,
sondern dieselbe Regel mit anderem Ergebnis — es ist nichts
da, was kollabieren könnte. So ist es auf Vor Ort und auf
Meine Titel.
------------------------------------------------------------
ZWEI WERTE KOMMEN VON AUSSEN
------------------------------------------------------------
· --such-icon-p 0 → 1, der Fortschritt des Übergangs.
Vorgabewert 0: ohne JS steht kein Icon da.
· data-scrolled "true", sobald der Scrollbereich mehr als
2 px weit gescrollt ist.
Beides ist Messung, keine Gestaltung, und gehört deshalb ins
JS des Screens.
------------------------------------------------------------
WORAN ES ZWEIMAL GESCHEITERT IST
------------------------------------------------------------
1. AM FALSCHEN SCROLLBEREICH. Gemessen werden muss der
Bereich, der WIRKLICH scrollt. Auf den meisten Screens ist
das die Seite (window.scrollY); liegt aber eine Fläche mit
eigenem overflow darüber — mobil etwa das Inhalte-Panel —,
dann ist es deren scrollTop. Wer immer die Seite fragt,
bekommt dort für immer 0: die Linie erscheint nie, und das
Icon bleibt stehen, wo es zuletzt stand. Genau das war am
09.09.2026 auf „Inhalte" zu sehen.
Die Demo macht es richtig: `sc.scrollTop`, wobei `sc` der
jeweilige Rahmen ist — nicht das Fenster.
2. AM ZEITPUNKT. Der Fortschritt muss auch dann neu gerechnet
werden, wenn sich der Screen ändert, ohne dass jemand
scrollt: beim Tabwechsel, beim Öffnen und Schließen einer
Fläche mit eigenem Feld. Sonst zeigt die Leiste den Stand
des vorigen Screens.
------------------------------------------------------------
GEMESSENE MASSE OHNE TOKEN-GRUNDLAGE
79 x 45 Wortmarke.
45 x 45 Ikon-Button (icon-button.css).
1 px Trennlinie, gray-800, randlos über die Breite.
120 ms ihr Einblenden, linear (aus der Demo).
0,85 → 1 Skalierung des Such-Icons.
p > 0,6 ab hier ist das Icon bedienbar.
============================================================ */
/* POLSTER 16 / 20 / 12, KEINE FESTE HÖHE. Die Demo setzt an der
festen Zeile `padding: var(--space-md) var(--layout-screen-margin)
var(--space-sm)`. Mit der 45er Reihe darin ergibt das 73 —
nicht die 69 aus dem Figma-Rahmen, der unten kein Polster
führt. Lisi hat am 09.09.2026 die Demo entschieden („mehr
padding nach unten. mach es genau so wie in dem
scroll-verhalten-alle-screens.html").
Die Höhe kommt damit aus dem Inhalt und steht an keiner
zweiten Stelle. Wer sie braucht, misst sie. */
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
/* Für die Trennlinie. Ein Screen, der die Leiste fixiert,
überschreibt das — fixed trägt denselben Bezug. */
position: relative;
padding: var(--space-md) var(--layout-screen-margin) var(--space-sm);
background-color: var(--surface-primary);
}
/* Die Wortmarke rechnet sonst aus dem Seitenverhältnis; hier
stehen beide Maße, weil beide gemessen sind. */
.topbar .wortmarke {
width: 79px;
height: 45px;
aspect-ratio: auto;
}
.topbar__aktionen {
display: flex;
align-items: center;
gap: var(--space-xs); /* 8 */
}
/* ------------------------------------------------------------
Die Trennlinie
------------------------------------------------------------
Sie hängt an der Scroll-POSITION, nicht an der Scrollbarkeit —
steht der Inhalt still, gibt es nichts zu trennen (§26). Keine
Richtung, keine Hysterese: sonst blinkt sie beim Zurückwischen.
KEINE LINIE, WO CHIPS FOLGEN. Die Demo nimmt sie dort heraus
(`scrollTop > 2 && !cfg.chips`): unter der Zeile klebt dann die
Chip-Leiste, und die trägt die Kante selbst. Zwei Kanten
übereinander wären eine zu viel. Entschieden wird das im JS,
das data-scrolled setzt — hier ist kein Ort dafür.
------------------------------------------------------------ */
.topbar::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background-color: var(--gray-800);
opacity: 0;
transition: opacity 120ms linear;
}
.topbar[data-scrolled="true"]::after {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.topbar::after {
transition: none;
}
}
/* ------------------------------------------------------------
Das Such-Icon, das einblendet
------------------------------------------------------------
Nur Deckkraft und Größe ändern sich, nie die Höhe — deshalb
springt nichts, und die Zeile bleibt in jeder Position gleich
hoch.
DIE SKALIERUNG SITZT AM ZEICHEN, NICHT AM KNOPF. Am Knopf
selbst greift kein transform — auch ein inline gesetztes
nicht. Woran das in .ikon-button hängt, ist nicht gefunden
(offen, siehe unten). Am