/* ═══════════════════════════════════════════════════════════════════════════
   teil-zj — „Ziehen Sie einmal scharf": Brillenglasform und drei Glasarten
   ───────────────────────────────────────────────────────────────────────────
   Christopher, 04.10.2026 (Auftrag 4):

     „Das ist ein super geiler Gedanke, das möchte ich auch so behalten. Es wäre
      nur schön, dass die Seite, die unscharf zeigt, dass da irgendwie das noch
      die Form hat wie von einem Brillenglas. Dass man sieht, dass wenn man die
      Brille vorschiebt, dass es scharf ist und der Rest unscharf ist. Entweder
      nur die Form von einem Brillenglas oder mit Rahmen. Und dann soll das drei
      Auswahlmöglichkeiten zeigen, die noch die Unterschiede zeigen: Einstärke,
      Gleitsicht und Arbeitsplatzgläser — so einen Schiebefilter über diesem
      großen Bild."

   ── Wie es gebaut ist, und warum so ───────────────────────────────────────
   Vorher war der scharfe Teil ein gerader Schnitt: clip-path:inset(0 0 0 50%).
   Jetzt ist er ein **Glas**: clip-path:ellipse(rx ry at --teiler 50%).

   Der Kniff, der alles einfach macht: der Unterschied zwischen den drei
   Glasarten steckt **allein in dieser einen Form**, nicht in einer zweiten
   Maske. Was außerhalb der scharfen Form liegt, ist ohnehin schon unscharf —
   das Bild darunter ist es.

     Einstärke    das ganze Glas scharf
     Gleitsicht   nur ein schmaler senkrechter Korridor — seitlich davon bleibt
                  Unschärfe stehen. Genau das ist der Progressionskorridor.
     Arbeitsplatz breit, aber nach unten verschoben: Bildschirm und Lesen sind
                  scharf, die Ferne oben bleibt unscharf.

   Alle drei sind Ellipsen, also ineinander überführbar — der Wechsel läuft als
   weiche Bewegung (Klasse .glas-wechsel, 500 ms, von der Bedienung gesetzt).
   Während des Ziehens gibt es bewusst **keine** Überblendung, sonst hinkt das
   Glas dem Finger nach.

   ── Maße ──────────────────────────────────────────────────────────────────
   .sehen-rahmen hat aspect-ratio 16/9. Ein echtes Brillenglas misst etwa
   50 × 38 mm, also 1,32 : 1. Damit die Ellipse auf dem Schirm dieses Verhältnis
   trifft, muss gelten  rx / ry = 1,32 × 9/16 = 0,7425:

     Schirm   --rx 15 %   --ry 20,2 %   →  0,7426   (Glas 30 % × 40,4 %)
     Telefon  --rx 21 %   --ry 28,3 %   →  0,7420   (das Bild ist dort klein,
                                                     das Glas darf größer sein)
   ═══════════════════════════════════════════════════════════════════════════ */

.sehen-rahmen{
  --rx:15%;
  --ry:20.2%;
  cursor:grab;
}
.sehen-rahmen:active{ cursor:grabbing }

/* ── Das scharfe Bild, in Glasform ──────────────────────────────────────── */
.sehen-scharf{ clip-path:ellipse(var(--rx) var(--ry) at var(--teiler,50%) 50%); z-index:2 }

/* Einstärke ist der Grundzustand (die Regel oben). Die beiden anderen Arten: */
.sehen-rahmen.ist-gleitsicht .sehen-scharf{
  clip-path:ellipse(calc(var(--rx) * .40) calc(var(--ry) * .97)
                    at var(--teiler,50%) 50%);
}
.sehen-rahmen.ist-arbeitsplatz .sehen-scharf{
  clip-path:ellipse(calc(var(--rx) * .94) calc(var(--ry) * .70)
                    at var(--teiler,50%) calc(50% + var(--ry) * .29));
}
/* Nur beim Wechsel der Glasart gleitet die Form. Beim Ziehen nicht. */
.sehen-rahmen.glas-wechsel .sehen-scharf{ transition:clip-path .5s var(--weich) }

/* ── Die Fassung: der goldene Rand um das Glas ──────────────────────────── */
.sehen-fassung{
  position:absolute; z-index:3; pointer-events:none;
  left:var(--teiler,50%); top:50%;
  width:calc(var(--rx) * 2); height:calc(var(--ry) * 2);
  translate:-50% -50%;
  border-radius:50%;
  border:clamp(3px,.42vw,6px) solid var(--gold);
  box-shadow:0 0 0 1px rgba(255,255,255,.75) inset,
             0 0 0 1px rgba(19,55,109,.16),
             0 14px 38px rgba(19,55,109,.20);
}
/* Steg nach innen und Bügel nach außen — damit es als Brille gelesen wird und
   nicht als Lupe. Beide laufen aus, sie sollen nichts verdecken. */
.sehen-fassung::before,
.sehen-fassung::after{
  content:""; position:absolute; top:46%; height:clamp(3px,.42vw,6px);
  border-radius:999px; width:clamp(26px,5%,70px);
}
.sehen-fassung::before{ right:100%;
  background:linear-gradient(270deg, var(--gold), rgba(203,176,130,0)) }
.sehen-fassung::after{ left:100%;
  background:linear-gradient(90deg, var(--gold), rgba(203,176,130,0)) }

/* ── Die Bahn am unteren Rand statt der Linie quer durchs Bild ──────────────
   Der alte Griff war ein senkrechter Strich über die volle Höhe — bei einem
   geraden Schnitt richtig, bei einem Glas nicht. Jetzt liegt die Bahn unten,
   der Knopf darauf, und das Glas folgt ihm. Gezogen werden darf trotzdem
   überall im Bild. */
.sehen-bahn{
  position:absolute; z-index:4; left:8%; right:8%; bottom:clamp(14px,2.4%,30px);
  height:4px; border-radius:999px; pointer-events:none;
  background:rgba(255,255,255,.55);
  box-shadow:0 0 0 1px rgba(19,55,109,.12), 0 2px 10px rgba(19,55,109,.14);
}
.sehen-griff{
  position:absolute; top:50%; left:calc((var(--teiler,50%) - 8%) / .84);
  translate:-50% -50%;
  width:clamp(34px,3.4vw,48px); aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.95); color:var(--blau);
  font-size:clamp(.6rem,.75vw,.74rem); font-weight:850; letter-spacing:.06em;
  box-shadow:0 8px 24px rgba(19,55,109,.24);
  inset-inline-end:auto; bottom:auto;
}
.sehen-griff::after{ content:"◂ ▸" }

/* ── Die Schilder ───────────────────────────────────────────────────────────
   „ohne die richtige Brille" bleibt oben links — es beschreibt alles, was
   AUSSERHALB des Glases liegt. „mit Brillen Voigt" gehört dagegen ans Glas und
   wandert mit ihm; geklammert, damit es am Bildrand nicht angeschnitten wird. */
.sehen-schild.rechts{
  right:auto; top:auto;
  left:clamp(19%, var(--teiler,50%), 81%);
  top:calc(50% + var(--ry) + clamp(.5rem,1.1vw,1rem));
  translate:-50% 0;
}
@media (max-width:620px){
  .sehen-schild.rechts{ left:clamp(24%, var(--teiler,50%), 76%) }
}

/* ── Die drei Glasarten als Knöpfe ──────────────────────────────────────── */
.sehen-wahl{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(.4rem,.7vw,.7rem); margin:0 auto clamp(1rem,1.8vw,1.6rem);
  padding:clamp(.3rem,.5vw,.45rem); width:max-content; max-width:100%;
  border-radius:var(--r-rund);
  background:var(--glas); border:1px solid var(--glas-rand);
  -webkit-backdrop-filter:blur(18px) saturate(1.6); backdrop-filter:blur(18px) saturate(1.6);
  box-shadow:0 10px 30px rgba(19,55,109,.10);
}
.sehen-knopf{
  appearance:none; border:0; cursor:pointer;
  font:inherit; font-size:clamp(.78rem,.9vw,.92rem); font-weight:750;
  color:var(--text-leise); background:transparent;
  padding:.62em 1.25em; border-radius:var(--r-rund);
  transition:background .25s var(--weich), color .25s var(--weich);
}
.sehen-knopf:hover{ color:var(--blau); background:rgba(255,255,255,.6) }
.sehen-knopf[aria-pressed="true"]{ background:var(--blau); color:#fff }
.sehen-knopf:focus-visible{ outline:2px solid var(--blau); outline-offset:2px }

.sehen-hinweis{ max-width:60ch; margin-inline:auto }
.sehen-hinweis b{ color:var(--blau); font-weight:800 }

/* ── Schmale Fenster ────────────────────────────────────────────────────── */
@media (max-width:620px){
  .sehen-rahmen{ --rx:21%; --ry:28.3% }
  .sehen-wahl{ width:100%; justify-content:space-between }
  .sehen-knopf{ padding:.6em .7em; flex:1 1 0 }
  .sehen-bahn{ left:6%; right:6% }
  .sehen-griff{ left:calc((var(--teiler,50%) - 6%) / .88) }
}

/* ── Netze ──────────────────────────────────────────────────────────────────
   Ohne JavaScript bewegt sich nichts und die Knöpfe könnten nichts schalten —
   dann steht das Glas in der Mitte, Einstärke, und die Knopfreihe verschwindet,
   statt tot dazustehen. Das Bild bleibt vollständig lesbar. */
@media (scripting: none){
  .sehen-wahl{ display:none }
  .sehen-bahn{ display:none }
  .sehen-hinweis{ visibility:hidden }
}
@media (prefers-reduced-motion: reduce){
  .sehen-rahmen.glas-wechsel .sehen-scharf{ transition:none }
}