/* =====================================================================================================
   FamlyUp – Design (Redesign 11/2026 nach den Canvas-Entwürfen "FamlyUp Redesign Eltern" und "Kids1–3")
   Gilt für PWA und MAUI-App gleichermaßen. Eingebunden als "_content/FamlyUp.App.UI/famlyup.css".

   Aufbau:
   - Schriften (selbst ausgeliefert aus fonts/, kein Google-CDN wegen DSGVO; fehlt eine Datei, greift die Systemschrift)
   - Tokens (CSS-Variablen) in :root = Elternbereich und Anmeldung (Figma-Stil: Teal, Nunito + DM Sans)
   - .theme-kid + Thema (.kid-adventure = Standard, .kid-space, .kid-unicorn) überschreibt die Tokens für die Kinder.
     Die Seiten benutzen für beide Bereiche dieselben Klassen; nur die Tokens und ein paar .theme-kid-Regeln unterscheiden sich.
     Neues Kinderthema: KidTheme-Wert anhängen, in ChildRules (Themes/ThemeName/ThemeCssClass) eintragen und hier
     einen Block mit denselben Tokens anlegen.
   - darunter die Bausteine: Seite, Kopf, Karten, Zeilen, Buttons, Formulare, Navigation, Dialoge, Lernrunde …
   ===================================================================================================== */

/* ---- Schriften ------------------------------------------------------------------------------------ */
/* Variable Schriften (eine Datei für alle Stärken), Lizenz SIL Open Font License. font-display: swap = Text sofort
   in der Ersatzschrift zeigen, dann umschalten. */
@font-face { font-family: "DM Sans"; src: url("fonts/dm-sans.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("fonts/nunito.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fredoka"; src: url("fonts/fredoka.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Baloo 2"; src: url("fonts/baloo-2.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }

/* ---- Tokens: Elternbereich ------------------------------------------------------------------------ */

:root {
    --bg: #F8FAF8;
    --surface: #FFFFFF;
    --surface-2: #F4F8F6;       /* leicht getönte Fläche (Hinweise, Felder in Karten) */
    --ink: #294541;             /* Fließtext */
    --head: #284B47;            /* Überschriften */
    --muted: #677A76;
    --line: #E0E8E5;
    --line-soft: #EEF2F0;

    --primary: #427D78;         /* Hauptknöpfe */
    --primary-dark: #346B66;
    --primary-ink: #FFFFFF;
    --primary-soft: #E2EFEC;    /* helle Fläche für Symbole und "+"-Knöpfe */
    --primary-soft-ink: #3C736C;
    --link: #39736C;
    --kick: #687A76;            /* kleine Großbuchstaben über Überschriften */

    --ok: #4E8771;  --ok-bg: #E4F2E9;  --ok-ink: #3B765F;
    --warn-bg: #FFF6E4; --warn-line: #F0DDB0; --warn-ink: #6B4E14;
    --danger: #B0482D; --danger-soft: #F7ECE8; --danger-ink: #A0573F;
    --warm-bg: #FFF8F2; --warm-line: #EFD9CA; --warm-ink: #5C463B; --warm-sub: #7E6556; --warm-accent: #C96F43; --warm-soft: #FFE3D0;
    --gold: #F6C64E; --gold-line: #C9971C; --gold-bg: #FFF0C8; --gold-ink: #9A6A12;
    --bar: #66A097; --bar-bg: #E7EEEC;
    --wish-bar: #E29A62;

    --word-1: #087A80;          /* Schriftzug "Famly" */
    --word-2: #ED7D3B;          /* Schriftzug "Up" */

    --font: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-head: "Nunito", "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --head-weight: 800;
    --font-size: 16px;

    --radius: 17px;
    --radius-sm: 13px;
    --btn-radius: 14px;
    --card-border: 1px;
    --card-shadow: 0 6px 18px rgba(45, 83, 76, .04);
    --btn-shadow: 0 7px 15px rgba(66, 125, 120, .16);

    --nav-bg: rgba(255, 255, 255, .96);
    --nav-line: #E3EAE7;
    --nav-ink: #6F807C;
    --nav-on: #2F625C;
    --nav-on-bg: #DDEDE9;       /* Pille hinter dem Symbol des aktiven Reiters */
}

/* ---- Tokens: Kinderbereich ------------------------------------------------------------------------ */
/* .theme-kid = gemeinsame Form (größer, runder, Knöpfe mit "Druck-Schatten"), Farben je Thema darunter. */
.theme-kid {
    --font-size: 17px;
    --radius: 22px;
    --radius-sm: 16px;
    --btn-radius: 16px;
    --card-border: 2px;
    --card-shadow: none;
}

/* Thema 1 "Abenteuer" (Standard): geschlechtsneutral, Sonnengelb, Minze/Petrol, warmes Orange. */
.kid-adventure {
    --bg: #FFFDF8; --surface: #FFFFFF; --surface-2: #F4F1EA; --line: #EFEBE2; --line-soft: #F1EDE4;
    --ink: #3B514D; --head: #27534E; --muted: #5F6F6B; --kick: #A3572C;
    --primary: #2F6E66; --primary-dark: #1F4C46; --primary-soft: #D7EDE7; --primary-soft-ink: #2B615A; --link: #2B615A;
    --action: #C25B2A; --action-shadow: #94431E; --action-ink: #FFFFFF;
    --accent-shadow: #1F4C46; --soft-shadow: #B7D9D0;
    --hero: #2F6E66; --hero-shadow: #1F4C46; --hero-sub: #D3EBE5; --hero-track: #F7C35F;
    --ok: #2F6B5E; --ok-bg: #DDF0E6; --ok-line: #BFE0CF; --ok-ink: #1F5A4A;
    --warn-ink: #8A5A12; --warn-bg: #FFF0C8; --minus: #A65E36;
    --card-warm: #FFF8F0; --card-warm-line: #F3DFCD;
    --card-mint: #E9F4F1; --card-mint-line: #D3E8E2;
    --card-sun: #FFF6DC; --card-sun-line: #F6E3A9; --sun-ink: #6B4A0C;
    --card-done: #F1F7F4; --card-done-line: #D9EBE2;
    --pic-orange: #A65E36; --pic-orange-bg: #FFE3CF;
    --pic-mint: #2B615A;   --pic-mint-bg: #D7EDE7;
    --pic-sun: #946109;    --pic-sun-bg: #FFE7A6;
    --pic-lilac: #5F5596;  --pic-lilac-bg: #E8E4F7;
    --bar: #2F6E66; --bar-bg: #EFEBE2;
    --font-head: "Nunito", "DM Sans", system-ui, sans-serif; --head-weight: 800;
    --word-1: #087A80; --word-2: #ED7D3B;
    --nav-bg: rgba(255, 255, 255, .97); --nav-line: #F1EDE4; --nav-ink: #66756F; --nav-on: #B0521F; --nav-on-bg: #FFE9D9;
    --nav-pill-radius: 12px;
    --option-line: #E3EEEA;
}

/* Thema 2 "Astronauten": dunkles Weltall, Cyan und Orange, Schrift Fredoka. Quests heißen hier "Missionen". */
.kid-space {
    --bg: #0E1433; --surface: #1A2250; --surface-2: #222C63; --line: #2E3A7A; --line-soft: #26306A;
    --ink: #E6EAFF; --head: #FFFFFF; --muted: #B3BCEA; --kick: #62D8F2;
    --primary: #62D8F2; --primary-dark: #2A93AE; --primary-ink: #06303A; --primary-soft: #173E5A; --primary-soft-ink: #72E0F5; --link: #62D8F2;
    --action: #FF8A4C; --action-shadow: #C2561E; --action-ink: #2A1203;
    --accent-shadow: #2A93AE; --soft-shadow: #141B45;
    --hero: #3D3FA8; --hero-shadow: #25277A; --hero-sub: #D3D6FF; --hero-track: #FFD45C;
    --ok: #5EE0A6; --ok-bg: #16403A; --ok-line: #2C7A66; --ok-ink: #5EE0A6;
    --warn-ink: #FFD87A; --warn-bg: #3D3520; --minus: #FFA27A;
    --danger: #FF8F7A; --danger-soft: #4A2433; --danger-ink: #FFB4A6;
    --card-warm: #2A2150; --card-warm-line: #5A3E6E;
    --card-mint: #152F57; --card-mint-line: #28568A;
    --card-sun: #2C2A52; --card-sun-line: #5E5468; --sun-ink: #FFD45C;
    --card-done: #15334A; --card-done-line: #24616A;
    --pic-orange: #FFA06E; --pic-orange-bg: #3E2546;
    --pic-mint: #72E0F5;   --pic-mint-bg: #173E5A;
    --pic-sun: #FFD45C;    --pic-sun-bg: #3B3530;
    --pic-lilac: #BBAAFF;  --pic-lilac-bg: #2F2A66;
    --gold-bg: #3B3530; --gold-ink: #FFD45C;
    --bar: #62D8F2; --bar-bg: #2B3672;
    --font-head: "Fredoka", "Nunito", system-ui, sans-serif; --head-weight: 600;
    --word-1: #62D8F2; --word-2: #FF8A4C;
    --nav-bg: #121A42; --nav-line: #2E3A7A; --nav-ink: #B3BCEA; --nav-on: #62D8F2; --nav-on-bg: #173E5A;
    --nav-pill-radius: 99px;
    --option-line: #2E3A7A;
    color-scheme: dark;
}

/* Thema 3 "Einhörner": Pastell (Rosa-Grund, Lila, Beere, Mint, Sonnengelb), ganz runde Knöpfe, Schrift Baloo 2. */
.kid-unicorn {
    --bg: #FFF6FB; --surface: #FFFFFF; --surface-2: #F6EEFB; --line: #F0DCEE; --line-soft: #F6EAF3;
    --ink: #4A3B5C; --head: #3B2556; --muted: #6E5F80; --kick: #6F4FD0;
    --primary: #6F4FD0; --primary-dark: #4E35A0; --primary-soft: #ECE5FF; --primary-soft-ink: #6A4AC4; --link: #6F4FD0;
    --action: #C2367D; --action-shadow: #8E2459; --action-ink: #FFFFFF;
    --accent-shadow: #4E35A0; --soft-shadow: #D9CDF4;
    --hero: #6F4FD0; --hero-shadow: #4E35A0; --hero-sub: #E9E1FF; --hero-track: #FFD45C;
    --ok: #2B8A68; --ok-bg: #E3F6EE; --ok-line: #BFE6D4; --ok-ink: #1F6B50;
    --warn-ink: #7A4E0E; --warn-bg: #FFF0C8; --minus: #B2456A;
    --card-warm: #FFF0F6; --card-warm-line: #F6CFE2;
    --card-mint: #F1ECFF; --card-mint-line: #DCD0FA;
    --card-sun: #FFF8E2; --card-sun-line: #F4E1A6; --sun-ink: #7A4E0E;
    --card-done: #EEF9F5; --card-done-line: #CDEBDF;
    --pic-orange: #B2456A; --pic-orange-bg: #FFE1EE;
    --pic-mint: #2B8A68;   --pic-mint-bg: #DDF4EA;
    --pic-sun: #8A5A0B;    --pic-sun-bg: #FFEFC2;
    --pic-lilac: #6A4AC4;  --pic-lilac-bg: #ECE5FF;
    --bar: #6F4FD0; --bar-bg: #F1E6F3;
    --font-head: "Baloo 2", "Nunito", system-ui, sans-serif; --head-weight: 800;
    --word-1: #6F4FD0; --word-2: #C2367D;
    --radius: 26px; --btn-radius: 99px;
    --card-shadow: 0 4px 0 #F6E6F1;
    --nav-bg: rgba(255, 255, 255, .97); --nav-line: #F0DCEE; --nav-ink: #6E5F80; --nav-on: #5B3F9E; --nav-on-bg: #ECE5FF;
    --nav-pill-radius: 99px;
    --option-line: #EADCF0;
}

/* ---- Grundlagen ----------------------------------------------------------------------------------- */

* { box-sizing: border-box; }

html, body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: var(--font-size);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

/* FocusOnNavigate (Routes.razor) setzt nach jedem Seitenwechsel den Fokus auf die Überschrift, damit Screenreader
   die neue Seite ansagen. Den Fokusrahmen dort nicht zeichnen – sonst wirkt die Titelzeile "markiert". */
h1:focus, h1:focus-visible { outline: none; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 45%, transparent); outline-offset: 2px; }

/* ---- Seite ---------------------------------------------------------------------------------------- */

.app {
    position: relative;
    isolation: isolate;          /* Deko der Kinderthemen (z-index: -1) bleibt hinter dem Inhalt, aber vor dem Hintergrund */
    overflow-x: clip;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: var(--font-size);
}

.page {
    flex: 1;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    /* env(safe-area-inset-*) = Abstand zur Notch / zum Home-Balken auf dem iPhone */
    padding: calc(22px + env(safe-area-inset-top)) 20px 32px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Hinweis oben, solange der Server nicht erreichbar ist (AppLayout). Bleibt beim Scrollen sichtbar. */
.offline-banner {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: calc(8px + env(safe-area-inset-top)) 16px 8px;
    background: var(--warn-bg); color: var(--warn-ink);
    border-bottom: 1px solid var(--warn-line, transparent);
    font-size: 13px; text-align: center;
}
.offline-banner strong { font-weight: 800; }

/* ---- Kopf: Schriftzug, kleine Überschrift, Titel -------------------------------------------------- */

.wordmark { color: var(--word-1); letter-spacing: -.6px; font-family: var(--font-head); font-size: 20px; font-weight: 800; line-height: 1; }
.wordmark span { color: var(--word-2); }
.wordmark.big { font-size: 35px; letter-spacing: -1.2px; line-height: .95; }

.page-header { display: flex; flex-direction: column; gap: 0; }
.page-header .headrow { display: flex; align-items: center; gap: 12px; }
.page-header .headrow .end { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.kicker { display: block; color: var(--kick); letter-spacing: 1.2px; text-transform: uppercase; font-size: 11px; font-weight: 700; }
.page-header .kicker { margin-top: 18px; }
.page-header h1, .page-title {
    margin-top: 3px; color: var(--head); letter-spacing: -.6px;
    font-family: var(--font-head); font-size: 30px; font-weight: var(--head-weight); line-height: 1.1;
    overflow-wrap: anywhere;
}
.page-header .sub { margin-top: 6px; color: var(--muted); font-size: 15px; }

.eyebrow { font-size: 14px; font-weight: 600; color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: 13px; }

/* Abschnitt mit Titel (klein in Großbuchstaben + Überschrift), rechts optional ein Link oder "+"-Knopf */
.section { display: flex; flex-direction: column; gap: 10px; }
.section > h2, .section-head h2 { color: var(--head); font-family: var(--font-head); font-size: 19px; font-weight: var(--head-weight); }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-top: 6px; }
.section-head > div { display: grid; gap: 1px; min-width: 0; }
.section-head .kicker { font-size: 11px; letter-spacing: 1px; }
.section-head .link { min-height: 34px; display: inline-flex; align-items: center; color: var(--link); font-size: 13px; font-weight: 700; background: none; border: 0; padding: 0; }
.plus-btn {
    flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px;
    color: var(--primary-soft-ink); background: var(--primary-soft); border: 0; border-radius: 11px;
}

/* ---- Karten und Kacheln --------------------------------------------------------------------------- */

.card {
    background: var(--surface);
    border: var(--card-border) solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--card-shadow);
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.card.review, .card.warm { background: var(--warm-bg); border-color: var(--warm-line); }
.card.flat { background: var(--surface-2); box-shadow: none; }
/* Kinderthemen: farbige Karten-Varianten */
.card.mint { background: var(--card-mint, var(--surface-2)); border-color: var(--card-mint-line, var(--line)); }
.card.sun { background: var(--card-sun, var(--gold-bg)); border-color: var(--card-sun-line, var(--line)); }
.card.done { background: var(--card-done, var(--ok-bg)); border-color: var(--card-done-line, var(--line)); }
.theme-kid .card.warm { background: var(--card-warm); border-color: var(--card-warm-line); }
.card.soon { background: transparent; border-style: dashed; box-shadow: none; opacity: .75; }

/* Kopfzeile in Karten: Symbol/Avatar + Titel/Untertitel + rechts Wert */
.row { display: flex; align-items: center; gap: 12px; }
.row > .grow, .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row-title { color: var(--head); font-family: var(--font-head); font-size: 16px; font-weight: var(--head-weight); overflow-wrap: anywhere; }
.theme-kid .row-title { font-size: 18px; }
.row-sub { color: var(--muted); font-size: 13px; }
.label { color: var(--warm-accent); letter-spacing: .4px; text-transform: uppercase; font-size: 11px; font-weight: 800; }
.label.open { color: var(--primary-soft-ink); }
.label.gone { color: var(--muted); }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.span-2 { grid-column: span 2; }

/* Kachel (Kinder-Dashboard, "Lernen"): Symbol + Titel + Untertitel */
.tile {
    display: flex; flex-direction: column; gap: 10px;
    min-height: 0; padding: 15px;
    background: var(--surface);
    border: var(--card-border) solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--card-shadow);
}
.tile.wide { flex-direction: row; align-items: center; }
.tile-icon, .pic {
    width: 44px; height: 44px; flex-shrink: 0;
    border-radius: 13px;
    background: var(--primary-soft); color: var(--primary-soft-ink);
    display: flex; align-items: center; justify-content: center;
}
.tile-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.tile-title { color: var(--head); font-family: var(--font-head); font-size: 17px; font-weight: var(--head-weight); }
.tile-sub { font-size: 13px; color: var(--muted); }
.tile.locked { opacity: 0.55; }
.theme-kid .tile-icon, .theme-kid .pic { width: 50px; height: 50px; border-radius: 17px; }
.kid-adventure .tile-icon, .kid-adventure .pic { transform: rotate(-3deg); }
.kid-adventure .tile-icon > svg, .kid-adventure .pic > svg { transform: rotate(3deg); }
.kid-unicorn .tile-icon, .kid-unicorn .pic { border-radius: 20px; }
/* Farben der Symbol-Flächen (Kinder je Thema, Eltern die Standardwerte) */
.pic-orange { color: var(--pic-orange, #A0573F); background: var(--pic-orange-bg, #F9E9E2); }
.pic-mint   { color: var(--pic-mint, #3C736C);   background: var(--pic-mint-bg, #E2EFEC); }
.pic-sun    { color: var(--pic-sun, #9A6A12);    background: var(--pic-sun-bg, #FFF0C8); }
.pic-lilac  { color: var(--pic-lilac, #5F5596);  background: var(--pic-lilac-bg, #ECE8F6); }
.pic-grey   { color: var(--muted); background: var(--surface-2); }
/* Alte Klassen der Kacheln: auf die neuen Farben abgebildet */
.tile-quest .tile-icon, .tile-plan .tile-icon { color: var(--pic-orange, #A0573F); background: var(--pic-orange-bg, #F9E9E2); }
.tile-money .tile-icon { color: var(--pic-mint, #3C736C); background: var(--pic-mint-bg, #E2EFEC); }
.tile-vocab .tile-icon { color: var(--pic-lilac, #5F5596); background: var(--pic-lilac-bg, #ECE8F6); }
.tile-wish .tile-icon, .wish-icon { color: var(--pic-orange, #A0573F); background: var(--pic-orange-bg, #F9E9E2); }
.tile-family .tile-icon { color: var(--pic-mint, #3C736C); background: var(--pic-mint-bg, #E2EFEC); }

.badge {
    min-width: 26px; height: 26px; padding: 0 8px;
    border-radius: 999px;
    background: var(--warm-accent); color: #FFFFFF;
    font-size: 13px; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
}

/* Pillen: kleine Etiketten (Status, Admin, "wartet") */
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; white-space: nowrap; color: var(--ok-ink); background: var(--ok-bg); }
.pill.wait { color: var(--warn-ink); background: var(--warn-bg); }
.pill.tag { color: var(--primary-soft-ink); background: var(--primary-soft); }
.theme-kid .pill { padding: 6px 11px; font-size: 13px; font-weight: 800; }

/* Avatare: Anfangsbuchstabe oder Bild aus dem Pool */
.avatar {
    width: 40px; height: 40px; flex-shrink: 0;
    border-radius: 13px;
    background: #FFE3CF; color: #A45C37;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-head); font-weight: 800; font-size: 15px;
}
.avatar.parent { background: #DCEFEB; color: #39736C; }
.avatar.av-0 { background: #FFE3CF; color: #A45C37; }
.avatar.av-1 { background: #E1EBF4; color: #506D89; }
.avatar.av-2 { background: #DCEFEB; color: #2B615A; }
.avatar.av-3 { background: #EEE5F8; color: #6C4A98; }
.avatar-img { overflow: hidden; background: transparent; }
.avatar-img img { width: 100%; height: 100%; display: block; object-fit: cover; }

/* Avatar-Auswahl in den Kindereinstellungen: Raster aus Bild-Knöpfen, der gewählte ist umrandet. */
.avatar-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.avatar-choice {
    aspect-ratio: 1; padding: 0; border: 3px solid var(--surface); border-radius: 16px;
    box-shadow: 0 0 0 1px var(--line);
    background: var(--surface-2); overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-head); font-weight: 800; font-size: 20px; color: var(--muted);
}
.avatar-choice img { width: 100%; height: 100%; display: block; object-fit: cover; }
.avatar-choice.active { box-shadow: 0 0 0 3px var(--primary); }

.amount { color: var(--head); font-family: var(--font-head); font-size: 18px; font-weight: 800; }
.amount.negative, .balance.negative { color: var(--danger); }

/* Listen: weiße Zeilen mit Rand (Buchungen, Geräte, Mitglieder) */
.list { display: flex; flex-direction: column; gap: 8px; }
.list-row {
    display: flex; align-items: center; gap: 10px;
    padding: 12px;
    background: var(--surface);
    border: var(--card-border) solid var(--line);
    border-radius: 15px;
}
.list-row > .grow strong { color: var(--head); font-size: 14px; }
.list-row > .grow .small, .list-row > .grow small { color: var(--muted); font-size: 12px; }
.theme-kid .list-row { border-radius: 18px; }
.theme-kid .list-row > .grow strong { font-size: 16px; }

/* Münze als Symbol (statt "Münzen" ausgeschrieben): <span class="coin-ico"></span> */
.coin-ico {
    display: inline-block; flex: 0 0 auto; width: 1em; height: 1em; vertical-align: -0.14em;
    border-radius: 50%; background: var(--gold); border: 0.1em solid var(--gold-line);
    box-shadow: inset 0 0 0 0.16em var(--gold), inset 0 0 0 0.26em var(--gold-line);
}
.coins { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-weight: 700; }

/* Fortschrittsbalken */
.progress { height: 6px; border-radius: 999px; background: var(--bar-bg); overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: 999px; background: var(--bar); }
.theme-kid .progress { height: 12px; }
.progress-label { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--muted); font-weight: 600; }

/* Flamme der Serien (dezent bei Eltern) */
.flame { display: inline-flex; align-items: center; gap: 3px; color: #8A6A55; font-size: 12px; font-weight: 700; white-space: nowrap; }

/* ---- Buttons -------------------------------------------------------------------------------------- */

.btn {
    min-height: 44px;
    padding: 0 16px;
    border: 0;
    border-radius: 12px;
    background: var(--primary-soft);
    color: var(--primary-soft-ink);
    font-size: 14px;
    font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    white-space: nowrap;
}
.btn:disabled { opacity: 0.5; cursor: default; }
.btn-primary { background: var(--primary); color: var(--primary-ink); box-shadow: var(--btn-shadow); }
.btn-primary:hover:not(:disabled) { background: var(--primary-dark); }
.btn-outline { background: var(--surface); color: var(--link); border: 1px solid var(--line); }
.btn-ghost { background: transparent; color: var(--link); }
.btn-block { width: 100%; min-height: 54px; border-radius: var(--btn-radius); font-size: 15px; }
.btn-danger { color: var(--danger-ink); background: var(--danger-soft); }
.btn-danger-solid { color: #FFFFFF; background: var(--danger); }
.btn-ok { color: #FFFFFF; background: var(--ok); }
.btn-income { background: var(--ok); color: #FFFFFF; }
.btn-expense { background: var(--danger-soft); color: var(--danger-ink); }
.btn-coin { background: var(--primary); color: var(--primary-ink); }
.icon-btn {
    width: 44px; height: 44px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 50%;
    background: var(--surface); color: var(--link); box-shadow: 0 5px 15px rgba(50, 94, 86, .08);
    display: inline-flex; align-items: center; justify-content: center;
}
.link-btn { border: 0; background: none; padding: 4px 0; min-height: 34px; color: var(--link); font-size: 13px; font-weight: 700; }
.link-btn.btn-danger, .link-btn.del { color: var(--danger-ink); background: none; }
.link-btn.ok { color: var(--ok-ink); }   /* positive Textaktion, z. B. "Erledigt – bestätigen" */
.row-actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
/* Aktionen unter einer Karte: Trennlinie, rechts ausgerichtete Textknöpfe ("Bearbeiten", "Löschen") */
.card-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 18px; padding-top: 9px; border-top: 1px solid var(--line-soft); }
/* Zwei gleich breite Knöpfe (z. B. Ablehnen / Bestätigen) */
.btn-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.btn-pair .btn { min-height: 44px; border-radius: 11px; }

/* Kinder: große, runde Knöpfe mit Druck-Schatten. Hauptaktion (z. B. "Geschafft!") in der Aktionsfarbe des Themas. */
.theme-kid .btn { min-height: 48px; border-radius: var(--btn-radius); font-family: var(--font-head); font-size: 16px; font-weight: var(--head-weight); }
.theme-kid .btn-primary { background: var(--primary); color: var(--primary-ink); box-shadow: 0 4px 0 var(--accent-shadow); }
.theme-kid .btn-primary:hover:not(:disabled) { background: var(--primary); filter: brightness(1.05); }
.theme-kid .btn-action, .btn-action { background: var(--action, var(--primary)); color: var(--action-ink, #fff); box-shadow: 0 4px 0 var(--action-shadow, transparent); }
.theme-kid :where(.btn-outline, .btn:not(.btn-primary, .btn-action, .btn-ok, .btn-danger, .btn-danger-solid)) {
    background: var(--primary-soft); color: var(--primary-soft-ink); border: 0; box-shadow: 0 4px 0 var(--soft-shadow);
}
.theme-kid .btn-block { min-height: 54px; font-size: 18px; }
.theme-kid .btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 var(--accent-shadow); }
.theme-kid .icon-btn { width: 48px; height: 48px; border: 2px solid var(--line); border-radius: 16px; box-shadow: 0 3px 0 var(--line); color: var(--primary-soft-ink); }
.kid-unicorn .icon-btn { border-radius: 50%; }

/* ---- Formulare ------------------------------------------------------------------------------------ */

.form { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field > label, .field-label { color: var(--ink); font-size: 13px; font-weight: 700; }
.field .small.muted, .field-hint { color: var(--muted); font-size: 12px; font-weight: 500; }
.input {
    width: 100%;
    height: 50px;
    padding: 0 14px;
    border: 1px solid #D9E5E2;
    border-radius: 13px;
    background: var(--surface);
    color: var(--ink);
    font-size: 16px; /* 16px verhindert das automatische Hineinzoomen auf dem iPhone */
    font-weight: 500;
    outline: none;
}
.input::placeholder { color: #97A6A2; font-weight: 400; }
.input:focus { border-color: #59958D; box-shadow: 0 0 0 3px rgba(89, 149, 141, .12); }
.input:disabled { opacity: .5; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.input.code { font-size: 22px; letter-spacing: 4px; text-align: center; font-weight: 700; height: 56px; }
.textarea { height: auto; min-height: 140px; padding: 12px 14px; resize: vertical; font-family: inherit; line-height: 1.5; }
.theme-kid .input { border-width: 2px; border-color: var(--line); background: var(--surface); }
.field-error { color: #A0452D; font-size: 12px; font-weight: 700; }
.theme-kid .field-error { color: var(--danger); }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* iPhone/Safari: Datumsfelder haben dort eine eigene Mindestbreite und ignorieren width: 100% – nebeneinander
   (field-row) ragen sie dann ins Nachbarfeld. appearance: none + min-width: 0 hält sie in ihrer Spalte. */
.field { min-width: 0; }
input[type="date"].input { -webkit-appearance: none; appearance: none; display: block; min-width: 0; max-width: 100%; line-height: 48px; text-align: left; }
input[type="date"].input::-webkit-date-and-time-value { text-align: left; }

/* Meldungen */
.alert { padding: 12px 14px; border-radius: 14px; background: var(--danger-soft); color: var(--danger-ink); font-weight: 700; font-size: 14px; }
.hint { padding: 12px 14px; border-radius: 14px; background: var(--warm-bg); border: 1px solid var(--warm-line); color: var(--warm-ink); font-size: 14px; font-weight: 600; }
.theme-kid .hint { background: var(--card-warm); border-color: var(--card-warm-line); color: var(--ink); }
.warning { padding: 12px 14px; border-radius: 14px; background: var(--warn-bg); border: 1px solid var(--warn-line, transparent); color: var(--warn-ink); font-weight: 600; font-size: 14px; }
.success-box { padding: 12px 14px; border-radius: 14px; background: var(--ok-bg); color: var(--ok-ink); font-weight: 700; font-size: 14px; text-align: center; }

/* Einwilligung / Haken */
.check { display: flex; gap: 12px; align-items: flex-start; padding: 14px; color: #3F5652; background: var(--surface-2); border-radius: 14px; font-size: 13px; line-height: 1.45; }
.check input { width: 22px; height: 22px; margin: 0; flex-shrink: 0; accent-color: var(--primary); }

/* Umschalter mit 2–3 Feldern (z. B. "Geburtsdatum / Nur Alter", Einnahme/Ausgabe, Reiter) */
.seg { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 4px; padding: 4px; background: #E9F1EF; border-radius: 13px; }
.seg button, .seg a { height: 42px; border: 0; border-radius: 10px; background: transparent; color: #5E7773; font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0 6px; }
.seg .on, .seg .active { color: #2F625C; background: #FFFFFF; box-shadow: 0 2px 8px rgba(47, 98, 92, .09); }
.theme-kid .seg { background: var(--surface-2); }
.theme-kid .seg button, .theme-kid .seg a { color: var(--muted); }
.theme-kid .seg .on, .theme-kid .seg .active { color: var(--head); background: var(--surface); }
.seg .count, .count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; color: #9B5835; background: #FFE3D0; border-radius: 99px; font-size: 11px; }

/* Schalter (Funktionen pro Kind) */
.swrow { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.swrow:last-child { border-bottom: 0; }
/* Eigene Einstellungen eines Lerninhalts direkt unter seinem Schalter (Kindereinstellungen, Bereich "Lerninhalte"). */
.learn-settings { display: grid; gap: 8px; padding: 2px 0 14px; border-bottom: 1px solid var(--line-soft); }
.learn-settings:last-child { border-bottom: 0; }
.swrow > div { flex: 1; display: grid; }
.swrow strong { color: var(--head); font-size: 15px; }
.swrow small { color: var(--muted); font-size: 12px; }
.switch { position: relative; flex: 0 0 auto; width: 52px; height: 32px; padding: 0; border: 0; background: #CBD6D2; border-radius: 99px; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; background: #FFFFFF; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: left .15s; }
.switch.on { background: var(--ok); }
.switch.on::after { left: 23px; }

/* Zahlen-Eingabe mit - und + (Münzen) */
.stepper { display: flex; align-items: center; gap: 10px; }
.stepper button { display: grid; place-items: center; width: 50px; height: 50px; border: 0; color: #2F625C; background: var(--primary-soft); border-radius: 13px; }
.stepper .input { flex: 1; text-align: center; font-family: var(--font-head); font-size: 22px; font-weight: 800; }

/* Code-Anzeige (Pairing, Einladung) */
.code-box { padding: 14px; text-align: center; background: #F2F8F6; border: 1px dashed #A8C5BF; border-radius: 13px; display: grid; gap: 4px; }
.code-box small { color: var(--muted); font-size: 12px; }
.code-display {
    color: var(--head); letter-spacing: 4px; font-family: var(--font-head);
    font-size: 30px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums;
}

/* ---- Auswahl-Chips (z. B. Kind wählen, Wochentag, Vorschläge) ----------------------------------- */

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
    min-height: 40px; padding: 0 14px;
    border: 1px solid #DCE6E3; border-radius: 999px;
    background: var(--surface); color: #4E605C;
    font-weight: 700; font-size: 14px;
    display: inline-flex; align-items: center; gap: 6px;
}
.chip.active { color: #2F625C; background: var(--primary-soft); border-color: #65A098; }
.chip.idea { color: #7A4E2E; background: #FFF6EC; border-color: #F0DCC8; }
.chip.small { min-height: 40px; min-width: 44px; padding: 0 10px; justify-content: center; }
.theme-kid .chip { border-width: 2px; border-color: var(--line); color: var(--ink); }
.theme-kid .chip.active { color: var(--primary-soft-ink); background: var(--primary-soft); border-color: var(--primary); }
/* Kinder-Auswahl der Eltern (Geld, Lernen, Wunschzettel …): alle Knöpfe gleich breit, 2 pro Zeile, Avatar links */
.kid-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kid-chip {
    display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; height: 46px; padding: 5px 14px 5px 6px;
    color: #5E7773; background: var(--surface); border: 1px solid #DFE8E5; border-radius: 99px;
    font-size: 14px; font-weight: 700; text-align: left;
}
.kid-chip > span:last-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.kid-chip .avatar { width: 32px; height: 32px; border-radius: 50%; font-size: 13px; }
.kid-chip.active { color: #376E67; border-color: #65A098; box-shadow: 0 0 0 1px #65A098; }
/* Wochentage: 7 gleich breite Felder */
.chips.days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.chips.days .chip { min-width: 0; padding: 0; justify-content: center; border-radius: 11px; height: 44px; border: 0; background: #EEF3F1; color: #5E7773; }
.chips.days .chip.active { color: #FFFFFF; background: #4D857E; }

/* ---- Navigation unten ----------------------------------------------------------------------------- */

.bottom-nav {
    position: sticky; bottom: 0; z-index: 15;
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    padding: 4px 8px calc(8px + env(safe-area-inset-bottom));
    background: var(--nav-bg);
    border-top: 1px solid var(--nav-line);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.bottom-nav a {
    position: relative;
    display: grid; justify-items: center; align-content: start; gap: 3px;
    min-height: 54px; padding-top: 6px;
    color: var(--nav-ink); font-size: 11px; font-weight: 600;
}
.bottom-nav a.active { color: var(--nav-on); font-weight: 800; }
/* Aktiver Reiter: Symbol in einer hellen Pille (wie bei den Kindern, nur dezenter), damit man ihn auf einen Blick sieht */
.bottom-nav .nav-ico { display: grid; place-items: center; width: 50px; height: 28px; border-radius: 99px; transition: background-color .15s; }
.bottom-nav a.active .nav-ico { background: var(--nav-on-bg); }
/* Zahl am Eintrag: vom Kind gemeldete Aufgaben bzw. geschaffte Lerninhalte, die auf die Eltern warten */
.nav-badge {
    position: absolute; top: 0; left: calc(50% + 5px);
    display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px;
    color: #FFFFFF; background: #C2643A; border: 2px solid var(--surface); border-radius: 99px;
    font-size: 11px; font-style: normal; font-weight: 700; line-height: 1;
}
.theme-kid .bottom-nav { border-top-width: 2px; padding: 6px 10px calc(10px + env(safe-area-inset-bottom)); }
.theme-kid .bottom-nav a { font-size: 12px; font-weight: 700; min-height: 58px; padding-top: 4px; }
.theme-kid .bottom-nav .nav-ico { width: 52px; height: 34px; border-radius: var(--nav-pill-radius); }
.theme-kid .bottom-nav a.active .nav-ico { background: var(--nav-on-bg); }

/* ---- Start- und Anmeldeseiten --------------------------------------------------------------------- */

.login {
    position: relative; isolation: isolate; overflow: hidden;
    flex: 1; width: 100%; max-width: 480px; margin: 0 auto;
    padding: calc(16px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));
    background: #FBFCFA;
}
.login::before, .login::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; }
.login::before { top: -125px; right: -100px; width: 230px; height: 230px; background: #DCEFEB; }
.login::after { top: 218px; left: -63px; width: 88px; height: 88px; background: #FFE9BB; }
.login-back { position: absolute; top: calc(14px + env(safe-area-inset-top)); left: 20px; }
.login-head { padding: 40px 4px 22px; text-align: center; }
.login-head.compact { padding: 34px 4px 14px; }
.login-head .brand { display: inline-grid; place-items: center; gap: 2px; }
.login-head img { width: 104px; height: 104px; object-fit: contain; }
.login-head.mid img { width: 72px; height: 72px; }
.login-head.compact img { width: 60px; height: 60px; }
.login-head p { max-width: 300px; margin: 9px auto 0; color: #61736F; font-size: 15px; line-height: 1.45; }
.login-title { margin-bottom: 22px; }
.login-title.center { text-align: center; }
.login-title .eyebrow-warm { display: block; margin-bottom: 6px; color: #A85F3C; letter-spacing: 1.4px; text-transform: uppercase; font-size: 12px; font-weight: 700; }
.login-title h1 { color: #244B47; letter-spacing: -.6px; font-family: var(--font-head); font-size: 26px; font-weight: 800; line-height: 1.12; }
.login-title p { margin-top: 8px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.login .form { gap: 14px; }
.login-opt {
    display: grid; grid-template-columns: 52px 1fr 22px; align-items: center; gap: 14px;
    width: 100%; min-height: 94px; padding: 16px; text-align: left;
    background: #FFFFFF; border: 1px solid #DFE9E6; border-radius: 18px;
    box-shadow: 0 7px 22px rgba(45, 83, 76, .055);
    transition: transform .18s, border-color .18s, box-shadow .18s;
}
.login-opt:hover { border-color: #A9CCC5; transform: translateY(-2px); box-shadow: 0 11px 25px rgba(45, 83, 76, .1); }
.login-opt .pic { width: 52px; height: 52px; border-radius: 17px; }
.login-opt strong { display: block; color: #294B47; font-size: 16px; font-weight: 700; }
.login-opt small { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 1.35; }
.login-opt .chev { color: #5F918A; }
.login-legal { max-width: 320px; margin: 22px auto 0; color: #6E7E7A; text-align: center; font-size: 12px; line-height: 1.55; }
.login-switch { margin-top: 22px; color: var(--muted); text-align: center; font-size: 14px; }
.login-switch a { color: var(--link); font-weight: 700; }
.login-aside { display: grid; gap: 4px; margin-top: 22px; padding: 15px 16px; color: #605E52; background: #FFF6E9; border-left: 3px solid #EFAD62; font-size: 13px; line-height: 1.45; }
.login-aside strong { color: #614A26; font-size: 14px; }
.pw { position: relative; display: block; }
.pw .input { padding-right: 50px; }
.pw button { position: absolute; top: 50%; right: 9px; transform: translateY(-50%); display: grid; place-items: center; width: 36px; height: 36px; border: 0; background: none; color: var(--muted); }
.reveal { animation: reveal .26s ease-out both; }
@keyframes reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- Eltern-Dashboard ----------------------------------------------------------------------------- */

.dash-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dash-head p { margin-top: 7px; color: var(--muted); font-size: 14px; }
.profile-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #DCE6E3; background: #FFFFFF; color: #376660; display: grid; place-items: center; font-family: var(--font-head); font-size: 16px; font-weight: 800; box-shadow: 0 6px 18px rgba(45, 83, 76, .07); }
.dash-title .kicker { margin-bottom: 7px; letter-spacing: 1.2px; }
.dash-title h1 { max-width: 320px; color: var(--head); letter-spacing: -.6px; font-family: var(--font-head); font-size: 26px; font-weight: 800; line-height: 1.12; }

/* "Wartet auf dich": warme Fläche mit einer Zeile pro Bereich */
.waiting { padding: 6px; background: var(--warm-bg); border: 1px solid var(--warm-line); border-radius: 18px; }
.waiting-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 10px; }
.waiting-head .pic { width: 40px; height: 40px; border-radius: 12px; color: #A9603B; background: var(--warm-soft); }
.waiting-head strong { display: block; color: var(--warm-ink); font-size: 15px; }
.waiting-head span { color: var(--warm-sub); font-size: 12px; }
.waiting-row { display: grid; grid-template-columns: 30px 1fr auto 16px; align-items: center; gap: 10px; min-height: 48px; margin-top: 4px; padding: 8px 10px; background: #FFFFFF; border-radius: 12px; color: #4E3D34; }
.waiting-row .n { display: grid; place-items: center; width: 30px; height: 26px; color: #FFFFFF; background: var(--warm-accent); border-radius: 99px; font-size: 13px; font-weight: 700; }
.waiting-row .t { font-size: 14px; font-weight: 600; }
.waiting-row .w { color: #8A6A55; font-size: 12px; text-align: right; }
.waiting-row svg { color: #B17A5F; }
.all-done { display: flex; align-items: center; gap: 10px; padding: 12px; background: #EFF8F3; border: 1px solid #CDE6D8; border-radius: 16px; }
.all-done .pic { width: 40px; height: 40px; border-radius: 12px; color: #2F6D52; background: #D9F0E3; }
.all-done strong { display: block; color: #2C5A47; font-size: 15px; }
.all-done span { color: #4F7564; font-size: 12px; }

/* Kleine Kinderkarten (Kontostand, Münzen) und Zeilen mit Balken */
.mini-card { display: flex; align-items: center; gap: 10px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; min-width: 0; }
.mini-card > div { display: grid; min-width: 0; }
.mini-card .who { color: #5F716D; font-size: 12px; font-weight: 700; }
.mini-card strong { color: #2F514C; font-family: var(--font-head); font-size: 18px; font-weight: 800; display: inline-flex; align-items: center; gap: 4px; }
.mini-card small { overflow: hidden; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; font-size: 11px; }
.coin-pic { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--gold-bg); font-size: 20px; }
.bar-row { display: flex; align-items: center; gap: 10px; padding: 11px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.bar-row > div { flex: 1; min-width: 0; }
.bar-row .top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 7px; }
.bar-row .top strong { color: #34534F; font-size: 14px; }
.bar-row .top span, .bar-row .note { color: var(--muted); font-size: 12px; }
.bar-row .note { display: block; margin-top: 6px; }
.stats3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 12px; }
.stats3 p { display: grid; }
.stats3 p + p { padding-left: 12px; border-left: 1px solid #E7ECEA; }
.stats3 strong { color: #315A54; font-family: var(--font-head); font-size: 22px; font-weight: 800; line-height: 1; }
.stats3 strong.warm { color: #B4602F; }
.stats3 span { margin-top: 3px; color: var(--muted); font-size: 12px; }
.flames { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line-soft); }

/* Leer-Zustand mit Maskottchen (z. B. noch keine Kinder) */
.empty-state { padding: 26px 18px; text-align: center; background: var(--surface); border: 1px dashed #C9DAD5; border-radius: 20px; }
.empty-state img { width: 96px; height: 96px; object-fit: contain; }
.empty-state h2 { margin-top: 8px; color: var(--head); font-family: var(--font-head); font-size: 20px; font-weight: 800; }
.empty-state p { margin: 8px auto 0; max-width: 280px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.empty-state .btn { margin-top: 16px; }

/* Lade- und Leerzustände */
.loading { padding: 24px; text-align: center; color: var(--muted); }
.empty { padding: 18px; border-radius: var(--radius); background: var(--surface); border: 1px dashed var(--line); color: var(--muted); text-align: center; font-size: 14px; }
.skel { display: block; background: #E6EDEB; border-radius: 10px; animation: pulse 1.2s ease-in-out infinite alternate; }
@keyframes pulse { from { opacity: 1; } to { opacity: .55; } }

/* ---- Blatt von unten (Formulare) und Dialoge ----------------------------------------------------- */

.sheet-backdrop {
    position: fixed; inset: 0; z-index: 50;
    display: flex; align-items: flex-end; justify-content: center;
    background: rgba(24, 40, 37, .45);
    animation: fade .18s ease-out both;
}
.sheet {
    width: 100%; max-width: 560px; max-height: calc(100dvh - 24px - env(safe-area-inset-top));
    overflow-y: auto; overscroll-behavior: contain;
    padding: 10px 20px calc(24px + env(safe-area-inset-bottom));
    background: var(--surface); color: var(--ink);
    border-radius: 28px 28px 0 0; box-shadow: 0 -10px 40px rgba(24, 40, 37, .18);
    animation: slide-up .22s ease-out both;
}
.sheet-grip { width: 44px; height: 5px; margin: 0 auto 14px; background: #D5E0DC; border-radius: 99px; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
.sheet-head h2 { color: var(--head); font-family: var(--font-head); font-size: 22px; font-weight: var(--head-weight); }
.sheet-head p { color: var(--muted); font-size: 13px; }
.sheet-x { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border: 0; color: #3F6964; background: #F0F5F3; border-radius: 50%; }
.theme-kid .sheet-x { color: var(--primary-soft-ink); background: var(--primary-soft); }
/* Formulare im Blatt: Überschrift links neben dem Schließen-Knopf, unten "Speichern" groß und "Abbrechen" als Textknopf */
.sheet { position: relative; }
.sheet-close { position: absolute; top: 18px; right: 18px; }
.sheet .sheet-title { min-height: 44px; display: flex; align-items: center; padding-right: 54px; margin-bottom: 2px;
    color: var(--head); font-family: var(--font-head); font-size: 22px; font-weight: var(--head-weight); line-height: 1.15; }
.sheet form > .grid-2:last-child { grid-template-columns: 1fr; gap: 4px; margin-top: 4px; }
.sheet form > .grid-2:last-child > [type="submit"] { order: -1; min-height: 54px; border-radius: var(--btn-radius); font-size: 15px; }
.sheet form > .grid-2:last-child > .btn-outline { border: 0; background: transparent; color: var(--link); box-shadow: none; min-height: 48px; }
.theme-kid .sheet form > .grid-2:last-child > [type="submit"] { font-size: 18px; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-up { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }

.dialog-backdrop { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: rgba(24, 40, 37, .45); animation: fade .15s ease-out both; }
.dialog { width: 100%; max-width: 380px; padding: 22px; text-align: center; background: var(--surface); color: var(--ink); border-radius: 24px; box-shadow: 0 20px 50px rgba(24, 40, 37, .25); }
.dialog .pic { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 18px; }
.dialog h2 { color: var(--head); font-family: var(--font-head); font-size: 21px; font-weight: var(--head-weight); }
.dialog p { margin-top: 8px; color: #4E605C; font-size: 14px; line-height: 1.5; }
.theme-kid .dialog p { color: var(--ink); }
.dialog-actions { display: grid; gap: 8px; margin-top: 20px; }

/* ---- Kinder: Kopf, Zahlen, große Flächen ---------------------------------------------------------- */

/* Deko der Themen hinter dem Inhalt (AppLayout setzt die Elemente, das Thema entscheidet, welche sichtbar sind) */
.kid-deco { position: absolute; z-index: -1; inset: 0 0 auto 0; height: 0; pointer-events: none; }
.kid-deco > * { display: none; position: absolute; }
.kid-adventure .deco-sun { display: block; top: -80px; right: -70px; width: 230px; height: 230px; border-radius: 50%; background: #FFF0C8; }
.kid-adventure .deco-blob { display: block; top: 300px; left: -50px; width: 110px; height: 110px; border-radius: 50%; background: #E4F1EE; }
.kid-space .deco-stars, .kid-unicorn .deco-stars { display: block; top: 0; left: 0; width: 2px; height: 2px; border-radius: 50%; background: #FFFFFF;
    box-shadow: 40px 30px #fff, 120px 80px #C9D0FF, 300px 40px #fff, 350px 140px #9FB0FF, 60px 200px #fff, 210px 170px #C9D0FF,
        330px 300px #fff, 30px 420px #9FB0FF, 180px 520px #fff, 370px 600px #C9D0FF, 90px 760px #fff, 260px 820px #9FB0FF,
        20px 980px #fff, 320px 1040px #C9D0FF, 150px 1180px #fff, 360px 1300px #9FB0FF, 70px 1400px #C9D0FF, 240px 1460px #fff; }
.kid-unicorn .deco-stars { width: 5px; height: 5px; background: #F3B6D6;
    box-shadow: 40px 60px #C9B6F5, 120px 130px #FFD98A, 300px 230px #F3B6D6, 350px 340px #C9B6F5, 60px 420px #FFD98A, 210px 520px #F3B6D6,
        330px 640px #C9B6F5, 30px 760px #F3B6D6, 180px 860px #FFD98A, 370px 960px #C9B6F5, 90px 1080px #F3B6D6, 260px 1180px #FFD98A; }
.kid-space .deco-planet { display: block; top: -40px; right: -60px; width: 210px; height: 210px; color: #7B6CF6; }
.kid-unicorn .deco-rainbow { display: block; top: -30px; right: -50px; width: 230px; height: 150px; }
.kid-unicorn .deco-cloud { display: block; top: 640px; left: -40px; width: 120px; height: 44px; background: #FFFFFF; border-radius: 99px; box-shadow: 30px -18px 0 4px #FFFFFF, -24px -8px 0 0 #FFFFFF; }

.kid-head { position: relative; min-height: 112px; padding-right: 110px; }
.kid-head .mascot { position: absolute; top: -6px; right: -6px; width: 104px; height: 104px; object-fit: contain; }
.kid-head h1 { margin-top: 16px; color: var(--head); letter-spacing: -.4px; font-family: var(--font-head); font-size: 32px; font-weight: var(--head-weight); line-height: 1.1; overflow-wrap: anywhere; }
.kid-head .sub { margin-top: 5px; color: var(--muted); font-size: 16px; }
.theme-kid .page-header h1 { font-size: 32px; }
.theme-kid .kicker { font-size: 12px; font-weight: 800; }

.kid-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.kid-stat { display: grid; justify-items: center; gap: 4px; padding: 12px 6px; text-align: center; background: var(--surface); border: 2px solid var(--line); border-radius: 20px; }
.kid-stat .pic { width: 38px; height: 38px; border-radius: 13px; transform: none; }
.kid-unicorn .kid-stat .pic, .kid-space .kid-stat .pic { border-radius: 50%; }
.kid-stat strong { color: var(--head); font-family: var(--font-head); font-size: 22px; font-weight: var(--head-weight); line-height: 1; }
.kid-stat small { color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.2; }
.kid-stat .pic > svg { transform: none !important; }

.hero-card { padding: 18px; color: #FFFFFF; background: var(--hero, var(--primary)); border-radius: 24px; box-shadow: 0 5px 0 var(--hero-shadow, transparent); display: block; }
.kid-unicorn .hero-card { border-radius: 28px; }
.hero-card .top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.hero-card .lbl { color: var(--hero-sub); font-size: 14px; font-weight: 700; }
.hero-card .val { display: block; margin-top: 2px; font-family: var(--font-head); font-size: 34px; font-weight: var(--head-weight); line-height: 1; }
.hero-card .val.negative { color: #FFD0C2; }
.hero-card .bubble { display: grid; place-items: center; width: 48px; height: 48px; background: rgba(255, 255, 255, .16); border-radius: 15px; }
.hero-card .split { display: block; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .22); }
.hero-card .split-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; }
.hero-card .track { display: block; height: 12px; margin-top: 9px; overflow: hidden; background: rgba(255, 255, 255, .22); border-radius: 99px; }
.hero-card .track > span { display: block; height: 100%; background: var(--hero-track); border-radius: 99px; }
.hero-card .info { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 14px; background: rgba(255, 255, 255, .16); border-radius: 18px; font-size: 15px; }

/* Münzstand groß (Shop) */
.coins-card { display: flex; align-items: center; gap: 14px; padding: 18px; background: var(--card-sun, var(--gold-bg)); border: 2px solid var(--card-sun-line, var(--line)); border-radius: 24px; }
.coins-card .coin-pic { width: 56px; height: 56px; font-size: 30px; background: transparent; }
.coins-card strong { color: var(--sun-ink, var(--gold-ink)); font-family: var(--font-head); font-size: 38px; font-weight: var(--head-weight); line-height: 1; }
.coins-card span { color: var(--ink); font-size: 15px; font-weight: 700; }
.coins-card small { color: var(--muted); font-size: 13px; }

/* Lob-Streifen (Serie, Runde geschafft) */
.banner { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--card-warm, var(--warm-bg)); border: 2px solid var(--card-warm-line, var(--warm-line)); border-radius: 22px; }
.banner p { flex: 1; color: var(--ink); font-size: 15px; line-height: 1.35; }
.banner strong { color: var(--head); font-family: var(--font-head); font-size: 18px; font-weight: var(--head-weight); }
.banner .pic { border-radius: 50%; width: 44px; height: 44px; transform: none; }

.split2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.split2 p { display: grid; padding: 10px 12px; background: var(--surface-2); border-radius: 14px; }
.split2 span { color: var(--muted); font-size: 12px; }
.split2 b { color: var(--head); font-family: var(--font-head); font-size: 18px; font-weight: var(--head-weight); }
.split2 p.gift { background: var(--card-sun, #FFF6EC); }
.theme-kid .split2 b { font-size: 21px; }

.reward { display: inline-flex; align-items: center; gap: 4px; color: var(--ok-ink); font-size: 14px; font-weight: 800; }
.reward.text { color: var(--kick); }
.theme-kid .reward { font-size: 15px; }

/* "Fakt des Tages" (Kinder-Dashboard) */
.fact-card { flex-direction: row; align-items: flex-start; gap: 12px; }
.fact-icon { width: 46px; height: 46px; border-radius: 15px; flex-shrink: 0; display: grid; place-items: center; background: var(--pic-sun-bg, var(--gold-bg)); color: var(--pic-sun, var(--gold-ink)); }
.fact-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.fact-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.fact-head strong { color: var(--sun-ink, var(--head)); font-family: var(--font-head); font-size: 17px; font-weight: var(--head-weight); }
.fact-tag { font-size: 13px; font-weight: 800; padding: 5px 11px; border-radius: 999px; background: var(--pic-sun-bg, var(--gold-bg)); color: var(--sun-ink, var(--ink)); }
.fact-text { font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; }

/* Serien "Tage in Folge" (StreakBadge). .streak-pill = kompakt, .streak-card = Karte auf "Lernen"/"Quests",
   .streak-subtle = Eltern: klein und dezent, nur als Info. "done" = heute schon geschafft (Flamme leuchtet). */
.streak-row { display: flex; gap: 10px; flex-wrap: wrap; }
.streak-pill { flex: 1 1 140px; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: var(--surface); border: 2px solid var(--line); color: var(--ink); font-size: 14px; }
.streak-pill strong { font-size: 20px; line-height: 1; color: var(--head); font-family: var(--font-head); }
.streak-flame { display: grid; place-items: center; color: #FDBA74; }
.streak-pill.done .streak-flame, .streak-card.done .streak-flame { color: #F97316; }
.streak-card { flex-direction: row; align-items: center; gap: 14px; }
.streak-flame.big { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; background: var(--pic-orange-bg, #FFF4E6); color: var(--pic-orange, #FDBA74); }
.streak-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.streak-body strong { color: var(--head); font-family: var(--font-head); font-size: 18px; font-weight: var(--head-weight); }
.streak-subtle { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; color: #8A6A55; white-space: nowrap; }
.streak-subtle svg { color: #C2643A; opacity: 0.85; }

/* ---- Taschengeld ---------------------------------------------------------------------------------- */

.balance { font-family: var(--font-head); font-size: 34px; font-weight: 800; letter-spacing: -.5px; color: var(--head); }
.plus { color: var(--ok-ink); font-weight: 700; white-space: nowrap; }
.minus { color: var(--danger-ink); font-weight: 700; white-space: nowrap; }
.theme-kid .minus { color: var(--minus); }
.order .tile-icon { color: var(--pic-mint, #3C736C); background: var(--pic-mint-bg, #E2EFEC); }

/* ---- Shop ----------------------------------------------------------------------------------------- */

.price { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; color: var(--gold-ink); white-space: nowrap; }
.price::before { content: ""; width: 1em; height: 1em; border-radius: 50%; background: var(--gold); border: .1em solid var(--gold-line); box-shadow: inset 0 0 0 .16em var(--gold), inset 0 0 0 .26em var(--gold-line); box-sizing: border-box; }
.theme-kid .price { color: var(--sun-ink); }

/* ---- Vokabeltrainer / Lernrunde ------------------------------------------------------------------- */

.progress.vocab > span { background: var(--bar); }
.learn-card {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 26px 18px; border-radius: 30px; text-align: center;
    background: var(--surface); border: var(--card-border) solid var(--line); box-shadow: var(--card-shadow);
}
.learn-card .lang { color: var(--kick); letter-spacing: 1.3px; text-transform: uppercase; font-size: 12px; font-weight: 800; }
.learn-card .prompt { color: var(--head); font-family: var(--font-head); font-size: 44px; font-weight: var(--head-weight); line-height: 1.1; overflow-wrap: anywhere; }
.learn-card .prompt-row { display: flex; align-items: center; justify-content: center; gap: 12px; }
.option {
    width: 100%; min-height: 64px; padding: 0 16px;
    border: 2px solid var(--option-line, var(--line)); border-radius: var(--btn-radius);
    background: var(--surface); color: var(--head);
    box-shadow: 0 4px 0 var(--option-line, var(--line));
    font-family: var(--font-head); font-size: 22px; font-weight: var(--head-weight);
}
.option.correct { border-color: var(--ok); background: var(--ok-bg); color: var(--ok-ink); box-shadow: 0 4px 0 var(--ok); }
.option.wrong { border-color: var(--danger); background: var(--danger-soft); color: var(--danger-ink); box-shadow: 0 4px 0 var(--danger); }
.feedback { padding: 16px 18px; border-radius: 24px; font-weight: 700; text-align: left; }
.feedback.ok { background: var(--ok-bg); border: 2px solid var(--ok-line, transparent); color: var(--ok-ink); }
.feedback.bad { background: var(--danger-soft); border: 2px solid color-mix(in srgb, var(--danger) 30%, transparent); color: var(--danger-ink); }
.feedback strong { display: block; font-family: var(--font-head); font-size: 24px; font-weight: var(--head-weight); }
.feedback.speakable { display: flex; align-items: center; gap: 12px; }
.feedback .feedback-ico { flex: 0 0 auto; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; color: #FFFFFF; background: var(--ok); }
.feedback.bad .feedback-ico { background: var(--danger); }
.dots { display: flex; gap: 5px; justify-content: center; }
.dots span { width: 12px; height: 12px; border-radius: 50%; background: var(--bar-bg); }
.dots span.on { background: var(--bar); }
/* Vorlesen (Text-to-Speech): runde Lautsprecher-Knöpfe an der Vokabel und an der Rückmeldung */
.speak-btn {
    flex: none; width: 48px; height: 48px; border: 0; border-radius: 50%;
    background: var(--primary); color: var(--primary-ink);
    display: inline-flex; align-items: center; justify-content: center;
}
.feedback .speak-btn { background: rgba(255, 255, 255, 0.75); color: inherit; }
.kid-space .feedback .speak-btn { background: rgba(255, 255, 255, 0.12); }
/* Eingabefeld der Lernrunde: groß und rund */
.answer-input { height: 64px; padding: 0 20px; border: 3px solid var(--line); border-radius: var(--btn-radius); background: var(--surface); color: var(--head); font-family: var(--font-head); font-size: 24px; font-weight: var(--head-weight); text-align: center; }
.answer-input:focus { border-color: var(--primary); box-shadow: none; }

/* Auswertung am Ende einer Runde */
.round-end { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.round-end img { width: 170px; height: 170px; object-fit: contain; }
.round-end h1 { color: var(--head); font-family: var(--font-head); font-size: 34px; font-weight: var(--head-weight); }
.kid-stat.good strong { color: var(--ok); }
.kid-stat.again strong { color: var(--action, var(--danger)); }

/* ---- Wunschzettel --------------------------------------------------------------------------------- */
/* Balken mit zwei Teilen: links das Gesparte, rechts der feste Elternanteil (gestreift).
   margin-left: auto schiebt den Elternanteil an das rechte Ende; die Lücke dazwischen ist "fehlt noch". */

.wish-balance { flex-direction: row; align-items: center; gap: 14px; }
.progress.wish { display: flex; height: 12px; }
.progress.wish > span { border-radius: 0; }
.progress.wish > .saved { background: var(--wish-bar); }
.theme-kid .progress.wish > .saved { background: var(--action, var(--wish-bar)); }
.progress.wish > .parents { margin-left: auto; background: repeating-linear-gradient(45deg, var(--bar) 0 6px, color-mix(in srgb, var(--bar) 70%, white) 6px 12px); }
.wish-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--muted); }
.wish-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.wish-legend .dot.saved { background: var(--wish-bar); }
.theme-kid .wish-legend .dot.saved { background: var(--action, var(--wish-bar)); }
.wish-legend .dot.parents { background: var(--bar); }

/* ---- Kindereinstellungen: Themen-Karten ---------------------------------------------------------- */

.theme-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.theme-card { display: grid; gap: 8px; padding: 12px; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 17px; }
.theme-card.active { border: 2px solid var(--primary); padding: 11px; }
.theme-card .swatches { display: flex; gap: 4px; }
.theme-card .swatches span { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.theme-card strong { color: var(--head); font-size: 15px; line-height: 1.2; }
.theme-card strong small { color: var(--muted); font-size: 11px; font-weight: 500; }
.theme-card > small { color: var(--muted); font-size: 12px; }

/* Fehleranzeige von Blazor (unerwarteter Fehler) */
#blazor-error-ui {
    display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: #FFF6E4; color: #6B4E14; font-weight: 600;
}
#blazor-error-ui .reload { text-decoration: underline; margin-left: 8px; }
#blazor-error-ui .dismiss { float: right; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Betrag rechts in einer Zeile (Buchungen, Daueraufträge) */
.list-row > b { white-space: nowrap; font-size: 14px; }
.theme-kid .list-row > b { font-family: var(--font-head); font-size: 18px; font-weight: var(--head-weight); }
.hero-card a.top, .hero-card a.split { color: inherit; }

/* Chips als Umschalter (zwei Möglichkeiten, z. B. Münzen / Eigene Belohnung) */
.seg .chip { min-height: 42px; height: 42px; padding: 0 6px; border: 0; border-radius: 10px; background: transparent; color: #5E7773; justify-content: center; box-shadow: none; }
.seg .chip.active { color: #2F625C; background: #FFFFFF; box-shadow: 0 2px 8px rgba(47, 98, 92, .09); }
.chip.idea.active { color: #FFFFFF; background: #C96F43; border-color: #C96F43; }
.coins-card .coin-pic .coin-ico { font-size: 40px; }

/* ---- Ladezustand (Components/Skeleton) ------------------------------------------------------------ */
.skeleton { display: flex; flex-direction: column; gap: 14px; }
.skel { display: block; background: var(--line); border-radius: 10px; animation: pulse 1.1s ease-in-out infinite alternate; }
.skel-card { display: flex; align-items: center; gap: 12px; padding: 15px; background: var(--surface); border: var(--card-border) solid var(--line); border-radius: var(--radius); }
.skel-card .skel { background: var(--line-soft, var(--line)); }
.kid-space .skel-card .skel { background: var(--line); }

/* Startbildschirm, solange die App selbst noch lädt (index.html, vor Blazor) */
.boot { min-height: 100dvh; display: grid; place-items: center; align-content: center; gap: 14px; background: #FBFCFA; text-align: center; }
.boot img { width: 110px; height: 110px; object-fit: contain; animation: boot-float 1.6s ease-in-out infinite alternate; }
.boot .bar { width: 120px; height: 6px; overflow: hidden; border-radius: 99px; background: #E7EEEC; }
.boot .bar span { display: block; width: 40%; height: 100%; border-radius: 99px; background: #66A097; animation: boot-bar 1.2s ease-in-out infinite; }
.boot p { color: #677A76; font-size: 13px; }
@keyframes boot-float { from { transform: translateY(0); } to { transform: translateY(-8px); } }
@keyframes boot-bar { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* ---- Kinder-Shop "Schatzkammer" (Canvas Kids4, übernommen in Kids1–3) --------------------------- */
/* Aufbau gleich für alle Themen, Farben über die --shop-Tokens je Thema. Positive Aktionen (Eintauschen, Juhu!)
   nie in Rot/Orange-Rot – das wirkt wie "Achtung"; dafür die Erfolgsfarbe des Themas (--shop-go). */
.kid-adventure {
    --shop-chest: #1F4C46; --shop-chest-shadow: #143632; --shop-ray: #2A6159; --shop-ray-2: #2F6B62; --shop-num: #FFD866; --shop-lbl: #FFF0C8;
    --shop-spot: #FFF6DC; --shop-spot-line: #F6E3A9; --shop-spot-shadow: #F1D98E; --shop-kick: #2F6E66; --shop-kick-ink: #FFFFFF;
    --shop-ring-track: #F1DFA8; --shop-ring: #E6A534; --shop-ring-ico: #2B615A; --shop-ring-ico-bg: #D7EDE7; --shop-head: #2F4A46; --shop-big: #A3572C; --shop-spot-sub: #6B5320;
    --shop-ready: #FFFBEF; --shop-ready-line: #F3C969; --shop-ready-shadow: #F1D98E; --shop-medal: #FFE7A6; --shop-medal-ink: #7A4E06; --shop-medal-halo: #FFF0C8; --shop-medal-ring: #F3C969; --shop-spark: #E6A534;
    --shop-lock: #F7F5F0; --shop-lock-line: #ECE8DF; --shop-grey: #ECE9E2; --shop-grey-ink: #6E7A76; --shop-grey-halo: #F2EFE9; --shop-lockb: #5F6F6B;
    --shop-price: #2F6B5E; --shop-mini: #E8E4DB; --shop-mini-fill: #E6A534;
    --shop-go: #2F6E66; --shop-go-shadow: #1F4C46; --shop-go-ink: #FFFFFF;
    --shop-ticket: #E8E4F7; --shop-ticket-line: #B9B0E0; --shop-ticket-ink: #3D3570; --shop-ticket-sub: #4F4785; --shop-stamp: #FFFFFF;
    --shop-fact: #FFFFFF;
}
.kid-space {
    --shop-chest: #3D3FA8; --shop-chest-shadow: #25277A; --shop-ray: #4A4DBD; --shop-ray-2: #5558C8; --shop-num: #FFD45C; --shop-lbl: #D3D6FF;
    --shop-spot: #2C2A52; --shop-spot-line: #5E5468; --shop-spot-shadow: #1E1C40; --shop-kick: #62D8F2; --shop-kick-ink: #06303A;
    --shop-ring-track: #4A4470; --shop-ring: #FFD45C; --shop-ring-ico: #72E0F5; --shop-ring-ico-bg: #173E5A; --shop-head: #FFFFFF; --shop-big: #FFA06E; --shop-spot-sub: #D3D6FF;
    --shop-ready: #26285C; --shop-ready-line: #FFD45C; --shop-ready-shadow: #141B45; --shop-medal: #3B3530; --shop-medal-ink: #FFD45C; --shop-medal-halo: #2C2A52; --shop-medal-ring: #FFD45C; --shop-spark: #FFD45C;
    --shop-lock: #161D45; --shop-lock-line: #2E3A7A; --shop-grey: #252E66; --shop-grey-ink: #9AA4D6; --shop-grey-halo: #1E2758; --shop-lockb: #4A5594;
    --shop-price: #FFD45C; --shop-mini: #2B3672; --shop-mini-fill: #FFD45C;
    --shop-go: #62D8F2; --shop-go-shadow: #2A93AE; --shop-go-ink: #06303A;
    --shop-ticket: #2F2A66; --shop-ticket-line: #5A4FB0; --shop-ticket-ink: #FFFFFF; --shop-ticket-sub: #C9BDFF; --shop-stamp: #1A2250;
    --shop-fact: #222C63;
}
.kid-unicorn {
    --shop-chest: #6F4FD0; --shop-chest-shadow: #4E35A0; --shop-ray: #7D5FDA; --shop-ray-2: #8A6EE0; --shop-num: #FFD45C; --shop-lbl: #F3EEFF;
    --shop-spot: #FFF8E2; --shop-spot-line: #F4E1A6; --shop-spot-shadow: #F4E1A6; --shop-kick: #6F4FD0; --shop-kick-ink: #FFFFFF;
    --shop-ring-track: #F4E1A6; --shop-ring: #F2B632; --shop-ring-ico: #6A4AC4; --shop-ring-ico-bg: #ECE5FF; --shop-head: #3B2556; --shop-big: #5B3F9E; --shop-spot-sub: #7A4E0E;
    --shop-ready: #FFFBEF; --shop-ready-line: #F2B632; --shop-ready-shadow: #F4E1A6; --shop-medal: #FFEFC2; --shop-medal-ink: #8A5A0B; --shop-medal-halo: #FFF8E2; --shop-medal-ring: #F2B632; --shop-spark: #E26AA6;
    --shop-lock: #FBF6FB; --shop-lock-line: #F0DCEE; --shop-grey: #F0EAF3; --shop-grey-ink: #6F6380; --shop-grey-halo: #F6EEF6; --shop-lockb: #8C7D9C;
    --shop-price: #8A5F10; --shop-mini: #F1E6F3; --shop-mini-fill: #F2B632;
    --shop-go: #23785A; --shop-go-shadow: #185A43; --shop-go-ink: #FFFFFF;
    --shop-ticket: #ECE5FF; --shop-ticket-line: #C9B6F5; --shop-ticket-ink: #3B2556; --shop-ticket-sub: #5B3F9E; --shop-stamp: #FFFFFF;
    --shop-fact: #FFFFFF;
}

/* Schatzkiste: nur die freien Münzen */
.shop-chest { position: relative; overflow: hidden; padding: 20px; background: var(--shop-chest); border-radius: 28px; box-shadow: 0 6px 0 var(--shop-chest-shadow); }
.shop-ray { position: absolute; top: -60px; right: -40px; width: 220px; height: 220px; border-radius: 50%; background: var(--shop-ray); }
.shop-ray.two { top: 40px; right: 60px; width: 90px; height: 90px; background: var(--shop-ray-2); }
.shop-chest-in { position: relative; display: flex; align-items: center; gap: 14px; }
.shop-num { display: block; color: var(--shop-num); font-family: var(--font-head); font-size: 52px; font-weight: var(--head-weight); line-height: .95; letter-spacing: -1px; }
.shop-lbl { color: var(--shop-lbl); font-size: 15px; font-weight: 700; }

/* Nächstes Ziel mit Fortschrittsring */
.shop-spot { padding: 18px; background: var(--shop-spot); border: 2px solid var(--shop-spot-line); border-radius: 26px; box-shadow: 0 5px 0 var(--shop-spot-shadow); }
.shop-kick { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; padding: 5px 10px; color: var(--shop-kick-ink); background: var(--shop-kick); border-radius: 99px; font-size: 12px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; }
.shop-spot-in { display: flex; align-items: center; gap: 16px; }
.shop-ring { position: relative; flex: 0 0 auto; width: 112px; height: 112px; }
.shop-ring > svg { position: absolute; inset: 0; transform: rotate(-90deg); fill: none; stroke-width: 12; }
.shop-ring .track { stroke: var(--shop-ring-track); }
.shop-ring .fill { stroke: var(--shop-ring); stroke-linecap: round; }
.shop-ring-ico { position: absolute; inset: 18px; display: grid; place-items: center; color: var(--shop-ring-ico); background: var(--shop-ring-ico-bg); border-radius: 50%; }
.shop-spot h3 { margin: 0; color: var(--shop-head); font-family: var(--font-head); font-size: 19px; font-weight: var(--head-weight); line-height: 1.2; overflow-wrap: anywhere; }
.shop-big { display: block; margin-top: 6px; color: var(--shop-big); font-family: var(--font-head); font-size: 28px; font-weight: var(--head-weight); line-height: 1; }
.shop-spot p { margin: 4px 0 0; color: var(--shop-spot-sub); font-size: 14px; font-weight: 700; }

/* Belohnungen als Medaillen-Karten */
.shop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.shop-tro { display: flex; flex-direction: column; align-items: center; padding: 16px 12px 14px; text-align: center; background: var(--shop-ready); border: 2px solid var(--shop-ready-line); border-radius: 24px; box-shadow: 0 5px 0 var(--shop-ready-shadow); }
.shop-tro.lock { background: var(--shop-lock); border-color: var(--shop-lock-line); box-shadow: none; }
.shop-medal { position: relative; display: grid; place-items: center; width: 76px; height: 76px; color: var(--shop-medal-ink); background: var(--shop-medal); border-radius: 50%; box-shadow: 0 0 0 6px var(--shop-medal-halo), 0 0 0 8px var(--shop-medal-ring); }
.shop-tro.lock .shop-medal { color: var(--shop-grey-ink); background: var(--shop-grey); box-shadow: 0 0 0 6px var(--shop-grey-halo); }
.shop-spark { position: absolute; top: -10px; right: -8px; display: flex; color: var(--shop-spark); }
.shop-lockb { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 30px; height: 30px; color: #FFFFFF; background: var(--shop-lockb); border: 3px solid var(--shop-lock); border-radius: 50%; }
.shop-tro h3 { min-height: 40px; margin: 14px 0 0; color: var(--shop-head); font-family: var(--font-head); font-size: 16px; font-weight: var(--head-weight); line-height: 1.2; overflow-wrap: anywhere; }
.shop-tro .price { margin-top: 4px; color: var(--shop-price); font-size: 16px; }
.shop-ticket .price { color: var(--shop-ticket-ink); font-size: 16px; }
.shop-mini { width: 100%; height: 10px; margin-top: 12px; overflow: hidden; background: var(--shop-mini); border-radius: 99px; }
.shop-mini span { display: block; height: 100%; background: var(--shop-mini-fill); border-radius: inherit; }
.shop-tro small { margin-top: 6px; color: var(--muted); font-size: 13px; font-weight: 700; }
.theme-kid .btn.shop-go { width: 100%; min-height: 50px; margin-top: 12px; color: var(--shop-go-ink); background: var(--shop-go); border: 0; box-shadow: 0 4px 0 var(--shop-go-shadow); font-size: 17px; }
.theme-kid .btn.shop-go.big { min-height: 56px; margin-top: 18px; font-size: 19px; }

/* Angefragt: Ticket */
.shop-tickets { display: grid; gap: 12px; }
.shop-ticket { display: flex; align-items: center; gap: 14px; padding: 16px; background: var(--shop-ticket); border: 2px dashed var(--shop-ticket-line); border-radius: 22px; }
.shop-ticket h3 { margin: 0; color: var(--shop-ticket-ink); font-family: var(--font-head); font-size: 18px; font-weight: var(--head-weight); overflow-wrap: anywhere; }
.shop-ticket p { margin: 2px 0 0; color: var(--shop-ticket-sub); font-size: 14px; font-weight: 700; }
.shop-stamp { flex: 0 0 auto; display: grid; place-items: center; width: 58px; height: 58px; color: var(--shop-ticket-sub); background: var(--shop-stamp); border-radius: 18px; transform: rotate(-6deg); }

/* Feier-Moment nach dem Eintauschen (im Blatt von unten) */
.shop-party { position: relative; padding-top: 8px; text-align: center; }
.shop-conf { position: absolute; width: 10px; height: 16px; border-radius: 3px; animation: shop-pop .5s ease-out both; }
.shop-hero { position: relative; display: grid; place-items: center; width: 130px; height: 130px; margin: 14px auto 0; color: var(--shop-medal-ink); background: var(--shop-medal); border-radius: 50%; box-shadow: 0 0 0 10px var(--shop-medal-halo), 0 0 0 13px var(--shop-medal-ring); animation: shop-pop .35s ease-out both; }
.shop-hero .shop-spark { top: -6px; right: -14px; }
.shop-party h2 { margin: 28px 0 0; color: var(--shop-head); font-family: var(--font-head); font-size: 30px; font-weight: var(--head-weight); line-height: 1.1; }
.shop-what { margin: 8px 0 0; color: var(--ink); font-size: 17px; }
.shop-what strong { color: var(--shop-big); }
.shop-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.shop-fact { display: grid; justify-items: center; gap: 2px; padding: 12px 8px; background: var(--shop-fact); border: 2px solid var(--line); border-radius: 18px; }
.shop-fact .price { color: var(--shop-head); font-family: var(--font-head); font-size: 22px; font-weight: var(--head-weight); }
.shop-fact small { color: var(--muted); font-size: 13px; font-weight: 700; }
.shop-hint { display: flex; align-items: center; gap: 10px; margin: 20px 0 0; padding: 12px 14px; text-align: left; color: var(--shop-ticket-sub); background: var(--shop-ticket); border-radius: 16px; font-size: 14px; font-weight: 700; }
@keyframes shop-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .shop-hero, .shop-conf { animation: none; } }

/* =====================================================================================================
   Einmaleins (1×1): Reihen-Karte (Kinder), Zahlenfeld (Runde) und Raster (Eltern).
   Jede Reihe ist eine Station passend zum Thema: Abenteuer = Insel, Astronauten = Planet, Einhörner = Wolkenschloss.
   Farben nur über Tokens (je Thema unten), Formen je Thema über die Theme-Klasse.
   ===================================================================================================== */
.kid-adventure {
    --tt-st: #F7E3B5; --tt-st-line: #E8C985; --tt-st-shadow: #D9B66A; --tt-st-ink: #6B4A0C; --tt-sea: #D3EEF0;
    --tt-deco: #2F6E66; --tt-done: #DDF0E6; --tt-done-line: #9FD1B8; --tt-done-ink: #1F5A4A;
    --tt-star: #F2A93B; --tt-star-off: #E9E2D3; --tt-trail: #E3D3B0;
}
.kid-space {
    --tt-st: #3D3FA8; --tt-st-line: #6F72E0; --tt-st-shadow: #25277A; --tt-st-ink: #FFFFFF; --tt-sea: transparent;
    --tt-deco: #FFD45C; --tt-done: #16403A; --tt-done-line: #2C7A66; --tt-done-ink: #5EE0A6;
    --tt-star: #FFD45C; --tt-star-off: #2E3A7A; --tt-trail: #2E3A7A;
}
.kid-unicorn {
    --tt-st: #FFFFFF; --tt-st-line: #F3B6D6; --tt-st-shadow: #E7C9F0; --tt-st-ink: #6F4FD0; --tt-sea: transparent;
    --tt-deco: #C9B6FF; --tt-done: #E3F6EE; --tt-done-line: #BFE6D4; --tt-done-ink: #1F6B50;
    --tt-star: #F5B83D; --tt-star-off: #F0DCEE; --tt-trail: #F3B6D6;
}

/* ---- Reihen-Karte: Stationen abwechselnd links und rechts, dazwischen ein gepunkteter Pfad ---- */
.tt-map { display: flex; flex-direction: column; gap: 0; padding: 6px 0 10px; }
.tt-stop { display: flex; align-items: center; gap: 14px; width: 78%; color: inherit; text-decoration: none; }
.tt-stop:nth-of-type(odd) { align-self: flex-start; }
.tt-stop:nth-of-type(even) { align-self: flex-end; flex-direction: row-reverse; text-align: right; }
.tt-trail { align-self: center; width: 0; height: 22px; border-left: 4px dotted var(--tt-trail); }
.tt-station {
    position: relative; flex: none; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%;
    background: var(--tt-st); border: 3px solid var(--tt-st-line); box-shadow: 0 5px 0 var(--tt-st-shadow);
    color: var(--tt-st-ink); font-family: var(--font-head); font-size: 34px; font-weight: var(--head-weight); line-height: 1;
}
.tt-station.done { background: var(--tt-done); border-color: var(--tt-done-line); color: var(--tt-done-ink); box-shadow: 0 5px 0 var(--tt-done-line); }
.tt-station.next { border-color: var(--action); box-shadow: 0 5px 0 var(--action-shadow); }
/* Insel: unregelmäßige Form im Wasser */
.kid-adventure .tt-station { border-radius: 46% 54% 50% 50% / 58% 55% 45% 42%; box-shadow: 0 5px 0 var(--tt-st-shadow), 0 0 0 9px var(--tt-sea); }
.kid-adventure .tt-station.done { box-shadow: 0 5px 0 var(--tt-done-line), 0 0 0 9px var(--tt-sea); }
.kid-adventure .tt-station.next { box-shadow: 0 5px 0 var(--action-shadow), 0 0 0 9px var(--tt-sea); }
.kid-adventure .tt-station::after { content: ""; position: absolute; top: -6px; right: 10px; width: 14px; height: 14px; border-radius: 50% 50% 50% 0; background: var(--tt-deco); transform: rotate(-20deg); }
/* Planet: mit Ring */
.kid-space .tt-station::after { content: ""; position: absolute; z-index: -1; left: -16px; right: -16px; top: 38%; height: 22%; border: 3px solid var(--tt-deco); border-radius: 50%; transform: rotate(-16deg); pointer-events: none; }
/* Wolkenschloss: Wolke mit Türmchen */
.kid-unicorn .tt-station { border-radius: 40px; width: 92px; height: 74px; }
.kid-unicorn .tt-station::before { content: ""; position: absolute; top: -18px; left: 50%; width: 22px; height: 20px; margin-left: -11px; border-radius: 6px 6px 0 0; background: var(--tt-deco); }
.kid-unicorn .tt-station::after { content: ""; position: absolute; top: -30px; left: 50%; margin-left: -12px; border: 12px solid transparent; border-bottom: 13px solid var(--tt-st-line); border-top: 0; }
.tt-stop-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tt-stop-text strong { color: var(--head); font-family: var(--font-head); font-size: 18px; font-weight: var(--head-weight); }
.tt-stars { display: inline-flex; gap: 2px; color: var(--tt-star-off); }
.tt-stars .on { color: var(--tt-star); }
.tt-stars svg { fill: currentColor; }
.tt-stop:nth-of-type(even) .tt-stars { justify-content: flex-end; }

/* ---- Runde: Aufgabe, Antwortfeld und großes Zahlenfeld ---- */
.tt-answer {
    min-width: 120px; min-height: 64px; padding: 6px 18px; display: grid; place-items: center; border-radius: 18px;
    background: var(--surface-2); border: 2px dashed var(--option-line, var(--line));
    color: var(--head); font-family: var(--font-head); font-size: 40px; font-weight: var(--head-weight);
}
.tt-answer.filled { border-style: solid; }
.numpad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.numpad .option { min-height: 60px; font-size: 28px; }
.numpad .option.ok { background: var(--primary); border-color: var(--primary-dark); color: var(--primary-ink); box-shadow: 0 4px 0 var(--primary-dark); }
.numpad .option:disabled { opacity: .55; }
.tt-swap { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 18px; background: var(--card-sun); border: 2px solid var(--card-sun-line); color: var(--sun-ink); font-weight: 700; }

/* ---- Raster der Eltern: 10 × 10, sitzt (grün), wackelt (gelb), noch nicht geübt (grau) ---- */
.tt-grid { display: grid; grid-template-columns: 34px repeat(10, minmax(0, 1fr)); gap: 3px; }
.tt-grid .h { display: grid; place-items: center; color: var(--muted); font-size: 11px; font-weight: 800; }
.tt-cell { display: grid; place-items: center; aspect-ratio: 1; border-radius: 6px; font-size: 11px; font-weight: 700;
    background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.tt-cell.learned { background: var(--ok-bg); color: var(--ok-ink); border-color: var(--ok-line, var(--ok-bg)); }
.tt-cell.wobbly { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-line, var(--warn-bg)); }
.tt-legend { display: flex; flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: 13px; font-weight: 600; }
.tt-legend span { display: inline-flex; align-items: center; gap: 6px; }
.tt-legend i { width: 14px; height: 14px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--line); }
.tt-legend i.learned { background: var(--ok-bg); border-color: var(--ok-line, var(--ok-bg)); }
.tt-legend i.wobbly { background: var(--warn-bg); border-color: var(--warn-line, var(--warn-bg)); }