/* simflix.css — das Startbild und die laufende Sendung.
   Bewusst dunkler und ruhiger als der Rest des Spiels: hier waehlt man
   nicht Regler, hier waehlt man einen Abend. */

.sf{
  position:fixed; inset:0; z-index:160; overflow-y:auto;
  padding:40px 32px 60px;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(20,40,70,.55), transparent 60%),
    rgba(4,7,14,.94);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
}
.sf[hidden]{display:none}
.sf-kopf{display:flex; align-items:baseline; gap:12px; margin-bottom:6px}
.sf-kopf b{
  font-size:34px; letter-spacing:7px; color:#ff5f6d; line-height:1;
  text-shadow:0 0 34px rgba(255,95,109,.6);
}
.sf-kopf span{font-size:13px; letter-spacing:5px; color:#7f90ae; text-transform:uppercase}
.sf-zu{
  margin-left:auto; width:34px; height:34px; border-radius:10px; cursor:pointer;
  background:none; border:1px solid rgba(255,255,255,.25); color:#e3e8f2;
  font-family:inherit; font-size:14px;
}
.sf-zu:hover{background:rgba(255,255,255,.1)}
.sf-intro{max-width:620px; font-size:13px; line-height:1.7; color:#93a6c4; margin-bottom:26px}

.sf-netz{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:16px; max-width:1180px;
}
.sf-kachel{
  display:block; text-align:left; cursor:pointer; font-family:inherit; color:#e3e8f2;
  padding:0 0 14px; border-radius:16px; overflow:hidden;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.12);
  transition:transform .18s cubic-bezier(.2,.9,.2,1), box-shadow .18s, border-color .18s;
}
.sf-kachel:hover{
  transform:translateY(-4px) scale(1.015);
  border-color:var(--sf-farbe);
  box-shadow:0 16px 46px rgba(0,0,0,.6), 0 0 0 1px var(--sf-farbe),
             0 0 60px color-mix(in srgb, var(--sf-farbe) 30%, transparent);
}
.sf-bild{
  height:132px; position:relative; overflow:hidden;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sf-farbe) 40%, transparent), transparent 70%),
    linear-gradient(160deg, #0d1626, #16233d);
}
/* Jede Sendung bekommt ihr eigenes Motiv, gemalt aus Verlaeufen statt
   aus Bilddateien: kostet nichts und skaliert mit. */
.sf-bild::before{
  content:''; position:absolute; inset:0;
  background-repeat:no-repeat;
}
.sf-bild[data-bild="huegel"]::before{
  background:
    radial-gradient(60% 90% at 22% 108%, color-mix(in srgb, var(--sf-farbe) 70%, #000) 0 60%, transparent 61%),
    radial-gradient(70% 100% at 68% 118%, color-mix(in srgb, var(--sf-farbe) 45%, #000) 0 60%, transparent 61%),
    radial-gradient(circle at 78% 26%, rgba(255,255,255,.55) 0 6px, transparent 7px);
}
.sf-bild[data-bild="buch"]::before{
  background:
    linear-gradient(90deg, transparent 46%, rgba(255,255,255,.28) 46% 48%, transparent 48%),
    repeating-linear-gradient(180deg, transparent 0 14px, color-mix(in srgb, var(--sf-farbe) 40%, transparent) 14px 15px);
  margin:22px 40px;
  border:1px solid color-mix(in srgb, var(--sf-farbe) 60%, transparent);
  border-radius:4px;
}
.sf-bild[data-bild="schwert"]::before{
  background:linear-gradient(200deg, transparent 48%, color-mix(in srgb, var(--sf-farbe) 85%, transparent) 48% 52%, transparent 52%),
             radial-gradient(circle at 50% 78%, color-mix(in srgb, var(--sf-farbe) 60%, transparent) 0 10px, transparent 11px);
}
.sf-bild[data-bild="stern"]::before{
  background:
    radial-gradient(circle at 30% 40%, var(--sf-farbe) 0 9px, transparent 10px),
    radial-gradient(circle at 62% 30%, rgba(255,255,255,.8) 0 5px, transparent 6px),
    radial-gradient(circle at 74% 66%, var(--sf-farbe) 0 13px, transparent 14px),
    radial-gradient(circle at 44% 74%, rgba(255,255,255,.55) 0 7px, transparent 8px);
}
.sf-bild[data-bild="riss"]::before{
  background:linear-gradient(112deg, transparent 47%, color-mix(in srgb, var(--sf-farbe) 90%, transparent) 47% 50%, transparent 50%),
             linear-gradient(76deg, transparent 62%, color-mix(in srgb, var(--sf-farbe) 55%, transparent) 62% 64%, transparent 64%);
}
.sf-bild[data-bild="welle"]::before{
  background:repeating-linear-gradient(180deg,
    transparent 0 16px, color-mix(in srgb, var(--sf-farbe) 55%, transparent) 16px 18px);
  mask:radial-gradient(70% 60% at 50% 50%, #000 40%, transparent 72%);
  -webkit-mask:radial-gradient(70% 60% at 50% 50%, #000 40%, transparent 72%);
}
.sf-kachel b{display:block; font-size:16px; margin:14px 16px 2px; letter-spacing:.4px}
.sf-kachel i{
  display:block; margin:0 16px 8px; font-style:normal; font-size:10px;
  letter-spacing:2px; text-transform:uppercase; color:var(--sf-farbe);
}
.sf-kachel span{display:block; margin:0 16px; font-size:12px; line-height:1.55; color:#93a6c4}
.sf-kachel em{
  display:inline-block; margin:12px 16px 0; font-style:normal; font-size:12px;
  padding:6px 16px; border-radius:8px; font-weight:600;
  background:var(--sf-farbe); color:#0b1018;
}
.sf-fuss{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  max-width:1180px; margin-top:24px; font-size:12px; color:#7f90ae;
}
.sf-fuss label{display:flex; align-items:center; gap:7px; cursor:pointer}

/* ---- Laufende Sendung ---- */
.sf-laeuft{
  position:fixed; left:50%; top:14px; transform:translateX(-50%); z-index:118;
  display:flex; align-items:baseline; gap:10px; padding:7px 18px; border-radius:12px;
  background:rgba(4,7,14,.6); border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  pointer-events:none;
}
.sf-laeuft[hidden]{display:none}
.sf-laeuft b{font-size:13px; letter-spacing:2px; color:#ff5f6d}
.sf-laeuft span{font-size:10px; letter-spacing:2px; text-transform:uppercase; color:#7f90ae}
.sf-laeuft i{font-style:normal; font-size:9px; color:#5a6a86; margin-left:6px}

.sf-band{
  position:fixed; left:50%; bottom:96px; transform:translateX(-50%); z-index:118;
  width:min(860px, calc(100vw - 60px)); pointer-events:none; text-align:center;
  opacity:0; transition:opacity .5s;
}
.sf-band[hidden]{display:none}
.sf-band.an{opacity:1}
.sf-band p{
  display:inline-block; padding:12px 24px; border-radius:12px;
  background:rgba(4,7,14,.72);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  font-size:17px; line-height:1.6; color:#f2f5fb;
  text-shadow:0 2px 12px rgba(0,0,0,.9);
}
.sf-band p.sf-titel{
  font-size:22px; letter-spacing:3px; color:#ff5f6d; background:none;
  text-shadow:0 0 34px rgba(255,95,109,.7);
}
/* Waehrend einer Sendung tritt die Bedienung zurueck. Man schaut zu. */
body.sflaeuft .transport,
body.sflaeuft .kopf,
body.sflaeuft .rollen,
body.sflaeuft .padmodus,
body.sflaeuft .zoomsaeule,
body.sflaeuft .reglergriff{opacity:.12; transition:opacity .6s}
body.sflaeuft .transport:hover,
body.sflaeuft .kopf:hover,
body.sflaeuft .zoomsaeule:hover{opacity:1}
@media(max-width:640px){
  .sf{padding:24px 16px 40px}
  .sf-kopf b{font-size:26px}
  .sf-band{bottom:70px} .sf-band p{font-size:15px}
}

/* ---- Sprecherproben ---- */
.sf-sprecher{max-width:1180px; margin-top:26px; padding-top:18px; border-top:1px solid rgba(255,255,255,.12)}
.sf-sprecher b{display:block; font-size:11px; letter-spacing:3px; text-transform:uppercase; color:#7f90ae; margin-bottom:10px}
.sf-stimmen{display:flex; flex-wrap:wrap; gap:7px}
.sf-stimme{
  display:flex; align-items:center; gap:6px; cursor:pointer; font-family:inherit;
  padding:6px 12px; border-radius:20px; font-size:12px; color:#e3e8f2;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
}
.sf-stimme:hover{border-color:#5ff7ff; background:rgba(95,247,255,.1)}
.sf-stimme i{font-style:normal; font-size:9px; color:#5ff7ff}
.sf-stimme.an{border-color:#5ff7ff; background:rgba(95,247,255,.2)}
.sf-stimme.an i{animation:sfPuls .9s ease-in-out infinite}
@keyframes sfPuls{0%,100%{opacity:.3}50%{opacity:1}}
.sf-sprechernote{font-size:11px; color:#7f90ae; margin-top:10px; max-width:620px; line-height:1.6}