/* ========================================================================== Haushalter – app.css Reihenfolge der Abschnitte: 1. Basis & Reset 2. Komponenten (modernist-components.css, ohne :root – Tokens kommen aus theme.css) 3. Komponenten-Anpassungen (Touch-Ziele, Dialog, Varianten) 4. CSS-Vertrag (README: .page, .sec, .row, .avatar, .check, .bar, .poster, .stat, .toast …) 5. Hilfsklassen (Layout, Typo, Chips, Tabs, Hinweise, Sichtbarkeit …) 6. Layout-Shell (Sidebar / Rail / Mobile-Header / Tabbar / Inhalt) 7. Auth-Screens 8. HTMX, Bewegung Breakpoints: mobil < 700px · Tablet 700–1099px · Desktop >= 1100px Radius überall 0. Schrift Archivo 400/600/800. ========================================================================== */ /* ========================================================================== 1. Basis & Reset ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Modernist Rot hell: Akzent minimal dunkler, damit Bg-Text auf Akzentflaechen (Primaer-Buttons, Poster, Badges) und Akzent-Text WCAG AA (>= 4.5:1) erreicht. */ [data-palette="modernist"][data-theme="light"] { --color-accent: oklch(0.555 0.2 33); } @media (prefers-color-scheme: light) { [data-palette="modernist"]:not([data-theme]) { --color-accent: oklch(0.555 0.2 33); } } body { margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 15px; line-height: 1.55; font-weight: 400; overscroll-behavior-y: contain; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2); } h1 { font-size: 42px; } h2 { font-size: 32px; } h3 { font-size: 25px; } h4 { font-size: 20px; } h5 { font-size: 16px; } h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; } p { margin: 0 0 var(--space-3); } a { color: var(--color-accent-700); text-underline-offset: 3px; } a:hover { color: var(--color-accent-800); } img, svg { display: block; max-width: 100%; } figure { margin: 0; } figcaption { font-size: 11px; margin-top: var(--space-1); color: color-mix(in srgb, var(--color-text) 55%, transparent); } code { font-size: 0.92em; } hr, .hr { height: 2px; border: 0; margin: var(--space-4) 0; background: var(--color-divider); } b, strong { font-weight: 800; } button, input, select, textarea { font-family: inherit; color: inherit; border-radius: 0; } button { cursor: pointer; } button:disabled { cursor: not-allowed; } /* Fokus: 2px Akzent, 2px Abstand */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } ::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); } /* Zahl-Spinner aus */ input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; appearance: textfield; } /* Alpine: vor der Initialisierung verborgen */ [x-cloak] { display: none !important; } .text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); } /* ========================================================================== 2. Komponenten (aus modernist-components.css) ========================================================================== */ /* — buttons — */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-decoration: none; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 14px; line-height: 1.2; color: var(--color-text); background: transparent; border: 1px solid transparent; padding: var(--space-2) calc(var(--space-3) * 1.2); border-radius: var(--radius-md); } .btn svg { display: block; } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .btn-primary { background: var(--color-accent); color: var(--color-bg); } .btn-primary:hover { background: color-mix(in oklch, var(--color-accent) 86%, var(--color-text)); color: var(--color-bg); } .btn-primary:active { background: color-mix(in oklch, var(--color-accent) 74%, var(--color-text)); } .btn-secondary { border-color: var(--color-divider); } .btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); } .btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); } .btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); } .btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); } .btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); } .btn-icon { width: 36px; height: 36px; padding: 0; } .btn-block { width: 100%; margin-top: var(--space-2); justify-content: flex-start; text-align: left; } /* — forms — */ .field > label { display: block; font-size: 12px; margin-bottom: 5px; color: color-mix(in srgb, var(--color-text) 70%, transparent); } .input { width: 100%; min-height: 36px; padding: 6px 10px; font: inherit; font-size: 14px; color: var(--color-text); caret-color: var(--color-accent); background: var(--color-surface); /* Rahmen mit >= 3:1 Kontrast (WCAG 1.4.11) - der Divider-Token allein hat nur ~2:1 */ border: 1px solid color-mix(in oklch, var(--color-text) 58%, var(--color-bg)); border-radius: var(--radius-md); } .input:hover { border-color: color-mix(in oklch, var(--color-text) 80%, var(--color-bg)); } .input:focus-visible { border-color: var(--color-accent); outline-offset: 0; } textarea.input { min-height: 90px; resize: vertical; } .radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; } .radio input, .seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .radio .dot { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 1.5px solid var(--color-divider); } .radio:hover .dot { border-color: var(--color-accent); } .radio input:checked + .dot { border-color: var(--color-accent); background: var(--color-accent); box-shadow: inset 0 0 0 4px var(--color-bg); } .radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; } .seg { display: inline-flex; overflow: hidden; border: 1px solid var(--color-divider); border-radius: var(--radius-md); } .seg-opt { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 13px; cursor: pointer; } .seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); } .seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); } .seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); } .seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; } /* — cards — */ .card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface); } .card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); } .card-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 17px; line-height: 1.2; } .card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; } .card-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: color-mix(in srgb, var(--color-text) 50%, transparent); } .elev-sm { box-shadow: var(--shadow-sm); } .elev-md { box-shadow: var(--shadow-md); } .elev-lg { box-shadow: var(--shadow-lg); } /* — tags — */ .tag { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 0.02em; padding: 3px 10px; border-radius: calc(var(--radius-md) * 0.75); } .tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); } .tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); } .tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); } .tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); } /* — navigation — */ .nav { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-bottom: 2px solid var(--color-divider); } .nav-brand { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 18px; margin-right: auto; } .nav a { color: inherit; text-decoration: none; font-size: 14px; } .nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); } /* — tables — */ .table { width: 100%; border-collapse: collapse; font-size: 14px; } .table th { text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 60%, transparent); padding: var(--space-2); border-bottom: 2px solid var(--color-divider); } .table td { padding: var(--space-2); border-bottom: 1px solid var(--color-divider); } .table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); } /* — dialog — */ .dialog-backdrop { position: fixed; inset: 0; display: grid; place-items: center; padding: var(--space-4); background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent); } .dialog { width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-lg); } .dialog-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 20px; } .dialog-body { font-size: 14px; opacity: 0.85; } .dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); } /* ========================================================================== 3. Komponenten-Anpassungen (Prototyp-Maße, Touch-Ziele >= 44px) ========================================================================== */ /* Buttons: nie umbrechen, 44px hoch, Labels linksbündig in breiten Buttons */ .btn { white-space: nowrap; min-height: 44px; } .btn-icon { width: 44px; height: 44px; min-height: 44px; flex: none; } .btn-icon-sm { width: 36px; height: 36px; min-height: 36px; padding: 0; flex: none; } .btn-sm { min-height: 36px; font-size: 13px; padding: 0 10px; } .btn-lg { min-height: 48px; padding: 0 18px; } .btn-wide { flex: 1; justify-content: flex-start; } .btn-cta { min-height: 52px; padding: 0 18px; font-size: 16px; justify-content: space-between; } .btn-block { min-height: 48px; padding: 0 18px; } /* Destruktiv (z. B. „Haushalt verlassen“): Sekundär-Button in Akzent */ .btn-danger { border-color: var(--color-accent); color: var(--color-accent-700); } .btn-danger:hover { background: var(--color-accent-100); } /* Ghost-Text in Akzent für Fließtext-Kontrast */ .btn-ghost { color: var(--color-accent-700); } /* Helle Fläche auf Poster (z. B. „Jetzt erledigen“) */ .btn-on-accent { background: var(--color-bg); color: var(--color-text); border: 0; min-height: 48px; padding: 0 20px; font-size: 15px; gap: 10px; } .btn-on-accent:hover { background: var(--color-neutral-200); } a.btn:hover { text-decoration: none; } a.btn-secondary, a.btn-ghost:not(:hover) { text-decoration: none; } /* Formulare: 16px gegen iOS-Zoom, 44px Mindesthöhe */ .input { font-size: 16px; min-height: 44px; } .input-lg { min-height: 48px; } .input-num { font-size: 18px; font-weight: 800; } select.input { appearance: auto; } textarea.input { min-height: 72px; } .field { display: flex; flex-direction: column; min-width: 0; } .field > label { font-weight: 600; } .seg { display: flex; } .seg-inline { display: inline-flex; } .seg-opt { flex: 1; min-height: 44px; justify-content: flex-start; white-space: nowrap; } .seg-wrap { flex-wrap: wrap; } /* Tags */ .tag { font-weight: 600; white-space: nowrap; } /* Dialoge: Bg-Fläche, 520px, scrollt; mobil Bottom-Sheet (siehe Abschnitt 6) */ .dialog-backdrop { z-index: 70; } .dialog { width: min(520px, 100%); background: var(--color-bg); gap: 16px; max-height: 92vh; max-height: 92dvh; overflow: auto; } /* Kinder im scrollenden Flex-Dialog nicht zusammenstauchen (sonst kollabieren .seg mobil) */ .dialog > *, .dialog form > * { flex-shrink: 0; } .dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .dialog-actions { justify-content: flex-start; } /* ========================================================================== 4. CSS-Vertrag ========================================================================== */ /* Seitenrahmen: Wurzel jedes {% block content %} */ .page { display: flex; flex-direction: column; gap: 40px; max-width: 1360px; width: 100%; min-width: 0; } /* Seitenkopf: Kicker + Display links, Buttons rechts */ .page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; } .page-title { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .page-actions { display: flex; flex-wrap: wrap; gap: 8px; } .kicker { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-700); font-weight: 600; } .display { font-family: var(--font-heading); font-size: clamp(40px, 7vw, 88px); line-height: 0.92; letter-spacing: -0.035em; font-weight: 800; margin: 0; overflow-wrap: break-word; } /* Sektionen: Linie oben statt Karte */ .sec, .sec-strong, .sec-accent, .sec-accent2 { display: flex; flex-direction: column; min-width: 0; border-top: 2px solid var(--color-divider); padding-top: 14px; } .sec-strong { border-top: 4px solid var(--color-text); } .sec-accent { border-top: 4px solid var(--color-accent); } .sec-accent2 { border-top: 4px solid var(--color-accent-2); } .sec-title { font-family: var(--font-heading); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 800; line-height: 1.3; margin: 0; } .sec-title-accent { color: var(--color-accent-700); } .sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; min-height: 36px; } .sec-head .btn-ghost { min-height: 36px; } /* Raster & Zweispalter */ .grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 40px 32px; align-items: start; } .split { display: flex; flex-wrap: wrap; gap: 40px 48px; align-items: flex-start; } .split-main { flex: 2 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 16px; } .split-side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 40px; } /* Listenzeile */ .row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--color-divider); min-width: 0; } .row-top { align-items: flex-start; } .row-tight { padding: 9px 0; gap: 10px; } .row-loose { padding: 14px 0; } .row-main { display: flex; flex-direction: column; flex: 1; min-width: 0; } .row-title { font-size: 16px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; } .row-title-lg { font-size: 17px; } .row-title-sm { font-size: 15px; } .row-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .meta { font-size: 13px; color: var(--color-neutral-700); line-height: 1.45; } .meta-sm { font-size: 12px; } /* Avatare: Quadrat, Initiale 800, Farbe per style="background:…" */ .avatar { width: 32px; height: 32px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--av, var(--color-neutral-500)); color: var(--color-bg); font-size: 13px; font-weight: 800; line-height: 1; text-transform: uppercase; user-select: none; } .avatar-xs { width: 22px; height: 22px; font-size: 10px; } .avatar-sm { width: 28px; height: 28px; font-size: 12px; } .avatar-lg { width: 36px; height: 36px; font-size: 14px; } .avatar-empty { background: var(--color-neutral-300); color: var(--color-neutral-800); } /* Mitgliedsfarbe (style="--av:#rrggbb"): Farbton bleibt, Helligkeit wie die Palette (hell L 0.52 / dunkel L 0.78) -> Initiale in --color-bg immer >= 4.5:1. .member-color = dieselbe Fläche ohne Avatar-Typo (z. B. Farbauswahl im Profil). */ .member-color { background: var(--av, var(--color-neutral-500)); } @supports (color: oklch(from red l c h)) { .avatar:not(.avatar-empty), .member-color { background: oklch(from var(--av, var(--color-neutral-500)) 0.52 min(c, 0.16) h); } :root[data-theme="dark"] .avatar:not(.avatar-empty), :root[data-theme="dark"] .member-color { background: oklch(from var(--av, var(--color-neutral-500)) 0.78 min(c, 0.14) h); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .avatar:not(.avatar-empty), :root:not([data-theme]) .member-color { background: oklch(from var(--av, var(--color-neutral-500)) 0.78 min(c, 0.14) h); } } } /* Abhaken: 44×44, 2px Rahmen; Hover = Akzentfläche mit Haken */ .check { width: 44px; height: 44px; flex: none; padding: 0; display: flex; align-items: center; justify-content: center; border: 2px solid var(--color-text); background: transparent; color: transparent; cursor: pointer; } .check:hover, .check:focus-visible { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); } .check:disabled { opacity: 0.45; cursor: not-allowed; } .check:disabled:hover { background: transparent; border-color: var(--color-text); color: transparent; } /* Erledigt-Zustand (z. B. „Gekauft“-Spalte): gefüllt, kleiner */ .check-done { border: 0; background: var(--color-neutral-800); color: var(--color-bg); } .check-done:hover { background: var(--color-text); border: 0; color: var(--color-bg); } .check-sm { width: 32px; height: 32px; } /* Kleine Ziele (32/36px): unsichtbar auf 44px vergrößerte Klickfläche */ .check-sm, .btn-icon-sm { position: relative; } .check-sm::after, .btn-icon-sm::after { content: ""; position: absolute; inset: -6px; } .btn-icon-sm::after { inset: -4px; } /* Mini-Kästchen (Auswahl in Formularen, 24/28px) */ .check-box { width: 24px; height: 24px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--color-text); background: transparent; color: transparent; } .check-box.is-on, input:checked + .check-box { background: var(--color-text); color: var(--color-bg); } input:focus-visible + .check-box { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* Fortschrittsbalken: Track neutral-200, Füllung per Breite */ .bar { height: 6px; background: var(--color-neutral-200); width: 100%; overflow: hidden; } .bar > i { display: block; height: 100%; width: 0; max-width: 100%; background: var(--color-accent); } .bar-sm { height: 4px; } .bar-lg { height: 10px; } .bar-ink > i { background: var(--color-text); } .bar-accent2 > i { background: var(--color-accent-2); } /* Poster: Akzentfläche */ .poster { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px; padding: clamp(20px, 3vw, 32px); background: var(--color-accent); color: var(--color-bg); } .poster a { color: inherit; } /* Fokusring auf Akzentflächen in Bg-Farbe, sonst unsichtbar */ .poster :focus-visible, .auth-poster :focus-visible { outline-color: var(--color-bg); } .poster .kicker { color: inherit; } .poster-main { display: flex; flex-direction: column; gap: 6px; flex: 1 1 260px; min-width: 0; } .poster-title { font-size: clamp(26px, 3.6vw, 40px); font-weight: 800; line-height: 1.02; letter-spacing: -0.02em; } /* Kennzahl-Kachel */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 24px; } @media (max-width: 1099.98px) { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 699.98px) { .stat-grid { gap: 24px 16px; } } @media (max-width: 379.98px) { .stat-value { font-size: 28px; } } .stat { display: flex; flex-direction: column; gap: 4px; padding: 14px 0 0; border: 0; border-top: 2px solid var(--color-text); background: transparent; color: inherit; text-align: left; text-decoration: none; min-width: 0; } a.stat:hover, button.stat:hover { color: var(--color-accent-700); } .stat-label { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-700); } .stat-value { font-size: clamp(32px, 4vw, 48px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; overflow-wrap: break-word; } .stat-sub { font-size: 13px; color: var(--color-neutral-700); } /* Toast: unten links, Ink-Fläche, 8px Akzent-Quadrat */ .toasts { position: fixed; z-index: 80; left: 16px; right: 16px; bottom: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; pointer-events: none; } .toasts:empty { display: none; } .toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 14px 18px; max-width: 480px; background: var(--color-text); color: var(--color-bg); font-size: 14px; line-height: 1.4; box-shadow: var(--shadow-lg); overflow-wrap: anywhere; animation: toast-in .18s ease-out; } .toast { cursor: default; } .toast > span { min-width: 0; } .toast-action { flex: none; margin-left: auto; min-height: 36px; padding: 0 12px; border: 1px solid color-mix(in srgb, var(--color-bg) 50%, transparent); background: transparent; color: var(--color-bg); font-size: 13px; font-weight: 800; white-space: nowrap; cursor: pointer; } .toast-action:hover { background: color-mix(in srgb, var(--color-bg) 14%, transparent); } .toast-action:focus-visible { outline-color: var(--color-bg); } .toast.is-leaving { opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .toast::before { content: ""; width: 8px; height: 8px; flex: none; background: var(--color-accent); } .toast-error::before { background: var(--color-accent-2); } /* ========================================================================== 5. Hilfsklassen ========================================================================== */ /* — Layout: Stack (vertikal) & Cluster (horizontal, umbrechend) — */ .stack { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .stack-0 { gap: 0; } .stack-xs { gap: 4px; } .stack-sm { gap: 8px; } .stack-md { gap: 16px; } .stack-lg { gap: 24px; } .stack-xl { gap: 40px; } .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; } .cluster-xs { gap: 4px; } .cluster-sm { gap: 6px; } .cluster-md { gap: 12px; } .cluster-lg { gap: 8px 20px; } .cluster-nowrap { flex-wrap: nowrap; } .spread { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .self-start { align-self: flex-start; } .grow { flex: 1 1 auto; min-width: 0; } .no-shrink { flex: none; } .w-full { width: 100%; } .mt-auto { margin-top: auto; } .m-0 { margin: 0; } /* — Raster — */ .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 40px 32px; align-items: start; } /* — Formulare — */ .form { display: flex; flex-direction: column; gap: 14px; } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .form-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .form-grid > .span-2, .form-grid-3 > .span-all { grid-column: 1 / -1; } .form-row { display: flex; gap: 8px; align-items: stretch; } .form-row > .input { flex: 1; min-width: 0; } .form-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .field-error, .error { font-size: 13px; font-weight: 600; color: var(--color-accent-700); } .hint { font-size: 13px; color: var(--color-neutral-700); } .toggle-row { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--color-text); font-size: 14px; text-align: left; cursor: pointer; } .toggle-row input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } /* — Typografie — */ .num { font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; } .num-sm { font-size: 18px; letter-spacing: -0.01em; } .num-md { font-size: 24px; } .num-lg { font-size: clamp(32px, 4vw, 48px); } .num-xl { font-size: 56px; } .num-poster { font-size: clamp(56px, 9vw, 96px); letter-spacing: -0.04em; } .unit { font-size: 11px; font-weight: 600; color: var(--color-neutral-700); margin-left: 3px; letter-spacing: 0; } .poster .unit { color: inherit; } .lead { font-size: 15px; color: var(--color-neutral-800); } .text-sm { font-size: 14px; } .text-xs { font-size: 12px; } .text-lg { font-size: 17px; } .text-strong { font-weight: 800; } .text-semibold { font-weight: 600; } .text-accent { color: var(--color-accent-700); } .text-accent2 { color: var(--color-accent-2-700); } .text-soft { color: var(--color-neutral-700); } .text-right { text-align: right; } .label-caps { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-700); } .strike { text-decoration: line-through; color: var(--color-neutral-700); } .pretty { text-wrap: pretty; } .break-all { word-break: break-all; } .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .nowrap { white-space: nowrap; } .empty { font-size: 14px; color: var(--color-neutral-700); padding: 16px 0; margin: 0; } .code { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; padding: 8px; background: var(--color-surface); word-break: break-all; } .link { color: var(--color-accent-700); font-weight: 600; } /* — Icons, Quadrate — */ .icon { display: block; flex: none; } .icon-tile { width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--color-accent-100); color: var(--color-accent-800); } .icon-tile-ink { background: var(--color-text); color: var(--color-bg); } .icon-tile-lg { width: 56px; height: 56px; } .swatch { width: 10px; height: 10px; flex: none; display: inline-block; background: var(--color-accent); } .swatch-sm { width: 6px; height: 6px; } .swatch-lg { width: 22px; height: 22px; } .badge { min-width: 22px; height: 22px; padding: 0 6px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--color-accent); color: var(--color-bg); font-size: 11px; font-weight: 800; line-height: 1; } /* — Chips: Auswahl (aktiv = 2px Ink-Rahmen) & Vorschlag (Akzent-Rahmen) — */ .chip { position: relative; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 10px; border: 1px solid var(--color-divider); background: transparent; color: var(--color-text); font-size: 13px; line-height: 1.2; cursor: pointer; white-space: nowrap; text-decoration: none; } .chip:hover { background: var(--color-neutral-200); } .chip input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .chip.is-active, .chip[aria-pressed="true"], .chip:has(input:checked) { border: 2px solid var(--color-text); padding: 0 9px; font-weight: 600; } .chip:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; } .chip-accent { border-color: var(--color-accent); color: var(--color-accent-700); } .chip-accent:hover { background: var(--color-accent-100); } .chip-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } /* Touch-Geräte: kleine Bedienelemente auf 44px Höhe (Desktop bleibt bei 36px wie im Prototyp) */ @media (pointer: coarse) { .chip, .btn-sm, .sec-head .btn { min-height: 44px; } } /* — Tabs (Listen-Tabs): 3px Akzentlinie unten — */ .tabs { display: flex; gap: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; box-shadow: inset 0 -2px 0 var(--color-divider); } .tabs::-webkit-scrollbar { display: none; } .tab { display: flex; align-items: center; gap: 8px; flex: none; min-height: 48px; padding: 0 18px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--color-neutral-700); font-size: 15px; font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none; } .tab:hover { color: var(--color-accent-700); } .tab.is-active, .tab[aria-current="page"], .tab[aria-selected="true"], .tab:has(input:checked) { border-bottom-color: var(--color-accent); color: var(--color-text); font-weight: 800; } .tab input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .tab-count { font-size: 12px; font-weight: 600; color: var(--color-neutral-700); } /* — Hinweis-/Statusboxen — */ .notice { display: flex; gap: 12px; padding: 16px; border: 2px solid var(--color-text); } .notice-accent { border-color: var(--color-accent); } .notice-soft { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--color-divider); font-size: 13px; color: var(--color-neutral-800); } .notice-fill { border: 0; background: var(--color-accent-100); color: var(--color-accent-900); } .notice-title { font-size: 15px; font-weight: 600; } .box { padding: 16px; border: 2px solid var(--color-text); } .box-soft { padding: 16px; border: 1px solid var(--color-divider); } /* — Zeilen-Buttons (ganze Zeile klickbar; Hover neutral-200) — */ .row-btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid var(--color-divider); background: transparent; color: var(--color-text); font: inherit; text-align: left; cursor: pointer; text-decoration: none; } .row-btn:hover { background: var(--color-neutral-200); } .row-btn[aria-expanded="true"], .row-btn.is-open { background: var(--color-neutral-100); } /* Auswahlkacheln (Icon-/Farbschema-Auswahl): aktiv = 2px Ink-Rahmen bzw. Ink-Fläche */ .option-tile { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--color-divider); background: transparent; color: var(--color-text); text-align: left; cursor: pointer; font-size: 13px; font-weight: 600; } .option-tile:hover { background: var(--color-neutral-200); } .option-tile.is-active, .option-tile:has(input:checked) { border: 2px solid var(--color-text); padding: 9px; font-weight: 800; } .option-tile input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .icon-option { width: 44px; height: 44px; flex: none; padding: 0; display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-divider); background: transparent; color: var(--color-text); cursor: pointer; } .icon-option:hover { background: var(--color-neutral-200); } .icon-option.is-active, .icon-option:has(input:checked) { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); } .icon-option input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .color-option { width: 36px; height: 36px; flex: none; padding: 0; cursor: pointer; border: 2px solid transparent; outline: 2px solid transparent; outline-offset: 2px; } .color-option.is-active, .color-option:has(input:checked) { outline-color: var(--color-text); } .color-option input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } /* Fokus auf verstecktem Input (Radio/Datei) am sichtbaren Element zeigen */ .icon-option:has(input:focus-visible), .color-option:has(input:focus-visible), .btn:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* Liste mit kräftiger Kopflinie (z. B. offene Einkaufsartikel) */ .list { display: flex; flex-direction: column; min-width: 0; } .list-strong { border-top: 2px solid var(--color-text); } .list-divided { border-top: 1px solid var(--color-divider); } /* Ranglisten-Zeile: Rang · Avatar · Name+Balken · Punkte */ .rank-row { display: grid; grid-template-columns: 24px 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 0; } .rank-num { font-size: 13px; font-weight: 800; color: var(--color-neutral-700); } /* Auf-/Zuklappen: Detailbereich unter einer Zeile */ .expand { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 14px; } /* Theme-abhängige Sichtbarkeit (Mond/Sonne) */ .when-dark { display: none !important; } :root[data-theme="dark"] .when-dark { display: revert !important; } :root[data-theme="dark"] .when-light { display: none !important; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .when-dark { display: revert !important; } :root:not([data-theme]) .when-light { display: none !important; } } /* Barrierefreiheit */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Sichtbarkeit je Breakpoint (mobil < 700 · Tablet 700–1099 · Desktop >= 1100) */ @media (max-width: 699.98px) { .hide-mobile, .visible-tablet, .visible-desktop, .visible-tablet-up { display: none !important; } } @media (min-width: 700px) and (max-width: 1099.98px) { .hide-tablet, .visible-mobile, .visible-desktop { display: none !important; } } @media (min-width: 1100px) { .hide-desktop, .visible-mobile, .visible-tablet, .visible-mobile-tablet { display: none !important; } } /* Mobil: Formular-Raster einspaltig erst bei sehr schmalen Geräten */ @media (max-width: 379.98px) { .form-grid, .form-grid-3, .grid-3 { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 699.98px) { .form-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ========================================================================== 6. Layout-Shell Alle Teile sind immer im DOM; Sichtbarkeit nur per Media Query. ========================================================================== */ .shell { min-height: 100vh; min-height: 100dvh; display: flex; background: var(--color-bg); color: var(--color-text); } /* Sprunglink: erst bei Tastaturfokus sichtbar */ .skip-link { position: fixed; z-index: 90; top: calc(8px + env(safe-area-inset-top)); left: calc(8px + env(safe-area-inset-left)); padding: 12px 16px; background: var(--color-text); color: var(--color-bg); font-size: 14px; font-weight: 800; text-decoration: none; transform: translateY(-200%); } .skip-link:focus, .skip-link:focus-visible { transform: none; color: var(--color-bg); outline-offset: 2px; } main:focus { outline: none; } /* Schlüsselziele nicht unter Sticky-Kopf / Tabbar verstecken */ @media (max-width: 699.98px) { html:has(body.has-shell) { scroll-padding-top: 76px; scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom)); } } /* Dialog offen -> Seite dahinter scrollt nicht mit */ html:has(.dialog-backdrop:not([x-cloak]):not([style*="display: none"])) { overflow: hidden; } .dialog { overscroll-behavior: contain; } .shell-body { flex: 1; min-width: 0; display: flex; flex-direction: column; } .shell-main { flex: 1; width: 100%; min-width: 0; padding: 48px 56px 64px; padding-right: max(56px, env(safe-area-inset-right)); } /* Marke */ .brand-mark { width: 22px; height: 22px; flex: none; background: var(--color-accent); display: inline-block; } .brand-name { font-weight: 800; font-size: 20px; letter-spacing: -0.02em; line-height: 1.2; } /* — Sidebar (Desktop) / Rail (Tablet): ein