/* Punktesystem: Design-System nach docs/design-konzept.md. Dark Mode Standard, Light Mode über prefers-color-scheme, zusätzlich per Hand umschaltbar über data-theme="light"/"dark" auf (siehe static/js/util.js, Umschalter im Hero der Startseite). Ohne data-theme folgt die Seite dem System. Mobile first ab 360px, responsive per clamp() statt vieler fester Breakpoints. */ @font-face { font-family: "Manrope"; font-weight: 400; font-style: normal; font-display: swap; src: url("/static/fonts/manrope-400.woff2") format("woff2"); } @font-face { font-family: "Manrope"; font-weight: 600; font-style: normal; font-display: swap; src: url("/static/fonts/manrope-600.woff2") format("woff2"); } @font-face { font-family: "Manrope"; font-weight: 800; font-style: normal; font-display: swap; src: url("/static/fonts/manrope-800.woff2") format("woff2"); } @font-face { font-family: "Space Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("/static/fonts/space-mono-400.woff2") format("woff2"); } @font-face { font-family: "Space Mono"; font-weight: 700; font-style: normal; font-display: swap; src: url("/static/fonts/space-mono-700.woff2") format("woff2"); } :root { /* Farbpalette, siehe docs/design-konzept.md */ --mitternacht: #0b1120; --tiefsee: #131c30; --cyan: #2fd9e8; --gold: #f6a928; --rot: #c24b4b; --nebel: #e7ecf5; --gruen: #3ecf8e; --bg: var(--mitternacht); --flaeche: var(--tiefsee); --flaeche-rand: #223049; --text: var(--nebel); --text-schwach: rgb(231 236 245 / 65%); --erfolg: var(--cyan); --gefahr: var(--rot); --ziel: var(--gold); --schrift-ui: "Manrope", system-ui, sans-serif; --schrift-zahl: "Space Mono", ui-monospace, monospace; --radius: 14px; --spacing: clamp(0.75rem, 2vw, 1.25rem); } /* Hell per System, ausser per data-theme="dark" ausdrücklich auf dunkel gezwungen. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: #f4f6fb; --flaeche: #ffffff; --flaeche-rand: #dce3f0; --text: #101828; --text-schwach: rgb(16 24 40 / 62%); --cyan: #0891a3; --gold: #b3720f; --rot: #a83c3c; --gruen: #17915a; --erfolg: var(--cyan); --gefahr: var(--rot); --ziel: var(--gold); } } /* Hell erzwungen, unabhängig vom System. */ :root[data-theme="light"] { --bg: #f4f6fb; --flaeche: #ffffff; --flaeche-rand: #dce3f0; --text: #101828; --text-schwach: rgb(16 24 40 / 62%); --cyan: #0891a3; --gold: #b3720f; --rot: #a83c3c; --gruen: #17915a; --erfolg: var(--cyan); --gefahr: var(--rot); --ziel: var(--gold); } * { box-sizing: border-box; } /* Muss vor jeder Regel stehen, die display auf einem Element setzt, das auch hidden bekommt (Modals, Toast, Banner, ...) - sonst gewinnt die eigene display-Angabe gegen das hidden-Attribut. */ [hidden] { display: none !important; } html { color-scheme: dark light; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--schrift-ui); font-size: 16px; line-height: 1.4; -webkit-tap-highlight-color: transparent; /* Absicherung: die Seite darf nie seitlich scrollen. Ohne das kann ein einzelnes zu breites/falsch positioniertes Element (z.B. ein Rand-Fall in der Etappen-Bahn) die ganze Seite nach rechts verschieben, wodurch weiter unten liegende Inhalte wie die Wochentage-Leiste abgeschnitten wirken. */ overflow-x: hidden; } button, input { font-family: inherit; color: inherit; } a { color: inherit; text-decoration: none; } .app { max-width: 560px; margin: 0 auto; padding: var(--spacing); padding-bottom: 4rem; display: flex; flex-direction: column; gap: 1.5rem; } /* ---------- Hero ---------- */ .hero { background: linear-gradient(180deg, var(--flaeche), var(--bg)); border: 1px solid var(--flaeche-rand); border-radius: var(--radius); padding: var(--spacing); text-align: center; transition: box-shadow 400ms ease; } .hero.erreicht { box-shadow: 0 0 0 1px var(--gold), 0 0 32px 4px rgb(246 169 40 / 35%); } .hero-top { display: flex; justify-content: space-between; align-items: center; font-family: var(--schrift-zahl); font-size: 0.9rem; color: var(--text-schwach); } .hero-zahl-zeile { display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin-top: 0.5rem; } .hero-zahl { font-family: var(--schrift-zahl); font-weight: 700; font-size: clamp(3.5rem, 14vw, 5.5rem); line-height: 1; font-variant-numeric: tabular-nums; } /* Feuerwerk flankiert die Zahl, nur beim vollen Rundenziel (nicht schon bei der ersten Etappe - siehe .hero.voll-erreicht in start.js): ein Kranz kleiner Funken, die aus der Mitte nach aussen schiessen und verblassen, wie ein echter Ausbruch statt eines einzelnen hereinspringenden Bilds. prefers-reduced-motion wird über die globale Regel am Dateiende neutralisiert (animation-duration -> ~0). */ .feuerwerk { position: relative; width: 4.5rem; height: 4.5rem; flex-shrink: 0; display: none; } .hero.voll-erreicht .feuerwerk { display: block; } .feuerwerk span { position: absolute; top: 50%; left: 50%; width: 0.4rem; height: 0.4rem; margin: -0.2rem 0 0 -0.2rem; border-radius: 50%; opacity: 0; animation: feuerwerk-funke 1.5s ease-out infinite; } /* 8 Funken sternförmig verteilt, 45° Abstand, Gold/Cyan im Wechsel. */ .feuerwerk span:nth-child(1) { --winkel: 0deg; background: var(--gold); animation-delay: 0s; } .feuerwerk span:nth-child(2) { --winkel: 45deg; background: var(--cyan); animation-delay: 0.1s; } .feuerwerk span:nth-child(3) { --winkel: 90deg; background: var(--gold); animation-delay: 0.2s; } .feuerwerk span:nth-child(4) { --winkel: 135deg; background: var(--cyan); animation-delay: 0.3s; } .feuerwerk span:nth-child(5) { --winkel: 180deg; background: var(--gold); animation-delay: 0.4s; } .feuerwerk span:nth-child(6) { --winkel: 225deg; background: var(--cyan); animation-delay: 0.5s; } .feuerwerk span:nth-child(7) { --winkel: 270deg; background: var(--gold); animation-delay: 0.6s; } .feuerwerk span:nth-child(8) { --winkel: 315deg; background: var(--cyan); animation-delay: 0.7s; } @keyframes feuerwerk-funke { 0% { transform: rotate(var(--winkel)) translateY(0) scale(1); opacity: 0; } 20% { opacity: 1; } 100% { transform: rotate(var(--winkel)) translateY(-2rem) scale(0.2); opacity: 0; } } .hero-ziel { font-weight: 600; color: var(--text-schwach); margin-top: 0.25rem; } .xp-balken { height: 14px; border-radius: 999px; background: var(--flaeche); border: 1px solid var(--flaeche-rand); margin-top: 1rem; overflow: hidden; } .xp-balken-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--cyan), var(--erfolg)); border-radius: 999px; transition: width 500ms ease; } .hero.erreicht .xp-balken-fill { background: linear-gradient(90deg, var(--gold), #ffd166); } /* ---------- Etappen-Bahn ---------- */ /* Ersetzt den einfachen xp-balken, sobald mindestens eine Etappe angelegt ist (siehe start.js renderRunde) - Punktzahl über dem Icon, Text darunter in einer eigenen Zeile pro Etappe (nur bei echter Kollisionsgefahr weicht eine auf die nächste Zeile aus, siehe renderEtappenBahn). */ .etappen-bahn { margin-top: 1.7rem; } .etappen-marker-reihe { position: relative; height: 70px; margin: 0 8px; } .etappen-marker { position: absolute; bottom: 0; display: flex; flex-direction: column; align-items: center; transform: translateX(-50%); transition: left 400ms ease; } .etappen-punktzahl { font-family: var(--schrift-zahl); font-size: 0.75rem; font-weight: 700; color: var(--text-schwach); margin-bottom: 2px; transition: color 300ms ease; } .etappen-marker.erreicht .etappen-punktzahl { color: var(--gold); } .etappen-kreis { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; background: var(--flaeche); border: 2px solid var(--flaeche-rand); color: var(--text-schwach); position: relative; transition: background 300ms ease, border-color 300ms ease, color 300ms ease; } .etappen-stift { width: 2px; height: 12px; background: var(--flaeche-rand); transition: background 300ms ease; } .etappen-marker.erreicht .etappen-kreis { background: linear-gradient(145deg, var(--gold), #ffd166); border-color: var(--gold); color: var(--mitternacht); box-shadow: 0 0 10px 1px color-mix(in srgb, var(--gold) 40%, transparent); } .etappen-marker.erreicht .etappen-stift { background: var(--gold); } .etappen-kreis::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--gold); opacity: 0; } .etappen-marker.erreicht .etappen-kreis::after { animation: etappe-puls 1.8s ease-out infinite; } @keyframes etappe-puls { 0% { transform: scale(0.85); opacity: 0.55; } 100% { transform: scale(1.55); opacity: 0; } } .etappen-stern { position: absolute; top: -6px; right: -6px; font-size: 0.78rem; opacity: 0; transform: scale(0.4) rotate(-20deg); transition: opacity 250ms ease, transform 250ms ease; } .etappen-marker.erreicht .etappen-stern { opacity: 1; transform: scale(1) rotate(0deg); } /* Einmaliger Pop+Burst genau im Moment des Überschreitens, zusätzlich zum dauerhaften Ping-Ring oben. */ .etappen-marker.frisch .etappen-kreis { animation: etappe-pop 550ms ease; } @keyframes etappe-pop { 0% { transform: scale(1); } 45% { transform: scale(1.4); } 100% { transform: scale(1); } } .etappen-burst { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 2px solid var(--gold); opacity: 0; pointer-events: none; } .etappen-marker.frisch .etappen-burst { animation: etappe-burst 650ms ease-out; } @keyframes etappe-burst { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } } .etappen-track { height: 18px; border-radius: 999px; background: var(--flaeche); border: 1px solid var(--flaeche-rand); overflow: hidden; position: relative; margin: 0 8px; } .etappen-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--cyan), var(--gruen)); border-radius: 999px; transition: width 500ms ease, background 400ms ease; } .etappen-fill.voll { background: linear-gradient(90deg, var(--gold), #ffd166); } /* Höhe wird von renderEtappenBahn (start.js) passend zur tatsächlich gebrauchten Zeilenzahl gesetzt (max. 3 Etappen = max. 3 Zeilen, meist nur 1) - der Wert hier ist nur der Platzhalter vor dem ersten Render, sonst bliebe bei wenigen Etappen unnötig viel leere Fläche unter der Bahn stehen. */ .etappen-label-reihe { position: relative; height: 34px; margin: 0.3rem 8px 0; } .etappen-label { position: absolute; /* Kein fester width, nur max-width: kurze Texte ("test") bleiben schmal und stossen sich seltener mit dem Nachbarn, lange (bis 20 Zeichen) brechen ab hier um. start.js misst die tatsächliche Breite (offsetWidth) für die Kollisionsprüfung, statt pauschal von dieser Maximalbreite auszugehen. */ max-width: 104px; transform: translateX(-50%); text-align: center; font-size: 0.72rem; line-height: 1.3; color: var(--text-schwach); text-wrap: balance; transition: color 300ms ease, left 400ms ease; } .etappen-label.erreicht { color: var(--gold); font-weight: 700; } .hero-rest { margin-top: 0.6rem; font-size: 0.9rem; color: var(--text-schwach); } .hero.erreicht .hero-rest { color: var(--gold); font-weight: 600; } /* ---------- Woche ---------- */ .woche-nav { display: flex; align-items: center; justify-content: space-between; font-weight: 600; } .woche-nav button { background: var(--flaeche); border: 1px solid var(--flaeche-rand); color: var(--text); width: 2.25rem; height: 2.25rem; border-radius: 999px; font-size: 1.1rem; cursor: pointer; } .woche-tage { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.4rem; margin-top: 0.75rem; touch-action: pan-y; } .tag-zelle { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; min-height: 4.5rem; padding: 0.5rem 0.15rem; border-radius: 10px; background: var(--flaeche); border: 1px solid var(--flaeche-rand); cursor: pointer; overflow: hidden; } /* Füllt sich von unten nach oben wie die Monatszelle, gleicher Massstab (punkte_max = maximal erreichbare Tagesaufgaben-Punkte an dem Tag). */ .tag-zelle-fuellung { position: absolute; left: 0; right: 0; bottom: 0; height: 0%; background: linear-gradient(180deg, var(--cyan), var(--erfolg)); transition: height 500ms ease; } .tag-zelle.voll .tag-zelle-fuellung { background: linear-gradient(180deg, var(--gold), #ffd166); } .tag-zelle.heute { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan); } .tag-zelle.zukunft { opacity: 0.45; pointer-events: none; } .tag-zelle-wochentag, .tag-zelle-punkte { position: relative; z-index: 1; color: var(--text); text-shadow: 0 1px 3px rgb(0 0 0 / 35%); } .tag-zelle-wochentag { font-size: 0.75rem; } .tag-zelle-punkte { font-family: var(--schrift-zahl); font-weight: 700; font-size: 0.95rem; font-variant-numeric: tabular-nums; } .btn-heute { display: block; margin: 0.9rem auto 0; background: transparent; border: 1px solid var(--flaeche-rand); color: var(--text); padding: 0.5rem 1.2rem; border-radius: 999px; font-weight: 600; cursor: pointer; } /* ---------- Woche/Monat-Umschalter ---------- */ .ansicht-umschalter { display: flex; gap: 0.4rem; margin-bottom: 0.75rem; } .ansicht-btn { flex: 1; background: var(--flaeche); border: 1px solid var(--flaeche-rand); color: var(--text-schwach); border-radius: 999px; padding: 0.45rem; font-weight: 700; cursor: pointer; } .ansicht-btn.aktiv { background: var(--cyan); color: var(--mitternacht); border-color: var(--cyan); } .monat-wochentage-kopf { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.3rem; margin-top: 0.75rem; font-size: 0.7rem; color: var(--text-schwach); text-align: center; } .monat-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.3rem; margin-top: 0.3rem; touch-action: pan-y; } .monat-zelle { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--flaeche); border: 1px solid var(--flaeche-rand); font-family: var(--schrift-zahl); font-weight: 700; font-size: 0.8rem; cursor: pointer; overflow: hidden; } /* Füllt sich von unten nach oben, Höhe kommt als Inline-Style von start.js (Punkte des Tages relativ zu den maximal erreichbaren Tagesaufgaben- Punkten, siehe fuellProzent()). */ .monat-zelle-fuellung { position: absolute; left: 0; right: 0; bottom: 0; height: 0%; background: linear-gradient(180deg, var(--cyan), var(--erfolg)); transition: height 500ms ease; } .monat-zelle.voll .monat-zelle-fuellung { background: linear-gradient(180deg, var(--gold), #ffd166); } .monat-zelle-tag { position: relative; z-index: 1; color: var(--text); text-shadow: 0 1px 3px rgb(0 0 0 / 45%); } .monat-zelle-leer { background: transparent; border-color: transparent; cursor: default; } .monat-zelle.heute { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan); } .monat-zelle.zukunft { opacity: 0.35; pointer-events: none; } /* ---------- Tagesansicht ---------- */ .tag-kopf { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .zurueck { font-size: 1.4rem; padding: 0.25rem 0.6rem; } .tag-datum { font-weight: 800; font-size: 1.1rem; text-transform: capitalize; flex: 1; } .tag-punkte { font-family: var(--schrift-zahl); font-weight: 700; color: var(--cyan); font-variant-numeric: tabular-nums; } .aufgaben-gruppe h2 { font-size: 1.1rem; font-weight: 800; margin: 0 0 0.6rem; } .kacheln { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; } .kachel { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; background: var(--flaeche); border: 1px solid var(--flaeche-rand); border-radius: var(--radius); padding: 0.9rem; text-align: left; cursor: pointer; min-height: 5.5rem; } .kachel:disabled { opacity: 0.5; cursor: not-allowed; } .kachel-emoji { font-size: 1.5rem; } .kachel-name { font-weight: 600; font-size: 0.95rem; } .kachel-punkte { font-family: var(--schrift-zahl); font-weight: 700; color: var(--text-schwach); margin-top: auto; } .kachel.erledigt { border-color: var(--erfolg); background: color-mix(in srgb, var(--cyan) 14%, var(--flaeche)); } .kachel.erledigt .kachel-punkte { color: var(--cyan); } .liste { display: flex; flex-direction: column; gap: 0.5rem; } .buch-zeile { background: var(--flaeche); border: 1px solid var(--flaeche-rand); border-radius: var(--radius); padding: 0.7rem 0.9rem; } .buch-zeile-kopf { display: flex; align-items: center; gap: 0.5rem; } .buch-zeile-name { flex: 1; font-weight: 600; } .buch-zeile-punkte { font-family: var(--schrift-zahl); font-weight: 700; } .buch-zeile-eingabe { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.6rem; } .mengenzaehler { display: flex; align-items: center; gap: 0.4rem; font-family: var(--schrift-zahl); } .mengenzaehler button { width: 1.9rem; height: 1.9rem; border-radius: 999px; border: 1px solid var(--flaeche-rand); background: var(--bg); cursor: pointer; font-size: 1rem; } .menge-wert { min-width: 1.2rem; text-align: center; font-variant-numeric: tabular-nums; } .notiz-eingabe { flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--flaeche-rand); border-radius: 8px; padding: 0.4rem 0.6rem; color: var(--text); } .btn-buchen { background: var(--cyan); color: var(--mitternacht); border: none; border-radius: 999px; padding: 0.45rem 0.9rem; font-weight: 800; cursor: pointer; white-space: nowrap; } .btn-buchen:disabled { opacity: 0.5; cursor: not-allowed; } .buchungen ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; } .buchung { display: flex; align-items: center; gap: 0.5rem; background: var(--flaeche); border: 1px solid var(--flaeche-rand); border-radius: 10px; padding: 0.5rem 0.7rem; } .buchung-name { flex: 1; } .buchung-punkte { font-family: var(--schrift-zahl); font-weight: 700; } .btn-tag-reset { display: block; width: 100%; margin-top: 0.5rem; background: transparent; border: 1px dashed var(--gefahr); color: var(--gefahr); border-radius: 10px; padding: 0.6rem; font-weight: 600; cursor: pointer; } .btn-loeschen { background: transparent; border: none; color: var(--text-schwach); font-size: 1rem; cursor: pointer; padding: 0.2rem 0.4rem; } /* ---------- Toast ---------- */ .toast { position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); background: var(--flaeche); border: 1px solid var(--flaeche-rand); color: var(--text); padding: 0.7rem 1rem; border-radius: 999px; font-size: 0.9rem; display: flex; align-items: center; gap: 0.6rem; box-shadow: 0 8px 24px rgb(0 0 0 / 35%); max-width: calc(100vw - 2rem); z-index: 10; } .toast-aktion { background: var(--cyan); color: var(--mitternacht); border: none; border-radius: 999px; padding: 0.3rem 0.7rem; font-weight: 800; cursor: pointer; } /* ---------- Einlösen & Zugriffstrennung ---------- */ /* Eigene Zeile oberhalb der Hero-Box, rechtsbündig (Design/Verwaltung/ Login/Logout - Elternmodus-Kram, bewusst ausserhalb der Box, die dem Kind gehört). */ .top-leiste { display: flex; justify-content: flex-end; } .hero-top-aktionen { display: flex; align-items: center; gap: 0.4rem; } .hero-top-aktionen button { font: inherit; } .btn-einloesen { display: block; width: 100%; margin-top: 1rem; background: linear-gradient(90deg, var(--gold), #ffd166); color: var(--mitternacht); border: none; border-radius: 999px; padding: 0.75rem; font-weight: 800; font-size: 1rem; cursor: pointer; /* Dezenter Schatten-Puls, solange der Button sichtbar ist - er wartet wirklich auf eine Aktion (Etappe oder volles Ziel einlösen). */ animation: einloesen-puls 1.8s ease-in-out infinite; } @keyframes einloesen-puls { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 55%, transparent); } 50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--gold) 0%, transparent); } } .erinnerung-banner { display: flex; align-items: center; gap: 0.6rem; background: var(--flaeche); border: 1px solid var(--gold); border-radius: var(--radius); padding: 0.6rem 0.8rem; font-size: 0.85rem; } .erinnerung-banner span { flex: 1; } .erinnerung-banner a { color: var(--gold); font-weight: 700; white-space: nowrap; } .erinnerung-banner button { background: transparent; border: none; color: var(--text-schwach); cursor: pointer; font-size: 1rem; } .start-nav { text-align: center; } .start-nav a { color: var(--cyan); font-weight: 600; font-size: 0.9rem; } .export-nav { display: flex; justify-content: center; gap: 1.2rem; } .app--login { padding-top: 15vh; } .zurueck-link { display: block; text-align: center; margin-top: 1rem; color: var(--text-schwach); font-size: 0.9rem; } /* ---------- Avatare ---------- */ .avatar-bild, .avatar-platzhalter { width: 3.5rem; height: 3.5rem; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .avatar-platzhalter { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--cyan), var(--gold)); color: var(--mitternacht); font-family: var(--schrift-zahl); font-weight: 700; font-size: 1.4rem; } .buchung-avatar.avatar-bild, .buchung-avatar.avatar-platzhalter { width: 1.7rem; height: 1.7rem; font-size: 0.8rem; margin-left: auto; } .hero-admin-bild.avatar-bild, .hero-admin-bild.avatar-platzhalter { width: 1.6rem; height: 1.6rem; font-size: 0.75rem; border: 1px solid var(--flaeche-rand); } /* ---------- Kind-Umschalter ---------- */ /* Zeigt immer, welches Kind gerade aktiv ist - auch mit nur einem Kind (siehe kinder.js renderSwitcher), deshalb bewusst kompakt statt aufdringlich. Sitzt oben rechts in der Hero-Box, neben "Level X" - min-width:0 lässt den Flex-Item schrumpfen, damit overflow-x wirklich greift statt die Box zu sprengen, falls mal mehr Kinder als Platz vorhanden sind. */ .kind-switcher { display: flex; gap: 0.6rem; overflow-x: auto; min-width: 0; } .kind-switcher-btn { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; background: var(--flaeche); border: 1px solid var(--flaeche-rand); border-radius: 999px; padding: 0.35rem 0.9rem 0.35rem 0.35rem; color: var(--text-schwach); font-weight: 600; font-size: 0.85rem; } .kind-switcher-btn.aktiv { border-color: var(--gold); color: var(--text); } .kind-switcher-bild.avatar-bild, .kind-switcher-bild.avatar-platzhalter { width: 1.8rem; height: 1.8rem; font-size: 0.8rem; } /* ---------- Login: Profilauswahl ---------- */ .profil-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: 0.8rem; margin-top: 0.8rem; } .profil-kachel { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; background: var(--flaeche); border: 1px solid var(--flaeche-rand); border-radius: var(--radius); padding: 0.9rem 0.4rem; cursor: pointer; color: var(--text); font-weight: 600; font-size: 0.85rem; } .profil-gewaehlt { display: flex; align-items: center; gap: 0.6rem; justify-content: center; font-weight: 700; margin-bottom: 0.4rem; } .profil-gewaehlt .avatar-bild, .profil-gewaehlt .avatar-platzhalter { width: 2.2rem; height: 2.2rem; font-size: 1rem; } .erfolg-overlay { position: fixed; inset: 0; background: rgb(11 17 32 / 85%); display: flex; align-items: center; justify-content: center; z-index: 30; text-align: center; padding: var(--spacing); } .erfolg-inhalt { background: var(--flaeche); border: 1px solid var(--gold); box-shadow: 0 0 48px 8px rgb(246 169 40 / 45%); border-radius: var(--radius); padding: 2rem 1.5rem; max-width: 400px; } .erfolg-titel { font-family: var(--schrift-zahl); font-weight: 700; font-size: 1.6rem; color: var(--gold); margin-bottom: 0.6rem; } .erfolg-inhalt .btn-buchen { margin-top: 1rem; width: 100%; } /* ---------- Historie ---------- */ .einfache-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; } .einfache-liste li { background: var(--flaeche); border: 1px solid var(--flaeche-rand); border-radius: 10px; padding: 0.5rem 0.7rem; } .heute-gesamt { margin-top: 0.6rem; text-align: center; font-family: var(--schrift-zahl); font-weight: 700; font-size: 1.2rem; color: var(--cyan); } .wochen-chart { display: grid; grid-template-columns: repeat(12, 1fr); align-items: end; gap: 0.3rem; height: 8rem; background: var(--flaeche); border: 1px solid var(--flaeche-rand); border-radius: var(--radius); padding: 0.6rem 0.4rem 0.3rem; } .wochen-balken { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 0.2rem; } .wochen-balken-fuellung { width: 100%; background: linear-gradient(180deg, var(--cyan), var(--erfolg)); border-radius: 4px 4px 0 0; min-height: 2px; } .wochen-balken-label { font-family: var(--schrift-zahl); font-size: 0.6rem; color: var(--text-schwach); } /* ---------- Aufgabenverwaltung ---------- */ .icon-link { font-size: 1.2rem; padding: 0.2rem 0.4rem; border-radius: 8px; border: 1px solid var(--flaeche-rand); } .hinweis { background: var(--flaeche); border: 1px solid var(--flaeche-rand); border-radius: var(--radius); padding: 0.7rem 0.9rem; font-size: 0.85rem; color: var(--text-schwach); margin: 0; } .verwaltungsliste { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.6rem; } .verwaltungszeile { display: flex; align-items: center; gap: 0.5rem; background: var(--flaeche); border: 1px solid var(--flaeche-rand); border-radius: 10px; padding: 0.5rem 0.6rem; touch-action: pan-y; } .verwaltungszeile.inaktiv { opacity: 0.5; } .verwaltungszeile.wird-gezogen { position: relative; z-index: 5; border-color: var(--cyan); box-shadow: 0 8px 20px rgb(0 0 0 / 30%); } .zieh-griff { touch-action: none; cursor: grab; color: var(--text-schwach); padding: 0 0.2rem; font-size: 1.1rem; } .verwaltungszeile-name { flex: 1; font-weight: 600; } .verwaltungszeile-name small { font-weight: 400; color: var(--text-schwach); } .verwaltungszeile-punkte { font-family: var(--schrift-zahl); font-weight: 700; } .btn-bearbeiten, .btn-loeschen { background: transparent; border: 1px solid var(--flaeche-rand); color: var(--text); border-radius: 8px; width: 2rem; height: 2rem; cursor: pointer; } .btn-neu { background: transparent; border: 1px dashed var(--flaeche-rand); color: var(--text-schwach); border-radius: 10px; padding: 0.5rem; width: 100%; cursor: pointer; font-weight: 600; } .einstellungen-form { display: flex; flex-direction: column; gap: 0.7rem; background: var(--flaeche); border: 1px solid var(--flaeche-rand); border-radius: var(--radius); padding: 0.9rem; margin-bottom: 0.8rem; } .einstellungen-form label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; color: var(--text-schwach); font-weight: 600; } .einstellungen-form input[type="number"], .einstellungen-form input[type="password"], .einstellungen-form input[type="text"] { background: var(--bg); border: 1px solid var(--flaeche-rand); border-radius: 8px; padding: 0.5rem 0.6rem; color: var(--text); font-size: 1rem; } .einstellungen-schalter { flex-direction: row !important; align-items: center; gap: 0.5rem !important; } /* ---------- Modal ---------- */ /* align-items:flex-start + overflow-y:auto auf dem äusseren .modal statt flex-end + max-height auf dem inneren Inhalt: bei geöffneter Bildschirm- tastatur (und z.B. Chromes "Gespeicherte Passwörter"-Leiste) schrumpft die sichtbare Fläche von unten, ein am unteren Rand fixierter Dialog landet dann teilweise dahinter und die Buttons sind nicht mehr erreichbar. So bleibt der ganze Dialog scrollbar, die Buttons sind immer erreichbar, unabhängig davon wie viel Platz Tastatur/Browser-UI wegnehmen. */ .modal { position: fixed; inset: 0; background: rgb(0 0 0 / 55%); display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 1.25rem 0; z-index: 20; } /* Der Emoji-Picker öffnet sich bewusst ÜBER einem bereits offenen Aufgaben- oder Etappen-Modal (siehe oeffneEmojiModal, kein schliesseAlleModals() davor). Ohne eigenen z-index hinge die Stapelreihenfolge von der zufälligen DOM-Position ab - ein später im HTML stehendes Modal (z.B. Etappe) läge sonst darüber und der Picker wäre unsichtbar dahinter. */ #emoji-modal { z-index: 25; } .modal-inhalt { background: var(--bg); border: 1px solid var(--flaeche-rand); border-radius: 18px; padding: var(--spacing); width: 100%; max-width: 560px; margin: auto 0; display: flex; flex-direction: column; gap: 0.8rem; } .modal-inhalt h2 { margin: 0; } .modal-inhalt label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; color: var(--text-schwach); font-weight: 600; } .modal-inhalt input, .modal-inhalt select { background: var(--flaeche); border: 1px solid var(--flaeche-rand); border-radius: 8px; padding: 0.55rem 0.6rem; color: var(--text); font-size: 1rem; } .wochentage-auswahl { border: none; padding: 0; margin: 0; } .wochentage-auswahl legend { font-size: 0.85rem; color: var(--text-schwach); font-weight: 600; padding: 0; } .wochentage-buttons { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.3rem; margin-top: 0.3rem; } .tag-toggle { background: var(--flaeche); border: 1px solid var(--flaeche-rand); color: var(--text-schwach); border-radius: 8px; padding: 0.5rem 0; font-weight: 700; cursor: pointer; } .tag-toggle.aktiv { background: var(--cyan); color: var(--mitternacht); border-color: var(--cyan); } .modal-aktionen { display: flex; gap: 0.6rem; margin-top: 0.4rem; } .modal-aktionen button { flex: 1; padding: 0.6rem; border-radius: 999px; font-weight: 700; cursor: pointer; } #task-abbrechen, #admin-abbrechen, #avatar-abbrechen { background: transparent; border: 1px solid var(--flaeche-rand); color: var(--text); } /* ---------- Avatar-Zuschneider ---------- */ .avatar-zuschneider { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; margin-top: 0.6rem; } .avatar-canvas-wrap { position: relative; width: 280px; max-width: 100%; aspect-ratio: 1; } #avatar-canvas { width: 100%; height: 100%; border-radius: 10px; background: var(--bg); touch-action: none; cursor: grab; } .avatar-kreis-guide { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 999px rgb(0 0 0 / 55%); pointer-events: none; } .avatar-zoom-label { display: flex; flex-direction: column; gap: 0.3rem; width: 100%; font-size: 0.85rem; color: var(--text-schwach); font-weight: 600; } /* ---------- Emoji-Picker ---------- */ .emoji-eingabe-zeile { display: flex; gap: 0.5rem; } .emoji-eingabe-zeile input { flex: 1; min-width: 0; font-size: 1.3rem; text-align: center; } .btn-emoji-waehlen { background: var(--flaeche); border: 1px solid var(--flaeche-rand); color: var(--text); border-radius: 8px; padding: 0 0.9rem; font-weight: 700; font-size: 0.85rem; cursor: pointer; white-space: nowrap; } .emoji-picker { max-height: 80vh; } .emoji-kategorien { display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.4rem; margin-bottom: 0.2rem; scrollbar-width: thin; } .emoji-kategorie-btn { flex-shrink: 0; background: var(--flaeche); border: 1px solid var(--flaeche-rand); color: var(--text-schwach); border-radius: 999px; padding: 0.4rem 0.85rem; font-size: 0.8rem; font-weight: 700; cursor: pointer; white-space: nowrap; } .emoji-kategorie-btn.aktiv { background: var(--cyan); color: var(--mitternacht); border-color: var(--cyan); } .emoji-liste { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.4rem; overflow-y: auto; padding: 0.2rem; } .emoji-option { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; background: var(--flaeche); border: 1px solid var(--flaeche-rand); border-radius: 10px; cursor: pointer; transition: transform 120ms ease, border-color 120ms ease; } .emoji-option:active { transform: scale(0.9); border-color: var(--cyan); } /* ---------- Punkte-Popup beim Buchen ---------- */ .punkte-popup-lage { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 40; } .punkte-popup { position: absolute; font-family: var(--schrift-zahl); font-weight: 700; font-size: clamp(2.75rem, 18vw, 5.5rem); font-variant-numeric: tabular-nums; text-shadow: 0 6px 28px rgb(0 0 0 / 50%); animation: punkte-popup-anim 900ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } .punkte-popup.plus { color: var(--gruen); } .punkte-popup.minus { color: var(--rot); } @keyframes punkte-popup-anim { 0% { transform: scale(0.3); opacity: 0; } 18% { transform: scale(1.2); opacity: 1; } 32% { transform: scale(1); opacity: 1; } 72% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } } /* ---------- Münzenflug beim Buchen (Pluspunkte) ---------- */ .muenze { position: fixed; font-size: 1.6rem; z-index: 50; pointer-events: none; filter: drop-shadow(0 2px 4px rgb(0 0 0 / 40%)); animation: muenze-flug 750ms cubic-bezier(0.3, 0.6, 0.35, 1) forwards; } @keyframes muenze-flug { 0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; } 70% { transform: translate(calc(var(--dx) * 0.9), calc(var(--dy) * 0.9 - 12px)) rotate(540deg) scale(1.15); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) rotate(720deg) scale(0.25); opacity: 0; } } @media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }