/* =========================================================================
   base.css — Reset, Webfonts, Grundtypografie, Bewegungs-Guard
   ========================================================================= */

/* --- Lokale Webfonts (5 Dateien, 85 KB) ---------------------------------- */
@font-face { font-family:'Cinzel'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/fonts/cinzel-v26-latin-regular.woff2') format('woff2'); }
@font-face { font-family:'Cinzel'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/fonts/cinzel-v26-latin-700.woff2') format('woff2'); }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:300; font-display:swap;
  src:url('/fonts/montserrat-v31-latin-300.woff2') format('woff2'); }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/fonts/montserrat-v31-latin-regular.woff2') format('woff2'); }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:600; font-display:swap;
  src:url('/fonts/montserrat-v31-latin-600.woff2') format('woff2'); }

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; padding: 0; }

  /* scroll-behavior gehoert auf html, nicht in den *-Selektor (alter Fehler) */
  html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + var(--space-4));
    -webkit-text-size-adjust: 100%;
  }

  img, svg, video, canvas { display: block; max-width: 100%; }
  img, video { height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: none; cursor: pointer; }
  a { color: inherit; }
  ul[role='list'], ol[role='list'] { list-style: none; }
  :target { scroll-margin-top: calc(var(--header-h) + var(--space-4)); }
}

@layer base {
  body {
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-body);
    font-weight: 300;
    font-size: var(--step-0);
    line-height: var(--leading-body);
    min-height: 100svh;
    /* Deutsche Komposita wie "Verbraucherschlichtungsstelle" und lange URLs
       sprengen sonst auf schmalen Bildschirmen den Textblock. */
    overflow-wrap: break-word;
    /* Kein Custom-Cursor mehr: der alte Radial-Gradient-Cursor kostete
       Zeigepraezision und existierte auf Touch ohnehin nicht. */
  }

  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: var(--leading-tight);
    text-wrap: balance;
  }
  h1 { font-size: var(--step-4); }
  h2 { font-size: var(--step-3); }
  h3 { font-size: var(--step-2); }
  h4 { font-size: var(--step-1); }

  p, li, dd { max-width: var(--measure); text-wrap: pretty; hyphens: auto; }

  a {
    color: var(--action);
    text-decoration-color: rgb(var(--copper-rgb) / .4);
    text-underline-offset: .22em;
    text-decoration-thickness: 1px;
    transition: color var(--dur-fast) var(--ease-out),
                text-decoration-color var(--dur-fast) var(--ease-out);
  }
  a:hover { color: var(--action-hover); text-decoration-color: currentColor; }

  /* Ein sichtbarer Fokusring auf ALLEM, was Fokus bekommen kann.
     Vorher gab es gar keinen — das Runen-Raetsel war per Tastatur unloesbar. */
  :focus-visible {
    outline: 2px solid var(--copper-400);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
  }

  ::selection { background: rgb(var(--copper-rgb) / .35); color: var(--gold-100); }

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

  /* Sprunglink: erste Tab-Station jeder Seite */
  .skip-link {
    position: absolute; left: var(--space-4); top: var(--space-4);
    z-index: var(--z-modal);
    padding: var(--space-2) var(--space-4);
    background: var(--ink-700); color: var(--gold-100);
    border: var(--border-hair) solid var(--hairline-strong);
    transform: translateY(-200%);
    transition: transform var(--dur-fast) var(--ease-out);
  }
  .skip-link:focus-visible { transform: translateY(0); }
}

/* =========================================================================
   Der Bewegungs-Guard.
   -------------------------------------------------------------------------
   Die Seite bestand vorher praktisch nur aus Animation und hatte hierzu
   keine einzige Zeile. Fuer Menschen mit vestibulaerer Stoerung war sie
   damit unbenutzbar. Regel: jeder Effekt braucht einen ruhigen Endzustand,
   der denselben Inhalt zeigt.

   Zwei Wege fuehren hierher, und der ausdrueckliche schlaegt den impliziten:
     data-motion="aus"  -> immer ruhig, egal was das System sagt
     data-motion="an"   -> immer bewegt, auch wenn das System reduziert
     data-motion="auto" -> folgt der Systemeinstellung (Standard)
   Gesetzt wird das Attribut von js/bewegung.js, umgeschaltet im Fussbereich.
   ========================================================================= */
@layer base {
  /* Der ausdrueckliche Wunsch nach Ruhe. */
  :root[data-motion='aus'] *,
  :root[data-motion='aus'] *::before,
  :root[data-motion='aus'] *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  @layer base {
    /* Systemeinstellung — greift nur, solange sie nicht ueberschrieben ist. */
    :root:not([data-motion='an']) *,
    :root:not([data-motion='an']) *::before,
    :root:not([data-motion='an']) *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* =========================================================================
   Seitenuebergaenge.
   Ersetzt transition.js (48 Zeilen JS), das nur `nav a` abgefangen hat und
   deshalb bei Footer-Links, Logo und Hero-CTA gar nicht griff. Diese drei
   Zeilen gelten fuer JEDEN Seitenwechsel, auch fuer Zurueck und Vorwaerts.
   ========================================================================= */
@view-transition { navigation: auto; }

@layer base {
  ::view-transition-old(root) { animation: vt-raus 180ms var(--ease-in-out) both; }
  ::view-transition-new(root) { animation: vt-rein 260ms var(--ease-out) both; }

  /* Der Kopf bleibt beim Wechsel stehen, statt mitzublenden. */
  .site-header { view-transition-name: kopf; }
}

@keyframes vt-raus { to { opacity: 0; } }
@keyframes vt-rein { from { opacity: 0; transform: translateY(6px); } }

@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion='an'])::view-transition-old(root),
  :root:not([data-motion='an'])::view-transition-new(root) { animation: none; }
}
:root[data-motion='aus']::view-transition-old(root),
:root[data-motion='aus']::view-transition-new(root) { animation: none; }