/* ═══════════════════════════════════════════════════════════════════════════
   teil-zzzzzz-seite.css — der Gesamtentwurf der Augenoptik-Seite (nur Vorschau ?bv-neu=1; Markup
   vorlagen/teil-seite.php, Bewegung assets/js/seite.js).

   Christopher, 24.10.2026 spät: „ich will die ganze Seite die perfekt abgestimmt werden. unten auch die Kacheln.
   das ist noch kein einheitliches Design. Alles muss in einem gleichbleibenden Flow laufen — die ganze SEITE! …
   Kann der Hintergrund auch leicht dynamisch sein. aber nur sehr fein die Farbe."

   Ein System statt vieler Einzelstücke:
     1. Eine Fläche — keine harten weißen/cremefarbenen Bänder mehr. Hinter dem Blatt liegt eine feste Ebene aus zwei
        Farbklängen (kühl: blau-zart, warm: gold-zart); der warme nimmt mit dem Lesen nach unten zu, beide wandern
        sehr langsam. Bewegt werden nur Deckkraft und Lage (kein Neuzeichnen je Bild).
     2. Ein Faden — eine feine goldene Linie im linken Rand vom Einstieg bis zum Aufruf, sie füllt sich mit dem
        Scrollen; die Abschnittsnummern sitzen als Knoten darauf (wie die Stufenpunkte der Gläser).
     3. Ein Fenster, eine Kachel — ein Radius, ein Schatten für alle Bilder und Fenster; eine Kachel für Übersicht,
        Angebote und Smart Glasses (die dunkle bleibt dunkel — sein Wunsch vom 04.10.).
     4. Die Sprungleiste als Punkte (seite.js), nur der aktuelle Punkt trägt seinen Namen.
   Gilt nur auf der Augenoptik-Seite: alles hängt an html:has(.seite-brille) — den Gläser-Abschnitt gibt
   es nur dort (die Hörakustik nutzt dieselbe Vorlage).
   ═══════════════════════════════════════════════════════════════════════════ */

html:has(.seite-brille){
  --s-r:28px;                /* Fenster, Bilder, große Karten */
  --s-r-k:20px;              /* Kacheln */
  --s-rand:rgba(19,55,109,.07);
  --s-flaeche:rgba(255,255,255,.72);
  --s-flaeche-rand:rgba(255,255,255,.95);
  --s-schatten:0 24px 50px -32px rgba(19,55,109,.38), 0 2px 10px rgba(19,55,109,.05);
  --s-schatten-hoch:0 30px 60px -30px rgba(19,55,109,.45), 0 4px 14px rgba(19,55,109,.07);
  --s-abschnitt:clamp(3.4rem, 7.5vw, 6.5rem);
  --s-titel:clamp(1.3rem, .95rem + 1.1vw, 1.75rem);
  --s-text:1.06rem;
  /* Der Faden: Mitte des linken Randes der Inhaltsspalte (.bahn, höchstens --breite, mittig, Rand --gasse) */
  --s-faden-x:max(calc(var(--gasse) * .5), calc((100% - var(--breite)) / 2 + var(--gasse) * .5));
}

/* ── 1. Eine Fläche ────────────────────────────────────────────────────────── */
html:has(.seite-brille) .seitenblatt{
  isolation:isolate;
  clip-path:inset(0 round clamp(18px, 2.2vw, 30px));   /* die feste Ebene bleibt im Blatt */
}
html:has(.seite-brille) .seitenblatt::before,
html:has(.seite-brille) .seitenblatt::after{
  content:""; position:fixed; inset:-14vmax; z-index:-1; pointer-events:none;
}
html:has(.seite-brille) .seitenblatt::before{
  background:
    radial-gradient(40% 36% at 16% 18%, rgba(226,235,248,.95), rgba(226,235,248,0) 72%),
    radial-gradient(36% 34% at 86% 64%, rgba(214,227,245,.62), rgba(214,227,245,0) 72%),
    var(--grund, #FBF7F0);
  animation:seite-wandern-a 52s ease-in-out infinite alternate;
}
html:has(.seite-brille) .seitenblatt::after{
  background:
    radial-gradient(42% 38% at 80% 22%, rgba(247,238,220,.95), rgba(247,238,220,0) 72%),
    radial-gradient(46% 40% at 18% 80%, rgba(236,222,194,.6), rgba(236,222,194,0) 74%);
  opacity:var(--seite-warm, .35);
  animation:seite-wandern-b 68s ease-in-out infinite alternate;
}
@keyframes seite-wandern-a{
  from{ transform:translate3d(-2.5vmax, -1.5vmax, 0) scale(1) }
  to{ transform:translate3d(2.5vmax, 2vmax, 0) scale(1.07) }
}
@keyframes seite-wandern-b{
  from{ transform:translate3d(2vmax, 1vmax, 0) scale(1.05) }
  to{ transform:translate3d(-2vmax, -2vmax, 0) scale(1) }
}
/* Die Bänder werden durchsichtig — die Fläche trägt die ganze Seite. */
html:has(.seite-brille) .leistung .sammel-teil,
html:has(.seite-brille) .leistung .sammel-teil:nth-of-type(even){
  background:transparent;
  padding-block:var(--s-abschnitt);
}
html:has(.seite-brille) .leistung-buehne{ padding-bottom:clamp(.5rem, 1.5vw, 1.25rem); }
/* Der Seitentitel auf derselben linken Kante wie Einstieg und Abschnittsköpfe (er stand mittig eingerückt, ~355 px
   bei 1440 — die einzige Kante der Seite, die aus der Reihe fiel) */
html:has(.seite-brille) .leistung-buehne-text{ margin-inline:0; }

/* ── 2. Der Faden ──────────────────────────────────────────────────────────── */
html:has(.seite-brille) .leistung-lauf{ position:relative; }
html:has(.seite-brille) .leistung-lauf::before,
html:has(.seite-brille) .leistung-lauf::after{
  content:""; position:absolute; z-index:3; pointer-events:none;
  left:var(--s-faden-x); top:clamp(2rem, 4vw, 3rem); bottom:0; width:1.5px; margin-left:-.75px;
  border-radius:2px;
}
html:has(.seite-brille) .leistung-lauf::before{ background:rgba(169,143,95,.24); }
html:has(.seite-brille) .leistung-lauf::after{
  background:linear-gradient(180deg, var(--gold, #CBB082), var(--gold-tief, #A98F5F));
  transform:scaleY(var(--seite-faden, 0)); transform-origin:50% 0;
}
/* Knoten: jede Abschnittsnummer sitzt auf dem Faden — offen, solange der Abschnitt vor einem liegt, gefüllt, wenn
   man ihn erreicht hat (seite.js: .seite-erreicht). Die Mitte liegt einen halben Rand links der Inhaltskante. */
html:has(.seite-brille) .leistung .sammel-kopf{ position:relative; }
html:has(.seite-brille) .leistung .sammel-kopf::before{
  content:""; position:absolute; z-index:4; top:.95rem;
  left:calc(var(--gasse) * -.5 - 6px); width:12px; height:12px; border-radius:50%;
  background:var(--grund, #FBF7F0); border:1.5px solid var(--gold-tief, #A98F5F);
  box-shadow:0 0 0 4px rgba(251,247,240,.85);
  transition:background-color .4s ease, transform .4s ease;
}
html:has(.seite-brille) .leistung .sammel-teil.seite-erreicht > .bahn > .sammel-kopf::before{
  background:var(--gold, #CBB082); transform:scale(1.2);
}
html:has(.seite-brille) .meta-teil .sammel-kopf::before{ box-shadow:0 0 0 4px rgba(26,16,19,.6); }

/* ── 3. Einstieg: Titel, Brille mit Herz, ruhiger Text ─────────────────────── */
html:has(.seite-brille) .leistung-einstieg{
  position:relative;
  display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, .8fr);
  column-gap:clamp(2rem, 5vw, 5rem); align-items:center;
  margin-top:0;
}
html:has(.seite-brille) .leistung-einstieg > .seite-brille{
  grid-column:2; grid-row:1 / span 2; align-self:start;
  width:100%; max-width:26rem; justify-self:center; align-self:center;
  /* neben dem Einstieg, auf Höhe des Textes (zuerst nach oben neben das „Augenoptik" gezogen — dort schnitt die
     Linie den Leitsatz, gemessen 1440 px) */
  margin:0;
}
html:has(.seite-brille) .leistung-einstieg > .leistung-einstieg-titel{ grid-column:1; grid-row:1; margin:0 0 .6rem; }
html:has(.seite-brille) .leistung-einstieg > .leistung-text{ grid-column:1; grid-row:2; max-width:40rem; margin-inline:0; }
/* (ohne margin-inline:0 stand der Text mittig in seiner Spalte, 45 px eingerückt gegen seine Überschrift) */
html:has(.seite-brille) .leistung-einstieg .leistung-text p{ line-height:1.62; margin:0 0 .95em; }
html:has(.seite-brille) .leistung-einstieg .leistung-text p:first-child{
  font-size:clamp(1.1rem, .95rem + .45vw, 1.28rem); line-height:1.55; color:var(--blau, #13376D);
}
html:has(.seite-brille) .leistung-einstieg .leistung-text p:has(> em:only-child){
  font-size:.88rem; color:var(--text-leise, #6B7686); margin-top:1.2em;
}
.seite-brille{ display:block; height:auto; overflow:visible; }
.seite-brille-linie{
  fill:none; stroke:var(--blau, #13376D); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;
}
.seite-brille-herz{ fill:var(--gold, #CBB082); opacity:.55; transform-box:fill-box; transform-origin:50% 60%; }
/* Zeichnen beim ersten Erscheinen (seite.js setzt .seite-zeichnen, dann .seite-gezeichnet). Ohne Skript oder bei
   „Bewegung reduzieren" steht die Brille fertig da. */
.seite-brille.seite-zeichnen .seite-brille-linie{ stroke-dasharray:1; stroke-dashoffset:1; }
.seite-brille.seite-zeichnen .seite-brille-herz{ transform:scale(0); }
.seite-brille.seite-gezeichnet .seite-brille-linie{ stroke-dashoffset:0; transition:stroke-dashoffset 2.6s cubic-bezier(.45,.05,.25,1); }
.seite-brille.seite-gezeichnet .seite-brille-herz{ transform:scale(1); transition:transform .9s cubic-bezier(.3,1.5,.5,1) 2.1s; }

/* ── 4. Sprungleiste als Punkte (seite.js baut sie; ohne Skript bleiben die Chips) ── */
html:has(.seite-brille) .leistung-sprung.seite-punkte-an .sammel-wege{ display:none; }
/* Die Leiste (.leistung-sprung) ist selbst schon die Pille und nimmt ihre Breite vom Inhalt (max-content): die Punkte
   tragen darum keinen eigenen Rahmen und keine Prozent-Grenze (die bezog sich auf genau diese Breite und drückte die
   Punkte zusammen — der Name des aktuellen fiel auf 0 px, gemessen 1440 px). */
.seite-punkte{
  display:flex; align-items:center; justify-content:center; gap:4px;
  width:max-content; max-width:calc(100vw - 4rem); margin-inline:auto;
  padding:4px 8px;
  touch-action:pan-y; user-select:none; -webkit-user-select:none;
}
.seite-punkt{ flex:none; }
.seite-punkt{
  position:relative; display:flex; align-items:center; justify-content:center;
  min-width:22px; height:30px; padding:0 4px; border-radius:999px;
  text-decoration:none; color:var(--blau, #13376D);
  transition:background-color .35s ease, padding .35s ease;
}
.seite-punkt::before{
  content:""; width:8px; height:8px; border-radius:50%; flex:none;
  background:transparent; border:1.5px solid var(--gold-tief, #A98F5F);
  transition:transform .3s ease, background-color .3s ease;
}
.seite-punkt[data-art="teil"]::before{ width:10px; height:10px; border-color:var(--blau, #13376D); }
.seite-punkt[data-war]::before{ background:var(--gold, #CBB082); border-color:var(--gold, #CBB082); }
.seite-punkt-name{
  max-width:0; overflow:hidden; white-space:nowrap; opacity:0;
  font-size:.86rem; font-weight:750; line-height:1;
  transition:max-width .4s ease, opacity .3s ease, margin .4s ease;
}
.seite-punkt[aria-current="true"]{ background:var(--blau, #13376D); color:#fff; padding:0 12px 0 9px; }
.seite-punkt[aria-current="true"]::before{ background:var(--gold, #CBB082); border-color:var(--gold, #CBB082); }
.seite-punkt[aria-current="true"] .seite-punkt-name{ max-width:22rem; opacity:1; margin-left:8px; }
.seite-punkt:focus-visible{ outline:2px solid var(--gold-tief, #A98F5F); outline-offset:2px; }
.seite-punkt:focus-visible .seite-punkt-name{ max-width:22rem; opacity:1; margin-left:8px; }
.seite-punkte.seite-wischt .seite-punkt{ transition:none; }
@media (max-width:599px){
  .seite-punkte{ gap:0; padding:5px 6px; }
  .seite-punkt{ min-width:17px; height:28px; padding:0 2px; }
  .seite-punkt::before{ width:7px; height:7px; }
  .seite-punkt[data-art="teil"]::before{ width:9px; height:9px; }
  .seite-punkt[aria-current="true"] .seite-punkt-name{ max-width:11rem; }
}

/* ── 5. Fenster und Kacheln — ein Radius, ein Schatten ─────────────────────── */
html:has(.seite-brille) .gla.lf-an .lf-buehne.gla-buehne,
html:has(.seite-brille) .gb-bild-feld,
html:has(.seite-brille) .leistung .band2-bild img,
html:has(.seite-brille) .leistung .angebot{
  border-radius:var(--s-r);
}
html:has(.seite-brille) .leistung .band2-bild img{ box-shadow:var(--s-schatten); }
/* Brillenarten-Lauf (CA-Command): über seine Stellschrauben, ohne seine Regeln anzufassen. */
html:has(.seite-brille) .ar{
  --ar-rund:var(--s-r);
  --ar-titel:var(--s-titel);
  --ar-text:var(--s-text);
}
/* Schrift der Stufen in allen drei Läufen gleich gebaut */
html:has(.seite-brille) .gla-titel{ font-size:var(--s-titel); }
html:has(.seite-brille) .gla.lf-an[data-lf-modus="hoch"] .gla-titel{ font-size:calc(var(--s-titel) * var(--lf-schrift, 1)); }

/* Kacheln: Übersicht, Angebote, Smart Glasses */
html:has(.seite-brille) .ba-kachel{
  border-radius:var(--s-r-k);
  background:var(--s-flaeche); border:1px solid var(--s-flaeche-rand);
  box-shadow:var(--s-schatten);
}
html:has(.seite-brille) .ba-kachel:hover{ box-shadow:var(--s-schatten-hoch); border-color:rgba(203,176,130,.55); }
html:has(.seite-brille) .ba-bild,
html:has(.seite-brille) .ba-bild img{ border-radius:calc(var(--s-r-k) - 6px); }
html:has(.seite-brille) .leistung .angebot{ box-shadow:var(--s-schatten); }
html:has(.seite-brille) .meta-kachel{ border-radius:var(--s-r-k); }
html:has(.seite-brille) .meta-grund{ border-radius:var(--s-r); }
html:has(.seite-brille) .meta-teil{ background:transparent; }
/* Das helle Feld in den Lupen-Bändern: eine Karte wie die anderen */
html:has(.seite-brille) .leistung .band2-ohne,
html:has(.seite-brille) .leistung .sammel-teil:nth-of-type(even) .band2-ohne{
  background:var(--s-flaeche); border:1px solid var(--s-flaeche-rand);
  border-radius:var(--s-r); box-shadow:var(--s-schatten);
}

/* Übersicht am Telefon: zwei Spalten statt acht Zeilen untereinander */
@media (max-width:599px){
  html:has(.seite-brille) .ba-uebersicht{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.55rem; }
  html:has(.seite-brille) .ba-kachel{ flex-direction:column; align-items:flex-start; gap:.45rem; padding:.5rem .55rem .65rem; }
  html:has(.seite-brille) .ba-kachel .ba-bild{ width:100%; height:auto; aspect-ratio:16 / 10; }
  html:has(.seite-brille) .ba-kachel .ba-bild img{ width:100%; height:100%; object-fit:cover; }
  html:has(.seite-brille) .ba-kachel .ba-pfeil{ display:none; }
  html:has(.seite-brille) .ba-kachel .ba-text strong{ font-size:.92rem; line-height:1.2; }
  html:has(.seite-brille) .ba-kachel .ba-text small{ font-size:.78rem; line-height:1.3; }
  html:has(.seite-brille) .leistung-einstieg{ grid-template-columns:minmax(0, 1fr); }
  html:has(.seite-brille) .leistung-einstieg > .seite-brille{
    grid-column:1; grid-row:1; justify-self:start; max-width:15rem; margin:0 0 .6rem;
  }
  html:has(.seite-brille) .leistung-einstieg > .leistung-einstieg-titel{ grid-row:2; }
  html:has(.seite-brille) .leistung-einstieg > .leistung-text{ grid-row:3; }
  html:has(.seite-brille) .leistung .sammel-kopf::before{ width:9px; height:9px; left:calc(var(--gasse) * -.5 - 4.5px); top:1rem; }
}

/* ── 6. Der Aufruf: hier endet der Faden ───────────────────────────────────── */
html:has(.seite-brille) .leistung-aufruf .leistung-aufruf-innen{
  border-radius:var(--s-r);
  padding:clamp(2rem, 4.5vw, 3.2rem) clamp(1.4rem, 4vw, 3rem);
  box-shadow:var(--s-schatten-hoch);
  position:relative;
}
html:has(.seite-brille) .leistung-aufruf .leistung-aufruf-innen::before{
  content:""; position:absolute; left:50%; top:-14px; width:12px; height:12px; margin-left:-6px; border-radius:50%;
  background:var(--gold, #CBB082); box-shadow:0 0 0 5px rgba(251,247,240,.9);
}

@media (prefers-reduced-motion:reduce){
  html:has(.seite-brille) .seitenblatt::before,
  html:has(.seite-brille) .seitenblatt::after{ animation:none; }
  .seite-punkt, .seite-punkt::before, .seite-punkt-name,
  html:has(.seite-brille) .leistung .sammel-kopf::before{ transition:none; }
}