/* Jeddeloh – App-Glue: Seiten-Scaffolding, das die Signatur-Komponenten verbindet
   (Header-/Footer-Layout, Listing mit Sidebar, Filter, Pagination, PDP-Raster).
   Nutzt die Design-Tokens; ergaenzt theme.css/components.css/responsive.css. */

img { max-width: 100%; }
.icon { display: inline-block; }

/* ---------- A11y-Grundlagen ---------- */
/* Sichtbarer Tastatur-Fokus (nur :focus-visible — Maus-Klicks bleiben ringfrei) */
:focus-visible { outline: 3px solid var(--color-tertiary); outline-offset: 2px; }
/* „Zum Inhalt springen" — unsichtbar, bis es per Tab fokussiert wird */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--color-primary); color: var(--color-white); padding: 10px 18px;
  font-family: var(--font-heading); }
.skip-link:focus { left: 0; color: var(--color-white); }
/* Screenreader-only (fokussierbar, z. B. für den Mobil-Filter-Umschalter) */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Top-Bar ---------- */
.top-bar-inner { display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; column-gap: var(--space-4); font-size: 13px; }
.top-bar-contact { display: flex; gap: 18px; }  /* vormals toter span-Selektor: Links klebten aneinander */
@media (max-width: 575px) { .top-bar-contact a[href^="mailto"] { display: none; } }
.top-bar-tools { display: flex; align-items: center; gap: 16px; }
.top-bar-customer { color: var(--color-topbar-link); font-weight: var(--fw-semibold);
  max-width: 32ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-bar-logout button { border: none; background: none; padding: 0; cursor: pointer;
  font-size: 13px; color: var(--color-topbar-link); transition: color var(--duration-base); }
.top-bar-logout button:hover { color: var(--color-tertiary); }
.lang-switch { position: relative; }
.lang-switch > summary { list-style: none; cursor: pointer; color: var(--color-topbar-link); }
.lang-switch > summary::-webkit-details-marker { display: none; }
.lang-switch ul { position: absolute; right: 0; top: 100%; margin: 0; padding: 4px 0; min-width: 130px;
  list-style: none; background: var(--color-white); border: 1px solid var(--color-border);
  box-shadow: var(--shadow-flyout); z-index: var(--z-flyout); }
.lang-switch li a { display: block; padding: 6px 14px; color: var(--color-text); }
.lang-switch li a:hover, .lang-switch li a.active { background: var(--color-secondary); color: var(--color-primary); text-decoration: none; }

/* ---------- Header ---------- */
/* Sticky: Suche + Warenkorb bleiben beim Scrollen erreichbar (P0). Ganzer <header>
   als Einheit, damit Top-Bar, CC-Tab und Such-Dropdown ihren Positionsbezug behalten.
   z-index 100: über Inhalt/Filter-Sidebar/Dropdown (70), unter Toasts (200). */
header { position: sticky; top: 0; z-index: var(--z-header); }
.header-row { display: flex; align-items: center; gap: 22px; }
.header-logo { display: flex; align-items: center; gap: 6px; color: var(--color-white); flex: 0 0 auto; }
.header-logo:hover { color: var(--color-white); }
.header-logo .brand-zu { font-style: italic; font-family: var(--font-heading); font-size: 20px; }
.header-logo .brand-text { display: flex; flex-direction: column; line-height: 1; font-family: var(--font-heading); }
.header-logo .brand-text strong { font-size: 22px; letter-spacing: 2px; }
.header-logo .brand-text small { font-size: 11px; letter-spacing: 3px; color: var(--color-tertiary); }

/* Ein Menuepunkt darf nie mitten im Wort brechen („TOP / ARTIKEL"). Wird es eng,
   rutscht lieber der ganze Punkt in eine zweite Zeile — der Header waechst dann mit
   (``min-height`` statt fester Hoehe, siehe unten). */
.main-navigation { display: flex; align-items: center; flex-wrap: wrap; flex: 1 1 auto;
  min-width: 0; column-gap: var(--space-3); row-gap: var(--space-1); }
.main-navigation-link { display: inline-flex; align-items: center; white-space: nowrap; }
.main-navigation-link:hover .main-navigation-link-text { color: var(--color-tertiary); }

/* EIN Satz Symbole. Vorher standen in der Kopfzeile vier Bauarten nebeneinander:
   ein astronomisches Zeichen als Lupe, zwei Emoji (die Windows FARBIG rendert —
   daher das bunte Männchen auf dem Grün), ein hauchdünnes Textherz und ein SVG.
   Jetzt: 24px, currentColor, gleiche Strichstärke (siehe partials/icons.html). */
.header-icon { display: block; width: 24px; height: 24px; flex: 0 0 auto; }

/* Suche: fester Platz statt "so viel wie übrig bleibt" — vorher brach der
   Platzhalter mitten im Wort ab. Nur das Textfeld schrumpft, die Knöpfe nie. */
/* Die Suche steht gleich hinter dem Logo: Sie ist das meistgenutzte Bedienelement
   im Haus (Artikelnummern aus Excel, botanische Namen) und gehoert nicht an den
   aeussersten Rand. Nur das Textfeld schrumpft, die Knoepfe nie. */
.header-search { display: flex; align-items: center; flex: 0 1 380px; min-width: 220px;
  height: 46px; border: 1px solid var(--color-on-primary-faint); background: var(--color-white); }
/* Eigene Schriftgröße: geerbt kam die fluide Textgröße (bis 18px) — im schmalen Feld
   wirkte das plump und der Platzhalter brach ab. 16px, damit iOS nicht zoomt. */
.header-search-input { flex: 1 1 0; width: 0; min-width: 0; padding: 8px 12px; border: 0;
  font-size: 16px; line-height: 1.4; background: var(--color-white); color: var(--color-text);
  caret-color: var(--color-text); }
/* Weisser Grund braucht dunkle Schrift — sonst tippt man ins Unsichtbare. */
.header-search-input::placeholder { color: var(--color-muted); }
.header-search-btn { display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 44px; width: 44px; height: 44px;
  padding: 0; border: 0; background: var(--color-primary); color: var(--color-on-primary);
  cursor: pointer; }
.header-search-btn:hover { color: var(--color-tertiary); }
/* Strichcode scannen (16.10.2026) - wie das Mikrofon daneben */
.header-search-scan { display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 var(--tap-target); width: var(--tap-target); height: var(--tap-target); padding: 0;
  border: 0; border-left: 1px solid var(--color-on-primary-faint); background: var(--color-primary);
  color: var(--color-on-primary); cursor: pointer; }
.header-search-scan[hidden] { display: none; }
.header-search-scan:hover { color: var(--color-tertiary); }
.header-search-scan svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; }
.scan-dialog { border: 0; border-radius: var(--radius-card, 8px); padding: 14px; max-width: calc(100vw - 32px);
  text-align: center; }
.scan-dialog::backdrop { background: rgba(0, 0, 0, .6); }
.scan-bild { display: block; width: min(28rem, 80vw); aspect-ratio: 4 / 3; background: #000; object-fit: cover;
  border-radius: 6px; }
.scan-hinweis { margin: 10px 0; color: var(--color-muted); font-size: var(--fs-meta); max-width: 28rem; }

/* Gruppierung über Abstand: Werkzeuge eng beieinander (eine Gruppe), der Warenkorb
   durch Trennlinie und Luft abgesetzt (eigene Aufgabe). */
.header-tools { display: flex; align-items: center; gap: var(--space-1); flex: 0 0 auto; }
.header-tool { display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap-target); height: var(--tap-target); color: var(--color-white); }
.header-tool:hover { color: var(--color-tertiary); }
/* Kontomenü: Bestellungen, Vorlagen, Schnellbestellung — aus der Kopfleiste hierher */
.header-konto { position: relative; }
.konto-menue { position: absolute; top: 100%; right: 0; z-index: var(--z-flyout); min-width: 220px;
  display: grid; padding: 6px 0; background: var(--color-white); box-shadow: var(--shadow-hover);
  border-top: 3px solid var(--color-tertiary);
  visibility: hidden; opacity: 0; transition: opacity var(--duration-fast) var(--ease-standard),
  visibility 0s linear var(--duration-fast); }
.header-konto:hover .konto-menue, .header-konto:focus-within .konto-menue {
  visibility: visible; opacity: 1; transition-delay: 0s; }
.konto-menue a { padding: 9px 16px; font-family: var(--font-heading); font-size: 15px;
  text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-primary); white-space: nowrap; }
.konto-menue a:hover, .konto-menue a:focus { background: var(--color-secondary); }
/* Am Touch gibt es kein Überfahren. Früher führte das Symbol dort direkt zum Konto – an Bestellungen, Vorlagen und
   Schnellbestellung kam man nicht (Uwe, 25.10.2026). Jetzt öffnet ein Tipp das Menü (.konto-tipp, ohne Skript). */
.konto-tipp { display: none; }
@media (pointer: coarse), (max-width: 991px) {
  .header-konto > .konto-link, .header-konto > .konto-menue { display: none; }
  .konto-tipp { display: block; }
  .konto-tipp > summary { list-style: none; cursor: pointer; }
  .konto-tipp > summary::-webkit-details-marker { display: none; }
  .konto-tipp[open] > summary { color: var(--color-tertiary); }
  .konto-tipp[open] > .konto-menue { visibility: visible; opacity: 1; transition: none; }
}
@media (max-width: 991px) {
  /* Am Handy unter dem ganzen Kopf in voller Breite - rechtsbündig am Symbol ragte es links aus dem Bild */
  .header-konto { position: static; }
  .konto-tipp > .konto-menue { left: 16px; right: 16px; min-width: 0; }
  .konto-tipp > .konto-menue a { padding: 14px 16px; font-size: 16px; }
}

.header-cart { display: flex; align-items: center; gap: var(--space-2); flex: 0 0 auto;
  min-width: max-content; padding-left: var(--space-5);
  border-left: 1px solid var(--color-on-primary-faint); color: var(--color-white); }
.header-cart:hover { color: var(--color-tertiary); }
.header-cart-symbol { position: relative; display: inline-flex; align-items: center;
  justify-content: center; width: var(--tap-target); height: var(--tap-target); }
.header-cart-summe { font-family: var(--font-heading); font-size: 15px;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Positionszähler AUF dem Icon statt daneben — sonst stehen zwei Zahlen nebeneinander. */
.header-cart .cart-count { position: absolute; top: 2px; right: 0;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--radius-round);
  background: var(--color-tertiary); color: var(--color-white); font-size: 12px; line-height: 1; }
.header-cart .cart-count.is-empty { display: none; }

/* Kategorien beim Überfahren: Wer einkauft, soll sehen, was unter einem Menüpunkt
   liegt, ohne erst dorthin zu klicken. :focus-within öffnet es auch per Tastatur. */
.main-navigation-item { position: relative; display: flex; align-items: center; }
.nav-caret { display: inline-flex; }
.nav-caret .header-icon { width: 12px; height: 12px; }
.main-navigation-item.has-flyout:hover .nav-caret,
.main-navigation-item.has-flyout:focus-within .nav-caret { transform: rotate(180deg); }
.nav-flyout { position: absolute; top: 100%; left: -12px; z-index: var(--z-flyout);
  visibility: hidden; opacity: 0; transition: opacity var(--duration-fast) var(--ease-standard),
  visibility 0s linear var(--duration-fast); }
.main-navigation-item.has-flyout:hover .nav-flyout,
.main-navigation-item.has-flyout:focus-within .nav-flyout {
  visibility: visible; opacity: 1; transition-delay: 0s; }
/* Feste Breite statt „so breit wie der Inhalt": Absolut positioniert wuerde das Menue
   sonst je Punkt unterschiedlich breit — und lange Namen wie „Schling- und
   Kletterpflanzen" quetschten sich in schmale Spalten. */
.nav-flyout-inner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2) var(--space-6); width: min(880px, 88vw); max-height: 70vh;
  overflow-y: auto; padding: var(--space-5) var(--space-6);
  background: var(--color-white); border-top: 3px solid var(--color-tertiary);
  box-shadow: var(--shadow-flyout); }
.nav-flyout-gruppe { display: flex; flex-direction: column; break-inside: avoid; }
.nav-flyout-kopf { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: 1rem;
  text-transform: uppercase; letter-spacing: 1px; color: var(--color-primary);
  padding-bottom: var(--space-1); margin-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border); }
.nav-flyout-link { padding: 3px 0; font-size: var(--fs-small); color: var(--color-text); }
.nav-flyout-link:hover, .nav-flyout-kopf:hover { color: var(--color-tertiary);
  text-decoration: none; }
.nav-flyout-mehr { color: var(--color-accent-text); }
/* Ohne Maus gibt es kein Überfahren — dort führt der Menüpunkt einfach zum Ziel. */
@media (pointer: coarse) { .nav-flyout { display: none; } .nav-caret { display: none; } }
.cc-container { flex: 0 0 auto; }
/* CC-Badge haengt als Tab UNTER dem Header rechts (wie im Altsystem) */
@media (min-width: 992px) {
  .cc-container { position: absolute; top: 100%; right: 0; height: auto; padding: 4px 15px; z-index: var(--z-cc); }
}

/* ---------- Footer ---------- */
.footer-inner { display: grid; grid-template-columns: 1.3fr 1.4fr 1fr 1fr; gap: 24px; padding-bottom: 30px; }
.footer-logo-img { max-width: 200px; width: 100%; height: auto; }

/* ---------- Hero / Home ---------- */
.hero { background: linear-gradient(120deg, var(--color-hero-start), var(--color-hero-end)); min-height: 320px; display: flex; align-items: flex-end; }
@media (max-width: 767px) { .hero { min-height: 230px; } }
.hero-overlay { width: 100%; padding: 28px 0; background: linear-gradient(transparent, var(--color-overlay)); }
.hero-overlay .headline { color: var(--color-white); }
.hero-overlay .headline::after { background-color: var(--color-tertiary); }
.hero-overlay p { color: var(--color-white); }
/* Überschrift, Text und Knopf untereinander - ohne Text stand der Knopf sonst neben der Überschrift (02.10.2026) */
.hero-overlay .container-wide { display: flex; flex-direction: column; align-items: flex-start; }
.home-intro { padding: 30px 0 50px; }
/* Marketing-Studio (02.10.2026): Motiv mit Foto, Fokuspunkt über object-position */
.hero.hero-bild { position: relative; overflow: hidden; background: var(--color-hero-start); }
.hero-bild > .hero-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-bild > .hero-overlay { position: relative; }
.hero-bild .btn-primary { background-color: var(--color-primary); color: var(--color-white); }
.hero-bild .btn-primary:hover { background-color: var(--color-white); color: var(--color-primary); }
.kategorie-einleitung { margin: 4px 0 18px; font-size: 1.02rem; line-height: 1.55; max-width: 75ch; white-space: pre-line; }
.home-abschnitt .kategorie-banner { margin-bottom: 10px; }
.studio-vorschau-hinweis { background: #fff3cd; color: #6b5200; border-bottom: 2px solid #e6d27a; padding: 8px 16px;
  font-size: 14px; text-align: center; }
.home-banners { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; padding: 28px 0 10px; }
.home-banner { border: 1px solid var(--color-border); border-radius: var(--radius-card); overflow: hidden; }
.home-banner img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.home-banner h3 { font-family: var(--font-heading); margin: 12px 14px 6px; }
.home-banner p { margin: 0 14px 12px; color: var(--color-muted); font-size: 14px; }
.home-banner .btn-block { margin: 0 14px 14px; width: calc(100% - 28px); }
/* Jede Inhaltsseite bekommt Luft nach der Kopfleiste — vorher galt die Regel nur für
   <section class="page">, und die Seiten sind <div>: die Überschrift klebte am Header. */
.page { padding-block: 28px 56px; }

/* ---------- Catalog / Listing ---------- */
.catalog-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.catalog-head-tools { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.catalog-count { color: var(--color-muted); font-family: var(--font-heading); font-size: 14px; }
.sorting, .page-size { padding: 6px 10px; display: inline-flex; align-items: center; gap: 8px; }
.sorting select, .page-size select { border: none; box-shadow: none; font-family: var(--font-heading); }

.listing-layout { display: block; }
.filter-toggle-btn { display: none; }
@media (min-width: 992px) {
  .listing-layout { display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: start; }
  .filter-sidebar { position: sticky; top: 1rem; }
}
/* Mobile: Filter als ein-/ausklappbarer Drawer (No-JS, Checkbox-Hack).
   Checkbox liegt als .sr-only im DOM (nicht `hidden`) -> Tastatur-fokussierbar. */
@media (max-width: 991px) {
  .filter-toggle-btn { display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px;
    border: 2px solid var(--color-primary); background: var(--color-white); color: var(--color-primary);
    text-transform: uppercase; font-weight: var(--fw-bold); padding: 8px 18px; cursor: pointer;
    min-height: var(--tap-target); }
  .filter-sidebar { display: none; }
  .filter-toggle-cb:checked ~ .filter-sidebar { display: block; margin-bottom: 18px; }
}
.filter-toggle-cb:focus-visible ~ .filter-toggle-btn,
.nav-toggle-cb:focus-visible ~ .nav-toggle { outline: 3px solid var(--color-tertiary); outline-offset: 2px; }

.filter-panel__heading { font-family: var(--font-heading); }
.filter-panel-item-toggle { display: block; padding: 10px 12px; margin-bottom: 10px; cursor: pointer; }
.filter-panel-item-toggle > summary { list-style: none; font-family: var(--font-heading); font-weight: var(--fw-bold);
  text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; }
.filter-panel-item-toggle > summary::-webkit-details-marker { display: none; }
.filter-panel-item-toggle > summary::after { content: ""; width: 12px; height: 8px; background: no-repeat center/contain url('/static/assets/chevron_down.svg'); }
.filter-panel-body { padding-top: 10px; }
.filter-panel-body input { width: 100%; }
.filter-actions { margin: 12px 0 18px; }

.az-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.az-grid a { text-align: center; padding: 5px 0; border: 1px solid var(--color-border); font-family: var(--font-heading); color: var(--color-primary); }
.az-grid a:hover, .az-grid a.active { background: var(--color-primary); color: var(--color-white); text-decoration: none; }

.pagination { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 30px; font-family: var(--font-heading); flex-wrap: wrap; }
.pagination a { padding: 6px 14px; border: 2px solid var(--color-primary); color: var(--color-primary); min-width: var(--tap-target); text-align: center; }
.pagination a:hover { background: var(--color-primary); color: var(--color-white); text-decoration: none; }
.pagination-current { padding: 6px 14px; border: 2px solid var(--color-primary); background: var(--color-primary); color: var(--color-white); min-width: var(--tap-target); text-align: center; }
.pagination-gap { color: var(--color-muted); }
.empty { color: var(--color-muted); padding: 40px 0; }

/* Aktive-Filter-Chips (mit Schließen-Kreuz) + Zurücksetzen.
   Eine Schrift, eine Größe, eine Höhe: „Zurücksetzen" unterscheidet sich durch die
   gestrichelte Kontur, nicht durch eine eigene Schriftart in anderer Größe. */
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.filter-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px;
  border: 1px solid var(--color-border); background: var(--color-secondary);
  color: var(--color-text); font-size: var(--fs-small); line-height: 1.4; }
.filter-chip:hover { border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; }
.filter-chip > span { font-weight: var(--fw-bold); }
.filter-chip-reset { background: transparent; border-style: dashed; color: var(--color-muted); }

/* ---------- Produktkarte (Ergaenzung zu components.css) ---------- */
.product-box.box-standard { display: flex; flex-direction: column;
  transition: box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
.product-box.box-standard:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
/* Preisblock ans Kartenende drücken -> Add-Kreise über alle Karten hinweg bündig */
.product-box.box-standard .product-info { display: flex; flex-direction: column; flex: 1 1 auto; }
.product-box.box-standard .product-price-row { margin-top: auto; padding-top: 8px; }

/* Bildbereich: Kontextbild ⇄ Freisteller (Cutout) beim Hover (rein per CSS). */
.product-image-wrapper { position: relative; background: var(--color-secondary); overflow: hidden; }
.product-image-link { position: absolute; inset: 0; display: block; }
.product-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: opacity var(--duration-base) var(--ease-standard); }
/* Das Freisteller-Bild beim Ueberfahren ist meist quadratisch und liess mit
   ``contain`` breite Raender stehen. ``cover`` fuellt den Rahmen proportional;
   beschnitten wird oben/unten, wo bei einem Freisteller ohnehin Luft ist. */
.product-image-cutout { object-fit: cover; object-position: center;
  background: var(--color-white); opacity: 0; }
.product-box.box-standard:hover .product-image-cutout { opacity: 1; }
.product-box.box-standard:has(.product-image-cutout):hover .product-image-context { opacity: 0; }
.product-image-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--color-tertiary); font-family: var(--font-heading); font-size: 3rem; }

.product-name { display: block; }
.product-name:hover { color: var(--color-tertiary); }
.product-box-data { color: var(--color-muted); margin: 4px 0 0; }

/* Kompakte Meta: Qualität · Größe (ohne Labels).
   Qualität und Größe sind Einkaufsdaten, keine Fußnote: dunkler und größer als die
   übrigen Hinweise, die Qualität zusätzlich fett (Uwe, 22.09.2026 — „C 4,5" war kaum
   zu lesen). */
.product-card-meta { display: flex; flex-wrap: wrap; align-items: baseline; color: var(--color-text);
  font-size: 15px; line-height: 1.4; margin: 8px 0 12px; }
.product-card-meta:empty { display: none; }
.product-card-meta .product-quality { font-weight: var(--fw-bold); }
.product-card-meta span:not(:first-child)::before { content: "·"; margin: 0 8px; color: var(--color-border); }

/* Preisblock (Preis + „Ihr VK …" + „Zuletzt bestellt …") + runder Warenkorb-Kreis */
.product-price-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 2px; }
.product-price-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.product-hint { color: var(--color-muted); font-size: var(--fs-meta); }
.add-circle-zahl { display: block; line-height: 1.05; }
.add-circle-einheit { display: block; font-size: 10px; line-height: 1; letter-spacing: .06em;
  font-weight: var(--fw-regular); opacity: .9; text-transform: uppercase; }
.add-circle { flex: 0 0 auto; width: 54px; height: 54px; border-radius: var(--radius-round); border: none;
  background: var(--color-primary); color: var(--color-white); cursor: pointer;
  font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: 17px; line-height: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; box-shadow: var(--shadow-card);
  transition: filter var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard); }
.add-circle:hover { filter: brightness(0.93); }
.add-circle.in-cart { background: var(--color-tertiary); }

/* Wunschzettel-Button: im Bild als gruener Kreis, auf der PDP als schlichtes Icon */
.wishlist-toggle { cursor: pointer; border: none; background: transparent; font-size: 18px; line-height: 1; }
.product-image-wrapper .wishlist-toggle { position: absolute; top: 12px; right: 12px; z-index: 1;
  width: var(--tap-target); height: var(--tap-target);
  border-radius: var(--radius-round); background: var(--color-primary); color: var(--color-white); display: flex; align-items: center; justify-content: center; }
.product-image-wrapper .wishlist-toggle.active { background: var(--color-tertiary); }

/* ---------- PDP ---------- */
.pdp-breadcrumb { font-size: 14px; color: var(--color-muted); margin: 14px 0 10px; }
.pdp-breadcrumb a { color: var(--color-primary); }
.pdp-back { margin-bottom: 18px; padding: 4px 22px; }
/* Auf dem Handy nahm das Foto im Hochformat fast den ganzen Bildschirm — Preis und
   Bestellknopf lagen weit darunter. Jetzt hoechstens 300 px hoch und vollstaendig zu
   sehen (Codex-Befund, 22.09.2026). Die Reihenfolge bleibt: Bild, dann Name und Preis. */
/* minmax(0, …) statt 1fr: sonst waechst die Spalte mit dem breitesten Inhalt mit (ein
   langer Glossar-Link machte die Seite auf dem Handy 562 statt 360 px breit, 30.09.2026). */
.pdp-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.pdp-layout > * { min-width: 0; }
@media (min-width: 768px) { .pdp-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 48px; } }
.pdp-media .pdp-main { width: 100%; aspect-ratio: 2/3; object-fit: cover; background: var(--color-secondary); }
/* Die Handy-Regel muss NACH der allgemeinen stehen - vorher hat diese sie ueberschrieben
   und das Foto wurde doch im Hochformat 2:3 beschnitten (Messung 30.09.2026: 63 % weg). */
@media (max-width: 767px) {
  .pdp-layout { gap: 18px; }
  .pdp-media .pdp-main { aspect-ratio: auto; max-height: 300px; object-fit: contain; }
}
.pdp-placeholder { aspect-ratio: 2/3; background: var(--color-secondary); display: flex; align-items: center; justify-content: center;
  font-size: 5rem; color: var(--color-tertiary); font-family: var(--font-heading); }
/* Alter des Fotos: leise unter dem Bild. Nur wirklich neue Aufnahmen werden gruen
   hervorgehoben — bei 91 % Katalogbildern waere alles andere Laerm. */
.pdp-fotodatum { margin-top: 8px; font-size: var(--fs-meta); color: var(--color-muted); }
.pdp-fotodatum.is-frisch { display: inline-block; padding: 2px 8px; border-radius: 10px;
  background: #dfeccb; color: var(--color-on-tertiary); font-weight: var(--fw-semibold); }
.pdp-thumbs { display: flex; gap: 8px; margin-top: 10px; }
.pdp-thumbs img { width: 64px; height: 96px; object-fit: cover; border: 1px solid var(--color-border); }
.pdp-subtitle { font-family: var(--font-heading); text-transform: uppercase; color: var(--color-muted); letter-spacing: 1px; margin: 4px 0 18px; }

.price-table { width: 100%; border-collapse: collapse; margin: 14px 0; }
.price-table th { text-align: left; background: var(--color-secondary); color: var(--color-text); font-family: var(--font-heading);
  text-transform: uppercase; padding: 10px 12px; }
.price-table td { padding: 10px 12px; border-bottom: 1px solid var(--color-border); }
.price-table td.qty { font-family: var(--font-heading); }
.price-table td.price { font-family: var(--font-heading); font-weight: var(--fw-bold); }
.cust-vk { color: var(--color-primary); }

.pdp-units { display: flex; gap: 26px; font-family: var(--font-heading); font-size: 18px; font-weight: var(--fw-bold); margin: 14px 0; }
.pdp-meta { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 18px 0; }
.pdp-meta dt { font-family: var(--font-heading); font-weight: var(--fw-bold); color: var(--color-muted); }
.pdp-meta dd { margin: 0; color: var(--color-muted); }

.add-to-cart { display: flex; gap: 12px; align-items: stretch; margin: 18px 0 10px; }
.add-to-cart .btn-primary { flex: 1; }
.product-box-addcart-quantity { border-radius: var(--radius-none); }
.pdp-wishlist { display: flex; align-items: center; gap: 10px; color: var(--color-muted); font-family: var(--font-heading);
  text-transform: uppercase; font-size: 14px; }
.pdp-feedback { color: var(--color-primary); margin-top: 8px; }
/* Steckbrief: die wichtigsten Merkmale als Etiketten-Piktogramm. */
.pdp-steckbrief { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-6);
  margin-top: 24px; padding: 14px 16px; background: var(--color-zebra);
  border: 1px solid var(--color-border); }
@media (max-width: 575px) { .pdp-steckbrief { grid-template-columns: minmax(0, 1fr); } }
.steckbrief-zeichen { display: flex; align-items: center; gap: 10px; min-width: 0; }
.steckbrief-zeichen img { width: 40px; height: 40px; flex: 0 0 40px; object-fit: contain; }
.steckbrief-text { display: flex; flex-direction: column; min-width: 0; }
.steckbrief-label { font-size: var(--fs-meta); color: var(--color-muted); }
.steckbrief-wert { font-size: 15px; font-weight: var(--fw-semibold); color: var(--color-text); }

.pdp-description { margin-top: 30px; }
/* Kleiner und ruhiger als zuvor: Die Tabelle ist Nachschlagewerk, nicht Hauptsache. */
.properties-table { width: 100%; border-collapse: collapse; margin-top: 12px;
  font-size: 15px; line-height: 1.45; table-layout: fixed; }
/* overflow-wrap: lange Links/Woerter (z. B. der Glossar-Link) brechen um statt die Seite zu verbreitern */
.properties-table td { padding: 8px 12px; border-bottom: 1px solid var(--color-border); vertical-align: top;
  overflow-wrap: anywhere; }
.properties-table td:first-child { width: 38%; color: var(--color-muted);
  font-weight: var(--fw-semibold); }

.not-found { padding: 60px 0; text-align: center; }

/* ---------- Warenkorb / Checkout ---------- */
.cart-note { background: var(--color-notice-bg); border: 1px solid var(--color-notice-border); padding: 8px 14px; }
.cart-layout, .checkout-layout { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 992px) {
  .cart-layout { grid-template-columns: 1fr 320px; }
  .checkout-layout { grid-template-columns: 1fr 340px; }
}
/* Warenkorb-Position: siehe „Warenkorb als Karten" am Ende der Datei. */

.cart-summary { background: var(--color-secondary); padding: 22px; align-self: start; }
.summary-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--color-border); }
.summary-row strong { font-family: var(--font-heading); font-size: 22px; }
.summary-line { display: flex; justify-content: space-between; font-size: 14px; padding: 4px 0; color: var(--color-text); }
.summary-cc { font-family: var(--font-heading); color: var(--color-primary); margin-top: 12px; }
.summary-note { color: var(--color-muted); font-size: 13px; }
.cart-checkout { display: block; width: 100%; text-align: center; margin-top: 14px; }

.checkout-card { margin-bottom: 22px; }
.checkout-card textarea, .checkout-card input[type=date], .checkout-card select { width: 100%; max-width: 320px; }
.readonly-note { color: var(--color-muted); font-size: 13px; }
.order-number { font-size: 18px; }
.order-table { width: 100%; border-collapse: collapse; margin: 10px 0; }
.order-table th { text-align: left; background: var(--color-secondary); padding: 8px 10px; font-family: var(--font-heading); }
.order-table td { padding: 8px 10px; border-bottom: 1px solid var(--color-border); }

/* ---------- Login ----------
   Drei Kästen nebeneinander wie im alten Shop: Einladung, Kontakt, Anmeldung.
   Unter 992 px untereinander — dann steht die Anmeldung zuerst (order), denn auf
   dem Handy meldet sich fast immer jemand an, der den Shop schon kennt. */
.login-page { max-width: var(--container-slim); margin-inline: auto; }
.login-page > .headline { margin-bottom: 24px; }
.login-schmal { max-width: 460px; }
.login-grid { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 992px) {
  .login-grid { grid-template-columns: 1fr 1fr 1.05fr; }
}
.login-box { background: var(--color-secondary); padding: 26px 24px; }
.login-box h2, .login-card h2 { font-size: 24px; line-height: 30px; margin: 0 0 12px;
  color: var(--color-primary); }
.login-box p, .login-card > p { margin: 0 0 12px; font-size: var(--fs-small);
  line-height: 22px; color: var(--color-text); }
.login-b2b { font-weight: var(--fw-semibold); }
.login-kontaktzeile { margin: 0 0 6px; }
.login-kontaktzeile a { color: var(--color-primary); }
.login-zugang { display: inline-block; margin-top: 12px; }
.login-card label { display: block; margin: 12px 0 4px; font-weight: var(--fw-semibold);
  font-size: var(--fs-small); }
.login-card input { width: 100%; }
.login-card .btn-block { margin-top: 18px; }
.login-error { color: var(--color-danger); }
.login-hint { color: var(--color-muted); font-size: 13px; margin-top: 14px; text-align: center; }
@media (max-width: 991px) {
  .login-card { order: -1; }
}
.login-weiter { margin-top: 18px; text-align: center; }

/* ---------- Zugang anfordern (Formular ohne Login, 23.10.2026) ----------
   Zwei Spalten ab Tablet, am Handy eine. Das Lockfeld steht außerhalb des Bildschirms (nicht display:none -
   manche Bots überspringen versteckte Felder, Menschen sehen und erreichen es nicht). */
.zugang-intro { margin: 0 0 18px; }
.zugang-meldung { margin: 0 0 16px; padding: 10px 14px; border-left: 4px solid var(--color-danger);
  background: var(--color-secondary); color: var(--color-danger); }
.zugang-form { margin: 0 0 28px; }
.zugang-lock { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.zugang-raster { display: grid; gap: 14px 20px; grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .zugang-raster { grid-template-columns: 1fr 1fr; }
  .zugang-feld--voll { grid-column: 1 / -1; }
}
.zugang-feld label { display: block; margin: 0 0 4px; font-weight: var(--fw-semibold); font-size: var(--fs-small); }
.zugang-feld input, .zugang-feld textarea { width: 100%; }
.zugang-feld textarea { resize: vertical; min-height: 96px; }
.zugang-feld--fehler input, .zugang-feld--fehler textarea { border-color: var(--color-danger); }
.zugang-fehler { display: block; margin-top: 4px; font-size: 13px; color: var(--color-danger); }
.zugang-einwilligung { margin: 18px 0 6px; font-size: var(--fs-small); }
.zugang-einwilligung label { display: flex; gap: 10px; align-items: flex-start; }
.zugang-einwilligung input { width: 20px; height: 20px; margin-top: 2px; flex: 0 0 auto; padding: 0; }
.zugang-einwilligung a { color: var(--color-primary); }
.zugang-pflicht { margin: 6px 0 14px; font-size: 13px; color: var(--color-muted); }
.zugang-danke { margin: 0 0 28px; padding: 22px 24px; background: var(--color-secondary); }
.zugang-danke h2 { margin: 0 0 10px; color: var(--color-primary); }
@media (max-width: 639px) {
  .zugang-form .btn { width: 100%; min-height: var(--tap-target); }
}

/* ---------- Mobil: Burger-Navigation + Such-Zeile ----------
   Vorher war die Hauptnavigation unter 992px schlicht WEG (kein Menü!). Jetzt:
   Checkbox-Hack-Burger (No-JS) klappt die Nav als Panel unter dem Header aus. */
.nav-toggle, .nav-toggle-cb { display: none; }
@media (max-width: 991px) {
  /* Zwei feste Zeilen statt freiem Umbruch: oben Menü, Logo und Warenkorb, darunter
     die Suche. Vorher rutschte der Warenkorb in eine dritte Zeile (Uwe, 22.09.2026). */
  .header-row { flex-wrap: wrap; row-gap: 0; gap: var(--space-2); }
  .header-logo-main-img { width: 96px; }
  .header-cart { margin-left: auto; }
  .nav-toggle { display: flex; align-items: center; justify-content: center; order: -1;
    width: var(--tap-target); height: var(--tap-target); cursor: pointer;
    color: var(--color-white); font-size: 22px; }
  .main-navigation { display: none; order: 10; flex: 1 0 100%; flex-direction: column;
    gap: 0; padding: 6px 0 12px; }
  .nav-toggle-cb:checked ~ .main-navigation { display: flex; }
  .main-navigation-link { padding: 10px 4px; border-bottom: 1px solid rgba(255,255,255,0.15); }
  /* Suche als eigene volle Zeile — Nummern-Eingabe muss auch mobil bequem sein */
  .header-search { order: 9; flex: 1 0 100%; margin-bottom: 8px; }
  /* Ohne die Warenkorbleiste daneben trennt hier nichts mehr — die Linie waere Zierrat. */
  .header-cart { padding-left: var(--space-2); border-left: 0; }
  .header-row { height: auto; min-height: var(--header-height); padding-bottom: 4px; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
/* Handy: Die Kopfleiste ist eng — Telefon und Mail stehen ohnehin im Fußbereich, der
   Kundenname wird gekürzt statt umgebrochen. Sonst wuchs die graue Leiste auf zwei
   Zeilen und schob den grünen Balken nach unten. */
@media (max-width: 767px) {
  .top-bar-inner { flex-wrap: nowrap; column-gap: var(--space-3); }
  .top-bar-contact { display: none; }
  .top-bar-tools { flex: 1 1 auto; justify-content: flex-end; gap: var(--space-3); min-width: 0; }
  .top-bar-customer { max-width: 18ch; }
}
@media (max-width: 575px) {
  .cc-container { display: none; }  /* CC-Plakette ist ein Desktop-Arbeitsplatz-Detail */
  .footer-inner { grid-template-columns: 1fr; }
  .header-logo-main-img { width: 84px; }
  .header-tools { gap: 0; }
  .top-bar-customer { max-width: 12ch; }
}

/* ---------- Blitz-Suche (Autocomplete-Dropdown) ---------- */
.header-search { position: relative; }
/* Breit statt schmal (Uwe, 22.09.2026): In 360px passte kein Pflanzenname — jetzt
   720px, begrenzt auf das, was rechts wirklich frei ist. */
.search-suggestions { position: absolute; top: calc(100% + 6px); left: 0; z-index: var(--z-dropdown);
  width: 720px; max-width: calc(100vw - var(--page-pad-x) * 2); background: var(--color-white);
  border: 1px solid var(--color-border); box-shadow: var(--shadow-flyout);
  max-height: 70vh; overflow-y: auto; text-align: left; }
.search-suggestions:empty { display: none; }       /* kein leerer Kasten */
.search-suggestions.is-hidden { display: none; }
.search-suggestions-list { list-style: none; margin: 0; padding: 4px 0; }
.search-suggestion { display: flex; align-items: center; gap: 8px; padding: 0 8px; }
.search-suggestion[aria-selected="true"], .search-suggestion:hover { background: var(--color-secondary); }
.search-suggestion-link { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0;
  padding: 8px 4px; color: var(--color-text); }
.search-suggestion-link:hover { text-decoration: none; }
.search-suggestion-thumb { flex: 0 0 auto; width: 64px; height: 80px; background: var(--color-secondary);
  display: flex; align-items: center; justify-content: center; overflow: hidden; }
.search-suggestion-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.search-suggestion-thumb-ph { font-size: 22px; color: var(--color-tertiary); }
.search-suggestion-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.search-suggestion-title { font-family: var(--font-heading); font-size: 18px; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-suggestion-sub { font-size: var(--fs-small); color: var(--color-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Qualität, Größe, VE — dieselben Einkaufsdaten wie auf der Kachel, gleich gesetzt. */
.search-suggestion-daten { display: flex; flex-wrap: wrap; align-items: baseline;
  font-size: 15px; line-height: 1.4; color: var(--color-text); }
.search-suggestion-daten:empty { display: none; }
.search-suggestion-daten .product-quality { font-weight: var(--fw-bold); }
.search-suggestion-daten span:not(:first-child)::before { content: "·"; margin: 0 8px;
  color: var(--color-border); }
.search-suggestion-meta { font-size: var(--fs-meta); color: var(--color-muted); }
.search-suggestion-price { flex: 0 0 auto; font-family: var(--font-heading); font-weight: var(--fw-bold);
  font-size: 20px; color: var(--color-accent-text); white-space: nowrap; }
.search-suggestion .add-circle { width: 48px; height: 48px; font-size: 16px; }
.search-suggestions-all { display: block; padding: 10px 14px; border-top: 1px solid var(--color-border);
  font-family: var(--font-heading); text-transform: uppercase; font-size: 13px; color: var(--color-primary); }
.search-suggestions-all:hover { background: var(--color-secondary); text-decoration: none; }
.search-suggestions-empty { padding: 14px; color: var(--color-muted); font-size: 14px; }
.search-suggestions-empty .search-suggestions-all { border-top: none; padding: 8px 0 0; }
/* Führen wir, derzeit nicht lieferbar (08.10.2026) - nur Namen, keine Karte */
.search-nicht-lieferbar strong { display: block; color: var(--color-text, inherit); margin-bottom: 6px; }
.search-nicht-lieferbar-liste { list-style: none; margin: 0; padding: 0; }
.search-nicht-lieferbar-liste li { padding: 4px 0; overflow-wrap: anywhere; }
/* Mobil ist die Suche eine eigene volle Zeile -> Dropdown spannt das Formular auf,
   statt rechts aus dem Viewport zu laufen. */
@media (max-width: 991px) { .search-suggestions { left: 0; right: 0; width: auto; max-width: none; } }

/* ---------- Toasts (Bestätigung/Fehler bei HTMX-Aktionen) ---------- */
.toast-root { position: fixed; right: 18px; bottom: 18px; z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; min-width: 220px; max-width: 360px;
  padding: 12px 16px; background: var(--color-primary); color: var(--color-white);
  box-shadow: var(--shadow-card); font-size: 14px; opacity: 1; transform: translateY(0);
  transition: opacity .35s ease, transform .35s ease; border-left: 5px solid var(--color-tertiary); }
.toast-icon { font-size: 16px; color: var(--color-tertiary); }
.toast-hint { display: block; font-size: 12px; color: var(--color-secondary); }
.toast { pointer-events: auto; }  /* Root lässt Klicks durch, der Toast selbst (Lagen-Knopf) nicht */
.toast-out { opacity: 0; transform: translateY(8px); }
.toast-error { background: var(--color-danger); border-left-color: var(--color-notice-border); }
.toast-error .toast-icon { color: var(--color-white); }

/* ---------- Lade-Zustände (HTMX setzt .htmx-request am auslösenden Element) ---------- */
/* Kein pointer-events:none: Zweimal tippen muss zwei VE ergeben — htmx haengt die
   Klicks mit hx-sync="queue all" hintereinander (Uwe, 22.09.2026). */
.add-circle.htmx-request { opacity: .7; }
button.is-loading { opacity: .6; cursor: progress; }

/* ---------- Konto / Bestellhistorie ---------- */
.account-layout { display: grid; grid-template-columns: 1fr; gap: 8px; max-width: 900px; }
.account-links, .account-address-list { list-style: none; margin: 0; padding: 0; }
.account-links li, .account-address-list li { padding: 6px 0; }
.orders-table .num, .order-table .num { text-align: right; }
.order-table tbody tr:nth-of-type(odd) { background: var(--color-zebra); }
.orders-actions { display: flex; align-items: center; gap: 14px; }
.orders-actions form { display: inline; }
/* Button in Link-Optik (Reorder in Tabellenzeilen) */
.link-btn { border: none; background: none; padding: 0; color: var(--color-primary);
  cursor: pointer; font-family: var(--font-body); font-size: inherit; text-align: left; }
.link-btn:hover { color: var(--color-tertiary); }

/* ---------- Inhaltsseiten (Impressum/Datenschutz/Kontakt/Zugang) ---------- */
.content-page { max-width: 760px; }
.content-body { margin-bottom: 24px; }
.content-contact { font-style: normal; line-height: 1.7; padding: 16px 20px;
  background: var(--color-secondary); display: inline-block; }
.content-cta { margin: 0 0 24px; }

/* ---------- Schnellbestellung ---------- */
.quick-order textarea { width: 100%; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 15px; margin: 10px 0 14px; }
.quick-order-ok { border-color: var(--color-tertiary); background: #f0f7e6; }
.quick-order-failed { margin-top: 8px; }
.quick-order-label { font-weight: var(--fw-semibold); }

/* ---------- Login-Zusätze ---------- */
.login-success { color: var(--color-primary); font-weight: var(--fw-semibold); }
.login-forgot { margin-top: 14px; font-size: 14px; }

/* ---------- Warenkorb-Zusätze ---------- */
.summary-line-no { color: var(--color-muted); }
.pdp-ve-hint { color: var(--color-muted); font-size: 13px; margin-top: -4px; }

/* ---------- PDP-Interaktion (app.js) ---------- */
.price-table tbody tr.is-clickable { cursor: pointer; }
.price-table tbody tr.is-clickable:hover td { background: var(--color-secondary); }
.pdp-thumbs img { cursor: pointer; }
.pdp-thumbs img.is-active { border-color: var(--color-tertiary); border-width: 2px; }

/* ---------- Bestellbestätigung / Druck ---------- */
/* Adresse schmal, Bestelltabelle breit (checkout-layout hätte es umgekehrt gequetscht) */
.order-confirmation .checkout-layout { grid-template-columns: 1fr; }
@media (min-width: 992px) { .order-confirmation .checkout-layout { grid-template-columns: 340px 1fr; } }
.order-confirmation-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.inline-form { display: inline; }
@media print {
  header, footer, .toast-root, .order-confirmation-actions, .skip-link, .pdp-back,
  .no-print { display: none !important; }
  body { font-size: 12pt; }
  a { color: inherit; text-decoration: none; }
}

/* ---------- No-JS-Fallback-Buttons (Sortierung/Seitengröße) ---------- */
.nojs-submit { border: 1px solid var(--color-border); background: var(--color-white);
  padding: 4px 10px; cursor: pointer; font-family: var(--font-heading); }
.js .nojs-submit { display: none; }  /* mit JS übernimmt onchange-Submit */

/* ---------- Warenkorb: Bild, Mengenfeld, Sticky-Kasse (mobil) ---------- */
.cart-sticky-bar { display: none; }
@media (max-width: 991px) {
  .cart-sticky-bar { position: sticky; bottom: 0; z-index: var(--z-sticky-bar);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 14px; padding: 10px var(--page-pad-x); background: var(--color-white);
    box-shadow: var(--shadow-bar); }
  .cart-sticky-bar strong { font-family: var(--font-heading); font-size: 18px; }
  .cart-sticky-bar .btn { min-height: var(--tap-target); display: inline-flex; align-items: center; }
}

/* ---------- PDP-Zusätze ---------- */
.pdp-last-ordered { color: var(--color-primary); font-size: 14px; margin: 4px 0 0; }
.pdp-thumbs { flex-wrap: wrap; }

/* ---------- Blitz-Suche: Treffer-Hervorhebung + Hinweiszeile ---------- */
.search-suggestion mark { background: transparent; color: inherit; font-weight: var(--fw-bold);
  text-decoration: underline; text-decoration-color: var(--color-tertiary); text-decoration-thickness: 2px; }
.search-suggestions-hint { padding: 6px 14px 10px; font-size: 11px; color: var(--color-muted); }
.header-search-input.htmx-request { border-bottom-color: var(--color-tertiary); }

/* ---------- Cookie-Hinweis (einmalig, nur Information) ---------- */
.cookie-note { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-toast);
  display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap;
  padding: 14px var(--page-pad-x); background: var(--color-primary); color: var(--color-white);
  box-shadow: var(--shadow-bar); font-size: 14px; }
.cookie-note p { margin: 0; font-size: 14px; line-height: 1.5; max-width: 70ch; }
.cookie-note a { color: var(--color-white); text-decoration: underline;
  text-decoration-color: var(--color-tertiary); }
.cookie-note .btn { padding: 6px 22px; }
@media (max-width: 767px) {
  .cookie-note { gap: 10px; padding: 10px var(--page-pad-x); font-size: 13px; }
  .cookie-note p { font-size: 13px; line-height: 1.4; }
  .cookie-note .btn { min-height: 44px; padding: 6px 18px; }
}
@media print { .cookie-note { display: none !important; } }

/* ---------- Fokus/Aktiv für runde Aktionsbuttons; Startseiten-Sektion ---------- */
.add-circle:active { transform: scale(.94); }
header :focus-visible { outline-color: var(--color-white); }
.home-recent { padding-block: 34px 10px; }
.home-recent-more { margin-top: 14px; }
.checkout-back { display: block; margin-top: 12px; text-align: center; font-size: 14px; }

/* ---------- Warenkorb-Badge-Puls beim Hinzufügen (P0) ---------- */
/* Nur die OOB-Variante (cart_oob.html) trägt die Klasse -> pulst bei jedem Add,
   nicht beim Initial-Load. prefers-reduced-motion ist global (responsive.css) neutralisiert. */
@keyframes cart-badge-pulse {
  0%   { transform: scale(1);    color: var(--color-white); }
  30%  { transform: scale(1.45); color: var(--color-tertiary); }
  100% { transform: scale(1);    color: var(--color-white); }
}
.cart-badge-pulse { display: inline-block; animation: cart-badge-pulse var(--duration-slow) ease-out; }

/* ---------- Katalog-Umbau (13.09.2026): Seitenleiste, Sortiment, Filterwerte ---------- */
.catalog-page { padding-top: var(--space-6); }
.catalog-head .headline { font-size: var(--fs-h2); line-height: 1.2; margin: 0; }
@media (min-width: 992px) {
  /* Header + Top-Bar kleben oben: die Leiste darf nicht darunter rutschen, lange Bäume
     scrollen in sich (vorher top:1rem — der obere Teil verschwand unter dem Header). */
  .filter-sidebar { top: calc(var(--header-height) + var(--topbar-height) + var(--space-4));
    max-height: calc(100vh - var(--header-height) - var(--topbar-height) - var(--space-8));
    overflow-y: auto; overscroll-behavior: contain; }
}
.filter-block { display: block; padding: 16px; margin-bottom: 16px;
  box-shadow: var(--shadow-soft); background: var(--color-white); }
.filter-block-title { font-family: var(--font-heading); font-weight: var(--fw-bold); text-transform: uppercase;
  font-size: var(--fs-ui); line-height: 1.2; margin: 0 0 12px; color: var(--color-text); }

/* Kategoriebaum: Ober- und Unterkategorien in derselben Größe. Die Ebene zeigt sich
   über Einrückung und Schriftgewicht — Unterkategorien zu verkleinern machte die
   Liste unruhig, ohne dass man die Hierarchie besser gesehen hätte. */
.sortiment-zurueck { display: inline-block; margin-bottom: 8px; font-size: var(--fs-small); }
.sortiment-liste, .sortiment-kinder { list-style: none; margin: 0; padding: 0; }
.sortiment-liste > li + li { border-top: 1px solid var(--color-border); }
.sortiment-knoten > summary, .sortiment-blatt, .sortiment-kinder a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 8px 2px; cursor: pointer; color: var(--color-text); font-size: var(--fs-small); }
.sortiment-knoten > summary { list-style: none; font-weight: var(--fw-semibold); }
.sortiment-knoten > summary::-webkit-details-marker { display: none; }
.sortiment-knoten > summary .sortiment-name::before { content: "\203A"; display: inline-block; width: 1em;
  color: var(--color-primary); font-weight: var(--fw-bold); transition: transform var(--duration-fast); }
.sortiment-knoten[open] > summary .sortiment-name::before { transform: rotate(90deg); }
.sortiment-kinder { padding: 0 0 8px 16px; }
.sortiment-kinder a { padding: 8px 2px; font-size: var(--fs-small); }
.sortiment-kinder a:hover, .sortiment-blatt:hover, .sortiment-knoten > summary:hover { color: var(--color-primary); text-decoration: none; }
.sortiment-liste a[aria-current] { color: var(--color-primary); font-weight: var(--fw-bold); }
.sortiment-anzahl, .filter-anzahl { flex: 0 0 auto; color: var(--color-muted); font-size: var(--fs-meta);
  font-variant-numeric: tabular-nums; }

.filter-check-solo { padding: 4px 0 12px; cursor: pointer; }
.filter-gruppe { border-top: 1px solid var(--color-border); padding: 12px 0; }
.filter-gruppe > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
  font-family: var(--font-heading); font-weight: var(--fw-bold); text-transform: uppercase; }
.filter-gruppe > summary::-webkit-details-marker { display: none; }
.filter-gruppe > summary::after { content: ""; width: 12px; height: 8px; margin-left: auto;
  background: no-repeat center/contain url('/static/assets/chevron_down.svg'); transition: transform var(--duration-fast); }
.filter-gruppe[open] > summary::after { transform: rotate(180deg); }
/* Beide Zahlenarten gleich groß: die Auswahlzahl am Gruppentitel und die
   Trefferzahl hinter dem Wert. Vorher 12 gegen 13 Pixel — sichtbar unruhig. */
.filter-zahl { min-width: 20px; padding: 1px 6px; border-radius: var(--radius-round); background: var(--color-primary);
  color: var(--color-on-primary); font-size: var(--fs-meta); line-height: 1.4; text-align: center;
  font-variant-numeric: tabular-nums; }
.filter-werte { display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow-y: auto;
  margin-top: 12px; padding-right: 4px; }
.filter-werte .filter-check { padding: 4px 0; cursor: pointer; font-size: var(--fs-small); }
.filter-wert { flex: 1 1 auto; }
.filter-feld { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; font-size: var(--fs-small); color: var(--color-muted); }
.filter-feld input { width: 100%; }
.filter-block .filter-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 16px 0 0; }
.filter-reset-link { font-size: var(--fs-small); }
.az-leer { text-align: center; padding: 5px 0; border: 1px solid var(--color-border); font-family: var(--font-heading);
  color: var(--color-border); cursor: default; }

/* Angebots-Chips: gewählte Kategorie deutlich — nicht wie ein entfernbarer Filter */
.angebots-chips .filter-chip[aria-current="true"] { background: var(--color-primary); border-color: var(--color-primary);
  color: var(--color-on-primary); }
@media (max-width: 760px) {
  .angebots-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .angebots-chips .filter-chip { white-space: nowrap; }
}
.sorting label { display: inline-flex; align-items: center; gap: 8px; }
.sorting { gap: 16px; }
/* Handy: eine ruhige Bedienzeile statt umbrechender Woerter („pro / Seite").
   Sortierung nimmt die Breite, die Seitengroesse steht daneben, Filter darunter. */
@media (max-width: 767px) {
  .catalog-head-tools { width: 100%; gap: 8px; }
  .sorting { width: 100%; gap: 8px; padding: 6px 8px; flex-wrap: nowrap; }
  .sorting label { flex: 1 1 auto; min-width: 0; font-size: var(--fs-small); gap: 4px; }
  .sorting label:last-of-type { flex: 0 0 auto; }
  .sorting select { min-width: 0; max-width: 100%; font-size: var(--fs-small); }
  .catalog-count { order: -1; }
}
.empty .btn { margin-top: 12px; }

/* Listenansicht: Mengenfeld + Warenkorb-Knopf (Großmengen ohne Klick-Marathon) */
.row-add { display: flex; align-items: center; gap: 6px; }
.row-add-menge { width: 78px; height: 42px; padding: 4px 6px; text-align: center;
  font-family: var(--font-heading); background: var(--color-input-bg); }
.row-add-btn { flex: 0 0 auto; width: 48px; height: 48px; border: none; border-radius: var(--radius-round);
  background: var(--color-primary); color: var(--color-white); font-size: 24px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; }
.row-add-btn:hover { filter: brightness(.93); }
.row-add.htmx-request .row-add-btn { opacity: .7; }
.row-add-imkorb { display: block; margin-top: 4px; font-size: var(--fs-meta); color: var(--color-accent-text); text-align: right; }

/* Hauptnavigation: aktiver Punkt */
.main-navigation-link.is-active .main-navigation-link-text { color: var(--color-tertiary); }
/* „HGB“ vor „Baustein“ (Uwe, 19.10.2026): hellgrün und etwas schräg wie am Auftragsterminal - der Reiter hebt sich ab */
.nav-hgb { display: inline-block; margin-right: 7px; padding: 2px 6px 1px; background: var(--color-tertiary);
  color: var(--color-on-tertiary, #06301F); font-weight: 700; font-size: .82em; letter-spacing: .05em; line-height: 1.15;
  transform: rotate(-7deg) skewX(-6deg); box-shadow: 0 1px 4px rgba(0, 0, 0, .25); vertical-align: 1px; }
/* Burger: Checkbox bleibt als .sr-only fokussierbar (display:none nahm ihr den Tastaturfokus) */
.nav-toggle-cb.sr-only { display: block; }

.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
/* Kleine Zahlen/Labels auf Hellgrün: dunkle Schrift (Kontrast) */
.add-circle.in-cart, .header-cart .cart-count, .product-badge.badge-restock { color: var(--color-on-tertiary); }
/* Fokusring in Dunkelgrün (Hellgrün hatte auf Weiß zu wenig Kontrast); im Header bleibt er weiß */
:focus-visible { outline-color: var(--color-primary); }
header :focus-visible { outline-color: var(--color-white); }
/* Warenkorb speichert Änderungen selbst (hx-trigger change) — Knopf nur ohne JS */
.js .cart-update { display: none; }

/* --------------------------------------------------------------- Sprachassistent
   Eine ruhige Seite: ein großer Knopf, links die Treffer, rechts die Vorschlagsliste.
   Wer spricht, schaut nur kurz hin — deshalb wenig Farbe und große Klickflächen. */
/* Bühne: großes Mikrofon, darunter die grüne Welle aus dem echten Pegel. */
.assistent-mikro { position: relative; width: 56px; height: 56px; border: none; cursor: pointer;
  border-radius: var(--radius-round); background: var(--color-primary);
  color: var(--color-on-primary); display: inline-flex; align-items: center;
  justify-content: center; transition: background .2s, transform .1s; }
.assistent-mikro:active { transform: scale(.97); }
.assistent-mikro:disabled { opacity: .45; cursor: not-allowed; }
.assistent-mikro-symbol { width: 28px; height: 28px; fill: currentColor; stroke: currentColor; }
.assistent-mikro-stopp { display: none; width: 18px; height: 18px; border-radius: 3px;
  background: currentColor; position: absolute; }
.assistent-mikro.ist-aktiv { background: var(--color-danger); }
.assistent-mikro.ist-aktiv .assistent-mikro-symbol { display: none; }
.assistent-mikro.ist-aktiv .assistent-mikro-stopp { display: block; }
/* Ring, der mitatmet: zeigt auch ohne Blick auf die Welle, dass zugehört wird. */
.assistent-mikro.ist-aktiv::after { content: ""; position: absolute; inset: -7px;
  border: 3px solid var(--color-tertiary); border-radius: var(--radius-round);
  animation: assistent-puls 1.8s ease-out infinite; }
@keyframes assistent-puls {
  0% { opacity: .8; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.25); }
}
@media (prefers-reduced-motion: reduce) { .assistent-mikro.ist-aktiv::after { animation: none; opacity: .5; } }
.assistent-welle { width: 100%; max-width: none; height: 40px; display: block; }
.assistent-status { grid-column: 2; }
}
.assistent-status { grid-column: 2; display: flex; align-items: baseline; gap: var(--space-3);
  font-family: var(--font-heading); min-height: 22px; }
.assistent-status-text { font-size: 16px; }
.assistent-zeit { font-size: var(--fs-meta); color: var(--color-muted); }
.assistent-datenschutz { border: 1px solid var(--color-notice-border); background: var(--color-notice-bg);
  padding: 14px 16px; border-radius: 4px; margin-bottom: 14px; }
.assistent-datenschutz p { margin: 0 0 10px; }
.assistent-mikrotest > summary { cursor: pointer; font-size: var(--fs-meta);
  color: var(--color-accent-text); }
.assistent-mikrotest[open] { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.assistent-tippen { display: flex; gap: 8px; margin-bottom: 18px; }
.assistent-tippen input { flex: 1 1 auto; height: 44px; padding: 4px 10px; background: var(--color-input-bg);
  border: 1px solid var(--color-border); }
.assistent-spalten { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 24px; }
@media (max-width: 900px) { .assistent-spalten { grid-template-columns: 1fr; } }
.assistent-spalten h2 { font-family: var(--font-heading); font-size: 20px; margin: 0 0 10px; }
.assistent-liste { background: var(--color-secondary); padding: 14px 16px; border-radius: 4px; }
.assistent-vorschlaege { list-style: none; margin: 0; padding: 0; }
.assistent-vorschlag { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--color-border); }
.assistent-vorschlag:last-child { border-bottom: none; }
.assistent-vorschlag-menge { font-family: var(--font-heading); min-width: 44px; }
.assistent-vorschlag-name { flex: 1 1 auto; }
.assistent-vorschlag-name .product-hint { display: block; }
.assistent-vorschlag-weg { border: none; background: none; cursor: pointer; font-size: 20px;
  line-height: 1; color: var(--color-muted); padding: 0 4px; }
.assistent-vorschlag-weg:hover { color: var(--color-danger); }
.assistent-uebernehmen { margin-top: 12px; width: 100%; }
.assistent-json pre { background: var(--color-secondary); padding: 12px; overflow: auto;
  max-height: 60vh; font-size: 12px; white-space: pre-wrap; word-break: break-word; }
.assistent-werkstatt-form { display: grid; gap: 10px; max-width: 720px; margin-bottom: 14px; }
.assistent-werkstatt-form textarea { font-family: monospace; font-size: 13px; width: 100%; }
.assistent-werkstatt-hilfe { margin-bottom: 18px; }
.assistent-werkstatt-hilfe dt { font-family: var(--font-heading); margin-top: 8px; }
.assistent-werkstatt-hilfe dd { margin: 0 0 6px; }
.notice-box { border: 1px solid var(--color-notice-border); background: var(--color-notice-bg);
  padding: 12px 14px; border-radius: 4px; margin-bottom: 14px; }

/* Treffer des Assistenten als Kacheln im Stil der Shop-Karte (Uwe, 23.09.2026: „Die Optik
   sieht noch nicht gut aus mit den Bildern"). Vorher: Zeile mit kleinem Bild links und
   den Knoepfen rechts — auf breitem Schirm blieb dem Namen eine schmale Spalte, und er
   brach Wort fuer Wort um. Jetzt: Bild oben ueber die ganze Breite, Name darunter,
   Preis und Knoepfe als Fuss am Kartenende (buendig ueber alle Karten einer Reihe). */
.assistent-liste-treffer { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-5) var(--space-4); align-items: stretch; }
.assistent-treffer-zeile { display: flex; flex-direction: column; min-width: 0;
  background: var(--color-white); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  transition: opacity .3s, transform .3s, box-shadow var(--duration-fast) var(--ease-standard); }
.assistent-treffer-zeile:hover { box-shadow: var(--shadow-card-hover); }
.assistent-treffer-zeile.geht-weg { opacity: 0; transform: translateY(12px); }
.assistent-treffer-zeile.ist-im-korb { border-color: var(--color-tertiary);
  box-shadow: 0 0 0 2px var(--color-tertiary); }
/* Die ganze Pflanze zeigen, nicht beschneiden: Beim quadratischen Ausschnitt fehlten
   Hochstaemmen Krone oder Topf (Codex, 23.09.2026). Feste, begrenzte Hoehe, damit auf
   dem Bildschirm mehr als eine Reihe Platz hat. */
.assistent-treffer-bild { position: relative; flex: 0 0 auto;
  height: clamp(150px, 20vh, 220px); overflow: hidden; background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius-card) var(--radius-card) 0 0; }
.assistent-treffer-bild > a { position: absolute; inset: 0; display: block; }
.assistent-treffer-bild img { position: absolute; inset: 8px; width: calc(100% - 16px);
  height: calc(100% - 16px); object-fit: contain; object-position: center; display: block; }
.assistent-treffer-bild .product-badge { position: absolute; top: 10px; left: 10px; }
.assistent-treffer-text { flex: 1 1 auto; min-width: 0; padding: 14px 16px 0; }
.assistent-treffer-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-family: var(--font-heading); font-size: var(--fs-card-name);
  font-weight: var(--fw-bold); line-height: 1.25; color: var(--color-text); text-decoration: none; }
.assistent-treffer-name:hover { color: var(--color-tertiary); }
.assistent-treffer-deutsch { display: block; margin-top: 2px; color: var(--color-muted);
  font-size: var(--fs-small); line-height: 1.4; }
.assistent-treffer-text .product-card-meta { margin: 6px 0 0; }
.assistent-treffer-text .assistent-zeichen { margin-top: 8px; gap: 4px 6px; }
.assistent-treffer-zeile .assistent-chip { max-width: 100%; white-space: normal;
  overflow-wrap: anywhere; }
/* Der Jahresverlauf war auf der weissen Karte kaum zu sehen und wanderte je nach Chips
   in eine andere Zeile: jetzt eine feste eigene Zeile, etwas groesser. */
.assistent-treffer-zeile .saison-mini { flex-basis: 100%; position: static; }
.assistent-treffer-zeile .saison-mini svg { width: 84px; height: 27px; }
.assistent-treffer-zeile .saison-mini svg rect { fill: #a9bb93; }
.assistent-treffer-zeile .saison-mini svg rect.ist-jetzt { fill: currentColor; }
/* Die grosse Ansicht legt sich ueber das Bild DERSELBEN Karte — verankert an der Karte,
   nicht an der kleinen Grafik (die konnte sie links aus dem Bild schieben). */
.assistent-treffer-zeile { position: relative; }
.assistent-treffer-zeile .saison-gross { top: 8px; bottom: auto; left: 8px; right: 8px;
  width: auto; transform: none; }
/* Ein- und zweizeilige Namen: Die Qualitaet beginnt trotzdem auf einer Hoehe. Die
   Mindesthoehe liegt auf Name + deutschem Namen zusammen (zwei Zeilen Name, eine Zeile
   Deutsch) — am Namen allein liess sie eine Luecke vor dem deutschen Namen. */
@media (min-width: 576px) {
  .assistent-treffer-kopf { min-height: calc(var(--fs-card-name) * 1.25 * 2
    + var(--fs-small) * 1.4 + 2px); }
}
/* Fuss: Preis links, VE-Blase und Lage rechts. VE und Lage NEBENEINANDER (Uwe,
   22.09.2026): untereinander war nicht zu erkennen, was VE und was Lage ist. */
.assistent-treffer-fuss { display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 0 12px; padding: 12px 16px 16px; }
.assistent-treffer-preis { font-family: var(--font-heading); font-weight: var(--fw-bold);
  font-size: var(--fs-card-price); line-height: 1.2; color: var(--color-accent-text);
  white-space: nowrap; }
.assistent-treffer-aktion { flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  margin-left: auto; }
.assistent-treffer-aktion .add-circle { width: 54px; height: 54px; font-size: 17px; }
.assistent-lage-knopf { display: inline-flex; flex-direction: column; align-items: center;
  justify-content: center; min-width: 60px; min-height: 54px; padding: 4px 8px;
  border: 2px solid var(--color-primary); border-radius: 6px; background: var(--color-white);
  color: var(--color-primary); font-family: var(--font-heading); cursor: pointer; line-height: 1.15; }
.assistent-lage-knopf:hover { background: var(--color-primary); color: var(--color-on-primary); }
.assistent-treffer-aktion [data-lage]:disabled { opacity: .6; cursor: progress; }
.assistent-lage-wort { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.assistent-lage-menge { font-size: 17px; font-weight: var(--fw-bold); }
/* Die Statuszeile bleibt immer im Baum (Live-Region fuer Screenreader), nimmt aber
   leer keinen Platz ein. */
.assistent-treffer-hinweis { flex-basis: 100%; font-size: var(--fs-meta);
  color: var(--color-accent-text); text-align: right; }
.assistent-treffer-hinweis:not(:empty) { margin-top: 6px; }
.assistent-treffer-hinweis.ist-fehler { color: var(--color-danger); }
/* Handy: eine Spalte, Bild links neben dem Text — sonst passt nur ein Artikel aufs Bild. */
@media (max-width: 575px) {
  .assistent-liste-treffer { grid-template-columns: 1fr; gap: var(--space-3); }
  /* Bild links neben dem Text, der Fuss mit Preis und Knoepfen ueber die volle Breite —
     in der schmalen rechten Spalte brachen Preis und Knoepfe um (Codex, 23.09.2026). */
  .assistent-treffer-zeile { display: grid; grid-template-columns: 104px minmax(0, 1fr);
    grid-template-areas: "bild text" "fuss fuss"; }
  .assistent-treffer-bild { grid-area: bild; height: auto; min-height: 140px;
    border-bottom: none; border-right: 1px solid var(--color-border);
    border-radius: var(--radius-card) 0 0 0; }
  .assistent-treffer-bild img { inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); }
  .assistent-treffer-text { grid-area: text; padding: 12px 12px 8px; }
  .assistent-treffer-fuss { grid-area: fuss; padding: 10px 12px 12px;
    border-top: 1px solid var(--color-border); }
  .assistent-treffer-name { font-size: 18px; }
}

/* Warenkorb: woher die Position kommt */
.cart-herkunft { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px; }
.cart-herkunft-badge { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 10px;
  font-size: 12px; background: var(--color-secondary); color: var(--color-text); }
.cart-herkunft-badge.ist-ki { background: var(--color-tertiary); color: var(--color-on-tertiary); }

.assistent-mikrotest { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  justify-content: center; margin-top: 6px; }
.assistent-mikrotest .hint { font-size: var(--fs-meta); color: var(--color-muted); }

.assistent-unsicher p { margin: 6px 0; }
.assistent-befehl { background: var(--color-secondary); padding: 10px 12px; margin: 8px 0;
  overflow-x: auto; font-size: 13px; white-space: pre; }

/* Gemerktes: offen sichtbar, einzeln loeschbar */
.assistent-gedaechtnis { border: 1px solid var(--color-border); padding: 10px 14px;
  margin-bottom: 18px; }
.assistent-gedaechtnis summary { font-family: var(--font-heading); cursor: pointer; }
.assistent-gedaechtnis .hint { font-size: var(--fs-meta); color: var(--color-muted); margin: 8px 0; }
.assistent-merkliste { list-style: none; margin: 0; padding: 0; }
.assistent-merkliste li { display: flex; align-items: baseline; gap: 10px; padding: 5px 0;
  border-bottom: 1px solid var(--color-border); }
.assistent-merkliste li:last-child { border-bottom: none; }
.assistent-merk-schluessel { font-family: var(--font-heading); min-width: 150px;
  color: var(--color-accent-text); }
.assistent-merk-wert { flex: 1 1 auto; }
.assistent-merk-weg { border: none; background: none; cursor: pointer; font-size: 18px;
  line-height: 1; color: var(--color-muted); padding: 0 4px; }
.assistent-merk-weg:hover { color: var(--color-danger); }

/* Inhaltsseiten (Impressum, Datenschutz): Gliederung langer Rechtstexte */
.content-body h2 { font-family: var(--font-heading); font-size: 20px; margin: 22px 0 6px; }
.content-body p { margin: 0 0 8px; }
.content-li { padding-left: 18px; position: relative; }
.content-li::before { content: "‚2"; position: absolute; left: 4px; color: var(--color-tertiary); }

/* Zeichen an Treffern und Vorschlaegen: Angebot, Zustand der Ware, Warenkorb */
.assistent-zeichen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.assistent-chip { display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: var(--fs-meta); line-height: 1.5; white-space: nowrap; }
.assistent-chip.ist-top { background: var(--color-tertiary); color: var(--color-on-tertiary);
  font-weight: var(--fw-semibold); }
.assistent-chip.ist-angebot { background: #dfeccb; color: var(--color-on-tertiary); }
.assistent-chip.ist-status { background: var(--color-secondary); color: var(--color-text); }
.assistent-chip.ist-korb { background: var(--color-primary); color: var(--color-on-primary); }
.assistent-vorschlag-name .assistent-zeichen { margin: 2px 0 2px; }

/* Jahresverlauf im Kleinformat: zwoelf Balken, Pfeil auf den laufenden Monat.
   Gruen = Hauptsaison oder Angebot/Top, sonst gelb. Beim Ueberfahren klappt die
   grosse Ansicht mit Monatsnamen, „heute" und dem Warenausgangstermin auf. */
.saison-mini { position: relative; display: inline-flex; align-items: flex-end;
  line-height: 0; cursor: help; }
.saison-mini svg rect { fill: #c9d6b6; }
.saison-mini svg rect.ist-jetzt, .saison-mini svg .saison-pfeil { fill: currentColor; }
.saison-gruen { color: var(--color-tertiary); }
.saison-gelb  { color: #d9a441; }
.saison-rot   { color: #d9a441; }   /* kein Rot mehr: ausserhalb der Saison ist keine Warnung */

.saison-gross { position: absolute; bottom: calc(100% + 8px); left: 50%; z-index: var(--z-flyout);
  display: none; width: 300px; transform: translateX(-50%); padding: 12px 14px;
  background: var(--color-white); border: 1px solid var(--color-border);
  box-shadow: var(--shadow-flyout); color: var(--color-text); line-height: 1.3;
  text-align: left; }
.saison-mini:hover .saison-gross, .saison-mini:focus .saison-gross,
.saison-mini:focus-within .saison-gross { display: block; }
.saison-gross-kopf { display: block; font-family: var(--font-heading); font-size: 15px;
  margin-bottom: 8px; }
.saison-gross-chart { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px;
  align-items: end; height: 96px; }
.saison-gross-spalte { display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; height: 100%; }
.saison-gross-spalte i { display: block; width: 100%; min-height: 2px;
  background: #c9d6b6; }
.saison-gross-spalte.ist-jetzt i { background: currentColor; }
.saison-gross-spalte.ist-termin i { background: var(--color-primary); }
.saison-gross-spalte em { font-style: normal; font-size: 11px; color: var(--color-muted);
  margin-top: 3px; }
.saison-gross-spalte.ist-jetzt em, .saison-gross-spalte.ist-termin em {
  color: var(--color-text); font-weight: var(--fw-bold); }
.saison-gross-fuss { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px;
  font-size: var(--fs-meta); }
.saison-gross-jetzt::before, .saison-gross-termin::before { content: ""; display: inline-block;
  width: 10px; height: 10px; margin-right: 5px; vertical-align: -1px; }
.saison-gross-jetzt::before { background: currentColor; }
.saison-gross-termin::before { background: var(--color-primary); }
/* Ohne Maus gibt es kein Ueberfahren — dort bleibt die kleine Anzeige fuer sich. */
@media (pointer: coarse) { .saison-gross { display: none !important; } }

/* Mikrofon neben der Suche: derselbe Wunsch, nur gesprochen. Der gruene Punkt
   unterscheidet das Gespraech von einer blossen Diktierfunktion. */
.header-search-mic { position: relative; display: inline-flex; align-items: center;
  justify-content: center; width: var(--tap-target); height: var(--tap-target);
  flex: 0 0 var(--tap-target); background: var(--color-primary);
  color: var(--color-on-primary); border-left: 1px solid var(--color-on-primary-faint); }
.header-search-mic:hover { color: var(--color-tertiary); }
.header-search-mic svg { width: 20px; height: 20px; fill: currentColor; }
.header-search-mic-punkt { position: absolute; top: 4px; right: 3px; width: 7px; height: 7px;
  border-radius: var(--radius-round); background: var(--color-tertiary); }
@media (prefers-reduced-motion: no-preference) {
  .header-search-mic-punkt { animation: mic-punkt 2.4s ease-in-out infinite; }
}
@keyframes mic-punkt { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Sprachassistent IN der Suchleiste (Uwe, 23.09.2026, Variante E): Solange das Gespräch
   läuft, wird das Feld breiter und zeigt, was gesagt wurde; die Welle läuft rechts im
   Feld, das Mikrofon wird zum roten Stopp-Knopf, und darunter hängt eine Blase mit der
   Antwort. Kein eigenes Band mehr über oder unter der Seite. */
.kopf-welle { display: none; }
.header-search.ist-kopf-aktiv { flex-basis: 560px; border-color: var(--color-tertiary);
  box-shadow: 0 0 0 2px var(--color-tertiary); }
.header-search.ist-kopf-aktiv .header-search-input { padding-right: 140px;
  font-family: var(--font-heading); font-size: 18px; color: var(--color-primary); }
.header-search.ist-kopf-aktiv .kopf-welle { display: block; position: absolute;
  right: calc(2 * var(--tap-target) + 12px); top: 50%; transform: translateY(-50%);
  width: 120px; height: 30px; pointer-events: none; }
/* Seit dem Scan-Knopf (16.10.2026) stehen rechts drei Knöpfe - die Welle rückt einen weiter (Uwe, 21.10.2026:
   „die Sprechlinie ragt rechts rüber“, sie lief in die Lupe) */
.header-search.ist-kopf-aktiv:has(.header-search-scan:not([hidden])) .kopf-welle {
  right: calc(3 * var(--tap-target) + 12px); }
.header-search.ist-kopf-aktiv .header-search-mic { background: var(--color-danger);
  color: var(--color-white); }
.header-search.ist-kopf-aktiv .header-search-mic-punkt { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .header-search.ist-kopf-aktiv .header-search-mic { animation: kopf-mikro 1.8s ease-in-out infinite; }
}
@keyframes kopf-mikro { 0%, 100% { box-shadow: inset 0 0 0 0 rgba(135,177,75,0); }
  50% { box-shadow: inset 0 0 0 3px var(--color-tertiary); } }
.kopf-blase { position: absolute; left: 0; top: calc(100% + 10px); z-index: var(--z-flyout);
  min-width: 340px; max-width: 540px; padding: 12px 18px 12px;
  background: var(--color-white); color: var(--color-text);
  border-radius: 4px 16px 16px 16px; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.kopf-blase[hidden] { display: none; }
.kopf-blase-antwort { margin: 0 0 4px; font-family: var(--font-heading); font-size: 17px;
  line-height: 1.35; color: var(--color-primary); }
.kopf-blase-antwort:empty { display: none; }
.kopf-blase-status { margin: 0; font-size: var(--fs-meta); color: var(--color-muted); line-height: 1.4; }
.kopf-blase-status [data-status]:not(:empty)::after,
.kopf-blase-zeit:not(:empty)::after { content: " ·"; }
.kopf-blase-datenschutz { margin-bottom: 10px; font-size: var(--fs-small); }
.kopf-blase-weiter { display: block; margin: 4px 0 8px; }
.kopf-blase-weiter[hidden] { display: none; }
.kopf-blase-datenschutz p { margin: 0 0 8px; }
@media (max-width: 991px) {
  .header-search.ist-kopf-aktiv { flex-basis: 100%; }
  .header-search.ist-kopf-aktiv .header-search-input { padding-right: 76px; font-size: 16px; }
  .header-search.ist-kopf-aktiv .kopf-welle { width: 56px; height: 24px;
    right: calc(2 * var(--tap-target) + 8px); }
  .header-search.ist-kopf-aktiv:has(.header-search-scan:not([hidden])) .kopf-welle {
    right: calc(3 * var(--tap-target) + 8px); }
  .kopf-blase { left: 0; right: 0; min-width: 0; max-width: none; }
}

/* Assistentenseite: großer Startknopf statt Sprechleiste — gesprochen wird oben. */
.assistent-start { display: flex; align-items: center; gap: var(--space-5); margin: 18px 0 20px;
  padding: 22px 24px; background: var(--color-secondary); border-radius: 12px; }
.assistent-mikro-gross { width: 88px; height: 88px; flex: 0 0 88px; }
.assistent-mikro-gross .assistent-mikro-symbol { width: 40px; height: 40px; }
.assistent-start-titel { margin: 0 0 4px; font-family: var(--font-heading); font-size: 24px;
  color: var(--color-primary); }
.assistent-start-text .hint { margin: 0; }
.assistent-mikrotest .assistent-welle { max-width: 360px; height: 32px; }

/* ---------- Warenkorbleiste rechts ----------
   Auf breiten Schirmen liegt rechts Platz brach, während der Einkäufer seine
   Bestellung über Stunden zusammensucht. Dort steht ab 1660 px der Warenkorb:
   was drin ist, was es kostet und — als Balken statt als nackter Zahl — wie voll
   der CC-Container ist. Darunter bleibt alles beim Alten (Kopfzeilen-Warenkorb
   und CC-Plakette); die Leiste ist eine Zugabe, kein Ersatz. */
.korb-leiste { display: none; }

/* Breite verstellbar: Der Griff an der linken Kante zieht die Leiste breiter oder
   schmaler (280–480 px), app.js merkt sich den Wert im Browser (Uwe, 22.09.2026). */
:root { --korb-breite: 340px; }

@media (min-width: 1660px) {
  body.hat-korbleiste { padding-right: var(--korb-breite); }
  /* Der Platz fuer die Leiste wird am <body> freigehalten — die Kopfzeile darf ihn
     sich zurueckholen. Sonst endet das Gruen 300 px vor dem Rand und oben rechts
     steht ein weisses Rechteck neben dem Header. Die Leiste haengt unter ihm. */
  body.hat-korbleiste > header { margin-right: calc(-1 * var(--korb-breite)); }
  /* Mit der Leiste bleibt fuer die Kopfzeile weniger Breite. Bricht die
     Navigation dann um, darf der Header hoeher werden — feste Hoehe wuerde
     die zweite Zeile abschneiden. */
  body.hat-korbleiste .header-row { height: auto; min-height: var(--header-height-xxl); }
  /* --kopf-hoehe misst app.js (gelbe Mitarbeiter-Leiste, umbrechende Navigation); die
     Rechnung ist nur der Rückfall ohne Skript. */
  .korb-leiste { display: flex; flex-direction: column; position: fixed; right: 0;
    top: var(--kopf-hoehe, calc(var(--header-height-xxl) + var(--topbar-height)));
    bottom: var(--hinweis-hoehe, 0px);
    width: var(--korb-breite);
    background: var(--color-white); border-left: 1px solid var(--color-border);
    box-shadow: -2px 0 12px rgba(0, 0, 0, .06);
    z-index: var(--z-sticky-bar); }
  .korb-griff { position: absolute; left: -4px; top: 0; bottom: 0; width: 10px;
    cursor: col-resize; background: transparent; border: none; padding: 0; z-index: 1; }
  .korb-griff::before { content: ""; position: absolute; left: 4px; top: 50%; width: 3px;
    height: 46px; margin-top: -23px; border-radius: 2px; background: var(--color-border); }
  .korb-griff:hover::before, .korb-griff:focus-visible::before { background: var(--color-tertiary); }
  body.korb-zieht { user-select: none; cursor: col-resize; }
  /* Der Warenkorb steht rechts — in der Kopfzeile wäre er dann doppelt. */
  body.hat-korbleiste .header-cart, body.hat-korbleiste .cc-container { display: none; }
}

#korb-leiste-inhalt { display: flex; flex-direction: column; min-height: 0; height: 100%; }
/* Auf Warenkorb und Kasse: da, aber aus (der Sprachassistent blendet sie beim Seitenwechsel ein) */
.korb-leiste.ist-aus { display: none !important; }
.korb-kopf { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-2); padding: 10px var(--space-3); background: var(--color-primary); text-decoration: none; }
.korb-kopf:hover .korb-titel { text-decoration: underline; text-decoration-color: var(--color-tertiary);
  text-underline-offset: 4px; }
.korb-titel { font-family: var(--font-heading); font-size: var(--fs-ui);
  text-transform: uppercase; letter-spacing: 1px; color: var(--color-on-primary); }
.korb-anzahl { font-size: var(--fs-meta); color: var(--color-tertiary); white-space: nowrap; }

.korb-cc { padding: 10px var(--space-3); border-bottom: 1px solid var(--color-secondary); }
.korb-cc-zeile { display: flex; justify-content: space-between; gap: var(--space-2);
  font-size: var(--fs-meta); color: var(--color-muted); }
.korb-cc-zeile span:last-child { font-variant-numeric: tabular-nums; color: var(--color-text); }
.korb-cc-balken { height: 8px; margin: 5px 0 4px; background: var(--color-secondary);
  border-radius: 4px; overflow: hidden; }
.korb-cc-balken span { display: block; height: 100%; background: var(--color-tertiary);
  border-radius: 4px; transition: width var(--duration-slow) var(--ease-standard); }
.korb-cc-hinweis { font-size: var(--fs-meta); color: var(--color-accent-text); }

.korb-zeilen { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--space-1) 0; }
/* Zeile der Warenkorbleiste: siehe „Warenkorbleiste: Zeile auf einen Blick" am Ende. */

.korb-leer { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center;
  gap: var(--space-1); padding: var(--space-6) var(--space-3); text-align: center; }
.korb-leer-titel { font-family: var(--font-heading); font-size: var(--fs-ui);
  color: var(--color-muted); }
.korb-leer-hinweis { font-size: var(--fs-meta); color: var(--color-muted); }

.korb-fuss { border-top: 1px solid var(--color-secondary); padding: var(--space-3); }
.korb-summe-zeile { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-2); margin-bottom: var(--space-2); font-size: var(--fs-meta);
  color: var(--color-muted); }
.korb-summe { font-family: var(--font-heading); font-size: var(--fs-lead);
  font-variant-numeric: tabular-nums; color: var(--color-primary); }
.korb-kasse { display: block; width: 100%; text-align: center; }

/* Der Flug in den Korb: Das Bild des Artikels wandert in einem Bogen nach rechts.
   Zwei Elemente, weil eine Kurve zwei verschiedene Zeitverläufe braucht — außen
   gleichmäßig zur Seite, innen beschleunigt nach unten. */
.korb-flug { position: fixed; z-index: var(--z-toast); pointer-events: none;
  transition: transform 0.62s linear; }
.korb-flug img { display: block; width: 72px; height: 90px; object-fit: cover;
  box-shadow: var(--shadow-card);
  transition: transform 0.62s cubic-bezier(0.55, 0, 0.85, 0.35), opacity 0.2s ease-in 0.42s; }
@keyframes korb-zeile-neu {
  0% { background: var(--color-tertiary); }
  100% { background: transparent; }
}
.korb-zeile.ist-neu { animation: korb-zeile-neu 1.4s var(--ease-standard); }
/* Vom Assistenten gelegt, Bild noch unterwegs: Die Zeile steht schon da, wartet aber
   blass, bis der Flug ankommt — sonst waere sie vor ihrem eigenen Bild da. */
.korb-zeile.kommt-noch { opacity: 0.25; }
.korb-zeile { transition: opacity 0.25s ease; }
@media (prefers-reduced-motion: reduce) {
  .korb-flug { display: none; }
  .korb-zeile.ist-neu { animation: none; }
  .korb-cc-balken span { transition: none; }
}

/* ---------- Bestellhistorie ----------
   Drei Quellen auf einer Seite (offene Auftraege, Lieferungen, Shop-Bestellungen) —
   ohne Zwischenueberschriften waere nicht zu erkennen, was man da liest. */
.historie-titel { font-family: var(--font-heading); font-size: var(--fs-lead);
  text-transform: uppercase; letter-spacing: 1px; color: var(--color-primary);
  margin: var(--space-8) 0 var(--space-1); }
.historie-titel:first-of-type { margin-top: var(--space-5); }
.historie-hinweis { font-size: var(--fs-small); color: var(--color-muted);
  margin: 0 0 var(--space-3); }
.historie-kundennr { display: block; font-size: var(--fs-meta); color: var(--color-muted); }

/* Pfadzeile im Sortiment — gleiche Sprache wie die auf der Artikelseite. */
.katalog-pfad { display: flex; align-items: center; flex-wrap: wrap;
  gap: 0 var(--space-2); font-size: var(--fs-small); color: var(--color-muted);
  margin: 14px 0 10px; }
.katalog-pfad a { color: var(--color-primary); }
.katalog-pfad a:hover { color: var(--color-tertiary); }
.katalog-pfad-trenner { color: var(--color-border); }

/* Alte Lieferung durchgehen: Bilder statt Tabellenzeilen — die Pflanze erkennt man
   schneller am Bild als an der Nummer. */
.historie-positionen { list-style: none; margin: var(--space-5) 0 0; padding: 0; }
.historie-position { display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-2) 0; border-bottom: 1px solid var(--color-secondary); }
.historie-position.ist-weg { opacity: 0.6; }
.historie-position-bild { flex: 0 0 64px; width: 64px; height: 80px; display: flex;
  align-items: center; justify-content: center; background: var(--color-secondary); }
.historie-position-bild img { width: 100%; height: 100%; object-fit: cover; }
.historie-position-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.historie-position-name { font-family: var(--font-heading); font-size: var(--fs-card-name);
  color: var(--color-text); }
.historie-position-name:hover { color: var(--color-tertiary); text-decoration: none; }
.historie-position-meta { font-size: var(--fs-meta); color: var(--color-muted); }
.historie-position-weg { font-size: var(--fs-meta); color: var(--color-danger); }
.historie-position-menge { flex: 0 0 auto; display: flex; flex-direction: column;
  align-items: flex-end; min-width: 92px; }
.historie-position-damals { font-family: var(--font-heading); font-size: var(--fs-ui); }
.historie-position-preis { font-size: var(--fs-meta); color: var(--color-muted); }
.historie-position-add { flex: 0 0 auto; width: var(--tap-target); height: var(--tap-target);
  padding: 0; font-size: 22px; line-height: 1; }

.uebernahme-aktion { margin: var(--space-4) 0 0; }
.uebernahme-ergebnis { margin: var(--space-4) 0; padding: var(--space-4);
  background: var(--color-secondary); border-left: 4px solid var(--color-tertiary); }
.uebernahme-gut { margin: 0 0 var(--space-2); font-family: var(--font-heading);
  font-size: var(--fs-ui); }
.uebernahme-fehlt { margin: 0 0 var(--space-1); font-size: var(--fs-small);
  color: var(--color-danger); }
.uebernahme-liste { margin: 0 0 var(--space-2); padding-left: var(--space-5);
  font-size: var(--fs-small); }
.uebernahme-grund { color: var(--color-muted); }
.uebernahme-cc { margin: 0 0 var(--space-3); font-size: var(--fs-small);
  color: var(--color-accent-text); }

/* Bestellhistorie (Eilert, 05.10.2026): ruhige Tabellen ohne Bild am Belegkopf, Beleg und
   Gesamtwert betont (der steht hinten), Status als Plakette, Aktionen rechts in einer Zeile. */
.historie-abschnitt + .historie-abschnitt { margin-top: var(--space-8); }
.historie-tabelle th { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.03em;
  white-space: nowrap; }
.historie-tabelle td { vertical-align: middle; }
.historie-tabelle .zelle-beleg, .historie-tabelle .zelle-datum { white-space: nowrap; }
.historie-tabelle .zelle-beleg { font-family: var(--font-heading); font-size: var(--fs-ui); }
.historie-tabelle .zelle-wert { font-family: var(--font-heading); font-size: var(--fs-ui); white-space: nowrap; }
.historie-tabelle .zelle-referenz { color: var(--color-muted); }
.historie-link { font-family: var(--font-heading); white-space: nowrap; }
.status-chip { display: inline-block; padding: 2px 10px; border-radius: var(--radius-round);
  background: var(--color-secondary); font-size: var(--fs-small); white-space: nowrap; }
.status-chip.status-released { background: var(--color-tertiary); color: var(--color-on-tertiary); }
@media screen and (min-width: 641px) {
  /* display:flex an der Zelle riss sie aus der Tabelle (Rahmen und Streifen verrutschten) */
  .historie-tabelle td.orders-actions { display: table-cell; text-align: right; white-space: nowrap; }
  .historie-tabelle td.orders-actions > * + * { margin-left: var(--space-4); }
}

/* Lieferschein: Kennzahlen als Leiste, darunter die Positionen wie im Katalog */
.historie-kennzahlen { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-8);
  margin: 0 0 var(--space-5); padding: var(--space-3) var(--space-4); background: var(--color-secondary); }
.historie-kennzahlen div { display: flex; flex-direction: column; }
.historie-kennzahlen dt { font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--color-muted); }
.historie-kennzahlen dd { margin: 0; font-family: var(--font-heading); font-size: var(--fs-lead); }
.historie-kennzahlen .ist-wert dd { color: var(--color-primary); }
.lieferschein .nb-kopf .uebernahme-aktion { margin: 0; }
.lieferschein .nb-abschnitt { margin-top: var(--space-5); }
.lieferschein .historie-positionen { margin-top: var(--space-2); }
@media (max-width: 640px) {
  .historie-kennzahlen { gap: var(--space-2) var(--space-5); }
  .historie-kennzahlen dd { font-size: var(--fs-ui); }
}
.zeitraum-block { margin-bottom: var(--space-10); }
.zeitraum-fehlt { margin-top: var(--space-4); font-size: var(--fs-small); }
.zeitraum-fehlt summary { cursor: pointer; color: var(--color-muted); }

.korb-termin { display: block; padding: 6px var(--space-3); background: #dfeccb;
  color: var(--color-on-tertiary); font-size: var(--fs-meta); }
.korb-termin:hover { text-decoration: none; }
/* Verladetermin direkt in der Leiste ändern (Uwe, 08.10.2026): Klick klappt das Datumsfeld auf */
.korb-termin > summary { cursor: pointer; list-style: none; }
.korb-termin > summary::-webkit-details-marker { display: none; }
.korb-termin > summary::after { content: "\25BE"; margin-left: 6px; }
.korb-termin[open] > summary::after { content: "\25B4"; }
.korb-termin > summary:hover { text-decoration: underline; }
.korb-termin-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 8px; margin: 6px 0 2px; }
.korb-termin-form label, .korb-termin-feld { display: flex; flex-direction: column; gap: 2px; flex: 1 1 150px; }
.korb-termin-feld { flex-basis: 100%; }
.korb-termin-form input[type="date"], .korb-termin-form select { font: inherit; padding: 4px 6px; border: 1px solid var(--color-border);
  border-radius: 3px; background: var(--color-white); color: var(--color-text); }
.korb-termin-form .btn { padding: 5px 12px; font-size: var(--fs-meta); }

/* Bedienelemente in der Warenkorbleiste: Menge in ganzen VE aendern, Position weg.
   Wer den Korb rechts sieht, soll ihn dort auch aufraeumen koennen. */
/* Auf Touch-Geraeten gibt es die Leiste nicht (erst ab 1660 px) — die 22 px sind
   bewusst klein, hier zeigt eine Maus darauf. */

/* Footer unten halten: Bei kurzen Seiten (eine Reihe Kacheln) klebte er sonst
   mitten im Bild. Jetzt schiebt der Inhalt ihn an den unteren Rand — und bei
   langen Seiten steht er wie gewohnt erst hinter dem Inhalt. */
body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1 0 auto; }

/* ==========================================================================
   Durchsicht nach Ansichten (Uwe, 23.09.2026): Handy 360/390, Tablet 768/1024,
   Desktop 1280–2560 durchfotografiert. Was dabei auffiel, steht hier gesammelt.
   ========================================================================== */

/* Die Kategorie-Menues ragten unsichtbar ueber den rechten Rand: Zwischen 1024 und
   1440 px liess sich JEDE Seite seitlich verschieben. app.js rueckt ein Menue beim
   Oeffnen ins Bild; clip faengt den Rest ab, ohne eine Scrollbox zu bauen (der
   Header bleibt sticky, Menues nach unten bleiben sichtbar). */
.header-main { overflow-x: clip; }

/* Kopfzeile auf kleinen Handys (360 px): Menue, Logo, Konto, Merkzettel und
   Warenkorb passen in EINE Zeile — vorher rutschte der Warenkorb allein in eine
   zweite, und der Kopf wurde drei Zeilen hoch. */
@media (max-width: 399px) {
  .header-row { column-gap: 2px; }
  .header-logo-main-img { width: 72px; }
  .nav-toggle, .header-tool, .header-cart-symbol { width: 42px; min-width: 42px; }
  .header-cart { gap: 0; padding-left: 0; min-width: 0; }
  .header-cart-summe { font-size: 13px; }
}

/* CC-Plakette zwischen Handy und Laptop: kleiner, damit sie nicht an der
   Warenkorbsumme klebt. Auf dem Handy steht der Wert in der Leiste unten. */
@media (min-width: 576px) and (max-width: 991px) {
  .cc-container { width: auto; padding: 0 10px; font-size: 14px; line-height: 28px;
    box-shadow: none; white-space: nowrap; }
}

.cart-sticky-summe { display: flex; flex-direction: column; line-height: 1.15; }
.cart-sticky-summe small { font-size: 12px; color: var(--color-accent-text); }

@media (max-width: 640px) {
  /* VK-Rechner: Faktor schmal, Rundung nimmt den Rest, Knopf ueber die ganze Breite.
     Die Auswahlliste war so breit wie ihr laengster Eintrag und ragte hinaus. */
  .vk-rechner { gap: 8px 10px; }
  .vk-rechner label:has(select), .vk-konto-form label:has(select) { flex: 1 1 0; }
  .vk-rechner select, .vk-konto-form select { width: 100%; }
  .vk-rechner input[type="text"], .vk-konto-form input { width: 84px; }
  .vk-rechner .btn-primary, .vk-konto-form .btn-primary { flex: 1 1 100%; }
}
.vk-rechner label, .vk-konto-form label { min-width: 0; max-width: 100%; }
.vk-rechner select, .vk-konto-form select { max-width: 100%; }

/* Konto: Das Raster wuchs mit der breitesten Auswahlliste mit (454 px auf 390). */
.account-layout { grid-template-columns: minmax(0, 1fr); }
.pdp-meta dd { min-width: 0; overflow-wrap: anywhere; }

/* Bestellhistorie, Konto und Bestellbestaetigung: Auf dem Handy wird jede Zeile
   eine Karte, die Spaltenkoepfe stehen an den Werten (data-label). Die Tabellen
   ragten sonst bis zu 130 px aus dem Bild. Nur am Bildschirm — gedruckt bleibt es
   eine Tabelle. */
@media screen and (max-width: 640px) {
  .orders-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; }
  .orders-table, .orders-table tbody { display: block; }
  .orders-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px; padding: 12px 10px; border-bottom: 1px solid var(--color-border); }
  .orders-table td { display: block; min-width: 0; padding: 0; border: 0; text-align: left;
    overflow-wrap: anywhere; }
  .orders-table td[data-label]::before { content: attr(data-label); display: block;
    font-family: var(--font-heading); font-size: 12px; letter-spacing: 0.03em;
    text-transform: uppercase; color: var(--color-muted); }
  .orders-table td.zelle-titel { grid-column: 1 / -1; order: -1; font-size: 17px; }
  .orders-table td.num { text-align: left; }
  .orders-table td:empty { display: none; }
  .orders-table .orders-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap;
    align-items: center; gap: 8px 18px; }
}

/* ==========================================================================
   Warenkorb als Karten, Werkzeugleiste oben (Uwe, 24.09.2026, am Handy und im
   schmal gezogenen Browser): Liefertermin, Import und VK-Preise als drei gleiche
   gruene Knoepfe; jede Position eine Karte mit Bild 2:3, Qualitaet statt VE und
   EINER Feldzeile mit kleinen Beschriftungen.
   ========================================================================== */
.cart-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 4px 16px; }
.cart-weiter { font-size: var(--fs-meta); white-space: nowrap; }

/* Die CC-Plakette ist ein Link in den Warenkorb — sie soll aber nicht wie einer aussehen. */
a.cc-container, a.cc-container:hover { color: var(--color-white); text-decoration: none; }
a.cc-container:hover { filter: brightness(1.08); }

.korb-werkzeuge { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: 8px; max-width: 760px; margin: 4px 0 12px; }
.korb-werkzeug { display: flex; align-items: center; gap: 10px; min-height: 54px;
  padding: 8px 14px; border-radius: 8px; background: var(--color-primary);
  color: var(--color-on-primary); text-decoration: none; }
.korb-werkzeug:hover { color: var(--color-on-primary); text-decoration: none; filter: brightness(1.15); }
.korb-werkzeug .header-icon { width: 24px; height: 24px; color: var(--color-tertiary); }
.korb-werkzeug-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.korb-werkzeug-text strong { font-family: var(--font-heading); font-size: 16px;
  letter-spacing: 0.03em; text-transform: uppercase; }
.korb-werkzeug-text small { font-size: 12px; color: rgba(255, 255, 255, 0.78);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.korb-werkzeug.ist-gesetzt small { color: var(--color-tertiary); font-weight: var(--fw-bold); }
.korb-werkzeug[aria-expanded="true"] { background: var(--color-tertiary); color: var(--color-on-tertiary); }
.korb-werkzeug[aria-expanded="true"] .header-icon,
.korb-werkzeug[aria-expanded="true"] small { color: var(--color-on-tertiary); }

/* Kasten unter der Leiste: nur einer offen (app.js); ohne Skript per Sprungmarke. */
.korb-panel { display: none; max-width: 760px; margin: -4px 0 14px; padding: 12px 14px;
  background: var(--color-secondary); border-radius: 8px;
  border-top: 3px solid var(--color-tertiary); }
.korb-panel.ist-offen { display: block; }
html:not(.js) .korb-panel:target { display: block; }
.korb-panel-hinweis { margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: var(--color-muted); }
.korb-panel .vk-waehrung-hinweis { margin: 0 0 8px; }
.korb-panel .vk-rechner { margin: 0; padding: 0; background: none; }
.wunschtermin { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; }
.wunschtermin-feld { display: flex; flex-direction: column; gap: 3px; flex: 1 1 180px;
  max-width: 260px; font-size: var(--fs-meta); color: var(--color-muted); }
.wunschtermin-feld input, .wunschtermin-feld select { width: 100%; min-height: 42px; padding: 6px 10px; font-size: 16px;
  border: 1px solid #b9c2bd; background: var(--color-white); }
.wunschtermin .btn { min-height: 42px; }
.wunschtermin-feld:has(.ladetag-kalender.ist-bereit) { max-width: 340px; flex-basis: 260px; }

/* Verladetermin als Kalender (Uwe, 22.10.2026: „kalender wieder haben, kein drop down“; kalender.js):
   nur die Ladetage sind Knöpfe, alle anderen Tage stehen grau daneben. Tippflächen mindestens 44 px -
   der Kalender steht im Warenkorb, in der Leiste, an der Kasse und am Hausmesse-Terminal. */
.ladetag-kalender { width: 100%; max-width: 340px; color: var(--color-text); }
.ladetag-kalender.ist-bereit select { display: none; }
.checkout-card .ladetag-kalender { margin-bottom: 10px; }
.lk-wahl { margin: 0 0 6px; font-family: var(--font-heading); font-size: var(--fs-ui); font-weight: var(--fw-bold);
  line-height: 1.2; color: var(--color-primary); }
.lk-kopf { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.lk-titel { flex: 1; text-align: center; font-family: var(--font-heading); font-size: 17px;
  font-weight: var(--fw-bold); text-transform: uppercase; color: var(--color-text); }
.lk-blaettern { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 var(--tap-target);
  width: var(--tap-target); height: var(--tap-target); padding: 0; border: 1px solid var(--color-border);
  border-radius: 6px; background: var(--color-white); color: var(--color-primary); cursor: pointer; }
.lk-blaettern:disabled { visibility: hidden; }
.lk-blaettern svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round; }
.lk-weiter svg { transform: scaleX(-1); }
.lk-raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.lk-wt { padding: 2px 0; text-align: center; font-size: 12px; font-weight: var(--fw-semibold);
  color: var(--color-muted); }
.lk-wt.ist-wochenende { color: #a6a6a6; }
.lk-tag { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: var(--tap-target);
  padding: 0; border: 1px solid transparent; border-radius: 6px; font-family: var(--font-body); font-size: 15px;
  font-variant-numeric: tabular-nums; line-height: 1; }
button.lk-tag { border-color: var(--color-tertiary); background: var(--color-white); color: var(--color-primary);
  font-weight: var(--fw-bold); cursor: pointer; }
button.lk-tag[aria-pressed="true"] { border-color: var(--color-primary); background: var(--color-primary);
  color: var(--color-on-primary); }
button.lk-tag:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.lk-tag.ist-gesperrt { color: #b3b3b3; }
.lk-tag.ist-heute { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (hover: hover) {
  .lk-blaettern:hover { background: var(--color-secondary); }
  button.lk-tag:not([aria-pressed="true"]):hover { background: #dfeccb; }
}
@media (pointer: coarse) {
  .lk-tag { min-height: 48px; font-size: 17px; }
  .lk-blaettern { flex-basis: 48px; width: 48px; height: 48px; }
}

/* Die Position als Karte. Schmal (Handy, Tablet): Bild, Kopf und × oben, darunter
   Lage und Felder ueber die ganze Breite. Breit genug (Container-Abfrage): alles in
   einer Zeile — bei 30 Positionen zaehlt jeder Zentimeter. */
.cart-items { display: grid; gap: 10px; align-content: start; container-type: inline-size; }
.cart-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto;
  grid-template-areas: "bild kopf weg" "lagen lagen lagen" "felder felder felder";
  gap: 8px 12px; align-items: start; padding: 12px; background: var(--color-white);
  border: 1px solid #dfe5e1; border-radius: var(--radius-card);
  box-shadow: 0 1px 2px rgba(3, 80, 60, 0.06); }
.cart-item-image { grid-area: bild; display: block; width: 56px; }
/* Unsere Fotos sind 2:3 — so bleibt oben und unten nichts abgeschnitten. */
.cart-item-image img, .cart-item-ohnebild { display: block; width: 56px; height: auto;
  aspect-ratio: 2 / 3; object-fit: contain; background: var(--color-secondary); border-radius: 4px; }
.cart-item-kopf { grid-area: kopf; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cart-item-label { font-family: var(--font-heading); font-size: 17px; line-height: 1.2;
  font-weight: var(--fw-bold); color: var(--color-text); }
.cart-item-qualitaet { display: flex; flex-wrap: wrap; gap: 0 12px; font-family: var(--font-heading);
  font-size: 15px; color: var(--color-primary); }
.cart-item-no { display: block; font-size: 12px; line-height: 1.4; color: var(--color-muted); }
.cart-item-hint { color: var(--color-accent-text); }
.cart-item-hint strong { font-weight: var(--fw-bold); }
.cart-remove { grid-area: weg; }
.cart-remove-btn { background: none; border: none; font-size: 22px; line-height: 1;
  padding: 2px 4px; color: var(--color-muted); cursor: pointer; }
.cart-remove-btn:hover { color: var(--color-primary); }
.cart-lagen { grid-area: lagen; margin: 0; gap: 4px 10px; }
.cart-lagen .lagen-bar { width: 56px; }
.cart-lagen .lagen-text { flex: 1 1 200px; min-width: 0; font-size: 12px; }
.cart-item-form { grid-area: felder; min-width: 0; }

/* Die Kunden-Artikelnummer ist kurz — ein 440 px breites Feld sah nach Freitext aus. */
.cart-fields { display: grid; grid-template-columns: 104px minmax(0, 220px) 96px minmax(0, 1fr);
  gap: 4px 8px; align-items: start; }
.cart-fields.ohne-summe { grid-template-columns: 104px minmax(0, 220px) 96px; }
.cart-fields label, .feld-summe { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cart-fields label > span:first-child, .feld-summe > span, .feld-menge > span:first-child { font-family: var(--font-heading);
  font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-fields input { width: 100%; min-width: 0; height: 40px; padding: 6px 8px;
  font-family: var(--font-body); font-size: 16px; color: var(--color-text);
  border: 1px solid #c3ccc7; border-radius: 4px; background: var(--color-white); }
.cart-fields input:focus { border-color: var(--color-primary); outline: 2px solid var(--color-tertiary);
  outline-offset: 0; }
/* Menge wie am Auftragsmonitor (Uwe, 29.09.2026): frühlingsgrüner Kreis mit der Menge (zum
   Eintippen), links − und rechts + um je eine VE. 40 px wie die übrigen Felder — größer sah
   es komisch aus und machte die Zeile höher. */
.feld-menge { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.feld-menge > span:first-child { text-align: center; }
.menge-reihe { display: flex; align-items: center; justify-content: center; gap: 3px; height: 40px; }
.cart-fields .menge-kreis { flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--radius-round);
  gap: 0; align-items: center; justify-content: center; background: var(--color-tertiary);
  color: var(--color-on-tertiary); cursor: text; }
.cart-fields .menge-kreis:focus-within { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.cart-fields .menge-kreis input { width: 100%; height: auto; padding: 0; border: 0; background: transparent;
  color: inherit; text-align: center; font-family: var(--font-heading); font-weight: var(--fw-bold);
  font-size: 15px; line-height: 1; -moz-appearance: textfield; appearance: textfield; }
.cart-fields .menge-kreis input::-webkit-outer-spin-button,
.cart-fields .menge-kreis input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cart-fields .menge-kreis input:focus { outline: none; }
.menge-kreis small { font-size: 9px; line-height: 1; letter-spacing: 0.04em; }
.menge-knopf { flex: 0 0 auto; width: 24px; height: 24px; padding: 0 0 2px; border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-round); background: var(--color-white); color: var(--color-primary);
  font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 16px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.menge-knopf:hover, .menge-knopf:focus-visible { background: var(--color-primary); color: var(--color-on-primary); }
.cart-fields .feld-vk input { text-align: right; font-variant-numeric: tabular-nums; }
.cart-fields .cart-vk-fest { display: flex; align-items: center; justify-content: flex-end;
  height: 40px; padding: 0 8px; font-size: 15px; white-space: nowrap; }
.feld-summe { align-items: flex-end; justify-self: end; text-align: right; }
.cart-line-total { font-family: var(--font-heading); font-size: 18px; line-height: 40px;
  color: var(--color-accent-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Stückpreis (EK) klein unter der Positionssumme — zum Nachrechnen des VK */
.cart-line-stueck { margin-top: -8px; font-size: 12px; line-height: 1.2; color: var(--color-muted);
  white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Einkaufspreis geaendert: haengt am VK-Feld (gleiche Farbe) und erscheint nur, wo man
   den VK selbst aendern kann — bei festem VK (Listung) ist er ohne Belang. */
.cart-item.hat-preishinweis .feld-vk input { border-color: #d9b84a; background: var(--color-notice-bg); }
.cart-vk-hinweis { grid-column: 1 / -1; margin: 2px 0 0; padding: 4px 8px; font-size: 12px;
  line-height: 1.4; color: #6b5200; background: var(--color-notice-bg);
  border-left: 3px solid #d9b84a; border-radius: 0 4px 4px 0; }
.cart-vk-herkunft { grid-column: 1 / -1; margin: 0; font-size: 11px; color: var(--color-muted);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 2px 6px; }
.cart-comment { grid-column: 1 / -1; }
.cart-comment summary { width: fit-content; cursor: pointer; font-size: 13px;
  color: var(--color-accent-text); list-style: none; }
.cart-comment summary::-webkit-details-marker { display: none; }
.cart-comment summary::before { content: "+ "; }
.cart-comment[open] summary::before { content: "– "; }
.cart-comment textarea { width: 100%; margin-top: 4px; min-height: 60px; padding: 8px;
  font-family: var(--font-body); font-size: 16px; border: 1px solid #c3ccc7; border-radius: 4px;
  resize: vertical; }
.cart-update { width: auto; padding: 4px 18px; margin-top: 6px; }

/* Ab Tablet steht die Lage neben dem Bild — dort ist unter dem Kopf ohnehin Luft. */
@container (min-width: 600px) {
  .cart-item { grid-template-areas: "bild kopf weg" "bild lagen lagen" "felder felder felder"; }
}
@container (min-width: 820px) {
  .cart-item { grid-template-columns: 56px minmax(0, 1fr) auto auto;
    grid-template-areas: "bild kopf felder weg" "bild lagen felder weg"; column-gap: 16px; }
  .cart-fields { grid-template-columns: 104px 150px 104px 100px; }
  .cart-fields.ohne-summe { grid-template-columns: 104px 150px 104px; }
}

@media (max-width: 640px) {
  /* Vier Knoepfe (seit dem 3D-Gartencenter) passen am Handy nicht nebeneinander — der
     Text lief aus dem Knopf und machte die Seite zu breit. Jetzt zwei mal zwei. */
  .korb-werkzeuge { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .korb-werkzeug { gap: 8px; min-height: 52px; padding: 8px 10px; min-width: 0; }
  .korb-werkzeug-text strong { font-size: 14px; overflow-wrap: anywhere; }
  .korb-werkzeug-text small { font-size: 11px; max-width: 100%; }
  .korb-panel { padding: 10px 12px; }
  .wunschtermin-feld { max-width: none; }
  .cart-item { padding: 10px; column-gap: 10px; }
  .cart-item-label { font-size: 16px; }
  /* Am Handy zwei Reihen: Menge und Summe oben, Artikelnummer und VK darunter — in einer
     Reihe schrumpfte die Artikelnummer auf einen Strich, und die Seite wurde zu breit. */
  .cart-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 10px;
    grid-template-areas: "menge summe" "kdnr vk"; }
  .cart-fields.ohne-summe { grid-template-areas: "menge vk" "kdnr kdnr"; }
  .cart-fields .feld-menge { grid-area: menge; }
  .cart-fields .feld-menge > span:first-child, .cart-fields .menge-reihe { text-align: left; justify-content: flex-start; }
  .cart-fields .feld-summe { grid-area: summe; }
  .cart-fields .feld-kdnr { grid-area: kdnr; }
  .cart-fields .feld-vk { grid-area: vk; }
  .cart-line-total { font-size: 16px; }
}

/* Freisteller als erstes Bild (Uwe, 28.09.2026): Die Studiofotos sind meist quadratisch
   auf reinem Weiss. Im Hochformat-Rahmen werden sie ganz gezeigt statt beschnitten —
   sonst fehlten links und rechts die Zweige. Das Quartierfoto beim Ueberfahren fuellt
   den Rahmen weiter. */
.product-image.ist-freisteller,
.pdp-media .pdp-main.ist-freisteller { object-fit: contain; background: var(--color-white); }
.pdp-thumbs img[data-freisteller="1"] { object-fit: contain; background: var(--color-white); }
.product-box.box-standard:has(.ist-freisteller) .product-image-wrapper { background: var(--color-white); }
.cart-item-image img { background: var(--color-white); }
.korb-zeile-bild { object-fit: contain; background: var(--color-white); }
/* Fotodatum am Hover-Bild der Kachel (Uwe, 28.09.2026: „ich habe bisher nichts dazu
   gesehen"): erscheint mit dem Quartierfoto, leise unten links; frische Fotos gruen. */
.product-image-datum { position: absolute; left: 8px; bottom: 8px; z-index: 1;
  padding: 2px 8px; border-radius: 10px; font-size: 12px; line-height: 1.5;
  background: rgba(255, 255, 255, 0.9); color: var(--color-text); pointer-events: none;
  opacity: 0; transition: opacity var(--duration-base) var(--ease-standard); }
.product-image-datum.is-frisch { background: #dfeccb; color: var(--color-on-tertiary);
  font-weight: var(--fw-semibold); }
.product-box.box-standard:hover .product-image-datum { opacity: 1; }
.product-image-datum.ist-haupt { opacity: 1; }
.product-box.box-standard:has(.product-image-cutout):hover .product-image-datum.ist-haupt { opacity: 0; }


/* ==========================================================================
   Warenkorbleiste: Zeile auf einen Blick (Uwe, 28.09.2026: „man soll auf den ersten
   Blick lesen können, dass der richtige Artikel im Warenkorb gelandet ist", Bild
   größer, weniger Höhe). Vorher machten drei Knöpfe untereinander jede Zeile hoch.
   ========================================================================== */
.korb-zeile { display: flex; align-items: flex-start; gap: 10px; padding: 10px var(--space-3);
  border-bottom: 1px solid var(--color-secondary); color: var(--color-text); }
.korb-zeile:hover { background: var(--color-zebra); }
.korb-zeile-ziel { flex: 0 0 60px; display: block; }
.korb-zeile-bild { display: block; width: 60px; height: 76px; object-fit: contain;
  background: var(--color-white); border-radius: 4px; }
.korb-zeile-leer { background: var(--color-secondary); }
.korb-zeile-text { flex: 1 1 auto; min-width: 0; display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name weg" "qualitaet qualitaet" "unten unten"; gap: 2px 4px; }
.korb-zeile-name { grid-area: name; font-family: var(--font-heading); font-size: 16px;
  font-weight: var(--fw-bold); line-height: 1.2; color: var(--color-text); overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.korb-zeile-name:hover { color: var(--color-primary); }
.korb-weg { grid-area: weg; width: 24px; height: 24px; margin: -2px -4px 0 0; padding: 0;
  border: 0; background: none; color: var(--color-muted); font-size: 18px; line-height: 1;
  cursor: pointer; }
.korb-weg:hover { color: var(--color-danger); }
.korb-zeile-qualitaet { grid-area: qualitaet; display: flex; flex-wrap: wrap; align-items: center;
  gap: 0 8px; font-family: var(--font-heading); font-size: 15px; font-weight: var(--fw-bold);
  color: var(--color-primary); }
.korb-zeile-groesse { font-weight: normal; color: var(--color-muted); }
.korb-zeile-herkunft { padding: 0 6px; border-radius: 9px; background: #dfeccb;
  color: var(--color-on-tertiary); font-family: var(--font-body); font-size: 11px;
  font-weight: normal; line-height: 1.6; }
.korb-zeile-unten { grid-area: unten; display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px 8px; margin-top: 4px; }
.korb-menge { display: inline-flex; align-items: center; border: 1px solid var(--color-border);
  border-radius: 4px; background: var(--color-white); }
.korb-knopf { width: 26px; height: 26px; padding: 0; display: flex; align-items: center;
  justify-content: center; border: 0; background: none; color: var(--color-primary);
  font-size: 16px; line-height: 1; cursor: pointer; }
.korb-knopf:hover { background: var(--color-primary); color: var(--color-on-primary); }
.korb-menge-wert { min-width: 48px; padding: 0 2px; text-align: center; font-size: 13px;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.korb-zeile-lagen { font-size: 12px; color: var(--color-muted); white-space: nowrap; }
.korb-zeile-summe { margin-left: auto; font-family: var(--font-heading); font-size: 15px;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (pointer: coarse) {
  .korb-knopf { width: 34px; height: 34px; }
  .korb-weg { width: 34px; height: 34px; }
}
/* iOS zoomt beim Antippen in jedes Eingabefeld unter 16 px hinein und bleibt vergroessert
   (Messung 30.09.2026: Mitarbeitersuche 12 px, Sortierung 14 px, Korb-Menge 15 px). */
@media (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px; }
}

/* Handy: der Kopf klebt nicht mehr oben - mit Leiste, Logo, Suche und Menue nahm er zu viel vom
   Bildschirm (Uwe, 30.09.2026). Steht hier, weil app.css nach components.css geladen wird. */
@media (max-width: 767px) {
  header { position: static; }
}

/* Handy: Listenansicht in zwei Zeilen - oben Bild + Name/Daten, darunter Preis und Menge.
   Vorher lief der Text unter das Mengenfeld und der Preis fehlte ganz (Uwe, 30.09.2026). */
@media (max-width: 760px) {
  .product-row {
    grid-template-columns: 56px minmax(0, 1fr) auto;
    grid-template-areas: "bild text text" "bild preis aktion";
    gap: 6px 10px; align-items: start; padding: 12px 4px;
  }
  .product-row-image { grid-area: bild; width: 56px; height: 56px; }
  .product-row-image img { width: 56px; height: 56px; }
  .product-row-main { grid-area: text; min-width: 0; }
  .product-row-main .product-name { font-size: 16px; line-height: 1.25; }
  .product-row-meta { font-size: 14px; gap: 2px 10px; }
  .product-row-avail { display: none; }
  .product-row-price { grid-area: preis; display: flex; align-items: flex-start; text-align: left;
    align-self: center; line-height: 1.25; }
  .product-row-price .product-price { font-size: 18px; font-weight: var(--fw-bold); color: var(--color-accent-text); }
  .product-row-actions { grid-area: aktion; align-self: center; }
  .row-add-menge { width: 62px; height: 38px; }
  .row-add-btn { width: 40px; height: 40px; }
  .row-add-imkorb { text-align: right; }
}

/* Handy: Kacheln kompakter - kleinere Schrift, Preiszeile ohne Umbruch-Kaskade, kleinerer
   Mengen-Kreis. Eine Kachel war fast so hoch wie der Bildschirm (Uwe, 30.09.2026). */
@media (max-width: 575px) {
  .product-box.box-standard .product-image-wrapper { aspect-ratio: 4 / 5; }  /* statt 3/4: flacher */
  .product-box.box-standard .product-info { padding: 10px 10px 12px; }
  .product-box.box-standard .product-name { font-size: 15px; line-height: 1.2;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .product-box.box-standard .product-box-data { font-size: 12px; line-height: 1.3; }
  .product-card-meta { font-size: 13px; }
  .product-box.box-standard .product-price { font-size: 19px; }
  .product-box.box-standard .product-hint { font-size: 11.5px; line-height: 1.3; }
  .product-price-row { gap: 6px; align-items: flex-end; }
  .product-box.box-standard .add-circle { width: 44px; height: 44px; font-size: 15px; }
  .assistent-zeichen .assistent-chip { font-size: 11px; padding: 2px 6px; }
}

/* Nachbestellen: Zeitraum-Knoepfe wie auf der Hausmesse, Abschnitte mit Katalog-Karten (30.09.2026) */
.nb-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  margin: 8px 0 18px; }
.nb-zeitraeume { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nb-label { font-weight: var(--fw-bold); margin-right: 4px; }
.nb-zeitraeume .filter-chip[aria-current="true"] { background: var(--color-primary); color: var(--color-on-primary); }
.nb-zeitraeume .nb-laufend { box-shadow: inset 0 -3px 0 var(--color-tertiary); }
.nb-abschnitt { margin: 28px 0 36px; }
.nb-abschnitt .historie-titel { margin-bottom: 4px; }
.nb-aktion { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  margin: 0 0 14px; }
.nb-aktion .historie-hinweis { margin: 0; }
/* Nachbestellen: Karten links beginnen - eine einzelne Karte stand sonst mittig (Uwe, 30.09.2026) */
.nachbestellen .product-grid { justify-content: start; }

/* Menü wie im alten Shop (Uwe, 30.09.2026): breites Aufklappmenü unter der Navigation mit
   „Zur Kategorie …“, Top-Artikel-Vorschau, Kacheln (Banner) für Wochenangebot/Marken, Themen. */
.main-navigation { position: relative; }
.main-navigation-item.flyout-breit { position: static; }
.flyout-breit .nav-flyout { left: 0; }
.nav-flyout-box { width: min(1080px, 92vw); max-height: 75vh; overflow-y: auto;
  padding: var(--space-4) var(--space-6) var(--space-6); background: var(--color-white);
  border-top: 3px solid var(--color-tertiary); box-shadow: var(--shadow-flyout); }
.nav-flyout-zur { display: block; font-family: var(--font-heading); font-size: 1.1rem; text-transform: uppercase;
  letter-spacing: .5px; color: var(--color-primary); padding-bottom: var(--space-2); margin-bottom: var(--space-4);
  border-bottom: 2px solid var(--color-primary); }
.nav-flyout-zur:hover { color: var(--color-tertiary); text-decoration: none; }
.nav-flyout-box .nav-flyout-inner { width: auto; max-height: none; overflow: visible; padding: 0;
  border-top: 0; box-shadow: none; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nav-kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 14px; }
.nav-kachel { display: flex; flex-direction: column; gap: 3px; color: var(--color-primary); text-decoration: none; }
.nav-kachel:hover { text-decoration: none; }
.nav-kachel-bild { display: flex; align-items: center; justify-content: center; aspect-ratio: 2.7 / 1;
  overflow: hidden; border-radius: 4px; background: var(--color-secondary); padding: 0 8px; text-align: center;
  font-family: var(--font-heading); text-transform: uppercase; font-size: 1rem; line-height: 1.15; }
.nav-kachel-bild img { width: 100%; height: 100%; object-fit: cover; }
.nav-kachel-bild:has(img) { padding: 0; }
/* Kategoriename fett und etwas groesser - duenn ging er unter dem Banner unter (Uwe, 01.10.2026) */
.nav-kachel-name { font-family: var(--font-heading); font-weight: var(--fw-bold); text-transform: uppercase;
  font-size: 1.05rem; line-height: 1.2; letter-spacing: .02em; }
.nav-kachel-anzahl { font-size: .78rem; color: var(--color-muted); }
.nav-kachel:hover .nav-kachel-name { color: var(--color-tertiary); }
.nav-kachel:hover .nav-kachel-bild img { filter: brightness(1.05); }
.nav-top { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.nav-top-artikel { display: flex; flex-direction: column; gap: 6px; color: var(--color-primary); font-size: .9rem;
  font-weight: var(--fw-bold); line-height: 1.25; text-decoration: none; }
.nav-top-artikel:hover { color: var(--color-tertiary); text-decoration: none; }
.nav-top-bild { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: 4px; background: var(--color-secondary); font-size: 28px; }
.nav-top-bild img { width: 100%; height: 100%; object-fit: cover; }
.nav-top-alle { margin-top: var(--space-4); }
.nav-themen { background: var(--color-secondary); padding: var(--space-2) var(--space-3); border-radius: 4px; }
/* Kategorieseite: Banner der Angebotskategorie bzw. Marke oben */
.kategorie-banner { display: block; width: 100%; aspect-ratio: 2.7 / 1; object-fit: cover; border-radius: 6px;
  margin: 0 0 16px; }

/* ---------- Handy: Mindestschrift 12 px und Tippflaechen um 44 px ----------
   Uwe, 30.09.2026: "heb die Schrift und Tippflaechen auf dem Handy an". Messung auf 375 px:
   100-145 Texte unter 12 px (Staffel-Hinweis 11,5, VE im Kreis 10, Chips 11, Saison 10,5,
   "Stk" 9) und Knoepfe ab 24 px (Menge -/+, Merkzettel, Abmelden 15 px hoch). Steht am Ende,
   damit es alle frueheren Handy-Regeln schlaegt; am Desktop bleibt alles, wie es war. */
@media (max-width: 767px) {
  .product-hint, .product-box.box-standard .product-hint { font-size: 12.5px; line-height: 1.3; }
  .add-circle-einheit { font-size: 12px; letter-spacing: .02em; }
  .assistent-chip, .assistent-zeichen .assistent-chip { font-size: 12px; }
  .lagen-tag, .saison-monate span, .korb-zeile-herkunft, .cart-vk-herkunft,
  .search-suggestions-hint, .assistent-lage-wort, .korb-werkzeug-text small { font-size: 12px; }
  .saison-jetzt { font-size: 12px; top: -19px; }
  .menge-kreis small { font-size: 12px; }
  .cart-fields label > span:first-child, .feld-summe > span, .feld-menge > span:first-child { font-size: 12px; }
}
@media (pointer: coarse) {
  /* Knoepfe und Chips */
  .menge-knopf { width: 40px; height: 40px; font-size: 20px; }
  .wishlist-toggle { min-width: 44px; min-height: 44px; }
  .chip-btn, .filter-chip { min-height: 44px; }
  .chip-btn { padding: 8px 14px; }
  .view-toggle-btn { min-width: 44px; min-height: 44px; }
  .pagination a, .pagination-current { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .sorting select, .page-size select { min-height: 44px; }
  .top-bar-logout button { min-height: 44px; padding: 0 6px; }
  .lang-switch summary { min-height: 44px; display: flex; align-items: center; }
  .lang-switch li a { display: flex; align-items: center; min-height: 44px; }
  summary { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
  /* Text-Links: unsichtbar hoeher statt groesser */
  .footer-link-item a, .account-links a, .pdp-breadcrumb a, .cart-template-link, .cart-weiter,
  .cart-item-label { display: inline-block; padding-top: 11px; padding-bottom: 11px; }
}

/* ==========================================================================
   Korrekturen aus der Abstimmung mit Marketing (Uwe, Lea, Imke · 01.10.2026)
   ========================================================================== */

/* Rückfrage im Shop-Fenster statt Browser-Meldung */
.rueckfrage { border: 0; padding: 0; border-radius: var(--radius-card); box-shadow: var(--shadow-card-hover);
  max-width: min(420px, calc(100vw - 32px)); width: 100%; color: var(--color-text); }
.rueckfrage::backdrop { background: rgba(0, 0, 0, 0.35); }
.rueckfrage-form { padding: var(--space-6); margin: 0; }
.rueckfrage-text { margin: 0 0 var(--space-5); font-size: 16px; line-height: 1.45; }
.rueckfrage-knoepfe { display: flex; justify-content: flex-end; gap: var(--space-3); flex-wrap: wrap; }
.rueckfrage-knoepfe .btn { min-width: 110px; min-height: 44px; padding-left: 18px; padding-right: 18px; }
.rueckfrage-knoepfe .rueckfrage-ja { background-color: var(--color-primary); color: var(--color-white); }

/* Warenkorb ganz leeren: dezent unter den Positionen */
.cart-leeren { display: flex; justify-content: flex-end; margin-top: var(--space-2); }
.cart-leeren .link-btn { font-size: var(--fs-small); color: var(--color-muted); }

/* Kasse: Positionen als Tabelle wie auf der Bestätigung */
.kasse-positionen .kasse-name { display: block; }
.kasse-positionen .kasse-zusatz { display: block; color: var(--color-muted); font-size: var(--fs-meta); }

/* Kachel: feste Plaetze (Abstimmung 01.10.2026: „Feste Positionen, die beim Umbrechen
   nicht kaputtgehen"). Name zwei Zeilen, Untertitel eine Zeile, dann Qualitaet/Groesse,
   dann die Zeichenzeile mit dem Saisonbalken vorn — jede Kachel einer Reihe gleich. */
.product-box.box-standard .product-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: calc(2em * 1.25); }
.product-box.box-standard .product-box-data { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-height: 1.4em; }
.product-box.box-standard .product-card-meta { min-height: 1.4em; }
.product-box.box-standard .product-card-meta:empty { display: flex; }
.product-box.box-standard .assistent-zeichen { min-height: 24px; flex-wrap: nowrap; overflow: visible; }
.product-box.box-standard .assistent-zeichen .assistent-chip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0; }
.saison-platz { display: inline-block; width: 62px; height: 20px; flex: 0 0 auto; }
.product-box.box-standard .saison-mini { flex: 0 0 auto; }
.product-kontext { margin-top: 8px; color: var(--color-muted); font-size: var(--fs-meta); line-height: 1.35; }
/* Plus-Knopf unten bündig, egal ob „Ihr VK" unter dem Preis steht */
.product-box.box-standard .product-price-row { align-items: flex-end; }

/* Plaketten oben links im Bild: Neu/Wieder da und „Zuletzt bestellt am …" untereinander */
.product-badges { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; flex-direction: column;
  align-items: flex-start; gap: 6px; max-width: calc(100% - 70px); pointer-events: none; }
.product-badges .product-badge { position: static; }
.product-badges:empty { display: none; }
.product-badge.badge-bestellt { background: rgba(255, 255, 255, 0.94); color: var(--color-primary);
  text-transform: none; letter-spacing: 0; font-weight: var(--fw-semibold); border-radius: 10px;
  font-size: 12px; line-height: 1.4; padding: 2px 8px; box-shadow: var(--shadow-soft); }

/* „+VE" / „+Lage": zwei runde Knoepfe nebeneinander (Liste, Artikelseite) */
.mengen-blasen { display: inline-flex; align-items: center; gap: 10px; }
.lage-blase { flex: 0 0 auto; width: 54px; height: 54px; border-radius: var(--radius-round);
  border: 2px solid var(--color-primary); background: var(--color-white); color: var(--color-primary); cursor: pointer;
  font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: 17px; line-height: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  box-shadow: var(--shadow-card); transition: background var(--duration-base) var(--ease-standard); }
/* Hover nur mit Maus: am Handy blieb er nach dem Tippen hängen (01.10.2026) */
@media (hover: hover) { .lage-blase:not(.in-cart):hover { background: var(--color-secondary); } }
/* Mindestens eine volle Lage im Korb: hellgrün wie die VE-Blase (Uwe, 01.10.2026) */
.lage-blase.in-cart { background: var(--color-tertiary); color: var(--color-on-tertiary); border-color: var(--color-tertiary); }
.product-row-actions .add-circle, .product-row-actions .lage-blase { width: 48px; height: 48px; font-size: 15px; }
@media (max-width: 767px) {
  .product-box.box-standard .product-name { min-height: calc(2em * 1.2); }
  .product-badge.badge-bestellt { font-size: 12px; line-height: 1.3; }
  .product-badges { bottom: 10px; }
  .product-badges .badge-bestellt { margin-top: auto; }
  .lage-blase { width: 44px; height: 44px; font-size: 15px; }
}

/* Artikelseite (Abstimmung 01.10.2026): Herz am Bild, Qualitaet/Groesse beim Namen,
   Nummern klein, „+VE"/„+Lage" statt Mengenfeld, darunter der Korbstand. */
.pdp-media { position: relative; }
.pdp-herz { position: absolute; top: 12px; right: 12px; z-index: 2; }
.pdp-herz .wishlist-toggle { width: 52px; height: 52px; border-radius: var(--radius-round);
  background: var(--color-primary); color: var(--color-white); font-size: 26px;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-card); }
.pdp-herz .wishlist-toggle.active { background: var(--color-tertiary); color: var(--color-on-tertiary); }
.pdp-subtitle { margin-bottom: 8px; }
.pdp-qualitaet { margin: 0 0 4px; font-family: var(--font-heading); font-size: 24px; font-weight: var(--fw-bold);
  color: var(--color-text); line-height: 1.25; }
.pdp-qualitaet span:not(:first-child)::before { content: "·"; margin: 0 10px; color: var(--color-border); }
.pdp-nummern { margin: 0 0 12px; font-size: var(--fs-meta); color: var(--color-muted); }
.pdp-bestellen { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin: 18px 0 8px; }
.pdp-bestellen .add-circle, .pdp-bestellen .lage-blase { width: 64px; height: 64px; font-size: 19px; }
.pdp-korbstand { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-small); color: var(--color-text); }
.pdp-korbstand:empty { display: none; }
.pdp-korbstand-menge { font-family: var(--font-heading); font-weight: var(--fw-bold); color: var(--color-accent-text); }
.pdp-korbstand-lage { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--color-muted); }
.pdp-korbstand-lage .lagen-bar { width: 56px; }
.pdp-korbstand-lage .lagen-fill { min-height: 36px; padding: 4px 12px; font-size: 15px; }
/* Herz in der Kopfzeile zuckt kurz, wenn etwas angekommen ist */
.header-tool.ist-neu { animation: herz-puls .5s var(--ease-standard); }
@keyframes herz-puls { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .header-tool.ist-neu { animation: none; } }
@media (max-width: 767px) {
  .pdp-qualitaet { font-size: 20px; }
  .pdp-herz .wishlist-toggle { width: 46px; height: 46px; font-size: 22px; }
  .pdp-bestellen .add-circle, .pdp-bestellen .lage-blase { width: 56px; height: 56px; font-size: 17px; }
}

/* Kopfzeile: Konto, Merkzettel und Warenkorb immer oben rechts — auch wenn rechts die
   Warenkorbleiste steht (Abstimmung 01.10.2026: „da will man eigentlich immer hin").
   Nur die CC-Plakette bleibt dann weg; den Fuellstand zeigt die Leiste. */
@media (min-width: 1660px) {
  body.hat-korbleiste .header-cart { display: flex; }
}

/* Sortiment-Seitenleiste: alle Hauptgruppen gleich — fett, mit Platz fuer den Pfeil, ob
   aufklappbar oder nicht (vorher standen Rosen/Nadelgehoelze duenn zwischen den fetten). */
.sortiment-blatt { font-weight: var(--fw-semibold); }
.sortiment-blatt .sortiment-name::before { content: ""; display: inline-block; width: 1em; }
/* Die Seitenleiste laeuft mit der Seite mit — keine eigene Bildlaufleiste mehr, in der das
   Alphabet bei „L" endete (Abstimmung 01.10.2026). */
@media (min-width: 992px) {
  .filter-sidebar, .listing-layout .filter-sidebar { position: static; max-height: none; overflow: visible; }
}

/* Aufklappmenues: erst nach kurzem Verweilen auf (wer nur zum Warenkorb faehrt, streift
   das Menue), und nach einem Klick zu, bis die Maus das Menue verlaesst. */
.main-navigation-item.has-flyout:hover .nav-flyout {
  transition: opacity var(--duration-fast) var(--ease-standard) .18s, visibility 0s linear .18s; }
.main-navigation-item.has-flyout.nav-zu:not(:focus-within) .nav-flyout { visibility: hidden; opacity: 0; transition: none; }
.main-navigation-item.has-flyout.nav-zu .nav-caret { transform: none; }

/* Marken als ruhige Logo-Kacheln auf Dunkelgruen */
.nav-kachel-bild.nav-kachel-logo { background: var(--color-primary); padding: 10px 14px; }
.nav-kachel-bild.nav-kachel-logo img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.nav-kachel-logo-text { color: var(--color-white); font-family: var(--font-heading); font-weight: var(--fw-bold);
  text-transform: none; font-size: 1.15rem; line-height: 1.15; }
.nav-kachel:hover .nav-kachel-logo { filter: brightness(1.15); }
.marken-kopf { display: flex; align-items: center; justify-content: center; min-height: 110px;
  margin: 0 0 16px; padding: 18px 24px; background: var(--color-primary); border-radius: 6px; }
.marken-kopf img { max-height: 90px; max-width: min(420px, 80%); width: auto; height: auto; }
.marken-kopf span { color: var(--color-white); font-family: var(--font-heading); font-weight: var(--fw-bold);
  font-size: 2rem; }

/* Ruhigere Schrift (Abstimmung 01.10.2026, Lea: „verschiedene Schriftarten, Schriftgroessen,
   grau-fett, schwarz-fett, anderer Gruenton, gelb … einheitlich, nur die Ueberschriften in
   Grossbuchstaben"; Uwe: „das wirkt alles extrem gross, muss ein bisschen kleiner").
   - Fliesstext hoechstens 16 px statt 18 px, Artikelname hoechstens 38 px statt 50 px.
   - Untertitel (deutscher Name) normal geschrieben statt in Grossbuchstaben.
   - Merkmalstabelle: Bezeichnung normal und grau, Wert dunkel — kein Grau-Fett mehr.
   - Saison-Hinweise in einem Stil (gruen), kein Gelb daneben. */
@media (min-width: 1200px) {
  .product-title { font-size: 38px; line-height: 46px; }
  .product-title > span::after { height: 10px; bottom: 5px; }
}
.pdp-subtitle { text-transform: none; letter-spacing: 0; font-size: 18px; color: var(--color-muted); }
.properties-table td:first-child { font-weight: var(--fw-regular); color: var(--color-muted); }
.properties-table td + td { color: var(--color-text); }
.saison-pill, .saison-pill-warm { background: #EAF0E4; color: var(--color-primary); border: 0;
  font-weight: var(--fw-semibold); }
.pdp-last-ordered, .cust-vk { font-size: var(--fs-small); color: var(--color-text); }
.section-underline { font-size: 22px; }
@media (min-width: 992px) { .section-underline { font-size: 24px; } }

/* Warenkorbleiste einklappbar (Abstimmung 01.10.2026): eingeklappt eine schmale Lasche am
   rechten Rand mit „Warenkorb" hochkant und dem CC-Stand. */
.korb-lasche { display: none; }
.korb-kopf-zeile { display: flex; align-items: stretch; background: var(--color-primary); }
.korb-kopf-zeile .korb-kopf { flex: 1 1 auto; min-width: 0; }
.korb-einklappen { flex: 0 0 auto; width: 40px; border: 0; background: transparent; color: var(--color-white);
  font-size: 22px; line-height: 1; cursor: pointer; }
.korb-einklappen:hover { background: rgba(255, 255, 255, .12); }
@media (min-width: 1660px) {
  html.korb-zu body.hat-korbleiste { padding-right: 46px; }
  html.korb-zu body.hat-korbleiste > header { margin-right: -46px; }
  html.korb-zu .korb-leiste { width: 46px; }
  html.korb-zu .korb-griff { display: none; }
  html.korb-zu #korb-leiste-inhalt > :not(.korb-lasche) { display: none; }
  html.korb-zu .korb-lasche { display: flex; flex-direction: column; align-items: center; gap: 14px;
    width: 100%; height: 100%; padding: 14px 0; border: 0; background: var(--color-primary);
    color: var(--color-white); cursor: pointer; font-family: var(--font-heading); }
  .korb-lasche-pfeil { font-size: 24px; line-height: 1; }
  .korb-lasche-text, .korb-lasche-cc { writing-mode: vertical-rl; transform: rotate(180deg);
    text-transform: uppercase; letter-spacing: .08em; font-weight: var(--fw-bold); font-size: 15px; }
  .korb-lasche-cc { font-size: 13px; font-weight: var(--fw-semibold); text-transform: none;
    color: var(--color-tertiary); }
  html.korb-zu .korb-lasche:hover { filter: brightness(1.1); }
}
@media (max-width: 1659px) { .korb-einklappen { display: none; } }

/* Korbleiste: Lagen-Fortschritt je Zeile und Hinweis „nur als voller CC" */
.korb-zeile-lage { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12.5px;
  color: var(--color-muted); }
.korb-zeile-lage .lagen-bar { width: 40px; flex: 0 0 auto; }
.korb-zeile-lage-text { flex: 1 1 auto; min-width: 0; }
.korb-zeile-lage-knopf { flex: 0 0 auto; border: 1px solid var(--color-primary); background: var(--color-white);
  color: var(--color-primary); font-size: 12px; padding: 2px 8px; cursor: pointer; border-radius: 3px; }
.korb-zeile-lage-knopf:hover { background: var(--color-primary); color: var(--color-white); }
.korb-ccpflicht, .ccpflicht-kasten { display: flex; flex-direction: column; gap: 2px; margin: 8px var(--space-3);
  padding: 8px 10px; border-left: 4px solid #b45309; background: var(--color-notice-bg); font-size: 13px;
  line-height: 1.35; color: var(--color-text); }
.ccpflicht-kasten { margin: 12px 0; }
.ccpflicht-kasten.ist-ok { border-left-color: var(--color-tertiary); background: #EAF0E4; }
.ccpflicht-sperre { font-weight: var(--fw-semibold); }
.cart-checkout.is-gesperrt, .btn.is-gesperrt { opacity: .45; cursor: not-allowed; pointer-events: none; }
.toast-ccpflicht { display: block; margin-top: 4px; font-weight: var(--fw-semibold); }
.korb-termin.ist-vorschlag { font-style: normal; }
.nb-bezug { margin-left: 8px; font-size: var(--fs-meta); color: var(--color-muted); }

/* Warenkorb: letzter VK per Klick, fester VK deutlich */
.vk-uebernehmen { border: 0; padding: 0 2px; background: transparent; color: var(--color-primary);
  font: inherit; font-weight: var(--fw-bold); text-decoration: underline dotted; cursor: pointer; }
.vk-uebernehmen:hover { color: var(--color-tertiary); }
.cart-vk-fest { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-semibold); }
.vk-schloss { font-size: 15px; }
.vk-fest-text { font-size: 11.5px; padding: 1px 6px; border-radius: 8px; background: var(--color-secondary);
  color: var(--color-text); font-weight: var(--fw-semibold); }

/* Sprachassistent: Mitschrift-Knopf in der Statuszeile der Blase */
.kopf-blase-mitschrift { border: 0; background: transparent; padding: 0 4px; color: var(--color-primary);
  font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; }
.kopf-blase-antwort[hidden] { display: none; }

/* ===== 3D-Gartencenter aus dem Warenkorb im Shop-Rahmen (01.10.2026) =====
   Vorher eine eigene Seite aus dem Szenenpaket ohne Shop-Kopf. Jetzt: Kopf, Menü und
   Sprachassistent bleiben; Bühne links, Liste rechts, beides so hoch wie der Bildschirm. */
.gc3d-seite { padding-top: 14px; padding-bottom: 24px; }
.gc3d-seite .gc3d-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; }
.gc3d-seite .gc3d-titel .headline { margin-bottom: 2px; }
.gc3d-seite .gc3d-unter { color: #5d6b62; font-size: 0.9em; }
.gc3d-seite .gc3d-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.gc3d-seite .gc3d-knoepfe .btn, .gc3d-seite .gc3d-markt .btn { padding: 6px 14px; }
.gc3d-seite .gc3d-voll { background-color: var(--color-primary); color: var(--color-white); }
.gc3d-seite .gc3d-markt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 14px; margin: 12px 0 0;
  background: #f6f7f4; border-radius: 10px; }
.gc3d-seite .gc3d-markt[hidden] { display: none; }
.gc3d-seite .gc3d-markt input[type=range] { flex: 1 1 200px; accent-color: var(--color-primary); }
.gc3d-seite .gc3d-markt b { font-size: 1.1em; }
.gc3d-seite .gc3d-markt small { color: #5d6b62; }
.gc3d-seite .gc3d-tisch { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.gc3d-seite .gc3d-tisch input { width: 5.2em; }
.gc3d-seite .gc3d-weiter { color: #5d6b62; margin: 10px 0; font-size: 0.92em; }
.gc3d-seite .gc3d-raum { display: grid; grid-template-columns: minmax(0, 1fr) 400px; height: clamp(440px, calc(100vh - 250px), 900px);
  border: 1px solid #e2e6e0; border-radius: 12px; overflow: hidden; background: #fff; }
.gc3d-seite .gc3d-raum > * { min-width: 0; min-height: 0; }
.gc3d-seite .gc3d-buehne { position: relative; background: #0d1114; }
.gc3d-seite .gc3d-buehne iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.gc3d-seite .gc3d-decke { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 24px; color: #fff; background: #03503C; font-size: 1.05em; transition: opacity .8s; }
.gc3d-seite .gc3d-decke.weg { opacity: 0; pointer-events: none; }
.gc3d-seite .gc3d-etikettstand { position: absolute; left: 12px; bottom: 64px; background: #000a; color: #fff; font-size: 12px;
  padding: 5px 10px; border-radius: 6px; }
.gc3d-seite .gc3d-etikettstand[hidden], .gc3d-seite .gc3d-arbeit[hidden], .gc3d-seite .gc3d-rueck[hidden], .gc3d-seite .gc3d-navi[hidden] { display: none; }
.gc3d-seite .gc3d-hilfe { position: absolute; left: 50%; bottom: 66px; transform: translateX(-50%); background: #000b; color: #fff;
  font-size: 12.5px; padding: 6px 12px; border-radius: 6px; white-space: nowrap; transition: opacity .8s; pointer-events: none;
  max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; }
.gc3d-seite .gc3d-hilfe.weg { opacity: 0; }
.gc3d-seite .gc3d-arbeit { position: absolute; right: 12px; top: 12px; background: #fff; color: #03503C; border-radius: 16px;
  padding: 5px 12px; font-size: 12.5px; box-shadow: 0 2px 10px #0004; }
.gc3d-seite .gc3d-rueck { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); display: flex; gap: 10px; align-items: center;
  background: #1d2a22; color: #fff; border-radius: 8px; padding: 7px 8px 7px 14px; font-size: 13px; box-shadow: 0 3px 12px #0006;
  max-width: calc(100% - 24px); }
.gc3d-seite .gc3d-rueck button { font: inherit; border: 0; border-radius: 6px; padding: 5px 10px; background: #87B14B; color: #10240f;
  font-weight: 600; cursor: pointer; }
/* Treffer des Sprachassistenten: Leiste oben in der Bühne, quer scrollbar (02.10.2026) */
.gc3d-seite .gc3d-treffer { position: absolute; left: 68px; right: 12px; top: 12px; z-index: 5; background: #fffffff5;
  border-radius: 10px; box-shadow: 0 4px 16px #0005; padding: 4px 6px 6px; }
.gc3d-seite .gc3d-treffer[hidden] { display: none; }
.gc3d-seite .gc3d-t-kopf { display: flex; align-items: center; gap: 6px; padding: 0 0 4px 6px; font-size: 13px; font-weight: 600;
  color: #03503C; }
.gc3d-seite .gc3d-t-kopf span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc3d-seite .gc3d-t-kopf button { flex: 0 0 auto; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent;
  color: #5d6b62; font-size: 15px; cursor: pointer; touch-action: manipulation; }
.gc3d-seite .gc3d-t-kopf button:hover { background: #eef3ea; }
.gc3d-seite .gc3d-t-liste { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
.gc3d-seite .gc3d-t-liste .gc3d-posten { flex: 0 0 236px; scroll-snap-align: start; border: 1px solid #e2e6e0; border-radius: 8px;
  padding: 5px 7px; background: #fff; row-gap: 3px; }
.gc3d-seite .gc3d-t-liste .gc3d-posten > img { height: 44px; }
.gc3d-seite .gc3d-t-liste .gc3d-posten .name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: 13px; line-height: 1.25; }
.gc3d-seite .gc3d-t-liste .gc3d-posten .klein { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; }
.gc3d-seite .gc3d-t-liste .gc3d-posten .klein:empty { display: none; }
.gc3d-seite .gc3d-t-liste .gc3d-marke { display: none; }
.gc3d-seite .gc3d-t-liste .gc3d-menge button.gc3d-blase { width: 38px; height: 38px; }
.gc3d-seite .gc3d-t-liste .gc3d-blase .add-circle-zahl { font-size: 13px; }
.gc3d-seite .gc3d-t-liste .gc3d-blase .add-circle-einheit { font-size: 10px; }
.gc3d-seite .gc3d-buehne.mit-treffer .gc3d-rueck,
.gc3d-seite .gc3d-buehne.mit-treffer .gc3d-arbeit { top: calc(var(--gc3d-treffer-h, 110px) + 20px); }
.gc3d-seite .gc3d-navi { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 2px; background: #fff;
  border-radius: 22px; box-shadow: 0 3px 14px #0005; padding: 3px; width: min(440px, calc(100% - 24px)); }
.gc3d-seite .gc3d-navi button { font: inherit; border: 0; background: transparent; color: #03503C; padding: 7px 12px; border-radius: 18px;
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Hover nur mit Maus: am Handy blieb ▶ nach dem Tippen hellgrün mit weißem Pfeil hängen -
   Uwe dachte, er sei gesperrt (01.10.2026) */
@media (hover: hover) {
  .gc3d-seite .gc3d-navi button:hover { background: #eef3ea; }
  .gc3d-seite .gc3d-navi [data-gc="n-zurueck"]:hover, .gc3d-seite .gc3d-navi [data-gc="n-vor"]:hover { background: #0a6b51; }
}
.gc3d-seite .gc3d-navi button, .gc3d-seite .gc3d-vollbild-knopf, .gc3d-seite .gc3d-mikro,
.gc3d-seite .gc3d-menge button, .gc3d-seite .gc3d-dazu, .lage-blase, .add-circle { touch-action: manipulation; }
.gc3d-seite .gc3d-navi [data-gc="n-zurueck"], .gc3d-seite .gc3d-navi [data-gc="n-vor"] { flex: 0 0 auto; font-size: 15px; padding: 7px 14px;
  background: #03503C; color: #fff; }
.gc3d-seite .gc3d-navi [data-gc="n-text"] { flex: 1 1 0; min-width: 0; font-weight: 600; text-align: center; }
/* SVG statt ◀ ▶ ⚙ - das iPhone zeigte die Zeichen als bunte Emoji-Kästchen (12.10.2026) */
.gc3d-seite .gc3d-navi [data-gc="n-zurueck"] svg, .gc3d-seite .gc3d-navi [data-gc="n-vor"] svg { display: block; }
.gc3d-seite .gc3d-navi [data-gc="n-zurueck"], .gc3d-seite .gc3d-navi [data-gc="n-vor"] { display: flex; align-items: center; }
.gc3d-seite .gc3d-symbol { vertical-align: -3px; margin-right: 6px; }
.gc3d-seite .gc3d-liste { border-left: 1px solid #e2e6e0; overflow-y: auto; font-size: 14px; }
.gc3d-seite .gc3d-liste-kopf { padding: 12px 14px 10px; border-bottom: 1px solid #e2e6e0; position: sticky; top: 0; background: #fff; z-index: 3; }
.gc3d-seite .gc3d-zahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gc3d-seite .gc3d-zahlen > div { background: #f6f7f4; border-radius: 8px; padding: 8px 10px; }
.gc3d-seite .gc3d-zahlen b { display: block; font-size: 19px; font-weight: 600; color: #03503C; }
.gc3d-seite .gc3d-zahlen span { font-size: 12px; color: #5d6b62; }
.gc3d-seite .gc3d-hinweis { margin-top: 8px; font-size: 12.5px; color: #6b4e00; background: #fff6d6; border-radius: 6px; padding: 6px 8px; }
.gc3d-seite .gc3d-marke { display: inline-block; font-size: 12px; padding: 1px 6px; border-radius: 10px; margin-left: 4px; vertical-align: 1px; }
.gc3d-seite .gc3d-marke.sil { background: #e6ebe3; color: #4e5d4a; }
.gc3d-seite .gc3d-marke.aehn { background: #e6f0fa; color: #28527a; }
.gc3d-seite .gc3d-marke.linie { background: #fbe7eb; color: #7a0a24; }
.gc3d-seite .gc3d-leer { padding: 32px 20px; text-align: center; color: #5d6b62; }
.gc3d-seite .gc3d-flaeche h3 { margin: 0; padding: 10px 14px 6px; font-size: 13px; font-weight: 600; color: #03503C; display: flex;
  justify-content: space-between; background: #f6f7f4; border-top: 1px solid #e2e6e0; cursor: pointer; text-transform: none; }
.gc3d-seite .gc3d-flaeche h3:hover span { text-decoration: underline; }
.gc3d-seite .gc3d-flaeche h3 small { font-weight: 400; color: #5d6b62; }
.gc3d-seite .gc3d-zeile, .gc3d-seite .gc3d-posten { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 6px 14px; border-bottom: 1px solid #f0f2ee; }
.gc3d-seite .gc3d-zeile { cursor: pointer; }
.gc3d-seite .gc3d-zeile:hover, .gc3d-seite .gc3d-zeile.an, .gc3d-seite .gc3d-posten:hover, .gc3d-seite .gc3d-posten.an { background: #fff6d6; }
.gc3d-seite .gc3d-zeile img, .gc3d-seite .gc3d-posten img { width: 42px; height: 54px; object-fit: contain; }
.gc3d-seite .gc3d-zeile .name, .gc3d-seite .gc3d-posten .name { font-weight: 500; }
.gc3d-seite .gc3d-zeile .klein, .gc3d-seite .gc3d-posten .klein { font-size: 12px; color: #5d6b62; }
.gc3d-seite .gc3d-zeile .stueck { text-align: right; font-weight: 600; white-space: nowrap; }
.gc3d-seite .gc3d-zeile .stueck small { display: block; font-weight: 400; font-size: 12px; color: #5d6b62; }
.gc3d-seite .gc3d-bereich[hidden], .gc3d-seite .gc3d-liste [data-gc="gesamt"][hidden] { display: none; }
.gc3d-seite .gc3d-b-kopf { display: flex; gap: 10px; align-items: center; padding: 10px 14px; background: #e3eedb; border-bottom: 1px solid #e2e6e0;
  position: sticky; top: 0; z-index: 2; }
.gc3d-seite .gc3d-b-kopf button { font: inherit; font-size: 12.5px; border: 1px solid #03503C; background: #fff; color: #03503C;
  border-radius: 6px; padding: 4px 9px; cursor: pointer; white-space: nowrap; }
.gc3d-seite .gc3d-b-kopf b { display: block; color: #03503C; }
.gc3d-seite .gc3d-b-kopf small { color: #5d6b62; }
.gc3d-seite .gc3d-abschnitt { padding: 8px 14px 4px; font-size: 12px; font-weight: 600; color: #5d6b62; text-transform: uppercase; letter-spacing: .04em; }
.gc3d-seite .gc3d-menge { display: flex; align-items: center; gap: 4px; }
.gc3d-seite .gc3d-menge button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid #03503C; background: #fff; color: #03503C;
  font-size: 17px; line-height: 1; cursor: pointer; }
.gc3d-seite .gc3d-menge button.plus { background: #03503C; color: #fff; }
.gc3d-seite .gc3d-menge button.weg { border-color: #b3261e; color: #b3261e; font-size: 13px; margin-left: 4px; }
.gc3d-seite .gc3d-menge button:disabled, .gc3d-seite .gc3d-dazu:disabled { opacity: .4; cursor: default; }
.gc3d-seite .gc3d-menge b { min-width: 34px; text-align: center; font-size: 15px; }
.gc3d-seite .gc3d-dazu { font: inherit; font-size: 13px; border: 0; border-radius: 16px; padding: 6px 12px; background: #03503C; color: #fff;
  cursor: pointer; white-space: nowrap; }
.gc3d-seite .gc3d-set { margin: 6px 12px 10px; border: 1px solid #e2e6e0; border-radius: 8px; overflow: hidden; }
.gc3d-seite .gc3d-set-kopf { display: flex; gap: 8px; align-items: center; padding: 8px 10px; background: #f6f7f4; font-size: 13px; }
.gc3d-seite .gc3d-set-kopf > div { flex: 1; }
.gc3d-seite .gc3d-set-kopf i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.gc3d-seite .gc3d-set-kopf span { display: block; color: #5d6b62; font-size: 12px; }
.gc3d-seite .gc3d-set .gc3d-posten { padding: 5px 10px; }
.gc3d-seite .gc3d-vorschlaege { border-bottom: 1px solid #e2e6e0; }
.gc3d-seite .gc3d-vorschlaege[hidden] { display: none; }
.gc3d-seite .gc3d-vorschlaege > summary { list-style: none; cursor: pointer; padding: 12px 14px; font-weight: 600; color: #03503C; display: flex;
  justify-content: space-between; align-items: center; }
.gc3d-seite .gc3d-vorschlaege > summary::-webkit-details-marker { display: none; }
.gc3d-seite .gc3d-vorschlaege > summary small { font-weight: 400; color: #5d6b62; }
.gc3d-seite .gc3d-markt [data-gc="neu-aufstellen"] { margin-left: auto; }
.gc3d-seite [data-gc="einstellungen"].ist-offen { background-color: #e3eedb; }
/* Vollbild-Knopf oben links in der Bühne; im Vollbild füllt die Bühne den Bildschirm */
.gc3d-seite .gc3d-vollbild-knopf { position: absolute; left: 12px; top: 12px; z-index: 6; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: #fff; color: #03503C; font-size: 22px; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 10px #0005; display: flex; align-items: center; justify-content: center; }
.gc3d-seite .gc3d-buehne.ist-vollbild { position: fixed; inset: 0; z-index: 2000; height: 100vh; height: 100dvh;
  border-radius: 0; }
html.gc3d-vollbild-an, html.gc3d-vollbild-an body { overflow: hidden; }
/* Mikrofon: schwebt unten rechts, solange der Kopf weggescrollt sein kann (Handy, Tablet) und im Vollbild */
.gc3d-seite .gc3d-mikro { position: fixed; right: 16px; bottom: 16px; z-index: 1500; width: 60px; height: 60px;
  border: 0; border-radius: 50%; background: #03503C; color: #fff; box-shadow: 0 4px 16px #0006; cursor: pointer;
  display: flex; align-items: center; justify-content: center; }
.gc3d-seite .gc3d-mikro[hidden] { display: none; }
.gc3d-seite .gc3d-mikro.ist-an { background: #b3261e; animation: gc3d-hoert 1.4s ease-in-out infinite; }
@keyframes gc3d-hoert { 0%, 100% { box-shadow: 0 0 0 0 rgba(179, 38, 30, .55); } 50% { box-shadow: 0 0 0 14px rgba(179, 38, 30, 0); } }
.gc3d-seite .gc3d-buehne.ist-vollbild .gc3d-mikro { position: absolute; right: 16px; bottom: 74px; }
@media (min-width: 992px) and (pointer: fine) {
  /* Am großen Bildschirm bleibt der Kopf mit dem Mikrofon sichtbar - dort nur im Vollbild */
  .gc3d-seite > .gc3d-mikro { display: none; }
}
@media (pointer: coarse) {
  .gc3d-seite .gc3d-navi button { min-height: 44px; }
  .gc3d-seite .gc3d-menge button { width: 40px; height: 40px; }
  .gc3d-seite .gc3d-dazu, .gc3d-seite .gc3d-b-kopf button { min-height: 40px; }
  .gc3d-seite .gc3d-flaeche h3 { padding-top: 12px; padding-bottom: 10px; }
}
@media (max-width: 991px) {
  .gc3d-seite .gc3d-raum { grid-template-columns: 1fr; grid-template-rows: 58vh auto; height: auto; }
  .gc3d-seite .gc3d-liste { border-left: 0; border-top: 1px solid #e2e6e0; overflow: visible; }
  .gc3d-seite .gc3d-liste-kopf, .gc3d-seite .gc3d-b-kopf { position: static; }
  .gc3d-seite .gc3d-knoepfe .btn { padding: 8px 10px; }
}
@media (max-width: 767px) {
  .gc3d-seite .gc3d-nur-gross { display: none; }
  .gc3d-seite .gc3d-weiter { font-size: 13px; margin: 8px 0; }
  .gc3d-seite .gc3d-titel .headline { font-size: 1.5rem; }
  .gc3d-seite .gc3d-knoepfe { width: 100%; }
  .gc3d-seite .gc3d-knoepfe .btn { flex: 1 1 auto; }
  .gc3d-seite .gc3d-hilfe { white-space: normal; text-align: center; }
  .gc3d-seite .gc3d-zahlen b { font-size: 17px; }
  /* Marktgröße & Tische am Handy (Jan, 12.10.2026: Tischmaß brach mitten im Feld um, „Neu aufstellen“
     stand allein rechts): Bezeichnung über die ganze Breite, beide Maße mit „Übernehmen“ in einer Zeile */
  .gc3d-seite .gc3d-markt { gap: 8px 10px; }
  .gc3d-seite .gc3d-markt input[type=range] { flex: 1 1 100%; }
  .gc3d-seite .gc3d-tisch { display: flex; flex: 1 1 100%; flex-wrap: wrap; }
  .gc3d-seite .gc3d-tisch label { flex: 1 0 100%; }
  .gc3d-seite .gc3d-tisch input { width: 4.4em; flex: 0 0 auto; }
  .gc3d-seite .gc3d-tisch [data-gc="tisch-ok"] { margin-left: auto; }
  .gc3d-seite .gc3d-markt [data-gc="neu-aufstellen"] { margin-left: 0; flex: 1 1 100%; }
}


/* ===== Handy-Runde 01.10.2026 abends (Uwe am Smartphone) ===== */
/* „Zuletzt bestellt": Symbol + Kurzdatum unten links im Bild; der ganze Satz beim Überfahren
   bzw. Antippen („verdeckt zu viel vom Bild") */
.product-badges { bottom: 10px; }
.product-badges .badge-bestellt { margin-top: auto; }
.product-badge.badge-bestellt { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; line-height: 1.2;
  padding: 3px 8px 3px 6px; border-radius: 999px; pointer-events: auto; cursor: help; white-space: nowrap; }
.badge-bestellt svg { flex: 0 0 auto; }
.badge-bestellt .bestellt-lang { display: none; }
.badge-bestellt.zeigt-text { white-space: normal; }
.badge-bestellt.zeigt-text .bestellt-kurz { display: none; }
.badge-bestellt.zeigt-text .bestellt-lang { display: inline; }
@media (hover: hover) {
  .badge-bestellt:hover { white-space: normal; }
  .badge-bestellt:hover .bestellt-kurz { display: none; }
  .badge-bestellt:hover .bestellt-lang { display: inline; }
}
@media (max-width: 767px) { .product-badge.badge-bestellt { font-size: 12px; line-height: 1.2; } }

/* Listenansicht: die Fotos sind meist 2:3 hochkant - ganz zeigen statt oben/unten abschneiden */
.product-row-image { width: 64px; height: 96px; background: var(--color-white); }
.product-row-image img { width: 64px; height: 96px; object-fit: contain; background: var(--color-white); }
@media (max-width: 767px) {
  .product-row-image, .product-row-image img { width: 56px; height: 84px; }
}

/* Schnellsuche: Bild ganz zeigen; am Handy Name auf zwei Zeilen, Preis unter den Text
   („man kann den Namen nicht ganz lesen, obwohl da genug Platz wäre") */
.search-suggestion-thumb { background: var(--color-white); }
.search-suggestion-thumb img { object-fit: contain; }
@media (max-width: 767px) {
  .search-suggestion { padding: 6px 8px; gap: 6px; }
  .search-suggestion-link { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 10px; row-gap: 2px;
    align-items: start; }
  .search-suggestion-thumb { width: 56px; height: 72px; grid-row: 1 / span 2; }
  .search-suggestion-title { white-space: normal; font-size: 16px; display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden; }
  .search-suggestion-sub { white-space: normal; }
  .search-suggestion-daten { font-size: 14px; }
  .search-suggestion-price { grid-column: 2; font-size: 17px; }
}

/* Artikelseite: Zurück und Pfad in einer Zeile, oben wenig Luft, Foto auf Weiß */
.pdp-kopfzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 4px 0 18px; }
.pdp-kopfzeile .pdp-breadcrumb, .pdp-kopfzeile .pdp-back { margin: 0; }
@media (max-width: 767px) {
  .page:has(> .pdp-kopfzeile) { padding-top: 10px; }
  .pdp-kopfzeile { flex-wrap: nowrap; gap: 10px; margin-bottom: 10px; }
  .pdp-kopfzeile .pdp-back { flex: 0 0 auto; padding: 2px 12px; font-size: 15px; }
  .pdp-kopfzeile .pdp-breadcrumb { min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; }
  .pdp-media .pdp-main { background: var(--color-white); }
}

/* Katalog am Handy: EINE Bedienzeile - Filter, Sortierung, Kachel/Liste, Anzahl
   („bei der Einstellung der Ansicht nehmen die Buttons zu viel Platz ein") */
.filter-toggle-kopf { display: none; }
@media (max-width: 991px) {
  .listing-layout > .filter-toggle-btn { display: none; }
  .catalog-head-tools .filter-toggle-kopf { display: inline-flex; order: -2; margin: 0; padding: 0 12px; min-height: 40px;
    white-space: nowrap; font-size: 15px; }
}
@media (max-width: 767px) {
  .catalog-head { gap: 6px; margin-bottom: 10px; }
  .catalog-head-tools { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; width: 100%; }
  .catalog-head-tools .sorting { flex: 1 1 auto; min-width: 0; padding: 0; box-shadow: none; background: transparent; gap: 6px; }
  .catalog-head-tools .sorting label { font-size: 0; gap: 0; flex: 1 1 auto; }
  .catalog-head-tools .sorting label.sorting-seite { display: none; }
  .catalog-head-tools .sorting select { width: 100%; min-height: 40px; padding: 0 6px; border: 1px solid var(--color-border);
    font-size: 14px; }
  .catalog-head-tools .view-toggle-btn { min-width: 40px; min-height: 40px; }
  .catalog-count { order: 9; font-size: 12px; white-space: nowrap; }
}

/* 3D-Liste: +VE / +Lage wie im Shop (01.10.2026) - die runden −/✕-Knöpfe bleiben klein */
.gc3d-seite .gc3d-menge { gap: 6px; }
.gc3d-seite .gc3d-menge button.gc3d-blase { width: 46px; height: 46px; border-radius: 50%; display: inline-flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 0; line-height: 1;
  font-family: var(--font-heading); }
.gc3d-seite .gc3d-menge button.gc3d-blase.add-circle { background: var(--color-primary); color: var(--color-white); border: 0; }
.gc3d-seite .gc3d-menge button.gc3d-blase.lage-blase { background: var(--color-white); color: var(--color-primary);
  border: 2px solid var(--color-primary); }
.gc3d-seite .gc3d-menge button.gc3d-blase.in-cart { background: var(--color-tertiary); color: var(--color-on-tertiary);
  border-color: var(--color-tertiary); }
.gc3d-seite .gc3d-blase .add-circle-zahl { font-size: 15px; font-weight: var(--fw-bold); }
.gc3d-seite .gc3d-blase .add-circle-einheit { font-size: 12px; text-transform: uppercase; }

@media (max-width: 480px) { .catalog-head-tools .catalog-count { display: none; } }

/* Nach oben: unten rechts; weicht der Kassenleiste (Handy), dem Mikrofon im 3D-Gartencenter und
   der Korbleiste (großer Bildschirm) aus */
.nach-oben { position: fixed; right: 16px; bottom: 16px; z-index: 1400; width: 48px; height: 48px; border: 0;
  border-radius: 50%; background: var(--color-white); color: var(--color-primary); box-shadow: 0 3px 14px #0004;
  display: flex; align-items: center; justify-content: center; cursor: pointer; touch-action: manipulation; }
.nach-oben[hidden] { display: none; }
@media (hover: hover) { .nach-oben:hover { background: var(--color-secondary); } }
body:has(.gc3d-mikro:not([hidden])) .nach-oben { bottom: 92px; right: 22px; }
@media (max-width: 991px) { body:has(.cart-sticky-bar) .nach-oben { bottom: 90px; } }
@media (min-width: 1600px) { body.hat-korbleiste .nach-oben { right: calc(var(--korb-breite) + 16px); } }
@media print { .nach-oben { display: none !important; } }

/* Artikelseite: kein Höhensprung beim Bildwechsel (Fotodatum-Zeile bleibt reserviert, am Handy
   ein festes Bildfeld), Wischen erlaubt senkrechtes Scrollen weiter; Zurück schlanker */
.pdp-fotodatum { min-height: 1.6em; }
.pdp-fotodatum[hidden] { display: block; visibility: hidden; }
@media (max-width: 767px) {
  .pdp-media .pdp-main { height: min(56vh, 340px); max-height: none; aspect-ratio: auto; width: 100%;
    object-fit: contain; touch-action: pan-y; }
  .pdp-thumbs { overflow-x: auto; }
}
.pdp-kopfzeile .pdp-back { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px;
  border-width: 1.5px; line-height: 1; font-size: 15px; }

/* Kachel: Saisonverlauf oben, Angebot/Top und Zustand darunter in ganzer Breite - feste Höhe
   für beide Zeilen, damit die Plus-Knöpfe einer Reihe auf einer Linie bleiben (01.10.2026) */
.product-box.box-standard .assistent-zeichen { flex-wrap: wrap; row-gap: 4px; min-height: 50px; align-content: flex-start; }
.product-box.box-standard .zeichen-umbruch { flex-basis: 100%; height: 0; }
.assistent-zeichen .zeichen-umbruch { flex-basis: 100%; height: 0; }
.product-box.box-standard .assistent-zeichen .assistent-chip { max-width: 100%; font-size: 12px; line-height: 1.5; }
/* „bestellt" rückt über das Fotodatum, wenn beide unten links stehen */
.product-image-wrapper:has(.product-image-datum) .product-badges { bottom: 44px; }

/* 3D-Liste: Name über die ganze Breite, die Knöpfe darunter (Uwe, 01.10.2026: „der Umbruch des
   Namens muss über den Buttons weiterlaufen") */
.gc3d-seite .gc3d-posten { grid-template-columns: 42px minmax(0, 1fr); grid-template-areas: "bild text" "bild knoepfe";
  row-gap: 6px; align-items: start; }
.gc3d-seite .gc3d-posten > img { grid-area: bild; }
.gc3d-seite .gc3d-posten > div:not(.gc3d-menge) { grid-area: text; }
.gc3d-seite .gc3d-posten > .gc3d-menge, .gc3d-seite .gc3d-posten > .gc3d-dazu { grid-area: knoepfe; justify-self: end; }
.gc3d-seite .gc3d-mehr { display: block; margin: 8px 14px 12px auto; font: inherit; font-size: 14px; border: 1px solid var(--color-primary);
  background: var(--color-white); color: var(--color-primary); border-radius: 18px; padding: 6px 14px; cursor: pointer; }
/* CC-Pflicht: Knopf zu den passenden Pflanzen */
.ccpflicht-kasten .ccpflicht-link { margin-top: 8px; align-self: flex-start; padding: 4px 14px; }
@media (max-width: 767px) {
  .pdp-thumbs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .pdp-thumbs img { flex: 0 0 auto; }
}

/* „bestellt" aufgeklappt (mit Datum und Stückzahl): volle Bildbreite statt „minus Herz" -
   das Herz sitzt oben, die Plakette unten (01.10.2026) */
.product-badges:has(.badge-bestellt.zeigt-text) { max-width: calc(100% - 20px); }
@media (hover: hover) { .product-badges:has(.badge-bestellt:hover) { max-width: calc(100% - 20px); } }

/* CC-Module (02.10.2026): auf einen Blick „ganzer CC", darunter was auf dem CC steht */
.modul-chip { display: inline-block; background: var(--color-primary, #00513d); color: #fff; font-weight: 700;
  font-size: 12px; line-height: 1.6; padding: 0 8px; border-radius: 10px; letter-spacing: .02em; }
.modul-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.modul-kurz { font-size: 13px; color: #444; }
.modul-banner { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; background: #eef5e4;
  border-left: 4px solid #8ab846; padding: 10px 12px; margin: 8px 0 12px; border-radius: 3px; }
.modul-banner strong { font-size: 16px; }
.modul-inhalt { margin-top: 18px; }
.modul-hinweis { color: #555; margin: 6px 0 10px; }
.modul-tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.modul-tabelle th { text-align: left; font-weight: 600; border-bottom: 2px solid #ddd; padding: 6px 8px; }
.modul-tabelle td { border-bottom: 1px solid #eee; padding: 6px 8px; vertical-align: middle; }
.modul-tabelle .z { text-align: right; white-space: nowrap; width: 1%; }
.modul-tabelle tfoot td { border-bottom: 0; border-top: 2px solid #ddd; }
.modul-bild { width: 52px; } .modul-bild img { width: 44px; height: 44px; object-fit: contain; display: block; }
.modul-name2 { color: #777; font-size: 13px; }
@media (max-width: 767px) { .modul-tabelle { font-size: 13px; } .modul-tabelle td, .modul-tabelle th { padding: 5px 4px; } }

/* CC-Modul: kein Trennpunkt vor der Sortenzeile (sie steht unter dem Chip) */
.product-card-meta.modul-meta span:not(:first-child)::before { content: none; }

/* Einheitlichere Schrift (Uwe, 02.10.2026: „so unterschiedlich groß … die Laufweiten unterscheiden
   sich auch"). Ansichtsleiste: Beschriftung und Auswahl in derselben Schrift und Größe - vorher
   „Sortierung" groß in Open Sans, „Name A–Z" schmal in Open Sans Condensed. */
@media (min-width: 768px) {
  .catalog-head-tools .sorting, .catalog-head-tools .sorting label, .catalog-head-tools .sorting select,
  .catalog-head-tools .catalog-count { font-family: var(--font-body); font-size: 14px; letter-spacing: normal; line-height: 1.3; }
  .catalog-head-tools .sorting label { color: var(--color-muted); gap: 6px; }
  .catalog-head-tools .sorting select { color: var(--color-text); font-weight: 600; padding-right: 22px; }
  .catalog-head-tools .sorting { gap: 18px; }
}
/* Hauptmenü: Die Aufklapp-Pfeile waren in Menüfarbe auf Grün unsichtbar, nahmen aber Platz ein -
   dadurch waren die Abstände zwischen den Punkten ungleich. Ohne Pfeil, überall derselbe Abstand. */
@media (pointer: fine) {
  .main-navigation .nav-caret { display: none; }
  .main-navigation { column-gap: 22px; }
}

/* Bestand im Warenkorb (Eilert, 08.10.2026, B1–B3): oben ein Kasten mit Grund und Knöpfen je
   Artikel, an der Zeile der Grund in Rot; die Kasse ist gesperrt, bis alles lieferbar ist. */
.bestand-kasten { margin: 12px 0 16px; padding: 12px 14px; border: 1px solid var(--color-danger);
  border-left-width: 5px; border-radius: 4px; background: #fdf3f2; }
.bestand-titel { display: block; font-family: var(--font-heading); font-size: 17px; color: var(--color-danger); }
.bestand-erklaerung { margin: 4px 0 8px; font-size: 14px; }
.bestand-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bestand-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 6px 12px; padding: 8px 0; border-top: 1px solid #f1d4d0; }
.bestand-artikel { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 260px; }
.bestand-artikel a { font-weight: var(--fw-bold); color: var(--color-text); }
.bestand-grund { font-size: 14px; color: var(--color-danger); }
.bestand-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; }
.bestand-knoepfe .btn { padding: 4px 12px; min-height: 36px; }
.bestand-sperre { margin: 8px 0 0; font-weight: var(--fw-semibold); }
.cart-item.hat-bestandsproblem { border-color: var(--color-danger); box-shadow: inset 4px 0 0 var(--color-danger); }
.cart-item-bestand { font-size: 13px; font-weight: var(--fw-semibold); color: var(--color-danger); }
.toast-bestand { display: block; margin-top: 4px; font-weight: var(--fw-semibold); }
/* CC-Anteil unter der Menge (I10) */
.cart-cc-anteil { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.2; text-align: center;
  color: var(--color-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Sortierung im Warenkorb (B6) */
.cart-sortierung { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 4px 0 12px; }
.cart-sortierung-label { font-size: 13px; color: var(--color-muted); }
/* Schnellbestellung: Meldungen nach Grund, Beispiel mit zwei Spalten (B7) */
.quick-order-angepasst ul { margin: 4px 0 0; padding-left: 18px; }
.quick-order-meta { margin: 6px 0; font-size: 14px; color: var(--color-muted); }
.quick-order-beispiel { margin: 18px 0 0; }
.quick-order-beispiel figcaption { font-size: 14px; color: var(--color-muted); margin-bottom: 4px; }
.quick-order-beispiel table { border-collapse: collapse; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 14px; }
.quick-order-beispiel th, .quick-order-beispiel td { border: 1px solid #dfe5e1; padding: 3px 12px; text-align: left; }
.quick-order-beispiel .num { text-align: right; }
@media (max-width: 640px) {
  .bestand-kasten { padding: 10px; }
  .bestand-knoepfe { width: 100%; }
  .bestand-knoepfe .btn { min-height: 44px; flex: 1 1 auto; }
  .bestand-knoepfe form { display: flex; flex: 1 1 auto; }
  .bestand-knoepfe form .btn { width: 100%; }
  .cart-cc-anteil { text-align: left; font-size: 12px; }
}

/* Herkunft des Kunden-VK (Eilert-Feedback F1, 08.10.2026): kleines Kennzeichen unter dem
   VK-Feld und auf der Artikelseite — in BC gespeichert (Auszeichnungsstandard), berechnet oder
   aus der Preisliste. Der gespeicherte trägt einen Rand, weil er der Preisliste vorgeht. */
.vk-herkunft { display: inline-block; padding: 0 6px; border-radius: 8px; font-size: 11.5px; line-height: 1.5;
  font-weight: var(--fw-semibold); background: var(--color-secondary); color: var(--color-text);
  white-space: nowrap; cursor: help; vertical-align: baseline; }
.vk-herkunft.ist-gespeichert { background: var(--color-white); box-shadow: inset 0 0 0 1px #d9b84a; }
.vk-preisliste { font-weight: var(--fw-semibold); white-space: nowrap; }
.vk-herkunft-liste { color: var(--color-muted); white-space: nowrap; }
@media (max-width: 767px) { .vk-herkunft { font-size: 12px; } }
@media (pointer: coarse) {
  /* „Preisliste: 24,99 €“ ist ein Knopf — die Tippfläche wächst mehr als die Zeile */
  .vk-preisliste { display: inline-block; padding-top: 8px; padding-bottom: 8px; margin: -4px 0; }
}

/* Nachbestellen mit Seitenleiste und Reitern (Uwe, 19.10.2026 auf der Hausmesse): links die Filter des
   Katalogs, „Ihr Vorjahr“ | „Andere Gartencenter nehmen gern“ wie „Für Sie“ am Auftragsterminal und
   „Ganzes Jahr“ hinter den Zwei-Monats-Chips. */
.nb-werkzeuge { display: flex; align-items: center; gap: 8px; }
.nb-zeitraeume .nb-jahr { margin-left: 6px; }
.nb-reiter { display: flex; align-items: flex-end; margin: 0 0 6px; border-bottom: 2px solid var(--color-primary); }
.nb-reiter-knopf { display: inline-flex; align-items: center; gap: 8px; margin-right: 6px; padding: 8px 18px;
  min-height: var(--tap-target); border: 2px solid var(--color-primary); border-bottom: 0;
  background: var(--color-white); color: var(--color-primary); font-family: var(--font-heading);
  font-weight: var(--fw-bold); text-transform: uppercase; text-decoration: none; }
.nb-reiter-knopf:hover { text-decoration: none; background: var(--color-secondary); }
.nb-reiter-knopf[aria-current="page"] { background: var(--color-primary); color: var(--color-on-primary); }
.nb-reiter-zahl { display: inline-block; min-width: 1.8em; padding: 0 6px; border-radius: 999px; font-size: 13px;
  text-align: center; background: var(--color-secondary); color: var(--color-text); }
.nb-reiter-inhalt { margin-top: 16px; }
.nb-layout .listing-results > .nb-abschnitt:first-child { margin-top: 0; }
.nb-mehr { margin: 18px 0 0; text-align: center; }
@media (max-width: 991px) {
  .nb-werkzeuge .filter-toggle-kopf { display: inline-flex; margin: 0; padding: 0 12px; min-height: 40px;
    white-space: nowrap; font-size: 15px; }
}
@media (max-width: 640px) {
  .nb-kopf { gap: 8px; margin-bottom: 12px; }
  .nb-werkzeuge { width: 100%; justify-content: space-between; }
  /* Sieben Zeiträume in zwei Reihen zu vier statt drei Reihen - „Ganzes Jahr“ doppelt breit */
  .nb-zeitraeume { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
  .nb-zeitraeume .nb-label, .nb-zeitraeume .nb-bezug { grid-column: 1 / -1; margin: 0; }
  .nb-zeitraeume .filter-chip { justify-content: center; padding: 6px 4px; white-space: nowrap; }
  .nb-zeitraeume .nb-jahr { grid-column: span 2; margin-left: 0; }
  .nb-reiter-knopf { flex: 1 1 0; justify-content: center; margin-right: 4px; padding: 6px 8px; font-size: 14px;
    line-height: 1.2; text-align: center; }
  .nb-reiter-knopf:last-child { margin-right: 0; }
  .nb-mehr .btn { width: 100%; }
}

/* ---------- Handy: Menü ☰ mit Aufklappern und Unterpunkt-Reihe im Katalog (Uwe, 25.10.2026) ----------
   „Man muss erst auf Filter gehen“: Am Handy gibt es kein Überfahren, die Ausklappmenüs blieben zu (pointer: coarse).
   Im Menü ☰ stehen Gruppen, Untergruppen, Themen, Marken und Wochenangebot deshalb als Aufklapper (.nav-mobil); über
   den Treffern eine wischbare Reihe mit den Unterpunkten der aktuellen Ebene (.katalog-reihe). Am Desktop beides aus. */
.nav-mobil, .katalog-reihe { display: none; }
@media (max-width: 991px) {
  /* Der Kopf klebt oben - das aufgeklappte Menü scrollt in sich */
  .nav-toggle-cb:checked ~ .main-navigation { flex-wrap: nowrap; align-items: stretch;
    max-height: calc(100dvh - 120px); overflow-y: auto; overscroll-behavior: contain; }
  .main-navigation-item { width: 100%; }
  .main-navigation-item > .main-navigation-link { width: 100%; }
  .main-navigation-item.has-mobil { display: block; }
  .main-navigation-item.has-mobil > .main-navigation-link,
  .main-navigation-item.has-mobil > .nav-flyout { display: none; }
  .nav-mobil { display: block; }
  .nav-mobil > summary { display: flex; justify-content: space-between; align-items: center; list-style: none;
    cursor: pointer; }
  .nav-mobil > summary::-webkit-details-marker, .nav-mobil-gruppe > summary::-webkit-details-marker { display: none; }
  .nav-mobil-pfeil, .nav-mobil-pfeil .header-icon { display: inline-flex; color: var(--color-white); width: 20px;
    height: 20px; transition: transform .15s; }
  .nav-mobil[open] > summary .nav-mobil-pfeil { transform: rotate(180deg); }
  .nav-mobil-inhalt { display: flex; flex-direction: column; padding: 2px 0 8px 14px; }
  .nav-mobil-inhalt a, .nav-mobil-gruppe > summary { display: flex; align-items: center; min-height: var(--tap-target);
    padding: 6px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: var(--color-white);
    font-size: 16px; text-decoration: none; }
  .nav-mobil-inhalt a.nav-mobil-alle { font-weight: var(--fw-bold); }
  .nav-mobil-gruppe > summary { list-style: none; cursor: pointer; }
  .nav-mobil-gruppe > summary::after { content: "+"; margin-left: auto; padding-left: 12px; font-size: 20px;
    line-height: 1; opacity: .8; }
  .nav-mobil-gruppe[open] > summary::after { content: "–"; }
  .nav-mobil-gruppe > a { padding-left: 18px; font-size: 15px; color: rgba(255, 255, 255, 0.88); }
  .nav-mobil-kopf { padding: 14px 4px 4px; color: var(--color-tertiary); font-family: var(--font-heading);
    font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }

  .katalog-reihe { display: flex; gap: 8px; margin: 0 0 12px; padding: 2px 0 6px; overflow-x: auto;
    scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .katalog-reihe::-webkit-scrollbar { display: none; }
  .katalog-chip { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; min-height: 40px;
    padding: 0 14px; border: 1px solid var(--color-primary); border-radius: 20px; background: var(--color-white);
    color: var(--color-primary); font-size: 15px; white-space: nowrap; text-decoration: none; scroll-snap-align: start; }
  .katalog-chip:hover { text-decoration: none; }
  .katalog-chip.is-aktiv { background: var(--color-primary); color: var(--color-white); }
  .katalog-chip-anzahl { font-size: 13px; opacity: .7; }
  .katalog-chip-thema { border-color: var(--color-tertiary); }
  .katalog-chip-zurueck { border-color: transparent; padding-left: 4px; }
}

/* ---------- Scan-Leiste der Artikelseite (Uwe, 25.10.2026, wie die Sales-App) ----------
   Nach einem Kamera-Scan (?scan=1) oben: Name, Qualität und Preis, +VE / +Lage. Eine Sekunde nach dem letzten Tippen
   geht die Kamera wieder auf (scan.js); der Streifen unten an der Leiste zeigt die Wartezeit. Das X oben rechts
   schließt die Leiste. */
.scan-leiste { position: relative; overflow: hidden; margin: 0 0 18px; padding: 12px 48px 14px 14px;
  border: 2px solid var(--color-tertiary); border-radius: 8px; background: var(--color-white); }
.scan-leiste-inhalt { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.scan-leiste-text { flex: 1 1 220px; min-width: 0; }
.scan-leiste-name { margin: 0; font-size: 16px; }
.scan-leiste-name span { color: var(--color-muted); }
.scan-leiste-preis { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 4px 0 0; font-size: 15px; color: var(--color-muted); }
.scan-leiste-preis strong { color: var(--color-accent-text); font-family: var(--font-heading); font-size: 17px; }
.scan-leiste-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.scan-leiste.wartet::after { content: ""; position: absolute; left: 0; bottom: 0; height: 5px; width: 0;
  background: var(--color-tertiary); animation: scan-warten 1s linear forwards; }
@keyframes scan-warten { to { width: 100%; } }
.scan-leiste-zu { position: absolute; top: 2px; right: 2px; display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--tap-target); min-height: var(--tap-target); padding: 0; border: 0; background: none;
  color: var(--color-primary); cursor: pointer; }
.scan-leiste-zu .header-icon { width: 22px; height: 22px; }
@media (prefers-reduced-motion: reduce) {
  .scan-leiste.wartet::after { animation: none; width: 100%; }
}
@media (max-width: 767px) {
  .scan-leiste { margin: 0 0 14px; }
}