/* Bewusst einfarbige Welt: dunkel, Neon, CRT. Kein heller Modus. */
:root{
  --grund:#07030F; --panel:#05020C;
  --cyan:#22E8F5; --cyan-hell:#9BF7FF;
  --magenta:#FF2D78; --magenta-hell:#FFA3C8;
  --acid:#CCFF33; --acid-hell:#E8FF9B; --violett:#7A3FD6;
  --text:#CFC7EC; --nebel:#8B7BB8;
  --linie:rgba(122,63,214,.38);
  --zahl:"Tourney","Chakra Petch",system-ui,sans-serif;
  --ui:"Chakra Petch","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}

/* MUSS ganz oben stehen und MUSS !important tragen.
   Der Browser bringt [hidden]{display:none} nur in seinem eigenen Stilblatt
   mit, und JEDE Autorenregel schlaegt den. ".blatt{display:flex}" reichte:
   damit waren alle Reiter gleichzeitig sichtbar, die Seite war so lang wie
   vorher und die Reiterknoepfe schienen nichts zu tun. Der Fehler sass seit
   dem ersten Reiterpaar drin und fiel erst bei fuenf auf. */
[hidden]{display:none !important}
body{
  background:
    radial-gradient(900px 520px at 50% -8%, rgba(122,63,214,.24), transparent 62%),
    radial-gradient(700px 420px at 92% 108%, rgba(255,45,120,.13), transparent 60%),
    var(--grund);
  background-attachment:fixed;
  color:var(--text); font-family:var(--ui); font-size:15px; line-height:1.55;
  margin:0; padding:0 16px; padding-block:18px 64px; -webkit-font-smoothing:antialiased;
}
.bahn{max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:14px}

.leiste{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:12px;
  letter-spacing:.24em; text-transform:uppercase; font-weight:600;
  border-bottom:1px solid var(--linie); padding-bottom:9px; color:var(--nebel)}
.leiste .marke{font-family:var(--zahl); font-weight:800; font-size:17px; letter-spacing:.3em;
  color:var(--cyan-hell); text-shadow:0 0 10px rgba(34,232,245,.65)}
.leiste .trenn{color:var(--violett)}
.leiste .wer{color:var(--magenta-hell)}
.leiste .zustand{margin-left:auto; color:var(--acid); display:inline-flex; align-items:center; gap:6px}
.kasten{width:8px; height:11px; background:var(--acid); box-shadow:0 0 8px var(--acid)}
@media (prefers-reduced-motion:no-preference){ .kasten{animation:blink 1.15s steps(1) infinite} }
@keyframes blink{50%{opacity:0}}

.roehre{position:relative; background:var(--panel); overflow:hidden;
  border:1px solid rgba(34,232,245,.28);
  box-shadow:0 0 34px rgba(34,232,245,.10), inset 0 0 70px rgba(122,63,214,.20)}
.roehre.haupt{padding:22px 14px 14px}
.roehre.neben{padding:14px 14px 12px}
.roehre.gruen{border-color:rgba(204,255,51,.3); box-shadow:0 0 26px rgba(204,255,51,.07), inset 0 0 60px rgba(122,63,214,.18)}
.ecke{position:absolute; width:14px; height:14px; pointer-events:none; border:2px solid var(--magenta); opacity:.85}
.ecke.lo{top:6px; left:6px; border-right:0; border-bottom:0}
.ecke.ro{top:6px; right:6px; border-left:0; border-bottom:0}
.ecke.lu{bottom:6px; left:6px; border-right:0; border-top:0}
.ecke.ru{bottom:6px; right:6px; border-left:0; border-top:0}
.roehre.gruen .ecke{border-color:var(--acid); opacity:.7}
.scan{position:absolute; inset:0; pointer-events:none; z-index:3;
  background:repeating-linear-gradient(180deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.34) 2px 4px)}

.kopfreihe{position:relative; z-index:4; display:flex; justify-content:space-between; gap:8px;
  flex-wrap:wrap; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--nebel); margin-bottom:9px; padding:0 4px}
.kopfreihe .stark{color:var(--cyan); font-weight:600}
.roehre.gruen .kopfreihe .stark{color:var(--acid)}

.werk{position:relative; z-index:4; display:flex; align-items:stretch; justify-content:center;
  gap:2px; flex-wrap:nowrap}
.sig{font-family:var(--zahl); font-weight:800; align-self:center; line-height:1}
.werk.gr .sig.eur{font-size:clamp(20px,5.4vw,34px)}
.werk.kl .sig.eur{font-size:clamp(14px,3.4vw,21px)}
.sig.eur{color:var(--violett); margin-right:6px; text-shadow:0 0 12px rgba(122,63,214,.8)}
.sig.neg{color:var(--magenta); margin-right:3px; font-size:clamp(20px,5vw,34px)}
.sig.komma{align-self:flex-end; padding:0 3px 5px; color:var(--cyan); text-shadow:0 0 12px var(--cyan)}
.werk.gr .sig.komma{font-size:clamp(34px,9vw,62px)}
.werk.kl .sig.komma{font-size:clamp(20px,5.2vw,36px); padding-bottom:3px}
.werk.gruen .sig.komma{color:var(--acid); text-shadow:0 0 12px var(--acid)}

.zelle{position:relative; display:flex; align-items:center; justify-content:center;
  font-family:var(--zahl); font-weight:800; font-variant-numeric:tabular-nums; line-height:1}
.zelle .geist{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--cyan); opacity:.07}
.zelle .an{position:relative}
.werk.gr .zelle.gross{font-size:clamp(40px,12vw,78px); width:clamp(27px,8.2vw,53px)}
.werk.gr .zelle.klein{font-size:clamp(18px,4.8vw,31px); width:clamp(15px,4.2vw,26px)}
.werk.kl .zelle.gross{font-size:clamp(24px,6.6vw,44px); width:clamp(17px,4.6vw,30px)}
.werk.kl .zelle.klein{font-size:clamp(13px,3.2vw,20px); width:clamp(11px,2.8vw,17px)}
.zelle.gross .an{color:var(--cyan-hell);
  text-shadow:1px 0 rgba(255,45,120,.55), -1px 0 rgba(34,232,245,.55),
              0 0 6px var(--cyan), 0 0 22px rgba(34,232,245,.55)}
.werk.gruen .zelle .geist{color:var(--acid); opacity:.07}
.werk.gruen .zelle.gross .an{color:var(--acid-hell);
  text-shadow:-1px 0 rgba(204,255,51,.5), 0 0 6px var(--acid), 0 0 20px rgba(204,255,51,.5)}
.zelle.klein .geist{color:var(--magenta); opacity:.09}
.zelle.klein .an{color:var(--magenta-hell); text-shadow:0 0 5px var(--magenta), 0 0 18px rgba(255,45,120,.55)}
.rast{display:flex; gap:1px; align-items:flex-end; margin-left:6px}
.werk.gr .rast{padding-bottom:7px} .werk.kl .rast{padding-bottom:4px}
.roehre.puls .zelle.gross .an{text-shadow:0 0 8px var(--acid), 0 0 30px var(--acid), 0 0 60px rgba(204,255,51,.5)}

.fussreihe{position:relative; z-index:4; display:flex; justify-content:space-between; align-items:center;
  gap:10px; flex-wrap:wrap; margin-top:13px; padding:10px 4px 0;
  border-top:1px solid rgba(34,232,245,.16); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--nebel)}

.hud{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px}
.modul{position:relative; background:linear-gradient(180deg,rgba(122,63,214,.10),rgba(7,3,15,.6));
  border:1px solid var(--linie); padding:12px 14px 13px; display:flex; flex-direction:column; gap:3px}
.modul::before,.modul::after{content:""; position:absolute; width:9px; height:9px; border:1px solid var(--cyan); opacity:.75}
.modul::before{top:-1px; left:-1px; border-right:0; border-bottom:0}
.modul::after{bottom:-1px; right:-1px; border-left:0; border-top:0}
.modul .marke{font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--nebel); font-weight:600}
.modul .wert{font-family:var(--zahl); font-weight:800; font-size:25px; color:var(--cyan-hell);
  font-variant-numeric:tabular-nums; text-shadow:0 0 12px rgba(34,232,245,.45); line-height:1.15}
.modul .neben{font-size:12px; color:var(--nebel)}

.balken{height:9px; background:rgba(34,232,245,.10); position:relative; margin-top:7px; overflow:hidden}
.balken i{display:block; height:100%; background:linear-gradient(90deg,var(--acid),var(--cyan));
  box-shadow:0 0 12px rgba(204,255,51,.5); transition:width .6s ease}
.balken::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(90deg, transparent 0 5px, var(--panel) 5px 7px)}

.ziel{position:relative; border:1px solid rgba(204,255,51,.35); padding:14px 16px 16px;
  background:linear-gradient(180deg,rgba(204,255,51,.07),rgba(7,3,15,.55));
  display:flex; flex-direction:column; gap:7px}
.ziel.geschafft{border-color:var(--acid); box-shadow:0 0 40px rgba(204,255,51,.35)}
.ziel .marke{font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--acid); font-weight:600}
.ziel .kopf{display:flex; justify-content:space-between; gap:12px; align-items:baseline; flex-wrap:wrap}
.ziel .name{font-family:var(--zahl); font-weight:800; font-size:23px; letter-spacing:.04em;
  color:#FFF; text-shadow:0 0 16px rgba(204,255,51,.6)}
.ziel .preis{font-family:var(--zahl); font-weight:600; font-size:18px; color:var(--acid-hell);
  font-variant-numeric:tabular-nums}
.ziel .wann{font-size:13.5px}
.ziel .wann b{color:var(--acid); font-variant-numeric:tabular-nums; font-weight:700}
.jubel{font-family:var(--zahl); font-weight:800; font-size:clamp(22px,6vw,38px); letter-spacing:.14em;
  color:var(--acid); text-shadow:0 0 22px var(--acid); text-transform:uppercase}
.mut{font-size:13.5px; color:var(--acid-hell)}

.buch > .marke{font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--nebel);
  font-weight:600; margin-bottom:8px; display:block}
.log{list-style:none; margin:0; padding:0; font-size:13.5px}
.log li{display:flex; align-items:baseline; padding:7px 2px; border-bottom:1px solid rgba(122,63,214,.16)}
.log time{font-family:var(--zahl); font-weight:600; font-size:12.5px; color:var(--violett);
  font-variant-numeric:tabular-nums; letter-spacing:.06em; white-space:nowrap}
.log .topf{font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  margin-left:10px; padding:1px 6px; border:1px solid currentColor; white-space:nowrap; opacity:.85}
.log .topf.s{color:var(--cyan)} .log .topf.k{color:var(--acid)} .log .topf.t{color:var(--magenta-hell)}
.log .txt{margin-left:9px; color:var(--nebel); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.log .fuell{flex:1 1 14px; min-width:14px; border-bottom:1px dotted rgba(122,63,214,.5);
  transform:translateY(-4px); margin:0 9px}
.log .betr{font-family:var(--zahl); font-weight:800; font-size:15px; font-variant-numeric:tabular-nums; white-space:nowrap}
.log .p{color:var(--acid)} .log .m{color:var(--magenta)} .log .n{color:var(--violett)}

#feuerwerk{position:fixed; inset:0; pointer-events:none; z-index:50}

/* ---- Eltern-Dashboard: Arbeitsflaeche, keine Schauseite ---- */
.block{border:1px solid var(--linie); padding:12px 14px 14px; background:rgba(12,6,32,.5)}
.block > .marke{font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--cyan);
  font-weight:700; display:block; margin-bottom:10px}
.reihe{display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end}
label{display:flex; flex-direction:column; gap:4px; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--nebel); font-weight:600; flex:1 1 120px}
input, select{font-family:var(--zahl); font-weight:600; font-size:16px; font-variant-numeric:tabular-nums;
  padding:8px 10px; border:1px solid var(--linie); background:#04010A; color:var(--cyan-hell);
  width:100%; min-width:0; letter-spacing:.04em}
input::placeholder{color:rgba(139,123,184,.55)}
input:focus-visible, select:focus-visible{outline:1px solid var(--cyan); box-shadow:0 0 14px rgba(34,232,245,.3)}
button.tat{font-family:var(--ui); font-weight:700; font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; padding:9px 14px; border:1px solid var(--cyan); background:transparent;
  color:var(--cyan-hell); cursor:pointer; white-space:nowrap}
button.tat:hover{background:var(--cyan); color:#04121A; box-shadow:0 0 16px rgba(34,232,245,.55)}
button.tat.gruen{border-color:var(--acid); color:var(--acid-hell)}
button.tat.gruen:hover{background:var(--acid); color:#0B1200}
button.tat.warn{border-color:var(--magenta); color:var(--magenta-hell)}
button.tat.warn:hover{background:var(--magenta); color:#12000A}
.notiz{font-size:12px; color:var(--nebel); margin:10px 0 0}

.staende{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px}
.stand{border:1px solid var(--linie); padding:11px 13px; background:linear-gradient(180deg,rgba(122,63,214,.10),rgba(7,3,15,.6))}
.stand .marke{font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--nebel); font-weight:600}
.stand .wert{font-family:var(--zahl); font-weight:800; font-size:27px; font-variant-numeric:tabular-nums;
  color:var(--cyan-hell); text-shadow:0 0 12px rgba(34,232,245,.4)}
.stand.k .wert{color:var(--acid-hell); text-shadow:0 0 12px rgba(204,255,51,.4)}
.stand.t .wert{color:var(--magenta-hell); text-shadow:0 0 12px rgba(255,45,120,.4)}
.stand .neben{font-size:11.5px; color:var(--nebel)}

.meldung{border-left:3px solid var(--acid); background:rgba(204,255,51,.09); padding:9px 13px;
  font-size:13.5px; color:var(--acid-hell)}
.meldung.schlecht{border-left-color:var(--magenta); background:rgba(255,45,120,.10); color:var(--magenta-hell)}

table.zins{width:100%; border-collapse:collapse; font-size:13.5px}
table.zins td{padding:5px 2px; border-bottom:1px solid rgba(122,63,214,.16)}
table.zins td:last-child{text-align:right; font-family:var(--zahl); font-weight:700;
  font-variant-numeric:tabular-nums; color:var(--acid)}
table.zins tr.summe td{border-bottom:0; border-top:1px solid var(--linie); padding-top:8px; font-weight:700}
table.zins td.klein{padding-left:16px; color:var(--nebel)}

.antrag{border:1px solid rgba(255,45,120,.4); background:rgba(255,45,120,.07); padding:11px 13px;
  display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:8px}
.antrag .was{flex:1 1 auto; min-width:160px}
.antrag .was b{color:var(--magenta-hell)}
.antrag .frist{font-size:12px; color:var(--nebel)}
.antrag form{display:inline}

.kopfzeile{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.kopfzeile a{color:var(--cyan); font-size:12px; letter-spacing:.1em}
.linkfeld{font-family:var(--zahl); font-size:12px; color:var(--nebel); word-break:break-all}

/* ---- Zinszeile je Roehre: laeuft eigenstaendig hoch ----
   Deutlich als Zinsen beschriftet und durchweg positiv gehalten: die Zeile
   soll als Geschenk gelesen werden, nicht als Fussnote. */
.zinsreihe{position:relative; z-index:4; display:flex; align-items:center; gap:10px;
  flex-wrap:wrap; margin-top:12px; padding:9px 4px 0;
  border-top:1px solid rgba(204,255,51,.18)}
.zinsmarke{font-size:10px; letter-spacing:.2em; text-transform:uppercase; font-weight:700;
  color:var(--acid); border:1px solid var(--acid); padding:2px 8px; white-space:nowrap;
  box-shadow:0 0 10px rgba(204,255,51,.25)}
.zinswert{font-family:var(--zahl); font-weight:800; font-variant-numeric:tabular-nums;
  font-size:clamp(15px,4vw,21px); letter-spacing:.03em;
  color:var(--acid); text-shadow:0 0 10px rgba(204,255,51,.6)}
.zinswann{margin-left:auto; font-size:11px; color:var(--acid-hell); opacity:.85;
  text-align:right}
@media (max-width:420px){
  .zinswann{margin-left:0; width:100%; text-align:left}
}

/* ---- Der Countdown zum Ziel: rast rueckwaerts gegen null ----
   Ein Zaehler, der auf null zulaeuft, zieht staerker als ein Balken, der
   langsam voller wird -- gerade dann, wenn das Ziel weit weg ist. */
.restreihe{display:flex; flex-direction:column; gap:4px; align-items:center;
  padding:8px 0 2px}
.restmarke{font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--acid); font-weight:700; opacity:.85}
.werk.zurueck .zelle .geist{color:var(--acid); opacity:.07}
.werk.zurueck .zelle.gross .an{color:var(--acid-hell);
  text-shadow:-1px 0 rgba(204,255,51,.5), 0 0 6px var(--acid), 0 0 22px rgba(204,255,51,.55)}
.werk.zurueck .sig.komma, .werk.zurueck .sig.eur{color:var(--acid); text-shadow:0 0 12px var(--acid)}
.werk.zurueck.rosa .zelle .geist{color:var(--magenta)}
.werk.zurueck.rosa .zelle.gross .an{color:#FFF;
  text-shadow:-1px 0 rgba(255,45,120,.6), 0 0 6px var(--magenta), 0 0 22px rgba(255,45,120,.55)}
.werk.zurueck.rosa .sig.komma, .werk.zurueck.rosa .sig.eur{color:var(--magenta);
  text-shadow:0 0 12px var(--magenta)}
.ziel.gross{border-color:rgba(255,45,120,.4);
  background:linear-gradient(180deg,rgba(255,45,120,.08),rgba(7,3,15,.55))}
.ziel.gross .marke{color:var(--magenta-hell)}
.ziel.gross .preis{color:var(--magenta-hell)}
.ziel.gross .balken i{background:linear-gradient(90deg,var(--magenta),var(--acid))}
.ziel.gross .wann b{color:var(--magenta-hell)}

/* ---- Naechster Geldsprung und Durchhalte-Serie ---- */
.sprungreihe{position:relative; z-index:4; display:flex; justify-content:space-between;
  align-items:center; gap:10px; flex-wrap:wrap; margin:-2px 4px 10px}
.sprungmarke{font-size:11px; letter-spacing:.1em; color:var(--magenta-hell)}
.seriemarke{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--acid); opacity:.9}
.waehrung{font-size:13.5px; color:var(--acid-hell); opacity:.9}
.waehrung b{font-family:var(--zahl); font-weight:800; color:var(--acid)}

/* ---- Der zurueckgelegte Weg ----
   Ein Ziel in einem Jahr kommt gefuehlt nie naeher; der Weg hinter einem wird
   dagegen nie kuerzer. Deshalb steht er als eigene Karte da und nicht als
   Fussnote unter dem Fortschrittsbalken. */
.weg{border:1px solid var(--linie); border-left:3px solid var(--cyan);
  background:linear-gradient(180deg,rgba(34,232,245,.07),rgba(7,3,15,.55));
  padding:13px 16px 15px; display:flex; flex-direction:column; gap:8px}
.weg > .marke{font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--cyan); font-weight:600}
.wegzeile{font-size:14px; line-height:1.6}
.wegzeile .topfname{font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--nebel); font-weight:700; display:block}
.wegzeile b{font-family:var(--zahl); font-weight:800; font-variant-numeric:tabular-nums;
  color:var(--cyan-hell)}
.wegzeile .plus{color:var(--acid); text-shadow:0 0 10px rgba(204,255,51,.5)}

/* ---- Etappen: das Ziel in Vierteln ----
   Ein Ziel in einem Jahr ist kein Ziel, sondern ein Gefuehl von Nie. In vier
   Stuecke zerlegt sind es vier Ereignisse in Reichweite -- jedes mit eigenem
   Feuerwerk. */
.balken.mitmarken{overflow:visible}
.balken.mitmarken u{position:absolute; top:-3px; bottom:-3px; width:2px;
  background:var(--panel); box-shadow:0 0 0 1px rgba(122,63,214,.55); z-index:2}
.balken.mitmarken u.marke1{left:25%}
.balken.mitmarken u.marke2{left:50%}
.balken.mitmarken u.marke3{left:75%}
.etappen{display:flex; gap:5px; align-items:center; margin-top:9px; flex-wrap:wrap}
.etappen .stueck{width:26px; height:6px; background:rgba(204,255,51,.14);
  box-shadow:inset 0 0 0 1px rgba(204,255,51,.25)}
.etappen .stueck.voll{background:var(--acid); box-shadow:0 0 10px rgba(204,255,51,.7)}
.etappen .wort{font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--acid); margin-left:6px; font-weight:600}
.etappen .wort.blass{color:var(--nebel); font-weight:400; letter-spacing:.06em;
  text-transform:none}

/* ---- Das Bild vom Ziel: sanft dahinter, nicht davor ----
   Es soll den Gegenstand ahnen lassen, nicht die Zahlen ueberdecken. Deshalb
   liegt es gedaempft im Hintergrund der Karte und wird klarer, je naeher das
   Ziel kommt -- die Deutlichkeit selbst ist die Fortschrittsanzeige. */
.ziel{overflow:hidden}
.ziel .bild{position:absolute; inset:0; z-index:0; pointer-events:none;
  background-size:cover; background-position:center;
  opacity:.10; filter:saturate(.5) contrast(.9);
  transition:opacity 1.2s ease, filter 1.2s ease;
  mask-image:linear-gradient(90deg, rgba(0,0,0,.15), rgba(0,0,0,.85));
  -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,.15), rgba(0,0,0,.85))}
.ziel.geschafft .bild{opacity:.42; filter:saturate(1) contrast(1)}
.ziel > *:not(.bild){position:relative; z-index:1}

/* ---- Reiter ----
   Das Kassenbuch ist Nachschlagewerk, kein Schauplatz. Auf einem eigenen
   Reiter bleibt die Zaehlerseite frei fuer das, was Bewegung hat. */
.reiter{display:flex; gap:0; border-bottom:1px solid var(--linie)}
.reiterknopf{font-family:var(--ui); font-weight:700; font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; padding:10px 18px; cursor:pointer;
  background:transparent; border:0; border-bottom:2px solid transparent;
  color:var(--nebel); margin-bottom:-1px}
.reiterknopf:hover{color:var(--cyan-hell)}
.reiterknopf[aria-selected="true"]{color:var(--cyan-hell); border-bottom-color:var(--cyan);
  text-shadow:0 0 10px rgba(34,232,245,.5)}
.reiterknopf:focus-visible{outline:2px solid var(--acid); outline-offset:-2px}
.blatt{display:flex; flex-direction:column; gap:14px}

/* ---- Woher das Geld kam ----
   Nicht als vierter Topf: "verdient" ist keine Lage des Geldes, sondern seine
   Herkunft. Die Frage dahinter lautet "wieviel davon habe ich selbst
   erarbeitet", und die beantwortet das Kassenbuch. */
.herkunft{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px}
.herkunft .karte{border:1px solid var(--linie); padding:11px 13px;
  background:linear-gradient(180deg,rgba(122,63,214,.10),rgba(7,3,15,.6))}
.herkunft .karte .marke{font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--nebel); font-weight:600; display:block}
.herkunft .karte .wert{font-family:var(--zahl); font-weight:800; font-size:23px;
  font-variant-numeric:tabular-nums}
.herkunft .karte.verdient .wert{color:var(--acid); text-shadow:0 0 12px rgba(204,255,51,.45)}
.herkunft .karte.geschenkt .wert{color:var(--magenta-hell)}
.herkunft .karte.taschengeld .wert{color:var(--cyan-hell)}
.herkunft .karte .neben{font-size:11.5px; color:var(--nebel)}

/* ---- Kleine Formulare auf der Kind-Seite ---- */
.minifrm{display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end;
  margin-top:12px; padding-top:12px; border-top:1px solid rgba(204,255,51,.14)}
.minifrm label{flex:1 1 130px}
.meldung{border-left:3px solid var(--acid); background:rgba(204,255,51,.10);
  padding:10px 14px; font-size:14px; color:var(--acid-hell)}
.meldung.schlecht{border-left-color:var(--magenta); background:rgba(255,45,120,.10);
  color:var(--magenta-hell)}
.nochmal{position:fixed; right:14px; bottom:14px; z-index:30;
  font-family:var(--ui); font-weight:600; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; padding:8px 14px; cursor:pointer;
  border:1px solid var(--linie); background:rgba(12,6,32,.9); color:var(--nebel)}
.nochmal:hover{color:var(--cyan-hell); border-color:var(--cyan)}

/* ---- Die Einfuehrung ----
   Ein Loch im Dunkeln statt einer Umrandung: das Auge geht dahin, wo es hell
   ist, ohne dass man es mit Pfeilen hinschieben muss. Der hervorgehobene
   Bereich bleibt bedienbar, alles andere faengt der Blocker ab. */
#fuehrung{position:fixed; inset:0; z-index:100}
.f-blocker{position:absolute; inset:0}
.f-loch{position:absolute; border-radius:4px; pointer-events:none;
  box-shadow:0 0 0 9999px rgba(3,1,8,.90), 0 0 30px rgba(34,232,245,.35) inset;
  transition:top .45s cubic-bezier(.4,0,.2,1), left .45s cubic-bezier(.4,0,.2,1),
             width .45s cubic-bezier(.4,0,.2,1), height .45s cubic-bezier(.4,0,.2,1)}
.f-blase{position:absolute; max-width:min(400px, calc(100vw - 32px));
  background:#0C0620; border:1px solid var(--cyan);
  box-shadow:0 0 34px rgba(34,232,245,.30); padding:16px 18px 14px;
  transition:top .45s cubic-bezier(.4,0,.2,1), left .45s cubic-bezier(.4,0,.2,1)}
.f-schritt{font-family:var(--ui); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--nebel); font-weight:600; margin-bottom:8px}
.f-text{font-family:var(--ui); font-size:16px; line-height:1.5; color:var(--text);
  margin:0 0 14px}
.f-text b{color:var(--acid); font-weight:600}
.f-knoepfe{display:flex; gap:10px; align-items:center}
.f-weiter{flex:1; font-family:var(--ui); font-weight:700; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase; padding:11px 16px; cursor:pointer;
  border:1px solid var(--acid); background:var(--acid); color:#0B1200}
.f-weiter:hover{box-shadow:0 0 18px rgba(204,255,51,.5)}
.f-weg{font-family:var(--ui); font-size:12px; padding:11px 12px; cursor:pointer;
  border:0; background:transparent; color:var(--nebel); text-decoration:underline}
.f-weg:hover{color:var(--text)}
.f-hoch{position:relative; z-index:101}

/* ---- Faellige Auszahlung: der eine Punkt, der oben stehen muss ---- */
.faellig{border:1px solid var(--magenta); background:rgba(255,45,120,.10);
  padding:13px 16px}
.faellig .marke{font-family:var(--ui); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--magenta-hell); font-weight:700; display:block}
.faellig p{margin:5px 0 0; font-family:var(--zahl); font-weight:700; font-size:19px;
  color:#FFF}
.faellig .notiz{font-family:var(--ui); font-weight:400; font-size:12px; color:var(--nebel)}
.faellig.ruhig{border-color:var(--linie); background:rgba(122,63,214,.08)}
.faellig.ruhig .marke{color:var(--nebel)}
.faellig.ruhig p{color:var(--cyan-hell); font-size:17px}

.auszahlreihe{position:relative; z-index:4; margin-top:10px; padding-top:9px;
  border-top:1px solid rgba(34,232,245,.14); font-size:12.5px; color:var(--nebel);
  text-align:center}
.auszahlreihe b{font-family:var(--zahl); font-weight:800; color:var(--cyan-hell)}
.auszahlreihe.dran{color:var(--acid); font-weight:600}

/* ---- Die Zielreihe ----
   Eine Warteschlange, keine Kartensammlung: eine Spur, in der oben steht, was
   dran ist. Deshalb sitzt die Marke "wird bespart" an der Zeile und nicht in
   der Ueberschrift -- sie wandert beim Schieben sichtbar mit, und damit ist
   die Regel erklaert, ohne sie zu erklaeren. */
.reihe{border:1px solid var(--linie); padding:14px 16px 16px;
  background:linear-gradient(180deg,rgba(122,63,214,.10),rgba(7,3,15,.5));
  display:flex; flex-direction:column; gap:10px}
.reihe > .marke{font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--cyan); font-weight:600}
.reihenhinweis{margin:0; font-size:12.5px; color:var(--nebel)}

.zielliste{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.zielzeile{display:flex; align-items:center; gap:10px; padding:9px 10px;
  border:1px solid rgba(122,63,214,.3); background:rgba(5,2,12,.72);
  touch-action:none; transition:border-color .18s ease, box-shadow .18s ease}
.zielzeile.dran{border-color:rgba(204,255,51,.5); background:linear-gradient(90deg,rgba(204,255,51,.10),rgba(5,2,12,.72));
  box-shadow:inset 3px 0 0 var(--acid)}
.zielzeile.greift{border-color:var(--cyan); box-shadow:0 0 26px rgba(34,232,245,.28); opacity:.95;
  position:relative; z-index:5}

.griff{cursor:grab; color:var(--violett); font-size:19px; line-height:1;
  padding:2px 4px; user-select:none; flex:none}
.zielzeile.greift .griff{cursor:grabbing; color:var(--cyan)}

.zieltext{display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; flex:1 1 auto; min-width:0}
.zieltext b{font-family:var(--zahl); font-weight:800; font-size:16px; letter-spacing:.03em;
  color:#FFF; overflow:hidden; text-overflow:ellipsis}
.zielpreisklein{font-family:var(--zahl); font-weight:600; font-size:14px;
  color:var(--acid-hell); font-variant-numeric:tabular-nums}
.dranmarke{font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--nebel); white-space:nowrap}
.zielzeile.dran .dranmarke{color:var(--acid)}

.zielknoepfe{display:flex; gap:4px; flex:none}
.zielknoepfe button{font-family:var(--ui); font-size:14px; line-height:1;
  width:30px; height:30px; cursor:pointer; background:transparent;
  border:1px solid rgba(122,63,214,.4); color:var(--nebel)}
.zielknoepfe button:hover:not(:disabled){color:var(--cyan-hell); border-color:var(--cyan)}
.zielknoepfe button:disabled{opacity:.25; cursor:default}
.zielknoepfe .weg:hover{color:var(--magenta-hell); border-color:var(--magenta)}
.zielknoepfe button:focus-visible{outline:2px solid var(--acid); outline-offset:1px}

/* ---- Selbst sparen ----
   Steht ausserhalb der Zielkarte, weil es auch dann gebraucht wird, wenn es
   noch gar kein Ziel gibt -- und weil die Einfuehrung darauf zeigt. */
.schieben{border:1px solid rgba(34,232,245,.25); padding:12px 16px 14px;
  background:rgba(5,2,12,.55); display:flex; flex-direction:column; gap:8px}
.schieben > .marke{font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--cyan); font-weight:600}
.fussnote{margin:0; font-size:12px; color:var(--nebel); opacity:.85}

@media (max-width:460px){
  .zielknoepfe button{width:34px; height:34px}
  .zieltext{gap:6px}
}

/* Ein Zaehler, der stehenbleibt, muss es sagen. Vorher starb die Bildschleife
   still, und die Anzeige behauptete weiter, alles laufe. */
.leiste .zustand .kaputt{color:var(--magenta-hell)}
.leiste .zustand:has(.kaputt) .kasten{background:var(--magenta); box-shadow:0 0 8px var(--magenta)}

/* Ein Hinweis, der Geld kostet, darf nicht wie eine Fussnote aussehen. */
.notiz.warnung{color:var(--magenta-hell); border-left:2px solid var(--magenta);
  padding-left:9px}

/* Die Probetabelle der Sparpraemie: sie soll gelesen werden, bevor
   uebernommen wird, also steht sie im Formular und nicht daneben. */
.tab.probe{width:100%; margin:12px 0 0; border-collapse:collapse; font-size:12.5px}
.tab.probe th{text-align:right; font-weight:600; color:var(--nebel);
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 6px; border-bottom:1px solid var(--linie)}
.tab.probe th:first-child, .tab.probe td:first-child{text-align:left}
.tab.probe td{text-align:right; padding:5px 6px; font-variant-numeric:tabular-nums;
  font-family:var(--zahl); font-weight:600; color:var(--acid-hell)}
.tab.probe td.amdeckel{color:var(--magenta-hell)}
.tab.probe td.amdeckel::after{content:" \25b2"; font-size:8px; vertical-align:super}

/* ---- Der Ueberblick ----
   Erster Schirm, und damit der, der den Effekt tragen muss. Das Sparen steht
   gross, weil dort das Ziel und der Countdown haengen; Sofort und Tresor
   laufen als Zeilen mit. Drei gleich grosse Kacheln waeren ordentlicher und
   langweiliger -- die Rangfolge ist Absicht. */
.ueberblick{position:relative; overflow:hidden; padding:20px 16px 16px;
  background:var(--panel);
  border:1px solid rgba(204,255,51,.34);
  box-shadow:0 0 34px rgba(204,255,51,.10), inset 0 0 70px rgba(122,63,214,.20)}
/* z-index 4, nicht 1: der Scanline-Schleier liegt auf 3. Mit 1 lag er UEBER
   den Ziffern und legte ihnen Streifen ins Gesicht -- es sah aus, als loese
   die Schrift schlecht auf. In der Roehre steht dasselbe 4. */
.ueberblick > *:not(.bild):not(.scan):not(.ecke){position:relative; z-index:4}
.ueberblick .bild{position:absolute; inset:0; z-index:0; pointer-events:none;
  background-size:cover; background-position:center; opacity:.10;
  transition:opacity 1.2s ease, filter 1.2s ease;
  mask-image:linear-gradient(90deg, rgba(0,0,0,.15), rgba(0,0,0,.8));
  -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,.15), rgba(0,0,0,.8))}

.ubziel{margin-top:10px; display:flex; flex-direction:column; gap:5px}
.ubzielkopf{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.ubzielname{font-family:var(--zahl); font-weight:800; font-size:18px; color:#FFF;
  text-shadow:0 0 14px rgba(204,255,51,.5); overflow:hidden; text-overflow:ellipsis}
.ubzielprozent{font-family:var(--zahl); font-weight:600; font-size:15px;
  color:var(--acid); font-variant-numeric:tabular-nums}
.ubzielfuss{font-size:13px; color:var(--nebel)}
.ubzielfuss b{color:var(--acid); font-variant-numeric:tabular-nums}
.ubzielfuss b.geschafft{color:var(--acid); text-shadow:0 0 14px var(--acid)}
.ubkeinziel{margin:10px 0 0; font-size:13px; color:var(--nebel)}
.ubkeinziel b{color:var(--acid)}

/* Zwei Zeilen je Topf: oben die Marke und die Zahl, darunter der Zusatz.
   Einzeilig gingen Marke, sieben Nachkommastellen und Text auf einem Telefon
   nicht nebeneinander -- sie klebten aneinander und schnitten sich ab. */
.ubzeile{display:grid; grid-template-columns:auto 1fr; gap:2px 10px;
  align-items:baseline; padding:10px 14px;
  background:rgba(5,2,12,.6); border:1px solid rgba(122,63,214,.26)}
.ubmarke{font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  font-weight:700; color:var(--cyan); white-space:nowrap}
.ubmarke.rosa{color:var(--magenta-hell)}
.ubzeile .werk{justify-content:flex-start; min-width:0}
.ubnote{grid-column:1 / -1; font-size:11.5px; color:var(--nebel);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* Fuenf Reiter muessen auf ein Telefon passen, ohne die Seite breit zu machen. */
.reiter{overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.reiter::-webkit-scrollbar{display:none}
.reiterknopf{white-space:nowrap}
/* Fuenf Reiter muessen auf ein Telefon passen. Der Buchstabenabstand frisst
   dabei am meisten -- er faellt zuerst, nicht die Schriftgroesse. */
@media (max-width:560px){
  .reiterknopf{padding:9px 9px; letter-spacing:.06em; font-size:11px}
}
@media (max-width:400px){
  .reiterknopf{padding:9px 7px; letter-spacing:.02em; font-size:10.5px}
}

/* Die Staende des Elternbretts laufen mit. Das Ziffernwerk bringt eigene
   Zellen mit; die Farbe je Topf kommt weiter aus .stand, damit die drei
   Kacheln aussehen wie vorher -- nur eben in Bewegung. */
.stand .wert.werk{display:flex; gap:1px; font-size:24px}
.stand .wert.werk .zelle{color:inherit}
.stand .wert.werk .geist{color:currentColor; opacity:.09}

/* Die Bretter des Elternbereichs verhalten sich wie die Blaetter beim Kind.
   Frueher stand hier eine Regel auf die Kennungen -- die schlug [hidden] noch
   sicherer als die Klasse und machte alle Reiter gleichzeitig sichtbar. */
#brettLage, #brettBuchen, #brettRegeln, #brettKind, #brettBuch{
  display:flex; flex-direction:column; gap:14px}