/* ═══════════════════════════════════════════════════════════════════════════
   assets/seiten.css — das EINE Stylesheet der statischen Seiten unter dist/.

   Nichts hier ist neu erfunden. Farben, Schriftketten und Groessen sind aus
   public/erfahrungen/index.html:104-274 uebernommen, das seinerseits auf
   src/components/quiz/tokens.ts zeigt. Der Name in Klammern ist der Token.
   Wer einen Wert aendert, aendert ihn zuerst dort.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── SCHRIFTEN: DIE BEREITS VORHANDENEN DATEIEN, KEINE ZWEITE KOPIE ─────────
   Die drei woff2-Schnitte liegen seit dem 28.08.2026 in
   public/erfahrungen/fonts/ und werden von dort ausgeliefert
   (/erfahrungen/fonts/...). Absolute Pfade, damit sie aus jedem Unterordner
   greifen — diese Datei wird von /impressum/index.html geladen, nicht von
   /erfahrungen/.

   WER HIER EINEN VIERTEN SCHNITT BRAUCHT, legt ihn neben die drei und nicht
   in einen zweiten Ordner. Zwei Kopien derselben Schrift laufen auseinander,
   und der Browser laedt beide.

   fonts.googleapis.com kommt nicht in Frage: Der CDN-Link uebertraegt die IP
   jeder Besucherin ohne Einwilligung an Google (src/main.tsx:4-6). Diese
   Seiten sind ausdruecklich die, die nichts setzen und nichts lesen.

   KEIN unicode-range und font-display: swap — beides wie im Original, die
   Begruendung steht dort. */
@font-face {
  font-family: 'Shippori Mincho';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/erfahrungen/fonts/shippori-mincho-latin-600-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/erfahrungen/fonts/zen-kaku-gothic-new-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/erfahrungen/fonts/zen-kaku-gothic-new-latin-500-normal.woff2') format('woff2');
}

:root {
  --seite-bg: #FBF7F5;      /* SEITE_BG      Grundflaeche */
  --text: #3D1F2A;          /* HEADLINE_DARK Ueberschrift und Fliesstext */
  --gedaempft: #6B4C58;     /* HELP_TIEF     Hilfstext, 7,5:1 auf SEITE_BG */
  --akzent: #9B4060;        /* ACCENT        Marken-Akzent, Links */
  --rand: #F0DCDF;          /* RAND_WARM     warme Trennlinie */

  --serif: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', Georgia, 'Times New Roman', serif;
  --sans: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--seite-bg);
  color: var(--text);
  font-family: var(--sans);
  /* 18px ist die Lesbarkeitsuntergrenze dieses Projekts (tokens.ts,
     Abschnitt Gestaltungsentwurf) und gilt hier wie ueberall. */
  font-size: 18px;
  line-height: 1.7;
  font-weight: 400;
}

/* ── KOPF ──────────────────────────────────────────────────────────────────
   Nur die Wortmarke, verlinkt auf '/'. Kein Zurueck-Knopf wie in
   LegalPage.tsx:440-448: der arbeitet mit window.history.back() und braucht
   eine Vorgeschichte. Wer aus der Suche kommt, hat keine. */
.kopf {
  border-bottom: 1px solid var(--rand);
}

.kopf,
main,
.fuss {
  max-width: 680px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

.kopf { padding-top: 20px; padding-bottom: 20px; }

.wortmarke {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 20px;
  color: var(--text);
  text-decoration: none;
  letter-spacing: 0.02em;
}

main { padding-top: 40px; padding-bottom: 24px; }

h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 31px;
  line-height: 1.32;
  margin: 0 0 28px;
}

h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.35;
  margin: 44px 0 16px;
}

/* Zwischenzeile INNERHALB eines Abschnitts. Kleiner als h2 und in der
   Fliesstext-Schrift, damit sie den Abschnitt nicht aufteilt, sondern
   gliedert. */
h3 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.5;
  margin: 32px 0 12px;
}

p { margin: 0 0 20px; }

ul, ol { margin: 0 0 20px; padding-left: 24px; }

li { margin: 0 0 8px; }

a { color: var(--akzent); }

strong { font-weight: 500; }

/* ── FUSS ──────────────────────────────────────────────────────────────────
   Die Firmenzeile steht in 15px wie .fusszeile im Original
   (public/erfahrungen/index.html:213-218). Sie darf kleiner sein; der
   Fliesstext darueber nicht. */
.fuss {
  padding-top: 32px;
  padding-bottom: 64px;
  border-top: 1px solid var(--rand);
}

.fuss-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 1.6;
}

.fuss-firma {
  font-size: 15px;
  line-height: 1.6;
  color: var(--gedaempft);
  margin: 0;
}

/* ── BILDER ─────────────────────────────────────────────────────────────
   width und height stehen als Attribute am img, gesetzt von
   scripts/build-seiten.mjs aus der Datei selbst. Diese Regeln sind das
   Gegenstueck dazu: Aus den Attributen kennt der Browser das
   Seitenverhaeltnis, haelt den Platz frei und laesst den Text beim
   Nachladen nicht springen. WER height: auto ENTFERNT, verzerrt jedes
   Bild, das nicht zufaellig genau so breit ist wie die Spalte.
   figure traegt in Browsern von Haus aus einen seitlichen Rand von 40px.
   Der muss weg, sonst steht das Bild schmaler als der Text darueber. */
.bild {
  margin: 32px 0;
}

.bild img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

/* Die Bildunterschrift ist Text und kein Kleingedrucktes: gedaempfte Farbe
   ja, Winzschrift nein. Dieselbe Ueberlegung wie beim Quellenblock auf
   /erfahrungen. */
.bild figcaption {
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--gedaempft);
}

@media (min-width: 640px) {
  .kopf, main, .fuss { padding-left: 24px; padding-right: 24px; }
  main { padding-top: 56px; }
  h1 { font-size: 40px; }
  h2 { font-size: 28px; }
  h3 { font-size: 20px; }
}