@font-face { font-family: 'Bricolage'; src: url('../assets/fonts/bricolage-var.woff2') format('woff2'); font-weight: 400 800; font-display: swap; }
@font-face { font-family: 'Atkinson'; src: url('../assets/fonts/atkinson-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Atkinson'; src: url('../assets/fonts/atkinson-400i.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Atkinson'; src: url('../assets/fonts/atkinson-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --grund: #e8ecef;
  --grund-tief: #dde3e7;
  --flaeche: #f5f7f8;
  --karte: #ffffff;
  --tinte: #14211b;
  --tinte-2: #3e4c45;
  --leise: #55625b;
  --linie: #c9d2ce;
  --moos: #24583f;
  --moos-tief: #173d2b;
  --moos-hell: #d9e8dd;
  --fokus: #0b6bcb;
  --duerre: #a86a00;
  --gefahr: #b03a17;

  /* Kennzahlen: geprüft mit dem Palette-Validator (CVD, Kontrast) */
  --c-natur: #3f8a2e;
  --c-klima: #1f6fa8;
  --c-holz: #b8621b;
  --c-stabil: #6b4fb3;

  /* Baumarten in fester Reihenfolge, immer mit Namen beschriftet */
  --a-fichte: #2a78d6; --a-kiefer: #eb6834; --a-buche: #1baf7a; --a-eiche: #eda100;
  --a-tanne: #e87ba4; --a-douglasie: #008300; --a-ahorn: #6250d6; --a-birke: #e34948;

  --schrift: 'Atkinson', 'Atkinson Hyperlegible', system-ui, sans-serif;
  --display: 'Bricolage', 'Bricolage Grotesque', 'Atkinson', system-ui, sans-serif;
  --r: 14px;
  --r-gross: 22px;
  --schatten: 0 1px 2px rgb(20 33 27 / .06), 0 8px 24px -12px rgb(20 33 27 / .18);
  --rand: clamp(16px, 4vw, 48px);
  --max: 1240px;
  --tempo: 420ms;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: 106.25%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--grund); color: var(--tinte);
  font-family: var(--schrift); line-height: 1.5; min-height: 100dvh;
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; border-radius: 6px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprite { position: absolute; }
.ico { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -0.2em; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--tinte); color: #fff; padding: 10px 16px; border-radius: 10px; z-index: 50; }
.skip:focus { top: 12px; }

h1, h2, h3 { text-wrap: balance; font-family: var(--display); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 .5em; font-weight: 700; }
h2, .titel { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem); max-width: 22ch; }
h3, h2.klein { font-size: 1.1rem; letter-spacing: -0.01em; max-width: none; }
p { margin: 0 0 1em; }
.kicker { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--moos); margin-bottom: .7em; }
.lead { font-size: 1.12rem; color: var(--tinte-2); max-width: 60ch; }
.hinweis { color: var(--leise); font-size: .95rem; margin: 0; }

/* Rahmen */
.app { min-height: 100dvh; display: flex; flex-direction: column; overflow-x: clip; }
.kopf {
  display: flex; align-items: center; gap: 16px; padding: 14px var(--rand);
  max-width: var(--max); width: 100%; margin: 0 auto;
}
.marke { display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; padding: 4px; font-family: var(--display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; }
.fortschritt { display: flex; gap: 6px; list-style: none; margin: 0 auto; padding: 0; counter-reset: s; }
.fortschritt li { font-size: .8rem; color: var(--leise); display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 99px; }
.fortschritt li::before { counter-increment: s; content: counter(s); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--linie); font-size: .72rem; font-weight: 700; }
.fortschritt li.erledigt::before { background: var(--moos); border-color: var(--moos); color: #fff; content: '✓'; }
.fortschritt li.aktiv { color: var(--tinte); font-weight: 700; background: var(--karte); }
.fortschritt li.aktiv::before { border-color: var(--tinte); }
.app[data-screen="start"] .fortschritt, .app[data-screen="daten"] .fortschritt, .app[data-screen="ende"] .fortschritt { visibility: hidden; }
@media (max-width: 760px) {
  .fortschritt li { font-size: 0; gap: 0; padding: 2px; }
  .fortschritt li.aktiv { font-size: .8rem; gap: 6px; padding: 4px 10px 4px 4px; }
  .kopf .knopf-text { display: none; }
}

main { flex: 1; width: 100%; max-width: var(--max); margin: 0 auto; padding: 8px var(--rand) 40px; outline: none; }
.screen { animation: auftritt var(--tempo) cubic-bezier(.2,.7,.2,1) both; }
.screen-schmal { max-width: 760px; }
@keyframes auftritt { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.fuss { padding: 18px var(--rand) 24px; text-align: center; color: var(--leise); font-size: .85rem; }
.fuss p { margin: 0; }
.fuss a { color: inherit; }

/* Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 24px; border-radius: var(--r);
  background: var(--moos-tief); color: #fff; border: 2px solid var(--moos-tief);
  font-weight: 700; font-size: 1.02rem; transition: transform .15s, background .2s;
}
.knopf:hover { background: var(--moos); border-color: var(--moos); }
.knopf:active { transform: translateY(1px); }
.knopf[disabled] { opacity: .45; cursor: not-allowed; }
.knopf-zweit { background: transparent; color: var(--moos-tief); }
.knopf-zweit:hover { background: var(--moos-hell); color: var(--moos-tief); }
.knopf-gross { min-height: 60px; padding: 14px 30px; font-size: 1.12rem; }
.knopf-weit { width: 100%; }
.knopf-text { background: none; border: 0; padding: 10px 6px; color: var(--moos-tief); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.knopf-text:hover { color: var(--moos); }
.knopf-rund { width: 60px; height: 60px; border-radius: 50%; border: 0; background: var(--moos-tief); color: #fff; display: grid; place-items: center; flex: none; }
.knopf-rund .ico { width: 26px; height: 26px; fill: currentColor; stroke-width: 0; }
.knopf-rund[data-laeuft="ja"] .ico { fill: none; stroke-width: 3; }
.knopf-x { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--flaeche); display: grid; place-items: center; }
.knopfreihe { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 28px; }
.knopfreihe-ende { justify-content: space-between; border-top: 1px solid var(--linie); padding-top: 22px; }
.knopfreihe-klein { margin-top: 8px; gap: 0 14px; }
.chip { display: inline-block; background: var(--karte); border: 1px solid var(--linie); border-radius: 99px; padding: 6px 14px; font-size: .88rem; color: var(--tinte-2); margin: 0; }

/* Start */
.screen-start { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: center; min-height: calc(100dvh - 170px); position: relative; }
@media (min-width: 900px) { .screen-start { grid-template-columns: 1.1fr 1fr; } .start-buehne { order: 2; } }
.start-buehne { position: relative; aspect-ratio: 1; width: min(100%, 620px); justify-self: center; }
.start-ring {
  position: absolute; inset: -4%; border-radius: 50%;
  background: repeating-radial-gradient(circle at 50% 50%, transparent 0 22px, rgb(36 88 63 / .09) 22px 23.5px, transparent 23.5px 31px, rgb(36 88 63 / .06) 31px 32px);
  mask-image: radial-gradient(circle, #000 55%, transparent 71%);
  animation: ringe 60s linear infinite;
}
@keyframes ringe { to { transform: rotate(360deg); } }
.start-schwebe { position: absolute; inset: 0; animation: schweben 7s ease-in-out infinite; }
.start-bild img { position: relative; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 22px 24px rgb(20 33 27 / .14)); }
@keyframes schweben { 50% { transform: translateY(-10px); } }
.start-text h1 { font-size: clamp(3.6rem, 2rem + 8vw, 7.4rem); letter-spacing: -0.045em; line-height: .9; margin-bottom: .25em; font-weight: 800; }
.start-text h1 span { color: var(--moos); }
.start-text .lead { font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); }
.start-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 30px; }
.fakten { margin: 0; color: var(--leise); }
.zahl, .fakten, .zeitleiste-marken, .geschehen h2 span, .pflanz-status, .vgl-legende, .chip, .mix-legende, .vgl-punkt span { font-family: var(--display); font-variant-numeric: tabular-nums; }
.station-hinweis { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; font-family: var(--display); font-size: 1.4rem; color: var(--moos-tief); animation: puls 2.4s ease-in-out infinite; }
@keyframes puls { 50% { opacity: .35; } }

/* Listen */
.liste-haken { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 10px; }
.liste-haken li { padding-left: 34px; position: relative; }
.liste-haken li::before { content: ''; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--moos-hell) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23173d2b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat; }

/* Ziele */
.ziele { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; margin-top: 22px; }
.ziele-klein { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.ziel {
  position: relative; display: grid; grid-template-columns: 48px 1fr 40px; align-items: center; gap: 14px;
  text-align: left; background: var(--karte); border: 2px solid transparent; border-radius: var(--r); padding: 16px 16px; box-shadow: var(--schatten);
  min-height: 84px; transition: border-color .2s, transform .15s;
}
.kopf > .knopf-text { white-space: nowrap; }
.ziel:hover { border-color: var(--linie); }
.ziel .ico { width: 30px; height: 30px; }
.ziel-ico { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--farbe) 14%, white); color: var(--farbe); }
.ziel strong { display: block; font-family: var(--display); font-size: 1.15rem; }
.ziel span.t { color: var(--tinte-2); font-size: .95rem; }
.ziel-rang { width: 40px; height: 40px; border-radius: 50%; border: 2px dashed var(--linie); display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 1.2rem; color: var(--leise); }
.ziel[aria-pressed="true"] { border-color: var(--farbe); }
.ziel[aria-pressed="true"] .ziel-rang { border: 0; background: var(--farbe); color: #fff; }
.ziele-klein .ziel { min-height: 64px; padding: 10px 14px; grid-template-columns: 40px 1fr 36px; }
.ziele-klein .ziel-ico { width: 40px; height: 40px; }
.ziele-klein .ziel span.t { display: none; }

/* Standort */
.karten-auswahl { border: 0; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 14px; }
.ort { position: relative; display: block; background: var(--karte); border-radius: var(--r-gross); padding: 18px 20px 20px; box-shadow: var(--schatten); border: 2px solid transparent; cursor: pointer; }
.ort:has(input:checked) { border-color: var(--moos-tief); }
.ort:has(input:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 3px; }
.ort input { position: absolute; opacity: 0; }
.ort img { width: 100%; aspect-ratio: 4/3; object-fit: contain; margin: -6px 0 6px; }
.ort strong { font-family: var(--display); font-size: 1.35rem; display: block; }
.ort .wo { color: var(--moos); font-weight: 700; font-size: .9rem; display: block; margin-bottom: 6px; }
.ort .t { color: var(--tinte-2); font-size: .95rem; display: block; }
.ort-werte { display: grid; gap: 4px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--linie); }
.ort-wert { display: flex; justify-content: space-between; align-items: center; font-size: .86rem; color: var(--tinte-2); }
.punkte5 { display: flex; gap: 3px; }
.punkte5 i { width: 14px; height: 8px; border-radius: 2px; background: var(--grund-tief); }
.punkte5 i.an { background: var(--moos); }
.ort-haken { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--linie); display: grid; place-items: center; background: var(--karte); }
.ort:has(input:checked) .ort-haken { background: var(--moos-tief); border-color: var(--moos-tief); color: #fff; }
.ort-haken .ico { opacity: 0; stroke-width: 3; width: 18px; height: 18px; }
.ort:has(input:checked) .ort-haken .ico { opacity: 1; }

.klima-wahl { border: 0; padding: 0; margin: 30px 0 0; }
.klima-wahl legend { font-family: var(--display); font-weight: 700; font-size: 1.25rem; margin-bottom: 12px; }
.klima-optionen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.klima { display: flex; gap: 14px; align-items: flex-start; background: var(--karte); border: 2px solid transparent; border-radius: var(--r); padding: 16px 18px; cursor: pointer; box-shadow: var(--schatten); }
.klima:has(input:checked) { border-color: var(--moos-tief); }
.klima:has(input:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 3px; }
.klima input { margin-top: 5px; width: 20px; height: 20px; accent-color: var(--moos-tief); flex: none; }
.klima strong { display: block; }
.klima span { color: var(--tinte-2); font-size: .95rem; }

/* Wege */
.wege { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 14px; margin-top: 24px; }
.weg { background: var(--karte); border-radius: var(--r-gross); box-shadow: var(--schatten); padding: 16px 18px 18px; display: flex; flex-direction: column; position: relative; }
.weg-bild { aspect-ratio: 1; margin: -8px -6px 4px; position: relative; }
.weg-bild img { width: 100%; height: 100%; object-fit: contain; }
.weg-bild .mini-wald { position: absolute; inset: 0; }
.weg-nr { position: absolute; z-index: 5; top: 4px; left: 4px; font-family: var(--display); font-weight: 800; font-size: 2.3rem; color: rgb(20 33 27 / .32); line-height: 1; }
.weg h2.klein { font-size: 1.3rem; margin-bottom: .25em; }
.weg .weg-frage { color: var(--moos); font-weight: 700; font-size: .95rem; margin-bottom: .4em; }
.weg .t { color: var(--tinte-2); font-size: .93rem; flex: 1; }
.weg .knopf { margin-top: 10px; }
.weg-gesehen { display: none; align-self: flex-start; align-items: center; gap: 4px; background: var(--moos-hell); color: var(--moos-tief); font-size: .78rem; font-weight: 700; padding: 4px 10px 4px 6px; border-radius: 99px; margin-bottom: 8px; }
.weg[data-gesehen="ja"] .weg-gesehen { display: inline-flex; }
.mini-kz { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0 2px; }
.mini-kz div { font-size: .72rem; color: var(--leise); }
.mini-kz i { display: block; height: 6px; border-radius: 3px; background: var(--grund-tief); margin-top: 3px; overflow: hidden; }
.mini-kz i b { display: block; height: 100%; background: var(--farbe); }

/* Zeitreise */
.screen-zeit { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 32px; grid-template-areas: "kopf" "ebenen" "buehne" "erz" "steuerung" "panel"; }
.screen-zeit .ebenen-box { grid-area: ebenen; }
.screen-zeit .erzaehlung { grid-area: erz; }
@media (min-width: 1000px) {
  .screen-zeit { grid-template-columns: minmax(0, 1.25fr) minmax(340px, 1fr); grid-template-areas: "kopf kopf" "ebenen panel" "buehne panel" "erz panel" "steuerung panel" ". panel"; grid-template-rows: auto auto auto auto auto 1fr; align-items: start; }
  /* die letzte, dehnbare Zeile nimmt die Höhe des Panels auf, so bleiben Bild und Steuerung zusammen */
}
.zeit-kopf { grid-area: kopf; display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; }
.zeit-kopf h1 { margin: 0; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); }
.zeit-kopf .kicker { margin-bottom: .2em; }
.zeit-kopf .chip { margin-left: auto; }
.nur-schmal { display: none; }
.zeit-buehne { grid-area: buehne; position: relative; z-index: 1; aspect-ratio: 1; max-height: min(66vh, 680px); width: 100%; justify-self: center; display: grid; place-items: center; }
/* Breite Bildschirme: Bild nach der Fensterhöhe, damit Erzählzeile und Steuerung ohne Scrollen darunter passen */
@media (min-width: 1000px) { .zeit-buehne { max-height: none; width: min(100%, max(440px, calc(100dvh - 300px))); } }
.jahr { position: absolute; inset: 0; display: grid; place-items: start center; pointer-events: none; overflow: hidden; }
.jahr span { font-family: var(--display); font-weight: 800; font-size: clamp(5rem, 22vw, 15rem); letter-spacing: -0.06em; line-height: 1; color: transparent; -webkit-text-stroke: 2px rgb(20 33 27 / .16); font-variant-numeric: tabular-nums; margin-top: -2%; transition: -webkit-text-stroke-color .7s ease; }
/* Solange die Zahl zählt, ist sie etwas präsenter; danach kehrt sie langsam zur ruhigen Hintergrund-Optik zurück */
.jahr.zaehlt span { -webkit-text-stroke-color: rgb(36 88 63 / .42); transition-duration: .3s; }
.diorama { position: relative; margin: 0; width: 96%; aspect-ratio: 1; }
#wald, #ergebnis-wald { position: absolute; inset: 0; }
.ergebnis-bild > #ergebnis-wald { position: relative; }
.ebene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 20px rgb(20 33 27 / .12)); transition: opacity 900ms ease; }
.ebene-luft, .start-luft { position: absolute; inset: 0; width: 100%; height: 100%; filter: none; pointer-events: none; opacity: 0; transition: opacity 1.2s; }
.ebene-luft.an, .start-luft.an { opacity: 1; }
.ebene-b { opacity: 0; }
.start-schwebe .start-wald { position: absolute; inset: 0; opacity: 0; transition: opacity .7s; }
.start-schwebe .start-wald.an { opacity: 1; }
.start-schwebe .start-wald.blende { opacity: 0; }
.start-schwebe:has(.start-wald.an) .start-bild { opacity: 0; transition: opacity .7s; }
.start-jahr { position: absolute; left: 50%; bottom: 2%; transform: translateX(-50%); font-family: var(--display); font-weight: 800; font-size: clamp(1rem, 1rem + 1vw, 1.6rem); color: var(--moos-tief); background: var(--karte); padding: 3px 14px; border-radius: 99px; box-shadow: var(--schatten); font-variant-numeric: tabular-nums; }
.start-jahr:empty { display: none; }
.diorama.fehlt::after { content: attr(data-alt); position: absolute; inset: 14%; display: grid; place-items: center; text-align: center; padding: 20px; border-radius: 24px; background: var(--grund-tief); color: var(--tinte-2); font-size: .95rem; }
/* Erzählzeile: was in diesem Zeitraum passiert ist, bleibt stehen, bis der nächste kommt */
.erzaehlung { position: relative; z-index: 3; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; margin: -34px auto 0; width: min(100%, 640px); background: var(--karte); border-radius: var(--r); padding: 10px 14px 10px 10px; box-shadow: var(--schatten); border-left: 5px solid var(--ton, var(--moos)); }
.erzaehlung:empty { display: none; }
.erzaehlung .ico { width: 34px; height: 34px; padding: 6px; border-radius: 10px; color: #fff; background: var(--ton, var(--moos)); }
.erzaehlung p { margin: 0; font-size: .95rem; color: var(--tinte-2); line-height: 1.4; }
.erzaehlung strong { display: block; color: var(--tinte); font-family: var(--display); font-size: .92rem; }
.erzaehlung .erz-mehr { color: var(--leise); }
.erzaehlung.neu { animation: erz-neu .5s cubic-bezier(.2,.7,.2,1); }
.erzaehlung.ernst.neu .ico { animation: erz-puls .9s ease 2; }
@keyframes erz-neu { from { opacity: .2; transform: translateY(6px); } }
@keyframes erz-puls { 50% { transform: scale(1.15); } }

.zeit-steuerung { grid-area: steuerung; display: flex; align-items: center; gap: 16px; background: var(--karte); border-radius: var(--r-gross); padding: 12px 18px 12px 12px; box-shadow: var(--schatten); }
.steuer-jahr { display: none; font-family: var(--display); font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; min-width: 2.6em; }
/* Am Ende eine eigene Zeile mit Weiter und, wenn sinnvoll, Selbst pflanzen */
.zeit-ende { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 16px; animation: auftritt .4s both; }
.zeitleiste { flex: 1 1 240px; position: relative; padding-bottom: 26px; }
.zeit-steuerung { flex-wrap: wrap; }
.zeitleiste input[type=range] { width: 100%; height: 36px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; }
.zeitleiste input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--moos) var(--wert, 0%), var(--grund-tief) var(--wert, 0%)); }
.zeitleiste input[type=range]::-moz-range-track { height: 8px; border-radius: 4px; background: var(--grund-tief); }
.zeitleiste input[type=range]::-moz-range-progress { height: 8px; border-radius: 4px; background: var(--moos); }
.zeitleiste input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -11px; border-radius: 50%; background: var(--karte); border: 4px solid var(--moos-tief); box-shadow: var(--schatten); }
.zeitleiste input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--karte); border: 4px solid var(--moos-tief); }
.zeitleiste-marken { list-style: none; margin: 0; padding: 0 15px; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; }
.zeitleiste-marken li { position: absolute; transform: translateX(-50%); font-size: .74rem; color: var(--leise); font-variant-numeric: tabular-nums; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.zeitleiste-marken li.ab { color: var(--tinte); font-weight: 700; }
.zeitleiste-marken .punkte { display: flex; gap: 2px; height: 6px; }
.zeitleiste-marken .punkte i { width: 6px; height: 6px; border-radius: 50%; background: var(--ton); }

.zeit-panel { grid-area: panel; display: grid; gap: 14px; }
.kennzahlen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
/* Die Karten sind Knöpfe: 5 px Rahmen in einer hellen Abmischung ihrer Farbe, Pfeil oben rechts, beim Drücken eingedrückt.
   Das Polster ist um 3 px kleiner als früher, damit die dickere Linie die Karte nicht größer macht. */
.kennzahlen { position: relative; z-index: 1; }
.kz { position: relative; background: var(--karte); border-radius: var(--r); padding: 9px 11px; box-shadow: var(--schatten); border: 5px solid color-mix(in srgb, var(--farbe) 32%, var(--karte)); text-align: left; display: block; width: 100%; cursor: pointer;
  transition: border-color .2s, background-color .2s, box-shadow .2s, transform .12s; }
@media (hover: hover) { .kz:hover { border-color: color-mix(in srgb, var(--farbe) 62%, var(--karte)); box-shadow: 0 1px 2px rgb(20 33 27 / .08), 0 10px 22px -10px rgb(20 33 27 / .3); } }
.kz:active { transform: translateY(1px) scale(.99); box-shadow: var(--schatten); }
.kz[aria-expanded="true"] { border-color: var(--farbe); background: color-mix(in srgb, var(--farbe) 6%, var(--karte)); }
.kz:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; border-color: var(--farbe); border-radius: var(--r); }
.kz-chevron { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; align-items: center; justify-content: center; border-radius: 50%; color: var(--farbe);
  background: color-mix(in srgb, var(--farbe) 14%, var(--karte)); transform: rotate(90deg); transition: transform .4s cubic-bezier(.2,.8,.2,1), background-color .2s, color .2s; }
.kz-chevron .ico { width: 16px; height: 16px; stroke-width: 2.6; }
.kz[aria-expanded="true"] .kz-chevron { transform: rotate(-90deg); background: var(--farbe); color: #fff; }
.kz > .kz-kopf { padding-right: 28px; }
.kz > span { display: flex; }
.kz-kurz { display: none; }
.kz-erklaerung { position: relative; margin: -4px 0 0; padding: 10px 14px; border-radius: var(--r); background: var(--karte); border-left: 4px solid var(--farbe); font-size: .92rem; color: var(--tinte-2); box-shadow: var(--schatten); }
/* Zeiger oben: ein Dreieck in der Farbe der Karte, das unter der geöffneten Karte steht und beim Wechsel mitgleitet */
.kz-zeiger { position: absolute; top: -10px; left: -10px; width: 20px; height: 10px; background: var(--farbe); clip-path: polygon(50% 0, 0 100%, 100% 100%); pointer-events: none; transition: transform .38s cubic-bezier(.2,.8,.2,1); }
.kz-kopf { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .92rem; color: var(--tinte-2); }
.kz-kopf .ico { color: var(--farbe); }
.kz-wert { font-family: var(--display); font-weight: 800; font-size: 2rem; line-height: 1.1; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 8px; }
.kz-delta { font-family: var(--schrift); font-size: .82rem; font-weight: 700; }
.kz-delta.plus { color: #2d6a1f; }
.kz-delta.minus { color: var(--gefahr); }
.kz > .kz-balken { display: block; height: 8px; border-radius: 4px; background: var(--grund-tief); overflow: hidden; margin-top: 4px; }
.kz-balken b { display: block; height: 100%; width: var(--w); background: var(--farbe); transition: width .7s cubic-bezier(.2,.7,.2,1); border-radius: 4px; }

.geschehen, .zusammensetzung, .bewohner { background: var(--karte); border-radius: var(--r); padding: 14px 16px; box-shadow: var(--schatten); }
.geschehen h2, .zusammensetzung h2, .bewohner h2 { font-size: 1rem; margin-bottom: .6em; }
.geschehen h2 span { color: var(--leise); font-family: var(--schrift); font-weight: 400; }
.geschehen-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; min-height: 64px; }
.geschehen-liste li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; font-size: .96rem; animation: auftritt .4s both; }
.geschehen-liste .ico { width: 34px; height: 34px; padding: 6px; border-radius: 10px; color: #fff; background: var(--ton, var(--moos)); }
.geschehen-liste strong { display: block; font-size: .85rem; letter-spacing: .02em; }
.balken-mix { display: flex; gap: 2px; height: 22px; }
.balken-mix i { display: block; height: 100%; background: var(--farbe); transition: flex-basis .7s; min-width: 3px; }
.balken-mix i:first-child { border-radius: 4px 0 0 4px; }
.balken-mix i:last-child { border-radius: 0 4px 4px 0; }
.balken-mix i.luecke, .mix-legende i.luecke { background: repeating-linear-gradient(-45deg, var(--linie) 0 3px, var(--flaeche) 3px 6px); }
.mix-legende { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .85rem; color: var(--tinte-2); }
.mix-legende li { display: flex; align-items: center; gap: 6px; }
.mix-legende i { width: 12px; height: 12px; border-radius: 3px; background: var(--farbe); }
.mix-legende .jungwuchs { flex-basis: 100%; color: var(--leise); }

/* Bauen */
.bauen-raster { display: grid; gap: 20px; margin-top: 22px; grid-template-columns: minmax(0, 1fr); }
.bauen-raster > * { min-width: 0; }
@media (min-width: 1100px) { .bauen-raster { grid-template-columns: 300px minmax(0, 1fr) 300px; align-items: start; } }
.palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
@media (min-width: 1100px) { .palette { grid-template-columns: 1fr 1fr; } }
.art {
  position: relative; background: var(--karte); border: 2px solid transparent; border-radius: var(--r); padding: 8px 8px 10px; text-align: center;
  box-shadow: var(--schatten); display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 44px;
}
.art { width: 100%; }
.art img { width: 76px; height: 76px; object-fit: contain; }
.art .n { font-weight: 700; font-size: .92rem; line-height: 1.2; }
.art .w { font-size: .76rem; color: var(--leise); }
.art[aria-checked="true"] { border-color: var(--farbe); background: color-mix(in srgb, var(--farbe) 9%, white); }
.art-info { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: transparent; color: var(--leise); display: grid; place-items: center; }
.art-info:hover { color: var(--tinte); background: var(--flaeche); }
.eigenschaften { display: flex; gap: 3px; margin-top: 4px; }
.eigenschaften span { width: 8px; height: 8px; border-radius: 50%; background: var(--grund-tief); }

.pflanzflaeche-wrap { background: var(--karte); border-radius: var(--r-gross); padding: 18px; box-shadow: var(--schatten); }
.pflanzflaeche {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; padding: 18px; border-radius: 18px;
  background: radial-gradient(circle at 30% 20%, #7a5a3a 0 1px, transparent 1.5px) 0 0/18px 18px, linear-gradient(160deg, #5c4630, #3e2f20);
}
.platz {
  aspect-ratio: 1; border-radius: 50%; border: 2px dashed rgb(255 255 255 / .35); background: rgb(0 0 0 / .18);
  display: grid; place-items: center; position: relative; color: rgb(255 255 255 / .75); font-size: .74rem; padding: 0; transition: transform .2s;
}
.platz:hover { transform: scale(1.04); border-color: rgb(255 255 255 / .7); }
.platz img { position: absolute; inset: -14%; width: 128%; height: 128%; object-fit: contain; filter: drop-shadow(0 6px 4px rgb(0 0 0 / .35)); animation: einpflanzen .45s cubic-bezier(.3,1.5,.5,1) both; }
.platz[data-art] { border-style: solid; border-color: var(--farbe); background: color-mix(in srgb, var(--farbe) 40%, transparent); }
.platz .platz-n { font-size: .7rem; font-weight: 700; color: #fff; padding: 4px; text-align: center; overflow-wrap: anywhere; line-height: 1.1; }
@keyframes einpflanzen { from { transform: scale(.3) translateY(20%); opacity: 0; } }
.pflanz-status { margin: 14px 0 0; font-weight: 700; }
.ausgangslage { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--linie); display: grid; grid-template-columns: minmax(0, 220px) 1fr; gap: 16px; align-items: center; }
.ausgangslage img { width: 100%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 14px 14px rgb(20 33 27 / .18)); }
.ausgangslage figcaption { color: var(--tinte-2); font-size: .95rem; }
@media (max-width: 520px) { .ausgangslage { grid-template-columns: 120px 1fr; } }
.palette > div { display: flex; }
.palette .art { height: 100%; }
.pflanz-status span { font-weight: 400; color: var(--tinte-2); display: block; }

.stellschrauben { display: grid; gap: 12px; }
.stellschraube { border: 0; margin: 0; padding: 14px 16px; background: var(--karte); border-radius: var(--r); box-shadow: var(--schatten); }
.stellschraube legend { font-weight: 700; padding: 0; float: left; width: 100%; margin-bottom: 4px; }
.stellschraube p { clear: both; font-size: .86rem; color: var(--leise); margin: 0 0 8px; }
.segment { display: flex; flex-wrap: wrap; gap: 6px; }
.segment label { flex: 1 1 auto; position: relative; }
.segment input { position: absolute; opacity: 0; inset: 0; }
.segment span { display: block; text-align: center; padding: 9px 10px; border-radius: 10px; border: 1.5px solid var(--linie); font-size: .9rem; min-height: 44px; display: grid; place-items: center; cursor: pointer; }
.segment input:checked + span { background: var(--moos-tief); border-color: var(--moos-tief); color: #fff; font-weight: 700; }
.segment input:focus-visible + span { outline: 3px solid var(--fokus); outline-offset: 2px; }

/* Ergebnis */
.ergebnis-raster { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .ergebnis-raster { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } .ergebnis-bild { position: sticky; top: 16px; } }
.ergebnis-bild { margin: 0; }
.ergebnis-bild img { width: 100%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 18px 20px rgb(20 33 27 / .12)); }
.ergebnis-bild figcaption { text-align: center; color: var(--tinte-2); font-size: .95rem; }
.passung { font-size: 1.18rem; background: var(--karte); border-radius: var(--r); padding: 16px 18px; box-shadow: var(--schatten); }
.passung strong { font-family: var(--display); font-size: 2.2rem; display: block; line-height: 1.1; }
.vergleich { display: grid; gap: 14px; margin-top: 14px; }
.vgl { background: var(--karte); border-radius: var(--r); padding: 14px 16px 12px; box-shadow: var(--schatten); }
.vgl-kopf { display: flex; justify-content: space-between; gap: 10px; font-weight: 700; }
.vgl-kopf .ico { color: var(--farbe); margin-right: 6px; }
.vgl-kopf .du { font-family: var(--display); font-size: 1.3rem; color: var(--farbe); }
.vgl-skala { position: relative; height: 40px; margin: 18px 6px 0; }
.vgl-skala::before { content: ''; position: absolute; left: 0; right: 0; top: 18px; height: 4px; border-radius: 2px; background: var(--grund-tief); }
.vgl-punkt { position: absolute; top: 12px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--karte); border: 2px solid var(--leise); }
.vgl-punkt span { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); font-size: .7rem; color: var(--leise); white-space: nowrap; }
.vgl-punkt.oben span { top: -21px; }
.vgl-punkt.du { width: 26px; height: 26px; margin-left: -13px; top: 7px; background: var(--farbe); border: 3px solid var(--karte); box-shadow: 0 0 0 2px var(--farbe); z-index: 2; }
.vgl-legende { font-size: .82rem; color: var(--leise); margin: 6px 0 0; }
.ziele-nachher { margin-top: 30px; }
.ziele-nachher h2.klein { font-size: 1.3rem; }

/* Ende */
.umfrage { display: grid; gap: 18px; margin: 18px 0; }
.frage { border: 0; margin: 0; padding: 16px 18px; background: var(--karte); border-radius: var(--r); box-shadow: var(--schatten); }
.frage legend { font-weight: 700; padding: 0; margin-bottom: 10px; float: left; width: 100%; }
.likert { clear: both; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.likert label { position: relative; }
.likert input { position: absolute; opacity: 0; }
.likert span { display: grid; place-items: center; min-height: 52px; border-radius: 10px; border: 1.5px solid var(--linie); font-weight: 700; font-size: 1.1rem; cursor: pointer; }
.likert input:checked + span { background: var(--moos-tief); color: #fff; border-color: var(--moos-tief); }
.likert input:focus-visible + span { outline: 3px solid var(--fokus); outline-offset: 2px; }
.likert-pole { clear: both; display: flex; justify-content: space-between; font-size: .8rem; color: var(--leise); margin-top: 6px; }
.daten-box { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); padding: 14px 16px; font-size: .95rem; }
.daten-box p { margin: 0 0 6px; }

/* Dialoge */
.dialog { border: 0; padding: 0; border-radius: var(--r-gross); max-width: min(560px, calc(100vw - 32px)); width: 100%; background: var(--karte); color: var(--tinte); box-shadow: 0 30px 80px -20px rgb(20 33 27 / .45); }
.dialog-weit { max-width: min(760px, calc(100vw - 32px)); }
.dialog::backdrop { background: rgb(20 33 27 / .45); backdrop-filter: blur(3px); }
.dialog-innen { padding: 28px 26px 26px; position: relative; max-height: calc(100dvh - 60px); overflow: auto; }
.dialog-innen.text h3 { margin-top: 1.2em; }
.dialog-innen.text ul { padding-left: 1.2em; }
.dialog-innen.text li { margin-bottom: .35em; }
.zentriert { text-align: center; }
.steckbrief-kopf { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: center; margin-bottom: 12px; }
.steckbrief-kopf img { width: 120px; height: 120px; object-fit: contain; }
.steckbrief-kopf h2 { font-size: 1.8rem; margin: 0; }
.steckbrief-kopf em { color: var(--leise); }
.werte { display: grid; gap: 8px; margin: 14px 0 4px; padding: 0; list-style: none; }
.werte li { display: grid; grid-template-columns: 150px 1fr; gap: 10px; align-items: center; font-size: .92rem; }
.werte .skala { display: flex; gap: 4px; }
.werte .skala i { flex: 1; height: 10px; border-radius: 3px; background: var(--grund-tief); }
.werte .skala i.an { background: var(--moos); }
.werte .skala.schlecht i.an { background: var(--gefahr); }

/* Station */
html.station { font-size: 125%; }
html.station .nur-online { display: none !important; }
html:not(.station) .nur-station { display: none !important; }
html.station .screen-start { min-height: calc(100dvh - 190px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .start-ring { animation: none; }
}

/* ---------- Live zusammengesetzter Wald ---------- */
.wald { position: relative; width: 100%; aspect-ratio: 1; container-type: inline-size; }
.wald-boden { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity 1.2s ease; filter: drop-shadow(0 18px 20px rgb(20 33 27 / .12)); }
.wald-boden { z-index: 0; }
.wald-objekte { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.obj { position: absolute; transform: translate(var(--fuss), -100%); transform-origin: calc(var(--fuss) * -1) 100%; transition: height 1.5s cubic-bezier(.3,.9,.3,1), opacity .9s, transform 1.1s cubic-bezier(.5,0,.8,.4); pointer-events: none; }
.obj img { display: block; width: 100%; height: 100%; transition: filter 1.2s; }
.obj-schatten { position: absolute; left: calc(var(--fuss) * -1); bottom: 0; width: 70%; height: 9%; transform: translate(-50%, 45%); background: radial-gradient(closest-side, rgb(20 33 27 / .38), transparent); z-index: -1; }
.obj-pflanze .obj-schatten { width: 90%; height: 18%; opacity: .7; }
.obj-rest .obj-schatten { width: 90%; height: 14%; }
.obj.welk img { filter: sepia(.8) saturate(1.5) hue-rotate(-30deg) brightness(.9); }
.obj.ab-faellt { transform: translate(var(--fuss), -100%) rotate(80deg); opacity: 0; }
.obj.ab-gefaellt { transform: translate(var(--fuss), -100%) rotate(-82deg); opacity: 0; transition-duration: .6s; }
.obj.ab-brennt { opacity: 0; transition-delay: .4s; }
.obj.ab-brennt img { filter: brightness(.2) sepia(1) saturate(3) hue-rotate(-20deg); }
.obj.ab-verdorrt { opacity: 0; transition-delay: .5s; }
.obj.ab-verdorrt img { filter: sepia(1) hue-rotate(-35deg) saturate(.7) brightness(1.05); }
.obj.ab-weg { opacity: 0; height: 0 !important; }

/* Ebenen, die sich einblenden lassen */
.obj-ring { position: absolute; opacity: 0; transition: opacity .4s; pointer-events: none; }
.obj-ring { left: calc(var(--fuss) * -1); bottom: 0; width: 56%; aspect-ratio: 3 / 1; transform: translate(-50%, 50%); border-radius: 50%; border: 2px solid var(--farbe); background: color-mix(in srgb, var(--farbe) 22%, transparent); z-index: -1; }
.obj-pflanze .obj-ring, .obj-rest .obj-ring { display: none; }
.zeige-arten .obj-baum .obj-ring { opacity: 1; }
/* Symbole für Gefahren und Totholz in eigener Lage, kollisionsfrei gesetzt, antippbar */
.wald-marken { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.symbol { position: absolute; width: clamp(24px, 6.2cqi, 30px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: var(--ton); box-shadow: 0 0 0 2px #fff, 0 3px 8px rgb(0 0 0 / .3); opacity: 0; transition: opacity .4s, left 1s, top 1s; }
.symbol::before { content: ''; position: absolute; inset: -8px; border-radius: 50%; }
.zeige-gefahr .symbol-gefahr, .zeige-totholz .symbol-totholz { opacity: 1; }
.mit-info.zeige-gefahr .symbol-gefahr, .mit-info.zeige-totholz .symbol-totholz { pointer-events: auto; cursor: pointer; }
.symbol-mini { display: inline-block; width: 1.25em; height: 1.25em; border-radius: 50%; background: var(--ton); vertical-align: -0.28em; box-shadow: 0 0 0 1.5px #fff; }
[data-gefahr="duerre"] { --ton: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3Cpath d='M12 2.5v2.5M12 19v2.5M2.5 12H5M19 12h2.5M5.3 5.3l1.8 1.8M16.9 16.9l1.8 1.8M5.3 18.7l1.8-1.8M16.9 7.1l1.8-1.8'/%3E%3C/svg%3E") center / 66% no-repeat, #a86a00; }
[data-gefahr="kaefer"] { --ton: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Cellipse cx='12' cy='13.5' rx='5' ry='6.5'/%3E%3Cpath d='M12 7v13M9 4.5l1.6 2.6M15 4.5l-1.6 2.6M7 11H3.5M7 15H4M17 11h3.5M17 15h3'/%3E%3C/svg%3E") center / 66% no-repeat, #6d4a26; }
[data-gefahr="sturm"] { --ton: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M3 8h11a3 3 0 1 0-3-3M3 12h16a3 3 0 1 1-3 3M3 16h8'/%3E%3C/svg%3E") center / 66% no-repeat, #3f5466; }
[data-gefahr="feuer"] { --ton: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M12 21.5c-4 0-6.5-2.7-6.5-6.3 0-3.6 3-5.6 4-9.7 2.4 1.7 3.4 3.9 3.2 6.2 1-.6 1.8-1.8 2-3 1.9 1.8 3.8 4 3.8 6.6 0 3.6-2.5 6.2-6.5 6.2Z'/%3E%3C/svg%3E") center / 66% no-repeat, #b03a17; }
[data-gefahr="totholz"] { --ton: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='16' cy='12' rx='4' ry='6'/%3E%3Cpath d='M16 6H7c-2.2 0-4 2.7-4 6s1.8 6 4 6h9'/%3E%3Cellipse cx='16' cy='12' rx='1.5' ry='2.3'/%3E%3C/svg%3E") center / 64% no-repeat, #3f8a2e; }
.zeige-gefahr .obj-baum.gefaehrdet img { filter: drop-shadow(0 0 2px rgb(255 170 60 / .95)) drop-shadow(0 0 6px rgb(230 110 30 / .55)); }
.zeige-gefahr .obj-baum.gefaehrdet.welk img { filter: sepia(.8) saturate(1.5) hue-rotate(-30deg) brightness(.9) drop-shadow(0 0 2px rgb(255 170 60 / .95)) drop-shadow(0 0 6px rgb(230 110 30 / .55)); }

.wald-schilder { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.mit-info.zeigt-auf { cursor: pointer; }
.mit-info .obj.schwebt img { filter: brightness(1.08) drop-shadow(0 0 3px #fff); }
/* Auswahl: alles andere tritt zurück, das Gewählte bekommt einen Ring am Fuß und einen Pfeil darüber */
.obj img { transition: filter 1.2s, opacity .3s; }
.mit-info.mit-auswahl .obj:not(.gewaehlt) img { opacity: .5; }
.obj.gewaehlt .obj-ring { display: block; opacity: 1; border: 2.5px solid #fff; background: color-mix(in srgb, var(--fokus) 30%, transparent); box-shadow: 0 0 0 2px var(--fokus); }
.obj.gewaehlt::after { content: ''; position: absolute; left: calc(var(--fuss) * -1); top: -4px; border: 8px solid transparent; border-top-color: var(--fokus); transform: translate(-50%, -100%); filter: drop-shadow(0 0 1.5px #fff); animation: hinweis .8s ease-in-out infinite alternate; }
@keyframes hinweis { to { transform: translate(-50%, calc(-100% - 6px)); } }
.baum-karte { position: absolute; z-index: 6; transform: translate(-50%, calc(-100% - 10px)); background: var(--karte); border-radius: 12px; padding: 10px 14px 11px; box-shadow: 0 12px 30px rgb(20 33 27 / .25); border-top: 4px solid var(--farbe); display: grid; gap: 3px; min-width: 190px; width: max-content; font-size: .86rem; line-height: 1.4; color: var(--tinte-2); pointer-events: none; }
.baum-karte .unter { color: var(--leise); margin-top: -2px; }
.baum-karte strong { font-family: var(--display); font-size: 1.05rem; color: var(--tinte); }
.baum-karte.unten { transform: translate(-50%, 0); }
.baum-karte { max-width: min(310px, calc(100% - 8px)); }
.obj.gewaehlt img { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 3px var(--fokus)); }
#wald:focus-visible { outline: 3px solid var(--fokus); outline-offset: 4px; border-radius: 16px; }
.schild { position: absolute; transform: translate(-50%, -100%); background: rgb(255 255 255 / .94); border-left: 4px solid var(--farbe); padding: 3px 9px 3px 7px; border-radius: 6px; font-weight: 700; font-size: clamp(.76rem, 2.3cqi, .86rem); font-family: var(--display); white-space: nowrap; box-shadow: 0 4px 14px rgb(20 33 27 / .18); opacity: 0; transition: opacity .4s, left 1s, top 1s; }
.zeige-arten .schild { opacity: 1; }

.wald-wurzeln { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .5s; z-index: 3; pointer-events: none; overflow: visible; }
.zeige-wurzeln .wald-wurzeln { opacity: 1; }
.wz-rand, .wz-linie { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.wz-rand { stroke: rgb(255 255 255 / .85); }

.ebenen { display: flex; flex-wrap: wrap; gap: 6px; }
.ebene-knopf { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 12px 6px 8px; border-radius: 99px; border: 1.5px solid var(--linie); background: var(--karte); font-weight: 700; font-size: .86rem; color: var(--tinte-2); }
.ebene-knopf .ico { width: 20px; height: 20px; padding: 2px; border-radius: 50%; }
.ebene-knopf[aria-pressed="true"] { background: var(--tinte); border-color: var(--tinte); color: #fff; }
@media (max-width: 560px) {
  .ebenen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .ebene-knopf { justify-content: center; gap: 3px; padding: 6px 4px; font-size: .72rem; min-height: 44px; }
  .ebene-knopf .ico { width: 16px; height: 16px; padding: 1px; }
}
.schild::after { content: ''; position: absolute; left: 50%; top: 100%; width: 1.5px; height: 8px; background: var(--farbe); transform: translateX(-50%); }
@media (prefers-reduced-motion: reduce) { .obj, .obj img, .wald-boden { transition: none !important; } }

/* Pflanzen direkt im Diorama */
.pflanz-diorama { position: relative; aspect-ratio: 1; width: 100%; max-width: 620px; margin: 0 auto; container-type: inline-size; }
#pflanz-wald { position: absolute; inset: 0; }
.pflanz-diorama .obj-baum:not(.unter) { opacity: .38; }
.pflanz-diorama.ohne-alte .obj-baum:not(.unter) { opacity: 0; }
.pflanz-orte { position: absolute; inset: 0; z-index: 1; }
.pflanz-orte .platz { position: absolute; width: clamp(36px, 11.5cqi, 76px); aspect-ratio: 1.8 / 1; transform: translate(-50%, -50%); border-radius: 50%; border: 2.5px dashed #fff; background: rgb(20 33 27 / .42); outline: 1.5px solid rgb(20 33 27 / .5); outline-offset: 0; color: #fff; font-weight: 800; font-size: .8rem; display: grid; place-items: center; padding: 0; box-shadow: 0 2px 8px rgb(0 0 0 / .25); transition: transform .2s, background .2s; }
.pflanz-orte .platz[data-art] { border-style: solid; border-width: 3px; border-color: var(--farbe); background: color-mix(in srgb, var(--farbe) 28%, transparent); }
.pflanz-orte .platz:hover { transform: translate(-50%, -50%) scale(1.1); }
.pflanz-orte .platz::before { content: ''; position: absolute; inset: -10px -6px; border-radius: 50%; }
.pflanz-orte .platz:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }
.geist-schalter { display: flex; align-items: center; gap: 8px; justify-content: center; margin-top: 10px; font-size: .9rem; color: var(--tinte-2); min-height: 44px; }
.geist-schalter input { width: 20px; height: 20px; accent-color: var(--moos-tief); }

/* Vorher-nachher im Ergebnis */
.vorher-nachher { position: relative; aspect-ratio: 1; --teil: 50%; }
.vorher-nachher > .wald { position: absolute; inset: 0; }
#ergebnis-vorher { clip-path: inset(0 calc(100% - var(--teil)) 0 0); }
/* Die 2100-Hälfte ebenfalls beschneiden, sonst scheinen ihre Bäume durch die Lücken von 2025 */
.vorher-nachher > #ergebnis-wald { clip-path: inset(0 0 0 var(--teil)); }
.vorher-nachher::after { content: ''; position: absolute; top: 4%; bottom: 4%; left: var(--teil); width: 2px; background: var(--tinte); box-shadow: 0 0 0 1px rgb(255 255 255 / .8); z-index: 7; pointer-events: none; }
.vorher-nachher input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 8; }
.vorher-nachher input[type=range]:focus-visible ~ .vn-jahr, .vorher-nachher:has(input:focus-visible)::after { outline: 3px solid var(--fokus); }
.vn-jahr { position: absolute; top: 2%; z-index: 7; font-family: var(--display); font-weight: 800; font-size: clamp(1rem, 4cqi, 1.6rem); background: var(--karte); padding: 2px 10px; border-radius: 99px; box-shadow: var(--schatten); }
.vorher-nachher { container-type: inline-size; }
.vn-links { left: 2%; } .vn-rechts { right: 2%; }

/* Wind: Bäume und Gräser wiegen sich, jeder im eigenen Takt; im Sturmjahrzehnt kräftig und schnell */
.obj-baum img, .obj-pflanze[data-art="gras"] img, .obj-pflanze[data-art="farn"] img, .obj-pflanze[data-art="fingerhut"] img {
  transform-origin: calc(var(--fuss) * -1) 100%;
  animation: wiegen var(--wd, 5s) ease-in-out var(--wv, 0s) infinite alternate;
}
@keyframes wiegen {
  from { transform: rotate(calc(var(--wa, .7deg) * var(--wind, 1) * -1)); }
  to { transform: rotate(calc(var(--wa, .7deg) * var(--wind, 1))); }
}
.wald[data-wetter="sturm"] { --wind: 3.4; }
.wald[data-wetter="sturm"] .obj-baum img { animation-duration: calc(var(--wd, 5s) * .38); }
.wald[data-wetter="brand"] { --wind: .4; }

/* Tiere: tauchen auf statt zu wachsen */
.obj-tier { transition: opacity .8s ease, transform .8s ease; }
.obj-tier.neu { opacity: 0; transform: translate(var(--fuss), -88%); }
.obj-tier.ab-tier { opacity: 0; transition-duration: .6s; }
.obj-tier .obj-ring { display: none; }
.obj-tier .obj-schatten { width: 80%; height: 12%; }
.baum-karte.tier-karte { width: min(300px, calc(100% - 8px)) !important; }
.baum-karte.tier-karte span:last-child { color: var(--moos); font-weight: 700; margin-top: 3px; }

/* Wer hier lebt */
.bewohner .klein span { font-weight: 600; color: var(--leise); font-family: var(--schrift); font-size: .86rem; }
.tier-liste { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tier-liste li { display: block; }
.tier-liste button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 3px 10px 3px 4px; border-radius: 99px; background: var(--flaeche); border: 1.5px solid var(--linie); font: inherit; font-size: .86rem; font-weight: 700; color: var(--tinte-2); cursor: pointer; }
.tier-liste button:hover { border-color: var(--moos); }
.tier-liste button:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.tier-liste button img { width: 26px; height: 26px; object-fit: contain; }
.tier-liste li.neu button { border-color: var(--c-natur); animation: neu-da 1.6s ease; }
.tier-liste li.fehlt button { color: var(--leise); background: transparent; font-weight: 400; border-style: dashed; }
.tier-liste li.fehlt img { filter: grayscale(1); opacity: .35; }
.tier-info { margin: 10px 0 0; font-size: .92rem; color: var(--tinte-2); }
.tier-info:empty { display: none; }
@keyframes neu-da { 0% { transform: scale(.8); background: var(--moos-hell); } 40% { transform: scale(1.06); } 100% { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .obj img { animation: none !important; }
  .tier-liste li.neu button { animation: none; }
}

/* Vergleich mit allen gespielten Wäldern */
.andere { margin-top: 18px; background: var(--karte); border-radius: var(--r); padding: 14px 16px; box-shadow: var(--schatten); }
.andere h2 { font-size: 1rem; margin-bottom: .5em; }
.andere-zeile { display: grid; grid-template-columns: 5.2em minmax(0, 1fr); align-items: center; gap: 10px; margin-top: 8px; font-size: .86rem; font-weight: 700; color: var(--tinte-2); font-family: var(--display); }
.andere p { margin: 10px 0 0; font-size: .95rem; }
.andere .hinweis { color: var(--leise); font-size: .86rem; }

/* Waldklang an und aus */
.ton-knopf { position: absolute; top: 6px; right: 0; z-index: 9; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 12px 6px 9px; border-radius: 99px; border: 1.5px solid var(--linie); background: rgb(255 255 255 / .9); font-weight: 700; font-size: .86rem; color: var(--tinte-2); box-shadow: var(--schatten); }
.ton-knopf .ico { width: 20px; height: 20px; }
.ton-knopf[aria-pressed="true"] { background: var(--tinte); border-color: var(--tinte); color: #fff; }
@media (max-width: 560px) { .ton-knopf span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .ton-knopf { padding: 8px; min-width: 44px; min-height: 44px; justify-content: center; } }

/* Ebenen: immer eine, darunter die Erklärung */
.ebene-erklaerung { margin: 8px 2px 0; font-size: .88rem; color: var(--tinte-2); line-height: 1.45; }

/* Einführung vor der ersten Zeitreise */
.zeit-buehne.mit-einfuehrung { z-index: 4; }
.einfuehrung { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; padding: 12px; background: rgb(232 236 239 / .66); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); border-radius: var(--r-gross); }
.einfuehrung-karte { background: var(--karte); border-radius: var(--r-gross); box-shadow: 0 20px 50px -18px rgb(20 33 27 / .45); padding: 18px 20px 20px; max-width: 380px; animation: auftritt .5s .15s both; }
.einfuehrung-karte .kicker { margin-bottom: .4em; }
.einfuehrung-karte h2 { font-size: 1.35rem; margin-bottom: .55em; }
.einfuehrung-karte ol { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; font-size: .93rem; color: var(--tinte-2); line-height: 1.4; }
.einfuehrung-karte li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; }
.einfuehrung-karte li .ico { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--moos-hell); color: var(--moos-tief); }
.einfuehrung-karte strong { color: var(--tinte); }
.einfuehrung-karte .knopf { width: 100%; }
.einfuehrung-karte .knopf .ico { fill: currentColor; stroke-width: 0; }

/* Auswahl auf dem Handy: Blatt am unteren Rand */
.auswahl-blatt { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--karte); border-radius: 20px 20px 0 0; border-top: 5px solid var(--farbe, var(--moos)); box-shadow: 0 -14px 40px rgb(20 33 27 / .28); padding: 12px 16px calc(6px + env(safe-area-inset-bottom)); max-height: 48dvh; overflow: auto; overscroll-behavior: contain; animation: blatt-rein .38s cubic-bezier(.2,.9,.25,1.05); }
/* Der Überschwinger hebt das Blatt kurz an; der weiße Block darunter hält die Lücke zu */
.auswahl-blatt { box-shadow: 0 24px 0 0 var(--karte), 0 -14px 40px rgb(20 33 27 / .28); }
.auswahl-blatt.raus { animation: blatt-raus .24s cubic-bezier(.5,0,.75,0) forwards; pointer-events: none; }
@keyframes blatt-rein { from { transform: translateY(100%); } }
@keyframes blatt-raus { to { transform: translateY(100%); } }
.blatt-kopf { display: grid; grid-template-columns: 58px minmax(0, 1fr) 44px; gap: 12px; align-items: center; }
.blatt-bild { width: 58px; height: 58px; object-fit: contain; background: var(--flaeche); border-radius: 12px; padding: 4px; }
.auswahl-blatt.welk .blatt-bild { filter: sepia(.8) saturate(1.5) hue-rotate(-30deg) brightness(.9); }
.blatt-titel strong { display: block; font-family: var(--display); font-size: 1.2rem; line-height: 1.15; }
.blatt-titel span { display: block; font-size: .88rem; color: var(--leise); margin-top: 2px; }
.auswahl-blatt .knopf-x { position: static; }
.blatt-text p { margin: 8px 0 0; font-size: .95rem; color: var(--tinte-2); line-height: 1.45; }
.blatt-text p:last-child { color: var(--tinte); font-weight: 700; }
.blatt-nav { display: flex; justify-content: space-between; margin-top: 2px; }
@media (min-width: 700px) { .auswahl-blatt { display: none !important; } }

/* ---------- Handy: Bild groß, Erklärung direkt darunter, Steuerung klebt unten ---------- */
@media (max-width: 699px) {
  .kopf { padding-block: 8px; }
  .nur-schmal { display: inline; }
  /* Zeitreise im Vollbild: Der Kopf der App weicht, zurück geht es über den Pfeil */
  .app[data-screen="zeit"] .kopf { display: none; }
  .app[data-screen="zeit"] main { padding-top: 12px; }
  .screen-zeit { display: flex; flex-direction: column; gap: 10px; }
  .screen-zeit .zeit-panel { display: contents; }
  .zeit-kopf { order: 1; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 6px; align-items: start; }
  .zeit-zurueck { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%; background: var(--karte); box-shadow: var(--schatten); text-decoration: none; margin-top: 2px; }
  .zeit-zurueck span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .zeit-kopf .kicker { display: none; }
  .zeit-kopf h1 { font-size: 1.45rem; margin-top: 1px; }
  .zeit-kopf .chip { grid-column: 2; margin: 1px 0 0; padding: 0; border: 0; background: none; font-size: .82rem; color: var(--leise); }
  .ebenen-box { order: 2; }
  /* Breite per Skript (--buehne-b) aus dem Platz über der Leiste; ohne Skript randlos über die ganze Breite */
  .zeit-buehne { order: 3; width: var(--buehne-b, calc(100% + 2 * var(--rand))); max-height: none; align-self: center; margin: -14px 0 0; transition: width .35s ease; }
  .zeit-buehne .diorama { width: 100%; }
  .jahr { display: none; }
  .einfuehrung { border-radius: 0; padding: 8px; place-items: start center; }
  .einfuehrung-karte { padding: 14px 16px 16px; }
  .einfuehrung-karte h2 { font-size: 1.2rem; }
  .einfuehrung-karte ol { font-size: .86rem; gap: 8px; margin-bottom: 12px; }
  .ton-knopf { right: 8px; }
  .erzaehlung { order: 4; margin-top: -30px; }
  .erzaehlung p { font-size: .9rem; }
  /* Kennzahlen in der Steuerleiste (per Skript dorthin verschoben) */
  .zeit-steuerung .kennzahlen { order: -2; flex-basis: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .zeit-steuerung .kz { padding: 6px 8px 7px; border-radius: 12px; background: var(--flaeche); box-shadow: none; }
  .zeit-steuerung .kz-erklaerung { order: -2; flex-basis: 100%; margin: 0; padding: 8px 12px; box-shadow: none; background: var(--flaeche); font-size: .86rem; }
  .kz-kopf { gap: 4px; font-size: .74rem; }
  .kz-kopf .ico { width: 16px; height: 16px; }
  .kz-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .kz-kurz { display: inline; }
  .kz-wert { font-size: 1.3rem; gap: 3px; flex-wrap: wrap; }
  .kz-delta { font-size: .7rem; }
  .kz > .kz-balken { height: 5px; }
  .geschehen { order: 7; }
  .zusammensetzung { order: 8; }
  .bewohner { order: 9; }
  .zeit-steuerung { order: 20; position: sticky; bottom: 0; z-index: 20; flex-wrap: wrap; gap: 8px 12px; margin-inline: calc(var(--rand) * -1); border-radius: 18px 18px 0 0; padding: 10px 16px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 24px -6px rgb(20 33 27 / .2); }
  .zeit-steuerung .knopf-rund { width: 46px; height: 46px; }
  .zeit-steuerung .knopf-rund .ico { width: 22px; height: 22px; }
  .zeitleiste { padding-bottom: 22px; }
  .steuer-jahr { display: block; }
  .zeitleiste { min-width: 0; }
  .zeitleiste-marken li .jz { visibility: hidden; }
  .zeitleiste-marken li:first-child .jz, .zeitleiste-marken li:last-child .jz { visibility: visible; }
  /* Am Ende stehen die Knöpfe über der Play-Zeile; die Leiste wächst nach oben, Play und Regler bleiben, wo der Finger ist */
  .zeit-ende { order: -1; justify-content: stretch; }
  #zeit-fertig { flex: 1 1 auto; min-height: 46px; }
  .zeit-steuerung .zeitleiste { flex: 1 1 0; min-width: 0; }
}

/* ---------- Handy: Pflanzen mit Baumarten-Leiste direkt über dem Waldstück ---------- */
@media (max-width: 699px) {
  .screen-bauen .lead { font-size: .98rem; margin-bottom: 0; }
  .bauen-raster { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
  .palette { order: 1; display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; margin-inline: calc(var(--rand) * -1); padding: 4px var(--rand) 8px; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .palette::-webkit-scrollbar { display: none; }
  .palette > div { flex: 0 0 96px; scroll-snap-align: start; }
  .art { padding: 6px 4px 8px; }
  .art img { width: 50px; height: 50px; }
  .art .n { font-size: .8rem; }
  .art .w { font-size: .68rem; line-height: 1.25; }
  .art-info { width: 30px; height: 30px; top: 0; right: 0; }
  .pflanzflaeche-wrap { order: 2; background: none; box-shadow: none; padding: 0; }
  .pflanz-diorama { width: auto; max-width: none; margin-inline: calc(var(--rand) * -1); }
  .pflanz-orte .platz { width: clamp(44px, 13cqi, 76px); }
  .stellschrauben { order: 3; }
}

/* Kleinigkeiten aus dem Handytest */
.bewohner-hinweis { margin: 10px 0 0; font-size: .84rem; color: var(--leise); }
button[aria-busy="true"] { cursor: progress; }
button[aria-busy="true"]::after { content: ''; width: 1em; height: 1em; border: 2.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: drehen .7s linear infinite; }
@keyframes drehen { to { transform: rotate(360deg); } }
.steckbrief-kopf h2 { padding-right: 48px; overflow-wrap: anywhere; }
@media (max-width: 420px) {
  .ebene-knopf { font-size: .8rem; }
  .ebene-knopf .ico { display: none; }
}

/* Pflanzen: gewählte Art am Waldstück */
.pflanz-wahl { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: .92rem; color: var(--tinte-2); }
.pflanz-wahl i { width: 14px; height: 14px; border-radius: 50%; background: var(--farbe); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--farbe); }
.pflanz-orte .platz { box-shadow: 0 0 0 2px rgb(20 33 27 / .45), 0 2px 8px rgb(0 0 0 / .25); }

/* Wege: Endwerte mit Zahl */
.mini-kz div span { display: flex; justify-content: space-between; gap: 4px; }
.mini-kz strong { color: var(--tinte); font-family: var(--display); }

/* Ergebnis: Platz in Worten, sichtbarer Griff am Vorher-nachher-Bild */
.vgl-rang { margin: 2px 0 0; font-size: .86rem; color: var(--tinte-2); }
.vorher-nachher::before { content: ''; position: absolute; left: var(--teil); top: 50%; z-index: 8; width: 44px; height: 44px; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: var(--karte) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314211b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 7-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center / 24px no-repeat; box-shadow: 0 4px 14px rgb(20 33 27 / .3); }
.vorher-nachher input[type=range] { touch-action: pan-y; }
.knopfreihe-mitte { justify-content: center; margin-top: 18px; }
#zeit-pflanzen { flex: none; }

/* ---------- Handy: kurze Seiten, Hauptknopf klebt unten ---------- */
@media (max-width: 699px) {
  .start-buehne { width: min(100%, 44svh); }
  .start-aktion { margin-top: 18px; }
  #s-ziele > .knopfreihe, #s-ort > .knopfreihe, #s-erkunden > .knopfreihe-ende, #s-bauen > .knopfreihe-ende {
    position: sticky; bottom: 0; z-index: 20; margin: 18px calc(var(--rand) * -1) 0; padding: 10px var(--rand) calc(10px + env(safe-area-inset-bottom));
    background: var(--grund); border-top: 1px solid var(--linie); gap: 6px 14px;
  }
  #s-erkunden > .knopfreihe-ende .hinweis, #s-bauen > .knopfreihe-ende .hinweis { font-size: .84rem; flex-basis: 100%; }
  #s-erkunden > .knopfreihe-ende .knopf, #s-bauen > .knopfreihe-ende .knopf, #s-ziele #ziele-weiter, #s-ort #ort-weiter { flex: 1; }
  .ziele { gap: 8px; margin-top: 14px; }
  .ziel { min-height: 0; padding: 10px 12px; grid-template-columns: 40px 1fr 36px; gap: 10px; }
  .ziel-ico { width: 40px; height: 40px; }
  .ziel .ico { width: 24px; height: 24px; }
  .ziel strong { font-size: 1.05rem; }
  .ziel span.t { font-size: .86rem; line-height: 1.35; display: block; }
  .ziel-rang { width: 34px; height: 34px; font-size: 1.05rem; }

  .karten-auswahl { gap: 10px; margin-top: 14px; }
  .ort { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 0 12px; padding: 12px 14px; align-items: start; }
  .ort img { grid-row: 1 / span 3; width: 96px; margin: 0; }
  .ort strong { font-size: 1.15rem; padding-right: 34px; }
  .ort .wo { font-size: .82rem; margin-bottom: 2px; }
  .ort .t { font-size: .86rem; line-height: 1.4; }
  .ort-werte { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; padding-top: 8px; }
  .ort-wert { flex-direction: column; align-items: flex-start; gap: 2px; font-size: .78rem; }
  .ort-haken { top: 10px; right: 10px; width: 28px; height: 28px; }
  .klima-wahl { margin-top: 18px; }
  .klima { padding: 12px 14px; }

  .wege { gap: 10px; margin-top: 14px; }
  .weg { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 0 12px; padding: 12px; }
  .weg > * { grid-column: 2; }
  .weg-bild { grid-column: 1; grid-row: 1 / span 4; width: 104px; margin: 0; align-self: start; }
  .weg-nr { font-size: 1.5rem; top: 0; left: 0; }
  .weg h2.klein { font-size: 1.1rem; }
  .weg .weg-frage { font-size: .86rem; margin-bottom: .2em; }
  .weg .t { font-size: .84rem; line-height: 1.4; margin-bottom: 0; }
  .weg .mini-kz, .weg .knopf { grid-column: 1 / -1; }
  .weg .knopf { min-height: 46px; margin-top: 10px; }

  .vgl-punkt { width: 20px; height: 20px; margin-left: -10px; top: 10px; }
  .vgl-punkt span { font-size: .78rem; }
}

/* Handy: Erzählzeile in der Leiste, Kicker weg (der Fortschritt steht oben), Pflanzen kompakter */
@media (max-width: 699px) {
  .zeit-steuerung .erzaehlung { order: -3; flex-basis: 100%; margin: 0; width: auto; box-shadow: none; background: var(--flaeche); padding: 8px 10px 8px 8px; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; border-left-width: 4px; }
  .zeit-steuerung .erzaehlung .ico { width: 28px; height: 28px; padding: 5px; border-radius: 8px; }
  .zeit-steuerung .erzaehlung p { font-size: .84rem; line-height: 1.35; }
  .zeit-steuerung .erzaehlung strong { font-size: .84rem; }
  .zeit-steuerung { gap: 6px 12px; padding-top: 8px; }
  #s-ziele > .kicker, #s-ort > .kicker, #s-erkunden > .kicker, #s-bauen > .kicker, #s-ergebnis > .kicker { display: none; }
  .screen > .titel { font-size: 1.7rem; }
  .screen-bauen .lead { font-size: .92rem; }
  .pflanzflaeche-wrap { position: relative; }
  .pflanz-wahl { position: absolute; z-index: 3; top: 4px; left: 0; margin: 0; padding: 5px 12px 5px 9px; border-radius: 99px; background: rgb(255 255 255 / .92); box-shadow: var(--schatten); font-size: .86rem; }
  .pflanz-diorama { margin-top: -4%; }
}

/* Ergebnis: Bilanz in Sätzen */
.bilanz { margin-top: 14px; background: var(--karte); border-radius: var(--r); padding: 14px 16px; box-shadow: var(--schatten); border-left: 4px solid var(--moos); }
.bilanz h2 { font-size: 1rem; margin-bottom: .4em; }
.bilanz ul { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; color: var(--tinte-2); }

/* Zweite Runde aus dem Handytest */
.weg-regeln { font-size: .8rem; color: var(--leise); margin: 6px 0 0; line-height: 1.4; }
.erzaehlung .erz-mehr { border: 0; background: none; padding: 0 0 0 4px; font: inherit; color: var(--moos-tief); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.zeitleiste-marken li { cursor: pointer; min-width: 30px; min-height: 26px; }
.fuss-knopf { border: 0; background: none; padding: 4px 2px; min-height: 26px; display: inline-block; vertical-align: middle; font: inherit; line-height: 1.2; color: inherit; text-decoration: underline; cursor: pointer; }
@media (max-width: 699px) {
  .zeit-kopf .chip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .zeit-steuerung .kz > .kz-balken { display: none; }
  .zeit-steuerung .kz { padding: 5px 8px 6px; }
  .zeit-steuerung .kz-wert { font-size: 1.2rem; }
  /* Solange die Einführung steht, bleibt die Leiste schlank, damit ihr Start-Knopf frei liegt */
  #s-zeit.mit-einfuehrung .zeit-steuerung .erzaehlung, #s-zeit.mit-einfuehrung .zeit-steuerung .kennzahlen { display: none; }
}
@media (max-width: 699px) and (max-height: 620px) {
  .start-buehne { width: min(100%, 36svh); }
  .screen-start .kicker { display: none; }
  .start-text .lead { font-size: 1rem; }
  .start-aktion { margin-top: 12px; }
}
@media (max-width: 360px) {
  .ebene-knopf { font-size: .74rem; padding-inline: 2px; }
}

/* ---------- Dritte Runde aus dem Handytest ---------- */
.erzaehlung .erz-titel { display: block; color: var(--tinte); font-family: var(--display); font-size: .92rem; line-height: 1.3; }
.erzaehlung .erz-mehr { display: inline-block; margin-top: 3px; padding: 4px 0; }
.erzaehlung .erz-mehr[hidden] { display: none; }
.hinweis-blatt .blatt-kopf { grid-template-columns: minmax(0, 1fr) 44px; }
.hinweis-blatt .blatt-text p:last-child { font-weight: 400; color: var(--tinte-2); }
.hinweis-blatt .blatt-text p { margin-top: 10px; }
.nur-breit { display: inline; }
.symbol::before { inset: -10px; }
.weg-nr { color: rgb(20 33 27 / .6); }
.zeit-buehne.mit-einfuehrung .ton-knopf { visibility: hidden; }
@media (max-width: 699px) {
  .zeit-steuerung .erzaehlung .erz-titel { font-size: .84rem; }
  .zeit-steuerung .erzaehlung p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  #kz-erklaerung { display: none !important; }
  .blatt-offen .zeit-steuerung { visibility: hidden; }
  .ebene-erklaerung { min-height: 2.9em; margin-top: 6px; font-size: .84rem; }
  .einfuehrung-karte { display: flex; flex-direction: column; max-height: 100%; overflow: auto; }
  .einfuehrung-karte .knopf { order: 1; margin: 2px 0 12px; }
  .einfuehrung-karte ol { order: 2; margin-bottom: 0; }
  .nur-breit { display: none; }
  .palette { position: sticky; top: 0; z-index: 15; background: var(--grund); scroll-padding-inline: var(--rand); padding-top: 8px; }
  .pflanz-orte { z-index: 3; }
  .pflanz-orte .platz { background: rgb(20 33 27 / .55); text-shadow: 0 1px 2px rgb(0 0 0 / .6); }
  .ort img { height: auto; align-self: start; }
  #s-ort > .knopfreihe .hinweis { flex-basis: 100%; font-size: .84rem; }
  #s-ergebnis > .knopfreihe-ende { position: sticky; bottom: 0; z-index: 20; margin: 18px calc(var(--rand) * -1) 0; padding: 10px var(--rand) calc(10px + env(safe-area-inset-bottom));
    background: var(--grund); border-top: 1px solid var(--linie); }
  #s-ergebnis > .knopfreihe-ende .knopf { flex: 1; }
  .ziel-rang { font-size: 1.1rem; }
  .kz-delta { font-size: .76rem; }
  .art .w { font-size: .74rem; }
  .art-info { width: 36px; height: 36px; }
  .tier-liste button { min-height: 40px; }
  .zeitleiste input[type=range] { height: 44px; }
  .zeitleiste input[type=range]::-webkit-slider-thumb { width: 34px; height: 34px; margin-top: -13px; }
  #wald:focus-visible { outline-offset: -3px; }
}
/* Handy quer: Bild nach der Höhe, Einführung kurz */
@media (max-height: 500px) and (min-width: 700px) {
  .zeit-buehne { width: min(100%, calc(100dvh - 24px)); max-height: none; }
  .einfuehrung-karte ol { display: none; }
  .einfuehrung-karte { padding: 12px 16px 14px; }
}
@media (max-width: 699px) {
  #s-zeit.am-ende .zeit-steuerung .erzaehlung p { display: none; }
}
.erzaehlung .erz-kopf { display: flex; align-items: baseline; gap: 10px; }
.erzaehlung .erz-kopf .erz-titel { flex: 1; min-width: 0; }
.erzaehlung .erz-kopf .erz-mehr { margin: 0; padding: 0; flex: none; white-space: nowrap; }
@media (max-width: 699px) {
  .zeit-steuerung .erzaehlung .erz-titel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .zeit-steuerung .erzaehlung p { -webkit-line-clamp: 2; }
  .zeit-steuerung .erzaehlung .erz-mehr { font-size: .84rem; }
  .zeit-steuerung .kz { padding: 4px 8px 5px; }
}

/* ---------- Letzte Runde aus dem Handytest ---------- */
/* Tablet hochkant (700 bis 999 px): Bild nach der Fensterhöhe, sonst ragt das quadratische Diorama über Play und Regler */
@media (min-width: 700px) and (max-width: 999px) {
  .zeit-buehne { max-height: none; width: min(100%, max(360px, calc(100dvh - 380px))); }
}
.hinweis-blatt .blatt-kopf { position: sticky; top: -12px; z-index: 1; background: var(--karte); margin-top: -12px; padding-top: 12px; padding-bottom: 4px; }
.erzaehlung .erz-mehr { position: relative; }
.erzaehlung .erz-mehr::after { content: ''; position: absolute; inset: -12px -8px; }
.zeit-ende.frisch { pointer-events: none; }
.pflanz-legende { margin-top: 8px; }
.pflanz-legende:empty { display: none; }
.art::before { content: ''; position: absolute; top: 9px; left: 9px; width: 11px; height: 11px; border-radius: 50%; background: var(--farbe); box-shadow: 0 0 0 2px #fff; }
.marke { min-height: 44px; }
@media (max-width: 699px) {
  .kz-kurz { font-size: .78rem; }
  .kz-delta { font-size: .78rem; }
  .zeitleiste-marken li { font-size: .78rem; }
}
/* Niedrige Handys: von der Erzählzeile nur der Titel mit „Mehr“, der Text steht im Blatt */
@media (max-width: 699px) and (max-height: 620px) {
  .zeit-steuerung .erzaehlung p { display: none; }
}
@media (max-width: 380px) {
  .marke span { display: none; }
}
/* Breite Bildschirme: Die Steuerung schwebt unten im Blick, wenn die Seite länger ist als das Fenster.
   Ab 1000 px steht die Erzählzeile rechts über den Kennzahlen, so bleibt links Platz für ein großes Bild. */
@media (min-width: 700px) {
  .zeit-steuerung { position: sticky; bottom: 10px; z-index: 20; box-shadow: 0 12px 34px -10px rgb(20 33 27 / .35), var(--schatten); }
}
@media (min-width: 1000px) {
  .screen-zeit { grid-template-areas: "kopf kopf" "ebenen erz" "buehne panel" "steuerung panel" ". panel"; grid-template-rows: auto auto auto auto 1fr; }
  .screen-zeit .erzaehlung { margin: 0; width: auto; align-self: end; }
}

/* ---------- Kennzahl-Karten als Knöpfe, Handy-Leiste ---------- */
/* In der Leiste ist kein Platz für 5 px und den Pfeil: 3 px Rahmen, das Polster entsprechend kleiner, die Karte bleibt gleich hoch */
@media (max-width: 699px) {
  .zeit-steuerung .kz { border-width: 3px; padding: 3px 7px 4px; }
  .zeit-steuerung .kz-chevron { display: none; }
  .zeit-steuerung .kz > .kz-kopf { padding-right: 0; }
}
/* Auf sehr schmalen Handys ist für das Symbol kein Platz mehr: „Vielfalt“ liefe sonst über den farbigen Rahmen, der Name allein reicht */
@media (max-width: 365px) {
  .zeit-steuerung .kz-kopf .ico { display: none; }
}