/* =========================================================================== RecipeVault – Design-System Mobile first und app-artig: Die Seite selbst scrollt NIE. Die Hülle ist ein 100dvh-Raster aus Kopf / Inhalt / Tab-Leiste; gescrollt wird ausschließlich innerhalb der Inhaltsfläche. Deshalb steht hier overflow:hidden am – das ist Absicht, kein Versehen. Farben: warmes Dunkeloliv (#14180f / #202718 / #2b3320) als Grundfamilie, Basilikumgrün #8FCB5E als Akzent, Terrakotta #E2725B für Warnungen. Grün ist die eine Farbe, die neben fast jedem Essensfoto nicht streitet – und die Kachelwand dieser App besteht aus Essensfotos. Alle Paarungen sind gegen WCAG geprüft; die Werte stehen als Kommentar an den Tokens. Zwei Fallen, die dabei aufgefallen sind: - #3c4630 erreicht auf #14180f nur 1,8:1 -> ausschließlich Ränder, nie Text. - #8FCB5E erreicht auf Weiß nur 1,9:1 -> im hellen Theme braucht Akzenttext die abgedunkelte Variante; die Grünfläche bleibt mit dunkler Schrift. =========================================================================== */ @import url('../fonts/inter.css'); :root { /* --- Maße und Rhythmus (4/8-Raster) --- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --radius-sm: 10px; --radius: 14px; --radius-lg: 20px; --radius-xl: 28px; --tap: 44px; /* Mindestgröße für Tippziele */ --tabbar-h: 60px; --topbar-h: 56px; --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* Bewegung: 150–300 ms mit plattformnaher Kurve. */ --ease: cubic-bezier(.2, .8, .3, 1); --dur-fast: 140ms; --dur: 220ms; --z-sheet: 100; --z-toast: 200; } /* --- Dunkel (Standard) --- */ :root, :root[data-theme="dark"] { --bg: #14180f; --bg-2: #0d1009; /* tiefer als bg: Vertiefungen, Eingabefelder */ --surface: #202718; /* Karten, Listenzeilen, Rezeptkacheln */ --surface-2: #2b3320; /* gehobene Fläche, gedrückter Zustand */ --border: #3c4630; /* NUR Ränder – als Text nur 1,8:1 */ --text: #F2F5EC; /* 16,3:1 auf bg */ --muted: #A3AE96; /* 7,8:1 auf bg */ --accent: #8FCB5E; /* 9,3:1 auf bg */ --accent-fill: #8FCB5E; --accent-ink: #14180f; /* Schrift auf Basilikumflächen, 9,3:1 */ --accent-soft: rgba(143, 203, 94, .16); /* Erfolg ist hier derselbe Grünton wie der Akzent: Anders als bei einer Finanz-App gibt es nichts, was mit "gut" verwechselt werden könnte. */ --pos: #8FCB5E; /* 9,3:1 */ --neg: #E2725B; /* 5,8:1 – Terrakotta */ --pos-soft: rgba(143, 203, 94, .14); --neg-soft: rgba(226, 114, 91, .14); --scrim: rgba(8, 11, 6, .64); --shadow: 0 8px 24px -10px rgba(0, 0, 0, .6); --shadow-lg: 0 24px 56px -20px rgba(0, 0, 0, .7); --ring: rgba(143, 203, 94, .45); } /* --- Hell --- */ :root[data-theme="light"] { --bg: #F7F8F3; --bg-2: #ECEEE4; --surface: #FFFFFF; --surface-2: #F2F4EC; --border: #D8DCCC; --text: #232a1c; /* 13,9:1 auf bg */ --muted: #5C6652; /* 5,7:1 auf bg */ --accent: #3F6D1F; /* 5,8:1 – Basilikum selbst schafft auf Weiß nur 1,9:1 */ --accent-fill: #8FCB5E; --accent-ink: #14180f; --accent-soft: rgba(143, 203, 94, .24); --pos: #3F6D1F; --neg: #A33B26; --pos-soft: rgba(63, 109, 31, .12); --neg-soft: rgba(163, 59, 38, .12); --scrim: rgba(35, 42, 28, .48); --shadow: 0 8px 24px -12px rgba(35, 42, 28, .28); --shadow-lg: 0 24px 56px -22px rgba(35, 42, 28, .34); --ring: rgba(63, 109, 31, .35); } /* =========================================================================== Grundlagen =========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { height: 100%; -webkit-tap-highlight-color: transparent; /* kein blaues Tap-Blinken */ } body { height: 100dvh; margin: 0; overflow: hidden; /* die SEITE scrollt nie – nur Inhaltsflächen */ overscroll-behavior: none; /* kein Gummiband, das den Hintergrund freilegt */ font-family: var(--font); font-size: 16px; /* unter 16px zoomt iOS beim Fokus in ein Feld */ line-height: 1.5; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; } /* Bedienelemente sind nicht markierbar (keine iOS-Lupe beim Halten); Fließtext und Beträge bleiben markierbar. */ .topbar, .tabbar, .btn, .icon-btn, .seg, .list-row, .fab { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.02em; } h1 { font-size: 1.5rem; } h2 { font-size: 1.15rem; } h3 { font-size: 1rem; } p { margin: 0 0 1em; } a { color: var(--accent); text-decoration: none; } .hidden { display: none !important; } .muted { color: var(--muted); } .grow { flex: 1 1 auto; min-width: 0; } .row { display: flex; align-items: center; gap: var(--sp-3); } .stack { display: flex; flex-direction: column; gap: var(--sp-3); } .center { text-align: center; } /* Text, der nicht umbrechen darf (Namen in Zeilen) */ .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Nur für Screenreader */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Tastaturfokus immer sichtbar – aber nicht bei Maus/Touch. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } /* =========================================================================== Beträge Tabellenziffern sind hier kein Detail, sondern der Grund, warum eine Betragsspalte überhaupt lesbar ist: Ohne sie sind die Ziffern verschieden breit und die Kommas stehen versetzt untereinander. =========================================================================== */ .amount { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1, 'cv05' 1; font-weight: 700; letter-spacing: -.01em; } .amount-lg { font-size: 1.5rem; } .amount-xl { font-size: 2.25rem; font-weight: 800; } .amount-pos { color: var(--pos); } .amount-neg { color: var(--neg); } /* Die Originalwährung unter dem umgerechneten Betrag. */ .amount-original { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; } /* =========================================================================== Icons =========================================================================== */ .icon { width: 22px; height: 22px; flex: none; stroke: currentColor; fill: none; } .icon-sm { width: 18px; height: 18px; } .icon-lg { width: 28px; height: 28px; } /* =========================================================================== Schaltflächen =========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--tap); padding: 0 var(--sp-5); border: 0; border-radius: var(--radius); font: inherit; font-weight: 600; font-size: .95rem; color: var(--text); background: var(--surface-2); cursor: pointer; /* Gedrückt wird über Farbe/Deckkraft angezeigt, nicht über Größe – ein Transform würde die Nachbarn verschieben und wirkt auf Listen unruhig. */ transition: background var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); } .btn:active { opacity: .72; } .btn:disabled { opacity: .45; cursor: not-allowed; } .btn-primary { background: var(--accent-fill); color: var(--accent-ink); } .btn-ghost { background: transparent; border: 1.5px solid var(--border); } .btn-danger { background: var(--neg); color: #fff; } .btn-block { width: 100%; } .btn-sm { min-height: 36px; padding: 0 var(--sp-3); font-size: .85rem; border-radius: var(--radius-sm); } .icon-btn { display: grid; place-items: center; width: var(--tap); height: var(--tap); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text); cursor: pointer; transition: background var(--dur-fast) var(--ease); } .icon-btn:active { background: var(--surface-2); } /* Schwebende Hauptaktion – sitzt über der Tab-Leiste, nie darunter. */ .fab { position: absolute; right: var(--sp-4); bottom: calc(var(--sp-4) + var(--tabbar-h) + var(--offline-bar-h) + env(safe-area-inset-bottom)); display: grid; place-items: center; width: 56px; height: 56px; border: 0; border-radius: 50%; background: var(--accent-fill); color: var(--accent-ink); box-shadow: var(--shadow-lg); cursor: pointer; z-index: 30; transition: opacity var(--dur-fast) var(--ease); } .fab:active { opacity: .8; } .fab .icon { width: 26px; height: 26px; stroke-width: 2.5; } /* =========================================================================== App-Hülle =========================================================================== */ .app { display: grid; /* Kopf / Inhalt / Tab-Leiste. Nur die mittlere Zeile ist flexibel und scrollt; minmax(0,1fr) ist nötig, damit sie überhaupt schrumpfen darf. */ grid-template-rows: auto minmax(0, 1fr) auto; height: 100dvh; position: relative; } .topbar { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--topbar-h); /* Oben zieht die Kopffarbe unter Notch/Statusleiste, seitlich die Insets im Querformat. */ padding: env(safe-area-inset-top) max(var(--sp-4), env(safe-area-inset-right)) 0 max(var(--sp-4), env(safe-area-inset-left)); background: var(--bg); border-bottom: 1px solid var(--border); } .topbar > .title { font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; } /* Sitzt der Titel neben einem Zurück-Knopf, gleicht das den Randabstand aus. */ .topbar .icon-btn:first-child { margin-left: calc(var(--sp-2) * -1); } .content { overflow-y: auto; overscroll-behavior: contain; /* kein Durchscrollen auf die Seite dahinter */ -webkit-overflow-scrolling: touch; padding: var(--sp-4) max(var(--sp-4), env(safe-area-inset-right)) var(--sp-4) max(var(--sp-4), env(safe-area-inset-left)); } /* Ohne Tab-Leiste (Detailansichten) den Home-Indicator selbst freihalten. */ .app[data-chrome="none"] .content { padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom)); } .tabbar { display: flex; background: var(--bg); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom); } .tabbar a { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: var(--tabbar-h); padding: var(--sp-2) var(--sp-1) var(--sp-1); color: var(--muted); font-size: .68rem; font-weight: 600; transition: color var(--dur-fast) var(--ease); } .tabbar a.active { color: var(--accent); } /* Aktiv-Markierung als Balken – Farbe allein darf nie das einzige Signal sein. */ .tabbar a::before { content: ""; position: absolute; top: 0; left: 50%; width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); transform: translateX(-50%) scaleX(0); transition: transform var(--dur) var(--ease); } .tabbar a.active::before { transform: translateX(-50%) scaleX(1); } .tabbar .badge { position: absolute; top: 6px; left: 50%; margin-left: 6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--accent-fill); color: var(--accent-ink); font-size: .62rem; font-weight: 800; display: grid; place-items: center; } /* Tab-Leiste in Detailansichten ausblenden (Gruppe, Ausgabe). */ .app[data-chrome="none"] .tabbar { display: none; } /* =========================================================================== Karten und Listen =========================================================================== */ .card { background: var(--surface); border-radius: var(--radius); padding: var(--sp-4); } .list { display: flex; flex-direction: column; gap: var(--sp-2); } .list-row { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--tap); padding: var(--sp-3) var(--sp-4); background: var(--surface); border-radius: var(--radius); cursor: pointer; /* Auch als : Die ganze Zeile ist die Schaltfläche, der Text bleibt normale Schrift. Amber ist der Aktionsfarbe vorbehalten – eine Liste komplett in Akzentfarbe hat keine Hierarchie mehr. */ color: var(--text); transition: background var(--dur-fast) var(--ease); } .list-row:active { background: var(--surface-2); } /* Auch als