/*
 * Familie "binde" für Stage-Specials (scene.template = "binde").
 * Kapitänsbinde und Schiedsrichterkarte: Schiri-Gelb, schwarze Binde mit Schlagzeile, Foto mit hartem
 * schwarzen Schatten, Kartenliste, Fortschritt als Kartenreihe.
 * Alle Maße in Container-Einheiten (cqw): 100cqw = Breite der Bühne (Kiosk: 2160 px).
 * Vertrag: docs/vanbommel-special.md (BIND-01 bis BIND-12).
 */

.stage-special-scene.binde-scene {

    --bd-gelb: #f5c518;
    --bd-gelb-deep: #e3ad00;
    --bd-ink: #0f0f10;
    --bd-ink-soft: rgba(15, 15, 16, .9);
    --bd-red: #dc052d;
    --bd-white: #fffdf4;

    inset: 0;
    display: block;
    container-type: size;
    background:
        repeating-linear-gradient(135deg, transparent 0 2.6cqw, rgba(15, 15, 16, .045) 2.6cqw 3cqw),
        radial-gradient(120% 80% at 50% 0%, #ffd83a 0%, var(--bd-gelb) 55%, var(--bd-gelb-deep) 100%);
    color: var(--bd-ink);
    transform: none;
    transition: opacity 900ms ease;
    overflow: hidden;
    z-index: 2;

}

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

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

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

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

.binde-slide.stage-special-slide {

    /* Echte Bühne ca. 100 x 107 cqw: Binde, Medienbereich und Text teilen sich die Höhe, Text wird nie abgeschnitten. */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2.4cqw;
    padding: 12.5cqw 6cqw 19.5cqw;
    transform: none;
    transition: opacity 900ms ease;
    overflow: hidden;

}

/* ---------- Binde (Schlagzeile) ---------- */

.bd-head {

    position: relative;
    z-index: 4;
    flex: 0 0 auto;
    padding: 2cqw 3cqw 2.2cqw 3.6cqw;
    background: var(--bd-ink);
    border-left: 1.6cqw solid var(--bd-red);
    box-shadow: 1cqw 1cqw 0 rgba(15, 15, 16, .28);

}

.bd-kicker {

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

}

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

.bd-head h2 {

    margin: 0;
    color: #fff;
    font-family: var(--font-display);
    font-size: 7cqw;
    font-weight: 900;
    line-height: .96;
    letter-spacing: -.005em;
    text-transform: uppercase;

}

.bd-subtitle {

    margin: 1.3cqw 0 0;
    color: rgba(255, 255, 255, .86);
    font-family: var(--font-display);
    font-size: 3cqw;
    font-weight: 800;
    line-height: 1.15;

}

.binde-slide.is-active .bd-head { animation: bd-deal 800ms cubic-bezier(.2, .7, .2, 1) both; }

@keyframes bd-deal {

    from { opacity: 0; transform: translate(-4cqw, 1cqw) rotate(-1.4deg); }
    to { opacity: 1; transform: none; }

}

@keyframes bd-rise {

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

}

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

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

.bd-media { position: relative; flex: 1 1 0; min-height: 14cqw; }

.bd-photo {

    position: absolute;
    inset: 0 1.2cqw 1.2cqw 0;
    margin: 0;
    border: .8cqw solid var(--bd-ink);
    background: #000;
    box-shadow: 1.2cqw 1.2cqw 0 var(--bd-ink);
    overflow: hidden;

}

.bd-photo img {

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

}

/* BIND-10: Hochformat- oder kleine Fotos (slide.fit = "contain") stehen ganz auf der schwarzen Fläche. */
.bd-fit-contain .bd-photo img { object-fit: contain; }

.binde-slide.is-active .bd-photo img { animation: bd-zoom var(--bd-dur, 14s) ease-out both; }

@keyframes bd-zoom { from { transform: scale(1.02); } to { transform: scale(1.08); } }

.bd-photo figcaption {

    position: absolute;
    left: 0;
    bottom: 0;
    max-width: 90%;
    padding: .6cqw 1.6cqw;
    background: var(--bd-white);
    border-top: .5cqw solid var(--bd-ink);
    border-right: .5cqw solid var(--bd-ink);
    color: var(--bd-ink);
    font-family: var(--font-body);
    font-size: 1.9cqw;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.2;

}

.binde-slide.is-active .bd-photo { animation: bd-photo-in 900ms cubic-bezier(.2, .7, .2, 1) 150ms both; }

@keyframes bd-photo-in {

    from { opacity: 0; transform: translateY(4cqw) rotate(1.6deg); }
    to { opacity: 1; transform: none; }

}

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

.bd-copy { position: relative; z-index: 4; flex: 0 0 auto; }

.bd-body {

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

}

.binde-slide.is-active .bd-copy > * { animation: bd-rise 900ms cubic-bezier(.2, .7, .2, 1) 350ms both; }

.bd-quote { margin: 1.4cqw 0 0; padding: 1.4cqw 0 0; border-top: .35cqw solid var(--bd-ink); }
.bd-quote p { margin: 0; color: var(--bd-ink); font-family: var(--font-display); font-size: 3.3cqw; font-weight: 800; line-height: 1.15; }
.bd-quote footer { margin-top: .9cqw; color: var(--bd-red); font-family: var(--font-display); font-size: 2cqw; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }

.bd-facts { position: relative; z-index: 4; flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 1cqw; }

.bd-facts span {

    padding: .7cqw 1.5cqw;
    background: var(--bd-ink);
    color: var(--bd-gelb);
    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) */

.bd-big {

    position: absolute;
    left: 0;
    right: 0;
    bottom: 14cqw;
    color: transparent;
    -webkit-text-stroke: .4cqw rgba(15, 15, 16, .2);
    font-family: var(--font-display);
    font-size: 34cqw;
    font-weight: 900;
    line-height: .8;
    text-align: center;
    letter-spacing: -.02em;
    pointer-events: none;

}

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

.binde-slide.no-media .bd-copy { margin-top: 2cqw; }

/* ---------- Layout titel (BIND-03) ---------- */

.bd-layout-titel .bd-head { border-left-width: 2.4cqw; }
.bd-layout-titel .bd-head h2 { font-size: 9.4cqw; line-height: .9; }

/* ---------- Layout zahlen (BIND-04) ---------- */

.bd-media-stats { display: flex; flex-direction: column; gap: 2cqw; min-height: 18cqw; }
.bd-media-stats .bd-photo { position: relative; inset: auto; flex: 1 1 0; min-height: 16cqw; margin: 0 1.2cqw 1.2cqw 0; }

.bd-stats { flex: 0 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.8cqw; }
.bd-stats[data-count="1"] { grid-template-columns: 1fr; }
.bd-stats[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
.bd-media-stats:not(.has-photo) { justify-content: center; }
.bd-media-stats:not(.has-photo) .bd-stat strong { font-size: 7.6cqw; }

.bd-stat {

    padding: 1.8cqw 2cqw;
    background: var(--bd-white);
    border: .5cqw solid var(--bd-ink);
    border-top-width: 1.2cqw;
    border-radius: 1cqw;
    box-shadow: .9cqw .9cqw 0 rgba(15, 15, 16, .85);

}

.bd-stat strong { display: block; color: var(--bd-ink); font-family: var(--font-display); font-size: 5cqw; font-weight: 900; line-height: .95; white-space: nowrap; }
.bd-stat small { display: block; margin-top: .8cqw; color: var(--bd-red); font-family: var(--font-display); font-size: 2.1cqw; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }

.bd-stat:nth-child(odd) { transform: rotate(-.8deg); }
.bd-stat:nth-child(even) { transform: rotate(.8deg); }

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

/* ---------- Layout kommentar (BIND-05) ---------- */

.bd-layout-kommentar .bd-head h2 { font-size: 5.2cqw; }

.bd-layout-kommentar .bd-quote {

    position: relative;
    margin: 0;
    padding: 5cqw 3cqw 2.4cqw 3cqw;
    border: .5cqw solid var(--bd-ink);
    background: var(--bd-white);
    box-shadow: 1.2cqw 1.2cqw 0 var(--bd-ink);

}

.bd-layout-kommentar .bd-quote::before {

    content: "\201E";
    position: absolute;
    top: -1cqw;
    left: 2cqw;
    color: var(--bd-red);
    font-family: var(--font-display);
    font-size: 14cqw;
    font-weight: 900;
    line-height: 1;

}

.bd-layout-kommentar .bd-quote p { font-size: 4.4cqw; line-height: 1.12; padding-left: 7cqw; }
.bd-layout-kommentar .bd-quote footer { padding-left: 7cqw; }

/* ---------- Layout galerie (BIND-06) ---------- */

.bd-media-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw; }
.bd-media-duo .bd-photo { position: relative; inset: auto; min-height: 20cqw; margin: 0 1.2cqw 1.2cqw 0; }
.bd-media-duo .bd-photo:only-child { grid-column: 1 / -1; }

/* ---------- Layout akte (BIND-07): Kartenliste ---------- */

.bd-media-akte { display: flex; flex-direction: column; justify-content: center; flex: 0 0 auto; min-height: 0; }

.bd-akte {

    list-style: none;
    margin: 0 1.2cqw 1.2cqw 0;
    padding: 1.6cqw 3cqw;
    background: var(--bd-white);
    border: .6cqw solid var(--bd-ink);
    box-shadow: 1.2cqw 1.2cqw 0 var(--bd-ink);

}

.bd-akte li {

    display: grid;
    grid-template-columns: 3.4cqw 18cqw 1fr;
    align-items: center;
    column-gap: 2.2cqw;
    padding: .9cqw 0;
    border-bottom: .2cqw dashed rgba(15, 15, 16, .35);
    opacity: 0;

}

.bd-akte li:last-child { border-bottom: 0; }
.bd-akte li b { color: var(--bd-ink); font-family: var(--font-display); font-size: 2.4cqw; font-weight: 900; letter-spacing: .04em; }
.bd-akte-text { color: var(--bd-ink-soft); font-family: var(--font-body); font-size: 2.4cqw; line-height: 1.2; }
.bd-akte-text strong { display: block; color: var(--bd-red); font-family: var(--font-display); font-size: 2cqw; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }

.binde-slide.is-active .bd-akte li { animation: bd-rise 700ms cubic-bezier(.2, .7, .2, 1) var(--bd-row-delay, 500ms) both; }

.bd-card {

    display: block;
    width: 3.4cqw;
    height: 4.8cqw;
    border: .3cqw solid var(--bd-ink);
    border-radius: .5cqw;
    transform: rotate(-6deg);
    box-shadow: .3cqw .3cqw 0 rgba(15, 15, 16, .35);

}

.bd-card-gelb { background: var(--bd-gelb); }
.bd-card-rot { background: var(--bd-red); }
.bd-card-gelbrot { background: linear-gradient(135deg, var(--bd-gelb) 0 50%, var(--bd-red) 50% 100%); }
.bd-card-sperre { background: var(--bd-ink); }

/* ---------- Kopfzeile: Binde ---------- */

.bd-header {

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 2cqw;
    padding: 1.8cqw 5cqw;
    background: var(--bd-ink);
    border-bottom: .7cqw solid var(--bd-white);
    box-shadow: 0 .9cqw 0 var(--bd-ink);

}

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

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

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

/* ---------- Fußleiste: Kartenzahl, Fortschritt, Kapitel (SPEC-31) ---------- */

.bd-foot {

    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(--bd-gelb-deep) 60%, transparent);

}

.bd-nr { grid-row: 2; grid-column: 1; display: flex; align-items: baseline; gap: .5cqw; padding: .7cqw 1.4cqw; background: var(--bd-ink); color: #fff; font-family: var(--font-display); font-weight: 900; }
.bd-nr small { margin-right: .8cqw; color: var(--bd-gelb); font-size: 2cqw; letter-spacing: .14em; text-transform: uppercase; }
.bd-nr b { min-width: 5.4cqw; font-size: 5cqw; line-height: 1; text-align: right; }
.bd-nr i { font-size: 2.6cqw; font-style: normal; opacity: .7; }
.bd-nr span { font-size: 3cqw; opacity: .8; }

.bd-track { grid-row: 2; grid-column: 2; display: flex; gap: .35cqw; }
.bd-bar { position: relative; flex: 1; height: 2.4cqw; overflow: hidden; border: .2cqw solid var(--bd-ink); border-radius: .3cqw; background: rgba(255, 253, 244, .55); }
.bd-bar.is-chapter-start { margin-left: 1.4cqw; }
.bd-bar i { position: absolute; inset: 0; width: 0; background: var(--bd-red); }
.bd-bar.is-past i { width: 100%; background: var(--bd-ink); }
.bd-bar.is-current i { animation: bd-fill linear both; }

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

.bd-chapters { grid-column: 1 / -1; grid-row: 1; display: flex; gap: .4cqw; margin: 0 0 1.2cqw; font-family: var(--font-display); }
.bd-chapters span { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: .5cqw 0 .6cqw; border-radius: .4cqw; color: var(--bd-ink-soft); text-align: center; font-size: 2cqw; font-weight: 800; opacity: .8; transition: opacity 600ms ease, background 600ms ease, color 600ms ease; }
.bd-chapters span.is-current { background: var(--bd-ink); color: var(--bd-gelb); opacity: 1; }
.bd-chapters[data-count="0"] { display: none; }

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

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

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

}