/* ============================================================================ teil-z9-baender.css — der Aufbau der Themen-Baender auf den Sammelseiten (/augenoptik/, /hoerakustik/). Text auf der einen Seite, Bild auf der anderen, abwechselnd, mittig in der Bahn. Christopher am 04.10.2026, Sprachnachricht: „Ich moechte bitte, dass du den Bereich Augenoptik ab 01 Brillenarten komplett neu aufbaust. Entweder Text links und Bild rechts und dann mittig zentrieren und ja, oder mit irgendwelchen Animationen. Bilder kommen von der Seite, Slide in Effects. Da muss sich auf jeden Fall was tun. So ist es nicht gut." GEMESSEN am 04.10.2026 auf /augenoptik/ bei 1850 px Fenster, vorher: #brillenarten 3841 px, 5 Baender — Bilder in Band 1 und 3 je zwei, Band 2 und 4 keines #kontaktlinsen 1099 px, 2 Baender, beide ohne Bild #lupen-und-lesegeraete 2080 px, 2 Baender Jedes Band stand untereinander: Ueberschrift, Text, Bilder darunter, alles linksbuendig in halber Spaltenbreite. ZUSTAENDIGKEIT. Diese Datei baut: Raster, Masse, Rahmen, Farben, Schriftgroessen. Sie fasst transform, opacity, transition, animation, will-change und filter NICHT an — das Hereinfliegen der Baender steht in teil-za-flug.css und wird dort gleichzeitig geschrieben. Auch der @media(prefers-reduced-motion)-Zweig gehoert dorthin; hier steht keiner, weil hier nichts zu beruhigen ist. NICHT ANGEFASST: .angebote / .angebot (teil-z7-angebote.css, von ihm am 03.10.2026 abgenommen). Die Vorlage biegt vor dieser Schleife ab — bv_plakatwand() erkennt den Angebots-Abschnitt am Anteil verlinkter Plakate, nicht am Ankernamen. Ein Karussell traegt nie .band2. functions.php bindet assets/css/teil-*.css alphabetisch nach seiten.css ein. „z9" sortiert hinter jede bestehende Datei; jede Regel hier gewinnt ueber die Ladereihenfolge. Die Datei enthaelt kein !important. ========================================================================= */ /* ── Masse der Baender ─────────────────────────────────────────────────── --lesespalte (36rem = 576 px) kommt aus teil-z8-leistung.css und ist dort gemessen: 72,8 Zeichen Nunito je Zeile. Die Textspalte bleibt genau diese Spalte, auch wenn jetzt ein Bild danebensteht — eine lesbare Zeile wird nicht laenger, nur weil die Seite breiter ist. --band-mass: zwei Lesespalten plus die Gasse dazwischen. Nachgemessen am 04.10.2026 im Browser bei 1850 px Fenster: .bahn ist min(1560, 100%) breit und innen um --gasse (dort am Anschlag von 56 px) eingerueckt, also 1448 px nutzbar. --band-gasse steht dort auf 62,9 px (3,4vw, noch unter dem Deckel von 4rem). Das Band misst damit 2 x 576 + 62,9 = 1215 px und steht mit je 116,5 px Luft links und rechts mittig in der Bahn — das ist sein „und dann mittig zentrieren". Gemessen tragen alle neun Baender des Abschnitts dieselbe linke Kante bei x = 310. Ab rund 1270 px Fenster greift min(100%, …) und das Band fuellt die Bahn. --band-rahmen: EIN Verhaeltnis fuer alle Baender, sonst springt die Seite von Band zu Band. Gemessen am 04.10.2026 an den Groessenangaben im Rohtext der drei eingebundenen Seiten: 981 x 650 = 1,509 (Sonnenbrillen, Kinderbrillen) 768 x 552 = 1,391 (Sportbrillen) 768 x 509 = 1,509 (Arbeitsplatzbrillen) 768 x 589 = 1,304 (Schwimmbrillen) 600 x 403 = 1,489 (Lupen) 1024 x 1024 = 1,000 (Produktfoto Eschenbach visolux) Mittel der sechs redaktionellen Fotos: 1,452. Das NEUE Material kommt nach Tools/web-agent/seitenbilder.py durchgehend als 1536 x 1024 = 1,500 und soll auf JEDEM Band stehen — der Rahmen folgt also dem Material, das kuenftig ueberall liegt, nicht dem Mittel der sechs alten. 3:2 = 1,500. Beschnitt mit object-fit:cover, gerechnet als 1 - r/1,5 (hohes Bild) bzw. 1 - 1,5/r (breites Bild): 1,500 -> 0,0 % 1,509 -> 0,6 % 1,489 -> 0,7 % 1,391 -> 7,3 % 1,304 -> 13,1 % 1,000 -> 33,3 % Bis 1,304 ist der Beschnitt vertretbar. Das quadratische Produktfoto bekommt darum .band2-bild-ganz (weiter unten) — gleicher Rahmen, andere Fuellart, damit nichts springt. --band-luft: der Schritt von Band zu Band. Vorher --block aus teil-z8-leistung.css, 38,4 px bis 1129 px Fenster und 59,2 px ab 1741 px. Ein Band war damals rund 190 px hoch (fuenf Zeilen Text), jetzt ist es so hoch wie sein Bild: 576 / 1,5 = 384 px bei 1850 px Fenster. Der Abstand waechst mit: 44,8 px bis 1385 px Fenster, dann steigend auf 80 px. -------------------------------------------------------------------- */ .leistung{ --band-gasse:clamp(1.8rem,3.4vw,4rem); --band-gasse-schmal:clamp(1.2rem,4vw,1.8rem); --band-mass:min(100%, calc(var(--lesespalte, 36rem) * 2 + var(--band-gasse))); --band-rahmen:3 / 2; --band-bild-luft:clamp(.6rem,1.4vw,1rem); --band-luft:clamp(2.8rem,5.2vw,5rem); --band-plattenpolster:clamp(1.5rem,3.2vw,2.5rem); } /* ── Das Band: zwei Spalten, mittig in der Bahn ────────────────────────── align-items:center ist sein „Text und Bild auf gleicher Hoehe mittig". Beide Spalten sind minmax(0,1fr) und nicht 1fr: ohne die Null nimmt ein Rasterkind die Breite seines laengsten Inhalts an (siehe bau.css Zeile 118-120), und eine lange Adresse im Text haette das Bild zerdrueckt. */ .leistung .band2{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--band-gasse); align-items:center; max-width:var(--band-mass); margin-inline:auto; } /* Der Abstand von Band zu Band. Geschlagen wird teil-z8-leistung.css Zeile 215 — gleiche Spezifitaet (0,3,0), spaetere Datei. */ .leistung .sammel-band + .sammel-band{ margin-top:var(--band-luft) } /* Ungerade Baender: Bild rechts (DOM-Reihenfolge). Gerade Baender: Bild links. Gedreht wird mit order, nicht mit direction oder row-reverse — die Vorlese-Reihenfolge bleibt dadurch Ueberschrift, Text, Bild, egal auf welcher Seite das Bild steht. */ .leistung .band2-text{ min-width:0 } .leistung .band2-gedreht > .band2-text{ order:2 } .leistung .band2-gedreht > .band2-bild{ order:1 } /* Netz: ein Band ohne Ueberschrift UND ohne Text (heute 0 von 9 gemessen) soll keine leere Spalte aufspannen. */ .leistung .band2-text:empty{ display:none } /* ── Die Bildspalte ────────────────────────────────────────────────────── Die
ist selbst ein Raster: bei zwei Bildern stehen sie damit untereinander, die Bildunterschrift immer als letzte Zeile. align-content:center haelt die Saeule in der Mitte ihrer Rasterzelle, wenn der Text einmal hoeher ist als das Bild. */ .leistung .band2-bild{ display:grid; gap:var(--band-bild-luft); align-content:center; margin:0; min-width:0; } /* Der Rahmen. Radius --r-l (30px) ist das Mass, das auf dieser Seite schon die Sprungleiste, .leistung-vorteil und .sammel-leitsatz tragen. Der Glasrand steht als erster Schatten (0 0 0 1px) und nicht als border: ein border wuerde zur Breite zaehlen und das Bild um 2 px aus seiner Spalte schieben. Der Grund darunter faengt den Fall ab, dass ein Bild nicht laedt — dann steht dort eine ruhige Flaeche, kein weisses Loch. */ .leistung .band2-bild img{ display:block; width:100%; aspect-ratio:var(--band-rahmen); object-fit:cover; border-radius:var(--r-l); background:var(--creme-2); box-shadow:0 0 0 1px var(--glas-rand), 0 18px 44px color-mix(in oklab, var(--blau) 13%, transparent), 0 3px 10px color-mix(in oklab, var(--blau) 6%, transparent); } /* Material, das deutlich hoeher ist als der Rahmen, wird hineingestellt statt beschnitten. Gesetzt wird die Klasse in vorlagen/leistung.php, wenn das schmalste Bild des Bandes unter 1,20 liegt — zwischen 1,000 (Eschenbach visolux, 1024x1024) und 1,304 (Schwimmbrillen) liegt kein einziges Bild, die Schwelle steht also in einer Luecke. Der Rahmen bleibt derselbe, nur die Fuellart wechselt: die Seite behaelt ihre Hoehen. Ein Produktfoto steht auf Weiss, nicht auf Creme — so sieht es aus wie ein Produktfoto und nicht wie ein Schnappschuss. */ .leistung .band2-bild-ganz img{ object-fit:contain; background:var(--weiss); padding:clamp(.7rem,1.6vw,1.2rem); } /* Zwei Bilder in einem Band. Gemessen am 04.10.2026 kommt das nach der Zuordnung in vorlagen/leistung.php auf /augenoptik/ nicht mehr vor (vorher 2 von 9 Baendern) — die Regel ist fuer den Tag, an dem ein Band wirklich zwei Motive traegt. Dann steht das Band so hoch wie zwei Rahmen; das ist der einzige Fall, in dem ein Band aus der Hoehe faellt, und er sieht gewollt aus, weil beide Bilder denselben Rahmen tragen. Der groessere Abstand trennt die beiden deutlich von ihrer Unterschrift. */ .leistung .band2-bild-zwei{ gap:clamp(.9rem,2vw,1.4rem) } /* Die Bildunterschrift. Auf /augenoptik/ gibt es genau eine: „Eschenbach visolux Digital HD, © Eschenbach Optik" — eine Urheberangabe, sie muss stehen bleiben. Masse wie die Unterschriften im Fliesstext (teil-leistung.css Zeile 217). */ .leistung .band2-bild figcaption{ margin:0; font-size:.86rem; color:var(--text-leise); } /* ── Ein Band ohne Bild ────────────────────────────────────────────────── Es darf nicht aussehen, als fehle etwas. Darum keine halbe Spalte, die neben einer Luecke steht, sondern eine eigene Form: eine ruhige Platte ueber die GANZE Bandbreite (dieselbe linke und rechte Kante wie die Baender mit Bild — ein Abschnitt mit zwei verschiedenen Kanten wirkt ausgefranst), und darin die Textspalte mittig im selben Mass wie ueberall sonst, 576 px. Gemessen tragen die betroffenen Baender 242 und 723 Zeichen; ueber die volle Bahn gesetzt waeren das 183 Zeichen je Zeile. Die Platte kehrt den Grund ihres Abschnitts um: .sammel-teil ist abwechselnd weiss und creme (teil-leistung.css Zeile 110). So ist die Platte auf beiden Gruenden sichtbar, ohne eine dritte Farbe einzufuehren. Die Haarlinie steht als Schatten und nicht als border, damit die Platte genau so breit bleibt wie die Baender darueber und darunter. */ .leistung .band2-ohne{ grid-template-columns:minmax(0,1fr); padding:var(--band-plattenpolster); border-radius:var(--r-l); background:var(--creme); box-shadow:0 0 0 1px var(--linie), var(--glas-schatten); } .leistung .sammel-teil:nth-of-type(even) .band2-ohne{ background:var(--weiss) } /* Ueberschrift und Text auf dieselbe mittige Spalte. Geschlagen werden teil-z8-leistung.css Zeile 207 und 172 — beide (0,2,0), hier (0,3,0). */ .leistung .band2-ohne .sammel-untertitel, .leistung .band2-ohne .sammel-text{ margin-inline:auto } /* ── Schmale Fenster ───────────────────────────────────────────────────── Haltepunkt 940 px, derselbe wie .buehne-raster in grund.css Zeile 184 — das ist die Stelle, an der dieses Haus ein Zweispalter zu einem Einspalter macht. Nachgemessen am 04.10.2026 bei 941 px: Band 851 px, Spalten je 409,4 px, also 51,8 Zeichen Nunito je Zeile (7,907 px je Zeichen, gemessen in teil-z8-leistung.css) — kurz, aber lesbar. Bei 940 px steht eine Spalte von 849,8 px. Darunter lohnen zwei nicht mehr. Auf dem Handy steht das Bild IMMER ueber dem Text, nie abwechselnd: auf einem schmalen Geraet sieht ein Wechsel aus wie ein Fehler, weil man die beiden Seiten nie nebeneinander sieht. order statt DOM-Umbau — die Vorlese-Reihenfolge bleibt Ueberschrift, Text, Bild. */ @media (max-width:940px){ .leistung .band2{ grid-template-columns:minmax(0,1fr); gap:var(--band-gasse-schmal); } .leistung .band2 > .band2-bild, .leistung .band2-gedreht > .band2-bild{ order:1 } .leistung .band2 > .band2-text, .leistung .band2-gedreht > .band2-text{ order:2 } } /* 430 px und darunter. Nachgemessen am 04.10.2026 bei 375 px: --gasse steht auf 16 px, .bahn ist innen 343 px breit, das Bild misst 343 x 229 px, die rechteste Kante der ganzen Bandreihe liegt bei 359 px — nichts scrollt quer (scrollWidth minus clientWidth: 0, auch bei 940 und 1850 px). Der grosse Radius wirkt auf dieser Breite wie ein abgerundetes Etikett; --r-m (22px) passt zum Mass der Flaeche. */ @media (max-width:430px){ .leistung .band2-bild img{ border-radius:var(--r-m) } .leistung .band2-ohne{ padding:clamp(1.1rem,4.5vw,1.5rem); border-radius:var(--r-m); } }