/* ==========================================================================================
   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-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: 5px;
    --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 "Neu bei Agrinaut" cards) */
    --title-row-gap: 14px;        /* h1 and the follow pill on one line */
    --follow-icon: 16px;          /* the follow pill's bell */
    --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;
}

/* 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; }
/* 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 (design system): 20 px, green when checked */
.checkbox { flex: none; width: var(--checkbox-size); height: var(--checkbox-size); margin: 0; accent-color: var(--color-green); }
/* 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; }
.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; }
    .auth-grid-spacer { display: none; }
}
/* Info icons with a tooltip */
.bi[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. */
/* Badge palettes (no borders), identical in tiles, search, live search and on the product page.
   Approval: ok = zugelassen, danger = nicht mehr zugelassen / nicht mehr geführt, neutral =
   Zusatzstoff. Deadline: warn = Aufbrauchfrist läuft (> 30 days) / Zulassung endet bald,
   urgent = Aufbrauchfrist läuft (<= 30 days), ended = Aufbrauchfrist abgelaufen.
   FiBL badges get dedicated classes from the bool_badge_class filter (their stored style stays). */
.badge-status-ok { background-color: var(--color-green-tint) !important; color: var(--color-text) !important; }
.badge-status-danger { background-color: #fdecec !important; color: var(--color-danger) !important; }
.badge-status-neutral { background-color: #f1f1ef !important; color: #4a4a48 !important; }
.badge-status-warn { background-color: #fff1e0 !important; color: #a15c07 !important; }
.badge-status-urgent { background-color: #c2410c !important; color: var(--color-surface) !important; }
.badge-status-ended { background-color: var(--color-danger) !important; color: var(--color-surface) !important; }
.badge-fibl { background-color: var(--color-fibl-tint) !important; color: var(--color-fibl) !important; font-weight: var(--fw-bold) !important; }
.badge-fibl-new { background-color: #eeedfe !important; color: #3c3489 !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 { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); box-shadow: none; }  /* static card: no shadow */
.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-bold); }
.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 .bi { flex-shrink: 0; font-size: var(--fs-body); line-height: var(--lh-title); }
.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-count .bi { font-size: var(--fs-caption); }
.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 .bi-search { position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-size: var(--fs-secondary);
    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.bi-arrow-repeat, .fibl-log-count .bi-arrow-repeat { 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 uses the Anfrageliste button's classes (navbar_cart.html); only the icon size and the dot are ours */
.notify-bell-icon { display: inline-block; width: 23px; height: 23px; font-size: 23px; line-height: 23px; vertical-align: middle; }
.notify-bell-icon::before { display: block; vertical-align: top; }  /* the 23 px box of the cart's svg */
.notify-dot { top: 7px; left: 90%; width: 8px; height: 8px; border-radius: 50%; background-color: var(--color-green);
    box-shadow: 0 0 0 2px var(--color-surface); }
.notify-dot[hidden] { display: none; }
/* 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-border-field); transition: background-color .15s; }
.notify-switch-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
    background-color: var(--color-surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .15s; }
.notify-switch[aria-checked="true"] .notify-switch-track { background-color: var(--color-green); }
.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; align-items: center; justify-content: flex-start; gap: var(--space-2); }
.address-check label { margin: 0; }
.address-add { margin: var(--space-4) 0 0; font-size: var(--fs-body); }
.address-add .bi { 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 .bi { font-size: var(--fs-caption); transition: transform .15s; }
.request-toggle[aria-expanded="true"] .bi { 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; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); height: 100%;
    padding: var(--card-padding-feature); background-color: var(--color-surface); border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-card); font-size: var(--fs-secondary); }
.feature-card.is-soon { border-style: dashed; border-color: var(--color-border-field); }
.feature-card .notify-tile { width: 40px; height: 40px; font-size: 20px; }
html .feature-card h3, html .feature-card h2 { margin: var(--space-1) 0 0; font-size: var(--fs-card-title); font-weight: var(--fw-semibold); }
.feature-card p { margin: 0; color: var(--color-text-secondary); flex: 1 1 auto; }
.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-body);
    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; }
a.notify-row-title.is-link .bi { font-size: var(--fs-caption); color: var(--color-text-muted); }
a.notify-row-title.is-link:hover, a.notify-row-title.is-link:hover .bi { 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; }
.follow-pill { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--control-height-sm); 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-medium); line-height: 1; white-space: nowrap;
    text-decoration: none; cursor: pointer; }
.follow-pill .bi { font-size: var(--follow-icon); }
.follow-pill:hover { background-color: var(--color-hover); color: var(--color-text); }
.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); }
.follow-pill.is-on { border-color: var(--color-green-tint-border); 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; }
@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); }
@media (min-width: 992px) { .listing-news-col { margin-top: 0; } }
.site-news-title { margin: 0 0 var(--space-3); }
.site-news-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--card-padding-compact);
    border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); background-color: var(--color-surface); }
.site-news-card + .site-news-card { margin-top: var(--space-3); }
.site-news-card .notify-tile { width: var(--tile-sm); height: var(--tile-sm); font-size: var(--fs-h2); }
.site-news-text { min-width: 0; }
.site-news-name { margin: 0; font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--color-text); }
.site-news-line { margin: var(--space-1) 0 0; font-size: var(--fs-secondary); color: var(--color-text-secondary); }
.site-news-text .badge { margin-bottom: var(--space-1); }

/* 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); }