/* /public/css/style.css * ---------------------------------------------------------------------------- * Basis-Design des Familien-Assistenten. * - Mobile First (ab 320px), Touch-Targets >= 44px * - Automatisch Hell/Dunkel via prefers-color-scheme * - Manueller Override ueber (siehe app.js) * ---------------------------------------------------------------------------- */ /* === Design-Token: Helles Schema (Standard) =============================== */ :root { --farbe-bg: #f4f5f7; --farbe-flaeche: #ffffff; --farbe-text: #1a1f24; --farbe-text-leise:#5b6670; --farbe-rand: #d8dee4; --farbe-primaer: #0f766e; /* Petrol */ --farbe-primaer-kontrast: #ffffff; --farbe-fehler-bg: #fdecec; --farbe-fehler-text:#9b1c1c; --farbe-info-bg: #e8f1fb; --farbe-info-text: #1c4a7a; --farbe-badge-bg: #e7eaee; --farbe-badge-text:#374049; --radius: 12px; --schatten: 0 2px 10px rgba(0, 0, 0, .06); --tap: 44px; /* minimale Touch-Groesse */ } /* === Design-Token: Dunkles Schema ======================================== */ @media (prefers-color-scheme: dark) { :root { --farbe-bg: #14181d; --farbe-flaeche: #1d232a; --farbe-text: #e7ecf0; --farbe-text-leise:#9aa6b1; --farbe-rand: #2c343d; --farbe-primaer: #2dd4bf; --farbe-primaer-kontrast: #07211f; --farbe-fehler-bg: #3a1d1d; --farbe-fehler-text:#f5b5b5; --farbe-info-bg: #16304a; --farbe-info-text: #bcd8f5; --farbe-badge-bg: #2c343d; --farbe-badge-text:#c4ccd4; --schatten: 0 2px 10px rgba(0, 0, 0, .35); } } /* === Manueller Theme-Override (hat Vorrang vor prefers-color-scheme) ====== */ html[data-theme="hell"] { --farbe-bg:#f4f5f7; --farbe-flaeche:#fff; --farbe-text:#1a1f24; --farbe-text-leise:#5b6670; --farbe-rand:#d8dee4; --farbe-primaer:#0f766e; --farbe-primaer-kontrast:#fff; --farbe-fehler-bg:#fdecec; --farbe-fehler-text:#9b1c1c; --farbe-info-bg:#e8f1fb; --farbe-info-text:#1c4a7a; --farbe-badge-bg:#e7eaee; --farbe-badge-text:#374049; } html[data-theme="dunkel"] { --farbe-bg:#14181d; --farbe-flaeche:#1d232a; --farbe-text:#e7ecf0; --farbe-text-leise:#9aa6b1; --farbe-rand:#2c343d; --farbe-primaer:#2dd4bf; --farbe-primaer-kontrast:#07211f; --farbe-fehler-bg:#3a1d1d; --farbe-fehler-text:#f5b5b5; --farbe-info-bg:#16304a; --farbe-info-text:#bcd8f5; --farbe-badge-bg:#2c343d; --farbe-badge-text:#c4ccd4; } /* === Grundlayout ========================================================= */ * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 16px; line-height: 1.5; color: var(--farbe-text); background: var(--farbe-bg); -webkit-text-size-adjust: 100%; } h1 { font-size: 1.5rem; margin: 0 0 .5rem; } h2 { font-size: 1.2rem; margin: 0 0 .5rem; } a { color: var(--farbe-primaer); } /* === Authentifizierungs-Seiten (Login/Verify/Setup) ====================== */ .auth-seite { display: flex; align-items: center; justify-content: center; padding: 1.25rem; } .auth-karte { width: 100%; max-width: 380px; background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand); border-radius: var(--radius); box-shadow: var(--schatten); padding: 1.75rem 1.5rem; } .auth-karte--breit { max-width: 520px; } .hinweis { color: var(--farbe-text-leise); margin: 0 0 1.25rem; } .fusszeile { color: var(--farbe-text-leise); font-size: .9rem; margin-top: 1.25rem; } /* === Formulare =========================================================== */ label { display: block; font-weight: 600; margin: 1rem 0 .35rem; } input[type="email"], input[type="password"], input[type="text"], select { width: 100%; min-height: var(--tap); padding: .65rem .8rem; font-size: 1rem; color: var(--farbe-text); background: var(--farbe-bg); border: 1px solid var(--farbe-rand); border-radius: 10px; } input:focus { outline: 2px solid var(--farbe-primaer); outline-offset: 1px; } .code-eingabe { letter-spacing: .5em; text-align: center; font-size: 1.6rem; font-variant-numeric: tabular-nums; } fieldset { border: 1px solid var(--farbe-rand); border-radius: 10px; padding: .5rem 1rem 1rem; margin: 0 0 1rem; } legend { font-weight: 700; padding: 0 .4rem; } /* === Buttons ============================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); padding: .65rem 1.1rem; font-size: 1rem; font-weight: 600; text-decoration: none; border: 1px solid transparent; border-radius: 10px; cursor: pointer; } .btn--primaer { width: 100%; margin-top: 1.25rem; color: var(--farbe-primaer-kontrast); background: var(--farbe-primaer); } .btn--primaer:hover { filter: brightness(1.05); } .btn--klein { min-height: 38px; padding: .35rem .8rem; font-size: .9rem; color: var(--farbe-text); background: var(--farbe-flaeche); border-color: var(--farbe-rand); } /* === Meldungen =========================================================== */ .meldung { border-radius: 10px; padding: .8rem 1rem; margin: 0 0 1rem; font-size: .95rem; } .meldung--fehler { background: var(--farbe-fehler-bg); color: var(--farbe-fehler-text); } .meldung--info { background: var(--farbe-info-bg); color: var(--farbe-info-text); } .meldung ul { margin: 0; padding-left: 1.1rem; } /* === Badges ============================================================== */ .badge { display: inline-block; font-size: .72rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px; background: var(--farbe-badge-bg); color: var(--farbe-badge-text); vertical-align: middle; } .badge--admin { background: var(--farbe-primaer); color: var(--farbe-primaer-kontrast); } /* === Angemeldeter Bereich (Kopf + Inhalt) ================================ */ .kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; background: var(--farbe-flaeche); border-bottom: 1px solid var(--farbe-rand); position: sticky; top: 0; z-index: 10; } .kopf__titel { font-weight: 700; } .kopf__nav { display: flex; align-items: center; gap: .75rem; } .kopf__nutzer{ color: var(--farbe-text-leise); font-size: .95rem; } .inhalt { max-width: 760px; margin: 0 auto; padding: 1rem; display: grid; gap: 1rem; } .karte { background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand); border-radius: var(--radius); box-shadow: var(--schatten); padding: 1.25rem; } .status-liste { margin: 0; padding-left: 1.1rem; } .status-liste li { margin: .25rem 0; } /* === Benutzerverwaltung ================================================== */ .user-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem; padding: .85rem 0; border-top: 1px solid var(--farbe-rand); } .user-zeile:first-of-type { border-top: 0; } .user-info { min-width: 0; } .user-meta { color: var(--farbe-text-leise); font-size: .85rem; margin-top: .2rem; word-break: break-word; } .user-aktionen { display: flex; flex-wrap: wrap; gap: .4rem; align-items: flex-start; } .inline { display: inline-block; margin: 0; } /* Aufklappbares Passwort-Reset-Formular */ details.inline > summary { list-style: none; user-select: none; } details.inline > summary::-webkit-details-marker { display: none; } .pw-form { display: flex; gap: .4rem; margin-top: .4rem; align-items: center; } .pw-form input[type="password"] { min-width: 160px; } /* Zusatz-Badges */ .badge--ok { background: #15803d; color: #fff; } .badge--aus { background: #9ca3af; color: #1a1f24; } /* Gefahr-Button (Loeschen) */ .btn--gefahr { color: var(--farbe-fehler-text); background: var(--farbe-fehler-bg); border-color: var(--farbe-fehler-text); } /* === Dashboard: Kreuz-Check-Warnungen ==================================== */ .status-ok { color: #15803d; font-weight: 600; margin: 0; } .badge--warnung { background: #b91c1c; color: #fff; } .warn-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; } .warn { border: 1px solid var(--farbe-rand); border-left-width: 4px; border-radius: 10px; padding: .7rem .85rem; background: var(--farbe-bg); } .warn--warnung { border-left-color: #b91c1c; } .warn--hinweis { border-left-color: #d97706; } .warn--info { border-left-color: var(--farbe-primaer); } .warn__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; } .warn__stufe { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: .1rem .45rem; border-radius: 999px; background: var(--farbe-badge-bg); color: var(--farbe-badge-text); } .warn--warnung .warn__stufe { background: #b91c1c; color: #fff; } .warn--hinweis .warn__stufe { background: #d97706; color: #fff; } .warn--info .warn__stufe { background: var(--farbe-primaer); color: var(--farbe-primaer-kontrast); } .warn__text { margin: .35rem 0 0; color: var(--farbe-text-leise); font-size: .92rem; } .warn__link { display: inline-block; margin-top: .4rem; font-weight: 600; font-size: .9rem; } /* === Dashboard: Schnellzugriff-Kacheln =================================== */ .kachel-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .7rem; } .kachel { display: flex; flex-direction: column; gap: .25rem; min-height: var(--tap); padding: .85rem; text-decoration: none; color: var(--farbe-text); background: var(--farbe-bg); border: 1px solid var(--farbe-rand); border-radius: 10px; } .kachel:hover { border-color: var(--farbe-primaer); } .kachel__icon { font-size: 1.5rem; } .kachel__name { font-weight: 700; } .kachel__text { font-size: .82rem; color: var(--farbe-text-leise); } /* === Dashboard: Pinnwand ================================================= */ textarea { width: 100%; padding: .65rem .8rem; font: inherit; color: var(--farbe-text); background: var(--farbe-bg); border: 1px solid var(--farbe-rand); border-radius: 10px; resize: vertical; } textarea:focus { outline: 2px solid var(--farbe-primaer); outline-offset: 1px; } .pinnwand__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .6rem; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* === Reduzierte Bewegung respektieren ==================================== */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }