/* ============================================================================
   DEVILPOWER – Premium CSS Design System
   Sandra Teufelsbauer · Fitness · Pilates · Yoga
   ──────────────────────────────────────────────
   Established. Colorful. Full of Life (Lebenslust).
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&family=Outfit:wght@300;400;500;600&family=Poppins:wght@500;600;700;800&family=Syne:wght@700;800&family=Prata&family=WindSong:wght@400;500&display=swap');

/* ============================================================================
   1. DESIGN TOKENS – Custom Properties
   ============================================================================ */
:root {
    /* ── Core Palette ─────────────────────────────── */
    --color-white: #ffffff;
    --color-off-white: #FFFDF9; /* Warmes Elfenbein */
    --color-cream: #FBF0D8;     /* Gold-Creme */
    --color-lavender-tint: #EFE6FA; /* Zartes Lavendel */
    --color-black: #251F1A;     /* Warmes Braun-Schwarz */
    --color-gray-light: #ECE8E2;
    --color-gray-mid: #A8A094;
    --color-gray-dark: #55493E;

    /* ── Akzentfarben (Gold · Zartlila · Petrol) ──── */
    --color-coral: #DDA83C;   /* Gold – warme Leitfarbe */
    --color-sunset: #EDC468;  /* Helles Gold */
    --color-purple: #7A5A9E;  /* Gedecktes Lila (Text-tauglich) */
    --color-violet: #B9A0DC;  /* Zartlila */
    --color-golden: #E3B85E;  /* Helles Gold (auf Dunkel) */
    --color-teal: #1E6E77;    /* Petrol */
    --color-blue: #2E8C92;    /* Petrol hell (Verläufe) */

    /* ── Gradients ────────────────────────────────── */
    --gradient-primary: linear-gradient(135deg, var(--color-coral) 0%, var(--color-violet) 100%);
    --gradient-hover: linear-gradient(135deg, var(--color-purple) 0%, var(--color-blue) 100%);
    --gradient-warm: linear-gradient(135deg, var(--color-coral) 0%, var(--color-golden) 100%);
    --gradient-cool: linear-gradient(135deg, var(--color-teal) 0%, var(--color-blue) 100%);
    --gradient-sunset: linear-gradient(135deg, var(--color-sunset) 0%, var(--color-violet) 100%);
    --gradient-dark: linear-gradient(135deg, #251F1A 0%, #3A322B 100%);

    /* ── Typography ───────────────────────────────── */
    --font-heading: 'Poppins', sans-serif;
    --font-handwriting: 'Caveat', cursive;
    --font-body: 'Outfit', sans-serif;
    --font-nourd: 'Montserrat', sans-serif;
    --font-alta: 'Prata', serif;
    --font-brittany: 'WindSong', cursive;

    /* ── Design Tokens ────────────────────────────── */
    --radius-xl: 32px;
    --radius-lg: 24px;
    --radius-md: 16px;
    --radius-sm: 12px;
    --radius-pill: 50px;
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.06);
    --shadow-medium: 0 15px 40px rgba(0, 0, 0, 0.10);
    --shadow-glow: 0 15px 40px rgba(221, 168, 60, 0.3);
    --shadow-glow-purple: 0 15px 40px rgba(122, 90, 158, 0.25);
    --shadow-glow-teal: 0 15px 40px rgba(30, 110, 119, 0.25);
    --transition-spring: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --transition-smooth: all 0.3s ease;
    --transition-slow: all 0.6s ease;
    --content-width: 1100px;
    --header-height: 72px;
}

/* ============================================================================
   2. RESET & BASE
   ============================================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    /* body hat overflow-x:hidden, aber mobile Browser scrollen dann trotzdem
       das Wurzelelement: die fade-in-left/right-Karten stehen vor ihrer
       Einblendung 30px neben dem Viewport und machten die Seite seitlich
       wackelbar. clip unterbindet das, ohne einen Scroll-Container zu erzeugen. */
    overflow-x: clip;
    /* Leinwand-Farbe: Flächen außerhalb der Seite (Overscroll-Bounce,
       Safe-Area am unteren Displayrand, hinter der minimierten Safari-Leiste)
       malt der Browser mit dem html-Hintergrund – ohne eigenen Wert nimmt er
       die helle Body-Farbe, was unter dem dunklen Footer als weißer Streifen
       am Seitenende sichtbar wurde. Dunkel wie der Footer statt hell. */
    background-color: var(--color-black);
}

body {
    font-family: var(--font-body);
    color: var(--color-gray-dark);
    background-color: var(--color-off-white);
    background-image:
        radial-gradient(circle at 10% 20%, rgba(221, 168, 60, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 90% 10%, rgba(185, 160, 220, 0.10) 0%, transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(30, 110, 119, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 20% 80%, rgba(227, 184, 94, 0.08) 0%, transparent 50%);
    background-attachment: fixed;
    line-height: 1.7;
    /* clip statt hidden: hidden macht body zum Scroll-Container und kann
       view()-Timelines (Scroll-Driven Animations) deaktivieren;
       hidden bleibt als Fallback für ältere Browser stehen */
    overflow-x: hidden;
    overflow-x: clip;
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Gegenstück zur dunklen html-Leinwand: beim Overscroll OBEN (Gummiband-
   Effekt) soll weiterhin Creme statt Dunkel erscheinen, passend zum hellen
   Header. Der Streifen liegt komplett oberhalb des Viewports und rutscht
   nur beim Bounce mit ins Bild; fixed-Elemente erzeugen keinen Scrollraum. */
body::before {
    content: '';
    position: fixed;
    top: -40vh;
    left: 0;
    right: 0;
    height: 40vh;
    background: var(--color-off-white);
    pointer-events: none;
    z-index: 1;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-black);
    font-weight: 700;
    line-height: 1.2;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-smooth);
}

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

.container {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}

/* ============================================================================
   3. TYPOGRAPHY UTILITIES
   ============================================================================ */

/* Gradient text — apply to any heading or span */
.text-gradient {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-warm {
    background: var(--gradient-warm);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-cool {
    background: var(--gradient-cool);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Lead paragraph — large intro text */
.lead {
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.8;
    color: var(--color-gray-dark);
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

.welcome-lead {
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Bio / about text styling */
.bio-text {
    font-size: 1.1rem;
    line-height: 1.9;
    color: var(--color-gray-dark);
    position: relative;
    padding-left: 24px;
    border-left: 3px solid var(--color-violet);
}

/* Pull-quote / highlight text */
.highlight-text {
    font-family: var(--font-handwriting);
    font-size: 1.75rem;
    color: var(--color-purple);
    line-height: 1.5;
    padding: 24px 32px;
    background: linear-gradient(135deg, rgba(122, 90, 158, 0.06) 0%, rgba(221, 168, 60, 0.06) 100%);
    border-radius: var(--radius-md);
    position: relative;
}

/* Letter-spacing & text-transform helpers */
.tracking-wide { letter-spacing: 0.05em; }
.tracking-wider { letter-spacing: 0.1em; }
.uppercase { text-transform: uppercase; }
.capitalize { text-transform: capitalize; }

/* ============================================================================
   4. HEADER & NAVIGATION
   ============================================================================ */
header {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 0;
    height: var(--header-height);
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 30px rgba(122, 90, 158, 0.06);
    /* Animated gradient bottom border */
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(90deg, var(--color-coral), var(--color-purple), var(--color-teal), var(--color-golden), var(--color-coral)) 1;
    animation: headerBorderShift 8s linear infinite;
    background-clip: padding-box;
}

@keyframes headerBorderShift {
    0%   { border-image: linear-gradient(90deg, var(--color-coral), var(--color-purple), var(--color-teal), var(--color-golden), var(--color-coral)) 1; }
    25%  { border-image: linear-gradient(90deg, var(--color-purple), var(--color-teal), var(--color-golden), var(--color-coral), var(--color-purple)) 1; }
    50%  { border-image: linear-gradient(90deg, var(--color-teal), var(--color-golden), var(--color-coral), var(--color-purple), var(--color-teal)) 1; }
    75%  { border-image: linear-gradient(90deg, var(--color-golden), var(--color-coral), var(--color-purple), var(--color-teal), var(--color-golden)) 1; }
    100% { border-image: linear-gradient(90deg, var(--color-coral), var(--color-purple), var(--color-teal), var(--color-golden), var(--color-coral)) 1; }
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.logo-text {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 800;
    color: var(--color-black);
    display: flex;
    flex-direction: column;
    line-height: 1;
    letter-spacing: -0.5px;
}

.logo-sub {
    font-family: var(--font-handwriting);
    font-size: 22px;
    color: var(--color-coral);
    margin-top: -2px;
    font-weight: 600;
    transform: rotate(-3deg);
    display: inline-block;
}

/* ── NEW LOGO LOCKUPS (PILATES & More) ────────── */
.logo-lockup-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.1;
    text-decoration: none;
}

.logo-lockup-header .logo-title {
    font-family: var(--font-nourd);
    font-size: 22px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-black);
}

.logo-lockup-header .logo-sub {
    font-family: var(--font-alta);
    font-size: 12px;
    color: var(--color-coral);
    letter-spacing: 0.03em;
    margin-top: 2px;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 8px;
}

.logo-lockup-header .logo-estd {
    font-family: var(--font-brittany);
    font-size: 15px;
    color: var(--color-purple);
    font-weight: 500;
    display: inline-block;
}

/* Footer Logo Lockup */
.logo-lockup-footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.1;
    color: var(--color-white);
    text-decoration: none;
}

.logo-lockup-footer .logo-title {
    font-family: var(--font-nourd);
    font-size: 22px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-white);
}

.logo-lockup-footer .logo-sub {
    font-family: var(--font-alta);
    font-size: 12px;
    color: var(--color-cream);
    letter-spacing: 0.03em;
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.logo-lockup-footer .logo-estd {
    font-family: var(--font-brittany);
    font-size: 15px;
    color: var(--color-golden);
    font-weight: 500;
    display: inline-block;
}

/* Page Wipe Transition Logo Lockup */
.stamp-logo-lockup {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
    color: var(--color-white);
    text-align: center;
    transform: scale(0.5);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
    transition-delay: 0.1s;
}

.stamp-logo-lockup .stamp-title {
    font-family: var(--font-nourd);
    font-size: 36px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-white);
}

.stamp-logo-lockup .stamp-sub {
    font-family: var(--font-alta);
    font-size: 15px;
    color: var(--color-cream);
    margin-top: 4px;
    letter-spacing: 0.03em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.stamp-logo-lockup .stamp-estd {
    font-family: var(--font-brittany);
    font-size: 18px;
    color: var(--color-golden);
    font-weight: 500;
    display: inline-block;
}

.stamp-logo-lockup .stamp-trainer {
    width: 130px;
    height: auto;
    margin-bottom: 20px;
    display: block;
    filter: drop-shadow(0 8px 24px rgba(221, 168, 60, 0.3));
    animation: trainerBounce 1.8s ease-in-out infinite alternate;
}

@keyframes trainerBounce {
    0% { transform: translateY(0) scale(1); }
    100% { transform: translateY(-10px) scale(1.02); }
}

/* Hero Badge Logo Lockup */
.hero-logo-badge-container {
    margin: 0 auto 30px;
    display: flex;
    justify-content: center;
}

.hero-logo-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(221, 168, 60, 0.25);
    padding: 30px;
    border-radius: 50%;
    width: 220px;
    height: 220px;
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(122, 90, 158, 0.06);
    position: relative;
    transition: var(--transition-spring);
    animation: heroLogoFadeIn 1s ease-out;
}

.hero-logo-badge:hover {
    transform: scale(1.05) rotate(2deg);
    border-color: rgba(221, 168, 60, 0.6);
    box-shadow: var(--shadow-glow);
}

.hero-logo-badge .badge-estd {
    font-family: var(--font-brittany);
    font-size: 24px;
    color: var(--color-purple);
    margin-bottom: 2px;
    transform: rotate(-8deg);
}

.hero-logo-badge .badge-title {
    font-family: var(--font-nourd);
    font-size: 20px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: linear-gradient(135deg, var(--color-coral) 0%, var(--color-purple) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1;
    text-align: center;
}

.hero-logo-badge .badge-sub {
    font-family: var(--font-alta);
    font-size: 13px;
    color: var(--color-gray-dark);
    margin-top: 6px;
    letter-spacing: 0.05em;
    text-align: center;
}

/* Responsiveness for logo lockup */
@media (max-width: 768px) {
    .logo-lockup-header .logo-title {
        font-size: 17px;
    }
    .logo-lockup-header .logo-sub {
        font-size: 10px;
    }
    .logo-lockup-header .logo-estd {
        font-size: 14px;
    }
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: clamp(16px, 2vw, 30px);
    align-items: center;
}

.nav-link {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-gray-dark);
    transition: var(--transition-smooth);
    position: relative;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 3px;
    bottom: -6px;
    left: 0;
    background: var(--gradient-primary);
    border-radius: 2px;
    transition: var(--transition-spring);
}

.nav-link:hover {
    color: var(--color-black);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

/* ── Hamburger Menu (mobile) ──────────────────── */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    z-index: 1010;
}

.hamburger span {
    display: block;
    width: 100%;
    height: 3px;
    background: var(--color-black);
    border-radius: 3px;
    transition: var(--transition-smooth);
    transform-origin: center;
}

/* Hamburger → X animation */
.hamburger.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.hamburger.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* ============================================================================
   5. HERO & PARALLAX
   ============================================================================ */
.parallax-wrapper {
    position: relative;
}

.parallax-section {
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
}

/* Dark gradient overlay on parallax images for legibility */
.parallax-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(26, 26, 36, 0.45) 0%,
        rgba(26, 26, 36, 0.15) 40%,
        transparent 70%
    );
    z-index: 0;
    pointer-events: none;
}

.parallax-section > * {
    position: relative;
    z-index: 1;
}

/* Parallax Image Divider between sections */
.parallax-divider {
    height: 350px;
    width: 100%;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    box-shadow: inset 0 20px 40px rgba(0,0,0,0.1), inset 0 -20px 40px rgba(0,0,0,0.1);
}

/* Glassmorphism Card */
.glass-card {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    padding: 60px 50px;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-soft), 0 0 0 1px rgba(255, 255, 255, 0.3);
    text-align: center;
    max-width: 800px;
    margin: 0 20px;
    transition: var(--transition-spring);
}

.glass-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-glow);
}

.hero-title {
    font-size: 56px;
    margin-bottom: 20px;
    /* Gleiche drei Farbtoene wie zuvor, aber in den dunklen Stufen der Palette:
       die hellen Stops (#E0AE45/#B490D4/#5FA8AD) hatten auf der hellen Glaskarte
       nur rund 2:1 Kontrast - auf Mobilgeraeten war der Titel teils unlesbar.
       #B0842A ist das dokumentierte Text-Gold, #7A5A9E und #1E6E77 sind
       --color-purple und --color-teal (4,5-6:1). */
    background: linear-gradient(135deg, #B0842A 0%, #7A5A9E 52%, #1E6E77 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.18;
    padding-bottom: 0.12em;
}

.hero-title-sub {
    display: block;
    font-size: 0.6em;
    font-weight: 500;
    margin-top: 14px;
    letter-spacing: 0.05em;
}

.hero-subtitle {
    font-size: 20px;
    margin-bottom: 40px;
    font-weight: 400;
    color: var(--color-gray-dark);
}

.hero-logo {
    max-width: 240px;
    width: 100%;
    height: auto;
    margin: 0 auto 24px;
    display: block;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
    animation: heroLogoFadeIn 1s ease-out;
}

@keyframes heroLogoFadeIn {
    from {
        opacity: 0;
        transform: translateY(-15px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.hero-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Content Overlay (pulls up over parallax) */
.content-overlay {
    position: relative;
    z-index: 2;
    background-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    min-height: 100vh;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.07);
    margin-top: -40px;
    padding-top: 40px;
}

/* ============================================================================
   6. BUTTONS
   ============================================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 34px;
    background: var(--gradient-primary);
    color: var(--color-white);
    border-radius: var(--radius-sm);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 16px;
    transition: var(--transition-spring);
    border: none;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(122, 90, 158, 0.2);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Ripple effect on click via ::after */
.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%), rgba(255,255,255,0.35) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: -1;
}

.btn:active::after {
    opacity: 1;
    transition: opacity 0s;
}

.btn:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: var(--shadow-glow);
    background: var(--gradient-hover);
    color: var(--color-white);
}

.btn-secondary {
    background: var(--color-white);
    color: var(--color-black);
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--color-gray-light);
}

.btn-secondary:hover {
    background: var(--color-white);
    color: var(--color-purple);
    border-color: var(--color-violet);
    box-shadow: var(--shadow-glow-purple);
}

/* Outline button with gradient border */
.btn-outline {
    background: transparent;
    color: var(--color-purple);
    box-shadow: none;
    border: 2px solid transparent;
    background-image: linear-gradient(var(--color-off-white), var(--color-off-white)), var(--gradient-primary);
    background-origin: padding-box, border-box;
    background-clip: padding-box, border-box;
    font-weight: 600;
}

.btn-outline:hover {
    background-image: var(--gradient-primary);
    background-clip: padding-box;
    color: var(--color-white);
    box-shadow: var(--shadow-glow);
}

/* Large button variant */
.btn-lg {
    padding: 18px 44px;
    font-size: 18px;
    border-radius: var(--radius-md);
}

/* ============================================================================
   7. SECTIONS & LAYOUT
   ============================================================================ */
.section-padding {
    padding: 100px 0;
}

.section-title {
    font-size: 42px;
    margin-bottom: 50px;
    position: relative;
}

.section-subtitle {
    font-family: var(--font-handwriting);
    font-size: 34px;
    color: var(--color-coral);
    display: block;
    margin-bottom: 5px;
    transform: rotate(-3deg);
}

/* Alternating section backgrounds */
.section-alt {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
}

.section-alt:nth-child(even) {
    background-color: var(--color-lavender-tint);
}

/* Bold gradient section with white text */
.section-colored {
    background: var(--gradient-primary);
    color: var(--color-white);
    padding: 120px 0;
}

.section-colored h1,
.section-colored h2,
.section-colored h3,
.section-colored h4,
.section-colored .section-subtitle {
    color: var(--color-white);
    -webkit-text-fill-color: var(--color-white);
}

.section-colored .lead,
.section-colored p {
    color: rgba(255, 255, 255, 0.9);
}

/* Wavy divider between sections (clip-path) */
.divider-wave {
    position: relative;
    height: 80px;
    overflow: hidden;
    background: transparent;
}

.divider-wave::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: -5%;
    width: 110%;
    height: 100%;
    background: var(--color-off-white);
    clip-path: ellipse(55% 65% at 50% 100%);
}

/* Inverse wave (for colored sections) */
.divider-wave-inverse::before {
    background: var(--color-cream);
    clip-path: ellipse(55% 65% at 50% 0%);
    bottom: auto;
    top: 0;
}

/* ============================================================================
   8. COURSE ROWS (Approved Layout)
   ============================================================================ */
.course-row {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 40px;
    align-items: center;
    margin-bottom: 80px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 60px 40px;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-soft), 0 0 0 1px rgba(255, 255, 255, 0.6);
    transition: var(--transition-spring);
    border: none;
}

.course-row:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-glow);
}

.course-row.reverse {
    flex-direction: column;
}

.course-image {
    max-width: 600px;
    width: 100%;
    position: relative;
    margin: 0 auto;
}

.course-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.course-image::before {
    content: '';
    position: absolute;
    top: -15px;
    left: -15px;
    right: 15px;
    bottom: 15px;
    background: var(--gradient-primary);
    border-radius: var(--radius-lg);
    z-index: 0;
    opacity: 0.15;
    transition: var(--transition-smooth);
}

.course-row:hover .course-image::before {
    top: -20px;
    left: -20px;
    opacity: 0.25;
}

.course-row.reverse .course-image::before {
    left: 15px;
    right: -15px;
}

/* Alternating accent colors on course-row image decorations */
.course-row:nth-child(3n+2) .course-image::before {
    background: var(--gradient-warm);
}

.course-row:nth-child(3n+3) .course-image::before {
    background: var(--gradient-cool);
}

.course-image img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    object-fit: cover;
    position: relative;
    z-index: 1;
    aspect-ratio: 4/3;
    transition: var(--transition-spring);
}

.course-row:hover .course-image img {
    transform: scale(1.03);
}

.course-details {
    flex: 1;
}

.course-category {
    font-family: var(--font-handwriting);
    color: var(--color-coral);
    font-size: 24px;
    margin-bottom: 10px;
    display: inline-block;
    padding: 5px 15px;
    background: rgba(221, 168, 60, 0.1);
    border-radius: 20px;
}

/* ============================================================================
   9. IMAGE ENHANCEMENTS
   ============================================================================ */

/* Decorative image frame with gradient border + slight rotation */
.image-frame {
    position: relative;
    display: inline-block;
    padding: 6px;
    background: var(--gradient-primary);
    border-radius: var(--radius-lg);
    transform: rotate(-2deg);
    transition: var(--transition-spring);
}

.image-frame img {
    border-radius: calc(var(--radius-lg) - 4px);
    display: block;
}

.image-frame:hover {
    transform: rotate(0deg) scale(1.02);
    box-shadow: var(--shadow-glow);
}

/* ============================================================================
   10. DECORATIVE ELEMENTS
   ============================================================================ */

/* ── Blockquote ───────────────────────────────── */
.blockquote {
    position: relative;
    padding: 32px 40px 32px 48px;
    margin: 40px 0;
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    border-left: 5px solid;
    border-image: var(--gradient-primary) 1;
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--color-gray-dark);
}

.blockquote::before {
    content: '\201C';
    position: absolute;
    top: -10px;
    left: 16px;
    font-family: var(--font-heading);
    font-size: 5rem;
    line-height: 1;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0.4;
}

.blockquote cite {
    display: block;
    margin-top: 16px;
    font-family: var(--font-handwriting);
    font-size: 1.3rem;
    color: var(--color-coral);
    font-style: normal;
}

/* ── Badge / Pill ─────────────────────────────── */
.badge,
.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 18px;
    background: var(--gradient-primary);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 13px;
    border-radius: var(--radius-pill);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.badge-warm { background: var(--gradient-warm); }
.badge-cool { background: var(--gradient-cool); }
.badge-sunset { background: var(--gradient-sunset); }

.badge-outline {
    background: transparent;
    color: var(--color-purple);
    border: 2px solid var(--color-violet);
}

/* ── Stats Grid ───────────────────────────────── */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 32px;
    padding: 40px 0;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px 20px;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    transition: var(--transition-spring);
}

.stat-item:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-glow-purple);
}

.stat-number {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
}

.stat-item:nth-child(2) .stat-number {
    background: var(--gradient-warm);
    -webkit-background-clip: text;
    background-clip: text;
}

.stat-item:nth-child(3) .stat-number {
    background: var(--gradient-cool);
    -webkit-background-clip: text;
    background-clip: text;
}

.stat-label {
    font-size: 1rem;
    color: var(--color-gray-dark);
    font-weight: 500;
}

/* ── Timeline ─────────────────────────────────── */
.timeline {
    position: relative;
    padding: 20px 0;
    max-width: 800px;
    margin: 0 auto;
}

/* Vertical line */
.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 3px;
    background: var(--gradient-primary);
    transform: translateX(-50%);
    border-radius: 3px;
}

.timeline-item {
    position: relative;
    width: 50%;
    padding: 20px 40px;
}

/* Alternate sides */
.timeline-item:nth-child(odd) {
    left: 0;
    text-align: right;
    padding-right: 50px;
}

.timeline-item:nth-child(even) {
    left: 50%;
    text-align: left;
    padding-left: 50px;
}

/* Dot on the timeline */
.timeline-item::before {
    content: '';
    position: absolute;
    top: 28px;
    width: 16px;
    height: 16px;
    background: var(--color-white);
    border: 4px solid var(--color-coral);
    border-radius: 50%;
    z-index: 2;
    transition: var(--transition-spring);
}

.timeline-item:nth-child(odd)::before {
    right: -8px;
}

.timeline-item:nth-child(even)::before {
    left: -8px;
}

.timeline-item:nth-child(3n+2)::before {
    border-color: var(--color-purple);
}

.timeline-item:nth-child(3n+3)::before {
    border-color: var(--color-teal);
}

.timeline-item:hover::before {
    transform: scale(1.4);
    box-shadow: 0 0 0 6px rgba(221, 168, 60, 0.15);
}

.timeline-content {
    background: var(--color-white);
    padding: 24px 28px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    transition: var(--transition-spring);
}

.timeline-content:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-medium);
}

.timeline-year {
    font-family: var(--font-handwriting);
    font-size: 1.5rem;
    color: var(--color-coral);
    margin-bottom: 4px;
}

.timeline-title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: 6px;
}

/* ============================================================================
   11. SCHEDULE TABLE
   ============================================================================ */
.schedule-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-lg);
}

.schedule-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 20px;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    min-width: 600px;
}

.schedule-table th,
.schedule-table td {
    padding: 20px;
    text-align: left;
    border-bottom: 1px solid var(--color-gray-light);
}

.schedule-table th {
    background: var(--gradient-dark);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 13px;
}

.schedule-table tr:last-child td {
    border-bottom: none;
}

.schedule-table tbody tr {
    transition: background-color 0.4s ease, color 0.4s ease, transform 0.3s ease;
}

.schedule-table tbody tr:hover {
    background-color: rgba(122, 90, 158, 0.04);
    transform: scale(1.01);
}

.schedule-table tbody tr:nth-child(even) {
    background-color: rgba(221, 168, 60, 0.03);
}

.schedule-table tbody tr:nth-child(even):hover {
    background-color: rgba(221, 168, 60, 0.08);
}

/* ============================================================================
   12. CONTACT FORM
   ============================================================================ */
.contact-grid {
    display: flex;
    gap: 60px;
}

.contact-info {
    flex: 1;
    padding-right: 40px;
}

.contact-card {
    flex: 1;
    background: var(--color-white);
    padding: 40px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
}

.form-group {
    margin-bottom: 20px;
}

.form-input {
    width: 100%;
    padding: 16px 20px;
    border: 2px solid var(--color-gray-light);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 16px;
    background: #FDFDFD;
    transition: var(--transition-smooth);
}

.form-input:focus {
    outline: none;
    border-color: var(--color-purple);
    background: var(--color-white);
    box-shadow: 0 0 0 4px rgba(122, 90, 158, 0.1);
}

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

/* ============================================================================
   13. PROFESSIONAL FOOTER
   ============================================================================ */
footer {
    background: var(--gradient-dark);
    color: rgba(255, 255, 255, 0.85);
    position: relative;
    z-index: 3;
    padding: 0;
}

/* Gradient line above footer */
footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-coral), var(--color-golden), var(--color-teal), var(--color-purple), var(--color-coral));
    background-size: 200% 100%;
    animation: footerLineShift 6s linear infinite;
}

@keyframes footerLineShift {
    0%   { background-position: 0% 0; }
    100% { background-position: 200% 0; }
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 60px;
    /* Seitliche 24px beibehalten: 0 wuerde das padding der .container
       ueberschreiben und die Footer-Spalten bis an den Rand laufen lassen */
    padding: 70px 24px 50px;
}

.footer-col h4 {
    color: var(--color-white);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 12px;
}

.footer-col h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: var(--gradient-primary);
    border-radius: 2px;
}

.footer-col p {
    line-height: 1.8;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
}

.footer-col ul {
    list-style: none;
}

.footer-col ul li {
    margin-bottom: 10px;
}

.footer-col ul a {
    color: rgba(255, 255, 255, 0.7);
    transition: var(--transition-smooth);
    font-size: 0.95rem;
}

.footer-col ul a:hover {
    color: var(--color-coral);
    padding-left: 6px;
}

/* Social icon links */
.social-links {
    display: flex;
    gap: 14px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
    font-size: 18px;
    transition: var(--transition-spring);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.social-links a:hover {
    background: var(--gradient-primary);
    color: var(--color-white);
    transform: translateY(-4px) scale(1.1);
    box-shadow: 0 8px 20px rgba(221, 168, 60, 0.3);
    border-color: transparent;
}

/* Footer bottom bar */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 24px 0;
    text-align: center;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.45);
}

.footer-bottom a {
    color: var(--color-coral);
    transition: var(--transition-smooth);
}

.footer-bottom a:hover {
    color: var(--color-golden);
}

/* Legacy footer-links (backward compat) */
.footer-links {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 20px;
}

.footer-links a {
    color: var(--color-gray-light);
    transition: var(--transition-smooth);
}

.footer-links a:hover {
    color: var(--color-coral);
}

/* ============================================================================
   14. ANIMATIONS & ENTRANCE EFFECTS
   ============================================================================ */

/* ── Fade-in (default: upward) ────────────────── */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.4s ease-out,
        transform 0.4s ease-out;
}

.fade-in-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ── Directional entrances ────────────────────── */
.fade-in-left {
    opacity: 0;
    transform: translateX(-30px);
    transition:
        opacity 0.4s ease-out,
        transform 0.4s ease-out;
}

.fade-in-right {
    opacity: 0;
    transform: translateX(30px);
    transition:
        opacity 0.4s ease-out,
        transform 0.4s ease-out;
}

.fade-in-left.fade-in-visible,
.fade-in-right.fade-in-visible {
    opacity: 1;
    transform: translateX(0);
}

/* ── Staggered animation delays via data-delay ── */
[data-delay="1"] { transition-delay: 0.1s !important; }
[data-delay="2"] { transition-delay: 0.2s !important; }
[data-delay="3"] { transition-delay: 0.3s !important; }
[data-delay="4"] { transition-delay: 0.4s !important; }
[data-delay="5"] { transition-delay: 0.5s !important; }
[data-delay="6"] { transition-delay: 0.6s !important; }
[data-delay="7"] { transition-delay: 0.7s !important; }
[data-delay="8"] { transition-delay: 0.8s !important; }

/* ── Subtle float for decorative elements ─────── */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

.float-animation {
    animation: float 4s ease-in-out infinite;
}

/* ── Pulse for CTAs ───────────────────────────── */
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(221, 168, 60, 0.4); }
    50%      { box-shadow: 0 0 0 12px rgba(221, 168, 60, 0); }
}

.btn-pulse {
    animation: pulse 2.5s ease-in-out infinite;
}

/* ============================================================================
   15. RESPONSIVE DESIGN
   ============================================================================ */

/* ── Tablet (≤ 1024px) ────────────────────────── */
@media (max-width: 1024px) {
    /* Zwei gleich hohe Spalten (Navigation + Kontakt), die Marken-Spalte davor
       ueber die volle Breite. Vorher teilten sich alle drei Spalten ein
       2er-Raster: die sechszeilige Navigation riss die Zeile in die Hoehe,
       neben dem kurzen Logo-Block klaffte ein Loch und "Kontakt" rutschte
       allein in eine dritte Zeile (sichtbar auf dem iPad im Hochformat). */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
    .footer-col:first-child {
        grid-column: 1 / -1;
        max-width: 520px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .timeline::before {
        left: 24px;
    }

    .timeline-item,
    .timeline-item:nth-child(odd),
    .timeline-item:nth-child(even) {
        width: 100%;
        left: 0;
        text-align: left;
        padding-left: 64px;
        padding-right: 20px;
    }

    .timeline-item::before,
    .timeline-item:nth-child(odd)::before,
    .timeline-item:nth-child(even)::before {
        left: 16px !important;
        right: auto !important;
    }
}

/* ── Mobile-landscape / small tablets (≤ 900px) ─ */
@media (max-width: 900px) {
    .course-row,
    .course-row.reverse {
        flex-direction: column;
        gap: 30px;
        padding: 28px;
    }

    .course-image {
        max-width: 100%;
    }

    .course-image::before {
        top: -10px;
        left: -10px;
        right: 10px;
        bottom: 10px;
    }

    .course-row.reverse .course-image::before {
        left: -10px;
        right: 10px;
    }

    .contact-grid {
        flex-direction: column;
        gap: 40px;
    }

    .contact-info {
        padding-right: 0;
    }

    .hero-title {
        font-size: 40px;
    }

    .glass-card {
        padding: 40px 24px;
    }

    .section-title {
        font-size: 34px;
    }

    .section-subtitle {
        font-size: 28px;
    }
}

/* ── Navigation: Hamburger ab Tablet (≤ 1024px) ── */
@media (max-width: 1024px) {
    /* Show hamburger, hide inline nav */
    .hamburger {
        display: flex;
    }

    .nav-menu {
        display: none;
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        background: rgba(255, 255, 255, 0.97);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        flex-direction: column;
        gap: 0;
        padding: 16px 0 24px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        border-bottom: 3px solid transparent;
        border-image: var(--gradient-primary) 1;
        z-index: 999;
    }

    .nav-menu.active {
        display: flex;
    }

    .nav-menu li {
        width: 100%;
    }

    .nav-menu .nav-link {
        display: block;
        padding: 14px 28px;
        width: 100%;
        font-size: 17px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    }

    .nav-menu .nav-link::after {
        display: none;
    }

    .nav-menu .nav-link:hover {
        background: rgba(122, 90, 158, 0.04);
        color: var(--color-purple);
    }

    .nav-menu .nav-cta {
        display: block;
        margin: 16px 28px 0;
        text-align: center;
    }
}

/* ── Mobile (≤ 768px) ─────────────────────────── */
@media (max-width: 768px) {
    :root {
        --header-height: 62px;
    }

    /* Footer collapses to single column */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 50px 24px 30px;
    }

    .footer-col h4::after {
        left: 0;
    }

    /* Stats grid stacks */
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .stat-number {
        font-size: 2.8rem;
    }

    /* Schedule table scrollable */
    .schedule-wrapper {
        margin: 0 -24px;
        padding: 0 24px;
    }

    /* Hero adjustments */
    .hero-title {
        font-size: 32px;
    }

    .hero-subtitle {
        font-size: 17px;
    }

    .glass-card {
        padding: 32px 18px;
        margin: 0 12px;
    }

    .section-padding {
        padding: 70px 0;
    }

    .blockquote {
        padding: 24px 20px 24px 32px;
    }

    .blockquote::before {
        font-size: 3.5rem;
        left: 8px;
    }

    /* Timeline mobile */
    .timeline::before {
        left: 16px;
    }

    .timeline-item,
    .timeline-item:nth-child(odd),
    .timeline-item:nth-child(even) {
        width: 100%;
        left: 0;
        text-align: left;
        padding-left: 48px;
        padding-right: 0;
    }

    .timeline-item::before,
    .timeline-item:nth-child(odd)::before,
    .timeline-item:nth-child(even)::before {
        left: 8px !important;
        right: auto !important;
    }

    .timeline-content {
        padding: 18px 20px;
    }

    .image-frame {
        transform: rotate(0deg);
    }
}

/* ── Small mobile (≤ 480px) ───────────────────── */
@media (max-width: 480px) {
    body {
        font-size: 16px;
    }

    .hero-title {
        font-size: 28px;
    }

    .section-title {
        font-size: 28px;
        margin-bottom: 32px;
    }

    .section-subtitle {
        font-size: 24px;
    }

    .course-row {
        padding: 20px;
        margin-bottom: 40px;
    }

    .btn {
        padding: 12px 24px;
        font-size: 15px;
        width: 100%;
        justify-content: center;
    }

    .btn-lg {
        padding: 14px 28px;
        font-size: 16px;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .lead {
        font-size: 1.05rem;
    }

    .highlight-text {
        font-size: 1.4rem;
        padding: 18px 20px;
    }

    .stat-item {
        padding: 24px 16px;
    }

    .logo-text {
        font-size: 22px;
    }

    .logo-sub {
        font-size: 18px;
    }

}

/* ============================================================================
   16. PRINT STYLES
   ============================================================================ */
@media print {
    header,
    .hamburger,
    .parallax-section,
    .divider-wave {
        display: none !important;
    }

    body {
        background: white;
        color: black;
        font-size: 12pt;
    }

    .content-overlay {
        box-shadow: none;
        border-radius: 0;
        margin-top: 0;
    }

    .btn {
        border: 1px solid #333;
        color: #333;
        background: none;
        box-shadow: none;
    }
}

/* ============================================================================
   17. ACCESSIBILITY & REDUCED MOTION
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .fade-in,
    .fade-in-left,
    .fade-in-right {
        opacity: 1;
        transform: none;
    }

    .parallax-section {
        position: relative;
    }
}

/* Focus-visible styles for keyboard navigation */
:focus-visible {
    outline: 3px solid var(--color-purple);
    outline-offset: 3px;
    border-radius: 4px;
}

a:focus-visible,
.btn:focus-visible {
    outline: 3px solid var(--color-coral);
    outline-offset: 3px;
}

/* ============================================================================
   18. MISSING COMPONENT STYLES
   ============================================================================ */

/* ── Hero Overlay & Description ───────────────── */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(26, 26, 36, 0.5) 0%,
        rgba(26, 26, 36, 0.2) 40%,
        transparent 70%
    );
    z-index: 0;
    pointer-events: none;
}

.hero > .hero-content {
    position: relative;
    z-index: 1;
}

.hero-description {
    font-size: 18px;
    line-height: 1.7;
    margin-bottom: 35px;
    color: var(--color-gray-dark);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* ── Text Center Utility ──────────────────────── */
.text-center {
    text-align: center;
}

/* ── Highlight span ───────────────────────────── */
.highlight {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Generic section padding ──────────────────── */
.section {
    padding: 100px 0;
}

/* ── Card Grid ────────────────────────────────── */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 32px;
    margin-top: 50px;
}

.card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    transition: var(--transition-spring);
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-glow);
}

.card-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.card:hover .card-image img {
    transform: scale(1.08);
}

.card-image .badge {
    position: absolute;
    top: 14px;
    left: 14px;
    font-size: 11px;
    padding: 5px 14px;
}

.card-body {
    padding: 28px 24px;
}

.card-body h3 {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--color-black);
}

.card-body p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-gray-dark);
    margin-bottom: 18px;
}

.card-link {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 15px;
    color: var(--color-coral);
    transition: var(--transition-smooth);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.card-link:hover {
    color: var(--color-purple);
    gap: 10px;
}

/* ── Button Variants ──────────────────────────── */
.btn-primary {
    background: var(--gradient-primary);
    color: var(--color-white);
}

.btn-white {
    background: var(--color-white);
    color: var(--color-black);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    border: none;
    font-weight: 700;
}

.btn-white:hover {
    background: var(--color-white);
    color: var(--color-purple);
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

/* ── CTA Section Elements ─────────────────────── */
.cta-quote {
    font-family: var(--font-handwriting);
    font-size: 2rem;
    line-height: 1.5;
    color: var(--color-white);
    margin-bottom: 16px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.cta-author {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 32px;
    font-style: italic;
}

/* ── Table Responsive Wrapper ─────────────────── */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-lg);
}

/* ── Form Labels ──────────────────────────────── */
.form-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-black);
    margin-bottom: 6px;
    font-family: var(--font-heading);
}

/* ── Form Success Message ─────────────────────── */
.form-success {
    text-align: center;
    padding: 50px 30px;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.form-success-visible {
    opacity: 1;
    transform: scale(1);
}

.form-success-icon {
    width: 80px;
    height: 80px;
    line-height: 80px;
    font-size: 40px;
    margin: 0 auto 24px;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: var(--color-white);
}

.form-success h3 {
    font-family: var(--font-heading);
    font-size: 24px;
    margin-bottom: 12px;
    color: var(--color-black);
}

.form-success p {
    font-size: 17px;
    color: var(--color-gray-dark);
}

/* ── Course Text (alternative to course-details) ── */
.course-text {
    flex: 1;
}

.course-text h2 {
    margin-bottom: 10px;
}

.course-text .section-subtitle {
    margin-bottom: 15px;
    text-align: left;
    transform: none;
}

.course-text p {
    margin-bottom: 16px;
    font-size: 17px;
    line-height: 1.8;
}

/* ── Footer Navigation ────────────────────────── */
.footer-nav {
    list-style: none;
    padding: 0;
}

.footer-nav li {
    margin-bottom: 10px;
}

.footer-nav a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    transition: var(--transition-smooth);
}

.footer-nav a:hover {
    color: var(--color-coral);
    padding-left: 6px;
}

/* ── Header Scrolled State ────────────────────── */
.header-scrolled {
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

/* ── Responsive additions for new components ──── */
@media (max-width: 768px) {
    .card-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .cta-quote {
        font-size: 1.5rem;
    }

    .section {
        padding: 70px 0;
    }

    .section-colored {
        padding: 80px 0;
    }
}

@media (max-width: 480px) {
    .card-body {
        padding: 22px 18px;
    }

    .cta-quote {
        font-size: 1.3rem;
    }
}

/* ============================================================================
   ANIMATED SLIDESHOW BACKGROUND (V2 - 8 Slides)
   ============================================================================ */
.hero-slideshow {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0;
    overflow: hidden;
}

.hero-slideshow .slide {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: fadeBackground8 40s infinite;
}

/* Dynamically injected images per page */
.hero-slideshow .slide:nth-child(1) { animation-delay: 0s; }
.hero-slideshow .slide:nth-child(2) { animation-delay: 5s; }
.hero-slideshow .slide:nth-child(3) { animation-delay: 10s; }
.hero-slideshow .slide:nth-child(4) { animation-delay: 15s; }
.hero-slideshow .slide:nth-child(5) { animation-delay: 20s; }
.hero-slideshow .slide:nth-child(6) { animation-delay: 25s; }
.hero-slideshow .slide:nth-child(7) { animation-delay: 30s; }
.hero-slideshow .slide:nth-child(8) { animation-delay: 35s; }

@keyframes fadeBackground8 {
    0% { opacity: 0; transform: scale(1); }
    5% { opacity: 1; }
    12.5% { opacity: 1; }
    17.5% { opacity: 0; transform: scale(1.05); }
    100% { opacity: 0; }
}

/* Variable Slide-Anzahl: Dauer = Anzahl × 5s, Keyframe-Fenster proportional.
   data-count wird pro Seite serverseitig gesetzt (= Anzahl tatsächlicher Slides). */
.hero-slideshow[data-count="3"] .slide { animation-name: fadeBackground3; animation-duration: 15s; }
.hero-slideshow[data-count="4"] .slide { animation-name: fadeBackground4; animation-duration: 20s; }
.hero-slideshow[data-count="5"] .slide { animation-name: fadeBackground5; animation-duration: 25s; }
.hero-slideshow[data-count="6"] .slide { animation-name: fadeBackground6; animation-duration: 30s; }
.hero-slideshow[data-count="7"] .slide { animation-name: fadeBackground7; animation-duration: 35s; }

@keyframes fadeBackground3 {
    0% { opacity: 0; transform: scale(1); }
    12% { opacity: 1; }
    28% { opacity: 1; }
    42% { opacity: 0; transform: scale(1.05); }
    100% { opacity: 0; }
}
@keyframes fadeBackground4 {
    0% { opacity: 0; transform: scale(1); }
    10% { opacity: 1; }
    25% { opacity: 1; }
    35% { opacity: 0; transform: scale(1.05); }
    100% { opacity: 0; }
}
@keyframes fadeBackground5 {
    0% { opacity: 0; transform: scale(1); }
    8% { opacity: 1; }
    20% { opacity: 1; }
    28% { opacity: 0; transform: scale(1.05); }
    100% { opacity: 0; }
}
@keyframes fadeBackground6 {
    0% { opacity: 0; transform: scale(1); }
    6.67% { opacity: 1; }
    16.67% { opacity: 1; }
    23.33% { opacity: 0; transform: scale(1.05); }
    100% { opacity: 0; }
}
@keyframes fadeBackground7 {
    0% { opacity: 0; transform: scale(1); }
    5.71% { opacity: 1; }
    14.29% { opacity: 1; }
    20% { opacity: 0; transform: scale(1.05); }
    100% { opacity: 0; }
}

/* ============================================================================
   FLOATING BACKGROUND IMAGES (V2)
   ============================================================================ */
.floating-bg-image {
    position: fixed;
    z-index: -1;
    opacity: 0.1;
    border-radius: 40px;
    animation: floatGently 25s ease-in-out infinite alternate;
    pointer-events: none;
    object-fit: cover;
    will-change: transform;
}

.float-1 { top: 5%; left: -5%; width: 450px; animation-delay: 0s; transform: rotate(-10deg); }
.float-2 { top: 35%; right: -10%; width: 550px; animation-delay: -5s; transform: rotate(15deg); }
.float-3 { bottom: 10%; left: 5%; width: 400px; animation-delay: -10s; transform: rotate(-5deg); }
.float-4 { top: 65%; right: 10%; width: 350px; animation-delay: -15s; transform: rotate(20deg); }

@keyframes floatGently {
    0% { transform: translateY(0) rotate(-10deg) scale(1); opacity: 0.1; }
    50% { transform: translateY(-40px) rotate(5deg) scale(1.05); opacity: 0.25; }
    100% { transform: translateY(30px) rotate(15deg) scale(0.95); opacity: 0.1; }
}

.hero-overlay-vibrant {
    position: absolute;
    inset: 0;
    /* A colorful semi-transparent overlay to keep text readable but vibrant */
    background: linear-gradient(
        135deg,
        rgba(26, 26, 36, 0.5) 0%,
        rgba(122, 90, 158, 0.3) 50%,
        rgba(221, 168, 60, 0.4) 100%
    );
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.glass-card-vibrant {
    background: rgba(255, 255, 255, 0.58);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 60px 50px;
    border-radius: var(--radius-xl);
    box-shadow: 0 20px 50px rgba(122, 90, 158, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.5);
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    transition: var(--transition-spring);
}

/* ============================================================================
   UX ELEMENTS (V3): PRICING, TESTIMONIALS, FAQ
   ============================================================================ */

/* ── Testimonials ── */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.testimonial-card {
    background: rgba(255, 255, 255, 0.9);
    padding: 30px;
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    position: relative;
    text-align: left;
    transition: var(--transition-spring);
}
.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(122, 90, 158, 0.15);
}
.testimonial-card::before {
    content: '"';
    font-size: 80px;
    color: var(--color-lavender-tint);
    position: absolute;
    top: 10px; left: 20px;
    line-height: 1;
    z-index: 0;
}
.testimonial-text {
    position: relative;
    z-index: 1;
    font-style: italic;
    color: var(--color-gray-dark);
    margin-bottom: 20px;
}
.testimonial-author {
    font-weight: 700;
    color: var(--color-purple);
}

/* Sterne und Herkunftsangabe der Google-Rezensionen.
   Das Gold #DDA83C hat auf Hell nur rund 2,3:1 Kontrast – als Text waere das zu wenig.
   Hier ist es reine Dekoration (die Wertung steht im aria-label), trotzdem nehmen wir
   den dunkleren Goldton, damit die Sterne auch bei schwachem Display zu sehen sind. */
.review-stars {
    position: relative;
    z-index: 1;
    text-align: right;
    color: #B0842A;
    letter-spacing: 2px;
    margin-bottom: 12px;
}
.review-source {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--color-gray-dark);
    opacity: 0.75;
}

/* ── Pricing Cards ── */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 50px;
}
.pricing-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--radius-xl);
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 15px 40px rgba(0,0,0,0.06);
    border: 1px solid rgba(122, 90, 158, 0.1);
    transition: var(--transition-spring);
    position: relative;
    overflow: hidden;
}
.pricing-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(122, 90, 158, 0.2);
}
.pricing-card.popular {
    border: 2px solid var(--color-purple);
    transform: scale(1.05);
}
.pricing-card.popular:hover {
    transform: scale(1.05) translateY(-10px);
}
.pricing-badge {
    position: absolute;
    top: 20px; right: -35px;
    background: var(--gradient-primary);
    color: white;
    padding: 5px 40px;
    transform: rotate(45deg);
    font-size: 0.85rem;
    font-weight: bold;
}
.pricing-title {
    font-size: 1.5rem;
    color: var(--color-gray-dark);
    margin-bottom: 15px;
}
.pricing-price {
    font-size: 3rem;
    font-weight: 800;
    color: var(--color-black);
    margin-bottom: 20px;
}
.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 auto 30px auto;
    text-align: left;
    display: inline-block;
}
.pricing-features li {
    padding: 10px 0;
    border-bottom: 1px solid var(--color-gray-light);
    display: flex;
    align-items: center;
}
.pricing-features li::before {
    content: '✓';
    color: var(--color-teal);
    font-weight: bold;
    margin-right: 10px;
}

/* ── FAQ Accordion ── */
.faq-container {
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
}
.faq-item {
    background: white;
    border-radius: var(--radius-md);
    margin-bottom: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.04);
    overflow: hidden;
}
.faq-question {
    padding: 20px;
    cursor: pointer;
    font-weight: 600;
    color: var(--color-black);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.3s ease;
}
.faq-question:hover {
    background: var(--color-lavender-tint);
}
.faq-question::after {
    content: '+';
    font-size: 1.5rem;
    transition: transform 0.3s ease;
}
.faq-item.active .faq-question::after {
    transform: rotate(45deg);
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    padding: 0 20px;
    color: var(--color-gray-dark);
}
.faq-item.active .faq-answer {
    max-height: 500px;
    padding: 0 20px 20px 20px;
}

/* ── Mobile Performance Fix ── */
@media (max-width: 768px) {
    .floating-bg-images {
        display: none !important;
    }
    .pricing-card.popular {
        transform: scale(1);
    }
    .pricing-card.popular:hover {
        transform: translateY(-5px);
    }
}
/* ============================================================================
   GIF-BASED PAGE WIPE TRANSITION
   ============================================================================ */
.page-wipe {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    pointer-events: none;
    visibility: hidden;
    background: linear-gradient(135deg, rgba(251, 240, 216, 0.1) 0%, rgba(239, 230, 250, 0.1) 50%, rgba(223, 236, 236, 0.1) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease, visibility 0.4s;
}

.page-wipe.is-animating {
    opacity: 1;
    pointer-events: all;
    visibility: visible;
}

.page-wipe.is-leaving {
    opacity: 0;
    pointer-events: all;
    visibility: visible;
    transition: opacity 0.4s ease, visibility 0.4s;
}

.wipe-gif-container {
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.9);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.15);
    /* Frueher stand hier mix-blend-mode: multiply, um das Weiss des GIF-Fallbacks
       zu schlucken. Das WebP ist echt freigestellt, die Regel ist damit ueberfluessig -
       und schaedlich, sobald sie greift: sie wuerde das Motiv mit dem Seiteninhalt
       einfaerben (auf dunklem Grund gut sichtbar). */
}

.page-wipe.is-animating .wipe-gif-container {
    transform: scale(1);
}

.page-wipe.is-leaving .wipe-gif-container {
    transform: scale(1.05);
}

.wipe-gif {
    width: 350px; /* Schön groß für die Ansicht */
    max-width: 90vw;
    height: auto;
}

@media (max-width: 768px) {
    .wipe-gif {
        max-width: 200px;
    }
}

.page-wipe.no-transition,
.page-wipe.no-transition * {
    transition: none !important;
}

/* ============================================================================
   SOMMERPROGRAMM / SAISONALE SEITE & BANNER
   ============================================================================ */
.summer-banner {
    display: flex; align-items: center; justify-content: center;
    gap: 16px; flex-wrap: wrap; text-align: center;
    background: linear-gradient(90deg, #E3B85E, #DDA83C 55%, #7A5A9E);
    color: #fff; padding: 13px 22px;
}
.summer-banner .sb-text { font-size: 17px; font-weight: 600; }
.summer-banner .sb-text strong { font-weight: 800; }
.summer-banner .btn { margin: 0; padding: 9px 20px; }
@media (max-width: 600px) { .summer-banner .sb-text { font-size: 15px; } }

.summer-grid {
    display: grid; grid-template-columns: 1.05fr 0.95fr;
    gap: 44px; align-items: center; margin-top: 30px;
}
.summer-grid.reverse .summer-info { order: 2; }
.summer-grid.reverse .summer-flyer { order: 1; }
@media (max-width: 860px) {
    .summer-grid { grid-template-columns: 1fr; gap: 26px; }
    .summer-grid.reverse .summer-info { order: 2; }
    .summer-grid.reverse .summer-flyer { order: 1; }
}

.summer-detail { margin: 0 0 16px; }
.summer-detail h4 { margin: 0 0 4px; font-size: 19px; }
.summer-detail p { margin: 0; color: var(--color-gray-dark, #555); }
.summer-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.summer-meta span {
    background: rgba(122, 90, 158,0.10); color: var(--color-purple, #7A5A9E);
    border-radius: 20px; padding: 4px 13px; font-size: 13px; font-weight: 600;
}
.summer-price {
    background: #fff; border: 1px solid #ece6ef; border-radius: 14px;
    padding: 16px 20px; margin-top: 22px; box-shadow: 0 4px 18px rgba(0,0,0,0.05);
}
.summer-price .sp-head { font-weight: 700; color: var(--color-accent-1, #7A5A9E); }
.summer-price ul { margin: 8px 0 0; padding-left: 18px; }
.summer-price li { margin: 3px 0; }

.summer-flyer { margin: 0; }
.summer-flyer a {
    display: block; border-radius: 16px; overflow: hidden;
    box-shadow: 0 12px 34px rgba(0,0,0,0.16); transition: transform 0.3s ease;
}
.summer-flyer a:hover { transform: translateY(-5px); }
.summer-flyer img { width: 100%; display: block; }
.summer-flyer figcaption {
    font-size: 12px; color: #8a8290; text-align: center; margin-top: 10px;
}
/* hervorgehobener Menüpunkt für die Saison */
.nav-link.nav-highlight {
    color: #B0842A; font-weight: 700;
}

/* ============================================================================
   PREISE (Tabelle, Gratis-Schnupperstunde, Personaltraining) & RECHTSSEITEN
   ============================================================================ */
.trial-highlight {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center;
    background: linear-gradient(90deg, rgba(31,157,85,0.10), rgba(122,90,158,0.08));
    border: 1px solid rgba(31,157,85,0.25); border-radius: 16px;
    padding: 18px 24px; margin: 0 auto 34px; max-width: 780px; text-align: center;
}
.trial-highlight .trial-badge {
    background: #1f9d55; color: #fff; font-weight: 800; font-size: 13px;
    text-transform: uppercase; letter-spacing: 0.5px; border-radius: 20px; padding: 5px 14px;
}
.trial-highlight .btn { margin: 0; }
.price-table th:not(:first-child), .price-table td:not(:first-child) { text-align: center; }
.pt-grid { display: flex; justify-content: center; margin-top: 36px; }
.pt-card {
    background: #fff; border: 1px solid #ece6ef; border-radius: 18px;
    padding: 30px 34px; max-width: 520px; width: 100%; text-align: center;
    box-shadow: 0 6px 24px rgba(0,0,0,0.06);
}
.pt-card h3 { margin: 0 0 6px; font-size: 22px; }
.pt-card ul { list-style: none; padding: 0; margin: 16px 0 22px; }
.pt-card li { padding: 8px 0; border-bottom: 1px solid #f0ecf2; }
.pt-card li:last-child { border-bottom: none; }

.legal-content { max-width: 820px; margin: 0 auto; }
.legal-content h2 { margin-top: 0; }
.legal-content h3 { margin-top: 26px; font-size: 19px; }
.legal-content p, .legal-content li { color: var(--color-gray-dark, #444); line-height: 1.7; }
.legal-content a { color: var(--color-purple, #7A5A9E); }

/* Probestunde-Button in der Navigation */
.nav-menu .nav-cta {
    display: inline-block;
    background: linear-gradient(90deg, #DDA83C, #7A5A9E);
    color: #fff; padding: 9px 18px; border-radius: 30px;
    font-weight: 700; text-decoration: none; line-height: 1;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.nav-menu .nav-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(122,90,158,0.35); color: #fff;
}

/* ── Region-Karte (schematisch, SVG) ── */
.region-map { max-width:820px; margin:0 auto; }
.rm-canvas { position:relative; width:100%; aspect-ratio:800/560; }
.rm-bg { position:absolute; inset:0; border-radius:24px; overflow:hidden;
    box-shadow:0 12px 40px rgba(99,70,127,.12); border:1px solid #ece6ef; }
.rm-bg svg { width:100%; height:100%; display:block; }
.rm-town { position:absolute; transform:translate(-50%,-50%); font-size:13px;
    color:#9a8fa6; font-weight:600; letter-spacing:.3px;
    pointer-events:none; text-shadow:0 1px 2px rgba(255,255,255,.7); }
.rm-town::before { content:""; display:inline-block; width:6px; height:6px;
    border-radius:50%; background:#c9bcd6; margin-right:5px; vertical-align:middle; }
.rm-pin { position:absolute; transform:translate(-50%,-50%); background:none;
    border:none; padding:0; cursor:pointer; z-index:2; }
.rm-pin:hover, .rm-pin:focus { z-index:10; outline:none; }
.rm-dot { display:block; width:20px; height:20px; border-radius:50%;
    background:radial-gradient(circle at 35% 30%,#EDC468,#DDA83C 55%,#7A5A9E);
    box-shadow:0 3px 10px rgba(221,168,60,.5); position:relative; transition:transform .18s ease; }
.rm-dot::after { content:""; position:absolute; inset:-7px; border-radius:50%;
    border:2px solid rgba(221,168,60,.5); animation:rmpulse 2.2s ease-out infinite; }
.rm-pin:hover .rm-dot, .rm-pin:focus .rm-dot { transform:scale(1.25); }
@keyframes rmpulse { 0%{transform:scale(.6);opacity:.8} 100%{transform:scale(1.6);opacity:0} }
.rm-name { display:block; margin-top:4px; font-size:12px; font-weight:700;
    white-space:nowrap; transform:translateX(-50%); margin-left:10px;
    color:#63467F; text-shadow:0 1px 3px rgba(255,255,255,.9); }
.rm-tip { position:absolute; left:50%; bottom:34px;
    transform:translateX(-50%) translateY(6px); width:210px; background:#fff;
    border-radius:14px; box-shadow:0 14px 34px rgba(0,0,0,.22);
    padding:13px 15px; opacity:0; visibility:hidden; transition:.18s ease;
    text-align:left; }
/* Kein pointer-events:none auf .rm-tip: damit war der Route-Link nicht anklickbar,
   und weil die Blase die Maus nicht annahm, verlor der Punkt beim Hinfahren seinen
   :hover-Zustand und die Blase verschwand. Im Ruhezustand ist sie ohnehin
   visibility:hidden und faengt daher keine Klicks ab. */
.rm-tip::after { content:""; position:absolute; left:50%; bottom:-7px;
    transform:translateX(-50%); border:8px solid transparent;
    border-top-color:#fff; border-bottom:0; }
.rm-pin:hover .rm-tip, .rm-pin:focus .rm-tip { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.rm-tip h4 { margin:0 0 3px; font-size:14px; color:#2a2530; }
.rm-tip .rm-course { display:block; font-size:12px; color:#7A5A9E; font-weight:600; margin-bottom:8px; }
.rm-tip .rm-addr { display:block; font-size:11px; color:#8a8290; margin-bottom:9px; }
.rm-tip a { display:inline-block; font-size:12px; font-weight:700; color:#fff;
    background:linear-gradient(90deg,#DDA83C,#7A5A9E); padding:5px 12px;
    border-radius:20px; text-decoration:none; }
.rm-pin.edge-r .rm-tip { left:auto; right:-6px; transform:translateY(6px); }
.rm-pin.edge-r:hover .rm-tip, .rm-pin.edge-r:focus .rm-tip { transform:translateY(0); }
.rm-pin.edge-r .rm-tip::after { left:auto; right:18px; }
.rm-legend { display:flex; align-items:center; justify-content:center;
    gap:8px; margin-top:16px; font-size:13px; color:#8a8290; }
.rm-legend .ld { width:14px; height:14px; border-radius:50%;
    background:radial-gradient(circle at 35% 30%,#EDC468,#DDA83C 55%,#7A5A9E); }

/* ============================================================================
   FIX FOR IOS SAFARI & MOBILE PARALLAX
   ============================================================================ */
@supports (-webkit-touch-callout: none) {
    .parallax-divider,
    .parallax-section,
    .hero,
    body {
        background-attachment: scroll !important;
    }
}

@media (max-width: 768px) {
    .parallax-divider,
    .parallax-section,
    .hero,
    body {
        background-attachment: scroll !important;
    }
}

/* ============================================================================
   MOBILE PARALLAX – CSS Scroll-Driven Animations (progressive enhancement)
   background-attachment: fixed ist auf Touch-Geräten deaktiviert (s.o.);
   stattdessen spiegelt ein überhohes Pseudo-Element das Divider-Bild und
   bewegt es per Compositor-Transform gekoppelt an die Scroll-Position.
   Browser ohne Support (iOS < Safari 26) zeigen ein statisches Bild.
   ============================================================================ */
@supports (animation-timeline: view()) {
    /* Phones über die Breite, Tablets (iPads etc.) über Touch-Fähigkeit —
       Desktop mit Maus behält die background-attachment: fixed-Variante */
    @media (max-width: 768px) and (prefers-reduced-motion: no-preference),
           (hover: none) and (pointer: coarse) and (prefers-reduced-motion: no-preference) {
        /* clip, NICHT hidden: hidden würde den Divider selbst zum
           Scroll-Container machen und die view()-Timeline deaktivieren */
        .parallax-divider {
            overflow: clip;
            background-attachment: scroll;
        }

        .parallax-divider::before {
            content: '';
            position: absolute;
            /* 80px Überstand oben/unten = Bewegungsspielraum des Parallax */
            inset: -80px 0;
            background: inherit;
            /* niemals ein fixed-Attachment in die animierte Ebene erben */
            background-attachment: scroll;
            animation: parallax-shift linear both;
            animation-timeline: view();
            will-change: transform;
        }

        /* Inset-Schatten des Dividers oberhalb des Pseudo-Elements erneuern */
        .parallax-divider::after {
            content: '';
            position: absolute;
            inset: 0;
            box-shadow: inset 0 20px 40px rgba(0, 0, 0, 0.1), inset 0 -20px 40px rgba(0, 0, 0, 0.1);
            pointer-events: none;
        }
    }
}

@keyframes parallax-shift {
    from { transform: translateY(-80px); }
    to   { transform: translateY(80px); }
}

@media (max-width: 480px) {
    /* Compact mobile home hero */
    .page-home .parallax-section.hero {
        position: relative;
        top: auto;
        height: auto;
        min-height: calc(100svh - var(--header-height));
        padding: 24px 0 36px;
        align-items: flex-start;
    }

    .page-home .hero-grid {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .page-home .glass-card-vibrant {
        width: calc(100% - 48px);
        max-width: 342px;
        margin: 16px auto 0;
        padding: 22px 18px 20px;
        border-radius: 24px;
        background: rgba(255, 255, 255, 0.48);
    }

    .page-home .hero-logo {
        max-width: 120px;
        margin-bottom: 12px;
    }

    .page-home .hero-title {
        font-size: 26px;
        line-height: 1.08;
        margin-bottom: 10px;
    }

    .page-home .hero-title-sub {
        margin-top: 8px;
    }

    .page-home .hero-description {
        font-size: 15px;
        max-width: 29ch;
        line-height: 1.45;
        margin-bottom: 16px;
    }

    .page-home .hero-buttons {
        gap: 10px;
    }

    .page-home .hero-buttons .btn {
        min-height: 44px;
        padding: 10px 16px;
    }

    .page-home .content-overlay {
        margin-top: 0;
        padding-top: 24px;
        border-top-left-radius: 28px;
        border-top-right-radius: 28px;
    }
}

/* ── Unterseiten-Hero kompakt (Home hat eigene Regeln unter .page-home) ──
   Vorher: 100vh nur fuer den Titel, und die festen 56px liessen
   "Sommerprogramm 2026" auf 375px aus der Glaskarte laufen.
   Steht bewusst VOR dem finalen Footer-Media-Block: der Test
   mobile-footer-layout.test.cjs verlangt, dass der letzte 768px-Block
   der Datei der mobile Footer ist. */
@media (max-width: 768px) {
    body:not(.page-home) .hero {
        /* .parallax-section setzt height:100vh fest - erst height:auto laesst
           die min-height wirken. Sticky bleibt, der Ueberlagerungs-Effekt der
           nachfolgenden Inhalte funktioniert unveraendert. */
        height: auto;
        min-height: 72svh;
    }

    body:not(.page-home) .hero-title {
        /* 7.6vw statt 8.6vw: "Sommerprogramm" (laengstes Titelwort) muss auf
           375px als Ganzes in die Glaskarte passen. overflow-wrap:break-word
           stand hier zuerst, brach das Wort aber ohne Trennstrich mitten
           durch ("Sommerprogra/mm") - hyphens:auto bleibt als Notnagel fuer
           noch laengere Woerter und trennt dann wenigstens mit Strich. */
        font-size: clamp(28px, 7.6vw, 42px);
        hyphens: auto;
    }

    body:not(.page-home) .hero-subtitle {
        font-size: 17px;
        margin-bottom: 24px;
    }

    body:not(.page-home) .glass-card-vibrant {
        padding: 36px 24px;
    }
}

/* ── Unterseiten: Textbox nach oben ──
   Aus dem Hero-Plan: auf allen Unterseiten sitzt die Box oben, weil dort bei den
   gewaehlten Motiven die Bildflaeche frei ist. Vorher stand sie mittig und lag
   damit regelmaessig auf Kopf und Oberkoerper -- der Grund fuer die
   "kopflosen" Heros. Statt eines gestapelten Aufbaus bleibt der Text also auf
   dem Bild, nur eben dort, wo das jeweilige Motiv Platz laesst.

   Die vorherige Probe auf preise.php (Bild oben, Text darunter) ist damit
   hinfaellig und hier entfernt. Gilt fuer Handy und Desktop gleichermassen. */
body:not(.page-home) .hero {
    align-items: flex-start;
}

body:not(.page-home) .hero-grid {
    padding-top: 7vh;
}

@media (max-width: 768px) {
    body:not(.page-home) .hero-grid {
        padding-top: 4vh;
    }
}

/* ── Startseiten-Hero: Karte weiter nach unten ──
   Der Hero war 100svh hoch, begann aber erst unter Kopfzeile UND Saison-Banner
   und ragte deshalb um dessen Hoehe unter den Bildschirmrand. Die mittig
   gesetzte Karte lag damit mit ihrer Unterkante 52px unter der Falz -- die
   beiden Knoepfe waren nur durch Scrollen erreichbar.

   Der Hero rechnet die Bannerhoehe jetzt heraus und endet am unteren
   Bildschirmrand. Erst dadurch laesst sich die Karte nach unten ruecken, ohne
   angeschnitten zu werden. Das Banner bleibt im Textfluss ueber dem Bild und
   deckt es nicht ab.

   --banner-height ist gemessen und nach Breakpoint gesetzt: einzeilig 71px, am
   Handy zweizeilig rund 137px. Naeherung, weil die Hoehe vom Zeilenumbruch
   abhaengt - bei geaendertem Bannertext hier nachmessen. */
.page-home {
    --banner-height: 71px;
}

.page-home .parallax-section.hero {
    /* Bewusst hoeher als der sichtbare Bereich: so bekommt die Karte Platz,
       weiter nach unten zu ruecken, und es bleibt mehr Bild stehen. Der Hero
       reicht damit ueber die Falz hinaus - man scrollt ein Stueck. */
    height: calc(100svh - var(--header-height) - var(--banner-height) + 16vh);
    min-height: 0;
    align-items: flex-end;
}

.page-home .hero-grid {
    /* Abstand zur nachfolgenden Sektion: .content-overlay ueberlappt den Hero
       um 40px nach oben. Bei 4vh stiess die Karte dort hinein - gemessen 23px
       Ueberschneidung. 12vh haelt sie frei. */
    padding-bottom: 12vh;
}

@media (max-width: 768px) {
    .page-home {
        --banner-height: 137px;
    }

    .page-home .hero-grid {
        padding-bottom: 2vh;
    }
}

/* Am Desktop deutlich hoeher als am Handy: dort ist der sichtbare Bereich
   breiter als hoch, ein Hero in Bildschirmhoehe wirkt gedrungen. Der Wert
   addiert sich zu den 16vh der Grundregel, macht dort also +32vh. */
@media (min-width: 769px) {
    .page-home .parallax-section.hero {
        height: calc(100svh - var(--header-height) - var(--banner-height) + 32vh);
    }
}

@media (max-width: 768px) {
    /* Compact centered mobile footer */
    footer .footer-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 36px 24px 28px;
        text-align: center;
    }

    footer .footer-col {
        min-width: 0;
    }

    footer .footer-col:first-child {
        max-width: 34rem;
        margin: 0 auto;
    }

    footer .footer-logo-img {
        max-width: min(220px, 70vw);
    }

    footer .footer-col:first-child p {
        max-width: 34ch;
        margin: 12px auto 0 !important;
        line-height: 1.55;
    }

    footer .footer-col h4 {
        margin-bottom: 14px;
        padding-bottom: 10px;
    }

    footer .footer-col h4::after {
        left: 50%;
        transform: translateX(-50%);
    }

    footer .footer-nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 18px;
        max-width: 34rem;
        margin: 0 auto;
    }

    footer .footer-nav li {
        margin-bottom: 0;
    }

    footer .footer-nav a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 4px 0;
    }

    footer .footer-nav a:hover {
        padding-left: 0;
    }

    footer .footer-col:last-child p {
        margin: 0;
        line-height: 1.6;
    }

    footer .footer-col:last-child p + p {
        margin-top: 4px;
    }

    footer .footer-bottom {
        padding: 18px 0;
    }

    footer .footer-bottom .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    footer .footer-bottom p {
        max-width: 34ch;
        line-height: 1.5;
    }

    footer .footer-links {
        gap: 22px;
        margin-top: 0;
        flex-wrap: wrap;
    }
}

/* ============================================================================
   MOBILE-DURCHGANG 2026-08: Unterseiten-Heros, Preistabelle, Karte, CTA
   ============================================================================ */

/* ── Preistabelle als Karten (unter 640px) ──
   Die fuenfspaltige Tabelle war 683px breit: auf dem Handy standen Einzel-
   und Blockpreis unsichtbar rechts ausserhalb - auf der Preisseite.
   Jede Zeile wird zur Karte, data-label liefert die Beschriftung. */
@media (max-width: 640px) {
    .price-table,
    .price-table tbody,
    .price-table tr,
    .price-table td {
        display: block;
        width: 100%;
    }

    .price-table {
        /* Die Basisregel .schedule-table erzwingt min-width:600px
           (fuer den frueheren Scroll-Container) - im Kartenlayout
           wuerde das die Karten wieder aus dem Viewport schieben. */
        min-width: 0;
        background: none;
        box-shadow: none;
        overflow: visible;
    }

    .price-table thead {
        display: none;
    }

    .price-table tr {
        background: var(--color-white);
        border-radius: 14px;
        padding: 16px 18px;
        margin-bottom: 14px;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
        text-align: left;
    }

    .price-table td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        padding: 5px 0;
        border: none;
    }

    .price-table td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 13px;
        color: var(--color-gray-dark);
        opacity: 0.7;
    }

    .price-table td:first-child {
        display: block;
        font-weight: 700;
        font-size: 16px;
        color: var(--color-purple);
        padding-bottom: 9px;
        margin-bottom: 7px;
        border-bottom: 1px solid rgba(122, 90, 158, 0.15);
    }

    .price-table td:first-child::before {
        content: none;
    }
}

/* ── Standortkarte: mehr Hoehe auf schmalen Screens ──
   Beim Querformat 800/560 rueckten die prozentual gesetzten Pins so eng
   zusammen, dass sich die Ortsnamen ueberlappten. Mehr Hoehe spreizt sie;
   der SVG-Hintergrund (weiche Huegel) vertraegt die Streckung. */
@media (max-width: 640px) {
    .rm-canvas {
        aspect-ratio: 4 / 5;
    }

    .rm-name {
        font-size: 10.5px;
    }

    .rm-town {
        font-size: 11px;
    }
}

/* ── CTA-Knoepfe untereinander zentriert statt versetzt nebeneinander ── */
@media (max-width: 520px) {
    .section-colored .btn {
        display: block;
        width: fit-content;
        margin: 0 auto;
    }

    .section-colored .btn + .btn {
        margin-top: 12px;
    }
}

/* ============================================================================
   KURSPLAN (Herbst 2026) – Zusatzangaben und Standortliste
   Bewusst KEIN @media (max-width: 768px)-Block: mobile-footer-layout.test.cjs
   verlangt, dass der letzte 768px-Block der Datei der mobile Footer ist.
   ============================================================================ */

/* Nur fuer Screenreader – die <caption> der Kursplan-Tabelle. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Zusatz am Kursnamen, z. B. "(60+)" */
.schedule-sub {
    color: var(--color-gray-dark);
    font-weight: 400;
    opacity: 0.75;
}

/* Handschriftliche Ausnahmen vom Flyer, z. B. "ab Oktober".
   Petrol statt Gold: Gold hat auf Hell nur ~2.3:1 Kontrast. */
.schedule-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    background: var(--color-teal);
    color: var(--color-white);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    vertical-align: 1px;
}

.schedule-footnote {
    margin-top: 20px;
    color: var(--color-gray-dark);
    font-size: 15px;
    opacity: 0.85;
}

/* ── Standortliste ── */
.location-list {
    list-style: none;
    margin: 40px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

.location-item {
    background: var(--color-white);
    border-radius: var(--radius-md);
    padding: 22px 24px;
    box-shadow: var(--shadow-soft);
    text-align: left;
}

.location-name {
    margin: 0 0 6px;
    font-family: var(--font-heading);
    font-size: 18px;
    color: var(--color-purple);
}

.location-address {
    margin: 0;
    color: var(--color-gray-dark);
    font-size: 15px;
    line-height: 1.55;
}

@media (max-width: 640px) {
    .location-list {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .location-item {
        padding: 18px 20px;
    }
}

/* Standort ohne Adresse (Oberretzbach): der Flyer nennt keine.
   Sichtbar als offener Punkt statt als leere Karte. */
.location-address-offen {
    font-style: italic;
    opacity: 0.9;
}

.location-address-offen a {
    color: var(--color-purple);
    text-decoration: underline;
}

/* ── Programmblatt auf der Kursplan-Seite ──
   Hochformat (1131x1600), deshalb schmal gehalten - volle Breite waere
   auf dem Desktop ein meterhohes Bild. Optik wie die Sommer-Flyer. */
.plan-flyer {
    margin: 44px auto 0;
    max-width: 420px;
}

.plan-flyer a {
    display: block;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.16);
    transition: transform 0.3s ease;
}

.plan-flyer a:hover {
    transform: translateY(-5px);
}

.plan-flyer img {
    width: 100%;
    height: auto;
    display: block;
}

.plan-flyer figcaption {
    margin-top: 12px;
    color: var(--color-gray-dark);
    font-size: 13px;
    text-align: center;
}

.plan-flyer figcaption a {
    color: var(--color-purple);
    text-decoration: underline;
}

/* ── Standort mit geplantem Kurs (derzeit Retz) ──
   Sandra bereitet dort einen Kurs vor, ein Termin steht noch nicht fest.
   Bewusst sichtbar statt weggelassen: zeigt das volle Einzugsgebiet und
   sammelt Vormerkungen, statt Interessierte gar nicht erst zu erreichen. */
.location-item-geplant {
    background: linear-gradient(160deg, rgba(185, 160, 220, 0.16), rgba(255, 255, 255, 0.9));
    border: 1px dashed rgba(122, 90, 158, 0.45);
}

.location-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    background: var(--color-purple);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    vertical-align: 2px;
}

.location-hint {
    margin: 10px 0 0;
    color: var(--color-gray-dark);
    font-size: 14px;
    line-height: 1.5;
}

.location-hint a {
    color: var(--color-purple);
    text-decoration: underline;
}

/* ============================================================================
   KURSPLAN – Standorte: Fotoflaeche, Kursliste, Routen-Link
   ============================================================================ */
.section-lead-center {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 30px;
    color: var(--color-gray-dark);
}

/* Bildflaeche pro Standort. Feste Proportion, damit die Karten in einer Reihe
   gleich hoch bleiben - egal ob schon ein Foto da ist oder noch nicht. */
.location-foto {
    aspect-ratio: 3 / 2;
    margin: -22px -24px 16px;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    overflow: hidden;
}

.location-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Platzhalter bis Sandras Aufnahmen da sind: ruhige Flaeche mit Ortsinitiale.
   Bewusst kein Fremdbild - Aufnahmen aus der Google-Suche sind lizenziert. */
.location-foto-leer {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(140deg, var(--color-cream), var(--color-lavender-tint));
}

.location-foto-leer span {
    font-family: var(--font-heading);
    font-size: 46px;
    font-weight: 700;
    color: rgba(122, 90, 158, 0.35);
    line-height: 1;
}

.location-kurse {
    margin: 8px 0 0;
    color: var(--color-purple);
    font-size: 14px;
    font-weight: 600;
}

.location-route {
    display: inline-block;
    margin-top: 14px;
    color: var(--color-teal);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.location-route:hover {
    text-decoration: underline;
}

/* Geplanter Ort: Punkt auf der Karte gestrichelt wie die zugehoerige Karte */
.rm-pin-geplant .rm-dot {
    background: var(--color-white);
    border: 2px dashed var(--color-purple);
}

/* Linkes Gegenstueck zu .edge-r: bei Pins nahe dem linken Rand (Pulkau bei
   22%) lief die 210px breite Sprechblase aus dem Kartenrahmen - auf 375px
   Breite um rund 33px. Sie haengt dort jetzt linksbuendig am Punkt. */
.rm-pin.edge-l .rm-tip {
    left: -6px;
    right: auto;
    transform: translateY(6px);
}

.rm-pin.edge-l:hover .rm-tip,
.rm-pin.edge-l:focus .rm-tip {
    transform: translateY(0);
}

.rm-pin.edge-l .rm-tip::after {
    left: 22px;
}

/* ============================================================================
   HERO-KARTE AM DESKTOP: ohne Weichzeichner, dafuer etwas dichter
   ============================================================================
   Bisher: Weiss 58 % mit backdrop-filter: blur(14px). Der Weichzeichner war
   das eigentliche Problem - er zerlegt das Bild dahinter zu Farbmatsch, ohne
   die Lesbarkeit zu verbessern. Gemessen an echten Bildpixeln unter der Karte:
   mit Blur 3,11, ohne Blur 3,07 Kontrast. Er kostet also nur Erkennbarkeit.

   Jetzt 72 % Deckkraft ohne Weichzeichner: das Motiv bleibt erkennbar, die
   Karte bleibt durch Rand und Schatten als Flaeche lesbar, und der Kontrast
   steigt von 3,07 auf 4,32 (WCAG AA verlangt 4,5 - knapp darunter, aber
   deutlich besser als der bisherige Zustand).

   Nur am Desktop. Am Handy bleibt es beim bisherigen Glas-Look, dort loesen
   wir die Ueberlagerung ohnehin anders (siehe Startseite und preise.php).
   Ein min-width-Block beruehrt den Footer-Test nicht, der nach dem letzten
   max-width-768-Block sucht. */
@media (min-width: 769px) {
    .glass-card-vibrant {
        background: rgba(255, 253, 249, 0.72);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: 1px solid rgba(255, 255, 255, 0.9);
        box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
    }
}