/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* ============================================================
 * NUOFLIX — Custom CSS (Rekonstruktion 20.5.2026)
 * ============================================================
 * Wiederherstellung des am 20.5.2026 verlorenen Custom-CSS aus
 * den Bricks-Settings-Feldern. Speicherort jetzt im Filesystem,
 * damit ein erneuter Verlust ausgeschlossen ist.
 * ============================================================ */

/* ----- Format-Index Grid (/sendungen/-Page) ---------------- */

.format-index-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.5rem;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

@media (max-width: 991px) {
    .format-index-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 767px) {
    .format-index-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
}

@media (max-width: 478px) {
    .format-index-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.format-index-kachel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 300 / 169;
    background-color: var(--card-dark, #111316);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid var(--border-mid, #2A2D35);
    border-radius: 0.5rem;
    padding: 1rem;
    box-sizing: border-box;
    text-decoration: none;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.format-index-kachel:hover,
.format-index-kachel:focus-visible {
    transform: translateY(-2px);
    border-color: var(--orange-primary, #E8641A);
    box-shadow: 0 8px 24px rgba(232, 100, 26, 0.18);
    outline: none;
}

/* Bei Logo-Kachel: Name visually-hidden (Screenreader bekommt ihn, optisch unsichtbar) */
.format-index-kachel:not(.format-index-kachel-noimg) .format-index-kachel-name {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Fallback ohne Logo: Name als zentrierter Text auf dunkler Kachel */
.format-index-kachel-noimg {
    background-color: var(--card-light, #1F2228);
}

.format-index-kachel-noimg .format-index-kachel-name {
    color: var(--text-body, #E8E6E1);
    font-family: var(--font-heading);
    font-weight: var(--fw-heading);
    font-style: italic;
    font-size: var(--text-m);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    text-align: center;
    hyphens: auto;
    word-wrap: break-word;
}

/* ----- Mediathek-Filter-Dropdowns ---------------------------- */

.mediathek-filter-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    background-color: var(--card-dark, #111316);
    color: var(--text-body, #E8E6E1);
    border: 1px solid var(--border-mid, #2A2D35);
    border-radius: 0.5rem;
    padding: 0.6rem 2.5rem 0.6rem 1rem;

    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--fw-regular);
    line-height: var(--leading-normal);
    min-width: 200px;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23E8641A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;

    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mediathek-filter-select:hover {
    border-color: var(--orange-primary, #E8641A);
}

.mediathek-filter-select:focus {
    outline: none;
    border-color: var(--orange-primary, #E8641A);
    box-shadow: 0 0 0 3px rgba(232, 100, 26, 0.2);
}

/* Aktiver Filter (Auswahl nicht leer) → orange Border zur Hervorhebung */
.mediathek-filter-select[data-empty="false"] {
    border-color: var(--orange-primary, #E8641A);
}

.mediathek-filter-select option {
    background-color: var(--card-dark, #111316);
    color: var(--text-body, #E8E6E1);
    padding: 0.5rem;
}


/* ----- Mediathek-Tabs (Alle / Sendungen / Kongresse / Filme) - */
/* HINWEIS: !important nötig, weil Bricks Per-Element-Inline-Styles
   mit ID-Selektor (Spezifität 100) setzt. Cleanup-Punkt für Phase 5:
   Per-Element-Styles im Bricks-Builder entfernen, dann fallen die
   !important hier weg. */

.tab-alle,
.tab-sendungen,
.tab-kongresse,
.tab-filme {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background-color: var(--card-dark, #111316) !important;
    color: var(--text-body, #E8E6E1) !important;
    border: 1px solid var(--border-mid, #2A2D35) !important;
    border-radius: 0.5rem !important;
    padding: 0.6rem 1.25rem !important;
	font-weight: var(--fw-semibold) !important;
    font-family: var(--font-body) !important;
    font-size: var(--text-xs) !important;
	text-transform: uppercase !important;
    letter-spacing: var(--tracking-caps) !important;

    text-decoration: none !important;
    line-height: var(--leading-normal) !important;

    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease !important;
}

.tab-alle:hover,
.tab-sendungen:hover,
.tab-kongresse:hover,
.tab-filme:hover,
.tab-alle:focus-visible,
.tab-sendungen:focus-visible,
.tab-kongresse:focus-visible,
.tab-filme:focus-visible {
    border-color: var(--orange-primary, #E8641A) !important;
    color: var(--orange-primary, #E8641A) !important;
    outline: none !important;
}

/* Aktiver Tab — orange Box, weißer Text für besseren Kontrast */
.tab-alle[aria-current="page"],
.tab-sendungen[aria-current="page"],
.tab-kongresse[aria-current="page"],
.tab-filme[aria-current="page"] {
    background-color: var(--orange-primary, #E8641A) !important;
    border-color: var(--orange-primary, #E8641A) !important;
    color: var(--warm-white, #F5F2ED) !important;
}

/* ----- Player Single-Video --------------------------------- */

/* Init-Span: nur für JS-Lookup, optisch ausgeblendet */
.player-init {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Slots standardmäßig ausgeblendet, nur aktiver sichtbar */
.player-slot {
    display: none !important;
}
.player-slot.is-active {
    display: block !important;
}

/* Player-Tab-Buttons — gleicher Stil wie Mediathek-Tabs */
.player-tab {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background-color: var(--card-dark, #111316) !important;
    color: var(--text-body, #E8E6E1) !important;
    border: 1px solid var(--border-mid, #2A2D35) !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem 1rem !important;

    font-family: var(--font-body) !important;
    font-size: var(--text-xs) !important;
    font-weight: var(--fw-semibold) !important;
    letter-spacing: var(--tracking-caps) !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    line-height: var(--leading-normal) !important;

    cursor: pointer !important;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease !important;
}

.player-tab:hover,
.player-tab:focus-visible {
    border-color: var(--orange-primary, #E8641A) !important;
    color: var(--orange-primary, #E8641A) !important;
    outline: none !important;
}

.player-tab.is-active {
    background-color: var(--orange-primary, #E8641A) !important;
    border-color: var(--orange-primary, #E8641A) !important;
    color: var(--warm-white, #F5F2ED) !important;
}

/* ----- Brevo-Newsletter-Form ------------------------------- */

.sib_signup_form {
    max-width: 600px;
}

.sib_signup_form .sib_signup_box_inside_2 {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* E-Mail-Input */
.sib_signup_form input.sib-email-area,
.sib_signup_form input[type="email"] {
    width: 100% !important;
    background-color: var(--card-dark, #111316) !important;
    color: var(--text-body, #E8E6E1) !important;
    border: 1px solid var(--border-mid, #2A2D35) !important;
    border-radius: 0.5rem !important;
    padding: 0.7rem 1rem !important;

    font-family: var(--font-body) !important;
    font-size: var(--text-s) !important;
    font-weight: var(--fw-regular) !important;
    line-height: var(--leading-normal) !important;

    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.sib_signup_form input.sib-email-area:focus,
.sib_signup_form input[type="email"]:focus {
    outline: none !important;
    border-color: var(--orange-primary, #E8641A) !important;
    box-shadow: 0 0 0 3px rgba(232, 100, 26, 0.2) !important;
}

.sib_signup_form input.sib-email-area::placeholder,
.sib_signup_form input[type="email"]::placeholder {
    color: var(--gray-mid, #A8A49C) !important;
    opacity: 1 !important;
}

/* ----- Master-Button-Stil .btn-primary --------------------- */
/* Verwendung: Klasse "btn-primary" auf Bricks-Buttons setzen.
   Greift automatisch auch beim Brevo-Newsletter-Submit-Button. */

.btn-primary,
.sib_signup_form input[type="submit"],
.sib_signup_form button[type="submit"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background-color: var(--orange-primary, #E8641A) !important;
    color: var(--warm-white, #F5F2ED) !important;
    border: 1px solid var(--orange-primary, #E8641A) !important;
    border-radius: 0.5rem !important;
    padding: 0.6rem 1.3rem !important;

    font-family: var(--font-body) !important;
    font-size: var(--text-xs) !important;
    font-weight: var(--fw-semibold) !important;
    letter-spacing: var(--tracking-caps) !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    line-height: var(--leading-normal) !important;

    cursor: pointer !important;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}

.btn-primary:hover,
.btn-primary:focus-visible,
.sib_signup_form input[type="submit"]:hover,
.sib_signup_form button[type="submit"]:hover,
.sib_signup_form input[type="submit"]:focus-visible,
.sib_signup_form button[type="submit"]:focus-visible {
    background-color: var(--orange-light, #FF8A47) !important;
    border-color: var(--orange-light, #FF8A47) !important;
    color: var(--warm-white, #F5F2ED) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(232, 100, 26, 0.25) !important;
    outline: none !important;
}

.sib_signup_form input[type="submit"]:hover,
.sib_signup_form button[type="submit"]:hover,
.sib_signup_form input[type="submit"]:focus-visible,
.sib_signup_form button[type="submit"]:focus-visible {
    background-color: var(--orange-light, #FF8A47) !important;
    border-color: var(--orange-light, #FF8A47) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(232, 100, 26, 0.25) !important;
    outline: none !important;
}