:root {
    /* EINSTELLUNGEN */
    --book-height-desktop: 95vh;  
    --page-min-height: 800px;       

    /* FARBEN */
    --paper-bg: #fbf9f1;
    --text-main: #222;
    --accent-red: #cc0000;
    --accent-green: #006600; /* Dunkelgrün für Akzente */
    --border-green: #48724a;      
    --border-line: #ccc;
    --mobile-note-bg: #e8e8e8;
}

body {
    background-color: #2b2b2b;
    margin: 0;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Titillium Web', sans-serif;
    overflow: hidden; 
}

/* --- BUCH RAHMEN --- */
.book-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 2500px;
    padding: 0; /* Kein Padding, da Pfeile jetzt am Viewport kleben */
    box-sizing: border-box;
    position: static; 
}

.book {
    height: var(--book-height-desktop); 
    border: 8px solid var(--border-green);
    background-color: var(--border-green); 
    border-radius: 6px;
    display: flex;
    position: relative;
    box-shadow: 0 30px 60px rgba(0,0,0,0.6);
    gap: 0; 
    transition: all 0.5s ease;
    align-items: stretch; 
}

/* MODI (Breiten) */
.book.mode-cover { width: 700px; max-width: 90vw; }
.book.mode-spread { width: 95vw; max-width: 1800px; }
@media (min-width: 1850px) { .book.mode-spread { width: 1800px; } }

.spine-shadow {
    position: absolute; left: 50%; top: 0; bottom: 0; width: 60px; margin-left: -30px;
    background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0) 100%);
    z-index: 20; pointer-events: none; display: none; 
}

/* --- SEITEN (Desktop) --- */
.page {
    height: 100%;
    overflow-y: auto;
    display: none; 
    box-sizing: border-box;
    background-color: var(--paper-bg);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.04'/%3E%3C/svg%3E");
    scrollbar-width: thin;
    scrollbar-color: #aaa transparent;
}

.book.mode-spread .page { width: 50%; min-width: 50%; border-right: 1px solid #ddd; }
.book.mode-spread .page:last-child { border-right: none; }
.book.mode-cover .page { width: 100%; border-right: 2px solid #ccc; }

.page-inner {
    padding: 50px 60px;
    min-height: var(--page-min-height);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.page::-webkit-scrollbar { width: 8px; }
.page::-webkit-scrollbar-track { background: transparent; }
.page::-webkit-scrollbar-thumb { background-color: #bbb; border-radius: 4px; border: 2px solid var(--paper-bg); }

.page.visible { display: block; animation: fadeIn 0.5s ease-out; }
.cover-view.visible { display: flex; flex-direction: column; }

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

.cover-view { width: 100%; border-right: 2px solid #ccc; text-align: center; }
.cover-view .page-inner { justify-content: center; align-items: center; min-height: 100%; height: 100%; }

/* --- GRID SYSTEM --- */

.content-row {
    display: grid;
    gap: 30px;
    margin-bottom: 0;
    padding-bottom: 30px;
    align-items: stretch;
}

/* LINKE SEITE -> Sidebar LINKS (Außen) */
.left-page-structure .content-row {
    grid-template-areas: "side line main";
    grid-template-columns: 0.9fr 5px 3.5fr; /* FIX: 5px Platz für die Linie */
}

/* RECHTE SEITE -> Sidebar RECHTS (Außen) */
.right-page-structure .content-row {
    grid-template-areas: "main line side";
    grid-template-columns: 3.5fr 5px 0.9fr; /* FIX: 5px Platz für die Linie */
}

.sidebar { grid-area: side; padding-top: 5px; }
.v-line  { grid-area: line; position: relative; }
.main    { grid-area: main; }

/* Standard-Linie (Dünn & Grau) */
.v-line-inner {
    width: 1px;
    background-color: var(--border-line);
    height: 100%;
    position: absolute; 
    left: 2px; /* Setzt die 1px Linie mittig im 5px Grid-Feld */
    top: 0;
}

/* --- TYPOGRAFIE & ELEMENTE --- */
h1 { font-weight: 700; font-size: 4rem; line-height: 1.1; margin: 0; color: var(--text-main); }
h2 { font-weight: 600; font-size: 2.2rem; margin-top: 0; border-bottom: 3px solid var(--text-main); padding-bottom: 8px; margin-bottom: 25px; }
h3 { font-weight: 600; font-size: 1.6rem; color: var(--accent-red); margin-top: 20px; margin-bottom: 10px; line-height: 1.2; }
h4 { font-weight: 700; font-size: 1.1rem; text-transform: uppercase; margin-top: 15px; margin-bottom: 5px; }
h5 { font-weight: 700; font-size: 1rem; color: var(--text-main); margin-top: 15px; margin-bottom: 5px; } 

p { font-size: 1.1rem; line-height: 1.6; text-align: justify; margin-bottom: 15px; margin-top: 0; }
ul { padding-left: 20px; margin-bottom: 15px; margin-top: 0; }
li { margin-bottom: 6px; font-size: 1.1rem; line-height: 1.4; text-align: justify; }

.side-note { font-size: 0.9rem; color: #444; line-height: 1.4; text-align: left; }
.side-icon { width: 32px; height: 32px; display: block; margin-bottom: 10px; color: #444; }
.side-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.page-footer { margin-top: auto; padding-top: 30px; width: 100%; display: flex; border-top: 1px solid #ddd; }
.left-num { justify-content: flex-start; }
.right-num { justify-content: flex-end; }
.page-num { font-weight: 700; font-size: 1rem; color: #666; }

/* Links */
a {
    color: var(--accent-red);
    text-decoration: none;
    font-weight: bold;
    border-bottom: 1px dotted var(--accent-red);
    transition: all 0.2s;
}
a:hover {
    background-color: rgba(204, 0, 0, 0.1);
    border-bottom: 1px solid var(--accent-red);
}

/* Boxen */
.box-frame { border: 2px solid var(--text-main); padding: 25px 20px 15px 20px; margin: 20px 0; position: relative; background: rgba(255,255,255,0.5); }
.box-title { position: absolute; top: -12px; left: 15px; background: var(--paper-bg); padding: 0 8px; font-weight: 700; text-transform: uppercase; font-size: 0.85rem; }
.aha-box { background-color: #fff9db; border-left: 5px solid #f1c40f; padding: 15px; margin: 15px 0; border-radius: 4px; }
.team-wrapper { display: flex; gap: 10px; margin: 15px 0; }
.team-card { flex: 1; padding: 15px; border-radius: 6px; color: #fff; font-size: 0.9rem; }
.team-blue { background-color: #2980b9; }
.team-yellow { background-color: #f39c12; color: #222; }
.formula { font-family: 'Courier New', monospace; background: #f4f4f4; padding: 10px; text-align: center; border: 1px dashed #999; margin: 10px 0; font-weight: bold; }

/* --- NAVIGATION FIX (Viewport-Positionierung) --- */
.nav-btn { 
    position: fixed; /* FIX: Fixiert am Fenster (Viewport) */
    top: 50%; 
    transform: translateY(-50%);
    width: 60px; 
    height: 100px; 
    background: rgba(72, 114, 74, 0.9);
    border: none; 
    font-size: 2.5rem; 
    cursor: pointer; 
    z-index: 1000; 
    color: #fff;
    transition: opacity 0.3s; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.prev-btn { left: 20px; border-radius: 8px; }
.next-btn { right: 20px; border-radius: 8px; }


/* --- DESIGN FÜR AUFGABEN --- */

/* 1. GRÜNE LINIE AUF DER TRENNKANTE */

/* Der Hauptcontainer der Aufgaben-Row */
.exercise-block-wrapper {
    /* Deaktiviert die unnötigen äußeren Ränder */
    border-left: none !important;
    padding-left: 0 !important; 
    margin-left: 0 !important;
}

/* Linien-Override: Nur für Übungsblöcke */
.exercise-block-wrapper .v-line-inner {
    width: 5px; /* Dicke Linie */
    background-color: var(--accent-green);
    left: 0; /* Setzt die Linie bündig an den Rand des 5px Grid-Feldes */
}

/* Grüne Überschrift */
.exercise-heading {
    color: var(--accent-green) !important;
    border-bottom: 2px solid var(--accent-green) !important;
    margin-bottom: 20px !important;
    padding-bottom: 5px;
}

/* Einzelne Übungszeile */
.exercise-item {
    background: #fff;
    border: 1px solid #ddd;
    border-left: 4px solid var(--accent-green);
    padding: 10px 15px;
    margin-bottom: 8px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ex-top {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    color: var(--text-main);
}

.ex-bottom {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 36px;
    font-size: 0.95rem;
}

.ex-arrow { color: #ccc; }

.ex-solution {
    background: #eee;
    color: transparent; /* Text verstecken */
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s;
    text-shadow: 0 0 8px rgba(0,0,0,0.1);
}

.ex-solution:hover {
    background: #e0e0e0;
}

.ex-solution.revealed {
    color: var(--accent-red);
    text-shadow: none;
    background: rgba(204, 0, 0, 0.05);
}

.ex-info {
    color: #888;
    font-size: 0.85rem;
    font-style: italic;
}

/* [MEDIA QUERIES] bleiben gleich */
@media (max-width: 1400px) {
    body { overflow-y: auto; height: auto; display: block; background-color: #222; }
    .book { height: auto !important; width: 100% !important; max-width: 900px !important; margin: 0 auto; aspect-ratio: auto !important; flex-direction: column; display: block; border-width: 0; background-color: transparent; box-shadow: none; }
    .spine-shadow { display: none !important; }
    .page { width: 100% !important; height: auto !important; display: block !important; border-bottom: 8px solid var(--border-green); padding: 0; overflow: visible; margin-bottom: 20px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
    .page-inner { min-height: auto; padding: 40px 30px; }
    .right-page-structure .content-row, .left-page-structure .content-row { grid-template-areas: "side line main" !important; grid-template-columns: 1fr 1px 3.5fr !important; }
    .page-footer { justify-content: flex-end; padding: 20px 0 0 0; }
    .nav-btn { position: relative; display: none; }
    .cover-view { width: 100%; border: none; box-shadow: 0 5px 15px rgba(0,0,0,0.2); min-height: 80vh; padding: 40px 20px; margin-bottom: 20px; background-color: var(--paper-bg); }
    .cover-view .page-inner { padding: 40px 20px; }
    .vocab-grid { grid-template-columns: repeat(2, 1fr); }
    /* Mobile Sidebar */
    .sidebar { background-color: var(--mobile-note-bg); padding: 15px; border-radius: 6px; margin-bottom: 10px; border-left: 5px solid #888; display: flex; align-items: center; gap: 15px; width: 100%; box-sizing: border-box; }
    .sidebar:empty { display: none; }
    /* Mobile Übungsbalken entfernen */
    .exercise-block-wrapper { border-left: none; padding-left: 0; margin-left: 0;}
}

/* MOBILE (< 700px) */
@media (max-width: 700px) {
    .content-row, .right-page-structure .content-row, .left-page-structure .content-row { display: flex; flex-direction: column; gap: 5px; padding-bottom: 25px; }
    .v-line { display: none; }
    .side-icon { margin-bottom: 0; width: 24px; height: 24px; flex-shrink: 0; }
    .side-note { font-size: 0.95rem; margin: 0; font-weight: 600; color: #333; }
    .page-inner { padding: 25px 15px; }
    h1 { font-size: 2.5rem; }
    h2 { font-size: 1.8rem; }
    .vocab-grid { grid-template-columns: 1fr; }
}