/* Spielzeiten (js/schema.js). In der Garderobe steht ein Bühnenmodell, wie es Bühnenbildner aus Pappe bauen: Saum,
   Seitenvorhänge, Rundhorizont mit Schildern, Bällebad und Plüschleiste in den Farben der Wahl. Darunter die
   Spielzeiten als Kärtchen mit ihrem eigenen kleinen Bühnenbild und die eigene Wahl für Vorhang, Bällebad und Neon.
   Wer wählt, sieht das Modell weich umfärben; die echte Bühne baut erst der Umbau hinter dem Vorhang um
   (js/vorhangwechsel.js). */

/* Damit das Modell überblenden kann, sind seine Farben als Farben angemeldet; die Anfangswerte sind die Nachtvorstellung */
@property --samt-schatten { syntax: '<color>'; inherits: true; initial-value: #6A0430; }
@property --samt-tief { syntax: '<color>'; inherits: true; initial-value: #970A47; }
@property --samt-ton { syntax: '<color>'; inherits: true; initial-value: #BE175C; }
@property --samt-glanz { syntax: '<color>'; inherits: true; initial-value: #D7417B; }
@property --samt-licht { syntax: '<color>'; inherits: true; initial-value: #FFBEDC; }
@property --samt-dunkel { syntax: '<color>'; inherits: true; initial-value: #18000C; }
@property --rund-dunkel { syntax: '<color>'; inherits: true; initial-value: #1F7778; }
@property --rund-mitte { syntax: '<color>'; inherits: true; initial-value: #2FA6A5; }
@property --prospekt { syntax: '<color>'; inherits: true; initial-value: #3DC7C6; }
@property --rund-hell { syntax: '<color>'; inherits: true; initial-value: #35B3B2; }
@property --rund-fuss { syntax: '<color>'; inherits: true; initial-value: #1C6B6D; }
@property --schlitz-tief { syntax: '<color>'; inherits: true; initial-value: #0E3A3D; }
@property --schlitz-kante { syntax: '<color>'; inherits: true; initial-value: #247B7C; }
@property --pluesch-tief { syntax: '<color>'; inherits: true; initial-value: #400428; }
@property --pluesch-mitte { syntax: '<color>'; inherits: true; initial-value: #960E56; }
@property --pluesch { syntax: '<color>'; inherits: true; initial-value: #E8348E; }
@property --pluesch-hell { syntax: '<color>'; inherits: true; initial-value: #FF70B6; }
@property --becken { syntax: '<color>'; inherits: true; initial-value: #0E0424; }
@property --becken-grund { syntax: '<color>'; inherits: true; initial-value: #2A1150; }
@property --bad-0 { syntax: '<color>'; inherits: true; initial-value: #FF3D5A; }
@property --bad-1 { syntax: '<color>'; inherits: true; initial-value: #FFD93B; }
@property --bad-2 { syntax: '<color>'; inherits: true; initial-value: #4282C2; }
@property --bad-3 { syntax: '<color>'; inherits: true; initial-value: #EE6EFA; }
@property --bad-4 { syntax: '<color>'; inherits: true; initial-value: #FF9A2E; }
@property --bad-5 { syntax: '<color>'; inherits: true; initial-value: #3DC7C6; }
@property --bad-6 { syntax: '<color>'; inherits: true; initial-value: #7A3FD0; }
@property --bad-7 { syntax: '<color>'; inherits: true; initial-value: #F4F1FA; }

/* der Samt im Kleinen: dieselben Falten im Drittel des Rapports */
.modell, .sz-bild, .sz-muster.stoff {
  --samt: repeating-linear-gradient(90deg, var(--samt-schatten) 0, var(--samt-tief) 3px, var(--samt-ton) 6px, var(--samt-glanz) 7.6px, var(--samt-ton) 9.3px, var(--samt-tief) 12.6px, var(--samt-schatten) 16px);
}

/* ---------- Das Bühnenmodell ---------- */

.modell {
  --uebergang: .7s var(--aus);
  position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 16 / 10;
  border: var(--kante) solid var(--tinte); border-radius: var(--rund); background: var(--becken);
  box-shadow: var(--versatz-klein);
  transition: --samt-schatten var(--uebergang), --samt-tief var(--uebergang), --samt-ton var(--uebergang), --samt-glanz var(--uebergang),
    --samt-licht var(--uebergang), --samt-dunkel var(--uebergang), --rund-dunkel var(--uebergang), --rund-mitte var(--uebergang),
    --prospekt var(--uebergang), --rund-hell var(--uebergang), --rund-fuss var(--uebergang), --schlitz-tief var(--uebergang),
    --schlitz-kante var(--uebergang), --pluesch-tief var(--uebergang), --pluesch-mitte var(--uebergang), --pluesch var(--uebergang),
    --pluesch-hell var(--uebergang), --becken var(--uebergang), --becken-grund var(--uebergang),
    --bad-0 var(--uebergang), --bad-1 var(--uebergang), --bad-2 var(--uebergang), --bad-3 var(--uebergang),
    --bad-4 var(--uebergang), --bad-5 var(--uebergang), --bad-6 var(--uebergang), --bad-7 var(--uebergang);
}
@media (min-width: 640px) { .modell { aspect-ratio: 2 / 1; } }
.modell > * { position: absolute; }

/* der Rundhorizont mit Scheinwerferflecken, Korn und Randabdunklung */
.mo-prospekt {
  inset: 0; z-index: 0;
  background:
    radial-gradient(60% 55% at 22% 8%, rgba(255, 250, 225, .42), rgba(255, 250, 225, 0) 70%),
    radial-gradient(50% 50% at 80% 4%, rgba(225, 245, 255, .32), rgba(225, 245, 255, 0) 70%),
    radial-gradient(130% 60% at 50% 100%, rgba(255, 206, 110, .3), rgba(255, 206, 110, 0) 62%),
    linear-gradient(180deg, var(--rund-dunkel) 0%, var(--rund-mitte) 26%, var(--prospekt) 54%, var(--rund-hell) 80%, var(--rund-fuss) 100%);
}
.mo-prospekt::before { content: ""; position: absolute; inset: 0; background: var(--korn); opacity: .3; mix-blend-mode: overlay; }
.mo-prospekt::after { content: ""; position: absolute; inset: 0; background: radial-gradient(85% 80% at 50% 45%, color-mix(in srgb, var(--wurf) 0%, transparent) 52%, color-mix(in srgb, var(--wurf) 45%, transparent) 100%); }

/* Kulissenschienen und drei Pappschilder am Stab, eins im Spot */
.mo-schiene {
  left: 9%; right: 9%; height: 4px; border-radius: 2px; z-index: 1;
  background: linear-gradient(180deg, var(--schlitz-tief), var(--schlitz-kante));
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .45);
}
.mo-schiene.eins { top: 52%; }
.mo-schiene.zwei { top: 70%; left: 13%; right: 13%; opacity: .8; }
.mo-schild {
  z-index: 2; width: 17%; height: 15%; translate: 0 -100%; rotate: var(--k, 0deg);
  background: linear-gradient(172deg, #FFFFFF, #EFEADF); border: 2px solid var(--tinte); border-radius: 3px;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--tinte) 50%, transparent), 0 4px 6px -2px color-mix(in srgb, var(--wurf) 45%, transparent);
}
/* die gemalte Zeile: zwei Striche Pinselschrift */
.mo-schild::before {
  content: ""; position: absolute; left: 12%; right: 30%; top: 26%; height: 44%;
  background: linear-gradient(var(--tinte) 0 2px, transparent 2px 5px, var(--tinte) 5px 7px, transparent 7px) 0 0 / 100% 100% no-repeat;
  opacity: .85;
}
.mo-schild::after {
  content: ""; position: absolute; left: calc(50% - 1.5px); top: 100%; width: 3px; height: 60%; margin-top: 2px;
  background: linear-gradient(90deg, #4E3018, #A2733F 45%, #63401F); border-radius: 0 0 2px 2px;
}
.mo-schild.spot { background: linear-gradient(172deg, #FFFFB8, var(--spot)); }
.mo-schild.a { left: 17%; top: 52%; --k: -2.5deg; }
.mo-schild.b { left: 42%; top: 52%; --k: 1.5deg; }
.mo-schild.c { left: 64%; top: 70%; --k: -1deg; width: 15%; height: 13%; }

/* der Saum: Samt mit Lichtverlauf, unten die Festons mit Goldlitze, links die Leuchtschrift */
.mo-saum {
  left: 0; right: 0; top: 0; height: 17%; z-index: 4;
  background: linear-gradient(180deg, color-mix(in srgb, var(--samt-licht) 16%, transparent), rgba(0, 0, 0, 0) 45%, color-mix(in srgb, var(--samt-dunkel) 38%, transparent)), var(--samt);
  filter: drop-shadow(0 3px 3px color-mix(in srgb, var(--wurf) 50%, transparent));
}
.mo-saum::after {
  content: ""; position: absolute; left: 0; right: 0; top: calc(100% - 1px); height: 9px;
  background: var(--feston-bild) 0 0 / 36px 9px round no-repeat, linear-gradient(180deg, color-mix(in srgb, var(--samt-dunkel) 38%, transparent), color-mix(in srgb, var(--samt-dunkel) 50%, transparent)), var(--samt);
  -webkit-mask: var(--feston-maske) 0 0 / 36px 9px round no-repeat; mask: var(--feston-maske) 0 0 / 36px 9px round no-repeat;
}
.mo-saum .mo-marke { position: absolute; left: 5%; top: 50%; height: 44%; translate: 0 -50%; display: block; }
.mo-marke .neon-glas { filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--wurf) 40%, transparent)); }

/* Seitenvorhänge, unten gerafft */
.mo-vorhang {
  top: 0; bottom: 30%; width: 6.5%; z-index: 3;
  background: linear-gradient(180deg, color-mix(in srgb, var(--samt-licht) 14%, transparent), rgba(0, 0, 0, 0) 35%, color-mix(in srgb, var(--samt-dunkel) 45%, transparent)), var(--samt);
  border: 0 solid var(--tinte); box-shadow: 0 0 8px color-mix(in srgb, var(--wurf) 55%, transparent);
}
.mo-vorhang.links { left: 0; border-right-width: 2px; border-bottom-right-radius: 70% 22%; }
.mo-vorhang.rechts { right: 0; border-left-width: 2px; border-bottom-left-radius: 70% 22%; }

/* das Bällebad: drei Reihen, hinten kleiner und im Schatten */
.mo-bad {
  left: 0; right: 0; bottom: 8%; height: 27%; z-index: 5; display: grid; align-content: end;
  background: linear-gradient(180deg, color-mix(in srgb, var(--becken) 0%, transparent) 10%, var(--becken) 34%, var(--becken-grund));
}
.mo-reihe { display: flex; justify-content: center; margin-top: calc(var(--d) * -.38); }
.mo-reihe:first-child { margin-top: 0; }
.mo-reihe i {
  flex: none; width: var(--d); aspect-ratio: 1; margin: 0 -.06em; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, color-mix(in oklab, var(--b) 40%, white) 0 12%, var(--b) 44%, color-mix(in oklab, var(--b) 64%, var(--becken)) 100%);
}
/* von hinten nach vorn grösser und heller, wie im echten Bad in Zentralperspektive */
.mo-reihe.r0 { --d: 1.7cqi; filter: brightness(.5) saturate(.85); }
.mo-reihe.r1 { --d: 2cqi; filter: brightness(.6) saturate(.9); }
.mo-reihe.r2 { --d: 2.4cqi; filter: brightness(.72); }
.mo-reihe.r3 { --d: 2.8cqi; filter: brightness(.84); }
.mo-reihe.r4 { --d: 3.3cqi; filter: brightness(.94); }
.mo-reihe.r5 { --d: 3.9cqi; }
.modell { container-type: inline-size; }

/* die Plüschleiste mit Rampenlampen; oben franst sie in Bäuschen aus */
.mo-leiste {
  left: 0; right: 0; bottom: 0; height: 11%; z-index: 6;
  background:
    radial-gradient(circle at 50% 30%, #FFFDF2 0 1.6px, #FFD68A 2.4px, rgba(255, 214, 138, .45) 3.4px, rgba(255, 214, 138, 0) 7px) 0 0 / 24px 100% repeat-x,
    linear-gradient(180deg, var(--pluesch-hell), var(--pluesch) 35%, var(--pluesch-mitte) 70%, var(--pluesch-tief));
  -webkit-mask: radial-gradient(5px 4px at 50% 4px, #000 98%, transparent) 0 0 / 8px 6px repeat-x, linear-gradient(#000, #000) 0 4px / 100% 100% no-repeat;
  mask: radial-gradient(5px 4px at 50% 4px, #000 98%, transparent) 0 0 / 8px 6px repeat-x, linear-gradient(#000, #000) 0 4px / 100% 100% no-repeat;
}

/* ---------- Spielzeiten als Kärtchen ---------- */

.sz-zeiten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .sz-zeiten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sz-zeit {
  min-width: 0; display: grid; gap: 8px; align-content: start; padding: 7px 7px 10px; text-align: left; color: var(--tinte);
  background: var(--weiss); border: var(--kante) solid var(--tinte); border-radius: var(--rund); box-shadow: var(--versatz-klein);
  transition: transform .18s var(--aus), box-shadow .18s var(--aus), background-color .18s var(--aus);
}
.sz-zeit:hover { transform: translateY(-1px); box-shadow: var(--versatz); }
.sz-zeit:active { transform: translateY(1px); box-shadow: 0 1px 0 color-mix(in srgb, var(--tinte) 50%, transparent); }
.sz-zeit[aria-checked="true"] { background: var(--spot); }
.sz-zeit b { display: block; padding: 0 2px; font: 900 15px/1.05 var(--schrift-schild); text-transform: uppercase; letter-spacing: .01em; hyphens: manual; overflow-wrap: break-word; }
.sz-zeit small { display: block; padding: 0 2px; margin-top: 3px; font: 600 13px/1.3 var(--schrift); color: var(--tinte-leise); }
.sz-zeit[aria-checked="true"] small { color: var(--tinte); }

/* das kleine Bühnenbild auf dem Kärtchen: Samt, Rundhorizont, Bälle, Plüsch */
.sz-bild {
  display: grid; grid-template-rows: 30% 1fr 20% 13%; height: 62px; overflow: hidden;
  border: 2px solid var(--tinte); border-radius: 4px;
}
.sz-bild > i { display: block; }
.sz-samt { background: linear-gradient(180deg, color-mix(in srgb, var(--samt-licht) 16%, transparent), color-mix(in srgb, var(--samt-dunkel) 40%, transparent)), var(--samt); }
.sz-rund { background: linear-gradient(180deg, var(--rund-dunkel), var(--rund-mitte) 40%, var(--prospekt) 80%, var(--rund-hell)); }
.sz-kugeln {
  background:
    radial-gradient(circle at 50% 55%, var(--bad-0) 0 4.2px, transparent 4.8px) 0 0 / 30px 100%,
    radial-gradient(circle at 50% 55%, var(--bad-1) 0 4.2px, transparent 4.8px) 10px 0 / 30px 100%,
    radial-gradient(circle at 50% 55%, var(--bad-2) 0 4.2px, transparent 4.8px) 20px 0 / 30px 100%,
    linear-gradient(var(--becken), var(--becken-grund));
}
.sz-fell { background: linear-gradient(180deg, var(--pluesch-hell), var(--pluesch) 50%, var(--pluesch-mitte)); }

/* ---------- Eigene Wahl ---------- */

.sz-eigen { display: grid; gap: 16px; padding-top: 4px; border-top: 2px dotted color-mix(in srgb, var(--tinte) 30%, transparent); }
.sz-gruppe { display: grid; gap: 8px; }
.sz-gruppe > span { font: var(--gruppenname); text-transform: uppercase; letter-spacing: .06em; color: var(--tinte-leise); }
.sz-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sz-chips .wahl { padding-left: 6px; gap: 8px; }

/* Muster: ein Stück Samt, drei Bälle, eine brennende Röhre auf dunklem Acryl */
.sz-muster { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--tinte); }
.sz-muster.stoff { background: linear-gradient(180deg, color-mix(in srgb, var(--samt-licht) 20%, transparent), color-mix(in srgb, var(--samt-dunkel) 35%, transparent)), var(--samt); }
.sz-muster.baelle {
  border: 0; width: 34px; border-radius: 0;
  background:
    radial-gradient(circle at 40% 35%, color-mix(in oklab, var(--b2) 40%, white) 0 1.5px, var(--b2) 4px, color-mix(in oklab, var(--b2) 70%, black) 7px, transparent 7.5px) 19px 13px / 15px 15px no-repeat,
    radial-gradient(circle at 40% 35%, color-mix(in oklab, var(--b1) 40%, white) 0 1.5px, var(--b1) 4px, color-mix(in oklab, var(--b1) 70%, black) 7px, transparent 7.5px) 0 13px / 15px 15px no-repeat,
    radial-gradient(circle at 40% 35%, color-mix(in oklab, var(--b0) 40%, white) 0 1.5px, var(--b0) 4px, color-mix(in oklab, var(--b0) 70%, black) 7px, transparent 7.5px) 9px 1px / 15px 15px no-repeat;
}
.sz-muster.neon {
  width: 34px; height: 24px; border-radius: 6px; background: var(--saal); position: relative;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.sz-muster.neon::before {
  content: ""; position: absolute; left: 6px; right: 6px; top: calc(50% - 2.5px); height: 5px; border-radius: 3px;
  background: linear-gradient(180deg, var(--kern), var(--koerper));
  box-shadow: 0 0 0 1px var(--hof), 0 0 6px 1px var(--hof), 0 0 14px 2px color-mix(in srgb, var(--hof) 55%, transparent);
}

.sz-unten { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.sz-unten p { font: 600 15px/1.35 var(--schrift); color: var(--tinte-leise); }

/* ---------- Der Umbau-Vorhang (js/vorhangwechsel.js) ---------- */

.umbau-vorhang { position: fixed; inset: 0; z-index: 95; transition: opacity .42s var(--aus); }
.umbau-vorhang.weg { opacity: 0; }
.umbau-vorhang.samt-gl .vorhang { display: none; }
.umbau-vorhang.auf .vorhang.links { transform: translateX(-102%); }
.umbau-vorhang.auf .vorhang.rechts { transform: translateX(102%); }

@media (prefers-reduced-motion: reduce) {
  .modell { --uebergang: 0s; }
}