/* PrintSupport — Seitengerüst (Chrome): Kopfzeile, Hauptnavigation, Inhaltsbereich, Seitenübergang, Testmodus-Banner und die zugehörigen responsiven Regeln. Reine Struktur/Rahmen — wiederverwendbare Bausteine liegen in komponenten.css, seitenspezifisches Layout in seiten.css. */ /* ---------- Kopfleiste ---------- Eine ruhige Zeile in drei Gruppen statt zweier Zeilen mit elf Einträgen: Wortmarke │ Filament Resin Drucker ······ Mehr ♡ ⚖ │ Mein Drucker Benutzer └ Marke ──┘└──── Hauptnavigation ────┘ └ Ziele ─┘ └─── Werkzeuge ────────┘ Getrennt wird über ABSTAND, nicht über Rahmen: Die früheren umrandeten Pillen um Währung und Drucker gaben jedem Einzelteil eine Kante und ließen die Leiste als Ansammlung lesen. Ein Bedienelement ist hier am Zeigefinger erkennbar (Hover), nicht an einem Kästchen. Drei Stufen, ein Markup: < 640px Kategorien in eigener Zeile, Ziele unten in der Leiste ≥ 640px Kategorien in eigener Zeile, Ziele oben rechts ≥ 1024px alles in EINER Zeile */ .kopfzeile { position: sticky; top: 0; /* Über der Hauptleiste (45) — das Druckermenü fährt nach unten aus. Modale Overlays (60), Snackbar (70) und Ladeoverlay (80) bleiben darüber. */ z-index: 50; /* Die senkrechte Luft steht hier statt in .kopfzeile-inhalt, weil sie seit dem Umbau vom 06.08.2026 ZWEI Zeilen betrifft: die Kopfzeile selbst und die Kategorieleiste darunter. Als Wert der inneren Zeile wäre sie für die Kategoriereihe daneben unerreichbar gewesen — sie sind Geschwister. */ /* ---------- KEIN SCHRUMPFEN BEIM SCROLLEN MEHR (22.09.2026) ---------- ⛔ Die Kopfleiste hat EINE Größe, und zwar die, die sie in Ruhe hatte. Entfallen sind damit: --kopf-fortschritt, --marke-skala, die beiden Endwerte --kopfzeile-gross/--kopfzeile-klein (und ihre Geschwister der Handy-Fassung), das @property --kopf-roll und der rAF-Schreiber in js/app.js, der den Rollstand hierher schrieb. ⚠️ --kopf-hoehe BLEIBT und wird weiterhin gemessen. Die Höhe ist jetzt je Fensterbreite konstant, aber nicht je Seite gleich (72 / 64 / zwei Zeilen), und an ihr hängen die klebenden Spalten. Was entfallen ist, ist das Modell dahinter (zwei gemessene Endlagen, linear geteilt) — es gibt nur noch eine Lage zu messen. ⚠️ --werkzeug-roll ist etwas ANDERES und unberührt: Die Werkzeugzeile der Listen schrumpft auf dem Handy weiterhin beim Rollen (css/seiten.css). Sie hing nur am selben Rollzähler, nie an dieser Variablen. ⛔ WER HIER WIEDER EINE SCHWELLE ODER EINEN FORTSCHRITT EINFÜHRT, holt zugleich das Höhenmodell zurück: Jede Größe der Leiste müsste dann wieder affin in derselben Zahl sein, sonst rechnet js/app.js an jedem Zwischenstand lautlos falsch. */ /* ---------- Höhe der EINEN Zeile ---------- Zwei feste Endwerte, dazwischen linear geteilt. Vorher stand hier eine zusammengesetzte Rechnung (Spulenmaß × Skala + zweimal Luft); mit dem Umbau auf eine Zeile (10.08.2026) trägt die Zeile aber nicht mehr nur die Marke, sondern auch den 44px hohen Burger — und der ist ihr Mindestmaß. ⛔ KEIN `max()` in dieser Rechnung. Das Maximum zweier linearer Funktionen ist stückweise linear, nicht linear: Sobald der Knick zwischen die beiden Endlagen fiele, wäre die Interpolation in js/app.js (modellHoehe teilt linear zwischen den gemessenen Endlagen) falsch — und zwar lautlos, mit einem um mehrere Pixel danebenliegenden --kopf-hoehe. Zwei feste Endwerte sind per Bauart linear und lassen sich so wählen, dass der Burger in JEDER Lage hineinpaßt (siehe die Werte je Fensterbreite weiter unten). */ /* ⛔ 72/60 STATT 96/60 (03.09.2026) — UND DIE KOMPAKTE LAGE IST BEWUSST STEHENGEBLIEBEN. Die schlanke Leiste spart ihre 24px in der RUHELAGE; das kompakte Ende bleibt, wo es war, weil dort etwas anderes den Ausschlag gibt als der Geschmack: Die Kategoriegrafik ist 57,19px hoch (sie behält ihre sichtbare Größe, siehe „Kategoriegrafik"), und `.kopfzeile-inhalt` trägt seit dem 10.08.2026 KEIN `overflow: clip` mehr — was nicht in die Zeile paßt, ragt sichtbar über ihre Unterkante hinaus. 60px lassen der Grafik 1,4px auf jeder Seite; jeder kleinere Wert ließe sie unten herausstehen, und zwar erst nach 120px Rollweg, also lange nachdem man hingesehen hat. Wer die kompakte Lage doch senken will, verkleinert vorher die Grafik — nicht umgekehrt. */ --kopfzeile-hoehe: 72px; /* ---------- Bild- und Wortmarke (07.09.2026) ---------- Links die Bildmarke, rechts die Wortmarke, BEIDE GLEICH HOCH. Eine Zahl bestimmt das: --marke-hoehe. Die Breiten folgen über das Seitenverhältnis der viewBox (`width: auto` am SVG) — sie stehen nirgends als Zahl und können deshalb auch nicht auseinanderlaufen. ⛔ WAS HIER GESTANDEN HAT UND ERSATZLOS ENTFALLEN IST: --marke-tinte, --marke-grundlinie Schriftmetriken von Segoe UI --marke-spule, --spulen-groesse Spulendurchmesser aus der Schrift --marke-spulen-versatz Unterkante auf die Grundlinie --spulen-bild, --spulen-ueberhang Füllausgleich der PNG-Datei --marke-schrift Schriftgröße des Schriftzugs Die ersten drei Gruppen rechneten die Spule aus der Texthöhe des Schriftzugs und setzten ihre Unterkante auf dessen Grundlinie. Beides hat keinen Gegenstand mehr: Die Wortmarke ist kein Text, sie hat keine Grundlinie und keine Tinte, und die neuen Dateien tragen KEINEN transparenten Rand (gemessen: viewBox = Inhalt, alle vier Ränder 0,000). Der Füllausgleich rechnete gegen einen Rand, den es nicht gibt. ⚠️ --marke-schrift ist mit dem Schriftzug gegangen. Es setzte die font-size der Wortmarke; ein SVG hat keine. ⛔ 20px, auf Ansage vom 07.09.2026. Die Wortmarke ist mit 6,109:1 sehr breit — bei H misst die Marke insgesamt H · 6,827 + Lücke. Gemessen: H = 20px → Bildmarke 14,4 · Wortmarke 122,2 · Marke 148,5px H = 22,9 → (die alte Spulenhöhe) 168,2px 20px hält die Marke damit fast genau auf ihrer bisherigen Breite (143,9px, als der Schriftzug noch der kürzere alte Name war; 187,0px mit dem heutigen Namen als Text) und gibt dem Suchfeld daneben seinen Platz zurück. Wer sie vergrößert, misst das Suchfeld bei 1024px nach — dort ist die Zeile am engsten. ⚠️ EINE Höhe für alle Breiten. Der Schriftzug ging früher je Fenster eine Stufe zurück, weil er neben den Kategorien Platz brauchte; die Marke ist jetzt schmal genug, daß das entfällt. ⚠️ Sie ist das VERSALBAND der Wortmarke — deren Kasten ist höher (--marke-wort-hoehe), das Symbol daneben ist es ebenfalls (--marke-bild-hoehe). Sie ist das Maß, an dem beide hängen. */ --marke-hoehe: 20px; /* ---------- Das SYMBOL ist größer als das Versalband (23.09.2026) ---- ⛔ BIS ZUM 23.09.2026 WAR ES GENAU SO HOCH WIE DAS VERSALBAND, und mit dem neuen, fast quadratischen Symbol (viewBox 41 × 42 statt der alten hochformatigen 91,12 × 126,88) sah das falsch aus: Gleich hoch heißt bei einer quadratischen Zeichnung auch gleich breit, und daneben steht ein Schriftzug von 195 Einheiten Länge. Das Symbol verschwand. Maßgeblich ist die Vorlage vom 23.09.2026. Aus ihr abgemessen (Bildpunkte, Symbol gegen das „P“ von Print): Symbol y 46 … 110 Höhe 65 Versalband y 54 … 98 Höhe 45 → 65 / 45 = 1,444 ⛔ ALS FAKTOR UND NICHT ALS ZWEITE PIXELZAHL. Das Verhältnis ist die Eigenschaft der Vorlage; die Größe steckt allein in --marke-hoehe. Als eigene Zahl notiert bliebe das Symbol stehen, sobald jemand den Schriftzug ändert — und ein Symbol, das nicht mitwächst, fällt erst auf, wenn man beide nebeneinander sieht. ⚠️ AUSGERICHTET WIRD ÜBER DIE MITTE, nicht über die Grundlinie. Das Symbol ragt damit 4,4px über das Versal und 4,4px darunter; in der Vorlage sind es 8 und 12 Bildpunkte, also 3,6 und 5,3px — der Unterschied liegt unter einem Bildpunkt der Vorlage und ist die Messgenauigkeit, keine Aussage. Eine eigene Verschiebung wäre eine dritte Zahl, die niemand nachrechnet. ⚠️ Die Breite folgt über das Seitenverhältnis (width: auto): 29 × 41/42 = 28,3px. Die Marke wird dadurch rund 9px breiter — gemessen, und das Suchfeld bei 1024px trägt es. */ --marke-bild-hoehe: calc(var(--marke-hoehe) * 1.444); /* ⛔ --marke-skala IST ENTFALLEN (22.09.2026). Sie skalierte die ganze Marke beim Rollen auf 0,75; mit dem Schrumpfen der Leiste ist sie gegenstandslos. Die Marke hat eine Größe. */ /* ---------- Die WORTMARKE ist höher als ihr Kasten (22.09.2026) ------- ⛔ BEIDE TEILE GLEICH HOCH ZU SETZEN WAR OPTISCH FALSCH. Die viewBox der Wortmarke (194,75 × 31,88) ist ihr Tintenkasten und trägt die Unterlängen von „p“ und „pp“ mit; die Bildmarke dagegen füllt ihre viewBox ganz. Auf dieselbe Kastenhöhe gestellt wirkt der Schriftzug deshalb kleiner als das Symbol daneben — und zwar um genau die Unterlänge. Maßgeblich ist das VERSALBAND, also Oberkante der Großbuchstaben bis Grundlinie. Aus den Pfaddaten in index.html abgelesen: Oberkante y = 0,25 (das „S“ von Support, das höchste Versal; der i-Punkt liegt bei 0,00) Grundlinie y = 24,75 (Mittel der flachen Füße: P 24,50 · i 24,62 · n 24,62 · r 24,88) Versalband 24,50 von 31,88 = 0,7685 der viewBox Damit das Versalband --marke-hoehe misst, braucht die Wortmarke 20 / 0,7685 = 26,0px Kastenhöhe. Die Breite folgt über das Seitenverhältnis (width: auto): 26 × 6,109 = 158,8px. ⚠️ --marke-wort-versatz ist die Folge davon und keine Kosmetik. Der 26px-Kasten trägt 0,2px über dem Versal und 5,8px darunter; mittig zum Symbol ausgerichtet säße der Schriftzug deshalb 2,8px zu hoch. Der Versatz schiebt ihn um genau diese Hälfte der Unterlänge nach unten, sodass die Versalbänder beider Teile aufeinander liegen. Über `transform` und nicht über `margin`: Er ist eine optische Korrektur und soll die belegte Höhe der Zeile nicht verändern. ⛔ WER EINE DER BEIDEN SVG-DATEIEN AUSTAUSCHT, MISST DAS VERSALBAND NEU. Die 0,7685 stehen in keiner Datei, sie sind aus dieser einen Zeichnung abgelesen. */ --marke-wort-hoehe: 26px; --marke-wort-versatz: 2.8px; /* ---------- Die Marke steht mittig vor den Kategorien (22.09.2026) ---- Links vom Fensterrand, rechts vom Wort „Filament“ — beide Abstände sind dieselbe Zahl. Rechts setzt sie sich aus drei Teilen zusammen, und alle drei stehen zwischen Marke und Schrift: column-gap der Zeile --abstand-m 12px margin-left von .kategorienav 16px padding-left des Eintrags --kategorie-polster 12px ----------------------------------------------------- 40px ⛔ GEMESSEN WIRD ZUR SCHRIFT, nicht zum Linkkasten. Dessen Polster ist unsichtbar; mittig zu einer unsichtbaren Kante sähe um genau dieses Polster schief aus. Genau deshalb steht es als eigenes Token da (--kategorie-polster) — es ist unter 1024px eine Stufe kleiner, und der Rand der Reihe muss das mitrechnen, sonst wandert die Mitte. ⛔ 40px UND NICHT 64px, und das ist gerechnet: Vorher stand die Marke bei 16px links und hatte 64px bis zur Schrift. Die Summe (80px) ist der Platz, den die Zeile für diesen Bereich hergibt — zentriert heißt also 40 und 40, nicht 64 und 64. Mit 64px wäre die Marke zwar ebenso mittig, die Zeile aber 48px breiter, und die bezahlt bei 1024px das Suchfeld: gemessen 84px statt 108px Feldbreite. ⚠️ Die Zahl steht deshalb ZWEIMAL, und das ist Absicht: hier als linker Innenabstand der Zeile, drüben als margin-left der Kategoriereihe (dort als Rest nach Lücke und Polster). Wer eine ändert, rechnet die andere nach; tests/pruefung.html stellt beide gegeneinander. ⚠️ Unter 768px gilt sie nicht: Dort haben die Kategorien eine eigene Zeile, und die Marke steht allein. Der Zweig setzt padding-inline selbst. */ --marken-luft: 40px; /* Der waagerechte Innenabstand EINES Kategorieeintrags. Er steht hier und nicht allein in `.kategorie-ziel`, weil ihn zwei Regeln brauchen: der Eintrag selbst und der Rand der Reihe, der die Marke mittig hält (Rechnung oben). Unter 1024px eine Stufe kleiner. */ --kategorie-polster: var(--abstand-m); /* ---------- Die Unterstreichung des aktiven Eintrags (22.09.2026) ---- Sie steht hier und nicht allein in `.kategorie-ziel`, weil sie zwei Regeln betrifft — und die zweite ist die überraschende: die MARKE. ⛔ JEDER Eintrag trägt sie, nur meist durchsichtig (sonst sprängen die Einträge beim Wechsel um ihre Höhe). Sie liegt INNERHALB des Linkkastens, und `align-items: center` der Zeile zentriert den Kasten samt Kante. Damit sitzt die SCHRIFT darin um die halbe Kantenstärke zu hoch — und die Marke daneben, die keine Kante hat, um dieselbe halbe Kantenstärke zu tief. Gemessen bei 1400px: Tinte der Kategorien mittig bei 34,66px, Marke bei 36,00px. ⚠️ Es ist eine KOPPLUNG und keine gemessene Zahl: `.marke` bekommt denselben Wert als margin-bottom und rückt dadurch um exakt dieselbe Hälfte nach oben. Wer die Kante ändert, ändert beides zugleich; eine abgeschriebene Pixelzahl liefe beim ersten Umbau davon, und zwar lautlos — eine Marke, die einen Pixel zu tief steht, sieht nicht nach einem Fehler aus, sondern nach nichts. ⚠️ Es bleibt ein Rest von 0,34px aus der Schriftmetrik (die Tinte von „Filament" liegt nicht genau mittig in ihrer Zeilenbox). Er ist gemessen und stehengelassen: ein Drittel Pixel, und die einzige Alternative wäre eine Zahl je Schriftstufe, die niemand nachrechnet. */ --kategorie-unterstrich: 2px; /* Die Kopfleiste läuft ÜBER den Streifen der Icon-Spalte hinweg bis an die Fensterkante: Das -Padding hält nur den Inhalt von der Spalte frei, die Leiste selbst braucht die volle Breite — sonst wäre „mittig" die Mitte des Restplatzes statt der Seitenbreite, und der Burger könnte nie in der Flucht der Icon-Spalte stehen. ⚠️ BEIDE Seiten, seit das -Padding beidseitig ist (08.08.2026). Mit nur `margin-right` begänne die Leiste 60px vom linken Fensterrand und endete an der rechten Kante — ihre Mitte läge damit 30px rechts der Fenstermitte, und die Wortmarke stünde genau dort. Das ist die Zusicherung „MITTIG STEHT DIE WORTMARKE" (siehe „Rollende Spule"), und sie hängt daran, dass diese Zeile dem Padding folgt. Nachgemessen bei 1400, 800 und 500px. */ margin-inline: calc(-1 * var(--leiste-schmal)); /* ---------- Eigene Fläche (10.08.2026) ---------- Vorher trug die Kopfzeile `--surface`, also exakt die Fläche der Seite — sie war nur an ihrer Unterkante zu erkennen. Jetzt steht sie eine Flächenstufe höher und ist als Leiste lesbar. ⚠️ `--surface-container-high`, NICHT `--surface-container`. Der Unterschied ist gemessen, nicht gewählt: Die Kartenstufe (`--surface-container`) trägt im HELLEN Schema 1,24:1 gegen die Seite — dieselbe Abhebung wie die Karten, also erkennbar. Im DUNKLEN kommt sie aber nur auf 1,10:1 und liegt damit unter der Schwelle von etwa 1,15:1, ab der eine Fläche ohne Rahmen überhaupt erst wahrnehmbar wird (CLAUDE.md, „Helles Farbschema"). Eine Leiste, die man nur in einem der beiden Schemata sieht, erfüllt die Anforderung nicht. Eine Stufe höher trägt in beiden: dunkel #0F1115 (Seite) → #22262D (Leiste) hell #E1E4EC (Seite) → #FFFFFF (Leiste) Deutlich, aber ohne eigene Farbigkeit — die Leiste bleibt eine Fläche der Seite und wird nicht zum Fremdkörper. */ background: var(--surface-container-high); /* Die Kante bleibt und wird jetzt gebraucht wie nie: Der Inhalt scrollt unter der Leiste hindurch. Trennung über Abstand ist unmöglich — sie klebt. */ border-bottom: 1px solid var(--outline-variant); } /* ---------- EINE ZEILE (seit 10.08.2026) ---------- Marke links, Kategorien mittig, Druckerwähler und Burger rechts. ⚠️ Die Mitte der Kategorien ist die SEITENMITTE, nicht die Mitte des Restplatzes zwischen Marke und Werkzeugen. Deshalb liegen Marke, Druckerwähler und Burger ABSOLUT (aus dem Fluss genommen) und die Kategoriereihe ist das einzige Fluss-Kind — der Flex-Kasten zentriert damit sie und nichts anderes. Weder eine lange Wortmarke links noch ein langer Gerätename rechts können die Kategorien verschieben; das war schon in der früheren zweizeiligen Fassung die tragende Technik und gilt unverändert. ⚠️ Senkrecht wird über die Kastenhöhe zentriert (align-items der Zeile) und NICHT über `top: 50%; transform: translateY(-50%)`. Der Grund war bis zum 22.09.2026 das Schrumpfen an `.marke` — ein zweiter Transform hätte mit ihm in EINER Deklaration stehen müssen, und dann bezöge sich das Prozent-Translate auf die UNSKALIERTE Höhe. Mit dem Schrumpfen ist er entfallen; die Regel bleibt, weil sie jetzt eine andere trägt: `.marke-wort` hält ihren Versatz über `transform`. */ .kopfzeile-inhalt { position: relative; /* ⛔ ALLE VIER GRUPPEN STEHEN IM FLUSS (03.09.2026), und damit endet die Zusicherung „die Kategorien stehen auf der Seitenmitte". Sie war richtig, solange die Mitte frei war. Seit dort das Suchfeld steht (siehe .kopfsuche), gibt es nichts mehr zu zentrieren: Die Kategorien rücken nach links neben die Marke, die Suche nimmt den Platz bis zu den Werkzeugen. Marke, Druckerwähler und Burger lagen bis dahin ABSOLUT — einzig, um die Reihe in der Mitte freizustellen. Dieser Grund ist weg, also ist auch das Absolute weg; eine Zeile aus vier Fluss-Kindern verteilt sich von selbst und braucht keine gerechneten Ränder mehr. ⚠️ Die Marke schrumpft weiterhin per `transform: scale`, und ein Transform ändert die belegte BREITE nicht. Beim Rollen entsteht rechts von ihr deshalb Luft (gemessen bis 38px in der kompakten Lage). Das ist bewusst hingenommen: Die Alternative wäre eine mitschrumpfende Breite, also Layout in jedem Bild — genau die Rechnung, die der Umbau vom 07.08.2026 abgeschafft hat. Sichtbar wird es als etwas mehr Abstand zu den Kategorien; die Kategorien selbst rücken dabei keinen Pixel, sie stehen also ruhig. */ /* ⚠️ Die Zeilenhöhe steht als RECHNUNG da, nicht als Innenabstand um einen Inhalt, der selbst schrumpft. Sie ist die einzige Größe des Kopfes, die beim Scrollen noch Layout auslöst — und sie muss es, denn eine Leiste, die nicht kürzer wird, gibt keinen Platz frei. Der Spulendurchmesser ist das höchste Element der Zeile (64px gegen rund 41px Zeilenkasten der Wortmarke) und steht als Token bereit; die Höhe lässt sich deshalb ohne Messung ausdrücken. Die Marke selbst schrumpft per transform und trägt zur Höhe nichts mehr bei — ohne diese Rechnung bliebe die Zeile hoch und unter dem verkleinerten Logo klaffte Luft. KEINE transition: Der Wert folgt dem Scrollen unmittelbar. Eine Übergangszeit liefe hier gegen ein Ziel, das sich in jedem Frame weiterbewegt — das Ergebnis ist Nachlauf, kein weicher Verlauf. */ height: var(--kopfzeile-hoehe); /* ⚠️ RECHTS --burger-rechts, nicht --abstand-l: Der Burger ist das letzte Kind im Fluss, sein Abstand zur Fensterkante ist damit der Innenabstand dieser Zeile. Er steht weiterhin in der Flucht der Icon-Spalte — die Rechnung dazu steht unverändert bei --burger-rechts. */ /* ⚠️ --marken-luft und nicht --abstand-l: Die Marke steht mittig zwischen Fensterrand und dem Wort „Filament“ (Rechnung oben). */ padding-left: var(--marken-luft); padding-right: var(--burger-rechts); display: flex; align-items: center; /* ⛔ `column-gap`, NICHT `gap`. Unter 768px wird dieselbe Zeile zu einem Raster mit zwei Reihen; ein Kurzform-`gap` setzte dort auch die ZEILENlücke, und die addierte sich zu den beiden Zeilenhöhen. Gemessen 113px statt der gerechneten 100 — und zwar lautlos, denn das Höhenmodell in js/app.js mißt die Endlagen und teilt linear, es merkt eine zusätzliche Konstante nicht. */ column-gap: var(--abstand-m); /* ⛔ KEIN `overflow: clip` mehr. Bis zum 10.08.2026 stand es hier als Bühne des Ausrollens, weil die Spule nach RECHTS um 100vw wegrollte und ein Überhang nach rechts zum rollbaren Bereich zählt. Seit dem Umbau auf eine Zeile rollt sie nach LINKS aus (siehe „Rollende Spule"), und ein Überhang nach links erzeugt keinen Rollbalken — der Zuschnitt wird also nicht mehr gebraucht. Er wäre jetzt sogar schädlich: In dieser Zeile hängt das Druckermenü, und `clip` schnitte es an der Unterkante der Leiste ab. */ } /* Seit der Umstellung auf echte Pfade ist die Wortmarke ein , kein