/* ==========================================================================================
   🛑 CSS STYLESHEET (DESIGN & LAYOUT) 🛑
   ========================================================================================== */

/* --- 1. SCHRIFTARTEN (FONTS) --- */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 200; /* Extra Light als Basis für alles */
    font-display: swap; 
    src: url('fonts/montserrat-200.woff2') format('woff2');
}

@font-face {
    font-family: 'Crimson Pro';
    font-style: normal;
    font-weight: 700; /* Bold für die Hover/Akzent-Schrift */
    font-display: swap; 
    src: url('fonts/crimson-pro-700.woff2') format('woff2');
}

/* --- 2. ANTI-VERZERRUNG & GRUND-LAYOUT --- */
:root {
    --real-book-width: 100vw;
    --real-book-height: 100vh;
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif; 
    font-weight: 200; /* Alles ist standardmäßig Extra Light */
    letter-spacing: normal !important; 
    font-stretch: normal !important;
    
    /* 🔥 FIX: Entfernt die störende blaue Touch-Highlight-Box auf mobilen Geräten! */
    -webkit-tap-highlight-color: transparent; 
}

html, body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    touch-action: pan-x pan-y pinch-zoom !important; 
}

body {
    background-color: #ffffff;
    overflow: hidden; 
    color: #000;
    width: 100vw;
    height: 100vh;
    height: 100dvh; 
}

/* ==========================================================================
   🔥 HOVER-LOGIK FÜR ALLE TEXTE (CRIMSON PRO, GRÖSSENAUSGLEICH & FARBEN) 
   ========================================================================== */

/* Weiche Übergänge für alle Texte */
h1, h2, h3, a, button, .ui-btn, .menu-links, #loading .menu-links, span {
    transition: color 0.2s ease, font-size 0.2s ease;
}

/* TEIL A: SCHRIFTART & STÄRKE (Alles fokussierte wird Crimson Pro Bold) */
h1:hover, h1:active, h1:hover *, h1:active *,
h2:hover, h2:active, h2:hover *, h2:active *,
h3:hover, h3:active, h3:hover *, h3:active *,
a:hover, a:active, a:hover *, a:active *,
button:hover, button:active, button:hover *, button:active *,
#loading .menu-links:hover, #loading .menu-links:active,
[data-lang].active, [data-lang].active * {
    font-family: 'Crimson Pro', serif !important;
    font-weight: 700 !important;
}

/* TEIL B: GRÖSSEN-AUSGLEICH (STRIKT GETRENNT NACH BEREICHEN) */

/* 1. Buch-Menü: Standard-Ausgleich (+25% Größer) */
h1:hover, h1:active,
.menu-links a:hover, .menu-links a:active,
[data-lang].active,
#loading .menu-links:hover, #loading .menu-links:active,
.ui-btn:hover, .ui-btn:active {
    font-size: clamp(15px, calc(var(--real-book-height) * 0.05625), 27.5px) !important;
}

/* 2. Buch-Menü: EXTRA-GRÖSSE (+50%) für die kleinen 'x' Schließen-Buttons im Buch! */
#home-btn:hover, #home-btn:active,
.close-3d-btn:hover, .close-3d-btn:active {
    font-size: clamp(18px, calc(var(--real-book-height) * 0.0675), 33px) !important;
}

/* 3. Für Legal-Links (Mail & Impressum) */
.legal-links a:hover, .legal-links a:active {
    font-size: clamp(10px, calc(var(--real-book-height) * 0.03125), 13.75px) !important;
}

/* 4. Grid & Impressum (Fest auf 1.5rem Basis, wächst proportional) */
.grid-header h2:hover, .grid-header h2:active {
    font-size: 1.875rem !important; /* +25% vom 1.5rem Original */
}
.grid-header a:hover, .grid-header a:active {
    font-size: 2.25rem !important; /* +50% vom 1.5rem Original für das X */
}

/* TEIL C: FARB-LOGIK (Klickbare Links = Schwarz / Nicht klickbar = Grau) */

/* 1. Links & Startseiten-Titel (Klickbar) -> SCHWARZ */
h1:hover, h1:active,
.menu-links a:hover, .menu-links a:active, .menu-links a.active,
.legal-links a:hover, .legal-links a:active,
.ui-btn:hover, .ui-btn:active,
.grid-header a:hover, .grid-header a:active {
    color: #000 !important;
}

/* 2. Unterseiten-Titel & Lade-Text (Nicht klickbar) -> GRAU (Behalten blasse, edle Farbe) */
h2:hover, h2:active, h2:hover *, h2:active *,
h3:hover, h3:active, h3:hover *, h3:active *,
.grid-header h2:hover, .grid-header h2:active,
#loading .menu-links:hover, #loading .menu-links:active {
    color: #a0a0a0 !important;
    cursor: default; 
}

/* ========================================================================== */

/* --- 3. STRUKTUR DER BUCH-ANSICHT --- */
#book-view {
    position: relative;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
}

#menu-positioner, #ui-layer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--real-book-width, 100vw);
    height: var(--real-book-height, 100vh);
    pointer-events: none; 
}

#menu-positioner { z-index: 3; visibility: hidden; }
#ui-layer { z-index: 100; } 

/* --- 4. ASYMMETRISCHE UI-BUTTONS (Home & Vollbild) --- */
.ui-btn {
    position: absolute;
    /* Feste Box-Größen verhindern, dass die Buttons beim Hover springen! */
    width: 60px;  
    height: 60px; 
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center; 
    white-space: nowrap;
    color: #888;
    text-decoration: none;
    font-weight: 200;
    font-size: clamp(12px, calc(var(--real-book-height) * 0.045), 22px);
    opacity: 0;
    pointer-events: none; 
}

#home-btn { top: clamp(8px, calc(var(--real-book-height) * 0.035), 20px); right: clamp(8px, calc(var(--real-book-height) * 0.035), 20px); left: auto; }
#fullscreen-btn { bottom: clamp(8px, calc(var(--real-book-height) * 0.035), 20px); left: clamp(8px, calc(var(--real-book-height) * 0.035), 20px); right: auto; }

body.fit-width #home-btn { top: -4rem; right: 0; left: auto; }
body.fit-width #fullscreen-btn { bottom: -4rem; left: 0; right: auto; }

body.fit-height #home-btn { top: 10px; right: -4rem; left: auto; }
body.fit-height #fullscreen-btn { bottom: 10px; left: -4rem; right: auto; }

/* --- 5. MENÜ-DESIGN UND TYPOGRAFIE --- */
.static-menu, #end-of-book-menu {
    position: absolute;
    top: 0;
    width: 50%; 
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: auto; 
    transition: opacity 0.3s ease; 
}

.static-menu { left: 0; opacity: 1; }
#end-of-book-menu { right: 0; opacity: 0; }

.menu-wrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch; 
    padding: 0 10px;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
    /* 🔥 FIX: Der GAP erzwingt pixelgenau identische Abstände zwischen allen 3 Reihen! */
    gap: 0.4rem; 
}

h1 {
    font-size: clamp(12px, calc(var(--real-book-height) * 0.045), 22px); 
    font-weight: 200;
    text-align: center;
    white-space: nowrap; 
    margin: 0 !important; /* Wird nun durch den gap in .menu-wrapper geregelt */
    line-height: 1; 
    color: #a0a0a0; 
    cursor: pointer;
}

.menu-row {
    display: flex;
    justify-content: space-between; 
    align-items: center; 
    font-size: clamp(12px, calc(var(--real-book-height) * 0.045), 22px); 
    color: #888;
    margin: 0 !important; /* Wird nun durch den gap in .menu-wrapper geregelt */
    line-height: 1;
}

/* Klammern und Trennstriche sind geschützt und reagieren NICHT auf Hover */
.bracket { font-weight: 200; cursor: default; }

.menu-links { flex-grow: 1; text-align: center; padding: 0 0.6em; }
.menu-links a { color: #888; text-decoration: none; font-weight: 200; display: inline-block; }

.legal-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px; 
    margin-top: clamp(8px, calc(var(--real-book-height) * 0.04), 20px); 
    font-size: clamp(8px, calc(var(--real-book-height) * 0.025), 11px); 
}

.legal-links a { 
    color: #a0a0a0; 
    text-decoration: none; 
    font-weight: 200; 
    display: inline-block;
}

/* --- 6. 3D BUCH & LADESCREEN --- */
.flip-book-container, 
.flip-book-container *, 
.st-page-flip {
    touch-action: pan-x pan-y pinch-zoom !important;
}

.flip-book-container.zoomed-state { pointer-events: none !important; }

.flip-book-container {
    position: absolute;
    top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh;
    display: flex; justify-content: center; align-items: center;
    z-index: 2;
    opacity: 0; transition: opacity 0.5s ease;
}

#loading {
    position: absolute; 
    top: 50%; left: 50%; 
    transform: translate(-50%, -50%);
    width: 100%;
    z-index: 10;
    display: flex; 
    flex-direction: column; 
    align-items: center;
    cursor: pointer;
}

#loading a { color: #888; font-weight: 200; text-decoration: none; display: inline-block; }

.page { background-color: #ffffff; position: relative; }
.page img { width: 100%; height: 100%; object-fit: cover; box-shadow: inset 0 0 20px rgba(0,0,0,0.05); }

/* --- 7. UNTER-ANSICHTEN (Alle Projekte & Impressum) --- */
#grid-view, #legal-view {
    position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh;
    padding: 5vw; background: #fff; overflow-y: auto; z-index: 20;
}

.grid-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }

/* 🔥 FIX: Zurück auf originale 1.5rem Base-Größe! */
.grid-header h2 { 
    font-weight: 200; 
    font-size: 1.5rem !important; 
    cursor: default; 
    color: #a0a0a0; 
}

/* 🔥 FIX: Base-Größe auf 1.5rem plus feste Box für Anti-Wackeln */
.grid-header a { 
    color: #888; 
    text-decoration: none; 
    font-weight: 200; 
    font-size: 1.5rem !important; 
    display: flex; 
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
}

.grid-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; }
.book-tile { cursor: pointer; transition: transform 0.2s; }
.book-tile:hover { transform: scale(1.02); } 
.book-tile img { height: 300px; width: auto; object-fit: cover; background: #f0f0f0; box-shadow: 0 5px 15px rgba(0,0,0,0.1); display: block; }
.legal-content { max-width: 800px; margin: 0 auto; }
.legal-image { display: block; margin: 0 auto; max-width: 100%; height: auto; box-shadow: 0 5px 25px rgba(0,0,0,0.05); }

@media (max-width: 600px) {
    .book-tile img { height: 200px; }
}

/* --- 8. SEO & SCREENREADER (VERSTECKTER TEXT) --- */
.sr-only {
    position: absolute; 
    width: 1px; 
    height: 1px; 
    padding: 0; 
    margin: -1px;
    overflow: hidden; 
    clip: rect(0, 0, 0, 0); 
    white-space: nowrap; 
    border-width: 0;
}