/*
 * Sockenmond · Design-Tokens
 * Einzige Quelle für Farbe, Schrift, Maß. werkzeug/strick.ts liest die
 * Grundfarben von hier, damit Wortmarke, Zeichen und Motive dieselben Töne tragen.
 *
 * Zwei Lichtstimmungen:
 *   Tag         – Leinen, Tinte, Ringelrot (Standard)
 *   Lampenlicht – warmes Dunkel zum Vorlesen im Kinderzimmer
 *                 ([data-licht="aus"] am <html>, oder System-Dunkel ohne Wahl)
 */

@font-face {
  font-family: "Vollkorn";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("schriften/vollkorn-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Vollkorn";
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url("schriften/vollkorn-italic-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("schriften/atkinson-hyperlegible-next-latin.woff2") format("woff2");
}

:root {
  /* ── Grundfarben: die Wollsocke ─────────────────────────────── */
  --leinen: #f3ece0;        /* Grund, ungebleichtes Leinen */
  --leinen-tief: #e7dccb;   /* vertiefte Flächen, Karten im Ruhezustand */
  --tinte: #2a2420;         /* Text, warmes Fast-Schwarz */
  --tinte-leise: #5f564d;   /* Nebentext */
  --melange: #8b837a;       /* Sockenkörper, graumeliert */
  --ferse: #fbf7ef;         /* Ferse, die helle Seite des Mondes */
  --ringel: #c23b27;        /* Ringel am Bündchen, nur Flächen und Zeichen */
  --ringel-tief: #a3301f;   /* Ringelrot für Text und Links auf Leinen */
  --senf: #dea33d;          /* Lampe, Laterne, Licht */
  --nacht: #221a15;         /* Grund im Lampenlicht */
  --nacht-hoch: #30261f;    /* gehobene Flächen im Lampenlicht */
  --lampe: #e9c690;         /* Text im Lampenlicht */
  --lampe-leise: #b59c78;   /* Nebentext im Lampenlicht */

  /* ── Rollen (Tag) ───────────────────────────────────────────── */
  --grund: var(--leinen);
  --grund-tief: var(--leinen-tief);
  --text: var(--tinte);
  --text-leise: var(--tinte-leise);
  --akzent: var(--ringel-tief);
  --akzent-flaeche: var(--ringel);
  --band: var(--ringel);              /* Altersband in der Monatsleiste */
  --linie: color-mix(in srgb, var(--tinte) 22%, transparent);
  --fokus: var(--ringel-tief);
  --wortmarke: var(--tinte);

  /* Maschenfarben für Zeichen und Motive (werden im Lampenlicht umgestellt) */
  --masche-tinte: var(--tinte);
  --masche-melange: var(--melange);
  --masche-ferse: var(--ferse);
  --masche-ringel: var(--ringel);
  --masche-senf: var(--senf);

  /* ── Schrift ────────────────────────────────────────────────── */
  --schrift-text: "Vollkorn", "Iowan Old Style", Georgia, serif;
  --schrift-ui: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, sans-serif;

  /* Grade: von 390 px bis 1440 px gleitend */
  --g-klein: 0.875rem;                                      /* 14 · Etiketten */
  --g-ui: 1.0625rem;                                        /* 17 · Bedienung */
  --g-text: 1.1875rem;                                      /* 19 · Fließtext */
  --g-geschichte: clamp(1.375rem, 1.21rem + 0.68vw, 1.75rem);    /* 22 → 28 · Vorlesetext */
  --g-titel-3: clamp(1.5rem, 1.33rem + 0.68vw, 1.875rem);        /* 24 → 30 */
  --g-titel-2: clamp(2rem, 1.63rem + 1.52vw, 3rem);              /* 32 → 48 */
  --g-titel-1: clamp(2.5rem, 1.85rem + 2.67vw, 4.25rem);         /* 40 → 68 */
  --g-auftakt: clamp(3rem, 1.8rem + 4.95vw, 6.25rem);            /* 48 → 100 */

  --zeile-eng: 1.08;
  --zeile-titel: 1.15;
  --zeile-text: 1.55;
  --zeile-geschichte: 1.6;

  /* ── Maß: eine Masche = 8 px ────────────────────────────────── */
  --m-1: 0.5rem;
  --m-2: 1rem;
  --m-3: 1.5rem;
  --m-4: 2rem;
  --m-6: 3rem;
  --m-8: 4rem;
  --m-12: 6rem;
  --m-16: 8rem;

  --rand: clamp(1.25rem, 0.5rem + 3vw, 3.5rem);   /* Seitenrand 20 → 56 */
  --breite-seite: 76rem;                           /* 1216 px Inhalt */
  --breite-lesen: 34rem;                           /* Vorlesespalte */
  --rund: 0.375rem;
  --ziel: 2.75rem;                                 /* Mindestgröße Tippziel, 44 px */
  --dauer-licht: 700ms;
}

/* ── Rollen (Lampenlicht) ──────────────────────────────────────── */
/* .lampenlicht stellt einen einzelnen Abschnitt auf Lampenlicht, egal wie die
   Seite steht (Startseite: „Heute Abend“). */
:root[data-licht="aus"],
.lampenlicht {
  --grund: var(--nacht);
  --grund-tief: var(--nacht-hoch);
  --text: var(--lampe);
  --text-leise: var(--lampe-leise);
  --akzent: var(--senf);
  --akzent-flaeche: var(--ringel);
  --band: var(--senf);
  --linie: color-mix(in srgb, var(--lampe) 20%, transparent);
  --fokus: var(--senf);
  --wortmarke: var(--lampe);
  --masche-tinte: var(--lampe-leise);
  --masche-melange: #6f665c;
  --masche-ferse: var(--lampe);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-licht="an"]) {
    --grund: var(--nacht);
    --grund-tief: var(--nacht-hoch);
    --text: var(--lampe);
    --text-leise: var(--lampe-leise);
    --akzent: var(--senf);
    --band: var(--senf);
    --linie: color-mix(in srgb, var(--lampe) 20%, transparent);
    --fokus: var(--senf);
    --wortmarke: var(--lampe);
    --masche-tinte: var(--lampe-leise);
    --masche-melange: #6f665c;
    --masche-ferse: var(--lampe);
    color-scheme: dark;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dauer-licht: 0ms; }
}

/*
 * Sockenmond · Bausteine der Website
 * Braucht tokens.css und marke/wortmarke.css davor. S7 übernimmt diese Datei
 * so, wie sie ist; Pfade auf marke/ und motive/ sind relativ zu design/.
 *
 * Inhalt
 *   1 Grundlagen          6 Geschichtenkarte
 *   2 Bündchen, Kopf      7 Geschichte (Vorlesetext, Formel, Zeigen, Laut)
 *   3 Wortmarke, Zeichen  8 Mitmach-Vers
 *   4 Monatsleiste        9 Buch-Hinweis (KDP-02/03/07/11)
 *   5 Altersweg          10 Noch eine?, Fuß, Druck
 *                        11 Seitenlayouts: Startseite, Übersicht, Geschichte
 */

/* ── 1 Grundlagen ───────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--grund);
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift-ui);
  font-size: var(--g-ui);
  line-height: var(--zeile-text);
  font-kerning: normal;
  transition:
    background-color var(--dauer-licht) ease,
    color var(--dauer-licht) ease;
}

h1, h2, h3 {
  font-family: var(--schrift-text);
  font-weight: 800;
  line-height: var(--zeile-titel);
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
  hyphens: auto;
  overflow-wrap: break-word;
}

p { margin: 0; text-wrap: pretty; }

a { color: inherit; text-decoration-thickness: 0.07em; text-underline-offset: 0.18em; }
a:hover { color: var(--akzent); }

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

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

.seite {
  width: 100%;
  max-width: calc(var(--breite-seite) + 2 * var(--rand));
  margin-inline: auto;
  padding-inline: var(--rand);
}

.nur-vorleser {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.etikett {
  font-family: var(--schrift-ui);
  font-size: var(--g-klein);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-leise);
}

/* ── 2 Bündchen und Kopf ────────────────────────────────────────── */
/* Das Bündchen ist das eine Schmuckelement: Rippen mit zwei Ringeln,
   oben an jeder Seite, wie der Rand einer Socke. Nirgends sonst. */
.buendchen {
  height: 1.125rem;
  background:
    linear-gradient(
      to bottom,
      transparent 0 0.25rem,
      var(--akzent-flaeche) 0.25rem 0.4375rem,
      transparent 0.4375rem 0.6875rem,
      var(--akzent-flaeche) 0.6875rem 0.875rem,
      transparent 0.875rem
    ),
    repeating-linear-gradient(
      to right,
      var(--masche-melange) 0 3px,
      color-mix(in srgb, var(--masche-melange) 72%, var(--tinte)) 3px 6px
    );
}

.kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--m-2) var(--m-4);
  padding-block: var(--m-2) var(--m-2);
}

.kopf__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--m-1) var(--m-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.kopf__nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ziel);
  font-weight: 600;
  text-decoration: none;
}
.kopf__nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--akzent);
  text-decoration-thickness: 3px;
}

.kopf__rechts { display: flex; align-items: center; gap: var(--m-2); }

@media (max-width: 47.99rem) {
  .kopf { padding-block: var(--m-2) var(--m-1); }
  .kopf__nav { order: 3; width: 100%; }
  .kopf__nav ul { gap: 0 var(--m-3); }
  .kopf__nav .kopf__alle { display: none; }
}

/* Licht-Schalter: „Licht aus“ dämpft die Seite auf Lampenlicht */
.licht-schalter {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  min-height: var(--ziel);
  padding: 0 1em 0 0.75em;
  border: 2px solid var(--text);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: 700 var(--g-klein) / 1 var(--schrift-ui);
  letter-spacing: 0.02em;
  cursor: pointer;
}
.licht-schalter__birne {
  width: 1.1em;
  height: 1.1em;
  border-radius: 50%;
  background: var(--senf);
  box-shadow: inset 0 0 0 2px var(--text);
  transition: background-color var(--dauer-licht) ease;
}
.licht-schalter[aria-pressed="true"] .licht-schalter__birne { background: transparent; }
.licht-schalter:hover { border-color: var(--akzent); color: var(--akzent); }

/* ── 3 Wortmarke und Zeichen ────────────────────────────────────── */
/* Die Wortmarke ist eine Maske: eine Datei (marke/wortmarke.svg), jede Farbe.
   Name wechseln = werkzeug/marke.json ändern, werkzeug/strick.ts laufen lassen. */
.wortmarke {
  display: block;
  height: var(--wortmarke-hoehe, clamp(1.5rem, 1.1rem + 1.6vw, 2.6rem));
  background: var(--wortmarke);
  forced-color-adjust: none;
  /* Maske und Seitenverhältnis: marke/wortmarke.css (erzeugt) */
}
@media (forced-colors: active) {
  .wortmarke { background: CanvasText; }
}
a.wortmarke-link { display: inline-flex; padding-block: 0.4rem; border-radius: 2px; }
a.wortmarke-link:hover .wortmarke { background: var(--akzent); }

.zeichen { width: var(--zeichen-groesse, 10rem); aspect-ratio: 1; }
.motiv { width: var(--motiv-groesse, 4rem); aspect-ratio: 1; flex: none; }

/* ── 4 Monatsleiste ─────────────────────────────────────────────── */
/* 48 Maschen = 0 bis 48 Monate. Das Altersband der Geschichte ist rot gestrickt.
   <span class="monatsleiste" style="--von:24; --bis:48" role="img"
         aria-label="Für 24 bis 48 Monate"></span> */
.monatsleiste {
  --von: 0;
  --bis: 48;
  --maschen: 48;
  display: block;
  width: 100%;
  max-width: var(--monatsleiste-breite, 18rem);
  aspect-ratio: var(--maschen) / 1;
  background: linear-gradient(
    to right,
    var(--linie) 0 calc(var(--von) / var(--maschen) * 100%),
    var(--band) calc(var(--von) / var(--maschen) * 100%) calc(var(--bis) / var(--maschen) * 100%),
    var(--linie) calc(var(--bis) / var(--maschen) * 100%)
  );
  -webkit-mask: url("marke/masche.svg") repeat-x left center / calc(100% / var(--maschen)) 100%;
  mask: url("marke/masche.svg") repeat-x left center / calc(100% / var(--maschen)) 100%;
}
.monatsleiste-gross { max-width: 40rem; }
.monatsleiste-gross .monatsleiste { max-width: none; }
.monatsleiste-gross__skala {
  display: flex;
  justify-content: space-between;
  margin-top: 0.35rem;
  font-size: var(--g-klein);
  font-variant-numeric: tabular-nums;
  color: var(--text-leise);
}

/* ── 5 Altersweg (Startseite) ───────────────────────────────────── */
.altersweg {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--text);
}
.altersweg li + li { border-left: 1px solid var(--linie); }
.altersweg a {
  position: relative;
  display: grid;
  gap: 0.25rem;
  height: 100%;
  padding: var(--m-3) var(--m-3) var(--m-4);
  text-decoration: none;
}
.altersweg__maschen {
  display: block;
  height: 1.25rem;
  margin-bottom: var(--m-2);
  background: var(--masche-melange);
  -webkit-mask: url("marke/masche.svg") repeat-x left center / 1.25rem 1.25rem;
  mask: url("marke/masche.svg") repeat-x left center / 1.25rem 1.25rem;
  transition: background-color 200ms ease;
}
.altersweg__name {
  font: 800 var(--g-titel-2) / 1 var(--schrift-text);
  letter-spacing: -0.015em;
}
.altersweg__monate { font-weight: 600; }
.altersweg__zahl { color: var(--text-leise); font-size: var(--g-klein); }
.altersweg a:hover .altersweg__maschen,
.altersweg a:focus-visible .altersweg__maschen { background: var(--akzent-flaeche); }
.altersweg a:hover { color: inherit; background: var(--grund-tief); }

@media (max-width: 47.99rem) {
  .altersweg { grid-template-columns: 1fr 1fr; }
  .altersweg li:nth-child(3) { border-left: 0; }
  .altersweg li:nth-child(n + 3) { border-top: 1px solid var(--linie); }
  .altersweg a { padding: var(--m-2) var(--m-2) var(--m-3); }
}

/* ── 6 Geschichtenkarte ─────────────────────────────────────────── */
.karten { margin: 0; padding: 0; list-style: none; }
.karten--zwei { display: grid; gap: 0 var(--m-6); }
@media (min-width: 60rem) { .karten--zwei { grid-template-columns: 1fr 1fr; } }

/* Maschenreihe als Trenner zwischen Karten */
.maschenreihe,
.karte {
  --reihe: url("marke/masche.svg");
}
.maschenreihe {
  display: block;
  height: 0.75rem;
  border: 0;
  margin: 0;
  background: var(--linie);
  -webkit-mask: var(--reihe) repeat-x left center / 0.75rem 0.75rem;
  mask: var(--reihe) repeat-x left center / 0.75rem 0.75rem;
}

.karte {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--m-1) var(--m-3);
  align-items: start;
  padding-block: var(--m-3);
}
.karte::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 0.75rem;
  translate: 0 -50%;
  background: var(--linie);
  -webkit-mask: var(--reihe) repeat-x left center / 0.75rem 0.75rem;
  mask: var(--reihe) repeat-x left center / 0.75rem 0.75rem;
}
.karte .motiv { --motiv-groesse: 4.5rem; grid-row: span 3; }
.karte__titel {
  font: 700 var(--g-titel-3) / var(--zeile-titel) var(--schrift-text);
  letter-spacing: -0.01em;
  hyphens: auto;
}
.karte__titel a { text-decoration: none; }
.karte__titel a::after { content: ""; position: absolute; inset: 0; }
.karte:hover .karte__titel a { color: var(--akzent); }
.karte__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem var(--m-2);
  font-size: var(--g-klein);
  font-weight: 600;
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
}
.karte__meta .monatsleiste { --monatsleiste-breite: 8rem; }
.karte__meta .monatsleiste,
.geschichte__meta .monatsleiste { width: var(--monatsleiste-breite); flex: none; }
.karte__anriss {
  font-family: var(--schrift-text);
  font-size: var(--g-text);
  line-height: 1.45;
  grid-column: 2;
}
@media (max-width: 29.99rem) {
  .karte { grid-template-columns: 1fr; }
  .karte .motiv { --motiv-groesse: 3.25rem; grid-row: auto; }
  .karte__anriss { grid-column: 1; }
}

/* ── 7 Geschichte ───────────────────────────────────────────────── */
.brotkrumen ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--g-klein);
  color: var(--text-leise);
}
.brotkrumen li { display: inline-flex; align-items: center; min-height: var(--ziel); }
.brotkrumen li + li::before { content: "›"; padding-inline: 0.5em; }

.geschichte {
  display: grid;
  grid-template-columns: minmax(0, var(--breite-lesen));
  justify-content: start;
}
@media (min-width: 64rem) {
  /* Randspalte links für Zeigemarken, Lesespalte, Luft rechts */
  .geschichte { grid-template-columns: 10rem minmax(0, var(--breite-lesen)) 1fr; }
  .geschichte > * { grid-column: 2; }
  .geschichte > .geschichte__rand { grid-column: 1; grid-row: 2; }
}

.geschichte__kopf { display: grid; gap: var(--m-2); padding-block: var(--m-3) var(--m-6); }
.geschichte__kopf .motiv { --motiv-groesse: clamp(5rem, 3.5rem + 6vw, 8.5rem); }
.geschichte__kopf h1 { font-size: var(--g-titel-1); }
.geschichte__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--m-1) var(--m-3);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.geschichte__meta .monatsleiste { --monatsleiste-breite: 12rem; }

/* Die Legende erklärt die drei Vorlese-Zeichen, einmal pro Seite */
.legende {
  display: flex;
  flex-wrap: wrap;
  gap: var(--m-1) var(--m-3);
  margin: 0;
  padding: var(--m-2) 0 0;
  border-top: 1px solid var(--linie);
  font-size: var(--g-klein);
  color: var(--text-leise);
}
.legende dt { font-family: var(--schrift-text); font-size: 1.05rem; color: var(--text); }
.legende div { display: flex; align-items: baseline; gap: 0.5em; }
.legende dd { margin: 0; }

.vorlesetext {
  font-family: var(--schrift-text);
  font-size: var(--g-geschichte);
  line-height: var(--zeile-geschichte);
  font-variant-ligatures: common-ligatures;
  hanging-punctuation: first;
}
.vorlesetext p + p { margin-top: 1.1em; }
/* jede Zeile der Vorlage bleibt eine Zeile; Umbrüche hängen ein, damit man sie
   beim Vorlesen als Fortsetzung erkennt */
.vorlesetext .zeile { display: block; padding-left: 1.2em; text-indent: -1.2em; }

/* Formel (R2): kehrt wortgleich wieder, die Stelle, an der das Kind mitspricht */
.formel {
  font-weight: 650;
  font-style: italic;
  color: var(--akzent);
}
/* Lautwort (R4): zum Mitmachen, etwas gesperrt */
.laut {
  font-style: italic;
  letter-spacing: 0.06em;
}
/* Zeigestelle (R5): Frage zum Zeigen, Marke am Rand */
.zeigen { position: relative; }
.zeigen::before {
  content: "";
  position: absolute;
  top: 0.3em;
  left: -1.75em;
  width: 1.1em;
  height: 1.1em;
  background: var(--akzent);
  -webkit-mask: url("motive/hand.svg") no-repeat center / contain;
  mask: url("motive/hand.svg") no-repeat center / contain;
}
.zeigen-marke {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.35em;
  vertical-align: -0.12em;
  background: var(--akzent);
  -webkit-mask: url("motive/hand.svg") no-repeat center / contain;
  mask: url("motive/hand.svg") no-repeat center / contain;
}
@media (max-width: 47.99rem) {
  .vorlesetext .zeile { padding-left: 0.8em; text-indent: -0.8em; }
  .geschichte__kopf { padding-bottom: var(--m-3); }
  .geschichte__rand { margin-bottom: var(--m-4); }
  .licht-schalter { padding-inline: 0.6em 0.85em; }
  .vorlesetext { padding-left: 1.6rem; }
  .zeigen::before { left: -1.6rem; width: 1.05rem; height: 1.05rem; }
}

.geschichte__ende {
  display: flex;
  align-items: center;
  gap: var(--m-2);
  margin-block: var(--m-6) var(--m-8);
  color: var(--text-leise);
}
.geschichte__ende .zeichen { --zeichen-groesse: 2.75rem; }

/* ── 8 Mitmach-Vers ─────────────────────────────────────────────── */
.vers {
  margin-block: var(--m-4) var(--m-6);
  padding: var(--m-3) var(--m-3) var(--m-4);
  background: var(--grund-tief);
  border-radius: var(--rund);
}
.vers h2 { font-size: var(--g-titel-3); margin-bottom: var(--m-2); }
.vers ol { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--m-2); }
.vers li { display: grid; gap: 0.1rem; }
.vers__tun {
  font-family: var(--schrift-ui);
  font-size: var(--g-klein);
  font-weight: 600;
  color: var(--text-leise);
}
.vers__sagen { font-family: var(--schrift-text); font-size: var(--g-geschichte); line-height: 1.35; }

/* ── 9 Buch-Hinweis ─────────────────────────────────────────────── */
/* Steht nach Geschichte und Mitmach-Vers, vor „Noch eine?“ (KDP-02).
   Kein Pop-up, nichts Klebendes; die Höhe ist im HTML fest. */
.buch {
  position: relative;
  display: grid;
  gap: var(--m-3) var(--m-6);
  margin-block: var(--m-4) var(--m-8);
  padding: calc(var(--m-4) + 1.125rem) var(--m-3) var(--m-4);
  background: var(--grund-tief);
  border-radius: 0 0 var(--rund) var(--rund);
}
.buch::before {
  /* das Bündchen als Kante: Verwandtschaft mit dem Seitenkopf */
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1.125rem;
  background:
    linear-gradient(to bottom, transparent 0 0.25rem, var(--akzent-flaeche) 0.25rem 0.4375rem, transparent 0.4375rem 0.6875rem, var(--akzent-flaeche) 0.6875rem 0.875rem, transparent 0.875rem),
    repeating-linear-gradient(to right, var(--masche-melange) 0 3px, color-mix(in srgb, var(--masche-melange) 72%, var(--tinte)) 3px 6px);
}
@media (min-width: 48rem) {
  .buch { grid-template-columns: 11rem 1fr; padding-inline: var(--m-4); }
}
.buch h2 { font-size: var(--g-titel-2); max-width: 16ch; }
.buch__text { display: grid; gap: var(--m-2); align-content: start; }
.buch__text > p { font-family: var(--schrift-text); font-size: var(--g-text); max-width: 34rem; }
.buch__daten {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem var(--m-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 700;
  font-size: var(--g-klein);
}
.buch__daten li { padding: 0.3rem 0.65rem; border: 1.5px solid var(--text); border-radius: 999px; }

/* Buchform in Phase A: das echte Format als Umriss, kein Coverbild (KDP-03) */
.buchform {
  position: relative;
  width: 100%;
  max-width: 11rem;
  aspect-ratio: 1;
  border: 2px solid var(--text);
  border-left-width: 0.65rem;
  border-radius: 2px 6px 6px 2px;
  display: grid;
  place-items: center;
}
.buchform .zeichen { --zeichen-groesse: 55%; }
.buchform__mass {
  position: absolute;
  bottom: -1.6rem;
  left: 0;
  right: 0;
  text-align: center;
  font-size: var(--g-klein);
  font-weight: 600;
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 47.99rem) {
  .buchform { max-width: 7.5rem; margin-bottom: 1.5rem; }
}
.buch__cover {
  width: 100%;
  max-width: 11rem;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 2px 6px 6px 2px;
}

.vormerken { display: grid; gap: var(--m-1); max-width: 30rem; margin-top: var(--m-1); }
.vormerken label { font-weight: 700; }
.vormerken__zeile { display: flex; flex-wrap: wrap; gap: var(--m-1); }
.vormerken input[type="email"] {
  flex: 1 1 12rem;
  min-width: 0;
  min-height: 3rem;
  padding: 0 0.9rem;
  border: 2px solid var(--text);
  border-radius: var(--rund);
  background: var(--grund);
  color: var(--text);
  font: inherit;
}
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0 1.25rem;
  border: 2px solid var(--text);
  border-radius: var(--rund);
  background: var(--text);
  color: var(--grund);
  font: 700 var(--g-ui) / 1 var(--schrift-ui);
  text-decoration: none;
  cursor: pointer;
}
.knopf:hover { background: var(--akzent); border-color: var(--akzent); color: var(--grund); }
.vormerken__einwilligung { font-size: var(--g-klein); color: var(--text-leise); }
.buch__preis { font: 800 var(--g-titel-3) / 1 var(--schrift-text); }
.buch__fuss { font-size: var(--g-klein); color: var(--text-leise); max-width: 34rem; }

/* ── 10 Noch eine?, Fuß ─────────────────────────────────────────── */
.noch-eine { margin-bottom: var(--m-12); }
.noch-eine h2 { font-size: var(--g-titel-2); margin-bottom: var(--m-3); }

.fuss {
  margin-top: var(--m-12);
  padding-block: 0 var(--m-8);
  font-size: var(--g-klein);
}
.fuss__raster { padding-top: var(--m-6); border-top: 2px solid var(--text); }
.fuss__raster { display: grid; gap: var(--m-4); }
@media (min-width: 48rem) { .fuss__raster { grid-template-columns: 2fr 1fr 1fr; } }
.fuss ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.fuss a { display: inline-block; padding-block: 0.55rem; }
.fuss .wortmarke { --wortmarke-hoehe: 1.5rem; margin-bottom: var(--m-2); }
.fuss__satz { max-width: 26rem; font-family: var(--schrift-text); font-size: var(--g-text); }

/* ── 11 Seitenlayouts ───────────────────────────────────────────── */
.lampenlicht { background: var(--grund); color: var(--text); }
/* helle Schrift auf Dunkel wirkt auf macOS fetter; Graustufen-Glättung gleicht das aus */
:root[data-licht="aus"] body,
.lampenlicht {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-licht="an"]) body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
}

.block { padding-block: var(--m-8) 0; }
.block__titel { font-size: var(--g-titel-2); margin-bottom: var(--m-3); }
.block__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--m-1) var(--m-3);
  margin-bottom: var(--m-1);
}
.block__kopf a { font-weight: 700; min-height: var(--ziel); display: inline-flex; align-items: center; }

/* Startseite: Auftakt mit dem Sockenmond an der Wäscheleine */
.auftakt {
  position: relative;
  display: grid;
  padding-block: 0 var(--m-4);
}
.auftakt__titel {
  font-size: clamp(2.5rem, 1.55rem + 3.9vw, 5.25rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  max-width: 14ch;
}
.auftakt__titel em { font-style: italic; color: var(--akzent); }
.auftakt__satz {
  margin-top: var(--m-3);
  max-width: 30ch;
  font-family: var(--schrift-text);
  font-size: var(--g-titel-3);
  line-height: 1.35;
}
.auftakt__leine {
  position: relative;
  height: 8.5rem;
  margin-inline: calc(-1 * var(--rand));
  margin-bottom: var(--m-2);
}
.auftakt__leine::before {
  /* die Leine: leicht durchhängend, von Rand zu Rand */
  content: "";
  position: absolute;
  inset: 0.75rem 0 auto;
  height: 1.5rem;
  border-top: 2px solid var(--text);
  border-radius: 50% / 1.5rem 1.5rem 0 0;
  rotate: 180deg;
  translate: 0 -0.75rem;
}
.auftakt__socke {
  --zeichen-groesse: 8rem;
  position: absolute;
  top: 0.4rem;
  right: calc(var(--rand) + 1rem);
  transform-origin: 32% 0;
  rotate: -7deg;
  animation: schaukeln 2.4s cubic-bezier(0.3, 0, 0.3, 1) 1 both;
}
.auftakt__klammer {
  position: absolute;
  z-index: 1;
  top: 0.1rem;
  right: calc(var(--rand) + 1rem + 8rem * 0.68 - 0.35rem);
  width: 0.7rem;
  height: 1.9rem;
  border-radius: 2px;
  background:
    linear-gradient(to right, transparent 45%, color-mix(in srgb, var(--tinte) 45%, transparent) 45% 55%, transparent 55%),
    var(--senf);
  box-shadow: 0 0 0 1.5px var(--text);
}
@keyframes schaukeln {
  0% { rotate: 6deg; }
  35% { rotate: -11deg; }
  65% { rotate: -4deg; }
  100% { rotate: -7deg; }
}
@media (prefers-reduced-motion: reduce) { .auftakt__socke { animation: none; } }

@media (min-width: 60rem) {
  .auftakt { padding-block: var(--m-8) var(--m-4); }
  .auftakt__leine {
    position: absolute;
    inset: 0 0 auto 52%;
    height: 100%;
    margin: 0;
  }
  .auftakt__socke { --zeichen-groesse: clamp(16rem, 8rem + 14vw, 24rem); right: 12%; top: 0.6rem; }
  .auftakt__klammer { right: calc(12% + var(--zeichen-groesse-gross) * 0.68 - 0.5rem); width: 1rem; height: 2.75rem; }
  .auftakt { --zeichen-groesse-gross: clamp(16rem, 8rem + 14vw, 24rem); }
}

/* Startseite: „Heute Abend“ im Lampenlicht, randlos */
.heute { margin-top: var(--m-8); padding-block: var(--m-6) var(--m-8); }
.heute__raster { display: grid; gap: var(--m-3); }
.heute__kopf { display: flex; align-items: center; justify-content: space-between; align-self: start; }
.heute__motiv { --motiv-groesse: 4.5rem; }
.heute__inhalt { display: grid; gap: var(--m-2); justify-items: start; }
.heute__titel { font-size: var(--g-titel-1); }
.heute__titel a { text-decoration: none; }
.heute__auszug { max-width: var(--breite-lesen); margin-block: var(--m-2); }
.heute .karte__meta { color: var(--text-leise); }
@media (min-width: 60rem) {
  .heute__raster { grid-template-columns: 14rem 1fr; gap: var(--m-6); }
  .heute__kopf { flex-direction: column; align-items: flex-start; gap: var(--m-3); }
  .heute__motiv { --motiv-groesse: 11rem; }
}

/* Startseite: Themen */
.themen__liste {
  display: grid;
  gap: var(--m-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 48rem) { .themen__liste { grid-template-columns: 1fr 1fr; } }
.themen__liste a {
  display: flex;
  align-items: center;
  gap: var(--m-3);
  padding: var(--m-2) var(--m-3) var(--m-2) var(--m-2);
  border: 2px solid var(--text);
  border-radius: var(--rund);
  font: 800 var(--g-titel-3) / 1.1 var(--schrift-text);
  text-decoration: none;
}
.themen__liste a:hover { background: var(--grund-tief); color: inherit; }
.themen__liste .motiv { --motiv-groesse: 3.5rem; }

/* Startseite: Figur */
.figur { display: grid; gap: var(--m-3); align-items: center; }
.figur__zeichen { --zeichen-groesse: 8rem; }
.figur__text { display: grid; gap: var(--m-2); max-width: 36rem; }
.figur__text > p { font-family: var(--schrift-text); font-size: var(--g-text); }
.figur__text > .figur__formel { font-size: var(--g-titel-2); font-style: italic; font-weight: 650; color: var(--akzent); line-height: 1.1; }
@media (min-width: 48rem) {
  .figur { grid-template-columns: auto 1fr; gap: var(--m-6); }
  .figur__zeichen { --zeichen-groesse: 13rem; }
}

/* Übersichtsseite (Alter, Thema, alle Geschichten) */
.uebersicht__kopf { display: grid; gap: var(--m-3); padding-block: var(--m-3) var(--m-4); }
.uebersicht__kopf h1 { font-size: var(--g-titel-1); max-width: 16ch; }
.nachbarn {
  display: flex;
  justify-content: space-between;
  gap: var(--m-2);
  max-width: 40rem;
  font-weight: 700;
}
.nachbarn a { display: inline-flex; align-items: center; min-height: var(--ziel); }
.einleitung {
  max-width: 40rem;
  font-family: var(--schrift-text);
  font-size: var(--g-text);
  line-height: var(--zeile-text);
  margin-bottom: var(--m-6);
}
.einleitung p + p { margin-top: 0.8em; }
@media (min-width: 64rem) {
  .uebersicht { display: grid; grid-template-columns: 22rem 1fr; gap: var(--m-8); align-items: start; }
  .uebersicht .einleitung { margin-bottom: 0; }
}

/* Geschichte: Randspalte mit Legende */
.geschichte__rand { padding-top: var(--m-3); }
@media (min-width: 64rem) {
  .geschichte__rand { position: relative; padding-top: calc(var(--m-3) + 0.5rem); }
  .geschichte__rand .legende { flex-direction: column; border-top: 0; padding: 0 var(--m-3) 0 0; gap: var(--m-2); }
  .geschichte__rand .legende div { flex-direction: column; gap: 0.1rem; }
}

/* Buch-Hinweis und „Noch eine?“ stehen in der Flucht der Lesespalte */
@media (min-width: 64rem) {
  .nach-geschichte { padding-left: 10rem; max-width: calc(10rem + 52rem); }
}

/* Druck: nur der Text, schwarz auf weiß (KDP-10) */
@media print {
  .buendchen, .kopf, .brotkrumen, .legende, .buch, .noch-eine, .fuss, .motiv, .zeichen, .zeigen::before { display: none !important; }
  body { background: #fff; color: #000; }
  .formel { color: #000; }
}

/* erzeugt von werkzeug/strick.ts für „Sockenmond“, nicht von Hand ändern */
.wortmarke {
  aspect-ratio: 58 / 7;
  -webkit-mask: url("marke/wortmarke.svg") no-repeat center / contain;
  mask: url("marke/wortmarke.svg") no-repeat center / contain;
}
.wortmarke--klein {
  -webkit-mask-image: url("marke/wortmarke-pixel.svg");
  mask-image: url("marke/wortmarke-pixel.svg");
}

/*
 * Sockenmond · was die Site über design/site.css hinaus braucht.
 * Nur Rollen und Maße aus tokens.css, keine neuen Farben.
 */

/* Lücken: Angaben, die vor dem Livegang noch fehlen (S8). Absichtlich auffällig. */
.luecke {
  padding: 0 0.3em;
  border-radius: 3px;
  background: color-mix(in srgb, var(--senf) 40%, transparent);
  outline: 1.5px dashed var(--text);
  color: var(--text);
  font-family: var(--schrift-ui);
  font-size: 0.85em;
  font-weight: 700;
}

/* Geschichte: Herkunft unter der Infozeile (SEO-15) */
.geschichte__herkunft { font-size: var(--g-klein); color: var(--text-leise); }
.geschichte__herkunft a { display: inline-block; padding-block: 0.6rem; }

/* Mitmach-Vers und Buch-Hinweis in der Breite der Lesespalte */
.nach-geschichte .vers { max-width: var(--breite-lesen); margin-top: 0; }

/* Buch-Hinweis, Phase B */
.buch__kauf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--m-3); margin-top: var(--m-1); }

/* Vormerken: abgeschaltet, solange kein zink-Endpunkt gesetzt ist (ADR-0025: sichtbar, mit Grund) */
.vormerken__aus { margin: 0; padding: 0; border: 0; min-width: 0; }
.vormerken__aus :disabled { opacity: 0.55; cursor: not-allowed; }
.vormerken__hinweis { font-size: var(--g-klein); }
.vormerken__meldung { font-weight: 700; }
.vormerken__meldung:empty { display: none; }
.vormerken__falle, .formular-falle { position: absolute; left: -100vw; width: 1px; height: 1px; overflow: hidden; }
.vormerken__einwilligung a { display: inline-block; padding-block: 0.6rem; }

/* „Noch eine?“: Wege zur Übersicht (SEO-26) */
.noch-eine__mehr { display: flex; flex-wrap: wrap; gap: 0 var(--m-3); margin-top: var(--m-2); font-weight: 700; }
.noch-eine__mehr a { display: inline-flex; align-items: center; min-height: var(--ziel); }

/* Rückmeldung nach „Noch eine?“ (site/rueckmeldung.ts); ohne Endpunkt sichtbar, aber abgeschaltet (ADR-0025) */
.rueckmeldung { max-width: var(--breite-lesen); }
.rueckmeldung h2 { font-size: var(--g-titel-3); margin-bottom: var(--m-2); }
.rueckmeldung__formular, .rueckmeldung__aus { display: grid; gap: var(--m-1); }
.rueckmeldung__formular { margin-top: var(--m-2); }
.rueckmeldung__aus { margin: 0; padding: 0; border: 0; min-width: 0; }
.rueckmeldung__aus :disabled { opacity: 0.55; cursor: not-allowed; }
.rueckmeldung__formular label { margin-top: var(--m-1); font-weight: 700; }
.rueckmeldung__frei { font-weight: 400; color: var(--text-leise); }
.rueckmeldung__formular textarea,
.rueckmeldung__formular select {
  min-height: 3rem;
  padding: 0.6rem 0.9rem;
  border: 2px solid var(--text);
  border-radius: var(--rund);
  background: var(--grund);
  color: var(--text);
  font: inherit;
}
.rueckmeldung__formular textarea { min-height: 8rem; resize: vertical; }
.rueckmeldung__formular select { justify-self: start; }
.rueckmeldung__formular .knopf { justify-self: start; margin-top: var(--m-1); }
.rueckmeldung__hinweis { font-size: var(--g-klein); color: var(--text-leise); }
.rueckmeldung__hinweis a { display: inline-block; padding-block: 0.6rem; }
.rueckmeldung__meldung { font-weight: 700; }
.rueckmeldung__meldung:empty { display: none; }
@media print { .rueckmeldung { display: none !important; } }

/* Nachbar-Altersseiten mit Pfeilen statt Zeichen (ADR-0022) */
.nachbarn .pfeil { flex: none; width: 1.25em; height: 1.25em; }
.nachbarn a { gap: 0.25em; }
.nachbarn--liste { justify-content: flex-start; flex-wrap: wrap; gap: 0 var(--m-3); }

/* Textseiten: Über uns, Impressum, Datenschutz, Fehlerseite */
.textseite {
  max-width: 40rem;
  padding-block: var(--m-3) var(--m-4);
  font-family: var(--schrift-text);
  font-size: var(--g-text);
  line-height: var(--zeile-text);
}
.textseite h1 { font-size: var(--g-titel-1); margin-bottom: var(--m-4); }
.textseite h2 { font-size: var(--g-titel-3); margin: var(--m-6) 0 var(--m-2); }
.textseite p + p { margin-top: 0.8em; }
.textseite code { font-size: 0.85em; overflow-wrap: anywhere; }
.textseite__auftakt { font-size: var(--g-titel-3); line-height: 1.35; }
.textseite__hinweis { font-family: var(--schrift-ui); font-size: var(--g-klein); font-weight: 700; color: var(--text-leise); }
.textseite__liste { margin: var(--m-3) 0 0; padding-left: 1.2em; }
.textseite__liste a { display: inline-block; padding-block: 0.5rem; }

/* Titelillustration im Kopf der Geschichte (design/ILLUSTRATIONEN.md) */
.titelbild { width: min(100%, 27rem); aspect-ratio: 3 / 2; }
@media print { .titelbild { display: none !important; } }

/* Partnerbereich /empfehlungen/ (strategie/PARTNERSEITEN-RECHT.md): eigener Rahmen ohne Ringel (PR-18) */
body.partnerbereich { --akzent: var(--text); }
body.partnerbereich .buendchen { background: var(--grund-tief); }
.partnerseite { max-width: 44rem; padding-block: var(--m-3) var(--m-6); font-family: var(--schrift-text); font-size: var(--g-text); line-height: var(--zeile-text); }
.partnerseite h1 { font-size: var(--g-titel-2); }
.partnerseite h2, .ratgeber__text h2 { font-size: var(--g-titel-3); margin: var(--m-4) 0 var(--m-2); }
.partnerseite p + p, .ratgeber__text p + p { margin-top: 0.8em; }
.partnerseite a, .partnerkarte a, .ratgeber-anriss a { display: inline-block; padding-block: 0.5rem; }
/* PR-01: voll deckend, mindestens Fließtextgröße, nie eingeklappt */
.anzeige-hinweis { margin: var(--m-2) 0; padding: var(--m-2); border: 2px solid var(--text); border-radius: var(--rund); background: var(--grund-tief); color: var(--text); font-family: var(--schrift-ui); font-size: var(--g-text); }
.anzeige-marke { font-family: var(--schrift-ui); font-size: var(--g-klein); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.partner__stand { font-family: var(--schrift-ui); font-size: var(--g-klein); color: var(--text-leise); }
.partner__steckbrief { display: grid; gap: var(--m-1); margin: var(--m-3) 0 0; font-family: var(--schrift-ui); font-size: var(--g-ui); }
.partner__steckbrief div { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr; gap: var(--m-2); }
.partner__steckbrief dt { font-weight: 700; }
.partner__steckbrief dd { margin: 0; }
.partner__aelter { margin-top: var(--m-2); font-weight: 700; }
.werbelink-erklaerung { margin-top: var(--m-2); font-family: var(--schrift-ui); font-size: var(--g-klein); color: var(--text-leise); }
.gutscheincode { margin: var(--m-4) 0; padding: var(--m-3); border: 2px dashed var(--text); border-radius: var(--rund); background: var(--grund-tief); }
.gutscheincode h2 { margin-top: var(--m-1); }
.gutscheincode__code code { font-family: var(--schrift-ui); font-size: var(--g-titel-3); font-weight: 800; letter-spacing: 0.06em; }
.gutscheincode__bedingungen { margin: var(--m-2) 0; padding-left: 1.2em; font-family: var(--schrift-ui); font-size: var(--g-ui); }
.leitlinie { margin: var(--m-4) 0; padding: var(--m-2) var(--m-3); border-left: 4px solid var(--linie); }
.leitlinie a { display: inline; }
.leitlinie blockquote { margin: 0 0 var(--m-2); font-style: italic; }
.partner__belege ul { padding-left: 1.2em; font-family: var(--schrift-ui); font-size: var(--g-ui); }
.ratgeber__text { max-width: var(--breite-lesen); margin-bottom: var(--m-6); font-family: var(--schrift-text); font-size: var(--g-text); line-height: var(--zeile-text); }
.partnerkarten, .ratgeber-anriss { display: grid; gap: var(--m-3); margin: var(--m-3) 0 var(--m-6); padding: 0; list-style: none; }
.partnerkarte { padding: var(--m-2) var(--m-3); border: 1px solid var(--linie); border-radius: var(--rund); background: var(--grund-tief); }
.partnerkarte h3 { font-size: var(--g-titel-3); }