/* ══ Die Kopfzeile — EINE Fassung für alle Seiten ══════════════════════════════════════ Percy-Entscheid 24.08.2026: «die Navigationsleiste ist auch auf anderen Seiten anders? Wieso? Sie sollte, genauso wie der Footer, auf allen Seiten gleich sein.» Nachgemessen vor dem Umbau: 30 Seiten, 13 verschiedene Kopfzeilen — nach Abzug der Aktiv-Markierung (die SOLL sich je Seite unterscheiden) blieben SIEBEN echte Fassungen. Die Unterschiede waren keine Absicht: · `index.html` hatte eigenes Markup (`.kopf`) und eigene Regeln, ohne `ds/site.css`. · `cliche.php` und `station.php` schickten den Suchknopf auf `sammlung.html` statt auf `suche.php` — genau die Fehllesung, die im Katalograhmen als bereits zurückgenommen dokumentiert ist (Percy 13.08.2026: «Wenn ich da oben klicke, will ich global suchen»). · Drei Seiten trugen einen Sprachschalter «DE · EN». Er war nie verlinkt, `site.css` stellte ihn auf `display:none`, und englische Seiten gibt es keine. Zierrat, entfernt. ⚑ Diese Datei ist die EINZIGE Quelle für den Kopfzeilen-Stil, `_werkzeuge/kopfzeile_setzen.py` die einzige Quelle für ihr Markup. Wer hier etwas ändert, ändert es dort mit — und lässt das Werkzeug laufen, statt 29 Dateien von Hand anzufassen. ⚑⚑ Zwei Namensräume, ein Design — wie bei `ds/fusszeile.css`. Die Startseite lädt `ds/site.css` NICHT und benennt ihre Farben selbst (`--gelb`, `--ink`, `--linie`, `--serif`, `--sans`). Nachgemessen: dieselben Werte. Darum unten je eine Fallback-Kette; ohne sie stünde die Kopfzeile ausgerechnet auf der Startseite ohne Farbe da. ══════════════════════════════════════════════════════════════════════════════════════ */ /* ⚑ Die Höhe der Kopfzeile als Marke — damit alles, was darunter kleben soll, sie nicht raten muss. `cliches.html` rechnete mit `var(--kopf, 77px)`, gesetzt war die Marke aber NIRGENDS; es griff also immer der Rückfallwert 77, während der Kopf 71 px misst. Sechs Pixel Luft zu viel — unsichtbar, aber wieder eine Zahl, die niemand pflegt. Nachgemessen 25.08.2026: 71 px ab 360 px Fensterbreite, 116 px darunter. */ :root { --tp-kopf: 71px; } @media (max-width: 359px) { :root { --tp-kopf: 116px; } } .tp-header { /* ⚑⚑ EIGENE Grundschrift statt der geerbten. Der Quervergleich fand sieben Abweichungen, alle auf der Startseite: `body` steht dort auf 20 px/31, auf den übrigen 31 Seiten auf 19 px/28,5 — Kopf und Fuß erbten das und wurden dadurch ein bis fünfzehn Pixel höher. Sichtbar ist davon fast nichts; gemeinsam ist es trotzdem nicht. Ein Bauteil, das auf allen Seiten gleich sein soll, darf nicht davon abhängen, auf welcher Seite es steht. (25.08.2026) */ font-size: var(--tp-t-5); line-height: 1.55; --kz-gelb: var(--tp-yellow, var(--gelb, #ffcc00)); --kz-ink: var(--tp-ink, var(--ink, #1b1b18)); --kz-grau: var(--tp-ink-muted, var(--label, #5f5d54)); --kz-linie: var(--tp-border, var(--linie, #dad8cf)); /* ⚑⚑ Der Grund der Kopfzeile ist DER GRUND DER SEITE, kein eigener Ton. Hier stand `--tp-paper` — und weil 31 Seiten Weiß trugen, saß dort eine papierfarbene Leiste auf weißem Grund. Percy hat es gesehen, mein Quervergleich nicht (er verglich Bauteile; verschieden war der Grund darunter). An `--tp-bg` gehängt kann die Naht nicht wiederkommen: ändert sich der Grundton des Hauses, geht die Leiste mit. */ --kz-grund: var(--tp-bg, var(--papier, #ffffff)); --kz-serif: var(--tp-font-serif, var(--serif, "EB Garamond", Georgia, serif)); --kz-sans: var(--tp-font-sans, var(--sans, "Nunito Sans", Arial, sans-serif)); position: sticky; top: 0; z-index: 50; background: var(--kz-grund); /* ⚑ Gelbe Linie UNTEN, 3 px (Percy 24.08.2026: «die gelbe linie bottom statt top und 3 statt 6px»). Sie trennt die stehende Leiste vom laufenden Inhalt. */ border-bottom: 3px solid var(--kz-gelb); } /* ⚑⚑ AUSRICHTUNG — hier stand mein schlimmster Fehler dieses Umbaus, und er ist von Percy gesehen worden, nicht von mir gemessen: `max-width: var(--tp-page-max, 1500px)`. Zwei Schäden auf einmal: · `--tp-page-max` (1280 px) steht in `ds/colors_and_type.css`, die die Startseite NICHT lädt. Dort griff der Rückfallwert 1500 — die Kopfzeile war auf der Startseite also breiter als auf allen anderen Seiten. Genau das, was der Auftrag verhindern sollte. · Auf allen übrigen Seiten zentrierte die Deckelung den Kopf, während der Inhalt randlos bleibt: bei 1920 px stand das Signet bei x=360, der Text darunter bei x=56. ⚑ `ds/fusszeile.css` warnt seit dem Vortag wörtlich davor («Eine feste Breite für alle hätte die Fußzeile auf breiten Schirmen gegen den randlosen Inhalt versetzt») — ich habe die eigene Notiz nicht gelesen und beim Kopf genau das gebaut. Ab hier spiegelt der Kopf, was der Fuß tut: sich nach der INHALTSSPALTE richten, nicht nach einer festen Zahl. */ .tp-header__inner { display: flex; align-items: center; gap: 24px; padding: 14px clamp(20px, 4vw, 56px); } /* Die Startseite steht in ihrem eigenen `.wrap` (1500 px) — dieselbe Zusatzklasse und dieselben Werte wie bei der Fußzeile, damit Kopf, Inhalt und Fuß dort auf einer Fluchtlinie stehen. */ .tp-header--wrap .tp-header__inner { max-width: 1500px; margin: 0 auto; padding-left: var(--rand, clamp(18px, 4vw, 60px)); padding-right: var(--rand, clamp(18px, 4vw, 60px)); } .tp-header__logo { display: flex; align-items: center; text-decoration: none; color: var(--kz-ink); flex: none; } .tp-header__logosvg { display: block; } .tp-nav { display: flex; gap: 22px; margin-left: auto; } .tp-nav a { font-family: var(--kz-sans); font-weight: 700; font-size: var(--tp-t-klein); text-transform: uppercase; letter-spacing: .12em; color: var(--kz-ink); text-decoration: none; padding: 8px 0; border-bottom: 2px solid transparent; } .tp-nav a:hover, .tp-nav a.active { border-bottom-color: var(--kz-gelb); } /* ⚑ Luft zwischen Menü und Werkzeugen (Percy, 25.08.2026: «zwischen dem Menü und Suchen / Warenkorb etwas Platz»). Die Zeile trägt zwei verschiedene Dinge — links die sechs Wege, rechts die Werkzeuge —, und ohne Abstand las sich «Shop» wie ein siebter Menüpunkt neben «Suchen». Der Zuschlag kommt zum Abstand der Zeile hinzu (24 px), macht also 44 bis 88. ⚑ Nur hier, NICHT im Schmalschirm-Block: dort schiebt `margin-left: auto` die Gruppe an den rechten Rand, und ein fester Zuschlag würde das wieder kaputtmachen. */ .tp-header__actions { display: flex; align-items: center; gap: 12px; flex: none; margin-left: clamp(20px, 3vw, 64px); } .tp-header__actions .search { font-family: var(--kz-sans); font-size: var(--tp-t-klein); text-transform: uppercase; letter-spacing: .14em; border: 1px solid var(--kz-ink); background: transparent; color: var(--kz-ink); padding: 6px 10px; text-decoration: none; display: inline-block; } .tp-header__actions .search:hover { background: var(--kz-gelb); border-color: var(--kz-gelb); } /* ── Der Warenkorb ─────────────────────────────────────────────────────────────────── ⚑⚑ Steht hier, weil er ausschließlich in der Kopfzeile hängt: `warenkorb.js` schreibt sein Zeichen in `.tp-header__actions` und sonst nirgends. Vorher standen die Regeln in `shared.css` — und die Startseite lädt die nicht. Ergebnis nach dem Vereinheitlichen der Kopfzeile: der Korb war dort im DOM vorhanden und **null Pixel breit**, weil dem SVG die Bemassung fehlte. Gemessen (`.cart-icon[x294→294]`), nicht gesehen — bei 17 px sieht ein fehlendes Zeichen aus wie kein Zeichen. Eine Sache, ein Ort. */ .cart-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--kz-ink); width: 32px; height: 32px; color: var(--kz-ink); text-decoration: none; } .cart-icon svg { width: 17px; height: 17px; display: block; } /* ⚑ MUSS hier stehen: `.cart-icon` setzt `display:inline-flex`, und das schlägt die eingebaute Wirkung von `hidden`. Ohne diese Regel bliebe der leere Korb sichtbar, obwohl `warenkorb.js` ihn als versteckt markiert — ein Attribut, das nichts tut. */ .cart-icon[hidden] { display: none; } .cart-icon__zahl { position: absolute; top: -7px; right: -7px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 50%; background: var(--kz-gelb); color: var(--kz-ink); font-family: var(--kz-sans); font-weight: 700; font-size: var(--tp-t-label); line-height: 16px; text-align: center; } .cart-icon__zahl:empty { display: none; } /* ⚑ Kritiker-Befund 15.08.2026: der Haus-Fokusring ist gelb und kollidiert an der oberen rechten Ecke mit dem gleichfarbigen Zähler — genau dort, wo die Stückzahl steht, verschmelzen Ring und Zähler zu einer Fläche. Punktuelle Ausnahme: Farbe wechselt, Breite und Abstand bleiben. NICHT wegnehmen. */ .cart-icon:focus-visible { outline-color: var(--kz-ink); } /* ── Sprungziele ───────────────────────────────────────────────────────────────────── ⚑⚑ Sprungziele dürfen nicht unter dem klebenden Kopf landen. Ohne diese Regel liegt der Anfang jedes Anker-Ziels genau dahinter — gemessen am 20.08.2026: `so-gut-wie-alt.html#hohner` setzte die Überschrift auf y=0. Betrifft auch die Anker der Fußzeile (`besuch.html#preise`, `rechtliches.html#impressum`) und die zwölf weiteren, die im Bestand benutzt werden. ⚑ Diese Regel stand in `ds/site.css` mitten im HEADER-Abschnitt und ist mir beim Herausnehmen jenes Abschnitts am 24.08.2026 mit weggerutscht — beinahe ausgeliefert. Sie gehört zur Kopfzeile, also steht sie jetzt hier bei ihr. Ein Wert genügt jetzt: die Leiste ist mit dem Klappknopf über ALLE Breiten 71 px hoch (nachgemessen 360–1900 px; nur unter 360 px bricht sie auf 116 px um). Die früheren drei Stufen 96/136/190 px stammen aus der Zeit, als die Navigation auf schmalen Schirmen umbrach. 88 px = 71 + Luft. */ [id] { scroll-margin-top: 88px; } @media (max-width: 360px) { [id] { scroll-margin-top: 132px; } } /* ── Der Klappknopf ────────────────────────────────────────────────────────────────── ⚑ Über 920 px gibt es ihn nicht — dort passen alle sechs Wege in eine Zeile, und ein Knopf, der etwas verbirgt, was ohnehin Platz hat, ist nur ein Klick mehr. */ .tp-nav__knopf { display: none; flex: none; width: 44px; height: 44px; padding: 0; margin-left: auto; background: transparent; border: 1px solid var(--kz-linie); cursor: pointer; align-items: center; justify-content: center; } .tp-nav__knopf span, .tp-nav__knopf span::before, .tp-nav__knopf span::after { display: block; width: 20px; height: 2px; background: var(--kz-ink); position: relative; } .tp-nav__knopf span::before, .tp-nav__knopf span::after { content: ""; position: absolute; left: 0; } .tp-nav__knopf span::before { top: -6px; } .tp-nav__knopf span::after { top: 6px; } /* Offen: aus drei Strichen wird ein Kreuz — der Knopf sagt damit, was er tut. */ .tp-nav__knopf[aria-expanded="true"] span { background: transparent; } .tp-nav__knopf[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); } .tp-nav__knopf[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); } /* ⚑ Ganz schmale Schirme: gemessen bei 375 px rutschte der Klappknopf in eine zweite Zeile und die Leiste wuchs von 71 auf 123 px. Rechnung: Signet 160 + «Suchen» 78 + Korb 32 + Knopf 44 + drei Abstände = mehr als die 335 px, die nach dem Rand bleiben. Das Signet ist das Einzige, was sich ohne Verlust verkleinern lässt — der Korb hat mit 32 px schon die kleinste vertretbare Tippfläche, und «Suchen» als Wort zu behalten ist deutlicher als ein weiteres Zeichen. */ @media (max-width: 460px) { .tp-header__inner { gap: 10px; padding-left: 16px; padding-right: 16px; } .tp-header__logosvg { width: 124px; height: auto; } .tp-header__actions .search { padding: 6px 8px; font-size: var(--tp-t-label); letter-spacing: .1em; } } @media (max-width: 920px) { .tp-header__inner { flex-wrap: wrap; gap: 12px 16px; padding: 12px 20px; } .tp-nav__knopf { display: inline-flex; } /* ⚑ `margin-left: auto` MUSS bleiben — es schiebt Suchknopf, Korb und Klappknopf an den rechten Rand. Ich hatte es hier auf 0 gesetzt, und die Gruppe klebte dadurch mitten in der Zeile: bei 800 px stand der Klappknopf bei x=342, rechts davon waren 414 px leer. Auf dem Telefon fiel es nicht auf, weil die Zeile dort ohnehin voll ist — sichtbar war es nur zwischen 460 und 920 px, also genau in dem Bereich, den ich nicht angesehen habe (gemessen 25.08.2026). */ .tp-header__actions { order: 2; margin-left: auto; } .tp-nav__knopf { order: 3; margin-left: 0; } /* ⚑ Die Wege sind geschlossen NICHT da — nicht bloß unsichtbar. `display:none` nimmt sie auch der Tastatur und dem Vorleseprogramm aus dem Weg; ein nur durchsichtiges Menü ließe den Finger ins Leere tippen und den Fokus in ein unsichtbares Feld springen. ⚑⚑ Versteckt wird NUR unter `.tp-header--klappbar`, und diese Klasse setzt `kopfzeile.js` erst, NACHDEM es den Knopf erzeugt hat. Ohne JavaScript gibt es keinen Knopf — dann bliebe die Navigation verborgen und wäre auf dem Handy unerreichbar. Mit der Kopplung fällt sie stattdessen auf den alten Zustand zurück: sichtbar, umgebrochen, etwas hoch. Unschön, aber benutzbar. (Ich hatte die Kopplung zuerst vergessen und im Kommentar sogar das Gegenteil behauptet — 24.08.2026.) */ .tp-header--klappbar .tp-nav { display: none; } .tp-nav { order: 4; flex-basis: 100%; flex-direction: column; gap: 0; margin: 0 0 4px; border-top: 1px solid var(--kz-linie); } .tp-header--klappbar.tp-header--offen .tp-nav { display: flex; } .tp-nav a { padding: 13px 2px; border-bottom: 1px solid var(--kz-linie); font-size: var(--tp-t-klein); } .tp-nav a:last-child { border-bottom: 0; } .tp-nav a:hover, .tp-nav a.active { border-bottom-color: var(--kz-linie); box-shadow: inset 3px 0 0 var(--kz-gelb); padding-left: 12px; } }