/* Food App – Designsystem (siehe 18). Bootstrap 5.3 + zentrale Variablen. */

/* Schriften: variabel, selbst gehostet (keine externen Ressourcen, siehe 15) */
@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("/assets/fonts/plus-jakarta-sans.woff2") format("woff2-variations");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Fraunces";
    src: url("/assets/fonts/fraunces.woff2") format("woff2-variations");
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Akzent: tiefes Grün (Rolex/Starbucks-Richtung) */
    --fa-primary: #005c3c;
    --fa-primary-rgb: 0, 92, 60;
    --fa-primary-dark: #00422b;
    --fa-primary-soft: rgba(0, 92, 60, .09);

    /* Warme Braun- und Beigetöne */
    --fa-sand: #f4eee3;
    --fa-cream: #fffdf8;
    --fa-linen: #ece2d2;
    --fa-border: #e2d7c4;
    --fa-ink: #2a2119;
    --fa-ink-soft: #6f6355;
    --fa-brown: #7a6248;

    /* Kategorien: passen zur warmen Palette, klar unterscheidbar */
    --fa-healthy: #4a7a45;
    --fa-unhealthy: #b4553a;
    --fa-special: #a97a17;
    --fa-pin: #f7edd6;

    --fa-radius: 1.1rem;
    --fa-radius-sm: .7rem;
    --fa-bottom-nav-height: 66px;
    --fa-shadow: 0 1px 2px rgba(60, 44, 27, .06), 0 8px 24px -12px rgba(60, 44, 27, .18);

    --bs-primary: var(--fa-primary);
    --bs-primary-rgb: var(--fa-primary-rgb);
    --bs-link-color: var(--fa-primary);
    --bs-link-color-rgb: var(--fa-primary-rgb);
    --bs-link-hover-color: var(--fa-primary-dark);
    --bs-body-bg: var(--fa-sand);
    --bs-body-color: var(--fa-ink);
    --bs-secondary-color: var(--fa-ink-soft);
    --bs-tertiary-color: #9a8c7b;
    --bs-border-color: var(--fa-border);
    --bs-border-color-translucent: rgba(122, 98, 72, .18);
    --bs-emphasis-color: var(--fa-ink);
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-font-sans-serif: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --fa-font-display: "Fraunces", Georgia, "Times New Roman", serif;
}

.btn-primary {
    --bs-btn-bg: var(--fa-primary);
    --bs-btn-border-color: var(--fa-primary);
    --bs-btn-hover-bg: #276a43;
    --bs-btn-hover-border-color: #276a43;
    --bs-btn-active-bg: #236140;
    --bs-btn-active-border-color: #236140;
    --bs-btn-disabled-bg: var(--fa-primary);
    --bs-btn-disabled-border-color: var(--fa-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--fa-primary);
    --bs-btn-border-color: var(--fa-primary);
    --bs-btn-hover-bg: var(--fa-primary);
    --bs-btn-hover-border-color: var(--fa-primary);
    --bs-btn-active-bg: var(--fa-primary);
    --bs-btn-active-border-color: var(--fa-primary);
}

.form-check-input:checked { background-color: var(--fa-primary); border-color: var(--fa-primary); }
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: rgba(var(--fa-primary-rgb), .5);
    box-shadow: 0 0 0 .25rem rgba(var(--fa-primary-rgb), .2);
}
.nav-pills { --bs-nav-pills-link-active-bg: var(--fa-primary); }
.text-primary { color: var(--fa-primary) !important; }
.bg-primary { background-color: var(--fa-primary) !important; }

body { min-height: 100vh; }
.card { border-radius: var(--fa-radius); }
.card-header:first-child { border-radius: var(--fa-radius) var(--fa-radius) 0 0; }
.min-w-0 { min-width: 0; }

/* ---------- App-Leiste und Navigation ---------- */
.app-bar .navbar { min-height: 56px; padding-top: env(safe-area-inset-top); }
.app-bar-title { font-size: 1.1rem; max-width: 60vw; }
.app-main { padding-bottom: calc(var(--fa-bottom-nav-height) + 96px) !important; }
@media (min-width: 768px) { .app-main { padding-bottom: 96px !important; } }

.bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
    display: flex; height: calc(var(--fa-bottom-nav-height) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; color: var(--bs-secondary-color); text-decoration: none; font-size: .72rem;
}
.bottom-nav-item i { font-size: 1.35rem; line-height: 1; }
.bottom-nav-item.active { color: var(--fa-primary); font-weight: 600; }

.fab {
    position: fixed; right: 1rem; z-index: 1031;
    bottom: calc(var(--fa-bottom-nav-height) + 1rem + env(safe-area-inset-bottom));
    width: 56px; height: 56px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
}
@media (min-width: 768px) { .fab { bottom: 2rem; right: 2rem; } }

/* ---------- Gäste-Seiten ---------- */
.guest-main { max-width: 460px; }
.auth-card { max-width: 440px; }

/* ---------- Kategorien (Farbe + Symbol + Text, siehe 18) ---------- */
.cat-badge { display: inline-flex; align-items: center; gap: .3em; font-weight: 600; font-size: .78rem; padding: .25em .6em; border-radius: 2em; }
.cat-healthy { color: var(--fa-healthy); background: rgba(31, 138, 76, .12); }
.cat-unhealthy { color: var(--fa-unhealthy); background: rgba(200, 66, 58, .12); }
.cat-special { color: var(--fa-special); background: rgba(183, 134, 11, .14); }
.cat-dot { width: .6rem; height: .6rem; border-radius: 50%; display: inline-block; }
.cat-dot.cat-healthy { background: var(--fa-healthy); }
.cat-dot.cat-unhealthy { background: var(--fa-unhealthy); }
.cat-dot.cat-special { background: var(--fa-special); }

.cat-choice .btn { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .8rem .5rem; font-weight: 600; }
.cat-choice .btn i { font-size: 1.4rem; }
.cat-choice .btn-check:checked + .btn-healthy { background: var(--fa-healthy); border-color: var(--fa-healthy); color: #fff; }
.cat-choice .btn-check:checked + .btn-unhealthy { background: var(--fa-unhealthy); border-color: var(--fa-unhealthy); color: #fff; }
.cat-choice .btn-check:checked + .btn-special { background: var(--fa-special); border-color: var(--fa-special); color: #fff; }
.btn-healthy { color: var(--fa-healthy); border-color: rgba(31, 138, 76, .4); }
.btn-unhealthy { color: var(--fa-unhealthy); border-color: rgba(200, 66, 58, .4); }
.btn-special { color: var(--fa-special); border-color: rgba(183, 134, 11, .45); }

/* ---------- Gerichtskarten ---------- */
.dish-card { overflow: hidden; border: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); transition: transform .12s ease; }
.dish-card:hover { transform: translateY(-2px); }
.dish-card .dish-img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; display: block; }
.dish-card .card-body { padding: .7rem .8rem; }
.dish-card .dish-name { font-weight: 600; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dish-placeholder {
    aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
    font-size: 2.6rem; font-weight: 700; color: rgba(255, 255, 255, .92); width: 100%;
}
.ph-healthy { background: linear-gradient(135deg, #3ba36a, #1f7a47); }
.ph-unhealthy { background: linear-gradient(135deg, #e0735f, #b23a33); }
.ph-special { background: linear-gradient(135deg, #e6b93e, #a8770a); }

.stars { color: #e0a800; white-space: nowrap; }
.stars i { margin-right: 1px; }

.scroll-row { display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; -webkit-overflow-scrolling: touch; }
.scroll-row > * { flex: 0 0 62%; scroll-snap-align: start; }
@media (min-width: 576px) { .scroll-row > * { flex-basis: 38%; } }
@media (min-width: 992px) { .scroll-row > * { flex-basis: 23%; } }

/* ---------- Gericht des Tages ---------- */
.hero-card { overflow: hidden; border: 0; }
.hero-card .hero-img, .hero-card .dish-placeholder { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
@media (min-width: 768px) { .hero-card .hero-img, .hero-card .dish-placeholder { aspect-ratio: 21 / 9; } }
.eyebrow { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--bs-secondary-color); }

.week-chips { display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem; }
.week-chip { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .45rem 0; border-radius: .75rem; background: var(--bs-body-bg); text-decoration: none; color: inherit; font-size: .8rem; border: 1px solid var(--bs-border-color-translucent); }
.week-chip.today { border-color: var(--fa-primary); box-shadow: inset 0 0 0 1px var(--fa-primary); font-weight: 700; }

/* ---------- Detailansicht ---------- */
.dish-carousel { border-radius: var(--fa-radius); overflow: hidden; background: #000; }
.dish-carousel img, .dish-carousel .dish-placeholder { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
@media (min-width: 992px) { .dish-carousel img, .dish-carousel .dish-placeholder { aspect-ratio: 16 / 10; } }
.carousel-counter { position: absolute; right: .75rem; bottom: .75rem; z-index: 3; background: rgba(0, 0, 0, .55); color: #fff; font-size: .75rem; padding: .15rem .55rem; border-radius: 1rem; }
.pinned-note { background: var(--fa-pin); border-left: 4px solid #e0a800; border-radius: .6rem; padding: .6rem .8rem; }
.ingredient-row { display: flex; gap: .5rem; align-items: baseline; padding: .45rem 0; border-bottom: 1px dashed var(--bs-border-color); }
.ingredient-row:last-child { border-bottom: 0; }
.ingredient-qty { min-width: 5.5rem; font-variant-numeric: tabular-nums; color: var(--bs-secondary-color); }
.ingredient-row.pantry { color: var(--bs-secondary-color); }
.pantry-toggle { border: 0; background: none; padding: 0 .25rem; color: var(--bs-tertiary-color); }
.pantry-toggle.active { color: var(--fa-primary); }
.sticky-actions { position: sticky; bottom: calc(var(--fa-bottom-nav-height) + env(safe-area-inset-bottom) + .5rem); z-index: 10; }
@media (min-width: 768px) { .sticky-actions { bottom: 1rem; } }

/* ---------- Formular ---------- */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .5rem; }
.photo-tile { position: relative; aspect-ratio: 1; border-radius: .75rem; overflow: hidden; background: var(--bs-tertiary-bg); }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; }
.photo-tile .photo-remove { position: absolute; top: .25rem; right: .25rem; }
.photo-tile .cover-badge { position: absolute; left: .25rem; bottom: .25rem; }
.photo-tile.uploading::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .55); }
.photo-add { border: 2px dashed var(--bs-border-color); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--bs-secondary-color); cursor: pointer; font-size: .8rem; }
.photo-add i { font-size: 1.6rem; }
.chip-group { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip-group .btn { border-radius: 2rem; }

/* Zutatenzeilen: Menge, Einheit, Name nebeneinander (siehe 06) */
.ingredient-rows { display: grid; gap: .35rem; }
.ingredient-head, .ingredient-row-input {
    display: grid;
    grid-template-columns: 4.5rem 6.5rem 1fr auto auto;
    gap: .35rem;
    align-items: center;
}
.ingredient-head { padding-inline: .2rem; }
.ingredient-row-input .form-control, .ingredient-row-input .form-select { padding-inline: .5rem; }
.ingredient-row-input .pantry-toggle { font-size: 1.05rem; }
@media (max-width: 575.98px) {
    .ingredient-head { font-size: .7rem; }
    .ingredient-row-input {
        grid-template-columns: 3.6rem 4.9rem 1fr auto auto;
        gap: .2rem;
    }
    .ingredient-row-input .form-select { background-position: right .25rem center; padding-right: 1.3rem; }
    .ingredient-head, .ingredient-row-input { gap: .2rem; }
    .ingredient-row-input .form-control, .ingredient-row-input .form-select { font-size: .9rem; }
}

/* ---------- Wochenplan ---------- */
.plan-day { display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; background: var(--bs-body-bg); border-radius: .9rem; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); margin-bottom: .5rem; }
.plan-day.today { box-shadow: inset 0 0 0 2px var(--fa-primary); }
.plan-day .day-label { width: 2.6rem; text-align: center; line-height: 1.1; flex-shrink: 0; }
.plan-day .day-label .dow { font-weight: 700; }
.plan-day .day-label .dom { font-size: .72rem; color: var(--bs-secondary-color); }
.plan-day .plan-thumb { width: 48px; height: 48px; border-radius: .6rem; object-fit: cover; flex-shrink: 0; }
.plan-day .plan-thumb.dish-placeholder { font-size: 1.1rem; aspect-ratio: auto; }
.plan-day .plan-body { flex: 1; min-width: 0; }
.plan-day .plan-actions .btn { padding: .3rem .45rem; }
.plan-day.locked .lock-btn { color: var(--fa-primary); }
.plan-day.status-cooked { opacity: .78; }
.plan-day.sortable-ghost { opacity: .4; }
.drag-handle { cursor: grab; color: var(--bs-tertiary-color); touch-action: none; }
.mix-counter .badge { font-size: .85rem; }

/* ---------- Einkaufsliste ---------- */
.shop-section-title { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--bs-secondary-color); margin: 1rem 0 .35rem; }
.shop-item { display: flex; align-items: center; gap: .75rem; padding: .7rem .8rem; background: var(--bs-body-bg); border-radius: .75rem; margin-bottom: .35rem; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); user-select: none; }
.shop-item .form-check-input { width: 1.5rem; height: 1.5rem; margin: 0; flex-shrink: 0; }
.shop-item .shop-name { flex: 1; min-width: 0; }
.shop-item .shop-qty { font-variant-numeric: tabular-nums; color: var(--bs-secondary-color); white-space: nowrap; }
.shop-item.checked .shop-name { text-decoration: line-through; color: var(--bs-secondary-color); }
.shop-item.pending { opacity: .6; }
.shop-progress { height: .5rem; }

/* ---------- Sonstiges ---------- */
.avatar-circle { width: 48px; height: 48px; border-radius: 50%; background: var(--fa-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.2rem; flex-shrink: 0; }
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--bs-secondary-color); }
.empty-state i { font-size: 2.6rem; display: block; margin-bottom: .5rem; }
.rating-input { display: flex; gap: .35rem; justify-content: center; }
.rating-input input { position: absolute; opacity: 0; pointer-events: none; }
.rating-input label { font-size: 2.2rem; color: #d9d9d9; cursor: pointer; line-height: 1; }
.rating-input label.on { color: #e0a800; }
.rating-input input:focus-visible + label { outline: 2px solid var(--fa-primary); border-radius: .25rem; }
.kpi { font-size: 1.8rem; font-weight: 700; line-height: 1; }
.cook-step { font-size: 1.5rem; line-height: 1.45; }
.stat-bar { height: 1.4rem; border-radius: .4rem; overflow: hidden; display: flex; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

.narrow { max-width: 560px; }
.avatar-circle.avatar-sm { width: 36px; height: 36px; font-size: .95rem; }
.dish-card .dish-placeholder.dish-img { display: flex; }
.form-wide { max-width: 760px; }

/* ---------- Druck ---------- */
@media print {
    .app-bar, .bottom-nav, .fab, .d-print-none, .toast-container { display: none !important; }
    body { background: #fff; }
    .app-main { padding: 0 !important; }
    .print-list li { break-inside: avoid; }
}
.shop-item .shop-name { cursor: pointer; margin: 0; }
.progress-bar { transition: width .2s ease; }
.stat-seg { display: block; height: 100%; }
.stat-seg.cat-healthy { background: var(--fa-healthy); }
.stat-seg.cat-unhealthy { background: var(--fa-unhealthy); }
.stat-seg.cat-special { background: var(--fa-special); }
.chart-box { position: relative; height: 240px; }

/* Detailansicht am Smartphone: Aktionsleiste statt schwebendem „+“, Tabs scrollbar */
body:has(.sticky-actions) .fab { display: none; }
.sticky-actions .btn { white-space: nowrap; padding-left: .5rem; padding-right: .5rem; }
.nav-pills.nav-fill { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.nav-pills.nav-fill .nav-link { white-space: nowrap; }

/* Wochenplan am Smartphone: Namen zweizeilig, kompaktere Aktionen */
.plan-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.2; margin-bottom: .15rem; }
@media (max-width: 575.98px) {
    .plan-day { gap: .5rem; padding: .55rem .5rem; }
    .plan-day .day-label { width: 2.1rem; }
    .plan-day .plan-thumb { width: 42px; height: 42px; }
    .plan-day .plan-actions .btn { padding: .25rem .3rem; }
    .drag-handle { display: none; }
}

/* ==========================================================================
   Typografie und Feinschliff (siehe 18)
   Eine Serifenschrift für Überschriften, eine moderne Grotesk für die
   Oberfläche. Hierarchie entsteht über Schriftstärke, nicht über Farbe.
   ========================================================================== */

body {
    font-family: var(--bs-font-sans-serif);
    color: var(--fa-ink);
    -webkit-font-smoothing: antialiased;
    letter-spacing: -.005em;
}

h1, .h1, h2, .h2, h3, .h3, .display-font {
    font-family: var(--fa-font-display);
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--fa-ink);
}

h4, .h4, h5, .h5, h6, .h6 {
    font-weight: 700;
    letter-spacing: -.015em;
}

.navbar-brand { font-family: var(--fa-font-display); font-weight: 600; letter-spacing: -.02em; }
.app-bar-title { font-family: var(--fa-font-display); font-weight: 600; letter-spacing: -.015em; }
.fw-semibold { font-weight: 600 !important; }
.eyebrow { font-weight: 700; letter-spacing: .1em; color: var(--fa-brown); }
.small, small { font-size: .855rem; }
.text-body-secondary { color: var(--fa-ink-soft) !important; }
.ingredient-qty, .shop-qty, .kpi { font-variant-numeric: tabular-nums; }
.kpi { font-family: var(--fa-font-display); font-weight: 600; letter-spacing: -.03em; }

/* ---------- Flächen ---------- */
.card, .list-group, .modal-content, .offcanvas, .dropdown-menu {
    background-color: var(--fa-cream);
    border-color: var(--bs-border-color-translucent);
}
.card { box-shadow: var(--fa-shadow); }
.shadow-sm { box-shadow: var(--fa-shadow) !important; }
.card-header, .bg-body { background-color: var(--fa-cream) !important; }
.bg-body-tertiary { background-color: var(--fa-linen) !important; }
.list-group-item { background-color: transparent; border-color: var(--bs-border-color-translucent); color: var(--fa-ink); }
.list-group-item-action:hover { background-color: var(--fa-primary-soft); }
.dropdown-item:active { background-color: var(--fa-primary); }
.text-bg-light { background-color: var(--fa-linen) !important; color: var(--fa-ink) !important; }
.btn-light { --bs-btn-bg: var(--fa-linen); --bs-btn-border-color: transparent; --bs-btn-hover-bg: #e2d6c2; --bs-btn-color: var(--fa-ink); }
hr, .dropdown-divider { border-color: var(--bs-border-color); opacity: .5; }

/* ---------- Bedienelemente ---------- */
.btn { --bs-btn-border-radius: var(--fa-radius-sm); font-weight: 600; letter-spacing: -.01em; }
.btn-lg { --bs-btn-border-radius: .85rem; font-size: 1.02rem; }
.btn-primary { --bs-btn-hover-bg: var(--fa-primary-dark); --bs-btn-active-bg: var(--fa-primary-dark); --bs-btn-hover-border-color: var(--fa-primary-dark); }
.btn-outline-secondary { --bs-btn-color: var(--fa-brown); --bs-btn-border-color: var(--bs-border-color); --bs-btn-hover-bg: var(--fa-linen); --bs-btn-hover-color: var(--fa-ink); --bs-btn-hover-border-color: var(--fa-border); --bs-btn-active-bg: var(--fa-brown); --bs-btn-active-border-color: var(--fa-brown); }
.btn-success { --bs-btn-bg: var(--fa-primary); --bs-btn-border-color: var(--fa-primary); --bs-btn-hover-bg: var(--fa-primary-dark); --bs-btn-hover-border-color: var(--fa-primary-dark); }
.btn-outline-primary { --bs-btn-color: var(--fa-primary); }
.form-control, .form-select { background-color: var(--fa-cream); border-color: var(--bs-border-color); border-radius: var(--fa-radius-sm); color: var(--fa-ink); }
.form-control::placeholder { color: #a2937f; }
.input-group-text { background-color: var(--fa-cream); border-color: var(--bs-border-color); color: var(--fa-ink-soft); }
.form-label { font-weight: 600; color: var(--fa-ink); }
.nav-pills { --bs-nav-pills-border-radius: 2rem; }
.nav-pills .nav-link { color: var(--fa-brown); font-weight: 600; }
.nav-pills .nav-link.active { background-color: var(--fa-primary); }
.badge.rounded-pill { font-weight: 600; }
.alert { border: 1px solid var(--bs-border-color-translucent); border-radius: var(--fa-radius); }
.alert-success { --bs-alert-bg: rgba(0, 92, 60, .08); --bs-alert-color: var(--fa-primary-dark); --bs-alert-border-color: rgba(0, 92, 60, .2); }
.alert-warning { --bs-alert-bg: rgba(169, 122, 23, .1); --bs-alert-color: #6f4f06; --bs-alert-border-color: rgba(169, 122, 23, .25); }
.alert-danger { --bs-alert-bg: rgba(180, 85, 58, .1); --bs-alert-color: #8a3a22; --bs-alert-border-color: rgba(180, 85, 58, .25); }
.alert-info { --bs-alert-bg: var(--fa-linen); --bs-alert-color: var(--fa-ink); }
.alert-secondary { --bs-alert-bg: var(--fa-linen); --bs-alert-color: var(--fa-ink-soft); }

/* ---------- Navigation ---------- */
.app-bar .navbar { background-color: rgba(255, 253, 248, .92) !important; backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--bs-border-color-translucent) !important; }
.navbar-brand img { border-radius: .55rem; }
.navbar-nav .nav-link { color: var(--fa-brown); font-weight: 600; border-radius: 2rem; padding-inline: .8rem; }
.navbar-nav .nav-link.active { color: var(--fa-primary); background: var(--fa-primary-soft); }
.bottom-nav { background-color: rgba(255, 253, 248, .96) !important; backdrop-filter: saturate(140%) blur(8px); border-top: 1px solid var(--bs-border-color-translucent) !important; }
.bottom-nav-item { color: var(--fa-brown); font-weight: 500; }
.bottom-nav-item.active { color: var(--fa-primary); }
.bottom-nav-item.active i { background: var(--fa-primary-soft); border-radius: 2rem; padding: .1rem .7rem; }
.fab { box-shadow: 0 6px 20px -6px rgba(0, 66, 43, .55) !important; }

/* ---------- Kategorien und Platzhalter ---------- */
.cat-healthy { color: var(--fa-healthy); background: rgba(74, 122, 69, .12); }
.cat-unhealthy { color: var(--fa-unhealthy); background: rgba(180, 85, 58, .12); }
.cat-special { color: var(--fa-special); background: rgba(169, 122, 23, .14); }
.ph-healthy { background: linear-gradient(140deg, #6f9a5f, #3d6b3a); }
.ph-unhealthy { background: linear-gradient(140deg, #cd7f5c, #9b4429); }
.ph-special { background: linear-gradient(140deg, #d8ab52, #94690f); }
.dish-placeholder { font-family: var(--fa-font-display); font-weight: 500; }
.stars { color: var(--fa-special); }

/* ---------- Karten und Listen ---------- */
.dish-card { background-color: var(--fa-cream); box-shadow: var(--fa-shadow); }
.dish-card:hover { box-shadow: 0 2px 4px rgba(60, 44, 27, .08), 0 14px 30px -14px rgba(60, 44, 27, .3); }
.dish-card .dish-name { letter-spacing: -.015em; }
.hero-card .card-body { padding: 1.1rem 1.15rem 1.25rem; }
.week-chip { background: var(--fa-cream); border-color: var(--bs-border-color-translucent); }
.week-chip.today { border-color: var(--fa-primary); box-shadow: inset 0 0 0 1.5px var(--fa-primary); }
.plan-day, .shop-item { background: var(--fa-cream); box-shadow: var(--fa-shadow); border-radius: var(--fa-radius-sm); }
.plan-day.today { box-shadow: inset 0 0 0 2px var(--fa-primary), var(--fa-shadow); }
.pinned-note { background: var(--fa-pin); border-left-color: var(--fa-special); }
.shop-section-title { color: var(--fa-brown); letter-spacing: .08em; }
.ingredient-row { border-bottom-color: var(--bs-border-color-translucent); }
.avatar-circle { background: var(--fa-primary); }
.empty-state { color: var(--fa-ink-soft); }
.empty-state i { color: var(--fa-brown); opacity: .55; }
.toast { border-radius: var(--fa-radius-sm); }
.progress { background-color: var(--fa-linen); }
.progress-bar.bg-success { background-color: var(--fa-primary) !important; }
.photo-add { border-color: var(--bs-border-color); color: var(--fa-brown); background: var(--fa-cream); }
.photo-tile { background: var(--fa-linen); }
.rating-input label { color: #ddd2bd; }
.rating-input label.on { color: var(--fa-special); }

/* ---------- Gästeseiten ---------- */
body.guest { background:
    radial-gradient(1100px 500px at 50% -10%, rgba(0, 92, 60, .1), transparent 60%),
    var(--fa-sand); }
.auth-card { border-radius: 1.3rem; }
.guest-main h1 { font-size: 1.7rem; }
.form-switch .form-check-input { width: 2.6em; height: 1.4em; margin-top: .1em; background-color: var(--fa-linen); border-color: var(--bs-border-color); }
.form-switch .form-check-input:checked { background-color: var(--fa-primary); border-color: var(--fa-primary); }
.form-check-label { cursor: pointer; }

/* ==========================================================================
   Liquid Glass (siehe 18)
   Schwebende Flächen über dem Inhalt: Hintergrund wird gebrochen (backdrop-filter),
   dazu Kantenlicht, Bevel und ein feiner Glanz. Ohne WebGL – damit die App auf
   dem Smartphone flüssig bleibt und Inhalte dynamisch bleiben dürfen.
   ========================================================================== */

.glass {
    position: relative;
    background: linear-gradient(150deg, rgba(255, 253, 248, .78), rgba(252, 246, 236, .62) 55%, rgba(255, 253, 248, .74));
    -webkit-backdrop-filter: blur(20px) saturate(185%) brightness(1.04);
    backdrop-filter: blur(20px) saturate(185%) brightness(1.04);
    border: 1px solid rgba(255, 255, 255, .6);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .85),          /* oberes Kantenlicht */
        inset 0 -1px 0 rgba(122, 98, 72, .14),           /* untere Brechkante */
        inset 0 0 20px rgba(255, 255, 255, .35),         /* Bevel nach innen */
        0 8px 28px -10px rgba(60, 44, 27, .28);
}

/* Feiner Glanz über der Fläche */
.glass::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(115deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, .22) 100%);
    opacity: .7;
}

.glass > * { position: relative; z-index: 1; }

/* App-Leiste und Tab-Leiste schweben über dem Inhalt */
.app-bar .navbar {
    background: linear-gradient(180deg, rgba(255, 253, 248, .82), rgba(252, 246, 236, .68)) !important;
    -webkit-backdrop-filter: blur(22px) saturate(190%);
    backdrop-filter: blur(22px) saturate(190%);
    border-bottom: 1px solid rgba(255, 255, 255, .5) !important;
    box-shadow: 0 1px 0 rgba(122, 98, 72, .1), 0 10px 24px -20px rgba(60, 44, 27, .5);
}

.bottom-nav {
    background: linear-gradient(0deg, rgba(255, 253, 248, .88), rgba(252, 246, 236, .7)) !important;
    -webkit-backdrop-filter: blur(24px) saturate(190%);
    backdrop-filter: blur(24px) saturate(190%);
    border-top: 1px solid rgba(255, 255, 255, .55) !important;
    box-shadow: 0 -1px 0 rgba(122, 98, 72, .08), 0 -12px 30px -24px rgba(60, 44, 27, .5);
}

.bottom-nav-item.active i {
    background: rgba(0, 92, 60, .12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}

/* Aktionsleiste am unteren Rand (Gericht-Detail) */
.sticky-actions > .d-flex,
.sticky-actions .btn-lg {
    background: linear-gradient(150deg, rgba(255, 253, 248, .8), rgba(252, 246, 236, .66));
    -webkit-backdrop-filter: blur(20px) saturate(185%);
    backdrop-filter: blur(20px) saturate(185%);
    border: 1px solid rgba(255, 255, 255, .6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 10px 30px -12px rgba(60, 44, 27, .35);
}
/* Der Speichern-Button bleibt kräftig grün, nur mit Glanzkante */
.sticky-actions .btn-primary.btn-lg {
    background: linear-gradient(165deg, #06714a, var(--fa-primary) 60%, var(--fa-primary-dark));
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: rgba(255, 255, 255, .25);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 26px -10px rgba(0, 66, 43, .6);
}

/* Schwebender Knopf: Glas über Grün */
.fab {
    background: linear-gradient(165deg, #067a50, var(--fa-primary) 55%, var(--fa-primary-dark)) !important;
    border: 1px solid rgba(255, 255, 255, .3) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .45),
        inset 0 -2px 6px rgba(0, 0, 0, .18),
        0 10px 26px -8px rgba(0, 66, 43, .65) !important;
}

/* Dialoge und Auswahlflächen */
.modal-content, .offcanvas {
    background: linear-gradient(150deg, rgba(255, 253, 248, .92), rgba(252, 246, 236, .86));
    -webkit-backdrop-filter: blur(26px) saturate(180%);
    backdrop-filter: blur(26px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 24px 60px -20px rgba(60, 44, 27, .45);
}
.modal-backdrop.show { opacity: .35; }
.dropdown-menu {
    background: linear-gradient(150deg, rgba(255, 253, 248, .93), rgba(252, 246, 236, .87));
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 16px 40px -16px rgba(60, 44, 27, .4);
}
.toast { -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); }

/* Titelbild-Karte: Glas-Verlauf über dem Foto */
.hero-card { position: relative; }

/* Fallback ohne backdrop-filter (z. B. ältere Browser): deckende Flächen */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass, .app-bar .navbar, .bottom-nav, .modal-content, .offcanvas, .dropdown-menu, .sticky-actions > .d-flex {
        background: var(--fa-cream) !important;
    }
}

/* Weniger Transparenz gewünscht (Systemeinstellung): ruhige, deckende Flächen */
@media (prefers-reduced-transparency: reduce) {
    .glass, .app-bar .navbar, .bottom-nav, .modal-content, .offcanvas, .dropdown-menu, .sticky-actions > .d-flex {
        background: var(--fa-cream) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    .glass::after { display: none; }
}

/* Platz für die schwebende Aktionsleiste, damit sie keine Inhalte verdeckt */
body:has(.sticky-actions) .app-main { padding-bottom: calc(var(--fa-bottom-nav-height) + 170px) !important; }
@media (min-width: 768px) { body:has(.sticky-actions) .app-main { padding-bottom: 150px !important; } }

/* Platzhalterflächen etwas ruhiger, damit die Listen nicht zu bunt wirken */
.dish-placeholder { filter: saturate(.88); }
.dish-placeholder::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 90% at 30% 20%, rgba(255, 253, 248, .22), transparent 60%);
    pointer-events: none;
}
.dish-card .dish-placeholder, .hero-card .dish-placeholder, .dish-carousel .dish-placeholder { position: relative; }

/* ---------- Fußzeile ---------- */
.app-footer { margin-top: 2.5rem; padding: 1.25rem 0 .5rem; border-top: 1px solid var(--bs-border-color-translucent); }
.app-footer a { color: var(--fa-brown); text-decoration: none; font-weight: 600; }
.app-footer a:hover { color: var(--fa-primary); text-decoration: underline; }
.guest .app-footer { border-top: 0; margin-top: 1.5rem; }
#legal-modal .modal-body h2 { margin-top: 1.5rem; }
/* Titel steht bereits in der Kopfzeile des Modals */
#legal-modal .modal-body > h1 { display: none; }
#legal-modal .modal-body > h1 + p { margin-top: 0; }

/* ---------- Profilbild ---------- */
.avatar-img { object-fit: cover; }
.avatar-circle.avatar-lg { width: 72px; height: 72px; font-size: 1.8rem; }
.avatar-circle.avatar-sm { width: 32px; height: 32px; font-size: .9rem; }
.avatar-upload label { cursor: pointer; }
.avatar-edit {
    position: absolute; right: -2px; bottom: -2px;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--fa-primary); color: #fff; font-size: .75rem;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--fa-cream);
}

/* ---------- Kategorie „normal“ ---------- */
:root { --fa-normal: #8a7355; }
.cat-normal { color: var(--fa-normal); background: rgba(138, 115, 85, .14); }
.cat-dot.cat-normal { background: var(--fa-normal); }
.ph-normal { background: linear-gradient(140deg, #a98c68, #7a6248); }
.btn-normal { color: var(--fa-normal); border-color: rgba(138, 115, 85, .45); }
.cat-choice .btn-check:checked + .btn-normal { background: var(--fa-normal); border-color: var(--fa-normal); color: #fff; }
.stat-seg.cat-normal { background: var(--fa-normal); }

/* ---------- Mix-Schieberegler ---------- */
.mix-slider + .mix-slider { margin-top: .9rem; }
.mix-slider output { font-variant-numeric: tabular-nums; }
.form-range { --range-color: var(--fa-primary); }
.form-range::-webkit-slider-thumb { background: var(--range-color); }
.form-range::-moz-range-thumb { background: var(--range-color); }
.form-range::-webkit-slider-runnable-track { background: var(--fa-linen); height: .45rem; border-radius: 1rem; }
.form-range::-moz-range-track { background: var(--fa-linen); height: .45rem; border-radius: 1rem; }
.form-range.cat-healthy { --range-color: var(--fa-healthy); background: none; }
.form-range.cat-normal { --range-color: var(--fa-normal); background: none; }
.form-range.cat-unhealthy { --range-color: var(--fa-unhealthy); background: none; }
.form-range.cat-special { --range-color: var(--fa-special); background: none; }