/* ═══════════════════════════════════════════════════════════════════════════
   teil-zx — Der Einstieg der Seite Gesundheit: zwei Kacheln, dazwischen ein
             gezeichneter Kopf, der sich dreht
   ───────────────────────────────────────────────────────────────────────────
   Christopher, 04.10.2026: „ein interaktiver Kopf — eine Person, die sich mit
   der Maus nach links und rechts dreht und auf zwei Auswahlkacheln zeigt. Eine
   Variante fürs Antippen brauchst du auch. … keine Kacheln über einem Gesicht."

   Darum drei Spalten: Kachel · Kopf · Kachel. Die Kacheln liegen NEBEN dem
   Gesicht, nie darüber. Auf dem Telefon steht der Kopf oben und die Kacheln
   darunter — gestapelt bleibt die Regel von selbst eingehalten.

   Die Drehung ist eine einzige Zahl, --dreh von -1 bis 1, die das Skript
   setzt. Alles andere rechnet das CSS daraus: die Neigung des Kopfes, der
   Versatz der Züge, der etwas weitere Weg der Pupillen. Ohne Skript bleibt
   --dreh auf 0, und der Kopf schaut geradeaus.
   ═══════════════════════════════════════════════════════════════════════════ */

.gs-einstieg{ padding-block:clamp(1.4rem,3vw,3rem) clamp(.6rem,1.4vw,1.2rem) }
.gs-ueber{
  margin:0 0 clamp(1rem,2vw,1.8rem);
  text-align:center;
  font-size:clamp(1.25rem,2.2vw,1.9rem);
}

.gs-buehne{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(220px,24vw,330px) minmax(0,1fr);
  align-items:center;
  gap:clamp(.8rem,2vw,2.4rem);
  /* Sonst stehen die zwei Kacheln auf einem breiten Schirm ganz aussen und der
     Kopf allein in der Mitte — gemessen bei 2133 px: 527 px Abstand je Seite. */
  max-width:1180px; margin-inline:auto;
}

/* ── Der Kopf ───────────────────────────────────────────────────────────── */
.gs-kopf{
  --dreh:0; --heb:0;
  grid-column:2; grid-row:1;
  justify-self:center; align-self:end;
  position:relative;
}
/* Ein weicher Schein hinter dem Kopf — er gibt der Zeichnung einen Grund,
   ohne eine Kachel zu sein. */
.gs-kopf::before{
  content:""; position:absolute; z-index:-1;
  left:50%; top:8%; width:118%; aspect-ratio:1;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle, var(--gold-zart) 0%, rgba(247,240,226,.55) 46%, rgba(247,240,226,0) 70%);
}
/* Unten laeuft die Zeichnung aus, statt an der Kante abgeschnitten zu werden:
   die Schulterlinie endete bei y=338 der 340er Flaeche und sah ab wie mit der
   Schere. */
.gs-bild{
  display:block; width:100%; height:auto; overflow:visible;
  -webkit-mask-image:linear-gradient(180deg, #000 72%, transparent 99%);
  mask-image:linear-gradient(180deg, #000 72%, transparent 99%);
}

/* Alles, was sich dreht, dreht sich um den Halsansatz — nicht um die Mitte
   des Bildes. Sonst wandert der Kopf beim Drehen nach unten aus. */
.gs-dreh{
  transform-box:view-box; transform-origin:150px 260px;
  transform:translateX(calc(var(--dreh) * 9px)) rotate(calc(var(--dreh) * 3.2deg));
  transition:transform .7s var(--weich);
}
.gs-zuege{
  transform-box:view-box; transform-origin:150px 150px;
  transform:translateX(calc(var(--dreh) * 7px)) scaleX(calc(1 - 0.045 * var(--dreh) * var(--dreh)));
  transition:transform .7s var(--weich);
}
.gs-pupille{
  fill:var(--blau);
  transform-box:view-box;
  transform:translate(calc(var(--dreh) * 4.6px), calc(var(--heb) * 2.6px));
  transition:transform .55s var(--weich);
}

.gs-haut{ fill:var(--creme); stroke:var(--blau); stroke-width:2.2px }
.gs-haar{ fill:var(--blau); opacity:.92 }
.gs-ohr{ stroke-width:2px }
.gs-weiss{ fill:var(--weiss); stroke:var(--blau); stroke-width:1.8px }
.gs-zug{
  fill:none; stroke:var(--blau); stroke-width:2.2px;
  stroke-linecap:round; stroke-linejoin:round;
}
.gs-mund{ stroke-width:2.4px }
.gs-brille rect{ fill:rgba(203,176,130,.16); stroke:var(--gold-tief); stroke-width:2.6px }
.gs-brille path{ fill:none; stroke:var(--gold-tief); stroke-width:2.6px; stroke-linecap:round }

/* Blinzeln: das Lid fährt kurz herunter. Es hat die Farbe des Gesichts, liegt
   also wirklich darüber und blendet nicht bloß aus. */
.gs-lid{
  fill:var(--creme);
  transform-box:fill-box; transform-origin:50% 0%;
  animation:gs-blinzeln 7.5s var(--weich) infinite;
}
.gs-auge:nth-of-type(2) .gs-lid{ animation-delay:.04s }
@keyframes gs-blinzeln{
  0%, 95.5%, 100%{ transform:scaleY(0) }
  97%, 98%      { transform:scaleY(1) }
}

/* ── Die zwei Kacheln ───────────────────────────────────────────────────── */
.gs-kachel{
  display:flex; align-items:center; justify-content:space-between; gap:.9rem;
  padding:clamp(1rem,1.8vw,1.5rem) clamp(1.1rem,2vw,1.7rem);
  border-radius:var(--r-l);
  background:var(--glas); border:1px solid var(--glas-rand);
  -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:var(--glas-schatten);
  color:var(--text); text-decoration:none;
  transition:transform .4s var(--weich), box-shadow .4s var(--weich),
             border-color .4s var(--weich), background .4s var(--weich);
}
.gs-k1{ grid-column:1; grid-row:1; text-align:left }
.gs-k2{ grid-column:3; grid-row:1 }
.gs-k-wort{ display:grid; gap:.25em }
.gs-k-wort strong{
  color:var(--blau); font-weight:800;
  font-size:clamp(1rem,1.3vw,1.18rem); line-height:1.3;
}
.gs-k-wort span{ color:var(--text-leise); font-size:.9rem; line-height:1.5 }
.gs-k-pfeil{
  flex:none; display:grid; place-items:center;
  width:2.2em; height:2.2em; border-radius:50%;
  background:var(--blau); color:var(--weiss); font-size:.95rem;
  transition:transform .4s var(--weich), background .4s var(--weich);
}
.gs-kachel:hover,
.gs-kachel:focus-visible{
  background:var(--weiss); border-color:var(--gold);
  transform:translateY(-3px);
  box-shadow:0 18px 40px rgba(19,55,109,.16);
}
.gs-kachel:hover .gs-k-pfeil{ background:var(--gold); transform:translateY(3px) }
.gs-kachel:focus-visible{ outline:2px solid var(--blau); outline-offset:4px }

/* ── Telefon und schmale Fenster ────────────────────────────────────────── */
@media (max-width:860px){
  .gs-buehne{ grid-template-columns:minmax(0,1fr); gap:1rem }
  .gs-kopf{ grid-column:1; grid-row:1; width:min(260px,62vw) }
  .gs-k1{ grid-column:1; grid-row:2 }
  .gs-k2{ grid-column:1; grid-row:3 }
}

/* ── Netze ──────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .gs-dreh, .gs-zuege, .gs-pupille{ transition:none }
  .gs-lid{ animation:none; transform:scaleY(0) }
  .gs-kachel:hover{ transform:none }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Der Abschnitt zum Myopie-Management-Glas: zwei eigene Zeichnungen
   ───────────────────────────────────────────────────────────────────────────
   Warum eigene Zeichnungen und kein Herstellerbild: siehe den Kasten oben in
   inc/gesundheit.php. Kurz: Quellenangabe ersetzt keine Nutzungserlaubnis.
   ═══════════════════════════════════════════════════════════════════════════ */

.my-paar{
  display:grid; gap:clamp(1rem,2.2vw,2rem);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  margin:clamp(1.2rem,2.4vw,2rem) 0;
}
.my-bild{ margin:0 }
.my-bild svg{ display:block; width:100%; height:auto }
.my-bild figcaption{
  margin-top:.5rem; text-align:center;
  font-size:.8rem; line-height:1.5; color:var(--text-leise);
}

/* Das Glas von vorn */
.my-glas{ fill:var(--blau-zart); stroke:var(--blau); stroke-width:2 }
.my-klar{ fill:var(--weiss); stroke:var(--blau); stroke-width:1.6 }
.my-segment{ fill:var(--gold); opacity:.55 }

/* Der Schnitt durch das Auge */
.my-auge{ fill:var(--weiss); stroke:var(--blau); stroke-width:2.2 }
.my-netzhaut{ fill:none; stroke:var(--blau); stroke-width:4; stroke-linecap:round }
.my-linse{ fill:var(--blau-zart); stroke:var(--blau); stroke-width:1.8 }
.my-brille{ fill:rgba(203,176,130,.22); stroke:var(--gold-tief); stroke-width:2.2 }
.my-strahl{ fill:none; stroke:var(--blau); stroke-width:1.5; opacity:.7 }
.my-strahl-zwei{ stroke:var(--gold-tief); stroke-dasharray:5 4; opacity:.9 }
.my-punkt{ fill:var(--gold-tief) }
.my-punkt-eins{ fill:var(--blau) }
.my-schrift{
  font-family:inherit; font-size:13px; font-weight:800; fill:var(--blau);
}
.my-leise{ font-weight:600; font-size:11.5px; fill:var(--text-leise) }

.my-worte{ display:grid; gap:.9rem; max-width:72ch }
.my-worte p{ margin:0; line-height:1.7 }
.my-worte strong{ color:var(--blau) }
.my-arzt{
  padding:.9rem 1.1rem; border-radius:var(--r-s);
  background:var(--creme); border-left:3px solid var(--gold);
}
.my-quelle{
  margin:clamp(1rem,2vw,1.6rem) 0 0;
  font-size:.78rem; line-height:1.6; color:var(--text-leise);
}
.my-quelle a{ color:var(--blau) }