@font-face { font-family: "Poppins"; src: url("/fonts/poppins-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/fonts/poppins-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/fonts/poppins-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --erde: #17130e;
  --wald: #13211a;
  --text: #f1ece2;
  --leise: #b7b29f;
  --salbei: #9dc4a2;
  --holz: #c49a6c;
  --creme: #efe6d4;
  --creme-text: #2b3524;
  --creme-leise: #6b6248;
  --karte: rgba(33, 30, 22, 0.82);
  --karte-rand: rgba(241, 236, 226, 0.10);
  --gesperrt: rgba(241, 236, 226, 0.42);
  --rund: rgba(241, 236, 226, 0.12);
  --fehler: #f0a99a;
  --schrift: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--erde); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font: 400 16px/1.5 var(--schrift);
}
/* Hintergrundverlauf als feste Ebene: wird einmal gemalt, nicht bei jedem Scrollen */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 15% 0%, rgba(61, 92, 62, 0.45), transparent 70%),
    radial-gradient(ellipse 70% 60% at 100% 100%, rgba(110, 80, 52, 0.40), transparent 70%),
    linear-gradient(170deg, var(--wald), var(--erde));
}
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--salbei); outline-offset: 2px; }

/* ---------- Natur-Deko ----------
   Die Grafiken selbst sind unbewegt; bewegt werden nur die Elemente (transform/opacity).
   Das übernimmt die Grafikkarte, deshalb bleibt es flüssig. */
.deko { position: fixed; pointer-events: none; z-index: 0; will-change: transform; }
.deko-ast {
  top: -10px; right: -20px; width: min(78vw, 540px); opacity: 0.8;
  transform-origin: 100% 0; animation: wiegen 10s ease-in-out infinite alternate;
}
.deko-ast-links {
  top: 30vh; left: -60px; width: min(46vw, 300px); opacity: 0.35;
  transform-origin: 100% 0; animation: wiegen-links 12s ease-in-out infinite alternate;
}
.deko-gras {
  left: -3%; bottom: 0; width: 106%; height: 18vh; min-height: 110px; object-fit: cover; object-position: bottom; opacity: 0.9;
  transform-origin: 50% 100%; animation: gras 8s ease-in-out infinite alternate;
}
@keyframes wiegen { from { transform: rotate(-2.5deg); } to { transform: rotate(2deg); } }
@keyframes wiegen-links { from { transform: scaleX(-1) rotate(-31deg); } to { transform: scaleX(-1) rotate(-27deg); } }
@keyframes gras { from { transform: skewX(-1.5deg); } to { transform: skewX(2deg); } }
@media (max-width: 700px) {
  .deko-ast { width: 70vw; opacity: 0.5; }
  .deko-ast-links { opacity: 0.22; }
}

/* Glühwürmchen und fallende Blätter */
.lichter { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.voll .lichter { position: absolute; }
.lichter i {
  position: absolute; left: var(--x); top: var(--y); width: 5px; height: 5px; border-radius: 50%;
  background: #f6e7b0; box-shadow: 0 0 10px 3px rgba(233, 211, 143, 0.5);
  opacity: 0; will-change: transform, opacity;
  animation: gluehen var(--d) ease-in-out var(--v) infinite;
}
@keyframes gluehen {
  0% { opacity: 0; transform: translate(0, 0) scale(0.6); }
  25% { opacity: 0.9; }
  50% { opacity: 0.35; transform: translate(14px, -40px) scale(1.3); }
  75% { opacity: 0.8; }
  100% { opacity: 0; transform: translate(-8px, -80px) scale(0.6); }
}
.lichter b {
  position: absolute; top: -40px; left: var(--x); width: 28px; height: 16px; opacity: 0.7;
  background: url("/deko/blatt.svg") center / contain no-repeat; will-change: transform;
  animation: fallen var(--d) linear var(--v) infinite;
}
@keyframes fallen {
  0% { transform: translate(0, 0) rotate(-30deg); }
  25% { transform: translate(40px, 28vh) rotate(40deg); }
  50% { transform: translate(-10px, 56vh) rotate(-20deg); }
  75% { transform: translate(60px, 84vh) rotate(50deg); }
  100% { transform: translate(30px, 115vh) rotate(0deg); }
}
/* Während der große Player offen ist, ruht die Deko der Seite dahinter */
body.voll-offen > .deko, body.voll-offen > .lichter { display: none; }

/* ---------- Seite ---------- */
.seite { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; padding: calc(56px + env(safe-area-inset-top)) 16px 40px; }
body.mit-player .seite { padding-bottom: 120px; }

.kopf { text-align: center; }
.atem { width: 64px; height: 64px; margin: 0 auto 18px; position: relative; }
.atem::before, .atem::after { content: ""; position: absolute; inset: 0; border-radius: 50%; }
.atem::before { background: radial-gradient(circle, rgba(157, 196, 162, 0.55), rgba(196, 154, 108, 0.15) 70%); animation: atmen 8s ease-in-out infinite; }
.atem::after { inset: 20px; background: var(--salbei); box-shadow: 0 0 24px rgba(157, 196, 162, 0.6); animation: atmen 8s ease-in-out infinite reverse; }
@keyframes atmen { 0%, 100% { transform: scale(0.8); } 50% { transform: scale(1.15); } }

.kopf h1 { font-weight: 700; font-size: clamp(1.6rem, 6.5vw, 2.2rem); line-height: 1.2; margin: 0 0 10px; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4); }
.kopf p { color: var(--leise); font-size: 0.95rem; margin: 0 auto 26px; max-width: 32em; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8); }

.gesamt { height: 6px; border-radius: 3px; background: rgba(241, 236, 226, 0.12); overflow: hidden; }
.gesamt span { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--salbei), var(--holz)); transition: width 0.8s ease; }
.gesamt-text { color: var(--leise); font-size: 0.85rem; margin: 10px 0 22px; }

.aktionen { display: flex; justify-content: center; gap: 12px; margin-bottom: 32px; }
.knopf-start {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 30px; border: 0; border-radius: 26px; cursor: pointer;
  background: var(--creme); color: var(--creme-text); font-weight: 600; font-size: 1rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); transition: transform 0.2s;
}
.knopf-start:active { transform: scale(0.97); }
.knopf-start svg { width: 18px; height: 18px; }

/* ---------- Karten ---------- */
.liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.modul-titel { color: var(--holz); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin: 18px 4px 0; }
.karte {
  display: flex; border-radius: 16px; overflow: hidden;
  background: var(--karte); border: 1px solid var(--karte-rand);
  animation: einblenden 0.6s ease both;
  transition: background 0.3s, transform 0.2s;
}
@keyframes einblenden { from { opacity: 0; transform: translateY(12px); } }
.karte-haupt {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px;
  padding: 14px 18px; border: 0; background: none; color: inherit; text-align: left; cursor: pointer;
}
.karte-titel { font-weight: 600; font-size: 1rem; }
.karte-info { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; color: var(--salbei); }
.karte-info svg { width: 12px; height: 12px; flex: none; }
.karte-balken { height: 4px; margin-top: 8px; border-radius: 2px; background: rgba(241, 236, 226, 0.14); overflow: hidden; }
.karte-balken span { display: block; height: 100%; width: 0; background: var(--salbei); }

.karte.gehoert .karte-info { color: var(--holz); }
.karte.gesperrt { background: rgba(33, 30, 22, 0.6); }
.karte.gesperrt .karte-haupt { cursor: default; }
.karte.gesperrt .karte-titel, .karte.gesperrt .karte-info { color: var(--gesperrt); }

.karte.aktuell { background: var(--creme); border-color: transparent; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35); }
.karte.aktuell .karte-titel { color: var(--creme-text); }
.karte.aktuell .karte-info { color: var(--creme-leise); }
.karte.aktuell .karte-balken { background: rgba(43, 53, 36, 0.15); }
.karte.aktuell .karte-balken span { background: #557a4f; }

/* Equalizer, solange ein Audio läuft */
.wellen { display: none; gap: 2px; align-items: flex-end; height: 12px; }
.wellen i { width: 3px; background: currentColor; border-radius: 1px; animation: welle 1s ease-in-out infinite; }
.wellen i:nth-child(2) { animation-delay: -0.3s; } .wellen i:nth-child(3) { animation-delay: -0.6s; }
@keyframes welle { 0%, 100% { height: 30%; } 50% { height: 100%; } }
body.spielt .karte.laeuft .wellen { display: inline-flex; }
body.spielt .karte.laeuft .karte-info svg { display: none; }

/* Aufklappbereich „Schon gehört“ */
.gehoert-box { margin-bottom: 14px; border-radius: 16px; background: rgba(33, 30, 22, 0.75); border: 1px solid var(--karte-rand); }
.gehoert-box[hidden] { display: none; }
.gehoert-box summary {
  display: flex; align-items: center; gap: 10px; padding: 14px 18px; cursor: pointer; list-style: none;
  font-weight: 600; color: var(--holz);
}
.gehoert-box summary::-webkit-details-marker { display: none; }
.gehoert-haken {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--holz); color: #1d1710; font-size: 0.8rem;
}
.gehoert-anzahl { padding: 1px 9px; border-radius: 10px; background: rgba(196, 154, 108, 0.2); font-size: 0.8rem; }
.gehoert-pfeil { width: 20px; height: 20px; margin-left: auto; transition: transform 0.25s; }
.gehoert-box[open] .gehoert-pfeil { transform: rotate(180deg); }
.gehoert-box .liste { padding: 0 10px 10px; }

/* ---------- Profil-Knopf ---------- */
.profil-knopf {
  position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 16px; z-index: 2; width: 46px; height: 46px;
  border: 1px solid var(--karte-rand); border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; background: rgba(23, 19, 14, 0.5); color: var(--text);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.profil-knopf svg { width: 22px; height: 22px; }
.profil-serie {
  position: absolute; top: -5px; right: -7px; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 11px; display: grid; place-items: center;
  background: var(--holz); color: #1d1710; font-size: 0.72rem; font-weight: 700;
}
.profil-serie[hidden] { display: none; }

/* ---------- Fenster (Profil, Willkommen) ---------- */
.fenster {
  width: calc(100% - 32px); max-width: 440px; padding: 0; border: 0;
  background: transparent; color: var(--text); overflow: visible;
}
.fenster::backdrop { background: rgba(10, 8, 5, 0.65); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.fenster[open] { animation: einblenden 0.45s ease; }
.fenster-innen {
  position: relative; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow-y: auto;
  padding: 30px 22px 22px; border-radius: 26px; border: 1px solid var(--karte-rand);
  background: linear-gradient(165deg, #1e2b21, #241c13);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.fenster h2 { margin: 0 0 18px; font-size: 1.3rem; text-align: center; }
.fenster-zu {
  position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border: 0; border-radius: 50%;
  background: var(--rund); color: var(--text); font-size: 1.4rem; line-height: 1; cursor: pointer;
}

.serie { text-align: center; }
.serie-pflanze { font-size: 2.4rem; line-height: 1; animation: wachsen 3s ease-in-out infinite alternate; }
@keyframes wachsen { from { transform: scale(0.94) rotate(-4deg); } to { transform: scale(1.06) rotate(4deg); } }
.serie-zahl {
  font-size: 3.4rem; font-weight: 700; line-height: 1.1;
  background: linear-gradient(135deg, var(--salbei), var(--holz)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.serie-einheit { color: var(--leise); font-weight: 600; }
.serie-hinweis { color: var(--text); font-size: 0.9rem; margin: 10px 0 0; }
.woche { display: flex; justify-content: space-between; gap: 4px; margin: 20px 0 8px; }
.tag { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 0.72rem; color: var(--leise); }
.tag i {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--karte-rand); font-style: normal; font-size: 0.9rem;
}
.tag.erledigt i { background: var(--salbei); border-color: var(--salbei); color: var(--creme-text); }
.tag.heute { color: var(--text); font-weight: 600; }
.tag.heute i { border-color: var(--holz); }
.serie-rekord { text-align: center; color: var(--leise); font-size: 0.82rem; margin: 6px 0 4px; }

.kachel { margin-top: 12px; padding: 14px 16px; border-radius: 16px; background: rgba(241, 236, 226, 0.06); border: 1px solid var(--karte-rand); }
.kachel h3 { margin: 0 0 4px; color: var(--holz); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.kachel-zahl { margin-bottom: 8px; color: var(--leise); }
.kachel-zahl strong { color: var(--text); font-size: 1.6rem; }
.kachel p { margin: 8px 0 0; color: var(--leise); font-size: 0.86rem; }
.knopf-zweit {
  width: 100%; height: 48px; margin-top: 16px; border-radius: 24px; cursor: pointer;
  border: 1px solid var(--karte-rand); background: none; color: var(--text); font-weight: 600; font-size: 0.95rem;
}
.abmelden { display: block; margin-top: 14px; text-align: center; color: var(--leise); font-size: 0.85rem; }

.willkommen { text-align: center; padding-top: 34px; }
.willkommen h2 { font-size: 1.35rem; margin-bottom: 12px; }
.willkommen #w-text p { margin: 0 0 10px; font-size: 0.9rem; line-height: 1.6; }
.gruss { margin: 16px 0 4px; color: var(--holz); font-style: italic; font-weight: 600; font-size: 0.9rem; line-height: 1.5; }
.willkommen .knopf-start { width: 100%; margin-top: 14px; }

/* ---------- Cover ---------- */
.cover {
  position: relative; display: block; flex: none; overflow: hidden;
  background: linear-gradient(145deg, var(--c1, #2e4a35), var(--c2, #6e5034));
}
.cover img { position: absolute; top: -14%; right: -20%; width: 100%; opacity: 0.9; }
.cover-klein { width: 48px; height: 48px; border-radius: 12px; }
.cover-gross {
  width: min(72vw, 300px, 36vh); aspect-ratio: 1; margin: 6px auto 24px; border-radius: 28px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(241, 236, 226, 0.08);
}
.cover-licht {
  position: absolute; left: 14%; top: 34%; width: 38%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(239, 230, 212, 0.95), rgba(157, 196, 162, 0.45) 40%, transparent 70%);
  animation: atmen 8s ease-in-out infinite;
}
.cover-kennung {
  position: absolute; left: 18px; bottom: 14px; font-size: 1.8rem; font-weight: 700;
  color: rgba(241, 236, 226, 0.92); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

/* ---------- Mini-Player ---------- */
.mini {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 10;
  max-width: 560px; margin: 0 auto; padding: 8px; overflow: hidden;
  display: flex; align-items: center; gap: 10px; border-radius: 18px;
  background: rgba(30, 26, 19, 0.9); border: 1px solid var(--karte-rand);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  animation: hochfahren 0.4s ease;
}
.mini[hidden] { display: none; }
@keyframes hochfahren { from { transform: translateY(150%); } }
.mini-oeffnen {
  flex: 1; min-width: 0; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: 12px;
}
.mini-text { min-width: 0; display: flex; flex-direction: column; }
.mini-titel { font-weight: 600; font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-modul { color: var(--leise); font-size: 0.75rem; }
.mini-play {
  flex: none; width: 46px; height: 46px; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; background: var(--creme); color: var(--creme-text);
}
.mini-play svg { width: 20px; height: 20px; }
.mini-balken { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(241, 236, 226, 0.1); }
.mini-balken span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--salbei), var(--holz)); }

.icon-pause { display: none; }
body.spielt .play-knopf .icon-play { display: none; }
body.spielt .play-knopf .icon-pause { display: block; }

/* ---------- Große Player-Ansicht ---------- */
/* Solange ein Fenster oder der große Player offen ist, scrollt die Seite dahinter nicht mit */
html:has(dialog[open]), html:has(body.voll-offen),
body.voll-offen, body:has(dialog[open]) { overflow: hidden; }
.voll {
  position: fixed; inset: 0; z-index: 20; overflow-y: auto; overscroll-behavior: contain;
  background:
    radial-gradient(ellipse 110% 55% at 50% 12%, var(--c1, #2e4a35), transparent 75%),
    radial-gradient(ellipse 80% 50% at 100% 100%, var(--c2, #6e5034), transparent 70%),
    linear-gradient(180deg, var(--wald), var(--erde));
  animation: hochgleiten 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.voll[hidden] { display: none; }
@keyframes hochgleiten { from { transform: translateY(100%); } }
.voll-innen {
  position: relative; max-width: 460px; min-height: 100%; margin: 0 auto;
  padding: calc(8px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column;
}
.voll-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.voll-kopf button {
  width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; background: none; color: var(--text);
}
.voll-kopf svg { width: 26px; height: 26px; }
.voll-kurs {
  flex: 1; text-align: center; color: var(--text); opacity: 0.8;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.voll-platz { width: 44px; flex: none; }
.voll h2 { margin: 0; text-align: center; font-size: 1.45rem; line-height: 1.25; }
.voll-modul { margin: 6px 0 22px; text-align: center; color: var(--leise); font-size: 0.9rem; }
#p-fortschritt { display: block; width: 100%; margin: 0; accent-color: var(--salbei); }
.voll-zeiten {
  display: flex; justify-content: space-between; gap: 8px; margin-top: 6px;
  color: var(--leise); font-size: 0.78rem; font-variant-numeric: tabular-nums;
}
.voll-knoepfe { display: flex; align-items: center; justify-content: space-between; margin: 22px 0 32px; }
.voll-knoepfe button {
  width: 52px; height: 52px; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; background: none; color: var(--text); transition: transform 0.15s;
}
.voll-knoepfe button:active { transform: scale(0.9); }
.voll-knoepfe button:disabled { opacity: 0.3; cursor: default; transform: none; }
.voll-knoepfe svg { width: 30px; height: 30px; }
.voll-knoepfe .play-gross {
  width: 78px; height: 78px; background: var(--creme); color: var(--creme-text);
  box-shadow: 0 0 0 9px rgba(239, 230, 212, 0.12), 0 12px 30px rgba(0, 0, 0, 0.4);
}
.play-gross svg { width: 32px; height: 32px; }
/* Fenster nach fertigem Audio (liegt über der Player-Ansicht) */
.fertig { text-align: center; padding-top: 34px; }
.fertig p { margin: 0 0 12px; line-height: 1.6; }
.fertig-tipp { color: var(--holz); font-weight: 600; }
.fertig .knopf-start { width: 100%; margin-top: 10px; }
.fertig .knopf-start[hidden] { display: none; }
.fertig .knopf-zweit { margin-top: 10px; }
.fehler { color: var(--fehler); font-size: 0.9rem; text-align: center; margin: 0 0 16px; }

/* ---------- Login ---------- */
.login { position: relative; z-index: 1; min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.login-box {
  width: 100%; max-width: 380px; text-align: center; padding: 36px 24px 28px; border-radius: 24px;
  background: rgba(23, 19, 14, 0.6); border: 1px solid var(--karte-rand);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  animation: einblenden 0.8s ease both;
}
.login-box h1 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 6px; }
.login-box p { color: var(--leise); margin: 0 0 22px; font-size: 0.95rem; }
.login-box input {
  width: 100%; height: 52px; padding: 0 18px; margin-bottom: 12px; border-radius: 26px;
  border: 1px solid var(--karte-rand); background: rgba(241, 236, 226, 0.08); color: var(--text);
  font: 400 16px var(--schrift);
}
.login-box input::placeholder { color: var(--leise); }
.login-box .knopf-start { width: 100%; }
.login-box .knopf-start:disabled { opacity: 0.6; }
.login-box .fehler { margin: 12px 0 0; }

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