/* Tagesablauf 2.2. Vollständige Ersatzdatei.
   Entwurf: 430px, Kartenfächer unverändert, Motive im SVG-Raum 382 x 300.
   Alle Konturen, Köpfe, Schatten und Details folgen derselben Bewegung. */

.ta {
    --k: clamp(0.6px, calc(100vw / 430), 1.3px);
    position: relative;
    display: grid;
    gap: calc(var(--k) * 6);
    max-width: 40rem;
    margin-inline: auto;
}

/* Fächer. */
.ta-faecher {
    position: relative;
    width: 100%;
    max-width: calc(var(--k) * 382);
    height: calc(var(--k) * 450);
    margin-inline: auto;
    touch-action: pan-y;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
    outline: none;
}
.ta-faecher:active { cursor: grabbing; }
.ta-faecher:focus-visible .ta-karte.is-aktiv { outline: 2px solid #48A0D6; outline-offset: 4px; }

/* Glow hinter der mittleren Karte, auch bei reduzierter Bewegung. */
.ta-glow {
    position: absolute;
    left: 50%;
    top: calc(var(--k) * 30);
    width: calc(var(--k) * 340);
    height: calc(var(--k) * 340);
    margin-left: calc(var(--k) * -170);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transition: opacity .8s cubic-bezier(.22,.61,.36,1);
}
.ta-glow--blue   { background: radial-gradient(closest-side, rgba(72,160,214,.20), rgba(72,160,214,0)); }
.ta-glow--yellow { background: radial-gradient(closest-side, rgba(245,158,11,.20), rgba(245,158,11,0)); }
.ta-glow--pink   { background: radial-gradient(closest-side, rgba(213,90,146,.18), rgba(213,90,146,0)); }
.ta-glow--green  { background: radial-gradient(closest-side, rgba(127,177,78,.20), rgba(127,177,78,0)); }
.ta[data-farbe="blue"]   .ta-glow--blue,
.ta[data-farbe="yellow"] .ta-glow--yellow,
.ta[data-farbe="pink"]   .ta-glow--pink,
.ta[data-farbe="green"]  .ta-glow--green { opacity: 1; }

.ta-karte {
    --d: 0;
    --ty: 0;
    --sc: 1;
    position: absolute;
    left: calc(50% - var(--k) * 130);
    top: calc(var(--k) * 30);
    width: calc(var(--k) * 260);
    height: calc(var(--k) * 330);
    box-sizing: border-box;
    border: calc(var(--k) * 6) solid #ffffff;
    border-radius: calc(var(--k) * 30);
    transform-origin: 50% calc(var(--k) * 1150);
    transform: translateY(calc(var(--k) * var(--ty))) rotate(calc(var(--d) * 10.5deg)) scale(var(--sc));
    box-shadow: 0 2px 3px rgba(30,41,59,.10), 0 calc(var(--k) * 22) calc(var(--k) * 40) calc(var(--k) * -22) rgba(30,41,59,.40);
}
.ta-karte.is-bewegt { will-change: transform; }
.ta-karte--blue   { --c: #48A0D6; background: linear-gradient(170deg, #edf6fb, #cfe6f4); background: linear-gradient(170deg, color-mix(in srgb, #48A0D6 10%, #ffffff), color-mix(in srgb, #48A0D6 26%, #ffffff)); }
.ta-karte--yellow { --c: #F59E0B; background: linear-gradient(170deg, #fef5e7, #fce6c0); background: linear-gradient(170deg, color-mix(in srgb, #F59E0B 10%, #ffffff), color-mix(in srgb, #F59E0B 26%, #ffffff)); }
.ta-karte--pink   { --c: #D55A92; background: linear-gradient(170deg, #fbeff4, #f4d4e3); background: linear-gradient(170deg, color-mix(in srgb, #D55A92 10%, #ffffff), color-mix(in srgb, #D55A92 26%, #ffffff)); }
.ta-karte--green  { --c: #7FB14E; background: linear-gradient(170deg, #f2f7ed, #deebd1); background: linear-gradient(170deg, color-mix(in srgb, #7FB14E 10%, #ffffff), color-mix(in srgb, #7FB14E 26%, #ffffff)); }

/* Beschriftung: Kategoriefarbe mit dunklem Textton. */
.ta-karte-kopf {
    position: absolute;
    left: calc(var(--k) * 18);
    right: calc(var(--k) * 18);
    top: calc(var(--k) * 16);
    display: flex;
    justify-content: space-between;
    font-size: calc(var(--k) * 11);
    font-weight: 800;
    letter-spacing: .12em;
    line-height: 1.2;
    text-transform: uppercase;
    color: #1E293B;
    color: color-mix(in srgb, var(--c) 45%, #1E293B);
}
.ta-karte-zeit {
    position: absolute;
    left: calc(var(--k) * 18);
    right: calc(var(--k) * 18);
    bottom: calc(var(--k) * 12);
    display: flex;
    justify-content: space-between;
    align-items: baseline;   /* bis-Zeit sitzt exakt auf der Grundlinie der großen Uhrzeit */
    font-size: calc(var(--k) * 48);
    font-weight: 300;
    letter-spacing: -.05em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: rgba(30,41,59,.9);
}

/* Endzeit klein rechts, Beschriftungsstil wie der Kartenkopf (45 % Kategoriefarbe + #1E293B) */
.ta-karte-bis {
    font-size: calc(var(--k) * 11);
    font-weight: 800;
    letter-spacing: .12em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    color: #1E293B;
    color: color-mix(in srgb, var(--c) 45%, #1E293B);
}


/* Eine durchgehende Zeichenfläche. Die Strichstärke wird nicht mit einzelnen
   Objekten skaliert; der komplette Entwurfsraum skaliert gemeinsam. */
.ta-bild {
    position: absolute;
    left: calc(50% - var(--k) * 382 * .31);
    top: calc(var(--k) * 60);
    width: calc(var(--k) * 382 * .62);
    height: calc(var(--k) * 300 * .62);
    z-index: 50;
    pointer-events: none;
}
.ta-motiv { display: block; width: 100%; height: 100%; overflow: visible; }
.ta-motiv path, .ta-motiv circle, .ta-motiv ellipse { transition: none; }

/* Einmaliger Aufbau des ersten Motivs. Er läuft im Motiv selbst, das mit der
   Seite scrollt; bis zum Start bleibt es verborgen. */
.ta--einstieg-wartet .ta-bild { visibility: hidden; }

/* Alle Texte bestimmen dieselbe stabile Höhe. Nur der gewählte Text ist
   sichtbar und zugänglich. Kein Überlagern alter und neuer Beschriftungen. */
.ta-info {
    position: relative;
    z-index: 60;
    display: grid;
    gap: calc(var(--k) * 8);
    max-width: 34rem;
    margin-inline: auto;
    width: 100%;
}
.ta-texte { display: grid; }
.ta-text { grid-area: 1 / 1; visibility: hidden; pointer-events: none; }
.ta-text.is-aktiv, .ta-text.is-geht { visibility: visible; }
.ta-text.is-aktiv { pointer-events: auto; }
.ta-text-maske { overflow: hidden; padding-bottom: 4px; }
.ta-text h3 {
    margin: 0;
    font-size: clamp(1.35rem, calc(100vw * 30 / 430), 1.875rem);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -.03em;
    color: #1e293b;
}
.ta-text p {
    margin: .75rem 0 0;
    font-size: clamp(1rem, calc(100vw * 17 / 430), 1.0625rem);
    line-height: 1.6;
    color: #475569;
}
/* Textwechsel: Der alte Text weicht in 0,2 s entgegen der Wischrichtung aus, der neue
   gleitet aus der Wischrichtung herein. Titel zuerst, Absatz 60 ms später. Der neue Text
   beginnt erst, wenn der alte fast verblasst ist (100 ms), daher kein Übereinanderlesen.
   Bewegt werden nur opacity und transform; die Höhe bleibt durch das gemeinsame Rasterfeld stabil. */
.ta[data-ta-bereit] .ta-text.is-aktiv .ta-text-maske { animation: ta-text-ein .42s cubic-bezier(.22,.61,.36,1) .1s both; }
.ta[data-ta-bereit] .ta-text.is-aktiv p { animation: ta-text-ein .46s cubic-bezier(.22,.61,.36,1) .16s both; }
.ta[data-ta-bereit] .ta-text.is-geht .ta-text-maske,
.ta[data-ta-bereit] .ta-text.is-geht p { animation: ta-text-aus .2s cubic-bezier(.4,0,1,1) both; }
@keyframes ta-text-ein {
    from { opacity: 0; transform: translateX(calc(var(--ta-richtung, 1) * 14px)); }
    to { opacity: 1; transform: none; }
}
@keyframes ta-text-aus {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: translateX(calc(var(--ta-richtung, 1) * -10px)); }
}
.ta-steuerung { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
/* Mitte: Position im Tag („02 / 08“) über dem Bedienhinweis */
.ta-mitte {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-align: center;
}
.ta-zaehler {
    font-size: clamp(.8125rem, calc(100vw * 14 / 430), .875rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .06em;
    font-variant-numeric: tabular-nums;
    color: #1e293b;
}
.ta-zaehler-gesamt { font-weight: 600; color: #64748b; }
.ta-hinweis {
    font-size: clamp(.65rem, calc(100vw * 12 / 430), .75rem);
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    color: #64748b;
}
.ta-pfeil {
    flex-shrink: 0;
    box-sizing: border-box;
    width: clamp(44px, calc(100vw * 48 / 430), 52px);
    height: clamp(44px, calc(100vw * 48 / 430), 52px);
    border: 0;
    border-radius: 9999px;
    padding: 0;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: #1e293b;
    color: color-mix(in srgb, var(--ta-c) 40%, #1E293B);
    /* Deutlichere Schaltflächenform ohne Rand und ohne Glow: Glas, leicht in der Farbe des
       aktuellen Moments getönt. Größe unverändert. */
    background-color: rgba(255,255,255,.32);
    background-color: color-mix(in srgb, var(--ta-c) 16%, rgba(255,255,255,.55));
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: transform .2s ease, opacity .2s ease, background-color .4s ease, color .4s ease;
    -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) { .ta-pfeil:hover:not([aria-disabled="true"]) { background-color: color-mix(in srgb, var(--ta-c) 26%, rgba(255,255,255,.55)); } }
.ta-pfeil:active:not([aria-disabled="true"]) { transform: scale(.94); }
.ta-pfeil:focus-visible { outline: 2px solid #48a0d6; outline-offset: 3px; }
.ta-pfeil[aria-disabled="true"] { opacity: .3; cursor: default; }
.ta-pfeil svg { width: 18px; height: 18px; }
.ta { --ta-c: #48A0D6; }
.ta[data-farbe="yellow"] { --ta-c: #F59E0B; }
.ta[data-farbe="pink"]   { --ta-c: #D55A92; }
.ta[data-farbe="green"]  { --ta-c: #7FB14E; }
.ta-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Natives Scroll-Snapping in einem schmalen Fangbereich. Kein Scroll-Zwang. */
html:has(.ta--magnet) { scroll-snap-type: y proximity; }
section:has(> div > .ta) { overflow: clip; }
.ta-band { position: absolute; left: 0; width: 1px; visibility: hidden; pointer-events: none; }
.ta-mass {
    position: absolute; top: 0; left: 0; width: 0; height: 100vh; height: 100svh;
    visibility: hidden; pointer-events: none;
}
.ta-faecher { scroll-margin-top: calc(5rem + var(--k) * 16 - (var(--k) * 30 - var(--k) * 18)); }
.ta-steuerung { scroll-margin-bottom: calc(var(--k) * 16); }
.ta--magnet.ta--passt .ta-faecher { scroll-snap-align: start; }
.ta--magnet:not(.ta--passt) .ta-steuerung { scroll-snap-align: end; }
@media (max-width: 360px) { .ta-steuerung { gap: 8px; } }

/* Bühne ab 500px (Tablets, auch mit Seitenzoom, Desktop). Smartphones im Hochformat
   (bis 440px beim iPhone Pro Max, bis rund 480px bei Android) bleiben unverändert. Die Ansicht des Smartphones wird als Ganzes skaliert: Fächer, Text und
   Bedienung hängen an --k. --k ist die kleinere von zwei Grenzen, Breite (430
   Entwurfseinheiten) und Höhe (--ta-k-hoehe, von js/tagesablauf.js gemessen), höchstens
   1.3px (Geometrie-Maximum). So passt das Modul vollständig unter den Kopf.
   Die Nachbarkarten laufen am Bühnenrand weich aus; sichtbar bleibt derselbe Anschnitt
   wie am Smartphone-Rand, keine leeren Kartenflächen daneben. */
@media (min-width: 500px) {
    .ta {
        --ta-hoehenpassung: 1;
        --k: clamp(0.6px, min(calc(100vw / 430), var(--ta-k-hoehe, 1.3px)), 1.3px);
        width: calc(var(--k) * 430);
        max-width: none;
        margin-left: calc(50% - var(--k) * 215);
        margin-right: 0;
    }
    .ta-faecher {
        width: calc(var(--k) * 430);
        max-width: none;
        /* Die Maske wirkt nur innerhalb des Rahmens. Die unteren Nachbarkarten reichen bis
           520 Einheiten (gemessen bei der Sichtbarkeitsgrenze |d| = 2,6), ihr Schatten
           40 weiter. Diese Reserve unter den 450 Einheiten des Fächers wird als Innenabstand
           ergänzt und per negativem Außenabstand neutralisiert: Lage und Fluss bleiben gleich. */
        /* content-box ausdrücklich: Das globale border-box (Tailwind) würde den
           Innenabstand in die Höhe einrechnen, und der Text rückte in die Karten. */
        box-sizing: content-box;
        padding-bottom: calc(var(--k) * (520 + 40 - 450));
        margin-bottom: calc(var(--k) * (520 + 40 - 450) * -1);
        /* Weicher Bühnenrand: voll deckend bis 150 Einheiten neben der Mitte (aktive
           Karte 130 + Rahmenreserve 20), auslaufend bis zum Rand bei 215 Einheiten. */
        -webkit-mask-image: linear-gradient(to right, transparent, #000 calc(var(--k) * (215 - 150)), #000 calc(100% - var(--k) * (215 - 150)), transparent);
        mask-image: linear-gradient(to right, transparent, #000 calc(var(--k) * (215 - 150)), #000 calc(100% - var(--k) * (215 - 150)), transparent);
    }
    .ta-info { max-width: calc(var(--k) * 382); gap: calc(var(--k) * 8); }
    /* Schrift wächst mit --k, höchstens auf das 1,25-Fache der Entwurfsgröße. */
    .ta-text h3 { font-size: min(calc(var(--k) * 30), calc(1.875rem * 1.25)); }
    .ta-text p { margin-top: calc(var(--k) * 12); font-size: min(calc(var(--k) * 17), calc(1.0625rem * 1.25)); }
    .ta-steuerung { gap: calc(var(--k) * 12); margin-top: calc(var(--k) * 4); }
    .ta-mitte { gap: calc(var(--k) * 3); }
    .ta-zaehler { font-size: min(calc(var(--k) * 14), calc(.875rem * 1.25)); }
    .ta-hinweis { font-size: min(calc(var(--k) * 12), calc(.75rem * 1.25)); }
    .ta-pfeil {
        width: clamp(44px, calc(var(--k) * 48), calc(48px * 1.25));
        height: clamp(44px, calc(var(--k) * 48), calc(48px * 1.25));
    }
}

/* Querformat ab 600px (Tablet quer, Desktop, Smartphone quer): Text und Bedienung stehen
   neben dem Fächer. Die Höhe begrenzt nur der Fächer, daher reine CSS-Grenze:
   4 (Abstand unter dem Kopf, siehe scroll-margin-top) + 450 (Fächer) + 16 (unten)
   = 470 Einheiten. Die Breite reicht für Bühne (430), Spalte (40) und mindestens
   23rem Text samt Seitenrand. */
@media (min-width: 600px) and (orientation: landscape) {
    .ta {
        --ta-hoehenpassung: 0;
        --k: clamp(0.6px, min(calc((100vh - 5rem) / (4 + 450 + 16)), calc((100vw - 23rem) / (430 + 40))), 1.3px);
        --k: clamp(0.6px, min(calc((100svh - 5rem) / (4 + 450 + 16)), calc((100vw - 23rem) / (430 + 40))), 1.3px);
        width: auto;
        margin-inline: 0;
        grid-template-columns: calc(var(--k) * 430) minmax(0, 30rem);
        column-gap: calc(var(--k) * 40);
        justify-content: center;
        align-items: center;
    }
    /* Text und Bedienung stehen mittig zu den oberen 340 Einheiten des Fächers
       (450 − 110), in dieser Lage von Anis am 4.10.2026 bestätigt. Der Außenabstand
       unten nimmt die 110 Einheiten aus der Zentrierung, ohne den Fächer zu kürzen. */
    .ta-info { max-width: 30rem; margin: 0 0 calc(var(--k) * 110); }
    /* Die unteren Nachbarkarten laufen auch nach unten weich aus, statt an der
       Sektionskante abzureißen: deckend bis 360 Einheiten (Unterkante der aktiven
       Karte 342 + Rahmen), unsichtbar bei 450, dem Ende des Fächers. Beide Verläufe
       werden geschnitten (intersect), sichtbar ist nur, was in beiden deckend ist. */
    .ta-faecher {
        -webkit-mask-image:
            linear-gradient(to right, transparent, #000 calc(var(--k) * (215 - 150)), #000 calc(100% - var(--k) * (215 - 150)), transparent),
            linear-gradient(to bottom, #000 calc(var(--k) * 360), transparent calc(var(--k) * 450));
        -webkit-mask-composite: source-in;
        mask-image:
            linear-gradient(to right, transparent, #000 calc(var(--k) * (215 - 150)), #000 calc(100% - var(--k) * (215 - 150)), transparent),
            linear-gradient(to bottom, #000 calc(var(--k) * 360), transparent calc(var(--k) * 450));
        mask-composite: intersect;
    }
}
@media (prefers-reduced-motion: reduce) {
    .ta[data-ta-bereit] .ta-text.is-aktiv .ta-text-maske,
    .ta[data-ta-bereit] .ta-text.is-aktiv p,
    .ta[data-ta-bereit] .ta-text.is-geht .ta-text-maske,
    .ta[data-ta-bereit] .ta-text.is-geht p { animation: none; }
    .ta-glow, .ta-pfeil { transition: none; }
    .ta--magnet.ta--passt .ta-faecher,
    .ta--magnet:not(.ta--passt) .ta-steuerung { scroll-snap-align: none; }
}