/* komponenten.css - Paddy's Mealplan * * Komponenten: Rezeptraster, Zutatenzeilen, Meal-Ansicht, Bottom-Sheet, Modal, Picker, Listen, Vorkochen, Toast, Profil, Intro/Rechner, Druck. * * Ausgeschnitten aus index.html (vormals Zeile 1302-2400), unveraendert. * Regeln fuer diesen Ordner: css/CLAUDE.md */ /* ---------- Recipe grid ---------- */ .catgroup { margin-bottom: 22px; } .cathead { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0 0 12px; padding: 6px 2px; background: none; border: none; border-bottom: 1px solid var(--border); color: var(--text); font: inherit; cursor: pointer; text-align: left; } .cathead:hover { border-bottom-color: var(--border-strong); } /* hitSlop wie .toast-undo::after: Trefferflaeche auf 44px (Apple HIG), Aussehen unveraendert. Gemessen am 16.09.2026 mit tools/abnahme-mobil.py. */ .cathead { position: relative; } .cathead::after { content: ""; position: absolute; inset: -6px 0; } /* Waehrend der Suche ist die Kopfzeile nur Beschriftung, kein Knopf - siehe paintRecipeGroups(). */ .cathead.static { cursor: default; padding-left: 25px; } .cathead.static:hover { border-bottom-color: var(--border); } .cathead .caret { width: 15px; height: 15px; flex: none; color: var(--text-muted); transition: transform var(--dur-fast); } .cathead .caret.open { transform: rotate(90deg); } .cathead .cname { font-size: 14.5px; font-weight: 650; letter-spacing: .01em; display: inline-flex; align-items: center; gap: 7px; } .cathead .cname .cicon { width: 16px; height: 16px; flex: none; color: var(--text-muted); } /* Dieselben Farben wie die Slot-Symbole im Wochenplan, damit Plan und Bibliothek dieselbe Bildsprache sprechen. Dieselben Klassen wie die Kategorie-Chips (CAT_CLASS): mehr kennt das Theme nicht, und mehr soll es auch nicht kennen - Snack, Dessert, Beilage, Getraenk und Favoriten bleiben grau. */ .cathead .cname .cicon.cat-fr { color: var(--fr); } .cathead .cname .cicon.cat-ha { color: var(--mi); } .cathead .ccount { font-size: 11.5px; font-weight: 650; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); padding: 1px 8px; border-radius: 999px; } /* Suchfeld im Meals-Reiter, eigene Zeile unter der .section-head (die ist flex-wrap und streckt auf 720px .btn per flex:1 - ein drittes Element wuerde mitgestreckt). */ .recipe-search { position: relative; margin: -6px 0 18px; } /* Filter-Chips im Meals-Reiter (B7). Gleiche Bauform wie die Merkmale im Meal-Sheet (.mtags) - es ist dieselbe Auswahl, nur einmal setzend und einmal filternd. Die Reihe BRICHT UM und scrollt nicht waagerecht. Der erste Entwurf hatte `overflow-x: auto`, und die Messung hat zweierlei gezeigt: Die Regel griff gar nicht (`.mtags` steht weiter unten im Stylesheet und gewinnt bei gleicher Spezifitaet mit `flex-wrap: wrap`) - und sie war auch inhaltlich falsch. Ein waagerechter Scroller ueber der Meal-Liste ist genau die Gestenfalle aus CLAUDE.md §11, und er versteckt Filter am rechten Rand. In der Praxis ist die Reihe meist einzeilig: gezeigt wird nur, was im Bestand vorkommt. */ .rfilters { margin: -8px 0 16px; } /* hitSlop wie .toast-undo::after: Trefferflaeche auf 44px (Apple HIG), Aussehen unveraendert. Gemessen am 16.09.2026 mit tools/abnahme-mobil.py. */ .rfilters button { position: relative; } .rfilters button::after { content: ""; position: absolute; inset: -3px 0; } .recipe-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-muted); pointer-events: none; } /* Attributselektor, nicht nur "input": input[type="search"] (Zeile ~1113) hat dieselbe Spezifitaet und steht spaeter - dessen Kurzform "padding: 9px 11px" loeschte sonst das padding-left und die Lupe laege auf dem Platzhaltertext. */ .recipe-search input[type="search"] { padding-left: 34px; } .recipes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } /* Rezeptbuch: dieselbe Karte wie die eigenen Meals, nur mit einem Fuss statt der Bearbeiten-Aktionen. Bewusst keine eigene Kartenoptik - es ist derselbe Gegenstand, nur noch nicht der eigene. */ /* position + z-index sind hier PFLICHT, nicht Kosmetik: .rcard-open::after spannt als Stretched Link mit z-index:1 ueber die ganze Karte. Ein statisch positioniertes Element kann z-index gar nicht anwenden - der Link lag deshalb ueber dem Uebernehmen-Knopf und fing jeden Klick ab, die Ansicht ging auf statt zu uebernehmen (TROUBLESHOOTING 90). */ .cb-foot { margin-top: 10px; position: relative; z-index: 2; } .cb-foot .btn { width: 100%; } /* "In deinen Meals" ist eine Feststellung, kein Knopf - deshalb ohne Rahmen und in der gedaempften Schrift. Gleiche Hoehe wie der Knopf daneben, damit die Karten in einer Reihe nicht unterschiedlich hoch werden. */ .cb-drin { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; color: var(--text-muted); font-size: 13px; font-weight: 600; } .rcard { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 0; display: flex; flex-direction: column; overflow: hidden; transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease, border-color var(--dur-fast) ease; } .rcard::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 2; background: linear-gradient(90deg, var(--accent), var(--accent-strong)); } .rcard:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); box-shadow: 0 12px 30px color-mix(in srgb, var(--accent) 20%, transparent); } /* Ganze Karte als Drop-Ziel fuer ein Foto aus dem Dateisystem (Desktop) - im Ruhezustand unsichtbar, nur waehrend des Ziehens ein Rahmen als Rueckmeldung. Mobil fehlt echtes OS-Datei-Drag ohnehin, daher keine eigene Handhabung noetig. */ .rcard.dragover-file { outline: 2px dashed var(--accent); outline-offset: -2px; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); } /* Zutaten-Zeilen im Meal-Formular */ /* Akzentbalken oben wie bei den Meal-Karten (.rcard::before) — grenzt die einzelnen Zutaten sichtbar voneinander ab; etwas schmaler, weil hier mehrere untereinander stehen */ /* overflow bleibt sichtbar, damit die Vorschlagsliste der Zutaten-Suche aus der Zeile herausragen darf; der Akzentbalken rundet sich dafuer selbst oben mit ab. */ .ing-row { position: relative; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 12px 11px; margin-bottom: 9px; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); } .ing-row::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: linear-gradient(90deg, var(--accent), var(--accent-strong)); } .ing-row:focus-within { border-color: color-mix(in srgb, var(--accent) 45%, var(--border-strong)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); } /* Die offene Vorschlagsliste hebt ihre Zeile ueber die darunterliegenden Zeilen */ .ing-row.ac-open { z-index: 5; } /* Antwort des Barcode-Scanners, direkt in der Zeile statt nur unten im Toast (ingMsg() in index.html). Bewusst KEIN Rot und kein Warnsymbol: Ein Produkt, das die Datenbank nicht kennt, ist kein Fehler des Nutzers. Der Akzentstreifen macht den Satz auffindbar, der Ton bleibt ruhig. */ .ing-msg { margin: 9px 0 0; padding: 7px 10px; border-left: 3px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--text); font-size: 13px; line-height: 1.45; } .ing-top { display: flex; align-items: center; gap: 8px; } /* Name und Barcode-Knopf bleiben zusammen — auch wenn die Zeile mobil umbricht */ .ing-nrow { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; } .ing-nwrap { position: relative; flex: 1; min-width: 0; } .ing-nwrap .ing-name { width: 100%; } /* Zutaten-Suche: Vorschlaege aus der eingebauten Naehrwerttabelle (ARIA-Listbox) */ .ing-ac { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0; margin: 0; padding: 4px; list-style: none; max-height: 236px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow); } .ing-ac-item { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-height: 40px; padding: 9px 10px; border-radius: 7px; cursor: pointer; transition: background-color var(--dur-fast), color var(--dur-fast); } .ing-ac-item .fname { font-weight: 600; color: var(--text); } .ing-ac-item .fnut { flex: none; font-size: 11px; font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; } .ing-ac-item:hover, .ing-ac-item.on { background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); } .ing-ac-item:hover .fnut, .ing-ac-item.on .fnut { color: var(--accent); } /* Mengen-Feld mit Einheiten-Auswahl (g / ml / Stueck) */ .ing-gwrap { display: flex; gap: 6px; flex: none; width: 158px; } .ing-gwrap .ing-g { flex: none; width: 74px; text-align: right; } .ing-gwrap .ing-u { flex: 1; min-width: 0; padding: 8px 6px; } .ing-ic { flex: none; width: 34px; height: 34px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); border-radius: var(--radius-sm); cursor: pointer; display: grid; place-items: center; font-size: 14px; line-height: 1; padding: 0; transition: color var(--dur-fast), border-color var(--dur-fast), background-color var(--dur-fast); } .ing-ic svg { width: 17px; height: 17px; } .ing-ic:disabled, .ing-barcode:disabled { opacity: .5; cursor: default; } /* Beschriftet statt nur bebildert: auf Touch gibt es keine Tooltips, ein reines Symbol waere dort unauffindbar. Deshalb traegt der Knopf seinen Namen sichtbar. */ .ing-barcode { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); border-radius: var(--radius-sm); cursor: pointer; font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; transition: color var(--dur-fast), border-color var(--dur-fast), background-color var(--dur-fast); } .ing-barcode svg { width: 17px; height: 17px; flex: none; } .ing-barcode:hover { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); } .ing-ic.busy, .ing-barcode.busy { animation: syncpulse 1s ease-in-out infinite; } .ing-del:hover { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); } /* Naehrwerte zugeklappt. Wer die Zutat aus der Vorschlagsliste waehlt, bekommt sie automatisch gefuellt und muss sie gar nicht sehen — sichtbar kosteten die vier Felder 93 von 225 px Zeilenhoehe (gemessen). Zum Nachbessern aufklappbar, ueber
statt eigenem Zustand: nativ per Tastatur und Screenreader bedienbar. */ .ing-nut { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); } /* Zugeklappt braucht der Trennstrich weniger Luft — die Zeile traegt sich selbst. */ .ing-nut:not([open]) { margin-top: 5px; padding-top: 4px; } .ing-nsum { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; /* Firefox */ } .ing-nsum::-webkit-details-marker { display: none; } /* Safari/Chrome */ .ing-nsum:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent); border-radius: var(--radius-sm); } .ing-nsum::after { content: "▾"; margin-left: auto; flex: none; color: var(--text); font-size: 14px; line-height: 1; opacity: .7; transition: transform var(--dur-fast); } .ing-nut[open] .ing-nsum::after { transform: rotate(180deg); } /* Feststehendes Label in der Kopfzeile (inkl. Bezugsgroesse .ing-per als Kind) - bricht nicht um, die Makro-Kurzfassung daneben bekommt den ganzen restlichen Platz. */ .ing-ntitle { flex: none; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; } /* Bezugsgroesse steht als Inline-Zusatz hinter "Makros" in der Kopfzeile - normale Schrift statt der Versalien von .ing-ntitle, damit sie als Nebeninfo lesbar bleibt. */ .ing-per { font-size: 11px; font-weight: 400; color: var(--text-muted); text-transform: none; letter-spacing: 0; } .ing-brief { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; text-align: right; gap: 10px; margin-left: auto; font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; min-width: 0; } /* Aufgeklappt stehen dieselben Werte schon unten in den Feldern - die Kurzfassung in der Kopfzeile waere doppelt, deshalb nur zugeklappt sichtbar. */ .ing-nut[open] .ing-brief { display: none; } .ing-brief .t-kcal { --tc: var(--accent); } /* Die drei Makros stehen als EINE Gruppe (.ing-brief-macros, macroLineHtml()). Die Farbe traegt dort der Punkt (.mv::before), nicht der Text - dasselbe Signal wie bei .ing-lbl unten und in den .nutfacts-Kacheln. */ .ing-vals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding-bottom: 3px; } .ing-nut label { display: flex; flex-direction: column; gap: 4px; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); text-align: center; } /* Farbpunkt vor dem Feldnamen, gleiches Muster wie .nutfacts .k und .mv (nur der Punkt traegt Farbe, der Text bleibt --text-muted) - so uebernimmt sich die bekannte Kontrastschwaeche von Amber/Blau auf hellem Grund nicht in ein neues Textelement. */ .ing-lbl { display: inline-flex; align-items: center; justify-content: center; gap: 5px; } .ing-lbl::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--tc, var(--text-muted)); } .ing-vals label.t-kcal { --tc: var(--accent); } .ing-vals label.t-carb { --tc: var(--carb); } .ing-vals label.t-prot { --tc: var(--prot); } .ing-vals label.t-fat { --tc: var(--fat); } .ing-nut input { width: 100%; padding: 7px 4px; text-align: center; } /* #f-ing-add ist der alte "+ Weitere Zutat"-Knopf aus dem fruehren openRecipeForm - updateMacroSum() schaltet weiterhin sein hidden-Attribut (Funktion unveraendert uebernommen, siehe openMealSheet()), der Knopf selbst bleibt aber dauerhaft unsichtbar: der sichtbare Einstieg der neuen Ansicht ist #ms-ing-add. */ #f-ing-add { display: none !important; } /* ---------- Zutaten-Ruhezustand (openMealSheet, Vorbild Fotos/Ansicht.jpeg) ---------- .ing-row traegt im Bearbeiten-Zustand (.editing) unveraendert die Formular-Optik von oben (Karte mit Akzentbalken); im Ruhezustand wird nur .ing-view gezeigt, als schlichte Liste mit duennen Trennlinien statt Kacheln. */ .ing-row:not(.editing) { background: none; border: 0; padding: 0; margin-bottom: 0; } .ing-row:not(.editing)::before { display: none; } /* Die Zeile traegt tabindex="-1" und wird beim Aufklappen programmatisch fokussiert (siehe Klick-Handler in addIngRow). Das ist ein reiner Fokus-Anker, kein Bedienelement - deshalb kein Fokusring. */ .ing-row:focus { outline: none; } .ing-row.editing .ing-view { display: none; } .ing-row:not(.editing) .ing-top, .ing-row:not(.editing) .ing-nut, .ing-row:not(.editing) .ing-done-row { display: none; } .ing-view { display: grid; grid-template-columns: 58px 1fr auto 34px; column-gap: 12px; align-items: start; padding: 11px 2px; border-bottom: 1px solid var(--border); position: relative; } .ing-view.ro { grid-template-columns: 58px 1fr auto; } /* Seit der Stift weg ist, deutet sonst nichts an, dass die Zeile aufklappt. Der Rahmen liegt etwas ausserhalb des Innenabstands, damit die Flaeche die ganze Zeile umfasst und nicht nur den Text. hover NUR in @media (hover: hover): auf Touch bliebe der Zustand sonst nach dem Antippen kleben. Fuer Touch traegt der :active-Press-State die Rueckmeldung - dort lernt man beim ersten Antippen, dass die Zeile reagiert. */ @media (hover: hover) { .ing-view:not(.ro):hover { background: color-mix(in srgb, var(--accent) 5%, transparent); } } .ing-view:not(.ro):active { background: color-mix(in srgb, var(--accent) 9%, transparent); } /* Kein border-radius: die Trennlinie ist der border-bottom derselben Zeile, die wuerde an den Enden mitrunden. Die Liste bleibt dadurch eine Liste, kein Stapel Kacheln. */ /* padding-left liegt mit in der Transition: auf dem Handy entsteht der Einzug erst mit dem Sortierzustand (.ings-sorting) und darf nicht springen. */ .ing-view:not(.ro) { transition: background var(--dur-fast) var(--ease-out), padding-left var(--dur-fast) var(--ease-out); } @media (prefers-reduced-motion: reduce) { .ing-view:not(.ro) { transition: none; } } .ing-view-qty { grid-column: 1; grid-row: 1; font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: 13px; padding-top: 2px; } /* Stretched-Link-Muster (Nachtrag Abnahme Phase 1, gleiches Vorbild wie .rcard-open in Schritt 3): der Stift ist weg, der Name uebernimmt seine Aufgabe UND macht die Zeile per ::after als Tastaturziel fokussierbar - .ing-view ist ein
ohne eigenen Fokus. */ /* KEIN position:relative hier - sonst bezieht sich das ::after unten auf den Namen selbst und nur der Text waere klickbar (bei "Reis" ein winziges Ziel, der Rest der Zeile tot). Der Bezugspunkt muss .ing-view sein, genau wie .rcard-open sich auf .rcard bezieht. */ .ing-view-name { all: unset; grid-column: 2; grid-row: 1; font-weight: 600; align-self: center; } /* Nur die bearbeitbare Zeile ist ein Knopf - die Nur-Lese-Zeile (.ro) nutzt dasselbe Markup als reinen , ohne Zeigerkurs oder unsichtbare Klickflaeche. */ .ing-view:not(.ro) .ing-view-name { cursor: pointer; } .ing-view:not(.ro) .ing-view-name::after { content: ""; position: absolute; inset: 0; } .ing-view:not(.ro) .ing-view-name:focus-visible { outline: none; } .ing-view:not(.ro) .ing-view-name:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } .ing-view-kcal { grid-column: 3; grid-row: 1; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; padding-top: 2px; } .ing-view-macros { grid-column: 2 / span 2; grid-row: 2; text-align: right; margin-top: 2px; font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; } .ing-view-del { grid-column: 4; grid-row: 1 / span 2; align-self: start; position: relative; z-index: 2; width: 34px; height: 34px; border: 0; background: none; color: var(--text-muted); cursor: pointer; border-radius: var(--radius-sm); display: grid; place-items: center; font-size: 15px; } /* Die 44px-Trefferflaeche kommt aus dem gemeinsamen Mechanismus in css/basis.css (TROUBLESHOOTING #38). Hier bleibt nur, was wirklich nur hier gilt: z-index haelt das ✕ ueber dem ::after der Anzeigezeile, das sonst die ganze Zeile ueberdeckt. */ .ing-view-del:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); } /* ---------- Zutaten sortieren (Paket 3) ---------- Der Anfasser kostet im Ruhezustand KEINEN Platz: er liegt absolut im linken Rand, und die Zeile rueckt nur dort ein, wo dafuer Platz ist - am Rechner dauerhaft (hover: hover), auf dem Handy erst waehrend des Sortierens (.ings-sorting). Bei 360 px hat die Zeile keine fuenfte Spalte uebrig: Menge, Name, kcal und Makros stehen dort bereits gedraengt (plans/Neun_Befunde_Alltag.MD, Paket 3). */ .ing-grip { position: absolute; left: 0; top: 7px; z-index: 2; width: 20px; height: 30px; display: grid; place-items: center; border: 0; padding: 0; background: none; color: var(--text-muted); opacity: 0; pointer-events: none; cursor: grab; touch-action: none; transition: opacity var(--dur-fast) var(--ease-out); } /* 44 px Tastflaeche in der SENKRECHTEN Achse (TROUBLESHOOTING 38: die Enge gilt nur in einer Achse). Waagerecht ist der Anfasser nicht das einzige Ziel - auf dem Handy nimmt das Halten die ganze Zeile auf. */ .ing-grip::after { content: ""; position: absolute; inset: -7px -12px; } .ing-grip svg { width: 14px; height: 14px; } .ing-view.ro .ing-grip { display: none; } @media (hover: hover) { /* Nur auf Zeigegeraeten: dort ist das Fenster breit genug fuer den Einzug, und nur dort gibt es ueberhaupt ein Ueberfahren, das den Anfasser zeigen koennte. */ .ing-view:not(.ro) { padding-left: 22px; } .ing-view:not(.ro):hover .ing-grip, .ing-grip:focus-visible { opacity: .8; pointer-events: auto; } } .ings-sorting .ing-view:not(.ro) { padding-left: 22px; } .ings-sorting .ing-view:not(.ro) .ing-grip { opacity: .8; pointer-events: auto; } /* Waehrend der Geste darf nichts markiert werden - sonst zieht iOS beim Halten die Lupe auf, statt die Zeile aufzunehmen. */ .ings-sorting { user-select: none; -webkit-user-select: none; } .ing-view:not(.ro) { -webkit-touch-callout: none; } .ing-row.dragging { position: relative; z-index: 6; } .ing-row.dragging .ing-grip { cursor: grabbing; opacity: 1; } /* Die aufgenommene Zeile hebt sich ab: Flaeche, Schatten, Rundung. Die Trennlinie verschwindet dabei - eine schwebende Karte hat keinen Nachbarn, von dem sie trennt. */ .ing-row.dragging .ing-view { background: var(--surface-2); box-shadow: var(--shadow); border-radius: var(--radius-sm); border-bottom-color: transparent; } /* .shift traegt nur die Ausweichbewegung der NICHT gezogenen Zeilen. Die gezogene Zeile folgt dem Finger 1:1 und darf keine Transition haben. */ .ing-row.shift { transition: transform var(--dur-fast) var(--ease-out); } @media (prefers-reduced-motion: reduce) { .ing-grip, .ing-row.shift { transition: none; } } .ms-ing-add { width: 100%; justify-content: center; margin-top: 10px; } /* "Fertig" am Ende der aufgeklappten Zeile (Nachtrag Abnahme Phase 1) - bewusst NICHT neben dem ✕ im .ing-top: Bestaetigen und Loeschen duerfen nicht nebeneinander liegen. */ .ing-done-row { display: flex; justify-content: flex-end; margin-top: 4px; } @media (max-width: 560px) { .ing-view-macros { grid-column: 1 / span 3; text-align: left; } } /* ---------- Meal-Ansicht (openMealSheet) ---------- */ .mealsheet { position: relative; } .mealsheet .modal-head { position: absolute; top: 0; left: 0; right: 0; z-index: 3; border: 0; background: none; padding: 12px; justify-content: flex-end; } .mealsheet .modal-head .icon-gh.on-photo { color: #fff; border-radius: 50%; background: color-mix(in srgb, var(--photo-scrim) 50%, transparent); box-shadow: var(--shadow-float); } .mealsheet .modal-head .icon-gh.on-photo:hover { color: var(--on-photo); background: color-mix(in srgb, var(--photo-scrim) 68%, transparent); } /* "Bearbeiten" im Kopf des Nur-Lese-Zweigs (Nachtrag Abnahme Phase 2) - nur sichtbar, wenn canEdit() wahr ist; jedes bestehende Meal oeffnet inzwischen zuerst lesend, egal aus welchem Reiter. margin-right:auto schiebt sie an den linken Rand, Teilen/Schliessen bleiben rechts. */ .mealsheet .modal-head .ms-edit-btn { margin-right: auto; } .ms-photo { position: relative; } .ms-photo img { width: 100%; height: 220px; object-fit: cover; display: block; } .ms-photo .ms-cover-sym { width: 100%; height: 220px; } .ms-photobar { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 8px; } .ms-photobtn { font-family: var(--font-body); padding: 7px 13px; border-radius: 999px; border: 0; cursor: pointer; font-size: 12.5px; font-weight: 600; color: #fff; background: color-mix(in srgb, var(--photo-scrim) 55%, transparent); box-shadow: var(--shadow-float); } .ms-photobtn:hover { background: color-mix(in srgb, var(--photo-scrim) 72%, transparent); } .ms-photobtn[hidden] { display: none; } /* Der Herkunftshinweis unter dem Foto. Leise gehalten - er ist eine Fussnote, keine Aussage ueber das Gericht - aber mit --text-muted noch klar lesbar, weil er eine Offenlegung traegt und keine Verzierung ist. */ .ms-bildhinweis { margin: 0 0 10px; font-size: 11.5px; line-height: 1.4; color: var(--text-muted); letter-spacing: .01em; } .ms-head { display: flex; align-items: center; gap: 10px; margin: 14px 0; } .ms-title { font-family: var(--font-display); font-size: 21px; font-weight: 700; margin: 0; flex: 1; min-width: 0; } .ms-name { flex: 1; min-width: 0; font: inherit; font-family: var(--font-display); font-size: 21px; font-weight: 700; color: var(--text); border: 1px solid transparent; background: transparent; padding: 6px 8px; border-radius: var(--radius-sm); } .ms-name:hover { border-color: var(--border-strong); background: var(--bg); } .ms-name:focus { outline: none; border-color: var(--accent); background: var(--bg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); } .ms-cat { flex: none; width: auto; font-size: 16px; padding: 7px 8px; } .ms-ings .sec-h { margin: 22px 0 4px; } /* Schrift kommt aus .sec-h */ /* ---------- Merkmale eines Meals (B6) ---------- Mehrfachauswahl mit aria-pressed, gleiche Bauform wie .tdays im Rechner. Bewusst nicht .seg: das ist eine Einfachauswahl (genau ein .on) und wuerde hier falsche Erwartungen wecken. (Ein .seg fuer den "Aufwand" stand hier einen Tag lang darunter - das Feld ist am 13.08.2026 entfallen, weil es niemand auswertete.) */ .ms-meta .sec-h { margin: 22px 0 8px; } .mtags { display: flex; flex-wrap: wrap; gap: 6px; } .mtags button { font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted); padding: 9px 13px; min-height: 40px; border-radius: 999px; transition: color var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast); } .mtags button:hover { color: var(--text); border-color: var(--border-strong); } .mtags button[aria-pressed="true"] { color: var(--accent-contrast); border-color: transparent; background: linear-gradient(135deg, var(--accent-solid), var(--accent-solid-strong)); box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 32%, transparent); } /* Nur-Lese-Zweig: dieselben Merkmale, aber als ruhige Marken ohne Knopf-Optik - hier ist nichts umschaltbar, also darf auch nichts wie ein Schalter aussehen. */ .mflags { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; } .mflags span { font-size: 11.5px; font-weight: 600; letter-spacing: .02em; padding: 5px 10px; border-radius: 999px; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); white-space: nowrap; } .mflags span.on { color: var(--accent-strong); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 30%, transparent); } /* Fusszeile der Meal-Ansicht (Nachtrag Abnahme Phase 1): "Meal loeschen"/"Verwerfen" und "Fertig" stehen jetzt zusammen im modal-foot statt getrennt im Body. space-between statt eines festen 8px-gap gibt der destruktiven Aktion spuerbaren Abstand zur bestaetigenden - kein Fehlklick zwischen beiden. ms-danger bleibt transparent (kein .btn-Standardsurface), damit sie als ghost neben dem gefuellten "Fertig" leichter wirkt, nicht schwerer. */ .mealsheet .modal-foot { justify-content: space-between; gap: 16px; } .ms-danger { background: transparent; } /* ---------- Handy: die Meal-Ansicht ist ein Bottom-Sheet fester Hoehe ---------- Als normales, inhaltshohes Modal sprang die Groesse von Meal zu Meal: eines ohne Zutaten war ein kurzer Kasten, eines mit acht Zutaten hoeher als der Bildschirm - dann musste man erst zum Foto hoch- und zum "Schliessen" runterscrollen. Auf dem Handy steht das Sheet deshalb immer gleich hoch am unteren Rand, Foto oben und Fusszeile unten fest, gescrollt wird nur in der Mitte. Die Klasse .sheet-overlay setzt openMealSheet() nach openModal() - bewusst eine echte Klasse und nicht :has(.mealsheet), damit alle anderen Modals (Einstellungen, Teilen, Rechtstexte) garantiert unberuehrt bleiben. Zum Raster: .mealsheet .modal-head ist position:absolute (siehe oben) und damit KEIN Grid-Item - die drei Reihen treffen genau .ms-photo, .modal-body und .modal-foot, in beiden Zweigen von openMealSheet(). min-height:0 auf dem Body ist zwingend, sonst waechst die 1fr-Reihe ueber ihren Inhalt hinaus statt zu scrollen. */ @media (max-width: 560px) { .overlay.sheet-overlay { padding: 0; place-items: end center; } .overlay.sheet-overlay .mealsheet { max-width: none; height: 92vh; height: 92dvh; /* vh als Rueckfall fuer Browser ohne dvh */ border-radius: 18px 18px 0 0; border-bottom: 0; display: grid; grid-template-rows: auto 1fr auto; } .overlay.sheet-overlay .modal-body { overflow-y: auto; min-height: 0; overscroll-behavior: contain; } /* Flacher als die 220px am Rechner: unter dem festen Fuss soll genug Scrollflaeche fuer lange Zutatenlisten bleiben, das Foto aber weiterhin traegt. */ .overlay.sheet-overlay .ms-photo img, .overlay.sheet-overlay .ms-photo .ms-cover-sym { height: 28vh; min-height: 130px; max-height: 200px; } .overlay.sheet-overlay .modal-foot { padding-bottom: calc(14px + env(safe-area-inset-bottom)); } } /* Makro-Ueberschrift: dieselbe Abschnittsform wie "Zutaten" statt eigener Hervorhebung mit rotem Rahmen - die Gliederung leisten die Ueberschriften, kein Block sticht mehr ohne Grund heraus (Nachtrag Abnahme Phase 1). Die Schrift kommt jetzt aus .sec-h; hier bleibt nur, was diese Ueberschrift von den anderen unterscheidet: sie traegt zusaetzlich einen Hinweis und einen Knopf und muss dafuer eine Reihe sein. */ .nut-total > .sec-h { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 22px 0 4px; } .nut-total > .sec-h .hint { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12px; } .ms-nut { margin-bottom: 15px; } .ms-nut .nut-total { margin-bottom: 0; } /* Makro-Kacheln im Bearbeiten-Zweig (Nachtrag Abnahme Phase 2, 08.08.2026, loest den antippbaren Ruhezustand samt eigenem "Fertig"-Knopf wieder ab): dieselbe .nutfacts- Kachel wie im Nur-Lese-Zweig (mealStatsHtml) - Farbpunkte/Reihenfolge kommen bereits ueber .nutfacts .nf.t-kcal/.t-carb/.t-prot/.t-fat (siehe oben), hier nur der Umbau von Text zu Eingabefeld. Die 16px stehen hier BEWUSST direkt in der Regel und nicht in einer Breiten-Media-Query: die allgemeine iOS-Zoom-Regel greift nur bis 560px, im Querformat und auf Tablets waere der Zoom sonst zurueck (CLAUDE.md §26). */ .nutfacts-edit .v { display: flex; align-items: baseline; gap: 3px; } /* Eingabe-Affordanz wie .ms-name: unauffaellig bis zur Beruehrung (kein Dauer-Rahmen, der die ruhige Kachel-Optik stoert), aber mit Hover-/Fokusrahmen erkennbar als Eingabefeld, nicht als reiner Text. */ .nutfacts-edit .v input { all: unset; box-sizing: border-box; width: 4.5ch; flex: none; font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; color: var(--text); border: 1px solid transparent; border-radius: var(--radius-sm); padding: 1px 3px; margin: -1px -3px; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); -moz-appearance: textfield; } /* Ohne Spinner-Pfeile unterdrueckt (gleiches Muster wie .onb-num): Chromium reserviert sonst intern Breite fuer sie und schneidet bei 4,5ch dreistellige Werte wie "520" ab. */ .nutfacts-edit .v input::-webkit-outer-spin-button, .nutfacts-edit .v input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .nutfacts-edit .v input:hover { border-color: var(--border-strong); } .nutfacts-edit .v input::placeholder { color: var(--text-muted); font-weight: 400; } .nutfacts-edit .v input:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); } /* ---------- Ladezustand fuer Meal-Bilder ---------- Das Layout sprang nie: .rimg hat eine feste Hoehe, das Bild liegt absolut darin. Was fehlte, war die Ueberbrueckung - bis das Foto da ist, stand eine leere Flaeche. Auf einem langsamen Mobilnetz sind das beim Scrollen durchs Rezeptbuch zwei Dutzend graue Loecher. Die Animation laeuft NUR, solange das Bild fehlt: `bild-da` kommt von einem einzigen Listener (document 'load' mit Capture), nicht von einem Inline-Handler - die CSP dieser Seite und die Bauart der App verbieten beides. Ein Shimmer, der unter jedem laengst geladenen Bild weiterlaeuft, kostet auf einer Liste mit 30 Karten dauerhaft Rechenzeit und Akku, ohne dass ihn je jemand sieht. */ .rimg { position: relative; height: 116px; display: grid; place-items: center; overflow: hidden; background: var(--surface-2); } .rimg:not(.bild-da)::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--text) 7%, transparent) 42%, transparent 64%); background-size: 220% 100%; animation: pm-schimmer 1.25s linear infinite; } @keyframes pm-schimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } } /* Ohne Bewegung bleibt die getoente Flaeche - sie sagt dasselbe, nur ruhig. */ @media (prefers-reduced-motion: reduce) { .rimg:not(.bild-da)::before { animation: none; background: none; } } .rimg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(130px 66px at 78% 16%, rgba(255,255,255,.30), transparent); pointer-events: none; } .rimg.has-photo::after { display: none; } .rphoto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* Makro-Hinweis oben links: .good (Proteinreich/Low Carb) nutzt --ok, das schon als "positiv"-Signal existiert (Sync verbunden). .fat nutzt dasselbe Blau wie die Naehrwert-Kacheln (--mc/--tc fuer Fett) - kein neuer Fett-Ton. Bis zu zwei Badges (Haupt-Makro + "Low Carb"), daher Flex mit Umbruch: auf schmalen Karten rutscht das zweite in die naechste Zeile statt aus dem Bild. */ .rimg .mbadges { position: absolute; left: 11px; top: 10px; z-index: 1; display: flex; flex-wrap: wrap; gap: 5px; max-width: calc(100% - 22px); } .rimg .mbadge { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--on-photo); background: rgba(16,18,13,.62); backdrop-filter: blur(4px); padding: 3px 9px 3px 7px; border-radius: 999px; } .rimg .mbadge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mbc); flex: none; } .rimg .mbadge.good { --mbc: var(--ok); } .rimg .mbadge.fat { --mbc: var(--fat); } .rbody { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .rcard .top { display: flex; align-items: flex-start; gap: 10px; } .rcard :is(h2, h3) { font-family: var(--font-display); font-size: 18px; font-weight: 600; margin: 0; flex: 1; line-height: 1.25; word-break: break-word; } /* Stretched-Link-Muster (plans/MealAnsicht.MD Schritt 3): der Titel oeffnet die ganze Karte, ohne dass ein