/* ===========================================================================
   Website «Zuerst verstehen»
   ---------------------------------------------------------------------------
   Web-Fassung der Marke. Die Farben stammen unveraendert aus templates/tokens.css
   – dort steht der Sollzustand, hier nur die Uebersetzung auf einen Bildschirm,
   der nicht 1080 Pixel breit ist.

   Was gleich bleibt: die drei Schritte tragen dieselben Farben und dieselbe
   Kante wie im Carousel. Wer einen Post gesehen hat, erkennt die Seite wieder.

   Kein JavaScript. Die Seite besteht aus Text und muss in zehn Jahren noch
   laden, auch auf einem alten Telefon im Zug.
   =========================================================================== */

:root {
  --ink: #0F1E20;
  --ink-soft: #16292B;
  --paper: #F4EFE6;
  --paper-dim: #BFC6C2;
  --hairline: rgba(244, 239, 230, 0.14);

  --step-scene: #D98B63;
  --step-translation: #83AC96;
  --step-tool: #E5B75C;

  --font-sans: "Segoe UI", "Noto Sans", "DejaVu Sans", "Liberation Sans",
               system-ui, -apple-system, Arial, sans-serif;

  --measure: 34rem;      /* Zeilenlaenge, an der Fliesstext lesbar bleibt */
  --gap-s: 0.6rem;
  --gap-m: 1.4rem;
  --gap-l: 3rem;
  --gap-xl: 5rem;
}

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

html {
  /* Mobil zuerst: der Verkehr kommt aus einer App auf einem Telefon. */
  font-size: 17px;
  -webkit-text-size-adjust: 100%;
}
@media (min-width: 40rem) { html { font-size: 18px; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  line-height: 1.6;
  /* Ein sehr ruhiger Verlauf, derselbe wie auf den Slides. */
  background-image: linear-gradient(170deg, var(--ink) 0%, var(--ink-soft) 100%);
  background-attachment: fixed;
}

.wrap { width: 100%; max-width: 52rem; margin: 0 auto; padding: 0 1.4rem; }
.measure { max-width: var(--measure); }

a { color: var(--paper); text-decoration-color: var(--step-translation); text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--paper); }

/* --- Kopf ----------------------------------------------------------------- */
.site-head {
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--hairline);
}
.site-head .wrap { display: flex; align-items: baseline; gap: var(--gap-m); flex-wrap: wrap; }
.wordmark {
  font-weight: 600; font-size: 1.05rem; letter-spacing: 0.02em;
  text-decoration: none; color: var(--paper);
}
.site-nav { margin-left: auto; display: flex; gap: var(--gap-m); font-size: 0.92rem; }
.site-nav a { color: var(--paper-dim); text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--paper); }

/* --- Aufmacher ------------------------------------------------------------ */
/* Nur oben und unten setzen: die Kurzform mit drei Werten wuerde den seitlichen
   Rand von .wrap auf 0 zuruecksetzen, und der Text klebte am Bildschirmrand. */
.hero { padding-top: var(--gap-xl); padding-bottom: var(--gap-l); }
.hero h1 {
  font-size: clamp(2rem, 7vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 var(--gap-m);
  max-width: 22ch;
}
.hero p { font-size: 1.12rem; color: var(--paper); margin: 0 0 var(--gap-m); }
.lede { color: var(--paper-dim); }

/* --- Die drei Schritte ---------------------------------------------------- */
/* Das Format ist die Marke. Deshalb steht das Verfahren auf der Startseite
   nicht als Behauptung, sondern als sichtbare Struktur. */
.steps { display: grid; gap: var(--gap-m); margin: var(--gap-l) 0; padding: 0; list-style: none; }
@media (min-width: 46rem) { .steps { grid-template-columns: repeat(3, 1fr); } }

.step { padding-top: 1rem; border-top: 4px solid var(--paper-dim); }
.step--scene { border-top-color: var(--step-scene); }
.step--translation { border-top-color: var(--step-translation); }
.step--tool { border-top-color: var(--step-tool); }

.step .mark {
  display: block;
  font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--paper-dim); margin-bottom: 0.4rem;
}
.step h3 { margin: 0 0 0.3rem; font-size: 1.05rem; }
.step p { margin: 0; font-size: 0.95rem; color: var(--paper-dim); }

/* --- Abschnitte ----------------------------------------------------------- */
section { padding: var(--gap-l) 0; border-top: 1px solid var(--hairline); }
section h2 { font-size: 1.5rem; margin: 0 0 var(--gap-m); letter-spacing: -0.01em; }
section p { max-width: var(--measure); }

/* --- Wissenseintraege ----------------------------------------------------- */
.entries { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--gap-m); }
.entry {
  padding: 1.1rem 0 1.1rem 1.1rem;
  border-left: 4px solid var(--step-translation);
}
.entry h3 { margin: 0 0 0.3rem; font-size: 1.08rem; }
.entry h3 a { text-decoration: none; }
.entry p { margin: 0; color: var(--paper-dim); font-size: 0.95rem; }
.entry .meta { font-size: 0.8rem; letter-spacing: 0.04em; color: var(--paper-dim); }

.empty {
  border-left: 4px solid var(--step-tool);
  padding: 1.1rem 0 1.1rem 1.1rem;
  color: var(--paper-dim);
}

/* --- Quellen -------------------------------------------------------------- */
/* Auf Social wird nie zitiert, hier ist die Quelle Pflicht. Sie steht als
   Fussnote unter dem Eintrag, nie im Fliesstext. */
.sources { margin-top: var(--gap-l); padding-top: var(--gap-m); border-top: 1px solid var(--hairline); }
.sources h2 { font-size: 1.05rem; }
.sources ol { padding-left: 1.2rem; margin: 0; }
.sources li { margin-bottom: var(--gap-m); font-size: 0.9rem; color: var(--paper-dim); }
.sources .quote { display: block; margin: 0.4rem 0; padding-left: 0.9rem; border-left: 2px solid var(--hairline); font-style: italic; }
.sources .where { display: block; font-size: 0.82rem; }
/* Quell-URLs sind lang und haben keine Leerzeichen. Ohne Umbruch schieben sie
   die ganze Seite seitlich hinaus – auf einem Telefon der haeufigste Weg, eine
   Textseite unbrauchbar zu machen. */
.sources a { color: var(--paper-dim); overflow-wrap: anywhere; }
body { overflow-x: hidden; }

/* --- Fuss ----------------------------------------------------------------- */
.site-foot {
  border-top: 1px solid var(--hairline);
  padding: var(--gap-l) 0 var(--gap-xl);
  font-size: 0.88rem;
  color: var(--paper-dim);
}
.site-foot nav { display: flex; gap: var(--gap-m); flex-wrap: wrap; margin-bottom: var(--gap-s); }
.site-foot a { color: var(--paper-dim); }

/* --- Hinweis -------------------------------------------------------------- */
.note {
  border-left: 4px solid var(--step-tool);
  padding: 0.9rem 0 0.9rem 1.1rem;
  color: var(--paper-dim);
  font-size: 0.92rem;
}

/* --- Rechtstexte ---------------------------------------------------------- */
.legal h2 { font-size: 1.1rem; margin-top: var(--gap-l); }
.legal p, .legal li { max-width: var(--measure); font-size: 0.95rem; }
.todo { color: var(--step-tool); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}