/* Jagdlernapp – Oberfläche
   Farbwelt: Loden (Grün) als Gerüst, Nebel (helles Graugrün) als Fläche,
   Signalorange (Jagdweste) für die eine wichtige Aktion, Bernstein für XP/Streak. */

:root {
  --loden: #2b4a2d;
  --loden-tief: #1b3220;
  --loden-hell: #3e6a41;
  --nebel: #e8ece5;
  --nebel-tief: #d8ded4;
  --papier: #ffffff;
  --papier-2: #f4f6f1;
  --tinte: #1a2419;
  --tinte-2: #4b5a4a;
  --tinte-3: #7b887a;
  --linie: #cfd7cb;
  --signal: #e4621a;
  --signal-tief: #c24f12;
  --bernstein: #f0b323;
  --bernstein-tief: #c98f0d;
  --moos: #3f7d4a;
  --moos-hell: #e3f0e4;
  --gelb: #d99a1e;
  --gelb-hell: #fbf0d6;
  --ziegel: #b8432e;
  --ziegel-hell: #f8e1dc;
  --radius: 14px;
  --radius-s: 9px;
  --schatten: 0 1px 2px rgba(27, 50, 32, .08), 0 4px 16px rgba(27, 50, 32, .06);
  --font: "Bricolage Grotesque", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
  --nav-h: 62px;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --loden: #1f3a24;
  --loden-tief: #142418;
  --loden-hell: #35603a;
  --nebel: #121a14;
  --nebel-tief: #0d140f;
  --papier: #1b261e;
  --papier-2: #223027;
  --tinte: #e9eee6;
  --tinte-2: #b9c4b6;
  --tinte-3: #8a978a;
  --linie: #2f4034;
  --moos-hell: #1f3a27;
  --gelb-hell: #3d3012;
  --ziegel-hell: #4a211a;
  --schatten: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .25);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--nebel); color: var(--tinte);
  font-family: var(--font); font-size: 16px; line-height: 1.45;
  font-optical-sizing: auto;
  min-height: 100dvh;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--loden-hell); }
:root[data-theme="dark"] a { color: #8fc496; }
h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.01em; line-height: 1.2; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }
p { margin: 0; }
.hide { display: none !important; }
.muted { color: var(--tinte-3); }
.small { font-size: .85rem; }
:focus-visible { outline: 3px solid var(--bernstein); outline-offset: 2px; }

/* ---------- App-Gerüst ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--loden-tief); color: #fff;
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .9rem; padding-top: calc(.55rem + env(safe-area-inset-top));
  min-height: 56px;
}
.brand { display: flex; align-items: center; gap: .55rem; font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; }
.brand .antler { font-size: 1.3rem; }
.brand small { font-weight: 400; opacity: .75; font-size: .8rem; margin-left: .2rem; }
.topbar .spacer { flex: 1; }
.topbar { overflow: hidden; }
.brand { min-width: 0; white-space: nowrap; }
.chip.lvl .short { display: none; }
@media (max-width: 600px) {
  .brand small { display: none; }
  .chip.lvl .full { display: none; }
  .chip.lvl .short { display: inline; }
  .chip { padding: .28rem .55rem; }
}
a.btn { text-decoration: none; }
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  background: rgba(255,255,255,.1); border-radius: 999px; padding: .28rem .7rem;
  font-size: .85rem; font-weight: 600; white-space: nowrap;
}
button.chip { border: none; color: inherit; cursor: pointer; font: inherit; font-weight: 600; font-size: .85rem; }
button.chip:hover { background: rgba(255,255,255,.18); }
.chip.streak.aktiv { background: rgba(240,179,35,.18); color: #ffd978; }
.chip.lvl { color: #dfe8da; }
.avatar-ring {
  position: relative; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; border: none; background: transparent; padding: 0;
}
.avatar-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.avatar-ring .av { font-size: 1.25rem; line-height: 1; z-index: 1; }

.app { max-width: 820px; margin: 0 auto; padding: 1rem 1rem calc(var(--nav-h) + 1.2rem + env(safe-area-inset-bottom)); }
.view { display: flex; flex-direction: column; gap: 1rem; }

.bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: var(--loden-tief); color: #fff;
  display: flex; justify-content: space-around;
  padding: .3rem .4rem calc(.3rem + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255,255,255,.06);
}
.bottomnav button {
  flex: 1; max-width: 120px; background: none; border: none; color: rgba(255,255,255,.65);
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  padding: .3rem .2rem; border-radius: 10px; font-size: .72rem; font-weight: 600; cursor: pointer;
}
.bottomnav button .ico { font-size: 1.35rem; line-height: 1.2; }
.bottomnav button.on { color: #fff; background: rgba(255,255,255,.1); }

@media (min-width: 960px) {
  body { display: grid; grid-template-columns: 240px 1fr; }
  .topbar { grid-column: 1 / -1; }
  .bottomnav {
    position: sticky; top: 56px; align-self: start; height: calc(100dvh - 56px);
    flex-direction: column; justify-content: flex-start; gap: .25rem;
    padding: 1rem .75rem; border-top: none; border-right: 1px solid rgba(255,255,255,.06);
  }
  .bottomnav button { flex: 0 0 auto; max-width: none; flex-direction: row; gap: .7rem; padding: .6rem .8rem; font-size: .95rem; }
  .bottomnav button .ico { font-size: 1.2rem; }
  .app { padding-bottom: 2rem; }
  body.gast { display: block; }
}

/* ---------- Karten & Bausteine ---------- */
.card {
  background: var(--papier); border-radius: var(--radius); padding: 1.1rem 1.15rem;
  box-shadow: var(--schatten); border: 1px solid transparent;
}
:root[data-theme="dark"] .card { border-color: var(--linie); }
.card.loden { background: var(--loden); color: #fff; }
.card.loden .muted { color: rgba(255,255,255,.7); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .6rem; }
.row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.row.end { justify-content: flex-end; }
.stack { display: flex; flex-direction: column; gap: .6rem; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
@media (max-width: 520px) { .grid2 { grid-template-columns: 1fr; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  border: none; border-radius: var(--radius-s); padding: .7rem 1.15rem;
  font-weight: 650; font-size: .98rem; cursor: pointer; background: var(--loden); color: #fff;
  transition: transform .08s ease, background .15s ease, opacity .15s ease;
  min-height: 44px;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.primary { background: var(--signal); }
.btn.primary:hover { background: var(--signal-tief); }
.btn.ghost { background: var(--papier-2); color: var(--tinte); border: 1px solid var(--linie); }
.btn.ghost:hover { background: var(--nebel); }
.btn.text { background: transparent; color: var(--loden-hell); padding: .4rem .6rem; min-height: 0; }
:root[data-theme="dark"] .btn.text { color: #8fc496; }
.btn.wide { width: 100%; }
.btn.lg { padding: .9rem 1.4rem; font-size: 1.05rem; }
.btn.sm { padding: .4rem .75rem; font-size: .85rem; min-height: 36px; }

.tag {
  display: inline-block; font-size: .72rem; font-weight: 650; padding: .14rem .55rem;
  border-radius: 999px; background: var(--papier-2); color: var(--tinte-2); border: 1px solid var(--linie);
  vertical-align: middle;
}
.tag.ki { background: var(--gelb-hell); color: #7b5500; border-color: transparent; }
.tag.lk { background: var(--moos-hell); color: #245c31; border-color: transparent; }
.tag.aktuell { background: #e3ecfa; color: #243f73; border-color: transparent; }
:root[data-theme="dark"] .tag.ki { color: #f1cf7a; }
:root[data-theme="dark"] .tag.lk { color: #a6d9ad; }
:root[data-theme="dark"] .tag.aktuell { background: #1f2d45; color: #a9c2f0; }

.bar { height: 10px; border-radius: 999px; background: var(--nebel-tief); overflow: hidden; display: flex; }
.bar > i { display: block; height: 100%; transition: width .5s cubic-bezier(.2,.8,.2,1); }
.bar.thin { height: 6px; }
.b-moos { background: var(--moos); } .b-gelb { background: var(--gelb); } .b-ziegel { background: var(--ziegel); }
.b-bernstein { background: var(--bernstein); } .b-signal { background: var(--signal); } .b-loden { background: var(--loden-hell); }

textarea.antwort {
  width: 100%; min-height: 120px; resize: vertical; padding: .75rem .85rem;
  border: 1.5px solid var(--linie); border-radius: var(--radius-s); background: var(--papier-2);
  line-height: 1.45;
}
textarea.antwort:focus { border-color: var(--loden-hell); outline: none; background: var(--papier); }
input.feld, select.feld {
  width: 100%; padding: .7rem .85rem; border: 1.5px solid var(--linie); border-radius: var(--radius-s);
  background: var(--papier-2); min-height: 46px;
}
input.feld:focus { border-color: var(--loden-hell); outline: none; background: var(--papier); }
label.feldlabel { display: block; font-size: .85rem; font-weight: 600; color: var(--tinte-2); margin-bottom: .3rem; }

.toggle { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--linie); }
.toggle:last-child { border-bottom: none; }
.toggle .t { font-weight: 600; }
.toggle .s { font-size: .82rem; color: var(--tinte-3); }
.switch { position: relative; width: 48px; height: 28px; flex: 0 0 auto; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch span {
  position: absolute; inset: 0; border-radius: 999px; background: var(--nebel-tief); cursor: pointer; transition: background .2s;
}
.switch span::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s;
}
.switch input:checked + span { background: var(--moos); }
.switch input:checked + span::after { transform: translateX(20px); }
.switch input:focus-visible + span { outline: 3px solid var(--bernstein); }

/* ---------- Login ---------- */
.login { max-width: 520px; margin: 1.5rem auto; }
.login h1 { font-size: 1.9rem; margin-bottom: .3rem; }
.profiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .7rem; margin-top: 1rem; }
.profile {
  background: var(--papier); border: 1.5px solid var(--linie); border-radius: var(--radius); padding: 1rem .6rem;
  display: flex; flex-direction: column; align-items: center; gap: .35rem; cursor: pointer; transition: border-color .15s, transform .1s;
}
.profile:hover { border-color: var(--loden-hell); }
.profile:active { transform: scale(.98); }
.profile .av { font-size: 2.2rem; line-height: 1; }
.profile .nm { font-weight: 650; }
.profile.neu { border-style: dashed; color: var(--tinte-2); }
.avatars { display: flex; flex-wrap: wrap; gap: .4rem; }
.avatars button { font-size: 1.5rem; width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--linie); background: var(--papier-2); cursor: pointer; }
.avatars button.sel { border-color: var(--signal); background: #fff2ea; }
:root[data-theme="dark"] .avatars button.sel { background: #3a2415; }
.fehler { color: var(--ziegel); font-weight: 600; font-size: .9rem; }

/* ---------- Lernen ---------- */
.ziel-leiste { display: flex; align-items: center; gap: .8rem; }
.ziel-leiste .bar { flex: 1; }
.ziel-leiste .lbl { font-size: .85rem; font-weight: 600; white-space: nowrap; }
.crumbs { font-size: .8rem; color: var(--tinte-3); display: flex; flex-wrap: wrap; gap: .25rem .4rem; align-items: center; }
.crumbs .sep { opacity: .5; }
.frage {
  font-size: 1.32rem; font-weight: 600; line-height: 1.35; margin: .55rem 0 .9rem; letter-spacing: -.01em;
}
.frage .tag { margin-left: .4rem; font-size: .68rem; }
.imgs { display: flex; gap: .5rem; overflow-x: auto; padding: .3rem 0 .6rem; scroll-snap-type: x mandatory; }
.imgs img { height: 140px; border-radius: 8px; cursor: zoom-in; scroll-snap-align: start; border: 1px solid var(--linie); background: #fff; }
.q-aktionen { margin-top: .7rem; }
.hint { font-size: .85rem; color: var(--tinte-3); min-height: 1.2em; }
.hint.wait::before { content: ""; display: inline-block; width: .8em; height: .8em; border: 2px solid var(--loden-hell); border-right-color: transparent; border-radius: 50%; margin-right: .4em; vertical-align: -.1em; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.verdikt-banner {
  display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem; border-radius: var(--radius-s);
  font-weight: 750; font-size: 1.15rem; color: #fff; margin-bottom: .9rem;
  animation: pop .35s cubic-bezier(.2,.9,.3,1.3);
}
@keyframes pop { from { transform: scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
.verdikt-banner .ico { font-size: 1.6rem; }
.verdikt-banner .xp { margin-left: auto; font-size: .95rem; background: rgba(0,0,0,.18); padding: .2rem .6rem; border-radius: 999px; }
.v-richtig { background: var(--moos); } .v-teilweise { background: var(--gelb); } .v-falsch { background: var(--ziegel); }
.v-offen { background: var(--tinte-3); }
.abschnitt { margin-top: .9rem; }
.abschnitt h4 { font-size: .8rem; font-weight: 650; color: var(--tinte-3); margin-bottom: .3rem; }
.muster { background: var(--moos-hell); border-left: 4px solid var(--moos); padding: .65rem .85rem; white-space: pre-wrap; border-radius: 0 8px 8px 0; line-height: 1.45; }
.muster.meine { background: var(--papier-2); border-left-color: var(--tinte-3); }
ul.pts { margin: .3rem 0 0; padding-left: 1.3rem; }
ul.pts li { margin: .15rem 0; }
.ok::marker { content: "✓ "; color: var(--moos); font-weight: 700; }
.miss::marker { content: "✗ "; color: var(--ziegel); font-weight: 700; }
.vwahl { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }
.vbtn { flex: 1; min-width: 100px; border: 2px solid transparent; opacity: .55; color: #fff; }
.vbtn.sel { opacity: 1; border-color: var(--tinte); box-shadow: 0 0 0 3px rgba(0,0,0,.08); }
.feedback { margin-top: .3rem; color: var(--tinte-2); }

.fertig { text-align: center; padding: 1.6rem 1rem; }
.fertig .big { font-size: 2.6rem; line-height: 1; margin-bottom: .5rem; }
.fertig h2 { margin-bottom: .4rem; }

/* XP-Toast & Abzeichen-Toast */
.toasts { position: fixed; top: calc(62px + env(safe-area-inset-top)); left: 0; right: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; gap: .4rem; pointer-events: none; }
.toast {
  background: var(--tinte); color: #fff; padding: .55rem 1rem; border-radius: 999px; font-weight: 700;
  box-shadow: 0 6px 24px rgba(0,0,0,.25); animation: toast 2.6s ease forwards; display: flex; gap: .5rem; align-items: center;
}
.toast.xp { background: var(--bernstein); color: #3b2a00; }
.toast.badge { background: var(--loden); border-radius: 14px; padding: .7rem 1rem; animation-duration: 4.5s; }
.toast.badge .ico { font-size: 1.6rem; }
.toast.badge .t { font-size: .78rem; opacity: .85; font-weight: 500; }
@keyframes toast { 0% { transform: translateY(-20px); opacity: 0; } 10% { transform: none; opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }

/* Level-up */
.overlay { position: fixed; inset: 0; background: rgba(10,20,12,.75); z-index: 60; display: grid; place-items: center; padding: 1rem; }
.overlay .card { max-width: 420px; width: 100%; text-align: center; }
.levelup .ico { font-size: 3.4rem; }
.levelup h2 { font-size: 1.6rem; margin: .4rem 0 .2rem; }
#modal { position: fixed; inset: 0; background: rgba(0,0,0,.85); display: none; align-items: center; justify-content: center; z-index: 70; cursor: zoom-out; }
#modal img { max-width: 96%; max-height: 94%; border-radius: 8px; }

/* ---------- Blitzrunde ---------- */
.blitz-kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.blitz-kopf .punkte { font-weight: 750; font-size: 1.1rem; }
.timer { height: 8px; border-radius: 999px; background: var(--nebel-tief); overflow: hidden; margin: .6rem 0 .9rem; }
.timer > i { display: block; height: 100%; background: var(--signal); width: 100%; transition: width .25s linear; }
.timer.knapp > i { background: var(--ziegel); }
.optionen { display: grid; gap: .55rem; }
.opt {
  display: flex; align-items: center; gap: .7rem; text-align: left; width: 100%;
  background: var(--papier-2); border: 1.5px solid var(--linie); border-radius: var(--radius-s);
  padding: .7rem .8rem; cursor: pointer; font-weight: 500; line-height: 1.35; transition: border-color .12s, background .12s;
}
.opt:hover:not(:disabled) { border-color: var(--loden-hell); }
.opt .buchst { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--nebel-tief); font-weight: 700; font-size: .85rem; }
.opt.richtig { background: var(--moos-hell); border-color: var(--moos); }
.opt.richtig .buchst { background: var(--moos); color: #fff; }
.opt.falsch { background: var(--ziegel-hell); border-color: var(--ziegel); }
.opt.falsch .buchst { background: var(--ziegel); color: #fff; }
.opt:disabled { cursor: default; }
.opt:disabled:not(.richtig):not(.falsch) { opacity: .55; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chipbtn { border: 1.5px solid var(--linie); background: var(--papier-2); border-radius: 999px; padding: .4rem .8rem; cursor: pointer; font-weight: 600; font-size: .88rem; }
.chipbtn.on { background: var(--loden); color: #fff; border-color: var(--loden); }
.score-ring { width: 150px; height: 150px; margin: .5rem auto; position: relative; display: grid; place-items: center; }
.score-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.score-ring .z { font-size: 2.1rem; font-weight: 750; line-height: 1; }
.score-ring .z small { display: block; font-size: .85rem; color: var(--tinte-3); font-weight: 500; }

/* ---------- Fortschritt ---------- */
.level-card { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; }
.level-card .ico { font-size: 2.8rem; line-height: 1; }
.level-card .titel { font-size: 1.3rem; font-weight: 700; }
.kennzahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.kz { background: var(--papier-2); border-radius: var(--radius-s); padding: .7rem .6rem; text-align: center; }
.kz .z { font-size: 1.45rem; font-weight: 750; line-height: 1.1; }
.kz .l { font-size: .75rem; color: var(--tinte-3); margin-top: .2rem; }
.heat { display: grid; grid-template-rows: repeat(7, 11px); grid-auto-flow: column; gap: 3px; margin-top: .6rem; overflow-x: auto; }
.heat i { width: 11px; height: 11px; border-radius: 2px; background: var(--nebel-tief); }
.heat i.h1 { background: #b8d9bd; } .heat i.h2 { background: #7fbb8a; } .heat i.h3 { background: #3f7d4a; } .heat i.h4 { background: #245c31; }
:root[data-theme="dark"] .heat i.h1 { background: #2e4f36; } :root[data-theme="dark"] .heat i.h2 { background: #3f7d4a; }
.kurs-row { margin: .55rem 0; }
.kurs-row .lbl { display: flex; justify-content: space-between; font-size: .9rem; margin-bottom: .25rem; gap: .5rem; }
.kurs-row .lbl b { font-weight: 650; }
.kurs-row .lbl .z { color: var(--tinte-3); font-size: .82rem; white-space: nowrap; }
.legende { display: flex; gap: .9rem; font-size: .78rem; color: var(--tinte-3); margin-top: .5rem; flex-wrap: wrap; }
.legende i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .3rem; vertical-align: -1px; }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .6rem; }
.badge {
  background: var(--papier-2); border-radius: var(--radius-s); padding: .7rem .4rem; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: .2rem; border: 1px solid transparent;
}
.badge .ico { font-size: 1.7rem; line-height: 1; }
.badge .t { font-size: .78rem; font-weight: 650; line-height: 1.2; }
.badge .d { font-size: .68rem; color: var(--tinte-3); line-height: 1.2; }
.badge.locked { opacity: .45; filter: grayscale(1); }
.badge.neu { border-color: var(--bernstein); }
.dran { padding: .5rem 0; border-bottom: 1px solid var(--linie); font-size: .92rem; }
.dran:last-child { border-bottom: none; }
.dran .k { font-size: .75rem; color: var(--tinte-3); }

/* ---------- Rangliste ---------- */
.rang { display: grid; grid-template-columns: 34px 44px 1fr auto; gap: .6rem; align-items: center; padding: .7rem 0; border-bottom: 1px solid var(--linie); }
.rang:last-child { border-bottom: none; }
.rang .nr { font-weight: 750; font-size: 1.1rem; color: var(--tinte-3); text-align: center; }
.rang .nr.gold { color: var(--bernstein-tief); }
.rang .av { font-size: 1.8rem; line-height: 1; text-align: center; }
.rang .nm { font-weight: 650; }
.rang .sub { font-size: .78rem; color: var(--tinte-3); }
.rang .xp { font-weight: 750; text-align: right; }
.rang .xp small { display: block; font-weight: 500; color: var(--tinte-3); font-size: .75rem; }
.rang.ich { background: var(--papier-2); margin: 0 -.6rem; padding: .7rem .6rem; border-radius: var(--radius-s); }

/* ---------- Verlauf ---------- */
.hitem { padding: .55rem 0; border-bottom: 1px solid var(--linie); font-size: .92rem; }
.hitem:last-child { border-bottom: none; }
.dot { display: inline-block; width: .65rem; height: .65rem; border-radius: 50%; margin-right: .45rem; vertical-align: middle; }
.d-richtig { background: var(--moos); } .d-teilweise { background: var(--gelb); } .d-falsch { background: var(--ziegel); } .d-neu { background: var(--linie); }
.hbtn.on { background: var(--loden); color: #fff; border-color: var(--loden); }

/* ---------- Konfetti ---------- */
.konfetti { position: fixed; inset: 0; pointer-events: none; z-index: 80; overflow: hidden; }
.konfetti i { position: absolute; top: -10px; width: 9px; height: 14px; border-radius: 2px; animation: fall 2.4s ease-in forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); opacity: .2; } }

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

/* ---------- Folienbetrachter ---------- */
.folien { margin-top: .4rem; }
.folie-rahmen {
  position: relative; background: #fff; border: 1px solid var(--linie); border-radius: var(--radius-s);
  overflow: hidden; aspect-ratio: 1100 / 619; touch-action: pan-y;
}
.folie-rahmen img { display: block; width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; background: #fff; }
.folie-rahmen .laden { position: absolute; inset: 0; display: grid; place-items: center; color: #7b887a; font-size: .85rem; }
.folie-nav {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--linie);
  background: var(--papier-2); color: var(--tinte); font-size: 1.35rem; line-height: 1;
  display: grid; place-items: center; cursor: pointer; padding: 0 0 2px;
}
.folie-nav:disabled { opacity: .3; cursor: default; }
.folie-fuss { display: flex; align-items: center; gap: .5rem; margin-top: .45rem; font-size: .8rem; color: var(--tinte-3); }
.folie-fuss .pos { text-align: center; }
.folie-fuss a { color: var(--tinte-3); margin-left: auto; white-space: nowrap; }
.folie-fuss .passend { color: var(--moos); font-weight: 650; }
#modal { overflow: auto; }
#modal img { background: #fff; }

/* ---------- Erklaerung der Symbole oben rechts ---------- */
.infopop {
  position: fixed; top: calc(60px + env(safe-area-inset-top)); right: 10px; z-index: 40; width: min(360px, calc(100vw - 20px));
  background: var(--papier); color: var(--tinte); border-radius: var(--radius); box-shadow: 0 10px 40px rgba(0,0,0,.28);
  padding: .9rem 1rem; border: 1px solid var(--linie);
}
.infopop .eintrag { display: grid; grid-template-columns: 2.2rem 1fr; gap: .6rem; padding: .55rem .4rem; border-radius: var(--radius-s); }
.infopop .eintrag.aktiv { background: var(--papier-2); }
.infopop .eintrag .ico { font-size: 1.5rem; line-height: 1.2; text-align: center; }
.infopop .eintrag b { display: block; margin-bottom: .1rem; }
.infopop .eintrag p { font-size: .86rem; color: var(--tinte-2); line-height: 1.4; }
.infopop .row { margin-top: .5rem; justify-content: space-between; }