/* ══════════════════════════════════════════════════════════════════
   Geteiltes Fundament – von allen Seiten geladen.
   Seiten-spezifisches CSS steht weiterhin inline in der jeweiligen Seite,
   die Akzentfarbe kommt aus theme.css (überschreibt --accent).
   ══════════════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────────────── */
:root {
  --gray-bg:   #fafafa;
  --white:     #ffffff;
  --ink:       #1a1a1a;
  --ink-light: #999999;
  --accent:    oklch(62% 0.17 45);
  --max-w:     880px;
  --pad-x:     clamp(24px, 6vw, 88px);
  --nav-h:     48px;
  --hero-pad-top: clamp(32px, 5vh, 56px);
  --hero-pad-bot: clamp(36px, 6vh, 64px);
}

/* ── Reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
/* Seiten scrollen nur senkrecht: was seitlich übersteht (z. B. unsichtbare
   Bildzeilen auf der Wand), wird abgeschnitten statt iOS-Safari seitlich
   scrollen zu lassen. clip statt hidden → kein eigener Scroll-Container. */
html, body { overflow-x: clip; }
img  { display: block; }
button { cursor: pointer; background: none; border: none; padding: 0; }

body {
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  color: var(--ink);
  background: var(--gray-bg);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

/* ── Navigation (Layout – die Trennlinie definiert jede Seite selbst) ── */
#site-nav {
  position: fixed;
  overflow: visible;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  background: var(--gray-bg);
  z-index: 20;
  display: flex;
  align-items: center;
}
/* Trennlinie – startet eingerückt, wächst beim Scrollen auf volle Breite */
#site-nav::after {
  content: '';
  position: absolute;
  bottom: 0;
  left:  max(calc(var(--pad-x) - 5px), calc(50% - var(--max-w) / 2 + var(--pad-x) - 5px));
  right: max(calc(var(--pad-x) - 5px), calc(50% - var(--max-w) / 2 + var(--pad-x) - 5px));
  height: 1px;
  background: rgba(0,0,0,0.08);
  transition: left 0.4s ease, right 0.4s ease;
}
/* beim Scrollen: volle Breite UND etwas präsenter */
#site-nav.scrolled::after { left: 0; right: 0; background: rgba(0,0,0,0.13); }
.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-links { display: flex; gap: 24px; list-style: none; }
.nav-links a {
  display: inline-block;            /* damit die Shake-Transform greift (a ist sonst inline) */
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-light);
  text-decoration: none;
  transition: color 0.18s;
}
.nav-links a:hover  { color: var(--ink); }
.nav-links a.active { color: var(--ink); }   /* aktuelle Seite – dunkler */
.nav-links a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.nav-ig {
  color: var(--ink-light);
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: color 0.18s;
}
.nav-ig:hover { color: var(--ink); }

/* „Kopfschütteln" (macOS-Login-Style): Klick auf „Start", obwohl man schon
   ganz oben auf der Startseite ist (nichts zu scrollen). */
@keyframes nav-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-4px); }
  30% { transform: translateX(4px); }
  45% { transform: translateX(-3px); }
  60% { transform: translateX(3px); }
  75% { transform: translateX(-2px); }
  90% { transform: translateX(2px); }
}
.nav-links a.shake { animation: nav-shake 0.5s ease; }
@media (prefers-reduced-motion: reduce) {
  .nav-links a.shake { animation: none; }
}

/* ── Hero (Fancy-Seiten: scrollt mit; sanftes Ausfaden via hero-scroll.js) ── */
#hero {
  background: var(--gray-bg);
  display: flex;
  align-items: center;
  /* padding-top hält den Hero frei von der fixierten Navi */
  padding: calc(var(--nav-h) + var(--hero-pad-top)) 0 var(--hero-pad-bot);
}
.hero-inner {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}
.hero-text {
  font-family: 'Arvo', serif;
  font-weight: 400;             /* Arvo gibt es nur in 400/700 */
  font-size: clamp(26px, 4.2vw, 56px);   /* max. 56 px, sonst passt „ein gutes Bild zu machen.“ (Tagebuch) nicht in eine Zeile */
  line-height: 1.22;
  letter-spacing: -0.015em;
  word-spacing: 0.1em;          /* gleicht das enge Tracking aus – sonst klebt „Versuche,ein“ */
  color: var(--ink);
  text-wrap: balance;
}
.hero-sub {
  font-family: 'Arvo', serif;
  font-weight: 400;
  font-size: clamp(18px, 2.2vw, 29px);
  color: #aaa;
  letter-spacing: -0.01em;
  word-spacing: 0.08em;
  line-height: 1.4;
  margin-top: 16px;
  /* Auf ~Headline-Breite begrenzen, damit der Satz nicht über die volle
     Zeile ausfranst, sondern früher umbricht. em skaliert den Umbruch mit
     der responsiven Schriftgröße mit. */
  max-width: 22em;
  text-wrap: pretty;            /* kein einzelnes Wort allein in der letzten Zeile */
}
.ast { color: var(--accent); font-style: normal; }
.hero-sub .ast { margin-right: 0.25em; }   /* Fußnoten-Sternchen vor dem Untertitel */
/* Feste Umbrüche nur auf breiten Screens; auf dem Handy bricht der Text selbst um */
@media (max-width: 600px) { br.br-wide { display: none; } }

/* ── Footer ─────────────────────────────────────────────────────── */
footer {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 28px var(--pad-x) 40px;
  border-top: 1.5px solid var(--gray-bg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-light);
}
footer a { color: inherit; text-decoration: none; transition: color 0.18s; }
footer a:hover { color: var(--ink); text-decoration: none; }
/* Name/Copyright links in normaler Schreibweise – die Links rechts bleiben Großbuchstaben */
footer > span { text-transform: none; letter-spacing: 0; }
.footer-links { display: flex; gap: 20px; list-style: none; }