/* ==========================================================================
   Knobelbande — Designsystem „Detektiv-Notizbuch" (Entscheidung 006)
   Regeln und Komponenten-Übersicht: 05-gemeinsam/design/CLAUDE.md
   Lebende Referenz: /designsystem/ (gebaut aus vorlagen/designsystem.html)

   Aufbau dieser Datei:
     1. Schriften (@font-face, lokal)
     2. Tokens (CSS-Variablen) — die Gruppen-Kommentare liest build.py für /designsystem/
     3. Grundstil
     4. Layout: Kopf, Menü, Inhalt, Fuß
     5. Flächen und Texturen
     6. Komponenten
     7. Seitenbausteine (Rätselseite, Listen)
     8. Hilfsklassen
     9. Bewegung, Druck
   ========================================================================== */


/* 1. Schriften ------------------------------------------------------------- */
/* Lokal aus /statisch/schriften/, Lizenz OFL: 05-gemeinsam/schriften/ */

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/statisch/schriften/nunito-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/statisch/schriften/nunito-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/statisch/schriften/nunito-latin-800-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Patrick Hand";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/statisch/schriften/patrick-hand-latin-400-normal.woff2") format("woff2");
}


/* 2. Tokens ---------------------------------------------------------------- */

:root {
  /* Gruppe: Papier */
  --papier: #fdf8ec;
  --papier-weiss: #fffdf7;
  --papier-alt: #f6eedb;
  --papier-kraft: #e8d9b8;
  --papier-kante: #dccba5;

  /* Gruppe: Tinte und Stifte */
  --tinte: #1c2a4a;
  --tinte-weich: #3a4767;
  --bleistift: #55524b;
  --bleistift-hell: #8a8478;
  --blaustift: #1f5bb8;
  --blaustift-hell: #dbe7fb;
  --rotstift: #b8232b;
  --gruenstift: #1d6e40;
  --sternfarbe: #a86f00;

  /* Gruppe: Linien */
  --linie: #b5c7e3;
  --linie-karo: #dde6f2;
  --linie-rand: #e59a9a;
  --linie-stark: #1c2a4a;

  /* Gruppe: Kennfarben je Rätselart (Textmarker) */
  --farbe-scherzfragen: #ffe14d;
  --farbe-raetselfragen: #8fe0a6;
  --farbe-ratekrimis: #ffa3bd;
  --farbe-krimiraetsel: #b8c2dc;
  --farbe-sudoku: #94d0ff;
  --farbe-labyrinth: #ffc46b;
  --farbe-zahlenmauer: #ffab9a;
  --farbe-geheimschrift: #d4c2ff;
  --farbe-nonogramm: #8fe3d6;
  --farbe-logical: #b0b8ff;
  --farbe-suchsel: #c8ec7c;
  --farbe-tresor: #f5b3ec;
  --farbe-pinnwand: #ff9a9a;
  --farbe-wuerfel: #e2c290;

  /* Gruppe: Kennfarben dunkel (Schrift, Rahmen) */
  --farbe-scherzfragen-dunkel: #7a5900;
  --farbe-raetselfragen-dunkel: #1b6a37;
  --farbe-ratekrimis-dunkel: #a01f48;
  --farbe-krimiraetsel-dunkel: #2f3d66;
  --farbe-krimiraetsel-hell: #e6eaf4;  /* Grund des Grusel-Hinweises */
  --farbe-sudoku-dunkel: #19589a;
  --farbe-labyrinth-dunkel: #8a4b00;
  --farbe-zahlenmauer-dunkel: #a3321c;
  --farbe-geheimschrift-dunkel: #5b3a9e;
  --farbe-nonogramm-dunkel: #0d6b61;
  --farbe-logical-dunkel: #353d9c;
  --farbe-suchsel-dunkel: #4b6a10;
  --farbe-tresor-dunkel: #8b2a7d;
  --farbe-pinnwand-dunkel: #a11d2a;
  --farbe-wuerfel-dunkel: #6b4520;

  /* Gruppe: Klebezettel */
  --zettel-gelb: #fff0a3;
  --zettel-rosa: #ffd9e3;
  --zettel-gruen: #d6f4d2;
  --zettel-blau: #d4ebff;
  --klebeband: rgba(236, 222, 180, .78);
  --klebeband-rand: rgba(160, 140, 90, .25);

  /* Gruppe: Rückmeldung */
  --erfolg: #1d6e40;
  --erfolg-hell: #dcf3e2;
  --fehler: #b3261e;
  --fehler-hell: #fde3df;
  --hinweis: #1f5bb8;
  --hinweis-hell: #dbe7fb;

  /* Gruppe: Schriftfamilien */
  --schrift-grund: "Nunito", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --schrift-hand: "Patrick Hand", "Comic Sans MS", "Chalkboard SE", "Segoe Print", cursive;

  /* Gruppe: Schriftgrößen */
  --groesse-klein: 1rem;
  --groesse-text: 1.125rem;
  --groesse-gross: 1.3125rem;
  --groesse-h3: 1.5rem;
  --groesse-h2: clamp(1.75rem, 1.4rem + 1.4vw, 2.125rem);
  --groesse-h1: clamp(2.25rem, 1.7rem + 2.6vw, 3.25rem);
  --groesse-riesig: clamp(2.75rem, 2rem + 4vw, 4.5rem);

  /* Gruppe: Abstände */
  --abstand-1: .25rem;
  --abstand-2: .5rem;
  --abstand-3: .75rem;
  --abstand-4: 1rem;
  --abstand-5: 1.5rem;
  --abstand-6: 2rem;
  --abstand-7: 3rem;
  --abstand-8: 4.5rem;

  /* Gruppe: Radien */
  --radius-klein: 6px;
  --radius-mittel: 10px;
  --radius-gross: 16px;
  --radius-rund: 999px;
  --radius-krakel: 14px 220px 12px 200px / 200px 12px 220px 14px;

  /* Gruppe: Schatten */
  --schatten-flach: 0 1px 0 rgba(90, 70, 30, .1), 0 2px 4px rgba(90, 70, 30, .08);
  --schatten-papier: 0 1px 1px rgba(90, 70, 30, .1), 0 6px 14px -6px rgba(90, 70, 30, .28);
  --schatten-zettel: 1px 2px 0 rgba(90, 70, 30, .06), 4px 12px 18px -10px rgba(90, 70, 30, .45);
  --schatten-gehoben: 0 2px 2px rgba(90, 70, 30, .08), 0 14px 26px -12px rgba(90, 70, 30, .45);
  --schatten-knopf: 0 3px 0 var(--tinte);

  /* Gruppe: Maße */
  --zeile: 1.6875rem;
  --breite-text: 44rem;
  --breite-seite: 64rem;
  --tippflaeche: 2.75rem;
  --fokus: 0 0 0 3px var(--papier-weiss), 0 0 0 6px var(--blaustift);

  /* Kennfarbe der aktuellen Seite — body.art-<art> setzt sie um */
  --farbe-art: var(--farbe-scherzfragen);
  --farbe-art-dunkel: var(--tinte);

  color-scheme: light;
}

.art-scherzfragen  { --farbe-art: var(--farbe-scherzfragen);  --farbe-art-dunkel: var(--farbe-scherzfragen-dunkel); }
.art-raetselfragen { --farbe-art: var(--farbe-raetselfragen); --farbe-art-dunkel: var(--farbe-raetselfragen-dunkel); }
.art-ratekrimis  { --farbe-art: var(--farbe-ratekrimis);  --farbe-art-dunkel: var(--farbe-ratekrimis-dunkel); }
.art-krimiraetsel  { --farbe-art: var(--farbe-krimiraetsel);  --farbe-art-dunkel: var(--farbe-krimiraetsel-dunkel); }
.art-sudoku        { --farbe-art: var(--farbe-sudoku);        --farbe-art-dunkel: var(--farbe-sudoku-dunkel); }
.art-labyrinth { --farbe-art: var(--farbe-labyrinth); --farbe-art-dunkel: var(--farbe-labyrinth-dunkel); }
.art-zahlenmauer { --farbe-art: var(--farbe-zahlenmauer); --farbe-art-dunkel: var(--farbe-zahlenmauer-dunkel); }
.art-geheimschrift { --farbe-art: var(--farbe-geheimschrift); --farbe-art-dunkel: var(--farbe-geheimschrift-dunkel); }
.art-nonogramm { --farbe-art: var(--farbe-nonogramm); --farbe-art-dunkel: var(--farbe-nonogramm-dunkel); }
.art-logical { --farbe-art: var(--farbe-logical); --farbe-art-dunkel: var(--farbe-logical-dunkel); }
.art-suchsel { --farbe-art: var(--farbe-suchsel); --farbe-art-dunkel: var(--farbe-suchsel-dunkel); }
.art-tresor { --farbe-art: var(--farbe-tresor); --farbe-art-dunkel: var(--farbe-tresor-dunkel); }
.art-pinnwand { --farbe-art: var(--farbe-pinnwand); --farbe-art-dunkel: var(--farbe-pinnwand-dunkel); }
.art-wuerfel { --farbe-art: var(--farbe-wuerfel); --farbe-art-dunkel: var(--farbe-wuerfel-dunkel); }


/* 3. Grundstil ------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--abstand-5);
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--tinte);
  background-color: var(--papier);
  /* Karopapier, sehr zart, plus Papierfaser */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    linear-gradient(var(--linie-karo) 1px, transparent 1px),
    linear-gradient(90deg, var(--linie-karo) 1px, transparent 1px);
  background-size: 160px 160px, 24px 24px, 24px 24px;
  background-position: 0 0, -1px -1px, -1px -1px;
  font-family: var(--schrift-grund);
  font-size: var(--groesse-text);
  line-height: 1.5;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--schrift-hand);
  font-weight: 400;
  line-height: 1.15;
  color: var(--tinte);
  margin: var(--abstand-6) 0 var(--abstand-3);
  letter-spacing: .01em;
  text-wrap: balance;
}
h1 { font-size: var(--groesse-h1); margin-top: var(--abstand-5); }
h2 { font-size: var(--groesse-h2); }
h3 { font-size: var(--groesse-h3); }
h4 { font-size: var(--groesse-gross); }

p, ul, ol, dl { margin: 0 0 var(--abstand-4); }
ul, ol { padding-left: 1.4em; }
li + li { margin-top: var(--abstand-1); }
strong, b { font-weight: 800; }
small { font-size: var(--groesse-klein); }

a {
  color: var(--blaustift);
  text-decoration-thickness: 2px;
  text-underline-offset: .18em;
  text-decoration-color: color-mix(in srgb, var(--blaustift) 45%, transparent);
}
a:hover { text-decoration-color: currentColor; }

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

::selection { background: var(--farbe-art); color: var(--tinte); }

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

hr {
  border: 0;
  height: 3px;
  margin: var(--abstand-6) 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='6' viewBox='0 0 60 6'%3E%3Cpath d='M0 3c10-3 20 3 30 0s20-3 30 0' fill='none' stroke='%238a8478' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x center / 60px 6px;
  height: 6px;
}

code, pre, kbd {
  font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: .9em;
}
code { background: var(--papier-alt); padding: .05em .3em; border-radius: 4px; }
pre {
  background: var(--papier-weiss);
  border: 1px solid var(--papier-kante);
  border-radius: var(--radius-mittel);
  padding: var(--abstand-3) var(--abstand-4);
  overflow-x: auto;
  line-height: 1.45;
}
pre code { background: none; padding: 0; }

table { border-collapse: collapse; }

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  vertical-align: -.25em;
  fill: none;
  stroke: currentColor;
}
.icon--klein { width: 1em; height: 1em; vertical-align: -.15em; }
.icon--gross { width: 2rem; height: 2rem; }
.icon--riesig { width: 3rem; height: 3rem; }


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

.sprunglink {
  position: absolute;
  left: var(--abstand-4);
  top: -10rem;
  z-index: 100;
  padding: var(--abstand-2) var(--abstand-4);
  background: var(--tinte);
  color: var(--papier-weiss);
  border-radius: var(--radius-mittel);
  font-weight: 800;
}
.sprunglink:focus { top: var(--abstand-2); }

/* Kopf: Heft-Umschlag mit Logo-Schriftzug, Navigation und Notizbuch */
.kopf {
  position: relative;
  background: var(--papier-weiss);
  border-bottom: 2px solid var(--tinte);
  box-shadow: 0 4px 0 -2px var(--papier-kraft);
}
.kopf__innen {
  max-width: var(--breite-seite);
  margin: 0 auto;
  padding: var(--abstand-3) var(--abstand-4) 0;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--abstand-2) var(--abstand-4);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-2);
  color: var(--tinte);
  text-decoration: none;
  line-height: 1;
  min-height: var(--tippflaeche);
  justify-self: start;
}
/* Wortmarke aus 04-grafiken (B4): das o ist eine Lupe. Höhe fest, Breite folgt. */
.logo__bild {
  display: block;
  height: clamp(2.6rem, 2.1rem + 2vw, 3.4rem);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}
.logo__lupe {
  width: 2.1rem;
  height: 2.1rem;
  stroke-width: 2.4;
  color: var(--tinte);
  transform: rotate(-8deg);
}
.logo__text {
  font-family: var(--schrift-hand);
  font-size: clamp(1.9rem, 1.5rem + 2vw, 2.6rem);
  letter-spacing: .01em;
  padding: 0 .15em;
  background: linear-gradient(100deg, transparent .2em, var(--farbe-scherzfragen) .3em, var(--farbe-scherzfragen) calc(100% - .2em), transparent calc(100% - .1em)) no-repeat 0 82% / 100% .45em;
}
.logo__text b { font-weight: 400; color: var(--rotstift); }
.logo__spruch {
  display: block;
  font-family: var(--schrift-hand);
  font-size: 1.05rem;
  color: var(--bleistift);
  margin-top: .2rem;
  letter-spacing: .02em;
}

.kopf__notizbuch {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-2);
  min-height: var(--tippflaeche);
  padding: 0 var(--abstand-3);
  border: 2px solid var(--tinte);
  border-radius: var(--radius-krakel);
  background: var(--zettel-gelb);
  color: var(--tinte);
  font-weight: 800;
  font-size: var(--groesse-klein);
  text-decoration: none;
  box-shadow: 2px 2px 0 var(--tinte);
}
.kopf__notizbuch:hover { background: var(--farbe-scherzfragen); }
.kopf__notizbuch { white-space: nowrap; }
@media (max-width: 26rem) { .kopf__notizbuch-mein { display: none; } }
.kopf__notizbuch[aria-current="page"] { background: var(--farbe-scherzfragen); }
.kopf__notizbuch .icon { width: 1.35em; height: 1.35em; }

/* Navigation im Kopf (Entscheidung 007, E2; J9 für 14 Arten). Bei jeder Breite ein Knopf „Rätselarten“
   (<details>), der die Kacheln aller Arten nach Gruppen aufklappt (.artkacheln, Abschnitt 7b) — am Handy
   im Fluss unter dem Knopf, ab 42rem als Blatt über dem Inhalt. Daneben ab 42rem Bereichs-Links
   (.kopfnav__link: heute „Alle Rätsel“, später „Spiele“ usw. nach 014). Ab 64rem steht alles in einer
   Zeile: Logo, Navigation, Notizbuch. Die Kennfarbe der aktuellen Art zeigt .artenwahl__aktiv im Knopf. */
.kopfnav {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--abstand-2) var(--abstand-4);
  min-width: 0;
  margin: var(--abstand-1) 0 var(--abstand-3);
}
.artenwahl { flex: 1 1 auto; min-width: 0; }
.artenwahl__knopf {
  display: flex;
  align-items: center;
  gap: var(--abstand-2);
  min-height: var(--tippflaeche);
  padding: 0 var(--abstand-3);
  border: 2px solid var(--tinte);
  border-radius: var(--radius-krakel);
  background: var(--papier-alt);
  color: var(--tinte);
  font-weight: 800;
  font-size: var(--groesse-klein);
  cursor: pointer;
  list-style: none;
  box-shadow: 2px 2px 0 var(--tinte);
  user-select: none;
  white-space: nowrap;
}
.artenwahl__knopf::-webkit-details-marker { display: none; }
.artenwahl__knopf::marker { content: ""; }
.artenwahl__knopf .icon { width: 1.35em; height: 1.35em; flex: none; }
/* Pfeil als CSS-Winkel: zeigt zu nach unten, offen nach oben */
.artenwahl__knopf::after {
  content: "";
  flex: none;
  width: .55em;
  height: .55em;
  margin: 0 var(--abstand-1) .2em auto;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg);
}
.artenwahl__knopf:hover,
.artenwahl[open] > .artenwahl__knopf { background: var(--zettel-gelb); }
.artenwahl[open] > .artenwahl__knopf::after { transform: rotate(-135deg); margin-bottom: -.25em; }
/* Aktuelle Art im Knopf, in Kennfarbe (body.art-<art>) */
.artenwahl__aktiv {
  min-width: 0;
  margin-left: auto;
  padding: 0 var(--abstand-2);
  border-radius: var(--radius-klein);
  background: var(--farbe-art);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.artenwahl__knopf:has(.artenwahl__aktiv)::after { margin-left: 0; }
.artenwahl__inhalt { margin-top: var(--abstand-3); }
.artenwahl__alle { margin: var(--abstand-3) 0 0; }
.artenwahl__alle a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tippflaeche);
  font-weight: 800;
}

/* Bereichs-Links neben dem Knopf (erst ab 42rem; am Handy steht „Alle Rätsel“ im Feld) */
.kopfnav__liste { display: none; list-style: none; margin: 0; padding: 0; }
.kopfnav__liste li { margin: 0; }
.kopfnav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tippflaeche);
  padding: 0 var(--abstand-2);
  color: var(--tinte);
  font-weight: 800;
  font-size: var(--groesse-klein);
  text-decoration: none;
  white-space: nowrap;
}
.kopfnav__link:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .25em; }
/* aktueller Bereich: Textmarker */
.kopfnav__link[aria-current] {
  background: linear-gradient(transparent 55%, var(--farbe-scherzfragen) 55%, var(--farbe-scherzfragen) 90%, transparent 90%);
}

@media (min-width: 42rem) {
  .kopf__innen { position: relative; grid-template-columns: auto 1fr auto; padding-top: var(--abstand-4); }
  .kopf__notizbuch { grid-column: 3; grid-row: 1; }
  .artenwahl { flex: none; }
  .kopfnav__liste { display: flex; flex-wrap: wrap; gap: var(--abstand-2); }
  /* Feld als Blatt über dem Inhalt, so breit wie der Kopf (.kopf__innen ist der Bezug) */
  .artenwahl__inhalt {
    position: absolute;
    top: 100%;
    left: var(--abstand-4);
    right: var(--abstand-4);
    z-index: 20;
    margin: 0;
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
    padding: var(--abstand-5);
    background: var(--papier-weiss);
    border-radius: 0 0 var(--radius-gross) var(--radius-gross);
    box-shadow: var(--schatten-gehoben);
  }
}
@media (min-width: 64rem) {
  .kopfnav { grid-column: 2; grid-row: 1; margin: 0; }
  .kopf__innen { padding-bottom: var(--abstand-3); }
  /* Kacheln im Kopf liegen quer: Icon links, Name rechts — vier Zeilen statt acht Kacheln hoch */
  .artenwahl .artkachel {
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--abstand-2);
    min-height: var(--tippflaeche);
    padding: var(--abstand-2) var(--abstand-3);
    text-align: left;
  }
}

/* Inhalt */
.inhalt {
  flex: 1 0 auto;
  width: 100%;
  max-width: calc(var(--breite-text) + 2 * var(--abstand-4));
  margin: 0 auto;
  padding: var(--abstand-4) var(--abstand-4) var(--abstand-7);
}
.inhalt--breit { max-width: calc(var(--breite-seite) + 2 * var(--abstand-4)); }

/* Rahmen mit Seitenleiste (Entscheidung 008). Nur wenn basis.html ihn schreibt: Werbung aktiv oder
   build.py --werbeplaetze, und nur auf Start, Übersichten und Rätselseiten. Unter 64rem einspaltig,
   die Leiste entfällt. Ohne Werbung gibt es weder .rahmen noch .rahmen__leiste im HTML. */
.rahmen { flex: 1 0 auto; width: 100%; }
.rahmen__leiste { display: none; }
@media (min-width: 64rem) {
  /* body.mit-seitenleiste (basis.html): Kopf, Rahmen und Fuß teilen sich dieselbe Breite */
  .mit-seitenleiste {
    --breite-leiste: calc(300px + 2 * var(--abstand-3) + 2px); /* 300 px Anzeige plus Kastenrand */
    --breite-rahmen: calc(var(--breite-seite) + var(--breite-leiste) + var(--abstand-5) + 3 * var(--abstand-4));
  }
  .mit-seitenleiste .kopf__innen,
  .mit-seitenleiste .fuss__innen { max-width: var(--breite-rahmen); }
  .mit-seitenleiste .werbeplatz--fuss { max-width: calc(var(--breite-rahmen) - 2 * var(--abstand-4)); }
  .rahmen {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--breite-leiste);
    column-gap: var(--abstand-5);
    align-items: start;
    max-width: var(--breite-rahmen);
    margin: 0 auto;
    padding-right: var(--abstand-4);
  }
  .rahmen__leiste {
    display: block;
    position: sticky;
    top: var(--abstand-4);
    padding-top: var(--abstand-4);
  }
}

/* Fuß: Kraftpapier-Rückseite des Hefts */
.fuss {
  margin-top: var(--abstand-6);
  background: var(--papier-kraft);
  border-top: 2px solid var(--tinte);
  color: var(--tinte);
  font-size: var(--groesse-klein);
}
.fuss__innen {
  max-width: var(--breite-seite);
  margin: 0 auto;
  padding: var(--abstand-5) var(--abstand-4) var(--abstand-6);
  display: grid;
  gap: var(--abstand-3);
  justify-items: center;
  text-align: center;
}
.fuss__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--abstand-1) var(--abstand-4);
}
.fuss__links li { margin: 0; }
.fuss__links a {
  color: var(--tinte);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  min-height: var(--tippflaeche);
}
.fuss__spruch { font-family: var(--schrift-hand); font-size: var(--groesse-gross); margin: 0; }
.fuss__klein { margin: 0; color: var(--tinte-weich); }
.fuss__titel { margin: 0 0 calc(-1 * var(--abstand-2)); font-weight: 700; }


/* 5. Flächen und Texturen -------------------------------------------------- */

.flaeche-karo {
  background-color: var(--papier-weiss);
  background-image:
    linear-gradient(var(--linie-karo) 1px, transparent 1px),
    linear-gradient(90deg, var(--linie-karo) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: -1px -1px;
}
.flaeche-karo--deutlich {
  background-image:
    linear-gradient(color-mix(in srgb, var(--linie) 70%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--linie) 70%, transparent) 1px, transparent 1px);
}

/* Linienpapier: Zeilenabstand = Zeilenhöhe, roter Randstrich links */
.flaeche-linien {
  background-color: var(--papier-weiss);
  background-image:
    linear-gradient(90deg, transparent 2.1rem, var(--linie-rand) 2.1rem, var(--linie-rand) calc(2.1rem + 2px), transparent calc(2.1rem + 2px)),
    repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--zeile) - 1px), var(--linie) calc(var(--zeile) - 1px), var(--linie) var(--zeile));
  background-position: 0 0, 0 calc(var(--abstand-4) - 6px);
  padding-left: calc(2.1rem + var(--abstand-4));
}
.flaeche-linien--ohne-rand { background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--zeile) - 1px), var(--linie) calc(var(--zeile) - 1px), var(--linie) var(--zeile)); padding-left: var(--abstand-4); }

.flaeche-kraft {
  background-color: var(--papier-kraft);
  color: var(--tinte);
}


/* 6. Komponenten ----------------------------------------------------------- */

/* 6.1 Notizzettel (Klebezettel) ------------------------------------------- */
.notizzettel {
  --zettel: var(--zettel-gelb);
  --drehung: -1.2deg;
  position: relative;
  background: var(--zettel);
  background-image: linear-gradient(170deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, .03));
  padding: var(--abstand-5) var(--abstand-4) var(--abstand-4);
  margin: var(--abstand-5) 0;
  box-shadow: var(--schatten-zettel);
  transform: rotate(var(--drehung));
  border-radius: 2px 2px 2px 2px / 2px 2px 18px 2px;
}
.notizzettel > :last-child { margin-bottom: 0; }
.notizzettel__titel {
  font-family: var(--schrift-hand);
  font-size: var(--groesse-h3);
  line-height: 1.15;
  margin: 0 0 var(--abstand-2);
}
.notizzettel--rosa { --zettel: var(--zettel-rosa); --drehung: 1deg; }
.notizzettel--gruen { --zettel: var(--zettel-gruen); --drehung: -.6deg; }
.notizzettel--blau { --zettel: var(--zettel-blau); --drehung: .8deg; }
.notizzettel--gerade { --drehung: 0deg; }
.notizzettel--hand { font-family: var(--schrift-hand); font-size: var(--groesse-gross); line-height: 1.35; }
/* Saisonblock der Startseite (p3-saisonblock): Zeilen je Anlass im Zettel, versteckte mit [hidden] */
.saison__liste { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--abstand-4); }
.saison__zeile { margin: 0; }
.saison__zeile > p { margin: 0 0 var(--abstand-2); }
.saison__zeile > :last-child { margin-bottom: 0; }

/* 6.2 Klebeband (Modifikator an jedem Behälter) --------------------------- */
.mit-klebeband { position: relative; }
.mit-klebeband::before,
.mit-klebeband--ecken::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: -.85rem;
  left: 50%;
  width: 6.5rem;
  height: 1.6rem;
  margin-left: -3.25rem;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .18) 0 2px, transparent 2px 7px),
    var(--klebeband);
  border-left: 1px dashed var(--klebeband-rand);
  border-right: 1px dashed var(--klebeband-rand);
  box-shadow: 0 1px 2px rgba(90, 70, 30, .15);
  transform: rotate(-3deg);
  clip-path: polygon(0 6%, 4% 0, 9% 8%, 14% 0, 100% 0, 97% 12%, 100% 26%, 96% 42%, 100% 58%, 97% 74%, 100% 90%, 95% 100%, 0 100%, 3% 86%, 0 70%, 4% 54%, 0 38%, 3% 22%);
  pointer-events: none;
}
.mit-klebeband--links::before { left: 1.2rem; margin-left: 0; transform: rotate(-8deg); }
.mit-klebeband--rechts::before { left: auto; right: 1.2rem; margin-left: 0; transform: rotate(7deg); }
.mit-klebeband--ecken::before { left: -1.2rem; top: -.4rem; margin-left: 0; width: 5rem; transform: rotate(-38deg); }
.mit-klebeband--ecken::after { left: auto; right: -1.2rem; top: -.4rem; margin-left: 0; width: 5rem; transform: rotate(38deg); }

/* 6.3 Büroklammer (Modifikator) ------------------------------------------- */
.mit-bueroklammer { position: relative; }
.mit-bueroklammer::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -1.6rem;
  right: 1.4rem;
  width: 1.3rem;
  height: 3.3rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 60'%3E%3Cpath d='M16 18V46a6 6 0 0 1-12 0V10a8 8 0 0 1 16 0v38a10 10 0 0 1-20 0V22' fill='none' stroke='%236f7480' stroke-width='2.4' stroke-linecap='round' transform='translate(2 2) scale(.84)'/%3E%3C/svg%3E") no-repeat center / contain;
  transform: rotate(8deg);
  filter: drop-shadow(1px 2px 1px rgba(60, 50, 30, .25));
  pointer-events: none;
}

/* 6.4 Karteikarte ---------------------------------------------------------- */
.karteikarte {
  position: relative;
  background-color: var(--papier-weiss);
  background-image:
    linear-gradient(var(--linie-rand), var(--linie-rand)),
    linear-gradient(var(--papier-weiss), var(--papier-weiss)),
    repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--zeile) - 1px), color-mix(in srgb, var(--linie) 55%, transparent) calc(var(--zeile) - 1px), color-mix(in srgb, var(--linie) 55%, transparent) var(--zeile));
  background-size: 100% 2px, 100% 3.4rem, 100% 100%;
  background-position: 0 3.4rem, 0 0, 0 calc(3.4rem + 2px);
  background-repeat: no-repeat, no-repeat, repeat;
  border: 1px solid var(--papier-kante);
  border-radius: var(--radius-klein);
  box-shadow: var(--schatten-papier);
  padding: var(--abstand-4) var(--abstand-4) var(--abstand-4);
  margin: 0 0 var(--abstand-5);
}
.karteikarte__kopf {
  min-height: calc(3.4rem - var(--abstand-4));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-2);
  margin-bottom: var(--abstand-3);
}
.karteikarte__titel {
  font-family: var(--schrift-hand);
  font-size: var(--groesse-h3);
  line-height: 1.15;
  margin: 0;
}
.karteikarte__text { margin: 0 0 var(--abstand-3); }
.karteikarte__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-2);
  margin-top: var(--abstand-3);
}
.karteikarte > :last-child { margin-bottom: 0; }
.karteikarte--blanko { background-image: none; }

/* 6.5 Rätselkarte (Link-Karte in Listen; Kennfarbe als Textmarker-Kante) -- */
.raetselkarten {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--abstand-5);
  display: grid;
  gap: var(--abstand-4);
}
.raetselkarten > li { margin: 0; }
@media (min-width: 40rem) {
  .raetselkarten { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--abstand-5); }
}

.raetselkarte {
  --karte-farbe: var(--farbe-art);
  --karte-dunkel: var(--farbe-art-dunkel);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--abstand-2);
  height: 100%;
  padding: var(--abstand-4) var(--abstand-4) var(--abstand-4) calc(var(--abstand-4) + 10px);
  background:
    linear-gradient(90deg, var(--karte-farbe) 0, var(--karte-farbe) 10px, transparent 10px) no-repeat,
    var(--papier-weiss);
  border: 2px solid var(--tinte);
  border-radius: var(--radius-mittel);
  box-shadow: 3px 3px 0 var(--tinte);
  color: var(--tinte);
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
a.raetselkarte:hover,
a.raetselkarte:focus-visible {
  transform: translate(-2px, -2px) rotate(-.4deg);
  box-shadow: 5px 5px 0 var(--tinte);
}
a.raetselkarte:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--tinte); }
.raetselkarte__art {
  font-size: var(--groesse-klein);
  font-weight: 800;
  color: var(--karte-dunkel);
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-1);
}
.raetselkarte__titel {
  font-family: var(--schrift-hand);
  font-size: var(--groesse-h3);
  line-height: 1.15;
  margin: 0;
}
.raetselkarte__anriss { margin: 0; color: var(--tinte-weich); }
.raetselkarte__meta {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-2);
  padding-top: var(--abstand-2);
}
.raetselkarte .stempel { position: absolute; right: var(--abstand-3); top: var(--abstand-3); font-size: var(--groesse-klein); }
.raetselkarte--scherzfragen { --karte-farbe: var(--farbe-scherzfragen); --karte-dunkel: var(--farbe-scherzfragen-dunkel); }
.raetselkarte--raetselfragen { --karte-farbe: var(--farbe-raetselfragen); --karte-dunkel: var(--farbe-raetselfragen-dunkel); }
.raetselkarte--ratekrimis { --karte-farbe: var(--farbe-ratekrimis); --karte-dunkel: var(--farbe-ratekrimis-dunkel); }
.raetselkarte--krimiraetsel { --karte-farbe: var(--farbe-krimiraetsel); --karte-dunkel: var(--farbe-krimiraetsel-dunkel); }
.raetselkarte--sudoku { --karte-farbe: var(--farbe-sudoku); --karte-dunkel: var(--farbe-sudoku-dunkel); }
.raetselkarte--labyrinth { --karte-farbe: var(--farbe-labyrinth); --karte-dunkel: var(--farbe-labyrinth-dunkel); }
.raetselkarte--zahlenmauer { --karte-farbe: var(--farbe-zahlenmauer); --karte-dunkel: var(--farbe-zahlenmauer-dunkel); }
.raetselkarte--geheimschrift { --karte-farbe: var(--farbe-geheimschrift); --karte-dunkel: var(--farbe-geheimschrift-dunkel); }
.raetselkarte--nonogramm { --karte-farbe: var(--farbe-nonogramm); --karte-dunkel: var(--farbe-nonogramm-dunkel); }
.raetselkarte--logical { --karte-farbe: var(--farbe-logical); --karte-dunkel: var(--farbe-logical-dunkel); }
.raetselkarte--suchsel { --karte-farbe: var(--farbe-suchsel); --karte-dunkel: var(--farbe-suchsel-dunkel); }
.raetselkarte--tresor { --karte-farbe: var(--farbe-tresor); --karte-dunkel: var(--farbe-tresor-dunkel); }
.raetselkarte--pinnwand { --karte-farbe: var(--farbe-pinnwand); --karte-dunkel: var(--farbe-pinnwand-dunkel); }
.raetselkarte--wuerfel { --karte-farbe: var(--farbe-wuerfel); --karte-dunkel: var(--farbe-wuerfel-dunkel); }

/* 6.6 Stempel -------------------------------------------------------------- */
.stempel {
  --stempel-farbe: var(--rotstift);
  --stempel-drehung: -8deg;
  display: inline-block;
  padding: .15em .55em .1em;
  border: .2em solid var(--stempel-farbe);
  border-radius: .35em;
  outline: 1px solid var(--stempel-farbe);
  outline-offset: -.42em;
  color: var(--stempel-farbe);
  font-family: var(--schrift-grund);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: .14em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  transform: rotate(var(--stempel-drehung));
  mix-blend-mode: multiply;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.6 2.15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.6 2.15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}
.stempel--geloest { --stempel-farbe: var(--gruenstift); }
.stempel--geheim { --stempel-farbe: var(--rotstift); --stempel-drehung: 6deg; }
.stempel--neu { --stempel-farbe: var(--blaustift); --stempel-drehung: -4deg; }
.stempel--entwurf { --stempel-farbe: var(--bleistift); --stempel-drehung: -3deg; font-size: var(--groesse-klein); }
.stempel--gross { font-size: clamp(1.6rem, 1rem + 3vw, 2.4rem); }
.stempel--auf { animation: stempel-auf .35s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes stempel-auf {
  0% { opacity: 0; transform: rotate(var(--stempel-drehung)) scale(1.8); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: rotate(var(--stempel-drehung)) scale(1); }
}

/* 6.7 Knöpfe --------------------------------------------------------------- */
.knopf {
  --knopf-grund: var(--papier-weiss);
  --knopf-text: var(--tinte);
  --knopf-rand: var(--tinte);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-2);
  min-height: var(--tippflaeche);
  min-width: var(--tippflaeche);
  padding: var(--abstand-2) var(--abstand-4);
  border: 2px solid var(--knopf-rand);
  border-radius: var(--radius-krakel);
  background: var(--knopf-grund);
  color: var(--knopf-text);
  box-shadow: var(--schatten-knopf);
  font: inherit;
  font-weight: 800;
  font-size: var(--groesse-text);
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .08s ease, box-shadow .08s ease, background-color .15s ease;
  touch-action: manipulation;
}
.knopf:hover { --knopf-grund: var(--papier-alt); }
.knopf:active { transform: translateY(3px); box-shadow: 0 0 0 var(--tinte); }
.knopf:focus-visible { outline: none; box-shadow: var(--schatten-knopf), var(--fokus); }
.knopf:disabled,
.knopf[aria-disabled="true"] {
  cursor: not-allowed;
  --knopf-grund: var(--papier-alt);
  --knopf-text: var(--bleistift);
  --knopf-rand: var(--bleistift-hell);
  box-shadow: none;
  transform: none;
}
.knopf .icon { width: 1.3em; height: 1.3em; stroke-width: 2.2; }

.knopf--primaer { --knopf-grund: var(--tinte); --knopf-text: var(--papier-weiss); box-shadow: 0 3px 0 #0b1328; }
.knopf--primaer:hover { --knopf-grund: #2a3a60; }
.knopf--primaer:active { box-shadow: 0 0 0 #0b1328; }
.knopf--sekundaer { --knopf-grund: var(--papier-weiss); }
.knopf--marker { --knopf-grund: var(--farbe-art); }
.knopf--marker:hover { --knopf-grund: color-mix(in srgb, var(--farbe-art) 70%, var(--papier-weiss)); }
.knopf--leise {
  --knopf-grund: transparent;
  --knopf-rand: transparent;
  box-shadow: none;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .2em;
}
.knopf--leise:hover { --knopf-grund: var(--papier-alt); }
/* Klein werden nur Schrift und Innenabstand — die Tippfläche bleibt 44 px (--tippflaeche). */
.knopf--klein { min-height: var(--tippflaeche); padding: var(--abstand-1) var(--abstand-3); font-size: var(--groesse-klein); }
.knopf--breit { width: 100%; }
.knopf--icon {
  padding: 0;
  width: var(--tippflaeche);
  border-radius: 46% 54% 50% 50% / 52% 48% 52% 48%;
}
.knopf--icon .icon { width: 1.5rem; height: 1.5rem; }

/* Umschalter: aria-pressed="true|false". Zwei Icons im Knopf, eines je Zustand. */
.knopf--umschalter[aria-pressed="true"] {
  --knopf-grund: var(--farbe-art);
}
.knopf--umschalter .icon--an { display: none; }
.knopf--umschalter[aria-pressed="true"] .icon--an { display: inline-block; }
.knopf--umschalter[aria-pressed="true"] .icon--aus { display: none; }
.knopf--umschalter .text--an { display: none; }
.knopf--umschalter[aria-pressed="true"] .text--an { display: inline; }
.knopf--umschalter[aria-pressed="true"] .text--aus { display: none; }

/* Zähler im Knopf (Reaktionen) */
.knopf__zahl {
  display: inline-block;
  min-width: 1.8em;
  padding: 0 .4em;
  border-radius: var(--radius-rund);
  background: var(--papier-alt);
  border: 1.5px solid currentColor;
  font-size: var(--groesse-klein);
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
  white-space: nowrap;
}
.knopf[aria-pressed="true"] .knopf__zahl { background: var(--papier-weiss); }

.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-3);
  margin: var(--abstand-4) 0;
}

/* 6.8 Aufdeck-Kasten (details/summary) — Lösung und Tipps ohne JavaScript -- */
.aufdecken {
  margin: var(--abstand-4) 0;
  border: 2px dashed var(--tinte);
  border-radius: var(--radius-mittel);
  background: var(--papier-weiss);
}
.aufdecken > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--abstand-3);
  min-height: 3.25rem;
  padding: var(--abstand-2) var(--abstand-4);
  cursor: pointer;
  font-weight: 800;
  color: var(--tinte);
  border-radius: calc(var(--radius-mittel) - 2px);
  -webkit-tap-highlight-color: transparent;
}
.aufdecken > summary::-webkit-details-marker { display: none; }
.aufdecken > summary::after {
  content: "";
  margin-left: auto;
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.6 4.4c2.6 2.4 5 4.9 7.3 7.5-2.3 2.7-4.7 5.2-7.2 7.7' fill='none' stroke='%231c2a4a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform .2s ease;
}
.aufdecken[open] > summary::after { transform: rotate(90deg); }
.aufdecken > summary:hover { background: var(--papier-alt); }
.aufdecken > summary .icon { width: 1.5rem; height: 1.5rem; stroke-width: 2.2; }
.aufdecken__inhalt,
.aufdecken > :not(summary) {
  margin: 0;
  padding: 0 var(--abstand-4) var(--abstand-4);
}
.aufdecken > :not(summary) + :not(summary) { padding-top: 0; }
.aufdecken[open] {
  border-style: solid;
  background-color: var(--zettel-gelb);
  box-shadow: var(--schatten-zettel);
}
.aufdecken[open] > summary { border-bottom: 2px dashed color-mix(in srgb, var(--tinte) 35%, transparent); border-radius: calc(var(--radius-mittel) - 2px) calc(var(--radius-mittel) - 2px) 0 0; margin-bottom: var(--abstand-3); }
.aufdecken[open] > summary:hover { background: transparent; }

/* Tipps: kleiner, blauer Zettel */
.aufdecken--tipp,
.aufdecken.tipp { border-color: var(--blaustift); }
.aufdecken--tipp > summary,
.aufdecken.tipp > summary { color: var(--blaustift); font-weight: 700; min-height: var(--tippflaeche); }
.aufdecken--tipp[open],
.aufdecken.tipp[open] { background-color: var(--zettel-blau); }

/* Lösung: das Aufgedeckte steht in Handschrift wie eine Notiz */
.aufdecken .antwort,
.aufdecken__antwort {
  font-family: var(--schrift-hand);
  font-size: var(--groesse-h3);
  line-height: 1.3;
  color: var(--tinte);
}

/* 6.9 Etiketten ------------------------------------------------------------ */
.etiketten {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-2);
  margin: 0 0 var(--abstand-3);
  padding: 0;
  list-style: none;
}
.etiketten > li { margin: 0; }
.etikett {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  padding: .1em .65em;
  border: 1.5px solid var(--tinte);
  border-radius: var(--radius-krakel);
  background: var(--papier-weiss);
  color: var(--tinte);
  font-size: var(--groesse-klein);
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  text-decoration: none;
}
.etikett .icon { width: 1.1em; height: 1.1em; stroke-width: 2.4; }
.etikett--art { background: var(--farbe-art); }
.etikett--scherzfragen { background: var(--farbe-scherzfragen); }
.etikett--raetselfragen { background: var(--farbe-raetselfragen); }
.etikett--ratekrimis { background: var(--farbe-ratekrimis); }
.etikett--krimiraetsel { background: var(--farbe-krimiraetsel); }
.etikett--sudoku { background: var(--farbe-sudoku); }
.etikett--labyrinth { background: var(--farbe-labyrinth); }
.etikett--zahlenmauer { background: var(--farbe-zahlenmauer); }
.etikett--geheimschrift { background: var(--farbe-geheimschrift); }
.etikett--nonogramm { background: var(--farbe-nonogramm); }
.etikett--logical { background: var(--farbe-logical); }
.etikett--suchsel { background: var(--farbe-suchsel); }
.etikett--tresor { background: var(--farbe-tresor); }
.etikett--pinnwand { background: var(--farbe-pinnwand); }
.etikett--wuerfel { background: var(--farbe-wuerfel); }
.etikett--alter { background: var(--papier-weiss); }
.etikett--entwurf { border-style: dashed; color: var(--bleistift); border-color: var(--bleistift); }
a.etikett:hover { background: var(--papier-alt); }

/* Schwierigkeit: drei Sterne, gefüllt = erreicht */
.schwierigkeit {
  display: inline-flex;
  align-items: center;
  gap: .1em;
  font-size: var(--groesse-klein);
  font-weight: 700;
  color: var(--tinte);
  white-space: nowrap;
}
.schwierigkeit__stern { width: 1.15em; height: 1.15em; stroke-width: 1.8; color: var(--bleistift-hell); }
.schwierigkeit__stern.ist-voll { color: var(--sternfarbe); }
.schwierigkeit__text { margin-left: .3em; }

/* 6.1 Filterleiste --------------------------------------------------------- */
/* Ohne JavaScript taugen die Filterknöpfe nichts — dann aus. Mit JavaScript steht die Leiste von
   Anfang an da, damit die Karten beim Laden nicht nach unten springen (CLS). Die Klasse "js" an
   <html> setzt /js/mit-js.js synchron im <head> (Block kopf in uebersicht.html). */
html:not(.js) .filterleiste { display: none; }
.filterleiste {
  margin: var(--abstand-4) 0 var(--abstand-5);
  padding: var(--abstand-3) var(--abstand-4) var(--abstand-4);
  background: var(--papier-weiss);
  border: 2px solid var(--tinte);
  border-radius: var(--radius-mittel);
  box-shadow: var(--schatten-flach);
  display: grid;
  gap: var(--abstand-3);
}
.filterleiste__kopf {
  display: flex;
  align-items: center;
  gap: var(--abstand-2);
  font-family: var(--schrift-hand);
  font-size: var(--groesse-gross);
  margin: 0;
}
.filterleiste__gruppe {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.filterleiste__titel {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0 0 var(--abstand-2);
  font-weight: 800;
  font-size: var(--groesse-klein);
  color: var(--tinte-weich);
}
.filterleiste__optionen {
  clear: both;
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-2);
}
.filterleiste__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-2);
  font-size: var(--groesse-klein);
  color: var(--tinte-weich);
}
@media (min-width: 40rem) {
  .filterleiste { grid-template-columns: 1fr 1fr; }
  .filterleiste__kopf, .filterleiste__fuss { grid-column: 1 / -1; }
}

/* Chip: Auswahl-Knopf in Filtern (aria-pressed) */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  min-height: var(--tippflaeche);
  padding: 0 var(--abstand-3);
  border: 2px solid var(--tinte);
  border-radius: var(--radius-rund);
  background: var(--papier-weiss);
  color: var(--tinte);
  font: inherit;
  font-size: var(--groesse-klein);
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.chip:hover { background: var(--papier-alt); }
.chip:focus-visible { outline: none; box-shadow: var(--fokus); }
.chip[aria-pressed="true"] {
  background: var(--farbe-art);
  box-shadow: inset 0 0 0 1px var(--tinte);
}
.chip[aria-pressed="true"]::before {
  content: "";
  width: .9em;
  height: .9em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.2 12.8c1.6 1.4 3.2 3 4.7 4.8 2.9-4.4 6.5-8.4 11-11.6' fill='none' stroke='%231c2a4a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* 6.11 Brotkrumen ----------------------------------------------------------- */
.brotkrumen { margin: var(--abstand-2) 0 0; font-size: var(--groesse-klein); }
.brotkrumen ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--abstand-1);
}
.brotkrumen li { margin: 0; display: inline-flex; align-items: center; gap: var(--abstand-1); color: var(--tinte-weich); }
.brotkrumen li + li::before {
  content: "";
  width: .9em;
  height: .9em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.6 4.4c2.6 2.4 5 4.9 7.3 7.5-2.3 2.7-4.7 5.2-7.2 7.7' fill='none' stroke='%2355524b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.brotkrumen a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tippflaeche);
  min-width: var(--tippflaeche);
  font-weight: 700;
}
.brotkrumen [aria-current="page"] { font-weight: 700; color: var(--tinte); }

/* 6.12 Hinweis-Kasten ------------------------------------------------------- */
.hinweis {
  --hinweis-farbe: var(--hinweis);
  --hinweis-grund: var(--hinweis-hell);
  display: flex;
  gap: var(--abstand-3);
  align-items: flex-start;
  margin: var(--abstand-5) 0;
  padding: var(--abstand-4);
  background: var(--hinweis-grund);
  border: 2px solid var(--hinweis-farbe);
  border-left-width: 8px;
  border-radius: var(--radius-klein) var(--radius-mittel) var(--radius-mittel) var(--radius-klein);
  color: var(--tinte);
}
.hinweis > .icon { width: 1.6rem; height: 1.6rem; color: var(--hinweis-farbe); stroke-width: 2.2; margin-top: .05rem; }
.hinweis__inhalt > :last-child { margin-bottom: 0; }
.hinweis__titel { font-weight: 800; margin: 0 0 var(--abstand-1); }
.hinweis--erfolg { --hinweis-farbe: var(--erfolg); --hinweis-grund: var(--erfolg-hell); }
.hinweis--fehler { --hinweis-farbe: var(--fehler); --hinweis-grund: var(--fehler-hell); }
.hinweis--notiz { --hinweis-farbe: var(--farbe-scherzfragen-dunkel); --hinweis-grund: var(--zettel-gelb); }

/* 6.13 Werbeplatz — immer klar als Anzeige abgesetzt (06-werbung/CLAUDE.md) - */
.werbeplatz {
  position: relative;
  max-width: var(--breite-text);
  margin: var(--abstand-6) auto;
  padding: var(--abstand-5) var(--abstand-3) var(--abstand-3);
  border: 1px solid #c9c4b8;
  border-radius: var(--radius-klein);
  background: #f3f1ec;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  clear: both;
}
.werbeplatz__beschriftung {
  position: absolute;
  top: var(--abstand-1);
  left: var(--abstand-3);
  font-size: var(--groesse-klein);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #57534c;
}
/* Feste Mindesthöhe für JEDEN Platz (06-werbung: kein Layout-Springen), nicht nur für Platzhalter. */
.werbeplatz__flaeche { min-height: 90px; }
/* Formate je Platz (06-werbung/werbeplaetze.yaml) — Mindesthöhen gelten auch für echte Anzeigen */
.werbeplatz--unter-raetsel .werbeplatz__flaeche { min-height: 250px; }
.werbeplatz--fuss {
  width: calc(100% - 2 * var(--abstand-4));
  max-width: var(--breite-seite);
  margin: 0 auto; /* .inhalt hat unten schon Abstand */
}
.werbeplatz--fuss .werbeplatz__flaeche { min-height: 100px; }
/* Übersicht (Entscheidung 009): Plätze in der Kartenliste über die ganze Zeile des Rasters */
.raetselkarten > .raetselkarten__anzeige { grid-column: 1 / -1; }
.raetselkarten__anzeige .werbeplatz { max-width: none; margin: var(--abstand-2) 0; }
.werbeplatz--liste-1 .werbeplatz__flaeche,
.werbeplatz--liste-2 .werbeplatz__flaeche,
.werbeplatz--liste-3 .werbeplatz__flaeche,
.werbeplatz--liste-4 .werbeplatz__flaeche,
.werbeplatz--liste-ende .werbeplatz__flaeche { min-height: 250px; }
.werbeplatz--unter-filter .werbeplatz__flaeche { min-height: 100px; }
@media (min-width: 48rem) {
  .werbeplatz--unter-raetsel .werbeplatz__flaeche,
  .werbeplatz--fuss .werbeplatz__flaeche,
  .werbeplatz--liste-1 .werbeplatz__flaeche,
  .werbeplatz--liste-2 .werbeplatz__flaeche,
  .werbeplatz--liste-3 .werbeplatz__flaeche,
  .werbeplatz--liste-4 .werbeplatz__flaeche,
  .werbeplatz--liste-ende .werbeplatz__flaeche,
  .werbeplatz--unter-filter .werbeplatz__flaeche { min-height: 90px; }
}
.rahmen__leiste .werbeplatz { margin: 0; }
.werbeplatz--seitenleiste .werbeplatz__flaeche { min-height: 600px; }
.werbeplatz--zwischenseite { max-width: calc(300px + 2 * var(--abstand-3) + 2px); margin: var(--abstand-4) auto; }
.werbeplatz--zwischenseite .werbeplatz__flaeche { min-height: 250px; }
.werbeplatz--platzhalter .werbeplatz__flaeche {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed #c9c4b8;
  color: #57534c;
  font-size: var(--groesse-klein);
}

/* 6.14 Textmarker, Unterstreichung, Bleistift ------------------------------ */
.textmarker {
  --marker: var(--farbe-art);
  padding: 0 .2em;
  margin: 0 -.05em;
  background: linear-gradient(100deg, transparent .1em, var(--marker) .25em, var(--marker) calc(100% - .2em), transparent calc(100% - .05em)) no-repeat 0 60% / 100% 72%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  border-radius: .3em .1em .35em .15em;
}
.textmarker--gelb, .textmarker--scherzfragen { --marker: var(--farbe-scherzfragen); }
.textmarker--gruen, .textmarker--raetselfragen { --marker: var(--farbe-raetselfragen); }
.textmarker--rosa, .textmarker--ratekrimis { --marker: var(--farbe-ratekrimis); }
.textmarker--krimiraetsel { --marker: var(--farbe-krimiraetsel); }
.textmarker--blau, .textmarker--sudoku { --marker: var(--farbe-sudoku); }
.textmarker--labyrinth { --marker: var(--farbe-labyrinth); }
.textmarker--zahlenmauer { --marker: var(--farbe-zahlenmauer); }
.textmarker--geheimschrift { --marker: var(--farbe-geheimschrift); }
.textmarker--nonogramm { --marker: var(--farbe-nonogramm); }
.textmarker--logical { --marker: var(--farbe-logical); }
.textmarker--suchsel { --marker: var(--farbe-suchsel); }
.textmarker--tresor { --marker: var(--farbe-tresor); }
.textmarker--pinnwand { --marker: var(--farbe-pinnwand); }
.textmarker--wuerfel { --marker: var(--farbe-wuerfel); }

/* Bleistift-Unterstreichung, leicht wellig */
.unterstrichen {
  text-decoration: none;
  padding-bottom: .1em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='6' viewBox='0 0 40 6'%3E%3Cpath d='M0 3.5c6-2 13 1 20-.5s13-2 20 .5' fill='none' stroke='%23b8232b' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 100% / 40px 6px;
}
.unterstrichen--blau {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='6' viewBox='0 0 40 6'%3E%3Cpath d='M0 3.5c6-2 13 1 20-.5s13-2 20 .5' fill='none' stroke='%231f5bb8' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Handschrift-Akzent (Randnotiz in Bleistift) */
.handschrift { font-family: var(--schrift-hand); font-size: 1.15em; line-height: 1.3; }
.bleistift-notiz {
  display: inline-block;
  font-family: var(--schrift-hand);
  font-size: var(--groesse-gross);
  line-height: 1.3;
  color: var(--bleistift);
  transform: rotate(-2deg);
}
.bleistift-notiz .icon { stroke-width: 2; }

/* Eingekreist (wie mit dem Rotstift) */
.eingekreist {
  position: relative;
  display: inline-block;
  padding: 0 .3em;
  margin: 0 .4em;
}
.eingekreist::after {
  content: "";
  position: absolute;
  inset: -.25em -.35em -.2em -.3em;
  border: 2px solid var(--rotstift);
  border-radius: 55% 45% 50% 50% / 60% 50% 50% 40%;
  transform: rotate(-3deg);
  pointer-events: none;
}

/* 6.15 Seitentitel mit Kennfarbe ------------------------------------------- */
.seitentitel { margin: var(--abstand-4) 0 var(--abstand-5); }
.seitentitel__ueber {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-2);
  font-weight: 800;
  font-size: var(--groesse-klein);
  color: var(--farbe-art-dunkel);
  margin: 0;
}
.seitentitel h1,
.seitentitel__titel {
  margin: var(--abstand-1) 0 var(--abstand-2);
}
.seitentitel h1 > span,
.seitentitel__titel > span {
  padding: 0 .12em;
  background: linear-gradient(100deg, transparent .1em, var(--farbe-art) .25em, var(--farbe-art) calc(100% - .2em), transparent calc(100% - .05em)) no-repeat 0 88% / 100% .42em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.seitentitel__text { font-size: var(--groesse-gross); color: var(--tinte-weich); margin: 0; max-width: 38rem; }
/* Einleitung aus mehreren Absätzen (div.seitentitel__text, Übersichtstext aus 02-webseite/sammlungen/) */
.seitentitel__text > :first-child { margin-top: 0; }
.seitentitel__text > :last-child { margin-bottom: 0; }

/* 6.16 Rätsel-Aktionen: Merken und Reaktionen (teile/raetsel-aktionen.html) - */
.raetsel-aktionen {
  margin: var(--abstand-6) 0 var(--abstand-5);
  padding: var(--abstand-4);
  background: var(--papier-weiss);
  border: 2px solid var(--tinte);
  border-radius: var(--radius-mittel);
  box-shadow: var(--schatten-papier);
  display: grid;
  gap: var(--abstand-4);
}
.raetsel-aktionen__titel {
  font-family: var(--schrift-hand);
  font-size: var(--groesse-gross);
  margin: 0;
}
.reaktionen {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--abstand-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.reaktionen > li { margin: 0; min-width: 0; }
@media (min-width: 30rem) { .reaktionen { grid-template-columns: 1fr 1fr; } }
.reaktionen .knopf { width: 100%; justify-content: flex-start; padding-inline: var(--abstand-3); font-size: var(--groesse-klein); border-radius: var(--radius-mittel); }
.reaktionen .knopf__zahl { margin-left: auto; }
@media (min-width: 40rem) {
  .reaktionen { grid-template-columns: repeat(4, 1fr); }
  .reaktionen .knopf { flex-direction: column; justify-content: center; gap: var(--abstand-1); padding-block: var(--abstand-3); }
  .reaktionen .knopf .icon { width: 1.75rem; height: 1.75rem; }
  .reaktionen .knopf__zahl { margin-left: 0; }
}
.knopf--reaktion[aria-pressed="true"] { --knopf-grund: var(--farbe-art); }
.raetsel-aktionen__hinweis { margin: 0; font-size: var(--groesse-klein); color: var(--tinte-weich); }


/* 7. Seitenbausteine -------------------------------------------------------- */

/* Rätselseite: das Rätsel liegt als Karteikarte auf dem Karopapier */
.raetsel {
  position: relative;
  margin: var(--abstand-4) 0 var(--abstand-5);
  padding: var(--abstand-5) var(--abstand-4) var(--abstand-4);
  background: var(--papier-weiss);
  border: 1px solid var(--papier-kante);
  border-radius: var(--radius-klein);
  box-shadow: var(--schatten-papier);
}
.raetsel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 8px;
  background: var(--farbe-art);
  border-radius: var(--radius-klein) var(--radius-klein) 0 0;
}
.raetsel h1 { margin-top: var(--abstand-2); }
.raetsel > :last-child { margin-bottom: 0; }
@media (min-width: 40rem) {
  .raetsel { padding: var(--abstand-6) var(--abstand-6) var(--abstand-5); }
}

.raetsel-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-2);
  font-size: var(--groesse-klein);
  margin: 0 0 var(--abstand-4);
}
.frage {
  font-size: var(--groesse-gross);
  font-weight: 700;
  line-height: 1.45;
  margin: var(--abstand-4) 0 var(--abstand-5);
}
.erklaerung { margin-top: var(--abstand-3); }
.geschichte {
  margin: var(--abstand-4) 0;
}
.anleitung { font-size: var(--groesse-klein); color: var(--tinte-weich); }

/* Startseite: Willkommen */
.willkommen {
  margin: var(--abstand-4) 0 var(--abstand-6);
}
.willkommen h1 { margin-bottom: var(--abstand-3); }
.willkommen__text > p { font-size: var(--groesse-gross); color: var(--tinte-weich); }

.startblock { margin: var(--abstand-7) 0 var(--abstand-5); }
.startblock__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--abstand-2) var(--abstand-4);
  margin-bottom: var(--abstand-4);
}
.startblock__kopf h2 { margin: 0; }

/* Alte Liste aus dem Grundgerüst — weiter gestylt, bis B1 umbaut */
.kartenliste { list-style: none; padding: 0; margin: 0 0 var(--abstand-5); display: grid; gap: var(--abstand-3); }
.kartenliste > li { margin: 0; }
.karte {
  display: block;
  padding: var(--abstand-3) var(--abstand-4) var(--abstand-3) calc(var(--abstand-4) + 8px);
  background: linear-gradient(90deg, var(--farbe-art) 0 8px, transparent 8px) no-repeat, var(--papier-weiss);
  border: 2px solid var(--tinte);
  border-radius: var(--radius-mittel);
  box-shadow: 3px 3px 0 var(--tinte);
  text-decoration: none;
  color: var(--tinte);
  font-family: var(--schrift-hand);
  font-size: var(--groesse-h3);
  line-height: 1.2;
}
.karte:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--tinte); }
.karte small { display: block; font-family: var(--schrift-grund); font-size: var(--groesse-klein); color: var(--tinte-weich); margin-top: var(--abstand-1); }
.leer {
  font-family: var(--schrift-hand);
  font-size: var(--groesse-gross);
  color: var(--bleistift);
  padding: var(--abstand-4);
  border: 2px dashed var(--bleistift-hell);
  border-radius: var(--radius-mittel);
}

/* Textseiten (Über uns, Impressum) */
.textseite { max-width: var(--breite-text); }
.textseite h2 { margin-top: var(--abstand-6); }


/* 7b. Seitenbausteine der Vorlagen (Stufe B1) ------------------------------- */
/* Gehören zu den Vorlagen in 02-webseite/anwendung/vorlagen/; Beispiele auf /designsystem/. */

/* hidden schlägt jedes display (Filterleiste, Knöpfe werden per JS eingeblendet) */
[hidden] { display: none !important; }

/* Rätselseite: Kopf in der Karte */
.raetsel__kopf { position: relative; margin-bottom: var(--abstand-4); }
.raetsel__art {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-2);
  margin: 0;
  font-weight: 800;
  font-size: var(--groesse-klein);
  color: var(--farbe-art-dunkel);
}
.raetsel__art .icon { width: 1.5em; height: 1.5em; stroke-width: 2.2; }
.raetsel .raetsel__titel {
  margin: var(--abstand-1) 0 var(--abstand-3);
  padding-right: 5.5rem; /* Platz für den Entwurf-Stempel */
}
.raetsel__stempel { position: absolute; top: 0; right: 0; }
.raetsel .raetsel-meta { margin-bottom: 0; }
.frage--gross {
  font-size: clamp(1.375rem, 1.2rem + .9vw, 1.75rem);
  line-height: 1.35;
  margin: var(--abstand-5) 0;
  padding: var(--abstand-4) 0 var(--abstand-4) var(--abstand-4);
  border-left: 6px solid var(--farbe-art);
}
.raetsel__anstoss { margin: 0 0 var(--abstand-3); }
.raetsel__tipps { display: grid; gap: var(--abstand-3); margin: var(--abstand-4) 0; }
.raetsel__tipps .aufdecken { margin: 0; }
.aufdecken__stempel { margin: 0; }
.aufdecken__stempel .stempel { font-size: 1rem; }

/* Krimirätsel (Art ratekrimis): Geschichte auf Linienpapier, Text sitzt auf den Linien */
.geschichte.flaeche-linien {
  margin: var(--abstand-5) calc(-1 * var(--abstand-4));
  padding: calc(var(--abstand-4) - 6px) var(--abstand-4) var(--abstand-4) calc(2.1rem + var(--abstand-4));
  line-height: var(--zeile);
  border-top: 1px solid var(--papier-kante);
  border-bottom: 1px solid var(--papier-kante);
}
.geschichte.flaeche-linien p { margin: 0 0 var(--zeile); }
.geschichte.flaeche-linien p:last-child { margin-bottom: 0; }
@media (min-width: 40rem) {
  .geschichte.flaeche-linien { margin-inline: calc(-1 * var(--abstand-6)); padding-right: var(--abstand-6); }
}
.krimi__frage { margin: var(--abstand-6) 0 var(--abstand-5); max-width: 34rem; }
.krimi__frage .frage { margin: 0; }

/* Rätselgeschichten (Art krimiraetsel, Ja-Nein, Entscheidung 010): Beispielfragen, Schlüsselfakten zum Abhaken, Grusel-Hinweis */
.krimi__allein { margin: var(--abstand-5) 0; }
.krimi__allein h2 { font-size: var(--groesse-h3); margin: 0 0 var(--abstand-3); }
.krimi__fakten-titel { margin: var(--abstand-4) 0 var(--abstand-2); }
.krimi__fakten { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--abstand-2); }
.krimi__fakt { display: flex; align-items: center; gap: var(--abstand-3); min-height: 44px; cursor: pointer; }
.krimi__fakt input { width: 1.5rem; height: 1.5rem; flex: none; accent-color: var(--farbe-art-dunkel); }
.krimi__fakt input:checked + span { text-decoration: line-through; opacity: .7; }
.hinweis--grusel { --hinweis-farbe: var(--farbe-krimiraetsel-dunkel); --hinweis-grund: var(--farbe-krimiraetsel-hell); }
.etikett--grusel { background: var(--farbe-krimiraetsel-hell); }

/* Werkzeugzeile (Drucken) am Ende der Rätselkarte */
.raetsel__werkzeug {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-2) var(--abstand-4);
  margin-top: var(--abstand-5);
  padding-top: var(--abstand-4);
  border-top: 2px dashed var(--papier-kante);
}
.raetsel__druckhinweis { margin: 0; font-size: var(--groesse-klein); color: var(--tinte-weich); flex: 1 1 14rem; }

/* Blättern: Vorheriges / Nächstes Rätsel derselben Art */
.blaettern {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--abstand-3);
  margin: var(--abstand-5) 0;
}
@media (min-width: 34rem) { .blaettern { grid-template-columns: 1fr 1fr; } }
.blaettern__link {
  display: flex;
  align-items: center;
  gap: var(--abstand-3);
  min-height: 4rem;
  padding: var(--abstand-3) var(--abstand-4);
  background: var(--papier-weiss);
  border: 2px solid var(--tinte);
  border-radius: var(--radius-mittel);
  box-shadow: 3px 3px 0 var(--tinte);
  color: var(--tinte);
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.blaettern__link:hover,
.blaettern__link:focus-visible { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--tinte); }
.blaettern__link .icon { width: 1.6rem; height: 1.6rem; stroke-width: 2.4; }
.blaettern__link > span { display: grid; min-width: 0; }
.blaettern__richtung { font-size: var(--groesse-klein); font-weight: 800; color: var(--farbe-art-dunkel); }
.blaettern__titel { font-family: var(--schrift-hand); font-size: var(--groesse-gross); line-height: 1.2; }
.blaettern__link--weiter {
  justify-content: space-between;
  text-align: right;
  background: linear-gradient(270deg, var(--farbe-art) 0, var(--farbe-art) 10px, transparent 10px) no-repeat, var(--papier-weiss);
  padding-right: calc(var(--abstand-4) + 10px);
}
.blaettern__link--weiter > span { flex: 1; justify-items: end; }
@media (max-width: 33.99rem) {
  .blaettern__platz { display: none; }
  .blaettern__link--weiter { order: -1; } /* auf dem Handy zuerst: weiter geht's */
}

/* Brotkrumen auf schmalen Handys: die aktuelle Seite steht ohnehin als Überschrift darunter */
@media (max-width: 29.99rem) { .brotkrumen li:last-child:not(:first-child) { display: none; } }

/* Leerer Zähler (vor dem Laden oder ohne JavaScript) bleibt unsichtbar */
.knopf__zahl:empty { display: none; }

/* Startseite: Kopf (Kopfbegriff, Sticker, Einleitung) und daneben das „Rätsel des Tages“. Am Handy steht
   das Rätsel direkt unter der h1, damit Kinder ohne Scrollen mitraten können. */
.willkommen {
  display: grid;
  grid-template-areas: "kopf" "raetsel" "text";
  gap: var(--abstand-4);
  margin: var(--abstand-4) 0 var(--abstand-6);
}
.willkommen__kopf { grid-area: kopf; }
.willkommen__text { grid-area: text; }
.willkommen .tagesraetsel { grid-area: raetsel; }
@media (min-width: 52rem) {
  .willkommen {
    grid-template-columns: minmax(0, 1fr) 24rem;
    grid-template-areas: "kopf raetsel" "text raetsel";
    grid-template-rows: auto 1fr;
    column-gap: var(--abstand-7);
    row-gap: var(--abstand-3);
    align-items: start;
  }
}
.willkommen h1 { margin: var(--abstand-2) 0 var(--abstand-3); font-size: var(--groesse-riesig); }
.willkommen .willkommen__einleitung { margin-top: 0; font-size: var(--groesse-gross); color: var(--tinte-weich); max-width: 36rem; }
.willkommen__knoepfe { display: flex; flex-wrap: wrap; gap: var(--abstand-3); margin: var(--abstand-4) 0 0; }

/* Sticker: farbige Kreise mit den Icons der Startblock-Arten, leicht schief wie aufgeklebt (nur Schmuck,
   deshalb ohne Tinten-Rahmen — der gehört Bedienbarem) */
.sticker { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--abstand-2); }
.sticker__punkt {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin: 0;
  border-radius: 50%;
  background: var(--farbe-art);
  color: var(--tinte);
  box-shadow: var(--schatten-flach);
  transform: rotate(-6deg);
}
.sticker__punkt:nth-child(even) { transform: rotate(7deg) translateY(3px); }
.sticker__punkt:nth-child(3n) { transform: rotate(-2deg) translateY(-2px); }
.sticker__punkt .icon { width: 1.6rem; height: 1.6rem; stroke-width: 2.2; }
@media (min-width: 52rem) { .sticker__punkt { width: 3.5rem; height: 3.5rem; } .sticker__punkt .icon { width: 1.9rem; height: 1.9rem; } }

/* Rätsel des Tages: ein Eintrag sichtbar, /js/tagesraetsel.js wählt nach Datum und blättert weiter */
.tagesraetsel { margin: var(--abstand-3) var(--abstand-1) 0; }
.tagesraetsel__titel {
  display: flex;
  align-items: center;
  gap: var(--abstand-2);
  margin: 0 0 var(--abstand-2);
  font-family: var(--schrift-hand);
  font-size: var(--groesse-h3);
  font-weight: 400;
  line-height: 1.2;
}
.tagesraetsel__titel .icon { width: 1.4rem; height: 1.4rem; color: var(--sternfarbe); }
.tagesraetsel__liste { list-style: none; margin: 0; padding: 0; }
.tagesraetsel__eintrag { margin: 0; }
.tagesraetsel__art { display: inline-flex; align-items: center; gap: var(--abstand-1); margin: 0 0 var(--abstand-1); font-size: var(--groesse-klein); font-weight: 800; color: var(--tinte-weich); }
.tagesraetsel__frage { margin: 0 0 var(--abstand-3); font-size: var(--groesse-gross); font-weight: 700; line-height: 1.4; color: var(--tinte); }
.tagesraetsel .aufdecken--karte { margin: 0; background: var(--papier-weiss); }
.tagesraetsel__mehr { margin: var(--abstand-2) 0 0; font-size: var(--groesse-klein); font-weight: 800; }
.tagesraetsel__mehr a { display: inline-flex; align-items: center; gap: var(--abstand-1); min-height: var(--tippflaeche); }
.tagesraetsel__weiter { margin: var(--abstand-1) 0 0; }

/* Zettel „Zum Loslegen“ als Bild-Variante (teile/loslegen.html, typ "bild"): Rätselbild links, Titel und Knopf
   rechts; die ganze Fläche ist ein Link */
.tagesraetsel__bildlink { display: flex; gap: var(--abstand-4); align-items: center; color: inherit; text-decoration: none; }
.tagesraetsel__bild { flex: none; width: 8rem; height: auto; aspect-ratio: 4 / 5; background: var(--papier-weiss); box-shadow: var(--schatten-flach); transform: rotate(-2deg); }
.tagesraetsel__bildtext { display: flex; flex-direction: column; align-items: flex-start; gap: var(--abstand-2); }
.tagesraetsel__name { font-size: var(--groesse-gross); font-weight: 800; line-height: 1.25; }
.tagesraetsel__bildtext .tagesraetsel__art { display: block; margin: 0; }
.tagesraetsel__bildtext .tagesraetsel__art .icon { vertical-align: -.15em; }
.tagesraetsel__bildlink:hover .tagesraetsel__name { text-decoration: underline; text-decoration-thickness: 2px; }
.tagesraetsel__bildlink:focus-visible { outline: none; box-shadow: var(--fokus); border-radius: var(--radius-klein); }
@media (min-width: 52rem) { .tagesraetsel__bild { width: 9rem; } }

/* Seitenkopf mit Zettel (Übersicht, Sammlung, Landingpage): der Text bleibt schmal, rechts daneben steht
   der Zettel „Zum Loslegen“ statt leerer Fläche. Am Handy steht er unter der Merkmal-Leiste. */
.seitentitel--mit-zettel { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--abstand-7); }
.seitentitel--mit-zettel > .tagesraetsel { margin: var(--abstand-2) var(--abstand-1) var(--abstand-4); }
@media (min-width: 52rem) {
  .seitentitel--mit-zettel { grid-template-columns: minmax(0, 1fr) 22rem; grid-auto-flow: row dense; align-items: start; }
  .seitentitel--mit-zettel > * { grid-column: 1; }
  .seitentitel--mit-zettel > .brotkrumen { grid-column: 1 / -1; }
  .seitentitel--mit-zettel > .tagesraetsel { grid-column: 2; grid-row: 2 / span 6; margin: var(--abstand-3) var(--abstand-1) 0; }
}
@media (max-width: 51.99rem) {
  .seitentitel--mit-zettel > .tagesraetsel { order: 1; }
  .seitentitel--mit-zettel > .seitentitel__text, .seitentitel--mit-zettel > .seitentitel__stand { order: 2; }
}

/* Wischen am Handy (Landingpage): Sprungleiste in einer Zeile, Karten eines Blocks nebeneinander mit
   angeschnittener nächster Karte. Nur der Streifen scrollt, nie die Seite. Ab 48rem wie gewohnt. */
@media screen and (max-width: 47.99rem) {
  .wegleiste--wischen .wegleiste__liste,
  .raetselkarten--wischen {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--abstand-4);
    margin-inline: calc(-1 * var(--abstand-4));
    padding: var(--abstand-1) var(--abstand-4) var(--abstand-3);
    scrollbar-width: thin;
  }
  .wegleiste--wischen .wegleiste__liste > li { flex: none; scroll-snap-align: start; }
  .raetselkarten--wischen { gap: var(--abstand-3); align-items: stretch; }
  .raetselkarten--wischen > li { flex: 0 0 82%; scroll-snap-align: start; }
}

/* Saison und Notizbuch nebeneinander unter den Kacheln */
.startzettel { display: grid; gap: var(--abstand-5); margin: var(--abstand-6) 0; align-items: start; }
@media (min-width: 52rem) { .startzettel { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.startzettel .saison { margin: 0; }
.startzettel__notizbuch { margin: 0; }
.startzettel__notizbuch .notizzettel__titel { display: flex; align-items: center; gap: var(--abstand-2); }
.startzettel__notizbuch p:last-child { margin: var(--abstand-3) 0 0; font-size: var(--groesse-text); }
.einstiege--start > h2 { margin-top: 0; }
.startblock__kopf { align-items: center; }
.startblock__kopf h2 { display: flex; align-items: center; gap: var(--abstand-2); }
.startblock__icon { width: 2.25rem; height: 2.25rem; stroke-width: 2.2; color: var(--farbe-art-dunkel); }
.startblock__alle {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-1);
  min-height: var(--tippflaeche);
  font-weight: 800;
}
.startblock__text { color: var(--tinte-weich); max-width: 40rem; }

/* Kacheln der Rätselarten (teile/artkacheln.html): Kopf am Handy, Startseite, 404.
   Gruppen aus GRUPPEN in build.py; Farbe je Kachel über .art-<art> (setzt --farbe-art). */
.artkacheln { display: grid; gap: var(--abstand-4); }
.artkacheln__titel {
  margin: 0 0 var(--abstand-2);
  font-family: var(--schrift-hand);
  font-size: var(--groesse-gross);
  font-weight: 400;
  line-height: 1.2;
  color: var(--tinte-weich);
}
.artkacheln__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--abstand-2);
}
.artkacheln__liste li { margin: 0; }
.artkachel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-1);
  height: 100%;
  min-height: 4.5rem;
  padding: var(--abstand-2);
  border: 2px solid var(--tinte);
  border-radius: var(--radius-mittel);
  background: var(--farbe-art);
  color: var(--tinte);
  font-weight: 800;
  font-size: var(--groesse-klein);
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  box-shadow: 2px 2px 0 var(--tinte);
}
.artkachel:hover { background: color-mix(in srgb, var(--farbe-art) 60%, var(--papier-weiss)); }
.artkachel[aria-current] { box-shadow: inset 0 -5px 0 var(--tinte), 2px 2px 0 var(--tinte); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.artkachel__icon { width: 1.6rem; height: 1.6rem; flex: none; }
.artkachel__name { max-width: 100%; }
@media (min-width: 40rem) {
  .artkacheln { grid-template-columns: 1fr 1fr; }
}
.startarten { margin: var(--abstand-6) 0; }
.startarten > h2 { margin-top: 0; }
.fehlerseite__arten { margin-top: var(--abstand-7); font-size: var(--groesse-h3); }

/* Merkmal-Leiste (teile/merkmale.html, paket-1 p1-merkmale): Textzeile mit kleinen Icons — bewusst
   keine Chips und keine Rahmen, damit niemand darauf tippt. Bricht ab 360 px sauber um. */
.merkmale {
  list-style: none;
  margin: var(--abstand-2) 0 var(--abstand-3);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-1) var(--abstand-4);
  font-size: var(--groesse-klein);
  font-weight: 700;
  color: var(--tinte-weich);
}
.merkmale__punkt { display: inline-flex; align-items: center; gap: var(--abstand-1); margin: 0; }
.merkmale__punkt .icon { width: 1.15em; height: 1.15em; flex: none; color: var(--farbe-art-dunkel, var(--tinte)); }
.merkmale--kurz { margin: 0 0 var(--abstand-4); font-weight: 600; }
.willkommen .merkmale { margin-top: var(--abstand-3); }

/* Sichtbares Datum unter der Einleitung (p1-datum): „Zuletzt ergänzt am …“ bzw. „Stand: …“ */
.seitentitel__stand { margin: var(--abstand-3) 0 0; font-size: var(--groesse-klein); color: var(--tinte-weich); }

/* Sprungmarken: kleines Inhaltsverzeichnis oben im Erklärteil (p1-sprungmarken); Ziele mit Luft oben */
.sprungmarken { margin: 0 0 var(--abstand-5); }
.sprungmarken__titel { margin: 0 0 var(--abstand-1); font-family: var(--schrift-hand); font-size: var(--groesse-gross); color: var(--tinte-weich); }
.sprungmarken__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--abstand-4); }
.sprungmarken__liste li { margin: 0; }
.sprungmarken__liste a { display: inline-flex; align-items: center; min-height: var(--tippflaeche); font-weight: 700; }
.textseite h2[id] { scroll-margin-top: var(--abstand-5); }

/* Seitenwahl: Blättern großer Übersichten (Konzept 5.3, teile/seitenwahl.html) — normale Links, oben
   und unten. Handy: Zahlen in einer Reihe, darunter Zurück und Weiter; ab 40rem alles in einer Zeile. */
.seitenwahl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "stand stand" "liste liste" "zurueck weiter";
  align-items: center;
  gap: var(--abstand-2) var(--abstand-3);
  margin: var(--abstand-5) 0;
}
@media (min-width: 40rem) {
  .seitenwahl { grid-template-columns: auto 1fr auto; grid-template-areas: "stand stand stand" "zurueck liste weiter"; }
}
.seitenwahl__stand { grid-area: stand; margin: 0; font-size: var(--groesse-klein); color: var(--tinte-weich); text-align: center; }
.seitenwahl__liste {
  grid-area: liste;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--abstand-2);
}
.seitenwahl__liste li { margin: 0; }
.seitenwahl__nr,
.seitenwahl__schritt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35em;
  min-width: var(--tippflaeche);
  min-height: var(--tippflaeche);
  padding: 0 var(--abstand-3);
  border: 2px solid var(--tinte);
  border-radius: var(--radius-mittel);
  background: var(--papier-weiss);
  color: var(--tinte);
  font-weight: 800;
  text-decoration: none;
}
.seitenwahl__nr { padding: 0; }
.seitenwahl__nr[aria-current="page"] { background: var(--farbe-art); box-shadow: inset 0 0 0 1px var(--tinte); }
a.seitenwahl__nr:hover, a.seitenwahl__schritt:hover { background: var(--papier-alt); }
a.seitenwahl__nr:focus-visible, a.seitenwahl__schritt:focus-visible { outline: none; box-shadow: var(--fokus); }
.seitenwahl__schritt .icon { width: 1.2rem; height: 1.2rem; stroke-width: 2.4; }
.seitenwahl__schritt--zurueck { grid-area: zurueck; justify-self: start; }
.seitenwahl__schritt--weiter { grid-area: weiter; justify-self: end; }
.seitenwahl__schritt--leer { visibility: hidden; }

/* Sprungziele über alle Seiten (z. B. Gruselstufen): Der Filter wirkt nur auf die aktuelle Seite */
.seitenwahl-abschnitte { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2) var(--abstand-3); margin: 0 0 var(--abstand-5); }
.seitenwahl-abschnitte__titel { margin: 0; font-weight: 800; }
.seitenwahl-abschnitte__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--abstand-2); }
.seitenwahl-abschnitte__liste li { margin: 0; }
.seitenwahl-abschnitte__link {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  min-height: var(--tippflaeche);
  padding: 0 var(--abstand-3);
  border: 2px solid var(--tinte);
  border-radius: var(--radius-rund);
  background: var(--papier-weiss);
  color: var(--tinte);
  font-size: var(--groesse-klein);
  font-weight: 700;
  text-decoration: none;
}
.seitenwahl-abschnitte__link:hover { background: var(--papier-alt); }
.seitenwahl-abschnitte__link:focus-visible { outline: none; box-shadow: var(--fokus); }
.seitenwahl-abschnitte__seiten { font-weight: 400; color: var(--tinte-weich); }
.raetselkarten__abschnitt { scroll-margin-top: var(--abstand-5); }

/* Kasten in festen Seiten (Markdown-Block mit „>“, z. B. Datenschutz für Kinder): gerader Notizzettel */
.textseite .textkasten { margin: var(--abstand-5) 0; }
.textseite .textkasten h2, .textseite .textkasten h3 { margin-top: 0; font-family: var(--schrift-hand); font-size: var(--groesse-h3); line-height: 1.15; }

/* Hub /raetsel/: alle Arten als Liste nach Gruppen (raetsel.html) — kurz statt Kartenblöcke */
.artliste-gruppe { margin: var(--abstand-6) 0; }
.artliste-gruppe > h2 { margin: 0 0 var(--abstand-4); }
.artliste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--abstand-3); }
.artliste > li { margin: 0; }
.artliste__eintrag {
  display: flex;
  align-items: flex-start;
  gap: var(--abstand-3);
  height: 100%;
  padding: var(--abstand-3) var(--abstand-4) var(--abstand-3) calc(var(--abstand-3) + 8px);
  background: linear-gradient(90deg, var(--farbe-art) 0 8px, transparent 8px) no-repeat, var(--papier-weiss);
  border-radius: var(--radius-mittel);
  box-shadow: var(--schatten-papier);
  color: var(--tinte);
  text-decoration: none;
}
.artliste__eintrag:hover .artliste__name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }
.artliste__icon { width: 2rem; height: 2rem; flex: none; margin-top: var(--abstand-1); color: var(--farbe-art-dunkel); stroke-width: 2.2; }
.artliste__inhalt { min-width: 0; }
.artliste__name { margin: 0; font-family: var(--schrift-hand); font-weight: 400; line-height: 1.2; font-size: var(--groesse-h3); }
.artliste__text { display: block; margin-top: var(--abstand-1); color: var(--tinte-weich); }
.artliste__meta { display: block; margin-top: var(--abstand-1); font-size: var(--groesse-klein); font-weight: 700; color: var(--tinte-weich); }
@media (min-width: 48rem) {
  .artliste { grid-template-columns: 1fr 1fr; }
}

/* Notizbuch (/notizbuch/) — Inhalt von #notizbuch füllt Stufe C1 */
.notizbuch { min-height: 6rem; margin: var(--abstand-5) 0; }
.notizbuch__weiter { margin-top: var(--abstand-5); font-weight: 700; }

/* Sammlungen und Wege weiter (U6, Entscheidung 016) ---------------------------
   .wegleiste: Leiste „Nach Alter: ab 6 · ab 8 · ab 10“, „Mehr zum Thema“, „Für die Schule“ (teile/altersleiste.html);
   Links als Chips (mind. 44 px), aria-current = aktuelle Altersseite.
   .sammlungskacheln: Sammlungen einer Art über dem Filter (Übersicht und Sammlung). */
.wegleiste, .sammlungskacheln { margin: var(--abstand-4) 0; }
.wegleiste__titel {
  display: flex;
  align-items: center;
  gap: var(--abstand-1);
  margin: 0 0 var(--abstand-2);
  font-weight: 800;
  font-size: var(--groesse-klein);
  color: var(--tinte-weich);
}
.wegleiste__titel .icon { width: 1.15em; height: 1.15em; color: var(--farbe-art-dunkel, var(--tinte)); }
.wegleiste__liste, .sammlungskacheln__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--abstand-2); }
.wegleiste__liste > li, .sammlungskacheln__liste > li { margin: 0; max-width: 100%; }
.wegleiste__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tippflaeche);
  max-width: 100%;
  padding: var(--abstand-1) var(--abstand-3);
  border: 2px solid var(--tinte);
  border-radius: var(--radius-rund);
  background: var(--papier-weiss);
  color: var(--tinte);
  font-size: var(--groesse-klein);
  font-weight: 700;
  text-decoration: none;
  overflow-wrap: anywhere;
}
a.wegleiste__link:hover { background: var(--papier-alt); }
a.wegleiste__link:focus-visible { outline: none; box-shadow: var(--fokus); }
.wegleiste__link[aria-current] { background: var(--tinte); color: var(--papier-weiss); }
.sammlungskachel {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--tippflaeche);
  max-width: 100%;
  padding: var(--abstand-2) var(--abstand-3) var(--abstand-2) calc(var(--abstand-3) + 6px);
  background: linear-gradient(90deg, var(--farbe-art) 0 6px, transparent 6px) no-repeat, var(--papier-weiss);
  border: 2px solid var(--tinte);
  border-radius: var(--radius-mittel);
  box-shadow: 2px 2px 0 var(--tinte);
  color: var(--tinte);
  text-decoration: none;
  line-height: 1.2;
}
a.sammlungskachel:hover .sammlungskachel__name { text-decoration: underline; text-decoration-thickness: 2px; }
a.sammlungskachel:focus-visible { outline: none; box-shadow: var(--fokus); }
.sammlungskachel[aria-current] { background: linear-gradient(90deg, var(--farbe-art) 0 6px, transparent 6px) no-repeat, var(--zettel-gelb); }
.sammlungskachel__name { font-weight: 800; }
.sammlungskachel__zahl { font-size: var(--groesse-klein); color: var(--tinte-weich); }
.einstiege { margin: var(--abstand-5) 0; }
.sammlung__zurueck { margin: var(--abstand-5) 0; }
.textseite__weiter { margin: var(--abstand-3) 0 var(--abstand-5); }

/* Karte mit aufklappbarer Antwort (Scherz- und Rätselfragen, 015 E5): Link nur am Titel, über die ganze
   Karte gezogen; die Antwort liegt darüber und bleibt antippbar. */
.raetselkarte__link { color: inherit; text-decoration: none; }
.raetselkarte__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.raetselkarte__link:focus-visible { outline: none; }
.raetselkarte__link:focus-visible::after { box-shadow: var(--fokus); }
.raetselkarte--mit-antwort:hover,
.raetselkarte--mit-antwort:focus-within { transform: translate(-2px, -2px) rotate(-.4deg); box-shadow: 5px 5px 0 var(--tinte); }
.raetselkarte--mit-antwort:hover .raetselkarte__titel { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }
.raetselkarte__frage { margin: 0; }
.raetselkarte__antwort { position: relative; z-index: 1; }
.raetselkarte__antwort .aufdecken--karte { margin: var(--abstand-1) 0 0; }
.aufdecken--karte > summary { min-height: var(--tippflaeche); padding: var(--abstand-1) var(--abstand-3); font-size: var(--groesse-klein); }
.aufdecken--karte > summary .icon { width: 1.2rem; height: 1.2rem; }
.aufdecken--karte > :not(summary) { padding: 0 var(--abstand-3) var(--abstand-3); }

/* Karten im Erklärteil (Abschnitt „ab N Jahren“) und „Mehr davon“ unter dem Rätsel: kleiner */
.textseite .raetselkarten--abschnitt { margin: var(--abstand-3) 0 var(--abstand-4); }
/* Erklärteil auf breiten Seiten (Übersicht, Sammlung, Landingpage): die Karteikarte läuft über die volle
   Breite, damit die Karten darin so viele Spalten haben wie die Liste darüber; Text bleibt auf Lesebreite. */
.inhalt--breit .textseite.karteikarte { max-width: none; }
.inhalt--breit .textseite.karteikarte > :not(.raetselkarten) { max-width: var(--breite-text); }
.raetselkarten--abschnitt .raetselkarte__titel, .raetselkarten--kurz .raetselkarte__titel { font-size: var(--groesse-gross); }
/* U8: Auf Übersichten steht die ganze Kartenliste schon oben — am Handy reichen 2 Beispiele je Abschnitt */
@media screen and (max-width: 47.99rem) { .raetselkarten--handy-kurz > li:nth-child(n+3) { display: none; } }
/* S12-6: Anlass-Seiten am Handy 3 Karten je Art (bis zu 6 ab 48rem), der Rest über die Wege des Blocks */
@media screen and (max-width: 47.99rem) { .raetselkarten--handy-drei > li:nth-child(n+4) { display: none; } }
/* Kartenbild (Paket 5, p5-raetselbilder): das leere Rätsel als WebP 4:5 rechts neben dem Text, am Handy 6rem,
   ab 40rem 7rem breit. Breite und Höhe stehen im HTML (kein Layoutsprung), die Größe setzt nur CSS. */
.raetselkarte--mit-bild {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6rem;
  grid-auto-rows: min-content;
  column-gap: var(--abstand-3);
}
.raetselkarte--mit-bild > * { grid-column: 1; }
.raetselkarte--mit-bild > .raetselkarte__bild {
  grid-column: 2; grid-row: 1 / span 4; align-self: start;
  display: block; width: 6rem; height: auto; aspect-ratio: 4 / 5;
  border: 1px solid var(--linie); border-radius: var(--radius-klein); background: var(--papier);
}
.raetselkarte--mit-bild .raetselkarte__meta { margin-top: 0; }
@media (min-width: 40rem) {
  .raetselkarte--mit-bild { grid-template-columns: minmax(0, 1fr) 7rem; }
  .raetselkarte--mit-bild > .raetselkarte__bild { width: 7rem; }
}

/* Rätselhefte (p5-heft): Abschnitt auf Übersicht und Sammlung, Heftseite am Bildschirm */
.heftleiste { margin: var(--abstand-6) 0 var(--abstand-5); }
.heftleiste__titel { display: flex; align-items: center; gap: var(--abstand-2); margin: 0 0 var(--abstand-2); }
.heftleiste__titel .icon { width: 1.5rem; height: 1.5rem; flex: none; }
.heftleiste__text { margin: 0 0 var(--abstand-3); max-width: 40rem; }
.heft__werkzeug { margin: var(--abstand-4) 0 var(--abstand-5); }
.heft__werkzeug .raetsel__druckhinweis { margin: var(--abstand-2) 0 0; }
.heft__liste { margin: 0 0 var(--abstand-4); padding-left: 1.6em; }
.heft__liste li { margin: 0 0 var(--abstand-1); }
.heft__liste a { display: inline-block; padding: var(--abstand-1) 0; }
@media screen { .heft__liste a { display: inline-flex; align-items: center; min-height: 44px; } } /* Tippziel (S12) */
.mehr-davon { margin: var(--abstand-6) 0 var(--abstand-5); }
.mehr-davon > h2 { margin: 0 0 var(--abstand-3); }
.mehr-davon__sammlungen { margin-bottom: var(--abstand-4); }

/* Landingpages (Thema, Alter): Blöcke je Art mit Zahl und Wegen weiter */
.startblock__zahl { font-weight: 800; color: var(--tinte-weich); }
.startblock__wege { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--abstand-2); }
.startblock__wege > li { margin: 0; max-width: 100%; }
.startblock__wege .knopf { max-width: 100%; white-space: normal; text-align: left; }

/* Ganze Krimirätsel auf Sammlungsseiten (015 E11, teile/geschichte.html) */
.geschichten { list-style: none; margin: 0 0 var(--abstand-5); padding: 0; display: grid; gap: var(--abstand-6); }
.geschichten > li { margin: 0; }
.geschichte-karte { position: relative; scroll-margin-top: var(--abstand-5); }
.geschichte-karte__titel { margin: 0 0 var(--abstand-2); font-family: var(--schrift-hand); font-size: var(--groesse-h2); line-height: 1.15; }
.geschichte-karte__titel a { color: inherit; display: inline-flex; align-items: center; min-height: var(--tippflaeche); }
.geschichte-karte__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2); margin: 0 0 var(--abstand-3); }
.geschichte-karte .krimi__frage { margin: var(--abstand-4) 0; }
.geschichte-karte__weiter { margin: var(--abstand-3) 0 0; }
.geschichte-karte__weiter a { display: inline-flex; align-items: center; gap: var(--abstand-1); min-height: var(--tippflaeche); font-weight: 700; }

/* 404 */
.fehlerseite { padding-top: var(--abstand-5); }
.fehlerseite__stempel { margin-bottom: var(--abstand-3); }
.fehlerseite__zettel { max-width: 26rem; margin-top: var(--abstand-6); }
.fehlerseite__spuren { list-style: none; padding: 0; margin: 0; }
.fehlerseite__spuren a { display: inline-flex; align-items: center; gap: var(--abstand-2); min-height: var(--tippflaeche); font-weight: 700; }

/* Textseiten als Karteikarte */
.textseite.karteikarte { padding: var(--abstand-5); }
.textseite > :first-child { margin-top: 0; }

/* Sudoku-Gitter als Tabelle: ohne JavaScript und im Druck */
.sudoku-blatt {
  border-collapse: collapse;
  margin: var(--abstand-4) auto;
  border: 3px solid var(--tinte);
  background: var(--papier-weiss);
  font-variant-numeric: tabular-nums;
}
.sudoku-blatt td {
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--bleistift-hell);
  text-align: center;
  vertical-align: middle;
  font-size: 1.35rem;
  font-weight: 800;
  padding: 0;
}
.sudoku-blatt td.rand-rechts { border-right: 3px solid var(--tinte); }
.sudoku-blatt tr td.rand-unten { border-bottom: 3px solid var(--tinte); }
.sudoku-blatt--9 td { width: min(2.4rem, 9.5vw); height: min(2.4rem, 9.5vw); font-size: 1.15rem; }

/* Druckblatt: nur im Druck (.nur-druck), Aussehen im Druckblock unten */
.druckblatt__titel { font-weight: 800; margin: 0 0 var(--abstand-2); }
.druckblatt__linie { display: block; height: 2.2em; border-bottom: 1px solid var(--linie); }

/* 8. Hilfsklassen ----------------------------------------------------------- */

.nur-vorlesen {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.nur-druck { display: none; }
.zentriert { text-align: center; }
.gedreht-links { transform: rotate(-1.5deg); }
.gedreht-rechts { transform: rotate(1.5deg); }
.stapel > * + * { margin-top: var(--abstand-4); }
.raster-2 { display: grid; gap: var(--abstand-5); }
@media (min-width: 40rem) { .raster-2 { grid-template-columns: 1fr 1fr; } }


/* 9. Bewegung und Druck ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  a.raetselkarte:hover, a.raetselkarte:focus-visible, .karte:hover { transform: none; }
}

@media print {
  :root {
    --tinte: #000;
    --tinte-weich: #222;
    --bleistift: #333;
    --linie: #999;
    --linie-karo: #ccc;
    --linie-rand: #999;
    --blaustift: #000;
    --rotstift: #000;
    --gruenstift: #000;
    --farbe-scherzfragen-dunkel: #000;
    --farbe-raetselfragen-dunkel: #000;
    --farbe-ratekrimis-dunkel: #000;
    --farbe-krimiraetsel-dunkel: #000;
    --farbe-sudoku-dunkel: #000;
    --farbe-labyrinth-dunkel: #000;
    --farbe-zahlenmauer-dunkel: #000;
    --farbe-geheimschrift-dunkel: #000;
    --farbe-nonogramm-dunkel: #000;
    --farbe-logical-dunkel: #000;
    --farbe-suchsel-dunkel: #000;
    --farbe-tresor-dunkel: #000;
    --farbe-pinnwand-dunkel: #000;
    --farbe-wuerfel-dunkel: #000;
    --farbe-art-dunkel: #000;
  }
  * {
    --farbe-art-dunkel: #000;
    --karte-dunkel: #000;
  }
  @page { margin: 15mm; }
  body {
    background: #fff !important;
    color: #000;
    font-size: 12pt;
    display: block;
  }
  .kopf, .fuss, .werbeplatz, .raetselkarten__anzeige, .kopfnav, .rahmen__leiste, .sprunglink, .brotkrumen, .filterleiste,
  .raetsel-aktionen, .knopf, .chip, .kopf__notizbuch, .nicht-drucken { display: none !important; }
  .nur-druck { display: block; }
  .inhalt { max-width: none; padding: 0; }
  .rahmen { display: block; max-width: none; padding: 0; }
  a { color: #000; text-decoration: none; }
  h1, h2, h3 { color: #000; break-after: avoid; }

  /* Texturen aus, Linien bleiben */
  .raetsel, .karteikarte, .notizzettel, .raetselkarte, .karte, .filterleiste, .hinweis, .aufdecken {
    box-shadow: none !important;
    transform: none !important;
    background-color: #fff !important;
  }
  .raetsel { border: 1px solid #000; padding: 6mm; }
  .raetsel::before { background: #000; height: 2px; }
  .notizzettel { border: 1px solid #000; background-image: none !important; }
  .raetselkarte, .karte { background: #fff !important; border: 1px solid #000; }
  .mit-klebeband::before, .mit-klebeband--ecken::after, .mit-bueroklammer::before { display: none; }
  .flaeche-karo { background-image: linear-gradient(#bbb 1px, transparent 1px), linear-gradient(90deg, #bbb 1px, transparent 1px) !important; }
  .flaeche-linien, .karteikarte { background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--zeile) - 1px), #aaa calc(var(--zeile) - 1px), #aaa var(--zeile)) !important; }
  .flaeche-linien, .karteikarte { background-size: 100% 100% !important; background-position: 0 0 !important; background-repeat: repeat !important; }
  .textmarker, .seitentitel h1 > span, .logo__text { background: none !important; text-decoration: underline; }
  .stempel { mix-blend-mode: normal; -webkit-mask-image: none; mask-image: none; color: #000; border-color: #000; outline-color: #000; }
  .etikett, .etikett--art { background: #fff !important; border-color: #000; }
  .schwierigkeit__stern { color: #999; }
  .schwierigkeit__stern.ist-voll { color: #000; }
  /* Aufdeck-Kasten: im Druck bleibt nur die Überschrift, Lösungen gehören ans Blattende (B1) */
  .aufdecken { border: 1px dashed #000; }
  .aufdecken > summary::after { display: none; }
}

/* Druck der Rätselseiten (Stufe B1): Rätsel oben, Schreiblinien und Tipps darunter,
   die Lösung auf dem Kopf am Blattende (.druckblatt, vorlagen/teile/druckblatt.html). */
@media print {
  .blaettern, .seitenwahl, .seitenwahl-abschnitte, .raetsel__werkzeug, .raetsel__anstoss, .notizbuch__speicher, .merkmale--kurz, .sprungmarken { display: none !important; }
  .raetsel { border: 0; padding: 0; margin: 0; }
  .raetsel::before { display: none; }
  .raetsel__art { color: #000; }
  .raetsel .raetsel__titel { padding-right: 0; margin-bottom: 2mm; font-size: 24pt; }
  .frage--gross { border-left: 2px solid #000; font-size: 15pt; margin: 5mm 0; padding: 1mm 0 1mm 4mm; }
  .geschichte.flaeche-linien { margin: 4mm 0; border: 0; padding: 0 0 0 4mm; background: #fff !important; border-left: 2px solid #999; }
  .geschichte.flaeche-linien p { margin-bottom: 3mm; }
  .krimi__frage { margin: 5mm 0; max-width: none; }
  .krimi__frage .notizzettel__titel { font-size: 13pt; }
  .nur-druck.druck-sudoku { display: block; }
  .sudoku-blatt { border-color: #000; margin: 6mm auto; }
  /* Linien ab 1 pt (p5-druckblatt): dünne graue Linien verschwinden auf Heimdruckern */
  .sudoku-blatt td { width: 11mm; height: 11mm; border-width: .3mm; border-color: #555; font-size: 16pt; }
  .sudoku-blatt--4 td { width: 18mm; height: 18mm; font-size: 22pt; }
  .sudoku-blatt--6 td { width: 14mm; height: 14mm; }
  .sudoku-blatt td.rand-rechts { border-right-color: #000; }
  .sudoku-blatt tr td.rand-unten { border-bottom-color: #000; }
  .sudoku-blatt { background: #fff; }
  .sudoku-blatt--loesung { margin: 0; }
  .druckblatt__loesung:has(.sudoku-blatt) { width: fit-content; margin-left: auto; }
  .sudoku-blatt--loesung td { width: 5.5mm; height: 5.5mm; font-size: 8pt; font-weight: 400; }

  .druckblatt { margin-top: 5mm; font-size: 12pt; }
  .druckblatt__antwort { break-inside: avoid; margin-bottom: 4mm; }
  .druckblatt__linie { height: 9mm; border-bottom: 1pt solid #666; }
  .druckblatt__tipps { break-inside: avoid; margin-bottom: 4mm; }
  .druckblatt__tipps ol { margin: 0; }
  .druckblatt__knick {
    margin: 5mm 0 3mm;
    padding-top: 1mm;
    border-top: 1px dashed #000;
    font-size: 9pt;
    text-align: center;
    color: #333;
  }
  .druckblatt__loesung {
    break-inside: avoid;
    transform: rotate(180deg);
    padding: 3mm 4mm;
    border: 1px solid #999;
  }
  .druckblatt__loesung p { margin: 0 0 2mm; }
  .druckblatt__loesung > :last-child { margin-bottom: 0; }
  /* Lösung links, QR-Code zum Rätsel online rechts daneben — nicht darunter, sonst passt das Blatt nicht */
  .druckblatt__unten { display: flex; align-items: flex-start; gap: 5mm; break-inside: avoid; }
  .druckblatt__unten > .druckblatt__loesung { flex: 1 1 auto; min-width: 0; }
  .druckblatt__unten > .druckblatt__loesung:has(.sudoku-blatt) { flex-grow: 0; }
  .druckblatt__quelle { flex: none; width: 34mm; font-size: 7.5pt; line-height: 1.3; color: #333; text-align: center; }
  .druckblatt__quelle p { margin: 1mm 0 0; overflow-wrap: anywhere; }
  /* Rand ringsum ist die Ruhezone des QR-Codes (build.py erzeugt ihn ohne) */
  .druckblatt__qr { display: block; width: 22mm; height: 22mm; margin: 0 auto; padding: 2mm; shape-rendering: crispEdges; }
  /* Quelle auch oben auf dem Blatt (U5/p5-druckblatt): bleibt stehen, wenn jemand die Lösung abschneidet */
  .raetsel__quelle { display: block; margin: 0 0 2mm; font-size: 9pt; color: #333; text-align: right; }
  /* Lösung auf Blatt 2 (eigenes_blatt im Makro, große Logicals): aufrecht, ohne Knicklinie */
  .raetsel .druckblatt.druckblatt--blatt2 { margin-top: 1.5mm; }
  .druckblatt--blatt2 .druckblatt__knick { margin: 0; padding: 0; border: 0; text-align: right; }
  .druckblatt--blatt2 .druckblatt__unten { break-before: page; }
  .druckblatt--blatt2 .druckblatt__loesung { transform: none; }
}

/* Lange Texte auf ein Blatt (Krimirätsel, Rätselgeschichten, Logical): Kopf kleiner, Geschichte mit enger
   Zeilenhöhe statt der Linienpapier-Zeile (--zeile); bei den Krimis dazu 11 pt, zwei Schreiblinien,
   Hinweise und Lösung kleiner, die Lösung in zwei Spalten. Logical-Teile in 03-spiele/logical/logical.css.
   Am Bildschirm bleibt alles wie oben. */
@media print {
  :is(.art-ratekrimis, .art-krimiraetsel) { font-size: 11pt; }
  /* Quelle rechts neben der Art-Zeile statt darüber */
  :is(.art-ratekrimis, .art-krimiraetsel, .art-logical) .raetsel__quelle { float: right; margin: 0; }
  :is(.art-ratekrimis, .art-krimiraetsel, .art-logical) .raetsel__kopf { margin-bottom: 2mm; }
  :is(.art-ratekrimis, .art-krimiraetsel, .art-logical) .raetsel__art { margin: 0; font-size: 10pt; }
  :is(.art-ratekrimis, .art-krimiraetsel, .art-logical) .raetsel .raetsel__titel { margin: 0 0 1.5mm; font-size: 20pt; }
  :is(.art-ratekrimis, .art-krimiraetsel, .art-logical) .raetsel-meta { font-size: 9.5pt; }
  :is(.art-ratekrimis, .art-krimiraetsel, .art-logical) .raetsel-meta .etikett { padding-block: 0; }
  :is(.art-ratekrimis, .art-krimiraetsel, .art-logical) .geschichte.flaeche-linien { margin: 3mm 0; padding-left: 3mm; line-height: 1.38; }
  :is(.art-ratekrimis, .art-krimiraetsel, .art-logical) .geschichte.flaeche-linien p { margin-bottom: 1.6mm; }
  :is(.art-ratekrimis, .art-krimiraetsel) .krimi__frage { margin: 3mm 0; padding: 2mm 3mm; }
  :is(.art-ratekrimis, .art-krimiraetsel) .krimi__frage .notizzettel__titel { margin: 0 0 .5mm; font-size: 11pt; }
  :is(.art-ratekrimis, .art-krimiraetsel) .krimi__frage .frage { font-size: 12pt; line-height: 1.3; }
  :is(.art-ratekrimis, .art-krimiraetsel) .hinweis { margin: 3mm 0; padding: 1.5mm 2.5mm; gap: 2mm; font-size: 9.5pt; line-height: 1.35; border-width: 1px; }
  :is(.art-ratekrimis, .art-krimiraetsel) .hinweis .icon { width: 4mm; height: 4mm; }
  :is(.art-ratekrimis, .art-krimiraetsel) .druckblatt { margin-top: 4mm; font-size: inherit; }
  :is(.art-ratekrimis, .art-krimiraetsel) .druckblatt__titel { margin: 0 0 1mm; }
  :is(.art-ratekrimis, .art-krimiraetsel) .druckblatt__antwort { margin-bottom: 3mm; }
  :is(.art-ratekrimis, .art-krimiraetsel) .druckblatt__linie { height: 7.5mm; }
  :is(.art-ratekrimis, .art-krimiraetsel) .druckblatt__linie:nth-of-type(n+3) { display: none; }
  /* „Deine Auflösung:“ steht auf der ersten Schreiblinie, die zweite geht über die ganze Breite */
  :is(.art-ratekrimis, .art-krimiraetsel) .druckblatt__antwort { display: grid; grid-template-columns: auto 1fr; column-gap: 2mm; align-items: end; }
  :is(.art-ratekrimis, .art-krimiraetsel) .druckblatt__antwort .druckblatt__titel { margin: 0 0 1mm; }
  :is(.art-ratekrimis, .art-krimiraetsel) .druckblatt__linie:nth-of-type(2) { grid-column: 1 / -1; }
  :is(.art-ratekrimis, .art-krimiraetsel) .druckblatt__tipps { margin-bottom: 3mm; font-size: 10pt; line-height: 1.3; }
  :is(.art-ratekrimis, .art-krimiraetsel) .druckblatt__tipps li + li { margin-top: .5mm; }
  :is(.art-ratekrimis, .art-krimiraetsel) .druckblatt__knick { margin: 4mm 0 2.5mm; }
  :is(.art-ratekrimis, .art-krimiraetsel) .druckblatt__loesung:not(.heft__loesung) { padding: 2mm 3mm; font-size: 9pt; line-height: 1.3; column-count: 2; column-gap: 5mm; }
  :is(.art-ratekrimis, .art-krimiraetsel) .druckblatt__loesung p { margin-bottom: 1.2mm; }
  :is(.art-ratekrimis, .art-krimiraetsel) .druckblatt__loesung ul { margin: 0; padding-left: 4mm; }
  :is(.art-ratekrimis, .art-krimiraetsel) .druckblatt__loesung li + li { margin-top: .5mm; }
  /* Krimirätsel haben die längsten Geschichten und dazu Hinweise: 10,5 pt, nicht kleiner */
  .art-ratekrimis { font-size: 10.5pt; }
  .art-ratekrimis .geschichte.flaeche-linien { line-height: 1.33; }
  .art-ratekrimis .geschichte.flaeche-linien p { margin-bottom: 1.1mm; }
  .art-ratekrimis .druckblatt__loesung:not(.heft__loesung) { font-size: 8.5pt; }
  .art-ratekrimis .druckblatt__tipps { font-size: 9.5pt; }
}

/* Rätselheft im Druck (p5-heft, vorlagen/heft.html): Deckblatt, je Rätsel eine Seite, Lösungen am Ende.
   Fußzeile über die Randfelder von @page (Chrome ab 131; andere Browser drucken die Kopfzeile im Blatt). */
@page heft {
  margin: 14mm 14mm 16mm;
  @bottom-center { content: "knobelbande.de · Rätselheft · Seite " counter(page) " von " counter(pages); font: 8pt/1 sans-serif; color: #333; }
}
@media print {
  .heft { page: heft; }
  .heft__deckblatt, .heft__blatt, .heft__loesungen { display: block; }
  .heft__blatt, .heft__loesungen { break-before: page; }
  .heft__deckblatt { text-align: center; break-after: page; }
  .heft__logo { width: 60mm; height: auto; margin: 4mm auto 5mm; display: block; }
  .heft__art { margin: 0; font-size: 14pt; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
  .heft__name { margin: 2mm 0 3mm; font-family: var(--schrift-hand); font-size: 28pt; line-height: 1.1; }
  .heft__zeile { margin: 0 0 8mm; font-size: 12pt; }
  .heft__namensfeld { margin: 0 auto 8mm; max-width: 120mm; text-align: left; font-size: 12pt; display: flex; gap: 3mm; }
  .heft__namensfeld span { flex: 1; border-bottom: 1pt solid #000; }
  .heft__anleitung { margin: 0 auto 6mm; max-width: 150mm; text-align: left; font-size: 12pt; border: 1pt solid #000; padding: 3mm 5mm; }
  .heft__anleitung > :first-child { margin-top: 0; } .heft__anleitung > :last-child { margin-bottom: 0; }
  .heft__anleitung a { text-decoration: none; }
  .heft__verzeichnis { margin: 0 auto 6mm; max-width: 150mm; padding: 0; list-style: none; text-align: left; font-size: 10pt; columns: 2; column-gap: 8mm; }
  .heft__verzeichnis li { display: flex; justify-content: space-between; gap: 3mm; break-inside: avoid; border-bottom: .3mm dotted #666; padding: .8mm 0; }
  .heft__seitenzahl { flex: none; }
  .heft__quelle { font-size: 10pt; color: #333; }
  .heft__kopfzeile { display: flex; justify-content: space-between; gap: 4mm; margin: 0 0 4mm; padding-bottom: 1mm; border-bottom: .3mm solid #000; font-size: 9pt; color: #333; }
  .heft .raetsel__quelle { display: none; }
  .heft .druckblatt { margin-top: 6mm; }
  .heft__loesungen-titel { margin: 0 0 4mm; }
  .heft__loesungsliste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 3mm; }
  /* Gitter-Lösungen (Sudoku, Labyrinth, Nonogramm …) sind klein: drei je Zeile; Textlösungen zwei */
  .heft__loesungsliste:has(svg, table) { grid-template-columns: repeat(3, 1fr); }
  .heft__loesung.druckblatt__loesung { transform: none; break-inside: avoid; margin: 0; padding: 2mm 3mm; border: .3mm solid #666; font-size: 10pt; }
  .heft__loesung .druckblatt__titel { font-size: 10pt; margin: 0 0 1.5mm; }
  .heft__loesung svg, .heft__loesung img, .heft__loesung table { max-width: 100%; height: auto; }
  .heft__loesung .sudoku-blatt { margin: 0; }
}