:root {
    --bg-primary: #F7F7F5;
    --bg-secondary: #D9D7D2;
    --text-primary: #1A1A1A;
    --text-secondary: #6F6B63;
    --accent-color: #8A8F6A;
    
    /* Typography Tokens */
    --font-primary: 'Söhne', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-secondary: 'Canela', 'Cormorant', 'Iowan Old Style', serif;
    
    /* Type Scale — 8 semantische Stufen. Single Source of Truth für alle
       font-size-Werte. Clamp-Formeln sind nur in den Tokens, nie in Elementen. */
    --text-micro: 11px;                          /* Labels, Kicker, Meta-Overline */
    --text-sm:    14px;                          /* Small Body, Captions, Footer-Nav */
    --text-body:  16px;                          /* Fließtext — fester Wert */
    --text-lead:  clamp(1.05rem, 1.4vw, 1.2rem); /* Lead-Text, Quotes */
    --text-h3:    clamp(1.25rem, 2.2vw, 1.9rem); /* Kleine Headlines, Card-Titel */
    --text-h2:    clamp(2rem, 4vw, 3.2rem);      /* Standard Editorial Headline */
    --text-h1:    clamp(2.5rem, 5vw, 4rem);      /* Subpage Hero Headline */
    --text-hero:  clamp(4.5rem, 12vw, 9rem);     /* Home Hero „KLA & BAUTER" */

    /* Line-Heights — 3 Stufen. tight für Display, snug für Headlines, base für Body. */
    --lh-tight: 1.15;
    --lh-snug:  1.3;
    --lh-base:  1.75;

    /* Letter-Spacing — 5 Stufen. tighter/tight für Headlines,
       normal default, subtle für Links/CTAs, wide für uppercase Kicker. */
    --tracking-tighter: -0.02em;
    --tracking-tight:   -0.01em;
    --tracking-normal:   0;
    --tracking-subtle:   0.02em;
    --tracking-wide:     0.18em;

    --max-width-text: 65ch;

    /* Global Body Text — single source of truth for paragraph typography.
       Matches the Songcamp reference (Fünf Tage, ein Rhythmus. body). */
    --body-font-size: var(--text-body);
    --body-line-height: var(--lh-base);
    --body-font-weight: 300;
    --body-color: var(--text-primary);
    --body-max-width: 680px;

    /* Layout-Spacing — zentrale Source of Truth für horizontale Ränder.
       Breakpoints (am :root unten) passen den Wert an.
       Regel: Desktop 4rem, Tablet/Mobile 2rem, Small 1rem. */
    --edge: 4rem;

    /* Vertikaler Abstand von Navbar-Oberkante bis Content-Start.
       Editorial-luftig: Content darf nie direkt unter der Navbar kleben. */
    --content-top: 14rem;

    /* Spacing Scale — 6-stufig, editorial. Single Source of Truth für alle
       margin/padding/gap-Werte. Pairing-Regel: kleinere Einheit → kleinerer
       Abstand. 2xs/xs bindet, md trennt Elemente einer Gruppe, lg/xl trennt
       Gruppen voneinander. Mobile-Overrides unten. */
    --space-2xs: 0.5rem;   /* Inline-Luft (Label, Arrow, Icon-Text) */
    --space-xs:  1rem;     /* Paragraph zu Paragraph, enge Pairings */
    --space-sm:  1.5rem;   /* Kicker → Headline, CTA-Abstand */
    --space-md:  2.5rem;   /* Headline → Body, Gruppen-Trennung */
    --space-lg:  4rem;     /* Content-Block → Content-Block */
    --space-xl:  8rem;     /* Section → Section, Große Trennung */

    /* Breakpoint-Referenz (Media Queries können keine Custom Properties):
       --bp-tablet: 992px  — Tablet → Mobile-Layout
       --bp-mobile: 768px  — Phone-Layout
       --bp-small:  480px  — sehr kleine Phones */

}

@media (max-width: 992px) {
    :root {
        --edge: 2rem;
        --content-top: 11rem;
        /* Mobile: große Stufen werden enger, damit 100svh-Sections atmen.
           Kleine Stufen (2xs/xs/sm) bleiben — Editorial-Rhythmus. */
        --space-lg: 3rem;
        --space-xl: 5rem;
    }
}
@media (max-width: 480px) {
    :root { --edge: 1rem; }
}

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

/* Snap-Scroll komplett entfernt — Seite scrollt frei auf allen Geräten */

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-primary);
    line-height: var(--lh-base);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

p {
    font-family: var(--font-primary);
    font-size: var(--body-font-size);
    line-height: var(--body-line-height);
    font-weight: var(--body-font-weight);
    color: var(--body-color);
    max-width: var(--body-max-width);
}

em, i {
    font-family: var(--font-secondary);
    font-style: italic;
    font-weight: inherit; /* Erbt Parent-Weight — em in 400er-Headline bleibt 400, im 300er-Body bleibt 300. Verhindert dass em in Headlines optisch „dünner" wirkt. */
}

/* em in Headlines ist Konvention = Akzentfarbe. Ersetzt verstreute inline-styles. */
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em {
    color: var(--accent-color);
}

blockquote, .quote {
    font-family: var(--font-secondary);
    font-size: var(--text-h2);
    font-weight: 300;
    font-style: italic;
    line-height: var(--lh-base);
    margin: var(--space-md) 0;
    padding-left: var(--space-md);
    border-left: 2px solid var(--accent-color);
}

/* Loader */
.loader {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--bg-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
.loader-logo {
    width: 80px;
    height: auto;
    animation: floatSpin 1.8s linear infinite;
    transform-origin: center;
    will-change: transform;
}
/* Flotte Rotation auf der Stelle — läuft solange der Loader sichtbar ist. */
@keyframes floatSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.nav-logo-img {
    height: 45px;
    width: auto;
    display: block;
    transform-origin: center center;
}
@media (max-width: 768px) {
    /* Matcht die Footer-Klabautermann-Größe exakt (beide 42px). */
    .nav-logo-img {
        width: 42px;
        height: auto;
    }
}

@keyframes tickle {
    0%   { transform: rotate(0deg) scale(1) translateY(0px); }
    15%  { transform: rotate(-8deg) scale(1.15) translateY(-3px); }
    30%  { transform: rotate(10deg) scale(1.15) translateY(2px); }
    45%  { transform: rotate(-10deg) scale(1.15) translateY(-2px); }
    60%  { transform: rotate(8deg) scale(1.15) translateY(1px); }
    75%  { transform: rotate(-5deg) scale(1.15) translateY(-1px); }
    90%  { transform: rotate(2deg) scale(1.1) translateY(0px); }
    100% { transform: rotate(0deg) scale(1) translateY(0px); }
}

.logo:hover .nav-logo-img {
    animation: tickle 0.4s ease-in-out;
}

/* Navigation */
.navbar {
    position: absolute;
    top: 0; left: 0; width: 100%;
    padding: var(--space-md) var(--edge);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 200;
    pointer-events: none;
}
@media (max-width: 768px) {
    .navbar {
        padding-top: var(--space-sm);
        padding-bottom: var(--space-sm);
    }
}
.navbar > * {
    pointer-events: auto;
}
.logo {
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: var(--text-lead);
    letter-spacing: var(--tracking-normal);
    transition: opacity 0.25s ease, transform 1s cubic-bezier(0.68, -0.6, 0.32, 1.6);
    display: inline-block;
}
/* Hover aufs Burger-Menü → Logo fadet dezent aus */
.navbar:has(.menu-toggle:hover) .logo {
    opacity: 0;
}
/* Menü offen → Logo bleibt unsichtbar */
html:has(#fullscreen-menu.open) .logo {
    opacity: 0;
}
.menu-toggle {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Zentriert Bars vertikal in der Box */
    gap: 8px;
    position: fixed;
    right: var(--edge);
    top: var(--space-md); /* == .navbar padding-top */
    z-index: 200;
    height: 45px; /* == .nav-logo-img height, via justify-content mittig */
    box-sizing: content-box; /* Padding extern → Content-Area bleibt Logo-gross */
    padding: var(--space-xs); /* unsichtbarer Touch-Target-Vergrößerer */
    margin: calc(var(--space-xs) * -1) calc(var(--space-xs) * -1) calc(var(--space-xs) * -1) 0; /* hebt Padding visuell wieder auf */
}
@media (max-width: 768px) {
    .menu-toggle {
        top: var(--space-sm); /* == .navbar padding-top auf Mobile */
        height: 42px; /* == .nav-logo-img width auf Mobile */
        margin: calc(var(--space-xs) * -1);
    }
}
.menu-toggle .bar {
    width: 35px;
    height: 3px;
    background-color: var(--accent-color);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
}

/* CSS Cross Transformation */
.menu-toggle.open .bar:nth-child(1) {
    transform: translateY(5.5px) rotate(45deg);
}
.menu-toggle.open .bar:nth-child(2) {
    transform: translateY(-5.5px) rotate(-45deg);
}

/* Hero Section */
.hero {
    min-height: 100svh;
    padding: 0 var(--edge);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-top: 80px;
    /* Safety net: auf flachen Desktop-Viewports (Landscape-Laptop mit vielen
       Toolbars) würde das 600px-Portrait sonst nach oben hinter die Navbar
       rutschen. overflow:hidden schneidet unten ab statt oben zu überlaufen. */
    overflow: hidden;
}
.hero-content {
    flex: 1;
}
.hero-title {
    font-family: var(--font-primary);
    font-size: var(--text-hero);
    font-weight: 600; /* Ausnahme: Hero braucht mehr Präsenz. Echtes 600er Inter-File geladen (inter-600-n-latin.woff2), kein Faux-Bold. */
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tighter);
    margin-bottom: var(--space-md);
    text-transform: uppercase;
}
.hero-subtitle {
    font-family: var(--font-secondary);
    font-weight: 400;
    font-size: var(--text-h3);
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
    text-transform: none;
    display: block;
    max-width: none;
    margin-top: var(--space-xs);
}
.hero-subtitle em {
    color: var(--accent-color);
}

/* Duotone Image Treatment (Like the old website) */
.hero-images {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}
.image-wrapper {
    width: 450px;
    height: 600px;
    /* Skaliert runter wenn Viewport zu flach für volle 600px + Navbar-Offset.
       object-fit:cover im Child sorgt dafür, dass das Bild dabei proportional
       crops statt sich zu verzerren. */
    max-height: calc(100svh - 120px);
    overflow: hidden;
    position: relative;
    background-color: var(--text-primary);
}

.portrait-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Home Entry Section */
.home-entry-section {
    position: relative; /* Anchors the new thought-panel absolute overlay on Desktop */
    height: 100svh;
    min-height: 100svh;
    padding: 0 var(--edge);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden; /* Guarantee strict bounds */
}
.entry-container {
    width: 100%;
    max-width: 1200px;
    margin: 0; /* linksbündig — kein auto-centering, Block sitzt am 4rem-Edge wie Header */
}
.entry-header-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}
.entry-headline {
    font-family: var(--font-secondary);
    font-size: var(--text-h2);
    font-weight: 400;
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    margin-bottom: 0; /* Margin moved to wrapper */
    color: var(--text-primary);
    white-space: nowrap;

    /* Reveal Animation Start State */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.35s ease-out, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.entry-line {
    flex: 1; /* Automatically takes all remaining width rightward */
    height: 1px;
    background-color: var(--text-primary);
    opacity: 0.15;

    /* Draw Line Animation Start State */
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}
/* Drei Karten immer permanent sichtbar, gleiche Breite via flex: 1, gap dazwischen.
   Kein Layout-Shift, kein Expand. Die Songcamp-Karte (camp-path) ist auf Desktop
   default blurry mit Hint-Overlay — Hover schärft sie, Hint fadet aus. */
.entry-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-lg);
    width: 100%;
}
.entry-card {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    position: relative;

    /* Reveal-Animation (opacity + transform) bleibt agil. */
    transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);

    opacity: 0;
    transform: translateY(30px);
}

.entry-card-1 { transition-delay: 0.05s; }
.entry-card-2 { transition-delay: 0.12s; }
.entry-card-3 { transition-delay: 0.19s; }
.entry-card.camp-path { transition-delay: 0.26s; }

/* Card-Inner füllt die Card-Fläche natürlich. */
.entry-card-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Songcamp-Karte: auf Hover-fähigen Desktop-Viewports default blurry +
   reduziert, schärft beim Hover. Touch-Geräte UND Mobile-breite Fenster
   (auch mit Maus) sehen sie einfach scharf — auf Mobile-Layout sind alle
   drei Karten gestackt und gleichwertig. */
@media (hover: hover) and (min-width: 993px) {
    .entry-card.camp-path .entry-card-inner {
        opacity: 0.35;
        filter: blur(6px);
        transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                    filter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .entry-card.camp-path:hover .entry-card-inner {
        opacity: 1;
        filter: blur(0);
    }
}

/* Hint-Overlay „Ich weiß noch gar nicht genau" — zentral auf der Card,
   scharf auch wenn Card blurry ist. Nur Desktop-Layout + Hover. */
.camp-path-hint {
    display: none;
}
@media (hover: hover) and (min-width: 993px) {
    .camp-path-hint {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-family: var(--font-secondary);
        font-style: italic;
        font-weight: 300;
        font-size: var(--text-lead);
        line-height: var(--lh-snug);
        letter-spacing: var(--tracking-tight);
        color: var(--text-primary);
        white-space: nowrap;
        text-align: center;
        pointer-events: none;
        opacity: 1;
        z-index: 2;
        transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .entry-card.camp-path:hover .camp-path-hint {
        opacity: 0;
    }
}

/* Visibility Triggers (Added by JS when user scrolls to section) */
.home-entry-section.is-visible .entry-headline,
.home-entry-section.is-visible .entry-card {
    opacity: 1;
    transform: translateY(0);
}
.home-entry-section.is-visible .entry-line {
    transform: scaleX(1);
}
.entry-image-wrapper {
    width: 100%;
    max-width: 44vh; /* Allows the entire block to occupy a smaller footprint inside the 100vh height */
    aspect-ratio: 1 / 1; /* Perfect 1x1 Square */
    margin: 0 0 var(--space-sm) 0;
    overflow: hidden;
    background-color: var(--bg-secondary);
}
.entry-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.8s ease;
    filter: brightness(0.9) saturate(0.85); /* Slightly darkened/desaturated for editorial feel */
}
.entry-card:hover .entry-img {
    transform: scale(1.03); /* Subtle zoom */
    filter: brightness(1) saturate(1);
}
.entry-content {
    display: flex;
    flex-direction: column;
}
.entry-title {
    font-family: var(--font-secondary);
    font-size: var(--text-h3);
    font-weight: 400;
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-tight);
    margin-bottom: var(--space-xs);
    color: var(--text-primary);
    transition: color 0.3s ease;
    text-transform: none;
}
.entry-card:hover .entry-title {
    color: var(--accent-color);
}
.entry-desc {
    font-family: var(--font-primary);
    font-size: var(--body-font-size);
    line-height: var(--body-line-height);
    font-weight: var(--body-font-weight);
    color: var(--body-color);
    margin-bottom: var(--space-sm);
    max-width: 100%; /* Card-internal: use full card width, not global body max */
}
.entry-cta {
    font-family: var(--font-primary);
    font-size: var(--text-body);
    font-weight: 500;
    letter-spacing: var(--tracking-subtle);
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    align-self: flex-start;
    padding: var(--space-2xs) 0;
    min-height: 44px; /* Touch-Target */
    border-bottom: 1px solid var(--accent-color);
    text-transform: none;
    transition: border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
}
.entry-card:hover .entry-cta {
    border-bottom-color: var(--text-primary);
}
.entry-cta .arrow-icon {
    font-size: var(--text-body);
    line-height: 1;
    display: inline-block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.entry-card:hover .entry-cta .arrow-icon {
    transform: translateX(6px);
}

/* Base Section Title used on other pages */
.section-title {
    font-family: var(--font-primary);
    font-size: var(--text-h1);
    font-weight: 400;
    margin-bottom: var(--space-lg);
    border-bottom: 1px solid var(--bg-secondary);
    padding-bottom: var(--space-sm);
    letter-spacing: var(--tracking-tight);
    text-transform: uppercase;
}

/* Home Entry Responsive Info */
@media (max-width: 992px) {
    .home-entry-section {
        padding: var(--content-top) var(--edge) var(--space-xl);
        height: auto;
        display: block; /* Disable 100vh center flex to allow natural scrolling if mobile cards get tall */
    }
    .entry-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    .entry-headline {
        margin-bottom: var(--space-lg);
        font-size: var(--text-h2);
    }
}

/* ----------------------------------
   SPA Layout & Pages
----------------------------------- */
.page-section {
    display: none;
    opacity: 0;
    width: 100%;
    min-height: 100svh;
    position: absolute;
    top: 0;
    left: 0;
    transition: background-color 0.5s ease;
}
.bg-secondary {
    background-color: var(--bg-secondary);
}
.page-section.active {
    display: block;
    opacity: 1;
    position: relative; /* Restores document flow when active */
}

/* Fullscreen Menu — editorial redesign.
   Weg vom uppercase/900-Bullig, rein in Canela-Kapitel mit Untertiteln.
   Content startet auf X-Burger-Höhe (== navbar padding-top) und muss
   immer den sichtbaren Bildschirm füllen — auch wenn die Mobile-Browser-
   Chrome (URL-Leiste) dynamisch ein-/ausgeklappt ist. dvh = dynamic
   viewport height, passt sich live an. svh = Fallback für ältere Browser. */
.fullscreen-menu {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    height: 100svh;
    height: 100dvh;
    background-color: var(--bg-primary);
    z-index: 150; /* below navbar 200 */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: var(--space-md); /* == navbar padding-top → Kicker auf X-Höhe */
    align-items: center;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}
@media (max-width: 768px) {
    .fullscreen-menu {
        padding-top: var(--space-sm); /* matcht Mobile-navbar */
    }
}
.fullscreen-menu.open {
    pointer-events: all;
}
.menu-content {
    text-align: left;
    width: 100%;
    max-width: 1440px;
    padding: 0 var(--edge);
}
.menu-kicker {
    margin-bottom: var(--space-md); /* editorial Luft zwischen Kicker und Kapitel-Liste */
}
.menu-links {
    list-style: none;
    counter-reset: menu;
}
.menu-links li {
    overflow: hidden; /* für staggered text-reveal via GSAP */
    margin-bottom: var(--space-sm);
    counter-increment: menu;
}
.menu-links a {
    display: inline-flex;
    align-items: baseline;
    column-gap: var(--space-sm);
    font-family: var(--font-secondary);
    font-size: var(--text-h2);
    font-weight: 400;
    color: var(--text-primary);
    text-decoration: none;
    text-transform: none;
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    transition: color 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Kapitelnummer (01, 02, …) — baseline-aligned mit dem Titel. */
.menu-links a::before {
    content: counter(menu, decimal-leading-zero);
    font-family: var(--font-primary);
    font-size: var(--text-micro);
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
    color: var(--accent-color);
}
.menu-links a:hover {
    color: var(--accent-color);
    transform: translateX(0.75rem);
}

.menu-footer {
    margin-top: var(--space-lg);
    display: flex;
    gap: var(--space-md);
    justify-content: flex-start;
    opacity: 0;
}
.small-link {
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 400;
    letter-spacing: var(--tracking-subtle);
    text-transform: none;
    transition: color 0.3s ease;
}
.small-link:hover {
    color: var(--text-primary);
}

/* Base Page Styles */









/* Video Grid */
.video-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}
/* Facade-Button bis zum Klick — danach wird iframe per JS eingesetzt. */
.video-wrapper {
    aspect-ratio: 16/9;
    background-color: var(--text-primary);
    overflow: hidden;
    position: relative;
    padding: 0;
    border: 0.5px solid rgba(0, 0, 0, 0.06);
    cursor: pointer;
    display: block;
    width: 100%;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    font: inherit;
    color: inherit;
}
.video-wrapper iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.video-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(0.92) saturate(0.9);
    transition: filter 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(247, 247, 245, 0.95);
    color: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                background 0.3s ease;
    z-index: 2;
}
.video-play svg { margin-left: 2px; } /* optisch zentriert */

@media (hover: hover) {
    .video-wrapper:hover {
        transform: translateY(-2px);
    }
    .video-wrapper:hover .video-thumb {
        filter: brightness(1) saturate(1);
        transform: scale(1.02);
    }
    .video-wrapper:hover .video-play {
        transform: translate(-50%, -50%) scale(1.08);
    }
}

/* Contact Form */









/* Legal Pages */



/* Editorial Legal-Pages (Impressum, Datenschutz) */
.snap-block:has(.snap-block-inner.legal) {
    justify-content: flex-start;
    padding-top: var(--content-top);
    padding-bottom: var(--space-lg);
}
.snap-block-inner.legal {
    max-width: 760px;
    margin: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}
.legal-section-title {
    font-family: var(--font-primary);
    font-size: var(--text-micro);
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--accent-color);
    margin-top: var(--space-lg);
    margin-bottom: var(--space-xs);
}
.snap-block-inner.legal > .legal-section-title:first-of-type {
    margin-top: 0;
}
.snap-block-inner.legal p {
    font-size: var(--text-sm);
    line-height: var(--lh-base);
    font-weight: 300;
    color: var(--text-primary);
    margin-bottom: 0;
    max-width: 680px;
}
.snap-block-inner.legal a {
    color: var(--text-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--accent-color);
    transition: color 0.3s;
}
@media (hover: hover) {
    .snap-block-inner.legal a:hover {
        color: var(--accent-color);
    }
}

/* Produktion Process Updates */
















/* Preis-Fußnote — „inkl. 19 % MwSt." dezent unter Preisen */
.price-tax-note {
    font-family: var(--font-primary);
    font-size: var(--text-micro);
    font-weight: 300;
    letter-spacing: var(--tracking-subtle);
    color: var(--text-secondary);
    opacity: 0.7;
    margin: 0;
    max-width: none;
}

/* CTA Accent-Line (Sessions, taupe backdrop) — kleiner editorial Akzent */

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

/* Kontakt-Page — Studios Grid + Adress-Style */



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

/* Team-Page — Bio-Meta-Zeile unter Portrait */
.team-bio {
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    line-height: var(--lh-base);
    font-weight: 300;
    color: var(--text-secondary);
    margin-top: var(--space-md);
    max-width: 680px;
}
.team-portrait {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    filter: brightness(0.92) saturate(0.88);
}

/* Produktion Hero — Quick-Nav zu den 4 Schritten */
.prod-hero-nav {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: var(--space-md);
    padding-top: var(--space-sm);
    border-top: 0.5px solid rgba(0, 0, 0, 0.1);
    max-width: 340px;
}
@media (max-width: 768px) {
    .prod-hero-nav {
        max-width: none;
        margin-top: calc(var(--space-xs) * -1);
    }
}
.prod-hero-nav-item {
    display: inline-grid;
    grid-template-columns: 2.5rem 1fr;
    align-items: baseline;
    gap: var(--space-2xs);
    padding: var(--space-2xs) 0;
    text-decoration: none;
    color: var(--text-primary);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
}
.prod-hero-nav-item:hover {
    transform: translateX(4px);
    color: var(--accent-color);
}
.prod-hero-nav-num {
    font-family: var(--font-primary);
    font-size: var(--text-micro);
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
    color: var(--accent-color);
}
.prod-hero-nav-label {
    font-family: var(--font-secondary);
    font-size: var(--text-lead);
    font-weight: 400;
    line-height: var(--lh-tight);
}

/* Scroll-margin für die Step-Anchors, damit sie nicht unter der Navbar sitzen */
#arrangement, #klangwelt, #recording, #mix-master {
    scroll-margin-top: 0;
}

/* Camp-Fertigstellung (auf /songcamp, zwischen Alumni und Vision) */
/* Typography + spacings mirror the other sc-blocks (Format, Für Wen) for visual parity. */
/* Force 100vh Section-Höhe — Spacings kompakter, damit Typo nicht gequetscht wird. */
.sc-block.camp-finish-section {
    height: 100svh;
    min-height: 100svh;
    max-height: 100svh;
    overflow: hidden;
}
/* Mobile: 100vh-Zwang lockern, damit Content nicht gecuttet wird */
@media (max-width: 992px) {
    .sc-block.camp-finish-section {
        height: auto;
        max-height: none;
        overflow: visible;
    }
}
.camp-finish {
    max-width: 720px;
    margin: 0 auto;
}
.camp-finish-headline {
    font-family: var(--font-secondary);
    font-size: var(--text-h2);
    font-weight: 400;
    line-height: var(--lh-tight);
    margin-bottom: var(--space-sm);
    color: var(--text-primary);
}
.camp-finish-lead {
    font-family: var(--font-primary);
    font-size: var(--text-body);
    line-height: var(--lh-base);
    font-weight: 300;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
    max-width: 680px;
}
/* Analog zur Fünf-Tage-Aufzählung: Grid von Cards mit accent-Top-Strich.
   Titel 17px secondary + Preis inline, Desc 13px secondary-color. */
/* Für-wen Section — Persona-Kacheln im etablierten Card-Pattern
   (analog „Fünf Tage, ein Rhythmus" und „Nach dem Camp"): Canela-Titel +
   kleine secondary-Desc, Accent-Top-Line. Grid auto-fit für 2–4 Spalten. */
.fuer-wen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-md);
    margin-top: var(--space-md);
}
.fuer-wen-item {
    border-top: 1px solid var(--accent-color);
    padding: var(--space-sm) var(--space-xs) 0 0;
}
.fuer-wen-title {
    font-family: var(--font-secondary);
    font-size: var(--text-body);
    font-weight: 400;
    line-height: var(--lh-snug);
    margin-bottom: var(--space-2xs);
    color: var(--text-primary);
}
.fuer-wen-desc {
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--text-secondary);
    line-height: var(--lh-base);
}

.camp-finish-stages {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-sm);
}
.camp-finish-stage {
    border-top: 1px solid var(--accent-color);
    padding: var(--space-sm) var(--space-xs) 0 0;
    background: transparent;
}
.camp-finish-title {
    font-family: var(--font-secondary);
    font-size: var(--text-body);
    font-weight: 400;
    line-height: var(--lh-snug);
    margin-bottom: var(--space-2xs);
    color: var(--text-primary);
}
.camp-finish-price {
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: 300;
    letter-spacing: var(--tracking-subtle);
    color: var(--text-secondary);
    white-space: nowrap;
    margin-left: 0.25rem;
}
.camp-finish-desc {
    font-size: var(--text-sm);
    font-weight: 400; /* matcht Fünf-Tage-Desc (div ohne p-Override) */
    color: var(--text-secondary);
    line-height: var(--lh-base);
    max-width: 54ch;
}

@media (max-width: 768px) {
    /* Preis auf Mobile in eigene Zeile unter den Titel — sonst bricht die
       Kombination Titel + „— 500 €" ungünstig um. */
    .camp-finish-price {
        display: block;
        margin-left: 0;
        margin-top: 0.2rem;
    }
}
.camp-pointer {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 0.5px solid rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
}
/* Standalone-Variante (eigene Section, z. B. Sessions Songcamp-Verweis) — kein Top-Trenner. */

.camp-pointer-text {
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    line-height: var(--lh-base);
    font-weight: 300;
    color: var(--text-secondary);
    margin: 0;
    max-width: none;
}
.camp-pointer-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding-bottom: var(--space-2xs);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: var(--tracking-subtle);
    color: var(--text-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--accent-color);
    white-space: nowrap;
    transition: border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.camp-pointer-link:hover {
    border-bottom-color: var(--text-primary);
}
.camp-pointer-link .arrow-icon {
    display: inline-block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.camp-pointer-link:hover .arrow-icon {
    transform: translateX(6px);
}

/* Responsive Overrides */
@media (max-width: 992px) {
    .page-content-grid, .video-grid, .contact-grid {
        grid-template-columns: 1fr;
    }
    
    
    .hero {
        /* Mobile-Hero fest auf 100svh — Bild + Text vertikal zentriert.
           padding-top 6rem: bewusst mehr Luft zur Navbar als das allgemeine
           --space-xl (5rem), damit Bild nicht zu weit oben klebt. */
        padding: 6rem var(--edge) var(--space-lg);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: var(--space-lg);
        height: 100svh;
        min-height: 100svh;
        max-height: 100svh;
        overflow: hidden;
    }
    .hero-content {
        flex: none;
        width: 100%;
        order: 2; /* Forces text to flow UNDER the image */
        text-align: center; /* Centered text balances perfectly with centered logo above */
    }
    .hero-title {
        font-size: var(--text-h1);
    }
    .hero-images {
        flex: none;
        width: 100%;
        justify-content: center;
        order: 1; /* Forces image to pop above the text */
    }
    .image-wrapper {
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: 4/3; /* Widescreen ratio for mobile to ensure both faces fit */
    }
    .portrait-img {
        object-position: center 30%; /* Shift focus slightly up to prioritize faces */
    }
    
    
}
@media (max-width: 768px) {
    
}

/* Home Songcamp Teaser Section (Immersive Full-Bleed) */
.home-camp-section.teaser {
    position: relative;
    width: 100%;
    height: 100svh;
    min-height: 100svh;
    overflow: hidden;
    cursor: pointer;
    background: #111; /* Fallback dark */
}

@keyframes slowZoom {
    0% { transform: scale(1.0); }
    100% { transform: scale(1.15); }
}

.teaser-bg {
    position: absolute;
    inset: 0;
    background-image: url('images/songcamp/sessionpaul.webp');
    background-size: cover;
    background-position: center 40%;
    opacity: 0.35;
    filter: saturate(0.7);
    transform: scale(1.0);
    will-change: transform, opacity, translate;
    animation: slowZoom 45s linear infinite alternate;
    /* Mousefollow-Lag: translate wird via JS gesetzt, transition macht das
       smooth — subtile, verzögerte Parallax-Bewegung. */
    translate: 0 0;
    transition: translate 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-camp-section.teaser:hover .teaser-bg {
    opacity: 0.45;
}

.teaser-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(15, 15, 15, 0.4) 0%,
        rgba(15, 15, 15, 0.2) 40%,
        rgba(15, 15, 15, 0.6) 100%
    );
}

/* Subtle grain texture via CSS */
.home-camp-section.teaser::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0.04;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
}

.teaser-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--space-md);
    text-align: center;
}

.teaser-kicker {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: var(--text-micro);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-primary); /* dunkel auf oliv — Kontrast 4.86:1, WCAG AA ✓ */
    background: var(--accent-color);
    border-radius: 2px;
    padding: 6px 12px;
    display: inline-block;
    margin-bottom: var(--space-md);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.teaser-headline {
    font-family: var(--font-secondary);
    font-weight: 400;
    font-size: var(--text-h1);
    line-height: var(--lh-snug);
    color: var(--bg-primary); /* Ensures light cream text */
    max-width: 800px;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.teaser-dash {
    display: inline-block;
    width: 1.2em;
    height: 1px;
    background: rgba(255, 255, 255, 0.4);
    vertical-align: middle;
    margin: 0 0.3em;
    position: relative;
    top: -0.1em;
}

.teaser-cta {
    margin-top: var(--space-md);
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-subtle);
    color: rgba(255, 255, 255, 0.45);
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 10px 15px;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease, transform 0.6s ease, color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.teaser-cta:hover {
    color: rgba(255, 255, 255, 1);
}

.teaser-arrow {
    display: inline-block;
    width: 20px;
    height: 1px;
    background: currentColor;
    position: relative;
    transform-origin: left center;
    transition: width 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.teaser-arrow::after {
    content: '';
    position: absolute;
    right: 0;
    top: -3px;
    width: 7px;
    height: 7px;
    border-right: 1px solid currentColor;
    border-top: 1px solid currentColor;
    transform: rotate(45deg);
}

.teaser-cta:hover .teaser-arrow {
    width: 48px;
    transform: translateX(6px);
}

/* Scroll Fade Triggers using IntersectionObserver */
.home-camp-section.teaser.is-visible .teaser-kicker {
    opacity: 1; transform: translateY(0); transition-delay: 0.2s;
}
.home-camp-section.teaser.is-visible .teaser-headline {
    opacity: 1; transform: translateY(0); transition-delay: 0.4s;
}
.home-camp-section.teaser.is-visible .teaser-cta {
    opacity: 1;
    transform: translateY(0);
    /* Delay nur auf Reveal-Properties — color bleibt sofort reaktiv für Hover. */
    transition: opacity 0.6s ease 0.6s,
                transform 0.6s ease 0.6s,
                color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 768px) {
    .teaser-cta { color: rgba(255, 255, 255, 1); }
    .home-camp-section.teaser.is-visible .teaser-kicker {
        transition-delay: 0s;
    }
    .home-camp-section.teaser.is-visible .teaser-headline {
        transition-delay: 0s;
    }
    .home-camp-section.teaser.is-visible .teaser-cta {
        transition: opacity 0.4s ease 0s, transform 0.4s ease 0s,
                    color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }
}
@media (max-width: 480px) {
    .teaser-kicker { margin-bottom: var(--space-sm); }
    .teaser-cta { margin-top: var(--space-sm); }
}

/* -----------------------------------
   SONGCAMP CONTENT PAGE SPECIFICS
   ----------------------------------- */
.sc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); align-items: start; }





/* Liste auf hellem Hintergrund (z. B. Für-Wen Section) */



.sc-day-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
}
.sc-day-card {
    border-top: 1px solid var(--accent-color);
    border-radius: 0;
    padding: 1.5rem 1rem 0 0;
    background: transparent;
}
.sc-day-card-title {
    font-family: var(--font-secondary);
    font-size: 17px;
    margin-bottom: 0.75rem;
}
.sc-day-card-desc {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.65;
}

/* Stat-Row — große Zahl + kleines Label (Songcamp "Wie es läuft" etc.) */
.sc-stat-num {
    font-family: var(--font-secondary);
    font-size: 2.5rem;
    color: var(--accent-color);
    display: block;
    line-height: 1;
}
.sc-stat-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 0.5rem;
    display: block;
}

/* Editorial-Title Modifier */
.editorial-title--hero-size {
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.15;
}
.editorial-title--price {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 300;
    margin-bottom: 0.35rem;
}
@media (max-width: 768px) {
    
    .sc-day-grid {
        grid-template-columns: 1fr !important;
    }
    .sc-stats-row {
        flex-direction: column !important;
    }
}
.sc-alumni-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }

/* Testimonial-Card — Quote-Box mit Avatar + Name, editorial dezent. */
.testimonial-card {
    background: var(--bg-primary);
    border: 0.5px solid rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.testimonial-quote {
    font-size: 16px;
    line-height: 1.75;
    font-weight: 300;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}
.testimonial-footer {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}
.testimonial-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.testimonial-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}
.testimonial-role {
    font-size: 11px;
    color: var(--text-secondary);
}

/* Alumni-Pager — horizontaler Slider mit sichtbarem Gap zwischen Seiten */
.sc-alumni-pager {
    position: relative;
    overflow: hidden;
    width: 100%;
}
.sc-alumni-pager-track {
    display: flex;
    gap: var(--space-lg);
    transform: translateX(0);
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}
.sc-alumni-page {
    flex: 0 0 100%;
    box-sizing: border-box;
}
.sc-alumni-nav {
    display: flex;
    justify-content: center;
    gap: var(--space-xs);
    margin-top: var(--space-md);
}
.sc-alumni-dot {
    background: transparent;
    border: 0.5px solid rgba(0, 0, 0, 0.2);
    color: var(--text-secondary);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: var(--tracking-subtle);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
.sc-alumni-dot:hover {
    color: var(--text-primary);
    border-color: var(--accent-color);
}
.sc-alumni-dot.is-active {
    background: var(--accent-color);
    color: var(--bg-primary);
    border-color: var(--accent-color);
}
/* Mobile: Slider auflösen, progressive Reveal — initial nur Page 1 (3 Stimmen),
   Klick auf .sc-alumni-more enthüllt jeweils die nächste Page. */
@media (max-width: 768px) {
    .sc-alumni-pager {
        overflow: visible;
    }
    .sc-alumni-pager-track {
        flex-direction: column;
        gap: var(--space-md);
        transform: none !important;
    }
    .sc-alumni-page {
        flex: 0 0 auto;
        width: 100%;
    }
    /* Page 2 default hidden auf Mobile */
    .sc-alumni-pager-track > .sc-alumni-page:nth-child(n+2) {
        display: none;
    }
    /* Step 1: Page 2 sichtbar (revealed via Mehr-Stimmen-Button) */
    .sc-alumni-pager[data-reveal="1"] .sc-alumni-pager-track > .sc-alumni-page:nth-child(2) {
        display: block;
    }
    .sc-alumni-nav {
        display: none;
    }
}

/* „Mehr Stimmen"-Button — nur Mobile sichtbar, Desktop hidden. */
.sc-alumni-more {
    display: none;
}
@media (max-width: 768px) {
    .sc-alumni-more {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2xs);
        width: fit-content;
        margin: var(--space-md) auto 0;
        padding: var(--space-2xs) 0;
        background: transparent;
        border: none;
        border-bottom: 1px solid var(--accent-color);
        font-family: var(--font-primary);
        font-size: var(--text-sm);
        font-weight: 500;
        letter-spacing: var(--tracking-subtle);
        color: var(--text-primary);
        cursor: pointer;
        transition: border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .sc-alumni-more[hidden] {
        display: none;
    }
    .sc-alumni-more .arrow-icon {
        display: inline-block;
        transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }
}



/* Songcamp Hero CTA-Row: Desktop = Primary-Button + Text-Link nebeneinander. */
.sc-hero-cta-row {
    display: flex;
    gap: var(--space-md);
    align-items: center;
    margin-top: var(--space-md);
}
@media (max-width: 768px) {
    .sc-hero-cta-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
        margin-bottom: var(--space-md); /* Puffer zum Meta-Block darunter */
    }
    /* Früher: Mobile-Umwandlung in Editorial-Link — mittlerweile ist das
       Text-Link-Pattern global Standard für .kb-btn-primary. Override
       entfernt, der Base-Style passt 1:1. */
}

/* KB Standard Editorial Link */
.kb-link {
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--text-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    padding-bottom: 0.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    transition: color 0.4s ease, border-color 0.4s ease;
    cursor: pointer;
}
.kb-link:hover {
    color: var(--accent-color);
    border-color: var(--accent-color);
}
.kb-link .arrow-icon {
    font-size: var(--text-lead);
    transform: translateY(-2px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.kb-link:hover .arrow-icon {
    transform: translate(6px, -2px);
}

/* Fluid Scroll Wrappers */
.sc-block {
    min-height: 100svh;
    padding: clamp(80px, 12vh, 120px) var(--edge) clamp(2rem, 8vh, 6rem);
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
#songcamp .sc-block:nth-child(even) {
    background-color: var(--bg-secondary);
}
.sc-block-inner { width: 100%; max-width: 1440px; margin: auto; }

/* Section Kickers (Dynamic Light/Dark) */
.sc-kicker {
    font-family: var(--font-primary);
    font-size: var(--text-micro);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--accent-color);
    background: rgba(0,0,0,0.03);
    border: 0.5px solid rgba(0,0,0,0.05);
    border-radius: 2px;
    padding: 6px 12px;
    display: inline-block;
    margin-bottom: var(--space-md);
    /* Als direktes Grid-Item (z. B. wenn Parent display:contents hat) bleibt
       die Box auf Content-Breite — sonst wird inline-block zu block-level
       stretched. */
    justify-self: start;
    width: fit-content;
}

/* Für-Wen block background — in external CSS so URL resolves against /style.css,
   which is base-URI-immune (works on file:// and survives pushState routing). */


/* Songcamp Waitlist — darker section backdrop, lighter cards stand out as tiles */
#camp-anfragen {
    background-color: var(--bg-secondary);
}
.sc-camp-card {
    background: var(--bg-primary);
    border: 0.5px solid rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    padding: var(--space-md);
    text-align: left;
    max-width: 400px;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.sc-camp-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}
/* Warteliste-Form — Typo + Felder + Submit + Feedback */
.sc-camp-card-title {
    font-family: var(--font-secondary);
    font-size: var(--text-h2);
    font-weight: 400;
    margin-bottom: var(--space-2xs);
}
.sc-camp-card-meta {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-md);
}
.sc-anfrage-fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-bottom: var(--space-xs);
}
.sc-anfrage-form input {
    width: 100%;
    background: var(--bg-primary);
    border: 0.5px solid rgba(0, 0, 0, 0.12);
    color: var(--text-primary);
    padding: 14px 18px;
    font-size: var(--text-sm);
    font-family: var(--font-primary);
    font-weight: 300;
    border-radius: 2px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}
.sc-anfrage-form input:focus {
    border-color: var(--accent-color);
}
.sc-anfrage-form input:invalid:not(:placeholder-shown) {
    border-color: rgba(180, 80, 80, 0.4);
}
/* Camp-Anfrage Submit — gleiches ruhige Editorial-Pattern wie .kb-link.
   Die volle Width + das left-aligned Verhalten entfällt zugunsten einer
   text-link-Wirkung: der Submit ist Teil des Text-Flows der Card. */
.sc-anfrage-submit {
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--text-primary);
    background: transparent;
    letter-spacing: var(--tracking-subtle);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: 0 0 0.25rem 0;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0;
    cursor: pointer;
    align-self: flex-start;
    transition: color 0.4s ease, border-color 0.4s ease;
}
.sc-anfrage-submit:hover {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
}
.sc-anfrage-submit:disabled {
    opacity: 0.5;
    cursor: default;
}
/* Honeypot-Feld — unsichtbar für Menschen, Bots tappen rein.
   Bewusst NICHT display:none / visibility:hidden — manche Bots ignorieren
   diese Properties. Stattdessen: off-screen positionieren, 1×1px, leere
   Sichtbarkeit. Aria-hidden + tabindex=-1 für A11y/Keyboard-Bypass. */
.honeypot-field {
    position: absolute;
    left: -10000px;
    top: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.sc-anfrage-feedback {
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    line-height: var(--lh-base);
    font-weight: 300;
    color: var(--text-secondary);
    margin: var(--space-xs) 0 0;
    min-height: 1.4em;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.sc-anfrage-feedback.is-visible {
    opacity: 1;
}
.sc-anfrage-feedback.is-error {
    color: rgba(180, 80, 80, 0.85);
}

/* Kontakt — Landing-Hero-Pattern übernommen: Text links, Bild rechts.
   Strukturell 1:1 wie .hero auf der Home — deshalb funktioniert das Bild
   hier exakt wie dort (450×600 Box, 50vw srcset → lädt 1200w/2048w und
   rendert scharf, nicht kompression-verpixelt). */
.kontakt-hero {
    min-height: 100svh;
    padding: 0 var(--edge);
    padding-top: 80px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
}
.kontakt-hero-content {
    flex: 1;
    max-width: 560px;
}
.kontakt-hero-content .kontakt-headline {
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.15;
    margin-bottom: var(--space-md);
}
.kontakt-hero-content .kontakt-lead {
    line-height: 1.5;           /* tighter als --lh-base (1.75) für kurze Zeilen */
    margin: 0 0 0.4rem 0;
    max-width: 480px;
}
.kontakt-hero-content .kontakt-lead:last-of-type {
    margin-bottom: 0;
}
.kontakt-mail {
    margin-top: var(--space-lg);
}
.kontakt-hero-images {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

/* Mobile — mirror der .hero-Mobile-Logik: Bild oben, Text drunter zentriert */
@media (max-width: 992px) {
    .kontakt-hero {
        flex-direction: column;
        justify-content: center;
        padding-top: var(--content-top);
        padding-bottom: var(--space-lg);
        min-height: 100svh;
        max-height: none;
        overflow: visible;
    }
    .kontakt-hero-content {
        flex: none;
        width: 100%;
        max-width: none;
        order: 2;
        text-align: center;
        margin-top: var(--space-lg);
    }
    .kontakt-hero-content .kontakt-lead {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    .kontakt-hero-images {
        flex: none;
        width: 100%;
        justify-content: center;
        order: 1;
    }
    .kontakt-hero .image-wrapper {
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: 4/3;
    }
    .kontakt-hero .portrait-img {
        object-position: center 30%;
    }
}
#songcamp .sc-block:nth-child(even) .sc-kicker {
    color: var(--bg-primary); 
    background: var(--accent-color); 
    border: none;
}

/* Primary CTA — editorial Text-Link-Pattern, identisch zu .kb-link.
   Ehemalige Farbblock-Version wurde zugunsten eines einheitlichen
   ruhigen Editorial-Auftritts abgelöst. */
.kb-btn-primary {
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--text-primary);
    background: transparent;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: 0 0 0.25rem 0;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0;
    letter-spacing: var(--tracking-subtle);
    cursor: pointer;
    transition: color 0.4s ease, border-color 0.4s ease;
}
.kb-btn-primary:hover {
    color: var(--accent-color);
    border-color: var(--accent-color);
}
.kb-btn-primary .arrow-icon {
    font-size: var(--text-lead);
    transform: translateY(-2px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.kb-btn-primary:hover .arrow-icon {
    transform: translate(6px, -2px);
}

/* Base Coordinates (Desktop) */












/* Lock word when hovering exactly over it */


@keyframes mmFloat {
    0%   { transform: translate(-50%, -50%); }
    100% { transform: translate(-50%, calc(-50% - 15px)); }
}



.camp-cta .arrow-icon {
    font-size: var(--text-body);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.camp-cta:hover .arrow-icon {
    transform: translateX(8px);
}

/* Visibility Trigger States (Triggered by standard IntersectionObserver) */
.home-camp-section.is-visible .camp-cta {
    opacity: 1;
    transform: translateY(0);
}

/* Mobile Immersive Camp Overrides */
@media (max-width: 992px) {
    
    
    
    
    /* Focused Toggles positioned perfectly centrally below Songcamp */
    
    
    
    /* Shared centralized play zone: Since JS mutually excludes opacity, W and S words can elegantly overlap their physical space! */
    
    
    
    
    .sc-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
    /* Songcamp Hero Meta-Spalte: auf Mobile zentriert statt Desktop-rechts.
       width 100% + align-self stretch, damit die Box den vollen Content-Raum
       einnimmt und ihre Kinder (7 Tage, max 6 Personen, …) via text-align
       mittig ausgerichtet werden. align-items: center zentriert die inneren
       flex-Items. */
    #sc-hero-block .sc-grid > div[style*="text-align: right"] {
        text-align: center !important;
        align-items: center !important;
        align-self: stretch !important;
        width: 100% !important;
    }
    
    .sc-alumni-grid { grid-template-columns: 1fr; }
    
    
    /* Analog zu .snap-block: großzügige min-height, Content mittig,
       viel Atem. Desktop-100vh-Ästhetik auf Mobile ohne den Zwang. */
    .sc-block {
        min-height: 80svh;
        justify-content: center;
        padding: var(--space-xl) var(--edge);
    }
    .sc-block--full {
        min-height: 100svh;
    }
    .page-section > .sc-block:first-child {
        padding-top: var(--content-top);
        padding-bottom: var(--space-xl);
        min-height: 90svh;
    }

    /* Songcamp-Hero auf Mobile: Content rückt höher, damit der zweite CTA
       („Wie es läuft") komfortabel im Viewport sitzt. Kein künstlicher
       Stretch der Headline-Col mehr — col1 fließt natürlich, Meta-Box
       folgt direkt darunter mit editorial Luft. */
    .page-section > #sc-hero-block.sc-block:first-child {
        min-height: 100svh;
        padding-top: 7rem;
    }
    #sc-hero-block .sc-grid {
        display: flex;
        flex-direction: column;
        gap: var(--space-lg);
    }
    /* Meta-Box braucht oben + unten Luft zur col1 und zum nächsten sc-block. */
    #sc-hero-block .sc-grid > div:nth-child(2) {
        margin-top: var(--space-lg);
        margin-bottom: var(--space-lg);
    }

}

/* Mobile: 3 Karten untereinander via flex-column. Gap steuert den Abstand,
   keine margin-Tricks mehr nötig. */
@media (max-width: 992px) {
    .entry-grid {
        flex-direction: column;
        gap: var(--space-lg);
    }
}



.home-camp-section:hover .camp-img {
    filter: brightness(1) saturate(1);
    transform: scale(1.02);
}

/* Home Camp Responsive */
@media (max-width: 992px) {
    .home-camp-section {
        height: auto;
        display: block; /* Break out of 100vh constrain on mobile */
    }
    
    
    
}

/* Songcamps Styling */












@media (max-width: 992px) {
    
    
    
}

/* Footer Styles */
.site-footer {
    background-color: var(--bg-primary);
    padding: clamp(5rem, 8vh, 8rem) var(--edge) var(--space-sm);
    position: relative;
    z-index: 10;
    height: 100svh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
.footer-container {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.footer-container {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.footer-cta {
    margin-bottom: auto; /* pushes grid down */
    max-width: 680px;
    text-align: left;
}
.footer-cta h2 {
    font-family: var(--font-secondary);
    font-size: var(--text-h1);
    font-weight: 400;
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    margin-bottom: var(--space-sm);
    color: var(--text-primary);
}
.footer-cta h2 em {
    color: var(--accent-color);
}
.footer-cta p {
    font-family: var(--font-primary);
    font-size: var(--text-body);
    line-height: var(--lh-base);
    font-weight: 300;
    color: var(--text-primary);
    max-width: 560px;
    margin: 0;
    text-align: left;
}
/* Footer-CTA — gleiches Editorial-Pattern wie .kb-link.
   Früher mit Accent-Border + Weight 500, jetzt bewusst zurückgenommen. */
.footer-cta-link {
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--text-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    margin-top: var(--space-md);
    padding-bottom: 0.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    letter-spacing: var(--tracking-subtle);
    transition: color 0.4s ease, border-color 0.4s ease;
}
.footer-cta-link:hover {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
}
.footer-cta-link .arrow-icon {
    font-size: var(--text-lead);
    transform: translateY(-2px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.footer-cta-link:hover .arrow-icon {
    transform: translate(6px, -2px);
}
.footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-md);
}
.footer-col h3 {
    font-size: var(--text-sm);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: var(--tracking-subtle);
    margin-bottom: var(--space-sm);
}
.footer-col p {
    font-size: var(--text-sm);
    line-height: var(--lh-base);
    font-weight: 300;
    margin-bottom: var(--space-xs);
}


.footer-nav {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    row-gap: 0;
    column-gap: var(--space-md);
    padding: 0;
    margin: 0;
}
.footer-nav li {
    font-size: var(--text-sm); /* matcht .footer-col p — line-height 1.7 bezieht sich sonst auf die ererbten 16px */
    line-height: var(--lh-base);
}
.footer-nav a {
    font-size: var(--text-sm);
    font-weight: 300;
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.3s;
}
.footer-nav a:hover {
    color: var(--accent-color);
}
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--bg-secondary);
    padding-top: var(--space-sm);
    padding-bottom: 0; /* Removed internal bottom buffer */
    opacity: 0.5;
}
.footer-bottom p {
    font-size: var(--text-sm);
    line-height: var(--lh-base);
    font-weight: 300;
    margin: 0;
}
.footer-legal-links {
    display: flex;
    gap: var(--space-md);
}
.footer-legal-links a {
    font-size: var(--text-sm);
    font-weight: 300;
    line-height: var(--lh-base);
    color: inherit;
    text-decoration: none;
    transition: color 0.3s;
}
.footer-legal-links a:hover {
    color: var(--accent-color);
}

/* Klabautermann-Only-Footer auf Mobile. Desktop-Default hidden. */
.footer-logo-mobile {
    display: none;
}
/* Desktop: Mobile-Bar komplett versteckt */
.footer-mobile-bar {
    display: none;
}

/* Tablet (≤992px): Footer wächst mit Inhalt, CTA-Headline kleiner,
   Adressen-Grid auf 2 Spalten. */
@media (max-width: 992px) {
    .site-footer { height: auto; min-height: 100svh; padding: var(--space-xl) var(--edge) var(--space-md); }
    .footer-cta { margin-bottom: var(--space-xl); }
    .footer-cta h2 { font-size: var(--text-h2); }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-lg); margin-bottom: var(--space-lg); }
}

/* Phone (≤768px): CTA oben, Studio-Adressen als kleine zweispaltige
   Info-Zeile darunter, Klabautermann am Fuß. Navigation + Copyright
   bleiben hidden — Navi erreicht man über das Burger-Menü. */
@media (max-width: 768px) {
    .footer-cta { margin-bottom: auto; }
    .footer-bottom { display: none; }
    /* Adressen-Grid editorial-mini: 2 Spalten, kleine Typo, viel Atem */
    .footer-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-md);
        margin: 0 0 var(--space-md) 0;
    }
    .footer-grid .footer-col:last-child {
        display: none; /* Navigation-Col auf Mobile aus */
    }
    .footer-col--desktop-only {
        display: none;
    }
    .footer-col h3 {
        font-size: var(--text-micro);
        font-weight: 600;
        letter-spacing: var(--tracking-wide);
        color: var(--accent-color);
        text-transform: uppercase;
        margin-bottom: var(--space-2xs);
    }
    .footer-col p {
        font-size: var(--text-sm);
        line-height: var(--lh-base);
        font-weight: 300;
        color: var(--text-secondary);
        margin-bottom: 0;
    }
    .footer-logo-mobile {
        display: block;
        width: 42px;
        height: auto;
        opacity: 1;
    }
    /* Mobile-Bar: Logo links, Instagram-Icon rechts, auf gleicher Baseline */
    .footer-mobile-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: var(--space-md);
    }
    .footer-mobile-logo-link {
        display: inline-flex;
        line-height: 0; /* entfernt Baseline-Padding unter dem img */
    }
    .footer-mobile-instagram {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--text-primary);
        opacity: 0.7;
        transition: opacity 0.4s ease, color 0.4s ease;
        padding: 6px; /* Touch-Target: SVG 24px + 12px Padding = 36px */
        margin: -6px; /* Padding kompensieren, damit rechtsbündig */
    }
    .footer-mobile-instagram:hover {
        opacity: 1;
        color: var(--accent-color);
    }
}
/* ======================================================================
   EDITORIAL SYSTEM (SUBPAGES)
   ====================================================================== */


.editorial-title {
    font-family: var(--font-secondary);
    font-size: var(--text-h2);
    font-weight: 400;
    line-height: var(--lh-tight);
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
    letter-spacing: var(--tracking-tight);
}

/* Editorial CTA — zentrierter Text-Block (Kontakt-Hero, Footer-CTA etc.).
   Als echte Klasse statt reiner Inline-Styles: robuster gegenüber GSAP
   Page-Transitions, die .snap-block-inner direkt animieren. */

.editorial-cta .editorial-title,
.editorial-cta .editorial-lead,
.editorial-cta .editorial-sub {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* Editorial Prices — Preis-Sections auf Produktion / Session / Lab.
   Gleiche Defensiv-Strategie wie .editorial-cta — keine Abhängigkeit von
   Inline-Styles, stabil gegen Transitions. */
.editorial-prices {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 600px;
}
.editorial-prices .editorial-title,
.editorial-prices .editorial-lead,
.editorial-prices .editorial-sub,
.editorial-prices .editorial-desc {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* Editorial Split Image — Image-Container in editorial-split Layout.
   Inline-Style `text-align: center` hart als Klasse festgezurrt. */
.editorial-split-img {
    text-align: center;
}
.editorial-lead {
    font-family: var(--font-primary);
    font-size: var(--text-body);
    line-height: var(--lh-base);
    font-weight: 300;
    color: var(--text-primary);
    max-width: 680px;
}
/* Editorial Flowing Sequential List */


.bg-secondary .editorial-item {
    border-top: 1px solid rgba(0,0,0,0.06);
}
.editorial-num {
    font-family: var(--font-primary);
    font-size: var(--text-micro);
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
    color: var(--accent-color);
    text-transform: uppercase;
}
.editorial-sub {
    font-family: var(--font-primary);
    font-size: var(--text-micro);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--accent-color);
    background: rgba(0, 0, 0, 0.03);
    border: 0.5px solid rgba(0, 0, 0, 0.05);
    border-radius: 2px;
    padding: 6px 12px;
    display: inline-block;
    margin-bottom: var(--space-sm);
}
.editorial-desc {
    font-family: var(--font-primary);
    font-size: var(--text-body);
    line-height: var(--lh-base);
    font-weight: 300;
    color: var(--text-primary);
    max-width: 680px;
}
/* Editorial Split (Quiet Image/Text layout).
   margin-top: 0 als Default — alle aktuellen Verwendungen sitzen in
   eigenen .snap-block-Containern (flex-center, 100svh), die das Spacing
   bereits regeln. Und: Inline-Styles sind HIER nicht sicher, weil GSAP's
   clearProps nach Page-Transitions .snap-block-inner's style-Attribut
   komplett leert (slideSelectors umfasst diese Klasse). */
.editorial-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    align-items: center;
    margin-top: 0;
}
/* Hero-Variante: Text oben links statt vertikal zentriert. */
.editorial-split.editorial-split--hero {
    align-items: start;
}
.editorial-split.reverse .editorial-split-text {
    order: 2;
}
.editorial-split.reverse .editorial-split-img {
    order: 1;
}
.editorial-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 4/5;
    /* Soft analog grading to match the editorial "vibe" */
    filter: brightness(0.95) contrast(0.9) saturate(0.85) sepia(0.05);
}
.editorial-link {
    font-family: var(--font-primary);
    font-size: var(--text-body);
    font-weight: 500;
    letter-spacing: var(--tracking-subtle);
    color: var(--text-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding-bottom: var(--space-2xs);
    border-bottom: 1px solid var(--accent-color);
    transition: color 0.4s ease, border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    margin-top: var(--space-md);
}
.editorial-link:hover {
    color: var(--accent-color);
    border-color: var(--accent-color);
}
/* Full Bleed Cinematic Insert */

.cinematic-img {
    width: 100%;
    height: 60vh;
    object-fit: cover;
    filter: brightness(0.9) contrast(0.95) saturate(0.85) sepia(0.05);
}

/* Observer Animations Native Classes */
.scroll-anim {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s ease-out, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.is-visible .scroll-anim,
.is-visible.scroll-anim {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================================================
   SUBTILE MOTION-LAYER — ANIMATION-FIRST (2026-04 Rewrite).
   =========================================================================
   WICHTIG: Elemente sind STANDARDMÄSSIG SICHTBAR. Die Reveal-Animationen
   sind ADDITIV — sie werden durch `.is-revealed` getriggert und laufen
   autonom über @keyframes. Wenn der IntersectionObserver aus irgendeinem
   Grund nicht feuert (SPA-Section-Swaps, Browser-Race-Conditions), bleibt
   der Content sichtbar. Kein „missing images"-Bug mehr möglich.

   Einziger aktiver Motion-Layer: Section-Enter Stagger
   (Kicker → Headline → Lead, ~500 ms gestaffelt, siehe @keyframes unten).

   (Cinematic Image Reveal via clip-path und Magnetic-Button-Pull wurden
    beide entfernt — ersteres wegen Visible-Flash-Bug, zweiteres zugunsten
    eines einheitlichen ruhigen Editorial-Text-Link-Patterns für alle CTAs.)
   ========================================================================= */

/* 1. Section-Enter Stagger — animation-first.
   Kicker, Headline, Lead sind standardmäßig voll sichtbar.
   `.is-revealed` triggert eine kurze Fade-Up-Animation. */
@keyframes kb-stagger-reveal {
    0% {
        opacity: 0;
        transform: translate3d(0, 10px, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
.snap-block.is-revealed .sc-kicker,
.sc-block.is-revealed .sc-kicker {
    animation: kb-stagger-reveal 550ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0ms;
}
.snap-block.is-revealed .editorial-title,
.sc-block.is-revealed .editorial-title,
.snap-block.is-revealed .editorial-sub,
.sc-block.is-revealed .editorial-sub {
    animation: kb-stagger-reveal 550ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 120ms;
}
.snap-block.is-revealed .editorial-lead,
.sc-block.is-revealed .editorial-lead {
    animation: kb-stagger-reveal 550ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 220ms;
}

/* Magnetic-Button-Effekt wurde entfernt, nachdem alle CTAs auf das ruhige
   Editorial-Text-Link-Pattern umgestellt wurden — Magnetic-Pull bei
   Text-Links wirkt unruhig und widerspricht dem Brand-Anspruch. */

/* Reduced-Motion: Animationen aus — Content ist sowieso schon sichtbar. */
@media (prefers-reduced-motion: reduce) {
    .cinematic-img.is-revealed,
    .snap-block.is-revealed .sc-kicker,
    .sc-block.is-revealed .sc-kicker,
    .snap-block.is-revealed .editorial-title,
    .sc-block.is-revealed .editorial-title,
    .snap-block.is-revealed .editorial-sub,
    .sc-block.is-revealed .editorial-sub,
    .snap-block.is-revealed .editorial-lead,
    .sc-block.is-revealed .editorial-lead {
        animation: none !important;
    }
}

/* Mobile Breakdowns */
@media (max-width: 992px) {
    
    .editorial-split {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    .editorial-split.reverse .editorial-split-text,
    .editorial-split.reverse .editorial-split-img {
        order: unset; /* Drop the reversal on mobile */
    }
    .editorial-split-text[style*="sticky"] {
        position: static !important; /* Sticky macht auf Mobile keinen Sinn im 1-col-Flow */
        top: auto !important;
    }
    /* Team-Page Mobile: Bio-Zeile („1996 München · Jazzgitarre Köln…") gehört
       unters Portrait, nicht über 4 Textblöcke gestapelt. display:contents
       löst den text-container auf, dann via order die Reihenfolge:
       kicker → role → title → lead → [img] → [bio]. Greift automatisch auf
       Produktion/Sessions ohne Nebenwirkung (dort gibts kein .team-bio). */
    .editorial-split .editorial-split-text {
        display: contents;
    }
    /* display:contents macht alle Kinder zu direkten Grid-Items mit gap: 1rem.
       Inline-Margins der Elemente addieren sich dazu — wir normalisieren sie
       damit der Textfluss natürlich wirkt. */
    .editorial-split .editorial-num {
        margin-bottom: 0 !important; /* inline 1.5rem → sonst 2.5rem vor der Headline */
    }
    .editorial-split .editorial-desc + .editorial-desc {
        margin-top: -0.65rem !important; /* gap 1rem − gewünschte 0.35rem = -0.65rem */
    }
    .editorial-split .editorial-split-img {
        order: 1;
    }
    .editorial-split .team-bio {
        order: 2;
        margin-top: 0.5rem;
    }
    
    .editorial-title {
        font-size: var(--text-h2);
    }
    .cinematic-img {
        height: 40vh;
    }
}

/* 100vh-Pacing-Container (historisch „snap-block" — Scroll-Snap wurde entfernt, Name bleibt) */
.snap-block {
    min-height: 100svh;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 var(--edge);
    box-sizing: border-box;
    position: relative;
}
.snap-block.no-pad {
    padding: 0;
}
.snap-block-inner {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}
.snap-block-inner.full-bleed {
    max-width: none;
    height: 100svh;
    margin-top: 0;
}

/* Zitat- und Preis-Sections kompakter — kurze Textblöcke füllen die volle
   Höhe sonst zu luftig. */
#team-quote.snap-block,
#prod-quote.snap-block {
    min-height: 70svh;
}
#session-price.snap-block {
    min-height: 80svh;
}
/* Sessions-Haltung „Kein Kurs. Kein Workshop. Nur der Song." noch kompakter —
   kurzer Zweizeiler + Lead sitzt optisch mittiger auf 60svh. */
#session-quote.snap-block {
    min-height: 60svh;
}
.snap-block-inner.full-bleed .cinematic-img {
    height: 100svh;
}


/* Production Snap Imaging */
.prod-hero-img {
    aspect-ratio: 3/4;
    height: 75vh;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    display: block;
}
.prod-img {
    aspect-ratio: 4/5;
    height: 70vh;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
}

@media (max-width: 992px) {
    /* Mobile-Ästhetik folgt Desktop: viel Weißraum, Content schwebt mittig.
       Kein starrer 100svh-Zwang — dafür großzügige min-height (80%) +
       generöses Padding + Flex-Center. Kurzer Content → editorial Luft
       oben und unten. Langer Content → Section dehnt sich natürlich aus. */
    .snap-block {
        min-height: 80svh;
        justify-content: center;
        padding: var(--space-xl) var(--edge);
    }
    .page-section > .snap-block:first-child {
        padding-top: var(--content-top);
        padding-bottom: var(--space-xl);
        min-height: 90svh;
    }
    .snap-block--full {
        min-height: 100svh;
    }
    .snap-block-inner.editorial-prices {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    .snap-block-inner.editorial-split {
        gap: var(--space-xs);
        align-items: center !important;
    }
    .snap-block-inner.editorial-split .editorial-title {
        margin-bottom: 0.25rem;
    }
    /* Step-Bilder (Produktion-Schritte) — kompakt, letter-boxed, stehen
       allein in ihren Sections. */
    .prod-img {
        height: auto;
        width: 100%;
        max-height: 45vh;
        object-fit: contain;
    }
    .prod-img--lg {
        max-height: 62vh;
        /* Das Mix-Bild ist portrait — füllt den 4:5-Container vertikal fast
           komplett, ohne Letterbox oben wie bei den landscape-Step-Bildern.
           Dieser Offset simuliert den fehlenden Letterbox, damit die
           obere Kante auf gleicher Höhe sitzt wie bei Step 01–03. */
        margin-top: 3rem;
    }
    /* Hero-Bilder (Sessions + Produktion) — prominenter, gecroppt,
       füllen die Card-Breite ohne Letterboxing. */
    .prod-hero-img {
        width: 100%;
        height: auto;
        aspect-ratio: 4/5;
        max-height: 70vh;
        object-fit: cover;
        object-position: center;
        margin-top: var(--space-md);
    }
    .editorial-quote .editorial-title {
        font-size: var(--text-h2);
    }
}
@media (max-width: 480px) {
    .prod-img {
        max-height: 35vh; /* heavily constrain step images on small screens */
    }
    /* Hero bleibt groß via aspect-ratio; max-height großzügiger als Sicherheits-Cap. */
    .prod-hero-img {
        max-height: 80vh;
    }
    .editorial-quote .editorial-title {
        font-size: var(--text-h3);
    }
}

/* -----------------------------------
   EASTER EGGS / GLOBAL FLOATING COMPS
   ----------------------------------- */
/* ======================================================================
   PROMISE REVEAL SECTION (INTERACTIVE LIGHT NATIVE MASK)
   ====================================================================== */
.section-promise.cursor-active {
    cursor: none;
}
.promise-inner {
    position: relative;
}
.text-reveal {
    position: relative;
    max-width: 680px;
}
.blurred-text {
    position: relative;
    filter: blur(5px);
    opacity: 0.55;
    transition: filter 1.5s ease, opacity 1.5s ease;
    user-select: none;
}
.blurred-text.faded {
    opacity: 0;
    filter: blur(0);
}
.sharp-mask-text {
    opacity: 1; 
}
.reveal-word {
    opacity: 0;
    filter: blur(6px);
    transition: opacity 0.5s ease, filter 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal-word.revealed {
    opacity: 1;
    filter: blur(0);
}
.closing-line {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 2s ease, transform 2s ease;
}
.closing-line.revealed {
    opacity: 1;
    transform: translateY(0);
}
.light-cursor {
    position: fixed;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 100;
    transform: translate(-50%, -50%);
    background: radial-gradient(
      circle,
      rgba(255, 220, 160, 0.22) 0%,
      rgba(255, 210, 140, 0.12) 30%,
      rgba(255, 200, 120, 0.04) 60%,
      transparent 75%
    );
    mix-blend-mode: multiply;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.light-cursor.active {
    opacity: 1;
}
.hint {
    position: absolute;
    right: 0;
    top: calc(var(--space-md) * -1);
    font-size: var(--text-micro);
    letter-spacing: var(--tracking-subtle);
    color: var(--text-secondary);
    font-style: italic;
    transition: opacity 1.2s ease;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
}
.hint::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 1px;
    background: var(--text-secondary);
}
.hint.hidden {
    opacity: 0;
}
@media (hover: none), (max-width: 992px) {
    /* Mobile: Auto-Reveal wort-für-wort (kein Mouse-Follow).
       Blur bleibt aktiv, sharp-mask bleibt overlayed — JS setzt `.revealed`
       sequenziell, wenn die Section in Sicht kommt.
       Nur Maus-spezifische Elemente ausblenden. */
    .light-cursor, .hint {
        display: none !important;
    }
    .section-promise.cursor-active {
        cursor: auto !important;
    }
}

/* ======================================================================
   TOUCH-DEVICE HOVER-RESET
   ----------------------------------------------------------------------
   Auf Geräten ohne Maus-Hover emuliert der Browser :hover beim ersten Tap
   („Sticky Hover"): Elemente bleiben im Hover-Zustand hängen, bis woanders
   getippt wird. Sieht unsauber aus.
   Dieser Block neutralisiert jede Hover-Regel auf den Base-Wert der Klasse
   zurück. Gleiche Spezifität wie das Original → späterer Eintrag gewinnt.
   Kein !important nötig (außer bei Regeln, deren Original !important ist).
   ====================================================================== */
@media (hover: none) {
    /* Navbar / Logo */
    .logo:hover .nav-logo-img { animation: none; }
    .navbar:has(.menu-toggle:hover) .logo { opacity: 1; }

    /* Entry-Cards (Home) */
    .entry-card:hover .entry-img {
        transform: none;
        filter: brightness(0.9) saturate(0.85);
    }
    .entry-card:hover .entry-title { color: var(--text-primary); }
    .entry-card:hover .entry-cta { border-bottom-color: var(--accent-color); }
    .entry-card:hover .entry-cta .arrow-icon { transform: none; }

    /* Menü / Small Links */
    .menu-links a:hover {
        color: var(--text-primary);
        transform: none;
    }
    .small-link:hover { color: var(--text-secondary); }

    /* Generic Buttons */
    
    
    .prod-hero-nav-item:hover {
        transform: none;
        color: var(--text-primary);
    }
    .camp-pointer-link:hover { border-bottom-color: var(--accent-color); }
    .camp-pointer-link:hover .arrow-icon { transform: none; }

    /* Teaser (Home Songcamp) */
    .home-camp-section.teaser:hover .teaser-bg { opacity: 0.35; }
    .teaser-cta:hover { color: rgba(255, 255, 255, 0.45); }
    .teaser-cta:hover .teaser-arrow { width: 20px; transform: none; }

    /* Songcamp-Listen / Pager */
    
    
    
    .sc-alumni-dot:hover {
        color: var(--text-secondary);
        border-color: rgba(0, 0, 0, 0.2);
    }

    /* KB-Links / Primary-Button / Cards — Hover-States auf Touch neutralisieren */
    .kb-link:hover,
    .kb-btn-primary:hover,
    .footer-cta-link:hover,
    .sc-anfrage-submit:hover {
        color: var(--text-primary);
        border-color: rgba(0, 0, 0, 0.15);
    }
    .kb-link:hover .arrow-icon,
    .kb-btn-primary:hover .arrow-icon,
    .footer-cta-link:hover .arrow-icon { transform: translateY(-2px); }
    .sc-camp-card:hover {
        transform: none;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    }

    /* MindMap-Wörter (Klabautermann-Section, auf Mobile eh abgeschaltet) */
    

    /* Camp-CTA (White on Dark) */
    
    .camp-cta:hover .arrow-icon { transform: none; }

    /* Songcamp-Karte: kein Reset nötig — blur/hint existieren nur im
       @media (hover: hover) Scope, matchen auf Touch ohnehin nie. */

    /* Home-Camp Bildbereich */
    .home-camp-section:hover .camp-img {
        filter: brightness(0.9) saturate(0.85);
        transform: none;
    }

    /* Footer */
    .footer-cta-link:hover { border-bottom-color: var(--accent-color); }
    .footer-cta-link:hover .arrow-icon { transform: none; }
    
    .footer-nav a:hover { color: var(--text-primary); }
    .footer-legal-links a:hover { color: inherit; }

    /* Editorial-Link (Subpages) */
    .editorial-link:hover {
        color: var(--text-primary);
        border-color: var(--accent-color);
    }
}