/* Alle da? — one stylesheet. Calm pass 2 (2026-10-08, rules: ArtistFolio .claude/knowledge/web-quality/RUHE_MUSTER.md,
   tokens from ruhe-tokens.css adapted to the site's own variables). Pass 3 „stark, nicht laut" (RUHE_MUSTER §12):
   strength from size and colour contrast, not from quantity.
   - Cream ground, black type. One accent = the yellow of the original banner (--akzent): only the filled call to
     action (Vormerken, also in header and fixed bar) and at most one more spot (the fill of the counter bar).
   - Display H1 in capitals, huge (start ≈ 4.3 × body on phones, sub pages one step smaller); H2 large in the display face.
   - One colour band per page at most, from the product colours (start: „Zieh eine Karte" on pink, as in the original).
   - Spaced capital micro-labels (.label) as the brand voice, at most one per screen, never for headings or prose.
   - Five colours = the five kinds of cards. They live on the cards and paintings themselves (pictures), as small
     squares in captions, and once on the start page as the five card edges („Fünf Arten, zusammen zu sein").
   - Pass 4 „Kernbotschaft" (RUHE_MUSTER §13): the yellow rim of the original as a thin colour edge on every page (not
     sticky); the one sentence stands under „Alle da?"; the hero asks „Alle da?", the last section answers „Ja. Alle da.".
   - Tone instead of boxes: hierarchy from size, weight and space. No cards, frames, eyebrows or capitals in headings.
   - Five sizes, two weights (400/700), two families: "Text" for everything, "Marke" for the wordmark and h1/h2.
   - Motion budget: nothing moves on load, no reveal, no looping media, hover only changes colour or underline. */
@font-face { font-family: "Marke"; font-weight: 700; src: url(fonts/ArchivoCondensed-Black.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Text"; src: url(fonts/AtkinsonHyperlegibleNext-Regular.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Text"; font-weight: 700; src: url(fonts/AtkinsonHyperlegibleNext-Bold.woff2) format("woff2"); font-display: swap; }

:root {
  --grund: #FAF8F2; --ink: #111; --grau: #5d5a54; --linie: #d9d4c8; --weiss: #fff;
  --ver: #1859AD; --zuh: #F76981; --wer: #45B9F4; --spi: #E4E911; --ges: #9D3615;
  --ton: var(--ink);
  --akzent: var(--spi);   /* the only accent: #E4E911 with black text = 14.4 : 1 (WCAG AA 4.5) */
  /* type scale (fluid 360 → 1240px): text sizes small · body · lead, then three display sizes in "Marke" */
  --step--1: clamp(0.9375rem, 0.9119rem + 0.1136vw, 1rem);            /* 15 → 16 small print, buttons, labels */
  --step-0:  clamp(1.25rem, 1.2216rem + 0.1136vw, 1.3125rem);         /* 20 → 21 body: short pages read at lead size */
  --step-1:  clamp(1.375rem, 1.2727rem + 0.4545vw, 1.625rem);         /* 22 → 26 lead, h3 */
  --step-2:  clamp(2.25rem, 1.7386rem + 2.2727vw, 3.5rem);            /* 36 → 56 H2, display numbers */
  --step-4:  clamp(3.25rem, 16vw, 6rem);                              /* 52 → 96 H1 of the sub pages */
  --step-5:  clamp(4.5rem, 24vw, 9rem);                               /* 72 → 144 H1 of the start page (≈ 94 px at 390) */
  --dur-base: 250ms;
  --regular: 400; --strong: 700;
  --measure: 30em; --measure-narrow: 22em;   /* ≈ 65 / 45 characters (ch is too wide in Atkinson: wide zero) */
  --rand: clamp(1.25rem, 0.7386rem + 2.2727vw, 2.5rem); --breit: 75rem;
  /* spacing from the scale only */
  --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-s: 1rem;
  --space-m: clamp(1.5rem, 1.3364rem + 0.7273vw, 2rem);
  --space-l: clamp(2rem, 1.6727rem + 1.4545vw, 3rem);
  --space-xl: clamp(3rem, 2.5091rem + 2.1818vw, 4.5rem);
  --space-section: clamp(4rem, 2.3636rem + 7.2727vw, 8rem);
  --space-chapter: clamp(6rem, 3.5455rem + 10.9091vw, 12rem);
  --dur-fast: 150ms; --ease: cubic-bezier(.2, 0, 0, 1);
}
.ton-ver { --ton: var(--ver); } .ton-zuh { --ton: var(--zuh); } .ton-wer { --ton: var(--wer); } .ton-spi { --ton: var(--spi); } .ton-ges { --ton: var(--ges); }
.punkt { display: inline-block; width: 12px; height: 12px; background: var(--ton); margin-right: 8px; vertical-align: -1px; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--grund); color: var(--ink); font: var(--regular) var(--step-0)/1.5 "Text", system-ui, sans-serif; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
h1, h2, h3 { margin: 0 0 var(--space-s); text-wrap: balance; overflow-wrap: break-word; }
h1, h2 { font-family: "Marke", "Arial Narrow", sans-serif; font-weight: var(--strong); letter-spacing: .005em; }
h1 { font-size: var(--step-4); line-height: .92; text-transform: uppercase; hyphens: auto; -webkit-hyphens: auto; margin-bottom: var(--space-m); }
h2 { font-size: var(--step-2); line-height: 1; }
/* spaced capital micro-label: the brand voice of the original, at most one per screen */
.label { font: var(--strong) var(--step--1)/1.2 "Text", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
h3 { font-size: var(--step-1); line-height: 1.35; font-weight: var(--strong); }
p, li, figcaption { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 8 4 4; text-wrap: pretty; overflow-wrap: break-word; }
p { margin: 0 0 1em; max-width: var(--measure); }
.etikett, .klein, figcaption, small { font-size: var(--step--1); color: var(--grau); }
.wrap { max-width: var(--breit); margin: 0 auto; padding-left: var(--rand); padding-right: var(--rand); }
main > section { padding: calc(var(--space-section) / 2) 0; }
main > section.held + section { padding-top: calc(var(--space-chapter) / 2); }
section[id] { scroll-margin-top: 80px; }

/* Header: wordmark, four pages, one button. Phones: menu as a plain list. */
.leiste { position: sticky; top: 0; z-index: 30; background: var(--grund); display: flex; align-items: center; gap: var(--space-m); padding: 10px var(--rand); }
.marke { font: var(--strong) 26px/1 "Marke", sans-serif; text-transform: uppercase; text-decoration: none; letter-spacing: .01em; margin-right: auto; white-space: nowrap; }
.nav { display: flex; gap: var(--space-m); }
.nav a { font-size: var(--step--1); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 6px; text-decoration-thickness: 2px; padding: 8px 0; }
.nav a:hover, .nav a[aria-current="page"] { text-decoration-color: currentColor; }
.menu-knopf { display: none; align-items: center; gap: 10px; background: none; border: 0; padding: 8px 0; cursor: pointer; font: var(--step--1)/1 "Text", sans-serif; color: var(--ink); }
.menu-knopf i { position: relative; width: 22px; height: 2px; background: var(--ink); }
.menu-knopf i::before, .menu-knopf i::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: var(--ink); }
.menu-knopf i::before { top: -7px; } .menu-knopf i::after { top: 7px; }
.menu-offen .menu-knopf i { background: transparent; } .menu-offen .menu-knopf i::before { top: 0; transform: rotate(45deg); } .menu-offen .menu-knopf i::after { top: 0; transform: rotate(-45deg); }
.menu { position: fixed; inset: 0; z-index: 25; background: var(--grund); padding: 120px var(--rand) 100px; overflow-y: auto; }
.menu[hidden] { display: none; }
.menu nav { display: grid; gap: var(--space-s); }
.menu nav a { font: var(--strong) var(--step-2)/1 "Marke", sans-serif; text-transform: uppercase; text-decoration: none; }
.menu nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.menu .etikett { margin-top: var(--space-xl); }
body.menu-offen { overflow: hidden; }
@media (max-width: 1060px) { .nav { display: none; } .menu-knopf { display: inline-flex; } .leiste { gap: var(--space-s); } }

/* Buttons: the filled yellow one is the call to action (the only accent); .hell is the quiet second way */
.knopf { display: inline-block; background: var(--akzent); color: var(--ink) !important; border: 0; padding: 16px 28px; cursor: pointer;
  font: var(--strong) var(--step--1)/1.2 "Text", sans-serif; letter-spacing: .12em; text-transform: uppercase; text-align: center;
  text-decoration: none; transition: background var(--dur-fast) var(--ease); }
.knopf:hover { background: color-mix(in srgb, var(--akzent) 82%, var(--ink)); }
.knopf.hell { background: transparent; color: var(--ink) !important; box-shadow: inset 0 0 0 2px var(--ink); }
.knopf.hell:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.knopf[disabled] { opacity: .45; cursor: not-allowed; }
.cta-note { font-size: var(--step--1); color: var(--grau); max-width: var(--measure-narrow); margin: var(--space-2xs) 0 0; }
a.leise, .mehr a { font-weight: var(--strong); text-decoration-thickness: 2px; }
.mehr { margin-top: var(--space-m); }

/* Hero: the turning box large with air, the wordmark huge, one sentence, one yellow button */
.held { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl); align-items: center; padding-top: var(--space-l); }
@media (min-width: 861px) { main .held h1 { font-size: min(9rem, 10.5vw); white-space: nowrap; } .dreh { width: min(100%, 58vh); margin: 0 auto; } }   /* one line, as on the box */
main > section.held { padding-bottom: var(--space-xl); }
.held h1 { font-size: var(--step-5); line-height: .9; margin-bottom: var(--space-m); hyphens: manual; }
.held-unter { font-size: var(--step-1); line-height: 1.35; max-width: 20em; }
.held .knoepfe { margin: var(--space-m) 0 0; }
.held .leise { display: inline-block; margin-top: var(--space-m); }
.dreh { position: relative; aspect-ratio: 4 / 5; cursor: grab; touch-action: pan-y; user-select: none; }
.dreh img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.dreh:active { cursor: grabbing; }
.dreh:focus-visible { outline-offset: 6px; }
.dreh-steuer { display: flex; justify-content: center; align-items: center; gap: var(--space-m); margin: var(--space-s) auto 0; max-width: none; }
.dreh-knopf { display: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 2px var(--ink); color: var(--ink); font: var(--strong) 22px/1 "Text", sans-serif; cursor: pointer; transition: background var(--dur-fast) var(--ease); }
.js .dreh-knopf { display: inline-block; }
.dreh-knopf:hover { background: color-mix(in srgb, var(--ink) 8%, var(--grund)); }
@media (max-width: 860px) {
  .held { grid-template-columns: 1fr; gap: var(--space-m); padding-top: var(--space-xs); }
  .dreh { width: min(100%, 38vh); margin: 0 auto; }
}
/* phones: the call to action fills the width */
@media (max-width: 600px) { .knoepfe .knopf, .cta-band .knopf, #bestellformular .knopf, .ausgabe .knopf { display: block; width: 100%; } }

/* Draw a card — the page's one colour band (pink, as in the original) */
.band { background: var(--ton); color: var(--ink); }
main > section.band, main > section.held + section.band { padding: var(--space-section) 0; margin-top: var(--space-l); }
.band .klein { color: inherit; }
.ziehen { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: center; }
@media (max-width: 760px) { .ziehen { grid-template-columns: 1fr; gap: var(--space-l); } }
.ziehen-tisch { perspective: 1400px; display: flex; justify-content: center; }
.ziehen-karte { position: relative; width: min(300px, 72vw); aspect-ratio: 70 / 120; transform-style: preserve-3d; transition: transform .3s var(--ease); cursor: pointer; }
.ziehen-karte.offen { transform: rotateY(180deg); }
.ziehen-karte .seite { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 14px; overflow: hidden; box-shadow: 2px 4px 16px rgba(0,0,0,.14); }
.ziehen-karte .seite img { width: 100%; height: 100%; object-fit: cover; }
.ziehen-karte .vorn { transform: rotateY(180deg); background: var(--weiss); }

/* Start: why — one statement beside the picture */
.warum { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-xl); align-items: center; }
.warum figure { margin: 0; }
@media (max-width: 860px) { .warum { grid-template-columns: 1fr; gap: var(--space-l); } }

/* Editions: three columns, no boxes; the recommendation is told in words and by the only filled button */
.ausgaben { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); margin-top: var(--space-l); }
@media (max-width: 900px) { .ausgaben { grid-template-columns: 1fr; gap: var(--space-section); } .ausgabe.empfohlen { order: -1; } }
.ausgabe { display: flex; flex-direction: column; }
.ausgabe h3 { margin: var(--space-s) 0 0; }
.ausgabe p { margin: var(--space-2xs) 0 0; }
.ausgabe .preis { font-size: var(--step-1); font-weight: var(--strong); margin: var(--space-s) 0; }
.ausgabe .knopf { margin-top: auto; text-align: center; }
.ausgabe-bild { margin: 0; aspect-ratio: 9 / 7; }
.ausgabe-bild img { width: 100%; height: 100%; object-fit: contain; }
.ausgabe { position: relative; }
.empfehlung { display: block; margin-bottom: var(--space-2xs); }
.ausgabe .rest { font-size: var(--step--1); color: var(--grau); margin: 0 0 var(--space-s); }
.ausgaben-huerde { margin-top: var(--space-l); }

/* Progress: goal or count, milestones as a plain list */
.fortschritt.gross { margin-top: var(--space-m); max-width: 46rem; }
details .fortschritt.gross { margin-bottom: var(--space-s); }
.fs-zahl { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2xs) var(--space-s); margin: 0 0 var(--space-m); }
.fs-zahl > b { font: var(--strong) var(--step-2)/1 "Marke", sans-serif; }
.fs-naechste, .fs-frist { color: var(--grau); }
.fs-naechste b { font: inherit; }
.fs-bahn { position: relative; height: 12px; background: var(--linie); margin: 0 0 var(--space-l); }
.fs-fuellung { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink); }
.fs-marke { position: absolute; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--grund); box-shadow: inset 0 0 0 3px var(--ink); }
.fs-marke:last-of-type { margin-left: -18px; }
.fs-marke.erreicht { background: var(--ink); }
.fs-marke span { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); font-size: var(--step--1); white-space: nowrap; }
.fs-marke:last-of-type span { left: auto; right: 0; transform: none; }
.fs-ziele { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-l); }
.fs-ziele li { display: grid; gap: 2px; }
.fs-ziele b { font-size: var(--step-1); }
.fs-ziele li span:first-of-type { font-weight: var(--strong); }
.fs-ziele li.erreicht b::after { content: " ✓"; }
@media (max-width: 760px) { .fs-ziele { grid-template-columns: 1fr; } }

/* Fixed bar: goal (or count) and the button; on the start page only after the hero */
body { padding-bottom: 64px; }
.zaehlerleiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--ink); color: var(--grund);
  display: flex; align-items: center; gap: var(--space-s); padding: 8px var(--rand); font-size: var(--step--1); }
.zaehlerleiste .knopf { padding: 12px 20px; white-space: nowrap; }
.zl-stand { display: flex; align-items: center; gap: var(--space-xs); flex: 1 1 auto; min-width: 0; text-decoration: none; color: inherit; }
.zl-stand .etikett { color: inherit; opacity: .8; }
.zl-stand > b { font-size: var(--step-0); white-space: nowrap; }
.zl-stand .fortschritt { flex: 1 1 auto; min-width: 60px; max-width: 520px; }
.zl-stand .fs-bahn { height: 6px; margin: 0; background: rgba(255,255,255,.22); }
.zl-stand .fs-fuellung { background: var(--akzent); }   /* the one more yellow spot (only once the count is shown) */
.zl-stand .fs-marke, .zl-stand .fs-marke span { display: none; }
.zl-ziel { white-space: nowrap; }
.zl-ziel b { font: inherit; }
@media (max-width: 520px) { .zl-stand:not(.zl-nur-ziel) .etikett, .zl-stand:not(.zl-nur-ziel) .zl-ziel { display: none; } }
body.held-sichtbar .nav-cta { visibility: hidden; }
body.held-sichtbar .zaehlerleiste { visibility: hidden; }
@media (max-width: 760px) { body:has(.zaehlerleiste .knopf) .nav-cta { display: none; } }
.nav-cta { padding: 12px 20px; }

/* Sub pages: one column of text, pictures as closed blocks */
.einleitung { max-width: var(--measure); }   /* body size: a larger lead would become the page's body size (size contrast) */
.abschnitt { margin-top: var(--space-section); }
.raster figure, .karten figure, .heft figure, .bilder figure { margin: 0; }
.raster > *, .heft > *, .bilder > *, .ausgaben > *, .mengen > *, .handel > *, .zwei-formulare > *, .schritte > *, .bestellen-raster > *, .held > *, .kuenstler > *, .warum > *, .ziehen > * { min-width: 0; }
.raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-m); margin-top: var(--space-m); }
@media (max-width: 760px) { .raster { grid-template-columns: 1fr; gap: var(--space-l); } }   /* phones: one view per screen */
.raster img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
figcaption { margin-top: var(--space-2xs); }
.karten { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-s); margin-top: var(--space-m); }
@media (max-width: 860px) { .karten { grid-template-columns: repeat(5, 62%); overflow-x: auto; scroll-snap-type: x mandatory; } .karten figure { scroll-snap-align: start; } }
.karten img, .heft img { border-radius: 10px; }
.heft { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-s); margin-top: var(--space-m); max-width: 56rem; }
@media (max-width: 860px) { .heft { grid-template-columns: repeat(2, 1fr); } }
.punkte { list-style: none; padding: 0; margin: var(--space-m) 0 0; display: grid; gap: var(--space-l); max-width: var(--measure); }
.punkte b { display: block; }
.filme { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--space-m); margin: var(--space-l) 0 0; }
.film { margin: 0; } .film video { width: 100%; aspect-ratio: 1; display: block; background: var(--grund); object-fit: cover; }

/* Paintings and artist */
.bilder { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-s); align-items: end; margin-top: var(--space-l); }
@media (max-width: 860px) { .bilder { grid-template-columns: 1fr; gap: var(--space-xl); } }   /* phones: one painting per screen */
.kuenstler { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-xl); align-items: start; }
@media (max-width: 860px) { .kuenstler { grid-template-columns: 1fr; gap: var(--space-l); } }
blockquote { margin: var(--space-l) 0 var(--space-2xs); font-size: var(--step-1); line-height: 1.35; max-width: 34ch; text-wrap: balance; }
.linkgruppen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-l); margin-top: var(--space-m); }
.linkgruppen > * { min-width: 0; }
.linkgruppen ul { list-style: none; padding: 0; margin: var(--space-2xs) 0 0; display: grid; gap: var(--space-s); }
.linkgruppen .klein { display: block; }
@media (max-width: 860px) { .linkgruppen { grid-template-columns: 1fr; } }

/* Forms: on the paper itself, fields carry the only lines */
form.bestellen, .karte-weiss { max-width: 40rem; }
label { display: block; font-weight: var(--strong); margin: var(--space-m) 0 6px; }
input, select, textarea { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid #a9a49a; background: var(--weiss); border-radius: 0; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--ink); outline-offset: 1px; }
.zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-s); }
@media (max-width: 600px) { .zweispaltig { grid-template-columns: 1fr; } }
.haken { display: flex; gap: 10px; align-items: flex-start; font-weight: var(--regular); }
.haken input { width: auto; margin-top: 6px; }
.haken span { font-size: var(--step--1); }
.summe { font-size: var(--step-1); font-weight: var(--strong); margin: var(--space-s) 0; }
.hinweis { color: var(--grau); font-size: var(--step--1); margin: var(--space-s) 0; max-width: var(--measure); }
.fehler { border-left: 4px solid var(--ges); padding: 8px 14px; margin: var(--space-s) 0; }
.versteckt { position: absolute; left: -9999px; }
.rechnung { margin: var(--space-s) 0; }
.rechnung:empty { display: none; }
.rechnung .zeile { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.rechnung .zeile.gut { font-weight: var(--strong); } .rechnung .zeile.summe { font-weight: var(--strong); margin: 4px 0 0; }
.rechnung .tipp { color: var(--grau); font-size: var(--step--1); margin: 6px 0; }
.rechnung .fehler-klein { color: var(--ges); font-weight: var(--strong); margin: 6px 0; }
.rechnung .klein { margin: 6px 0 0; }

/* Pre-order page: picture of the chosen edition beside the form */
.bestellen-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xl); align-items: start; margin-top: var(--space-l); }
.bestellen-raster > :only-child { grid-column: 1 / -1; }
.wahl { margin: 0; position: sticky; top: 90px; }
.wahl .ausgabe-bild { margin: 0; }
.wahl figcaption { color: var(--ink); font-size: var(--step-0); display: grid; gap: 4px; }
.wahl figcaption b { font-size: var(--step-1); }
@media (max-width: 900px) { .bestellen-raster { grid-template-columns: 1fr; gap: var(--space-xl); } .wahl { position: static; } .wahl .ausgabe-bild { aspect-ratio: 1; } }
.mengenliste { list-style: none; padding: 0; margin: var(--space-m) 0 0; display: grid; gap: var(--space-2xs); max-width: 30rem; }
.mengenliste li { display: flex; justify-content: space-between; gap: var(--space-s); }
.schritte { padding-left: 1.4em; margin: var(--space-m) 0 0; display: grid; gap: var(--space-l); max-width: var(--measure); }
.schritte b { display: block; }

/* Retail: facts as a plain list, shelf picture */
.handel { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-xl); align-items: center; }
.handel figure { margin: 0; } .handel figure img { width: 100%; height: auto; display: block; }
.fakten { list-style: none; padding: 0; margin: var(--space-m) 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-s); }
.fakten li { display: grid; gap: 2px; }
.fakten b { font-size: var(--step-1); } .fakten span { font-size: var(--step--1); color: var(--grau); }
@media (max-width: 900px) { .handel { grid-template-columns: 1fr; } }
.zwei-formulare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); margin-top: var(--space-l); align-items: start; }
@media (max-width: 860px) { .zwei-formulare { grid-template-columns: 1fr; } }
.zeilenform { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0; }
.zeilenform .haken { margin: 0; flex-basis: 100%; }

/* Questions: one column, space between, no lines; two groups */
.frage-gruppe { margin-top: var(--space-section); }
details { padding: var(--space-xl) 0 0; max-width: var(--measure); }
h2 + details { padding-top: var(--space-m); }
summary { cursor: pointer; font-weight: var(--strong); list-style: none; display: flex; justify-content: space-between; gap: var(--space-s); align-items: baseline; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; flex: none; font-weight: var(--regular); }
details[open] summary::after { content: "–"; }
details p { margin: var(--space-2xs) 0 0; }

/* Tables (legal pages, retailer orders) */
table { border-collapse: collapse; width: 100%; font-size: var(--step--1); }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.unterseite main.eng { max-width: 820px; margin: 0 auto; padding: 40px var(--rand) 80px; }
.unterseite h1 { font-size: clamp(2.5rem, 11vw, 4.5rem); }   /* legal and confirmation pages: long words, one step smaller */
.unterseite h2 { font-size: var(--step-1); line-height: 1.15; margin-top: var(--space-l); }

/* Closing line of the content pages: same words, same button */
.cta-band h2 { margin-bottom: var(--space-2xs); }
.cta-band .knopf { margin-top: var(--space-l); }

/* Footer */
/* Footer as a board (grouped like the best small game brands): wordmark + the five card colours, then three groups.
   Ink on paper, a hairline above; the colour squares are the only colour (order, not decoration). */
.fuss { padding: var(--space-section) var(--rand) var(--space-chapter); font-size: var(--step--1); line-height: 1.6; color: var(--grau); }
.fuss-tafel { max-width: var(--breit); margin: 0 auto; padding-top: var(--space-l); border-top: 1px solid var(--linie);
  display: grid; gap: var(--space-l) var(--space-m); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fuss-marke { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-s); }
.fuss-marke .marke { font-size: var(--step-1); }
.fuss-farben { display: inline-flex; gap: 4px; }
.fuss-farben i { width: 14px; height: 14px; background: var(--ton); }
.fuss-titel { margin: 0 0 var(--space-2xs); font-weight: var(--strong); color: var(--ink); }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li a { display: inline-block; padding: 6px 0; color: var(--ink); }
.fuss-tafel > :last-child { grid-column: 1 / -1; }
@media (min-width: 760px) {
  .fuss-tafel { grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 3fr)); }
  .fuss-marke { grid-column: auto; align-items: flex-start; flex-direction: column; }
  .fuss-tafel > :last-child { grid-column: auto; }
}
.unterseite .fuss { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
/* short pages (404, legal, confirmations): the yellow rim closes at the bottom of the window, not mid-screen */
body { min-height: 100vh; min-height: 100dvh; box-sizing: border-box; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; width: 100%; }
.fuss .marke { color: var(--ink); }
.sim { background: var(--spi); text-align: center; padding: 6px; font-size: var(--step--1); }

/* Soft page transitions (cross-fade, browser default ≈ 250 ms); off with reduced motion */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0s !important; scroll-behavior: auto !important; }
  @view-transition { navigation: none; }
}

/* Artist page: the quote stands alone with air around it */
.kuenstler blockquote { margin-top: var(--space-xl); }
.kuenstler p + p { margin-top: var(--space-m); }
.kuenstler figure { margin: 0; }
/* Sub pages: more air between sections and blocks (text pages carry no hero picture) */
body:not(.seite-start) main > section + section { padding-top: var(--space-chapter); }
.linkgruppen ul { gap: var(--space-m); }
@media (max-width: 860px) { .linkgruppen ul { gap: var(--space-l); } }
.kuenstler blockquote { margin: var(--space-xl) 0 var(--space-2xs); }
.mengenliste { gap: var(--space-s); }
.schritte { gap: var(--space-xl); }
form.bestellen .haken { margin-top: var(--space-m); }
#bestellformular .knopf { margin-top: var(--space-m); }
.linkgruppen { gap: var(--space-xl); }
.frage-bild { margin: var(--space-m) 0 0; max-width: 32rem; }
h1 + .frage-gruppe { margin-top: var(--space-l); }
.werk { margin: var(--space-xl) 0 0; max-width: 28rem; }
/* pre-order page: the form is the call to action, the fixed bar would only repeat it */
.seite-vorbestellen .zaehlerleiste { display: none; }
body.seite-vorbestellen { padding-bottom: 0; }
/* form labels one step smaller than prose: they name fields, they are not read */
form label { font-size: var(--step--1); }
.rechnung .zeile { font-size: var(--step--1); } .rechnung .zeile.summe { font-size: var(--step-0); }
/* pre-order form: one column on phones gets generous air between fields; side by side on desktop stays compact */
#bestellformular .haken, #bestellformular .hinweis { margin-top: var(--space-m); }
#bestellformular .rechnung { margin: var(--space-m) 0; }
@media (max-width: 600px) {
  #bestellformular label:not(.haken):not(.versteckt) { margin-top: var(--space-xl); }
  #bestellformular .haken { margin-top: var(--space-xl); }
  #bestellformular .rechnung { margin: var(--space-xl) 0; }
  #bestellformular .hinweis { margin-top: var(--space-l); }
  #bestellformular .zweispaltig + .zweispaltig, #bestellformular .rechnung + .zweispaltig { margin-top: var(--space-l); }
}
.ablauf .schritte { gap: var(--space-s); }
@media (max-width: 600px) { .seite-vorbestellen main > section.ablauf { padding-top: calc(var(--space-chapter) + var(--space-l)); } }
.seite-vorbestellen .bestellen-raster { margin-top: var(--space-xl); }

/* Final pass (2026-10-08): one moment per page, each a response to the visitor (calm pattern §5 budget, §11) */
.nur-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* start: the goal beside the open set; closing band of the content pages: the set beside the call to action */
.stand, .cta-band { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xl); align-items: center; }
.stand figure, .cta-band figure { margin: 0; }
.stand .fortschritt.gross { margin-top: var(--space-s); }
@media (max-width: 860px) { .stand, .cta-band { grid-template-columns: 1fr; gap: var(--space-m); } .stand figure, .cta-band figure { max-width: 26rem; } }
/* set: the separator card turns like the drawn card (same component) */
#wende-karte { cursor: pointer; }
/* paintings: one large on a stage, five buttons switch (without JS all five stand one below the other) */
.buehne-wahl { display: none; border: 0; padding: 0; margin: 0; }
.js .buehne-wahl { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-s); margin-top: var(--space-l); }
.buehne-knopf { position: relative; display: inline-flex; margin: 0; font-weight: var(--regular); font-size: var(--step--1); cursor: pointer; }
.buehne-knopf input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.buehne-knopf span { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 2px; text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 6px; text-decoration-color: transparent; transition: text-decoration-color var(--dur-fast) var(--ease); }
.buehne-knopf:hover span { text-decoration-color: var(--linie); }
.buehne-knopf input:checked + span { text-decoration-color: currentColor; font-weight: var(--strong); }
.buehne-knopf input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 3px; }
.js .buehne .bilder { display: block; margin-top: var(--space-m); }
.js .buehne .bilder figure:not([data-aktiv]) { display: none; }
.js .buehne .bilder img { width: 100%; height: min(72vh, 44rem); object-fit: contain; object-position: left center; }
.js .buehne .bilder figure.neu img { animation: einblenden var(--dur-base) var(--ease); }
@keyframes einblenden { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 860px) { .js .buehne .bilder img { height: auto; max-height: 72vh; } }
/* artist: one painting large */
.werk-gross figure { margin: 0; }
.werk-gross img { width: 100%; max-width: 60rem; }
/* puzzle picture full width on the paintings page */
.tafel img { width: 100%; max-width: 60rem; }
/* pre-order: optional voucher behind one click */
.breit-links { grid-template-columns: 2fr 1fr; }
@media (max-width: 600px) { .breit-links { grid-template-columns: 2fr 1fr; } }
details.gutschein { padding: var(--space-m) 0 0; }
details.gutschein summary { font-size: var(--step--1); justify-content: flex-start; }
details.gutschein summary::after { content: "+"; }
details.gutschein[open] summary::after { content: "–"; }
details.gutschein input { margin-top: var(--space-2xs); max-width: 16rem; }
/* live price arrives after load: its room is reserved so the form does not jump (CLS ≤ 0.02) */
.js #bestellformular .rechnung { display: block; min-height: 8.5rem; }
.sprung { position: absolute; left: var(--rand); top: -100px; z-index: 40; background: var(--ink); color: var(--weiss); padding: 10px 16px; }
.sprung:focus { top: 8px; }
main:focus { outline: none; }
.nl-raster .frage-bild { margin: 0; max-width: 22rem; }
@media (min-width: 861px) { .tafeln { grid-template-columns: repeat(4, 1fr); } }

/* Final check (2026-10-08): order and layout */
/* fixed bar on narrow phones: goal and button only, the date would run under the button */
.zl-stand { overflow: hidden; }
@media (max-width: 420px) { .zl-nur-ziel .zl-ziel { display: none; } }
/* retailers: their page has its own call to action (access), the consumer bar would pull them away */
.seite-haendler .zaehlerleiste { display: none; }
body.seite-haendler { padding-bottom: 0; }
/* artist: the heading first on every width, like on every other page */
.kuenstler > h1 { grid-column: 1 / -1; margin-bottom: 0; }
/* pre-order on phones: the chosen edition as a small picture, so the form starts in the first screen */
@media (max-width: 900px) { .wahl .ausgabe-bild { aspect-ratio: 2 / 1; } }
/* editions in one column (tablets, phones): the picture no wider than a phone, so three editions do not fill five screens */
@media (max-width: 900px) { .ausgabe-bild { max-width: 26rem; } }
/* news on phones: the form first, the box picture after it */
@media (max-width: 900px) { .nl-raster > figure { order: 1; } }
/* legal and confirmation headings: break only where marked (­ at the word joint), never „Händlerbe-dingungen“ */
.unterseite h1 { hyphens: manual; -webkit-hyphens: manual; }
/* without JavaScript: the menu button cannot open the menu, so the four pages stand in the header; controls that only
   work with JavaScript (turning the box, drawing and turning a card) are not offered */
html:not(.js) .menu-knopf, html:not(.js) .dreh-steuer, html:not(.js) #ziehen-knopf, html:not(.js) #wende-knopf { display: none; }
@media (max-width: 1060px) { html:not(.js) .leiste { flex-wrap: wrap; } html:not(.js) .nav { display: flex; flex-wrap: wrap; gap: 0 var(--space-s); flex-basis: 100%; } }
html:not(.js) .nav { order: 1; }
@media (max-width: 360px) { .zaehlerleiste .knopf { padding: 12px 16px; } }

/* Core message (RUHE_MUSTER §13). The rim of the original as a pure colour edge: brand signature, no words (the sentence
   stands in the hero, where it is read), thin, scrolls away with the page (not sticky). */
body { border-top: 12px solid var(--spi); border-bottom: 12px solid var(--spi); }   /* the yellow edge opens and closes every page (Klammer, H27) */
/* The core sentence in the display face (RUHE §13, K2): the loudest line after „ALLE DA?", same voice as the box and the H2s */
.held-unter { font: var(--strong) clamp(1.875rem, 1.2rem + 2.8vw, 3.25rem)/1.02 "Marke", "Arial Narrow", sans-serif; letter-spacing: .005em; text-wrap: balance; max-width: 15em; }
.held-was { margin-top: var(--space-2xs); }
@media (max-width: 860px) { .dreh { width: min(100%, 35vh); } }
/* phones: the box frame carries ~12 % empty margin above and below the box (all 36 frames) — pull the turn controls and
   the frame into it, so „Vormerken" sits above the fold at 375×812 without shrinking the box */
@media (max-width: 860px) { .held .dreh { margin-top: calc(-1 * var(--space-s)); } .held .dreh-steuer { position: relative; z-index: 1; margin-top: calc(-1 * var(--space-l)); } .dreh-steuer .label { text-align: center; } }
@media (max-width: 860px) and (max-height: 700px) { .dreh { width: min(100%, 27vh); } }
/* Five ways of being together: the five card colours as card edges, each word on its own colour.
   Text colour per field from measured contrast: white on blue 6.8 and brown 7.1, black on pink 6.6, light blue 8.5, yellow 14.4. */
.arten { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; gap: 0 var(--space-xl); align-items: start; }
.arten > h2 { grid-column: 1; grid-row: 1; align-self: end; } .arten > div:not(.arten-liste) { grid-column: 1; grid-row: 2; } .arten-liste { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.arten-liste { display: grid; gap: 6px; }
.arten-liste > span { display: block; background: var(--ton); color: var(--ink); padding: .12em .3em .02em; max-width: none; hyphens: manual; -webkit-hyphens: manual;
  font: var(--strong) clamp(2rem, 9vw, 4.5rem)/1 "Marke", "Arial Narrow", sans-serif; text-transform: uppercase; letter-spacing: .01em; }
.arten-liste .ton-ver, .arten-liste .ton-ges { color: var(--weiss); }
@media (max-width: 860px) { .arten { display: block; } .arten-liste { margin: var(--space-m) 0 var(--space-l); } }
/* Who is family: the one sentence large over the table picture */
.familie .satz { font-size: clamp(2.75rem, 12vw, 5rem); line-height: .95; max-width: 14em; margin-bottom: var(--space-m); }
.familie figure { margin: var(--space-l) 0 0; }
/* The answer: „Ja. Alle da." as large as the hero's question, alone with air, then the goal and the one button */
main > section.antwort { padding: var(--space-chapter) var(--rand) var(--space-section); text-align: center; }
.antwort-satz { font-size: var(--step-5); line-height: .9; text-transform: uppercase; hyphens: manual; margin-bottom: var(--space-l); }
@media (min-width: 861px) { .antwort-satz { font-size: min(9rem, 10.5vw); } }
.antwort p, .antwort .fortschritt { margin-left: auto; margin-right: auto; }
.antwort .fortschritt { max-width: var(--measure); }
.antwort .knoepfe { margin-top: var(--space-l); }
.antwort .fs-zahl { justify-content: center; }

/* Sub pages after the calibration (2026-10-09): no weak zones */
/* page role: form and retailer pages carry their own call to action, so the consumer bar and its padding are off */
body:not(.rolle-inhalt) { padding-bottom: 0; }
/* retailers: three facts why a shop carries the set, then the request as the one filled button; sign-in behind one click */
.laden-gruende { list-style: none; padding: 0; margin: var(--space-m) 0; display: grid; gap: var(--space-s); max-width: var(--measure); }
.laden-gruende b { display: block; font: var(--strong) var(--step-1)/1.2 "Marke", "Arial Narrow", sans-serif; letter-spacing: .005em; }
/* desktop: heading and the quiet sign-in on the left, the request form on the right; phones: form first, sign-in after it */
.anfrage { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
details.anmelden { padding-top: var(--space-xl); }
details.anmelden summary { font-size: var(--step-0); }
@media (max-width: 860px) { .anfrage { grid-template-columns: 1fr; gap: 0; } .anfrage-kopf { display: contents; } details.anmelden { order: 1; } }
/* artist: the story first — the sentence large beside the portrait, the biography below it; links at the end behind a click */
.kuenstler { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "h1 h1" "foto satz" "foto text"; grid-template-rows: auto auto 1fr; gap: var(--space-l) var(--space-xl); }
.kuenstler > h1 { grid-area: h1; }
.kuenstler-satz { grid-area: satz; align-self: end; margin: 0; max-width: 13em; font: var(--strong) clamp(2.25rem, 1.2rem + 3.6vw, 4.25rem)/1 "Marke", "Arial Narrow", sans-serif; letter-spacing: .005em; text-wrap: balance; hyphens: manual; -webkit-hyphens: manual; }
.kuenstler-foto { grid-area: foto; }
.kuenstler-text { grid-area: text; }
.kuenstler-text p:first-child { margin-top: 0; }
@media (max-width: 860px) {
  .kuenstler { grid-template-columns: 1fr; grid-template-areas: "h1" "satz" "foto" "text"; gap: var(--space-m); }
  .kuenstler-foto img { max-height: 70vh; width: auto; }
}
/* artist: portrait, painting and links are one story — hierarchy spacing, not chapter spacing */
.seite-kuenstler #kuenstler, .seite-kuenstler #werk { padding-bottom: 0; }
.seite-kuenstler main > #werk, .seite-kuenstler main > #links { padding-top: var(--space-xl); }
.links-mehr { max-width: none; padding-top: 0; }
.links-mehr summary { font: var(--strong) var(--step-2)/1 "Marke", "Arial Narrow", sans-serif; justify-content: flex-start; flex-wrap: wrap; gap: var(--space-2xs) var(--space-s); }
.links-mehr summary .klein { font: var(--regular) var(--step--1)/1.4 "Text", sans-serif; }
.links-mehr summary::after { margin-left: auto; font-family: "Text", sans-serif; }
/* questions: desktop two columns — the groups as jump marks (in card colours) and the fan beside the questions */
.fragen-marken { display: grid; gap: var(--space-xs); margin-bottom: var(--space-l); }
.fragen-marken a { text-decoration: none; font-weight: var(--strong); display: inline-flex; align-items: center; min-height: 44px; }
.fragen-marken a:hover { text-decoration: underline; }
.fragen-marken .punkt { background: var(--ink); }   /* colour means the five kinds of cards only; group marks stay ink */
.fragen-seite .frage-bild { margin: 0; }
.fragen-liste > .frage-gruppe:first-child { margin-top: 0; }
.frage-gruppe { scroll-margin-top: 90px; }
@media (min-width: 861px) {
  .fragen-raster { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-xl); align-items: start; margin-top: var(--space-l); }
  .fragen-seite { position: sticky; top: 100px; }
}
@media (max-width: 860px) { .fragen-marken { display: none; } .fragen-seite { margin: var(--space-m) 0 var(--space-l); } }
/* paintings: the museum label under the stage reads like a label, not a caption; puzzle film and table side by side */
.buehne .bilder figcaption { font-size: var(--step-0); color: var(--ink); margin-top: var(--space-2xs); }
@media (min-width: 861px) { .js .buehne .bilder img { height: min(64vh, 40rem); } }
@media (min-width: 861px) {
  .puzzle-paar { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xl); align-items: center; margin-top: var(--space-section); }
  .puzzle-paar .filme { margin: 0; grid-template-columns: 1fr; }
  .puzzle-paar .tafel { margin: 0; }
}

/* Set: the product in facts, one line (Oink/Stonemaier: count · age · time), in the display voice */
.set-fakten { list-style: none; padding: 0; margin: var(--space-m) 0; display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-s);
  font: var(--strong) var(--step-1)/1.1 "Marke", "Arial Narrow", sans-serif; }
.set-fakten li { white-space: nowrap; }
.set-fakten li:not(:last-child)::after { content: "·"; margin-left: var(--space-s); color: var(--grau); }
/* Set: first screen = words + the whole thing taken apart (H42 until a real photo exists), desktop side by side */
.set-kopf figure { margin: var(--space-m) 0 0; }
.set-kopf figcaption { font-size: var(--step--1); color: var(--grau); }
@media (min-width: 900px) {
  .set-kopf { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-xl); align-items: start; }
  .set-kopf figure { margin: 0; }
}
/* Set, phones: the four views as one swipe row like the five cards (one screen instead of four; sizes stay) */
@media (max-width: 760px) {
  .tafeln { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory;
    gap: var(--space-s); padding-bottom: var(--space-2xs); }
  .tafeln > figure { scroll-snap-align: start; }
}