/* ==========================================================================
   code13.eu – zentrales Stylesheet
   Gilt für die Startseite (Schreibtisch-Szene) und die Pergament-Unterseiten.
   Die Schriften werden im HTML per <link> geladen (schneller als @import).
   ========================================================================== */

/* ---------- Basis ---------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    margin: 0;
    min-height: 100%;
    background-color: #0a0e14;
    font-family: 'EB Garamond', Garamond, Georgia, serif;
    color: #e0c097;
}

/* ==========================================================================
   Startseite: Die Schreibtisch-Szene
   ========================================================================== */

body.scene-body {
    height: 100vh;  /* Fallback für ältere Browser */
    height: 100svh; /* berücksichtigt mobile Adressleisten */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* Die Szene passt sich IMMER komplett in den Viewport ein:
   Bild-Seitenverhältnis ist 3:2, also Breite = min(Fensterbreite, 1,5 × Fensterhöhe).
   max-width begrenzt das Hochskalieren, damit das Bild auf 4K/8K scharf bleibt. */
.main-scene {
    position: relative;
    width: min(100vw, 150vh);
    width: min(100vw, 150svh);
    max-width: 2304px;
    aspect-ratio: 3 / 2;
}

.bg-image {
    width: 100%;
    height: auto;
    display: block;
}

/* ---------- Hotspots (klickbare Bereiche) ---------- */

.hotspot {
    position: absolute;
    text-decoration: none;
    cursor: pointer;
    border-radius: 6px;
    transition: transform 0.3s ease;
    z-index: 10;
}

/* Beschriftung, die bei Hover/Tastaturfokus erscheint:
   eine Holzplanke (aus button-planken.png freigestellt, Weiß → Alpha,
   dadurch weiche halbtransparente Schattenränder). Die Grafik wird auf
   die Textbreite gedehnt; das Padding hält den Text von den Nägeln fern. */
.hotspot::after {
    content: attr(data-label);
    position: absolute;
    bottom: -3.5em;
    left: 50%;
    transform: translateX(-50%);
    background: url("label-planke.png") center / 100% 100% no-repeat;
    color: #f2e8c9;
    padding: 0.85em 1.9em;
    font-size: clamp(0.75rem, 1.1vw, 1.15rem);
    font-weight: 600;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: 20;
}

.hotspot:hover::after,
.hotspot:focus-visible::after {
    opacity: 1;
}

/* Sichtbarer Fokusring für Tastatur-Nutzer */
.hotspot:focus-visible {
    outline: 2px solid #e0c097;
    outline-offset: 2px;
}

/* ---------- Positionen (in % relativ zur Szene) ----------
   Die Werte sind am Originalbild (1536 × 1024) ausgemessen:
   Gemälde-Hotspots decken das Bild samt Rahmen ab. */

.picture-left  { top: 2.7%; left: 9.7%;  width: 27.6%; height: 55.6%; }
.picture-right { top: 4.9%; right: 13.3%; width: 24.1%; height: 53.9%; }

.dial {
    top: 9.2%;
    left: 41.5%;
    width: 17%;
    aspect-ratio: 1;
    border-radius: 50%;
}

/* Die Bücher im Regal */
.book   { width: 4%; height: 35%; top: 42%; }
.book-1 { left: 40%; }
.book-2 { left: 44%; }
.book-3 { left: 48%; }
.book-4 { left: 52%; }
.book-5 { left: 56%; }

.book:hover,
.book:focus-visible {
    transform: translateY(-6%) rotate(-4deg);
}

.imprint {
    top: 78.9%;
    left: 29.3%;
    width: 39%;
    height: 9.9%;
}

/* ---------- Kerzenschein ---------- */

.candle {
    position: absolute;
    width: 2%;
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(255, 180, 50, 0.6) 0%, rgba(255, 100, 0, 0) 70%);
    border-radius: 50%;
    filter: blur(clamp(3px, 0.4vw, 10px));
    animation: flicker 0.15s infinite alternate;
    pointer-events: none;
}

.candle-1 { top: 55%; left: 22%; }
.candle-2 { top: 62%; right: 24%; }

@keyframes flicker {
    0%   { opacity: 0.8; transform: scale(1); }
    100% { opacity: 1;   transform: scale(1.2); }
}

/* Nutzer, die Animationen reduziert haben möchten */
@media (prefers-reduced-motion: reduce) {
    .candle {
        animation: none;
    }
    .hotspot,
    .hotspot::after {
        transition: none;
    }
    .book:hover,
    .book:focus-visible {
        transform: none;
    }
}

/* ==========================================================================
   Unterseiten im Pergament-Stil
   (monkey-island, downloads, kuriositaeten, annalen, verzweigungen …)
   ========================================================================== */

body.subpage-body {
    background: #05070a;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: clamp(16px, 4vw, 48px) clamp(12px, 3vw, 24px);
}

.parchment-container {
    background-color: #f2e8c9;
    /* Papier-Anmutung ohne externe Textur-Datei */
    background-image:
        radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.25) 0%, transparent 70%),
        repeating-linear-gradient(0deg,
            rgba(139, 69, 19, 0.03) 0px, rgba(139, 69, 19, 0.03) 1px,
            transparent 1px, transparent 4px);
    color: #2c1e14;
    max-width: 800px;
    width: 100%;
    padding: clamp(28px, 6vw, 64px);
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8), inset 0 0 100px rgba(139, 69, 19, 0.25);
    border: 1px solid #d2b48c;
    position: relative;
    min-height: 60vh;
}

/* Leichter Schatten-Effekt an den Rändern */
.parchment-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.1);
}

.parchment-header h1 {
    font-family: 'EB Garamond', Garamond, Georgia, serif;
    font-size: clamp(1.7rem, 4.5vw, 2.5rem);
    text-align: center;
    margin: 0 0 10px;
    border-bottom: 1px solid rgba(44, 30, 20, 0.2);
    padding-bottom: 0.3em;
}

.ornament {
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 30px;
    color: #8b4513;
}

.parchment-content p {
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    line-height: 1.8;
    margin: 0 0 20px;
    text-align: justify;
    hyphens: auto;
}

.parchment-content ul {
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    line-height: 1.8;
    padding-left: 1.4em;
}

.parchment-content li {
    margin-bottom: 0.6em;
}

.parchment-content a {
    color: #8b4513;
    text-decoration: underline;
}

.parchment-content a:hover,
.parchment-content a:focus-visible {
    color: #d4af37;
}

.parchment-footer {
    margin-top: 50px;
    text-align: center;
}

.back-link {
    color: #8b4513;
    text-decoration: none;
    font-weight: bold;
    font-style: italic;
    transition: color 0.3s;
}

.back-link:hover,
.back-link:focus-visible {
    color: #d4af37;
}

/* Nur für Screenreader sichtbar */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}