/*
 * BSS Campus – Custom Styles
 * Kadence Theme + LearnDash Override
 * Farbschema: CI-Rot #e42313 | Schwarz #1a1a1a | Weiss #ffffff
 *
 * SCHRIFT: @font-face-Block unten auskommentiert.
 * Woff2-Dateien in /wp-content/uploads/fonts/ ablegen und
 * den Block einkommentieren + Dateinamen anpassen.
 */


/* ============================================================
   SCHRIFT (selbst gehostet, DSGVO-konform)
   Fonts herunterladen: https://gwfh.madebymike.de/
   Suchbegriffe: "Rubik" und "Overpass"
   Dateien umbenennen wie unten angegeben und ablegen in:
   /wp-content/uploads/fonts/
   ============================================================ */

/* Rubik – Headlines */
@font-face {
    font-family: 'Rubik';
    src: url('/wp-content/uploads/fonts/rubik-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Rubik';
    src: url('/wp-content/uploads/fonts/rubik-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Overpass – Fließtext */
@font-face {
    font-family: 'Overpass';
    src: url('/wp-content/uploads/fonts/overpass-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Overpass';
    src: url('/wp-content/uploads/fonts/overpass-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Overpass';
    src: url('/wp-content/uploads/fonts/overpass-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* ============================================================
   KADENCE GLOBALE FARB-VARIABLEN
   ============================================================ */

:root {
    --global-palette1: #e42313 !important;   /* CI-Rot (Logo) – Primärfarbe (schlägt Kadence-Inline-Palette #ee3127) */
    --global-palette2: #b51c0f !important;   /* Dunkles CI-Rot – Hover */
    --global-palette3: #1a1a1a;   /* Schwarz – Überschriften */
    --global-palette4: #2d2d2d;   /* Dunkelgrau – Text */
    --global-palette5: #555555;   /* Mittelgrau – Subtext */
    --global-palette6: #888888;   /* Hellgrau – Metainfo */
    --global-palette7: #f0f0f0;   /* Hellgrau – Hintergründe */
    --global-palette8: #f9f9f9;   /* Fast-Weiss */
    --global-palette9: #ffffff;   /* Weiss */

    --bss-red:        #e42313;    /* CI-Rot (finales BSS-Campus-Logo) */
    --bss-red-dark:   #b51c0f;    /* Dunkles CI-Rot – Focus/Links */
    --bss-black:      #1a1a1a;
    --bss-white:      #ffffff;
    --bss-radius:     9999px;     /* Pill-Buttons wie auf steiger-stiftung.de */
    --bss-transition: 0.2s ease;

    /* Button-System – Sonderfarben (tokenisiert, zentral änderbar) */
    --bss-whatsapp:   #25d366;    /* Ausnahme: WhatsApp-Teilen */
    --bss-accent:     #1b6e7d;    /* optionale Sekundärfarbe (Teal), vorerst ungenutzt */
    --bss-success:    #28a745;    /* Erfolgsfarbe (abgeschlossen) – wie Zertifikat/Quiz-Review */
    --bss-success-bg: rgba(40, 167, 69, 0.07); /* leichter Erfolgs-Schimmer */
}


/* ============================================================
   BASISSCHRIFT
   ============================================================ */

body,
.site {
    font-family: 'Overpass', system-ui, -apple-system, sans-serif;
    color: var(--bss-black);
    background: var(--bss-white);
}

/* Standard-HTML-Headings */
h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title {
    font-family: 'Rubik', system-ui, sans-serif;
    color: var(--bss-black);
    font-weight: 700;
}

/*
 * Kadence Advanced Headings:
 * Jeder Block bekommt eine einzigartige Klasse (z.B. kt-adv-heading1015_0deb6b-83)
 * mit Spezifitaet (0,2,0) und explizitem font-weight: normal.
 * Der Attributselektor trifft alle auf einmal – !important nur hier, nirgendwo sonst.
 * font-size und line-height werden NICHT angefasst (bleiben per Block steuerbar).
 */
.wp-block-kadence-advancedheading[class*="kt-adv-heading"] {
    font-family: 'Rubik', system-ui, sans-serif !important;
    font-weight: 700 !important;
    color: var(--bss-black) !important;
}

a {
    color: var(--bss-red);
    text-decoration: none;
}
a:hover {
    color: var(--bss-red-dark);
    text-decoration: underline;
}


/* ============================================================
   BUTTONS – KADENCE + GUTENBERG
   Rot  → Hover: Weiss mit rotem Rahmen
   Weiss → Hover: Rot mit weissem Text
   ============================================================ */

/* Primär-Button (rot) */
.wp-block-button__link,
.kb-button,
.kadence-button,
button.kb-button,
.wp-element-button {
    display: inline-block !important;
    text-box: trim-both cap alphabetic !important;
    background-color: var(--bss-red) !important;
    color: var(--bss-white) !important;
    border: 2px solid var(--bss-red) !important;
    border-radius: var(--bss-radius) !important;
    font-weight: 700 !important;
    transition: background-color var(--bss-transition),
                color var(--bss-transition) !important;
}

.wp-block-button__link:hover,
.kb-button:hover,
.kadence-button:hover,
.wp-element-button:hover {
    background-color: var(--bss-white) !important;
    color: var(--bss-red) !important;
    border-color: var(--bss-red) !important;
    text-decoration: none !important;
}

/* Outline-Button (weiss/transparent) */
.wp-block-button.is-style-outline .wp-block-button__link,
.kb-button.kb-btn-outline,
.kadence-button.kb-btn-outline {
    display: inline-block !important;
    text-box: trim-both cap alphabetic !important;
    background-color: var(--bss-white) !important;
    color: var(--bss-red) !important;
    border: 2px solid var(--bss-red) !important;
    border-radius: var(--bss-radius) !important;
    font-weight: 700 !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.kb-button.kb-btn-outline:hover,
.kadence-button.kb-btn-outline:hover {
    background-color: var(--bss-red) !important;
    color: var(--bss-white) !important;
}

/* Kadence Header-CTA (#main-header .header-button) nutzt var(--global-palette1);
   explizit auf CI-Rot + Invert-Hover, falls die Theme-Inline-Palette gewinnt */
#main-header .header-button {
    background: var(--bss-red) !important;
    color: var(--bss-white) !important;
    border-color: var(--bss-red) !important;
}
#main-header .header-button:hover,
#main-header .header-button:focus {
    background: var(--bss-white) !important;
    color: var(--bss-red) !important;
    border-color: var(--bss-red) !important;
}


/* ============================================================
   BSS BUTTON-KOMPONENTE
   Eine Klasse für alle eigenen CTAs (Plugin-Shortcodes); Tokens steuern
   Farbe/Form. Hover = invertieren. Pfeile NUR per Modifier, nie im Label.
   Varianten: --primary (CI-rote Pille) · --ghost (roter Rahmen, sekundär)
              --whatsapp (Ausnahme) · --accent (optional)
   Modifier:  --arrow / --back · --sm · --block
   ============================================================ */

.bss-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4em;
    white-space: nowrap;
    padding: 10px 24px;
    border: 2px solid transparent;
    border-radius: var(--bss-radius);
    font-family: inherit;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--bss-transition),
                color var(--bss-transition),
                border-color var(--bss-transition);
}
.bss-btn:hover { text-decoration: none; }

/* Primär – CI-rote Pille */
.bss-btn--primary {
    background-color: var(--bss-red);
    color: var(--bss-white);
    border-color: var(--bss-red);
}
.bss-btn--primary:hover {
    background-color: var(--bss-white);
    color: var(--bss-red);
    border-color: var(--bss-red);
}

/* Sekundär – Ghost (roter Rahmen, weißer Hintergrund) */
.bss-btn--ghost {
    background-color: var(--bss-white);
    color: var(--bss-red);
    border-color: var(--bss-red);
}
.bss-btn--ghost:hover {
    background-color: var(--bss-red);
    color: var(--bss-white);
    border-color: var(--bss-red);
}

/* Ausnahme – WhatsApp-Teilen */
.bss-btn--whatsapp {
    background-color: var(--bss-whatsapp);
    color: var(--bss-white);
    border-color: var(--bss-whatsapp);
}
.bss-btn--whatsapp:hover {
    background-color: var(--bss-white);
    color: var(--bss-whatsapp);
    border-color: var(--bss-whatsapp);
}

/* Optionale Sekundärfarbe (vorerst ungenutzt) */
.bss-btn--accent {
    background-color: var(--bss-accent);
    color: var(--bss-white);
    border-color: var(--bss-accent);
}
.bss-btn--accent:hover {
    background-color: var(--bss-white);
    color: var(--bss-accent);
    border-color: var(--bss-accent);
}

/* Pfeil-Modifier – absolut am Rand positioniert, damit der Label-Text exakt zentriert bleibt.
   Symmetrisches Extra-Padding hält den Text zentriert UND schafft Platz für den Pfeil. */
.bss-btn--arrow { position: relative; padding-left: 2.3em; padding-right: 2.3em; }
.bss-btn--arrow::after  { content: "→"; position: absolute; right: .9em; top: 50%; transform: translateY(-50%); pointer-events: none; }
.bss-btn--back  { position: relative; padding-left: 2.3em; padding-right: 2.3em; }
.bss-btn--back::before  { content: "←"; position: absolute; left: .9em;  top: 50%; transform: translateY(-50%); pointer-events: none; }

/* Größen-/Layout-Helfer */
.bss-btn--sm    { padding: 7px 16px; font-size: 13px; }
.bss-btn--block { width: 100%; }

/* Kombination sm + Pfeil: --sm überschreibt sonst das Seiten-Padding der Pfeil-Varianten */
.bss-btn--sm.bss-btn--arrow,
.bss-btn--sm.bss-btn--back { padding-left: 2.3em; padding-right: 2.3em; }

/* Button-Text generell NICHT fett (alle Button-Typen) */
.bss-btn,
.wp-block-button__link, .kb-button, .kadence-button, button.kb-button, .wp-element-button,
.header-button,
.learndash-wrapper .ld-button, .learndash-wrapper .ld-expand-button,
.learndash-wrapper .wpProQuiz_content .wpProQuiz_button,
.learndash-wrapper .wpProQuiz_content .wpProQuiz_button2,
html body .learndash-wrapper #quiz_continue_link,
html body .learndash_mark_complete_button,
.ff-btn-submit, .ff-btn.ff-btn-md,
.bss-login-form button[type="submit"] {
    font-weight: 500 !important;
}


/* ============================================================
   LEARNDASH – ALLGEMEIN
   ============================================================ */

.learndash-wrapper {
    font-family: inherit;
}

/* ---------------------------------------------------------------
   LD-Inline-CSS überschreiben: exakte Selektoren aus
   learndash-front-inline-css, Farbe #000000 → var(--bss-red)
   (unser File lädt nach LD dank 'learndash-front' als Dependency)
   --------------------------------------------------------------- */

/* Standard-Buttons (Solid) */
.learndash-wrapper .ld-button:hover:not([disabled]):not(.ld-button-transparent):not(.ld--ignore-inline-css),
.learndash-wrapper .ld-button:not([disabled]):not(.ld-button-reverse):not(.ld-button-transparent):not(.ld--ignore-inline-css),
.learndash-wrapper .ld-expand-button:not([disabled]),
.learndash-wrapper .wpProQuiz_content .wpProQuiz_button:not([disabled]):not(.wpProQuiz_button_reShowQuestion):not(.wpProQuiz_button_restartQuiz),
.learndash-wrapper .wpProQuiz_content .wpProQuiz_button2:not([disabled]),
.learndash-wrapper .btn-join:not(.ld--ignore-inline-css),
.learndash-wrapper #btn-join:not(.ld--ignore-inline-css),
.learndash-wrapper .ld-focus-comments .form-submit #submit,
.learndash-wrapper .ld-login-modal input[type='submit']:not([disabled]),
.learndash-wrapper .ld-login-modal .ld-login-modal-register:not([disabled]),
.learndash-wrapper .wpProQuiz_content .wpProQuiz_certificate a.btn-blue:not([disabled]),
#wpProQuiz_overlay_close:not([disabled]) {
    background-color: var(--bss-red) !important;
    color: var(--bss-white) !important;
    border: 2px solid var(--bss-red) !important;
    border-radius: var(--bss-radius) !important;
    outline: none !important;
    opacity: 1 !important;
}

/* Hover-Zustand */
.learndash-wrapper .ld-button:hover:not(.ld-button-transparent):not(.ld--ignore-inline-css),
.learndash-wrapper .btn-join:hover:not(.ld--ignore-inline-css),
.learndash-wrapper #btn-join:hover:not(.ld--ignore-inline-css),
.learndash-wrapper .ld-expand-button:hover,
.learndash-wrapper .wpProQuiz_content .wpProQuiz_button:not(.wpProQuiz_button_reShowQuestion):hover:not(.wpProQuiz_button_restartQuiz),
.learndash-wrapper .wpProQuiz_content .wpProQuiz_button2:hover,
.learndash-wrapper .ld-focus-comments .form-submit #submit:hover,
.learndash-wrapper .ld-login-modal input[type='submit']:hover,
.learndash-wrapper .ld-login-modal .ld-login-modal-register:hover,
.learndash-wrapper .wpProQuiz_content .wpProQuiz_certificate a.btn-blue:hover {
    background-color: var(--bss-white) !important;
    color: var(--bss-red) !important;
    border-color: var(--bss-red) !important;
    outline: none !important;
    opacity: 1 !important;
}

/* Focus-Outline rot statt blau/schwarz */
.learndash-wrapper .ld-button:focus,
.learndash-wrapper .ld-expand-button:focus,
.learndash-wrapper .wpProQuiz_content .wpProQuiz_button:focus,
.learndash-wrapper .wpProQuiz_content .wpProQuiz_button2:focus {
    outline: 2px solid var(--bss-red) !important;
    outline-offset: 2px !important;
    opacity: 1 !important;
}

/* Transparenter Button (Navigation Vor/Zurück) → Outline-Stil rot */
.learndash-wrapper .ld-button.ld-button-transparent,
.learndash-wrapper .ld-button.ld-button-alternate,
.learndash-wrapper .ld-expand-button.ld-button-alternate {
    background-color: transparent !important;
    color: var(--bss-red) !important;
    border: 2px solid var(--bss-red) !important;
    border-radius: var(--bss-radius) !important;
}

.learndash-wrapper .ld-button.ld-button-transparent:hover {
    background: var(--bss-red) !important;
    color: var(--bss-white) !important;
    outline: none !important;
}

.learndash-wrapper .ld-button.ld-button-transparent:focus {
    outline: 2px solid var(--bss-red) !important;
    outline-offset: 2px !important;
}

/* Mark-Complete-Button – überall
   Hohe Spezifität nötig um Kadence-Theme-Regeln auf input[type="submit"] zu schlagen */
html body .learndash-wrapper .sfwd-mark-complete input[type="submit"].learndash_mark_complete_button,
html body .learndash-wrapper .sfwd-mark-complete .learndash_mark_complete_button,
html body .learndash_mark_complete_button,
html body #learndash_mark_complete_button,
html body .sfwd-mark-complete input[type="submit"],
.learndash-wrapper .ld-focus .ld-focus-header .sfwd-mark-complete .learndash_mark_complete_button:not(.ld--ignore-inline-css),
.learndash-wrapper .ld-focus .ld-focus-header #sfwd-mark-complete #learndash_mark_complete_button {
    background-color: var(--bss-red) !important;
    color: var(--bss-white) !important;
    border: 2px solid var(--bss-red) !important;
    border-radius: var(--bss-radius) !important;
    white-space: nowrap !important;
    outline: none !important;
    opacity: 1 !important;
    cursor: pointer !important;
}

html body .learndash_mark_complete_button:hover,
html body #learndash_mark_complete_button:hover,
html body .sfwd-mark-complete input[type="submit"]:hover {
    background-color: var(--bss-white) !important;
    color: var(--bss-red) !important;
    border-color: var(--bss-red) !important;
    outline: none !important;
    opacity: 1 !important;
}

/* Sekundärfarbe (Progress Color in LD-Settings) → rot statt blau
   html body Prefix für Spezifität gegen LD-Inline-CSS */
html body .learndash-wrapper .ld-secondary-color {
    color: var(--bss-red) !important;
}

html body .learndash-wrapper .ld-secondary-background {
    background-color: var(--bss-red) !important;
}

/* Checkmark-Icon neben dem Mark-Complete-Button (alle möglichen Positionen) */
html body .learndash-wrapper .sfwd-mark-complete .ld-icon,
html body .learndash-wrapper .sfwd-mark-complete .ld-icon-checkmark,
html body .learndash-wrapper .ld-content-action .ld-icon,
html body .learndash-wrapper .ld-content-action .ld-icon-checkmark,
html body .learndash-wrapper .ld-focus-header .ld-icon-checkmark {
    color: var(--bss-red) !important;
}

/* Haken nach dem Mark-Complete-Button im Focus Header
   Hardcodiertes #235af3 in learndash.min.css überschreiben */
.learndash-wrapper .ld-focus .ld-focus-header #sfwd-mark-complete:after,
.learndash-wrapper .ld-focus .ld-focus-header .sfwd-mark-complete:after {
    color: var(--bss-red) !important;
}

/* Focus-Header Begrüßung oben rechts: Avatar entfernen (nicht pflegbar). Der Willkommenstext
   ("Hallo, {Vorname}!", aus ld_focus_mode_welcome_name) ist LD-seitig per Default display:none –
   da wir aber den Avatar ausblenden, bliebe sonst KEIN sichtbarer Menü-Auslöser übrig. Deshalb
   den Text einblenden: er ist die persönliche Ansprache UND der klickbare Auslöser des User-Menüs. */
/* User-Menue nicht zerquetschen lassen (LD schrumpft es sonst im engen Header auf wenige px). */
.learndash-wrapper .ld-focus-header .ld-user-menu {
    flex: 0 0 auto !important;
}
/* Breiter Header: persoenliche Ansprache als sichtbarer Menue-Ausloeser, Gravatar aus. */
.learndash-wrapper .ld-focus-header .ld-profile-avatar {
    display: none !important;
}
.learndash-wrapper .ld-focus-header .ld-user-welcome-text {
    display: inline-block !important;
    white-space: nowrap !important;   /* niemals Zeichen-fuer-Zeichen umbrechen */
    font-weight: 700 !important;
    cursor: pointer;
}
/* Enger Header (LD hat hier keinen Platz fuer die Ansprache): Ansprache ausblenden und den
   kompakten Avatar als Ausloeser zeigen, damit das Menue (Kurs-Startseite/Abmelden) erreichbar
   bleibt – statt die Ansprache in eine schmale Spalte zu zerbroeseln. */
@media (max-width: 1300px) {
    .learndash-wrapper .ld-focus-header .ld-user-welcome-text {
        display: none !important;
    }
    .learndash-wrapper .ld-focus-header .ld-profile-avatar {
        display: inline-block !important;
    }
}

/* LearnDash Login-Modal (Kurszugriff ohne Login):
   Rote "Register"-Sektion rechts entfernen, einspaltig zentrieren, Text lesbarer. */
.ld-login-modal .ld-login-modal-register {
    display: none !important;
}
.ld-login-modal.ld-can-register .ld-login-modal-login,
.ld-login-modal .ld-login-modal-login {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    float: none !important;
}
.ld-login-modal .ld-login-modal-login .ld-login-modal-wrapper {
    max-width: 460px;
    margin-left: auto !important;
    margin-right: auto !important;
}
.ld-login-modal .ld-login-modal-login .ld-modal-text {
    color: #444 !important;
}
/* Branding-Logo im Login-Modal verkleinern */
.ld-login-modal .ld-login-modal-branding {
    text-align: center;
    margin-top: 10px;
}
.ld-login-modal .ld-login-modal-branding img {
    max-width: 220px !important;
    max-height: 64px !important;
    width: auto !important;
    height: auto !important;
    display: inline-block !important;
}

/* Primärfarbe (Links, aktive Elemente) */
.learndash-wrapper .ld-primary-color,
.learndash-wrapper .ld-primary-color-hover:hover,
.learndash-wrapper .ld-tabs .ld-tabs-navigation .ld-tab.ld-active,
.learndash-wrapper .ld-breadcrumbs a,
.learndash-wrapper .ld-button.ld-button-transparent,
.learndash-wrapper .ld-button.ld-button-reverse {
    color: var(--bss-red) !important;
}

/* Primär-Hintergrund (Tab-Unterstrich, Status-Badges) */
.learndash-wrapper .ld-primary-background,
.learndash-wrapper .ld-tabs .ld-tabs-navigation .ld-tab.ld-active:after {
    background: var(--bss-red) !important;
}

/* Aktuelle Lektion / aktueller Step */
.learndash-wrapper .ld-lesson-item.ld-is-current-lesson .ld-lesson-item-preview-heading,
.learndash-wrapper .ld-lesson-item.ld-is-current-lesson .ld-lesson-title {
    color: var(--bss-red) !important;
}

/* Lade-Spinner */
.learndash-wrapper .ld-loading::before {
    border-top-color: var(--bss-red) !important;
}

/* Focus Mode – Quiz-Fortschrittsbalken */
.learndash-wrapper .wpProQuiz_content .wpProQuiz_time_limit .wpProQuiz_progress {
    background-color: var(--bss-red) !important;
}

/* Next/Previous-Items Rahmen */
.learndash-wrapper .ld-item-list .ld-item-list-item.ld-is-next {
    border-color: var(--bss-red) !important;
}

/* Fortschrittsbalken */
.learndash-wrapper .ld-progress-bar .ld-progress-bar-percentage,
.learndash-wrapper .ld-progress-fill,
.ld-progress-bar-percentage {
    background-color: var(--bss-red) !important;
}

/* Aktive Navigation / aktueller Kursschritt */
.learndash-wrapper .ld-table-list-item.ld-is-current-item .ld-table-list-item-preview,
.learndash-wrapper .ld-nav-item.ld-is-current-item {
    color: var(--bss-red) !important;
    border-left-color: var(--bss-red) !important;
}

/* Abgeschlossene Items: Grün = Erfolgsfarbe (konsistent zu Zertifikat/Quiz-Review) */
.learndash-wrapper .ld-status-complete,
.learndash-wrapper .ld-icon-checkmark {
    color: var(--bss-success) !important;
}

/* Breadcrumb-Status "Abgeschlossen": weiß auf Grün (Erfolgsfarbe) */
.learndash-wrapper .ld-breadcrumbs .ld-status,
.learndash-wrapper .ld-breadcrumbs .ld-status-complete {
    background-color: var(--bss-success) !important;
    color: var(--bss-white) !important;
}

/* LearnDash-Primärfarbe-Leaks: diverse LD-Elemente nutzen die in den LD-Einstellungen
   gesetzte Primärfarbe (#eb5757). Bis diese auf #e42313 geändert ist → auf CI-Rot ziehen.
   (Sauberster Fix: LD-Primärfarbe-Setting selbst auf #e42313 ändern.) */
.learndash-wrapper .ld-primary-background {
    background-color: var(--bss-red) !important;
}
.learndash-wrapper .ld-user-menu .ld-user-menu-items a:hover {
    background-color: var(--bss-red) !important;
    color: var(--bss-white) !important;
}

/* Kurs-Header Segment */
.learndash-wrapper .ld-course-status .ld-course-status-seg {
    background: var(--bss-red) !important;
}


/* ============================================================
   LEARNDASH – KURS-KARTEN (Kursübersicht)
   ============================================================ */

.learndash-wrapper .ld-course-list-item,
.ld_course_grid .course {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e8e8e8;
    transition: box-shadow var(--bss-transition);
}

.learndash-wrapper .ld-course-list-item:hover,
.ld_course_grid .course:hover {
    box-shadow: 0 4px 16px rgba(228, 35, 19, 0.15);
}

.ld_course_grid .course_title a {
    color: var(--bss-black) !important;
    font-weight: 700;
}

.ld_course_grid .btn-primary,
.ld_course_grid .course-button {
    background-color: var(--bss-red) !important;
    color: var(--bss-white) !important;
    border-color: var(--bss-red) !important;
    border-radius: var(--bss-radius) !important;
}

.ld_course_grid .btn-primary:hover,
.ld_course_grid .course-button:hover {
    background-color: var(--bss-white) !important;
    color: var(--bss-red) !important;
}


/* ============================================================
   FLUENT FORMS – FORMULAR-STYLING
   ============================================================ */

.ff-el-input--content input,
.ff-el-input--content textarea,
.ff-el-input--content select {
    border-radius: 6px !important;
    border-color: #d0d0d0 !important;
    transition: border-color var(--bss-transition) !important;
}

.ff-el-input--content input:focus,
.ff-el-input--content textarea:focus,
.ff-el-input--content select:focus {
    border-color: var(--bss-red) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(228, 35, 19, 0.15) !important;
}

.ff-btn-submit,
.ff-btn.ff-btn-md {
    display: inline-block !important;
    text-box: trim-both cap alphabetic !important;
    background-color: var(--bss-red) !important;
    color: var(--bss-white) !important;
    border: 2px solid var(--bss-red) !important;
    border-radius: var(--bss-radius) !important;
    font-weight: 700 !important;
    transition: background-color var(--bss-transition), color var(--bss-transition) !important;
}

.ff-btn-submit:hover,
.ff-btn.ff-btn-md:hover {
    background-color: var(--bss-white) !important;
    color: var(--bss-red) !important;
}

/* Pflichtfeld-Stern */
.ff-el-is-required .ff-label-wrap::after {
    color: var(--bss-red) !important;
}

/* Fehler-Meldungen */
.ff-el-form-control.ff_has_error,
.error-message {
    border-color: var(--bss-red) !important;
}


/* ============================================================
   BSS DASHBOARD & BEITRETEN-SEITE
   ============================================================ */

.bss-dashboard,
.bss-join-wrap,
.bss-login-wrap {
    max-width: 720px;
}

.bss-campaign-card,
.bss-join-wrap > div {
    border-radius: 8px;
}

/* Copy-Link-Button im Dashboard */
.bss-dashboard button[onclick^="bssCopyLink"] {
    border-radius: var(--bss-radius) !important;
}

/* Login-Formular */
.bss-login-form button[type="submit"] {
    background-color: var(--bss-red);
    color: var(--bss-white);
    border: 2px solid var(--bss-red);
    border-radius: var(--bss-radius);
    font-weight: 700;
    padding: 10px 28px;
    cursor: pointer;
    transition: background-color var(--bss-transition), color var(--bss-transition);
}

.bss-login-form button[type="submit"]:hover {
    background-color: var(--bss-white);
    color: var(--bss-red);
}

/* Passwort festlegen / zurücksetzen / vergessen */
.bss-pw-wrap,
.bss-lostpw-wrap {
    max-width: 480px;
}

.bss-pw-wrap h2,
.bss-lostpw-wrap h2 {
    color: var(--bss-black, #1a1a2e);
    font-weight: 700;
}

.bss-pw-form label,
.bss-lostpw-form label {
    font-weight: 600;
}

.bss-pw-form input[type="password"],
.bss-pw-form input[type="text"],
.bss-pw-form input[type="email"],
.bss-lostpw-form input[type="email"] {
    border: 1px solid #ccc;
    border-radius: 6px;
}

.bss-pw-form button[type="submit"],
.bss-lostpw-form button[type="submit"] {
    background-color: var(--bss-red);
    color: var(--bss-white);
    border: 2px solid var(--bss-red);
    border-radius: var(--bss-radius);
    font-weight: 700;
    padding: 10px 28px;
    cursor: pointer;
    transition: background-color var(--bss-transition), color var(--bss-transition);
}

.bss-pw-form button[type="submit"]:hover,
.bss-lostpw-form button[type="submit"]:hover {
    background-color: var(--bss-white);
    color: var(--bss-red);
}

/* Tab-Buttons auf Beitreten-Seite */
#bss-tab-btn-new,
#bss-tab-btn-existing {
    border-radius: var(--bss-radius) var(--bss-radius) 0 0 !important;
}


/* ============================================================
   KADENCE HEADER / NAVIGATION
   ============================================================ */

/* Aktiver Menüpunkt */
.primary-menu > li.current-menu-item > a,
.primary-menu > li.current-menu-ancestor > a {
    color: var(--bss-red) !important;
}

/* Header-Hintergrund (falls gewünscht weiss) */
.site-header {
    background-color: var(--bss-white);
}

/* Header-Button */
.header-button {
    display: inline-block !important;
    text-box: trim-both cap alphabetic !important;
    border: 2px solid var(--bss-red) !important;
    border-radius: var(--bss-radius) !important;
    font-weight: 700 !important;
    transition: background-color var(--bss-transition), color var(--bss-transition),
                border-color var(--bss-transition) !important;
}

.header-button:hover {
    background-color: var(--bss-white) !important;
    color: var(--bss-red) !important;
    border-color: var(--bss-red) !important;
    text-decoration: none !important;
}


/* ============================================================
   LEARNDASH – KURS-INFOBAR
   Nur den Starten/Fortsetzen-Button zeigen
   ============================================================ */

.ld-course-status-seg-status,
.ld-course-status-seg-price {
    display: none !important;
}

.ld-course-status-seg-action {
    border-left: none !important;
}


/* ============================================================
   LEARNDASH – FOCUS MODE
   ============================================================ */

/* Sidebar aufhellen */
.ld-focus-sidebar {
    background: #f5f5f5 !important;
    color: var(--bss-black) !important;
}

/* Kurs-Navigations-Header in der Sidebar
   Exakter LD-Inline-Selektor (4 Klassen Spezifität) nötig um !important zu gewinnen */
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation-heading {
    background-color: #f5f5f5 !important;
    color: var(--bss-black) !important;
    border-bottom: 1px solid #e0e0e0 !important;
}

.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation-heading a,
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation-heading a span,
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation-heading .ld-icon,
#ld-focus-mode-course-heading,
#ld-focus-mode-course-heading span {
    color: var(--bss-black) !important;
}

/* Sidebar-Toggle-Button (Pfeil-Icon oben links)
   LD inline: .ld-focus-sidebar-trigger:not(:hover):not(:focus) .ld-icon → background #000 */
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-focus-sidebar-trigger:not([disabled]):not(:hover):not(:focus) .ld-icon {
    background-color: transparent !important;
    color: var(--bss-black) !important;
}

.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-focus-sidebar-trigger:hover .ld-icon,
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-focus-sidebar-trigger:focus .ld-icon {
    border-color: var(--bss-red) !important;
    color: var(--bss-red) !important;
}

.ld-focus-sidebar a,
.ld-focus-sidebar .ld-nav-section-heading,
.ld-focus-sidebar .ld-item-list-item-preview,
.ld-focus-sidebar .ld-item-name {
    color: var(--bss-black) !important;
}

.ld-focus-sidebar .ld-item-list-item.ld-is-current-item .ld-item-list-item-preview,
.ld-focus-sidebar .ld-item-list-item.ld-is-current-item .ld-item-name {
    color: var(--bss-red) !important;
}

/* Sidebar – 3 Status-Zustände
   Klassen kommen direkt aus dem LD-HTML, kein JS nötig */

/* Abgeschlossen: grüner Vollkreis mit weißem Haken (Erfolgsfarbe) */
.ld-focus-sidebar .ld-status-icon.ld-status-complete {
    border: 2px solid var(--bss-success) !important;
    background-color: var(--bss-success) !important;
}
.ld-focus-sidebar .ld-status-icon.ld-status-complete .ld-icon {
    color: var(--bss-white) !important;
}

/* Aktuell: roter Hohlkreis */
.ld-focus-sidebar .ld-lesson-item.ld-is-current-lesson .ld-status-icon.ld-status-incomplete {
    border: 2px solid var(--bss-red) !important;
    background-color: transparent !important;
}

/* Noch nicht begonnen: grauer Hohlkreis */
.ld-focus-sidebar .ld-lesson-item.ld-is-not-current-lesson.learndash-incomplete .ld-status-icon.ld-status-incomplete {
    border: 2px solid #ccc !important;
    background-color: transparent !important;
}

/* Aktuell: Lektionstitel rot + fett */
.ld-focus-sidebar .ld-lesson-item.ld-is-current-lesson .ld-lesson-title,
.ld-focus-sidebar .ld-lesson-item.ld-is-current-lesson .ld-lesson-item-preview-heading {
    color: var(--bss-red) !important;
    font-weight: 700 !important;
}

/* Abgeschlossen: Lektionstitel schwarz */
.ld-focus-sidebar .ld-lesson-item.learndash-complete .ld-lesson-title {
    color: var(--bss-black) !important;
}

/* Noch nicht begonnen: Lektionstitel grau */
.ld-focus-sidebar .ld-lesson-item.ld-is-not-current-lesson.learndash-incomplete .ld-lesson-title {
    color: #999 !important;
}

/* Focus-Header */
.ld-focus-header {
    background: var(--bss-white) !important;
    border-bottom: 1px solid #e8e8e8 !important;
}

.ld-focus-header .ld-heading,
.ld-focus-header a {
    color: var(--bss-black) !important;
}

/* "Lektion Content" / "Course Content" Section-Heading ausblenden */
.ld-item-list-section-heading {
    display: none !important;
}

/* Fortschrittsbalken im Focus Mode */
.ld-focus-header .ld-progress-bar .ld-progress-bar-percentage,
.ld-focus-main .ld-progress-bar .ld-progress-bar-percentage {
    background-color: var(--bss-red) !important;
}

/* "% COMPLETE" Label */
.ld-progress .ld-progress-steps,
.ld-progress-heading .ld-progress-percentage {
    color: var(--bss-red) !important;
}

/* "Steps" / Schritte-Text */
.ld-progress .ld-progress-steps .ld-progress-steps-count {
    color: var(--bss-black) !important;
}

/* IN PROGRESS / COMPLETE Status-Badges */
.ld-status-progress,
.ld-badge-progress {
    background-color: var(--bss-black) !important;
    color: var(--bss-white) !important;
    border-color: var(--bss-black) !important;
}

.ld-status-complete,
.ld-badge-complete {
    background-color: var(--bss-success) !important;
    color: var(--bss-white) !important;
    border-color: var(--bss-success) !important;
}

/* "Last activity on" */
.ld-last-activity,
.ld-course-status-message {
    color: var(--bss-black) !important;
}

/* Checkmark-Button oben rechts (als vollständig markieren) */
#learndash_mark_complete_button,
.learndash_mark_complete_button,
.ld-status-icon,
.ld-icon-checkmark {
    color: var(--bss-red) !important;
    border-color: var(--bss-red) !important;
}

/* Icons standard schwarz – NICHT in Buttons (dort inherit) */
.ld-icon {
    color: var(--bss-black);
}

.ld-item-list-item .ld-status-icon {
    color: var(--bss-black) !important;
}

/* Icons innerhalb von Solid-Buttons erben die Textfarbe (weiß) */
.ld-button .ld-icon,
.learndash-wrapper .ld-button .ld-icon {
    color: inherit !important;
}

/* Expand-Button: Icon-Kreis hat farbigen Hintergrund → Pfeil immer weiß */
.learndash-wrapper .ld-expand-button .ld-icon {
    color: var(--bss-white) !important;
}

/* Links: keine border-bottom (LD setzt manchmal eine) */
.learndash-wrapper:not(.ld-registration__outer-wrapper):not(.learndash-wrapper--modern)
    a:not(.button):not(.screen-reader-shortcut) {
    border: none !important;
}

/* Fortschritts-Prozent rot, Schritte-Text schwarz */
.ld-progress-percentage,
.ld-progress-percentage.ld-secondary-color {
    color: var(--bss-red) !important;
}

.ld-progress-steps {
    color: var(--bss-black) !important;
}

/* Fortschrittsbalken Hintergrund */
.ld-progress-bar-percentage.ld-secondary-background {
    background-color: var(--bss-red) !important;
}

/* Kursinhalt-Liste: Abgeschlossen vs. offen DEUTLICH unterscheiden.
   Abgeschlossen = grüner Haken-Kreis + leichter grüner Schimmer auf der Karte;
   offen = neutraler grauer Hohlkreis. */
html body .learndash-wrapper .ld-item-list-item.ld-status-complete,
html body .learndash-wrapper .ld-item-list-item.ld-is-complete,
html body .learndash-wrapper .ld-item-list-item.learndash-complete {
    background-color: var(--bss-success-bg) !important;
    border-color: rgba(40, 167, 69, 0.35) !important;
}
.learndash-wrapper .ld-status-icon.ld-status-complete {
    background-color: var(--bss-success) !important;
    border-color: var(--bss-success) !important;
}
.learndash-wrapper .ld-status-icon.ld-status-complete .ld-icon,
.ld-item-list-item.ld-is-complete .ld-status-icon .ld-icon,
.ld-item-list-item.ld-status-complete .ld-status-icon .ld-icon {
    color: var(--bss-white) !important;
}
.learndash-wrapper .ld-status-icon.ld-status-incomplete {
    background-color: transparent !important;
    border: 2px solid #c7ced6 !important;
}
/* Expand-/Quiz-Pills ("1 Test", "Aufklappen") abgeschlossener Lektionen ebenfalls in
   Erfolgsgrün – in der Kursinhalt-Liste UND der Focus-Sidebar */
html body .learndash-wrapper .ld-lesson-item.learndash-complete .ld-expand-button,
html body .learndash-wrapper .ld-item-list-item.learndash-complete .ld-expand-button {
    color: var(--bss-success) !important;
    border-color: var(--bss-success) !important;
    background-color: transparent !important;
}
/* Sichtbarer Pill-Text ist .ld-text.ld-primary-color ("Aufklappen") – sonst bleibt
   er durch die ld-primary-color-Regel rot. (.ld-expand-text als Fallback belassen.) */
html body .learndash-wrapper .ld-lesson-item.learndash-complete .ld-expand-button .ld-text,
html body .learndash-wrapper .ld-item-list-item.learndash-complete .ld-expand-button .ld-text,
html body .learndash-wrapper .ld-lesson-item.learndash-complete .ld-expand-button .ld-expand-text,
html body .learndash-wrapper .ld-item-list-item.learndash-complete .ld-expand-button .ld-expand-text {
    color: var(--bss-success) !important;
}
html body .learndash-wrapper .ld-lesson-item.learndash-complete .ld-expand-button .ld-icon,
html body .learndash-wrapper .ld-item-list-item.learndash-complete .ld-expand-button .ld-icon {
    background-color: var(--bss-success) !important;
    color: var(--bss-white) !important;
}
html body .learndash-wrapper .ld-lesson-item.learndash-complete .ld-expand-button:hover,
html body .learndash-wrapper .ld-item-list-item.learndash-complete .ld-expand-button:hover {
    background-color: var(--bss-success) !important;
    color: var(--bss-white) !important;
    border-color: var(--bss-success) !important;
}
html body .learndash-wrapper .ld-lesson-item.learndash-complete .ld-expand-button:hover .ld-icon,
html body .learndash-wrapper .ld-item-list-item.learndash-complete .ld-expand-button:hover .ld-icon {
    background-color: var(--bss-white) !important;
    color: var(--bss-success) !important;
}
html body .learndash-wrapper .ld-lesson-item.learndash-complete .ld-expand-button:hover .ld-text,
html body .learndash-wrapper .ld-item-list-item.learndash-complete .ld-expand-button:hover .ld-text,
html body .learndash-wrapper .ld-lesson-item.learndash-complete .ld-expand-button:hover .ld-expand-text,
html body .learndash-wrapper .ld-item-list-item.learndash-complete .ld-expand-button:hover .ld-expand-text {
    color: var(--bss-white) !important;
}

/* Rote Outline-Pills (offene Lektionen, ld-button-alternate): Hover invertiert zu
   Vollrot – analog zu den grünen Pills. Abgeschlossene (grüne) Pills gewinnen durch
   die spezifischeren learndash-complete-Regeln oben. */
html body .learndash-wrapper .ld-expand-button.ld-button-alternate:hover {
    background-color: var(--bss-red) !important;
    color: var(--bss-white) !important;
    border-color: var(--bss-red) !important;
}
html body .learndash-wrapper .ld-expand-button.ld-button-alternate:hover .ld-text,
html body .learndash-wrapper .ld-expand-button.ld-button-alternate:hover .ld-expand-text {
    color: var(--bss-white) !important;
}
html body .learndash-wrapper .ld-expand-button.ld-button-alternate:hover .ld-icon {
    background-color: var(--bss-white) !important;
    color: var(--bss-red) !important;
}

/* Titel/Texte der abgeschlossenen Karte bleiben schwarz – Status zeigen Icon + Schimmer */
html body .learndash-wrapper .ld-item-list-item.ld-status-complete .ld-item-title,
html body .learndash-wrapper .ld-item-list-item.ld-status-complete .ld-item-name,
html body .learndash-wrapper .ld-item-list-item.ld-is-complete .ld-item-title,
html body .learndash-wrapper .ld-item-list-item.ld-is-complete .ld-item-name,
html body .learndash-wrapper .ld-item-list-item.learndash-complete .ld-item-title,
html body .learndash-wrapper .ld-item-list-item.learndash-complete .ld-item-name {
    color: var(--bss-black) !important;
}

/* Lektion-Navigation (Vor/Zurück) als TEXTLINKS statt Buttons (explizite Klassen).
   Spezifität muss die Solid-Button-Regel oben ((0,6,0) durch :not-Kette) schlagen →
   html-body-Präfix + :not([disabled]) ergeben (0,6,2). */
html body .learndash-wrapper .ld-next-prev-links a,
html body .learndash-wrapper .ld-next-prev-links .next-link a,
html body .learndash-wrapper .ld-button.ld-next-prev-link:not(.ld-button-transparent):not(.ld--ignore-inline-css):not([disabled]),
html body .learndash-wrapper .ld-button.learndash-link-previous-incomplete:not(.ld-button-transparent):not(.ld--ignore-inline-css):not([disabled]),
html body .learndash-wrapper .ld-button.learndash-link-next:not(.ld-button-transparent):not(.ld--ignore-inline-css):not([disabled]),
html body .learndash-wrapper .ld-button.learndash-link-previous:not(.ld-button-transparent):not(.ld--ignore-inline-css):not([disabled]) {
    display: inline-flex !important;
    align-items: center !important;
    gap: .35em !important;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 4px 2px !important;
    color: var(--bss-red) !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}
html body .learndash-wrapper .ld-next-prev-links a:hover,
html body .learndash-wrapper .ld-next-prev-links .next-link a:hover,
html body .learndash-wrapper .ld-button.ld-next-prev-link:not(.ld-button-transparent):not(.ld--ignore-inline-css):not([disabled]):hover,
html body .learndash-wrapper .ld-button.learndash-link-previous-incomplete:not(.ld-button-transparent):not(.ld--ignore-inline-css):not([disabled]):hover,
html body .learndash-wrapper .ld-button.learndash-link-next:not(.ld-button-transparent):not(.ld--ignore-inline-css):not([disabled]):hover,
html body .learndash-wrapper .ld-button.learndash-link-previous:not(.ld-button-transparent):not(.ld--ignore-inline-css):not([disabled]):hover {
    background: none !important;
    background-color: transparent !important;
    text-decoration: none !important;   /* Pfeil-Icon NICHT unterstreichen; Farbe bleibt (kein Abdunkeln) */
}
/* Feedback nur als Unterstreichung des Text-Spans, nicht des ganzen Links (Pfeil) */
html body .learndash-wrapper .ld-next-prev-links a:hover .ld-text,
html body .learndash-wrapper .ld-button.ld-next-prev-link:not(.ld-button-transparent):not(.ld--ignore-inline-css):not([disabled]):hover .ld-text,
html body .learndash-wrapper .ld-button.learndash-link-previous-incomplete:not(.ld-button-transparent):not(.ld--ignore-inline-css):not([disabled]):hover .ld-text,
html body .learndash-wrapper .ld-button.learndash-link-next:not(.ld-button-transparent):not(.ld--ignore-inline-css):not([disabled]):hover .ld-text,
html body .learndash-wrapper .ld-button.learndash-link-previous:not(.ld-button-transparent):not(.ld--ignore-inline-css):not([disabled]):hover .ld-text {
    text-decoration: underline !important;
}

/* … sowie die nur per Pfeil-Icon erkennbaren Nav-Links ("Nächste/Vorherige Lektion") */
html body .learndash-wrapper .ld-button:has(.ld-icon-arrow-right):not(.ld-button-transparent):not(.ld--ignore-inline-css):not([disabled]),
html body .learndash-wrapper .ld-button:has(.ld-icon-arrow-left):not(.ld-button-transparent):not(.ld--ignore-inline-css):not([disabled]) {
    display: inline-flex !important;
    align-items: center !important;
    gap: .35em !important;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 4px 2px !important;
    color: var(--bss-red) !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}
html body .learndash-wrapper .ld-button:has(.ld-icon-arrow-right):not(.ld-button-transparent):not(.ld--ignore-inline-css):not([disabled]):hover,
html body .learndash-wrapper .ld-button:has(.ld-icon-arrow-left):not(.ld-button-transparent):not(.ld--ignore-inline-css):not([disabled]):hover {
    background: none !important;
    text-decoration: none !important;   /* Pfeil nicht unterstreichen, Farbe bleibt */
}
html body .learndash-wrapper .ld-button:has(.ld-icon-arrow-right):not(.ld-button-transparent):not(.ld--ignore-inline-css):not([disabled]):hover .ld-text,
html body .learndash-wrapper .ld-button:has(.ld-icon-arrow-left):not(.ld-button-transparent):not(.ld--ignore-inline-css):not([disabled]):hover .ld-text {
    text-decoration: underline !important;
}

/* Navigations-Textlinks ("Weiter"/"Vorherige Lektion") exakt so groß wie der
   Back-Link "Zurück zur Übersicht" (.ld-course-step-back = .75em). Beide hängen im
   16px-Kontext der .ld-content-actions → .75em = 12px, überall gleich. */
html body .learndash-wrapper .ld-content-actions .ld-content-action .ld-button {
    font-size: .75em !important;
}
/* Text-Span erbt die Button-Größe (1em) – sonst würde .75em ein zweites Mal greifen (→ 9px) */
html body .learndash-wrapper .ld-content-actions .ld-content-action .ld-button .ld-text {
    font-size: 1em !important;
}
/* Back-Link "Zurück zur Übersicht": Farbe konstant rot (Hover darf nicht abdunkeln),
   Unterstreichung als alleiniges Feedback – analog zu den Nav-Links. */
html body .learndash-wrapper .ld-content-actions .ld-course-step-back,
html body .learndash-wrapper .ld-content-actions .ld-course-step-back:hover,
html body .learndash-wrapper .ld-content-actions .ld-course-step-back:focus {
    color: var(--bss-red) !important;
    text-decoration: underline !important;
}

/* Mobil: Back-Link auf eigene (zentrierte) Zeile, die beiden Nav-Links daneben in
   EINE Reihe (prev links / next rechts). Leere Platzhalter-Actions ausblenden. */
@media (max-width: 640px) {
    html body .learndash-wrapper .ld-content-actions {
        display: flex !important;
        flex-direction: row !important;   /* LD setzt mobil flex-direction:column → zurück auf Reihe */
        flex-wrap: wrap !important;
        align-items: center;
        justify-content: space-between;
        row-gap: 6px;
        column-gap: 12px;
    }
    html body .learndash-wrapper .ld-content-actions .ld-content-action.ld-empty {
        display: none !important;
    }
    html body .learndash-wrapper .ld-content-actions .ld-content-action:has(> .ld-course-step-back) {
        flex: 0 0 100% !important;
        order: -1 !important;
        width: 100% !important;
        text-align: center;
    }
    html body .learndash-wrapper .ld-content-actions .ld-content-action:not(.ld-empty):not(:has(> .ld-course-step-back)) {
        flex: 0 1 auto !important;   /* LD setzt width:100% → sonst füllt jeder Link eine eigene Zeile */
        width: auto !important;
        padding-left: 0 !important;  /* LD-Action-Padding (~16px je Seite) sonst sprengt die Reihe */
        padding-right: 0 !important;
    }
}

/* Sidebar-Navigation (Kursinhalte) bleibt unverändert */
.ld-nav-item a { color: var(--bss-black) !important; }
.ld-nav-item a:hover { color: var(--bss-red) !important; text-decoration: none !important; }

/* "Great Job!" / Zertifikat-Banner */
.ld-alert-certificate,
.learndash-wrapper .ld-alert-certificate {
    background: #f0fdf4 !important;
    border-color: #86efac !important;
    color: var(--bss-black) !important;
}

/* Icon-Kreis: grün statt LD-blau (.ld-alert-success .ld-alert-icon = #235af3); Glyph weiß */
.ld-alert-certificate .ld-alert-icon {
    background-color: #16a34a !important;
    color: #fff !important;
    fill: #fff !important;
}

.ld-alert-certificate a,
.ld-alert-certificate .ld-button {
    background-color: var(--bss-red) !important;
    color: var(--bss-white) !important;
    border-color: var(--bss-red) !important;
    border-radius: var(--bss-radius) !important;
}

/* "← Zurück zum Dashboard": zentrierter Textlink UNTER dem Banner (kein Button).
   Wird per JS als Sibling außerhalb von .ld-alert-certificate eingefügt, damit ihn
   die a-Button-Regel oben nicht erfasst und er nicht in die Flex-Reihe gequetscht wird. */
.bss-back-dashboard {
    margin: 16px 0 20px;          /* Luft auch nach unten (mobil sitzt die Status-Box dicht) */
    text-align: center;
    position: relative;
    z-index: 5;                   /* defensiv: nichts darf den Link überlagern */
}
.bss-back-dashboard a {
    background: none !important;
    border: none !important;
    display: inline-block !important;
    padding: 11px 16px !important; /* Touch-Target ≥44px (iOS) statt 22px Textzeile */
    color: var(--bss-red) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
/* Hover nur auf Geräten mit echtem Hover – verhindert die iOS-Doppeltipp-Falle
   (Safari löst sonst erst :hover aus statt zu navigieren) */
@media (hover: hover) {
    .bss-back-dashboard a:hover {
        text-decoration: underline !important;
    }
}


/* ============================================================
   LEARNDASH – QUIZ (WpProQuiz)
   ============================================================ */

/* Quiz-Container Schrift */
.wpProQuiz_content,
.wpProQuiz_content * {
    color: var(--bss-black) !important;
}

/* Fragen-Text */
.wpProQuiz_question_text,
.wpProQuiz_questionListItem label {
    color: var(--bss-black) !important;
}

/* Antwort-Radio / Checkbox – Akzentfarbe rot */
.wpProQuiz_questionListItem input[type="radio"],
.wpProQuiz_questionListItem input[type="checkbox"] {
    accent-color: var(--bss-red) !important;
}

/* Gewählte Antwort – roter Rahmen */
.wpProQuiz_questionListItem.wpProQuiz_selectedItem {
    border-color: var(--bss-red) !important;
    background: rgba(228, 35, 19, 0.05) !important;
}

/* Richtige Antwort im Ergebnis-Review hervorheben (grün) – auch bei korrekt beantworteten Fragen sichtbar */
.wpProQuiz_answerCorrect {
    border-color: #28a745 !important;
    background: rgba(40, 167, 69, 0.08) !important;
}

/* Falsche Antwort hervorheben */
.wpProQuiz_answerIncorrect {
    border-color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.05) !important;
}

/* Lade-/Fortschrittsbalken */
.wpProQuiz_time_limit div,
.wpProQuiz_timerAlert {
    background-color: var(--bss-red) !important;
}

/* Quiz Start-, Weiter-, Ergebnis-Buttons */
.wpProQuiz_button,
.wpProQuiz_button2,
input.wpProQuiz_button,
input.wpProQuiz_button2,
button.wpProQuiz_button,
button.wpProQuiz_button2 {
    background-color: var(--bss-red) !important;
    color: var(--bss-white) !important;
    border: 2px solid var(--bss-red) !important;
    border-radius: var(--bss-radius) !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: background-color var(--bss-transition), color var(--bss-transition) !important;
    padding: 8px 22px !important;
    font-size: 14px !important;
}

.wpProQuiz_button:hover,
.wpProQuiz_button2:hover,
input.wpProQuiz_button:hover,
input.wpProQuiz_button2:hover,
button.wpProQuiz_button:hover,
button.wpProQuiz_button2:hover {
    background-color: var(--bss-white) !important;
    color: var(--bss-red) !important;
}

/* Ergebnis-Aktionen: "Weiter" bleibt primär (rot); "Test erneut starten" / "Fragen ansehen"
   werden sekundär (Ghost) – schafft Hierarchie und gleiche Größe wie die Primär-Aktion. */
.learndash-wrapper .wpProQuiz_content .wpProQuiz_button_restartQuiz,
.learndash-wrapper .wpProQuiz_content .wpProQuiz_button_reShowQuestion {
    background-color: var(--bss-white) !important;
    color: var(--bss-red) !important;
    border: 2px solid var(--bss-red) !important;
    opacity: 1 !important;
}
.learndash-wrapper .wpProQuiz_content .wpProQuiz_button_restartQuiz:hover,
.learndash-wrapper .wpProQuiz_content .wpProQuiz_button_reShowQuestion:hover {
    background-color: var(--bss-red) !important;
    color: var(--bss-white) !important;
    opacity: 1 !important;
}

/* Quiz-Ergebnis: die LD-Punkte-/Prozent-Box ausblenden („Du hast X von Y
   Punkt(en) erreicht, (Z%)"). Diese Punkte sind LD-quizinterne Punkte und haben
   mit unserer Kampagnen-Punktezaehlung (serverseitig ueber Quiz-Events) nichts
   zu tun – fuer Nutzer nur verwirrend, ohne Mehrwert. Die Zeile „X von Y Fragen
   richtig beantwortet", „Deine Zeit" und die Buttons (Fragen ansehen / Test
   erneut starten) sind separate Elemente und bleiben erhalten. */
.learndash-wrapper .wpProQuiz_points,
.learndash-wrapper .wpProQuiz_graded_points {
    display: none !important;
}

/* Quiz-Start-Seite: wird per JS-Auto-Click übersprungen.
   CSS-Hiding hier weglassen – versteckter Button kann nicht geklickt werden */
.wpProQuiz_startPage {
    display: none !important;
}

/* "Continue"-Link nach Quiz – hardcodiertes #235af3 aus learndash.min.css (Spez. 1,2,0)
   Überschreiben erfordert höhere Spezifität + !important */
html body .learndash-wrapper .wpProQuiz_content a#quiz_continue_link,
html body .learndash-wrapper #quiz_continue_link {
    background: var(--bss-red) !important;
    background-color: var(--bss-red) !important;
    border: 2px solid var(--bss-red) !important;
    border-radius: var(--bss-radius) !important;
    color: var(--bss-white) !important;
    padding: 8px 22px !important;
    font-size: 14px !important;
    line-height: normal !important;
    width: auto !important;
    max-width: none !important;
}

html body .learndash-wrapper .wpProQuiz_content a#quiz_continue_link:hover,
html body .learndash-wrapper #quiz_continue_link:hover {
    background: var(--bss-white) !important;
    background-color: var(--bss-white) !important;
    color: var(--bss-red) !important;
}

/* Ergebnis-Seite */
.wpProQuiz_results,
.wpProQuiz_results * {
    color: var(--bss-black) !important;
}

.wpProQuiz_results h4 {
    color: var(--bss-black) !important;
}

/* "Test complete. Results are being recorded." */
.learndash-wrapper .ld-alert-info,
.ld-alert.ld-alert-info {
    background: #f9f9f9 !important;
    border-color: #d0d0d0 !important;
    color: var(--bss-black) !important;
}

.learndash-wrapper .ld-alert-info .ld-alert-icon,
.ld-alert.ld-alert-info svg {
    color: var(--bss-black) !important;
    fill: var(--bss-black) !important;
}


/* ============================================================
   KURS-TITEL MOBIL (Kadence .entry-title)
   Problem: Theme rendert den Kurstitel mobil mit 60px → lange Wörter
   ("Wiederbelebung") sprengen die ~278px-Spalte und werden per
   overflow-wrap MITTEN im Wort umgebrochen ("Wiederb / elebung").
   Fix: fluide, deutlich kleinere Schrift (clamp), saubere Silbentrennung
   (hyphens) als Sicherheitsnetz und etwas weniger Seitenabstand.
   Verifiziert live: 60px/288px-Höhe (4 kaputte Zeilen) → 31px/72px (2 saubere).
   ============================================================ */
@media (max-width: 768px) {
    /* Kurs-Landing-Titel (Kadence) UND Lektion-/Themen-/Quiz-Titel (LearnDash
       Focus-Mode: class-loses <h1> direkt in #ld-focus-content) – beide rendern
       mobil mit 60px. Gleiche fluide Verkleinerung. */
    html body .sfwd-courses-title .entry-title,
    html body #ld-focus-content > h1 {
        font-size: clamp(1.75rem, 8vw, 2.75rem) !important;
        line-height: 1.15 !important;
        -webkit-hyphens: auto !important;
        hyphens: auto !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }
    /* Etwas weniger Links/Rechts-Abstand im Kurs-Content auf Mobile */
    html body .type-sfwd-courses > .entry-content-wrap {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Doppeltes Seiten-Padding auf Mobile: sowohl #inner-wrap als auch
       .content-container.site-container tragen je --global-content-edge-padding
       (1.5rem=24px) → Inhalt sitzt 48px vom Rand. Das L/R-Padding von #inner-wrap
       entfernen; die .site-container-Stufe (24px) bleibt – damit liegt der Inhalt
       bündig mit dem Header (nutzt ebenfalls .site-container). Live geprüft:
       Titel/Text 48px → 24px, identisch zur Header-Ausrichtung. */
    html body #inner-wrap {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Konstanter Seiten-Rahmen auf Mobile (zentral). Das Theme traegt den
       24px-Abstand auf Mobile nicht mehr (--global-content-edge-padding = 0),
       wodurch Formulare, Login/Passwort, Dashboard, Beitreten, Rechtstexte etc.
       am Bildschirmrand klebten (0px), waehrend Header/Logo bei 24px sitzen.
       Abstand hier einmal auf die Content-Container-Stufe legen -> ALLE Seiten
       sitzen gleichmaessig 24px vom Rand, buendig zum Header. Bloecke/Karten mit
       eigenem Innen-Padding (z. B. Kampagnen-Karten) rahmen dadurch sauber statt
       zu kleben. Live gegen alle Templates geprueft: kein Overflow, keine
       Verdopplung (Kurs-Landing nutzt eigenen Container, Fokus-Modus separat). */
    html body .content-container.site-container {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}


/* Trenner-Punkt: per CSS bemessener Abstand statt Leerzeichen ums Glyph – die
   Theme-Schrift (Overpass) schluckt sonst optisch den Space hinter dem "·". */
.bss-sep { padding: 0 .45em; color: #c7c7c7; }


/* ============================================================
   LEADERBOARDS (Kampagnen-Detailseite) – mobil-first, Tabs
   ============================================================ */
.bss-lb {
    max-width: 480px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    margin: 0 0 28px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.bss-lb-head {
    font-weight: 700;
    font-size: 15px;
    padding: 12px 16px;
    background: #fafafa;
    border-bottom: 1px solid #eee;
    color: var(--bss-black);
}
.bss-lb-tabs {
    display: flex;
    gap: 0;
}
/* !important durchgehend, da .bss-lb-tab ein <button> ist und sonst die
   Theme-Button-Styles (roter Hover-Fill) durchschlagen. */
.bss-lb-tab {
    flex: 1 1 0;
    min-height: 46px;            /* großzügiges Touch-Ziel */
    padding: 10px 8px !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #555 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
}
.bss-lb-tab.is-active {
    color: var(--bss-red) !important;
    border-bottom-color: var(--bss-red) !important;
    background: #fff !important;
}
@media (hover: hover) {
    .bss-lb-tab:hover,
    .bss-lb-tab.is-active:hover {
        background: #faf3f2 !important;
        color: var(--bss-red) !important;
    }
}
.bss-lb-panel { padding: 6px 0 8px; }
.bss-lb-list { list-style: none; margin: 0; padding: 0; }
.bss-lb-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    border-top: 1px solid #f2f2f2;
}
.bss-lb-row:first-child { border-top: none; }
.bss-lb-rank {
    flex: 0 0 auto;
    min-width: 26px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: #888;
}
.bss-lb-name {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    font-size: 15px;
    color: var(--bss-black);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bss-lb-val {
    flex: 0 0 auto;
    font-weight: 700;
    font-size: 15px;
    color: var(--bss-red);
    white-space: nowrap;
}
.bss-lb-val small { font-weight: 500; font-size: 12px; color: #888; }
.bss-lb-empty { margin: 0; padding: 18px 16px; color: #888; font-size: 14px; text-align: center; }

/* Registrieren-/Login-Tabs auf der Beitreten-Seite – gleiche Optik wie die
   Bestenlisten-Tabs (Unterstreichung statt rotem Fill). Nutzt .bss-lb-tab(s). */
.bss-jointabs {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}
.bss-jointabs .bss-lb-tabs { border-bottom: 1px solid #eee; }
/* Tabs sitzen ganz oben am Card-Rand → Hover/Active-Hintergrund-Ecken sauber an
   den (kleineren) Card-Radius angleichen, statt der starken 10px-Rundung. */
.bss-jointabs .bss-lb-tab:first-child { border-top-left-radius: 6px; }
.bss-jointabs .bss-lb-tab:last-child  { border-top-right-radius: 6px; }
.bss-jointabs-panel { padding: 24px; }


/* ============================================================
   FOOTER-LOGO: bis 1024px Breite zu groß -> begrenzen + zentrieren
   (display:block/height:auto nötig, damit margin-inline:auto greift)
   ============================================================ */
@media (max-width: 1024px) {
    .footer-widget-area-inner .textwidget img {
        max-width: 200px;
        height: auto;
        display: block;
        margin-inline: auto;
    }
}


/* ============================================================
   "SO FUNKTIONIERT'S" – Erklärseite ([bss_so_funktionierts])
   ============================================================ */
.bss-howto { max-width: 860px; margin: 0 auto; }
.bss-howto h3 { font-size: 22px; margin: 40px 0 16px; color: var(--bss-black); }
.bss-howto h4 { font-size: 17px; margin: 0 0 12px; color: var(--bss-red); }

.bss-howto-hero {
    background: #fdf1ee;
    border-left: 4px solid var(--bss-red);
    border-radius: 8px;
    padding: 28px 32px;
}
.bss-howto-kicker {
    font-size: 13px; font-weight: 700; letter-spacing: .5px;
    text-transform: uppercase; color: var(--bss-red); margin: 0 0 6px;
}
.bss-howto-hero h2 { font-size: 28px; margin: 0 0 10px; color: var(--bss-black); }
.bss-howto-hero p { margin: 0 0 18px; font-size: 16px; line-height: 1.6; }

.bss-howto-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bss-howto-role { border: 1px solid #e5e7eb; border-radius: 8px; padding: 18px 20px; }
.bss-howto-role-tag {
    display: inline-block; background: var(--bss-red); color: var(--bss-white);
    font-size: 13px; font-weight: 700; padding: 3px 12px; border-radius: 9999px;
    margin-bottom: 10px;
}
.bss-howto-role p { margin: 0; font-size: 14px; }

ol.bss-howto-steps { counter-reset: bss-step; list-style: none; padding: 0; margin: 0; }
ol.bss-howto-steps > li {
    counter-increment: bss-step; position: relative;
    padding: 0 0 14px 44px; font-size: 15px; line-height: 1.55;
}
ol.bss-howto-steps > li::before {
    content: counter(bss-step); position: absolute; left: 0; top: 0;
    width: 30px; height: 30px; border-radius: 9999px;
    background: var(--bss-red); color: var(--bss-white);
    font-weight: 700; font-size: 14px;
    display: flex; align-items: center; justify-content: center;
}

.bss-howto-tracks { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 8px; }
.bss-howto-track { background: #f9f9f9; border-radius: 8px; padding: 22px 24px; }
.bss-howto-note { font-size: 13px; color: #666; margin: 10px 0 0; }

.bss-howto-callout {
    background: #eaf6ed; border-left: 4px solid #28a745;
    border-radius: 8px; padding: 16px 20px; margin: 28px 0;
    font-size: 15px; line-height: 1.55;
}

.bss-faq { display: flex; flex-direction: column; gap: 10px; }
.bss-faq-item {
    border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.bss-faq-item:hover { border-color: #d9dde2; }
.bss-faq-item[open] { border-color: #f0c9c0; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.bss-faq-item summary {
    cursor: pointer; padding: 15px 56px 15px 20px; font-weight: 600; font-size: 15px;
    list-style: none; position: relative; color: #1a1a1a;
    transition: background .15s, color .15s;
}
.bss-faq-item summary:hover { background: #fafafa; }
.bss-faq-item[open] summary { background: #fdf1ee; color: var(--bss-red); }
.bss-faq-item summary:focus-visible { outline: 2px solid var(--bss-red); outline-offset: -2px; }
.bss-faq-item summary::-webkit-details-marker { display: none; }
.bss-faq-item summary::after {
    content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: #f4f4f5; color: var(--bss-red); font-weight: 700; font-size: 19px; line-height: 1;
    transition: background .15s, color .15s;
}
.bss-faq-item[open] summary::after { content: "–"; background: var(--bss-red); color: #fff; }
.bss-faq-item p { margin: 0; padding: 4px 20px 18px; font-size: 14px; line-height: 1.65; color: #444; }

/* FAQ auf der (Kadence-gebauten) Seite /so-funktionierts/ (page-id 2298): dort ist die FAQ
   mit nativen WordPress-"Details"-Bloecken (<details class="wp-block-details">) umgesetzt, NICHT
   mit unserem [bss_so_funktionierts]-Shortcode. Wir stylen sie im selben Look – gescopt auf die
   Seite, damit andere Details-Bloecke/Accordions unberuehrt bleiben. (Bricht nur, falls die Seite
   eine neue ID bekommt – dann diese ID anpassen.) */
.page-id-2298 .entry-content details.wp-block-details {
    border: 1px solid #e5e7eb; border-radius: 10px; background: #fff;
    margin: 0 0 10px; padding: 0; overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.page-id-2298 .entry-content details.wp-block-details:hover { border-color: #d9dde2; }
.page-id-2298 .entry-content details.wp-block-details[open] { border-color: #f0c9c0; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.page-id-2298 .entry-content details.wp-block-details > summary {
    cursor: pointer; list-style: none; position: relative;
    padding: 15px 56px 15px 20px; font-weight: 600; font-size: 15px; color: #1a1a1a;
    transition: background .15s, color .15s;
}
.page-id-2298 .entry-content details.wp-block-details > summary::-webkit-details-marker { display: none; }
.page-id-2298 .entry-content details.wp-block-details > summary::marker { content: ""; }
.page-id-2298 .entry-content details.wp-block-details > summary:hover { background: #fafafa; }
.page-id-2298 .entry-content details.wp-block-details > summary:focus-visible { outline: 2px solid var(--bss-red,#eb5757); outline-offset: -2px; }
.page-id-2298 .entry-content details.wp-block-details[open] > summary { background: #fdf1ee; color: var(--bss-red,#eb5757); }
.page-id-2298 .entry-content details.wp-block-details > summary::after {
    content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: #f4f4f5; color: var(--bss-red,#eb5757); font-weight: 700; font-size: 19px; line-height: 1;
}
.page-id-2298 .entry-content details.wp-block-details[open] > summary::after { content: "–"; background: var(--bss-red,#eb5757); color: #fff; }
.page-id-2298 .entry-content details.wp-block-details > *:not(summary) {
    margin: 0; padding: 2px 20px 18px; font-size: 14px; line-height: 1.65; color: #444;
}

/* "So schaltet ihr eure Erste-Hilfe Tasche frei."-Element (Kadence-Block; Klasse manuell im
   Block vergeben). Negativer Overlap: margin-top immer, margin-bottom erst ab >=576px – darunter
   kein Overlap (verhindert Überlappen/Abschneiden auf dem Handy). !important, um Kadence-Standard-
   Aussenabstaende zu ueberschreiben. WICHTIG: im Block-Feld "Zusaetzliches CSS" duerfen KEINE
   margin-top/-bottom mehr stehen – die werden hier gesteuert. */
.bss-tasche-hero { margin-top: -50px !important; }
@media (min-width: 576px) {
    .bss-tasche-hero { margin-top: -100px !important; margin-bottom: -130px !important; }
}

/* „So funktioniert's"-Kurzanleitung (zugeklapptes <details>) – Einladungsseite + Dashboards */
.bss-howto-inline {
    border: 1px solid #d6e6f2;
    background: #f0f6fb;
    border-radius: 8px;
    margin: 0 0 16px;
    overflow: hidden;
}
.bss-howto-inline summary {
    cursor: pointer;
    list-style: none;
    position: relative;
    padding: 12px 40px 12px 16px;
    font-weight: 600;
    font-size: 14px;
    color: #0073aa;
}
.bss-howto-inline summary::-webkit-details-marker { display: none; }
.bss-howto-inline summary::before { content: "ℹ "; }
.bss-howto-inline summary::after {
    content: "+"; position: absolute; right: 16px; top: 9px;
    color: #0073aa; font-weight: 700; font-size: 20px; line-height: 1;
}
.bss-howto-inline[open] summary::after { content: "–"; }
.bss-howto-inline ol {
    margin: 0; padding: 0 18px 14px 38px; color: #333;
}
.bss-howto-inline li { font-size: 14px; line-height: 1.55; margin: 4px 0; }

.bss-howto-cta { text-align: center; margin: 40px 0 8px; }

@media (max-width: 640px) {
    .bss-howto-roles,
    .bss-howto-tracks { grid-template-columns: 1fr; }
}

/* ── GTranslate-Sprachumschalter im Hauptmenue (Widget-Typ "Dropdown" = natives <select>) ──
   Native <select class="gt_selector">: schiebt nichts auf, funktioniert Desktop + Mobil
   (OS-Auswahlmenue) und ist selbst lesbar (dunkler Text auf weissem Feld). Nur etwas Abstand
   und Ausrichtung – bewusst KEIN Umbau (frueheres Flaggen-Dropdown-/Popup-CSS entfernt). */
.bss-menu-gtranslate { margin-left: .7em; }
.bss-menu-gtranslate select.gt_selector { cursor: pointer; vertical-align: middle; max-width: 190px; }