/* comparxis Website — Layout auf Basis von Styleguide.css */ /* Die Gesamthöhe der Kopfzeile an einer Stelle: 66 + 48 plus je eine Trennlinie. Alles, was unter der fixierten Leiste stehenbleiben muss – der Kopf des Direktvergleichs, das Sichtprobe-Band, jedes Sprungziel – rechnet damit, statt die Zahl an sechs Stellen zu wiederholen. */ :root { --cx-kopf: 116px; /* LESEBREITE für Fließtext. In ch, nicht in Pixeln: ch ist an die Schriftgröße des Elements gebunden, und die reicht hier von 14,5 px (Herkunftszeile) bis 18 px (Hero). Eine feste Pixelbreite ergäbe je Schriftgröße eine andere Zeichenzahl. Gemessen am 10.09.2026: 1ch ist rund 1,35-mal so breit wie ein Durchschnittszeichen dieser Schrift – über alle vier verwendeten Größen hinweg gleich. 60ch sind damit rund 81 Zeichen je Zeile und liegen im Bereich, den Typografen als gut lesbar ansehen (65 bis 90). Vorher stand eine Begrenzung nur an .cx-hero-sub (660 px, 76 Zeichen); die übrigen Fließtexte liefen über die volle Breite – auf der Startseite 141 Zeichen je Zeile, bei den Merkmalslisten im Steckbrief bis 166. */ --cx-lesebreite: 60ch; /* Füllfarbe für Knöpfe mit WEISSER Schrift (seit 1.139.1). Nicht --cx-blue: Weiss darauf erreicht nur 4,16:1 und liegt damit unter der Schwelle von 4,5 für Text unter 18,66 px. Gerechnet, nicht geschätzt: weiss drauf gegen dunkel gegen hell --cx-blue 4,16 4,79 3,81 Text zu schwach #1a6fe0 4,78 4,17 4,38 gewählt --cx-blue-deep 6,65 2,99 6,10 Fläche zu schwach Ein Knopf muss beides können: lesbaren Text tragen UND sich vom Grund abheben – in hell wie dunkel. Deshalb der Wert dazwischen. */ --cx-blue-knopf: #1a6fe0; } html { /* Sprungziele nicht unter die Kopfzeile schieben: gilt für Anker, für scrollIntoView und für den Tastaturfokus gleichermaßen. Deshalb hier am Scrollbereich und nicht als scroll-margin an jedem einzelnen Ziel. */ scroll-padding-top: calc(var(--cx-kopf) + 16px); /* PLATZ FÜR DIE SCROLLLEISTE IMMER RESERVIEREN, auch wenn die Seite kurz genug ist, um ohne auszukommen. Sonst wird das Fenster in dem Moment um die Leistenbreite breiter – auf Windows rund 15 px – und alles Zentrierte rutscht um die Hälfte davon zur Seite. Beim Wechsel zwischen einer langen und einer kurzen Seite sprang die ganze Oberfläche deshalb seitlich hin und her. Auf Systemen mit überlagernden Leisten (macOS-Standard) ändert diese Zeile nichts, weil dort ohnehin keine Breite verlorengeht. */ scrollbar-gutter: stable; } main { max-width: 1200px; margin: 0 auto; padding: 0 24px 80px; } /* --- Kopfzeile: zwei Ebenen ---------------------------------------------- Oben die Marke mit Suche und Konto, darunter das Navigationsband. Vorher teilten sich Menü, Suche und Konto-Kachel eine Zeile; weil nur die Navigation schrumpfen durfte, wurde ab etwa 1.150 px immer die Suche abgeschnitten. Mit eigener Zeile kann das nicht mehr passieren – und die Leiste verträgt weitere Menüpunkte, ohne dass rechts etwas verlorengeht. SIE BLEIBT STEHEN. Der Grund ist nicht Bequemlichkeit, sondern ein sichtbarer Sprung: Beim Seitenwechsel setzt die Ansicht auf 0 zurück. Solange die Leiste mitscrollte, war sie im gescrollten Zustand ein Stück nach oben gewandert – wer aus der 24.000 px langen Herstellerliste heraus auf „Bereiche“ klickte, sah Logo und Menüband um bis zu 116 px wegrutschen. Fixiert stehen beide immer an derselben Stelle. Der Hintergrund muss dabei deckend sein, sonst läuft der Inhalt sichtbar durch die Leiste. */ .cx-header { display: block; position: sticky; top: 0; z-index: 50; background: var(--cx-carbon); } .cx-kopf-marke { border-bottom: 1px solid var(--cx-border); } .cx-kopf-navband { background: var(--cx-graphite); border-bottom: 1px solid var(--cx-border); } .cx-kopf-innen { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 20px; } .cx-kopf-marke .cx-kopf-innen { height: 66px; } .cx-kopf-navband .cx-kopf-innen { height: 48px; gap: 0; } /* Querfassung statt gestapelt: Bei 40 px Gesamthöhe wäre die Wortmarke im gestapelten Logo noch rund 7 px hoch – lesbar ist das nicht. */ .cx-logo { height: 40px; width: auto; display: block; } .cx-logo-link { flex: none; display: block; line-height: 0; } /* --- Suche: ein Feld, kein Knopf ------------------------------------------ Getippt wird trotzdem in der Palette – das hier ist ein