/* ═══════════════════════════════════════════════════════════════════════════ folien.css — das Content-Anker-System der Augenoptik-Seite (nur mit ?bv-folien=1) ─────────────────────────────────────────────────────────────────────────── Christopher, 26.10.2026 16:57 (ganz in Company/Web/Augenoptik-Umbau.md, Zeile 8): jeder Abschnitt eine Seite, die einrastet; über dem Sprungmenü eine Überschrift; „bei Meta AI Smart Glasses das Titelbild verkleinern, dass alles auf eine Seite passt"; am Ende eine Seite mit Termin buchen · nächste Filiale · zur Startseite; der Fuß nie verdeckt. Geladen von vorlagen/teil-folien.php als im Inhalt, nur mit dem Schalter — darum ist jede Regel hier entweder eine eigene Klasse (folie-…) oder hängt an .bv-folien (die Klasse trägt der Artikel nur mit dem Schalter). Ohne Schalter wirkt nichts davon, auch nicht auf /hoerakustik/ (dieselben meta-… Klassen bei Nuance Audio). Das Auffüllen kurzer Seiten auf Fensterhöhe macht folien.js (es misst Anker und Ende jedes Abschnitts); hier steht nur die Gestaltung. ═══════════════════════════════════════════════════════════════════════════ */ /* Gerastet wird nur von folien.js. Ein Lauf, der nicht ins Fenster passt, läuft wie ohne Schalter (lauf.js, data-lf-lang) mit seinen Rastpunkten — ohne das Einrasten von lauf.js zog dort das native Rasten (teil-zzzzzz-lauf.css) jede Seite nach (gemessen 26.10.2026 bei 390 × 664: Anker der Gläser 2070, gestanden bei 2135). */ html:has(.bv-folien .lf-an .lf-rast):not(.lf-js-rasten){ scroll-snap-type:none; } /* ── Einstieg: Überschrift über dem Sprungmenü ───────────────────────────── Steht vor .leistung-sprung, nicht darin — sonst klebte sie mit der Leiste oben mit. */ .folie-wege{ margin-top:clamp(1.6rem,3.5vw,2.8rem); padding-inline:var(--gasse); text-align:center; } .folie-wege-titel{ margin:0; font-size:clamp(1.3rem,2.1vw,1.7rem); line-height:1.15; letter-spacing:-.012em; color:var(--blau); } .folie-wege-satz{ max-width:64ch; margin:.45rem auto 0; font-size:clamp(.95rem,1.1vw,1.06rem); line-height:1.55; color:var(--text-leise); text-wrap:balance; } /* Die Leiste gehört jetzt zur Überschrift — der große Abstand davor (48 px bei 1440) stand zwischen beiden. */ .bv-folien .folie-wege + .leistung-sprung{ margin-top:clamp(.7rem,1.4vw,1.1rem) } /* Mit dem Intro (?bv-intro=1) beginnt der Lauf mit der Überschrift statt mit der Leiste; intro-augenoptik.css gibt der Leiste als erstem Kind diesen Abstand (Zeile 194) — er gilt jetzt für die Überschrift. */ .leistung-sammel .ao-intro + .leistung-lauf > .folie-wege:first-child{ margin-top:clamp(.75rem,2vw,1.5rem) } /* Läuft die Überschrift unter die klebende Leiste, blendet sie aus — sonst stand ihre letzte Zeile am Anker der Brillenarten zwischen Kopfpille und Leiste (gemessen 26.10.2026 bei 1440×900, y 70–95). Grenze = Unterkante der klebenden Leiste. Ohne Unterstützung (Firefox) bleibt sie einfach stehen. */ @supports (animation-timeline: view()){ @media (prefers-reduced-motion: no-preference){ .bv-folien .folie-wege{ animation:folie-wege-weg linear both; animation-timeline:view(block calc(var(--kopf-unten, 86px) + var(--sprung-luft, 14px) + var(--sprung-hoehe, 53px)) 0px); animation-range:exit 0% exit 100%; } } } @keyframes folie-wege-weg{ to{ opacity:0 } } /* ── 05 Smart Glasses: zwei Seiten ───────────────────────────────────────── Seite 1: Kopf, Leitsatz, Titelbild, vier Kacheln. Seite 2: Karussell, fünf Fakten, „Beraten lassen". Gemessen 26.10.2026 bei 1440×900 vorher: Titelbild 1281×642, Seite 1 also 1196 px Inhalt bei 733 px Platz unter den Leisten. Darum steht das Bild ab 1100 px neben Kopf und Leitsatz und ist nur so hoch wie die beiden. */ .bv-folien .meta-teil{ padding-block:clamp(1.75rem,3.2vw,3rem) } /* Der Abstand darunter fiel durch das Ende des Laufs hindurch (43 px zwischen Lauf und Abschluss-Seite) — die Abschluss-Seite bringt ihren eigenen mit */ .bv-folien .meta-teil:last-child{ margin-bottom:0 } /* Seite 2 rastet an der Oberkante des Karussells — mit derselben Luft unter der Leiste wie jeder Abschnitt */ .bv-folien .meta-teil .lv-dunkel{ scroll-margin-top:calc(var(--kopf-unten) + var(--sprung-luft) + var(--sprung-hoehe) + 14px); } /* Seite 1 und 2 liegen dicht beieinander: am Rastpunkt von Seite 2 standen die vier Kacheln angeschnitten hinter Kopfpille und Leiste, ihre Titel über der Pille (gemessen 26.10.2026 bei 1440×900). Darum blenden sie aus, wenn sie unter die Leiste laufen — wie die Überschrift über dem Menü. Die Zeitleiste hängt an der Kachel, die Deckkraft an ihren Kindern: die Kachel selbst blendet mit ihrer eigenen Deckkraft ein (teil-zt-meta.css). */ @supports (animation-timeline: view()){ @media (prefers-reduced-motion: no-preference){ .bv-folien .meta-teil .meta-kachel{ view-timeline:--folie-kachel block; view-timeline-inset:calc(var(--kopf-unten, 86px) + var(--sprung-luft, 14px) + var(--sprung-hoehe, 53px)) 0px; } .bv-folien .meta-teil .meta-kachel > *{ animation:folie-wege-weg linear both; animation-timeline:--folie-kachel; animation-range:exit 0% exit 100%; } } } @media (min-width:1100px){ .bv-folien .meta-teil > .bahn{ display:grid; grid-template-columns:minmax(0,1fr) var(--folie-bild, min(42vw, 600px)); column-gap:clamp(1.6rem,3vw,3rem); align-items:start; /* das Bild höchstens so breit, dass es bei niedrigem Fenster nicht über Seite 1 hinausträgt */ --folie-bild:min(42vw, 600px, max(380px, calc((100svh - 560px) * 2))); } .bv-folien .meta-teil > .bahn > *{ grid-column:1 / -1 } .bv-folien .meta-teil .meta-kopf{ grid-column:1; grid-row:1 } .bv-folien .meta-teil .meta-leitsatz{ grid-column:1; grid-row:2; margin-bottom:0 } .bv-folien .meta-teil .meta-gross{ grid-column:2; grid-row:1 / span 2; align-self:center; margin:0; aspect-ratio:2 / 1; } .bv-folien .meta-teil .meta-gross img{ height:100%; object-fit:cover } .bv-folien .meta-teil .meta-kacheln{ margin-top:clamp(1.4rem,2.4vw,2.2rem) } /* fünf Fakten in einer Reihe statt 4 + 1 (auto-fit mit 268 px brach bei 1281 px Bahn auf zwei Zeilen um) */ .bv-folien .meta-teil .meta-fakten{ grid-template-columns:repeat(5, minmax(0,1fr)) } } /* Seite 2: das Karussell so hoch, dass Fakten und Knopf darunter noch auf die Seite passen */ .bv-folien .meta-teil .lv-dunkel{ --lv-hoehe:clamp(200px, calc(100svh - 620px), 310px) } @media (max-width:1099px){ .bv-folien .meta-teil .lv-dunkel{ --lv-hoehe:clamp(200px, 40vw, 300px) } } /* ── Die Abschluss-Seite ─────────────────────────────────────────────────── Ersetzt mit dem Schalter den Aufruf mit den zwei Knöpfen. Steht nach dem Lauf, also ohne klebende Leiste darüber. Sie rastet an ihrer eigenen Oberkante; den Platz für die Kopfpille bringt sie oben selbst mit — so steht hinter der Pille ihr eigener Grund und weder die auslaufende Leiste noch das Ende der Smart Glasses (gemessen 26.10.2026 bei 1440×900: 6 px Leiste unter der Pille, der Knopf „Beraten lassen" darüber). Die Karte selbst wächst auf Seitenhöhe (folien.js); die Wege zurück stehen unter ihr, mit wenig Rand darunter — so stehen sie im letzten Schritt direkt über dem Fuß (in der Karte lagen sie dort hinter der Kopfpille, gemessen y 9–96). */ .folie-schluss{ position:relative; padding-block:calc(var(--kopf-unten, 86px) + clamp(1.5rem,3vw,2.5rem)) clamp(1rem,2vw,1.5rem); } .folie-schluss-innen{ max-width:1120px; margin-inline:auto; padding:clamp(2rem,4.5vw,4rem) clamp(1.2rem,4vw,3.5rem); border-radius:var(--r-xl); background: radial-gradient(110% 80% at 85% 0%, var(--blau-zart) 0%, rgba(232,238,247,0) 60%), var(--grund); border:1px solid var(--linie); text-align:center; } .folie-schluss-titel{ margin:0 0 .8rem; font-size:clamp(1.7rem,3.2vw,2.6rem); line-height:1.08; letter-spacing:-.022em; color:var(--blau); text-wrap:balance; } .folie-schluss-text{ max-width:60ch; margin:0 auto clamp(1.6rem,3vw,2.6rem); font-size:clamp(1rem,1.25vw,1.15rem); line-height:1.6; color:var(--text-leise); text-wrap:pretty; } .folie-schluss-kacheln{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(.8rem,1.5vw,1.2rem); text-align:left; } @media (max-width:820px){ .folie-schluss-kacheln{ grid-template-columns:minmax(0,1fr) } } .folie-kachel{ display:flex; align-items:center; gap:1rem; padding:clamp(1rem,1.6vw,1.35rem); border-radius:var(--r-l); background:var(--weiss); border:1px solid var(--linie); box-shadow:var(--glas-schatten); color:var(--text); text-decoration:none; transition:transform .35s var(--weich), box-shadow .35s var(--weich), border-color .35s; } .folie-kachel:hover{ transform:translateY(-3px); border-color:var(--gold); box-shadow:0 18px 40px rgba(19,55,109,.12); } .folie-kachel:focus-visible{ outline:2px solid var(--blau); outline-offset:3px } .folie-kachel-zeichen{ flex:none; display:grid; place-items:center; width:56px; height:56px; border-radius:18px; background:var(--blau-zart); color:var(--blau); } /* Termin buchen ist der Hauptweg — dieselbe Goldfarbe wie der Knopf „Termin buchen" oben in der Kopfpille */ .folie-kachel-termin .folie-kachel-zeichen{ background:var(--gold); color:#2A2113 } .folie-kachel-text{ display:grid; gap:.15rem; min-width:0 } .folie-kachel-text strong{ font-size:1.05rem; color:var(--blau) } .folie-kachel-text span{ font-size:.9rem; line-height:1.45; color:var(--text-leise) } .folie-kachel-pfeil{ margin-left:auto; font-size:1.2rem; color:var(--gold-tief); transition:transform .35s var(--weich); } .folie-kachel:hover .folie-kachel-pfeil{ transform:translateX(4px) } .folie-schluss-wege{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.5rem .55rem; margin-top:clamp(1rem,2.2vw,1.75rem); padding-inline:var(--gasse); } .folie-nach-oben{ padding:.5em 1.05em; border-radius:var(--r-rund); background:var(--blau); color:#fff; font-size:.87rem; font-weight:800; text-decoration:none; transition:transform .25s var(--weich), box-shadow .25s var(--weich); } .folie-nach-oben:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(19,55,109,.25) } .folie-schluss-wege-wort{ font-size:.9rem; color:var(--text-leise) } .folie-schluss-wege .chip{ text-decoration:none } @media (prefers-reduced-motion: reduce){ .folie-kachel, .folie-kachel-pfeil, .folie-nach-oben{ transition:none } .folie-kachel:hover, .folie-nach-oben:hover{ transform:none } .folie-kachel:hover .folie-kachel-pfeil{ transform:none } } /* ── 04 Angebote und 05 Smart Glasses: Höhe aus der Seitenhöhe ───────────── Christopher, 08.11.2026 18:03 (nach den Brillenarten-Kacheln): „Im Anschluss bitte 04 und 05 ebenfalls automatische Höhe ggf. in Abhängigkeit der Seitenhöhe." Dazu sein Wort vom 26.10.2026: „04, wieder die Höhe auf vollgestreckt, die Angebote … 05 … dass auch alles auf die Seite passt." Gemessen 08.11.2026 an der Live-Seite, 1440×900: eine Seite ist 736 px hoch (Fenster minus Kopfpille 84, Luft 14, Leiste 52, Rand 14 — so misst folien-nativ.js den Anker). 04 war 1017 px hoch (Polster 80 + Kopf 99 + Block 49 + Spur 672 + Punkte 37 + Polster 80), die Kachel fest 415 px breit aus der Dreier-Spalte — bei 1440×1200 dieselben 415 px, der Rest leer. 05 Seite 2: Bühne fest 310 px (Deckel), Fassung höchstens 400 px breit → 400×186 in einer 280-px-Bühne; bei 1200 px Fensterhöhe 290 px frei. 05 Seite 1: Titelbild bei 600 px gedeckelt, bei 1440×1200 etwa 390 px frei. Darum rechnet die Kachel ihre Höhe aus der Seite: Seite minus allem, was sonst noch auf ihr steht, Polster und Block dafür kleiner. Die Breite folgt aus dem Plakatformat 723:1024. Untergrenze bleiben die 256 px aus teil-z7-angebote.css (bei 1280×720 reicht die Seite nicht; dann steht die Kachel über, wie bisher — nur 250 px weniger). Obergrenze 640 px. Unter 940 px Fenster bleibt alles beim Alten (Breite statt Höhe, wie am Telefon). Smart Glasses: Bühne und Fassung wachsen mit der Seite (Deckel 640 statt 310; Fassung so breit, wie die Bühne hoch ist, 1100:512), das Titelbild bis 48 vw / 820 px, aber nur, wenn die Seitenhöhe es hergibt. Bei 1440×900 ändert sich an 05 nur die Fassung (602×280 statt 400×186); Seite 1 bleibt gleich. Gilt nur mit .bv-folien, also nicht auf /hoerakustik/ (dort ist keine Seite eine Seite). */ .bv-folien{ --folie-seite:calc(100svh - var(--kopf-unten, 84px) - var(--sprung-luft, 14px) - var(--sprung-hoehe, 52px) - 14px); } @media (min-width:941px){ .bv-folien .sammel-teil:has(> .bahn > .angebote){ --folie-polster:clamp(1.6rem, 2.6vw, 2.5rem); --folie-block:clamp(1.1rem, 1.6vw, 1.75rem); padding-block:var(--folie-polster); } .bv-folien .sammel-teil:has(> .bahn > .angebote) .sammel-kopf{ margin-bottom:var(--folie-block) } .bv-folien .sammel-teil .angebote{ /* Kopf 99 + Spurpolster 24 + Fuß 84 (Titel zweizeilig, gemessen 08.11.2026 bei 291 px Kachel; einzeilig sind es 61, die 23 px füllt folien-nativ.js als Polster auf) + Punkte 37 — feste Summe, weil CSS die Geschwister nicht messen kann */ --angebot-hoch:calc(var(--folie-seite) - 2 * var(--folie-polster) - var(--folie-block) - 99px - 24px - 84px - 37px); --angebot-breite:clamp(256px, var(--angebot-hoch) * 723 / 1024, min(640px, 100% - 2 * var(--angebot-luft))); } } @media (min-width:1100px){ .bv-folien .meta-teil > .bahn{ --folie-bild:min(48vw, 820px, max(380px, calc((100svh - 600px) * 2))); } } @media (min-width:1100px){ /* nur hier: unter 1100 px gilt weiter clamp(200px, 40vw, 300px) von oben (Zeile 111) */ .bv-folien .meta-teil .lv-dunkel{ --lv-hoehe:clamp(200px, calc(100svh - 620px), 640px) } .bv-folien .meta-teil .lv-bereit.lv-dunkel .lv-stueck img{ max-width:min(58%, var(--lv-hoehe) * 1100 / 512) } /* Mit der großen Fassung vorn ragten die Nachbarn (40 % seitlich, Maß 0,68) über die Platte hinaus und wurden am Fensterrand abgeschnitten (gemessen 08.11.2026, 1440×1200: Fassung 752 px). Enger und kleiner bleiben sie in der Bahn: 0,32·1296 + 0,6·376 = 641 < 648. Die Bühne schneidet an der Bahnkante, was doch darüber hinausgeht (die blassen zweiten Nachbarn). */ .bv-folien .meta-teil .lv-bereit.lv-dunkel .lv-buehne{ overflow:hidden } .bv-folien .meta-teil .lv-bereit.lv-dunkel .lv-stueck.pm1{ transform:translateX(-32%) scale(.6) rotateY(24deg) } .bv-folien .meta-teil .lv-bereit.lv-dunkel .lv-stueck.pp1{ transform:translateX(32%) scale(.6) rotateY(-24deg) } }