:root {
    --bg-color: #f7f6f5; /* Light greyish paper background seen in mockup */
    --text-primary: #1a1a1a;
    --text-secondary: #666666;
    --border-color: #e5e5e5;
    
    --btn-primary-bg: #4a4a4a;
    --btn-primary-hover: #1a1a1a;
    --btn-primary-text: #ffffff;
    
    --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-primary);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    /* Off-Canvas-Menue + Deko-Blobs ragen rechts raus -> kein seitliches Scrollen auf Mobil.
       Auf body (nicht html), damit die overflow-Sperre der Popups weiter auf den Viewport wirkt. */
    overflow-x: clip;
}

/* Forms */
.form-group {
    margin-bottom: 20px;
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.form-group input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.95rem;
    background: #fdfdfd;
    transition: var(--transition);
}

.form-group input:focus {
    outline: none;
    border-color: #1a1a1a;
    box-shadow: 0 0 0 2px rgba(26,26,26,0.1);
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

/* Header */
.header {
    background-color: rgba(247,246,245,0.8);
    backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 110px;
}

.logo {
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: -0.5px;
}

.logo .city {
    font-weight: 300;
    margin-left: 4px;
}

.nav {
    display: flex;
    gap: 32px;
}

.nav a {
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: var(--transition);
}

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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
    border: none;
    white-space: nowrap;
}

.btn-primary {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}

.btn-primary:hover {
    background-color: var(--btn-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.btn-gray {
    background-color: #1a1a1a;
    color: #ffffff;
    border: 1px solid #1a1a1a;
}

.btn-gray:hover {
    background-color: #333333;
    border-color: #333333;
}

.btn-sm {
    padding: 8px 16px;
    font-size: 0.7rem;
    letter-spacing: 0.5px;
}

.glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.4);
}

/* Hero */
.hero {
    padding: 80px 0;
    background-color: transparent;
}

.hero-container {
    display: flex;
    align-items: stretch;
    gap: 60px;
}

.hero-text-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@keyframes slowBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.badge {
    display: inline-block;
    align-self: flex-start;
    padding: 6px 16px;
    background-color: #ebdcd1; /* Matches the beige accent in mockup */
    color: #4a3e35;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 24px;
    border-radius: 2px;
    animation: slowBounce 4s ease-in-out infinite;
}

.accent-gold {
    background: linear-gradient(135deg, #ebdcd1 0%, #d4a574 50%, #c8924a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
}

.hero-title {
    font-size: 5.5rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -2px;
    margin-bottom: 32px;
    color: #1a1a1a;
}

.hero-desc {
    font-size: 1.25rem;
    color: var(--text-secondary);
    max-width: 500px;
    margin-bottom: 60px;
    line-height: 1.6;
}

.offer-box {
    background-color: #f0eeec;
    padding: 32px;
    border-radius: 4px;
    max-width: 450px;
}

.offer-title {
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 8px;
}

.offer-subtitle {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 24px;
}

.countdown {
    display: flex;
    gap: 32px;
}

.cd-item {
    display: flex;
    flex-direction: column;
}

.cd-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.cd-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 4px;
}

.hero-img-col {
    flex: 1;
    position: relative;
}

.hero-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 700px;
}

.hero-slideshow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero-slideshow .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.05);
    transition: opacity 1.5s ease-in-out, transform 6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero-slideshow .slide.active {
    opacity: 1;
    transform: scale(1);
}

.slide-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.85);
    color: #1a1a1a;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    backdrop-filter: blur(4px);
    transition: background 0.2s, transform 0.2s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.slide-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.slide-arrow:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 3px; }
.slide-prev { left: 16px; }
.slide-next { right: 16px; }

.slide-dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 5;
}
.slide-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.5);
    cursor: pointer;
    padding: 0;
    transition: background 0.2s, transform 0.2s;
}
.slide-dot.active { background: #fff; transform: scale(1.2); }
.slide-dot:hover { background: rgba(255,255,255,0.85); }
.slide-dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 600px) {
    .slide-arrow { width: 36px; height: 36px; }
    .slide-prev { left: 8px; }
    .slide-next { right: 8px; }
}

.quality-badge {
    position: absolute;
    bottom: -30px;
    left: -40px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    animation: slowBounce 5s ease-in-out infinite reverse;
}

.quality-badge svg {
    color: #1a1a1a;
}

.badge-title {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.badge-desc {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Services / Unser Angebot */
.services {
    padding: 100px 0;
    background-color: transparent;
}

.section-header {
    margin-bottom: 60px;
}

.section-subtitle {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--text-secondary);
    text-transform: uppercase;
    display: block;
    margin-bottom: 12px;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -1px;
    margin-bottom: 24px;
    color: #1a1a1a;
}

.title-line {
    width: 60px;
    height: 3px;
    background-color: #1a1a1a;
}

/* Flex statt Grid: eine unvollstaendige letzte Reihe steht mittig statt links */
.services-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;

    /* Image vars */
    --cardio-img: url('gallery/full/cardio-02.jpg');
    --geraete-img: url('gallery/full/kraft-02.jpg');
    --egym-img: url('gallery/full/egym-01.jpg');
    --reha-img: url('gallery/full/reha-03.jpg');
    --sauna-img: url('gallery/full/ruheraum-01.jpg');
    --yoga-img: url('gallery/full/kursraum-02.jpg');
    --ruecken-img: url('gallery/angebot/ruecken-hell.jpg');
}

.service-card {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    min-height: 280px;
    text-decoration: none;
    color: inherit;
    display: flex;
    transition: var(--transition);
    cursor: pointer;
    background-color: #1a1a1a;
}

.services-grid > .service-card {
    flex: 0 0 calc((100% - 48px) / 3);
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15), inset 0 0 0 1px rgba(255,255,255,0.1);
}

.service-card h3 {
    color: white;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    position: relative;
    z-index: 2;
}

.service-card.has-bg {
    background-size: cover;
    background-position: center;
    align-items: flex-end;
    padding: 32px;
}

/* Gradient overlay for text readability */
.service-card.has-bg::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.12) 45%, transparent 70%);
    z-index: 1;
    transition: var(--transition);
}

.service-card:hover.has-bg::before {
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.05) 100%);
}

.service-card.text-card {
    background-color: #f7f6f5; /* matches overall bg or slightly darker depending on mockup */
    /* wait, mockup has some grey cards */
    background: linear-gradient(135deg, #e0dfde 0%, #ecebe9 100%);
    color: #1a1a1a;
    border: 1px solid rgba(0,0,0,0.05);
}

.service-card.text-card.icon-bg {
    background: linear-gradient(135deg, #d5d4d2 0%, #dfdedc 100%);
}

.service-card.text-card h3 {
    color: #1a1a1a;
}

.card-content-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
    padding: 32px;
    position: relative;
    z-index: 2;
}

.card-icon {
    margin-bottom: 16px;
    color: #1a1a1a;
}

.card-bg-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(0,0,0,0.05);
    z-index: 1;
    pointer-events: none;
}

.card-content-bottom {
    display: flex;
    align-items: flex-end;
    padding: 32px;
    width: 100%;
    position: relative;
    z-index: 2;
}

/* Service-Card Badge (oben rechts auf einer Card) */
.service-card-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
    background: linear-gradient(135deg, #ffb400 0%, #ff8c00 100%);
    color: #1a1a1a;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 6px 12px;
    border-radius: 999px;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(255, 140, 0, 0.35);
}

/* Highlight-Effekt fuer die Ruecken-Card */
.ruecken-card {
    box-shadow: 0 8px 24px rgba(255, 140, 0, 0.18);
    outline: 2px solid rgba(255, 180, 0, 0.55);
    outline-offset: -2px;
}
.ruecken-card:hover {
    outline-color: rgba(255, 180, 0, 0.85);
    box-shadow: 0 20px 40px rgba(255, 140, 0, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

@media (max-width: 1024px) {
    .services-grid > .service-card {
        flex-basis: calc((100% - 24px) / 2);
    }
}
@media (max-width: 768px) {
    .hero-container {
        flex-direction: column;
    }
    .hero-image-wrapper {
        min-height: 400px;
    }
    .services-grid > .service-card {
        flex-basis: 100%;
    }
}

/* Öffnungszeiten Section (betreut/unbetreut) */
.hours-section {
    padding: 100px 0;
    background: linear-gradient(180deg, #fafafa 0%, #f1f0ee 100%);
    position: relative;
}
.hours-section .section-header {
    margin-bottom: 56px;
}
.hours-lead {
    max-width: 720px;
    margin: 24px auto 0;
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.6;
}
.hours-lead strong {
    color: var(--text-primary);
    font-weight: 700;
}
.hours-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
}
.hours-card {
    background: #fff;
    border-radius: 12px;
    padding: 36px 32px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.04);
    position: relative;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}
.hours-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.10);
}
.hours-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: rgba(255,180,0,0.12);
    color: #ffb400;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
/* Primary card (dunkle Variante "Unbetreut trainieren") - alle Overrides am Ende
   damit sie spaeter definierte Default-Regeln gewinnen */
.hours-card.hours-card-primary {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    color: #fff;
    border: none;
    box-shadow: 0 12px 36px rgba(0,0,0,0.18);
}
.hours-card.hours-card-primary h3,
.hours-card.hours-card-primary .hours-card-time { color: #fff; }
.hours-card.hours-card-primary .hours-card-meta,
.hours-card.hours-card-primary .hours-card-desc { color: rgba(255,255,255,0.75); }
.hours-card.hours-card-primary .hours-card-icon {
    background: rgba(255,180,0,0.18);
}
.hours-card.hours-card-primary .hours-list li {
    border-bottom-color: rgba(255,255,255,0.08);
}
.hours-card.hours-card-primary .hours-list li span { color: rgba(255,255,255,0.7); }
.hours-card.hours-card-primary .hours-list li strong { color: #fff; }
.hours-card-tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: #ffb400;
    background: rgba(255,180,0,0.12);
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 12px;
    align-self: flex-start;
}
.hours-card-tag-staff {
    color: #1a1a1a;
    background: rgba(26,26,26,0.08);
}
.hours-card h3 {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin-bottom: 12px;
    color: var(--text-primary);
}
.hours-card-time {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -1px;
    color: var(--text-primary);
    margin-bottom: 6px;
    font-variant-numeric: tabular-nums;
}
.hours-card-meta {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 16px;
}
.hours-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}
.hours-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    gap: 16px;
}
.hours-list li:last-child { border-bottom: none; }
.hours-list li span {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.95rem;
}
.hours-list li strong {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.hours-card-desc {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}
.hours-cta {
    margin-top: 48px;
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
@media (max-width: 768px) {
    .hours-grid { grid-template-columns: 1fr; }
    .hours-card { padding: 28px 24px; }
    .hours-card-time { font-size: 1.7rem; }
}

/* Features / Warum Wir */
/* Helle Standard-Sektion fuer Unterseiten (kontakt, galerie, impressum, datenschutz).
   .features bleibt dunkel-gefrostet fuer "Warum Wir?" auf Index. */
.page-section {
    padding: 80px 0 100px;
    background-color: transparent;
    color: var(--text-primary);
}
.page-section .section-title { color: var(--text-primary); }
.page-section .section-subtitle { color: var(--text-secondary); }

.features {
    padding: 120px 0;
    background-color: rgba(26, 26, 26, 0.85); /* Dark frosted glass */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.features-container {
    display: flex;
    gap: 80px;
    align-items: center;
}

.features-text-col {
    flex: 1;
    position: relative;
    max-width: 450px;
}

.features-bg-text {
    position: absolute;
    top: -60px;
    left: -40px;
    font-size: 8rem;
    font-weight: 800;
    color: rgba(255,255,255,0.03);
    white-space: nowrap;
    z-index: 1;
    pointer-events: none;
    letter-spacing: -2px;
}

.features-title {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1px;
    margin-bottom: 24px;
    color: #ffffff;
    position: relative;
    z-index: 2;
}

.features-desc {
    font-size: 1.1rem;
    color: #a0a0a0;
    line-height: 1.6;
    font-style: italic;
    position: relative;
    z-index: 2;
}

.features-grid {
    flex: 1.5;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 40px;
}

.feature-item {
    display: flex;
    flex-direction: column;
}

.feature-icon {
    width: 48px;
    height: 48px;
    background-color: rgba(255,255,255,0.05);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: #ffffff;
}

.feature-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
    color: #ffffff;
}

.feature-desc {
    font-size: 0.9rem;
    color: #a0a0a0;
    line-height: 1.6;
}

/* Features Editorial / Magazin-Look (ueberschreibt .features-container Struktur) */
.features-editorial {
    padding: 140px 0;
    background: linear-gradient(180deg, rgba(20,18,15,0.92) 0%, rgba(28,24,20,0.95) 100%);
    overflow: hidden;
    position: relative;
}
.features-editorial::before {
    content: '';
    position: absolute;
    top: -10%;
    right: -15%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(212,165,116,0.07) 0%, transparent 70%);
    pointer-events: none;
}
.editorial-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 80px;
    align-items: stretch;
    position: relative;
    z-index: 1;
}
.editorial-image-col {
    position: relative;
    align-self: stretch;
    min-height: 600px;
}
.editorial-image {
    width: 100%;
    height: 100%;
    min-height: 600px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
    filter: contrast(1.05) saturate(0.95);
    box-shadow: 0 30px 60px rgba(0,0,0,0.4);
}
.editorial-image-tag {
    position: absolute;
    bottom: 24px;
    left: 24px;
    background: rgba(20, 18, 15, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(212, 165, 116, 0.35);
    border-left: 3px solid #d4a574;
    color: #fff;
    padding: 14px 20px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.editorial-tag-line {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 2.5px;
    color: #d4a574;
}
.editorial-tag-loc {
    font-size: 0.8rem;
    font-weight: 500;
    color: rgba(255,255,255,0.85);
    letter-spacing: 1.5px;
}
.editorial-content-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.editorial-eyebrow {
    display: flex;
    align-items: center;
    gap: 16px;
    color: #d4a574;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 24px;
    text-transform: uppercase;
}
.editorial-eyebrow-line {
    flex: 0 0 48px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #d4a574);
}
.editorial-title {
    font-size: clamp(2.4rem, 4vw, 3.5rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -1.5px;
    color: #fff;
    margin: 0 0 28px;
}
.editorial-title em {
    font-style: italic;
    font-weight: 300;
    color: #d4a574;
}
.editorial-lead {
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.7);
    margin: 0 0 40px;
    max-width: 580px;
}
.editorial-lead strong {
    color: #fff;
    font-weight: 600;
}
.editorial-pillars {
    list-style: none;
    margin: 0;
    padding: 0;
}
.editorial-pillars li {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 24px;
    padding: 24px 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    align-items: start;
    transition: border-color 0.3s ease;
}
.editorial-pillars li:last-child {
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.editorial-pillars li:hover {
    border-top-color: rgba(212,165,116,0.55);
}
.editorial-pillars li:hover + li {
    border-top-color: rgba(212,165,116,0.55);
}
.editorial-pillars li:last-child:hover {
    border-bottom-color: rgba(212,165,116,0.55);
}
.pillar-num {
    font-size: 1.6rem;
    font-weight: 200;
    color: rgba(212,165,116,0.55);
    letter-spacing: -1px;
    line-height: 1;
    padding-top: 4px;
    transition: color 0.3s ease, transform 0.3s ease;
    font-variant-numeric: tabular-nums;
}
.editorial-pillars li:hover .pillar-num {
    color: #d4a574;
    transform: translateX(6px);
}
.pillar-body h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px;
    letter-spacing: -0.3px;
}
.pillar-body p {
    font-size: 0.95rem;
    line-height: 1.65;
    color: rgba(255,255,255,0.65);
    margin: 0;
}

@media (max-width: 1024px) {
    .features-editorial { padding: 100px 0; }
    .editorial-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .editorial-image-col,
    .editorial-image { min-height: 480px; }
}
@media (max-width: 600px) {
    .features-editorial { padding: 80px 0; }
    .editorial-image-col,
    .editorial-image { min-height: 360px; }
    .editorial-pillars li {
        grid-template-columns: 50px 1fr;
        gap: 16px;
        padding: 20px 0;
    }
    .pillar-num { font-size: 1.3rem; }
    .editorial-image-tag { bottom: 16px; left: 16px; padding: 12px 16px; }
}

/* Pricing / Wähle Dein Level */
.pricing {
    padding: 100px 0;
    background-color: transparent;
    text-align: center;
}

.pricing .section-subtitle, .pricing .section-title {
    text-align: center;
}

.pricing .section-header {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 24px;
    align-items: center;
    margin-top: 60px;
}

.pricing-card {
    background-color: white;
    padding: 40px 32px;
    border-radius: 4px;
    text-align: left;
    transition: var(--transition);
    position: relative;
    box-shadow: 0 10px 40px rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.02);
}

.pricing-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(0,0,0,0.08); /* Deeper shadow */
}

.pricing-card.bestseller {
    background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
    box-shadow: 0 20px 50px rgba(0,0,0,0.3), 0 0 0 1px rgba(212, 165, 116, 0.4);
    transform: scale(1.05);
    z-index: 2;
    color: #ffffff;
    position: relative;
}
.pricing-card.bestseller::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, #ebdcd1 0%, transparent 30%, transparent 70%, #d4a574 100%);
    border-radius: 6px;
    z-index: -1;
    opacity: 0.7;
}

.pricing-card.bestseller:hover {
    transform: scale(1.05) translateY(-8px);
    box-shadow: 0 30px 70px rgba(0,0,0,0.4), 0 0 0 1px rgba(212, 165, 116, 0.6);
}

.bestseller-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #ebdcd1 0%, #d4a574 100%);
    color: #1a1a1a;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 20px;
    letter-spacing: 1px;
}

.pricing-name {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin-bottom: 16px;
}

.pricing-price {
    font-size: 3rem;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 32px;
    display: flex;
    align-items: baseline;
}

.pricing-price span {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--text-secondary);
    margin-left: 4px;
}

.pricing-features {
    list-style: none;
    margin-bottom: 40px;
}

.pricing-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.pricing-features li svg {
    flex-shrink: 0;
}

.pricing-features li.disabled {
    opacity: 0.5;
    text-decoration: line-through;
}

/* Specific text overrides for the dark bestseller card */
.pricing-card.bestseller .pricing-name,
.pricing-card.bestseller .pricing-price span,
.pricing-card.bestseller .pricing-features li {
    color: #a0a0a0;
}

.pricing-card.bestseller .pricing-price {
    color: #ffffff;
}

.pricing-card.bestseller .pricing-features li svg {
    stroke: #ffffff;
}

.pricing-card.bestseller .btn-primary {
    background: linear-gradient(135deg, #ebdcd1 0%, #d4a574 100%);
    color: #1a1a1a;
    width: 100%;
    border: none;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}

.pricing-card.bestseller .btn-primary:hover {
    background: linear-gradient(135deg, #ffe9d8 0%, #e0b888 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(212, 165, 116, 0.4);
}

.btn-outline {
    background-color: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.btn-outline:hover {
    border-color: var(--text-primary);
    background-color: rgba(0,0,0,0.03);
}

@media (max-width: 900px) {
    .features-container {
        flex-direction: column;
        gap: 60px;
    }
    .features-text-col {
        max-width: 100%;
    }
    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .pricing-card.bestseller {
        transform: none;
    }
    .pricing-card.bestseller:hover {
        transform: translateY(-5px);
    }
}
@media (max-width: 600px) {
    .features-grid {
        grid-template-columns: 1fr;
    }
}

/* Footer */
/* Promotion Strip (oberhalb Header) */
.promo-strip {
    background: linear-gradient(90deg, #1a1a1a 0%, #2a2520 50%, #1a1a1a 100%);
    color: #fff;
    border-bottom: 1px solid rgba(212, 165, 116, 0.4);
    position: relative;
    z-index: 99;
}
.promo-strip[hidden] { display: none !important; }
.promo-strip-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 10px 16px;
    flex-wrap: wrap;
}
.promo-strip-icon { font-size: 1.1rem; }
.promo-strip-text { font-size: 0.9rem; color: rgba(255, 255, 255, 0.85); }
.promo-strip-text strong {
    background: linear-gradient(135deg, #ebdcd1 0%, #d4a574 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 700;
}
.promo-strip-cta {
    color: #d4a574;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 4px 10px;
    border: 1px solid rgba(212, 165, 116, 0.5);
    border-radius: 4px;
    transition: background 0.2s, color 0.2s;
}
.promo-strip-cta:hover { background: linear-gradient(135deg, #ebdcd1 0%, #d4a574 100%); color: #1a1a1a; border-color: transparent; }
.promo-strip-close {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    transition: color 0.2s, background 0.2s;
}
.promo-strip-close:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
@media (max-width: 600px) {
    .promo-strip-inner { padding-right: 38px; gap: 8px; }
    .promo-strip-text { font-size: 0.78rem; flex: 1 1 100%; text-align: center; }
    .promo-strip-cta { font-size: 0.78rem; padding: 4px 8px; }
    .promo-strip-icon { display: none; }
}

/* Cookie-Banner DSGVO */
.cookie-banner {
    position: fixed;
    bottom: 16px;
    left: 16px;
    right: 16px;
    max-width: 520px;
    background: #1a1a1a;
    color: #fff;
    border-radius: 10px;
    padding: 20px 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    z-index: 998;
    border: 1px solid rgba(212, 165, 116, 0.3);
    transform: translateY(120%);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.cookie-banner[hidden] { display: none !important; }
.cookie-banner.visible { transform: translateY(0); }
.cookie-banner h3 {
    font-size: 1rem;
    margin-bottom: 8px;
    color: #d4a574;
}
.cookie-banner p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.55;
    margin-bottom: 16px;
}
.cookie-banner p a { color: #d4a574; text-decoration: underline; }
.cookie-banner-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.cookie-banner button {
    padding: 10px 18px;
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: transform 0.2s, background 0.2s;
}
.cookie-banner-accept {
    background: linear-gradient(135deg, #ebdcd1 0%, #d4a574 100%);
    color: #1a1a1a;
}
.cookie-banner-accept:hover { transform: translateY(-1px); }
.cookie-banner-decline {
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.cookie-banner-decline:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
@media (max-width: 600px) {
    .cookie-banner {
        bottom: 88px; /* ueber WhatsApp-FAB */
        left: 12px;
        right: 12px;
        padding: 16px 18px;
    }
    .cookie-banner h3 { font-size: 0.92rem; }
    .cookie-banner p { font-size: 0.8rem; margin-bottom: 12px; }
    .cookie-banner button { padding: 8px 14px; font-size: 0.8rem; flex: 1; }
}

/* Mobile Nav Hamburger */
.nav-toggle {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    margin-left: auto;
    width: 44px;
    height: 44px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
.nav-toggle span {
    width: 24px;
    height: 2px;
    background: #1a1a1a;
    border-radius: 1px;
    transition: transform 0.3s ease, opacity 0.2s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
    .header-content { justify-content: flex-start; gap: 8px; }
    .nav-toggle { display: flex; }
    .header-content > .nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 80%;
        max-width: 320px;
        background: #fff;
        flex-direction: column;
        align-items: flex-start;
        padding: 96px 32px 32px;
        gap: 0;
        z-index: 200;
        box-shadow: -16px 0 40px rgba(0, 0, 0, 0.15);
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .header-content > .nav.open { transform: translateX(0); }
    .header-content > .nav a {
        font-size: 1rem;
        padding: 14px 0;
        width: 100%;
        border-bottom: 1px solid var(--border-color);
    }
    .header-content > .nav a:last-child { border-bottom: none; }
    .nav-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 150;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }
    .nav-overlay.visible { opacity: 1; pointer-events: auto; }
    /* CTA-Buttons im Header auf Mobile verstecken - sie sind via Drawer-Nav erreichbar */
    .header-content > a.btn,
    .header-content > div[style*="display: flex"] {
        display: none !important;
    }
    .header-content > a.logo img { height: 60px !important; }
}

/* Detail-Seiten (Service-Subpages: cardio, geraete, egym, reha, ernaehrung, sauna, kampfsport, yoga) */
.detail-hero {
    position: relative;
    min-height: 460px;
    background-size: cover;
    background-position: center;
    color: #fff;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.detail-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.5) 60%, rgba(0,0,0,0.3) 100%);
}
/* ATK: Hochformat-Trainerfoto rechts, links dunkler Auslauf unter dem Text */
.detail-hero.hero-atk {
    background-color: #141414;
    background-image: linear-gradient(90deg, #141414 0%, #141414 38%, rgba(20, 20, 20, 0) 62%), url('gallery/full/ks-atk-trainer.jpg');
    background-size: auto, auto 215%;
    background-position: 0 0, right 8% top 6%;
    background-repeat: no-repeat;
}
@media (max-width: 900px) {
    .detail-hero.hero-atk {
        background-image: url('gallery/full/ks-atk-trainer.jpg');
        background-size: cover;
        background-position: center 6%;
    }
}
.detail-hero-inner {
    position: relative;
    padding: 80px 0;
    max-width: 720px;
}
.detail-hero .badge {
    background: linear-gradient(135deg, #ebdcd1 0%, #d4a574 100%);
    color: #1a1a1a;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    display: inline-block;
    margin-bottom: 20px;
}
.detail-hero h1 {
    font-size: 3.6rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -1.5px;
    margin-bottom: 16px;
}
.detail-hero p {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.85);
    line-height: 1.55;
    margin-bottom: 32px;
    max-width: 580px;
}
.detail-hero .btn-primary {
    background: linear-gradient(135deg, #ebdcd1 0%, #d4a574 100%);
    color: #1a1a1a;
    border: none;
}
.detail-hero .btn-primary:hover {
    background: linear-gradient(135deg, #ffe9d8 0%, #e0b888 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(212, 165, 116, 0.4);
}
@media (max-width: 700px) {
    .detail-hero { min-height: 380px; }
    .detail-hero h1 { font-size: 2.4rem; }
    .detail-hero p { font-size: 1rem; }
}

.detail-section {
    padding: 80px 0;
}
.detail-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 64px;
    align-items: start;
}
@media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; gap: 40px; } }
.detail-text h2 {
    font-size: 2rem;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 16px;
    letter-spacing: -0.5px;
}
.detail-text p {
    color: var(--text-secondary);
    line-height: 1.7;
    font-size: 1rem;
    margin-bottom: 16px;
}
.detail-text h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-top: 32px;
    margin-bottom: 12px;
}
.detail-list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
}
.detail-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 0;
    color: #1a1a1a;
    font-size: 0.95rem;
}
.detail-list li::before {
    content: '';
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, #ebdcd1 0%, #d4a574 100%);
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 7px;
}
.detail-info-box {
    background: #fafaf9;
    border-left: 3px solid #d4a574;
    padding: 16px 20px;
    margin-top: 24px;
    border-radius: 0 4px 4px 0;
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.55;
}
.detail-info-box a { color: #1a1a1a; font-weight: 600; }

.detail-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.detail-images img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    cursor: pointer;
    transition: transform 0.4s, box-shadow 0.4s;
}
.detail-images img:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(0,0,0,0.14);
}
.detail-images img:nth-child(odd):last-child { grid-column: 1 / -1; aspect-ratio: 16 / 7; }

.detail-cta-band {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2520 100%);
    color: #fff;
    padding: 64px 0;
    text-align: center;
    border-top: 3px solid transparent;
    border-image: linear-gradient(90deg, transparent, #d4a574, transparent) 1;
}
.detail-cta-band h3 {
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 12px;
}
.detail-cta-band p {
    color: rgba(255,255,255,0.7);
    margin-bottom: 24px;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
}
.detail-cta-band .btn-primary {
    background: linear-gradient(135deg, #ebdcd1 0%, #d4a574 100%);
    color: #1a1a1a;
}
.detail-cta-band .btn-outline {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.4);
    color: #fff;
    width: auto;
}
.detail-cta-band .btn-outline:hover {
    border-color: #fff;
    background: rgba(255,255,255,0.05);
}

/* Stats Bar */
.stats-bar {
    padding: 64px 0;
    background: linear-gradient(180deg, #ffffff 0%, #fafaf9 100%);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    position: relative;
}
.stats-bar::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, #d4a574 50%, transparent 100%);
}
.stats-grid {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 24px;
}
.stat-item {
    text-align: center;
    flex: 1;
}
.stat-value {
    display: flex;
    align-items: baseline;
    justify-content: center;
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1;
    color: #1a1a1a;
    letter-spacing: -2px;
    margin-bottom: 8px;
}
.stat-value .stat-suffix {
    font-size: 2rem;
    background: linear-gradient(135deg, #ebdcd1 0%, #d4a574 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-left: 2px;
}
.stat-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 500;
}
.stat-divider {
    width: 1px;
    height: 60px;
    background: var(--border-color);
    flex-shrink: 0;
}
@media (max-width: 700px) {
    .stats-grid { flex-direction: column; gap: 32px; }
    .stat-divider { width: 60px; height: 1px; }
    .stat-value { font-size: 2.6rem; }
    .stat-value .stat-suffix { font-size: 1.6rem; }
}

/* Welcome-Banner Modal (Aktion im Flyer-Stil) */
.welcome-banner {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.welcome-banner[hidden] { display: none !important; }
.welcome-banner.visible { opacity: 1; }
.welcome-banner-card {
    position: relative;
    background: #121212;
    color: #fff;
    border-radius: 6px;
    max-width: 460px;
    width: 100%;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
    transform: scale(0.94);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.welcome-banner.visible .welcome-banner-card { transform: scale(1); }
.welcome-banner-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.welcome-banner-close:hover { background: rgba(255, 255, 255, 0.25); }
.wb-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 64px 14px 28px;
}
.wb-logo { height: 58px; width: auto; display: block; }
.wb-ort {
    color: #d4a574;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 3px;
}
.wb-photo {
    position: relative;
    height: 210px;
    background-size: cover;
    background-position: center 60%;
}
.wb-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(18, 18, 18, 0) 35%, rgba(18, 18, 18, 0.85) 80%, #121212 100%);
}
.wb-body {
    position: relative;
    z-index: 2;
    margin-top: -78px;
    padding: 0 28px 24px;
}
.wb-title { margin: 0 0 6px; line-height: 0.95; }
.wb-big {
    display: block;
    font-size: 4.2rem;
    font-weight: 800;
    letter-spacing: -2.5px;
    color: #fff;
}
.wb-gold {
    display: block;
    margin-top: 8px;
    font-size: 2.3rem;
    font-weight: 800;
    letter-spacing: -1px;
    color: #d4a574;
}
.wb-frist {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    font-weight: 600;
    margin: 12px 0 18px;
}
.wb-bonus {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #d4a574;
    color: #121212;
    padding: 14px 18px;
    border-radius: 2px;
    margin-bottom: 20px;
}
.wb-bonus strong { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.5px; white-space: nowrap; }
.wb-bonus span { font-size: 0.8rem; font-weight: 600; text-align: right; line-height: 1.3; }
.welcome-banner-cta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}
.welcome-banner-cta .wb-btn {
    display: block;
    width: 100%;
    padding: 16px 24px;
    background: #fff;
    color: #121212;
    border-radius: 2px;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    transition: background 0.2s;
}
.welcome-banner-cta .wb-btn:hover { background: #ebdcd1; }
.welcome-banner-link {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: underline;
    font-family: inherit;
    padding: 4px 8px;
    transition: color 0.2s;
}
.welcome-banner-link:hover { color: #fff; }
.wb-klein {
    margin-top: 12px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.7rem;
    text-align: center;
}
@media (max-width: 500px) {
    .wb-head { padding: 14px 60px 10px 20px; }
    .wb-logo { height: 46px; }
    .wb-photo { height: 160px; }
    .wb-body { margin-top: -64px; padding: 0 20px 20px; }
    .wb-big { font-size: 3.3rem; letter-spacing: -2px; }
    .wb-gold { font-size: 1.85rem; }
    .wb-bonus { flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 16px; }
    .wb-bonus strong { font-size: 1.25rem; }
    .wb-bonus span { font-size: 0.8rem; text-align: left; }
    .wb-bonus br { display: none; }
}
@media (max-height: 700px) {
    .wb-photo { height: 130px; }
    .wb-body { margin-top: -56px; }
}

/* FAQ Section */
.faq {
    padding: 100px 0;
    background: #fff;
    border-top: 1px solid var(--border-color);
}
.faq-container { max-width: 820px; }
.faq-list { display: flex; flex-direction: column; gap: 12px; margin-top: 40px; }
.faq-item {
    background: #fafaf9;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.faq-item.open { box-shadow: 0 4px 16px rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.12); }
.faq-question {
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 22px 28px;
    font-family: inherit;
    font-weight: 600;
    font-size: 1rem;
    color: #1a1a1a;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    text-align: left;
}
.faq-question:focus-visible { outline: 2px solid #d4a574; outline-offset: -2px; border-radius: 6px; }
.faq-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    position: relative;
    transition: transform 0.25s ease;
}
.faq-icon::before, .faq-icon::after {
    content: '';
    position: absolute;
    background: #1a1a1a;
    border-radius: 1px;
}
.faq-icon::before { top: 50%; left: 0; right: 0; height: 2px; transform: translateY(-50%); }
.faq-icon::after { left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); transition: transform 0.35s ease; }
.faq-item.open .faq-icon::after { transform: translateX(-50%) rotate(90deg); }

/* Smooth Akkordeon via grid-template-rows 0fr -> 1fr Trick */
.faq-answer-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease;
}
.faq-item.open .faq-answer-wrap {
    grid-template-rows: 1fr;
}
.faq-answer {
    overflow: hidden;
    padding: 0 28px;
    color: var(--text-secondary);
    line-height: 1.65;
    font-size: 0.95rem;
    transition: padding 0.35s ease;
}
.faq-item.open .faq-answer {
    padding: 0 28px 22px;
}

/* WhatsApp Floating Action Button */
.wa-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 60px;
    height: 60px;
    background: #25d366;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45);
    z-index: 999;
    transition: transform 0.25s, box-shadow 0.25s;
}
.wa-fab::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #25d366;
    opacity: 0.4;
    z-index: -1;
    animation: wa-pulse 2.4s ease-out infinite;
}
@keyframes wa-pulse {
    0% { transform: scale(1); opacity: 0.4; }
    100% { transform: scale(1.6); opacity: 0; }
}
.wa-fab:hover { transform: scale(1.1); box-shadow: 0 12px 32px rgba(37, 211, 102, 0.55); }
.wa-fab svg { width: 30px; height: 30px; }
.wa-tooltip {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    background: #1a1a1a;
    color: #fff;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
}
.wa-fab:hover .wa-tooltip { opacity: 1; transform: translateY(-50%) translateX(-4px); }
@media (max-width: 600px) {
    .wa-fab { width: 54px; height: 54px; bottom: 18px; right: 18px; }
    .wa-fab svg { width: 26px; height: 26px; }
    .wa-tooltip { display: none; }
}

/* Reviews Section */
.reviews {
    padding: 100px 0;
    background: #fafaf9;
    border-top: 1px solid var(--border-color);
}
.reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
}
@media (max-width: 900px) { .reviews-grid { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; } }
.review-card {
    background: #fff;
    padding: 28px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 16px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.review-stars { display: flex; gap: 2px; }
.review-text {
    font-size: 0.98rem;
    line-height: 1.6;
    color: #1a1a1a;
    margin: 0;
    font-style: italic;
    flex-grow: 1;
}
.review-text::before { content: "\201E"; font-size: 1.4rem; color: var(--text-secondary); }
.review-text::after { content: "\201C"; font-size: 1.4rem; color: var(--text-secondary); }
.review-author {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}
.review-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ebdcd1 0%, #d4a574 100%);
    color: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.review-name { font-weight: 600; color: #1a1a1a; font-size: 0.95rem; }
.review-meta { font-size: 0.8rem; color: var(--text-secondary); margin-top: 2px; }
.reviews-cta { text-align: center; margin-top: 40px; }
.review-video {
    display: grid;
    grid-template-columns: minmax(0, 320px) 1fr;
    gap: 40px;
    align-items: center;
    max-width: 900px;
    margin: 48px auto 0;
    background: #121212;
    color: #fff;
    border-radius: 6px;
    padding: 28px;
}
.review-video-player video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; display: block; border-radius: 4px; background: #000; }
.review-video-label { color: #d4a574; font-size: 0.72rem; font-weight: 700; letter-spacing: 2px; }
.review-video-title { margin: 10px 0 16px; font-size: 1.8rem; font-weight: 800; letter-spacing: -0.5px; line-height: 1.15; }
.review-video .review-text { color: rgba(255, 255, 255, 0.9); font-size: 1.05rem; }
.review-video .review-text::before, .review-video .review-text::after { color: #d4a574; }
.review-video-tipp { margin: 16px 0 8px; color: #d4a574; font-weight: 700; }
.review-video .review-meta { color: rgba(255, 255, 255, 0.55); }
.review-video .review-video-btn { margin-top: 22px; background: #d4a574; color: #121212; border-color: #d4a574; }
.review-video .review-video-btn:hover { background: #ebdcd1; border-color: #ebdcd1; color: #121212; }
@media (max-width: 760px) {
    .review-video { grid-template-columns: 1fr; gap: 24px; padding: 20px; max-width: 420px; }
    .review-video-title { font-size: 1.45rem; }
    .review-video-player { max-width: 260px; width: 100%; margin: 0 auto; }
}

/* Newsletter Section */
.newsletter {
    padding: 80px 0;
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.newsletter::before {
    content: '';
    position: absolute;
    top: -150px;
    right: -100px;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(212, 165, 116, 0.18) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.newsletter-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
}
@media (max-width: 900px) { .newsletter-container { grid-template-columns: 1fr; gap: 32px; } }
.newsletter-text .section-subtitle {
    background: linear-gradient(135deg, #ebdcd1 0%, #d4a574 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: block;
    margin-bottom: 12px;
}
.newsletter-title {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -1px;
    margin-bottom: 16px;
}
.newsletter-desc {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    font-size: 0.98rem;
}
.newsletter-desc strong { color: #d4a574; font-weight: 600; }
.newsletter-form { display: flex; flex-direction: column; gap: 14px; }
.newsletter-input-group {
    display: flex;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 6px;
    transition: border-color 0.2s;
}
.newsletter-input-group:focus-within { border-color: #d4a574; }
.newsletter-input-group input[type="email"] {
    flex: 1;
    background: transparent;
    border: none;
    color: #fff;
    font-family: inherit;
    font-size: 0.95rem;
    padding: 14px 16px;
    outline: none;
}
.newsletter-input-group input[type="email"]::placeholder { color: rgba(255, 255, 255, 0.4); }
.newsletter-input-group .btn-primary {
    white-space: nowrap;
    padding: 12px 24px;
    font-size: 0.85rem;
}
.newsletter-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.82rem;
    line-height: 1.5;
    cursor: pointer;
}
.newsletter-consent input { margin-top: 3px; flex-shrink: 0; accent-color: #d4a574; }
.newsletter-consent a { color: #d4a574; text-decoration: underline; }
.newsletter-status {
    margin-top: 8px;
    padding: 12px 16px;
    border-radius: 4px;
    font-size: 0.9rem;
}
.newsletter-status.success { background: rgba(40, 167, 69, 0.15); color: #6ade88; border: 1px solid rgba(40, 167, 69, 0.4); }
.newsletter-status.error { background: rgba(255, 107, 107, 0.15); color: #ff8a8a; border: 1px solid rgba(255, 107, 107, 0.4); }
@media (max-width: 600px) {
    .newsletter-input-group { flex-direction: column; }
    .newsletter-input-group .btn-primary { width: 100%; padding: 14px; }
}

/* Firmenfitness Section */
.firmenfitness {
    padding: 100px 0;
    background: #f0eeec;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}
.firmenfitness-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: stretch;
}
.firmenfitness-image {
    background-size: cover;
    background-position: center;
    border-radius: 6px;
    min-height: 480px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.18);
}
.firmenfitness-text { padding: 16px 0; }
.firmenfitness-text .section-subtitle { display: block; margin-bottom: 8px; }
.firmenfitness-text .section-title { margin-bottom: 12px; }
.firmenfitness-text .title-line { margin: 0 0 24px 0; }
.firmenfitness-desc {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 32px;
}
.firmenfitness-desc strong { color: #1a1a1a; }

/* WELLPASS Partner-Hinweis */
.wellpass-partner {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 20px;
    margin: 0 0 32px;
    background: linear-gradient(135deg, #fff 0%, #fdf6ed 100%);
    border: 1px solid rgba(212, 165, 116, 0.45);
    border-left: 4px solid #d4a574;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 4px 16px rgba(212, 165, 116, 0.10);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-left-color 0.2s ease;
}
.wellpass-partner:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(212, 165, 116, 0.18);
    border-left-color: #c8923f;
}
.wellpass-partner-mark {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ebdcd1 0%, #d4a574 100%);
    color: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wellpass-partner-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.wellpass-partner-tag {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #c8923f;
    text-transform: uppercase;
}
.wellpass-partner-brand {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: #1a1a1a;
}
.wellpass-partner-desc {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text-secondary);
    margin-top: 4px;
}
.wellpass-partner-arrow {
    flex-shrink: 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: #d4a574;
    transition: transform 0.2s ease;
}
.wellpass-partner:hover .wellpass-partner-arrow {
    transform: translateX(4px);
}
@media (max-width: 600px) {
    .wellpass-partner { gap: 14px; padding: 16px; }
    .wellpass-partner-mark { width: 38px; height: 38px; }
    .wellpass-partner-arrow { display: none; }
}

.firmenfitness-list {
    list-style: none;
    padding: 0;
    margin: 0 0 32px 0;
    display: grid;
    gap: 16px;
}
.firmenfitness-list li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.firmenfitness-list li svg {
    flex-shrink: 0;
    color: #1a1a1a;
    margin-top: 2px;
    background: #ebdcd1;
    padding: 4px;
    border-radius: 50%;
    width: 28px;
    height: 28px;
}
.firmenfitness-list li strong {
    display: block;
    color: #1a1a1a;
    font-size: 1rem;
    margin-bottom: 2px;
}
.firmenfitness-list li span {
    color: var(--text-secondary);
    font-size: 0.9rem;
}
.firmenfitness-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
@media (max-width: 900px) {
    .firmenfitness-container { grid-template-columns: 1fr; gap: 40px; }
    .firmenfitness-image { min-height: 320px; order: -1; }
}

.footer {
    background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
    color: #ffffff;
    padding: 80px 0 20px;
    border-top: 3px solid transparent;
    border-image: linear-gradient(90deg, #ebdcd1 0%, #d4a574 50%, #ebdcd1 100%) 1;
}

.footer .logo {
    color: #ffffff;
}
.footer .logo .city {
    background: linear-gradient(135deg, #ebdcd1 0%, #d4a574 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.footer-container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    grid-gap: 40px;
    margin-bottom: 60px;
}

.footer-col h4 {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    background: linear-gradient(135deg, #ebdcd1 0%, #d4a574 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 24px;
}

.footer-desc {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-top: 16px;
    margin-bottom: 24px;
    max-width: 300px;
}

.social-icons {
    display: flex;
    gap: 16px;
}

.social-icons a {
    color: var(--text-primary);
    transition: var(--transition);
}

.social-icons a:hover {
    color: var(--text-secondary);
    transform: translateY(-2px);
}

.footer-links, .footer-contact {
    list-style: none;
}

.footer-links li, .footer-contact li {
    margin-bottom: 12px;
}

.footer-links a, .footer-contact li, .footer-contact li a {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.9rem;
    text-decoration: none;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-links a:hover, .footer-contact li a:hover {
    color: #d4a574;
}

.footer-contact li svg {
    color: #d4a574;
}

.footer .social-icons {
    display: flex;
    gap: 12px;
}
.footer .social-icons a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s, transform 0.2s;
}
.footer .social-icons a:hover {
    background: linear-gradient(135deg, #ebdcd1 0%, #d4a574 100%);
    color: #1a1a1a;
    transform: translateY(-2px);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 24px;
    text-align: left;
}

.footer-bottom p {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.5px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    margin: 0;
}
.footer-credit {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.4px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.footer-credit a {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 700;
    letter-spacing: 1.2px;
    text-decoration: none;
    background: linear-gradient(135deg, #ebdcd1 0%, #d4a574 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: filter 0.2s ease;
}
.footer-credit a:hover {
    filter: brightness(1.25);
}
.footer-credit-heart {
    color: #e25555;
    display: inline-block;
    animation: footerHeartbeat 1.6s ease-in-out infinite;
    transform-origin: center;
}
@keyframes footerHeartbeat {
    0%, 100% { transform: scale(1); }
    15% { transform: scale(1.18); }
    30% { transform: scale(1); }
    45% { transform: scale(1.12); }
    60% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .footer-credit-heart { animation: none; }
}
@media (max-width: 600px) {
    .footer-bottom p { justify-content: center; text-align: center; }
}

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

@media (max-width: 600px) {
    .footer-container {
        grid-template-columns: 1fr;
    }
}

/* Scroll Animations */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays for grid items */
.reveal.delay-1 { transition-delay: 0.1s; }
.reveal.delay-2 { transition-delay: 0.2s; }
.reveal.delay-3 { transition-delay: 0.3s; }

/* Service Modal */
.service-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    padding: 20px;
}

/* Legal Pages Styling */
.legal-box {
    background: #ffffff;
    padding: 60px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    color: #444444;
    line-height: 1.8;
}

.legal-box h3 {
    margin-top: 32px;
    margin-bottom: 16px;
    color: #1a1a1a;
    font-size: 1.5rem;
}

.legal-box h4 {
    margin-top: 24px;
    margin-bottom: 12px;
    color: #1a1a1a;
    font-size: 1.1rem;
}

.legal-box p, .legal-box ul {
    margin-bottom: 16px;
}

.legal-box a {
    color: #d15a15;
    text-decoration: underline;
    transition: color 0.2s;
}

.legal-box a:hover {
    color: #1a1a1a;
}

/* Pricing Tier Colors */
.pricing-card.tier-standard { border-top: 4px solid #c0c0c0; }
.pricing-card.tier-premium { border-top: 4px solid transparent; border-image: linear-gradient(90deg, #ebdcd1 0%, #d4a574 50%, #ebdcd1 100%) 1; }
.pricing-card.tier-ultimate { border-top: 4px solid #1a1a1a; }

.btn-tier-standard {
    background-color: transparent;
    border: 1px solid #a0a0a0;
    color: #a0a0a0;
}
.btn-tier-standard:hover {
    background-color: #a0a0a0;
    color: #121212;
}

.btn-tier-premium {
    background-color: #ffd700;
    border: 1px solid #ffd700;
    color: #121212;
}
.btn-tier-premium:hover {
    background-color: #e6c200;
    border-color: #e6c200;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255,215,0,0.3);
}

.btn-tier-ultimate {
    background-color: #ff8800;
    border: 1px solid #ff8800;
    color: #121212;
}
.btn-tier-ultimate:hover {
    background-color: #e67a00;
    border-color: #e67a00;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255,136,0,0.3);
}

/* Virtual Ticket Layout */
.ticket-container {
    background: var(--surface-dark);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 24px;
    margin-top: 24px;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 20px;
}

.ticket-date-box {
    background: var(--bg-dark);
    border: 2px solid var(--accent);
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    min-width: 100px;
}

.ticket-month { color: var(--accent); font-size: 0.9rem; font-weight: 700; text-transform: uppercase; }
.ticket-day { font-size: 2.5rem; font-weight: 800; color: white; line-height: 1.1; }
.ticket-time { color: var(--text-secondary); font-size: 0.85rem; margin-top: 4px; }

.service-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.service-modal {
    background: var(--bg-color);
    width: 100%;
    max-width: 600px;
    border-radius: 8px;
    position: relative;
    transform: translateY(30px) scale(0.95);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 25px 50px rgba(0,0,0,0.15);
    overflow: hidden;
}

.service-modal-overlay.active .service-modal {
    transform: translateY(0) scale(1);
}

.service-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(0,0,0,0.05);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-primary);
    transition: var(--transition);
    z-index: 10;
}

.service-modal-close:hover {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    transform: rotate(90deg);
}

.service-modal-content {
    padding: 60px 48px;
}

.service-modal-title {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -1px;
    color: #1a1a1a;
    margin-bottom: 16px;
}

.service-modal-content .title-line {
    width: 40px;
    height: 3px;
    background-color: var(--btn-primary-bg);
    margin-bottom: 24px;
}

.service-modal-desc {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 40px;
}

.service-modal-actions {
    display: flex;
    justify-content: flex-start;
}

.service-modal-actions .btn {
    width: 100%;
}

@media (max-width: 600px) {
    .service-modal-content {
        padding: 40px 24px;
    }
}

/* Ambient Background */
.ambient-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.blob {
    position: absolute;
    filter: blur(100px);
    opacity: 0.8;
    border-radius: 50%;
    animation: float 20s infinite ease-in-out alternate;
}

.blob-1 {
    width: 600px;
    height: 600px;
    background: #ebdcd1; /* Beige accent */
    top: -10%;
    left: -10%;
    animation-duration: 25s;
}

.blob-2 {
    width: 500px;
    height: 500px;
    background: #e5e5e5; /* Grey accent */
    bottom: -10%;
    right: -10%;
    animation-duration: 22s;
    animation-direction: alternate-reverse;
}

.blob-3 {
    width: 700px;
    height: 700px;
    background: #e0dfde; /* Warm grey/taupe accent */
    top: 40%;
    left: 60%;
    animation-duration: 28s;
}

@keyframes float {
    0% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(60px, -40px) scale(1.1); }
    66% { transform: translate(-30px, 50px) scale(0.9); }
    100% { transform: translate(40px, 30px) scale(1.05); }
}

/* Studio-Reel Section (Home) */
.studio-reel {
    background: #f7f5f3;
    padding: 80px 0;
}
.studio-reel-inner {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 48px;
}
.studio-reel-text .section-subtitle { color: var(--text-secondary); }
.studio-reel-text .section-title {
    text-align: left;
    margin-top: 8px;
    max-width: 460px;
}
.studio-reel-text p {
    color: var(--text-secondary);
    margin: 16px 0 28px;
    max-width: 460px;
    line-height: 1.7;
}
.studio-reel-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.studio-reel-media {
    display: flex;
    justify-content: center;
}
.studio-reel-video {
    width: 100%;
    max-width: 360px;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    background: #000;
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.18);
    display: block;
}
@media (max-width: 900px) {
    .studio-reel { padding: 60px 0; }
    .studio-reel-inner { grid-template-columns: 1fr; gap: 32px; }
    .studio-reel-text .section-title { max-width: none; }
    .studio-reel-text p { max-width: none; }
    .studio-reel-video { max-width: 320px; }
}


/* ============================================================
   Bereichs-Leiste (Startseite, direkt unter dem Header)
   4 Hochkant-Kacheln; Kampfsport klappt 5 Unterbereiche auf.
   ============================================================ */
.bereiche {
    padding: 14px 14px 0;
}
.bereiche-stage {
    position: relative;
    height: clamp(480px, calc(100vh - 124px), 780px); /* Fallback fuer Browser ohne svh */
    height: clamp(480px, calc(100svh - 124px), 780px);
}
.bereiche-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    height: 100%;
    transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.bereiche.is-open .bereiche-grid {
    opacity: 0;
    transform: scale(0.98);
    pointer-events: none;
}

.bereich-tile,
.bereich-sub {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    border-radius: 4px;
    background-color: #1a1a1a;
    background-size: cover;
    background-position: center;
    color: #fff;
    text-decoration: none;
    isolation: isolate;
}
/* Bild-Zoom ueber Pseudo-Layer, damit der Hintergrund weich skalieren kann */
.bereich-tile::before,
.bereich-sub::before {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    transform: scale(1);
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: -2;
}
.bereich-tile::after,
.bereich-sub::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10,10,10,0.88) 0%, rgba(10,10,10,0.45) 38%, rgba(10,10,10,0.05) 70%, rgba(10,10,10,0.15) 100%);
    z-index: -1;
    transition: background 0.5s ease;
}
.bereich-tile:hover::before,
.bereich-tile:focus-visible::before,
.bereich-sub:hover::before,
.bereich-sub:focus-visible::before {
    transform: scale(1.06);
}

/* Innerer Rahmen wie im Kunden-Entwurf, bei Hover in Gold */
.bereich-tile .bereich-body::before {
    content: '';
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(255,255,255,0.45);
    border-radius: 2px;
    pointer-events: none;
    transition: border-color 0.5s ease, inset 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.bereich-tile:hover .bereich-body::before,
.bereich-tile:focus-visible .bereich-body::before {
    border-color: #d4a574;
    inset: 12px;
}
.bereich-tile:focus-visible,
.bereich-sub:focus-visible {
    outline: 3px solid #d4a574;
    outline-offset: 3px;
}

.bereich-index {
    position: absolute;
    top: 36px;
    left: 38px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: #ebdcd1;
}
.bereich-tag {
    position: absolute;
    top: 30px;
    right: 32px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #ebdcd1 0%, #d4a574 60%, #c8924a 100%);
    color: #1a1a1a;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: 2px;
}
.bereich-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 40px 56px;
}
.bereich-title {
    font-size: clamp(1.6rem, 2.3vw, 2.6rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    hyphens: manual;
    text-shadow: 0 2px 18px rgba(0,0,0,0.35);
}
.bereich-teaser {
    margin-top: 12px;
    max-width: 260px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(255,255,255,0.82);
}
.bereich-btn {
    margin-top: 24px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 26px;
    background: linear-gradient(135deg, #ebdcd1 0%, #d4a574 55%, #c8924a 100%);
    color: #1a1a1a;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: 2px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}
.bereich-btn::after {
    content: '\2192';
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.bereich-tile:hover .bereich-btn,
.bereich-tile:focus-visible .bereich-btn {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(212,165,116,0.35);
}
.bereich-tile:hover .bereich-btn::after,
.bereich-tile:focus-visible .bereich-btn::after {
    transform: translateX(4px);
}

/* Kampfsport-Panel (ersetzt die 4 Kacheln an gleicher Stelle) */
.bereich-panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.bereich-panel[hidden] { display: none; }
.bereiche.is-open .bereich-panel {
    opacity: 1;
    transform: translateY(0);
}
.bereich-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px;
    background: #1a1a1a;
    color: #fff;
    border-radius: 4px;
}
.bereich-back,
.bereich-panel-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 2px;
    color: #fff;
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}
.bereich-back:hover,
.bereich-panel-all:hover {
    border-color: #d4a574;
    color: #d4a574;
}
.bereich-back:focus-visible,
.bereich-panel-all:focus-visible {
    outline: 2px solid #d4a574;
    outline-offset: 2px;
}
.bereich-panel-heading {
    text-align: center;
}
.bereich-panel-sub {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #d4a574;
}
.bereich-panel-title {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    line-height: 1.1;
    outline: none;
}
.bereich-sub-grid {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}
.bereich-sub {
    padding: 28px 24px;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.bereiche.is-open .bereich-sub {
    opacity: 1;
    transform: translateY(0);
}
.bereiche.is-open .bereich-sub:nth-child(2) { transition-delay: 0.05s; }
.bereiche.is-open .bereich-sub:nth-child(3) { transition-delay: 0.1s; }
.bereiche.is-open .bereich-sub:nth-child(4) { transition-delay: 0.15s; }
.bereiche.is-open .bereich-sub:nth-child(5) { transition-delay: 0.2s; }
.bereich-sub::after {
    background: linear-gradient(to top, rgba(10,10,10,0.9) 0%, rgba(10,10,10,0.35) 50%, rgba(10,10,10,0.1) 100%);
}
.bereich-sub-title {
    font-size: clamp(1.1rem, 1.5vw, 1.5rem);
    font-weight: 800;
    letter-spacing: -0.3px;
    text-transform: uppercase;
    line-height: 1.1;
    padding-bottom: 12px;
    border-bottom: 2px solid #d4a574;
    align-self: flex-start;
}
.bereich-sub-meta {
    margin-top: 12px;
    font-size: 0.8rem;
    font-weight: 500;
    color: rgba(255,255,255,0.8);
}
.bereich-sub-meta::after {
    content: ' \2192';
    color: #d4a574;
}
.bereich-sub-plan::after {
    background: linear-gradient(to top, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.7) 42%, rgba(10,10,10,0.1) 100%);
}
.bereich-sub-days {
    margin-top: 14px;
    display: grid;
    gap: 6px;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.85);
    font-variant-numeric: tabular-nums;
}
.bereich-sub-days b {
    display: inline-block;
    width: 30px;
    color: #d4a574;
    font-weight: 700;
}

@media (max-width: 1100px) {
    .bereich-body { padding: 0 28px 44px; }
    .bereich-teaser { display: none; }
    .bereich-sub-grid { grid-template-columns: repeat(3, 1fr); }
    .bereich-sub { padding: 20px 18px; }
}
@media (max-width: 768px) {
    .bereiche { padding: 10px 10px 0; }
    .bereiche-stage { height: auto; }
    .bereiche-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        height: auto;
    }
    .bereich-tile { min-height: calc((100vh - 150px) / 2); min-height: calc((100svh - 150px) / 2); max-height: 380px; }
    .bereiche.is-open .bereiche-grid { display: none; }
    .bereich-panel { position: static; gap: 10px; }
    .bereich-panel-head { flex-wrap: wrap; padding: 14px; }
    .bereich-panel-heading { order: -1; width: 100%; text-align: left; }
    .bereich-back, .bereich-panel-all { padding: 9px 10px; font-size: 0.6rem; letter-spacing: 0.8px; }
    .bereich-sub-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .bereich-sub { min-height: 170px; padding: 16px 14px; }
    .bereich-sub-plan { grid-column: 1 / -1; min-height: 150px; }
    .bereich-body { padding: 0 16px 28px; }
    .bereich-tile .bereich-body::before { inset: 10px; }
    .bereich-index { top: 20px; left: 22px; font-size: 0.65rem; }
    .bereich-tag { top: 16px; right: 16px; font-size: 0.55rem; padding: 4px 8px; letter-spacing: 1px; }
    .bereich-title { font-size: 1.15rem; }
    .bereich-btn { margin-top: 14px; padding: 9px 12px; font-size: 0.6rem; letter-spacing: 0.8px; white-space: nowrap; }
    .bereich-btn::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .bereiche-grid, .bereich-panel, .bereich-sub, .bereich-tile::before, .bereich-sub::before { transition: none; }
}

/* Disziplin-Karten + Zeitplan auf kampfsport.html */
.disziplin-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 40px;
}
.disziplin-card {
    display: grid;
    grid-template-columns: 200px 1fr;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
    scroll-margin-top: 130px;
}
.disziplin-card img {
    width: 100%;
    height: 100%;
    min-height: 220px;
    object-fit: cover;
    display: block;
}
.disziplin-card-body { padding: 28px; }
.disziplin-card-body h3 {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.3px;
    margin-bottom: 4px;
}
.disziplin-kicker {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #c8924a;
    margin-bottom: 12px;
}
.disziplin-card-body p {
    font-size: 0.93rem;
    color: var(--text-secondary);
    line-height: 1.6;
}
.disziplin-times {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.disziplin-times span {
    padding: 6px 10px;
    background: #f3efea;
    border-radius: 2px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #1a1a1a;
    font-variant-numeric: tabular-nums;
}
.ks-plan {
    scroll-margin-top: 130px;
}
.ks-plan-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 40px;
}
.ks-plan-day {
    background: #1a1a1a;
    color: #fff;
    border-radius: 4px;
    padding: 28px;
}
.ks-plan-day h3 {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #d4a574;
    margin-bottom: 16px;
}
.ks-plan-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 0.95rem;
}
.ks-plan-row span:last-child {
    color: rgba(255,255,255,0.75);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.ks-plan-note {
    margin-top: 24px;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-secondary);
}
.ks-plan-note a { color: #1a1a1a; font-weight: 600; }
@media (max-width: 900px) {
    .disziplin-grid { grid-template-columns: 1fr; }
    .ks-plan-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .disziplin-card { grid-template-columns: 1fr; }
    .disziplin-card img { min-height: 0; aspect-ratio: 16 / 9; }
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Vorteile-Block auf der Startseite (Wellpass, Firmenfitness, Reha, Ruecken) */
.vorteile { padding: 90px 0 20px; }
.vorteile-head { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 60px; align-items: end; margin-bottom: 40px; }
.vorteile-head .section-title { margin-bottom: 18px; }
.vorteile-head p { color: var(--text-secondary); font-size: 1.05rem; line-height: 1.65; max-width: 460px; }
.vorteile-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; grid-auto-rows: minmax(260px, auto); gap: 14px; }
.vorteil { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 32px; border-radius: 4px; overflow: hidden; color: #fff; text-decoration: none; isolation: isolate; background-color: #1a1a1a; background-size: cover; background-position: center; }
.vorteil-wellpass { grid-row: span 2; padding: 44px; background: radial-gradient(circle at 85% 12%, rgba(212,165,116,0.28) 0%, rgba(212,165,116,0) 45%), #1a1a1a; }
.vorteil-wellpass::after { content: ''; position: absolute; right: -90px; bottom: -90px; width: 280px; height: 280px; border-radius: 50%; border: 1px solid rgba(212,165,116,0.35); z-index: -1; }
.vorteil-wide { grid-column: span 2; }
.vorteil-img::before { content: ''; position: absolute; inset: 0; background: inherit; z-index: -2; transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1); }
.vorteil-img::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(10,10,10,0.9) 0%, rgba(10,10,10,0.5) 45%, rgba(10,10,10,0.1) 100%); }
.vorteil-img:hover::before { transform: scale(1.06); }
.vorteil-tag { position: absolute; top: 24px; left: 24px; padding: 6px 12px; background: linear-gradient(135deg, #ebdcd1 0%, #d4a574 60%, #c8924a 100%); color: #1a1a1a; font-size: 0.65rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; border-radius: 2px; }
.vorteil-wellpass .vorteil-tag { top: 44px; left: 44px; }
.vorteil-brand { font-size: clamp(2.4rem, 4vw, 3.6rem); font-weight: 800; letter-spacing: -1.5px; line-height: 1; }
.vorteil-brand b { color: #d4a574; }
.vorteil-title { font-size: clamp(1.4rem, 2vw, 1.9rem); font-weight: 800; letter-spacing: -0.5px; line-height: 1.05; text-transform: uppercase; hyphens: manual; }
.vorteil-text { margin-top: 10px; max-width: 380px; font-size: 0.93rem; line-height: 1.55; color: rgba(255,255,255,0.82); }
.vorteil-wellpass .vorteil-text { font-size: 1.05rem; margin-top: 16px; }
.vorteil-checks { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 30px; }
.vorteil-checks span { padding: 8px 12px; border: 1px solid rgba(255,255,255,0.2); border-radius: 2px; font-size: 0.8rem; font-weight: 600; }
.vorteil-checks span::before { content: '\2713'; margin-right: 6px; color: #d4a574; }
.vorteil-wellpass .bereich-btn { align-self: flex-start; margin-top: 0; }
.vorteil-wellpass:hover .bereich-btn { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(212,165,116,0.35); }
.vorteil-link { margin-top: 16px; font-size: 0.72rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #d4a574; }
.vorteil-link::after { content: ' \2192'; display: inline-block; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.vorteil:hover .vorteil-link::after { transform: translateX(4px); }
.vorteil:focus-visible { outline: 3px solid #d4a574; outline-offset: 3px; }
@media (max-width: 900px) {
    .vorteile { padding: 60px 0 10px; }
    .vorteile-head { grid-template-columns: 1fr; }
    .vorteile-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(220px, auto); }
    .vorteil-wellpass { grid-column: 1 / -1; grid-row: auto; padding: 32px; }
    .vorteil-wellpass .vorteil-tag { position: static; align-self: flex-start; margin-bottom: 20px; }
    .vorteil-wide { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    .vorteile-grid { grid-template-columns: 1fr; }
    .vorteil { padding: 24px; min-height: 230px; }
    .vorteil-tag { top: 18px; left: 18px; }
}

/* Kampfsport-Seite: 5 Unterbereiche als Schnellzugriff */
.kampf-nav { padding: 40px 0 0; }
.kampf-nav .bereich-sub-grid { grid-template-columns: repeat(5, 1fr); }
.kampf-nav .bereich-sub { opacity: 1; transform: none; min-height: 300px; }
@media (max-width: 1100px) { .kampf-nav .bereich-sub-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) {
    .kampf-nav { padding-top: 24px; }
    .kampf-nav .bereich-sub-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .kampf-nav .bereich-sub { min-height: 170px; }
}
/* Firmenfitness: Spalten duerfen auf dem Handy schrumpfen */
.firmenfitness-container > * { min-width: 0; }
@media (max-width: 900px) { .firmenfitness-container { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .firmenfitness-cta .btn { white-space: normal; text-align: center; flex: 1 1 100%; } }

/* Startseiten-Kacheln ohne inneren Rahmen und ohne Nummern */
.bereich-tile .bereich-body::before { display: none; }
.bereich-index { display: none; }

/* Kampfsport-Zeitplan mit 4 Tagen + Altersgruppe */
.ks-plan-grid-4 { grid-template-columns: repeat(4, 1fr); }
.ks-plan-row small { display: block; font-size: 0.75rem; color: #d4a574; font-weight: 600; margin-top: 2px; }
@media (max-width: 1100px) { .ks-plan-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ks-plan-grid-4 { grid-template-columns: 1fr; } }

/* Vorteile-Kopf: nur noch eine Ueberschrift */
.vorteile-head { display: block; margin-bottom: 32px; }
.vorteile-head .section-title { margin-bottom: 0; }

/* Kurse-Seite (yoga.html): Kurs-Buttons mit Erklaerung */
.kurs-section { padding-bottom: 40px; }
.kurs-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 28px; }
.kurs-tab { padding: 14px 22px; background: #fff; border: 1px solid var(--border-color); border-radius: 2px; font-family: inherit; font-size: 0.8rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #1a1a1a; cursor: pointer; transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.kurs-tab:hover { border-color: #d4a574; transform: translateY(-2px); }
.kurs-tab.is-active { background: linear-gradient(135deg, #ebdcd1 0%, #d4a574 55%, #c8924a 100%); border-color: transparent; }
.kurs-tab:focus-visible { outline: 2px solid #c8924a; outline-offset: 2px; }
.kurs-panel { display: grid; grid-template-columns: 1fr 1.1fr; background: #fff; border: 1px solid var(--border-color); border-radius: 4px; overflow: hidden; animation: kursIn 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
.kurs-panel[hidden] { display: none; }
@keyframes kursIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.kurs-panel-img { min-height: 380px; background-size: cover; background-position: center; }
.kurs-panel-body { padding: 40px; }
.kurs-who { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #c8924a; margin-bottom: 8px; }
.kurs-panel-body h3 { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 14px; }
.kurs-panel-body > p { color: var(--text-secondary); line-height: 1.7; font-size: 1rem; }
.kurs-facts { display: grid; grid-template-columns: auto 1fr; gap: 24px; margin: 24px 0 28px; padding-top: 20px; border-top: 1px solid var(--border-color); }
.kurs-label { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 6px; }
.kurs-facts strong { font-size: 0.95rem; }
.kurs-facts ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; font-size: 0.95rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.kurs-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.kurs-note { margin-top: 20px; font-size: 0.9rem; color: var(--text-secondary); }
.kurs-note a { color: #1a1a1a; font-weight: 600; }
.kurs-raeume { padding-top: 20px; }
.kurs-raeume-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kurs-raeume-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; display: block; }
@media (max-width: 900px) {
    .kurs-panel { grid-template-columns: 1fr; }
    .kurs-panel-img { min-height: 240px; }
    .kurs-panel-body { padding: 28px 24px; }
    .kurs-raeume-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .kurs-tabs { gap: 8px; }
    .kurs-tab { padding: 11px 14px; font-size: 0.7rem; letter-spacing: 0.8px; }
    .kurs-facts { grid-template-columns: 1fr; gap: 14px; }
    .kurs-actions .btn { flex: 1 1 100%; text-align: center; }
}

/* Sprungziele landen unter dem festen Header statt dahinter */
section[id], article[id] { scroll-margin-top: 130px; }
.hero-jump { display: flex; flex-wrap: wrap; gap: 12px; }
.detail-hero .btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.6); }
.detail-hero .btn-ghost:hover { border-color: #d4a574; color: #d4a574; }

/* Live-Hinweis oben im Header: geoeffnet / Trainer vor Ort */
.live-bar { background: #1a1a1a; color: #fff; font-size: 0.78rem; }
.live-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 32px; }
.live-status { display: inline-flex; align-items: center; gap: 9px; color: #fff; text-decoration: none; font-weight: 600; letter-spacing: 0.2px; }
.live-status:hover .live-text { text-decoration: underline; text-underline-offset: 3px; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #8a8580; flex: none; }
.live-status[data-state="staff"] .live-dot { background: #d4a574; animation: liveBreathe 2.6s ease-in-out infinite; }
.live-status[data-state="chip"] .live-dot { background: #ebdcd1; }
.live-status[data-state="closed"] .live-dot { background: #6b6661; }
@keyframes liveBreathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(212,165,116,0.6); } 50% { box-shadow: 0 0 0 5px rgba(212,165,116,0); } }
.live-phone { color: rgba(255,255,255,0.75); text-decoration: none; font-variant-numeric: tabular-nums; }
.live-phone:hover { color: #d4a574; }
@media (max-width: 600px) {
    .live-bar { font-size: 0.72rem; }
    .live-phone { display: none; }
}
@media (prefers-reduced-motion: reduce) { .live-status[data-state="staff"] .live-dot { animation: none; } }
section[id], article[id] { scroll-margin-top: 160px; }
/* Kein seitliches Wischen auf dem Handy (Off-Canvas-Menue und Deko-Blobs ragen rechts raus) */
html { overflow-x: hidden; }

/* Lokale Seiten: Links im Footer und unter dem Inhalt */
.footer-region { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; padding-top: 24px; padding-bottom: 8px; margin-top: 24px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 0.8rem; }
.footer-region span { color: #d4a574; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; font-size: 0.7rem; }
.footer-region a { color: rgba(255,255,255,0.65); text-decoration: none; }
.footer-region a:hover { color: #d4a574; }
.local-links { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--border-color); }
.local-links span { font-size: 0.75rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-secondary); margin-right: 6px; }
@media (max-width: 600px) { .local-links .btn { flex: 1 1 100%; text-align: center; } }

/* Online-Terminbuchung (termin.html) */
.tb-hero { min-height: 0; }
.tb-section { padding-top: 56px; }
.tb-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
.tb-grid > * { min-width: 0; }
.tb-step { background: #fff; border: 1px solid var(--border-color); border-radius: 6px; padding: 28px; margin-bottom: 16px; transition: opacity 0.3s ease; }
.tb-step.is-locked { opacity: 0.45; pointer-events: none; }
.tb-step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.tb-step-head h2 { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.3px; margin: 0; }
.tb-num { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #ebdcd1 0%, #d4a574 55%, #c8924a 100%); font-weight: 800; font-size: 0.9rem; flex: none; }
.tb-hint { font-size: 0.88rem; color: var(--text-secondary); margin-top: 12px; }
.tb-days { display: grid; grid-auto-flow: column; grid-auto-columns: 72px; gap: 8px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; }
.tb-day { scroll-snap-align: start; display: grid; gap: 2px; justify-items: center; padding: 10px 4px; border: 1px solid var(--border-color); border-radius: 4px; background: #fafaf9; font-family: inherit; color: #1a1a1a; cursor: pointer; transition: border-color 0.2s, background 0.2s, transform 0.2s; }
.tb-day small { font-size: 0.68rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-secondary); }
.tb-day strong { font-size: 1.4rem; font-weight: 800; line-height: 1.1; }
.tb-day:hover:not(:disabled) { border-color: #d4a574; }
.tb-day:disabled { opacity: 0.35; cursor: not-allowed; background: transparent; }
.tb-day.is-sel { background: #1a1a1a; border-color: #1a1a1a; color: #fff; }
.tb-day.is-sel small { color: #d4a574; }
.tb-skel { height: 76px; border-radius: 4px; background: linear-gradient(90deg, #f0eeec 25%, #f7f6f5 50%, #f0eeec 75%); background-size: 200% 100%; animation: tbSkel 1.2s linear infinite; }
@keyframes tbSkel { to { background-position: -200% 0; } }
.tb-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin-top: 4px; }
.tb-time { padding: 12px 6px; border: 1px solid var(--border-color); border-radius: 4px; background: #fafaf9; font-family: inherit; font-weight: 700; font-size: 0.92rem; color: #1a1a1a; cursor: pointer; font-variant-numeric: tabular-nums; transition: border-color 0.2s, background 0.2s; }
.tb-time:hover { border-color: #d4a574; }
.tb-time.is-sel { background: linear-gradient(135deg, #ebdcd1 0%, #d4a574 55%, #c8924a 100%); border-color: transparent; }
.tb-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; }
.tb-full { grid-column: 1 / -1; }
.tb-fields .form-group { margin-bottom: 14px; }
.tb-fields textarea { width: 100%; padding: 12px 16px; border: 1px solid var(--border-color); border-radius: 4px; font-family: inherit; font-size: 0.95rem; background: #fdfdfd; resize: vertical; }
.tb-fields input.has-error { border-color: #b4513b; }
.tb-opt { font-weight: 400; color: var(--text-secondary); }
.tb-err { display: block; color: #b4513b; font-size: 0.8rem; font-weight: 600; margin-top: 4px; min-height: 0; }
.tb-err:empty { display: none; }
.tb-check { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: 0.85rem; color: var(--text-secondary); margin-top: 4px; }
.tb-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: #1a1a1a; }
.tb-check a { color: #1a1a1a; font-weight: 600; }
.tb-hp { position: absolute; left: -9999px; }
.tb-alert { padding: 14px 16px; border-radius: 4px; background: #f6e7df; color: #7f2f1e; font-size: 0.92rem; font-weight: 600; margin: 8px 0 14px; grid-column: 1 / -1; }
.tb-alert a { color: inherit; }
.tb-submit { width: 100%; margin-top: 8px; }
.tb-submit.is-loading { opacity: 0.7; }
.tb-side { position: sticky; top: 160px; display: grid; gap: 14px; }
.tb-summary { background: #1a1a1a; color: #fff; border-radius: 6px; padding: 24px; }
.tb-sum-label { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 2px; color: #d4a574; margin-bottom: 14px; }
.tb-sum-row { display: grid; gap: 2px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,0.1); }
.tb-sum-row span { font-size: 0.72rem; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.tb-sum-row strong { font-size: 0.95rem; }
.tb-sum-row strong.is-empty { color: rgba(255,255,255,0.45); font-weight: 400; }
.tb-note { background: #fff; border: 1px solid var(--border-color); border-radius: 6px; padding: 18px 20px; font-size: 0.9rem; color: var(--text-secondary); }
.tb-note strong { display: block; color: #1a1a1a; margin-bottom: 4px; }
.tb-note a { color: #1a1a1a; font-weight: 600; }
.tb-success { background: #fff; border: 1px solid var(--border-color); border-radius: 6px; padding: 40px 32px; }
.tb-success-ico { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #ebdcd1 0%, #d4a574 55%, #c8924a 100%); font-size: 1.6rem; font-weight: 800; margin-bottom: 18px; }
.tb-success h2 { font-size: 1.7rem; font-weight: 800; margin-bottom: 8px; }
.tb-success-when { font-size: 1.15rem; font-weight: 700; color: #c8924a; margin-bottom: 14px; }
.tb-success p { color: var(--text-secondary); line-height: 1.6; margin-bottom: 12px; }
.tb-success .btn { margin-top: 8px; }
@media (max-width: 900px) {
    .tb-grid { grid-template-columns: minmax(0, 1fr); }
    .tb-side { position: static; }
}
@media (max-width: 600px) {
    .tb-step { padding: 20px 16px; }
    .tb-fields { grid-template-columns: minmax(0, 1fr); }
    .tb-times { grid-template-columns: repeat(3, 1fr); }
}

/* Kampfsport: Uebersicht nur mit Buttons + Unterseiten */
.kampf-nav-main { padding: 56px 0 72px; }
.kampf-nav-main .section-header { margin-bottom: 28px; }
.kampf-nav-main .bereich-sub-grid { grid-template-columns: repeat(3, 1fr); }
.kampf-nav-main .bereich-sub { min-height: 320px; }
.kampf-nav-more { padding: 56px 0 64px; background: #f0eeec; border-top: 1px solid var(--border-color); }
.kampf-nav-more .section-header { margin-bottom: 24px; }
.ks-more-grid { grid-template-columns: repeat(5, 1fr) !important; }
.kampf-nav-more .bereich-sub { min-height: 240px; }
.ks-crumb { font-size: 0.78rem; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 14px; color: rgba(255,255,255,0.8); }
.ks-crumb a { color: #d4a574; text-decoration: none; font-weight: 700; }
.ks-crumb a:hover { text-decoration: underline; }
.ks-gallery-section { padding: 56px 0 72px; }
.ks-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 8px; }
.ks-gallery figure { margin: 0; }
.ks-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; display: block; box-shadow: 0 10px 30px rgba(0,0,0,0.08); }
.ks-gallery figcaption { font-size: 0.85rem; color: var(--text-secondary); padding: 8px 2px 0; }
@media (max-width: 1100px) { .ks-more-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 768px) {
    .kampf-nav-main .bereich-sub-grid { grid-template-columns: repeat(2, 1fr); }
    .kampf-nav-main .bereich-sub { min-height: 200px; }
    .ks-gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
@media (max-width: 480px) { .ks-gallery { grid-template-columns: 1fr; } }
.ks-gallery-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .ks-gallery-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .ks-gallery-4 { grid-template-columns: 1fr; } }

/* ============================================================
   Bilder und Videos der Bereiche (rechts neben dem Text)
   Bis zu 6 sichtbar, bis zu 10 in der Lightbox. Bei mehr als 6: Button "Zur Galerie".
   ============================================================ */
.bereich-media { display: flex; flex-direction: column; gap: 16px; }
.bm-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.bm-item {
    position: relative;
    display: block;
    padding: 0;
    border: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 6px;
    background: #e8e6e5;
    cursor: zoom-in;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    transition: transform 0.4s, box-shadow 0.4s;
}
.bm-item[data-type="video"] { cursor: pointer; }
.bm-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.bm-item:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0,0,0,0.14); }
.bm-item:hover img { transform: scale(1.05); }
.bm-item:focus-visible { outline: 3px solid #d4a574; outline-offset: 3px; }
/* nur die ersten 6 im Raster, die restlichen sind ueber die Lightbox erreichbar */
.bm-item:nth-child(n+7) { display: none; }
.bm-item[data-more]::after {
    content: attr(data-more);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10,10,10,0.55);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: 0.5px;
}
.bm-more { align-self: flex-start; }

/* Play-Symbol auf Video-Vorschauen (Galerie + Bereiche) */
.video-badge {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.25) 100%);
    transition: background 0.3s ease;
}
.video-badge svg {
    width: 56px; height: 56px;
    color: #fff;
    background: rgba(0,0,0,0.55);
    border-radius: 50%;
    padding: 14px;
    transition: transform 0.3s ease, background 0.3s ease;
}
.bm-item:hover .video-badge svg,
.gallery-item:hover .video-badge svg { transform: scale(1.08); background: rgba(212,165,116,0.95); }
.video-duration {
    position: absolute;
    bottom: 8px; right: 8px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 7px;
    border-radius: 3px;
    pointer-events: none;
}

/* Lightbox (Bild + Video), wird von script.js einmal pro Seite angelegt */
.lightbox {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
}
.lightbox.active { display: flex; }
.lightbox-img-wrap { max-width: 90vw; max-height: 82vh; display: flex; align-items: center; justify-content: center; }
.lightbox-img, .lightbox-video {
    max-width: 100%;
    max-height: 82vh;
    display: block;
    box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.lightbox-video { background: #000; }
.lightbox-img[hidden], .lightbox-video[hidden] { display: none; }
.lightbox-caption {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(100% - 32px);
    color: rgba(255,255,255,0.88);
    font-size: 0.9rem;
    background: rgba(0,0,0,0.45);
    padding: 8px 16px;
    border-radius: 4px;
    text-align: center;
}
.lightbox-caption:empty { display: none; }
.lightbox-error { color: #ffb4a8; }
.lightbox-counter { position: absolute; top: 20px; left: 24px; color: rgba(255,255,255,0.7); font-size: 0.85rem; letter-spacing: 1px; }
.lightbox-close, .lightbox-prev, .lightbox-next {
    position: absolute;
    background: rgba(255,255,255,0.12);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s, transform 0.2s;
}
.lightbox-close { top: 20px; right: 24px; width: 44px; height: 44px; }
.lightbox-prev, .lightbox-next { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; }
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }
.lightbox-prev[hidden], .lightbox-next[hidden] { display: none; }
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,0.22); }
@media (max-width: 600px) {
    .lightbox-prev, .lightbox-next { width: 40px; height: 40px; }
    .lightbox-prev { left: 8px; }
    .lightbox-next { right: 8px; }
}

/* Logo im dunklen Footer (helle Variante des Logos) */
.footer-logo { display: inline-block; line-height: 0; margin-bottom: 18px; }
.footer-logo img { height: 96px; width: auto; display: block; }

/* Neues Logo (mit "Premium-Club"-Zeile) fuellt seine Bildflaeche ganz aus,
   daher etwas kleiner als das alte, damit es in den Header passt */
@media (min-width: 901px) {
    .header-content > a.logo img { height: 100px !important; }
}

/* Titelbild der Unterseiten auf dem Handy: seitlicher Abstand (padding: 80px 0 hatte ihn aufgehoben)
   und lange Woerter wie "Ernaehrungsberatung" duerfen sauber trennen */
@media (max-width: 768px) {
    .detail-hero-inner { padding-left: 24px; padding-right: 24px; }
    .detail-hero h1 { font-size: 2rem; letter-spacing: -0.8px; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
}

/* Rueckentraining: Vorher/Nachher, Ablauf, Garantie */
.rk-ba { padding: 72px 0 40px; }
.rk-lead { color: var(--text-secondary); margin-top: 8px; }
.rk-ba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.rk-case h3 { font-size: 0.8rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 12px; }
.rk-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rk-vid { position: relative; margin: 0; border-radius: 6px; overflow: hidden; background: #1a1a1a; aspect-ratio: 9 / 16; box-shadow: 0 14px 34px rgba(0,0,0,0.12); }
.rk-vid video { width: 100%; height: 100%; object-fit: cover; display: block; }
.rk-tag { position: absolute; top: 12px; left: 12px; padding: 6px 12px; border-radius: 2px; font-size: 0.72rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; }
.rk-tag.is-vorher { background: rgba(26,26,26,0.85); color: #fff; }
.rk-tag.is-nachher { background: linear-gradient(135deg, #ebdcd1 0%, #d4a574 55%, #c8924a 100%); color: #1a1a1a; }
.rk-process { padding: 56px 0 72px; background: #f0eeec; border-top: 1px solid var(--border-color); }
.rk-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.rk-step { background: #fff; border: 1px solid var(--border-color); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; }
.rk-step-media { aspect-ratio: 4 / 5; background: #1a1a1a; }
.rk-step-media img, .rk-step-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.rk-step-body { padding: 18px; }
.rk-step-num { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #c8924a; margin-bottom: 6px; }
.rk-step-body h3 { font-size: 1.1rem; font-weight: 800; margin-bottom: 8px; }
.rk-step-body p { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.55; }
.rk-guarantee { background: #1a1a1a; color: #fff; padding: 64px 0; }
.rk-guarantee-inner { display: grid; grid-template-columns: auto 1fr; gap: 48px; align-items: center; }
.rk-guarantee-num { font-size: clamp(4rem, 10vw, 7.5rem); font-weight: 800; letter-spacing: -3px; line-height: 1; color: #d4a574; }
.rk-guarantee .section-subtitle { color: #d4a574; }
.rk-guarantee h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -0.5px; margin: 6px 0 14px; }
.rk-guarantee p { color: rgba(255,255,255,0.8); line-height: 1.7; max-width: 620px; margin-bottom: 12px; }
.rk-guarantee .rk-small { font-size: 0.85rem; color: rgba(255,255,255,0.6); }
.rk-guarantee .rk-small a { color: #d4a574; }
.rk-guarantee .btn { margin-top: 10px; }
/* Vorher/Nachher Bilder (Beine) */
.rk-compare-wrap { display: grid; grid-template-columns: minmax(0, 620px) minmax(0, 400px); justify-content: center; gap: 56px; align-items: center; margin-top: 44px; padding-top: 40px; border-top: 1px solid var(--border-color); }
.rk-vid.rk-bild { aspect-ratio: 874 / 1300; }
.rk-vid.rk-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rk-compare-text h3 { font-size: 0.8rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 10px; }
.rk-compare-title { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -0.5px; margin-bottom: 12px; }
.rk-compare-text p { color: var(--text-secondary); line-height: 1.65; max-width: 460px; }
.rk-compare-text .rk-compare-title { color: var(--text-primary, #1a1a1a); }
@media (max-width: 900px) {
    .rk-compare-wrap { grid-template-columns: 1fr; gap: 20px; }
    .rk-compare-text { text-align: center; }
    .rk-compare-text p { margin-left: auto; margin-right: auto; }
}

/* Legenden (Team-Seite) */
.legenden { background: #1a1a1a; color: #fff; padding: 80px 0; }
.legenden .section-subtitle { color: #d4a574; }
.legenden .section-title { color: #fff; }
.legenden-lead { color: rgba(255,255,255,0.75); margin-top: 10px; font-size: 1.05rem; }
.legenden-grid { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; margin-top: 40px; }
.legenden-item { position: relative; display: block; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: #000; cursor: zoom-in; aspect-ratio: 4 / 3; }
.legenden-item.is-gross { grid-row: span 2; aspect-ratio: auto; }
.legenden-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.legenden-item:hover img { transform: scale(1.03); }
.legenden-item figcaption, .legenden-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 16px; background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0)); color: #fff; font-weight: 800; font-size: 1rem; letter-spacing: 0.5px; text-align: left; }
.legenden-item.is-gross .legenden-name { font-size: 1.35rem; padding: 60px 26px 22px; }
@media (max-width: 800px) {
    .legenden { padding: 56px 0; }
    .legenden-grid { grid-template-columns: 1fr; grid-template-rows: none; }
    .legenden-item.is-gross { grid-row: auto; aspect-ratio: 4 / 3; }
    .legenden-item.is-gross .legenden-name, .legenden-name { font-size: 0.95rem; padding: 36px 14px 12px; }
}
@media (max-width: 1100px) { .rk-steps { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) {
    .rk-ba-grid { grid-template-columns: 1fr; }
    .rk-guarantee-inner { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 600px) {
    .rk-steps { grid-template-columns: 1fr; }
    .rk-step { flex-direction: row; }
    .rk-step-media { flex: 0 0 120px; aspect-ratio: auto; min-height: 150px; }
}

/* Unser Team (Platzhalter bis Fotos und Namen da sind) */
.team-section .section-header { margin-bottom: 48px; }
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; max-width: 980px; margin: 0 auto; }
.team-card:last-child:nth-child(3n+1) { grid-column: 2; }
.team-card { text-align: center; }
.team-foto { aspect-ratio: 3 / 4; background: #e9e6e3; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; color: #cfc9c3; }
.team-foto svg { width: 72%; height: auto; display: block; }
.team-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-name { margin-top: 16px; font-size: 1.05rem; font-weight: 700; color: #1a1a1a; }
.team-rolle { margin-top: 4px; font-size: .9rem; color: var(--text-secondary); }
@media (max-width: 600px) { .team-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } .team-card:last-child:nth-child(odd) { grid-column: 1 / -1; width: calc(50% - 8px); justify-self: center; } }