/* Pilzlupe – eigene Gestaltung „Waldlicht“ (Design-Runde 01.11.2026, Mike: „Das aktuelle passt sehr gut für Ausguck,
   Logbuch und Enterhaken, aber die Pilzlupe muss zum Entdecken einladen … ein modernes, leicht verspieltes Design, das
   zum Lernen einlädt“). Liegt auf der gemeinsamen Grundlage (grundlage.css: Raster, Bausteine, Barrierefreiheit), stimmt
   aber deren Farben, Ecken und Knöpfe für die Pilzlupe um:
   - Pergament (hell) und Nachtwald (dunkel) statt Grau, Moos als Akzent, Pfifferling-Gold für Sporen und Abzeichen.
   - Weiche Formen: Karten 20 px, Knöpfe als Pillen, Überschriften in Fraunces (pilzschrift.css), Text weiter Inter.
   - Knöpfe in normaler Schreibweise (in Ausguck, Logbuch, Enterhaken bleiben sie in Großbuchstaben).
   - Rot, Bernstein und Grün tragen weiter nur Bedeutung (Gift, Warnung, ausgeschlossen) und kommen immer mit Wort und
     Zeichen. Speisepilze tragen nie Grün. Spielfarben (--ton) stehen nur auf Spielkacheln.
   Handy zuerst: oben Marke, Stufe und Notfall, unten ein schwebendes Dock. Ab 960 px die Seitenleiste. */

:root {
  --pl-grund: light-dark(oklch(0.968 0.016 95), oklch(0.185 0.02 155));
  --pl-grund-2: light-dark(oklch(0.945 0.022 100), oklch(0.16 0.02 155));
  --pl-flaeche: light-dark(oklch(0.995 0.006 95), oklch(0.235 0.022 155));
  --pl-flaeche-2: light-dark(oklch(0.942 0.02 100), oklch(0.285 0.024 155));
  --pl-hover: light-dark(oklch(0.958 0.02 100), oklch(0.27 0.025 155));
  --pl-text: light-dark(oklch(0.25 0.03 150), oklch(0.95 0.012 110));
  --pl-text-2: light-dark(oklch(0.45 0.03 140), oklch(0.79 0.025 125));
  --pl-text-3: light-dark(oklch(0.58 0.025 135), oklch(0.63 0.02 130));
  --pl-rand: light-dark(oklch(0.32 0.04 140 / 0.14), oklch(1 0 0 / 0.11));
  --pl-rand-leise: light-dark(oklch(0.32 0.04 140 / 0.08), oklch(1 0 0 / 0.065));
  --pl-moos: light-dark(oklch(0.46 0.11 142), oklch(0.82 0.14 132));
  --pl-moos-voll: light-dark(oklch(0.46 0.115 143), oklch(0.78 0.15 133));
  --pl-auf-moos: light-dark(oklch(1 0 0), oklch(0.2 0.04 150));
  --pl-moos-flaeche: light-dark(oklch(0.93 0.05 128), oklch(0.32 0.06 140));
  --pl-tinte: light-dark(oklch(0.28 0.045 152), oklch(0.94 0.025 100));
  --pl-tinte-hover: light-dark(oklch(0.36 0.05 150), oklch(0.87 0.03 100));
  --pl-auf-tinte: light-dark(oklch(0.99 0.008 95), oklch(0.19 0.025 155));
  --pl-gold: light-dark(oklch(0.52 0.11 75), oklch(0.86 0.14 88));
  --pl-gold-voll: oklch(0.84 0.155 88);
  --pl-gold-flaeche: light-dark(oklch(0.95 0.06 95), oklch(0.33 0.06 85));
  --pl-linie: oklch(0.3 0.045 60);
  --pl-schatten: 0 1px 1px light-dark(oklch(0.3 0.05 140 / 0.05), oklch(0 0 0 / 0.25)), 0 10px 28px -14px light-dark(oklch(0.3 0.07 140 / 0.3), oklch(0 0 0 / 0.6));
  --pl-schatten-hoch: 0 2px 4px light-dark(oklch(0.3 0.05 140 / 0.06), oklch(0 0 0 / 0.3)), 0 22px 44px -18px light-dark(oklch(0.3 0.08 140 / 0.38), oklch(0 0 0 / 0.7));
  --pl-display: "Pilzlupe Fraunces", "Iowan Old Style", Georgia, serif;
  --pl-reiter: 66px;
  --pl-federnd: cubic-bezier(.34, 1.56, .64, 1);

  /* Die gemeinsamen Variablen umstimmen: Bausteine aus grundlage.css (Knöpfe, Felder, Pillen, Wechsler) folgen */
  --g-hintergrund: var(--pl-grund); --g-seitenleiste: var(--pl-grund-2); --g-flaeche: var(--pl-flaeche);
  --g-flaeche-hover: var(--pl-hover); --g-flaeche-2: var(--pl-flaeche-2); --g-auswahl: var(--pl-moos-flaeche); --g-erhaben: var(--pl-flaeche);
  --g-text: var(--pl-text); --g-text-2: var(--pl-text-2); --g-text-3: var(--pl-text-3); --g-text-umgekehrt: var(--pl-auf-tinte);
  --g-rand: var(--pl-rand); --g-rand-leise: var(--pl-rand-leise);
  --g-akzent: var(--pl-moos); --g-akzent-flaeche: var(--pl-moos-flaeche); --g-akzent-voll: var(--pl-moos-voll);
  --g-knopf: var(--pl-tinte); --g-knopf-hover: var(--pl-tinte-hover);
  --g-fokus: 0 0 0 3px light-dark(oklch(0.46 0.11 142 / 0.25), oklch(0.82 0.14 132 / 0.35));
  --g-ecke: 20px; --g-ecke-bedien: 12px; --g-ecke-klein: 8px; --g-ecke-gross: 26px;
  --g-schatten-karte: var(--pl-schatten);
  --g-schatten-fenster: var(--pl-schatten-hoch);
}
body { min-height: 100vh; background:
  radial-gradient(60rem 40rem at 110% -10%, light-dark(oklch(0.93 0.06 120 / 0.55), oklch(0.3 0.06 140 / 0.45)), transparent 60%),
  radial-gradient(50rem 36rem at -20% 110%, light-dark(oklch(0.94 0.06 85 / 0.5), oklch(0.27 0.05 90 / 0.25)), transparent 60%),
  var(--pl-grund); background-attachment: fixed; }
h1, h2, .ober + h2, .seitenkopf h2, .held h2 { font-family: var(--pl-display); font-weight: 700; letter-spacing: -0.01em; }
h3 { font-weight: 650; }
.z { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bild { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.leise { color: var(--g-text-2); }
.klein { font-size: var(--g-fs-1); line-height: var(--g-lh-1); }
.latein { font-style: italic; color: var(--g-text-2); }
.ober { margin: 0 0 4px; font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--pl-moos); }
.nur-leser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- Knöpfe, Pillen, Felder (Pilzlupe-Fassung) --------------------------------------------------- */
.g-knopf { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 650; height: 40px; padding: 0 18px; border-radius: 999px; text-decoration: none;
  transition: background var(--g-dauer), box-shadow var(--g-dauer), transform .18s var(--pl-federnd); }
.g-knopf:hover { transform: translateY(-1px); }
.g-knopf:active { transform: translateY(1px) scale(.98); }
.g-knopf > svg { width: 18px; height: 18px; }
.g-knopf.akzent { background: linear-gradient(180deg, color-mix(in oklch, var(--pl-moos-voll) 88%, white), var(--pl-moos-voll)); color: var(--pl-auf-moos);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / .25), 0 6px 16px -6px color-mix(in oklch, var(--pl-moos-voll) 70%, transparent); }
.g-knopf.akzent:hover { background: var(--pl-moos-voll); }
.g-knopf.gross { height: 50px; padding: 0 24px; font-size: 15px; }
.g-knopf.klein { height: 32px; padding: 0 12px; font-size: 13px; }
.g-knopf.voll { width: 100%; }
.g-pille { border-radius: 999px; }
.g-pille .z { width: 13px; height: 13px; stroke-width: 2; }
.g-pille.neutral { color: var(--g-text-2); background: var(--g-flaeche-2); }
.g-pille.gold { color: light-dark(oklch(0.42 0.09 70), oklch(0.88 0.13 90)); background: var(--pl-gold-flaeche); }
.g-segment { border-radius: 999px; padding: 4px; }
.g-segment button { border-radius: 999px; height: 32px; padding: 0 14px; }
.g-feld { border-radius: var(--g-ecke-bedien); }
.g-zahl { background: var(--pl-flaeche-2); }

/* --- Rahmen: Kopf, Dock, Seitenleiste ------------------------------------------------------------ */
.rahmen { min-height: 100vh; }
.leiste { display: none; }
.kopf { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--g-2);
  padding: calc(env(safe-area-inset-top) + 10px) var(--g-4) 10px; background: color-mix(in oklch, var(--pl-grund) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid var(--pl-rand-leise); }
.kopf .marke { margin-right: auto; min-width: 0; }
.marke { padding: 0; }
.marke h1 { font-size: 22px; line-height: 28px; }
.notfall-knopf { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 10px; border-radius: 999px; flex: none;
  color: var(--g-schlecht); background: var(--g-schlecht-flaeche); font-weight: 650; font-size: var(--g-fs-1); text-decoration: none; }
.notfall-knopf svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
@media (max-width: 400px) { .notfall-knopf span { display: none; } .notfall-knopf { padding: 0 9px; } }
.profilchip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px 0 4px; border-radius: 999px; text-decoration: none; color: var(--g-text);
  background: var(--pl-flaeche); box-shadow: 0 0 0 1px var(--pl-rand-leise), 0 2px 6px -3px oklch(0.3 0.05 140 / .3); font-weight: 650; font-size: 13px; flex: none; }
.profilchip:empty { display: none; }
.chip-stufe { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--pl-moos-voll); color: var(--pl-auf-moos);
  font: 700 13px/1 var(--pl-display); }
.chip-sporen, .chip-serie { display: inline-flex; align-items: center; gap: 3px; font-variant-numeric: tabular-nums; }
.chip-sporen .z { width: 15px; height: 15px; color: var(--pl-gold); stroke-width: 2.2; }
.chip-serie .z { width: 15px; height: 15px; color: oklch(0.66 0.19 45); }
.chip-serie.kalt .z { color: var(--g-text-3); }
.inhalt { width: 100%; max-width: 1120px; margin: 0 auto; padding: var(--g-4) var(--g-4) calc(var(--pl-reiter) + env(safe-area-inset-bottom) + 40px); outline: none; }
.reiter { position: fixed; z-index: 30; left: 10px; right: 10px; bottom: calc(env(safe-area-inset-bottom) + 10px); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  height: var(--pl-reiter); padding: 6px; border-radius: 24px; background: color-mix(in oklch, var(--pl-flaeche) 86%, transparent);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 0 0 1px var(--pl-rand-leise), var(--pl-schatten-hoch); }
.reiter a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--g-text-2); border-radius: 18px;
  text-decoration: none; font-size: 11px; font-weight: 600; letter-spacing: .01em; min-width: 0; transition: color var(--g-dauer); }
.reiter a > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reiter-zeichen { display: grid; place-items: center; width: 44px; height: 28px; border-radius: 999px; transition: background .25s, transform .3s var(--pl-federnd); }
.reiter a .z { width: 22px; height: 22px; }
.reiter a[aria-current="page"] { color: var(--g-text); }
.reiter a[aria-current="page"] .reiter-zeichen { background: var(--pl-moos-flaeche); color: var(--pl-moos); transform: translateY(-1px); }
.reiter a.notfall { color: var(--g-schlecht); }

@media (min-width: 960px) {
  .rahmen { display: grid; grid-template-columns: 260px minmax(0, 1fr); }
  .leiste { display: flex; flex-direction: column; gap: var(--g-2); position: sticky; top: 0; height: 100vh; overflow-y: auto;
    background: color-mix(in oklch, var(--pl-grund-2) 80%, transparent); border-right: 1px solid var(--pl-rand-leise); padding: var(--g-4) var(--g-3); }
  .leiste .marke { padding: 0 var(--g-2) var(--g-1); }
  .leiste nav { display: flex; flex-direction: column; gap: 2px; }
  .leiste .g-navpunkt { min-height: 42px; border-radius: 14px; font-size: 15px; padding: 8px 12px; text-decoration: none; }
  .leiste .g-navpunkt > svg { width: 20px; height: 20px; }
  .leiste .g-navpunkt[aria-current="page"] { background: var(--pl-flaeche); box-shadow: var(--pl-schatten); }
  .leiste nav a.notfall, .leiste nav a.notfall .z { color: var(--g-schlecht); }
  .leiste-fuss { margin-top: auto; padding: var(--g-3) var(--g-2) 0; color: var(--g-text-2); font-size: var(--g-fs-1); line-height: var(--g-lh-1); }
  .kopf, .reiter { display: none; }
  .inhalt { padding: var(--g-6) var(--g-8) var(--g-12); }
}
.leiste-profil:empty { display: none; }

/* --- Bausteine -------------------------------------------------------------------------------------- */
.karte { background: var(--pl-flaeche); border: 1px solid var(--pl-rand-leise); border-radius: var(--g-ecke); box-shadow: var(--pl-schatten); padding: var(--g-4); }
.karte + .karte, .abschnitt + .abschnitt { margin-top: var(--g-4); }
.abschnitt { margin-top: var(--g-8); }
.abschnitt > h2, .karte > h2 { display: flex; align-items: center; gap: var(--g-2); margin-bottom: var(--g-3); font-size: 20px; line-height: 26px; }
.karte > h2 { font-size: 18px; }
.abschnitt > h2 .z, .karte > h2 .z { color: var(--pl-moos); width: 20px; height: 20px; }
.abschnitt > h2 .zaehler, .karte > h2 .zaehler { margin-left: auto; font: 600 var(--g-fs-1)/1 var(--g-schrift); color: var(--g-text-2); }
a.zaehler { color: var(--pl-moos); text-decoration: none; }
.zeile { display: flex; align-items: center; gap: var(--g-2); flex-wrap: wrap; }
.seitenkopf { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--g-3); flex-wrap: wrap; margin-bottom: var(--g-5); }
.seitenkopf h2 { font-size: 30px; line-height: 36px; max-width: 24ch; }
.seitenkopf p { margin: var(--g-1) 0 0; color: var(--g-text-2); }
.seitenkopf p.ober { color: var(--pl-moos); margin: 0 0 4px; }
@media (max-width: 520px) { .seitenkopf h2 { font-size: 25px; line-height: 31px; } }
.zurueck { display: inline-flex; align-items: center; gap: 4px; color: var(--g-text-2); text-decoration: none; font-weight: 600; margin-bottom: var(--g-3); }
.zurueck .z { width: 16px; height: 16px; }
.leer { text-align: center; padding: var(--g-8) var(--g-4); color: var(--g-text-2); }
.leer .bild, .leer .pilzbild { width: 96px; height: 96px; color: var(--pl-moos); margin: 0 auto var(--g-3); display: block; }
.leer .pilzbild { color: var(--pl-linie); }
.knopfreihe { display: flex; gap: var(--g-2); flex-wrap: wrap; }
.knopfreihe.mitte { justify-content: center; }
.raster { display: grid; gap: var(--g-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.raster.klein { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.doppelt { display: grid; gap: var(--g-3); margin-top: var(--g-3); }
@media (min-width: 720px) { .doppelt { grid-template-columns: 1fr 1fr; } }
.hinweis-demo { display: flex; gap: var(--g-2); align-items: center; padding: 10px 14px; border-radius: 14px; background: var(--g-warnung-flaeche); color: var(--g-text); margin-bottom: var(--g-4); font-size: var(--g-fs-1); line-height: var(--g-lh-1); }
.hinweis-demo .z { color: var(--g-warnung); }
.liste-haken { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.liste-haken li { position: relative; padding-left: 26px; }
.liste-haken li::before { content: ""; position: absolute; left: 4px; top: 6px; width: 12px; height: 7px; border-left: 2px solid var(--pl-moos); border-bottom: 2px solid var(--pl-moos); transform: rotate(-45deg); }

/* Balken (Sporen, Abzeichen) */
.pl-balken { height: 8px; border-radius: 999px; background: var(--pl-flaeche-2); overflow: hidden; box-shadow: inset 0 1px 1px oklch(0 0 0 / .06); }
.pl-balken i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, color-mix(in oklch, var(--pl-moos-voll) 75%, white), var(--pl-moos-voll));
  transition: width 1.1s cubic-bezier(.2, .8, .2, 1); }
.pl-balken.gold i { background: linear-gradient(90deg, oklch(0.9 0.12 95), var(--pl-gold-voll)); }

/* Auswahlchips (Prüfungen, Fundort) */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { min-height: 38px; padding: 7px 14px; border: 1px solid var(--g-rand); border-radius: 999px; background: var(--pl-flaeche);
  cursor: pointer; font-size: var(--g-fs-2); line-height: 1.25; transition: background var(--g-dauer), border-color var(--g-dauer), transform .2s var(--pl-federnd); }
.chip:hover { background: var(--pl-hover); }
.chip:active { transform: scale(.95); }
.chip[aria-pressed="true"] { background: var(--pl-moos-flaeche); border-color: var(--pl-moos); color: var(--g-text); font-weight: 650; }
.chip[aria-pressed="true"]::before { content: "✓ "; color: var(--pl-moos); }
.chip:disabled { opacity: .5; cursor: progress; }

/* Ring: Bestimmungsgrad */
.ring { --wert: 0; position: relative; width: 116px; height: 116px; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 10; }
.ring .spur { stroke: var(--pl-flaeche-2); }
.ring .wert { stroke: var(--pl-moos-voll); stroke-linecap: round; stroke-dasharray: 289; stroke-dashoffset: calc(289 - 289 * var(--wert) / 100);
  transition: stroke-dashoffset 1.2s cubic-bezier(.2, .8, .2, 1), stroke .3s; }
.ring.fertig .wert { stroke: var(--pl-gold-voll); }
.ring .mitte { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring .mitte strong { font: 700 28px/1 var(--pl-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ring .mitte span { font-size: 10px; color: var(--g-text-2); margin-top: 4px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.ring.klein { width: 46px; height: 46px; }
.ring.klein circle { stroke-width: 12; }
.ring.klein .mitte strong { font: 700 12px/1 var(--g-schrift); }
.ring.klein .mitte span { display: none; }

/* --- Entdecken (Start) ------------------------------------------------------------------------------ */
.held { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--g-4); align-items: center;
  border-radius: var(--g-ecke-gross); padding: var(--g-6) var(--g-5); color: var(--g-text);
  background: radial-gradient(90% 120% at 100% 100%, light-dark(oklch(0.88 0.08 125), oklch(0.36 0.08 140)), transparent 70%),
    radial-gradient(70% 90% at 0% 0%, light-dark(oklch(0.97 0.04 95), oklch(0.28 0.04 120)), transparent 70%), var(--pl-flaeche);
  box-shadow: var(--pl-schatten), inset 0 0 0 1px var(--pl-rand-leise); }
.held h2 { font-size: 38px; line-height: 42px; letter-spacing: -0.02em; max-width: 12ch; }
.held-text > p:not(.ober) { margin: var(--g-3) 0 var(--g-5); color: var(--g-text-2); max-width: 44ch; }
.held-bild { position: relative; justify-self: center; width: 210px; height: 210px; }
.held-bild .pilzbild { width: 100%; height: 100%; color: var(--pl-linie); filter: drop-shadow(0 12px 18px oklch(0.3 0.06 100 / .25)); animation: wiegen 6s ease-in-out infinite; transform-origin: 50% 90%; }
.held-bild .held-lupe { position: absolute; right: -6px; top: 6px; width: 92px; height: 92px; color: var(--pl-tinte); stroke-width: 1.6; animation: suchen 5s ease-in-out infinite;
  filter: drop-shadow(0 6px 8px oklch(0 0 0 / .18)); }
.held-bild .spore { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--pl-gold-voll); opacity: 0; animation: steigen 5s ease-in infinite; }
.held-bild .s1 { left: 30%; bottom: 40%; } .held-bild .s2 { left: 55%; bottom: 45%; animation-delay: 1.6s; width: 6px; height: 6px; } .held-bild .s3 { left: 42%; bottom: 38%; animation-delay: 3.1s; }
@keyframes wiegen { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes suchen { 0%, 100% { transform: translate(0, 0) rotate(0); } 33% { transform: translate(-28px, 22px) rotate(-8deg); } 66% { transform: translate(-6px, 34px) rotate(4deg); } }
@keyframes steigen { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 15% { opacity: .9; } 100% { opacity: 0; transform: translate(14px, -110px) scale(1.1); } }
@media (min-width: 720px) { .held { grid-template-columns: minmax(0, 1fr) 240px; padding: var(--g-8); } .held h2 { font-size: 46px; line-height: 50px; } .held-bild { width: 240px; height: 240px; } }
@media (max-width: 520px) { .held { padding: var(--g-5) var(--g-4); } .held h2 { font-size: 32px; line-height: 36px; } .held-bild { position: absolute; right: -34px; top: -26px; width: 128px; height: 128px; opacity: .5; } .held-bild .held-lupe { width: 52px; height: 52px; right: 4px; } .held-text { position: relative; } .held .knopfreihe .g-knopf { flex: 1 1 auto; } }

/* Profil: Stufe, Sporen, Serie */
.profil { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--g-4); align-items: center; margin-top: var(--g-3); padding: var(--g-4);
  text-decoration: none; color: inherit; background: var(--pl-flaeche); border: 1px solid var(--pl-rand-leise); border-radius: var(--g-ecke); box-shadow: var(--pl-schatten);
  transition: transform .25s var(--pl-federnd), box-shadow var(--g-dauer); }
.profil:hover { transform: translateY(-2px); box-shadow: var(--pl-schatten-hoch); }
.profil-stufe { --anteil: 0; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--pl-gold-voll) calc(var(--anteil) * 360deg), var(--pl-flaeche-2) 0); }
.profil-stufe span { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--pl-moos-voll); color: var(--pl-auf-moos);
  font: 700 22px/1 var(--pl-display); box-shadow: inset 0 -3px 0 oklch(0 0 0 / .12); }
.profil-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.profil-text strong { font: 700 19px/1.2 var(--pl-display); }
.profil-text .pl-balken { margin-top: 4px; }
.profil-serie { display: flex; flex-direction: column; align-items: center; min-width: 54px; color: var(--g-text-2); font-size: 11px; font-weight: 600; }
.profil-serie .z { width: 26px; height: 26px; color: oklch(0.66 0.19 45); stroke-width: 1.8; }
.profil-serie strong { font: 700 20px/1 var(--pl-display); color: var(--g-text); }
.profil-serie.kalt .z { color: var(--g-text-3); }
.profil.klein { grid-template-columns: auto minmax(0, 1fr); gap: var(--g-3); margin: var(--g-2) 0 var(--g-3); padding: 10px 12px; box-shadow: none; }
.profil.klein .profil-stufe { width: 44px; height: 44px; } .profil.klein .profil-stufe span { width: 35px; height: 35px; font-size: 17px; }
.profil.klein .profil-text strong { font-size: 15px; }
.profil.klein .leise { font-size: 11px; line-height: 14px; }
.profil.klein .profil-serie { display: none; }
.leiste-profil .profil.klein { grid-template-columns: auto minmax(0, 1fr) auto; }
.leiste-profil .profil.klein .profil-serie { display: flex; min-width: 34px; }
.leiste-profil .profil.klein .profil-serie .z { width: 20px; height: 20px; }
.leiste-profil .profil.klein .profil-serie strong { font-size: 15px; }
@media (min-width: 960px) { .profil-haupt { display: none; } .profil-haupt + .doppelt, .profil-haupt + .tageskarte { margin-top: var(--g-3); } }

/* Tagesaufgabe, Pilz des Tages */
.tageskarte { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--g-3); align-items: center; text-decoration: none; color: inherit;
  background: linear-gradient(135deg, var(--pl-gold-flaeche), var(--pl-flaeche) 70%); transition: transform .25s var(--pl-federnd), box-shadow var(--g-dauer); }
.profil + .tageskarte { margin-top: var(--g-3); }
.tageskarte:hover, .pdt:hover { transform: translateY(-2px); box-shadow: var(--pl-schatten-hoch); }
.tageskarte > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; }
.tageskarte strong { font: 700 19px/1.2 var(--pl-display); }
.tageskarte .ober { color: var(--pl-gold); }
.tag-symbol { width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center; background: var(--pl-gold-voll); color: oklch(0.3 0.06 70);
  box-shadow: inset 0 -3px 0 oklch(0 0 0 / .1); transform: rotate(-6deg); }
.tag-symbol .z { width: 28px; height: 28px; stroke-width: 2; }
.tageskarte.fertig .tag-symbol { background: var(--pl-moos-voll); color: var(--pl-auf-moos); transform: none; }
.pfeil-rund { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--pl-tinte); color: var(--pl-auf-tinte); }
.pdt { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--g-3); align-items: center; text-align: left; cursor: pointer; font: inherit; color: inherit;
  background: radial-gradient(70% 120% at 0% 50%, color-mix(in oklch, var(--hf) 32%, transparent), transparent 75%), var(--pl-flaeche);
  transition: transform .25s var(--pl-federnd), box-shadow var(--g-dauer); }
.karte + .pdt { margin-top: 0; }
.pdt-bild .pilzbild { width: 96px; height: 96px; color: var(--pl-linie); display: block; }
.pdt-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pdt-text strong { font: 700 19px/1.2 var(--pl-display); }
.pdt-hinweis { font-size: var(--g-fs-1); line-height: var(--g-lh-1); color: var(--g-text-2); }
.pdt .zeile { margin-top: 4px; }
.pdt .g-pille, .albumkarte .g-pille, .duell-seite .g-pille, .raetsel-loesung .g-pille { white-space: normal; height: auto; min-height: 22px; padding: 3px 9px; line-height: 1.25; text-align: left; border-radius: 12px; }

/* Spiele als Kacheln */
.spielband { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: var(--g-3); overflow-x: auto; padding: 4px 2px 12px; margin: -4px -2px 0;
  scroll-snap-type: x mandatory; scrollbar-width: none; }
.spielband::-webkit-scrollbar { display: none; }
.spielband .spielkachel { scroll-snap-align: start; }
@media (max-width: 720px) { .spielband { margin-right: calc(-1 * var(--g-4)); padding-right: var(--g-4); grid-auto-columns: 150px; } }
.spielraster { display: grid; gap: var(--g-3); margin-top: var(--g-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.spielkachel { --ton: 140; position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 150px; padding: var(--g-4); border-radius: 22px; text-decoration: none; color: var(--g-text);
  background: linear-gradient(160deg, light-dark(oklch(0.95 0.045 var(--ton)), oklch(0.31 0.055 var(--ton))), light-dark(oklch(0.9 0.07 var(--ton)), oklch(0.26 0.05 var(--ton))));
  box-shadow: inset 0 0 0 1px light-dark(oklch(0.5 0.08 var(--ton) / .12), oklch(1 0 0 / .06)), var(--pl-schatten); overflow: hidden;
  transition: transform .3s var(--pl-federnd), box-shadow var(--g-dauer); }
.spielkachel::after { content: ""; position: absolute; right: -30px; bottom: -40px; width: 120px; height: 120px; border-radius: 50%;
  background: light-dark(oklch(0.85 0.09 var(--ton) / .55), oklch(0.4 0.08 var(--ton) / .5)); }
.spielkachel:hover { transform: translateY(-3px) rotate(-.6deg); box-shadow: inset 0 0 0 1px light-dark(oklch(0.5 0.08 var(--ton) / .2), oklch(1 0 0 / .1)), var(--pl-schatten-hoch); }
.spielkachel:active { transform: scale(.98); }
.sk-zeichen { width: 44px; height: 44px; border-radius: 15px; display: grid; place-items: center; position: relative; z-index: 1;
  background: light-dark(oklch(0.52 0.14 var(--ton)), oklch(0.8 0.12 var(--ton))); color: light-dark(white, oklch(0.2 0.04 var(--ton)));
  box-shadow: inset 0 -3px 0 oklch(0 0 0 / .14); }
.sk-zeichen .z { width: 24px; height: 24px; stroke-width: 2; }
.spielkachel strong { font: 700 17px/1.2 var(--pl-display); position: relative; z-index: 1; margin-top: 4px; }
.spielkachel.gross strong { font-size: 20px; }
.sk-text { color: var(--g-text-2); position: relative; z-index: 1; }
.sk-stand { margin-top: auto; font-size: 12px; font-weight: 650; color: light-dark(oklch(0.42 0.1 var(--ton)), oklch(0.85 0.09 var(--ton))); position: relative; z-index: 1; }
.kachel { display: flex; flex-direction: column; gap: var(--g-2); text-decoration: none; color: inherit; background: var(--pl-flaeche);
  border: 1px solid var(--pl-rand-leise); border-radius: var(--g-ecke); padding: var(--g-4); box-shadow: var(--pl-schatten);
  transition: box-shadow var(--g-dauer), transform .25s var(--pl-federnd); min-height: 140px; }
.kachel:hover { box-shadow: var(--pl-schatten-hoch); transform: translateY(-2px); }
.kachel .bild, .kachel > .z { width: 44px; height: 44px; color: var(--pl-moos); }
.kachel > .z { stroke-width: 1.5; }
.kachel strong { font: 700 17px/1.25 var(--pl-display); }
.kachel span { color: var(--g-text-2); }
.kachel.flach { min-height: 0; }
.tipp { display: grid; grid-template-columns: auto 1fr; gap: var(--g-3); align-items: start; }
.tipp .nr { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--pl-moos-flaeche); color: var(--pl-moos); font: 700 17px/1 var(--pl-display); transform: rotate(-5deg); }
.tipp p { margin: 2px 0 0; color: var(--g-text-2); }

/* Fundkarten */
.fundkarte { display: grid; grid-template-columns: 68px minmax(0, 1fr) auto; gap: var(--g-3); align-items: center; text-decoration: none; color: inherit;
  background: var(--pl-flaeche); border: 1px solid var(--pl-rand-leise); border-radius: var(--g-ecke); padding: 10px; box-shadow: var(--pl-schatten);
  transition: box-shadow var(--g-dauer), transform .25s var(--pl-federnd); }
.fund-zahl { display: grid; place-content: center; text-align: center; min-width: 46px; height: 46px; border-radius: 999px; background: var(--pl-moos-flaeche); color: var(--pl-moos); }
.fund-zahl strong { font: 700 15px/1 var(--g-schrift); }
.fund-zahl span { font-size: 10px; line-height: 1.1; }
.fundkarte:hover { box-shadow: var(--pl-schatten-hoch); transform: translateY(-2px); }
.fundkarte .vorschau { width: 68px; height: 68px; border-radius: 14px; object-fit: cover; background: var(--pl-moos-flaeche); display: grid; place-items: center; color: var(--pl-moos); }
.fundkarte .vorschau .z { width: 30px; height: 30px; }
.fundkarte strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.fundkarte .unter { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 4px; font-size: var(--g-fs-1); color: var(--g-text-2); }

/* --- Sammelbuch -------------------------------------------------------------------------------------- */
.zahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g-2); margin-bottom: var(--g-4); }
.zahlen a, .zahlen > div { background: var(--pl-flaeche); border: 1px solid var(--pl-rand-leise); border-radius: 18px; padding: var(--g-3); text-decoration: none; color: inherit; box-shadow: var(--pl-schatten); }
.zahlen strong { display: block; font: 700 26px/32px var(--pl-display); font-variant-numeric: tabular-nums; }
.zahlen span { color: var(--g-text-2); font-size: var(--g-fs-1); }
@media (max-width: 560px) { .zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tabs { display: flex; gap: 4px; padding: 4px; margin-bottom: var(--g-4); border-radius: 999px; background: var(--pl-flaeche-2); box-shadow: inset 0 0 0 1px var(--pl-rand-leise); overflow-x: auto; scrollbar-width: none; }
.tab { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 999px; color: var(--g-text-2);
  text-decoration: none; font-weight: 650; white-space: nowrap; transition: background var(--g-dauer), color var(--g-dauer); }
.tab .z { width: 18px; height: 18px; }
.tab[aria-current="page"] { background: var(--pl-flaeche); color: var(--g-text); box-shadow: var(--pl-schatten); }
.tab[aria-current="page"] .z { color: var(--pl-moos); }
.tab .g-zahl { margin-left: 2px; }
.filter { margin-bottom: var(--g-3); }

/* Abzeichen: Orden in drei Stufen */
.abz-summe { display: flex; align-items: baseline; gap: var(--g-2); flex-wrap: wrap; margin: var(--g-5) 0 var(--g-3); }
.abz-summe strong { font: 700 24px/1 var(--pl-display); }
.abz-raster { display: grid; gap: var(--g-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.abz { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: var(--g-3); align-items: center; padding: 12px; border-radius: 18px;
  background: var(--pl-flaeche); border: 1px solid var(--pl-rand-leise); box-shadow: var(--pl-schatten); }
.abz.gold { background: linear-gradient(135deg, var(--pl-gold-flaeche), var(--pl-flaeche) 65%); }
.abz-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.abz-kopf { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.abz-kopf strong { font-size: 15px; }
.stufe-name { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; }
.stufe-name.s1 { background: oklch(0.88 0.06 55); color: oklch(0.38 0.08 50); }
.stufe-name.s2 { background: oklch(0.9 0.01 250); color: oklch(0.38 0.02 250); }
.stufe-name.s3 { background: oklch(0.88 0.13 90); color: oklch(0.38 0.08 75); }
.orden { --metall: var(--pl-flaeche-2); --tief: var(--g-text-3); position: relative; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: radial-gradient(circle at 35% 30%, color-mix(in oklch, var(--metall) 55%, white), var(--metall) 60%, color-mix(in oklch, var(--metall) 75%, black));
  color: var(--tief); box-shadow: inset 0 -3px 0 oklch(0 0 0 / .12), 0 4px 10px -4px color-mix(in oklch, var(--metall) 80%, black); }
.orden::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 1.5px dashed color-mix(in oklch, var(--tief) 45%, transparent); }
.orden .z { width: 24px; height: 24px; stroke-width: 2; position: relative; }
.orden.zu { background: var(--pl-flaeche-2); box-shadow: inset 0 0 0 2px var(--pl-rand); }
.orden.zu .z { opacity: .55; }
.orden.s1 { --metall: oklch(0.72 0.1 55); --tief: oklch(0.33 0.07 45); }
.orden.s2 { --metall: oklch(0.86 0.012 250); --tief: oklch(0.36 0.02 250); }
.orden.s3 { --metall: oklch(0.85 0.15 88); --tief: oklch(0.38 0.08 70); }
.orden .pips { position: absolute; bottom: -5px; display: flex; gap: 3px; padding: 2px 4px; border-radius: 999px; background: var(--pl-flaeche); box-shadow: 0 0 0 1px var(--pl-rand-leise); }
.orden .pips i { width: 5px; height: 5px; border-radius: 50%; background: var(--pl-flaeche-2); }
.orden .pips i.an { background: var(--pl-gold-voll); }
.orden.gross { width: 108px; height: 108px; }
.orden.gross .z { width: 48px; height: 48px; }
.orden.gross .pips i { width: 8px; height: 8px; }

/* Album: Sammelkarten */
.album-kopf { display: grid; gap: 8px; margin-bottom: var(--g-4); }
.album-zahl { font: 700 28px/1 var(--pl-display); }
.album { display: grid; gap: var(--g-3); grid-template-columns: repeat(auto-fill, minmax(min(46%, 150px), 1fr)); }
.album.mini { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); max-width: 520px; margin: 8px auto 0; }
.albumkarte { --hf: oklch(0.8 0.05 100); position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 10px 12px; text-align: center;
  font: inherit; color: inherit; text-decoration: none; cursor: pointer; border-radius: 18px; border: 2px solid var(--pl-rand-leise);
  background: linear-gradient(180deg, color-mix(in oklch, var(--hf) 30%, var(--pl-flaeche)), var(--pl-flaeche) 62%); box-shadow: var(--pl-schatten);
  transition: transform .3s var(--pl-federnd), box-shadow var(--g-dauer); }
.albumkarte:hover { transform: translateY(-3px) rotate(.8deg); box-shadow: var(--pl-schatten-hoch); }
.albumkarte.gefunden { border-color: var(--pl-gold-voll); }
.albumkarte.zu { background: repeating-linear-gradient(135deg, var(--pl-flaeche-2) 0 8px, var(--pl-flaeche) 8px 16px); border-style: dashed; border-color: var(--pl-rand); box-shadow: none; }
.ak-nr { position: absolute; left: 10px; top: 8px; font: 700 11px/1 var(--g-schrift); color: var(--g-text-3); font-variant-numeric: tabular-nums; }
.ak-marke { position: absolute; right: 8px; top: 7px; display: inline-flex; align-items: center; gap: 2px; padding: 2px 6px 2px 4px; border-radius: 999px; font-size: 11px; font-weight: 700;
  background: var(--pl-gold-voll); color: oklch(0.3 0.06 70); }
.ak-marke .z { width: 12px; height: 12px; fill: currentColor; stroke-width: 1.5; }
.ak-bild { width: 100%; aspect-ratio: 1; display: grid; place-items: center; }
.ak-bild .pilzbild { width: 92%; height: 92%; color: var(--pl-linie); }
.ak-bild.foto img { width: 86%; height: 86%; object-fit: cover; border-radius: 14px; }
.ak-name { font: 700 14px/1.2 var(--pl-display); text-wrap: balance; }
.ak-unter { min-height: 22px; display: flex; align-items: center; }
.ak-unter .g-pille { height: 20px; font-size: 11px; }
.zu .ak-name { color: var(--g-text-3); letter-spacing: .2em; }
.pilzbild .boden { fill: oklch(0.3 0.05 100 / .12); }
.pilzbild.schatten { color: transparent; }
.pilzbild.schatten :is(path, ellipse, circle, rect) { fill: var(--pl-text-3); stroke: none; opacity: .5; }
.pilzbild.schatten .boden { opacity: .25; }
.album-gross { --hf: oklch(0.8 0.05 100); position: relative; display: grid; place-items: center; height: 220px; margin: -4px 0 var(--g-3); border-radius: 20px;
  background: radial-gradient(60% 70% at 50% 60%, color-mix(in oklch, var(--hf) 40%, var(--pl-flaeche)), var(--pl-flaeche-2)); }
.album-gross .pilzbild { width: 190px; height: 190px; color: var(--pl-linie); animation: wiegen 6s ease-in-out infinite; transform-origin: 50% 90%; }
.album-gross.zu { background: var(--pl-flaeche-2); }
.sinnbild { position: absolute; right: 10px; bottom: 8px; font-size: 10px; color: var(--g-text-2); background: color-mix(in oklch, var(--pl-flaeche) 85%, transparent); padding: 2px 8px; border-radius: 999px; }

/* --- Spielen ---------------------------------------------------------------------------------------- */
.spiel { --ton: 140; max-width: 720px; margin: 0 auto; }
.spiel-kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--g-2) var(--g-3); margin-bottom: var(--g-3); }
.spiel-kopf .zurueck { grid-column: 1 / -1; margin-bottom: 0; }
.spiel-titel { display: flex; align-items: center; gap: var(--g-3); min-width: 0; }
.spiel-titel h2 { font-size: 24px; line-height: 30px; }
.spiel .sk-zeichen { width: 42px; height: 42px; flex: none; }
@media (max-width: 520px) { .spiel-titel h2 { font-size: 20px; line-height: 25px; } .spiel .sk-zeichen { width: 36px; height: 36px; border-radius: 12px; } .spiel .sk-zeichen .z { width: 20px; height: 20px; } .antworten.gitter { grid-template-columns: 1fr; } }
.spiel-stand, .spiel-zeile { display: flex; align-items: center; gap: 6px; }
.spiel-zeile { justify-content: space-between; margin-bottom: var(--g-3); }
.rundensporen, .serie-chip { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 11px 0 8px; border-radius: 999px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--pl-flaeche); box-shadow: 0 0 0 1px var(--pl-rand-leise); }
.rundensporen .z { color: var(--pl-gold); width: 17px; height: 17px; stroke-width: 2.2; }
.rundensporen.hops { animation: hops .45s var(--pl-federnd); }
.serie-chip .z { width: 17px; height: 17px; color: var(--g-text-3); }
.serie-chip.heiss { background: oklch(0.93 0.07 55); color: oklch(0.4 0.12 45); }
.serie-chip.heiss .z { color: oklch(0.62 0.2 40); animation: flackern .8s ease-in-out infinite alternate; }
@keyframes hops { 40% { transform: scale(1.18); } }
@keyframes flackern { to { transform: scale(1.15) rotate(4deg); } }
.fortschritt { display: flex; gap: 4px; margin-bottom: var(--g-4); }
.fortschritt i { flex: 1; height: 6px; border-radius: 999px; background: var(--pl-flaeche-2); transition: background .3s; }
.fortschritt i.richtig { background: var(--pl-moos-voll); }
.fortschritt i.falsch { background: var(--g-schlecht); }
.fortschritt i.jetzt { background: light-dark(oklch(0.6 0.13 var(--ton)), oklch(0.78 0.12 var(--ton))); }
.frage { background: var(--pl-flaeche); border-radius: 24px; padding: var(--g-5) var(--g-4); box-shadow: var(--pl-schatten), inset 0 0 0 1px var(--pl-rand-leise);
  animation: reinkarte .35s cubic-bezier(.2, .8, .2, 1); }
@keyframes reinkarte { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.frage-text { margin: 0 0 var(--g-3); text-align: center; font: 700 18px/1.3 var(--pl-display); }
.frage-text.klein { font: 600 var(--g-fs-1)/var(--g-lh-1) var(--g-schrift); }
.duell-paar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--g-2); align-items: center; }
.duell-seite { --hf: oklch(0.8 0.05 100); display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: var(--g-3) var(--g-2); border-radius: 18px;
  background: linear-gradient(180deg, color-mix(in oklch, var(--hf) 30%, var(--pl-flaeche)), var(--pl-flaeche-2)); min-width: 0; }
.duell-seite .pilzbild { width: 96px; height: 96px; color: var(--pl-linie); }
.duell-seite strong { font: 700 15px/1.2 var(--pl-display); hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; max-width: 100%; }
@media (max-width: 400px) { .duell-seite strong { font-size: 14px; } .duell-seite { padding: var(--g-3) 6px; } .vs { width: 34px; height: 34px; font-size: 11px; } }
.ak-name, .spielkachel strong, .antworten.zwei .antwort strong, .raetsel-loesung strong { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
.vs { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 800 13px/1 var(--g-schrift); letter-spacing: .04em;
  background: light-dark(oklch(0.52 0.14 var(--ton)), oklch(0.8 0.12 var(--ton))); color: light-dark(white, oklch(0.2 0.04 var(--ton))); transform: rotate(-8deg); box-shadow: var(--pl-schatten); }
.antworten { display: grid; gap: var(--g-2); margin-top: var(--g-3); }
.antworten.gitter { grid-template-columns: 1fr 1fr; }
.antworten.zwei { grid-template-columns: 1fr 1fr; }
.antwort { position: relative; text-align: left; min-height: 56px; padding: 12px 16px; border-radius: 18px; border: 2px solid var(--pl-rand); background: var(--pl-flaeche);
  cursor: pointer; line-height: 1.35; font-weight: 550; color: var(--g-text); box-shadow: 0 3px 0 var(--pl-rand);
  transition: transform .2s var(--pl-federnd), border-color var(--g-dauer), background var(--g-dauer), box-shadow var(--g-dauer); }
.antworten.liste .antwort, .antworten.gitter .antwort { padding-right: 48px; }
.antwort:hover:not(:disabled) { border-color: light-dark(oklch(0.55 0.12 var(--ton)), oklch(0.78 0.11 var(--ton))); transform: translateY(-2px); }
.antwort:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--pl-rand); }
.antwort:disabled { cursor: default; }
.antwort:disabled:not(.richtig):not(.falsch) { opacity: .55; }
.antwort.richtig { border-color: var(--pl-moos-voll); background: var(--pl-moos-flaeche); box-shadow: 0 3px 0 color-mix(in oklch, var(--pl-moos-voll) 60%, transparent); animation: platzen .45s var(--pl-federnd); }
.antwort.richtig::after { content: "✓"; position: absolute; right: 12px; top: 50%; translate: 0 -50%; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--pl-moos-voll); color: var(--pl-auf-moos); font-weight: 800; font-size: 14px; }
.antwort.falsch { border-color: var(--g-schlecht); background: var(--g-schlecht-flaeche); animation: wackeln .4s ease; }
@keyframes platzen { 40% { transform: scale(1.04); } }
@keyframes wackeln { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.antworten.zwei .antwort { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; min-height: 72px; font-weight: 700; font-size: 16px; }
.antworten.zwei .antwort .z { width: 24px; height: 24px; stroke-width: 2.2; }
.antworten.zwei .antwort .pilzbild { width: 64px; height: 64px; color: var(--pl-linie); }
.antworten.zwei .antwort strong { font: 700 14px/1.2 var(--pl-display); }
.antworten.zwei .antwort.richtig::after { top: 14px; translate: 0; }
.plus { position: absolute; right: 46px; top: 4px; font: 800 18px/1 var(--pl-display); color: var(--pl-gold); pointer-events: none; animation: plus 1s ease-out forwards; text-shadow: 0 1px 0 var(--pl-flaeche); }
@keyframes plus { from { opacity: 0; transform: translateY(8px) scale(.7); } 25% { opacity: 1; transform: translateY(-6px) scale(1.15); } to { opacity: 0; transform: translateY(-34px) scale(1); } }
.aufloesung { margin-top: var(--g-3); padding: var(--g-4); border-radius: 20px; background: var(--pl-flaeche); box-shadow: inset 0 0 0 1px var(--pl-rand-leise), var(--pl-schatten); animation: reinkarte .3s ease; }
.aufloesung.gut { box-shadow: inset 4px 0 0 var(--pl-moos-voll), inset 0 0 0 1px var(--pl-rand-leise), var(--pl-schatten); }
.aufloesung.schlecht { box-shadow: inset 4px 0 0 var(--g-schlecht), inset 0 0 0 1px var(--pl-rand-leise), var(--pl-schatten); }
.aufloesung > strong { display: block; font: 700 18px/1.2 var(--pl-display); margin-bottom: 4px; }
.aufloesung p { margin: 0 0 var(--g-3); color: var(--g-text-2); }
.blitz-karte { display: grid; place-items: center; min-height: 110px; padding: var(--g-4); border-radius: 20px; text-align: center;
  background: linear-gradient(135deg, light-dark(oklch(0.95 0.06 var(--ton)), oklch(0.3 0.06 var(--ton))), var(--pl-flaeche-2)); }
.blitz-karte strong { font: 700 22px/1.25 var(--pl-display); text-wrap: balance; }
.mythos-karte { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: var(--g-2) var(--g-2) var(--g-1); }
.mythos-karte .ober { color: light-dark(oklch(0.45 0.1 var(--ton)), oklch(0.82 0.1 var(--ton))); }
.mythos { font: 650 22px/1.3 var(--pl-display); margin: 0; text-wrap: balance; }
.korb-symbol { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--pl-moos-flaeche); color: var(--pl-moos); transform: rotate(-6deg); }
.korb-symbol .z { width: 30px; height: 30px; }
.lupe-glas { position: relative; width: 180px; height: 180px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, oklch(1 0 0 / .9), light-dark(oklch(0.95 0.04 var(--ton)), oklch(0.3 0.05 var(--ton))) 70%);
  box-shadow: 0 0 0 10px light-dark(oklch(0.4 0.06 60), oklch(0.6 0.06 70)), 0 0 0 13px var(--pl-rand), var(--pl-schatten-hoch); color: oklch(0.3 0.04 140); }
.lupe-glas::after { content: ""; position: absolute; width: 22px; height: 70px; right: -38px; bottom: -58px; border-radius: 10px; background: light-dark(oklch(0.4 0.06 60), oklch(0.6 0.06 70)); transform: rotate(-45deg); }
.lupe-glas .bild { width: 120px; height: 120px; stroke-width: 1.5; }
.lupe { padding-bottom: var(--g-8); }
.raetsel-bild { position: relative; width: 120px; height: 120px; margin: 0 auto var(--g-2); }
.raetsel-bild .pilzbild { width: 100%; height: 100%; }
.raetsel-bild span { position: absolute; inset: 0; display: grid; place-items: center; font: 800 46px/1 var(--pl-display); color: var(--pl-flaeche); text-shadow: 0 2px 6px oklch(0 0 0 / .3); }
.hinweise { margin: 0 0 var(--g-3); padding: 0; list-style: none; counter-reset: hinweis; display: grid; gap: 8px; }
.hinweise li { counter-increment: hinweis; display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; padding: 10px 12px; border-radius: 14px; background: var(--pl-flaeche-2); }
.hinweise li::before { content: counter(hinweis); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: light-dark(oklch(0.52 0.14 var(--ton)), oklch(0.8 0.12 var(--ton)));
  color: light-dark(white, oklch(0.2 0.04 var(--ton))); font-weight: 800; font-size: 13px; }
.hinweise li.neu { animation: reinkarte .35s cubic-bezier(.2, .8, .2, 1); }
.raetsel .g-knopf { display: flex; margin: 0 auto; }
.raetsel-loesung { --hf: oklch(0.8 0.05 100); display: grid; grid-template-columns: 84px 1fr; gap: var(--g-3); align-items: center; margin-bottom: var(--g-3); padding: 8px; border-radius: 16px;
  background: color-mix(in oklch, var(--hf) 22%, var(--pl-flaeche-2)); }
.raetsel-loesung .pilzbild { width: 84px; height: 84px; color: var(--pl-linie); }
.raetsel-loesung strong { font: 700 17px/1.2 var(--pl-display); }
.raetsel-loesung p { margin: 6px 0 0; }
.memory { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; perspective: 900px; }
@media (min-width: 560px) { .memory { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mem-karte { aspect-ratio: 3 / 4; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 18px; }
.mem-innen { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.mem-karte.auf .mem-innen { transform: rotateY(180deg); }
.mem-rueck, .mem-vorn { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 18px; backface-visibility: hidden; -webkit-backface-visibility: hidden; padding: 8px; }
.mem-rueck { background: radial-gradient(circle at 30% 25%, light-dark(oklch(0.68 0.12 var(--ton)), oklch(0.5 0.1 var(--ton))), light-dark(oklch(0.5 0.12 var(--ton)), oklch(0.36 0.08 var(--ton))));
  color: oklch(1 0 0 / .85); box-shadow: inset 0 0 0 4px oklch(1 0 0 / .18), var(--pl-schatten); }
.mem-rueck .z { width: 40%; height: 40%; stroke-width: 1.4; }
.mem-vorn { transform: rotateY(180deg); background: var(--pl-flaeche); box-shadow: inset 0 0 0 2px var(--pl-rand), var(--pl-schatten); text-align: center; }
.mem-vorn .bild { width: 78%; height: auto; aspect-ratio: 1; color: var(--pl-moos); }
.mem-vorn strong { font: 700 15px/1.2 var(--pl-display); text-wrap: balance; }
.mem-karte.paar .mem-vorn { box-shadow: inset 0 0 0 3px var(--pl-moos-voll), var(--pl-schatten); background: var(--pl-moos-flaeche); animation: platzen .45s var(--pl-federnd); }
.mem-karte:disabled { cursor: default; }
.merkzettel { margin-top: var(--g-4); min-height: 76px; }
.merk { display: grid; grid-template-columns: 56px 1fr; gap: var(--g-3); align-items: center; padding: var(--g-3); border-radius: 18px; background: var(--pl-flaeche);
  box-shadow: inset 4px 0 0 var(--pl-moos-voll), var(--pl-schatten); animation: reinkarte .3s ease; }
.merk .bild { width: 56px; height: 56px; color: var(--pl-moos); }
.merk p { margin: 2px 0 0; color: var(--g-text-2); }
.ende { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: var(--g-6) var(--g-4); border-radius: 26px; background: var(--pl-flaeche);
  box-shadow: var(--pl-schatten), inset 0 0 0 1px var(--pl-rand-leise); animation: reinkarte .4s ease; }
.ende-pokal { width: 88px; height: 88px; border-radius: 28px; display: grid; place-items: center; background: var(--pl-gold-voll); color: oklch(0.32 0.07 70); transform: rotate(-6deg);
  box-shadow: inset 0 -4px 0 oklch(0 0 0 / .12), 0 10px 24px -10px oklch(0.6 0.15 80); animation: platzen .6s var(--pl-federnd); }
.ende-pokal .z { width: 48px; height: 48px; stroke-width: 1.8; }
.ende .ober { margin-top: var(--g-2); }
.ende-zahl { font: 800 56px/1 var(--pl-display); letter-spacing: -0.02em; }
.ende-zahl.sterne { color: var(--pl-gold-voll); letter-spacing: .08em; text-shadow: 0 2px 0 oklch(0.6 0.12 75 / .4); }
.neue-karte { display: flex; align-items: center; gap: 6px; font-weight: 650; color: var(--pl-gold) !important; }
.neue-karte .z { width: 18px; height: 18px; }
.feier-text .stufe-name { display: inline-block; margin-bottom: 6px; font-size: 11px; padding: 3px 10px; }
.ende-sporen { display: inline-flex; align-items: center; gap: 6px; font-weight: 750; font-size: 17px; color: var(--pl-gold); flex-wrap: wrap; justify-content: center; }
.ende-sporen .z { width: 22px; height: 22px; stroke-width: 2.2; }
.ende-karten { width: 100%; margin-top: var(--g-2); }
.ende .knopfreihe { margin-top: var(--g-3); }

/* Feier: neues Abzeichen, neue Stufe */
.fenster.feier { width: min(420px, calc(100% - 24px)); text-align: center; }
.feier-buehne { position: relative; height: 210px; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 55%, var(--pl-gold-flaeche), var(--pl-flaeche) 70%); }
.strahlen { position: absolute; width: 520px; height: 520px; background: repeating-conic-gradient(from 0deg, oklch(0.88 0.12 90 / .45) 0 9deg, transparent 9deg 22deg);
  border-radius: 50%; animation: drehen 18s linear infinite; mask-image: radial-gradient(circle, black 20%, transparent 62%); -webkit-mask-image: radial-gradient(circle, black 20%, transparent 62%); }
@keyframes drehen { to { transform: rotate(360deg); } }
.feier-buehne .orden, .feier-stufe { position: relative; animation: auftritt .7s var(--pl-federnd) both; }
@keyframes auftritt { from { transform: scale(.2) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }
.feier-stufe { width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; background: var(--pl-gold-voll); box-shadow: 0 0 0 8px var(--pl-flaeche), 0 18px 40px -12px oklch(0.6 0.15 80); }
.feier-stufe span { width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; background: var(--pl-moos-voll); color: var(--pl-auf-moos); font: 800 46px/1 var(--pl-display); }
.regen { position: absolute; inset: 0; pointer-events: none; }
.regen i { position: absolute; left: var(--x); bottom: -10px; width: var(--s); height: var(--s); border-radius: 50%; background: var(--pl-gold-voll); opacity: 0;
  animation: steigen2 var(--d) ease-out var(--v) infinite; }
.regen i:nth-child(3n) { background: var(--pl-moos-voll); }
@keyframes steigen2 { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: .9; } 100% { opacity: 0; transform: translateY(-220px) translateX(12px); } }
.feier-text { padding-top: var(--g-3); }
.feier-ober { margin: 0; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: 12px; color: var(--pl-gold); }
.feier-text h2 { font-size: 24px; line-height: 30px; margin: 4px 0 6px; }
.feier-weitere { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: var(--g-2) 0; }
.fenster.feier .ffuss { justify-content: center; border-top: 0; padding-bottom: var(--g-5); }
.fenster.feier .ffuss .g-knopf { min-width: 160px; }

.abz-toast { position: fixed; z-index: 70; left: 50%; top: calc(env(safe-area-inset-top) + 64px); transform: translateX(-50%); display: flex; align-items: center; gap: 12px;
  max-width: calc(100% - 24px); padding: 10px 18px 10px 10px; border-radius: 999px; background: var(--pl-flaeche); color: var(--g-text); text-decoration: none;
  box-shadow: 0 0 0 2px var(--pl-gold-voll), var(--pl-schatten-hoch); animation: toastrein .5s var(--pl-federnd); transition: opacity .5s, transform .5s; }
.abz-toast > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.abz-toast strong { font: 700 16px/1.2 var(--pl-display); }
.abz-toast .feier-ober { font-size: 10px; }
.abz-toast .orden { width: 44px; height: 44px; } .abz-toast .orden .z { width: 20px; height: 20px; }
.abz-toast .chip-stufe { width: 40px; height: 40px; font-size: 18px; }
.abz-toast.weg { opacity: 0; transform: translate(-50%, -12px); }
@keyframes toastrein { from { opacity: 0; transform: translate(-50%, -20px) scale(.9); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (min-width: 960px) { .abz-toast { left: calc(50% + 130px); top: 24px; } }

/* --- Fund -------------------------------------------------------------------------------------------- */
.fundkopf { display: flex; gap: var(--g-4); align-items: center; padding: var(--g-4); border-radius: var(--g-ecke-gross); background: var(--pl-flaeche); box-shadow: var(--pl-schatten), inset 0 0 0 1px var(--pl-rand-leise); }
.fundkopf h2 { font-size: 28px; line-height: 34px; }
.fundkopf .stufe { font-weight: 700; margin-top: 4px; color: var(--pl-moos); }
.fundkopf p { margin: 2px 0 0; color: var(--g-text-2); }
@media (max-width: 520px) { .fundkopf { padding: var(--g-3); gap: var(--g-3); } .fundkopf h2 { font-size: 22px; line-height: 28px; } .fundkopf .ring { width: 96px; height: 96px; } }
.verlauf { display: flex; gap: 4px; align-items: flex-end; height: 22px; margin-top: 8px; }
.verlauf i { width: 7px; border-radius: 3px; background: color-mix(in oklch, var(--pl-moos-voll) 45%, transparent); }
.verlauf i:last-child { background: var(--pl-moos-voll); }
.fundraster { display: grid; gap: var(--g-4); margin-top: var(--g-4); }
@media (min-width: 1100px) {
  .fundraster { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
  .fundraster .links { position: sticky; top: var(--g-4); }
}
.gefahr { display: grid; grid-template-columns: auto 1fr; gap: var(--g-3); align-items: start; border-radius: var(--g-ecke); padding: var(--g-4); margin-top: var(--g-4); border: 1.5px solid; }
.gefahr .z { width: 28px; height: 28px; }
.gefahr strong { display: block; font-size: var(--g-fs-3); line-height: var(--g-lh-3); }
.gefahr p { margin: 4px 0 0; }
.gefahr.toedlich { background: var(--g-schlecht-flaeche); border-color: color-mix(in oklch, var(--g-schlecht) 50%, transparent); }
.gefahr.toedlich .z, .gefahr.toedlich strong { color: var(--g-schlecht); }
.gefahr.giftig { background: var(--g-warnung-flaeche); border-color: color-mix(in oklch, var(--g-warnung) 50%, transparent); }
.gefahr.giftig .z, .gefahr.giftig strong { color: var(--g-warnung); }
.gefahr.vorsicht { background: var(--pl-flaeche); border-color: var(--pl-rand-leise); }
.gefahr.vorsicht .z { color: var(--pl-moos); }

/* Blickwinkel */
.winkel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g-2); }
@media (min-width: 640px) and (max-width: 1099px) { .winkel { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.winkel button, .weitere button { position: relative; aspect-ratio: 1; border-radius: 18px; border: 2px dashed var(--pl-rand);
  background: var(--pl-flaeche-2); color: var(--g-text-2); cursor: pointer; padding: 8px 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  overflow: hidden; transition: border-color var(--g-dauer), background var(--g-dauer), transform .25s var(--pl-federnd); }
.winkel button:hover { border-color: var(--pl-moos); background: var(--pl-moos-flaeche); transform: translateY(-2px); }
.winkel button:active { transform: scale(.96); }
.winkel .bild { width: 40%; height: auto; aspect-ratio: 1; color: var(--pl-moos); }
.winkel .name { font-size: 11px; line-height: 13px; font-weight: 650; color: var(--g-text); text-align: center; }
.winkel button.sicher:not(.voll) { border-color: color-mix(in oklch, var(--g-warnung) 70%, transparent); background: var(--g-warnung-flaeche); }
.winkel .marke-sicher { position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; color: var(--g-warnung); }
.winkel button.voll, .weitere button { border-style: solid; border-color: transparent; padding: 0; }
.winkel button.voll img, .weitere img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.winkel button.voll .name, .weitere .name { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 8px 6px; color: #fff; font-size: 11px; font-weight: 650;
  background: linear-gradient(transparent, rgb(0 0 0 / .65)); text-align: left; }
.winkel button .anzahl { position: absolute; top: 6px; left: 6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: rgb(0 0 0 / .6); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.winkel button .guete, .weitere .guete { position: absolute; top: 6px; right: 6px; height: 20px; padding: 0 7px; border-radius: 10px; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; gap: 3px; }
.guete.gut { background: oklch(0.96 0.04 158 / .92); color: oklch(0.42 0.12 158); }
.guete.schlecht { background: oklch(0.97 0.03 60 / .95); color: oklch(0.45 0.13 55); }
.weitere { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: var(--g-2); margin-top: var(--g-2); }
.weitere button.laed, .winkel button.laed { border-style: solid; }
.laed::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, color-mix(in oklch, var(--pl-flaeche) 70%, transparent) 50%, transparent 70%);
  background-size: 200% 100%; animation: glanz 1.2s linear infinite; }
@keyframes glanz { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.fotoknoepfe { display: flex; gap: var(--g-2); flex-wrap: wrap; margin-top: var(--g-3); }
.fotoknoepfe .g-knopf { flex: 1 1 auto; }

.bestimmen { margin-top: var(--g-4); }
.bestimmen .g-knopf { height: 58px; font-size: 16px; width: 100%; }
.bestimmen .g-knopf .z { width: 22px; height: 22px; }
.bestimmen p { margin: var(--g-2) 0 0; text-align: center; }

/* Analyse läuft */
.lupe-laeuft { display: grid; place-items: center; gap: var(--g-3); padding: var(--g-8) var(--g-4); text-align: center; }
.lupe-laeuft .z.gross { width: 80px; height: 80px; color: var(--pl-moos); stroke-width: 1.4; animation: schwenk 2.4s ease-in-out infinite; }
@keyframes schwenk { 0%, 100% { transform: translate(-10px, 0) rotate(-8deg); } 50% { transform: translate(10px, -6px) rotate(8deg); } }
.lupe-laeuft strong { font: 700 19px/1.3 var(--pl-display); }

/* Ergebnis */
.urteil p { margin: 0; font-size: var(--g-fs-3); line-height: var(--g-lh-3); }
.urteil .spruch { margin-top: var(--g-3); color: var(--g-text-2); font-family: var(--pl-display); font-style: italic; font-weight: 500; }
.kandidat { padding: var(--g-3) 0; border-top: 1px solid var(--pl-rand-leise); }
.kandidat:first-of-type { border-top: 0; padding-top: 0; }
.kandidat .kopfzeile { display: flex; align-items: baseline; gap: var(--g-2); flex-wrap: wrap; }
.kandidat .kopfzeile strong { font: 700 17px/1.3 var(--pl-display); }
.kandidat .prozent { margin-left: auto; font: 700 18px/1 var(--pl-display); font-variant-numeric: tabular-nums; }
.balken { height: 10px; border-radius: 999px; background: var(--pl-flaeche-2); overflow: hidden; margin: 8px 0; }
.balken i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--pl-moos-voll); transition: width 1s cubic-bezier(.2, .8, .2, 1); }
.kandidat.neben .balken i { background: color-mix(in oklch, var(--pl-moos-voll) 45%, var(--pl-flaeche-2)); }
.kandidat details { margin-top: 6px; }
.kandidat summary { cursor: pointer; color: var(--g-text-2); font-size: var(--g-fs-1); font-weight: 650; }
.kandidat ul { margin: 6px 0 0; padding-left: 18px; }
.kandidat li.dagegen::marker { content: "– "; }
.kandidat li.dafuer::marker { content: "+ "; color: var(--g-gut); }
.kandidat .fussreihe { display: flex; gap: var(--g-2); align-items: center; flex-wrap: wrap; margin-top: 8px; }

/* Prüfungen: Was noch fehlt */
.pruefung { border: 1px solid var(--pl-rand-leise); border-radius: var(--g-ecke); padding: var(--g-4); background: var(--pl-flaeche); box-shadow: var(--pl-schatten); }
.pruefung + .pruefung { margin-top: var(--g-3); }
.pruefung.erledigt { background: color-mix(in oklch, var(--pl-moos-flaeche) 55%, var(--pl-flaeche)); border-color: color-mix(in oklch, var(--pl-moos) 30%, transparent); }
.pruefung .oben { display: flex; align-items: center; gap: var(--g-2); margin-bottom: 8px; }
.pruefung .sinn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 6px; border-radius: 999px; background: var(--pl-moos-flaeche);
  color: var(--pl-moos); font-weight: 750; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.pruefung .sinn .z { width: 18px; height: 18px; }
.pruefung .oben .g-pille { margin-left: auto; }
.pruefung h3 { font: 700 17px/1.3 var(--pl-display); }
.pruefung .warum { margin: 4px 0 0; color: var(--g-text-2); }
.pruefung details { margin: 8px 0 10px; }
.pruefung summary { cursor: pointer; font-weight: 650; color: var(--pl-moos); font-size: var(--g-fs-2); }
.pruefung details p { margin: 6px 0 0; }
.pruefung .chips { margin-top: 10px; }
.schon { margin-top: var(--g-3); }
.schon summary { cursor: pointer; font-weight: 650; color: var(--g-text-2); }
.schon ul { list-style: none; padding: 0; margin: var(--g-2) 0 0; }
.schon li { display: flex; gap: var(--g-2); align-items: baseline; padding: 6px 0; border-top: 1px solid var(--pl-rand-leise); }
.schon li .z { color: var(--pl-moos); width: 14px; height: 14px; align-self: center; }
.schon li span { color: var(--g-text-2); }
.schon li button { margin-left: auto; }

/* Neu bewerten: schwebt über dem Dock */
.neu-leiste { position: fixed; z-index: 25; left: 50%; transform: translateX(-50%); bottom: calc(var(--pl-reiter) + env(safe-area-inset-bottom) + 20px);
  display: flex; align-items: center; gap: var(--g-3); padding: 8px 8px 8px 18px; border-radius: 999px; background: var(--pl-tinte); color: var(--pl-auf-tinte);
  box-shadow: var(--pl-schatten-hoch); max-width: calc(100% - 24px); animation: rein .4s var(--pl-federnd); }
.neu-leiste span { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.neu-leiste .g-knopf { height: 40px; }
@keyframes rein { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (min-width: 960px) { .neu-leiste { bottom: 24px; left: calc(50% + 130px); } }

/* Doppelgänger, Merkmale */
.doppel { display: grid; grid-template-columns: auto 1fr; gap: var(--g-3); padding: var(--g-3) 0; border-top: 1px solid var(--pl-rand-leise); }
.doppel:first-of-type { border-top: 0; padding-top: 0; }
.doppel > .z { width: 22px; height: 22px; margin-top: 2px; }
.doppel.offen > .z { color: var(--g-warnung); }
.doppel.offen.toedlich > .z { color: var(--g-schlecht); }
.doppel.aus > .z { color: var(--g-gut); }
.doppel p { margin: 4px 0 0; }
.doppel .zeile { margin-top: 4px; }
.merkmale { width: 100%; border-collapse: collapse; }
.merkmale th, .merkmale td { text-align: left; vertical-align: top; padding: 8px 6px; border-top: 1px solid var(--pl-rand-leise); }
.merkmale th { font-weight: 650; width: 34%; }
.merkmale td.beleg { white-space: nowrap; text-align: right; font-size: var(--g-fs-1); }
.merkmale tr:first-child th, .merkmale tr:first-child td { border-top: 0; }
.beleg.fehlt { color: var(--g-warnung); font-weight: 650; }
.beleg.foto, .beleg.angabe { color: var(--g-gut); font-weight: 650; }
.lernhappen { display: grid; grid-template-columns: auto 1fr; gap: var(--g-3); background: linear-gradient(135deg, var(--pl-gold-flaeche), var(--pl-flaeche)); border: 0; }
.lernhappen .z { color: var(--pl-gold); width: 26px; height: 26px; }
.lernhappen strong { color: var(--pl-gold); text-transform: uppercase; font-size: var(--g-fs-1); letter-spacing: .08em; }
.lernhappen p { margin: 4px 0 0; }
.warnliste { margin: 0; padding-left: 18px; }
.warnliste li + li { margin-top: 6px; }

/* Fundort, Sporen, Bestätigung */
.gruppe + .gruppe { margin-top: var(--g-4); }
.gruppe h3 { margin-bottom: 8px; color: var(--g-text-2); font-weight: 700; font-size: var(--g-fs-1); text-transform: uppercase; letter-spacing: .06em; }
.g-feld.voll { width: 100%; }
textarea.g-feld { height: auto; min-height: 76px; padding: 8px 10px; resize: vertical; line-height: var(--g-lh-2); }
.sporen .farben { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 6px; margin-top: var(--g-3); }
.sporen .farben button { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 6px 10px; border-radius: 14px; border: 1px solid var(--g-rand); background: var(--pl-flaeche); cursor: pointer; text-align: left; line-height: 1.2; }
.sporen .farben button:hover { background: var(--pl-hover); }
.sporen .farben i { width: 22px; height: 22px; border-radius: 50%; flex: none; border: 1px solid var(--g-rand); }
.sporen .uhr { display: flex; align-items: center; gap: var(--g-3); margin: var(--g-3) 0; }
.sporen .uhr .z { width: 34px; height: 34px; color: var(--pl-moos); }
.sporen .uhr strong { font: 700 22px/1.2 var(--pl-display); font-variant-numeric: tabular-nums; }
.sporen ol { margin: var(--g-2) 0 0; padding-left: 20px; }
.sporen ol li + li { margin-top: 4px; }
.bestaetigt { border-color: color-mix(in oklch, var(--pl-gold-voll) 60%, transparent); background: linear-gradient(135deg, var(--pl-gold-flaeche), var(--pl-flaeche)); }
.bestaetigt h2 .z { color: var(--pl-gold); }
.fundort > summary { cursor: pointer; list-style: none; }
.fundort > summary::-webkit-details-marker { display: none; }
.fundort > summary h2 { display: flex; align-items: center; gap: var(--g-2); font-size: 18px; }
.fundort > summary h2 .z { color: var(--pl-moos); }
.fundort > summary h2 .zaehler { margin-left: auto; font: 600 var(--g-fs-1)/1 var(--g-schrift); color: var(--g-text-2); }
.fundort[open] > summary { margin-bottom: var(--g-2); }
.fundort label.inline { margin: 0; font: inherit; }

/* --- Nachschlagen ------------------------------------------------------------------------------------ */
.lexikon { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: var(--g-3); }
.lexikon .karte { margin: 0; display: grid; grid-template-columns: 68px 1fr; gap: var(--g-3); align-items: start; }
.lexikon .bild { width: 68px; height: 68px; color: var(--pl-moos); background: var(--pl-moos-flaeche); border-radius: 18px; padding: 7px; }
.lexikon strong { font: 700 16px/1.3 var(--pl-display); }
.lexikon p { margin: 4px 0 0; color: var(--g-text-2); }
.regeln { list-style: none; padding: 0; margin: 0; counter-reset: regel; display: grid; gap: var(--g-2); }
.regeln li { counter-increment: regel; display: grid; grid-template-columns: 40px 1fr; gap: var(--g-3); background: var(--pl-flaeche); border: 1px solid var(--pl-rand-leise); border-radius: 18px; padding: var(--g-3); box-shadow: var(--pl-schatten); }
.regeln li::before { content: counter(regel); width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; background: var(--pl-moos-flaeche); color: var(--pl-moos); font: 700 18px/1 var(--pl-display); transform: rotate(-5deg); }
.regeln p { margin: 2px 0 0; color: var(--g-text-2); }

/* --- Notfall ---------------------------------------------------------------------------------------- */
.notruf-gross { display: flex; align-items: center; justify-content: center; gap: var(--g-3); height: 68px; border-radius: 22px; background: var(--g-schlecht);
  color: #fff; font: 700 22px/1 var(--pl-display); text-decoration: none; box-shadow: 0 10px 24px -10px var(--g-schlecht); }
.notruf-gross svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.nummern { list-style: none; padding: 0; margin: 0; }
.nummern li { display: flex; justify-content: space-between; gap: var(--g-3); align-items: center; padding: 10px 0; border-top: 1px solid var(--pl-rand-leise); }
.nummern li:first-child { border-top: 0; }
.nummern a { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; text-decoration: none; }
.schritte-notfall { margin: 0; padding-left: 22px; }
.schritte-notfall li + li { margin-top: 8px; }

/* --- Fenster und Meldung ------------------------------------------------------------------------------ */
.fenster { width: min(680px, calc(100% - 24px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 26px;
  background: var(--pl-flaeche); color: var(--g-text); box-shadow: var(--pl-schatten-hoch), 0 0 0 1px var(--pl-rand-leise); overflow: hidden; }
.fenster::backdrop { background: oklch(0.2 0.03 150 / .5); backdrop-filter: blur(3px); }
.fenster[open] { display: flex; flex-direction: column; animation: fensterrein .35s var(--pl-federnd); }
@keyframes fensterrein { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
.fenster .fkopf { display: flex; align-items: center; gap: var(--g-3); padding: var(--g-4) var(--g-4) var(--g-3) var(--g-5); border-bottom: 1px solid var(--pl-rand-leise); }
.fenster .fkopf h2 { font-size: 22px; line-height: 28px; flex: 1; min-width: 0; }
.fenster .fkoerper { padding: var(--g-4) var(--g-5); overflow-y: auto; }
.fenster .ffuss { display: flex; justify-content: flex-end; gap: var(--g-2); padding: var(--g-3) var(--g-4); border-top: 1px solid var(--pl-rand-leise); flex-wrap: wrap; }
.ikon { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--pl-flaeche-2); color: var(--g-text-2); display: grid; place-items: center; cursor: pointer; flex: none; }
.ikon:hover { background: var(--pl-hover); color: var(--g-text); }
.grossfoto { width: 100%; max-height: 60vh; object-fit: contain; border-radius: 18px; background: #000; display: block; }
.steckbrief { display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: 6px var(--g-3); margin: var(--g-3) 0 0; }
.steckbrief dt { font-weight: 650; color: var(--g-text-2); }
.steckbrief dd { margin: 0; }
.fenster h3 { margin: var(--g-5) 0 8px; font: 700 17px/1.3 var(--pl-display); }
.fenster label { display: block; font-weight: 650; margin: var(--g-3) 0 4px; }
.meldung { position: fixed; z-index: 60; left: 50%; transform: translateX(-50%); bottom: calc(var(--pl-reiter) + env(safe-area-inset-bottom) + 84px); max-width: min(560px, calc(100% - 24px));
  padding: 12px 18px; border-radius: 18px; background: var(--pl-tinte); color: var(--pl-auf-tinte); box-shadow: var(--pl-schatten-hoch); animation: rein .3s var(--pl-federnd); font-weight: 550; }
.meldung.fehler { background: var(--g-schlecht); color: #fff; }
@media (min-width: 960px) { .meldung { bottom: 92px; left: calc(50% + 130px); } }

/* --- Aus dem Sammelkorb (01.11.2026) --------------------------------------------------------------------- */
.korb-alle { display: inline-flex; align-items: center; gap: var(--g-2); font-weight: 650; margin: var(--g-1) 0 var(--g-2); cursor: pointer; }
.korb-funde { display: grid; gap: 1px; background: var(--pl-rand-leise); border: 1px solid var(--pl-rand-leise); border-radius: 16px; overflow: hidden; }
.korb-fund { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: var(--g-3); align-items: center; padding: var(--g-2) var(--g-3); background: var(--pl-flaeche); cursor: pointer; }
.korb-fund:hover { background: var(--pl-hover); }
.korb-fund input, .korb-alle input { width: 18px; height: 18px; accent-color: var(--pl-moos-voll); }
.korb-daumen { display: flex; gap: 3px; align-items: center; }
.korb-daumen img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: var(--pl-moos-flaeche); }
.korb-daumen .mehr { font-size: var(--g-fs-1); color: var(--g-text-2); padding-left: 2px; }
@media (min-width: 521px) { .korb-daumen { width: 238px; } }
.korb-text { display: flex; flex-direction: column; min-width: 0; }
.korb-text strong { font-variant-numeric: tabular-nums; }
.korb-preis { font-variant-numeric: tabular-nums; color: var(--g-text-2); font-size: var(--g-fs-1); white-space: nowrap; }
.fehlertext { color: var(--g-schlecht); }
@media (max-width: 520px) {
  .korb-fund { grid-template-columns: auto minmax(0, 1fr) auto; }
  .korb-daumen { grid-column: 2 / 4; order: 3; }
  .korb-daumen img { width: 36px; height: 36px; }
}
.korb-fertig { margin-top: var(--g-3); }
.korb-fertig > summary { cursor: pointer; font-weight: 650; margin-bottom: var(--g-3); }
.korb-lauf .balken i { transition: width .4s ease; }
.korb-lauf p { margin: 4px 0; }
.korb-fuss { position: sticky; z-index: 25; bottom: calc(var(--pl-reiter) + env(safe-area-inset-bottom) + 20px); margin-top: var(--g-4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--g-3); padding: var(--g-3) var(--g-4);
  background: color-mix(in oklch, var(--pl-flaeche) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--pl-rand-leise); border-radius: 22px; box-shadow: var(--pl-schatten-hoch); }
.korb-fuss > div { min-width: 0; }
.korb-fuss .g-knopf { flex: none; }
@media (min-width: 960px) { .korb-fuss { bottom: var(--g-4); } }
.befehl { margin: var(--g-2) 0 0; padding: var(--g-3); border-radius: 14px; background: var(--pl-flaeche-2); font-size: var(--g-fs-1); white-space: pre-wrap; overflow-wrap: anywhere; }

/* Pilzseite mit Quellen (01.11.2026): Belege als kleine Nummern-Links, Quellen am Ende */
.beleg-nr { font-size: .78em; vertical-align: super; line-height: 0; text-decoration: none; color: var(--pl-moos); margin-left: 1px; white-space: nowrap; }
.beleg-nr + .beleg-nr { margin-left: 2px; }
.steckbrief dd.unbelegt { color: var(--g-text-2); font-size: var(--g-fs-1); font-style: italic; }
.quellen ol { margin: 0; padding-left: 22px; }
.quellen li + li { margin-top: var(--g-2); }
.quellen li > a { font-weight: 650; overflow-wrap: anywhere; }
.artseite h3 { margin-top: var(--g-4); font: 700 17px/1.3 var(--pl-display); }
.artseite .gefahr { margin-top: var(--g-3); }
.eigene-funde { display: flex; flex-wrap: wrap; gap: 6px; }
.eigene-funde img { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; display: block; }
.eigene-funde a { color: var(--pl-moos); }
.fenster .gefahr { margin-top: var(--g-3); }
.steckbriefkarte .vorschau { background: var(--pl-gold-flaeche); color: var(--pl-gold); }

/* Weniger Bewegung: grundlage.css schaltet Animationen ab; die Karten im Memory drehen dann ohne Übergang */
@media (prefers-reduced-motion: reduce) { .held-bild .spore, .regen, .strahlen { display: none; } }

/* Für Freunde (01.11.2026): Anmeldung, Konto, Verwalter-Seite, Was gespeichert wird */
.g-knopf.gefahr { display: inline-flex; align-items: center; padding: 0 18px; margin-top: 0; border-width: 1px; border-radius: 999px; }   /* sonst griffe .gefahr (Warnkasten): Text saß oben im Knopf */
.ohne-konto .profilchip, .ohne-konto .leiste-profil { display: none; }
.g-logo.pilz-zeichen { color: var(--pl-moos); }
.konto-seite { max-width: 560px; margin-inline: auto; }
.konto-form label:not(.ankreuzen) { display: block; margin: var(--g-3) 0 var(--g-1); font-weight: 600; }
.konto-form > h2 + label { margin-top: 0; }
.konto-form .g-knopf { margin-top: var(--g-3); }
.konto-fehler { color: var(--g-schlecht); margin: var(--g-2) 0 0; font-weight: 600; }
.konto-fehler:empty { display: none; }
.ankreuzen { display: flex; gap: var(--g-2); align-items: flex-start; margin-top: var(--g-4); }
.ankreuzen input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--pl-moos); }
.hinweisliste { margin: 0; padding-left: 1.1em; display: grid; gap: var(--g-2); }
.rechtsfuss { display: flex; gap: var(--g-4); flex-wrap: wrap; margin-top: var(--g-8); padding-top: var(--g-3); border-top: 1px solid var(--pl-rand-leise); }
.leiste-fuss .rechtsfuss { margin-top: 0; padding-top: 0; border-top: 0; }
.textseite { max-width: 720px; }
.sammler-zeile { display: flex; justify-content: space-between; align-items: center; gap: var(--g-3); flex-wrap: wrap; margin-top: var(--g-2); }
.schluessel { margin: var(--g-3) 0; padding: var(--g-3); border-radius: 14px; background: var(--pl-moos-flaeche); font-family: ui-monospace, Consolas, monospace; letter-spacing: .04em; overflow-wrap: anywhere; user-select: all; }
.einladungstext { margin: var(--g-3) 0; padding: var(--g-3); border-radius: 14px; background: var(--pl-moos-flaeche); }
.fremdfund { display: grid; gap: var(--g-1); }
.fremdfotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: var(--g-2); }
.fremdfotos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; display: block; }