/* ===== Loewe Beschaffung – Prototyp Styles =====
   Farben, Schrift, Buttons nach 00 Kontext/Branding.md
   Primärfarbe: LOEWE-Grün #018137 · Open Sans · „Apple-soft"

   Gestaltungs-Regeln (Kurzfassung, Block F UI-Feinschliff):
   – EIN grün gefüllter Knopf je Karte/Dialog (primary), alles Weitere ghost/dezent.
   – 18-px-Titel je Hauptansicht (--fs-titel).
   – Icons ausschließlich über svgIcon() in app.js (keine Emojis).
   – Badges als einheitliche Pille (--radius-pill).
   – Neue oder angefasste Komponenten nutzen Schrift-Skala (--fs-*) und
     4er-Abstands-Raster (--sp-*); die Bestandsmigration passiert je Anfassen,
     nicht en bloc (Block G / Folgeaufträge).
   – Dialog-Fußzeile (Block G, dokumentierte Bestandsregel): Schließen ist IMMER
     das ✕ oben rechts (icon-btn, svgIcon). Einfache Formular-Dialoge enden mit
     EINEM grünen Primär-Knopf voller Breite (primary-btn full); Dialoge mit
     mehreren Aktionen stellen den Primär-Knopf (btn-primary) VOR die
     Ghost-/Abbrechen-Knöpfe, destruktive Aktionen als btn-danger ans Ende.
     Runde Radien kommen aus den Tokens (--radius/--radius-sm/--radius-pill). */

/* ===== Open Sans lokal (Härtungs-Runde Block C, 13.08.2026) =====
   Vorher kam die Schrift per <link> von fonts.googleapis.com – das verstieß
   gegen die eigene CSP (style-src/font-src 'self', die Schrift lud also gar
   nicht mehr) und meldete trotzdem jeden Seitenaufruf an Google (preconnect).
   Jetzt liegen die Dateien unter vendor/fonts/ (Variable Font, EINE Datei
   deckt die Schnitte 400–800 ab; Quelle: Google-Fonts-Auslieferung v44).
   Zeichen außerhalb der beiden Bereiche fallen auf Arial zurück (unkritisch,
   deutsche Umlaute/„“-Anführungen/€ liegen im latin-Bereich). */
@font-face{
  font-family:'Open Sans';
  font-style:normal;
  font-weight:400 800;
  font-stretch:100%;
  font-display:swap;
  src:url('vendor/fonts/open-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Open Sans';
  font-style:normal;
  font-weight:400 800;
  font-stretch:100%;
  font-display:swap;
  src:url('vendor/fonts/open-sans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  /* Marke / Palette – LOEWE-Grün + Open Sans bleiben als Identität;
     Form/Weißraum an Apple-Bedienbarkeit angenähert (runde Ecken, weiche Schatten). */
  --green:#018137;
  --green-dark:#016a2d;      /* Hover: leicht abdunkeln statt Invert */
  --green-tint:#e9f3ee;      /* helle Grünfläche für Sekundär/Selektiert/Hover */
  --black:#1d1d1f;           /* Apple-Tinte statt reinem Schwarz */
  --gray-333:#33333a;
  --gray-747:#6b6b70;        /* Sekundärtext, etwas weicher */
  --gray-55:#55555a;         /* Meta-Grau für KLEINE Texte (Block F: dunkler, lesbar) */
  --gray-eb:#e6e6ea;         /* Hairline-Rahmen */
  --gray-f6:#f5f5f7;         /* App-Hintergrund (Apple-Grau) */
  --white:#FFFFFF;
  /* Feedback (Block F: --warning von #B26A00 auf #8F5500 – 6,06:1 statt 4,24:1 auf Weiß) */
  --success:#018137;
  --error:#C0392B;
  --warning:#8F5500;
  /* Feedback-Flächen (Block F, Token-Grundlagen – ersetzen die verstreuten
     Bernstein-/Rosa-Hexwerte; Ton bleibt derselbe) */
  --warn-bg:#fff5e6;
  --warn-border:#f0c98a;
  --warn-text:var(--warning);
  --error-bg:#fdecea;
  --error-border:#f3c6c1;
  /* Schrift-Skala (Block F – definiert, ab jetzt bei angefassten Komponenten nutzen) */
  --fs-2xs:10px; --fs-xs:11px; --fs-s:12px; --fs-m:13px; --fs-base:14px; --fs-l:15px;
  --fs-titel:18px; --fs-zahl:24px;
  /* 4er-Abstands-Raster */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  /* Typo & Form */
  --font-family:"Open Sans",Arial,Helvetica,sans-serif;
  --radius:12px;             /* weiche Ecken (Apple-Anmutung) */
  --radius-sm:9px;
  --radius-pill:999px;
  /* Block G (Token-Drift): zwei bislang hartkodierte Grautöne */
  --schalter-grau:#d1d1d6;   /* Bahn eines ausgeschalteten Kipp-Schalters */
  --ghost-hover:#dcebe2;     /* Hover-Tönung der ghost-Buttons (eine Stufe dunkler als --green-tint) */
  --btn-padding:12px 22px;
  --input-height:44px;       /* komfortable Touch-/Klickhöhe */
  --shadow-sm:0 1px 2px rgba(0,0,0,.05),0 3px 10px rgba(0,0,0,.04);
  --shadow-md:0 12px 34px rgba(0,0,0,.12);
}
*{box-sizing:border-box}
/* Wichtig: hidden muss auch flex-Elemente ausblenden (sonst lassen sich Warenkorb/Modal nicht schließen) */
[hidden]{display:none !important}
body{
  margin:0;font-family:var(--font-family);
  background:var(--gray-f6);color:var(--black);
  font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
h2{font-size:15px;font-weight:700;color:var(--gray-333);margin:0 0 12px}

/* Kopfzeile */
.topbar{
  display:flex;align-items:center;gap:16px;
  background:var(--white);padding:12px 20px;border-bottom:2px solid var(--green);
  position:sticky;top:0;z-index:20;
}
.brand{display:flex;flex-direction:row;align-items:center;gap:10px;line-height:1.1;padding-right:14px;border-right:1px solid var(--gray-eb);margin-right:4px}
.brand-signet{height:44px;width:auto;display:block}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-mark{font-weight:800;font-size:24px;color:var(--black);letter-spacing:.06em}
.brand-claim{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--green)}
.brand-sub{font-size:11px;color:var(--gray-747);margin-top:2px}
.search-wrap{flex:1;max-width:700px;display:flex;gap:8px}
#suche{
  flex:1;min-width:0;height:var(--input-height);padding:0 16px;border:1px solid var(--gray-eb);border-radius:var(--radius);
  font-size:15px;font-family:var(--font-family);outline:none;background:var(--white);
}
#suche:focus{border-color:var(--green)}
/* Lieferanten-Filter: bewusst dezent (grau, wie ein Werkzeug neben der Suche).
   Sobald gefiltert wird, färbt er sich grün – damit man den aktiven Filter nicht übersieht. */
.lieferant-filter{
  flex:0 0 auto;width:180px;height:var(--input-height);padding:0 10px;
  border:1px solid var(--gray-eb);border-radius:var(--radius);background:var(--white);
  color:var(--gray-747);font-size:14px;font-family:var(--font-family);cursor:pointer;outline:none;
  transition:border-color .15s ease,color .15s ease;
}
.lieferant-filter:focus-visible{border-color:var(--green)}
.lieferant-filter.aktiv{border-color:var(--green);color:var(--green);font-weight:600}
.cart-btn{
  border:1px solid var(--gray-eb);background:var(--white);color:var(--green);border-radius:var(--radius);
  height:var(--input-height);padding:0 18px;font-size:14px;font-weight:600;
  cursor:pointer;display:flex;align-items:center;gap:8px;white-space:nowrap;font-family:var(--font-family);
  transition:background .15s ease,border-color .15s ease;
}
.cart-btn:hover{background:var(--green-tint);border-color:var(--green-tint)}
.badge{background:var(--green);color:var(--white);border-radius:var(--radius-pill);padding:1px 8px;font-size:12px;font-weight:700}
/* Zwischenband 761–940px (Mini-Auftrag nach Block G): Desktop-Layout, aber zu
   schmal für die volle Kopfzeile – Glocke/Zahnrad ragten rechts aus dem Bild.
   Gleiche Mittel wie die Mobil-Query: Marke verdichten, Abstände verkleinern,
   Lieferantenfilter schmaler. Unter 760px übernimmt weiterhin die Mobil-Query. */
@media(min-width:761px) and (max-width:940px){
  .topbar{gap:8px;padding:12px 14px}
  .brand{padding-right:8px}
  .brand-signet{height:36px}
  .brand-claim,.brand-sub{display:none}   /* LOEWE-Schriftzug + Signet reichen hier */
  .search-wrap{min-width:0}
  .lieferant-filter{width:120px}
  .cart-btn{padding:0 12px;font-size:13px}
}

/* Layout */
.layout{display:flex;align-items:flex-start;gap:20px;padding:20px;max-width:1400px;margin:0 auto}
.sidebar{
  width:240px;flex-shrink:0;background:var(--white);border:1px solid var(--gray-eb);
  padding:18px;position:sticky;top:86px;
}
.sidebar ul{list-style:none;margin:0;padding:0}
.sidebar li{padding:9px 10px;cursor:pointer;font-size:14px;display:flex;justify-content:space-between;gap:8px;border-bottom:1px solid var(--gray-f6)}
.sidebar li:hover{background:var(--gray-f6)}
.sidebar li.aktiv{background:var(--green);color:var(--white);font-weight:700}
.sidebar li .anz{color:var(--gray-747);font-size:12px}
.sidebar li.aktiv .anz{color:var(--white)}

.content{flex:1;min-width:0}
.content-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:12px;flex-wrap:wrap}
/* Zwei Einstiege neben dem Katalog. „Angebot einreichen" ist bewusst leiser als „Anfordern":
   ein Link unter dem Knopf – die Ausnahme soll nicht wie ein gleichwertiger Hauptweg wirken. */
/* Drei gleichwertige Einstiege: umbrechende Zeile, rechtsbündig. */
.head-aktionen{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}
/* Gemeinsamer Stil aller drei Einstiegs-Buttons (baut auf .ghost-btn auf): Icon + Text,
   etwas kompakter als ein einzelner Sekundär-Button, damit alle drei gut nebeneinander passen. */
.einstieg-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;font-size:13px;white-space:nowrap}
.einstieg-btn .ic{flex:0 0 auto}
/* Nacherfassungs-Modus (vierter Einstieg): sichtbare Klammer über dem Katalog,
   solange der Einkauf im Auftrag eines anderen Nutzers nachträgt. */
.nachtragen-banner{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;
  background:var(--green-tint);border:1px solid var(--green);border-radius:var(--radius);
  padding:10px 16px;margin:0 0 14px}
.nachtragen-banner .nb-text{flex:1;min-width:240px;font-size:14px;line-height:1.45}
.nachtragen-banner .nb-text .ic{vertical-align:-3px;margin-right:6px;color:var(--green)}
.nachtragen-banner .nb-aktionen{display:flex;gap:8px}
.nachtragen-banner .ghost-btn{padding:8px 13px;font-size:13px}
/* Feste „Im Auftrag von"-Anzeige in Checkout und Vor-Ort-Dialog (ersetzt das
   frühere Dropdown – der Modus wird nur noch über den Katalog-Knopf gestartet). */
.auftrag-anzeige{background:var(--green-tint);border-radius:var(--radius-sm);
  padding:9px 12px;font-size:14px;margin-bottom:4px}
.auftrag-anzeige .hinweis-klein{display:block;margin-top:2px}
/* Hinweis im Warenkorb, solange der Nacherfassungs-Modus läuft (die
   Positions-Kostenstellen sind dann ausgeblendet). */
.wk-nachtragen-hinweis{background:var(--green-tint);border-radius:var(--radius-sm);
  padding:8px 12px;font-size:13px;margin:0 0 10px}
.head-zweitweg{font-size:12px;font-weight:600;text-decoration:none;color:var(--gray-747)}
.head-zweitweg:hover{color:var(--green);text-decoration:underline;opacity:1}
.ergebnis-info{font-size:14px;color:var(--gray-747)}
.preis-stand{font-size:12px;color:var(--gray-55);margin-top:2px}   /* Block F: Schriftboden 12px + dunkleres Meta-Grau */

/* Buttons (LOEWE-Grün, weiche Ecken, Abdunkel-Hover, leichter Druck-Effekt) */
.primary-btn{
  background:var(--green);color:var(--white);border:1px solid transparent;border-radius:var(--radius);
  padding:var(--btn-padding);font-size:15px;font-weight:600;cursor:pointer;font-family:var(--font-family);
  transition:background .15s ease,transform .08s ease,box-shadow .15s ease;
}
.primary-btn:hover{background:var(--green-dark)}
.primary-btn:active{transform:scale(.985)}
.primary-btn.full{width:100%}
.ghost-btn{ /* Sekundär-Button: getönt statt Outline (Text in green-dark: 5,97:1 auf der Tönung, Block F) */
  background:var(--green-tint);border:1px solid transparent;color:var(--green-dark);border-radius:var(--radius);
  padding:11px 18px;cursor:pointer;font-size:14px;font-weight:600;font-family:var(--font-family);
  transition:background .15s ease,transform .08s ease;
}
.ghost-btn:hover{background:var(--ghost-hover)}
.ghost-btn:active{transform:scale(.985)}
/* Roter Sekundär-Button: gleiche Geometrie wie .ghost-btn, Farben wie
   .btn-danger (Ablehnen). Für Wege, die einen Mangel melden – „Wareneingang
   beanstanden". Bewusst kein gefüllter Rot-Button: Es ist kein Löschen,
   sondern ein zweiter regulärer Weg, der nur deutlich anders aussehen soll
   als das grüne Bestätigen (Rückmeldung Felix 24.08.2026). */
.ghost-btn-warn{background:var(--white);color:var(--error);border-color:#e6b3ad}
.ghost-btn-warn:hover{background:#fbecea;border-color:var(--error)}
/* `.full` gab es bisher nur für .primary-btn – der Beanstanden-Knopf steht
   direkt darunter und muss dieselbe Breite haben, sonst wirkt er verrutscht. */
.ghost-btn.full{width:100%}

/* Einheitliche Button-Zustände: Fokus (Tastatur) + Disabled.
   Block F: Sammelregel um Reiter, Chips, Menü-Einträge, Sortier-/Blätter-Knöpfe,
   Warengruppen und Artikelkarten erweitert – die komplette Tab-Runde ist sichtbar. */
.primary-btn:focus-visible,.ghost-btn:focus-visible,.cart-btn:focus-visible,
.karte .add:focus-visible,
.btn:focus-visible,.fav-toggle:focus-visible,.icon-btn:focus-visible,.link-btn:focus-visible,
.dev-user:focus-visible,
.tab:focus-visible,.fg-chip:focus-visible,.vw-subtab:focus-visible,
.glocke-zeile:focus-visible,.glocke-alle:focus-visible,.um-eintrag:focus-visible,
.wk-entf:focus-visible,.dt-sort button:focus-visible,.dv-scroll-btn:focus-visible,
.be-erg-treffer-btn:focus-visible,.kopf-icon-btn:focus-visible,
.sidebar li:focus-visible,.karte-klick:focus-visible,.metric-klick:focus-visible,
.vgl-zeile[data-alt]:focus-visible{
  outline:2px solid var(--green);outline-offset:2px;
}
/* Aktiver (grün gefüllter) Chip: dunkler Ring + weißer Innenring, sonst unsichtbar */
.fg-chip.aktiv:focus-visible{outline:2px solid var(--green-dark);box-shadow:inset 0 0 0 2px var(--white)}
/* Dashboard-Filter + Radios/Checkboxen: sichtbarer Fokus */
.dash-filter select:focus,.dash-filter input:focus{border-color:var(--green)}
input[type=radio]:focus-visible,input[type=checkbox]:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.primary-btn:disabled,.ghost-btn:disabled,.cart-btn:disabled,
.karte .add:disabled,.btn:disabled,
.primary-btn:disabled:hover,.ghost-btn:disabled:hover,.cart-btn:disabled:hover,
.karte .add:disabled:hover,.btn:disabled:hover{
  background:var(--gray-eb);color:var(--gray-747);border-color:var(--gray-eb);
  cursor:not-allowed;
}

/* Artikel-Karten */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.karte{background:var(--white);border:1px solid var(--gray-eb);padding:16px;display:flex;flex-direction:column;gap:8px}
.karte .gruppe-tag{align-self:flex-start;background:var(--gray-f6);color:var(--gray-747);font-size:11px;font-weight:700;text-transform:uppercase;padding:3px 8px}
.karte .name{font-weight:700;font-size:16px;line-height:1.3;color:var(--gray-333)}
/* Block F: dezenter Detail-Hinweis am Namen (Karte ist klickbar) */
.karte .name .name-mehr{color:var(--gray-747);font-weight:400}
.karte-klick:hover .name .name-mehr,.karte-klick:focus-visible .name .name-mehr{color:var(--green-dark)}
.sidebar li{cursor:pointer}
.karte .meta{font-size:13px;color:var(--gray-747);display:flex;flex-direction:column;gap:2px}
.karte .preis{font-size:18px;font-weight:700;margin-top:auto;color:var(--black)}
.karte .preis .kein{font-size:13px;font-weight:400;color:var(--gray-747)}
.karte .preis .preis-basis{font-size:12px;font-weight:400;color:var(--gray-747)}
/* Preisgültigkeit (17.08.2026): letzter bekannter Preis unter "Preis auf Anfrage" */
.preis .preis-abgelaufen,.am-preis .preis-abgelaufen{display:block;font-size:12px;font-weight:400;color:var(--gray-55)}
/* Status-Hinweis am Artikelnamen (Feed-Vollausbau, Phase 5) */
.badge-status{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;padding:1px 7px;border-radius:var(--radius-pill);vertical-align:middle}
.badge-status.auslaufend{background:var(--warn-bg);color:var(--warn-text)}
.badge-status.varianten{background:var(--green-tint);color:var(--green)}

/* Produkt-Detailansicht (Modal mit Galerie + Varianten, Phase 5) */
.karte-klick{cursor:pointer}
/* Höhere Spezifität (zwei Klassen), sonst überschreibt die spätere Basisregel
   .modal-card{width:480px} die Breite und das Modal wirkt gequetscht. */
.modal-card.am-card{width:760px;max-width:calc(100vw - 32px)}
.am-body{display:flex;gap:24px;flex-wrap:wrap;padding:22px 24px 6px}
.am-galerie{flex:0 0 300px;max-width:300px}
/* Weißer Hintergrund + dezenter Rahmen: nicht-quadratische Fotos werden
   sauber auf Weiß freigestellt (statt grauer Balken), wie in der Katalog-Kachel. */
.am-haupt{position:relative;width:100%;aspect-ratio:1/1;border-radius:var(--radius-sm);overflow:hidden;background:var(--white);border:1px solid var(--gray-eb);display:flex;align-items:center;justify-content:center}
.am-haupt img{width:100%;height:100%;object-fit:contain;cursor:zoom-in;background:var(--white)}
.am-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.9);border:1px solid var(--gray-eb);
  color:var(--gray-333);font-size:24px;line-height:1;width:34px;height:46px;border-radius:var(--radius-sm);cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);z-index:2}
.am-nav:hover{background:#fff;color:var(--green)}
.am-prev{left:8px}
.am-next{right:8px}
.am-haupt-ph{background:var(--gray-f6);border-style:dashed;color:var(--gray-747)}
.am-thumbs{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.am-thumb{width:56px;height:56px;padding:0;border:2px solid transparent;border-radius:var(--radius-sm);overflow:hidden;background:var(--gray-f6);cursor:pointer}
.am-thumb.on{border-color:var(--green)}
.am-thumb img{width:100%;height:100%;object-fit:cover}
.am-info{flex:1 1 260px;min-width:240px;display:flex;flex-direction:column;gap:10px}
.am-name{font-size:19px;font-weight:700;margin:0}
.am-preis{font-size:20px;font-weight:700;color:var(--black)}
.am-preis .preis-basis{font-size:13px;font-weight:400;color:var(--gray-747)}
.am-preis .kein{font-size:14px;font-weight:400;color:var(--gray-747)}
.am-varianten{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600;color:var(--gray-333)}
.am-meta{margin:0;display:grid;grid-template-columns:auto 1fr;gap:2px 12px;font-size:13px}
.am-mz{display:contents}
.am-mz dt{color:var(--gray-747)}
.am-mz dd{margin:0;color:var(--gray-333)}
.am-langtext{font-size:14px;color:var(--gray-333);margin:4px 0 0}
.am-link{font-size:13px;color:var(--green)}
.am-add{margin-top:6px}
@media (max-width:560px){ .am-galerie{flex-basis:100%;max-width:100%} }
/* Preisvergleich (Auftrag 29.07.2026, Block B): "Auch erhältlich bei" im Artikel-Detail.
   Apple-weiche Linie: Karte mit --radius, sanfter Schatten, Pillen-Badge, Tint-Flächen. */
.am-vergleich{border:1px solid var(--gray-eb);border-radius:var(--radius);padding:12px 14px;margin-top:6px;background:var(--white);box-shadow:var(--shadow-sm)}
.am-vergleich h4{margin:0 0 8px;font-size:13px;font-weight:600;color:var(--gray-747);letter-spacing:.01em}
.vgl-zeile{padding:8px 10px;border-radius:var(--radius-sm);font-size:13px}
.vgl-zeile.guenstiger{background:var(--green-tint)}
.vgl-zeile + .vgl-zeile{margin-top:6px}
/* Block D (UI-Feinschliff): Treffer-Zeile öffnet das Detail der Alternative */
.vgl-zeile[data-alt]{cursor:pointer;border:1px solid transparent;transition:border-color .12s ease,background .12s ease}
.vgl-zeile[data-alt]:hover{border-color:var(--green);background:var(--green-tint)}
.vgl-wer small{color:var(--gray-747);margin-left:4px}
.vgl-preis{color:var(--gray-333);margin-top:1px}
.vgl-badge{display:inline-block;background:var(--green);color:#fff;font-size:11px;font-weight:600;padding:1px 9px;border-radius:var(--radius-pill);margin-left:6px;vertical-align:1px}
.vgl-hinweis{display:block;color:var(--gray-747);font-size:12px}
.vgl-meta{color:var(--gray-747);font-size:12px;margin-top:2px}
/* Preisvergleich im Warenkorb: deutlicher Spar-Hinweis am gewählten Artikel
   (abgelehnt = teurere Wahl liegt im Korb) bzw. grüner Wechsel-Vermerk (getauscht). */
.wk-vergleich{font-size:12.5px;border-radius:var(--radius-sm);padding:9px 11px;margin-top:7px;line-height:1.5}
.wk-vergleich.getauscht{background:var(--green-tint);color:var(--gray-333)}
.wk-vergleich.abgelehnt{background:var(--warn-bg);border:1px solid var(--warn-border);color:var(--warn-text)}
.wk-vgl-kopf{display:flex;align-items:flex-start;gap:6px}
.wk-vgl-kopf svg{flex:none;margin-top:2px}
.wk-vgl-meta{color:inherit;opacity:.85;margin:2px 0 0 22px;font-size:12px}
.wk-vgl-nehmen{display:inline-flex;align-items:center;gap:6px;margin:7px 0 0 22px;background:var(--green);color:#fff;border:none;border-radius:var(--radius-sm);padding:6px 12px;font-size:12px;font-weight:600;font-family:var(--font-family);cursor:pointer;transition:background .15s ease,transform .08s ease}
.wk-vgl-nehmen:hover{background:var(--green-dark)}
.wk-vgl-nehmen:active{transform:scale(.97)}
.wk-vgl-umkehr{display:block;margin:5px 0 0 22px;background:none;border:none;padding:0;color:var(--green);font-size:12px;font-weight:600;font-family:var(--font-family);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
/* F-2 Pilot-Kanten: "alle neuen Preise uebernehmen" als Link-Knopf IM Sperr-Hinweis */
.wk-preise-alle{display:inline;margin:0;background:none;border:none;padding:0;color:var(--green);font-size:inherit;font-weight:600;font-family:var(--font-family);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.wk-vgl-grund-lbl{display:flex;flex-direction:column;gap:4px;margin:8px 0 0 22px;font-weight:600;font-size:12px}
.wk-vgl-grund{height:34px;padding:0 10px;border:1px solid var(--warn-border);border-radius:var(--radius-sm);font-size:12.5px;font-family:var(--font-family);background:var(--white)}
.wk-vgl-grund:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(1,129,55,.12)}
/* Preisvergleich in der Freigabe (Block C): Live-Hinweis + Snapshot + Begründung je Position */
.pos-vergleich:empty{display:none}
.pos-vergleich{margin-top:5px;font-size:12.5px;line-height:1.5}
.pos-vgl-live{display:flex;align-items:flex-start;gap:6px;background:var(--green-tint);color:var(--gray-333);border-radius:var(--radius-sm);padding:7px 10px}
.pos-vgl-live svg{flex:none;margin-top:2px;color:var(--green)}
.pos-vgl-wechsel{color:var(--gray-747)}
.pos-vgl-snap{color:var(--gray-747);margin-top:3px;padding-left:2px}
.pos-vgl-grund{color:var(--gray-333);font-style:italic;margin-top:3px;padding-left:2px}
/* Absende-Sperre bei fehlender Begründung (Warenkorb-Fußzeile) */
.wk-grund-sperre{margin:0 0 8px;font-size:13px;color:var(--warn-text);background:var(--warn-bg);border:1px solid var(--warn-border);border-radius:var(--radius-sm);padding:7px 10px}
/* Block G: gleiches Grau-Disabled-Schema wie alle anderen Knöpfe (statt opacity) */
#absenden-btn:disabled{background:var(--gray-eb);color:var(--gray-747);border-color:var(--gray-eb);cursor:not-allowed;transform:none}
/* Mengenpreis-Hinweise im Warenkorb/Checkout (preis_je > 1) */
.wk-gesamt{display:block;color:var(--green);font-weight:600;font-size:12px;margin-top:2px}
/* Mindestmengen-Hinweis (Auftrag 11.08.2026) – Hinweis, bewusst keine Sperre */
.wk-mbm{display:flex;align-items:center;gap:4px;color:var(--warning);font-weight:600;font-size:12px;margin-top:2px}
.ck-gesamt{color:var(--green);font-weight:600;white-space:nowrap}
.karte .add{
  background:var(--green);color:var(--white);border:1px solid transparent;border-radius:var(--radius);
  padding:11px;cursor:pointer;font-size:14px;font-weight:600;font-family:var(--font-family);
  transition:background .15s ease,transform .08s ease;
}
.karte .add:hover{background:var(--green-dark)}
.karte .add:active{transform:scale(.985)}

/* Block C: Bild/Platzhalter auf der Katalog-Kachel.
   Echtes Foto: weiße Fläche OHNE Rahmen (das Foto steht frei, kein Placeholder-Look).
   Nur die leere Platzhalter-Kachel bekommt Grau + gestrichelten Rahmen. */
.karte-bild{width:100%;height:170px;border-radius:var(--radius-sm);overflow:hidden;background:var(--white);
  display:flex;align-items:center;justify-content:center}
.karte-bild img{width:100%;height:100%;object-fit:contain;cursor:zoom-in;background:var(--white)}
.karte-bild-ph{background:var(--gray-f6);border:1px dashed var(--gray-eb)}
.karte-bild-ph .ic{color:var(--green);opacity:.62}

/* Block C: Bild-Großansicht (Lightbox) */
.bild-lightbox{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.8);
  display:flex;align-items:center;justify-content:center;padding:32px}
.bild-lightbox img{max-width:90vw;max-height:88vh;object-fit:contain;border-radius:var(--radius);background:var(--white)}
.bild-lightbox-close{position:absolute;top:18px;right:22px;background:none;border:none;color:#fff;
  font-size:30px;line-height:1;cursor:pointer;padding:4px 10px}
.bild-lightbox-close:hover{opacity:.8}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.35);border:none;color:#fff;
  font-size:44px;line-height:1;width:56px;height:72px;cursor:pointer;border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center}
.lb-nav:hover{background:rgba(0,0,0,.6)}
.lb-prev{left:22px}
.lb-next{right:22px}
.lb-zaehler{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:#fff;font-size:14px;
  background:rgba(0,0,0,.45);padding:4px 12px;border-radius:var(--radius-pill)}

/* Block D: Seiten-Blätterung unter dem Katalog */
.kat-pager-wrap{margin-top:20px}
.kat-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px}
.kat-seiten{display:flex;flex-wrap:wrap;gap:6px}
.kat-nav,.kat-seite{height:38px;min-width:38px;padding:0 12px;border:1px solid var(--gray-eb);background:var(--white);
  color:var(--gray-333);font-size:14px;font-weight:600;font-family:var(--font-family);border-radius:var(--radius-sm);cursor:pointer;
  transition:background .12s ease,border-color .12s ease}
.kat-nav:hover:not(:disabled),.kat-seite:hover:not(.aktiv){background:var(--green-tint);border-color:var(--green-tint)}
.kat-seite.aktiv{background:var(--green);border-color:var(--green);color:#fff;cursor:default}
.kat-nav:disabled{opacity:.45;cursor:not-allowed}
.kat-nav:focus-visible,.kat-seite:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.kat-ell{padding:0 4px;color:var(--gray-747);align-self:center}

.leer-hinweis{text-align:center;padding:60px 20px;color:var(--gray-747)}
/* Block C (UI-Feinschliff): Leerzustand – Zurücksetzen zuerst, Anfordern zweitrangig */
.leer-hinweis .ghost-btn{margin:8px 4px 0}
.leer-tipp{font-size:12px;color:var(--gray-747);margin:12px 0 2px}

/* Drawer (Warenkorb) */
.drawer{
  position:fixed;top:0;right:0;height:100vh;height:100dvh;width:400px;max-width:92vw;background:var(--white);z-index:40;
  border-left:1px solid var(--gray-eb);display:flex;flex-direction:column;
}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:2px solid var(--green)}
.drawer-head h2{margin:0}
.drawer-body{flex:1;overflow-y:auto;padding:16px 20px}
.drawer-foot{border-top:1px solid var(--gray-eb);padding:16px 20px}
.wk-zeile{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--gray-eb)}
.wk-zeile .wk-name{flex:1;font-size:14px;color:var(--gray-333)}
.wk-zeile .wk-name small{display:block;color:var(--gray-747)}
.wk-wunsch{display:inline-block;background:var(--green);color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;padding:1px 6px;margin-right:4px}
.wk-standard{padding:0 0 12px;border-bottom:1px solid var(--gray-eb);margin-bottom:8px}
.wk-standard label{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:700;color:var(--gray-333)}
.wk-standard select{height:36px;padding:0 8px;border:1px solid var(--gray-eb);font-size:13px;font-family:var(--font-family);background:var(--white);color:var(--black)}
.wk-kst{display:block;margin-top:5px;max-width:100%;height:30px;padding:0 6px;border:1px solid var(--gray-eb);font-size:12px;font-family:var(--font-family);background:var(--white);color:var(--gray-333)}
.wk-menge{width:56px;height:38px;padding:5px;border:1px solid var(--gray-eb);border-radius:var(--radius);text-align:center;font-family:var(--font-family)}
.wk-menge:focus{outline:none;border-color:var(--green)}
.wk-entf{background:none;border:none;color:var(--gray-747);cursor:pointer;font-size:16px}
/* Block C: Mini-Thumb in Warenkorb-Zeilen */
.mini-thumb{flex:0 0 auto;width:38px;height:38px;border-radius:var(--radius-sm);overflow:hidden;
  background:var(--gray-f6);border:1px solid var(--gray-eb);display:flex;align-items:center;justify-content:center}
.mini-thumb img{width:100%;height:100%;object-fit:contain;background:var(--white)}
.mini-thumb-ph .ic{color:var(--green);opacity:.6}
.summe-zeile{display:flex;justify-content:space-between;font-size:16px;margin-bottom:8px;color:var(--black)}
.hinweis-klein{font-size:12px;color:var(--gray-747);margin:6px 0 12px}
/* Block G: EIN Ladezustand für alle Listen/Ansichten (bewusst kein Skeleton) */
.lade-hinweis{color:var(--gray-747);font-size:14px;padding:8px 0}

.icon-btn{background:none;border:none;font-size:18px;cursor:pointer;color:var(--gray-747)}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:30}

/* Modal – Abdunkelung wie die .overlay-Tönung des Drawers, damit der Dialog
   klar über der Seite steht (Block A UI-Feinschliff) */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:50;padding:20px;background:rgba(0,0,0,.35)}
/* Block G: dezente Öffnungs-Animationen (180 ms). Keyframes statt transition,
   weil hidden→sichtbar ein display-Wechsel ist (transitions feuern dabei nicht).
   Unter prefers-reduced-motion bleibt alles schlagartig – wie bisher. */
@media (prefers-reduced-motion: no-preference){
  .modal:not([hidden]){animation:g-einblenden .18s ease-out}
  .modal:not([hidden]) .modal-card{animation:g-aufsteigen .18s ease-out}
  .drawer:not([hidden]){animation:g-hereinschieben .18s ease-out}
  /* eigener Keyframe: der Toast zentriert sich über transform:translateX(-50%) */
  .toast:not([hidden]){animation:g-toast .18s ease-out}
}
@keyframes g-einblenden{from{opacity:0}}
@keyframes g-aufsteigen{from{opacity:0;transform:translateY(10px)}}
@keyframes g-hereinschieben{from{transform:translateX(36px);opacity:.4}}
@keyframes g-toast{from{opacity:0;transform:translateX(-50%) translateY(10px)}}
.modal-card{background:var(--white);border-radius:var(--radius);width:480px;max-width:100%;max-height:90vh;max-height:90dvh;overflow-y:auto;padding:0 0 20px;border:1px solid var(--gray-eb);border-top:4px solid var(--green)}
.modal-card .hinweis-klein{padding:0 20px}
.form{display:flex;flex-direction:column;gap:14px;padding:16px 20px 0}
.form label{display:flex;flex-direction:column;gap:5px;font-size:14px;font-weight:600;color:var(--gray-747)}
.form input,.form select{height:var(--input-height);padding:0 12px;border:1px solid var(--gray-eb);border-radius:var(--radius);font-size:14px;font-weight:400;font-family:var(--font-family);color:var(--black);background:var(--white)}
.form textarea{padding:10px 12px;border:1px solid var(--gray-eb);border-radius:var(--radius);font-size:14px;font-weight:400;font-family:var(--font-family);color:var(--black);resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--green)}
/* Block E (UI-Feinschliff): Checkbox-Zeilen in Formularen bleiben EINE Zeile –
   .form label stellt sonst auf column um (Checkbox über dem Text). */
.form label.einst-check,.form label.art-bild-remove{flex-direction:row;align-items:center}
/* Fehlerzustand: Rahmen + Hinweistext in --error */
.form label.hat-fehler input,.form label.hat-fehler select,.form label.hat-fehler textarea,
input.hat-fehler,select.hat-fehler,textarea.hat-fehler{border-color:var(--error)}
.feld-fehler{font-size:13px;font-weight:400;color:var(--error);margin-top:2px}
.form-row{display:flex;gap:12px}
/* Anfordern-Formular: selten gebrauchte Optional-Felder gefaltet (Block G).
   Kein display:flex am details-Element – das würde das Aufklapp-Dreieck kosten;
   die inneren Felder bekommen ihren Abstand über margin-top. */
.af-details summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--green-dark);padding:4px 0}
.af-details summary:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:4px}
.af-details > label,.af-details > .form-row{margin-top:12px}
/* Block D (UI-Feinschliff): lange Optionen (KST-Selects) sprengten den Dialog –
   flex-Kinder dürfen schrumpfen, Felder füllen nur ihre Spalte. */
.form-row label{min-width:0}
.form-row select,.form-row input{width:100%;max-width:100%}
.form-row label{flex:1}
/* In einer Zeile stehende Felder unten bündig ausrichten, auch wenn ein Label zweizeilig umbricht */
.form-row label input,.form-row label select{margin-top:auto}
/* Checkout: „Benötigt bis" – Radio-Paar + Datumsfeld in einer Zeile.
   Sieht aus wie ein normales Formularfeld, ist aber eine Gruppe (kein <label> außenrum). */
.ck-termin{display:flex;flex-direction:column;gap:5px}
.ck-termin-lbl{font-size:14px;font-weight:600;color:var(--gray-747)}
.ck-termin-wahl{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ck-termin-wahl input[type=date]{flex:1;min-width:150px}
/* Checkout: Investitionsantrag (Auftrag 20.08.2026). Steht ganz oben im
   Formular und rahmt den ganzen Vorgang – deshalb abgesetzte Fläche statt
   einer Warnzeile: Es ist kein Alarm, sondern ein anderer Vorgang. */
.ck-invest{display:flex;flex-direction:column;gap:12px;padding:13px 14px;
  background:var(--green-tint);border:1px solid var(--green);
  border-radius:var(--radius-sm);margin-bottom:4px}
.ck-invest-titel{margin:0;font-size:16px;color:var(--green-dark)}
.ck-invest .hinweis-klein{margin:0}
.ck-invest-art{display:flex;flex-direction:column;gap:5px}
/* Checkout: „Anhang gehört zu …" – erscheint nur bei Split + Datei.
   Bewusst kein Warn-Gelb: Das ist eine Frage an den Besteller, kein Alarm. */
.ck-anhang-split{display:flex;flex-direction:column;padding:10px 11px;
  background:var(--gray-f6);border:1px solid var(--gray-eb);border-radius:var(--radius-sm)}
.ck-anhang-split .hinweis-klein{margin:6px 0 0}
.ck-anhang-ziel{display:flex;flex-direction:column;gap:5px;font-size:14px;font-weight:600;color:var(--gray-747)}
.ck-zusammenfassung{background:var(--gray-f6);border:1px solid var(--gray-eb);padding:12px;font-size:13px;color:var(--gray-333)}
.ck-liste{margin:6px 0 0;padding-left:18px}
.ck-liste li{margin-bottom:2px}
.ck-liste small{color:var(--gray-747)}
.ck-summe{margin-top:10px;font-size:15px}
.ck-warnung{margin-top:8px;color:var(--warning);font-weight:700}
.ck-split-hinweis{margin-bottom:8px;font-size:13px;color:var(--gray-333)}
.ck-auto{margin-top:6px;font-size:13px;font-weight:700;color:var(--green)}
.ck-freigabe-hinweis{margin-top:6px;font-size:13px;color:var(--gray-747)}
/* Eigener Budget-Stand im Checkout (nur wenn die Person ein Budget hat) */
.ck-budget{margin-top:10px;padding-top:10px;border-top:1px solid var(--gray-eb);font-size:13px;color:var(--gray-333)}
.ck-budget-bis{color:var(--gray-747)}
/* Übernehmen: Duplikat-Banner + kleiner Inline-Link */
.ue-dup{background:var(--gray-f6);border:1px solid var(--gray-eb);border-left:4px solid var(--warning);padding:12px;margin-bottom:14px;font-size:13px;color:var(--gray-333)}
.ue-dup-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.link-btn{background:none;border:none;color:var(--green);font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;padding:0;text-decoration:underline}
.link-btn:hover{opacity:.8}
/* Split-Vorschau: eine Karte je resultierender Bestellung (Kopf = Lieferant · Summe, darunter die Positionen) */
.ck-gruppe-kopf{margin-top:12px;padding:9px 12px 8px;font-weight:700;font-size:13px;color:var(--green);
  background:var(--white);border:1px solid var(--gray-eb);border-bottom:none}
.ck-gruppe-kopf:first-child{margin-top:0}
.ck-gruppe-kopf + .ck-liste{margin-top:0;padding:8px 12px 12px 30px;background:var(--white);
  border:1px solid var(--gray-eb);border-top:none}

/* Toast – drei Ton-Arten (Block A UI-Feinschliff): grün = Erfolg (Standard),
   rot = Fehler, grau = Hinweis. --hoch stellt ihn über den offenen Warenkorb
   bzw. auf schmalen Schirmen über die untere Knopfzeile. */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--success);color:var(--white);padding:14px 22px;border-radius:var(--radius);font-size:14px;z-index:60;max-width:min(92vw,560px)}
.toast--fehler{background:var(--error)}
.toast--hinweis{background:var(--gray-747)}
.toast--hoch{bottom:132px}

/* Tabs / Navigation */
.tabs{display:flex;align-items:center;gap:4px;background:var(--white);padding:0 20px;border-bottom:1px solid var(--gray-eb)}
.tab{background:none;border:none;border-bottom:3px solid transparent;padding:12px 16px;font-size:14px;font-weight:700;color:var(--gray-747);cursor:pointer;font-family:var(--font-family)}
.tab:hover{color:var(--gray-333)}
.tab.aktiv{color:var(--green);border-bottom-color:var(--green)}
.user-chip{margin-left:auto;font-size:12px;color:var(--gray-747)}

/* Meine Bestellungen */
.best-wrap{max-width:820px;margin:0 auto;padding:20px}
.best-titel{font-size:18px;color:var(--gray-333);margin:0 0 14px}
/* ===== Kompakte Bestellkarte (Auftrag 25.08.2026) =====
   EINE Zeile für „Meine Bestellungen", „Offene Freigaben" und den Chip
   „Erledigt". Vorher trug jede Karte bis zu 14 Zeilen; das Wichtigste ging
   zwischen Nebensachen unter. Alles Weitere steht im Detail-Fenster (.bd-*).
   Die frühere .best-card samt bc-*-Familie ist damit entfallen.
   .bz bleibt bewusst ein normaler BLOCK – der Sticky-Hinweis der Freigaben
   wird per insertAdjacentHTML('afterbegin') eingehängt und muss ÜBER Zeile 1
   landen, nicht daneben. Nur .bz-z1 ist flex. */
/* Bewusst OHNE Ruheschatten: zwanzig Schatten untereinander sind Rauschen,
   nicht Struktur. Die Karte hebt sich erst beim Zeigen ab. */
.bz{background:var(--white);border:1px solid var(--gray-eb);border-radius:var(--radius);
  padding:12px 14px;margin-bottom:8px;cursor:pointer;
  transition:border-color .15s ease,box-shadow .15s ease}
.bz:hover{border-color:var(--green);box-shadow:var(--shadow-sm)}
.bz:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.bz-z1{display:flex;align-items:center;gap:10px}
.bz-nr{font-weight:700;color:var(--black);flex:0 0 auto}
.bz-badges{display:flex;gap:6px;flex-wrap:wrap;min-width:0}
/* tabular-nums: die Beträge bilden eine saubere Spalte – der Griff, der eine
   Liste ruhig wirken lässt. */
.bz-betrag{margin-left:auto;font-size:15px;font-weight:700;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.bz-chev{color:var(--gray-747);flex:0 0 auto;display:flex;transition:transform .15s ease}
.bz:hover .bz-chev{transform:translateX(2px)}
.bz-z2{font-size:var(--fs-m);color:var(--gray-55);margin-top:4px}
/* Der Knopf ist eine dritte Zeile, kein Aufruf: kompakter als der Normal-Knopf,
   sonst dominiert er die Karte, die er nur ergänzen soll. */
.bz-aktion{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.bz-aktion .btn{padding:6px 13px;font-size:var(--fs-m)}
/* Überfällig und „Gerade bearbeitet" – Optik der abgelösten .q-Varianten */
.bz.bz-ueberfaellig{border-left:3px solid var(--error)}
.bz.bz-sticky{border-color:var(--green);box-shadow:var(--shadow-sm);
  animation:q-sticky-puls .9s ease-out 1}
/* Abschnitte in „Meine Bestellungen": Läuft noch / Abgeschlossen */
.best-abschnitt{font-size:var(--fs-m);font-weight:700;color:var(--gray-747);
  margin:22px 0 10px;display:flex;align-items:center;gap:8px}
.best-abschnitt:first-child{margin-top:0}
.best-abschnitt-zahl{background:var(--gray-eb);color:var(--gray-55);border-radius:var(--radius-pill);
  padding:1px 8px;font-size:var(--fs-s)}
/* Handy: „#12345 · Wartet auf Unterschrift · zwei Zusatzpillen · 12.345,67 € ·
   Chevron" passen nicht in 360 px. Die ZUSATZ-Pillen bekommen deshalb eine
   eigene Zeile; Nummer, Status, Betrag und Chevron bleiben zusammen – das ist
   die Zeile, die man beim Überfliegen liest. */
@media (max-width:600px){
  .bz-z1{flex-wrap:wrap}
  .bz-badges{flex-basis:100%;order:3}
  .bz-nr,.bz-z1>.status-badge{min-width:0;overflow:hidden;text-overflow:ellipsis}
}
@media (prefers-reduced-motion: reduce){
  .bz,.bz-chev{transition:none}
  .bz:hover .bz-chev{transform:none}
  .bz.bz-sticky{animation:none}
}

/* ===== Detail-Fenster einer Bestellung ===== */
.bd-card{width:720px;max-width:calc(100vw - 32px)}
.bd-body{padding:0 20px}
.bd-kopf{padding:16px 0 4px}
.bd-kopf-oben{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.bd-summe{margin-left:auto;font-size:var(--fs-zahl);font-weight:700;font-variant-numeric:tabular-nums}
.bd-sekt{margin:18px 0}
.bd-sekt-titel{font-size:var(--fs-s);font-weight:700;color:var(--gray-747);margin-bottom:8px}
.bd-sekt-titel:empty{display:none}
/* Eckdaten: beschriftete Werte statt der früheren Icon-Zeilen – ein Pin allein
   sagt nicht, ob die Anschrift die Lieferadresse oder der Lieferantensitz ist. */
.bd-zeile{display:flex;gap:12px;padding:5px 0;border-top:1px solid var(--gray-eb);font-size:var(--fs-base)}
.bd-zeile:first-child{border-top:0}
.bd-label{flex:0 0 150px;color:var(--gray-747)}
.bd-wert{flex:1;min-width:0;color:var(--gray-333)}
.bd-foot{margin:18px 0 4px}
.bd-laedt{font-size:var(--fs-m);color:var(--gray-747);padding:8px 0}
@media (max-width:600px){
  .bd-zeile{flex-direction:column;gap:2px}
  .bd-label{flex:none}
}

/* Statuskette */
.step{display:flex;align-items:flex-start}
.node{display:flex;flex-direction:column;align-items:center;gap:4px;flex:0 0 auto;width:90px}
.dot{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;border:1.5px solid var(--gray-eb);color:var(--gray-747);background:var(--gray-f6)}
/* Block F: Schriftboden – Stepper-Labels 12px, Zeitstempel 11px, Meta-Grau dunkler */
.lbl{font-size:12px;color:var(--gray-55);text-align:center}
.node .ts{font-size:11px;color:var(--gray-55);text-align:center;line-height:1.2}
.node.curr .ts{color:var(--green)}
.line{height:2px;flex:1;background:var(--gray-eb);margin-top:11px}
.node.done .dot{background:var(--green);border-color:var(--green);color:var(--white)}
.node.done .lbl{color:var(--gray-333)}
.line.line-done{background:var(--green)}
.node.curr .dot{background:var(--green);border-color:var(--green);color:var(--white)}
.node.curr .lbl{color:var(--green);font-weight:700}
.reject{display:flex;align-items:center;gap:8px;background:var(--gray-f6);color:var(--error);border:1px solid var(--error);padding:8px 12px;font-size:13px;margin-bottom:8px}
.we-info-done{margin-top:10px;font-size:13px;color:var(--green);font-weight:700}
.we-info-teil{margin-top:10px;font-size:13px;color:var(--warning);font-weight:700}
.we-group{border:1px solid var(--gray-eb);padding:10px 12px;margin-bottom:10px}
.we-group.done{background:var(--gray-f6);border-color:var(--gray-eb)}
.we-group-head{font-size:13px;font-weight:700;color:var(--gray-333);margin-bottom:6px}
.we-group.done .we-group-head{color:var(--green)}
.we-glist{margin:0 0 8px;padding-left:18px;font-size:13px;color:var(--gray-333)}
.we-glist li{margin-bottom:2px}
.we-glist li.erhalten{color:var(--green)}
.we-file{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:700;color:var(--gray-333)}
.we-file input{font-weight:400}
.we-group.done .we-glist{margin-bottom:0}

/* Favoriten */
.karte{position:relative}
.karte .gruppe-tag{max-width:calc(100% - 34px)} /* Platz für den Stern oben rechts */
.fav-toggle{
  position:absolute;top:10px;right:10px;background:none;border:none;
  font-size:20px;line-height:1;cursor:pointer;color:var(--gray-747);padding:2px;
}
.fav-toggle:hover{color:#A87500}   /* Block F: 4,03:1 auf Weiß (vorher #e6a800, 1,9:1) */
.fav-toggle.on{color:#A87500}
.sidebar li.fav-item{font-weight:700}
.sidebar li.fav-item > span:first-child{color:#c98a00}
.sidebar li.fav-item.aktiv > span:first-child{color:var(--white)}

@media(max-width:760px){
  .layout{flex-direction:column}
  /* Formular-Doppelzeilen (form-row) auf dem Handy untereinander – volle Breite,
     44px-Touch-Ziele. Gilt für alle Modals (u. a. Vor-Ort-Kauf an der Kasse). */
  .form-row{flex-direction:column;gap:0}
  /* Block B (UI-Feinschliff): Ergebnis + Einstiegs-Buttons ZUERST, Warengruppen
     darunter – vorher begann der Katalog erst nach ~1.200 px Gruppenliste. */
  .sidebar{width:100%;position:static;order:2}
  .content{order:1}
  /* Ziel für scrollIntoView nach Suche/Filter: nicht unter den sticky Reitern landen */
  .content{scroll-margin-top:52px}
  /* Kopfzeile: Wortmarke links, Warenkorb rechts, Suche volle Breite darunter – kein Überlauf */
  .topbar{flex-wrap:wrap;gap:10px;padding:10px 12px}
  /* Block B: Kopf scrollt mit, dafür kleben die Reiter oben – ~130 px Inhalt gewonnen */
  .topbar{position:static}
  .tabs{position:sticky;top:0;z-index:19;background:var(--white)}
  .brand{padding-right:0;border-right:none;margin-right:0}
  .brand-signet{height:36px}
  .brand-sub{display:none}          /* Kontext liefert der aktive Reiter */
  .cart-btn{margin-left:auto;padding:0 12px;font-size:13px}
  /* Auf dem Handy bleiben Warenkorb + Glocke + Zahnrad als Gruppe rechts
     (nur EIN auto-Rand, sonst verteilt sich der Platz zwischen beiden). */
  .glocke-wrap{margin-left:0}
  /* Suche volle Breite, Lieferanten-Filter darunter in eigener Zeile (bei 375 px wird es sonst eng) */
  .search-wrap{order:3;flex-basis:100%;max-width:none;flex-wrap:wrap}
  #suche{flex-basis:100%}
  .lieferant-filter{width:100%}
  /* Block B: Suche/Filter nur im Katalog zeigen – in anderen Ansichten wirkt
     die tote Suche wie ein Fehler (data-ansicht setzt wechsleAnsicht) */
  body:not([data-ansicht=katalog]) .search-wrap{display:none}
  /* Reiter umbrechen, Demo-Umschalter rutscht in eigene Zeile */
  .tabs{flex-wrap:wrap;padding:0 12px}
  .tab{padding:12px 12px}
  .nav-right{flex-basis:100%;margin-left:0;justify-content:flex-end;padding:6px 0;flex-wrap:wrap}
  .dev-user{max-width:100%}
  /* Block B: iOS zoomt bei Eingaben unter 16 px automatisch – deshalb Boden 16 px.
     !important, weil sonst jede Klassen-Regel (.wk-kst 12px, .form input 14px …)
     gewinnt; gilt nur in dieser Mobil-Query. */
  input,select,textarea{font-size:16px !important}
  /* Block B: 44-px-Touchziele (Glyphengröße bleibt; nur die Klickfläche wächst) */
  .icon-btn,.wk-entf,.fav-toggle{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .fav-toggle{top:2px;right:2px;padding:0}
  .karte .gruppe-tag{max-width:calc(100% - 48px)}
  /* select.wk-kst (statt .wk-kst): die spätere Warenkorb-Regel (~Z. 840, 34px)
     gewänne sonst – gleiche Spezifität, späterer Platz in der Datei. */
  select.wk-kst{height:44px}
  .kat-nav,.kat-seite{min-height:44px;min-width:44px}
  /* Block B: Statuskette – Stufen teilen sich die Breite, Notfall-Scroll statt
     abgeschnittenem "geliefert" (5-Stufen-Fall mit Angebot angefragt) */
  .step{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .node{width:auto;flex:1;min-width:56px}
  .node .lbl{overflow-wrap:break-word;max-width:100%}
}

/* ===== Phase 3: Offene Freigaben (Einkauf/Freigeber) ===== */
/* Rechtsbündige Nutzer-Info + Demo-Umschalter (Umschalter nur bis Phase-4-Login) */
.nav-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.user-chip{margin-left:0}
.dev-user{height:30px;border:1px solid var(--gray-eb);border-radius:var(--radius);background:var(--white);
  font-family:var(--font-family);font-size:12px;color:var(--gray-333);padding:0 6px;cursor:pointer}
.dev-user:focus{outline:none;border-color:var(--green)}
.tab-badge{background:var(--green);color:var(--white);border-radius:10px;padding:0 7px;font-size:11px;margin-left:4px}

.ek-wrap{max-width:900px;margin:0 auto;padding:20px}
.ek-h{font-size:14px;text-transform:uppercase;font-weight:700;color:var(--gray-333);margin:0 0 12px}

/* Freigabe-Karten */
.q-card{background:var(--white);border:1px solid var(--gray-eb);padding:16px;margin-bottom:14px}
/* „Gerade bearbeitet" (Rückmeldung Felix 28.07.): Karte bleibt nach Freigeben/
   Bestellen im aktuellen Chip stehen – grün markiert, mit kurzem Aufleuchten. */
.q-card.q-sticky{border-color:var(--green);box-shadow:var(--shadow-sm);animation:q-sticky-puls .9s ease-out 1}
@keyframes q-sticky-puls{0%{box-shadow:0 0 0 6px rgba(1,129,55,.25)}100%{box-shadow:var(--shadow-sm)}}
@media (prefers-reduced-motion: reduce){.q-card.q-sticky{animation:none}}
.q-sticky-hinweis{color:var(--green);font-size:12px;font-weight:600;margin-bottom:8px}
/* Block D (UI-Feinschliff): Alterszusatz am Eingangsdatum ab 3 Tagen */
.q-alter{color:var(--warning);font-weight:600}
/* Chip „Erledigt": kompakte Nachschlage-Karten + „10 ältere laden". */
.fg-belege{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.fg-kein-schein{font-size:12px;color:var(--gray-747);font-style:italic}
.fg-mehr-wrap{display:flex;align-items:center;gap:12px;margin:6px 0 20px}
.fg-mehr-stand{font-size:12px;color:var(--gray-747)}
.q-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.q-onr{font-weight:700}
.q-who{font-size:13px;color:var(--gray-747);margin-left:8px}
.q-total{font-size:16px;font-weight:700}
.q-meta{font-size:13px;color:var(--gray-747);margin:4px 0}
/* Kommentar des Bestellers – abgesetzt, weil er oft den Grund der Anforderung trägt */
.q-kommentar{display:flex;gap:7px;align-items:flex-start;margin:8px 0 0;padding:8px 10px;
  background:var(--gray-f6);border-left:3px solid var(--green);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-size:13px;color:var(--gray-333);line-height:1.5}
.q-kommentar .ic{flex:0 0 auto;color:var(--gray-747);margin-top:1px}
/* Dateien an der Bestellung: Anhang des Bestellers bzw. Angebot des Einkaufs */
.q-anhang{display:flex;gap:7px;align-items:center;margin:6px 0 0;font-size:13px}
.q-anhang .ic{flex:0 0 auto;color:var(--gray-747)}
.q-anhang-body{display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-width:0}
.q-anhang a{color:var(--green);font-weight:600;word-break:break-all}
.q-anhang-von{color:var(--gray-747);font-size:12px}
.q-anhang-angebot .ic{color:var(--green)}
.q-pos{font-size:13px;color:var(--gray-333);margin:6px 0 0;padding-left:16px}
.q-pos li{margin-bottom:2px}
/* Details einer Wunsch-Position: was der Besteller im Anfordern-Formular mitgegeben hat */
.pos-details{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:5px 0 10px}
.pos-komm{font-size:13px;color:var(--gray-333);font-style:italic}
.pos-bild{width:84px;height:84px;object-fit:cover;border:1px solid var(--gray-eb);border-radius:var(--radius-sm);
  background:var(--gray-f6);cursor:zoom-in;display:block}
.pos-bild:hover{border-color:var(--green)}
.pos-datei{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--green);font-weight:600;word-break:break-all}
/* Produkt-Link: oft das Aussagekräftigste am Wunsch – lange URLs dürfen die Karte nicht sprengen */
.pos-link{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--green);font-weight:600;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pos-link .ic{flex:0 0 auto}
.pos-kennung{font-size:12px;color:var(--gray-747)}
.q-flags{margin:10px 0 0;display:flex;gap:8px;flex-wrap:wrap}
.flag{font-size:11px;font-weight:700;text-transform:uppercase;padding:2px 8px}
.flag-invest{color:var(--warning);border:1px solid var(--warning)}
.flag-dringend{color:var(--error);border:1px solid var(--error)}
.q-actions{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn{border-radius:var(--radius);padding:9px 16px;font-size:14px;font-weight:600;cursor:pointer;font-family:var(--font-family);
  transition:background .15s ease,border-color .15s ease,transform .08s ease}
.btn:active{transform:scale(.985)}
.btn-primary{background:var(--green);color:var(--white);border:1px solid transparent}
.btn-primary:hover{background:var(--green-dark)}
.btn-ghost{background:var(--gray-f6);color:var(--gray-333);border:1px solid var(--gray-eb)}
.btn-ghost:hover{background:var(--gray-eb)}
.btn-danger{background:var(--white);color:var(--error);border:1px solid #e6b3ad}
.btn-danger:hover{background:#fbecea;border-color:var(--error)}

/* Manuelle Artikel – Anfrage-Schleife (Auftrag 12.08.2026): Liste je Lieferant */
.ma-filter{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.ma-filter select{height:var(--input-height);padding:0 10px;border:1px solid var(--gray-eb);border-radius:var(--radius-sm);
  font-size:14px;font-family:var(--font-family);background:var(--white)}
.ma-gruppe{background:var(--white);border:1px solid var(--gray-eb);padding:12px 16px;margin-bottom:14px}
.ma-gruppe-kopf{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding-bottom:8px}
.ma-anzahl{font-size:12px;color:var(--gray-747);margin-left:4px}
.ma-zeile{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  padding:8px 0;border-top:1px solid var(--gray-eb)}
.ma-zeile-haupt{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.ma-zeile-rechts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ma-nr{font-size:12.5px;color:var(--gray-747);white-space:nowrap}
.ma-name{font-size:14px;font-weight:600;color:var(--gray-333)}
.ma-alter{font-size:12px;color:var(--gray-747);white-space:nowrap}
.ma-badge{display:inline-block;font-size:11px;font-weight:700;padding:2px 9px;border-radius:var(--radius-pill);white-space:nowrap}
.ma-badge.ma-neu{background:var(--gray-f6);color:var(--gray-55);border:1px solid var(--gray-eb)}
.ma-badge.ma-angefragt{background:var(--warn-bg);color:var(--warn-text);border:1px solid var(--warn-border)}
.ma-badge.ma-erinnerung{background:var(--error-bg);color:var(--error);border:1px solid var(--error-border)}
.ma-badge.ma-feed{background:var(--green-tint);color:var(--green-dark);border:1px solid transparent}
.ma-badge.ma-nofeed{background:var(--white);color:var(--gray-55);border:1px dashed var(--gray-eb)}
.ma-badge.ma-inaktiv{background:var(--gray-f6);color:var(--gray-747);border:1px solid var(--gray-eb)}
.ma-kandidat{background:var(--gray-f6)}
/* Anfrage-Dialog (Block 2): Checkbox-Liste der Artikel */
.anfrage-artikel-liste{border:1px solid var(--gray-eb);border-radius:var(--radius-sm);padding:4px 12px;margin:10px 0;
  max-height:280px;overflow-y:auto}
.anfrage-artikel{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--gray-eb);cursor:pointer}
.anfrage-artikel:first-child{border-top:0}
.anfrage-artikel-name{flex:1;min-width:0;font-size:14px}

/* Einheitliches Status-Badge-Schema aus der Palette (eckig) */
.status-badge{font-size:12px;font-weight:700;padding:3px 10px;border-radius:var(--radius);white-space:nowrap;border:1px solid transparent}
.b-eingereicht{background:var(--gray-f6);color:var(--gray-747);border-color:var(--gray-eb)}
/* Investitionsantrag (07.08.): Bernstein – „wartet auf Unterschrift" fällt auf,
   ist aber kein Fehler (rot bleibt Ablehnung/Überfällig vorbehalten). */
.b-investitionsantrag{background:var(--warn-bg);color:var(--warn-text);border-color:var(--warn-border)}
.b-bestellt{background:var(--gray-f6);color:var(--gray-333);border-color:var(--gray-eb)}
.b-freigegeben{background:var(--white);color:var(--green);border-color:var(--green)}
.b-geliefert{background:var(--green);color:var(--white);border-color:var(--green)}
.b-abgelehnt{background:var(--white);color:var(--error);border-color:var(--error)}
.q-time{font-size:12px;color:var(--gray-747);margin-top:4px}
.q-auto{font-size:12px;font-weight:700;color:var(--green);background:var(--gray-f6);padding:5px 8px;margin-top:6px}
/* Antragsangaben auf der Karte (Auftrag 20.08.2026) – dieselbe Darstellung
   beim Genehmiger wie beim Besteller, damit beide dasselbe lesen. */
.invest-angaben{background:var(--green-tint);border-radius:var(--radius-sm);padding:8px 11px;margin:6px 0}
.invest-art{font-size:13px;font-weight:700;color:var(--green-dark)}
.invest-begruendung{font-size:13px;color:var(--gray-333);white-space:pre-wrap;margin-top:3px}
/* Investitionsantrag ohne Unterschrift (07.08.): Hinweiszeile in Bernstein. */
.q-invest-warte{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  color:var(--warn-text);background:var(--warn-bg);padding:5px 8px;margin-top:6px}
/* Offene Anträge (Block C): auslösende Position hervorheben. */
.pos-invest-ausloeser{background:var(--warn-bg);border-left:3px solid var(--warning);
  padding:4px 6px;border-radius:var(--radius-sm)}
.pos-invest-tag{display:inline-flex;align-items:center;gap:4px;font-size:12px;
  font-weight:700;color:var(--warn-text);margin-left:6px;white-space:nowrap}
.zeichnen-budget{font-weight:600}
/* Zeichenfläche für die Unterschrift (Nachtrag 07.08.) */
.zu-titel{font-size:13px;font-weight:700}
.zu-zeile{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:2px}
.zu-zeile img{height:40px;max-width:200px;object-fit:contain;object-position:left center;
  border:1px solid var(--gray-eb);border-radius:var(--radius-sm);background:var(--white);padding:2px 6px}
#zu-pad{width:100%;max-width:560px;height:180px;border:1px dashed var(--gray-747);
  border-radius:var(--radius-sm);background:var(--white);touch-action:none;cursor:crosshair}
.zu-aktionen{display:flex;gap:8px}
#zu-vorhanden{display:flex;align-items:center;gap:12px}
#zu-vorschau{height:56px;max-width:280px;object-fit:contain;object-position:left center;
  border:1px solid var(--gray-eb);border-radius:var(--radius-sm);background:var(--white);padding:4px 8px}

/* ===== Block A: Vor-Ort-Kauf ===== */
/* Eigene Badge-Farbe (Bernstein) – klar unterscheidbar von den Status-Badges. */
.b-vorort{background:var(--warn-bg);color:var(--warn-text);border-color:var(--warn-border);font-size:11px;padding:2px 8px}
/* Der frühere Bernstein-Randstreifen der Vor-Ort-Karte (.q-vorort) und der
   Erstattungs-Hinweis (.q-erstattung) sind mit dem Kartenumbau vom 25.08.2026
   entfallen: Die Status-Pille sagt „Vor-Ort-Kauf", und der Stand der Erstattung
   steht im Detail-Fenster. Ein farbiger Rand heißt auf der Karte jetzt „hier
   stimmt etwas nicht" (überfällig), nicht „das ist eine andere Sorte". */
/* „Vor-Ort-Kauf nachgemeldet …"-Zeile in „Meine Bestellungen" (ersetzt den Stepper). */
.vo-line{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--gray-747);
  background:var(--gray-f6);border-radius:var(--radius-sm);padding:6px 8px;margin-top:8px}

/* ===== Block B: Bestellung nachträglich ändern ===== */
/* Bearbeiten-Dialog: eine Zeile je Position mit Menge/Preis/streichen. */
.be-positionen{display:flex;flex-direction:column;gap:8px;margin-bottom:4px}
.be-pos{border:1px solid var(--gray-eb);border-radius:var(--radius-sm);padding:8px 10px;background:var(--white)}
.be-pos-name{font-size:13px;font-weight:600;color:var(--gray-333);margin-bottom:6px}
.be-pos-felder{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.be-mini{display:flex;flex-direction:column;gap:2px;font-size:11px;color:var(--gray-747);font-weight:600}
.be-mini input{width:90px;height:36px;padding:0 8px;border:1px solid var(--gray-eb);border-radius:var(--radius-sm);
  font-size:14px;font-family:var(--font-family);background:var(--white)}
.be-mini input:focus{outline:none;border-color:var(--green)}
/* nowrap + flex-shrink:0 (Block G): das Streichen-Label darf bei schmalen
   Dialogen nicht mehrzeilig umbrechen oder zusammengequetscht werden */
.be-streich{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--error);font-weight:600;cursor:pointer;margin-left:auto;white-space:nowrap;flex-shrink:0;align-self:center}
.be-pos.gestrichen{opacity:.55}
.be-pos.gestrichen .be-pos-name{text-decoration:line-through}
/* Voll-Korrektur (Block B): KST-Auswahl je Position + Warnstufen statt Sperren */
.be-kst-lbl select{height:36px;padding:0 8px;border:1px solid var(--gray-eb);border-radius:var(--radius-sm);
  font:inherit;font-size:13px;max-width:220px;background:var(--white)}
.be-kst-lbl select:focus{outline:none;border-color:var(--green)}
.be-warn{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--gray-333);
  background:#FFF8E6;border:1px solid #F0DFAE;border-radius:var(--radius-sm);padding:10px 12px;margin-bottom:10px}
.be-warn svg{flex-shrink:0;margin-top:2px;color:#B58A00}
.be-warn-rot{background:#FDEEEC;border-color:#F2C4BD}
.be-warn-rot svg{color:var(--error)}
.be-warn-check{display:flex;align-items:center;gap:7px;margin-top:8px;font-weight:600;cursor:pointer}
/* Voll-Korrektur (Block C): Position ergänzen + Umbuchungs-Konflikte */
.be-erg-treffer-btn{display:block;width:100%;text-align:left;border:1px solid var(--gray-eb);
  border-radius:var(--radius-sm);background:var(--white);padding:7px 10px;margin:4px 0;font:inherit;
  font-size:13px;cursor:pointer}
.be-erg-treffer-btn:hover{border-color:var(--green);background:var(--green-tint)}
.be-erg-treffer-btn span{color:var(--gray-747)}
.be-pos-neu{border-color:var(--green);background:var(--green-tint)}
.be-neu-name{width:100%;max-width:340px;height:36px;padding:0 8px;border:1px solid var(--gray-eb);
  border-radius:var(--radius-sm);font:inherit;font-size:13px}
.be-neu-weg{margin-left:8px}
.be-konflikt{border-color:var(--error) !important;background:#FDEEEC}
/* Block D: Kennzeichen "weicht vom versandten PDF ab" */
.status-badge.b-pdfab{background:#FFF3E0;color:#9A5B00;border:1px solid #F0D5AE}
/* Investitionsantrag: Preis stieg nach der Genehmigung, Bestellung schon raus (Block D). */
.status-badge.b-investab{background:#FFF3E0;color:#9A5B00;border:1px solid #F0D5AE}
.be-status-details{border:1px solid var(--gray-eb);border-radius:var(--radius-sm);padding:8px 10px;background:var(--gray-f6)}
.be-status-details summary{font-size:13px;font-weight:600;color:var(--gray-747);cursor:pointer}
.be-status-details label{margin-top:8px}
/* Änderungsprotokoll (aufklappbar) in der Freigabe-Karte. */
.q-prot{margin-top:8px;font-size:12px}
.q-prot summary{cursor:pointer;color:var(--gray-747);font-weight:700}
.prot-liste{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.prot-liste li{background:var(--gray-f6);border-radius:var(--radius-sm);padding:6px 8px;color:var(--gray-333)}
.prot-grund{color:var(--gray-747);font-style:italic}
.prot-meta{display:block;font-size:11px;color:var(--gray-747);margin-top:2px}
/* Gestrichene Position in Listen. */
.pos-gestrichen{color:var(--gray-747);text-decoration:line-through}
.pos-gestrichen-tag{margin-left:6px;font-size:11px;font-weight:700;color:var(--error);text-decoration:none;
  border:1px solid var(--error);border-radius:var(--radius-pill);padding:1px 7px}
/* Leer-Auftrag (alle Positionen gestrichen): Hinweis statt Bestellen/Angebot. */
.q-leer{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--warn-text);
  background:var(--warn-bg);border:1px solid var(--warn-border);border-radius:var(--radius-sm);padding:6px 8px;margin-top:8px}

/* ===== Block D: Überfällig-Sicht ===== */
/* Mehrere Badges (Überfällig + Status) rechtsbündig nebeneinander. */
.q-badges{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
/* Rotes Überfällig-Badge. Der rote Karten-Akzent dazu heißt seit dem
   Kartenumbau 25.08.2026 .bz-ueberfaellig (oben bei der kompakten Karte). */
.b-ueberfaellig{background:var(--error-bg);color:var(--error);border-color:var(--error);font-size:11px;padding:2px 8px}
/* Überfällig-Chip: rote Zahl, sobald es welche gibt (nicht die grüne Standardfarbe). */
.fg-chip-warn .fg-count{background:var(--error);color:var(--white)}
.fg-chip-warn.aktiv{background:var(--error);border-color:var(--error);color:var(--white)}
.fg-chip-warn.aktiv .fg-count{background:rgba(255,255,255,.25);color:var(--white)}
/* Überfällig-Zeile für den Besteller in „Meine Bestellungen". */
.bc-ueberfaellig{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--error);margin-top:6px}

/* Verwaltung / Stammdaten */
.vw-add{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.vw-add input{height:var(--input-height);padding:0 12px;border:1px solid var(--gray-eb);border-radius:var(--radius);
  font-size:14px;font-family:var(--font-family);background:var(--white);flex:1;min-width:160px}
.vw-add input:focus{outline:none;border-color:var(--green)}
/* Block G: Label ÜBER dem Anlege-Feld (Placeholder allein verschwindet beim Tippen) */
.vw-add .vw-add-feld{display:flex;flex-direction:column;gap:3px;font-size:12px;font-weight:600;color:var(--gray-747);flex:1;min-width:160px}
.vw-add .vw-add-feld input{width:100%;min-width:0}
.vw-add .vw-add-feld select{height:var(--input-height);padding:0 10px;border:1px solid var(--gray-eb);border-radius:var(--radius-sm);font-size:14px;font-family:var(--font-family);background:var(--white);color:var(--black)}
.vw-add .vw-add-feld select:focus{outline:none;border-color:var(--green)}
.vw-add .btn{align-self:flex-end}
.vw-add label.chk{align-self:flex-end;padding-bottom:12px}
.vw-row{background:var(--white);border:1px solid var(--gray-eb);padding:10px 14px;margin-bottom:8px}
.vw-row:hover{background:var(--gray-f6)}
.vw-view{display:flex;justify-content:space-between;align-items:center;gap:10px}
.vw-actions{display:flex;gap:8px;flex-shrink:0}
.vw-row .vw-text{font-size:14px;color:var(--gray-333)}
.vw-row .vw-sub{display:block;font-size:12px;color:var(--gray-747);margin-top:2px}
.vw-row.inaktiv{background:var(--gray-f6)}
.vw-row.inaktiv .vw-text{color:var(--gray-747)}
.vw-row .vw-text em{color:var(--gray-747);font-style:normal;font-size:12px}
/* Artikel-Verwaltung: Thumbnails in der Liste */
.art-row-main{display:flex;align-items:center;gap:12px;min-width:0}
.art-thumb{width:46px;height:46px;flex:0 0 auto;border-radius:var(--radius-sm);object-fit:cover;background:var(--gray-f6);border:1px solid var(--gray-eb)}
.art-thumb-leer{display:flex;align-items:center;justify-content:center;color:var(--gray-747)}
/* Artikel-Verwaltung: Bild-Feld im Modal */
.art-bild-feld{display:flex;flex-direction:column;gap:8px;margin:4px 0}
.art-bild-vorschau{width:120px;height:120px;border:1px solid var(--gray-eb);border-radius:var(--radius-sm);
  background:var(--gray-f6);display:flex;align-items:center;justify-content:center;overflow:hidden}
.art-bild-vorschau img{width:100%;height:100%;object-fit:cover}
.art-bild-leer{font-size:12px;color:var(--gray-747)}
.art-bild-remove{display:flex;flex-direction:row;align-items:center;gap:8px;font-size:13px;font-weight:400;color:var(--gray-747);text-transform:none}
.art-bild-remove input{width:auto;height:auto}
.vw-edit{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.vw-edit input{height:var(--input-height);padding:0 12px;border:1px solid var(--gray-eb);border-radius:var(--radius);
  font-size:14px;font-family:var(--font-family);background:var(--white);flex:1;min-width:160px}
.vw-edit input:focus{outline:none;border-color:var(--green)}

/* Dashboard */
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.metric{background:var(--white);border:1px solid var(--gray-eb);border-top:2px solid var(--green);padding:14px 16px}
.metric .l{font-size:12px;color:var(--gray-747)}
.metric .v{font-size:24px;font-weight:700;margin-top:2px;color:var(--gray-333)}
.bar-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.bar-name{width:140px;font-size:13px;color:var(--gray-333);flex:0 0 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-track{flex:1;height:16px;background:var(--gray-eb);overflow:hidden}
.bar-fill{height:100%;background:var(--green)}
.bar-val{width:100px;text-align:right;font-size:13px;flex:0 0 auto}
/* ===== Auswertung / Dashboard (Phase 6) ===== */
#ansicht-dashboard .ek-wrap{max-width:1120px}
.dash-kopf{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.dash-scope{font-size:12px;color:var(--gray-747)}
.dash-export{margin-left:auto}
.dash-filter-toggle{display:none}
.dash-filter{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:flex-end;
  background:var(--white);border:1px solid var(--gray-eb);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:12px 14px;margin-bottom:18px}
.dash-filter label{display:flex;flex-direction:column;gap:4px;font-size:12px;
  color:var(--gray-747);flex:1 1 130px;min-width:120px}
.dash-filter select,.dash-filter input{height:38px;padding:0 8px;border:1px solid var(--gray-eb);
  border-radius:var(--radius-sm);font:inherit;font-size:13px;background:var(--white);width:100%}
.dash-filter .ghost-btn{flex:0 0 auto;height:38px}
/* „Nicht gefunden"-Hinweis der Suchfelder (Artikel, Kostenstelle): fester
   Kasten UNTER dem Feld statt im Textfluss. Im Fluss zog er die ganze
   Filterzeile auseinander – sie ist Dauer-UI, der Fehler die Ausnahme, und
   bei align-items:flex-end rutschen dann alle Nachbarfelder mit. Feste Höhe,
   damit beide Hinweise gleich aussehen; eigener Grund, damit er über dem
   Darunterliegenden lesbar bleibt. */
.dash-filter label{position:relative}
.dash-filter .feld-fehler{position:absolute;top:100%;left:0;right:0;z-index:5;
  height:34px;margin-top:4px;padding:4px 6px;box-sizing:border-box;
  font-size:11px;line-height:1.25;overflow:hidden;
  background:var(--white);border:1px solid var(--error);
  border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);
  /* Er liegt kurzzeitig über der zweiten Filterreihe – dort steht u. a.
     „Zurücksetzen". Klicks gehen deshalb durch ihn hindurch; der Hinweis ist
     reine Information und wird nie angeklickt. */
  pointer-events:none}
.dash-metrics{grid-template-columns:repeat(5,1fr)}
.metric .sub{font-size:11px;color:var(--gray-747);margin-top:4px;line-height:1.35}
.bar-name small{display:block;font-size:11px;color:var(--gray-747);font-weight:400}
.bar-val strong.bar-pct{margin-left:4px}
.bar-pct.ampel-gelb{color:#8F6400}   /* Block F: lesbares Ampel-Gelb (≥4,5:1 auf Weiß) */
.bar-pct.ampel-rot{color:#C0392B}
.bar-fill.ampel-gelb{background:#E6A700;box-shadow:inset 0 0 0 1px #B57F00}   /* 1px-Kontur gegen die helle Spur */
.bar-fill.ampel-rot{background:#C0392B}
#dash-budget .bar-name{width:190px}
#dash-budget .bar-val{width:auto;min-width:170px}
/* Block 3: Top-Listen */
.dash-tops{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.dash-top-card{background:var(--white);border:1px solid var(--gray-eb);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:12px 14px;min-width:0}
.dt-kopf{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.dt-titel{font-size:13px;font-weight:700;color:var(--gray-333);margin:0}
.dt-sort{display:flex;gap:2px;background:var(--gray-f6);border-radius:var(--radius-pill);padding:2px}
.dt-sort button{border:0;background:transparent;font:inherit;font-size:11px;padding:3px 9px;
  border-radius:var(--radius-pill);cursor:pointer;color:var(--gray-747)}
.dt-sort button.aktiv{background:var(--white);color:var(--gray-333);font-weight:600;box-shadow:var(--shadow-sm)}
.dt-zeile{display:flex;gap:8px;align-items:baseline;padding:5px 8px;font-size:13px;border-radius:6px;
  background:linear-gradient(90deg,var(--green-tint) var(--p),transparent var(--p))}
.dt-rang{width:20px;color:var(--gray-747);font-size:11px;flex:0 0 auto}
.dt-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dt-wert{font-weight:600;flex:0 0 auto;font-variant-numeric:tabular-nums}
.dt-neben{color:var(--gray-747);font-size:11px;flex:0 0 auto;font-variant-numeric:tabular-nums}
.dt-leer{color:var(--gray-747);font-size:13px;margin:6px 0}
.dt-mehr{margin-top:8px;font-size:12px;padding:5px 10px}
/* Block 4: Zeitverlauf (zwei Balkenreihen, je eigene Skala) */
.dv-nav-kopf{display:flex;align-items:center;gap:14px;margin-top:26px;flex-wrap:wrap}
.dv-nav{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--gray-747)}
.dv-nav-btn{padding:2px 10px;font-size:15px;line-height:1.4;min-width:32px}
.dv-nav-btn:disabled{opacity:.4;cursor:default}
#dv-fenster{min-width:150px;text-align:center;font-variant-numeric:tabular-nums}
.dv-titel{font-size:12px;color:var(--gray-747);margin:12px 0 6px}
.dv-chart{height:150px;position:relative;overflow:hidden;
  background:var(--white);border:1px solid var(--gray-eb);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:10px 10px 24px}
.dv-titel + .dv-chart + .dv-titel + .dv-chart{height:90px}   /* zweite Reihe (Anzahl) flacher */
/* Spur mit ALLEN Balken; Blättern = transform-Verschiebung (sanftes Mitziehen) */
.dv-spur{display:flex;align-items:flex-end;height:100%;
  transition:transform .35s ease;will-change:transform}
/* Block G: wenige Balken mittig statt links angeklebt (slotW ist gedeckelt) */
.dv-spur.dv-mittig{justify-content:center}
.dv-balken{display:flex;flex-direction:column;justify-content:flex-end;
  height:100%;position:relative;box-sizing:border-box;padding:0 2px}
.dv-fill{background:var(--green);border-radius:4px 4px 0 0;min-height:2px}
.dv-xlbl{position:absolute;top:100%;left:50%;transform:translateX(-50%);
  font-size:10px;color:var(--gray-747);white-space:nowrap;margin-top:5px}
.dv-linie{position:absolute;left:6px;right:6px;border-top:2px dashed var(--gray-747);z-index:1;pointer-events:none}
.dv-vergleich{font-size:12px;color:var(--gray-747);margin-top:8px}
/* Blättern INNERHALB des Charts (jeder Balken beschriftet, Ausschnitt verschiebbar) */
.dv-scroll{display:flex;gap:8px;align-items:stretch}
.dv-scroll-mitte{flex:1;min-width:0}
.dv-scroll-btn{flex:0 0 34px;border:1px solid var(--gray-eb);background:var(--white);
  border-radius:var(--radius);font-size:18px;color:var(--gray-747);cursor:pointer;
  box-shadow:var(--shadow-sm)}
.dv-scroll-btn:hover:not(:disabled){background:var(--green-tint);color:var(--gray-333)}
.dv-scroll-btn:disabled{opacity:.35;cursor:default}
.dv-scroll-info{font-size:12px;color:var(--gray-747);margin-top:8px}
/* Block 5: Lieferanten-Performance (Tabellen-Raster) */
.perf-tab{background:var(--white);border:1px solid var(--gray-eb);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);overflow:hidden}
.perf-zeile{display:grid;grid-template-columns:minmax(140px,2fr) 1fr 1fr .7fr .7fr;
  gap:10px;padding:9px 14px;font-size:13px;border-bottom:1px solid var(--gray-eb);align-items:baseline}
.perf-zeile:last-child{border-bottom:0}
.perf-kopf{background:var(--gray-f6);font-size:11px;font-weight:700;color:var(--gray-747)}
.perf-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.perf-duenn{font-style:normal;font-size:10px;color:var(--gray-747);background:var(--gray-f6);
  border:1px solid var(--gray-eb);border-radius:var(--radius-pill);padding:1px 7px;margin-left:6px;white-space:nowrap}
.perf-spaet{color:#C0392B;font-weight:600}
@media(max-width:760px){
  .perf-zeile{grid-template-columns:minmax(100px,2fr) 1fr 1fr;font-size:12px}
  .perf-zeile span:nth-child(4),.perf-zeile span:nth-child(5){display:none}
}
/* Drill-down (Etappe 6): Alles mit data-drill öffnet die Bestellliste */
[data-drill]{cursor:pointer}
.metric-klick:hover,.metric-klick:focus-visible{border-color:var(--green);box-shadow:var(--shadow-md)}
/* Block G: klickbare Kacheln zeigen ein dezentes Chevron als Einladung */
.metric-klick{position:relative}
.metric-klick::after{content:'›';position:absolute;top:10px;right:12px;font-size:16px;line-height:1;color:var(--gray-747)}
.metric-klick:hover::after{color:var(--green)}
/* Block G: 0,00-€-Zeilen in den Top-Listen dimmen */
.dt-zeile.dt-null{opacity:.55}
.bar-row[data-drill]:hover,.perf-zeile[data-drill]:hover,.dt-zeile[data-drill]:hover{background:var(--green-tint)}
.dv-balken[data-drill]:hover .dv-fill{background:var(--green-dark)}
.dl-card{width:860px;max-width:calc(100vw - 32px)}
.dl-inhalt{margin:0 20px;border:1px solid var(--gray-eb);border-radius:var(--radius-sm);
  max-height:55vh;overflow:auto}
.dl-inhalt .auf-row:last-child{border-bottom:0}
.dl-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:14px 20px 0;font-size:13px;flex-wrap:wrap}
@media(max-width:1000px){.dash-metrics{grid-template-columns:repeat(2,1fr)}.dash-tops{grid-template-columns:1fr}}
@media(max-width:760px){
  /* Handy: Filter hinter dem Aufklapp-Knopf, Blöcke stapeln */
  .dash-filter{display:none}
  .dash-filter.offen{display:flex}
  .dash-filter-toggle{display:inline-flex}
  .dash-metrics{grid-template-columns:1fr}
  #dash-budget .bar-name{width:120px}
}

.auf-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--gray-eb);font-size:13px;background:var(--white)}
.auf-row:hover{background:var(--gray-f6)}
/* Spaltenüberschrift (Titelzeile über den Auftrags-Zeilen) */
.auf-head{background:var(--gray-f6);border-bottom:2px solid var(--gray-eb);
  font-size:11px;font-weight:700;text-transform:uppercase;color:var(--gray-747)}
.auf-head:hover{background:var(--gray-f6)}   /* kein Zeilen-Hover auf der Kopfzeile */
.auf-onr{width:64px;font-weight:700;flex:0 0 auto}
.auf-who{flex:1;color:var(--gray-747);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.auf-sum{width:90px;text-align:right;flex:0 0 auto}
.auf-badge{width:104px;text-align:center;flex:0 0 auto}
.auf-time{width:120px;text-align:right;flex:0 0 auto;color:var(--gray-747);font-size:12px}
@media(max-width:760px){
  .metrics{grid-template-columns:1fr}
  .auf-time,.auf-badge{display:none}
}

/* ===== Kostenstelle je Position (26.08.2026: Text statt Dauer-Dropdown) =====
   Die Zeile trägt nur noch den Wert; das Dropdown erscheint auf „ändern".
   Vorher standen bei drei Artikeln vier Auswahllisten für eine Angabe, die
   fast immer für alle gleich ist – alle vier rot, bevor jemand etwas falsch
   gemacht hatte. Die eine Pflichtstelle ist jetzt die Standard-Kostenstelle. */
.wk-kst-zeile{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:6px;font-size:var(--fs-s)}
.wk-kst-wert{color:var(--gray-55)}
.wk-kst-wert.abweichend{color:var(--gray-333);font-weight:600}
.wk-kst-wert em{font-style:normal;font-weight:400;color:var(--gray-747)}
.wk-kst-fehlt{display:inline-flex;align-items:center;gap:4px;color:var(--warn-text);font-weight:600}
.wk-kst-aendern{font-size:var(--fs-s)}
.wk-kst-lbl{display:block;font-size:12px;color:var(--gray-55);margin-top:6px}   /* Block F: Schriftboden */
.wk-kst{display:block;width:100%;height:34px;padding:0 8px;margin-top:2px;
  border:1px solid var(--gray-eb);border-radius:var(--radius);
  font-size:13px;font-family:var(--font-family);background:var(--white)}
.wk-kst:focus{outline:none;border-color:var(--green)}
#wk-standard-kst{display:block;width:100%;height:var(--input-height);padding:0 10px;margin-top:4px;
  border:1px solid var(--gray-eb);border-radius:var(--radius);font-size:14px;font-family:var(--font-family);background:var(--white)}
/* Eigene Regel nötig: Die ID-Auswahl oben schlägt die allgemeine
   .hat-fehler-Regel (Zeile 469) in der Spezifität. Seit dem Umbau 26.08.2026
   ist das hier die EINE Pflichtstelle des Warenkorbs – sie muss sich färben. */
#wk-standard-kst.hat-fehler{border-color:var(--error)}
#wk-standard-kst:focus{outline:none;border-color:var(--green)}

/* ===== Verwaltung: Unter-Reiter ===== */
.vw-subtabs{display:flex;gap:2px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
  border-bottom:2px solid var(--gray-eb);margin-bottom:16px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.vw-subtab{flex:0 0 auto;white-space:nowrap;background:none;border:none;border-bottom:3px solid transparent;padding:10px 12px;
  font-family:var(--font-family);font-size:13px;font-weight:700;text-transform:uppercase;
  color:var(--gray-747);cursor:pointer;margin-bottom:-2px}
.vw-subtab:hover{color:var(--gray-333)}
.vw-subtab.aktiv{color:var(--green);border-bottom-color:var(--green)}
.vw-subtab-sep{flex:0 0 auto;white-space:nowrap;align-self:center;font-size:11px;font-weight:700;text-transform:uppercase;color:var(--gray-747);padding:0 4px 0 8px}
/* Verwaltung etwas breiter, damit die Reiter-Leiste in eine Zeile passt (und Formulare mehr Platz haben) */
#ansicht-verwaltung .ek-wrap{max-width:1120px}

/* Inline-Icons */
.ic{display:inline-block;vertical-align:middle;flex:0 0 auto}

/* ===== Verwaltung: Start / Schnellaktionen ===== */
.vw-intro{font-size:13px;color:var(--gray-747);line-height:1.6;margin:0 0 18px;max-width:68ch}
.vw-cards{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:22px}
@media(min-width:560px){.vw-cards{grid-template-columns:repeat(2,1fr)}}
.vw-card-action{display:flex;flex-direction:column;gap:9px;text-align:left;background:var(--white);
  border:1px solid var(--gray-eb);border-left:3px solid var(--green);padding:18px;cursor:pointer;
  font-family:var(--font-family);transition:box-shadow .16s ease,transform .16s ease,border-color .16s ease}
.vw-card-action:hover{box-shadow:0 6px 20px rgba(1,129,55,.10);transform:translateY(-2px)}
.vw-card-action:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.vwc-badge{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  background:var(--green);color:var(--white)}
.vwc-titel{font-size:15px;font-weight:700;color:var(--gray-333)}
.vwc-text{font-size:12.5px;color:var(--gray-747);line-height:1.5}
/* Überblick als Stat-Tiles (tabellarische Zahlen, kein Fließtext) */
.vw-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:10px;margin-bottom:16px}
/* Block G: Zähler-Kacheln sind jetzt Buttons (führen in die Stammdaten-Liste) */
.vw-stat{background:var(--gray-f6);border:1px solid var(--gray-eb);border-top:2px solid var(--green);padding:12px 14px;
  display:flex;flex-direction:column;align-items:flex-start;cursor:pointer;font-family:var(--font-family);text-align:left}
.vw-stat:hover{background:var(--white);box-shadow:var(--shadow-sm)}
.vw-stat:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.vw-stat-n{font-size:24px;font-weight:800;color:var(--gray-333);line-height:1;font-variant-numeric:tabular-nums}
.vw-stat-l{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--gray-747);margin-top:5px}
.vw-ablauf{background:var(--gray-f6);border-left:3px solid var(--green);padding:11px 13px;font-size:13px;
  color:var(--gray-333);line-height:1.6}

/* ===== Verwaltung: Assistenten ===== */
.wiz-back{display:inline-flex;align-items:center;gap:4px;background:none;border:none;color:var(--green);
  cursor:pointer;font-family:var(--font-family);font-size:13px;font-weight:700;padding:2px 0}
.wiz-back:hover{text-decoration:underline}
.wiz-back:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.wiz-titel{font-size:16px;text-transform:uppercase;font-weight:700;color:var(--gray-333);margin:10px 0 4px}
.wiz-add{display:inline-flex;align-items:center;gap:5px;margin-top:4px}
.wiz{max-width:640px}
.wiz > label{display:block;font-size:13px;font-weight:700;color:var(--gray-333);margin:12px 0 0}
.wiz > label > input{display:block;width:100%;height:var(--input-height);padding:0 12px;margin-top:4px;
  border:1px solid var(--gray-eb);border-radius:var(--radius);font-size:14px;font-family:var(--font-family);background:var(--white)}
.wiz > label > input:focus{outline:none;border-color:var(--green)}
.wiz > label.chk{font-weight:400;display:flex;align-items:center;gap:6px}
.wiz > label.chk > input{width:16px;height:16px;margin-top:0;accent-color:var(--green)}
.wiz-feld{display:flex;gap:12px;margin-top:14px;align-items:flex-start}
.wiz-feld > .uv-lbl{width:100px;flex:0 0 auto}
.wiz-feld > div{flex:1;min-width:0}
.wiz .btn-primary{margin-top:18px}
.wiz-filter{width:100%;max-width:280px;height:36px;padding:0 10px;margin-bottom:8px;
  border:1px solid var(--gray-eb);font-size:13px;font-family:var(--font-family);background:var(--white)}
.wiz-filter:focus{outline:none;border-color:var(--green)}
.wv-add{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.wv-add select{height:var(--input-height);border:1px solid var(--gray-eb);padding:0 8px;
  font-family:var(--font-family);font-size:14px;background:var(--white);min-width:160px}
.wv-grp{margin-bottom:10px}
.wv-grp > strong{display:block;font-size:13px;margin-bottom:4px}
.wb-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.wb-row input[type=text],.wb-row input:not([type]){flex:1;min-width:120px;height:38px;padding:0 10px;
  border:1px solid var(--gray-eb);font-size:13px;font-family:var(--font-family);background:var(--white)}
.wb-row-del{display:inline-flex;align-items:center;justify-content:center;background:none;border:1px solid var(--gray-eb);
  color:var(--error);cursor:pointer;width:34px;height:34px;flex:0 0 auto}
.wb-row-del:hover{border-color:var(--error);background:var(--gray-f6)}

/* Barrierefreiheit: sichtbare Fokus-Ringe in der Verwaltung + Reduced Motion */
#vw-content .btn:focus-visible,#vw-content input:focus-visible,#vw-content select:focus-visible,
#vw-content .wb-row-del:focus-visible,#vw-content .gv-remove:focus-visible{outline:2px solid var(--green);outline-offset:1px}
#vw-content input:focus,#vw-content select:focus{border-color:var(--green)}
@media (prefers-reduced-motion: reduce){
  .vw-card-action{transition:none}
  .vw-card-action:hover{transform:none}
}

/* ===== Benutzer-/Gruppen-Karten ===== */
.uv-card{background:var(--white);border:1px solid var(--gray-eb);margin-bottom:10px}
.uv-card.inaktiv{background:var(--gray-f6)}
.uv-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:12px 14px}
.uv-fn{color:var(--gray-747);font-size:13px;margin-left:8px}
.uv-inaktiv{color:var(--error);font-style:normal;font-size:12px;margin-left:6px}
.uv-mail{font-size:12px;color:var(--gray-747);margin-top:3px}
.uv-act{display:flex;gap:8px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}
.uv-body{padding:0 14px 14px;border-top:1px solid var(--gray-eb)}
.uv-zeile{display:flex;gap:12px;margin-top:12px;align-items:flex-start}
.uv-lbl{width:90px;flex:0 0 auto;font-size:12px;font-weight:700;text-transform:uppercase;color:var(--gray-747);padding-top:3px}
.chk-row{display:flex;gap:14px;flex-wrap:wrap}
.chk{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--gray-333);cursor:pointer}
.chk input{width:16px;height:16px;accent-color:var(--green);cursor:pointer}
.uv-vorschau{margin-top:14px;background:var(--gray-f6);border-left:3px solid var(--green);
  padding:10px 12px;font-size:13px;color:var(--gray-333);line-height:1.6}
.gv-members{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.gv-member{display:inline-flex;align-items:center;gap:6px;background:var(--gray-f6);
  border:1px solid var(--gray-eb);padding:3px 6px 3px 10px;font-size:13px}
.gv-remove{background:none;border:none;color:var(--error);cursor:pointer;font-size:13px;padding:0 2px;font-weight:700}
.gv-add-member select{height:36px;border:1px solid var(--gray-eb);padding:0 8px;font-family:var(--font-family);font-size:13px;background:var(--white)}

/* ===== Lieferadressen-/Kostenstellen-Bearbeitung ===== */
.vw-edit-panel{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:10px 14px;border-top:1px solid var(--gray-eb);background:var(--gray-f6)}
.vw-edit-panel input,.vw-edit-panel select{height:38px;padding:0 10px;border:1px solid var(--gray-eb);
  font-family:var(--font-family);font-size:13px;background:var(--white);flex:1;min-width:140px}
.vw-actions select{height:34px;border:1px solid var(--gray-eb);padding:0 6px;font-family:var(--font-family);font-size:12px;background:var(--white);max-width:220px}
.kv-filter{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.kv-filter input,.kv-filter select{height:40px;padding:0 10px;border:1px solid var(--gray-eb);
  font-family:var(--font-family);font-size:14px;background:var(--white)}
.kv-filter input{flex:1;min-width:180px}
.kv-filter input:focus,.kv-filter select:focus{outline:none;border-color:var(--green)}

/* =====================================================================
   Apple-Soft-Refresh (app-weit): weiche Ecken, sanfte Schatten,
   ruhigere Überschriften/Tabs, Pill-Badges, runde Eingabefelder.
   LOEWE-Grün + Open Sans bleiben als Identität.
   ===================================================================== */
/* Karten-/Flächen bekommen weiche Ecken + dezente Elevation */
.karte,.q-card,.uv-card,.metric,.we-group,.sidebar,.vw-stat,
.ck-zusammenfassung,.ue-dup,.vw-ablauf,.uv-vorschau,.vw-card-action,
.vw-edit-panel,.reject,.gv-member{border-radius:var(--radius)}
.karte,.q-card,.uv-card,.metric,.sidebar{box-shadow:var(--shadow-sm);border-color:var(--gray-eb)}
.karte{transition:box-shadow .16s ease,transform .16s ease}
.karte:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.modal-card{border-top:1px solid var(--gray-eb);box-shadow:var(--shadow-md)}
.drawer{box-shadow:var(--shadow-md)}
.toast{border-radius:var(--radius);box-shadow:var(--shadow-md);font-weight:600}
/* Kleine Marker als Pillen */
.gruppe-tag,.status-badge,.flag,.wk-wunsch,.tab-badge{border-radius:var(--radius-pill)}
/* Überschriften/Tabs ruhiger (kein Uppercase), etwas größer */
.ek-h,.wiz-titel,.vw-subtab{text-transform:none;letter-spacing:0}
.ek-h,.wiz-titel{font-size:16px}
h2{letter-spacing:0}
/* Eingabefelder app-weit runden + einheitlicher Fokus */
.vw-add input,.vw-edit-panel input,.vw-edit-panel select,.kv-filter input,.kv-filter select,
.wb-row input,.wv-add select,.wiz-filter,.wk-standard select,.wk-kst,.wk-menge,
.gv-add-member select,.vw-actions select,.dev-user,#wk-standard-kst,.wb-row-del{border-radius:var(--radius-sm)}
input:focus,select:focus,textarea:focus{outline:none}
/* Sidebar-Einträge als weiche Zeilen (Apple-Sidebar-Anmutung) */
.sidebar li{border-bottom:none;border-radius:var(--radius-sm);margin-bottom:2px}
/* Sekundär-Buttons global etwas weicher */
.icon-btn:hover,.wk-entf:hover,.fav-toggle{transition:color .15s ease}
@media (prefers-reduced-motion: reduce){
  .karte,.karte:hover,.primary-btn,.ghost-btn,.btn,.karte .add{transition:none;transform:none}
  .dv-spur{transition:none}   /* Chart-Blättern ohne Wisch-Animation */
}

/* =========================================================
   Bestellen-Dialog + Angebot erfassen (Block C)
   ========================================================= */
.best-sum{background:var(--gray-f6);border-radius:var(--radius-sm);padding:10px 12px;margin-bottom:12px}
/* Wunschtermin des Bestellers im Bestellen-Dialog – erklärt den vorbelegten Liefertermin darunter */
.best-termin{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--gray-747);margin-top:4px}
.best-termin.hat-termin{color:var(--gray-333);font-weight:600}
.best-termin.hat-termin .ic{color:var(--green)}
.best-empf{font-weight:600;padding:8px 12px;border-radius:var(--radius-sm);background:var(--green-tint);margin-bottom:10px}
.best-empf.warn{background:var(--error-bg);color:var(--error);font-weight:700}
.best-testnote{font-size:12px;background:#fff7e6;border:1px solid #ffe1a8;color:#8a5a00;border-radius:var(--radius-sm);padding:7px 10px;margin-bottom:12px}
.best-optionen{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 8px}
.best-optionen .btn{flex:1 1 160px}
.best-lbl{display:block;font-size:13px;font-weight:700;margin:12px 0 4px}
.best-lbl input,.best-lbl textarea{width:100%;box-sizing:border-box;font-family:inherit;font-size:14px;padding:9px 11px;border:1px solid var(--gray-eb);border-radius:var(--radius-sm)}
.best-lbl textarea{resize:vertical;line-height:1.5}
/* Angebot erfassen: Banner, wenn ein Checkout-Anhang übernommen wird */
.ag-uebernahme{display:flex;gap:7px;align-items:flex-start;margin:0 0 12px;padding:9px 11px;font-size:13px;line-height:1.5;
  background:var(--green-tint);border-radius:var(--radius-sm);color:var(--gray-333)}
.ag-uebernahme .ic{flex:0 0 auto;color:var(--green);margin-top:1px}
.ag-uebernahme a{color:var(--green);font-weight:600;word-break:break-all}
.best-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
/* Block E (UI-Feinschliff): Speichern-Knopf der Einstellungen bleibt am unteren
   Rand sichtbar (lange Liste, Dirty-Zustand nicht aus dem Blick verlieren) */
.einst-actions{position:sticky;bottom:0;background:var(--white);padding:10px 0;margin-top:8px;border-top:1px solid var(--gray-eb)}
.best-pdfrow{display:flex;align-items:center;gap:12px;margin-top:12px}
.best-vk{margin-bottom:6px}
.best-vk-titel{font-size:16px;font-weight:700;margin-bottom:4px}
.ag-pos{width:100%;border-collapse:collapse;margin:12px 0}
.ag-pos th,.ag-pos td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--gray-eb);font-size:13px}
.ag-pos th.r,.ag-pos td.r{text-align:right}
.ag-pos input{border:1px solid var(--gray-eb);border-radius:6px;padding:5px 7px;font-size:13px}
/* Einstellungen-Editor (Verwaltung) */
.einst-grid{display:grid;gap:14px;max-width:760px}
.einst-grid label{display:block;font-size:13px;font-weight:700;margin-bottom:4px}
.einst-grid input,.einst-grid textarea{width:100%;box-sizing:border-box;font-family:inherit;font-size:14px;padding:9px 11px;border:1px solid var(--gray-eb);border-radius:var(--radius-sm)}
.einst-grid textarea{resize:vertical;line-height:1.5}
.einst-sekt{font-size:15px;font-weight:700;margin:18px 0 2px;border-top:1px solid var(--gray-eb);padding-top:14px}
.einst-check{display:flex;align-items:center;gap:8px;font-weight:600}
.einst-check input{width:auto}

/* Info-Zeichen am Feld (Investitions-Auftrag 07.08.2026): kleines ⓘ, dessen
   Erklärtext sich ANTIPPEN lässt (Blase, siehe app.js) – Hover allein gibt es
   auf dem Handy nicht. Die Blase liegt über allem (Modal-Deckel ist 100). */
.feld-label-zeile{display:inline-flex;align-items:center;gap:5px}
.info-icon{display:inline-flex;align-items:center;justify-content:center;border:none;background:none;
  padding:2px;margin:0;color:var(--green);cursor:pointer;vertical-align:middle;border-radius:var(--radius-pill)}
.info-icon:hover{color:var(--green-dark);background:var(--green-tint)}
.info-icon .ic{display:block}
.info-blase{position:fixed;z-index:120;max-width:320px;background:var(--white);color:var(--gray-333);
  border:1px solid var(--gray-eb);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);
  padding:10px 12px;font-size:var(--fs-m);font-weight:400;line-height:1.5}

/* =========================================================
   Freigaben: Status-Filter-Chips (eine Liste statt Abschnitte)
   ========================================================= */
.fg-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.fg-chip{display:inline-flex;align-items:center;gap:7px;background:var(--white);color:var(--gray-333);
  border:1px solid var(--gray-eb);border-radius:var(--radius-pill);padding:7px 14px;font-size:13px;
  font-weight:600;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease}
.fg-chip:hover{border-color:var(--green);color:var(--green)}
.fg-chip.aktiv{background:var(--green);border-color:var(--green);color:var(--white)}
.fg-chip .fg-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;
  padding:0 6px;border-radius:var(--radius-pill);background:var(--gray-eb);color:var(--gray-333);font-size:12px;font-weight:700}
.fg-chip.aktiv .fg-count{background:rgba(255,255,255,.25);color:var(--white)}

/* Benutzer-Stammdaten-Editor (Verwaltung > Benutzer) */
.uv-stamm{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:6px}
.uv-stamm input{flex:1 1 180px;min-width:140px;font-size:14px;padding:8px 10px;border:1px solid var(--gray-eb);border-radius:var(--radius-sm)}
.uv-stamm .btn{flex:0 0 auto}

/* Budget je Person (Verwaltung > Benutzer). Wrapper, damit der Hinweis UNTER den
   Feldern steht und nicht neben ihnen (.uv-zeile ist eine Flex-Zeile). */
.uv-budget-wrap{flex:1;min-width:0}
.uv-budget{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin-bottom:6px}
.uv-budget-feld{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--gray-747)}
.uv-budget-feld input,.uv-budget-feld select{font-size:14px;padding:8px 10px;
  border:1px solid var(--gray-eb);border-radius:var(--radius-sm);
  font-family:var(--font-family);background:var(--white);color:var(--gray-333)}
.uv-budget-feld input{width:130px}
.uv-budget-feld select{width:120px}
.uv-budget .btn{flex:0 0 auto}
.uv-budget-wrap .hinweis-klein{max-width:640px}

/* ===== Phase 4: Anmeldung, Nutzer-Menü, Dev-Umschalter ===== */

/* Solange nicht angemeldet: die komplette App ausblenden, nur der Login-Bildschirm
   bleibt stehen. Verhindert, dass Katalog/Reiter kurz durchblitzen. */
body.nicht-angemeldet > *:not(#login-screen){display:none !important}
body:not(.nicht-angemeldet) #login-screen{display:none}

.login-screen{
  position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  padding:20px;background:var(--gray-f6);overflow-y:auto;
}
.login-card{
  width:400px;max-width:100%;background:var(--white);border:1px solid var(--gray-eb);
  border-radius:var(--radius);box-shadow:var(--shadow-md);padding:28px 26px 22px;
}
.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.login-brand .brand-signet{height:46px;width:auto;border-radius:4px}
.login-brand .brand-text{display:flex;flex-direction:column;line-height:1.15}
.login-titel{font-size:22px;font-weight:700;color:var(--black);margin:0 0 4px}
.login-sub{font-size:13px;color:var(--gray-747);margin:0 0 18px}
/* .form bringt aus den Modals eine Innenabstand-Regel mit – auf der Login-Karte
   sorgt die für eine Einrückung gegenüber der Überschrift. Hier zurücksetzen. */
.login-card .form{padding:0}
.login-hilfe{margin-top:14px;padding:0}
/* Firmenkonto-Anmeldung (Entra ID, Phase 8) – nur sichtbar, wenn konfiguriert */
.oauth-trenner{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--gray-747);font-size:12px}
.oauth-trenner::before,.oauth-trenner::after{content:"";flex:1;height:1px;background:var(--gray-eb)}
.oauth-btn{
  background:var(--white);border:1px solid var(--gray-eb);color:var(--black);border-radius:var(--radius);
  padding:var(--btn-padding);font-size:15px;font-weight:600;cursor:pointer;font-family:var(--font-family);
  transition:background .15s ease,border-color .15s ease,transform .08s ease;
}
.oauth-btn:hover{background:var(--green-tint);border-color:var(--green-tint)}
.oauth-btn:active{transform:scale(.985)}
.oauth-btn.full{width:100%}
.oauth-btn:disabled{color:var(--gray-747);cursor:default}
.login-fehler{
  background:var(--error-bg);border:1px solid var(--error-border);color:var(--error);
  border-radius:var(--radius-sm);padding:9px 12px;font-size:13px;
}

/* Nutzer-Menü (Chip mit Klapp-Menü: Passwort ändern / Abmelden) */
.user-menu{position:relative;display:flex;align-items:center}
button.user-chip{
  border:1px solid transparent;background:none;font-family:var(--font-family);
  font-size:12px;color:var(--gray-747);cursor:pointer;padding:5px 10px;
  border-radius:var(--radius-pill);max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
button.user-chip:hover{background:var(--green-tint);color:var(--green)}
.user-menu-pop{
  position:absolute;top:calc(100% + 6px);right:0;z-index:60;min-width:190px;
  background:var(--white);border:1px solid var(--gray-eb);border-radius:var(--radius);
  box-shadow:var(--shadow-md);padding:6px;display:flex;flex-direction:column;gap:2px;
}
.um-eintrag{
  border:none;background:none;font-family:var(--font-family);font-size:14px;
  color:var(--gray-333);text-align:left;padding:9px 12px;border-radius:var(--radius-sm);cursor:pointer;
}
.um-eintrag:hover{background:var(--gray-f6)}
.um-logout{color:var(--error)}

/* Benachrichtigungen (Auftrag 26.07., Block A): Glocke + Liste.
   Handytauglich: große Trefferflächen (min. 44px), keine Hover-Only-Bedienung.
   Glocke + Zahnrad sitzen oben rechts in der Kopfzeile auf Höhe des Warenkorbs
   (Rückmeldung Felix 26.07.). */
.glocke-wrap,.einstellungen-wrap{position:relative;display:inline-flex}
/* Ganz nach rechts: der auto-Rand schiebt Glocke + Zahnrad an den Fensterrand
   und schafft zugleich den Abstand zum Warenkorb (Rückmeldung Felix). */
.glocke-wrap{margin-left:auto}
.kopf-icon-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:var(--input-height);height:var(--input-height);flex:0 0 auto;
  border:1px solid var(--gray-eb);border-radius:var(--radius);background:var(--white);
  color:var(--gray-333);cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
/* Hover wie der Warenkorb-Button (grüne Tönung) */
.kopf-icon-btn:hover{background:var(--green-tint);border-color:var(--green-tint);color:var(--green)}
.kopf-icon-btn:active{transform:scale(.97)}
.kopf-icon-btn:focus-visible{outline:2px solid var(--green);outline-offset:2px}
/* Roter Punkt am Zahnrad: etwas braucht Aufmerksamkeit (z. B. Startpasswort in Gebrauch) */
.zahnrad-punkt{
  position:absolute;top:-3px;right:-3px;width:12px;height:12px;border-radius:50%;
  background:var(--error);border:2px solid var(--white);
}
.um-punkt{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--error);margin-left:8px;vertical-align:middle;
}

/* Nutzer-Info als Kopf des Einstellungs-Menüs (ersetzt den Nutzer-Chip) */
.einstellungen-wrap .user-menu-pop{min-width:230px}
.um-userinfo{
  display:flex;flex-direction:column;gap:1px;
  padding:10px 12px 9px;border-bottom:1px solid var(--gray-eb);margin-bottom:4px;
}
.um-name{font-weight:700;font-size:14px;color:var(--gray-333)}
.um-detail{font-size:12.5px;color:var(--gray-747)}
.glocke-badge{
  position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--error);color:var(--white);font-size:11px;font-weight:700;
  border-radius:var(--radius-pill);border:2px solid var(--white);line-height:1;
}
.glocke-pop{
  position:absolute;top:calc(100% + 6px);right:0;z-index:60;
  width:min(400px,calc(100vw - 24px));max-height:min(520px,70vh);
  display:flex;flex-direction:column;
  background:var(--white);border:1px solid var(--gray-eb);border-radius:var(--radius);
  box-shadow:var(--shadow-md);overflow:hidden;
}
.glocke-kopf{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:12px 14px;border-bottom:1px solid var(--gray-eb);
  font-weight:700;font-size:14px;color:var(--gray-333);
}
.glocke-alle{
  border:none;background:none;font-family:var(--font-family);font-size:13px;
  color:var(--green);cursor:pointer;padding:6px 8px;border-radius:var(--radius-sm);
  min-height:32px;
}
.glocke-alle:hover{background:var(--green-tint)}
.glocke-liste{overflow-y:auto}
.glocke-leer{color:var(--gray-747);padding:18px 14px;margin:0;font-size:14px}
.glocke-zeile{
  display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;
  border:none;background:none;font-family:var(--font-family);cursor:pointer;
  padding:12px 14px;min-height:44px;border-bottom:1px solid var(--gray-f6);
}
.glocke-zeile:hover{background:var(--gray-f6)}
.glocke-punkt{
  flex:0 0 8px;width:8px;height:8px;border-radius:50%;margin-top:6px;
  background:transparent;
}
.glocke-zeile.ungelesen .glocke-punkt{background:var(--green)}
.glocke-inhalt{display:flex;flex-direction:column;gap:2px;min-width:0}
.glocke-titel{font-size:14px;color:var(--gray-333)}
.glocke-zeile.ungelesen .glocke-titel{font-weight:700}
.glocke-text{font-size:13px;color:var(--gray-747)}
.glocke-zeit{font-size:12px;color:var(--gray-747)}
/* Einstellungs-Dialog: Zeilen mit Kipp-Schaltern (Apple-soft statt nackter Häkchen) */
.benach-sekt{
  font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--gray-747);margin:14px 0 2px;
}
.benach-sekt:first-child{margin-top:0}
/* Spezifität ".form label.benach-zeile": die generische .form-label-Regel
   (Spalte, grau, fett) darf die Schalter-Zeilen nicht überstimmen. */
.form label.benach-zeile{
  display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:14px;
  min-height:48px;padding:8px 2px;border-bottom:1px solid var(--gray-f6);cursor:pointer;
  font-weight:400;color:var(--gray-333);
}
.benach-zeile-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.benach-zeile-titel{font-size:14.5px;color:var(--gray-333)}
.benach-zeile-hinweis{font-size:12.5px;color:var(--gray-747)}
.schalter{position:relative;flex:0 0 auto;width:46px;height:28px}
.schalter input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.schalter-bahn{
  display:block;width:46px;height:28px;border-radius:var(--radius-pill);
  background:var(--schalter-grau);transition:background .18s;pointer-events:none;
}
.schalter-bahn::after{
  content:'';position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;
  background:var(--white);box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .18s;
}
.schalter input:checked + .schalter-bahn{background:var(--green)}
.schalter input:checked + .schalter-bahn::after{transform:translateX(18px)}
.schalter input:focus-visible + .schalter-bahn{outline:2px solid var(--green);outline-offset:2px}
/* Block G: gesperrte Schalter (Pflicht-Ereignisse "immer aktiv") sichtbar ausgrauen */
.schalter input:disabled + .schalter-bahn{opacity:.45;cursor:not-allowed}
/* Erinnerungs-Schwelle (nur für Admins sichtbar, eigene Zeile unter der Überfällig-Zeile) */
.benach-schwelle-zeile{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  font-size:12.5px;color:var(--gray-747);padding:8px 2px 10px;border-bottom:1px solid var(--gray-f6);
}
.form .benach-schwelle-zeile input{width:64px;height:34px;padding:0 8px;text-align:center}
@media (prefers-reduced-motion: reduce){
  .schalter-bahn,.schalter-bahn::after{transition:none}
}

/* Sprungziel nach Klick auf eine Benachrichtigung kurz hervorheben */
.benach-hervor{outline:2px solid var(--green);outline-offset:2px;transition:outline-color .4s}
@media (prefers-reduced-motion: reduce){
  .benach-hervor{transition:none}
}

/* Dev-Umschalter: deutlich als Entwicklungs-Werkzeug markiert. */
.dev-user-wrap{display:inline-flex;align-items:center;gap:6px}
.dev-marke{
  font-size:10px;font-weight:800;letter-spacing:.06em;color:var(--warning);
  border:1px solid var(--warning);border-radius:var(--radius-pill);padding:1px 6px;
}

/* Feld, das nur anzeigt (Besteller kommt aus dem Login) */
.feld-fest{background:var(--gray-f6);color:var(--gray-747);cursor:default}

/* Startpasswort-Anzeige (Verwaltung > Benutzer, Block D) */
.initpw-box{
  display:flex;align-items:center;gap:10px;margin:0 20px 12px;padding:14px 16px;
  background:var(--green-tint);border:1px solid var(--gray-eb);border-radius:var(--radius);
}
.initpw-box code{
  flex:1;font-family:Consolas,"Courier New",monospace;font-size:19px;font-weight:700;
  letter-spacing:.06em;color:var(--black);word-break:break-all;
}

/* Erfassungsnachweis am Wareneingang (Auftrag 24.08.2026) – ein Block, drei
   Anzeigestellen (Meine Bestellungen, Erledigt-Chip, Queue-Karte). Bewusst
   ruhig gehalten: Das ist ein Beleg, kein Hinweis, der um Aufmerksamkeit
   ringen soll. */
.nachweis{margin-top:10px;padding:9px 11px;border:1px solid var(--gray-eb);
  border-left:3px solid var(--green);border-radius:var(--radius-sm);background:var(--gray-f6)}
.nachweis + .nachweis{margin-top:6px}
.nachweis-kopf{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--green)}
.nachweis-zeile{font-size:12px;color:var(--gray-333);margin-top:2px}
.nachweis-datei{margin-top:5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nachweis-hinweis{font-size:11px;color:var(--gray-747);font-style:italic}
.nachweis-datei + .nachweis-hinweis{display:block;margin-top:5px}
/* Lieferanten-Konflikt beim Ergänzen einer Position (Auftrag 24.08.2026).
   Sitzt INNERHALB der neuen Positionszeile, deshalb etwas schmaler als die
   Warnstufen am Dialogkopf. */
.be-warn-lieferant{margin:8px 0 0;font-size:12px;padding:8px 10px}

/* Wareneingang beanstanden (Auftrag 24.08.2026).
   Positionszeilen sind jetzt DIVs statt LIs (Muster be-pos), damit je Zeile
   ein Mangel-Häkchen und eine Menge hängen können. Im Normalweg sieht das
   aus wie die frühere Liste – die Mangel-Felder sind hidden. */
.we-pos{font-size:13px;color:var(--gray-333);padding:3px 0}
.we-pos.erhalten{color:var(--green)}
.we-pos.beanstandet{color:var(--error)}
.we-pos-kopf{display:flex;align-items:flex-start;gap:7px;cursor:default}
.we-pos-kopf input[type=checkbox]{margin-top:3px;flex:0 0 auto;cursor:pointer}
.we-pos-kst{color:var(--gray-747)}
.we-mg-mengewrap{margin:4px 0 6px 24px;max-width:180px}
.we-mangel{margin-top:10px;padding:11px 12px;border:1px solid #F2C4BD;border-radius:var(--radius-sm);background:#FDEEEC}
.we-mini{display:block;font-size:12px;color:var(--gray-747);margin-bottom:8px}
.we-mini select,.we-mini input,.we-mini textarea{display:block;width:100%;margin-top:3px;
  border:1px solid var(--gray-eb);border-radius:var(--radius-sm);padding:8px 10px;
  font:inherit;font-size:13px;background:var(--white)}
.we-mini textarea{resize:vertical}
.we-mini select:focus,.we-mini input:focus,.we-mini textarea:focus{outline:none;border-color:var(--green)}
#we-mangel-btn{margin-top:8px}

/* Beanstandungs-Block auf den Karten – rot statt grün, sonst wie der Nachweis. */
.status-badge.b-beanstandet{background:#FDEEEC;color:var(--error);border:1px solid #F2C4BD}
.mangel{margin-top:10px;padding:9px 11px;border:1px solid #F2C4BD;
  border-left:3px solid var(--error);border-radius:var(--radius-sm);background:#FDEEEC}
.mangel + .mangel{margin-top:6px}
.mangel-kopf{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--error)}
.mangel-pos{font-size:12px;color:var(--gray-333);margin-top:3px;font-weight:600}
.mangel-text{font-size:12px;color:var(--gray-333);margin-top:4px;white-space:pre-wrap}
/* Reklamation an den Lieferanten (Teil 2, 24.08.2026): abgesetzte Fußzeile im
   Mangel-Block – Knopf vor dem Versand, Nachweiszeile danach. Nur Freigeber
   sehen sie, deshalb bewusst dezent statt als weiterer Aktionsknopf. */
.mangel-mail{margin-top:7px;padding-top:6px;border-top:1px dashed #E3B0A8;
  font-size:12px;color:var(--gray-333);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.mangel-mail .link-btn{font-size:12px}
.mangel-mail svg{flex:0 0 auto}