:root {
    --farbe-akzent: #b5522f;
    --farbe-text: #232323;
    --farbe-hintergrund: #faf8f5;
    --farbe-warnung: #b26a00;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--farbe-text);
    background: var(--farbe-hintergrund);
}

header {
    position: relative;
    padding: 0.6rem 2rem;
    background: var(--farbe-akzent);
    color: white;
}

header h1 {
    margin: 0 0 0.25rem 0;
    font-size: 1.3rem;
}

main {
    padding: 2rem;
    max-width: 800px;
    margin: 0 auto;
}

button {
    background: var(--farbe-akzent);
    color: white;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
}

button:hover {
    opacity: 0.9;
}

.sticky-header {
    position: sticky;
    top: 0;
    z-index: 11;
    background: var(--farbe-hintergrund);
    margin: 0 -2rem 1rem;
    padding: 0 2rem;
}

.search-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 0.5rem;
    column-gap: 1.25rem;
    padding: 0.5rem 0;
}

.search-bar .search-input-wrap {
    position: relative;
    flex: 1 1 200px;
}

.search-filters {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 0.6rem;
    white-space: nowrap;
    padding-left: 1.25rem;
    border-left: 1px solid #ddd6cc;
}

.search-filters-label {
    color: #888;
    font-size: 0.85rem;
    margin-right: 0.15rem;
}

.search-filters label {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--farbe-akzent);
    color: var(--farbe-akzent);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    background: white;
    transition: background 0.15s ease, color 0.15s ease;
}

.search-filters label:hover {
    background: #f0ece5;
}

.search-filters label:has(input[type="checkbox"]:checked) {
    background: var(--farbe-akzent);
    color: white;
}

.search-filters input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

@media (max-width: 620px) {
    .search-bar {
        flex-direction: column;
        align-items: stretch;
        padding-top: 0.6rem;
        padding-bottom: 0.6rem;
    }

    .search-bar .search-input-wrap {
        flex: none;
    }

    .search-filters {
        justify-content: flex-start;
        padding-left: 0;
        padding-top: 0.5rem;
        border-left: none;
        border-top: 1px solid #ddd6cc;
    }
}

input[type="search"] {
    width: 100%;
    padding: 0.6rem 2.2rem 0.6rem 0.8rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
}

/* Chrome/Safari draw their own built-in clear icon inside type="search"
   fields, Firefox draws none at all - hide the native one so only our
   consistent custom button (below) ever shows. */
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    display: none;
}

/* Firefox renders no built-in clear icon for type="search" fields
   (unlike Chrome/Safari), so this custom button fills the gap - shown
   by JS whenever the field has a value, in every browser alike. */
.search-clear-button {
    position: absolute;
    top: 50%;
    right: 0.35rem;
    transform: translateY(-50%);
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #888;
    border: none;
    border-radius: 50%;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

.search-clear-button[hidden] {
    display: none;
}

.search-clear-button:hover {
    background: #e5e0da;
    color: var(--farbe-text);
}

.recipe-count-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.4rem 0 0.75rem;
    border-bottom: 1px solid #e5e0da;
}

#recipe-count {
    margin: 0;
    color: #777;
    font-size: 0.9rem;
}

.list-view-toggle {
    flex: 0 0 auto;
    display: flex;
    gap: 0.15rem;
}

.list-view-toggle-button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 6px;
    padding: 0.35rem 0.5rem;
    color: #6b6b6b;
    cursor: pointer;
}

.list-view-toggle-button svg {
    fill: currentColor;
}

.list-view-toggle-button:hover {
    background: #f0ece5;
}

.list-view-toggle-button[aria-pressed="true"] {
    color: var(--farbe-akzent);
    background: #f0ece5;
}

#recipe-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

#recipe-list li {
    border-bottom: 1px solid #e5e0da;
}

#recipe-list li a.recipe-title-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.25rem;
    color: var(--farbe-text);
    text-decoration: none;
    border-radius: 6px;
}

#recipe-list li a.recipe-title-link:hover {
    color: var(--farbe-akzent);
    background: #f0ece5;
}

#recipe-list li.recipe-list-empty {
    padding: 0.5rem 0;
    color: #777;
    border-bottom: none;
}

/* Thumbnail/tile previews and tags are always in the markup (see
   recipes.html) but stay hidden - and thanks to loading="lazy", unfetched
   - until the list is switched into the view that uses them
   (#recipe-list.list-view-thumbnails / .list-view-tiles, toggled by
   web/static/js/list-view.js). A display:none ancestor keeps a
   lazy-loaded <img> from being fetched at all, so the simple view never
   triggers preview generation or downloads, and each preview view only
   ever fetches its own images. */
.recipe-thumbnail-wrap {
    display: none;
    flex: 0 0 auto;
}

.recipe-thumbnail {
    display: block;
    width: 3.6rem;
    height: 3.6rem;
    object-fit: cover;
    border-radius: 6px;
}

.recipe-thumbnail-empty {
    background: #e5e0da;
}

.recipe-tile-wrap {
    display: none;
}

.recipe-tile-image {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.recipe-tile-image-empty {
    background: #e5e0da;
}

.recipe-title-body {
    flex: 1;
    min-width: 0;
}

.recipe-item-tags {
    display: none;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.3rem;
}

.recipe-item-tag {
    font-size: 0.75rem;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background: #f0ece5;
    color: #6b6b6b;
}

#recipe-list.list-view-thumbnails .recipe-thumbnail-wrap {
    display: block;
}

#recipe-list.list-view-thumbnails .recipe-item-tags,
#recipe-list.list-view-tiles .recipe-item-tags {
    display: flex;
}

/* Grid-tile view: #recipe-list becomes a responsive card grid (auto-fill
   keeps up to ~4 columns at the app's 800px content width, per the
   design brief, and fewer on narrower viewports without a hardcoded
   breakpoint). Each <li> becomes a card - the tile image sits flush at
   the top (li's overflow:hidden clips its square corners to the card's
   border-radius), title/tags get their own padded block below, and the
   edit/delete/pdf-export buttons (unchanged markup, siblings of the
   title link) wrap onto their own row under it via flex-wrap, since the
   title link is forced to flex-basis:100%. Only the first 3 tags show,
   to keep card height predictable regardless of how many tags a recipe
   has - the full list is still shown in the thumbnail list view. */
#recipe-list.list-view-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 1rem;
}

#recipe-list.list-view-tiles li {
    flex-wrap: wrap;
    align-items: stretch;
    border: 1px solid #e5e0da;
    border-radius: 8px;
    padding: 0 0.4rem 0.4rem;
    overflow: hidden;
}

#recipe-list.list-view-tiles li a.recipe-title-link {
    flex: 1 1 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    margin: 0 -0.4rem;
    border-radius: 0;
}

#recipe-list.list-view-tiles li a.recipe-title-link:hover {
    background: none;
}

#recipe-list.list-view-tiles .recipe-tile-wrap {
    display: block;
}

#recipe-list.list-view-tiles .recipe-title-body {
    padding: 0.5rem 0.65rem 0.35rem;
}

#recipe-list.list-view-tiles .recipe-title-text {
    display: block;
    font-weight: 600;
}

#recipe-list.list-view-tiles .recipe-item-tag:nth-child(n+4) {
    display: none;
}

.site-title {
    margin: 0 0 0.5rem 0;
}

.site-title a {
    color: white;
    text-decoration: none;
    font-weight: 600;
    opacity: 0.9;
}

.site-title a:hover {
    opacity: 1;
}

header.compact-header .site-title {
    margin: 0 0 0.15rem 0;
    font-size: 0.8rem;
}

header.compact-header h1 {
    margin: 0;
    font-size: 1.8rem;
    text-align: center;
}

.recipe-tags {
    margin: 0.35rem 0 0 0;
    font-size: 0.85rem;
    opacity: 0.85;
    text-align: center;
}

main.detail-main {
    max-width: 1100px;
}

.back-button {
    display: inline-block;
    background: none;
    border: 1px solid var(--farbe-akzent);
    color: var(--farbe-akzent);
    padding: 0.6rem 1.2rem;
    border-radius: 6px;
    font-size: 1rem;
    text-decoration: none;
    cursor: pointer;
}

.back-button:hover {
    background: var(--farbe-akzent);
    color: white;
    opacity: 1;
}

.detail-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.detail-actions {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

.recipe-tags-edit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 0.5rem 0 0;
}

.recipe-tags-edit .tag-add-form {
    margin: 0;
}

.recipe-tags-edit .tag-add-form input {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: white;
    border-radius: 999px;
    padding: 0.3rem 0.8rem;
    font-size: 0.85rem;
    width: 8rem;
}

.recipe-tags-edit .tag-add-form input::placeholder {
    color: rgba(255, 255, 255, 0.75);
}

.tag-combobox {
    position: relative;
    display: inline-block;
}

.tag-suggestions {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    z-index: 20;
    min-width: 100%;
    max-height: 14rem;
    overflow-y: auto;
    margin: 0;
    padding: 0.25rem 0;
    list-style: none;
    background: var(--farbe-hintergrund);
    color: var(--farbe-text);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    text-align: left;
    white-space: nowrap;
}

.tag-suggestion {
    padding: 0.35rem 0.8rem;
    cursor: pointer;
    font-size: 0.85rem;
}

.tag-suggestion.active,
.tag-suggestion:hover {
    background: var(--farbe-akzent);
    color: white;
}

.tag-suggestion-new {
    font-style: italic;
    opacity: 0.85;
}

.tag-suggestion-new.active,
.tag-suggestion-new:hover {
    opacity: 1;
}

.tag-suggestion-hint {
    padding: 0.35rem 0.8rem;
    font-size: 0.8rem;
    font-style: italic;
    opacity: 0.6;
    cursor: default;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.recipe-detail {
    display: grid;
    grid-template-columns: minmax(220px, 320px) 1fr;
    gap: 2rem;
    align-items: start;
}

@media (max-width: 700px) {
    .recipe-detail {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 701px) {
    .recipe-ingredients,
    .recipe-instructions {
        position: sticky;
        top: 1rem;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
        scrollbar-gutter: stable;
    }
}

/* scrollbar-gutter: stable computes to zero for Firefox's overlay-style
   thin scrollbar (it takes no layout space of its own), so it draws
   over the content there unless space is reserved by hand. Chrome's
   classic scrollbar already reserves its own space via scrollbar-gutter
   above, so adding this padding unconditionally would double up there -
   @supports on a Gecko-only property scopes the fallback to Firefox. */
@supports (-moz-appearance: none) {
    @media (min-width: 701px) {
        .recipe-ingredients,
        .recipe-instructions {
            padding-right: 0.9rem;
        }
    }
}

.recipe-meta,
.ingredient-group {
    background: white;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.recipe-meta p {
    margin: 0.25rem 0;
}

.servings-scaler {
    margin: 0.25rem 0;
}

.servings-line {
    margin: 0 0 0.4rem;
}

.servings-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.servings-step {
    width: 2rem;
    height: 2rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--farbe-akzent);
    border-radius: 6px;
    background: white;
    color: var(--farbe-akzent);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
}

.servings-step:hover {
    background: var(--farbe-akzent);
    color: white;
}

.servings-input {
    width: 3.5rem;
    height: 2rem;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}

.servings-type-select {
    height: 2rem;
    max-width: 14rem;
    padding: 0 0.35rem;
    border: 1px solid var(--farbe-akzent);
    border-radius: 6px;
    background: white;
    color: var(--farbe-akzent);
    font-size: 0.9rem;
    cursor: pointer;
}

.servings-type-picker {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.4rem;
}

/* The bake-time hint control: an icon + "Hinweis" pill in the warning
   colour so it clearly reads as a button. Hidden until the JS marks the
   picker .has-note for the selected conversion. */
.servings-note-toggle {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.3rem;
    height: 2rem;
    padding: 0 0.6rem 0 0.5rem;
    border: 1px solid var(--farbe-warnung);
    border-radius: 999px;
    background: #fff7ea;
    color: var(--farbe-warnung);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

.servings-type-picker.has-note .servings-note-toggle {
    display: inline-flex;
}

.servings-note-toggle svg {
    flex: 0 0 auto;
}

.servings-note-toggle:hover,
.servings-note-toggle:focus-visible,
.servings-type-picker.note-open .servings-note-toggle {
    background: var(--farbe-warnung);
    color: white;
}

.servings-note-popup {
    display: none;
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    z-index: 20;
    width: max-content;
    max-width: 17rem;
    padding: 0.5rem 0.7rem;
    background: var(--farbe-text);
    color: white;
    border-radius: 6px;
    font-size: 0.85rem;
    line-height: 1.35;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Tap-to-toggle (all devices, and the only path on touch). */
.servings-type-picker.note-open .servings-note-popup {
    display: block;
}

/* Desktop / mouse: reveal on hover or keyboard focus of the button. */
@media (hover: hover) and (pointer: fine) {
    .servings-note-toggle:hover + .servings-note-popup,
    .servings-note-toggle:focus-visible + .servings-note-popup,
    .servings-note-popup:hover {
        display: block;
    }
}

.ingredient-group h3 {
    margin: 0 0 0.3rem;
    color: var(--farbe-akzent);
}

.ingredient-group ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ingredient-group li {
    display: flex;
    gap: 0.75rem;
    padding: 0.2rem 0;
    border-bottom: 1px solid #f0ece5;
}

.ingredient-group li:last-child {
    border-bottom: none;
}

.ingredient-group .amount {
    flex: 0 0 auto;
    min-width: 5.5rem;
    color: #666;
    font-variant-numeric: tabular-nums;
}

.ingredient-group .name {
    flex: 1;
}

.recipe-image {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.recipe-instructions {
    counter-reset: step;
}

.recipe-instructions .step-text {
    counter-increment: step;
    position: relative;
    background: white;
    border-radius: 10px;
    padding: 0.3rem 1.25rem 0.3rem 2.5rem;
    margin: 0 0 0.4rem 0;
    line-height: 1.6;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.recipe-instructions .step-text::before {
    content: counter(step) ".";
    position: absolute;
    left: 0.9rem;
    font-weight: 600;
    color: var(--farbe-akzent);
}

.recipe-instructions .step-heading {
    background: white;
    border-radius: 10px;
    padding: 0.3rem 1.25rem;
    margin: 0 0 0.4rem 0;
    line-height: 1.6;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.recipe-instructions .step-divider {
    border: none;
    border-top: 2px solid var(--farbe-akzent);
    margin: 0.8rem 0;
}

.auth-nav {
    position: absolute;
    top: 0.6rem;
    right: 2rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.auth-nav form {
    margin: 0;
}

.auth-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.6);
    background: none;
    color: white;
    text-decoration: none;
}

.auth-icon-button:hover {
    background: rgba(255, 255, 255, 0.15);
    opacity: 1;
}

.auth-icon-button svg {
    fill: currentColor;
}

.auth-button {
    display: inline-block;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: white;
    padding: 0.35rem 0.9rem;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: none;
}

.auth-button:hover {
    background: rgba(255, 255, 255, 0.15);
    opacity: 1;
}

.management-menu {
    position: relative;
    display: inline-flex;
}

.management-menu-toggle[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.25);
}

.management-menu-popup {
    display: none;
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    z-index: 20;
    min-width: 10rem;
    flex-direction: column;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.management-menu.menu-open .management-menu-popup {
    display: flex;
}

.management-menu-item {
    display: block;
    width: 100%;
    background: none;
    border: none;
    border-radius: 0;
    color: var(--farbe-text);
    padding: 0.6rem 1rem;
    font: inherit;
    font-size: 0.9rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.management-menu-item:hover {
    background: var(--farbe-hintergrund);
    opacity: 1;
}

#recipe-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

#recipe-list li a.recipe-title-link {
    flex: 1;
    min-width: 0;
}

.delete-button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    color: #c0392b;
    cursor: pointer;
}

.delete-button svg {
    fill: currentColor;
}

.delete-button:hover {
    color: #96281b;
    background: #fbe4e1;
}

dialog#delete-dialog,
dialog#unit-delete-dialog {
    border: none;
    border-radius: 10px;
    padding: 1.5rem;
    max-width: 420px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

dialog#delete-dialog::backdrop,
dialog#unit-delete-dialog::backdrop {
    background: rgba(0, 0, 0, 0.4);
}

dialog#delete-dialog input[type="text"] {
    width: 100%;
    padding: 0.5rem 0.7rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
    margin: 0.5rem 0 1rem;
}

.dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.dialog-actions button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.dialog-cancel-button {
    background: #6b6b6b;
    color: white;
}

.dialog-cancel-button:hover {
    background: #545454;
    opacity: 1;
}

.delete-keyword {
    font-weight: 700;
    color: #c0392b;
    background: #fbe4e1;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
}

.login-main {
    max-width: 360px;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.login-form label {
    font-weight: 600;
}

.login-form input[type="password"] {
    padding: 0.6rem 0.8rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.login-error {
    color: #b3261e;
    margin: 0 0 0.5rem 0;
}

.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.new-recipe-button {
    flex: 0 0 auto;
    display: inline-block;
    background: var(--farbe-akzent);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
}

.new-recipe-button:hover {
    opacity: 0.9;
}

.section-heading-buttons {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

dialog#export-dialog {
    border: none;
    border-radius: 10px;
    padding: 1.5rem;
    max-width: 420px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

dialog#export-dialog::backdrop {
    background: rgba(0, 0, 0, 0.4);
}

.export-overlay[hidden] {
    display: none;
}

.export-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    z-index: 20;
}

.export-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: export-spin 0.8s linear infinite;
}

@keyframes export-spin {
    to {
        transform: rotate(360deg);
    }
}

.pdf-export-button {
    flex: 0 0 auto;
    background: #2f6690;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 500;
    font-size: 1rem;
    cursor: pointer;
}

.pdf-export-button:hover {
    opacity: 0.9;
}

.pdf-export-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pdf-export-toggle-button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    color: #6b6b6b;
    cursor: pointer;
}

.pdf-export-toggle-button svg {
    fill: currentColor;
}

.pdf-export-toggle-button:hover {
    background: #f0ece5;
}

.pdf-export-toggle-button.active {
    color: #1c4a68;
    background: #d7e6f0;
}

.pdf-export-toggle-button.active:hover {
    background: #c3dae8;
}

dialog#pdf-export-dialog,
dialog#pdf-export-progress-dialog,
dialog#pdf-export-discard-dialog {
    border: none;
    border-radius: 10px;
    padding: 1.5rem;
    max-width: 420px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

dialog#pdf-export-dialog::backdrop,
dialog#pdf-export-progress-dialog::backdrop,
dialog#pdf-export-discard-dialog::backdrop {
    background: rgba(0, 0, 0, 0.4);
}

dialog#pdf-export-progress-dialog[open] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
}

dialog#pdf-export-progress-dialog .export-spinner {
    border-color: rgba(0, 0, 0, 0.15);
    border-top-color: var(--farbe-akzent);
}

#pdf-export-dialog-list {
    max-height: 14rem;
    overflow-y: auto;
    margin: 0.5rem 0 1rem;
    padding-left: 0;
    list-style: none;
}

.pdf-export-dialog-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid #eee;
}

.pdf-export-dialog-item:last-child {
    border-bottom: none;
}

.pdf-export-dialog-item-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cover-export-button {
    flex: 0 0 auto;
    background: #7d5ba6;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 500;
    font-size: 1rem;
    cursor: pointer;
}

.cover-export-button:hover {
    opacity: 0.9;
}

.import-button {
    flex: 0 0 auto;
    display: inline-block;
    background: #1f8f8f;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
}

.import-button:hover {
    opacity: 0.9;
}

dialog#cover-export-dialog {
    border: none;
    border-radius: 10px;
    padding: 1.5rem;
    max-width: 420px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

dialog#cover-export-dialog::backdrop {
    background: rgba(0, 0, 0, 0.4);
}

dialog#cover-export-dialog input[type="text"] {
    width: 100%;
    padding: 0.5rem 0.7rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
    margin: 0.5rem 0 1rem;
}

.toast-container {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 30;
}

.toast {
    background: #323232;
    color: white;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    font-size: 0.95rem;
    max-width: 320px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.toast.toast-visible {
    opacity: 1;
    transform: translateY(0);
}

.toast.toast-error {
    background: #96281b;
}

.edit-button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    color: var(--farbe-akzent);
    text-decoration: none;
}

.edit-button svg {
    fill: currentColor;
}

.edit-button:hover {
    background: #f0ece5;
}

/* Recipe edit/create form */

.recipe-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 700px;
    margin: 0 auto;
}

.form-error {
    background: #fbe4e1;
    color: #96281b;
    border: 1px solid #f0c4bd;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-weight: 500;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.form-row .form-section {
    /* Grow to share the row evenly, but wrap to their own line once
       there's no room for the basis width — keeps the three fields
       (Menge / Mengentyp / Kalorien) readable on narrow screens. */
    flex: 1 1 11rem;
}

.form-section {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.form-section label {
    font-weight: 600;
}

.form-section > input[type="text"],
.form-section > input[type="number"],
.form-section > select {
    /* Explicit height (with the global box-sizing: border-box) so a
       native <select> — which otherwise derives its own height from UA
       metrics — ends up pixel-identical to the text inputs next to it,
       not just close. 2.55rem ≈ an input's natural height (1rem line +
       0.6rem*2 padding + 2px border). */
    height: 2.55rem;
    padding: 0 0.8rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
}

.form-section > select {
    font-family: inherit;
    background: #fff;
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    background: white;
    border: 1px solid var(--farbe-akzent);
    color: var(--farbe-akzent);
    border-radius: 999px;
    padding: 0.3rem 0.4rem 0.3rem 0.9rem;
    font-size: 0.9rem;
}

.tag-chip button {
    background: none;
    color: inherit;
    border: none;
    padding: 0 0.3rem;
    font-size: 1rem;
    line-height: 1;
}

.recipe-form .tag-combobox {
    display: block;
}

.recipe-form .tag-combobox input {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
}

.group-card {
    background: white;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.group-card-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.group-card-header input {
    flex: 1;
    padding: 0.5rem 0.7rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
}

.ingredient-edit-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.step-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

/* Grid instead of flex so the name column and the unit column line up
   vertically across rows regardless of which amount-kind fields the
   (variable-width) second column happens to hold — a plain flex row
   can't do that, since each row's field widths are independent of its
   neighbors'. Falls back to the pre-existing wrapped flex layout below
   700px (see media query at the bottom of this file), where a rigid
   column grid would just overflow instead of helping readability. */
.ingredient-row {
    display: grid;
    grid-template-columns: 6rem 12rem 6.5rem 1fr auto auto;
    align-items: center;
    gap: 0.5rem;
}

.ingredient-row input,
.ingredient-row select {
    padding: 0.5rem 0.7rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
}

.ingredient-amount-kind {
    width: 100%;
}

.ingredient-amount-fields {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.ingredient-amount-value,
.ingredient-amount-min,
.ingredient-amount-max {
    flex: 0 0 4rem;
    width: 4rem;
}

.ingredient-amount-unit {
    width: 100%;
}

/* Per-row unit and ingredient-name autocomplete. The dropdown reuses the
   tag-suggestion look; the combobox is a block so the input keeps filling
   its grid column, and positioned so the list can overlay following rows. */
.unit-combobox,
.ingredient-name-combobox {
    position: relative;
    display: block;
}

/* The "Text" amount combobox sits inside the flex .ingredient-amount-fields
   rather than its own grid cell, so it also has to be told to fill the
   available width. */
.ingredient-amount-text-combobox {
    position: relative;
    flex: 1;
    min-width: 0;
}

.unit-suggestions,
.ingredient-name-suggestions,
.ingredient-amount-text-suggestions {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    z-index: 20;
    min-width: 100%;
    max-height: 14rem;
    overflow-y: auto;
    margin: 0;
    padding: 0.25rem 0;
    list-style: none;
    background: var(--farbe-hintergrund);
    color: var(--farbe-text);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    text-align: left;
    white-space: nowrap;
}

.unit-suggestion,
.ingredient-name-suggestion,
.ingredient-amount-text-suggestion {
    padding: 0.35rem 0.8rem;
    cursor: pointer;
    font-size: 0.85rem;
}

.unit-suggestion.active,
.unit-suggestion:hover,
.ingredient-name-suggestion.active,
.ingredient-name-suggestion:hover,
.ingredient-amount-text-suggestion.active,
.ingredient-amount-text-suggestion:hover {
    background: var(--farbe-akzent);
    color: white;
}

.unit-suggestion-new {
    font-style: italic;
    opacity: 0.85;
}

.unit-suggestion-new.active,
.unit-suggestion-new:hover {
    opacity: 1;
}

.unit-suggestion-hint,
.ingredient-name-suggestion-hint,
.ingredient-amount-text-suggestion-hint {
    padding: 0.35rem 0.8rem;
    font-size: 0.8rem;
    font-style: italic;
    opacity: 0.6;
    cursor: default;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.ingredient-amount-text {
    width: 100%;
}

.ingredient-amount-range-sep {
    color: #888;
}

.ingredient-amount-approx {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.9rem;
    color: #555;
    white-space: nowrap;
}

.ingredient-name {
    width: 100%;
}

/* Below this width the fixed grid columns would force horizontal
   scrolling instead of helping readability — fall back to the
   pre-existing wrapped flex layout, where each field just gets a
   sensible flex-basis instead of a strict shared column. */
@media (max-width: 700px) {
    .ingredient-row {
        display: flex;
        flex-wrap: wrap;
    }

    .ingredient-amount-kind {
        flex: 0 0 6rem;
        width: auto;
    }

    .ingredient-amount-unit,
    .ingredient-amount-text-combobox {
        flex: 0 0 8rem;
        width: 8rem;
    }

    .ingredient-name-combobox {
        flex: 1;
        min-width: 8rem;
    }

    .ingredient-name {
        flex: 1;
        min-width: 8rem;
        width: auto;
    }
}

.step-row textarea {
    flex: 1;
    padding: 0.5rem 0.7rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
    font-family: inherit;
    resize: vertical;
    overflow-y: auto;
}

.step-add-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.step-row-heading-label {
    flex: 0 0 auto;
    font-weight: 600;
    color: #555;
}

.step-row input[type="text"].step-heading-input {
    flex: 1;
    padding: 0.5rem 0.7rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
    font-family: inherit;
}

.step-row-divider-preview {
    flex: 1;
    border: none;
    border-top: 2px solid var(--farbe-akzent);
    margin: 0;
}

.move-buttons {
    display: flex;
    gap: 0.2rem;
    flex: 0 0 auto;
}

.move-buttons button {
    background: none;
    border: 1px solid #ccc;
    color: var(--farbe-text);
    padding: 0.3rem 0.5rem;
    font-size: 0.9rem;
}

.move-buttons button:hover:not(:disabled) {
    background: #f0ece5;
}

.remove-button {
    flex: 0 0 auto;
    background: none;
    color: #c0392b;
    border: 1px solid #f0c4bd;
    padding: 0.3rem 0.6rem;
}

.remove-button:hover {
    background: #fbe4e1;
}

.image-preview-wrap img {
    display: block;
    max-width: 100%;
    max-height: 320px;
    border-radius: 10px;
    margin-bottom: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.form-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

.save-button {
    font-weight: 600;
}

.discard-button {
    display: inline-flex;
    align-items: center;
    background: none;
    border: 1px solid var(--farbe-akzent);
    color: var(--farbe-akzent);
    padding: 0.6rem 1.2rem;
    border-radius: 6px;
    text-decoration: none;
}

.discard-button:hover {
    background: var(--farbe-akzent);
    color: white;
}

/* Einheiten-Verwaltung (/units) — single column; the recipes of a
   selected unit expand inline right under its row (accordion). */
.units-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.unit-row {
    background: white;
    border-radius: 8px;
    padding: 0.6rem 0.9rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.unit-row-main {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}

.unit-name {
    background: none;
    border: none;
    padding: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--farbe-akzent);
    cursor: pointer;
    text-align: left;
}

.unit-name:hover {
    text-decoration: underline;
}

.unit-usage {
    font-size: 0.85rem;
    color: #666;
}

.unit-flag {
    font-size: 0.75rem;
    background: #fbe9c6;
    color: #8a5a12;
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
}

.unit-row-actions {
    margin-left: auto;
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

/* Outlined secondary look — the global filled-accent button rule would
   otherwise render these white-on-white on the row card. */
.unit-row-actions button {
    background: white;
    border: 1px solid var(--farbe-akzent);
    color: var(--farbe-akzent);
    border-radius: 6px;
    padding: 0.35rem 0.8rem;
    font-size: 0.8rem;
    cursor: pointer;
}

.unit-row-actions button:hover {
    background: var(--farbe-akzent);
    color: white;
}

.unit-row-actions button[type="submit"] {
    background: var(--farbe-akzent);
    color: white;
}

.unit-row-actions .unit-delete {
    border-color: #c0392b;
    color: #c0392b;
}

.unit-row-actions .unit-delete:hover {
    background: #c0392b;
    color: white;
}

.unit-row-edit {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem 0.75rem;
    width: 100%;
}

.unit-row-edit label {
    display: flex;
    flex-direction: column;
    font-size: 0.75rem;
    color: #666;
    gap: 0.2rem;
}

.unit-row-edit input {
    padding: 0.4rem 0.6rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 0.95rem;
}

/* Inline recipe list under a selected unit. :empty (not yet loaded, or
   collapsed by units-admin.js) simply takes no space. */
.unit-recipes-inline:empty {
    display: none;
}

.unit-recipes-inline {
    margin-top: 0.6rem;
    padding: 0.55rem 0.2rem 0.15rem 0.7rem;
    border-left: 3px solid var(--farbe-akzent);
}

.unit-recipes-list {
    margin: 0;
    padding-left: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.unit-recipes-hint {
    font-size: 0.85rem;
    color: #777;
    margin: 0.2rem 0 0;
}