/* pugge.eu · assets/pugge.css
   Teil 1: Tokens, Typo-Stile und Schriften (aus build/pugge.css, erzeugt aus tokens.json)
   Teil 2: Bausteine pg-* (aus dem Design System, components/bundle.css)
   Teil 3: Seitenrahmen für pugge.eu, /halloween, /impressum, /datenschutz, /kontakt
   Schriften liegen unter assets/fonts/ (selbst gehostet, OFL 1.1). Keine externen Ressourcen. */

/* pugge.eu — Tokens, Schriften und Projekt-Klassen (aus tokens.json erzeugt) */
:root, [data-theme="dark"] {
  --bg: #0c1012;
  --surface: #151c1f;
  --surface-2: #1c2529;
  --line: #263135;
  --fg: #f9f8f5;
  --muted: #aeb8ba;
  --dim: #828e91;
  --focus: #f9f8f5;
  --proj-gesellschaft: #e18b09;
  --proj-gesellschaft-text: #e18b09;
  --on-gesellschaft: #0c1012;
  --proj-mensch: #6f9cf0;
  --proj-mensch-text: #6f9cf0;
  --on-mensch: #0c1012;
  --proj-lage: #f2c46b;
  --proj-lage-text: #f2c46b;
  --on-lage: #0c1012;
  --proj-alltag: #2ac0af;
  --proj-alltag-text: #2ac0af;
  --on-alltag: #0c1012;
  --proj-events: #a855f7;
  --proj-events-text: #c084fc;
  --on-events: #0c1012;
  --proj-spiele: #aeb8ba;
  --proj-spiele-text: #aeb8ba;
  --on-spiele: #0c1012;
  --proj-mitte: #f9f8f5;
  --proj-mitte-text: #f9f8f5;
  --on-mitte: #0c1012;
  --signal-danger: #f25c6e;
  --signal-warn: #fef55b;
  --signal-ok: #9fe0b3;
  --signal-info: #f9f8f5;
  --on-signal: #0c1012;
  --on-signal-info: #0c1012;
  --nutri-protein: #6a71b2;
  --nutri-fat: #a87a12;
  --nutri-carbs: #1f9a66;
  --wood: #c89b6d;
  --wood-dark: #2a2018;
  --shadow-float: 0 8px 24px rgba(0,0,0,0.45);
  color-scheme: dark;
}
[data-theme="light"] {
  --bg: #f9f8f5;
  --surface: #ffffff;
  --surface-2: #efede8;
  --line: #d9d6cf;
  --fg: #0c1012;
  --muted: #4e5a5d;
  --dim: #5b6a70;
  --focus: #0c1012;
  --proj-gesellschaft: #e18b09;
  --proj-gesellschaft-text: #985c02;
  --on-gesellschaft: #0c1012;
  --proj-mensch: #6f9cf0;
  --proj-mensch-text: #4068b4;
  --on-mensch: #0c1012;
  --proj-lage: #f2c46b;
  --proj-lage-text: #5c4202;
  --on-lage: #0c1012;
  --proj-alltag: #2ac0af;
  --proj-alltag-text: #0c6e64;
  --on-alltag: #0c1012;
  --proj-events: #a855f7;
  --proj-events-text: #6a04ac;
  --on-events: #0c1012;
  --proj-spiele: #aeb8ba;
  --proj-spiele-text: #394042;
  --on-spiele: #0c1012;
  --proj-mitte: #0c1012;
  --proj-mitte-text: #0c1012;
  --on-mitte: #f9f8f5;
  --signal-danger: #f25c6e;
  --signal-warn: #fef55b;
  --signal-ok: #9fe0b3;
  --signal-info: #0c1012;
  --on-signal: #0c1012;
  --on-signal-info: #f9f8f5;
  --nutri-protein: #6a71b2;
  --nutri-fat: #a87a12;
  --nutri-carbs: #1f9a66;
  --wood: #b0845a;
  --wood-dark: #7a5636;
  --shadow-float: 0 8px 24px rgba(12,16,18,0.18);
  color-scheme: light;
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
  --container: 1100px;
  --measure: 36em;
  --radius-xs: 4px;
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 32px;
  --radius-pill: 999px;
  --radius-dot: 50%;
  --border-width: 1px;
  --border-project: 4px;
  --kicker-w: 36px;
  --kicker-h: 4px;
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-sans: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
.display-xl { font-family: var(--font-display); font-size: 92px; line-height: 0.95; font-weight: 800; letter-spacing: -0.035em; font-variation-settings: 'opsz' 14; }
.display { font-family: var(--font-display); font-size: 64px; line-height: 1; font-weight: 800; letter-spacing: -0.03em; font-variation-settings: 'opsz' 14; }
.h1 { font-family: var(--font-display); font-size: 40px; line-height: 1.05; font-weight: 800; letter-spacing: -0.03em; font-variation-settings: 'opsz' 14; }
.h2 { font-family: var(--font-display); font-size: 34px; line-height: 1.1; font-weight: 800; letter-spacing: -0.03em; font-variation-settings: 'opsz' 14; }
.h3 { font-family: var(--font-display); font-size: 24px; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; font-variation-settings: 'opsz' 14; }
.lead { font-family: var(--font-sans); font-size: 21px; line-height: 1.55; font-weight: 400; font-variation-settings: 'opsz' 14; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 1.55; font-weight: 400; font-variation-settings: 'opsz' 14; }
.ui { font-family: var(--font-sans); font-size: 16px; line-height: 1.25; font-weight: 500; font-variation-settings: 'opsz' 14; }
.small { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; font-weight: 400; font-variation-settings: 'opsz' 14; }
.eyebrow { font-family: var(--font-mono); font-size: 15px; line-height: 1.35; font-weight: 400; letter-spacing: 0.01em; }
.label { font-family: var(--font-mono); font-size: 12px; line-height: 1.35; font-weight: 500; letter-spacing: 0.08em; }
.mono { font-family: var(--font-mono); font-size: 14px; line-height: 1.4; font-weight: 400; }
.mono-num { font-family: var(--font-mono); font-size: 16px; line-height: 1.5; font-weight: 500; }
.stat { font-family: var(--font-display); font-size: 48px; line-height: 1; font-weight: 800; letter-spacing: -0.03em; font-variation-settings: 'opsz' 14; }
.thumb { font-family: var(--font-display); font-size: 168px; line-height: 0.92; font-weight: 800; letter-spacing: -0.01em; font-variation-settings: 'opsz' 14; }
.story-headline { font-family: var(--font-display); font-size: 144px; line-height: 0.95; font-weight: 800; letter-spacing: -0.035em; font-variation-settings: 'opsz' 14; }
.story-body { font-family: var(--font-sans); font-size: 40px; line-height: 1.4; font-weight: 400; font-variation-settings: 'opsz' 14; }
.story-eyebrow { font-family: var(--font-mono); font-size: 32px; line-height: 1.25; font-weight: 400; letter-spacing: 0.01em; }
.story-label { font-family: var(--font-mono); font-size: 36px; line-height: 1.25; font-weight: 500; letter-spacing: 0.08em; }
.story-domain { font-family: var(--font-mono); font-size: 36px; line-height: 1.2; font-weight: 500; }
.wordmark { font-family: var(--font-sans); font-size: 44px; line-height: 1; font-weight: 700; letter-spacing: -0.01em; font-variation-settings: 'opsz' 14; }
@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/BricolageGrotesque-latin.woff2") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("fonts/DMMono-Regular-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("fonts/DMMono-Medium-latin.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

/* Basis */
html { font-optical-sizing: none; }
.thumb { font-stretch: 75%; }
.mono-num, .stat { font-variant-numeric: tabular-nums; }
.label, .story-label { text-transform: uppercase; }

/* pugge.eu — Bausteine (components/bundle.css)
   Lädt nach tokens.css und liest nur dessen Tokens (var(--…)): keine Hex-Werte, keine Schriften, keine Import-Regeln, keine externen Adressen.
   Schriftgrößen, Zeilenhöhen und Laufweiten sind die Werte der Typo-Stile aus tokens.json. tokens.css legt sie nur als
   Klassen an (.h3, .eyebrow …), nicht als Variablen; deshalb stehen sie hier als Zahl, mit dem Stilnamen im Kommentar.
   Vier Werte aus dem Kapitel Typografie haben kein Token in tokens.json und stehen hier ausgeschrieben, nur aus Tokens gebaut:
   border-input (1px solid dim), border-dashed (2px dashed line), glow-project (color-mix mit --proj) und scrim (bg mit 0,85).
   Projektfarbe immer über pg-proj-<bereich>, nie --proj allein setzen.
   Themen: dunkel ist Standard (:root), hell über data-theme="light" an <html> oder einem Container. Eine dunkle Insel
   (data-theme="dark") in einer hellen Seite funktioniert auch, etwa für das DotGrid. */

/* ── 0. Ergänzungen zu den Typo-Stilen aus tokens.css ─────────────────────────────
   Was tokens.json nicht ausdrücken kann: Versalien per CSS, Tabellenziffern, schmaler Schnitt. */
.label, .story-label { text-transform: uppercase; }
.stat, .mono-num { font-variant-numeric: tabular-nums; }
.thumb { font-stretch: 75%; }
:where(body) {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-variation-settings: 'opsz' 14;
}

/* ── 1. Projektklassen ───────────────────────────────────────────────────────────
   Setzen gemeinsam --proj (Fläche), --proj-text (Schrift), --proj-on (Schrift auf der Fläche)
   und --proj-edge (Kanten, Balken, Punkte). --on-proj ist derselbe Wert unter dem Namen aus dem
   Kapitel Bausteine. --proj-edge folgt dem Thema: dunkel proj-<bereich>, hell proj-<bereich>-text.
   Das Thema kommt über die geerbten --pg-edge-*; so stimmt es auch in verschachtelten Themen. */
:root, [data-theme="dark"] {
  --pg-edge-gesellschaft: var(--proj-gesellschaft);
  --pg-edge-mensch: var(--proj-mensch);
  --pg-edge-lage: var(--proj-lage);
  --pg-edge-alltag: var(--proj-alltag);
  --pg-edge-events: var(--proj-events);
  --pg-edge-spiele: var(--proj-spiele);
  --pg-edge-mitte: var(--proj-mitte);
}
[data-theme="light"] {
  --pg-edge-gesellschaft: var(--proj-gesellschaft-text);
  --pg-edge-mensch: var(--proj-mensch-text);
  --pg-edge-lage: var(--proj-lage-text);
  --pg-edge-alltag: var(--proj-alltag-text);
  --pg-edge-events: var(--proj-events-text);
  --pg-edge-spiele: var(--proj-spiele-text);
  --pg-edge-mitte: var(--proj-mitte-text);
}
.pg-proj-gesellschaft { --proj: var(--proj-gesellschaft); --proj-text: var(--proj-gesellschaft-text); --proj-on: var(--on-gesellschaft); --on-proj: var(--on-gesellschaft); --proj-edge: var(--pg-edge-gesellschaft); }
.pg-proj-mensch       { --proj: var(--proj-mensch);       --proj-text: var(--proj-mensch-text);       --proj-on: var(--on-mensch);       --on-proj: var(--on-mensch);       --proj-edge: var(--pg-edge-mensch); }
.pg-proj-lage         { --proj: var(--proj-lage);         --proj-text: var(--proj-lage-text);         --proj-on: var(--on-lage);         --on-proj: var(--on-lage);         --proj-edge: var(--pg-edge-lage); }
.pg-proj-alltag       { --proj: var(--proj-alltag);       --proj-text: var(--proj-alltag-text);       --proj-on: var(--on-alltag);       --on-proj: var(--on-alltag);       --proj-edge: var(--pg-edge-alltag); }
.pg-proj-events       { --proj: var(--proj-events);       --proj-text: var(--proj-events-text);       --proj-on: var(--on-events);       --on-proj: var(--on-events);       --proj-edge: var(--pg-edge-events); }
.pg-proj-spiele       { --proj: var(--proj-spiele);       --proj-text: var(--proj-spiele-text);       --proj-on: var(--on-spiele);       --on-proj: var(--on-spiele);       --proj-edge: var(--pg-edge-spiele); }
.pg-proj-mitte        { --proj: var(--proj-mitte);        --proj-text: var(--proj-mitte-text);        --proj-on: var(--on-mitte);        --on-proj: var(--on-mitte);        --proj-edge: var(--pg-edge-mitte); }

/* Dateien je Thema: Bildmarke und Zeichen stehen für beide Themen im Code, das nächste data-theme entscheidet.
   pg-only-light: sichtbar nur in einem hellen Bereich (und nicht in einer dunklen Insel darin).
   pg-only-dark: sichtbar überall sonst. */
.pg-only-light:not([data-theme="light"] *),
[data-theme="light"] [data-theme="dark"] .pg-only-light,
[data-theme="light"] .pg-only-dark:not([data-theme="light"] [data-theme="dark"] *) { display: none; }

/* Bildmarke, Zeichen, Maskottchen und Code als Datei (<img>) oder als eingebettetes SVG in einer Hülle (<span>) */
:is(.pg-card__icon, .pg-card__mascot, .pg-lockup__mark, .pg-sender__mark, .pg-qr__code) > svg { display: block; width: 100%; height: 100%; }

/* ── 2. Fokus (überall gleich: 2 px focus, 2 px Abstand) ─────────────────────────
   .is-focus und .is-hover zeigen die Zustände in Vorschauen ohne Maus und Tastatur. */
.pg-card:focus-visible, .pg-btn:focus-visible, .pg-chip:focus-visible, .pg-lockup:focus-visible,
.pg-question:focus-visible, .pg-sender a:focus-visible, .pg-qr a:focus-visible, .pg-notice a:focus-visible,
.pg-card.is-focus, .pg-btn.is-focus, .pg-chip.is-focus, .pg-lockup.is-focus, .pg-question.is-focus,
.pg-sender a.is-focus {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* ── 3. ProjectCard: .pg-cards, .pg-card, --feature, --sender, --soon ──────────── */
.pg-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--space-5);
}
.pg-card {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 300px;
  padding: var(--space-5);
  background: var(--surface);
  color: var(--fg);
  border: var(--border-width) solid var(--line);
  border-top: var(--border-project) solid var(--proj-edge, var(--pg-edge-mitte));
  border-radius: var(--radius-m);
  font-family: var(--font-sans);
  font-variation-settings: 'opsz' 14;
  text-decoration: none;
  transition: background-color .15s ease;
}
.pg-card > * { margin: 0; }
.pg-card__icon { display: block; flex: none; width: var(--space-8); height: var(--space-8); margin-bottom: var(--space-3); }
.pg-card .pg-eyebrow { margin-bottom: var(--space-2); }
.pg-card__title {                                   /* h3 */
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: 24px; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em;
  color: var(--fg);
  text-wrap: balance;
}
.pg-card__text {                                    /* body */
  margin: 0 0 var(--space-3);
  font-size: 16px; line-height: 1.55;
  color: var(--muted);
  hyphens: auto;
  hyphenate-limit-chars: 10 4 4;                    /* nur lange Wörter trennen */
}
.pg-card .pg-values { margin-bottom: var(--space-3); }
.pg-card__domain {                                  /* mono */
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 14px; line-height: 1.4; font-weight: 400;
  color: var(--proj-text, var(--proj-mitte-text));
}
.pg-card__foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.pg-card__foot .pg-card__domain { margin-top: 0; }
a.pg-card:hover, a.pg-card.is-hover { background: var(--surface-2); }
a.pg-card:hover .pg-card__title, a.pg-card.is-hover .pg-card__title {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
/* Ohne Ziel (nur wenn die Domain gar kein Ziel hat): Karte als div, Domain in dim, daneben StatusBadge „Bald“ */
.pg-card--soon .pg-card__domain { color: var(--dim); }

/* Absender-Kachel „Über Daniel Pugge“: volle Breite unter den sechs Projektkarten, DP-Zeichen links, Text rechts */
.pg-card--sender {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-5);
  align-content: start;
  min-height: 0;
}
.pg-card--sender > * { grid-column: 2; }
.pg-card--sender > .pg-card__icon { grid-column: 1; grid-row: 1 / span 6; margin-bottom: 0; }
.pg-card--sender .pg-card__domain { margin-top: 0; }

/* Aktionskarte: kein Gesamtlink, genau ein Primärknopf, höchstens eine pro Seite, volle Rasterbreite */
.pg-card--feature {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-7);
  align-content: start;
  min-height: 0;
}
.pg-card--feature > * { grid-column: 1; }
.pg-card--feature .pg-card__title {                 /* display */
  margin-bottom: var(--space-3);
  font-size: 64px; line-height: 1; letter-spacing: -0.03em;
}
.pg-card--feature .pg-card__text { max-width: var(--measure); margin-bottom: var(--space-5); }
.pg-card--feature .pg-countdown,
.pg-card--feature .pg-chips,
.pg-card--feature .pg-status { margin-bottom: var(--space-5); justify-self: start; }
/* Pugge-Punkt 128 px, steht still, alt=""; als Punkt-Zähler der Halloween-Kachel 160 px (Kampagne H-02) */
.pg-card__mascot { grid-column: 2; grid-row: 1 / span 8; align-self: start; display: block; width: 128px; height: 128px; }
.pg-card__mascot--counter { width: 160px; height: 160px; }
.pg-card__ended { font-size: 16px; line-height: 1.55; color: var(--muted); margin-bottom: var(--space-5); }
@media (max-width: 640px) {
  .pg-card--feature { grid-template-columns: minmax(0, 1fr); }
  .pg-card__mascot { grid-column: 1; grid-row: auto; order: -1; margin-bottom: var(--space-4); }
  .pg-card--feature .pg-card__title { font-size: 40px; line-height: 1.05; }   /* h1 */
}

/* ── 4. Button: .pg-btn --primary | --secondary, Größen --m (Standard), --l, --story ── */
.pg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.pg-btn,
.pg-btn--m {                                        /* ui */
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--space-9);
  margin: 0;
  padding: 0 var(--space-6);
  background: transparent;
  color: var(--fg);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 16px; line-height: 1.25; font-weight: 500;
  font-variation-settings: 'opsz' 14;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color .15s ease, border-color .15s ease, outline-color .15s ease;
}
.pg-btn__icon { width: 1.25em; height: 1.25em; flex: none; }
.pg-btn--primary {
  background: var(--proj, var(--proj-mitte));
  color: var(--proj-on, var(--on-mitte));
}
/* Hell: Primärfläche mit 1 px Kante in proj-…-text (Gold auf Papier nur 1,53:1) */
[data-theme="light"] .pg-btn--primary { border-color: var(--proj-text, var(--proj-mitte-text)); }
.pg-btn--primary:hover, .pg-btn--primary.is-hover {
  outline: 2px solid var(--proj-edge, var(--pg-edge-mitte));
  outline-offset: 2px;
}
/* Sekundär: border-input (1 px dim). pg-btn--ghost ist nur ein Altname für bestehendes Markup:
   „Ghost“ ist bei GHOST der beste Lauf und kein Knopfname, neues Markup nimmt pg-btn--secondary. */
.pg-btn--secondary,
.pg-btn--ghost { background: transparent; border-color: var(--dim); color: var(--fg); }
.pg-btn--secondary:hover, .pg-btn--secondary.is-hover,
.pg-btn--ghost:hover, .pg-btn--ghost.is-hover { background: var(--surface-2); border-color: var(--fg); }
.pg-btn:focus-visible, .pg-btn.is-focus { outline-color: var(--focus); }
.pg-btn:active { transform: translateY(1px); }
.pg-btn[aria-disabled="true"], .pg-btn:disabled {
  background: var(--surface-2);
  border-color: transparent;
  color: var(--dim);
  outline: none;
  cursor: not-allowed;
  transform: none;
}
.pg-btn[aria-disabled="true"]:focus-visible, .pg-btn:disabled:focus-visible { outline: 2px solid var(--focus); }
.pg-btn--l { min-height: var(--space-10); font-size: 21px; }      /* lead */
.pg-btn--story {                                    /* nur 1080er-Formate: Höhe space-12, 40 px */
  min-height: var(--space-12);
  padding: 0 var(--space-8);
  gap: var(--space-4);
  font-size: 40px;
  border-width: calc(var(--border-width) * 2);
}

/* ── 5. Eyebrow, Kicker, Label ───────────────────────────────────────────────── */
.pg-eyebrow {                                       /* eyebrow */
  margin: 0;
  font-family: var(--font-mono);
  font-size: 15px; line-height: 1.35; font-weight: 400; letter-spacing: 0.01em;
  color: var(--proj-text, var(--proj-mitte-text));
}
/* Kicker-Balken kicker-w × kicker-h in --proj-edge, space-3 darüber; nur wo keine Karte mit Oberkante ist */
.pg-eyebrow--kicker::before,
.pg-kicker {
  content: "";
  display: block;
  width: var(--kicker-w);
  height: var(--kicker-h);
  margin-bottom: var(--space-3);
  background: var(--proj-edge, var(--pg-edge-mitte));
  border-radius: var(--radius-xs);
}
.pg-label {                                         /* label, Versalien per CSS */
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px; line-height: 1.35; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── 6. Chip: Tag, Filter-Chip (button[aria-pressed]), Bezahltes Angebot ─────── */
.pg-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; padding: 0; }
.pg-chip {                                          /* mono */
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--space-7);
  margin: 0;
  padding: 0 var(--space-3);
  background: var(--surface);
  color: var(--fg);
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 14px; line-height: 1.4; font-weight: 400;
  white-space: nowrap;
  text-decoration: none;
}
.pg-chip__dot {
  display: block;
  flex: none;
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-dot);
  background: var(--proj-edge, var(--pg-edge-mitte));
}
.pg-chip__check { display: none; flex: none; width: var(--space-4); height: var(--space-4); }
button.pg-chip {                                    /* Filter-Chip: sichtbar 40 px, Kante border-input */
  height: var(--space-8);
  border-color: var(--dim);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
/* Trefferfläche 48 px: je 4 px unsichtbar über und unter den sichtbaren 40 px */
button.pg-chip::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--space-1) * -1);
  bottom: calc(var(--space-1) * -1);
}
button.pg-chip:hover, button.pg-chip.is-hover { background: var(--surface-2); }
.pg-chip[aria-pressed="true"],
button.pg-chip[aria-pressed="true"]:hover {
  background: var(--proj, var(--proj-mitte));
  border-color: var(--proj, var(--proj-mitte));
  color: var(--proj-on, var(--on-mitte));
}
[data-theme="light"] .pg-chip[aria-pressed="true"] { border-color: var(--proj-text, var(--proj-mitte-text)); }
.pg-chip[aria-pressed="true"] .pg-chip__check { display: block; }
.pg-chip[aria-pressed="true"] .pg-chip__dot { display: none; }
.pg-chip--paid { border-color: var(--dim); }
.pg-chip--paid .pg-chip__dot { display: none; }

/* ── 7. ValueLine: Werte-Zeile wortgleich aus dem Kapitel Sprache ──────────────
   Karte und Fußzeile: small in dim. Unter der H1: eyebrow in proj-…-text. */
.pg-values,
.pg-valueline {                                     /* small */
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px; line-height: 1.5; font-weight: 400;
  font-variation-settings: 'opsz' 14;
  color: var(--dim);
}
.pg-values--head, .pg-valueline--head,
:is(h1, .h1, .display-xl) + :is(.pg-values, .pg-valueline) {   /* eyebrow */
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: 15px; line-height: 1.35; letter-spacing: 0.01em;
  color: var(--proj-text, var(--proj-mitte-text));
}

/* ── 8. SenderFooter: „Teil von pugge.eu“ ───────────────────────────────────── */
.pg-sender {                                        /* small */
  display: grid;
  gap: var(--space-3);
  padding: var(--space-6) 0;
  border-top: var(--border-width) solid var(--line);
  font-family: var(--font-sans);
  font-size: 14px; line-height: 1.5;
  font-variation-settings: 'opsz' 14;
  color: var(--muted);
}
.pg-sender > * { margin: 0; }
.pg-sender__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.pg-sender__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.pg-sender__mark { display: block; flex: none; width: var(--space-4); height: var(--space-4); }
.pg-sender__domain {                                /* mono */
  font-family: var(--font-mono);
  font-size: 14px; line-height: 1.4;
  color: var(--proj-text, var(--proj-mitte-text));
}
.pg-sender__note { color: var(--dim); }
.pg-sender__note .pg-values { display: inline; font: inherit; color: inherit; }
.pg-sender__legal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); color: var(--dim); }
.pg-sender__legal a { color: var(--muted); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pg-sender a:hover, .pg-sender a.is-hover { color: var(--fg); text-decoration-thickness: 2px; }
/* Druck: eine Zeile aus Bildmarke, „Teil von pugge.eu“ und Domain; Bildmarke 8 mm (Kachel bzw. Nacht-Logo) */
.pg-sender--print { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding: 0; border-top: 0; }
.pg-sender--print .pg-sender__mark { width: 8mm; height: 8mm; }
.pg-sender--print .pg-sender__brand { text-decoration: none; font-weight: 500; }

/* ── 9. LogoLockup: Bildmarke als Datei + Wortmarke „pugge.eu“ (700) ─────────── */
.pg-lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--fg);
  text-decoration: none;
  border-radius: var(--radius-s);
}
.pg-lockup__mark { display: block; flex: none; width: 36px; height: 36px; }   /* Web 36 px, Schutzraum M = 26 % */
.pg-lockup__word {                                  /* wordmark, Web 20 px */
  font-family: var(--font-sans);
  font-size: 20px; line-height: 1; font-weight: 700; letter-spacing: -0.01em;
  font-variation-settings: 'opsz' 14;
  color: var(--fg);
  white-space: nowrap;
}
/* Projekt-Lockup: Projektzeichen plus Projektname in 800; die 700 gehört allein der Wortmarke „pugge.eu“ */
.pg-lockup--project .pg-lockup__word { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; }
.pg-lockup--social { gap: var(--space-4); }
.pg-lockup--social .pg-lockup__mark,
.pg-lockup--thumb .pg-lockup__mark { width: var(--space-10); height: var(--space-10); }
.pg-lockup--social .pg-lockup__word { font-size: 44px; }          /* wordmark */
.pg-lockup--thumb .pg-lockup__word { display: none; }
/* Druck (Sticker): Bildmarke 14 mm, Wortmarke und Abstand im Verhältnis des Social-Lockups (64/44, 64/16) */
.pg-lockup--druck { gap: calc(14mm * 0.25); }
.pg-lockup--druck .pg-lockup__mark { width: 14mm; height: 14mm; }
.pg-lockup--druck .pg-lockup__word { font-size: calc(14mm * 0.6875); }

/* ── 10. StatTile: Zahl mit Quelle ─────────────────────────────────────────────── */
.pg-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--space-3); }
.pg-stat {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-5);
  background: var(--surface);
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius-m);
}
.pg-stat > * { margin: 0; }
.pg-stat__value {                                   /* stat */
  font-family: var(--font-display);
  font-size: 48px; line-height: 1; font-weight: 800; letter-spacing: -0.03em;
  font-variation-settings: 'opsz' 14;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.pg-stat__unit {                                    /* font-sans 500, 40 % der Zahl */
  font-family: var(--font-sans);
  font-size: 0.4em; font-weight: 500; letter-spacing: 0;
  color: var(--muted);
}
.pg-stat__change {                                  /* mono-num */
  font-family: var(--font-mono);
  font-size: 16px; line-height: 1.5; font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.pg-stat__source {                                  /* Label-Größe, ohne Versalien */
  font-family: var(--font-mono);
  font-size: 12px; line-height: 1.35; font-weight: 500;
  color: var(--dim);
}
/* Kompakt für Tabellen und Listen: Label links, Wert rechts in mono-num */
.pg-stat--row {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) 0;
  background: none;
  border: 0;
  border-bottom: var(--border-width) solid var(--line);
  border-radius: 0;
}
.pg-stat--row .pg-stat__value {
  font-family: var(--font-mono);
  font-size: 16px; line-height: 1.5; font-weight: 500; letter-spacing: 0;
}
.pg-stat--row .pg-stat__unit { font-family: inherit; font-size: 1em; font-weight: inherit; }
.pg-stat--row .pg-stat__source { flex-basis: 100%; }

/* ── 11. Countdown: Tage, Std, Min, ohne Sekunden ─────────────────────────────── */
.pg-countdown { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.pg-countdown > * { margin: 0; }
.pg-countdown__units { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.pg-countdown__unit {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  min-width: 88px;
  padding: var(--space-4) var(--space-3);
  background: var(--surface);
  border: var(--border-width) solid var(--line);
  border-top: var(--border-project) solid var(--proj-edge, var(--pg-edge-mitte));
  border-radius: var(--radius-m);
}
.pg-card .pg-countdown__unit { background: var(--bg); }
.pg-countdown__num {                                /* stat */
  font-family: var(--font-display);
  font-size: 48px; line-height: 1; font-weight: 800; letter-spacing: -0.03em;
  font-variation-settings: 'opsz' 14;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.pg-countdown__target { font-family: var(--font-mono); font-size: 14px; line-height: 1.4; color: var(--muted); }   /* mono */
.pg-countdown__ended { font-family: var(--font-sans); font-size: 16px; line-height: 1.55; color: var(--muted); }
/* Inline für Kopfleisten: mono-num */
.pg-countdown--inline { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); }
.pg-countdown--inline .pg-countdown__units { gap: var(--space-3); }
.pg-countdown--inline .pg-countdown__unit {
  flex-direction: row;
  align-items: baseline;
  gap: var(--space-1);
  min-width: 0;
  padding: 0;
  background: none;
  border: 0;
}
.pg-card .pg-countdown--inline .pg-countdown__unit { background: none; }
.pg-countdown--inline .pg-countdown__num {
  font-family: var(--font-mono);
  font-size: 16px; line-height: 1.5; font-weight: 500; letter-spacing: 0;
}

/* ── 12. StatusBadge und Hinweisbox ────────────────────────────────────────────── */
.pg-status,
.pg-badge {                                         /* label */
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: var(--space-6);
  padding: 0 var(--space-3) 0 var(--space-2);
  background: var(--signal-info);
  color: var(--on-signal-info);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 12px; line-height: 1.35; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pg-status__icon, .pg-badge__icon { display: block; flex: none; width: var(--space-4); height: var(--space-4); }
.pg-status--danger, .pg-badge--danger { background: var(--signal-danger); color: var(--on-signal); }
.pg-status--warn, .pg-badge--warn     { background: var(--signal-warn);   color: var(--on-signal); }
.pg-status--ok, .pg-badge--ok         { background: var(--signal-ok);     color: var(--on-signal); }
.pg-status--info, .pg-status--live, .pg-status--soon,
.pg-badge--info, .pg-badge--live, .pg-badge--soon { background: var(--signal-info); color: var(--on-signal-info); }
/* Hell: Innenkante dim, weil Gelb und Mint sich kaum von Papier abheben */
[data-theme="light"] .pg-status,
[data-theme="light"] .pg-badge { box-shadow: inset 0 0 0 var(--border-width) var(--dim); }

.pg-notice {                                        /* body */
  --pg-signal: var(--signal-info);
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--surface-2);
  color: var(--fg);
  border: var(--border-width) solid transparent;
  border-left: var(--border-project) solid var(--pg-signal);
  border-radius: var(--radius-s);
  font-family: var(--font-sans);
  font-size: 16px; line-height: 1.55;
  font-variation-settings: 'opsz' 14;
}
.pg-notice > p { flex: 1 1 16em; margin: 0; }
.pg-notice > .pg-status { flex: none; margin-top: 1px; }
.pg-notice a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.pg-notice--danger { --pg-signal: var(--signal-danger); }
.pg-notice--warn   { --pg-signal: var(--signal-warn); }
.pg-notice--ok     { --pg-signal: var(--signal-ok); }
.pg-notice--info   { --pg-signal: var(--signal-info); }
/* Hell: 1 px Rand in dim (4,80:1 auf surface-2), die Signal-Kante links bleibt Schmuck */
[data-theme="light"] .pg-notice { border-top-color: var(--dim); border-right-color: var(--dim); border-bottom-color: var(--dim); }

/* ── 13. QRBlock: Code dunkel auf Papier (in der Datei), Kurzadresse darunter ────
   Module Nacht auf Papier, 4 Module Ruhezone und Fehlerkorrektur M stecken in der SVG-Datei, nicht im CSS. */
.pg-qr { display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2); margin: 0; }
.pg-qr__code { display: block; width: 160px; height: 160px; border-radius: var(--radius-xs); }
/* Platzhalter (border-dashed), bis der Code erzeugt werden darf; auch das Snapcode-Feld */
.pg-qr__slot {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 160px;
  height: 160px;
  padding: var(--space-3);
  border: 2px dashed var(--line);
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: 14px; line-height: 1.4;
  color: var(--muted);
  text-align: center;
}
.pg-qr__url {                                       /* mono 500 */
  font-family: var(--font-mono);
  font-size: 14px; line-height: 1.4; font-weight: 500;
  color: var(--fg);
}
.pg-qr__hint {                                      /* label */
  font-family: var(--font-mono);
  font-size: 12px; line-height: 1.35; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.pg-qr--story .pg-qr__code, .pg-qr--story .pg-qr__slot { width: 300px; height: 300px; }
.pg-qr--flyer .pg-qr__code, .pg-qr--flyer .pg-qr__slot { width: 20mm; height: 20mm; }
.pg-qr--sticker .pg-qr__code, .pg-qr--sticker .pg-qr__slot { width: 30mm; height: 30mm; }

/* ── 14. QuestionCard: linke Kante, eine Frage, gestricheltes Antwortfeld ────── */
.pg-question {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-6);
  background: var(--surface);
  color: var(--fg);
  border: var(--border-width) solid var(--line);
  border-left: var(--border-project) solid var(--proj-edge, var(--pg-edge-mitte));
  border-radius: var(--radius-m);
  font-family: var(--font-sans);
  font-variation-settings: 'opsz' 14;
  text-align: left;
}
.pg-question > * { margin: 0; }
.pg-question__title {                               /* h2 */
  font-family: var(--font-display);
  font-size: 34px; line-height: 1.1; font-weight: 800; letter-spacing: -0.03em;
  color: var(--fg);
  text-wrap: balance;
}
.pg-question__answer {                              /* border-dashed, mono */
  padding: var(--space-4);
  border: 2px dashed var(--line);
  border-radius: var(--radius-s);
  font-family: var(--font-mono);
  font-size: 14px; line-height: 1.4;
  color: var(--muted);
}
.pg-question__text { font-size: 16px; line-height: 1.55; color: var(--muted); }   /* body */
.pg-question--back { background: var(--surface-2); }
button.pg-question { width: 100%; font: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; }

/* ── 15. DotGrid: Punktraster 46 px in line, ein Glow (glow-project) aus einer Ecke ─
   Nur dunkel: ist die Seite hell, data-theme="dark" an dasselbe Element wie pg-dotgrid setzen.
   --pg-glow-reach: Reichweite der Glow-Punkte, höchstens 55 % der kürzeren Bildkante
   (1080er und Video 600 px, Teilen-Bild 350 px, Thumbnail 400 px; kleinere Flächen inline setzen). */
.pg-dotgrid {
  --pg-glow-at: 100% 100%;
  --pg-glow-reach: 600px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at var(--pg-glow-at),
      color-mix(in srgb, var(--proj, var(--proj-mitte)) 22%, transparent),
      color-mix(in srgb, var(--proj, var(--proj-mitte)) 6%, transparent) 50%,
      transparent 70%),
    radial-gradient(circle, var(--line) 2.4px, transparent 2.9px);
  background-size: 100% 100%, 46px 46px;
  background-repeat: no-repeat, repeat;
  color: var(--fg);
}
/* Glow-Punkte: größer und in --proj, nur innerhalb der Reichweite (zwei Stufen) */
.pg-dotgrid::before,
.pg-dotgrid::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-size: 46px 46px;
}
.pg-dotgrid::before {
  background-image: radial-gradient(circle, color-mix(in srgb, var(--proj, var(--proj-mitte)) 45%, transparent) 3.4px, transparent 3.9px);
  -webkit-mask-image: radial-gradient(circle var(--pg-glow-reach) at var(--pg-glow-at), var(--fg), transparent);
  mask-image: radial-gradient(circle var(--pg-glow-reach) at var(--pg-glow-at), var(--fg), transparent);
}
.pg-dotgrid::after {
  background-image: radial-gradient(circle, color-mix(in srgb, var(--proj, var(--proj-mitte)) 70%, transparent) 4.6px, transparent 5.1px);
  -webkit-mask-image: radial-gradient(circle calc(var(--pg-glow-reach) * 0.5) at var(--pg-glow-at), var(--fg), transparent);
  mask-image: radial-gradient(circle calc(var(--pg-glow-reach) * 0.5) at var(--pg-glow-at), var(--fg), transparent);
}
.pg-dotgrid--tl { --pg-glow-at: 0% 0%; }
.pg-dotgrid--tr { --pg-glow-at: 100% 0%; }
.pg-dotgrid--bl { --pg-glow-at: 0% 100%; }
.pg-dotgrid--br { --pg-glow-at: 100% 100%; }
.pg-dotgrid--c  { --pg-glow-at: 50% 50%; }          /* nur Motive ohne Text */
.pg-dotgrid--share { --pg-glow-reach: 350px; }      /* Teilen-Bild 1200×630 */
.pg-dotgrid--thumb { --pg-glow-reach: 400px; }      /* YouTube-Thumbnail 1280×720 */
.pg-dotgrid__inner {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  height: 100%;
  padding: var(--space-8);
}
.pg-dotgrid__inner > * { margin: 0; }
/* Text über Foto oder Video: scrim = bg mit 0,85 Deckkraft, als Fläche oder als Verlauf
   (konstant bis 40 px unter der letzten Textzeile --scrim-end, danach 200 px Auslauf) */
.pg-scrim { background: color-mix(in srgb, var(--bg) 85%, transparent); }
.pg-scrim--top {
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 85%, transparent) calc(var(--scrim-end, 0px) + 40px), transparent calc(var(--scrim-end, 0px) + 240px));
}
.pg-scrim--bottom {
  background: linear-gradient(to top, color-mix(in srgb, var(--bg) 85%, transparent) calc(var(--scrim-end, 0px) + 40px), transparent calc(var(--scrim-end, 0px) + 240px));
}
.pg-domain {                                        /* mono 500 */
  margin: 0;
  font-family: var(--font-mono);
  font-size: 14px; line-height: 1.4; font-weight: 500;
  color: var(--proj-text, var(--proj-mitte-text));
}

/* ── 16. LowerThird: Bauchbinde mit Oberkante ─────────────────────────────────── */
.pg-lowerthird {
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-6);
  background: var(--surface);
  border: var(--border-width) solid var(--line);
  border-top: var(--border-project) solid var(--proj-edge, var(--pg-edge-mitte));
  border-radius: var(--radius-m);
  transition: opacity .3s ease;
}
.pg-lowerthird > * { margin: 0; }
.pg-lowerthird__name {                              /* Web: h3 */
  font-family: var(--font-display);
  font-size: 24px; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em;
  font-variation-settings: 'opsz' 14;
  color: var(--fg);
}
.pg-lowerthird__role {                              /* Web: mono */
  font-family: var(--font-mono);
  font-size: 14px; line-height: 1.4; font-weight: 400;
  color: var(--proj-text, var(--proj-mitte-text));
}
.pg-lowerthird--out { opacity: 0; }                 /* Ein- und Ausblenden nur über Deckkraft */

/* ── 17. Formate: pg-social (alle 1080er-Leinwände) und pg-video (1920×1080) ─────
   Kante ×2, Oberkante und Kicker ×3, Kartenradius radius-l; im Video Oberkante ×2. */
.pg-social .pg-card,
.pg-social .pg-stat,
.pg-social .pg-countdown__unit,
.pg-social .pg-lowerthird { border-width: calc(var(--border-width) * 2); border-radius: var(--radius-l); }
.pg-social .pg-card,
.pg-social .pg-countdown__unit,
.pg-social .pg-lowerthird { border-top-width: calc(var(--border-project) * 3); }
.pg-social .pg-eyebrow { font-size: 32px; line-height: 1.25; }                 /* story-eyebrow */
.pg-social .pg-eyebrow--kicker::before,
.pg-social .pg-kicker { width: calc(var(--kicker-w) * 3); height: calc(var(--kicker-h) * 3); }
.pg-social .pg-label,
.pg-video .pg-label { font-size: 36px; line-height: 1.25; }                    /* story-label */
.pg-social .pg-values { font-family: var(--font-mono); font-size: 32px; line-height: 1.25; letter-spacing: 0.01em; color: var(--proj-text, var(--proj-mitte-text)); }
.pg-social .pg-chip { height: 68px; padding: 0 var(--space-6); gap: var(--space-3); font-size: 30px; border-width: calc(var(--border-width) * 2); }
.pg-social .pg-chip__dot { width: var(--space-4); height: var(--space-4); }
.pg-social .pg-stat { padding: var(--space-7); }
.pg-social .pg-stat__value { font-size: 96px; }
.pg-social .pg-stat__source { font-size: 36px; line-height: 1.25; }           /* Label-Größe in Social */
.pg-social .pg-countdown__unit { padding: var(--space-6) var(--space-5); min-width: 200px; }
.pg-social .pg-countdown__num { font-size: 120px; }
.pg-social .pg-countdown__target { font-size: 32px; line-height: 1.25; }
.pg-social .pg-question { border-width: calc(var(--border-width) * 2); border-left-width: calc(var(--border-project) * 3); border-radius: var(--radius-l); padding: var(--space-9); }
.pg-social .pg-question__title { font-size: 120px; line-height: 1; letter-spacing: -0.035em; }
.pg-social .pg-question__answer { font-size: 32px; border-width: 4px; padding: var(--space-6); border-radius: var(--radius-l); }
.pg-social .pg-qr__url,
.pg-social .pg-domain,
.pg-video .pg-domain { font-size: 36px; line-height: 1.2; }                    /* story-domain */
.pg-video .pg-card,
.pg-video .pg-countdown__unit,
.pg-video .pg-lowerthird { border-top-width: calc(var(--border-project) * 2); }
.pg-video .pg-countdown__num { font-size: 96px; }
.pg-video .pg-lowerthird__name { font-size: 48px; line-height: 1.1; letter-spacing: -0.03em; }
.pg-video .pg-lowerthird__role { font-size: 28px; line-height: 1.3; }

/* ── 18. Dunkle Insel in heller Seite (z. B. DotGrid mit data-theme="dark") ─────
   Die Hell-Regeln oben hängen an einem hellen Vorfahren; in einer dunklen Insel gelten wieder die dunklen Werte. */
[data-theme="light"] [data-theme="dark"] .pg-btn--primary,
[data-theme="light"] [data-theme="dark"].pg-btn--primary { border-color: transparent; }
[data-theme="light"] [data-theme="dark"] .pg-chip[aria-pressed="true"] { border-color: var(--proj, var(--proj-mitte)); }
[data-theme="light"] [data-theme="dark"] .pg-status,
[data-theme="light"] [data-theme="dark"] .pg-badge { box-shadow: none; }
[data-theme="light"] [data-theme="dark"] .pg-notice { border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; }

/* ── 19. Aliasse ──────────────────────────────────────────────────────────────
   .pg-valueline (= .pg-values), .pg-badge (= .pg-status, mit denselben Modifikatoren) und .pg-kicker
   (der Balken allein) sind oben in denselben Regeln mitdeklariert; ebenso .pg-btn--m (= Standardgröße)
   und der Altname .pg-btn--ghost (= .pg-btn--secondary). Neue Seiten nehmen pg-values, pg-status,
   pg-eyebrow--kicker und pg-btn--secondary wie im Kapitel Bausteine. */

@media (prefers-reduced-motion: reduce) {
  .pg-card, .pg-btn, .pg-lowerthird { transition: none; }
  .pg-btn:active { transform: none; }
}

/* ══ 20. Website-Paket pugge.eu: Seitenrahmen ═══════════════════════════════════
   Nur Tokens (var(--…)); Größen der Typo-Stile als Zahl bzw. clamp() laut Kapitel Typografie.
   Dunkel ist Standard. Hell nur beim Drucken (pugge.js setzt data-theme="light"). */

/* Ersatzschrift mit angeglichenen Maßen (Kapitel Typografie, Laden) */
@font-face { font-family: "Bricolage Fallback"; src: local("Arial"), local("Liberation Sans"); font-weight: 300 500; size-adjust: 103.3%; ascent-override: 90%; descent-override: 26.1%; line-gap-override: 0%; }
@font-face { font-family: "Bricolage Fallback"; src: local("Arial Bold"), local("Liberation Sans Bold"); font-weight: 600 800; size-adjust: 101.3%; ascent-override: 91.8%; descent-override: 26.7%; line-gap-override: 0%; }
:root {
  --font-display: "Bricolage Grotesque", "Bricolage Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-sans: "Bricolage Grotesque", "Bricolage Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Schalter (pugge.js setzt sie an <html>; ohne Skript gilt die erste Fassung) */
[hidden] { display: none !important; }
:root:not([data-aufgaben="disziplinen"]) .v-disziplinen,
:root[data-aufgaben="disziplinen"] .v-gleich,
:root[data-aufgaben="disziplinen"] .nur-gleich,
:root:not([data-geistlink="ja"]) .nur-geistlink,
:root[data-geistlink="ja"] .ohne-geistlink,
:root:not([data-herkunft="an"]) .nur-herkunft,
:root:not([data-livefinale="an"]) .nur-livefinale,
:root:not([data-stoerung="an"]) .nur-stoerung,
:root:not([data-aufgabenliste="an"]) .nur-aufgabenliste { display: none !important; }
/* Pugge-Punkt erst zeigen, wenn pugge.js die Fassung zum Datum gesetzt hat (ohne Skript: <noscript> blendet ihn aus) */
:root[data-skript] .pg-counter:not([data-bereit]) { visibility: hidden; }

/* ── Grundlage ── */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--space-6);
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  font-variation-settings: 'opsz' 14;
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; }
p, h1, h2, h3, ol, ul, figure, address, dl, dd { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
::selection { background: var(--fg); color: var(--bg); }
.site-hyph, .site-lead, .pg-card__text, .site-prose p, .site-prose li {
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 10 4 4;
}
.site-nowrap { white-space: nowrap; }
.site-nohyph { -webkit-hyphens: manual; hyphens: manual; }
.site-balance { text-wrap: balance; }
.site-lead, .site-sub, .hw-section p { text-wrap: pretty; }

/* Textlinks im Fließtext */
.site-prose a:not(.pg-btn),
.site-link {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.site-prose a:not(.pg-btn):hover,
.site-link:hover { text-decoration-thickness: 2px; }
.site-domain-link {
  font-family: var(--font-mono);
  font-size: 16px; line-height: 1.5; font-weight: 500;
  color: var(--proj-text, var(--proj-mitte-text));
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.site-domain-link:hover { text-decoration-thickness: 2px; }

/* Sprunglink */
.site-skip {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  z-index: 30;
  padding: var(--space-3) var(--space-4);
  background: var(--fg);
  color: var(--bg);
  border-radius: var(--radius-s);
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-300%);
}
.site-skip:focus { transform: none; }

/* ── Raster: container 1100 px, Rand 16 px unter 640 px, sonst 20 px ── */
.site-wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-4);
}
@media (min-width: 640px) { .site-wrap { padding: 0 var(--space-5); } }

/* ── Kopfzeile: Lockup links, Sprachknopf bzw. Rücklink rechts ── */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-5);
}
.site-header .pg-lockup { padding: var(--space-1) 0; }
.site-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--space-9);
  font-size: 14px; line-height: 1.5;
  color: var(--muted);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.site-back:hover { color: var(--fg); text-decoration-thickness: 2px; }
.site-back svg { width: var(--space-4); height: var(--space-4); flex: none; }

/* Sprachknopf (Hub): sichtbar 40 px, Trefferfläche 48 px */
.site-lang { position: relative; }
.site-lang__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--space-8);
  margin: 0;
  padding: 0 var(--space-3);
  background: var(--surface);
  color: var(--fg);
  border: var(--border-width) solid var(--dim);
  border-radius: var(--radius-s);
  font-family: var(--font-mono);
  font-size: 14px; line-height: 1; font-weight: 500;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.site-lang__btn::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--space-1) * -1); bottom: calc(var(--space-1) * -1); }
.site-lang__btn:hover { background: var(--surface-2); border-color: var(--fg); }
.site-lang__btn svg { width: var(--space-4); height: var(--space-4); flex: none; }
.site-lang__panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  z-index: 10;
  width: 15rem;
  max-width: calc(100vw - var(--space-7));
  padding: var(--space-4);
  background: var(--surface);
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-float);
  display: grid;
  gap: var(--space-2);
}
.site-lang__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 500;
  color: var(--fg);
}
.site-lang__item svg { width: var(--space-4); height: var(--space-4); flex: none; }
.site-lang__note { font-size: 14px; line-height: 1.5; color: var(--muted); }

/* Vorschau-Hinweis bei ?datum= */
.site-preview { margin-top: var(--space-4); }

/* ── Kopf der Seite ── */
.site-hero { padding-block: var(--space-8) var(--space-10); }
@media (min-width: 640px) { .site-hero { padding-block: var(--space-10) var(--space-11); } }
.site-h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, 1.5rem + 6.5vw, 5.75rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  font-variation-settings: 'opsz' 14;
  color: var(--fg);
  text-wrap: balance;
}
.site-h1--page {
  font-size: clamp(2rem, 1.5rem + 2vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
@media (max-width: 359px) { .site-h1:not(.site-h1--page) { font-size: 2.5rem; } } /* „Schlag deinen“ passt ab 320 px in eine Zeile */
.site-hero .pg-eyebrow { margin-top: var(--space-5); }
.site-lead {
  margin-top: var(--space-5);
  max-width: var(--measure);
  font-size: clamp(1.125rem, 1rem + 0.8vw, 1.3125rem);
  line-height: 1.55;
  color: var(--muted);
}

/* ── Abschnitte ── */
.site-section { margin-top: var(--space-11); }
.site-section--first { margin-top: 0; }
.site-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 1.25rem + 1.6vw, 2.125rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-variation-settings: 'opsz' 14;
  color: var(--fg);
  text-wrap: balance;
}
.site-h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-variation-settings: 'opsz' 14;
  color: var(--fg);
  text-wrap: balance;
}
.site-sub {
  margin-top: var(--space-2);
  margin-bottom: var(--space-6);
  max-width: var(--measure);
  color: var(--muted);
}
.site-money .site-h2 + p { margin-top: var(--space-5); }
.site-money p { max-width: var(--measure); color: var(--muted); }
.site-money p + p { margin-top: var(--space-4); }

/* ── Halloween-Kachel H-02 (pg-card--feature) ── */
.site-feature { margin-bottom: var(--space-11); }
@media (min-width: 640px) { .pg-card--feature { padding: var(--space-7); } }
.pg-card--feature .pg-card__title {
  font-size: clamp(2.5rem, 1.75rem + 3.5vw, 4rem);
  line-height: 1;
  letter-spacing: -0.03em;
}
.pg-card--feature .pg-card__text a { color: var(--fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pg-card--feature .pg-card__text a:hover { text-decoration-thickness: 2px; }
.pg-card .pg-card__mascot.pg-counter { width: 160px; height: 160px; }
.pg-counter img { display: block; width: 160px; height: 160px; }
.site-live {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  color: var(--fg);
}
.pg-card--feature .site-live { margin-bottom: var(--space-5); }
.pg-card--feature .pg-card__ended { margin-bottom: var(--space-2); }

/* Projektkarte: Zeichen und Chip in einer Reihe (GHOST mit „Sa 31.10. · Geisterabend“) */
.pg-card__top {
  display: flex;
  flex-wrap: wrap;                                  /* schmale Karte: Chip in eigener Zeile unter dem Zeichen */
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.pg-card__top .pg-card__icon { margin-bottom: 0; }
.pg-card__top .pg-chip { margin-top: var(--space-1); }
.pg-card__icon { width: var(--space-8); height: var(--space-8); }
.pg-card--sender .pg-card__text { max-width: var(--measure); }

/* ── Fußzeile ── */
.site-footer { margin-top: var(--space-11); }

/* ══ 21. pugge.eu/halloween ═════════════════════════════════════════════════════ */
.hw-col { max-width: calc(var(--measure) * 1.3125); }
.hw-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  padding-block: var(--space-6) var(--space-10);
}
.hw-hero__mascot { width: 160px; height: 160px; }
.hw-hero__text > * + * { margin-top: var(--space-5); }
.hw-hero__text .site-h1 { margin-top: var(--space-3); }
.hw-hero__text .site-lead { margin-top: var(--space-5); }
@media (min-width: 900px) {
  .hw-hero {
    grid-template-columns: minmax(0, 1fr) 160px;
    column-gap: var(--space-10);
    padding-top: var(--space-10);
  }
  .hw-hero__mascot { grid-column: 2; grid-row: 1; }
  .hw-hero__text { grid-column: 1; grid-row: 1; }
}
.hw-hero .hw-fg { color: var(--fg); }
.hw-hint { font-size: 14px; line-height: 1.5; color: var(--muted); }
.hw-hero .pg-actions + .hw-hint { margin-top: var(--space-3); }
.hw-hero .pg-countdown .pg-countdown__target { color: var(--muted); }

.hw-notice { margin-bottom: var(--space-8); }

.hw-section {
  margin-top: var(--space-9);
  padding-top: var(--space-7);
  border-top: var(--border-width) solid var(--line);
}
.hw-section > * + * { margin-top: var(--space-4); }
.hw-section > .site-h2 + * { margin-top: var(--space-5); }
.hw-section > .pg-eyebrow + .site-h2 { margin-top: var(--space-2); }
.hw-section p { max-width: var(--measure); color: var(--muted); }
.hw-section .hw-fg { color: var(--fg); }
.hw-section .hw-strong { color: var(--fg); font-weight: 500; }
.hw-box {
  padding: var(--space-6) var(--space-5);
  background: var(--surface);
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius-m);
}
@media (min-width: 640px) { .hw-box { padding: var(--space-7); } }

/* So geht’s: vier Schritte */
.hw-steps {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.hw-steps li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--surface);
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius-m);
}
.hw-steps p { color: var(--fg); }
.hw-nr {
  flex: none;
  min-width: var(--space-6);
  font-family: var(--font-mono);
  font-size: 16px; line-height: 1.5; font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--proj-text, var(--proj-mitte-text));
}

/* Deine Einsendung */
.hw-format {
  display: inline-block;
  max-width: 100%;
  padding: var(--space-3);
  white-space: nowrap;
  border: 2px dashed var(--dim);
  border-radius: var(--radius-s);
  font-family: var(--font-mono);
  font-size: 15px; line-height: 1.5; font-weight: 500;
  color: var(--fg);
}
@media (min-width: 640px) { .hw-format { padding-inline: var(--space-4); font-size: 16px; } }
.hw-section > .pg-label + .hw-format { margin-top: var(--space-2); }
.hw-ways {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  font-family: var(--font-mono);
  font-size: 14px; line-height: 1.4;
  color: var(--muted);
}
.hw-ways b { font-weight: 500; color: var(--fg); }

/* Bestenliste */
.hw-lists {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.hw-list {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  padding: var(--space-5);
  background: var(--surface);
  border: var(--border-width) solid var(--line);
  border-top: var(--border-project) solid var(--proj-edge, var(--pg-edge-mitte));
  border-radius: var(--radius-m);
}
.hw-list p { color: var(--muted); }
.hw-endstand {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-5);
  background: var(--surface);
  border: var(--border-width) solid var(--line);
  border-top: var(--border-project) solid var(--proj-edge, var(--pg-edge-mitte));
  border-radius: var(--radius-m);
}
@media (min-width: 640px) { .hw-endstand { padding: var(--space-7); } }
.hw-endstand > * { margin: 0; }
.hw-mono {
  font-family: var(--font-mono);
  font-size: 16px; line-height: 1.5; font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.hw-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 16px; line-height: 1.5; font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.hw-table caption {
  margin-bottom: var(--space-3);
  text-align: left;
  font-family: var(--font-display);
  font-size: 24px; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em;
  font-variation-settings: 'opsz' 14;
}
.hw-table th {
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  border-bottom: var(--border-width) solid var(--dim);
  font-size: 12px; line-height: 1.35; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  color: var(--muted);
}
.hw-table td {
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  border-bottom: var(--border-width) solid var(--line);
}
.hw-table th:last-child, .hw-table td:last-child { padding-right: 0; text-align: right; }
.hw-table--compact th:first-child, .hw-table--compact td:first-child { width: var(--space-10); }
.hw-kuerzel {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  list-style: none;
  padding: 0;
  margin-top: var(--space-3);
}

/* Schlag meinen Geist */
.hw-stat { max-width: 22rem; }
.hw-origin { padding-top: var(--space-4); }
.hw-origin > * + * { margin-top: var(--space-2); }

/* Regeln und Listen mit Zahl */
.hw-claim {
  font-family: var(--font-display);
  font-size: 24px; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em;
  font-variation-settings: 'opsz' 14;
  color: var(--fg);
  text-wrap: balance;
}
.hw-section p.hw-claim { color: var(--fg); }
.hw-rules {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  max-width: calc(var(--measure) + var(--space-9));
}
.hw-rules li {
  display: grid;
  grid-template-columns: var(--space-8) minmax(0, 1fr);
  gap: var(--space-3);
  color: var(--muted);
}
.hw-rules li > .hw-nr { min-width: 0; }
.hw-source { font-size: 14px; line-height: 1.5; }

/* Tür auf: Snapcode */
.hw-snap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5) var(--space-7);
}
.hw-snap__text { display: grid; gap: var(--space-3); flex: 1 1 14rem; }
.hw-snap .pg-qr__url { font-size: 16px; }

/* ══ 22. Impressum und Datenschutz ══════════════════════════════════════════════ */
.site-legal { max-width: calc(var(--measure) * 1.3125); padding-block: var(--space-8) 0; }
@media (min-width: 640px) { .site-legal { padding-top: var(--space-10); } }
.site-legal > .pg-notice { margin-top: var(--space-6); }
.site-legal .site-lead { margin-top: var(--space-4); }
.site-prose { margin-top: var(--space-8); }
.site-prose > * + * { margin-top: var(--space-4); }
.site-prose h2 {
  margin-top: var(--space-9);
  font-family: var(--font-display);
  font-size: 24px; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em;
  font-variation-settings: 'opsz' 14;
  color: var(--fg);
  text-wrap: balance;
}
.site-prose h3 {
  margin-top: var(--space-6);
  font-family: var(--font-sans);
  font-size: 16px; line-height: 1.25; font-weight: 500;
  color: var(--fg);
}
.site-prose h2:first-child { margin-top: 0; }
.site-prose h2 + *, .site-prose h3 + * { margin-top: var(--space-3); }
.site-prose p, .site-prose li { color: var(--muted); }
.site-prose ul, .site-prose ol { padding-left: var(--space-5); }
.site-prose li + li { margin-top: var(--space-2); }
.site-prose li::marker { color: var(--dim); }
.site-prose address { font-style: normal; color: var(--fg); }
.site-prose .site-fg { color: var(--fg); }
.site-prose strong { font-weight: 500; color: var(--fg); }
.site-platzhalter {
  padding: 0 var(--space-1);
  border: var(--border-width) dashed var(--dim);
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: 0.875em;
  color: var(--fg);
  -webkit-hyphens: manual;
  hyphens: manual;
}

/* ══ 23. Kontaktformular (/kontakt) ═════════════════════════════════════════════════
   Gleich auf pugge.eu/kontakt und in den Einbau-Modulen (kontakt.css). Nur Tokens.
   Eingabefeld: Fläche surface-2, Bedienrand 1 px dim, Radius radius-s, Höhe space-9 (48 px), Schrift body.
   Fehler unter dem Feld: StatusBadge „Fehler“, daneben der Satz in fg mit dem nächsten Schritt (Kapitel Farben). */
.k-page { max-width: calc(var(--measure) * 1.3125); padding-block: var(--space-8) 0; }
@media (min-width: 640px) { .k-page { padding-top: var(--space-10); } }
.k-page .site-lead { margin-top: var(--space-4); }
.k-direkt { margin-top: var(--space-4); color: var(--muted); }
.k-page > .pg-notice { margin-top: var(--space-7); }
.k-hinweis:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.k-hinweis__text { flex: 1 1 16em; min-width: 0; }
.k-hinweis__text > * { margin: 0; }
.k-hinweis__text > * + * { margin-top: var(--space-2); }
.k-hinweis__text strong { font-weight: 500; }
.k-hinweis__text ul { padding-left: var(--space-5); }
.k-hinweis__text li + li { margin-top: var(--space-1); }

.k-form { display: grid; gap: var(--space-7); margin-top: var(--space-8); }
.k-field { display: grid; gap: var(--space-2); min-width: 0; }
.k-label {                                           /* ui */
  font-family: var(--font-sans);
  font-size: 16px; line-height: 1.25; font-weight: 500;
  font-variation-settings: 'opsz' 14;
  color: var(--fg);
}
.k-label__zusatz { font-weight: 400; color: var(--muted); }
.k-hint { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }   /* small: Formularhinweis */
.k-hint a, .k-check__label a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.k-hint a:hover, .k-check__label a:hover { text-decoration-thickness: 2px; }
.k-input {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: var(--space-9);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2);
  color: var(--fg);
  border: var(--border-width) solid var(--dim);
  border-radius: var(--radius-s);
  font-family: var(--font-sans);
  font-size: 16px; line-height: 1.5; font-weight: 400;
  font-variation-settings: 'opsz' 14;
  -webkit-appearance: none;
  appearance: none;
}
.k-input:hover { border-color: var(--muted); }
.k-input:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.k-input[aria-invalid="true"] { border-color: var(--signal-danger); box-shadow: inset 0 0 0 var(--border-width) var(--signal-danger); }
.k-textarea { min-height: calc(var(--space-12) * 2); resize: vertical; }
.k-select { position: relative; }
.k-select .k-input { padding-right: var(--space-10); cursor: pointer; }
.k-select option { background: var(--surface); color: var(--fg); }
.k-select__pfeil {
  position: absolute;
  top: 50%;
  right: var(--space-4);
  width: var(--space-4);
  height: var(--space-4);
  margin-top: calc(var(--space-2) * -1);
  color: var(--fg);
  pointer-events: none;
}
.k-count {                                           /* mono */
  margin: 0;
  font-family: var(--font-mono);
  font-size: 14px; line-height: 1.4;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.k-count[data-zuviel] { color: var(--fg); }
.k-check {
  display: grid;
  grid-template-columns: var(--space-6) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}
.k-check__box {
  width: var(--space-6);
  height: var(--space-6);
  margin: 0;
  accent-color: var(--proj, var(--proj-mitte));
  cursor: pointer;
}
.k-check__box:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.k-check__box[aria-invalid="true"] { outline: 2px solid var(--signal-danger); outline-offset: 2px; }
.k-check__label { font-size: 16px; line-height: 1.5; color: var(--fg); cursor: pointer; }
.k-error {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-2) var(--space-3);
  margin: var(--space-1) 0 0;
  font-size: 16px; line-height: 1.5;
  color: var(--fg);
}
.k-error .pg-status { flex: none; }
.k-error__text { flex: 1 1 14em; min-width: 0; }
.k-actions { margin-top: var(--space-1); }
.k-actions .pg-btn[aria-disabled="true"] { pointer-events: none; }
/* Honigtopf: für Menschen unsichtbar, für Programme ein normales Feld */
.k-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.k-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* Danke-Seite */
.k-danke__status { margin: 0 0 var(--space-4); }
.k-danke .k-actions { margin-top: var(--space-7); }
/* ══ ENDE 23. Kontaktformular ══ */

/* ══ 24. pugge.eu/eltern ════════════════════════════════════════════════════════════
   Seite „Kein Snapchat für Kinder unter 16.“, Absender Mitte (pg-proj-mitte). Nur Tokens, keine neuen Farben.
   Eine Lesespalte wie Impressum und /halloween. Schritte und Hilfe-Stellen als Karten auf surface (Kante line,
   radius-m), Quellen in small. Kein Pugge-Punkt neben Kinderschutz, keine Glut (Glut gilt nur für Grafiken).
   Text in muted, Hervorhebungen und Hinweisboxen in fg. Nummern als Knopf (Trefferfläche 48 px). */
.el-page { max-width: calc(var(--measure) * 1.3125); }
.el-kopf { padding-block: var(--space-6) var(--space-8); }
@media (min-width: 640px) { .el-kopf { padding-block: var(--space-10) var(--space-9); } }
.el-kopf__zeichen { display: block; width: var(--space-9); height: var(--space-9); }
.el-kopf .pg-eyebrow { margin-top: var(--space-5); }
.el-kopf .site-h1 { margin-top: var(--space-3); }
.el-kopf .site-lead { margin-top: var(--space-6); }

.el-text > * + * { margin-top: var(--space-4); }
.el-text p { max-width: var(--measure); color: var(--muted); }
.el-text p.el-haltung,
.el-section p.el-haltung {
  padding: var(--space-1) 0 var(--space-1) var(--space-5);
  border-left: var(--border-project) solid var(--proj-edge, var(--pg-edge-mitte));
  color: var(--fg);
  font-weight: 500;
}
.el-text a, .el-section a:not(.pg-btn) {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.el-text a:hover, .el-section a:not(.pg-btn):hover { text-decoration-thickness: 2px; }

/* Inhalt: Sprungliste zu den Abschnitten, Zeilen 40 px hoch */
.el-inhalt {
  margin-top: var(--space-8);
  padding: var(--space-5);
  background: var(--surface);
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius-m);
}
.el-inhalt ol { list-style: none; padding: 0; margin-top: var(--space-2); display: grid; gap: 0 var(--space-6); }
@media (min-width: 640px) { .el-inhalt ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.el-inhalt a {
  display: inline-flex;
  align-items: center;
  min-height: var(--space-8);
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.el-inhalt a:hover { text-decoration-thickness: 2px; }

/* Abschnitte */
.el-section {
  margin-top: var(--space-10);
  padding-top: var(--space-7);
  border-top: var(--border-width) solid var(--line);
}
.el-section > * + * { margin-top: var(--space-4); }
.el-section > .site-h2 + * { margin-top: var(--space-5); }
.el-section p, .el-section li { max-width: var(--measure); color: var(--muted); }
.el-section .pg-notice p { max-width: none; color: var(--fg); }
.el-section .el-fg { color: var(--fg); }
.el-section b { font-weight: 500; color: var(--fg); }
.el-section > .el-block + .el-block { margin-top: var(--space-7); }
.el-block > * + * { margin-top: var(--space-3); }
ul.el-liste { list-style-type: disc; }
.el-liste { padding-left: var(--space-5); }
.el-liste li + li { margin-top: var(--space-2); }
.el-liste li::marker { color: var(--dim); }
.el-text p, .el-section p, .el-section li { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 4; }

/* Quellen-Verweis im Text: [3] in mono, Link zur Liste unten */
.el-q { font-family: var(--font-mono); font-size: 14px; line-height: 1; color: var(--dim); white-space: nowrap; }
.el-text .el-q a, .el-section .el-q a { color: var(--muted); }
.el-text .el-q a:hover, .el-section .el-q a:hover { color: var(--fg); }

/* Stimmen dafür und dagegen: zwei Karten nebeneinander ab 640 px */
.el-stimmen { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.el-stimme {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  padding: var(--space-5);
  background: var(--surface);
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius-m);
}
.el-stimme > * { margin: 0; }

/* Schritte: Karte je Schritt, Nummer im Kreis in proj-mitte-text */
.el-schritte { list-style: none; padding: 0; display: grid; gap: var(--space-4); }
.el-section .el-schritt {
  max-width: none;
  padding: var(--space-5);
  background: var(--surface);
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius-m);
}
@media (min-width: 640px) { .el-section .el-schritt { padding: var(--space-6); } }
.el-schritt > * + * { margin-top: var(--space-3); }
.el-schritt > .site-h3 { display: flex; align-items: center; gap: var(--space-3); }
/* „Schritt 1: “ nur für Screenreader; die sichtbare Nummer im Kreis ist aria-hidden */
.el-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.el-nr {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: var(--space-8);
  height: var(--space-8);
  border: 2px solid var(--proj-edge, var(--pg-edge-mitte));
  border-radius: var(--radius-dot);
  font-family: var(--font-mono);
  font-size: 16px; line-height: 1; font-weight: 500; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: var(--proj-text, var(--proj-mitte-text));
}

/* Hilfe-Stellen: Karten mit Label, Name in h3, Telefonnummer als Sekundärknopf */
.el-hilfe { list-style: none; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.el-section .el-stelle {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  max-width: none;
  padding: var(--space-5);
  background: var(--surface);
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius-m);
}
.el-stelle > * { margin: 0; }
.el-stelle .pg-btn { justify-self: start; margin-block: var(--space-1); }
.el-tel { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.el-section .el-zeit { font-family: var(--font-mono); font-size: 14px; line-height: 1.4; color: var(--fg); }
.el-domain { font-family: var(--font-mono); font-size: 14px; line-height: 1.4; color: var(--dim); white-space: nowrap; -webkit-hyphens: manual; hyphens: manual; }
/* Adressen nie mit Trennstrich umbrechen, nur an <wbr> (z. B. nach „/“) */
.el-section .site-domain-link { -webkit-hyphens: manual; hyphens: manual; }

/* Quellen: nummerierte Liste in small; das angesprungene Ziel bekommt surface-2 */
.el-quellen { padding-left: var(--space-7); display: grid; gap: var(--space-3); }
.el-section .el-quellen li { max-width: none; font-size: 14px; line-height: 1.5; scroll-margin-top: var(--space-6); }
.el-quellen li::marker { font-family: var(--font-mono); color: var(--dim); }
.el-quellen li:target { background: var(--surface-2); outline: var(--space-1) solid var(--surface-2); border-radius: var(--radius-xs); }
.el-section .el-stand { font-family: var(--font-mono); font-size: 14px; line-height: 1.4; color: var(--muted); }

/* Schluss: Teilen, Karte mit Oberkante in proj-mitte */
.el-schluss {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-10);
  padding: var(--space-6) var(--space-5);
  background: var(--surface);
  border: var(--border-width) solid var(--line);
  border-top: var(--border-project) solid var(--proj-edge, var(--pg-edge-mitte));
  border-radius: var(--radius-m);
}
@media (min-width: 640px) { .el-schluss { padding: var(--space-7); } }
.el-schluss > * { margin: 0; }
.el-schluss p { max-width: var(--measure); color: var(--muted); }
.el-schluss .el-teilen { font-family: var(--font-display); font-size: 24px; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; color: var(--fg); text-wrap: balance; }
/* ══ ENDE 24. pugge.eu/eltern ══ */

/* ── Hell nur beim Drucken: Kopf ohne Sprachknopf, Links mit Adresse ── */
@media print {
  .site-skip, .site-lang, .site-back, .site-preview, .pg-actions { display: none !important; }
  .site-section, .hw-section, .site-footer { break-inside: avoid-page; }
  .el-inhalt { display: none; }   /* DP-Zeichen: im hellen Thema die Kachel dp-favicon.svg (pg-only-light) */
  .el-schritt, .el-stelle, .el-stimme { break-inside: avoid; }
  .el-quellen a[href^="http"]::after { content: " " attr(href); overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
/* ══ 25. Ergänzungen der zusammengeführten Fassung ═══════════════════════════════════════════
   Menü des Pugge-Universums (assets/universum.js), Sprachwahl mit Flaggen, Spendenstand, Besucherzähler.
   Nur Tokens (var(--…)). Angehängt von zusammenfuehren.py, endet bei „ENDE 25“. */

/* Kopfzeile: Sprachwahl und Menü nebeneinander (auf den Unterseiten Rücklink und Menü) */
.site-tools { display: flex; align-items: center; gap: var(--space-2); }
.site-tools .site-lang { flex: none; }
.site-tools .site-back { margin-right: var(--space-2); }

/* Menü des Pugge-Universums: der Knopf bekommt Höhe, Rundung, Farben und Fokus des Sprachknopfs */
pugge-universum::part(button) {
  min-height: var(--space-8);
  padding: 0 var(--space-3) 0 10px;
  border-radius: var(--radius-s);
  background: var(--surface);
  border-color: var(--dim);
}
pugge-universum::part(button):hover { background: var(--surface-2); border-color: var(--fg); }
pugge-universum::part(button):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Platz halten, bis das Skript das Element ersetzt (sonst springt die Kopfzeile): Breite des fertigen Knopfs; ohne JavaScript entfällt er */
pugge-universum:not(:defined) { display: inline-block; width: 64px; height: var(--space-8); }
@media (min-width: 761px) {   /* ab 761 px zeigt der Knopf den Text; Breiten gemessen (Chrome, Schrift Bricolage) */
  pugge-universum[label]:not(:defined) { width: 164px; }
  :lang(en) pugge-universum[label]:not(:defined) { width: 154px; }
  :lang(es) pugge-universum[label]:not(:defined) { width: 217px; }
  :lang(ru) pugge-universum[label]:not(:defined) { width: 166px; }
}
@media (scripting: none) { pugge-universum:not(:defined) { display: none; } }

/* Unterseiten unter 380 px: Rücklink mit Text und Menü passen nicht nebeneinander, dann bleibt vom Rücklink der Pfeil (der Text bleibt für Screenreader) */
@media (max-width: 379px) {
  .site-tools .site-back { position: relative; justify-content: center; min-width: var(--space-9); margin-right: 0; }
  .site-tools .site-back__text { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Sprachwahl: Liste mit Flaggen */
a.site-lang__item {
  min-height: var(--space-9);
  margin-inline: calc(var(--space-2) * -1);
  padding-inline: var(--space-2);
  border-radius: var(--radius-s);
  text-decoration: none;
}
a.site-lang__item:hover { background: var(--surface-2); }
a.site-lang__item[aria-current="true"] { font-weight: 800; }
.site-lang__item .site-lang__flag { width: 30px; height: 15px; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(128, 128, 128, 0.35); }

/* Abschnitt „Mitreden“ (Discord): zwei Karten nebeneinander statt drei Spalten mit Lücke, und nicht so hoch wie die Projektkarten */
.site-mitreden .pg-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.site-mitreden .pg-card { min-height: 0; }

/* Spendenstand (Abschnitt „Wie sich pugge.eu finanziert“). Die Regeln beginnen mit .pg-stand, weil
   .site-money p sonst Farbe und Abstände überschreibt. Aufgebaut wie eine Karte der Mitte. */
.pg-stand {
  margin-top: var(--space-7);
  max-width: var(--measure);
  padding: var(--space-5);
  background: var(--surface);
  border: var(--border-width) solid var(--line);
  border-top: var(--border-project) solid var(--proj-edge, var(--pg-edge-mitte));
  border-radius: var(--radius-m);
}
.pg-stand .pg-eyebrow { color: var(--proj-text, var(--proj-mitte-text)); }
.pg-stand .pg-stand__zahl {
  margin: var(--space-2) 0 0;
  max-width: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 1.25rem + 1.6vw, 2.125rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.pg-stand .pg-stand__zahl span { font-family: var(--font-sans); font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.pg-stand .pg-stand__balken { height: 8px; margin: var(--space-3) 0; background: var(--line); border-radius: var(--radius-pill); overflow: hidden; }
.pg-stand .pg-stand__balken > i { display: block; height: 100%; width: var(--stand-prozent, 0%); background: var(--proj-edge, var(--fg)); border-radius: inherit; }
.pg-stand .pg-stand__rest, .pg-stand .pg-stand__quelle { margin: 0; max-width: none; font-size: 14px; line-height: 1.5; color: var(--muted); }
.pg-stand .pg-stand__quelle { margin-top: var(--space-2); }
.pg-stand .pg-stand__quelle a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.pg-stand .pg-actions { margin-top: var(--space-4); }

/* Besucherzähler im Fuß der Startseite */
.pg-besucher { margin: var(--space-3) 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.pg-besucher p { margin: 0; }
.pg-besucher p:first-child { font-family: var(--font-mono); }
.pg-besucher strong { color: var(--fg); font-weight: 500; }
.pg-besucher .pg-besucher__hinweis { margin-top: var(--space-1); }
.pg-besucher a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

@media print { .pg-stand, .pg-besucher, .site-tools pugge-universum { display: none !important; } }

/* ── Startseite Sa 31.10.2026: Karte „Über mich“ oben (Foto rund im Platz des Maskottchens), Abschnitt „Von mir empfohlen“ mit drei gleich breiten Karten ── */
.site-ueber .pg-card__title { font-size: 48px; }
.site-ueber .pg-card__text { max-width: 44em; font-size: 17px; line-height: 1.6; margin-bottom: var(--space-4); }
.site-ueber .site-ueber__satz { border-left: 3px solid var(--proj-edge); padding-left: var(--space-4); }
.site-ueber .pg-actions { margin-top: var(--space-2); }
.site-ueber .site-ueber__foto { width: 168px; height: 168px; border-radius: 50%; object-fit: cover; border: 2px solid var(--line); background: var(--surface); }
.site-empfohlen .pg-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.site-empfohlen .pg-card--sender { grid-column: auto; grid-template-rows: auto auto 1fr auto; }
.site-empfohlen .pg-card--sender .pg-card__domain { align-self: end; }
.site-empfohlen .pg-card { min-height: 0; }
@media (max-width: 760px) { .site-ueber .pg-card__title { font-size: 36px; } }
@media (max-width: 640px) { .site-ueber .site-ueber__foto { width: 120px; height: 120px; } }
/* ══ ENDE 25 ══ */

/* ══ 26. pugge.eu/folgenswert ══════════════════════════════════════════════════════════════
   Seite „Wem du folgst, bestimmt mit, was du siehst.“ (folgenswert.py). Akzent Grün als eigene Projektklasse pg-proj-folgen:
   kein achtes Projekt im Menü, nur die Farbe dieser Seite und ihrer Karte auf der Startseite. Das Gerüst der Seite nimmt die
   Klassen von Abschnitt 24 (el-page, el-kopf, el-text, el-inhalt, el-section, el-liste, el-stimmen, el-quellen, el-schluss);
   neu sind die Karten je Mensch (fw-karte), die Konten als Chips (fw-konto), der Themenfilter (fw-filter) und die
   Plattform-Karten (fw-plattform). Nur Tokens. Grün auf surface 7,95:1; hell der dunklere Text 5,93:1 auf Papier. */
:root, [data-theme="dark"] { --proj-folgen: #58c57a; --proj-folgen-text: #58c57a; --on-folgen: #0c1012; --pg-edge-folgen: var(--proj-folgen); }
[data-theme="light"] { --proj-folgen: #58c57a; --proj-folgen-text: #1b6e37; --on-folgen: #0c1012; --pg-edge-folgen: var(--proj-folgen-text); }
.pg-proj-folgen { --proj: var(--proj-folgen); --proj-text: var(--proj-folgen-text); --proj-on: var(--on-folgen); --on-proj: var(--on-folgen); --proj-edge: var(--pg-edge-folgen); }

/* Die Seite nutzt die ganze Breite (die Karten brauchen Platz); Kopf, Text, Inhalt und Schluss bleiben eine Lesespalte wie auf /eltern */
.fw-page { max-width: none; }
.fw-page .el-kopf, .fw-page .el-text, .fw-page .el-inhalt, .fw-page .el-schluss, .fw-page .site-preview { max-width: calc(var(--measure) * 1.3125); }
.fw-page .site-preview { margin-top: var(--space-2); }
.fw-page .el-stimmen, .fw-page .el-section > .pg-notice, .fw-page .el-section > .el-block > .el-liste { max-width: calc(var(--measure) * 1.3125); }

/* Karten je Mensch: gleich groß, alphabetisch, Oberkante in Grün, Monogramm statt Foto */
.fw-karten { list-style: none; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.el-section .fw-karte {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: none;
  padding: var(--space-5);
  background: var(--surface);
  color: var(--fg);
  border: var(--border-width) solid var(--line);
  border-top: var(--border-project) solid var(--proj-edge, var(--pg-edge-mitte));
  border-radius: var(--radius-m);
}
.fw-karte > * { margin: 0; }
.el-section .fw-karte--beispiel { border-style: dashed; border-top-style: solid; }
.fw-karte__kopf { display: flex; align-items: center; gap: var(--space-3); }
.fw-karte__titel { min-width: 0; }
.fw-mono {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: var(--space-9);
  height: var(--space-9);
  border: 2px solid var(--proj-edge, var(--pg-edge-mitte));
  border-radius: var(--radius-dot);
  font-family: var(--font-mono);
  font-size: 16px; line-height: 1; font-weight: 500; letter-spacing: 0.04em;
  color: var(--proj-text, var(--proj-mitte-text));
}
.el-section .fw-karte .pg-eyebrow { font-size: 14px; color: var(--proj-text, var(--proj-mitte-text)); }   /* sonst grau aus .el-section p */
.fw-karte__kopf .fw-karte__name { margin-top: var(--space-1); font-size: 21px; -webkit-hyphens: manual; hyphens: manual; }   /* Namen nie trennen */
.el-section .fw-karte__text { max-width: none; }
.fw-foto { flex: none; display: block; width: var(--space-9); height: var(--space-9); border-radius: var(--radius-dot); object-fit: cover; border: 2px solid var(--proj-edge, var(--pg-edge-mitte)); background: var(--surface-2); }
.el-section .fw-karte__beispiel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); max-width: none; font-size: 14px; line-height: 1.5; color: var(--fg); }
.fw-konten { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.el-section .fw-konten li { max-width: none; }
.fw-konto { height: var(--space-8); border-color: var(--dim); color: var(--fg); }
.el-section a.fw-konto, .el-section a.fw-konto:hover { text-decoration: none; }   /* .el-section a unterstreicht sonst auch die Chips */
a.fw-konto::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--space-1) * -1); bottom: calc(var(--space-1) * -1); }   /* Trefferfläche 48 px */
a.fw-konto:hover { background: var(--surface-2); border-color: var(--fg); }
.fw-konto--leer { color: var(--dim); border-style: dashed; }
.el-section .fw-karte__fuss { margin-top: auto; padding-top: var(--space-1); max-width: none; font-family: var(--font-mono); font-size: 14px; line-height: 1.4; color: var(--dim); }

/* Themenfilter: Filter-Chips aus Abschnitt 6, ohne JavaScript versteckt (folgenswert.js blendet ihn ein) */
.fw-filter { display: grid; gap: var(--space-2); }
.el-section .fw-filter__zahl { font-family: var(--font-mono); font-size: 14px; line-height: 1.4; color: var(--dim); }

/* Handgriffe je App: eine Karte je Plattform, nummerierte Schritte */
.fw-plattformen { list-style: none; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.el-section .fw-plattform {
  max-width: none;
  padding: var(--space-5);
  background: var(--surface);
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius-m);
}
.fw-plattform > * + * { margin-top: var(--space-3); }
.el-section .fw-plattform__hinweis { max-width: none; font-size: 14px; line-height: 1.5; }
.fw-schritte { padding-left: var(--space-5); display: grid; gap: var(--space-2); }
.fw-schritte li::marker { font-family: var(--font-mono); color: var(--dim); }
.el-section .fw-schritte li { max-width: none; }

/* Feed: drei Handgriffe als nummerierte Liste */
.fw-drei { padding-left: var(--space-6); display: grid; gap: var(--space-2); }
.fw-drei li::marker { font-family: var(--font-mono); color: var(--proj-text, var(--proj-mitte-text)); }
.el-section .fw-drei li { color: var(--muted); }
.el-section .fw-apps__hinweis { font-size: 14px; line-height: 1.5; max-width: calc(var(--measure) * 1.3125); }

/* Apps als Tabs (folgenswert.js): Filter-Chips aus Abschnitt 6, gewählte App in Grün; darunter nur eine Plattform-Karte */
.fw-apps { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.fw-apps .fw-app { height: var(--space-8); border-color: var(--dim); cursor: pointer; }
.fw-apps .fw-app::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--space-1) * -1); bottom: calc(var(--space-1) * -1); }
.fw-apps .fw-app:hover { background: var(--surface-2); }
.fw-apps .fw-app[aria-selected="true"] { background: var(--proj, var(--proj-mitte)); border-color: var(--proj, var(--proj-mitte)); color: var(--proj-on, var(--on-mitte)); }
[data-theme="light"] .fw-apps .fw-app[aria-selected="true"] { border-color: var(--proj-text, var(--proj-mitte-text)); }
.fw-plattformen--tabs { grid-template-columns: minmax(0, 1fr); max-width: calc(var(--measure) * 1.3125); margin-top: var(--space-3); }
.fw-plattformen--tabs .fw-plattform > h4 { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fw-plattformen--tabs .fw-plattform > h4 + * { margin-top: 0; }
.el-section .fw-plattform:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Aufklappbereiche (<details>): Zeile mit Pfeil, 48 px hoch, Inhalt darunter */
.el-section .fw-auf { margin-top: var(--space-4); max-width: calc(var(--measure) * 1.3125); border: var(--border-width) solid var(--line); border-radius: var(--radius-m); background: var(--surface); }
.el-section .fw-auf + .fw-auf { margin-top: var(--space-3); }
.fw-auf > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: var(--space-9); padding: var(--space-2) var(--space-5);
  font-weight: 500; color: var(--fg); cursor: pointer; list-style: none; border-radius: var(--radius-m);
}
.fw-auf > summary::-webkit-details-marker { display: none; }
.fw-auf > summary::after {
  content: ""; flex: none; width: 10px; height: 10px; margin-top: -4px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s ease;
}
.fw-auf[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.fw-auf > summary:hover { background: var(--surface-2); }
.fw-auf > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.fw-auf__inhalt { padding: 0 var(--space-5) var(--space-5); display: grid; gap: var(--space-4); }
.fw-auf__inhalt > * { margin: 0; }
.el-section .fw-auf__inhalt p, .el-section .fw-auf__inhalt li { max-width: none; }
.fw-auf .el-stimmen { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.fw-auf .el-stimme { background: var(--bg); }
@media (prefers-reduced-motion: reduce) { .fw-auf > summary::after { transition: none; } }

/* So wächst die Seite: StatTiles aus Abschnitt 10; .el-section p würde Zahl und Quelle grau und schmal machen */
.fw-page .fw-zahlen .pg-stats { margin-top: var(--space-5); }
.el-section .pg-stat > p { max-width: none; }
.el-section .pg-stat .pg-stat__value { color: var(--fg); }
.el-section .pg-stat .pg-stat__source { color: var(--dim); }
.el-section .fw-zahlen__hinweis { font-size: 14px; line-height: 1.5; }

@media print {
  .fw-filter, .fw-zahlen { display: none !important; }
  .fw-apps { display: none !important; }
  .fw-plattformen--tabs .fw-plattform[hidden] { display: block !important; }
  .fw-plattformen--tabs .fw-plattform > h4 { position: static; width: auto; height: auto; margin: 0 0 var(--space-2); clip: auto; }
  .fw-karte, .fw-plattform { break-inside: avoid; }
  a.fw-konto { height: auto; white-space: normal; }
  a.fw-konto::after { content: " " attr(href); font-size: 12px; overflow-wrap: anywhere; }   /* auf Papier die Adresse */
}
/* ══ ENDE 26 ══ */