/* Frischer Look (Design-Studie). Münz-Metapher beibehalten, aber helle,
   türkis getönte Oberfläche mit Gold als Geld-Held, runde griffige Karten,
   geschichtete Schatten. Licht-zuerst mit Dunkelmodus.

   WICHTIG: Alle Klassennamen und alle Variablennamen bleiben erhalten —
   die Ansichten setzen var(--ink), var(--cream), var(--gold), var(--goldhi),
   var(--line), var(--mint), var(--body) direkt inline. Rollen der Variablen:
   --ink = Seiten-GRUND, --cream = HAUPTTEXT, --panel/--panel2 = Kartenflächen,
   --muted = Sekundärtext, --line = Ränder, --gold/--goldhi/--golddk = Geld,
   --mint = Leitakzent, --berry = verspielter/negativer Akzent,
   --slate/--slatedk = Neutraltöne. Neue Variablen sind ergänzt, keine
   bestehende umbenannt oder entfernt. */

/* ---- HELLES Token-Set (Vorgabe) ---- */
:root{
  --ink:#E7F2EF;        /* Seiten-GRUND, hell, leicht türkis getönt */
  --panel:#FFFFFF;      /* Kartenfläche */
  --panel2:#F1FAF7;     /* zweite, sehr helle Fläche */
  --line:#D6E7E2;       /* Ränder */
  --cream:#10302B;      /* HAUPTTEXT auf dem Grund (dunkel) */
  --muted:#4F6D67;      /* Sekundärtext, ≥4,5:1 auf --ink und --panel/--panel2 */

  --gold:#E7A11D;       /* Gold = Geld */
  --goldhi:#F7D888;     /* heller Gold-Glanz (Münze, Suchrahmen) */
  --golddk:#A5731A;     /* dunkles Gold */
  --money:#8F660F;      /* große Geldzahl, lesbar auf heller Fläche */

  --slate:#6E858E;      /* Neutralton */
  --slatedk:#4A5F67;    /* dunkler Neutralton */

  --mint:#0FB0A1;       /* Leitfarbe, sattes Mint-Türkis */
  --mintdk:#087A6E;     /* Mint für Text/Kontrast auf hell */
  --mintsoft:#D2F1EC;   /* weiche Mint-Fläche (Chips, Avatare) */

  --berry:#F5643F;      /* warmes Koralle, verspielt/negativ */
  --berrydk:#C0431F;    /* Koralle für Text auf hell */
  --berrysoft:#FFE2DA;  /* weiche Koralle-Fläche */

  --field:#FFFFFF;      /* Eingabefeld-Grund */

  --radius:20px;
  --shadow:0 1px 2px rgba(16,48,43,.06), 0 8px 22px rgba(16,48,43,.09);
  --shadow-lg:0 2px 6px rgba(16,48,43,.08), 0 20px 42px rgba(16,48,43,.16);

  --display:ui-rounded, "SF Pro Rounded", 'Avenir Next','Futura','Trebuchet MS',system-ui,sans-serif;
  --body:'Avenir Next','Helvetica Neue',system-ui,sans-serif;
  --mono:'SF Mono',ui-monospace,Menlo,monospace;
}

/* ---- DUNKLES Token-Set: Systemvorgabe ---- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#0A1917;
    --panel:#143029;
    --panel2:#0F2621;
    --line:#254A43;
    --cream:#EAF5F1;
    --muted:#9BBBB4;

    --gold:#F3B94E;
    --goldhi:#FEDB8C;
    --golddk:#C89334;
    --money:#FED98A;

    --slate:#6E858E;
    --slatedk:#44585F;

    --mint:#2FD4C2;
    --mintdk:#83EADD;
    --mintsoft:#123E38;

    --berry:#FF8E7A;
    --berrydk:#FFB6A6;
    --berrysoft:#3B231E;

    --field:#0C201C;

    --shadow:0 1px 2px rgba(0,0,0,.32), 0 10px 26px rgba(0,0,0,.42);
    --shadow-lg:0 2px 8px rgba(0,0,0,.36), 0 22px 48px rgba(0,0,0,.52);
  }
}

/* ---- DUNKLES Token-Set: ausdrücklicher Umschalter ---- */
:root[data-theme="dark"]{
  --ink:#0A1917;
  --panel:#143029;
  --panel2:#0F2621;
  --line:#254A43;
  --cream:#EAF5F1;
  --muted:#9BBBB4;

  --gold:#F3B94E;
  --goldhi:#FEDB8C;
  --golddk:#C89334;
  --money:#FED98A;

  --slate:#6E858E;
  --slatedk:#44585F;

  --mint:#2FD4C2;
  --mintdk:#83EADD;
  --mintsoft:#123E38;

  --berry:#FF8E7A;
  --berrydk:#FFB6A6;
  --berrysoft:#3B231E;

  --field:#0C201C;

  --shadow:0 1px 2px rgba(0,0,0,.32), 0 10px 26px rgba(0,0,0,.42);
  --shadow-lg:0 2px 8px rgba(0,0,0,.36), 0 22px 48px rgba(0,0,0,.52);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; height:100%; overflow:hidden; }
body{
  background:var(--ink);
  background-image:
    radial-gradient(1100px 560px at 12% -12%, color-mix(in srgb, var(--mint) 14%, transparent), transparent 60%),
    radial-gradient(900px 480px at 100% -4%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 58%);
  color:var(--cream);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
}
button{ font-family:inherit; color:inherit; border:0; background:none; cursor:pointer; }
input,textarea{ font-family:inherit; -webkit-appearance:none; }

/* Sichtbarer Tastaturfokus für alle interaktiven Elemente (Barrierefreiheit).
   -webkit-tap-highlight-color bleibt transparent, der Fokus bleibt sichtbar. */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible,
[tabindex]:focus-visible,
.tg-btn:focus-visible, .tg-chip:focus-visible, .tg-tile:focus-visible,
.tg-key:focus-visible, .tg-emopick:focus-visible, .tg-check:focus-visible, .tg-checkrow:focus-visible{
  outline:3px solid var(--mint); outline-offset:2px; border-radius:12px;
}

.tg{ position:fixed; inset:0; display:flex; flex-direction:column; }
/* #app ist die Scroll-Zone der ganzen App. Ohne dies wird jeder Inhalt,
   der höher als der Bildschirm ist (z. B. die Registrierung), abgeschnitten,
   weil html/body auf overflow:hidden stehen.
   Sicherer-Bereich-Abstand gegen Statusleiste/Notch/Dynamic Island: als Web-App
   auf dem iPhone-Startbildschirm (standalone, viewport-fit=cover, status-bar-style
   black-translucent) zeichnet iOS den Inhalt UNTER Statusleiste und Notch —
   sonst verschwindet der obere Bereich (Kopfzeile) dahinter. Im QUERFORMAT sitzt
   die Notch seitlich, deshalb auch links/rechts abfedern, nicht nur oben.
   env() ist im normalen Browser 0, greift also nur dort, wo es nötig ist;
   box-sizing:border-box hält die Höhe bei 100%. */
#app{ display:flex; flex-direction:column; height:100%; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding-top:env(safe-area-inset-top);
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right); }

.tg-eyebrow{ display:block; font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--mintdk); }
.tg-h1{ font-family:var(--display); font-weight:800; font-size:27px; letter-spacing:-.02em; margin:0; color:var(--cream); }
.tg-h2{ font-family:var(--display); font-weight:800; font-size:17px; margin:0; letter-spacing:-.01em; color:var(--cream); }
.tg-big{ font-family:var(--display); font-weight:800; font-size:58px; line-height:.95;
  letter-spacing:-.03em; color:var(--money); font-variant-numeric:tabular-nums; }
.tg-num{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.tg-note{ font-size:13.5px; line-height:1.5; color:var(--muted); }

.tg-coin{ position:relative; flex:none; border-radius:50%; display:grid; place-items:center;
  font-family:var(--display); font-weight:800; color:#4A3305; text-align:center; line-height:1;
  background:radial-gradient(circle at 34% 28%, var(--goldhi) 0%, var(--gold) 50%, var(--golddk) 100%);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.4), inset 0 -3px 6px rgba(0,0,0,.24),
    0 3px 9px color-mix(in srgb, var(--gold) 42%, transparent); }
.tg-coin.grey{ color:#F0F5F6;
  background:radial-gradient(circle at 34% 28%, color-mix(in srgb, #FFFFFF 55%, var(--slate)) 0%, var(--slate) 52%, var(--slatedk) 100%);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.28), inset 0 -3px 6px rgba(0,0,0,.2), 0 2px 6px rgba(0,0,0,.16); }
.tg-coin.red{ color:#FFF0EC;
  background:radial-gradient(circle at 34% 28%, color-mix(in srgb, #FFFFFF 42%, var(--berry)) 0%, var(--berry) 52%, var(--berrydk) 100%);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.3), inset 0 -3px 6px rgba(0,0,0,.2), 0 2px 7px color-mix(in srgb, var(--berry) 42%, transparent); }
.tg-coin .u{ display:block; font-size:.44em; font-weight:700; opacity:.78; margin-top:.1em; }

.tg-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
/* Kinder-Karten der Elternübersicht: Handy eine Spalte, ab Tablet-Breite zwei
   nebeneinander (Anordnung „automatisch"). Der Abstand kommt aus dem Raster,
   die Karten selbst tragen dann keinen eigenen Außenabstand. */
.tg-kinder{ display:grid; grid-template-columns:1fr; gap:12px; padding:12px 16px; }
@media (min-width:680px){ .tg-kinder{ grid-template-columns:1fr 1fr; } }
.tg-tray{ background:var(--panel2); border:1px dashed color-mix(in srgb, var(--mint) 34%, var(--line)); border-radius:var(--radius); padding:12px; }
.tg-sep{ height:1px; background:var(--line); border:0; margin:10px 0; }

.tg-tile{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:14px 12px 12px;
  display:flex; flex-direction:column; align-items:flex-start; gap:8px; text-align:left; min-height:150px;
  box-shadow:var(--shadow); transition:transform .14s ease, box-shadow .14s ease, background .14s ease; width:100%; }
.tg-tile:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.tg-tile:active{ transform:scale(.965); background:color-mix(in srgb, var(--mint) 10%, var(--panel)); }
.tg-tile .ico{ font-size:34px; line-height:1; }
.tg-tile .ttl{ font-family:var(--display); font-weight:800; font-size:15px; line-height:1.25; color:var(--cream); }
.tg-tile.done{ opacity:.5;
  background:linear-gradient(180deg, color-mix(in srgb, var(--gold) 12%, var(--panel)), var(--panel));
  border-color:color-mix(in srgb, var(--gold) 34%, var(--line)); }

.tg-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:14px;
  font-family:var(--display); font-weight:700; font-size:15px; padding:13px 18px; min-height:44px;
  background:var(--panel); border:1px solid var(--line); color:var(--cream); box-shadow:var(--shadow);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease; }
.tg-btn:hover{ box-shadow:var(--shadow-lg); }
.tg-btn:active{ transform:scale(.97); }
.tg-btn.gold{ background:linear-gradient(180deg, var(--gold), var(--golddk)); border-color:transparent; color:#3A2A05;
  box-shadow:0 6px 15px color-mix(in srgb, var(--gold) 42%, transparent); }
.tg-btn.mint{ background:var(--mint); border-color:transparent; color:#04322D;
  box-shadow:0 6px 15px color-mix(in srgb, var(--mint) 40%, transparent); }
.tg-btn.berry{ background:transparent; border-color:var(--berry); color:var(--berrydk); box-shadow:none; }
.tg-btn.ghost{ background:transparent; box-shadow:none; }
.tg-btn.wide{ width:100%; }
.tg-btn[disabled]{ opacity:.4; box-shadow:none; }
.tg-chip{ display:inline-flex; align-items:center; justify-content:center; min-height:44px;
  font-family:var(--display); font-weight:700; font-size:12.5px; padding:0 15px; border-radius:999px;
  background:var(--panel); border:1px solid var(--line); color:var(--cream); }
.tg-chip.on{ background:var(--mint); color:#04322D; border-color:var(--mint);
  box-shadow:0 5px 14px color-mix(in srgb, var(--mint) 38%, transparent); }
/* Zähler-Blase am Reiter (offene Freigaben, ungelesene Post). Sitzt rechts
   neben dem Text im selben Chip. */
.tg-badge{ display:inline-grid; place-items:center; min-width:20px; height:20px; margin-left:7px;
  padding:0 6px; border-radius:999px; font-family:var(--display); font-weight:800; font-size:11px;
  line-height:1; background:var(--berry); color:#FFF0EC; }
.tg-chip.on .tg-badge{ background:#04322D; color:var(--mint); }

/* Antippbare „Heute"-Zeile in der Kinderansicht: sieht aus wie eine Zeile,
   verhält sich wie ein großer Knopf (Kinderfinger, mind. 44px). */
.k-tap{ display:flex; align-items:center; gap:12px; width:100%; min-height:52px; padding:8px 6px;
  background:transparent; border:none; border-radius:12px; text-align:left; color:inherit;
  font:inherit; cursor:pointer; }
.k-tap:active{ background:var(--panel2); }
.k-tap:disabled{ opacity:.55; }


.tg-back{ position:fixed; inset:0; background:rgba(6,22,20,.62); display:flex; align-items:flex-end;
  justify-content:center; z-index:40; }
@keyframes tg-up{ from{ transform:translateY(28px); opacity:0 } to{ transform:none; opacity:1 } }
.tg-sheet{ width:100%; max-width:640px; max-height:92%; overflow-y:auto; background:var(--panel);
  border:1px solid var(--line); border-bottom:0; border-radius:24px 24px 0 0;
  padding:18px 18px calc(32px + env(safe-area-inset-bottom)); box-shadow:var(--shadow-lg);
  animation:tg-up .22s ease both; }
.tg-grab{ width:44px; height:4px; border-radius:4px; background:var(--line); margin:0 auto 14px; }

.tg-in{ width:100%; background:var(--field); border:1px solid var(--line); border-radius:12px;
  padding:12px 13px; font-size:16px; color:var(--cream); }
.tg-in:focus{ outline:3px solid var(--mint); outline-offset:2px; border-color:var(--mint); }
.tg-lbl{ display:block; font-family:var(--display); font-size:12px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); margin:14px 0 6px; }

/* Zustimmungsfeld: das ganze Feld ist antippbar, das Kaestchen deutlich
   sichtbar (gefuellt golden mit Haken). Bewusst eigenes Kaestchen statt des
   System-Kaestchens, das auf hellem Grund kaum zu sehen war. */
.tg-checkrow{ display:flex; gap:12px; align-items:center; margin-top:14px;
  padding:12px 14px; background:var(--panel2); border:1px solid var(--line);
  border-radius:14px; cursor:pointer; }
.tg-checkrow:hover{ border-color:var(--mint); }
.tg-check{ appearance:none; -webkit-appearance:none; flex:none; width:26px; height:26px;
  border:2px solid var(--muted); border-radius:8px; background:var(--field);
  display:grid; place-content:center; cursor:pointer; }
.tg-check:checked{ background:var(--gold); border-color:var(--golddk); }
.tg-check:checked::after{ content:""; width:6px; height:11px; margin-top:-2px;
  border:solid #3A2A05; border-width:0 3px 3px 0; transform:rotate(45deg); }

.tg-key{ aspect-ratio:1.35; min-height:44px; border-radius:16px; background:var(--panel); border:1px solid var(--line);
  color:var(--cream); font-family:var(--display); font-size:24px; font-weight:700; box-shadow:var(--shadow);
  transition:transform .1s ease, background .1s ease; }
.tg-key:active{ transform:scale(.96); background:color-mix(in srgb, var(--mint) 14%, var(--panel)); }
.tg-dot{ width:13px; height:13px; border-radius:50%; border:2px solid var(--line); }
.tg-dot.f{ background:var(--gold); border-color:var(--gold); }


.tg-empty{ text-align:center; padding:44px 20px; color:var(--muted); font-size:14px; line-height:1.6; }
.tg-warn{ background:color-mix(in srgb, var(--berry) 14%, var(--panel)); border:1px solid var(--berry);
  border-radius:14px; padding:11px 13px; font-size:13px; line-height:1.5; margin-bottom:16px; color:var(--cream); }
.tg-emopick{ font-size:22px; width:44px; height:44px; border-radius:12px; border:1px solid var(--line);
  background:var(--panel); color:var(--cream); }
.tg-emopick.on{ border-color:var(--gold); background:color-mix(in srgb, var(--gold) 16%, var(--panel)); }

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

/* ---- Profil & Kartendruck (Schritt 6B/7) ---- */
/* Bewusst feste Farben: die Druckseite bleibt weiß mit schwarzem Text,
   unabhängig vom Modus (Scheckkarten zum Laminieren, QR als SVG). */
.druck-back{ position:fixed; inset:0; background:#fff; color:#111; z-index:100; overflow:auto; padding:16px; }
.druck-bar{ display:flex; gap:8px; justify-content:flex-end; margin-bottom:14px; }
.druck-blatt{ display:grid; grid-template-columns:1fr 1fr; gap:8mm; max-width:200mm; margin:0 auto; }
.druck-karte{ width:85.6mm; height:53.98mm; border:1px solid #bbb; border-radius:3mm;
  padding:5mm; display:flex; align-items:center; gap:4mm; break-inside:avoid; background:#fff; }
.druck-karte .qr{ width:40mm; height:40mm; flex:none; }
.druck-karte .qr svg{ width:100%; height:100%; display:block; }
.druck-who{ min-width:0; }
.druck-emoji{ font-size:28pt; line-height:1; }
.druck-name{ font-family:var(--display); font-size:20pt; font-weight:700; color:#111; margin-top:2mm; }
.druck-fuss{ font-size:8pt; color:#666; margin-top:2mm; }
@media print {
  /* Der dunkle App-Hintergrund darf NICHT mitgedruckt werden — sonst füllt er
     die Seite unter der (nur inhaltshohen) weißen Druckfläche als schwarze
     Fläche und verschwendet Tinte. Im Druck alles auf Weiß zwingen. */
  html, body{ background:#fff !important; background-image:none !important;
    color:#111 !important; height:auto !important; overflow:visible !important; }
  .druck-bar{ display:none; }
  .druck-back{ position:static; padding:0; background:#fff !important; }
  body > *:not(.druck-back){ display:none !important; }
}