:root {
    /* -- GOTHIC PALETTE -- */
    --void-black: #050505;
    --blood-red: #8a0303;     /* Getrocknetes Blut */
    --bright-blood: #bd0404;  /* Frisches Blut (Hover) */
    --old-paper: #dcd0b8;     /* Pergament Basis */
    --paper-shadow: #bba988;  /* Pergament dunkel */
    --leather-brown: #5c4a35; /* Rahmen & Linien */
    --ink-black: #1a1a1a;     /* Text auf Papier */
}

/* --- NEUER HINTERGRUND: DUNKLER MARMOR/STEIN --- */
#bg-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;   /* Geändert von -2 auf -1, sicher ist sicher */
    
    /* Basis-Farbe (Dunkelgrau statt Schwarz) */
    background-color: #2a2a2a; 

    /* Marmor-Effekt */
    background-image: 
        radial-gradient(circle at center, transparent 0%, #000 100%),
        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.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.4' style='mix-blend-mode: soft-light;'/%3E%3C/svg%3E");
    
    background-repeat: no-repeat, repeat;
    background-size: cover, 200px 200px;
}

/* GRUNDGERÜST */
body, html {
    margin: 0; padding: 0;
    font-family: 'Crimson Text', serif; /* Buch-Schrift */
    background-color: transparent;
    color: var(--old-paper);
    overflow-x: hidden;
}

/* TYPOGRAFIE */
h1, h2, h3 {
    font-family: 'UnifrakturMaguntia', cursive; /* Gothic Schrift */
    font-weight: 400;
    text-transform: none; /* Fraktur braucht Groß/Klein um gut auszusehen */
    margin: 0;
    letter-spacing: 1px;
}
h1 { font-size: 3rem; color: var(--blood-red); }
h2 { font-size: 2.5rem; color: var(--ink-black); margin-bottom: 20px; text-align: center; border-bottom: 2px solid var(--leather-brown); display: inline-block; padding: 0 20px 10px 20px;}
h3 { color: var(--blood-red); }

/* SECTIONS & LAYOUT */
section { min-height: 80vh; display: flex; align-items: center; justify-content: center; padding: 80px 0; }
.container { max-width: 1000px; margin: 0 auto; padding: 0 20px; }

/* --- PERGAMENT LOOK --- */
.content-box { 
    background-color: var(--old-paper);
    /* Subtiler Noise/Flecken Effekt via Gradient */
    background-image: linear-gradient(to bottom right, rgba(0,0,0,0.05), rgba(0,0,0,0.1));
    color: var(--ink-black);
    padding: 60px; 
    width: 100%; 
    
    /* Der Rand sieht aus wie doppeltes Leder oder Holz */
    border: 4px double var(--leather-brown);
    box-shadow: 
        0 0 50px rgba(0,0,0,0.9), /* Schatten außen */
        inset 0 0 80px rgba(100, 70, 40, 0.2); /* Gilb innen */
    
    position: relative;
}

/* Dekorative Ecken (Optional) */
.content-box::after {
    content: ''; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px;
    border: 1px solid var(--leather-brown);
    opacity: 0.5;
    pointer-events: none;
}

.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; }

@media (max-width: 768px) {
    .split-grid { grid-template-columns: 1fr; text-align: center; }
    .content-box { padding: 30px; }
}

/* --- UI ELEMENTE --- */

/* Bilderrahmen */
.image-placeholder img, .cover-small img {
    border: 1px solid var(--leather-brown);
}

/* Karten */
.keyfacts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; }
.fact-card { 
    background: rgba(92, 74, 53, 0.1); 
    border: 1px solid var(--leather-brown); 
    padding: 15px; 
    text-align: center;
    transition: transform 0.3s;
}
.fact-card:hover { transform: translateY(-5px); background: rgba(138, 3, 3, 0.05); }
.fact-card h3 { font-size: 1.4rem; border-bottom: 1px solid var(--blood-red); margin-bottom: 10px; display: inline-block;}

/* Buttons (Blutrot) */
.btn { 
    display: inline-block; padding: 12px 30px; margin: 10px;
    background: var(--blood-red);
    color: var(--old-paper);
    text-decoration: none; 
    font-family: 'UnifrakturMaguntia', cursive; 
    font-size: 1.2rem;
    border: 1px solid #330000;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    transition: all 0.3s; 
}
.btn:hover { background: var(--bright-blood); transform: scale(1.05); color: #fff; }
.btn.disabled { background: #555; cursor: not-allowed; opacity: 0.7; }

/* Galerie */
.bookshelf { display: flex; flex-wrap: wrap; gap: 30px; justify-content: center; }
.book-item { cursor: pointer; transition: transform 0.3s; text-align: center; width: 200px;}
.book-item:hover { transform: scale(1.05); filter: brightness(1.1); }
.cover-small { width: 100%; height: 150px; background: #000; overflow: hidden; border: 2px solid var(--leather-brown); }

/* --- MODAL --- */
.overlay-content {
    background: #111; /* Dunkel im Overlay, damit Bild wirkt */
    padding: 40px;
    max-width: 900px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    border: 1px solid var(--blood-red);
    box-shadow: 0 0 50px rgba(138, 3, 3, 0.3);
    text-align: center;
}
.close-btn:hover { color: #fff; text-shadow: 0 0 10px var(--blood-red); }

/* Links im Footer */
.legal-link { color: var(--ink-black); text-decoration: none; text-transform: uppercase; font-size: 0.8rem; font-weight: bold; margin: 0 10px;}
.legal-link:hover { color: var(--blood-red); }

/* --- HERO LOGO STYLING --- */
.hero-logo {
    max-width: 800px; /* Maximale Breite */
    width: 100%;      /* Responsiv */
    height: auto;
    margin-bottom: 20px;
    /* MAGIE: Färbt das Logo blutrot und lässt es glühen */
    filter: sepia(1) hue-rotate(320deg) saturate(3) contrast(1.2) drop-shadow(0 0 20px rgba(138,3,3,0.4));
}

/* --- TRAILER VIDEO --- */
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Verhältnis (9 durch 16 = 0.5625) */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    border: 2px solid var(--leather-brown);
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}