:root {
    --bg: #0b0b0b;
    --surface: #121212;
    --text: rgba(216,14,14,0.85);
    --muted: rgba(216,14,14,0.85);
    --border: rgba(255,255,255,.12);
    --max: 1180px;
    --r: 18px;
    --gap: clamp(14px, 2vw, 26px);
    --pad: clamp(18px, 3vw, 34px);
    --h1: clamp(40px, 6vw, 82px);
    --h2: clamp(40px, 3vw, 36px);
    --h3: clamp(22px, 3vw, 36px);
    --p: clamp(16px, 1.4vw, 18px);
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
    background: radial-gradient(1200px 600px at 20% -10%, rgba(255,255,255,.08), transparent 55%), radial-gradient(1000px 500px at 80% 0%, rgba(255,255,255,.05), transparent 60%), var(--bg);
    color: var(--text);
    line-height: 1.5;
    padding-top: 90px; /* an tatsächliche Headerhöhe anpassen */
}

@media (max-width: 480px) {
    body {
        padding-top: 90px;
    }
}

    a {
        color: inherit;
        text-decoration: none;
    }

    .container {
        width: min(var(--max), calc(100% - 2*var(--pad)));
        margin: 0 auto;
    }

    /* Buttons */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 12px 16px;
        border-radius: 999px;
        border: 1px solid var(--border);
        background: rgba(255,255,255,.4);
        color: var(--text);
        transition: transform .15s ease, background .15s ease, border-color .15s ease;
        white-space: nowrap;
    }

        .btn:hover {
            transform: translateY(-1px);
            background: rgba(255,255,255,.06);
            border-color: rgba(255,255,255,.2);
        }

        .btn.primary {
            background: #fff;
            color: #111;
            border-color: #fff;
        }

            .btn.primary:hover {
                background: rgba(255,255,255,.9);
            }

            .btn_checkin.primary:hover {
                background: rgba(255,255,255,.9);
            }

.btn_checkin:hover {
    transform: translateY(-1px);
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.2);
    cursor: pointer;
}

    /* Header */
    header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9999;
        background: rgba(11,11,11,.72);
        backdrop-filter: blur(14px);
        border-bottom: 1px solid var(--border);
    }

    .topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 14px 0;
    }

    .brand {
        font-weight: 750;
        letter-spacing: .4px;
    }

    .logo {
        max-width: 150px;
    }


@media (max-width: 920px) {
    .logo {
        max-width: 70px;
    }
}

    nav {
        display: flex;
        gap: 30px;
        align-items: center;
        color: var(--muted);
        font-size: 20px;
        font-weight: 750;
    }

        nav a:hover {
            color: var(--text);
        }

    .actions {
        display: flex;
        gap: 10px;
        align-items: center;
    }

    /* Mobile nav (ohne JS, via <details>) */
    details.mobileNav {
        display: none;
        color: rgba(216,14,14,0.85);
    }

        details.mobileNav summary {
            list-style: none;
            cursor: pointer;
            padding: 10px 12px;
            border-radius: 999px;
            border: 1px solid var(--border);
            background: rgba(255,255,255,.03);
            color: rgba(216,14,14,0.85);
        }

            details.mobileNav summary .menu {
                color: rgba(216,14,14,0.85);
            }

            details.mobileNav summary::-webkit-details-marker {
                display: none;
                color: rgba(216,14,14,0.85);
            }



    .mobilePanel {
        margin-top: 10px;
        border: 1px solid var(--border);
        border-radius: var(--r);
        background: rgba(255,255,255,.03);
        padding: 12px;
        display: grid;
        gap: 10px;
    }

        .mobilePanel a {
            color: var(--muted);
            padding: 8px 10px;
            border-radius: 12px;
        }

            .mobilePanel a:hover {
                color: var(--text);
                background: rgba(255,255,255,.05);
            }

    /* Hero */

    /* Container, in dem das Panorama laufen soll */
    .hero-section {
        position: relative;
        overflow: hidden;
        min-height: 600px; /* oder height: 100vh; */
    }

    /* Hintergrund-Layer füllt die komplette Section */
    .hero-panorama {
        position: absolute;
        inset: 0;
        overflow: hidden;
        z-index: 0;
    }

    /* Strip mit 2 gleichen Bildern nebeneinander */
    .pano-strip {
        display: flex;
        height: 100%;
        width: max-content;
        will-change: transform;
        animation: panoLoop 90s linear infinite;
    }

        .pano-strip img {
            height: 100%;
            width: auto; /* Breite automatisch passend zur Höhe */
            flex: 0 0 auto;
            display: block;
        }

    /* Der Strip ist doppelt so breit wie 1 Bild.
   Wir schieben genau um 50% (also genau 1 Bildbreite) */
    @keyframes panoLoop {
        from {
            transform: translateX(0);
        }

        to {
            transform: translateX(-50%);
        }
    }

    .hero {
        padding: clamp(28px, 5vw, 70px) 0 clamp(22px, 4vw, 50px);
    }

    .heroGrid {
        display: grid;
        grid-template-columns: 1.1fr .9fr;
        gap: calc(var(--gap) * 1.3);
        align-items: start;
    }

    .kicker {
        color: var(--muted);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: .26em;
        text-transform: uppercase;
        margin-bottom: 10px;
    }

    h1 {
        font-size: var(--h1);
        line-height: .98;
        margin: 0 0 14px;
    }

    .lead {
        font-size: var(--p);
        color: var(--muted);
        max-width: 60ch;
        margin: 0 0 18px;
    }

    .heroActions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    .heroMedia {
        border-radius: calc(var(--r) + 6px);
        border: 1px solid var(--border);
        overflow: hidden;
        background: rgba(255,255,255,.02);
        min-height: clamp(260px, 34vw, 460px);
        position: relative;
    }

        .heroMedia::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.65)), url("https://images.unsplash.com/photo-1517836357463-d25dfeac3438?auto=format&fit=crop&w=1400&q=80");
            background-size: cover;
            background-position: center;
            filter: contrast(1.05) saturate(1.05);
        }

        .heroMedia .badge {
            position: absolute;
            left: 14px;
            bottom: 14px;
            border: 1px solid var(--border);
            background: rgba(0,0,0,.35);
            padding: 10px 12px;
            border-radius: 999px;
            font-size: 13px;
            color: var(--muted);
        }

    /* Sections */
    section {
        padding: clamp(24px, 4vw, 56px) 0;
        border-top: 1px solid var(--border);
    }

    @media (max-width: 480px) {
        section {
            padding: clamp(300px, 4vw, 56px) 0;
        }
    }


    .tall {
        min-height: 800px;
    }

    .sectionGrid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--gap);
        align-items: center;
    }

        .sectionGrid.reverse .text {
            order: 2;
        }

        .sectionGrid.reverse .media {
            order: 1;
        }

    h2 {
        color: rgba(216,14,14,0.85);
        font-size: var(--h2);
        margin: 0 0 10px;
    }

    .text p {
        margin: 0 0 16px;
        color: var(--muted);
        font-size: var(--p);
    }

    .media {
        border-radius: calc(var(--r) + 6px);
        border: 1px solid var(--border);
        overflow: hidden;
        background: rgba(255,255,255,.02);
        min-height: clamp(220px, 26vw, 380px);
        position: relative;
    }

        .media::before {
            content: "";
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
            filter: contrast(1.05) saturate(1.05);
            opacity: .95;
        }
        /* Platzhalter-Bilder (einfach ersetzen) */
        .media.programs::before {
            background-image: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.70)), url("https://images.unsplash.com/photo-1517964108465-3e4a6c1600f7?auto=format&fit=crop&w=1400&q=80");
        }

        .media.coaches::before {
            background-image: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.70)), url("https://images.unsplash.com/photo-1518459031867-a89b944bffe4?auto=format&fit=crop&w=1400&q=80");
        }

        .media.club::before {
            background-image: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.70)), url("https://images.unsplash.com/photo-1534438327276-14e5300c3a48?auto=format&fit=crop&w=1400&q=80");
        }

        .media.stories::before {
            background-image: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.70)), url("https://images.unsplash.com/photo-1552674605-db6ffd4facb5?auto=format&fit=crop&w=1400&q=80");
        }

    /* CTA */
    .cta {
        border: 1px solid var(--border);
        border-radius: calc(var(--r) + 10px);
        background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
        padding: clamp(18px, 3vw, 28px);
        display: grid;
        grid-template-columns: 1.2fr .8fr;
        gap: var(--gap);
        align-items: start;
    }

    .cta-content {
        display: flex;
        align-content: center;
        justify-content: center;
        text-align: center;
    }

    .cta form {
        display: grid;
        gap: 10px;
        padding: 14px;
        border: 1px solid var(--border);
        border-radius: var(--r);
        background: rgba(0,0,0,.18);
    }

    input, textarea {
        width: 100%;
        padding: 12px 12px;
        border-radius: 12px;
        border: 1px solid var(--border);
        background: rgba(255,255,255,.03);
        color: var(--text);
        outline: none;
    }

    textarea {
        min-height: 120px;
        resize: vertical;
    }

    /* Footer */
    footer {
        padding: 26px 0;
        border-top: 1px solid var(--border);
        color: var(--muted);
        font-size: 14px;
    }

    .footerGrid {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr;
        gap: var(--gap);
    }

        .footerGrid a {
            color: var(--muted);
        }

            .footerGrid a:hover {
                color: var(--text);
            }

        .footerGrid svg {
            fill: #fff;
        }

    /* Responsive */
    @media (max-width: 980px) {
        nav, .actions .btn.primary {
            /*  display: none; */
        }

        details.mobileNav {
            display: block;
        }

        .heroGrid {
            grid-template-columns: 1fr;
        }

        .sectionGrid {
            grid-template-columns: 1fr;
        }

            .sectionGrid.reverse .text, .sectionGrid.reverse .media {
                order: unset;
            }

        .cta {
            grid-template-columns: 1fr;
        }

        .footerGrid {
            grid-template-columns: 1fr 1fr;
        }

        .navbtn {
            display: none;
        }
    }

    @media (max-width: 560px) {
        /* nur die <a>-Buttons (Join/Start) ausblenden */
        .actions a.btn {
            /*  display: none;*/
        }

        /* Checkin-Button bleibt sichtbar */
        #action {
            display: inline-flex;
            width: 100%; /* optional: volle Breite */
            justify-content: center; /* optional: zentrieren */
        }

        /* Footer wie gehabt */
        .footerGrid {
            grid-template-columns: 1fr;
        }
    }

    :root {
        --max: 1180px;
        --pad: clamp(18px, 3vw, 34px);
        --r: 18px;
        --text: #111;
        --muted: rgba(216,14,14,0.85);
        --overlay: rgba(0,0,0,.45); /* go180-style: dunkler Verlauf für Lesbarkeit */
    }

    .container {
        width: min(var(--max), calc(100% - 2*var(--pad)));
        margin: 0 auto;
    }



    .bg {
        position: relative;
        color: #fff;
        border-radius: calc(var(--r) + 10px);
        overflow: hidden;
        margin: clamp(14px, 2vw, 22px) auto;
    }

        /* Background image */
        .bg::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: var(--bg);
            background-size: cover;
            background-position: center;
            transform: scale(1.03); /* minimal, wirkt hochwertiger */
        }

        /* Overlay für Kontrast (kannst du pro Section anpassen) */
        .bg::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(0,0,0,.15), var(--overlay));
        }

        /* Inhalt über Background/Overlay */
        .bg > .container {
            position: relative;
            z-index: 1;
            padding: clamp(26px, 5vw, 70px);
        }

    /* Typo */
    .hero h1 {
        font-size: clamp(40px, 6vw, 82px);
        line-height: .98;
        margin: 0 0 14px;
    }

    .kicker {
        letter-spacing: .22em;
        text-transform: uppercase;
        opacity: .85;
        font-size: 20px;
        font-weight: 1000;
    }

    .lead {
        font-size: clamp(16px, 1.4vw, 18px);
        opacity: .9;
        max-width: 60ch;
        margin: 0 0 18px;
    }

    /* Split-Sektionen: Text links, auf Mobile stacked */

    section.tall {
        min-height: 300px;
    }

    .split-inner {
        display: grid;
        grid-template-columns: 1fr;
        align-items: end;
        min-height: clamp(260px, 34vw, 250px); /* Bildhöhe wie bei go180 */
    }

    .h2-probe {
        color: white;
    }

    .text-probe {
        color: white;
    }

    .tall {
        min-height: 300px;
    }

    .split .text {
        max-width: 520px;
    }

    .slider_1 {
        max-width: 100%;
    }

    @media (max-width: 480px) {
        .slider_1 {
            margin-bottom: 40px;
        }
    }

    /* Buttons (Beispiel) */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 12px 16px;
        border-radius: 999px;
        border: 1px solid rgba(255,255,255,.4);
        background: rgba(255,255,255,.3);
        color: #fff;
        text-decoration: none;
    }

        .btn.primary {
            background: rgba(255,255,255,.9);
            color: #111;
            border-color: #fff;
            font-size: 16px;
            font-weight: bold;
        }

    @media (max-width: 480px) {
        .btn.primary {
            width: 100%;
            text-wrap-mode: wrap;
        }
    }



    .btn_checkin {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 12px 16px;
        border-radius: 999px;
        border: 1px solid rgba(255,255,255,.4);
        background: rgba(255,255,255,.2);
        color: #fff;
        text-decoration: none;
    }


        .btn_checkin.primary {
            background: rgba(255,255,255,.9);
            color: #111;
            border-color: #fff;
            font-size: 16px;
            font-weight: bold;
        }

    .actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    .media-bg {
        position: relative;
        overflow: hidden;
        border-radius: 28px; /* wie bei deinen bg-sections */
        min-height: clamp(320px, 40vw, 620px);
    }

    .bg-media {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; /* macht’s „wie background-image: cover“ */
        object-position: center;
        transform: scale(1.03);
    }

    .bg-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.55));
    }

    .bg-content {
        position: relative;
        z-index: 1;
        padding: clamp(26px, 5vw, 70px);
        color: #fff;
    }

    .dialog_auslastung[open] {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: auto 6rem;
        border: none;
        border-radius: 0.6rem;
        /*max-height: 60%;*/
        background: #000;
    }

        .dialog_auslastung[open] p {
            padding: 2rem;
        }

        .dialog_auslastung[open] div {
            display: flex;
            justify-content: center;
            width: 100%;
        }

        .dialog_auslastung[open] button {
            margin: 0 1rem 1rem;
        }

        .dialog_auslastung[open]::backdrop {
            background: transparent;
        }

    .checkin {
        width: 60%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .dialog_auslastung {
        width: 100%;
        text-align: center;
        align-items: center;
    }

    @media (max-width: 480px) {
        .dialog_auslastung {
            width: 280px;
        }

        .checkin {
            width: 100%;
        }
    }

    /* Button */
    .cslider-toggle {
        margin-top: 10px;
        padding: 8px 12px;
        cursor: pointer;
    }

    /* Panel-Look */
    .cslider {
        position: relative;
    }

    .cslider-panel {
        margin-top: 16px;
        background: #000;
        color: #fff;
        padding: 14px 16px;
        border-radius: 8px;
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        transition: max-height 300ms ease, opacity 300ms ease;
    }

    .cslider.is-panel-open .cslider-panel {
        max-height: 240px;
        opacity: 1;
    }

    .cslider-panel p {
        margin: 0;
    }

    .container-kurse {
        color: white;
    }

        .container-kurse .title {
            color: rgba(216,14,14,0.85);
        }

        .container-kurse .details {
            color: rgb(128,128,128,0.50);
            text-align: right;
        }

    #cslider-modal[open] {
        margin: auto; /* zentriert horizontal + vertikal */
        max-width: 800px;
        width: min(800px, calc(100% - 40px));
        border: none;
        border-radius: 16px;
        padding: 0;
        background: #000;
        color: #fff;
    }

    /* Modal-Inhalt: Rows sollen untereinander */
    #cslider-modal .container-kurse {
        display: block;
    }

    #cslider-modal .row {
        display: flex; /* Spalten nebeneinander */
        flex-wrap: wrap; /* bei wenig Platz umbrechen */
        gap: 12px; /* optional */
        margin-bottom: 12px; /* Abstand zwischen Reihen */
    }

    /* 3 Spalten pro Reihe */
    #cslider-modal .col {
        flex: 1 1 0;
        min-width: 0;
        padding-right: 10px;
    }

    #cslider-modal .image {
        padding: 12px;
        max-width: 250px;
    }

    #cslider-modal .ul .b {
        list-style-type: square;
    }

    li::marker {
        color: red;
    }

    .cslider-modal-overlay .row[data-acc="row"] {
        cursor: pointer;
    }

    /* Grundwerte */
    html {
        font-size: 16px;
    }
    /* Desktop */
    body {
        line-height: 1.5;
    }

    /* Mobile */
    @media (max-width: 480px) {
        html {
            font-size: 14px;
        }
        /* macht rem-basierte Größen kleiner */
        body {
            line-height: 1.45;
        }
    }

    @media (max-width: 480px) {
        h1 {
            font-size: 1.6rem;
        }

        h2 {
            font-size: 1.35rem;
        }

        h3 {
            font-size: 1.15rem;
        }

        p {
            font-size: 1rem;
        }

        news-text {
            font-size: 1.25rem;
        }

        image_news {
            max-width: 100%;
        }
    }

    @media (max-width: 768px) {
        #coaches .cslider-text p br {
            display: none;
        }
    }

    .cslider p {
        color: #fff;
    }

    .cslider h3 {
        color: rgba(216,14,14,0.85);
    }

    .cslider a {
        color: #fff;
    }

    .filterbar {
        display: flex;
        flex-wrap: wrap; /* bricht in neue Zeile um, wenn’s zu eng wird */
        gap: 12px; /* Abstand zwischen den Checkboxen */
        align-items: center;
        padding-bottom: 5px;
    }

        .filterbar label {
            display: inline-flex; /* Checkbox + Text in einer Linie */
            align-items: center;
            gap: 6px; /* Abstand Checkbox ↔ Text */
            cursor: pointer;
        }

    .btn {
        width: auto;
    }


    .toggle-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 12px 16px;
        border-radius: 999px;
        border: 1px solid var(--border);
        background: rgba(255,255,255,.4);
        color: #fff;
        transition: transform .15s ease, background .15s ease, border-color .15s ease;
        white-space: nowrap;
        width: auto;
    }

        /* Zustand nach Klick */
        .toggle-btn.is-active {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 12px 16px;
            border-radius: 999px;
            border: 1px solid var(--border);
            background: rgba(216,14,14,0.85);
            color: var(--text);
            transition: transform .15s ease, background .15s ease, border-color .15s ease;
            white-space: nowrap;
        }

    a svg {
        fill: white;
        transition: transform .15s ease, opacity .15s ease;
    }

    a:hover svg {
        transform: translateY(-1px);
        opacity: .85;
    }

    .social {
        display: flex;
        gap: 12px;
        align-items: center;
    }

    .topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        flex-wrap: wrap; /* <- erlaubt zweite Zeile */
    }

    /* Wichtig in Flex-Kontext */
    .actions {
        display: flex;
        gap: 10px;
        align-items: center;
        min-width: 0;
    }

    /* Checkin-Button darf nicht den Header sprengen */
    #action {
        min-width: 0;
        max-width: 100%;
        white-space: nowrap;
    }

    /* Mobile: nav/buttons wie bei dir ausblenden, Burger zeigen,
   und Checkin-Button unterhalb */
    @media (max-width: 480px) {
        nav, .actions .btn.primary {
            /*  display: none;*/
        }

        details.mobileNav {
            display: block;
            margin-left: auto; /* Burger nach rechts */
        }

        /* Actions-Zeile: wir wollen nur den Checkin-Button darunter */
        .actions {
            width: 100%; /* zweite Zeile möglich */
            order: 3; /* unter Logo + Burger */
            justify-content: flex-start;
        }

            /* Optional: "Join now" auf Mobile ausblenden (oder lassen) */
            .actions > a.btn {
                /*  display: none;*/
            }

        /* Checkin-Button sichtbar und schön breit */
        #action {
            width: 100%;
            justify-content: center;
        }
    }

    @media (max-width: 480px) {
        nav, .actions .btn.primary {
            /*  display: none;*/
        }

        details.mobileNav {
            display: block;
            margin-left: auto; /* Burger nach rechts */
        }

        /* Actions-Zeile: wir wollen nur den Checkin-Button darunter */
        .actions {
            width: 80%; /* zweite Zeile möglich */
            order: 3; /* unter Logo + Burger */
            justify-content: flex-start;
        }

            /* Optional: "Join now" auf Mobile ausblenden (oder lassen) */
            .actions > a.btn {
                /*  display: none;*/
            }

        /* Checkin-Button sichtbar und schön breit */
        #action {
            width: 40%;
            justify-content: center;
        }
    }


    ul.b {
        list-style-type: square;
    }

    #vertrag.bg_vertrag {
        position: relative;
        background: var(--bg) center / cover no-repeat;
        padding-top: 1px; /* oder padding: 1px 0; */
        margin-top: -1px; /* falls du das Padding optisch neutral halten willst */
        border-radius: calc(var(--r) + 10px);
    }


        #vertrag.bg_vertrag::before {
            content: "";
            position: absolute;
            inset: -1px 0; /* oben/unten 1px größer */
            background: rgba(0,0,0,.60);
            z-index: 0; /* Overlay nach hinten */
            pointer-events: none;
        }

        #vertrag.bg_vertrag > * {
            position: relative;
            z-index: 1; /* Inhalt nach vorn */
        }


    #probetraining.bg_probe {
        position: relative;
        background: var(--bg) center / cover no-repeat;
        padding-top: 1px; /* oder padding: 1px 0; */
        margin-top: -1px; /* falls du das Padding optisch neutral halten willst */
        border-radius: calc(var(--r) + 10px);
    }


        #probetraining.bg_probe::before {
            content: "";
            position: absolute;
            inset: -1px 0; /* oben/unten 1px größer */
            background: rgba(0,0,0,.60);
            z-index: 0; /* Overlay nach hinten */
            pointer-events: none;
        }

        #probetraining.bg_probe > * {
            position: relative;
            z-index: 1; /* Inhalt nach vorn */
        }



    #coaches.bg_coach {
        position: relative;
        background: var(--bg) center / cover no-repeat;
        padding-top: 1px; /* oder padding: 1px 0; */
        margin-top: -1px; /* falls du das Padding optisch neutral halten willst */
    }


        #coaches.bg_coach::before {
            content: "";
            position: absolute;
            inset: -1px 0; /* oben/unten 1px größer */
            background: rgba(0,0,0,.70);
            z-index: 0; /* Overlay nach hinten */
            pointer-events: none;
        }

        #coaches.bg_coach > * {
            position: relative;
            z-index: 1; /* Inhalt nach vorn */
        }

    .text_coach {
        position: relative;
        z-index: 2;
        color: white;
    }

    #oeffnung.bg_oeffnung {
        position: relative;
        background: var(--bg) center / cover no-repeat;
        padding-top: 1px; /* oder padding: 1px 0; */
        margin-top: -1px; /* falls du das Padding optisch neutral halten willst */
    }


        #oeffnung.bg_oeffnung::before {
            content: "";
            position: absolute;
            inset: -1px 0; /* oben/unten 1px größer */
            background: rgba(0,0,0,.60);
            z-index: 0; /* Overlay nach hinten */
            pointer-events: none;
        }

        #oeffnung.bg_oeffnung > * {
            position: relative;
            z-index: 1; /* Inhalt nach vorn */
        }

    .container-2cols {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
        align-items: center;
        justify-content: center;
        z-index: 1;
    }

    @media (min-width: 768px) {
        .container-2cols {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    .image_news {
        max-width: 60%;
        height: 60%;
        display: block;
        justify-self: center;
    }

    @media (max-width: 480px) {

        .image_news {
            max-width: 100%;
            object-fit: cover;
            object-position: center top; /* wenn oben wichtig ist */
        }
    }

    .bg > .container-2cols {
        position: relative;
        padding: clamp(26px, 5vw, 70px);
        background: rgba(0,0,0,.60);
        z-index: 1;
    }

    .container-2cols-news {
        display: flex;
        justify-content: center; /* cols nebeneinander mittig */
        align-items: center; /* vertikal mittig */
        gap: 2rem;
    }

    .news-col {
        display: flex;
        justify-content: center; /* Inhalt horizontal mittig */
        align-items: center; /* Inhalt vertikal mittig */
        text-align: center; /* Text mittig */
    }

    .news-col-text {
        display: flex;
        justify-content: left; /* Inhalt horizontal mittig */
        align-items: center; /* Inhalt vertikal mittig */
        text-align: left; /* Text mittig */
        padding-left: -10px;
        color: white;
        font-size: 26px;
        margin: 0 0 10px;
    }

    .news-text {
    }

    #news.bg_news {
        background-image: url("../news/news_dark.png");
        isolation: isolate;
        min-height: 250px; /* wichtig: damit vertikal sichtbar zentriert werden kann */
        display: flex;
        align-items: center; /* vertikal */
        justify-content: center; /* horizontal */
        padding: 40px 20px; /* damit’s auf Mobile nicht klebt */
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .notice[open] {
        max-width: 720px;
        width: min(720px, calc(100% - 40px));
        border: 1px solid;
        border-radius: 16px;
        padding: 18px 18px 16px;
        background: #000;
        color: rgba(216,14,14,0.85);
        border-color: rgba(216,14,14,0.85);
    }

    @media(max-width: 480px) {
        .notice[open] {
            width: 250px;
        }
    }

    .notice::backdrop {
        background: rgba(0,0,0,.6);
        backdrop-filter: blur(6px);
    }

    .notice-actions {
        display: flex;
        justify-content: flex-end;
        margin-top: 14px;
    }

    #kursplan.bg_kursplan {
        position: relative;
        isolation: isolate;
        background: var(--bg) center / cover no-repeat;
        min-height: 350px; /* wichtig: damit vertikal sichtbar zentriert werden kann */
        display: flex;
        align-items: center; /* vertikal */
        justify-content: center; /* horizontal */
        padding: 40px 20px; /* damit’s auf Mobile nicht klebt */
    }

        #kursplan.bg_kursplan::before {
            content: "";
            position: absolute;
            inset: 0;
            background: rgba(0,0,0,.70);
            z-index: 1;
            pointer-events: none;
            padding-top: 1px; /* oder padding: 1px 0; */
            margin-top: -1px; /* falls du das Padding optisch neutral halten willst */
        }

        #kursplan.bg_kursplan > .container_kursplan {
            position: relative;
            z-index: 2;
            text-align: center;
            color: white;
        }

    #home,
    #news,
    #studio,
    #kursplan,
    #programs,
    #coaches,
    #probetraining,
    #vertrag,
    #oeffnung,
    #contact {
        scroll-margin-top: 115px;
    }

    .container-2cols-partner {
        display: flex;
        justify-content: center; /* cols nebeneinander mittig */
        align-items: center; /* vertikal mittig */
        gap: 2rem;
    }

    .partner-col {
        display: flex;
        justify-content: center; /* Inhalt horizontal mittig */
        align-items: center; /* Inhalt vertikal mittig */
        text-align: center; /* Text mittig */
    }

    .partner-col-text {
        display: flex;
        justify-content: left; /* Inhalt horizontal mittig */
        align-items: center; /* Inhalt vertikal mittig */
        text-align: left; /* Text mittig */
        color: white;
        font-size: 26px;
        margin: 0 0 10px;
    }

    .image_partner {
        max-width: 50%;
        height: auto;
        display: block;
    }

    @media (max-width: 480px) {
        .container-2cols-partner {
            flex-direction: column;
        }

        .image_partner {
            max-width: 100%;
            object-fit: cover;
            object-position: center top;
        }
    }

    #addon.bg_probe {
        position: relative;
        background: var(--bg) center / cover no-repeat;
        padding-top: 1px; /* oder padding: 1px 0; */
        margin-top: -1px; /* falls du das Padding optisch neutral halten willst */
        border-radius: calc(var(--r) + 10px);
    }


        #addon.bg_probe::before {
            content: "";
            position: absolute;
            inset: -1px 0; /* oben/unten 1px größer */
            background: rgba(0,0,0,.60);
            z-index: 0; /* Overlay nach hinten */
            pointer-events: none;
        }

        #addon.bg_probe > * {
            position: relative;
            z-index: 1; /* Inhalt nach vorn */
        }

    .addon_grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 20px;
    }

    .addon_karte {
        text-align: center;
    }

        .addon_karte img {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 8px;
        }

        .addon_karte p {
            margin-top: 10px;
            font-size: 18px;
            line-height: 1.4;
            font-weight: bold;
        }


    .addon-modal-body {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        padding: 12px 16px 16px;
        max-height: calc(min(85svh, 900px) - 56px);
    }

    .h2-addon {
        font-size: 24px;
        line-height: 1.3;
        color: white;
        margin: 0;
    }

    .h4-addon {
        font-size: 16px;
        line-height: 1.3;
        color: rgba(216,14,14,0.95);
        margin: 0;
    }

    .h5-addon {
        font-size: 14px;
        line-height: 1.3;
        color: white;
        margin: 0;
    }

    .addon-subtitle {
        font-size: 18px;
        line-height: 1.3;
        color: rgba(216,14,14,0.95);
        margin: 8px 0 0;
    }

    .p-addon {
        font-size: 15px;
        line-height: 1.7;
        color: white;
        margin: 0;
    }

    .addon-list {
        margin: 0;
        padding-left: 20px;
        color: white;
        font-size: 15px;
        line-height: 1.7;
    }

        .addon-list li {
            margin-bottom: 8px;
        }

    .addon-prices li {
        list-style: none;
        padding-left: 0;
        margin-bottom: 10px;
    }

    .p-addon a {
        color: rgba(255,255,255,0.95);
        text-decoration: underline;
    }

    @media (max-width: 480px) {
        .addon-modal-overlay {
            padding: 0;
        }

        .addon-modal {
            width: 100%;
            height: 100svh;
            max-height: 100svh;
            border-radius: 0;
        }

        .addon-modal-header {
            padding-top: calc(12px + env(safe-area-inset-top));
            padding-left: calc(16px + env(safe-area-inset-left));
            padding-right: calc(16px + env(safe-area-inset-right));
        }

        .addon-modal-body {
            display: flex;
            flex-direction: column;
            overflow: auto;
            -webkit-overflow-scrolling: touch;
            padding: 20px 24px;
            max-height: calc(min(85svh, 900px) - 56px);
            gap: 16px;
        }
    }

    .container-addon {
        color: white;
    }

        .container-addon .title {
            color: rgba(216,14,14,0.85);
        }

        .container-addon .details {
            color: rgb(128,128,128,0.50);
            text-align: right;
        }

    .addon-modal-open {
        appearance: none;
        -webkit-appearance: none;
        border: 0;
        background: transparent;
        padding: 0;
        margin: 0;
        display: block;
        width: 100%;
        cursor: pointer;
        text-align: inherit;
        color: inherit;
        font: inherit;
        justify-content: center;
        width: 100%;
    }

        /* optional: Focus-Rand nur sichtbar, wenn per Tastatur fokussiert */
        .addon-modal-open:focus {
            outline: none;
        }

        .addon-modal-open:focus-visible {
            outline: 2px solid rgba(255,255,255,.6);
            outline-offset: 4px;
        }

        .addon-modal-open img {
            display: block;
        }

    #ernaehrung[open] {
        width: min(700px, 90vw);
        border: none;
        border-radius: 12px;
        padding: 0;
        background: #1f1f1f;
        color: white;
    }

    dialog.addon-modal-content[open] {
        display: flex !important;
        flex-direction: column;
        width: min(700px, 90vw);
        max-height: 85svh;
        border: none;
        border-radius: 12px;
        padding: 0;
        background: #1f1f1f;
        color: white;
        overflow: hidden;
    }

    dialog.addon-modal-content::backdrop {
        background: rgba(0,0,0,0.7);
    }

    .addon-modal-body {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 20px 24px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        flex: 1 1 auto;
        min-height: 0;
    }

    .notice-actions {
        display: flex;
        justify-content: flex-end;
        padding: 12px 16px;
        border-top: 1px solid rgba(255,255,255,0.08);
        flex-shrink: 0;
    }

    dialog.addon-modal-content {
        margin: auto;
    }

    #ernaehrung .addon-modal-body {
        display: flex;
        flex-direction: column;
        justify-content: flex-start !important;
        align-items: stretch !important;
    }

    #ernaehrung .notice-actions {
        justify-content: flex-end !important;
        align-items: center !important;
    }

    #rechtliches[open] {
        width: min(700px, 90vw);
        border: none;
        border-radius: 12px;
        padding: 0;
        background: #1f1f1f;
        color: white;
    }

    dialog.addon-modal-content[open] {
        display: flex !important;
        flex-direction: column;
        width: min(700px, 90vw);
        max-height: 85svh;
        border: none;
        border-radius: 12px;
        padding: 0;
        background: #1f1f1f;
        color: white;
        overflow: hidden;
    }

    dialog.addon-modal-content::backdrop {
        background: rgba(0,0,0,0.7);
    }

    .addon-modal-body-r {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 20px 24px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        flex: 1 1 auto;
        min-height: 0;
    }

    .notice-actions {
        display: flex;
        justify-content: flex-end;
        padding: 12px 16px;
        border-top: 1px solid rgba(255,255,255,0.08);
        flex-shrink: 0;
    }

    dialog.addon-modal-content {
        margin: auto;
    }

    #rechtliches .addon-modal-body-r {
        display: flex;
        flex-direction: column;
        justify-content: flex-start !important;
        align-items: stretch !important;
    }

    #rechtliches .notice-actions {
        justify-content: flex-end !important;
        align-items: center !important;
    }

    .rechtliches-list {
        list-style: circle;
        margin: 0;
        padding-left: 20px;
        color: white;
        font-size: 15px;
        line-height: 1.7;
    }

        .rechtliches-list li {
            margin-bottom: 8px;
        }

    #datenschutz .addon-modal-body-d {
        display: flex;
        flex-direction: column;
        justify-content: flex-start !important;
        align-items: stretch !important;
    }

    #datenschutz .notice-actions {
        justify-content: flex-end !important;
        align-items: center !important;
    }

    .datenschutz-list {
        list-style: circle;
        margin: 0;
        padding-left: 20px;
        color: white;
        font-size: 15px;
        line-height: 1.7;
    }

        .datenschutz-list li {
            margin-bottom: 8px;
        }

    .addon-modal-body-d {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 20px 24px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        flex: 1 1 auto;
        min-height: 0;
    }

    #contact .image_kontakt {
        max-width: 40%;
        height: auto;
        display: block;
        margin-bottom: 12px;
        margin-top: 8px;
    }

    #contact .contact-head {
        font-size: 22px;
        line-height: 1.3;
        color: rgba(216,14,14,0.95);
        margin: 8px 0 0;
    }

    #contact .contact-h3 {
        font-size: 18px;
        line-height: 1.3;
        color: rgba(216,14,14,0.95);
        margin: 8px 0 0;
    }

    #contact .contact-mail {
        font-size: 16px;
        line-height: 1.3;
        color: white;
        margin: 8px 0 0;
    }

    #contact .mail_img {
        display: flex;
        justify-content: center;
    }

    .impressum {
        cursor: pointer;
    }

    .bg_reviews {
        background: #111;
        color: #fff;
        padding: 80px 0;
    }

    .reviews-head {
        text-align: center;
        margin-bottom: 28px;
    }

    .reviews-toolbar {
        display: flex;
        gap: 12px;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        margin-bottom: 20px;
    }

        .reviews-toolbar select {
            min-width: 180px;
            padding: 10px 14px;
            border-radius: 10px;
            border: 1px solid #444;
            background: #1b1b1b;
            color: #fff;
        }

    .reviews-meta {
        text-align: center;
        margin-bottom: 20px;
        opacity: 0.85;
    }

    .reviews-slider {
        max-width: 820px;
        margin: 0 auto;
    }

    .review-card {
        background: rgba(255,255,255,0.06);
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 18px;
        padding: 28px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    }

    .review-stars {
        font-size: 22px;
        margin-bottom: 6px;
    }

    .review-rating {
        font-size: 14px;
        opacity: 0.85;
    }

    .review-text {
        margin: 20px 0;
        font-size: 18px;
        line-height: 1.6;
    }

    .review-author {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        align-items: center;
    }

        .review-author a {
            color: #fff;
            font-weight: 700;
            text-decoration: underline;
        }

    .review-date {
        opacity: 0.75;
    }

    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    .bg_reviews {
        background: #111;
        color: #fff;
        padding: 80px 0;
    }

    .reviews-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
        margin-top: 30px;
    }

    .review-card {
        background: rgba(255,255,255,0.06);
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 18px;
        padding: 24px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.18);
    }

    .review-head {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 10px;
        font-size: 14px;
    }

    .review-date,
    .review-source {
        opacity: 0.75;
        font-size: 14px;
    }

    .review-stars {
        font-size: 20px;
        margin-bottom: 14px;
    }

    .review-text {
        line-height: 1.6;
        margin: 0 0 14px 0;
    }

    @media (max-width: 900px) {
        .reviews-grid {
            grid-template-columns: 1fr;
        }
    }

    #eg_ps {
        width: 100%;
        height: 650px;
    }

    #hyrox_ps {
        width: 100%;
        height: 650px;
    }

    #bunker_ps {
        width: 100%;
        height: 650px;
    }

    @media (max-width: 480px) {
        #eg_ps {
            max-width: 100%;
        }

        #hyrox_ps {
            max-width: 100%;
        }

        #bunker_ps {
            max-width: 100%;
        }
    }


.bg_reviews {
    background: #111;
    color: #fff;
    padding: 80px 0;
}

.reviews-head {
    text-align: center;
    margin-bottom: 28px;
}

.reviews-toolbar {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

    .reviews-toolbar select {
        min-width: 180px;
        padding: 10px 14px;
        border-radius: 10px;
        border: 1px solid #444;
        background: #1b1b1b;
        color: #fff;
    }

.reviews-meta {
    text-align: center;
    margin-bottom: 20px;
    opacity: 0.85;
}

.reviews-slider {
    max-width: 820px;
    margin: 0 auto;
    transition: opacity 0.35s ease;
}

.review-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 18px;
    padding: 28px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.review-stars {
    font-size: 22px;
    margin-bottom: 6px;
}

.review-rating {
    font-size: 14px;
    opacity: 0.85;
}

.review-text {
    margin: 20px 0;
    font-size: 18px;
    line-height: 1.6;
}

.review-author {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

    .review-author a {
        color: #fff;
        font-weight: 700;
        text-decoration: underline;
    }

.review-date {
    opacity: 0.75;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

@media (orientation: portrait) and (max-width: 768px) {
}

@media (orientation: landscape) and (min-width: 769px) {
}
/* ===== Mobile optimization overrides (2026-03-19) ===== */
html {
    scroll-behavior: smooth;
}

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

header .container,
main,
section,
.topbar,
.container,
.container-2cols-news,
.container-2cols-partner,
.news-col,
.news-col-text,
.partner-col,
.partner-col-text,
.slider_1,
.text-probe,
.review-card,
.footerGrid > div {
    min-width: 0;
}

.hero-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: clamp(540px, 86vh, 840px);
    gap: 18px;
}

.hero-inner .actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
}

.hero-inner .actions .btn {
    white-space: normal;
    text-align: center;
    min-height: 64px;
    line-height: 1.35;
}

.topbar {
    flex-wrap: nowrap;
    align-items: center;
}

nav {
    min-width: 0;
    flex-wrap: wrap;
    justify-content: center;
}

.mobileNav {
    margin-left: auto;
}

.mobilePanel a {
    display: block;
}

.dialog_auslastung[open] {
    width: min(92vw, 720px);
    margin: auto;
}

.checkin {
    width: min(100%, 520px);
}

.container-2cols-news,
.container-2cols-partner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(18px, 3vw, 36px);
}

.news-col-text,
.partner-col-text {
    font-size: clamp(18px, 2vw, 26px);
    line-height: 1.35;
}

.image_news,
.image_partner {
    width: 100%;
    max-width: 100%;
    height: auto;
}

.addon_grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.addon_karte p {
    margin: 10px 0 0;
    font-size: 1rem;
}

.filterbar {
    row-gap: 10px;
}

.toggle-btn {
    white-space: normal;
    text-align: center;
}

.review-card {
    padding: clamp(18px, 4vw, 28px);
}

.review-text {
    font-size: clamp(16px, 2.4vw, 18px);
}

.contact-mail {
    word-break: break-word;
}

@media (max-width: 1100px) {
    .hero-inner .actions {
        grid-template-columns: 1fr;
    }

    .hero-inner .actions .btn {
        width: 100%;
    }

    .addon_grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 920px) {
    body {
        padding-top: 84px;
    }

    header {
        background: rgba(11,11,11,.92);
    }

    .topbar {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 12px;
        padding: 10px 0;
    }

    .logo {
        max-width: 88px;
    }

    nav {
        display: none;
    }

    details.mobileNav {
        display: block;
        position: relative;
    }

    details.mobileNav[open] {
        grid-column: 1 / -1;
    }

    .mobilePanel {
        width: 100%;
    }

    .actions {
        width: auto;
        order: initial;
        justify-content: flex-end;
    }

    #action {
        width: auto;
        max-width: 100%;
        white-space: normal;
        min-height: 44px;
        padding-inline: 14px;
    }

    .container-2cols-news,
    .container-2cols-partner,
    .footerGrid {
        grid-template-columns: 1fr;
    }

    .news-col-text,
    .partner-col-text {
        text-align: center;
        justify-content: center;
    }

    .bg_reviews {
        padding: 52px 0;
    }

    .reviews-toolbar {
        gap: 10px;
    }
}

@media (max-width: 680px) {
    body {
        padding-top: 76px;
    }

    section {
        padding: clamp(22px, 6vw, 34px) 0;
    }

    .hero-section {
        min-height: 0;
    }

    .hero-inner {
        min-height: clamp(480px, 84svh, 680px);
        padding-top: 28px;
        padding-bottom: 28px;
    }

    .kicker {
        font-size: .9rem;
        letter-spacing: .18em;
    }

    h1 {
        font-size: clamp(2rem, 9vw, 3rem);
        line-height: 1.02;
    }

    .lead,
    .text p,
    .text-probe p,
    .news_text,
    .review-text {
        font-size: 1rem;
    }

    .btn,
    .btn.primary,
    .btn_checkin,
    .toggle-btn {
        min-height: 48px;
        padding: 12px 14px;
        font-size: .98rem;
    }

    .hero-inner .actions {
        gap: 10px;
    }

    .split-inner,
    section.tall,
    .tall {
        min-height: 0;
    }

    .filterbar {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .filterbar[data-group="time"] {
        grid-template-columns: 1fr 1fr;
    }

    .toggle-btn,
    .toggle-btn.is-active {
        width: 100%;
    }

    .addon_grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    dialog.addon-modal-content[open],
    #ernaehrung[open],
    .notice[open],
    #cslider-modal[open],
    .dialog_auslastung[open] {
        width: min(100vw - 20px, 720px);
    }

    .addon-modal-body,
    .addon-modal-body-r {
        padding: 18px;
    }

    .notice-actions {
        justify-content: stretch;
    }

    .notice-actions .btn {
        width: 100%;
    }

    #home,
    #news,
    #studio,
    #kursplan,
    #programs,
    #coaches,
    #probetraining,
    #vertrag,
    #oeffnung,
    #contact,
    #partner,
    #addon,
    #bewertungen {
        scroll-margin-top: 84px;
    }
}

@media (max-width: 480px) {
    body {
        padding-top: 72px;
    }

    .container {
        width: min(var(--max), calc(100% - 24px));
    }

    .topbar {
        grid-template-columns: 72px 1fr auto;
        gap: 8px;
    }

    .logo {
        max-width: 72px;
    }

    details.mobileNav summary {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .actions {
        width: 100%;
        grid-column: 1 / -1;
        justify-content: stretch;
    }

    #action {
        width: 100%;
    }

    .hero-panorama {
        opacity: .55;
    }

    .media-bg {
        min-height: 520px;
        border-radius: 20px;
    }

    .hero-inner {
        min-height: 520px;
        gap: 14px;
    }

    .hero-inner .actions .btn {
        min-height: 56px;
        font-size: .95rem;
    }

    .news-col-text,
    .partner-col-text {
        font-size: 1rem;
    }

    .filterbar,
    .filterbar[data-group="time"] {
        grid-template-columns: 1fr;
    }

    .addon_grid {
        grid-template-columns: 1fr;
    }

    .addon_karte img {
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }

    .image_kontakt {
        max-width: 100%;
        height: auto;
    }

    .review-author {
        align-items: flex-start;
        flex-direction: column;
    }

    .review-text,
    .p-addon,
    .addon-list,
    .text p,
    .text-probe p {
        line-height: 1.55;
    }
}