/* 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;
    }

    /* Die Kachel ist ein Stapel: Ueberschrift, Bild, Linktext.
       Frueher lag der Text auf dem Bild und das Bild wurde per
       "cover" auf Hochformat 4:5 zugeschnitten -- bei einem
       Querformat-Bild fiel dabei fast die halbe Breite weg.
       Jetzt bestimmt das Bild die Hoehe der Kachel. */
    .koalu-mega-banner {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 14px;
        border: 1px solid var(--accent-color);
        border-radius: 16px;
        background: var(--accent-color-4);
        text-decoration: none;
    }

    /* Huelle um das Bild -- sie fasst den Zoom beim Ueberfahren ein,
       damit er nicht ueber den Rahmen hinauslaeuft. */
    .koalu-mega-banner-bild {
        display: block;
        overflow: hidden;
        border-radius: 8px;
    }

    .koalu-mega-banner img {
        display: block;
        width: 100%;
        height: auto;
        transition: transform 0.6s ease;
    }

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

    .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 {
        align-self: flex-start;
        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; }
}


/* ==================================================================
   Handy-Ansicht der Seitenabschnitte
   ------------------------------------------------------------------
   Drei Dinge, die weiter oben in dieser Datei bewusst fuer ALLE
   Breiten festgelegt sind, passen am Handy nicht:

   1. Die Abstaende. Oben steht fuer jeden Abschnitt
      "padding: 96px oben und unten". Am Rechner ist das richtig --
      am Handy ergeben zwei Abschnitte hintereinander 192px Leerraum,
      und zwischen den Bloecken klaffen Loecher.
      Hier auf 2.5rem (40px) gestaffelt, also 80px zwischen zwei
      Bloecken. Die Verhaeltnisse untereinander bleiben gleich,
      alles wird nur gleichmaessig enger.

   2. Der Kopfbereich. 10rem Abstand oben (gesetzt fuer alle Seiten)
      macht den Kopf am Handy unnoetig hoch. Weil das Hintergrundbild
      mit "cover" eingepasst wird, wird es umso staerker seitlich
      beschnitten, je hoeher der Kopf ist. Mit 6rem bleibt der Kopf
      flacher -- und vom Bild ist deutlich mehr zu sehen.

   3. Das dreispaltige Raster im Abschnitt "Deine Vorteile".
      Es ist mit festen Pixelbreiten angelegt (200px + 700px + 200px
      = 1100px) und bricht darum nicht um. Am Handy ragte der
      Textblock links UND rechts aus dem Fenster. Hier wird aus dem
      Raster eine umbrechende Reihe: der Text zuerst ueber die ganze
      Breite, die beiden Siegel darunter nebeneinander.

   Bewusst NUR als Handy-Regel (bis 767.98px) -- die Darstellung am
   Rechner bleibt unveraendert. Die Bloecke selbst und die Datenbank
   werden nicht angefasst: die Werte stehen als Inline-Angaben in den
   Bloecken und bleiben dort stehen.
   ================================================================== */
@media (max-width: 767.98px) {

    /* Kopfbereich: flacher, dadurch ist mehr vom Bild zu sehen. */
    main .section.position-relative.bg-attach-cover {
        padding-top: 6rem !important;
        padding-bottom: 2.5rem !important;
    }

    /* Alle uebrigen Abschnitte gleichmaessig enger. */
    main > .section:not(.position-relative.bg-attach-cover) {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    /* Ueberschrift und Karussell gehoeren zusammen -- am Handy
       entsprechend enger als die 24px der Rechner-Ansicht. */
    main .section.section.js-carousel-heading-section {
        padding-bottom: 1rem !important;
    }
    main .section.section.js-carousel-heading-section + .section {
        padding-top: 1rem !important;
    }

    /* Aus dem festen Raster eine umbrechende Reihe machen.
       Getroffen wird ueber die Inline-Angabe, weil das Raster
       keine eigene Klasse hat. */
    main .section .r-container > [style*="grid-template-columns"] {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: flex-start !important;
        gap: 1rem !important;
    }

    /* Der Textblock steht oben und nimmt die ganze Breite.
       Sein Innenabstand faellt weg -- der Abschnitt hat links und
       rechts bereits 32px. */
    main .section .r-container > [style*="grid-template-columns"] > .koalu-carousel-heading {
        order: 1;
        flex: 1 1 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* Die beiden Siegelspalten darunter, nebeneinander. Ihr
       "padding-top:100px" aus der Rechner-Ansicht faellt weg. */
    main .section .r-container > [style*="grid-template-columns"] > div:not(.koalu-carousel-heading) {
        order: 2;
        padding-top: 0 !important;
        flex: 0 0 auto !important;
    }

    /* Beide Siegel so gross, dass sie zu zweit nebeneinander
       passen (2 x 130px + 16px Abstand = 276px bei 311px Platz). */
    .karussell-img-left,
    .karussell-img-right {
        width: 130px !important;
        height: 215px !important;
    }
}


/* ==================================================================
   Die beiden Reiter am rechten Rand -- Handy-Ansicht
   ------------------------------------------------------------------
   Es gibt zwei aufklappbare Reiter: "Haeufig gestellte Fragen"
   (lila) und "Was beschaeftigt dich" (orange). Beide werden in
   index.php eingerichtet, jeder mit einem eigenen <style>-Block --
   und dabei unterschiedlich befestigt:

       #koalu-faq-tab      position: absolute;  top: 130px
       #koalu-concern-tab  position: fixed;     top: 330px

   Der eine scrollt also mit, der andere bleibt stehen. Am Rechner
   faellt das kaum auf. Am Handy aber liegt der lila Reiter mitten
   im Kopfbild, und der orange wandert beim Scrollen ueber den
   ganzen Inhalt -- er deckte unter anderem die beiden Siegel an.

   Hier werden beide am Handy nach unten geholt und untereinander
   gestellt, zusammen mit dem Nach-oben-Knopf:

       lila Reiter         unten 128px
       oranger Reiter      unten  76px
       Nach-oben-Knopf     unten  16px  (steht schon oben in dieser Datei)

   Gemessen bei 375 x 812: 10px Luft zwischen den Reitern, 12px
   zwischen Reiter und Knopf, nichts ueberlappt. Beide Reiter
   bekommen dabei dieselbe Befestigung (fixed) -- damit ist die
   Ungleichheit nebenbei behoben.

   Am Rechner bleibt alles unveraendert bei 130px und 330px.
   index.php wird nicht angefasst: die Regeln dort stehen ohne
   "!important", darum genuegt das hier.
   ================================================================== */
@media (max-width: 767.98px) {
    #koalu-faq-tab {
        position: fixed !important;
        top: auto !important;
        bottom: 128px !important;
    }

    #koalu-concern-tab {
        position: fixed !important;
        top: auto !important;
        bottom: 76px !important;
    }
}