/* ═══════════════════════════════════════════════════════════════════════════
   teil-zp — Hörakustik: Wege statt „hier klicken", und die Hörkurven
   ───────────────────────────────────────────────────────────────────────────
   Christopher, 04.10.2026 (Auftrag 9): Knopf mit Pfeil nach unten statt der
   „hier"-Links, runde Zeichen für die Abschnitte, und nach dem Vorbild
   bachmaier HEAROS ein Diagramm mit Hörkurven.

   Die Zahlen im Diagramm sind der Lehrbuchverlauf einer Altersschwerhörigkeit
   und als **schematisch** ausgewiesen — nichts darin ist eine Messung an einem
   Menschen. Das ist hier keine Formsache: auf dieser Seite darf nichts stehen,
   was wie ein Befund aussieht und keiner ist.
   ═══════════════════════════════════════════════════════════════════════════ */

.hw-einstieg{
  display:grid; gap:clamp(1rem, 1.8vw, 1.5rem);
  margin:clamp(1rem, 1.8vw, 1.6rem) 0 clamp(1.3rem, 2.2vw, 2rem);
}

/* ── Die zwei Knöpfe ────────────────────────────────────────────────────── */
.hw-knopfreihe{ display:flex; flex-wrap:wrap; gap:.7rem }
.hw-knopf{ display:inline-flex; align-items:center; gap:.6em }
.hw-pfeil{
  display:grid; place-items:center;
  width:1.5em; height:1.5em; border-radius:50%;
  background:rgba(255,255,255,.3); line-height:1;
  animation:hw-winken 2.6s var(--weich) infinite;
}
@keyframes hw-winken{
  0%,72%,100%{ transform:translateY(0) }
  82%{ transform:translateY(4px) }
  90%{ transform:translateY(0) }
}
.hw-knopf:hover .hw-pfeil{ animation:none; transform:translateY(3px) }

/* ── Die fünf runden Wege ───────────────────────────────────────────────── */
.hw-wege{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 124px), 1fr));
  gap:clamp(.5rem, .9vw, .8rem);
}
.hw-weg{
  display:flex; flex-direction:column; align-items:center; gap:.55rem;
  padding:clamp(.7rem,1.1vw,.95rem) .5rem;
  border-radius:var(--r-m);
  background:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.95);
  text-decoration:none; text-align:center;
  color:var(--text-leise);
  box-shadow:0 6px 20px rgba(19,55,109,.05);
  transition:background .35s var(--weich), box-shadow .35s var(--weich),
             border-color .35s var(--weich), color .35s var(--weich);
}
.hw-weg:hover,
.hw-weg:focus-visible{
  background:#fff; color:var(--blau); border-color:var(--gold);
  box-shadow:0 14px 32px rgba(19,55,109,.12);
}
.hw-weg:focus-visible{ outline:2px solid var(--blau); outline-offset:2px }

.hw-rund{
  display:grid; place-items:center; position:relative;
  width:clamp(46px, 4.2vw, 58px); aspect-ratio:1; border-radius:50%;
  background:var(--gold-zart); color:var(--blau);
}
.hw-rund::before{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:1px solid var(--gold); opacity:.3; scale:.92;
  transition:opacity .4s var(--weich), scale .4s var(--weich);
}
.hw-weg:hover .hw-rund::before{ opacity:1; scale:1 }
.hw-zeichen{ width:58%; height:58%; overflow:visible }
.hw-wort{ font-size:clamp(.78rem,.88vw,.86rem); font-weight:750; line-height:1.25 }

/* Hereinkommen, versetzt. wirkung.js setzt .auf. */
.hw-weg{ opacity:0; transform:translateY(12px);
  transition:opacity .5s var(--weich), transform .5s var(--weich),
             background .35s var(--weich), box-shadow .35s var(--weich),
             border-color .35s var(--weich), color .35s var(--weich);
  transition-delay:calc(var(--hw-i, 1) * 60ms);
}
.hw-weg.auf{ opacity:1; transform:none }

/* ── Das Hörkurven-Diagramm ─────────────────────────────────────────────── */
.hw-kurven{
  margin:0; padding:clamp(.8rem,1.4vw,1.2rem);
  border-radius:var(--r-l);
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:0 10px 30px rgba(19,55,109,.07);
}
.hw-kurven svg{ display:block; width:100%; height:auto }

.hw-netz line{ stroke:var(--linie); stroke-width:1 }
.hw-netz text{ fill:var(--text-leise); font-size:10px; font-weight:700 }
.hw-achse{ fill:var(--text-leise); font-size:10.5px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase }

.hw-sprache{ fill:var(--gold); opacity:.16 }
.hw-sprachwort{ fill:var(--gold-tief); font-size:11px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase }

.hw-kurve{ fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round }
.hw-normal{ stroke:var(--blau-hell); stroke-dasharray:5 6 }
.hw-alter{ stroke:var(--blau) }
.hw-punkt{ fill:var(--blau); stroke:#fff; stroke-width:1.6 }

/* Die Kurven zeichnen sich, sobald das Diagramm hereinkommt. Die Länge setzt
   das Skript je Pfad (--l) — erst dann gilt .hw-bereit. Ohne Skript steht
   alles fertig da. */
.hw-kurven.hw-bereit .hw-kurve{
  stroke-dasharray:var(--l, 400); stroke-dashoffset:var(--l, 400);
  transition:stroke-dashoffset 1.6s var(--weich);
}
.hw-kurven.hw-bereit.bv-da .hw-alter{ stroke-dashoffset:0 }
.hw-kurven.hw-bereit.bv-da .hw-normal{ stroke-dashoffset:0; transition-delay:.3s }
.hw-kurven.hw-bereit .hw-punkt,
.hw-kurven.hw-bereit .hw-sprache,
.hw-kurven.hw-bereit .hw-sprachwort{ opacity:0; transition:opacity .5s var(--weich) }
.hw-kurven.hw-bereit.bv-da .hw-punkt{ opacity:1; transition-delay:1.2s }
.hw-kurven.hw-bereit.bv-da .hw-sprache{ opacity:.16; transition-delay:1.45s }
.hw-kurven.hw-bereit.bv-da .hw-sprachwort{ opacity:1; transition-delay:1.6s }

.hw-kurven figcaption{
  display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1.1rem;
  margin-top:.7rem; font-size:.82rem; color:var(--text-leise);
}
.hw-legende{ display:inline-flex; align-items:center; gap:.45em; font-weight:750 }
.hw-legende i{ width:22px; height:0; border-top:3px solid var(--blau); border-radius:3px }
/* 0-2-0 schlaegt .hw-legende i (0-1-1) — kein !important noetig. */
.hw-legende i.hw-i-normal{ border-top-style:dashed; border-color:var(--blau-hell) }
.hw-kurven figcaption small{ flex:1 1 100%; font-size:.78rem; line-height:1.55 }

/* ── Zwei Spalten, wo Platz ist ─────────────────────────────────────────── */
@media (min-width:980px){
  .hw-einstieg{
    grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
    align-items:start; gap:clamp(1.2rem,2.2vw,2rem);
  }
  .hw-einstieg > .hw-kurven{ grid-row:1 / span 2; grid-column:2 }
  .hw-knopfreihe{ grid-column:1 }
  .hw-wege{ grid-column:1 }
}

/* ── Netze ──────────────────────────────────────────────────────────────── */
@media (scripting: none){
  .hw-weg{ opacity:1; transform:none; transition:none }
}
@media (prefers-reduced-motion: reduce){
  .hw-weg{ opacity:1; transform:none; transition:none }
  .hw-pfeil{ animation:none }
  .hw-kurven.hw-bereit .hw-kurve{ stroke-dashoffset:0; transition:none }
  .hw-kurven.hw-bereit .hw-punkt{ opacity:1 }
  .hw-kurven.hw-bereit .hw-sprache{ opacity:.16 }
  .hw-kurven.hw-bereit .hw-sprachwort{ opacity:1 }
}

/* ── ACHTUNG, hier lag ein echter Fehler (04.10.2026) ──────────────────────
   Erst hieß die Auslöseklasse `auf`. **Im Haus bedeutet `.auf` aber das
   Gegenteil:** grund.css 446 gibt JEDEM `.auf` ein `opacity:0` und wartet auf
   `.auf.da`. Auf einer Fläche ohne `.einblenden` heißt `.auf` also
   „unsichtbar". Das Hörkurven-Diagramm stand dadurch live auf opacity 0 —
   gemessen: Kasten 725 × 547 an der richtigen Stelle, nur nicht zu sehen.
   Darum heißt die eigene Klasse jetzt `bv-da` und kreuzt sich mit nichts. */