/*
 * Familie "karte" für Stage-Specials (scene.template = "karte").
 * Lageplan: warmes Kartenpapier, Straßenraster, Straßenschild, Pins, Haltestellenlinie.
 * Alle Maße in Container-Einheiten (cqw): 100cqw = Breite der Bühne (Kiosk: 2160 px).
 * Vertrag: docs/saebener-special.md (KARTE-01 bis KARTE-12).
 */

.stage-special-scene.karte-scene {

    --kt-paper: #f0ebdd;
    --kt-paper-deep: #e4dec9;
    --kt-ink: #1a1c21;
    --kt-ink-soft: rgba(26, 28, 33, .9);
    --kt-red: #dc052d;
    --kt-blue: #0a3a73;
    --kt-street: rgba(26, 28, 33, .09);

    inset: 0;
    display: block;
    container-type: size;
    background:
        radial-gradient(circle at 18% 12%, rgba(255, 255, 255, .6), transparent 50%),
        linear-gradient(180deg, var(--kt-paper), var(--kt-paper-deep));
    color: var(--kt-ink);
    transform: none;
    transition: opacity 900ms ease;
    overflow: hidden;
    z-index: 2;

}

.karte-scene * { box-sizing: border-box; }

#stage.has-karte .stage-rotation-indicator[data-mode="slide"] { opacity: 0; }

/* ---------- Kartenraster im Hintergrund ---------- */

.kt-grid { position: absolute; inset: 0; }
.kt-grid svg { width: 100%; height: 100%; }

.kt-street { fill: none; stroke: var(--kt-street); stroke-width: 2.2; stroke-linecap: round; }
.kt-street-main { stroke-width: 4; stroke: rgba(220, 5, 45, .1); }

/* ---------- Slides ---------- */

.kt-slides { position: absolute; inset: 0; }

.karte-slide.stage-special-slide {

    /* Echte Bühne ist rund 100 x 107 cqw groß: Foto und Text teilen sich die Höhe (Foto schrumpft, Text nie). */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2.4cqw;
    padding: 10.5cqw 6cqw 17cqw;
    transform: none;
    transition: opacity 900ms ease;
    overflow: hidden;

}

/* ---------- Medienbereich ---------- */

.kt-media {

    position: relative;
    flex: 1 1 0;
    min-height: 24cqw;

}

.kt-photo {

    position: absolute;
    inset: 0;
    margin: 0;
    padding: 1.2cqw;
    background: #fff;
    box-shadow: 0 1cqw 2.6cqw rgba(26, 28, 33, .28);
    overflow: hidden;

}

.kt-photo img {

    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--kt-focus, 50% 50%);
    display: block;

}

.kt-photo figcaption {

    position: absolute;
    right: 1.8cqw;
    bottom: 1.8cqw;
    max-width: 80%;
    padding: .5cqw 1.2cqw;
    background: rgba(0, 0, 0, .9);
    color: #fff;
    font-family: var(--font-body);
    font-size: 1.9cqw;
    font-weight: 700;
    letter-spacing: .03em;
    line-height: 1.2;
    text-transform: uppercase;
    text-shadow: 0 .1cqw .2cqw rgba(0, 0, 0, .8);

}

.karte-slide.is-active .kt-photo img { animation: kt-zoom var(--kt-dur, 14s) cubic-bezier(.25, .1, .25, 1) both; }

@keyframes kt-zoom {

    from { transform: scale(1.02); }
    to { transform: scale(1.09); }

}

/* ---------- Layout postkarte (KARTE-03) ---------- */

.kt-layout-postkarte .kt-photo { transform: rotate(-.9deg); }

.karte-slide.is-active.kt-layout-postkarte .kt-photo { animation: kt-drop 900ms cubic-bezier(.2, .7, .2, 1) both; }

@keyframes kt-drop {

    from { opacity: 0; transform: translateY(-3cqw) rotate(-3deg); }
    to { opacity: 1; transform: rotate(-.9deg); }

}

.kt-photo-second {

    inset: auto 2.4cqw 2.4cqw auto;
    width: auto;
    height: 58%;
    aspect-ratio: 3 / 2;
    transform: rotate(3deg);

}

.karte-slide.is-active .kt-photo-second { animation: kt-drop-second 900ms cubic-bezier(.2, .7, .2, 1) 450ms both; }

@keyframes kt-drop-second {

    from { opacity: 0; transform: translateY(3cqw) rotate(6deg); }
    to { opacity: 1; transform: rotate(3deg); }

}

/* Briefmarke: gestrichelter Rahmen oben rechts */
.kt-stamp {

    position: absolute;
    top: -2.2cqw;
    right: -1.4cqw;
    width: 8cqw;
    height: 9.6cqw;
    background: var(--kt-red) url("assets/teams/germany_bayern-munchen.football-logos.cc.svg") center / 62% no-repeat;
    outline: .6cqw dashed #fff;
    outline-offset: -.9cqw;
    box-shadow: 0 .5cqw 1.2cqw rgba(26, 28, 33, .3);
    transform: rotate(5deg);

}

/* Zweitfoto: eigene Bildunterschrift ausgeblendet (steht im Nachweis des Hauptfotos); Hauptnachweis links, damit er nicht verdeckt wird. */
.kt-photo-second figcaption { display: none; }
.kt-media.has-second > .kt-photo:not(.kt-photo-second) figcaption { right: auto; left: 1.8cqw; }
.kt-layout-baustelle .kt-media > .kt-photo:not(.kt-photo-second) figcaption { bottom: auto; top: 1.8cqw; right: auto; left: 1.8cqw; }

/* ---------- Layout plan (KARTE-04) ---------- */

.kt-plan .kt-pins { position: absolute; inset: 1.2cqw; }

.kt-pin {

    position: absolute;
    display: flex;
    align-items: center;
    gap: 1cqw;
    transform: translate(-50%, -50%);
    opacity: 0;

}

.kt-pin b {

    flex: none;
    width: 4.2cqw;
    height: 4.2cqw;
    display: grid;
    place-items: center;
    border: .35cqw solid #fff;
    border-radius: 50%;
    background: #b80021;
    color: #fff;
    font-family: var(--font-display);
    font-size: 2.8cqw;
    font-weight: 900;
    box-shadow: 0 .4cqw 1cqw rgba(26, 28, 33, .45);

}

.kt-pin span {

    padding: .6cqw 1.4cqw;
    border: .25cqw solid #fff;
    background: #000;
    color: #fff;
    font-family: var(--font-display);
    font-size: 2.6cqw;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;

}

.kt-pin.is-left { flex-direction: row-reverse; }

.karte-slide.is-active .kt-pin { animation: kt-pin-in 600ms cubic-bezier(.2, .8, .2, 1.2) var(--kt-pin-delay, 600ms) both; }

@keyframes kt-pin-in {

    from { opacity: 0; transform: translate(-50%, -150%) scale(.6); }
    to { opacity: 1; transform: translate(-50%, -50%); }

}

/* ---------- Layout damals (KARTE-05) ---------- */

.kt-damals .kt-before,
.kt-damals .kt-after { inset: 0; }

.karte-slide.is-active .kt-damals .kt-after { animation: kt-wipe 2600ms cubic-bezier(.45, .05, .3, 1) 1100ms both; }

@keyframes kt-wipe {

    from { clip-path: inset(0 0 0 100%); }
    to { clip-path: inset(0 0 0 0); }

}

.kt-tag {

    position: absolute;
    top: 2.6cqw;
    padding: .7cqw 1.6cqw;
    border: .25cqw solid #fff;
    background: #000;
    color: #fff;
    font-family: var(--font-display);
    font-size: 3cqw;
    font-weight: 900;
    letter-spacing: .12em;
    z-index: 3;

}

.kt-tag-before { left: 2.6cqw; }
.kt-tag-after { right: 2.6cqw; background: #b80021; opacity: 0; }
.kt-tag:empty { display: none; }

.karte-slide.is-active .kt-tag-after { animation: kt-fade 600ms ease 2800ms both; }

@keyframes kt-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Layout pressestueberl (KARTE-06) ---------- */

.kt-subtitles {

    position: absolute;
    left: 1.2cqw;
    right: 1.2cqw;
    bottom: 1.2cqw;
    margin: 0;
    padding: 5cqw 2.6cqw 3.4cqw;
    list-style: none;
    display: grid;
    background: linear-gradient(0deg, rgba(0, 0, 0, .96) 70%, rgba(0, 0, 0, .75) 90%, rgba(0, 0, 0, 0));
    z-index: 3;

}

/* Alle Zeilen teilen sich eine Rasterzelle und erscheinen nacheinander. */
.kt-subtitles li { grid-area: 1 / 1; opacity: 0; align-self: end; }

.kt-subtitles p {

    margin: 0;
    color: #fff;
    text-shadow: 0 .15cqw .5cqw rgba(0, 0, 0, .9);
    font-family: var(--font-display);
    font-size: 4.6cqw;
    font-weight: 900;
    line-height: 1.1;

}

.kt-subtitles small {

    display: block;
    margin-top: .8cqw;
    color: #fff;
    opacity: .9;
    font-family: var(--font-display);
    font-size: 2cqw;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;

}

.karte-slide.is-active .kt-subtitles li { animation: kt-line-flash 1500ms ease var(--kt-line-delay, 700ms) both; }
.karte-slide.is-active .kt-subtitles li:last-child { animation-name: kt-line-stay; }

@keyframes kt-line-flash {

    0% { opacity: 0; transform: translateY(1cqw); }
    14% { opacity: 1; transform: none; }
    86% { opacity: 1; }
    100% { opacity: 0; }

}

@keyframes kt-line-stay {

    from { opacity: 0; transform: translateY(1cqw); }
    to { opacity: 1; transform: none; }

}

/* Der Bildnachweis wandert nach oben, damit das Untertitelband ihn nicht verdeckt. */
.kt-layout-pressestueberl .kt-photo figcaption { bottom: auto; top: 1.8cqw; }

.kt-layout-pressestueberl .kt-media { min-height: 34cqw; }
.kt-layout-baustelle .kt-media { min-height: 30cqw; }

/* ---------- Layout schild (KARTE-07) ---------- */

.kt-sign-wrap { display: flex; flex-direction: column; justify-content: center; gap: 3cqw; }

.kt-sign {

    position: relative;
    width: 100%;
    padding: 3.4cqw 4cqw 3cqw;
    border: .8cqw solid #fff;
    border-radius: 1.4cqw;
    background: var(--kt-blue);
    box-shadow: 0 0 0 .5cqw var(--kt-blue), 0 1.4cqw 3cqw rgba(26, 28, 33, .35);
    color: #fff;
    text-align: center;
    font-family: var(--font-display);

}

.kt-sign strong {

    display: block;
    font-size: 8.8cqw;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .02em;

}

.kt-sign small {

    display: block;
    margin-top: 1.4cqw;
    color: rgba(255, 255, 255, .82);
    font-size: 3cqw;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;

}

.kt-sign s {

    display: block;
    margin-bottom: 1.6cqw;
    color: rgba(255, 255, 255, .6);
    font-size: 3.2cqw;
    font-weight: 800;
    text-decoration-color: #ff5a73;
    text-decoration-thickness: .4cqw;

}

.karte-slide.is-active .kt-sign { animation: kt-sign-in 1000ms cubic-bezier(.2, .8, .2, 1.1) both; }

@keyframes kt-sign-in {

    from { opacity: 0; transform: translateY(-5cqw) rotate(-2deg); }
    to { opacity: 1; transform: none; }

}

.kt-photo-small { position: relative; inset: auto; flex: 1 1 0; min-height: 12cqw; width: 100%; }
.kt-sign { flex: 0 0 auto; }

/* ---------- Layout baustelle (KARTE-08) ---------- */

/* Zahlenkacheln liegen im Foto; ein Zweitfoto rückt nach oben rechts, damit beide nicht kollidieren. */
.kt-layout-baustelle .kt-photo-second { inset: 3cqw 3cqw auto auto; width: auto; height: 42%; }

.kt-layout-baustelle .kt-photo {

    border: 0;
    padding: 1.2cqw;
    background:
        repeating-linear-gradient(135deg, #f7c600 0 2.4cqw, #1a1c21 2.4cqw 4.8cqw);

}

.kt-stats {

    position: absolute;
    left: 3cqw;
    right: 3cqw;
    bottom: 3cqw;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4cqw;

}

.kt-stats[data-count="1"] { grid-template-columns: 1fr; }
.kt-stats[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
.kt-stats[data-count="4"] { grid-template-columns: repeat(2, 1fr); }

.kt-stat {

    padding: 1.8cqw 2cqw;
    background: #fff;
    border-top: .6cqw solid var(--kt-red);
    box-shadow: 0 .6cqw 1.6cqw rgba(26, 28, 33, .22);

}

.kt-stat strong {

    display: block;
    color: var(--kt-ink);
    font-family: var(--font-display);
    font-size: 4.4cqw;
    white-space: nowrap;
    font-weight: 900;
    line-height: .95;

}

.kt-stat small {

    display: block;
    margin-top: .8cqw;
    color: var(--kt-red);
    font-family: var(--font-display);
    font-size: 2.1cqw;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;

}

.karte-slide.is-active .kt-stat { animation: kt-rise 800ms cubic-bezier(.2, .7, .2, 1) 500ms both; }
.karte-slide.is-active .kt-stat:nth-child(2) { animation-delay: 700ms; }
.karte-slide.is-active .kt-stat:nth-child(3) { animation-delay: 900ms; }
.karte-slide.is-active .kt-stat:nth-child(4) { animation-delay: 1100ms; }

/* ---------- Text ---------- */

.kt-copy {

    position: relative;
    z-index: 4;
    flex: 0 0 auto;

}

.kt-kicker {

    display: flex;
    align-items: center;
    gap: 1.4cqw;
    margin: 0 0 1.4cqw;
    color: var(--kt-red);
    font-family: var(--font-display);
    font-size: 2.3cqw;
    font-weight: 900;
    letter-spacing: .2em;
    text-transform: uppercase;

}

.kt-kicker i { width: 4cqw; height: .3cqw; background: var(--kt-ink); }
.kt-kicker:empty { display: none; }

.kt-copy h2 {

    margin: 0;
    max-width: 84cqw;
    color: var(--kt-ink);
    font-family: var(--font-display);
    font-size: 6.4cqw;
    font-weight: 900;
    line-height: .96;
    text-transform: uppercase;

}

.kt-subtitle {

    margin: 1.4cqw 0 0;
    color: var(--kt-ink);
    font-family: var(--font-display);
    font-size: 3.2cqw;
    font-weight: 800;
    line-height: 1.15;

}

.kt-body {

    max-width: none;
    margin: 1.2cqw 0 0;
    color: var(--kt-ink-soft);
    font-family: var(--font-body);
    font-size: 2.8cqw;
    line-height: 1.28;

}

.kt-quote {

    margin: 1.8cqw 0 0;
    padding: 0 0 0 2.4cqw;
    border-left: .6cqw solid var(--kt-red);

}

.kt-quote p {

    margin: 0;
    color: var(--kt-ink);
    font-family: var(--font-display);
    font-size: 3.3cqw;
    font-weight: 800;
    line-height: 1.15;

}

.kt-quote footer {

    margin-top: .9cqw;
    color: var(--kt-red);
    font-family: var(--font-display);
    font-size: 2cqw;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;

}

.karte-slide.is-active .kt-copy > * { animation: kt-rise 900ms cubic-bezier(.2, .7, .2, 1) both; }
.karte-slide.is-active .kt-copy > :nth-child(2) { animation-delay: 120ms; }
.karte-slide.is-active .kt-copy > :nth-child(3) { animation-delay: 220ms; }
.karte-slide.is-active .kt-copy > :nth-child(n+4) { animation-delay: 320ms; }

@keyframes kt-rise {

    from { opacity: 0; transform: translateY(2cqw); }
    to { opacity: 1; transform: none; }

}

.kt-facts {

    position: relative;
    z-index: 4;
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 1cqw;

}

.kt-facts span {

    padding: .7cqw 1.5cqw;
    border: .2cqw solid var(--kt-ink);
    color: var(--kt-ink);
    font-family: var(--font-display);
    font-size: 2.1cqw;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;

}

/* Große Umrisszahl als Leitmotiv für Slides ohne Foto (slide.big) */

.kt-big {

    position: absolute;
    left: 0;
    right: 0;
    bottom: 12cqw;
    color: transparent;
    -webkit-text-stroke: .35cqw rgba(220, 5, 45, .3);
    font-family: var(--font-display);
    font-size: 34cqw;
    font-weight: 900;
    line-height: .8;
    text-align: center;
    letter-spacing: -.02em;
    pointer-events: none;

}

.karte-slide.is-active .kt-big { animation: kt-fade 1400ms ease both; }

/* Ohne Medienbereich (Layout zitat, fehlendes Foto): Text rückt nach oben (SPEC-16). */

.karte-slide.no-media .kt-copy { margin-top: 3cqw; }

.kt-layout-zitat .kt-copy {

    padding: 4cqw 4.4cqw;
    background: #fffdf4;
    box-shadow: 0 1cqw 2.6cqw rgba(26, 28, 33, .22);
    transform: rotate(-.6deg);
    margin-top: 4cqw;

}

.kt-layout-zitat .kt-copy::before {

    content: "";
    position: absolute;
    top: -2cqw;
    left: 50%;
    width: 14cqw;
    height: 4cqw;
    margin-left: -7cqw;
    background: rgba(220, 5, 45, .5);
    transform: rotate(-2deg);

}

.kt-layout-zitat .kt-copy h2 { font-size: 8cqw; }
.kt-layout-zitat .kt-body { font-size: 3.6cqw; max-width: none; }
.kt-layout-zitat .kt-facts { display: none; }

/* ---------- Kopfzeile ---------- */

.kt-header {

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 2cqw;
    padding: 1.8cqw 5cqw;

}

.kt-header img { width: 6cqw; height: auto; }

.kt-title { display: grid; gap: .5cqw; font-family: var(--font-display); text-transform: uppercase; }
.kt-title strong { color: var(--kt-ink); font-size: 3.2cqw; font-weight: 900; letter-spacing: .08em; line-height: 1; }
.kt-title span { color: var(--kt-red); font-size: 2cqw; font-weight: 800; letter-spacing: .12em; }

.kt-chapter-now { margin-left: auto; text-align: right; font-family: var(--font-display); text-transform: uppercase; }
.kt-chapter-now.is-empty { visibility: hidden; }
.kt-chapter-now small { display: block; color: var(--kt-ink-soft); font-size: 1.9cqw; font-weight: 800; letter-spacing: .22em; }
.kt-chapter-now strong { display: block; margin-top: .5cqw; color: var(--kt-ink); font-size: 3.2cqw; font-weight: 900; letter-spacing: .08em; }

/* ---------- Haltestellenlinie und Hausnummer (SPEC-31) ---------- */

.kt-line {

    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 2.4cqw;
    padding: 1.6cqw 5cqw 3cqw;
    background: linear-gradient(0deg, var(--kt-paper-deep) 60%, transparent);

}

/* Hausnummernschild: laufende Slide-Nummer */
.kt-nr {

    display: flex;
    align-items: baseline;
    gap: .3cqw;
    padding: .7cqw 1.4cqw;
    border: .3cqw solid #fff;
    border-radius: .6cqw;
    background: var(--kt-blue);
    box-shadow: 0 0 0 .25cqw var(--kt-blue);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 900;

}

.kt-nr b { font-size: 5cqw; line-height: 1; min-width: 5.4cqw; text-align: right; }
.kt-nr i { font-size: 2.6cqw; font-style: normal; opacity: .7; }
.kt-nr span { font-size: 3cqw; opacity: .8; }

.kt-track { display: flex; gap: .35cqw; }
.kt-bar { position: relative; flex: 1; height: 1.4cqw; overflow: hidden; background: rgba(26, 28, 33, .18); border-radius: .5cqw; }
.kt-bar.is-chapter-start { margin-left: 1.4cqw; }
.kt-bar i { position: absolute; inset: 0; width: 0; background: var(--kt-red); }
.kt-bar.is-past i { width: 100%; background: var(--kt-blue); }
.kt-bar.is-current i { animation: kt-fill linear both; }

@keyframes kt-fill { from { width: 0; } to { width: 100%; } }

.kt-chapters { display: flex; gap: 1cqw; margin-top: 1cqw; font-family: var(--font-display); text-transform: uppercase; }
/* Kapitelzeile über der Linie: volle Breite, gleiche Breite je Kapitel, Schrift ohne Versalien (lesbarer). */
.kt-chapters { grid-column: 1 / -1; grid-row: 1; margin: 0 0 1.2cqw; gap: .4cqw; text-transform: none; }
.kt-chapters span { flex: 1 1 0 !important; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: .5cqw 0 .6cqw; border-bottom: .5cqw solid transparent; color: var(--kt-ink-soft); text-align: center; letter-spacing: 0; font-size: 2cqw; font-weight: 800; opacity: .85; transition: opacity 600ms ease, color 600ms ease; }
.kt-chapters span.is-current { color: var(--kt-red); border-bottom-color: var(--kt-red); opacity: 1; }
.kt-chapters[data-count="0"] { display: none; }
.kt-nr { grid-row: 2; grid-column: 1; }
.kt-track { grid-row: 2; grid-column: 2; }

/* ---------- Ruhige Variante (QS-13): bei reduzierter Bewegung steht alles im Endzustand ---------- */

@media (prefers-reduced-motion: reduce) {

    .karte-scene *, .karte-scene *::before, .karte-scene *::after { animation: none !important; transition: none !important; }
    .kt-bar.is-current i { width: 100%; }

}