:root{--tief: #02182c;--wasser: #073b64;--wasser-hell: #0e6ba8;--gold: #ffc93c;--gold-dunkel: #c8860d;--gold-hell: #ffe28a;--gruen: #34d07f;--gruen-dunkel: #1a7a4a;--rot: #f0564a;--rot-dunkel: #9e2b22;--schrift: #f4fbff;--schrift-matt: #a9c9e0;--panel: rgba(4, 34, 60, .82);--rand: rgba(255, 201, 60, .35);color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{font-family:Trebuchet MS,Segoe UI,system-ui,-apple-system,sans-serif;color:var(--schrift);background:linear-gradient(180deg,#0e6ba8,#073b64 45%,#02182c);background-attachment:fixed;overflow-x:hidden}.hintergrund{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;z-index:0}.lichtstrahlen{position:absolute;inset:-20% -10% auto -10%;height:120%;background:linear-gradient(103deg,transparent 42%,rgba(180,230,255,.13) 46%,transparent 50%),linear-gradient(97deg,transparent 58%,rgba(180,230,255,.1) 62%,transparent 67%),linear-gradient(110deg,transparent 20%,rgba(180,230,255,.08) 25%,transparent 30%);animation:schimmern 14s ease-in-out infinite alternate}@keyframes schimmern{0%{transform:translate(-3%) scaleY(1);opacity:.75}to{transform:translate(3%) scaleY(1.06);opacity:1}}.fisch{position:absolute;left:-20%;animation-name:schwimmen;animation-timing-function:linear;animation-iteration-count:infinite;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}.fisch--links{animation-name:schwimmen-links}@keyframes schwimmen{0%{transform:translate(0) translateY(0) scaleX(1)}50%{transform:translate(70vw) translateY(-16px) scaleX(1)}to{transform:translate(140vw) translateY(0) scaleX(1)}}@keyframes schwimmen-links{0%{transform:translate(140vw) translateY(0) scaleX(-1)}50%{transform:translate(70vw) translateY(18px) scaleX(-1)}to{transform:translate(0) translateY(0) scaleX(-1)}}.blase{position:absolute;bottom:-40px;border-radius:50%;background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.85),rgba(255,255,255,.12) 62%,transparent 70%);border:1px solid rgba(255,255,255,.28);animation-name:aufsteigen;animation-timing-function:linear;animation-iteration-count:infinite}@keyframes aufsteigen{0%{transform:translateY(0) translate(0);opacity:0}10%{opacity:.75}90%{opacity:.55}to{transform:translateY(-104vh) translate(28px);opacity:0}}.seegras{position:absolute;inset:auto 0 0 0;height:130px;background:radial-gradient(60px 130px at 8% 100%,rgba(26,122,74,.5) 40%,transparent 70%),radial-gradient(45px 105px at 22% 100%,rgba(26,122,74,.38) 40%,transparent 70%),radial-gradient(70px 140px at 48% 100%,rgba(20,100,62,.42) 40%,transparent 70%),radial-gradient(50px 120px at 74% 100%,rgba(26,122,74,.45) 40%,transparent 70%),radial-gradient(64px 132px at 92% 100%,rgba(20,100,62,.4) 40%,transparent 70%),linear-gradient(180deg,transparent,rgba(2,18,30,.85));animation:wiegen 9s ease-in-out infinite alternate;transform-origin:bottom center}@keyframes wiegen{0%{transform:skew(-2.5deg)}to{transform:skew(2.5deg)}}.app{position:relative;min-height:100dvh}.buehne{position:relative;z-index:1;display:flex;justify-content:center;align-items:flex-start;padding:clamp(16px,4vw,48px) 16px calc(48px + env(safe-area-inset-bottom,0px));min-height:100dvh}.karte{width:100%;max-width:720px;background:var(--panel);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:2px solid var(--rand);border-radius:26px;padding:clamp(18px,3.5vw,34px);box-shadow:0 24px 60px #00000073,inset 0 1px #ffffff1f;animation:auftauchen .45s ease-out}@keyframes auftauchen{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}.karte--start,.karte--menue{max-width:560px;text-align:center}.logo__haken{font-size:clamp(44px,10vw,68px);display:block;animation:baumeln 3.4s ease-in-out infinite;transform-origin:top center}@keyframes baumeln{0%,to{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}.logo h1{margin:6px 0 0;font-size:clamp(28px,6.5vw,44px);line-height:1.1;letter-spacing:.5px;text-transform:uppercase;background:linear-gradient(180deg,var(--gold-hell),var(--gold) 45%,var(--gold-dunkel));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 3px 0 rgba(0,0,0,.25)}.logo__akzent{display:block;font-size:.64em;color:var(--schrift);background:none;-webkit-text-fill-color:var(--schrift);letter-spacing:3px}.logo__unterzeile{margin:10px 0 22px;color:var(--schrift-matt);font-size:15px}.logo--klein .logo__haken{font-size:40px}.logo--klein h1{font-size:clamp(22px,5vw,30px);margin-bottom:18px}.knopf{font-family:inherit;font-size:16px;font-weight:700;border-radius:14px;border:2px solid transparent;padding:13px 20px;cursor:pointer;transition:transform .12s ease,filter .12s ease,box-shadow .12s ease;color:var(--schrift);background:#ffffff17}.knopf:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.1)}.knopf:active:not(:disabled){transform:translateY(1px)}.knopf:disabled{opacity:.5;cursor:not-allowed}.knopf--gold{background:linear-gradient(180deg,var(--gold-hell),var(--gold) 50%,var(--gold-dunkel));color:#2a1a00;border-color:#fff6;box-shadow:0 6px 0 var(--gold-dunkel),0 12px 22px #0006}.knopf--klein{font-size:14px;padding:9px 15px;border-radius:11px;color:var(--schrift-matt)}.knopf--rot{background:linear-gradient(180deg,var(--rot),var(--rot-dunkel));box-shadow:0 4px 0 var(--rot-dunkel)}.breit{width:100%;margin-top:18px}.knopf--benutzer{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border-color:var(--rand);font-size:18px}.benutzer__avatar{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border-radius:50%;background:linear-gradient(180deg,var(--gold-hell),var(--gold-dunkel));color:#2a1a00;font-weight:800}.benutzerliste{display:grid;gap:10px;margin-bottom:18px}.trenner{display:flex;align-items:center;gap:12px;color:var(--schrift-matt);font-size:13px;text-transform:uppercase;letter-spacing:1.5px;margin:18px 0}.trenner:before,.trenner:after{content:"";flex:1;height:1px;background:var(--rand)}.neuform{display:flex;gap:10px;flex-wrap:wrap}.feld{flex:1 1 180px;min-width:0;font-family:inherit;font-size:16px;padding:13px 16px;border-radius:14px;border:2px solid var(--rand);background:#02182cbf;color:var(--schrift)}.feld:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px #ffc93c2e}.menue{display:grid;gap:12px;margin:20px 0}.kachelknopf{font-family:inherit;display:grid;grid-template-columns:52px 1fr;grid-template-rows:auto auto;gap:2px 14px;text-align:left;padding:16px 18px;border-radius:18px;border:2px solid var(--rand);background:linear-gradient(140deg,#0e6ba880,#04223c99);color:var(--schrift);cursor:pointer;transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}.kachelknopf:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 12px 26px #0006}.kachelknopf__emoji{grid-row:1 / 3;align-self:center;font-size:36px}.kachelknopf__titel{font-size:19px;font-weight:800;color:var(--gold)}.kachelknopf__text{font-size:14px;color:var(--schrift-matt)}.kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.kopf__titel{font-size:13px;text-transform:uppercase;letter-spacing:1.5px;color:var(--gold);font-weight:700}.fortschritt{position:relative;height:26px;border-radius:13px;background:#02182ccc;border:1px solid var(--rand);overflow:hidden;margin-bottom:20px}.fortschritt--menue{margin-bottom:4px}.fortschritt__balken{height:100%;background:linear-gradient(90deg,var(--gruen-dunkel),var(--gruen));transition:width .4s ease}.fortschritt__text{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-size:12.5px;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.8)}.kategorie{display:inline-block;margin:0 0 10px;padding:4px 11px;border-radius:999px;background:#ffc93c29;border:1px solid var(--rand);color:var(--gold);font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px}.frage{font-size:clamp(19px,3.6vw,25px);line-height:1.35;margin:0 0 20px}.antworten{display:grid;gap:11px}.antwort{font-family:inherit;font-size:16px;line-height:1.4;text-align:left;padding:15px 18px;border-radius:15px;border:2px solid var(--rand);background:#083458b3;color:var(--schrift);cursor:pointer;transition:transform .12s ease,border-color .12s ease,background .2s ease}.antwort:hover:not(:disabled){transform:translate(4px);border-color:var(--gold);background:#0e6ba8a6}.antwort:disabled{cursor:default}.antwort--richtig{background:linear-gradient(140deg,#34d07f66,#1a7a4a80);border-color:var(--gruen);animation:treffer .45s ease}.antwort--falsch{background:linear-gradient(140deg,#f0564a61,#9e2b2280);border-color:var(--rot);animation:zappeln .4s ease}.antwort--blass{opacity:.42}@keyframes treffer{0%,to{transform:scale(1)}45%{transform:scale(1.03)}}@keyframes zappeln{0%,to{transform:translate(0)}25%{transform:translate(-7px)}75%{transform:translate(7px)}}.rueckmeldung{margin-top:20px;padding:17px;border-radius:17px;border:2px solid var(--rand);background:#02182cb3;animation:auftauchen .3s ease-out}.rueckmeldung strong{font-size:18px;display:block}.rueckmeldung--gut strong{color:var(--gruen)}.rueckmeldung--schlecht strong{color:var(--rot)}.rueckmeldung p{margin:8px 0 14px;color:var(--schrift-matt);font-size:15px}.bewertung{display:grid;grid-template-columns:1fr 1fr;gap:11px}.knopf--leicht,.knopf--schwer{display:grid;gap:3px;padding:14px 12px}.knopf--leicht small,.knopf--schwer small{font-weight:500;font-size:12px;opacity:.85}.knopf--leicht{background:linear-gradient(180deg,var(--gruen),var(--gruen-dunkel));box-shadow:0 5px 0 var(--gruen-dunkel)}.knopf--schwer{background:linear-gradient(180deg,#f2a33c,#a8620c);box-shadow:0 5px #a8620c}.hinweis{margin-top:18px;font-size:13.5px;color:var(--schrift-matt);text-align:center}.ergebnis{text-align:center;padding:22px 16px;border-radius:20px;margin-bottom:22px;border:2px solid var(--rand)}.ergebnis--bestanden{background:linear-gradient(160deg,#34d07f52,#1a7a4a47);border-color:var(--gruen)}.ergebnis--durchgefallen{background:linear-gradient(160deg,#f0564a47,#9e2b223d);border-color:var(--rot)}.ergebnis__emoji{font-size:54px;display:block;animation:baumeln 3s ease-in-out infinite}.ergebnis h2{margin:6px 0;font-size:26px}.ergebnis__zahl{font-size:44px;font-weight:800;margin:4px 0;color:var(--gold)}.ergebnis__grenze{margin:0;font-size:13.5px;color:var(--schrift-matt)}.abschnitt{font-size:15px;text-transform:uppercase;letter-spacing:1.5px;color:var(--gold);margin:24px 0 12px}.falschliste,.pruefliste{list-style:none;padding:0;margin:0;display:grid;gap:12px}.falsch{padding:15px;border-radius:15px;background:#02182cb3;border:1px solid var(--rand);border-left:5px solid var(--rot)}.falsch__frage{margin:0 0 10px;font-weight:700;line-height:1.35}.falsch__deine,.falsch__richtig{margin:6px 0;font-size:14.5px;line-height:1.4;color:var(--schrift-matt)}.etikett{display:inline-block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1px;padding:3px 8px;border-radius:7px;margin-right:8px;color:#04121f}.etikett--rot{background:var(--rot)}.etikett--gruen{background:var(--gruen)}.perfekt{text-align:center;font-size:19px;color:var(--gruen);font-weight:700}.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}.kachel{padding:16px 12px;border-radius:16px;text-align:center;background:linear-gradient(150deg,#0e6ba873,#04223c99);border:1px solid var(--rand)}.kachel__zahl{display:block;font-size:30px;font-weight:800;color:var(--gold)}.kachel__text{font-size:13px;color:var(--schrift-matt)}.boxen{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;align-items:end}.box{text-align:center}.box__saeule{height:96px;display:flex;align-items:flex-end;border-radius:9px;background:#02182ca6;border:1px solid var(--rand);overflow:hidden}.box__fuellung{width:100%;border-radius:0 0 7px 7px;transition:height .5s ease;background:linear-gradient(180deg,var(--rot),var(--rot-dunkel));min-height:2px}.box__fuellung--2,.box__fuellung--3{background:linear-gradient(180deg,#f2a33c,#a8620c)}.box__fuellung--4,.box__fuellung--5{background:linear-gradient(180deg,var(--gruen),var(--gruen-dunkel))}.box__zahl{display:block;font-weight:800;margin-top:5px;font-size:15px}.box__name{display:block;font-size:10.5px;color:var(--schrift-matt);line-height:1.25}.pruef{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 15px;border-radius:13px;background:#02182cb3;border-left:5px solid var(--rot);font-size:14.5px}.pruef--gut{border-left-color:var(--gruen)}.pruef strong{font-size:17px;color:var(--gold)}.gefahr{margin-top:28px;padding-top:18px;border-top:1px solid var(--rand);text-align:center}.gefahr p{color:var(--schrift-matt);font-size:14.5px}.gefahr__knoepfe{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.fehler{color:var(--rot);background:#f0564a21;border:1px solid var(--rot);border-radius:12px;padding:11px 15px;font-size:14.5px}.laedt{text-align:center;color:var(--schrift-matt);padding:34px 0;font-size:17px}@media (max-width: 480px){.bewertung{grid-template-columns:1fr}.boxen{grid-template-columns:repeat(3,1fr);gap:10px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.fisch{display:none}}.kategorien{display:grid;gap:12px}.katknopf{position:relative;font-family:inherit;display:grid;grid-template-columns:46px 1fr;gap:2px 14px;text-align:left;padding:15px 17px 19px;border-radius:18px;border:2px solid var(--rand);background:linear-gradient(140deg,#0e6ba873,#04223c99);color:var(--schrift);cursor:pointer;overflow:hidden;transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease}.katknopf:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 12px 26px #0006}.katknopf__emoji{grid-row:1 / 3;align-self:center;font-size:30px;text-align:center}.katknopf__titel{font-size:18px;font-weight:800;color:var(--gold)}.katknopf__text{font-size:13.5px;color:var(--schrift-matt)}.katknopf__balken{position:absolute;inset:auto 0 0 0;height:5px;background:#02182ccc}.katknopf__fuellung{display:block;height:100%;background:linear-gradient(90deg,var(--gruen-dunkel),var(--gruen));transition:width .4s ease}.kat--alle .katknopf__titel{color:var(--gold)}.kat--recht .katknopf__titel{color:#8fd0ff}.kat--fisch .katknopf__titel{color:#7ee2a8}.kat--oeko .katknopf__titel{color:#86e0e8}.kat--geraet .katknopf__titel{color:#f5b971}.warnung{position:relative;z-index:2;display:grid;gap:4px;margin:0;padding:14px clamp(16px,4vw,32px);padding-top:calc(14px + env(safe-area-inset-top,0px));background:linear-gradient(180deg,var(--rot),var(--rot-dunkel));color:#fff;font-size:14px;line-height:1.4;box-shadow:0 6px 18px #00000073}.warnung strong{font-size:15.5px}