/* Mancala Ukoo – Holzbrett mit Samen, Jahresringe für den Weg (Gestaltung 25.09.2026, mancala-ukoo/CLAUDE.md)
   Immer dunkel wie die App. Bedienelemente sind eingetiefte Mulden (Stadion-Form, Innenschatten),
   Muldengrün = hier geht es, ein Samen = gewählt. Titel Kurale, Fließtext Systemschrift wie in der App.
   Schrift lokal (OFL), keine Fremdabrufe. */

@font-face { font-family: "Kurale"; font-weight: 400; font-display: swap;
  src: url("schrift/kurale-regular.woff2") format("woff2"); }

:root {
  --holz: #2A1C12;          /* Grund */
  --holz-tief: #1E140C;     /* Fuß, Bänder */
  --karte: #3A2718;
  --brett: #6B4A2F;
  --mulde: #241710;
  --gruen: #3D5A28;         /* Fläche: spielbar/gewählt */
  --gruen-hell: #9CC27F;    /* grüner Text auf Holz */
  --samen: #EBD6AC;
  --samen-dunkel: #C08F52;
  --text: #F2E7D5;          /* 14 : 1 auf Holz */
  --leise: #C2A98A;         /* Nebentext */
  --linie: #5A4030;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; color: var(--text); background: var(--holz);
  /* feine Maserung: zwei sehr flache Streifen, kein Bild */
  background-image:
    repeating-linear-gradient(176deg, rgba(255,255,255,0.012) 0 3px, transparent 3px 11px),
    repeating-linear-gradient(183deg, rgba(0,0,0,0.05) 0 2px, transparent 2px 23px);
  font: 400 1.0625rem/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--samen); text-underline-offset: 0.2em; }
a:hover { color: #fff; }
:focus-visible { outline: 3px solid var(--samen); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3, .marke { font-family: Kurale, Georgia, serif; font-weight: 400; line-height: 1.12; }
h2 { font-size: clamp(1.9rem, 4.4vw, 2.8rem); margin: 0 0 0.4em; }
h3 { font-size: 1.35rem; margin: 0 0 0.3em; }
p { margin: 0 0 0.9em; }

.huelle { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.ueberspringen { position: absolute; left: -999px; top: 8px; background: var(--karte); color: var(--text); padding: 10px 14px; z-index: 10; border-radius: 999px; }
.ueberspringen:focus { left: 8px; }

/* ---------- Bausteine: Karte, Mulden-Knopf, Samen ---------- */
.karte { background: var(--karte); border-radius: 18px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 6px 18px rgba(0,0,0,0.25); }
.mulde-knopf {
  display: inline-flex; align-items: center; gap: 0.6em; min-height: 48px; padding: 0.55em 1.3em;
  font: 600 1rem/1.2 system-ui, sans-serif; color: var(--text); text-decoration: none; cursor: pointer;
  background: var(--mulde); border: 1px solid var(--linie); border-radius: 999px;
  box-shadow: inset 0 3px 6px rgba(0,0,0,0.55), inset 0 -1px 0 rgba(255,255,255,0.05);
}
.mulde-knopf:hover { border-color: var(--samen-dunkel); }
.mulde-knopf--gruen { background: var(--gruen); border-color: #567a3c; }
.mulde-knopf::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--leise); flex: none; }
.mulde-knopf--gruen::before { background: var(--samen); border-color: var(--samen); }
.samen { display: inline-block; width: 0.62em; height: 0.62em; border-radius: 50%; background: var(--samen); vertical-align: 0.05em; }
.samen--dunkel { background: var(--samen-dunkel); }

/* ---------- Kopf ---------- */
.kopf { padding: 14px 0; }
.kopf .huelle { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.marke { display: flex; align-items: center; gap: 10px; font-size: 1.35rem; color: var(--text); text-decoration: none; }
.marke img { width: 36px; height: 36px; border-radius: 10px; }
.kopf nav ul { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; align-items: center; }
.kopf nav a { color: var(--text); text-decoration: none; display: inline-block; padding: 10px 0; }
.kopf nav a:hover { text-decoration: underline; }
.kopf nav .sprache { padding: 8px 16px; border-radius: 999px; background: var(--mulde); box-shadow: inset 0 2px 5px rgba(0,0,0,0.5); border: 1px solid var(--linie); }
@media (max-width: 780px) { .kopf nav li:not(.immer) { display: none; } }

/* ---------- Held ---------- */
.held { padding: 26px 0 60px; }
.held .huelle { display: grid; gap: 36px; align-items: center; }
@media (min-width: 960px) { .held .huelle { grid-template-columns: 0.95fr 1.05fr; } }
.held h1 { font-size: clamp(2.8rem, 13vw, 5.4rem); margin: 0 0 0.15em; white-space: nowrap; }
@media (min-width: 960px) { .held h1 { font-size: clamp(3.4rem, 6vw, 5.4rem); } }
.versprechen { font-size: clamp(1.2rem, 2.3vw, 1.45rem); max-width: 30em; }
.fakten { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0 0 24px; }
.fakten li { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.3em 0.9em; border-radius: 999px; background: var(--mulde); box-shadow: inset 0 2px 5px rgba(0,0,0,0.55); font-weight: 600; font-size: 0.96rem; }
.fakten li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--samen); }
.fakten li:nth-child(even)::before { background: var(--samen-dunkel); }
.badge { display: inline-block; margin-left: -10px; }
.badge img { width: 240px; height: auto; }
.hinweis { font-size: 0.95rem; color: var(--leise); max-width: 32em; margin-top: 6px; }

/* Probierbrett (Leitmotiv): echtes Kalah zu zweit */
.probe { display: grid; gap: 14px; justify-items: center; }
.brett {
  --m: clamp(38px, 10.6vw, 72px);
  display: grid; grid-template-columns: auto repeat(6, var(--m)) auto; grid-template-rows: var(--m) var(--m);
  gap: clamp(4px, 1.1vw, 10px); padding: clamp(24px, 4vw, 30px) clamp(8px, 2.2vw, 20px); background: var(--brett); border-radius: 28px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.08), inset 0 -4px 0 rgba(0,0,0,0.2), 0 10px 30px rgba(0,0,0,0.4);
  max-width: 100%;
}
.brett .speicher { padding: 12% 8%; overflow: visible; grid-row: 1 / 3; width: calc(var(--m) * 0.6); }
@media (min-width: 600px) { .brett .speicher { width: calc(var(--m) * 0.9); } }
.brett .speicher--links { grid-column: 1; }
.brett .speicher--rechts { grid-column: 8; }
.loch {
  position: relative; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 2px;
  padding: 18% 14%; background: var(--mulde); border-radius: 999px; border: 0;
  box-shadow: inset 0 4px 8px rgba(0,0,0,0.6); color: var(--text); font: inherit;
}
button.loch { cursor: pointer; }
button.loch:disabled { cursor: default; }
.loch.spielbar { background: var(--gruen); box-shadow: inset 0 4px 8px rgba(0,0,0,0.35); }
.loch.zuletzt { outline: 2px dashed var(--samen); outline-offset: 2px; }
.loch i { width: var(--s, 9px); height: var(--s, 9px); border-radius: 50%; background: var(--samen); flex: none; }
.loch i:nth-child(3n) { background: var(--samen-dunkel); }
.loch .zahl { position: absolute; left: 50%; transform: translateX(-50%); bottom: -1.45em; font-size: 0.8rem; color: var(--text); font-variant-numeric: tabular-nums; }
.brett .reihe-oben .zahl { bottom: auto; top: -1.45em; }
.brett { margin-block: 0.4em; }
.loch.speicher .zahl { font-weight: 700; color: var(--text); }
.probe-kopf { display: flex; justify-content: space-between; width: 100%; max-width: 640px; font-weight: 600; color: var(--leise); font-size: 0.95rem; }
.probe-kopf b { font-family: Kurale, serif; font-weight: 400; color: var(--text); font-size: 1.3rem; margin-left: 0.3em; }
.probe-status { min-height: 3.2em; text-align: center; max-width: 30em; margin: 0; }
.probe-leise { font-size: 0.9rem; color: var(--leise); text-align: center; max-width: 32em; margin: 0; }

/* ---------- Abschnitte ---------- */
.abschnitt { padding: 64px 0; }
.abschnitt--band { background: rgba(0,0,0,0.18); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), inset 0 -1px 0 rgba(255,255,255,0.04); }
.vorspann { font-size: 1.15rem; max-width: 40em; color: var(--leise); margin-bottom: 30px; }
.raster { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.raster > .karte { padding: 22px 22px 12px; }

/* So geht's: Samen als Nummer */
.schritte { list-style: none; padding: 0; margin: 0; counter-reset: s; }
.schritte li { position: relative; padding-top: 70px !important; }
.schritte li::before {
  counter-increment: s; content: counter(s); position: absolute; top: 20px; left: 22px;
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--samen); color: var(--holz); font: 1.3rem Kurale, serif;
}
.schritte li:nth-child(2)::before { background: var(--samen-dunkel); }

/* Die Familie */
.familie { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); list-style: none; padding: 0; margin: 0; }
.familie li { padding: 16px 18px; border-radius: 18px; background: var(--karte); }
.familie .name { font: 1.35rem/1.2 Kurale, serif; display: block; }
.familie .region { color: var(--leise); font-size: 0.95rem; }
.familie .preis { display: inline-flex; align-items: center; gap: 0.45em; margin-top: 8px; font-size: 0.85rem; font-weight: 600; padding: 0.15em 0.75em; border-radius: 999px; background: var(--mulde); box-shadow: inset 0 2px 4px rgba(0,0,0,0.5); }
.familie .frei .preis { background: var(--gruen); box-shadow: none; }
.familie .frei .preis::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--samen); }
.zusatz { margin-top: 26px; font-size: 1rem; color: var(--leise); max-width: 46em; }

/* Weg: Jahresringe */
.weg { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .weg { grid-template-columns: 0.8fr 1.2fr; } }
.scheibe {
  width: min(78vw, 320px); aspect-ratio: 1; border-radius: 50%; margin: 0 auto;
  background:
    radial-gradient(circle, var(--samen) 0 5%, transparent 5.5%),
    repeating-radial-gradient(circle, #8a6440 0 3.2%, #a57b52 3.6% 6.4%, #94693f 6.8% 8.6%),
    #8a6440;
  box-shadow: inset 0 0 0 10px #5b3d25, inset 0 0 0 13px #3f2a19, 0 12px 30px rgba(0,0,0,0.45);
}
.raenge { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; }
.raenge li { display: grid; grid-template-columns: 7.5em 1fr; gap: 12px; align-items: baseline; padding-bottom: 8px; border-bottom: 1px dashed var(--linie); }
.raenge b { font: 1.25rem Kurale, serif; }
.raenge span { color: var(--leise); }

/* Screenshots */
.galerie { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 4px 22px; margin: 0 -4px; list-style: none; }
.galerie li { flex: 0 0 auto; width: 210px; scroll-snap-align: start; }
@media (min-width: 900px) { .galerie li { width: 230px; } }
figure { margin: 0; }
.galerie img { border-radius: 20px; box-shadow: 0 0 0 6px var(--mulde), 0 10px 24px rgba(0,0,0,0.4); }
figcaption { margin-top: 14px; font-weight: 600; font-size: 0.98rem; }

/* Preise */
.preise { display: grid; gap: 24px; align-items: start; }
@media (min-width: 860px) { .preise { grid-template-columns: 1fr 1fr; } }
.preise .karte { padding: 24px; }
.preise ul { padding-left: 1.2em; margin: 0 0 0.6em; }
.preise li { margin-bottom: 0.45em; }
.preise li::marker { color: var(--samen-dunkel); }
.betrag { font: 2.6rem/1 Kurale, serif; margin: 0.15em 0 0.3em; }
.kleingedruckt { font-size: 0.93rem; color: var(--leise); }

/* FAQ */
.fragen { display: grid; gap: 14px; max-width: 860px; }
.fragen details { border-radius: 18px; background: var(--karte); }
.fragen summary { cursor: pointer; padding: 16px 56px 16px 22px; font-weight: 600; font-size: 1.06rem; list-style: none; position: relative; min-height: 48px; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: var(--mulde); box-shadow: inset 0 2px 4px rgba(0,0,0,0.6); }
.fragen details[open] summary::after { background: var(--samen); box-shadow: none; }
.fragen details > div { padding: 0 22px 10px; }

/* Abschluss + Fuß */
.schluss { text-align: center; }
.schluss .vorspann { margin-inline: auto; }
.schluss .badge { margin: 8px auto 0; }
.fuss { background: var(--holz-tief); padding: 40px 0 34px; margin-top: 30px; }
.fuss a { color: var(--text); }
.fuss ul { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.fuss li a { display: inline-block; padding: 6px 0; }
.fuss p { margin: 0 0 8px; font-size: 0.93rem; color: var(--leise); }