/* Tikatakatal · ein Stylesheet, kein Framework */

@font-face {
  font-family: "Nunito";
  src: url("schrift/nunito-v32-latin_latin-ext-regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("schrift/nunito-v32-latin_latin-ext-700.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("schrift/fraunces-v38-latin_latin-ext-700.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  --creme: #f4ecdb;
  --creme-tief: #eadfc7;
  --tinte: #3a2f27;
  --tinte-leise: #6b5a4b;
  --honig: #e2a21e;
  --salbei: #93ae8c;
  --holz: #9a7350;
  --petrol: #386367;
  --altrot: #b8543f;
  /* Gegenden-Akzentfarben aus dem Kanon (TIKATAKATAL-GEGENDEN-2026-08-29.md).
     Summwald: Salbei, deckt sich mit --salbei oben. Fuer Moor, Berg, Heide
     und Hoehle gibt es im Kanon nur die Namen Moosgruen, Felsgrau, Heidelila,
     Steingrau, keine Hex-Werte; die Toene hier sind die bereits bestehende,
     gemessene Umsetzung dieser Namen. */
  --gegend-summwald: #93ae8c;
  --gegend-moor: #5f7a58;
  --gegend-berg: #7c8590;
  --gegend-heide: #6f5c8e;
  --gegend-hoehle: #6d747a;
  --radius: 16px;
  --tempo: 300ms;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--creme);
  color: var(--tinte);
  font-family: "Nunito", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.65;
}

h1, h2, h3 {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.5em;
}
h1 { font-size: 1.9rem; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.15rem; }

a { color: var(--petrol); }
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--altrot);
  outline-offset: 3px;
}

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

.huelle { max-width: 44rem; margin: 0 auto; padding: 0 1rem; }
.weit { max-width: 62rem; }

/* Kopf und Fuss */
.kopf {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  padding: 0.6rem 1rem;
}
.kopf .marke {
  display: inline-flex;
  align-items: center;
  min-height: 60px;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--tinte);
  text-decoration: none;
  padding: 0 0.25rem;
}
.kopf nav { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.kopf nav a {
  display: inline-flex;
  align-items: center;
  min-height: 60px;
  padding: 0 0.9rem;
  border-radius: var(--radius);
  color: var(--tinte);
  text-decoration: none;
}
.kopf nav a:hover { background: var(--creme-tief); }
.kopf nav a[aria-current="page"] { background: var(--creme-tief); font-weight: 700; }

.holzbord {
  height: 8px;
  border: 0;
  margin: 2.5rem 0;
  border-radius: 8px;
  background: repeating-linear-gradient(90deg, var(--holz) 0 16px, #b08a66 16px 32px);
  opacity: 0.5;
}

.fuss {
  margin-top: 3rem;
  padding: 1.5rem 1rem 3rem;
  background: var(--creme-tief);
  color: var(--tinte-leise);
  font-size: 0.95rem;
}
.fuss ul { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; }
.fuss ul a {
  display: inline-flex; align-items: center; min-height: 60px; padding: 0 0.75rem;
  border-radius: var(--radius);
}

/* Die Karte */
.karte {
  position: relative;
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 0.5rem;
}
.karte > picture { display: block; }
.karte-bild { width: 100%; border-radius: var(--radius); }
.zonen { position: absolute; inset: 0 0.5rem; }
.zone {
  position: absolute;
  min-width: 60px;
  min-height: 60px;
  border: 0;
  padding: 0;
  background: transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform var(--tempo) ease, background-color var(--tempo) ease;
}
.zone:hover,
.zone[aria-expanded="true"] {
  transform: scale(1.03);
  /* Je Gegend ihr eigener Ton, per --akzent-bg vom Skript gesetzt.
     Ohne JS oder auf unbekannten Gegenden bleibt der neutrale Schein. */
  background: var(--akzent-bg, rgba(255, 255, 255, 0.28));
}
.zone .zonenname {
  position: absolute;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
  background: rgba(244, 236, 219, 0.9);
  color: var(--tinte);
  font-weight: 700;
  font-size: 0.85rem;
  white-space: nowrap;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius);
  opacity: 0;
  transition: opacity var(--tempo) ease;
}
.zone:hover .zonenname,
.zone:focus-visible .zonenname,
.zone[aria-expanded="true"] .zonenname { opacity: 1; }

.neue-folge {
  display: flex;
  justify-content: center;
  margin: 0.75rem auto 0;
  max-width: 22rem;
  align-items: center;
  min-height: 60px;
  padding: 0 1rem;
  border-radius: var(--radius);
  background: var(--creme);
  border: 2px solid var(--honig);
  color: var(--tinte);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 0 rgba(58, 47, 39, 0.15);
}

/* Leiste unter der Karte */
.leiste {
  max-width: 62rem;
  margin: 1rem auto 0;
  padding: 1rem;
  border-radius: var(--radius);
  background: var(--creme-tief);
  border-top: 6px solid var(--akzent, var(--holz));
  opacity: 0;
  transition: opacity var(--tempo) ease;
}
.leiste[hidden] { display: none; }
.leiste.sichtbar { opacity: 1; }
.leiste h2 { margin-bottom: 0.25rem; }
.leiste p { margin: 0.25rem 0 0; color: var(--tinte-leise); }

/* Folgen-Kacheln */
.kacheln {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.kachel a {
  display: block;
  min-height: 60px;
  color: var(--tinte);
  text-decoration: none;
  background: var(--creme-tief);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--tempo) ease;
}
.kachel a:hover { transform: translateY(-3px); }
.kachel img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.kachel .text { padding: 0.75rem 1rem 1rem; }
.kachel .nummer { display: block; font-size: 0.85rem; color: var(--tinte-leise); }
.kachel .titel { font-family: "Fraunces", Georgia, serif; font-weight: 700; font-size: 1.05rem; }

/* Spieler */
.spieler {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem;
  border-radius: var(--radius);
  background: var(--creme-tief);
}
.knopf {
  min-width: 72px;
  min-height: 72px;
  border-radius: 50%;
  border: 2px solid var(--tinte);
  background: var(--creme);
  color: var(--tinte);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--tempo) ease;
}
.knopf:hover { background: var(--honig); }
.linie {
  flex: 1 1 12rem;
  height: 14px;
  border-radius: 8px;
  background: rgba(58, 47, 39, 0.15);
  overflow: hidden;
}
.linie span { display: block; height: 100%; width: 0; background: var(--petrol); transition: width 250ms linear; }
.zeit { font-variant-numeric: tabular-nums; color: var(--tinte-leise); min-width: 5.5rem; }

.hinweis {
  padding: 1rem;
  border-radius: var(--radius);
  background: var(--creme-tief);
  color: var(--tinte-leise);
}

/* Die Geschichtenbuehne: vier Modi, eine ruhige Umschaltung statt
   Scrollstrecke. Nur ein Modus ist je Blick sichtbar. */
.buehne { margin-top: 0.5rem; }
.buehne-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
}
.buehne-tab {
  min-height: 60px;
  min-width: 60px;
  padding: 0 1.15rem;
  border: 2px solid var(--tinte);
  border-radius: var(--radius);
  background: var(--creme);
  color: var(--tinte);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--tempo) ease, color var(--tempo) ease;
}
.buehne-tab:hover { background: var(--creme-tief); }
.buehne-tab[aria-selected="true"] {
  background: var(--petrol);
  border-color: var(--petrol);
  color: var(--creme);
}
.buehne-panel {
  opacity: 0;
  transition: opacity var(--tempo) ease;
}
.buehne-panel.sichtbar { opacity: 1; }
.buehne-panel[hidden] { display: none; }

.zurueck-ins-tal {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  min-height: 60px;
  margin: 2rem auto 0;
  max-width: 16rem;
  padding: 0 1.25rem;
  border-radius: var(--radius);
  background: var(--creme-tief);
  border: 2px solid var(--holz);
  color: var(--tinte);
  font-weight: 700;
  text-decoration: none;
  transition: background-color var(--tempo) ease;
}
.zurueck-ins-tal:hover { background: var(--creme); }

.mitlesen p { margin: 0 0 1rem; }
.mitlesen p.laut { font-family: "Fraunces", Georgia, serif; font-size: 1.2rem; }

.tbd {
  background: #fff3cf;
  border-left: 6px solid var(--honig);
  padding: 0.75rem 1rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 0 0 1rem;
}

.bewohner { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.bewohner li { background: var(--creme-tief); border-radius: var(--radius); padding: 1rem; }
.bewohner strong { display: block; font-family: "Fraunces", Georgia, serif; }

.gegenden { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.gegenden li { border-radius: var(--radius); padding: 1rem; background: var(--creme-tief); border-left: 8px solid var(--gegend-summwald); }
.gegenden li.moor { border-left-color: var(--gegend-moor); }
.gegenden li.berg { border-left-color: var(--gegend-berg); }
.gegenden li.heide { border-left-color: var(--gegend-heide); }
.gegenden li.hoehle { border-left-color: var(--gegend-hoehle); }

.nurleser {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (min-width: 40.01rem) {
  .neue-folge {
    position: absolute;
    left: 50%;
    top: 66%;
    transform: translateX(-50%);
    margin: 0;
    display: inline-flex;
    width: auto;
  }
}

@media (max-width: 40rem) {
  body { font-size: 17px; }
  h1 { font-size: 1.55rem; }
  .zone .zonenname { font-size: 0.75rem; padding: 0.1rem 0.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .zone:hover, .zone[aria-expanded="true"] { transform: none; }
  .kachel a:hover { transform: none; }
}

/* Inhaltsbilder. Seit dem WebP-Umbau steckt das img meist in einem
   picture (WebP-Quelle plus JPG-Fallback), das braucht dieselbe Rundung
   und denselben Abstand wie vorher das nackte img. */
main .huelle > picture,
article > picture {
  display: block;
}
main .huelle > img,
main .huelle > picture img,
article > img,
article > picture img {
  border-radius: var(--radius);
  margin: 0 0 1rem;
}
.welt-bild { max-height: 26rem; width: 100%; object-fit: cover; object-position: center 30%; }

/* Der Film. Gleiche Regeln wie beim Ton: ein Knopf, eine Linie, danach Ruhe. */
.spieler-film {
  display: block;
  padding: 0.5rem;
}
.spieler-film video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  background: var(--tinte);
}
.filmleiste {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.75rem 0.25rem 0.25rem;
}
.leise { color: var(--tinte-leise); margin: 0 0 0.75rem; }

/* Das Bilderbuch zum Blaettern */
.buch-buehne {
  border-radius: var(--radius);
  background: var(--creme-tief);
  padding: 0.5rem;
}
.buch-buehne:focus-visible { outline: 3px solid var(--altrot); outline-offset: 3px; }
.buchseite { margin: 0; }
.buchseite[hidden] { display: none; }
.buchseite img { width: 100%; border-radius: 8px; }
.buch-steuer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.75rem;
}
.buch-knopf {
  min-width: 72px;
  min-height: 72px;
  border-radius: 50%;
  border: 2px solid var(--tinte);
  background: var(--creme);
  color: var(--tinte);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--tempo) ease;
}
.buch-knopf:hover:not(:disabled) { background: var(--honig); }
.buch-knopf:disabled { opacity: 0.35; cursor: default; }
.buch-stand { color: var(--tinte-leise); font-variant-numeric: tabular-nums; }

/* Die Gegenden auf der Weltseite */
.gegenden li h3 { margin: 0 0 0.35rem; }
.gegenden li p { margin: 0 0 0.5rem; }
.gegenden .wer { font-size: 0.95rem; color: var(--tinte-leise); margin: 0; }
.gegenden .still {
  display: inline-block;
  margin-top: 0.35rem;
  padding: 0.1rem 0.6rem;
  border-radius: var(--radius);
  background: var(--creme);
  font-size: 0.85rem;
  color: var(--tinte-leise);
}

/* Lautsprecher-Knopf auf der Karte. Ton ist Opt-in, der Knopf merkt sich nichts
   ausser dem laufenden Besuch. Trefferflaeche ueber 60 Punkt. */
.tonschalter {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  min-height: 60px; min-width: 120px; padding: 0 20px;
  border: 2px solid rgba(90, 70, 50, .35); border-radius: 16px;
  background: rgba(244, 236, 219, .92); color: #4a3a2a;
  font: inherit; font-size: 1rem; cursor: pointer;
}
.tonschalter[aria-pressed="true"] { background: #e8dcc2; border-color: rgba(90,70,50,.6); }
.karte { position: relative; }