/* 
   Alchemysto.ch - Core Stylesheets
   Design System: Crystalline, Silver-Platinum, Deep Obsidian & Glassmorphism
*/

/* --- Local Fonts --- */
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../fonts/cormorant-garamond-300-latin.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../fonts/cormorant-garamond-300i-latin.woff2') format('woff2');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../fonts/cormorant-garamond-400i-latin.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-latin.woff2') format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/montserrat-latin.woff2') format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}

/* --- Design Tokens & Variables --- */
:root {
    --bg-base: #FAF6EE;
    /* Luxury Ivory base background */
    --bg-surface: rgba(255, 255, 255, 0.75);
    /* Elegant light glass card background */
    --bg-surface-hover: rgba(255, 255, 255, 0.95);
    --border-color: rgba(168, 140, 103, 0.15);
    /* Soft antique gold/bronze border */
    --border-color-hover: rgba(27, 99, 138, 0.4);
    /* Refined teal/blue accent hover */

    --text-primary: #1C1917;
    /* Dark warm charcoal/espresso for crisp luxury typography */
    --text-secondary: #57534E;
    /* Elegant warm slate/stone gray for body text */
    --text-muted: #8C857E;
    /* Taupe/neutral gray for labels and notes */

    --accent-blue: #1B638A;
    /* Deep water sapphire blue */
    --accent-glow: #2F8EB8;
    /* Muted clear sky glow */
    --accent-silver: #78716C;
    /* Dark platinum/stone slate */

    --font-serif: 'Cormorant Garamond', serif;
    --font-sans: 'Inter', sans-serif;
    --font-montserrat: 'Montserrat', sans-serif;

    --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-fast: all 0.2s ease;

    --max-width: 1200px;
    --header-height: 80px;

    /* --- Automatically Refactored Design Tokens --- */
    --black: #000000;
    --dark-obsidian: #040609;
    --dark-coal: #0c0806;
    --deep-water: #0f3f5c;
    --dark-charcoal: #1e1c1a;
    --dark-espresso-1: #252321;
    --dark-espresso-2: #262320;
    --dark-espresso-3: #2a2826;
    --mid-sapphire: #2a7ca7;
    --dark-espresso-4: #2e2b27;
    --dark-walnut-1: #312e2a;
    --dark-walnut-2: #322f2b;
    --dark-walnut-3: #34312d;
    --dark-walnut-4: #3a3733;
    --light-sapphire: #3eadd6;
    --warm-stone: #6b635a;
    --gold-medium: #a6854e;
    --cool-sand: #a8a29e;
    --gold-border: #b8955f;
    --parchment: #c5b092;
    --pale-blue: #cbd5e1;
    --warm-linen: #d5c29d;
    --cream: #dfcfb7;
    --light-gray: #e5e5e5;
    --warm-white-1: #eae8e4;
    --warm-white-2: #ebe6dc;
    --warm-white-3: #efebe4;
    --warm-white-4: #f0eae1;
    --warm-white-5: #f2ede5;
    --neutral-white: #f5f5f5;
    --ivory-1: #f7f2ea;
    --ivory-2: #f7f4ef;
    --ivory-3: #faf7f2;
    --ivory-4: #fcf9f2;
    --ivory-5: #fdfaf6;
    --gold-dark: #a88c67;
    --gold-darker: #6d5b43;
    --gold-light: #c9a97c;
    --green: #10b981;
    --red: #ef4444;
    --white: #ffffff;
}

/* --- Reset & Base --- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    background-color: var(--bg-base);
    color: var(--text-primary);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
}

body {
    overflow-x: hidden;
    line-height: 1.6;
    background: radial-gradient(circle at 50% 0%, var(--white) 0%, var(--bg-base) 100%);
    background-attachment: fixed;
}

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

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

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

/* --- Layout Utilities --- */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 2rem;
}

.section {
    padding: 8rem 0;
    position: relative;
}

@media (max-width: 768px) {
    .section {
        padding: 5rem 0;
    }
}

/* --- Typography --- */
.title-serif {
    font-family: var(--font-serif);
    font-weight: 400;
    letter-spacing: 0.03em;
}

.text-gradient-silver {
    background: linear-gradient(135deg, var(--text-primary) 30%, var(--accent-silver) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gradient-blue {
    background: linear-gradient(135deg, var(--accent-blue) 30%, var(--deep-water) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* --- Glassmorphism Component --- */
.glass-panel {
    background: var(--bg-surface);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-panel:hover {
    transform: translateY(-5px);
    border-color: rgba(27, 99, 138, 0.25);
    box-shadow: 0 20px 40px rgba(168, 140, 103, 0.12),
        0 1px 3px rgba(0, 0, 0, 0.02);
    background-color: rgba(255, 255, 255, 0.95);
}

/* --- Header & Navigation --- */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    z-index: 1000;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: transparent !important;
    backdrop-filter: blur(100px) !important;
    -webkit-backdrop-filter: blur(100px) !important;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: backdrop-filter;
    transition: var(--transition-smooth);
}

.header.scrolled {
    height: 70px;
    background: transparent !important;
    backdrop-filter: blur(100px) !important;
    -webkit-backdrop-filter: blur(100px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: none;
}

/* Navigation Style Toggle for Dark Hero */
.header.dark-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.header.dark-header .logo-text {
    color: rgba(255, 255, 255, 0.8);
}

/* .header.dark-header .nav-link Überschreibungen entfernt, um globales Gold zu erben */

.header.dark-header.scrolled {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.header.dark-header.scrolled .logo-text {
    color: var(--text-secondary);
}

/* .header.dark-header.scrolled .nav-link Überschreibungen entfernt, um globales Gold zu erben */

/* Hamburger-Farbüberschreibungen entfernt, um globales Gold zu verwenden */


.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: relative;
}

.header-container nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.logo-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
    z-index: 1100;
}

.header-logo-img {
    height: 24px;
    width: auto;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(75%) sepia(21%) saturate(981%) hue-rotate(334deg) brightness(91%) contrast(87%);
    transition: filter 0.3s ease, transform 0.3s ease;
}

.header-logo-img:hover {
    filter: brightness(0) saturate(100%) invert(80%) sepia(20%) saturate(1100%) hue-rotate(334deg) brightness(96%) contrast(90%);
}

@media (max-width: 768px) {
    .header-logo-img {
        height: 20px;
    }
}

.logo-text {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--text-primary);
}

.header-logo-text {
    font-family: var(--font-serif);
    font-size: 1.08rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold-dark) 50%, var(--gold-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: filter 0.3s ease;
    display: inline-block;
}

.header-logo-text:hover {
    filter: brightness(1.15);
}

/* --- Mobile: Seitenname unter dem Logo --- */
.header-page-name {
    display: none;
}

.nav-menu {
    display: flex;
    gap: 0;
    list-style: none;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
}

.nav-link {
    font-size: clamp(0.55rem, 0.75vw, 0.8rem);
    font-weight: 500;
    letter-spacing: 0.12em;
    background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold-dark) 50%, var(--gold-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--gold-light);
    /* Fallback */
    position: relative;
    padding: clamp(0.4rem, 0.5vw, 0.6rem) clamp(0.4rem, 0.6vw, 0.85rem);
    margin: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    border-radius: 6px;
    transition: color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        font-size 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        letter-spacing 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        font-weight 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        text-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        -webkit-text-fill-color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Pseudo-element containing the maximum scale text to reserve layout space and prevent shifts */
.nav-link::after {
    content: attr(data-text);
    display: block;
    font-weight: 750;
    font-size: calc(clamp(0.55rem, 0.75vw, 0.8rem) * 1.15);
    letter-spacing: calc(0.12em * 1.15);
    height: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
    speak: none;
}

.nav-link:hover,
.nav-link.active-page {
    font-size: calc(clamp(0.55rem, 0.75vw, 0.8rem) * 1.15);
    letter-spacing: calc(0.12em * 1.15);
    font-weight: 750;
}

.cta-button {
    background: var(--text-primary);
    border: 1px solid var(--text-primary);
    color: var(--bg-base);
    padding: 0.75rem 1.75rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    transition: var(--transition-smooth);
    box-shadow: 0 4px 15px rgba(28, 25, 23, 0.12);
}

.cta-button:hover {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--text-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(28, 25, 23, 0.08);
}

/* Mobile Hamburger */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 6px;
    z-index: 1100;
}

.hamburger span {
    display: block;
    width: 25px;
    height: 2px;
    background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold-dark) 50%, var(--gold-light) 100%);
    transition: var(--transition-smooth);
}

.hamburger:hover span {
    filter: brightness(1.15);
}


@media (max-width: 1100px) {
    .header-container nav {
        position: static;
        transform: none;
    }

    .logo-link {
        flex-direction: column;
        align-items: center;
        gap: 0.1rem;
    }

    .header-page-name {
        display: block;
        font-family: var(--font-montserrat);
        font-size: 0.6rem;
        font-weight: 400;
        letter-spacing: 0.18em;
        color: rgba(255, 255, 255, 0.5);
        text-transform: uppercase;
        line-height: 1;
        text-align: center;
        -webkit-text-fill-color: rgba(255, 255, 255, 0.5);
    }

    .nav-menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        /* 100% deckender Hintergrund – kein Durchscheinen */
        background: var(--bg-base);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0;
        padding: 0;
        margin: 0;
        z-index: 1000;
        /* Slide + Fade Animation */
        opacity: 0;
        transform: translateY(-1.5rem);
        pointer-events: none;
        transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
            transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .nav-menu.active {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    .nav-link {
        font-size: clamp(1.1rem, 3.5vw, 1.6rem);
        font-weight: 500;
        letter-spacing: 0.15em;
        padding: clamp(1rem, 2.5vh, 1.8rem) 2rem;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 100%;
        border-radius: 0;
        /* Goldene Farbe und Verlauf der Desktop-Version erben */
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
            color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
            text-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
            -webkit-text-fill-color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

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

    .nav-link:hover {
        transform: scale(1.1);
        /* Behalte die Standard-Schriftgrösse und Abstände bei, um Layout-Verschiebungen zu verhindern */
        font-size: clamp(1.1rem, 3.5vw, 1.6rem);
        letter-spacing: 0.15em;
        font-weight: 500;
    }

    .nav-link.active-page {
        transform: scale(1.1);
        /* Behalte die Standard-Schriftgrösse und Abstände bei, um Layout-Verschiebungen zu verhindern */
        font-size: clamp(1.1rem, 3.5vw, 1.6rem);
        letter-spacing: 0.15em;
        font-weight: 500;
    }

    .hamburger {
        display: flex;
    }

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

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

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

    .header-cta {
        display: none;
    }
}

/* --- Hero Carousel Section --- */
.hero-carousel-section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: calc(var(--header-height) + 2rem);
    padding-bottom: 4rem;
    position: relative;
    overflow: hidden;
}

.carousel-section-header {
    margin-bottom: 3rem;
    text-align: center;
}

.carousel-main-title {
    font-size: 3.5rem;
    font-weight: 300;
    line-height: 1.2;
}

@media (max-width: 768px) {
    .carousel-main-title {
        font-size: 2.2rem;
    }

    .hero-carousel-section {
        min-height: auto;
        padding-top: calc(var(--header-height) + 1.5rem);
        padding-bottom: 2rem;
    }
}

.carousel-container {
    position: relative;
    height: 580px;
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 50px rgba(168, 140, 103, 0.15);
}

@media (max-width: 992px) {
    .carousel-container {
        height: 520px;
    }
}

@media (max-width: 768px) {
    .carousel-container {
        height: 480px;
        border-radius: 12px;
    }
}

.carousel-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    opacity: 0;
    transform: scale(1.03);
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1;
    pointer-events: none;
}

.carousel-slide.active {
    opacity: 1;
    transform: scale(1);
    z-index: 2;
    pointer-events: auto;
}

.slide-content {
    padding: 5rem 4rem 4rem 4rem;
    width: 100%;
    max-width: 700px;
    background: linear-gradient(360deg, rgba(4, 6, 9, 0.98) 0%, rgba(4, 6, 9, 0.7) 60%, rgba(4, 6, 9, 0) 100%);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    transform: translateY(30px);
    opacity: 0;
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s, opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}

.carousel-slide.active .slide-content {
    transform: translateY(0);
    opacity: 1;
}

@media (max-width: 768px) {
    .slide-content {
        padding: 3rem 1.5rem 2rem 1.5rem;
        gap: 0.85rem;
    }
}

.slide-tag {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    color: var(--accent-blue);
    text-transform: uppercase;
}

.slide-title {
    font-size: 2.5rem;
    line-height: 1.2;
    color: var(--white);
}

@media (max-width: 992px) {
    .slide-title {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .slide-title {
        font-size: 1.6rem;
    }
}

.slide-description {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 300;
    line-height: 1.6;
    margin-bottom: 0.5rem;
}

@media (max-width: 768px) {
    .slide-description {
        font-size: 0.95rem;
        line-height: 1.5;
    }
}

/* Controls */
.carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: var(--transition-smooth);
    cursor: pointer;
}

.carousel-control:hover {
    background: rgba(27, 99, 138, 0.1);
    border-color: var(--accent-blue);
    color: var(--accent-blue);
    box-shadow: 0 0 15px rgba(27, 99, 138, 0.15);
}

.carousel-control.prev {
    left: 2rem;
}

.carousel-control.next {
    right: 2rem;
}

@media (max-width: 768px) {
    .carousel-control {
        width: 42px;
        height: 42px;
    }

    .carousel-control.prev {
        left: 0.75rem;
    }

    .carousel-control.next {
        right: 0.75rem;
    }
}

/* Indicators */
.carousel-indicators {
    position: absolute;
    bottom: 3rem;
    right: 4rem;
    display: flex;
    gap: 0.75rem;
    z-index: 10;
}

.carousel-indicators .indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(28, 25, 23, 0.2);
    border: none;
    transition: var(--transition-smooth);
    cursor: pointer;
}

.carousel-indicators .indicator:hover {
    background: rgba(28, 25, 23, 0.4);
}

.carousel-indicators .indicator.active {
    background: var(--accent-blue);
    box-shadow: 0 0 10px rgba(27, 99, 138, 0.3);
    width: 28px;
    border-radius: 6px;
}

@media (max-width: 768px) {
    .carousel-indicators {
        right: 50%;
        transform: translateX(50%);
        bottom: 1.5rem;
    }
}

/* --- Book Introduction Section --- */
.book-intro-section {
    padding: 8rem 0;
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--border-color);
}

@media (max-width: 768px) {
    .book-intro-section {
        padding: 5rem 0;
    }
}

.hero-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
}

@media (max-width: 992px) {
    .hero-grid {
        text-align: center;
    }
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 800px;
}

@media (max-width: 992px) {
    .hero-content {
        align-items: center;
    }
}

.hero-tagline {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: var(--accent-blue);
    margin-bottom: 1.5rem;
    text-transform: uppercase;
}

.hero-title {
    font-size: 4.5rem;
    line-height: 1.1;
    margin-bottom: 2rem;
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 2.8rem;
    }
}

.hero-description {
    font-size: 1.15rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin-bottom: 3rem;
    font-weight: 300;
}

.hero-actions {
    display: flex;
    gap: 1.5rem;
}

@media (max-width: 480px) {
    .hero-actions {
        flex-direction: column;
        width: 100%;
    }
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent-blue), var(--mid-sapphire));
    color: var(--white);
    padding: 1rem 2.5rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    box-shadow: 0 4px 20px rgba(27, 99, 138, 0.25);
    transition: var(--transition-smooth);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(27, 99, 138, 0.4);
}

.btn-secondary {
    border: 1px solid rgba(28, 25, 23, 0.15);
    color: var(--text-primary);
    padding: 1rem 2.5rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    background: rgba(255, 255, 255, 0.5);
    transition: var(--transition-smooth);
}

.btn-secondary:hover {
    background: rgba(28, 25, 23, 0.05);
    border-color: rgba(28, 25, 23, 0.3);
    transform: translateY(-2px);
}



/* --- Section Headers --- */
.section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 5rem auto;
}

.section-tag {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    color: var(--accent-blue);
    text-transform: uppercase;
    margin-bottom: 1rem;
    display: block;
}

.section-title {
    font-size: 3rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
    .section-title {
        font-size: 2.2rem;
    }
}

.header-tile {
    padding: 2rem;
    margin-bottom: 2rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
}

.header-tile:hover {
    background: rgba(255, 255, 255, 0.75);
    border-color: rgba(27, 99, 138, 0.35);
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(168, 140, 103, 0.08);
}

.collapsible-section.open .header-tile {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(27, 99, 138, 0.5);
    box-shadow: 0 20px 50px rgba(168, 140, 103, 0.12);
}

.header-tile-text {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
}

.header-tile .section-tag {
    margin-bottom: 0;
}

.header-tile .section-title {
    margin-bottom: 0;
}

/* Accordion Chevron & Collapsible content animation */
.tile-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-dark);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.2, 1), color 0.4s ease, background-color 0.4s ease;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(168, 140, 103, 0.05);
    flex-shrink: 0;
}

.tile-chevron svg {
    width: 24px;
    height: 24px;
    stroke-width: 2px;
}

.header-tile:hover .tile-chevron {
    color: var(--parchment);
    background: rgba(168, 140, 103, 0.15);
}

.collapsible-section.open .tile-chevron {
    transform: rotate(180deg);
    color: var(--white);
    background: var(--gold-dark);
}

.collapsible-content-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.8s cubic-bezier(0.16, 1, 0.2, 1);
    overflow: hidden;
}

.collapsible-section.open .collapsible-content-wrapper {
    grid-template-rows: 1fr;
}

.collapsible-content-inner {
    min-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: visibility 0.8s step-end;
}

.collapsible-section.open .collapsible-content-inner {
    visibility: visible;
    transition: visibility 0s step-start;
}

#credo .header-tile {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}


.section-subtitle {
    font-size: 1.1rem;
    color: var(--text-secondary);
    font-weight: 300;
}

/* --- Myths & Prejudices (Interactive) --- */
.myths-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
}

.myth-card {
    padding: 2.5rem;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.myth-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.myth-number {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.1em;
}

.myth-badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    background: rgba(239, 68, 68, 0.1);
    color: var(--red);
    border: 1px solid rgba(239, 68, 68, 0.2);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.myth-title {
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
    line-height: 1.25;
}

.myth-reveal-btn {
    margin-top: auto;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--accent-blue);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: var(--transition-fast);
}

.myth-reveal-btn svg {
    transition: transform 0.3s ease;
}

.myth-card:hover .myth-reveal-btn svg {
    transform: translateX(5px);
}

/* Modal / Slide-up answer panel styling inside card */
.myth-answer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--ivory-4);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transform: translateY(101%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 10;
}

.myth-card.active {
    grid-column: 1 / -1;
    min-height: 580px;
    z-index: 20;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.myth-card.active:hover {
    transform: translateY(0);
    box-shadow: 0 15px 40px rgba(168, 140, 103, 0.08);
}

.myth-card.active .myth-answer {
    transform: translateY(0);
    justify-content: flex-start;
}

.answer-badge {
    align-self: flex-start;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    background: rgba(16, 185, 129, 0.1);
    color: var(--green);
    border: 1px solid rgba(16, 185, 129, 0.2);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.answer-text {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.answer-close {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* --- Science Grid (Cellular Effect) --- */
.science-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

/* --- Physics Section Layout --- */
.physics-section {
    padding-top: 140px;
    padding-bottom: 80px;
}

/* --- Praxis Section Layout --- */
.praxis-section {
    padding-top: 140px;
    padding-bottom: 80px;
}

.physics-header-container {
    text-align: center;
    margin-bottom: 5rem;
}

.physics-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 750px;
    margin: 0 auto;
}

.physics-card {
    background: var(--white);
    padding: 3rem 2.5rem;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    border: 1px solid var(--border-color);
}

.physics-icon {
    background: rgba(27, 99, 138, 0.06);
    color: var(--accent-blue);
    padding: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.physics-card-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
}

.physics-card-text {
    font-size: 1.05rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
    max-width: 90%;
}

@media (max-width: 768px) {

    .physics-card {
        padding: 2.5rem 1.5rem;
    }
}

/* --- Physics Main Tile & Sub-tiles Wrapper Styles --- */
.physics-main-tile {
    margin-bottom: 2rem;
    background: rgba(255, 255, 255, 0.45);
}

.physics-main-tile .physics-title {
    font-size: clamp(2rem, 3.5vw + 1rem, 3.5rem);
    margin-bottom: 0.75rem;
    line-height: 1.2;
}

.physics-main-tile .physics-subtitle {
    font-size: clamp(0.95rem, 1.2vw + 0.75rem, 1.25rem);
    max-width: 700px;
    margin: 0 auto;
    font-weight: 300;
}

/* Physics sub-tiles wrapper (CSS grid accordion animation) */

.physics-sub-tiles-wrapper.open {
    grid-template-rows: 1fr;
}

/* --- Physics Main Tile 2 Cleaning Methods Styling --- */
.cleaning-methods-list {
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.method-item {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 3rem;
}

.method-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.method-name {
    font-family: var(--font-serif);
    font-size: clamp(1.4rem, 2vw + 0.8rem, 1.85rem);
    color: var(--accent-blue);
    margin-bottom: 1rem;
    font-weight: 500;
}

.table-comparison-wrapper {
    margin-top: 2rem;
}

@media (max-width: 768px) {
    .physics-main-tile-header {
        padding: 2.25rem 1.75rem;
    }
}

@media (max-width: 1200px) {
    .science-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

.science-card {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.science-icon-wrapper {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(27, 99, 138, 0.08);
    border: 1px solid rgba(27, 99, 138, 0.15);
    color: var(--accent-blue);
    margin-bottom: 1.5rem;
}

.science-card-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    letter-spacing: 0.02em;
}

.science-card-desc {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* --- Biologischer Neustart (Organ Grid) --- */
.restart-layout {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 4rem;
    align-items: center;
}

@media (max-width: 992px) {
    .restart-layout {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

.restart-media {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 45px rgba(168, 140, 103, 0.15);
    aspect-ratio: 4/5;
}

.restart-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.85) contrast(1.05);
}

.restart-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(4, 6, 9, 0.9) 0%, rgba(4, 6, 9, 0) 60%);
}

.restart-media-content {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    right: 2rem;
}

.restart-media-title {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.restart-media-title.text-gradient-silver {
    background: linear-gradient(135deg, var(--white) 30%, var(--pale-blue) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.restart-media-desc {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.75);
}

.restart-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

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

.restart-card-desc {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* --- Distillation Section --- */
.distill-layout {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 5rem;
    align-items: center;
}

@media (max-width: 992px) {
    .distill-layout {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

.distill-steps {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.distill-step {
    display: flex;
    gap: 2rem;
    padding: 1.5rem;
    border-radius: 12px;
}

.step-num {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    line-height: 1;
    font-weight: 600;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-glow));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.step-title {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.step-desc {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.distill-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.alchemical-seal {
    width: 100%;
    max-width: 350px;
    height: auto;
    opacity: 0.8;
    filter: drop-shadow(0 4px 20px rgba(27, 99, 138, 0.12));
    animation: rotateSlow 30s linear infinite;
}

.alchemical-seal circle,
.alchemical-seal line,
.alchemical-seal path {
    stroke: var(--accent-blue) !important;
}

@keyframes rotateSlow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* --- Opus Magnum Deep Dive Section --- */
.deepdive-section {
    padding: 8rem 0;
    position: relative;
    background: radial-gradient(circle at 50% 100%, rgba(27, 99, 138, 0.05) 0%, transparent 60%);
    border-top: 1px solid var(--border-color);
}

.deepdive-grid {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    margin-bottom: 6rem;
}

.deepdive-text {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.deepdive-text p {
    font-size: 1.1rem;
    line-height: 1.75;
    color: var(--text-secondary);
}

.deepdive-text p strong {
    color: var(--text-primary);
}

.purity-scale-container {
    padding: 2.5rem;
}

.purity-scale-title {
    font-size: 1.4rem;
    margin-bottom: 2rem;
    text-align: center;
    color: var(--text-primary);
}

.purity-steps {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.purity-step-item {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(168, 140, 103, 0.1);
    transition: var(--transition-smooth);
}

.purity-step-item:hover {
    transform: translateX(10px);
    background: var(--bg-surface-hover);
    border-color: var(--accent-blue);
    box-shadow: 0 8px 20px rgba(27, 99, 138, 0.08);
}

.purity-step-badge {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-glow));
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
}

.purity-step-info {
    flex: 1;
}

.purity-step-name {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    color: var(--text-primary);
    margin-bottom: 0.2rem;
}

.purity-step-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.purity-step-val {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--accent-blue);
}

/* ═══ CASCADE PINCH-ZOOM WRAPPER ═══ */
.cascade-pinch-wrapper {
    /* touch-action wird per JS dynamisch gesteuert:
       pan-y = normales Scrollen (Standard)
       none  = vollständige Kontrolle während Pinch */
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    transform-origin: center center;
    will-change: transform;
}

.cascade-pinch-wrapper:active {
    cursor: grabbing;
}

/* ═══ 9-FOLD DISTILLATION CASCADE GRAPHIC ═══ */
.cascade-graphic {
    padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.25rem, 4vw, 2.25rem) clamp(1.25rem, 3vw, 2rem);
    border-radius: 16px;
    background: rgba(4, 16, 32, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.09);
    margin-top: 2.5rem;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
}

/*
  MOBILE FULL-BLEED TECHNIK:
  .myth-tile-inner hat auf Mobile padding: 0 1.5rem.
  .myth-tile und .myth-tile-content haben overflow:hidden — negative Margins werden geclipt.
  Lösung: .cascade-pinch-outer bekommt negative Margins um 1.5rem pro Seite,
  und das .cascade-graphic bekommt border-radius:0 + kein seitlicher Border.
  Da .cascade-pinch-outer der unmittelbare Nachfolger in myth-article-body ist,
  und myth-article-body selbst keinen overflow:hidden hat,
  wirkt der negative Margin korrekt innerhalb von myth-tile-content.

  Warum funktioniert es HIER aber nicht mit negativem Margin auf cascade-graphic?
  → .myth-tile-content hat overflow:hidden. Negative Margins können den
    sichtbaren Bereich nicht vergrössern, nur verschieben.
  → ECHTE Lösung: myth-tile-inner padding auf 0 setzen für diesen Tile-Abschnitt.
*/
@media (max-width: 768px) {

    /* Das Cascade-Tile-Inner bekommt kein seitliches Padding –
       so kann die Grafik von Kante zu Kante laufen (innerhalb von myth-tile-content).
       Die Texte über der Grafik bekommen ihr Padding direkt. */
    .cascade-tile-inner {
        padding-left: 0;
        padding-right: 0;
    }

    /* Textsätze ÜBER der Grafik: Innen-Padding wiederherstellen */
    .cascade-tile-inner .myth-paragraph {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    /* Pinch-Hint: innerhalb der vollen Breite zentriert */
    .cascade-pinch-hint {
        padding: 0 1.5rem;
    }
}

@media (max-width: 480px) {

    .cascade-tile-inner .myth-paragraph {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .cascade-pinch-hint {
        padding: 0 1rem;
    }
}

.cascade-header {
    text-align: center;
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.cascade-header-title {
    font-family: var(--font-montserrat);
    font-size: clamp(1rem, 3vw + 0.2rem, 1.35rem);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 0.3rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.cascade-header-sub {
    font-family: var(--font-montserrat);
    font-size: clamp(0.6rem, 1.7vw + 0.03rem, 0.72rem);
    font-weight: 300;
    color: rgba(255, 255, 255, 0.38);
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

/* ── Phase group labels ── */
.cascade-phase-group {
    margin-bottom: clamp(0.65rem, 1.8vw, 1rem);
    padding-top: clamp(0.5rem, 1.4vw, 0.7rem);
}

.cascade-phase-group + .cascade-phase-group {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.cascade-phase-label {
    display: flex;
    align-items: center;
    gap: clamp(0.4rem, 1.5vw, 1rem);
    margin-bottom: clamp(0.4rem, 1vw, 0.6rem);
    padding-left: 0.25rem;
}

.cascade-phase-name {
    font-family: var(--font-montserrat);
    font-size: clamp(0.58rem, 1.5vw + 0.04rem, 0.68rem);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    white-space: nowrap;
}

.cascade-phase-name--koerper {
    color: rgba(255, 255, 255, 0.70);
}

.cascade-phase-name--geist {
    color: rgba(255, 255, 255, 0.70);
}

.cascade-phase-name--seele {
    color: rgba(255, 255, 255, 0.70);
}

.cascade-phase-line {
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.09);
}

.cascade-phase-desc {
    font-family: var(--font-montserrat);
    font-size: clamp(0.52rem, 1.5vw + 0.02rem, 0.63rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.32);
    white-space: nowrap;
    letter-spacing: 0.04em;
}

/* ── Spalten-Kopfzeile (VOLUMEN / ZEIT) ── */
.cascade-col-headers {
    display: grid;
    /* Identische Spalten wie .cascade-row, damit Labels exakt über den Balken stehen */
    grid-template-columns: clamp(1.6rem, 4vw, 2.2rem) 1fr clamp(2.8rem, 8vw, 4rem) clamp(2.8rem, 8vw, 3.8rem);
    align-items: center;
    gap: clamp(0.4rem, 1.5vw, 1rem);
    margin-bottom: clamp(0.35rem, 1vw, 0.5rem);
    padding-bottom: clamp(0.3rem, 0.8vw, 0.4rem);
}

@media (max-width: 640px) {
    .cascade-col-headers {
        grid-template-columns: clamp(1.4rem, 3.5vw, 1.8rem) 1fr clamp(2.6rem, 7vw, 3.4rem) clamp(2.4rem, 6.5vw, 3.2rem);
        gap: 0.35rem;
    }
}

.cascade-col-header-num {
    /* Im Grid: erste Spalte, kein min-width noetig */
}

.cascade-col-header-bar {
    /* Im Grid: zweite Spalte (1fr) */
}

.cascade-col-header-label {
    font-family: var(--font-montserrat);
    font-size: clamp(0.48rem, 1.3vw + 0.01rem, 0.56rem);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.22);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: right;
    white-space: nowrap;
    /* Im Grid: Breite aus grid-template-columns, flex-shrink entfaellt */
}

.cascade-col-header-label:nth-child(3) {
    /* Dritte Grid-Spalte = VOLUMEN */
}

.cascade-col-header-label:nth-child(4) {
    /* Vierte Grid-Spalte = ZEIT */
    padding-left: 0.25rem;
}

/* ── Reference bar (6L Ausgangswasser) ── */
.cascade-reference {
    /* Identisches Grid wie .cascade-row: Spalten perfekt buendig mit den Zeilen-Balken */
    display: grid;
    grid-template-columns: clamp(1.6rem, 4vw, 2.2rem) 1fr clamp(2.8rem, 8vw, 4rem) clamp(2.8rem, 8vw, 3.8rem);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: clamp(0.4rem, 1.5vw, 1rem);
    row-gap: clamp(0.4rem, 1vw, 0.55rem);
    margin-bottom: clamp(1rem, 2.5vw, 2rem);
    padding-bottom: clamp(0.75rem, 2vw, 1.5rem);
}

@media (max-width: 640px) {
    .cascade-reference {
        grid-template-columns: clamp(1.4rem, 3.5vw, 1.8rem) 1fr clamp(2.6rem, 7vw, 3.4rem) clamp(2.4rem, 6.5vw, 3.2rem);
        column-gap: 0.35rem;
    }
}

/* Header-Zeile: spannt alle 4 Grid-Spalten — identisch zu .cascade-phase-label */
.cascade-ref-header {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: clamp(0.4rem, 1.5vw, 1rem);
    padding-left: 0.25rem;
}

.cascade-ref-tag {
    font-family: var(--font-montserrat);
    /* Identische Typografie wie .cascade-phase-name */
    font-size: clamp(0.58rem, 1.5vw + 0.04rem, 0.68rem);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.70);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    white-space: nowrap;
}

.cascade-ref-line {
    display: none;
}

.cascade-ref-label {
    font-family: var(--font-montserrat);
    font-size: clamp(0.52rem, 1.5vw + 0.02rem, 0.63rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
    letter-spacing: 0.04em;
}

.cascade-ref-bar {
    /* Spalte 2, Zeile 2 (unter dem Header) — exakt buendig mit .cascade-bar-track */
    grid-column: 2 / 3;
    grid-row: 2;
    width: 100%;
    /* Identische Hoehe wie .cascade-row */
    height: clamp(2.2rem, 5.5vw, 2rem);
    min-height: 2.2rem;
    border-radius: clamp(3px, 0.8vw, 5px);
    /* Ausgangswasser – tiefstes Nachtblau, volle Breite = 6.00 L Referenz */
    background: linear-gradient(90deg, hsl(218, 72%, 8%) 0%, hsl(218, 68%, 13%) 100%);
    border: 1px solid rgba(60, 100, 160, 0.25);
    position: relative;
}

/* Volumen-Wert in der Start-Zeile (Spalte 3, Zeile 2) */
.cascade-ref-vol {
    grid-column: 3;
    grid-row: 2;
    font-family: var(--font-montserrat);
    font-size: clamp(0.58rem, 1.7vw + 0.04rem, 0.72rem);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.78);
    text-align: right;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

/* Zeit-Wert in der Start-Zeile (Spalte 4, Zeile 2) */
.cascade-ref-time {
    grid-column: 4;
    grid-row: 2;
    font-family: var(--font-montserrat);
    font-size: clamp(0.55rem, 1.6vw + 0.05rem, 0.7rem);
    font-weight: 500;
    color: var(--text-muted);
    text-align: right;
    white-space: nowrap;
    letter-spacing: 0.03em;
    padding-left: 0.25rem;
    border-left: 1px solid var(--border-color);
}

/* ── Individual distillation rows ── */
.cascade-rows {
    display: flex;
    flex-direction: column;
    gap: clamp(0.25rem, 0.8vw, 0.4rem);
}

.cascade-row {
    display: grid;
    /* Spalten: Nummer | Balken-Track | Volumen | Zeit */
    grid-template-columns: clamp(1.6rem, 4vw, 2.2rem) 1fr clamp(2.8rem, 8vw, 4rem) clamp(2.8rem, 8vw, 3.8rem);
    align-items: center;
    gap: clamp(0.4rem, 1.5vw, 1rem);
    /* Fluid row height: mind. 40px auf klein, 32px Normal */
    height: clamp(2.2rem, 5.5vw, 2rem);
    min-height: 2.2rem;
    /* Touch-freundlich */
}

@media (max-width: 640px) {
    .cascade-row {
        /* Auf kleinen Schirmen: kompaktere Spalten */
        grid-template-columns: clamp(1.4rem, 3.5vw, 1.8rem) 1fr clamp(2.6rem, 7vw, 3.4rem) clamp(2.4rem, 6.5vw, 3.2rem);
        height: clamp(2.2rem, 6vw, 2.6rem);
        gap: 0.35rem;
    }
}

.cascade-row-num {
    font-family: var(--font-montserrat);
    font-size: clamp(0.56rem, 1.6vw + 0.02rem, 0.68rem);
    color: rgba(255, 255, 255, 0.28);
    text-align: right;
    font-weight: 500;
    letter-spacing: 0.02em;
    /* Im Grid: erste Spalte, min-width und flex-shrink entfaellt */
}

.cascade-bar-track {
    /*
      Im CSS-Grid-Layout hat der Track eine eigene Spalte (1fr des verfuegbaren
      Mittelbereichs). Der Track selbst belegt stets 100% dieser Grid-Zelle.
      Die proportionale Begrenzung erfolgt ueber .cascade-row--N, das den
      WRAPPER der gesamten Row auf max-width setzt – das ist stabiler als
      max-width auf dem Track selbst, weil es relativ zur Row-Breite bleibt.
    */
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: clamp(3px, 0.8vw, 5px);
    background: rgba(255, 255, 255, 0.05);
    min-width: 0;
}

/*
  PROPORTIONALE TRACK-BREITEN
  Strategie: Der .cascade-bar-fill animiert von width:0 auf width:XX%.
  XX% = Volumen / 6.00 * 100% (relativ zum Track = 100% der Grid-Zelle).
  So bleibt die Proportion auf ALLEN Viewports korrekt, weil der Track
  immer 100% des Grid-1fr-Tracks ist.

  Berechnung: Volumen / 6.00 * 100%
  I.   5.00 / 6.00 = 83.33%
  II.  4.17 / 6.00 = 69.50%
  III. 3.47 / 6.00 = 57.83%
  IV.  2.89 / 6.00 = 48.17%
  V.   2.41 / 6.00 = 40.17%
  VI.  2.01 / 6.00 = 33.50%
  VII. 1.67 / 6.00 = 27.83%
  VIII.1.40 / 6.00 = 23.33%
  IX.  1.16 / 6.00 = 19.33%

  Der cascade-bar-fill traegt die proportionale Breite (statt max-width auf dem Track).
  Die Transition von width:0 auf width:XX% bleibt unveraendert.
*/
.cascade-row--1 .cascade-bar-fill { --bar-target-w: 83.33%; }
.cascade-row--2 .cascade-bar-fill { --bar-target-w: 69.44%; }
.cascade-row--3 .cascade-bar-fill { --bar-target-w: 57.87%; }
.cascade-row--4 .cascade-bar-fill { --bar-target-w: 48.23%; }
.cascade-row--5 .cascade-bar-fill { --bar-target-w: 40.19%; }
.cascade-row--6 .cascade-bar-fill { --bar-target-w: 33.50%; }
.cascade-row--7 .cascade-bar-fill { --bar-target-w: 27.91%; }
.cascade-row--8 .cascade-bar-fill { --bar-target-w: 23.26%; }
.cascade-row--9 .cascade-bar-fill { --bar-target-w: 19.33%; }
/* ── Start-Balken (Ausgangswasser, 6.00 L = 100% Breite) ── */
.cascade-row--start .cascade-bar-fill { --bar-target-w: 100%; }

.cascade-bar-fill--start {
    background: linear-gradient(90deg, hsl(218, 72%, 8%) 0%, hsl(218, 68%, 16%) 100%);
    border: 1px solid rgba(60, 100, 160, 0.22);
}

/* Start-Zeile: gedaempfte Typografie (kein Animationsfade noetig) */
.cascade-row--start .cascade-row-vol {
    opacity: 1;
    transition: none;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 400;
}

.cascade-row--start .cascade-row-time {
    opacity: 1;
    transition: none;
    color: rgba(255, 255, 255, 0.35);
}

.cascade-row--start .cascade-row-num {
    color: rgba(255, 255, 255, 0.18);
    font-size: clamp(0.7rem, 2vw, 0.9rem);
}

/* ── Gruppen-Trennlinie: Gruppe 1 oben keine Trennlinie ── */
.cascade-phase-group--1 {
    padding-top: 0;
}

/* Gruppe 3 hat 4 Balken: nth-child(4) Delay hinzugefuegt (bereits vorhanden) */

.cascade-bar-fill {
    height: 100%;
    border-radius: clamp(3px, 0.8vw, 4px);
    width: 0;
    transition: width 1.6s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    /* --bar-target-w wird per .cascade-row--N gesetzt */
    --bar-target-w: 0%;
}

/*
  ══════════════════════════════════════════════════════════════
  ALCHEMISTISCHE FARBPALETTE — 10 individuelle Destillationsstufen
  Die Transformation: Nachtblau (Materia Prima) → Reines Gold (Opus Magnum)

  Stufe 0  (Referenz / Start):  Tiefstes Nachtblau  hsl(218, 70%, 11%)
  Stufe I  (1. Destillation):   Dunkelblau           hsl(215, 65%, 22%)
  Stufe II (2. Destillation):   Kobaltblau           hsl(210, 62%, 30%)
  Stufe III(3. Destillation):   Stahlblau            hsl(205, 56%, 38%)
  Stufe IV (4. Destillation):   Blaugrau-Stahl       hsl(200, 46%, 42%)
  Stufe V  (5. Destillation):   Taubengrau-Blau      hsl(192, 36%, 44%)
  Stufe VI (6. Destillation):   Silbrig-Bronze       hsl(40,  22%, 48%)
  Stufe VII(7. Destillation):   Warmes Bronze        hsl(38,  38%, 52%)
  Stufe VIII(8. Destillation):  Mattes Gold          hsl(42,  55%, 58%)
  Stufe IX (9. Destillation):   Reines Alchemistengold hsl(46, 72%, 62%)
  ══════════════════════════════════════════════════════════════
*/

/* ── I. Destillation: Dunkelblau ── */
.cascade-bar-fill--1 {
    background: linear-gradient(90deg, hsl(218, 65%, 16%) 0%, hsl(215, 65%, 26%) 100%);
    border: 1px solid hsla(215, 60%, 40%, 0.35);
}

/* ── II. Destillation: Kobaltblau ── */
.cascade-bar-fill--2 {
    background: linear-gradient(90deg, hsl(213, 62%, 22%) 0%, hsl(210, 60%, 34%) 100%);
    border: 1px solid hsla(210, 58%, 48%, 0.38);
}

/* ── III. Destillation: Stahlblau ── */
.cascade-bar-fill--3 {
    background: linear-gradient(90deg, hsl(207, 56%, 28%) 0%, hsl(204, 55%, 42%) 100%);
    border: 1px solid hsla(204, 52%, 55%, 0.40);
}

/* ── IV. Destillation: Blaugrau-Stahl ── */
.cascade-bar-fill--4 {
    background: linear-gradient(90deg, hsl(200, 48%, 30%) 0%, hsl(198, 46%, 46%) 100%);
    border: 1px solid hsla(198, 44%, 58%, 0.38);
}

/* ── V. Destillation: Taubengrau-Blau ── */
.cascade-bar-fill--5 {
    background: linear-gradient(90deg, hsl(192, 38%, 32%) 0%, hsl(190, 36%, 48%) 100%);
    border: 1px solid hsla(190, 34%, 60%, 0.36);
}

/* ── VI. Destillation: Silbrig-Bronze (Übergangsphase) ── */
.cascade-bar-fill--6 {
    background: linear-gradient(90deg, hsl(38, 22%, 34%) 0%, hsl(40, 24%, 52%) 100%);
    border: 1px solid hsla(40, 28%, 60%, 0.38);
}

/* ── VII. Destillation: Warmes Bronze ── */
.cascade-bar-fill--7 {
    background: linear-gradient(90deg, hsl(36, 38%, 36%) 0%, hsl(38, 42%, 56%) 100%);
    border: 1px solid hsla(38, 45%, 65%, 0.42);
}

/* ── VIII. Destillation: Mattes Gold ── */
.cascade-bar-fill--8 {
    background: linear-gradient(90deg, hsl(40, 52%, 38%) 0%, hsl(42, 58%, 62%) 100%);
    border: 1px solid hsla(42, 60%, 70%, 0.48);
}

/* ── IX. Destillation: Reines Alchemistengold – Opus Magnum ── */
.cascade-bar-fill--9 {
    background: linear-gradient(90deg, hsl(44, 65%, 44%) 0%, hsl(46, 78%, 66%) 100%);
    border: 1px solid hsla(46, 75%, 72%, 0.62);
    box-shadow: 0 0 18px hsla(46, 78%, 60%, 0.30), 0 0 40px hsla(46, 78%, 60%, 0.12);
}

/* Kompatibilitaets-Aliases fuer bestehende Klassen (werden schrittweise abgeloest) */
.cascade-bar-fill--k { background: linear-gradient(90deg, hsl(218, 65%, 16%) 0%, hsl(210, 60%, 34%) 100%); border: 1px solid hsla(210, 58%, 48%, 0.38); }
.cascade-bar-fill--g { background: linear-gradient(90deg, hsl(200, 48%, 30%) 0%, hsl(190, 36%, 48%) 100%); border: 1px solid hsla(190, 34%, 60%, 0.36); }
.cascade-bar-fill--s { background: linear-gradient(90deg, hsl(40, 52%, 38%) 0%, hsl(42, 58%, 62%) 100%); border: 1px solid hsla(42, 60%, 70%, 0.48); }
.cascade-bar-fill--opus { background: linear-gradient(90deg, hsl(44, 65%, 44%) 0%, hsl(46, 78%, 66%) 100%); border: 1px solid hsla(46, 75%, 72%, 0.62); box-shadow: 0 0 18px hsla(46, 78%, 60%, 0.30), 0 0 40px hsla(46, 78%, 60%, 0.12); }

.cascade-row-vol {
    font-family: var(--font-montserrat);
    font-size: clamp(0.58rem, 1.7vw + 0.04rem, 0.72rem);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.78);
    text-align: right;
    opacity: 0;
    transition: opacity 0.6s ease;
    transition-delay: 2.2s;
    letter-spacing: 0.01em;
    /* Im Grid: Spaltenbreite aus grid-template-columns, min-width entfaellt */
}

/* ── Zeit-Badge pro Destillationszeile ── */
.cascade-row-time {
    font-size: clamp(0.55rem, 1.6vw + 0.05rem, 0.7rem);
    font-weight: 500;
    color: var(--text-muted);
    text-align: right;
    opacity: 0;
    transition: opacity 0.6s ease;
    transition-delay: 2.5s;
    letter-spacing: 0.03em;
    padding-left: 0.25rem;
    border-left: 1px solid var(--border-color);
    /* Im Grid: Spaltenbreite aus grid-template-columns, min-width entfaellt */
}

.cascade-row-time--opus {
    color: var(--gold-dark);
    border-left-color: rgba(168, 140, 103, 0.35);
}

.cascade-row--opus .cascade-row-vol {
    color: #c8a86b;
    font-weight: 700;
}

/* ── Animated widths ── */
/*
  Der Fill animiert auf seine individuelle Zielbreite (--bar-target-w),
  die per .cascade-row--N als CSS-Custom-Property gesetzt ist.
  So ist der sichtbare Balken proportional zum Volumen, auf JEDEM Viewport.
*/
.cascade-animated .cascade-bar-fill {
    width: var(--bar-target-w, 0%);
}

/* ── Staggered animation delays ── */
.cascade-rows .cascade-row:nth-child(1) .cascade-bar-fill {
    transition-delay: 0.1s;
}

.cascade-rows .cascade-row:nth-child(2) .cascade-bar-fill {
    transition-delay: 0.22s;
}

.cascade-rows .cascade-row:nth-child(3) .cascade-bar-fill {
    transition-delay: 0.34s;
}

.cascade-rows .cascade-row:nth-child(4) .cascade-bar-fill {
    transition-delay: 0.56s;
}

.cascade-rows .cascade-row:nth-child(5) .cascade-bar-fill {
    transition-delay: 0.68s;
}

.cascade-rows .cascade-row:nth-child(6) .cascade-bar-fill {
    transition-delay: 0.8s;
}

.cascade-rows .cascade-row:nth-child(7) .cascade-bar-fill {
    transition-delay: 1.02s;
}

.cascade-rows .cascade-row:nth-child(8) .cascade-bar-fill {
    transition-delay: 1.14s;
}

.cascade-rows .cascade-row:nth-child(9) .cascade-bar-fill {
    transition-delay: 1.26s;
}

.cascade-animated .cascade-row-vol {
    opacity: 1 !important;
}

/* Starker Override fuer page-spezifischen Kontext mit ID-Selektor */
.page-opus-magnum #opus-1 .cascade-animated .cascade-row-vol,
#opus-1 .cascade-animated .cascade-row-vol {
    opacity: 1 !important;
}

.cascade-animated .cascade-row-time {
    opacity: 1 !important;
}

.page-opus-magnum #opus-1 .cascade-animated .cascade-row-time,
#opus-1 .cascade-animated .cascade-row-time {
    opacity: 1 !important;
}

/* ── Summary footer ── */
.cascade-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(2.5rem, 10vw, 6.25rem);
    margin-top: clamp(1.25rem, 3vw, 2rem);
    padding: clamp(1rem, 2.5vw, 1.35rem) clamp(0.85rem, 3vw, 1.5rem);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    flex-wrap: wrap;
}

@media (max-width: 480px) {
    .cascade-summary {
        flex-direction: row;
        gap: 0.5rem;
        justify-content: space-around;
        padding: 0.85rem 0.75rem;
    }
}

@media (max-width: 768px) {
    /* .cascade-summary auf Mobile: bildschirmfuellend, keine Kachel-Optik */
    .cascade-summary {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        background: rgba(4, 16, 32, 0.82) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 1.25rem;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

.cascade-sum-block {
    text-align: center;
}

.cascade-sum-label {
    display: block;
    font-family: var(--font-montserrat);
    font-size: clamp(0.48rem, 1.3vw + 0.01rem, 0.56rem);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.32);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 0.3rem;
}

.cascade-sum-value {
    font-family: var(--font-montserrat);
    font-size: clamp(0.95rem, 3vw + 0.15rem, 1.28rem);
    font-weight: 300;
    color: rgba(255, 255, 255, 0.70);
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.cascade-sum-value--gold {
    color: rgba(255, 255, 255, 0.70);
    -webkit-text-fill-color: rgba(255, 255, 255, 0.70);
    background: none;
}

.cascade-sum-value--time {
    color: rgba(255, 255, 255, 0.70);
    -webkit-text-fill-color: rgba(255, 255, 255, 0.70);
}

.cascade-sum-arrow-tip--time {
    font-size: clamp(0.8rem, 2vw, 1rem);
    color: var(--text-muted);
}

.cascade-sum-arrow {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.cascade-sum-arrow-line {
    width: clamp(0.75rem, 2vw, 2rem);
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
}

.cascade-sum-arrow-tip {
    font-size: clamp(0.58rem, 1.6vw, 0.78rem);
    color: rgba(255, 255, 255, 0.22);
}

/* ── Pinch-zoom hint label (nur Mobile sichtbar) ── */
.cascade-pinch-hint {
    display: none;
}

/* cascade-pinch-hint: auf allen Viewports ausgeblendet */

/* ── Zoom reset button (erscheint nach Pinch) ── */
.cascade-zoom-reset {
    display: none;
    position: absolute;
    bottom: 0.5rem;
    right: 0.75rem;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--border-color);
    border-radius: 50px;
    padding: 0.2rem 0.6rem;
    font-size: 0.6rem;
    color: var(--text-secondary);
    cursor: pointer;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    z-index: 10;
}

.cascade-zoom-active .cascade-zoom-reset {
    display: block;
}

/* Container für den Reset-Button – overflow muss visible bleiben
   damit die full-bleed cascade-graphic nicht abgeschnitten wird */
.cascade-pinch-outer {
    position: relative;
    overflow: visible;
}

/* Auf Mobile: Der outer-Container darf nicht aus dem Tile herausbrechen.
   Die Grafik selbst nutzt width+translateX um den Tile-Innen-Abstand aufzuheben. */
@media (max-width: 768px) {
    .cascade-pinch-outer {
        overflow: hidden;
    }
}

.alchemical-seal-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 0;
}

.alchemical-seal-mini {
    width: 100%;
    max-width: 240px;
    height: auto;
    opacity: 0.9;
    filter: drop-shadow(0 4px 20px rgba(27, 99, 138, 0.12));
    animation: rotateSlow 30s linear infinite;
}

.alchemical-seal-mini circle,
.alchemical-seal-mini line {
    stroke: var(--accent-blue);
}

.highlight-accent {
    color: var(--accent-blue) !important;
}

/* --- Credo Section --- */
.credo-grid {
    max-width: 800px;
    margin: 0 auto 6rem auto;
}

/* --- Footer --- */
.footer {
    border-top: 1px solid;
    border-image: linear-gradient(to right, rgba(168, 140, 103, 0) 0%, rgba(168, 140, 103, 0.4) 50%, rgba(168, 140, 103, 0) 100%) 1;
    padding: 5rem 0 3rem 0;
    background: var(--dark-coal);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4rem;
    margin-bottom: 4rem;
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.footer-logo .logo-text {
    font-size: 1.2rem;
    color: var(--white);
    letter-spacing: 0.15em;
}

.footer-logo-img {
    height: 20px;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.footer-logo-img:hover {
    opacity: 1;
}

.footer-desc {
    font-size: 0.85rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.5);
}

.footer-title {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--gold-light);
    text-transform: uppercase;
}

.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-link {
    color: rgba(255, 255, 255, 0.7);
    transition: var(--transition-fast);
}

.footer-link:hover {
    color: var(--white);
}

.footer-newsletter-form {
    display: flex;
    gap: 0.5rem;
}

.newsletter-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(168, 140, 103, 0.25);
    border-radius: 4px;
    padding: 0.75rem 1rem;
    color: var(--white);
    font-size: 0.85rem;
    transition: var(--transition-fast);
}

.newsletter-input:focus {
    border-color: var(--gold-light);
    background: rgba(255, 255, 255, 0.06);
    outline: none;
}

.newsletter-btn {
    background: var(--gold-light);
    color: var(--black);
    font-weight: 600;
    padding: 0.75rem 1.25rem;
    border-radius: 4px;
    font-size: 0.85rem;
    transition: var(--transition-smooth);
}

.newsletter-btn:hover {
    background: var(--white);
    color: var(--black);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid;
    border-image: linear-gradient(to right, rgba(168, 140, 103, 0) 0%, rgba(168, 140, 103, 0.25) 50%, rgba(168, 140, 103, 0) 100%) 1;
    padding-top: 2rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 768px) {
    .footer-bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}

/* --- Reading Overlay --- */
.reading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 10%, var(--white) 0%, var(--bg-base) 90%);
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}

.reading-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Progress bar */
.reading-progress-container {
    width: 100%;
    height: 4px;
    background: rgba(28, 25, 23, 0.08);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2100;
}

.reading-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent-blue), var(--accent-glow));
    box-shadow: 0 0 8px rgba(27, 99, 138, 0.3);
    transition: width 0.1s ease-out;
}

/* Reading Header */
.reading-header {
    height: var(--header-height);
    border-bottom: 1px solid var(--border-color);
    background: rgba(250, 246, 238, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2050;
}

.reading-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.reading-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.logo-img-small {
    height: 30px;
    width: auto;
    object-fit: contain;
}

.logo-text-small {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--text-primary);
}

.close-reading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.5);
    transition: var(--transition-smooth);
}

.close-reading:hover {
    color: var(--text-primary);
    border-color: var(--text-primary);
    background: rgba(28, 25, 23, 0.05);
}

/* Reading Content */
.reading-content-wrapper {
    flex: 1;
    overflow-y: auto;
    padding: 6rem 0;
    position: relative;
    scroll-behavior: smooth;
}

/* Immersive background decoration for Reading */
.reading-content-wrapper::before {
    content: '';
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(27, 99, 138, 0.08) 0%, rgba(0, 0, 0, 0) 70%);
    pointer-events: none;
    z-index: 0;
}

.reading-body {
    max-width: 800px;
    position: relative;
    z-index: 1;
}

.reading-article-header {
    text-align: center;
    margin-bottom: 4rem;
}

.reading-chapter-num {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    color: var(--accent-blue);
    text-transform: uppercase;
    display: block;
    margin-bottom: 1rem;
}

.reading-title {
    font-size: 3.5rem;
    line-height: 1.15;
    margin-bottom: 1.5rem;
}

.reading-meta {
    font-size: 0.85rem;
    color: var(--text-muted);
    letter-spacing: 0.05em;
}

.reading-inner-text {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    line-height: 1.8;
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.reading-inner-text p {
    font-weight: 300;
    text-align: justify;
}

/* Indent first line of paragraphs except first and blockquotes */
.reading-inner-text p:not(.reading-lead) {
    text-indent: 1.5rem;
}

.reading-lead {
    font-size: 1.8rem;
    line-height: 1.5;
    color: var(--text-primary);
    text-align: center !important;
    max-width: 700px;
    margin: 0 auto;
    font-style: italic;
    font-weight: 400;
    text-indent: 0 !important;
}

.reading-divider {
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(27, 99, 138, 0.3), transparent);
    margin: 2rem auto;
}

.reading-quote {
    font-size: 1.6rem;
    line-height: 1.5;
    color: var(--accent-blue);
    font-style: italic;
    text-align: center;
    border-left: 3px solid var(--accent-blue);
    padding: 1.5rem 2rem;
    margin: 3rem 0;
    background: rgba(27, 99, 138, 0.04);
    border-radius: 0 8px 8px 0;
    box-shadow: inset 5px 0 15px rgba(27, 99, 138, 0.02);
}

.reading-article-footer {
    margin-top: 6rem;
}

.reading-cta {
    padding: 4rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.reading-cta h3 {
    font-size: 2.2rem;
    margin-bottom: 1rem;
}

.reading-cta p {
    color: var(--text-secondary);
    max-width: 600px;
    margin-bottom: 2.5rem;
    font-size: 1.05rem;
}

.reading-cta-buttons {
    display: flex;
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .reading-title {
        font-size: 2.5rem;
    }

    .reading-inner-text {
        font-size: 1.15rem;
    }

    .reading-lead {
        font-size: 1.4rem;
    }

    .reading-quote {
        font-size: 1.3rem;
        padding: 1rem 1.5rem;
    }

    .reading-cta {
        padding: 2.5rem 1.5rem;
    }

    .reading-cta-buttons {
        flex-direction: column;
        width: 100%;
        gap: 1rem;
    }
}

/* --- Collapsible Book Description (Montserrat) --- */
.book-info-collapse {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-top: 0;
    font-family: var(--font-montserrat);
    font-weight: 300;
    font-size: 0.88rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: max-height 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease, margin-top 0.6s ease;
    padding-right: 0.5rem;
    text-align: left;
}

.book-info-collapse.active {
    max-height: 380px;
    opacity: 1;
    margin-top: 1.25rem;
    overflow-y: auto;
}

/* --- Collapse Inner Styling --- */
.book-info-collapse .collapse-heading {
    color: var(--white);
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    font-weight: 400;
    letter-spacing: 0.02em;
}

.book-info-collapse .table-title {
    color: var(--white);
    font-size: 1.2rem;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    font-weight: 400;
}

.book-info-collapse .table-responsive {
    width: 100%;
    overflow-x: auto;
    margin: 1.5rem 0 0.5rem 0;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(4, 6, 9, 0.4);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.book-info-collapse .mineral-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.85);
}

.book-info-collapse .mineral-table th,
.book-info-collapse .mineral-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.book-info-collapse .mineral-table th {
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.95);
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.book-info-collapse .mineral-table tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.015);
}

.book-info-collapse .mineral-table tr:last-child td {
    border-bottom: none;
}

.book-info-collapse .mineral-table tr {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: center;
}

@media (min-width: 769px) {
    .book-info-collapse .mineral-table tr:hover {
        transform: scale(1.06);
        position: relative;
        z-index: 10;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    }
}

.book-info-collapse .mineral-table td strong {
    color: var(--white);
    font-weight: 600;
}

.book-info-collapse .mineral-table .highlight-val {
    color: var(--warm-linen);
    /* Soft ivory-gold highlight */
    font-weight: 600;
    border-left: 1px solid rgba(255, 255, 255, 0.05);
}

.book-info-collapse .mineral-table th:last-child {
    border-left: 1px solid rgba(255, 255, 255, 0.05);
}

.book-info-collapse .table-sources {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1.4;
    margin-bottom: 1.5rem;
    padding-left: 0.25rem;
    font-style: italic;
}

.book-info-collapse .collapse-blockquote {
    border-left: 3px solid var(--accent-blue);
    padding: 0.85rem 1.1rem;
    background: rgba(27, 99, 138, 0.12);
    color: var(--white);
    font-style: italic;
    font-weight: 400;
    font-size: 0.92rem;
    margin: 1.25rem 0;
    border-radius: 0 8px 8px 0;
    box-shadow: inset 4px 0 10px rgba(0, 0, 0, 0.1);
}

/* Custom Scrollbar for Collapse Container */
.book-info-collapse::-webkit-scrollbar {
    width: 4px;
}

.book-info-collapse::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.book-info-collapse::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

.book-info-collapse::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* --- Myth Card Answer Scroll & Light Theme Table --- */
.myth-answer-scroll {
    flex: 1;
    overflow-y: auto;
    padding-right: 0.5rem;
    text-align: left;
    margin-bottom: 1rem;
    width: 100%;
}

.myth-answer-scroll::-webkit-scrollbar {
    width: 4px;
}

.myth-answer-scroll::-webkit-scrollbar-track {
    background: rgba(28, 25, 23, 0.05);
    border-radius: 4px;
}

.myth-answer-scroll::-webkit-scrollbar-thumb {
    background: rgba(28, 25, 23, 0.2);
    border-radius: 4px;
}

.myth-answer-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(28, 25, 23, 0.4);
}

/* Light-themed elements for the Ivory Stage myth answer */
/* --- Myth Card Answer Scroll & Light Theme Table (Screenshot 1 Design) --- */
.table-responsive.light-theme {
    width: 100%;
    overflow-x: auto;
    margin: 2rem 0;
    border-radius: 8px;
    border: none;
    background: var(--white);
    box-shadow: 0 4px 24px rgba(14, 53, 103, 0.10);
    -webkit-overflow-scrolling: touch;
}

.table-responsive.light-theme::-webkit-scrollbar {
    height: 6px;
}

.table-responsive.light-theme::-webkit-scrollbar-track {
    background: hsl(215, 40%, 96%);
}

.table-responsive.light-theme::-webkit-scrollbar-thumb {
    background: rgba(14, 53, 103, 0.25);
    border-radius: 3px;
}

.table-responsive.light-theme::-webkit-scrollbar-thumb:hover {
    background: rgba(14, 53, 103, 0.45);
}

.mineral-table.light-theme {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-montserrat);
    font-size: clamp(0.75rem, 0.6vw + 0.6rem, 0.9rem);
    color: hsl(215, 25%, 30%);
    text-align: left;
    background-color: var(--white);
}

/* Header styling with fluid size and padding */
.mineral-table.light-theme th {
    background-color: hsl(215, 76%, 18%);
    /* Tiefes Marineblau */
    color: hsl(210, 60%, 92%);
    /* Helles Blau-Weiss */
    font-size: clamp(0.6rem, 0.4vw + 0.48rem, 0.72rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: clamp(14px, 1.2vw + 8px, 22px) clamp(10px, 1.5vw + 6px, 24px);
    border: none;
    vertical-align: middle;
}

/* Align column headers to match content */
.mineral-table.light-theme th:nth-child(1) {
    text-align: left;
}

.mineral-table.light-theme th:nth-child(2) {
    text-align: center;
}

.mineral-table.light-theme th:nth-child(3) {
    text-align: center;
}

.mineral-table.light-theme th:nth-child(4) {
    text-align: center;
}

.mineral-table.light-theme th:nth-child(5) {
    text-align: center;
}

.mineral-table.light-theme th:nth-child(6) {
    text-align: center;
}

/* Body cell styling with fluid padding */
.mineral-table.light-theme td {
    padding: clamp(12px, 1vw + 8px, 20px) clamp(10px, 1.5vw + 6px, 24px);
    border-bottom: 1px solid hsl(215, 40%, 92%);
    /* Helle Blau-Linie */
    vertical-align: middle;
    transition: var(--transition-fast), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Text alignments for cells */
.mineral-table.light-theme td:nth-child(1) {
    text-align: left;
}

.mineral-table.light-theme td:nth-child(2) {
    text-align: center;
}

.mineral-table.light-theme td:nth-child(3) {
    text-align: center;
}

.mineral-table.light-theme td:nth-child(4) {
    text-align: center;
}

.mineral-table.light-theme td:nth-child(5) {
    text-align: center;
}

.mineral-table.light-theme td:nth-child(6) {
    text-align: center;
}

/* Specific column styles with fluid typography */
.mineral-table.light-theme td:nth-child(1) strong {
    font-weight: 600;
    color: hsl(215, 60%, 20%);
    font-size: clamp(0.78rem, 0.6vw + 0.65rem, 0.95rem);
}

.mineral-table.light-theme td:nth-child(2) {
    color: hsl(215, 25%, 35%);
    font-weight: 500;
}

.mineral-table.light-theme td:nth-child(3) {
    color: hsl(215, 25%, 35%);
}

/* Remove border on last row */
.mineral-table.light-theme tbody tr:last-child td {
    border-bottom: none;
}

/* Zebra pattern styling */
.mineral-table.light-theme tbody tr:nth-child(even) td,
.mineral-table.light-theme tr:nth-child(even) td {
    background-color: hsl(215, 55%, 96%) !important;
    /* Helles Blau als Zebra-Streifen */
}

.mineral-table.light-theme tbody tr:nth-child(odd) td,
.mineral-table.light-theme tr:nth-child(odd) td {
    background-color: var(--white) !important;
}

/* Hover style: directional scale per cell on desktop */
.mineral-table.light-theme tbody tr,
.mineral-table.light-theme tr {
    transition: box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* First cell: anchored left, expands rightward */
.mineral-table.light-theme td:first-child {
    transform-origin: left center;
}

/* Middle cells: expand symmetrically */
.mineral-table.light-theme td:nth-child(2),
.mineral-table.light-theme td:nth-child(3),
.mineral-table.light-theme td:nth-child(4),
.mineral-table.light-theme td:nth-child(5) {
    transform-origin: center center;
}

/* Last cell: anchored right, expands leftward */
.mineral-table.light-theme td:last-child {
    transform-origin: right center;
}

@media (min-width: 769px) {

    .mineral-table.light-theme tbody tr:hover,
    .mineral-table.light-theme tr:hover {
        position: relative;
        z-index: 10;
        box-shadow: 0 8px 24px rgba(14, 53, 103, 0.12);
    }

    .mineral-table.light-theme tbody tr:hover td,
    .mineral-table.light-theme tr:hover td {
        transform: scaleX(1.06) scaleY(1.06);
    }
}

/* Custom premium badges based on Screenshot 1 with fluid sizing and padding */
.mineral-table.light-theme .badge-neutral {
    display: inline-block;
    background: hsl(215, 50%, 94%);
    border: 1px solid hsl(215, 40%, 84%);
    color: hsl(215, 35%, 42%);
    font-size: clamp(0.58rem, 0.4vw + 0.45rem, 0.72rem);
    padding: clamp(4px, 0.3vw + 2px, 6px) clamp(8px, 0.8vw + 4px, 14px);
    border-radius: 4px;
    font-weight: 500;
    white-space: nowrap;
}

.mineral-table.light-theme .badge-gold-outline {
    display: inline-block;
    background: hsl(215, 70%, 95%);
    border: 1px solid hsl(215, 55%, 70%);
    color: hsl(215, 76%, 28%);
    font-size: clamp(0.58rem, 0.4vw + 0.45rem, 0.72rem);
    padding: clamp(4px, 0.3vw + 2px, 6px) clamp(8px, 0.8vw + 4px, 14px);
    border-radius: 4px;
    font-weight: 500;
    white-space: nowrap;
}

.mineral-table.light-theme .badge-gold-fill {
    display: inline-block;
    background: hsl(215, 76%, 28%);
    color: var(--white);
    font-size: clamp(0.58rem, 0.4vw + 0.45rem, 0.72rem);
    padding: clamp(4px, 0.3vw + 2px, 6px) clamp(8px, 0.8vw + 4px, 14px);
    border-radius: 4px;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(14, 53, 103, 0.18);
    white-space: nowrap;
}

@media (max-width: 768px) {

    /* Mobile: Tabelle flächenbündig, keine Ränder oder Linien */
    .mineral-table.light-theme {
        min-width: 560px;
    }

    .table-responsive.light-theme {
        border-radius: 0;
        border: none;
        box-shadow: none;
        margin-left: calc(-1 * var(--container-padding, 2rem));
        margin-right: calc(-1 * var(--container-padding, 2rem));
        width: calc(100% + 2 * var(--container-padding, 2rem));
    }
}

.collapse-blockquote.light-theme {
    border-left: 3px solid var(--accent-blue);
    padding: 0.85rem 1.1rem;
    background: rgba(27, 99, 138, 0.05);
    color: var(--text-primary);
    font-style: italic;
    font-weight: 500;
    font-size: 0.92rem;
    margin: 1.25rem 0;
    border-radius: 0 8px 8px 0;
    box-shadow: inset 4px 0 10px rgba(27, 99, 138, 0.02);
}

/* Light Theme table source notes style */
.table-sources {
    font-size: 0.72rem;
    text-align: right;
    color: var(--text-muted);
    line-height: 1.6;
    margin-top: 1rem;
    margin-bottom: 3rem;
    /* Spacing after the text */
    display: block;
}

/* Premium quote callout for editorial text blocks */

/* Noble, slim, and spacious table/sub-section titles */
.table-title {
    font-family: var(--font-serif);
    font-size: clamp(1.6rem, 1.8vw + 1.2rem, 2.2rem);
    font-weight: 300;
    font-style: italic;
    color: var(--text-primary);
    text-align: center;
    letter-spacing: 0.03em;
    margin-top: 3.5rem;
    margin-bottom: 2.2rem;
    line-height: 1.4;
}

.table-title strong {
    font-weight: 400;
    color: var(--gold-dark);
    /* Gold/Bronze highlight */
}

/* ═══ MIGRATED FROM IRRGLAUBE.HTML ═══ */

/* ═══ CUSTOM PAGE SPECIFIC STYLES ═══ */


body.page-irrglaube {
    background: rgba(255, 255, 255, 0.25) !important;
}

/* Hero Video Banner (5:1 Aspect Ratio) */
.hero-video-banner {
    width: 100%;
    aspect-ratio: 5 / 1;
    overflow: hidden;
    position: relative;
    background: var(--dark-obsidian);
    margin-top: 0;
    opacity: 0;
    animation: elegantVideoFadeIn 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    z-index: 5;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: filter, opacity;
}

.hero-video-banner::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(to top, var(--dark-obsidian), transparent);
    pointer-events: none;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.hero-video-banner video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    /* Loop-Fade: wird per JS gesetzt kurz vor Video-Ende */
    transition: opacity 0.55s ease-in-out;
    opacity: 1;
}

/* Loop-Fade-Klasse: Wird 0.6s vor Loop-Ende per JS aktiviert → Fade to Black */
.hero-video-banner video.video-loop-fade {
    opacity: 0;
}

/* Loop-Fade Overlay: elegantes schwarzes Pseudo-Element hinter dem Video */
.hero-video-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #000;
    z-index: 1;
    /* Liegt zwischen Container und Video */
    pointer-events: none;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.hero-video-banner video {
    position: relative;
    z-index: 2;
    /* Video liegt über dem schwarzen Overlay */
}

@keyframes elegantVideoFadeIn {
    0% {
        opacity: 0;
        filter: blur(15px) brightness(0.3);
    }

    100% {
        opacity: 1;
        filter: blur(0.1px) brightness(1);
        /* 0.1px verhindert Compositor-Layer-Drop der den Header-Blur bricht */
    }
}

/* Dark Hero Section */
.hero-irrglaube {
    background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold-darker) 100%);
    color: var(--white);
    min-height: 18vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 2.4rem 0;
    text-align: center;
}

.hero-irrglaube .hero-bg-glow {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 70%);
}

.hero-bg-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(27, 99, 138, 0.22) 0%, rgba(0, 0, 0, 0) 70%);
    pointer-events: none;
    z-index: 1;
}

.hero-content-irrglaube {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.hero-tag {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    color: var(--accent-glow);
    text-transform: uppercase;
}

.hero-irrglaube .hero-tag {
    color: var(--gold-dark);
}

.hero-irrglaube .hero-title {
    font-size: 4rem;
    line-height: 1.15;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, var(--white) 30%, var(--cool-sand) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-irrglaube .hero-subtitle {
    font-family: var(--font-montserrat);
    font-size: 1.125rem;
    color: var(--white);
    font-weight: 300;
    max-width: 650px;
    line-height: 1.6;
    margin: 0 auto;
    text-align: center;
}

#mythen-bereich .section-subtitle {
    text-align: left;
    font-weight: 600;
}

/* Quote Banner Section */
.quote-banner-section {
    background-color: var(--bg-base);
    padding: 5rem 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.quote-banner-text {
    font-family: var(--font-montserrat);
    font-size: 1.8rem;
    font-weight: 300;
    color: var(--text-primary);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    max-width: 850px;
    margin: 0 auto 2rem auto;
    line-height: 1.5;
}

.quote-banner-author {
    font-family: var(--font-montserrat);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--gold-dark);
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    .quote-banner-text {
        font-size: 1.25rem;
        letter-spacing: 0.1em;
    }

    .quote-banner-section {
        padding: 4rem 1.5rem;
    }
}

/* Spezifisches Design für das Paracelsus-Zitat auf der Irrglauben-Seite (Anthrazit & edler Schimmer) */
.page-irrglaube .quote-banner-section {
    background: radial-gradient(circle at center, var(--dark-espresso-3) 0%, var(--dark-charcoal) 100%);
    border-top: 1px solid rgba(168, 140, 103, 0.15);
    border-bottom: 1px solid rgba(168, 140, 103, 0.15);
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
}

.page-irrglaube .quote-banner-text {
    color: var(--white);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}


/* Myth Accordion Tiles (Apple style 120Hz) */
.myth-contents {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}

.myth-tile {
    position: relative;
    /* Wichtig für absolut positionierten Video-Hintergrund */
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(168, 140, 103, 0.15);
    border-radius: 20px;
    overflow: hidden;
    transition: all 1.2s cubic-bezier(0.16, 1, 0.2, 1);
    box-shadow: 0 4px 30px rgba(168, 140, 103, 0.03);
}

.myth-tile:hover {
    background: rgba(255, 255, 255, 0.75);
    border-color: rgba(27, 99, 138, 0.35);
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(168, 140, 103, 0.08);
}

.myth-tile.open {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(27, 99, 138, 0.5);
    box-shadow: 0 20px 50px rgba(168, 140, 103, 0.12);
}


.myth-tile-header {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    padding: 2.25rem 2.75rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: center;
    outline: none;
    position: relative;
    z-index: 2;
    /* Über dem Video */
}

/* Link-Kachel: <a> als myth-tile-header */
a.myth-tile-header {
    text-decoration: none;
    color: inherit;
}

.physics-main-tile--link {
    cursor: pointer;
}

.myth-tile-title {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    color: var(--text-primary);
    font-weight: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    text-align: center;
}

.myth-tile-title span.tile-num {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 700;
    color: var(--gold-dark);
    opacity: 0.85;
    letter-spacing: 0.1em;
}

.myth-tile-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-dark);
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.2, 1), color 0.4s ease, background-color 0.4s ease;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(168, 140, 103, 0.05);
    flex-shrink: 0;
}

.myth-tile-chevron svg {
    width: 21px;
    height: 21px;
    stroke-width: 4px;
}

.myth-tile:hover .myth-tile-chevron {
    color: var(--parchment);
    background: rgba(168, 140, 103, 0.15);
}

.myth-tile.open .myth-tile-chevron {
    transform: rotate(180deg);
    color: var(--white);
    background: var(--gold-dark);
}

.myth-tile-content-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 1.4s cubic-bezier(0.16, 1, 0.2, 1);
    position: relative;
    z-index: 2;
    /* Über dem Video */
}

.myth-tile.open .myth-tile-content-wrapper {
    grid-template-rows: 1fr;
}

.myth-tile-content {
    overflow: hidden;
    visibility: hidden;
    transition: visibility 1.4s step-end;
}

.myth-tile.open .myth-tile-content {
    visibility: visible;
    transition: visibility 0s step-start;
}

.myth-tile-inner {
    padding: 0 2.75rem 2.75rem 2.75rem;
    opacity: 0;
    transform: translateY(-15px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.2, 1), transform 0.8s cubic-bezier(0.16, 1, 0.2, 1);
}

.myth-tile.open .myth-tile-inner {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 1.4s cubic-bezier(0.16, 1, 0.2, 1) 0.15s, transform 1.4s cubic-bezier(0.16, 1, 0.2, 1) 0.15s;
}

/* Adjustments inside accordion to fit the new styling */
.myth-tile-inner .myth-article-layout {
    max-width: 100%;
    margin: 0;
    gap: 2rem;
}

@media (max-width: 768px) {
    .myth-tile-header {
        padding: 1.5rem 1.75rem;
    }

    .myth-tile-title {
        font-size: 1.35rem;
        gap: 0.5rem;
    }

    .myth-tile-inner {
        padding: 0 1.5rem 2rem 1.5rem;
    }

    .myth-tile-chevron {
        width: 30px;
        height: 30px;
    }
}

.myth-grid-layout {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 4rem;
    align-items: flex-start;
    margin-bottom: 4rem;
}

.myth-text-block {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}



.myth-heading {
    font-size: 2.2rem;
    line-height: 1.25;
    color: var(--text-primary);
}

.myth-paragraph {
    font-size: 1.2rem;
    /* Um 15% vergrössert (von 1.05rem auf 1.2rem) */
    color: var(--text-secondary);
    line-height: 1.7;
    font-weight: 400;
    /* Auf 400 (Regular) reduziert für leichtere Lesbarkeit */
}

/* Visual Cards */
.chart-card,
.interactive-diagram-card,
.check-card {
    padding: 2.5rem;
    min-height: 380px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.chart-title,
.diagram-title,
.check-title {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.chart-subtitle,
.diagram-subtitle {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 2rem;
}

/* Bar Chart Styling */
.bar-chart-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.chart-bar-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.bar-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.bar-wrapper {
    background: rgba(28, 25, 23, 0.05);
    border-radius: 50px;
    overflow: hidden;
    height: 24px;
    width: 100%;
}

.bar {
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--white);
    border-radius: 50px;
    transition: width 1s ease-in-out;
}

.food-bar {
    background: linear-gradient(90deg, var(--gold-dark), var(--parchment));
}

.water-bar {
    background: linear-gradient(90deg, var(--accent-blue), var(--accent-glow));
}

.bar-comparison {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
}

.chart-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    border-top: 1px solid var(--border-color);
    padding-top: 1.5rem;
}

.stat-box {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-number {
    font-family: var(--font-serif);
    font-size: 2rem;
    color: var(--accent-blue);
    font-weight: 600;
}

.stat-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.3;
}

/* Cell Simulation */
.membrane-simulation-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.simulation-svg {
    width: 100%;
    height: auto;
    max-height: 240px;
    background: var(--white);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.02);
}

.svg-text {
    font-family: var(--font-sans);
    font-size: 9px;
    fill: var(--text-secondary);
}

.svg-text.bold {
    font-weight: 700;
    fill: var(--text-primary);
    letter-spacing: 0.05em;
}

.svg-text.small {
    font-size: 8px;
    fill: var(--white);
}

.svg-text.extra-small {
    font-size: 7px;
    fill: var(--text-muted);
}

.svg-text.gold {
    fill: var(--gold-medium);
    font-weight: 600;
}

.svg-text.vertical {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 0.1em;
    font-weight: 600;
    font-size: 8px;
}

.btn-sm {
    padding: 0.6rem 1.5rem;
    font-size: 0.8rem;
}

/* Cell simulation keyframes */
@keyframes flowWater {
    0% {
        transform: translate(0, 0);
        opacity: 0.3;
    }

    30% {
        opacity: 1;
    }

    70% {
        opacity: 1;
    }

    100% {
        transform: translate(240px, 15px);
        opacity: 0;
    }
}

@keyframes flushWaste {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    85% {
        opacity: 1;
    }

    100% {
        transform: translate(-200px, -15px);
        opacity: 0;
    }
}

@keyframes pulseMembrane {

    0%,
    100% {
        opacity: 0.15;
    }

    50% {
        opacity: 0.25;
    }
}

.water-molecule-animated {
    opacity: 0;
}

.waste-particle-animated {
    opacity: 0;
}

.simulation-svg.animating .water-molecule-animated {
    animation: flowWater 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.simulation-svg.animating .waste-particle-animated {
    animation: flushWaste 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.simulation-svg.animating .stable-mineral {
    animation: pulseMembrane 2s ease-in-out infinite;
}

/* Checklist */
.fact-checklist {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.fact-checklist li {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.check-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.1);
    color: var(--green);
    border: 1px solid rgba(16, 185, 129, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 700;
    flex-shrink: 0;
}

.check-text {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.check-text strong {
    color: var(--text-primary);
    display: block;
    margin-bottom: 0.25rem;
}

/* Table Section */
.myth-table-section {
    margin-top: 5rem;
    border-top: 1px solid var(--border-color);
    padding-top: 4rem;
}

.table-section-title {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.table-section-subtitle {
    font-size: 1rem;
    color: var(--text-muted);
    margin-bottom: 3rem;
}

.text-center {
    text-align: center;
}

/* Quiz Section styling */
.quiz-section {
    background: radial-gradient(circle at 50% 100%, rgba(27, 99, 138, 0.05) 0%, rgba(250, 246, 238, 0) 70%);
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--border-color);
}

#wissens-test {
    display: none;
}

#wissens-test.show {
    display: block;
}

.quote-callout.myth-quote-callout-sans {
    font-family: var(--font-sans);
    font-weight: bold;
    font-style: normal;
    font-size: 1.4rem;
    margin: 2rem 0;
    border-left-color: var(--accent-blue);
}

.quiz-card {
    max-width: 750px;
    margin: 0 auto;
    padding: 3rem;
    min-height: 400px;
    position: relative;
}

.quiz-step {
    display: none;
    flex-direction: column;
    gap: 2rem;
}

.quiz-step.active {
    display: flex;
}

.quiz-progress {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent-blue);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.quiz-question {
    font-size: 1.8rem;
    line-height: 1.3;
    color: var(--text-primary);
}

.quiz-options {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.quiz-option-btn {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.25rem 2rem;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    text-align: left;
    transition: var(--transition-smooth);
    cursor: pointer;
}

.quiz-option-btn:hover {
    border-color: var(--border-color-hover);
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-2px);
}

.quiz-option-btn.selected-correct {
    background: rgba(16, 185, 129, 0.08);
    border-color: var(--green);
}

.quiz-option-btn.selected-incorrect {
    background: rgba(239, 68, 68, 0.08);
    border-color: var(--red);
}

.option-letter {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(28, 25, 23, 0.05);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
    transition: var(--transition-fast);
}

.quiz-option-btn:hover .option-letter {
    background: var(--text-primary);
    color: var(--white);
}

.quiz-option-btn.selected-correct .option-letter {
    background: var(--green);
    color: var(--white);
}

.quiz-option-btn.selected-incorrect .option-letter {
    background: var(--red);
    color: var(--white);
}

.option-text {
    font-size: 0.95rem;
    color: var(--text-secondary);
    font-weight: 500;
    line-height: 1.5;
}

.quiz-option-btn:hover .option-text {
    color: var(--text-primary);
}

.quiz-feedback {
    border-top: 1px solid var(--border-color);
    padding-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.quiz-feedback.hidden {
    display: none;
    opacity: 0;
}

.feedback-text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.feedback-text strong {
    color: var(--text-primary);
}

/* Result Screen styling */
.result-celebration {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2rem;
    padding: 1rem 0;
}

.certificate-frame {
    padding: 3rem;
    max-width: 500px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    border-radius: 16px;
    background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.75) 100%);
    box-shadow: 0 15px 40px rgba(168, 140, 103, 0.12);
    position: relative;
}

.certificate-glow {
    position: absolute;
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(27, 99, 138, 0.1) 0%, rgba(0, 0, 0, 0) 70%);
    z-index: 0;
    pointer-events: none;
}

.cert-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.cert-user-rank {
    font-size: 2.2rem;
    color: var(--accent-blue);
    background: linear-gradient(135deg, var(--accent-blue) 30%, var(--accent-glow) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cert-description {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.cert-score {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    background: rgba(28, 25, 23, 0.05);
    padding: 0.4rem 1rem;
    border-radius: 50px;
}

/* Mobile styling adaptions */
@media (max-width: 992px) {
    .myth-grid-layout {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

}

@media (max-width: 768px) {
    .hero-video-banner {
        /* 4:3 auf Mobile: mehr Video sichtbar als quadratisch, weniger schmal als 5:1 */
        aspect-ratio: 4 / 3;
        width: 100%;
        margin: 0 auto;
    }

    .hero-video-banner video {
        /* Mobile: Bildmitte zentrieren, leicht nach oben für bessere Komposition */
        object-position: center 35%;
    }
}

@media (max-width: 576px) {
    .quiz-card {
        padding: 1.5rem;
    }

    .quiz-question {
        font-size: 1.4rem;
    }

    .quiz-option-btn {
        padding: 1rem;
        gap: 1rem;
    }

    .certificate-frame {
        padding: 2rem 1.5rem;
    }
}

/* Article / Reading Layout for Myth 1 */
.myth-article-layout {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.myth-article-body {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.myth-article-body .table-title {
    font-family: var(--font-sans);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-top: 2rem;
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
    text-align: center;
}

.quote-callout {
    border-left: 4px solid var(--accent-blue);
    background: rgba(27, 99, 138, 0.05);
    padding: 2rem;
    font-family: var(--font-serif);
    font-size: 1.5rem;
    line-height: 1.5;
    font-style: italic;
    color: var(--text-primary);
    margin: 2.5rem 0;
    border-radius: 0 12px 12px 0;
    box-shadow: inset 4px 0 12px rgba(27, 99, 138, 0.02);
    text-align: center;
}

/* ═══ PERFECTION SWEEP ADDITIONS ═══ */

/* Logo Fallback System */
.logo-img.img-error {
    display: none !important;
}

.logo-img.img-error+.logo-text {
    display: inline !important;
}

/* Common Header/Logo utilities */
.logo-img {
    height: 35px;
    width: auto;
}

/* Custom layout fixes for inline styles */
.hero-description-bold {
    font-weight: 800;
    text-align: left;
}

.section-header-left {
    text-align: left;
    margin: 0 0 3rem 0;
}

.middle-align {
    vertical-align: middle;
}

.margin-right-small {
    margin-right: 6px;
}

.table-title-left {
    text-align: left !important;
    font-weight: 600 !important;
}

.section-subtitle-bold {
    font-weight: 600;
}

/* ═══ HERO CHEVRON REVEAL SECTION ═══ */
.chevron-reveal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.4);
    color: var(--text-primary);
    transition: var(--transition-smooth);
    margin-top: 1.5rem;
    margin-bottom: 2.5rem;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(168, 140, 103, 0.05);
}

.chevron-reveal-btn:hover {
    background: rgba(27, 99, 138, 0.05);
    border-color: var(--accent-blue);
    color: var(--accent-blue);
    transform: translateY(3px);
}

.chevron-reveal-btn svg {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.chevron-reveal-btn.active svg {
    transform: rotate(180deg);
}

.revealed-text-container {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
    width: 100%;
    text-align: left;
}

.revealed-text-container.active {
    opacity: 1;
    margin-top: 2rem;
    margin-bottom: 3rem;
}

.revealed-text-content {
    padding: 2.5rem;
    background: var(--bg-surface);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(168, 140, 103, 0.08);
}

.revealed-title {
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
    font-weight: 300;
}

.revealed-lead {
    font-size: 1.3rem;
    font-style: italic;
    margin-bottom: 2rem;
    color: var(--accent-blue);
    border-left: 3px solid var(--accent-blue);
    padding-left: 1.5rem;
    line-height: 1.5;
}

.revealed-body p {
    font-size: 1.05rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

.revealed-quote {
    font-size: 1.25rem;
    font-style: italic;
    color: var(--text-primary);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding: 1.5rem 0;
    margin: 2.5rem 0 1.5rem 0;
    text-align: center;
    line-height: 1.6;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .revealed-text-content {
        padding: 1.5rem;
    }

    .revealed-title {
        font-size: 1.6rem;
    }

    .revealed-lead {
        font-size: 1.1rem;
        padding-left: 1rem;
    }

    .revealed-body p {
        font-size: 0.95rem;
    }

    .revealed-quote {
        font-size: 1.05rem;
        padding: 1rem 0;
    }
}

/* ═══ PRAXIS PAGE CUSTOM EXTENSIONS ═══ */
.praxis-intro-layout {
    max-width: 800px;
    margin: 0 auto 4rem auto;
    text-align: center;
}

.praxis-intro-title {
    font-size: clamp(1.8rem, 2.5vw, 2.8rem);
    line-height: 1.2;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}

.praxis-intro-p {
    font-size: clamp(0.95rem, 1.1vw, 1.15rem);
    color: var(--text-secondary);
    line-height: 1.7;
}

.praxis-table-section {
    margin: 5rem 0;
}

.praxis-table-section .table-title {
    font-size: clamp(1.4rem, 2vw, 2rem);
    margin-bottom: 2rem;
    text-align: center;
    color: var(--text-primary);
}

.praxis-grid {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    margin: 4rem auto 0 auto;
}

/* Accordion Card Styles for Praxis Page */
.restart-card {
    overflow: hidden;
    padding: 0;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.restart-card:hover {
    transform: translateY(-2px);
    border-color: rgba(27, 99, 138, 0.35);
    background-color: rgba(255, 255, 255, 0.85);
}

.restart-card.open {
    background-color: rgba(255, 255, 255, 0.95);
    border-color: rgba(27, 99, 138, 0.5);
    box-shadow: 0 15px 40px rgba(168, 140, 103, 0.1);
    transform: translateY(0);
}

.restart-card-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.75rem 2.25rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    outline: none;
}

.restart-card-title-group {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.restart-card-title {
    font-size: 1.35rem;
    color: var(--text-primary);
    margin: 0;
    font-weight: 500;
}

.restart-bullet {
    width: 8px;
    height: 8px;
    background: var(--accent-blue);
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 10px rgba(27, 99, 138, 0.3);
}

.restart-card-body {
    padding: 0 2.25rem 2.25rem 2.25rem;
}

.restart-card .tile-chevron {
    width: 36px;
    height: 36px;
    background: rgba(28, 25, 23, 0.03);
    color: var(--text-muted);
}

.restart-card:hover .tile-chevron {
    color: var(--accent-blue);
    background: rgba(27, 99, 138, 0.05);
}

.restart-card.open .tile-chevron {
    transform: rotate(180deg);
    color: var(--white);
    background: var(--accent-blue);
}

@media (max-width: 768px) {
    .restart-card-header {
        padding: 1.25rem 1.5rem;
    }

    .restart-card-body {
        padding: 0 1.5rem 1.5rem 1.5rem;
    }

    .restart-card-title {
        font-size: 1.15rem;
    }
}

/* Spacing between consecutive card paragraphs */
.restart-card-desc+.restart-card-desc {
    margin-top: 1rem;
}

/* ═══ PHYSICS PAGE: Sub-Tiles Wrapper ═══ */
.physics-sub-tiles-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 1.4s cubic-bezier(0.16, 1, 0.2, 1);
    overflow: hidden;
}

.physics-sub-tiles-wrapper.open {
    grid-template-rows: 1fr;
}

.physics-sub-tiles-content {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-height: 0;
    padding-top: 0.5rem;
    padding-bottom: 2rem;
}

.physics-main-tile-header {
    text-align: center;
}

.physics-header-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.physics-title {
    font-size: clamp(2rem, 3.5vw, 3.5rem);
    line-height: 1.15;
}

.physics-subtitle {
    font-size: clamp(0.95rem, 1.1vw, 1.15rem);
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* ═══ COLLAPSIBLE SECTION SYSTEM (Praxis/Physik Sub-Cards) ═══ */
.collapsible-section .collapsible-content-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

.collapsible-section.open .collapsible-content-wrapper {
    grid-template-rows: 1fr;
}

.collapsible-section .tile-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        color 0.4s ease,
        background-color 0.4s ease;
}

.collapsible-section.open .tile-chevron {
    transform: rotate(180deg);
}

/* Quote callout used in myth tiles */
.myth-quote-callout {
    border-left: 4px solid var(--gold-dark);
    background: rgba(168, 140, 103, 0.06);
    padding: 1.75rem 2rem;
    font-family: var(--font-serif);
    font-size: 1.4rem;
    line-height: 1.5;
    font-style: italic;
    color: var(--text-primary);
    margin: 1.5rem 0;
    border-radius: 0 12px 12px 0;
}

/* Method section title spacing */
.method-section-title {
    margin-top: 3rem;
}

/* Table intro paragraph spacing */
.table-intro-paragraph {
    margin-top: 1rem;
}

/* Spaced paragraph variant (replacing inline margin-top: 1rem) */
.myth-paragraph-spaced {
    margin-top: 1rem;
}

/* ═══════════════════════════════════════════════
   STICKY TITLE BAR
   Erscheint unterhalb des Nav-Balkens beim Scrollen.
   Volle Seitenbreite, zentrierter Titeltext.
════════════════════════════════════════════════ */
.sticky-title-bar {
    position: fixed;
    top: var(--header-height);
    /* 80px: default-Zustand */
    left: 0;
    width: 100%;
    z-index: 999;

    /* Exaktes Screenshot-Gold, 100% deckend */
    background: var(--gold-light);
    border-bottom: 1px solid var(--gold-border);

    /* Layout */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2rem;
    height: 0;
    overflow: hidden;
    /* Clip beim Slide-down – Inhalt darf maximal die is-visible-Höhe einnehmen */

    /* Slide-down + Fade + Top-Transition
       top läuft synchron mit der Header-Schrumpfung (0.4s) */
    opacity: 0;
    transition:
        height 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        top 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.sticky-title-bar.is-visible {
    height: 2.063rem;
    /* 150% der früheren Höhe (1.375rem × 1.5) – Platz für 1–2 Textzeilen */
    opacity: 1;
    pointer-events: auto;
}

/* Wenn Header auf 70px schrumpft: Bar folgt ohne JS-Eingriff, nur CSS */
.header.scrolled~.sticky-title-bar {
    top: 70px;
}

.sticky-title-bar__text {
    font-family: var(--font-montserrat);
    font-size: clamp(0.594rem, 0.842vw, 0.77rem);
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #000000;

    /* Zeilenumbruch erlaubt: 1- und 2-zeilige Titel finden eleganten Platz */
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    max-width: 88%;
    text-align: center;
    line-height: 1.3;

    /* Eleganter, langsamer Text-Fade beim Titelwechsel */
    transition:
        opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.55s cubic-bezier(0.4, 0, 0.2, 1),
        letter-spacing 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(0);
}

.sticky-title-bar__text.is-changing {
    opacity: 0;
    transform: translateY(-4px);
    letter-spacing: 0.25em;
}

@media (max-width: 768px) {
    .sticky-title-bar.is-visible {
        height: 1.875rem;
        /* 150% der früheren Mobile-Höhe (1.25rem × 1.5) */
    }

    .sticky-title-bar__text {
        font-size: 0.54rem;
        letter-spacing: 0.12em;
        max-width: 92%;
    }
}

/* ═══════════════════════════════════════════════
   SCROLL-UP BUTTON (Mobile Doppel-Chevron)
   Nur auf Mobile sichtbar (max-width: 768px).
   Erscheint nach unten-Scrollen, blendet nach
   1 Sekunde Stillstand elegant aus.
════════════════════════════════════════════════ */
.scroll-up-btn {
    display: none; /* Desktop: versteckt */
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    z-index: 1100;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
    /* Kein backdrop-filter – GPU-Schutz */
}

.scroll-up-btn.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.scroll-up-btn.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.scroll-up-btn__icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: -2px;
    pointer-events: none;
}

.scroll-up-btn__icon svg {
    display: block;
    width: 1.25rem;
    height: 0.85rem;
    fill: none;
    stroke: var(--gold-light, #c9a96e);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 1px 3px rgba(168, 140, 103, 0.4));
}

@media (max-width: 768px) {
    .scroll-up-btn {
        display: flex;
    }
}