/* ====================================================================================
   FAHRPLAN (v257). Alles unter der Wurzelklasse .fp (zusammen mit .dl aus dreh-lernen.css), Namensraum fp-.
   ------------------------------------------------------------------------------------
   Für iPad und Laptop am Set: große Schrift, Tippziele mindestens 48 px. Farben nur aus den Variablen von styles.css
   (Nachtmodus stellt sie selbst um). Eigene Variable --fp-fs (Schriftregler, von dreh-fahrplan.js gesetzt).
   ==================================================================================== */

.fp { --fp-fs: 26px; max-width: 980px; }
.fp .fp-etikett {
  font-size: max(13px, calc(var(--fp-fs) * .5)); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tsoft);
}
.fp .fp-tipp { margin-top: 10px; color: var(--tsoft); line-height: 1.5; font-size: var(--fs-text); }

/* ---------- Kopf mit Fortschritt ---------- */
.fp .fp-leiste { display: grid; gap: 12px; }
.fp .fp-fort { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.fp .fp-fort b { font-size: max(18px, calc(var(--fp-fs) * .8)); }
.fp .dl-schalter-zeile { margin-top: 0; }

/* ---------- Als Nächstes ---------- */
.fp .fp-jetzt {
  display: grid; gap: 8px; color: var(--text); border: 2px solid var(--lila); box-shadow: var(--shadow);
}
.fp .fp-jetzt-titel { font-size: max(22px, var(--fp-fs)); line-height: 1.25; overflow-wrap: anywhere; }
.fp .fp-jetzt small { color: var(--tsoft); font-size: max(15px, calc(var(--fp-fs) * .62)); }
.fp .fp-jetzt-knopf { justify-self: start; display: inline-flex; align-items: center; gap: 8px; }
.fp .fp-fertig { text-align: center; padding: 22px 16px; }
.fp .fp-fertig b { display: inline-flex; align-items: center; gap: 8px; font-size: max(20px, calc(var(--fp-fs) * .9)); color: var(--gruent); }
.fp .fp-fertig p { color: var(--tsoft); margin-top: 6px; }

/* ---------- Stationen ---------- */
.fp .fp-station { display: grid; gap: 12px; padding: 16px; }
.fp .fp-station.komplett { box-shadow: inset 6px 0 0 var(--gruen), var(--shadow); }
.fp .fp-st-kopf { display: flex; align-items: center; gap: 14px; }
.fp .fp-st-nr {
  flex: none; width: max(48px, calc(var(--fp-fs) * 2)); height: max(48px, calc(var(--fp-fs) * 2)); border-radius: 50%;
  display: grid; place-items: center; background: var(--lila); color: #fff; font-weight: 800; font-size: max(22px, var(--fp-fs));
}
.fp .fp-station.komplett .fp-st-nr { background: var(--gruen); }
.fp .fp-st-text { flex: 1 1 auto; min-width: 0; }
.fp .fp-st-text h2 { font-size: max(21px, calc(var(--fp-fs) * .95)); line-height: 1.2; overflow-wrap: anywhere; }
.fp .fp-st-text small { display: block; color: var(--tsoft); font-size: max(14px, calc(var(--fp-fs) * .56)); margin-top: 3px; line-height: 1.4; }
.fp .fp-st-zahl { flex: none; font-weight: 800; font-size: max(17px, calc(var(--fp-fs) * .7)); color: var(--lilat); }
.fp .fp-st-leer { color: var(--tsoft); }

/* ---------- Videos ---------- */
.fp .fp-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fp .fp-video {
  display: flex; align-items: center; gap: 10px; border: 1px solid var(--linie-fein); border-radius: 14px; background: var(--weiss);
  padding: 6px 8px 6px 6px; min-width: 0; transition: background .2s;
}
.fp .fp-video.gedreht { background: var(--gruen-soft); border-color: transparent; }
.fp .fp-video.gedreht .fp-v-text b { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--gruent); }
.fp .fp-video.fp-bewegt { background: var(--soft); }
.fp .fp-v-kopf { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; color: var(--text); min-height: 56px; padding: 4px 2px; border-radius: 10px; }
.fp a.fp-v-kopf:hover { background: var(--soft); }
.fp .fp-v-nr {
  flex: none; min-width: max(40px, calc(var(--fp-fs) * 1.6)); height: max(40px, calc(var(--fp-fs) * 1.6)); border-radius: 12px;
  display: grid; place-items: center; background: var(--soft); color: var(--lilat); font-weight: 800; font-size: max(17px, calc(var(--fp-fs) * .72));
}
.fp .fp-video.gedreht .fp-v-nr { background: var(--gruen); color: #fff; }
.fp .fp-v-text { display: grid; gap: 2px; min-width: 0; }
.fp .fp-v-text b { font-size: max(18px, calc(var(--fp-fs) * .8)); line-height: 1.25; overflow-wrap: anywhere; }
.fp .fp-v-text small { color: var(--tsoft); font-size: max(14px, calc(var(--fp-fs) * .55)); line-height: 1.35; overflow-wrap: anywhere; }

.fp .fp-haken {
  flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-width: 72px; min-height: 64px; border-radius: 12px; background: none; color: var(--tsoft); font-weight: 700; font-size: 13px;
}
.fp .fp-haken-kreis {
  width: 36px; height: 36px; border-radius: 50%; border: 2.5px solid var(--feldrand); display: grid; place-items: center; background: var(--weiss);
}
.fp .fp-haken.an { color: var(--gruent); }
.fp .fp-haken.an .fp-haken-kreis { background: var(--gruen); border-color: var(--gruen); color: #fff; }
.fp .fp-haken:hover .fp-haken-kreis { border-color: var(--gruen); }

/* Bearbeiten: Pfeile und „Heute nicht“ */
.fp .fp-video.bearbeiten { flex-wrap: wrap; }
.fp .fp-v-knoepfe { flex: none; display: flex; align-items: center; gap: 8px; margin-left: auto; }
.fp .fp-pfeil {
  width: 56px; height: 56px; border-radius: 14px; background: var(--soft); color: var(--lilat); display: grid; place-items: center;
}
.fp .fp-pfeil:disabled { opacity: .3; pointer-events: none; }
.fp .fp-raus-knopf { min-height: 56px; }
.fp.fp-bearbeiten .fp-station { border: 2px dashed var(--feldrand); }

/* Heute nicht drehen */
.fp .fp-rausliste summary {
  cursor: pointer; font-weight: 700; min-height: 48px; display: flex; align-items: center; gap: 8px; list-style: none;
  font-size: max(17px, calc(var(--fp-fs) * .7));
}
.fp .fp-rausliste summary::-webkit-details-marker { display: none; }
.fp .fp-rausliste .fp-liste { margin-top: 10px; }
.fp .fp-video.raus { opacity: .85; }

/* ---------- Lesen ---------- */
.fp .fp-l-kopf { display: grid; gap: 10px; }
.fp .fp-l-oben { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.fp .fp-l-oben .btn { min-height: 44px; padding: 0 14px; border-radius: var(--r-pille); }
.fp .fp-l-titel { font-size: max(24px, calc(var(--fp-fs) * 1.15)); line-height: 1.2; overflow-wrap: anywhere; }
.fp .fp-steuer { display: grid; gap: 12px; }
.fp .fp-fuss .fp-gedreht-knopf { min-height: 64px; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.fp .fp-fuss .fp-gedreht-knopf.an { background: var(--gruen); border-color: var(--gruen); color: #fff; }
.fp .fp-fuss .dl-vorzurueck .btn { min-height: 60px; font-size: 17px; display: inline-flex; align-items: center; justify-content: center; text-align: center; }
.fp .fp-hinweis {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; border: 2px solid var(--ambert);
  position: sticky; top: 8px; z-index: 5; box-shadow: var(--shadow);
}
.fp .fp-hinweis p { font-weight: 600; }
html.nacht .fp .fp-hinweis { border-color: rgba(242, 196, 107, .6); }
html.nacht .fp .fp-jetzt { border-color: var(--intern-rand); }

/* ---------- Vollbild: über die ganze Hülle, die Wurzel scrollt selbst ---------- */
.fp.fp-vollbild {
  position: fixed; inset: 0; z-index: 85; max-width: none; margin: 0; overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg); padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
.fp.fp-vollbild > * { width: 100%; max-width: 980px; margin-left: auto; margin-right: auto; }

/* Lange deutsche Wörter (Weihnachtsraum, Kartenzahlung) an der Silbe trennen statt mitten im Wort (html lang="de") */
.fp .fp-st-text h2, .fp .fp-v-text b, .fp .fp-jetzt-titel, .fp .fp-l-titel { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }

@media (max-width: 560px) {
  .fp .fp-video.bearbeiten .fp-v-knoepfe { width: 100%; justify-content: flex-end; }
  .fp .fp-haken { min-width: 60px; }
  .fp .fp-station { padding: 14px 12px; }
  .fp .fp-st-kopf { gap: 10px; }
  .fp .fp-st-nr { width: 44px; height: 44px; font-size: 21px; }
  .fp .fp-v-nr { min-width: 36px; height: 36px; font-size: 16px; }
  .fp .fp-v-kopf { gap: 10px; }
}