/* Tafelrunde — Editorial Kochbuch-Stylesheet * * Eine Datei. Vier Farbschemata × Hell/Dunkel als CSS-Custom-Properties auf * . Tokens stammen 1:1 aus dem Design- * Bundle (themes.jsx). Foto-Größe wird via [data-photo="small|medium|large"] * gesteuert. */ /* ───── Schema: Petersilie ─────────────────────────── */ html[data-scheme="petersilie"][data-mode="light"] { --bg: #f6f2e8; --surface: #fffdf7; --surface-elev: #ffffff; --text: #1f2412; --text-soft: #4a5236; --muted: #8a8a73; --border: #e6e1d0; --border-soft: #efeadb; --primary: #4a5d2a; --primary-h: #3a4a20; --accent: #a8b06d; --danger: #8b3a2a; --rating-star: #b8893b; --placeholder: #e6e1d0; } html[data-scheme="petersilie"][data-mode="dark"] { --bg: #16190f; --surface: #1d2114; --surface-elev: #252a1a; --text: #f0ecdc; --text-soft: #bdb796; --muted: #86836b; --border: #33381f; --border-soft: #2a2f1a; --primary: #a3b56a; --primary-h: #bac783; --accent: #7d8a4b; --danger: #c97a5a; --rating-star: #dfae5f; --placeholder: #33381f; } /* ───── Schema: Safran ─────────────────────────────── */ html[data-scheme="safran"][data-mode="light"] { --bg: #fbf5e8; --surface: #fffcf2; --surface-elev: #ffffff; --text: #2a2113; --text-soft: #5e4a2a; --muted: #8c7c5e; --border: #ece2c6; --border-soft: #f4ebd2; --primary: #a87326; --primary-h: #85591a; --accent: #d3a957; --danger: #a23c20; --rating-star: #c9892a; --placeholder: #ece2c6; } html[data-scheme="safran"][data-mode="dark"] { --bg: #1a1509; --surface: #221c0e; --surface-elev: #2c2412; --text: #f3ead0; --text-soft: #c8b785; --muted: #8e7e54; --border: #3a2f17; --border-soft: #2f2612; --primary: #daa552; --primary-h: #ecbd6e; --accent: #a87a30; --danger: #d97650; --rating-star: #e5b75d; --placeholder: #3a2f17; } /* ───── Schema: Holzkohle ──────────────────────────── */ html[data-scheme="holzkohle"][data-mode="light"] { --bg: #f4f3f0; --surface: #fafaf8; --surface-elev: #ffffff; --text: #1a1918; --text-soft: #3d3b37; --muted: #7a7873; --border: #dedcd6; --border-soft: #e8e6e1; --primary: #2a2826; --primary-h: #0e0d0c; --accent: #62605b; --danger: #8a3424; --rating-star: #a88a3a; --placeholder: #dedcd6; } html[data-scheme="holzkohle"][data-mode="dark"] { --bg: #111110; --surface: #1a1a18; --surface-elev: #22221f; --text: #f3f1ed; --text-soft: #bdbab2; --muted: #7a7872; --border: #2e2d2a; --border-soft: #262522; --primary: #f3f1ed; --primary-h: #ffffff; --accent: #9a978e; --danger: #c87a5e; --rating-star: #d6b266; --placeholder: #2e2d2a; } /* ───── Schema: Beere ──────────────────────────────── */ html[data-scheme="beere"][data-mode="light"] { --bg: #f8f1ee; --surface: #fff9f6; --surface-elev: #ffffff; --text: #26161a; --text-soft: #4f2a30; --muted: #8a6a6e; --border: #ead7d2; --border-soft: #f3e3df; --primary: #7a2638; --primary-h: #5d1a28; --accent: #c08294; --danger: #8b3a2a; --rating-star: #bb8a3a; --placeholder: #ead7d2; } html[data-scheme="beere"][data-mode="dark"] { --bg: #190d10; --surface: #221318; --surface-elev: #2c1a20; --text: #f4e6e8; --text-soft: #cda9ae; --muted: #8a6a6e; --border: #3a2128; --border-soft: #2e1920; --primary: #d68496; --primary-h: #e8a0b0; --accent: #8a3e50; --danger: #d97a5e; --rating-star: #dfae5f; --placeholder: #3a2128; } /* ───── Typografie ─────────────────────────────────── */ :root { --font-serif: "Cormorant Garamond", "EB Garamond", Georgia, serif; --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --radius: 4px; --radius-pill: 999px; } /* Foto-Größen-Tokens — reagieren auf html[data-photo] */ html[data-photo="small"] { --photo-thumb: 44px; --photo-hero: 180px; } html[data-photo="medium"] { --photo-thumb: 64px; --photo-hero: 240px; } html[data-photo="large"] { --photo-thumb: 96px; --photo-hero: 320px; } html { --photo-thumb: 64px; --photo-hero: 240px; } /* ───── Reset + Basis ──────────────────────────────── */ * { box-sizing: border-box; } [hidden] { display: none !important; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font: 15px/1.45 var(--font-sans); -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; } body { min-height: 100vh; padding-bottom: env(safe-area-inset-bottom); } a { color: var(--primary); } /* Page-Container — phone frame look auf jedem Display */ main { max-width: 480px; margin: 0 auto; padding: max(env(safe-area-inset-top), 14px) 0 24px; background: var(--bg); min-height: 100vh; } body[data-nav] main { padding-bottom: 96px; } /* Standard-Heading-Defaults werden vom Editorial-Stack ueberschrieben. * Kein Browser-Reset auf 0 noetig — wir nullen je Block was wir brauchen. */ h1, h2, h3 { color: var(--text); } p { margin: 0 0 12px; } .muted { color: var(--muted); font-size: .92rem; } .error { color: var(--danger); font-size: .92rem; min-height: 1.2em; margin: 8px 22px; } .success { color: var(--primary); font-size: .92rem; margin: 8px 22px; } /* ───── Editorial-Bausteine ────────────────────────── */ /* PageHeader: Kicker + Serif-Titel + dünne Linie */ .page-head { padding: 14px 22px 10px; } .page-head__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .page-head__back { width: 36px; height: 36px; border-radius: var(--radius-pill); border: 0.5px solid var(--border); display: grid; place-items: center; color: var(--text-soft); background: transparent; cursor: pointer; text-decoration: none; flex-shrink: 0; } .page-head__back:hover { background: var(--surface); } .page-head__kicker { flex: 1; text-align: center; font: 500 11px/1 var(--font-sans); letter-spacing: 2.4px; text-transform: uppercase; color: var(--muted); } .page-head__action { width: 36px; height: 36px; display: grid; place-items: center; color: var(--text); background: transparent; border: none; cursor: pointer; text-decoration: none; flex-shrink: 0; padding: 0; margin: 0; } .page-head__action--icon-btn { border: 0.5px solid var(--border); border-radius: var(--radius-pill); } .page-head__title { font: 500 38px/1.05 var(--font-serif); color: var(--text); margin: 14px 0 0; letter-spacing: -0.4px; } .page-head__title em { font-style: italic; font-weight: 500; } .page-head__rule { height: 1px; background: var(--border); margin-top: 14px; position: relative; } .page-head__rule::before { content: ""; position: absolute; left: 0; top: 0; width: 28px; height: 1px; background: var(--text); } /* Inline-Sektions-Trenner mit Italic-Label vorne und Mono-Label hinten */ .section-rule { display: flex; align-items: center; gap: 10px; margin-top: 22px; padding: 0 22px; } .section-rule__label { font: 500 italic 18px/1 var(--font-serif); color: var(--text); } .section-rule__line { flex: 1; height: 1px; background: var(--border-soft); } .section-rule__meta { font: 11px/1 var(--font-sans); color: var(--muted); } /* Wordmark (z.B. oben links auf Home/Login) */ .wordmark { font: 500 italic 22px/1 var(--font-serif); color: var(--text); letter-spacing: -0.3px; } .wordmark--xl { font-size: 56px; line-height: 1; letter-spacing: -1px; } /* Anno-Linie (Login-Hero): line — text — line */ .anno { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; } .anno::before, .anno::after { content: ""; height: 1px; width: 36px; background: var(--border); } /* ───── Photo-Placeholder ──────────────────────────── */ .photo-ph { background: repeating-linear-gradient(135deg, var(--placeholder) 0 12px, var(--border-soft) 12px 24px); position: relative; overflow: hidden; border-radius: var(--radius); } .photo-ph__label { position: absolute; inset: 0; display: grid; place-items: center; font: 11px/1 var(--font-mono); letter-spacing: 1.5px; color: var(--muted); text-transform: uppercase; } /* ───── Chips ──────────────────────────────────────── */ .chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--radius-pill); font: 500 12px/1.2 var(--font-sans); background: transparent; color: var(--text-soft); border: 0.5px solid var(--border); letter-spacing: 0.1px; white-space: nowrap; cursor: pointer; margin: 0; width: auto; -webkit-tap-highlight-color: transparent; } .chip:hover { border-color: var(--primary); color: var(--text); } .chip.is-active, .chip[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); } .chip--dashed { border-style: dashed; color: var(--muted); } .chip--dashed:hover { color: var(--primary); border-color: var(--primary); } .chip__x { font-size: 13px; line-height: 1; opacity: .6; } .chip-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; } .chip-row--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; -webkit-overflow-scrolling: touch; } .chip-row--scroll::-webkit-scrollbar { display: none; } .chip-row--scroll .chip { flex-shrink: 0; } /* ───── Icon-Buttons ───────────────────────────────── */ .icon-btn { width: 36px; height: 36px; display: grid; place-items: center; border: 0.5px solid var(--border); border-radius: var(--radius-pill); background: transparent; color: var(--text-soft); cursor: pointer; text-decoration: none; flex-shrink: 0; padding: 0; margin: 0; } .icon-btn:hover { background: var(--surface); color: var(--text); } .icon-btn input[type="file"] { display: none; } /* ───── Stars ──────────────────────────────────────── */ .stars { display: inline-flex; gap: 1px; color: var(--rating-star); } .stars__btn { background: transparent; border: none; padding: 2px; margin: 0; width: auto; cursor: pointer; color: var(--rating-star); line-height: 1; } /* ───── Bottom-Nav ─────────────────────────────────── */ .bnav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; background: var(--surface); border-top: 0.5px solid var(--border); display: grid; grid-template-columns: repeat(4, 1fr); padding-top: 8px; padding-bottom: max(env(safe-area-inset-bottom), 12px); z-index: 30; } .bnav__item { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--muted); text-decoration: none; background: none; border: none; padding: 4px 0; cursor: pointer; -webkit-tap-highlight-color: transparent; } .bnav__item--active { color: var(--primary); } .bnav__item--active .bnav__label { font-weight: 600; } .bnav__item--disabled { color: var(--placeholder); pointer-events: none; position: relative; } .bnav__label { font-size: 10.5px; font-weight: 500; letter-spacing: 0.2px; } .bnav__badge { position: absolute; top: 0; right: 25%; font-size: 8px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); background: var(--bg); padding: 1px 5px; border-radius: var(--radius-pill); border: 0.5px solid var(--border-soft); } /* ───── Form-Elemente (editorial) ──────────────────── */ label { display: block; font: 600 10px/1 var(--font-sans); letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin: 14px 0 6px; } fieldset { border: none; padding: 0; margin: 14px 0 6px; } legend { padding: 0; font: 600 10px/1 var(--font-sans); letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } input[type="email"], input[type="password"], input[type="text"], input[type="number"], input[type="search"], input[type="tel"], input[type="url"], textarea, select { width: 100%; padding: 10px 12px; font: 14px/1.4 var(--font-sans); border: 0.5px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); -webkit-appearance: none; appearance: none; margin: 0; } input::placeholder, textarea::placeholder { color: var(--muted); } textarea { resize: vertical; min-height: 80px; font-family: var(--font-sans); } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent); } button { width: 100%; padding: 12px 16px; font: 600 14px/1 var(--font-sans); background: var(--primary); color: var(--bg); border: none; border-radius: var(--radius); cursor: pointer; margin-top: 14px; -webkit-tap-highlight-color: transparent; letter-spacing: 0.1px; } button:hover { background: var(--primary-h); } button:disabled { opacity: .55; cursor: not-allowed; } button.secondary { background: transparent; color: var(--text); border: 0.5px solid var(--border); } button.secondary:hover { background: var(--surface); border-color: var(--text-soft); } button.danger { background: var(--danger); color: #fff; } button.danger:hover { background: var(--danger); opacity: .85; } button.linklike { background: transparent; color: var(--primary); padding: 6px 0; font-size: 12px; margin-top: 6px; text-align: center; width: auto; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 600; } button.linklike:hover { color: var(--primary-h); } .form-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; } .form-actions button { margin: 0; } /* Klassische 2-3-spaltige Form-Reihen aus recipe.html */ .row { display: flex; gap: 10px; } .row .col { flex: 1 1 0; min-width: 0; } .row .col.col-2 { flex: 2 1 0; } /* Radio-Reihen (recipe-type, etc.) */ .radio-row { display: flex; gap: 10px; margin: 6px 0; } .radio-row label { flex: 1; margin: 0; padding: 10px 12px; border: 0.5px solid var(--border); border-radius: var(--radius); background: transparent; text-align: center; font: 500 13px/1 var(--font-sans); color: var(--text-soft); text-transform: none; letter-spacing: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; } .radio-row label:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); font-weight: 600; } .radio-row input[type="radio"] { display: none; } .toggle-row { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; font: 500 13px/1.4 var(--font-sans); text-transform: none; letter-spacing: 0; color: var(--text); } .toggle-row input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--primary); flex-shrink: 0; } /* ───── Cards ──────────────────────────────────────── */ .card { background: var(--surface); border: 0.5px solid var(--border); border-radius: var(--radius); padding: 16px; margin: 14px 22px; } .card h2 { font: 500 italic 16px/1.2 var(--font-serif); color: var(--text); margin: 18px 0 8px; letter-spacing: -0.1px; } .card h2:first-child { margin-top: 0; } /* ───── PIN-Eingabe ────────────────────────────────── */ .pin-row { display: flex; gap: 12px; justify-content: center; margin: 8px 0; } .pin-row input { width: 54px; height: 60px; text-align: center; font: 500 26px/1 var(--font-serif); padding: 0; background: var(--surface); border: 0.5px solid var(--border); border-radius: var(--radius); } .pin-row input:focus { border-color: var(--primary); } /* PIN-Dot-Indikatoren (Login-Pre-Display) */ .pin-dots { display: flex; justify-content: center; gap: 18px; margin-top: 4px; } .pin-dots__dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--border); background: transparent; } .pin-dots__dot[data-filled="1"] { background: var(--primary); border-color: var(--primary); } /* ───── Dashboard (Home) ───────────────────────────── */ .dash-top { padding: 14px 22px 8px; display: flex; align-items: center; justify-content: space-between; } .dash-greet { padding: 12px 22px 0; } .dash-greet__kicker { font: 500 11px/1 var(--font-sans); letter-spacing: 2.4px; text-transform: uppercase; color: var(--muted); } .dash-greet__title { font: 500 36px/1.05 var(--font-serif); color: var(--text); margin: 8px 0 0; letter-spacing: -0.3px; } .dash-greet__title em { font-style: italic; } .dash-today { margin: 18px 22px 0; border: 0.5px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 16px; display: flex; gap: 14px; } .dash-today__photo { width: 72px; height: 72px; flex-shrink: 0; border-radius: var(--radius); overflow: hidden; background: var(--placeholder); object-fit: cover; } .dash-today__body { flex: 1; min-width: 0; } .dash-today__kicker { font: 500 10px/1 var(--font-sans); letter-spacing: 2px; text-transform: uppercase; color: var(--muted); } .dash-today__title { font: 500 20px/1.2 var(--font-serif); color: var(--text); margin: 2px 0 0; letter-spacing: -0.2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dash-today__meta { display: flex; align-items: center; gap: 10px; margin-top: 6px; color: var(--muted); font-size: 12px; } .dash-today__meta span { display: inline-flex; gap: 4px; align-items: center; } .dash-today__meta::before { content: ""; } .dash-today--empty { color: var(--muted); font: italic 14px/1.4 var(--font-serif); text-align: center; display: block; } .dash-today--empty a { display: block; margin-top: 6px; font-style: normal; font-family: var(--font-sans); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; color: var(--primary); } .dash-stats { padding: 14px 22px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .dash-stat { border: 0.5px solid var(--border); border-radius: var(--radius); padding: 12px; background: var(--surface); } .dash-stat__num { font: 500 26px/1 var(--font-serif); color: var(--text); } .dash-stat__label { font: 500 10px/1 var(--font-sans); letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-top: 6px; } .dash-section-head { padding: 20px 22px 0; display: flex; align-items: center; gap: 8px; } .dash-section-head__rule { width: 14px; height: 1px; background: var(--text); } .dash-section-head__label { font: 600 10px/1 var(--font-sans); letter-spacing: 2.4px; text-transform: uppercase; color: var(--text-soft); } .dash-family { padding: 10px 22px 0; display: flex; gap: 10px; flex-wrap: wrap; } .dash-family__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--surface); color: var(--text-soft); border: 0.5px solid var(--border); display: grid; place-items: center; font: 500 18px/1 var(--font-serif); position: relative; overflow: visible; } .dash-family__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .dash-family__avatar--me { background: var(--primary); color: var(--bg); border-color: var(--primary); } .dash-family__crown { position: absolute; top: -7px; right: -4px; color: var(--rating-star); } .dash-family__hint { margin: 8px 22px 0; font-size: 12px; color: var(--muted); } .dash-family__hint strong { color: var(--text); font-weight: 500; } /* ───── Settings-Page ──────────────────────────────── */ .profile-head { display: flex; align-items: center; gap: 14px; padding: 0 0 14px; } .profile-head .avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--primary); color: var(--bg); display: grid; place-items: center; font: 500 22px/1 var(--font-serif); } .profile-head .info { line-height: 1.2; min-width: 0; flex: 1; } .profile-head .name { font-weight: 600; font-size: 1rem; color: var(--text); } .profile-head .email { font-size: 12px; color: var(--muted); margin-top: 2px; } .profile-head .badge { margin-left: auto; font: 600 9px/1 var(--font-sans); letter-spacing: 1.5px; text-transform: uppercase; padding: 4px 8px; border-radius: var(--radius-pill); background: transparent; border: 0.5px solid var(--border); color: var(--muted); } /* Schema-Picker (4 swatches im 2x2 Grid) */ .scheme-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 10px 0 8px; } .scheme-card { cursor: pointer; border: 0.5px solid var(--border); border-radius: var(--radius); padding: 10px; background: var(--surface); text-align: left; width: auto; margin: 0; color: var(--text); font: inherit; } .scheme-card.is-active { border-color: var(--primary); border-width: 1.5px; padding: 9.5px; } .scheme-card__swatches { display: flex; gap: 4px; margin-bottom: 8px; } .scheme-card__swatch { width: 18px; height: 18px; border-radius: 3px; border: 0.5px solid var(--border-soft); } .scheme-card__title { font: 500 italic 15px/1 var(--font-serif); color: var(--text); } .scheme-card__desc { font-size: 10.5px; color: var(--muted); margin-top: 2px; } /* Mode + Photo-Size pickers (segmented control) */ .seg { display: grid; grid-template-columns: repeat(var(--seg-cols, 2), 1fr); gap: 6px; margin: 6px 0 8px; } .seg__btn { background: transparent; border: 0.5px solid var(--border); border-radius: var(--radius); padding: 10px; font: 500 13px/1 var(--font-sans); color: var(--text-soft); cursor: pointer; margin: 0; width: auto; text-align: center; } .seg__btn.is-active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); font-weight: 600; } /* ───── Login (Auth) ───────────────────────────────── */ .auth-hero { padding: 60px 28px 32px; text-align: center; } .auth-hero__kicker { font: 500 11px/1 var(--font-sans); letter-spacing: 4px; text-transform: uppercase; color: var(--muted); } .auth-hero__wordmark { margin-top: 14px; } .auth-hero__anno { margin-top: 18px; } .auth-card { margin: 16px 22px; padding: 22px 20px; background: var(--surface); border: 0.5px solid var(--border); border-radius: var(--radius); } .auth-card h2 { font: 500 italic 22px/1.2 var(--font-serif); color: var(--text); margin: 0 0 16px; letter-spacing: -0.2px; text-align: center; } /* ───── Rezepte-Liste ──────────────────────────────── */ .search-bar { display: flex; align-items: center; gap: 8px; border: 0.5px solid var(--border); border-radius: var(--radius); padding: 10px 12px; background: var(--surface); margin: 0 22px; } .search-bar input { flex: 1; border: none; background: transparent; padding: 0; margin: 0; font: 14px/1 var(--font-sans); color: var(--text); } .search-bar input:focus { box-shadow: none; } .search-bar svg { flex-shrink: 0; color: var(--muted); } .toolbar { display: flex; gap: 8px; align-items: center; margin: 8px 22px 4px; } .toolbar .search-bar { flex: 1; margin: 0; } .recipe-list { list-style: none; padding: 8px 22px 8px; margin: 0; } .recipe-item { margin: 0; } .recipe-link { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-top: 0.5px solid var(--border-soft); text-decoration: none; color: var(--text); } .recipe-item:first-child .recipe-link { border-top: none; } .recipe-thumb, .recipe-thumb-placeholder { width: var(--photo-thumb); height: var(--photo-thumb); flex-shrink: 0; border-radius: var(--radius); object-fit: cover; } .recipe-thumb-placeholder { background: repeating-linear-gradient(135deg, var(--placeholder) 0 12px, var(--border-soft) 12px 24px); } .recipe-link-body { flex: 1; min-width: 0; } .recipe-title { font: 500 18px/1.2 var(--font-serif); color: var(--text); letter-spacing: -0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-photo="large"] .recipe-title { font-size: 21px; } html[data-photo="small"] .recipe-title { font-size: 16px; } .recipe-meta { font-size: 12px; color: var(--muted); margin-top: 2px; } .recipe-source { font: 500 10px/1 var(--font-mono); letter-spacing: 0.5px; margin-top: 4px; text-transform: uppercase; color: var(--muted); } html[data-photo="small"] .recipe-source { display: none; } .recipe-link__chev { color: var(--muted); flex-shrink: 0; } /* ───── Rezept-Detail / Form ───────────────────────── */ .recipe-hero { position: relative; height: var(--photo-hero); background: repeating-linear-gradient(135deg, var(--placeholder) 0 12px, var(--border-soft) 12px 24px); } .recipe-hero img { width: 100%; height: 100%; object-fit: cover; display: block; } .recipe-hero__overlay { position: absolute; top: 14px; left: 16px; right: 16px; display: flex; justify-content: space-between; } .recipe-hero__btn { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.85); border: none; display: grid; place-items: center; color: #1a1a1a; text-decoration: none; cursor: pointer; padding: 0; margin: 0; } .recipe-meta-strip { display: grid; grid-template-columns: repeat(3, 1fr); margin: 16px 22px 0; border: 0.5px solid var(--border); border-radius: var(--radius); background: var(--surface); } .recipe-meta-strip__cell { padding: 12px 10px; text-align: center; } .recipe-meta-strip__cell + .recipe-meta-strip__cell { border-left: 0.5px solid var(--border-soft); } .recipe-meta-strip__val { font: 500 18px/1 var(--font-serif); color: var(--text); } .recipe-meta-strip__key { font: 500 10px/1 var(--font-sans); letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-top: 6px; } /* Editorial-Body (Detail-View nicht-Form) */ .recipe-body { padding: 0 22px 16px; } .recipe-body__kicker { font: 500 11px/1 var(--font-sans); letter-spacing: 2.4px; text-transform: uppercase; color: var(--muted); padding: 18px 22px 0; } .recipe-body__title { font: 500 32px/1.05 var(--font-serif); color: var(--text); letter-spacing: -0.4px; margin: 6px 22px 0; font-style: italic; } .recipe-body__rating { display: flex; align-items: center; gap: 14px; margin: 10px 22px 0; color: var(--muted); font-size: 12px; } /* Zutaten-Liste */ .ing-list { margin: 8px 22px 0; padding: 0; list-style: none; } .ing-list li { display: flex; justify-content: space-between; padding: 8px 0; border-top: 0.5px dotted var(--border); font: 14px/1.4 var(--font-sans); } .ing-list li:first-child { border-top: none; } .ing-list .ing-amount { color: var(--text-soft); font: 12px/1 var(--font-mono); } /* Zutaten-Editor (Form) — kompakte Zeilen */ .ingredient-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; } .ingredient-row { display: grid; grid-template-columns: minmax(0, 1fr) 70px 70px 36px; gap: 6px; align-items: center; } .ingredient-row input { padding: 9px 10px; font-size: 13px; } .ing-del { width: 36px; height: 38px; margin: 0; padding: 0; background: transparent; color: var(--danger); border: 0.5px solid var(--border); font-size: 1.1rem; line-height: 1; } .ing-del:hover { background: var(--surface); } /* Photo-Strip (Recipe-Detail) */ .photo-strip-card { padding: 16px 18px; } .photo-strip-card h2 { margin-top: 0; } .photo-strip { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: thin; padding: 4px 2px 8px; -webkit-overflow-scrolling: touch; } .photo-tile { position: relative; width: 96px; height: 96px; flex: 0 0 auto; border-radius: var(--radius); overflow: hidden; border: 0.5px solid var(--border); background: var(--placeholder); } .photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; } .photo-tile.is-cover { border-color: var(--primary); border-width: 1.5px; } .photo-cover-badge { position: absolute; top: 4px; left: 4px; background: var(--primary); color: var(--bg); font: 600 9px/1 var(--font-sans); letter-spacing: 1px; text-transform: uppercase; padding: 3px 6px; border-radius: var(--radius); pointer-events: none; } .photo-action { position: absolute; top: 4px; width: 24px; height: 24px; border-radius: 50%; border: none; color: #fff; font-size: .85rem; line-height: 1; cursor: pointer; display: grid; place-items: center; box-shadow: 0 1px 3px rgba(0,0,0,.3); margin: 0; padding: 0; } .photo-action.is-delete { right: 4px; background: rgba(0,0,0,.55); } .photo-action.is-make-cover { bottom: 4px; top: auto; right: 4px; width: auto; height: auto; padding: 3px 8px; border-radius: var(--radius); background: rgba(0,0,0,.55); font: 600 9px/1 var(--font-sans); letter-spacing: 1px; text-transform: uppercase; } .photo-add-tile { width: 96px; height: 96px; flex: 0 0 auto; border-radius: var(--radius); border: 0.5px dashed var(--border); background: var(--surface); color: var(--muted); font-size: 1.6rem; line-height: 1; display: grid; place-items: center; cursor: pointer; } .photo-add-tile:hover { border-color: var(--primary); color: var(--primary); } .photo-add-tile input[type="file"] { display: none; } /* Rating-Card (Stars-Picker, Comment, Family-List) */ .stars-picker { display: flex; gap: 4px; margin: 6px 0 12px; } .star { width: 36px; height: 36px; padding: 0; background: transparent; border: none; color: var(--placeholder); font-size: 1.6rem; line-height: 1; margin: 0; cursor: pointer; width: auto; } .star::before { content: "★"; } .star.is-on { color: var(--rating-star); } .rating-list { list-style: none; padding: 0; margin: 6px 0 0; } .rating-item { padding: 10px 0; border-top: 0.5px dotted var(--border); } .rating-item:first-child { border-top: none; } .rating-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; } .rating-who { font: 500 14px/1 var(--font-sans); color: var(--text); } .rating-stars { color: var(--rating-star); letter-spacing: .05em; font-size: 12px; } .rating-comment { margin: 4px 0 0; color: var(--text-soft); font-size: 13px; } /* ───── Plans (Wochenplan) ─────────────────────────── */ .plan-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 22px 12px; } .plan-toolbar .plan-week-label { flex: 1; text-align: center; font: 12px/1 var(--font-sans); color: var(--text-soft); letter-spacing: 0.4px; } .plan-toolbar button { margin: 0; padding: 0; width: 28px; height: 28px; background: transparent; border: none; color: var(--muted); cursor: pointer; } .plan-actions { display: flex; align-items: center; gap: 8px; margin: 0 22px 16px; } .plan-actions button, .plan-actions a { margin: 0; padding: 8px 14px; font: 600 11px/1 var(--font-sans); letter-spacing: 1px; text-transform: uppercase; width: auto; border-radius: var(--radius); border: 0.5px solid var(--border); background: transparent; color: var(--text-soft); text-decoration: none; cursor: pointer; flex: 1; text-align: center; } .plan-actions button:hover, .plan-actions a:hover { border-color: var(--primary); color: var(--primary); } .plan-actions .plan-reset { color: var(--danger); border-color: var(--border); flex: 0 0 auto; } .plan-actions .plan-reset:hover { background: var(--danger); color: #fff; border-color: var(--danger); } .plan-day-list { list-style: none; padding: 0 22px 12px; margin: 0; } .plan-day-card { display: grid; grid-template-columns: 44px 1fr 26px; gap: 14px; align-items: center; padding: 12px 8px; border-top: 0.5px solid var(--border-soft); background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; text-align: left; width: 100%; font: inherit; color: inherit; border-left: none; border-right: none; border-bottom: none; margin: 0; border-radius: 0; position: relative; } .plan-day-list > li:first-child .plan-day-card { border-top: none; } .plan-day-card.is-today { background: color-mix(in srgb, var(--primary) 6%, transparent); border-radius: var(--radius); } .plan-day-date { text-align: center; position: relative; } .plan-day-date .dow { font: 600 10px/1 var(--font-sans); letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); } .plan-day-card.is-today .plan-day-date .dow { color: var(--primary); } .plan-day-date .day { display: block; font: 500 26px/1.05 var(--font-serif); color: var(--text); margin-top: 2px; } .plan-day-card.is-today .plan-day-date .day { color: var(--primary); font-style: italic; } .plan-day-date .month { display: none; } /* nicht im Editorial-Layout */ .plan-day-date .crown { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); color: var(--rating-star); } .plan-day-body { min-width: 0; } .plan-day-title { font: 500 17px/1.2 var(--font-serif); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -0.2px; } .plan-day-title.is-empty, .plan-day-title.is-special { color: var(--muted); font-style: italic; font-weight: 500; } .plan-day-side { font-size: 11px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .plan-day-meta { font-size: 10px; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; margin-top: 4px; font-weight: 600; } .plan-day-card.is-deleted .plan-day-title { text-decoration: line-through; color: var(--danger); font-style: italic; } .plan-day-cook { width: 26px; height: 26px; border-radius: 50%; background: var(--surface); border: 0.5px solid var(--border); overflow: hidden; display: grid; place-items: center; font: 500 13px/1 var(--font-serif); color: var(--text-soft); flex-shrink: 0; } .plan-day-cook img { width: 100%; height: 100%; object-fit: cover; display: block; } .plan-day-cook--empty { background: transparent; border: none; } /* Day-Edit-Sheet — Vollbild-Modal */ .plan-day-sheet { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: flex; justify-content: center; align-items: flex-start; z-index: 60; overflow-y: auto; } .plan-day-sheet-card { background: var(--bg); width: 100%; max-width: 480px; min-height: 100%; padding: max(env(safe-area-inset-top), 14px) 0 32px; display: flex; flex-direction: column; } .plan-day-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 22px 6px; } .plan-day-sheet-head__center { text-align: center; flex: 1; } .plan-day-sheet-head__center .kicker { font: 500 10px/1 var(--font-sans); letter-spacing: 2.4px; text-transform: uppercase; color: var(--muted); } .plan-day-sheet-head__center .title { font: 500 18px/1.2 var(--font-serif); color: var(--text); margin-top: 2px; } .plan-day-sheet-head__center .title em { font-style: italic; } .plan-day-sheet-head .icon-btn { border: none; } .plan-day-sheet-head .done-link { background: transparent; border: none; color: var(--primary); font: 600 12px/1 var(--font-sans); letter-spacing: 1px; text-transform: uppercase; padding: 8px 0; cursor: pointer; width: auto; margin: 0; } .plan-day-sheet-body { padding: 8px 22px 16px; } .meal-type-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin: 0 0 4px; padding: 0; border: none; } .meal-type-grid label { margin: 0; padding: 10px 12px; border: 0.5px solid var(--border); border-radius: var(--radius); text-align: center; font: 400 13px/1.3 var(--font-sans); color: var(--text-soft); text-transform: none; letter-spacing: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 4px; } .meal-type-grid label:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); font-weight: 600; } .meal-type-grid input { display: none; } .plan-recipe-pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--radius); background: var(--surface); border: 0.5px solid var(--border); font: 14px/1 var(--font-sans); margin: 4px 0 6px; max-width: 100%; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: border-color .15s ease, color .15s ease; } .plan-recipe-pill:hover { border-color: var(--primary); } .plan-recipe-pill:hover .pill-name { color: var(--primary); } .plan-recipe-pill .pill-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); } .plan-recipe-pill .pill-arrow { color: var(--muted); font-size: 12px; line-height: 1; flex-shrink: 0; } .plan-recipe-pill:hover .pill-arrow { color: var(--primary); } .plan-recipe-pill .pill-x { width: auto; margin: 0; padding: 0 0 0 4px; background: none; border: none; color: var(--muted); font-size: 1rem; cursor: pointer; line-height: 1; flex-shrink: 0; } .plan-recipe-pill .pill-x:hover { color: var(--danger); } .plan-recipe-suggestions { list-style: none; margin: 0 0 8px; padding: 0; border: 0.5px solid var(--border); border-radius: var(--radius); background: var(--surface); max-height: 220px; overflow-y: auto; } .plan-recipe-suggestions li { padding: 10px 12px; border-bottom: 0.5px dotted var(--border); cursor: pointer; font-size: 14px; } .plan-recipe-suggestions li:last-child { border-bottom: none; } .plan-recipe-suggestions li:hover, .plan-recipe-suggestions li.is-active { background: var(--bg); } .plan-recipe-suggestions .empty { color: var(--muted); font-style: italic; cursor: default; } .plan-day-sheet textarea, .plan-day-sheet select, .plan-day-sheet input[type="number"], .plan-day-sheet input[type="search"] { background: var(--surface); } /* Wer-kocht? + Portionen — 2-spaltige Reihe */ .cook-portions-row { display: grid; grid-template-columns: 1fr 110px; gap: 14px; align-items: start; } .cook-avatars { display: flex; gap: 6px; flex-wrap: wrap; } .cook-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--surface); color: var(--text-soft); border: 0.5px solid var(--border); display: grid; place-items: center; font: 500 15px/1 var(--font-serif); cursor: pointer; padding: 0; margin: 0; width: 36px; overflow: hidden; -webkit-tap-highlight-color: transparent; } .cook-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .cook-avatar.is-active { background: var(--primary); color: var(--bg); border-color: var(--primary); font-weight: 600; } /* Portionen-Stepper: − 4 + */ .portions-stepper { display: grid; grid-template-columns: 28px 1fr 28px; align-items: stretch; border: 0.5px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; height: 38px; } .portions-stepper button { background: transparent; border: none; color: var(--muted); font-size: 18px; cursor: pointer; padding: 0; margin: 0; width: auto; line-height: 1; } .portions-stepper button:hover { color: var(--text); background: var(--bg); } .portions-stepper input[type="number"] { border: none; border-left: 0.5px solid var(--border-soft); border-right: 0.5px solid var(--border-soft); border-radius: 0; text-align: center; font: 500 18px/1 var(--font-serif); color: var(--text); padding: 0; background: transparent; -moz-appearance: textfield; appearance: textfield; } .portions-stepper input::-webkit-outer-spin-button, .portions-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .portions-stepper input:focus { box-shadow: none; } /* Birthday-Banner im Day-Edit */ .birthday-banner { background: linear-gradient(135deg, var(--surface) 0%, var(--bg) 100%); border: 0.5px solid color-mix(in srgb, var(--rating-star) 40%, transparent); border-radius: var(--radius); padding: 10px 14px; display: flex; gap: 10px; align-items: center; position: relative; overflow: hidden; margin-bottom: 18px; } .birthday-banner__title { font: 500 italic 14px/1.2 var(--font-serif); color: var(--text); } .birthday-banner__hint { font-size: 10px; color: var(--muted); margin-top: 2px; } .birthday-banner__sparks { position: absolute; right: 12px; top: 4px; font-size: 8px; color: var(--rating-star); opacity: 0.4; } /* ───── Modals (Spinner + URL-Import) ──────────────── */ .import-overlay, .url-modal { position: fixed; inset: 0; background: color-mix(in srgb, var(--text) 50%, transparent); display: grid; place-items: center; z-index: 50; padding: 24px; } .import-overlay-card, .url-modal-card { background: var(--surface); border: 0.5px solid var(--border); border-radius: var(--radius); padding: 24px 22px 20px; max-width: 320px; text-align: center; } .url-modal-card { max-width: 380px; text-align: left; } .import-spinner { width: 38px; height: 38px; margin: 0 auto 14px; border: 3px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .import-overlay h3 { margin: 0 0 6px; font: 500 italic 18px/1.2 var(--font-serif); color: var(--text); } .import-overlay p { margin: 0; color: var(--muted); font-size: .9rem; } .url-modal-card h3 { margin: 0 0 6px; font: 500 italic 18px/1.2 var(--font-serif); color: var(--text); } .url-modal-card p { margin: 0 0 14px; font-size: .9rem; color: var(--muted); } .url-modal-card .form-actions { flex-direction: row; justify-content: flex-end; margin-top: 12px; } .url-modal-card .form-actions button { width: auto; padding: 10px 18px; margin-top: 0; } /* ───── Import-Banner (Recipe-Form, AI-Prefill) ────── */ .import-banner { background: var(--surface); border: 0.5px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin: 14px 22px; display: flex; gap: 12px; align-items: flex-start; } .import-banner__sparkle { color: var(--primary); margin-top: 1px; flex-shrink: 0; } .import-banner-cover { width: 56px; height: 56px; flex-shrink: 0; border-radius: var(--radius); object-fit: cover; border: 0.5px solid var(--border); } .import-banner__body { flex: 1; min-width: 0; } .import-banner strong { display: block; font: 500 italic 15px/1.2 var(--font-serif); color: var(--text); font-weight: 500; } .import-banner p { font-size: 11px; color: var(--muted); margin-top: 2px; } /* ───── Tags (Chip-Eingabe in Recipe-Form) ─────────── */ .tag-chips, .tag-suggestions, .tag-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 8px; } .tag-filter { flex-wrap: nowrap; overflow-x: auto; padding: 12px 22px 4px; margin: 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .tag-filter::-webkit-scrollbar { display: none; } .tag-filter .chip { flex-shrink: 0; } .tag-suggest-label { font-size: 11px; color: var(--muted); margin: 8px 0 4px; letter-spacing: 1px; text-transform: uppercase; } /* ───── Onboarding-Empty-States ─────────────────────── */ .onboarding-empty { text-align: center; padding: 48px 22px 32px; max-width: 380px; margin: 0 auto; } .onboarding-empty__icon { color: var(--primary); margin: 0 auto 14px; opacity: 0.7; width: 42px; height: 42px; } .onboarding-empty__title { font: italic 500 26px/1.1 var(--font-serif); color: var(--text); margin: 0 0 12px; } .onboarding-empty__text { font: 400 14px/1.5 var(--font-sans); color: var(--text-soft); margin: 0 0 22px; } .onboarding-empty__actions { display: flex; flex-direction: column; gap: 8px; align-items: center; } .onboarding-empty__primary { display: inline-block; padding: 11px 22px; background: var(--primary); color: var(--bg); border: none; border-radius: var(--radius); font: 500 13px/1.2 var(--font-sans); text-transform: uppercase; letter-spacing: 1px; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } .onboarding-empty__primary:hover { filter: brightness(1.08); } /* ───── KI-Plan-Generator (Loading-Overlay) ─────────── */ .ai-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 22px; backdrop-filter: blur(2px); } .ai-overlay__card { background: var(--surface); border-radius: var(--radius); padding: 28px 22px; max-width: 360px; width: 100%; text-align: center; border: 0.5px solid var(--border); } .ai-overlay__card h3 { font: italic 500 22px/1.2 var(--font-serif); margin: 0 0 8px; } .ai-overlay__spinner { display: flex; gap: 8px; justify-content: center; margin: 18px 0; } .ai-overlay__spinner > div { width: 10px; height: 10px; border-radius: 50%; background: var(--primary); animation: ai-overlay-bounce 1.2s ease-in-out infinite; } .ai-overlay__spinner > div:nth-child(2) { animation-delay: 0.15s; } .ai-overlay__spinner > div:nth-child(3) { animation-delay: 0.3s; } @keyframes ai-overlay-bounce { 0%, 100% { transform: scale(0.6); opacity: 0.4; } 50% { transform: scale(1.0); opacity: 1; } } .ai-overlay__hint { font-size: 11px; margin: 6px 0 14px; } /* KI-Plan-Button: Pulse-Glow Akzent */ #btn-ai-plan { background: var(--accent); color: var(--bg); } #btn-ai-plan:hover { filter: brightness(1.08); } #btn-ai-plan:disabled { opacity: 0.6; cursor: progress; } /* ───── Einkaufsliste ────────────────────────────────── */ .shopping-toolbar { display: flex; gap: 8px; padding: 0 22px 12px; align-items: center; justify-content: flex-end; } .shopping-toolbar button { width: auto; padding: 8px 14px; font-size: 13px; } .shopping-content { padding: 0 22px; display: flex; flex-direction: column; gap: 14px; } .shop-group { background: var(--surface); border: 0.5px solid var(--border); border-radius: var(--radius); overflow: hidden; } .shop-group__head { font: italic 500 16px/1.2 var(--font-serif); color: var(--text); margin: 0; padding: 12px 14px 6px; border-bottom: 0.5px solid var(--border-soft); } .shop-group__items { list-style: none; margin: 0; padding: 0; } .shop-item { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 0.5px solid var(--border-soft); transition: opacity .15s ease; } .shop-item:last-child { border-bottom: 0; } .shop-item.is-checked .shop-item__name { text-decoration: line-through; color: var(--muted); } .shop-item.is-checked .shop-item__sub { color: var(--muted); opacity: 0.6; } .shop-item__check { width: 22px; height: 22px; border: 1.5px solid var(--border); border-radius: 4px; background: transparent; cursor: pointer; color: var(--bg); display: flex; align-items: center; justify-content: center; padding: 0; -webkit-tap-highlight-color: transparent; } .shop-item__check[aria-checked="true"] { background: var(--primary); border-color: var(--primary); } .shop-item__body { min-width: 0; } .shop-item__name { font: 500 14px/1.3 var(--font-sans); color: var(--text); } .shop-item__sub { font: 400 11px/1.4 var(--font-sans); color: var(--text-soft); display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; letter-spacing: 0.2px; } .shop-item__amount { color: var(--text); font-weight: 500; } .shop-item__src { font-style: italic; } .shop-item__tag { text-transform: uppercase; letter-spacing: 1px; font-size: 9px; color: var(--accent); border: 0.5px solid var(--accent); border-radius: 2px; padding: 1px 5px; align-self: center; } .shop-item__del { background: transparent; border: none; color: var(--muted); font-size: 18px; line-height: 1; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: transparent; padding: 0; } .shop-item__del:hover { color: var(--danger); background: var(--surface-elev); } /* ───── Plan-Wünsche-Sidebar ────────────────────────── */ .plan-wishes h2 { font: italic 500 16px/1.2 var(--font-serif); margin: 0 0 4px; } .plan-wishes-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .plan-wish-row__head { font: 500 13px/1.3 var(--font-sans); color: var(--text-soft); margin-bottom: 4px; } .plan-wish-row__items { list-style: none; margin: 0; padding: 0 0 0 12px; border-left: 2px solid var(--accent); display: flex; flex-direction: column; gap: 3px; font-size: 13px; } .plan-wish-row__items a { color: var(--text); text-decoration: none; } .plan-wish-row__items a:hover { color: var(--primary); } /* ───── Dislike-Liste (Settings → Vorlieben) ──────── */ .dislike-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 1px; background: var(--border-soft); border: 0.5px solid var(--border); border-radius: var(--radius); overflow: hidden; } .dislike-item { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface); } .dislike-name { font: 500 14px/1.3 var(--font-sans); color: var(--text); text-decoration: none; } .dislike-name:hover { color: var(--primary); } .dislike-name.is-deleted { color: var(--muted); text-decoration: line-through; } /* ───── Wunsch-Toggle (Rezept-Detail) ───────────────── */ .wish-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 0; border-top: 0.5px solid var(--border-soft); margin-top: 12px; } .btn-wish { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-pill); border: 0.5px solid var(--border); background: transparent; color: var(--text-soft); font: 500 13px/1.2 var(--font-sans); cursor: pointer; -webkit-tap-highlight-color: transparent; width: auto; } .btn-wish:hover { border-color: var(--accent); color: var(--text); } .btn-wish[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--bg); } .btn-wish__icon { font-size: 14px; line-height: 1; } .wish-row__hint { font-size: 11px; color: var(--muted); flex: 1 1 100%; } .wish-list-mini { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--text-soft); } .wish-list-mini__item { padding-left: 6px; } /* ───── App-Footer (Versions-Anzeige) ──────────────── */ .app-footer { text-align: center; color: var(--muted); font: 11px/1.4 var(--font-mono); padding: 22px 0 0; letter-spacing: 1px; } /* ───── Empty-State ────────────────────────────────── */ .empty-hint { text-align: center; color: var(--muted); font: italic 14px/1.5 var(--font-serif); padding: 22px; } /* ───── Old-class Bridge (Markup-Stellen wo Refactor noch ausstand) ── */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; font: 600 13px/1 var(--font-sans); background: var(--primary); color: var(--bg); border: none; border-radius: var(--radius); text-decoration: none; cursor: pointer; width: auto; flex-shrink: 0; margin: 0; } .btn-primary:hover { background: var(--primary-h); } .btn-secondary { display: inline-flex; align-items: center; justify-content: center; padding: 10px 14px; font: 600 13px/1 var(--font-sans); background: transparent; color: var(--text); border: 0.5px solid var(--border); border-radius: var(--radius); cursor: pointer; flex-shrink: 0; width: auto; margin: 0; } .btn-secondary:hover { background: var(--surface); border-color: var(--text-soft); } .btn-secondary input[type="file"] { display: none; } /* ───── Codex-Verbindungs-Card (Settings) ────────────── */ #codex-card.is-highlight { box-shadow: 0 0 0 2px var(--primary), 0 4px 16px color-mix(in srgb, var(--primary) 30%, transparent); transition: box-shadow .25s ease; } #codex-card #codex-meta { font-size: .82rem; } #codex-card code { font: 500 12px/1.4 var(--font-mono, monospace); background: var(--bg, color-mix(in srgb, var(--surface) 80%, var(--text) 8%)); padding: 1px 5px; border-radius: 4px; } #codex-card textarea { width: 100%; box-sizing: border-box; margin-top: 6px; padding: 8px 10px; font: 400 12px/1.4 var(--font-mono, monospace); background: var(--surface); border: 0.5px solid var(--border); border-radius: var(--radius); resize: vertical; } #codex-card .form-actions { margin-top: 12px; } /* ───── Codex-Warning auf Recipe-Import ─────────────── */ .codex-warning { margin: 8px 22px 0; padding: 10px 12px; background: color-mix(in srgb, var(--danger) 12%, var(--surface)); border: 0.5px solid color-mix(in srgb, var(--danger) 40%, var(--border)); border-radius: var(--radius); font-size: .9rem; color: var(--text); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .codex-warning a { color: var(--primary); font-weight: 600; text-decoration: none; } .codex-warning a:hover { text-decoration: underline; } /* ───── KI-Logs (Settings) ──────────────────────────── */ .logs-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .logs-list .logs-empty { padding: 12px 6px; text-align: center; } .logs-row { background: var(--surface); border: 0.5px solid var(--border); border-radius: var(--radius); padding: 10px 12px; cursor: pointer; transition: border-color .15s ease, transform .1s ease; } .logs-row:hover { border-color: var(--text-soft); } .logs-row:active { transform: scale(.995); } .logs-row__head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; } .logs-row__usecase { font: 600 12px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .04em; padding: 3px 7px; border-radius: 4px; background: color-mix(in srgb, var(--primary) 14%, var(--surface)); color: var(--text); } .logs-row__badge { font: 600 11px/1 var(--font-sans); text-transform: uppercase; padding: 3px 6px; border-radius: 4px; } .logs-row__badge--err { background: color-mix(in srgb, var(--danger) 18%, var(--surface)); color: var(--danger); } .logs-row__badge--fb { background: color-mix(in srgb, var(--text) 12%, var(--surface)); color: var(--muted); } .logs-row__rating { font-size: 14px; line-height: 1; } .logs-row__date { margin-left: auto; font-size: .82rem; color: var(--muted); } .logs-row__preview { font-size: .9rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .logs-row__foot { font-size: .78rem; margin-top: 4px; } #btn-logs-more { margin: 12px auto 0; display: block; width: auto; padding: 8px 18px; } /* ───── Log-Detail-Modal ───────────────────────────── */ .log-modal-card { max-width: min(92vw, 720px) !important; max-height: 86vh; overflow-y: auto; } .log-modal-meta { margin: 0 0 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; font-size: .82rem; } .log-modal-meta > div { display: flex; gap: 6px; } .log-modal-meta dt { color: var(--muted); margin: 0; } .log-modal-meta dd { margin: 0; color: var(--text); } .log-modal-card details { margin: 8px 0; border: 0.5px solid var(--border); border-radius: var(--radius); padding: 6px 10px; background: color-mix(in srgb, var(--surface) 92%, var(--text) 4%); } .log-modal-card details summary { cursor: pointer; font: 600 12px/1.2 var(--font-sans); text-transform: uppercase; letter-spacing: .03em; color: var(--muted); padding: 4px 0; } .log-modal-card details pre { margin: 8px 0 4px; padding: 8px 10px; background: var(--surface); border: 0.5px solid var(--border); border-radius: 6px; font: 400 12px/1.45 var(--font-mono, monospace); white-space: pre-wrap; word-break: break-word; max-height: 240px; overflow-y: auto; } .log-modal-card label { display: block; margin: 14px 0 6px; font: 600 12px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .rating-row { display: flex; gap: 8px; margin-bottom: 8px; } .rate-btn { flex: 0 0 auto; width: 48px; height: 44px; padding: 0; margin: 0; background: var(--surface); border: 0.5px solid var(--border); border-radius: var(--radius); font-size: 18px; cursor: pointer; transition: border-color .15s ease, background .15s ease; } .rate-btn:hover { border-color: var(--text-soft); } .rate-btn.is-active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 16%, var(--surface)); } #log-modal-note { width: 100%; box-sizing: border-box; padding: 8px 10px; background: var(--surface); border: 0.5px solid var(--border); border-radius: var(--radius); font: 400 13px/1.45 var(--font-sans); resize: vertical; } /* Rezept-Recovery-Button im Log-Detail-Modal */ .recover-btn { display: block; width: 100%; margin: 14px 0 8px; padding: 12px 14px; background: color-mix(in srgb, var(--primary) 14%, var(--surface)); border: 0.5px solid color-mix(in srgb, var(--primary) 50%, var(--border)); border-radius: var(--radius); color: var(--text); text-align: left; cursor: pointer; transition: background .15s ease, border-color .15s ease; } .recover-btn:hover { background: color-mix(in srgb, var(--primary) 22%, var(--surface)); border-color: var(--primary); } .recover-btn span { display: block; font: 600 13px/1.2 var(--font-sans); margin-bottom: 4px; } .recover-btn small { display: block; font: 400 11px/1.4 var(--font-sans); color: var(--muted); } #log-modal-image-wrap { margin: 8px 0 12px; } #log-modal-image-wrap label { display: block; margin: 0 0 6px; font: 600 12px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } #log-modal-image { display: block; max-width: 100%; max-height: 320px; border-radius: var(--radius); border: 0.5px solid var(--border); object-fit: contain; background: color-mix(in srgb, var(--surface) 88%, var(--text) 6%); } /* ── Bilder-Galerie (assets.html) ─────────────────────── */ .assets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; padding: 0 22px; margin: 8px 0 16px; } @media (min-width: 600px) { .assets-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } } .asset-tile { position: relative; aspect-ratio: 1; overflow: hidden; padding: 0; margin: 0; border-radius: var(--radius); border: 0.5px solid var(--border); background: color-mix(in srgb, var(--surface) 88%, var(--text) 6%); cursor: pointer; transition: border-color .15s ease, transform .15s ease; } .asset-tile:hover { border-color: var(--text-soft); } .asset-tile:active { transform: scale(0.98); } .asset-tile img { width: 100%; height: 100%; object-fit: cover; display: block; } .asset-tile__badges { position: absolute; bottom: 4px; right: 4px; display: flex; gap: 4px; pointer-events: none; } .asset-tile__badge { font: 500 10px/1 var(--font-mono, monospace); padding: 3px 6px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--surface) 85%, transparent); color: var(--text); border: 0.5px solid var(--border); backdrop-filter: blur(2px); } .asset-tile__badge--orphan { background: color-mix(in srgb, var(--muted) 30%, var(--surface) 70%); color: var(--surface); } .asset-load-more { display: block; margin: 8px auto 18px; padding: 10px 18px; width: auto; } /* Detail-Modal */ .asset-modal-card { max-width: min(94vw, 560px) !important; max-height: 90vh; overflow-y: auto; } .asset-modal-card h3 { margin: 0 0 10px; font: 500 italic 22px/1.2 var(--font-serif); } .asset-modal-image { display: block; width: 100%; max-height: 50vh; object-fit: contain; margin: 0 auto 12px; border-radius: var(--radius); border: 0.5px solid var(--border); background: color-mix(in srgb, var(--surface) 88%, var(--text) 6%); } .asset-modal-meta { margin: 0 0 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; font-size: .82rem; } .asset-modal-meta > div { display: flex; gap: 6px; } .asset-modal-meta dt { color: var(--muted); margin: 0; font: 600 11px/1.3 var(--font-sans); text-transform: uppercase; letter-spacing: .04em; } .asset-modal-meta dd { margin: 0; color: var(--text); font: 400 12px/1.3 var(--font-mono, monospace); } .asset-modal-card details { margin: 8px 0; border: 0.5px solid var(--border); border-radius: var(--radius); padding: 6px 10px; background: color-mix(in srgb, var(--surface) 92%, var(--text) 4%); } .asset-modal-card details summary { cursor: pointer; font: 600 12px/1.2 var(--font-sans); text-transform: uppercase; letter-spacing: .03em; color: var(--muted); padding: 4px 0; } .asset-uses-list { margin: 8px 0 0; padding: 0; list-style: none; } .asset-uses-list li { padding: 6px 0; border-top: 0.5px solid var(--border); display: flex; align-items: center; gap: 8px; } .asset-uses-list li:first-child { border-top: none; } .asset-uses-list a { color: var(--text); text-decoration: none; font: 500 14px/1.2 var(--font-serif); } .asset-uses-list a:hover { color: var(--primary); } .asset-uses-list .asset-use-meta { margin-left: auto; font: 400 11px/1 var(--font-mono, monospace); color: var(--muted); } .asset-uses-list .asset-use-cover { font: 600 9px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .06em; padding: 3px 6px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--primary) 16%, var(--surface)); color: var(--primary); border: 0.5px solid color-mix(in srgb, var(--primary) 40%, var(--border)); } .asset-uses-list .asset-use-err { color: var(--danger, #b04545); } .asset-uses-empty { margin: 6px 0 0; font: italic 400 12px/1.4 var(--font-serif); color: var(--muted); }