:root {
  --blau: #4ba3e3;
  --blau-dunkel: #1f6fae;
  --gelb: #ffc93c;
  --koralle: #ff7a6b;
  --gruen: #5cbf7a;
  --text: #2b2b33;
  --text-leise: #5d6270;
  --flaeche: #ffffff;
  --grund: #f3f8fd;
  --rand: #dbe6f1;
  --schatten: 0 4px 14px rgba(31, 111, 174, 0.14);
  --rund: 22px;
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  font-family: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--grund);
  font-size: 17px;
  line-height: 1.45;
  -webkit-tap-highlight-color: transparent;
}

body.kind {
  min-height: 100vh;
  min-height: 100dvh;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

a { color: var(--blau-dunkel); }

img { max-width: 100%; display: block; }

/* --- Formularseiten ---------------------------------------------------------- */

.schmal { max-width: 560px; margin: 0 auto; padding: 16px 16px 40px; }

.kopf h1 { font-size: 2rem; margin: 12px 0 4px; color: var(--blau-dunkel); }
.unterzeile { margin: 0 0 16px; color: var(--text-leise); }
.hero { border-radius: var(--rund); box-shadow: var(--schatten); margin-bottom: 16px; }

.karte {
  background: var(--flaeche);
  border-radius: var(--rund);
  box-shadow: var(--schatten);
  padding: 16px 18px;
  margin: 0 0 16px;
}
.karte h2 { margin: 0 0 10px; font-size: 1.25rem; }
.karte h3 { margin: 14px 0 6px; font-size: 1.05rem; }
.karte summary { font-weight: 700; cursor: pointer; }
.hinweis p { margin: 6px 0; }

.formular { display: flex; flex-direction: column; gap: 12px; }
.formular label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.formular input[type=email], .formular input[type=password], .formular input[type=text],
.formular input[type=number], .formular select {
  font: inherit;
  padding: 12px 14px;
  border: 2px solid var(--rand);
  border-radius: 14px;
  background: #fff;
}
.formular input:focus, .formular select:focus { outline: 3px solid var(--gelb); border-color: var(--blau); }
.formular .schalter { flex-direction: row; align-items: center; gap: 10px; font-weight: 500; }
.schalter input { width: 22px; height: 22px; accent-color: var(--blau); }
.schalter.aus { color: var(--text-leise); }
.pin { font-size: 1.6rem; letter-spacing: 0.4em; text-align: center; }

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 999px;
  border: 2px solid var(--blau);
  background: #fff;
  color: var(--blau-dunkel);
  text-decoration: none;
  cursor: pointer;
  min-height: 48px;
}
.knopf.haupt { background: var(--blau); color: #fff; }
.knopf.gefahr { border-color: var(--koralle); color: #b13a2c; }
.knopf:active { transform: scale(0.97); }

.fehler { background: #ffe9e6; color: #9b2c1f; padding: 10px 14px; border-radius: 12px; }
.ok { background: #e5f6ea; color: #1f6b37; padding: 10px 14px; border-radius: 12px; }
.klein { font-size: 0.9rem; color: var(--text-leise); font-weight: 400; }
.fuss { text-align: center; margin-top: 24px; color: var(--text-leise); }
.text h2 { margin-top: 24px; }

.tierwahl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tier { position: relative; background: #fff; border: 3px solid transparent; border-radius: 18px;
        box-shadow: var(--schatten); padding: 8px; text-align: center; cursor: pointer; }
.tier input { position: absolute; opacity: 0; pointer-events: none; }
.tier img { height: 110px; margin: 0 auto; object-fit: contain; }
.tier span { display: block; font-weight: 700; margin-top: 4px; }
.tier:has(input:checked) { border-color: var(--blau); background: #eaf5fd; }

.maskottchen-info { display: flex; align-items: center; gap: 14px; }
.maskottchen-info img { height: 80px; }
.maskottchen-info p { flex: 1; margin: 0; font-weight: 700; }

.zaehler-reihe { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.formular .zaehler { align-items: center; text-align: center; font-weight: 500; background: var(--grund);
                     border-radius: 14px; padding: 8px; }
.zaehler img { height: 48px; }
.zaehler input { width: 80px; text-align: center; }

/* --- Kinderansicht ----------------------------------------------------------- */

.leiste {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 10px;
  padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
  background: rgba(243, 248, 253, 0.92);
  backdrop-filter: blur(6px);
}
.leiste-name { flex: 1; font-weight: 800; font-size: 1.1rem; color: var(--blau-dunkel); }
.leiste-zurueck { font-size: 1.8rem; text-decoration: none; width: 48px; height: 48px; display: grid; place-items: center;
                  background: #fff; border-radius: 50%; box-shadow: var(--schatten); }
.zahnrad { position: relative; width: 44px; height: 44px; border-radius: 50%; border: none; background: transparent;
           font-size: 1.4rem; color: #9aa6b5; cursor: pointer; }
.halten-ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--blau);
               clip-path: inset(0 100% 0 0); }
.haelt .halten-ring { transition: clip-path 1.6s linear; clip-path: inset(0 0 0 0); }

.haus-seite { max-width: 900px; margin: 0 auto; padding: 8px 16px 32px; }
.maskottchen-zeile { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 16px; }
.maskottchen { object-fit: contain; }
.maskottchen.gross { height: 170px; width: auto; flex: none; }
.blase {
  position: relative; background: #fff; border-radius: 22px; padding: 14px 18px; font-size: 1.25rem;
  font-weight: 700; box-shadow: var(--schatten); margin-bottom: 70px; cursor: pointer;
}
.blase::after { content: ""; position: absolute; left: -12px; bottom: 18px; border: 12px solid transparent;
                border-right-color: #fff; border-left: 0; }
.blase::before { content: "🔊"; float: right; margin-left: 8px; font-size: 1rem; opacity: 0.6; }

.haus { position: relative; }
.dach { height: 70px; margin: 0 6%; background: var(--koralle);
        clip-path: polygon(50% 0, 100% 100%, 0 100%); border-radius: 6px; }
.raeume { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 12px;
          background: #ffe7b8; border-radius: 0 0 var(--rund) var(--rund); box-shadow: var(--schatten); }
.raum, .mission-knopf, .einladung {
  position: relative; display: block; border-radius: 18px; overflow: hidden; background: #fff;
  text-decoration: none; color: var(--text); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.08);
}
.raum img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.raum span, .mission-knopf span, .einladung span { display: block; padding: 8px 10px; font-weight: 800; font-size: 1.15rem; text-align: center; }
.raum:active, .mission-knopf:active, .einladung:active { transform: scale(0.97); }

.missionen { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.mission-knopf img { height: 120px; margin: 14px auto 0; object-fit: contain; }
.einladung { max-width: 420px; margin: 0 auto; border: 4px solid var(--gelb); animation: puls 2s ease-in-out infinite; }
.einladung img { height: 200px; margin: 18px auto 0; object-fit: contain; }
.zurueck { text-align: center; margin-top: 20px; }

.deko { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 10px; margin-top: 18px; }
.deko img { height: 56px; }
.sterne { display: flex; align-items: center; gap: 4px; font-weight: 800; }
.sterne img { height: 40px; }

/* --- Missionen --------------------------------------------------------------- */

.buehne { max-width: 900px; margin: 0 auto; padding: 8px 16px 32px; }
.szene-kopf { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 12px; }
.szene-kopf .maskottchen { height: 120px; flex: none; }
.szene-kopf .blase { margin-bottom: 40px; font-size: 1.15rem; }

.fortschritt { display: flex; gap: 8px; justify-content: center; margin: 4px 0 12px; }
.fortschritt span { width: 14px; height: 14px; border-radius: 50%; background: var(--rand); }
.fortschritt span.fertig { background: var(--gruen); }
.fortschritt span.jetzt { background: var(--gelb); transform: scale(1.3); }

.aufgabe { position: relative; z-index: 4; text-align: center; }
.aufgabe .gegenstand { height: 200px; margin: 8px auto 16px; object-fit: contain; }
.etikett { display: inline-block; background: var(--gelb); color: #5b4300; font-weight: 800; padding: 4px 14px;
           border-radius: 999px; margin-bottom: 6px; }
.gross-knopf { font-size: 1.4rem; padding: 18px 34px; min-height: 64px; }
.halte-knopf { position: relative; overflow: hidden; }
.halte-knopf::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.35);
                       transform: scaleX(0); transform-origin: left; }
.halte-knopf.haelt::before { transition: transform 1.6s linear; transform: scaleX(1); }

.spielfeld { position: relative; margin: 0 auto; max-width: 640px; min-height: 360px; }
.spielfeld .maskottchen.figur { position: relative; height: 300px; margin: 0 auto; transition: transform 0.8s ease; }
.anzieh-feld { position: relative; width: 240px; height: 300px; margin: 0 auto 36px; }
.anzieh-feld .maskottchen { width: 100%; height: 100%; }
.angezogen { position: absolute; pointer-events: none; animation: plopp 0.35s ease-out; }
.platz-kopf { width: 46%; left: 27%; top: -4%; }
.platz-augen { width: 44%; left: 28%; top: 21%; }
.platz-hals { width: 46%; left: 27%; top: 38%; }
.platz-koerper { width: 56%; left: 22%; top: 42%; }
.platz-beine { width: 42%; left: 29%; top: 63%; }
.platz-fuesse { width: 40%; left: 30%; top: 80%; }

.auswahl { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }
.auswahl button { width: 96px; height: 96px; border-radius: 20px; border: 3px solid var(--rand); background: #fff;
                  padding: 8px; cursor: pointer; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.06); }
.auswahl button img { width: 100%; height: 100%; object-fit: contain; }
.auswahl button.weg { visibility: hidden; }
.wetter-wahl button { width: 130px; height: 120px; font-size: 3rem; display: flex; flex-direction: column;
                      align-items: center; justify-content: center; }
.wetter-wahl button small { font-size: 1rem; font-weight: 700; color: var(--text); }

.wackel { animation: wackel 0.5s ease; }
.huepf { animation: huepf 1.6s ease-in-out infinite; }

.ziel-gegenstand { position: absolute; height: 120px; cursor: pointer; animation: puls 1.6s ease-in-out infinite; }

/* Zähneputzen */
.putzen { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: center; }
.putz-maskottchen { position: relative; height: 260px; }
.putz-maskottchen .maskottchen { height: 100%; margin: 0 auto; }
.putz-buerste { position: absolute; width: 70px; left: 56%; top: 22%; transform-origin: 50% 90%;
                animation: buersten 0.35s ease-in-out infinite alternate; }
.pausiert .putz-buerste { animation-play-state: paused; }
.zahn svg { width: 100%; max-width: 260px; margin: 0 auto; display: block; }
.zahn .flaeche { fill: #ffffff; stroke: #c9d5e2; stroke-width: 4; }
.zahn .zone { fill: transparent; transition: fill 0.4s; }
.zahn .zone.aktiv { fill: var(--gelb); animation: blink 1s ease-in-out infinite alternate; }
.zahn .zahnfleisch { fill: #ffb3b3; }
.putz-info { display: flex; align-items: center; justify-content: center; gap: 14px; }
.kai { display: flex; justify-content: center; gap: 8px; margin: 10px 0; }
.kai span { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-weight: 900;
            font-size: 1.5rem; background: #fff; border: 3px solid var(--rand); }
.kai span.jetzt { background: var(--gelb); border-color: #e0a800; }
.kai span.fertig { background: var(--gruen); color: #fff; border-color: var(--gruen); }
.uhr { width: 120px; height: 120px; margin: 0 auto; }
.uhr circle { fill: none; stroke-width: 12; }
.uhr .hinten { stroke: var(--rand); }
.uhr .vorne { stroke: var(--blau); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; }
.uhr text { font-size: 26px; font-weight: 800; fill: var(--text); text-anchor: middle; dominant-baseline: central; }

/* Aufräumen */
.zimmer { position: relative; border-radius: var(--rund); overflow: hidden; box-shadow: var(--schatten); }
.zimmer > img.hintergrund { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.chaos { position: absolute; width: 15%; transition: transform 0.7s cubic-bezier(.5, -0.3, .6, 1.2), opacity 0.4s; cursor: pointer; }
.chaos.gedimmt { filter: saturate(0.4) brightness(0.95); cursor: default; pointer-events: none; }
.chaos.dran { z-index: 3; animation: puls 1.4s ease-in-out infinite; filter: drop-shadow(0 0 8px rgba(255, 201, 60, 0.9)); }
.chaos.verstaut { opacity: 0; pointer-events: none; }
.ziel { position: absolute; right: 2%; bottom: 2%; width: 24%; }
.zaehlwerk { text-align: center; font-size: 1.4rem; font-weight: 800; margin: 10px 0; }
.mengen { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 10px 0; }
.mengen img { height: 64px; }

/* Abschluss */
.abschluss { text-align: center; }
.abschluss .neu { height: 140px; margin: 10px auto; animation: plopp 0.6s ease-out; }
.konfetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 20; }
.konfetti img { position: absolute; width: 40px; top: -60px; animation: fallen 2.4s ease-in forwards; }

@keyframes puls { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes huepf { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes wackel { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
@keyframes plopp { 0% { transform: scale(0.3); opacity: 0; } 70% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); } }
@keyframes buersten { from { transform: rotate(-14deg) translateX(-4px); } to { transform: rotate(10deg) translateX(4px); } }
@keyframes blink { from { opacity: 0.55; } to { opacity: 1; } }
@keyframes fallen { to { transform: translateY(110vh) rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .huepf, .einladung, .ziel-gegenstand, .chaos.dran, .putz-buerste { animation: none; }
}

@media (max-width: 520px) {
  .maskottchen.gross { height: 130px; }
  .blase { font-size: 1.05rem; margin-bottom: 50px; }
  .tier img { height: 84px; }
  .putzen { grid-template-columns: 1fr; }
  .putz-maskottchen { height: 150px; }
  .zahn svg { max-width: 150px; }
  .uhr { width: 84px; height: 84px; }
  .kai span { width: 44px; height: 44px; font-size: 1.2rem; }
  .raum span { font-size: 1rem; }
}

@media (min-width: 760px) {
  .raeume { grid-template-columns: repeat(4, 1fr); }
}

/* --- Figur (Cutout-Rig) ------------------------------------------------------ */

.figur-huelle { position: relative; overflow: visible; pointer-events: none; }
.figur { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.figur-koerper, .figur-teil { position: absolute; inset: 0; will-change: transform; }
.figur-ebene { position: absolute; max-width: none; user-select: none; -webkit-user-drag: none; }
.figur-ebene[hidden] { display: none; }

/* --- Spielwelt --------------------------------------------------------------- */

body.spiel { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; background: #fbf6ee; }
.buehne-rahmen { flex: none; display: flex; justify-content: center; padding: 0 8px; }
.buehne32 { position: relative; width: min(100%, calc((100dvh - 230px) * 1.5)); aspect-ratio: 3 / 2; overflow: hidden;
            border-radius: 18px; box-shadow: var(--schatten); background: #f3e6d2; transition: opacity .18s; }
.buehne32.blende { opacity: 0; }
.szene-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.szene-ebenen, .szene-vorn { position: absolute; inset: 0; pointer-events: none; }
.szene-ebenen > *, .szene-vorn > * { pointer-events: auto; }
.szene-figur { position: absolute; z-index: 2; cursor: pointer; }
.szene-ebenen { z-index: 1; } .szene-vorn { z-index: 3; }
.buehne32.nacht::after { content: ""; position: absolute; inset: 0; background: rgba(20, 30, 70, .18); pointer-events: none; z-index: 4; }
.welt-blase { position: absolute; z-index: 5; max-width: 42%; background: #fff; border-radius: 16px; padding: 8px 12px;
              font-weight: 700; font-size: clamp(.8rem, 2.4vw, 1.15rem); box-shadow: var(--schatten); transform: translateY(-100%); pointer-events: none; }
.welt-ding { position: absolute; height: auto; transform: rotate(var(--dreh, 0deg)); transition: transform .65s cubic-bezier(.5,-0.3,.6,1.2), opacity .35s; }
.welt-ding.fliegt { transition: transform .65s cubic-bezier(.5,-0.3,.6,1.2), opacity .35s; }
.welt-ding.weg { opacity: 0; pointer-events: none; }
.welt-ding.tippbar, .welt-ding.dran { cursor: pointer; animation: puls 1.4s ease-in-out infinite; filter: drop-shadow(0 0 8px rgba(255, 201, 60, .9)); z-index: 2; }
.welt-ding.chaos.gedimmt { filter: saturate(.55); pointer-events: none; }
.welt-ding.chaos { cursor: pointer; }
.hotspot { position: absolute; background: transparent; border: 0; border-radius: 12px; cursor: pointer; }
.hotspot:focus-visible { outline: 3px solid var(--gelb); }
.hotspot.puls { box-shadow: 0 0 0 4px rgba(255, 201, 60, .9) inset; animation: puls 1.4s ease-in-out infinite; }
.funkeln { position: absolute; width: 60px; height: 60px; margin: -30px; border-radius: 50%; pointer-events: none;
           background: radial-gradient(circle, rgba(255,240,150,.95), rgba(255,240,150,0) 70%); animation: plopp .9s ease-out forwards; }
.zzz { position: absolute; font-weight: 900; font-size: clamp(1rem, 3vw, 1.8rem); color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.4); animation: huepf 2.4s ease-in-out infinite; }
.deko-leiste { position: absolute; left: 2%; bottom: 2%; display: flex; gap: 4px; align-items: flex-end; pointer-events: none; }
.deko-leiste img { height: clamp(24px, 6vw, 46px); }
.welt-ding.putz-buerste { animation: putzen .25s ease-in-out infinite alternate; transform-origin: 50% 85%; }
@keyframes putzen { from { transform: rotate(60deg) translateY(-3px); } to { transform: rotate(80deg) translateY(3px); } }
.putz-buerste.ruhe { animation-play-state: paused; }
.koch-waschen { animation: wackel .6s ease-in-out infinite; } .koch-ruehren { animation: buersten .4s ease-in-out infinite alternate; }
.garten-giessen { animation: wackel .5s ease-in-out 2; } .garten-saeen { animation: huepf .6s ease-in-out 2; }

.spiel-panel { flex: 1; overflow-y: auto; padding: 10px 16px calc(16px + env(safe-area-inset-bottom)); }
.raumwahl, .missionen, .gerichte { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.spiel-karte { display: flex; flex-direction: column; align-items: center; gap: 4px; background: #fff; border: 0; border-radius: 16px;
               padding: 8px; box-shadow: 0 3px 0 rgba(0,0,0,.08); font: inherit; font-weight: 800; cursor: pointer; }
.spiel-karte img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; }
.missionen .spiel-karte img, .gerichte .spiel-karte img, .spiel-karte.klein img { object-fit: contain; aspect-ratio: 1; }
.spiel-karte:active { transform: scale(.97); }
.hinweis-gross { font-size: 1.3rem; font-weight: 800; text-align: center; }
.aufgabe-text { font-size: 1.15rem; font-weight: 700; text-align: center; margin: 6px 0 10px; }
.mitte { text-align: center; }
.warnung { background: #fff4d6; border-radius: 12px; padding: 8px 12px; color: #6b4b00; }
.hinweis-zeile { background: #eaf5fd; border-radius: 12px; padding: 8px 12px; }

.schrank-rahmen .reiter { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 8px; }
.reiter button { font: inherit; font-weight: 700; border: 2px solid var(--rand); background: #fff; border-radius: 999px; padding: 6px 12px; }
.reiter button.an { background: var(--blau); color: #fff; border-color: var(--blau); }
.schrank { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.schrank-stueck { display: flex; flex-direction: column; align-items: center; gap: 2px; border: 3px solid var(--rand); background: #fff;
                  border-radius: 16px; padding: 6px; font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; }
.schrank-stueck img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.schrank-stueck.an { border-color: var(--gruen); background: #eef9f1; }
.schrank-stueck.weg { visibility: hidden; }

.putz-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: center; }
.uhr-text { font-size: 2rem; font-weight: 900; text-align: center; margin: 6px 0; }

.koerbe { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.korb { position: relative; width: 96px; text-align: center; font-weight: 800; border-bottom: 6px solid var(--farbe, #ccc); border-radius: 12px; }
.korb img { width: 100%; }
.korb-symbol { position: absolute; top: 18%; left: 50%; transform: translateX(-50%); font-size: 1.6rem; color: var(--farbe); text-shadow: 0 0 4px #fff; }
.korb.hopp { animation: huepf .4s ease-out; }

.wochentage { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 8px; }
.wochentage .tag { border: 3px solid var(--rand); background: #fff; border-radius: 12px; padding: 4px; font: inherit; font-weight: 800; display: flex; flex-direction: column; align-items: center; }
.wochentage .tag.an { border-color: var(--gelb); background: #fff8e0; }
.wochentage .tag img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.wochentage .leer { font-size: 1.4rem; color: #b8c2cf; line-height: 2.2; }
.zutatkarte { text-align: center; } .zutatkarte img { width: 160px; margin: 0 auto; } .zutatkarte p { font-size: 1.1rem; }
.einkauf-kind { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.einkauf-posten { border: 3px solid var(--rand); background: #fff; border-radius: 16px; padding: 6px; font: inherit; font-weight: 800; display: flex; flex-direction: column; align-items: center; }
.einkauf-posten img { width: 80%; } .einkauf-posten.gefunden { border-color: var(--gruen); background: #eef9f1; opacity: .7; }
.gesichter { display: flex; justify-content: center; gap: 8px; } .gesichter button { font-size: 2.4rem; background: #fff; border: 3px solid var(--rand); border-radius: 50%; width: 64px; height: 64px; }
.werkzeuge { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 8px; }
.werkzeuge button { display: flex; flex-direction: column; align-items: center; width: 84px; border: 3px solid var(--rand); background: #fff; border-radius: 16px; padding: 4px; font: inherit; font-weight: 700; }
.werkzeuge button img { width: 100%; aspect-ratio: 1; object-fit: contain; } .werkzeuge button.an { border-color: var(--blau); background: #eaf5fd; }
.beete { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.beet-knopf { font: inherit; font-weight: 800; border: 0; border-radius: 12px; background: #8a5a35; color: #fff; padding: 10px 14px; }
.basteltisch { position: relative; height: 260px; background: #f1dcc0; border-radius: 18px; box-shadow: inset 0 0 0 3px #e3c79f; overflow: hidden; touch-action: none; }
.bastel-teil { position: absolute; width: 22%; max-width: 110px; touch-action: none; cursor: grab; }

.druckseite { max-width: 780px; margin: 0 auto; padding: 16px; background: #fff; }
.kinderliste { list-style: none; padding: 0; }
.kinderliste li { display: flex; align-items: center; gap: 18px; font-size: 2rem; font-weight: 800; border-bottom: 2px solid #ddd; padding: 10px 0; }
.kinderliste img { width: 110px; filter: none; }
.elternliste { list-style: none; padding: 0; } .elternliste li { padding: 4px 0; font-size: 1.1rem; }
.haken { display: inline-block; width: 28px; height: 28px; border: 3px solid #333; border-radius: 6px; flex: none; }
.liste { width: 100%; border-collapse: collapse; } .liste td, .liste th { padding: 4px; border-bottom: 1px solid var(--rand); text-align: left; }
.liste img { height: 32px; vertical-align: middle; }
.sprungmarken { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.person-reihe { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 6px; margin-bottom: 6px; }
@media print { .nicht-drucken, .leiste { display: none !important; } body { background: #fff; } }
@media (max-width: 520px) { .putz-panel { grid-template-columns: 1fr; } .buehne32 { width: 100%; } }