/*
 * SPDX-FileCopyrightText: 2024 Bundesrepublik Deutschland, vertreten durch das BMI/ITZBund
 *
 * SPDX-License-Identifier: GPL-3.0-or-later
 */

/* ==========================================================================
   BMDS – Farbrollen
   Tokens kommen aus den Site Settings (Style Settings → Color):
     --bs-primary    #36349D  Kosmisches Blau
     --bs-secondary  #DB0045  Kirsche
     --bs-quaternary #4DFFB0  Minze
     --bs-bgcolor-4  #E3E6F2  Lavendelgrau
   Hier werden nur Rollen zugewiesen, keine Farbwerte definiert.
   ========================================================================== */

:root {
    --bmds-accent: var(--bs-primary);
    --bmds-surface: var(--bs-bgcolor-4);
    --bmds-line: rgba(0, 0, 0, .11);
    --bmds-line-strong: rgba(0, 0, 0, .2);
    --bmds-label: rgba(0, 0, 0, .58);
    --bmds-radius: 6px;
}

/* --- Ueberschriften -------------------------------------------------------- */

h1, h2 {
    color: var(--bmds-accent);
}

/* --- Textlinks: Blau statt Kirsche ----------------------------------------- */

main a:not(.button):not(.page-link),
.content a:not(.button):not(.page-link) {
    color: var(--bmds-accent);
}

main a:not(.button):not(.page-link):hover,
.content a:not(.button):not(.page-link):hover {
    color: var(--bmds-accent);
}

/* --- Seitenkopf: Lavendelgrau ---------------------------------------------- */

.header-wrapper-bg {
    background-color: var(--bmds-surface);
}

/* ==========================================================================
   sf_event_mgt – Veranstaltungen
   ========================================================================== */

/* --- Buttons --------------------------------------------------------------- */

a.button {
    display: inline-block;
    margin: 0 .5rem .5rem 0;
    padding: .6rem 1.35rem;
    border: 1px solid var(--bmds-accent);
    border-radius: var(--bmds-radius);
    background: var(--bmds-accent);
    color: #fff;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

a.button:hover,
a.button:focus-visible {
    background: transparent;
    color: var(--bmds-accent);
    text-decoration: none;
}

a.button.button-outline {
    background: transparent;
    color: var(--bmds-accent);
    font-weight: 500;
}

a.button.button-outline:hover,
a.button.button-outline:focus-visible {
    background: var(--bmds-accent);
    color: #fff;
}

/* Primaere Handlung: groesser, aber gleiche Farbe (Weiss auf Blau = 9.84:1, AAA).
   Kirsche waere nur 5.13:1 und damit kein AAA - daher nicht fuer Buttons. */
a.button.button-primary {
    padding: .8rem 2rem;
    font-size: 1.05rem;
}

/* --- Uebersicht: Karte pro Veranstaltung ----------------------------------- */

.event-list-item {
    margin: 0 0 1.75rem;
    padding: 1.75rem 2rem;
    border: 1px solid var(--bmds-line);
    border-left: 4px solid var(--bmds-accent);
    border-radius: var(--bmds-radius);
    background: #fff;
}

.event-list-item .event-title {
    margin: 0 0 1.1rem;
    font-size: 1.45rem;
    line-height: 1.25;
}

.event-list-item .event-title a {
    text-decoration: none;
}

.event-list-item .event-title a:hover {
    text-decoration: underline;
}

.event-list-row {
    display: grid;
    grid-template-columns: minmax(9rem, 13rem) 1fr;
    gap: .3rem 1.5rem;
    padding: .45rem 0;
    border-bottom: 1px solid var(--bmds-line);
}

.event-list-row--title {
    display: block;
    padding: 0;
    border-bottom: 0;
}

.event-list-row:last-of-type {
    border-bottom: 0;
}

.event-list-label {
    color: var(--bmds-label);
    font-weight: 600;
    font-size: .95rem;
}

.event-list-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.4rem;
}

.event-list-actions a.button {
    margin: 0;
}

/* --- Detailseite: Kopf ------------------------------------------------------ */

h1.event-title {
    margin: 0 0 .75rem;
    line-height: 1.15;
}

.event-teaser-lead {
    max-width: 60ch;
    margin: 0 0 1.75rem;
    font-size: 1.2rem;
    line-height: 1.6;
    color: rgba(0, 0, 0, .78);
}

.event-cta {
    margin: 0 0 2.5rem;
}

.event-cta a.button {
    margin: 0;
}

/* --- Detailseite: Eckdaten -------------------------------------------------- */

.event-detail-facts {
    margin: 0 0 2.5rem;
    padding: .5rem 1.75rem;
    border-radius: var(--bmds-radius);
    background: var(--bmds-surface);
}

.event-detail-row {
    display: grid;
    grid-template-columns: minmax(9rem, 14rem) 1fr;
    gap: .3rem 1.75rem;
    padding: .9rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.event-detail-row:last-child {
    border-bottom: 0;
}

.event-detail-label {
    color: var(--bmds-label);
    font-weight: 600;
    font-size: .95rem;
}

.event-detail-value {
    line-height: 1.55;
}

.event-detail-value ul {
    margin: 0;
    padding-left: 1.1rem;
}

/* --- Detailseite: Inhaltsbloecke -------------------------------------------- */

.event-detail-block {
    margin: 0 0 3rem;
    max-width: 75ch;
}

.event-detail-block > h2 {
    margin: 0 0 1rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--bmds-line-strong);
    font-size: 1.35rem;
}

.event-detail-block > *:last-child {
    margin-bottom: 0;
}

.event-detail-block.event-description {
    font-size: 1.05rem;
    line-height: 1.7;
}

.event-detail-block.event-image {
    max-width: 100%;
}

.event-detail-block.event-image img {
    display: block;
    width: 100%;
    max-width: 900px;
    height: auto;
    max-height: 480px;
    object-fit: cover;
    border-radius: var(--bmds-radius);
}

.event-program .table-responsive {
    overflow-x: auto;
}

.event-program table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}

.event-program th,
.event-program td {
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--bmds-line);
    text-align: left;
    vertical-align: top;
}

.event-program thead th {
    border-bottom: 2px solid var(--bmds-line-strong);
    font-weight: 700;
}

.event-files ul,
.event-related ul {
    margin: 0;
    padding-left: 1.2rem;
}

.event-files li,
.event-related li {
    margin-bottom: .4rem;
}

/* --- Detailseite: Kalender -------------------------------------------------- */

.event-calendar-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.event-calendar-buttons li {
    margin: 0;
}

.event-calendar-buttons a.button {
    margin: 0;
    padding: .5rem 1.1rem;
    font-size: .95rem;
}

/* --- Detailseite: Zurueck --------------------------------------------------- */

.event-back-link {
    margin: 3rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--bmds-line);
}

/* --- Anmeldeformular -------------------------------------------------------- */

form.registration fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.event-registration-row {
    margin-bottom: 1.35rem;
}

/* leere Zeilen (Honeypot etc.) nicht als Luecke rendern */
.event-registration-row:not(:has(label)):not(:has(input:not([type="hidden"]))) {
    margin: 0;
}

.event-registration-row > label {
    display: block;
    margin-bottom: .35rem;
    font-weight: 600;
}

.event-registration-row input[type="text"],
.event-registration-row input[type="email"],
.event-registration-row input[type="tel"],
.event-registration-row input[type="date"],
.event-registration-row input[type="number"],
.event-registration-row select,
.event-registration-row textarea {
    display: block;
    width: 100%;
    max-width: 34rem;
    padding: .6rem .8rem;
    border: 1px solid var(--bmds-line-strong);
    border-radius: var(--bmds-radius);
    background: #fff;
    font: inherit;
    color: inherit;
}

.event-registration-row textarea {
    min-height: 8rem;
    resize: vertical;
}

.event-registration-row input:focus-visible,
.event-registration-row select:focus-visible,
.event-registration-row textarea:focus-visible {
    outline: 2px solid var(--bmds-accent);
    outline-offset: 1px;
}

/* vendorseitiges <br> nach jedem Feld unschaedlich machen */
.event-registration-row br {
    display: none;
}

/* Radios / Checkboxen: inline, nicht als Spalte */
.event-registration-row label label,
.event-registration-row > label:has(input[type="radio"]),
.event-registration-row > label:has(input[type="checkbox"]) {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0 1.25rem .4rem 0;
    font-weight: 400;
}

.event-registration-row input[type="radio"],
.event-registration-row input[type="checkbox"] {
    width: auto;
    margin: 0;
}

/* Pflichtfeld-Marker: Blau statt Rot (Kirsche waere nur 5.13:1) */
.event-required {
    margin-left: .15rem;
    color: var(--bmds-accent);
    font-weight: 700;
}

/* Absenden */
form.registration .submit,
form.registration button[type="submit"],
form.registration input[type="submit"] {
    margin-top: 1rem;
    padding: .8rem 2rem;
    border: 1px solid var(--bmds-accent);
    border-radius: var(--bmds-radius);
    background: var(--bmds-accent);
    color: #fff;
    font: inherit;
    font-weight: 600;
    font-size: 1.05rem;
    cursor: pointer;
}

form.registration .submit:hover,
form.registration button[type="submit"]:hover,
form.registration input[type="submit"]:hover {
    background: transparent;
    color: var(--bmds-accent);
}

/* Fehler */
.field-errors,
.error {
    margin-top: .3rem;
    font-size: .9rem;
    font-weight: 600;
}

/* --- Meldungen -------------------------------------------------------------- */

.callout {
    margin: 1.5rem 0;
    padding: 1.15rem 1.4rem;
    border-left: 4px solid var(--bmds-accent);
    border-radius: var(--bmds-radius);
    background: var(--bmds-surface);
}

.callout-title {
    margin: 0 0 .35rem;
    font-weight: 700;
}

.callout-body {
    margin: 0;
}

/* --- Blaettern -------------------------------------------------------------- */

.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
}

.pagination .page-link {
    display: block;
    padding: .45rem .85rem;
    border: 1px solid var(--bmds-line-strong);
    border-radius: var(--bmds-radius);
    color: var(--bmds-accent);
    text-decoration: none;
}

.pagination .page-item.disabled .page-link {
    opacity: .4;
    pointer-events: none;
}

/* --- Mobil ------------------------------------------------------------------ */

@media (max-width: 700px) {
    .event-list-row,
    .event-detail-row {
        grid-template-columns: 1fr;
        gap: .1rem;
    }

    .event-list-item {
        padding: 1.25rem 1.4rem;
    }

    .event-detail-facts {
        padding: .5rem 1.25rem;
    }

    .event-list-actions a.button,
    .event-cta a.button {
        width: 100%;
        text-align: center;
    }
}

/* ==========================================================================
   Navigation & Textlinks: durchgaengig Kosmisches Blau
   Weiss/Blau = 9.84:1, Blau/Lavendelgrau = 7.90:1 -> beides AAA.
   Kirsche (5.13:1 auf Weiss, 4.12:1 auf Lavendelgrau) wird fuer Text
   und Bedienelemente bewusst nicht verwendet.
   ========================================================================== */

.metanav a,
.mainnav-children a,
.main-menu a,
.breadcrumb a {
    color: var(--bmds-accent);
}

.metanav a:hover,
.metanav a:focus-visible,
.mainnav-children a:hover,
.mainnav-children a:focus-visible,
.main-menu a:hover,
.main-menu a:focus-visible,
.breadcrumb a:hover,
.breadcrumb a:focus-visible {
    color: var(--bmds-accent);
    text-decoration: underline;
}

/* aktiver Menuepunkt */
.mainnav-children .active > a,
.mainnav-children a[aria-current],
.main-menu .active > a,
.main-menu a[aria-current] {
    color: var(--bmds-accent);
    text-decoration-thickness: 2px;
}

/* Textlinks im Inhaltsbereich */
main a:not(.button):not(.page-link),
.content a:not(.button):not(.page-link) {
    color: var(--bmds-accent);
}

main a:not(.button):not(.page-link):hover,
main a:not(.button):not(.page-link):focus-visible,
.content a:not(.button):not(.page-link):hover,
.content a:not(.button):not(.page-link):focus-visible {
    color: var(--bmds-accent);
    text-decoration: underline;
}

/* Fokus-Ring: GSB liefert hier einen defekten Wert
   (rgb(from var(--bs-secondary)r g b / 0.5%) - ungueltige Syntax),
   daher hier explizit gesetzt. */
:focus-visible {
    outline: 2px solid var(--bmds-accent);
    outline-offset: 2px;
}

/* --- Hauptnavigation: Blau statt Kirsche ------------------------------------
   GSB setzt in navigationPrimary.css:
     .mainnav-desktop .first-nav { color: var(--bs-secondary) }
   Kirsche auf Weiss = 5.13:1 (AA, kein AAA).
   Blau auf Weiss    = 9.84:1 (AAA).
   mandant.css laedt nach navigationPrimary.css -> gleiche Spezifitaet genuegt.
   -------------------------------------------------------------------------- */

.mainnav-desktop .first-nav {
    color: var(--bmds-accent);
}

.mainnav-desktop .first-nav[aria-expanded="true"],
.mainnav-desktop .first-nav.act,
.mainnav-desktop .first-nav:hover,
.mainnav-desktop .first-nav:focus,
.mainnav-desktop .first-nav:active {
    -webkit-text-decoration: underline 0.3125rem var(--bmds-accent);
    text-decoration: underline 0.3125rem var(--bmds-accent);
}

/* Mobiles Menue: Toggler-Beschriftung */
.navbar-toggler .txt {
    color: var(--bmds-accent);
}

/* ==========================================================================
   Abgeleitete Bootstrap-Tokens korrigieren
   GSB schreibt --bs-primary/--bs-secondary aus den Site Settings neu,
   aktualisiert aber NICHT die zugehoerigen *-rgb-Tokens. Diese stehen
   weiterhin auf den GSB-Defaults (192,0,60 = altes Rot).
   Folge: alles, was aus *-rgb abgeleitet wird - insbesondere
   --bs-focus-ring-color - bleibt rot.
   Hier werden die abgeleiteten Werte auf die BMDS-Palette gezogen.
   ========================================================================== */

:root {
    /* Kosmisches Blau #36349D */
    --bs-primary-rgb: 54, 52, 157;
    /* Kirsche #DB0045 */
    --bs-secondary-rgb: 219, 0, 69;
    /* Minze #4DFFB0 */
    --bs-quaternary-rgb: 77, 255, 176;

    /* Fokusring: Blau, deutlich sichtbar (WCAG 2.4.7 / BITV) */
    --bs-focus-ring-color: rgba(54, 52, 157, .35);
    --bs-focus-ring-width: .25rem;
    --bs-focus-ring-opacity: .35;

    /* Links */
    --bs-link-color: var(--bmds-accent);
    --bs-link-color-rgb: 54, 52, 157;
    --bs-link-hover-color: var(--bmds-accent);

    /* Rahmenfarbe (GSB: var(--bs-secondary) = Kirsche) */
    --bs-border-color: rgba(0, 0, 0, .15);
}

/* ==========================================================================
   Fokus-/Hover-Outline: Blau statt Kirsche
   GSB (screen.css) setzt fuer a/.btn/.nav-link bei hover/focus/active:
     outline: ... solid var(--bs-secondary) !important   (= Kirsche)
   Kirsche-Outline auf Weiss = 5.13:1. Blau = 9.84:1 (AAA).
   Gleiche Spezifitaet + !important, mandant.css laedt zuletzt -> gewinnt.
   Outline bleibt erhalten (WCAG 2.4.7 / BITV) - nur die Farbe aendert sich.
   ========================================================================== */

a:hover,
a:active,
a:focus,
.btn:hover,
.btn:focus,
.btn:active,
.nav-link:hover,
.nav-link:focus,
.nav-link:active {
    outline-color: var(--bmds-accent) !important;
}

/* Footer-Ueberschrift weiss */
footer h2#SocialFooter,
footer #SocialFooter {
    color: var(--bs-white) !important;
}