/* ============================================================
   Theme „koppelschleuse“ – Kunstschule Koppelschleuse, Meppen

   Nach der bisherigen Website https://kunstschule-koppelschleuse.de
   (CMS „wosonst“, Bootstrap 3, cms/css/style.css): weißer Kopf mit
   Logo und Navigation in Versalien, grüne Linie unter dem aktiven
   Punkt, grünes Band mit dem bunten Schriftzug, grüne Leiste mit
   orangen Knöpfen, grauer Fuß in Versalien.

   Farben der Website: Grün #9fb70a (Leisten, Titel, Linien), Orange
   #f39200 (Knöpfe, Hinweise), Grau #9d9d9d (Anschrift, Fuß), Hellgrau
   #b2b2b2 (Linien, „mehr Details“), Text #333; Grundschrift
   „Titillium Web“ 18 px (die Website verlangt sie, lädt sie aber
   nicht – hier lokal eingebunden wie beim Theme tini). Keine Rundungen,
   keine Verläufe.

   Breite wie auf der Website: Kopf und Fuß ab 1200 px 65 % des
   Fensters, aber mindestens 1040 px (bei 65 % brachen auf der Website
   unter 1600 px die Menüpunkte um); der Inhalt bis 1920 px 95 %,
   darüber 65 %.

   Die Seiten-Stylesheets (css/frontend/*.css) werden NACH diesem Theme
   geladen; Regeln für sie stehen deshalb mit vorangestelltem „body“
   (höhere Spezifität).
   ============================================================ */

:root {
    --ks-gruen: #9fb70a;
    --ks-gruen-dunkel: #7f9208;
    --ks-orange: #f39200;
    --ks-orange-dunkel: #d27e00;
    --ks-grau: #9d9d9d;          /* Anschrift, Fuß */
    --ks-hellgrau: #b2b2b2;      /* Linien, „mehr Details“ */
    --ks-flaeche: #f1f1f1;       /* Warenkorb, Formulare (WhiteSmoke) */
    --ks-menue: #fafafa;         /* Untermenüs */
    --ks-linie: #eceded;         /* Linie unter dem Kopf */
    --ks-text: #333333;
    --ks-schrift: "Titillium Web", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Tokens der Standard-Stylesheets (css/frontend/*.css) */
    --primary-color: var(--ks-gruen);
    --primary-dark: var(--ks-gruen-dunkel);
    --primary-light: var(--ks-gruen); /* gleiche Farbe: Verläufe werden zu Flächen */
    --secondary-color: var(--ks-grau);
    --accent-color: var(--ks-orange);
    --success-color: #5e8a00;
    --danger-color: #c62828;
    --warning-color: var(--ks-orange);
    --info-color: var(--ks-gruen);
    --light-bg: var(--ks-flaeche);
    --white-bg: #ffffff;
    --dark-text: var(--ks-text);
    --gray-text: #666666;
    --light-text: rgba(255, 255, 255, 0.9);
    --border-color: var(--ks-hellgrau);
    --divider-color: var(--ks-hellgrau);
    --navbar-gradient: #ffffff;
    --hero-gradient: #ffffff;
    --text-gradient: var(--ks-text);

    --font-family: var(--ks-schrift);
    --font-weight-normal: 400;
    --font-weight-medium: 400;
    --font-weight-semibold: 700;
    --font-weight-bold: 700;

    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 0;
    --radius-xl: 0;
    --radius-2xl: 0;

    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;
    --shadow-navbar: none;

    /* Bootstrap */
    --bs-body-font-family: var(--ks-schrift);
    --bs-body-font-size: 1.125rem; /* 18 px wie die Website */
    --bs-body-line-height: 1.43;
    --bs-body-color: var(--ks-text);
    --bs-body-bg: #ffffff;
    --bs-heading-color: var(--ks-text);
    --bs-link-color: var(--ks-gruen-dunkel);
    --bs-link-color-rgb: 127, 146, 8;
    --bs-link-hover-color: var(--ks-text);
    --bs-link-hover-color-rgb: 51, 51, 51;
    --bs-primary: var(--ks-gruen);
    --bs-primary-rgb: 159, 183, 10;
    --bs-border-color: var(--ks-hellgrau);
    --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-focus-ring-color: rgba(159, 183, 10, 0.3);
}

/* ============================================================
   Grundlagen
   ============================================================ */
body {
    font-family: var(--ks-schrift);
    font-size: 1.125rem;
    color: var(--ks-text);
    background: #ffffff;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--ks-schrift);
    font-weight: 400;
    color: var(--ks-text);
}

b, strong {
    font-weight: 700;
}

::selection {
    background: var(--ks-gruen);
    color: #ffffff;
}

:focus-visible {
    outline: 3px solid var(--ks-orange);
    outline-offset: 2px;
}

/* ============================================================
   Breite wie auf der Website
   ============================================================ */
@media (min-width: 576px) {
    body .ks-inhalt .container {
        max-width: 95vw;
    }
}

@media (min-width: 1200px) {
    .ks-kopf-inhalt.container,
    .ks-fuss-inhalt.container {
        max-width: max(65vw, 1040px);
    }
}

@media (min-width: 1921px) {
    body .ks-inhalt .container {
        max-width: 65vw;
    }
}

/* ============================================================
   Kopf – weiß, Logo links, Anschrift und Menü rechts
   ============================================================ */
.ks-kopf {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: #ffffff;
}

.ks-nav {
    padding: 0;
    background: #ffffff;
    border-bottom: 1px solid var(--ks-linie);
    text-transform: uppercase;
}

.ks-kopf-inhalt {
    align-items: flex-start;
}

.ks-marke {
    position: relative;
    margin-top: 7px;
    padding: 0 15px 0 0;
}

.ks-logo {
    display: block;
}

.ks-logo img {
    display: block;
    width: auto;
    height: 100px;
}

/* „Kunstkreis“ und „Kulturnetzwerk“ beim Überfahren des Logos */
.ks-marke-menue {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1040;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--ks-menue);
    font-size: 22px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}

.ks-marke-menue a {
    display: block;
    padding: 3px 20px;
    color: var(--ks-text);
    text-decoration: none;
    white-space: nowrap;
}

.ks-marke-menue a:hover,
.ks-marke-menue a:focus {
    background: #f5f5f5;
    color: #262626;
}

@media (min-width: 992px) {
    .ks-marke:hover .ks-marke-menue,
    .ks-marke:focus-within .ks-marke-menue {
        display: block;
    }

    .ks-menue-bereich {
        flex-direction: column;
        align-items: flex-end;
    }

    .ks-netzwerk {
        display: none;
    }
}

.ks-anschrift {
    margin-right: -13px;
    padding: 12px 0;
    color: var(--ks-grau);
    font-size: 16px;
    text-align: right;
}

.ks-anschrift a {
    color: var(--ks-gruen);
    text-decoration: none;
}

.ks-anschrift a:hover {
    text-decoration: underline;
}

.ks-menue {
    flex-wrap: wrap;
    justify-content: flex-end;
    font-size: 18px;
}

.ks-menue > .nav-item > .nav-link,
.ks-menue > .nav-item > .seiten-menuepunkt {
    color: var(--ks-text);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

@media (min-width: 992px) {
    .ks-menue > .nav-item > .nav-link,
    .ks-menue > .nav-item > .seiten-menuepunkt {
        margin-left: 20px;
        padding: 15px 2px 5px;
    }
}

.ks-menue > .nav-item > .nav-link:hover,
.ks-menue > .nav-item > .nav-link:focus,
.ks-menue > .nav-item > .nav-link.active,
.ks-menue > .nav-item:hover > .seiten-menuepunkt,
.ks-menue > .nav-item > .seiten-menuepunkt:focus {
    color: #000000;
    border-bottom-color: var(--ks-gruen);
}

/* Untermenüs wie auf der Website: hell, grün gepunktete Trennlinien */
.ks-menue .dropdown-menu {
    --bs-dropdown-border-radius: 0;
    padding: 8px;
    background: var(--ks-menue);
    border: 1px solid rgba(0, 0, 0, 0.15);
    font-size: 18px;
    text-transform: none;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}

@media (min-width: 992px) {
    .ks-menue > .seiten-dropdown > .seiten-untermenue {
        top: 100%;
        left: 20px;
        min-width: 14rem;
        margin-top: 0;
    }

    .ks-menue .seiten-untermenue .dropdown-item {
        white-space: nowrap;
    }
}

.ks-menue .dropdown-item {
    padding: 3px 20px;
    color: var(--ks-text);
    border-bottom: 1px dotted var(--ks-gruen);
    white-space: normal;
}

.ks-menue .dropdown-menu > li:last-child > .dropdown-item {
    border-bottom: 0;
}

.ks-menue .dropdown-item:hover,
.ks-menue .dropdown-item:focus,
.ks-menue .dropdown-item.active {
    background: rgba(0, 0, 0, 0.1);
    color: #000000;
}

/* Menü-Knopf wie auf der Website (Bootstrap 3: drei graue Balken im Rahmen) */
.ks-menueknopf {
    display: none;
    margin: 8px 0 8px auto;
    padding: 9px 10px;
    background: transparent;
    border: 1px solid #dddddd;
    border-radius: 4px;
}

.ks-menueknopf span {
    display: block;
    width: 22px;
    height: 2px;
    background: #888888;
    border-radius: 1px;
}

.ks-menueknopf span + span {
    margin-top: 4px;
}

.ks-menueknopf:hover,
.ks-menueknopf:focus {
    background: #dddddd;
}

/* Kopfbild einer Seite der Seitenverwaltung: volle Breite wie das
   Navigationsbild der Website, höchstens Fensterhöhe minus Kopf */
body .seiten-kopfbild img {
    max-height: calc(100vh - 100px);
}

/* Grünes Band mit dem bunten Schriftzug (wie die Seite „Kursangebot“) */
.ks-band {
    background: var(--ks-gruen);
}

.ks-band img {
    display: block;
    width: 100%;
    height: auto;
}

/* ============================================================
   Leiste – grün mit orangen Knöpfen und orangem Suchfeld
   ============================================================ */
.ks-inhalt {
    padding: 30px 0 50px;
}

.ks-leiste {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin-bottom: 25px;
    background: var(--ks-gruen);
    color: #ffffff;
}

.ks-leiste-knopf {
    display: inline-flex;
    align-items: center;
    padding: 10px;
    background: var(--ks-orange);
    border-right: 3px solid #ffffff;
    color: #ffffff !important;
    text-decoration: none;
}

.ks-leiste-knopf i {
    margin-right: 6px;
}

.ks-leiste-knopf:hover,
.ks-leiste-knopf:focus,
.ks-leiste-knopf.active {
    background: var(--ks-orange-dunkel);
    color: #ffffff;
}

.ks-suche {
    position: relative;
    display: flex;
    align-items: center;
    width: 15rem;
    max-width: 100%;
    margin: 0 0 0 auto;
    border-left: 4px solid #ffffff;
    background: var(--ks-orange);
}

.ks-suche i {
    position: absolute;
    left: 12px;
    color: #ffffff;
    pointer-events: none;
}

.ks-suche input {
    width: 100%;
    height: 100%;
    min-height: 45px;
    padding: 0 10px 0 36px;
    background: transparent;
    border: 0;
    color: #ffffff;
    font-size: 1rem;
}

.ks-suche input:focus {
    outline: 2px solid #ffffff;
    outline-offset: -4px;
}

/* ============================================================
   Knöpfe – Flächen ohne Rundung: Grün, Aufrufe zum Buchen Orange
   ============================================================ */
body .btn {
    --bs-btn-border-radius: 0;
    --bs-btn-font-family: var(--ks-schrift);
    border-radius: 0;
}

body .btn-primary,
body .btn-success {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--ks-gruen);
    --bs-btn-border-color: var(--ks-gruen);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--ks-gruen-dunkel);
    --bs-btn-hover-border-color: var(--ks-gruen-dunkel);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--ks-gruen-dunkel);
    --bs-btn-active-border-color: var(--ks-gruen-dunkel);
    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: var(--ks-gruen);
    --bs-btn-disabled-border-color: var(--ks-gruen);
    --bs-btn-focus-shadow-rgb: 159, 183, 10;
}

body .btn-warning {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--ks-orange);
    --bs-btn-border-color: var(--ks-orange);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--ks-orange-dunkel);
    --bs-btn-hover-border-color: var(--ks-orange-dunkel);
}

body .btn-secondary {
    --bs-btn-color: #000000;
    --bs-btn-bg: #d3d3d3;
    --bs-btn-border-color: #d3d3d3;
    --bs-btn-hover-color: #000000;
    --bs-btn-hover-bg: var(--ks-hellgrau);
    --bs-btn-hover-border-color: var(--ks-hellgrau);
}

body .btn-outline-primary {
    --bs-btn-color: var(--ks-gruen-dunkel);
    --bs-btn-border-color: var(--ks-gruen);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--ks-gruen);
    --bs-btn-hover-border-color: var(--ks-gruen);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--ks-gruen);
    --bs-btn-active-border-color: var(--ks-gruen);
}

/* ============================================================
   Formulare und Bootstrap-Bausteine
   ============================================================ */
body .form-control,
body .form-select {
    border-radius: 0;
}

body .form-control:focus,
body .form-select:focus {
    border-color: var(--ks-gruen);
    box-shadow: 0 0 0 0.2rem rgba(159, 183, 10, 0.25);
}

body .form-check-input:checked {
    background-color: var(--ks-gruen);
    border-color: var(--ks-gruen);
}

body .card {
    border-radius: 0;
    box-shadow: none;
}

body .badge {
    border-radius: 0;
    font-weight: 400;
}

body .bg-primary {
    background-color: var(--ks-gruen) !important;
}

body .text-primary {
    color: var(--ks-gruen) !important;
}

body .page-link {
    color: var(--ks-text);
}

body .page-item.active .page-link {
    background-color: var(--ks-gruen);
    border-color: var(--ks-gruen);
    color: #ffffff;
}

body .dropdown-menu {
    --bs-dropdown-border-radius: 0;
    --bs-dropdown-link-active-bg: var(--ks-orange);
}

body .modal-content {
    border-radius: 0;
}

/* Fenster wie auf der Website: grüner Kopf, weiße Schrift */
body .modal-header {
    background: var(--ks-gruen);
    color: #ffffff;
}

body .modal-header .modal-title {
    color: #ffffff;
}

body .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

body .alert {
    border-radius: 0;
}

body .alert-order-success {
    padding: 1.25rem 1.5rem;
    background: var(--ks-gruen);
    border: 0;
    color: #ffffff;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

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

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

body .alert-order-success .alert-icon {
    flex-shrink: 0;
    margin-right: 1rem;
    font-size: 1.5rem;
}

body .alert-order-success h4,
body .alert-order-success a {
    color: #ffffff;
}

body .alert-order-success p {
    margin: 0;
}

/* ============================================================
   Seitenköpfe der Standardvorlagen – wie die Überschriften der
   Website: weiß, Titel mittig, nicht fett
   ============================================================ */
body .hero-section,
body .course-detail-hero,
body .speaker-profile-header,
body .venue-profile-header {
    margin: 0 0 1.5rem;
    padding: 0;
    background: transparent;
    border-radius: 0;
    color: var(--ks-text);
    overflow: visible;
}

body .hero-section::before,
body .course-detail-hero::before {
    display: none;
}

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

body .hero-section .row {
    min-height: 0 !important;
}

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

body .hero-section h1,
body .course-detail-hero h1,
body .speaker-profile-header h1,
body .venue-profile-header h1 {
    margin-bottom: 0.75rem !important;
    font-size: clamp(1.75rem, 3.2vw, 2.4rem);
    font-weight: 400 !important;
    color: var(--ks-text) !important;
}

body .hero-section .lead,
body .course-detail-hero .lead,
body .speaker-profile-header .lead,
body .venue-profile-header .lead {
    margin-bottom: 0.5rem !important;
    color: #666666 !important;
    opacity: 1 !important;
}

body .hero-section .text-white,
body .course-detail-hero .text-white,
body .course-detail-hero .text-white-50,
body .speaker-profile-header .text-white,
body .venue-profile-header .text-white {
    color: var(--ks-text) !important;
}

body .course-detail-hero .breadcrumb {
    background: transparent;
    font-size: 1rem;
}

body .course-detail-hero .breadcrumb-item a {
    color: var(--ks-gruen-dunkel) !important;
}

body .course-detail-hero .breadcrumb-item + .breadcrumb-item::before {
    content: "\00BB";
    color: #000000;
}

body .course-detail-hero .badge {
    background: var(--ks-orange) !important;
    color: #ffffff !important;
}

/* ============================================================
   Kursübersicht – Karten wie auf der Website: Bild, grüner Titel
   über der Bildkante, gepunktete Linie, graue Leiste „mehr Details“
   ============================================================ */
body .filter-sidebar {
    padding: 1.25rem;
    background: var(--ks-flaeche);
    border-radius: 0;
    box-shadow: none;
}

body .filter-title,
body .filter-group-title {
    color: var(--ks-text);
    font-weight: 400;
}

body .filter-group-title {
    color: var(--ks-gruen-dunkel);
    text-transform: uppercase;
}

body .filter-badge,
body .category-count {
    border-radius: 0;
    background: var(--ks-gruen);
    color: #ffffff;
}

body .btn-reset-filters {
    border-radius: 0;
    background: var(--ks-orange);
    border-color: var(--ks-orange);
    color: #ffffff;
}

body .category-name {
    font-weight: 400;
}

body .course-card {
    display: flex;
    flex-direction: column;
    border: 0;
    border-radius: 0;
    background: #ffffff;
    box-shadow: none;
    overflow: visible;
}

body .course-card:hover {
    transform: none;
    box-shadow: none;
    filter: brightness(75%);
}

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

body .course-image-wrapper {
    background: var(--ks-hellgrau);
    overflow: visible;
}

body .course-image {
    height: 300px;
}

/* Kursnummer auf der Karte ausgeblendet (Wunsch 2026-11-09) */
body .course-badge {
    display: none;
}

body .course-price {
    bottom: auto;
    top: 10%;
    left: auto;
    right: 0;
    padding: 8px;
    background: var(--ks-orange);
    border-radius: 0;
    font-size: 1rem;
    font-weight: 400;
}

body .course-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 0 5% 0;
}

/* grüner Titel, halb über der Bildkante */
body .course-title {
    position: relative;
    display: flex;
    margin: -2.6rem 0 1.25rem;
    min-height: 5.2rem;
    padding: 8px 10px;
    align-items: center;
    overflow: visible;
    -webkit-line-clamp: unset;
    background: var(--ks-gruen);
    color: #ffffff;
    font-size: 1.35rem;
    font-weight: 400;
    line-height: 1.3;
}

body .course-subtitle {
    color: var(--ks-gruen-dunkel);
}

body .course-meta {
    margin-top: auto;
    padding-top: 8px;
    border-top: 2px dotted var(--ks-hellgrau);
    font-size: 1rem;
}

body .course-meta-item {
    color: var(--ks-text);
}

body .course-meta-item i {
    color: var(--ks-gruen);
}

/* „mehr Details“ als graue Leiste mit weißem Pfeil */
body .btn-view-course {
    width: calc(100% / 0.9);
    margin: 0 calc(-100% / 18) 0;
    padding: 8px;
    background: var(--ks-hellgrau);
    border-radius: 0;
    color: #ffffff;
    font-weight: 400;
    text-align: right;
}

body .btn-view-course i {
    display: none;
}

body .btn-view-course::after {
    content: "\00A0\25B6";
    font-size: 0.8em;
}

body .btn-view-course:hover,
body .btn-view-course:focus {
    background: var(--ks-grau);
    color: #ffffff;
    transform: none;
    box-shadow: none;
}

body .empty-state,
body .empty-cart {
    background: var(--ks-flaeche);
    border-radius: 0;
    box-shadow: none;
}

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

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

body .course-detail-card {
    background: #ffffff;
    border-radius: 0;
    box-shadow: none;
}

body .course-detail-card h2 i,
body .course-detail-card h5 i,
body .info-icon,
body .contact-icon {
    color: var(--ks-gruen);
}

body .info-item {
    background: var(--ks-flaeche);
    border-radius: 0;
}

body .info-item:hover {
    background: var(--ks-flaeche);
    color: var(--ks-text);
    transform: none;
}

body .info-icon,
body .contact-icon {
    background: #ffffff;
    border-radius: 0;
}

body .info-content h6,
body .info-label {
    color: var(--ks-gruen-dunkel);
    text-transform: uppercase;
}

/* Kursgebühr als grüne Fläche, „In den Warenkorb“ orange */
body .price-box {
    background: var(--ks-gruen);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: #ffffff;
}

body .price-box h1,
body .price-box h2,
body .price-box h3,
body .price-box h4,
body .price-box h5,
body .price-box h6,
body .price-box .text-muted {
    color: #ffffff !important;
}

body .btn-add-to-cart {
    background: var(--ks-orange);
    border: 0;
    border-radius: 0;
    color: #ffffff;
}

body .btn-add-to-cart:hover,
body .btn-add-to-cart:focus {
    background: var(--ks-orange-dunkel);
    color: #ffffff;
    transform: none;
}

body .occurrence-option,
body .time-item,
body .occurrence-selector {
    border-radius: 0;
}

body .occurrence-option:hover,
body .occurrence-option.selected,
body .time-item:hover {
    border-color: var(--ks-gruen);
}

/* ============================================================
   Warenkorb (css/frontend/cart.css) und Kasse
   ============================================================ */
body .cart-item {
    background: var(--ks-flaeche);
    border-radius: 0;
    box-shadow: none;
}

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

body .quantity-btn {
    border-radius: 0;
    color: var(--ks-gruen-dunkel);
}

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

body .cart-summary {
    background: var(--ks-flaeche);
    border-radius: 0;
    box-shadow: none;
}

body .btn-checkout {
    background-color: var(--ks-orange) !important;
    border-color: var(--ks-orange) !important;
    border-radius: 0;
    color: #ffffff !important;
}

body .btn-checkout:hover,
body .btn-checkout:focus {
    background-color: var(--ks-orange-dunkel) !important;
    border-color: var(--ks-orange-dunkel) !important;
}

body .privacy-policy-box {
    border-radius: 0;
}

body .privacy-policy-box.checked {
    border-color: var(--ks-gruen) !important;
}

/* ============================================================
   Kursleitung und Standorte – Karten mit grauem Rahmen und
   breitem Fuß wie die Referenten der Website
   ============================================================ */
body .speaker-card,
body .venue-card {
    border: 2px solid #d3d3d3;
    border-bottom-width: 15px;
    border-radius: 0;
    box-shadow: none;
}

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

body .contact-card,
body .bio-card,
body .gallery-card,
body .info-card,
body .room-item,
body .map-container,
body .venue-profile-image,
body .venue-profile-placeholder,
body .placeholder-content {
    border-radius: 0;
    box-shadow: none;
}

body .btn-view-speaker,
body .btn-view-venue,
body .btn-back-contact,
body .btn-map {
    background: var(--ks-gruen);
    border-radius: 0;
    color: #ffffff;
}

body .btn-view-speaker:hover,
body .btn-view-venue:hover,
body .btn-back-contact:hover,
body .btn-map:hover {
    background: var(--ks-gruen-dunkel);
    color: #ffffff;
}

body .stats-badge,
body .venue-badge {
    border-radius: 0;
}

/* ============================================================
   Fuß – grau, weiße Linie oben, Versalien, Links rechts
   ============================================================ */
.ks-fuss {
    padding: 15px 0;
    background: var(--ks-grau);
    border-top: 4px solid #ffffff;
    color: #ffffff;
    text-transform: uppercase;
}

.ks-fuss-inhalt {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0 20px;
}

.ks-fuss a {
    color: #ffffff;
    font-size: 16px;
    text-decoration: none;
}

.ks-fuss a:hover,
.ks-fuss a:focus {
    text-decoration: underline;
}

.ks-fuss-kug {
    margin: 0 20px 0 20px;
}

.ks-fuss-kug img {
    display: block;
    width: auto;
    height: 80px;
}

.ks-fuss-facebook img {
    display: block;
    width: 32px;
    height: 32px;
    margin-top: 2px;
}

.ks-fuss-links {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ks-fuss-links > li {
    margin: 0 !important;
}

.ks-fuss-links > li:not(:last-child)::after {
    content: "|";
    padding: 0 6px;
}

/* Unterseiten der Seitenverwaltung im Fuß in derselben Zeile */
.ks-fuss-links ul {
    display: inline;
    margin: 0 !important;
    padding: 0;
    list-style: none;
}

.ks-fuss-links ul > li {
    display: inline;
    margin: 0 !important;
}

.ks-fuss-links ul > li::before {
    content: "|";
    padding: 0 6px;
}

/* ============================================================
   Schmale Bildschirme (wie die Website ab 996 px abwärts)
   ============================================================ */
@media (max-width: 991.98px) {
    .ks-kopf-inhalt {
        flex-wrap: wrap;
    }

    .ks-logo img {
        height: 90px;
    }

    .ks-menueknopf {
        display: block;
        align-self: center;
    }

    /* Menü im klebenden Kopf: lange Menüs scrollen (wie navbar-fixed-top der Website) */
    .ks-menue-bereich {
        width: 100%;
        max-height: calc(100vh - 110px);
        overflow-y: auto;
    }

    .ks-anschrift {
        margin: 0;
        padding: 8px 0 0;
        text-align: left;
    }

    .ks-menue {
        margin-top: 7.5px;
        padding-bottom: 10px;
    }

    .ks-menue > .nav-item > .nav-link,
    .ks-menue > .nav-item > .seiten-menuepunkt {
        display: block;
        padding: 10px 0;
    }

    .ks-menue .seiten-untermenue {
        padding: 0 0 0 1rem;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .ks-menue .dropdown-item {
        border-bottom: 0;
        padding: 6px 0;
    }

    /* Kopfbild wie auf der Website schmal 125 px hoch, Ausschnitt mittig */
    body .seiten-kopfbild img {
        height: 125px;
    }

    /* Band: nur der Schriftzug, damit er lesbar bleibt */
    .ks-band img {
        height: 4.6vw;
        object-fit: cover;
    }

    body .course-image {
        height: 240px;
    }
}

@media (max-width: 767.98px) {
    .ks-anschrift {
        display: none;
    }

    /* Leiste: Knöpfe nebeneinander, Suche darunter in Grau wie auf der Website */
    .ks-leiste {
        padding: 10px;
        gap: 7px;
        font-size: 14px;
    }

    .ks-leiste-knopf {
        flex: 1 1 40%;
        justify-content: center;
        border-right: 0;
    }

    .ks-suche {
        flex: 1 1 100%;
        width: 100%;
        border-left: 0;
        background: gray;
    }

    .ks-fuss a {
        font-size: 14px;
    }

    .ks-fuss-inhalt {
        justify-content: center;
        gap: 15px;
    }

    .ks-fuss-links {
        flex: 1 1 100%;
        justify-content: center;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    body .course-card,
    body .btn {
        transition: none !important;
        transform: none !important;
    }
}