/* ============================================================================
   INDEX-ADDITIONS - Zusatz-Styles für Startseite (index.html) & KIKI-Chat
   ============================================================================
   Ursprünglich: index.css im Root. Verschoben in css/pages/ für einheitliche
   Struktur. Enthält Styles, die noch nicht in die anderen Module zerlegt wurden.
   
   TODO: Styles schrittweise in css/layout/, css/pages/, css/components/ übertragen.
   ============================================================================ */

/* Startseite: alles in JetBrains Mono (nur wenn #page1 vorhanden) */
#pageContainer:has(#page1),
#pageContainer:has(#page1) * {
    font-family: 'JetBrains Mono', monospace !important;
}

.page-container {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    overflow-y: auto !important;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.page-section {
    display: flex;
    flex-direction: column;
    padding: 40px 20px;
    position: relative;
    min-height: auto;
    align-items: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: visible; /* Wichtig: Erlaube vertikales Overflow für Hover-Effekte */
    margin: 0;
    padding-left: min(20px, 2vw);
    padding-right: min(20px, 2vw);
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
}

/* Verhindere horizontale Scrollleiste - bereits oben in html, body definiert */

#page1 {
    padding-top: 0;
    padding-bottom: 0;
    min-height: 100vh;
    height: 100vh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Zentriert vertikal */
    align-items: center; /* Zentriert horizontal */
    overflow: hidden; /* Schneidet scale(1.3)-Video ab, verhindert Scrollbalken auf Page1 */
    position: relative;
}

/* Platz für Top-Header (Menüband) - wird dynamisch berechnet */
@media (min-width: 769px) {
    #page1 {
        padding-top: 0px; /* Kein padding-top für große Ansichten */
    }
}

@media (max-width: 768px) {
    #page1 {
        padding-top: 100px; /* Header + Credits-Zeile unter Menü */
    }
}

@media (max-width: 480px) {
    #page1 {
        padding-top: 168px; /* Header + horizontales Scroll-Menü + Credits darunter */
        padding-bottom: 0;
    }
}


#page3 {
    padding-top: 100px; /* Header + Credits-Zeile unter Menü */
}

/* SEITE 4: Freunde */
#page4 {
    padding-top: 120px;
    padding-bottom: 40px;
    min-height: auto;
}

/* SEITE 5: Bilderbücher (vorher Page 4) */
#page5 {
    padding-top: 120px; /* Header + Credits-Zeile */
    margin-top: 300px; /* Abstand oben, damit Titel nicht verdeckt wird */
    background: transparent !important; /* Entferne grauen Hintergrund */
    padding-left: 0 !important; /* Kein seitliches Padding */
    padding-right: 0 !important; /* Kein seitliches Padding */
}

#page6 {
    padding-top: 120px;
    margin-top: 0; /* Kein Margin für Page 6 */
    background: transparent !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Professionellere Schriften für page3 */
#page3 .subtitle {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: clamp(24px, 3vw, 36px);
    color: #2c3e50;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    letter-spacing: -0.5px;
    line-height: 1.3;
    margin-bottom: 30px;
}

#page3 .subtitle-break {
    font-weight: 600;
    font-size: 0.85em;
    color: #667eea;
    opacity: 0.9;
    letter-spacing: 0.3px;
    margin-top: 8px;
    display: block;
}

#page3 .name-input-title {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: clamp(26px, 3.2vw, 34px);
    color: #667eea;
    text-shadow: 0 1px 3px rgba(0,0,0,0.1);
    letter-spacing: -0.3px;
    line-height: 1.4;
    animation: none; /* Entferne Bounce-Animation für professionelleren Look */
}

#page3 .neueste-bilder-link {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: clamp(20px, 2.5vw, 28px);
    color: #2c3e50;
    text-shadow: 0 1px 2px rgba(0,0,0,0.08);
    letter-spacing: 0.2px;
    line-height: 1.5;
    transition: all 0.2s ease;
}

#page3 .neueste-bilder-link:hover {
    color: #667eea;
    text-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);
    transform: translateX(3px);
}

#page3 .neueste-bilder-link .link-icon {
    font-size: 1.3em;
    margin-right: 10px;
    vertical-align: middle;
}

#page3 .login-button {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.5px;
    text-transform: none;
    animation: none; /* Entferne Pulse-Animation für professionelleren Look */
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.25);
}

#page3 .login-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.35);
    rotate: 0deg; /* Entferne Rotation für professionelleren Look */
}

/* SEITE 4: Freunde */
#page4 {
    padding-top: 100px;
    padding-bottom: 40px;
    min-height: auto;
    background: transparent !important;
}

/* Freunde-Tabs */
.friends-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
    border-bottom: 2px solid rgba(102, 126, 234, 0.2);
    padding-bottom: 10px;
}

.friends-tab {
    background: transparent;
    border: none;
    padding: 8px 16px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-weight: 600;
    color: #667eea;
    cursor: pointer;
    border-radius: 6px 6px 0 0;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
}

.friends-tab:hover {
    background: rgba(102, 126, 234, 0.08);
}

.friends-tab.active {
    background: rgba(102, 126, 234, 0.12);
    color: #667eea;
    border-bottom: 2px solid #667eea;
}

/* Dark Mode: Freunde-Tabs */
body.dark-mode .friends-tabs,
html.dark-mode .friends-tabs {
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .friends-tab,
html.dark-mode .friends-tab {
    color: #ffffff !important;
}

body.dark-mode .friends-tab:hover,
html.dark-mode .friends-tab:hover {
    background: rgba(102, 126, 234, 0.15) !important;
}

body.dark-mode .friends-tab.active,
html.dark-mode .friends-tab.active {
    background: rgba(102, 126, 234, 0.2) !important;
    color: #ffffff !important;
    border-bottom-color: #667eea !important;
}

.friends-badge {
    background: #ff6b9d;
    color: white;
    border-radius: 10px;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 700;
    min-width: 18px;
    text-align: center;
}

/* Dark Mode: Freunde-Badge */
body.dark-mode .friends-badge,
html.dark-mode .friends-badge {
    background: #ff6b9d !important;
    color: #ffffff !important;
}

.friends-tab-content {
    display: none;
}

.friends-tab-content.active {
    display: block;
}

.friends-subtitle {
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 12px;
}

/* Dark Mode: Freunde-Subtitle */
body.dark-mode .friends-subtitle,
html.dark-mode .friends-subtitle {
    color: #ffffff !important;
}

.friends-search-container {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.friends-search-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid rgba(102, 126, 234, 0.2);
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    outline: none;
    transition: border-color 0.3s ease;
    background: #ffffff;
}

.friends-search-input:focus {
    border-color: rgba(102, 126, 234, 0.4);
}

.friends-search-button {
    padding: 8px 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.friends-search-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(102, 126, 234, 0.3);
}

/* Dark Mode: Freunde-Suche */
body.dark-mode .friends-search-input,
html.dark-mode .friends-search-input {
    background: #1a1a1a !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

body.dark-mode .friends-search-input:focus,
html.dark-mode .friends-search-input:focus {
    border-color: rgba(102, 126, 234, 0.5) !important;
}

body.dark-mode .friends-search-input::placeholder,
html.dark-mode .friends-search-input::placeholder {
    color: #888 !important;
}

.friends-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.friends-empty {
    text-align: center;
    padding: 30px 20px;
    color: #999;
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
}

/* Dark Mode: Freunde-Empty */
body.dark-mode .friends-empty,
html.dark-mode .friends-empty {
    color: #aaaaaa !important;
}

.friends-item {
    background: white;
    border: 1px solid rgba(102, 126, 234, 0.15);
    border-radius: 10px;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.friends-item:hover {
    border-color: rgba(102, 126, 234, 0.3);
    box-shadow: 0 3px 8px rgba(102, 126, 234, 0.15);
}

.friends-item-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.friends-item-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: white;
    font-weight: 700;
    flex-shrink: 0;
}

.friends-item-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    font-weight: 600;
    color: #2c3e50;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.friends-display-name {
    font-size: 15px;
    font-weight: 600;
    color: #2c3e50;
}

.friends-username {
    font-size: 12px;
    font-weight: 400;
    color: #999;
    font-style: italic;
}

/* Dark Mode: Freunde-Elemente */
body.dark-mode .friends-item,
html.dark-mode .friends-item {
    background: #1a1a1a !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important;
}

body.dark-mode .friends-item:hover,
html.dark-mode .friends-item:hover {
    border-color: rgba(102, 126, 234, 0.4) !important;
    box-shadow: 0 3px 8px rgba(102, 126, 234, 0.2) !important;
}

body.dark-mode .friends-display-name,
html.dark-mode .friends-display-name {
    color: #ffffff !important;
}

body.dark-mode .friends-username,
html.dark-mode .friends-username {
    color: #aaaaaa !important;
}

body.dark-mode .friends-item-name,
html.dark-mode .friends-item-name {
    color: #ffffff !important;
}

/* Dark Mode: Header sofort anwenden */
body.dark-mode .header,
html.dark-mode .header {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%) !important;
    color: #ffffff !important;
}

body.dark-mode .header h1,
body.dark-mode .header h2,
body.dark-mode .header .main-title,
body.dark-mode .header .subtitle,
html.dark-mode .header h1,
html.dark-mode .header h2,
html.dark-mode .header .main-title,
html.dark-mode .header .subtitle {
    color: #ffffff !important;
}

/* Kindermodus: Farben aus CSS-Variablen (Admin Dashboard → Farben) */
body.kids-mode-active .top-header,
html.kids-mode-active .top-header {
    background: linear-gradient(135deg, rgba(var(--kids-mode-primary-rgb), 0.5) 0%, rgba(var(--kids-mode-secondary-rgb), 0.5) 50%, rgba(var(--kids-mode-primary-rgb), 0.5) 100%) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 3px solid rgba(var(--kids-mode-primary-rgb), 0.9) !important;
    box-shadow: 0 8px 24px rgba(var(--kids-mode-primary-rgb), 0.5), 0 4px 12px rgba(var(--kids-mode-secondary-rgb), 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 0 30px rgba(var(--kids-mode-primary-rgb), 0.2) !important;
    border-bottom: 3px solid rgba(var(--kids-mode-primary-rgb), 0.9) !important;
}

/* Dark Mode: Top Header sofort anwenden - gleicher Hintergrund wie Scroll-Indikator */
body.dark-mode .top-header,
html.dark-mode .top-header {
    background: linear-gradient(135deg, rgba(255, 107, 157, 0.6) 0%, rgba(102, 126, 234, 0.6) 100%) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1), inset 0 0 100px rgba(0,0,0,0.3) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}

body.dark-mode .top-header a,
body.dark-mode .top-header button,
body.dark-mode .top-header span:not([data-kiki-color]),
body.dark-mode .top-header .menu-button,
body.dark-mode .top-header .credits-text,
body.dark-mode .top-header .edit-characters-button,
body.dark-mode .top-header .top-header-home,
html.dark-mode .top-header a,
html.dark-mode .top-header button,
html.dark-mode .top-header span:not([data-kiki-color]),
html.dark-mode .top-header .menu-button,
html.dark-mode .top-header .credits-text,
html.dark-mode .top-header .edit-characters-button,
html.dark-mode .top-header .top-header-home {
    color: #ffffff !important;
}

/* Kindermodus-Indikator */
#kidsModeIndicator {
    display: none;
    background: rgba(255, 165, 0, 0.5);
    color: #2c3e50;
    text-align: center;
    padding: 8px 15px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 14px;
    border-bottom: 2px solid rgba(255, 165, 0, 0.8);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 10000;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

body.kids-mode-active #kidsModeIndicator,
html.kids-mode-active #kidsModeIndicator {
    display: block !important;
}

/* Kindermodus: Top-Header (Farben aus Admin → Farben) */
body.kids-mode-active .top-header,
html.kids-mode-active .top-header,
body.kids-mode-active.dark-mode .top-header,
html.kids-mode-active.dark-mode .top-header {
    background: linear-gradient(135deg, rgba(var(--kids-mode-primary-rgb), 0.5) 0%, rgba(var(--kids-mode-secondary-rgb), 0.5) 50%, rgba(var(--kids-mode-primary-rgb), 0.5) 100%) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom-color: rgba(var(--kids-mode-primary-rgb), 0.9) !important;
    box-shadow: 0 8px 24px rgba(var(--kids-mode-primary-rgb), 0.5), 0 4px 12px rgba(var(--kids-mode-secondary-rgb), 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 0 30px rgba(var(--kids-mode-primary-rgb), 0.2) !important;
}

/* Kindermodus: Scroll-Indikator */
body.kids-mode-active .scroll-indicator,
html.kids-mode-active .scroll-indicator,
body.kids-mode-active #scrollIndicatorContainer .scroll-indicator,
html.kids-mode-active #scrollIndicatorContainer .scroll-indicator,
body.kids-mode-active #scroll-indicator-container .scroll-indicator,
html.kids-mode-active #scroll-indicator-container .scroll-indicator,
body.kids-mode-active.dark-mode .scroll-indicator,
html.kids-mode-active.dark-mode .scroll-indicator,
body.kids-mode-active.dark-mode #scrollIndicatorContainer .scroll-indicator,
html.kids-mode-active.dark-mode #scrollIndicatorContainer .scroll-indicator,
body.kids-mode-active.dark-mode #scroll-indicator-container .scroll-indicator,
html.kids-mode-active.dark-mode #scroll-indicator-container .scroll-indicator {
    background: linear-gradient(135deg, rgba(var(--kids-mode-primary-rgb), 0.5) 0%, rgba(var(--kids-mode-secondary-rgb), 0.5) 50%, rgba(var(--kids-mode-primary-rgb), 0.5) 100%) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-color: rgba(var(--kids-mode-primary-rgb), 0.9) !important;
    box-shadow: 0 8px 24px rgba(var(--kids-mode-primary-rgb), 0.5), 0 4px 12px rgba(var(--kids-mode-secondary-rgb), 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 0 30px rgba(var(--kids-mode-primary-rgb), 0.2) !important;
}

/* Dark Mode: Scroll Indicator – ident zu menueband.js (schwarz, Buttons grau) */
body.dark-mode .scroll-indicator,
html.dark-mode .scroll-indicator,
body.dark-mode #scrollIndicatorContainer .scroll-indicator,
html.dark-mode #scrollIndicatorContainer .scroll-indicator {
    background: #0a0a0a !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .scroll-indicator button,
body.dark-mode .scroll-indicator .scroll-dot,
body.dark-mode .scroll-indicator .scroll-nav-button,
body.dark-mode .scroll-indicator .scroll-indicator-item,
html.dark-mode .scroll-indicator button,
html.dark-mode .scroll-indicator .scroll-dot,
html.dark-mode .scroll-indicator .scroll-nav-button,
html.dark-mode .scroll-indicator .scroll-indicator-item,
body.dark-mode #scrollIndicatorContainer .scroll-indicator button,
body.dark-mode #scrollIndicatorContainer .scroll-indicator .scroll-dot,
body.dark-mode #scrollIndicatorContainer .scroll-indicator .scroll-nav-button,
body.dark-mode #scrollIndicatorContainer .scroll-indicator .scroll-indicator-item,
html.dark-mode #scrollIndicatorContainer .scroll-indicator button,
html.dark-mode #scrollIndicatorContainer .scroll-indicator .scroll-dot,
html.dark-mode #scrollIndicatorContainer .scroll-indicator .scroll-nav-button,
html.dark-mode #scrollIndicatorContainer .scroll-indicator .scroll-indicator-item {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #667eea !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

body.dark-mode .scroll-indicator .scroll-dot:hover,
body.dark-mode .scroll-indicator .scroll-nav-button:hover,
html.dark-mode .scroll-indicator .scroll-dot:hover,
html.dark-mode .scroll-indicator .scroll-nav-button:hover,
body.dark-mode #scrollIndicatorContainer .scroll-indicator .scroll-dot:hover,
body.dark-mode #scrollIndicatorContainer .scroll-indicator .scroll-nav-button:hover,
html.dark-mode #scrollIndicatorContainer .scroll-indicator .scroll-dot:hover,
html.dark-mode #scrollIndicatorContainer .scroll-indicator .scroll-nav-button:hover {
    background: rgba(255, 255, 255, 0.14) !important;
}

/* Dark Mode: Menü-Button gleich wie Scroll-Indicator (schwarz/grau) */
body.dark-mode .top-header .menu-button,
html.dark-mode .top-header .menu-button {
    background: #0a0a0a !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

body.dark-mode .top-header .menu-button:hover,
html.dark-mode .top-header .menu-button:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6), 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
}

.friends-about-me {
    font-size: 12px;
    color: #666;
    font-style: italic;
    margin-top: 3px;
    line-height: 1.3;
    max-width: 100%;
    word-wrap: break-word;
}

body.dark-mode .friends-about-me,
html.dark-mode .friends-about-me {
    color: #aaaaaa !important;
}

.friends-item-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.friends-action-btn {
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.friends-action-btn.accept {
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
    color: white;
}

.friends-action-btn.reject {
    background: #f44336;
    color: white;
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    border-radius: 6px;
}

.friends-action-btn.cancel {
    background: #999;
    color: white;
}

.friends-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* Dark Mode: Freunde-Action-Buttons */
body.dark-mode .friends-action-btn,
html.dark-mode .friends-action-btn {
    box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}

body.dark-mode .friends-action-btn:hover,
html.dark-mode .friends-action-btn:hover {
    box-shadow: 0 3px 6px rgba(0,0,0,0.4) !important;
}

/* SEITE 5: Bilderbücher (vorher Page 4) */
#page5 {
    padding-top: 100px; /* Reduziert, damit erste Card nicht abgeschnitten wird */
    margin-top: 300px; /* Abstand oben, damit Titel nicht verdeckt wird */
    background: transparent !important; /* Entferne grauen Hintergrund */
    padding-left: 0 !important; /* Kein seitliches Padding */
    padding-right: 0 !important; /* Kein seitliches Padding */
    padding-bottom: 40px !important; /* Nur unten */
    overflow-y: visible; /* Wichtig: Erlaube vertikales Overflow für Hover-Effekte */
    overflow-x: hidden; /* Behalte horizontales Overflow hidden */
}

/* Seitliches Padding auf 0 für books-grid auf page5 */
#page5 .books-grid, #page6 .books-grid {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important; /* Kein seitliches Margin */
    margin-right: 0 !important; /* Kein seitliches Margin */
    max-width: 100% !important; /* Volle Breite bis zum Rand */
}

/* Seitliches Padding auf 0 für book-card auf page5/6 */
#page5 .book-card, #page6 .book-card {
    padding-left: 10px; /* Gleiches Padding wie gallery-item */
    padding-right: 10px; /* Gleiches Padding wie gallery-item */
    margin-left: 10px; /* Gleicher Margin wie gallery-item */
    margin-right: 10px; /* Gleicher Margin wie gallery-item */
}


/* Kompakte Header-Elemente für bessere Platzausnutzung */
/* #page1 .main-title wird weiter unten definiert */

#page1 .subtitle {
    margin-top: 0;
    margin-bottom: 10px;
}

#page1 .login-button {
    margin-top: 10px;
    margin-bottom: 0;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: none;
    animation: none; /* Entferne Pulse-Animation für professionelleren Look */
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.25);
}

#page1 .login-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.35);
    rotate: 0deg; /* Entferne Rotation für professionelleren Look */
}

/* Video-Phase: KIKI verstecken bis Video 1x durchgelaufen ist */
body.video-phase #kikiGlobalWrap,
body.video-phase #kikiBubbleChat {
    display: none !important;
}
/* Video-Phase: Greeting und CTA-Zeile (Buttons + Kiki-Show-Karte) erst nach Video-Ende anzeigen */
body.video-phase .start-video-cta-wrapper .start-video-cta-row,
body.video-phase .start-video-cta-wrapper #greeting {
    display: none !important;
}
/* Shortcut (Strg+Alt+K): Kiki auch in der Video-Phase anzeigen */
body.video-phase #kikiGlobalWrap.kiki-force-show,
body.video-phase #kikiBubbleChat.kiki-force-show {
    display: block !important;
}

/* Wrapper: Video + CTA zentriert auf page1 */
.start-video-cta-wrapper {
    position: absolute;
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px; /* Abstand zwischen Video-Bereich und CTA-Buttons */
    z-index: 1;
}

/* Mobile: Reihenfolge Hallo → Video → Buttons */
@media (max-width: 768px) {
    #page1 .start-video-cta-wrapper {
        position: static;
        transform: none;
        left: auto;
        top: auto;
        width: 100%;
        padding-top: 28px;
        padding-bottom: 24px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }
    #page1 .start-video-cta-wrapper .greeting {
        position: static;
        transform: none;
        top: auto;
        left: auto;
        order: 1;
        margin-bottom: 4px;
    }
    #page1 .start-video-cta-wrapper .greeting:hover {
        transform: translateY(-1px) scale(1.01);
    }
    #page1 .start-video-cta-wrapper .greeting:active {
        transform: scale(0.98);
    }
    #page1 .start-video-cta-wrapper .start-video-container {
        order: 2;
    }
    #page1 .start-video-cta-wrapper .start-video-cta-row {
        order: 3;
    }
    #page1 .start-video-cta-wrapper .start-video-cta-buttons {
        width: fit-content;
        min-width: 0;
    }
    #page1 .greeting {
        font-size: 18px;
        padding: 6px 0;
    }
}
@media (max-width: 480px) {
    #page1 .start-video-cta-wrapper {
        padding-top: 24px;
        padding-bottom: 20px;
        gap: 22px;
    }
    #page1 .start-video-cta-wrapper .start-video-cta-row {
        order: 3;
    }
    #page1 .start-video-cta-wrapper .start-video-cta-buttons {
        width: fit-content;
        max-width: none;
    }
    #page1 .greeting {
        font-size: 19px;
        padding: 6px 0;
    }
}

/* Zeile: CTA-Buttons + Kiki-Show-Karte nebeneinander (Desktop) bzw. untereinander (Mobile) */
.start-video-cta-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
@media (min-width: 769px) {
    .start-video-cta-row {
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        gap: 20px;
    }
}

/* Beide CTA-Buttons gleich breit, schmal gehalten */
.start-video-cta-buttons {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: fit-content;
    max-width: 260px;
}
.start-video-cta-buttons .start-video-cta {
    width: 100% !important;
    min-width: 0;
    justify-content: center !important; /* Beschriftung zentriert wie auf großen Ansichten */
}

/* Info-Symbol unter den CTA-Buttons → info.html (Startseite) */
@keyframes start-page-info-blink {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.35;
        transform: scale(1.06);
    }
}

.start-page-info-link-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 10px;
}

.start-page-info-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    line-height: 1;
    border-radius: 50%;
    padding: 4px;
    transition: transform 0.15s ease, background 0.15s ease;
}

.start-page-info-link:hover,
.start-page-info-link:focus-visible {
    transform: scale(1.08);
    outline: none;
}

.start-page-info-link:focus-visible {
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.55);
}

.start-page-info-icon {
    font-size: clamp(2.25rem, 7vw, 3.25rem);
    line-height: 1;
    animation: start-page-info-blink 1.25s ease-in-out infinite;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

/* Ele-Logo + MP3 unter dem ℹ️-Link (Startseite, nach Intro) */
.start-page-ele-logo-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 6px;
    pointer-events: none;
}

.index-ele-logo-wrap--inline-start {
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: auto !important;
}

.start-page-ele-logo-slot .index-ele-logo-btn {
    pointer-events: auto;
}

html:not(.dark-mode) .start-page-info-icon,
body:not(.dark-mode) .start-page-info-icon {
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
}

@media (prefers-reduced-motion: reduce) {
    .start-page-info-icon {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* Desktop-Ansichten: Wrapper zentriert, Greeting oben über dem Willkommenstext */
@media (min-width: 769px) {
    .start-video-cta-wrapper {
        top: 46%;
        transform: translate(-50%, -52%);
    }
    /* „Hallo NAME“ oben im Block, nicht mittig – über Willkommenstext */
    #page1 .start-video-cta-wrapper .greeting {
        position: static;
        top: auto;
        left: auto;
        transform: none;
        margin-bottom: 8px;
    }
    #page1 .start-video-cta-wrapper .greeting:hover {
        transform: translateY(-1px) scale(1.01);
    }
    #page1 .start-video-cta-wrapper .greeting:active {
        transform: scale(0.98);
    }
}

/* Sehr kleine Bildschirme: Wrapper etwas höher, mehr Platz nach unten */
@media (max-width: 480px) {
    .start-video-cta-wrapper {
        top: 44%;
        transform: translate(-50%, -50%);
    }
}

/* CTA-Button unter Video – gleicher Stil wie Chat-Arena im Greeting-Menü */
.start-video-cta {
    width: fit-content !important;
    min-width: fit-content;
    opacity: 1 !important;
    animation: start-video-cta-pulse 1.5s ease-in-out infinite !important;
    box-shadow: 0 2px 12px rgba(255, 215, 0, 0.25); /* Basis – Animation überschreibt */
    padding: 0 12px 0 12px !important;
    justify-content: center;
    gap: 12px;
    border: none;
    font: inherit;
    -webkit-tap-highlight-color: transparent;
    margin-top: 0; /* neutrale Position – Abstand wird über Wrapper/Gaps gesteuert */
}
@keyframes start-video-cta-pulse {
    0%, 100% {
        box-shadow: 0 2px 12px rgba(255, 215, 0, 0.25);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 6px 28px rgba(255, 215, 0, 0.6), 0 0 30px rgba(255, 165, 0, 0.4);
        transform: scale(1.04);
    }
}
.start-video-cta:hover {
    animation: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 18px rgba(255, 215, 0, 0.4) !important;
}
.start-video-cta .start-video-cta-emoji {
    flex-shrink: 0;
    pointer-events: none;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    font-size: 28px;
}

/* Startseite: Chat-Arena-Button weniger durchsichtig (nur start-video-cta-buttons, nicht Greeting-Menü) */
.start-video-cta-buttons .start-video-cta.greeting-nav-highlight {
    background: rgba(255, 215, 0, 0.78) !important;
    border-color: rgba(255, 215, 0, 0.85) !important;
}
.start-video-cta-buttons .start-video-cta.greeting-nav-highlight:hover {
    background: rgba(255, 215, 0, 0.9) !important;
}

/* Schatzinsel-Button unter Chat-Arena: blinkend, andere Farbe (Türkis), anderer Rhythmus, weniger durchsichtig */
.start-video-cta-schatzinsel {
    margin-top: 0 !important;
    animation: start-video-cta-schatzinsel-pulse 2.2s ease-in-out infinite !important;
    background: rgba(13, 148, 136, 0.78) !important;
    border: 1px solid rgba(20, 184, 166, 0.85) !important;
    box-shadow: 0 2px 12px rgba(20, 184, 166, 0.35) !important;
}
.start-video-cta-schatzinsel .greeting-nav-label {
    color: #2dd4bf !important;
    font-weight: 800 !important;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.8), 0 0 12px rgba(0,0,0,0.6), -1px -1px 2px rgba(0,0,0,0.5), 0 0 10px rgba(20, 184, 166, 0.4) !important;
}
.start-video-cta-schatzinsel .start-video-cta-schatzinsel-emoji {
    background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%) !important;
    border: 2px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 4px 16px rgba(20, 184, 166, 0.5), 0 0 20px rgba(13, 148, 136, 0.3), inset 0 1px 0 rgba(255,255,255,0.4) !important;
}
@keyframes start-video-cta-schatzinsel-pulse {
    0%, 100% {
        box-shadow: 0 2px 12px rgba(20, 184, 166, 0.25);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 6px 28px rgba(20, 184, 166, 0.6), 0 0 30px rgba(13, 148, 136, 0.4);
        transform: scale(1.04);
    }
}
.start-video-cta-schatzinsel:hover {
    animation: none;
    transform: translateY(-2px);
    background: rgba(20, 184, 166, 0.9) !important;
    box-shadow: 0 4px 18px rgba(20, 184, 166, 0.5) !important;
}

/* KIKI-Show-Button: gleicher Stil und gleiche Animation wie die anderen beiden CTA-Buttons, Farbe Bordeaux/Rot */
.start-video-cta-kikishow {
    margin-top: 0 !important;
    animation: start-video-cta-pulse 1.5s ease-in-out infinite !important;
    background: rgba(139, 0, 0, 0.78) !important;
    border: 1px solid rgba(160, 0, 0, 0.85) !important;
    box-shadow: 0 2px 12px rgba(139, 0, 0, 0.35) !important;
    text-decoration: none;
    color: inherit;
}
.start-video-cta-kikishow .greeting-nav-label {
    color: #ffb3b3 !important;
    font-weight: 800 !important;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.8), 0 0 12px rgba(0,0,0,0.6), -1px -1px 2px rgba(0,0,0,0.5), 0 0 10px rgba(200, 80, 80, 0.4) !important;
}
/* Blinkendes „NEU!!“-Badge beim KIKI-Show-Button */
.start-kikishow-neu-badge {
    display: inline-block;
    font-size: 0.75em;
    font-weight: 800;
    margin-left: 6px;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(255, 215, 0, 0.9);
    color: #8b0000 !important;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
    animation: start-kikishow-neu-blink 1s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .start-kikishow-neu-badge {
        animation: none;
        opacity: 1;
    }
}
@keyframes start-kikishow-neu-blink {
    0%, 100% { opacity: 1; filter: brightness(1); }
    50% { opacity: 0.75; filter: brightness(1.2); }
}
.start-video-cta-kikishow:hover .start-kikishow-neu-badge {
    animation: none;
    opacity: 1;
}
.start-video-cta-kikishow .start-video-cta-kikishow-emoji {
    background: linear-gradient(135deg, #8b0000 0%, #a00000 100%) !important;
    border: 2px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 4px 16px rgba(139, 0, 0, 0.5), 0 0 20px rgba(100, 0, 0, 0.3), inset 0 1px 0 rgba(255,255,255,0.4) !important;
}
.start-video-cta-kikishow:hover {
    animation: none;
    transform: translateY(-2px);
    background: rgba(160, 0, 0, 0.9) !important;
    box-shadow: 0 4px 18px rgba(139, 0, 0, 0.5) !important;
}
.start-video-cta-kikishow:hover .greeting-nav-label {
    color: #ffcccc !important;
}
.start-video-cta-kikishow:hover .start-video-cta-kikishow-emoji {
    box-shadow: 0 6px 20px rgba(139, 0, 0, 0.6), 0 0 25px rgba(100, 0, 0, 0.4) !important;
}

/* Hellmodus: KIKI-Show-Button etwas helleres Rot */
html:not(.dark-mode) .start-video-cta-kikishow,
body:not(.dark-mode) .start-video-cta-kikishow {
    background: rgba(229, 57, 53, 0.78) !important;
    border-color: rgba(244, 67, 54, 0.85) !important;
    box-shadow: 0 2px 12px rgba(229, 57, 53, 0.35) !important;
}
html:not(.dark-mode) .start-video-cta-kikishow:hover,
body:not(.dark-mode) .start-video-cta-kikishow:hover {
    background: rgba(244, 67, 54, 0.9) !important;
    box-shadow: 0 4px 18px rgba(229, 57, 53, 0.5) !important;
}
html:not(.dark-mode) .start-video-cta-kikishow .greeting-nav-label,
body:not(.dark-mode) .start-video-cta-kikishow .greeting-nav-label {
    color: #fff !important;
}
html:not(.dark-mode) .start-kikishow-neu-badge,
body:not(.dark-mode) .start-kikishow-neu-badge {
    color: #8b0000 !important;
    background: rgba(255, 235, 59, 0.95);
}

/* Navigations-Panel-Styles liegen in css/components/mega-menu.css (wird über main.css geladen). */

/* Start-Video-Container – wie ein 70er-Jahre Fernseher */
.start-video-container {
    width: fit-content;
    height: fit-content;
    max-width: min(100vw, 800px);
    position: relative;
    overflow: visible;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Kein sichtbarer Rahmen / Hintergrund mehr */
    padding: 0;
    background: transparent;
    box-shadow: none;
    border: none;
    border-radius: 0;
}

@media (min-width: 769px) {
    .start-video-container {
        max-width: min(100vw, 1024px);
    }
}

@media (min-width: 1200px) {
    .start-video-container {
        max-width: min(100vw, 1180px);
    }
}

.start-video-container:not(.fullscreen) video {
    max-width: 100%;
    display: block;
    border-radius: 18px;
    overflow: hidden;
}


.start-video-container.fullscreen {
    position: fixed;
    top: 56px; /* Platz für Header (Header-Höhe auf Desktop) */
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: calc(100vh - 56px); /* Höhe minus Header-Höhe */
    margin: 0 !important; /* Kein Margin zum Rand */
    padding: 0 !important; /* Kein Padding zum Rand */
    z-index: 999; /* Unter dem Header (z-index: 1000) */
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: none;
}

.start-video-container.fullscreen video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0; /* Keine runden Ecken im Vollbildmodus */
}

/* Media Queries für normale Ansicht - Header-Höhe berücksichtigen */
@media (max-width: 768px) {
    .start-video-cta-wrapper {
        top: 42%; /* Etwas nach oben */
        transform: translate(-50%, calc(-50% - 10px)); /* Leicht nach oben */
    }
    
    .start-video-cta .start-video-cta-emoji {
        width: 45px !important;
        height: 45px !important;
        min-width: 45px !important;
        min-height: 45px !important;
        font-size: 24px;
    }
    
    .start-video-container:not(.fullscreen) video {
        border-radius: 24px;
        overflow: hidden;
    }
    
    .start-video-container.fullscreen {
        top: 60px; /* Header-Höhe auf Tablet/Mobile */
        height: calc(100vh - 60px);
    }
}

@media (max-width: 480px) {
    .start-video-cta-wrapper {
        top: 42%; /* Etwas nach oben */
    }
    
    .start-video-cta .start-video-cta-emoji {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        font-size: 20px;
    }
    
    .start-video-container:not(.fullscreen) video {
        border-radius: 24px;
        overflow: hidden;
    }
    
    .start-video-container.fullscreen {
        top: 60px; /* Header-Höhe auf Mobile */
        height: calc(100vh - 60px);
    }
}

.start-video-container:not(.fullscreen) video {
    width: 100vw;
    max-width: 100vw;
    object-fit: contain;
    display: block;
    margin: 0;
    border-radius: 20px; /* Runde Ecken passend zu anderen Videos und Bildern */
    overflow: hidden; /* Stelle sicher, dass die Ecken abgerundet sind */
}



/* Portrait-Orientierung: Kleine Ansichten */
@media (orientation: portrait) and (max-width: 768px) {
    .start-video-container:not(.fullscreen) video {
        border-radius: 24px;
        overflow: hidden;
    }
}

@media (orientation: portrait) and (max-width: 480px) {
    .start-video-container:not(.fullscreen) video {
        border-radius: 24px;
        overflow: hidden;
    }
    
    #page1 {
        padding-top: 50px; /* Reduziert von 80px */
        padding-bottom: 50px; /* Reduziert von 80px */
    }
}

/* Cursor-Hinweis für Klick-Funktion */
#page1 {
    cursor: pointer;
}

#page1 .name-input-section,
#page1 .container {
    cursor: default;
}

/* Menüband-Styles werden von menueband.js bereitgestellt */
body {
    padding-top: 0;
}

/* Login Modal */
.login-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 11000;
    backdrop-filter: blur(5px);
}

.login-overlay.show {
    display: flex;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.login-modal {
    background: linear-gradient(135deg, #ffe6f7 0%, #d4f1ff 50%, #dfffe2 100%);
    border-radius: 21px; /* 70% von 30px */
    padding: 28px; /* 70% von 40px */
    max-width: 315px; /* 70% von 450px */
    width: 90%;
    box-shadow: 0 14px 42px rgba(0,0,0,0.3); /* 70% von 20px 60px */
    text-align: center;
    position: relative;
    animation: slideUp 0.3s ease;
    border: 3.5px solid white; /* 70% von 5px */
}

@keyframes slideUp {
    from {
        transform: translateY(35px); /* 70% von 50px */
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.login-close {
    position: absolute;
    top: 10.5px; /* 70% von 15px */
    right: 10.5px; /* 70% von 15px */
    background: rgba(255, 255, 255, 0.9);
    border: none;
    width: 28px; /* 70% von 40px */
    height: 28px; /* 70% von 40px */
    border-radius: 50%;
    font-size: 16.8px; /* 70% von 24px */
    cursor: pointer;
    color: #667eea;
    font-weight: 700;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2.8px 10.5px rgba(0,0,0,0.2); /* 70% von 4px 15px */
}

.login-close:hover {
    transform: rotate(90deg) scale(1.1);
    background: white;
}

.login-title {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 25.2px; /* 70% von 36px */
    color: #2c3e50;
    margin-bottom: 7px; /* 70% von 10px */
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    letter-spacing: -0.3px;
}

.login-subtitle {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.2px; /* 70% von 16px */
    color: #6c757d;
    margin-bottom: 21px; /* 70% von 30px */
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 14px; /* 70% von 20px */
}

.login-input-group {
    position: relative;
}

.login-input {
    width: 100%;
    padding: 12.6px 17.5px; /* 70% von 18px 25px */
    border: 2.1px solid #667eea; /* 70% von 3px */
    border-radius: 35px; /* 70% von 50px */
    font-size: 14px; /* 70% von 20px */
    font-family: 'JetBrains Mono', monospace;
    text-align: center;
    background: rgba(255, 255, 255, 0.95);
    color: #667eea;
    transition: all 0.3s ease;
    box-shadow: 0 3.5px 10.5px rgba(102, 126, 234, 0.2); /* 70% von 5px 15px */
    box-sizing: border-box;
    -webkit-user-select: text;
    user-select: text;
}

.login-input:focus {
    outline: none;
    border-color: #FF6B9D;
    background: white;
    color: #FF6B9D;
    box-shadow: 0 5.6px 17.5px rgba(255, 107, 157, 0.4); /* 70% von 8px 25px */
    transform: scale(1.05);
}

.login-input::placeholder {
    color: rgba(102, 126, 234, 0.5);
    font-weight: 400;
}

.login-button {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    color: #667eea;
    border: 2.8px solid #FFD700; /* 70% von 4px */
    padding: 10.5px 24.5px; /* 70% von 15px 35px */
    border-radius: 21px; /* 70% von 30px */
    font-size: 14px; /* 70% von 20px */
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 7px 28px rgba(102, 126, 234, 0.3), 0 0 14px rgba(255, 107, 157, 0.2); /* 70% */
    margin-top: 10.5px; /* 70% von 15px */
    text-shadow: none;
    animation: none;
    letter-spacing: 0.5px;
    backdrop-filter: blur(10px);
}

@keyframes buttonPulse {
    0%, 100% {
        box-shadow: 0 7px 28px rgba(102, 126, 234, 0.3), 0 0 14px rgba(255, 107, 157, 0.2); /* 70% */
        transform: scale(1);
    }
    50% {
        box-shadow: 0 10.5px 35px rgba(102, 126, 234, 0.5), 0 0 21px rgba(255, 107, 157, 0.4); /* 70% */
        transform: scale(1.02);
    }
}

.login-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10.5px 35px rgba(102, 126, 234, 0.5), 0 0 21px rgba(255, 107, 157, 0.4); /* 70% */
    animation: none;
    background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.95) 100%);
}

.login-button:active {
    transform: scale(0.95) rotate(0deg);
}

#topLoginButton {
    display: block;
    margin: 10.5px auto 0 auto; /* 70% von 15px */
}

/* Reduziere Abstand zwischen Login-Button und kiki-container auf page 3 */
#page3 #topLoginButton {
    margin-bottom: 0;
}

.login-error {
    background: linear-gradient(135deg, #ff6b6b 0%, #e74c3c 100%);
    color: white;
    padding: 10.5px 14px; /* 70% von 15px 20px */
    border-radius: 14px; /* 70% von 20px */
    font-size: 12.6px; /* 70% von 18px */
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    margin-top: 10.5px; /* 70% von 15px */
    display: none;
    animation: shake 0.5s ease-in-out;
    letter-spacing: 0.2px;
    line-height: 1.4;
}

.login-error.show {
    display: block;
}

.login-link {
    margin-top: 14px; /* 70% von 20px */
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.8px; /* 70% von 14px */
    color: #6c757d;
}

.login-link a {
    color: #667eea;
    text-decoration: none;
    font-weight: 700;
}

.login-link a:hover {
    text-decoration: underline;
}

.login-button-small {
    background: rgba(255, 255, 255, 0.9);
    color: #667eea;
    border: 2.1px solid #667eea; /* 70% von 3px */
    padding: 7px 14px; /* 70% von 10px 20px */
    border-radius: 35px; /* 70% von 50px */
    font-size: 11.2px; /* 70% von 16px */
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2.8px 10.5px rgba(102, 126, 234, 0.2); /* 70% von 4px 15px */
}

.login-button-small:hover {
    background: #667eea;
    color: white;
    transform: translateY(-2px);
}

/* Register Modal (gleicher Stil wie Login) */
.register-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 11000;
    backdrop-filter: blur(5px);
}

.register-overlay.show {
    display: flex;
    animation: fadeIn 0.3s ease;
}

.register-modal {
    background: linear-gradient(135deg, #ffe6f7 0%, #d4f1ff 50%, #dfffe2 100%);
    border-radius: 21px; /* 70% von 30px */
    padding: 17.5px; /* 70% von 25px */
    max-width: 350px; /* 70% von 500px */
    width: 90%;
    box-shadow: 0 14px 42px rgba(0,0,0,0.3); /* 70% von 20px 60px */
    text-align: center;
    position: relative;
    animation: slideUp 0.3s ease;
    border: 3.5px solid white; /* 70% von 5px */
    overflow: hidden;
}

.register-close {
    position: absolute;
    top: 10.5px; /* 70% von 15px */
    right: 10.5px; /* 70% von 15px */
    background: rgba(255, 255, 255, 0.9);
    border: none;
    width: 28px; /* 70% von 40px */
    height: 28px; /* 70% von 40px */
    border-radius: 50%;
    font-size: 16.8px; /* 70% von 24px */
    cursor: pointer;
    color: #667eea;
    font-weight: 700;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2.8px 10.5px rgba(0,0,0,0.2); /* 70% von 4px 15px */
}

.register-close:hover {
    transform: rotate(90deg) scale(1.1);
    background: white;
}

.register-title {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 19.6px; /* 70% von 28px */
    color: #2c3e50;
    margin-bottom: 3.5px; /* 70% von 5px */
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    letter-spacing: -0.3px;
}

.register-subtitle {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.1px; /* 70% von 13px */
    color: #6c757d;
    margin-bottom: 10.5px; /* 70% von 15px */
}

.register-form {
    display: flex;
    flex-direction: column;
    gap: 8.4px; /* 70% von 12px */
}

.register-input-group {
    position: relative;
}

.register-input {
    width: 100%;
    padding: 8.4px 12.6px; /* 70% von 12px 18px */
    border: 2.1px solid #667eea; /* 70% von 3px */
    border-radius: 35px; /* 70% von 50px */
    font-size: 11.2px; /* 70% von 16px */
    font-family: 'JetBrains Mono', monospace;
    text-align: center;
    background: rgba(255, 255, 255, 0.95);
    color: #667eea;
    transition: all 0.3s ease;
    box-shadow: 0 3.5px 10.5px rgba(102, 126, 234, 0.2); /* 70% von 5px 15px */
    box-sizing: border-box;
    -webkit-user-select: text;
    user-select: text;
}

.register-input:focus {
    outline: none;
    border-color: #FF6B9D;
    background: white;
    color: #FF6B9D;
    box-shadow: 0 5.6px 17.5px rgba(255, 107, 157, 0.4); /* 70% von 8px 25px */
    transform: scale(1.05);
}

.register-input::placeholder {
    color: rgba(102, 126, 234, 0.5);
    font-weight: 400;
}

.register-button {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 8.4px 21px; /* 70% von 12px 30px */
    border-radius: 35px; /* 70% von 50px */
    font-size: 14px; /* 70% von 20px */
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5.6px 14px rgba(102, 126, 234, 0.4); /* 70% von 8px 20px */
    margin-top: 2.1px; /* 70% von 3px */
    animation: buttonGlow 2s ease-in-out infinite;
}

.register-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8.4px 24.5px rgba(102, 126, 234, 0.6); /* 70% von 12px 35px */
    animation: none;
}

.register-button:active {
    transform: scale(0.95) rotate(0deg);
}

.register-error {
    background: linear-gradient(135deg, #ff6b6b 0%, #e74c3c 100%);
    color: white;
    padding: 7px 10.5px; /* 70% von 10px 15px */
    border-radius: 14px; /* 70% von 20px */
    font-size: 9.8px; /* 70% von 14px */
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    margin-top: 5.6px; /* 70% von 8px */
    display: none;
    animation: shake 0.5s ease-in-out;
    letter-spacing: 0.2px;
    line-height: 1.4;
}

.register-error.show {
    display: block;
}

.register-success {
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
    color: white;
    padding: 7px 10.5px; /* 70% von 10px 15px */
    border-radius: 14px; /* 70% von 20px */
    font-size: 9.8px; /* 70% von 14px */
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    margin-top: 5.6px; /* 70% von 8px */
    display: none;
    letter-spacing: 0.2px;
    line-height: 1.4;
}

.register-success.show {
    display: block;
}

.register-link {
    margin-top: 7px; /* 70% von 10px */
    font-family: 'JetBrains Mono', monospace;
    font-size: 8.4px; /* 70% von 12px */
    color: #6c757d;
}

.register-link a {
    color: #667eea;
    text-decoration: none;
    font-weight: 700;
}

.register-link a:hover {
    text-decoration: underline;
}

.password-strength {
    margin-top: 1.4px; /* 70% von 2px */
    font-size: 7px; /* 70% von 10px */
    font-family: 'JetBrains Mono', monospace;
    text-align: left;
    padding-left: 12.6px; /* 70% von 18px */
}

.password-strength.weak {
    color: #e74c3c;
}

.password-strength.medium {
    color: #f39c12;
}

.password-strength.strong {
    color: #27ae60;
}

@media (max-width: 768px) {
    .login-modal, .register-modal {
        padding: 21px 14px; /* 70% von 30px 20px */
    }
    .login-title, .register-title {
        font-size: 19.6px; /* 70% von 28px */
    }
    .login-input, .register-input {
        font-size: 12.6px; /* 70% von 18px */
        padding: 10.5px 14px; /* 70% von 15px 20px */
    }
    .login-button, .register-button {
        font-size: 14px; /* 70% von 20px */
        padding: 10.5px 21px; /* 70% von 15px 30px */
    }
}

/* Menüband-Styles werden von menueband.js bereitgestellt */

.kiki-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Zentriert */
    justify-content: center;
    margin: 0 auto 15px auto;
    gap: 0;
    width: fit-content;
    max-width: 100%;
    position: relative;
    cursor: default; /* Kein Pointer-Cursor mehr */
    padding: 10px 0; /* Minimales Padding */
    min-height: auto; /* Keine feste Höhe mehr */
    height: auto; /* Automatische Höhe basierend auf Bild */
    overflow: visible; /* Wichtig: Glow-Effekt darf nicht abgeschnitten werden */
    pointer-events: none; /* Keine Klick-Events mehr */
    outline: none; /* Kein Focus-Ring */
}

.kiki-container * {
    pointer-events: auto; /* Links und Bild sollen weiterhin klickbar sein */
}

.kiki-image {
    width: 156px;
    height: 156px;
    cursor: pointer;
    margin: 0 auto;
    display: block;
    animation: shake 0.5s ease-in-out infinite, glow 2s ease-in-out infinite alternate;
    background: transparent;
    border: none;
    flex-shrink: 0;
    position: absolute;
    z-index: 999; /* Im Vordergrund, aber unter dem Header (z-index: 1000) */
    top: 80px; /* Top padding */
    left: calc(50% + 20px); /* Zentriert + 20px nach rechts */
    transform: translateX(-50%);
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.4)) drop-shadow(0 0 20px rgba(255, 107, 157, 0.3)) drop-shadow(0 0 30px rgba(102, 126, 234, 0.2));
}

.kiki-image:hover {
    animation: shake 0.3s ease-in-out infinite, glow 1s ease-in-out infinite alternate;
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.5)) drop-shadow(0 0 25px rgba(255, 107, 157, 0.4)) drop-shadow(0 0 35px rgba(102, 126, 234, 0.3));
}

.kiki-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 31px;
    font-weight: 700;
    color: #2c3e50;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin: 0;
    padding: 0;
    margin-top: 40px;
    margin-left: 182px;
    letter-spacing: -0.5px;
    line-height: 1.3;
    cursor: pointer;
    animation: shake 0.5s ease-in-out infinite;
    display: inline-block;
    background: linear-gradient(135deg, #FF6B9D 0%, #667eea 50%, #4ecdc4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 1px;
    white-space: nowrap;
    position: relative;
    z-index: 1;
}

.neueste-bilder-link {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: clamp(22px, 2.8vw, 32px); /* Gleicher Stil wie Subtitle */
    color: #2c3e50;
    text-shadow: 0 1px 2px rgba(0,0,0,0.08);
    text-align: left;
    margin: 0;
    padding: 8px 0; /* Padding oben/unten für bessere Touch-Funktion */
    background: transparent;
    border-radius: 0;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: block;
    width: fit-content;
    box-shadow: none;
    letter-spacing: 0.2px;
    line-height: 1.5;
    position: relative;
}

/* Kiki-Container Links: Weißer Hintergrund mit halbrunden Ecken */
.kiki-container .neueste-bilder-link {
    background: #ffffff;
    border-radius: 25px; /* Halbrund statt eckig */
    padding: 8px 20px; /* Höhe schmäler: von 12px auf 8px reduziert */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border: 2px solid rgba(102, 126, 234, 0.2);
    text-align: left;
    margin: 5px 0;
}

/* Erster Link im Kiki-Container: Kein top margin */
.kiki-container .neueste-bilder-link:first-child {
    margin-top: 0;
}

.neueste-bilder-link .link-icon {
    font-size: 1.5em; /* 50% größer */
    display: inline-block;
    margin-right: 8px;
}

.neueste-bilder-link:hover {
    transform: translateX(3px);
    color: #667eea;
    text-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);
}

/* Kiki-Container Links Hover */
.kiki-container .neueste-bilder-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    border-color: rgba(102, 126, 234, 0.4);
    background: #ffffff;
}

/* Dark Mode: Kiki-Container Links */
body.dark-mode .kiki-container .neueste-bilder-link,
html.dark-mode .kiki-container .neueste-bilder-link {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #2c3e50 !important;
    border-color: rgba(102, 126, 234, 0.3) !important;
}

body.dark-mode .kiki-container .neueste-bilder-link:hover,
html.dark-mode .kiki-container .neueste-bilder-link:hover {
    background: #ffffff !important;
    border-color: rgba(102, 126, 234, 0.5) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25) !important;
}

.neueste-bilder-link:active {
    transform: translateY(-1px) scale(1.02);
}

.kiki-container:hover .kiki-text {
    animation: shake 0.3s ease-in-out infinite;
}

.kiki-name-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 30px;
    margin: 20px auto;
    flex-wrap: wrap;
}

@keyframes shake {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    10% { transform: translateX(-5px) rotate(-5deg); }
    20% { transform: translateX(5px) rotate(5deg); }
    30% { transform: translateX(-5px) rotate(-5deg); }
    40% { transform: translateX(5px) rotate(5deg); }
    50% { transform: translateX(-3px) rotate(-3deg); }
    60% { transform: translateX(3px) rotate(3deg); }
    70% { transform: translateX(-3px) rotate(-3deg); }
    80% { transform: translateX(3px) rotate(3deg); }
    90% { transform: translateX(-2px) rotate(-2deg); }
}

@keyframes glow {
    0% {
        filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.4)) drop-shadow(0 0 20px rgba(255, 107, 157, 0.3)) drop-shadow(0 0 30px rgba(102, 126, 234, 0.2));
    }
    100% {
        filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.5)) drop-shadow(0 0 25px rgba(255, 107, 157, 0.4)) drop-shadow(0 0 35px rgba(102, 126, 234, 0.3));
    }
}

.impressum-section {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
    background: white;
    border-radius: 25px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    margin-top: 40px;
    margin-bottom: 40px;
}

.impressum-title {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 36px;
    color: #2c3e50;
    margin-bottom: 30px;
    text-align: center;
    letter-spacing: -0.5px;
    line-height: 1.3;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.impressum-content {
    font-size: 16px;
    line-height: 1.8;
    color: #2c3e50;
}

.impressum-content h3 {
    color: #667eea;
    margin-top: 25px;
    margin-bottom: 10px;
    font-size: 20px;
}

.impressum-content p {
    margin-bottom: 15px;
}

.impressum-content a {
    color: #667eea;
    text-decoration: none;
}

.impressum-content a:hover {
    text-decoration: underline;
}

.main-title {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: clamp(32px, 4vw, 48px); /* Responsive: 32px-48px */
    color: #2c3e50;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 10px;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    padding-top: 0;
    text-align: center;
    display: block;
    width: 100%;
    letter-spacing: -0.5px;
    line-height: 1.3;
    animation: none; /* Entferne Bounce-Animation für professionelleren Look */
}

/* Kompaktere Darstellung für page1 */
#page1 .main-title {
    margin-top: 0; /* Kein Abstand oben - Container wird verschoben, nicht das Element */
    margin-bottom: 8px;
}

.subtitle {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: clamp(22px, 2.8vw, 32px); /* Responsive: 22px-32px */
    color: #2c3e50;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
    display: inline-block;
    letter-spacing: -0.5px;
    border: none;
    box-shadow: none;
    line-height: 1.3;
    position: relative;
}

.subtitle::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #667eea, #FF6B9D, transparent);
    border-radius: 2px;
    opacity: 0.6;
}

/* Kompaktere Darstellung für page1 */
#page1 .subtitle {
    margin-top: 0;
    margin-bottom: 8px;
    padding: clamp(12px, 1.5vw, 15px) clamp(20px, 2.5vw, 30px);
    width: fit-content;
    text-align: center; /* Text zentriert */
    position: relative; /* Verhindert Bewegung */
    animation: none; /* Keine Animation - Titel bewegt sich nicht */
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: #2c3e50;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    letter-spacing: -0.5px;
    line-height: 1.3;
}

#page1 .subtitle-break {
    font-weight: 600;
    font-size: 0.85em;
    color: #667eea;
    opacity: 0.9;
    letter-spacing: 0.3px;
    margin-top: 8px;
    display: block;
}

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

.wobble-a {
    color: #FFD700;
    display: inline-block;
    animation: wobble 0.5s ease-in-out infinite;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

@keyframes wobble {
    0%, 100% { transform: rotate(0deg) translateX(0); }
    25% { transform: rotate(-5deg) translateX(-3px); }
    75% { transform: rotate(5deg) translateX(3px); }
}

.bouncing-letter {
    display: inline-block;
    animation: bounceLetter 1.5s ease-in-out infinite;
}

@keyframes bounceLetter {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    25% {
        transform: translateY(-12px) scale(1.05);
    }
    50% {
        transform: translateY(-8px) scale(1.02);
    }
    75% {
        transform: translateY(-4px) scale(1.01);
    }
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    max-width: min(1400px, 100%);
    padding: 30px 20px;
    padding-left: min(20px, 2vw);
    padding-right: min(20px, 2vw);
    display: flex;
    flex-direction: column;
    background: transparent !important;
    align-items: center;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: visible; /* Wichtig: Erlaube vertikales Overflow für Hover-Effekte */
    box-shadow: none !important;
    filter: none !important;
}

/* Navigation Links auf Seite 1 */
.page-nav-links {
    display: flex;
    flex-direction: row;
    gap: 15px;
    margin-top: 40px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.page-nav-link {
    background: linear-gradient(135deg, #FF6B9D 0%, #667eea 100%);
    color: white;
    text-decoration: none;
    padding: 15px 30px;
    border-radius: 30px;
    font-size: 20px;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
    text-align: center;
    border: 3px solid rgba(255, 255, 255, 0.8);
    white-space: nowrap;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
    letter-spacing: 0.3px;
}

.page-nav-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
    border-color: #FFD700;
    background: linear-gradient(135deg, #ff8bb3 0%, #7d8ff5 100%);
}

.page-nav-link:active {
    transform: translateY(-1px) scale(1.02);
}

/* Scroll-Indikatoren */
/* Scroll-Indikator-Styles werden von menueband.js bereitgestellt */

/* Seiten-Titel */
.page-title {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: clamp(28px, 4vw, 48px); /* Responsive: 28px-48px */
    color: #2c3e50;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    text-align: center;
    margin-bottom: 30px;
    letter-spacing: -0.5px;
    line-height: 1.3;
}

/* Bilderbücher-Titel im Stil von "Meine Bilderbücher" */
#page5 .page-title {
    margin-bottom: 20px;
    text-align: center;
    background: transparent !important;
    padding: clamp(12px, 1.5vw, 15px) clamp(20px, 2.5vw, 30px);
    border-radius: 25px;
    display: inline-block;
    border: none !important;
    box-shadow: none !important;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    letter-spacing: -0.5px;
    line-height: 1.3;
}

/* Unsere Bilderbücher-Bereich - gleich wie books-grid */
#userBooksGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 40px;
    margin-bottom: 40px;
    margin-left: 0; /* Standard: kein Margin, wird in Media Query für größere Ansichten überschrieben */
    margin-right: 0; /* Standard: kein Margin, wird in Media Query für größere Ansichten überschrieben */
    width: 100%;
    max-width: 1400px;
    justify-items: center;
    padding: 30px 10px;
    min-height: 600px;
    background: transparent !important;
    overflow-y: visible;
}

/* Responsive für Unsere Bilderbücher */
@media (max-width: 1200px) {
    #userBooksGrid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    #userBooksGrid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* Bilderbücher-Titel (war page3, jetzt page5) */
#page5 .page-title {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: clamp(22px, 2.8vw, 32px); /* Gleiche Textgröße wie Neueste Bilder */
    color: #2c3e50;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin: 0 auto; /* Zentriert und kein margin-bottom */
    padding-top: 0;
    background: transparent !important;
    letter-spacing: -0.5px;
    line-height: 1.3;
    padding-right: clamp(20px, 2.5vw, 30px);
    padding-bottom: clamp(12px, 1.5vw, 15px);
    padding-left: clamp(20px, 2.5vw, 30px);
    border-radius: 25px;
    display: block; /* Block für bessere Zentrierung */
    border: none !important;
    box-shadow: none !important;
    letter-spacing: clamp(1px, 0.2vw, 3px);
    width: fit-content;
    text-align: center; /* Text zentriert */
    position: relative; /* Verhindert Bewegung */
    animation: none; /* Keine Animation - Titel bewegt sich nicht */
}

/* Neueste Bilder-Titel auf page5 - gleicher Stil wie neueste-bilder-link */
#page5 .page-title {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: clamp(22px, 2.8vw, 32px); /* Gleicher Stil wie neueste-bilder-link */
    color: #2c3e50;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    text-align: left;
    margin: 0;
    padding: 8px 0; /* Padding oben/unten für bessere Touch-Funktion */
    padding-top: 40px; /* Top padding für Neueste Bilder Text */
    background: transparent;
    letter-spacing: -0.5px;
    line-height: 1.3;
    border-radius: 0;
    border: none;
    box-shadow: none;
    letter-spacing: clamp(0.5px, 0.15vw, 2px);
    line-height: 1.19; /* 15% reduziert (1.4 * 0.85 = 1.19) */
    font-weight: 400;
    position: relative;
    display: block;
    width: fit-content;
}

.books-filters {
    display: flex;
    gap: 10.5px; /* 30% kleiner: 15px * 0.7 = 10.5px */
    margin-bottom: 14px; /* 30% kleiner: 20px * 0.7 = 14px */
    margin-top: 14px; /* 30% kleiner: 20px * 0.7 = 14px */
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    max-width: 70%; /* 30% kleiner: Container-Breite reduziert */
    margin-left: auto;
    margin-right: auto;
}

.my-books-button {
    padding: 8.4px 14px; /* 30% kleiner: 12px * 0.7 = 8.4px, 20px * 0.7 = 14px */
    font-size: 12.6px; /* 30% kleiner: 18px * 0.7 = 12.6px */
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    border: none;
    border-radius: 10.5px; /* 30% kleiner: 15px * 0.7 = 10.5px */
    background: white;
    color: #333;
    outline: none;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 122.5px; /* 30% kleiner: 175px * 0.7 = 122.5px */
    max-width: 196px; /* 30% kleiner: 280px * 0.7 = 196px */
}

.my-books-button:hover {
    background: #f0f0f0;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.my-books-button:active {
    transform: translateY(0);
}

.my-books-button.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.my-books-button.active:hover {
    background: linear-gradient(135deg, #7c8ef0 0%, #8a5fb8 100%);
}

.books-search-input {
    flex: 1;
    min-width: 122.5px; /* 30% kleiner: 175px * 0.7 = 122.5px */
    max-width: 196px; /* 30% kleiner: 280px * 0.7 = 196px */
    padding: 8.4px 14px; /* 30% kleiner: 12px * 0.7 = 8.4px, 20px * 0.7 = 14px */
    font-size: 11px; /* Kleiner gemacht für besseren Platz */
    font-family: 'JetBrains Mono', monospace;
    border: none; /* Rahmen entfernt */
    border-radius: 10.5px; /* 30% kleiner: 15px * 0.7 = 10.5px */
    background: white;
    color: #333;
    outline: none;
    transition: all 0.3s ease;
}

.books-search-input:focus {
    border: none; /* Rahmen entfernt */
    box-shadow: none; /* Schatten entfernt */
}

.books-sort-select {
    padding: 8.4px 14px; /* 30% kleiner: 12px * 0.7 = 8.4px, 20px * 0.7 = 14px */
    font-size: 12.6px; /* 30% kleiner: 18px * 0.7 = 12.6px */
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    border: none; /* Rahmen entfernt */
    border-radius: 10.5px; /* 30% kleiner: 15px * 0.7 = 10.5px */
    background: white;
    color: #333;
    outline: none;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 122.5px; /* 30% kleiner: 175px * 0.7 = 122.5px */
    max-width: 196px; /* 30% kleiner: 280px * 0.7 = 196px */
}

.books-sort-select:hover,
.books-sort-select:focus {
    border: none; /* Rahmen entfernt */
    box-shadow: none; /* Schatten entfernt */
}

@media (max-width: 768px) {
    .books-filters {
        flex-direction: column;
    }
    .books-search-input,
    .books-sort-select,
    .my-books-button {
        width: 100%;
        max-width: 100%;
    }
}

/* Neues Grid für Bilderbücher-Beispiele - identisch mit gallery-grid */
.books-examples-grid {
    display: grid;
    /* 2 Beispiel-Bücher: mittig nebeneinander (Desktop), auf Mobile per Media Query untereinander */
    grid-template-columns: repeat(2, minmax(280px, 420px));
    gap: 15px;
    margin-top: 15px; /* Platz oben für Hover-Effekt */
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 920px !important; /* hält die 2 Cards in der Mitte zusammen */
    box-sizing: border-box;
    overflow-x: visible; /* Sichtbar, damit Hover-Effekt seitlich nicht abgeschnitten wird */
    padding-left: 10px; /* Padding links für Hover-Effekt */
    padding-right: 10px; /* Padding rechts für Hover-Effekt */
    padding-top: 15px; /* Padding oben für Hover-Effekt */
    overflow-y: visible; /* Erlaube vertikales Scrollen */
    background: transparent !important; /* Entferne grauen Hintergrund */
    align-items: start; /* Cards oben ausrichten */
    justify-content: center; /* Grid selbst zentrieren */
    justify-items: center;   /* Cards in Spalten zentrieren */
}

.books-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Gleiche Grid-Struktur wie gallery-grid */
    gap: 15px;
    margin-top: 15px; /* Platz oben für Hover-Effekt */
    margin-left: 0; /* Standard: kein Margin, wird in Media Query für größere Ansichten überschrieben */
    margin-right: 0; /* Standard: kein Margin, wird in Media Query für größere Ansichten überschrieben */
    width: 100%;
    max-width: 100% !important;
    box-sizing: border-box;
    overflow-x: visible; /* Sichtbar, damit Hover-Effekt seitlich nicht abgeschnitten wird */
    padding-left: 10px; /* Padding links für Hover-Effekt */
    padding-right: 10px; /* Padding rechts für Hover-Effekt */
    padding-top: 15px; /* Padding oben für Hover-Effekt */
    overflow-y: visible; /* Erlaube vertikales Scrollen */
    background: transparent !important; /* Entferne grauen Hintergrund */
    align-items: start; /* Cards oben ausrichten */
}

/* Für page4: Gleiche Styles wie gallery-grid */
#page5 .books-grid {
    max-width: 100% !important;
    padding-left: 10px !important; /* Gleiches Padding wie gallery-grid */
    padding-right: 10px !important; /* Gleiches Padding wie gallery-grid */
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.book-card {
    background: white;
    border-radius: 20px;
    overflow: visible; /* Sichtbar, damit Hover-Effekt nicht abgeschnitten wird */
    box-shadow: none !important; /* Entferne grauen Schatten */
    transition: transform 0.3s ease, border 0.3s ease;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    border: 5px solid transparent; /* Gleicher Border wie gallery-item */
    width: 100%; /* Volle Breite im Grid */
    max-width: 100%; /* Keine Überschreitung der Grid-Spalte */
    box-sizing: border-box; /* Border in Breite einberechnen */
    margin-top: 30px; /* Mehr Platz oben für Hover-Effekt - gleicher Wert wie gallery-item */
    margin-bottom: 20px; /* Gleicher Margin wie gallery-item */
    margin-left: 10px; /* Platz links für Hover-Effekt - gleicher Wert wie gallery-item */
    margin-right: 10px; /* Platz rechts für Hover-Effekt - gleicher Wert wie gallery-item */
    padding-top: 15px; /* Padding oben für Hover-Effekt - gleicher Wert wie gallery-item */
    padding-left: 10px; /* Padding links für Hover-Effekt - gleicher Wert wie gallery-item */
    padding-right: 10px; /* Padding rechts für Hover-Effekt - gleicher Wert wie gallery-item */
    min-width: 0; /* Wichtig für Grid: erlaubt Shrinking */
}

/* Beschränke Breite der Book-Cards in breiteren Ansichten */
@media (min-width: 1400px) {
    .book-card {
        max-width: 400px;
    }
    .gallery-item {
        max-width: 400px;
    }
}

@media (min-width: 1800px) {
    .book-card {
        max-width: 450px;
    }
    .gallery-item {
        max-width: 450px;
    }
}

.book-card.selected {
    border: 5px solid #ff0000;
}

.book-card:hover {
    transform: translateY(-15px) scale(1.05);
    box-shadow: none !important;
    border-color: #FFD700;
}

.book-card:active {
    transform: translateY(-10px) scale(1.02);
}

.book-card-creative {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #4facfe 75%, #667eea 100%);
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
    border: 5px solid #FFD700;
    border-radius: 20px;
    box-shadow: 0 15px 50px rgba(102, 126, 234, 0.5), 0 0 30px rgba(255, 215, 0, 0.4);
    position: relative;
    overflow: visible;
    max-width: 400px; /* Beschränkt auf 400px Breite auf allen Ansichten */
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px; /* Mehr Platz oben für Hover-Effekt, damit Bild nicht abgeschnitten wird */
    padding: 15px 10px 20px 10px !important; /* Padding: oben 15px, seitlich 10px, unten 20px - wie bei book-card auf Seite 4 */
}

.book-card-creative::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    background: linear-gradient(45deg, #FFD700, #FF6B9D, #4ecdc4, #FFD700);
    background-size: 300% 300%;
    border-radius: 20px;
    z-index: -1;
    animation: borderGlow 2s ease infinite;
    opacity: 0.7;
}

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

@keyframes borderGlow {
    0%, 100% {
        background-position: 0% 50%;
        opacity: 0.7;
    }
    50% {
        background-position: 100% 50%;
        opacity: 1;
    }
}

.book-card-creative:hover {
    /* Gleiche Hover-Größe wie die anderen Bücher */
    transform: translateY(-15px) scale(1.05);
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    border-color: #FFD700;
    animation: gradientShift 3s ease infinite;
}

.book-card-creative:active {
    /* Gleiches Active-Verhalten wie die anderen Bücher */
    transform: translateY(-10px) scale(1.02);
}

.book-card-creative .book-title {
    color: #ffffff;
    text-shadow: 3px 3px 0px rgba(0,0,0,0.3), 0 0 20px rgba(255, 255, 255, 0.5);
}

.book-card-creative .book-description {
    color: #ffffff;
    text-shadow: 2px 2px 0px rgba(0,0,0,0.3);
}

.book-card-creative .age-badge {
    background: rgba(255, 255, 255, 0.9);
    color: #667eea;
    font-weight: 800;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.book-card-creative .play-button {
    background: linear-gradient(135deg, #FFD700 0%, #FF6B9D 100%);
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.6);
    animation: buttonPulse 2s ease infinite;
}

@keyframes buttonPulse {
    0%, 100% {
        box-shadow: 0 8px 25px rgba(255, 215, 0, 0.6);
    }
    50% {
        box-shadow: 0 8px 35px rgba(255, 215, 0, 0.9);
    }
}

.book-card-creative .play-button:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 40px rgba(255, 215, 0, 0.8);
}

.book-cover {
    width: 100%;
    height: 350px;
    object-fit: cover;
    display: block;
    background: white;
    overflow: hidden;
    position: relative;
    border-radius: 20px 20px 0 0;
    margin-top: 0;
}

.book-cover video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
    border-radius: 20px 20px 0 0;
}

.book-content {
    padding: 16px 16px 22px 16px; /* mehr Abstand zu Texten */
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.book-title {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 36px;
    color: #2c3e50;
    margin-bottom: 8px;
    margin-top: 0;
    letter-spacing: -0.5px;
    line-height: 1.3;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.book-description {
    font-size: 20px;
    line-height: 1.5;
    color: #2c3e50;
    margin-bottom: 14px;
    margin-top: 6px; /* mehr Abstand nach oben */
}

.play-button {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 50px;
    font-size: 28px;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    cursor: pointer;
    width: fit-content;
    margin: 0 auto;
    margin-top: auto;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    text-transform: none;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.play-button:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 30px rgba(0,0,0,0.3);
}

.play-button:active {
    transform: scale(0.95);
}

.sparkle {
    position: absolute;
    width: 20px;
    height: 20px;
    background: yellow;
    border-radius: 50%;
    animation: sparkle 1s ease-in-out infinite;
    pointer-events: none;
}

@keyframes sparkle {
    0%, 100% { opacity: 0; transform: scale(0); }
    50% { opacity: 1; transform: scale(1); }
}

.footer {
    text-align: center;
    padding: 40px 20px;
    margin-top: 60px;
    color: white;
    font-size: 20px;
    text-shadow: 2px 2px 0px rgba(0,0,0,0.3);
}

.age-badge {
    display: inline-block;
    background: linear-gradient(135deg, #f093fb 0%, #4facfe 100%);
    color: white;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 16px;
    font-weight: 700;
    margin-top: auto;
    margin-bottom: 6px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: fit-content;
}

.name-input-section {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    border-radius: 20px;
    padding: 16px 24px;
    width: fit-content;
    min-width: 220px;
    margin: 0 auto;
    max-width: 360px;
    box-shadow: 0 10px 40px rgba(102, 126, 234, 0.3), 0 0 20px rgba(255, 107, 157, 0.2);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    border: 3px solid #FFD700;
    animation: inputPulse 2s ease-in-out infinite;
    backdrop-filter: blur(10px);
}

/* Größeres top margin für name-input-section auf page1 */
#page1 .name-input-section {
    margin-top: 0; /* Kein Abstand, da Button direkt darüber ist */
}

@keyframes inputPulse {
    0%, 100% {
        box-shadow: 0 10px 40px rgba(102, 126, 234, 0.3), 0 0 20px rgba(255, 107, 157, 0.2);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 15px 50px rgba(102, 126, 234, 0.5), 0 0 30px rgba(255, 107, 157, 0.4);
        transform: scale(1.02);
    }
}

.name-input-section:hover {
    animation: none;
    transform: scale(1.03);
    box-shadow: 0 15px 50px rgba(102, 126, 234, 0.5), 0 0 30px rgba(255, 107, 157, 0.4);
}

/* Button "Weitere 12 Bilder laden" */
.load-more-images-btn {
    grid-column: 1 / -1; /* Spannt über alle Spalten */
    width: 100%;
    max-width: 400px;
    margin: 30px auto;
    padding: 15px 30px;
    font-size: 18px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    display: block;
}

.load-more-images-btn:hover:not(:disabled) {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

.load-more-images-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Dezentes "+" zum Nachladen der Community-Galerie */
.gallery-load-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin: 18px auto 0 auto;
    border-radius: 50%;
    border: 2px solid rgba(102, 126, 234, 0.35);
    background: rgba(255, 255, 255, 0.75);
    color: #667eea;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.gallery-load-more-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.16);
    border-color: rgba(102, 126, 234, 0.55);
}

.gallery-load-more-btn:active {
    transform: translateY(0);
}

.gallery-load-more-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

/* Wrapper im Grid, damit "+" direkt nach letztem Bild sitzt */
.gallery-load-more-wrap {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 0 18px 0;
}

body.dark-mode .gallery-load-more-btn,
html.dark-mode .gallery-load-more-btn {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.28);
    color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 14px rgba(0,0,0,0.28);
}

.user-gallery {
    margin-top: 20px; /* Reduziert, damit erste Card nicht abgeschnitten wird */
    background: transparent !important; /* Entferne grauen Hintergrund */
    padding-top: 0; /* Kein zusätzliches Padding oben */
    padding-left: 0 !important; /* Kein seitliches Padding */
    padding-right: 0 !important; /* Kein seitliches Padding */
    margin-left: 0 !important; /* Kein seitliches Margin */
    margin-right: 0 !important; /* Kein seitliches Margin */
    box-shadow: none !important; /* Entferne grauen Schatten */
    border: none !important; /* Entferne Rahmen */
    width: 100%; /* Volle Breite */
    max-width: 100%; /* Maximale Breite */
    box-sizing: border-box; /* Padding in Breite einberechnen */
    overflow-x: hidden; /* Verhindere horizontales Scrollen */
}

#page5 .user-gallery, #page6 .user-gallery {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

#page4 .container {
    background: transparent !important;
    padding-left: 0 !important; /* Kein seitliches Padding */
    padding-right: 0 !important; /* Kein seitliches Padding */
    max-width: 100% !important; /* Volle Breite bis zum Rand */
    margin-left: 0 !important; /* Kein seitliches Margin */
    margin-right: 0 !important; /* Kein seitliches Margin */
}

#page5 .container, #page6 .container {
    background: transparent !important;
    padding-left: 0 !important; /* Kein seitliches Padding */
    padding-right: 0 !important; /* Kein seitliches Padding */
    max-width: 100% !important; /* Volle Breite bis zum Rand */
    margin-left: 0 !important; /* Kein seitliches Margin */
    margin-right: 0 !important; /* Kein seitliches Margin */
    width: 100% !important; /* Volle Breite */
    box-sizing: border-box; /* Padding in Breite einberechnen */
    overflow-x: hidden; /* Verhindere horizontales Scrollen */
}

#page5, #page6 {
    background: transparent !important;
    padding-left: 0 !important; /* Kein seitliches Padding */
    padding-right: 0 !important; /* Kein seitliches Padding */
    padding: 40px 0 !important; /* Nur oben/unten, kein seitliches Padding */
}

.gallery-title {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 42px;
    color: #2c3e50;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 30px;
    text-align: center;
    letter-spacing: -0.5px;
    line-height: 1.3;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important; /* So viele Spalten wie möglich, min 300px (250px + 20%) */
    gap: 15px;
    margin-top: 15px; /* Platz oben für Hover-Effekt */
    margin-left: 0; /* Standard: kein Margin, wird in Media Query für größere Ansichten überschrieben */
    margin-right: 0; /* Standard: kein Margin, wird in Media Query für größere Ansichten überschrieben */
    width: 100%;
    max-width: 100% !important;
    box-sizing: border-box;
    overflow-x: hidden; /* Verhindere horizontales Scrollen */
    padding-left: 10px; /* Padding links für Hover-Effekt */
    padding-right: 10px; /* Padding rechts für Hover-Effekt */
    padding-top: 15px; /* Padding oben für Hover-Effekt */
    overflow-y: visible; /* Erlaube vertikales Scrollen */
    background: transparent !important; /* Entferne grauen Hintergrund */
    align-items: start; /* Cards oben ausrichten */
    justify-items: center; /* Zentriere Grid-Items */
}

/* Für sehr große Bildschirme: so viele Spalten wie möglich */
@media (min-width: 1400px) {
    .books-examples-grid {
        grid-template-columns: repeat(2, minmax(280px, 420px));
        max-width: 920px !important;
    }
    .books-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Dynamische Anpassung */
    }
    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important; /* So viele Spalten wie möglich, min 300px (250px + 20%) */
    }
}

/* Für mittlere große Bildschirme: so viele Spalten wie möglich */
@media (max-width: 1399px) and (min-width: 1025px) {
    .books-examples-grid {
        grid-template-columns: repeat(2, minmax(280px, 420px));
        max-width: 920px !important;
    }
    .books-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Dynamische Anpassung */
    }
    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important; /* So viele Spalten wie möglich, min 300px (250px + 20%) */
    }
}

/* Begrenze das Startvideo auf die Größe eines Galerie-Items */
.hero-video-grid {
    grid-template-columns: 1fr;
    max-width: 600px; /* Größere Standard-Größe */
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-video-grid .gallery-item {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-video-grid video {
    width: 100%;
    height: auto;
    min-width: 300px; /* Mindestbreite für kleine Bildschirme */
    display: block;
    margin: 0 auto;
}

@media (max-width: 1024px) and (min-width: 465px) {
    .books-examples-grid {
        grid-template-columns: repeat(2, minmax(240px, 1fr));
        max-width: 920px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        justify-content: center;
        justify-items: center;
    }
    .books-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 100% !important; /* Gleiche max-width wie gallery-grid */
        margin-left: 0 !important; /* Gleicher Margin wie gallery-grid */
        margin-right: 0 !important; /* Gleicher Margin wie gallery-grid */
        width: 100% !important;
        padding-left: 10px !important; /* Gleiches Padding wie gallery-grid */
        padding-right: 10px !important; /* Gleiches Padding wie gallery-grid */
    }
    .gallery-grid {
        grid-template-columns: repeat(auto-fit, minmax(336px, 1fr)) !important; /* Dynamische Anpassung, min 336px (280px + 20%) */
        max-width: 100% !important; /* Volle Breite */
        margin-left: 0 !important; /* Standard: kein Margin */
        margin-right: 0 !important; /* Standard: kein Margin */
        width: 100% !important;
        padding-left: 10px !important; /* Padding für Hover-Effekt */
        padding-right: 10px !important; /* Padding für Hover-Effekt */
    }
    #userBooksGrid {
        max-width: 1200px; /* Begrenzte Breite für Tablet */
        margin-left: 20px !important;
        margin-right: 20px !important;
        width: calc(100% - 40px) !important;
    }
}

@media (max-width: 464px) {
    .books-examples-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        max-width: 100%; /* Volle Breite auf Mobile */
        padding: 0; /* Kein Padding */
        margin-left: 0 !important; /* Explizit kein seitliches Margin */
        margin-right: 0 !important; /* Explizit kein seitliches Margin */
        width: 100% !important; /* Volle Breite */
    }
    .books-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        max-width: 100%; /* Volle Breite auf Mobile */
        padding: 20px 0; /* Kein seitliches Padding */
        margin-left: 0 !important; /* Explizit kein seitliches Margin */
        margin-right: 0 !important; /* Explizit kein seitliches Margin */
        width: 100% !important; /* Volle Breite */
    }
    #page4 .books-grid {
        padding-left: 0 !important; /* Kein seitliches Padding */
        padding-right: 0 !important; /* Kein seitliches Padding */
        margin-left: 0 !important; /* Explizit kein seitliches Margin */
        margin-right: 0 !important; /* Explizit kein seitliches Margin */
        max-width: 100% !important; /* Volle Breite bis zum Rand */
        width: 100% !important; /* Volle Breite */
    }
    .gallery-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        max-width: 100%; /* Volle Breite auf Mobile */
        padding-left: 10px !important; /* Seitliches Padding für Zentrierung */
        padding-right: 10px !important; /* Seitliches Padding für Zentrierung */
        margin-left: 0 !important; /* Explizit kein seitliches Margin */
        margin-right: 0 !important; /* Explizit kein seitliches Margin */
        width: 100% !important; /* Volle Breite */
        box-sizing: border-box; /* Padding in Breite einberechnen */
        justify-items: center !important; /* Zentriere Grid-Items */
        place-items: center !important; /* Zentriere sowohl horizontal als auch vertikal */
    }
    .gallery-item {
        margin-left: auto !important; /* Zentriere Item */
        margin-right: auto !important; /* Zentriere Item */
        padding-left: 0 !important; /* Explizit kein seitliches Padding */
        padding-right: 0 !important; /* Explizit kein seitliches Padding */
        max-width: calc(100% - 20px) !important; /* Volle Breite minus Padding */
        width: auto !important; /* Auto-Breite für Zentrierung */
        min-width: 0 !important; /* Erlaube Shrinking */
        box-sizing: border-box; /* Border/Padding in Breite einberechnen */
    }
    .books-examples-grid .book-card {
        margin-left: 0 !important; /* Explizit kein seitliches Margin */
        margin-right: 0 !important; /* Explizit kein seitliches Margin */
        padding-left: 0 !important; /* Explizit kein seitliches Padding */
        padding-right: 0 !important; /* Explizit kein seitliches Padding */
    }
    #userBooksGrid {
        margin-left: 0 !important; /* Explizit kein seitliches Margin */
        margin-right: 0 !important; /* Explizit kein seitliches Margin */
        width: 100% !important; /* Volle Breite */
    }
}

@media (min-width: 465px) {
    .books-grid {
        margin-left: 0 !important; /* Gleicher Margin wie gallery-grid */
        margin-right: 0 !important; /* Gleicher Margin wie gallery-grid */
        width: 100% !important;
        padding-left: 10px !important; /* Gleiches Padding wie gallery-grid */
        padding-right: 10px !important; /* Gleiches Padding wie gallery-grid */
    }
    #page4 .books-grid {
        margin-left: 0 !important; /* Gleicher Margin wie gallery-grid */
        margin-right: 0 !important; /* Gleicher Margin wie gallery-grid */
        padding-left: 10px !important; /* Gleiches Padding wie gallery-grid */
        padding-right: 10px !important; /* Gleiches Padding wie gallery-grid */
        width: 100% !important;
    }
    .gallery-grid {
        margin-left: 0 !important; /* Standard: kein Margin */
        margin-right: 0 !important; /* Standard: kein Margin */
        padding-left: 10px !important; /* Padding für Hover-Effekt */
        padding-right: 10px !important; /* Padding für Hover-Effekt */
        width: 100% !important;
        max-width: 100% !important;
        justify-items: center !important; /* Zentriere Grid-Items */
        place-items: center !important; /* Zentriere sowohl horizontal als auch vertikal */
    }
    .gallery-item {
        margin-left: auto !important; /* Zentriere Item */
        margin-right: auto !important; /* Zentriere Item */
        width: auto !important; /* Auto-Breite für Zentrierung */
        max-width: 100% !important; /* Maximale Breite */
    }
    .book-card {
        margin: 0 !important; /* Keine Margins - Grid-Gap übernimmt */
        padding: 15px 10px 20px 10px !important; /* Padding: oben 15px, seitlich 10px, unten 20px */
    }
    .book-card-creative {
        padding: 15px 10px 20px 10px !important; /* Padding: oben 15px, seitlich 10px, unten 20px - wie bei book-card */
    }
    #userBooksGrid {
        margin-left: 20px !important;
        margin-right: 20px !important;
        width: calc(100% - 40px) !important;
    }
}

@media (max-width: 768px) and (min-width: 465px) {
    .books-examples-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        justify-items: center !important; /* Zentriere Grid-Items */
    }
    .books-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        justify-items: center !important; /* Zentriere Grid-Items */
    }
    .gallery-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        justify-items: center !important; /* Zentriere Grid-Items */
        place-items: center !important; /* Zentriere sowohl horizontal als auch vertikal */
    }
    .gallery-item {
        margin-left: auto !important; /* Zentriere Item */
        margin-right: auto !important; /* Zentriere Item */
        justify-self: center !important; /* Zentriere Item im Grid */
        width: auto !important; /* Auto-Breite für Zentrierung */
        max-width: 100% !important; /* Maximale Breite */
    }
    #userBooksGrid {
        max-width: 100%; /* Volle Breite auf Mobile, aber durch padding begrenzt */
        padding: 20px 15px;
    }
    .hero-video-grid {
        max-width: 500px; /* Größer auf Tablets */
    }
}

@media (max-width: 480px) {
    .hero-video-grid {
        max-width: 90%; /* Fast volle Breite auf kleinen Bildschirmen */
        min-width: 280px; /* Mindestbreite */
    }
    .hero-video-grid video {
        min-width: 100%;
    }
}

@media (min-width: 1025px) {
    .hero-video-grid {
        max-width: 700px; /* Größer auf großen Bildschirmen */
    }
}

.gallery-item {
    background: rgba(255, 255, 255, 0.5); /* 50% transparent */
    border-radius: 20px;
    overflow: visible; /* Sichtbar, damit Hover-Effekt nicht abgeschnitten wird - Vorlesetext-Container ist innerhalb scrollbar */
    box-shadow: none !important; /* Entferne grauen Schatten */
    transition: transform 0.3s ease, border 0.3s ease;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    border: 5px solid transparent; /* Gleicher Border wie book-card */
    width: 100%; /* Volle Breite im Grid */
    max-width: 400px; /* Maximale Breite für alle Gallery-Items */
    box-sizing: border-box; /* Border in Breite einberechnen */
    aspect-ratio: 1 / 1.6; /* Fixes Seitenverhältnis: Breite zu Höhe = 1:1.6 */
    height: auto; /* Höhe wird durch aspect-ratio bestimmt */
    min-height: 0; /* Erlaube keine Mindesthöhe, die das Aspect Ratio überschreibt */
    max-height: none; /* Keine maximale Höhe, die das Aspect Ratio überschreibt */
    margin-top: 30px; /* Mehr Platz oben für Hover-Effekt */
    margin-bottom: 20px; /* Gleicher Margin wie book-card */
    margin-left: auto; /* Zentriere Item */
    margin-right: auto; /* Zentriere Item */
    justify-self: center; /* Zentriere Item im Grid */
    padding: 3.75px 3.75px 0 3.75px; /* Einheitliches Padding - nochmal 50% reduziert: 7.5px → 3.75px */
}

.gallery-item.selected {
    border: 5px solid #ff0000;
}

.gallery-item-fullscreen-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.gallery-item-fullscreen-btn:hover {
    background: rgba(0, 0, 0, 0.9);
    transform: scale(1.1);
}

.gallery-item-fullscreen-btn:active {
    transform: scale(0.95);
}

/* Vollbild-Modal */
.fullscreen-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
    padding: 0 !important; /* Kein Padding zum Rand */
    margin: 0 !important; /* Kein Margin zum Rand */
}

        /* @keyframes fadeIn bereits oben definiert */
        
        .fullscreen-modal-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important; /* Kein Padding zum Rand */
    margin: 0 !important; /* Kein Margin zum Rand */
}

.fullscreen-modal-content img {
    max-width: 100vw;
    max-height: 100vh;
    width: 100vw;
    height: 100vh;
    object-fit: contain;
    border-radius: 0; /* Kein Border-Radius für volle Breite */
    box-shadow: none; /* Kein Schatten für volle Breite */
    transform-origin: center center;
    transition: transform 0.3s ease;
    margin: 0 !important; /* Kein Margin */
    padding: 0 !important; /* Kein Padding */
}

.fullscreen-close {
    position: absolute;
    top: 30px;
    right: 30px;
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    border: none;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    font-size: 32px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10001;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.fullscreen-close:hover {
    background: white;
    transform: scale(1.1) rotate(90deg);
}

.fullscreen-close:active {
    transform: scale(0.95) rotate(90deg);
}

.gallery-item:hover {
    transform: translateY(-15px) scale(1.05);
    box-shadow: none !important; /* Entferne Schatten auch beim Hover */
    border-color: #FFD700; /* Gleiche Hover-Farbe wie book-card */
}

.gallery-item:active {
    transform: translateY(-10px) scale(1.02);
}

.gallery-item-image-container {
    position: relative;
    width: 100%;
    height: auto; /* Höhe wird durch JavaScript bestimmt */
    flex: 0 0 auto; /* Feste Höhe, wird durch JavaScript gesetzt */
    overflow: hidden !important; /* WICHTIG: Verhindere, dass Bilder über Container hinausragen */
    border-radius: 20px 20px 0 0;
    min-height: 200px; /* Mindesthöhe für Sichtbarkeit - wird durch JavaScript überschrieben */
    max-height: 70vh; /* Fallback: Maximal 70% der Viewport-Höhe */
}

.gallery-item img {
    width: 100%;
    max-width: 100% !important; /* Verhindere Überschreitung */
    height: 100%;
    max-height: 100% !important; /* Verhindere Überschreitung */
    object-fit: cover;
    object-position: center; /* Zentriere Bild */
    display: block;
    background: transparent;
    border-radius: 20px 20px 0 0;
}

.gallery-item-timestamp {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%); /* Zentriert horizontal */
    background: rgba(0, 0, 0, 0.5);
    color: rgba(255, 255, 255, 0.85);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    letter-spacing: 0.3px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    pointer-events: none; /* Verhindert, dass der Zeitstempel Klicks blockiert */
    z-index: 10;
    line-height: 1.2;
    white-space: nowrap; /* Verhindert Zeilenumbruch */
}

.gallery-item-info {
    padding: 10px 0; /* Reduziertes Padding: 20px -> 10px */
    text-align: left; /* Linksbündig für Name und Titel */
    display: flex;
    flex-direction: column; /* Vertikale Anordnung: Titel oben, Username darunter */
    align-items: flex-start;
    justify-content: flex-start; /* Geändert: flex-start statt center */
    gap: 0; /* Kein Gap zwischen Elementen */
    flex: 1; /* Nimmt verfügbaren Platz ein */
    min-height: 0; /* Wichtig für Scrollbarkeit */
    overflow-y: auto; /* Scrollbar machen */
    overflow-x: hidden; /* Kein horizontales Scrollen */
    position: relative; /* Für relative Positionierung */
    /* Verstecke Scrollbars aber behalte Scrollbarkeit */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE und Edge */
}

/* Verstecke Scrollbars für Webkit-Browser (Chrome, Safari, Edge) */
.gallery-item-info::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
}

/* Allgemeine Regel: Verstecke Scrollbars für alle Scroll-Container innerhalb von Gallery-Items */
.gallery-item * {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE und Edge */
}

.gallery-item *::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
}

/* Reihenfolge: Titel oben, Username darunter - verwende order */
.gallery-item-info > .gallery-title-text {
    order: 1; /* Titel kommt zuerst */
    margin-bottom: 2px !important; /* Reduziert: 4px -> 2px */
    margin-left: 0;
}

/* Datum und Vorlesetext danach */
.gallery-item-info > .gallery-item-date {
    order: 3;
    margin-bottom: 5px !important;
}

.gallery-item-info > .vorlese-text {
    order: 4;
    flex-shrink: 0; /* Verhindert, dass der Text schrumpft */
    width: 100%; /* Volle Breite */
}

/* Container für gallery-item-name (für Freundesfarbe) */
.gallery-item-name-container {
    width: 100%; /* So breit wie das Item */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px 6px; /* Reduziert: 4px 8px -> 3px 6px */
    border-radius: 8px;
    box-sizing: border-box;
    min-height: auto; /* Nur so hoch wie der Text */
    height: auto;
}

/* Stelle sicher, dass Hintergrund bei Freund-Items NICHT überschrieben wird */
.gallery-item-name-container.friend-item {
    background: var(--friend-bg-color) !important;
}

.gallery-item-name {
    margin-bottom: 0 !important; /* Kein Margin mehr, da Container übernimmt */
    margin-right: 0 !important;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px; /* Reduziert: 14px -> 12px */
    text-shadow: 2px 2px 0px rgba(255,255,255,0.8), 1px 1px 4px rgba(0,0,0,0.3);
    font-weight: 700;
    letter-spacing: 0.5px; /* Reduziert: 1px -> 0.5px */
    display: block; /* Eigene Zeile */
    text-align: center; /* Zentriert */
    width: 100%; /* Volle Breite für Zentrierung */
}

/* Wenn gallery-item-name-container einen Hintergrund hat (Freund), passe Text-Schatten an */
.gallery-item-name-container[style*="background"] .gallery-item-name {
    color: white !important; /* Weißer Text auf farbigem Hintergrund */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5) !important; /* Stärkerer Schatten für bessere Lesbarkeit */
}

.gallery-item-date {
    margin-bottom: 5px !important;
}

.gallery-title-text {
    margin: 0;
    padding: 0;
    background: transparent;
    font-size: 13px; /* Reduziert: 15.68px -> 13px */
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    line-height: 1.2;
    text-align: center; /* Zentriert */
    color: #667eea;
    height: auto;
    min-height: auto;
    display: block; /* Eigene Zeile */
    width: 100%; /* Volle Breite für Zentrierung */
}

.gallery-title-text:empty {
    display: none;
}

.vorlese-text {
    margin: 0;
    padding: 15px;
    background: transparent;
    border-left: 4px solid #9b59b6;
    border-radius: 5px;
    font-size: 16px;
    line-height: 1.6;
    text-align: left;
    flex-shrink: 0; /* Verhindert, dass der Text schrumpft */
    width: 100%; /* Volle Breite */
    color: #2c3e50;
    /* Verstecke Scrollbars falls vorhanden, behalte Scrollbarkeit */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE und Edge */
}

/* Verstecke Scrollbars für Webkit-Browser bei vorlese-text */
.vorlese-text::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
}

.gallery-title-text {
    margin: 0;
    padding: 0;
    background: transparent;
    font-size: 13px; /* Reduziert: 15.68px -> 13px */
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    line-height: 1.2;
    text-align: center; /* Zentriert */
    color: #667eea;
    height: auto;
    min-height: auto;
    display: block; /* Eigene Zeile */
    width: 100%; /* Volle Breite für Zentrierung */
    /* Verstecke Scrollbars falls vorhanden, behalte Scrollbarkeit */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE und Edge */
}

/* Verstecke Scrollbars für Webkit-Browser bei gallery-title-text */
.gallery-title-text::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
}


.gallery-empty {
    text-align: center;
    padding: 40px;
    color: #666;
    font-size: 18px;
}

.gallery-empty-icon {
    font-size: 60px;
    margin-bottom: 15px;
}

.name-input-title {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 22px;
    color: #667eea;
    margin: 0;
    padding: 0;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    letter-spacing: -0.3px;
    line-height: 1.3;
    animation: none;
}

@keyframes titleBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

.name-input-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: center;
}

.name-input {
    flex: 1;
    min-width: 140px;
    max-width: 220px;
    padding: 10px 18px;
    margin: 0;
    border: 2px solid #667eea;
    border-radius: 24px;
    font-size: 18px;
    font-family: 'JetBrains Mono', monospace;
    text-align: center;
    font-weight: 600;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.95);
    color: #667eea;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.2);
    /* Erlaube Textauswahl in Input-Feldern */
    -webkit-user-select: text;
    user-select: text;
}

.name-input:focus {
    outline: none;
    border-color: #FF6B9D;
    background: rgba(255, 255, 255, 1);
    color: #FF6B9D;
    box-shadow: 0 8px 25px rgba(255, 107, 157, 0.4);
    transform: scale(1.03);
}

.name-input::placeholder {
    color: rgba(102, 126, 234, 0.5);
    font-weight: 400;
}

.name-submit-button {
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
    color: white;
    border: none;
    padding: 10px 18px;
    margin: 0;
    width: fit-content;
    min-width: 48px;
    box-sizing: border-box;
    border-radius: 24px;
    font-size: 20px;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(76, 175, 80, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: buttonGlow 2s ease-in-out infinite;
    letter-spacing: 0.3px;
}

@keyframes buttonGlow {
    0%, 100% {
        box-shadow: 0 8px 20px rgba(76, 175, 80, 0.4);
    }
    50% {
        box-shadow: 0 8px 30px rgba(76, 175, 80, 0.7);
    }
}

.name-submit-button:hover {
    background: linear-gradient(135deg, #45a049 0%, #4CAF50 100%);
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(76, 175, 80, 0.6);
    animation: buttonGlow 2s ease-in-out infinite;
}

.name-submit-button:active {
    transform: scale(0.9) rotate(-20deg);
    animation: none;
    transition: transform 0.1s ease;
}

/* Dark Mode: Name-Input-Fenster („Wie heißt du?“) – passend zum Anmelden-Fenster */
@keyframes inputPulseDark {
    0%, 100% {
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(102, 126, 234, 0.15);
    }
    50% {
        box-shadow: 0 15px 50px rgba(0, 0, 0, 0.55), 0 0 30px rgba(102, 126, 234, 0.25);
    }
}
body.dark-mode .name-input-section,
html.dark-mode .name-input-section {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(102, 126, 234, 0.15) !important;
    animation: inputPulseDark 2s ease-in-out infinite;
}
body.dark-mode .name-input-section:hover,
html.dark-mode .name-input-section:hover {
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.55), 0 0 30px rgba(102, 126, 234, 0.25) !important;
    animation: none;
}

body.dark-mode .name-input-title,
html.dark-mode .name-input-title {
    color: #667eea !important;
    text-shadow: none;
}

body.dark-mode .name-input,
html.dark-mode .name-input {
    background: #2a2a2a !important;
    border-color: #444444 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}
body.dark-mode .name-input::placeholder,
html.dark-mode .name-input::placeholder {
    color: #888888 !important;
}
body.dark-mode .name-input:focus,
html.dark-mode .name-input:focus {
    border-color: #667eea !important;
    background: #333333 !important;
    color: #667eea !important;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.35) !important;
}

body.dark-mode .name-submit-button,
html.dark-mode .name-submit-button {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4) !important;
}
body.dark-mode .name-submit-button:hover,
html.dark-mode .name-submit-button:hover {
    background: linear-gradient(135deg, #7a8ef4 0%, #8b5fba 100%) !important;
    box-shadow: 0 12px 35px rgba(102, 126, 234, 0.5) !important;
}

.greeting {
    /* Zwischen Top-Header und Video-Container, außerhalb des Video-Containers */
    padding: 6px 0;
    border-radius: 0;
    font-size: clamp(16px, 1.8vw, 20px);
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    display: inline-block;
    margin: 0;
    width: fit-content;
    letter-spacing: 0.2px;
    line-height: 1.4;
    min-width: fit-content;
    max-width: calc(100% - 14px);
    white-space: nowrap;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    position: absolute;
    top: calc(35px + 12.5vh); /* Halber Weg zwischen Header (70px) und Video-Container-Oberkante (~25vh) */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    animation: none;
    letter-spacing: 0.2px;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hellmodus: nur Text, ohne Kapsel-Hintergrund */
html:not(.dark-mode) .greeting,
body:not(.dark-mode) .greeting {
    background: transparent !important;
    color: #1a1a2e !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
html:not(.dark-mode) .greeting:hover,
body:not(.dark-mode) .greeting:hover {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.name-error-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: white;
    padding: 30px 50px;
    border-radius: 50px;
    font-size: 28px;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    text-align: center;
    max-width: 600px;
    box-shadow: 0 10px 40px rgba(231, 76, 60, 0.6);
    animation: shake 0.5s ease-in-out;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    letter-spacing: 0.3px;
    z-index: 10000;
    display: none;
    line-height: 1.4;
}

.name-error-message.show {
    display: block;
}

@keyframes shake {
    0%, 100% { transform: translate(-50%, -50%) translateX(0); }
    25% { transform: translate(-50%, -50%) translateX(-10px); }
    75% { transform: translate(-50%, -50%) translateX(10px); }
}

.greeting:hover {
    transform: translateX(-50%) translateY(-1px) scale(1.01);
}

/* Dark Mode: nur Text auf Seitenhintergrund */
body.dark-mode .greeting,
html.dark-mode .greeting {
    background: transparent !important;
    color: #f0f0f0 !important;
    border: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
}
body.dark-mode .greeting:hover,
html.dark-mode .greeting:hover {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

@media (max-width: 480px) {
    body.dark-mode .greeting,
    html.dark-mode .greeting {
        border: none !important;
        box-shadow: none !important;
    }
}

.greeting:active {
    transform: translateX(-50%) scale(0.98);
}

.waving-hand {
    display: inline-block;
    animation: wave 1s ease-in-out infinite;
    transform-origin: 70% 70%;
}

@keyframes wave {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(20deg);
    }
    75% {
        transform: rotate(-20deg);
    }
}

@media (max-width: 1024px) {
    .container {
        max-width: 100%;
    }
    .books-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    /* .gallery-grid wird bereits oben bei Zeile 1568 definiert - Doppeldefinition entfernt */
}

@media (max-width: 464px) {
    .page-section {
        padding: 10px;
        /* Abstand zwischen den Haupt-Containern auf Mobile */
        margin-bottom: 50px;
        overflow-y: visible !important; /* Erlaube vertikales Overflow für Hover-Effekte */
    }
    #page4 {
        padding-left: 0 !important; /* Kein seitliches Padding */
        padding-right: 0 !important; /* Kein seitliches Padding */
        padding-top: 100px !important; /* Nur oben */
        padding-bottom: 40px !important; /* Nur unten */
        overflow-y: visible !important; /* Erlaube vertikales Overflow für Hover-Effekte */
    }
    #page4 .container {
        padding-left: 0 !important; /* Kein seitliches Padding */
        padding-right: 0 !important; /* Kein seitliches Padding */
        overflow-y: visible !important; /* Erlaube vertikales Overflow für Hover-Effekte */
    }
    #page4 .books-grid {
        padding-left: 0 !important; /* Kein seitliches Padding */
        padding-right: 0 !important; /* Kein seitliches Padding */
        margin-left: 0 !important; /* Kein seitliches Margin */
        margin-right: 0 !important; /* Kein seitliches Margin */
        max-width: 100% !important; /* Volle Breite bis zum Rand */
    }
}

@media (min-width: 465px) {
    #page4 .books-grid {
        margin-left: 20px !important;
        margin-right: 20px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

@media (max-width: 768px) and (min-width: 465px) {
    .page-section {
        padding: 10px;
        margin-bottom: 50px;
        overflow-y: visible !important; /* Erlaube vertikales Overflow für Hover-Effekte */
    }
    #page4 {
        padding-top: 100px !important;
        padding-bottom: 40px !important;
        overflow-y: visible !important; /* Erlaube vertikales Overflow für Hover-Effekte */
    }
}
    #page5 {
        padding-left: 0 !important; /* Kein seitliches Padding */
        padding-right: 0 !important; /* Kein seitliches Padding */
        padding-top: 40px !important; /* Nur oben */
        padding-bottom: 40px !important; /* Nur unten */
    }
    #page5 .container {
        padding-left: 0 !important; /* Kein seitliches Padding */
        padding-right: 0 !important; /* Kein seitliches Padding */
    }
    #page1 {
        padding-top: 0;
    }
    #page1 .main-title {
        margin-top: 0; /* Reset margin-top, da Container verschoben wird */
    }
    .kiki-container {
        justify-content: center;
        margin: 0 auto;
        padding-top: 70px; /* Mehr Platz oben für Glow-Effekt auf mobilen Geräten */
        padding-bottom: 70px; /* Mehr Platz unten für Glow-Effekt */
        min-height: 270px; /* Bildhöhe (130px) + Padding oben (70px) + Padding unten (70px) */
        overflow: visible;
    }
    .kiki-image {
        width: 130px;
        height: 130px;
    }
    .kiki-text {
        font-size: 26px;
        margin-left: 143px;
        margin-top: 85px; /* 35px + 50px zusätzlich für mobile Ansichten */
    }
    .main-title {
        font-size: clamp(40px, 5vw, 60px); /* Responsive: 40px-60px */
        margin-bottom: 10px;
        margin-top: 50px;
        margin-left: auto;
        margin-right: auto;
        padding-top: 0;
        text-align: center;
        display: block;
        width: 100%;
        font-family: 'JetBrains Mono', monospace;
        font-weight: 700;
        color: #2c3e50;
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
        letter-spacing: -0.5px;
        line-height: 1.3;
        animation: none;
    }
    .subtitle {
        font-size: clamp(24px, 3vw, 32px); /* Responsive: 24px-32px */
        padding: clamp(12px, 1.5vw, 15px) clamp(20px, 2.5vw, 25px);
        letter-spacing: -0.5px;
        text-align: center;
        display: block;
        width: fit-content;
        margin: 0 auto;
        font-family: 'JetBrains Mono', monospace;
        font-weight: 700;
        color: #2c3e50;
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
        line-height: 1.3;
    }
    
    /* Professionellere Schriften für page3 in Tablet-Ansichten */
    #page3 .subtitle {
        font-size: clamp(22px, 2.8vw, 30px);
        letter-spacing: -0.3px;
    }
    
    #page3 .name-input-title {
        font-size: clamp(18px, 2.3vw, 24px);
    }
    
    #page3 .neueste-bilder-link {
        font-size: clamp(19px, 2.4vw, 27px);
    }
    .page-nav-links {
        gap: 12px;
    }
    .page-nav-link {
        font-size: 18px;
        padding: 12px 24px;
    }
    .page-title {
        font-size: clamp(28px, 4vw, 36px); /* Responsive: 28px-36px */
    }
    #page4 .page-title {
        font-size: clamp(22px, 2.8vw, 28px); /* Responsive: 22px-28px */
        padding: clamp(10px, 1.2vw, 12px) clamp(16px, 2vw, 20px);
        letter-spacing: clamp(1px, 0.15vw, 2px);
    }
    /* Scroll-Indikator-Styles werden von menueband.js bereitgestellt */
}

@media (max-width: 480px) {
    .kiki-container {
        justify-content: center;
        align-items: center;
        margin: 10px auto;
        flex-wrap: nowrap;
    }
    .kiki-image {
        width: 104px;
    }
    .neueste-bilder-link {
        font-size: clamp(20px, 2.5vw, 28px); /* Gleicher Stil wie Subtitle */
        padding: 0;
        border-radius: 0;
        margin: 0;
        background: transparent;
        border: none;
        box-shadow: none;
        text-align: left;
    }
        height: 104px;
    }
    .kiki-text {
        font-size: 21px;
        margin-left: 117px;
        margin-top: 130px; /* 30px + 50px (vorher) + 50px (zusätzlich für kleine mobile Ansichten) */
    }
    .subtitle {
        font-size: clamp(20px, 2.5vw, 28px); /* Responsive: 20px-28px */
        padding: clamp(10px, 1.2vw, 12px) clamp(16px, 2vw, 20px);
        letter-spacing: -0.3px;
        text-align: center;
        display: block;
        width: fit-content;
        margin: 0 auto;
        font-family: 'JetBrains Mono', monospace;
        font-weight: 700;
        color: #2c3e50;
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
        line-height: 1.3;
    }
    .subtitle-break {
        display: block;
        margin-top: 8px;
        font-size: 0.9em;
        opacity: 0.9;
        letter-spacing: clamp(0.3px, 0.1vw, 1.5px);
    }
    .main-title {
        font-size: clamp(32px, 4vw, 48px); /* Responsive: 32px-48px */
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        display: block;
        width: 100%;
        font-family: 'JetBrains Mono', monospace;
        font-weight: 700;
        color: #2c3e50;
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
        letter-spacing: -0.5px;
        line-height: 1.3;
        animation: none;
    }
    
    /* Mehr Abstand zum Top-Header in mobilen Ansichten */
    #page1 .main-title {
        margin-top: 0; /* Reset margin-top, da Container verschoben wird */
    }
    .greeting {
        font-size: clamp(16.8px, 2.1vw, 23.52px); /* 50% größer: 11.2px * 1.5 = 16.8px, 15.68px * 1.5 = 23.52px */
        padding: 6px 0;
        margin: 0;
        border-radius: 0;
        border: none;
        background: transparent;
        top: calc(40px + 12.5vh); /* Halber Weg zwischen Header (80px) und Video-Container-Oberkante (~25vh) */
        left: 50%; /* Zentriert horizontal */
        transform: translateX(-50%); /* Nur horizontal zentrieren */
        right: auto; /* Breite wird durch Text bestimmt */
        width: fit-content; /* Breite passt sich an Textbreite an */
        font-family: 'JetBrains Mono', monospace;
        font-weight: 600;
        letter-spacing: 0.3px;
        line-height: 1.4;
        max-width: calc(100% - 9.8px); /* Maximal Container-Breite minus Abstände */
        box-shadow: none;
        text-shadow: none;
        letter-spacing: 0.49px; /* 30% kleiner: 0.7px → 0.49px */
    }
    .kiki-name-wrapper {
        flex-direction: column;
        gap: 20px;
        margin: 0 auto;
    }
    .name-input-section {
        padding: 14px 20px;
        min-width: 200px;
        max-width: 90%;
    }
    .name-input-title {
        font-size: 20px;
    }
    
    /* Professionellere Schriften für page3 in mobilen Ansichten */
    #page3 .subtitle {
        font-size: clamp(22px, 2.8vw, 32px);
        letter-spacing: -0.3px;
    }
    
    #page3 .name-input-title {
        font-size: clamp(18px, 2.3vw, 22px);
    }
    
    #page3 .neueste-bilder-link {
        font-size: clamp(18px, 2.3vw, 26px);
    }
    .name-input-wrapper {
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }
    .name-input {
        width: 100%;
        min-width: auto;
        max-width: 100%;
        padding: 10px 16px;
        font-size: 16px;
    }
    .name-submit-button {
        width: 100%;
        padding: 8px 14px;
        font-size: 18px;
        margin: 0;
    }
    .books-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 20px;
        max-width: 100%; /* Volle Breite auf Mobile, aber durch padding begrenzt */
        padding: 20px 15px;
    }
    
    /* Seitliches Padding auf 0 für books-grid auf page4 in mobilen Ansichten */
    #page4 .books-grid {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important; /* Kein seitliches Margin */
        margin-right: 0 !important; /* Kein seitliches Margin */
        max-width: 100% !important; /* Volle Breite bis zum Rand */
    }
    
    /* Seitliches Padding auf 0 für book-card auf page4 in mobilen Ansichten */
    #page4 .book-card {
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
    }
    
    .book-title {
        font-size: 28px;
    }
    .book-description {
        font-size: 18px;
    }
    /* Menüband-Styles werden von menueband.js bereitgestellt - Doppeldefinitionen entfernt */
    .user-gallery {
        margin-top: 20px; /* Konsistent mit Desktop */
        background: transparent !important; /* Entferne grauen Hintergrund */
        box-shadow: none !important; /* Entferne grauen Schatten */
    }
    .gallery-title {
        font-size: 32px;
    }
    /* .gallery-grid wird bereits oben bei Zeile 1583 definiert - Doppeldefinition entfernt */
    .gallery-item-image-container {
        height: auto; /* Höhe wird durch Flex-Layout bestimmt */
        flex: 1 1 auto; /* Nimmt verfügbaren Platz ein */
    }
    
    .gallery-item img {
        width: 100%;
        max-width: 100%;
        height: 100%; /* Füllt Container vollständig */
        object-fit: cover;
    }
    
    .gallery-item-timestamp {
        font-size: 9px; /* Etwas kleiner auf mobilen Geräten */
        padding: 3px 6px;
        bottom: 6px;
        left: 50%;
        transform: translateX(-50%); /* Zentriert horizontal */
    }
    .gallery-item {
        min-height: 450px;
        display: flex;
        align-items: center;
        justify-self: center !important; /* Zentriere Item im Grid */
        margin-left: auto !important; /* Zentriere Item */
        margin-right: auto !important; /* Zentriere Item */
        max-width: calc(100% - 20px) !important; /* Volle Breite minus Padding */
        width: 100% !important; /* Volle verfügbare Breite */
        justify-content: center;
    }
    .gallery-item-info {
        padding: 10px 0; /* Kein seitliches Padding, nur oben/unten */
    }
    .vorlese-text {
        font-size: 11px; /* Reduziert: 14px -> 11px */
        padding: 8px; /* Reduziert: 12px -> 8px */
        margin: 2px 0 0 0; /* Reduziert: 3.75px -> 2px */
    }
    .page-nav-links {
        flex-direction: column;
        gap: 10px;
    }
    .page-nav-link {
        font-size: 18px;
        padding: 14px 28px;
        width: fit-content;
        max-width: 280px;
    }
    .page-title {
        font-size: clamp(24px, 3.5vw, 32px); /* Responsive: 24px-32px */
    }
    #page4 .page-title {
        font-size: clamp(20px, 2.5vw, 28px); /* Responsive: 20px-28px */
        padding: clamp(10px, 1.2vw, 12px) clamp(16px, 2vw, 20px);
        letter-spacing: clamp(1px, 0.15vw, 2px);
    }
    /* Scroll-Indikator-Styles werden von menueband.js bereitgestellt */
}

/* Früher: Platz für Scroll-Leiste unten – Leiste sitzt jetzt unter dem Header (menueband.js) */
@media (max-width: 480px) {
    body {
        padding-bottom: 0;
    }
}

/* Name-Input-Container */
.name-input-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 0; /* Margin entfernt */
    width: fit-content;
    flex-shrink: 0;
    background: transparent; /* Gleicher Hintergrund wie page-section */
}

/* Reduziere Abstand zwischen name-input-container und nav.container auf page 3 */
#page3 .name-input-container {
    margin-bottom: 0;
}

#page3 nav.container {
    margin-top: 0;
    padding-top: 0;
}

/* Unsere Bilderbücher Sektion */
#userBooksSection {
    margin-top: 80px;
    padding-top: 40px;
    padding-bottom: 40px;
    border-top: none !important;
    display: block !important;
    visibility: visible !important;
    background: transparent !important;
    overflow-y: visible;
    min-height: 600px;
    box-shadow: none !important;
}

#userBooksSection .page-title {
    font-size: clamp(26px, 3.5vw, 36px); /* Responsive: 26px-36px */
    margin-bottom: 30px;
    text-align: center; /* Text zentrieren */
    margin-left: auto; /* Element zentrieren */
    margin-right: auto; /* Element zentrieren */
    display: block; /* Block für bessere Zentrierung */
    width: fit-content; /* Breite an Inhalt anpassen */
}

/* Child Credits Display */
#childCreditsDisplay {
    display: none;
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    padding: 15px 20px;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    font-family: 'JetBrains Mono', monospace;
    font-size: 18px;
}

#childCreditsDisplay span:first-child {
    font-size: 24px;
}

#childCreditsDisplay #creditsAmount {
    font-weight: 700;
    margin: 0 5px;
}

/* End Child Session Button */
#endChildSessionButton {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: #dc3545;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    cursor: pointer;
}

/* Footer Paragraph */
.footer p:last-child {
    margin-top: 15px;
    font-size: 18px;
}

/* ============================================================================
   TUTORIAL-BUCH STYLES
   ============================================================================ */

/* Tutorial-Buch Overlay */
.tutorial-book-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 11000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tutorial-book-overlay.tutorial-open {
    opacity: 1;
}

/* Tutorial-Buch Container */
.tutorial-book-container {
    position: relative;
    width: 90%;
    max-width: 900px;
    max-height: 90vh;
    background: linear-gradient(135deg, #f5e6d3 0%, #e8d5b7 100%);
    border-radius: 20px;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 0 3px rgba(139, 69, 19, 0.3),
        inset 0 2px 10px rgba(255, 255, 255, 0.3);
    padding: 15px;
    display: flex;
    flex-direction: column;
    animation: tutorialBookOpen 0.4s ease-out;
    overflow: hidden;
}

@keyframes tutorialBookOpen {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Dark Mode: Tutorial-Buch */
body.dark-mode .tutorial-book-container,
html.dark-mode .tutorial-book-container {
    background: linear-gradient(135deg, #2a1f15 0%, #1a130d 100%);
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.8),
        0 0 0 3px rgba(139, 69, 19, 0.5),
        inset 0 2px 10px rgba(255, 255, 255, 0.1);
}

/* Schließen-Button */
.tutorial-book-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #333;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
    line-height: 1;
    padding: 0;
}

.tutorial-book-close:hover {
    background: rgba(255, 107, 157, 0.8);
    color: white;
    transform: rotate(90deg) scale(1.1);
}

body.dark-mode .tutorial-book-close,
html.dark-mode .tutorial-book-close {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* Tutorial-Buch Content */
.tutorial-book-content {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 5px;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    /* Verstecke Scrollbalken */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE und Edge */
}

.tutorial-book-content::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Tutorial-Seite */
.tutorial-page {
    width: 100%;
    text-align: center;
    opacity: 1;
    transition: opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 5px 10px;
}

/* Emoji auf Tutorial-Seite */
.tutorial-page-emoji {
    font-size: 50px;
    line-height: 1;
    margin-bottom: 0;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

/* Animationen für Emojis */
.tutorial-animation-wave {
    animation: tutorialWave 2s ease-in-out infinite;
}

.tutorial-animation-paint {
    animation: tutorialPaint 2s ease-in-out infinite;
}

.tutorial-animation-book {
    animation: tutorialBook 2s ease-in-out infinite;
}

.tutorial-animation-gallery {
    animation: tutorialGallery 2s ease-in-out infinite;
}

.tutorial-animation-lock {
    animation: tutorialLock 2s ease-in-out infinite;
}

.tutorial-animation-friends {
    animation: tutorialFriends 2s ease-in-out infinite;
}

.tutorial-animation-video {
    animation: tutorialVideo 2s ease-in-out infinite;
}

.tutorial-animation-confetti {
    animation: tutorialConfetti 2s ease-in-out infinite;
}

.tutorial-animation-clock {
    animation: tutorialClock 2s ease-in-out infinite;
}

.tutorial-animation-character {
    animation: tutorialCharacter 2s ease-in-out infinite;
}

.tutorial-animation-publish {
    animation: tutorialPublish 2s ease-in-out infinite;
}

.tutorial-animation-collaborate {
    animation: tutorialCollaborate 2s ease-in-out infinite;
}

@keyframes tutorialWave {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(-10deg) scale(1.05); }
    75% { transform: rotate(10deg) scale(1.05); }
}

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

@keyframes tutorialBook {
    0%, 100% { transform: scale(1) rotateY(0deg); }
    50% { transform: scale(1.05) rotateY(5deg); }
}

@keyframes tutorialGallery {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.1) rotate(-5deg); }
    75% { transform: scale(1.1) rotate(5deg); }
}

@keyframes tutorialLock {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes tutorialFriends {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes tutorialVideo {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

@keyframes tutorialCollaborate {
    0%, 100% { transform: translateX(0) scale(1); }
    25% { transform: translateX(-8px) scale(1.05); }
    75% { transform: translateX(8px) scale(1.05); }
}

@keyframes tutorialConfetti {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(-15deg) scale(1.1); }
    75% { transform: rotate(15deg) scale(1.1); }
}

/* Titel auf Tutorial-Seite */
.tutorial-page-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 22px;
    font-weight: 700;
    color: #2c3e50;
    margin: 0;
    margin-top: 5px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

body.dark-mode .tutorial-page-title,
html.dark-mode .tutorial-page-title {
    color: #fff;
}

/* Medien auf Tutorial-Seite */
.tutorial-page-media {
    max-width: 100%;
    max-height: 350px;
    width: auto;
    height: auto;
    border-radius: 10px;
    margin-bottom: 5px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    object-fit: contain;
}

.tutorial-page-media video {
    width: 100%;
    height: auto;
}

/* Text auf Tutorial-Seite */
.tutorial-page-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    line-height: 1.4;
    color: #555;
    max-width: 600px;
    margin: 0;
    margin-top: 5px;
}

body.dark-mode .tutorial-page-text,
html.dark-mode .tutorial-page-text {
    color: #e0e0e0;
}

/* Action-Button */
.tutorial-action-btn {
    margin-top: 20px;
    padding: 12px 30px;
    background: linear-gradient(135deg, #FF6B9D 0%, #667eea 100%);
    color: white;
    border: none;
    border-radius: 25px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.tutorial-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, #ff8bb3 0%, #7d8ff5 100%);
}

/* Tutorial-Navigation */
.tutorial-book-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 2px solid rgba(139, 69, 19, 0.2);
    flex-shrink: 0;
}

body.dark-mode .tutorial-book-navigation,
html.dark-mode .tutorial-book-navigation {
    border-top-color: rgba(255, 255, 255, 0.1);
}

/* Navigation-Buttons */
.tutorial-nav-btn {
    width: 50px;
    height: 50px;
    border: none;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 50%;
    font-size: 32px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    line-height: 1;
    padding: 0;
}

.tutorial-nav-btn:hover:not(:disabled) {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, #7d8ff5 0%, #8b5fbf 100%);
}

.tutorial-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Seitenzahl */
.tutorial-page-number {
    font-family: 'JetBrains Mono', monospace;
    font-size: 18px;
    font-weight: 600;
    color: #555;
    min-width: 80px;
    text-align: center;
}

body.dark-mode .tutorial-page-number,
html.dark-mode .tutorial-page-number {
    color: #e0e0e0;
}

/* Skip-Button */
.tutorial-book-skip {
    text-align: center;
    margin-top: 10px;
    flex-shrink: 0;
}

.tutorial-skip-btn {
    background: transparent;
    border: none;
    color: #999;
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    cursor: pointer;
    text-decoration: underline;
    transition: color 0.3s ease;
    padding: 5px 10px;
}

.tutorial-skip-btn:hover {
    color: #667eea;
}

body.dark-mode .tutorial-skip-btn,
html.dark-mode .tutorial-skip-btn {
    color: #aaa;
}

body.dark-mode .tutorial-skip-btn:hover,
html.dark-mode .tutorial-skip-btn:hover {
    color: #7d8ff5;
}

/* Responsive Design */
@media (max-width: 768px) {
    .tutorial-book-container {
        width: 95%;
        padding: 30px 20px;
        min-height: 400px;
    }
    
    .tutorial-page-emoji {
        font-size: 80px;
    }
    
    .tutorial-page-title {
        font-size: 24px;
    }
    
    .tutorial-page-text {
        font-size: 16px;
    }
    
    .tutorial-book-content {
        min-height: 300px;
        padding: 10px;
    }
    
    .tutorial-nav-btn {
        width: 45px;
        height: 45px;
        font-size: 28px;
    }
}

@media (max-width: 480px) {
    .tutorial-book-container {
        padding: 10px 10px;
        padding-bottom: 60px;
    }
    
    .tutorial-page-emoji {
        font-size: 40px;
    }
    
    .tutorial-page-title {
        font-size: 18px;
    }
    
    .tutorial-page-text {
        font-size: 13px;
    }
    
    .tutorial-page-media {
        max-height: 250px;
    }
    
    .tutorial-nav-btn {
        width: 40px;
        height: 40px;
        font-size: 24px;
    }
    
    .tutorial-book-navigation {
        gap: 20px;
    }
}

/* Empty State Messages */
.user-books-empty {
    text-align: center;
    padding: 40px;
    color: #6c757d;
    grid-column: 1 / -1;
}

.user-books-empty-icon {
    font-size: 48px;
    margin-bottom: 15px;
}

.user-books-empty-link {
    margin-top: 15px;
    font-size: 14px;
}

.user-books-empty-link a {
    color: #667eea;
    text-decoration: none;
    font-weight: 700;
}

.gallery-empty-message {
    text-align: center;
    color: white;
    font-size: 24px;
    padding: 40px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

/* Wrapper: Toggle oben, Menü öffnet sich darunter */
.greeting-nav-wrapper {
    position: absolute;
    left: 0 !important;
    margin-left: 0;
    top: 70px !important;
    transform: none !important;
    z-index: 11;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}
/* Obere Zeile: Toggle + Call-to-Action nebeneinander */
.greeting-nav-top-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
}
/* Pfeil: dick, comic-mäßig, ohne Hintergrund, zappelt */
.greeting-nav-cta {
    display: none;
    padding: 8px 10px;
    font-size: 2.2rem;
    font-weight: 900;
    color: #FFD700;
    -webkit-text-stroke: 3px #1a1a1a;
    text-shadow: 2px 2px 0 #1a1a1a, 3px 3px 0 rgba(0,0,0,0.3);
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    pointer-events: none;
    animation: greeting-nav-arrow-zappel 0.6s ease-in-out infinite;
    line-height: 1;
}
@keyframes greeting-nav-arrow-zappel {
    0%, 100% { transform: translateX(0) scale(1); }
    20% { transform: translateX(-8px) scale(1.1); }
    40% { transform: translateX(2px) scale(0.95); }
    60% { transform: translateX(-5px) scale(1.05); }
    80% { transform: translateX(6px) scale(1); }
}
.greeting-nav-wrapper.greeting-nav-collapsed .greeting-nav-cta {
    display: inline-block;
}
.greeting-nav-wrapper:not(.greeting-nav-collapsed) .greeting-nav-cta {
    display: none !important;
}
@media (max-width: 480px) {
    .greeting-nav-cta {
        font-size: 1.8rem;
        -webkit-text-stroke-width: 2px;
        padding: 6px 8px;
    }
}
/* Toggle-Button: Icon zum Auf-/Zuklappen, links ausgerichtet */
.greeting-nav-toggle {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 0 10px 10px 0;
    background: linear-gradient(135deg, rgba(255, 107, 157, 0.95) 0%, rgba(102, 126, 234, 0.95) 100%);
    color: #fff;
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
    pointer-events: auto;
}
.greeting-nav-toggle:hover {
    background: linear-gradient(135deg, rgba(255, 107, 157, 1) 0%, rgba(102, 126, 234, 1) 100%);
    transform: scale(1.05);
}
body.dark-mode .greeting-nav-toggle,
html.dark-mode .greeting-nav-toggle {
    background: #0a0a0a !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
    color: #e0e0e0 !important;
}
body.dark-mode .greeting-nav-toggle:hover,
html.dark-mode .greeting-nav-toggle:hover {
    background: rgba(255, 255, 255, 0.14) !important;
}
body.kids-mode-active .greeting-nav-toggle,
html.kids-mode-active .greeting-nav-toggle {
    background: linear-gradient(135deg, rgba(var(--kids-mode-primary-rgb), 0.5) 0%, rgba(var(--kids-mode-secondary-rgb), 0.5) 50%, rgba(var(--kids-mode-primary-rgb), 0.5) 100%) !important;
}
body.dark-mode .greeting-nav-cta,
html.dark-mode .greeting-nav-cta {
    color: #FFD700;
    -webkit-text-stroke-color: #fff;
}
/* Menü eingeklappt: Toggle + CTA sichtbar, Aufmerksamkeit erzeugen */
.greeting-nav-wrapper.greeting-nav-collapsed .greeting-nav-container {
    display: none !important;
}
.greeting-nav-wrapper.greeting-nav-collapsed .greeting-nav-toggle {
    animation: greeting-nav-attention 2s ease-in-out infinite;
}
.greeting-nav-wrapper.greeting-nav-collapsed .greeting-nav-toggle:hover {
    animation: none;
}
@keyframes greeting-nav-attention {
    0%, 100% {
        box-shadow: 0 4px 16px rgba(0,0,0,0.15), 0 0 0 0 rgba(255, 215, 0, 0.5);
        border-color: rgba(255, 255, 255, 0.3);
    }
    50% {
        box-shadow: 0 4px 20px rgba(0,0,0,0.2), 0 0 25px 6px rgba(255, 215, 0, 0.6);
        border-color: rgba(255, 215, 0, 0.8);
    }
}
/* Menü ausgeklappt: Menü sichtbar, direkt unter Toggle */
.greeting-nav-container.greeting-nav-expanded {
    display: flex !important;
    border-top: none !important; /* Nahtlos unter Toggle-Button */
}
.greeting-nav-container {
    position: relative;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 270px !important;
    min-width: 270px !important;
    max-width: 270px !important;
    pointer-events: none;
    display: flex;
    flex-direction: row !important; /* Immer nebeneinander */
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
    padding: 15px 12px;
    background: linear-gradient(135deg, rgba(255, 107, 157, 0.95) 0%, rgba(102, 126, 234, 0.95) 100%);
    border-radius: 0 25px 25px 0 !important; /* Einheitlich in allen Ansichten */
    box-shadow: 0 4px 16px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Dark Mode: Greeting Nav Container – gleicher Stil wie Top-Header/Scroll-Indikator */
body.dark-mode .greeting-nav-container,
html.dark-mode .greeting-nav-container {
    background: #0a0a0a !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

/* Dark Mode: Greeting Nav Items & Labels */
body.dark-mode .greeting-nav-container .greeting-nav-label,
html.dark-mode .greeting-nav-container .greeting-nav-label {
    color: #e0e0e0 !important;
    text-shadow: none !important;
}
body.dark-mode .greeting-nav-item:hover,
html.dark-mode .greeting-nav-item:hover {
    background: rgba(255, 255, 255, 0.14) !important;
}
body.dark-mode .greeting-nav-item:hover .greeting-nav-label,
html.dark-mode .greeting-nav-item:hover .greeting-nav-label {
    color: #667eea !important;
}

/* Dark Mode: Greeting Nav Dots – gleicher Stil wie Top-Header-Buttons */
body.dark-mode .greeting-nav-dot,
html.dark-mode .greeting-nav-dot {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
}
body.dark-mode .greeting-nav-emoji-column .greeting-nav-dot:hover,
html.dark-mode .greeting-nav-emoji-column .greeting-nav-dot:hover,
body.dark-mode .greeting-nav-item:hover .greeting-nav-dot,
html.dark-mode .greeting-nav-item:hover .greeting-nav-dot {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
}
body.dark-mode .greeting-nav-highlight.greeting-nav-dot,
html.dark-mode .greeting-nav-highlight.greeting-nav-dot {
    background: rgba(102, 126, 234, 0.35) !important;
    border: 1px solid rgba(102, 126, 234, 0.5) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 0 1px rgba(102, 126, 234, 0.2) !important;
}
body.dark-mode .greeting-nav-highlight.greeting-nav-dot:hover,
html.dark-mode .greeting-nav-highlight.greeting-nav-dot:hover {
    background: rgba(102, 126, 234, 0.5) !important;
}
body.dark-mode .greeting-nav-highlight-schatzinsel.greeting-nav-dot,
html.dark-mode .greeting-nav-highlight-schatzinsel.greeting-nav-dot {
    background: rgba(20, 184, 166, 0.35) !important;
    border: 1px solid rgba(20, 184, 166, 0.5) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 0 1px rgba(20, 184, 166, 0.2) !important;
}
body.dark-mode .greeting-nav-highlight-schatzinsel.greeting-nav-dot:hover,
html.dark-mode .greeting-nav-highlight-schatzinsel.greeting-nav-dot:hover {
    background: rgba(20, 184, 166, 0.5) !important;
}

/* Kindermodus: Greeting Nav Container (Farben aus Admin → Farben) */
body.kids-mode-active .greeting-nav-container,
html.kids-mode-active .greeting-nav-container,
body.kids-mode-active.dark-mode .greeting-nav-container,
html.kids-mode-active.dark-mode .greeting-nav-container {
    background: linear-gradient(135deg, rgba(var(--kids-mode-primary-rgb), 0.5) 0%, rgba(var(--kids-mode-secondary-rgb), 0.5) 50%, rgba(var(--kids-mode-primary-rgb), 0.5) 100%) !important;
    backdrop-filter: blur(10px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(180%) !important;
    border-color: rgba(var(--kids-mode-primary-rgb), 0.9) !important;
    box-shadow: 0 4px 16px rgba(var(--kids-mode-primary-rgb), 0.25), 0 2px 8px rgba(var(--kids-mode-secondary-rgb), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 0 20px rgba(var(--kids-mode-primary-rgb), 0.1) !important;
}

/* Emoji-Spalte */
.greeting-nav-emoji-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    pointer-events: none;
    align-self: flex-start; /* Wichtig für Ausrichtung */
}

/* Text-Spalte */
.greeting-nav-text-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    pointer-events: none;
    align-self: flex-start; /* Wichtig für Ausrichtung */
}

.greeting-nav-item {
    display: flex;
    flex-direction: row; /* Emoji und Text nebeneinander innerhalb des Items */
    align-items: center;
    justify-content: flex-start;
    pointer-events: auto;
    cursor: pointer;
    opacity: 0;
    animation: greetingNavFadeIn 0.4s ease-out forwards;
    width: 100%;
    padding: 0 10px; /* Padding oben/unten entfernt für bessere Ausrichtung */
    border-radius: 10px;
    transition: all 0.3s ease;
    min-height: 40px; /* Gleiche Höhe wie Emoji-Dot */
    height: 40px; /* Feste Höhe für Ausrichtung */
    box-sizing: border-box;
}

.greeting-nav-item:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateX(5px);
}

.greeting-nav-item:hover .greeting-nav-label {
    color: #FFD700;
    text-shadow: 0 2px 6px rgba(0,0,0,0.3), 0 0 10px rgba(255, 215, 0, 0.3);
}

/* Emoji-Dots in der Emoji-Spalte */
.greeting-nav-emoji-column .greeting-nav-dot {
    opacity: 0;
    animation: greetingNavFadeIn 0.4s ease-out forwards;
    cursor: pointer;
    transition: all 0.3s ease;
    pointer-events: auto;
    flex-shrink: 0 !important; /* WICHTIG: Verhindere Stauchung */
    flex-grow: 0 !important; /* Verhindere Vergrößerung */
    width: 40px !important; /* Feste Breite – einheitlich in allen Ansichten */
    height: 40px !important; /* Feste Höhe */
    min-width: 40px !important;
    min-height: 40px !important;
    aspect-ratio: 1 !important; /* Fixiere Seitenverhältnis */
}

.greeting-nav-emoji-column .greeting-nav-dot:hover {
    transform: scale(1.1);
    background: linear-gradient(135deg, #6ee5dc 0%, #7d8ff5 100%);
    border-color: rgba(255, 215, 0, 0.95);
    box-shadow: 0 8px 24px rgba(0,0,0,0.25), 0 4px 12px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.3);
}

/* Chat-Arena Highlight – hervorgehoben wie auf Arena-Seite */
.greeting-nav-highlight.greeting-nav-dot {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%) !important;
    border: 2px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 4px 16px rgba(255, 215, 0, 0.5), 0 0 20px rgba(255, 165, 0, 0.3), inset 0 1px 0 rgba(255,255,255,0.4) !important;
}
.greeting-nav-highlight.greeting-nav-item {
    background: rgba(255, 215, 0, 0.45) !important;
    border: 1px solid rgba(255, 215, 0, 0.6) !important;
    box-shadow: 0 2px 12px rgba(255, 215, 0, 0.25) !important;
}
.greeting-nav-highlight.greeting-nav-item .greeting-nav-label {
    color: #FFD700 !important;
    font-weight: 800 !important;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.8), 0 0 12px rgba(0,0,0,0.6), -1px -1px 2px rgba(0,0,0,0.5), 0 0 10px rgba(255, 215, 0, 0.4) !important;
}
.greeting-nav-free-badge {
    display: inline-block;
    font-size: 0.85em;
    font-weight: 700;
    color: #c62828 !important;
    margin-left: 6px;
    animation: greeting-nav-free-blink 1s ease-in-out infinite;
}
@keyframes greeting-nav-free-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}
.greeting-nav-highlight.greeting-nav-item:hover {
    background: rgba(255, 215, 0, 0.65) !important;
    box-shadow: 0 4px 18px rgba(255, 215, 0, 0.4) !important;
}
.greeting-nav-highlight.greeting-nav-dot:hover {
    transform: scale(1.15) !important;
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.6), 0 0 25px rgba(255, 165, 0, 0.4) !important;
}

/* Schatzinsel Highlight – gleicher Stil wie CTA-Button (Türkis-Rahmen) */
.greeting-nav-highlight-schatzinsel.greeting-nav-dot {
    background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%) !important;
    border: 2px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 4px 16px rgba(20, 184, 166, 0.5), 0 0 20px rgba(13, 148, 136, 0.3), inset 0 1px 0 rgba(255,255,255,0.4) !important;
}
.greeting-nav-highlight-schatzinsel.greeting-nav-item {
    background: rgba(13, 148, 136, 0.45) !important;
    border: 1px solid rgba(20, 184, 166, 0.6) !important;
    box-shadow: 0 2px 12px rgba(20, 184, 166, 0.25) !important;
}
.greeting-nav-highlight-schatzinsel.greeting-nav-item .greeting-nav-label {
    color: #2dd4bf !important;
    font-weight: 800 !important;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.8), 0 0 12px rgba(0,0,0,0.6), -1px -1px 2px rgba(0,0,0,0.5), 0 0 10px rgba(20, 184, 166, 0.4) !important;
}
.greeting-nav-highlight-schatzinsel.greeting-nav-item:hover {
    background: rgba(20, 184, 166, 0.65) !important;
    box-shadow: 0 4px 18px rgba(20, 184, 166, 0.4) !important;
}
.greeting-nav-highlight-schatzinsel.greeting-nav-dot:hover {
    transform: scale(1.15) !important;
    box-shadow: 0 6px 20px rgba(20, 184, 166, 0.6), 0 0 25px rgba(13, 148, 136, 0.4) !important;
}

.greeting-nav-dot {
    width: 40px;
    height: 40px;
    min-width: 40px; /* Verhindere Stauchung in der Breite */
    min-height: 40px; /* Verhindere Stauchung in der Höhe */
    aspect-ratio: 1; /* Fixiere Seitenverhältnis 1:1 */
    border-radius: 50%;
    background: linear-gradient(135deg, #4ecdc4 0%, #667eea 100%);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    border: 2px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 4px 16px rgba(0,0,0,0.2), 0 2px 8px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.2);
    outline: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    overflow: hidden;
    transform-origin: center;
    flex-shrink: 0 !important; /* WICHTIG: Verhindere Stauchung durch Flexbox */
    flex-grow: 0 !important; /* Verhindere Vergrößerung */
    box-sizing: border-box;
    flex: 0 0 40px !important; /* Feste Größe, keine Flex-Größe */
}

.greeting-nav-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px;
    font-weight: 700;
    color: white;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.8), 0 0 12px rgba(0,0,0,0.6), -1px -1px 2px rgba(0,0,0,0.5);
    letter-spacing: 0.3px;
    white-space: nowrap;
    text-align: left;
    pointer-events: none;
    transition: all 0.3s ease;
    margin-left: 0;
}

.greeting-nav-dot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
}

.greeting-nav-item:hover .greeting-nav-dot::before {
    width: 100%;
    height: 100%;
}

.greeting-nav-item:hover .greeting-nav-dot {
transform: scale(1.1);
    background: linear-gradient(135deg, #6ee5dc 0%, #7d8ff5 100%);
    border-color: rgba(255, 215, 0, 0.95);
    box-shadow: 0 8px 24px rgba(0,0,0,0.25), 0 4px 12px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.3);
}

.greeting-nav-item:hover .greeting-nav-label {
    color: #FFD700;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.9), 0 0 15px rgba(255, 215, 0, 0.6), -1px -1px 2px rgba(0,0,0,0.7), 0 0 20px rgba(255, 215, 0, 0.4);
}

.greeting-nav-item:active .greeting-nav-dot {
    transform: scale(0.95);
}

@keyframes greetingNavFadeIn {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Mobile/Tablet: nur Position anpassen (Header-Höhe), Größe = Basis (einheitlich) */
@media (max-width: 768px) {
    .greeting {
        top: calc(45px + 12.5vh); /* Halber Weg zwischen Header (90px) und Video-Container-Oberkante (~25vh) */
    }
    .greeting-nav-wrapper {
        top: 90px !important; /* 10px unter Top-Header (Header ~80px auf Mobile) */
    }
    .greeting-nav-dot {
        width: 34px;
        height: 34px;
        min-width: 34px;
        min-height: 34px;
        font-size: 22px;
        flex: 0 0 34px !important;
    }
    .greeting-nav-label {
        font-size: 14px;
    }
}

/* Mobile klein: kompaktere Darstellung */
@media (max-width: 480px) {
    .greeting-nav-dot {
        width: 28px;
        height: 28px;
        min-width: 28px;
        min-height: 28px;
        font-size: 18px;
        flex: 0 0 28px !important;
    }
    .greeting-nav-label {
        font-size: 13px;
    }
    .greeting-nav-item {
        padding: 10px 14px;
    }
}

/* Desktop: nur Position, keine Größenänderung – einheitliche Mobile-Größe überall */
@media (min-width: 769px) {
    .greeting-nav-container {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
    }
}

/* ============================================================================
   INDEX.HTML – Lade-Intro (Header + Scroll + Hintergrund, dann Tagline, dann Seite)
   ============================================================================ */
/* Intro: #pageContainer aus bis finishIndexIntro (inkl. Phase „nur KIKI“ mit index-intro-kiki-only) */
body.index-intro-active #pageContainer {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

body.index-intro-active #topHeaderCreditsRow,
body.index-intro-active .top-header-credits-row {
    display: none !important;
}

/* Erste Intro-Phase (Video + Text, bis Timer/Skip): KIKI erst in Phase „nur KIKI“ (index-intro-kiki-only) */
body.index-intro-active:not(.index-intro-kiki-only) #kikiGlobalWrap,
body.index-intro-active:not(.index-intro-kiki-only) #kikiBubbleChat {
    display: none !important;
}

.index-intro-overlay {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px min(24px, 4vw);
    box-sizing: border-box;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.65s ease;
}

/* Phase 0: START — volle Fläche fängt keine Klicks (Header + Scroll-Indikator bleiben nutzbar); nur der Button ist klickbar */
.index-intro-start-screen {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    pointer-events: none;
}

.index-intro-start-screen[hidden] {
    display: none !important;
}

/* × mittig über „Los geht's!“, mit Abstand (nur solange Skip im Start-Screen liegt) */
.index-intro-start-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 2.8vh, 22px);
    pointer-events: none;
    max-width: min(92vw, 24rem);
}

.index-intro-start-column > .index-intro-skip-btn,
.index-intro-start-column > .index-intro-start-btn {
    pointer-events: auto;
}

.index-intro-start-screen .index-intro-skip-btn {
    position: static;
    right: auto;
    top: auto;
    transform: none;
    flex-shrink: 0;
}

/* Nur Phase „Los geht's!“: Menüband + Scroll-Leiste über Intro-Overlay (z-index), damit Dropdown sichtbar bleibt */
body.index-intro-active:not(.index-intro-kiki-only):has(#indexIntroStartScreen:not([hidden])) .top-header-band {
    z-index: 10055 !important;
}
body.index-intro-active:not(.index-intro-kiki-only):has(#indexIntroStartScreen:not([hidden])) .scroll-indicator {
    z-index: 10055 !important;
}

.index-intro-start-btn {
    pointer-events: auto;
    margin: 0;
    padding: 18px 36px;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.35);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.index-intro-start-btn:hover {
    transform: scale(1.06);
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.index-intro-start-btn:focus-visible {
    outline: 2px solid rgba(129, 140, 248, 0.9);
    outline-offset: 4px;
}

html:not(.dark-mode) .index-intro-start-btn,
body:not(.dark-mode) .index-intro-start-btn {
    background: rgba(255, 255, 255, 0.22);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

html:not(.dark-mode) .index-intro-start-btn:hover,
body:not(.dark-mode) .index-intro-start-btn:hover {
    background: rgba(255, 255, 255, 0.32);
}

.index-intro-overlay .index-intro-start-letters.kikirika-header-title {
    font-size: clamp(1.35rem, 4.2vw, 2.25rem);
    line-height: 1.2;
    letter-spacing: 0.06em;
    margin: 0;
    padding: 0;
    pointer-events: none;
    white-space: normal;
    max-width: min(92vw, 22rem);
}

.index-intro-overlay .index-intro-start-letters > span[data-kiki-color] {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    text-shadow: 0.5px 0.5px 0 rgba(0, 0, 0, 0.28);
    -webkit-text-stroke: 0.6px rgba(0, 0, 0, 0.18);
}

.index-intro-overlay .index-intro-start-letters > span[data-kiki-color="#e91e63"] { color: #e91e63 !important; -webkit-text-fill-color: #e91e63 !important; }
.index-intro-overlay .index-intro-start-letters > span[data-kiki-color="#ff4f8b"] { color: #ff4f8b !important; -webkit-text-fill-color: #ff4f8b !important; }
.index-intro-overlay .index-intro-start-letters > span[data-kiki-color="#ffc107"] { color: #ffc107 !important; -webkit-text-fill-color: #ffc107 !important; }
.index-intro-overlay .index-intro-start-letters > span[data-kiki-color="#94a3b8"] { color: #94a3b8 !important; -webkit-text-fill-color: #94a3b8 !important; }
.index-intro-overlay .index-intro-start-letters > span[data-kiki-color="#00a896"] { color: #00a896 !important; -webkit-text-fill-color: #00a896 !important; }
.index-intro-overlay .index-intro-start-letters > span[data-kiki-color="#008fa3"] { color: #008fa3 !important; -webkit-text-fill-color: #008fa3 !important; }
.index-intro-overlay .index-intro-start-letters > span[data-kiki-color="#2a7de1"] { color: #2a7de1 !important; -webkit-text-fill-color: #2a7de1 !important; }
.index-intro-overlay .index-intro-start-letters > span[data-kiki-color="#3f51b5"] { color: #3f51b5 !important; -webkit-text-fill-color: #3f51b5 !important; }
.index-intro-overlay .index-intro-start-letters > span[data-kiki-color="#5e35b1"] { color: #5e35b1 !important; -webkit-text-fill-color: #5e35b1 !important; }
.index-intro-overlay .index-intro-start-letters > span[data-kiki-color="#7b1fa2"] { color: #7b1fa2 !important; -webkit-text-fill-color: #7b1fa2 !important; }
.index-intro-overlay .index-intro-start-letters > span[data-kiki-color="#d81b60"] { color: #d81b60 !important; -webkit-text-fill-color: #d81b60 !important; }

.index-intro-main-content[hidden] {
    display: none !important;
}

.index-intro-overlay.index-intro--visible {
    opacity: 1;
}

.index-intro-overlay.index-intro--fadeout {
    opacity: 0 !important;
    transition: opacity 0.6s ease;
}

.index-intro-text-inner {
    text-align: center;
    max-width: min(96vw, 42rem);
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

/* Intro: Video über „Herzlich Willkommen“ — abgerundet, weiches Ausblenden an den Rändern */
.index-intro-video-wrap {
    position: relative;
    width: 100%;
    max-width: min(92vw, 520px);
    margin: 0 auto 8px;
    border-radius: 20px;
    overflow: hidden;
    line-height: 0;
    align-self: center;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
}

/* Hell: Rand wie Seitenhintergrund (var(--bg-primary) = reset.css body); Dunkel: schwarze Vignette */
.index-intro-video-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
    background: var(--bg-primary);
    mask-image: radial-gradient(ellipse 82% 78% at 50% 50%, transparent 34%, #000 100%);
    -webkit-mask-image: radial-gradient(ellipse 82% 78% at 50% 50%, transparent 34%, #000 100%);
}

html.dark-mode .index-intro-video-wrap::after,
body.dark-mode .index-intro-video-wrap::after {
    background: transparent;
    mask-image: none;
    -webkit-mask-image: none;
    box-shadow:
        inset 0 0 32px 18px rgba(0, 0, 0, 0.92),
        inset 0 0 72px 36px rgba(0, 0, 0, 0.45);
}

.index-intro-video {
    display: block;
    width: 100%;
    max-height: min(38vh, 320px);
    height: auto;
    vertical-align: bottom;
    background: #000;
    object-fit: contain;
}

html:not(.dark-mode) .index-intro-video,
body:not(.dark-mode) .index-intro-video {
    background: var(--bg-primary);
}

@media (min-width: 769px) {
    .index-intro-video-wrap {
        max-width: min(92vw, 720px);
    }
    .index-intro-video {
        max-height: min(48vh, 440px);
    }
}

@media (min-width: 1024px) {
    .index-intro-video-wrap {
        max-width: min(90vw, 880px);
    }
    .index-intro-video {
        max-height: min(52vh, 520px);
    }
}

@media (min-width: 1400px) {
    .index-intro-video-wrap {
        max-width: min(88vw, 1000px);
    }
    .index-intro-video {
        max-height: min(55vh, 600px);
    }
}

@media (max-width: 480px) {
    .index-intro-video-wrap {
        border-radius: 16px;
        max-width: min(94vw, 100%);
        margin-bottom: 6px;
    }
}

.index-intro-welcome {
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(0.85rem, 2.4vw, 1.05rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgba(148, 163, 184, 0.95);
    margin: 0;
    line-height: 1.4;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}

/* Intro-Hauptzeile: wie Header — KI_KU-Logo + ki-kunterbunt (farbige Buchstaben), danach Tagline-Gradient */
.index-intro-title {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    margin: 0;
    padding-top: 10px;
    line-height: 1.25;
    letter-spacing: -0.03em;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.index-intro-title-brand-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: min(96vw, 42rem);
}

.index-intro-overlay .index-intro-kiku-logo-wrap {
    flex-shrink: 0;
    line-height: 0;
    pointer-events: none;
}

.index-intro-overlay .index-intro-kiku-logo {
    height: clamp(34px, 9vw, 42px);
    width: auto;
    max-width: min(148px, 38vw);
    object-fit: contain;
    display: block;
    filter: drop-shadow(0.5px 0.5px 0 rgba(0, 0, 0, 0.22));
}

.index-intro-overlay .index-intro-kikunterbunt.kikirika-header-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(1.25rem, 3.8vw, 2rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.5px;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    pointer-events: none;
    min-height: 0;
}

.index-intro-overlay .index-intro-kikunterbunt.kikirika-header-title > span[data-kiki-color] {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-shadow: 0.5px 0.5px 0 rgba(0, 0, 0, 0.28);
    -webkit-text-stroke: 0.6px rgba(0, 0, 0, 0.18);
}

.index-intro-overlay .index-intro-kikunterbunt > span[data-kiki-color="#e91e63"] { color: #e91e63 !important; -webkit-text-fill-color: #e91e63 !important; }
.index-intro-overlay .index-intro-kikunterbunt > span[data-kiki-color="#ff4f8b"] { color: #ff4f8b !important; -webkit-text-fill-color: #ff4f8b !important; }
.index-intro-overlay .index-intro-kikunterbunt > span[data-kiki-color="#ffc107"] { color: #ffc107 !important; -webkit-text-fill-color: #ffc107 !important; }
.index-intro-overlay .index-intro-kikunterbunt > span[data-kiki-color="#00a896"] { color: #00a896 !important; -webkit-text-fill-color: #00a896 !important; }
.index-intro-overlay .index-intro-kikunterbunt > span[data-kiki-color="#008fa3"] { color: #008fa3 !important; -webkit-text-fill-color: #008fa3 !important; }
.index-intro-overlay .index-intro-kikunterbunt > span[data-kiki-color="#2a7de1"] { color: #2a7de1 !important; -webkit-text-fill-color: #2a7de1 !important; }
.index-intro-overlay .index-intro-kikunterbunt > span[data-kiki-color="#3f51b5"] { color: #3f51b5 !important; -webkit-text-fill-color: #3f51b5 !important; }
.index-intro-overlay .index-intro-kikunterbunt > span[data-kiki-color="#5e35b1"] { color: #5e35b1 !important; -webkit-text-fill-color: #5e35b1 !important; }
.index-intro-overlay .index-intro-kikunterbunt > span[data-kiki-color="#7b1fa2"] { color: #7b1fa2 !important; -webkit-text-fill-color: #7b1fa2 !important; }
.index-intro-overlay .index-intro-kikunterbunt > span[data-kiki-color="#d81b60"] { color: #d81b60 !important; -webkit-text-fill-color: #d81b60 !important; }
.index-intro-overlay .index-intro-kikunterbunt > span[data-kiki-color="#1e88e5"] { color: #1e88e5 !important; -webkit-text-fill-color: #1e88e5 !important; }
.index-intro-overlay .index-intro-kikunterbunt > span[data-kiki-color="#009688"] { color: #009688 !important; -webkit-text-fill-color: #009688 !important; }
.index-intro-overlay .index-intro-kikunterbunt > span[data-kiki-color="#3949ab"] { color: #3949ab !important; -webkit-text-fill-color: #3949ab !important; }

.index-intro-title-continuation {
    display: block;
    font-size: clamp(1.2rem, 3.4vw, 1.85rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.03em;
    background: linear-gradient(120deg, #22d3ee 0%, #818cf8 40%, #f97316 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    max-width: min(96vw, 42rem);
}

.index-intro-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(0.85rem, 2.5vw, 1rem);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
    padding-top: 8px;
    line-height: 1.45;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

html:not(.dark-mode) .index-intro-welcome,
body:not(.dark-mode) .index-intro-welcome {
    color: rgba(71, 85, 105, 0.95);
    text-shadow: none;
}

html:not(.dark-mode) .index-intro-sub,
body:not(.dark-mode) .index-intro-sub {
    color: rgba(30, 41, 59, 0.92);
    text-shadow: none;
}

.index-intro-skip-btn {
    position: fixed;
    z-index: 10060;
    right: max(10px, env(safe-area-inset-right, 0px));
    /* Größere Viewports: unter Top-Header/Menüband (52px war optisch zu weit oben); Mobil bleibt eigene Regel */
    top: calc(env(safe-area-inset-top, 0px) + 96px);
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 50%;
    font-size: 1.65rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.92);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
    transition: background 0.2s ease, transform 0.15s ease;
}

.index-intro-skip-btn:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: scale(1.05);
}

html:not(.dark-mode) .index-intro-skip-btn,
body:not(.dark-mode) .index-intro-skip-btn {
    background: rgba(15, 23, 42, 0.08);
    color: rgba(15, 23, 42, 0.75);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

html:not(.dark-mode) .index-intro-skip-btn:hover,
body:not(.dark-mode) .index-intro-skip-btn:hover {
    background: rgba(15, 23, 42, 0.14);
}

@media (max-width: 480px) {
    .index-intro-skip-btn {
        top: calc(env(safe-area-inset-top, 0px) + 118px);
    }
}

/* Kleines Ele-Logo: unteres Drittel, nach Intro-Video wenn KIKI sichtbar (index-intro-kiki-only) */
.index-ele-logo-wrap {
    position: fixed;
    left: 50%;
    bottom: clamp(72px, 18vh, 160px);
    transform: translateX(-50%);
    z-index: 2147483640;
    pointer-events: none;
    padding: 0;
    margin: 0;
}

.index-ele-logo-btn {
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 50%;
    -webkit-tap-highlight-color: transparent;
    animation: index-ele-logo-dance 1.25s ease-in-out infinite;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.35));
    transition: transform 0.15s ease, filter 0.15s ease;
}

.index-ele-logo-btn:hover {
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45));
}

.index-ele-logo-btn:focus-visible {
    outline: 2px solid rgba(129, 140, 248, 0.95);
    outline-offset: 4px;
}

.index-ele-logo-btn--playing {
    animation-duration: 0.85s;
}

/* Während Musik: Web-Audio steuert transform — CSS-Keyframes aus */
.index-ele-logo-btn.index-ele-logo-btn--beat-sync {
    animation: none;
    transition: filter 0.15s ease;
}

.index-ele-logo-img {
    display: block;
    width: clamp(56px, 14vw, 96px);
    height: auto;
    max-height: 22vh;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

@keyframes index-ele-logo-dance {
    0%,
    100% {
        transform: rotate(-6deg) scale(1);
    }
    25% {
        transform: rotate(7deg) scale(1.05);
    }
    50% {
        transform: rotate(-4deg) scale(1.02);
    }
    75% {
        transform: rotate(6deg) scale(1.06);
    }
}

@media (prefers-reduced-motion: reduce) {
    .index-ele-logo-btn {
        animation: none;
    }
    .index-ele-logo-btn--playing {
        animation: none;
    }
}