..
) – ausblenden,
wir zeigen ausschliesslich den SPO-Spinner (.spo-logo-loader). */
div.dt-container div.dt-processing > div:not(.spo-logo-loader) { display: none; }
div.dt-container div.dt-processing .spo-logo-loader { min-height: 0; padding: 0; }
/* Mindesthoehe waehrend des Ladens, damit der Spinner bei noch leerer Tabelle mittig Platz hat. */
.dt-container.dt-processing-active { min-height: 16rem; }
/* Klickbarer Produktions-Id-Badge (Klick kopiert die Id): dezenter Hover/Fokus-Hinweis. */
.copy-pid { transition: filter .12s ease; }
.copy-pid:hover, .copy-pid:focus-visible { filter: brightness(1.18); outline: none; }
.btn .spo-logo-spinner--button { vertical-align: -.2em; }
.btn:has(.spo-logo-spinner--button) { display: inline-flex; align-items: center; justify-content: center; gap: .15rem; }
/* Button-Ladezustand (spoButtonLoadingHtml): Bootstrap-.spinner-border statt des
Logo-Canvas -- zeichnet ohne Bild-Ladezeit sofort. Groesse an der Schrifthoehe
statt an Bootstraps festem 1rem, damit er in kleinen wie grossen Buttons passt;
Farbe kommt ueber currentColor automatisch vom Button-Stil (auch im Dark-Mode). */
.spo-btn-spinner { width: 1.05em; height: 1.05em; border-width: .15em; vertical-align: -.15em; flex: 0 0 auto; }
.btn:has(.spo-btn-spinner) { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
/* 21. Scroll-to-top
──────────────────────────────────────────────────────────────── */
#btn-scroll-top { display: none; position: fixed; bottom: 22px; right: 22px; z-index: 1050; border: none; background: none; padding: 0; cursor: pointer; }
#btn-scroll-top i { display: flex; align-items: center; justify-content: center; font-size: 20px; width: 44px; height: 44px; color: #fff; text-shadow: 0 1px 2px rgba(30,44,72,0.55), 0 0 4px rgba(30,44,72,0.35); border-radius: 12px; background: linear-gradient(160deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.10) 35%, rgba(111,197,211,0.18) 65%, rgba(255,255,255,0.05) 100%); backdrop-filter: blur(14px) saturate(1.7); -webkit-backdrop-filter: blur(14px) saturate(1.7); border: 1.5px solid rgba(255,255,255,0.55); box-shadow: 0 8px 22px rgba(30,44,72,0.25), inset 0 1px 1px rgba(255,255,255,0.65), inset 0 -2px 4px rgba(30,44,72,0.15); transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease; }
#btn-scroll-top:hover i { transform: translateY(-3px); border-color: rgba(255,255,255,0.75); box-shadow: 0 12px 28px rgba(30,44,72,0.35), inset 0 1px 1px rgba(255,255,255,0.80), inset 0 -2px 4px rgba(30,44,72,0.20); }
#btn-scroll-top:active i { transform: translateY(-1px) scale(.96); transition-duration: .08s; }
body.dark-mode #btn-scroll-top i { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.65), 0 0 4px rgba(0,0,0,0.45); background: linear-gradient(160deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.04) 35%, rgba(111,197,211,0.14) 65%, rgba(255,255,255,0.02) 100%); border-color: rgba(255,255,255,0.45); box-shadow: 0 8px 22px rgba(0,0,0,0.55), inset 0 1px 1px rgba(255,255,255,0.30), inset 0 -2px 4px rgba(0,0,0,0.25); }
body.dark-mode #btn-scroll-top:hover i { border-color: rgba(255,255,255,0.65); box-shadow: 0 12px 28px rgba(0,0,0,0.65), inset 0 1px 1px rgba(255,255,255,0.40), inset 0 -2px 4px rgba(0,0,0,0.30); }
/* 21c. Encoder-Belegung (Tages-Timeline)
──────────────────────────────────────────────────────────────── */
.enc-timeline {
--enc-hour-width: 110px; /* Default-Desktop: 12h sichtbar bei ~1280px-1440px viewport */
--enc-label-width: 140px;
--enc-row-height: 64px;
--enc-header-height: 30px;
position: relative;
border: 1px solid var(--spo-table-border);
background: #fff;
/* KEIN overflow hier -- nur der .enc-body-scroll scrollt horizontal.
Das laesst .enc-header als position:sticky relativ zur Seite kleben (Page-Scroll). */
}
body.dark-mode .enc-timeline { background: var(--spo-ci-dark); border-color: var(--spo-ci-mid); }
@media (max-width: 1199px) { .enc-timeline { --enc-hour-width: 95px; } }
@media (max-width: 767px) { .enc-timeline { --enc-hour-width: 75px; --enc-label-width: 110px; } }
/* ─── Header: getrennt vom Body, sticky unterhalb der Haupt-Navbar ─────────────── */
.enc-header { position: sticky; top: 59px; z-index: 1010; background: var(--spo-ci); border-bottom: 1px solid var(--spo-ci-dark); }
/* Info-Zeile oberhalb der Stunden: Wochentag + Datum links, Zeitachsen-Hinweis + Scroll-Buttons rechts */
.enc-day-info { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 6px 10px; min-height: 38px; background: var(--spo-ci-dark); color: var(--spo-ci-light); font-size: .78rem; line-height: 1.1; border-bottom: 1px solid rgba(255,255,255,0.08); }
.enc-day-info-label { font-weight: 600; }
.enc-day-info-meta { opacity: .75; font-variant-numeric: tabular-nums; }
.enc-day-info-actions { display: flex; align-items: center; gap: 8px; }
.enc-header-inner { display: flex; align-items: stretch; min-height: var(--enc-header-height); }
/* Eck-Zelle: leer, dunkelblauer Header-BG (chained selector .enc-label.enc-label-corner ueberschreibt die generelle .enc-label-Regel weiter unten im File) */
.enc-label.enc-label-corner { flex: 0 0 var(--enc-label-width); background: var(--spo-ci); border-right: 1px solid rgba(255,255,255,0.10); box-sizing: border-box; }
/* Markante Petrol-Outline-Buttons (eigen, nicht Bootstrap-.btn, damit Hoehe stimmt) */
.enc-btn { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 22px; padding: 0; background-color: transparent; border: 2px solid #6fc5d3; color: #6fc5d3; border-radius: 4px; font-size: 1rem; font-weight: 700; line-height: 1; cursor: pointer; transition: background-color .15s ease, color .15s ease, transform .1s ease; font-family: inherit; }
.enc-btn:hover { background-color: #6fc5d3; color: var(--spo-ci); }
.enc-btn:active { background-color: #55b8c8; color: var(--spo-ci); transform: scale(.94); }
.enc-btn:focus { outline: 2px solid rgba(111,197,211,0.6); outline-offset: 2px; }
.enc-btn i { display: block; line-height: 1; }
.enc-header-track-view { flex: 1 1 auto; overflow: hidden; position: relative; min-width: 0; }
.enc-header-track { width: calc(var(--enc-hour-width) * 24); height: var(--enc-header-height); position: relative; will-change: transform; }
/* ─── Body: nur horizontal scrollbar, vertikal voll ausgedehnt ────────────────── */
.enc-body-scroll { overflow-x: auto; overflow-y: visible; }
/* min-width: max-content -- sonst ist die Row auf Parent-Breite (Viewport) beschraenkt
und der Track-Inhalt rechts wird durch border-Stops/Gridline-Container abgeschnitten. */
.enc-row { display: flex; min-width: max-content; min-height: var(--enc-row-height); border-top: 1px solid var(--spo-table-border); }
.enc-row:first-child { border-top: 0; }
body.dark-mode .enc-row { border-top-color: var(--spo-ci-mid); }
/* Label-Spalte (links): horizontal-sticky innerhalb des Body-Scroll-Containers */
.enc-label {
flex: 0 0 var(--enc-label-width);
padding: .35rem .6rem; font-size: .75rem; line-height: 1.15;
background: var(--spo-ci-light); border-right: 1px solid var(--spo-table-border);
display: flex; flex-direction: column; justify-content: center;
position: sticky; left: 0; z-index: 2;
}
.enc-label .enc-name { font-weight: 600; color: var(--spo-ci); }
.enc-label .enc-typ { font-size: .65rem; color: #6c757d; }
body.dark-mode .enc-label { background: var(--spo-ci-mid); border-right-color: var(--spo-ci); }
body.dark-mode .enc-label .enc-name { color: var(--spo-ci-light); }
body.dark-mode .enc-label .enc-typ { color: #b8b8b8; }
/* Track: feste Breite (24 * hour-width) statt flex:1 -> wird breiter als Viewport.
Gitterlinien als explizite Divider-Divs (PHP-generiert, per absolute Position) -- robuster als CSS-Gradient bei breiten Tracks. */
.enc-track {
position: relative;
flex: 0 0 auto;
width: calc(var(--enc-hour-width) * 24);
min-height: var(--enc-row-height);
background-color: transparent;
}
.enc-grid-line { position: absolute; top: 0; bottom: 0; width: 1px; background-color: rgba(30,44,72,0.18); pointer-events: none; z-index: 0; }
body.dark-mode .enc-grid-line { background-color: rgba(255,255,255,0.16); }
.enc-hour-tick { position: absolute; top: 0; bottom: 0; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums; color: #fff; opacity: .95; border-left: 1px solid rgba(255,255,255,0.20); box-sizing: border-box; }
.enc-hour-tick:first-child { border-left: 0; }
/* Box-Basis: KEINE bg/color/border-color hier setzen -- prod-badge-{kat} liefert die Grundfarbe (kommt im File frueher).
Die Kat-Farbe wird im naechsten Block per linear-gradient-Overlay aufgehellt -> wirkt wie eine entsaettigte Variante
(analog Wochen-TV-Programm). Inner-Badge bleibt voll gesaettigt, weil das Overlay nur die Box selbst trifft.
Nur fuer Produktionen OHNE Kategorie greift .enc-block-nocat als expliziter Fallback. */
.enc-block { position: absolute; top: 3px; bottom: 3px; padding: 3px 6px; border: 1px solid rgba(0,0,0,0.15); border-radius: 4px; text-decoration: none; font-size: .72rem; line-height: 1.2; overflow: hidden; transition: filter .12s ease, transform .12s ease, box-shadow .12s ease; box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 1px 2px rgba(0,0,0,0.08); display: flex; flex-direction: column; justify-content: flex-start; gap: 1px; }
.enc-block[class*="prod-badge-"] { background-image: linear-gradient(rgba(255,255,255,0.55), rgba(255,255,255,0.55)); color: #2a3449; }
.enc-block-nocat { background-color: var(--spo-ci-light); color: var(--spo-ci); }
.enc-block:hover { z-index: 5; transform: scale(1.02); filter: brightness(1.08); box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 4px 10px rgba(0,0,0,0.2); }
.enc-block-badge { line-height: 1; }
.enc-block-title { font-weight: 600; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; align-self: stretch; display: flex; align-items: center; padding: 0; margin: 0; }
.enc-block-meta { font-size: .65rem; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.enc-block-meta-empty { opacity: .6; font-style: italic; }
.enc-block-katbadge { font-size: .6rem; font-weight: 600; padding: .15em .4em; }
/* Konflikt-Overlay: rote Diagonal-Schraffur + Warn-Icon top-right (analog sendeplan-woche .program.has-overlap) */
.enc-block.has-overlap::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(-45deg, transparent, transparent 4px, rgba(220,53,69,0.30) 4px, rgba(220,53,69,0.30) 6px); pointer-events: none; z-index: 1; border-radius: 3px; }
.enc-block.has-overlap::after { content: '\f33a'; font-family: "bootstrap-icons"; font-size: 0.85rem; line-height: 1; color: #dc3545; position: absolute; top: 2px; right: 4px; pointer-events: none; z-index: 2; text-shadow: 0 0 3px rgba(255,255,255,0.8); }
.enc-arrow { position: absolute; top: 50%; transform: translateY(-50%); font-size: .9rem; opacity: .85; z-index: 2; }
.enc-arrow-l { left: 2px; }
.enc-arrow-r { right: 2px; }
/* 22. Flatpickr Kalender (spo-cal Theme)
──────────────────────────────────────────────────────────────── */
/* -- 22a. Kalender – Basis & Sichtbarkeit ---------------------- */
.flatpickr-calendar { background: transparent; opacity: 0; display: none; text-align: center; visibility: hidden; padding: 0; animation: none; direction: ltr; border: 0; font-size: 11px; line-height: 18px; border-radius: 4px; position: absolute; width: 224px; box-sizing: border-box; touch-action: manipulation; box-shadow: none; }
.flatpickr-calendar.inline { background: #fff; }
.flatpickr-calendar.open, .flatpickr-calendar.inline { opacity: 1; max-height: 480px; visibility: visible; }
.flatpickr-calendar.open { display: inline-block; z-index: 99999; }
.flatpickr-calendar.animate.open { animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1); }
.flatpickr-calendar.inline { display: block; position: relative; top: 2px; }
.flatpickr-calendar.static { position: absolute; top: calc(100% + 2px); }
.flatpickr-calendar.static.open { z-index: 999; display: block; }
.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) { box-shadow: none !important; }
.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) { box-shadow: none !important; }
.flatpickr-calendar .hasWeeks .dayContainer, .flatpickr-calendar .hasTime .dayContainer { border-bottom: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
.flatpickr-calendar .hasWeeks .dayContainer { border-left: 0; }
.flatpickr-calendar.hasTime .flatpickr-time { height: 32px; border: 1px solid rgba(72,72,72,0.2); }
.flatpickr-calendar.hasTime .flatpickr-innerContainer { border-bottom: 0; }
.flatpickr-calendar.noCalendar.hasTime .flatpickr-time { height: auto; }
.flatpickr-calendar:focus { outline: 0; }
.flatpickr-wrapper { position: relative; display: inline-block; }
/* -- 22b. Kalender – Pfeile (oben/unten) ----------------------- */
.flatpickr-calendar:before, .flatpickr-calendar:after { position: absolute; display: block; pointer-events: none; border: solid transparent; content: ''; height: 0; width: 0; left: 16px; }
.flatpickr-calendar.rightMost:before, .flatpickr-calendar.arrowRight:before, .flatpickr-calendar.rightMost:after, .flatpickr-calendar.arrowRight:after { left: auto; right: 16px; }
.flatpickr-calendar.arrowCenter:before, .flatpickr-calendar.arrowCenter:after { left: 50%; right: 50%; }
.flatpickr-calendar:before { border-width: 4px; margin: 0 -4px; }
.flatpickr-calendar:after { border-width: 3px; margin: 0 -3px; }
.flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after { bottom: 100%; }
.flatpickr-calendar.arrowTop:before { border-bottom-color: rgba(72,72,72,0.2); }
.flatpickr-calendar.arrowTop:after { border-bottom-color: rgb(94,194,208); }
.flatpickr-calendar.arrowBottom:before, .flatpickr-calendar.arrowBottom:after { top: 100%; }
.flatpickr-calendar.arrowBottom:before { border-top-color: rgba(72,72,72,0.2); }
.flatpickr-calendar.arrowBottom:after { border-top-color: rgb(94,194,208); }
/* -- 22c. Monatsheader & Navigation ---------------------------- */
.flatpickr-months { display: flex; }
.flatpickr-months .flatpickr-month { border-radius: 0; background: var(--spo-ci); color: #fff; fill: #fff; height: 26px; line-height: 1; text-align: center; position: relative; user-select: none; overflow: hidden; flex: 1; }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { user-select: none; text-decoration: none; cursor: pointer; position: absolute; top: 0; height: 26px; padding: 6px 8px; z-index: 3; color: #fff; fill: #fff; }
.flatpickr-months .flatpickr-prev-month.flatpickr-disabled, .flatpickr-months .flatpickr-next-month.flatpickr-disabled { display: none; }
.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month, .flatpickr-months .flatpickr-next-month.flatpickr-prev-month { left: 0; }
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month, .flatpickr-months .flatpickr-next-month.flatpickr-next-month { right: 0; }
.flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover { color: #bbb; }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: #f64747; }
.flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg { width: 11px; height: 11px; }
.flatpickr-months .flatpickr-prev-month svg path, .flatpickr-months .flatpickr-next-month svg path { transition: fill 0.1s; fill: inherit; }
#calender .flatpickr-calendar.multiMonth.spo-cal-spaced { width: var(--spo-cal-width) !important; }
#calender .flatpickr-calendar.multiMonth.spo-cal-spaced .flatpickr-months,
#calender .flatpickr-calendar.multiMonth.spo-cal-spaced .flatpickr-weekdays,
#calender .flatpickr-calendar.multiMonth.spo-cal-spaced .flatpickr-days { width: var(--spo-cal-width) !important; display: grid; grid-template-columns: repeat(var(--spo-cal-months), 224px); column-gap: var(--spo-cal-month-gap); }
#calender .flatpickr-calendar.multiMonth.spo-cal-spaced .flatpickr-month,
#calender .flatpickr-calendar.multiMonth.spo-cal-spaced .flatpickr-weekdaycontainer,
#calender .flatpickr-calendar.multiMonth.spo-cal-spaced .dayContainer { width: 224px !important; min-width: 224px !important; max-width: 224px !important; }
#calender .flatpickr-calendar.multiMonth.spo-cal-spaced .flatpickr-month { height: 30px; }
#calender .flatpickr-calendar.multiMonth.spo-cal-spaced .flatpickr-current-month { padding-top: 8px; }
#calender .flatpickr-calendar.multiMonth.spo-cal-spaced .flatpickr-prev-month,
#calender .flatpickr-calendar.multiMonth.spo-cal-spaced .flatpickr-next-month { height: 30px; padding-top: 8px; padding-bottom: 8px; }
#calender .flatpickr-calendar.multiMonth.spo-cal-spaced .flatpickr-innerContainer { padding-top: 4px; }
#calender .flatpickr-calendar.multiMonth.spo-cal-spaced .flatpickr-innerContainer,
#calender .flatpickr-calendar.multiMonth.spo-cal-spaced .flatpickr-days { border: 0; }
#calender .flatpickr-calendar.multiMonth.spo-cal-spaced .flatpickr-weekdays { background: transparent; height: 26px; }
#calender .flatpickr-calendar.multiMonth.spo-cal-spaced .flatpickr-weekdaycontainer { background: rgb(94,194,208); height: 26px; align-items: center; }
#calender .flatpickr-calendar.multiMonth.spo-cal-spaced span.flatpickr-weekday { line-height: 26px; }
#calender .flatpickr-calendar.multiMonth.spo-cal-spaced span.flatpickr-weekday:nth-child(6),
#calender .flatpickr-calendar.multiMonth.spo-cal-spaced span.flatpickr-weekday:nth-child(7),
#calender .flatpickr-calendar.multiMonth.spo-cal-spaced .flatpickr-day.spo-weekend { color: #dc3545; }
#calender .flatpickr-calendar.multiMonth.spo-cal-spaced .flatpickr-day.selected,
#calender .flatpickr-calendar.multiMonth.spo-cal-spaced .flatpickr-day.startRange,
#calender .flatpickr-calendar.multiMonth.spo-cal-spaced .flatpickr-day.endRange { color: #484848 !important; font-weight: 800; }
#calender .flatpickr-calendar.multiMonth.spo-cal-spaced .flatpickr-day.spo-weekend.selected,
#calender .flatpickr-calendar.multiMonth.spo-cal-spaced .flatpickr-day.spo-weekend.startRange,
#calender .flatpickr-calendar.multiMonth.spo-cal-spaced .flatpickr-day.spo-weekend.endRange { color: #dc3545 !important; font-weight: 800; }
#calender .flatpickr-calendar.multiMonth.spo-cal-spaced .flatpickr-day.today,
#calender .flatpickr-calendar.multiMonth.spo-cal-spaced .flatpickr-day.spo-weekend.today,
#calender .flatpickr-calendar.multiMonth.spo-cal-spaced .flatpickr-day.spo-weekend.today.startRange,
#calender .flatpickr-calendar.multiMonth.spo-cal-spaced .flatpickr-day.spo-weekend.today.endRange { color: #fff !important; font-weight: 800; }
#calender .flatpickr-day:hover, #calender .flatpickr-day:focus { font-weight: 700; }
/* xdsoft jQuery-Datetimepicker: Wochenende (Sa/So) in der gleichen Bordeaux-Rot-Note wie im
Flatpickr-Kalender oben (#dc3545) -- dayOfWeekStart ist projektweit auf Montag gesetzt (spo.inc.php),
daher stehen Sa/So immer an Spalte 6/7 im Wochentage-Header. */
.xdsoft_datetimepicker .xdsoft_calendar th:nth-child(6),
.xdsoft_datetimepicker .xdsoft_calendar th:nth-child(7),
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_weekend { color: #dc3545; }
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_weekend.xdsoft_current,
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_weekend.xdsoft_today { color: #dc3545; font-weight: 800; }
/* -- 22d. Numerisches Input-Widget ------------------------------ */
.numInputWrapper { position: relative; height: auto; }
.numInputWrapper input, .numInputWrapper span { display: inline-block; }
.numInputWrapper input { width: 100%; }
.numInputWrapper input::-ms-clear { display: none; }
.numInputWrapper input::-webkit-outer-spin-button, .numInputWrapper input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.numInputWrapper span { position: absolute; right: 0; width: 11px; padding: 0 2px; height: 50%; line-height: 50%; opacity: 0; cursor: pointer; border: 1px solid rgba(72,72,72,0.15); box-sizing: border-box; }
.numInputWrapper span:hover { background: rgba(0,0,0,0.1); }
.numInputWrapper span:active { background: rgba(0,0,0,0.2); }
.numInputWrapper span:after { display: block; content: ""; position: absolute; }
.numInputWrapper span.arrowUp { top: 0; border-bottom: 0; }
.numInputWrapper span.arrowUp:after { border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 3px solid rgba(72,72,72,0.6); top: 26%; }
.numInputWrapper span.arrowDown { top: 50%; }
.numInputWrapper span.arrowDown:after { border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 3px solid rgba(72,72,72,0.6); top: 40%; }
.numInputWrapper span svg { width: inherit; height: auto; }
.numInputWrapper span svg path { fill: rgba(255,255,255,0.5); }
.numInputWrapper:hover { background: rgba(0,0,0,0.05); }
.numInputWrapper:hover span { opacity: 1; }
/* -- 22e. Monatsname & Jahresauswahl --------------------------- */
.flatpickr-current-month { font-size: 110%; line-height: 1; font-weight: 300; color: inherit; position: absolute; width: 75%; left: 12.5%; padding: 5px 0 0 0; height: 26px; display: inline-block; text-align: center; transform: translate3d(0,0,0); }
.flatpickr-current-month span.cur-month { font-family: inherit; font-weight: 700; color: inherit; display: inline-block; margin-left: 0.5ch; padding: 0; }
.flatpickr-current-month span.cur-month:hover { background: rgba(0,0,0,0.05); }
.flatpickr-current-month .numInputWrapper { width: 6ch; display: inline-block; }
.flatpickr-current-month .numInputWrapper span.arrowUp:after { border-bottom-color: #fff; }
.flatpickr-current-month .numInputWrapper span.arrowDown:after { border-top-color: #fff; }
.flatpickr-current-month input.cur-year { background: transparent; box-sizing: border-box; color: inherit; cursor: text; padding: 0 0 0 0.5ch; margin: 0; display: inline-block; font-size: inherit; font-family: inherit; font-weight: 300; line-height: inherit; height: auto; border: 0; border-radius: 0; vertical-align: initial; appearance: textfield; }
.flatpickr-current-month input.cur-year:focus { outline: 0; }
.flatpickr-current-month input.cur-year[disabled], .flatpickr-current-month input.cur-year[disabled]:hover { font-size: 100%; color: rgb(94,194,208); background: transparent; pointer-events: none; }
.flatpickr-current-month .flatpickr-monthDropdown-months { appearance: menulist; background: var(--spo-ci); border: none; border-radius: 0; box-sizing: border-box; color: inherit; cursor: pointer; font-size: inherit; font-family: inherit; font-weight: 300; height: auto; line-height: inherit; margin: -1px 0 0 0; outline: none; padding: 0 0 0 0.5ch; position: relative; vertical-align: initial; width: auto; }
.flatpickr-current-month .flatpickr-monthDropdown-months:focus, .flatpickr-current-month .flatpickr-monthDropdown-months:active { outline: none; }
.flatpickr-current-month .flatpickr-monthDropdown-months:hover { background: none; }
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month { color: rgba(0,0,0,1); outline: none; padding: 0; }
/* -- 22f. Wochentagszeile -------------------------------------- */
.flatpickr-weekdays { background: rgb(94,194,208); text-align: center; overflow: hidden; width: 100%; display: flex; align-items: center; height: 20px; }
.flatpickr-weekdays .flatpickr-weekdaycontainer { display: flex; flex: 1; }
span.flatpickr-weekday { cursor: default; font-size: 80%; background: rgba(94,194,208,0.3); color: rgba(0,0,0,0.54); line-height: 1; margin: 0; text-align: center; display: block; flex: 1; font-weight: bolder; }
/* -- 22g. Tage-Grid (dayContainer) ----------------------------- */
.dayContainer, .flatpickr-weeks { padding: 1px 0 0 0; }
.flatpickr-days { position: relative; overflow: hidden; display: flex; align-items: flex-start; width: 224px; border-left: 1px solid rgba(72,72,72,0.2); border-right: 1px solid rgba(72,72,72,0.2); }
.flatpickr-days:focus { outline: 0; }
.dayContainer { padding: 0 !important; outline: 0; text-align: left; width: 224px !important; min-width: 224px !important; max-width: 224px !important; box-sizing: border-box; display: grid !important; grid-template-columns: repeat(7, 1fr); gap: 0 !important; transform: translate3d(0,0,0); opacity: 1; }
.dayContainer + .dayContainer { box-shadow: none; }
/* -- 22h. Einzelner Tag – Basis -------------------------------- */
.flatpickr-day { background: none; border: none; border-radius: 150px; box-sizing: border-box; color: #484848; cursor: pointer; font-weight: 400; width: 100% !important; max-width: none !important; height: 30px; line-height: 30px; margin: 0 !important; display: block; position: relative; z-index: 1; text-align: center; }
/* -- 22i. Tag – Hover, Focus, inRange (Basis) ------------------ */
.flatpickr-day.inRange, .flatpickr-day.today.inRange, .flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover, .flatpickr-day:focus, .flatpickr-day.prevMonthDay:focus, .flatpickr-day.nextMonthDay:focus { cursor: pointer; outline: 0 !important; background-color: #fff; border-color: transparent; }
.flatpickr-day:hover, .flatpickr-day:focus, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.prevMonthDay:focus, .flatpickr-day.nextMonthDay:hover, .flatpickr-day.nextMonthDay:focus { background-color: var(--spo-ci-light); border-radius: 4px; color: var(--spo-ci); }
/* -- 22j. Tag – Heute ------------------------------------------ */
.flatpickr-day.today { background-color: var(--bs-red); border-radius: 0; color: #fff; }
.flatpickr-day.today:hover, .flatpickr-day.today:focus { border-color: var(--bs-red); background: var(--bs-red); color: #fff; }
/* -- 22k. Tag – Ausgewählt / Start / Ende (türkis + dunkelblau) */
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay { background: rgb(94,194,208); color: var(--spo-ci); font-weight: 700; border: none; box-shadow: none; position: relative; }
.flatpickr-day.selected::after, .flatpickr-day.startRange::after, .flatpickr-day.endRange::after { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; right: -1px; background: rgb(94,194,208); z-index: -1; }
.flatpickr-day.selected.startRange, .flatpickr-day.startRange.startRange, .flatpickr-day.endRange.startRange { border-radius: 50px 0 0 50px; }
.flatpickr-day.selected.startRange::after, .flatpickr-day.startRange.startRange::after, .flatpickr-day.endRange.startRange::after { left: 0; right: -1px; border-radius: 50px 0 0 50px; }
.flatpickr-day.selected.endRange, .flatpickr-day.startRange.endRange, .flatpickr-day.endRange.endRange { border-radius: 0 50px 50px 0; }
.flatpickr-day.selected.endRange::after, .flatpickr-day.startRange.endRange::after, .flatpickr-day.endRange.endRange::after { left: -1px; right: 0; border-radius: 0 50px 50px 0; }
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) { background: rgb(94,194,208); }
.flatpickr-day.selected.startRange.endRange, .flatpickr-day.startRange.startRange.endRange, .flatpickr-day.endRange.startRange.endRange { border-radius: 50px; }
/* -- 22l. Tag – inRange (Linie oben/unten, Lückenfix) ---------- */
.flatpickr-day.inRange { border-radius: 0; background: #fff; border: none; box-shadow: none; position: relative; }
.flatpickr-day.inRange::after { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; right: -1px; border: none; background: #e8e8e8; z-index: -1; }
/* -- 22m. Tag – prevMonth / nextMonth / disabled --------------- */
.flatpickr-day.prevMonthDay.inRange, .flatpickr-day.nextMonthDay.inRange { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
.flatpickr-day.prevMonthDay.inRange::after, .flatpickr-day.nextMonthDay.inRange::after { display: none !important; }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay, .flatpickr-day.notAllowed, .flatpickr-day.notAllowed.prevMonthDay, .flatpickr-day.notAllowed.nextMonthDay { color: rgba(72,72,72,0.3); background: transparent; border-color: transparent; cursor: default; }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover { cursor: not-allowed; color: rgba(72,72,72,0.1); }
.flatpickr-day.hidden { visibility: hidden; }
/* -- 22n. Tag – Heute innerhalb Range -------------------------- */
.flatpickr-day.today.inRange, .flatpickr-day.today.startRange, .flatpickr-day.today.endRange { background: var(--bs-red) !important; color: #fff !important; border: none !important; box-shadow: none !important; z-index: 3; }
.flatpickr-day.today.inRange::after { background: var(--bs-red); border: none; }
.flatpickr-day.today.startRange::after { background: var(--bs-red); }
.flatpickr-day.today.endRange::after { background: var(--bs-red); }
/* -- 22o. Weekwrapper (KW-Spalte) ------------------------------ */
.rangeMode .flatpickr-day { margin-top: 1px; }
.flatpickr-weekwrapper { float: left; }
.flatpickr-weekwrapper .flatpickr-weeks { padding: 0 8px; border-left: 1px solid rgba(72,72,72,0.2); }
.flatpickr-weekwrapper .flatpickr-weekday { float: none; width: 100%; line-height: 20px; }
.flatpickr-weekwrapper span.flatpickr-day, .flatpickr-weekwrapper span.flatpickr-day:hover { display: block; width: 100%; max-width: none; color: rgba(72,72,72,0.3); background: transparent; cursor: default; border: none; }
/* -- 22p. Inner-Container & Time-Picker ------------------------ */
.flatpickr-innerContainer { display: flex; box-sizing: border-box; overflow: hidden; background: #fff; border-bottom: 1px solid rgba(72,72,72,0.2); }
.flatpickr-rContainer { display: inline-block; padding: 0; box-sizing: border-box; }
.flatpickr-time { text-align: center; outline: 0; display: flex; height: 0; line-height: 32px; max-height: 32px; box-sizing: border-box; overflow: hidden; background: #fff; border-radius: 0 0 4px 4px; }
.flatpickr-time:after { content: ""; display: table; clear: both; }
.flatpickr-time .numInputWrapper { flex: 1; width: 40%; height: 32px; float: left; }
.flatpickr-time .numInputWrapper span.arrowUp:after { border-bottom-color: #484848; }
.flatpickr-time .numInputWrapper span.arrowDown:after { border-top-color: #484848; }
.flatpickr-time.hasSeconds .numInputWrapper { width: 26%; }
.flatpickr-time.time24hr .numInputWrapper { width: 49%; }
.flatpickr-time input { background: transparent; box-shadow: none; border: 0; border-radius: 0; text-align: center; margin: 0; padding: 0; height: inherit; line-height: inherit; color: #484848; font-size: 11px; position: relative; box-sizing: border-box; appearance: textfield; }
.flatpickr-time input.flatpickr-hour { font-weight: bold; }
.flatpickr-time input.flatpickr-minute, .flatpickr-time input.flatpickr-second { font-weight: 400; }
.flatpickr-time input:focus { outline: 0; border: 0; }
.flatpickr-time .flatpickr-time-separator, .flatpickr-time .flatpickr-am-pm { height: inherit; float: left; line-height: inherit; color: #484848; font-weight: bold; width: 2%; user-select: none; align-self: center; }
.flatpickr-time .flatpickr-am-pm { outline: 0; width: 18%; cursor: pointer; text-align: center; font-weight: 400; }
.flatpickr-time input:hover, .flatpickr-time .flatpickr-am-pm:hover, .flatpickr-time input:focus, .flatpickr-time .flatpickr-am-pm:focus { background: #eaeaea; }
.flatpickr-input[readonly] { cursor: pointer; }
/* -- 22q. Animation -------------------------------------------- */
@keyframes fpFadeInDown { from { opacity: 0; transform: translate3d(0,-20px,0); } to { opacity: 1; transform: translate3d(0,0,0); } }
/* Inline-Kalender im #calender braucht keinen Popup-Zeiger (die blaue Spitze).
Scoped auf #calender, damit Popup-Datepicker in Formularen ihren Pfeil behalten. */
#calender .flatpickr-calendar.inline:before,
#calender .flatpickr-calendar.inline:after { display: none; }
/* -- 22r. Mobile: 1-Monats-Kalender volle verfuegbare Breite ----
Hebt die fixen 224px-Sperren des Single-Month-Falls auf, damit der
Kalender den Platz im Container fuellt (mit Luft zur Seite via section.px-2).
Greift bewusst NUR auf :not(.multiMonth) – der Mehrmonatsfall (spo-cal-spaced)
bleibt unveraendert. max-width deckelt die Breite auf grossen Phones. */
@media (max-width: 575.98px) {
#calender .col-auto { width: 100%; padding-left: 1rem; padding-right: 1rem; }
#calender .flatpickr-calendar:not(.multiMonth) { width: 100% !important; max-width: 420px; margin-left: auto; margin-right: auto; }
/* Wrapper-Kette aufbrechen: innerContainer (flex) + rContainer (inline-block) muessen wachsen,
sonst bleibt das Tagesraster trotz width:100% inhaltsbreit. */
#calender .flatpickr-calendar:not(.multiMonth) .flatpickr-innerContainer,
#calender .flatpickr-calendar:not(.multiMonth) .flatpickr-rContainer,
#calender .flatpickr-calendar:not(.multiMonth) .flatpickr-weekdays,
#calender .flatpickr-calendar:not(.multiMonth) .flatpickr-days,
#calender .flatpickr-calendar:not(.multiMonth) .dayContainer {
width: 100% !important; min-width: 0 !important; max-width: 100% !important;
}
#calender .flatpickr-calendar:not(.multiMonth) .flatpickr-rContainer { display: block; }
}
/* ================================================================
23. Rückempfang – Stream Grid & Cards
================================================================ */
.stream-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 576px) { .stream-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .stream-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1400px) { .stream-grid { grid-template-columns: repeat(4, 1fr); } }
.stream-card { background: #fff; border-radius: .5rem; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.1); transition: box-shadow .2s, transform .2s; }
.stream-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.15); transform: translateY(-2px); }
.stream-card-player { position: relative; width: 100%; padding-top: 56.25%; overflow: hidden; background: #000; } /* 16:9 */
.stream-card-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.stream-card-body { padding: .5rem .75rem; display: flex; align-items: center; gap: .25rem; }
.stream-card-title { font-weight: 600; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stream-expand-btn { color: #6c757d; font-size: .85rem; line-height: 1; padding: .2rem .35rem; border-radius: .25rem; transition: color .15s, background .15s; }
.stream-expand-btn:hover { color: #212529; background: rgba(0,0,0,.08); }
.stream-single-player { position: relative; width: 100%; padding-top: 56.25%; background: #000; border-radius: .5rem; overflow: hidden; }
.stream-single-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Gebaut-Switch: rot/grün mit Checkmark */
.gebaut-switch {
width: 3em !important;
height: 1.5em !important;
cursor: pointer;
background-color: var(--bs-danger) !important;
border-color: var(--bs-danger) !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
transition: background-color .2s, border-color .2s;
}
.gebaut-switch:checked {
background-color: var(--bs-success) !important;
border-color: var(--bs-success) !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3cpolyline points='-1.2,0.4 -0.4,1.2 1.4,-0.8' fill='none' stroke='%23198754' stroke-width='0.7' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e") !important;
}
.gebaut-switch:focus {
box-shadow: none !important;
}
@media (max-width: 719.98px) { .plop-btn-label { display: none; } .plop-icon-wide { display: none; } }
@media (min-width: 720px) { .plop-icon-narrow { display: none; } }
.plop-mobile-detail .plop-btn-label { display: inline; }
.plop-mobile-detail .plop-icon-wide { display: inline; }
.plop-mobile-detail .plop-icon-narrow { display: none; }
.stream-detail-content .table tr { background-color: transparent !important; }
.stream-detail-content .table td,
.stream-detail-content .table th { background-color: transparent !important; box-shadow: none !important; }
/* ============================================================
HANNA-BRANCH – offene Styles (noch prüfen / aufräumen)
============================================================ */
/* Scroll snap for program grid days */
.program-grid .days {
scroll-snap-align: start;
}
/* ClubTV Row-Overrides (volle Farben) */
.sdclubtv >td {background-color: #5e2028; color: #fff;}
.sdclubtv-ksc >td {background-color: #5e2028; color: #fff;}
.sdclubtv-spt >td {background-color: #5e2028; color: #fff;}
.sdclubtv-vfb >td {background-color: #5e2028; color: #fff;}
.hogmore >td {background-color: #5e2028; color: #fff;}
.edge >td {background-color: #006b3d; color: #fff;}
/* ── Booking iframe (responsive Google Forms) ── */
.booking-iframe-wrapper {
position: relative;
width: 100%;
max-width: 800px;
background: #fff;
border: 1px solid #dee2e6;
border-radius: .5rem;
overflow: hidden;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
}
.booking-iframe {
display: block;
width: 100%;
min-height: 2400px;
border: none;
}
@media (max-width: 768px) {
.booking-iframe-wrapper { max-width: 100%; }
.booking-iframe { min-height: 2800px; }
}
/* ── Switches: grün + Häkchen im Kreis wenn aktiv ────────────────── */
.form-check-input:checked {
background-color: #198754;
border-color: #198754;
}
.form-switch .form-check-input:checked {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3cpolyline points='-1.2,0.4 -0.4,1.2 1.4,-0.8' fill='none' stroke='%23198754' stroke-width='0.7' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e") !important;
}
.form-check-input:focus {
border-color: #198754;
box-shadow: 0 0 0 .25rem rgba(25,135,84,.25);
}
/* ── Switch: rot wenn aktiv (z.B. Downlink ausschließen) ─────────── */
.downlink-switch.form-check-input:checked {
background-color: #dc3545;
border-color: #dc3545;
}
.form-switch .downlink-switch.form-check-input:checked {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3cline x1='-1.2' y1='-1.2' x2='1.2' y2='1.2' stroke='%23dc3545' stroke-width='0.7' stroke-linecap='round'/%3e%3cline x1='1.2' y1='-1.2' x2='-1.2' y2='1.2' stroke='%23dc3545' stroke-width='0.7' stroke-linecap='round'/%3e%3c/svg%3e") !important;
}
.downlink-switch.form-check-input:focus {
border-color: #dc3545;
box-shadow: 0 0 0 .25rem rgba(220,53,69,.25);
}
/* ── Form-Floating in kompakter Größe (Studio-Forms) ─────────────────
Bootstrap unterstützt .form-control-sm/.form-select-sm in
.form-floating offiziell nicht — diese Klasse stellt Höhe, Padding
und Label-Position so ein, dass Input/Select kompakt bleiben und
das Floating-Label korrekt sitzt. */
.form-floating-sm { position: relative; }
.form-floating-sm > .form-control,
.form-floating-sm > .form-select {
height: calc(2.5rem + 2px);
min-height: calc(2.5rem + 2px);
padding: 1rem 0.6rem 0.25rem 0.6rem;
font-size: 0.8125rem;
line-height: 1.15;
}
.form-floating-sm > .form-select {
padding-top: 1.05rem;
padding-bottom: 0.2rem;
}
.form-floating-sm > label {
position: absolute;
top: 0;
left: 0;
height: 100%;
padding: 0.35rem 0.6rem;
font-size: 0.75rem;
pointer-events: none;
border: 1px solid transparent;
transform-origin: 0 0;
transition: opacity .1s ease-in-out, transform .1s ease-in-out;
color: #6c757d;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.form-floating-sm > .form-control:focus ~ label,
.form-floating-sm > .form-control:not(:placeholder-shown) ~ label,
.form-floating-sm > .form-select ~ label {
opacity: .85;
transform: scale(.85) translateY(-.35rem) translateX(.15rem);
}
.form-floating-sm > .form-control::placeholder { color: transparent; }
/* ── Rechte-Tab: Tooltip-Hinweis ──────────────────────────────────── */
.rights-hint {
text-decoration: underline dotted rgba(0,0,0,.45);
text-underline-offset: 3px;
cursor: help;
}
body.dark-mode .rights-hint {
text-decoration-color: rgba(255,255,255,.5);
}
/* ── Rechte-Tab: responsive Spalten ───────────────────────────────────
Statt fester 2 Spalten richtet sich die Spaltenzahl nach der verfügbaren
Breite (column-width) – mobil/eng bleibt so genau eine Spalte pro Recht. */
.rights-list {
column-width: 15rem;
column-gap: 1.5rem;
}
.rights-list .form-check {
break-inside: avoid;
-webkit-column-break-inside: avoid;
}
/* Lange Recht-Namen nicht in die Nachbarspalte überlaufen lassen */
.rights-list .form-check-label {
display: inline-block;
max-width: 100%;
overflow-wrap: anywhere;
vertical-align: top;
}
/* colors */
/* .color-ar {background: #cdffc1;}
.color-u {background: #ffff00;}
.color-uw {background: #f9e79f;}
.color-w {background: #00ff33;}
.color-v {background: #ff0000;}
.color-d {background: #ffffff;}
.color-a {background: #d159f5;}
.color-m {background: #00f0ff;}
.color-p {background: #ffa500;}
.color-saw{background: #27622aff;} */
[color='ar'] {background: #cdffc1;}
[color='u'] {background: #ffff00;}
[color='uw'] {background: #f9e79f;}
[color='w'] {background: #00ff33;}
[color='v'] {background: #ff0000;}
[color='d'] {background: #ffffff;}
[color='a'] {background: #d159f5;}
[color='m'] {background: #00f0ff;}
[color='p'] {background: #ffa500;}
[color='saw'] {background: #27622aff;}
/* Wochenenden mit Urlaub: diagonal halb markiert (zaehlen nicht als Urlaubstag) */
.edit-cell.weekend[color='u'] { background: linear-gradient(135deg, #ffff00 50%, #e7e7e7 50%); }
.edit-cell.weekend[color='uw'] { background: linear-gradient(135deg, #f9e79f 50%, #e7e7e7 50%); }
.deactivate-check:checked {
background-color: var(--bs-danger);
border-color: var(--bs-danger);
}
.nav-tabs .nav-link[disabled] {
color: #adb5bd;
}
/* Filter-Button-Gruppen: Icons beim Hover/Active weiß */
.btn-group [data-filter].btn-outline-secondary:hover i,
.btn-group [data-filter].btn-outline-secondary.active i {
color: #fff !important;
}
/* Stream-Produktionsübersicht: kompakte Detail-Tabelle */
table.stream-detail-table > tbody > tr > td {
padding-top: .1rem !important;
padding-bottom: .1rem !important;
vertical-align: middle;
line-height: 1.25;
}
.stream-detail-table p { margin: 0 !important; padding: 0; }
.stream-detail-table td > p:empty,
.stream-detail-table td > br:first-child { display: none; }
/* Studio */
.studio-card {
border: 1px solid #cfe0ff;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(30, 45, 75, 0.1);
}
.studio-card-title {
margin: 0;
font-size: 1.5rem;
font-weight: 700;
}
.studio-btn {
white-space: nowrap;
color: #ffffff;
background-color: #002957;
}
.studio-btn:hover {
background-color: #001f3f;
color: #ffffff;
}
/* Changes-Filter-Toolbar: Toggle-Buttons sichtbar unter 1860px, Panels darüber. */
#changes-filter-toggles { display: flex; }
@media (min-width: 1860px) {
#changes-filter-toggles { display: none !important; }
#changes-filter-panels .prod-filter-collapse { display: flex !important; }
}
/* Besetzungs-Filter-Toolbar: JS setzt .besetzung-compact wenn Panels nicht in eine Zeile passen */
#besetzung-filter-toggles, #besetzung-filter-toggles-quick { display: none !important; }
#besetzung-filter-toolbar .prod-filter-collapse { display: flex; }
#besetzung-filter-toolbar.besetzung-compact #besetzung-filter-toggles,
#besetzung-filter-toolbar.besetzung-compact #besetzung-filter-toggles-quick { display: flex !important; }
#besetzung-filter-toolbar.besetzung-compact .prod-filter-collapse { display: none !important; }
#besetzung-filter-toolbar.besetzung-compact .prod-filter-collapse.show,
#besetzung-filter-toolbar.besetzung-compact .prod-filter-collapse.collapsing { display: flex !important; }
@media (max-width: 401.98px) { .kommentar-label-full { display: none; } }
@media (min-width: 402px) { .kommentar-label-short { display: none; } }
/* Kommentar-Toggle Text-Icon ("MCR"/"KOM"): kleiner + kompakt gesetzt, damit der
Text-Token eher wie ein Bootstrap-Icon wirkt statt wie normaler Button-Text. */
.kommentar-texticon { font-size: .7rem; letter-spacing: -.04em; line-height: 1; }
/* Schmaleres horizontales Padding, damit die Filterzeile auf Mobile nicht umbricht. */
.kommentar-toggle { padding-left: .4rem; padding-right: .4rem; }
/* Kategorie-Inline-Fallback (Produktions-Uebersichten):
Bei breitem Viewport ist die Kategorie eine eigene Tabellenspalte. Sobald die Tabelle
die Kategorie-Spalte kollabiert, setzt das JS der Tabelle .kat-inline-on – dann erscheint
die Kategorie als Badge direkt unter dem Produktionstitel (statt im Aufklapp-Detail). */
.prod-kat-inline { display: none; }
.kat-inline-on .prod-kat-inline { display: block; margin-top: .35rem; }
/* Produktionsbeginn-Inline-Fallback (Produktionsuebersicht): Uhrzeit unter dem Datum nur zeigen,
wenn die separate Produktionsbeginn-Spalte kollabiert ist (.beginn-inline-on via JS).
Der Spaltenkopf wechselt gleichzeitig von "Datum" auf "Zeit" – ein gemeinsamer Ausloeser. */
.prod-beginn-inline { display: none; }
#produktionstable.beginn-inline-on .prod-beginn-inline { display: block; }
#produktionstable .th-zeit-label { display: none; }
#produktionstable.beginn-inline-on .th-zeit-label { display: inline; }
#produktionstable.beginn-inline-on .th-datum-label { display: none; }
/* Reports-Tabelle nutzt feste Bootstrap-Breakpoints (Kategorie = d-none d-xl-table-cell):
unter xl ist die Spalte ausgeblendet, daher den Inline-Badge dort direkt zeigen. */
@media (max-width: 1199.98px) { #reports-table .prod-kat-inline { display: block; margin-top: .35rem; } }
/* Sendeplan-Änderungen: dedizierte Responsive-Control-Spalte (Caret zum Aufklappen).
Das Responsive-Plugin setzt .collapsed an der Tabelle, sobald Spalten versteckt werden;
die Control-Spalte wird daher nur im kollabierten (mobilen/schmalen) Zustand eingeblendet. */
#aenderungentable .aen-control-col { width: 1px; white-space: nowrap; text-align: center; }
#aenderungentable:not(.collapsed) .aen-control-col { display: none; }
/* Quick-Besetzung (Produktions-Uebersicht / Besetzung) */
.quick-besetzung .quick-sel:disabled {
color: #6c757d;
background-color: #f8f9fa;
}
/* Besetzungs-Staff-Tabelle: Bootstraps Default-Table-BG ueberschreiben, damit die Produktionszeilen-Kategoriefarbe als Trennstreifen durchscheint. Die tbody-Zeilen bekommen einen leicht transluzenten weissen Overlay (gute Lesbarkeit, Kategoriefarbe scheint zwischen den Zeilen durch). Greift sowohl in der Besetzungsuebersicht als auch in "Meine Termine".
Bootstraps Table-CSS-Variablen werden lokal zurueckgesetzt, damit Hover-Effekte der aeusseren Tabelle nicht durchschlagen. Statt eines fest gefaerbten border-bottom (der auf der Kategoriezeilen-Hintergrundfarbe schmutzig wirkt) werden die Zeilen ueber border-spacing getrennt – die Kategoriefarbe scheint als sauberer Trennstreifen durch. */
.besetzung-staff-table {
--bs-table-bg: transparent;
--bs-table-bg-type: transparent;
--bs-table-bg-state: transparent;
--bs-table-accent-bg: transparent;
border-collapse: separate;
border-spacing: 0 2px;
margin-top: -2px;
margin-bottom: -2px;
}
.besetzung-staff-table > tbody > tr > td,
.besetzung-staff-table > tfoot > tr > td {
background-color: transparent;
border-bottom-width: 0;
padding: .4rem .65rem;
}
.besetzung-staff-table > tbody > tr > td {
background-color: rgba(255, 255, 255, 0.75);
}
/* Namen mit Kontakt-Tooltip: Maus-Cursor + dezenter, gepunkteter Unterstrich beim
Hover/Focus, damit erkennbar ist, dass dahinter Kontaktinfos liegen. */
[data-staff-contact-tooltip] { cursor: pointer; }
[data-staff-contact-tooltip]:hover,
[data-staff-contact-tooltip]:focus {
text-decoration: underline;
text-decoration-style: dotted;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
/* Kontakt-Tooltip im SPO-Design: CI-Hintergrund (faerbt in BS5 auch den Pfeil ueber --bs-tooltip-bg),
heller Text, linksbuendig, voll deckend. */
.staff-contact-tooltip { --bs-tooltip-bg: var(--spo-ci); --bs-tooltip-color: #fff; --bs-tooltip-opacity: 1; --bs-tooltip-max-width: 320px; }
.staff-contact-tooltip .tooltip-inner { padding: .7rem 1rem; text-align: left; word-break: break-word; box-shadow: 0 .25rem .75rem rgba(0,0,0,.25); }
.prod-location-tooltip { cursor: pointer; }
/* Besetzungsuebersicht – Mobile (
Button und Formular werden direkte Flex-Items der Datumszeile (DOM bleibt
unveraendert, JS findet den Wrapper weiterhin). */
#besetzung-table .day-header .saw-add-slot { display: contents; }
#besetzung-table .day-header .saw-toggle-btn { order: 1; margin-left: auto; }
#besetzung-table .day-header .saw-entries { order: 3; flex: 1 1 100%; }
#besetzung-table .day-header .saw-entries:empty { display: none; }
/* SAW-Add-Form als eigene volle Zeile (order 4) im 2-Spalten-Grid: Rolle und Operator spannen
jeweils ueber beide Spalten, Speichern fuellt die linke Spalte und Abbrechen sitzt rechts daneben.
Selektor mit .d-flex, damit der Grid-Override nur greift, wenn JS den Wrapper geoeffnet hat. */
#besetzung-table .day-header .saw-add-wrapper.d-flex {
display: grid !important;
grid-template-columns: 1fr auto;
gap: .35rem;
width: 100%;
flex: 1 1 100%;
order: 4;
}
#besetzung-table .day-header .saw-add-wrapper.d-flex > .saw-role-sel,
#besetzung-table .day-header .saw-add-wrapper.d-flex > .saw-op-sel {
grid-column: 1 / -1;
width: 100% !important;
}
/* Mobile-Detail: bestehende Staff-Rows bleiben im 4-Spalten-Tabellen-Layout (siehe JS:
ajaxCreateNewStaff). Das Add-Formular wird auf mobile NICHT als TR-Zeilen, sondern als
separates Block-Div (.new-staff-mobile-form) hinter der Staff-Table gerendert -- so
greifen Bootstrap-Defaults (form-select width:100%, input-group width:100%) sauber. */
.besetzung-mobile-detail .besetzung-staff-table { width: 100%; }
/* Hauptzeile + folgende Detailzeile (Besetzungs-Button) bilden mobil EINEN Block:
untere Zell-Linie der Hauptzeile entfernen -> keine Trennlinie ueber dem Button. */
#besetzung-table > tbody > tr.besetzung-main > td { border-bottom: 0; }
/* Besetzungs-Detail: einheitliche, kompakte Abstaende zwischen Button, Staff-Liste und Add-Formular. */
#besetzung-table .bes-staff-toggle { margin-bottom: .5rem; }
#besetzung-table .bes-detail-staff .new-staff-mobile-form { margin-top: .5rem !important; padding: .5rem !important; }
#besetzung-table .bes-detail-staff .new-staff-mobile-form > .mb-2 { margin-bottom: .4rem !important; }
/* Add-Formular-Felder kompakter: Font bleibt 16px (iOS-Anti-Zoom), nur Padding/Hoehe reduziert,
damit sie nicht ueberdimensioniert neben der Staff-Liste wirken. */
#besetzung-table .bes-detail-staff .new-staff-mobile-form .form-select,
#besetzung-table .bes-detail-staff .new-staff-mobile-form .form-control,
#besetzung-table .bes-detail-staff .new-staff-mobile-form .input-group-text { padding-top: .2rem; padding-bottom: .2rem; min-height: 0; line-height: 1.35; }
}
/* Person-hinzufügen-Button im Collapse linksbündig statt rechtsbündig. */
#besetzung-table .bes-detail-staff tfoot td { text-align: left !important; }
/* Staff-Tabellen-Zellen niemals ausblenden — JS-Spalten-Hide darf nicht in verschachtelte Tabellen durchschlagen. */
#besetzung-table .besetzung-staff-table td { display: table-cell !important; }
/* Mobile-Detailbereich: traegt die Kategorie-Toenung der Hauptzeile (prod-row-Klasse), damit der
Bereich hinter dem Besetzungs-Button optisch zur Produktion gehoert. Nur die aufklappbare
Meta-Box (Kategorie/Wettbewerb/Produktionsort) hebt sich als weisser Block ab. */
#besetzung-table .bes-detail-meta { background-color: #fff; border-radius: .375rem; padding: .5rem .625rem; margin-bottom: .5rem; }
/* Vollbreiter Besetzungs-Button: Label sichtbar lassen — die globale Regel
(.btn-spo-outline span -> display:none unter 992px, Icon-only) wuerde es sonst ausblenden. */
#besetzung-table .bes-staff-toggle span { display: inline !important; }
/* Collapse – Staff-Zeile: Name unter Rolle wenn zu schmal.
.staff-name-compact (div im Rolle-td) einblenden, .staff-name-cell (eigene td) ausblenden.
Kein Layout-Eingriff auf tr/td noetig — nur Show/Hide. */
.staff-name-compact { display: none; }
.bes-detail-staff { container-type: inline-size; }
@container (max-width: 360px) {
#besetzung-table .bes-detail-staff .besetzung-staff-table .staff-name-compact { display: block; }
#besetzung-table .bes-detail-staff .besetzung-staff-table .staff-name-cell { display: none !important; }
#besetzung-table .bes-detail-staff .besetzung-staff-table tbody tr td { vertical-align: top; }
}
/* Detail-Zeile: Stripe-Box-Shadow + Border-Top entfernen, Kategorie-Farbe anwenden.
--row-accent wird vom prod-row-*-tr vererbt; ohne Kategorie Fallback auf transparent. */
#besetzung-table .besetzung-mobile-detail > td {
background-color: var(--row-accent, transparent) !important;
box-shadow: none !important;
border-top: none !important;
}
body.dark-mode #besetzung-table .besetzung-mobile-detail > td {
background-color: #ffffff !important;
background-image: linear-gradient(var(--row-accent, transparent), var(--row-accent, transparent)) !important;
color: #212529 !important;
}
/* Change-Tabelle: Detail-Zeile Farbe + keine störenden Streifen. */
#change-table .change-mobile-detail > td {
background-color: var(--row-accent, transparent) !important;
box-shadow: none !important;
border-top: none !important;
}
body.dark-mode #change-table .change-mobile-detail > td {
background-color: #ffffff !important;
background-image: linear-gradient(var(--row-accent, transparent), var(--row-accent, transparent)) !important;
color: #212529 !important;
}
/* Besetzung – Sticky-Header-Tabelle (gegen das Fenster, ganze Tabelle bleibt geladen).
overflow:visible noetig, damit position:sticky am Viewport statt am table-responsive-
Container klebt. --besetzung-nav-top = Unterkante der festen Navbar (per JS gesetzt). */
#besetzung-table-wrapper { overflow: visible; }
#besetzung-table thead th {
/* !important schlaegt die DataTables-Sortierregel '.table thead th[class*=dt-orderable] { position: relative }' (spo.css) */
position: sticky !important;
top: var(--besetzung-nav-top, 56px);
z-index: 5;
/* Navy-Hintergrund kommt aus '.table thead th' (!important). Kein Schatten, keine Border
-- die CI-Border tragen allein die Tages-Zeilen. */
box-shadow: none;
border-bottom: 0 !important;
}
#besetzung-table .day-header td {
position: sticky;
/* top = Navbar-Unterkante + thead-Hoehe (per JS gesetzt), inkl. 1px Ueberlappung */
top: var(--besetzung-dayheader-top, 88px);
z-index: 4;
/* Blaue CI-Border als box-shadow, da border-bottom bei sticky + border-collapse verschwindet */
box-shadow: 0 2px 0 0 var(--spo-ci), 0 6px 7px -4px rgba(0,0,0,.35);
}
/* Playlist-Operating – identisches Sticky-Header-Verhalten wie Besetzung.
overflow:visible am Wrapper, damit thead/Tages-Zeilen am Viewport statt am
table-responsive-Container kleben. Offsets als CSS-Vars (per JS gesetzt). */
#plop-table-wrapper { overflow: visible; }
#plop-table thead th {
position: sticky !important;
top: var(--plop-nav-top, 56px);
z-index: 5;
box-shadow: none;
border-bottom: 0 !important;
}
#plop-table .day-header td {
position: sticky;
top: var(--plop-dayheader-top, 88px);
z-index: 4;
box-shadow: 0 2px 0 0 var(--spo-ci), 0 6px 7px -4px rgba(0,0,0,.35);
}
/* Signal – Sticky-Header wie Besetzung, aber zweizeiliger thead: jede Kopf-Zeile
klebt mit eigenem top (Zeile 2 direkt unter Zeile 1), Tages-Zeilen darunter. */
#signal-table-wrapper { overflow: visible; }
#signal-table thead tr:first-child th {
position: sticky !important;
top: var(--signal-nav-top, 56px);
z-index: 6;
box-shadow: none;
border-bottom: 0 !important;
}
#signal-table thead tr:nth-child(2) th {
position: sticky !important;
top: var(--signal-thead-row2-top, 89px);
z-index: 5;
box-shadow: none;
border-bottom: 0 !important;
}
#signal-table .day-header td {
position: sticky;
top: var(--signal-dayheader-top, 122px);
z-index: 4;
box-shadow: 0 2px 0 0 var(--spo-ci), 0 6px 7px -4px rgba(0,0,0,.35);
}
/* Generisches Sticky-Header-Verhalten fuer einzeilige Uebersichts-Tabellen
(ikomg, mcr, clubtv, stream) – analog Besetzung. Offsets als CSS-Vars (per JS). */
.ov-sticky-wrap { overflow: visible; }
.ov-sticky-table thead th {
/* !important schlaegt die DataTables-Sortierregel '.table thead th[class*=dt-orderable] { position: relative }' (spo.css) */
position: sticky !important;
top: var(--ov-nav-top, 56px);
z-index: 5;
box-shadow: none;
border-bottom: 0 !important;
}
.ov-sticky-table .day-header td {
position: sticky;
top: var(--ov-dayheader-top, 88px);
z-index: 4;
box-shadow: 0 2px 0 0 var(--spo-ci), 0 6px 7px -4px rgba(0,0,0,.35);
}
/* DataTables Responsive – Child-Row vereinheitlichen (kein Erben der Spalten-Ausrichtung) */
table.dataTable > tbody > tr.child ul.dtr-details {
margin: 0;
padding: 0;
list-style: none;
}
table.dataTable > tbody > tr.child ul.dtr-details > li,
table.dataTable > tbody > tr.child ul.dtr-details > li .dtr-title,
table.dataTable > tbody > tr.child ul.dtr-details > li .dtr-data {
text-align: left !important;
}
table.dataTable > tbody > tr.child ul.dtr-details > li {
padding: .35rem 0;
border-bottom: 1px solid rgba(0,0,0,.06);
}
table.dataTable > tbody > tr.child ul.dtr-details > li:not(.dtr-section) {
display: flex;
align-items: baseline;
gap: .75rem;
}
table.dataTable > tbody > tr.child ul.dtr-details > li:last-child {
border-bottom: 0;
}
/* Feste Label-Spalte → alle Werte beginnen bündig untereinander */
table.dataTable > tbody > tr.child ul.dtr-details > li:not(.dtr-section) .dtr-title {
font-weight: 600;
flex: 0 0 auto;
min-width: 9.5rem;
}
table.dataTable > tbody > tr.child ul.dtr-details > li:not(.dtr-section) .dtr-data {
flex: 1 1 auto;
min-width: 0;
}
/* Child-Row Sektions-Kopfzeile (z. B. Signaluebersicht: MCR / iKOMG / Stream) –
gruppiert die ausgeklappten Werte analog zu den Spalten-Gruppen im Desktop-Header. */
table.dataTable > tbody > tr.child ul.dtr-details > li.dtr-section {
padding: .35rem 0 .2rem;
margin-top: .25rem;
font-weight: 700;
font-size: .8rem;
text-transform: uppercase;
letter-spacing: .03em;
color: var(--spo-ci);
border-bottom: 2px solid var(--spo-ci);
}
/* Aufgeklappte Responsive-Child-Zeile in allen Produktionen-Übersichten immer weiß.
Die Listen kopieren per JS die prod-row-*-Kanalfarbe der Elternzeile auf die Child-Zeile
(siehe produktionen.inc.js / produktionen_uebersichten.inc.js), wodurch der aufgeklappte
Detailbereich sonst die Kanalfärbung erbt. Hier wird er – wie bei MCR (ohne Kanalklasse) –
einheitlich auf weißen Hintergrund gezwungen. */
#produktionstable > tbody > tr.child > td,
#signal-table > tbody > tr.child > td,
#ikomg-table > tbody > tr.child > td,
#fremdproduktion-table > tbody > tr.child > td,
#quality-reports-table > tbody > tr.child > td,
#mcr-table > tbody > tr.child > td,
#clubtv-table > tbody > tr.child > td,
#stream-table > tbody > tr.child > td,
#sportartentable > tbody > tr.child > td {
background-color: #fff !important;
}
/* Meine-Termine-Collapse-Zeilen im Dark Mode: Text schwarz halten. --bs-table-color reset
verhindert dass Bootstrap's .table-Regel den Wert wieder auf spo-ci-light setzt. */
body.dark-mode table.meine-termine-dt > tbody > tr.child > td {
--bs-table-color: #212529;
color: #212529 !important;
}
/* DFB-Produktionsplanung – Aufklapp-Detailzeile der Produktions-Liste: dt/dd als Grid statt
Bootstrap-.row. Das .row-Raster braucht negative Randmargins, die ueber das Padding des Wrappers
hinausragen und die Detailzelle (und damit die Haupttabelle) breiter als den Viewport ziehen. */
.dfb-detail-dl {
display: grid;
grid-template-columns: minmax(5rem, max-content) minmax(0, 1fr);
column-gap: .75rem;
row-gap: .5rem;
/* Eigenes Padding statt p-2 am .dfb-detail-Wrapper -- der ist randlos, damit die
Bedarf-Tabelle buendig an den Kanten der Detailzeile anliegt ("aus einem Guss"). */
padding: .5rem .5rem 0;
margin-bottom: .5rem;
}
/* Aufgeklappte Hauptzeile: Trennlinie zur Detailzeile entfernen, damit Haupt- und Detailzeile als
eine Einheit wirken; die Border der Detail- bleibt als Abschluss zur naechsten Zeile. */
#dfb-produktionsplanung-table > tbody > tr.table-active > td { border-bottom-width: 0; }
.dfb-detail-dl dt { margin: 0; font-weight: 600; }
.dfb-detail-dl dd { margin: 0; min-width: 0; display: flex; align-items: center; }
/* Button-Beschriftung ("Bedarf melden"/"Planung bearbeiten"): in der engen Tabellenspalte erst ab
1330px (eigener Breakpoint, kein Bootstrap-Standard zwischen xl/1200 und xxl/1400 -- analog
d-1100-table-cell), in der aufgeklappten Detailzeile immer -- dort ist die volle Zeilenbreite da.
Bewusst als eigene Klasse statt d-none/d-xl-inline: die Detailzeile entsteht aus einem Klon der
Zelle, der die Utility-Klassen mitbringt. */
.dfb-btn-label { display: none; }
@media (min-width: 1330px) { .dfb-btn-label { display: inline; } }
.dfb-detail .dfb-btn-label { display: inline; }
/* Deaktivierte Felder im Bedarf-Formular (z.B. Sprache/HL-Sprache bei ausgeschaltetem Live/HL-Switch)
deutlicher abblenden als Bootstraps Default (nur Hintergrundfarbe, keine Transparenz). */
#dfb-bedarf-edit-form .form-select:disabled,
#dfb-bedarf-edit-form .form-control:disabled { opacity: .6; }
/* Deaktivierter Channel-Select im Report (bei "Alle Channels einbeziehen") -- gleiche Abblendung. */
#dfb-report-form .form-select:disabled { opacity: .6; }
/* Scroll-Port der Bedarf-Innentabelle. Die px-Breite setzt sizeBedarfScroll() -- ein max-width:100%
greift nicht, weil die umgebende Zelle ihre Breite selbst erst aus dem Inhalt bezieht. */
.dfb-bedarf-scroll { max-width: 100%; }
/* Ohne das hier wuerde Bootstrap's .table (width:100%) die Innentabelle auf die Breite des Scroll-Ports
stauchen statt sie ueberlaufen und scrollen zu lassen -- die Spalten wuerden stattdessen umbrechen. */
table.dfb-bedarf-table { width: auto; min-width: 100%; }
table.dfb-bedarf-table th, table.dfb-bedarf-table td { white-space: nowrap; }
/* DFB-Produktionsplanung – Bedarf-Innentabelle im Collapse: Hintergrund bleibt bewusst immer hell
(spo-ci-light), auch im Dark Mode -- Text daher immer dunkel halten (sonst per body.dark-mode .card
geerbtes spo-ci-light unlesbar auf hellem Grund). */
.dfb-bedarf-table, .dfb-bedarf-table th, .dfb-bedarf-table td {
--bs-table-bg: var(--spo-ci-light);
--bs-table-color: var(--spo-ci-dark);
background-color: var(--spo-ci-light) !important;
color: var(--spo-ci-dark) !important;
}
table.dfb-bedarf-table thead th {
background-color: var(--spo-ci-mid) !important;
color: var(--spo-ci-light) !important;
}
/* Trennlinie vor jeder Spaltengruppe ("Live", "Highlights & Upload") des Bedarf-Detailtable. */
table.dfb-bedarf-table th.dfb-bedarf-group-start,
table.dfb-bedarf-table td.dfb-bedarf-group-start {
border-left: 2px solid var(--spo-ci-mid);
}
/* Produktions-Liste-/Bedarfs-Liste-Tabellen im Dark Mode: eigener, hellerer Body-Ton (spo-ci statt
spo-ci-dark aus der generischen .dark-mode-table-Regel) -- ID-Scope statt globaler Anpassung. */
body.dark-mode #dfb-produktionsplanung-table tbody,
body.dark-mode #dfb-bedarf-table tbody,
body.dark-mode .dfb-list-field-table tbody {
background-color: var(--spo-ci) !important;
--bs-table-bg: var(--spo-ci);
}
/* Email-Empfaengerliste (Besetzung-Stil) im Dark Mode: statt des generischen weissen
Zeilen-Overlay aus .besetzung-staff-table einen spo-ci-Ton je Zelle setzen. */
body.dark-mode .dfb-email-userlist-table > tbody > tr > td {
background-color: var(--spo-ci) !important;
color: var(--spo-ci-light) !important;
}
/* Produktionsplanungsdaten-Kopf im Bedarf-Edit: kein eigener Kasten -- Body transparent statt
des spo-ci-mid-Kastens aus der generischen .dark-mode-table-simple-Regel. */
body.dark-mode .dfb-bedarf-produktionsplanung-header-table tbody {
background-color: transparent !important;
--bs-table-bg: transparent;
}
body.dark-mode .dfb-bedarf-produktionsplanung-header-hr { border-color: var(--spo-dark-border); opacity: 1; }
body.dark-mode .mt-detail-content,
body.dark-mode .mt-detail-content span {
color: #212529 !important;
}
/* Meine Termine – Mobile-Detail im Besetzungs-Stil: Meta (Wettbewerb/Produktionsort) als weisse,
randlose Flaeche, Besetzung darunter. Die Child-Row traegt die Kategorie-Toenung (prod-row). */
.mt-detail-content .mt-detail-meta { background-color: #fff; border-radius: 0; padding: .5rem .625rem; margin-bottom: .5rem; }
.mt-detail-content .mt-detail-meta > div + div { margin-top: .15rem; }
body.dark-mode .mt-detail-content .mt-detail-meta { background-color: var(--spo-ci); }
body.dark-mode .mt-detail-content .mt-detail-meta,
body.dark-mode .mt-detail-content .mt-detail-meta span { color: var(--spo-ci-light) !important; }
/* Besetzungs-Block als NAHTLOSE zweite Zeile: keine Trennlinie zur Hauptzeile, kein oberer Abstand,
gleiche Kategorie-Toenung -> Haupt- + Besetzungszeile wirken als ein Block. */
table.meine-termine-dt > tbody > tr.mt-has-child > td { border-bottom: 0 !important; }
table.meine-termine-dt > tbody > tr.mt-child-row > td { padding: 0 .5rem .55rem .5rem; }
.mt-detail-content { padding: 0; }
/* Meine Termine: Besetzungs-Staff-Zeilen transparent (statt halbtransparentem Weiss wie in der
Besetzungsuebersicht), damit die Kategorie-Toenung der Produktionszeile durchscheint –
Desktop-Spalte wie Mobile-Detail. */
table.meine-termine-dt .besetzung-staff-table > tbody > tr > td { background-color: transparent; }
/* Produktionen-Edit, Tab Besetzung: keine Kategorie-Toenung dahinter (eigene Card statt Listenzeile) -- daher Zeilen ebenfalls transparent statt halbtransparentem Weiss. */
.besetzung-edit-view .besetzung-staff-table > tbody > tr > td { background-color: transparent; }
table.dataTable > tbody > tr.child ul.dtr-details > li.dtr-section:first-child {
margin-top: 0;
}
/* Signaluebersicht: aufgeklappte Child-Zeile nutzt die volle Breite – Label links, Wert rechtsbuendig.
So lesen sich die Sektionen MCR/iKOMG/Stream als durchgaengige, tabellenartige Bloecke statt linksbuendig
gestauchter Kurz-Zeilen. */
#signal-table > tbody > tr.child ul.dtr-details { width: 100%; }
#signal-table > tbody > tr.child ul.dtr-details > li:not(.dtr-section) {
justify-content: space-between;
gap: 1rem;
padding-left: .75rem;
padding-right: .75rem;
}
#signal-table > tbody > tr.child ul.dtr-details > li:not(.dtr-section) .dtr-title {
flex: 0 0 auto;
min-width: 0;
}
#signal-table > tbody > tr.child ul.dtr-details > li:not(.dtr-section) .dtr-data {
flex: 1 1 auto;
text-align: right !important;
}
#signal-table > tbody > tr.child ul.dtr-details > li.dtr-section {
padding-left: .75rem;
padding-right: .75rem;
}
/* Produktionstabelle: Responsive-Aufklapp-Control als Chevron-Button (Stil wie /management/wettbewerbe).
Ersetzt das Standard-Dreieck des Responsive-Plugins durch ein bootstrap-icon-Chevron in einem kleinen
umrandeten Kaestchen (rechts = eingeklappt, runter = ausgeklappt). ID-Selektor => hoehere Spezifitaet
als die Plugin-Default-Regeln, daher kein Erben der Dreiecks-Borders. */
#produktionstable.dtr-column.collapsed > tbody > tr > td.dtr-control:before,
#txt-table.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
#kontribtable.dtr-column.collapsed > tbody > tr > td.dtr-control:before,
#kontrib-list-table.dtr-column.collapsed > tbody > tr > td.dtr-control:before,
#sendungentable.dtr-column.collapsed > tbody > tr > td.dtr-control:before,
#signal-table.dtr-column.collapsed > tbody > tr > td.dtr-control:before,
#mcr-table.dtr-column.collapsed > tbody > tr > td.dtr-control:before,
#clubtv-table.dtr-column.collapsed > tbody > tr > td.dtr-control:before,
#fremdproduktion-table.dtr-column.collapsed > tbody > tr > td.dtr-control:before,
#quality-reports-table.dtr-column.collapsed > tbody > tr > td.dtr-control:before,
#aenderungentable.dtr-column.collapsed > tbody > tr > td.dtr-control:before,
#sportartentable.dtr-column.collapsed > tbody > tr > td.dtr-control:before {
content: "\f285" !important; /* bi-chevron-right */
font-family: "bootstrap-icons" !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
font-size: .75rem;
line-height: 1 !important;
color: #6c757d;
border: 1px solid #ced4da !important;
border-radius: .25rem;
margin-right: .5em;
vertical-align: middle;
}
#produktionstable.dtr-column.collapsed > tbody > tr.dtr-expanded > td.dtr-control:before,
#txt-table.dtr-inline.collapsed > tbody > tr.dtr-expanded > td.dtr-control:before,
#kontribtable.dtr-column.collapsed > tbody > tr.dtr-expanded > td.dtr-control:before,
#kontrib-list-table.dtr-column.collapsed > tbody > tr.dtr-expanded > td.dtr-control:before,
#sendungentable.dtr-column.collapsed > tbody > tr.dtr-expanded > td.dtr-control:before,
#signal-table.dtr-column.collapsed > tbody > tr.dtr-expanded > td.dtr-control:before,
#mcr-table.dtr-column.collapsed > tbody > tr.dtr-expanded > td.dtr-control:before,
#clubtv-table.dtr-column.collapsed > tbody > tr.dtr-expanded > td.dtr-control:before,
#fremdproduktion-table.dtr-column.collapsed > tbody > tr.dtr-expanded > td.dtr-control:before,
#quality-reports-table.dtr-column.collapsed > tbody > tr.dtr-expanded > td.dtr-control:before,
#aenderungentable.dtr-column.collapsed > tbody > tr.dtr-expanded > td.dtr-control:before,
#sportartentable.dtr-column.collapsed > tbody > tr.dtr-expanded > td.dtr-control:before {
content: "\f282" !important; /* bi-chevron-down */
border: 1px solid #ced4da !important;
}
/* Desktop (nichts eingeklappt): keine Control-Spalten-Grafik in den Übersichten mit eigener Chevron-Spalte */
#produktionstable.dtr-column:not(.collapsed) > tbody > tr > td.dtr-control:before,
#kontribtable.dtr-column:not(.collapsed) > tbody > tr > td.dtr-control:before,
#kontrib-list-table.dtr-column:not(.collapsed) > tbody > tr > td.dtr-control:before,
#sendungentable.dtr-column:not(.collapsed) > tbody > tr > td.dtr-control:before,
#signal-table.dtr-column:not(.collapsed) > tbody > tr > td.dtr-control:before,
#mcr-table.dtr-column:not(.collapsed) > tbody > tr > td.dtr-control:before,
#clubtv-table.dtr-column:not(.collapsed) > tbody > tr > td.dtr-control:before,
#fremdproduktion-table.dtr-column:not(.collapsed) > tbody > tr > td.dtr-control:before,
#quality-reports-table.dtr-column:not(.collapsed) > tbody > tr > td.dtr-control:before,
#aenderungentable.dtr-column:not(.collapsed) > tbody > tr > td.dtr-control:before,
#sportartentable.dtr-column:not(.collapsed) > tbody > tr > td.dtr-control:before {
content: none !important;
border: 0 !important;
}
/* Dark Mode: die Chevron-Box oben hartcodiert Light-Mode-Farben (Icon #6c757d, Border #ced4da) -- im
Dark Mode wirkt das als heller Fleck auf dunklem Grund. Gleiche Farben wie die dark-mode-btn-Outline-
Buttons (z.B. Aufklapp-Button in teams.inc.js) fuer ein einheitliches Bild. Selektor ohne ".dtr-expanded"
trifft ueber die hoehere Elementanzahl (":before" + "tr" ohne Klassenrestriktion) beide Icon-Zustaende
(Chevron-Right/-Down), siehe deren jeweilige Spezifitaet oben. */
body.dark-mode #produktionstable.dtr-column.collapsed > tbody > tr > td.dtr-control:before,
body.dark-mode #txt-table.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
body.dark-mode #kontribtable.dtr-column.collapsed > tbody > tr > td.dtr-control:before,
body.dark-mode #kontrib-list-table.dtr-column.collapsed > tbody > tr > td.dtr-control:before,
body.dark-mode #sendungentable.dtr-column.collapsed > tbody > tr > td.dtr-control:before,
body.dark-mode #signal-table.dtr-column.collapsed > tbody > tr > td.dtr-control:before,
body.dark-mode #mcr-table.dtr-column.collapsed > tbody > tr > td.dtr-control:before,
body.dark-mode #clubtv-table.dtr-column.collapsed > tbody > tr > td.dtr-control:before,
body.dark-mode #fremdproduktion-table.dtr-column.collapsed > tbody > tr > td.dtr-control:before,
body.dark-mode #quality-reports-table.dtr-column.collapsed > tbody > tr > td.dtr-control:before,
body.dark-mode #aenderungentable.dtr-column.collapsed > tbody > tr > td.dtr-control:before {
color: var(--spo-ci-light) !important;
border-color: var(--spo-dark-border) !important;
}
/* Uebersichten mit manuell per tr.child-Markup nachgebauter Detail-Zeile (ikomg-table/stream-table,
kein DataTables Responsive, kein row().child()) sowie Besetzungsaenderungen (#change-table, per
css("display", ...) statt DataTables-API umgeschaltete Detail-Zeile): sanftes Einblenden -- die
CSS-Animation laeuft automatisch immer dann, wenn die Zeile von display:none in einen sichtbaren
display-Wert wechselt bzw. neu ins DOM eingefuegt wird, kein JS noetig. Schliessen bleibt abrupt:
kein Vorher-Hook zum Abspielen einer Ausblend-Animation vorhanden. Alle anderen Uebersichten mit
DataTables-Responsive-Child-Zeile (type:"column"/"inline") animieren beide Richtungen bereits per
JS ueber window.spoResponsiveAnimatedDisplay() (siehe spo.inc.js) bzw. eigenem row().child()-Handler
(reports-table) und brauchen dieses CSS-Fallback nicht mehr. */
@keyframes dtrChildIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
#change-table > tbody > tr.change-mobile-detail,
#ikomg-table > tbody > tr.child,
#stream-table > tbody > tr.child { animation: dtrChildIn .2s ease; }
/* Produktionen: Edit-Button-Spalte (letzte Spalte) auf reine Button-Breite schrumpfen.
Auf schmalen Viewports ist der Button nur das Icon (Text via d-none d-xl-inline), daher
braucht die Spalte kaum Padding – so bleibt maximal Platz fuer den Produktionstitel. */
#produktionstable > thead > tr > th:last-child,
#produktionstable > tbody > tr:not(.child) > td:last-child {
width: 1px;
white-space: nowrap;
padding-left: .25rem;
padding-right: .25rem;
}
/* Stats-Tabelle: horizontales Scroll-Snapping */
#stats-table-wrap {
scroll-snap-type: x mandatory;
scroll-padding-left: var(--stats-snap-padding, 0);
}
#stats-table th,
#stats-table td { scroll-snap-align: start; }
/* Stats-Tabelle: Name-Spalte horizontal sticky.
border-collapse:separate gibt jeder Zelle eigene Borders – sticky-Spalte besitzt ihren rechten Border.
border-spacing:0 verhindert Luecken; leading-edge-Ansatz (nur right+bottom) verhindert Dopplungen. */
#stats-table {
border-collapse: separate !important;
border-spacing: 0;
}
#stats-table tbody td {
border-top: 0 !important;
border-left: 0 !important;
border-right: 1px solid var(--spo-table-border) !important;
border-bottom: 1px solid var(--spo-table-border) !important;
}
#stats-table th:first-child {
position: sticky;
left: 0;
z-index: 3;
}
#stats-table td.stats-name-cell {
position: sticky;
left: 0;
z-index: 2;
background-color: #fff;
border-left: 1px solid var(--spo-table-border) !important;
}
body.dark-mode #stats-table td.stats-name-cell {
background-color: var(--spo-ci-mid);
}
#stats-table thead th:nth-child(2),
#stats-table td.stats-rolle-cell {
position: sticky;
left: var(--stats-rolle-left, 0);
z-index: 2;
}
#stats-table thead th:nth-child(2) { z-index: 3; }
#stats-table td.stats-rolle-cell {
background-color: #fff;
}
#stats-table .stats-sum-row td.stats-rolle-cell {
background-color: #f8f9fa;
}
body.dark-mode #stats-table td.stats-rolle-cell {
background-color: var(--spo-ci-mid);
}
/* iOS-Safari zoomt beim Fokus auf Inputs hinein, wenn deren font-size < 16px ist.
Bootstraps *-sm-Varianten (.875rem = 14px) loesen das aus. Auf Mobile-Viewports
daher alle Form-Inputs auf 16px anheben -- verhindert das Ranzoomen in Filtern,
Suchen und Edit-Formularen. */
@media (max-width: 767.98px) {
.form-control,
.form-control-sm,
.form-select,
.form-select-sm,
.input-group-sm > .form-control,
.input-group-sm > .form-select,
textarea {
font-size: 16px;
}
}
/* Studio Accordion – gesamter Header klickbar */
#studioAccordion .d-flex.align-items-center { cursor: pointer; user-select: none; }
/* Meine-Termine-Tabelle in Personen-Termine Child-Row */
.pt-child-wrap .table-responsive {
border: 1px solid var(--spo-dark-border);
border-radius: .375rem;
overflow: hidden;
}
/* 23. Fokus-Glow entfernen + Fokus-Rahmen auf CI-Petrol
────────────────────────────────────────────────────────────────
Bootstrap legt beim Fokussieren (Klick oder Tab) einen hellen, weichen
"Glow" (box-shadow-Ring, `0 0 0 .25rem rgba(...)`) um Inputs, Selects,
Buttons und Filter. Dieser Ring ist projektweit unerwuenscht und wird
hier global entfernt.
Zusaetzlich faerbt Bootstrap den duennen Fokus-Rahmen standardmaessig
hellblau (`#86b7fe`) – das passt nicht zur CI. Der Rahmen wird daher auf
das CI-Petrol (`--spo-petrol`) umgestellt.
Neue Komponenten NICHT mit eigenem Focus-`box-shadow` versehen. */
.form-control:focus,
.form-control:focus-visible,
.form-select:focus,
.form-select:focus-visible,
.form-check-input:focus,
.form-check-input:focus-visible,
.form-control-color:focus,
.input-group .form-control:focus,
.input-group .form-select:focus,
.btn:focus,
.btn:focus-visible,
.btn-check:focus + .btn,
.btn-check:focus-visible + .btn,
.btn-check:checked + .btn,
.page-link:focus,
.dropdown-item:focus,
.nav-link:focus,
.accordion-button:focus {
box-shadow: none !important;
}
/* Fokus-Rahmen (nur Border-Farbe) auf CI-Petrol – ersetzt das Bootstrap-Hellblau.
NUR fuer Text-/Auswahl-Inputs (Filter, Suchen, Edit-Formulare). Checkboxen,
Radios und Switches sind BEWUSST ausgenommen – deren Checked-/Fokus-Farbe ist
projektweit gruen (`#198754`, siehe Sektion "Switches: gruen + Haekchen"). */
.form-control:focus,
.form-control:focus-visible,
.form-select:focus,
.form-select:focus-visible,
.form-control-color:focus,
.input-group .form-control:focus,
.input-group .form-select:focus {
border-color: var(--spo-petrol) !important;
}
/* ================================================================
Publizieren-Log (#pub-log-area)
----------------------------------------------------------------
Die Ergebnis-Boxen (Plandatei, StruPPI, TVA, TVXML, TA2, Sky ...) bestehen aus
einer Kopfzeile plus einer .table-Auflistung, bei den XML-Exporten zusaetzlich
je Distributionsziel (Gracenote, Simply.tv, EPGplus ...) ein eigener Unterblock.
Bootstrap gibt .table-Zellen ein DECKENDES var(--bs-table-bg) (= weiss). In einer
eingefaerbten .alert-Box schneidet das die Tabellenzeilen als weisse Baender aus
dem Boxhintergrund heraus. Darum hier alle Table-BG-Variablen auf transparent --
die Faerbung der Bloecke uebernimmt ausschliesslich .pub-target (siehe unten). */
#pub-log-area .table {
--bs-table-bg: transparent;
--bs-table-bg-type: transparent;
--bs-table-bg-state: transparent;
--bs-table-accent-bg: transparent;
}
#pub-log-area .table > tbody > tr > td {
background-color: transparent;
padding: .15rem 0;
vertical-align: top;
}
/* Feste Label-Spalte, damit die Werte aller Boxen auf einer Kante stehen.
width auf einer table-auto-Zelle wirkt als MINDESTbreite -- ein laengeres Label
bricht die Ausrichtung also nicht, es schiebt beide Spalten gemeinsam nach rechts. */
#pub-log-area .table > tbody > tr > td:first-child {
width: 11rem;
white-space: nowrap;
}
/* --- Distributionsziele -------------------------------------------------
Jedes Ziel ist eine eigene Karte auf leicht aufgehelltem Grund: das fasst
Ueberschrift und zugehoerige Statuszeilen sichtbar zu einer Einheit zusammen
und trennt die Ziele voneinander, ohne eine zweite Alert-Farbe einzufuehren. */
#pub-log-area .pub-targets {
margin-top: .75rem;
display: flex;
flex-direction: column;
gap: .5rem;
}
#pub-log-area .pub-target {
background-color: rgba(255, 255, 255, .55);
border: 1px solid rgba(0, 0, 0, .08);
border-radius: .375rem;
padding: 0 .65rem .35rem;
overflow: hidden;
}
/* Kopfzeile der Karte: abgesetzter Streifen statt frei stehendem Text. Die
negativen Margins ziehen sie ueber das Padding der Karte auf volle Breite. */
#pub-log-area .pub-target-title {
font-weight: 600;
margin: 0 -.65rem .35rem;
padding: .3rem .65rem;
background-color: rgba(0, 0, 0, .04);
border-bottom: 1px solid rgba(0, 0, 0, .08);
}
/* Label-Spalte der Karten-Tabellen um das Karten-Padding verkuerzt, damit die
Statuswerte trotz Einrueckung exakt auf derselben Kante stehen wie die Werte
der aeusseren Tabelle (Sendungen:/Datei:). */
#pub-log-area .pub-target .table > tbody > tr > td:first-child {
width: calc(11rem - .65rem);
}
body.dark-mode #pub-log-area .pub-target {
background-color: rgba(255, 255, 255, .06);
border-color: rgba(255, 255, 255, .15);
}
body.dark-mode #pub-log-area .pub-target-title {
background-color: rgba(255, 255, 255, .08);
border-bottom-color: rgba(255, 255, 255, .15);
}
|