/* A&B-Tiefen-Design und dunkles Design.
   Diese Datei wird nur geladen, wenn das Theme "A&B Schulungen" aktiv ist
   (oder der Filter abtr_enable_ab_theme_design das erzwingt). Sie kommt nach
   assets/css/frontend.css und überschreibt die neutrale Basis über die
   Ladereihenfolge - deshalb reichen einklassige Selektoren, und das Theme kann
   mit ".site-main .abtr-..." weiterhin das letzte Wort haben. Keine
   Vorrangerklärung nötig, die Reihenfolge genügt. */

/* Tiefenstruktur der A&B-Familie: versetzte harte Ebene statt weichem Schatten. */
.abtr-calendar,
.abtr-training {
    --abtr-depth-outline: #1d2327;
    --abtr-depth-shadow: 7px 7px 0 rgba(29, 35, 39, 0.18);
    --abtr-depth-shadow-hover: 11px 11px 0 rgba(29, 35, 39, 0.18);
    --abtr-depth-lift: translate(-4px, -4px);
}

/* Monatskachel: Kontur, Kopfakzent und versetzte Ebene. */
.abtr-year__month {
    border: 2px solid var(--abtr-depth-outline);
    border-top: 5px solid #2271b1;
    box-shadow: var(--abtr-depth-shadow);
    transition:
        transform 160ms ease,
        box-shadow 160ms ease,
        border-color 160ms ease;
}

/* Tastaturbedienung hebt die Kachel genauso an wie die Maus - aber nur die
   Tastatur: nach einem Mausklick bliebe die Kachel sonst angehoben stehen. */
.abtr-year__month:focus-visible {
    box-shadow: var(--abtr-depth-shadow-hover);
    transform: var(--abtr-depth-lift);
}

@media (hover: hover) {
    .abtr-year__month:hover {
        box-shadow: var(--abtr-depth-shadow-hover);
        transform: var(--abtr-depth-lift);
    }
}

/* Verlinkte Schulungskarte: gleiche Tiefenebene wie die Monatskacheln. */
.abtr-event-card {
    border: 2px solid var(--abtr-depth-outline);
    border-top: 5px solid #2271b1;
    box-shadow: var(--abtr-depth-shadow);
    transition:
        transform 160ms ease,
        box-shadow 160ms ease,
        border-color 160ms ease;
}

.abtr-event-card:focus-within {
    border-color: #2271b1;
    box-shadow: var(--abtr-depth-shadow-hover);
    transform: var(--abtr-depth-lift);
}

/* Wo der Browser es kann, hebt sich die Karte nur bei Tastaturbedienung an.
   Nach einem Mausklick auf den Titel bliebe sie sonst angehoben stehen. */
@supports selector(:has(:focus-visible)) {
    .abtr-event-card:focus-within {
        border-color: var(--abtr-depth-outline);
        border-top-color: #2271b1;
        box-shadow: var(--abtr-depth-shadow);
        transform: none;
    }

    .abtr-event-card:has(:focus-visible) {
        border-color: #2271b1;
        box-shadow: var(--abtr-depth-shadow-hover);
        transform: var(--abtr-depth-lift);
    }
}

@media (hover: hover) {
    .abtr-event-card:hover {
        border-color: #2271b1;
        box-shadow: var(--abtr-depth-shadow-hover);
        transform: var(--abtr-depth-lift);
    }

    .abtr-event-card.is-unlinked:hover {
        border-color: var(--abtr-depth-outline);
        box-shadow: var(--abtr-depth-shadow);
        transform: none;
    }
}

/* Faktenbox: Tiefenebene ohne Anheben - sie ist Information, kein Ziel. */
.abtr-training__facts {
    border: 2px solid var(--abtr-depth-outline);
    border-top: 5px solid #2271b1;
    box-shadow: var(--abtr-depth-shadow);
}

/* Anmeldeformular-Karte: Tiefenebene, aber kein Anheben beim Ausfüllen. */
.abtr-registration {
    border: 2px solid var(--abtr-depth-outline);
    border-top: 5px solid #2271b1;
    box-shadow: var(--abtr-depth-shadow);
}

/* Teilnehmerblock: Tiefenebene ohne Anheben, damit die Eingabe ruhig bleibt. */
.abtr-participant {
    background: #f1f4f4;
    border: 2px solid var(--abtr-depth-outline);
    box-shadow: var(--abtr-depth-shadow);
}

/* Storno-Box: Tiefenebene ohne Anheben, der Warnton bleibt über die Fläche. */
.abtr-cancel-box {
    background: #fff7e6;
    border: 2px solid var(--abtr-depth-outline);
    border-left: 6px solid #7a4b00;
    box-shadow: var(--abtr-depth-shadow);
}

/* Schaltflächen greifen die versetzte Ebene in kleiner Form auf. */
.abtr-button,
.abtr-icon-button {
    border-radius: 4px;
    box-shadow: 3px 3px 0 rgba(29, 35, 39, 0.28);
    transition:
        transform 120ms ease,
        box-shadow 120ms ease,
        background-color 150ms ease,
        border-color 150ms ease,
        color 150ms ease;
}

.abtr-button:focus-visible,
.abtr-icon-button:focus-visible {
    box-shadow: 5px 5px 0 rgba(29, 35, 39, 0.24);
    transform: translate(-1px, -1px);
}

@media (hover: hover) {
    .abtr-button:hover,
    .abtr-icon-button:hover {
        box-shadow: 5px 5px 0 rgba(29, 35, 39, 0.24);
        transform: translate(-1px, -1px);
    }
}

/* Die Entfernen-Schaltfläche folgt derselben kleinen Ebene wie die übrigen. */
.abtr-participant__remove {
    border-radius: 4px;
    box-shadow: 3px 3px 0 rgba(29, 35, 39, 0.28);
    transition:
        transform 120ms ease,
        box-shadow 120ms ease,
        background-color 150ms ease,
        border-color 150ms ease,
        color 150ms ease;
}

.abtr-participant__remove:focus-visible {
    box-shadow: 5px 5px 0 rgba(29, 35, 39, 0.24);
    transform: translate(-1px, -1px);
}

@media (hover: hover) {
    .abtr-participant__remove:hover {
        box-shadow: 5px 5px 0 rgba(29, 35, 39, 0.24);
        transform: translate(-1px, -1px);
    }
}

/* Auf schmalen Displays fällt die Ebene flacher aus, damit sie nicht drückt. */
@media (max-width: 700px) {
    .abtr-calendar,
    .abtr-training {
        --abtr-depth-shadow: 5px 5px 0 rgba(29, 35, 39, 0.18);
        --abtr-depth-shadow-hover: 7px 7px 0 rgba(29, 35, 39, 0.18);
    }
}

/* Rückfallebene für Browser ohne :focus-visible: dort trägt :focus die Ebene. */
@supports not selector(:focus-visible) {
    .abtr-year__month:focus {
        box-shadow: var(--abtr-depth-shadow-hover);
        transform: var(--abtr-depth-lift);
    }
}

/* Nutzereinstellung "weniger Bewegung": keine Übergänge, kein Anheben. */
@media (prefers-reduced-motion: reduce) {
    .abtr-year__month,
    .abtr-year__month:hover,
    .abtr-year__month:focus-visible,
    .abtr-event-card,
    .abtr-event-card:hover,
    .abtr-event-card:focus-within,
    .abtr-button,
    .abtr-button:hover,
    .abtr-button:focus-visible,
    .abtr-icon-button,
    .abtr-icon-button:hover,
    .abtr-icon-button:focus-visible,
    .abtr-participant__remove,
    .abtr-participant__remove:hover,
    .abtr-participant__remove:focus-visible {
        transition: none;
        transform: none;
    }
}

/* Kontrastmodus: die Kontur trägt die Tiefe, nicht der Schatten. */
@media (forced-colors: active) {
    .abtr-year__month,
    .abtr-year__month:hover,
    .abtr-year__month:focus-visible,
    .abtr-event-card,
    .abtr-event-card:hover,
    .abtr-event-card:focus-within,
    .abtr-training__facts,
    .abtr-registration,
    .abtr-participant,
    .abtr-cancel-box,
    .abtr-button,
    .abtr-button:hover,
    .abtr-button:focus-visible,
    .abtr-icon-button,
    .abtr-icon-button:hover,
    .abtr-icon-button:focus-visible,
    .abtr-participant__remove,
    .abtr-participant__remove:hover,
    .abtr-participant__remove:focus-visible {
        box-shadow: none;
    }

    .abtr-year__month,
    .abtr-event-card,
    .abtr-training__facts,
    .abtr-registration,
    .abtr-participant,
    .abtr-cancel-box {
        border: 2px solid CanvasText;
    }

    .abtr-year__month:hover,
    .abtr-year__month:focus-visible,
    .abtr-event-card:hover,
    .abtr-event-card:focus-within {
        border-color: Highlight;
    }
}

/* Dunkles Design: das Plugin bringt eigene dunkle Flächen mit, abgestimmt auf
   das Theme. Alle Regeln bleiben einklassig, damit das Theme sie mit
   ".site-main .abtr-..." weiterhin zuverlässig überschreiben kann. */
@media (prefers-color-scheme: dark) {
    /*
     * Fokusrahmen auf dunklem Grund. #005fcc aus frontend.css misst hier je
     * nach Flaeche nur 2,2 bis 2,9:1 und verfehlt die von WCAG 1.4.11
     * geforderten 3:1. #7fb3ff erreicht 6,2 bis 9,3:1. Geaendert wird nur die
     * Farbe — Staerke und Abstand bleiben, wie sie sind.
     *
     * Gelesen wird zuerst das Theme-Token --ab-focus; nur wenn das Theme
     * keines setzt, greift der Rueckfall #7fb3ff. Damit wirkt die Korrektur
     * auch unter fremden dunklen Themes, und ein Theme der Familie kann sie
     * mit einer einzigen Deklaration steuern.
     *
     * Der Wert steht ausschliesslich hier: auf hellem Grund waere er mit
     * 2,14:1 gegen Weiss selbst ein Fehler, und diese Datei laedt nur bei
     * gesetzter Designweiche.
     */
    /* Neutrale Basis im WordPress-Standardlook: flache Flächen,
    1px-Rahmen,
    keine Tiefenebene und kein dunkles Design. Das A&B-eigene Tiefen-Design und der Dunkelmodus stehen in assets/css/ab-theme-design.css und werden nur bei aktivem Theme "A&B Schulungen" nachgeladen. */ /* Sichtbarer Fokusrahmen auf allen fokussierbaren Elementen (Familienstandard). Nur :focus-visible: so erscheint der Rahmen bei Tastaturbedienung,
    bleibt aber nach einem Mausklick oder einem per JavaScript gesetzten Fokus nicht stehen. Die :focus-Regeln als Rückfallebene stehen am Dateiende im @supports-Block. */ .abtr-calendar a:focus-visible,
    .abtr-calendar button:focus-visible,
    .abtr-calendar input:focus-visible,
    .abtr-calendar select:focus-visible,
    .abtr-calendar textarea:focus-visible,
    .abtr-calendar [tabindex]:focus-visible,
    .abtr-training a:focus-visible,
    .abtr-training button:focus-visible,
    .abtr-training input:focus-visible,
    .abtr-training select:focus-visible,
    .abtr-training textarea:focus-visible,
    .abtr-training [tabindex]:focus-visible,
    .abtr-button:focus-visible,
    .abtr-icon-button:focus-visible,
    .abtr-participant__remove:focus-visible,
    .abtr-calendar-search input[type="search"]:focus-visible,
    .abtr-form input:focus-visible,
    .abtr-form select:focus-visible,
    .abtr-form textarea:focus-visible,
    .abtr-calendar a:focus,
    .abtr-calendar button:focus,
    .abtr-calendar input:focus,
    .abtr-calendar select:focus,
    .abtr-calendar textarea:focus,
    .abtr-calendar [tabindex]:focus,
    .abtr-training a:focus,
    .abtr-training button:focus,
    .abtr-training input:focus,
    .abtr-training select:focus,
    .abtr-training textarea:focus,
    .abtr-training [tabindex]:focus,
    .abtr-button:focus,
    .abtr-icon-button:focus,
    .abtr-participant__remove:focus,
    .abtr-calendar-search input[type="search"]:focus,
    .abtr-form input:focus,
    .abtr-form select:focus,
    .abtr-form textarea:focus {
        outline-color: var(--ab-focus, #7fb3ff);
    }

    .abtr-calendar,
    .abtr-training {
        color: #dbe9eb;
        background: #0b1c21;
    }

    /* Auf dunklem Grund trägt eine hellere Kontur die Tiefe, nicht der Schatten. */
    .abtr-calendar,
    .abtr-training {
        --abtr-depth-outline: #274a52;
        --abtr-depth-shadow: 7px 7px 0 rgba(0, 0, 0, 0.55);
        --abtr-depth-shadow-hover: 11px 11px 0 rgba(0, 0, 0, 0.55);
    }

    .abtr-calendar-search {
        background: #16343b;
        border-color: #274a52;
    }

    /* Eingabefelder: hellere Feldkante (4,4:1 gegen die Fläche) statt #8c8f94. */
    .abtr-calendar-search input[type="search"],
    .abtr-calendar-search__filter select,
    .abtr-form input[type="text"],
    .abtr-form input[type="email"],
    .abtr-form textarea {
        color: #dbe9eb;
        background: #11282e;
        border-color: #6f8f97;
    }

    .abtr-calendar-search input[type="search"]:focus,
    .abtr-calendar-search input[type="search"]:focus-visible,
    .abtr-form input:focus,
    .abtr-form select:focus,
    .abtr-form textarea:focus,
    .abtr-form input:focus-visible,
    .abtr-form select:focus-visible,
    .abtr-form textarea:focus-visible {
        border-color: #72aee6;
    }

    .abtr-year__month {
        color: #dbe9eb;
        background: #11282e;
        border-top-color: #72aee6;
    }

    .abtr-year__month:focus-visible {
        color: #dbe9eb;
        background: #16343b;
        border-color: #72aee6;
    }

    .abtr-year__month-heading {
        border-bottom-color: #274a52;
    }

    .abtr-year__previews li {
        border-bottom-color: #274a52;
    }

    .abtr-year__previews time {
        color: #72aee6;
    }

    .abtr-year__count,
    .abtr-year__more,
    .abtr-year__empty {
        color: #a8c4c9;
    }

    .abtr-search-results {
        border-top-color: #274a52;
    }

    .abtr-calendar__grid {
        border-top-color: #274a52;
        border-left-color: #274a52;
    }

    .abtr-calendar__weekday {
        background: #16343b;
        border-right-color: #274a52;
        border-bottom-color: #274a52;
    }

    .abtr-calendar__week-number {
        color: #a8c4c9;
        background: #16343b;
        border-right-color: #274a52;
        border-bottom-color: #274a52;
    }

    .abtr-calendar__day {
        background: #11282e;
        border-right-color: #274a52;
        border-bottom-color: #274a52;
    }

    .abtr-calendar__day.is-outside {
        color: #a8c4c9;
        background: #16343b;
    }

    .abtr-calendar__day.is-today {
        box-shadow: inset 0 0 0 2px #72aee6;
    }

    .abtr-calendar__event {
        color: #72aee6;
        background: #16343b;
        border-left-color: #72aee6;
    }

    .abtr-calendar__event:hover,
    .abtr-calendar__event:focus {
        color: #dbe9eb;
        background: #274a52;
    }

    .abtr-calendar__event--unlinked,
    .abtr-calendar__event--unlinked:hover,
    .abtr-calendar__event--unlinked:focus {
        color: #dbe9eb;
        background: #16343b;
    }

    .abtr-calendar__event.is-past,
    .abtr-calendar__event.is-past:hover,
    .abtr-calendar__event.is-past:focus {
        color: #a8c4c9;
        background: #16343b;
        border-left-color: #6f8f97;
    }

    .abtr-event-card {
        background: #11282e;
        border-top-color: #72aee6;
    }

    .abtr-event-card.is-past {
        color: #a8c4c9;
        background: #16343b;
        border-color: #6f8f97;
    }

    .abtr-year__previews li.is-past,
    .abtr-year__previews li.is-past time {
        color: #a8c4c9;
    }

    .abtr-event-card time {
        color: #72aee6;
    }

    .abtr-public-event .abtr-event-category {
        color: #dbe9eb;
        border-color: #72aee6;
    }

    .abtr-public-event .abtr-event-contact {
        border-top-color: #274a52;
    }

    .abtr-public-event a:not(.abtr-button) {
        color: #72aee6;
    }

    .abtr-public-event a:not(.abtr-button):hover,
    .abtr-public-event a:not(.abtr-button):focus {
        color: #dbe9eb;
    }

    .abtr-training__facts,
    .abtr-registration {
        background: #11282e;
        border-top-color: #72aee6;
    }

    /*
     * Die Anmeldefläche liegt innerhalb der Schulungsansicht. Der zusätzliche
     * Selektor verhindert, dass spezifischere helle Section-/Form-Regeln des
     * Themes die dunkle Karte wieder auf Weiß setzen. Ein ausdrücklich im
     * Theme gewählter Hellmodus hat weiterhin Vorrang.
     */
    :root:not([data-ab-theme="hell"]) .abtr-training #anmeldung.abtr-registration {
        color: #dbe9eb;
        background: #11282e;
        border-color: #274a52;
        border-top-color: #72aee6;
    }

    .abtr-training__facts dt {
        color: #a8c4c9;
    }

    .abtr-form legend {
        border-bottom-color: #274a52;
    }

    .abtr-participant {
        background: #16343b;
    }

    /* Die Schaltflächenfläche #2271b1 trägt weiße Schrift mit 5,2:1 - sie bleibt. */
    .abtr-button--secondary {
        color: #72aee6;
        background: #11282e;
        border-color: #6f8f97;
    }

    .abtr-participant__remove {
        color: #ff9b9b;
        border-color: #ff9b9b;
    }

    .abtr-participant__remove:hover,
    .abtr-participant__remove:focus {
        color: #11282e;
        background: #ff9b9b;
    }

    .abtr-cancel-box {
        color: #f0c674;
        background: #33280f;
        border-left-color: #f0c674;
    }

    /* Statusfarben des Themes, damit Plugin und Theme zusammenpassen. */
    .abtr-notice,
    .abtr-confirmation-text {
        color: #dbe9eb;
        background: #16343b;
        border-color: #6f8f97;
    }

    .abtr-notice--success,
    .abtr-confirmation-text {
        color: #7ddba8;
        background: #12301f;
        border-color: #7ddba8;
    }

    .abtr-notice--waitlist,
    .abtr-notice--warning {
        color: #f0c674;
        background: #33280f;
        border-color: #f0c674;
    }

    .abtr-notice--error {
        color: #ff9b9b;
        background: #3a1a1a;
        border-color: #ff9b9b;
    }

    .abtr-notice--info {
        color: #dbe9eb;
        background: #16343b;
        border-color: #6f8f97;
    }
}

/* Im dunklen Design folgt der Mauszeiger denselben Flächen wie die Tastatur. */
@media (prefers-color-scheme: dark) and (hover: hover) {
    .abtr-year__month:hover {
        color: #dbe9eb;
        background: #16343b;
        border-color: #72aee6;
    }
}