/* ==========================================================================================
   Design tokens (CLAUDE.md "Design system"; values and sources: docs/design-tokens.md).
   Templates and CSS use these by name, never literal sizes, weights or colours. theme.css loads
   after this file, so the theme variables are overridden with html:root / html .x (one level
   more specific) below the tokens.
   ========================================================================================== */

/* Figtree, self-hosted (static/fonts, SIL OFL: OFL-figtree.txt): 400/500/600/700 only, no other weights */
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("../fonts/figtree-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("../fonts/figtree-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 500; font-display: swap;
    src: url("../fonts/figtree-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 500; font-display: swap;
    src: url("../fonts/figtree-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 600; font-display: swap;
    src: url("../fonts/figtree-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 600; font-display: swap;
    src: url("../fonts/figtree-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 700; font-display: swap;
    src: url("../fonts/figtree-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 700; font-display: swap;
    src: url("../fonts/figtree-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
    --font-sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* Type: h1 page title, h2 card title; the home hero is the only exception */
    --fs-hero: 48px;
    --fs-hero-mobile: 32px;  /* the home hero title below sm */
    --fs-h1: 24px;
    --fs-h2: 18px;
    --fs-h3: 15px;
    --fs-card-title: 16px;  /* titles of the home feature cards */
    --fs-body: 14px;
    --fs-secondary: 13px;
    --fs-caption: 12px;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --lh-body: 1.5;
    --lh-title: 1.2;
    /* Colour */
    --color-text: #1e2022;
    --color-text-secondary: #677788;
    --color-text-muted: #8c98a4;
    --color-border: #e7eaf3;
    --color-border-field: #d2d2d7;
    --color-hover: #f8fafd;
    --color-surface: #fff;
    --color-green: #41bf12;
    --color-green-hover: #38a60f;
    --color-green-tint: #e9f5e1;
    --color-green-tint-border: #a6e08a;  /* border on the tint (applied chip) and the label mark's underline */
    --color-neutral-tint: #f1f1ef;  /* the neutral badge's background; tiles of product reminders */
    --color-neutral-text: #4a4a48;  /* text on the neutral tint (neutral badge, the product card's pills) */
    --color-warn-tint: #fff1e0;         /* the warn badge's background; the follow pill's pending state */
    --color-warn-tint-border: #f3d9a4;
    --color-warn-text: #a15c07;
    --color-fibl: #3f6b83;              /* sampled from static/images/fibl-logo.png: FiBL-related elements only */
    --color-fibl-tint: #ecf0f3;         /* the same hue at 10 % on white */
    --color-danger-tint: #fdecec;       /* the danger badge's background; the toast's error disc */
    --color-link: #2b6fd6;
    --color-link-hover: #1f5bb8;
    --color-danger: #b42318;
    /* Shape */
    --border-width: 1px;
    --radius-pill: 999px;
    --radius-card: 12px;
    --radius-input: 10px;
    --radius-badge: 6px;          /* the badge token (owner 2026-10-22) */
    --radius-check: 5px;          /* the checkbox token */
    --badge-padding: 4px 10px;
    --badge-ok-bg: #f5faf1;       --badge-ok-text: #2f7d0c;       --badge-ok-border: #c9e8b8;
    --badge-danger-bg: #fef4f4;   --badge-danger-text: #b42318;   --badge-danger-border: #f3c7c7;
    --badge-neutral-bg: #f7f7f6;  --badge-neutral-text: #4a4a48;  --badge-neutral-border: #e2e2df;
    --badge-warn-bg: #fffaf2;     --badge-warn-text: #a15c07;     --badge-warn-border: #f4dfbf;
    --badge-fibl-bg: #f6f8fa;     --badge-fibl-text: #3f6b83;     --badge-fibl-border: #d9e1e8;
    --badge-fibl-new-bg: #f7f6fe; --badge-fibl-new-text: #3c3489; --badge-fibl-new-border: #dcd9f6;
    --badge-urgent-bg: #c2410c;   --badge-urgent-text: #fff;
    --shadow-float: 0 8px 24px rgba(30, 32, 34, .08);
    --focus-ring: 0 0 0 3px rgba(65, 191, 18, .15);
    --focus-ring-danger: 0 0 0 3px rgba(180, 35, 24, .12);
    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --card-padding: 24px;
    --card-padding-compact: 16px;
    --card-padding-feature: 18px;  /* home cards (product sections, "Mehr als Suche"), owner 2026-10-21 */
    --row-height: 40px;
    --row-height-two-line: 56px;
    --row-padding-x: 12px;
    /* Components */
    --control-height: 44px;
    --control-height-sm: 36px;
    --chip-height: 30px;
    --search-group-height: 56px;  /* home hero search: one pill around select and button */
    --search-group-button: 48px;  /* its green pill, inset 4 px */
    --search-group-inset: 20px;   /* the select's left padding inside the group */
    --maker-card-padding: 14px 12px;  /* home "Beliebte Hersteller" cards */
    --maker-logo-height: 56px;
    --maker-placeholder: 36px;
    --tile-sm: 36px;              /* small icon tile (the news cards) */
    --news-card-padding: 14px 16px;  /* news cards: listing column, product page, home tiles (owner 2026-10-22) */
    --news-card-link-gap: 10px;   /* news cards: text to the link */
    --lh-news: 1.45;              /* news cards: the 13 px text */
    --title-row-gap: 14px;        /* h1 and the follow pill on one line */
    --follow-icon: 16px;          /* the follow pill's bell */
    --follow-height: 40px;        /* the follow pill (owner 2026-10-22: black, 14/500) */
        --icon-button-size: 40px;     /* icon boxes: navbar and page actions (bell, heart, printer, share) */
    --icon-box-row: 32px;         /* icon boxes in rows and on cards */
    --icon-sm: 16px;              /* icons: inline in text and badges ({% icon … 16 %}, zwischenfruechte/icons.py) */
    --icon-md: 20px;              /* icons: table rows and cards */
    --icon-lg: 24px;              /* icons: page actions and the navbar */
    --icon-stroke: 1.75;          /* the one stroke weight of the outline icons (Tabler) */
    --fs-label: 11px;             /* small-caps fact labels (Meine Produkte's product file) */
    --list-row-padding: 14px 16px;  /* inset list rows (Meine Produkte v2, the FiBL changelog after it) */
    --file-gap: 10px;             /* the product file: between its white sections */
    --file-min-height: 480px;     /* the product file's grey card (empty state included) */
    --fs-display-sm: 28px;        /* display-sm: home section titles only (700) */
    --lh-display-sm: 1.15;
    --fs-numeral: 56px;           /* home "So funktioniert's": the step numerals (700, text colour) */
    --lh-relaxed: 1.6;            /* home step and row texts */
    --home-link-gap: 20px;        /* home: rows to "Mehr über Agrinaut →" */
    --home-section-gap: 64px;     /* home: between sections on desktop */
    --home-section-gap-sm: 40px;  /* … on mobile */
    --switch-width: 40px;
    --switch-height: 24px;
    --checkbox-size: 20px;
    --check-gap: 8px;             /* checkbox to its label */
}

/* Theme variables (Front, theme.css) mapped to the tokens */
html:root {
    --bs-font-sans-serif: var(--font-sans);
    --bs-body-font-family: var(--font-sans);
    --bs-body-font-size: var(--fs-body);
    --bs-body-line-height: var(--lh-body);
    --bs-body-color: var(--color-text);
    --bs-body-color-rgb: 30, 32, 34;
    --bs-agrinaut-green: var(--color-green);  /* the theme's #42be11; the logo file keeps its own */
    --bs-primary: var(--color-green);
    --bs-primary-rgb: 65, 191, 18;
    --bs-link-color: var(--color-link);
    --bs-link-color-rgb: 43, 111, 214;
    --bs-link-hover-color: var(--color-link-hover);
    --bs-link-hover-color-rgb: 31, 91, 184;
    --bs-border-color: var(--color-border);
}
/* Buttons: 44 px (small 36): line box 14 px x 1.5 (13 px for small) plus 1 px borders */
html .btn, html .btn-lg, html .btn-group-lg > .btn { --bs-btn-padding-y: calc((var(--control-height) - 21px - 2px) / 2);
    --bs-btn-border-radius: var(--radius-pill); }  /* every theme button a pill, btn-lg too: no 5 px button */
html .btn-sm, html .btn-group-sm > .btn { --bs-btn-padding-y: calc((var(--control-height-sm) - 19.5px - 2px) / 2);
    --bs-btn-border-radius: var(--radius-pill); }
/* Inputs: 10 px radius */
html .form-control, html .form-select { border-radius: var(--radius-input); }
/* Titles: h1 page title 24/700, h2 card title 18/600, line-height 1.2, normal letter-spacing */
html h1, html .h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); line-height: var(--lh-title); letter-spacing: normal; }
html h2, html .h2 { font-size: var(--fs-h2); font-weight: var(--fw-semibold); line-height: var(--lh-title); letter-spacing: normal; }
/* h3: sub-section inside a card, 15/600 */
html h3, html .h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); line-height: var(--lh-title); letter-spacing: normal; }
/* The Agrinaut label mark: a label inside a card (Kurzbeschreibung, Gesamte NPK Werte, Dokumente), 14/600 on a
   3 px underline in the tint border green; any heading level can carry it */
html .card-label { display: inline-block; margin: var(--space-4) 0 var(--space-2); padding-bottom: 2px;
    font-size: var(--fs-body); font-weight: var(--fw-semibold); line-height: var(--lh-title); color: var(--color-text);
    background: linear-gradient(var(--color-green-tint-border), var(--color-green-tint-border)) left bottom / 100% 3px no-repeat; }
/* Icons (owner 2026-10-22; zwischenfruechte/icons.py, docs/design-tokens.md "Icons"): one Tabler sprite through
   {% icon %}; three sizes, the text colour, one stroke weight; never green, never a circle or border around an icon */
.agr-icon { display: inline-block; flex: none; width: var(--icon-sm); height: var(--icon-sm); vertical-align: -0.2em;
    stroke-width: var(--icon-stroke); color: inherit; overflow: visible; }
.agr-icon-20 { width: var(--icon-md); height: var(--icon-md); }
.agr-icon-24 { width: var(--icon-lg); height: var(--icon-lg); }
.icon-spin { animation: agr-icon-spin 1s linear infinite; }
@keyframes agr-icon-spin { to { transform: rotate(360deg); } }
/* Pill buttons, the one pill (design system): primary = green 44 px, small 36 px; secondary = black */
.btn-pill { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); flex: none;
    height: var(--control-height); padding: 0 var(--space-5); border: 0; border-radius: var(--radius-pill);
    background-color: var(--color-green); color: var(--color-surface); font-size: var(--fs-body); font-weight: var(--fw-medium);
    line-height: 1; white-space: nowrap; text-decoration: none; }
.btn-pill:hover, .btn-pill:focus { background-color: var(--color-green-hover); color: var(--color-surface); }
.btn-pill:focus-visible { outline: 2px solid var(--color-green); outline-offset: 2px; }
.btn-pill-sm { height: var(--control-height-sm); padding: 0 var(--space-4); }
.btn-pill-secondary { background-color: var(--color-text); }
.btn-pill-secondary:hover, .btn-pill-secondary:focus { background-color: var(--color-text-secondary); }
.btn-pill-block { display: flex; width: 100%; }
/* Field (design system): the token input, 44 px, field border, input radius, green focus ring */
.field { display: block; width: 100%; height: var(--control-height); padding: 0 var(--space-3); border: var(--border-width) solid var(--color-border-field);
    border-radius: var(--radius-input); background-color: var(--color-surface); color: var(--color-text); font: inherit;
    font-size: var(--fs-body); }
.field:focus { outline: 0; border-color: var(--color-green); box-shadow: var(--focus-ring); }
.field[aria-invalid="true"] { border-color: var(--color-danger); }
.field[aria-invalid="true"]:focus { box-shadow: var(--focus-ring-danger); }
select.field { padding-right: var(--space-6); }
.field-error { margin: var(--space-1) 0 0; font-size: var(--fs-secondary); color: var(--color-danger); }
/* Checkbox token (owner 2026-10-22): every checkbox, the design system's .checkbox and the theme's .form-check-input,
   is --checkbox-size square (20 px), radius --radius-check (5 px); unchecked a 1 px border in the text colour (owner
   2026-10-22: never the field border grey); on: green fill and a white check. Fixed pixels and flex: none, so no form row (font size, flex, Bootstrap's 1em) scales it. Switches
   (.form-switch) keep their own look. Beside a label: --check-gap (8 px), the box on the label's first line (14 px). */
html input[type=checkbox]:is(.checkbox, .form-check-input):not(.form-switch *) {
    -webkit-appearance: none; appearance: none; box-sizing: border-box; flex: none; float: none;
    width: var(--checkbox-size); height: var(--checkbox-size); min-width: var(--checkbox-size); min-height: var(--checkbox-size);
    margin: 0; padding: 0; font-size: var(--fs-body); vertical-align: top; cursor: pointer;
    border: var(--border-width) solid var(--color-text); border-radius: var(--radius-check);
    background: var(--color-surface) no-repeat center / 14px 14px; print-color-adjust: exact; }
html input[type=checkbox]:is(.checkbox, .form-check-input):not(.form-switch *):checked {
    border-color: var(--color-green); background-color: var(--color-green);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2' d='m3.5 8.5 3 3 6-7'/%3e%3c/svg%3e"); }
html input[type=checkbox]:is(.checkbox, .form-check-input):not(.form-switch *):indeterminate {  /* "some selected" */
    border-color: var(--color-green); background-color: var(--color-green);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='2.2' d='M4 8h8'/%3e%3c/svg%3e"); }
html input[type=checkbox]:is(.checkbox, .form-check-input):not(.form-switch *):focus-visible {
    outline: 0; border-color: var(--color-green); box-shadow: var(--focus-ring); }
html input[type=checkbox]:is(.checkbox, .form-check-input):not(.form-switch *):disabled { opacity: .5; cursor: default; }
/* A checkbox with its label: the theme's .form-check (not the filter card's rows, .checkbox-option), the auth forms'
   .auth-field.is-check, the address form's .address-check */
html .form-check:not(.form-switch):not(.checkbox-option), .auth-field.is-check, .address-check {
    display: flex; align-items: flex-start; gap: var(--check-gap); min-height: 0; padding-left: 0; }
html .form-check:not(.form-switch):not(.checkbox-option) > input[type=checkbox],
.auth-field.is-check > input[type=checkbox], .address-check > input[type=checkbox] {
    margin-top: calc((var(--fs-body) * var(--lh-body) - var(--checkbox-size)) / 2); }
html .form-check:not(.form-switch):not(.checkbox-option) > .form-check-label, .auth-field.is-check > label, .address-check > label {
    margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); }
/* Auth card (accounts/auth_base.html): login, registration, password pages */
.auth { display: flex; justify-content: center; padding: var(--space-6) var(--space-4) var(--space-7); }
.auth-card { width: 100%; max-width: 440px; padding: var(--card-padding); background-color: var(--color-surface);
    border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); }
.auth-card.is-wide { max-width: 640px; }
/* Error pages (templates/403.html, 404.html, 500.html): the auth card; 500 stands alone without the site header */
.error-card .auth-text { margin-bottom: var(--space-5); }
.error-standalone { margin: 0; min-height: 100vh; background-color: var(--color-surface); color: var(--color-text); font-family: var(--font-sans); }
.error-standalone *, .error-standalone *::before, .error-standalone *::after { box-sizing: border-box; }  /* no Bootstrap reset on 500 */
.error-standalone .btn-pill { text-decoration: none; }
/* Plant-protection page (zwischenfruechte/psm/, owner 2026-10-22; mockup static/images/image.png) */
.psm-header { margin-bottom: var(--space-4); }
.psm-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); }
.psm-header .product-hersteller { margin: 0 0 var(--space-1); }
.psm-facts { margin: var(--space-4) 0; }
/* Facts list (owner 2026-10-22, "Quieter product pages"; psm/facts.html, product/facts.html): a definition list with
   hairline dividers, no card; the label column in the secondary colour */
.facts-list { margin: var(--space-4) 0; border-top: var(--border-width) solid var(--color-border); }
.facts-list > div { display: grid; grid-template-columns: minmax(120px, 30%) minmax(0, 1fr); gap: var(--space-4);
    padding: var(--space-2) 0; border-bottom: var(--border-width) solid var(--color-border); }
.facts-list dt { margin: 0; font-size: var(--fs-body); font-weight: var(--fw-regular); color: var(--color-text-secondary); }
.facts-list dd { margin: 0; font-size: var(--fs-body); font-weight: var(--fw-regular); color: var(--color-text); }
.facts-muted { color: var(--color-text-secondary); }
.facts-more { color: var(--color-link); text-decoration: none; }
.facts-more:hover { color: var(--color-link-hover); }
@media (max-width: 575.98px) { .facts-list > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.psm-nav { position: sticky; top: 0; z-index: 5; display: flex; gap: var(--space-5); margin: var(--space-5) 0 var(--space-4);
    overflow-x: auto; background-color: var(--color-surface); border-bottom: var(--border-width) solid var(--color-border); }
.psm-nav-link { flex: none; padding: var(--space-3) var(--space-1); border-bottom: 2px solid transparent; font-size: var(--fs-card-title);
    color: var(--color-text-secondary); text-decoration: none; white-space: nowrap; }
.psm-nav-link:hover { color: var(--color-text); }
.psm-nav-link.is-active { border-bottom-color: var(--color-green); color: var(--color-text); font-weight: var(--fw-semibold); }
.psm-section { scroll-margin-top: 64px; }
.psm-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.psm-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.psm-search { display: flex; align-items: center; gap: var(--space-2); min-width: 220px; margin-left: auto; padding: var(--space-1) 0;
    border-bottom: var(--border-width) solid var(--color-border-field); color: var(--color-text-secondary); }
.psm-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: var(--fs-body); color: var(--color-text); }
.psm-table-wrap { overflow-x: auto; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card);
    background-color: var(--color-surface); }
.psm-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.psm-table th { padding: var(--space-3); font-size: var(--fs-secondary); font-weight: var(--fw-regular); color: var(--color-text-secondary);
    text-align: left; border-bottom: var(--border-width) solid var(--color-border); }
.psm-table td { padding: var(--space-3); vertical-align: top; border-bottom: var(--border-width) solid var(--color-border); }
.psm-table tr.psm-row-more { background-color: var(--color-hover); }
.psm-table tr.psm-row-more:not(.is-open):not(:target) { display: none; }
.psm-table tr[hidden] { display: none !important; }
.psm-more-cell { text-align: right; white-space: nowrap; }
/* "Auflagen ⌄": grey, blue on hover and while open (owner 2026-10-22) */
.psm-more-toggle { font-weight: var(--fw-regular); color: var(--color-text-secondary); text-decoration: none; }
.psm-more-toggle:hover, .psm-more-toggle[aria-expanded="true"] { color: var(--color-link); }
.psm-footnote { margin: var(--space-2) 0 0; font-size: var(--fs-caption); color: var(--color-text-secondary); }
.psm-row-details { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0 0 var(--space-2); font-size: var(--fs-secondary); }
.psm-row-details div { display: flex; gap: var(--space-1); }
.psm-row-details dt { font-weight: var(--fw-medium); color: var(--color-text-secondary); }
.psm-row-details dd { margin: 0; }
.psm-row-auflagen { margin: 0; padding: 0; list-style: none; font-size: var(--fs-secondary); line-height: var(--lh-body); }
.psm-row-auflagen li + li { margin-top: var(--space-1); }
.psm-code { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.psm-reduced { color: var(--color-text-secondary); }
.psm-table-foot { display: flex; justify-content: space-between; gap: var(--space-3); margin: var(--space-2) 0 var(--space-5);
    font-size: var(--fs-secondary); color: var(--color-text-secondary); }
.psm-csv { font-weight: var(--fw-medium); color: var(--color-link); text-decoration: none; }
.psm-accordion { margin-top: -1px; background-color: var(--color-surface); border: var(--border-width) solid var(--color-border); }
.psm-accordion:first-of-type { border-radius: var(--radius-card) var(--radius-card) 0 0; }
.psm-accordion summary { display: flex; align-items: baseline; gap: var(--space-2); padding: var(--space-4) var(--card-padding); cursor: pointer; list-style: none; }
.psm-accordion summary::-webkit-details-marker { display: none; }
.psm-accordion summary .agr-icon { margin-left: auto; color: var(--color-text-secondary); transition: transform .15s; }
.psm-accordion[open] summary .agr-icon { transform: rotate(180deg); }
.psm-acc-title { font-size: var(--fs-card-title); font-weight: var(--fw-semibold); color: var(--color-text); }
.psm-acc-sum { font-size: var(--fs-secondary); color: var(--color-text-secondary); }
.psm-acc-body { padding: 0 var(--card-padding) var(--card-padding); }
.psm-group { margin: var(--space-3) 0 var(--space-2); font-size: var(--fs-body); font-weight: var(--fw-semibold); }
.psm-ghs { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); margin: 0 0 var(--space-3); padding: 0; list-style: none; }
.psm-ghs li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-secondary); }
.psm-ghs-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--color-danger);
    font-size: 24px; }
.psm-signal { margin: 0 0 var(--space-2); }
.psm-dl { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-5); margin: 0; }
.psm-dl dt { font-size: var(--fs-secondary); font-weight: var(--fw-regular); color: var(--color-text-secondary); }
.psm-dl dd { margin: 2px 0 0; }
.psm-empty { margin: 0; color: var(--color-text-secondary); }
.psm-page .bvl-source { margin-top: var(--space-5); }
/* Printing a plant-protection page ("Datenblatt drucken" = ?druck=1; Ctrl+P on the page): no navigation */
.psm-print { max-width: 960px; margin: 0 auto; padding: var(--space-5); background-color: var(--color-surface); font-family: var(--font-sans);
    color: var(--color-text); }
.psm-print *, .psm-print *::before, .psm-print *::after { box-sizing: border-box; }
.psm-print-brand { margin: 0 0 var(--space-3); font-size: var(--fs-secondary); color: var(--color-text-secondary); }
.psm-print-title { margin: var(--space-5) 0 var(--space-3); }
.psm-print-foot { margin-top: var(--space-5); padding-top: var(--space-3); border-top: var(--border-width) solid var(--color-border); }
@media print {
    nav.navbar, header.navbar, .navbar, footer, .breadcrumb-row, .psm-nav, .psm-tools, .psm-more-cell, .psm-csv, .product-actions,
    .follow, .request-toast, .psm-col ~ div, .suggested-products-section, #fibl-abo { display: none !important; }
    .psm-col { flex: 0 0 100%; max-width: 100%; }
    .psm-table tr.psm-row-more { display: table-row !important; }
    .psm-table-wrap { overflow: visible; border: 0; }
    .psm-accordion { break-inside: avoid-page; border: 0; }
    .psm-page .bvl-source { margin-top: var(--space-4); }
}
/* The BVL source line ({% bvl_attribution %}): plant-protection details card and listing footer */
.bvl-source { margin: var(--space-3) 0 0; font-size: 12px; line-height: var(--lh-body); color: var(--color-text-secondary); }
.bvl-source a { color: inherit; overflow-wrap: anywhere; }
/* The company page (accounts/company_page.html): header card, about, products with chips */
.company-page { max-width: 1040px; margin: 0 auto var(--space-7); }
.company-head { display: flex; gap: var(--space-5); align-items: flex-start; margin: var(--space-3) 0 var(--space-5);
    padding: var(--card-padding); background-color: var(--color-surface); border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-card); }
.company-logo { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 72px; height: 72px;
    overflow: hidden; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card);
    background-color: var(--color-surface); color: var(--color-text-muted); font-size: 32px; }
.company-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.company-head-text { min-width: 0; }
.company-facts { margin: var(--space-2) 0 0; font-size: var(--fs-body); color: var(--color-text-secondary); }
.company-contact { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: var(--space-3) 0 0; font-size: var(--fs-secondary); }
.company-contact a, .company-contact span { display: inline-flex; align-items: center; gap: var(--space-1); }
.company-about { margin: 0 0 var(--space-5); }
.company-about-text { font-size: var(--fs-body); line-height: var(--lh-relaxed); }
.company-products > h2 { margin: 0 0 var(--space-3); }
.company-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-4); }
.company-empty { margin: 0; color: var(--color-text-secondary); }
@media (max-width: 575.98px) { .company-head { flex-direction: column; gap: var(--space-3); } }
/* Hub › Verwaltung › Hersteller & Händler (zwischenfruechte/companies.html) */
.company-note { margin: 0 0 var(--space-3); }
.company-switches { display: flex; flex: none; gap: var(--space-4); }
.company-switch { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.company-switch-label { font-size: var(--fs-secondary); color: var(--color-text-secondary); white-space: nowrap; }
.company-pages { display: flex; justify-content: center; gap: var(--space-4); margin-top: var(--space-4); font-size: var(--fs-secondary); }
@media (max-width: 575.98px) { .company-row { flex-wrap: wrap; } .company-switches { width: 100%; } }
/* Product card (zwischenfruechte/product_template.html): ingredient pills and the follow bell on the banner */
.card-pills { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: var(--space-2) 0; }
.card-pill { display: inline-flex; align-items: center; padding: 2px var(--space-2); border-radius: var(--radius-pill);
    background-color: var(--color-neutral-tint); color: var(--color-neutral-text); font-size: 12px; line-height: 1.5; white-space: nowrap; }
/* the strip spans the banner, so the guests' popover takes the card's width instead of overflowing it */
.card-follow { position: absolute; top: var(--space-2); left: var(--space-2); right: var(--space-2); z-index: 3;
    display: flex; justify-content: flex-end; pointer-events: none; }
.card-follow .follow { position: static; pointer-events: auto; }
.follow-pop-title { margin: 0 0 var(--space-1); font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--color-text); }
.follow-pop-text { margin: 0 0 var(--space-3); font-size: var(--fs-secondary); line-height: var(--lh-body); color: var(--color-text-secondary); }
.follow.is-bell .follow-pop { top: calc(var(--icon-box-row) + var(--space-2)); left: 0; right: 0; width: auto; max-width: none; }
.company-hidden-note { margin: var(--space-3) 0 0; font-size: var(--fs-secondary); color: var(--color-text-secondary); }
.error-brand { margin: 0; padding: var(--space-5) var(--space-4) 0; text-align: center; }
.auth-card > h1 { margin: 0 0 var(--space-5); }
.auth-form { display: flex; flex-direction: column; gap: var(--space-4); margin: 0; }
.auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.auth-field label { display: block; margin: 0 0 var(--space-1); font-size: var(--fs-secondary); font-weight: var(--fw-medium);
    color: var(--color-text); }
.auth-field.is-check { display: flex; align-items: flex-start; gap: var(--space-2); flex-wrap: wrap; }
.auth-field.is-check label { flex: 1 1 0; margin: 0; font-weight: var(--fw-regular); font-size: var(--fs-body); }
.auth-field.is-check .field-error { flex: 1 1 100%; }
.auth-help, .auth-help ul { margin: var(--space-1) 0 0; padding-left: var(--space-4); font-size: var(--fs-caption);
    color: var(--color-text-secondary); }
.auth-help:not(:has(ul)) { padding-left: 0; }
.auth-message { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-input);
    background-color: var(--color-neutral-tint); font-size: var(--fs-secondary); color: var(--color-text); }
.auth-text { margin: 0 0 var(--space-4); font-size: var(--fs-body); color: var(--color-text); }
.auth-text.is-muted { font-size: var(--fs-secondary); color: var(--color-text-secondary); }
.auth-aside { margin: 0; text-align: center; font-size: var(--fs-secondary); }
.auth-switch { margin: var(--space-5) 0 0; padding-top: var(--space-4); border-top: var(--border-width) solid var(--color-border);
    text-align: center; font-size: var(--fs-secondary); color: var(--color-text-secondary); }
.hub-card-body .auth-form { max-width: 440px; }
@media (max-width: 575.98px) {
    .auth { padding: var(--space-4) var(--space-4) var(--space-6); }
    .auth-grid { grid-template-columns: 1fr; }
}
/* Info icons with a tooltip */
.icon-tip { display: inline-flex; vertical-align: middle; color: var(--color-text-secondary); }
.icon-tip[data-bs-toggle="tooltip"] { cursor: help; }
/* The theme's tooltips and popovers name "Inter", which is not loaded */
html .tooltip, html .popover { font-family: var(--font-sans); }

.duet-date__input::placeholder {
  color: black !important;
}
.duet-date__input::-moz-placeholder {
  color: black !important;
}
input[readonly]::placeholder {
  color: black !important;
  opacity: 1;
  }
  .duet-date__input::placeholder {
  color: black !important;
  opacity: 1;
}
.duet-date__input::-moz-placeholder {
  color: black !important;
  opacity: 1;
}
.duet-date__input::-webkit-input-placeholder{
  color: black !important;
  opacity: 1;
}
.duet-date__input:-moz-placeholder {
  color: black !important;
  opacity: 1;
}
.h3-no-hyper{
  font-weight: 600;
  transition: all 0.3s ease-in-out;
}
.h3-no-hyper:hover{
  color: var(--color-link-hover);
}
.h3-no-hyper{
  color: black;
text-decoration: none;
}
.link:hover{
  text-decoration: underline;
  color: var(--color-link);
}
.link{
  color: var(--color-link);
}
/* Format Input Values */
input[type=text] {
  font-size: 14px;
}
input[type=checkbox] #text {
  margin-left: 10px;
}
a{
  color: var(--color-link);
}
li{
  font-size: 14px !important;
}

/* .btn-primary{
  background-color:#42be11 !important;
  border-color: #42be11 !important;
  border-radius: 50px !important;
  font-size: 14px !important;
}

.btn-primary:hover, .btn-primary:active, .btn-primary:visited {
  background-color:#42be11 !important;
  border-color: #42be11 !important;
}
.btn-primary.btn-lg{
  background-color:#42be11 !important;
  border-color: #42be11 !important;
  transition: background-color 200ms linear;
} 
.btn-primary.btn-lg:hover{
  background-color:#43c80e !important;
  border-color: #43c80e !important;
} 

/* .btn-secondary {
color: #ffffff;
background-color: #1F2937;
border-color: #1F2937;
border-radius: 50rem !important;
font-size: 14px;
} */
.btn-secondary:hover {
  color: #ffffff;
  background-color: #1a232f;
  border-color: #19212c; }
.btn-check:focus + .btn-primary, .btn-secondary:focus {
  color: #ffffff;
  background-color: #1a232f;
  border-color: #19212c;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(17, 24, 39, 0.075), 0 0 0 0.18rem rgba(65, 73, 85, 0.5); 
}

.btn-check:checked + .btn-secondary,
.btn-check:active + .btn-secondary, .btn-secondary:active, .btn-secondary.active,
.show > .btn-secondary.dropdown-toggle {
  color: #ffffff;
  background-color: #19212c;
  border-color: #171f29; }
  .btn-check:checked + .btn-secondary:focus,
  .btn-check:active + .btn-secondary:focus, .btn-secondary:active:focus, .btn-secondary.active:focus,
  .show > .btn-secondary.dropdown-toggle:focus {
    box-shadow: inset 0 3px 5px rgba(17, 24, 39, 0.125), 0 0 0 0.18rem rgba(65, 73, 85, 0.5); 
  }
  
.btn-secondary:disabled, .btn-secondary.disabled {
  color: #ffffff;
  background-color: #1F2937;
  border-color: #1F2937; } */

.dropdown-item:focus, .dropdown-item:hover {
    color: #1e2125;
    background-color: #e9ecef;
    border-radius: 8px;
  }


body {
  background-color: #fdfeff;
}

.medium-margin-top{
  margin-top: 15px;
}

.search-form-main-check{
  margin-top: 10px !important;
}
.list-filter-texts{
  font-size: 13px !important;
  list-style-type: none;  
  padding-left: 0 !important;
}
.label{
  font-size: 12px !important;
}
.main-choice{
  font-size: 12px !important;
  margin-bottom: -6px !important;
  margin-top: 6px !important;
  font-weight: 400 !important;
  padding-left: 0 !important;
  padding-bottom: 0 !important;
}
.arrow-down-dropdown{
  position: absolute;
  top: 11px;
  right: 13px;
}
.background-selection#background-yellow{
  background:linear-gradient(to bottom,#febb02 0,#febb02 100%);
  padding-left:20px;
  padding-right: 20px;
  padding-top: 0px;
  padding-bottom: 15px;
  border: none !important;
}
.home-input-start-query{
  /* margin-top: 10px; */
  padding: 6px !important;
  border:solid white;
  border-radius: 1px;
  max-height: 39px !important;
  font-size:14 !important;
  min-height: 39px !important;
  color: black !important;
  /* font-size: 13px; */
}

.cut-text { 
  text-overflow: ellipsis;
  overflow: hidden; 
  white-space: nowrap;
}
/* #id_greening, #id_freezing, #id_oekosaatgut{
  margin-right: 4px;
  margin-left: 0px;
  margin-top: 4px !important;
} */

#slider-saatstaerke, #slider-leguminosen{
  width: 100%;
}

.slider-value{
  display: table;
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 5px 15px 5px 15px;
  color:white;
  background-color: #0071c2;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important
}
.filter-label{
  margin-bottom: 0;
  font-weight: 600;

}
.filter-wrapper{
  border: solid rgb(194, 194, 194) 1px;
  border-radius: 3px;
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 15px 15px 0px 15px;
}
ul.multi-select{
  list-style-type: none;  
  padding-left: 0 !important;
}
#collapese-text-1{
  color: #0071c2;
  cursor: pointer;
}

.svg-arrow {
  display: inline-block;

  width:auto;
  height:23px; 
  vertical-align:bottom; 
  fill: #0071c2;
  cursor: pointer;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.svg-arrow.rotate {
  -webkit-transform : rotate(180deg); 
  -moz-transform : rotate(180deg); 
  -ms-transform : rotate(180deg); 
  -o-transform : rotate(180deg); 
  transform : rotate(180deg); 
}

#collapese-text-1:hover{
  text-decoration: underline;
}

.div-with-bg
{
    background: color url('/static/images/undraw_environment_iaus.svg');
}

.back-home
{
    background-repeat: no-repeat;
}

.back-main col-md-6 mb-3
{
    background-repeat: no-repeat;
}
.aussaatmonat{
  font-size: 14px !important
}
.form-control::placeholder {
  color: #000000;
  opacity: 1;
  font-size: 14px !important;
}

 .flex-shrink-1 {
    /* position: -webkit-sticky !important; */
    position: sticky !important;
    /* margin-right:-150px !important;  */
 }

 .sticky {
    position: -webkit-sticky; /* for Safari */
    position: sticky;
    min-width:120px !important;
    z-index: 1 !important;
    /* min-height:100px !important; */
    /* margin-left: 40px; */
    top: 0;
    align-self: flex-start; /* <-- this is the fix */
    /* background-color: red; */
 }
 /* .bd-highlight {
    /* background-color: rgba(87, 133, 141, 0.438);
    border: 1px solid rgba(86,61,124,0.15);
} */
.alertergebnisse{
    position: relative;
    z-index: 2 !important;
}

.main-zf-img{
    z-index:-1 !important;
}

/* SANDWICH MENU */
/* .navbar-toggler:hover{
      border: none;
      outline: none;
    }
.navbar-toggler:active{
      border: none;
      outline: none;
    }
.navbar-toggler {
      border: none;
      outline: none;
    }

.animated-icon1, .animated-icon2, .animated-icon3 {
  width: 30px;
  height: 20px;
  position: relative;
  margin: 0px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
  }

  .animated-icon1 span, .animated-icon2 span, .animated-icon3 span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
  }

  .animated-icon1 span {
  background: #000000;
  }

  .animated-icon2 span {
  background: #000000;
  }

  .animated-icon3 span {
  background: #000000;
  }

  .animated-icon1 span:nth-child(1) {
  top: 0px;
  }

  .animated-icon1 span:nth-child(2) {
  top: 10px;
  }

  .animated-icon1 span:nth-child(3) {
  top: 20px;
  }

  .animated-icon1.open span:nth-child(1) {
  top: 11px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
  }

  .animated-icon1.open span:nth-child(2) {
  opacity: 0;
  left: -60px;
  }

  .animated-icon1.open span:nth-child(3) {
  top: 11px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
  } */
/* END SANWICH MENU */

#h3-suche{
  padding-top: 15px;
  margin-bottom: 0;
}

#login{
    background-color: rgba(214, 214, 214, 0.678);
    text-align:center; 
    transition: ease-in 200ms;
}
#login:hover {
    background-color: rgba(189, 189, 189, 0.719);
    text-align:center; 
}

#hellotag{
    text-align:center; 

}

/* #img-fluid{
    display: block;
    width: auto;
    max-height: 78px; */
/* } */
/* .img-fluid-home{
  display: block;
  width: auto;
  max-height: 50px;
} */

#navbar-item:hover{
    color:rgb(182, 182, 182);
    transition: ease-in 200ms;
}

 /* Style the video: 100% width and height to cover the entire window */
#myVideo {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: -1;
  }
  

#row-padded {
    /* background-color: #ffbb02; */
    background-color: #ffbb02;
    border-radius: 6px;
    border-top: .5px solid rgb(129, 129, 129);
    border-bottom: .5px solid rgb(129, 129, 129);
    border-right: .5px solid rgb(129, 129, 129);
    border-left: .5px solid rgb(129, 129, 129);
  }
.container-home{
      padding-top: 60px;
      padding-bottom: 70px;
      /* border-top: .5px solid rgb(129, 129, 129);
      border-right: .5px solid rgb(129, 129, 129);
      border-left: .5px solid rgb(129, 129, 129); */
      /* box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important; */

  }

.wrapper-home-background-grey{
  background-color: rgb(245, 245, 245);
}

#maillink:link, #maillink:visited {
    color: white;
    text-align: center;
    text-decoration: none;
}
#mycontent-left {

    margin-top: 0.5rem;

  }
/* .form-select-lg{
    font-size: 1rem;
  }  */
/* .form-control-lg
  {
    font-size: 1rem;
  }  */
/* .form-control::placeholder {
    color: #000000;
    opacity: 1;
} */
#id_fruchtfolge-multiple{
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
}

.bodencontent{
  margin-top:0.5rem ;
}

@media screen and (min-width: 768px) {
  #product-col-right{
    border-left: 1px solid #ced4da;
    padding-left: 10px;
  } 
  #product-col-left{
  border-right: 1px solid #ced4da;
  padding-right: 10px;
  }
}


#footer {
    position: relative;
    bottom: 0;
    width: 100%;
    overflow: hidden;
    z-index: 100;
} 

#footer-row{
  padding-left: 10%;
  padding-right: 10%;
}

.nav-link-list{
  padding-right: 1.5rem;
  padding-left: .5rem;
  color: rgba(0,0,0,.55);
  transition: ease-in 200ms;
  text-decoration: none;
}

.nav-link-list:hover{
  color:lightgrey;
}
 
.nav-item-text{
  text-decoration: none;
  padding-right: .5rem;
  padding-left: 0.5rem;
}

.labels-wrap{
  display: flex;
  align-items: center;

}

.label {
  margin: 0 8px 4px 0;
  padding: 4px 6px;
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 4px;
}

.oeko-label{
  color: #0e610a;
  background-color: #d4fad2;
}
.konv-label{
  color: #4e4900;
  background-color: #ebde29;
}
.legum-label{
  color: #22033f;
  background-color: #e733ff;
}
.legum-label{
  color: #22033f;
  background-color: #86ff33;
}

.freezing-label{
  color: #00264d;
  background-color: rgba(94, 149, 201, 0.897);
}

.greening-label{
  color: #12213a;
  background-color: #4cb65e;
}
.futter-label{
background-color: #edecfb;
color: #5143d9;
}
.npotential-label{
  background-color: #ffd26a;
  color: rgb(0, 0, 0);
}
.collapse-text{
  font-size: 12px;

}



.total-text{
  font-size: 12px;
  font-weight: 400;
}

.info-text{
  font-size: 14px;
  /* display: inline-block;
  border-radius: 5px;
  background-color: #bcbcbc;
  margin: 0 8px 4px 0;
  padding: 4px 6px;
  
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 4px; */
}

.bubble-wrap{
  display: flex;
  align-items: center;
  margin-top: 0rem;
  justify-content: space-between;
}

.bubble {
  margin: 0 10px 0px 0;
  padding: 10px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 1px;  
}


.bubble-label{
  color: #000000;
  background-color: #ffffff;
  padding-left: 0;
}

.bubble-label-text {
  /* margin: 0 0px 0px 0; */
  padding-bottom: -15px;
  font-size: 12px;
  line-height: 18px;
  padding: 0px 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  word-wrap:break-word;
}

.bubble-number{
  text-align: left;
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
}


.Late{
  background-color: #ff6767;
}
.Early{
  background-color: #ff6767;
}

/* .Fit{
  background-color: #49ff49;
} */

/* .container {
  justify-content: space-between;
  flex-direction: column;
  height: 100vh;
  display: flex;
} */
/* .container .btn-holder {
  justify-content: flex-end;
  display: flex;
} */
/* .components-product-hyper{
    color: var(--color-link);
    text-decoration: underline;
    font-size: 12px;
    cursor: pointer;
} */

/* #product-div{
  border: solid 1px #dcdcdc;
} */

.red-dot{
top: 9px;
-ms-flex-order: 2;
order: 2;
width: 4px;
height: 4px;
margin: 0 0 0 .197rem;
background: #b71c1c;
border-radius: 50%;
text-indent: -9999px;

}

/* .checkout-btn {
  min-width: 153px;
  height: 37px;
  margin: auto;
  display: block;
} */

.rounded-pill.back{
  padding: 8px 15px;
  display: inline-block;
  margin-bottom: 10px;
  transition: ease-in 100ms;
}
.rounded-pill.back:hover{
  background-color: #1a232f8f;
}
.register-zf-list{
font-size: 12px;
margin: 1.1em 0px 0px;
color: rgb(0, 0, 0);
position: relative;
text-align: center;

}

.register-zf-list::before {
    position: absolute;
    display: inline-block;
    content: "";
    top: 40%;
    left: 0;
    width: calc(20% - 1em);
    height: 0px;
    border-bottom: 1px solid rgb(204, 204, 204);
}
.register-zf-list::after {
  position: absolute;
  display: inline-block;
  content: "";
  top: 40%;
  right: 0;
  width: calc(20% - 1em);
  height: 0px;
  border-bottom: 1px solid rgb(204, 204, 204);
}

.content-margin-to-navbar{
  margin-top: 20px;
}
.alert.alert-primary{
  width: 100%;
  text-align: center;
}

.form-custom{
  border: none !important;
}

#bubble-number-count{
  display: inline-block;
  text-align: center;
  color:whitesmoke;
  background-color: #000000;
  width: 40px;
  height: 40px;
  padding: 10px;
  padding-top: 7px;
  border-radius: 50%;
}
#result-zfs{
  border: solid black 1px;

}


#upvote-click{
  transform: scale(-1, 1);
  padding:5px 0px;
  scale: 1.5;
  transform: scale(1.5) !important;
  -webkit-transform:scale(1.5);
  position: absolute;
  transition: all .2s ease-in-out;
  transform:translate(0);
  right:700%;
}

#downvote-click{
  transform: scale(-1, 1);
  padding:5px 0px;
  scale: 1.5;
  transform: scale(1.5) !important;
  -webkit-transform:scale(1.5);
  position: absolute;
  transition: all .2s ease-in-out;
  transform:translate(0);
  right:400%;
}

.thumb-clicked-up{
  -webkit-transform:scale(1.7) translate(15px, 0);
  transform:scale(1.7) translate(15px, 0) !important;

  ;
}

.thumb-clicked-down{
  transform: translate(-5px, 0) scale(1.7) !important;
  -webkit-transform:translate(-5px, 0) scale(1.7);
}
@media screen and (max-width: 2800px) {  
  #upvote-click{
    transform: scale(1.4) !important;
    -webkit-transform:scale(1.4);
  }
  
  #downvote-click{
    transform: scale(1.4) !important;
    -webkit-transform:scale(1.4);

  }
  .thumb-clicked-up{
    transform:translate(15px, 0) scale(1.9)!important;
    -webkit-transform:translate(15px, 0) scale(1.9);
  }
  .thumb-clicked-down{
    transform:translate(-5px, 0) scale(1.9)  !important;
    -webkit-transform:scale(1.9) translate(-5px, 0);
  }
}


@media screen and (max-width: 2000px) {
  #upvote-click{
    transform: scale(1.4) !important;
    -webkit-transform:scale(1.4);
  }
  
  #downvote-click{
    transform: scale(1.4) !important;
    -webkit-transform:scale(1.4) !important;

  }
  .thumb-clicked-up{
    transform: scale(1.9) translate(15px, 0)  !important;
    -webkit-transform:scale(1.9)  translate(15px, 0) !important;
  }
  .thumb-clicked-down{
    transform: scale(1.9) translate(-5px, 0)  !important;
    -webkit-transform:scale(1.9) translate(-5px, 0)  !important;
  }
}


@media screen and (max-width: 1250px) {
  #upvote-click{
    transform:scale(1.4) !important;
    -webkit-transform:scale(1.4) !important;

  }
  
  #downvote-click{
    transform:scale(1.4) !important;
    -webkit-transform:scale(1.4) !important;

  }
  .thumb-clicked-up{
    -webkit-transform:translate(15px, 0) scale(1.4) !important;
    transform:translate(15px, 0) scale(1.4)  !important;
    ;
  }
  .thumb-clicked-down{
    -webkit-transform:translate(15px, 0) scale(1.4) !important;
    transform:translate(-5px, 0) scale(1.4) !important;
    ;
  }
}


@media screen and (max-width: 950px) {
  #upvote-click{
    -webkit-transform:scale(1.4);

  }

  #downvote-click{
    -webkit-transform:scale(1.4);

    }
  .thumb-clicked-up{
    transform: translate(19px, 0) scale(2) !important;
    -webkit-transform:translate(19px, 0) scale(2);
  }
  .thumb-clicked-down{
    transform: translate(-10px, 0) scale(2) !important;
    -webkit-transform:translate(19px, 0) scale(2);
  }
}


@media screen and (max-width: 650px) {
  #upvote-click{
    transform: scale(1.4) !important;
    -webkit-transform:scale(1.4);

  }

  #downvote-click{
    transform: scale(1.4) !important;
    -webkit-transform:scale(1.4);

    }
  .thumb-clicked-up{
    

    -webkit-transform:translate(19px, 0) scale(2);
    transform:translate(19px, 0) scale(2) !important;
    ;
  }
  .thumb-clicked-down{
    
    transform:translate(-10px, 0) scale(2) !important;
    -webkit-transform: translate(-10px, 0) scale(2);
    ;
  }
}

.hide-thumb{
  transform:translate(9999px);
  opacity: 0;
  display: none;
}

.question{
  color: grey;
  font-size: 12px;
  margin-right: 15px;
  transition: all .2s ease-in-out;
  -webkit-transition: all .2s ease-in-out;;
}
.question-checked{
  text-decoration:underline rgb(5, 160, 0) 2px;
  color:black;
}
.updated-row-product-overview {
  transition: all .2s ease-in-out;
  z-index: 100;
  background-color: #0bc71b83;
}
.updated-row-product-invisible{
  background-color:#ffffff00;
  transition: all .7s ease-in-out;
}

.btn.btn-dark.btn-sm:hover{
  background-color: #42be11dc !important;
}
.text-center-horizonal{
  text-align: left; 
  vertical-align: middle;
}

@media screen and (max-width: 768px) {
.button-to-products{
  display: flex;
  align-content: center;
  flex-direction: row-reverse;
  flex-wrap: wrap;
}
}
.dropdown-toggle::after {
  margin-left: 0;
  vertical-align: middle;
  content: "";
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-left: 0; 
  }

/* Status badges and green actions. Agrinaut green #41bf12 for buttons and text links (owner decision
   2026-10-19; hover #38a60f; green text links 500 weight, underline on hover). Note: white text on
   #41bf12 is about 2.6:1, below WCAG AA (4.5:1, large text 3:1). Badge palette below is separate.
   The theme's bg-soft-* tints are still the old blue, so status colours live here. */
/* The badge token (owner 2026-10-22): 12/600, 4 px 10 px, radius 6, a 1 px border; near-white fills, identical in
   tiles, search, live search, the changelog and the product page's status line. Approval: ok = zugelassen, danger =
   nicht mehr zugelassen / nicht mehr geführt / a delisted fertilizer, neutral = Zusatzstoff and property badges. Deadline:
   warn = Aufbrauchfrist läuft (> 30 days), urgent (solid) = Aufbrauchfrist läuft (<= 30 days), ended = Aufbrauchfrist
   abgelaufen (solid, kept). FiBL badges get dedicated classes from the bool_badge_class filter (their stored style
   stays). Only these classes: the theme's own badges (dashboard) keep their look. */
html .badge:is(.badge-status-ok, .badge-status-danger, .badge-status-neutral, .badge-status-warn, .badge-status-urgent,
    .badge-status-ended, .badge-fibl, .badge-fibl-new) {
    display: inline-flex; align-items: center; padding: var(--badge-padding); border: var(--border-width) solid transparent;
    border-radius: var(--radius-badge); font-size: var(--fs-caption); font-weight: var(--fw-semibold); line-height: 1.2;
    white-space: nowrap; }
.badge-status-ok { background-color: var(--badge-ok-bg) !important; color: var(--badge-ok-text) !important; border-color: var(--badge-ok-border) !important; }
.badge-status-danger { background-color: var(--badge-danger-bg) !important; color: var(--badge-danger-text) !important; border-color: var(--badge-danger-border) !important; }
.badge-status-neutral { background-color: var(--badge-neutral-bg) !important; color: var(--badge-neutral-text) !important; border-color: var(--badge-neutral-border) !important; }
.badge-status-warn { background-color: var(--badge-warn-bg) !important; color: var(--badge-warn-text) !important; border-color: var(--badge-warn-border) !important; }
.badge-status-urgent { background-color: var(--badge-urgent-bg) !important; color: var(--badge-urgent-text) !important; border-color: var(--badge-urgent-bg) !important; }
.badge-status-ended { background-color: var(--color-danger) !important; color: var(--color-surface) !important; border-color: var(--color-danger) !important; }
.badge-fibl { background-color: var(--badge-fibl-bg) !important; color: var(--badge-fibl-text) !important; border-color: var(--badge-fibl-border) !important; }
.badge-fibl-new { background-color: var(--badge-fibl-new-bg) !important; color: var(--badge-fibl-new-text) !important; border-color: var(--badge-fibl-new-border) !important; }
.text-agrinaut { color: var(--color-green) !important; }
.text-status-ok { color: var(--color-green) !important; }  /* status green is the brand green */
.text-status-warn { color: #a15c07 !important; }
.text-status-danger { color: var(--color-danger) !important; }
.bg-status-ok { background-color: var(--color-green) !important; }
.bg-status-warn { background-color: #d98a00 !important; }
.bg-status-danger { background-color: var(--color-danger) !important; }

/* Deadline box on plant-protection pages (reminders/deadline_box.html) and the reminder pages (reminders/page.html) */
/* Deadline box: the hover fill with its hairline, so it stands apart from the white card (owner 2026-10-22) */
.deadline-box { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); box-shadow: none;
    background-color: var(--color-hover); }
.deadline-box > .card-body { padding: var(--space-4) 20px; }
.deadline-box h2 { margin: 0; }
.reminder-page-card { max-width: 560px; }
.deadline-rows .deadline-row { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) 0;
    border-bottom: var(--border-width) solid var(--color-border); }
.deadline-rows .deadline-row:last-child { border-bottom: 0; }
.deadline-rows dt { font-weight: var(--fw-regular); color: var(--color-text-secondary); }
.deadline-rows dd { margin: 0; text-align: right; font-weight: var(--fw-semibold); }
.deadline-progress { height: 6px; }
.deadline-note { margin: var(--space-2) 0 0; font-size: var(--fs-secondary); color: var(--color-text-secondary); }

/* Request card on product pages (product/request_box.html): the green .btn-pill (full width) is its only filled
   element. Notice "Nur Anfrage, kein Kauf." (templates/includes/request_only_notice.html): secondary text,
   no background; inside the card it sits under a hairline. */
.request-card { background-color: var(--color-surface); border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-card); padding: var(--card-padding); box-shadow: none; }
.request-card h2 { margin: 0; }
.request-card .request-sub { font-size: var(--fs-secondary); color: var(--color-text-secondary); margin: 2px 0 var(--space-3); }
.request-field { margin-bottom: var(--space-3); }
.request-label { display: block; font-size: var(--fs-caption); color: var(--color-text-secondary); margin: 0 0 var(--space-1); }
.request-value { font-size: var(--fs-body); color: var(--color-text); overflow-wrap: anywhere; }
.request-value-extra { display: block; font-size: var(--fs-caption); font-weight: var(--fw-regular); color: var(--color-text-secondary); }
.request-field .form-select { font-size: var(--fs-body); }
.request-secondary { margin: var(--space-2) 0 0; text-align: center; font-size: var(--fs-secondary); color: var(--color-text-secondary); }
.request-only-notice { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--fs-secondary);
    line-height: var(--lh-body); color: var(--color-text-secondary); margin: 0 0 var(--space-4); }
.request-only-notice strong { font-weight: var(--fw-medium); color: var(--color-text); }
.request-only-notice .agr-icon { flex-shrink: 0; margin-top: 2px; }
.request-card .request-only-notice { margin: var(--space-3) 0 0; padding-top: var(--space-3);
    border-top: var(--border-width) solid var(--color-border); }

/* Product page (zwischenfruechte/product_detail.html and its components) */
/* The info column's labels (Dokumente, Kurzbeschreibung): the label mark, 24 px above */
#name-product-detail > .card-label { margin-top: var(--space-5); }
/* Sub-sections inside the Produktdetails card (section templates, h3) */
.product-details-card h3:not(.card-label) { margin: var(--space-5) 0 var(--space-2); }
#product-detail-header h1, #product-detail-header h2 { margin: 0; }
.product-hersteller { margin: 0; font-size: var(--fs-body); }
/* The Hersteller link as on the product card: dark text, the link blue on hover (the changelog panel: below) */
.product-hersteller a { color: var(--color-text); text-decoration: none; }
.product-hersteller a:hover { color: var(--color-link); text-decoration: none; }
.product-thumb { max-height: 80px; object-fit: cover; }
.product-details-row { padding-left: calc(var(--bs-gutter-x) * .5); padding-right: calc(var(--bs-gutter-x) * .5); }
.product-details-card { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card);
    padding: var(--card-padding); }
.product-details-card > h2 { margin: 0 0 var(--space-3); }

/* Breadcrumb row (templates/breadcrumbs.html, every page with one): 14 px, links in the filter card's blue,
   chevron-right separators 12 px #8a94a6 with 8 px gaps, current item #111 500 and not linked, 12 px above
   the h1 and left-aligned with it; on mobile only the last two items. */
.breadcrumb-row ol { display: flex; flex-wrap: wrap; align-items: center; list-style: none; padding: 0;
    margin: var(--space-3) 0 var(--space-3); font-size: var(--fs-body); line-height: 1.4; background: none; }
.breadcrumb-row li { display: inline-flex; align-items: center; min-width: 0; }
.breadcrumb-sep { margin: 0 var(--space-2); font-size: var(--fs-caption); color: var(--color-text-muted); }
.breadcrumb-row a { color: var(--color-link); text-decoration: none; }
.breadcrumb-row a:hover, .breadcrumb-row a:focus { color: var(--color-link-hover); text-decoration: underline; }
.breadcrumb-row [aria-current] { color: var(--color-text); font-weight: var(--fw-medium); }
@media (max-width: 767.98px) {
    .breadcrumb-row li:not(:nth-last-child(-n+2)) { display: none; }
    .breadcrumb-row li:nth-last-child(2) .breadcrumb-sep { display: none; }
}

/* Text links: the link token (design system: every link blue), 500 weight, no underline until hover */
.request-secondary a, .flow-link {
    color: var(--color-link); font-weight: 500; text-decoration: none; }
.request-secondary a:hover, .flow-link:hover, .request-secondary a:focus, .flow-link:focus {
    color: var(--color-link-hover); text-decoration: underline; }

/* Flow layout (templates/flow/): Anfrageliste, Anfrage senden, Gesendet and later checkouts share one
   container, one grid and the same card values, so switching pages moves nothing but the content. Tokens only;
   the green .btn-pill is the only filled element. Titles: the plain h1, card titles plain h2. */
.flow { padding-top: 0; padding-bottom: var(--space-6); }
.flow-head { margin-bottom: var(--space-3); }
.flow-head h1 { margin: 0; }
.flow-subtitle { font-size: var(--fs-secondary); color: var(--color-text-secondary); margin: 2px 0 0; min-height: 1.4em; }
.flow-steps ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); list-style: none;
    padding: 0; margin: var(--space-2) 0 0; font-size: var(--fs-secondary); color: var(--color-text-secondary); }
.flow-steps li { display: inline-flex; align-items: center; }
.flow-step-sep { margin-right: var(--space-2); font-size: var(--fs-caption); color: var(--color-text-muted); }
.flow-step-current { font-weight: var(--fw-medium); color: var(--color-text); }
.flow-step-other { color: var(--color-text-secondary); }
/* Optional columns: an empty flow_left gives its width to main (col-lg-3 + col-lg-5 = col-lg-8), so the
   aside keeps the same width and x-position on every flow page; an empty flow_aside is hidden. */
.flow-aside-col:has(> .flow-aside:empty), .flow-left-col:has(> .flow-left:empty) { display: none; }
@media (min-width: 992px) {
    .flow-grid:has(> .flow-left-col > .flow-left:empty) > .flow-main { width: 66.66666667%; }
}
.flow-card { background-color: var(--color-surface); border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-card); padding: var(--card-padding-compact); }
.flow-main > .flow-card + .flow-card { margin-top: var(--space-4); }
.flow-card h2 { margin: 0; }
.flow-card-sub { font-size: var(--fs-secondary); color: var(--color-text-secondary); margin: 2px 0 0; }
.flow-card > h2 + .flow-field, .flow-card-sub + .flow-field, .flow-card-sub + .flow-items,
.flow-card > h2 + .flow-retailer, .flow-card-sub + .flow-retailer { margin-top: var(--space-3); }
.flow-field { margin-bottom: var(--space-3); }
.flow-field:last-child { margin-bottom: 0; }
.flow-label { display: block; font-size: var(--fs-caption); color: var(--color-text-secondary); margin: 0 0 var(--space-1); }
.flow-value { font-size: var(--fs-body); color: var(--color-text); overflow-wrap: anywhere; }
.flow-value-extra { display: block; font-size: var(--fs-caption); color: var(--color-text-secondary); }
.flow-retailer + .flow-retailer { margin-top: var(--space-5); }
.flow-items { list-style: none; padding: 0; margin: var(--space-3) 0 0; border-bottom: var(--border-width) solid var(--color-border); }
.flow-item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-3) 0;
    border-top: var(--border-width) solid var(--color-border); }
.flow-thumb { width: 48px; height: 48px; flex-shrink: 0; border-radius: 8px; object-fit: cover;
    border: var(--border-width) solid var(--color-border); background-color: var(--color-hover); }
.flow-thumb-empty { display: inline-block; }
.flow-item-main { flex: 1 1 160px; min-width: 0; }
.flow-item-name { font-size: var(--fs-body); color: var(--color-text); overflow-wrap: anywhere; }
.flow-item-sub { font-size: var(--fs-secondary); color: var(--color-text-secondary); margin-top: 2px; }
.flow-item-qty { display: flex; align-items: center; gap: var(--space-2); }
.flow-item-qty .flow-label { margin: 0; }
.flow-item-qty .form-select { width: 5.5rem; font-size: var(--fs-body); }
.flow-remove-form { margin: 0; }
/* Tertiary actions (Entfernen, Anfrageliste leeren): text links */
.flow-remove, .flow-text-action { background: none; border: 0; padding: 0; font-size: var(--fs-secondary);
    color: var(--color-link); }
.flow-remove:hover, .flow-remove:focus, .flow-text-action:hover, .flow-text-action:focus { color: var(--color-link-hover);
    text-decoration: underline; }
.flow-after-cards { margin: var(--space-3) 0 0; }
.flow .form-control { font-size: var(--fs-body); }
.flow-error { font-size: var(--fs-secondary); color: var(--color-danger); margin: var(--space-1) 0 0; }
.flow-summary .btn-pill { margin-top: var(--space-4); }
.flow-note { font-size: var(--fs-secondary); color: var(--color-text-secondary); text-align: center; margin: var(--space-2) 0 0; }
.flow-note-small, .flow-bar-note { font-size: var(--fs-caption); }
.flow-bar-note { color: var(--color-text-secondary); text-align: center; margin: var(--space-1) 0 0; }
.flow-notice { margin-top: var(--space-3); padding-top: var(--space-3); border-top: var(--border-width) solid var(--color-border); }
.flow-notice .request-only-notice { margin: 0; }
.flow-bottom-bar, .flow-bottom-spacer { display: none; }
@media (min-width: 992px) {
    /* The navbar scrolls away (not fixed, see base.html), so 16 px from the viewport top */
    .flow-aside { position: sticky; top: var(--space-4); }
}
@media (max-width: 991.98px) {
    /* The primary button moves into a fixed bottom bar; the spacer keeps content clear of it */
    .flow-summary .btn-pill { display: none; }
    .flow-bottom-bar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
        background-color: var(--color-surface); border-top: var(--border-width) solid var(--color-border);
        padding: var(--space-3) var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom)); }
    .flow-bottom-spacer { display: block; height: 76px; }
    .flow-bottom-spacer-note { height: 116px; }
}
.flow-message { margin-top: var(--space-4); }
.flow-error-form { margin: 0 0 var(--space-3); }
.flow-done-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
    border-radius: 50%; background-color: var(--color-green-tint); color: var(--color-green); font-size: 24px; }
.flow-done-steps { margin: var(--space-4) 0 0; padding-left: 1.25rem; font-size: var(--fs-body); color: var(--color-text); }
.flow-done-steps li { margin-bottom: var(--space-2); }
.flow-done-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.flow-done-actions .btn-pill { min-width: 180px; }
@media (max-width: 575.98px) {
    /* Menge and Entfernen wrap below the name: line them up with it, not with the thumbnail */
    .flow-item-qty { margin-left: 64px; }
    .flow-item-compact .flow-item-qty { margin-left: 56px; }
}

/* The site toast (#request-toast, static/js/request-toast.js, zf24/toast.py): one white card, replaced not
   stacked; every Django message renders here. Bottom-right on desktop; bottom-centre on mobile, above a fixed flow bar. */
.request-toast { position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: 1080; display: flex;
    align-items: flex-start; gap: var(--space-2); width: 360px; max-width: calc(100% - 2 * var(--space-4));
    padding: var(--space-3) var(--space-4); background-color: var(--color-surface);
    border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-float);
    font-size: var(--fs-secondary); line-height: var(--lh-body); color: var(--color-text); }
.request-toast[hidden] { display: none; }
/* 24 px disc, as the FiBL changelog's subscription card (32 px there) */
.request-toast-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
    margin-top: -2px; border-radius: 50%; background-color: var(--color-green-tint); color: var(--color-text);
    font-size: var(--fs-secondary); }
/* Levels (zf24/toast.py): success green tint (default), info neutral, warning and error the badge colours */
.request-toast.is-info .request-toast-icon { background-color: var(--color-neutral-tint); color: var(--color-text); }
.request-toast.is-warn .request-toast-icon { background-color: var(--color-warn-tint); color: var(--color-warn-text); }
.request-toast.is-danger .request-toast-icon { background-color: var(--color-danger-tint); color: var(--color-danger); }
.request-toast-body { flex: 1; min-width: 0; }
.request-toast-close { background: none; border: 0; padding: 0 2px; font-size: 18px; line-height: 1; color: var(--color-text-secondary); }
.request-toast-close:hover, .request-toast-close:focus { color: var(--color-text); }
.request-toast { bottom: calc(var(--space-4) + var(--request-toast-offset, 0px)); }
.request-toast.request-toast-top { top: var(--space-4); bottom: auto; }
.request-toast-undo { display: inline; margin: 0; color: var(--color-text-secondary); }
.request-toast-action { border: 0; padding: 0; background: none; color: var(--color-link); font-weight: var(--fw-medium);
    font-size: inherit; }
.request-toast-action:hover { color: var(--color-link-hover); text-decoration: underline; }
@media (max-width: 991.98px) {
    .request-toast { right: auto; left: 50%; transform: translateX(-50%); }
}

/* Compact details card (request page, flow_left): 11 px labels, 13 px values, 10 px between groups */
.flow-compact { margin: 10px 0 0; }
.flow-compact > div + div { margin-top: 10px; }
.flow-compact dt { font-size: 11px; font-weight: 400; color: #677788; margin: 0 0 2px; }
.flow-compact dd { font-size: 13px; font-weight: 400; color: #1e2022; margin: 0; overflow-wrap: anywhere; }
.flow-compact-edit { display: inline-block; font-size: 13px; margin-top: 10px; }
.flow-details-note { font-size: 12px; color: #677788; margin: 12px 0 0; padding-top: 10px; border-top: 1px solid #e7eaf3; }
.flow-item-compact { padding: 10px 0; }
.flow-item-compact .flow-thumb { width: 40px; height: 40px; }

/* FiBL changelog /fibl-aenderungen/ (fibl_api/changelog.html, changelog_page.html, product_panel.html):
   card tokens of the request card; counts and markers in dark icons, no status colour; the page's one green
   button is the request box inside the product panel */
/* FiBL changelog (fibl_api/changelog.html): tokens only (CLAUDE.md "Design system"). Title: the page's plain h1. */
.fibl-log { margin: var(--space-2) 0 var(--space-7); }
.fibl-log-head { margin-bottom: var(--space-4); }
.fibl-log-head h1 { margin: 0 0 var(--space-1); }
.fibl-log-month { font-size: var(--fs-body); color: var(--color-text-secondary); margin: 0; }
/* Subscription card (fibl_api/subscription_card.html): fixed in the toast's corner, 380 px, the same size,
   position and icon slot in every state; a toast stacks 8 px above it (request-toast.js, data-toast-stack).
   Below lg a bottom sheet (.is-sheet, set by fibl-changelog.js). No backdrop: the page stays usable. */
.fibl-log-sub { position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: 1070; display: flex; align-items: flex-start;
    gap: var(--space-3); width: 380px; max-width: calc(100% - 2 * var(--space-4)); padding: var(--card-padding-compact);
    background-color: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card);
    box-shadow: var(--shadow-float); animation: fibl-log-sub-fade .15s ease-out; }
.fibl-log-sub[hidden], .fibl-log-sub.is-yielding, .fibl-log-sub.is-behind-menu { display: none; }
/* Layering: page content and the changelog panel < the card (1070, body level, fixed to the viewport) < open menus
   (navbar dropdowns, the mega menu, the bell's dropdown: 1075) < offcanvas (mail preview, mobile menu: 1077, backdrop
   1076) < the toast (1080); fibl-changelog.js also hides the card while a menu is open */
html .navbar .dropdown-menu { z-index: 1075; }
html .offcanvas-backdrop { z-index: 1076; }
html .offcanvas { z-index: 1077; }
.fibl-log-sub.is-sheet { left: 0; right: 0; bottom: var(--fibl-log-sub-bottom, 0px); width: auto; max-width: none;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    padding-bottom: calc(var(--card-padding-compact) + env(safe-area-inset-bottom, 0px)); }
@keyframes fibl-log-sub-fade { from { opacity: 0; } to { opacity: 1; } }
.fibl-log-sub-close { position: absolute; top: var(--space-1); right: var(--space-1); display: inline-flex; align-items: center;
    justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none;
    color: var(--color-text-muted); font-size: var(--fs-secondary); }
.fibl-log-sub-close:hover, .fibl-log-sub-close:focus-visible { background-color: var(--color-hover); color: var(--color-text); }
.fibl-log-sub-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
    border-radius: 50%; background-color: var(--color-green-tint); color: var(--color-text); font-size: var(--fs-body); }
.fibl-log-sub-body { flex: 1; min-width: 0; padding-right: var(--space-4); }
.fibl-log-sub-title { font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--color-text); margin: 0 0 2px; }
/* Two lines reserved, so the card keeps its height when the state changes */
.fibl-log-sub-text { font-size: var(--fs-secondary); line-height: var(--lh-body); color: var(--color-text-secondary); margin: 0;
    min-height: 3em; }
.fibl-log-sub-text strong { color: var(--color-text); font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.fibl-log-sub-actions { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-height-sm);
    margin: var(--space-3) 0 0; font-size: var(--fs-secondary); }
.fibl-log-sub-actions[hidden] { display: none; }
.fibl-log-sub-actions form { display: inline; margin: 0; }
.fibl-log-sub .btn-pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.fibl-log-sub-field { flex: 1 1 auto; min-width: 0; height: var(--control-height-sm); padding: 0 var(--space-3);
    border: var(--border-width) solid var(--color-border-field); border-radius: var(--radius-input); font-size: var(--fs-body);
    color: var(--color-text); background-color: var(--color-surface); }
.fibl-log-sub-field:focus { outline: 0; border-color: var(--color-green); box-shadow: var(--focus-ring); }
.fibl-log-sub-field.is-invalid, .fibl-log-sub-field[aria-invalid="true"] { border-color: var(--color-danger); box-shadow: var(--focus-ring-danger); }
.fibl-log-sub-wait { color: var(--color-text-muted); cursor: default; font-weight: var(--fw-medium); }
.fibl-log-sub-dot { color: var(--color-text-secondary); }
.fibl-log-sub-quiet { color: var(--color-text-secondary); text-decoration: underline; }
.fibl-log-sub-quiet:hover { color: var(--color-text); }
/* "Nur diese Ausgabe senden" (blue link) and its result; the address step's error is visible text */
.fibl-log-sub-links { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: var(--space-2) 0 0; font-size: var(--fs-secondary); }
.fibl-log-sub-links[hidden] { display: none; }
.fibl-log-sub-link { color: var(--color-link); font-weight: var(--fw-medium); }
.fibl-log-sub-actions .fibl-log-sub-link { margin-left: var(--space-2); }  /* next to the pill (mockup) */
.fibl-log-sub-actions[data-sub-step="start"] { flex-wrap: wrap; }
.fibl-log-sub-link:hover { color: var(--color-link-hover); text-decoration: underline; }
.fibl-log-sub-sent { margin: var(--space-2) 0 0; font-size: var(--fs-secondary); color: var(--color-text-secondary); }
.fibl-log-sub-sent strong { color: var(--color-text); font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.fibl-log-sub-once { flex-wrap: wrap; }
.fibl-log-sub-error { flex: 1 1 100%; font-size: var(--fs-caption); color: var(--color-danger); }
.fibl-log-sub-error[hidden] { display: none; }
.fibl-log-linkbutton { border: 0; padding: 0; background: none; color: var(--color-link); font-size: inherit; font-weight: var(--fw-medium); }
.fibl-log-linkbutton:hover { color: var(--color-link-hover); text-decoration: underline; }
/* Week groups of the stream page */
.fibl-log-week[hidden] { display: none; }
.fibl-log-week-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--space-3);
    padding: var(--space-4) 0 var(--space-1); border-bottom: var(--border-width) solid var(--color-border); }
.fibl-log-week:first-child .fibl-log-week-head { padding-top: var(--space-1); }
.fibl-log-week-title { font-size: var(--fs-secondary); font-weight: var(--fw-semibold); color: var(--color-text); margin: 0; }
/* Counts once per week: dark icons (+ neu, ↻ wieder gelistet, − gestrichen), no status colour (that stays for badges) */
.fibl-log-week-counts { font-size: var(--fs-caption); color: var(--color-text-secondary); }
.fibl-log-count { color: var(--color-text); font-weight: var(--fw-medium); white-space: nowrap; }
.fibl-log-archive { margin-left: auto; color: var(--color-text-secondary); }
/* Links on this page in the link colour (archive, prev/next, the panel's text links; buttons stay green) */
.fibl-log .flow-link, .fibl-log .product-panel a:not(.btn) { color: var(--color-link); }
.fibl-log .flow-link:hover, .fibl-log .product-panel a:not(.btn):hover { color: var(--color-link-hover); text-decoration: underline; }
.fibl-log .product-panel .product-hersteller a { color: var(--color-text); }  /* as on the product page */
.fibl-log .product-panel .product-hersteller a:hover { color: var(--color-link); text-decoration: none; }
.fibl-log-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4);
    margin: 0 0 var(--space-2); }
/* Chips: white with a hairline for a choice; the applied filter in the green tint with × (a click clears it) */
.fibl-log-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.fibl-log-chip { display: inline-flex; align-items: center; gap: var(--space-1); height: var(--chip-height); padding: 0 var(--space-3);
    border: var(--border-width) solid var(--color-border); border-radius: var(--radius-pill); background-color: var(--color-surface);
    color: var(--color-text); font-size: var(--fs-secondary); text-decoration: none; }
.fibl-log-chip:hover { background-color: var(--color-hover); color: var(--color-text); }
.fibl-log-chip.is-active { border-color: var(--color-green-tint-border); background-color: var(--color-green-tint); font-weight: var(--fw-medium); }
.fibl-log-chip-count { color: var(--color-text-secondary); }
.fibl-log-chip-clear { display: none; font-size: var(--fs-caption); }
.fibl-log-chip.is-active .fibl-log-chip-clear { display: inline; }
/* Borderless search, right-aligned in the chips row */
.fibl-log-search { position: relative; flex: 0 1 220px; min-width: 0; margin-left: auto; }
.fibl-log-search .agr-icon { position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    color: var(--color-text-muted); }
.fibl-log-search .form-control { height: var(--chip-height); padding: 0 0 0 22px; border: 0; border-radius: 0; background: transparent;
    border-bottom: var(--border-width) solid var(--color-border-field); box-shadow: none; font-size: var(--fs-secondary); }
.fibl-log-search .form-control:focus { box-shadow: none; border-bottom: var(--border-width) solid var(--color-link); }
.fibl-log-list { margin: 0 0 var(--space-4); }  /* no outer card: the rows run edge to edge */
.fibl-log-rows { list-style: none; padding: 0; margin: 0; border-bottom: var(--border-width) solid var(--color-border); }
.fibl-log-row { border-top: var(--border-width) solid var(--color-border); border-left: 3px solid transparent; }
.fibl-log-row:first-child { border-top: 0; }
.fibl-log-row[hidden] { display: none; }
.fibl-log-row.is-active { border-left-color: var(--color-green); background-color: var(--color-hover); }
/* Two-line rows: 56 px, 12 px side padding (the 3 px active edge included) */
.fibl-log-link { display: flex; align-items: baseline; gap: var(--space-3); min-height: var(--row-height-two-line);
    padding: var(--space-2) calc(var(--row-padding-x) - 3px); color: var(--color-text); text-decoration: none; }
a.fibl-log-link:hover .fibl-log-name { color: var(--color-link); }
a.fibl-log-link:focus-visible { outline: 2px solid var(--color-green); outline-offset: -2px; }
.fibl-log-marker { flex: none; width: 20px; font-size: var(--fs-caption); color: var(--color-text); text-align: center; }
/* "wieder gelistet": the FiBL mark's blue (rows, week counts, menu column, home stream) */
.fibl-log-marker[data-icon="refresh"], .fibl-log-count [data-icon="refresh"] { color: var(--color-fibl); }
.fibl-log-product { flex: 1 1 auto; min-width: 0; font-size: var(--fs-body); }
.fibl-log-name { font-weight: var(--fw-medium); }
.fibl-log-meta { display: block; font-size: var(--fs-secondary); color: var(--color-text-secondary); }
.fibl-log-day { flex: none; font-size: var(--fs-secondary); color: var(--color-text-secondary); }
.fibl-log-empty { font-size: var(--fs-body); color: var(--color-text-secondary); margin: 0; padding: var(--space-3) 0; }
.fibl-log-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-4);
    padding: var(--space-3) 0 0; font-size: var(--fs-secondary); color: var(--color-text-secondary); }  /* the grey footer line */
.fibl-log-months { display: flex; gap: var(--space-4); margin-left: auto; }
.fibl-log-panel:empty { display: none; }
.fibl-log-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* The panel: the product page's components, stacked; scrolls inside itself next to the list */
.product-panel { background-color: var(--color-surface); border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-card); padding: var(--card-padding-compact); }
/* The gallery sits directly under the panel's 16 px top padding */
.product-panel-gallery, .product-panel-gallery > .row, .product-panel-gallery .list-group-item:first-child { margin-top: 0 !important; }
.product-panel .product-page-link { font-size: var(--fs-secondary); white-space: nowrap; margin-right: var(--space-3); }
.product-panel .request-card { border: 0; padding: var(--space-4) 0 0; border-top: var(--border-width) solid var(--color-border);
    border-radius: 0; }
/* Spacing: 16 px between the components, none above the badges */
.product-panel-block:empty { display: none; }
.product-panel-block + .product-panel-block { margin-top: var(--space-4); }
.product-panel-block > :first-child, .product-panel #product-detail-header > div { margin-top: 0 !important; }
.product-panel-block > :last-child, .product-panel #product-detail-header > div { margin-bottom: 0 !important; }
.product-panel .break-word.mb-4 { margin-bottom: 0 !important; }
.product-panel .product-details-card > h2:first-child { margin-top: 0 !important; }
/* Smaller gallery, same layout as on the product page (the include stays untouched): thumbnail column
   on the left as 40 px squares, main image max 200 px high in a frame that shrinks to it, 28 px arrows */
.product-panel-gallery > .row { flex-wrap: nowrap; align-items: flex-start; margin: 0; }
.product-panel-gallery > .row > .col-3 { flex: 0 0 auto; width: auto; }
.product-panel-gallery > .row > .col-9 { flex: 1 1 auto; width: auto; min-width: 0; }
.product-panel .thumbnail-list-group .list-group-item { width: 40px; height: 40px; padding: 2px; margin: 0 0 var(--space-1) !important; }
.product-panel .thumbnail-list-group .list-group-item img { width: 100%; height: 100%; max-height: none !important; object-fit: cover; }
.product-panel .carousel { width: fit-content; max-width: 100%; margin: 0 auto !important; }
.product-panel .carousel-inner { width: auto; }
.product-panel .carousel-item img { width: auto !important; max-width: 100%; max-height: 200px; object-fit: contain; margin: 0 auto; }
.product-panel .carousel-item .ratio { width: 356px; max-width: 100%; }
.product-panel .carousel-control-prev, .product-panel .carousel-control-next { width: 28px; height: 28px; }
.product-panel .carousel-control-prev { left: var(--space-1); }
.product-panel .carousel-control-next { right: var(--space-1); }
.product-panel .carousel-control-prev-icon, .product-panel .carousel-control-next-icon { width: 11px; height: 11px; }
@media (min-width: 992px) {
    /* The navbar scrolls away on this page (not fixed, see base.html), so 16 px from the viewport top */
    .fibl-log-panel { position: sticky; top: var(--space-4); max-height: calc(100vh - 2 * var(--space-4)); overflow-y: auto;
        border-radius: var(--radius-card); }
}
@media (max-width: 991.98px) {
    .fibl-log-row > .product-panel { margin: 0 var(--space-3) var(--space-3); }
    .fibl-log-hint { display: none; }
}
@media (max-width: 575.98px) {
    .fibl-log-search { flex: 1 1 100%; }
    .fibl-log-sub-text { min-height: 4.5em; }  /* three lines on phones */
}

/* Notification centre (notifications app, static/js/notifications.js): the bell, its dropdown, and the one
   include notifications/section.html (the hub's section full width; the dropdown compact). Tokens only. */
/* The bell is the first .navbar-icon of the icon row; its dot is the row's one badge without a number (.navbar-badge.is-dot) */
/* The dropdown: a floating card, 380 px; below lg an offcanvas from the right */
.notify-dropdown { position: fixed; z-index: 1075; width: 380px; max-width: calc(100vw - 2 * var(--space-3));
    max-height: calc(100vh - 80px); overflow-x: hidden; overflow-y: auto; background-color: var(--color-surface);
    border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-float); }
.notify-dropdown[hidden] { display: none; }
.notify-dropdown.is-offcanvas { top: 0; right: 0; bottom: 0; max-height: none; border-radius: var(--radius-card) 0 0 var(--radius-card); }
.notify-backdrop { position: fixed; inset: 0; z-index: 1074; background-color: rgba(30, 32, 34, .25); }
.notify-backdrop[hidden] { display: none; }
/* The include */
.notify { color: var(--color-text); }
.notify-compact { padding: var(--card-padding-compact); }
.notify-head { display: flex; align-items: baseline; gap: var(--space-3); padding-bottom: var(--space-3);
    border-bottom: var(--border-width) solid var(--color-border); }
.notify-title { flex: none; margin: 0; font-size: var(--fs-h2); font-weight: var(--fw-semibold); line-height: var(--lh-title); }
.notify-compact .notify-title { font-size: 16px; }
.notify-to { flex: 1; min-width: 0; margin: 0; font-size: var(--fs-secondary); color: var(--color-text-secondary); text-align: right;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notify-compact .notify-to { font-size: var(--fs-caption); }
.notify-close { flex: none; align-self: center; display: inline-flex; align-items: center; justify-content: center; width: 28px;
    height: 28px; margin: calc(-1 * var(--space-1)) calc(-1 * var(--space-1)) calc(-1 * var(--space-1)) 0; padding: 0; border: 0;
    border-radius: 50%; background: none; color: var(--color-text-secondary); font-size: var(--fs-secondary); }
.notify-close:hover, .notify-close:focus-visible { background-color: var(--color-hover); color: var(--color-text); }
.notify-error { margin: var(--space-2) 0 0; font-size: var(--fs-secondary); color: var(--color-danger); }
.notify-error[hidden] { display: none; }
.notify-section { margin-top: var(--space-4); }
.notify-section-label { margin: 0 0 var(--space-1); font-size: 11px; font-weight: var(--fw-semibold); line-height: var(--lh-title);
    letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.notify-rows { list-style: none; margin: 0; padding: 0; }
.notify-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; }
.notify-compact .notify-row { padding: var(--space-2) 0; }
/* Tiles: colour by topic family (registry TILES); the add row a dashed grey tile */
.notify-tile { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
    border-radius: var(--radius-input); color: var(--color-text); font-size: 22px; }
.notify-compact .notify-tile { width: 40px; height: 40px; font-size: 20px; }
.notify-tile.is-green { background-color: var(--color-green-tint); }
.notify-tile.is-fibl { background-color: var(--color-fibl-tint); color: var(--color-fibl); }  /* FiBL topics (registry TILES) */
.notify-tile.is-neutral { background-color: var(--color-neutral-tint); }
.notify-tile.is-add { border: var(--border-width) dashed var(--color-text-muted); color: var(--color-text-secondary); }
.notify-text { flex: 1; min-width: 0; }
a.notify-row-link { color: inherit; text-decoration: none; }
a.notify-row-link:hover .notify-row-title { color: var(--color-link); }
.notify-row-title { display: block; font-size: 16px; font-weight: var(--fw-medium); color: var(--color-text); overflow-wrap: anywhere; }
.notify-compact .notify-row-title { font-size: 15px; }
.notify-row-line { display: block; font-size: var(--fs-body); color: var(--color-text-secondary); }
.notify-compact .notify-row-line { font-size: var(--fs-secondary); }
.notify-row-line.is-pending { color: #a15c07; }
.notify-link, .notify-action, .notify-foot a { border: 0; padding: 0; background: none; color: var(--color-link); font-size: inherit;
    font-weight: var(--fw-medium); text-decoration: none; }
.notify-link:hover, .notify-action:hover, .notify-foot a:hover { color: var(--color-link-hover); text-decoration: underline; }
.notify-action { flex: none; font-size: var(--fs-body); }
.notify-wait { color: var(--color-text-muted); cursor: default; }
/* "Abonnieren": the address field + OK under the row (JS: .is-open; without JS: :target) */
.notify-row-form { display: none; flex: 0 0 100%; min-width: 0; gap: var(--space-2); }
.notify-row-form.is-open, .notify-row-form:target { display: flex; }
.notify-field { flex: 1; min-width: 0; height: var(--control-height-sm); padding: 0 var(--space-3);
    border: var(--border-width) solid var(--color-border-field); border-radius: var(--radius-input); font-size: var(--fs-body); }
.notify-field:focus { outline: 0; border-color: var(--color-green); box-shadow: var(--focus-ring); }
.notify-field.is-invalid { border-color: var(--color-danger); box-shadow: var(--focus-ring-danger); }
/* 40x24 switch (settings): a submit button with role=switch, green when on */
.notify-toggle { flex: none; margin: 0; }
.notify-switch { position: relative; display: inline-flex; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.notify-switch-track { position: relative; display: block; width: var(--switch-width); height: var(--switch-height);
    border-radius: var(--radius-pill); background-color: var(--color-surface); box-shadow: inset 0 0 0 var(--border-width) var(--color-text);
    transition: background-color .15s; }  /* off: a 1 px text-colour outline, as the checkbox (owner 2026-10-22) */
.notify-switch-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
    background-color: var(--color-text); transition: transform .15s, background-color .15s; }
.notify-switch[aria-checked="true"] .notify-switch-track { background-color: var(--color-green); box-shadow: none; }
.notify-switch[aria-checked="true"] .notify-switch-track::after { background-color: var(--color-surface); }
.notify-switch[aria-checked="true"] .notify-switch-track::after { transform: translateX(16px); }
.notify-switch:focus-visible .notify-switch-track { outline: 2px solid var(--color-green); outline-offset: 2px; }
.notify-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.notify-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4); margin-top: var(--space-3);
    padding-top: var(--space-3); border-top: var(--border-width) solid var(--color-border); font-size: var(--fs-secondary); }
.notify-foot form { margin: 0; }
.notify-foot-note { color: var(--color-text-secondary); }
/* Mail-link pages (?t=, confirmation, unsubscribe): the include full width on its own card */
.notify-page-wrap { max-width: 640px; margin: var(--space-5) auto var(--space-7); }
.notify-page .breadcrumb-row ol { margin-top: 0; }  /* the breadcrumb sits in the card, 12 px above the h1 */
.notify-page { padding: var(--card-padding); background-color: var(--color-surface); border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-card); }
.notify-message { margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-input);
    background-color: var(--color-green-tint); color: var(--color-text); }
.notify-invite { margin: 0 0 var(--space-3); color: var(--color-text-secondary); }
.notify-invite a { color: var(--color-link); font-weight: var(--fw-medium); }
.notify-prompt { margin: 0 0 var(--space-3); padding: var(--space-4); background-color: var(--color-surface);
    border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); }
.notify-prompt p { margin: 0 0 var(--space-2); font-weight: var(--fw-medium); }
.notify-undo { margin: 0 0 var(--space-3); }
@media (max-width: 359.98px) {
    /* Narrow: OK under the field, full width */
    .notify-row-form { flex-wrap: wrap; }
    .notify-row-form .btn-pill { flex: 1 0 100%; }
}

/* Settings hub (templates/settings/frame.html, accounts/hub.py): nav left (col-lg-3), the section in one card right
   (col-lg-9); below lg the nav is a horizontal row of chips above the card. Tokens only. */
.hub { margin: 0 0 var(--space-7); }
.hub > h1 { margin: 0 0 var(--space-4); }
.hub-user { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-3) var(--space-4); }
.hub-initials { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
    border-radius: 50%; background-color: var(--color-green-tint); color: var(--color-text); font-size: var(--fs-secondary);
    font-weight: var(--fw-semibold); }
.hub-user-text { min-width: 0; }
.hub-user-name { display: block; font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--color-text); }
.hub-user-email { display: block; font-size: var(--fs-caption); color: var(--color-text-secondary); overflow-wrap: anywhere; }
.hub-items { list-style: none; margin: 0; padding: 0; }
.hub-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: 8px;
    font-size: var(--fs-body); color: var(--color-text); text-decoration: none; }
.hub-icon { flex: none; font-size: 18px; line-height: 1; color: var(--color-text-secondary); }
.hub-item:hover, .hub-item:focus { background-color: var(--color-hover); color: var(--color-text); }
.hub-item.is-active { background-color: var(--color-hover); font-weight: var(--fw-medium); }
.hub-item.is-active .hub-icon { color: var(--color-text); }
.hub-group { margin: var(--space-4) 0 var(--space-1); padding: 0 var(--space-3); font-size: 11px; font-weight: var(--fw-semibold);
    letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.hub-foot { margin-top: var(--space-3); padding-top: var(--space-3); border-top: var(--border-width) solid var(--color-border); }
.hub-item.hub-logout { color: var(--color-text-secondary); }
.hub-card { background-color: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); }
.hub-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-4);
    padding: var(--space-5) var(--card-padding) var(--space-4); border-bottom: var(--border-width) solid var(--color-border); }
.hub-card-head h2 { margin: 0; }
.hub-context { margin: 0; font-size: var(--fs-secondary); color: var(--color-text-secondary); }
.hub-card-body { padding: var(--card-padding); }
/* The wrapped account pages: their own containers and cards dissolve into the hub card */
.hub-card-body .container-xl { max-width: none; padding: 0; }
.hub-card-body .card { border: 0; box-shadow: none !important; }
.hub-card-body .card-header, .hub-card-body .card-body { padding-left: 0; padding-right: 0; }
.hub-card-body > div > .notify > .notify-section:first-child { margin-top: 0; }
/* Section Konto (accounts/profile.html): identity block, then groups of label/value rows with hairlines; one group
   at a time becomes fields (.field) with a small green pill and a grey "Abbrechen" */
.account-back { margin: 0 0 var(--space-4); font-size: var(--fs-secondary); }
.account-identity { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-5); }
.account-initials { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    border-radius: 50%; background-color: var(--color-green-tint); color: var(--color-text); font-size: var(--fs-body);
    font-weight: var(--fw-semibold); }
.account-identity-text { min-width: 0; }
.account-name { display: block; font-size: 16px; font-weight: var(--fw-semibold); line-height: var(--lh-title); color: var(--color-text); }
.account-email { display: block; font-size: var(--fs-secondary); color: var(--color-text-secondary); overflow-wrap: anywhere; }
.account-group + .account-group { margin-top: var(--space-5); }
.account-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
    padding-bottom: var(--space-2); border-bottom: var(--border-width) solid var(--color-border); }
.account-group-head h3 { margin: 0; }
.account-edit, .account-action { font-size: var(--fs-secondary); }
.account-rows { margin: 0; }
.account-row { display: flex; align-items: baseline; gap: var(--space-4); min-height: var(--row-height); padding: var(--space-2) 0;
    border-bottom: var(--border-width) solid var(--color-border); font-size: var(--fs-body); }
.account-label { flex: none; width: 140px; margin: 0; font-weight: var(--fw-regular); color: var(--color-text-secondary); }
.account-value { flex: 1 1 auto; display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
    min-width: 0; margin: 0; color: var(--color-text); font-weight: var(--fw-regular); }
.account-text { min-width: 0; overflow-wrap: anywhere; }
.account-form .account-row { align-items: flex-start; border-bottom: 0; padding: var(--space-1) 0; }
.account-form .account-label { line-height: var(--control-height); }
.account-form .account-value { display: block; }
.account-error { margin: var(--space-1) 0 0; font-size: var(--fs-secondary); color: var(--color-danger); }
.account-actions { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) 0 0 calc(140px + var(--space-4)); }
.account-cancel { font-size: var(--fs-body); color: var(--color-text-secondary); }
.account-cancel:hover { color: var(--color-text); }
@media (max-width: 575.98px) {
    .account-row { flex-wrap: wrap; gap: 0 var(--space-4); }
    .account-label { width: 100%; }
    .account-form .account-row { padding: var(--space-1) 0 var(--space-2); }
    .account-form .account-label { line-height: var(--lh-body); margin-bottom: var(--space-1); }
    .account-actions { padding-left: 0; }
}
/* Section Adressen (accounts/address.html): one block per address with hairlines, the actions as text links
   (Entfernen grey), the form in place in the Konto rows' layout; PLZ (120 px) and Ort share one row */
.addresses { list-style: none; margin: calc(-1 * var(--space-3)) 0 0; padding: 0; }
.address-item { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4);
    padding: var(--space-4) 0; border-bottom: var(--border-width) solid var(--color-border); font-size: var(--fs-body); }
.address-item:has(.address-form) { display: block; }
.address-text { display: flex; flex-direction: column; min-width: 0; color: var(--color-text); overflow-wrap: anywhere; }
.address-name { font-weight: var(--fw-medium); }
.address-side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); flex: none; }
.address-actions { display: flex; align-items: baseline; gap: var(--space-4); }
.address-actions form { margin: 0; }
.address-action { padding: 0; border: 0; background: none; font-size: var(--fs-secondary); color: var(--color-link); }
.address-action:hover { color: var(--color-link-hover); }
.address-action.is-quiet { color: var(--color-text-secondary); }
.address-action.is-quiet:hover { color: var(--color-text); }
.address-new { margin-top: var(--space-5); }
.hub-card-body > .address-new:first-child { margin-top: 0; }
.address-new h3 { margin: 0 0 var(--space-2); }
.address-hint { margin: 0 0 var(--space-3); font-size: var(--fs-secondary); color: var(--color-text-secondary); }
.address-place { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--space-2); }
.address-form .account-label { line-height: var(--lh-body); padding-top: calc((var(--control-height) - 1.5em) / 2); }
.address-check { display: flex !important; justify-content: flex-start; }
.address-add { margin: var(--space-4) 0 0; font-size: var(--fs-body); }
.address-add .agr-icon { margin-right: var(--space-1); }
@media (max-width: 575.98px) {
    .address-item { flex-direction: column; gap: var(--space-2); }
    .address-side { align-items: flex-start; }
    .address-actions { flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
    .address-form .account-label { padding-top: 0; }
}
/* Section Anfragen (accounts/order.html): one row per request with hairlines; "Details" expands its products */
.requests { list-style: none; margin: calc(-1 * var(--space-3)) 0 0; padding: 0; }
.request-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--space-4); padding: var(--space-3) 0;
    border-bottom: var(--border-width) solid var(--color-border); font-size: var(--fs-body); }
.request-main p { margin: 0; }
.request-head { color: var(--color-text); }
.request-date { color: var(--color-text-secondary); margin-right: var(--space-2); }
.request-retailer { font-weight: var(--fw-medium); }
.request-main .request-products { margin-top: 2px; color: var(--color-text); overflow-wrap: anywhere; }
.request-amount { color: var(--color-text-secondary); }
.request-main .request-meta { margin-top: 2px; font-size: var(--fs-secondary); color: var(--color-text-muted); overflow-wrap: anywhere; }
.request-side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); }
.request-toggle { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0; border: 0; background: none;
    color: var(--color-link); font-size: var(--fs-secondary); }
.request-toggle:hover { color: var(--color-link-hover); }
.request-toggle .agr-icon { transition: transform .15s; }
.request-toggle[aria-expanded="true"] .agr-icon { transform: rotate(180deg); }
.request-items { grid-column: 1 / -1; }
.request-table { width: 100%; margin-top: var(--space-3); font-size: var(--fs-secondary); }
.request-table th { padding: var(--space-1) var(--space-3) var(--space-1) 0; font-weight: var(--fw-medium);
    color: var(--color-text-secondary); border-bottom: var(--border-width) solid var(--color-border); }
.request-table td { padding: var(--space-2) var(--space-3) var(--space-2) 0; vertical-align: top; color: var(--color-text);
    border-bottom: var(--border-width) solid var(--color-border); }
.request-table tr:last-child td { border-bottom: 0; }
.request-producer { display: block; font-size: var(--fs-caption); color: var(--color-text-secondary); }
.requests-pages { display: flex; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-4);
    font-size: var(--fs-secondary); color: var(--color-text-secondary); }
.requests-empty { margin: 0; color: var(--color-text-secondary); }
@media (max-width: 575.98px) {
    .request-row { grid-template-columns: minmax(0, 1fr); }
    .request-side { flex-direction: row; align-items: center; justify-content: space-between; margin-top: var(--space-2); }
}
/* Düngemittel menu (navbar/navbar_menu.html): the category columns unchanged, from xl one more column right of a
   hairline with the FiBL changes (this week in the dark-icon style, 30-day total, link, subscription) */
/* The menu is a float card (over the theme's green top border); "Alle Düngemittel →" a link */
html .navbar .mega-menu { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card);
    box-shadow: var(--shadow-float); }
html .mega-menu .mega-menu-all { margin: var(--space-2) 0 0; color: var(--color-link); font-size: var(--fs-body); font-weight: var(--fw-medium); }
html .mega-menu .mega-menu-all:hover { color: var(--color-link-hover); background: none; text-decoration: underline; }
.mega-menu-columns { display: flex; align-items: stretch; }
.menu-fibl { display: none !important; }  /* lg: the menu as before; the column from xl up */
@media (min-width: 1200px) {
    /* The menu starts under its toggle (~250 px from the left): it ends 30 px before the viewport edge */
    html .mega-menu { width: min(1140px, calc(100vw - 280px)); }
    .menu-fibl { display: flex !important; }
}
.mega-menu-columns > .row { flex: 1 1 auto; min-width: 0; }
.menu-fibl { flex: 0 0 240px; flex-direction: column; align-items: flex-start; gap: var(--space-1);
    margin: var(--space-2) 0; padding: var(--space-2) var(--space-4); border-left: var(--border-width) solid var(--color-border);
    font-size: var(--fs-secondary); color: var(--color-text-secondary); }
.menu-fibl p { margin: 0; }
.menu-fibl-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2) !important; }
.menu-fibl .menu-fibl-tile { width: 40px; height: 40px; font-size: var(--fs-h2); }
.menu-fibl-title { font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--color-text); }
.menu-fibl-total strong { font-weight: var(--fw-semibold); color: var(--color-text); }
.menu-fibl .fibl-log-count { font-size: var(--fs-secondary); }
.menu-fibl-link { margin-top: var(--space-2); font-weight: var(--fw-medium); color: var(--color-link); }
.menu-fibl-link:hover, .menu-fibl-sub a:hover { color: var(--color-link-hover); text-decoration: underline; }
.menu-fibl-sub a { color: var(--color-link); }
/* Home (templates/home.html). Hero: title 48/700 (the one exception), the category select and the green pill side by
   side at the control height, both pill-shaped. Below it one grid for the product cards and "Mehr als Suche"
   (.home-grid: the hero's 1112 px container, same edges and gutter); section titles 24/700 with a 14 px grey line.
   Feature cards: the card token, 18 px padding, a 40 px icon tile (live: green tint; coming: neutral, dashed card,
   "Demnächst" badge above the tile), title 16/600, text 13 grey, blue links */
html .home-hero-title { margin: 0; font-size: var(--fs-hero); font-weight: var(--fw-bold); line-height: var(--lh-title); }
.home-hero-sub { margin: var(--space-2) 0 0; font-size: var(--fs-h2); color: var(--color-text); }
@media (max-width: 575.98px) { html .home-hero-title { font-size: var(--fs-hero-mobile); } }
/* Category chips in the hero: the choice chip (the scroll arrows, their script and the hover lift are unchanged) */
.category-carousel__button { display: inline-flex; align-items: center; height: var(--chip-height); padding: 0 var(--space-3);
    border: var(--border-width) solid var(--color-border); border-radius: var(--radius-pill); background-color: var(--color-surface);
    color: var(--color-text); font-size: var(--fs-secondary); font-weight: var(--fw-regular); white-space: nowrap; cursor: pointer;
    transition: all .2s ease; }
.category-carousel__button:hover { background-color: var(--color-hover); transform: translateY(-1px); }
/* Search as one control: a 56 px pill (field border) holding the borderless select, a hairline and the green pill
   inset 4 px; below md the select is its own 56 px pill and the button sits full width under it */
.home-search { display: flex; align-items: center; height: var(--search-group-height); margin-bottom: var(--space-5);
    padding: var(--space-1); border: var(--border-width) solid var(--color-border-field); border-radius: var(--radius-pill);
    background-color: var(--color-surface); }
.home-search:focus-within { box-shadow: var(--focus-ring); }
.home-search-select-wrap { position: relative; flex: 1 1 auto; min-width: 0; align-self: stretch; }
.home-search-select { display: block; width: 100%; height: 100%; padding: 0 calc(var(--space-4) * 2) 0 calc(var(--search-group-inset) - var(--space-1));
    border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-text); font: inherit;
    font-size: var(--fs-h3); -webkit-appearance: none; appearance: none; cursor: pointer; }
.home-search-select:focus { outline: none; }
.home-search-chevron { position: absolute; top: 50%; right: var(--space-4); transform: translateY(-50%); pointer-events: none;
    color: var(--color-text-muted); font-size: var(--fs-secondary); }
.home-search-divider { flex: none; width: var(--border-width); height: var(--space-6); margin: 0 var(--space-1); background-color: var(--color-border); }
.home-search-button { flex: none; height: var(--search-group-button); }
@media (max-width: 767.98px) {
    .home-search { flex-direction: column; align-items: stretch; height: auto; gap: var(--space-2); padding: 0; border: 0; background: transparent; }
    .home-search:focus-within { box-shadow: none; }
    .home-search-select-wrap { height: var(--search-group-height); }
    .home-search-select { padding-left: var(--search-group-inset); border: var(--border-width) solid var(--color-border-field);
        background-color: var(--color-surface); }
    .home-search-select:focus { box-shadow: var(--focus-ring); }
    .home-search-divider { display: none; }
    .home-search-button { width: 100%; }
}
/* "Beliebte Hersteller" in the hero: title 18/600 with a blue link right; six cards in a row (card token, hover fill),
   the logo in a 56 px band (contain) or a 36 px grey tile with the building icon, name 13/500 on one line, count 12
   grey; below lg a horizontally scrolling row */
.home-makers { margin: var(--space-6) 0 var(--space-5); }
.home-makers-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.home-makers-head h2 { margin: 0; }
.home-makers-head a { font-size: var(--fs-body); color: var(--color-link); }
.home-makers-head a:hover { color: var(--color-link-hover); text-decoration: underline; }
.home-makers-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.home-maker { display: flex; flex-direction: column; gap: var(--space-1); height: 100%; padding: var(--maker-card-padding);
    border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); background-color: var(--color-surface);
    color: var(--color-text); text-decoration: none; }
a.home-maker:hover { background-color: var(--color-hover); color: var(--color-text); }
.home-maker-logo { display: flex; align-items: center; justify-content: center; height: var(--maker-logo-height); margin-bottom: var(--space-1); }
.home-maker-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.home-maker-placeholder { display: inline-flex; align-items: center; justify-content: center; width: var(--maker-placeholder);
    height: var(--maker-placeholder); border-radius: var(--radius-input); background-color: var(--color-neutral-tint);
    color: var(--color-text-secondary); font-size: var(--fs-h2); }
.home-maker-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--fs-secondary); font-weight: var(--fw-medium); }
.home-maker-count { font-size: var(--fs-caption); color: var(--color-text-secondary); }
@media (max-width: 991.98px) {
    .home-makers-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .home-makers-row::-webkit-scrollbar { display: none; }
    .home-makers-row > li { flex: 0 0 40%; min-width: 0; scroll-snap-align: start; }
}
@media (max-width: 575.98px) { .home-makers-row > li { flex-basis: 44%; } }
html .home-grid { max-width: 1112px; }
.home-features { margin-top: var(--home-section-gap); margin-bottom: 0; }
@media (max-width: 767.98px) { .home-features { margin-top: var(--home-section-gap-sm); } }
/* display-sm: home section titles only ("Beliebte Hersteller", "Mehr als Suche", "So funktioniert's", "Warum Agrinaut") */
html .home-section-title { margin: 0; font-size: var(--fs-display-sm); font-weight: var(--fw-bold); line-height: var(--lh-display-sm); }
.home-section-sub { margin: var(--space-2) 0 var(--space-4); font-size: var(--fs-body); color: var(--color-text-secondary); }
.feature-card { position: relative; }  /* the home tiles: the news card rhythm (.news-card) */
.feature-card.is-soon { border-style: dashed; border-color: var(--color-border-field); }
.feature-card .badge { display: inline-block; margin: 0 0 var(--space-2); }
.feature-card-note { font-size: var(--fs-secondary); color: var(--color-text-secondary); }
/* Home "So funktioniert's" and "Warum Agrinaut" read as one grid: a title block (display-sm, the grey line 8 px below)
   48 px above the content; steps and rows start on a hairline with 24 px inside. Steps: three top-aligned columns 32 px
   apart, a 56/700 numeral in the text colour, 16 px to the title 18/600, text 14 grey at 1.6. Rows: the label 18/600 on
   its own line, the text 14 grey at 1.6 below, hairlines between rows; the illustration right, centred to the rows.
   64 px between sections (40 on mobile). */
.home-block { margin-top: var(--home-section-gap); margin-bottom: 0; }
.home-block-last { margin-bottom: var(--space-7); }
@media (max-width: 767.98px) { .home-block { margin-top: var(--home-section-gap-sm); } }
.home-block .home-section-sub { margin-bottom: var(--space-7); }
.home-steps-rule { border-top: var(--border-width) solid var(--color-border); }
.home-steps { --bs-gutter-x: var(--space-6); align-items: flex-start; margin-bottom: 0; padding: 0; list-style: none; }
.home-steps > li { padding-top: var(--space-5); }
.home-step-number { display: block; margin-bottom: var(--space-4); font-size: var(--fs-numeral); font-weight: var(--fw-bold);
    line-height: 1; color: var(--color-text); }
html .home-steps h3, .home-point dt { margin: 0 0 var(--space-2); font-size: var(--fs-h2); font-weight: var(--fw-semibold);
    line-height: var(--lh-title); color: var(--color-text); }
.home-steps p, .home-point dd { margin: 0; font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-relaxed);
    color: var(--color-text-secondary); }
.home-why { --bs-gutter-x: var(--space-7); --bs-gutter-y: var(--space-6); }
.home-points { margin: 0; }
.home-point { padding: var(--space-5) 0; border-top: var(--border-width) solid var(--color-border); }
.home-points-action { margin: var(--home-link-gap) 0 0; }
.feature-card-link, .topic-signup-link { padding: 0; border: 0; background: none; font-size: var(--fs-secondary);
    font-weight: var(--fw-medium); color: var(--color-link); }
.feature-card-link:hover, .topic-signup-link:hover { color: var(--color-link-hover); text-decoration: underline; }
.topic-signup { margin: 0; }
.topic-signup-state { font-size: var(--fs-secondary); color: var(--color-text-secondary); }
.topic-signup-form { display: none; flex-wrap: wrap; gap: var(--space-2); width: 100%; }
.topic-signup-form:target { display: flex; }
.topic-signup-form:target ~ .topic-signup-link, .topic-signup-link:has(+ .topic-signup-form:target) { display: none; }
.topic-signup-form .field { flex: 1 1 140px; min-width: 0; height: var(--control-height-sm); }
/* Mail preview (fibl_api/mail_preview_panel.html): Bootstrap offcanvas from the right (a page without JS); sender
   and subject above the real mail in a sandboxed frame, footer row with the two actions */
/* display: navbar.css hides every .offcanvas from lg up (meant for the navbar menu); hidden state = Bootstrap's transform */
html .mail-preview.offcanvas { display: flex !important; --bs-offcanvas-width: 600px; max-width: 100%; border-left: var(--border-width) solid var(--color-border);
    box-shadow: var(--shadow-float); }
.mail-preview { display: flex; flex-direction: column; background-color: var(--color-surface); }
.mail-preview.is-page { margin: var(--space-4) 0 var(--space-7); border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-card); height: 80vh; }
.mail-preview-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-4) var(--card-padding); border-bottom: var(--border-width) solid var(--color-border); }
.mail-preview-head h1, .mail-preview-title { margin: 0; font-size: var(--fs-h2); font-weight: var(--fw-semibold); }
.mail-preview-close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0;
    border: 0; border-radius: 50%; background: none; color: var(--color-text-muted); font-size: var(--fs-body); }
.mail-preview-close:hover, .mail-preview-close:focus-visible { background-color: var(--color-hover); color: var(--color-text); }
.mail-preview-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding: var(--space-4) var(--card-padding); }
.mail-preview-meta { margin: 0 0 var(--space-3); font-size: var(--fs-secondary); }
.mail-preview-meta div { display: flex; gap: var(--space-2); }
.mail-preview-meta dt { width: 56px; flex: none; font-weight: var(--fw-regular); color: var(--color-text-secondary); }
.mail-preview-meta dd { margin: 0; color: var(--color-text); overflow-wrap: anywhere; }
.mail-preview-frame { flex: 1 1 auto; width: 100%; min-height: 320px; border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-card); }
.mail-preview-foot { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--card-padding);
    border-top: var(--border-width) solid var(--color-border); font-size: var(--fs-body); }
.mail-preview-link { color: var(--color-link); font-weight: var(--fw-medium); }
.mail-preview-link:hover { color: var(--color-link-hover); text-decoration: underline; }
.mail-preview-state { color: var(--color-text-secondary); }
/* A notification row whose topic has a page (registry Topic.page): the title is the link, a chevron-right beside it */
a.notify-row-title.is-link { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-text); text-decoration: none; }
/* the chevron: 12 px, muted, 4 px after the text, centred on the title line (Bootstrap Icons' -.125em offset off) */
a.notify-row-title.is-link .agr-icon { color: var(--color-text-muted); }
a.notify-row-title.is-link:hover, a.notify-row-title.is-link:hover .agr-icon { color: var(--color-link); }
/* "Ansehen →" in the "Neu bei Agrinaut" cards (notifications/site_news.html): small blue link */
.notify-view { display: block; margin-top: var(--space-1); font-size: var(--fs-caption); font-weight: var(--fw-medium); color: var(--color-link); }
.notify-view:hover { color: var(--color-link-hover); text-decoration: underline; }
/* "Vorschau" in a notification row (registry Topic.preview) and the card's grey preview link */
.notify-preview { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: 2px; font-size: var(--fs-caption);
    color: var(--color-link); }
.notify-preview:hover { color: var(--color-link-hover); text-decoration: underline; }
.fibl-log-sub-links .fibl-log-sub-quiet { text-decoration: none; }
.fibl-log-sub-links .fibl-log-sub-quiet:hover { color: var(--color-text); }
/* The navbar's account dropdown (navbar/navbar_user_dropdown.html): one float card, logged in and out (over the
   theme's green top border on .navbar .dropdown-menu); below lg it spans the navbar with the 12 px gutters */
html .navbar .account-menu { max-width: calc(100vw - 2 * var(--space-3)); overflow-x: hidden; padding: var(--space-1);
    border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-float); }
html .navbar .account-menu.is-guest { width: 300px; padding: var(--card-padding-compact); }
@media (max-width: 991.98px) {
    /* the li stops being the containing block: the card hangs from the navbar, under the search row */
    html .navbar .nav-item.dropdown:has(> .account-menu) { position: static; }
    html .navbar .account-menu { top: 100% !important; left: var(--space-3) !important; right: var(--space-3) !important;
        width: auto !important; max-width: none !important; margin-top: var(--space-1); }
}
.account-guest-title { margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-semibold); line-height: var(--lh-title); color: var(--color-text); }
.account-guest-text { margin: var(--space-1) 0 var(--space-4); font-size: var(--fs-secondary); color: var(--color-text-secondary); }
.account-guest-register { margin: var(--space-3) 0 0; font-size: var(--fs-secondary); color: var(--color-text-secondary); text-align: center; }
/* The navbar's account menu: the hub's items (settings/nav_items.html) as dropdown items */
.hub-menu .hub-items { padding: 0; }
.hub-menu .dropdown-item { display: flex; align-items: center; gap: var(--space-2); }
.hub-menu .hub-group { margin: var(--space-2) 0 var(--space-1); }
.hub-menu .hub-foot { margin-top: var(--space-1); padding-top: var(--space-1); }
@media (max-width: 991.98px) {
    .hub-nav { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: var(--space-1); scrollbar-width: none; }
    .hub-user, .hub-nav .hub-group { display: none; }
    .hub-nav .hub-items { display: flex; gap: var(--space-2); }
    .hub-nav .hub-item, .hub-nav .hub-item.hub-logout { height: var(--chip-height); padding: 0 var(--space-3);
        border: var(--border-width) solid var(--color-border); border-radius: var(--radius-pill); font-size: var(--fs-secondary);
        white-space: nowrap; }
    .hub-nav .hub-icon { font-size: var(--fs-body); }
    .hub-nav .hub-item.is-active { border-color: var(--color-green-tint-border); background-color: var(--color-green-tint); }
    .hub-nav .hub-foot { margin: 0; padding: 0; border: 0; }
    .hub-card-head, .hub-card-body { padding-left: var(--card-padding-compact); padding-right: var(--card-padding-compact); }
}

/* Follow pill (templates/includes/follow_button.html, notifications/follow.py): beside the h1 of every subscribable
   page (the changelog's bottom-right card is only a first-visit nudge). 36 px, hairline, white, 13/500, bell 16 px;
   pending in the warn tint (a label), subscribed in the green tint with the tint border (a click unsubscribes, the toast
   carries the undo). The guests' popover and an error are float cards under the pill. .title-row: h1 and pill on one line, 14 px gap; below sm the pill
   wraps under the title. */
.title-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--title-row-gap); }
.title-row > h1, .title-row > h2 { margin: 0; }
@media (max-width: 575.98px) { .title-row { flex-direction: column; align-items: flex-start; } }
.follow { position: relative; flex: none; }
.follow form { margin: 0; }
/* Default (off): the black pill (owner 2026-10-22) – 40 px, #1e2022, white 14/500, bell; on: green tint with the green
   border ("Erinnerung aktiv" / "Abonniert"); pending: amber. The product card's bell keeps its white circle (.is-bell). */
.follow-pill { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--follow-height); padding: 0 var(--space-4);
    border: var(--border-width) solid var(--color-text); border-radius: var(--radius-pill); background-color: var(--color-text);
    color: var(--color-surface); font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: 1; white-space: nowrap;
    text-decoration: none; cursor: pointer; }
.follow-pill:hover { opacity: .88; color: var(--color-surface); }
.follow-pill:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.follow-pill.is-pending { border-color: var(--color-warn-tint-border); background-color: var(--color-warn-tint); color: var(--color-warn-text); opacity: 1; }
.follow-pill.is-on { border-color: var(--color-green-tint-border); background-color: var(--color-green-tint); color: var(--color-text); }
.follow-pill.is-on:hover { opacity: 1; background-color: var(--color-green-tint); color: var(--color-text); }
.follow-pop, .follow-float { position: absolute; top: calc(100% + var(--space-2)); left: 0; z-index: 1075; padding: var(--space-3);
    border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); background-color: var(--color-surface);
    box-shadow: var(--shadow-float); font-size: var(--fs-secondary); }
.follow-pop { width: 340px; max-width: calc(100vw - 2 * var(--space-4)); }
.follow-pop-form { display: flex; gap: var(--space-2); }
.follow-field { flex: 1 1 auto; min-width: 0; height: var(--control-height-sm); }
.follow-error { margin: var(--space-2) 0 0; color: var(--color-danger); }
.follow-preview { display: inline-flex; gap: var(--space-1); margin-top: var(--space-2); color: var(--color-text-secondary); }
.follow-preview:hover { color: var(--color-text); }
.follow-float { margin: 0; white-space: nowrap; }
.follow-float[hidden], .follow-pop[hidden] { display: none; }
span.follow-pill { cursor: default; }
.follow-info { display: inline-flex; align-items: center; margin-left: var(--space-2); color: var(--color-text-secondary);
    font-size: var(--follow-icon); cursor: help; vertical-align: middle; }
.follow-info:focus-visible { outline: 0; border-radius: var(--radius-pill); box-shadow: var(--focus-ring); }
@media (max-width: 575.98px) { .home-stream .follow-pop { left: auto; right: 0; } }
/* Home stream (fibl_api/home_stream.html): the third slot next to the product cards */
.home-stream-slot:not(:has(.home-stream)) { display: none; }
.home-stream { gap: var(--space-2); }
.home-stream-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-2) var(--space-3); width: 100%; }
html .home-stream-head h2 { margin: 0; font-size: var(--fs-h2); font-weight: var(--fw-semibold); }
.home-stream-line { margin: 0; color: var(--color-text-secondary); flex: none !important; }
.home-stream-line .fibl-log-count { color: var(--color-text); }
.home-stream-rows { width: 100%; margin: 0; padding: 0; list-style: none; }
.home-stream-rows li + li { border-top: var(--border-width) solid var(--color-border); }
.home-stream-row { display: flex; align-items: center; gap: var(--space-2); min-height: var(--row-height-two-line); color: var(--color-text); text-decoration: none; }
a.home-stream-row:hover { color: var(--color-text); background-color: var(--color-hover); }
.home-stream-product { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.home-stream-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--fs-body); font-weight: var(--fw-medium); }
.home-stream-meta { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--fs-caption); color: var(--color-text-secondary); }
.home-stream-day { flex: none; font-size: var(--fs-caption); color: var(--color-text-secondary); }

/* "Neu bei Agrinaut" (notifications/site_news.html) in the listing pages' right column (products.html): sticky 16 px from
   the top from lg, like the changelog panel; a stack of small cards (card token, compact padding, 36 px tile above the
   title, title 14/600, one line 13 grey, blue link); below lg under the grid */
@media (min-width: 992px) { .listing-news-col .site-news { position: sticky; top: var(--space-4); } }
.listing-news-col { margin-top: var(--space-5); }
/* Without the news column (products.html): three product cards per row from lg (the cards say col-sm-6) */
@media (min-width: 992px) { .listing-main.is-wide #products-container > .col-sm-6 { flex: 0 0 auto; width: calc(100% / 3); } }
@media (min-width: 992px) { .listing-news-col { margin-top: 0; } }
.site-news-title { margin: 0 0 var(--space-3); }
/* News card rhythm (owner 2026-10-22), shared by the listing column, the product page and the home tiles: 36 px tile,
   12 px, title 14/600, 4 px, text 13 grey (line-height 1.45), 10 px, the link 13/500 blue right after the text. Padding
   14/16 px; a card is as tall as its content (never stretched to its neighbours, nothing pinned to the bottom). */
.news-card { display: block; align-self: flex-start; height: auto; padding: var(--news-card-padding);
    border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); background-color: var(--color-surface); }
.news-card .notify-tile { display: flex; width: var(--tile-sm); height: var(--tile-sm); margin: 0 0 var(--space-3); font-size: 18px; }
html .news-card .news-card-title { margin: 0; font-size: var(--fs-body); font-weight: var(--fw-semibold); line-height: var(--lh-body);
    color: var(--color-text); }
.news-card .news-card-text { margin: var(--space-1) 0 0; font-size: var(--fs-secondary); line-height: var(--lh-news);
    color: var(--color-text-secondary); }
.news-card .news-card-action { margin-top: var(--news-card-link-gap); font-size: var(--fs-secondary); }
.news-card .news-card-action .notify-view, .news-card .news-card-action .feature-card-link,
.news-card .news-card-action .topic-signup-link, .news-card .news-card-action .news-follow-link {
    margin: 0; font-size: var(--fs-secondary); font-weight: var(--fw-medium); color: var(--color-link); }
.site-news-card + .site-news-card { margin-top: var(--space-3); }
.site-news-text { min-width: 0; }
.site-news-text .badge { margin-bottom: var(--space-1); }
.product-news { margin-top: var(--space-5); }
@media (max-width: 991.98px) { .product-news { display: none; } }  /* below lg the news card is dropped, not stacked */
/* A news card's subscribe in place (notifications/news_subscribe.html): inside the card, never floating */
.news-follow { position: static; }
.news-follow-link { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; }
.news-follow-panel { margin-top: var(--space-2); }
.news-follow-link[aria-expanded="true"] { display: none; }  /* the link turns into the address field */
.news-follow-form { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.news-follow-field { flex: 1 1 160px; min-width: 0; height: var(--control-height-sm); font-size: var(--fs-secondary); }
.news-follow-state { margin: 0; font-size: var(--fs-secondary); color: var(--color-text-secondary); }
.news-follow-state strong { color: var(--color-text); font-weight: var(--fw-semibold); }
.news-follow-on { display: flex; align-items: center; gap: var(--space-3); margin: 0; }
.news-follow-on .news-follow-state { color: var(--color-green); font-weight: var(--fw-medium); }

/* Site footer (templates/footer.html): one row, every item and separator on one baseline (inline-flex, 8 px gaps,
   13 px), centred; wraps on phones */
.site-footer { margin-top: var(--space-4); padding: var(--space-4) var(--space-4); border-top: var(--border-width) solid var(--color-border); }
.site-footer-links { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: var(--space-1) var(--space-2);
    font-size: var(--fs-secondary); line-height: var(--lh-body); }
.site-footer-links > * { display: inline-flex; align-items: baseline; }
.site-footer-copy { color: var(--color-text); }
.site-footer-sep { color: var(--color-text-muted); }
.site-footer-links a { color: var(--color-text-secondary); text-decoration: none; white-space: nowrap; }
.site-footer-links a:hover { color: var(--color-text); text-decoration: underline; }

/* Hub › Verwaltung › E-Mails (notifications/email_settings.html): the notification section's rows and switches;
   under each mail type its internal copy, subject prefix, "Speichern" and "Testmail senden" */
.mail-settings + .mail-settings { margin-top: var(--space-5); }
.mail-settings-item { padding-bottom: var(--space-3); border-bottom: var(--border-width) solid var(--color-border); }
.mail-settings-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2) var(--space-3); margin: 0; }
.mail-settings-field { display: flex; flex-direction: column; gap: var(--space-1); flex: 1 1 200px; min-width: 0; margin: 0;
    font-size: var(--fs-caption); color: var(--color-text-secondary); }
.mail-settings-field .field { height: var(--control-height-sm); font-size: var(--fs-secondary); }
.mail-settings-actions { display: flex; align-items: center; gap: var(--space-3); }
.mail-settings-test { padding: 0; border: 0; background: none; font-size: var(--fs-secondary); font-weight: var(--fw-medium); color: var(--color-link); }
.mail-settings-test:hover { color: var(--color-link-hover); text-decoration: underline; }

/* Mail preview index (templates/mail/preview_index.html, development only) */
.mail-preview-index { margin: var(--space-5) auto var(--space-7); }
.mail-preview-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.mail-preview-table th { padding: var(--space-2) var(--space-3); border-bottom: var(--border-width) solid var(--color-border);
    background-color: var(--color-hover); font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--color-text-secondary); text-align: left; }
.mail-preview-table td { padding: var(--space-3); border-bottom: var(--border-width) solid var(--color-border); vertical-align: top; }
.mail-preview-table td span { font-size: var(--fs-secondary); color: var(--color-text-secondary); }
.mail-log-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-3); }
.mail-log-table { width: 100%; border-collapse: collapse; font-size: var(--fs-secondary); }
.mail-log-table th { padding: var(--space-2); border-bottom: var(--border-width) solid var(--color-border); font-size: var(--fs-caption);
    font-weight: var(--fw-semibold); color: var(--color-text-secondary); text-align: left; }
.mail-log-table td { padding: var(--space-2); border-bottom: var(--border-width) solid var(--color-border); vertical-align: top; overflow-wrap: anywhere; }
.mail-log-table td span { font-size: var(--fs-caption); color: var(--color-text-secondary); }

/* Hub › Verwaltung › Funktionen (features/features.html): a three-way choice per feature (chips, the active one in the
   green tint) */
.feature-row { flex-wrap: wrap; border-bottom: var(--border-width) solid var(--color-border); }
.feature-choice { display: inline-flex; flex: none; gap: var(--space-1); margin: 0; }
.feature-option { height: var(--chip-height); padding: 0 var(--space-3); border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-pill); background-color: var(--color-surface); color: var(--color-text); font-size: var(--fs-secondary); }
.feature-option:hover { background-color: var(--color-hover); }
.feature-option.is-active { border-color: var(--color-green-tint-border); background-color: var(--color-green-tint); font-weight: var(--fw-medium); }
.feature-note { margin-top: var(--space-4); }

/* Navbar heart with the count (navbar/navbar_saved.html) */
.navbar-saved-link { font-size: 20px; }
.navbar-saved-count { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 var(--space-1);
    border-radius: var(--radius-pill); background-color: var(--color-text); color: var(--color-surface); font-size: 10px;
    font-weight: var(--fw-semibold); line-height: 16px; text-align: center; }
.navbar-saved-count[hidden] { display: none; }
/* Home (accounts/saved/home_block.html, home_card.html): the compact block above the product cards, the card under
   "Mehr als Suche" */
.home-saved-card { padding: var(--news-card-padding); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card);
    background-color: var(--color-surface); }
.home-saved-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.home-saved-head h2 { margin: 0; font-size: var(--fs-card-title); }
.home-saved-timeline { list-style: none; margin: var(--space-2) 0 0; padding: 0; font-size: var(--fs-secondary); }
.home-saved-timeline li { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: var(--space-3); padding: 2px 0; }
.home-saved-timeline time { color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.home-saved-quiet { margin: var(--space-2) 0 0; font-size: var(--fs-secondary); color: var(--color-text-secondary); }
.home-saved-empty { display: flex; gap: var(--space-3); align-items: flex-start; }
.home-saved { margin-bottom: var(--space-5); }

/* The one icon rule (owner 2026-10-22, "Quieter product pages"): actions beside a product's h1 and on product cards are
   icon buttons, same box, same icon size; no pill, no ring, no colour; outline = not in use, filled black = in use; hover
   the hover fill only; the label is the title / aria-label. Bell = includes/follow_button.html with variant 'icon' or
   'bell' (.follow.is-icon), heart = accounts/saved/heart.html, printer = .icon-button. */
.product-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.icon-button, .follow.is-icon .follow-pill, .save-heart-button { display: inline-flex; align-items: center; justify-content: center;
    width: var(--icon-button-size); height: var(--icon-button-size); padding: 0; gap: 0; border: 0; border-radius: var(--radius-input);
    background-color: transparent; color: var(--color-text); line-height: 1; opacity: 1;
    text-decoration: none; cursor: pointer; }
.icon-button:hover, .follow.is-icon .follow-pill:hover, .follow.is-icon .follow-pill.is-on:hover, .save-heart-button:hover {
    background-color: var(--color-hover); color: var(--color-text); opacity: 1; }
.follow.is-icon .follow-pill.is-on, .follow.is-icon .follow-pill.is-pending { border: 0; background-color: transparent; color: var(--color-text); }
.icon-button:focus-visible, .follow.is-icon .follow-pill:focus-visible, .save-heart-button:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.follow.is-icon .follow-pop { top: calc(100% + var(--space-1)); }
.follow.is-bell .follow-pop { top: calc(var(--icon-box-row) + var(--space-2)); left: 0; right: 0; width: auto; max-width: none; }
.follow.is-bell .follow-pill, .save-heart.is-card .save-heart-button { width: var(--icon-box-row); height: var(--icon-box-row); }
.save-heart { display: inline-flex; margin: 0; }
.card-follow { gap: var(--space-1); }
.card-follow .save-heart { pointer-events: auto; }
/* "Datenblatt": a text link after the icons, link weight (the print view; the browser's dialog saves it as PDF) */
.product-datasheet { display: inline-flex; align-items: center; gap: var(--space-1); margin-left: var(--space-2); font-size: var(--fs-body);
    color: var(--color-link); text-decoration: none; }
.product-datasheet:hover { color: var(--color-link-hover); text-decoration: underline; }
/* The one status line under the h1 (zwischenfruechte/product/status_line.html) */
.product-status-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin: var(--space-2) 0 0;
    font-size: var(--fs-secondary); color: var(--color-text-secondary); }
/* The key figure (owner 2026-10-22): the time the product may still be used, h2 weight, the page's one loud element */
.product-status-figure { font-size: var(--fs-h2); font-weight: var(--fw-semibold); line-height: var(--lh-title); color: var(--color-text); }
.product-status-figure.is-danger { color: var(--color-danger); }
/* The fertilizer header: the corner holds only the share icon (and the panel's link), nothing above the Hersteller line */
.product-header { position: relative; }
.product-corner { position: absolute; top: 0; right: 0; display: flex; align-items: center; gap: var(--space-2); }
.product-header .product-hersteller { padding-right: calc(var(--icon-button-size) + var(--space-2)); }
.psm-note { margin: var(--space-3) 0 0; font-size: var(--fs-secondary); color: var(--color-text-secondary); }
@media (max-width: 575.98px) { .title-row .product-actions { margin-left: calc(-1 * (var(--icon-button-size) - var(--icon-lg)) / 2); } }
.fert-programs { margin: 0; padding-left: var(--space-4); font-size: var(--fs-body); color: var(--color-text); }
.fert-programs li + li { margin-top: var(--space-1); }

/* Notify card (notifications/notify_card.html, owner 2026-10-22): the request card's shell on product pages without a
   Händler; topics as checkbox rows (the checkbox token), one grey line each; the green tint status line while active */
.notify-card-body { padding-top: var(--space-3); border-top: var(--border-width) solid var(--color-border); }
.notify-card-topic { margin: 0 0 var(--space-3); }
.notify-card-check { display: flex; align-items: flex-start; gap: var(--check-gap); margin: 0 0 var(--space-3); cursor: pointer; }
.notify-card-check > span { display: flex; flex-direction: column; }
.notify-card-topic-title { font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--color-text); }
.notify-card-topic-line { font-size: var(--fs-secondary); color: var(--color-text-secondary); }
.notify-card-guest .field { margin-bottom: var(--space-3); }
.notify-card-active { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-input); background-color: var(--color-green-tint); font-size: var(--fs-body); color: var(--color-text); }
.notify-card-pending { margin: 0; font-size: var(--fs-body); color: var(--color-text); }
.notify-card-foot { margin: var(--space-3) 0 0; padding-top: var(--space-3); border-top: var(--border-width) solid var(--color-border);
    font-size: var(--fs-secondary); color: var(--color-text-secondary); }
.notify-card-foot a { color: var(--color-link); }
.notify-card-wrap { display: block; }

/* Navbar icon row (owner 2026-10-22; navbar/navbar_user_dropdown.html): bell · heart · FiBL list · Konto · Anfrageliste,
   each a 40 px round box with the hover fill, the 24 px outline icon in the text colour, 4 px apart, 24 px after the
   search; all centred on the navbar's middle, no per-icon margins. One count badge: green, white 10/700, a 2 px white
   ring, top right, only above zero (the bell's dot is the same badge without a number). Below lg the same icons; the
   search collapses to the first icon. */
html .add-loginregister { align-items: center; gap: var(--space-1); }
.navbar-icon-item { display: flex; align-items: center; margin: 0; }
.navbar-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--icon-button-size);
    height: var(--icon-button-size); padding: 0; border: 0; border-radius: var(--radius-pill); background: transparent;
    color: var(--color-text); text-decoration: none; }
.navbar-icon:hover, .navbar-icon:focus-visible, .navbar-icon[aria-expanded="true"], .navbar-icon.show { background-color: var(--color-hover); color: var(--color-text); }
.navbar-icon:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.navbar-badge { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 var(--space-1);
    border-radius: var(--radius-pill); background-color: var(--color-green); box-shadow: 0 0 0 2px var(--color-surface);
    color: var(--color-surface); font-size: 10px; font-weight: var(--fw-bold); line-height: 18px; text-align: center; }
.navbar-badge[hidden] { display: none; }
.navbar-badge.is-dot { top: 7px; right: 7px; min-width: 0; width: 10px; height: 10px; padding: 0; }
@media (min-width: 992px) { #navbar-search { margin-right: var(--space-5); } }
@media (max-width: 991.98px) {
    #navbar-search { display: none !important; order: 3; flex-basis: 100%; }
    #navbar-search.is-open { display: flex !important; }
}
html .navbar-light .navbar-toggler.navbar-icon { padding: 0; border-radius: var(--radius-pill); background-color: transparent; font-size: inherit; }
html .navbar-light .navbar-toggler.navbar-icon:hover { background-color: var(--color-hover); }

/* Meine Produkte v2 (owner 2026-10-22; accounts/saved/page.html, file.html): three levels only (h1 / the file's h2,
   card-labels, body with hairlines). The inset list: one rounded container, rows 14/16, separators inset to the title,
   no column headers; the active row the hover fill and the green edge; the selection's contextual row replaces nothing,
   it sits at the top of the container while a row is checked (sticky). The file: a grey card (the hover fill) whose
   white sections sit 10 px apart; the footer on the grey. */
.saved { margin: var(--space-2) 0 var(--space-7); }
.saved-head { margin-bottom: var(--space-4); }
.saved-head h1 { margin: 0 0 var(--space-1); }
.saved-facts { margin: 0; font-size: var(--fs-body); color: var(--color-text-secondary); }
.saved-controls { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2) var(--space-4);
    min-height: var(--chip-height); margin: 0 0 var(--space-3); }
.saved-controls .fibl-log-chips { flex: 1 1 auto; min-width: 0; }
.saved-sort { flex: none; display: flex; align-items: center; height: var(--chip-height); }
.saved .fibl-log-chip-count { color: var(--color-text-muted); }
.saved-sort-toggle { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0; border: 0; background: none;
    font-size: var(--fs-secondary); color: var(--color-text); }
.saved-sort-toggle:hover { color: var(--color-link); }
.saved-sort-menu .dropdown-item { font-size: var(--fs-body); }
.saved-sort-menu .dropdown-item.is-active { font-weight: var(--fw-medium); }
.saved-list { position: relative; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card);
    background-color: var(--color-surface); overflow: clip; }
.saved-rows { list-style: none; margin: 0; padding: 0; }
.saved-item { position: relative; display: flex; align-items: center; gap: var(--space-3); padding: var(--list-row-padding);
    border-left: 3px solid transparent; }
.saved-item + .saved-item::before { content: ''; position: absolute; top: 0; right: 0;
    left: calc(16px + var(--checkbox-size) + var(--space-3)); border-top: var(--border-width) solid var(--color-border); }
.saved-item:hover { background-color: var(--color-hover); }
.saved-item.is-active { border-left-color: var(--color-green); background-color: var(--color-hover); }
.saved-check { flex: none; margin: 0; }
.saved-row { flex: 1 1 auto; display: flex; align-items: center; gap: var(--space-3); min-width: 0; color: var(--color-text); text-decoration: none; }
a.saved-row:hover .saved-name { color: var(--color-link); }
a.saved-row:focus-visible { outline: 2px solid var(--color-green); outline-offset: 2px; border-radius: var(--radius-badge); }
.saved-product { flex: 1 1 auto; min-width: 0; }
.saved-name { display: block; font-size: var(--fs-h3); font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-meta { display: block; font-size: var(--fs-secondary); color: var(--color-text-secondary); overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
.saved-trailing { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.saved-trailing-line { font-size: var(--fs-caption); color: var(--color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.saved-bell { flex: none; display: inline-flex; width: var(--icon-box-row); justify-content: center; }
.saved-bell .follow.is-bell .follow-pop { left: auto; right: 0; width: 300px; }
/* The selection's contextual row: same height as a row, hover fill, sticky at the top of the list */
.saved-context { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: var(--space-3); margin: 0;
    padding: var(--list-row-padding); padding-left: calc(16px + 3px); border-bottom: var(--border-width) solid var(--color-border);
    background-color: var(--color-hover); font-size: var(--fs-secondary); }
.saved-context[hidden] { display: none; }
.saved-context-count { color: var(--color-text); font-weight: var(--fw-medium); }
.saved-context-actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.saved-context-actions button { padding: 0; border: 0; background: none; color: var(--color-link); font-size: var(--fs-secondary); }
.saved-context-actions button:hover { text-decoration: underline; }
.saved-context-actions button.is-danger { color: var(--color-danger); }
.saved-nomatch { padding: var(--list-row-padding); }
.saved-soon { margin: var(--space-3) 0 0; font-size: var(--fs-secondary); line-height: var(--lh-body); color: var(--color-text-secondary); }
.saved-soon .badge { margin-right: var(--space-1); vertical-align: 1px; }
.saved-soon form, .saved-soon .topic-signup, .saved-soon .topic-signup-link { display: inline; width: auto; margin: 0; }
.saved-empty { padding: var(--card-padding); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); }
.saved-empty h2 { margin: var(--space-3) 0 var(--space-2); }
.saved-empty p { margin: 0 0 var(--space-2); font-size: var(--fs-body); color: var(--color-text-secondary); }
.saved-empty-tile { display: inline-flex; align-items: center; justify-content: center; width: var(--tile-sm); height: var(--tile-sm);
    border-radius: var(--radius-input); background-color: var(--color-green-tint); color: var(--color-text); }
.saved-empty-links a { color: var(--color-link); font-weight: var(--fw-medium); }
/* The file */
.saved-panel { min-height: var(--file-min-height); padding: var(--space-3); border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-card); background-color: var(--color-hover); }
.saved-file-empty { display: flex; align-items: center; justify-content: center; min-height: calc(var(--file-min-height) - 2 * var(--space-3));
    margin: 0; text-align: center; font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--color-text-muted); }
.saved-file { display: flex; flex-direction: column; gap: var(--file-gap); }
.saved-file-card { padding: var(--card-padding-compact); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-input);
    background-color: var(--color-surface); }
.saved-file-card .card-label { margin-top: 0; }
.saved-file-maker { margin: 0 0 2px; font-size: var(--fs-secondary); color: var(--color-text-secondary); }
.saved-file-title { margin: 0; }
.saved-file-title a { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-text); text-decoration: none; }
.saved-file-title a:hover { color: var(--color-link); }
.saved-file-facts { margin: var(--space-3) 0 0; }
.saved-file-docs { list-style: none; margin: 0; padding: 0; font-size: var(--fs-body); }
.saved-file-docs li + li { margin-top: var(--space-1); }
.saved-file-docs a { color: var(--color-link); }
.saved-file-history { list-style: none; margin: 0; padding: 0; font-size: var(--fs-body); }
.saved-file-history li { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-2) 0; }
.saved-file-history li + li { border-top: var(--border-width) solid var(--color-border); }
.saved-file-history time { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.saved-file-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-1) var(--space-1) 0; }
.saved-file-foot form { margin: 0; }
.saved-file-bell-button { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0; border: 0; background: none;
    font-size: var(--fs-body); color: var(--color-text); }
.saved-file-bell-button:hover { color: var(--color-link); }
.saved-file-remove { padding: 0; border: 0; background: none; color: var(--color-text-muted); font-size: var(--fs-secondary); }
.saved-file-remove:hover { color: var(--color-text); text-decoration: underline; }
.saved .saved-soon { padding: 0 var(--space-1); }
@media (min-width: 992px) {
    .saved-panel { position: sticky; top: var(--space-4); max-height: calc(100vh - 2 * var(--space-4)); overflow-y: auto; }
}
/* Below lg (owner 2026-10-22): the list unchanged, the trailing stack wraps under the subtitle; the file's white sections
   open under the tapped row (no grey card: .saved-item-file, static/js/saved.js); the selection's contextual row is a bar
   pinned to the bottom of the viewport */
@media (max-width: 991.98px) {
    .saved-panel { display: none; }
    .saved-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; column-gap: var(--space-3); }
    .saved-row { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
    .saved-product { width: 100%; }
    .saved-trailing { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-2); text-align: left; }
    .saved-check { margin-top: 2px; }
    .saved-item-file { grid-column: 1 / -1; margin-top: var(--space-3); }
    .saved-item-file .saved-file-foot { padding: 0; }
    .saved-context { position: fixed; top: auto; bottom: 0; left: 0; right: 0; z-index: 1060; flex-wrap: wrap;
        padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
        border-top: var(--border-width) solid var(--color-border); border-bottom: 0; box-shadow: var(--shadow-float); }
    .saved-context-actions { flex-basis: 100%; margin-left: 0; justify-content: space-between; }
    .saved.has-selection { padding-bottom: 96px; }
}