/* ============================================================
   design.css – MoAktor Data Studio v3.0
   Das vereinte Kristallherz-Design
   (c) 2026 Kaito, MoAktor Institut
   ============================================================ */

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

html, body {
    height: 100%;
    scroll-behavior: smooth;
}

body {
    display: flex;
    flex-direction: column;
    font-family: var(--font-sans, 'Inter', sans-serif);
    background: transparent;
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    transition: color 0.3s;
    padding: 1.5rem;
    position: relative;
    min-height: 100vh;
}

/* Tiefstes Hintergrundbild – Fullscreen hinter ALLEM, durch Container sichtbar */
body.has-deep-bg::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--bg-primary);
    z-index: -2;
    opacity: var(--ui-opacity, 0.5);
    transition: background 0.4s ease, opacity 0.3s ease;
}
body.has-deep-bg::after {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    background-image: var(--deep-bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
    opacity: 0.8;
    transition: opacity 0.8s ease, background-image 0.8s ease;
    pointer-events: none;
}
body:not(.has-deep-bg) {
    background: var(--bg-primary);
}
body.dark-mode.has-deep-bg::after {
    opacity: 0.7;
}

/* Fokus-Styles für Barrierefreiheit */
:focus-visible {
    outline: 3px solid var(--accent-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------- Variablen: Plattform-Themes (Light/Dark) ---------- */
/* EVE – warmes Gold & Ivory */
.theme-eve.light-mode {
    --bg-primary: #fff5f0;
    --bg-surface: #ffffff;
    --text-primary: #4a2e3a;
    --text-secondary: #8b6b7a;
    --rose-petal: #f9d6d0;
    --rose-gold: #e0afa0;
    --gold: #d4af37;
    --accent-primary: var(--rose-gold);
    --accent-primary-rgb: 224, 175, 160;
    --accent-secondary: var(--gold);
    --accent-tertiary: #ffd0dd;
    --line: rgba(74,46,58,0.08);
    --font-serif: "Cormorant Garamond", Georgia, serif;
    --font-sans: "Quicksand", "Inter", sans-serif;
    --shadow-soft: 0 12px 34px rgba(74,46,58,0.06);
    --shadow-med: 0 18px 50px rgba(74,46,58,0.1);
    --shadow-accent: 0 12px 28px rgba(224,175,160,0.25);
}

.theme-eve.dark-mode {
    --bg-primary: #2a1a22;
    --bg-surface: #3a2a32;
    --text-primary: #ffe5f0;
    --text-secondary: #d8b0c0;
    --rose-petal: #7a4a5a;
    --rose-gold: #b78a7a;
    --gold: #b89a30;
    --accent-primary: var(--rose-gold);
    --accent-primary-rgb: 183, 138, 122;
    --accent-secondary: var(--gold);
    --accent-tertiary: #a26a7a;
    --line: rgba(255,229,240,0.1);
    --shadow-soft: 0 12px 34px rgba(0,0,0,0.5);
    --shadow-med: 0 18px 50px rgba(0,0,0,0.6);
    --shadow-accent: 0 12px 28px rgba(183,138,122,0.4);
}

/* MOAKTOR – Anthrazit & Pfauengrün */
.theme-mo.light-mode {
    --bg-primary: #f5f5f5;
    --bg-surface: #ffffff;
    --text-primary: #2c2c2c;
    --text-secondary: #6b6b6b;
    --accent-primary: #0f4c5c;
    --accent-primary-rgb: 15, 76, 92;
    --accent-secondary: #b76e3f;
    --accent-tertiary: #e0c080;
    --line: rgba(44,44,44,0.1);
    --font-serif: "Playfair Display", Georgia, serif;
    --font-sans: "Inter", system-ui, sans-serif;
    --shadow-soft: 0 12px 34px rgba(44,44,44,0.08);
    --shadow-med: 0 18px 50px rgba(44,44,44,0.12);
    --shadow-accent: 0 12px 28px rgba(15,76,92,0.24);
}

.theme-mo.dark-mode {
    --bg-primary: #1a1a1a;
    --bg-surface: #2c2c2c;
    --text-primary: #e0e0e0;
    --text-secondary: #a0a0a0;
    --accent-primary: #1f7c8c;
    --accent-primary-rgb: 31, 124, 140;
    --accent-secondary: #c88e5f;
    --accent-tertiary: #d0b080;
    --line: rgba(255,255,255,0.1);
    --shadow-soft: 0 12px 34px rgba(0,0,0,0.5);
    --shadow-med: 0 18px 50px rgba(0,0,0,0.6);
    --shadow-accent: 0 12px 28px rgba(31,124,140,0.4);
}

/* VELTBEWUSST – Salbei & Terrakotta */
.theme-vb.light-mode {
    --bg-primary: #f3efe6;
    --bg-surface: #faf7f1;
    --text-primary: #071f1e;
    --text-secondary: #4e6a63;
    --accent-primary: #d6a54a;
    --accent-primary-rgb: 214, 165, 74;
    --accent-secondary: #f0c26c;
    --accent-tertiary: #0b2b28;
    --line: rgba(7,31,30,0.1);
    --font-serif: "Playfair Display", Georgia, serif;
    --font-sans: "Inter", system-ui, sans-serif;
    --shadow-soft: 0 12px 34px rgba(7,31,30,0.08);
    --shadow-med: 0 18px 50px rgba(7,31,30,0.12);
    --shadow-accent: 0 12px 28px rgba(214,165,74,0.24);
}

.theme-vb.dark-mode {
    --bg-primary: #0a2325;
    --bg-surface: #12363a;
    --text-primary: #faf5ea;
    --text-secondary: #b8c3b0;
    --accent-primary: #c4943a;
    --accent-primary-rgb: 196, 148, 58;
    --accent-secondary: #b08430;
    --accent-tertiary: #1b4447;
    --line: rgba(250,245,234,0.15);
    --shadow-soft: 0 12px 34px rgba(0,0,0,0.5);
    --shadow-med: 0 18px 50px rgba(0,0,0,0.6);
    --shadow-accent: 0 12px 28px rgba(196,148,58,0.3);
}

/* RICHTUNGSWECHSEL – Grün & Weiß */
.theme-rw.light-mode {
    --bg-primary: #ffffff;
    --bg-surface: #f8f8f8;
    --text-primary: #1a1a1a;
    --text-secondary: #4a4a4a;
    --accent-primary: #2e5c4b;
    --accent-primary-rgb: 46, 92, 75;
    --accent-secondary: #3a7d44;
    --accent-tertiary: #e8f0e8;
    --line: rgba(0,0,0,0.1);
    --font-serif: "Libre Baskerville", Georgia, serif;
    --font-sans: "Inter", system-ui, sans-serif;
    --shadow-soft: 0 12px 34px rgba(0,0,0,0.05);
    --shadow-med: 0 18px 50px rgba(0,0,0,0.1);
    --shadow-accent: 0 12px 28px rgba(46,92,75,0.2);
}

.theme-rw.dark-mode {
    --bg-primary: #1a3a2a;
    --bg-surface: #2a4a3a;
    --text-primary: #f0f0f0;
    --text-secondary: #a0b0a0;
    --accent-primary: #1e4a3a;
    --accent-primary-rgb: 30, 74, 58;
    --accent-secondary: #4a8d54;
    --accent-tertiary: #2a3a2a;
    --line: rgba(255,255,255,0.1);
    --shadow-soft: 0 12px 34px rgba(0,0,0,0.6);
    --shadow-med: 0 18px 50px rgba(0,0,0,0.7);
    --shadow-accent: 0 12px 28px rgba(30,74,58,0.4);
}

/* ---------- Hauptcontainer ---------- */
.mockup-container {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    background: rgba(20, 20, 40, var(--ui-opacity, 0.5));
    backdrop-filter: none;
    border-radius: 3rem;
    box-shadow: none;
    padding: 2rem;
    border: none;
}

/* ---------- Header (glasig) ---------- */
.glass-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 2rem;
    background: transparent;
    backdrop-filter: none;
    border-bottom: none;
    position: sticky;
    top: 0;
    z-index: 100;
    margin-bottom: 2rem;
    border-radius: 3rem 3rem 0 0;
}

.logo-container {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.platform-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-surface);
    border-radius: 50%;
    padding: 5px;
    flex-shrink: 0;
}

.platform-icon img {
    width: 144px;  /* Sollte relativ sein, besser: 100% */
    max-width: 60px;
    height: auto;
    object-fit: contain;
}

.platform-icon svg {
    width: 50px;
    height: 50px;
    filter: drop-shadow(0 0 8px currentColor);
    color: var(--accent-primary);
}

.logo-text {
    font-family: var(--font-serif); /* Basis, wird je Plattform überschrieben */
    font-size: 2rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: font-family 0.3s ease;
    white-space: nowrap;
}

/* Plattform-spezifische Schriftarten */
.logo-text[data-platform="vb"] {
    font-family: 'Playfair Display', serif;
    font-size: 2.4rem;
    font-weight: 600;
    letter-spacing: 1px;
}
.logo-text[data-platform="mo"] {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.5rem;
    font-weight: 700;
    font-style: italic;
}
.logo-text[data-platform="rw"] {
    font-family: 'Inter', sans-serif;
    font-size: 2.2rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.logo-text[data-platform="ueberuns"] {
    font-family: 'Great Vibes', cursive;
    font-size: 2.2rem;
    font-weight: 400;
    background: none;
    -webkit-text-fill-color: initial;
    color: var(--accent-primary);
    letter-spacing: 1px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: auto;
}

.badge {
    background: linear-gradient(145deg, var(--accent-primary), var(--accent-tertiary));
    color: white;
    padding: 0.5rem 1.5rem;
    border-radius: 60px;
    font-weight: 600;
    font-size: 0.9rem;
    box-shadow: 0 0 15px var(--accent-primary);
    white-space: nowrap;
}

.language-select {
    background: transparent;
    border: none;
    border-radius: 30px;
    padding: 0.5rem 1.5rem;
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
    outline: none;
    transition: all 0.2s;
}
.language-select:hover {
    background: var(--accent-primary);
    color: var(--bg-primary);
}
.language-select option {
    background: var(--bg-surface);
    color: var(--text-primary);
}

.theme-switch-button {
    width: 50px;
    height: 50px;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: transform 0.2s, filter 0.2s;
}
.theme-switch-button:hover {
    transform: scale(1.1);
}
.theme-switch-button img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

/* ---------- SoulAI-Begrüßung ---------- */
.soulai-greeting {
    background: transparent;
    backdrop-filter: none;
    border-radius: 60px 60px 60px 20px;
    padding: 1rem 2rem;
    margin-bottom: 2rem;
    border: none;
    box-shadow: none;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.soulai-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--accent-secondary), var(--accent-primary));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 30px var(--accent-primary);
    flex-shrink: 0;
    overflow: hidden;
}
.soulai-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.soulai-avatar-fallback {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: var(--accent-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.soulai-avatar-fallback::after {
    content: "";
    width: 40px;
    height: 40px;
    background: var(--bg-surface);
    border-radius: 50%;
    opacity: 0.3;
}

.soulai-text {
    flex: 1;
    color: var(--text-primary);
    font-size: 1.2rem;
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}
.soulai-text strong {
    color: var(--accent-primary);
    margin-right: 0.3rem;
    display: inline;
}

/* ---------- Plattform-Tabs ---------- */
.platform-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.tab-button {
    background: transparent;
    border: none;
    padding: 0.6rem 1.5rem;
    border-radius: 60px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    color: var(--text-primary);
    transition: all 0.3s ease;
    box-shadow: none;
}
.tab-button.active {
    background: rgba(255,255,255,0.15);
    color: var(--accent-primary);
    border: none;
    box-shadow: none;
    text-decoration: underline;
    text-underline-offset: 4px;
}
/* Dark-Mode Tab */
.dark-mode .tab-button.active {
    background: rgba(255,255,255,0.12);
    color: var(--accent-secondary, #FFD700);
}
/* Light-Mode Tab */
.light-mode .tab-button.active {
    background: rgba(0,0,0,0.08);
    color: var(--accent-primary, #1a0033);
}
.tab-button:hover {
    background: rgba(255,255,255,0.1);
    color: var(--accent-primary);
    border: none;
    transform: translateY(-2px);
}
.dark-mode .tab-button:hover {
    background: rgba(255,255,255,0.08);
}
.light-mode .tab-button:hover {
    background: rgba(0,0,0,0.06);
}

/* ---------- Sektionsnavigation ---------- */
.section-nav {
    display: flex;
    gap: 0.6rem;
    margin: 2rem 0 1.5rem;
    flex-wrap: wrap;
}

.section-link {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 155px;
    height: 50px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    transition: transform calc(0.25s * var(--ui-anim-speed, 1)) ease,
                filter calc(0.25s * var(--ui-anim-speed, 1)) ease,
                box-shadow calc(0.25s * var(--ui-anim-speed, 1)) ease,
                outline calc(0.25s * var(--ui-anim-speed, 1)) ease;
}

.section-link span {
    color: white;
    font-weight: 700;
    font-size: 0.85rem;
    text-shadow: 0 1px 6px rgba(0,0,0,0.9), 0 0 14px rgba(0,0,0,0.6);
    letter-spacing: 0.03em;
    text-align: center;
    line-height: 1.2;
    pointer-events: none;
}
/* Light-Mode: dunklerer Text-Schatten für bessere Lesbarkeit */
.light-mode .section-link span {
    text-shadow: 0 1px 4px rgba(0,0,0,0.7), 0 0 10px rgba(0,0,0,0.4);
}

.section-link:hover {
    transform: translateY(-2px) scale(1.03);
}
.section-link:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}
.section-link.active-section {
    transform: scale(1.04);
    outline: 2.5px solid var(--accent-primary);
    outline-offset: 2px;
    box-shadow: 0 0 14px rgba(var(--accent-primary-rgb, 255,215,0), 0.35);
}
/* Dark-Mode Aktiv-Button */
.dark-mode .section-link.active-section {
    filter: brightness(1.2);
    outline-color: var(--accent-secondary);
    box-shadow: 0 0 18px rgba(var(--accent-primary-rgb, 255,215,0), 0.3),
                inset 0 0 0 1px rgba(255,255,255,0.1);
}
/* Light-Mode Aktiv-Button */
.light-mode .section-link.active-section {
    filter: brightness(1.08) contrast(1.05);
    outline-color: var(--accent-primary);
    box-shadow: 0 2px 12px rgba(0,0,0,0.15),
                inset 0 0 0 1px rgba(0,0,0,0.08);
}
/* Hover addiert nur translateY, überschreibt active nicht */
.section-link.active-section:hover {
    transform: scale(1.04) translateY(-1px);
}

/* Mobile Sektions-Dropdown */
.mobile-section-select {
    width: 100%;
    padding: 0.8rem 1.5rem;
    border-radius: 60px;
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--accent-primary);
    font-size: 1rem;
    margin-bottom: 1rem;
    cursor: pointer;
}

/* ---------- Content Panel ---------- */
.content-panel {
    background: rgba(0, 0, 0, var(--ui-opacity, 0.5));
    backdrop-filter: none;
    border-radius: 24px;
    padding: 2.5rem;
    border: none;
    box-shadow: none;
    min-height: 400px;
    max-height: clamp(400px, 60vh, 1200px);
    overflow-y: auto;
    transition: background 0.3s;
    background-size: cover;
    background-position: center;
    background-blend-mode: overlay;
}

/* ---------- Karten-Layouts ---------- */
.card-grid {
    display: grid;
    gap: 18px;
    transition: all 0.3s;
    margin-top: 2rem;
}
.card-grid.layout-grid-3 { grid-template-columns: repeat(3, 1fr); }
.card-grid.layout-grid-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid.layout-list { grid-template-columns: 1fr; }

.card-grid.layout-list .card {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.card-grid.layout-list .card__media {
    width: 200px;
    height: 150px;
    flex-shrink: 0;
}
.card-grid.layout-list .card__body { flex: 1; }

.card-grid.layout-overlap {
    display: block;
    position: relative;
    height: 500px;
}
.card-grid.layout-overlap .card {
    position: absolute;
    width: 300px;
    transition: transform 0.3s, box-shadow 0.3s;
    box-shadow: var(--shadow-med);
}
.card-grid.layout-overlap .card:nth-child(1) { top: 0; left: 0; z-index: 3; transform: rotate(-2deg); }
.card-grid.layout-overlap .card:nth-child(2) { top: 30px; left: 120px; z-index: 2; transform: rotate(3deg); }
.card-grid.layout-overlap .card:nth-child(3) { top: 60px; left: 240px; z-index: 1; transform: rotate(-1deg); }
.card-grid.layout-overlap .card:hover {
    transform: scale(1.02) rotate(0deg);
    z-index: 10;
}

.card {
    background: var(--bg-surface);
    border-radius: 24px;
    padding: 2rem;
    backdrop-filter: blur(5px);
    border: 1px solid var(--accent-primary);
    box-shadow: var(--shadow-soft);
    transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-accent);
}
.card h3 {
    color: var(--accent-primary);
    margin-bottom: 1rem;
    font-size: 1.5rem;
    font-weight: 600;
}
.card p {
    color: var(--text-secondary);
    line-height: 1.6;
}

.soulai-tag {
    background: var(--accent-tertiary);
    color: var(--bg-primary);
    padding: 0.3rem 1rem;
    border-radius: 30px;
    display: inline-block;
    margin-top: 1.5rem;
    font-size: 0.9rem;
    border-left: 4px solid var(--accent-secondary);
}

.map-placeholder {
    background: var(--bg-surface);
    border-radius: 24px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-secondary);
    border: 2px dashed var(--accent-primary);
    margin: 1rem 0;
    backdrop-filter: blur(5px);
}

/* ---------- Footer ---------- */
.footer {
    margin-top: 2.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
}
.footer-links {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
}
.footer-link {
    background: transparent;
    backdrop-filter: none;
    padding: 0.5rem 1.2rem;
    border-radius: 40px;
    color: var(--accent-primary);
    border: none;
    font-weight: 600;
    transition: 0.2s;
    cursor: pointer;
    font-size: 0.9rem;
    text-decoration: none;
    display: inline-block;
}
.footer-link:hover {
    background: rgba(255,255,255,0.1);
    color: var(--accent-primary);
    border: none;
    transform: translateY(-2px);
    box-shadow: none;
}

.red-button {
    background: #ff3333;
    border: none;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    box-shadow: 0 0 30px red;
    cursor: pointer;
    transition: 0.2s;
    color: white;
    font-weight: 800;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--accent-primary);
}
.red-button:active {
    transform: scale(0.9);
    box-shadow: 0 0 80px red;
}

.lightbox-button {
    background: var(--accent-primary);
    color: var(--bg-primary);
    border: 2px solid var(--accent-secondary);
    padding: 0.6rem 1.5rem;
    border-radius: 60px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s;
    font-size: 0.9rem;
}
.lightbox-button:hover {
    background: var(--accent-secondary);
    color: var(--bg-primary);
    border-color: var(--accent-primary);
}

/* ---------- Design-Slider (veredelt) ---------- */
.design-slider.glass-card {
    background: transparent;
    backdrop-filter: none;
    border: none;
    border-radius: 2rem;
    padding: 1.5rem;
    margin: 2rem 0;
    box-shadow: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.slider-header {
    display: flex;
    flex-direction: column;
    min-width: 120px;
}
.slider-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
}
.slider-value {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--accent-primary);
}

.slider-container {
    position: relative;
    width: 300px;
    height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.slider {
    width: 100%;
    margin: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    z-index: 2;
}
.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent-primary);
    cursor: pointer;
    box-shadow: 0 0 15px var(--accent-primary);
}
.slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    background: rgba(128,128,128,0.25);
    border-radius: 2px;
}
.slider::-moz-range-track {
    width: 100%;
    height: 4px;
    background: rgba(128,128,128,0.25);
    border-radius: 2px;
    border: none;
}
.slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent-primary);
    cursor: pointer;
    box-shadow: 0 0 15px var(--accent-primary);
    border: none;
}

.slider-track {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(128,128,128,0.25);
    border-radius: 2px;
    transform: translateY(-50%);
    z-index: 1;
}
.dark-mode .slider-track {
    background: rgba(255,255,255,0.12);
}
.light-mode .slider-track {
    background: rgba(0,0,0,0.12);
}
.slider-progress {
    height: 4px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 2px;
    width: 0%;
    transition: width 0.1s ease;
}
.slider-stops {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    color: var(--text-secondary);
    font-size: 0.7rem;
    letter-spacing: 0.5px;
}
.slider-stops .stop:nth-child(1) { color: #888; }
.slider-stops .stop:nth-child(2) { color: var(--accent-primary); }
.slider-stops .stop:nth-child(3) { color: var(--accent-secondary); }
.light-mode .slider-stops .stop:nth-child(1) { color: #666; }
.light-mode .slider-stops { color: var(--text-secondary); }

.token-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--accent-primary);
    color: var(--bg-primary);
    padding: 0.5rem 1.5rem;
    border-radius: 60px;
    font-weight: 700;
    font-size: 1.1rem;
    box-shadow: 0 0 15px var(--accent-primary);
    justify-content: center;
    white-space: nowrap;
}
.kristall-icon {
    width: 24px;
    height: 24px;
    background: url('../images/kristallherz.svg') no-repeat center;
    background-size: contain;
    display: inline-block;
    filter: brightness(0) invert(1);
}

/* ---------- Lightbox v2 (Dynamisches Highend-Portal) ---------- */
.lightbox {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0);
    backdrop-filter: blur(0px);
    align-items: center;
    justify-content: center;
    transition: background 0.5s ease, backdrop-filter 0.5s ease;
    overflow: hidden;
}
.lightbox.show {
    display: flex;
    background: rgba(0,0,0,0.94);
    backdrop-filter: blur(22px) saturate(1.5);
}

/* Magische Partikel im Hintergrund */
.lightbox::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(1.5px 1.5px at 15% 25%, var(--accent-primary), transparent),
        radial-gradient(1px 1px at 75% 65%, var(--accent-secondary), transparent),
        radial-gradient(1.2px 1.2px at 50% 50%, rgba(255,255,255,0.3), transparent),
        radial-gradient(0.8px 0.8px at 8% 85%, var(--accent-primary), transparent),
        radial-gradient(1px 1px at 92% 15%, var(--accent-secondary), transparent),
        radial-gradient(0.6px 0.6px at 35% 70%, rgba(255,255,255,0.2), transparent),
        radial-gradient(0.8px 0.8px at 65% 30%, var(--accent-primary), transparent);
    background-size: 400px 400px;
    opacity: 0;
    animation: lightboxStars 16s linear infinite;
    pointer-events: none;
    transition: opacity 0.6s ease 0.2s;
}
.lightbox.show::before {
    opacity: 0.5;
}
@keyframes lightboxStars {
    0%   { transform: translateY(0) rotate(0deg); }
    50%  { transform: translateY(-30px) rotate(1.5deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

/* Aura-Ring um den Content */
.lightbox::after {
    content: '';
    position: absolute;
    width: min(90vw, 1050px);
    height: min(82vh, 750px);
    border-radius: calc(var(--ui-radius, 15px) * 2.2);
    border: 1px solid rgba(var(--accent-primary-rgb, 255,215,0), 0.12);
    box-shadow:
        0 0 80px rgba(var(--accent-primary-rgb, 255,215,0), 0.06),
        0 0 160px rgba(var(--accent-primary-rgb, 255,215,0), 0.03),
        inset 0 0 80px rgba(var(--accent-primary-rgb, 255,215,0), 0.02);
    pointer-events: none;
    opacity: 0;
    transition: opacity 1s ease 0.3s;
}
.lightbox.show::after {
    opacity: 1;
}

.lightbox-content {
    position: relative;
    width: min(94vw, 1200px);
    max-height: 94vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(145deg,
        rgba(var(--accent-primary-rgb, 255,215,0), 0.03),
        rgba(0,0,0,0.45));
    border-radius: calc(var(--ui-radius, 15px) * 1.8);
    border: 1.5px solid rgba(var(--accent-primary-rgb, 255,215,0), 0.18);
    box-shadow:
        0 30px 100px rgba(0,0,0,0.65),
        0 0 50px rgba(var(--accent-primary-rgb, 255,215,0), 0.08),
        inset 0 1px 0 rgba(255,255,255,0.07);
    overflow: hidden;
    opacity: 0;
    transform: scale(0.9) translateY(25px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.lightbox.show .lightbox-content {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* ── Stage: Medienbereich ── */
.lightbox-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    max-height: 76vh;
    overflow: hidden;
    background: radial-gradient(ellipse at center, rgba(15,15,35,0.5), rgba(0,0,0,0.92));
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Media Container mit Transition ── */
.lightbox-media-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.lightbox-media-container.lightbox-transitioning {
    opacity: 0;
    transform: scale(0.94);
}

/* ── Medien-Elemente ── */
.lightbox-media {
    max-width: 96%;
    max-height: calc(100% - 50px);
    object-fit: contain;
    border-radius: calc(var(--ui-radius, 15px) * 0.6);
    box-shadow:
        0 10px 40px rgba(0,0,0,0.5),
        0 0 20px rgba(var(--accent-primary-rgb, 255,215,0), 0.05);
    user-select: none;
    -webkit-user-drag: none;
    transition: transform 0.2s ease;
    transform-origin: center center;
    will-change: transform;
}
.lightbox-media--video {
    width: 94%;
    max-height: calc(100% - 40px);
    border-radius: calc(var(--ui-radius, 15px) * 0.8);
    box-shadow:
        0 15px 60px rgba(0,0,0,0.6),
        0 0 35px rgba(var(--accent-primary-rgb, 255,215,0), 0.06);
}
.lightbox-media--audio {
    width: 80%;
    max-width: 500px;
    filter: drop-shadow(0 4px 16px rgba(0,0,0,0.4));
}

/* ── Caption ── */
.lightbox-caption {
    position: absolute;
    bottom: 0;
    left: 0; right: 0;
    padding: 1.4rem 1.5rem 1rem;
    background: linear-gradient(to top, rgba(0,0,0,0.88), rgba(0,0,0,0.4), transparent);
    color: rgba(255,255,255,0.92);
    font-family: var(--font-serif, 'Playfair Display', serif);
    font-size: 1.05rem;
    text-align: center;
    letter-spacing: 0.05em;
    pointer-events: none;
    text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}

/* ── Close Button — schwebender Kristall ── */
.lightbox-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(10px);
    color: var(--accent-primary);
    border: 1.5px solid rgba(var(--accent-primary-rgb, 255,215,0), 0.25);
    font-size: 22px;
    font-weight: 300;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    transition: all 0.3s ease;
    box-shadow: 0 4px 18px rgba(0,0,0,0.35);
}
.lightbox-close:hover {
    background: var(--accent-primary);
    color: var(--bg-primary, #000);
    border-color: var(--accent-secondary);
    transform: scale(1.12) rotate(90deg);
    box-shadow: 0 0 25px rgba(var(--accent-primary-rgb, 255,215,0), 0.45);
}

/* ── Navigation Arrows — Glasscheiben ── */
.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(0,0,0,0.3);
    backdrop-filter: blur(10px);
    color: var(--accent-primary);
    border: 1.5px solid rgba(var(--accent-primary-rgb, 255,215,0), 0.18);
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 15;
    opacity: 0.55;
    box-shadow: 0 4px 18px rgba(0,0,0,0.25);
}
.lightbox-prev { left: 12px; }
.lightbox-next { right: 12px; }
.lightbox-prev:hover,
.lightbox-next:hover {
    opacity: 1;
    background: rgba(var(--accent-primary-rgb, 255,215,0), 0.18);
    border-color: rgba(var(--accent-primary-rgb, 255,215,0), 0.5);
    transform: translateY(-50%) scale(1.12);
    box-shadow: 0 0 22px rgba(var(--accent-primary-rgb, 255,215,0), 0.22);
}

/* ── Counter — minimalistischer Fortschritt ── */
.lightbox-counter {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(6px);
    color: rgba(255,255,255,0.7);
    padding: 0.35rem 1rem;
    border-radius: 30px;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    border: 1px solid rgba(255,255,255,0.08);
    z-index: 15;
}

/* ── Thumbnail-Leiste — Edle Filmstreifen-Optik ── */
.lightbox-thumbs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--accent-primary-rgb, 255,215,0), 0.3) transparent;
    background: linear-gradient(to top,
        rgba(0,0,0,0.6),
        rgba(0,0,0,0.35));
    border-top: 1px solid rgba(var(--accent-primary-rgb, 255,215,0), 0.1);
    flex-shrink: 0;
}
.lightbox-thumbs::-webkit-scrollbar { height: 4px; }
.lightbox-thumbs::-webkit-scrollbar-track { background: transparent; }
.lightbox-thumbs::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-primary-rgb, 255,215,0), 0.3);
    border-radius: 4px;
}

.lightbox-thumb {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    flex-shrink: 0;
    width: 64px;
    height: 44px;
    border-radius: calc(var(--ui-radius, 15px) * 0.4);
    overflow: hidden;
    border: 2px solid transparent;
    opacity: 0.5;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.05);
}
.lightbox-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.lightbox-thumb:hover {
    opacity: 0.85;
    border-color: rgba(var(--accent-primary-rgb, 255,215,0), 0.3);
    transform: scale(1.08);
}
.lightbox-thumb.active {
    opacity: 1;
    border-color: var(--accent-primary);
    box-shadow: 0 0 12px rgba(var(--accent-primary-rgb, 255,215,0), 0.3);
    transform: scale(1.05);
}

.thumb-type-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--accent-primary);
    background: rgba(0,0,0,0.3);
    pointer-events: none;
    text-shadow: 0 0 6px rgba(var(--accent-primary-rgb, 255,215,0), 0.4);
}

/* ── Zoom-Controls ── */
.lightbox-zoom-controls {
    position: absolute;
    bottom: 60px;
    right: 14px;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    z-index: 20;
    opacity: 0.4;
    transition: opacity 0.3s ease;
}
.lightbox-zoom-controls:hover,
.lightbox-zoom-controls.zoom-active {
    opacity: 1;
}
.lightbox-zoom-btn {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(8px);
    color: var(--accent-primary);
    border: 1px solid rgba(var(--accent-primary-rgb, 255,215,0), 0.2);
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}
.lightbox-zoom-btn:hover {
    background: rgba(var(--accent-primary-rgb, 255,215,0), 0.15);
    border-color: rgba(var(--accent-primary-rgb, 255,215,0), 0.4);
    transform: scale(1.1);
}

/* ── Lightbox Responsive ── */
@media (max-width: 700px) {
    .lightbox-content {
        width: 98vw;
        max-height: 96vh;
        border-radius: calc(var(--ui-radius, 15px) * 1.2);
    }
    .lightbox-stage {
        aspect-ratio: auto;
        height: 58vh;
        max-height: none;
    }
    .lightbox-prev,
    .lightbox-next {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
    .lightbox-prev { left: 6px; }
    .lightbox-next { right: 6px; }
    .lightbox-close {
        top: 8px;
        right: 8px;
        width: 36px;
        height: 36px;
        font-size: 18px;
    }
    .lightbox-caption {
        font-size: 0.88rem;
        padding: 0.8rem 1rem;
    }
    .lightbox::after { display: none; }
    .lightbox-thumbs { padding: 0.5rem 0.5rem; gap: 0.35rem; }
    .lightbox-thumb { width: 52px; height: 36px; }
    .lightbox-zoom-controls { bottom: 50px; right: 8px; }
    .lightbox-zoom-btn { width: 30px; height: 30px; font-size: 0.9rem; }
}

@media (max-width: 400px) {
    .lightbox-stage { height: 50vh; }
    .lightbox-prev,
    .lightbox-next {
        width: 36px;
        height: 36px;
        font-size: 16px;
        opacity: 0.5;
    }
    .lightbox-thumb { width: 44px; height: 30px; }
}

@media (min-width: 1600px) {
    .lightbox-content { width: min(92vw, 1400px); }
    .lightbox-stage { max-height: 80vh; }
    .lightbox-thumb { width: 80px; height: 55px; }
}

/* ---------- Modals (Footer-Links) ---------- */
.modal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3000;
}
.modal-small {
    position: absolute;
    min-width: 250px;
    max-width: 300px;
    background: var(--bg-surface);
    border-radius: 24px;
    padding: 1.5rem;
    border: 2px solid var(--accent-primary);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    color: var(--text-primary);
    pointer-events: auto;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.2s, transform 0.2s;
}
.modal-small.show {
    opacity: 1;
    transform: scale(1);
}
.modal-small h3 { color: var(--accent-primary); margin-bottom: 0.5rem; }
.modal-small p { color: var(--text-secondary); margin-bottom: 1rem; }
.modal-small .highlight { color: var(--accent-secondary); font-weight: 600; }
.modal-small-close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}
.modal-small-close:hover { color: var(--accent-primary); }

/* ---------- Atelier-Popup ---------- */
#atelierPopup { display: none; }

/* ---------- Loading Overlay · Cinematic Kristallherz Intro ---------- */
.loading-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: #050210;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 2000;
    transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
}

/* ── Particle Canvas ── */
.intro-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* ── Mandala / Rune Ring ── */
.intro-mandala {
    position: absolute;
    width: min(320px, 70vw);
    height: min(320px, 70vw);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    opacity: 0;
    animation: mandalaAppear 1.2s ease 0.3s forwards;
}
@keyframes mandalaAppear {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6) rotate(-60deg); }
    60%  { opacity: 0.9; }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
}

.mandala-ring {
    fill: none;
    stroke-width: 1.2;
    stroke-dasharray: 900;
    stroke-dashoffset: 900;
}
.ring-outer {
    stroke: rgba(255, 215, 0, 0.35);
    animation: ringDraw 1.5s ease 0.5s forwards, ringRotate 30s linear 2s infinite;
    transform-origin: 150px 150px;
}
.ring-mid {
    stroke: rgba(123, 47, 247, 0.3);
    animation: ringDraw 1.3s ease 0.7s forwards, ringRotateReverse 25s linear 2s infinite;
    transform-origin: 150px 150px;
}
.ring-inner {
    stroke: rgba(64, 224, 208, 0.35);
    animation: ringDraw 1.1s ease 0.9s forwards, ringRotate 20s linear 2s infinite;
    transform-origin: 150px 150px;
}
@keyframes ringDraw { to { stroke-dashoffset: 0; } }
@keyframes ringRotate { to { transform: rotate(360deg); } }
@keyframes ringRotateReverse { to { transform: rotate(-360deg); } }

/* Rune texts */
.rune-text {
    font-size: 18px;
    fill: rgba(255, 215, 0, 0);
    font-family: serif;
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.5));
}
.rune-text.rune-1 { animation: runeGlow 0.4s ease 1.0s forwards; }
.rune-text.rune-2 { animation: runeGlow 0.4s ease 1.1s forwards; }
.rune-text.rune-3 { animation: runeGlow 0.4s ease 1.2s forwards; }
.rune-text.rune-4 { animation: runeGlow 0.4s ease 1.3s forwards; }
.rune-text.rune-5 { animation: runeGlow 0.4s ease 1.4s forwards; }
.rune-text.rune-6 { animation: runeGlow 0.4s ease 1.5s forwards; }
.rune-text.rune-7 { animation: runeGlow 0.4s ease 1.6s forwards; }
.rune-text.rune-8 {
    font-size: 28px;
    animation: runeCenterGlow 0.6s ease 1.8s forwards;
    filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.8));
}
@keyframes runeGlow {
    0%   { fill: rgba(255, 215, 0, 0); }
    50%  { fill: rgba(255, 215, 0, 0.95); filter: drop-shadow(0 0 14px rgba(255, 215, 0, 0.9)); }
    100% { fill: rgba(255, 215, 0, 0.55); filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.5)); }
}
@keyframes runeCenterGlow {
    0%   { fill: rgba(255, 215, 0, 0); }
    40%  { fill: rgba(255, 255, 255, 1); filter: drop-shadow(0 0 25px rgba(255, 215, 0, 1)); }
    100% { fill: rgba(255, 215, 0, 0.8); filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.8)); }
}

/* Cross lines */
.mandala-line {
    stroke: rgba(255, 215, 0, 0.12);
    stroke-width: 0.5;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
}
.ml-1 { animation: ringDraw 0.8s ease 1.4s forwards; }
.ml-2 { animation: ringDraw 0.8s ease 1.5s forwards; }
.ml-3 { animation: ringDraw 0.8s ease 1.6s forwards; }
.ml-4 { animation: ringDraw 0.8s ease 1.7s forwards; }

/* ── 3D Crystal ── */
.intro-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    perspective: 400px;
}
.intro-crystal {
    width: 80px;
    height: 80px;
    position: relative;
    transform-style: preserve-3d;
    animation:
        crystalBirth 1.0s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both,
        crystalSpin 8s linear 2.2s infinite;
}
@keyframes crystalBirth {
    0%   { opacity: 0; transform: scale(0) rotateY(0deg); }
    50%  { opacity: 1; transform: scale(1.3) rotateY(90deg); }
    80%  { transform: scale(0.9) rotateY(160deg); }
    100% { transform: scale(1) rotateY(180deg); }
}
@keyframes crystalSpin {
    from { transform: rotateY(180deg) rotateX(0deg); }
    to   { transform: rotateY(540deg) rotateX(360deg); }
}

.crystal-facet {
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 18px;
    border: 1.5px solid rgba(255, 215, 0, 0.3);
}
.crystal-facet.f1 {
    background: linear-gradient(135deg, rgba(255,215,0,0.15), rgba(75,0,130,0.2));
    transform: rotateY(0deg) translateZ(25px);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.15);
}
.crystal-facet.f2 {
    background: linear-gradient(135deg, rgba(123,47,247,0.15), rgba(255,215,0,0.1));
    transform: rotateY(90deg) translateZ(25px);
    box-shadow: 0 0 30px rgba(123, 47, 247, 0.15);
}
.crystal-facet.f3 {
    background: linear-gradient(135deg, rgba(64,224,208,0.1), rgba(255,215,0,0.15));
    transform: rotateY(180deg) translateZ(25px);
    box-shadow: 0 0 30px rgba(64, 224, 208, 0.15);
}
.crystal-facet.f4 {
    background: linear-gradient(135deg, rgba(212,64,144,0.1), rgba(255,215,0,0.15));
    transform: rotateY(270deg) translateZ(25px);
    box-shadow: 0 0 30px rgba(212, 64, 144, 0.15);
}
.crystal-core {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, #FFD700 0%, #fff 30%, rgba(255,215,0,0) 70%);
    border-radius: 50%;
    animation: corePulse 2s ease-in-out 1.2s infinite;
    opacity: 0;
}
@keyframes corePulse {
    0%   { opacity: 0.6; transform: translate(-50%, -50%) scale(0.8); box-shadow: 0 0 20px rgba(255,215,0,0.4); }
    50%  { opacity: 1;   transform: translate(-50%, -50%) scale(1.4); box-shadow: 0 0 50px rgba(255,215,0,0.8); }
    100% { opacity: 0.6; transform: translate(-50%, -50%) scale(0.8); box-shadow: 0 0 20px rgba(255,215,0,0.4); }
}

/* ── Title & Progress ── */
.intro-text-block {
    position: absolute;
    bottom: max(12%, 60px);
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 5;
    width: min(340px, 85vw);
}
.intro-title {
    font-family: var(--font-serif, 'Playfair Display', serif);
    font-size: clamp(1.6rem, 5vw, 2.4rem);
    font-weight: 600;
    margin: 0 0 0.4rem;
    overflow: hidden;
}
.intro-letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(30px) rotateX(90deg);
    color: #FFD700;
    text-shadow: 0 0 20px rgba(255,215,0,0.5);
    animation: letterReveal 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
/* Stagger each letter */
.intro-letter:nth-child(1)  { animation-delay: 0.6s; }
.intro-letter:nth-child(2)  { animation-delay: 0.66s; }
.intro-letter:nth-child(3)  { animation-delay: 0.72s; }
.intro-letter:nth-child(4)  { animation-delay: 0.78s; }
.intro-letter:nth-child(5)  { animation-delay: 0.84s; }
.intro-letter:nth-child(6)  { animation-delay: 0.90s; }
.intro-letter:nth-child(7)  { animation-delay: 0.96s; }
.intro-letter:nth-child(8)  { animation-delay: 1.02s; }
.intro-letter:nth-child(9)  { animation-delay: 1.08s; }
.intro-letter:nth-child(10) { animation-delay: 1.14s; }
.intro-letter:nth-child(11) { animation-delay: 1.20s; }
.intro-letter:nth-child(12) { animation-delay: 1.26s; }
@keyframes letterReveal {
    0%   { opacity: 0; transform: translateY(30px) rotateX(90deg); filter: blur(8px); }
    60%  { opacity: 1; filter: blur(2px); }
    100% { opacity: 1; transform: translateY(0) rotateX(0deg); filter: blur(0); }
}

.intro-subtitle {
    font-family: var(--font-serif, 'Playfair Display', serif);
    font-size: 0.95rem;
    color: rgba(255,215,0,0.45);
    letter-spacing: 0.25em;
    opacity: 0;
    animation: subtitleFadeIn 0.8s ease 1.5s forwards;
}
@keyframes subtitleFadeIn {
    0%   { opacity: 0; letter-spacing: 0.6em; }
    100% { opacity: 1; letter-spacing: 0.25em; }
}

/* Progress Bar */
.intro-progress {
    width: 100%;
    height: 3px;
    background: rgba(255,255,255,0.06);
    border-radius: 3px;
    margin-top: 1.4rem;
    position: relative;
    overflow: visible;
}
.intro-progress-glow {
    position: absolute;
    inset: -6px 0;
    border-radius: 6px;
    background: linear-gradient(90deg, transparent, rgba(255,215,0,0.06), transparent);
    filter: blur(4px);
}
.intro-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #4B0082, #FFD700, #fff);
    border-radius: 3px;
    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 0 14px rgba(255,215,0,0.5), 0 0 4px rgba(255,255,255,0.3);
    position: relative;
}
.intro-progress-spark {
    position: absolute;
    right: -3px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 10px #FFD700, 0 0 20px #FFD700, 0 0 4px #fff;
    opacity: 0;
    transition: opacity 0.3s;
}
.intro-progress-bar:not([style*="width: 0"]) ~ .intro-progress-spark,
.intro-progress-bar:not([style*="width:0"]) ~ .intro-progress-spark {
    opacity: 1;
}

/* ── Exit: Mandala implodes, flash, fadeout ── */
.loading-overlay.exit {
    animation: introExit 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.loading-overlay.exit .intro-mandala {
    animation: mandalaImplode 0.8s ease forwards;
}
.loading-overlay.exit .intro-crystal {
    animation: crystalExplode 0.7s ease forwards;
}
.loading-overlay.exit .intro-text-block {
    animation: textFlyDown 0.6s ease forwards;
}
@keyframes introExit {
    0%   { opacity: 1; }
    25%  { opacity: 1; background: rgba(255,215,0,0.04); }
    100% { opacity: 0; }
}
@keyframes mandalaImplode {
    0%   { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0.15) rotate(180deg); opacity: 0;
           filter: brightness(3) blur(8px); }
}
@keyframes crystalExplode {
    0%   { transform: scale(1); opacity: 1; }
    30%  { transform: scale(1.8); opacity: 1; filter: brightness(4); }
    100% { transform: scale(0); opacity: 0; filter: brightness(8) blur(20px); }
}
@keyframes textFlyDown {
    0%   { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(40px); filter: blur(8px); }
}

/* ---------- Login Modal ---------- */
.modal {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1500;
}
.modal-content {
    background: var(--bg-surface);
    backdrop-filter: blur(15px);
    border: 2px solid var(--accent-primary);
    border-radius: 3rem;
    padding: 2rem;
    max-width: 400px;
    width: 90%;
    color: var(--text-primary);
    box-shadow: 0 0 70px var(--accent-primary);
    text-align: center;
}
.modal-content h2 { color: var(--accent-primary); margin-bottom: 1rem; font-size: 1.5rem; }
.modal-content input {
    width: 100%;
    padding: 0.8rem;
    margin: 1rem 0;
    border: none;
    border-radius: 60px;
    background: rgba(0,0,0,0.1);
    color: var(--text-primary);
    font-size: 1rem;
    text-align: center;
    border: 1px solid var(--accent-primary);
}
.modal-content button {
    background: var(--accent-primary);
    color: var(--bg-primary);
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: 60px;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    transition: 0.2s;
    width: 100%;
}
.modal-content button:hover {
    background: var(--accent-secondary);
    color: var(--bg-primary);
}
.error { color: #ff6666; margin-top: 0.5rem; font-size: 0.9rem; }
.contact {
    margin: 1.5rem 0 1rem;
    border-top: 1px solid var(--accent-primary);
    padding-top: 1rem;
}
.contact a {
    color: var(--accent-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
}
.hint { font-size: 0.8rem; color: var(--text-secondary); margin-top: 1rem; }

/* ---------- Responsive Anpassungen ---------- */
@media (max-width: 1200px) {
    .mockup-container { padding: 1.5rem; }
    .content-panel { max-height: 550px; padding: 2rem; }
}

@media (max-width: 900px) {
    body { padding: 1rem; }
    .design-slider.glass-card { justify-content: center; gap: 1rem; }
    .slider-container { width: 240px; }
    .footer { flex-direction: column; align-items: center; gap: 1rem; }
    .footer-links { justify-content: center; width: 100%; }
    .footer-center { order: -1; }
    .header-actions { width: 100%; justify-content: flex-end; }
}

@media (max-width: 600px) {
    .glass-header { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .logo-text { font-size: 1.4rem; }
    .badge { padding: 0.4rem 1rem; font-size: 0.8rem; min-width: 120px; }
    .soulai-greeting { flex-direction: column; text-align: center; }
    .soulai-avatar { width: 60px; height: 60px; }
    .soulai-text { font-size: 1rem; }
    .platform-tabs { gap: 0.3rem; }
    .tab-button { padding: 0.5rem 1rem; font-size: 0.9rem; }
    .content-panel { max-height: 450px; padding: 1.5rem; }
    .card-grid { grid-template-columns: 1fr; }
    .design-slider.glass-card { flex-direction: column; align-items: stretch; }
    .slider-container { width: 100%; }
    .lightbox-button { width: 100%; }
    .red-button { align-self: center; }
    .section-nav .section-link { display: none; }
    .mobile-section-select { display: block; }
}