/* ============================================================================ teil-z4-buehne.css — die Bühne der Filialseiten. Gemessen 03.10.2026 auf /unsere-filialen/wiesbaden/ bei 1512 px, direkt nach der Bildreparatur: .fil-buehne-raster 504 px hoch, davon .fil-buehne-text 136 px (nur „Wiesbaden" als H1 und zwei Knöpfe), Lücke 70 px, .fil-foto 314 px. Über einer Überschrift mit zwei Knöpfen stehen also 70 px Nichts und erst dann das Bild — der Textblock hängt wie ein Rest über dem Panorama. Diese Datei heißt bewusst „teil-z4-…": functions.php bindet alle assets/css/teil-*.css alphabetisch nach seiten.css ein, sie läuft damit nach teil-filiale.css. Rang über Reihenfolge und Spezifität, keine Vorrangmarke (!important) in der ganzen Datei. NICHT ANGETASTET wird die Bildreparatur desselben Tages: Filialbilder sind Panoramen (Wiesbaden 4,64:1, Bad Brückenau 4,82:1, Hammelburg 4,15:1, Schweinfurt 3,45:1, Bayreuth 3,35:1). Die Vorlage setzt ab 2,4:1 die Klasse „band", dort läuft das Bild mit aspect-ratio:auto und height:auto in seinem eigenen Verhältnis. Hier steht deshalb nirgends aspect-ratio, height, width oder object-fit an .fil-foto oder .fil-foto img — weder im Band noch im hochformatigen Rahmen von Ramstein (1,82:1). Nur Token aus :root (grund.css). Die Alphawerte benutzen dieselben RGB-Werte, die grund.css und teil-filiale.css schon führen (19,55,109 = --blau, 255,255,255 = --weiss). Keine neue Farbe, keine neue Schrift, keine CDN-Einbindung. Es bewegt sich hier nichts — kein transform, keine transition, keine Animation. Darum gibt es auch nichts zu dämpfen, wenn jemand prefers-reduced-motion gesetzt hat. ========================================================================= */ /* ── 1. Die Lücke ─────────────────────────────────────────────────────── seiten.css setzt gap:clamp(1.6rem,4vw,3.4rem) für beide Achsen. Im Band ist das Raster einspaltig, der Wert wirkt also allein als Zeilenabstand und ergab oben die gemessenen 70 px zwischen Knopfreihe und Bildkante. Im zweispaltigen Fall (Ramstein) ist derselbe Wert der Spaltenabstand und richtig — deshalb nur .band. ---------------------------------------------------------------------- */ .fil-buehne-raster.band{ gap:clamp(1.1rem,2.2vw,1.8rem) } /* ── 2. Die Glasbank auf dem Panorama ─────────────────────────────────── Bei 4,64:1 ist das Bild bei 1512 px rund 314 px hoch und 1400 px breit. Ein eigener Textblock darüber kostet 136 + 70 px Höhe und füllt davon nichts. Titel und Knöpfe stehen deshalb unten links AUF dem Bild, auf einer Glasbank im Haus-Material (.glas in grund.css: heller Glasgrund, heller Rand, blauer Schatten). Warum hell und nicht ein dunkler Verlauf: die Knöpfe sind gebaut für hellen Grund (.knopf Gold auf #2A2113, .knopf.geist rgba(255,255,255,.7) mit blauer Schrift). Auf einem dunklen Verlauf müssten beide umgefärbt werden, und die Seite ist hell — das ist Christophers bestätigte Richtung. Lesbarkeit gerechnet, nicht geschätzt. Schlechtester Fall ist ein schwarzes Foto hinter der Bank: rgba(255,255,255,.82) über #000 ergibt #D1D1D1. Darauf --blau (#13376D) = 7,66:1, --text (#1F2A38) = 9,51:1. Über jedem helleren Foto wird der Wert größer. Die Forderung von 4,5:1 ist damit auf JEDEM Bild erfüllt, auch auf einem, das noch nicht hochgeladen ist. Zwei Fälle bleiben bewusst ausgenommen: :not(:has(img.filiallogo)) — das Optical-Center-Logo liegt nur auf /optical-wiesbaden/ und /ramstein/ im Textblock. Gemessen an assets/logo/optical-center.png: 31 % der deckenden Pixel sind dunkles Blau (#202060, #0040A0). Ein Logo gehört nie auf eine helle Platte über einem Foto — Christophers Regel, und teil-logo.css hält das Logo ausdrücklich flächenlos auf --grund. Diese Seiten behalten den gestapelten Aufbau. :not(:has(.fil-gruss)) — die Begrüßung ist in vorlagen/filiale.php „der Text vor der ersten Überschrift" und kann mehrere Absätze lang sein. Eine Bank mit drei Absätzen wäre höher als ein 314-px-Band und würde das Foto zudecken. Wo eine Begrüßung steht, hat der Textblock echten Inhalt und ist kein leerer Rest — dort bleibt es beim Stapel, nur mit der ruhigeren Lücke aus Block 1. Fällt :has() in einem Browser aus, ist der ganze Selektor ungültig und es bleibt beim heute reparierten Stapel. Kaputt geht dabei nichts. ---------------------------------------------------------------------- */ .fil-buehne-raster.band:not(:has(.fil-gruss)):not(:has(img.filiallogo)){ gap:0; /* Bank und Bild teilen sich eine Rasterzelle */ } /* Beide Kinder in dieselbe Zelle. Die Zeilenhöhe folgt dem Bild, weil es das höhere der beiden ist; die Bank sitzt mit align-self:end an seiner Unterkante. seiten.css hat align-items:center, das wird hier je Kind überschrieben statt am Raster — Ramstein soll zentriert bleiben. */ .fil-buehne-raster.band:not(:has(.fil-gruss)):not(:has(img.filiallogo)) > .fil-foto{ grid-area:1/1; align-self:start; z-index:1; } .fil-buehne-raster.band:not(:has(.fil-gruss)):not(:has(img.filiallogo)) > .fil-buehne-text{ grid-area:1/1; align-self:end; position:relative; z-index:2; /* Links andocken, nicht über die ganze Breite: bei 1400 px Bildbreite deckt die Bank so rund 60 % der Breite und 35 % der Höhe ab, der Laden bleibt rechts und oben frei. teil-filiale.css setzt hier max-width:64ch — das ist das Maß für eine Textspalte, nicht für eine Bank. */ max-width:min(100%,56rem); margin:0 auto clamp(14px,1.7vw,26px) clamp(14px,1.7vw,26px); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:clamp(.7rem,1.4vw,1.5rem); padding:clamp(1rem,1.5vw,1.45rem) clamp(1.15rem,1.8vw,1.7rem); border-radius:var(--r-m); background:rgba(255,255,255,.82); -webkit-backdrop-filter:blur(22px) saturate(1.6); backdrop-filter:blur(22px) saturate(1.6); border:1px solid var(--glas-rand); box-shadow:0 18px 44px rgba(19,55,109,.2); } /* Der Ortsname ist der Anker der Seite und steht jetzt auf dem Bild, nicht mehr in einer leeren Zeile darüber — er darf dafür größer werden. Gemessen: bisher clamp(2rem,3.6vw,3.1rem), bei 1512 px also 49,6 px; neu 56 px. Die 86,4 px, die Christopher am 03.10.2026 als „ein bisschen kleiner" zurückgewiesen hat, bleiben weit entfernt — die Regel dazu steht in seiten.css („filialseite-feinschliff") und gilt für den gestapelten Fall unverändert weiter. Schlägt .bv-typ-filiale .fil-buehne h1 (0,2,1) mit (0,5,2) — über Spezifität, nicht über !important. */ .fil-buehne-raster.band:not(:has(.fil-gruss)):not(:has(img.filiallogo)) > .fil-buehne-text h1{ margin:0; font-size:clamp(2.2rem,4vw,3.5rem); line-height:1.02; color:var(--blau); } /* seiten.css gibt .fil-buehne .knopfreihe margin-top:1.7rem — in der Bank stehen Titel und Knöpfe nebeneinander, dort ist der Abstand der gap. */ .fil-buehne-raster.band:not(:has(.fil-gruss)):not(:has(img.filiallogo)) > .fil-buehne-text .knopfreihe{ margin-top:0; flex:0 1 auto; } /* ── 3. Handy und Tablet: die Bank rutscht unter das Bild ─────────────── Hausbreakpoint 940 px, derselbe, an dem seiten.css das Raster einspaltig macht. Gerechnet: bei 940 px Fensterbreite bleiben nach --gasse rund 866 px Bild, bei 4,82:1 also 180 px Höhe. Eine Bank mit Titel und zwei Knöpfen misst rund 110 px — zusammen mit dem Rand bliebe vom Laden nichts übrig. Darunter steht sie deshalb unter dem Bild, mit einem kleinen Überlapp an der Unterkante, und das Foto kommt zuerst (order:-1). ---------------------------------------------------------------------- */ @media (max-width:940px){ .fil-buehne-raster.band:not(:has(.fil-gruss)):not(:has(img.filiallogo)) > .fil-foto{ grid-area:auto; order:-1; } .fil-buehne-raster.band:not(:has(.fil-gruss)):not(:has(img.filiallogo)) > .fil-buehne-text{ grid-area:auto; align-self:auto; order:0; max-width:none; margin:calc(-1 * clamp(18px,5vw,40px)) clamp(10px,3.2vw,30px) 0; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:0; } .fil-buehne-raster.band:not(:has(.fil-gruss)):not(:has(img.filiallogo)) > .fil-buehne-text h1{ margin:0 0 .85rem; } } /* ── 4. Ab 375 px ohne Querscrollen ───────────────────────────────────── Hausbreakpoint 430 px. Die seitlichen Ränder der Bank sind dort schon über clamp() bei 10–12 px; hier wird nur das Innenmaß kleiner. Gerechnet bei 375 px: 343 px Bahn, minus 2x12 px Rand, minus 2x16 px Innenmaß = 287 px für die Knopfreihe. Der breitere Knopf („Termin vereinbaren") misst rund 195 px und trägt white-space:nowrap — er passt in eine Zeile, die Reihe bricht darunter um (flex-wrap aus grund.css). Kein Querscrollen. ---------------------------------------------------------------------- */ @media (max-width:430px){ .fil-buehne-raster.band:not(:has(.fil-gruss)):not(:has(img.filiallogo)) > .fil-buehne-text{ padding:.95rem 1rem 1.05rem; border-radius:var(--r-s); } }