/* ══ ELTERNSTIMMEN — „Was Eltern sagen“ ══════════════════════════════
 * Markup: _elternstimmen.php · Verhalten: js/elternstimmen.js
 *
 * KOMPONENTEN-EINHEIT --k: 1px bei 430px Viewport. Bezug ist die Breite des
 * Modul-Containers (.es-rahmen, Container Query), nicht der Viewport, damit
 * die Bühne in der Desktop-Spalte dieselben Proportionen hat. Bei 430px
 * Viewport ist der Container 430 − 2 × 24 (px-6) breit.
 * Grenzen nach Projektregel: Geometrie 0.6 … 1.3.
 *
 * Senkrechte Lage im Zitatkopf (alles in --k):
 *   160 = Versalhöhe der ersten Zitatzeile unter der Kartenoberkante
 *    40 = Höhe des Anführungszeichens
 *    14 = Abstand Zeichen → Versalhöhe
 *   Polster oben = 160 − 14 − 40. Zwischen Zeilenoberkante und Versalhöhe
 *   liegt der Versatz --es-versal (halber Durchschuss + Oberlänge − Versal-
 *   höhe). js/elternstimmen.js misst ihn an der gerenderten Schrift (Sonde
 *   von 1cap Höhe auf der Grundlinie) und zieht ihn vom Abstand unter dem
 *   Zeichen ab. Ohne JS ist der Abstand um diesen Versatz größer.
 * Figur: 200 × 200, oben −36, rechts −10. Ihr tiefster Punkt liegt bei 147
 * (Kreis) bzw. 152 im Morph-Puls und damit über der Zitatzeile bei 160.
 * ══════════════════════════════════════════════════════════════════════ */

.es-rahmen {
    container-type: inline-size;
}

.es {
    --k: clamp(0.6px, calc(100cqi / (430 - 48)), 1.3px);
    --es-dunkel: var(--amina-dark, #1E293B);
    position: relative;
    inline-size: calc(var(--k) * (430 - 48));
    max-inline-size: 100%;
    color: var(--es-dunkel);
}

.es [hidden]:not([hidden="until-found"]) {
    display: none !important;
}

/* ── Töne: Markenfarbe und Tinte (Kontrast) je Stimme ─────────────── */
.es-ton-0 { --es-c: var(--amina-blue, #48A0D6); }
.es-ton-1 { --es-c: var(--amina-pink, #D55A92); }
.es-ton-2 { --es-c: var(--amina-green, #7FB14E); }
.es-ton-0,
.es-ton-1,
.es-ton-2 {
    --es-tinte: color-mix(in srgb, var(--es-c) 50%, var(--es-dunkel));
}
.es[data-es-aktiv="0"] { --es-c-aktiv: var(--amina-blue, #48A0D6); }
.es[data-es-aktiv="1"] { --es-c-aktiv: var(--amina-pink, #D55A92); }
.es[data-es-aktiv="2"] { --es-c-aktiv: var(--amina-green, #7FB14E); }

/* Überblendung der farbigen Ebenen (nur opacity) */
.es-schein-ton,
.es-karte-ton,
.es-zeichen-svg {
    opacity: 0;
    transition: opacity 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}
.es[data-es-aktiv="0"] .es-ton-0:is(.es-schein-ton, .es-karte-ton, .es-zeichen-svg),
.es[data-es-aktiv="1"] .es-ton-1:is(.es-schein-ton, .es-karte-ton, .es-zeichen-svg),
.es[data-es-aktiv="2"] .es-ton-2:is(.es-schein-ton, .es-karte-ton, .es-zeichen-svg) {
    opacity: 1;
}

/* ── Glow hinter der Bühne ────────────────────────────────────────── */
.es-schein {
    position: absolute;
    inset-block-start: calc(var(--k) * -150);
    inset-inline-end: calc(var(--k) * -150);
    inline-size: calc(var(--k) * 420);
    block-size: calc(var(--k) * 420);
    pointer-events: none;
}
.es-schein-ton {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--es-c) 28%, transparent) 0%, transparent 65%);
}

/* ── Karte ────────────────────────────────────────────────────────── */
.es-buehne {
    position: relative;
    z-index: 1;
}
.es-karte {
    position: relative;
    /* Waagrechtes Wischen übernimmt js/elternstimmen.js; Scrollen und Zoomen bleiben beim Browser */
    touch-action: pan-y pinch-zoom;
    border-radius: calc(var(--k) * 32);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.6));
    box-shadow:
        inset 0 1px 0 #fff,
        0 24px 48px -24px rgba(30, 41, 59, 0.18);
    padding:
        calc(var(--k) * (160 - 14 - 40))
        calc(var(--k) * 24)
        calc(var(--k) * 24);
}
.es-karte-ton {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--es-c) 55%, transparent);
    pointer-events: none;
}

/* ── Figur (Morph) ────────────────────────────────────────────────── */
.es-figur {
    position: absolute;
    inset-block-start: calc(var(--k) * -36);
    inset-inline-end: calc(var(--k) * -10);
    inline-size: calc(var(--k) * 200);
    block-size: calc(var(--k) * 200);
    pointer-events: none;
    animation: es-schweben 6s ease-in-out infinite;
}
@keyframes es-schweben {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3%); } /* 6 von 200 Einheiten der Figur, ohne var(): läuft auf dem Compositor */
}
/* Ebenen der Figur: hinten Noten und Sterne, dann die Figur-SVG (Form und
   ruhende Motivteile), darüber die bewegten Motivteile und vorn der Falter.
   Die Figur-SVG ruht zwischen zwei Wechseln, ihr Schatten wird dann nicht
   neu gerechnet. Bewegte Ebenen tragen ihren Schatten selbst (ruhend
   gerastert, nur ihre Lage animiert). */
.es-figur-innen,
.es-ebene {
    position: absolute;
    inset: 0;
}
.es-figur-svg {
    position: relative;
    z-index: 1;
    display: block;
    inline-size: 100%;
    block-size: 100%;
    overflow: visible;
    filter: drop-shadow(0 14px 18px rgba(30, 41, 59, 0.16));
}
.es-motiv-ebene {
    z-index: 2;
    transform-origin: 50% 50%;
}
.es-falter {
    z-index: 3;
}
.es-ebene svg {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    overflow: visible;
}
.es-noten svg,
.es-traum svg,
.es-falter svg {
    filter: drop-shadow(0 14px 18px rgba(30, 41, 59, 0.16));
}
/* Nach dem Wischen federn Text und Figur in ihre Lage zurück */
.es.is-federn .es-folien {
    transition:
        transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity 0.3s ease;
}
.es.is-federn .es-figur-innen {
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Morgenkreis. Längen in SVG-Keyframes sind Nutzer-Einheiten der viewBox
   und skalieren damit automatisch mit der Figur (an --k gekoppelt). */
/* GPU: Die Kinder liegen als HTML-Ebene über der Figur. Box = Begrenzung
   in der 12-Uhr-Lage (42.8, 19, 14.4 × 10.4 Einheiten),
   gedreht um die Figurenmitte (50, 50); das Wiegen läuft auf dem Compositor. */
.es-kind-lage {
    position: absolute;
    inset-inline-start: 42.8%;
    inset-block-start: 19%;
    inline-size: 14.4%;
    block-size: 10.4%;
    transform-origin: 50% 298.0769%;
    transform: rotate(calc(30deg + var(--n) * 60deg));
}
.es-kind {
    inline-size: 100%;
    block-size: 100%;
    animation: es-kind 2.4s ease-in-out infinite;
    animation-delay: calc(var(--n) * -0.3s);
}
@keyframes es-kind {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}
.es-shirt-0 { fill: var(--amina-pink, #D55A92); }
.es-shirt-1 { fill: var(--amina-yellow, #F59E0B); }
.es-shirt-2 { fill: var(--amina-green, #7FB14E); }
.es-shirt-3 { fill: color-mix(in srgb, var(--amina-blue, #48A0D6) 50%, var(--es-dunkel)); }
.es-arm-0 { stroke: var(--amina-pink, #D55A92); }
.es-arm-1 { stroke: var(--amina-yellow, #F59E0B); }
.es-arm-2 { stroke: var(--amina-green, #7FB14E); }
.es-arm-3 { stroke: color-mix(in srgb, var(--amina-blue, #48A0D6) 50%, var(--es-dunkel)); }
.es-haar-0 { fill: var(--es-dunkel); }
.es-haar-1 { fill: color-mix(in srgb, var(--amina-yellow, #F59E0B) 55%, var(--es-dunkel)); }
.es-sonne { fill: var(--amina-yellow, #F59E0B); }
.es-strahlen {
    position: absolute;
    inset-inline-start: 38%;
    inset-block-start: 38%;
    inline-size: 24%;
    block-size: 24%;
    stroke: var(--amina-yellow, #F59E0B);
    animation: es-drehen 24s linear infinite;
}
@keyframes es-drehen {
    to { transform: rotate(360deg); }
}
/* Noten: durchgehend volle Fläche im Blau, ohne weiße Kontur und ohne
   Deckkraft-Blende (Entscheidung Anis, 2026-10-04).
   Bahn (.es-note): Die Note liegt hinter der Figur, gleitet am Kreisrand
   hervor und federt dabei auf volle Größe, zieht in einem Bogen nach links
   oben und zieht sich am Ende mit einer Drehung zusammen.
   Tanz (.es-note-tanz): eigenes Wiegen mit Neigung, unabhängig von der Bahn.
   Laufzeiten und Tanztakte je Note verschieden, damit kein starres Muster
   entsteht; die Bahnen liegen in getrennten Bändern und kreuzen sich nie.
   Längen in Nutzer-Einheiten der viewBox (an --k gekoppelt). */
.es-noten {
    fill: color-mix(in srgb, var(--amina-blue, #48A0D6) 50%, var(--es-dunkel));
}
/* GPU: Jede Note ist eine eigene HTML-Ebene (Box = gemessene Begrenzung
   der Note), ihre Bahn und ihr Tanz laufen auf dem Compositor. Die
   Verschiebungen der Keyframes stehen in Prozent der eigenen Box
   (Nutzer-Einheiten / Boxmaß * 100), damit kommen sie ohne var() aus und
   bleiben trotzdem an die Figur (--k) gekoppelt. Bahn wie bisher:
   0 % (8, 3) · 22 % (0, 0) · 52 % (−8, −2.5) · 82 % (−15, −5) · 100 % (−18, −7)
   Einheiten; Tanz ±1 Einheit. */
.es-note {
    position: absolute;
    animation-duration: calc(4.2s + var(--n) * 0.7s);
    animation-iteration-count: infinite;
    animation-fill-mode: backwards;
    animation-delay: calc(var(--n) * 1.3s);
}
.es-note-tanz {
    inline-size: 100%;
    block-size: 100%;
    transform-origin: 30% 100%;
    animation-duration: calc(0.8s + var(--n) * 0.17s);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-delay: calc(var(--n) * -0.4s);
}
.es-note-0 {
    inset-inline-start: 10.0113%;
    inset-block-start: 18.56%;
    inline-size: 9.1135%;
    block-size: 12.075%;
    animation-name: es-note-bahn-0;
}
.es-note-tanz-0 { animation-name: es-note-tanz-0; }
@keyframes es-note-bahn-0 {
    0% {
        transform: translate(70.2253%, 19.8757%) rotate(12deg) scale(0.6);
        animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1.25);
    }
    22% {
        transform: translate(0%, 0%) rotate(0deg) scale(1);
        animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
    }
    52% {
        transform: translate(-70.2253%, -16.5631%) rotate(-4deg) scale(1);
        animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
    }
    82% {
        transform: translate(-131.6725%, -33.1262%) rotate(3deg) scale(1);
        animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.2);
    }
    100% {
        transform: translate(-158.007%, -46.3767%) rotate(-14deg) scale(0);
    }
}
@keyframes es-note-tanz-0 {
    from { transform: translateY(-6.6252%) rotate(-8deg); }
    to { transform: translateY(6.6252%) rotate(8deg); }
}
.es-note-1 {
    inset-inline-start: -5.7359%;
    inset-block-start: 33.4%;
    inline-size: 15.4717%;
    block-size: 16.8938%;
    animation-name: es-note-bahn-1;
}
.es-note-tanz-1 { animation-name: es-note-tanz-1; }
@keyframes es-note-bahn-1 {
    0% {
        transform: translate(51.7073%, 17.758%) rotate(12deg) scale(0.6);
        animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1.25);
    }
    22% {
        transform: translate(0%, 0%) rotate(0deg) scale(1);
        animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
    }
    52% {
        transform: translate(-51.7073%, -14.7983%) rotate(-4deg) scale(1);
        animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
    }
    82% {
        transform: translate(-96.9512%, -29.5967%) rotate(3deg) scale(1);
        animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.2);
    }
    100% {
        transform: translate(-116.3414%, -41.4353%) rotate(-14deg) scale(0);
    }
}
@keyframes es-note-tanz-1 {
    from { transform: translateY(-5.9193%) rotate(-8deg); }
    to { transform: translateY(5.9193%) rotate(8deg); }
}
.es-note-2 {
    inset-inline-start: 0.2641%;
    inset-block-start: 63.2%;
    inline-size: 11.3919%;
    block-size: 15.0938%;
    animation-name: es-note-bahn-2;
}
.es-note-tanz-2 { animation-name: es-note-tanz-2; }
@keyframes es-note-bahn-2 {
    0% {
        transform: translate(70.2253%, 19.8757%) rotate(12deg) scale(0.6);
        animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1.25);
    }
    22% {
        transform: translate(0%, 0%) rotate(0deg) scale(1);
        animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
    }
    52% {
        transform: translate(-70.2253%, -16.5631%) rotate(-4deg) scale(1);
        animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
    }
    82% {
        transform: translate(-131.6725%, -33.1262%) rotate(3deg) scale(1);
        animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.2);
    }
    100% {
        transform: translate(-158.007%, -46.3767%) rotate(-14deg) scale(0);
    }
}
@keyframes es-note-tanz-2 {
    from { transform: translateY(-6.6252%) rotate(-8deg); }
    to { transform: translateY(6.6252%) rotate(8deg); }
}

/* ── Begleiter Traum-Sterne (Herz) ──
   Die Elemente liegen hinter der Figur und blenden mit dem Motiv „Herz“
   (data-es-aussen). Längen in Nutzer-Einheiten der viewBox. */

.es-mond { fill: var(--amina-yellow, #F59E0B); }
.es-funkel { fill: var(--amina-pink, #D55A92); }
/* GPU: eigene HTML-Ebenen wie bei den Noten. Bahn in Einheiten:
   0 % (13, 3) · 25 % (0, 0) · 60 % (−9, −4) · 85 % (−15, −7) · 100 % (−18, −9). */
.es-tr {
    position: absolute;
    animation-duration: calc(6s + var(--n) * 0.8s);
    animation-iteration-count: infinite;
    animation-fill-mode: backwards;
    animation-delay: calc(var(--n) * 1.5s);
}
.es-tr-0 {
    inset-inline-start: -9.9907%;
    inset-block-start: 38.075%;
    inline-size: 17.3757%;
    block-size: 17.9163%;
    animation-name: es-tr-bahn-0;
}
@keyframes es-tr-bahn-0 {
    0% { transform: translate(112.2257%, 25.1168%) rotate(20deg) scale(0.4); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1.25); }
    25% { transform: translate(0%, 0%) rotate(0deg) scale(1); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
    60% { transform: translate(-77.6947%, -33.4891%) rotate(-6deg) scale(1); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
    85% { transform: translate(-129.4912%, -58.6059%) rotate(4deg) scale(1); animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.2); }
    100% { transform: translate(-155.3894%, -75.3504%) rotate(-20deg) scale(0); }
}
.es-tr-1 {
    inset-inline-start: 1.7%;
    inset-block-start: 17.7%;
    inline-size: 12.6%;
    block-size: 12.6%;
    animation-name: es-tr-bahn-1;
}
@keyframes es-tr-bahn-1 {
    0% { transform: translate(108.3333%, 25%) rotate(20deg) scale(0.4); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1.25); }
    25% { transform: translate(0%, 0%) rotate(0deg) scale(1); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
    60% { transform: translate(-75%, -33.3333%) rotate(-6deg) scale(1); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
    85% { transform: translate(-125%, -58.3333%) rotate(4deg) scale(1); animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.2); }
    100% { transform: translate(-150%, -75%) rotate(-20deg) scale(0); }
}
.es-tr-2 {
    inset-inline-start: 9.2%;
    inset-block-start: 65.2%;
    inline-size: 9.6%;
    block-size: 9.6%;
    animation-name: es-tr-bahn-2;
}
@keyframes es-tr-bahn-2 {
    0% { transform: translate(108.3333%, 25%) rotate(20deg) scale(0.4); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1.25); }
    25% { transform: translate(0%, 0%) rotate(0deg) scale(1); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
    60% { transform: translate(-75%, -33.3333%) rotate(-6deg) scale(1); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
    85% { transform: translate(-125%, -58.3333%) rotate(4deg) scale(1); animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.2); }
    100% { transform: translate(-150%, -75%) rotate(-20deg) scale(0); }
}
.es-tr-schwing {
    inline-size: 100%;
    block-size: 100%;
    animation-duration: calc(1s + var(--n) * 0.23s);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-delay: calc(var(--n) * -0.37s);
}
.es-tr-funkel { animation-name: es-tr-funkel; }
.es-tr-wiegen { animation-name: es-tr-wiegen; animation-duration: 2.2s; }
@keyframes es-tr-funkel {
    from { transform: scale(0.78) rotate(-12deg); }
    to { transform: scale(1.12) rotate(14deg); }
}
@keyframes es-tr-wiegen {
    from { transform: rotate(-12deg); }
    to { transform: rotate(10deg); }
}

/* ── Begleiter Schmetterling (Blatt) ──
   Die Elemente liegen vor der Figur und blenden mit dem Motiv „Blatt“
   (data-es-aussen). Längen in Nutzer-Einheiten der viewBox. */

/* Der Falter sitzt auf dem Blatt und öffnet und schließt langsam die Flügel,
   fliegt eine Schleife über die Karte und landet wieder (10 s). Bahn aus einem
   Catmull-Rom-Spline durch feste Wegpunkte, Kurs entlang der Flugrichtung,
   Flügelschlag in Dreiergruppen mit Gleitphase. Keyframes daraus errechnet.
   Weiße Kante, weil der Falter vor dem grünen Blatt sitzt. */
.es-sf-vorn { fill: var(--amina-pink, #D55A92); }
.es-sf-feld { fill: color-mix(in srgb, var(--amina-pink, #D55A92) 55%, #fff); }
.es-sf-hinten { fill: color-mix(in srgb, var(--amina-pink, #D55A92) 78%, var(--es-dunkel)); }
.es-sf-vorn,
.es-sf-hinten {
    stroke: #fff;
    stroke-width: .7;
    stroke-linejoin: round;
    paint-order: stroke;
}
.es-sf-auge { fill: var(--amina-yellow, #F59E0B); }
.es-sf-punkt { fill: #fff; }
.es-sf-koerper { fill: var(--es-dunkel); }
.es-sf-fuehler {
    fill: none;
    stroke: var(--es-dunkel);
    stroke-width: .45;
    stroke-linecap: round;
}
.es-sf-flug {
    position: absolute;
    inset-inline-start: -12.4964%;
    inset-block-start: -12.0175%;
    inline-size: 24.9927%;
    block-size: 20.8027%;
    transform-origin: 50.0002% 57.7689%;
    transform: translate(160.0467%, 221.1251%) rotate(-38deg);
    animation: es-sf-flug 10s infinite;
}
.es-sf-schlag,
.es-sf-leib {
    position: absolute;
    inset: 0;
}
.es-sf-schlag {
    transform-origin: 50.0002% 57.7689%;
    animation: es-sf-schlag 10s infinite;
}
/* Flugbahn in Prozent der Falter-Box (24.9927 × 20.8027 Einheiten), Drehpunkt = Körpermitte */
@keyframes es-sf-flug {
    0% { transform: translate(160.0467%, 221.1251%) rotate(-38deg); animation-timing-function: linear; }
    30% { transform: translate(160.0467%, 221.1251%) rotate(-38deg); animation-timing-function: linear; }
    30.75% { transform: translate(159.8467%, 220.8848%) rotate(-37.07deg); animation-timing-function: linear; }
    31.5% { transform: translate(159.2865%, 220.0676%) rotate(-36.04deg); animation-timing-function: linear; }
    32.25% { transform: translate(158.4063%, 218.3851%) rotate(-34.86deg); animation-timing-function: linear; }
    33% { transform: translate(157.2459%, 215.7412%) rotate(-33.44deg); animation-timing-function: linear; }
    33.75% { transform: translate(155.7655%, 212.3282%) rotate(-31.46deg); animation-timing-function: linear; }
    34.5% { transform: translate(154.045%, 208.6748%) rotate(-30.25deg); animation-timing-function: linear; }
    35.25% { transform: translate(152.0444%, 205.0215%) rotate(-30.22deg); animation-timing-function: linear; }
    36% { transform: translate(149.7637%, 201.1277%) rotate(-30.54deg); animation-timing-function: linear; }
    36.75% { transform: translate(147.123%, 196.4168%) rotate(-31.2deg); animation-timing-function: linear; }
    37.5% { transform: translate(144.2021%, 190.408%) rotate(-32.22deg); animation-timing-function: linear; }
    38.25% { transform: translate(140.8811%, 183.2454%) rotate(-33.66deg); animation-timing-function: linear; }
    39% { transform: translate(137.12%, 175.5541%) rotate(-35.64deg); animation-timing-function: linear; }
    39.75% { transform: translate(132.8788%, 168.4397%) rotate(-38.39deg); animation-timing-function: linear; }
    40.5% { transform: translate(128.0374%, 162.2866%) rotate(-42.24deg); animation-timing-function: linear; }
    41.25% { transform: translate(122.4358%, 157.0469%) rotate(-47.78deg); animation-timing-function: linear; }
    42% { transform: translate(115.9539%, 151.8072%) rotate(-52.5deg); animation-timing-function: linear; }
    42.75% { transform: translate(108.8718%, 145.51%) rotate(-55.5deg); animation-timing-function: linear; }
    43.5% { transform: translate(101.1495%, 138.1071%) rotate(-58.44deg); animation-timing-function: linear; }
    44.25% { transform: translate(92.9071%, 130.5119%) rotate(-61.33deg); animation-timing-function: linear; }
    45% { transform: translate(84.1446%, 124.2146%) rotate(-64.21deg); animation-timing-function: linear; }
    45.75% { transform: translate(74.8218%, 119.9364%) rotate(-67.14deg); animation-timing-function: linear; }
    46.5% { transform: translate(65.019%, 117.2925%) rotate(-70.15deg); animation-timing-function: linear; }
    47.25% { transform: translate(54.696%, 115.0812%) rotate(-73.27deg); animation-timing-function: linear; }
    48% { transform: translate(43.9728%, 111.9086%) rotate(-76.25deg); animation-timing-function: linear; }
    48.75% { transform: translate(32.8496%, 107.438%) rotate(-78.52deg); animation-timing-function: linear; }
    49.5% { transform: translate(21.4063%, 102.5348%) rotate(-80.57deg); animation-timing-function: linear; }
    50.25% { transform: translate(9.6428%, 98.8814%) rotate(-82.6deg); animation-timing-function: linear; }
    51% { transform: translate(-2.4007%, 97.7277%) rotate(-84.84deg); animation-timing-function: linear; }
    51.75% { transform: translate(-14.6443%, 98.8814%) rotate(-87.43deg); animation-timing-function: linear; }
    52.5% { transform: translate(-27.1279%, 101.0446%) rotate(-90.76deg); animation-timing-function: linear; }
    53.25% { transform: translate(-39.7716%, 102.7751%) rotate(-95.51deg); animation-timing-function: linear; }
    54% { transform: translate(-52.4153%, 103.8807%) rotate(-102.47deg); animation-timing-function: linear; }
    54.75% { transform: translate(-64.8189%, 105.5151%) rotate(-109.46deg); animation-timing-function: linear; }
    55.5% { transform: translate(-76.8624%, 109.4569%) rotate(-116.07deg); animation-timing-function: linear; }
    56.25% { transform: translate(-88.3058%, 117.0521%) rotate(-122.45deg); animation-timing-function: linear; }
    57% { transform: translate(-99.0689%, 128.3487%) rotate(-128.92deg); animation-timing-function: linear; }
    57.75% { transform: translate(-108.9118%, 141.8566%) rotate(-136.05deg); animation-timing-function: linear; }
    58.5% { transform: translate(-117.3943%, 155.7971%) rotate(-144.95deg); animation-timing-function: linear; }
    59.25% { transform: translate(-124.2363%, 168.8242%) rotate(-153.31deg); animation-timing-function: linear; }
    60% { transform: translate(-129.3578%, 181.1303%) rotate(-161.89deg); animation-timing-function: linear; }
    60.75% { transform: translate(-132.3987%, 194.2536%) rotate(-172.49deg); animation-timing-function: linear; }
    61.5% { transform: translate(-132.5587%, 209.5401%) rotate(-187.87deg); animation-timing-function: linear; }
    62.25% { transform: translate(-128.6776%, 226.4129%) rotate(-204.2deg); animation-timing-function: linear; }
    63% { transform: translate(-122.1557%, 243.0934%) rotate(-213.7deg); animation-timing-function: linear; }
    63.75% { transform: translate(-114.1133%, 257.7069%) rotate(-221.16deg); animation-timing-function: linear; }
    64.5% { transform: translate(-104.8306%, 268.7632%) rotate(-228.97deg); animation-timing-function: linear; }
    65.25% { transform: translate(-94.3075%, 275.8296%) rotate(-239.82deg); animation-timing-function: linear; }
    66% { transform: translate(-82.344%, 278.9542%) rotate(-257.75deg); animation-timing-function: linear; }
    66.75% { transform: translate(-69.6203%, 278.858%) rotate(-271.9deg); animation-timing-function: linear; }
    67.5% { transform: translate(-57.0567%, 278.137%) rotate(-279.62deg); animation-timing-function: linear; }
    68.25% { transform: translate(-44.8531%, 277.464%) rotate(-283.7deg); animation-timing-function: linear; }
    69% { transform: translate(-32.9296%, 275.8777%) rotate(-285.37deg); animation-timing-function: linear; }
    69.75% { transform: translate(-21.2862%, 272.4646%) rotate(-285.4deg); animation-timing-function: linear; }
    70.5% { transform: translate(-9.9229%, 266.6962%) rotate(-289.72deg); animation-timing-function: linear; }
    71.25% { transform: translate(0.8803%, 259.1491%) rotate(-293.13deg); animation-timing-function: linear; }
    72% { transform: translate(11.2833%, 252.0346%) rotate(-294.79deg); animation-timing-function: linear; }
    72.75% { transform: translate(21.3662%, 246.6987%) rotate(-295.01deg); animation-timing-function: linear; }
    73.5% { transform: translate(31.2091%, 243.1415%) rotate(-293.88deg); animation-timing-function: linear; }
    74.25% { transform: translate(40.932%, 240.2573%) rotate(-291.3deg); animation-timing-function: linear; }
    75% { transform: translate(50.5748%, 236.8923%) rotate(-288.32deg); animation-timing-function: linear; }
    75.75% { transform: translate(59.9775%, 232.3737%) rotate(-287.35deg); animation-timing-function: linear; }
    76.5% { transform: translate(69.1002%, 227.2301%) rotate(-286.3deg); animation-timing-function: linear; }
    77.25% { transform: translate(77.9428%, 222.8076%) rotate(-285.07deg); animation-timing-function: linear; }
    78% { transform: translate(86.4252%, 220.1157%) rotate(-283.61deg); animation-timing-function: linear; }
    78.75% { transform: translate(94.5876%, 219.01%) rotate(-281.84deg); animation-timing-function: linear; }
    79.5% { transform: translate(102.4299%, 218.7697%) rotate(-279.67deg); animation-timing-function: linear; }
    80.25% { transform: translate(109.8721%, 218.2409%) rotate(-276.87deg); animation-timing-function: linear; }
    81% { transform: translate(116.9141%, 217.1353%) rotate(-272.59deg); animation-timing-function: linear; }
    81.75% { transform: translate(123.5161%, 215.9335%) rotate(-268.68deg); animation-timing-function: linear; }
    82.5% { transform: translate(129.5978%, 215.2605%) rotate(-265.85deg); animation-timing-function: linear; }
    83.25% { transform: translate(135.1995%, 215.6451%) rotate(-263.8deg); animation-timing-function: linear; }
    84% { transform: translate(140.241%, 216.943%) rotate(-262.34deg); animation-timing-function: linear; }
    84.75% { transform: translate(144.7623%, 218.5293%) rotate(-261.37deg); animation-timing-function: linear; }
    85.5% { transform: translate(148.7234%, 219.7792%) rotate(-260.88deg); animation-timing-function: linear; }
    86.25% { transform: translate(152.0844%, 220.356%) rotate(-237deg); animation-timing-function: linear; }
    87% { transform: translate(154.9252%, 220.4522%) rotate(-197.64deg); animation-timing-function: linear; }
    87.75% { transform: translate(157.1259%, 220.5002%) rotate(-157.94deg); animation-timing-function: linear; }
    88.5% { transform: translate(158.7263%, 220.6925%) rotate(-118.07deg); animation-timing-function: linear; }
    89.25% { transform: translate(159.7266%, 220.9809%) rotate(-78.08deg); animation-timing-function: linear; }
    90% { transform: translate(160.0467%, 221.1251%) rotate(-38deg); animation-timing-function: linear; }
    100% { transform: translate(160.0467%, 221.1251%) rotate(-38deg); }
}
@keyframes es-sf-schlag {
    0% { transform: scaleX(1); animation-timing-function: ease-in-out; }
    2% { transform: scaleX(0.91); animation-timing-function: ease-in-out; }
    4% { transform: scaleX(0.69); animation-timing-function: ease-in-out; }
    6% { transform: scaleX(0.47); animation-timing-function: ease-in-out; }
    8% { transform: scaleX(0.38); animation-timing-function: ease-in-out; }
    10% { transform: scaleX(0.47); animation-timing-function: ease-in-out; }
    12% { transform: scaleX(0.69); animation-timing-function: ease-in-out; }
    14% { transform: scaleX(0.91); animation-timing-function: ease-in-out; }
    16% { transform: scaleX(1); animation-timing-function: ease-in-out; }
    18% { transform: scaleX(0.91); animation-timing-function: ease-in-out; }
    20% { transform: scaleX(0.69); animation-timing-function: ease-in-out; }
    22% { transform: scaleX(0.47); animation-timing-function: ease-in-out; }
    24% { transform: scaleX(0.38); animation-timing-function: ease-in-out; }
    26% { transform: scaleX(0.47); animation-timing-function: ease-in-out; }
    28% { transform: scaleX(0.69); animation-timing-function: ease-in-out; }
    30% { transform: scaleX(0.91); animation-timing-function: ease-in-out; }
    31.05% { transform: scaleX(0.2); animation-timing-function: ease-in-out; }
    32.1% { transform: scaleX(1); animation-timing-function: ease-in-out; }
    33.15% { transform: scaleX(0.2); animation-timing-function: ease-in-out; }
    34.2% { transform: scaleX(1); animation-timing-function: ease-in-out; }
    35.25% { transform: scaleX(0.2); animation-timing-function: ease-in-out; }
    36.3% { transform: scaleX(1); animation-timing-function: ease-in-out; }
    37.8% { transform: scaleX(0.9); animation-timing-function: ease-in-out; }
    41.3% { transform: scaleX(0.95); animation-timing-function: ease-in-out; }
    42.35% { transform: scaleX(0.2); animation-timing-function: ease-in-out; }
    43.4% { transform: scaleX(1); animation-timing-function: ease-in-out; }
    44.45% { transform: scaleX(0.2); animation-timing-function: ease-in-out; }
    45.5% { transform: scaleX(1); animation-timing-function: ease-in-out; }
    46.55% { transform: scaleX(0.2); animation-timing-function: ease-in-out; }
    47.6% { transform: scaleX(1); animation-timing-function: ease-in-out; }
    49.1% { transform: scaleX(0.9); animation-timing-function: ease-in-out; }
    52.6% { transform: scaleX(0.95); animation-timing-function: ease-in-out; }
    53.65% { transform: scaleX(0.2); animation-timing-function: ease-in-out; }
    54.7% { transform: scaleX(1); animation-timing-function: ease-in-out; }
    55.75% { transform: scaleX(0.2); animation-timing-function: ease-in-out; }
    56.8% { transform: scaleX(1); animation-timing-function: ease-in-out; }
    57.85% { transform: scaleX(0.2); animation-timing-function: ease-in-out; }
    58.9% { transform: scaleX(1); animation-timing-function: ease-in-out; }
    60.4% { transform: scaleX(0.9); animation-timing-function: ease-in-out; }
    63.9% { transform: scaleX(0.95); animation-timing-function: ease-in-out; }
    64.95% { transform: scaleX(0.2); animation-timing-function: ease-in-out; }
    66% { transform: scaleX(1); animation-timing-function: ease-in-out; }
    67.05% { transform: scaleX(0.2); animation-timing-function: ease-in-out; }
    68.1% { transform: scaleX(1); animation-timing-function: ease-in-out; }
    69.15% { transform: scaleX(0.2); animation-timing-function: ease-in-out; }
    70.2% { transform: scaleX(1); animation-timing-function: ease-in-out; }
    71.7% { transform: scaleX(0.9); animation-timing-function: ease-in-out; }
    75.2% { transform: scaleX(0.95); animation-timing-function: ease-in-out; }
    76.25% { transform: scaleX(0.2); animation-timing-function: ease-in-out; }
    77.3% { transform: scaleX(1); animation-timing-function: ease-in-out; }
    78.35% { transform: scaleX(0.2); animation-timing-function: ease-in-out; }
    79.4% { transform: scaleX(1); animation-timing-function: ease-in-out; }
    80.45% { transform: scaleX(0.2); animation-timing-function: ease-in-out; }
    81.5% { transform: scaleX(1); animation-timing-function: ease-in-out; }
    83% { transform: scaleX(0.9); animation-timing-function: ease-in-out; }
    86.5% { transform: scaleX(0.95); animation-timing-function: ease-in-out; }
    87.55% { transform: scaleX(0.2); animation-timing-function: ease-in-out; }
    88.6% { transform: scaleX(1); animation-timing-function: ease-in-out; }
    90% { transform: scaleX(1); animation-timing-function: ease-in-out; }
    92.5% { transform: scaleX(0.86); animation-timing-function: ease-in-out; }
    95% { transform: scaleX(0.57); animation-timing-function: ease-in-out; }
    97.5% { transform: scaleX(0.39); animation-timing-function: ease-in-out; }
    100% { transform: scaleX(0.47); animation-timing-function: ease-in-out; }
}

/* Schleifen pausieren außerhalb des Bildes und in ausgeblendeten Motiven */
.es.js-paused .es-figur,
.es.js-paused .es-schleife,
[data-es-ebene]:not(.is-an) .es-schleife,
[data-es-aussen]:not(.is-an) .es-schleife {
    animation-play-state: paused;
}

/* ── Anführungszeichen ────────────────────────────────────────────── */
.es-zeichen {
    display: grid;
    inline-size: calc(var(--k) * 40 * 54 / 45.2633);
    block-size: calc(var(--k) * 40);
    margin-block-end: calc(var(--k) * 14 - var(--es-versal, 0px));
}
.es-zeichen-svg {
    grid-area: 1 / 1;
    display: block;
    inline-size: 100%;
    block-size: 100%;
    fill: color-mix(in srgb, var(--es-c) 24%, #fff);
}

/* ── Folien: gestapelt im selben Rasterfeld. Die Karte ist so hoch wie
      die längste Stimme, ein Wechsel verschiebt nichts (CLS 0). ───── */
.es-folien {
    display: grid;
}
.es-folie {
    grid-area: 1 / 1;
    margin: 0;
    visibility: hidden;
}
.es-folie.is-aktiv,
.es-folie.is-geht {
    visibility: visible;
}
.es-zitat {
    margin: 0;
}
.es-zitat p {
    margin: 0;
    font-size: clamp(calc(24px * 0.72), calc(var(--k) * 24), calc(24px * 1.25));
    line-height: 1.3;
    font-weight: 650;
    letter-spacing: -0.018em;
    color: var(--es-dunkel);
}
.es-w {
    display: inline-block;
    position: relative;
}
/* Hängendes „: rechte Kante exakt an der Textkante */
.es-haengen {
    position: absolute;
    inset-inline-end: 100%;
    inset-block-start: 0;
}

/* Kernaussage: Tinte auf Markierungsband. Das Band schließt den im DOM
   gemessenen Wortabstand (--es-luecke, gesetzt von js/elternstimmen.js). */
.es-mark {
    background: none;
    color: var(--es-tinte);
}
.es-m {
    position: relative;
    z-index: 0;
}
.es-m::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset-inline-start: 0;
    inset-inline-end: calc(-1 * var(--es-luecke, 0px));
    inset-block-start: 58%;
    inset-block-end: 2%;
    background: color-mix(in srgb, var(--es-c) 24%, #fff);
}

.es-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--k) * 6);
    margin-block-start: calc(var(--k) * 22);
    padding-block-start: calc(var(--k) * 18);
    border-block-start: 1px solid rgba(30, 41, 59, 0.07);
}
.es-wer {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.es-gruppe {
    font-size: 0.72rem;
    font-weight: 750;
    padding: 0.3125rem 0.6875rem;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--es-c) 13%, #fff);
    color: var(--es-tinte);
}

/* Einblendung je Wort, erst wenn die Bühne im Bild ist */
.es.is-ready:not(.is-in) .es-w,
.es.is-ready:not(.is-in) .es-meta {
    opacity: 0;
}
.es-folie.is-spiel .es-w {
    animation: es-wort 0.7s cubic-bezier(0.16, 1, 0.3, 1) backwards;
    animation-delay: calc(var(--es-start, 120ms) + var(--i) * 38ms);
}
.es-folie.is-spiel .es-meta {
    animation: es-meta 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
    animation-delay: calc(var(--es-start, 120ms) + 430ms);
}
/* Wechsel: Die bisherige Stimme zieht Wort für Wort nach oben aus
   (220 ms, 6 ms Staffel; bei 17 Wörtern nach 316 ms fertig). Die neue
   beginnt bei --es-start (250 ms, gesetzt von js/elternstimmen.js), wenn
   ihre ersten Zeilen schon frei sind; Wörter überlagern sich nie. */
.es-folie.is-geht .es-w {
    animation: es-wort-aus 0.22s cubic-bezier(0.5, 0, 0.75, 0) forwards;
    animation-delay: calc(var(--i) * 6ms);
}
.es-folie.is-geht .es-meta {
    animation: es-meta-aus 0.2s cubic-bezier(0.5, 0, 0.75, 0) forwards;
}
@keyframes es-wort {
    from { opacity: 0; transform: translateY(0.45em); }
}
@keyframes es-meta {
    from { opacity: 0; transform: translateY(calc(var(--k) * 8)); }
}
@keyframes es-wort-aus {
    to { opacity: 0; transform: translateY(-0.3em); }
}
@keyframes es-meta-aus {
    to { opacity: 0; transform: translateY(calc(var(--k) * -6)); }
}

/* ── Fortschritt (steuert den automatischen Wechsel) ─────────────── */
.es-fortschritt {
    position: absolute;
    inset-inline: calc(var(--k) * 24);
    inset-block-end: 0;
    block-size: calc(var(--k) * 3);
    border-radius: calc(var(--k) * 3 / 2);
    background: rgba(30, 41, 59, 0.06);
    overflow: hidden;
}
.es-balken {
    display: block;
    block-size: 100%;
    background: var(--es-c-aktiv);
    transform-origin: left center;
    transform: scaleX(0);
}
.es-balken.is-lauf {
    animation: es-balken 8s linear forwards;
}
.es.is-angehalten .es-balken {
    animation-play-state: paused;
}
@keyframes es-balken {
    to { transform: scaleX(1); }
}

/* ── Steuerung ────────────────────────────────────────────────────── */
.es-steuerung {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: calc(var(--k) * 8);
    margin-block-start: calc(var(--k) * 20);
}
.es-tabs {
    display: flex;
    gap: calc(var(--k) * 8);
}
.es-tab,
.es-pause {
    box-sizing: border-box;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    cursor: pointer;
    color: var(--es-dunkel);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: transform 0.45s var(--liquid-bounce, cubic-bezier(0.68, -0.6, 0.32, 1.6));
}
.es-tab {
    inline-size: max(44px, calc(var(--k) * 52));
    block-size: max(44px, calc(var(--k) * 52));
    border-radius: calc(var(--k) * 18);
    background: linear-gradient(110deg, rgba(255, 255, 255, 0.5), color-mix(in srgb, var(--es-c) 10%, transparent));
}
.es-tab[aria-selected="true"] {
    background: linear-gradient(110deg, rgba(255, 255, 255, 0.9), color-mix(in srgb, var(--es-c) 18%, transparent));
}
.es-tab svg {
    inline-size: calc(var(--k) * 26);
    block-size: calc(var(--k) * 26);
    overflow: visible;
    fill: color-mix(in srgb, var(--es-c) 55%, #fff);
    stroke: #fff;
    stroke-width: 8;
    stroke-linejoin: round;
    paint-order: stroke;
}
.es-tab[aria-selected="true"] svg {
    fill: var(--es-c);
}
.es-zaehler {
    margin-inline-start: auto;
    font-size: 0.8rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
    color: #64748b;
}
.es-pause {
    inline-size: max(44px, calc(var(--k) * 44));
    block-size: max(44px, calc(var(--k) * 44));
    border-radius: 9999px;
    background: linear-gradient(110deg, rgba(255, 255, 255, 0.5), rgba(72, 160, 214, 0.1));
}
.es-pause svg {
    inline-size: calc(var(--k) * 16);
    block-size: calc(var(--k) * 16);
    fill: var(--es-dunkel);
}
.es-pause-aus,
.es.is-nutzerpause .es-pause-an {
    display: none;
}
.es.is-nutzerpause .es-pause-aus {
    display: block;
}
@media (hover: hover) {
    .es-tab:hover,
    .es-pause:hover {
        transform: translateY(calc(var(--k) * -2)) scale(1.06);
    }
}
.es-tab:active,
.es-pause:active {
    transform: scale(0.92);
}
.es-tab:focus-visible,
.es-pause:focus-visible {
    outline: 3px solid var(--es-dunkel);
    outline-offset: 3px;
}

/* Gestaffelte Einblendung der Buttons nach der .reveal-Einblendung */
.es.is-ready:not(.is-in) :is(.es-tab, .es-pause) {
    opacity: 0;
}
.es.is-in :is(.es-tab, .es-pause) {
    animation: es-auftritt 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
    animation-delay: calc(var(--n) * 90ms);
}
@keyframes es-auftritt {
    from { opacity: 0; transform: translateY(calc(var(--k) * 12)) scale(0.9); }
}

/* ── Vertrauenspunkte ─────────────────────────────────────────────── */
.es-vertrauen {
    list-style: none;
    margin: calc(var(--k) * 28) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--k) * 10);
}
.es-vertrauen li {
    display: flex;
    align-items: center;
    gap: calc(var(--k) * 10);
    padding: calc(var(--k) * 12) calc(var(--k) * 14);
    border-radius: calc(var(--k) * 20);
    background: rgba(255, 255, 255, 0.75);
    box-shadow: 0 10px 24px -16px rgba(30, 41, 59, 0.2);
    font-size: 0.78rem;
    font-weight: 750;
    line-height: 1.25;
}
.es-vertrauen svg {
    flex: none;
    inline-size: calc(var(--k) * 30);
    block-size: calc(var(--k) * 30);
    overflow: visible;
    filter: drop-shadow(0 3px 4px rgba(30, 41, 59, 0.15));
}

/* ── Reduzierte Bewegung: alles steht, Gestaltung und Glow bleiben ── */
@media (prefers-reduced-motion: reduce) {
    .es,
    .es * {
        animation: none !important;
    }
    .es-schein-ton,
    .es-karte-ton,
    .es-zeichen-svg {
        transition: none;
    }
    .es .es-w,
    .es .es-meta,
    .es .es-tab,
    .es .es-pause {
        opacity: 1 !important;
    }
    .es-fortschritt {
        display: none;
    }
}