/* 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}
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)}