/* Anmeldeseite „Mathe mit Plan“ – Bambuswald mit Planda (Prototyp)
   Regeln: nur transform/opacity animieren, Hover nur bei feinem Zeiger,
   alles Bewegte hängt an data-bewegung="an" (sonst ruhige Variante). */
:root {
  --marine: #16304F; --marine-tief: #0E2038; --marine-nacht: #0A1729;
  --gold: #F3AB52; --gold-hell: #FAD7A6; --papier: #F7F5F0;
  --text-hell: #F4F1EA; --text-ruhig: #C3CFDE; --fehler: #FFB4A8; --gut: #9FE0B0;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-inout: cubic-bezier(.77, 0, .175, 1);
  --nebel: 226, 233, 218;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; min-height: 100svh; overflow: hidden;
  background: #DCE6D3; color: var(--marine-tief);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Szene ---------- */
.kamera { position: fixed; inset: 0; overflow: hidden; pointer-events: none; transform-origin: 50% 50%; contain: strict; }
.kamera > * { position: absolute; inset: 0; }
.himmel {
  background:
    radial-gradient(60% 55% at 80% 6%, rgba(255, 241, 205, .95), rgba(255, 236, 190, .35) 45%, transparent 70%),
    radial-gradient(80% 60% at 20% 30%, rgba(236, 242, 224, .9), transparent 70%),
    linear-gradient(180deg, #F2EEDB 0%, #E1E9D6 42%, #CBDAC4 100%);
}
.ebene { will-change: transform; }
.ebene-halme { position: absolute; inset: 0; }
.halm, .stueck { position: absolute; transform-origin: 50% 100%; }
.halm { bottom: -24px; }
.stueck { bottom: 100%; left: 0; width: 100%; }
.halm canvas { position: absolute; display: block; }
[data-ebene="fern"] { opacity: .92; }

/* Nebelbänder zwischen den Ebenen: geben Tiefe */
.nebel.n1 { background: linear-gradient(0deg, rgba(var(--nebel), .92) 0%, rgba(var(--nebel), .55) 30%, rgba(var(--nebel), .12) 65%, transparent 85%); }
.nebel.n2 { background: linear-gradient(0deg, rgba(var(--nebel), .75) 0%, rgba(var(--nebel), .28) 26%, transparent 52%); }
.nebel::after {   /* treibende Schwaden, nur transform */
  content: ""; position: absolute; left: -30%; right: -30%; bottom: 4%; height: 38%;
  background: radial-gradient(40% 50% at 30% 60%, rgba(var(--nebel), .55), transparent 70%), radial-gradient(35% 45% at 75% 50%, rgba(var(--nebel), .45), transparent 70%);
}
[data-bewegung="an"] .nebel::after { animation: treiben 38s ease-in-out infinite alternate; }
[data-bewegung="an"] .nebel.n2::after { animation-duration: 52s; animation-direction: alternate-reverse; }
@keyframes treiben { from { transform: translate3d(-8%, 0, 0); } to { transform: translate3d(8%, -2%, 0); } }

.boden-nebel { background: linear-gradient(0deg, rgba(234, 239, 228, .97) 0%, rgba(234, 239, 228, .7) 9%, rgba(234, 239, 228, .2) 22%, transparent 34%); }

/* Lichtstrahlen von oben rechts */
.strahlen { mix-blend-mode: screen; overflow: hidden; }
.strahlen i {
  position: absolute; top: -20%; height: 150%; width: 9vw; min-width: 60px;
  background: linear-gradient(180deg, rgba(255, 238, 196, .75), rgba(255, 238, 196, .18) 60%, transparent 85%);
  filter: blur(14px); transform-origin: 50% 0; opacity: .5;
}
.strahlen i:nth-child(1) { left: 62%; transform: rotate(24deg); width: 6vw; }
.strahlen i:nth-child(2) { left: 72%; transform: rotate(26deg); width: 11vw; opacity: .42; }
.strahlen i:nth-child(3) { left: 82%; transform: rotate(28deg); width: 4vw; opacity: .6; }
.strahlen i:nth-child(4) { left: 90%; transform: rotate(30deg); width: 8vw; opacity: .38; }
.strahlen i:nth-child(5) { left: 50%; transform: rotate(22deg); width: 3vw; opacity: .3; }
[data-bewegung="an"] .strahlen i { animation: atmen 9s ease-in-out infinite alternate; }
[data-bewegung="an"] .strahlen i:nth-child(2n) { animation-duration: 13s; animation-delay: -4s; }
[data-bewegung="an"] .strahlen i:nth-child(3n) { animation-duration: 11s; animation-delay: -7s; }
@keyframes atmen { from { opacity: .22; } to { opacity: .68; } }

/* Pollen im Licht */
.pollen span {
  position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 246, 220, .95), rgba(255, 236, 190, 0) 70%);
  opacity: 0;
}
[data-bewegung="an"] .pollen span { animation: schweben var(--d, 14s) linear var(--v, 0s) infinite; }
@keyframes schweben {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  15%, 80% { opacity: var(--o, .8); }
  100% { opacity: 0; transform: translate3d(var(--x, -60px), var(--y, 90px), 0); }
}
[data-bewegung="aus"] .pollen { display: none; }

/* ---------- Planda ---------- */
.planda { position: absolute; width: calc(var(--h) * .615); height: var(--h); }
.planda-lage, .planda-blick, .planda-sprung { position: absolute; inset: 0; transform-origin: 50% 100%; }
.planda-lage { transition: transform 1.1s cubic-bezier(.45, .05, .2, 1); }
.planda[data-lage="versteckt"] .planda-lage { transform: translate(calc(var(--h) * .17), calc(var(--h) * .1)) rotate(5deg); }
.planda[data-lage="halb"] .planda-lage { transform: translate(calc(var(--h) * .075), calc(var(--h) * .035)) rotate(2.5deg); }
.planda[data-lage="draussen"] .planda-lage { transform: translate(calc(var(--h) * -.01), 0) rotate(-2.5deg); }
.planda[data-lage="mitte"] .planda-lage { transform: translate(calc(var(--h) * -.04), calc(var(--h) * -.02)); transition-duration: .5s; }
.mobil .planda[data-lage="versteckt"] .planda-lage { transform: translate(calc(var(--h) * .1), calc(var(--h) * .2)) rotate(4deg); }
.mobil .planda[data-lage="halb"] .planda-lage { transform: translate(calc(var(--h) * .05), calc(var(--h) * .08)) rotate(2deg); }
.mobil .planda[data-lage="mitte"] .planda-lage { transform: translate(calc(var(--h) * -.02), var(--mitte-y, 0px)); }
[data-bewegung="aus"] .planda-lage { transition: opacity .2s; }

.pose { position: absolute; transition: opacity .18s ease; }
.pose img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 18px 22px rgba(20, 40, 30, .18)); }
.pose-lugt { left: 0; top: 0; width: 100%; height: 100%; }
.pose-skeptisch { left: calc(var(--h) * .006); top: calc(var(--h) * .011); width: calc(var(--h) * .611); height: calc(var(--h) * 1.025); opacity: 0; }
.pose-jubel { left: calc(var(--h) * -.178); top: calc(var(--h) * -.006); width: calc(var(--h) * .91); height: calc(var(--h) * 1.131); opacity: 0; }
.planda[data-pose="skeptisch"] .pose-lugt, .planda[data-pose="jubel"] .pose-lugt { opacity: 0; }
.planda[data-pose="skeptisch"] .pose-skeptisch { opacity: 1; }
.planda[data-pose="jubel"] .pose-jubel { opacity: 1; }
.augen { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.augen .lid { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0); }

.funken { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.funken i { position: absolute; width: 12px; height: 12px; left: 48.5%; top: 43%; background: var(--gold); transform: rotate(45deg) scale(0); opacity: 0; border-radius: 2px; box-shadow: 0 0 10px rgba(255, 210, 120, .9); }

/* ---------- Kopfzeile ---------- */
.kopf { position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 16px clamp(14px, 3vw, 36px); z-index: 20; pointer-events: none; }
.kopf a { pointer-events: auto; }
.marke, .kopf-link {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--marine-tief);
  background: rgba(247, 245, 240, .86); padding: 8px 14px 8px 8px; border-radius: 999px; font-weight: 800; letter-spacing: -.01em;
  box-shadow: 0 2px 10px rgba(14, 32, 56, .08);
}
.kopf-link { padding: 9px 14px; font-weight: 700; font-size: .92rem; }
.marke small { font-weight: 600; color: #3E5068; }
.marke-zeichen { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--marine); color: var(--gold); box-shadow: inset 0 0 0 2px var(--gold); }
.marke-zeichen svg { width: 17px; height: 17px; }

/* ---------- Karte ---------- */
.karte {
  position: fixed; z-index: 10; width: min(430px, calc(100vw - 28px));
  left: clamp(20px, 7vw, 120px); top: 50%; transform: translateY(-50%);
  padding: 30px 30px 22px; border-radius: 24px; color: var(--text-hell);
  background: linear-gradient(165deg, rgba(26, 56, 92, .97), rgba(14, 32, 56, .97) 70%);
  border: 1px solid rgba(243, 171, 82, .55);
  box-shadow: 0 30px 60px -20px rgba(10, 23, 41, .55), 0 0 0 6px rgba(243, 171, 82, .07), inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: opacity .35s ease, transform .45s var(--ease-out);
}
.karte.weg { opacity: 0; transform: translateY(calc(-50% + 14px)) scale(.97); }
.kicker { margin: 0 0 6px; font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hell); }
h1 { margin: 0 0 20px; font: 400 clamp(1.7rem, 2.6vw, 2.15rem)/1.12 Georgia, "Times New Roman", serif; letter-spacing: -.01em; }
h1 em { color: var(--gold); font-style: italic; }

.reiter { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); padding: 4px; margin-bottom: 18px; border-radius: 999px; background: rgba(5, 14, 28, .55); border: 1px solid rgba(195, 207, 222, .16); }
.reiter button { position: relative; z-index: 1; border: 0; background: none; padding: 9px 4px; border-radius: 999px; font: 700 .86rem system-ui, sans-serif; color: var(--text-ruhig); cursor: pointer; transition: color .2s ease; }
.reiter button[aria-selected="true"] { color: var(--marine-tief); }
.reiter-marke { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 2); border-radius: 999px; background: linear-gradient(180deg, #F8C377, var(--gold)); transition: transform .28s var(--ease-out); }

label { display: block; margin: 12px 0 6px; font-size: .88rem; font-weight: 700; color: #E3E9F1; }
.hinweis { font-weight: 500; color: var(--text-ruhig); }
.zeile { display: flex; justify-content: space-between; align-items: baseline; }
input {
  width: 100%; padding: 12px 14px; border-radius: 12px; font: 1rem system-ui, sans-serif; color: var(--text-hell);
  background: rgba(4, 12, 24, .6); border: 1.5px solid rgba(160, 180, 205, .38);
  transition: border-color .15s ease, background-color .15s ease;
}
input::placeholder { color: #93A6BF; letter-spacing: .06em; }
input:focus { outline: 2px solid var(--gold); outline-offset: 2px; border-color: var(--gold); }
input[aria-invalid="true"] { border-color: var(--fehler); }
input[readonly] { opacity: .75; }
.pw-feld { position: relative; }
.pw-feld input { padding-right: 82px; }
.zeigen { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: rgba(195, 207, 222, .12); color: #E3E9F1; font: 700 .8rem system-ui, sans-serif; padding: 7px 10px; border-radius: 8px; cursor: pointer; }
.hinweis-text { margin: 8px 0 0; font-size: .85rem; line-height: 1.45; color: var(--text-ruhig); }

button:focus-visible, a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.primaer {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; margin-top: 20px; padding: 14px; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(180deg, #F8C377, var(--gold)); color: var(--marine-tief); font: 800 1.02rem system-ui, sans-serif;
  box-shadow: 0 8px 20px -8px rgba(243, 171, 82, .7), inset 0 1px 0 rgba(255, 255, 255, .45);
  transition: transform .16s var(--ease-out);
}
.primaer:active { transform: scale(.97); }
.kreisel { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(14, 32, 56, .25); border-top-color: var(--marine-tief); animation: drehen .7s linear infinite; }
.primaer[aria-busy="true"] .kreisel { display: inline-block; }
@keyframes drehen { to { transform: rotate(360deg); } }
.demo { width: 100%; margin-top: 10px; padding: 11px; border-radius: 999px; background: transparent; color: var(--gold-hell); border: 1.5px dashed rgba(250, 215, 166, .55); font: 700 .92rem system-ui, sans-serif; cursor: pointer; transition: transform .16s var(--ease-out); }
.demo:active { transform: scale(.97); }
.link { border: 0; background: none; padding: 0; color: var(--gold-hell); font: 700 .84rem system-ui, sans-serif; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.meldung { min-height: 1.4em; margin: 14px 0 0; font-size: .92rem; line-height: 1.45; color: var(--text-ruhig); }
.meldung.fehler { color: var(--fehler); }
.meldung.gut { color: var(--gut); }
.fuss { margin: 10px 0 0; font-size: .9rem; }
.fuss a { color: #E3E9F1; font-weight: 700; text-underline-offset: 3px; }
.demo-hinweis { margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed rgba(195, 207, 222, .22); font-size: .76rem; line-height: 1.4; color: #A9B8CB; }
kbd { font: 700 .72rem system-ui; padding: 1px 5px; border-radius: 4px; border: 1px solid rgba(195, 207, 222, .4); }

@media (hover: hover) and (pointer: fine) {
  .primaer:hover { filter: brightness(1.04); }
  .reiter button:hover:not([aria-selected="true"]) { color: #fff; }
  .demo:hover { background: rgba(250, 215, 166, .08); }
}

/* Schütteln bei Fehler (nur mit Bewegung) */
.karte.wackeln { animation: wackeln .38s var(--ease-out); }
@keyframes wackeln { 0%, 100% { transform: translateY(-50%); } 25% { transform: translate(-6px, -50%); } 60% { transform: translate(4px, -50%); } }

/* ---------- Mobil: Karte unten, Planda lugt darüber ---------- */
.mobil .karte { left: 50%; top: auto; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%); padding: 22px 20px 16px; border-radius: 22px; }
.mobil .karte.weg { transform: translate(-50%, 16px) scale(.97); }
.mobil .karte.wackeln { animation-name: wackeln-m; }
@keyframes wackeln-m { 0%, 100% { transform: translateX(-50%); } 25% { transform: translateX(calc(-50% - 6px)); } 60% { transform: translateX(calc(-50% + 4px)); } }
.mobil h1 { font-size: 1.55rem; margin-bottom: 14px; }
.mobil .kicker { margin-bottom: 4px; }
.mobil label { margin-top: 9px; }
.mobil input { padding: 11px 13px; }
.mobil .primaer { margin-top: 16px; padding: 13px; }
.mobil .demo-hinweis { display: none; }
.mobil .marke small { display: none; }
.mobil .reiter { margin-bottom: 12px; }

/* ---------- App-Attrappe (Handy und Ziel) ---------- */
.app-ziel { position: fixed; inset: 0; z-index: 30; opacity: 0; }
.app { width: 100%; height: 100%; display: flex; flex-direction: column; background: #EEF2F6; color: #13243B; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow: hidden; }
.app-kopf { background: var(--marine); padding: 14px 16px 16px; border-bottom: 3px solid var(--gold); }
.app-leiste { display: flex; align-items: center; gap: 10px; }
.app-leiste .rund { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--marine-tief); flex: none; }
.app-leiste .rund svg { width: 20px; height: 20px; }
.app-leiste .logo { background: transparent; box-shadow: inset 0 0 0 2px var(--gold); color: var(--gold); margin-right: auto; }
.app-leiste .dunkel { background: rgba(255, 255, 255, .12); color: #DCE4EE; }
.app-leiste .avatar { background: var(--gold); color: var(--marine-tief); font-weight: 800; }
.app-frei { margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border-radius: 999px; background: linear-gradient(90deg, #F6D38E, var(--gold) 60%, #E39A3E); color: var(--marine-tief); font-weight: 800; font-size: 1.05rem; }
.app-haupt { flex: 1; padding: 26px 18px 0; overflow: hidden; }
.app-innen { max-width: 760px; margin: 0 auto; }
.app-kicker { margin: 0; font-size: .82rem; font-weight: 800; letter-spacing: .16em; color: #5A6B80; }
.app-titel { margin: 10px 0 12px; font: 400 2.15rem/1.12 Georgia, "Times New Roman", serif; color: #13243B; }
.app-titel em { color: #D9A234; }
.app-text { margin: 0; font-size: 1.08rem; line-height: 1.6; color: #2E3F55; }
.app-kurve { position: relative; margin-top: 26px; height: 230px; }
.app-kurve svg { width: 100%; height: 100%; }
.app-kurve img { position: absolute; right: 8%; top: -12px; width: 66px; height: auto; }
.app-fuss { display: grid; grid-template-columns: repeat(6, 1fr); background: var(--marine); color: #DCE4EE; font-size: .72rem; text-align: center; padding: 8px 6px max(10px, env(safe-area-inset-bottom)); }
.app-fuss span { padding: 8px 0 6px; border-radius: 12px; }
.app-fuss span::before { content: ""; display: block; width: 18px; height: 18px; margin: 0 auto 4px; border-radius: 5px; border: 2px solid currentColor; opacity: .85; }
.app-fuss .aktiv { background: var(--gold); color: var(--marine-tief); font-weight: 800; }
.app-zurueck { position: fixed; z-index: 31; right: 16px; bottom: 86px; padding: 10px 14px; border-radius: 999px; border: 0; background: var(--marine-tief); color: #fff; font: 700 .9rem system-ui, sans-serif; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); cursor: pointer; }
@media (min-width: 760px) { .app-ziel .app-frei { max-width: 420px; margin: 14px auto 0; } }
/* Beim Jubel tritt Planda vor seinen Versteck-Halm */
.versteck-halme { z-index: 2; }
.planda { z-index: 1; }
.planda.vorne { z-index: 3; }