/* Gestaltung der A&B-Plugins im Design von wr-bw.de.
 *
 * Die Plugins bringen eine neutrale Grundstufe mit (WordPress-Blau und -Grau)
 * und wahlweise das Aussehen der A&B-Familie. Beides passt hier nicht; dieses
 * Theme legt darueber seine eigene Stufe.
 *
 * Alle Regeln haengen an `.wr-main`, dem Inhaltsbereich aller Vorlagen. Das
 * sind zwei Klassen gegen die eine der Plugins — damit gewinnt das Theme
 * unabhaengig von der Ladereihenfolge und ohne !important.
 *
 * Teuer gelernt (siehe Uebergabe, Abschnitt 3.2): Wer den Ruhezustand einer
 * Plugin-Klasse ueberschreibt, muss auch ihre Zustaende mitfuehren. Sonst
 * bleibt der blaue Hover der Grundstufe stehen. Darum steht zu jeder
 * uebernommenen Flaeche auch :hover, :focus und :focus-within.
 */

.wr-main {
 --wrs-linie: #000;
 --wrs-feld: #f5f5f5;
 --wrs-feld-rand: #d8d8d8;
 --wrs-feld-rand-hover: #888;
 --wrs-knopf-hover: #545454;
}

/* --- Schaltflaechen ------------------------------------------------------ */
/* Schwarze Pille wie auf wr-bw.de; Schriftgroesse erbt die Leiter des Themes. */
.wr-main .abtr-button,
.wr-main .abbc-button,
.wr-main .stm-button,
.wr-main .stm-download-button,
.wr-main .abcf-submit,
.wr-main .abtr-icon-button {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 min-height: 44px;
 padding: 8px 12px;
 font: inherit;
 color: #fff;
 background: #000;
 border: 2px solid #000;
 border-radius: 100px;
 text-decoration: none;
 cursor: pointer;
 transition: background-color 150ms cubic-bezier(.4,0,1,1), border-color 150ms cubic-bezier(.4,0,1,1);
}
.wr-main .abtr-button:hover,
.wr-main .abbc-button:hover,
.wr-main .stm-button:hover,
.wr-main .stm-download-button:hover,
.wr-main .abcf-submit:hover,
.wr-main .abtr-icon-button:hover,
.wr-main .abtr-button:focus,
.wr-main .abbc-button:focus,
.wr-main .stm-button:focus,
.wr-main .stm-download-button:focus,
.wr-main .abcf-submit:focus,
.wr-main .abtr-icon-button:focus {
 color: #fff;
 background: var(--wrs-knopf-hover);
 border-color: #000;
}
.wr-main .abtr-button:active,
.wr-main .abbc-button:active,
.wr-main .stm-button:active,
.wr-main .stm-download-button:active,
.wr-main .abcf-submit:active {
 background: var(--wrs-knopf-hover);
 border-color: #000;
}
/* Zweitrangige Schaltflaechen: weiss mit schwarzem Rand. */
.wr-main .abtr-button--secondary,
.wr-main .abbc-button--secondary,
.wr-main .stm-button--secondary {
 color: #000;
 background: #fff;
 border-color: #000;
}
.wr-main .abtr-button--secondary:hover,
.wr-main .abbc-button--secondary:hover,
.wr-main .stm-button--secondary:hover,
.wr-main .abtr-button--secondary:focus,
.wr-main .abbc-button--secondary:focus,
.wr-main .stm-button--secondary:focus {
 color: #000;
 background: var(--wrs-feld);
 border-color: #000;
}
/* Gefaehrliche Aktionen bleiben erkennbar, aber in der Formensprache des Themes. */
.wr-main .abbc-button--danger {
 color: #fff;
 background: #000;
 border-color: #000;
 text-decoration: underline;
 text-underline-offset: .2em;
}
.wr-main .abbc-button--danger:hover,
.wr-main .abbc-button--danger:focus {
 background: var(--wrs-knopf-hover);
}
.wr-main .abtr-button[disabled],
.wr-main .abbc-button[disabled],
.wr-main .stm-button[disabled],
.wr-main .abcf-submit[disabled] {
 color: #fff;
 background: var(--wrs-feld-rand-hover);
 border-color: var(--wrs-feld-rand-hover);
 cursor: default;
}

/* --- Karten -------------------------------------------------------------- */
/* Wie die Kacheln des Themes: weiss, zwei Punkt Rand, 24 Radius. Die Vorlage
   veraendert Kacheln beim Ueberfahren nicht — deshalb hier ausdruecklich
   derselbe Zustand, sonst bliebe der blaue Rand der Grundstufe. */
.wr-main .abtr-event-card,
.wr-main .abtr-training,
.wr-main .abtr-public-event,
.wr-main .abtr-registration,
.wr-main .abbc-account-card,
.wr-main .abbc-backpack-card,
.wr-main .abbc-issuer-card,
.wr-main .abbc-training-section,
.wr-main .stm-material-card,
.wr-main .stm-account-card,
.wr-main .abcf-contact-form {
 background: #fff;
 border: 2px solid var(--wrs-linie);
 border-radius: 24px;
 padding: 32px;
 box-shadow: none;
 transform: none;
}
.wr-main .abtr-event-card:hover,
.wr-main .abtr-training:hover,
.wr-main .abbc-account-card:hover,
.wr-main .abbc-backpack-card:hover,
.wr-main .abbc-issuer-card:hover,
.wr-main .stm-material-card:hover,
.wr-main .stm-account-card:hover,
.wr-main .abcf-contact-form:hover,
.wr-main .abtr-event-card:focus-within,
.wr-main .abtr-training:focus-within,
.wr-main .abbc-account-card:focus-within,
.wr-main .abbc-backpack-card:focus-within,
.wr-main .abbc-issuer-card:focus-within,
.wr-main .stm-material-card:focus-within,
.wr-main .stm-account-card:focus-within,
.wr-main .abcf-contact-form:focus-within {
 border-color: var(--wrs-linie);
 box-shadow: none;
 transform: none;
}
@media (max-width: 1024px) {
 .wr-main .abtr-event-card,
 .wr-main .abtr-training,
 .wr-main .abbc-account-card,
 .wr-main .abbc-backpack-card,
 .wr-main .abbc-issuer-card,
 .wr-main .stm-material-card,
 .wr-main .stm-account-card,
 .wr-main .abcf-contact-form { padding: 24px; }
}

/* --- Hinweise ------------------------------------------------------------ */
/* Der gelbe Rahmen des Themes (.wr-notice). Die Vorlage kennt keine eigenen
   Meldungsfarben; der Zustand steht im Text der Plugins. */
.wr-main .abtr-notice,
.wr-main .abbc-notice,
.wr-main .abcf-notice,
.wr-main .stm-account-notice,
.wr-main .abtr-cancel-box {
 color: #000;
 background: #fff;
 border: 3px solid var(--wr-yellow);
 border-left-width: 3px;
 border-radius: 0;
 padding: 28px;
}
.wr-main .abtr-notice--error,
.wr-main .abbc-notice--error,
.wr-main .abcf-notice-error,
.wr-main .stm-account-notice-error {
 border-color: #000;
}
.wr-main .abtr-notice--success,
.wr-main .abbc-notice--success,
.wr-main .abcf-notice-success,
.wr-main .stm-account-notice-success {
 background: var(--wr-grey);
}

/* --- Formularfelder ------------------------------------------------------ */
/* Dieselbe Stufung wie die Formulare der Vorlage: Ruhe grau, Ueberfahren weiss
   mit mittlerem Rand, Fokus weiss mit schwarzem Rand. */
.wr-main .abtr-form input:not([type=checkbox]):not([type=radio]):not([type=submit]),
.wr-main .abtr-form select,
.wr-main .abtr-form textarea,
.wr-main .abtr-calendar-search input,
.wr-main .abtr-calendar-search select,
.wr-main .stm-material-filters input,
.wr-main .stm-material-filters select,
.wr-main .abcf-contact-form input:not([type=checkbox]):not([type=radio]):not([type=submit]),
.wr-main .abcf-contact-form select,
.wr-main .abcf-contact-form textarea {
 padding: 12px;
 font: inherit;
 color: #000;
 background: var(--wrs-feld);
 border: 2px solid var(--wrs-feld-rand);
 border-radius: 0;
}
.wr-main .abtr-form input:not([type=checkbox]):not([type=radio]):not([type=submit]):hover,
.wr-main .abtr-form select:hover,
.wr-main .abtr-form textarea:hover,
.wr-main .abtr-calendar-search input:hover,
.wr-main .abtr-calendar-search select:hover,
.wr-main .stm-material-filters input:hover,
.wr-main .stm-material-filters select:hover,
.wr-main .abcf-contact-form input:not([type=checkbox]):not([type=radio]):not([type=submit]):hover,
.wr-main .abcf-contact-form select:hover,
.wr-main .abcf-contact-form textarea:hover {
 background: #fff;
 border-color: var(--wrs-feld-rand-hover);
}
.wr-main .abtr-form input:not([type=checkbox]):not([type=radio]):not([type=submit]):focus,
.wr-main .abtr-form select:focus,
.wr-main .abtr-form textarea:focus,
.wr-main .abtr-calendar-search input:focus,
.wr-main .abtr-calendar-search select:focus,
.wr-main .stm-material-filters input:focus,
.wr-main .stm-material-filters select:focus,
.wr-main .abcf-contact-form input:not([type=checkbox]):not([type=radio]):not([type=submit]):focus,
.wr-main .abcf-contact-form select:focus,
.wr-main .abcf-contact-form textarea:focus {
 background: #fff;
 border-color: #000;
}

/* --- Kalender und Listen ------------------------------------------------- */
.wr-main .abtr-calendar__grid,
.wr-main .abtr-calendar__day {
 border-color: var(--wrs-feld-rand);
}
.wr-main .abtr-calendar__event {
 background: var(--wr-yellow);
 color: #000;
 border-radius: 100px;
 padding: 4px 12px;
}
.wr-main .abtr-calendar__event:hover,
.wr-main .abtr-calendar__event:focus {
 background: #000;
 color: #fff;
}
.wr-main .stm-new-badge,
.wr-main .abbc-state-valid {
 background: var(--wr-yellow);
 color: #000;
 border-radius: 100px;
 padding: 2px 12px;
}

/* --- Vorlese-Knopf des Plugins ------------------------------------------- */
/* Sieht aus wie der Knopf der Vorlage: schwarze Pille mit Lautsprecher.
   Bis 1.5 stand hier nur [data-ab-read-button]. Das setzt das Skript des
   Plugins an Knoepfe, die es selbst erzeugt; der Knopf, den das Plugin vor den
   Inhalt setzt, traegt nur class="ab-read-aloud-button" und blieb blau. */
.wr-main :is([data-ab-read-button], .ab-read-aloud-button) {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 8px 12px;
 font: inherit;
 color: #fff;
 background: #000;
 border: 2px solid #000;
 border-radius: 100px;
 cursor: pointer;
}
.wr-main :is([data-ab-read-button], .ab-read-aloud-button):hover,
.wr-main :is([data-ab-read-button], .ab-read-aloud-button):focus {
 background: var(--wrs-knopf-hover);
}
.wr-main :is([data-ab-read-button], .ab-read-aloud-button)[aria-pressed="true"] {
 color: #000;
 background: #fff;
 border-color: #000;
}

/* --- Kein Blau aus den Grundstufen der Plugins --------------------------- */
/* Gemessen am 29.09.2026: Nach allen Regeln oben blieb das Blau der
   WordPress-Grundstufe (#2271b1, #135e96, #005fcc) noch an diesen Stellen
   stehen. Jede Zeile nennt, woher es kam. */

/* Kontrollkaestchen und Auswahlpunkte: ohne accent-color zeichnet der Browser
   sein eigenes Blau. */
.wr-main {
 accent-color: #000;
}

/* Fokus wie im ganzen Theme. Alle sechs Plugins setzen `outline: 3px solid
   #005fcc` mit 2 px Abstand; zusammen mit dem gelben Ring des Themes stand
   gelb-blau-gelb um jedes Bedienelement. */
.wr-main :is(.abtr-calendar, .abtr-training, .abtr-form, .abtr-calendar-search, .abtr-year, .abbc-account, .abbc-backpack, .abbc-verify, .abbc-issuer, .abbc-training-page, .abbc-badges-overview, .abbc-learning-paths-overview, .abbc-learning-path, .abbc-criteria, .stm-materials, .stm-account, .abcf-contact-form-wrap) :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.wr-main :is(.abtr-button, .abtr-icon-button, .abtr-participant__remove, .abtr-year__month, .abbc-button, .stm-button, .stm-download-button, .abcf-submit, [data-ab-read-button], .ab-read-aloud-button):focus-visible {
 outline: 3px solid #000;
 outline-offset: 5px;
 box-shadow: 0 0 0 7px var(--wr-yellow, #ffd80e);
}
/* Formularfelder: der Rand wie beim Ueberfahren; die Grundstufe setzt ihn bei
   :focus-visible eigens blau. */
.wr-main .abtr-calendar-search input:focus-visible,
.wr-main .abtr-form :is(input, select, textarea):focus-visible,
.wr-main .abcf-contact-form :is(input, select, textarea):focus-visible,
.wr-main .stm-material-filters :is(input, select):focus-visible {
 border-color: #000;
}

/* Jahresuebersicht: die Monate sind Karten wie die Kacheln des Themes.
   Grundstufe: Ueberfahren und Fokus blau hinterlegt (#f0f6fc, Rand #2271b1). */
.wr-main .abtr-year__month {
 color: #000;
 background: #fff;
 border: 2px solid var(--wrs-feld-rand);
 border-radius: 24px;
 text-decoration: none;
}
.wr-main .abtr-year__month:hover,
.wr-main .abtr-year__month:focus,
.wr-main .abtr-year__month:focus-visible {
 color: #000;
 background: var(--wrs-feld);
 border-color: var(--wrs-linie);
}
.wr-main .abtr-year__month-heading,
.wr-main .abtr-year__previews li {
 border-bottom-color: var(--wrs-feld-rand);
}
.wr-main .abtr-year__previews time {
 color: #000;
}

/* Monatskalender: heute schwarz umrandet statt blau; der Termin ist die gelbe
   Pille oben, ohne den blauen Randstreifen der Grundstufe. */
.wr-main .abtr-calendar__day.is-today {
 box-shadow: inset 0 0 0 3px #000;
}
.wr-main .abtr-calendar__event {
 border: 0;
}

/* Terminkarten und Kategorien. */
.wr-main .abtr-event-card time,
.wr-main .abtr-event-card:hover h3 a,
.wr-main .abtr-event-card:focus-within h3 a {
 color: #000;
}
.wr-main .abtr-event-card--appointment {
 border-left-color: var(--wrs-linie);
}
.wr-main .abtr-event-category {
 border: 2px solid #000;
 border-radius: 100px;
 padding: 2px 12px;
}

/* Materialien: der Hauptknopf steht an drei Stellen ohne `stm-button`. */
.wr-main .stm-button-primary {
 color: #fff;
 background: #000;
 border: 2px solid #000;
 border-radius: 100px;
}
.wr-main .stm-button-primary:hover,
.wr-main .stm-button-primary:focus,
.wr-main .stm-button-primary:active {
 color: #fff;
 background: var(--wrs-knopf-hover);
 border-color: #000;
}

/* Badge-Vergabe. */
.wr-main .abbc-training-count {
 color: #fff;
 background: #000;
}
.wr-main .abbc-training-fact,
.wr-main .abbc-state-unknown {
 background: var(--wrs-feld);
}
.wr-main .abbc-verify-actions a.abbc-verify-linkedin {
 color: #fff;
 background: #000;
 border-color: #000;
}
.wr-main .abbc-verify-actions a.abbc-verify-linkedin:hover,
.wr-main .abbc-verify-actions a.abbc-verify-linkedin:focus {
 color: #fff;
 background: var(--wrs-knopf-hover);
 border-color: #000;
}

/* Verweise im Text: schwarz wie im Theme, auch beim Ueberfahren. */
.wr-main :is(.abbc-learning-path, .abbc-criteria, .abcf-consent) a,
.wr-main :is(.abbc-learning-path, .abbc-criteria, .abcf-consent) a:hover {
 color: #000;
}

/* --- A&B Compliance: Einwilligung und Cookie-Einstellungen --------------- */
/* Banner und Einstellungsfenster haengen am Seitenende, ausserhalb von
   .wr-main; deshalb hier mit `body` statt `.wr-main`. Das Plugin fuehrt seine
   Farben ueber Variablen, sie bekommen die Werte des Themes: Schwarz statt
   Blau, #545454 beim Ueberfahren, der Fokus des Themes statt #005fcc. */
body .euwb-legal-document,
body .euwb-cookie-page,
body .euwb-legal-links,
body .euwb-button,
body .euwb-consent,
body .euwb-consent-modal {
 --euwb-accent: #000;
 --euwb-accent-hover: #545454;
 --euwb-on-accent: #fff;
 --euwb-focus: #000;
 --euwb-border-muted: #d8d8d8;
 accent-color: #000;
}
body .euwb-consent,
body .euwb-consent-modal {
 color: #000;
}
body .euwb-consent-modal__panel {
 border: 0;
 border-radius: 24px;
}
body .euwb-consent-category {
 border: 2px solid #d8d8d8;
 border-radius: 24px;
}

/* Schaltflaechen: schwarze Pille wie im Theme, die zweitrangigen weiss. */
body .euwb-button,
body .euwb-consent__actions button {
 padding: 8px 12px;
 border: 2px solid #000;
 border-radius: 100px;
 font-weight: inherit;
 transition: background-color 150ms cubic-bezier(.4,0,1,1), border-color 150ms cubic-bezier(.4,0,1,1);
}
body .euwb-consent__actions button[data-euwb-consent="necessary"],
body .euwb-consent__actions button[data-euwb-open-settings] {
 color: #000;
 background: #fff;
 border-color: #000;
}
body .euwb-button:hover,
body .euwb-button:focus,
body .euwb-consent__actions button:hover,
body .euwb-consent__actions button:focus {
 color: #fff;
 background: #545454;
 border-color: #000;
}
body .euwb-consent__actions button[data-euwb-consent="necessary"]:hover,
body .euwb-consent__actions button[data-euwb-consent="necessary"]:focus,
body .euwb-consent__actions button[data-euwb-open-settings]:hover,
body .euwb-consent__actions button[data-euwb-open-settings]:focus {
 color: #000;
 background: #f5f5f5;
 border-color: #000;
}

/* Schliessen: schwarzer Kreis mit weissem Kreuz, wie die Knoepfe des Themes. */
body .euwb-consent-modal__close {
 display: grid;
 place-items: center;
 top: 1rem;
 right: 1rem;
 color: #fff;
 background: #000;
 border: 2px solid #000;
 border-radius: 100px;
 font-size: 1.5rem;
 transition: background-color 150ms cubic-bezier(.4,0,1,1);
}
body .euwb-consent-modal__close:hover,
body .euwb-consent-modal__close:focus {
 background: #545454;
}
/* Die Ueberschrift laeuft sonst unter den Knopf: 1 rem Abstand + 44 px Knopf,
   abzueglich des Innenabstands des Fensters. */
body .euwb-consent-modal h2 {
 padding-right: 48px;
}

/* Fokus wie ueberall im Theme: schwarzer Rahmen, gelber Ring. Das Plugin
   setzt nur den Rahmen (#005fcc, 2 px Abstand); zusammen mit dem gelben Ring
   des Themes stand dann gelb-blau-gelb um jedes Bedienelement. */
body :is(.euwb-consent, .euwb-consent-modal, .euwb-cookie-page, .euwb-legal-links) :is(a, button, input, select, textarea, [tabindex]):focus-visible,
body .euwb-button:focus-visible {
 outline: 3px solid #000;
 outline-offset: 5px;
 box-shadow: 0 0 0 7px var(--wr-yellow, #ffd80e);
}