/**
 * Prognose-Kachel (Trend Report) — siehe inc/prognose.php.
 *
 * Bühne 1184 × 1080 aus dem Entwurf, alle Maße in cqw (Container-Breite),
 * dadurch skaliert die Kachel verlustfrei mit dem Media-Slot. Sichtbare
 * Endzustände sind der Default (Editor-Vorschau, ohne JS); erst wenn
 * prognose.js die Kachel „scharf schaltet“ (.is-armed), werden die
 * Elemente versteckt und beim Einscrollen (.is-in) choreografiert.
 */

.gfu-prognose {
    container-type: inline-size;
    position: relative;
    width: 100%;
    aspect-ratio: 1184 / 1080;
    overflow: hidden;
    --pk-navy: var(--color-navy, #002398);
    --pk-bg: #5BC9D9;
    --pk-text: #fff;
}

.gfu-prognose * { box-sizing: border-box; }

.gfu-prognose .pk-hl {
    position: absolute; left: 4.7cqw; top: 8cqw; width: 62cqw; margin: 0;
    font: 700 3.7cqw/1.25 var(--font-display, 'Recursive', sans-serif);
    color: var(--pk-navy); letter-spacing: -.005em;
}

.gfu-prognose .pk-big {
    position: absolute; left: 42.2cqw; top: 14.4cqw; width: 52.4cqw; aspect-ratio: 1;
    border-radius: 50%; background: var(--pk-bg);
}

.gfu-prognose .pk-val {
    position: absolute; left: 5.4cqw; top: 13.5cqw; display: flex; align-items: baseline; gap: 1.6cqw;
    color: var(--pk-text); white-space: nowrap;
}
.gfu-prognose .pk-n { font: 700 17cqw/1 var(--font-display, 'Recursive', sans-serif); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.gfu-prognose .pk-u { font: 700 6.1cqw/1 var(--font-display, 'Recursive', sans-serif); }

.gfu-prognose .pk-small {
    position: absolute; z-index: 2; left: 67.6cqw; top: 50.7cqw; width: 26.2cqw; aspect-ratio: 1;
    border-radius: 50%; background: #fff; display: grid; place-items: center;
}
.gfu-prognose .pk-small svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.gfu-prognose .pk-small circle {
    fill: none; stroke: var(--pk-navy); stroke-width: 1.4;
    transform: rotate(-90deg); transform-origin: 50% 50%;
    stroke-dasharray: 100; stroke-dashoffset: 0;
}
.gfu-prognose--neg .pk-small circle { transform: rotate(-90deg) scaleY(-1); }
.gfu-prognose .pk-pct {
    font: 700 7.1cqw/1 var(--font-display, 'Recursive', sans-serif); color: var(--pk-navy);
    font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}

/* Darstellung „Zwei Wachstumswerte“: zweiter Kreis unten links mit Prozent + Text, Fußnote unten rechts */
.gfu-prognose .pk-big2 {
    position: absolute; left: 3.7cqw; top: 39.1cqw; width: 50.4cqw; aspect-ratio: 1;
    border-radius: 50%; background: var(--pk-bg2, #F5E90A);
}
.gfu-prognose .pk-pct--big2 { position: absolute; left: 0; width: 100%; top: 32%; text-align: center; font-size: 11.5cqw; color: var(--pk-text2, #717100); }
.gfu-prognose .pk-label2 {
    position: absolute; left: 15%; width: 80%; top: 58%; margin: 0;
    font: 700 3.7cqw/1.3 var(--font-display, 'Recursive', sans-serif); color: var(--pk-navy);
}
.gfu-prognose--doppelt .pk-pct--big { font-size: 11.5cqw; }
.gfu-prognose .pk-foot {
    position: absolute; left: 69.5cqw; top: 82.6cqw; width: 28cqw; margin: 0;
    font: 500 2.15cqw/1.35 var(--font-body, 'IBM Plex Sans', sans-serif); color: #6E6B66;
}

/* Kreisposition links (z. B. SDA): Kreis unten links, Illustration rechts, Fußnote einzeilig unten links */
.gfu-prognose--kreis-links .pk-big { left: 4cqw; top: 18.5cqw; width: 50.4cqw; }
.gfu-prognose--kreis-links .pk-foot { left: 4.7cqw; top: 85cqw; width: 70cqw; }

/* Darstellung „nur Wachstum“: Prozent im großen Kreis, Kreisfarbe bestimmt Zahlfarbe */
.gfu-prognose--wachstum .pk-big,
.gfu-prognose--doppelt .pk-big { display: grid; place-items: center; }
.gfu-prognose .pk-pct--big { font-size: 11cqw; color: var(--pk-text); }

.gfu-prognose .pk-cap {
    position: absolute; left: 49.4cqw; top: 74.3cqw; width: 46cqw; margin: 0;
    font: 700 3.35cqw/1.3 var(--font-display, 'Recursive', sans-serif); color: var(--pk-navy);
}

.gfu-prognose .pk-ill { position: absolute; }
.gfu-prognose .pk-ill svg { display: block; width: 100%; height: auto; overflow: visible; }

/* ── Choreografie (nur mit JS: .is-armed versteckt, .is-in spielt ab) ── */
.gfu-prognose.is-armed:not(.is-in) .pk-hl,
.gfu-prognose.is-armed:not(.is-in) .pk-cap { opacity: 0; transform: translateY(1.2cqw); }
.gfu-prognose.is-armed:not(.is-in) .pk-big,
.gfu-prognose.is-armed:not(.is-in) .pk-small { transform: scale(0); }
.gfu-prognose.is-armed:not(.is-in) .pk-val,
.gfu-prognose.is-armed:not(.is-in) .pk-pct--big { opacity: 0; }
.gfu-prognose.is-armed:not(.is-in) .pk-ill { opacity: 0; transform: translateY(2.5cqw); }
.gfu-prognose.is-armed:not(.is-in) .pk-small circle { stroke-dashoffset: 100; }
.gfu-prognose.is-armed:not(.is-in) .pk-big2 { transform: scale(0); }
.gfu-prognose.is-armed:not(.is-in) .pk-pct--big2 { opacity: 0; }
.gfu-prognose.is-armed:not(.is-in) .pk-label2,
.gfu-prognose.is-armed:not(.is-in) .pk-foot { opacity: 0; transform: translateY(1.2cqw); }

.gfu-prognose.is-armed.is-in .pk-hl   { opacity: 0; transform: translateY(1.2cqw); animation: pk-rise .55s cubic-bezier(.2,.7,.2,1) 0s forwards; }
.gfu-prognose.is-armed.is-in .pk-big  { transform: scale(0); animation: pk-pop .75s cubic-bezier(.22,1.2,.36,1) .15s forwards; }
.gfu-prognose.is-armed.is-in .pk-val,
.gfu-prognose.is-armed.is-in .pk-pct--big { opacity: 0; animation: pk-fade .4s ease .5s forwards; }
.gfu-prognose.is-armed.is-in .pk-ill  { opacity: 0; transform: translateY(2.5cqw); animation: pk-rise .6s cubic-bezier(.22,1.15,.36,1) var(--pk-delay, .3s) forwards; }
.gfu-prognose.is-armed.is-in .pk-small { transform: scale(0); animation: pk-pop .55s cubic-bezier(.22,1.2,.36,1) 1.3s forwards; }
.gfu-prognose.is-armed.is-in .pk-small circle { stroke-dashoffset: 100; animation: pk-draw 1.2s cubic-bezier(.3,.7,.2,1) 1.4s forwards; }
.gfu-prognose.is-armed.is-in .pk-cap  { opacity: 0; transform: translateY(1.2cqw); animation: pk-rise .55s cubic-bezier(.2,.7,.2,1) 2s forwards; }
.gfu-prognose--wachstum.is-armed.is-in .pk-cap { animation-delay: 1.2s; }
.gfu-prognose.is-armed.is-in .pk-big2 { transform: scale(0); animation: pk-pop .75s cubic-bezier(.22,1.2,.36,1) 1.3s forwards; }
.gfu-prognose.is-armed.is-in .pk-pct--big2 { opacity: 0; animation: pk-fade .4s ease 1.5s forwards; }
.gfu-prognose.is-armed.is-in .pk-label2 { opacity: 0; transform: translateY(1.2cqw); animation: pk-rise .55s cubic-bezier(.2,.7,.2,1) 2.1s forwards; }
.gfu-prognose.is-armed.is-in .pk-foot { opacity: 0; transform: translateY(1.2cqw); animation: pk-rise .55s cubic-bezier(.2,.7,.2,1) 2.4s forwards; }

@keyframes pk-rise { to { opacity: 1; transform: none; } }
@keyframes pk-pop  { to { transform: scale(1); } }
@keyframes pk-fade { to { opacity: 1; } }
@keyframes pk-draw { to { stroke-dashoffset: 0; } }

/* ── Ruhe-Animation (.is-idle, ab 2,6 s) ── */
.gfu-prognose .pk-wave { opacity: 1; }
.gfu-prognose.is-armed .pk-wave { opacity: .25; }
.gfu-prognose.is-idle .pk-wave-1 { animation: pk-wave 2.4s ease-in-out 0s infinite; }
.gfu-prognose.is-idle .pk-wave-2 { animation: pk-wave 2.4s ease-in-out .3s infinite; }
.gfu-prognose.is-idle .pk-wave-3 { animation: pk-wave 2.4s ease-in-out .6s infinite; }
.gfu-prognose.is-idle .pk-wave-4 { animation: pk-wave 2.4s ease-in-out .9s infinite; }
.gfu-prognose.is-idle .pk-wave-5 { animation: pk-wave 2.4s ease-in-out 1.2s infinite; }
@keyframes pk-wave { 0%, 100% { opacity: .25; } 35%, 55% { opacity: 1; } }

.gfu-prognose .pk-sparkle { transform-box: fill-box; transform-origin: center; }
.gfu-prognose.is-idle .pk-sparkle { animation: pk-twinkle 3.2s ease-in-out infinite; }
@keyframes pk-twinkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.12) rotate(6deg); } }

.gfu-prognose .pk-play { transform-box: fill-box; transform-origin: center; }
.gfu-prognose.is-idle .pk-play { animation: pk-pulse 4s ease-in-out infinite; }
@keyframes pk-pulse { 0%, 80%, 100% { transform: scale(1); } 90% { transform: scale(1.08); } }

.gfu-prognose .pk-plant { transform-box: fill-box; transform-origin: 50% 100%; }
.gfu-prognose.is-idle .pk-plant { animation: pk-sway 6s ease-in-out infinite; }
@keyframes pk-sway { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(2.2deg); } }

.gfu-prognose .pk-spin { transform-box: fill-box; transform-origin: center; }
.gfu-prognose.is-idle .pk-spin { animation: pk-spin 9s linear infinite; }
@keyframes pk-spin { to { transform: rotate(360deg); } }

.gfu-prognose .pk-drop { transform-box: fill-box; transform-origin: 50% 0; }
.gfu-prognose.is-idle .pk-drop { animation: pk-drip 3.6s ease-in infinite; }
@keyframes pk-drip { 0%, 55% { transform: translateY(0); opacity: 1; } 85% { transform: translateY(18%); opacity: 0; } 86%, 100% { transform: translateY(0); opacity: 0; } }

.gfu-prognose .pk-blink { opacity: 1; }
.gfu-prognose.is-idle .pk-blink-1 { animation: pk-blink 7s ease-in-out 0s infinite; }
.gfu-prognose.is-idle .pk-blink-2 { animation: pk-blink 7s ease-in-out 1.4s infinite; }
.gfu-prognose.is-idle .pk-blink-3 { animation: pk-blink 7s ease-in-out 2.8s infinite; }
.gfu-prognose.is-idle .pk-blink-4 { animation: pk-blink 7s ease-in-out 4.2s infinite; }
.gfu-prognose.is-idle .pk-blink-5 { animation: pk-blink 7s ease-in-out 5.6s infinite; }
@keyframes pk-blink { 0%, 100% { opacity: 1; } 45%, 52% { opacity: .35; } }

/* Idle-Bewegungen ganzer Elemente (Klasse am .pk-ill, Animation auf dem inneren SVG, damit die Einblendung unberührt bleibt) */
.gfu-prognose.is-idle .pk-drift > svg { animation: pk-drift 16s ease-in-out infinite alternate; }
@keyframes pk-drift { from { transform: translateX(-2%); } to { transform: translateX(2.5%); } }
.gfu-prognose.is-idle .pk-walk > svg { animation: pk-walk 9s ease-in-out infinite alternate; }
@keyframes pk-walk { 0% { transform: translateX(0); } 50% { transform: translateX(60%) translateY(-1%); } 100% { transform: translateX(120%); } }

@media (prefers-reduced-motion: reduce) {
    .gfu-prognose.is-armed .pk-hl, .gfu-prognose.is-armed .pk-cap, .gfu-prognose.is-armed .pk-ill,
    .gfu-prognose.is-armed .pk-val, .gfu-prognose.is-armed .pk-pct--big, .gfu-prognose.is-armed .pk-pct--big2,
    .gfu-prognose.is-armed .pk-label2, .gfu-prognose.is-armed .pk-foot { opacity: 1; transform: none; animation: none !important; }
    .gfu-prognose.is-armed .pk-big, .gfu-prognose.is-armed .pk-small, .gfu-prognose.is-armed .pk-big2 { transform: scale(1); animation: none !important; }
    .gfu-prognose.is-armed .pk-small circle { stroke-dashoffset: 0; animation: none !important; }
    .gfu-prognose.is-armed .pk-wave { opacity: 1; }
    .gfu-prognose.is-idle .pk-wave, .gfu-prognose.is-idle .pk-sparkle,
    .gfu-prognose.is-idle .pk-play, .gfu-prognose.is-idle .pk-plant,
    .gfu-prognose.is-idle .pk-drop, .gfu-prognose.is-idle .pk-spin, .gfu-prognose.is-idle .pk-blink,
    .gfu-prognose.is-idle .pk-drift > svg, .gfu-prognose.is-idle .pk-walk > svg { animation: none !important; }
}

/* ── Content Hero: Kachel bestimmt ihre Höhe selbst (statt absolut im Wrap) ── */
.content-hero__image-wrap:has(> .gfu-prognose) { position: relative; inset: auto; }
.gfu-prognose.content-hero__image { height: auto; aspect-ratio: 1184 / 1080; object-fit: unset; }