/* nummix – Website-Styles nach dem Brand Guide 2026
   Layout: ruhige, helle Fläche; Abschnittsköpfe als graue Leisten mit farbiger Ecke (wie im Brand Guide),
   Kernwerte als Pastellkarten mit Rauten, ProtoPromo als dunkle Hinweisbox. */

/* ---------- Schriften (lokal eingebunden, keine Verbindung zu Google) ---------- */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/atkinson-next-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/atkinson-next-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/atkinson-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/atkinson-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens (Markenfarben laut Brand Guide, keine Grüntöne) ---------- */
:root {
  --blau: #36a9e1;
  --rot: #e94e1b;
  --gelb: #f9b233;
  --schwarz: #292929;

  --papier: #ffffff;
  --nebel: #f6f6f5;          /* graue Leisten wie im Brand Guide */
  --linie: #e4e4e2;
  --text: #292929;
  --text-leise: #5b5b59;     /* 6.6:1 auf Weiß */
  --tint-grau: #eeeeed;
  --tint-blau: #d9eef9;
  --tint-gelb: #fdf0d8;
  --tint-rot: #fadcd1;
  --navy: #11222c;           /* dunkle Hinweisboxen wie im Brand Guide */

  --font: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Atkinson Hyperlegible Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --radius: 1.25rem;
  --max: 72rem;
  --lese: 40rem;             /* ca. 65 Zeichen */
  --gutter: clamp(1rem, 4vw, 2.5rem);
  color-scheme: light;
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-color: var(--rot); }
:focus-visible { outline: 3px solid var(--blau); outline-offset: 3px; border-radius: .25rem; }

h1, h2, h3, h4 { line-height: 1.15; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.25rem, 5.5vw, 3rem); font-weight: 800; letter-spacing: -.01em; }
h2 { font-size: clamp(1.75rem, 4vw, 2.25rem); font-weight: 600; }
h3 { font-size: 1.375rem; font-weight: 600; }
p { margin: 0; }
.mono { font-family: var(--mono); }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -999px; top: .5rem; background: var(--schwarz); color: var(--papier); padding: .5rem 1rem; border-radius: .5rem; z-index: 10; }
.skip:focus { left: .5rem; }

/* ---------- Kopfzeile ---------- */
.site-header {
  position: sticky; top: 0; z-index: 5;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linie);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .75rem; flex-wrap: wrap; }
.site-header .logo img { width: 150px; height: auto; }
.nav { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; font-weight: 500; font-size: .95rem; }
.nav a { text-decoration: none; padding-block: .25rem; }
.nav a:hover { text-decoration: underline; }

/* ---------- Hero ---------- */
.hero { overflow-x: clip; padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 6vw, 4rem); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero-text { display: grid; gap: 1.25rem; min-width: 0; }
.eyebrow { font-family: var(--mono); font-size: .95rem; color: var(--text-leise); }
.hero .lead { font-size: 1.2rem; max-width: 34rem; }
.hero-figure { position: relative; margin: 0; }
.hero-figure img { border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }


.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .8rem 1.3rem; border-radius: .75rem; font-weight: 600; text-decoration: none;
  border: 2px solid var(--schwarz);
}
.btn-primary { background: var(--schwarz); color: var(--papier); }
.btn-primary:hover { background: #3d3d3d; }
.btn-ghost { background: transparent; color: var(--text); }
.btn-ghost:hover { background: var(--nebel); }
.btn .play { width: 0; height: 0; border-left: .55rem solid var(--gelb); border-top: .35rem solid transparent; border-bottom: .35rem solid transparent; }

/* Spielstein-Reihe im Hero */
.tiles { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.tile {
  --c: var(--schwarz);
  display: inline-grid; place-items: center;
  width: 3rem; height: 3rem;
  background: var(--papier); color: var(--c);
  border-radius: .45rem; border: 1px solid var(--linie);
  box-shadow: 0 2px 0 #d9d9d6, 0 4px 10px rgba(41, 41, 41, .08);
  font-weight: 800; font-size: 1.25rem; font-variant-numeric: tabular-nums;
}
.tile.b { --c: var(--blau); } .tile.r { --c: var(--rot); } .tile.g { --c: var(--gelb); } .tile.s { --c: var(--schwarz); }
.tile.joker { position: relative; }
.tile.joker::before {
  /* Joker wie die Originaldateien: vier abgerundete Dreiecke mit abgeflachter Spitze, breite weiße Fuge.
     --a = oben/unten, --z = links/rechts (z. B. bkb: --a schwarz, --z blau) */
  content: ""; grid-area: 1 / 1; width: 100%; height: 100%;
  background: conic-gradient(from -45deg, var(--a, var(--schwarz)) 0 25%, var(--z, var(--blau)) 0 50%, var(--a, var(--schwarz)) 0 75%, var(--z, var(--blau)) 0);
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='%23000' stroke='%23000' stroke-width='7' stroke-linejoin='round'><polygon points='25.7,16.5 74.3,16.5 50,40.8'/><polygon points='25.7,83.5 74.3,83.5 50,59.2'/><polygon points='16.5,25.7 16.5,74.3 40.8,50'/><polygon points='83.5,25.7 83.5,74.3 59.2,50'/></g></svg>") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='%23000' stroke='%23000' stroke-width='7' stroke-linejoin='round'><polygon points='25.7,16.5 74.3,16.5 50,40.8'/><polygon points='25.7,83.5 74.3,83.5 50,59.2'/><polygon points='16.5,25.7 16.5,74.3 40.8,50'/><polygon points='83.5,25.7 83.5,74.3 59.2,50'/></g></svg>") center / 100% 100% no-repeat;
}
.tiles .sep { font-family: var(--mono); color: var(--text-leise); padding-inline: .2rem; }

/* ---------- Abschnitte ---------- */
.section { padding-block: clamp(3rem, 7vw, 4.5rem); }
.section-head {
  --c: 6.5rem;             /* Größe der Ecke */
  display: grid; grid-template-columns: minmax(0, 1fr) var(--c);
  min-height: calc(var(--c) + .5rem);
  margin-bottom: 2.5rem;
}
.sh-text {
  position: relative; z-index: 1;
  background: var(--nebel); border-radius: var(--radius) 0 0 var(--radius);
  padding: 1.25rem 0 1.25rem clamp(1.25rem, 3vw, 2.25rem);
  min-width: 0; align-self: stretch; display: grid; align-content: center;
}
/* Ecke wie im Brand Guide: graue Fläche diagonal angeschnitten, daneben ein Dreieck mit runden Ecken */
.sh-ecke { display: grid; grid-template-rows: var(--c) 1fr; }
.sh-ecke svg { width: var(--c); height: var(--c); overflow: visible; display: block; }
.sh-ecke polygon { stroke-width: 12; stroke-linejoin: round; }
.sh-grau { fill: var(--nebel); stroke: var(--nebel); }
.sh-dreieck { fill: var(--ecke, var(--blau)); stroke: var(--ecke, var(--blau)); }
.sh-rest { background: var(--nebel); border-bottom-right-radius: var(--radius); }
.section-head .kicker { font-family: var(--mono); font-size: .9rem; color: var(--text-leise); display: block; margin-bottom: .25rem; }
.ecke-blau { --ecke: var(--blau); } .ecke-rot { --ecke: var(--rot); } .ecke-gelb { --ecke: var(--gelb); } .ecke-schwarz { --ecke: var(--schwarz); }

.prose { max-width: var(--lese); display: grid; gap: 1rem; }
.prose .big { font-size: 1.375rem; font-weight: 600; line-height: 1.35; }
.split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }

/* Fakten in Mono */
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--linie); }
.facts li { display: flex; justify-content: space-between; gap: 1rem; padding-block: .75rem; border-bottom: 1px solid var(--linie); }
.facts .k { color: var(--text-leise); }
.facts .v { font-family: var(--mono); font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }

/* Kernwerte */
.values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.value {
  position: relative; background: var(--tint); border-radius: var(--radius);
  padding: 1.75rem 1.5rem 2rem; display: grid; gap: .75rem; align-content: start;
}
.value h3 { font-size: 1.2rem; }
.value .raute { position: absolute; border-radius: 20%; transform: rotate(45deg); background: var(--soft); }
/* Jede Karte bekommt eine eigene Anordnung, wie im Brand Guide (Seite Kernwerte) */
.v-grau .r1 { width: 1.4rem; height: 1.4rem; top: -.6rem; left: 1.1rem; background: var(--raute); }
.v-grau .r2 { width: .6rem; height: .6rem; top: .3rem; left: 3.1rem; }
.v-grau .r3 { width: 2.6rem; height: 2.6rem; bottom: -1rem; left: -.9rem; }
.v-blau .r1 { width: 2.4rem; height: 2.4rem; top: -1rem; right: 1rem; }
.v-blau .r2 { width: 1rem; height: 1rem; top: .5rem; right: 3.9rem; }
.v-blau .r3 { width: .9rem; height: .9rem; bottom: 1.1rem; right: 1.2rem; background: var(--raute); }
.v-gelb .r1 { width: 1rem; height: 1rem; top: -.4rem; right: 2.6rem; background: var(--raute); }
.v-gelb .r2 { width: 2.8rem; height: 2.8rem; bottom: -1.3rem; right: 2.4rem; }
.v-gelb .r3 { width: 1.2rem; height: 1.2rem; bottom: -.3rem; right: .5rem; }
.v-rot .r1 { width: 1.5rem; height: 1.5rem; top: -.5rem; left: -.5rem; }
.v-rot .r2 { width: .7rem; height: .7rem; top: -.7rem; left: 1.5rem; }
.v-rot .r3 { width: 2.6rem; height: 2.6rem; bottom: -1rem; right: 1.1rem; background: var(--raute); }
.v-grau { --tint: var(--tint-grau); --raute: var(--schwarz); --soft: #d4d4d2; }
.v-blau { --tint: var(--tint-blau); --raute: var(--blau); --soft: #a9dbf3; }
.v-gelb { --tint: var(--tint-gelb); --raute: var(--gelb); --soft: #fde0a6; }
.v-rot  { --tint: var(--tint-rot);  --raute: var(--rot); --soft: #f4b39c; }

/* Regeln */
.rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.rule { border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.5rem; display: grid; gap: .9rem; align-content: start; }
.rule h3 { font-size: 1.15rem; }
.rule p { color: var(--text-leise); }
.rule .tiles { min-height: 2.75rem; }
.tiles.small .tile { width: 2.5rem; height: 2.5rem; font-size: 1.05rem; }

.rule-list { margin: 0; padding-left: 1.2rem; display: grid; gap: .4rem; }
.rule-list li::marker { color: var(--rot); }

.setup { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: 2.5rem; }
.setup > div { display: grid; gap: .75rem; align-content: start; min-width: 0; }
.setup h3 { font-size: 1.15rem; }
.note { font-size: .9rem; color: var(--text-leise); }

/* Dunkle Hinweisbox (ProtoPromo) */
.callout {
  background: var(--navy); color: #f4f4f3; border-radius: var(--radius);
  padding: clamp(1.75rem, 4vw, 3rem);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem);
}
.callout h2 { color: #ffffff; display: flex; gap: .9rem; align-items: center; }
.callout h2::before {
  content: ""; flex: none; width: 1.1rem; height: 1.35rem; background: var(--tri-c, var(--gelb));
  -webkit-mask: var(--m-tri) center / contain no-repeat; mask: var(--m-tri) center / contain no-repeat;
}
.callout { position: relative; }
.callout .rauten { position: absolute; width: 5rem; height: auto; top: -1.7rem; right: -1rem; }
.callout p { color: #d6d6d4; }
.callout .goals { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.callout .goals li { display: flex; gap: .7rem; align-items: baseline; }
.callout .goals li::before { content: ""; flex: none; width: .55rem; height: .55rem; background: var(--blau); transform: rotate(45deg) translateY(-.1em); border-radius: 2px; }
.callout .goals li:nth-child(4n+2)::before { background: var(--rot); }
.callout .goals li:nth-child(4n+3)::before { background: var(--gelb); }
.callout .goals li:nth-child(4n+4)::before { background: #ffffff; }
.callout .label { font-family: var(--mono); font-size: .9rem; color: #bdbdbb; display: block; margin-bottom: .75rem; }

/* Galerie */
.gallery { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; }
.gallery figure { margin: 0; }
.gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: 1rem; aspect-ratio: 4 / 3; }
.gallery .g1 { grid-column: span 4; grid-row: span 2; }
.gallery .g1 img { aspect-ratio: auto; height: 100%; }
.gallery .g2, .gallery .g3 { grid-column: span 2; }
.gallery .g4, .gallery .g5 { grid-column: span 3; }

/* Zeitleiste */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-width: 46rem; }
.timeline li { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1.5rem; padding-block: 1.1rem; border-bottom: 1px solid var(--linie); }
.timeline li:first-child { border-top: 1px solid var(--linie); }
.timeline time, .timeline .when { font-family: var(--mono); font-weight: 500; }
.timeline h3 { font-size: 1.1rem; margin-bottom: .25rem; }
.timeline p { color: var(--text-leise); }
.timeline .next .when { color: var(--text-leise); }

/* Community */
.community { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.community > div { background: var(--nebel); border-radius: var(--radius); padding: 1.5rem; display: grid; gap: .5rem; align-content: start; }
.community h3 { font-size: 1.1rem; }
.community p { color: var(--text-leise); }

/* Kontakt */
.contact { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2rem; align-items: center; }
.mail { font-family: var(--mono); font-size: clamp(1.3rem, 3.5vw, 1.75rem); font-weight: 500; word-break: break-all; }

/* ---------- Fußzeile ---------- */
.site-footer { background: var(--schwarz); color: #d6d6d4; padding-block: 3rem 2.5rem; margin-top: clamp(3rem, 7vw, 4.5rem); }
.site-footer .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: end; }
.site-footer .logo img { width: 160px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.site-footer a { color: #ffffff; }
.site-footer small { display: block; font-size: .875rem; margin-top: 1rem; color: #bdbdbb; }

/* ---------- Rechtstexte ---------- */
.legal { padding-block: clamp(2.5rem, 6vw, 4rem); }
.legal article { max-width: 46rem; display: grid; gap: 1rem; }
.legal h1 { margin-bottom: .5rem; }
.legal h2 { font-size: 1.5rem; margin-top: 2rem; }
.legal h3 { font-size: 1.15rem; margin-top: 1rem; }
.legal ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .35rem; }
.legal address { font-style: normal; }
.legal .stand { font-family: var(--mono); color: var(--text-leise); font-size: .95rem; }
/* Platzhalter: vor Veröffentlichung ersetzen und diese Markierung entfernen */
.ph { background: var(--tint-gelb); outline: 1px dashed #c98a12; border-radius: .2rem; padding: 0 .25rem; font-family: var(--mono); font-size: .95em; }
.hinweis { background: var(--tint-gelb); border-radius: 1rem; padding: 1rem 1.25rem; font-size: .95rem; }
.back { font-weight: 600; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .values { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.25rem; }
  .rules, .setup, .community { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .hero .wrap, .split, .callout, .contact { grid-template-columns: minmax(0, 1fr); }
  .hero-figure { order: -1; }
  .rules, .setup, .community { grid-template-columns: minmax(0, 1fr); }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery .g1 { grid-column: span 2; grid-row: auto; }
  .gallery .g1 img { aspect-ratio: 4 / 3; }
  .gallery .g2, .gallery .g3, .gallery .g4, .gallery .g5 { grid-column: span 1; }
  .timeline li { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
  .site-footer .wrap { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .section-head { --c: 4.5rem; }
}
@media (max-width: 480px) {
  .values { grid-template-columns: minmax(0, 1fr); }
  .site-header .logo img { width: 130px; }
  .nav { gap: .25rem .9rem; font-size: .9rem; }
}

/* ---------- Spielfeld-Diagramme (Regelwerk + Teaser) ---------- */
.board { display: inline-grid; grid-template-columns: repeat(var(--cols, 3), 2.5rem); grid-auto-rows: 2.5rem; gap: .3rem; }
.board .tile { width: 2.5rem; height: 2.5rem; font-size: 1.05rem; }
.board .leer { display: block; }
.board.gross { grid-template-columns: repeat(var(--cols, 3), 3rem); grid-auto-rows: 3rem; gap: .35rem; }
.board.gross .tile { width: 3rem; height: 3rem; font-size: 1.25rem; }

/* Teaser auf der Startseite */
.teaser { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.teaser .board-wrap { justify-self: center; }
.points { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.points li { display: grid; gap: .1rem; }
.points strong { font-weight: 600; }

/* Regelwerk-Seite */
.rulebook-hero { padding-block: clamp(2.5rem, 6vw, 4rem) 1rem; }
.rulebook-hero .wrap { display: grid; gap: 1rem; }
.toc { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.toc a { text-decoration: none; font-weight: 500; font-size: .95rem; padding: .4rem .85rem; border-radius: 999px; background: var(--nebel); border: 1px solid var(--linie); }
.toc a:hover { background: var(--tint-blau); }
.rulebook .section { padding-block: clamp(2rem, 5vw, 3rem); }
.steps { margin: 0; padding-left: 1.4rem; display: grid; gap: .75rem; max-width: var(--lese); }
.steps li::marker { font-family: var(--mono); font-weight: 600; color: var(--text-leise); }
.examples { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 1.25rem; }
.example .board { grid-template-columns: repeat(var(--cols, 3), 2.4rem); grid-auto-rows: 2.4rem; gap: .25rem; }
.example .board .tile { width: 2.4rem; height: 2.4rem; }
.example { border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.25rem; display: grid; gap: 1rem; align-content: start; }
.example h3 { font-size: 1.15rem; }
.example p { color: var(--text-leise); }
.example .board { justify-self: start; }
.merke { background: var(--tint-blau); border-radius: 1rem; padding: 1.1rem 1.25rem; max-width: var(--lese); }
.merke .mono { font-weight: 600; }

@media (max-width: 760px) {
  .teaser { grid-template-columns: minmax(0, 1fr); }
  .teaser .board-wrap { justify-self: start; }
}

/* Startseite: Feinschliff nach Neustrukturierung */
.section-tight { padding-block: 0; }
.board-wrap { display: grid; gap: 1.5rem; min-width: 0; }
.board-wrap .facts { min-width: 14rem; }
.intro { margin-bottom: 2.75rem; }
.contact-box { align-content: center; }
.callout .mail { color: #ffffff; }
.callout .contact-box p { color: #d6d6d4; }

/* Spielsteine als Gestaltungselemente */
.deko { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.deko .tile, .haufen .tile {
  position: absolute; left: var(--x, auto); top: var(--y, auto); right: var(--r, auto); bottom: var(--b, auto);
  width: var(--s, 3.4rem); height: var(--s, 3.4rem); font-size: calc(var(--s, 3.4rem) * .4);
  transform: rotate(var(--dreh, 0deg));
  box-shadow: 0 3px 0 #d9d9d6, 0 10px 22px rgba(41, 41, 41, .16);
}

.haufen { position: relative; width: 18rem; max-width: 100%; height: 10rem; }
.callout-deko { position: relative; }
@media (max-width: 760px) {
  .haufen { transform: scale(.85); transform-origin: left top; height: 8.5rem; }
}

/* ---------- Rauten- und Herz-Grafiken ---------- */
.idee-intro { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; margin-bottom: 2.75rem; }
.idee-intro img { width: 100%; max-width: 22rem; justify-self: center; }
.streu { display: block; width: 100%; max-width: 18rem; height: auto; }
.mit-intro { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; margin-bottom: 1.75rem; }
.mit-intro .streu { max-width: 14rem; }
.rulebook-hero .wrap.mit-grafik { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; }
.rulebook-hero .wrap.mit-grafik > img { width: 100%; max-width: 20rem; justify-self: center; }
.rulebook-hero .wrap.mit-grafik > div { display: grid; gap: 1rem; min-width: 0; }

/* ---------- Styleguide ---------- */
.swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.swatch { border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; display: grid; }
.swatch .farbe { height: 7rem; background: var(--f); }
.swatch .info { padding: 1rem 1.1rem 1.2rem; display: grid; gap: .2rem; }
.swatch .hex { font-family: var(--mono); font-weight: 500; }
.swatch .thema { color: var(--text-leise); font-size: .95rem; }
.themen { width: 100%; border-collapse: collapse; }
.themen th, .themen td { text-align: left; padding: .8rem .75rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
.themen th { font-weight: 600; font-size: .95rem; }
.themen .punkt { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; transform: rotate(45deg); background: var(--f); margin-right: .6rem; }
.tabelle { overflow-x: auto; }
.logo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.logo-feld { border-radius: var(--radius); border: 1px solid var(--linie); padding: 2rem 1.5rem 1.25rem; display: grid; gap: 1.25rem; justify-items: center; align-content: space-between; }
.logo-feld img { height: 4.5rem; width: auto; max-width: 100%; }
.logo-feld.dunkel { background: var(--schwarz); color: #d6d6d4; border-color: var(--schwarz); }
.logo-feld .cap { font-size: .9rem; color: var(--text-leise); justify-self: start; }
.logo-feld.dunkel .cap { color: #bdbdbb; }
.logo-feld .dl { font-size: .9rem; font-weight: 600; justify-self: start; }
.logo-feld.dunkel .dl { color: #ffffff; }
.regeln-liste { margin: 0; padding-left: 1.2rem; display: grid; gap: .45rem; }
.typo-probe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-bottom: 2rem; }
.typo-probe > div { background: var(--nebel); border-radius: var(--radius); padding: 1.5rem; display: grid; gap: .5rem; }
.typo-probe .aa { font-size: 4rem; font-weight: 800; line-height: 1; }
.typo-probe .mono .aa { font-family: var(--mono); font-weight: 500; }
.typo-tab td:nth-child(n+3) { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.deko-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.deko-grid figure { margin: 0; border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.25rem; display: grid; gap: .75rem; }
.deko-grid img { width: 100%; height: auto; }
.deko-grid figcaption { font-size: .9rem; color: var(--text-leise); }
.stimmen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.stimmen > div { border-radius: var(--radius); padding: 1.5rem; display: grid; gap: .6rem; align-content: start; }
.stimmen .tech { background: var(--nebel); }
.stimmen .mensch { background: var(--tint-gelb); }
.stimmen .tags { font-family: var(--mono); font-size: .9rem; color: var(--text-leise); }
.bild-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.bild-paar img { border-radius: 1rem; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

@media (max-width: 960px) {
  .swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logo-grid, .deko-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .idee-intro, .rulebook-hero .wrap.mit-grafik, .typo-probe, .stimmen { grid-template-columns: minmax(0, 1fr); }
  .idee-intro img, .rulebook-hero .wrap.mit-grafik > img { max-width: 15rem; justify-self: start; }
}
@media (max-width: 480px) {
  .logo-grid, .deko-grid, .bild-paar { grid-template-columns: minmax(0, 1fr); }
}
.mit-intro .big { font-size: 1.375rem; font-weight: 600; line-height: 1.35; }

/* ---------- CI-Typografie (Brand Guide, Seite „Typografie“) ----------
   H1 Next Ultra Bold 48/1.2 · H2 Halbfett 36/1.25 · H3 Halbfett 28/1.3 · H4 Halbfett 22/1.35
   Fließtext Regular 16/1.6 · kleiner Text Light 14/1.6 · Labels/UI Medium 14–16/1.4 · Mono-Akzente 15–16/1.5 */
h1 { font-size: clamp(2.25rem, 5.5vw, 3rem); font-weight: 800; line-height: 1.2; letter-spacing: 0; }
h2 { font-size: clamp(1.75rem, 4vw, 2.25rem); font-weight: 600; line-height: 1.25; }
h3 { font-size: clamp(1.375rem, 3vw, 1.75rem); font-weight: 600; line-height: 1.3; }
h4 { font-size: 1.375rem; font-weight: 600; line-height: 1.35; }
/* Titel in Karten, Listen und Zeitleiste = H4 */
.value h3, .rule h3, .setup h3, .timeline h3, .community h3, .example h3, .legal h3, .stimmen h3 { font-size: 1.375rem; font-weight: 600; line-height: 1.35; }
.legal h2 { font-size: clamp(1.375rem, 3vw, 1.75rem); line-height: 1.3; }
.prose .big, .mit-intro .big { font-size: 1.375rem; font-weight: 600; line-height: 1.35; }
/* Fließtext */
.hero .lead, .lead { font-size: 1rem; font-weight: 400; line-height: 1.6; }
/* Kleiner Text */
.note, .logo-feld .cap, .deko-grid figcaption, .swatch .thema, .site-footer small { font-size: .875rem; font-weight: 300; line-height: 1.6; }
/* Labels / UI */
.nav, .toc a, .themen th, .logo-feld .dl, .back { font-size: .9375rem; font-weight: 500; line-height: 1.4; }
.btn { font-size: 1rem; font-weight: 500; line-height: 1.4; }
.mail { font-family: var(--font); font-size: clamp(1.375rem, 3vw, 1.75rem); font-weight: 600; line-height: 1.3; }
/* Mono-Akzente: sparsam, 15–16 px, Regular */
.eyebrow, .section-head .kicker, .callout .label, .timeline .when, .facts .v, .legal .stand,
.swatch .hex, .stimmen .tags, .merke .mono, .tiles .sep { font-family: var(--mono); font-size: .9375rem; font-weight: 400; line-height: 1.5; }
.steps li::marker { font-family: var(--mono); font-weight: 400; }
@media (max-width: 480px) { .nav { font-size: .875rem; } }

/* ---------- Große Logo-Fläche als Einstieg ---------- */
.buehne { padding-block: clamp(1rem, 3vw, 2rem) 0; }
.buehne-flaeche {
  background: var(--tint-grau); border-radius: var(--radius);
  min-height: clamp(20rem, 52vw, 36rem);
  display: grid; place-content: center; justify-items: center; gap: 1.25rem;
  padding: clamp(3rem, 8vw, 6rem) 1.5rem; text-align: center;
}
.buehne-flaeche img { width: clamp(11rem, 26vw, 18rem); height: auto; }
.buehne-flaeche p { font-size: 1rem; line-height: 1.6; }

/* =====================================================================
   Stilmittel aus dem Brand Guide (Folien „Spielwiese“, „Entwicklung“,
   „Wie nummix wächst“, „ProtoPromo“, „Muster & Formsprache“, „Bildsprache“)
   ===================================================================== */
:root {
  /* abgerundetes Play-Dreieck */
  --m-tri: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 48'><polygon points='6,6 34,24 6,42' fill='%23000' stroke='%23000' stroke-width='10' stroke-linejoin='round'/></svg>");
  --m-tri-unten: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40'><polygon points='6,6 42,6 24,34' fill='%23000' stroke='%23000' stroke-width='10' stroke-linejoin='round'/></svg>");
  --m-ecke: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><polygon points='6,6 34,6 34,34' fill='%23000' stroke='%23000' stroke-width='8' stroke-linejoin='round'/></svg>");
  --m-download: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><polygon points='7,6 33,6 20,24' fill='%23000' stroke='%23000' stroke-width='7' stroke-linejoin='round'/><rect x='4' y='31' width='32' height='6' rx='2' fill='%23000'/></svg>");
  --m-raute: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect x='17' y='17' width='66' height='66' rx='9' transform='rotate(45 50 50)'/></svg>");
  --m-kreuz: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect x='34.5' y='1' width='31' height='31' rx='4'/><rect x='1' y='34.5' width='31' height='31' rx='4'/><rect x='34.5' y='34.5' width='31' height='31' rx='4'/><rect x='68' y='34.5' width='31' height='31' rx='4'/><rect x='34.5' y='68' width='31' height='31' rx='4'/></svg>");
}

/* Titel groß und fett in der grauen Leiste, ohne Zusatzzeile */
.section-head h2 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; line-height: 1.15; }
.section-head .kicker { display: none; }

/* Play-Dreieck als eigenes Element */
.tri { --c: var(--blau); display: inline-block; flex: none; width: 1.1rem; height: 1.35rem; background: var(--c); -webkit-mask: var(--m-tri) center / contain no-repeat; mask: var(--m-tri) center / contain no-repeat; }
.tri.rot { --c: var(--rot); } .tri.gelb { --c: var(--gelb); } .tri.schwarz { --c: var(--schwarz); } .tri.weiss { --c: #fff; } .tri.hell { --c: #e8e8e6; }
.btn .play { border: 0; width: .75rem; height: .9rem; background: var(--gelb); -webkit-mask: var(--m-tri) center / contain no-repeat; mask: var(--m-tri) center / contain no-repeat; }

/* Dunkle Hinweisbox mit Dreieck und Rautencluster */
.box-navy {
  position: relative; background: var(--navy); color: #fff; border-radius: 1rem;
  padding: 1.35rem 2rem 1.35rem 1.4rem; display: flex; gap: 1.1rem; align-items: center;
  font-weight: 600; font-size: 1.25rem; line-height: 1.4; max-width: 36rem;
}
.box-navy p { color: #fff; }
.box-navy .rauten { position: absolute; width: 4.75rem; height: auto; top: -1.6rem; right: -1.1rem; pointer-events: none; }
.box-navy .rauten.unten { top: auto; bottom: -1.5rem; right: auto; left: -1.2rem; width: 3.6rem; transform: rotate(180deg); }
.box-navy.klein { font-size: 1rem; }
.box-pfeil { border-radius: 1rem 0 0 1rem; clip-path: polygon(0 0, calc(100% - 2.2rem) 0, 100% 50%, calc(100% - 2.2rem) 100%, 0 100%); padding-right: 3.5rem; }

/* Graue Karte mit Dreieck / Dreieck vor Text */
.box-grau { background: var(--nebel); border-radius: 1rem; padding: 1.4rem 1.6rem; display: flex; gap: 1.1rem; align-items: center; font-weight: 600; }
.tri-text { display: flex; gap: 1.1rem; align-items: center; }
.tri-text .tri { width: 1.4rem; height: 1.75rem; }
.karte-grau { position: relative; background: var(--nebel); border-radius: 1rem; padding: 1.5rem 2.25rem 1.5rem 1.6rem; display: grid; gap: .6rem; align-content: start; }
.karte-grau > .tri { position: absolute; right: -.55rem; top: 50%; transform: translateY(-50%); width: 1.2rem; height: 1.5rem; }
.karte-grau h3 { font-size: 1.375rem; }
.karte-grau ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .3rem; }

/* Pfeilreihe */
.pfeile { display: inline-flex; gap: .35rem; }
.pfeile .tri { width: 1rem; height: 1.25rem; }

/* Links */
.link-extern { color: #1f7fb0; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; position: relative; padding-right: .8em; }
.link-extern::after { content: ""; position: absolute; right: 0; top: .05em; width: .55em; height: .55em; background: var(--blau); -webkit-mask: var(--m-ecke) center / contain no-repeat; mask: var(--m-ecke) center / contain no-repeat; }
.link-download { color: #c63f12; font-weight: 700; text-decoration: none; display: inline-flex; gap: .5em; align-items: center; }
.link-download::after { content: ""; width: 1em; height: 1em; background: currentColor; -webkit-mask: var(--m-download) center / contain no-repeat; mask: var(--m-download) center / contain no-repeat; }
.link-download:hover { text-decoration: underline; }

/* Zeitleiste „Meilensteine“: graue Spur, gelber Startpunkt, schwarze Dreiecke */
.meilensteine { list-style: none; margin: 0; padding: 0 0 1.5rem; position: relative; display: grid; gap: 1.25rem; }
.meilensteine::before { content: ""; position: absolute; left: 0; top: -.3rem; bottom: 0; width: 1.6rem; border-radius: 1rem; background: linear-gradient(#f2f2f1, #f2f2f1 75%, rgba(242, 242, 241, 0)); }
.meilensteine::after { content: ""; position: absolute; left: calc(.8rem - 1px); top: .5rem; bottom: 0; width: 2px; background: linear-gradient(#e2e2e0, #e2e2e0 75%, rgba(226, 226, 224, 0)); }
.meilensteine li { position: relative; z-index: 1; padding-left: 2.6rem; }
.meilensteine li::before { content: ""; position: absolute; left: .3rem; top: .4rem; width: 1rem; height: .85rem; background: var(--schwarz); -webkit-mask: var(--m-tri-unten) center / contain no-repeat; mask: var(--m-tri-unten) center / contain no-repeat; }
.meilensteine li.start::before { -webkit-mask: none; mask: none; width: .9rem; height: .9rem; left: .35rem; top: .35rem; border-radius: 50%; background: var(--gelb); box-shadow: 0 0 0 .3rem rgba(249, 178, 51, .3); }
.meilensteine li.jetzt::before { background: var(--blau); }
.meilensteine strong { display: block; font-weight: 700; }
.meilensteine p { color: var(--text-leise); }

/* Wachstum: Check- und Frage-Rauten */
.wachstum { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.wachstum li { position: relative; padding-left: 2.75rem; }
.wachstum li::before { content: ""; position: absolute; left: 0; top: -.15rem; width: 2rem; height: 2rem; background: url("../deko/frage.svg") center / contain no-repeat; }
.wachstum li.erledigt::before { background-image: url("../deko/check.svg"); }
.wachstum strong { display: block; font-weight: 700; }
.wachstum p { color: var(--text-leise); }
.entwicklung { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 4rem); margin-top: 2.75rem; }
.entwicklung h3 { font-size: 1.375rem; margin-bottom: 1.25rem; }

/* Zahlenraum: Steine 1–17 in vier Farben, schwarz umrandet wie auf der Folie */
.tile { border: 2px solid var(--schwarz); box-shadow: none; background: #fff; }
.deko .tile, .haufen .tile { border: 1px solid var(--linie); }
.zahlenraum { container-type: inline-size; display: grid; grid-template-columns: repeat(17, minmax(0, 1fr)); gap: clamp(.15rem, .6vw, .4rem); }
.zahlenraum .tile { width: auto; height: auto; aspect-ratio: 1; border-radius: clamp(.2rem, 1cqi, .45rem); border-width: clamp(1px, .3cqi, 2px); font-size: clamp(.5rem, 2.5cqi, 1.3rem); }
.zahlenraum .tile.leer { border-color: var(--linie); }
.zahlenraum .tile.grau { background: #d9d9d7; border-color: #d9d9d7; }
.zahlenraum-box { margin-top: 2.75rem; display: grid; gap: 1rem; }

/* Muster-Streifen: Raster, Gitter, dunkle Sprenkel */
.streifen { height: clamp(3.5rem, 7vw, 5.5rem); border-radius: .75rem; }
.streifen-raster { background-color: #f6f6f5; background-image: linear-gradient(#e7e7e5 1px, transparent 1px), linear-gradient(90deg, #e7e7e5 1px, transparent 1px); background-size: 12px 12px; background-position: -1px -1px; }
.streifen-gitter { background-color: #f4f4f3; background-image: repeating-linear-gradient(45deg, #e2e2e0 0 1px, transparent 1px 12px), repeating-linear-gradient(-45deg, #e2e2e0 0 1px, transparent 1px 12px); }
.streifen-nacht { background: #1c1c1e url("../deko/sprenkel.svg") 0 0 / 480px 160px repeat; }
.raster-gelb { background-color: #fdf0d8; background-image: linear-gradient(#f9d38f 1px, transparent 1px), linear-gradient(90deg, #f9d38f 1px, transparent 1px); background-size: 12px 12px; }
.gitter-rot { background-color: #fdeee8; background-image: repeating-linear-gradient(45deg, #f4b39c 0 1px, transparent 1px 12px), repeating-linear-gradient(-45deg, #f4b39c 0 1px, transparent 1px 12px); }
.trenner { padding-block: clamp(1.5rem, 4vw, 2.5rem) 0; }

/* Bildzuschnitte: Raute, Kreuz, Foto mit farbiger Ecke */
.crop-raute, .crop-kreuz { aspect-ratio: 1; object-fit: cover; border-radius: 0 !important; }
.crop-raute { -webkit-mask: var(--m-raute) center / contain no-repeat; mask: var(--m-raute) center / contain no-repeat; }
.crop-kreuz { -webkit-mask: var(--m-kreuz) center / contain no-repeat; mask: var(--m-kreuz) center / contain no-repeat; }
.bild-ecke { position: relative; isolation: isolate; }
.bild-ecke::before { content: ""; position: absolute; z-index: -1; left: -.9rem; top: -.9rem; width: 34%; aspect-ratio: 1; border-radius: 1rem; background: #fcd38c; }
.bild-ecke.blau::before { background: #9fd3f0; } .bild-ecke.rot::before { background: #f4a68a; }

/* Galerie im Stil der Bildsprache-Folie */
.galerie { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1rem, 3vw, 2rem); align-items: center; }
.galerie figure { margin: 0; }
.galerie .gross img { border-radius: 1.25rem; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.galerie .paar { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; grid-column: 1 / -1; }
.galerie .paar img { border-radius: 1rem; aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }

/* Logo-Komposition und Herzen */
.komposition { position: relative; width: 100%; max-width: 16rem; aspect-ratio: 1; }
.komposition > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.komposition > img.icon { inset: auto; width: 24%; height: auto; left: 38%; top: 38%; }
.herzen { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }
.herzen img { width: clamp(4rem, 10vw, 6rem); height: auto; }

/* ProtoPromo-Block */
.protopromo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; margin-top: 3rem; }
.protopromo .links { display: grid; gap: 2.25rem; padding: 1.4rem 1.2rem 0 0; }
.kontakt-zeile { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }
.box-navy .mail { color: #fff; font-size: 1.25rem; }
.mit-intro .komposition { max-width: 12rem; }

/* Idee: dunkle Box unter dem Text */
.idee-intro .prose { gap: 2rem; }
.idee-intro .box-navy { margin-right: 1rem; }

/* Fußzeile wie auf den Folien: hell, feine Linie, Logo links, Bereich mittig, Rechtliches rechts */
.site-footer { background: var(--papier); color: var(--text); padding-block: 0 2rem; margin-top: clamp(3rem, 7vw, 4.5rem); }
.site-footer .wrap { display: block; }
.fuss { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem 2rem; align-items: center; border-top: 1px solid var(--linie); padding-top: 1.25rem; }
.site-footer .logo img { width: 110px; }
.fuss-mitte { font-size: .875rem; text-transform: uppercase; letter-spacing: .04em; }
.site-footer nav { justify-self: end; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; font-size: .875rem; text-transform: uppercase; letter-spacing: .04em; }
.site-footer a { color: var(--text); text-decoration: none; }
.site-footer nav a:hover, .site-footer nav a[aria-current] { text-decoration: underline; text-decoration-color: var(--rot); }
.site-footer small { color: var(--text-leise); margin-top: 1rem; }

/* Regelwerk: Beispielkarten hellgrau */
.example { background: var(--nebel); border: 0; }
.example .tile, .board .tile { background: #fff; }

@media (max-width: 760px) {
  .entwicklung, .protopromo, .galerie { grid-template-columns: minmax(0, 1fr); }
  .galerie { grid-template-columns: 1fr 1fr; }
  .galerie .gross { grid-column: 1 / -1; }
  .fuss { grid-template-columns: 1fr; justify-items: start; }
  .site-footer nav { justify-self: start; }
  .box-navy { font-size: 1.1rem; }
  .box-navy .rauten { right: -.4rem; }
  .karte-grau > .tri { right: -.3rem; }
}
.box-grau p { font-weight: 400; } .box-grau .mono { font-weight: 600; }
.box-grau + .box-grau { margin-top: .25rem; }
/* Styleguide: Stilmittel-Übersicht */
.stilmittel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem clamp(2rem, 5vw, 4rem); margin-top: 1.5rem; align-items: start; }
.stilmittel > div { display: grid; gap: 1.25rem; min-width: 0; }
.stilmittel .note { margin-top: -.5rem; }
.streifen-stapel { display: grid; gap: 1rem; }
.crops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: center; }
.crops img { width: 100%; }
.crops .bild-ecke img { border-radius: 1rem; aspect-ratio: 1; object-fit: cover; }
.ton-grafik { width: 100%; max-width: 15rem; }
@media (max-width: 760px) { .stilmittel { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .zahlenraum-box { overflow-x: auto; padding-bottom: .5rem; }
  .zahlenraum { min-width: 36rem; }
}
/* Galerie ruhig: ein großes Bild mit farbiger Ecke, zwei kleine daneben */
.galerie { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); grid-template-rows: auto auto; align-items: stretch; }
.galerie .gross { grid-row: span 2; }
.galerie .gross img { height: 100%; }
.galerie figure:not(.gross) img { border-radius: 1rem; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; height: 100%; }
@media (max-width: 760px) { .galerie { grid-template-columns: 1fr 1fr; } .galerie .gross { grid-row: auto; } }
.mail { color: inherit; }

/* ---------- Barrierefreiheit (Kontraste nach WCAG 2.2 AA) ----------
   Blau #36A9E1 (2,7:1) und Gelb #F9B233 (1,8:1) erreichen auf Weiß keinen Textkontrast.
   Für Text in Markenfarbe gibt es dunklere Textvarianten. */
:root { --blau-text: #1c75a6; --rot-text: #c63f12; --gelb-text: #a36800; --rahmen: #767674; }
:focus-visible { outline: 3px solid var(--blau-text); outline-offset: 3px; }
.box-navy :focus-visible, .callout :focus-visible { outline-color: #fff; }
.link-extern { color: var(--blau-text); }
.link-download { color: var(--rot-text); }
/* Ziffern auf den Spielsteinen: Markenfarbe mit dunklerer Kontur, damit sie sich vom Weiß abheben */
.tile.b { -webkit-text-stroke: .6px var(--blau-text); }
.tile.g { -webkit-text-stroke: .7px var(--gelb-text); }
/* Kleiner Text in Regular statt Light: bessere Lesbarkeit */
.note, .logo-feld .cap, .deko-grid figcaption, .swatch .thema, .site-footer small { font-weight: 400; }
/* Nur für Screenreader */
.sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.zahlenraum-box[tabindex]:focus-visible { outline-offset: 4px; }

/* ---------- Kontaktformular ---------- */
.kontakt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(2rem, 5vw, 4rem); margin-top: 3.5rem; align-items: start; }
.kontakt .intro-text { display: grid; gap: 1rem; }
.formular { background: var(--nebel); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 2rem); display: grid; gap: 1.1rem; }
.formular .reihe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.1rem; }
.feld { display: grid; gap: .35rem; min-width: 0; }
.feld label { font-weight: 600; font-size: .9375rem; }
.feld .pflicht { font-weight: 400; color: var(--text-leise); }
.feld input, .feld select, .feld textarea {
  font: inherit; font-size: 1rem; color: var(--text); background: #fff;
  border: 1.5px solid var(--rahmen); border-radius: .6rem; padding: .7rem .85rem; width: 100%;
}
.feld textarea { min-height: 9rem; resize: vertical; }
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible { outline: 3px solid var(--blau-text); outline-offset: 1px; border-color: var(--blau-text); }
.feld .hilfe { font-size: .875rem; color: var(--text-leise); }
.formular .btn { justify-self: start; cursor: pointer; }
.formular .datenschutz-hinweis { font-size: .875rem; color: var(--text-leise); }
/* Honigtopf: für Menschen unsichtbar, für Bots ein verlockendes Feld */
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formular { position: relative; }
.meldung { max-width: var(--lese); display: grid; gap: 1.25rem; padding-block: clamp(3rem, 8vw, 5rem); }
@media (max-width: 760px) {
  .kontakt, .formular .reihe { grid-template-columns: minmax(0, 1fr); }
}
.formular .reihe { align-items: start; }
.feld { align-content: start; }
.btn { font-family: inherit; }
.intro-text .mail { font-size: 1rem; font-weight: 600; }

/* Lange deutsche Wörter dürfen umbrechen (verhindert seitliches Scrollen auf schmalen Bildschirmen) */
h1, h2, h3, h4 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.legal article > *, .prose > * { min-width: 0; }
.tabelle { max-width: 100%; min-width: 0; }
body { overflow-wrap: break-word; }
p, li, td { hyphens: auto; -webkit-hyphens: auto; }
.box-navy { min-width: 0; }

/* ---------- So läuft eine Runde ---------- */
.schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.schritt { position: relative; background: var(--nebel); border-radius: var(--radius); padding: 1.5rem 1.5rem 1.75rem; display: grid; gap: 1rem; align-content: start; }
.schritt .nr { position: absolute; top: -.9rem; left: 1.25rem; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; background: #fff; border: 2px solid var(--schwarz); border-radius: .45rem; font-weight: 800; font-size: 1.1rem; }
.schritt h3 { font-size: 1.375rem; margin-top: .6rem; }
.schritt p { color: var(--text-leise); }
.schritt .board { min-height: 7.6rem; align-content: center; }
.runde-fuss { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; justify-content: space-between; margin-top: 1.75rem; }
.runde-fuss .box-grau { flex: 1 1 22rem; }

/* ---------- Termine ---------- */
.termine { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.termin { background: var(--nebel); border-radius: var(--radius); padding: 1.5rem; display: grid; gap: .6rem; align-content: start; }
.termin h3 { font-size: 1.375rem; }
.termin p { color: var(--text-leise); }
.termin .wann { font-family: var(--mono); font-size: .9375rem; color: var(--text); }
.termin-gross { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; padding: clamp(1.25rem, 3vw, 2rem); }
.termin-gross .termin-text { display: grid; gap: .75rem; }
.postkarte { width: 100%; border-radius: .5rem; box-shadow: 0 2px 0 #dcdcda, 0 14px 30px rgba(41, 41, 41, .14); transform: rotate(-2deg); }
.link-pfeil { font-weight: 600; color: var(--blau-text); display: inline-flex; gap: .5rem; align-items: center; justify-self: start; margin-top: .25rem; }
.link-pfeil::after { content: ""; width: .6rem; height: .75rem; background: currentColor; -webkit-mask: var(--m-tri) center / contain no-repeat; mask: var(--m-tri) center / contain no-repeat; }

/* ---------- Geschichte: Text und Meilensteine nebeneinander ---------- */
.geschichte { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.geschichte h3 { font-size: 1.375rem; margin-bottom: 1.25rem; }

/* ---------- Nach oben ---------- */
.nach-oben {
  position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 6;
  width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: .75rem;
  background: var(--schwarz); color: #fff; box-shadow: 0 6px 18px rgba(41, 41, 41, .25);
  transition: opacity .2s, visibility .2s;
}
.nach-oben::before { content: ""; width: 1rem; height: .85rem; background: #fff; transform: rotate(180deg); -webkit-mask: var(--m-tri-unten) center / contain no-repeat; mask: var(--m-tri-unten) center / contain no-repeat; }
.nach-oben:hover { background: #3d3d3d; }
.nach-oben:focus-visible { outline: 3px solid var(--blau-text); outline-offset: 3px; }
.js .nach-oben.versteckt { opacity: 0; visibility: hidden; }
html { scroll-padding-top: 5rem; }

@media (max-width: 960px) { .schritte { grid-template-columns: minmax(0, 1fr); row-gap: 2rem; } }
@media (max-width: 760px) {
  .termine, .termin-gross, .geschichte { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Mobil: alles bündig ---------- */
@media (max-width: 760px) {
  /* Zahlenraum ohne seitliches Scrollen: je Farbe zwei Zeilen (1–9, 10–17) */
  .zahlenraum-box { overflow: visible; padding-bottom: 0; }
  .zahlenraum { min-width: 0; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: .3rem; }
  .zahlenraum .tile { font-size: clamp(.8rem, 4.2cqi, 1.1rem); border-width: 2px; border-radius: .35rem; }
  .zahlenraum .tile:nth-child(17n+1), .zahlenraum .tile:nth-child(17n+10) { grid-column-start: 1; }

  /* Dekografiken nicht über den Rand ragen lassen */
  .callout .rauten, .box-navy .rauten { right: -.25rem; }
  .rulebook-hero .wrap.mit-grafik > img, .idee-intro img { max-width: 13rem; margin-left: -1.25rem; }
}
/* Dunkle Box: Überschrift mit Dreieck bündig zum Text */
.callout h2 { display: block; }
.callout h2::before { display: inline-block; margin-right: .7rem; vertical-align: -.05em; }
.kontakt-grafik { width: 100%; max-width: 15rem; margin-top: .5rem; margin-left: -1rem; }
@media (max-width: 760px) { .kontakt-grafik { max-width: 10rem; margin-top: 0; } }
@media (max-width: 480px) {
  .themen th, .themen td { padding: .6rem .4rem; font-size: .875rem; }
  .themen th:first-child, .themen td:first-child { padding-left: 0; }
  .typo-tab td:nth-child(n+3) { white-space: normal; }
}

/* ---------- Nummerierte Schritte: Nummer als kleiner Spielstein, bündig zur Inhaltskante ---------- */
.steps { list-style: none; padding-left: 0; counter-reset: schritt; gap: 1.1rem; }
.steps li { counter-increment: schritt; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .9rem; align-items: start; }
.steps li::before {
  content: counter(schritt); width: 2rem; height: 2rem; display: grid; place-items: center;
  border: 2px solid var(--schwarz); border-radius: .4rem; background: #fff;
  font-family: var(--font); font-weight: 800; font-size: .95rem; line-height: 1; margin-top: .05rem;
}

/* Nach oben: auf dem Handy kleiner und mit Abstand, damit er weniger Text verdeckt */
@media (max-width: 760px) {
  .nach-oben { width: 2.5rem; height: 2.5rem; border-radius: .6rem; right: .75rem; bottom: .75rem; opacity: .92; }
  .nach-oben::before { width: .85rem; height: .7rem; }
  .site-footer { padding-bottom: 4rem; }
}
/* Fließtext nicht automatisch trennen (las sich auf dem iPhone zu zerhackt); nur Überschriften und Tabellen dürfen trennen */
p, li { hyphens: manual; -webkit-hyphens: manual; }
h1, h2, h3, h4, td, th { hyphenate-limit-chars: 10 4 4; }

/* ---------- Handy: nur, was hilft ----------
   Reine Schmuckgrafiken entfallen, die Kopfzeile scrollt mit (der Nach-oben-Button übernimmt den Rückweg). */
@media (max-width: 760px) {
  .kontakt-grafik, .mit-intro .komposition, .idee-intro > img, .rulebook-hero .wrap.mit-grafik > img,
  .haufen, .streu, .hero .deko, .callout .rauten, .box-navy .rauten { display: none; }
  .site-header { position: static; }
  html { scroll-padding-top: 1rem; }
  .board-wrap { gap: 0; }
  .idee-intro, .mit-intro { margin-bottom: 1.75rem; }
  .kontakt { margin-top: 2.5rem; gap: 1.25rem; }
  .section { padding-block: 2.5rem; }
  .section-head { margin-bottom: 1.75rem; }
}
@media (max-width: 760px) {
  .schritt .board { min-height: 0; }
  .bild-ecke::before { display: none; }
  .board-wrap, .board-wrap .facts { width: 100%; }
  .box-navy { max-width: none; }
}

/* ---------- Trennlinien statt Boxen ----------
   Überschriften behalten ihre graue Box mit Ecke, Inhalte werden durch feine Linien getrennt statt in Kästen gesetzt. */
.example, .schritt, .termin, .community > div, .karte-grau, .box-grau, .termin-gross {
  background: none; border: 0; border-radius: 0; padding: 1.25rem 0 0; border-top: 1px solid var(--linie); box-shadow: none;
}
.karte-grau > .tri { display: none; }
.formular { background: none; padding: 1.25rem 0 0; border-radius: 0; border-top: 1px solid var(--linie); }
.schritt { grid-template-columns: 2.4rem minmax(0, 1fr); column-gap: .9rem; }
.schritt .nr { position: static; grid-row: 1; grid-column: 1; }
.schritt h3 { grid-row: 1; grid-column: 2; margin-top: 0; align-self: center; }
.schritt > .board, .schritt > p { grid-column: 1 / -1; }
.box-grau { align-items: start; }
@media (max-width: 760px) {
  .examples, .schritte, .termine, .community, .values { gap: 1.5rem; row-gap: 1.5rem; }
  .postkarte { transform: none; }
}
/* Spielbeispiele liegen auf einer grauen Tischfläche, Text bleibt frei */
.example > .board, .schritt > .board { justify-self: stretch; justify-content: start; background: var(--nebel); border-radius: var(--radius); padding: 1rem; }
.example, .schritt { border-top: 2px solid var(--schwarz); }
/* Überschrift bündig mit dem Text: die graue Box steht links über die Textkante hinaus */
.section-head { margin-left: -1.5rem; }
.sh-text { padding-left: 1.5rem; }
@media (max-width: 760px) {
  /* Handy: Box bleibt im Rand, der Inhalt rückt um die Innenkante der Box ein */
  .wrap { padding-inline: calc(var(--gutter) + 1rem); }
  .section-head { margin-inline: -1rem; }
  .sh-text { padding-left: 1rem; }
}
/* Keine Trennlinien: Inhalte trennen sich über Abstand */
.example, .schritt, .termin, .community > div, .karte-grau, .box-grau, .termin-gross, .formular { border-top: 0; padding-top: 0; }
.examples, .schritte, .termine, .community, .values { row-gap: 2.75rem; }
/* Trenner: kurzer Balken in der Abschnittsfarbe über jedem Eintrag */
#termine, #mitspielen { --akz: var(--gelb); } #runde { --akz: var(--blau); } .examples { --akz: var(--rot); }
.v-grau { --akz: var(--schwarz); } .v-blau { --akz: var(--blau); } .v-gelb { --akz: var(--gelb); } .v-rot { --akz: var(--rot); }
/* nur zwischen untereinander stehenden Einträgen (Handy), nie über dem ersten */
@media (max-width: 760px) {
  :is(.termin, .example, .schritt, .community > div):not(:first-child)::before {
    content: ""; display: block; grid-column: 1 / -1; width: 2.75rem; height: .35rem; border-radius: .2rem;
    background: var(--akz, var(--rot)); margin-bottom: 1.1rem;
  }
}

/* ---------- Dark Mode ----------
   Folgt der Systemeinstellung; der Schalter im Kopf überschreibt sie (data-theme). Spielsteine bleiben weiß wie echte Steine. */
.logo-dunkel { display: none; }
.theme-schalter {
  flex: none; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; cursor: pointer;
  border: 2px solid var(--rahmen); border-radius: .6rem; background: var(--papier); color: var(--text); padding: 0;
}
.theme-schalter::before {
  content: ""; width: 1.2rem; height: 1.2rem; border-radius: 50%;
  background: linear-gradient(90deg, currentColor 50%, transparent 50%); box-shadow: inset 0 0 0 2px currentColor;
}
.theme-schalter:hover { border-color: var(--text); }
@media (max-width: 760px) {
  .site-header .wrap { flex-wrap: wrap; }
  .site-header .logo { order: 1; }
  .theme-schalter { order: 2; margin-left: auto; }
  .site-header .nav { order: 3; flex-basis: 100%; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papier: #10191f; --nebel: #1b2831; --linie: #2d3b45; --text: #eeeeec; --text-leise: #b7bec3;
    --tint-grau: #1b2831; --tint-blau: #15303f; --tint-gelb: #33291a; --tint-rot: #3a2219;
    --navy: #233c4c; --blau-text: #6cc3ec; --rot-text: #f2875f; --gelb-text: #f9b233; --rahmen: #8d989f;
    --tinte: #eeeeec; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papier: #10191f; --nebel: #1b2831; --linie: #2d3b45; --text: #eeeeec; --text-leise: #b7bec3;
  --tint-grau: #1b2831; --tint-blau: #15303f; --tint-gelb: #33291a; --tint-rot: #3a2219;
  --navy: #233c4c; --blau-text: #6cc3ec; --rot-text: #f2875f; --gelb-text: #f9b233; --rahmen: #8d989f;
  --tinte: #eeeeec; color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-hell { display: none; }
  :root:not([data-theme="light"]) .logo-dunkel { display: block; }
  :root:not([data-theme="light"]) .btn { border-color: var(--text); }
  :root:not([data-theme="light"]) .btn-primary { background: var(--text); color: var(--papier); }
  :root:not([data-theme="light"]) .btn-primary:hover { background: #ffffff; }
  :root:not([data-theme="light"]) .skip { background: var(--text); color: var(--papier); }
  :root:not([data-theme="light"]) .steps li::before, :root:not([data-theme="light"]) .schritt .nr { color: #292929; }
  :root:not([data-theme="light"]) .feld input, :root:not([data-theme="light"]) .feld select, :root:not([data-theme="light"]) .feld textarea { background: #0b1216; }
  :root:not([data-theme="light"]) .meilensteine li::before, :root:not([data-theme="light"]) .tri.schwarz { background: var(--text); }
  :root:not([data-theme="light"]) .tri.schwarz, :root:not([data-theme="light"]) .ecke-schwarz, :root:not([data-theme="light"]) .v-grau { --c: var(--text); --ecke: var(--text); --akz: var(--text); --raute: var(--text); }
  :root:not([data-theme="light"]) .meilensteine::before { background: linear-gradient(#22313b, #22313b 75%, rgba(34, 49, 59, 0)); }
  :root:not([data-theme="light"]) .streifen-raster { background-color: #1b2831; background-image: linear-gradient(#2d3b45 1px, transparent 1px), linear-gradient(90deg, #2d3b45 1px, transparent 1px); }
  :root:not([data-theme="light"]) .nach-oben { background: var(--text); box-shadow: 0 6px 18px rgba(0, 0, 0, .5); }
  :root:not([data-theme="light"]) .nach-oben::before { background: var(--papier); }
  :root:not([data-theme="light"]) .postkarte { box-shadow: 0 14px 30px rgba(0, 0, 0, .45); }
  :root:not([data-theme="light"]) img[src*="deko/"] { filter: brightness(.82) contrast(1.05); }
}
:root[data-theme="dark"] .logo-hell { display: none; }
:root[data-theme="dark"] .logo-dunkel { display: block; }
:root[data-theme="dark"] .btn { border-color: var(--text); }
:root[data-theme="dark"] .btn-primary { background: var(--text); color: var(--papier); }
:root[data-theme="dark"] .btn-primary:hover { background: #ffffff; }
:root[data-theme="dark"] .skip { background: var(--text); color: var(--papier); }
:root[data-theme="dark"] .steps li::before, :root[data-theme="dark"] .schritt .nr { color: #292929; }
:root[data-theme="dark"] .feld input, :root[data-theme="dark"] .feld select, :root[data-theme="dark"] .feld textarea { background: #0b1216; }
:root[data-theme="dark"] .meilensteine li::before, :root[data-theme="dark"] .tri.schwarz { background: var(--text); }
:root[data-theme="dark"] .tri.schwarz, :root[data-theme="dark"] .ecke-schwarz, :root[data-theme="dark"] .v-grau { --c: var(--text); --ecke: var(--text); --akz: var(--text); --raute: var(--text); }
:root[data-theme="dark"] .meilensteine::before { background: linear-gradient(#22313b, #22313b 75%, rgba(34, 49, 59, 0)); }
:root[data-theme="dark"] .streifen-raster { background-color: #1b2831; background-image: linear-gradient(#2d3b45 1px, transparent 1px), linear-gradient(90deg, #2d3b45 1px, transparent 1px); }
:root[data-theme="dark"] .nach-oben { background: var(--text); box-shadow: 0 6px 18px rgba(0, 0, 0, .5); }
:root[data-theme="dark"] .nach-oben::before { background: var(--papier); }
:root[data-theme="dark"] .postkarte { box-shadow: 0 14px 30px rgba(0, 0, 0, .45); }
:root[data-theme="dark"] img[src*="deko/"] { filter: brightness(.82) contrast(1.05); }
/* Schritte: Balken steht über Nummer und Titel */
@media (max-width: 760px) {
  .schritt:not(:first-child) > .nr, .schritt:not(:first-child) > h3 { grid-row: 2; }
}
/* Dark Mode: Kopfleiste */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .site-header { background: rgba(16, 25, 31, .94); } }
:root[data-theme="dark"] .site-header { background: rgba(16, 25, 31, .94); }
/* Mitspielen am Desktop: Komposition steht unter der ProtoPromo-Box, die drei Wege tragen alle den Farbbalken */
.protopromo .komposition { max-width: 12rem; justify-self: center; }
.mit-intro { margin-bottom: 0; }
@media (min-width: 761px) {
  .community > div::before { content: ""; display: block; width: 2.75rem; height: .35rem; border-radius: .2rem; background: var(--akz, var(--gelb)); margin-bottom: .9rem; }
}
@media (max-width: 760px) { .protopromo .komposition { display: none; } }
@media (min-width: 761px) { .community { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Meilensteine: die Reise baut sich beim Scrollen auf ----------
   Nur mit JS und ohne „Bewegung reduzieren“: Ein farbiger Pfad wächst von Gelb über Rot zu Blau,
   eine Raute reist an seiner Spitze, erreichte Stationen leuchten auf, am Ziel sprühen Funken. */
.meilensteine .pfad, .meilensteine .reisender { display: none; }
.meilensteine.reise .pfad {
  display: block; position: absolute; z-index: 0; left: calc(.8rem - 2px); top: .5rem; width: 4px; border-radius: 2px;
  height: var(--pfad, 0px); background: linear-gradient(var(--gelb), var(--rot) 50%, var(--blau)) top / 100% var(--voll, 100%) no-repeat;
  box-shadow: 0 0 10px rgba(233, 78, 27, .35);
}
.meilensteine.reise .reisender {
  display: block; position: absolute; z-index: 2; left: .8rem; top: calc(.5rem + var(--pfad, 0px));
  width: .8rem; height: .8rem; border-radius: 22%; background: var(--papier); border: 2px solid var(--rot);
  transform: translate(-50%, -50%) rotate(45deg); box-shadow: 0 0 0 .3rem rgba(233, 78, 27, .18), 0 0 18px rgba(233, 78, 27, .55);
  transition: opacity .3s;
}
.meilensteine.reise.am-ziel .reisender, .meilensteine.reise.vor-start .reisender { opacity: 0; }
.meilensteine.reise li { opacity: .3; transform: translateX(.9rem); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.meilensteine.reise li.erreicht { opacity: 1; transform: none; }
.meilensteine.reise li.erreicht::before { animation: station .6s cubic-bezier(.3, 1.6, .5, 1); }
.meilensteine.reise li.erreicht strong { animation: aufleuchten 1.2s ease; }
.meilensteine.reise li.jetzt.erreicht::before { animation: station .6s cubic-bezier(.3, 1.6, .5, 1), ziel 1.8s ease-out .5s 3; }
@keyframes station { 0% { transform: scale(.3); } 60% { transform: scale(1.6); } 100% { transform: scale(1); } }
@keyframes aufleuchten { 0% { color: var(--rot-text); } 100% { color: inherit; } }
@keyframes ziel { 0% { filter: drop-shadow(0 0 0 rgba(54, 169, 225, .9)); } 50% { filter: drop-shadow(0 0 10px rgba(54, 169, 225, .9)); } 100% { filter: drop-shadow(0 0 0 rgba(54, 169, 225, 0)); } }
.meilensteine .funke {
  position: absolute; z-index: 3; left: .8rem; top: .8rem; width: .55rem; height: .55rem; border-radius: 22%; background: var(--f);
  pointer-events: none; animation: funke 1.2s cubic-bezier(.15, .7, .3, 1) forwards;
}
@keyframes funke {
  from { transform: translate(-50%, -50%) rotate(45deg) scale(1.1); opacity: 1; }
  to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(270deg) scale(.3); opacity: 0; }
}
#kontakt .kontakt { margin-top: 0; }
/* Reise, ruhiger: Marker bleiben exakt auf der Linie, nur der Text gleitet; Pfad Gelb → Blau ohne Glow */
.meilensteine.reise li { transform: none; }
.meilensteine.reise li > * { transform: translateX(.6rem); transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.meilensteine.reise li.erreicht > * { transform: none; }
.meilensteine.reise .pfad { left: calc(.8rem - 1.5px); width: 3px; box-shadow: none; background-image: linear-gradient(var(--gelb), var(--blau)); }
.meilensteine.reise .reisender { width: .7rem; height: .7rem; border: 0; background: var(--blau); box-shadow: 0 0 0 .25rem rgba(54, 169, 225, .2); }
.meilensteine.reise.nah-start .reisender { opacity: 0; }
.meilensteine.reise li.erreicht strong { animation: none; }
/* Rot nur noch als Markenfarbe, nicht als Effekt */
a:hover, .site-footer nav a:hover, .site-footer nav a[aria-current] { text-decoration-color: var(--blau); }
/* Effekte barrierearm: Text ist in jedem Zustand voll lesbar (kein Ausblenden unter 4.5:1),
   Bewegung bleibt kurz und klein, nichts blinkt wiederholt, Hover ändert nicht nur die Farbe. */
.meilensteine.reise li { opacity: 1; }
.meilensteine.reise li:not(.erreicht) strong { color: var(--text-leise); }
.meilensteine.reise li:not(.erreicht)::before { opacity: .45; }
.meilensteine.reise li > * { transform: translateX(.35rem); transition: transform .5s ease-out; }
.meilensteine.reise li.erreicht::before { animation: station .45s ease-out; }
.meilensteine.reise li.jetzt.erreicht::before { animation: station .45s ease-out; }
@keyframes station { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
a:hover { text-decoration-thickness: 2px; }
@media (prefers-reduced-motion: reduce) {
  .meilensteine .pfad, .meilensteine .reisender, .meilensteine .funke { display: none !important; }
}

/* ---------- Effekte (assets/js/effekte.js) ----------
   Nur ohne „Bewegung reduzieren“ und nur mit JS (Klasse .effekte). Kurze Auftritte, keine Dauerbewegung. */
@media (prefers-reduced-motion: no-preference) {
  .effekte .auftritt { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--n, 0) * 90ms); }
  .effekte .auftritt.zeigen { opacity: 1; transform: none; }

  /* Steine werden nacheinander auf den Tisch gelegt */
  .effekte :is(.board, .zahlenraum, .tiles).auftritt { opacity: 1; transform: none; }
  .effekte :is(.board, .zahlenraum, .tiles).auftritt .tile { opacity: 0; transform: translateY(-10px) rotate(-6deg) scale(.85); transition: opacity .3s ease, transform .5s cubic-bezier(.3, 1.5, .5, 1); transition-delay: calc(min(var(--i, 0), 24) * 45ms + 150ms); }
  .effekte :is(.board, .zahlenraum, .tiles).zeigen .tile { opacity: 1; transform: none; }

  /* Die farbige Ecke der Überschrift klappt aus ihrer Ecke auf */
  .effekte .section-head.auftritt { transform: translateY(10px); }
  .effekte .section-head .sh-dreieck { transform-box: fill-box; transform-origin: 100% 0; transform: scale(0); transition: transform .6s cubic-bezier(.3, 1.4, .5, 1) .25s; }
  .effekte .section-head.zeigen .sh-dreieck { transform: none; }

  /* Hover: kleine, ruhige Reaktionen */
  .btn .play { transition: transform .25s ease; }
  .btn:hover .play, .btn:focus-visible .play { transform: translateX(3px); }
  .board .tile, .zahlenraum .tile, .tiles .tile { transition: transform .2s ease; }
  .effekte :is(.board, .zahlenraum, .tiles).zeigen .tile:hover { transform: translateY(-3px) rotate(-3deg); transition-delay: 0s; }
  .value { transition: transform .3s ease; }
  .value:hover { transform: translateY(-3px); }
  .value .raute { transition: transform .4s cubic-bezier(.3, 1.5, .5, 1); }
  .value:hover .raute { transform: rotate(135deg); }
  .galerie img { transition: transform .5s ease; }
  .galerie > *:hover img { transform: scale(1.03); }
  .galerie > * { overflow: hidden; }
}
/* Dark Mode: Logo-Kacheln zeigen die Dateien auf ihrem gedachten Grund, helle Kacheln bleiben weiß */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-feld:not(.dunkel) { background: #ffffff; border-color: #ffffff; }
  :root:not([data-theme="light"]) .logo-feld:not(.dunkel) .cap { color: #5b5b59; }
  :root:not([data-theme="light"]) .logo-feld:not(.dunkel) .dl { color: #c63f12; }
  :root:not([data-theme="light"]) .logo-feld.dunkel { border-color: var(--linie); }
}
:root[data-theme="dark"] .logo-feld:not(.dunkel) { background: #ffffff; border-color: #ffffff; }
:root[data-theme="dark"] .logo-feld:not(.dunkel) .cap { color: #5b5b59; }
:root[data-theme="dark"] .logo-feld:not(.dunkel) .dl { color: #c63f12; }
:root[data-theme="dark"] .logo-feld.dunkel { border-color: var(--linie); }