:root {
    --color-primary: #0102fb;
    --color-primary-dark: #0002c2;
    --color-primary-light: #e5e5fe;
    --color-secondary: #00b341;
    --color-secondary-dark: #008a32;
    --color-danger: #e4372a;
    --color-danger-dark: #b82a20;
    --color-bg: #f7f8fa;
    --color-card: #ffffff;
    --color-header-bg: #ffffff;
    --color-border: #e1e4ea;
    --color-text: #1c2230;
    --color-muted: #6b7280;
    --color-row-bg: #fbfaf8;
    --color-thumb-bg: #eeeeee;
    --flash-error-bg: #fdeceb;
    --flash-error-text: #a3271b;
    --flash-error-border: #f6bdb6;
    --flash-success-bg: #e6f7ec;
    --flash-success-text: #0a6b2c;
    --flash-success-border: #b7e9c6;
    --flash-warning-bg: #fdf3d0;
    --flash-warning-text: #92700a;
    --flash-warning-border: #f0dfa0;
    --radius: 10px;
    --sidebar-width: 240px;
}

/*
 * Modus (Hell/Dunkel/Pastell/Automatisch) und Akzentfarbe (Blau/Grün/Rot,
 * siehe Einstellungen → Farbschema, settings.php) sind zwei unabhängige
 * Achsen, die sich frei kombinieren lassen:
 * - [data-theme] steuert die "neutralen" Farben (Hintergrund, Karten,
 *   Rahmen, Text, Flash-Meldungen) – hell/dunkel/pastell bzw. ohne Attribut
 *   = Automatisch (folgt der Systemeinstellung, nur hell/dunkel: "Pastell"
 *   gibt es als Systemeinstellung nicht, daher nur explizit wählbar).
 * - [data-accent] steuert NUR --color-primary/-dark (die "Marken"-Farbe für
 *   Buttons/Links/Header-Linie) – gruen/rot, ohne Attribut = Blau
 *   (Standard). --color-secondary (Erfolg, immer Grün) und --color-danger
 *   (Löschen/Fehler, immer Rot) bleiben bewusst FEST, damit diese Bedeutung
 *   unabhängig von der gewählten Akzentfarbe erkennbar bleibt.
 *
 * Jede Achse ist jeweils zweifach definiert (einmal per @media-Query fürs
 * automatische Verhalten, einmal per Attribut-Selektor für die explizite
 * Wahl, serverseitig pro Nutzerkonto per themeAttributesHtml() gesetzt,
 * siehe functions.php) – gleiches Muster wie
 * schon beim ursprünglichen Hell/Dunkel-Umschalter.
 */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="pastel"]) {
        --color-primary: #6d7bff;
        --color-primary-dark: #545fcc;
        --color-primary-light: #262c47;
        --color-secondary: #34d17c;
        --color-secondary-dark: #22a862;
        --color-danger: #ff6b5b;
        --color-danger-dark: #e14b3a;
        --color-bg: #14171c;
        --color-card: #1d2128;
        --color-header-bg: #1d2128;
        --color-border: #2b303a;
        --color-text: #e6e8ec;
        --color-muted: #9aa1ac;
        --color-row-bg: #262b33;
        --color-thumb-bg: #2b303a;
        --flash-error-bg: #3a201d;
        --flash-error-text: #ff8a7a;
        --flash-error-border: #5c2c26;
        --flash-success-bg: #17301f;
        --flash-success-text: #6bdb92;
        --flash-success-border: #234a2d;
        --flash-warning-bg: #3a331a;
        --flash-warning-text: #e0c467;
        --flash-warning-border: #5c4f26;
    }
}

:root[data-theme="dark"] {
    --color-primary: #6d7bff;
    --color-primary-dark: #545fcc;
    --color-primary-light: #262c47;
    --color-secondary: #34d17c;
    --color-secondary-dark: #22a862;
    --color-danger: #ff6b5b;
    --color-danger-dark: #e14b3a;
    --color-bg: #14171c;
    --color-card: #1d2128;
    --color-header-bg: #1d2128;
    --color-border: #2b303a;
    --color-text: #e6e8ec;
    --color-muted: #9aa1ac;
    --color-row-bg: #262b33;
    --color-thumb-bg: #2b303a;
    --flash-error-bg: #3a201d;
    --flash-error-text: #ff8a7a;
    --flash-error-border: #5c2c26;
    --flash-success-bg: #17301f;
    --flash-success-text: #6bdb92;
    --flash-success-border: #234a2d;
    --flash-warning-bg: #3a331a;
    --flash-warning-text: #e0c467;
    --flash-warning-border: #5c4f26;
}

/* Pastell: sanfter, warm getönter Hintergrund + gedämpfte Flash-Farben.
   Nur explizit wählbar (kein Systemeinstellungs-Äquivalent). Die
   Akzentfarbe (--color-primary, siehe unten) bleibt bewusst kräftig/
   gesättigt – ein ruhiger, weicher Hintergrund mit einem klaren Farbtupfer
   als Akzent, statt alles zu entsättigen. */
:root[data-theme="pastel"] {
    --color-bg: #faf5ef;
    --color-card: #fffdfb;
    --color-header-bg: #fffdfb;
    --color-border: #ecdfce;
    --color-text: #3a332c;
    --color-muted: #8c8072;
    --color-primary-light: #f3e9d8;
    --color-row-bg: #f6efe6;
    --color-thumb-bg: #efe6d8;
    --flash-error-bg: #fbe3df;
    --flash-error-text: #a3392b;
    --flash-error-border: #f0c3ba;
    --flash-success-bg: #e3f3e7;
    --flash-success-text: #2f7a4a;
    --flash-success-border: #c7e6cf;
    --flash-warning-bg: #f7ecd0;
    --flash-warning-text: #7a5f16;
    --flash-warning-border: #e8d6a0;
}

/*
 * Akzentfarbe Grün: für Hell/Pastell (heller Hintergrund) dieselbe
 * gesättigte Logo-Grün-Variante wie --color-secondary; für Dunkel die
 * hellere, kontrastreichere Variante (wie oben bei --color-secondary im
 * Dunkel-Block). --color-secondary/--color-danger bleiben unverändert.
 */
:root[data-accent="gruen"]:not([data-theme="dark"]) {
    --color-primary: #00b341;
    --color-primary-dark: #008a32;
    --color-primary-light: #e5f7ec;
}
@media (prefers-color-scheme: dark) {
    :root[data-accent="gruen"]:not([data-theme="light"]):not([data-theme="pastel"]) {
        --color-primary: #34d17c;
        --color-primary-dark: #22a862;
        --color-primary-light: #17301f;
    }
}
:root[data-accent="gruen"][data-theme="dark"] {
    --color-primary: #34d17c;
    --color-primary-dark: #22a862;
    --color-primary-light: #17301f;
}

/* Akzentfarbe Rot: gleiches Prinzip wie Grün oben, angelehnt an --color-danger. */
:root[data-accent="rot"]:not([data-theme="dark"]) {
    --color-primary: #e4372a;
    --color-primary-dark: #b82a20;
    --color-primary-light: #fcebe9;
}
@media (prefers-color-scheme: dark) {
    :root[data-accent="rot"]:not([data-theme="light"]):not([data-theme="pastel"]) {
        --color-primary: #ff6b5b;
        --color-primary-dark: #e14b3a;
        --color-primary-light: #3a201d;
    }
}
:root[data-accent="rot"][data-theme="dark"] {
    --color-primary: #ff6b5b;
    --color-primary-dark: #e14b3a;
    --color-primary-light: #3a201d;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.5;
}

/* ---------- Sidebar-Layout (Runde 4, nach EtikettenDB-Vorlage) ---------- */
.app-shell {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    background: var(--color-card);
    border-right: 1px solid var(--color-border);
    padding: 1.25rem 1rem;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    padding: 0 0.25rem;
    color: var(--color-text);
    text-decoration: none;
}

.sidebar-logo-img {
    height: 30px;
    width: auto;
    display: block;
}

.sidebar-section-title {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted);
    margin: 1.25rem 0.25rem 0.4rem;
}

.sidebar nav a {
    display: block;
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
    color: var(--color-text);
    font-size: 0.88rem;
    margin-bottom: 2px;
    text-decoration: none;
}

.sidebar nav a:hover { background: var(--color-bg); }
.sidebar nav a.active {
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-weight: 600;
}

.main-content {
    flex: 1;
    padding: 1.75rem 2rem;
    max-width: 1100px;
}

header.site-header {
    background: var(--color-header-bg);
    color: var(--color-text);
    padding: 14px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(90deg, var(--color-primary), var(--color-secondary)) 1;
}

header.site-header .brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

header.site-header .brand img.logo {
    height: 38px;
    width: auto;
    display: block;
}

header.site-header h1 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--color-text);
}

header.site-header a.btn {
    background: var(--color-primary);
    color: #fff;
}

main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px;
}

a { color: var(--color-primary); }

.btn {
    display: inline-block;
    background: var(--color-primary);
    color: #fff;
    padding: 9px 16px;
    border-radius: var(--radius);
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
}
.btn:hover { background: var(--color-primary-dark); }
.btn.secondary {
    background: var(--color-card);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}
.btn.secondary:hover { border-color: var(--color-primary); }
.btn.success { background: var(--color-secondary); }
.btn.success:hover { background: var(--color-secondary-dark); }
.btn.danger {
    background: var(--color-danger);
}
.btn.danger:hover { background: var(--color-danger-dark); }

.search-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}
.search-bar input[type="text"] {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 1rem;
}

.recipe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 18px;
}

.recipe-card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    color: var(--color-text);
    display: flex;
    flex-direction: column;
}
.recipe-card:hover { border-color: var(--color-primary); }

.recipe-card .thumb {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    background: var(--color-thumb-bg);
}
.recipe-card .thumb.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-muted);
    font-size: 0.85rem;
}
.recipe-card .card-body {
    padding: 12px 14px;
}
.recipe-card h3 {
    margin: 0 0 4px;
    font-size: 1.05rem;
}
.recipe-card .meta {
    font-size: 0.82rem;
    color: var(--color-muted);
}

/* Hervorgehobenes Formularfeld (aktuell: "Sichtbarkeit" im Rezeptformular),
   damit eine wichtige, leicht übersehene Option optisch auffällt – farbiger
   Rahmen + fette, farbige Beschriftung, passend zur jeweiligen Akzentfarbe
   (--color-primary, siehe Farbschema-Logik weiter oben in dieser Datei). */
.form-row-highlight {
    border: 2px solid var(--color-primary);
    border-radius: var(--radius);
    padding: 8px 10px 10px;
}
.form-row-highlight label {
    color: var(--color-primary);
    font-weight: 700;
}

/* Sichtbarkeits-Badge (öffentlich/privat) auf Rezeptkarten und -detailseite,
   siehe canViewRecipe()/canEditRecipe() in functions.php. */
.visibility-badge {
    display: inline-block;
    background: var(--color-muted);
    color: #fff;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: normal;
    vertical-align: middle;
    margin-left: 4px;
}

.card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 20px;
}

.recipe-hero {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 24px;
    margin-bottom: 24px;
}
.recipe-hero img {
    width: 100%;
    border-radius: var(--radius);
    object-fit: cover;
    aspect-ratio: 4/3;
}
@media (max-width: 700px) {
    .recipe-hero { grid-template-columns: 1fr; }
}

.meta-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin: 10px 0;
    font-size: 0.92rem;
    color: var(--color-muted);
}
.meta-list strong { color: var(--color-text); }

table.ingredients {
    width: 100%;
    border-collapse: collapse;
}
table.ingredients td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--color-border);
}
table.ingredients td.amount {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    width: 1%;
}

.scale-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.scale-row label {
    font-weight: 600;
    font-size: 0.9rem;
    margin: 0;
}
.scale-row input[type="number"] {
    width: 110px;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

#density-row {
    align-items: center;
    gap: 10px;
}
#density-row input[type="number"] {
    width: 130px;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}
#density-hint {
    flex-basis: 100%;
    margin: 4px 0 0;
}

.step {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--color-border);
}
.step:last-child { border-bottom: none; }
.step .step-num {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}
.step img {
    max-width: 260px;
    width: 100%;
    border-radius: var(--radius);
    margin-top: 8px;
    display: block;
}

form .form-row {
    margin-bottom: 16px;
}
form label {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 0.9rem;
}
form input[type="text"],
form input[type="number"],
form input[type="email"],
form input[type="password"],
form textarea,
form select {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.95rem;
    font-family: inherit;
}
form textarea { resize: vertical; min-height: 70px; }
form input[type="file"] {
    width: 100%;
    font-size: 0.9rem;
    color: var(--color-text);
}
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
}

.dynamic-row {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 14px;
    margin-bottom: 12px;
    background: var(--color-row-bg);
    position: relative;
}
.dynamic-row .remove-row {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    color: #a3231a;
    cursor: pointer;
    font-size: 0.85rem;
}
.ingredient-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 2fr auto;
    gap: 8px;
    align-items: center;
}
@media (max-width: 700px) {
    .ingredient-row { grid-template-columns: 1fr; }
}

.existing-photo-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0;
    font-size: 0.85rem;
    color: var(--color-muted);
}
.existing-photo-preview img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 6px;
}

.flash {
    padding: 12px 16px;
    border-radius: var(--radius);
    margin-bottom: 16px;
}
.flash.error { background: var(--flash-error-bg); color: var(--flash-error-text); border: 1px solid var(--flash-error-border); }
.flash.success { background: var(--flash-success-bg); color: var(--flash-success-text); border: 1px solid var(--flash-success-border); }

.actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.empty-state {
    text-align: center;
    color: var(--color-muted);
    padding: 60px 20px;
}

.btn.small {
    padding: 5px 10px;
    font-size: 0.82rem;
}

table.manage-ingredients {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
}
table.manage-ingredients th {
    text-align: left;
    font-size: 0.82rem;
    color: var(--color-muted);
    padding: 6px 8px;
    border-bottom: 2px solid var(--color-border);
}
table.manage-ingredients td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}
table.manage-ingredients input[type="text"],
table.manage-ingredients select {
    width: 100%;
}

/* Status-Auswahl in der Nutzerverwaltung (users_manage.php): farblich nach
   Konto-Status eingefärbt (gelb/grün/rot), damit der aktuelle Status auch
   bei geschlossenem Dropdown auf einen Blick erkennbar ist – nicht an
   Akzentfarbe/Modus gekoppelt, siehe canViewRecipe()-Kommentar weiter oben
   zu --color-secondary/--color-danger für dasselbe Prinzip ("Bedeutung
   bleibt unabhängig vom gewählten Farbschema erkennbar"). Klassen werden
   serverseitig beim Rendern gesetzt und per kleinem Inline-Script beim
   Ändern der Auswahl aktualisiert (siehe users_manage.php). */
.status-select {
    font-weight: 600;
    border-width: 1px;
    border-style: solid;
    border-radius: 6px;
    padding: 4px 6px;
}
.status-select.status-pending {
    background: var(--flash-warning-bg);
    color: var(--flash-warning-text);
    border-color: var(--flash-warning-border);
}
.status-select.status-active {
    background: var(--flash-success-bg);
    color: var(--flash-success-text);
    border-color: var(--flash-success-border);
}
.status-select.status-disabled {
    background: var(--flash-error-bg);
    color: var(--flash-error-text);
    border-color: var(--flash-error-border);
}

/* Nutzerverwaltung (users_manage.php) - Layout an die EtikettenDB-Vorlage
   angeglichen (siehe Layout-Standard-Dokument im Projekt
   "Vereinheitlichung", Runde 3): feste 3-Spalten-Formulargrafik statt
   auto-fit, rechtsbündige Aktionsleiste mit Trennlinie (statt links-
   bündigem "Anlegen"-Button), einheitliche Zellenabstände/Kopfzeilen-Stil
   für "Alle Konten" und "Passwort zurücksetzen/Löschen" (bisher zwei
   leicht unterschiedlich breite Tabellen). Eigene .um-*-Klassen statt
   Wiederverwendung von .form-grid/.actions, damit andere Formulare der App
   (Rezept-Formular, Zutaten-/Einheiten-Verwaltung) unverändert bleiben.
   .um-hint/.um-muted ersetzen das auf dieser Seite bisher ungestylt
   gebliebene ".meta" (dessen Farbregel nur innerhalb .recipe-card/
   .settings-card griff, hier also gar nicht - Text erschien dadurch in
   normaler statt gedämpfter Farbe). */
.um-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem 1.5rem;
}
@media (max-width: 700px) {
    .um-grid { grid-template-columns: 1fr; }
}
.um-grid .form-row { margin-bottom: 0; }
.um-hint { display: block; font-size: 0.75rem; color: var(--color-muted); margin-top: 4px; }
.um-actions {
    display: flex;
    gap: 0.6rem;
    justify-content: flex-end;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}
.um-table-wrap { overflow-x: auto; }
table.um-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
table.um-table th {
    text-align: left;
    padding: 0.65rem 0.8rem;
    background: var(--color-row-bg);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-muted);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
table.um-table td { padding: 0.5rem 0.8rem; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
table.um-table tbody tr:hover { background: var(--color-row-bg); }
table.um-table tbody tr:last-child td { border-bottom: none; }
table.um-table input[type="text"] { width: 100%; }
table.um-table select { min-width: 90px; }
.um-muted { color: var(--color-muted); white-space: nowrap; }

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 18px;
}
.settings-card {
    display: block;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 20px;
    text-decoration: none;
    color: var(--color-text);
}
a.settings-card:hover { border-color: var(--color-primary); }
.settings-card h3 { margin: 0 0 6px; }
.settings-card p.meta { margin: 0; }
.settings-card.disabled {
    opacity: 0.55;
    cursor: default;
}

.theme-toggle {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.theme-toggle button {
    padding: 8px 14px;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text);
    cursor: pointer;
    font-size: 0.9rem;
    font-family: inherit;
}
.theme-toggle button:hover { border-color: var(--color-primary); }
.theme-toggle button.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.photo-upload-options {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.photo-upload-options > div {
    flex: 1 1 220px;
}
.photo-upload-label {
    display: block;
    font-size: 0.8rem;
    color: var(--color-muted);
    margin-bottom: 4px;
}

/*
 * Login-Statuszeile (siehe authBarHtml() in auth.php), direkt unter
 * header.site-header auf jeder Seite eingebunden. Bewusst als eigene,
 * schmale Zeile statt als drittes Element im Header selbst – so muss der
 * bestehende Header (Logo/Titel + Rückweg-Link/Aktionen je Seite
 * unterschiedlich) nicht umgebaut werden.
 */
.auth-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    padding: 6px 24px;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    font-size: 0.82rem;
    color: var(--color-muted);
}
.auth-bar a {
    color: var(--color-muted);
    text-decoration: none;
}
.auth-bar a:hover { color: var(--color-primary); }
.auth-bar .role-badge {
    display: inline-block;
    background: var(--color-primary);
    color: #fff;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    margin-left: 4px;
}

/* Login/Registrieren: schmale, zentrierte Karte statt der vollen Breite. */
.auth-main {
    max-width: 420px;
    margin: 60px auto;
    padding: 0 24px;
}
.auth-card h2 { margin-top: 0; }

/*
 * Ausdrucke (z. B. über Strg+P direkt aus einer normalen Seite statt über
 * recipe_print.php/shopping_list_print.php – die haben ohnehin ihr eigenes,
 * schlankes Print-Layout ohne dieses Stylesheet) immer hell und
 * tintensparend, unabhängig vom am Bildschirm gewählten Farbschema. Steht
 * bewusst ganz am Ende der Datei, damit es die Dunkel-Varianten oben
 * überschreibt.
 */
@media print {
    /*
     * !important hier bewusst: seit es neben [data-theme="dark"] auch noch
     * [data-theme="pastel"] und [data-accent="…"] gibt, hätte eine normale
     * ":root { … }"-Regel eine NIEDRIGERE Spezifität als diese
     * Attribut-Selektoren und würde sie beim Drucken trotz späterer
     * Position im Stylesheet nicht zuverlässig überschreiben (CSS-Kaskade
     * geht nach Spezifität vor Reihenfolge). !important erzwingt hier
     * zuverlässig Hell, unabhängig vom aktuell gewählten Schema.
     */
    :root {
        --color-primary: #0102fb !important;
        --color-primary-dark: #0002c2 !important;
        --color-secondary: #00b341 !important;
        --color-secondary-dark: #008a32 !important;
        --color-danger: #e4372a !important;
        --color-danger-dark: #b82a20 !important;
        --color-bg: #ffffff !important;
        --color-card: #ffffff !important;
        --color-header-bg: #ffffff !important;
        --color-border: #cccccc !important;
        --color-text: #000000 !important;
        --color-muted: #444444 !important;
        --color-row-bg: #ffffff !important;
        --color-thumb-bg: #eeeeee !important;
        --flash-error-bg: #fdeceb !important;
        --flash-error-text: #a3271b !important;
        --flash-error-border: #f6bdb6 !important;
        --flash-success-bg: #e6f7ec !important;
        --flash-success-text: #0a6b2c !important;
        --flash-success-border: #b7e9c6 !important;
        --flash-warning-bg: #fdf3d0 !important;
        --flash-warning-text: #92700a !important;
        --flash-warning-border: #f0dfa0 !important;
    }
}