/* kidsready.de. Look nach der Morgen-Check-Vorlage: Himmel, Sonne, Wiese, Beere. */
:root {
  --sky: #CFEAFF; --sky2: #EAF6FF; --sun: #FFD23F; --grass: #3BB273; --berry: #E4577D;
  --ink: #1E2A4A; --line: #9CC8EA; --card: #FFFFFF; --muted: #5B6B8C; --farbe: #3BB273;
  --schatten: 0 4px 0 rgba(30, 42, 74, .12);
}
body.abend {
  --sky: #1B2238; --sky2: #232C47; --card: #2B3553; --ink: #F2E9D8; --line: #44507A;
  --muted: #B5B9CC; --sun: #E0B23A; --grass: #35996A; --berry: #C9587A;
  --schatten: 0 4px 0 rgba(0, 0, 0, .35);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
body {
  font-family: "Baloo 2", "Nunito", system-ui, -apple-system, sans-serif; color: var(--ink);
  background: linear-gradient(180deg, var(--sky) 0%, var(--sky2) 100%); background-attachment: fixed;
  overscroll-behavior: none; -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
input, select { -webkit-user-select: text; user-select: text; }
.hidden { display: none !important; }
#app { height: 100%; }
#confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 90; }
.klein { font-size: 15px; color: var(--muted); margin: 4px 0; line-height: 1.3; }
.leer-text { color: var(--muted); font-size: 18px; text-align: center; padding: 12px; }
.wachs { flex: 1; min-width: 0; }

.offline-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; background: #1E2A4A; color: #fff; text-align: center; font-size: 15px; padding: 6px 12px calc(6px + env(safe-area-inset-bottom)); }

/* Karten, Knöpfe, Felder */
.center-wrap { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 24px; }
.card { background: var(--card); border: 3px solid var(--line); border-radius: 28px; padding: 28px; box-shadow: var(--schatten); max-width: 440px; width: 100%; text-align: center; font-size: 20px; }
.login .logo { font-size: 72px; line-height: 1; }
.login h1 { margin: 6px 0 0; font-size: 40px; }
.login p { margin: 6px 0 16px; }
.fuss-link { display: inline-block; margin-top: 14px; color: var(--muted); font-size: 15px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 8px 18px; border-radius: 16px; font-weight: 700; font-size: 18px; box-shadow: var(--schatten); text-decoration: none; white-space: nowrap; position: relative; }
.btn:active { transform: translateY(2px); box-shadow: none; }
.btn.gruen { background: var(--grass); color: #fff; }
.btn.rot { background: var(--berry); color: #fff; }
.btn.sonne { background: var(--sun); color: #1E2A4A; }
.btn.grau { background: var(--sky2); color: var(--ink); border: 2px solid var(--line); }
.btn.gross { width: 100%; min-height: 58px; font-size: 21px; margin-top: 12px; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.rund { width: 52px; height: 52px; border-radius: 50%; background: var(--card); border: 3px solid var(--line); font-size: 24px; box-shadow: var(--schatten); flex: none; }
.mini { width: 38px; height: 38px; border-radius: 12px; background: var(--sky2); border: 2px solid var(--line); font-weight: 800; font-size: 18px; flex: none; }
.feld { min-height: 48px; border-radius: 14px; border: 3px solid var(--line); background: var(--card); padding: 6px 12px; font-size: 18px; flex: 1; min-width: 0; width: 100%; }
.feld.schmal { flex: 0 0 auto; width: 122px; }
.feld:focus { outline: 3px solid var(--sun); }
textarea.feld { font-family: inherit; line-height: 1.4; padding: 10px 12px; resize: vertical; }
/* Empfehlungsreiter: der fertige Text zum Kopieren steht abgesetzt vom uebrigen Klein. */
.trenner { border: none; border-top: 3px dashed var(--line); margin: 16px 0 12px; }
.empfehlung-text { background: var(--sky2); border: 3px solid var(--line); border-radius: 14px; padding: 10px 12px; white-space: pre-wrap; }
.zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.zeile.rechts { justify-content: flex-end; }
.zeile > .feld:not(.schmal) { flex: 1 1 180px; }
.block { display: block; margin: 12px 0 4px; font-size: 17px; }
.haken-zeile { display: flex; align-items: center; gap: 8px; font-size: 17px; margin: 8px 0; }
.haken-zeile input, .chip input { width: 24px; height: 24px; accent-color: var(--grass); }

/* Board (Profilwahl entfällt seit job-993, alle Kinder stehen nebeneinander) */
.leer-karte { align-self: center; max-width: 520px; text-align: center; background: var(--card); border: 4px solid var(--sun); border-radius: 26px; padding: 24px; box-shadow: var(--schatten); }
.board { height: 100%; display: flex; flex-direction: column; padding: calc(10px + env(safe-area-inset-top)) 12px 0; }
.kopf { display: flex; align-items: center; gap: 12px; padding: 0 4px 10px; }
.kopf-links, .kopf-rechts { flex: 1; display: flex; gap: 10px; }
.kopf-links { flex-direction: column; gap: 0; }
.kopf-rechts { justify-content: flex-end; }
.kopf-mitte { text-align: center; }
.uhr { font-size: 40px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.datum { font-size: 16px; color: var(--muted); font-weight: 700; }
.routine-name { font-size: 28px; font-weight: 800; line-height: 1.1; }
.routine-zeit { font-size: 16px; color: var(--muted); font-weight: 700; }
.stift-leiste { display: flex; align-items: center; gap: 12px; justify-content: space-between; background: var(--sun); color: #1E2A4A; border-radius: 16px; padding: 8px 8px 8px 16px; margin-bottom: 10px; font-weight: 700; font-size: 17px; }

.spalten { flex: 1; min-height: 0; display: flex; gap: 14px; justify-content: center; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
.spalte { position: relative; flex: 1 1 0; min-width: 0; max-width: 600px; display: flex; flex-direction: column; background: var(--card); border: 4px solid var(--farbe); border-radius: 28px; overflow: hidden; scroll-snap-align: center; box-shadow: var(--schatten); }
.spalten.viele { justify-content: flex-start; }
.spalten.viele .spalte { flex: 0 0 31%; }
.spalte-kopf { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: color-mix(in srgb, var(--farbe) 18%, var(--card)); border-bottom: 3px solid var(--farbe); }
/* Ohne die Flex-Zentrierung sass die Figur als Inline-Text oben links im Kreis und wirkte
   verschoben (Christian, 25.09.2026). */
.figur-knopf { position: relative; display: flex; align-items: center; justify-content: center;
  font-size: 40px; line-height: 1; width: 60px; height: 60px; border-radius: 50%; background: var(--card); border: 3px solid var(--farbe); flex: none; }
.krone { position: absolute; top: -18px; left: 50%; transform: translateX(-50%) rotate(-8deg); font-size: 28px; animation: huepf 1.2s ease-in-out infinite; }
@keyframes huepf { 50% { transform: translateX(-50%) rotate(-8deg) translateY(-4px); } }
.kind-name { flex: 1; min-width: 0; font-size: 28px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sterne-feld { display: flex; align-items: center; gap: 6px; }
.sterne { font-size: 24px; font-weight: 800; background: var(--sun); color: #1E2A4A; border-radius: 999px; padding: 2px 14px; white-space: nowrap; }
.spalte-inhalt { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px; display: flex; flex-direction: column; gap: 10px; justify-content: safe center; }
/* Auf dem iPad ist die Spalte deutlich hoeher als ihr Inhalt: nach der Morgenroutine
   standen rund 330 px Leere unter der letzten Kachel, waehrend alles oben klebte.
   "safe center" rueckt den Inhalt in die Mitte, faellt aber auf den alten Stand zurueck,
   sobald es mehr Inhalt als Platz gibt, sodass die Liste weiter von oben scrollt.
   Aeltere Browser ohne das safe-Schluesselwort verwerfen die Deklaration und behalten
   das bisherige Verhalten. Befund iPad-Abnahme 23.09.2026. */
@media (min-width: 744px) and (min-height: 900px) {
  /* Mehr Luft zwischen den Kacheln, solange das Geraet sie hergibt. */
  .spalte-inhalt { gap: 16px; padding: 18px; }
}

/* Tablet: die Spalte war bei 600 px gedeckelt und liess auf dem iPad 110 px Rand je
   Seite stehen, im Querformat sogar 290 px. Bei genau einem Kind darf sie breiter
   werden. Der Deckel von 900 px bleibt, weil die Kachelzeile sonst auseinanderreisst:
   Text links, Status rechts, dazwischen nur Leere. Ab zwei Kindern greift die Regel
   nicht, dort teilen sich die Spalten die Breite ohnehin. Befund iPad-Abnahme 23.09.2026. */
@media (min-width: 744px) {
  .board { padding-left: 24px; padding-right: 24px; }
  .spalten.anzahl-1 .spalte { max-width: 900px; }
}
.spalte-fuss { padding: 8px 12px 10px; border-top: 3px solid var(--sky2); }
.spalte-fuss .btn { width: 100%; }
.marke { position: absolute; top: -8px; right: -6px; min-width: 28px; height: 28px; border-radius: 14px; background: var(--berry); color: #fff; font-size: 16px; display: flex; align-items: center; justify-content: center; padding: 0 6px; }

/* Strecke mit Figur und Tür */
.strecke-box { flex: none; }
.strecke { position: relative; height: 48px; border-radius: 24px; background: var(--sky2); border: 3px solid var(--line); overflow: hidden; }
.strecke-fuell { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--farbe) 45%, var(--card)); transition: width .5s ease; }
.strecke-figur { position: absolute; top: 2px; font-size: 32px; line-height: 38px; width: 44px; text-align: center; transition: left .5s ease; }
.strecke-ziel { position: absolute; right: 6px; top: 2px; font-size: 30px; line-height: 38px; }
.strecke-text { text-align: center; font-weight: 700; font-size: 17px; color: var(--muted); margin-top: 2px; }

/* Aufgaben */
.aufgaben { display: flex; flex-direction: column; gap: 10px; }
.aufgabe { display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 8px 14px; background: var(--sky2); border: 3px solid var(--line); border-radius: 22px; box-shadow: var(--schatten); cursor: pointer; transition: transform .1s; }
.aufgabe:active { transform: scale(.985); }
.aufgabe .emo { font-size: 46px; line-height: 1; flex: none; width: 56px; text-align: center; }
.aufgabe .txt { flex: 1; min-width: 0; font-size: 25px; font-weight: 700; line-height: 1.12; }
.aufgabe .box { width: 50px; height: 50px; border-radius: 16px; border: 4px solid var(--line); background: var(--card); flex: none; display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 800; color: #fff; }
.aufgabe .box.an { background: var(--grass); border-color: var(--grass); }
.aufgabe.erledigt { background: color-mix(in srgb, var(--grass) 16%, var(--card)); border-color: var(--grass); }
.aufgabe.erledigt .txt { text-decoration: line-through; opacity: .6; }
.aufgabe.erledigt .emo { opacity: .6; }
.aufgabe.fest { cursor: default; }
.aufgabe.fest:active { transform: none; }
.aufgabe.dran { border-color: var(--sun); background: color-mix(in srgb, var(--sun) 22%, var(--card)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sun) 55%, transparent), var(--schatten); }
.dran-marke { display: block; width: fit-content; font-size: 14px; font-weight: 800; background: var(--sun); color: #1E2A4A; border-radius: 999px; padding: 0 10px; margin-bottom: 2px; text-transform: uppercase; letter-spacing: .04em; }
.start-pille { flex: none; background: var(--grass); color: #fff; font-weight: 800; font-size: 20px; border-radius: 999px; padding: 8px 16px; box-shadow: var(--schatten); }
.vorlesen { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--card); border: 3px solid var(--line); font-size: 22px; }
.aufgaben.gesperrt { opacity: .35; pointer-events: none; filter: grayscale(.6); }
.griff { flex: none; font-size: 30px; color: var(--muted); padding: 10px 4px; cursor: grab; touch-action: none; }
.aufgabe.zieht { opacity: .85; border-style: dashed; border-color: var(--berry); transform: scale(1.02); }
.plus-knopf { flex: none; align-self: center; width: 72px; height: 72px; border-radius: 50%; background: var(--grass); color: #fff; font-size: 48px; line-height: 1; font-weight: 800; box-shadow: var(--schatten); }
.hinweis { background: var(--sky2); border: 3px dashed var(--line); border-radius: 18px; padding: 8px 14px; font-size: 17px; color: var(--muted); font-weight: 700; text-align: center; }

/* Timer */
.timer-karte { flex: none; text-align: center; background: color-mix(in srgb, var(--sun) 25%, var(--card)); border: 4px solid var(--sun); border-radius: 26px; padding: 14px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.timer-emoji { font-size: 60px; line-height: 1; animation: wackel 1s ease-in-out infinite; }
@keyframes wackel { 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
.timer-titel { font-size: 24px; font-weight: 800; }
.timer-zeit { font-size: 76px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.timer-balken { width: 100%; height: 16px; border-radius: 8px; background: var(--card); border: 2px solid var(--line); overflow: hidden; margin: 6px 0; }
.timer-fuell { height: 100%; width: calc(var(--anteil, 0) * 100%); background: var(--grass); transition: width .3s linear; }

/* Fertig und Ruhe. Das Fertig-Overlay deckt nur die eigene Spalte ab (job-993). */
.fertig-overlay { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 16px; background: color-mix(in srgb, var(--farbe) 35%, var(--card) 65%); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: einblenden .4s ease-out; }
.fertig-overlay .fertig-karte { width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; gap: 6px; box-shadow: var(--schatten); }
.fertig-overlay .btn { width: 100%; margin-top: 6px; }
@keyframes einblenden { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.fertig-karte, .ruhe-karte { flex: none; text-align: center; background: color-mix(in srgb, var(--sun) 25%, var(--card)); border: 4px solid var(--sun); border-radius: 26px; padding: 16px; }
.ruhe-karte { background: var(--sky2); border-color: var(--line); }
.pokal, .ruhe-emoji { font-size: 72px; line-height: 1.1; }
.fertig-titel, .ruhe-titel { font-size: 30px; font-weight: 800; }
.fertig-text, .ruhe-text { font-size: 19px; font-weight: 700; color: var(--muted); }
.ruhe-sterne { font-size: 52px; font-weight: 800; margin-top: 8px; line-height: 1.1; }
.ziele { display: flex; flex-direction: column; gap: 8px; }
.ziel { display: flex; align-items: center; gap: 10px; background: var(--sky2); border: 3px solid var(--line); border-radius: 18px; padding: 8px 12px; font-size: 19px; font-weight: 700; }
.ziel-emoji { font-size: 32px; }
.ziel-name { flex: 1; min-width: 0; }
.ziel-stand { color: var(--muted); white-space: nowrap; }
/* Fuenf Sterne als Fortschritt. Die volle Reihe liegt deckungsgleich ueber der leeren und
   wird per width beschnitten, deshalb muessen beide dieselbe Schrift und Groesse haben. */
.stern-leiste { position: relative; display: inline-block; flex: none; font-size: 20px; line-height: 1;
  letter-spacing: 1px; white-space: nowrap; }
.stern-leiste .stern-leer { color: color-mix(in srgb, var(--muted) 45%, transparent); }
.stern-leiste .stern-voll { position: absolute; inset: 0 auto 0 0; overflow: hidden; color: color-mix(in srgb, var(--sun) 80%, #a8760a); }
.ziel-stand.da { color: var(--grass); }
.marke.da { background: var(--grass); }

/* Blätter (Dialoge) */
.blatt-wrap { position: fixed; inset: 0; z-index: 50; background: rgba(20, 28, 50, .55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.blatt { background: var(--card); border: 4px solid var(--line); border-radius: 28px; width: 100%; max-width: 560px; max-height: 100%; display: flex; flex-direction: column; box-shadow: 0 10px 40px rgba(0, 0, 0, .3); }
.blatt-wrap.voll .blatt { max-width: 860px; height: 100%; }
.blatt-kopf { display: flex; align-items: center; gap: 12px; padding: 12px 12px 8px 20px; }
.blatt-kopf h2 { flex: 1; margin: 0; font-size: 26px; }
.blatt-body { padding: 0 20px 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; font-size: 18px; }
.toast { position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 95; background: #1E2A4A; color: #fff; font-size: 19px; font-weight: 700; padding: 12px 22px; border-radius: 18px; max-width: 90vw; text-align: center; transition: opacity .4s; }
.toast.weg { opacity: 0; }

/* Elternsperre */
.sperre .blatt { max-width: 380px; text-align: center; }
.rechnen-frage { font-size: 44px; font-weight: 800; }
.rechnen-anzeige { font-size: 40px; font-weight: 800; min-height: 60px; border: 3px solid var(--line); border-radius: 16px; margin: 8px 0 12px; line-height: 54px; white-space: pre; }
.rechnen-anzeige.falsch { animation: schuettel .4s; border-color: var(--berry); }
@keyframes schuettel { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.tasten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.taste { min-height: 62px; border-radius: 16px; background: var(--sky2); border: 3px solid var(--line); font-size: 28px; font-weight: 800; }
.taste.ok { background: var(--grass); border-color: var(--grass); color: #fff; }
.taste:active { transform: translateY(2px); }

/* Emoji, Farben */
.gruppe-titel { font-weight: 800; font-size: 17px; color: var(--muted); margin: 12px 0 6px; }
.emoji-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 8px; }
.emoji-knopf { font-size: 34px; height: 56px; border-radius: 14px; background: var(--sky2); border: 3px solid transparent; }
.emoji-knopf.aktiv { border-color: var(--grass); background: var(--card); }
.emoji-gross { flex: none; width: 64px; height: 64px; font-size: 40px; border-radius: 18px; background: var(--sky2); border: 3px solid var(--line); }
.farb-raster { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.farb-knopf { width: 46px; height: 46px; border-radius: 50%; border: 4px solid var(--card); box-shadow: 0 0 0 3px var(--line); }
.farb-knopf.aktiv { box-shadow: 0 0 0 4px var(--ink); }

/* Belohnungen */
.konto { font-size: 28px; font-weight: 800; text-align: center; margin-bottom: 10px; }
.belohnungen { display: flex; flex-direction: column; gap: 10px; }
/* Die Karte lief früher waagerecht, dadurch wurde die Beschreibung zu einer zwei Worte
   schmalen Spalte. Seit 25.09.2026 steht alles untereinander: Name, Preisknopf, Beschreibung,
   Skala (Christian). */
.belohnung { display: flex; flex-direction: column; align-items: stretch; gap: 8px; background: var(--sky2); border: 3px solid var(--line); border-radius: 20px; padding: 12px 14px; }
.belohnung.offen { border-color: var(--sun); background: color-mix(in srgb, var(--sun) 20%, var(--card)); }
.belohn-kopf { display: flex; align-items: center; gap: 12px; }
.belohn-emoji { font-size: 44px; line-height: 1; flex: none; }
.belohn-text { font-size: 16px; line-height: 1.35; }
.belohn-name { font-size: 22px; font-weight: 800; line-height: 1.15; }
.belohn-preis, .fehlt, .wartet { font-size: 18px; font-weight: 700; color: var(--muted); }
.belohn-aktion { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
/* Der Preisknopf trägt die Zahl auch dann, wenn die Sterne noch nicht reichen. Dann ist er
   stumpf und nicht drückbar, bleibt aber lesbar. */
.belohn-preis-knopf { width: 100%; display: flex; align-items: baseline; justify-content: center; gap: 10px; }
.belohn-preis-zahl { font-size: 22px; font-weight: 800; }
.belohn-preis-wort { font-size: 16px; font-weight: 700; }
/* Der Knopf ist der Sparbalken: gelb bis zum erreichten Anteil, dahinter leer. Erst wenn er
   ganz voll ist, faellt die Klasse weg und er wird drückbar. .btn[disabled] wuerde ihn sonst
   auf 45 Prozent ausblenden, deshalb hier volle Deckkraft. */
.belohn-preis-knopf.fuellt, .belohn-preis-knopf.fuellt[disabled] { opacity: 1; color: var(--ink);
  border: 3px solid color-mix(in srgb, var(--sun) 70%, var(--line)); box-shadow: none; cursor: default;
  background: linear-gradient(90deg, var(--fast) 0 calc(var(--anteil, 0) * 100%),
    var(--card) calc(var(--anteil, 0) * 100%) 100%); transition: background .3s linear;
  --fast: color-mix(in srgb, var(--sun) 62%, var(--card)); }
.belohn-preis-knopf.fuellt .belohn-preis-wort { color: var(--muted); }

/* Elternbereich */
.tabs { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 8px; position: sticky; top: 0; background: var(--card); z-index: 2; }
.tab, .chip { flex: none; min-height: 44px; padding: 4px 14px; border-radius: 14px; background: var(--sky2); border: 3px solid var(--line); font-weight: 700; font-size: 17px; display: inline-flex; align-items: center; gap: 6px; }
.tab.aktiv, .chip.aktiv, .chip.wahl { background: var(--grass); border-color: var(--grass); color: #fff; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.stift-box { display: flex; align-items: center; gap: 12px; justify-content: space-between; background: color-mix(in srgb, var(--sun) 25%, var(--card)); border: 3px solid var(--sun); border-radius: 18px; padding: 10px 14px; margin: 4px 0 12px; }
.karte { border: 3px solid var(--line); border-left: 8px solid var(--farbe, var(--line)); border-radius: 20px; padding: 10px 14px; background: var(--card); margin: 10px 0; }
.karte.neu { border-style: dashed; border-left-width: 3px; }
.karte-gefahr { border-color: var(--berry); border-left-color: var(--berry); }
/* Empfehlung (job-1027): ruhige Zeile unter der letzten Kachel, nichts zum Antippen. */
/* Aufruf an das Kind: sitzt unter der letzten Belohnung, im selben Gelb wie der Eintauschen-
   Knopf und mit einem Stern an jedem Rand, damit er als Werbebotschaft gelesen wird. Er wackelt
   leicht, damit das Kind ihn sieht und von sich aus danach fragt (Christian, 25.09.2026). */
.empfehl-knopf { width: 100%; margin-top: 14px; display: flex; flex-direction: row; align-items: center;
  justify-content: center; gap: 10px; padding: 10px 14px; text-align: center;
  animation: wackeln 3.4s ease-in-out infinite; transform-origin: 50% 80%; }
/* Links die Figur des Kindes, rechts der Lohn als fünf Sterne: was es ist und was es bringt,
   ohne lesen zu müssen (Christian, 25.09.2026). */
.empfehl-figur { font-size: 28px; line-height: 1; flex: none; }
.empfehl-lohn { font-size: 18px; line-height: 1; flex: none; letter-spacing: -3px; white-space: nowrap; }
.empfehl-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.empfehl-zeile1 { font-size: 18px; font-weight: 800; }
.empfehl-zeile2 { font-size: 13px; font-weight: 700; color: color-mix(in srgb, #1E2A4A 70%, var(--sun)); }
@keyframes wackeln {
  0%, 74%, 100% { transform: rotate(0) scale(1); }
  78% { transform: rotate(-3deg) scale(1.04); }
  84% { transform: rotate(3deg) scale(1.04); }
  90% { transform: rotate(-2deg) scale(1.02); }
}
@media (prefers-reduced-motion: reduce) { .empfehl-knopf { animation: none; } }
.empfehlung-zeile { flex: none; text-align: center; font-size: 15px; line-height: 1.3; color: var(--muted); padding: 2px 8px; pointer-events: none; }
.empfehlung-zeile.erfolg { color: var(--ink); font-weight: 700; background: color-mix(in srgb, var(--sun) 28%, var(--card)); border-radius: 14px; padding: 6px 10px; }
.einladung-zeile { padding: 6px 0; border-top: 2px dashed var(--line); }
.aufgaben-liste { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.aufgaben-zeile { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; background: var(--sky2); border-radius: 12px; padding: 4px 8px; }
.aufgaben-zeile .text-knopf { text-align: left; background: none; border: 0; font: inherit; color: inherit; padding: 6px 0; min-height: 38px; }
.aufgaben-zeile .kind-marke, .vorschlaege .marke { position: static; flex: none; font-size: 13px; height: 24px; min-width: 0; padding: 0 8px; }
.aufgaben-zeile .mini[data-vorschlag] { width: auto; padding: 0 10px; font-size: 15px; }
.vorschlaege { margin-top: 8px; }
.vorschlaege summary { cursor: pointer; font-weight: 700; padding: 6px 0; }
.vorschlaege .aufgaben-zeile { margin-top: 6px; }
/* Ausflugstipps je Stadt (job-997) */
.stufe-titel { font-weight: 700; margin-top: 10px; color: var(--muted); }
.aufgaben-zeile.vorschlag { align-items: flex-start; padding: 8px; }
.vorschlag-text { font-size: 17px; min-width: 0; }
.vorschlag-text .klein { margin: 2px 0 0; font-weight: 400; }
.vorschlag-text a { color: var(--grass); }
.aufgaben-zeile.vorschlag .marke, .aufgaben-zeile.vorschlag .mini { margin-top: 6px; }
.aufgaben-zeile.vorschlag .mini { width: auto; padding: 0 10px; font-size: 15px; white-space: nowrap; }
/* Schalter wie am iPhone (job-1024): Wippe rechts in der Zeile, Trefferfläche 60 mal 44 Pixel. */
.schalter { position: relative; flex: none; width: 60px; height: 44px; margin-left: auto; padding: 0; border: 0; background: none; cursor: pointer; }
.schalter::before { content: ""; position: absolute; left: 4px; top: 6px; width: 52px; height: 32px; border-radius: 16px; background: rgba(120, 128, 150, .45); transition: background .2s ease; }
.schalter::after { content: ""; position: absolute; left: 6px; top: 8px; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .25); transition: transform .2s ease; }
.schalter[aria-checked="true"]::before { background: var(--grass); }
.schalter[aria-checked="true"]::after { transform: translateX(20px); }
.schalter:disabled { opacity: .6; cursor: default; }
.schalter:focus-visible::before { outline: 3px solid var(--sun); outline-offset: 2px; }
/* Sparbalken bei teuren Belohnungen */
.emo-klein { font-size: 28px; flex: none; }

/* Handy: eine Spalte je Bildschirm, wischen zwischen Kindern (F33) */
@media (max-width: 700px) {
  .spalten { justify-content: flex-start; gap: 10px; }
  .spalten .spalte, .spalten.viele .spalte { flex: 0 0 100%; }
  .uhr { font-size: 30px; }
  .routine-name { font-size: 21px; }
  .routine-zeit, .datum { font-size: 13px; }
  .rund { width: 46px; height: 46px; font-size: 21px; }
  .aufgabe { min-height: 68px; padding: 6px 10px; gap: 8px; }
  .aufgabe .emo { font-size: 38px; width: 46px; }
  .aufgabe .txt { font-size: 21px; }
  .aufgabe .box { width: 44px; height: 44px; }
  .blatt-wrap { padding: 8px; }
  .blatt-body { padding: 0 12px 14px; }
  .timer-zeit { font-size: 60px; }
}
@media (min-width: 701px) and (max-width: 1000px) { .spalten.viele .spalte { flex: 0 0 46%; } }
.frage-text { font-size: 20px; font-weight: 700; }
.timer-info { font-size: 16px; color: var(--muted); white-space: nowrap; }
.tab-inhalt { display: flex; flex-direction: column; gap: 4px; }