/* ============================================================
   Theme „videri“ – videri INSTITUT (Mandant 226)
   ============================================================
   Erscheinungsbild nach https://videri-ev.de/ und dem Corporate Design
   von videri e.V. (v1.0, Stand 09/2026): Montserrat für Fließtext und
   Beschriftungen, Playfair Display (Stärke 400) für Überschriften,
   Rinde #4D423A als Leitfarbe (Knöpfe, Flächen), Kopf und Fuß in Sand
   #E8DED5 mit dunkler 1-px-Linie, Seitenhintergrund Creme #F9F3ED, Karten
   Weiß, Ocker #C08A45 nur als Akzent (höchstens 10 %). Keine Rundungen,
   keine Schatten, keine Verläufe. Hero = Bergbild der Website
   (images/videri-header.webp) unter der Überlagerung #B39C9C (52 %).

   Die Seiten-Stylesheets (css/frontend/*.css) werden NACH diesem Theme
   geladen; ihre Regeln werden hier mit vorangestelltem „body“ (höhere
   Spezifität) überschrieben. Bootstrap-Komponenten laufen über die
   Bootstrap-Variablen (--bs-…).
   ============================================================ */

:root {
    /* Farbtokens des Corporate Designs (videri e.V., v1.0) */
    --videri-rinde: #4D423A;   /* Dunkelbraun: Primär, Knöpfe, Flächen */
    --videri-tinte: #2C2C2C;   /* Text */
    --videri-stein: #5C534B;   /* Fließtext, Labels */
    --videri-ocker: #C08A45;   /* Akzent, höchstens 10 % */
    --videri-sand: #E8DED5;    /* Linien, Rahmen; Kopf und Fuß */
    --videri-nebel: #EEE7E1;   /* Hover, Fläche */
    --videri-creme: #F9F3ED;   /* Hintergrund */
    --videri-weiss: #FFFFFF;   /* Basis, Karten */
    --videri-feldlinie: #C4B8AC; /* „Linie“: Formularfelder */
    --videri-bildton: #B39C9C;   /* Überlagerung des Hero-Bildes (videri-ev.de) */

    --videri-display: "Playfair Display", Georgia, serif;
    --videri-text: "Montserrat", "Helvetica Neue", Arial, sans-serif;

    --videri-space-1: 8px;
    --videri-space-2: 16px;
    --videri-space-3: 24px;
    --videri-space-4: 40px;
    --videri-space-5: 64px;
    --videri-space-6: 96px;

    --videri-maxwidth: 1160px;
    --videri-linie: 1px solid var(--videri-sand);

    /* Höhe des Kopfes wie auf der Website (10 % der Fensterhöhe) */
    --videri-kopfhoehe: clamp(72px, 10vh, 100px);

    /* Tokens der Standard-Stylesheets (css/frontend/*.css) */
    --primary-color: var(--videri-rinde);
    --primary-dark: var(--videri-tinte);
    --primary-light: var(--videri-rinde); /* gleiche Farbe: Verläufe werden zu Flächen */
    --secondary-color: var(--videri-stein);
    --accent-color: var(--videri-rinde);
    --success-color: #4f7a4a;
    --danger-color: #b04a3a;
    --warning-color: var(--videri-ocker);
    --info-color: var(--videri-stein);
    --light-bg: var(--videri-creme);
    --white-bg: #ffffff;
    --dark-text: var(--videri-tinte);
    --gray-text: var(--videri-stein);
    --light-text: var(--videri-sand);
    --border-color: var(--videri-sand);
    --divider-color: var(--videri-stein);
    --navbar-gradient: var(--videri-sand);
    --hero-gradient: var(--videri-rinde);
    --text-gradient: var(--videri-tinte);

    --font-family: var(--videri-text);
    --font-serif: var(--videri-display);
    --font-size-base: 1rem;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 600;
    --line-height-base: 1.7;

    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;

    /* Keine Rundungen */
    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 0;
    --radius-xl: 0;
    --radius-2xl: 0;
    --radius-full: 0;

    /* Keine Schatten – nur Überlagerungen (Menü, Dialog) heben sich ab */
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;
    --shadow-navbar: none;
    --shadow-overlay: 0 12px 40px rgba(44, 44, 44, 0.18);

    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* Versalien-Beschriftung (Menü, Knöpfe, Labels) */
    --versal-size: 12px;
    --versal-spacing: 0.14em;

    /* Bootstrap */
    --bs-body-font-family: var(--font-family);
    --bs-body-font-size: 1rem;
    --bs-body-line-height: 1.7;
    --bs-body-color: var(--videri-tinte);
    --bs-body-bg: var(--videri-weiss);
    --bs-heading-color: var(--videri-tinte);
    --bs-secondary-color: var(--videri-stein);
    --bs-link-color: var(--videri-rinde);
    --bs-link-color-rgb: 77, 66, 58;
    --bs-link-hover-color: var(--videri-tinte);
    --bs-link-hover-color-rgb: 44, 44, 44;
    --bs-primary: var(--videri-rinde);
    --bs-primary-rgb: 77, 66, 58;
    --bs-secondary: var(--videri-stein);
    --bs-secondary-rgb: 92, 83, 75;
    --bs-dark: var(--videri-tinte);
    --bs-dark-rgb: 44, 44, 44;
    --bs-light: var(--videri-creme);
    --bs-light-rgb: 249, 243, 237;
    --bs-success-rgb: 79, 122, 74;
    --bs-danger-rgb: 176, 74, 58;
    --bs-warning-rgb: 192, 138, 69;
    --bs-info-rgb: 92, 83, 75;
    --bs-border-color: var(--videri-sand);
    --bs-border-radius: 0;
    --bs-border-radius-sm: 0;
    --bs-border-radius-lg: 0;
    --bs-border-radius-xl: 0;
    --bs-border-radius-xxl: 0;
    --bs-border-radius-pill: 0;
    --bs-box-shadow: none;
    --bs-box-shadow-sm: none;
    --bs-box-shadow-lg: none;
    --bs-focus-ring-color: rgba(77, 66, 58, 0.25);
}

/* ============================================================
   Grundlagen
   ============================================================ */
html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: 400;
    line-height: var(--line-height-base);
    color: var(--videri-tinte);
    /* Hintergrund Creme, Karten und Felder bleiben Weiß (--bs-body-bg) */
    background: var(--videri-creme);
}

/* Inhaltsbreite des Corporate Designs: 1160 px, 20–28 px Rand */
@media (min-width: 1200px) {
    body .container {
        max-width: calc(var(--videri-maxwidth) + 2 * 28px);
    }
}

body .container {
    padding-left: clamp(20px, 4vw, 28px);
    padding-right: clamp(20px, 4vw, 28px);
}

a {
    color: var(--videri-rinde);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--transition-base);
}

a:hover {
    color: var(--videri-tinte);
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    outline: 2px solid var(--videri-rinde);
    outline-offset: 2px;
    box-shadow: none;
}

input,
textarea,
button,
select {
    font-family: inherit;
}

::selection {
    background: var(--videri-sand);
    color: var(--videri-tinte);
}

/* ------------------------------------------------------------
   Überschriften – H1/H2/H3 Playfair Display 400, H4–H6 Versalien
   ------------------------------------------------------------ */
h1, h2, h3,
.h1, .h2, .h3,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--font-serif);
    font-weight: 400 !important; /* auch gegen .fw-bold der Vorlagen */
    color: var(--videri-tinte);
    letter-spacing: 0;
    text-transform: none;
}

h1, .h1,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-size: clamp(30px, 3.4vw, 42px);
    line-height: 1.2;
    margin-bottom: 24px;
}

h2, .h2 {
    font-size: clamp(26px, 2.8vw, 34px);
    line-height: 1.3;
    margin-bottom: 20px;
}

h3, .h3 {
    font-size: clamp(22px, 2.2vw, 28px);
    line-height: 1.3;
    margin-bottom: 16px;
}

h4, h5, h6,
.h4, .h5, .h6 {
    font-family: var(--font-family);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--videri-rinde);
    line-height: 1.5;
}

h4, .h4 {
    font-size: 15px;
    letter-spacing: 0.2em;
    margin-bottom: 14px;
}

h5, .h5 {
    font-size: 13px;
    letter-spacing: 0.16em;
    margin-bottom: 12px;
}

h6, .h6 {
    font-size: 12px;
    letter-spacing: 0.16em;
    margin-bottom: 10px;
}

/* Einleitungstexte wie auf der Website in Playfair */
.lead {
    font-family: var(--font-serif);
    font-size: clamp(19px, 2.2vw, 24px);
    font-weight: 400;
    line-height: 1.5;
    color: var(--videri-tinte);
}

p {
    text-wrap: pretty;
}

.text-muted {
    color: var(--videri-stein) !important;
}

hr {
    border-top: 1px solid var(--videri-sand);
    opacity: 1;
}

.section-title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(26px, 2.8vw, 34px);
    margin-bottom: var(--spacing-md);
    color: var(--videri-tinte);
}

.text-gradient {
    color: var(--videri-tinte);
}

/* Versalien-Beschriftung (wie „UNSER ANGEBOT“ auf der Website) */
.videri-label,
.form-label,
legend {
    font-size: var(--versal-size);
    letter-spacing: var(--versal-spacing);
    text-transform: uppercase;
    color: var(--videri-rinde);
    font-weight: 400;
}

/* ============================================================
   Knöpfe – .knopf der Website: Versalien, Braun, keine Rundung
   ============================================================ */
.btn {
    --bs-btn-font-size: var(--versal-size);
    --bs-btn-font-weight: 500;
    --bs-btn-line-height: 1.3;
    --bs-btn-padding-y: 14px;
    --bs-btn-padding-x: 22px;
    --bs-btn-border-radius: 0;
    --bs-btn-focus-box-shadow: none;
    letter-spacing: var(--versal-spacing);
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.btn-sm {
    --bs-btn-padding-y: 10px;
    --bs-btn-padding-x: 16px;
    --bs-btn-font-size: 11px;
}

.btn-lg {
    --bs-btn-padding-y: 16px;
    --bs-btn-padding-x: 28px;
    --bs-btn-font-size: 13px;
}

.btn-primary,
.btn-dark,
.btn-success {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--videri-rinde);
    --bs-btn-border-color: var(--videri-rinde);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--videri-tinte);
    --bs-btn-hover-border-color: var(--videri-tinte);
    --bs-btn-focus-shadow-rgb: 77, 66, 58;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--videri-tinte);
    --bs-btn-active-border-color: var(--videri-tinte);
    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: var(--videri-rinde);
    --bs-btn-disabled-border-color: var(--videri-rinde);
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-dark,
.btn-outline-success,
.btn-light,
.btn-secondary {
    --bs-btn-color: var(--videri-rinde);
    --bs-btn-bg: #ffffff;
    --bs-btn-border-color: var(--videri-rinde);
    --bs-btn-hover-color: var(--videri-tinte);
    --bs-btn-hover-bg: var(--videri-creme);
    --bs-btn-hover-border-color: var(--videri-rinde);
    --bs-btn-focus-shadow-rgb: 77, 66, 58;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--videri-rinde);
    --bs-btn-active-border-color: var(--videri-rinde);
    --bs-btn-disabled-color: var(--videri-stein);
    --bs-btn-disabled-bg: #ffffff;
    --bs-btn-disabled-border-color: var(--videri-feldlinie);
}

.btn-outline-secondary {
    --bs-btn-border-color: var(--videri-feldlinie);
}

.btn-danger,
.btn-outline-danger {
    --bs-btn-focus-shadow-rgb: 176, 74, 58;
}

.btn-danger {
    --bs-btn-bg: #b04a3a;
    --bs-btn-border-color: #b04a3a;
    --bs-btn-hover-bg: #8f3a2d;
    --bs-btn-hover-border-color: #8f3a2d;
    --bs-btn-active-bg: #8f3a2d;
    --bs-btn-active-border-color: #8f3a2d;
}

.btn-outline-danger {
    --bs-btn-color: #b04a3a;
    --bs-btn-border-color: #b04a3a;
    --bs-btn-hover-bg: #b04a3a;
    --bs-btn-hover-border-color: #b04a3a;
}

.btn-link {
    letter-spacing: 0;
    text-transform: none;
    --bs-btn-color: var(--videri-rinde);
    --bs-btn-hover-color: var(--videri-tinte);
}

.btn-close {
    border-radius: 0;
}

/* ============================================================
   Formulare – 1 px Linie #C4B8AC, Fokus Braun, keine Schatten
   ============================================================ */
.form-control,
.form-select,
.form-floating > .form-control,
.form-floating > .form-select,
body .form-floating > .form-control {
    border: 1px solid var(--videri-feldlinie);
    border-radius: 0;
    color: var(--videri-tinte);
    background-color: #ffffff;
    box-shadow: none;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--videri-rinde);
    box-shadow: none;
    color: var(--videri-tinte);
}

.form-control::placeholder {
    color: var(--videri-feldlinie);
}

.form-check-input {
    width: 1.2em;
    height: 1.2em;
    margin-top: 0.2em;
    border: 1px solid var(--videri-feldlinie);
    border-radius: 0 !important;
    box-shadow: none;
}

.form-check-input:focus {
    border-color: var(--videri-rinde);
    box-shadow: none;
}

.form-check-input:checked {
    background-color: var(--videri-rinde);
    border-color: var(--videri-rinde);
}

.form-check-input[type="radio"] {
    border-radius: 50% !important;
}

.form-floating > label {
    color: var(--videri-stein);
}

.input-group-text {
    border: 1px solid var(--videri-feldlinie);
    border-radius: 0;
    background: var(--videri-creme);
    color: var(--videri-stein);
}

/* ============================================================
   Bootstrap-Bausteine: Karten, Meldungen, Abzeichen, Menüs
   ============================================================ */
.card,
body .card {
    --bs-card-border-color: var(--videri-sand);
    --bs-card-border-radius: 0;
    --bs-card-inner-border-radius: 0;
    --bs-card-cap-bg: #ffffff;
    border: 1px solid var(--videri-sand);
    box-shadow: none !important; /* gegen .shadow-sm / .shadow-lg */
}

.card-header {
    border-bottom: 1px solid var(--videri-sand);
}

.card-footer {
    border-top: 1px solid var(--videri-sand);
}

.card-header.bg-primary,
.bg-primary {
    background-color: var(--videri-rinde) !important;
}

.bg-light {
    background-color: var(--videri-creme) !important;
}

.border-primary {
    border-color: var(--videri-rinde) !important;
}

.badge {
    --bs-badge-border-radius: 0;
    --bs-badge-font-weight: 500;
    letter-spacing: 0.08em;
}

.alert {
    --bs-alert-border-radius: 0;
    border: 1px solid var(--videri-feldlinie);
    box-shadow: none;
    animation: none;
    font-size: 14px;
}

.alert-success,
.alert-info,
.alert-notice,
.alert-secondary,
.alert-light {
    --bs-alert-color: var(--videri-tinte);
    --bs-alert-bg: var(--videri-creme);
    --bs-alert-border-color: var(--videri-feldlinie);
    --bs-alert-link-color: var(--videri-rinde);
}

.alert-warning {
    --bs-alert-color: var(--videri-tinte);
    --bs-alert-bg: var(--videri-creme);
    --bs-alert-border-color: var(--videri-ocker);
    --bs-alert-link-color: var(--videri-rinde);
}

.alert-danger {
    --bs-alert-color: var(--videri-tinte);
    --bs-alert-bg: #ffffff;
    --bs-alert-border-color: var(--videri-ocker);
    --bs-alert-link-color: var(--videri-rinde);
}

/* Buchungsbestätigung: Braun wie der Fuß der Website */
.alert-order-success {
    background: var(--videri-rinde);
    color: #ffffff;
    border: 0;
    border-radius: 0;
    padding: var(--spacing-lg) var(--spacing-xl);
    box-shadow: none;
    animation: none;
    transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.alert-order-success.fade-out {
    opacity: 0;
    transform: translateY(-20px);
}

.alert-order-success .alert-content {
    display: flex;
    align-items: flex-start;
}

.alert-order-success .alert-icon {
    font-size: 1.5rem;
    margin-right: var(--spacing-md);
    flex-shrink: 0;
    color: var(--videri-sand);
}

.alert-order-success .alert-text h4 {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 24px;
    letter-spacing: 0;
    text-transform: none;
    color: #ffffff;
    margin-bottom: var(--spacing-sm);
}

.alert-order-success .alert-text p {
    margin: 0;
    color: var(--videri-sand);
    line-height: var(--line-height-base);
}

.dropdown-menu {
    --bs-dropdown-border-radius: 0;
    --bs-dropdown-border-color: var(--videri-feldlinie);
    --bs-dropdown-link-color: var(--videri-tinte);
    --bs-dropdown-link-hover-color: var(--videri-tinte);
    --bs-dropdown-link-hover-bg: var(--videri-nebel);
    --bs-dropdown-link-active-color: #ffffff;
    --bs-dropdown-link-active-bg: var(--videri-rinde);
    --bs-dropdown-header-color: var(--videri-rinde);
    --bs-dropdown-divider-bg: var(--videri-sand);
    box-shadow: var(--shadow-overlay);
    font-size: 14px;
}

.dropdown-header {
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
}

.breadcrumb {
    --bs-breadcrumb-divider-color: var(--videri-feldlinie);
    font-size: var(--versal-size);
    letter-spacing: var(--versal-spacing);
    text-transform: uppercase;
}

.table {
    --bs-table-border-color: var(--videri-sand);
}

.modal {
    --bs-modal-border-radius: 0;
    --bs-modal-inner-border-radius: 0;
    --bs-modal-border-color: var(--videri-feldlinie);
    --bs-modal-box-shadow: 0 20px 60px rgba(44, 44, 44, 0.25);
}

.list-group {
    --bs-list-group-border-radius: 0;
    --bs-list-group-border-color: var(--videri-sand);
}

.pagination {
    --bs-pagination-border-radius: 0;
    --bs-pagination-color: var(--videri-rinde);
    --bs-pagination-border-color: var(--videri-sand);
    --bs-pagination-hover-bg: var(--videri-creme);
    --bs-pagination-hover-color: var(--videri-tinte);
    --bs-pagination-active-bg: var(--videri-rinde);
    --bs-pagination-active-border-color: var(--videri-rinde);
    --bs-pagination-focus-box-shadow: none;
}

.rounded-circle {
    border-radius: 50% !important; /* Profilbilder bleiben rund */
}

/* ============================================================
   Kopfzeile – wie der Kopf von videri-ev.de: Sand über die volle
   Breite, Menü in Montserrat ohne Versalien, unten eine dunkle
   1-px-Linie; aktiver Punkt unterstrichen. Der Inhalt sitzt im
   .container der Seite, damit Logo und Warenkorb auch auf breiten
   Bildschirmen mit Hero-Text und Karten fluchten.
   ============================================================ */
.videri-kopf {
    background: var(--videri-sand);
    border-bottom: 1px solid var(--videri-tinte);
    z-index: 1020;
}

.videri-kopf .navbar {
    min-height: var(--videri-kopfhoehe);
    padding: 12px 0;
    --bs-navbar-toggler-focus-width: 0;
}

.videri-kopf .navbar > .container {
    gap: 12px clamp(24px, 4vw, var(--videri-space-5));
    flex-wrap: wrap;
}

.videri-kopf .navbar-brand {
    width: clamp(130px, 30vw, 170px);
    flex-shrink: 0;
    padding: 0;
    margin: 0;
}

.videri-kopf .navbar-brand img {
    display: block;
    width: 100%;
    height: auto;
}

.videri-kopf .nav-link {
    font-size: clamp(16px, 1.35vw, 20px);
    font-weight: 400;
    letter-spacing: -0.3px;
    line-height: 1.2;
    color: var(--videri-tinte) !important;
    text-decoration: none;
    padding: 6px 0 !important;
    margin: 0 clamp(20px, 3.4vw, 50px) 0 0;
    transition: color var(--transition-base);
}

.videri-kopf .videri-kopf-konto .nav-link {
    margin: 0 0 0 clamp(20px, 2.4vw, 36px);
}

.videri-kopf .nav-link:hover,
.videri-kopf .nav-link:focus-visible,
.videri-kopf .nav-item.show > .nav-link {
    color: var(--videri-stein) !important;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 6px;
}

.videri-kopf .nav-link.active {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 6px;
}

.videri-kopf .nav-link.dropdown-toggle::after {
    vertical-align: 0.15em;
}

/* Menüs im Kopf wie die Untermenüs der Website */
.videri-kopf .dropdown-menu {
    --bs-dropdown-bg: var(--videri-nebel);
    --bs-dropdown-border-color: var(--videri-tinte);
    --bs-dropdown-link-hover-bg: var(--videri-sand);
    --bs-dropdown-link-active-bg: var(--videri-sand);
    --bs-dropdown-link-active-color: var(--videri-tinte);
    --bs-dropdown-divider-bg: var(--videri-tinte);
    --bs-dropdown-header-color: var(--videri-stein);
}

/* Warenkorb mit Inhalt: Knopf in Rinde */
.videri-kopf .videri-nav-knopf {
    margin-left: clamp(20px, 2.4vw, 36px);
}

.btn-cart {
    --bs-btn-padding-y: 10px;
    --bs-btn-padding-x: 16px;
    --bs-btn-font-size: 15px;
    --bs-btn-color: var(--videri-weiss);
    --bs-btn-bg: var(--videri-rinde);
    --bs-btn-border-color: var(--videri-rinde);
    --bs-btn-hover-color: var(--videri-weiss);
    --bs-btn-hover-bg: var(--videri-tinte);
    --bs-btn-hover-border-color: var(--videri-tinte);
    --bs-btn-active-color: var(--videri-weiss);
    --bs-btn-active-bg: var(--videri-tinte);
    --bs-btn-active-border-color: var(--videri-tinte);
    white-space: nowrap;
}

.cart-badge {
    font-weight: 600;
}

/* Menüknopf (schmale Bildschirme): Striche wie auf der Website */
.videri-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0;
    padding: 0;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    font-size: 24px;
    color: var(--videri-tinte);
    background: transparent;
    line-height: 1;
}

.videri-menu-btn:hover {
    color: var(--videri-stein);
}

.videri-menu-btn:focus {
    box-shadow: none;
}

.videri-menu-btn:focus-visible {
    outline: 2px solid var(--videri-rinde);
    outline-offset: 2px;
}

.videri-menu-btn[aria-expanded="true"] .fa-bars::before {
    content: "\f00d"; /* Kreuz zum Schließen */
}

@media (max-width: 991.98px) {
    .videri-kopf .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--videri-nebel);
        border-top: 1px solid var(--videri-tinte);
        border-bottom: 1px solid var(--videri-tinte);
        padding: 0 clamp(20px, 4vw, 28px); /* wie der Rand von .container */
        max-height: calc(100vh - 80px);
        overflow-y: auto;
    }

    .videri-kopf .nav-link {
        display: block;
        padding: 18px 0 !important;
        margin: 0 !important;
        border-bottom: 1px solid var(--videri-tinte);
        font-size: 17px;
    }

    .videri-kopf .navbar-nav:last-child > .nav-item:last-child > .nav-link {
        border-bottom: 0;
    }

    .videri-kopf .videri-nav-knopf {
        margin: 16px 0;
    }

    .videri-kopf .navbar-nav .dropdown-menu {
        border: 0;
        box-shadow: none;
        padding-left: 14px;
        background: transparent;
    }
}

/* ============================================================
   Hero-Flächen – Bergbild der Website (images/videri-header.webp)
   unter warmer Überlagerung, Schrift Weiß, linksbündig
   ============================================================ */
body .hero-section,
body .course-detail-hero,
body .speaker-profile-header,
body .venue-profile-header {
    background: var(--videri-rinde) url('../images/videri-header.webp') center 62% / cover no-repeat;
    color: var(--videri-weiss);
    padding: clamp(48px, 9vw, var(--videri-space-6)) 0;
    margin-bottom: clamp(32px, 6vw, var(--videri-space-5));
    border-radius: 0;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Überlagerung wie auf videri-ev.de (#B39C9C, 52 %) – gibt dem Bild den warmen Ton */
body .hero-section::before,
body .course-detail-hero::before,
body .speaker-profile-header::before,
body .venue-profile-header::before {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    background: var(--videri-bildton);
    opacity: 0.52;
    z-index: -1;
    animation: none;
}

body .hero-section .py-5 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

/* Links ausgerichtet wie der Hero der Website */
body .hero-section .text-center {
    text-align: left !important;
}

body .hero-section .mx-auto {
    margin-left: 0 !important;
}

body .hero-section h1,
body .course-detail-hero h1,
body .speaker-profile-name,
body .venue-profile-name {
    font-family: var(--videri-display);
    font-weight: 400 !important;
    font-size: clamp(32px, 4.2vw, 56px);
    line-height: 1.1;
    color: var(--videri-weiss);
    margin-bottom: var(--videri-space-2);
}

/* Unterzeile wie „Gesehen sein, sichtbar werden …“: Montserrat */
body .hero-section .lead,
body .course-detail-hero .lead {
    font-family: var(--videri-text);
    font-size: clamp(17px, 1.6vw, 21px);
    font-weight: 400;
    line-height: 1.45;
    color: var(--videri-weiss);
    max-width: 40em;
}

body .hero-section p.lead {
    opacity: 1 !important;
    margin-bottom: 0 !important;
}

/* Hinweis für angemeldete Admins im Hero: ruhig statt Alarmrot */
body .hero-section h3 {
    font-family: var(--videri-text) !important;
    font-size: var(--versal-size) !important;
    letter-spacing: var(--versal-spacing);
    text-transform: uppercase;
    color: var(--videri-rinde) !important;
    background: var(--videri-creme) !important;
    border: var(--videri-linie);
    border-radius: 0 !important;
    padding: 12px 18px !important;
    margin-top: var(--videri-space-3);
}

body .hero-section h3 a {
    color: var(--videri-rinde) !important;
    font-weight: 600 !important;
}

body .course-detail-hero .breadcrumb-item a,
body .course-detail-hero .breadcrumb-item span,
body .course-detail-hero .breadcrumb-item.active {
    color: var(--videri-weiss) !important;
    text-decoration: none;
}

body .course-detail-hero .breadcrumb-item + .breadcrumb-item::before {
    color: var(--videri-sand);
}

body .course-detail-hero .breadcrumb-item a:hover {
    color: var(--videri-weiss) !important;
    text-decoration: underline;
}

/* ============================================================
   Kursübersicht (css/frontend/course-index.css)
   ============================================================ */

/* --- Filter ---------------------------------------------------- */
body .filter-sidebar {
    background: #ffffff;
    border: 1px solid var(--videri-sand);
    border-radius: 0;
    box-shadow: none;
    padding: 24px;
    top: calc(var(--videri-kopfhoehe) + 16px); /* unter dem Kopf */
}

body .filter-sidebar .filter-title {
    font-family: var(--font-family);
    font-size: var(--versal-size);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--videri-rinde);
    margin-bottom: 18px;
}

body .filter-group {
    border-top: 1px solid var(--videri-sand);
    padding-top: 16px;
    margin-bottom: 16px;
}

body .filter-group-title {
    font-size: var(--versal-size);
    letter-spacing: var(--versal-spacing);
    text-transform: uppercase;
    font-weight: 400;
    color: var(--videri-rinde);
    margin-bottom: 8px;
}

body .filter-group-title a {
    color: var(--videri-rinde) !important;
}

body .filter-option {
    font-size: 15px;
    padding: 6px 0;
}

body .filter-option:hover {
    color: var(--videri-rinde);
    transform: none;
}

body .filter-option input[type="checkbox"] {
    accent-color: var(--videri-rinde);
}

body .filter-badge {
    background: var(--videri-creme);
    color: var(--videri-stein);
    border-radius: 0;
    font-size: 12px;
}

body .btn-reset-filters {
    background: #ffffff;
    border: 1px solid var(--videri-rinde);
    border-radius: 0;
    color: var(--videri-rinde);
    font-weight: 500;
}

body .btn-reset-filters:hover {
    background: var(--videri-nebel);
    color: var(--videri-tinte);
}

/* --- Abschnitte -------------------------------------------------- */
body .category-section {
    margin-bottom: clamp(40px, 6vw, 64px);
}

body .category-header {
    flex-wrap: wrap;
    gap: 12px 16px;
    border-bottom: 1px solid var(--videri-sand);
    padding-bottom: 14px;
    margin-bottom: 28px;
}

body .category-name {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(26px, 2.8vw, 34px);
    line-height: 1.3;
    color: var(--videri-tinte);
}

/* Zähler wie .geplant auf der Website: Versalien mit dünnem Rahmen */
body .category-count {
    background: none;
    color: var(--videri-stein);
    border: 1px solid var(--videri-sand);
    border-radius: 0;
    font-size: var(--versal-size);
    letter-spacing: var(--versal-spacing);
    text-transform: uppercase;
    font-weight: 400;
    padding: 9px 15px;
    margin-left: 0;
    white-space: nowrap;
}

/* --- Kurskarten: eckig, 1 px Sand, Hover Braun --------------------- */
body .course-card {
    background: #ffffff;
    border: 1px solid var(--videri-sand);
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    transition: border-color var(--transition-base);
}

body .course-card:hover {
    border-color: var(--videri-rinde);
    transform: none;
    box-shadow: none;
}

body .course-card:hover .course-image {
    transform: none;
}

body .course-image-wrapper {
    background: var(--videri-sand);
    border-radius: 0;
}

body .course-image {
    border-radius: 0;
    height: 220px;
}

body .course-image-wrapper .fa-book {
    color: var(--videri-rinde) !important;
    opacity: 0.35 !important;
}

body .course-badge {
    background: #ffffff;
    color: var(--videri-rinde);
    border: 1px solid var(--videri-sand);
    border-radius: 0;
    box-shadow: none;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 6px 10px;
}

body .course-price {
    background: var(--videri-rinde);
    color: #ffffff;
    border-radius: 0;
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 18px;
    padding: 6px 12px;
}

body .course-body {
    padding: 24px 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

body .course-title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 24px;
    line-height: 1.25;
    color: var(--videri-tinte);
    margin: 0;
    -webkit-line-clamp: 3;
}

body .course-subtitle {
    color: var(--videri-stein);
    font-size: 15px;
    margin: 0;
}

body .course-meta {
    font-size: 14px;
    color: var(--videri-stein);
    margin: 4px 0 10px;
}

body .course-meta-item i {
    color: var(--videri-rinde);
}

/* „Details ansehen“ wie die Versalien-Zeile am Kartenfuß der Website */
body .btn-view-course {
    margin-top: auto;
    width: 100%;
    background: none;
    border: 0;
    border-top: 1px solid var(--videri-sand);
    border-radius: 0;
    color: var(--videri-rinde);
    font-size: var(--versal-size);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 400;
    text-align: left;
    padding: 16px 0 0;
    text-decoration: none;
}

body .btn-view-course:hover,
body .btn-view-course:focus {
    color: var(--videri-tinte);
    text-decoration: underline;
    text-underline-offset: 3px;
    transform: none;
    box-shadow: none;
    background: none;
}

body .empty-state,
body .empty-cart {
    background: var(--videri-weiss);
    border: 1px solid var(--videri-sand);
    border-radius: 0;
}

body .empty-state i,
body .empty-cart > i {
    color: var(--videri-feldlinie);
}

/* ============================================================
   Kursseite (css/frontend/course-show.css)
   ============================================================ */
body .course-main-image {
    border-radius: 0;
    box-shadow: none;
}

body .course-detail-card {
    background: #ffffff;
    border: 1px solid var(--videri-sand);
    border-radius: 0;
    box-shadow: none;
    padding: clamp(20px, 4vw, 32px);
}

body .course-detail-card h2 {
    font-size: clamp(22px, 2.2vw, 28px);
}

body .course-detail-card h5 {
    color: var(--videri-rinde);
}

body .info-item {
    background: var(--videri-creme);
    border-radius: 0;
    transition: none;
}

body .info-item:hover {
    background: var(--videri-creme);
    color: inherit;
    transform: none;
    box-shadow: none;
}

body .info-item:hover .info-icon {
    background: var(--videri-rinde);
    color: #ffffff;
}

body .info-icon,
body .contact-icon {
    background: var(--videri-rinde);
    color: #ffffff;
    border-radius: 0;
}

body .info-content h6,
body .info-label {
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--videri-rinde);
    opacity: 1;
}

body .info-content p,
body .info-value {
    font-weight: 500;
    font-size: 1rem;
}

/* Preisfeld wie .anm-termin der Website: Creme, Playfair-Betrag */
body .price-box {
    background: var(--videri-weiss);
    color: var(--videri-tinte);
    border: 1px solid var(--videri-sand);
    border-radius: 0;
    text-align: left;
    padding: 24px;
    top: calc(var(--videri-kopfhoehe) + 16px); /* unter dem Kopf */
}

body .price-box h3 {
    font-family: var(--font-family);
    font-size: var(--versal-size);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--videri-rinde);
}

body .price-amount {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 40px;
    line-height: 1.1;
    color: var(--videri-rinde);
    margin: 10px 0;
}

body .price-box .small,
body .price-box small {
    color: var(--videri-stein);
}

body .btn-add-to-cart {
    background: var(--videri-rinde);
    color: #ffffff;
    border: 1px solid var(--videri-rinde);
    border-radius: 0;
    font-size: var(--versal-size);
    letter-spacing: var(--versal-spacing);
    text-transform: uppercase;
    font-weight: 500;
    padding: 14px 22px;
}

body .btn-add-to-cart:hover,
body .btn-add-to-cart:focus {
    background: var(--videri-tinte);
    border-color: var(--videri-tinte);
    color: #ffffff;
    transform: none;
    box-shadow: none;
}

body .btn-add-to-cart:disabled,
body .btn-add-to-cart.disabled {
    background: var(--videri-feldlinie);
    border-color: var(--videri-feldlinie);
    color: #ffffff;
}

body .mobile-sticky-price {
    box-shadow: var(--shadow-overlay);
}

body .occurrence-selector,
body .occurrence-option {
    border: 1px solid var(--videri-feldlinie);
    border-radius: 0;
}

body .occurrence-option:hover {
    border-color: var(--videri-rinde);
    background: var(--videri-nebel);
}

body .occurrence-option.selected {
    background: var(--videri-rinde);
    border-color: var(--videri-rinde);
    color: #ffffff;
}

body .time-item {
    background: var(--videri-creme);
    border-radius: 0;
}

body .time-item:hover {
    background: var(--videri-sand);
}

body .time-item .dropdown .btn {
    border-radius: 0;
}

body .time-item .dropdown .btn:hover {
    background: var(--videri-rinde);
    border-color: var(--videri-rinde);
    color: #ffffff;
}

body .dropdown-menu .dropdown-item:hover {
    background: var(--videri-nebel);
    transform: none;
}

body .related-courses-section {
    border-top: 1px solid var(--videri-sand);
}

body .gallery-item-modal {
    border-radius: 0;
}

body .gallery-item-modal:hover {
    transform: none;
    opacity: 0.85;
}

body .fe-course-template-calendar .fe-cal-slot,
body .fe-course-template-calendar .fe-cal-legend span {
    border-radius: 0; /* Statusfarben des Kalenders bleiben */
}

body .fe-course-template-calendar .fe-cal-cell {
    background: var(--videri-creme);
    border-color: var(--videri-sand);
}

/* ============================================================
   Warenkorb (css/frontend/cart.css)
   ============================================================ */
body .cart-item {
    background: #ffffff;
    border: 1px solid var(--videri-sand);
    border-radius: 0;
    box-shadow: none;
    padding: 24px;
    transition: border-color var(--transition-base);
}

body .cart-item:hover {
    border-color: var(--videri-rinde);
    box-shadow: none;
}

body .cart-item h5 {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 22px;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    color: var(--videri-tinte);
}

body .cart-item-image {
    border-radius: 0;
}

body .quantity-btn {
    border: 1px solid var(--videri-feldlinie);
    border-radius: 0;
    color: var(--videri-rinde);
    font-weight: 400;
}

body .quantity-btn:hover {
    background: var(--videri-rinde);
    border-color: var(--videri-rinde);
    color: #ffffff;
}

body .quantity-input {
    border: 1px solid var(--videri-feldlinie);
    border-radius: 0;
    font-weight: 500;
}

body .cart-summary {
    background: var(--videri-weiss);
    border: 1px solid var(--videri-sand);
    border-radius: 0;
    box-shadow: none;
    padding: 24px;
    top: calc(var(--videri-kopfhoehe) + 16px); /* unter dem Kopf */
}

body .summary-row {
    border-bottom: 1px solid var(--videri-sand);
    padding: 8px 0;
}

body .summary-row.total {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 28px;
    color: var(--videri-rinde);
}

body .btn-checkout {
    background-color: var(--videri-rinde) !important;
    border: 1px solid var(--videri-rinde);
    border-radius: 0;
    font-size: var(--versal-size);
    letter-spacing: var(--versal-spacing);
    text-transform: uppercase;
    font-weight: 500;
    padding: 14px 22px;
}

body .btn-checkout:hover,
body .btn-checkout:focus {
    background-color: var(--videri-tinte) !important;
    border-color: var(--videri-tinte);
    transform: none;
    box-shadow: none;
}

body .btn-remove {
    color: var(--videri-ocker) !important;
    font-weight: 500;
}

body .btn-remove:hover,
body .btn-remove:focus {
    color: var(--videri-tinte) !important;
    transform: none;
}

/* ============================================================
   Kasse und Kundenkonto (checkout.css, login.css)
   ============================================================ */
body .hover-elevate:hover {
    transform: none;
    box-shadow: none !important;
}

body .privacy-policy-box.checked {
    border-color: var(--videri-rinde) !important;
    background-color: var(--videri-creme);
}

body #checkout-form .form-control,
body #checkout-form .form-select,
body #checkout-form textarea.form-control {
    font-size: 1.05rem !important;
}

body .btn-primary:hover {
    transform: none;
    box-shadow: none;
}

/* Kurstitel in der Kasse (h5.fs-5) als Playfair, nicht als Versalien-Label;
   die Kopfzeile „Ihre Daten“ (h4.fs-5) bleibt Label in handlicher Größe */
body .card-body h5.fs-5.fw-bold {
    font-family: var(--font-serif);
    font-weight: 400 !important;
    font-size: 22px !important;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    color: var(--videri-tinte);
}

body .card-header h4.fs-5 {
    font-size: 15px !important;
    letter-spacing: 0.2em;
}

/* ============================================================
   Referent:innen und Standorte (speaker-*.css, venue-*.css)
   ============================================================ */
body .speaker-card,
body .venue-card {
    background: #ffffff;
    border: 1px solid var(--videri-sand);
    border-radius: 0;
    box-shadow: none;
    transition: border-color var(--transition-base);
}

body .speaker-card:hover,
body .venue-card:hover {
    border-color: var(--videri-rinde);
    transform: none;
    box-shadow: none;
}

body .speaker-card:hover .speaker-image,
body .venue-card:hover .venue-image {
    transform: none;
}

body .speaker-image-wrapper,
body .venue-image-wrapper {
    background: var(--videri-sand);
}

body .speaker-placeholder,
body .venue-placeholder {
    color: var(--videri-rinde);
    background: none;
    opacity: 0.35;
}

body .speaker-name,
body .venue-name {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 24px;
    line-height: 1.25;
}

body .speaker-title {
    font-size: var(--versal-size);
    letter-spacing: 0.16em;
    font-weight: 400;
    color: var(--videri-rinde);
}

body .speaker-meta-item i,
body .venue-meta-item i {
    color: var(--videri-rinde);
}

body .btn-view-speaker,
body .btn-view-venue,
body .btn-back-contact {
    background: var(--videri-rinde);
    color: #ffffff;
    border: 1px solid var(--videri-rinde);
    border-radius: 0;
    font-size: var(--versal-size);
    letter-spacing: var(--versal-spacing);
    text-transform: uppercase;
    font-weight: 500;
    padding: 14px 22px;
}

body .btn-view-speaker:hover,
body .btn-view-venue:hover,
body .btn-back-contact:hover {
    background: var(--videri-tinte);
    border-color: var(--videri-tinte);
    color: #ffffff;
    transform: none;
    box-shadow: none;
}

body .venue-badge,
body .stats-badge {
    background: var(--videri-creme);
    border: 1px solid var(--videri-sand);
    border-radius: 0;
    color: var(--videri-rinde);
    font-weight: 400;
}

body .venue-badge {
    font-size: var(--versal-size);
    letter-spacing: var(--versal-spacing);
    text-transform: uppercase;
}

body .stats-number {
    font-family: var(--font-serif);
    font-weight: 400;
    color: var(--videri-rinde);
}

body .speaker-profile-image,
body .speaker-profile-placeholder {
    border: 4px solid var(--videri-sand);
    box-shadow: none;
    background: var(--videri-stein);
}

body .venue-profile-image,
body .venue-profile-placeholder {
    border: 4px solid var(--videri-sand);
    border-radius: 0;
    box-shadow: none;
    background: var(--videri-stein);
}

body .speaker-profile-title {
    color: var(--videri-sand);
}

body .contact-card,
body .bio-card,
body .info-card,
body .gallery-card {
    background: #ffffff;
    border: 1px solid var(--videri-sand);
    border-radius: 0;
    box-shadow: none;
}

body .contact-card h3,
body .bio-card h3,
body .info-card h3,
body .gallery-card h3 {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(22px, 2.2vw, 28px);
}

body .contact-label {
    color: var(--videri-rinde);
    letter-spacing: 0.16em;
}

body .room-item {
    background: var(--videri-creme);
    border-radius: 0;
}

body .room-item:hover {
    background: var(--videri-sand);
    color: var(--videri-tinte);
    transform: none;
}

body .room-item:hover i {
    color: var(--videri-rinde);
}

body .map-container {
    border-radius: 0;
    background: var(--videri-creme);
    border: 1px solid var(--videri-sand);
}

body .btn-back {
    background: none;
    border: 1px solid var(--videri-sand);
    border-radius: 0;
    color: #ffffff;
    font-size: var(--versal-size);
    letter-spacing: var(--versal-spacing);
    text-transform: uppercase;
    font-weight: 500;
    padding: 12px 18px;
}

body .btn-back:hover {
    background: var(--videri-sand);
    color: var(--videri-tinte);
}

body .btn-map {
    background: var(--videri-rinde);
    border: 1px solid var(--videri-rinde);
    border-radius: 0;
    color: #ffffff;
    font-size: var(--versal-size);
    letter-spacing: var(--versal-spacing);
    text-transform: uppercase;
    font-weight: 500;
    padding: 12px 18px;
}

body .btn-map:hover {
    background: var(--videri-tinte);
    border-color: var(--videri-tinte);
    color: #ffffff;
    transform: none;
    box-shadow: none;
}

/* ============================================================
   Rechtliche Seiten (static-pages.css) und Seitenverwaltung
   ============================================================ */
body .content-section h2 {
    color: var(--videri-tinte);
    font-weight: 400;
    border-bottom: 1px solid var(--videri-sand);
    padding-bottom: 12px;
}

body .content-section h3 {
    font-weight: 400;
}

body .content-section p {
    color: var(--videri-stein);
}

body .placeholder-content {
    background: var(--videri-weiss);
    border-radius: 0;
    border-left: 2px solid var(--videri-feldlinie);
}

.seite-inhalt img {
    max-width: 100%;
    height: auto;
}

/* ============================================================
   Fuß – wie der Footer von videri-ev.de: Sand, zwei Spalten mit
   Playfair-Überschrift („videri e.V.“, „Spendenkonto“), Symbole in
   Tinte, Kontaktzeilen mit dunklen Trennlinien, Knopf „Jetzt spenden“
   weiß mit Rahmen; darunter eine helle Leiste mit den Rechtslinks
   ============================================================ */
.videri-fuss {
    background: var(--videri-sand);
    color: var(--videri-stein);
    margin-top: clamp(48px, 8vw, var(--videri-space-5));
    font-size: clamp(15px, 3.8vw, 18px);
    line-height: 1.22;
}

.videri-fuss a {
    color: var(--videri-stein);
    text-decoration: none;
}

.videri-fuss a:hover {
    color: var(--videri-tinte);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.videri-fuss-spalten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: var(--videri-space-4) clamp(24px, 5vw, var(--videri-space-5));
    padding-top: clamp(32px, 6vw, var(--videri-space-4));
    padding-bottom: clamp(32px, 6vw, var(--videri-space-4));
}

.videri-fuss-titel {
    font-family: var(--videri-display);
    font-weight: 400 !important;
    font-size: clamp(32px, 4vw, 44px);
    line-height: 1.1;
    color: var(--videri-rinde);
    margin: 0 0 var(--videri-space-1);
}

.videri-fuss-titel a {
    color: inherit;
}

/* Kontaktzeilen: Symbol links, Text daneben, Trennlinie darunter */
.videri-fuss-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 272px;
}

.videri-fuss-zeile {
    display: flex;
    align-items: center;
    gap: 12px;
}

.videri-fuss-liste .videri-fuss-zeile {
    padding: var(--videri-space-2) 0;
    border-bottom: 1px solid var(--videri-tinte);
}

.videri-fuss-liste .videri-fuss-zeile:first-child {
    padding-top: 0;
}

.videri-fuss-liste .videri-fuss-zeile:last-child {
    border-bottom: 0;
}

.videri-fuss-zeile > i {
    flex: 0 0 26px;
    font-size: 24px;
    color: var(--videri-tinte);
    text-align: center;
}

.videri-fuss-hinweis {
    margin-top: var(--videri-space-2);
    font-size: 14px;
}

.videri-fuss-hinweis a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Knopf „Jetzt spenden“: weiß, Tinte, 1 px Rahmen, Versalien */
.videri-knopf-weiss {
    display: inline-block;
    margin-top: var(--videri-space-3);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: var(--versal-spacing);
    text-transform: uppercase;
    color: var(--videri-tinte) !important;
    background: var(--videri-weiss);
    border: 1px solid var(--videri-tinte);
    padding: 14px 15px;
    line-height: 1;
    text-decoration: none !important;
    transition: background-color var(--transition-base), color var(--transition-base);
}

.videri-knopf-weiss:hover,
.videri-knopf-weiss:focus-visible {
    background: var(--videri-rinde);
    border-color: var(--videri-rinde);
    color: var(--videri-weiss) !important;
}

/* Leiste unter dem Fuß: Rechtslinks links, Copyright rechts */
.videri-fuss-leiste {
    background: var(--videri-nebel);
    font-size: 15px;
}

.videri-fuss-leiste > .container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--videri-space-2);
    padding-bottom: var(--videri-space-2);
}

.videri-fuss-leiste ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 30px;
}

.videri-fuss-leiste ul ul {
    width: 100%;
    margin-left: 0 !important;
    margin-top: 0 !important;
}

.videri-fuss-leiste li {
    margin: 0 !important;
}

.videri-fuss-leiste a {
    color: var(--videri-tinte);
    font-weight: 500;
}

.videri-fuss-copyright {
    font-size: 13px;
    font-weight: 300;
    color: var(--videri-stein);
}

/* ============================================================
   Schmale Bildschirme
   ============================================================ */
@media (max-width: 767.98px) {
    body .course-image {
        height: 200px;
    }

    body .price-amount {
        font-size: 34px;
    }
}