/* ═══════════════════════════════════════════════════════════════════════════
   teil-zk — „Gut hören heißt dabei sein": Bilder und Bewegung beim Scrollen
   ───────────────────────────────────────────────────────────────────────────
   Christopher, 04.10.2026 (Auftrag 5):

     „Da hätte ich gerne noch Bilder bei Hörtest, Hörsysteme und Gehörschutz.
      Und diese Kachel soll auch mit Animationen versehen sein, dass da beim
      Scrollen was passiert. Zumindest beim ersten Mal scrollen."

   Und sein Vorbild für die Hörakustik, bachmaier HEAROS:
     „wie dieses HEAROS-In-Ear-Hörgerät so animiert groß gezogen wird."

   ── Warum das Wachsen NICHT über animation-timeline:view() läuft ───────────
   Genau das war der Reflex, und genau das ist hier die Falle: eine
   View-Zeitachse hängt sich an den nächsten **Scrollbehälter**, und
   grund.css 52 gibt `.blatt` ein `overflow-x:hidden` — damit IST `.blatt`
   einer, nur ohne Scrollweg (am 04.10.2026 gemessen: scrollHeight =
   clientHeight = 9462). Die Zeitachse steht dann still und der from-Zustand
   bleibt stehen; so wäre die Blume des Lebens auf jeder Seite unsichtbar
   geworden. Deshalb kommt der Fortschritt hier aus JavaScript und steht als
   **--wuchs (0…1)** auf `#hoeren`. Ohne JavaScript ist --wuchs einfach 0 —
   dann steht alles ruhig und vollständig da, nichts fehlt.

   ── Warum die Karte selbst NICHT bewegt wird ──────────────────────────────
   Erster Anlauf: ein Scroll-Hub über `translate` auf der Karte — `transform`
   gehört ja schon dem Einblenden (`.auf`) und dem Hover. **Gemessen am
   04.10.2026: geht nicht.** teil-bewegung.css gibt `.karte` beim Überfahren
   `translate:0 -6px` MIT Überblendung auf `translate`; ein Scrollwert auf
   derselben Eigenschaft würde erstens vom Hover überschrieben und zweitens
   durch die Überblendung dem Finger hinterherhinken.
   Darum bewegt sich hier **nur, was sonst niemandem gehört**: der Zoom des
   mittleren Bildes, ein ruhiger Schwenk der beiden äußeren (`object-position`,
   nirgends überblendet) und der goldene Strich unter jeder Überschrift.
   ═══════════════════════════════════════════════════════════════════════════ */

#hoeren{ --wuchs:0 }

/* ── Das Bild in der Karte ──────────────────────────────────────────────── */
.hk-bild{
  display:block; margin:-.35rem -.35rem 1.05rem; /* bündig in die Kachelpolsterung */
  border-radius:calc(var(--r-l) - .9rem);
  overflow:hidden; aspect-ratio:16/10; background:var(--sand);
}
.hk-bild img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.02);
  transition:transform 1.1s var(--weich);
}
.karte:hover .hk-bild img{ transform:scale(1.07) }

/* ── Das HEAROS-Vorbild: das mittlere Bild wird beim Scrollen groß gezogen ──
   Nur Zoom im feststehenden Rahmen — keine Höhe, keine Breite, kein Layout.
   So ruckelt nichts und die Kacheln bleiben gleich hoch. */
.hk-waechst .hk-bild img{
  transform:scale(calc(1.02 + var(--wuchs, 0) * .26));
  transition:none;                      /* der Wert kommt je Bild aus dem Scrollen */
}
.karte.hk-waechst:hover .hk-bild img{
  transform:scale(calc(1.07 + var(--wuchs, 0) * .26));
}
/* Die beiden äußeren Bilder schwenken im feststehenden Rahmen ruhig mit —
   object-position wird in diesem Theme nirgends überblendet, der Wert folgt
   dem Scrollen also ohne Verzug und tritt niemandem auf die Füße. */
.hk-karte .hk-bild img{ object-position:50% calc(50% + var(--wuchs, 0) * -7%) }
.hk-waechst .hk-bild img{ object-position:50% 50% }

/* Die Überschrift der Karte bekommt beim Hereinkommen einen feinen Strich,
   der mitwächst — eine kleine Geste, kein Feuerwerk. */
.hk-karte h3{ position:relative; padding-bottom:.42rem }
.hk-karte h3::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; border-radius:2px;
  width:calc(18px + var(--wuchs, 0) * 44px);
  background:linear-gradient(90deg, var(--gold), rgba(203,176,130,0));
}

/* ── Schmale Fenster ────────────────────────────────────────────────────── */
@media (max-width:620px){
  .hk-bild{ aspect-ratio:16/9; margin-bottom:.9rem }
  /* Auf dem Telefon stehen die Karten untereinander — der Zoom bleibt, der
     Schwenk wird halbiert, sonst wandert das Motiv aus dem kleinen Rahmen. */
  .hk-karte .hk-bild img{ object-position:50% calc(50% + var(--wuchs, 0) * -3.5%) }
}

/* ── Netze ──────────────────────────────────────────────────────────────── */
@media (scripting: none){
  .hk-waechst .hk-bild img{ transform:scale(1.02) }
}
@media (prefers-reduced-motion: reduce){
  .hk-bild img,
  .hk-waechst .hk-bild img,
  .karte.hk-waechst:hover .hk-bild img{ transform:scale(1.02); transition:none }
  .hk-karte .hk-bild img{ object-position:50% 50% }
  .hk-karte h3::after{ width:28px }
}