/* Dorferlebnispfad: schematische Wegkarte (steht fertig da), Wegweiser-Karten (scroll-snap), Stempelheft.
   Bewegt wird nur transform und opacity. Bei Ruhe steht alles fertig da. */
.pfad { --pfad-rand: 1rem; }
.pfad-kopf { margin-bottom: 1.5rem; }
.pfad-lead { max-width: 40rem; }
.pfad-h { margin: 0 0 .8rem; font-family: var(--schrift-ueberschrift, Georgia, 'Times New Roman', serif); }
.pfad section { margin-block: 2.5rem; }
.pfad-hinweis { margin: .6rem 0 0; font-size: var(--t-klein); color: var(--farbe-text-leise, #6b6254); }

/* Wegkarte */
.wk-rahmen { max-width: 40rem; margin-inline: auto; }
.wk-svg { display: block; width: 100%; height: auto; max-height: 78vh; overflow: visible; }
.wk-grund { fill: var(--farbe-flaeche-2, #efe8d9); stroke: var(--farbe-linie, #d8cfbd); }
.wk-nord path, .wk-nord { stroke: var(--farbe-text-leise, #6b6254); stroke-width: 1.5; fill: var(--farbe-text-leise, #6b6254); font-size: 13px; font-family: sans-serif; }
.wk-nord path { fill: none; }
.wk-weg-grund { stroke: var(--farbe-linie, #d8cfbd); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.wk-weg { stroke: var(--farbe-akzent, #8a3b2a); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.wk-station { cursor: pointer; }
.wk-hit { fill: transparent; }
.wk-kreis { fill: var(--farbe-papier, #f7f3ea); stroke: var(--farbe-akzent, #8a3b2a); stroke-width: 3; }
.wk-nr { fill: var(--farbe-akzent, #8a3b2a); font-size: 15px; font-weight: 700; font-family: sans-serif; pointer-events: none; }
.wk-marke { transform-box: fill-box; transform-origin: center; }
.wk-station:focus { outline: none; }
.wk-station:focus-visible .wk-kreis { stroke: var(--farbe-fokus, #1a5fb4); stroke-width: 5; }
.wk-station.ist-gestempelt .wk-kreis { fill: var(--farbe-akzent, #8a3b2a); }
.wk-station.ist-gestempelt .wk-nr { fill: var(--farbe-auf-akzent, #fff); }
.wk-station.ist-aktuell .wk-marke { transform: scale(1.35); }
.wk-station.ist-aktuell .wk-kreis { stroke-width: 4.5; }

/* Die Wegkarte ist die Rückfallfassung ohne Bühne (ohne WebGL steht das Luftbild-Poster, mit Bühne die Fußspur auf der Karte, Idee 18).
   Sie steht fertig da: die Linie zeichnet sich nicht beim Hereinscrollen, die Stationen kommen nicht nacheinander. Nur die aktive
   Station wird größer, wenn man durch die Wegweiser blättert. */
.wk-marke { transition: transform var(--d-tafel) var(--kurve-setzen); }

/* Wegweiser-Karten */
.ww-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.ww-steuer { display: flex; align-items: center; gap: .7rem; margin-bottom: .8rem; }
.ww-steuer[hidden] { display: none; }
.ww-zaehler { margin: 0; min-width: 8.5rem; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
.ww-knopf {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--farbe-linie, #d8cfbd);
  border-radius: 999px;
  background: var(--farbe-flaeche, #fffdf8);
  color: var(--farbe-text, #1f1a14);
  font: inherit;
  font-size: 1.2rem;
  cursor: pointer;
}
.ww-knopf:hover:not(:disabled) { border-color: var(--farbe-akzent, #8a3b2a); }
.ww-knopf:disabled { color: var(--farbe-text-leise, #6b6254); background: var(--farbe-flaeche-2, #efe8d9); border-style: dashed; cursor: default; }   /* gesperrt: gestrichelt statt blass, die Schrift bleibt gut lesbar */
.ww-knopf:focus-visible { outline: 3px solid var(--farbe-fokus, #1a5fb4); outline-offset: 2px; }

.wegweiser {
  display: flex;
  gap: 1rem;
  margin: 0 calc(var(--pfad-rand) * -1);
  padding: .5rem var(--pfad-rand) 1rem;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--pfad-rand);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.wegweiser:focus-visible { outline: 3px solid var(--farbe-fokus, #1a5fb4); outline-offset: -3px; }
.ww-karte { flex: 0 0 min(84%, 22rem); scroll-snap-align: start; }
.ww-schild { position: relative; display: flex; flex-direction: column; height: 100%; }
.ww-platte {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  align-self: flex-start;
  min-width: 8.5rem;
  margin: 0 0 -1px;
  padding: .45rem 2rem .45rem .9rem;
  background: var(--farbe-akzent, #8a3b2a);
  color: var(--farbe-auf-akzent, #fff);
  font-weight: 700;
  clip-path: polygon(0 0, calc(100% - 1.15rem) 0, 100% 50%, calc(100% - 1.15rem) 100%, 0 100%);
  border-radius: 4px 0 0 0;
}
.ww-nr { font-size: var(--t-klein); letter-spacing: .02em; }
.ww-gestempelt { display: inline-flex; }
.ww-gestempelt[hidden] { display: none; }
.ww-stempel { width: 26px; height: 26px; color: var(--farbe-auf-akzent, #fff); }
.ww-karte.ist-aktuell .ww-platte { filter: brightness(1.12); }
.ww-titel, .ww-bild, .ww-kurz, .ww-fuss { border-inline: 1px solid var(--farbe-linie, #d8cfbd); background: var(--farbe-flaeche, #fffdf8); margin: 0; }
.ww-titel { overflow-wrap: anywhere; hyphens: auto; padding: .9rem 1rem .4rem; border-top: 1px solid var(--farbe-linie, #d8cfbd); border-radius: 0 var(--radius, 10px) 0 0; font-family: var(--schrift-ueberschrift, Georgia, 'Times New Roman', serif); font-size: 1.25rem; line-height: 1.25; }
.ww-titel a { display: inline-block; padding-block: 11px; margin-block: -11px; color: inherit; text-decoration: none; }   /* Tippziel mindestens 44 px, ohne die Zeile zu verlängern */
.ww-titel a:hover { text-decoration: underline; }
.ww-bild { padding: .2rem 1rem .4rem; }
.ww-bild img { display: block; width: 100%; height: auto; max-height: 11rem; object-fit: contain; background: var(--farbe-flaeche-2, #efe8d9); border-radius: 6px; }
.ww-kurz { flex: 1 1 auto; padding: .2rem 1rem .6rem; font-size: var(--t-klein); line-height: 1.5; }
.ww-fuss { padding: .3rem 1rem 1rem; border-bottom: 1px solid var(--farbe-linie, #d8cfbd); border-radius: 0 0 var(--radius, 10px) var(--radius, 10px); }
.ww-link { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; text-decoration: none; color: var(--farbe-akzent, #8a3b2a); font-weight: 700; }
.ww-karte.ist-aktuell .ww-titel, .ww-karte.ist-aktuell .ww-bild, .ww-karte.ist-aktuell .ww-kurz, .ww-karte.ist-aktuell .ww-fuss { border-color: var(--farbe-akzent, #8a3b2a); }

/* Stempelheft */
.heft { padding: 1.2rem; border: 1px solid var(--farbe-linie, #d8cfbd); border-radius: var(--radius, 10px); background: var(--farbe-flaeche, #fffdf8); }
.heft-stand { margin: 0 0 1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.heft-felder { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr)); gap: .6rem; margin: 0; padding: 0; list-style: none; }
.heft-link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: .3rem;
  flex: 1 1 auto;
  min-height: 8.5rem;
  padding: 1.5rem .3rem .6rem;
  border: 1px dashed var(--farbe-linie, #d8cfbd);
  border-radius: 8px;
  background: var(--farbe-papier, #f7f3ea);
  color: var(--farbe-text, #1f1a14);
  text-align: center;
  text-decoration: none;
}
.heft-link:hover { border-color: var(--farbe-akzent, #8a3b2a); }
.heft-link:focus-visible { outline: 3px solid var(--farbe-fokus, #1a5fb4); outline-offset: 2px; }
.heft-nr { position: absolute; top: .35rem; left: .5rem; font-size: var(--t-klein); font-weight: 700; color: var(--farbe-text-leise, #6b6254); }
.heft-feld { display: flex; }
.heft-name { order: 3; font-size: var(--t-klein); line-height: 1.25; overflow-wrap: anywhere; }
.heft-abdruck, .heft-leer { order: 2; }
.heft-abdruck, .heft-leer { display: flex; align-items: center; justify-content: center; width: 4.2rem; height: 4.2rem; }
.heft-abdruck { display: none; color: var(--farbe-akzent, #8a3b2a); }
.heft-stempel { width: 100%; height: 100%; transform: rotate(var(--st-dreh, 0deg)); }
.heft-leer::before { content: ""; width: 3.4rem; height: 3.4rem; border: 2px dashed var(--farbe-linie, #d8cfbd); border-radius: 50%; }
.heft-feld.ist-gestempelt .heft-abdruck { display: flex; }
.heft-feld.ist-gestempelt .heft-leer { display: none; }
.heft-feld.ist-gestempelt .heft-link { border-style: solid; border-color: var(--farbe-akzent, #8a3b2a); }
.heft-fertig { display: flex; align-items: center; gap: 1rem; margin-top: 1.2rem; padding: .9rem 1rem; border-left: 4px solid var(--farbe-akzent, #8a3b2a); background: var(--farbe-flaeche-2, #efe8d9); }
.heft-fertig[hidden] { display: none; }
.heft-fertig p { margin: 0; }
.heft-haken { flex: 0 0 auto; color: var(--farbe-akzent, #8a3b2a); }
.heft-hinweis { margin: 1rem 0 0; font-size: var(--t-klein); color: var(--farbe-text-leise, #6b6254); }
.heft-leeren {
  min-height: 44px;
  margin-left: .5rem;
  padding: 0 .9rem;
  border: 1px solid var(--farbe-linie, #d8cfbd);
  border-radius: 999px;
  background: transparent;
  color: var(--farbe-text, #1f1a14);
  font: inherit;
  font-size: var(--t-klein);
  cursor: pointer;
}
.heft-leeren[hidden] { display: none; }
.heft-leeren:focus-visible { outline: 3px solid var(--farbe-fokus, #1a5fb4); outline-offset: 2px; }

@media (min-width: 860px) {
  .pfad { --pfad-rand: 0px; }
  .ww-karte { flex-basis: 21rem; }
}

/* Ruhe: keine Bewegung, alles steht fertig */
@media (prefers-reduced-motion: reduce) {
  .pfad *, .pfad *::before, .pfad *::after { animation: none !important; transition: none !important; }
  .wegweiser { scroll-behavior: auto; }
}
html[data-bewegung="ruhig"] .pfad *, html[data-bewegung="ruhig"] .pfad *::before, html[data-bewegung="ruhig"] .pfad *::after { animation: none !important; transition: none !important; }