/* ══════════════════════════════════════════
   Darf Målin das? – Pastell, rund, verspielt
   Pfirsich, Rosa, Minze, Butter, Flieder auf Creme. Fredoka für Überschriften,
   Nunito für Text. Alles Bewegte ist weich und federnd; wer weniger Bewegung
   eingestellt hat, bekommt sie auch.
   ══════════════════════════════════════════ */

:root{
  --creme:#FFF6EE; --creme-2:#FFEDE2; --tinte:#26304F; --leise:#6E7393;
  --rosa:#FF9EB5; --rosa-2:#FF6F91; --pfirsich:#FFC4A3; --minze:#8EE0C0; --minze-2:#3DBE8B;
  --butter:#FFE08A; --butter-2:#F2B53C; --flieder:#C7B8FF; --flieder-2:#9B86F0; --koralle:#FF8A9B; --koralle-2:#F2506B;
  --schatten:0 10px 30px rgba(38, 48, 79, .12);
  /* Regenbogen wie der Rand von Målins Halstuch */
  --regenbogen:linear-gradient(90deg, #FF6B6B, #FFA94D, #FFD43B, #69DB7C, #4DABF7, #9775FA);
  --weich:cubic-bezier(.34, 1.56, .64, 1);   /* federt leicht über */
  --rund:"Fredoka", "Nunito", system-ui, sans-serif;
  --text:"Nunito", system-ui, sans-serif;
}
*{ box-sizing:border-box; }
[hidden]{ display:none !important; }   /* sonst gewinnen display:flex/grid unten */
html{ -webkit-text-size-adjust:100%; background:var(--creme); }
body{ margin:0; min-height:100dvh; font-family:var(--text); font-weight:600; color:var(--tinte); background:var(--creme);
  -webkit-tap-highlight-color:transparent; overflow-x:hidden; }
button, input, textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; touch-action:manipulation; }
a{ color:var(--rosa-2); }

/* Weiche Farbkleckse im Hintergrund, die langsam schweben */
.blobs{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.blobs i{ position:absolute; width:60vmax; height:60vmax; border-radius:50%; filter:blur(50px); opacity:.55; animation:schweben 18s ease-in-out infinite alternate; }
.blobs i:nth-child(1){ background:var(--pfirsich); left:-25vmax; top:-20vmax; }
.blobs i:nth-child(2){ background:var(--flieder); right:-30vmax; top:30vh; animation-duration:22s; opacity:.35; }
.blobs i:nth-child(3){ background:var(--minze); left:-10vmax; bottom:-35vmax; animation-duration:26s; opacity:.35; }
@keyframes schweben{ to{ transform:translate(6vmax, 4vmax) scale(1.08); } }

#app{ max-width:520px; margin:0 auto; padding:calc(env(safe-area-inset-top) + 14px) 18px calc(env(safe-area-inset-bottom) + 28px); }

/* ── Kopf ── */
.kopf{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.kopf h1{ font-family:var(--rund); font-weight:700; font-size:30px; line-height:1; margin:0; letter-spacing:-.01em; }
.kopf h1 .wort{ display:inline-block; animation:hupf .7s var(--weich) both; }
.kopf h1 .wort:nth-child(2){ animation-delay:.08s; } .kopf h1 .wort:nth-child(3){ animation-delay:.16s; }
.kopf h1 .name{ color:var(--rosa-2); position:relative; }
.kopf h1 .name::before{ content:""; position:absolute; left:2px; right:2px; bottom:-5px; height:4px; border-radius:4px; background:var(--regenbogen);
  transform-origin:left; animation:band .9s .35s var(--weich) both; }
@keyframes band{ from{ transform:scaleX(0); } }
@keyframes hupf{ from{ transform:translateY(16px) scale(.8); opacity:0; } }
@keyframes pochen{ 50%{ transform:scale(1.35); } }
.rund{ width:42px; height:42px; border-radius:50%; border:0; background:#fff; box-shadow:var(--schatten); font-family:var(--rund); font-weight:700; font-size:18px;
  display:grid; place-items:center; transition:transform .2s var(--weich); }
.rund:active{ transform:scale(.9); }

/* ── Kamera ── */
.kamera{ position:relative; aspect-ratio:4 / 4.6; border-radius:34px; overflow:hidden; background:linear-gradient(160deg, #FFE1D3, #FFD0DC 55%, #E5DCFF);
  box-shadow:var(--schatten), inset 0 0 0 4px #fff; isolation:isolate; }
.kamera video{ position:absolute; left:0; top:0; width:100%; height:100%; max-width:none; object-fit:cover; opacity:0; transition:opacity .5s; }   /* Größe setzt scanner.mjs */
.kamera.an video{ opacity:1; }
.rahmen{ position:absolute; left:9%; right:9%; top:24%; bottom:30%; opacity:0; transition:opacity .4s; pointer-events:none; }
.kamera.an .rahmen{ opacity:1; }
.rahmen i{ position:absolute; width:34px; height:34px; border:5px solid #fff; filter:drop-shadow(0 2px 6px rgba(38,48,79,.3)); animation:ecken 1.8s ease-in-out infinite; }
.rahmen i:nth-child(1){ left:0; top:0; border-right:0; border-bottom:0; border-top-left-radius:18px; }
.rahmen i:nth-child(2){ right:0; top:0; border-left:0; border-bottom:0; border-top-right-radius:18px; --dx:1; }
.rahmen i:nth-child(3){ left:0; bottom:0; border-right:0; border-top:0; border-bottom-left-radius:18px; --dy:1; }
.rahmen i:nth-child(4){ right:0; bottom:0; border-left:0; border-top:0; border-bottom-right-radius:18px; --dx:1; --dy:1; }
@keyframes ecken{ 50%{ transform:translate(calc((var(--dx, 0) * 2 - 1) * 4px), calc((var(--dy, 0) * 2 - 1) * 4px)); } }
.laser{ position:absolute; left:6%; right:6%; height:4px; border-radius:4px; top:50%;
  background:var(--regenbogen); -webkit-mask:linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask:linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  box-shadow:0 0 14px 3px rgba(255,255,255,.55); animation:laser 1.9s ease-in-out infinite; }
@keyframes laser{ 0%, 100%{ top:12%; } 50%{ top:85%; } }
.kamera.treffer .rahmen i{ border-color:var(--minze); animation:none; transform:scale(1.08); transition:transform .2s var(--weich); }
.kamera.treffer::after{ content:""; position:absolute; inset:0; background:#fff; animation:blitz .5s ease-out forwards; }
@keyframes blitz{ from{ opacity:.7; } to{ opacity:0; } }
.blase{ position:absolute; left:16px; bottom:16px; max-width:calc(100% - 110px); padding:10px 16px; border-radius:999px; background:rgba(255,255,255,.92);
  box-shadow:var(--schatten); font-family:var(--rund); font-weight:600; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:0; transition:opacity .3s; }
.kamera.an .blase{ opacity:1; }
.blase.sucht{ background:var(--butter); animation:wackeln .5s ease-in-out infinite alternate; }
@keyframes wackeln{ from{ transform:rotate(-2deg); } to{ transform:rotate(2deg); } }
.start{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:24px; text-align:center; transition:opacity .4s, transform .4s; }
.kamera.an .start{ opacity:0; transform:scale(.9); pointer-events:none; }
.kamera.laedt .start .knopf{ animation:pochen 1s ease-in-out infinite; }
.start p{ margin:0; color:var(--leise); font-size:15px; }
.start-mampfi .mampfi{ width:150px; height:150px; }
.licht{ position:absolute; right:14px; top:14px; z-index:2; }
.licht.an{ background:var(--butter); }

/* Mampfi lugt über den Kamerarand */
.gucker{ height:0; position:relative; z-index:2; }
.gucker .mampfi{ position:absolute; right:10px; top:-62px; width:78px; height:78px; transition:opacity .3s; }
body:not(:has(.kamera.an)) .gucker .mampfi{ opacity:0; }

/* ── Knöpfe ── */
.knopf{ border:0; border-radius:999px; padding:14px 20px; font-family:var(--rund); font-weight:600; font-size:17px; background:var(--rosa-2); color:#fff;
  box-shadow:0 5px 0 #D9476A, var(--schatten); transition:transform .15s var(--weich), box-shadow .15s; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.knopf:active{ transform:translateY(4px); box-shadow:0 1px 0 #D9476A, var(--schatten); }
.knopf.gross{ padding:16px 28px; font-size:19px; }
.knopf.weich{ background:#fff; color:var(--tinte); box-shadow:0 4px 0 #EADBE3, var(--schatten); font-size:15.5px; padding:12px 16px; }
.knopf.weich:active{ box-shadow:0 1px 0 #EADBE3; }
.werkzeuge{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px; }

/* ── Verlauf ── */
.verlauf h2{ font-family:var(--rund); font-weight:600; font-size:17px; margin:26px 4px 10px; color:var(--leise); }
.verlauf ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.verlauf li{ animation:rein .45s var(--weich) both; animation-delay:calc(var(--i) * 45ms); }
@keyframes rein{ from{ transform:translateY(14px) scale(.96); opacity:0; } }
.eintrag{ width:100%; display:flex; align-items:center; gap:12px; padding:10px 14px 10px 10px; border:0; border-radius:20px; background:#fff; box-shadow:var(--schatten); text-align:left; }
.eintrag:active{ transform:scale(.98); }
.eintrag .punkt{ width:40px; height:40px; flex:none; border-radius:14px; display:grid; place-items:center; font-size:20px; }
.eintrag.ja .punkt{ background:var(--minze); } .eintrag.vorsicht .punkt{ background:var(--butter); }
.eintrag.nein .punkt{ background:var(--koralle); } .eintrag.unbekannt .punkt{ background:var(--flieder); }
.eintrag .was{ min-width:0; } .eintrag b{ display:block; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.eintrag small{ color:var(--leise); font-weight:600; }

/* ── Blatt von unten ── */
.blatt-huelle{ position:fixed; inset:0; z-index:20; background:rgba(38,48,79,0); transition:background .3s; display:flex; align-items:flex-end; justify-content:center; }
.blatt-huelle.offen{ background:rgba(38,48,79,.35); }
.blatt{ width:100%; max-width:520px; max-height:92dvh; overflow-y:auto; overscroll-behavior:contain; background:var(--creme); border-radius:32px 32px 0 0;
  padding:10px 20px calc(env(safe-area-inset-bottom) + 22px); transform:translateY(105%); transition:transform .45s var(--weich); box-shadow:0 -10px 40px rgba(38,48,79,.2); }
.blatt-huelle.offen .blatt{ transform:none; }
.griff{ width:44px; height:5px; border-radius:5px; background:#E4D6DE; margin:0 auto 12px; }
.blatt-titel{ font-family:var(--rund); font-weight:700; font-size:26px; margin:6px 0 8px; }
.blatt h3{ font-family:var(--rund); font-weight:600; margin:20px 0 6px; }
.leise{ color:var(--leise); font-weight:600; line-height:1.5; }

/* Urteil oben im Ergebnis */
.urteil{ border-radius:26px; padding:18px 18px 16px; text-align:center; position:relative; overflow:hidden; animation:aufpoppen .55s var(--weich) both .1s; }
@keyframes aufpoppen{ from{ transform:scale(.8); opacity:0; } }
.urteil.ja{ background:linear-gradient(160deg, #B7F0D8, var(--minze)); }
.urteil.vorsicht{ background:linear-gradient(160deg, #FFF0B8, var(--butter)); }
.urteil.nein{ background:linear-gradient(160deg, #FFC6CF, var(--koralle)); }
.urteil.unbekannt{ background:linear-gradient(160deg, #E4DCFF, var(--flieder)); }
.urteil::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 10% 14%, rgba(255,255,255,.6) 0 8px, transparent 9px),
  radial-gradient(circle at 90% 18%, rgba(255,255,255,.5) 0 5px, transparent 6px), radial-gradient(circle at 93% 50%, rgba(255,255,255,.4) 0 10px, transparent 11px),
  radial-gradient(circle at 6% 55%, rgba(255,255,255,.35) 0 5px, transparent 6px); }
.urteil-mampfi .mampfi{ width:130px; height:130px; position:relative; margin:0 auto; }
.urteil-titel{ font-family:var(--rund); font-weight:700; font-size:28px; line-height:1.1; margin:2px 0 6px; position:relative; }
.urteil-titel .emoji{ display:inline-block; animation:hupf .6s var(--weich) both .45s; }
.urteil p{ margin:0; font-weight:700; position:relative; }
.produkt{ display:flex; gap:12px; align-items:center; margin:16px 2px 6px; }
.produkt img, .kein-bild{ width:58px; height:58px; flex:none; border-radius:16px; object-fit:cover; background:#fff; box-shadow:var(--schatten); }
.kein-bild{ display:grid; place-items:center; font-size:26px; }
.produkt b{ display:block; font-family:var(--rund); font-weight:600; font-size:18px; line-height:1.2; }
.produkt small{ display:block; color:var(--leise); font-size:13.5px; }
.produkt .code{ font-variant-numeric:tabular-nums; opacity:.7; }
.gruende{ list-style:none; padding:0; margin:12px 0; display:grid; gap:8px; }
.grund{ display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-radius:20px; background:#fff; box-shadow:var(--schatten); animation:rein .45s var(--weich) both; animation-delay:calc(.25s + var(--i) * 80ms); }
.g-emoji{ font-size:24px; line-height:1; width:38px; height:38px; flex:none; border-radius:13px; display:grid; place-items:center; }
.grund.nein .g-emoji{ background:#FFE0E5; } .grund.vorsicht .g-emoji{ background:#FFF3C8; } .grund.ok .g-emoji{ background:#D9F6EA; }
.grund b{ font-weight:800; }
.grund em{ font-style:normal; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; padding:2px 8px; border-radius:999px; margin-left:4px; }
.grund.nein em{ background:var(--koralle); color:#fff; } .grund.vorsicht em{ background:var(--butter); } .grund.ok em{ background:var(--minze); }
.grund small{ display:block; color:var(--leise); margin-top:3px; line-height:1.4; }
.notiz{ margin:8px 2px; font-size:14px; color:var(--leise); line-height:1.45; }
.zutaten{ margin:12px 0; background:#fff; border-radius:20px; padding:12px 16px; box-shadow:var(--schatten); }
.zutaten summary{ font-family:var(--rund); font-weight:600; cursor:pointer; }
.zutaten p{ margin:8px 0 2px; line-height:1.6; font-weight:600; font-size:14.5px; }
mark{ border-radius:6px; padding:0 3px; color:var(--tinte); font-weight:800; }
mark.nein{ background:#FFC6CF; } mark.vorsicht{ background:#FFE9A3; } mark.ok{ background:#C9F2DF; }
.aktionen{ display:flex; flex-direction:column; align-items:stretch; gap:10px; margin-top:16px; text-align:center; }
.aktionen .leise{ font-size:14px; }
.gewaehr{ text-align:center; font-size:12.5px; color:var(--leise); margin:14px 0 0; }

/* Info */
.liste-unvertraeglich{ list-style:none; padding:0; margin:10px 0; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.liste-unvertraeglich li{ display:flex; gap:10px; align-items:center; padding:12px; border-radius:18px; background:#fff; box-shadow:var(--schatten); animation:rein .45s var(--weich) both; animation-delay:calc(var(--i) * 50ms); font-size:14.5px; line-height:1.25; }
.liste-unvertraeglich span{ font-size:24px; }
.so{ padding-left:20px; line-height:1.5; margin:0; } .so li{ margin:4px 0; }

/* Eingabe */
.eingabe{ display:grid; gap:12px; margin-top:10px; }
.eingabe input, .eingabe textarea{ width:100%; border:0; border-radius:20px; padding:16px; background:#fff; box-shadow:inset 0 0 0 2px #F0E2EA; font-size:18px; font-weight:700; }
.eingabe input{ font-family:var(--rund); letter-spacing:.06em; text-align:center; font-size:24px; }
.eingabe textarea{ font-size:16px; resize:vertical; }
.eingabe :focus{ outline:none; box-shadow:inset 0 0 0 3px var(--rosa); }

/* Kurze Meldung */
.toast{ position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom) + 20px); z-index:30; transform:translate(-50%, 140%); padding:12px 18px; border-radius:999px;
  background:var(--tinte); color:#fff; font-weight:700; box-shadow:var(--schatten); transition:transform .4s var(--weich), visibility .4s; max-width:90vw; text-align:center; visibility:hidden; }
.toast.da{ transform:translate(-50%, 0); visibility:visible; }

/* Konfetti */
.konfetti{ position:fixed; left:50%; top:30%; z-index:25; pointer-events:none; }
.konfetti i{ position:absolute; font-style:normal; font-size:24px; animation:flug 1.7s cubic-bezier(.2,.8,.3,1) both; animation-delay:var(--d); }
@keyframes flug{ 0%{ transform:translate(0, 40px) scale(.2); opacity:0; } 15%{ opacity:1; }
  70%{ transform:translate(var(--x), var(--y)) rotate(var(--r)) scale(1); opacity:1; }
  100%{ transform:translate(var(--x), calc(var(--y) + 90px)) rotate(var(--r)) scale(.8); opacity:0; } }

/* ══ Mampfi: Launen ══ */
.mampfi{ overflow:visible; display:block; }
.mampfi .koerper{ transform-origin:60px 105px; }
.mampfi .auge-froh, .mampfi .auge-nein, .mampfi .auge-gross, .mampfi .mund, .mampfi .extra, .mampfi .brauen{ display:none; }
.mampfi .augen{ transform-origin:60px 56px; animation:blinzeln 4.2s infinite; }
@keyframes blinzeln{ 0%, 93%, 100%{ transform:scaleY(1); } 96%{ transform:scaleY(.1); } }
.mampfi .schatten{ transform-origin:60px 112px; }
/* warten: schweben, lächeln */
.laune-warten .mund-warten, .laune-schauen .mund-warten{ display:block; }
.laune-warten .koerper{ animation:atmen 3.2s ease-in-out infinite; }
.laune-warten .schatten{ animation:schattenAtmen 3.2s ease-in-out infinite; }
@keyframes atmen{ 50%{ transform:translateY(-5px) scale(1.02, .98); } }
@keyframes schattenAtmen{ 50%{ transform:scaleX(.85); opacity:.08; } }
/* schauen: Augen wandern hin und her */
.laune-schauen .pupillen{ animation:gucken 1.6s ease-in-out infinite; }
.laune-schauen .auge-normal ellipse{ animation:gucken 1.6s ease-in-out infinite; }
@keyframes gucken{ 0%, 100%{ transform:translateX(-2.5px); } 50%{ transform:translateX(2.5px); } }
.laune-schauen .koerper{ animation:atmen 2.4s ease-in-out infinite; }
/* ja: froh, hüpfen, Herzchen */
.laune-ja .auge-normal{ display:none; } .laune-ja .auge-froh{ display:block; }
.laune-ja .mund-ja, .laune-ja .mund-zunge, .laune-ja .extra-ja{ display:block; }
.laune-ja .koerper{ animation:jubel .75s cubic-bezier(.3,.7,.4,1.4) infinite alternate; }
.laune-ja .schatten{ animation:schattenJubel .75s ease-in-out infinite alternate; }
.laune-ja .hand-l{ animation:winkenL .38s ease-in-out infinite alternate; transform-origin:26px 101px; }
.laune-ja .hand-r{ animation:winkenR .38s ease-in-out infinite alternate; transform-origin:94px 101px; }
.laune-ja .herz{ animation:herz 1.6s ease-out infinite; transform-box:fill-box; transform-origin:center; }
.laune-ja .h2{ animation-delay:.5s; } .laune-ja .h3{ animation-delay:1s; }
@keyframes jubel{ from{ transform:translateY(0) scale(1.05, .95); } to{ transform:translateY(-14px) scale(.97, 1.04); } }
@keyframes schattenJubel{ to{ transform:scaleX(.7); opacity:.06; } }
@keyframes winkenL{ to{ transform:translate(-2px, -14px) rotate(-20deg); } }
@keyframes winkenR{ to{ transform:translate(2px, -14px) rotate(20deg); } }
@keyframes herz{ 0%{ opacity:0; translate:0 6px; scale:.4; } 30%{ opacity:1; scale:1; } 100%{ opacity:0; translate:0 -22px; scale:1.1; } }
/* vorsicht: Kopf schief, Schweißtropfen */
.laune-vorsicht .mund-vorsicht, .laune-vorsicht .extra-vorsicht, .laune-vorsicht .brauen{ display:block; }
.laune-vorsicht .koerper{ animation:gruebeln 2.2s ease-in-out infinite; }
.laune-vorsicht .tropfen{ animation:tropfen 2.2s ease-in infinite; }
.laune-vorsicht .hand-r{ transform:translate(-12px, -14px); }
@keyframes gruebeln{ 0%, 100%{ transform:rotate(-7deg); } 50%{ transform:rotate(6deg); } }
@keyframes tropfen{ 0%{ opacity:0; transform:translateY(-4px); } 25%{ opacity:1; } 100%{ opacity:0; transform:translateY(14px); } }
/* nein: Kopf schütteln */
.laune-nein .auge-normal{ display:none; } .laune-nein .auge-nein, .laune-nein .mund-nein, .laune-nein .extra-nein{ display:block; }
.laune-nein .koerper{ animation:schuetteln .9s ease-in-out infinite; }
.laune-nein .hand-l{ transform:translate(14px, -2px); } .laune-nein .hand-r{ transform:translate(-14px, -2px); }
@keyframes schuetteln{ 0%, 60%, 100%{ transform:translateX(0) rotate(0); } 10%, 30%{ transform:translateX(-6px) rotate(-6deg); } 20%, 40%{ transform:translateX(6px) rotate(6deg); } }
/* unbekannt: große Augen, Fragezeichen, Schulterzucken */
.laune-unbekannt .auge-normal{ display:none; } .laune-unbekannt .auge-gross, .laune-unbekannt .mund-unbekannt, .laune-unbekannt .extra-unbekannt{ display:block; }
.laune-unbekannt .koerper{ animation:zucken 1.8s ease-in-out infinite; }
.laune-unbekannt .frage{ animation:frage 1.8s ease-in-out infinite; transform-box:fill-box; transform-origin:center bottom; }
.laune-unbekannt .hand-l, .laune-unbekannt .hand-r{ animation:schultern 1.8s ease-in-out infinite; }
@keyframes zucken{ 0%, 100%{ transform:translateY(0); } 40%{ transform:translateY(-6px) rotate(-3deg); } }
@keyframes frage{ 0%, 100%{ transform:rotate(-8deg) scale(1); } 50%{ transform:rotate(10deg) scale(1.15); } }
@keyframes schultern{ 40%{ transform:translateY(-10px); } }

/* ══ Neu: Foto, Målins Urteil, Målins Ecke, Quiz ══ */
.kopf-knoepfe{ display:flex; gap:8px; }
.krone{ position:relative; background:linear-gradient(160deg, #FFF0B8, var(--butter)); }
.krone .zahl, h3 .zahl{ position:absolute; right:-4px; top:-4px; min-width:20px; height:20px; padding:0 5px; border-radius:999px; background:var(--rosa-2); color:#fff;
  font-size:12px; font-weight:800; display:grid; place-items:center; box-shadow:0 2px 6px rgba(38,48,79,.2); }
h3 .zahl{ position:static; display:inline-grid; vertical-align:2px; margin-left:4px; }
.werkzeuge .breit{ grid-column:1 / -1; }
.klein{ font-size:13.5px; }
.link{ background:none; border:0; padding:6px; text-decoration:underline; text-underline-offset:3px; }

/* Lesen: Mampfi schaut, drei Punkte hüpfen */
.lesen{ text-align:center; padding:6px 0 4px; }
.lesen .mampfi{ width:120px; height:120px; margin:0 auto; }
.punkte{ display:flex; justify-content:center; gap:8px; margin:14px 0 6px; }
.punkte i{ width:12px; height:12px; border-radius:50%; background:var(--rosa); animation:punkt 1s ease-in-out infinite; }
.punkte i:nth-child(2){ animation-delay:.15s; background:var(--butter-2); } .punkte i:nth-child(3){ animation-delay:.3s; background:var(--minze-2); }
@keyframes punkt{ 50%{ transform:translateY(-10px); } }

/* Was Målin selbst gesagt hat */
.malin-notiz{ margin:12px 4px 0; padding:12px 16px; border-radius:20px; background:#fff; box-shadow:var(--schatten); font-weight:700; line-height:1.4; }
.malin-notiz small{ color:var(--leise); font-weight:600; }
.dein-urteil{ margin:16px 0 4px; padding:14px; border-radius:24px; background:linear-gradient(160deg, #FFF7DA, #FFEFF4); box-shadow:inset 0 0 0 2px #fff; text-align:center; }
.dein-urteil h3{ margin:0 0 10px; }

/* Drei (oder vier) Knöpfe nebeneinander, einer ist an */
.segment{ display:flex; gap:4px; padding:4px; border-radius:999px; background:#fff; box-shadow:inset 0 0 0 2px #F0E2EA; flex:none; }
.segment button{ border:0; border-radius:999px; background:none; min-width:40px; height:36px; padding:0 8px; font-size:17px; transition:background .2s, transform .2s var(--weich); }
.segment button:active{ transform:scale(.9); }
.segment .ok.an, .segment .ja.an, .segment .aus.an{ background:var(--minze); }
.segment .vorsicht.an, .segment .hinweis.an{ background:var(--butter); }
.segment .nein.an{ background:var(--koralle); }
.segment.gross{ border-radius:22px; }
.segment.gross button{ flex:1; height:auto; padding:10px 4px; border-radius:18px; font-family:var(--rund); font-weight:600; font-size:14px; display:grid; gap:2px; }
.segment.gross button span{ font-size:24px; }
.segment.breit{ width:100%; } .segment.breit button{ flex:1; font-size:14px; font-weight:700; }

/* Målins Ecke */
.ecke-karte{ width:100%; display:flex; gap:14px; align-items:center; text-align:left; border:0; border-radius:24px; padding:16px; margin:10px 0 4px;
  background:linear-gradient(135deg, #FFE1EA, #E9E1FF); box-shadow:var(--schatten); transition:transform .2s var(--weich); }
.ecke-karte:active{ transform:scale(.97); }
.ecke-karte .gross-emoji{ font-size:36px; }
.ecke-karte b{ display:block; font-family:var(--rund); font-weight:600; font-size:19px; }
.ecke-karte small{ color:var(--leise); }
.ecke-liste{ list-style:none; padding:0; margin:8px 0; display:grid; gap:8px; }
.ecke-liste li{ display:flex; align-items:center; gap:10px; padding:10px 10px 10px 14px; border-radius:20px; background:#fff; box-shadow:var(--schatten); }
.ecke-liste li > div:first-of-type{ flex:1; min-width:0; }
.ecke-liste b{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:800; }
.ecke-liste small{ color:var(--leise); font-size:12.5px; }
.ecke-liste .punkt{ width:34px; height:34px; flex:none; border-radius:12px; display:grid; place-items:center; }
.punkt.ja{ background:var(--minze); } .punkt.vorsicht{ background:var(--butter); } .punkt.nein{ background:var(--koralle); }
.mini{ display:flex; gap:4px; flex:none; }
.ecke-liste li.offen{ flex-wrap:wrap; }
.ecke-liste li.offen .mini{ width:100%; } .ecke-liste li.offen .mini button{ flex:1; height:40px; }
.mini button{ width:36px; height:36px; border:0; border-radius:12px; background:var(--creme-2); font-size:17px; }
.mini button:active{ transform:scale(.9); }
.fein{ margin:18px 0 8px; background:#fff; border-radius:20px; padding:12px 14px; box-shadow:var(--schatten); }
.fein summary{ font-family:var(--rund); font-weight:600; cursor:pointer; }
.fein h4{ margin:16px 0 6px; font-family:var(--rund); font-weight:600; }
.fein-liste{ list-style:none; padding:0; margin:0; display:grid; gap:6px; }
.fein-liste li{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:14px; line-height:1.3; }
.melden{ text-align:left; background:#fff; border-radius:20px; padding:12px 16px; box-shadow:var(--schatten); }
.melden summary{ font-family:var(--rund); font-weight:600; cursor:pointer; text-align:center; }
.melden .knopf{ width:100%; }

/* Quiz */
.quiz-start{ text-align:center; }
.quiz-start .mampfi{ width:120px; height:120px; margin:0 auto; }
.quiz-kopf{ display:flex; align-items:center; gap:12px; font-family:var(--rund); font-weight:600; color:var(--leise); }
.rund.klein{ width:36px; height:36px; font-size:22px; flex:none; }
.fortschritt{ flex:1; height:10px; border-radius:10px; background:#fff; box-shadow:inset 0 0 0 2px #F0E2EA; overflow:hidden; }
.fortschritt i{ display:block; height:100%; background:var(--regenbogen); border-radius:10px; transition:width .4s var(--weich); }
.quiz-frage{ text-align:center; animation:rein .4s var(--weich) both; }
.quiz-emoji{ font-size:64px; margin:18px 0 0; animation:hupf .6s var(--weich) both; }
.antworten{ display:grid; gap:10px; margin:18px 0 6px; }
.antwort{ border:0; border-radius:20px; padding:16px; background:#fff; box-shadow:0 4px 0 #EADBE3, var(--schatten); font-family:var(--rund); font-weight:600; font-size:18px;
  display:flex; justify-content:center; align-items:center; gap:10px; transition:transform .15s var(--weich), background .2s; }
.antwort:active{ transform:translateY(3px); }
.antwort small{ font-family:var(--text); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--leise); }
.antwort.an.ok, .antwort.an.aus{ background:#C9F2DF; } .antwort.an.vorsicht, .antwort.an.hinweis{ background:#FFEFB5; } .antwort.an.nein{ background:#FFD3DA; }
.antwort.gewaehlt{ animation:pochen .3s ease-out; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:16px 0 4px; }
.chip{ border:0; border-radius:999px; padding:10px 14px; background:#fff; box-shadow:inset 0 0 0 2px #F0E2EA; font-weight:800; font-size:15px; transition:background .2s, transform .2s var(--weich); }
.chip:active{ transform:scale(.94); }
.chip.an{ background:var(--minze); box-shadow:none; }
.notiz-feld{ width:100%; border:0; border-radius:16px; padding:12px 14px; margin-top:6px; background:#fff; box-shadow:inset 0 0 0 2px #F0E2EA; font-size:16px; font-weight:700; }
.notiz-feld:focus{ outline:none; box-shadow:inset 0 0 0 3px var(--rosa); }
.notiz.frag{ background:#FFF3C8; color:var(--tinte); padding:10px 14px; border-radius:16px; font-weight:700; }
.antwort.an.menge{ background:#FFEFB5; }
.segment .menge.an{ background:var(--butter); }
.zusammenfassung small{ color:var(--leise); }
.zusammenfassung{ display:grid; gap:8px; margin-top:14px; }
.zusammenfassung > div{ border-radius:20px; padding:10px 14px; background:#fff; box-shadow:var(--schatten); }
.zusammenfassung h4{ margin:2px 0 4px; font-family:var(--rund); font-weight:600; }
.zusammenfassung ul{ margin:0; padding:0; list-style:none; font-size:14px; line-height:1.6; }
.zusammenfassung .ok{ border-left:6px solid var(--minze); } .zusammenfassung .vorsicht{ border-left:6px solid var(--butter); } .zusammenfassung .nein{ border-left:6px solid var(--koralle); }

/* Quer gehaltenes Handy: Webseiten dürfen das Drehen auf dem iPhone nicht sperren, also freundlich bitten */
.hochkant{ display:none; }
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse){
  .hochkant{ position:fixed; inset:0; z-index:50; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
    background:var(--creme); font-family:var(--rund); font-weight:600; font-size:20px; text-align:center; }
  .hochkant .mampfi{ width:120px; height:120px; animation:zurueckdrehen 2.4s var(--weich) infinite; }
  .hochkant p{ margin:0; }
  body{ overflow:hidden; }
}
@keyframes zurueckdrehen{ 0%, 20%{ transform:rotate(90deg); } 55%, 100%{ transform:rotate(0); } }

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