/* ===================================================================
   Pfarrjugend Stadtbergen — Basis
   Tokens, Reset, Typografie, Layout-Grundgerüst.
   Bauteile stehen in bauteile.css.
   =================================================================== */

/* ------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------ */

:root {
  /* --- Farbe. Kontraste sind gerechnet, siehe DESIGN.md --- */
  --papier:      #F1ECE3;
  --papier-hoch: #F8F5EF;
  --papier-tief: #E4DCCD;
  --tanne:       #14472B;
  --tanne-tief:  #0D2E1C;
  --feuer:       #D97B3F;
  --feuer-tief:  #9C4715;
  --feuer-hell:  #E8A87C;
  --tinte:       #1D2419;
  --tinte-leise: #4E4A3F;
  --salbei:      #C9D6C4;
  --tape:        #DCCEB0;
  --rahmen:      #8B8177;
  --polaroid:    #F4EFE9;

  /* Rollen. Abschnitte auf Tanne überschreiben diese vier. */
  --grund:    var(--papier);
  --schrift:  var(--tinte);
  --leise:    var(--tinte-leise);
  --akzent:   var(--feuer-tief);
  /* Fokusring: Lagerfeuer erreicht auf Papier nur 2.6:1 und verfehlt die
     3:1 aus WCAG 1.4.11. Auf hellem Grund übernimmt deshalb der dunkle Ton. */
  --fokus:    var(--feuer-tief);

  /* --- Typografie --- */
  --f-kopf:  'Archivo', 'Segoe UI', system-ui, sans-serif;
  --f-text:  'Atkinson Hyperlegible Next', 'Segoe UI', system-ui, sans-serif;
  --f-hand:  'Caveat', 'Segoe Script', cursive;

  --t-display: clamp(2.5rem, 1.5rem + 5vw, 4.5rem);
  --t-h1:      clamp(2.25rem, 1.6rem + 3.2vw, 3.5rem);
  --t-h2:      clamp(1.75rem, 1.4rem + 1.75vw, 2.5rem);
  --t-h3:      clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --t-lead:    clamp(1.1875rem, 1.08rem + 0.55vw, 1.5rem);
  --t-body:    clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem);
  --t-klein:   0.9375rem;

  /* --- Abstände --- */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;    --s-10: 8rem;

  --sektion: clamp(3.5rem, 2rem + 7vw, 8rem);
  --rand:    clamp(1.25rem, 0.5rem + 3vw, 3rem);
  --breite:  min(100% - 2 * var(--rand), 1180px);
  --breite-text: 65ch;

  /* --- Ebenen --- */
  --z-boden: 0;
  --z-polaroid: 5;
  --z-erhoben: 10;
  --z-sticky: 100;
  --z-nav: 200;

  --z-menue-grund: 300;
  --z-menue: 400;
  --z-skiplink: 500;

  /* --- Bewegung --- */
  --ease-out-quart: cubic-bezier(.25, 1, .5, 1);
  --ease-out-expo:  cubic-bezier(.16, 1, .3, 1);
  --d-hover:   160ms;
  --d-zustand: 240ms;
  --d-eintritt: 420ms;
  --d-hero:    700ms;
}

/* ------------------------------------------------------------------
   2. Reset
   ------------------------------------------------------------------ */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Sticky-Kopf darf Sprungziele nicht verdecken */
  scroll-padding-top: 9rem;   /* Kopfzeile plus Info-Leiste, beide kleben oben */
}

body {
  background: var(--grund);
  color: var(--schrift);
  font-family: var(--f-text);
  font-size: var(--t-body);
  line-height: 1.65;
  min-height: 100svh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
}

img { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }

ul, ol { padding: 0; list-style: none; }

a { color: inherit; }

/* ------------------------------------------------------------------
   3. Typografie
   ------------------------------------------------------------------ */

h1, h2, h3, h4 {
  font-family: var(--f-kopf);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.06;
  text-wrap: balance;
  /* „Datenschutzerklärung" passt bei 320px in keine Zeile. Ohne Umbruch
     ragte das Wort aus dem Viewport und war nicht erreichbar. */
  overflow-wrap: break-word;

  /* Silbentrennung nur für wirklich lange Wörter.

     text-wrap: balance sucht die ausgewogenste Zeilenaufteilung – und nimmt
     dafür einen Trennstrich mitten im Wort in Kauf, wenn er die Zeilen
     gleichmäßiger macht. "Rückblick: Wilder Westen 2026" wurde so zu
     "Rückblick: Wil-" / "der Westen 2026", obwohl "Wilder" bequem in die
     erste Zeile gepasst hätte. Die Untergrenze von 14 Zeichen schließt
     kurze Wörter aus und lässt "Datenschutzerklärung" weiter trennen. */
  hyphens: auto;
  hyphenate-limit-chars: 14 6 4;
}

/* Kennt der Browser die Untergrenze nicht, darf er gar nicht trennen: sonst
   bliebe genau der Umbruch, den die Regel darüber verhindern soll. Sehr lange
   Wörter bricht overflow-wrap dann hart um – ohne Strich, aber im Fenster. */
@supports not (hyphenate-limit-chars: 14 6 4) {
  h1, h2, h3, h4 { hyphens: manual; }
}

h2, h3, h4 { letter-spacing: -0.02em; }

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); line-height: 1.12; }
h3 { font-size: var(--t-h3); font-weight: 700; line-height: 1.25; }
h4 { font-size: 1.125rem; font-weight: 700; line-height: 1.3; }

p, li { text-wrap: pretty; }

.lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--schrift);
}

.klein { font-size: var(--t-klein); }

.leise { color: var(--leise); }

/* Fließtext-Spalte: nur dort greift die Zeilenlängenbremse. */
.text { max-width: var(--breite-text); }
.text > * + * { margin-top: var(--s-4); }
.text h2 { margin-top: var(--s-7); }
.text h3 { margin-top: var(--s-6); }
.text h2:first-child, .text h3:first-child { margin-top: 0; }

.text ul { margin-top: var(--s-4); display: grid; gap: var(--s-2); }
.text ul li {
  padding-left: 1.6em;
  position: relative;
}
.text ul li::before {
  content: "";
  position: absolute;
  left: 0.15em;
  top: 0.68em;
  width: 0.55em;
  height: 0.55em;
  background: var(--akzent);
}

/* Textlinks: unterstrichen, weil Farbe allein kein Signal sein darf.
   Knoepfe sind ausgenommen: sie tragen Flaeche und Rahmen als Signal und
   holten sich hier sonst Lagerfeuer-Tief auf Lagerfeuer (2.2:1). */
.text a:not(.btn),
a.link {
  color: var(--akzent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--akzent) 45%, transparent);
  transition: text-decoration-color var(--d-hover) var(--ease-out-quart);
}
.text a:not(.btn):hover,
a.link:hover { text-decoration-color: currentColor; }

strong, b { font-weight: 700; }

/* ------------------------------------------------------------------
   4. Layout
   ------------------------------------------------------------------ */

.huelle {
  width: var(--breite);
  margin-inline: auto;
}

.huelle--schmal { width: min(100% - 2 * var(--rand), 820px); }

.sektion { padding-block: var(--sektion); }
.sektion--eng { padding-block: calc(var(--sektion) * 0.6); }

/* Volle Breite als Bühne. Erbt die Rollen-Tokens um. */
.buehne {
  background: var(--tanne);
  --grund:   var(--tanne);
  --schrift: var(--papier);
  --leise:   var(--salbei);
  --akzent:  var(--feuer-hell);
  --fokus:   var(--feuer);
  color: var(--schrift);
}
.buehne p, .buehne li { line-height: 1.72; }

.buehne--tief { background: var(--tanne-tief); --grund: var(--tanne-tief); }

/* Kapitelkopf: Überschrift plus optionaler Beisatz. Kein Versal-Eyebrow. */
.kapitel { margin-bottom: var(--s-7); max-width: 42ch; }
.kapitel > p { margin-top: var(--s-4); color: var(--leise); font-size: var(--t-lead); line-height: 1.5; }

/* ------------------------------------------------------------------
   5. Fokus und Sprungmarke
   ------------------------------------------------------------------ */

:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 3px;
  border-radius: 0;
}

/* Auf einer Lagerfeuer-Fläche wäre ein Lagerfeuer-Ring unsichtbar. Die
   Ausnahme gilt aber NUR auf dunklem Grund — auf Papier ergäbe ein
   papierfarbener Ring 1.00:1 und wäre schlicht nicht vorhanden. Dort
   greift der Standardwert --fokus (#9C4715, 5.37:1). */
.buehne .btn--feuer:focus-visible,
.fuss .btn--feuer:focus-visible {
  outline-color: var(--papier);
}

.sprungmarke {
  position: absolute;
  left: var(--s-4);
  top: var(--s-4);
  z-index: var(--z-skiplink);
  transform: translateY(-200%);
  background: var(--tinte);
  color: var(--papier);
  padding: var(--s-3) var(--s-5);
  font-weight: 700;
  text-decoration: none;
  transition: transform var(--d-zustand) var(--ease-out-quart);
}
.sprungmarke:focus { transform: translateY(0); }

.nur-fuer-screenreader {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------
   6. Bewegung abschalten
   ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}