/* CiderField — Redaktion für Brett- und Worträtselspiele */

/* — Eigene Schriftdateien (kein Fremdanbieter) — */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/inter-400.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: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/inter-600.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: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/jetbrains-mono-400.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;
}

:root {
  --papier: #ffffff;
  --band: #f4f4f1;
  --tinte: #141414;
  --tinte-weich: #5f5f5f;
  --akzent: #65a30d;
  --nacht: #101010;

  --schrift: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --schrift-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --bahn: 1180px;
  --luft-1: 8px;
  --luft-2: 16px;
  --luft-3: 24px;
  --luft-4: 40px;
  --luft-5: 64px;
  --luft-6: 96px;
  --luft-7: 128px;

  --rundung: 12px;
  --schnitt: 16px;
  --kante: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

h1, h2, h3 { font-weight: 400; margin: 0; }

p { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--tinte);
  outline-offset: 3px;
}

.feldzug-zeichen { position: absolute; width: 0; height: 0; overflow: hidden; }

.feldzug-sprung {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  background: var(--akzent);
  color: var(--tinte);
  padding: 14px 22px;
  font-family: var(--schrift-mono);
  font-size: 13px;
}
.feldzug-sprung:focus { left: 12px; top: 12px; }

.feldzug-bahn {
  width: 100%;
  max-width: var(--bahn);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
}

/* — gemeinsame Textbausteine — */

.feldzug-marke-zeile {
  font-family: var(--schrift-mono);
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinte-weich);
  margin-bottom: var(--luft-3);
}

.feldzug-titel {
  font-size: clamp(30px, 5.2vw, 54px);
  line-height: 1.04;
  letter-spacing: -0.032em;
  max-width: 18ch;
}

.feldzug-lead {
  margin-top: var(--luft-3);
  max-width: 62ch;
  font-size: clamp(17px, 1.5vw, 19px);
  color: var(--tinte-weich);
}

.feldzug-lead--rechts { margin-left: auto; }

.feldzug-verweis {
  text-decoration: underline;
  text-decoration-color: var(--akzent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  padding-bottom: 1px;
}
.feldzug-verweis:hover { box-shadow: inset 0 -12px 0 0 var(--akzent); }

/* — Wortmarke — */

.feldzug-marke {
  font-family: var(--schrift);
  font-size: 21px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.feldzug-marke__teil {
  background: var(--akzent);
  color: var(--tinte);
  padding: 2px 6px 3px;
  margin-left: 3px;
}
.feldzug-marke--hell { color: var(--papier); font-size: 24px; }

/* — Knöpfe: gekappte obere rechte Ecke — */

.zug-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 13px 26px;
  font-family: var(--schrift);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  border-radius: 0;
  clip-path: var(--kante);
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.zug-knopf--voll { background: var(--akzent); color: var(--tinte); }
.zug-knopf--voll:hover { background: var(--tinte); color: var(--papier); }

.zug-knopf--leer { background: var(--band); color: var(--tinte); }
.zug-knopf--leer:hover { background: var(--tinte); color: var(--papier); }

.zug-knopf--klein { min-height: 48px; padding: 12px 20px; font-size: 14px; }

.zug-knopf:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--tinte);
}
.zug-knopf--voll:active, .zug-knopf--leer:active { background: var(--tinte); color: var(--papier); }

/* — 1 Kopfzeile — */

.feldzug-kopf {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--papier);
}

.feldzug-kopf__bahn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--luft-3);
  padding-block: 18px;
}

.feldzug-kopf__menue {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
}

.feldzug-kopf__link {
  font-family: var(--schrift-mono);
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tinte-weich);
  padding: 15px 2px;
  display: inline-block;
  min-height: 48px;
  box-shadow: inset 0 0 0 0 var(--akzent);
  transition: color .16s ease, box-shadow .16s ease;
}
.feldzug-kopf__link:hover,
.feldzug-kopf__link.ist-aktiv {
  color: var(--tinte);
  box-shadow: inset 0 -3px 0 0 var(--akzent);
}

.feldzug-kopf__schalter {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 18px;
  background: var(--band);
  color: var(--tinte);
  border: 0;
  font-family: var(--schrift-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  clip-path: var(--kante);
}
.feldzug-kopf__schalter:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--tinte); }
.feldzug-kopf__schalter-strich {
  width: 18px; height: 2px; background: currentColor; position: relative; display: block;
}
.feldzug-kopf__schalter-strich::before,
.feldzug-kopf__schalter-strich::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor;
}
.feldzug-kopf__schalter-strich::before { top: -6px; }
.feldzug-kopf__schalter-strich::after { top: 6px; }
.feldzug-kopf__schalter[aria-expanded="true"] { background: var(--akzent); }

/* — 2 Auftakt — */

.brett-lede {
  padding-top: clamp(48px, 8vw, 104px);
  padding-bottom: clamp(56px, 9vw, 120px);
  text-align: center;
}

.brett-lede__kicker {
  font-family: var(--schrift-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinte-weich);
}

.brett-lede__titel {
  margin-top: var(--luft-4);
  font-size: clamp(42px, 9.4vw, 108px);
  line-height: 0.98;
  letter-spacing: -0.038em;
  max-width: 15ch;
  margin-inline: auto;
}

.brett-lede__text {
  margin-top: var(--luft-4);
  margin-inline: auto;
  max-width: 58ch;
  font-size: clamp(17px, 1.6vw, 20px);
  color: var(--tinte-weich);
}

.brett-lede__aktionen {
  margin-top: var(--luft-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--luft-2);
  justify-content: center;
}

.brett-lede__auslage {
  margin-top: clamp(48px, 7vw, 88px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.brett-lede__auslage img {
  width: 64px;
  height: 64px;
  border-radius: var(--rundung);
}

.brett-lede__fussnote {
  margin-top: var(--luft-3);
  font-family: var(--schrift-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--tinte-weich);
}

/* — 3 Katalog — */

.zug-auslage { padding-block: clamp(48px, 7vw, 96px); scroll-margin-top: 88px; }

.zug-auslage__spalten {
  margin-top: clamp(40px, 6vw, 72px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 44px);
  align-items: start;
}

.zug-auslage__spalte { display: grid; gap: clamp(24px, 3vw, 44px); }
.zug-auslage__spalte--versetzt { margin-top: 168px; }

.zug-tile {
  background: var(--band);
  border-radius: var(--rundung);
  padding: 22px 22px 26px;
  display: grid;
  gap: var(--luft-2);
  align-content: start;
}
.zug-tile--luft { padding-bottom: 44px; gap: 20px; }

.zug-tile__bild {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
}

.zug-tile__kopf { display: flex; align-items: center; gap: 14px; }

.zug-tile__ikone { width: 56px; height: 56px; border-radius: 10px; flex: none; }

.zug-tile__name { font-size: clamp(21px, 2.2vw, 26px); line-height: 1.15; letter-spacing: -0.024em; }

.zug-tile__studio {
  font-family: var(--schrift-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--tinte-weich);
  margin-top: 4px;
}

.zug-tile__wertung { display: flex; align-items: center; gap: 10px; }

.zug-tile__sterne { position: relative; display: inline-block; line-height: 0; }
.zug-tile__sterne-spur { display: block; color: #c9c9c2; }
.zug-tile__sterne-fuellung {
  position: absolute;
  inset: 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--akzent);
}
.zug-tile__sterne svg { fill: currentColor; }
.zug-tile__sterne-spur svg + svg, .zug-tile__sterne-fuellung svg + svg { margin-left: 3px; }

.zug-tile__zahl { font-family: var(--schrift-mono); font-size: 14px; }

.zug-tile__text { color: #4a4a4a; font-size: 16px; }

.zug-tile__zeile {
  font-family: var(--schrift-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tinte-weich);
}

.zug-tile .zug-knopf { justify-self: start; background: var(--papier); }
.zug-tile .zug-knopf:hover { background: var(--tinte); color: var(--papier); }

/* — 4 Redaktionsstatistik — */

.brett-zahlen {
  background: var(--band);
  padding-block: clamp(56px, 8vw, 104px);
  scroll-margin-top: 88px;
}

.brett-zahlen__liste {
  margin: clamp(32px, 5vw, 56px) 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
}

.brett-zahlen__posten--gross { grid-column: span 1; }

.brett-zahlen__wert {
  font-size: clamp(52px, 8vw, 96px);
  line-height: 0.94;
  letter-spacing: -0.04em;
}
.brett-zahlen__posten--gross .brett-zahlen__wert { color: var(--tinte); }

.brett-zahlen__wort {
  margin: 14px 0 0;
  max-width: 34ch;
  color: var(--tinte-weich);
  font-size: 16px;
}

/* — 5 Vergleich — */

.auslage-tafel { padding-block: clamp(56px, 8vw, 104px); scroll-margin-top: 88px; }

.auslage-tafel__rollfeld {
  margin-top: clamp(32px, 5vw, 56px);
  width: 100%;
  overflow-x: auto;
}
.auslage-tafel__rollfeld:focus-visible { outline: 3px solid var(--tinte); outline-offset: 4px; }

.auslage-row {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  min-width: 720px;
}

.auslage-row__unterschrift {
  caption-side: top;
  text-align: left;
  font-family: var(--schrift-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--tinte-weich);
  padding-bottom: 18px;
  max-width: 78ch;
}

.auslage-row__cell {
  text-align: left;
  padding: 15px 18px;
  vertical-align: top;
  font-weight: 400;
}

.auslage-row__cell--kopf {
  font-family: var(--schrift-mono);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinte-weich);
  border-bottom: 1px solid var(--tinte);
  padding-bottom: 12px;
  white-space: nowrap;
}

.auslage-row__cell--titel { width: 22%; }

.auslage-row tbody tr:nth-child(odd) { background: var(--band); }

.auslage-row__haken { color: var(--akzent); display: block; }

.auslage-tafel__notiz {
  margin-top: var(--luft-3);
  max-width: 70ch;
  color: var(--tinte-weich);
  font-size: 15px;
}

/* — 6 Zugang — */

.zug-plan { padding-block: clamp(56px, 8vw, 104px); scroll-margin-top: 88px; }

.zug-plan__paar {
  margin-top: clamp(32px, 5vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}

.zug-plan__karte {
  background: var(--band);
  border-radius: var(--rundung);
  padding: clamp(24px, 3vw, 40px);
  display: grid;
  gap: var(--luft-2);
  align-content: start;
}
.zug-plan__karte--betont { background: var(--tinte); color: var(--papier); }

.zug-plan__name { font-size: 26px; letter-spacing: -0.02em; }

.zug-plan__preis { font-size: clamp(40px, 5vw, 60px); line-height: 1; letter-spacing: -0.035em; }

.zug-plan__takt {
  font-family: var(--schrift-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--tinte-weich);
}
.zug-plan__karte--betont .zug-plan__takt { color: #c8c8c8; }

.zug-plan__punkte { display: grid; gap: 10px; font-size: 16px; }
.zug-plan__punkte li { padding-left: 22px; position: relative; }
.zug-plan__punkte li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 10px;
  height: 2px;
  background: var(--akzent);
}

.zug-plan__hinweis { font-size: 14px; color: var(--tinte-weich); max-width: 52ch; }
.zug-plan__karte--betont .zug-plan__hinweis { color: #c8c8c8; }

.zug-plan__karte--betont .zug-knopf--voll { justify-self: start; }

/* — 7 Fragen — */

.brett-frage { padding-block: clamp(56px, 8vw, 104px); background: var(--band); scroll-margin-top: 88px; }

.brett-frage__bahn {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.brett-frage__liste { display: grid; }

.brett-frage__posten { padding-block: 4px; }

.brett-frage__frage { margin: 0; }

.brett-frage__schalter {
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: transparent;
  border: 0;
  padding: 18px 0;
  text-align: left;
  font-family: var(--schrift);
  font-size: clamp(17px, 1.7vw, 20px);
  font-weight: 400;
  letter-spacing: -0.018em;
  color: var(--tinte);
  cursor: pointer;
}
.brett-frage__schalter:hover { color: #000; }
.brett-frage__schalter:focus-visible { outline: 3px solid var(--tinte); outline-offset: 2px; }

.brett-frage__pfeil {
  flex: none;
  width: 14px;
  height: 14px;
  position: relative;
}
.brett-frage__pfeil::before,
.brett-frage__pfeil::after {
  content: "";
  position: absolute;
  background: var(--tinte);
  transition: transform .2s ease, opacity .2s ease;
}
.brett-frage__pfeil::before { left: 0; top: 6px; width: 14px; height: 2px; }
.brett-frage__pfeil::after { left: 6px; top: 0; width: 2px; height: 14px; }
.brett-frage__schalter[aria-expanded="true"] .brett-frage__pfeil::after { transform: scaleY(0); opacity: 0; }

.brett-frage__antwort { padding: 0 40px 22px 0; max-width: 66ch; color: var(--tinte-weich); }

/* — 8 Verfahren — */

.zug-methode { padding-block: clamp(56px, 8vw, 104px); scroll-margin-top: 88px; }

.zug-methode__schritte {
  margin-top: clamp(32px, 5vw, 56px);
  counter-reset: schritt;
  display: grid;
  gap: clamp(28px, 3.5vw, 48px);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.zug-methode__schritt { counter-increment: schritt; }
.zug-methode__schritt::before {
  content: counter(schritt, decimal-leading-zero);
  display: block;
  font-family: var(--schrift-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--tinte-weich);
  margin-bottom: 14px;
}
.zug-methode__schritt:first-child::before,
.zug-methode__schritt:nth-child(4)::before { color: var(--tinte); }

.zug-methode__kopf { font-size: 21px; letter-spacing: -0.022em; margin-bottom: 10px; }

.zug-methode__schritt p { color: var(--tinte-weich); font-size: 16px; }

.zug-methode__schritt:first-child { grid-column: span 1; }

/* — 9 Stimmen — */

.brett-stimmen { padding-block: clamp(56px, 8vw, 104px); scroll-margin-top: 88px; }

.brett-stimmen__feld {
  margin-top: clamp(32px, 5vw, 56px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}

.brett-stimmen__zitat {
  margin: 0;
  background: var(--band);
  border-radius: var(--rundung);
  padding: clamp(22px, 2.6vw, 34px);
}
.brett-stimmen__zitat--breit { grid-column: span 2; }
.brett-stimmen__zitat--rechts { grid-column: 2; }

.brett-stimmen__zitat blockquote { margin: 0; }
.brett-stimmen__zitat p {
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.34;
  letter-spacing: -0.022em;
}

.brett-stimmen__quelle {
  margin-top: var(--luft-3);
  font-family: var(--schrift-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--tinte-weich);
}
.brett-stimmen__spiel { color: var(--tinte); }

/* — 10 Projekt — */

.brett-projekt { padding-block: clamp(56px, 8vw, 104px) clamp(64px, 9vw, 120px); scroll-margin-top: 88px; }

.brett-projekt__bahn {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.9fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
}

.brett-projekt__text { display: grid; gap: var(--luft-3); max-width: 62ch; }
.brett-projekt__text p { color: var(--tinte-weich); font-size: 17px; }
.brett-projekt__text .feldzug-titel { margin-bottom: 6px; }

.brett-projekt__kasten {
  background: var(--band);
  border-radius: var(--rundung);
  padding: clamp(24px, 3vw, 36px);
  margin-top: 52px;
}

.brett-projekt__marke {
  font-family: var(--schrift-mono);
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinte-weich);
  margin-bottom: var(--luft-2);
}

.brett-projekt__punkte { display: grid; gap: 12px; font-size: 16px; }
.brett-projekt__punkte li { padding-left: 22px; position: relative; }
.brett-projekt__punkte li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 10px;
  height: 2px;
  background: var(--akzent);
}

/* — 11 Fußzeile — */

.feldzug-fuss {
  background: var(--nacht);
  color: var(--papier);
  padding-block: clamp(48px, 6vw, 80px);
}

.feldzug-fuss__bahn {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 48px);
  align-items: start;
}

.feldzug-fuss__block { display: grid; align-content: start; gap: 6px; }

.feldzug-fuss__marke {
  font-family: var(--schrift-mono);
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #b5b5b5;
  margin-bottom: 8px;
}

.feldzug-fuss__satz { color: #b5b5b5; font-size: 15px; max-width: 40ch; margin-top: 14px; }

.feldzug-fuss__link {
  color: var(--papier);
  text-decoration: none;
  font-size: 15px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  box-shadow: inset 0 0 0 0 var(--akzent);
  transition: box-shadow .16s ease;
  width: fit-content;
}
.feldzug-fuss__link:hover { box-shadow: inset 0 -3px 0 0 var(--akzent); }

/* — schwebende Steuerung — */

.feldzug-hoch {
  position: fixed;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 32px);
  z-index: 35;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 18px;
  background: var(--tinte);
  color: var(--papier);
  border: 0;
  font-family: var(--schrift-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  clip-path: var(--kante);
}
.feldzug-hoch:hover { background: var(--akzent); color: var(--tinte); }
.feldzug-hoch:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--papier); }
.feldzug-hoch[hidden] { display: none; }

.feldzug-keks {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  background: var(--tinte);
  color: var(--papier);
  padding: clamp(16px, 2.5vw, 24px) 0;
}
.feldzug-keks[hidden] { display: none; }

.feldzug-keks__inhalt {
  max-width: var(--bahn);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--luft-2);
}

.feldzug-keks__text { font-size: 14px; max-width: 74ch; color: #dcdcdc; }
.feldzug-keks__text .feldzug-verweis { color: var(--papier); }

.feldzug-keks__knoepfe { display: flex; gap: 12px; flex-wrap: wrap; }
.feldzug-keks .zug-knopf--leer { background: var(--papier); color: var(--tinte); }
.feldzug-keks .zug-knopf--leer:hover { background: #d9d9d9; }

/* — Rechtsseiten — */

.brett-recht { padding-block: clamp(40px, 6vw, 80px) clamp(56px, 8vw, 104px); }

.brett-recht__kopf { max-width: 60ch; }

.brett-recht__titel {
  font-size: clamp(32px, 5.6vw, 62px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin-top: var(--luft-3);
}

.brett-recht__stand {
  margin-top: var(--luft-3);
  font-family: var(--schrift-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--tinte-weich);
}

.brett-recht__text { margin-top: clamp(32px, 5vw, 56px); max-width: 76ch; display: grid; gap: var(--luft-4); }

.brett-recht__block { display: grid; gap: var(--luft-2); }

.brett-recht__block h2 { font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -0.026em; }
.brett-recht__block h3 { font-size: 19px; letter-spacing: -0.02em; }
.brett-recht__block p { color: var(--tinte-weich); }
.brett-recht__block ul { display: grid; gap: 10px; color: var(--tinte-weich); }
.brett-recht__block li { padding-left: 22px; position: relative; }
.brett-recht__block li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 10px;
  height: 2px;
  background: var(--akzent);
}

.brett-recht__zurueck { margin-top: clamp(32px, 5vw, 48px); }

.brett-recht__wort {
  font-family: var(--schrift-mono);
  font-size: 14px;
  color: var(--tinte);
  background: var(--band);
  padding: 2px 6px;
}


/* — 404 — */

.brett-leer {
  padding-block: clamp(64px, 12vw, 160px);
  text-align: center;
}
.brett-leer__zahl {
  font-family: var(--schrift-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinte-weich);
}
.brett-leer__titel {
  margin-top: var(--luft-3);
  font-size: clamp(38px, 8vw, 88px);
  line-height: 1;
  letter-spacing: -0.036em;
  max-width: 16ch;
  margin-inline: auto;
}
.brett-leer__text { margin: var(--luft-4) auto 0; max-width: 52ch; color: var(--tinte-weich); }
.brett-leer__aktionen { margin-top: var(--luft-4); display: flex; gap: var(--luft-2); justify-content: center; flex-wrap: wrap; }

/* — Anpassungen — */

@media (max-width: 1080px) {
  .feldzug-kopf__schalter { display: inline-flex; }
  .feldzug-kopf__bahn { flex-wrap: wrap; }
  .feldzug-kopf__menue {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding-bottom: 12px;
  }
  .feldzug-kopf__menue.ist-offen { display: flex; }
  .feldzug-kopf__link { width: 100%; padding-block: 16px; }
}

@media (max-width: 900px) {
  .zug-auslage__spalten { grid-template-columns: 1fr; }
  .zug-auslage__spalte--versetzt { margin-top: 0; }
  .brett-frage__bahn { grid-template-columns: 1fr; }
  .zug-plan__paar { grid-template-columns: 1fr; }
  .brett-projekt__bahn { grid-template-columns: 1fr; }
  .brett-projekt__kasten { margin-top: 0; }
  .feldzug-fuss__bahn { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brett-stimmen__feld { grid-template-columns: 1fr; }
  .brett-stimmen__zitat--breit { grid-column: span 1; }
  .brett-stimmen__zitat--rechts { grid-column: 1; }
  .feldzug-lead--rechts { margin-left: 0; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .brett-zahlen__liste { grid-template-columns: 1fr; }
  .feldzug-fuss__bahn { grid-template-columns: 1fr; }
  .feldzug-hoch__text { display: none; }
  .feldzug-hoch { padding: 14px; }
  .zug-tile--luft { padding-bottom: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}


code, pre { overflow-wrap: anywhere; word-break: break-word; }