/* Eigene koalu-spezifische Ergänzungen zum Basis-Template */

/* Suchwörter-/Keyword-Buttons (Block "Suchwörter") */
.keyword-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.keyword-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    background-color: transparent;
    color: var(--text-color);
    border-radius: 50px;
    border: 1px solid rgba(11, 1, 24, 0.15);
    font-family: var(--font-3);
    font-size: 13px;
    font-weight: 400;
    text-decoration: none;
    transition: all 0.2s ease;
    line-height: 1.2;
}

.keyword-btn:hover {
    background-color: rgba(11, 1, 24, 0.04);
    border-color: rgba(11, 1, 24, 0.3);
    color: var(--text-color);
}

.keyword-btn:active {
    transform: scale(0.97);
}

@media (max-width: 768px) {
    .keyword-btn {
        font-size: 12px;
        padding: 8px 14px;
    }
}

/* Dropdown-Menü der Hauptnavigation (Rubriken mit Unterseiten, z. B. "Über koalu") */
.navbar .dropdown-menu {
    width: 280px;
    max-width: 90vw;
    max-height: 70vh;
    overflow-y: auto;
    margin-top: 12px !important;
    padding: 8px 0;
    border-radius: 14px;
    box-shadow: 0px 12px 32px rgba(11, 1, 24, 0.18);
}

.navbar .dropdown-item {
    text-align: left;
    padding: 0.7rem 1.25rem;
    border-bottom: 1px solid rgba(11, 1, 24, 0.07);
    transition: background-color 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
}

.navbar .dropdown-menu li:last-child .dropdown-item {
    border-bottom: none;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus,
.navbar .dropdown-item.active {
    background-color: var(--accent-color);
    color: var(--primary);
    padding-left: 1.5rem;
}

@media (max-width: 993px) {
    .navbar .dropdown-menu {
        width: calc(100% - 2rem);
        max-width: calc(100% - 2rem);
        margin-inline: 1rem !important;
    }
}

/* Kompakte Spalten-Überschriften im Footer ("Links", "Kontakt") --
   h5 ist standardmäßig für größere Zwischenüberschriften gedacht (24px);
   für schmale Footer-Spaltentitel wirkt das zu wuchtig. */
.footer-heading {
    font-family: var(--font-1);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #2C5AA0 !important;
}

/* Inter Light (300) für Navigation und Footer-Link-Listen -- feiner als
   Regular, aber noch gut lesbar. Fliesstext (Absaetze) bleibt bewusst bei
   Regular (400), da Light bei laengeren Textmengen schwerer lesbar wird.
   Die Spalten-Titel ("Links"/"Kontakt") selbst bleiben bewusst fett
   (siehe .footer-heading oben), damit sie sich als Überschrift abheben. */
.nav-link,
.list.ps-0.gap-2 .link {
    font-weight: 300;
}

/* Nach-oben-Button (Tragebett-Silhouette mit Pfeilen) */
#koalu-scroll-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background-color: var(--accent-color);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 8px 20px rgba(11, 1, 24, 0.25);
    cursor: pointer;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease;
}

#koalu-scroll-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#koalu-scroll-top:hover {
    background-color: #5b3cc4;
}

#koalu-scroll-top svg {
    width: 26px;
    height: 26px;
}

@media (max-width: 576px) {
    #koalu-scroll-top {
        right: 16px;
        bottom: 16px;
        width: 48px;
        height: 48px;
    }
    #koalu-scroll-top svg {
        width: 23px;
        height: 23px;
    }
}

/* Hero-Hintergrundbild (BG1.png): das Tragebett-Motiv sitzt im linken
   Bildbereich. Bei "background-position: center" (Standard von
   .bg-attach-cover) wird auf schmalen Bildschirmen links UND rechts
   gleich stark abgeschnitten, wodurch das Tragebett verschwindet.
   Auf kleinen Bildschirmen daher von links ausgehend zuschneiden
   (rechts wegschneiden) statt mittig. */
@media (max-width: 991px) {
    [style*="BG1.png"] {
        background-position: left center !important;
    }
}

/* Einheitlicher Abstand oben bei ALLEN Hero-/Banner-Bereichen (das erste,
   direkt unter dem fest fixierten Header liegende Element jeder Seite,
   erkennbar an der Klassenkombination "position-relative bg-attach-cover").
   Manche Seiten hatten hier bislang 5rem, andere 10rem -- dadurch stand die
   Überschrift ("Über koalu" o.ä.) mal höher, mal tiefer. Jetzt einheitlich
   10rem, unabhängig vom Wert, der einzeln je Seite hinterlegt ist.
   Bewusst NUR diese Kombination getroffen, nicht "bg-attach-cover" alleine
   -- andere Hintergrundbild-Abschnitte (z. B. Team, FAQs) verwenden diese
   Klasse ohne "position-relative" und sollen unverändert bleiben. */
main .section.position-relative.bg-attach-cover {
    padding-top: 10rem !important;
}

/* Einheitliche Bildhoehe im Hero-Bereich (rechte Spalte) -- manche Seiten
   hatten hier 600px, "Über koalu" als Vorbild-Seite nur 437px. Dadurch
   verschob sich die Ueberschrift links zusaetzlich, obwohl padding-top
   oben bereits vereinheitlicht ist (der Text ist vertikal mittig zur
   Bildhoehe ausgerichtet). Nur bei xl-Breite aktiv, wo die zweispaltige
   Ansicht (Text links, Bild rechts) tatsaechlich greift -- auf Mobil
   (einspaltig) bleibt das Bild in seiner natuerlichen Groesse. */
@media (min-width: 1200px) {
    main .section.position-relative.bg-attach-cover .row.row-cols-xl-2 img {
        height: 437px !important;
        width: 100% !important;
        object-fit: cover;
    }
}

/* Manche Seiten haben ein leeres "<p> </p>"-Element direkt vor der
   Überschrift stehen (vermutlich ein Uebrigbleibsel aus der Bearbeitung),
   das die Überschrift zusätzlich nach unten schiebt. Per CSS ausblenden,
   wenn es das allererste Element im Textblock ist und keinen sichtbaren
   Inhalt hat. */
main .section.position-relative.bg-attach-cover .d-flex.flex-column > p:first-child:empty {
    display: none;
}

/* Die eigentliche Grundursache: Der Textblock (Überschrift + Text) wird
   per "justify-content-center" vertikal MITTIG zur Zeilenhoehe ausgerichtet.
   Bei laengerem Text (mehr Zeilen) fuellt der Block die Zeile staerker aus
   und die Ueberschrift landet automatisch weiter oben; bei kuerzerem Text
   bleibt mehr Leerraum, der sich oben UND unten verteilt -- die
   Ueberschrift rutscht dadurch je nach Textlaenge unterschiedlich weit
   nach unten. Fix: Text oben ausrichten statt zentrieren, damit die
   Ueberschrift IMMER an derselben Stelle beginnt, unabhaengig von der
   Textlaenge darunter oder der Bildhoehe daneben. */
main .section.position-relative.bg-attach-cover .d-flex.flex-column.justify-content-center {
    justify-content: flex-start !important;
}

/* Deko-Grafik unten rechts im Footer (.floating-footer): hatte bislang nur
   auf kleinen Bildschirmen (bis 993px) eine Breitenbegrenzung von 200px.
   Auf Desktop-Breiten fehlte diese komplett, wodurch das Bild in seiner
   vollen Originalgroesse ueber die Seite gerendert wurde. Dieselbe
   Begrenzung jetzt auch fuer Desktop ergaenzt. */
@media (min-width: 994px) {
    .floating-footer {
        width: 200px;
    }
}

/* Einheitlicher Abstand NACH dem Hero-Bereich, auf jeder Seite gleich.
   Der Hero hatte bislang unten 400px Innenabstand (padding-bottom) --
   auf der Startseite wurde das durch einen negativen Rand beim naechsten
   Block wieder kompensiert (enger sichtbarer Uebergang), auf Unterseiten
   FEHLTE diese Kompensation komplett. Dadurch war der sichtbare Abstand
   zwischen Hero und Inhalt auf Unterseiten fast 500px, auf der Startseite
   dagegen nur ca. 30px -- voellig uneinheitlich. Jetzt ueberall gleich:
   Hero bekommt denselben Abstand (96px) wie alle anderen Bloecke auch. */
main .section.position-relative.bg-attach-cover {
    padding-bottom: 96px !important;
}

/* Alle übrigen Abschnitte einer Seite (direkt unter <main>) bekommen
   ebenfalls garantiert denselben Abstand oben/unten -- unabhängig davon,
   was jeweils einzeln je Seite/Block hinterlegt ist. Der Hero (oben
   bereits gesondert behandelt) wird hier bewusst ausgenommen. */
main > .section:not(.position-relative.bg-attach-cover) {
    padding-top: 96px !important;
    padding-bottom: 96px !important;
}

/* Der Block direkt nach dem Hero hatte auf der Startseite einen extra
   eingebauten negativen Rand (margin-top: -23rem als Inline-Stil), der den
   ehemals großen Hero-Abstand (400px) wieder ausgeglichen hat. Da der
   Hero-Abstand jetzt ueberall einheitlich 96px ist, wird dieser
   Ausgleich nicht mehr gebraucht -- sonst wuerde der Block jetzt in den
   Hero hineinragen/ihn ueberlappen. */
main .section.position-relative.bg-attach-cover + .section {
    margin-top: 0 !important;
}

/* "Deine Vorteile"-Überschrift und die Karussell-Karten direkt danach
   gehören inhaltlich zusammen (ein gemeinsamer Abschnitt), sollen also
   deutlich enger stehen als zwei unabhängige, aufeinanderfolgende
   Seitenabschnitte. Ueberschrift-Block bekommt weniger Abstand unten,
   der Karten-Block direkt danach weniger Abstand oben.
   Hinweis: Die Klasse "js-carousel-heading-section" wird per JavaScript
   gesetzt (siehe script.js) statt ":has()" zu nutzen, da diese CSS-Funktion
   in manchen (auch aktuell noch verbreiteten) Browsern nicht unterstuetzt
   wird und die Regel dort sonst komplett wirkungslos waere. */
main .section.section.js-carousel-heading-section {
    padding-bottom: 24px !important;
}
main .section.section.js-carousel-heading-section + .section {
    padding-top: 24px !important;
}

/* Absatzabstand im Karussell-Überschriftenbereich – gleich wie Bootstrap-Standard (1rem),
   damit Editor und Frontend identisch aussehen. */
.koalu-carousel-heading p {
    margin-bottom: 1rem;
}

/* ==========================================================
   Großes Hauptmenü („Shop“ und „Über koalu“)
   Aufbau siehe includes/hauptmenue.php, Pflege unter
   verwaltung/hauptmenue.php.
   ========================================================== */
.koalu-mega-top {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Beschriftung einer Rubrik ohne eigene Seite: kein Link, sondern ein
   Schalter, der das Menue aufklappt. Sieht aus wie die anderen
   Menuepunkte -- der Besucher soll keinen Unterschied bemerken. */
.koalu-mega-top .koalu-mega-text {
    font: inherit;
    border: 0;
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.koalu-mega-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-left: -0.6rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-color);
    cursor: pointer;
}

.koalu-mega-toggle svg {
    transition: transform 0.2s ease;
}

.koalu-mega-toggle:hover,
.koalu-mega-toggle:focus-visible {
    color: var(--accent-color);
}

.koalu-mega-top .nav-link.active + .koalu-mega-toggle {
    margin-left: 0.25rem;
}

.koalu-mega-heading {
    font-family: var(--font-1);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-color);
    margin-bottom: 14px;
}

.koalu-mega-list,
.koalu-mega-sublist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.koalu-mega-list > li + li {
    margin-top: 10px;
}

.koalu-mega-list a {
    font-family: var(--font-3);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.15s ease;
}

.koalu-mega-list a:hover,
.koalu-mega-list a:focus-visible {
    color: var(--accent-color);
}

.koalu-mega-sublist {
    margin: 8px 0 0 12px;
    padding-left: 12px;
    border-left: 1px solid rgba(112, 79, 230, 0.2);
}

.koalu-mega-sublist li + li {
    margin-top: 6px;
}

.koalu-mega-sublist a {
    font-size: 14px;
    color: var(--text-color-2);
}

.koalu-mega-all {
    display: inline-block;
    margin-top: 22px;
    font-size: 15px;
    font-weight: 600;
    color: var(--accent-color);
    text-decoration: none;
    border-bottom: 2px solid currentColor;
}

/* Desktop: Panel unter dem Header, öffnet beim Überfahren */
@media (min-width: 1200px) {
    .navbar .koalu-mega {
        position: static;
    }

    .koalu-mega-panel {
        position: absolute;
        left: 0.75rem;
        right: 0.75rem;
        top: 100%;
        z-index: 1050;
        padding-top: 10px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
    }

    .koalu-mega:hover > .koalu-mega-panel,
    .koalu-mega:focus-within > .koalu-mega-panel,
    .koalu-mega.is-open > .koalu-mega-panel {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition-delay: 0s;
    }

    .koalu-mega:hover .koalu-mega-toggle svg,
    .koalu-mega:focus-within .koalu-mega-toggle svg,
    .koalu-mega.is-open .koalu-mega-toggle svg {
        transform: rotate(180deg);
    }

    .koalu-mega-inner {
        display: flex;
        gap: 48px;
        padding: 36px 44px;
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 18px 44px rgba(11, 1, 24, 0.16);
        text-align: left;
        /* Nie hoeher als der sichtbare Bereich -- sonst laeuft das Menue
           bei niedrigen Fenstern unten aus dem Bild. */
        max-height: calc(100vh - 150px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .koalu-mega-links {
        flex: 1 1 auto;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 32px;
        align-content: start;
    }

    /* Drei Spalten: Rubriken -- Empfehlungen -- Konto. Stuende das
       Konto unter den Rubriken, waere das Menue doppelt so hoch. */
    .koalu-mega--shop .koalu-mega-links {
        flex: 0 0 250px;
        grid-template-columns: minmax(0, 1fr);
    }

    /* Rechte Spalte: Knopf oben, Konto darunter */
    .koalu-mega-col--rechts {
        flex: 0 0 180px;
        align-self: start;
    }

    .koalu-mega-col--rechts > .koalu-mega-all {
        margin-top: 0;
    }

    /* Ein Satz zu jeder Rubrik, aus ihrer Beschreibung gekürzt */
    .koalu-mega-list-sub {
        display: block;
        margin-top: 3px;
        font-size: 12.5px;
        line-height: 1.45;
        color: var(--text-color-2);
    }

    /* ----------------------------------------------------------------
       Linke Spalte des Shop-Menüs: Trennlinien unter jeder Rubrik,
       kräftigere Namen, „Zum Shop" als Knopf. Nur im Shop-Menü --
       „Über koalu" bleibt, wie es war.
       ---------------------------------------------------------------- */
    .koalu-mega--shop .koalu-mega-list > li {
        padding: 11px 0;
        border-bottom: 1px solid rgba(112, 79, 230, 0.18);
    }

    /* Der alte Abstand zwischen den Punkten entfällt -- den Abstand
       macht jetzt das padding, sonst stehen die Linien schief. */
    .koalu-mega--shop .koalu-mega-list > li + li {
        margin-top: 0;
    }

    .koalu-mega--shop .koalu-mega-list > li > a {
        font-weight: 600;
    }

    /* Die Kontoliste bleibt leicht */
    .koalu-mega--shop .koalu-mega-col--konto .koalu-mega-list > li > a {
        font-weight: 400;
    }

    .koalu-mega--shop .koalu-mega-col--konto .koalu-mega-list > li:last-child {
        border-bottom: 0;
    }

    /* Unterrubriken ohne den senkrechten Strich */
    .koalu-mega--shop .koalu-mega-sublist {
        margin: 7px 0 1px;
        padding-left: 14px;
        border-left: 0;
    }

    .koalu-mega--shop .koalu-mega-sublist > li {
        padding: 3px 0;
    }

    .koalu-mega--shop .koalu-mega-sublist > li + li {
        margin-top: 0;
    }

    /* „Zum Shop" als Knopf statt als unterstrichener Text */
    .koalu-mega--shop .koalu-mega-all {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 18px;
        padding: 11px 22px;
        border-radius: 999px;
        border-bottom: 0;
        background: var(--accent-color);
        color: #fff;
        font-size: 14px;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .koalu-mega--shop .koalu-mega-all:hover,
    .koalu-mega--shop .koalu-mega-all:focus-visible {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(112, 79, 230, 0.35);
    }

    /* Etwas weniger Luft zwischen den Spalten als im „Über koalu"-Menü */
    .koalu-mega--shop .koalu-mega-inner {
        gap: 36px;
    }

    .koalu-mega-links--1 { grid-template-columns: minmax(0, 1fr); }
    .koalu-mega-links--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .koalu-mega-links--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    .koalu-mega-aside {
        flex: 0 1 auto;
        display: grid;
        gap: 20px;
    }

    /* ----------------------------------------------------------------
       Empfehlungen: eine große Karte, darunter zwei kleine, darunter
       die Vorteile. Die große zeigt das erste Produkt der im
       Adminbereich gepflegten Reihenfolge.
       ---------------------------------------------------------------- */
    .koalu-mega-empf {
        flex: 1 1 auto;
        gap: 18px;
        align-content: start;
    }

    /* --- die große Empfehlung --- */
    .koalu-mega-gross {
        display: grid;
        grid-template-columns: 260px minmax(0, 1fr);
        gap: 22px;
        align-items: center;
        padding: 18px;
        border: 1px solid var(--accent-color-4, #F7F1FF);
        border-radius: 16px;
        background: var(--accent-color-4, #F7F1FF);
        text-decoration: none;
        color: var(--text-color);
        transition: box-shadow 0.25s ease;
    }

    a.koalu-mega-gross:hover,
    a.koalu-mega-gross:focus-visible {
        box-shadow: 0 12px 30px rgba(112, 79, 230, 0.18);
    }

    .koalu-mega-gross-bild {
        position: relative;
        display: block;
        padding: 10px;
        border-radius: 12px;
        background: #fff;
    }

    /* Volle Breite, nichts abgeschnitten */
    .koalu-mega-gross-bild img {
        display: block;
        width: 100%;
        height: auto;
    }

    .koalu-mega-gross-text {
        display: block;
        min-width: 0;
    }

    .koalu-mega-kick {
        display: block;
        font-family: var(--font-1);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--accent-color);
    }

    .koalu-mega-gross-name {
        display: block;
        font-family: var(--font-1);
        font-size: 21px;
        line-height: 1.2;
        margin: 5px 0 8px;
    }

    .koalu-mega-gross-sub {
        display: block;
        margin-bottom: 12px;
        font-size: 14px;
        line-height: 1.5;
        color: var(--text-color-2);
    }

    .koalu-mega-gross-preis {
        display: block;
        font-size: 19px;
        font-weight: 700;
        color: var(--accent-color);
    }

    .koalu-mega-gross-preis s {
        margin-left: 6px;
        font-size: 15px;
        font-weight: 400;
        color: var(--text-color-2);
    }

    .koalu-mega-mwst {
        margin-left: 6px;
        font-size: 12px;
        font-weight: 400;
        color: var(--text-color-2);
    }

    .koalu-mega-knopf {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 14px;
        padding: 11px 22px;
        border-radius: 999px;
        background: var(--accent-color);
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    a.koalu-mega-gross:hover .koalu-mega-knopf {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(112, 79, 230, 0.35);
    }

    /* --- die kleinen Karten darunter --- */
    .koalu-mega-kleine {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .koalu-mega-klein {
        display: flex;
        align-items: center;
        gap: 13px;
        padding: 12px;
        border: 1px solid var(--accent-color-4, #F7F1FF);
        border-radius: 14px;
        background: #fff;
        text-decoration: none;
        color: var(--text-color);
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    a.koalu-mega-klein:hover,
    a.koalu-mega-klein:focus-visible {
        border-color: var(--accent-color);
        box-shadow: 0 8px 20px rgba(112, 79, 230, 0.14);
    }

    .koalu-mega-klein-bild {
        position: relative;
        flex: 0 0 auto;
        width: 92px;
        height: 68px;
        padding: 5px;
        border-radius: 10px;
        background: var(--accent-color-4, #F7F1FF);
    }

    .koalu-mega-klein-bild img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .koalu-mega-klein-text {
        min-width: 0;
    }

    .koalu-mega-klein-name {
        display: block;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.3;
    }

    .koalu-mega-klein-sub {
        display: block;
        margin: 2px 0 4px;
        font-size: 12px;
        line-height: 1.4;
        color: var(--text-color-2);
    }

    .koalu-mega-klein-preis {
        display: block;
        font-size: 14px;
        font-weight: 700;
        color: var(--accent-color);
    }

    .koalu-mega-klein-preis s {
        margin-left: 4px;
        font-weight: 400;
        color: var(--text-color-2);
    }

    /* --- Rabatt-Plakette, auf beiden Kartenarten --- */
    .koalu-mega-badge {
        position: absolute;
        top: 10px;
        left: 10px;
        padding: 2px 10px;
        border-radius: 999px;
        background: var(--accent-color);
        color: #fff;
        font-size: 12px;
        font-weight: 700;
    }

    .koalu-mega-klein-bild .koalu-mega-badge {
        top: 4px;
        left: 4px;
        padding: 1px 7px;
        font-size: 10px;
    }

    /* --- die drei Vorteile --- */
    .koalu-mega-vorteile {
        display: flex;
        flex-wrap: wrap;
        gap: 24px;
        padding-top: 14px;
        border-top: 1px solid rgba(112, 79, 230, 0.18);
        font-size: 13px;
        color: var(--text-color-2);
    }

    .koalu-mega-vorteile span {
        display: inline-flex;
        align-items: center;
        gap: 7px;
    }

    .koalu-mega-hak {
        color: var(--accent-color);
        font-weight: 700;
    }

    /* Banner */
    .koalu-mega-banners {
        flex: 0 0 auto;
        grid-template-columns: repeat(2, 230px);
    }

    .koalu-mega-banners--1 {
        grid-template-columns: 230px;
    }

    .koalu-mega-banner {
        position: relative;
        display: block;
        aspect-ratio: 4 / 5;
        overflow: hidden;
        border-radius: 16px;
        background: var(--accent-color-4);
        text-decoration: none;
    }

    .koalu-mega-banner img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s ease;
    }

    a.koalu-mega-banner:hover img {
        transform: scale(1.06);
    }

    .koalu-mega-banner-text {
        position: absolute;
        left: 20px;
        right: 20px;
        bottom: 20px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .koalu-mega-banner-title {
        font-family: 'Huger Black', var(--font-1);
        font-size: 22px;
        line-height: 1.1;
        color: var(--text-color);
    }

    .koalu-mega-banner-link {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-color);
        border-bottom: 2px solid currentColor;
    }

    a.koalu-mega-banner:hover .koalu-mega-banner-link {
        color: var(--accent-color);
    }
}

/* Etwas schmalere Desktops */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .koalu-mega-inner {
        gap: 32px;
        padding: 30px 32px;
    }

    .koalu-mega-banners {
        grid-template-columns: repeat(2, 190px);
    }

    .koalu-mega-gross {
        grid-template-columns: 190px minmax(0, 1fr);
        gap: 18px;
    }

    .koalu-mega--shop .koalu-mega-links {
        flex: 0 0 220px;
    }

    .koalu-mega-col--rechts {
        flex: 0 0 158px;
    }

    .koalu-mega--shop .koalu-mega-inner {
        gap: 28px;
    }

    .koalu-mega-klein-bild {
        width: 76px;
        height: 58px;
    }

    .koalu-mega-gross-name {
        font-size: 19px;
    }

    .koalu-mega-banners--1 {
        grid-template-columns: 190px;
    }
}

/* Handy/Tablet: Aufklappliste, ohne Produkte und Banner */
@media (max-width: 1199.98px) {
    .koalu-mega-toggle {
        margin-left: 0.1rem;
    }

    .koalu-mega-panel {
        display: none;
        padding: 6px 0 14px;
    }

    .koalu-mega.is-open > .koalu-mega-panel {
        display: block;
    }

    .koalu-mega.is-open .koalu-mega-toggle svg {
        transform: rotate(180deg);
    }

    .koalu-mega-inner,
    .koalu-mega-links {
        display: block;
        text-align: center;
    }

    .koalu-mega-col + .koalu-mega-col {
        margin-top: 16px;
    }

    .koalu-mega-heading {
        font-size: 11px;
        margin-bottom: 8px;
    }

    .koalu-mega-list > li + li {
        margin-top: 6px;
    }

    .koalu-mega-list a {
        font-size: 15px;
    }

    .koalu-mega-sublist {
        margin: 6px 0 0;
        padding: 0;
        border-left: 0;
    }

    .koalu-mega-all {
        margin-top: 12px;
        font-size: 14px;
    }

    .koalu-mega-aside {
        display: none;
    }

    /* Die Sätze unter den Rubriken machen die Aufklappliste zu lang */
    .koalu-mega-list-sub {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .koalu-mega-panel,
    .koalu-mega-toggle svg,
    .koalu-mega-banner img,
    .koalu-mega-gross,
    .koalu-mega-klein,
    .koalu-mega-knopf,
    .koalu-mega--shop .koalu-mega-all {
        transition: none !important;
    }
}

/* ==================================================================
   Kontakt-Seite: Kacheln (Adresse / Telefon / E-Mail / Website)
   ------------------------------------------------------------------
   In den Kacheln steht weiße Schrift auf farbigem Grund. Telefon,
   E-Mail und Website sind anklickbare Links und wären sonst blau
   (Browser-Standard) – hier übernehmen sie die Farbe der Kachel.
   ================================================================== */
.kontakt-karte a {
    color: inherit;
    text-decoration: none;
}

.kontakt-karte a:hover,
.kontakt-karte a:focus {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ==================================================================
   Kleine Ueberschrift mit Pinselstrich
   ------------------------------------------------------------------
   .brush1 ist im Theme ein inline-block. Steht die Ueberschrift aber
   in einer d-flex flex-column (so bauen die Banner ihren Kopfbereich),
   zieht die Flex-Vorgabe "stretch" sie auf die ganze Spaltenbreite --
   und der Pinselstrich dahinter wird mitgezogen. Mit max-content
   bleibt sie so breit wie ihr Text; bei zentrierten Koepfen aendert
   sich dadurch nichts.
   ================================================================== */
h6.brush1 {
    width: max-content;
    max-width: 100%;
}

/* ==================================================================
   Text + Bild (links / rechts)
   ------------------------------------------------------------------
   Der Kopfbereich steht ueber der Textspalte -- steht das Bild links,
   rueckt er also nach rechts. Kicker und Ueberschrift sind darin
   immer linksbuendig, genau wie der Fließtext darunter.

   Das Bild sitzt in einem eigenen Kasten (.pb-textbild__bild). Der
   traegt Breite, Umfluss und den senkrechten Balken; das Bild selbst
   bleibt dadurch unbeschnitten und an allen vier Ecken abgerundet.

   Unter jedem Block steht ein waagerechter Trennbalken.
   ================================================================== */
/* Der Kopfbereich ist das erste Kind des Containers -- alles ausser dem
   Textkoerper. So werden auch aeltere Bloecke erfasst, deren Kopf noch
   "text-center mx-auto" traegt und deshalb mittig stand. Weil das
   Bootstrap-Klassen mit !important sind, muss hier ebenfalls !important
   stehen. */
.pb-textbild > .r-container > *:not(.pb-textbild__body) {
    align-items: flex-start !important;
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* Bild links -> der Kopf gehoert ueber die Textspalte, also nach rechts. */
.pb-textbild--left > .r-container > *:not(.pb-textbild__body) {
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* Genau an der Textkante beginnen: beim neuen Markup sagt die Klasse an
   der Section die Bildbreite, beim aelteren die Klasse am Bild selbst.
   Nur ab Tablet-Breite -- am Handy steht das Bild ueber dem Text. */
@media (min-width: 768px) {
.pb-textbild--left.pb-textbild--w25 > .r-container > *:not(.pb-textbild__body),
.pb-textbild--left:has(.pb-textbild__img--w25) > .r-container > *:not(.pb-textbild__body) { margin-left: calc(25% + 2rem) !important; }
.pb-textbild--left.pb-textbild--w33 > .r-container > *:not(.pb-textbild__body),
.pb-textbild--left:has(.pb-textbild__img--w33) > .r-container > *:not(.pb-textbild__body) { margin-left: calc(33% + 2rem) !important; }
.pb-textbild--left.pb-textbild--w40 > .r-container > *:not(.pb-textbild__body),
.pb-textbild--left:has(.pb-textbild__img--w40) > .r-container > *:not(.pb-textbild__body) { margin-left: calc(40% + 2rem) !important; }
.pb-textbild--left.pb-textbild--w50 > .r-container > *:not(.pb-textbild__body),
.pb-textbild--left:has(.pb-textbild__img--w50) > .r-container > *:not(.pb-textbild__body) { margin-left: calc(50% + 2rem) !important; }
.pb-textbild--left.pb-textbild--w60 > .r-container > *:not(.pb-textbild__body),
.pb-textbild--left:has(.pb-textbild__img--w60) > .r-container > *:not(.pb-textbild__body) { margin-left: calc(60% + 2rem) !important; }
}

/* ---- Bildkasten: traegt Breite, Umfluss und Balken --------------- */
.pb-textbild__bild {
    position: relative;
    display: block;
    margin-bottom: 1rem;
}

.pb-textbild--right .pb-textbild__bild {
    float: right;
    margin-left: 2rem;
}

.pb-textbild--left .pb-textbild__bild {
    float: left;
    margin-right: 2rem;
}

.pb-textbild__bild--w25 { width: 25%; }
.pb-textbild__bild--w33 { width: 33%; }
.pb-textbild__bild--w40 { width: 40%; }
.pb-textbild__bild--w50 { width: 50%; }
.pb-textbild__bild--w60 { width: 60%; }

/* Das Bild fuellt den Kasten -- ohne Rahmen, ohne Innenabstand, damit
   die Abrundung an allen vier Ecken sichtbar bleibt. */
.pb-textbild .pb-textbild__bild > .pb-textbild__img {
    float: none;
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
}

/* Der senkrechte Balken: mittig im Abstand, genau so hoch wie das Bild */
.pb-textbild__bild::before {
    content: "";
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    background: rgba(112, 79, 230, 0.25);
}

.pb-textbild--right .pb-textbild__bild::before { left: -1rem; }
.pb-textbild--left .pb-textbild__bild::before { right: -1rem; }

/* ---- Waagerechter Trennbalken unter dem Block -------------------- */
.pb-textbild > .r-container {
    padding-bottom: 2.5rem;
    border-bottom: 1px solid rgba(112, 79, 230, 0.18);
}

/* ---- Aelteres Markup ohne Bildkasten ----------------------------- */
/* Bloecke, die noch nicht neu gespeichert wurden: Bild ohne Rahmen und
   ohne Innenabstand, damit auch dort alle vier Ecken rund sind. */
.pb-textbild--right .pb-textbild__img,
.pb-textbild--left .pb-textbild__img {
    border: 0;
    padding: 0;
}

.pb-textbild__img--w25 { width: 25%; }
.pb-textbild__img--w60 { width: 60%; }

/* Handy: Bild steht ueber dem Text -- Kopf links, kein senkrechter Balken */
@media (max-width: 767.98px) {
    /* Am Handy steht das Bild ueber dem Text -- der Kopf gehoert dann
       immer ganz nach links, egal welche Bildbreite eingestellt ist. */
    .pb-textbild > .r-container > *:not(.pb-textbild__body),
    .pb-textbild--left > .r-container > *:not(.pb-textbild__body) {
        margin-left: 0 !important;
        margin-right: auto !important;
    }

    .pb-textbild--right .pb-textbild__bild,
    .pb-textbild--left .pb-textbild__bild {
        float: none;
        width: 100%;
        margin: 0 0 1.5rem 0;
    }

    .pb-textbild__bild::before { display: none; }

    .pb-textbild > .r-container {
        padding-bottom: 2rem;
    }
}

/* ==================================================================
   Kundenstimmen (Akkordeon)
   ------------------------------------------------------------------
   Zugeklappt hat der Titel die Farbe, die zur gewaehlten Kachelfarbe
   passt (--kt-titel, wird beim Rendern gesetzt). Aufgeklappt faerbt
   das Theme den Kopf dunkellila -- dann muss der Titel hell sein,
   sonst steht Schwarz auf Lila.
   ================================================================== */
.accordion .accordion-item-faq .accordion-button.collapsed {
    color: var(--kt-titel, var(--text-color));
}

.accordion .accordion-item-faq .accordion-button:not(.collapsed) {
    color: var(--primary);
}

/* ==================================================================
   Umfrage „Wo stehst du gerade?" im Panel „Was beschäftigt dich"
   ================================================================== */
#koalu-umfrage-fortschritt {
    height: 4px;
    border-radius: 4px;
    background: rgba(112, 79, 230, 0.15);
    overflow: hidden;
    margin-bottom: 14px;
}

#koalu-umfrage-fortschritt span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--accent-color, #704FE6);
    transition: width .3s ease;
}

#koalu-umfrage-zaehler {
    margin: 0 0 2px;
    font-size: 12px;
    color: var(--text-color);
    opacity: .55;
}

#koalu-umfrage-gruppe {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--accent-color, #704FE6);
}

#koalu-umfrage-frage {
    margin: 0 0 16px;
    font-size: 20px;
    line-height: 1.35;
    color: var(--text-color);
}

#koalu-umfrage-antworten {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.koalu-umfrage-antwort {
    width: 100%;
    text-align: left;
    padding: 13px 16px;
    border-radius: 12px;
    border: 1px solid rgba(11, 1, 24, 0.14);
    background: #fff;
    color: var(--text-color);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.4;
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .08s;
}

.koalu-umfrage-antwort:hover {
    border-color: var(--accent-color, #704FE6);
    background: rgba(112, 79, 230, 0.05);
}

.koalu-umfrage-antwort:active { transform: scale(.985); }

.koalu-umfrage-antwort.is-gewaehlt {
    border-color: var(--accent-color, #704FE6);
    background: var(--accent-color, #704FE6);
    color: #FBF8FF;
    font-weight: 500;
}

#koalu-umfrage-hinweis {
    margin: 12px 0 0;
    font-size: 12px;
    color: var(--text-color);
    opacity: .5;
}

#koalu-umfrage-navi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    /* bleibt am unteren Panelrand stehen, damit „Weiter" immer erreichbar ist */
    position: sticky;
    bottom: -30px;
    padding: 12px 0 16px;
    background: var(--primary, #FBF8FF);
    box-shadow: 0 -10px 12px -10px rgba(11, 1, 24, .18);
}

#koalu-umfrage-zurueck,
#koalu-umfrage-weiter {
    border-radius: 11px;
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    padding: 10px 20px;
}

#koalu-umfrage-zurueck {
    border: 1px solid rgba(11, 1, 24, 0.18);
    background: transparent;
    color: var(--text-color);
}

#koalu-umfrage-zurueck:hover { border-color: rgba(11, 1, 24, 0.4); }

#koalu-umfrage-weiter {
    border: 0;
    background: var(--accent-color, #704FE6);
    color: #FBF8FF;
    font-weight: 600;
    margin-left: auto;
}

#koalu-umfrage-weiter:hover { background: #5b3fd0; }
#koalu-umfrage-weiter:disabled { opacity: .45; cursor: default; }

/* Abschluss */
#koalu-umfrage-ende { display: none; text-align: center; padding: 26px 0 10px; }

#koalu-umfrage.ist-fertig #koalu-umfrage-fortschritt,
#koalu-umfrage.ist-fertig #koalu-umfrage-zaehler,
#koalu-umfrage.ist-fertig #koalu-umfrage-gruppe,
#koalu-umfrage.ist-fertig #koalu-umfrage-frage,
#koalu-umfrage.ist-fertig #koalu-umfrage-antworten,
#koalu-umfrage.ist-fertig #koalu-umfrage-hinweis,
#koalu-umfrage.ist-fertig #koalu-umfrage-navi {
    display: none;
}

#koalu-umfrage-ende-icon {
    width: 76px;
    height: 76px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(112, 79, 230, .12);
    color: var(--accent-color, #704FE6);
}

#koalu-umfrage-ende h3 { margin: 0 0 8px; font-size: 22px; color: var(--text-color); }
#koalu-umfrage-ende-text { margin: 0 0 18px; font-size: 14.5px; color: var(--text-color); opacity: .7; }

#koalu-umfrage-tipps { display: flex; flex-direction: column; gap: 8px; }

.koalu-umfrage-tipp {
    display: block;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--accent-color-3, #DEC8FE);
    color: var(--text-color);
    text-decoration: none;
    font-size: 15px;
    text-align: left;
}

.koalu-umfrage-tipp:hover { background: var(--accent-color, #704FE6); color: #FBF8FF; }

@media (prefers-reduced-motion: reduce) {
    #koalu-umfrage-fortschritt span { transition: none; }
    .koalu-umfrage-antwort { transition: none; }
    .koalu-umfrage-antwort:active { transform: none; }
}

/* ==================================================================
   koalu-Klub (Registrierung, Anmeldung, Klubbereich)
   ------------------------------------------------------------------
   Eigene, bewusst schlichte Formulargestaltung -- sie soll sich in die
   Website einfuegen, ohne mit den Shop-Formularen zu kollidieren.
   ================================================================== */
.klub-section {
    padding-top: 4rem;
    padding-bottom: 5rem;
}

.klub-karte {
    background: #FFFFFF;
    border: 1px solid rgba(112, 79, 230, 0.15);
    border-radius: 24px;
    padding: 2.5rem;
    max-width: 720px;
    margin: 0 auto;
    box-shadow: 0 18px 40px -28px rgba(11, 1, 24, .35);
}

.klub-karte--schmal { max-width: 520px; }

.klub-karte h3 { margin-bottom: .75rem; }
.klub-karte > p { margin-bottom: 1rem; }

.klub-einleitung { color: var(--text-color, #4B4B4B); margin-bottom: 1.75rem; }
.klub-klein { font-size: 13px; color: #6B7280; }

.klub-hinweis {
    border-radius: 12px;
    padding: .85rem 1rem;
    font-size: 14px;
    margin-bottom: 1.25rem;
}
.klub-hinweis a { color: inherit; text-decoration: underline; }

/* ---- Formular --------------------------------------------------- */
.klub-formular { display: flex; flex-direction: column; gap: 1.1rem; }

.klub-reihe {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem;
}

.klub-feld { display: flex; flex-direction: column; gap: .35rem; }

.klub-feld label {
    font-size: 14px;
    font-weight: 600;
    color: var(--heading-color, #0B0118);
}

.klub-feld input[type="text"],
.klub-feld input[type="email"],
.klub-feld input[type="password"],
.klub-feld select {
    width: 100%;
    padding: .8rem 1rem;
    border: 1px solid rgba(11, 1, 24, .15);
    border-radius: 12px;
    background: #FFFFFF;
    font-size: 15px;
    color: var(--text-color, #4B4B4B);
    font-family: inherit;
}

.klub-feld input:focus,
.klub-feld select:focus {
    outline: none;
    border-color: var(--accent-color, #704FE6);
    box-shadow: 0 0 0 3px rgba(112, 79, 230, .12);
}

.klub-fehler { font-size: 13px; color: #B91C1C; }

.klub-haken label {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    cursor: pointer;
}
.klub-haken input { margin-top: .2rem; flex-shrink: 0; }
.klub-haken a { color: var(--accent-color, #704FE6); }

.klub-captcha {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}
.klub-captcha img { border-radius: 10px; border: 1px solid rgba(11,1,24,.1); }
.klub-captcha input { max-width: 140px; text-transform: uppercase; letter-spacing: .15em; }
.klub-captcha button {
    border: 1px solid rgba(11, 1, 24, .15);
    background: #FFFFFF;
    border-radius: 10px;
    width: 40px;
    height: 40px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    color: #6B7280;
}
.klub-captcha button:hover { border-color: var(--accent-color, #704FE6); color: var(--accent-color, #704FE6); }

/* ---- Knoepfe ---------------------------------------------------- */
.klub-knopf {
    display: inline-block;
    background: var(--accent-color, #704FE6);
    color: #FFFFFF;
    border: 0;
    border-radius: 999px;
    padding: .9rem 2rem;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    align-self: flex-start;
}
.klub-knopf:hover { background: #5B3FD0; color: #FFFFFF; }

.klub-knopf--leise {
    background: transparent;
    color: var(--accent-color, #704FE6);
    border: 1px solid rgba(112, 79, 230, .35);
}
.klub-knopf--leise:hover { background: rgba(112, 79, 230, .08); color: var(--accent-color, #704FE6); }

.klub-wechsel { margin-top: 1.5rem; font-size: 14px; }
.klub-wechsel a { color: var(--accent-color, #704FE6); }

.klub-symbol {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(112, 79, 230, .12);
    color: var(--accent-color, #704FE6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin-bottom: 1.25rem;
}

/* ---- Datenschutz-Popup bei der Registrierung --------------------- */
/* Der Text darin kommt aus der Seite "Rechtliche Inhalte -> Datenschutz",
   wird also im Adminbereich gepflegt wie bisher. */
.klub-textknopf {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--accent-color, #704FE6);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.klub-textknopf:hover { color: #5B3FD0; }

.klub-overlay {
    position: fixed;
    inset: 0;
    background: rgba(11, 1, 24, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    z-index: 99990;
}
.klub-overlay[hidden] { display: none; }

.klub-overlay__kasten {
    background: #FFFFFF;
    border-radius: 20px;
    width: 100%;
    max-width: 820px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(11, 1, 24, .35);
}

.klub-overlay__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid rgba(11, 1, 24, .1);
    flex-shrink: 0;
}
.klub-overlay__kopf strong { font-size: 17px; color: var(--heading-color, #0B0118); }

.klub-overlay__x {
    background: none;
    border: 0;
    font-size: 26px;
    line-height: 1;
    color: #6B7280;
    cursor: pointer;
    padding: 0 .25rem;
}
.klub-overlay__x:hover { color: #B91C1C; }

.klub-overlay__inhalt {
    overflow-y: auto;
    padding: 1.5rem;
    flex: 1 1 auto;
}
.klub-overlay__inhalt:focus { outline: none; }

/* Der Datenschutztext bringt eigene Abschnitte mit -- die Abstaende der
   Website wuerden im Popup viel zu gross wirken. */
.klub-overlay__inhalt .section { padding: 0 !important; }
.klub-overlay__inhalt .r-container { padding-left: 0; padding-right: 0; max-width: none; }
.klub-overlay__inhalt h1,
.klub-overlay__inhalt h2,
.klub-overlay__inhalt h3 { font-size: 21px; margin: 1.5rem 0 .6rem; }
.klub-overlay__inhalt h4,
.klub-overlay__inhalt h5,
.klub-overlay__inhalt h6 { font-size: 17px; margin: 1.25rem 0 .5rem; }
.klub-overlay__inhalt p,
.klub-overlay__inhalt li { font-size: 14px; line-height: 1.7; }
.klub-overlay__inhalt > *:first-child { margin-top: 0; }

.klub-overlay__fuss {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(11, 1, 24, .1);
    flex-shrink: 0;
}
.klub-overlay__fuss .klub-knopf { padding: .65rem 1.5rem; }

/* ---- Startseite im Klubbereich ---------------------------------- */
.klub-begruessung {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}

.klub-kacheln {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.klub-kachel {
    background: #FFFFFF;
    border: 1px solid rgba(112, 79, 230, .15);
    border-radius: 20px;
    padding: 1.75rem;
}
.klub-kachel h5 { margin-bottom: .75rem; }
.klub-kachel p { margin-bottom: .5rem; font-size: 15px; }
.klub-kachel a { color: var(--accent-color, #704FE6); }

@media (max-width: 767.98px) {
    .klub-karte { padding: 1.75rem 1.25rem; border-radius: 18px; }
    .klub-reihe { grid-template-columns: 1fr; }
    .klub-kacheln { grid-template-columns: 1fr; }
    .klub-section { padding-top: 2.5rem; padding-bottom: 3rem; }
    .klub-knopf { width: 100%; text-align: center; }

    .klub-overlay { padding: 0; }
    .klub-overlay__kasten { max-height: 100vh; border-radius: 0; height: 100%; }
    .klub-overlay__kopf,
    .klub-overlay__fuss { padding: 1rem; }
    .klub-overlay__inhalt { padding: 1rem; }
    .klub-overlay__fuss { flex-direction: column-reverse; align-items: stretch; gap: .75rem; }
    .klub-overlay__fuss .klub-klein { text-align: center; }
}