/* =========================================================================
   papier.css — das Papier-Blatt: EINE Quelle für Farben, Schrift, Kanten
   und die Papier-Bausteine. Fünf Leser: style.css (Schaufenster), UEB_CSS in
   build-site.js (Kopfzeile Lese-Übung), chrome in build-web.js (Kopfzeile
   Rechen-Übung), apps/lese-engine.html und scripts/mathe/build-uebung.js
   (beide tragen dieselben Werte als Literale, weil die verkaufte Einzeldatei
   nichts nachladen darf — website/papier.test.js prüft, dass sie gleich sind).

   WARUM: Cover und Spielwelt teilen einen Papier-Look (Cremegrund, Tinte,
   Gold, harte Kanten). Die Website war die Ausreißerin — Lavendel, Indigo,
   weiche Glow-Schatten. Spec: docs/superpowers/specs/2026-09-20-papier-stil-design.md

   Die Werte stammen aus reading.css der Spielwelt (Codex), bis auf --syl-b:
   dessen #367ba6 liegt im Lesekasten bei Kontrast 3,9 — Silben sind Fließtext
   und brauchen 4,5. #2b6a95 schafft 4,9 und bleibt sichtbar heller als Silbe A.
   Alle Kontraste gerechnet, nicht geschätzt (siehe Spec, Abschnitt 1).
   ========================================================================= */

/* Nunito, selbst gehostet: keine Anfrage an Google, kein CDN. Eine variable
   Datei (400–900), nur Latin, 39 KB. Lizenz: fonts/OFL.txt. swap = Text steht
   sofort in der Ersatzschrift und wechselt, sobald die Datei da ist. */
@font-face{
  font-family:"Nunito";
  src:url("/assets/fonts/nunito.woff2") format("woff2");
  font-weight:400 900;font-style:normal;font-display:swap;
}

:root{
  --papier:#fbf4e4;      /* Seitengrund */
  --karte:#fffaf0;       /* Karten, Kopfzeile, Antwortkarten */
  --lesekasten:#f6ebd2;  /* Lesetext-Kasten, Regalbrett, abgesetzte Abschnitte */
  --tinte:#17394c;       /* Text, Überschriften, Primärknopf */
  --tinte-tief:#0f2634;  /* Kante unter Tinte-Flächen */
  --creme-text:#fff8e8;  /* Schrift auf Tinte */
  --gedaempft:#466774;   /* Nebentext */
  --linie:#d9d2bc;       /* Ränder, harte Kanten */
  --linie-dunkel:#c9bf9f;
  --gold:#efbc55;        /* Akzent: Sterne, Sekundärknopf, Textmarker */
  --gold-tief:#c9942f;
  --gold-hell:#f5dea0;   /* Textmarker-Strich */
  --syl-a:#204d71;       /* dunkle Silbe, Kontrast 8,1 auf Creme */
  --syl-b:#2b6a95;       /* helle Silbe, Kontrast 5,3 auf Creme */
  --gruen:#31875a; --gruen-bg:#e8f3e7;
  --rot:#b4483e;   --rot-bg:#fbebe2;
  /* Bandfarbe: auf der Buchseite gesetzt (aus katalog.json), sonst Tinte.
     Sie erscheint nur als Akzent — Reiter, Fortschritt, Silbenschalter —
     nie als Fläche. */
  --band:var(--tinte); --band-dunkel:var(--tinte-tief);
  --kante:0 4px 0 var(--linie);
  --kante-tinte:0 4px 0 var(--tinte-tief);
  --kante-gold:0 4px 0 var(--gold-tief);
  --radius:16px;
  --riss:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 26' preserveAspectRatio='none'><path d='M0 26V12l9-4 11 6 14-9 12 5 10-7 16 6 13-3 9 7 15-8 12 3 14-6 11 8 13-4 12 5 17-9 9 6 14-2 12 7 15-8 10 4 13-6 12 8 14-3 11-5 13 7 12-2 12 5 14-8 10 6 13-4 12 3 9-6 12 7 12-3v14z'/></svg>");
  --schrift:"Nunito","Century Gothic","Trebuchet MS",sans-serif;

  /* Aliase für die bestehenden Selektoren in style.css, UEB_CSS und chrome.
     So bleibt der alte Name lesbar, der Wert kommt aus dem Papier-Blatt. */
  --bg:var(--papier); --card:var(--karte); --ink:var(--tinte); --muted:var(--gedaempft);
  --brand:var(--tinte); --brand-dark:var(--tinte-tief); --tcol:var(--tinte);
  --accent:var(--gold); --accent2:var(--gold);
  --primary:var(--tinte); --primary-dark:var(--tinte-tief);
}

/* Papierkorn: ein winziges SVG-Rauschen, sehr blass, fixiert. Kein Bild, kein
   Download. Liegt unter allem (z-index -1) und fängt keine Klicks. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.35;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- Bausteine ---------- */

/* Karte: liegt auf dem Blatt (1 px warme Linie, 4 px harte Kante), schwebt nicht. */
.p-karte{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);box-shadow:var(--kante)}

/* Knöpfe: drei Gewichte. Gedrückt senkt sich der Knopf um 3 px, die Kante wird 1 px. */
.p-knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:900;
  padding:12px 22px;border-radius:999px;border:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:transform .08s,box-shadow .08s}
.p-knopf.prim{background:var(--tinte);color:var(--creme-text);box-shadow:var(--kante-tinte)}
.p-knopf.gold{background:var(--gold);color:var(--tinte);box-shadow:var(--kante-gold)}
.p-knopf.leise{background:var(--karte);color:var(--tinte);border-color:var(--linie);box-shadow:var(--kante)}
.p-knopf:active{transform:translateY(3px)}
.p-knopf.prim:active{box-shadow:0 1px 0 var(--tinte-tief)}
.p-knopf.gold:active{box-shadow:0 1px 0 var(--gold-tief)}
.p-knopf.leise:active{box-shadow:0 1px 0 var(--linie)}

/* Chip: Auswahl-Pille. an = Tinte. */
.p-chip{display:inline-block;font:inherit;font-weight:800;padding:8px 14px;border-radius:999px;
  border:1px solid var(--linie);background:var(--karte);color:var(--tinte);cursor:pointer}
.p-chip.an,.p-chip[aria-pressed="true"]{background:var(--tinte);color:var(--creme-text);border-color:var(--tinte)}

/* Gerissene Kante: 26 px, SVG-Pfad als Maske, Farbe des Abschnitts darunter.
   Als Element (.p-riss) oder als ::before über einem abgesetzten Abschnitt. */
.p-riss{display:block;height:26px;background:var(--lesekasten);
  -webkit-mask:var(--riss) center/100% 100% no-repeat;mask:var(--riss) center/100% 100% no-repeat}
/* Abgesetzter Abschnitt MIT Risskante als Vorspann. Die Kante ist eine
   Hintergrund-Lage desselben Elements, keine Maske und kein zweites Element:
   Zwei Elemente, die an einer Bruchteil-Pixel-Grenze zusammenstossen
   (Abschnittsbeginn lag bei 755,22 px), lassen dort eine helle Haarlinie —
   beide Kanten werden weichgezeichnet, keine deckt voll. Hier liegt die
   gefuellte SVG-Kante (oben, 26 px) ueber einer Farbflaeche, die schon 6 px
   frueher beginnt; die weiche Unterkante des SVG liegt damit im gleichfarbigen
   Grund. Unten dieselbe Form, gefuellt in der helleren Seitenfarbe
   (%23fbf4e4 = --papier): sie liegt ueber der Farbflaeche und frisst sich von
   unten hinein — die gefuellte Haelfte ist die untere, darum NICHT gedreht. Der Abschnitt braucht je 26 px mehr Innenabstand
   oben und unten (siehe #was).
   Die Fuellfarbe im SVG ist --lesekasten als Literal (%23f6ebd2) — in einer
   data-URI gibt es kein var(). */
.p-abschnitt{position:relative;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 26' preserveAspectRatio='none'><path fill='%23f6ebd2' d='M0 26V12l9-4 11 6 14-9 12 5 10-7 16 6 13-3 9 7 15-8 12 3 14-6 11 8 13-4 12 5 17-9 9 6 14-2 12 7 15-8 10 4 13-6 12 8 14-3 11-5 13 7 12-2 12 5 14-8 10 6 13-4 12 3 9-6 12 7 12-3v14z'/></svg>") top/100% 26px no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 26' preserveAspectRatio='none'><path fill='%23fbf4e4' d='M0 26V12l9-4 11 6 14-9 12 5 10-7 16 6 13-3 9 7 15-8 12 3 14-6 11 8 13-4 12 5 17-9 9 6 14-2 12 7 15-8 10 4 13-6 12 8 14-3 11-5 13 7 12-2 12 5 14-8 10 6 13-4 12 3 9-6 12 7 12-3v14z'/></svg>") bottom/100% 26px no-repeat,
    /* Fläche endet 8 px vor dem Rand: bis ganz unten schimmerte sie bei krummer
       Abschnittshöhe als feine Linie unter der Risskante durch (Sarah 11.10.2026). */
    linear-gradient(var(--lesekasten),var(--lesekasten)) 0 20px/100% calc(100% - 28px) no-repeat}

/* Regalbrett: eine Reihe Bücher, leicht gedreht, auf einem Brett aus Papier. */
.p-regal{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;
  padding:0 26px 44px;align-items:end}
.p-regal>*{transform:rotate(-1.2deg)}
.p-regal>*:nth-child(2){transform:rotate(.8deg)}
.p-regal>*:nth-child(3){transform:rotate(-.5deg)}
.p-regal>*:hover{transform:translateY(-6px) rotate(0)}
.p-regal::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:16px;border-radius:4px;
  background:var(--lesekasten);border:1px solid var(--linie);box-shadow:0 6px 0 var(--linie),0 14px 26px #17394c1a}
@media(max-width:760px){ .p-regal{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:0 14px 30px} }

/* Reiter: kleine Papierlasche oben links in der Bandfarbe — statt eines farbigen Balkens. */
.p-reiter{position:absolute;top:-1px;left:16px;width:38px;height:12px;border-radius:0 0 8px 8px;
  background:var(--band,var(--tinte))}

/* Papierstern: ein bis drei je Seite, nicht mehr. */
.p-stern{display:inline-block;color:var(--gold);text-shadow:0 3px 0 var(--gold-tief);line-height:1;transform:rotate(-8deg)}

/* Textmarker in Gold statt Farbverlauf-Text. */
.p-mark{background:linear-gradient(180deg,transparent 58%,var(--gold-hell) 58%);padding:0 2px}