/* Bewusst einfarbige Welt: dunkel, Neon, CRT. Kein heller Modus. */ :root{ /* Farben stehen als RGB-Tripel da, nicht als fertige Farbe: nur so lassen sich auch die vielen halbdurchsichtigen Toene eines Stils mitziehen. Ein Stil setzt ausschliesslich diese Tripel und die beiden Schriften -- nichts weiter unten im Blatt muss er kennen. */ --grund-rgb:7,3,15; --panel-rgb:5,2,12; --tief-rgb:3,1,8; --blase-rgb:12,6,32; --cyan-rgb:34,232,245; --cyan-hell-rgb:155,247,255; --magenta-rgb:255,45,120; --magenta-hell-rgb:255,163,200; --acid-rgb:204,255,51; --acid-hell-rgb:232,255,155; --violett-rgb:122,63,214; --text-rgb:207,199,236; --nebel-rgb:139,123,184; --weiss-rgb:255,255,255; --grund:rgb(var(--grund-rgb)); --panel:rgb(var(--panel-rgb)); --cyan:rgb(var(--cyan-rgb)); --cyan-hell:rgb(var(--cyan-hell-rgb)); --magenta:rgb(var(--magenta-rgb)); --magenta-hell:rgb(var(--magenta-hell-rgb)); --acid:rgb(var(--acid-rgb)); --acid-hell:rgb(var(--acid-hell-rgb)); --violett:rgb(var(--violett-rgb)); --text:rgb(var(--text-rgb)); --nebel:rgb(var(--nebel-rgb)); --weiss:rgb(var(--weiss-rgb)); --linie:rgba(var(--violett-rgb),.38); --zahl:"Tourney","Chakra Petch",system-ui,sans-serif; --ui:"Chakra Petch","Segoe UI",system-ui,sans-serif; /* Sehr dunkle Toene der jeweiligen Farbe, fuer Fuellungen hinter Ziffern. */ --acid-tief:#0B1200; --cyan-tief:#04121A; --magenta-tief:#12000A; --grund-tief:#04010A; --kante:0px; /* Eckenradius: manche Stile sind eckig */ } /* ---- Stile ---- Ein Stil setzt nur die Farbtripel und die beiden Schriften. Alles andere im Blatt rechnet damit -- auch die vielen halbdurchsichtigen Toene, weil sie ueber dieselben Tripel gebildet werden. Wer einen Stil hinzufuegt, muss deshalb nichts weiter unten anfassen. Der Stil haengt am -Element, nicht am body: dann steht die Farbe schon fest, bevor der erste Inhalt gezeichnet wird, und es blitzt beim Laden nicht der falsche Grund auf. */ /* Night City. Giftgelb auf Schwarz, Rot als Alarm, Cyan als Netz. Weniger Neonschimmer als Synthwave, dafuer harte Kanten und mehr Kontrast -- der Stil lebt von Flaeche, nicht von Leuchten. */ html[data-stil="nightcity"]{ --grund-rgb:10,10,10; --panel-rgb:6,6,6; --tief-rgb:0,0,0; --blase-rgb:16,16,16; --acid-rgb:252,238,10; --acid-hell-rgb:255,247,140; --cyan-rgb:0,240,255; --cyan-hell-rgb:150,250,255; --magenta-rgb:255,0,60; --magenta-hell-rgb:255,120,150; --violett-rgb:90,90,90; --text-rgb:228,228,228; --nebel-rgb:138,138,138; --acid-tief:#1A1800; --cyan-tief:#001A1E; --magenta-tief:#1A0008; --grund-tief:#050505; --linie:rgba(var(--acid-rgb),.34); --zahl:"Rajdhani","Chakra Petch",system-ui,sans-serif; --ui:"Rajdhani","Chakra Petch","Segoe UI",system-ui,sans-serif; } /* Terminal. Gruen auf Schwarz, wie eine alte Werkbank. Ruhig, kein Farbwechselspiel -- fuer Tage, an denen das Blinken zu viel ist. */ html[data-stil="terminal"]{ --grund-rgb:2,10,4; --panel-rgb:0,6,2; --tief-rgb:0,3,1; --blase-rgb:3,16,7; --acid-rgb:80,255,120; --acid-hell-rgb:180,255,200; --cyan-rgb:110,230,160; --cyan-hell-rgb:190,255,215; --magenta-rgb:255,170,60; --magenta-hell-rgb:255,210,150; --violett-rgb:40,110,60; --text-rgb:190,235,200; --nebel-rgb:110,160,125; --acid-tief:#001A08; --cyan-tief:#001208; --magenta-tief:#1A1000; --grund-tief:#010A03; --linie:rgba(var(--acid-rgb),.28); --zahl:"Share Tech Mono","Chakra Petch",ui-monospace,monospace; --ui:"Chakra Petch","Segoe UI",system-ui,sans-serif; } /* Eis. Blau und Weiss, sehr klar. Der Gegenentwurf zu allem Grellen. */ html[data-stil="eis"]{ --grund-rgb:6,14,26; --panel-rgb:3,9,18; --tief-rgb:1,5,11; --blase-rgb:8,20,36; --acid-rgb:120,220,255; --acid-hell-rgb:200,240,255; --cyan-rgb:90,170,255; --cyan-hell-rgb:180,215,255; --magenta-rgb:190,150,255; --magenta-hell-rgb:220,200,255; --violett-rgb:60,90,140; --text-rgb:215,230,245; --nebel-rgb:130,155,185; --acid-tief:#021520; --cyan-tief:#02101F; --magenta-tief:#0E0820; --grund-tief:#030A14; --linie:rgba(var(--cyan-rgb),.30); --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(var(--violett-rgb),.24), transparent 62%), radial-gradient(700px 420px at 92% 108%, rgba(var(--magenta-rgb),.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(var(--cyan-rgb),.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(var(--cyan-rgb),.28); box-shadow:0 0 34px rgba(var(--cyan-rgb),.10), inset 0 0 70px rgba(var(--violett-rgb),.20)} .roehre.haupt{padding:22px 14px 14px} .roehre.neben{padding:14px 14px 12px} .roehre.gruen{border-color:rgba(var(--acid-rgb),.3); box-shadow:0 0 26px rgba(var(--acid-rgb),.07), inset 0 0 60px rgba(var(--violett-rgb),.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(var(--violett-rgb),.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(var(--magenta-rgb),.55), -1px 0 rgba(var(--cyan-rgb),.55), 0 0 6px var(--cyan), 0 0 22px rgba(var(--cyan-rgb),.55)} .werk.gruen .zelle .geist{color:var(--acid); opacity:.07} .werk.gruen .zelle.gross .an{color:var(--acid-hell); text-shadow:-1px 0 rgba(var(--acid-rgb),.5), 0 0 6px var(--acid), 0 0 20px rgba(var(--acid-rgb),.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(var(--magenta-rgb),.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(var(--acid-rgb),.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(var(--cyan-rgb),.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(var(--violett-rgb),.10),rgba(var(--grund-rgb),.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(var(--cyan-rgb),.45); line-height:1.15} .modul .neben{font-size:12px; color:var(--nebel)} .balken{height:9px; background:rgba(var(--cyan-rgb),.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(var(--acid-rgb),.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(var(--acid-rgb),.35); padding:14px 16px 16px; background:linear-gradient(180deg,rgba(var(--acid-rgb),.07),rgba(var(--grund-rgb),.55)); display:flex; flex-direction:column; gap:7px} .ziel.geschafft{border-color:var(--acid); box-shadow:0 0 40px rgba(var(--acid-rgb),.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:var(--weiss); text-shadow:0 0 16px rgba(var(--acid-rgb),.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(var(--violett-rgb),.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(var(--violett-rgb),.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(var(--blase-rgb),.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:var(--grund-tief); color:var(--cyan-hell); width:100%; min-width:0; letter-spacing:.04em} input::placeholder{color:rgba(var(--nebel-rgb),.55)} input:focus-visible, select:focus-visible{outline:1px solid var(--cyan); box-shadow:0 0 14px rgba(var(--cyan-rgb),.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:var(--cyan-tief); box-shadow:0 0 16px rgba(var(--cyan-rgb),.55)} button.tat.gruen{border-color:var(--acid); color:var(--acid-hell)} button.tat.gruen:hover{background:var(--acid); color:var(--acid-tief)} button.tat.warn{border-color:var(--magenta); color:var(--magenta-hell)} button.tat.warn:hover{background:var(--magenta); color:var(--magenta-tief)} .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(var(--violett-rgb),.10),rgba(var(--grund-rgb),.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(var(--cyan-rgb),.4)} .stand.k .wert{color:var(--acid-hell); text-shadow:0 0 12px rgba(var(--acid-rgb),.4)} .stand.t .wert{color:var(--magenta-hell); text-shadow:0 0 12px rgba(var(--magenta-rgb),.4)} .stand .neben{font-size:11.5px; color:var(--nebel)} .meldung{border-left:3px solid var(--acid); background:rgba(var(--acid-rgb),.09); padding:9px 13px; font-size:13.5px; color:var(--acid-hell)} .meldung.schlecht{border-left-color:var(--magenta); background:rgba(var(--magenta-rgb),.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(var(--violett-rgb),.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(var(--magenta-rgb),.4); background:rgba(var(--magenta-rgb),.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(var(--acid-rgb),.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(var(--acid-rgb),.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(var(--acid-rgb),.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(var(--acid-rgb),.5), 0 0 6px var(--acid), 0 0 22px rgba(var(--acid-rgb),.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:var(--weiss); text-shadow:-1px 0 rgba(var(--magenta-rgb),.6), 0 0 6px var(--magenta), 0 0 22px rgba(var(--magenta-rgb),.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(var(--magenta-rgb),.4); background:linear-gradient(180deg,rgba(var(--magenta-rgb),.08),rgba(var(--grund-rgb),.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(var(--cyan-rgb),.07),rgba(var(--grund-rgb),.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(var(--acid-rgb),.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(var(--violett-rgb),.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(var(--acid-rgb),.14); box-shadow:inset 0 0 0 1px rgba(var(--acid-rgb),.25)} .etappen .stueck.voll{background:var(--acid); box-shadow:0 0 10px rgba(var(--acid-rgb),.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(var(--cyan-rgb),.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(var(--violett-rgb),.10),rgba(var(--grund-rgb),.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(var(--acid-rgb),.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(var(--acid-rgb),.14)} .minifrm label{flex:1 1 130px} .meldung{border-left:3px solid var(--acid); background:rgba(var(--acid-rgb),.10); padding:10px 14px; font-size:14px; color:var(--acid-hell)} .meldung.schlecht{border-left-color:var(--magenta); background:rgba(var(--magenta-rgb),.10); color:var(--magenta-hell)} /* Er steht in den Einstellungen, wo man ihn sucht -- nicht schwebend ueber dem Inhalt und nicht am Seitenende. Vorher war er ein festgenagelter Knopf und genau dort im Weg, wo man gerade liest. */ .nochmal{display:inline-block; margin:2px 0 0; z-index:1; 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(var(--blase-rgb),.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(var(--tief-rgb),.90), 0 0 30px rgba(var(--cyan-rgb),.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(var(--cyan-rgb),.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:var(--acid-tief)} .f-weiter:hover{box-shadow:0 0 18px rgba(var(--acid-rgb),.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(var(--magenta-rgb),.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:var(--weiss)} .faellig .notiz{font-family:var(--ui); font-weight:400; font-size:12px; color:var(--nebel)} .faellig.ruhig{border-color:var(--linie); background:rgba(var(--violett-rgb),.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(var(--cyan-rgb),.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(var(--violett-rgb),.10),rgba(var(--grund-rgb),.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(var(--violett-rgb),.3); background:rgba(var(--panel-rgb),.72); touch-action:none; transition:border-color .18s ease, box-shadow .18s ease} .zielzeile.dran{border-color:rgba(var(--acid-rgb),.5); background:linear-gradient(90deg,rgba(var(--acid-rgb),.10),rgba(var(--panel-rgb),.72)); box-shadow:inset 3px 0 0 var(--acid)} .zielzeile.greift{border-color:var(--cyan); box-shadow:0 0 26px rgba(var(--cyan-rgb),.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:var(--weiss); 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(var(--violett-rgb),.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(var(--cyan-rgb),.25); padding:12px 16px 14px; background:rgba(var(--panel-rgb),.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(var(--acid-rgb),.34); box-shadow:0 0 34px rgba(var(--acid-rgb),.10), inset 0 0 70px rgba(var(--violett-rgb),.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:var(--weiss); text-shadow:0 0 14px rgba(var(--acid-rgb),.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(var(--panel-rgb),.6); border:1px solid rgba(var(--violett-rgb),.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} /* Der letzte Schritt der Einfuehrung: er erklaert kein Feld, er sagt, wofuer das Ganze da ist. Deshalb steht er mittig, ohne Loch, und etwas waermer. */ .f-blase.f-ende{border-color:var(--acid); box-shadow:0 0 44px rgba(var(--acid-rgb),.28); text-align:center; max-width:min(360px, calc(100vw - 32px))} .f-blase.f-ende .f-text{font-size:17px} .f-blase.f-ende .f-knoepfe{justify-content:center} /* ---- Die Stilwahl ---- Vier Kacheln, jede zeigt ihre eigenen Farben. Ein Kind waehlt nicht nach Namen, es waehlt nach dem, was es sieht -- deshalb traegt jede Kachel eine Farbprobe und nicht nur eine Beschriftung. Die Proben stehen hier fest und nicht in den Stilbloecken, weil sie alle GLEICHZEITIG zu sehen sind. */ .stilwahl{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px} .stilform{margin:0; display:flex} .stilkachel{flex:1 1 auto; display:flex; flex-direction:column; gap:5px; text-align:left; cursor:pointer; padding:12px 13px 13px; font-family:var(--ui); color:var(--text); background:rgba(var(--panel-rgb),.85); border:1px solid rgba(var(--violett-rgb),.4)} .stilkachel:hover{border-color:var(--cyan)} .stilkachel:focus-visible{outline:2px solid var(--acid); outline-offset:2px} .stilkachel.gewaehlt{border-color:var(--acid); box-shadow:inset 3px 0 0 var(--acid)} .stilkachel b{font-family:var(--zahl); font-weight:800; font-size:16px; letter-spacing:.04em; color:var(--weiss)} .stilkachel small{font-size:11.5px; line-height:1.45; color:var(--nebel)} .stilkachel em{font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; font-style:normal; color:var(--acid)} .stilprobe{display:flex; height:22px; border:1px solid rgba(var(--violett-rgb),.35)} .stilprobe i{flex:1 1 auto} .stilprobe .p1{flex:2 1 auto} [data-stil-probe="synthwave"] .stilprobe{background:#07030F} [data-stil-probe="synthwave"] .p1{background:#7A3FD6} [data-stil-probe="synthwave"] .p2{background:#22E8F5} [data-stil-probe="synthwave"] .p3{background:#CCFF33} [data-stil-probe="synthwave"] .p4{background:#FF2D78} [data-stil-probe="nightcity"] .stilprobe{background:#0A0A0A} [data-stil-probe="nightcity"] .p1{background:#141414} [data-stil-probe="nightcity"] .p2{background:#FCEE0A} [data-stil-probe="nightcity"] .p3{background:#00F0FF} [data-stil-probe="nightcity"] .p4{background:#FF003C} [data-stil-probe="terminal"] .stilprobe{background:#020A04} [data-stil-probe="terminal"] .p1{background:#0A2010} [data-stil-probe="terminal"] .p2{background:#50FF78} [data-stil-probe="terminal"] .p3{background:#6EE6A0} [data-stil-probe="terminal"] .p4{background:#FFAA3C} [data-stil-probe="eis"] .stilprobe{background:#060E1A} [data-stil-probe="eis"] .p1{background:#3C5A8C} [data-stil-probe="eis"] .p2{background:#78DCFF} [data-stil-probe="eis"] .p3{background:#5AAAFF} [data-stil-probe="eis"] .p4{background:#BE96FF} /* Beim Sprung zum naechsten Schritt gleitet das Loch, damit das Auge mitkommt. Sobald es dem Element folgt, muss die Ueberblendung weg -- sonst zittert es jeder Korrektur hinterher. */ .f-loch.folgt{transition:none} /* Ein Schritt, der etwas verlangt: der Knopf bleibt zu und sagt, warum. Ein Knopf, der ohne Begruendung nicht reagiert, wirkt kaputt. */ .f-pflicht{margin:-6px 0 12px; font-size:13px; color:var(--acid); border-left:2px solid var(--acid); padding-left:9px} .f-weiter:disabled{opacity:.35; cursor:default} .f-weiter.wartet{border-style:dashed} /* Was das Kind ueber sich selbst sieht. Bewusst auf seiner Seite und nicht nur im Elternbereich: eine Messung, die man verbirgt, ist etwas anderes. */ .zeitreihe{display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:9px} .zeitkachel{display:flex; flex-direction:column; gap:3px; padding:11px 12px; background:rgba(var(--panel-rgb),.8); border:1px solid rgba(var(--violett-rgb),.32)} .zeitzahl{font-family:var(--zahl); font-weight:800; font-size:21px; color:var(--cyan-hell); font-variant-numeric:tabular-nums} .zeitwort{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--nebel)} /* ---- Der Muenzzaehler ---- Die Muenze selbst ist der groesste Knopf: antippen heisst "noch eine". So zaehlt man einen Haufen ab, ohne zwischen Haufen und Bildschirm hin und her zu sehen. Die Zahl daneben ist zum Nachbessern da, nicht zum Tippen. Gezeichnet statt geladen: drei Metalle, acht Groessen, alles aus CSS. Das spart nicht nur Dateien -- es haelt die Muenzen im Stil der Seite, und der wechselt mit dem gewaehlten Stil mit. */ .muenzen{display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:14px 10px; margin-top:6px} .muenze{display:flex; flex-direction:column; align-items:center; gap:7px} .muenze .bild{background:none; border:0; padding:0; cursor:pointer; display:flex; align-items:center; justify-content:center; min-height:58px; width:100%} .muenze .bild:focus-visible{outline:2px solid var(--acid); outline-offset:3px} .muenze .rund{display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:50%; line-height:1; font-family:var(--zahl); transition:transform .12s ease, box-shadow .12s ease} .muenze .bild:hover .rund{transform:scale(1.06)} .muenze .bild:active .rund{transform:scale(.94)} .muenze .zahl{font-weight:800; font-size:17px} .muenze .einheit{font-size:6.5px; letter-spacing:.14em; margin-top:1px; opacity:.75} /* Die echten Metalle, angedeutet: Kupfer, nordisches Gold, zwei Ringe. */ .muenze.kupfer .rund{ background:radial-gradient(circle at 34% 30%, #C88A5A, #9A5B2E 62%, #6E3D1C); color:#3A1E0B; box-shadow:inset 0 0 0 2px rgba(255,220,190,.30)} .muenze.gold .rund{ background:radial-gradient(circle at 34% 30%, #E8CE7A, #C9A227 62%, #8E7016); color:#3A2D06; box-shadow:inset 0 0 0 2px rgba(255,245,200,.34)} .muenze.bimetall .rund{ background:radial-gradient(circle at 50% 50%, #D9BE6E 0 52%, #C9CCD2 52%, #93999F); color:#2C2A1E; box-shadow:inset 0 0 0 2px rgba(255,255,255,.32)} .muenze.bimetall2 .rund{ background:radial-gradient(circle at 50% 50%, #C9CCD2 0 52%, #D9BE6E 52%, #A8862F); color:#2A2820; box-shadow:inset 0 0 0 2px rgba(255,255,255,.32)} .zaehlzeile{display:flex; align-items:stretch; width:100%; border:1px solid var(--linie); background:var(--grund-tief)} .zaehlzeile button{font-family:var(--ui); font-size:17px; font-weight:700; line-height:1; width:30px; flex:none; cursor:pointer; background:transparent; border:0; color:var(--nebel)} .zaehlzeile button:hover{color:var(--acid); background:rgba(var(--acid-rgb),.10)} .zaehlzeile button:focus-visible{outline:2px solid var(--acid); outline-offset:-2px} .zaehlzeile input{font-family:var(--zahl); font-size:16px; font-weight:600; padding:8px 2px; width:100%; min-width:0; text-align:center; border:0; background:transparent; color:var(--text); font-variant-numeric:tabular-nums; -moz-appearance:textfield} .zaehlzeile input::-webkit-outer-spin-button, .zaehlzeile input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0} .zaehlzeile input:focus-visible{outline:1px solid var(--cyan); outline-offset:-1px} /* Was schon gezaehlt ist, hebt sich ab -- sonst verliert man beim Sortieren den Ueberblick, welche Sorte man schon hatte. */ .muenze.voll .zaehlzeile{border-color:rgba(var(--acid-rgb),.55)} .muenze.voll .zaehlzeile input{color:var(--acid-hell)} .muenze:not(.voll) .rund{filter:saturate(.55) brightness(.82)} .muenzsumme{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-top:16px; padding-top:13px; border-top:1px solid var(--linie)} .summenwort{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--nebel); font-weight:600} .summenzahl{font-family:var(--zahl); font-weight:800; font-size:28px; color:var(--acid); font-variant-numeric:tabular-nums; text-shadow:0 0 14px rgba(var(--acid-rgb),.4)} .summenzahl.nichts{color:var(--nebel); text-shadow:none} @media (max-width:420px){ .muenzen{grid-template-columns:repeat(auto-fit,minmax(86px,1fr)); gap:12px 8px} .zaehlzeile button{width:28px} } /* ---- Das Auge an verdeckten Feldern ---- Wer ein Kennwort auf einem Telefon tippt, vertippt sich -- und sieht nicht, wo. Dreimal "falsches Kennwort" ohne zu wissen warum, und ein Kind gibt auf. Es sitzt IM Feld, nicht daneben: daneben waere es eine zweite Spalte, und auf einem Telefon hat die Zeile keine zweite Spalte. */ .mitauge{position:relative; display:block} .mitauge input{padding-right:42px} .auge{position:absolute; right:1px; top:1px; bottom:1px; width:38px; display:flex; align-items:center; justify-content:center; background:transparent; border:0; cursor:pointer; padding:0; font-size:17px; line-height:1; color:var(--nebel)} .auge:hover{color:var(--cyan-hell)} .auge.offen{color:var(--acid)} .auge:focus-visible{outline:2px solid var(--acid); outline-offset:-2px} /* ---- Melden ---- Ein Feld, in das man wirklich etwas hineinschreibt: gross genug, dass man nicht nach drei Worten scrollt. */ .meldeform{display:flex; flex-direction:column; gap:9px; margin-top:4px} .meldeform label{display:flex; flex-direction:column; gap:5px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--nebel); font-weight:600} .meldeform textarea{font-family:var(--ui); font-size:15px; line-height:1.5; padding:10px 12px; width:100%; resize:vertical; min-height:88px; border:1px solid var(--linie); background:var(--grund-tief); color:var(--text)} .meldeform textarea:focus-visible{outline:1px solid var(--cyan); box-shadow:0 0 12px rgba(var(--cyan-rgb),.28)} .meldeform button{align-self:flex-start} /* Die Liste der Meldungen im Elternbereich. */ .meldungen{list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:1px; background:var(--linie); border:1px solid var(--linie)} .meldungen li{background:var(--panel); padding:12px 14px} .meldungen .kopf{display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--nebel)} .meldungen .kopf b{color:var(--cyan-hell); font-weight:600} .meldungen .kopf .offen{color:var(--magenta-hell)} .meldungen .was{margin:6px 0 0; font-size:14.5px; white-space:pre-wrap} .meldungen .zusatz{margin:6px 0 0; font-size:11.5px; color:var(--nebel)}