/**
 * ═══════════════════════════════════════════════════════════════════════════
 * SAKRALE ANATOMIE — Styling
 * Das Innere Universum · Atlantis Farbschema
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ─────────────── Variablen ─────────────── */
:root {
    /* Atlantis Basis */
    --schwarz: #050608;
    --schwarz-panel: #0a0c10;
    --schwarz-card: #0d1015;
    --schwarz-hover: #12161c;

    /* Gold */
    --gold: #d4af37;
    --gold-hell: #f0d060;
    --gold-dunkel: #9a7b1c;
    --gold-glow: rgba(212, 175, 55, 0.4);
    --gold-subtil: rgba(212, 175, 55, 0.15);

    /* Malediven-Blau */
    --cyan: #40E0D0;
    --cyan-hell: #7FFFD4;
    --cyan-dunkel: #20B2AA;
    --cyan-glow: rgba(64, 224, 208, 0.4);
    --cyan-subtil: rgba(64, 224, 208, 0.15);

    /* Weiß */
    --weiss: #f0f0f0;
    --weiss-gedaempft: rgba(240, 240, 240, 0.85);
    --weiss-subtil: rgba(240, 240, 240, 0.6);
    --weiss-schwach: rgba(240, 240, 240, 0.25);
    --weiss-minimal: rgba(240, 240, 240, 0.1);

    /* Fonts */
    --font-display: 'Cinzel', serif;
    --font-body: 'Cormorant Garamond', serif;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-medium: 0.4s ease;
    --transition-slow: 0.8s ease;
}

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

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

body {
    font-family: var(--font-body);
    font-size: 1.1rem;
    line-height: 1.7;
    background: var(--schwarz);
    color: var(--weiss);
    min-height: 100vh;
    overflow-x: hidden;
}

::selection {
    background: var(--gold);
    color: var(--schwarz);
}

/* ─────────────── Kosmischer Hintergrund ─────────────── */
#kosmosCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* EINGANG */
/* ═══════════════════════════════════════════════════════════════════════════ */

.eingang-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center bottom, #0a0c12 0%, var(--schwarz) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    transition: opacity 1.5s ease, transform 1.5s ease;
}

.eingang-screen.hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(1.1);
}

.eingang-inhalt {
    text-align: center;
    padding: 40px;
}

/* 3D Wirbelsäule */
.wirbelsaeule-container {
    position: relative;
    width: 120px;
    height: 400px;
    margin: 0 auto 50px;
    perspective: 800px;
}

.wirbelsaeule {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: wirbelsaeuleFloat 6s ease-in-out infinite;
}

@keyframes wirbelsaeuleFloat {
    0%, 100% { transform: rotateY(-5deg) translateY(0); }
    50% { transform: rotateY(5deg) translateY(-10px); }
}

.wirbel {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 10px;
    background: linear-gradient(90deg, transparent, var(--cyan-subtil), transparent);
    border: 1px solid var(--cyan-dunkel);
    border-radius: 50%;
    transition: all var(--transition-medium);
}

.wirbel::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: var(--cyan);
    border-radius: 50%;
    opacity: 0.5;
    box-shadow: 0 0 10px var(--cyan-glow);
}

.wirbel:hover {
    border-color: var(--gold);
    box-shadow: 0 0 20px var(--gold-glow);
}

/* Kundalini-Schlange */
.kundalini {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 100%;
    pointer-events: none;
}

.kundalini-svg {
    width: 100%;
    height: 100%;
}

.kundalini-pfad {
    fill: none;
    stroke: var(--gold);
    stroke-width: 2;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: kundaliniAufstieg 4s ease-in-out infinite;
    filter: drop-shadow(0 0 8px var(--gold-glow));
}

@keyframes kundaliniAufstieg {
    0% { stroke-dashoffset: 1000; opacity: 0.3; }
    50% { stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dashoffset: -1000; opacity: 0.3; }
}

/* Chakra-Lichter */
.chakra-lichter {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 100%;
    pointer-events: none;
}

.chakra-licht {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--chakra-farbe);
    box-shadow: 0 0 30px var(--chakra-farbe), 0 0 60px var(--chakra-farbe);
    animation: chakraPulse 2s ease-in-out infinite;
}

.chakra-licht[data-chakra="1"] { bottom: 5%; animation-delay: 0s; }
.chakra-licht[data-chakra="2"] { bottom: 18%; animation-delay: 0.15s; }
.chakra-licht[data-chakra="3"] { bottom: 32%; animation-delay: 0.3s; }
.chakra-licht[data-chakra="4"] { bottom: 48%; animation-delay: 0.45s; }
.chakra-licht[data-chakra="5"] { bottom: 62%; animation-delay: 0.6s; }
.chakra-licht[data-chakra="6"] { bottom: 78%; animation-delay: 0.75s; }
.chakra-licht[data-chakra="7"] { bottom: 92%; animation-delay: 0.9s; }

@keyframes chakraPulse {
    0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.7; }
    50% { transform: translateX(-50%) scale(1.3); opacity: 1; }
}

/* Eingang Texte */
.eingang-titel {
    font-family: var(--font-display);
    font-size: 3.5rem;
    font-weight: 400;
    color: var(--weiss);
    letter-spacing: 20px;
    margin-bottom: 20px;
    text-shadow: 0 0 60px var(--cyan-glow);
}

.eingang-zitat {
    font-family: var(--font-body);
    font-size: 1.2rem;
    font-style: italic;
    color: var(--gold);
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.eingang-untertitel {
    font-family: var(--font-body);
    font-size: 1.1rem;
    color: var(--weiss-subtil);
    letter-spacing: 4px;
    margin-bottom: 60px;
}

/* Eingang Button */
.eingang-button {
    position: relative;
    padding: 20px 80px;
    background: transparent;
    border: 1px solid var(--gold);
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--gold);
    letter-spacing: 6px;
    cursor: pointer;
    overflow: hidden;
    transition: all var(--transition-medium);
}

.eingang-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.3), transparent);
    transition: left var(--transition-medium);
}

.eingang-button:hover {
    background: var(--gold);
    color: var(--schwarz);
    box-shadow: 0 0 50px var(--gold-glow);
}

.eingang-button:hover::before {
    left: 100%;
}

.button-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, var(--gold-glow) 0%, transparent 70%);
    opacity: 0;
    transition: opacity var(--transition-medium);
    pointer-events: none;
}

.eingang-button:hover .button-glow {
    opacity: 0.3;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* HAUPTBEREICH */
/* ═══════════════════════════════════════════════════════════════════════════ */

.hauptbereich {
    min-height: 100vh;
    position: relative;
    z-index: 10;
}

.hauptbereich.hidden {
    display: none;
}

/* ─────────────── Navigation ─────────────── */
.nav-sterne {
    position: fixed;
    top: 50%;
    left: 30px;
    transform: translateY(-50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-height: 85vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 15px 10px 15px 0;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

/* Scrollbar nur bei Hover zeigen */
.nav-sterne:hover {
    scrollbar-color: var(--gold-dunkel) transparent;
}

.nav-sterne::-webkit-scrollbar {
    width: 4px;
}

.nav-sterne::-webkit-scrollbar-track {
    background: transparent;
}

.nav-sterne::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 2px;
    transition: background 0.3s ease;
}

.nav-sterne:hover::-webkit-scrollbar-thumb {
    background: var(--gold-dunkel);
}

.nav-sterne::-webkit-scrollbar-thumb:hover {
    background: var(--gold);
}

.nav-stern {
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    opacity: 0.4;
    transition: all var(--transition-medium);
}

.nav-stern:hover,
.nav-stern.active {
    opacity: 1;
}

.stern-kern {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--schwarz-panel);
    border: 1px solid var(--weiss-schwach);
    transition: all var(--transition-medium);
    position: relative;
}

.stern-kern::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 4px;
    background: var(--cyan);
    border-radius: 50%;
    opacity: 0;
    transition: all var(--transition-medium);
}

.nav-stern:hover .stern-kern {
    border-color: var(--cyan);
    box-shadow: 0 0 15px var(--cyan-glow);
}

.nav-stern.active .stern-kern {
    background: var(--cyan);
    border-color: var(--cyan);
    box-shadow: 0 0 20px var(--cyan-glow);
}

.nav-stern.active .stern-kern::before {
    opacity: 1;
}

.nav-stern span {
    font-family: var(--font-display);
    font-size: 0.7rem;
    color: var(--weiss-subtil);
    letter-spacing: 1px;
    white-space: nowrap;
}

.nav-stern.active span {
    color: var(--weiss);
}

/* ─────────────── Bereiche ─────────────── */
.bereich {
    display: none;
    min-height: 100vh;
    padding: 80px 160px 80px 180px;
}

.bereich.active {
    display: block;
    animation: bereichFadeIn 0.6s ease;
}

@keyframes bereichFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.bereich-header {
    text-align: center;
    margin-bottom: 60px;
}

.bereich-nummer {
    display: block;
    font-family: var(--font-display);
    font-size: 0.8rem;
    color: var(--gold);
    letter-spacing: 4px;
    margin-bottom: 15px;
}

.bereich-header h2 {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 400;
    color: var(--weiss);
    letter-spacing: 10px;
    margin-bottom: 15px;
}

.bereich-beschreibung {
    font-family: var(--font-body);
    font-size: 1.2rem;
    font-style: italic;
    color: var(--weiss-subtil);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* BEREICH 1: DIE 33 WIRBEL */
/* ═══════════════════════════════════════════════════════════════════════════ */

.wirbel-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr 0.8fr;
    gap: 40px;
}

.wirbel-visualisierung {
    position: relative;
    background: var(--schwarz-panel);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    padding: 30px;
    min-height: 500px;
}

.wirbel-visualisierung canvas {
    width: 100%;
    height: 100%;
}

.wirbel-info {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.wirbel-name {
    display: block;
    font-family: var(--font-display);
    font-size: 0.9rem;
    color: var(--cyan);
    letter-spacing: 2px;
}

.wirbel-bedeutung {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--weiss-subtil);
}

/* Wissen-Karten */
.wissen-karten {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.wissen-karte {
    background: var(--schwarz-card);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    padding: 25px;
    transition: all var(--transition-medium);
}

.wissen-karte:hover {
    border-color: var(--gold-subtil);
    transform: translateY(-3px);
}

.karte-symbol {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--gold);
    margin-bottom: 15px;
}

.wissen-karte h3 {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--weiss);
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.wissen-karte p {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--weiss-subtil);
    line-height: 1.6;
}

/* Segmente Panel */
.segmente-panel {
    background: var(--schwarz-panel);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    padding: 25px;
}

.segmente-panel h3 {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--cyan);
    letter-spacing: 2px;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--weiss-minimal);
}

.segment {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 15px 0;
    border-bottom: 1px solid var(--weiss-minimal);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.segment:last-child {
    border-bottom: none;
}

.segment:hover {
    background: var(--schwarz-hover);
    margin: 0 -15px;
    padding-left: 15px;
    padding-right: 15px;
}

.segment-zahl {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gold-subtil);
    border: 1px solid var(--gold-dunkel);
    border-radius: 50%;
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--gold);
}

.segment-info {
    flex: 1;
}

.segment-name {
    display: block;
    font-family: var(--font-display);
    font-size: 0.85rem;
    color: var(--weiss);
    letter-spacing: 1px;
}

.segment-detail {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--weiss-schwach);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* BEREICH 2: DAS DRITTE AUGE */
/* ═══════════════════════════════════════════════════════════════════════════ */

.auge-layout {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 40px;
    align-items: start;
}

.druesen-visualisierung {
    background: var(--schwarz-panel);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    aspect-ratio: 1;
}

.druesen-visualisierung canvas {
    width: 100%;
    height: 100%;
}

/* Drüsen Info */
.druesen-info {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.druese-karte {
    background: var(--schwarz-card);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    transition: all var(--transition-medium);
}

.druese-karte:hover {
    border-color: var(--cyan-subtil);
}

.druese-symbol {
    width: 60px;
    height: 80px;
    margin: 0 auto 20px;
    color: var(--cyan);
}

.druese-karte h3 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--weiss);
    letter-spacing: 2px;
    margin-bottom: 5px;
}

.druese-alias {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 0.9rem;
    color: var(--gold);
    margin-bottom: 20px;
}

.druese-details {
    text-align: left;
}

.druese-details p {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--weiss-subtil);
    margin-bottom: 15px;
}

.druese-details ul {
    list-style: none;
    padding-left: 0;
}

.druese-details li {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--weiss-schwach);
    padding: 5px 0;
    padding-left: 20px;
    position: relative;
}

.druese-details li::before {
    content: '◆';
    position: absolute;
    left: 0;
    color: var(--cyan);
    font-size: 0.6rem;
}

/* Verbindung */
.druese-verbindung {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
}

.verbindung-linie {
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, var(--cyan), var(--gold), var(--cyan));
    animation: verbindungPulse 2s ease-in-out infinite;
}

@keyframes verbindungPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.verbindung-text {
    position: absolute;
    font-family: var(--font-display);
    font-size: 0.7rem;
    color: var(--gold);
    letter-spacing: 2px;
    background: var(--schwarz-card);
    padding: 5px 15px;
}

/* Aktivierung Panel */
.aktivierung-panel {
    background: var(--schwarz-panel);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    padding: 25px;
}

.aktivierung-panel h3 {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--cyan);
    letter-spacing: 2px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--weiss-minimal);
}

.aktivierung-text {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--weiss-subtil);
    margin-bottom: 25px;
}

.aktivierung-text em {
    color: var(--gold);
    font-style: italic;
}

.aktivierung-text strong {
    color: var(--weiss);
}

.praktiken {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.praktik {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: var(--schwarz-card);
    border-radius: 4px;
}

.praktik-name {
    font-family: var(--font-display);
    font-size: 0.8rem;
    color: var(--weiss);
    letter-spacing: 1px;
}

.praktik-info {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--weiss-schwach);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* BEREICH 3: DIE SIEBEN STERNE */
/* ═══════════════════════════════════════════════════════════════════════════ */

.sterne-layout {
    display: grid;
    grid-template-columns: 1fr 1.3fr 0.8fr;
    gap: 40px;
}

.chakra-visualisierung {
    background: var(--schwarz-panel);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    min-height: 500px;
}

.chakra-visualisierung canvas {
    width: 100%;
    height: 100%;
}

/* Chakra-Liste */
.chakra-liste {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chakra-eintrag {
    display: flex;
    gap: 20px;
    padding: 18px;
    background: var(--schwarz-card);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.chakra-eintrag:hover {
    border-color: var(--c);
    transform: translateX(5px);
}

.chakra-farbe {
    width: 8px;
    border-radius: 4px;
    background: var(--c);
    box-shadow: 0 0 15px var(--c);
}

.chakra-details {
    flex: 1;
}

.chakra-details h4 {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--weiss);
    letter-spacing: 1px;
    margin-bottom: 3px;
}

.chakra-druese {
    display: block;
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--cyan);
    margin-bottom: 5px;
}

.chakra-details p {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--weiss-schwach);
}

/* Energie Panel */
.energie-panel {
    background: var(--schwarz-panel);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    padding: 25px;
}

.energie-panel h3 {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--cyan);
    letter-spacing: 2px;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--weiss-minimal);
}

.nadi-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.nadi {
    text-align: center;
    padding: 20px 15px;
    background: var(--schwarz-card);
    border-radius: 8px;
    transition: all var(--transition-fast);
}

.nadi:hover {
    transform: scale(1.02);
}

.nadi-symbol {
    display: block;
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.nadi-name {
    display: block;
    font-family: var(--font-display);
    font-size: 0.9rem;
    color: var(--weiss);
    letter-spacing: 2px;
    margin-bottom: 5px;
}

.nadi-qualitaet {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--weiss-schwach);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* BEREICH 4: DER GOLDENE SCHNITT */
/* ═══════════════════════════════════════════════════════════════════════════ */

.phi-layout {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 1fr 1fr;
    gap: 30px;
}

.phi-visualisierung {
    position: relative;
    background: var(--schwarz-panel);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    aspect-ratio: 1;
}

.phi-visualisierung canvas {
    width: 100%;
    height: 100%;
}

.phi-zahl {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.phi-symbol {
    display: block;
    font-family: var(--font-display);
    font-size: 3rem;
    color: var(--gold);
    text-shadow: 0 0 30px var(--gold-glow);
}

.phi-wert {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--weiss-schwach);
    letter-spacing: 2px;
}

/* Proportionen Panel */
.proportionen-panel {
    background: var(--schwarz-panel);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    padding: 25px;
}

.proportionen-panel h3 {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--gold);
    letter-spacing: 2px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--weiss-minimal);
}

.proportion-liste {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.proportion {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--weiss-minimal);
}

.proportion:last-child {
    border-bottom: none;
}

.proportion-name {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--weiss-subtil);
}

.proportion-wert {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--gold);
}

/* DNA Panel */
.dna-panel {
    background: var(--schwarz-panel);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    padding: 25px;
}

.dna-panel h3 {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--cyan);
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.dna-visualisierung {
    height: 150px;
    margin-bottom: 20px;
}

.dna-visualisierung canvas {
    width: 100%;
    height: 100%;
}

.dna-fakten {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}

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

.fakt-zahl {
    display: block;
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--gold);
}

.fakt-text {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--weiss-schwach);
}

.dna-info {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--weiss-subtil);
    line-height: 1.6;
}

/* Fibonacci Panel */
.fibonacci-panel {
    background: var(--schwarz-panel);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    padding: 25px;
}

.fibonacci-panel h3 {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--gold);
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.fibonacci-reihe {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.fibonacci-reihe span {
    padding: 8px 14px;
    background: var(--schwarz-card);
    border: 1px solid var(--gold-subtil);
    border-radius: 4px;
    font-family: var(--font-display);
    font-size: 0.9rem;
    color: var(--gold);
}

.fibonacci-info {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--weiss-subtil);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* BEREICH 5: HEILIGE ZAHLEN */
/* ═══════════════════════════════════════════════════════════════════════════ */

.zahlen-layout {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 0.8fr;
    gap: 30px;
}

/* Körper-Zahlen-Visualisierung */
.koerper-zahlen-panel {
    background: var(--schwarz-panel);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    padding: 25px;
    grid-row: span 2;
}

.koerper-zahlen-panel h3 {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--cyan);
    letter-spacing: 2px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--weiss-minimal);
}

.koerper-canvas-container {
    width: 100%;
    aspect-ratio: 0.5;
    margin-bottom: 20px;
    position: relative;
}

.koerper-canvas-container canvas {
    width: 100%;
    height: 100%;
}

.koerper-legende {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.legende-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--schwarz-card);
    border-radius: 4px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.legende-item:hover {
    transform: translateX(3px);
    border-left: 2px solid var(--lf);
}

.legende-farbe {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--lf);
    box-shadow: 0 0 10px var(--lf);
}

.legende-item span:last-child {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--weiss-subtil);
}

/* Große Zahl 206 */
.grosse-zahl-panel {
    background: var(--schwarz-panel);
    border: 1px solid var(--gold-subtil);
    border-radius: 8px;
    padding: 40px;
    text-align: center;
}

.grosse-zahl {
    margin-bottom: 30px;
}

.zahl-wert {
    display: block;
    font-family: var(--font-display);
    font-size: 5rem;
    font-weight: 400;
    color: var(--gold);
    text-shadow: 0 0 50px var(--gold-glow);
    line-height: 1;
}

.zahl-label {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--weiss-subtil);
}

.zahl-bedeutung {
    text-align: left;
}

.zahl-bedeutung p {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--weiss-subtil);
    margin-bottom: 15px;
}

.zahl-bedeutung strong {
    color: var(--weiss);
}

.zahl-zusatz {
    font-size: 0.9rem;
    color: var(--weiss-schwach);
    font-style: italic;
}

/* Zahl 26 Panel */
.zahl-26-panel {
    background: var(--schwarz-panel);
    border: 1px solid var(--cyan-subtil);
    border-radius: 8px;
    padding: 40px;
}

.grosse-zahl.klein .zahl-wert {
    font-size: 4rem;
    color: var(--cyan);
    text-shadow: 0 0 50px var(--cyan-glow);
}

.erscheinungen-26 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin: 30px 0;
}

.erscheinung {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: var(--schwarz-card);
    border-radius: 4px;
}

.erscheinung-ort {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--weiss-subtil);
}

.erscheinung-zahl {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--cyan);
}

.zahl-26-bedeutung {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--weiss-subtil);
}

.zahl-26-bedeutung strong {
    color: var(--gold);
}

/* Weitere Zahlen */
.weitere-zahlen {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.weitere-zahl {
    background: var(--schwarz-card);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    padding: 20px;
    display: grid;
    grid-template-columns: 50px 1fr;
    gap: 15px;
    align-items: center;
}

.wz-wert {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--gold);
    text-align: center;
}

.wz-kontext {
    display: block;
    font-family: var(--font-display);
    font-size: 0.85rem;
    color: var(--weiss);
    letter-spacing: 1px;
    margin-bottom: 3px;
}

.wz-bedeutung {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--weiss-schwach);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* BEREICH 6: PLATONISCHE KÖRPER */
/* ═══════════════════════════════════════════════════════════════════════════ */

.formen-layout {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 40px;
}

.formen-visualisierung {
    background: var(--schwarz-panel);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    padding: 30px;
}

.formen-visualisierung canvas {
    width: 100%;
    aspect-ratio: 1;
    margin-bottom: 20px;
}

.form-auswahl {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.form-btn {
    padding: 10px 18px;
    background: transparent;
    border: 1px solid var(--weiss-schwach);
    border-radius: 4px;
    font-family: var(--font-display);
    font-size: 0.75rem;
    color: var(--weiss-subtil);
    letter-spacing: 1px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.form-btn:hover,
.form-btn.active {
    border-color: var(--gold);
    color: var(--gold);
}

.form-btn.active {
    background: var(--gold-subtil);
}

/* Form Details */
.formen-details {
    background: var(--schwarz-panel);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    padding: 30px;
}

.form-name {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--weiss);
    letter-spacing: 3px;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--weiss-minimal);
}

.form-eigenschaften {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
}

.eigenschaft {
    flex: 1;
    text-align: center;
    padding: 15px;
    background: var(--schwarz-card);
    border-radius: 4px;
}

.eigenschaft-label {
    display: block;
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--weiss-schwach);
    margin-bottom: 5px;
}

.eigenschaft-wert {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--cyan);
}

.form-korrespondenz {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.korr-element,
.korr-chakra {
    padding: 8px 15px;
    background: var(--schwarz-card);
    border: 1px solid var(--gold-subtil);
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--gold);
}

.form-beschreibung {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--weiss-subtil);
    line-height: 1.7;
}

/* Elemente Panel */
.elemente-panel {
    background: var(--schwarz-panel);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    padding: 25px;
}

.elemente-panel h3 {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--gold);
    letter-spacing: 2px;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--weiss-minimal);
}

.elemente-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.element-karte {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 15px;
    align-items: center;
    padding: 15px;
    background: var(--schwarz-card);
    border-radius: 4px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.element-karte:hover {
    transform: translateX(5px);
}

.element-symbol {
    font-size: 1.5rem;
}

.element-name {
    font-family: var(--font-display);
    font-size: 0.9rem;
    color: var(--weiss);
    letter-spacing: 1px;
}

.element-form {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--weiss-schwach);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* MEDITATION OVERLAY */
/* ═══════════════════════════════════════════════════════════════════════════ */

.meditation-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 6, 8, 0.98);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.meditation-overlay.hidden {
    display: none;
}

.meditation-overlay canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.meditation-inhalt {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 600px;
    padding: 40px;
}

.schliessen-btn {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    padding: 15px 50px;
    background: transparent;
    border: 1px solid var(--cyan);
    border-radius: 4px;
    font-family: var(--font-display);
    font-size: 0.85rem;
    color: var(--cyan);
    letter-spacing: 2px;
    cursor: pointer;
    transition: all var(--transition-medium);
}

.schliessen-btn:hover {
    background: var(--cyan);
    color: var(--schwarz);
    box-shadow: 0 0 30px var(--cyan-glow);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* BEREICH 7: DIE DREI KAMMERN */
/* ═══════════════════════════════════════════════════════════════════════════ */

.kammern-layout {
    display: grid;
    grid-template-columns: 0.7fr 1.5fr 1fr;
    gap: 40px;
}

.kammern-visualisierung {
    background: var(--schwarz-panel);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    aspect-ratio: 1;
    max-height: 280px;
}

.kammern-visualisierung canvas {
    width: 100%;
    height: 100%;
}

.kammern-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.kammer-karte {
    background: var(--schwarz-card);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    padding: 25px;
    position: relative;
    transition: all var(--transition-medium);
}

.kammer-karte:hover {
    border-color: var(--cyan-subtil);
    transform: translateX(5px);
}

.kammer-nummer {
    position: absolute;
    top: 15px;
    right: 20px;
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--gold);
    opacity: 0.3;
}

.kammer-karte h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--weiss);
    letter-spacing: 2px;
    margin-bottom: 5px;
}

.kammer-alias {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 0.9rem;
    color: var(--cyan);
    margin-bottom: 15px;
}

.kammer-details p {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--weiss-subtil);
    margin-bottom: 10px;
}

.kammer-details ul {
    list-style: none;
    padding-left: 0;
}

.kammer-details li {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--weiss-schwach);
    padding: 4px 0 4px 18px;
    position: relative;
}

.kammer-details li::before {
    content: '◇';
    position: absolute;
    left: 0;
    color: var(--gold);
    font-size: 0.6rem;
}

.kammern-wissen {
    background: var(--schwarz-panel);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    padding: 25px;
}

.kammern-wissen h3 {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--gold);
    letter-spacing: 2px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--weiss-minimal);
}

.kammern-text {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--weiss-subtil);
    margin-bottom: 20px;
}

.kammern-zitat {
    background: var(--schwarz-card);
    padding: 20px;
    border-radius: 4px;
    margin-bottom: 25px;
    border-left: 3px solid var(--gold);
}

.kammern-zitat blockquote {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 1rem;
    color: var(--weiss-subtil);
    margin-bottom: 10px;
}

.zitat-autor {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--gold);
}

.kammern-fluss {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.fluss-schritt {
    padding: 10px 18px;
    background: var(--schwarz-card);
    border: 1px solid var(--cyan-subtil);
    border-radius: 4px;
    font-family: var(--font-display);
    font-size: 0.75rem;
    color: var(--cyan);
    letter-spacing: 1px;
}

.fluss-pfeil {
    color: var(--gold);
    font-size: 1.2rem;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* BEREICH 8: DIE 12 TORE */
/* ═══════════════════════════════════════════════════════════════════════════ */

.tore-layout {
    display: grid;
    grid-template-columns: 1fr 1.5fr 0.8fr;
    gap: 40px;
}

.tore-visualisierung {
    background: var(--schwarz-panel);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    aspect-ratio: 1;
}

.tore-visualisierung canvas {
    width: 100%;
    height: 100%;
}

.nerven-liste {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.nerv-eintrag {
    display: flex;
    gap: 15px;
    align-items: center;
    padding: 12px 15px;
    background: var(--schwarz-card);
    border: 1px solid var(--weiss-minimal);
    border-radius: 6px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.nerv-eintrag:hover {
    border-color: var(--gold-subtil);
    transform: scale(1.02);
}

.nerv-eintrag.aktiv {
    border-color: var(--gold);
    background: rgba(212, 175, 55, 0.15);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.3), inset 0 0 15px rgba(212, 175, 55, 0.1);
    animation: nervBlitz 0.3s ease-out;
}

.nerv-eintrag.aktiv .nerv-nummer {
    background: var(--gold);
    color: var(--schwarz);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.6);
}

@keyframes nervBlitz {
    0% {
        box-shadow: 0 0 40px rgba(212, 175, 55, 0.8), inset 0 0 30px rgba(212, 175, 55, 0.4);
        transform: scale(1.05);
    }
    100% {
        box-shadow: 0 0 20px rgba(212, 175, 55, 0.3), inset 0 0 15px rgba(212, 175, 55, 0.1);
        transform: scale(1);
    }
}

.nerv-nummer {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gold-subtil);
    border: 1px solid var(--gold-dunkel);
    border-radius: 50%;
    font-family: var(--font-display);
    font-size: 0.75rem;
    color: var(--gold);
}

.nerv-info h4 {
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--weiss);
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.nerv-funktion {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--weiss-schwach);
    display: block;
}

.nerv-zeichen {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--cyan);
    display: block;
    margin-top: 3px;
}

.vagus-panel {
    background: var(--schwarz-panel);
    border: 1px solid var(--gold-subtil);
    border-radius: 8px;
    padding: 25px;
}

.vagus-panel h3 {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--gold);
    letter-spacing: 2px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--weiss-minimal);
}

.vagus-text {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--weiss-subtil);
    margin-bottom: 20px;
}

.vagus-verbindungen {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.vagus-verbindungen span {
    padding: 8px 14px;
    background: var(--schwarz-card);
    border: 1px solid var(--cyan-subtil);
    border-radius: 20px;
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--cyan);
}

.vagus-info {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--weiss-schwach);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* BEREICH 9: DAS GOLDENE OHR */
/* ═══════════════════════════════════════════════════════════════════════════ */

.ohr-layout {
    display: grid;
    grid-template-columns: 1fr 1.3fr 0.8fr;
    gap: 40px;
}

.cochlea-visualisierung {
    position: relative;
    background: var(--schwarz-panel);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    aspect-ratio: 1;
}

.cochlea-visualisierung canvas {
    width: 100%;
    height: 100%;
}

.cochlea-winkel {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.winkel-wert {
    display: block;
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--gold);
    text-shadow: 0 0 20px var(--gold-glow);
}

.winkel-label {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--weiss-schwach);
}

.cochlea-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cochlea-karte {
    background: var(--schwarz-card);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    padding: 25px;
}

.cochlea-karte h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--weiss);
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.cochlea-karte > p {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--weiss-subtil);
    margin-bottom: 20px;
}

.cochlea-fakten {
    display: flex;
    justify-content: space-around;
}

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

.cf-zahl {
    display: block;
    font-family: var(--font-display);
    font-size: 1.8rem;
    color: var(--gold);
}

.cf-text {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--weiss-schwach);
}

.cochlea-bedeutung {
    background: var(--schwarz-card);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    padding: 25px;
}

.cochlea-bedeutung h4 {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--cyan);
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.cochlea-bedeutung p {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--weiss-subtil);
    margin-bottom: 15px;
}

.cochlea-mystik {
    font-style: italic;
    color: var(--weiss-schwach) !important;
}

.frequenz-panel {
    background: var(--schwarz-panel);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    padding: 25px;
}

.frequenz-panel h3 {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--gold);
    letter-spacing: 2px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--weiss-minimal);
}

.frequenz-liste {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.frequenz {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: var(--schwarz-card);
    border-radius: 4px;
    transition: all var(--transition-fast);
}

.frequenz:hover {
    transform: translateX(3px);
}

.freq-hz {
    font-family: var(--font-display);
    font-size: 0.9rem;
    color: var(--cyan);
}

.freq-wirkung {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--weiss-schwach);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* BEREICH 10: DAS GOLDENE HERZ */
/* ═══════════════════════════════════════════════════════════════════════════ */

.herz-layout {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 30px;
}

.herz-visualisierung {
    background: var(--schwarz-panel);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    aspect-ratio: 1;
}

.herz-visualisierung canvas {
    width: 100%;
    height: 100%;
}

.herz-proportionen {
    background: var(--schwarz-panel);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    padding: 25px;
}

.herz-proportionen h3 {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--gold);
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.herz-intro {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--weiss-subtil);
    margin-bottom: 20px;
}

.herz-fakten {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.herz-fakt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: var(--schwarz-card);
    border-radius: 4px;
}

.hf-label {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--weiss-subtil);
}

.hf-wert {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--gold);
}

.herz-ekg {
    background: var(--schwarz-card);
    border-radius: 8px;
    padding: 15px;
}

.herz-ekg canvas {
    width: 100%;
    height: 60px;
}

.ekg-label {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--weiss-schwach);
    text-align: center;
    margin-top: 10px;
}

.herz-wissen {
    background: var(--schwarz-panel);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    padding: 25px;
}

.herz-wissen h3 {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--cyan);
    letter-spacing: 2px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--weiss-minimal);
}

.herz-fakt-karte {
    text-align: center;
    padding: 25px;
    background: var(--schwarz-card);
    border-radius: 8px;
    margin-bottom: 20px;
}

.hfk-zahl {
    display: block;
    font-family: var(--font-display);
    font-size: 2.5rem;
    color: var(--gold);
    text-shadow: 0 0 30px var(--gold-glow);
}

.hfk-text {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--weiss-schwach);
}

.herz-text {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--weiss-subtil);
    margin-bottom: 15px;
}

.herz-kohärenz {
    background: var(--schwarz-card);
    padding: 15px;
    border-radius: 4px;
    border-left: 3px solid var(--cyan);
}

.herz-kohärenz h4 {
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--cyan);
    margin-bottom: 10px;
}

.herz-kohärenz p {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--weiss-subtil);
}

.herz-mystik {
    background: var(--schwarz-panel);
    border: 1px solid var(--gold-subtil);
    border-radius: 8px;
    padding: 25px;
}

.herz-mystik h3 {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--gold);
    letter-spacing: 2px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--weiss-minimal);
}

.herz-tradition {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tradition {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    background: var(--schwarz-card);
    border-radius: 4px;
}

.trad-kultur {
    font-family: var(--font-display);
    font-size: 0.75rem;
    color: var(--gold);
    letter-spacing: 1px;
}

.trad-text {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--weiss-schwach);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* BEREICH 11: DER LEBENSBAUM */
/* ═══════════════════════════════════════════════════════════════════════════ */

.lunge-layout {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
    gap: 30px;
}

.lunge-visualisierung {
    background: var(--schwarz-panel);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    aspect-ratio: 0.8;
    grid-row: span 2;
}

.lunge-visualisierung canvas {
    width: 100%;
    height: 100%;
}

.fraktal-info {
    background: var(--schwarz-panel);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    padding: 25px;
}

.fraktal-info h3 {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--cyan);
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.fraktal-intro {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--weiss-subtil);
    margin-bottom: 20px;
}

.fraktal-fakten {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}

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

.ff-zahl {
    display: block;
    font-family: var(--font-display);
    font-size: 1.8rem;
    color: var(--gold);
}

.ff-text {
    font-family: var(--font-body);
    font-size: 0.7rem;
    color: var(--weiss-schwach);
}

.fraktal-text {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--weiss-schwach);
}

.baum-panel {
    background: var(--schwarz-panel);
    border: 1px solid var(--gold-subtil);
    border-radius: 8px;
    padding: 25px;
}

.baum-panel h3 {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--gold);
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.baum-text {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--weiss-subtil);
    margin-bottom: 20px;
}

.baum-korrespondenzen {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.baum-korr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 15px;
    background: var(--schwarz-card);
    border-radius: 4px;
}

.bk-lunge {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--cyan);
    flex: 1;
}

.bk-pfeil {
    color: var(--gold);
    font-size: 1rem;
}

.bk-baum {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--gold);
    flex: 1;
    text-align: right;
}

.atem-panel {
    background: var(--schwarz-panel);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    padding: 25px;
}

.atem-panel h3 {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--cyan);
    letter-spacing: 2px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--weiss-minimal);
}

.atem-zitat {
    background: var(--schwarz-card);
    padding: 20px;
    border-radius: 4px;
    margin-bottom: 20px;
    text-align: center;
    border-left: 3px solid var(--gold);
}

.atem-zitat blockquote {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 1rem;
    color: var(--weiss-subtil);
    margin-bottom: 10px;
}

.zitat-quelle {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--gold);
}

.atem-praktiken {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.atem-praktik {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: var(--schwarz-card);
    border-radius: 4px;
}

.ap-name {
    font-family: var(--font-display);
    font-size: 0.85rem;
    color: var(--weiss);
    letter-spacing: 1px;
}

.ap-info {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--weiss-schwach);
}

.atem-info {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--weiss-schwach);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* BEREICH 12: DAS HORUS-AUGE */
/* ═══════════════════════════════════════════════════════════════════════════ */

.horus-layout {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 30px;
}

.horus-visualisierung {
    background: var(--schwarz-panel);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    aspect-ratio: 1;
}

.horus-visualisierung canvas {
    width: 100%;
    height: 100%;
}

.horus-anatomie {
    background: var(--schwarz-panel);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    padding: 25px;
}

.horus-anatomie h3 {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--gold);
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.horus-intro {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--weiss-subtil);
    margin-bottom: 20px;
}

.horus-mapping {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mapping-item {
    display: grid;
    grid-template-columns: 30px 1fr 30px 1fr;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: var(--schwarz-card);
    border-radius: 4px;
}

.map-symbol {
    font-size: 1.2rem;
    color: var(--gold);
    text-align: center;
}

.map-anatomie {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--weiss-subtil);
}

.map-pfeil {
    color: var(--cyan);
    text-align: center;
}

.map-entsprechung {
    font-family: var(--font-display);
    font-size: 0.8rem;
    color: var(--cyan);
    letter-spacing: 1px;
}

.kristall-panel {
    background: var(--schwarz-panel);
    border: 1px solid var(--cyan-subtil);
    border-radius: 8px;
    padding: 25px;
}

.kristall-panel h3 {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--cyan);
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.kristall-fakt {
    text-align: center;
    padding: 20px;
    background: var(--schwarz-card);
    border-radius: 8px;
    margin-bottom: 20px;
}

.kf-zahl {
    display: block;
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--cyan);
}

.kf-text {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--weiss-schwach);
}

.kristall-text {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--weiss-subtil);
    margin-bottom: 15px;
}

.kristall-eigenschaft {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.kristall-eigenschaft span {
    padding: 6px 12px;
    background: var(--schwarz-card);
    border: 1px solid var(--cyan-subtil);
    border-radius: 15px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--cyan);
}

.dmt-panel {
    background: var(--schwarz-panel);
    border: 1px solid var(--gold-subtil);
    border-radius: 8px;
    padding: 25px;
}

.dmt-panel h3 {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--gold);
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.dmt-formel {
    text-align: center;
    padding: 20px;
    background: var(--schwarz-card);
    border-radius: 8px;
    margin-bottom: 20px;
}

.formel {
    display: block;
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--gold);
}

.formel-name {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--weiss-schwach);
}

.dmt-text {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--weiss-subtil);
    margin-bottom: 20px;
}

.dmt-momente {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.dmt-moment {
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
    background: var(--schwarz-card);
    border-radius: 4px;
}

.dm-zeit {
    font-family: var(--font-display);
    font-size: 0.85rem;
    color: var(--gold);
}

.dm-info {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--weiss-schwach);
}

.dmt-zitat {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 0.9rem;
    color: var(--weiss-schwach);
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* BEREICH 13: DIE HAND DER SCHÖPFUNG */
/* ═══════════════════════════════════════════════════════════════════════════ */

.hand-layout {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 30px;
}

.hand-visualisierung {
    background: var(--schwarz-panel);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    aspect-ratio: 0.7;
}

.hand-visualisierung canvas {
    width: 100%;
    height: 100%;
}

.hand-numerologie {
    background: var(--schwarz-panel);
    border: 1px solid var(--gold-subtil);
    border-radius: 8px;
    padding: 25px;
}

.hand-zahl {
    text-align: center;
    margin-bottom: 20px;
}

.hz-wert {
    font-family: var(--font-display);
    font-size: 4rem;
    color: var(--gold);
    text-shadow: 0 0 30px var(--gold-glow);
}

.hz-formel {
    font-family: var(--font-body);
    font-size: 1.5rem;
    color: var(--weiss-subtil);
    margin-left: 10px;
}

.hand-numerologie h3 {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--gold);
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.hand-text {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--weiss-subtil);
    margin-bottom: 20px;
}

.hand-aufbau {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.aufbau-segment {
    display: grid;
    grid-template-columns: 40px 1fr 1fr;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    background: var(--schwarz-card);
    border-radius: 4px;
}

.as-zahl {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--gold);
}

.as-name {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--weiss);
}

.as-bedeutung {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--weiss-schwach);
    text-align: right;
}

.finger-planeten {
    background: var(--schwarz-panel);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    padding: 25px;
}

.finger-planeten h3 {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--cyan);
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.planeten-intro {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--weiss-subtil);
    margin-bottom: 15px;
}

.finger-liste {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.finger-planet {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    padding: 10px 15px;
    background: var(--schwarz-card);
    border-left: 3px solid var(--fp-farbe);
    border-radius: 4px;
}

.fp-finger {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--weiss);
}

.fp-planet {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--fp-farbe);
    text-align: center;
}

.fp-element {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--weiss-schwach);
    text-align: right;
}

.mudra-panel {
    background: var(--schwarz-panel);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    padding: 25px;
}

.mudra-panel h3 {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--gold);
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.mudra-intro {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--weiss-subtil);
    margin-bottom: 15px;
}

.mudra-liste {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mudra {
    padding: 15px;
    background: var(--schwarz-card);
    border-radius: 4px;
}

.mudra-name {
    display: block;
    font-family: var(--font-display);
    font-size: 0.9rem;
    color: var(--gold);
    margin-bottom: 5px;
}

.mudra-form {
    display: block;
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--cyan);
    margin-bottom: 5px;
}

.mudra-wirkung {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--weiss-schwach);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* BEREICH 14: DAS ROTE MEER */
/* ═══════════════════════════════════════════════════════════════════════════ */

.blut-layout {
    display: grid;
    grid-template-columns: 1fr 1.3fr 1fr 1fr;
    gap: 30px;
}

.blut-visualisierung {
    background: var(--schwarz-panel);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    aspect-ratio: 1;
}

.blut-visualisierung canvas {
    width: 100%;
    height: 100%;
}

.blut-geheimnis {
    background: var(--schwarz-panel);
    border: 1px solid var(--gold-subtil);
    border-radius: 8px;
    padding: 25px;
}

.blut-geheimnis h3 {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--gold);
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.molekuel-vergleich {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 25px;
}

.molekuel {
    text-align: center;
}

.mol-ring {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid var(--mol-farbe);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--mol-farbe);
    margin: 0 auto 10px;
    box-shadow: 0 0 20px var(--mol-farbe);
}

.mol-name {
    display: block;
    font-family: var(--font-display);
    font-size: 0.8rem;
    color: var(--weiss);
    letter-spacing: 1px;
}

.mol-info {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--weiss-schwach);
}

.mol-gleich {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--gold);
}

.geheimnis-text {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--weiss-subtil);
    margin-bottom: 15px;
}

.blut-zahlen {
    background: var(--schwarz-panel);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    padding: 25px;
}

.blut-zahlen h3 {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--cyan);
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.blut-fakt-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.blut-fakt {
    text-align: center;
    padding: 15px;
    background: var(--schwarz-card);
    border-radius: 8px;
}

.bf-zahl {
    display: block;
    font-family: var(--font-display);
    font-size: 1.8rem;
    color: var(--gold);
}

.bf-einheit {
    display: block;
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--weiss);
    margin-bottom: 5px;
}

.bf-bedeutung {
    font-family: var(--font-body);
    font-size: 0.7rem;
    color: var(--weiss-schwach);
}

.blut-alchemie {
    background: var(--schwarz-panel);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    padding: 25px;
}

.blut-alchemie h3 {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--gold);
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.alchemie-text {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--weiss-subtil);
    margin-bottom: 20px;
}

.blut-elemente {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.blut-element {
    display: grid;
    grid-template-columns: 30px 1fr 1fr;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: var(--schwarz-card);
    border-radius: 4px;
}

.be-symbol {
    font-size: 1.2rem;
    text-align: center;
}

.be-name {
    font-family: var(--font-display);
    font-size: 0.85rem;
    color: var(--gold);
}

.be-aspekt {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--weiss-schwach);
    text-align: right;
}

.alchemie-zitat {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 0.9rem;
    color: var(--weiss-subtil);
    text-align: center;
    padding: 15px;
    background: var(--schwarz-card);
    border-radius: 4px;
    border-left: 3px solid var(--gold);
}

.alchemie-zitat span {
    display: block;
    font-size: 0.8rem;
    color: var(--gold);
    margin-top: 5px;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* BEREICH 15: DER INNERE KOSMOS */
/* ═══════════════════════════════════════════════════════════════════════════ */

.mikrobiom-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr 1fr;
    gap: 30px;
}

.mikrobiom-visualisierung {
    background: var(--schwarz-panel);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    aspect-ratio: 1;
}

.mikrobiom-visualisierung canvas {
    width: 100%;
    height: 100%;
}

.mikrobiom-zahlen {
    background: var(--schwarz-panel);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    padding: 25px;
}

.mikrobiom-zahlen h3 {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--cyan);
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.verhaltnis-visualisierung {
    margin-bottom: 20px;
}

.verhaeltnis-bar {
    display: flex;
    height: 30px;
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 10px;
}

.vb-human {
    background: linear-gradient(90deg, #40E0D0, #20B2AA);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 0.75rem;
    color: var(--schwarz);
}

.vb-bakterien {
    background: linear-gradient(90deg, #d4af37, #9a7b1c);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 0.75rem;
    color: var(--schwarz);
}

.verhaeltnis-legende {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-body);
    font-size: 0.75rem;
}

.vl-human {
    color: var(--cyan);
}

.vl-bakterien {
    color: var(--gold);
}

.mikrobiom-text {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--weiss-subtil);
    margin-bottom: 20px;
}

.mikrobiom-fakten {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mf-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
    background: var(--schwarz-card);
    border-radius: 4px;
}

.mf-zahl {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--gold);
}

.mf-text {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--weiss-schwach);
}

.zweites-gehirn {
    background: var(--schwarz-panel);
    border: 1px solid var(--gold-subtil);
    border-radius: 8px;
    padding: 25px;
}

.zweites-gehirn h3 {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--gold);
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.gehirn-vergleich {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.gv-kopf, .gv-darm {
    text-align: center;
    padding: 15px;
    background: var(--schwarz-card);
    border-radius: 8px;
    width: 100%;
}

.gv-icon {
    font-size: 2rem;
    display: block;
    margin-bottom: 5px;
}

.gv-label {
    display: block;
    font-family: var(--font-display);
    font-size: 0.8rem;
    color: var(--weiss);
    letter-spacing: 1px;
}

.gv-neuronen {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--weiss-schwach);
}

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

.vagus-linie {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--cyan);
    padding: 5px 15px;
    border: 1px solid var(--cyan-subtil);
    border-radius: 15px;
}

.gehirn-text {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--weiss-subtil);
}

.serotonin-panel {
    background: var(--schwarz-panel);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    padding: 25px;
}

.serotonin-panel h3 {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--cyan);
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.serotonin-stat {
    text-align: center;
    padding: 20px;
    background: var(--schwarz-card);
    border-radius: 8px;
    margin-bottom: 20px;
}

.ss-zahl {
    display: block;
    font-family: var(--font-display);
    font-size: 3rem;
    color: var(--gold);
    text-shadow: 0 0 30px var(--gold-glow);
}

.ss-text {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--weiss-schwach);
}

.serotonin-text {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--weiss-subtil);
    margin-bottom: 20px;
}

.darm-produktion {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dp-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--schwarz-card);
    border-radius: 4px;
}

.dp-stoff {
    font-family: var(--font-display);
    font-size: 0.8rem;
    color: var(--cyan);
}

.dp-wirkung {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--weiss-schwach);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* BEREICH 16: DIE ORGANUHR */
/* ═══════════════════════════════════════════════════════════════════════════ */

.uhr-layout {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 40px;
}

.uhr-visualisierung {
    background: var(--schwarz-panel);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    aspect-ratio: 1;
}

.uhr-visualisierung canvas {
    width: 100%;
    height: 100%;
}

.organuhr-liste {
    background: var(--schwarz-panel);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    padding: 25px;
}

.organuhr-liste h3 {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--gold);
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.meridian-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.meridian {
    padding: 12px;
    background: var(--schwarz-card);
    border-radius: 4px;
    text-align: center;
    transition: all var(--transition-fast);
}

.meridian:hover {
    transform: scale(1.02);
    border-left: 2px solid var(--gold);
}

.m-zeit {
    display: block;
    font-family: var(--font-display);
    font-size: 0.75rem;
    color: var(--gold);
    margin-bottom: 5px;
}

.m-organ {
    display: block;
    font-family: var(--font-display);
    font-size: 0.85rem;
    color: var(--weiss);
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.m-qualitaet {
    font-family: var(--font-body);
    font-size: 0.7rem;
    color: var(--weiss-schwach);
}

.uhr-anwendung {
    background: var(--schwarz-panel);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    padding: 25px;
}

.uhr-anwendung h3 {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--cyan);
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.uhr-intro {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--weiss-subtil);
    margin-bottom: 20px;
}

.uhr-beispiele {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.ub-item {
    padding: 12px 15px;
    background: var(--schwarz-card);
    border-radius: 4px;
    border-left: 3px solid var(--gold);
}

.ub-zeit {
    display: block;
    font-family: var(--font-display);
    font-size: 0.8rem;
    color: var(--weiss);
    margin-bottom: 5px;
}

.ub-bedeutung {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--weiss-schwach);
}

.uhr-weisheit {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 0.9rem;
    color: var(--weiss-subtil);
    padding: 15px;
    background: var(--schwarz-card);
    border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* BEREICH 17: DAS HOLOGRAMM */
/* ═══════════════════════════════════════════════════════════════════════════ */

.hologramm-layout {
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr 1fr;
    gap: 30px;
}

.hologramm-visualisierung {
    background: var(--schwarz-panel);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    aspect-ratio: 1;
}

.hologramm-visualisierung canvas {
    width: 100%;
    height: 100%;
}

.hologramm-prinzip {
    background: var(--schwarz-panel);
    border: 1px solid var(--gold-subtil);
    border-radius: 8px;
    padding: 25px;
}

.hologramm-prinzip h3 {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--gold);
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.prinzip-text {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--weiss-subtil);
    margin-bottom: 20px;
}

.hologramm-quote {
    padding: 20px;
    background: var(--schwarz-card);
    border-radius: 4px;
    border-left: 3px solid var(--gold);
}

.hologramm-quote blockquote {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--weiss-subtil);
    margin-bottom: 10px;
}

.hologramm-quote span {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--gold);
}

.reflexzonen-panel {
    background: var(--schwarz-panel);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    padding: 25px;
}

.reflexzonen-panel h3 {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--cyan);
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.reflexzone {
    display: flex;
    gap: 15px;
    padding: 15px;
    background: var(--schwarz-card);
    border-radius: 4px;
    margin-bottom: 12px;
}

.reflexzone:last-child {
    margin-bottom: 0;
}

.rz-icon {
    font-size: 1.5rem;
    width: 40px;
    text-align: center;
}

.rz-info h4 {
    font-family: var(--font-display);
    font-size: 0.8rem;
    color: var(--weiss);
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.rz-info p {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--weiss-schwach);
}

.hologramm-implikation {
    background: var(--schwarz-panel);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    padding: 25px;
}

.hologramm-implikation h3 {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--gold);
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.implikation-text {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--weiss-subtil);
    margin-bottom: 15px;
}

.fraktal-verbindung {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px;
    background: var(--schwarz-card);
    border-radius: 8px;
}

.fv-item {
    padding: 8px 14px;
    background: var(--gold-subtil);
    border: 1px solid var(--gold-dunkel);
    border-radius: 20px;
    font-family: var(--font-display);
    font-size: 0.75rem;
    color: var(--gold);
}

.fv-pfeil {
    color: var(--cyan);
    font-size: 1rem;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* BEREICH 18: DAS GEDÄCHTNIS DES WASSERS */
/* ═══════════════════════════════════════════════════════════════════════════ */

.wasser-layout {
    display: grid;
    grid-template-columns: 1fr 0.8fr 1.2fr 1fr;
    gap: 35px;
}

.wasser-visualisierung {
    background: var(--schwarz-panel);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    aspect-ratio: 1;
}

.wasser-visualisierung canvas {
    width: 100%;
    height: 100%;
}

.wasser-statistik {
    text-align: center;
    padding: 25px;
}

.statistik-kreis {
    width: 150px;
    height: 150px;
    margin: 0 auto 20px;
    position: relative;
    border-radius: 50%;
    background: conic-gradient(
        var(--cyan) 0% 70%,
        rgba(64, 224, 208, 0.2) 70% 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
}

.kreis-fill {
    width: 120px;
    height: 120px;
    background: var(--schwarz);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kreis-zahl {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--cyan);
    font-weight: 500;
}

.wasser-statistik h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--gold);
    margin-bottom: 15px;
}

.wasser-statistik p {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--weiss-subtil);
}

.emoto-panel {
    background: var(--schwarz-panel);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    padding: 25px;
}

.emoto-panel h3 {
    font-family: var(--font-display);
    font-size: 0.9rem;
    color: var(--gold);
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.kristall-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

.kristall-item {
    text-align: center;
    padding: 15px;
    background: var(--schwarz-card);
    border-radius: 8px;
    transition: transform var(--transition-fast);
}

.kristall-item:hover {
    transform: scale(1.05);
}

.kristall-item.positiv {
    border: 1px solid rgba(64, 224, 208, 0.3);
}

.kristall-item.negativ {
    border: 1px solid rgba(255, 99, 71, 0.3);
}

.kristall-symbol {
    font-size: 2rem;
    margin-bottom: 10px;
}

.kristall-wort {
    display: block;
    font-family: var(--font-display);
    font-size: 0.8rem;
    color: var(--weiss);
    margin-bottom: 8px;
}

.kristall-item p {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--weiss-schwach);
}

.emoto-implikation {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 0.9rem;
    color: var(--gold);
    padding: 15px;
    background: var(--schwarz-card);
    border-radius: 8px;
    border-left: 3px solid var(--gold);
}

.ez-wasser-panel {
    background: var(--schwarz-panel);
    border: 1px solid var(--cyan-subtil);
    border-radius: 8px;
    padding: 25px;
}

.ez-wasser-panel h3 {
    font-family: var(--font-display);
    font-size: 0.9rem;
    color: var(--cyan);
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.ez-wasser-panel > p {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--weiss-subtil);
    margin-bottom: 20px;
}

.ez-eigenschaften {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.ez-item {
    padding: 12px 15px;
    background: var(--schwarz-card);
    border-radius: 6px;
    border-left: 3px solid var(--cyan);
}

.ez-label {
    font-family: var(--font-display);
    font-size: 0.8rem;
    color: var(--cyan);
    display: block;
    margin-bottom: 5px;
}

.ez-item p {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--weiss-schwach);
}

.wasser-quote {
    padding: 15px;
    background: var(--schwarz-card);
    border-radius: 8px;
}

.wasser-quote blockquote {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 0.9rem;
    color: var(--weiss-subtil);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* BEREICH 19: DER KRISTALLPALAST */
/* ═══════════════════════════════════════════════════════════════════════════ */

.kristall-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr 1fr;
    gap: 35px;
}

.kristall-vis {
    background: var(--schwarz-panel);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    aspect-ratio: 1;
}

.kristall-vis canvas {
    width: 100%;
    height: 100%;
}

.piezo-panel {
    background: var(--schwarz-panel);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    padding: 25px;
}

.piezo-panel h3 {
    font-family: var(--font-display);
    font-size: 0.9rem;
    color: var(--gold);
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.piezo-intro {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--weiss-subtil);
    margin-bottom: 20px;
}

.piezo-erklaerung {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.piezo-schritt {
    flex: 1;
    text-align: center;
    padding: 15px;
    background: var(--schwarz-card);
    border-radius: 8px;
}

.schritt-nr {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    background: var(--gold);
    color: var(--schwarz);
    border-radius: 50%;
    font-family: var(--font-display);
    font-weight: 500;
    margin-bottom: 10px;
}

.piezo-schritt p {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--weiss-subtil);
}

.piezo-pfeil {
    color: var(--cyan);
    font-size: 1.5rem;
    padding: 0 10px;
}

.piezo-fazit {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--cyan);
    font-style: italic;
}

.kollagen-panel {
    background: var(--schwarz-panel);
    border: 1px solid var(--cyan-subtil);
    border-radius: 8px;
    padding: 25px;
}

.kollagen-panel h3 {
    font-family: var(--font-display);
    font-size: 0.85rem;
    color: var(--cyan);
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.kollagen-info {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.kollagen-fakt {
    flex: 1;
    text-align: center;
    padding: 15px;
    background: var(--schwarz-card);
    border-radius: 8px;
}

.fakt-zahl {
    display: block;
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--gold);
    margin-bottom: 8px;
}

.kollagen-fakt p {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--weiss-schwach);
}

.kollagen-panel > p {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--weiss-subtil);
}

.kristall-implikation {
    background: var(--schwarz-panel);
    border: 1px solid var(--gold-subtil);
    border-radius: 8px;
    padding: 25px;
}

.kristall-implikation h3 {
    font-family: var(--font-display);
    font-size: 0.85rem;
    color: var(--gold);
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.kristall-implikation > p {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--weiss-subtil);
    margin-bottom: 15px;
}

.impl-liste {
    list-style: none;
    padding: 0;
}

.impl-liste li {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--weiss-subtil);
    padding: 8px 0 8px 20px;
    position: relative;
}

.impl-liste li::before {
    content: '⚡';
    position: absolute;
    left: 0;
    color: var(--gold);
    font-size: 0.7rem;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* BEREICH 20: DAS HERZFELD */
/* ═══════════════════════════════════════════════════════════════════════════ */

.herzfeld-layout {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 1fr 1fr 1fr;
    gap: 30px;
}

.torus-visualisierung {
    background: var(--schwarz-panel);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    aspect-ratio: 1;
    grid-row: span 2;
}

.torus-visualisierung canvas {
    width: 100%;
    height: 100%;
}

.herzfeld-fakten {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.hf-fakt {
    padding: 20px;
    background: var(--schwarz-panel);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    text-align: center;
    transition: all var(--transition-fast);
}

.hf-fakt:hover {
    border-color: var(--gold);
    transform: scale(1.02);
}

.hf-fakt.wow {
    animation: herzPuls 2s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 0.3s);
}

.hf-fakt:nth-child(1) { --i: 0; }
.hf-fakt:nth-child(2) { --i: 1; }
.hf-fakt:nth-child(3) { --i: 2; }

@keyframes herzPuls {
    0%, 100% { box-shadow: 0 0 0 rgba(212, 175, 55, 0); }
    50% { box-shadow: 0 0 20px rgba(212, 175, 55, 0.3); }
}

.hf-zahl {
    display: block;
    font-family: var(--font-display);
    font-size: 1.8rem;
    color: var(--gold);
    margin-bottom: 8px;
}

.hf-fakt p {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--weiss-subtil);
}

.herzhirn-panel {
    background: var(--schwarz-panel);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    padding: 25px;
}

.herzhirn-panel h3 {
    font-family: var(--font-display);
    font-size: 0.9rem;
    color: var(--gold);
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.herzhirn-panel > p {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--weiss-subtil);
    margin-bottom: 20px;
}

.herzhirn-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 10px;
}

.flow-item {
    padding: 15px 25px;
    background: var(--schwarz-card);
    border-radius: 30px;
    font-family: var(--font-display);
    font-size: 0.9rem;
}

.flow-item.herz {
    border: 2px solid #DC143C;
    color: #DC143C;
}

.flow-item.gehirn {
    border: 2px solid var(--cyan);
    color: var(--cyan);
}

.flow-pfeil {
    color: var(--gold);
    font-size: 1.2rem;
    animation: flowMove 1s ease-in-out infinite;
}

@keyframes flowMove {
    0%, 100% { transform: translateX(0); opacity: 0.5; }
    50% { transform: translateX(5px); opacity: 1; }
}

.flow-caption {
    text-align: center;
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--weiss-schwach);
}

.kohaerenz-panel {
    background: var(--schwarz-panel);
    border: 1px solid var(--cyan-subtil);
    border-radius: 8px;
    padding: 25px;
}

.kohaerenz-panel h3 {
    font-family: var(--font-display);
    font-size: 0.85rem;
    color: var(--cyan);
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.kohaerenz-panel > p {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--weiss-subtil);
    margin-bottom: 20px;
}

.kohaerenz-wellen {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

.welle {
    padding: 12px 15px;
    background: var(--schwarz-card);
    border-radius: 6px;
}

.welle span {
    font-family: var(--font-display);
    font-size: 0.75rem;
    display: block;
    margin-bottom: 8px;
}

.welle.chaotisch span { color: #FF6347; }
.welle.koherent span { color: #40E0D0; }

.wellen-vis {
    height: 30px;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 2px,
        currentColor 2px,
        currentColor 4px
    );
    opacity: 0.3;
}

.welle.chaotisch .wellen-vis {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30'%3E%3Cpath d='M0,15 Q5,5 10,15 T20,25 T30,5 T40,20 T50,10 T60,25 T70,8 T80,18 T90,12 T100,15' stroke='%23FF6347' fill='none' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 100% 100%;
}

.welle.koherent .wellen-vis {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30'%3E%3Cpath d='M0,15 Q12.5,0 25,15 T50,15 T75,15 T100,15' stroke='%2340E0D0' fill='none' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 100% 100%;
}

.kohaerenz-trigger {
    padding: 15px;
    background: var(--schwarz-card);
    border-radius: 8px;
}

.kohaerenz-trigger h4 {
    font-family: var(--font-display);
    font-size: 0.75rem;
    color: var(--gold);
    margin-bottom: 10px;
}

.kohaerenz-trigger ul {
    list-style: none;
    padding: 0;
}

.kohaerenz-trigger li {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--weiss-subtil);
    padding: 5px 0 5px 15px;
    position: relative;
}

.kohaerenz-trigger li::before {
    content: '❤';
    position: absolute;
    left: 0;
    font-size: 0.6rem;
    color: #DC143C;
}

.herzfeld-tiefe {
    background: var(--schwarz-panel);
    border: 1px solid var(--gold-subtil);
    border-radius: 8px;
    padding: 25px;
}

.herzfeld-tiefe h3 {
    font-family: var(--font-display);
    font-size: 0.85rem;
    color: var(--gold);
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.herzfeld-tiefe p {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--weiss-subtil);
    margin-bottom: 15px;
}

.tiefe-quote {
    font-style: italic;
    color: var(--gold) !important;
    padding: 15px;
    background: var(--schwarz-card);
    border-radius: 8px;
    border-left: 3px solid var(--gold);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* BEREICH 21: DIE VOLLENDUNG */
/* ═══════════════════════════════════════════════════════════════════════════ */

.vollendung-layout {
    display: grid;
    grid-template-columns: 1.3fr 0.8fr 1fr 1fr 1fr;
    gap: 30px;
}

.vollendung-visualisierung {
    background: var(--schwarz-panel);
    border: 2px solid var(--gold-subtil);
    border-radius: 12px;
    aspect-ratio: 1;
    grid-row: span 2;
    box-shadow: 0 0 40px rgba(212, 175, 55, 0.1);
}

.vollendung-visualisierung canvas {
    width: 100%;
    height: 100%;
}

.zahl-21-panel {
    text-align: center;
    padding: 25px;
    background: var(--schwarz-panel);
    border: 1px solid var(--gold);
    border-radius: 8px;
}

.zahl-gross {
    font-family: var(--font-display);
    font-size: 4rem;
    font-weight: 500;
    color: var(--gold);
    text-shadow: 0 0 30px rgba(212, 175, 55, 0.5);
    animation: zahlPuls 3s ease-in-out infinite;
}

@keyframes zahlPuls {
    0%, 100% { text-shadow: 0 0 30px rgba(212, 175, 55, 0.3); }
    50% { text-shadow: 0 0 50px rgba(212, 175, 55, 0.7); }
}

.zahl-21-panel h3 {
    font-family: var(--font-display);
    font-size: 0.85rem;
    color: var(--weiss);
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.zahl-bedeutung {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bedeutung-item {
    padding: 10px;
    background: var(--schwarz-card);
    border-radius: 6px;
    border-left: 2px solid var(--gold);
}

.b-formel {
    font-family: var(--font-display);
    font-size: 0.9rem;
    color: var(--gold);
    display: block;
    margin-bottom: 4px;
}

.bedeutung-item p {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--weiss-schwach);
}

.verbindungen-panel {
    background: var(--schwarz-panel);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    padding: 25px;
}

.verbindungen-panel h3 {
    font-family: var(--font-display);
    font-size: 0.85rem;
    color: var(--cyan);
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.verbindungs-netz {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.netz-item {
    padding: 8px 12px;
    background: var(--schwarz-card);
    border: 1px solid var(--cyan-subtil);
    border-radius: 20px;
    font-family: var(--font-display);
    font-size: 0.7rem;
    color: var(--cyan);
    transition: all var(--transition-fast);
}

.netz-item:hover {
    background: rgba(64, 224, 208, 0.1);
    border-color: var(--cyan);
    transform: scale(1.05);
}

.netz-fazit {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--weiss-subtil);
}

.einheit-panel {
    background: var(--schwarz-panel);
    border: 1px solid var(--weiss-minimal);
    border-radius: 8px;
    padding: 25px;
}

.einheit-panel h3 {
    font-family: var(--font-display);
    font-size: 0.85rem;
    color: var(--gold);
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.einheit-panel > p {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--weiss-subtil);
    margin-bottom: 20px;
}

.feld-gleichung {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 20px;
    background: var(--schwarz-card);
    border-radius: 8px;
    margin-bottom: 20px;
}

.gl-teil {
    font-family: var(--font-display);
    font-size: 0.9rem;
    color: var(--weiss);
    padding: 8px 15px;
    border: 1px solid var(--gold-subtil);
    border-radius: 4px;
}

.gl-zeichen {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--gold);
}

.botschaft-panel {
    background: linear-gradient(135deg, var(--schwarz-panel) 0%, rgba(212, 175, 55, 0.05) 100%);
    border: 2px solid var(--gold);
    border-radius: 12px;
    padding: 30px;
    text-align: center;
}

.botschaft-panel h3 {
    font-family: var(--font-display);
    font-size: 0.85rem;
    color: var(--gold);
    letter-spacing: 3px;
    margin-bottom: 20px;
}

.finale-botschaft {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--weiss);
    line-height: 1.8;
    margin-bottom: 15px;
}

.botschaft-autor {
    font-family: var(--font-display);
    font-size: 0.8rem;
    color: var(--gold);
}

.abschluss-kreis {
    width: 80px;
    height: 80px;
    margin: 25px auto 0;
    position: relative;
}

.ak-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid var(--gold);
    border-radius: 50%;
    animation: ringRotate 10s linear infinite;
}

.ak-ring::before,
.ak-ring::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid var(--gold);
    border-radius: 50%;
    opacity: 0.3;
}

.ak-ring::before {
    transform: scale(1.3);
    animation: ringPuls 2s ease-in-out infinite;
}

.ak-ring::after {
    transform: scale(1.6);
    animation: ringPuls 2s ease-in-out infinite 0.5s;
}

@keyframes ringRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes ringPuls {
    0%, 100% { opacity: 0.1; transform: scale(1.3); }
    50% { opacity: 0.4; transform: scale(1.5); }
}

.ak-kern {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--gold);
    animation: kernPuls 2s ease-in-out infinite;
}

@keyframes kernPuls {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; text-shadow: 0 0 20px rgba(212, 175, 55, 0.8); }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* EASTER EGG: VERSTECKTES FELD 22 - DIMENSIONAL */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* Versteckter Navigations-Eintrag */
.nav-versteckt {
    opacity: 0 !important;
    pointer-events: none;
    transform: scale(0.5);
    transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.nav-sterne:hover .nav-versteckt {
    opacity: 0.2 !important;
    pointer-events: auto;
    transform: scale(1);
}

.nav-versteckt:hover {
    opacity: 1 !important;
}

.nav-versteckt span {
    font-family: var(--font-display);
    font-size: 0.8rem;
    letter-spacing: 3px;
    animation: mysteryFlicker 3s ease-in-out infinite;
}

.dimensional-kern {
    background: linear-gradient(135deg, #9B59B6, #3498DB, #1ABC9C) !important;
    animation: dimensionalShift 4s ease-in-out infinite !important;
}

@keyframes mysteryFlicker {
    0%, 100% { opacity: 0.3; }
    25% { opacity: 0.8; }
    50% { opacity: 0.2; }
    75% { opacity: 0.9; }
}

@keyframes dimensionalShift {
    0%, 100% {
        filter: hue-rotate(0deg);
        box-shadow: 0 0 10px rgba(155, 89, 182, 0.5);
    }
    33% {
        filter: hue-rotate(120deg);
        box-shadow: 0 0 15px rgba(52, 152, 219, 0.5);
    }
    66% {
        filter: hue-rotate(240deg);
        box-shadow: 0 0 15px rgba(26, 188, 156, 0.5);
    }
}

/* Dimensionaler Bereich */
.dimensional-bereich {
    background: #000 !important;
    padding: 0 !important;
    overflow: hidden;
}

.dimensional-container {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

#dimensional-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.dimensional-overlay {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 40px;
    animation: fadeInSlow 2s ease-out;
}

@keyframes fadeInSlow {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.dimensional-text {
    margin-bottom: 50px;
}

.dim-nummer {
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: 15px;
    color: transparent;
    background: linear-gradient(90deg, #9B59B6, #3498DB, #1ABC9C, #9B59B6);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: gradientFlow 5s ease infinite;
    display: block;
    margin-bottom: 15px;
}

@keyframes gradientFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.dim-titel {
    font-family: var(--font-display);
    font-size: 4rem;
    letter-spacing: 20px;
    color: #fff;
    text-shadow:
        0 0 10px rgba(155, 89, 182, 0.5),
        0 0 30px rgba(52, 152, 219, 0.3),
        0 0 60px rgba(26, 188, 156, 0.2);
    animation: titlePulse 4s ease-in-out infinite;
}

@keyframes titlePulse {
    0%, 100% {
        text-shadow:
            0 0 10px rgba(155, 89, 182, 0.5),
            0 0 30px rgba(52, 152, 219, 0.3),
            0 0 60px rgba(26, 188, 156, 0.2);
    }
    50% {
        text-shadow:
            0 0 20px rgba(155, 89, 182, 0.8),
            0 0 50px rgba(52, 152, 219, 0.5),
            0 0 100px rgba(26, 188, 156, 0.3);
    }
}

.dim-untertitel {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--weiss-schwach);
    letter-spacing: 5px;
    margin-top: 15px;
}

.dimensional-botschaft {
    margin-bottom: 50px;
}

.dim-zeile {
    font-family: var(--font-body);
    font-size: 1.1rem;
    color: var(--weiss-schwach);
    margin: 12px 0;
    opacity: 0;
    animation: lineReveal 0.8s ease forwards;
}

.dim-zeile:nth-child(1) { animation-delay: 0.5s; }
.dim-zeile:nth-child(2) { animation-delay: 1.5s; }
.dim-zeile:nth-child(3) { animation-delay: 2.5s; }
.dim-zeile:nth-child(4) { animation-delay: 3.5s; }

.dim-zeile.highlight {
    font-size: 1.4rem;
    color: #fff;
    font-weight: 500;
}

@keyframes lineReveal {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.dimensional-symbole {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin: 50px 0;
}

.dim-sym {
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.3);
    animation: symbolFloat 3s ease-in-out infinite;
}

.dim-sym:nth-child(1) { animation-delay: 0s; color: rgba(155, 89, 182, 0.6); }
.dim-sym:nth-child(2) { animation-delay: 0.3s; color: rgba(52, 152, 219, 0.6); }
.dim-sym:nth-child(3) { animation-delay: 0.6s; color: rgba(26, 188, 156, 0.6); }
.dim-sym:nth-child(4) { animation-delay: 0.9s; color: rgba(231, 76, 60, 0.6); }
.dim-sym:nth-child(5) { animation-delay: 1.2s; color: rgba(241, 196, 15, 0.6); }

@keyframes symbolFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(10deg); }
}

.dimensional-geheimnis {
    margin-top: 60px;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.5);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.dimensional-geheimnis p {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.8;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* SCROLLBAR */
/* ═══════════════════════════════════════════════════════════════════════════ */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--schwarz);
}

::-webkit-scrollbar-thumb {
    background: var(--gold-dunkel);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gold);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* RESPONSIVE */
/* ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1400px) {
    .bereich {
        padding: 80px 100px 80px 150px;
    }

    .wirbel-layout,
    .auge-layout,
    .sterne-layout,
    .phi-layout,
    .zahlen-layout,
    .formen-layout,
    .kammern-layout,
    .tore-layout,
    .ohr-layout,
    .herz-layout,
    .lunge-layout {
        grid-template-columns: 1fr 1fr;
    }

    .nerven-liste {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1024px) {
    .bereich {
        padding: 80px 40px 120px 40px;
    }

    .nav-sterne {
        top: auto;
        bottom: 20px;
        left: 10px;
        right: 10px;
        transform: none;
        flex-direction: row;
        gap: 12px;
        background: rgba(10, 12, 16, 0.95);
        padding: 12px 20px;
        border-radius: 30px;
        border: 1px solid var(--weiss-minimal);
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .nav-sterne::-webkit-scrollbar {
        display: none;
    }

    .nav-stern {
        flex-shrink: 0;
        scroll-snap-align: center;
        opacity: 0.5;
    }

    .nav-stern.active {
        opacity: 1;
    }

    .nav-stern .stern-kern {
        width: 14px;
        height: 14px;
    }

    .nav-stern.active .stern-kern {
        width: 18px;
        height: 18px;
        box-shadow: 0 0 15px var(--gold);
    }

    .nav-stern span {
        display: none;
    }

    .wirbel-layout,
    .auge-layout,
    .sterne-layout,
    .phi-layout,
    .zahlen-layout,
    .formen-layout,
    .kammern-layout,
    .tore-layout,
    .ohr-layout,
    .herz-layout,
    .lunge-layout {
        grid-template-columns: 1fr;
    }

    .wissen-karten {
        grid-template-columns: 1fr;
    }

    .lunge-visualisierung {
        grid-row: span 1;
    }

    /* Easter Egg Mobile - 1024px */
    .nav-versteckt {
        opacity: 0.15 !important;
        pointer-events: auto;
        transform: scale(1);
    }

    .dimensional-overlay {
        padding: 20px;
    }

    .dim-titel {
        font-size: 2.5rem;
        letter-spacing: 10px;
    }

    .dim-zeile {
        font-size: 0.95rem;
    }

    .dim-zeile.highlight {
        font-size: 1.1rem;
    }

    .dimensional-symbole {
        gap: 25px;
    }

    .dim-sym {
        font-size: 1.5rem;
    }

    .dimensional-geheimnis {
        padding: 20px;
        margin-top: 40px;
    }

    .dimensional-geheimnis p {
        font-size: 0.9rem;
    }

    .vollendung-layout {
        grid-template-columns: 1fr 1fr;
    }

    .vollendung-visualisierung {
        grid-row: span 1;
        grid-column: span 2;
        max-height: 300px;
    }
}

@media (max-width: 768px) {
    .bereich {
        padding: 60px 20px 130px 20px;
    }

    .nav-sterne {
        left: 5px;
        right: 5px;
        bottom: 15px;
        padding: 10px 15px;
        gap: 10px;
    }

    .nav-stern .stern-kern {
        width: 12px;
        height: 12px;
    }

    .nav-stern.active .stern-kern {
        width: 16px;
        height: 16px;
    }

    .eingang-titel {
        font-size: 2rem;
        letter-spacing: 10px;
    }

    .wirbelsaeule-container {
        width: 80px;
        height: 300px;
    }

    .bereich-header h2 {
        font-size: 1.8rem;
        letter-spacing: 5px;
    }

    .grosse-zahl .zahl-wert {
        font-size: 3.5rem;
    }

    .erscheinungen-26 {
        grid-template-columns: 1fr;
    }

    .form-eigenschaften {
        flex-direction: column;
    }

    /* Easter Egg Mobile - 768px */
    .dimensional-container {
        min-height: 100vh;
        padding-bottom: 100px;
    }

    .dimensional-overlay {
        padding: 15px;
    }

    .dimensional-text {
        margin-bottom: 30px;
    }

    .dim-nummer {
        font-size: 0.8rem;
        letter-spacing: 8px;
    }

    .dim-titel {
        font-size: 2rem;
        letter-spacing: 8px;
    }

    .dim-untertitel {
        font-size: 0.75rem;
        letter-spacing: 3px;
    }

    .dimensional-botschaft {
        margin-bottom: 30px;
    }

    .dim-zeile {
        font-size: 0.85rem;
        margin: 8px 0;
    }

    .dim-zeile.highlight {
        font-size: 1rem;
    }

    .dimensional-symbole {
        gap: 15px;
        margin: 30px 0;
        flex-wrap: wrap;
        justify-content: center;
    }

    .dim-sym {
        font-size: 1.2rem;
    }

    .dimensional-geheimnis {
        padding: 15px;
        margin-top: 25px;
    }

    .dimensional-geheimnis p {
        font-size: 0.8rem;
        line-height: 1.6;
    }

    /* Vollendung Mobile */
    .vollendung-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .vollendung-visualisierung {
        grid-column: span 1;
        max-height: 250px;
        aspect-ratio: 1;
    }

    .zahl-21-panel,
    .verbindungen-panel,
    .einheit-panel,
    .botschaft-panel {
        padding: 15px;
    }

    .zahl-gross {
        font-size: 3rem;
    }

    .feld-gleichung {
        flex-direction: column;
        gap: 10px;
    }

    .gl-zeichen {
        transform: rotate(90deg);
    }
}