→ statischer Platzhalter, wird gefüllt
window.a4hSpinnerAlias(sel) → zieht eine Alt-Klasse optisch auf dieselbe
Form, ohne ihr Markup anzufassen
Nie einen eigenen Kreis aus `border` + `border-top-color` bauen — das ergibt
eine andere Form (harte Kante statt runder Bogen) und driftet in Tempo und
Strichstärke auseinander. Genau davon gab es sechs Stück.
═══════════════════════════════════════════════════════════════════════════ */
/* Bewusst der Keyframe-Name „spin" — die Ladezustands-Tests prüfen auf
getComputedStyle(el).animationName === 'spin', und die Operator-Fenster
benutzen denselben Namen. */
@keyframes spin { to { transform: rotate(360deg); } }
.a4h-spin { animation: spin 0.8s linear infinite; display: inline-block; }
/* Wer im System „weniger Bewegung" eingestellt hat, sieht ihn deutlich ruhiger
— aber nicht stillstehen: ein stehender Kreis sähe aus wie ein Fehler. */
@media (prefers-reduced-motion: reduce) {
.a4h-spin { animation-duration: 2.4s; }
}
/* ═══════════════════════════════════════════════════════════════════════════
Tabellen
Kein Zebra-Streifen: bei zehn Spalten wird daraus ein Gitter, das vom Inhalt
ablenkt. Getrennt wird durch eine Linie, Zahlen stehen rechts (nur so kann
man Größenordnungen untereinander vergleichen).
═══════════════════════════════════════════════════════════════════════════ */
.a4h-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
/* Der Kopf ist ein Etikett, keine Überschrift — dieselbe Optik wie a4h-label. */
.a4h-table thead th {
padding: 6px 10px;
border-bottom: 1px solid var(--border, rgba(15, 15, 30, 0.14));
text-align: left;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: color-mix(in srgb, var(--text, #14141d) 55%, transparent);
white-space: nowrap;
}
.a4h-table tbody td {
padding: 8px 10px;
border-bottom: 1px solid var(--border-subtle, rgba(15, 15, 30, 0.07));
vertical-align: middle;
}
.a4h-table tbody tr:hover td {
background: color-mix(in srgb, var(--text, #14141d) 3%, transparent);
}
/* Zahlenspalten rechtsbündig und mit gleich breiten Ziffern — sonst tanzen die
Beträge untereinander. */
.a4h-table .is-num {
text-align: right;
font-variant-numeric: tabular-nums;
}
/* ═══════════════════════════════════════════════════════════════════════════
KOPFZEILE (die oberste Leiste eines Werkzeugs)
Die Reiter sahen in jeder Funktion schon gleich AUS — aber sie standen an
verschiedenen Stellen: gemessen 0px (Planer), 10px (Wissen), 18px (CRM),
51px (Organizer) vom oberen Rand. Beim Umschalten sprang die Zeile, und
genau das liest man als „jedes Werkzeug sieht anders aus".
Deshalb: EINE Kopfzeile mit fester Hoehe. Die Reiter sitzen auf ihrer
Grundlinie, ihr Unterstrich faellt mit der Trennlinie der Kopfzeile
zusammen — dadurch ist der aktive Reiter mit der Flaeche darunter
verbunden statt darueber zu schweben.
Wer eine zweite Zeile braucht (Filter, Unterreiter), haengt sie DARUNTER an
— die Kopfzeile selbst bleibt einzeilig, sonst springt die Hoehe wieder.
═══════════════════════════════════════════════════════════════════════════ */
.a4h-topbar {
display: flex;
align-items: flex-end;
gap: 12px;
/* Kein Polster unten: der Reiter reicht bis zur Trennlinie. */
padding: 8px 16px 0;
/* FESTE Hoehe, nicht min-height: im Wissen dehnte ein 12px-Meta-Element die
Zeile auf 49px, im CRM blieb sie bei 46 — die Reiter lagen dadurch 3px
versetzt (gemessen 11.08.2026). */
height: 46px;
box-sizing: border-box;
border-bottom: 1px solid var(--border, var(--line, rgba(15, 15, 30, 0.10)));
background: var(--surface, transparent);
}
/* Der Unterstrich des aktiven Reiters liegt AUF der Trennlinie, nicht darueber. */
.a4h-topbar .a4h-tabs { margin-bottom: -1px; }
/* ALLES rechts der Reiter sitzt auf EINER Grundlinie, 8px ueber der
Trennlinie — Suchfeld, Icon-Leisten, einzelne Knoepfe, Wrapper.
Vorher galt der Wert nur fuer .a4h-search, jede Flaeche regelte den Rest
selbst: gemessen am 11.08.2026 lagen im CRM Suchfeld (29), Zahnrad (31,5)
und Konto-Knopf (34,5) auf drei verschiedenen Unterkanten, im Planer die
Aktions-Leiste bei 42 — Soll ist ueberall 37. Der Selektor greift nur auf
DIREKTE Kinder, damit ein Wrapper seinen Inhalt nicht ein zweites Mal
anhebt.
`.tabs` ist mit ausgenommen, obwohl Neubauten `.a4h-tabs` heissen: im
Altbestand tragen Reiterleisten teils noch den alten Namen (Planer,
Code-Gen, Mail-Stil, Inventory). Ohne die Ausnahme faellt so eine Leiste
unter „alles rechts", bekommt 8px und loest sich sichtbar von der
Trennlinie — genau das ist am 11.08.2026 im Planer passiert. Eine
seitenlokale Gegenregel reicht dagegen NICHT: `.a4h-topbar > .tabs` hat
die hoehere Spezifitaet und gewinnt. */
.a4h-topbar > *:not(.a4h-tabs):not(.tabs):not(.a4h-tabs-grow) { margin-bottom: 8px; }
/* Ein Wrapper reicht die Grundlinie an seinen Inhalt weiter. Ohne das
richtet er seine Kinder nach eigener Regel aus (im CRM zentriert) und die
Unterkanten streuen wieder — die Kopfzeile ist dann nur AUSSEN buendig. */
.a4h-topbar > *:not(.a4h-tabs):not(.tabs) { align-items: flex-end; }
/* ═══════════════════════════════════════════════════════════════════════════
ZWEITE EBENE (die Zeile unter der Kopfzeile)
§2a verlangt: die Kopfzeile bleibt EINZEILIG. Eine zweite Reiterebene,
Filter oder Werkzeugknoepfe haengen darunter — nie in dieselbe Zeile.
Passiert das doch, stehen zwei Navigationen und zwei Suchfelder
nebeneinander und die Zeile wird unlesbar (Befund im CRM, 11.08.2026).
…oberste Reiter…
…zweite Ebene…
═══════════════════════════════════════════════════════════════════════════ */
.a4h-subbar {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
padding: 8px 16px;
border-bottom: 1px solid var(--border-subtle, var(--border, rgba(15, 15, 30, 0.07)));
}
/* Die zweite Ebene ist der ersten untergeordnet und zeigt das auch (§1). */
.a4h-subbar .a4h-tabs { gap: 2px; }
.a4h-subbar .a4h-tab { padding: 6px 10px; font-size: 12px; }
.a4h-subbar .a4h-tab-emoji { display: none; }