/* Rezept-Karteikasten. Richtungsvereinbarung: Kommentar am Anfang von in base.html. */ @font-face { font-family: "Atkinson Next"; src: url("/static/fonts/atkinson-next-latin-wght.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; } @font-face { font-family: "Atkinson Next"; src: url("/static/fonts/atkinson-next-latin-wght-italic.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; } :root { /* Der Kasten und seine Karten */ --kasten: #2B3630; --kasten-kante: #3A4740; --karte: #FDFDFA; --karte-dahinter: #E9ECE4; --karte-hinten: #D7DCD2; --tinte: #1F2A24; --tinte-leise: #56645B; --linie: #B3CBE6; --kopflinie: #D4453A; --rotstift: #B8352B; --knopf: #2B3630; --knopf-druck: #1C2520; --kasten-text: #C7D0C9; /* Fließtext auf dem Kasten */ --kasten-text-leise: #AAB6AE; /* Nebentext auf dem Kasten */ --platzhalter: #66736B; /* 4,9:1 auf Karton */ /* Registerreiter: je Bereich eine Farbe */ --reiter-heute: #E4876B; --reiter-woche: #8DB2DA; --reiter-einkauf: #9CBF8F; --reiter-vorrat: #E3B94A; --reiter-profil: #C9CEC8; --zeile: 2.75rem; /* Linienabstand der Karteikarte = Zeilenhöhe = Tippfläche */ --rand: 1.25rem; /* Innenabstand der Karte */ --r-karte: 6px; --r-knopf: 10px; --schatten-karte: 0 1px 1px rgba(10, 18, 14, .28), 0 12px 28px -14px rgba(10, 18, 14, .65); --schatten-reiter: 0 -6px 16px -8px rgba(10, 18, 14, .6); --aus: cubic-bezier(.16, 1, .3, 1); /* exponentielles Ease-out */ --reiter-hoehe: 3.25rem; /* Tippfläche der Tab-Leiste; mit Innenabstand .6rem darüber */ --schrift: "Atkinson Next", "Atkinson Hyperlegible Next", system-ui, -apple-system, sans-serif; color-scheme: light; accent-color: var(--tinte); } *, *::before, *::after { box-sizing: border-box; } /* iOS-Home-Bildschirm-App: Ist die Seite kürzer als das Display (Heute), rechnet Safari „unten“ ohne den Bereich der Statusleiste; die fixierte Tab-Leiste schwebt dann darüber. Mindesthöhe inklusive oberem Bereich behebt das. */ html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--kasten-kante) var(--kasten); background: var(--kasten); min-height: calc(100% + env(safe-area-inset-top)); } body { margin: 0; min-height: 100dvh; background: var(--kasten); color: var(--tinte); font: 400 1.0625rem/1.6 var(--schrift); font-variant-numeric: tabular-nums; caret-color: var(--kopflinie); -webkit-tap-highlight-color: transparent; } ::selection { background: color-mix(in srgb, var(--reiter-vorrat) 55%, transparent); color: var(--tinte); } h1, h2, h3 { margin: 0; font-weight: 750; letter-spacing: -0.02em; line-height: 1.15; text-wrap: balance; } h1 { font-size: 1.875rem; } h2 { font-size: 1.375rem; } h3 { font-size: 1.0625rem; letter-spacing: -0.01em; } p { margin: 0; } a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1.5px; } strong { font-weight: 750; } .nur-lesbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } :focus-visible { outline: 3px solid var(--tinte); outline-offset: 2px; box-shadow: 0 0 0 6px rgba(227, 185, 74, .45); } .knopf-link:focus-visible, .sprung:focus-visible, .kasten-kopf :focus-visible { outline-color: var(--reiter-vorrat); box-shadow: none; } .sprung { position: absolute; left: 1rem; top: -4rem; z-index: 50; padding: .5rem 1rem; background: var(--karte); border-radius: var(--r-knopf); } .sprung:focus { top: 1rem; } /* ---------- Kasten (Seite) ---------- */ .kasten { max-width: 36rem; margin: 0 auto; padding: calc(1.5rem + env(safe-area-inset-top)) 1rem calc(var(--reiter-hoehe) + 2.5rem + env(safe-area-inset-bottom)); display: grid; gap: 1.75rem; } .ohne-reiter .kasten { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); } .ohne-reiter .leiste { bottom: 0; padding-bottom: calc(.75rem + env(safe-area-inset-bottom)); } .seite-login .kasten { min-height: 100dvh; align-content: center; padding-bottom: 2rem; } /* ---------- Karteikarte ---------- */ .karte { position: relative; background: var(--karte); border-radius: var(--r-karte); box-shadow: var(--schatten-karte); } /* Zwei Karten dahinter: eigene Papierflächen, hinter der vorderen Karte im Stapelkontext des Kastens */ .kasten { isolation: isolate; } .karte.stapel { margin-top: 1.4rem; } .karte.stapel::before, .karte.stapel::after { content: ""; position: absolute; z-index: -1; border-radius: var(--r-karte); left: .5rem; right: .5rem; top: -.625rem; height: 3rem; background: var(--karte-dahinter); box-shadow: 0 1px 1px rgba(10, 18, 14, .25), 0 6px 14px -8px rgba(10, 18, 14, .6); } .karte.stapel::after { left: 1rem; right: 1rem; top: -1.25rem; z-index: -2; background: var(--karte-hinten); } .karte-kopf { padding: 1rem var(--rand) .6rem; border-bottom: 2px solid var(--kopflinie); display: grid; gap: .25rem; } .karte-kopf .notiz { color: var(--tinte-leise); font-size: .9375rem; } /* Linierter Kartenteil: Hintergrundlinien und Zeilen haben dieselbe Höhe */ .linien { padding: 0 var(--rand) calc(var(--zeile) * .5); line-height: var(--zeile); background-image: linear-gradient(to bottom, transparent calc(var(--zeile) - 1px), var(--linie) calc(var(--zeile) - 1px)); background-size: 100% var(--zeile); background-repeat: repeat-y; } .linien > p { max-width: 62ch; text-wrap: pretty; } .karte-fuss { padding: calc(var(--zeile) * .25) var(--rand) var(--rand); } .leise { color: var(--tinte-leise); } .rot { color: var(--rotstift); } /* ---------- Knöpfe ---------- */ .knopf { appearance: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; padding: 0 1.25rem; font: 700 1rem/1 var(--schrift); color: var(--karte); background: var(--knopf); border-radius: var(--r-knopf); box-shadow: 0 1px 1px rgba(10, 18, 14, .3), 0 6px 14px -8px rgba(10, 18, 14, .7); transition: transform 180ms var(--aus); text-decoration: none; } .knopf:hover { background: #36433C; } .knopf:active { transform: translateY(1px) scale(.98); background: var(--knopf-druck); } .knopf:disabled { opacity: .45; cursor: not-allowed; } .knopf.auf-karte { background: var(--karte); color: var(--tinte); box-shadow: inset 0 0 0 1.5px var(--tinte); } .knopf.auf-karte:hover { background: #F2F4EE; } .knopf.auf-karte:active { background: #E6EAE1; } .htmx-request.knopf, .htmx-request .knopf { opacity: .6; cursor: progress; } .knopf-link { appearance: none; background: none; border: 0; padding: 0; cursor: pointer; font: 700 1rem var(--schrift); color: var(--karte); text-decoration: underline; text-underline-offset: .25em; } .knopf-link:hover { color: var(--reiter-vorrat); } .knopf-link:active { opacity: .7; } /* ---------- Tab-Leiste (Navigation) ---------- */ /* Wie eine App: feste Leiste über den Home-Indikator, Symbol über Wort, der aktive Bereich in seiner Farbe. Gesamthöhe über dem Indikator = --reiter-hoehe + .6rem (darauf ist die klebende .leiste abgestimmt). */ .symbole { position: absolute; width: 0; height: 0; overflow: hidden; } .reiter { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: .35rem .5rem calc(.25rem + env(safe-area-inset-bottom)); background: rgba(35, 45, 40, .96); -webkit-backdrop-filter: saturate(140%) blur(16px); backdrop-filter: saturate(140%) blur(16px); box-shadow: 0 -1px 0 var(--kasten-kante); } /* Absicherung: unter der Leiste setzt sich ihre Fläche fort, falls iOS sie doch über dem Rand platziert */ .reiter::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12rem; background: rgb(35, 45, 40); } .reiter ul { list-style: none; margin: 0 auto; padding: 0; max-width: 36rem; display: grid; grid-template-columns: repeat(5, 1fr); } .reiter a { --farbe: var(--reiter-profil); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; height: var(--reiter-hoehe); border-radius: 12px; text-decoration: none; color: var(--kasten-text-leise); } .reiter-pille { display: grid; place-items: center; width: 3.5rem; height: 1.875rem; border-radius: 1rem; transition: transform 180ms var(--aus); } .reiter-symbol { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .reiter-symbol .punkte { stroke-width: 2.4; } .reiter-wort { font-size: .8125rem; font-weight: 700; line-height: 1; letter-spacing: .01em; } @media (hover: hover) { .reiter a:hover { color: var(--kasten-text); } } .reiter a:active .reiter-pille { transform: scale(.9); } .reiter a[aria-current="page"] { color: var(--farbe); } .reiter a[aria-current="page"] .reiter-pille { background: color-mix(in srgb, var(--farbe) 22%, transparent); } .reiter a[aria-current="page"] .reiter-symbol { stroke-width: 2.1; } .reiter a:focus-visible { outline: none; box-shadow: none; } .reiter a:focus-visible .reiter-pille { outline: 2px solid var(--reiter-vorrat); outline-offset: 2px; } .reiter .heute { --farbe: var(--reiter-heute); } .reiter .woche { --farbe: var(--reiter-woche); } .reiter .einkauf { --farbe: var(--reiter-einkauf); } .reiter .vorrat { --farbe: var(--reiter-vorrat); } .reiter .profil { --farbe: #E4E8E3; } /* heller als die leisen Wörter, sonst wäre „aktiv“ bei Profil kaum zu sehen */ /* ---------- Seitenkopf im Kasten (auf dunklem Grund) ---------- */ .kasten-kopf { color: var(--karte); display: grid; gap: .5rem; } .kasten-kopf p { color: var(--kasten-text); max-width: 44ch; } .schritte { list-style: none; margin: 0; padding: 0; display: flex; gap: 1rem; color: var(--kasten-text-leise); font-weight: 700; font-size: .9375rem; counter-reset: s; } .schritte li { counter-increment: s; display: flex; align-items: center; gap: .4rem; } .schritte li::before { content: counter(s); display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; font-size: .875rem; } .schritte li[aria-current="step"] { color: var(--karte); } .schritte li[aria-current="step"]::before { background: var(--reiter-vorrat); color: var(--tinte); box-shadow: none; } /* ---------- Hinweise ---------- */ .hinweis { padding: .75rem var(--rand); border-radius: var(--r-karte); background: var(--karte); font-weight: 700; box-shadow: var(--schatten-karte); } .hinweis.fehler { color: var(--rotstift); } .hinweis ul { margin: .25rem 0 0; padding-left: 1.25rem; font-weight: 400; } /* ---------- Formulare auf Karten ---------- */ .formular { display: grid; gap: 1.75rem; } fieldset.karte { border: 0; margin: 0; padding: 0; min-width: 0; } fieldset.karte > legend { float: left; width: 100%; padding: 1rem var(--rand) .6rem; border-bottom: 2px solid var(--kopflinie); font-size: 1.375rem; font-weight: 750; letter-spacing: -0.02em; line-height: 1.15; } fieldset.karte > legend + * { clear: both; } .feld { display: grid; font-weight: 700; } .feld small { font-weight: 400; color: var(--tinte-leise); font-size: .9375rem; } /* Eingaben schreiben auf die Linie */ .feld input, .feld select, .schreiben input { width: 100%; height: var(--zeile); margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; font: 400 1.0625rem/var(--zeile) var(--schrift); color: var(--tinte); } .feld select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--tinte) 50%), linear-gradient(135deg, var(--tinte) 50%, transparent 50%); background-position: calc(100% - 14px) 55%, calc(100% - 8px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 1.75rem; } .feld input::placeholder, .schreiben input::placeholder { color: var(--platzhalter); } .feld input:hover, .feld select:hover, .schreiben input:hover { background-color: rgba(179, 203, 230, .18); } .feld input:focus-visible, .feld select:focus-visible, .schreiben input:focus-visible { outline: none; background-color: rgba(227, 185, 74, .22); box-shadow: inset 0 -2px 0 var(--tinte); } /* Kurzes Feld: Begriff links, Wert rechts auf einer Linie */ .feld.zeile { grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: .75rem; min-height: var(--zeile); line-height: var(--zeile); } .feld.zeile input, .feld.zeile select { text-align: right; } .feld.zeile input { width: 6.5rem; } .feld.zeile input[type="time"] { width: 7.25rem; } .feld.zeile input[type="date"] { width: 10rem; } .feld.zeile input[name="ort"], .feld.zeile input[name="modell"] { width: 11rem; } .feld.zeile select { width: auto; max-width: 13rem; } .feld.zeile select { text-align-last: right; } .feld input:placeholder-shown { box-shadow: inset 0 -1.5px 0 var(--tinte-leise); } .feld input[aria-invalid="true"] { box-shadow: inset 0 -2px 0 var(--rotstift); } .nebeneinander { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); column-gap: 1rem; } /* Kästchen zum Ankreuzen */ .kreuz { display: flex; align-items: flex-start; gap: .65rem; min-height: var(--zeile); font-weight: 400; cursor: pointer; } .kreuz span { line-height: var(--zeile); } .kreuz input { appearance: none; flex: none; width: 1.3rem; height: 1.3rem; margin: calc((var(--zeile) - 1.3rem) / 2) 0 0; border-radius: 3px; box-shadow: inset 0 0 0 1.75px var(--tinte); background: var(--karte); cursor: pointer; display: grid; place-items: center; } .kreuz input::after { content: ""; width: .75rem; height: .4rem; border: solid var(--karte); border-width: 0 0 2.5px 2.5px; transform: translateY(-1px) rotate(-45deg) scale(0); } .kreuz input:checked { background: var(--tinte); } .kreuz input:checked::after { transform: translateY(-1px) rotate(-45deg) scale(1); } .kreuz:hover input { box-shadow: inset 0 0 0 2.5px var(--tinte); } .kreuz:active input { transform: scale(.9); } .kreuze { display: flex; flex-wrap: wrap; column-gap: 1.5rem; } /* Standardwoche: sieben Spalten zum Ankreuzen */ .woche { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; } .woche .tag { display: grid; justify-items: center; cursor: pointer; } .woche .tag-name { font-weight: 750; height: var(--zeile); } .woche .tag-feld { height: var(--zeile); display: grid; place-items: center; } .woche .tag input { appearance: none; width: 2rem; height: 2rem; margin: 0; border-radius: 3px; box-shadow: inset 0 0 0 1.75px var(--tinte); background: var(--karte); cursor: pointer; } .woche .tag input { display: grid; place-items: center; } .woche .tag input::after { content: ""; width: .9rem; height: .48rem; border: solid var(--karte); border-width: 0 0 3px 3px; transform: translateY(-2px) rotate(-45deg) scale(0); } .woche .tag input:checked { background: var(--tinte); } .woche .tag input:checked::after { transform: translateY(-2px) rotate(-45deg) scale(1); } .woche .tag:hover input { box-shadow: inset 0 0 0 2.5px var(--tinte); } .woche .tag:active input { transform: scale(.9); } /* Märkte */ .maerkte { list-style: none; margin: 0; padding: 0; } .markt { display: grid; grid-template-columns: 1fr 3.25rem; column-gap: .75rem; } .markt .rang input { text-align: center; font-weight: 700; } .markt .filiale { grid-column: 1 / -1; padding-left: 1.95rem; } .markt .filiale input { font-size: .9375rem; color: var(--tinte-leise); } .markt:not(:has(.kreuz input:checked)) .filiale { display: none; } .markt:not(:has(.kreuz input:checked)) .kreuz span { color: var(--tinte-leise); } .portion { font-size: 1.0625rem; } .leiste { position: sticky; bottom: calc(var(--reiter-hoehe) + .6rem + env(safe-area-inset-bottom)); z-index: 5; display: grid; margin: 0 -1rem; padding: .75rem 1rem; background: var(--kasten); box-shadow: 0 -14px 14px -6px var(--kasten); } .leiste .knopf { box-shadow: 0 2px 4px rgba(10, 18, 14, .3), 0 14px 30px -10px rgba(10, 18, 14, .8); background: var(--reiter-vorrat); color: var(--tinte); } .leiste .knopf:hover { background: #EBC45C; } .leiste .knopf:active { background: #D5AB3C; } /* KI-Status in der Leiste: steht dort, wo sonst die Hauptaktion steht, solange die KI arbeitet */ /* min-width: 0, sonst dehnt ein langer Rezepttitel die Grid-Leiste über den Bildschirm */ .ki-karte { min-width: 0; background: var(--karte); color: var(--tinte); border-radius: 10px; padding: .7rem 1rem .6rem; box-shadow: 0 2px 4px rgba(10, 18, 14, .3), 0 14px 30px -10px rgba(10, 18, 14, .8); } .ki-karte p { margin: 0; } .ki-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: 1rem; } .ki-kopf strong { font-weight: 750; } .ki-dauer { font-variant-numeric: tabular-nums; color: var(--tinte-leise); font-weight: 700; } .ki-schritt { margin-top: .15rem !important; font-size: .9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ki-balken { position: relative; height: .375rem; margin: .55rem 0 .45rem; border-radius: 3px; overflow: hidden; background: var(--karte-dahinter); } .ki-balken span { position: absolute; inset: 0; background: var(--reiter-vorrat); transform-origin: left center; transform: scaleX(0); transition: transform 600ms var(--aus); } .ki-balken.unbestimmt span { right: auto; width: 35%; animation: pendeln 1.4s ease-in-out infinite alternate; } @keyframes pendeln { from { transform: translateX(-100%); } to { transform: translateX(286%); } } .ki-hinweis { font-size: .8125rem; color: var(--tinte-leise); line-height: 1.4; } @media (prefers-reduced-motion: reduce) { .ki-balken.unbestimmt span { animation: none; width: 100%; transform: none; opacity: .45; } } /* ---------- Grundvorrat ---------- */ .modus { display: flex; gap: .4rem; padding: .9rem var(--rand) 0; } .modus a { min-height: 2.75rem; display: inline-flex; align-items: center; padding: 0 1rem; border-radius: 8px 8px 0 0; text-decoration: none; font-weight: 700; font-size: .9375rem; color: var(--tinte-leise); background: var(--karte-dahinter); transition: transform 180ms var(--aus); } .modus a:hover { color: var(--tinte); } .modus a:active { transform: translateY(1px); } .modus a[aria-current="true"] { background: var(--reiter-vorrat); color: var(--tinte); } .modus + .karte-kopf { padding-top: .75rem; } details.fach { border-top: 1px solid var(--linie); } details.fach:first-of-type { border-top: 0; } details.fach > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0 var(--rand); min-height: var(--zeile); line-height: var(--zeile); } details.fach > summary::-webkit-details-marker { display: none; } details.fach > summary h3 { line-height: var(--zeile); } details.fach > summary .zaehler { color: var(--tinte-leise); font-size: .9375rem; margin-left: auto; } details.fach > summary::after { content: ""; width: .5rem; height: .5rem; border: solid var(--tinte); border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-3px); flex: none; align-self: center; transition: transform 200ms var(--aus); } details.fach[open] > summary::after { transform: rotate(-135deg) translateY(-1px); } details.fach > summary:hover h3 { text-decoration: underline; text-underline-offset: .2em; } details.fach ul { list-style: none; margin: 0; padding: 0 0 calc(var(--zeile) * .25); } .eintrag-form { margin: 0; } .eintrag { appearance: none; width: 100%; border: 0; background: transparent; cursor: pointer; text-align: left; display: flex; align-items: center; gap: .65rem; min-height: var(--zeile); padding: 0 var(--rand); font: 400 1.0625rem/1.2 var(--schrift); color: var(--tinte-leise); } .eintrag .kaestchen { flex: none; width: 1.3rem; height: 1.3rem; border-radius: 3px; box-shadow: inset 0 0 0 1.75px currentColor; display: grid; place-items: center; } .eintrag.ist-da { color: var(--tinte); } .eintrag.ist-da .kaestchen { background: var(--tinte); box-shadow: none; } .eintrag.ist-da .kaestchen::after { content: ""; width: .72rem; height: .38rem; border: solid var(--karte); border-width: 0 0 2.5px 2.5px; transform: translateY(-1px) rotate(-45deg); } .eintrag.ist-leer { color: var(--rotstift); } .eintrag.ist-leer .name { text-decoration: line-through; text-decoration-thickness: 2px; } .eintrag.ist-leer .kaestchen { background: var(--rotstift); box-shadow: none; } .eintrag.ist-leer .kaestchen::after { content: ""; width: .7rem; height: 0; border: 0; border-top: 2.5px solid var(--karte); transform: none; } /* Im Modus „Leer melden“ ist Vorhandenes kein Häkchen, sondern ein offenes Kästchen */ .modus-leer .eintrag.ist-da:not(.ist-leer) .kaestchen { background: transparent; box-shadow: inset 0 0 0 1.75px currentColor; } .modus-leer .eintrag.ist-da:not(.ist-leer) .kaestchen::after { content: none; } .eintrag .marke { margin-left: auto; font-weight: 700; font-size: .875rem; } .eintrag:hover { background: rgba(179, 203, 230, .2); } .eintrag:active .kaestchen { transform: scale(.88); } .eintrag:disabled { cursor: default; opacity: .5; } .eintrag:disabled:hover { background: transparent; } .htmx-request .eintrag, .eintrag.htmx-request { opacity: .6; } .schreiben { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .75rem; padding: 0 var(--rand) var(--rand); } .schreiben label { grid-column: 1 / -1; font-weight: 700; line-height: var(--zeile); } .schreiben input { box-shadow: inset 0 -1.5px 0 var(--tinte-leise); } /* ---------- Heute ---------- */ .heute-karte h1 { font-size: 2.25rem; letter-spacing: -0.03em; } /* Kartenadresse: Reiter an der Oberkante der vorderen Karte */ .adresse { position: absolute; right: 1rem; top: -2rem; z-index: 1; height: 2rem; padding: 0 .85rem; display: flex; align-items: center; background: var(--karte); border-radius: 8px 8px 0 0; font-weight: 750; font-size: .9375rem; color: var(--rotstift); } /* Rasterzeilen: Begriff links, Wert rechts, genau eine Linie hoch */ .raster { margin: 0; } .raster > div { display: grid; grid-template-columns: 5.75rem 1fr; column-gap: .75rem; } .raster dt { font-weight: 700; color: var(--tinte-leise); } .raster dd { margin: 0; line-height: var(--zeile); } /* umbrechende Werte belegen ganze Linien */ .raster a { display: flex; justify-content: space-between; align-items: center; gap: .5rem; text-decoration: none; min-height: var(--zeile); } .raster a::after { content: ""; flex: none; width: .5rem; height: .5rem; border: solid currentColor; border-width: 2px 2px 0 0; transform: rotate(45deg); } .raster a:hover { text-decoration: underline; text-underline-offset: .2em; } .raster a:active { opacity: .7; } .abmelden { justify-self: start; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } } /* ---------- Anmeldung / Face ID ---------- */ .karte-fuss.oben { padding-top: var(--rand); padding-bottom: .25rem; } .knopf.breit { width: 100%; } .meldung:empty { display: none; } .meldung { margin-top: .6rem; font-weight: 700; } .passwort-weg > summary { list-style: none; cursor: pointer; padding: 0 var(--rand); min-height: var(--zeile); line-height: var(--zeile); font-weight: 700; color: var(--tinte-leise); text-decoration: underline; text-underline-offset: .2em; } .passwort-weg > summary::-webkit-details-marker { display: none; } .passwort-weg > summary:hover { color: var(--tinte); } .passwort-weg[open] > summary { text-decoration: none; color: var(--tinte); } .passkey-zeile { display: flex; justify-content: space-between; align-items: center; gap: .75rem; white-space: nowrap; } .passkey-zeile form { margin: 0; } .knopf-text-karte { appearance: none; background: none; border: 0; padding: 0 .25rem; min-height: var(--zeile); cursor: pointer; font: 700 .9375rem var(--schrift); color: var(--tinte-leise); text-decoration: underline; text-underline-offset: .2em; } .knopf-text-karte:hover { color: var(--tinte); } .knopf-text-karte:active { opacity: .7; } /* ---------- Angebote: Preistabelle ---------- */ /* Registertrenner: Laschen der Gänge stehen oben aus dem Stapel heraus (Laschen-Regel) */ .trenner-gruppe { display: grid; gap: 1.75rem; } .trenner { display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none; margin-bottom: -1.75rem; padding: 0 .25rem; scroll-snap-type: x proximity; } .trenner::-webkit-scrollbar { display: none; } .trenner a { flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; height: var(--zeile); padding: 0 .9rem; border-radius: 8px 8px 0 0; background: var(--karte-dahinter); color: var(--tinte-leise); font-weight: 700; font-size: .9375rem; text-decoration: none; white-space: nowrap; transition: transform 180ms var(--aus); } .trenner a:hover { color: var(--tinte); background: var(--karte); } .trenner a:active { transform: translateY(1px); } .preiskarte { scroll-margin-top: 1rem; } .preistabelle { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; } .preistabelle col.c-name { width: 36%; } .preistabelle col.c-preis { width: calc((64% - var(--rand)) / var(--spalten, 4)); } .preistabelle col.c-letzte { width: calc((64% - var(--rand)) / var(--spalten, 4) + var(--rand)); } .preistabelle th, .preistabelle td { padding: 0 .35rem 0 0; border-bottom: 1px solid var(--linie); text-align: right; vertical-align: top; font-size: 1.0625rem; line-height: var(--zeile); font-weight: 400; } .preistabelle thead th { font-size: .875rem; font-weight: 700; color: var(--tinte-leise); } .preistabelle tbody td { font-size: 1rem; } .preistabelle td, .preistabelle thead th { padding-right: .7rem; } /* Ziffern in fester Breite: vier Läden passen auf 390 px */ .preistabelle th:first-child { text-align: left; padding-left: var(--rand); } .preistabelle th:last-child, .preistabelle td:last-child { padding-right: var(--rand); } .preistabelle .einheit { font-size: .875rem; font-weight: 400; color: var(--tinte-leise); } .preistabelle .ab { display: block; font-size: .875rem; line-height: 1.3; margin-top: -.55rem; padding-bottom: .5rem; color: var(--tinte-leise); } .preistabelle .einheit-kurz { white-space: nowrap; font-size: .875rem; font-weight: 400; color: var(--tinte-leise); } .zeile-knopf { appearance: none; background: none; border: 0; padding: 0; width: 100%; text-align: left; cursor: pointer; font: 700 1.0625rem/1.3 var(--schrift); color: var(--tinte); hyphens: auto; /* einzeilig genau eine Linie hoch, umbrechende Namen bleiben ein Block */ padding-block: calc((var(--zeile) - 1.3em) / 2); } .billigste { color: var(--rotstift); font-weight: 750 !important; } .spaeter { color: var(--tinte-leise); } .preiszeile { cursor: pointer; } @media (hover: hover) { .preiszeile:hover > * { background: rgba(179, 203, 230, .2); } } /* iOS: kein hängender Hover nach dem Tippen */ .preiszeile:active .zeile-knopf { opacity: .7; } .preiszeile.ist-offen > * { background: rgba(179, 203, 230, .2); } /* Detailzeile: gleiche Karte, gleiche Linien, keine Box */ .detailzeile td { text-align: left; padding: 0 var(--rand); line-height: var(--zeile); background-image: linear-gradient(to bottom, transparent calc(var(--zeile) - 1px), var(--linie) calc(var(--zeile) - 1px)); background-size: 100% var(--zeile); } .angebotsliste { list-style: none; margin: 0; padding: 0; } .angebotsliste p { line-height: var(--zeile); } .korrektur > summary { cursor: pointer; font-size: .9375rem; font-weight: 700; color: var(--tinte-leise); min-height: var(--zeile); line-height: var(--zeile); text-decoration: underline; text-underline-offset: .2em; list-style: none; } .korrektur > summary::-webkit-details-marker { display: none; } .korrektur > summary:hover { color: var(--tinte); } .korrektur .schreiben { padding: 0; } /* Karten-Fokus (DESIGN.md): Senf-Tönung plus Tinte-Kante statt Halo */ .zeile-knopf:focus-visible, .korrektur > summary:focus-visible, .trenner a:focus-visible, .knopf-zeile:focus-visible { outline: none; background: rgba(227, 185, 74, .22); box-shadow: inset 0 -2px 0 var(--tinte); } /* Knopf auf einer Rasterzeile (z. B. „Abrufen“) */ .mit-knopf { display: flex; justify-content: space-between; align-items: center; gap: .75rem; } .mit-knopf > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .knopf-zeile { appearance: none; flex: none; cursor: pointer; height: var(--zeile); padding: 0 1rem; border: 0; border-radius: var(--r-knopf); font: 700 .9375rem var(--schrift); color: var(--tinte); background: var(--karte); box-shadow: inset 0 0 0 1.5px var(--tinte); transition: transform 180ms var(--aus); } .knopf-zeile:hover { background: #F2F4EE; } .knopf-zeile:active { transform: translateY(1px) scale(.98); background: #E6EAE1; } .knopf-zeile:disabled { opacity: .45; cursor: progress; } .fussnote { color: var(--kasten-text-leise); font-size: .875rem; } /* Upload: Datei als Rasterzeile, echtes Eingabefeld unsichtbar darüber */ .datei-zeile { position: relative; cursor: pointer; } .datei-wert { justify-self: end; text-decoration: underline; text-underline-offset: .2em; font-weight: 400; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .datei-eingabe { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; } @media (hover: hover) { .datei-zeile:hover .datei-wert { color: var(--tinte); background: rgba(179, 203, 230, .18); } } .datei-zeile:focus-within { background: rgba(227, 185, 74, .22); box-shadow: inset 0 -2px 0 var(--tinte); } /* ---------- Woche: Check-in-Streifen ---------- */ .checkin .tag { margin: 0; } .tag-knopf { appearance: none; border: 0; background: none; padding: 0; width: 100%; cursor: pointer; display: grid; justify-items: center; font: inherit; color: inherit; } .tag-knopf .tag-name { font-weight: 750; height: var(--zeile); line-height: var(--zeile); } .tag-knopf .tag-feld { height: var(--zeile); display: grid; place-items: center; } .kaestchen-gross { width: 2rem; height: 2rem; border-radius: 3px; box-shadow: inset 0 0 0 1.75px var(--tinte); background: var(--karte); display: grid; place-items: center; transition: transform 180ms var(--aus); } .tag-knopf[aria-pressed="true"] .kaestchen-gross { background: var(--tinte); } .tag-knopf[aria-pressed="true"] .kaestchen-gross::after { content: ""; width: .9rem; height: .48rem; border: solid var(--karte); border-width: 0 0 3px 3px; transform: translateY(-2px) rotate(-45deg); } .tag-knopf:active .kaestchen-gross { transform: scale(.9); } @media (hover: hover) { .tag-knopf:hover .kaestchen-gross { box-shadow: inset 0 0 0 2.5px var(--tinte); } } .tag-knopf:disabled { cursor: default; opacity: .6; } .tag-knopf:focus-visible { outline: none; background: rgba(227, 185, 74, .22); box-shadow: inset 0 -2px 0 var(--tinte); } /* ---------- Woche: Abende ---------- */ /* Die Gerichte-Karte liegt ganz auf dem Linienraster: jede Zeile genau 2.75rem */ .abende { list-style: none; margin: 0; padding: 0; background-image: linear-gradient(to bottom, transparent calc(var(--zeile) - 1px), var(--linie) calc(var(--zeile) - 1px)); background-size: 100% var(--zeile); } .abend { position: relative; padding: 0 var(--rand); } .abend p { line-height: var(--zeile); } .abend-kopf { display: flex; align-items: baseline; gap: .75rem; } .abend-tag { flex: none; width: 5.25rem; font-weight: 700; color: var(--tinte-leise); } /* Titel führt zum Rezept: ganze Restzeile tippbar, Pfeil wie bei den Link-Rasterzeilen */ .abend-titel { flex: 1; min-width: 0; display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; min-height: var(--zeile); font-weight: 750; text-decoration: none; } .abend-titel::after { content: ""; flex: none; width: .5rem; height: .5rem; margin: calc(var(--zeile) / 2 - .25rem) .2rem 0 0; border: solid currentColor; border-width: 2px 2px 0 0; transform: rotate(45deg); } @media (hover: hover) { .abend-titel:hover { text-decoration: underline; text-underline-offset: .2em; } } .abend-titel:active { opacity: .7; } .abend-titel:focus-visible { outline: none; background: rgba(227, 185, 74, .22); box-shadow: inset 0 -2px 0 var(--tinte); } .abend-meta { padding-left: 6rem; color: var(--tinte-leise); } .abend.ist-weg .abend-tag { font-weight: 400; } /* Büroklammer greift über die rechte Kartenkante (festgehalten) */ .abend .fest { position: absolute; right: -.45rem; top: -.55rem; z-index: 2; color: var(--tinte-leise); } .klammer { width: 1.1rem; height: 2.4rem; display: block; transform: rotate(8deg); } .abend.ist-fest .abend-titel { padding-right: .75rem; } .abend-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.25rem; padding-left: 6rem; } .abend-aktionen form { margin: 0; } .text-aktion, .wuerfeln > summary { appearance: none; background: none; border: 0; padding: 0; cursor: pointer; min-height: var(--zeile); font: 700 .9375rem/var(--zeile) var(--schrift); color: var(--tinte); text-decoration: underline; text-underline-offset: .2em; list-style: none; } .wuerfeln > summary::-webkit-details-marker { display: none; } @media (hover: hover) { .text-aktion:hover, .wuerfeln > summary:hover { color: var(--tinte-leise); } } .text-aktion:active, .wuerfeln > summary:active { opacity: .7; } .text-aktion:focus-visible, .wuerfeln > summary:focus-visible { outline: none; background: rgba(227, 185, 74, .22); box-shadow: inset 0 -2px 0 var(--tinte); } /* Flex-Kinder schrumpfen sonst nicht unter die Breite des längsten Rezepttitels im Auswahlfeld */ .wuerfeln { min-width: 0; } .wuerfeln[open] { flex-basis: 100%; width: 100%; } .wuerfeln form { margin: 0; } .gruende { border: 0; margin: 0; min-width: 0; padding: .25rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem .35rem; } .grund-lasche { position: relative; cursor: pointer; } .grund-lasche input { position: absolute; opacity: 0; } .grund-lasche span { display: inline-flex; align-items: center; height: 2.25rem; padding: 0 .75rem; border-radius: 8px; background: var(--karte-dahinter); color: var(--tinte-leise); font-weight: 700; font-size: .9375rem; transition: transform 180ms var(--aus); } .grund-lasche input:checked + span { background: var(--reiter-vorrat); color: var(--tinte); } .grund-lasche:active span { transform: translateY(1px); } .grund-lasche input:focus-visible + span { box-shadow: inset 0 -2px 0 var(--tinte); } /* Eingabe links, Knopf rechts auf derselben Rasterzeile */ .zeile-mit-knopf { display: flex; align-items: center; gap: .75rem; min-height: var(--zeile); margin: 0; } .zeile-mit-knopf input, .zeile-mit-knopf select { flex: 1; width: 0; min-width: 0; height: var(--zeile); margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; font: 400 1.0625rem var(--schrift); color: var(--tinte); } .zeile-mit-knopf input::placeholder { color: var(--platzhalter); } .zeile-mit-knopf select { appearance: none; text-overflow: ellipsis; background-image: linear-gradient(45deg, transparent 50%, var(--tinte) 50%), linear-gradient(135deg, var(--tinte) 50%, transparent 50%); background-position: calc(100% - 14px) 55%, calc(100% - 8px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 1.75rem; } .zeile-mit-knopf input:focus-visible, .zeile-mit-knopf select:focus-visible { outline: none; background-color: rgba(227, 185, 74, .22); box-shadow: inset 0 -2px 0 var(--tinte); } .kurz-notiz { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Signatur: die neu gewürfelte Karte wird aus dem Kasten gezogen */ @keyframes ziehen { from { transform: translateX(-105%); } to { transform: none; } } .abend.ist-neu { animation: ziehen 220ms var(--aus) both; } /* ---------- Rezept ---------- */ .rezept h1 { font-size: 2.25rem; letter-spacing: -0.03em; } .raster .portionen-wahl { display: flex; justify-content: flex-end; gap: .35rem; align-items: center; } .raster .portionen-wahl a { display: inline-grid; place-items: center; justify-content: center; grid-template-columns: 1fr; width: 2.75rem; height: 2.75rem; min-height: 0; border-radius: 8px; text-decoration: none; background: var(--karte-dahinter); font-weight: 700; transition: transform 180ms var(--aus); } .raster .portionen-wahl a::after { content: none; } .raster .portionen-wahl a[aria-current="true"] { background: var(--reiter-vorrat); color: var(--tinte); } .raster .portionen-wahl a:active { transform: translateY(1px); } .raster .portionen-wahl a:focus-visible { outline: none; box-shadow: inset 0 -2px 0 var(--tinte); } .zutatenliste { list-style: none; margin: 0; } .zutatenliste li { display: grid; grid-template-columns: 5.5rem 1fr; gap: .75rem; } .zutatenliste .menge { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; } .zutatenliste .aus-vorrat .menge { color: var(--tinte-leise); font-weight: 400; } /* Rote Randspalte: Schritte nummeriert am Heftrand; der aktuelle Schritt ist markiert (Kochmodus) */ .randspalte { list-style: none; margin: 0; padding: 0 0 calc(var(--zeile) * .5); position: relative; line-height: var(--zeile); background-image: linear-gradient(to bottom, transparent calc(var(--zeile) - 1px), var(--linie) calc(var(--zeile) - 1px)), linear-gradient(to right, transparent 3.25rem, var(--kopflinie) 3.25rem, var(--kopflinie) calc(3.25rem + 1.5px), transparent calc(3.25rem + 1.5px)); background-size: 100% var(--zeile), 100% 100%; } .schritt { appearance: none; border: 0; background: transparent; width: 100%; padding: 0 var(--rand) 0 0; cursor: pointer; text-align: left; display: grid; grid-template-columns: 3.25rem 1fr; font: 400 1.0625rem/var(--zeile) var(--schrift); color: var(--tinte); } .schritt-nr { display: grid; place-items: center; height: var(--zeile); font-weight: 750; color: var(--tinte); } .schritt-text { padding-left: .9rem; max-width: 60ch; } li[aria-current="step"] .schritt { background: rgba(227, 185, 74, .22); } li[aria-current="step"] .schritt-nr { color: var(--karte); background: radial-gradient(circle at center, var(--tinte) 0 .95rem, transparent .98rem); } @media (hover: hover) { .schritt:hover { background: rgba(179, 203, 230, .18); } } .schritt:active .schritt-text { opacity: .8; } .schritt:focus-visible { outline: none; box-shadow: inset 0 -2px 0 var(--tinte); background: rgba(227, 185, 74, .22); } /* Timer unter dem Schritttext, eine Linie hoch; läuft in Tinte mit tabellarischen Ziffern, fertig in Rotstift */ .randspalte .timer { display: block; margin-left: calc(3.25rem + .9rem); font-variant-numeric: tabular-nums; } .randspalte .timer.laeuft { text-decoration: none; } .randspalte .timer.fertig { color: var(--rotstift); } textarea { width: 100%; margin: 0; padding: .6rem 0; border: 0; border-radius: 0; background: transparent; resize: vertical; font: 400 1.0625rem/1.6 var(--schrift); color: var(--tinte); box-shadow: inset 0 -1.5px 0 var(--tinte-leise); } textarea::placeholder { color: var(--platzhalter); } textarea:focus-visible { outline: none; background: rgba(227, 185, 74, .22); box-shadow: inset 0 -2px 0 var(--tinte); } .fav-name { color: var(--tinte) !important; } .heute-link { text-decoration: none; } .heute-link:hover { text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 2px; } /* ---------- Einkauf: Ladenkarte ---------- */ .laden-koerper { position: relative; } .gaenge { min-width: 0; padding-bottom: calc(var(--zeile) * .5); line-height: var(--zeile); } /* Linie je Posten statt Hintergrundraster: ein umbrechender Name bleibt sichtbar ein Posten */ .gang, .posten { box-shadow: inset 0 -1px 0 var(--linie); } .gang { min-height: var(--zeile); margin: 0; padding: 0 var(--rand); line-height: var(--zeile); font-size: .9375rem; font-weight: 700; color: var(--tinte-leise); scroll-margin-top: 1rem; } .posten-liste { list-style: none; margin: 0; padding: 0; } .posten { display: grid; grid-template-columns: minmax(0, 1fr) auto; } .posten form { margin: 0; } .posten-knopf { appearance: none; border: 0; background: transparent; width: 100%; cursor: pointer; text-align: left; display: grid; grid-template-columns: 1.3rem 4.75rem minmax(0, 1fr) auto; column-gap: .6rem; align-items: start; padding: 0 var(--rand); font: 400 1.0625rem/var(--zeile) var(--schrift); color: var(--tinte); } .posten-knopf .kaestchen { width: 1.3rem; height: 1.3rem; margin-top: calc((var(--zeile) - 1.3rem) / 2); border-radius: 3px; box-shadow: inset 0 0 0 1.75px var(--tinte); display: grid; place-items: center; transition: transform 180ms var(--aus); } /* Menge nie abschneiden: „2 × 200 g“ bricht notfalls auf die zweite Linie des Postens um */ .posten-menge { font-size: .9375rem; font-weight: 700; font-variant-numeric: tabular-nums; } .posten-preis { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; } .posten-name .leise { font-size: .9375rem; } /* Im Wagen: Häkchen gezeichnet, Name durchgestrichen, alles leiser – der Blick springt zum nächsten offenen */ .ist-drin .posten-knopf { color: var(--tinte-leise); } .ist-drin .kaestchen { background: var(--tinte); box-shadow: none; } .ist-drin .kaestchen::after { content: ""; width: .72rem; height: .38rem; border: solid var(--karte); border-width: 0 0 2.5px 2.5px; transform: translateY(-1px) rotate(-45deg); } .ist-drin .posten-name { text-decoration: line-through; text-decoration-thickness: 2px; } .ist-drin .posten-preis { color: var(--tinte-leise); } /* Haken wartet auf Netz: Senf-Ring um das Kästchen */ .wartet .kaestchen { box-shadow: 0 0 0 3px rgba(227, 185, 74, .75); } @media (hover: hover) { .posten-knopf:not(:disabled):hover { background: rgba(179, 203, 230, .2); } } .posten-knopf:active .kaestchen { transform: scale(.88); } .posten-knopf:focus-visible { outline: none; background: rgba(227, 185, 74, .22); box-shadow: inset 0 -2px 0 var(--tinte); } .posten-knopf:disabled { cursor: default; } .posten-knopf:disabled .kaestchen { opacity: .35; } .posten-weg .knopf-text-karte { padding-right: .6rem; } .auffuellen p { flex: 1; min-width: 0; line-height: var(--zeile); } /* Rückfrage vor dem Abschluss: auf Karton, weil die Leiste auf dem dunklen Kasten steht */ .erledigt-hinweis { color: var(--rotstift); background: var(--karte); border-radius: 8px; padding: .5rem .75rem; font-weight: 700; font-size: .9375rem; line-height: 1.4; margin: 0 0 .5rem; } .erledigt-hinweis:empty { display: none; } @media (max-width: 599px) { .posten-knopf { grid-template-columns: 1.3rem 4rem minmax(0, 1fr) auto; column-gap: .45rem; } } /* ---------- Heute: gekocht, tauschen, auswärts ---------- */ /* Aktionen stehen auf den Linien der Karte wie die Rasterzeilen darüber */ .heute-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.25rem; margin-top: calc(var(--zeile) * -.5); padding: 0 var(--rand) calc(var(--zeile) * .5); line-height: var(--zeile); background-image: linear-gradient(to bottom, transparent calc(var(--zeile) - 1px), var(--linie) calc(var(--zeile) - 1px)); background-size: 100% var(--zeile); } .rest-zeile .knopf-zeile { margin: calc((var(--zeile) - 2.75rem) / 2) 0; } .heute-aktionen form { margin: 0; } .gekocht[open] { flex-basis: 100%; } /* Jede Reihe Bewertungsknöpfe füllt genau eine Linie, danach geht es auf dem Raster weiter */ .urteile { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .4rem; padding: 0; } .urteile .leise { flex-basis: 100%; line-height: var(--zeile); } /* Bewertung: Laschen wie die Würfel-Gründe, aber jede ist gleich ein Knopf */ .grund-knopf { appearance: none; border: 0; cursor: pointer; height: 2.25rem; margin: .25rem 0; padding: 0 1rem; border-radius: 8px; background: var(--karte-dahinter); color: var(--tinte); font: 700 .9375rem var(--schrift); transition: transform 180ms var(--aus); } @media (hover: hover) { .grund-knopf:hover { background: var(--reiter-vorrat); } } .grund-knopf:active { transform: translateY(1px) scale(.98); } .grund-knopf:focus-visible { outline: none; box-shadow: inset 0 -2px 0 var(--tinte); background: rgba(227, 185, 74, .45); } .zeile-mit-knopf > p { flex: 1; min-width: 0; line-height: var(--zeile); margin: 0; } .hinweis p + p { margin-top: .35rem; font-weight: 400; } .text-aktion:disabled { opacity: .45; cursor: default; } .rueckfrage { display: contents; } .rueckfrage-text { flex-basis: 100%; font-weight: 700; line-height: var(--zeile); } .rueckfrage-text:empty { display: none; } /* Gekocht: das gezeichnete volle Kästchen der Welt statt eines Worts */ .raster .kaestchen.voll { display: inline-grid; place-items: center; width: 1.1rem; height: 1.1rem; margin-right: .5rem; vertical-align: -.15em; border-radius: 3px; background: var(--tinte); } .raster .kaestchen.voll::after { content: ""; width: .6rem; height: .32rem; border: solid var(--karte); border-width: 0 0 2.5px 2.5px; transform: translateY(-1px) rotate(-45deg); } /* Geändertes Heute (getauscht, verschoben, aufgetaut) wird einmal hereingezogen wie ein neuer Abend in der Woche */ .heute-karte.ist-neu .karte-kopf { animation: ziehen 220ms var(--aus) both; } /* Mitteilungen dieses Geräts */ .push-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .75rem; align-items: start; } .push-status { line-height: var(--zeile); } .push-knoepfe { display: flex; align-items: center; gap: .5rem; min-height: var(--zeile); } /* Vorrat: Reste mit Menge und Haltbarkeit */ .rest-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .75rem; align-items: start; } /* Drei Linien: Name, Ort und Haltbarkeit, dann die Textaktionen links. Mit einem Knopf (Auftauen) steht der Knopf rechts neben dem Namen und Ort/Haltbarkeit darunter. */ .rest-zeile { grid-template-columns: minmax(0, 1fr); } .rest-zeile .rest-aktionen { display: flex; flex-wrap: wrap; gap: 0 1.25rem; } .rest-zeile .rest-aktionen .knopf-text-karte { padding: 0; } .rest-zeile.mit-knopf { grid-template-columns: minmax(0, 1fr) auto; } .rest-zeile.mit-knopf .rest-name { grid-column: 1; } .rest-zeile.mit-knopf .rest-aktionen { grid-column: 2; grid-row: 1; } .rest-zeile.mit-knopf .rest-meta { grid-column: 1 / -1; } .rest-zeile form { margin: 0; } .rest-zeile .bald { color: var(--rotstift); font-weight: 700; } /* Schmale Bildschirme: Tag über dem Titel, Meta und Aktionen über die volle Breite */ @media (max-width: 599px) { .abend-kopf { flex-wrap: wrap; column-gap: .75rem; row-gap: 0; } .abend-tag { width: auto; font-size: .9375rem; } .abend-kopf .abend-titel, .abend-kopf > span:not(.abend-tag):not(.fest) { flex-basis: 100%; order: 2; } .abend-kopf .fest { order: 1; margin-left: auto; } .abend-meta, .abend-aktionen { padding-left: 0; } .abend-titel { font-size: 1.0625rem; } }