:root {
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-black: #000;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-primary-rgb: 13, 110, 253;
    --bs-secondary-rgb: 108, 117, 125;
    --bs-success-rgb: 25, 135, 84;
    --bs-info-rgb: 13, 202, 240;
    --bs-warning-rgb: 255, 193, 7;
    --bs-danger-rgb: 220, 53, 69;
    --bs-light-rgb: 248, 249, 250;
    --bs-dark-rgb: 33, 37, 41;
    --bs-primary-text-emphasis: #052c65;
    --bs-secondary-text-emphasis: #2b2f32;
    --bs-success-text-emphasis: #0a3622;
    --bs-info-text-emphasis: #055160;
    --bs-warning-text-emphasis: #664d03;
    --bs-danger-text-emphasis: #58151c;
    --bs-light-text-emphasis: #495057;
    --bs-dark-text-emphasis: #495057;
    --bs-primary-bg-subtle: #cfe2ff;
    --bs-secondary-bg-subtle: #e2e3e5;
    --bs-success-bg-subtle: #d1e7dd;
    --bs-info-bg-subtle: #cff4fc;
    --bs-warning-bg-subtle: #fff3cd;
    --bs-danger-bg-subtle: #f8d7da;
    --bs-light-bg-subtle: #fcfcfd;
    --bs-dark-bg-subtle: #ced4da;
    --bs-primary-border-subtle: #9ec5fe;
    --bs-secondary-border-subtle: #c4c8cb;
    --bs-success-border-subtle: #a3cfbb;
    --bs-info-border-subtle: #9eeaf9;
    --bs-warning-border-subtle: #ffe69c;
    --bs-danger-border-subtle: #f1aeb5;
    --bs-light-border-subtle: #e9ecef;
    --bs-dark-border-subtle: #adb5bd;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: #212529;
    --bs-body-color-rgb: 33, 37, 41;
    --bs-body-bg: #ffffff;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-emphasis-color: #000;
    --bs-emphasis-color-rgb: 0, 0, 0;
    --bs-secondary-color: rgba(33, 37, 41, 0.75);
    --bs-secondary-color-rgb: 33, 37, 41;
    --bs-secondary-bg: #e9ecef;
    --bs-secondary-bg-rgb: 233, 236, 239;
    --bs-tertiary-color: rgba(33, 37, 41, 0.5);
    --bs-tertiary-color-rgb: 33, 37, 41;
    --bs-tertiary-bg: #f8f9fa;
    --bs-tertiary-bg-rgb: 248, 249, 250;
    --bs-heading-color: inherit;
    --bs-link-color: #212529;
    --bs-link-color-rgb: 33, 37, 41;
    --bs-link-decoration: none;
    --bs-link-hover-color: #000000;
    --bs-link-hover-color-rgb: 0, 0, 0;
    --bs-code-color: #d63384;
    --bs-highlight-color: #212529;
    --bs-highlight-bg: #fff3cd;
    --bs-border-width: 1px;
    --bs-border-style: solid;
    --bs-border-color: #dee2e6;
    --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
    --bs-border-radius: 0.375rem;
    --bs-border-radius-sm: 0.25rem;
    --bs-border-radius-lg: 0.5rem;
    --bs-border-radius-xl: 1rem;
    --bs-border-radius-xxl: 2rem;
    --bs-border-radius-2xl: var(--bs-border-radius-xxl);
    --bs-border-radius-pill: 50rem;
    --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
    --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
    --bs-focus-ring-width: 0.25rem;
    --bs-focus-ring-opacity: 0.25;
    --bs-focus-ring-color: rgba(13, 110, 253, 0.25);
    --bs-form-valid-color: #198754;
    --bs-form-valid-border-color: #198754;
    --bs-form-invalid-color: #dc3545;
    --bs-form-invalid-border-color: #dc3545;
}




.bg-navbar  {
    background-color: var(--marke-akzent, #dc3545);
}
/* Kopfbild und Hintergrundfarbe pro Kunde: --hero-gross, --hero-klein und --hero-farbe kommen aus
   config/marke.inc.php (Tools::markenStil() in header.inc.php). Preload der Bilder steht ebenfalls in header.inc.php. */
.bg-header {
    background-color: var(--hero-farbe, #343a40);
    background-image: var(--hero-gross, none);
    background-size: cover;
    background-position: center;
}
@media (max-width: 767.98px) {
    .bg-header {
        background-image: var(--hero-klein, var(--hero-gross, none));
    }
}

/* Dunkle Kontur + leichter Schlagschatten um helle Texte auf dem Header-Foto (Lesbarkeit auf hellem Schnee) */
.text-kontur {
    text-shadow:
        -1px -1px 0 rgba(0, 0, 0, .85), 1px -1px 0 rgba(0, 0, 0, .85),
        -1px 1px 0 rgba(0, 0, 0, .85), 1px 1px 0 rgba(0, 0, 0, .85),
        1px 2px 4px rgba(0, 0, 0, .6);
}
.text-kontur-gross {
    text-shadow:
        -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
        2px 3px 6px rgba(0, 0, 0, .65);
}


.vh-70 {
    height: 70vh;
    min-height: 30vh;
}

.vh-60 {
    height: 60vh;
    min-height: 30vh;
}


.card {
    transition: all 0.3s ease;
}
.card:hover {
    background-color: #f8f9fa;
    transform: translateY(-3px);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.25);
}

.larger {
    font-size: 1.25em;
}

.larger-pill {
    font-size: 1em;
}

.noonmobile{

}
.form-select-booking{
    padding-bottom: 0.25rem !important;
}

/* ===== Globale Link-Optik =====
   Kein blauer Standard-Link, kein Unterstrich bei Hover – stattdessen
   dezent dunkler + etwas fetter. Gilt nur für "nackte" <a>-Tags, nicht für
   .btn/.nav-link/.badge & Co, da die ihre eigene (spezifischere) Farbe haben. */
a {
    text-decoration: none;
}
a:hover,
a:focus {
    text-decoration: none;
    font-weight: 600;
}

/* ===== Treffpunkt-Karte (assets/js/treffpunkt.js) ===== */
.karte-platzhalter {
    background: #e9ecef;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    min-height: 320px;
}

#map {
    position: relative;
    border-radius: .5rem;
}

.tp-pin-wrap {
    background: transparent;
    border: 0;
}

.tp-pin {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: var(--tp-farbe, #0d6efd);
    color: #fff;
    font-size: 18px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
}

.tp-chip {
    background: #fff;
    border: 1px solid #ced4da;
    color: #212529;
}

.tp-chip[aria-pressed="false"] {
    opacity: .5;
    text-decoration: line-through;
}

.tp-punkt {
    display: inline-block;
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    margin-right: .4rem;
    vertical-align: -1px;
}

.karte-hinweis {
    position: absolute;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 1.15rem;
    font-weight: 600;
    text-align: center;
    padding: 1rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}

.karte-hinweis.sichtbar {
    opacity: 1;
}

.tp-vollbild-knopf {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: #fff;
    color: #212529;
    text-decoration: none;
}

#map.karte-vollbild {
    position: fixed !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 1055;
    border-radius: 0;
}

body.karte-vollbild-offen {
    overflow: hidden;
}

/* Legendenpunkt für den Pistenplan: Farben der Pistenschwierigkeit */
.tp-punkt-pisten {
    background: conic-gradient(#198754 0 25%, #0d6efd 0 50%, #dc3545 0 75%, #212529 0);
}

/* Winterkarte: Basiskarte kühl und hell einfärben, Pistenplan und Pins bleiben farbig */
.tp-basis-winter {
    filter: grayscale(1) sepia(.25) hue-rotate(175deg) saturate(1.8) brightness(1.12) contrast(.9);
}

/* Hervorgehobener Treffpunkt (Direktlink von der Kursseite) */
.tp-hervorgehoben .tp-pin {
    animation: tp-puls 1.6s ease-out 3;
}

@keyframes tp-puls {
    0%   { box-shadow: 0 0 0 0 rgba(220, 53, 69, .8), 0 2px 6px rgba(0, 0, 0, .45); }
    100% { box-shadow: 0 0 0 22px rgba(220, 53, 69, 0), 0 2px 6px rgba(0, 0, 0, .45); }
}

/* Popup: Foto und Kursliste */
.tp-popup-bild {
    display: block;
    width: 100%;
    max-height: 140px;
    object-fit: cover;
    border-radius: .35rem;
}

.tp-kontakt > div + div {
    margin-top: .2rem;
}

/* Dauerhaft blinkender Pin ("Immer blinken" im Backend): Ring in der Pin-Farbe wächst und verblasst */
.tp-pin.tp-blinkt {
    position: relative;
}

.tp-pin.tp-blinkt::after {
    content: "";
    position: absolute;
    inset: -4px;
    border: 3px solid var(--tp-farbe, #0d6efd);
    border-radius: 50%;
    pointer-events: none;
    animation: tp-blink 1.4s ease-out infinite;
}

@keyframes tp-blink {
    0%   { transform: scale(1);   opacity: .9; }
    100% { transform: scale(2.1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .tp-pin.tp-blinkt::after {
        animation: none;
        opacity: .7;
        transform: scale(1.35);
    }
}

/* Legende und Filter unter der Karte */
.tp-legende {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: .75rem .9rem;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    background: #fff;
    text-align: left;
}

.tp-legende.d-none {
    display: none;
}

.tp-zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .75rem;
}

.tp-zeilenlabel {
    flex: 0 0 11.5rem;
    font-size: .8125rem;
    font-weight: 600;
    color: #495057;
}

.tp-zeileninhalt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    min-width: 0;
    flex: 1 1 14rem;
}

.tp-kategorie {
    padding-inline: .6rem;
    border: 1px solid #adb5bd;
    background: #f8f9fa;
    color: #212529;
    font-weight: 600;
}

.tp-chip.tp-steuer[aria-pressed="false"] {
    opacity: 1;
    text-decoration: none;
}

.tp-kategorie[aria-pressed="true"],
.tp-chip[aria-pressed="true"].tp-steuer {
    background: #212529;
    border-color: #212529;
    color: #fff;
}

.tp-punkt-blink {
    background: #dc3545;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, .25);
}

@media (max-width: 575.98px) {
    .tp-zeilenlabel {
        flex-basis: 100%;
    }
}

/* Reiter unten rechts: nach oben scrollen (erscheint erst nach etwas Scrollen), rot wie der Warenkorb-Reiter */
.nach-oben-tab {
    position: fixed;
    right: 0;
    bottom: 1.25rem;
    z-index: 1030;              /* unter Modals (1055) und Einwilligungs-Hinweis (1090) */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.9rem;
    height: 3.1rem;
    padding: 0;
    border: 0;
    border-radius: .7rem 0 0 .7rem;
    background: var(--marke-akzent, #dc3545);
    color: var(--marke-akzent-text, #fff);
    font-size: 1.5rem;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .4);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateX(100%);
    transition: opacity .2s, transform .2s, visibility 0s linear .2s;
}

.nach-oben-tab.sichtbar {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .2s, transform .2s, visibility 0s;
}

.nach-oben-tab:hover,
.nach-oben-tab:focus-visible {
    background: var(--marke-akzent-dunkel, #bb2d3b);
}

.nach-oben-tab:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -4px;
}

@media (prefers-reduced-motion: reduce) {
    .nach-oben-tab,
    .nach-oben-tab.sichtbar {
        transition: none;
    }
}

body.karte-vollbild-offen .nach-oben-tab {
    display: none;
}

/* ===== Kopfzeile: Testsystem-Banner, Warenkorb-Zähler, mobiler Warenkorb (aus navbar.inc.php hierher verschoben) ===== */
.testsystem-banner {
    background: #dc3545; color: #fff; text-align: center;
    font-weight: 800; letter-spacing: .25em; padding: .35rem 1rem;
    font-size: .9rem; text-transform: uppercase;
}

/* Kurze "Pop"-Animation für den Warenkorb-Zähler, wenn sich die Anzahl ändert */
@keyframes warenkorbCountBump {
    0%   { transform: translate(-50%, -50%) scale(1); }
    30%  { transform: translate(-50%, -50%) scale(1.5); }
    60%  { transform: translate(-50%, -50%) scale(0.9); }
    100% { transform: translate(-50%, -50%) scale(1); }
}
#warenkorbCount.bump {
    animation: warenkorbCountBump 0.5s ease;
}

@media (max-width: 575.98px) {
    .navbar-brand { font-size: 1.1rem; }
}

/* Mobil: Warenkorb mit Anzahl direkt in der Kopfzeile (neben dem Menü-Knopf), ohne das Menü zu öffnen */
.navbar-cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: .35rem .6rem;
    color: rgba(255, 255, 255, .9);
    font-size: 1.35rem;
    line-height: 1;
    text-decoration: none;
}
.navbar-cart:hover, .navbar-cart:focus { color: #fff; }
.navbar-cart .js-warenkorb-count {
    position: absolute;
    top: -.1rem;
    right: -.1rem;
    min-width: 1.35rem;
    font-size: .75rem;
}

/* Mobil: kleiner Warenkorb-Reiter am linken Rand, sobald etwas im Warenkorb liegt */
.warenkorb-tab {
    position: fixed;
    left: 0;
    top: 42%;
    z-index: 1030;              /* unter Modals (1055) und Einwilligungs-Hinweis (1090) */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
    width: 2.4rem;
    padding: .45rem 0 .4rem;
    border-radius: 0 .6rem .6rem 0;
    background: var(--marke-akzent, #dc3545);
    color: var(--marke-akzent-text, #fff);
    text-decoration: none;
    font-weight: 700;
    line-height: 1.1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
.warenkorb-tab:hover, .warenkorb-tab:focus { color: var(--marke-akzent-text, #fff); background: var(--marke-akzent-dunkel, #bb2d3b); }
.warenkorb-tab i { font-size: 1.15rem; }
.warenkorb-tab .js-warenkorb-count { font-size: .85rem; }

/* Pop-Animation für Zähler ohne Positions-Verschiebung (Kopfzeile, Reiter) */
@keyframes warenkorbPop {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.5); }
    60%  { transform: scale(.9); }
    100% { transform: scale(1); }
}
.navbar-cart .js-warenkorb-count.bump,
.warenkorb-tab .js-warenkorb-count.bump {
    animation: warenkorbPop .5s ease;
}

/* Texte mit Zeilenumbrüchen aus dem ERP (Fußzeile) */
.text-zeilenumbruch { white-space: pre-line; }

/* Effekt "in den Warenkorb": Symbol fliegt vom Button zum Warenkorb (siehe modal/add_warenkorb.php) */
.warenkorb-flieger {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;              /* über Modal (1055) und Einwilligungs-Hinweis (1090) */
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--marke-akzent, #dc3545);
    color: var(--marke-akzent-text, #fff);
    font-size: 1.05rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
    pointer-events: none;
}
/* Ring, der beim Ziel nach der Landung aufleuchtet */
@keyframes warenkorbRing {
    0%   { box-shadow: 0 0 0 0 var(--marke-akzent, #dc3545); }
    100% { box-shadow: 0 0 0 .9rem rgba(220, 53, 69, 0); }
}
.navbar-cart.warenkorb-ring,
.nav-link.warenkorb-ring,
#warenkorbCount.warenkorb-ring,
.warenkorb-tab.warenkorb-ring {
    border-radius: .5rem;
    animation: warenkorbRing .8s ease-out;
}
.warenkorb-ring-gross { animation-duration: 1.1s; }
/* Mobiler Reiter gleitet beim ersten Artikel von links herein */
@keyframes warenkorbTabEin {
    0%   { transform: translateX(-110%); }
    70%  { transform: translateX(8%); }
    100% { transform: translateX(0); }
}
.warenkorb-tab.erscheint { animation: warenkorbTabEin .5s .2s cubic-bezier(.2,.8,.3,1) backwards; }
@media (prefers-reduced-motion: reduce) {
    .warenkorb-tab.erscheint, .warenkorb-ring { animation: none; }
}

/* Zähler im Menü (Schriftgröße vorher inline) */
#warenkorbCount {
    font-size: .75rem;
}


/* Treffpunkt-Karte: Breite des Platzhalter-Inhalts (vorher inline) */
.karte-platzhalter-inhalt {
    max-width: 36rem;
}

/* ===== Kleine Hilfsklassen (vorher als style-Attribut im Markup) ===== */
.danke-icon {                       /* danke.php: Haken über der Bestätigung */
    font-size: 4rem;
}
.faq-kategorie-titel {              /* faq.php: Abstand beim Springen zu einer Kategorie */
    scroll-margin-top: 80px;
}
.badge.badge-text-schwarz {         /* index.php: Kurstyp-Badge auf Gelb */
    color: #000;
}
.resize-none {                      /* Textfelder ohne Ziehgriff */
    resize: none;
}
.toast-container.toast-hoch {       /* Hinweis-Toasts über Modals (Bootstrap-Standard 1090 -> 1080) */
    z-index: 1080;
}

/* Kennzeichnung externer Links im Menü */
.nav-extern {
    margin-right: 0.15rem;
    font-size: 0.7em;
    vertical-align: 0.05em;
}

/* Footer: DSV-Logo (Original mit weißer Kontur, damit es auf dunklem Grund lesbar bleibt) und Hinweis zur PayPal-Zahlung */
.footer-dsv {
    max-width: 16rem;
}
.footer-dsv img {
    display: block;
    width: 100%;
    height: auto;
}
.footer-zahlung {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    font-size: 0.85rem;
}
.footer-zahlung-zeile {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}
.footer-karten {
    display: inline-flex;
    gap: 0.35rem;
}
.footer-karte {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.75rem;
    padding: 0 0.45rem;
    background: #ffffff;
    border-radius: 0.3rem;
}
.footer-karte img {
    display: block;
    width: auto;
}
.footer-karte-visa img { height: 0.7rem; }
.footer-karte-mc img   { height: 1.25rem; }
.footer-zahlung-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #ffffff;
    font-size: 1.15rem;
}
.footer-zahlung-logo img {
    display: block;
    height: 1.4rem;
    width: auto;
}
.footer-zahlung-text {
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.75);
}
.footer-zahlung-text .bi {
    color: #198754;
    margin-right: 0.2rem;
}

/* ===== Markenfarbe (Akzent) für Buttons und Flächen: Standard = Rot der Skischule (wie Bootstrap "danger"),
   pro Kunde über --marke-akzent aus config/marke.inc.php ===== */
.btn-marke {
    --bs-btn-color: var(--marke-akzent-text, #fff);
    --bs-btn-bg: var(--marke-akzent, #dc3545);
    --bs-btn-border-color: var(--marke-akzent, #dc3545);
    --bs-btn-hover-color: var(--marke-akzent-text, #fff);
    --bs-btn-hover-bg: var(--marke-akzent-dunkel, #bb2d3b);
    --bs-btn-hover-border-color: var(--marke-akzent-dunkel, #b02a37);
    --bs-btn-focus-shadow-rgb: 225, 83, 97;
    --bs-btn-active-color: var(--marke-akzent-text, #fff);
    --bs-btn-active-bg: var(--marke-akzent-dunkel, #b02a37);
    --bs-btn-active-border-color: var(--marke-akzent-dunkel, #a52834);
    --bs-btn-disabled-color: var(--marke-akzent-text, #fff);
    --bs-btn-disabled-bg: var(--marke-akzent, #dc3545);
    --bs-btn-disabled-border-color: var(--marke-akzent, #dc3545);
}
.bg-marke {
    background-color: var(--marke-akzent, #dc3545) !important;
    color: var(--marke-akzent-text, #fff);
}

/* Startseite: Umschalter Winter / Sommer als Segment-Schalter (index.php, nur bei Angeboten beider Saisons).
   Der farbige Schieber gleitet unter den aktiven Knopf (data-aktiv am Container). */
.saison-umschalter {
    position: relative;
    display: flex;
    width: 100%;
    max-width: 22rem;
    padding: .3rem;
    border-radius: 999px;
    background: #eef0f2;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .12);
}
.saison-umschalter::before {
    content: "";
    position: absolute;
    top: .3rem;
    bottom: .3rem;
    left: .3rem;
    width: calc(50% - .3rem);
    border-radius: 999px;
    background: var(--marke-akzent, #dc3545);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
    transition: transform .3s ease;
}
.saison-umschalter[data-aktiv="sommer"]::before {
    transform: translateX(100%);
}
.saison-knopf {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    padding: .55rem 1rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #495057;
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
    transition: color .3s ease;
}
.saison-knopf .bi {
    margin-right: .25rem;
}
.saison-knopf.aktiv {
    color: var(--marke-akzent-text, #fff);
}
.saison-knopf:not(.aktiv):hover {
    color: var(--marke-akzent, #dc3545);
}
.saison-knopf:focus-visible {
    outline: 2px solid var(--marke-akzent, #dc3545);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .saison-umschalter::before,
    .saison-knopf {
        transition: none;
    }
}