/* ==========================================================================
   zeitreiser.de – Gestaltung
   Schriften: siehe css/fonts.css (Dateien liegen in /fonts)
   Farben:  #0b0806 Fast-Schwarz · #f3e6c8 / #e6d6b4 Pergament-Hell
            #e8b86a Kerzengold (Akzent) · #c9a46a gedämpftes Gold
   clamp(MIN, BEVORZUGT, MAX) = Größe passt sich der Fensterbreite an.
   ========================================================================== */

html,body{margin:0;background:#0b0806;color:#efe2c6;-webkit-font-smoothing:antialiased}
a{color:#e8b86a;text-decoration:underline;text-underline-offset:3px}
a:hover{color:#efe2c6}

/* Gesamte Seite: Kopfzeile · Inhalt · Abstand unten */
.page{position:relative;min-height:100vh;display:grid;grid-template-rows:auto 1fr auto;overflow:hidden;background:#0b0806}

/* --- Hintergrundbild ----------------------------------------------------- */
.backdrop{position:absolute;inset:0}
/* background-position 0% 60% = Bildausschnitt (links / 60 % von oben).
   !! Bei Änderung auch den Wert 0.6 in js/main.js (Kerzenlicht) anpassen.
   fadein .7s  = Einblenden beim Laden
   scale(1.05) = feste leichte Vergrößerung (passt zum Kerzenlicht in js/main.js) */
.backdrop-img{position:absolute;inset:0;background:url(../img/zeitreiser-bg.jpg) 0% 60%/cover no-repeat;transform:scale(1.05);animation:fadein .7s ease-out both}

/* Zeichenfläche für das Kerzenlicht (wird von js/main.js bemalt) */
.candle{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* --- Dunkler Verlauf für Lesbarkeit -------------------------------------- */
/* 1. Zeile: von links nach rechts dunkler (hinter dem Text).
      Werte rgba(…, Deckkraft) Position – höhere Deckkraft = dunkler.
   2. Zeile: oben und unten dunkler (hinter Kopfzeile / Rand).             */
.scrim{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,rgba(11,8,6,0) 18%,rgba(11,8,6,.5) 38%,rgba(11,8,6,.66) 55%),
  linear-gradient(180deg,rgba(11,8,6,.72) 0%,rgba(11,8,6,.35) 38%,rgba(11,8,6,0) 60%,rgba(11,8,6,.55) 100%)}

/* --- Kopfzeile: "Zeitreiser.de" links, "Anno …" rechts ------------------- */
.top{position:relative;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:clamp(20px,3vw,32px) clamp(20px,5vw,64px);font-family:'IM Fell English SC',serif;font-size:14px;letter-spacing:.3em;color:#c9a46a}
.year{font-variant-numeric:tabular-nums}

/* --- Textblock ----------------------------------------------------------- */
/* justify-self:end = rechtsbündig im Fenster.
   max-width 540px  = Breite der Textspalte.
   margin-right     = ab 1100px Fensterbreite rückt der Text zur Mitte.
                      .2 = wie stark (größer = weiter Richtung Mitte).      */
.content{position:relative;justify-self:end;align-self:center;display:flex;flex-direction:column;gap:clamp(18px,2.4vw,26px);padding:clamp(28px,4vw,56px) clamp(20px,5vw,64px);max-width:540px;margin-right:max(0px,calc((100vw - 1100px)*.2));box-sizing:border-box}

/* Überschrift "Working on it. / Somehow." */
h1{margin:0;font-family:'IM Fell English',serif;font-weight:400;font-size:clamp(44px,7vw,92px);line-height:1;color:#f3e6c8;text-shadow:0 2px 24px rgba(0,0,0,.6)}
h1 .line{display:block}
h1 em{color:#e8b86a}
/* Verhindert Umbruch zwischen "on" und "it." → nur "Working / on it." möglich */
.nowrap{white-space:nowrap}

/* Zierlinie mit Raute unter der Überschrift */
.ornament{display:flex;align-items:center;gap:10px;transform-origin:left center}
.ornament i{width:56px;height:1px;background:#c9a46a}
.ornament b{width:6px;height:6px;background:#e8b86a;transform:rotate(45deg)}

/* Fließtext */
.text{display:flex;flex-direction:column;gap:12px;font-family:'Cormorant Garamond',serif;font-size:clamp(19px,2vw,22px);line-height:1.55;color:#e6d6b4;text-wrap:pretty;text-shadow:0 1px 12px rgba(0,0,0,.8)}
.text p{margin:0}
.text .accent{font-style:italic;color:#e8b86a} /* "Just not here." */

/* Abstand am unteren Rand */
.bottom{height:clamp(20px,3vw,32px)}

/* --- Animationen --------------------------------------------------------- */
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* Besucher mit "Bewegung reduzieren": kein Einblenden */
@media (prefers-reduced-motion:reduce){
  .backdrop-img{animation:none}
}