/* ============================================================================
teil-z8-leistung.css — Sprungleiste und Satzbild der Leistungsseiten
(/augenoptik/, /hoerakustik/ und die Einzelseiten dahinter).
Christopher am 03.10.2026, Sprachnachricht:
„Dann diese zweite Filterleiste, dann Brillenarten, Kontaktlinsen, Lupen,
die ist rechts und links begrenzt, die würde ich auch gern mit einem
Radius haben."
und davor: „der Text, das ist immer alle, muss alles noch überarbeitet
werden, ist so auf jeden Fall nicht gut."
Gemessen am 03.10.2026 an /augenoptik/ und /hoerakustik/: die Seiten wurden
von der laufenden Adresse geholt und mit den Stilblaettern dieses Ordners
(grund, bau, seiten, alle teil-*.css einschliesslich teil-z1 bis teil-z7)
oertlich gerechnet. Fenster 1850 px, Nunito von fonts.googleapis.com,
Chromium. Jede Zahl unten stammt aus diesem Lauf.
functions.php bindet assets/css/teil-*.css alphabetisch nach seiten.css ein.
„z8" sortiert hinter jede Datei, die beim Schreiben bestand — jede Regel hier
gewinnt ueber die Ladereihenfolge. Die Datei enthaelt kein !important.
Was hier NICHT angefasst wird, weil es anderen gehoert:
Textfarbe --text-leise, Hausmasse --flies teil-z1-lesbarkeit.css
Abschnittsabstaende, --luft-* teil-z2-rhythmus.css
Links, Tabellen, Listen,
teil-z5-inhalt.css
.angebote / .angebot (das Karussell) teil-z7-angebote.css
Umgekehrt uebergibt teil-z1-lesbarkeit.css .sammel-text und .leistung-text
ausdruecklich hierher („Die Typografie der Leistungsseiten gehoert dem
Agenten ,leiste'", gelesen 03.10.2026, 22 Uhr). Beide Gefaesse standen
danach als einzige im Haus noch auf dem geerbten body-Wert 17,00 px und
auf Zeilenhoehe 1.85 — die zwei Zeilen unten holen sie auf die Hausmasse.
Nur Token aus :root (grund.css), --flies aus teil-z1-lesbarkeit.css und
die Leiter aus teil-z2-rhythmus.css; jedes mit Ersatzwert, falls die Datei
einmal fehlt.
========================================================================= */
/* ── Masse dieser Seitenart ──────────────────────────────────────────────
--kopf-unten und --sprung-hoehe stehen in teil-leistung.css Zeile 30-33 und
werden vom Inline-Skript in vorlagen/leistung.php nachgemessen. Die vier
hier kommen dazu.
--lesespalte: der Fliesstext stand auf 68ch. Gemessen ist das bei
--flies 17,12 px genau 698,50 px, und ein Zeichen deutscher Fliesstext ist
in Nunito 7,907 px breit (Probe: 115 Zeichen = 909,34 px). 698,50 / 7,907
= 88,3 Zeichen je Zeile. Lesbar sind 60 bis 75. 36rem = 576 px sind
72,8 Zeichen. Der Wert steht in rem, nicht in ch, weil ihn auch
Ueberschriften benutzen: ch misst sich an der Schriftgroesse des Elements,
und 68ch trugen die Einstiegsueberschrift (30,4 px) auf 1240,3 px auf —
darum stand sie 271 px links von ihrem eigenen Text.
--absatz: genau eine Leerzeile. Zeilenschritt ist 29,45 px (weiter unten
auf 1.72 gesetzt, nachdem teil-z1 die zwei Gefaesse uebergeben hat), der
Absatzabstand stand auf 1.2em = 20,54 px. Zeile gegen Absatz war damit
29,45 zu 49,99 px, also Faktor 1,70 — zu wenig, um einen echten Absatz von
einem harten
-Umbruch zu unterscheiden (siehe unten). 1.72em = 29,45 px
macht daraus 29,45 zu 58,90 px, Faktor 2,00.
--block: der Schritt zwischen zwei Baendern und unter dem Abschnittskopf.
38,4 px bis 1129 px Fenster, dann steigend auf 59,2 px ab 1741 px. Am
Schreibtisch ist das der doppelte Absatzschritt (59,2 gegen 29,45 px), auf
dem Telefon das 1,37fache (38,4 gegen 28,1 px) — dort ist der Platz
knapper, und die Ueberschrift dazwischen traegt den Unterschied mit.
--sprung-luft: Abstand der Sprungleiste zur Kopfpille, wenn sie klebt. */
.leistung{
--lesespalte:36rem;
--absatz:1.72em;
--block:clamp(2.4rem,3.4vw,3.7rem);
--sprung-luft:clamp(8px,1.1vw,14px);
/* Die Leiste soll genau unter der Kopfpille stehen. .kopf-innen (grund.css
Zeile 116) ist min(--breite,100%) breit und sitzt --gasse vom Fensterrand.
Die Leiste steckt aber im Seitenblatt, und das ist seinerseits
clamp(10px,1.1vw,18px) vom Fensterrand eingerueckt (bau.css Zeile 153).
Die Differenz ist dieser Rand. Gemessen 03.10.2026: Kopfpille x=137,5 /
1560 breit, Leiste danach x=137,5 / 1560 breit — deckungsgleich bei
1850, 1000 und 375 px Fenster.
Aendert jemand die Polsterung in bau.css Zeile 153, gehoert die Zahl
hier mitgeaendert; ein Spiegelwert laesst sich in CSS nicht lesen. */
--sprung-rand:calc(var(--gasse) - clamp(10px,1.1vw,18px));
}
/* ── a) Die Sprungleiste schwebt, statt die Seite zu zerschneiden ─────────
Gemessen vorher: .leistung-sprung 1799 px breit bei x=18, also genau so
breit wie das Seitenblatt — Kante zu Kante, border-radius 0px, darunter
eine Haarlinie ueber die volle Breite. Das Seitenblatt darueber und
darunter hat runde Ecken. Genau das stoert ihn.
Nachher: 1560 px bei x=137,5 (1850 px Fenster), 905 px bei x=40 (1000 px),
343 px bei x=16 (375 px) — in allen drei Faellen dieselben Kanten wie die
Kopfleiste darueber.
Die Haarlinie unten faellt weg und wird nicht ersetzt, sondern umgebaut:
eine Linie nur an der Unterkante folgt der Rundung und endet in der Luft.
Ein schwebender Koerper braucht seinen Rand rundum. Rand und Schatten sind
dieselben, die die Kopfpille traegt — --glas-rand und --glas-schatten;
damit sehen die beiden Leisten uebereinander gleich aus.
Radius: --r-l (30px). Dasselbe Mass tragen .leistung-vorteil und
.sammel-leitsatz auf derselben Seite, und das Seitenblatt kommt bei 1850 px
auf denselben Wert (clamp(18px,2.2vw,30px)) — die Leiste bekommt also
dieselbe Ecke wie die Kachel, in der sie liegt. Kein --r-rund: das waere
bei 57,5 px Hoehe fast dasselbe, kippte aber zur Kapsel, sobald eine
Sammelseite mit mehr Chips die Leiste einmal hoeher werden laesst.
Kein overflow, kein transform, kein will-change: position:sticky bleibt
unveraendert, und ein eigener Stapelkontext ueber transform nimmt dem
backdrop-filter in WebKit seinen Untergrund. Die Breite steht fest im
Fluss, sticky rechnet nicht um — beim Kleben bewegt sich deshalb nichts.
---------------------------------------------------------------------- */
.leistung-sammel .leistung-sprung{
width:min(var(--breite), 100% - 2 * var(--sprung-rand));
margin-inline:auto;
top:calc(var(--kopf-unten) + var(--sprung-luft));
border:1px solid var(--glas-rand);
border-radius:var(--r-l);
box-shadow:var(--glas-schatten);
padding-block:0; /* wandert in die Reihe, siehe unten */
}
/* Die Chips sassen auf der Polsterung der Inhaltsbahn — 56 px bei 1850 px
Fenster, gemessen. In einer 57 px hohen Pille ist das kein Satzspiegel
mehr, sondern ein Loch. Die Kopfpille polstert links 1,25rem; dieselbe
Groessenordnung.
Eine Zeile, immer. teil-leistung.css Zeile 258 schaltet die Reihe erst ab
860 px auf waagerechtes Scrollen; darueber bricht sie um. Gemessen am
03.10.2026 auf /hoerakustik/ (fuenf Chips, zusammen 868 px breit):
bei 900 px Fenster zwei Zeilen und eine 104,1 px hohe Leiste, bei 1000 px
eine Zeile und 57,5 px. Eine klebende Leiste, die je nach Fensterbreite
ihre Hoehe verdoppelt, ist nicht nur zu gross — sie verschiebt ueber
--sprung-hoehe auch jedes Sprungziel. Darum laeuft die Reihe jetzt bei
jeder Breite in einer Zeile und scrollt in sich selbst, sobald sie nicht
mehr passt. Nachgemessen bei 900 px: 57,5 px statt 104,1 px.
Die senkrechte Polsterung wandert dabei von der Leiste in die Reihe: ein
Scrollbehaelter schneidet an seiner Polsterkante ab, und ohne diese
8 px saesse der Schlagschatten des Standort-Chips direkt auf der Kante.
Ganz unbeschnitten geht er nicht — overflow-x:auto zwingt overflow-y auf
denselben Wert. Auf dem Telefon war das ohnehin schon so. */
.leistung-sammel .leistung-sprung .sammel-wege{
padding-inline:clamp(.75rem,.9vw,1rem);
padding-block:.5rem;
flex-wrap:nowrap;
overflow-x:auto;
overscroll-behavior-x:contain;
scrollbar-width:none;
border-radius:var(--r-l);
}
.leistung-sammel .leistung-sprung .sammel-wege::-webkit-scrollbar{ display:none }
/* Die Sprungmarke muss um dieselbe Luft tiefer zielen, um die die Leiste
tiefer klebt — sonst verschwindet die Abschnittsueberschrift beim Klick
unter der Leiste. Ersetzt teil-leistung.css Zeile 108 (gleiche
Spezifitaet, spaetere Datei). */
.leistung .sammel-teil{
scroll-margin-top:calc(var(--kopf-unten) + var(--sprung-luft)
+ var(--sprung-hoehe) + 14px);
}
/* ── b) Satzbild: eine Spalte, ein Absatzschritt, eine Kante ──────────────
Zeilenlaenge. 698,50 px waren 88,3 Zeichen (Rechnung oben). 576 px sind
72,8. teil-z1-lesbarkeit.css hat den Wert ausdruecklich stehen lassen,
weil sich die Vorschubbreite von Nunito dort nicht messen liess — sie ist
jetzt gemessen, darum die Aenderung. Sie gilt nur auf dieser Seitenart;
.fil-text, .recht-text und die uebrigen Spalten bleiben unberuehrt.
---------------------------------------------------------------------- */
.leistung .sammel-text,
.leistung .leistung-text{ max-width:var(--lesespalte) }
/* Hausgroesse und Hauszeilenhoehe. Gemessen 03.10.2026, 22 Uhr, nachdem
teil-z1-lesbarkeit.css diese zwei Gefaesse aus seinen Listen genommen und
hierher uebergeben hat: Schrift 17,00 px (geerbt vom body) gegen 17,12 px
ueberall sonst, Zeilenhoehe 1.85 = 31,45 px gegen 1.72 = 29,45 px
ueberall sonst. Damit waren die Leistungsseiten die einzigen, die aus der
Reihe fielen. Geschlagen wird teil-leistung.css Zeile 187-189 und
seiten.css Zeile 486-488, beide (0,2,1) — dieselbe Spezifitaet, spaetere
Datei. Der Ersatzwert ist der Wortlaut aus teil-z1-lesbarkeit.css. */
.leistung .sammel-text,
.leistung .leistung-text{ font-size:var(--flies, clamp(1rem,.3vw + .95rem,1.07rem)) }
.leistung .sammel-text :is(p,ul,ol,li),
.leistung .leistung-text :is(p,ul,ol,li){ line-height:1.72 }
/* Absatzschritt: 1,72em = 29,45 px, also genau eine Leerzeile.
Warum das hier zaehlt: der uebernommene Text traegt 18 harte Umbrueche auf
/augenoptik/ und 24 auf /hoerakustik/ (gezaehlt im Quelltext der laufenden
Seiten, 03.10.2026). Jeder davon sieht aus wie ein Absatz. Wenn der echte
Absatz doppelt so weit steht wie eine Zeile, sieht man den Unterschied —
bei Faktor 1,70 sah man ihn nicht, und der Text las sich wie ein Gedicht.
Die Umbrueche selbst bleiben stehen; warum, steht weiter unten. */
.leistung .sammel-text p,
.leistung .leistung-text p{ margin:0 0 var(--absatz) }
.leistung .sammel-text :is(ul,ol),
.leistung .leistung-text :is(ul,ol){ margin:0 0 var(--absatz) }
/* Zwischenueberschrift und ihr erster Satz. Vorher: Ueberschrift 888 px
breit (68ch bei 21,76 px), Text darunter 698,5 px — zwei verschiedene
rechte Kanten uebereinander. Jetzt dieselbe Spalte.
Der Abstand nach unten bleibt klein (.45em = 9,8 px): die Ueberschrift
gehoert zu dem, was unter ihr steht, nicht zu dem, was ueber ihr steht.
Nachgemessen bei 1440 px Fenster — Aussenabstand Ueberschrift zu erstem
Absatz 9,8 px, Absatz zu Absatz 29,4 px, Band zu Band 49,0 px. Die
Reihenfolge stimmt damit: enger zum eigenen Text als zum naechsten. */
.leistung .sammel-untertitel{
max-width:var(--lesespalte);
margin:0 0 .45em;
}
/* Band zu Band und Kopf zu Inhalt auf denselben Schritt. Vorher 41,6 px
(Band) und 36,8 px (Kopf) — der Sprung in ein neues Thema war kleiner als
der in den naechsten Absatz desselben Themas werden sollte. */
.leistung .sammel-band + .sammel-band{ margin-top:var(--block) }
.leistung .sammel-kopf{ margin-bottom:var(--block) }
/* Der Abschnittskopf. Die Ueberschrift fuellte ihre Rasterspalte mit
1389,8 px aus; der laengste Titel auf beiden Sammelseiten misst 639 px
(„Aktuelle Angebote Augenoptik", 43,2 px). Der Deckel bei 1,2 Spalten
(691 px) laesst jeden heutigen Titel einzeilig und faengt einen kuenftigen
langen ab, statt ihn ueber die halbe Seite laufen zu lassen. */
.leistung .sammel-kopf h2{ max-width:calc(var(--lesespalte) * 1.2) }
/* Der Leitsatz steht heute auf keiner der beiden Sammelseiten (gezaehlt:
0 von 0 am 03.10.2026) — bv_heben() findet nur zwischen 45 und 280 Zeichen
einen. Falls er auftaucht, soll seine Textspalte dieselbe sein wie der
Rest: Kachelbreite = Spalte plus die eigene Polsterung links und rechts. */
.leistung .sammel-leitsatz{
max-width:calc(var(--lesespalte) + clamp(1.5rem,3.6vw,2.3rem)
+ clamp(1.2rem,3vw,1.9rem));
margin-bottom:var(--block);
}
/* Der Einstieg der Sammelseite. Gemessen vorher: die Ueberschrift begann bei
x=297,3 und war 1240,3 px breit, ihr eigener Text begann bei x=568,3 —
271 px weiter rechts als die Zeile darueber, zu der er gehoert. Ursache ist
--mass in ch: dieselben 68ch sind bei 30,4 px Ueberschrift doppelt so breit
wie bei 17,12 px Fliesstext. Mit --lesespalte in rem stehen beide auf
derselben Kante (nachgemessen bei 1850 px: x=629,5 und 576 px breit, beide).
margin:0 auto aus teil-leistung.css Zeile 57 bleibt stehen, hier wird nur
der Abstand nach unten gesetzt. */
.leistung-sammel .leistung-einstieg-titel{
max-width:var(--lesespalte);
margin-bottom:.42em;
}
/* ── Die harten
-Umbrueche: gemessen, nicht angefasst ────────────────
18 Stueck auf /augenoptik/, 24 auf /hoerakustik/. teil-z5-inhalt.css faengt
davon zwei Faelle ab: drei und mehr hintereinander, und einen am Absatzende.
Uebrig bleibt der einzelne Umbruch mitten im Absatz, und der ist der, der
den Text wie ein Gedicht aussehen laesst.
Drei Wege sind am 03.10.2026 in Chromium gemessen worden, an einem Absatz,
der ohne Umbruch einzeilig ist:
br{ content:" " } 58,9 px — wirkungslos
br{ display:block; height:.6em } 58,9 px — wirkungslos
br{ display:none } 29,4 px — wirkt
Nur display:none wirkt, und der Preis steht fest: 11 der 18 Umbrueche auf
/augenoptik/ haben kein Leerzeichen neben sich. Mit display:none angewandt
und nachgezaehlt ergab das 10 zusammengezogene Wortpaare in 9 Absaetzen —
„Augenoptik:Von", „Zwischenbereich.Sie", „Begriff.Bei" und so fort. CSS
kann einen Umbruch loeschen, aber kein Leerzeichen dafuer einsetzen.
Darum steht hier keine Regel auf br. Das Ersetzen der Umbrueche durch ein
Leerzeichen gehoert in den Inhalt, nicht in das Stilblatt.
Ebenfalls gemessen und darum NICHT eingebaut: hyphens:auto auf den
Textspalten. Mittlerer Fuellgrad der Zeilen 0,735 vorher gegen 0,737
nachher, 83 Zeilen in beiden Faellen, 26 gegen 27 Zeilen unter 60 Prozent
Fuellung. Der rechte Rand wird davon nicht ruhiger, also kommt es weg.
---------------------------------------------------------------------- */
/* ── Schmale Fenster ─────────────────────────────────────────────────────
Gemessen bei 375 px: Leiste 343 px breit bei x=16 — dieselben Kanten wie
die Kopfpille (343 bei x=16). Dokument- und Rumpfbreite 375 px, also kein
Querscrollen. Die Chip-Reihe misst dort 681 px auf /augenoptik/ und 868 px
auf /hoerakustik/ und scrollt in sich; der letzte Chip steht am Ende 13 px
vor der Leistenkante, die Polsterung geht im Scrollbehaelter also nicht
verloren. Geklebt steht die Leiste bei top 77 px unter einer Kopfleiste,
die bei 68,5 px endet.
---------------------------------------------------------------------- */
/* Unter 430 px ist die Spalte ohnehin schmaler als --lesespalte; der Deckel
darf dort nichts mehr tun, damit kein Rest Fensterbreite verschenkt wird. */
@media (max-width:430px){
.leistung .sammel-text,
.leistung .leistung-text,
.leistung .sammel-untertitel,
.leistung-sammel .leistung-einstieg-titel{ max-width:none }
}
/* ── Bewegung ────────────────────────────────────────────────────────────
Diese Datei bewegt nichts: sie setzt Breiten, Abstaende, einen Rand, einen
Radius und einen Schatten. Es gibt deshalb nichts, was unter
prefers-reduced-motion abzuschalten waere. Die Ruhe-Regeln in bau.css
Zeile 85-89, grund.css Zeile 41 und teil-leistung.css Zeile 278-281
bleiben unveraendert gueltig.
---------------------------------------------------------------------- */