/* Urlaubstracker — mobil zuerst, helles Design, große Tippflächen. */ /* ------------------------------------------------------------ Grundlagen */ :root { --bg: #f4f6f8; --surface: #ffffff; --surface-2: #eef1f5; --border: #e2e6ec; --text: #101828; --text-muted: #64748b; --text-faint: #94a3b8; --accent: #0f766e; --accent-soft: #d6f2ee; --good: #0f766e; --good-soft: #d6f2ee; --warn: #b45309; --warn-soft: #fdf0d9; --over: #be123c; --over-soft: #fde7ec; --in: #15803d; --radius: 18px; --radius-sm: 12px; --shadow: 0 1px 2px rgb(16 24 40 / 6%), 0 8px 24px -16px rgb(16 24 40 / 24%); --shadow-lift: 0 8px 30px -8px rgb(16 24 40 / 28%); --nav-h: 62px; --safe-b: env(safe-area-inset-bottom, 0px); --page: min(560px, 100%); /* Schrift auf gefüllten Flächen (Accent, Warnung, Fehler). Ein Wert für alle drei: hell sind sie dunkel genug für Weiß, dunkel hell genug für Tinte. */ --on-accent: #ffffff; --toast-bg: #101828; --toast-text: #f8fafc; --toast-border: transparent; --scrim: rgb(2 6 23 / 45%); color-scheme: light; } /* * Dunkle Fassung — dieselbe App, andere Farben. * * Welche gilt, steht als `data-theme` am : gesetzt vom Startschnipsel in * index.html, noch bevor das Stylesheet geladen ist, damit abends nicht erst * eine weiße Seite aufblitzt. „Automatisch“ löst dort schon zu `light` oder * `dark` auf — hier steht deshalb nur ein Block statt zweier gleicher. */ :root[data-theme='dark'] { --bg: #10151b; --surface: #171e26; --surface-2: #212a35; --border: #2c3743; --text: #e6ecf3; --text-muted: #97a6b6; --text-faint: #7d8ea0; --accent: #2dd4bf; --accent-soft: #14312e; --good: #34d399; --good-soft: #14312a; --warn: #fbbf24; --warn-soft: #362a10; --over: #fb7185; --over-soft: #3a1a24; --in: #4ade80; /* Auf hellem Türkis, hellem Bernstein und hellem Rosé liest sich Weiß nicht mehr — dort steht jetzt Tinte. */ --on-accent: #06201d; --toast-bg: #2b3644; --toast-text: #f1f5f9; --toast-border: #3d4a5a; --scrim: rgb(0 0 0 / 62%); /* Schatten tragen im Dunkeln nicht; die Kanten machen die Ränder. */ --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 10px 26px -18px rgb(0 0 0 / 70%); --shadow-lift: 0 10px 32px -10px rgb(0 0 0 / 75%); color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; } body.has-sheet { overflow: hidden; } h1, h2, h3, p, ul, ol { margin: 0; } ul, ol { padding: 0; list-style: none; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; } strong { font-weight: 650; } .icon { flex: none; } .muted { color: var(--text-muted); } .small { font-size: 0.82rem; } /* --------------------------------------------------------------- Gerüst */ .app { width: var(--page); margin-inline: auto; min-height: 100dvh; display: flex; flex-direction: column; } .topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: calc(env(safe-area-inset-top, 0px) + 14px) 18px 12px; /* Deckend, damit beim Scrollen nichts durch die Kopfzeile schimmert. */ background: var(--bg); } .topbar__main { min-width: 0; flex: 1; } .topbar__title { font-size: 1.12rem; font-weight: 650; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar__sub { font-size: 0.8rem; color: var(--text-muted); } .syncdot { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); } .syncdot--on { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, var(--border)); } .syncdot--pending { color: var(--warn); } .syncdot--error { color: var(--over); border-color: color-mix(in srgb, var(--over) 45%, var(--border)); } .main { flex: 1; } .view { padding: 4px 16px calc(var(--nav-h) + var(--safe-b) + 96px); display: flex; flex-direction: column; gap: 22px; } .view--center { min-height: 70dvh; justify-content: center; padding-bottom: 40px; } body.is-onboarding .view { padding-bottom: calc(var(--safe-b) + 40px); } .section { display: flex; flex-direction: column; gap: 10px; } .section__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .section__title { font-size: 0.82rem; font-weight: 620; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); } .section__meta { font-size: 0.88rem; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; } /* ----------------------------------------------------------- Navigation */ .nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: var(--page); z-index: 30; display: grid; grid-template-columns: repeat(4, 1fr); padding-bottom: var(--safe-b); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(14px); border-top: 1px solid var(--border); } .nav__item { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 4px 8px; border: 0; background: none; color: var(--text-faint); height: var(--nav-h); transition: color 0.15s; } .nav__item.is-active { color: var(--accent); } .nav__label { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.01em; } .fab { position: fixed; right: max(16px, calc(50% - var(--page) / 2 + 16px)); bottom: calc(var(--nav-h) + var(--safe-b) + 16px); z-index: 31; display: flex; align-items: center; gap: 7px; padding: 14px 20px 14px 16px; border: 0; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 620; box-shadow: var(--shadow-lift); } .fab:active { transform: translateY(1px); } .fab__label { font-size: 0.92rem; } /* --------------------------------------------------------------- Hero */ .hero { border-radius: var(--radius); padding: 26px 22px 22px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px; text-align: center; } /* Eine Tönung, kein Verlauf: die große Zahl soll auffallen, nicht der Karton. */ .hero--good { background: var(--good-soft); border-color: color-mix(in srgb, var(--good) 22%, var(--border)); } .hero--warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 26%, var(--border)); } .hero--over { background: var(--over-soft); border-color: color-mix(in srgb, var(--over) 28%, var(--border)); } .hero--soon { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 22%, var(--border)); } .hero__label { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); } .hero__amount { font-size: clamp(2.6rem, 13vw, 3.4rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; font-variant-numeric: tabular-nums; } .hero--over .hero__amount { color: var(--over); } .hero__sub { font-size: 0.88rem; color: var(--text-muted); } .hero .bar { margin-top: 12px; } .hero .btn { margin-top: 12px; align-self: center; } /* -------------------------------------------------------------- Kacheln */ .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 10px; text-align: center; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .tiles--flat .tile { background: var(--surface-2); border-color: transparent; } .tile__label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); } /* Schrumpft mit, damit auch „− 1.100,00 €“ in einer Zeile in die Kachel passt. Umbrechen darf sie erst, wenn selbst das nicht mehr reicht — sonst steht das Eurozeichen allein auf der zweiten Zeile. */ .tile__value { font-size: clamp(0.72rem, 3.3vw, 1.02rem); font-weight: 660; font-variant-numeric: tabular-nums; letter-spacing: -0.015em; overflow-wrap: anywhere; } .tile__sub { font-size: 0.7rem; color: var(--text-muted); line-height: 1.25; } .tile--over .tile__value { color: var(--over); } /* --------------------------------------------------------------- Karten */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 14px; } .card--plain { box-shadow: none; } .card__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .card__note { font-size: 0.83rem; color: var(--text-muted); display: flex; align-items: baseline; gap: 6px; } .card__note .icon { transform: translateY(2px); } .summary { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; } .summary__label { font-size: 0.8rem; color: var(--text-muted); font-weight: 600; } .summary__value { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .summary__meta { display: flex; flex-direction: column; align-items: flex-end; font-size: 0.8rem; color: var(--text-muted); text-align: right; } /* Kassenstand im Budget: Beschriftung, Zahl und Einordnung stehen unter- einander an derselben linken Kante. Der Betrag darf umbrechen, ohne dass die Einordnung daneben rutscht und wie ein zweiter Wert aussieht. */ .pot { display: flex; flex-direction: column; gap: 1px; } .pot__meta { font-size: 0.8rem; color: var(--text-muted); } .callout { border-radius: var(--radius-sm); border: 1px dashed var(--border); padding: 14px 16px; font-size: 0.88rem; color: var(--text-muted); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } .callout--soft { border-style: solid; background: var(--surface-2); } .callout__title { font-size: 0.75rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); } /* --------------------------------------------------------------- Listen */ .list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; } .row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 0; border-top: 1px solid var(--border); background: none; text-align: left; } .row:first-child { border-top: 0; } .row:active { background: var(--surface-2); } .row__icon { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: var(--surface-2); color: var(--text-muted); } .row__icon--person { color: #06202b; font-weight: 700; font-size: 0.95rem; } .row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } /* Zwei Zeilen statt einer Ellipse: „Ferienwohnung Anz…“ und „Mietwagen Rest…“ waren auf einem 390-px-Schirm nicht mehr auseinanderzuhalten. */ .row__title { font-size: 0.95rem; font-weight: 560; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; } .row__sub { font-size: 0.76rem; color: var(--text-muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .row__amount { font-weight: 640; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .row__amount--in { color: var(--in); } /* Wer den Eintrag getippt hat — auf dem anderen Handy die Antwort auf „hat das schon jemand eingetragen?“. */ .row__by { display: inline-flex; align-items: center; gap: 5px; color: var(--text-faint); } /* Bezahlte Ausgaben: antippen bearbeitet, der Knopf rechts trägt dieselbe Ausgabe noch einmal ein. Bewusst blasser als der Haken bei den Vormerkungen — das hier ist eine Abkürzung, keine Aufgabe. */ .erow { display: flex; align-items: stretch; border-top: 1px solid var(--border); } .erow:first-child { border-top: 0; } .erow > .row { flex: 1; width: auto; min-width: 0; border-top: 0; padding-right: 4px; } /* Ohne Trennlinie: über eine Liste von zwanzig Einträgen zog sie eine zweite Spalte durch die Seite, als stünde dort etwas zum Ablesen. */ .erow__again { flex: none; width: 48px; display: grid; place-items: center; border: 0; background: none; color: var(--text-faint); opacity: 0.75; } .erow__again:active { background: var(--surface-2); color: var(--accent); opacity: 1; } /* Vorgemerkte Ausgaben: die Zeile trägt zwei Knöpfe — antippen zum Bearbeiten, der Haken rechts trägt sie als bezahlt ein. */ .list--planned { background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); } .prow { display: flex; align-items: stretch; border-top: 1px solid var(--border); } .prow:first-child { border-top: 0; } .prow__open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 12px 4px 12px 14px; border: 0; background: none; text-align: left; } .prow__open:active { background: var(--surface-2); } .prow__done { flex: none; width: 52px; display: grid; place-items: center; border: 0; border-left: 1px solid var(--border); background: none; color: var(--good); } .prow__done:active { background: var(--good-soft); } .row__icon--planned { background: transparent; border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--border)); color: var(--accent); } .row__amount--planned { color: var(--text-muted); } .prow.is-overdue .row__icon--planned { border-color: color-mix(in srgb, var(--warn) 55%, var(--border)); color: var(--warn); } .tag--due { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); } .tag--plan { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); } .section__note { font-size: 0.76rem; color: var(--text-faint); } .tag { font-size: 0.68rem; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted); } .empty { border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: 22px 18px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; } .empty__text { font-size: 0.88rem; color: var(--text-muted); } /* ----------------------------------------------------------- Tagesgruppen */ .daygroups { display: flex; flex-direction: column; gap: 18px; } .daygroup { display: flex; flex-direction: column; gap: 8px; } .daygroup__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .daygroup__title { font-size: 0.95rem; font-weight: 640; } /* Betrag und Einordnung stehen als Block rechts: eine Kante, an der das Auge die Tage untereinander vergleicht. */ .daygroup__nums { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; text-align: right; } .daygroup__sub { font-size: 0.74rem; color: var(--text-faint); } .daygroup__sub.is-over { color: var(--over); } .daygroup__total { font-weight: 660; font-variant-numeric: tabular-nums; } /* --------------------------------------------------------------- Balken */ .bar { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; } .bar__fill { height: 100%; border-radius: 999px; background: var(--accent); transition: width 0.3s ease; } .bar--good .bar__fill { background: var(--good); } .bar--warn .bar__fill { background: var(--warn); } .bar--over .bar__fill { background: var(--over); } .bar--neutral .bar__fill { background: color-mix(in srgb, var(--accent) 55%, var(--border)); } /* ---------------------------------------------------------------- Chart */ .chart { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 14px 10px; display: flex; flex-direction: column; gap: 8px; } .chart__svg { width: 100%; height: 130px; display: block; } .chart__axis { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; } .chart__area { stroke: none; } .chart__stopTop { stop-color: var(--accent); stop-opacity: 0.3; } .chart__stopBottom { stop-color: var(--accent); stop-opacity: 0.02; } .chart__plan { fill: none; stroke: var(--text-faint); stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; } .chart__actual { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; } .chart__dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; } .chart__legend { display: flex; gap: 16px; font-size: 0.74rem; color: var(--text-muted); } .legend__item { display: inline-flex; align-items: center; gap: 6px; } .legend__swatch { width: 14px; height: 3px; border-radius: 2px; display: inline-block; } .legend__swatch--actual { background: var(--accent); } .legend__swatch--plan { background: repeating-linear-gradient(90deg, var(--text-faint) 0 4px, transparent 4px 8px); } .chart__axisLabels { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--text-faint); } /* ------------------------------------------------------------ Kategorien */ .catlist { display: flex; flex-direction: column; gap: 12px; } .cat { display: flex; align-items: center; gap: 12px; } .cat__icon { width: 26px; display: grid; place-items: center; color: var(--text-faint); } .cat__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; } .cat__top { display: flex; justify-content: space-between; gap: 10px; font-size: 0.86rem; } .cat__label { color: var(--text-muted); } .cat__amount { font-weight: 620; font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------ Abrechnung */ .split { display: flex; gap: 18px; padding: 12px 4px 0; flex-wrap: wrap; } .split__item { display: flex; align-items: center; gap: 7px; font-size: 0.84rem; } .split__name { color: var(--text-muted); } .split__value { font-weight: 620; font-variant-numeric: tabular-nums; } .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; } .dot--lg { width: 14px; height: 14px; } .settle { display: flex; flex-direction: column; gap: 2px; } .settle__row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--border); } .settle__row:last-child { border-bottom: 0; } .settle__who { display: flex; align-items: center; gap: 8px; font-weight: 600; } .settle__nums { grid-column: 1; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 0.76rem; color: var(--text-muted); } .settle__share { color: var(--text-faint); } .settle__balance { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 680; font-variant-numeric: tabular-nums; color: var(--in); } .settle__balance.is-negative { color: var(--over); } .settle__todo { display: flex; flex-direction: column; gap: 8px; font-size: 0.88rem; color: var(--text); } .settle__todo li { line-height: 1.4; } /* Mitten im Urlaub ist die Liste eine Momentaufnahme, keine Anweisung. */ .settle__hint { font-size: 0.82rem; color: var(--text-muted); } /* -------------------------------------------------------------- Formulare */ .field { display: flex; flex-direction: column; gap: 6px; } .field__label { font-size: 0.76rem; font-weight: 620; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); } .field__input { width: 100%; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 1rem; appearance: none; } .field__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .field__input--code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.82rem; line-height: 1.5; resize: vertical; } select.field__input { background-image: none; } /* `min-width: 0` ist Pflicht: Rasterzellen sind sonst mindestens so breit wie ihr Inhalt, und `input[type=date]` bringt eine feste Mindestbreite mit — damit stand die Seite 29 px über dem Rand und ließ sich seitwärts schieben. */ .field__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .field__pair > * { min-width: 0; } .field__pair .field__input { min-width: 0; } .field__note { font-size: 0.76rem; color: var(--text-muted); } .field__error { font-size: 0.83rem; color: var(--over); min-height: 1.1em; } .stack { display: flex; flex-direction: column; gap: 10px; } .steps { display: flex; flex-direction: column; gap: 8px; font-size: 0.86rem; color: var(--text-muted); counter-reset: step; } .steps li { display: flex; gap: 9px; line-height: 1.4; } .steps li::before { counter-increment: step; content: counter(step); flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 0.72rem; font-weight: 700; display: grid; place-items: center; margin-top: 1px; } .person { display: flex; align-items: center; gap: 10px; padding: 6px 0; } .person__name { flex: 1; min-width: 0; } .slider { width: 100%; accent-color: var(--accent); } .segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--surface-2); border-radius: var(--radius-sm); } .segmented--3 { grid-template-columns: repeat(3, 1fr); } .segmented__btn { padding: 9px 8px; border: 0; border-radius: 9px; background: none; color: var(--text-muted); font-size: 0.88rem; font-weight: 600; } .segmented__btn.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow); } .status { display: flex; gap: 12px; align-items: flex-start; } .status .icon { margin-top: 2px; } .status--good { color: var(--good); } .status--warn { color: var(--warn); } .status--over { color: var(--over); } .status--muted { color: var(--text-faint); } .status__title { font-weight: 620; font-size: 0.92rem; color: var(--text); } .status__text { font-size: 0.82rem; color: var(--text-muted); } /* --------------------------------------------------------------- Knöpfe */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 18px; border-radius: var(--radius-sm); border: 1px solid transparent; background: var(--surface-2); color: var(--text); font-weight: 620; font-size: 0.95rem; } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: 0.55; } .btn--primary { background: var(--accent); color: var(--on-accent); } .btn--ghost { background: transparent; border-color: var(--border); color: var(--text-muted); } .btn--danger { color: var(--over); border-color: color-mix(in srgb, var(--over) 35%, var(--border)); } .btn--primary.btn--danger { background: var(--over); color: var(--on-accent); border-color: transparent; } .btn--wide { width: 100%; } .btn--small { padding: 7px 12px; font-size: 0.82rem; border-radius: 9px; } .icon-btn { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--surface-2); color: var(--text-muted); } .chips { display: flex; flex-wrap: wrap; gap: 8px; } /* Kategorien im Eingabe-Sheet: gleich breite Felder, feste Plätze. */ .catgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; } /* Doppelt benannt, weil `.chip` weiter unten steht: bei gleicher Spezifität gewinnt sonst die spätere Regel und das Raster bekäme die Chip-Maße. */ /* 44 px, nicht die 39, die aus der kleineren Schrift fielen: das hier wird im Gehen, einhändig und mit dem Daumen getroffen. */ .chip.catgrid__item { justify-content: center; gap: 5px; min-width: 0; min-height: 44px; padding-inline: 5px; font-size: 0.82rem; } .chip.catgrid__item .icon { margin-left: 0; } /* Auf sehr schmalen Geräten passt „Sonstiges“ mit Icon sonst nicht in die Zelle und wird abgeschnitten. */ @media (max-width: 359px) { .chip.catgrid__item { font-size: 0.75rem; gap: 4px; } .chip.catgrid__item .icon { width: 14px; height: 14px; } } .chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; } .chips--scroll::-webkit-scrollbar { display: none; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font-size: 0.86rem; font-weight: 560; white-space: nowrap; } .chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .chip .icon { margin-left: -2px; } .chip--date { position: relative; overflow: hidden; } .chip--date input { position: absolute; inset: 0; opacity: 0; width: 100%; } .daterow { display: flex; flex-direction: column; gap: 6px; } .daterow__quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 48px; gap: 8px; } .daterow__quick > .chip { justify-content: center; min-width: 0; min-height: 44px; padding-inline: 6px; } .daterow__label { font-size: 0.76rem; color: var(--text-muted); } /* ------------------------------------------------------------ Zahlenfeld */ .amount { display: flex; flex-direction: column; gap: 4px; } .amount__row { display: flex; align-items: baseline; justify-content: center; gap: 6px; } .amount__value { font-size: clamp(2.4rem, 12vw, 3rem); font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .amount__value.is-empty { color: var(--text-faint); } .amount__cur { font-size: 1.4rem; font-weight: 600; color: var(--text-muted); } .amount__hint { text-align: center; font-size: 0.8rem; color: var(--text-faint); min-height: 1.2em; } .amount__hint.is-error { color: var(--over); } .keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; } .key { padding: 10px 0; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); font-size: 1.3rem; font-weight: 600; display: grid; place-items: center; font-variant-numeric: tabular-nums; } .key:active { background: var(--accent-soft); } .key--muted { color: var(--text-muted); background: transparent; } /* ----------------------------------------------------------- Bottom-Sheet */ .overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; background: var(--scrim); opacity: 0; transition: opacity 0.2s ease; } .overlay.is-open { opacity: 1; } .sheet { width: var(--page); max-height: 92dvh; display: flex; flex-direction: column; background: var(--bg); border-radius: 22px 22px 0 0; border: 1px solid var(--border); border-bottom: 0; transform: translateY(14px); transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1); padding-bottom: var(--safe-b); } .overlay.is-open .sheet { transform: translateY(0); } .sheet--tall { min-height: min(78dvh, 640px); } .sheet__grip { width: 38px; height: 4px; border-radius: 999px; background: var(--border); margin: 8px auto 0; } .sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 18px 6px; } .sheet__title { font-size: 1.08rem; font-weight: 650; letter-spacing: -0.01em; } .sheet__sub { font-size: 0.82rem; color: var(--text-muted); margin-top: 2px; } .sheet__body { overflow-y: auto; padding: 10px 18px 20px; -webkit-overflow-scrolling: touch; } .entry { display: flex; flex-direction: column; gap: 18px; } /* Der Speichern-Knopf bleibt stehen. Vorher lag er bei einer neuen Ausgabe rund 350 px unterhalb des Randes: für den häufigsten Handgriff der App musste man erst scrollen. Das eigene Polster wandert dafür von der Sheet-Fläche in die Leiste, damit sie unten bündig klebt statt über einem Streifen Luft zu schweben. */ .sheet__body--entry { padding-bottom: 0; } .entry__actions { position: sticky; bottom: 0; z-index: 2; display: flex; gap: 10px; align-items: center; padding: 10px 0 18px; background: var(--bg); } /* Weicher Übergang nach oben, damit Inhalt nicht an einer Kante abgeschnitten wirkt, wenn er darunter durchscrollt. */ .entry__actions::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 20px; background: linear-gradient(to top, var(--bg), transparent); pointer-events: none; } .entry__actions .btn--wide { flex: 1; } /* --------------------------------------------------------- Detailzeile */ .disclosure { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); } /* In einer Karte steht sonst ein weißer Kasten auf weißem Grund. */ .card > .disclosure { background: var(--surface-2); border-color: transparent; } .card > .disclosure .disclosure__body { border-top-color: var(--border); } .disclosure__head { display: flex; align-items: center; gap: 10px; padding: 13px 14px; cursor: pointer; list-style: none; border-radius: var(--radius-sm); } .disclosure__head::-webkit-details-marker { display: none; } .disclosure__head:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .disclosure__title { font-size: 0.88rem; font-weight: 600; } /* Was zugeklappt drinsteht, muss man trotzdem sehen können — sonst trägt man still auf den falschen Namen ein. */ .disclosure__summary { flex: 1; min-width: 0; text-align: right; font-size: 0.82rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .disclosure__head .icon { color: var(--text-faint); transition: transform 0.18s ease; } .disclosure[open] > .disclosure__head .icon { transform: rotate(180deg); } .disclosure__body { display: flex; flex-direction: column; gap: 16px; padding: 4px 14px 16px; border-top: 1px solid var(--border); margin-top: -1px; } .confirm { display: flex; flex-direction: column; gap: 18px; } .confirm__text { font-size: 0.92rem; color: var(--text-muted); } .confirm__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } /* --------------------------------------------------------------- Willkommen */ .welcome { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 24px 8px 8px; } .welcome--compact { padding-bottom: 4px; } .welcome__mark { width: 62px; height: 62px; border-radius: 18px; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font-size: 2rem; font-weight: 700; box-shadow: var(--shadow-lift); } .welcome__title { font-size: 1.45rem; font-weight: 700; letter-spacing: -0.02em; } .welcome__text { font-size: 0.92rem; color: var(--text-muted); max-width: 34ch; } .welcome .btn { width: 100%; } /* ------------------------------------------------------------- Kleinkram */ .spinner { width: 30px; height: 30px; margin: 0 auto; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--accent); animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .toast { position: fixed; left: 50%; bottom: calc(var(--nav-h) + var(--safe-b) + 84px); transform: translate(-50%, 12px); z-index: 80; width: max-content; max-width: min(420px, calc(100vw - 32px)); display: flex; align-items: center; gap: 4px; padding: 12px 18px; border-radius: 999px; background: var(--toast-bg); color: var(--toast-text); border: 1px solid var(--toast-border); font-size: 0.88rem; font-weight: 550; box-shadow: var(--shadow-lift); opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; } .toast.is-visible { opacity: 1; transform: translate(-50%, 0); } .toast__text { min-width: 0; flex: 1; } /* Der Toast selbst fängt keine Tipps ab — der Knopf darin schon. */ .toast__action { pointer-events: auto; flex: none; margin: -6px -8px -6px 4px; padding: 6px 10px; border: 0; border-radius: 999px; background: none; color: inherit; font-size: 0.88rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .toast__action:active { opacity: 0.7; } .toast--error { background: var(--over); color: var(--on-accent); border-color: transparent; } .toast--success { background: var(--good); color: var(--on-accent); border-color: transparent; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } @media (min-width: 620px) { .app { border-inline: 1px solid var(--border); background: var(--bg); min-height: 100dvh; } .view { padding-inline: 22px; } }