/* Sunnseit Warenwirtschaft -- Backoffice (kein Offline-Zwang). Nutzt styles.css. */
/* body.bo = WaWi (backoffice.html); body.bo-body = alle eigenstaendigen
   Module-Apps (Kisterl, Etiketten-Studio, Kochplaner, Aktions-Studio, MHD-
   Warner, Gemueseplaner, Pilzplaner, Hof, Biokontrolle, Lieferdaten,
   Plakat-Studio). Ohne diese Zeile erben ALLE diese Seiten die
   Kassa-Grundregel body{height:100vh;overflow:hidden} aus styles.css (fuer
   den Registrierkassen-Bildschirm gedacht) -- Inhalt laenger als der
   Bildschirm liess sich dann gar nicht mehr scrollen (Befund Andrea
   06.09.2026, Beispiel Aktions-Studio). */
body.bo, body.bo-body { display: block; height: auto; min-height: 100vh; overflow: auto; }
/* Kein Wegrutschen beim Neuaufbau (Befund Andrea 01.09.: "wenn man was
   druckt oder oeffnet, rutscht die Ansicht weg"). Zwei Ursachen, zwei Mittel:
   1) Der Rollbalken verschwindet, sobald eine Ansicht kuerzer wird — die
      Seite springt dann seitlich und wirkt "verrutscht". `scrollbar-gutter`
      haelt den Platz frei.
   2) Beim Neuzeichnen einer Liste soll der Browser die Scrollposition
      behalten statt nach oben zu springen. */
html { scrollbar-gutter: stable; overflow-anchor: auto; }
.bo-tabelle-huelle, .stamm-liste, .bo-ansicht { overflow-anchor: auto; }
.pill.link { text-decoration: none; color: #fff; }
.bo-main { max-width: 1000px; margin: 0 auto; padding: 16px; }
.bo-nav { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.bo-tab { padding: 9px 16px; border: 1px solid var(--linie); border-radius: 999px; background: var(--karte); color: var(--tinte); cursor: pointer; font-size: 14px; }
.bo-tab.aktiv { background: var(--gruen); color: #fff; border-color: var(--gruen); }

/* Q1: ab Tablet/Desktop Menue als Seitenleiste links (JS/HTML unveraendert). */
@media (min-width: 900px) {
  .bo-main {
    max-width: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: 208px minmax(0, 1fr); align-items: start;
  }
  .bo-nav {
    /* „1 / -1" bezieht sich auf das EXPLIZITE Grid — das hier hat keine
       definierten Zeilen, also wurde daraus nur Zeile 1, und die 100vh hohe
       Seitenleiste blies genau diese Zeile auf: auf JEDER WaWi-Seite stand
       oben ein leerer Block, der Inhalt begann erst nach ~650 px Scrollen
       (Befund Andrea 01.09.). Ein grosszuegiger span loest das. */
    grid-column: 1; grid-row: 1 / span 99; align-self: stretch;
    position: sticky; top: 0; max-height: 100vh; overflow-y: auto;
    flex-direction: column; flex-wrap: nowrap; gap: 3px; margin: 0;
    padding: 12px 10px; background: var(--karte); border-right: 1px solid var(--linie);
    z-index: 20;
  }
  .bo-main > :not(.bo-nav) { grid-column: 2; }
  /* jede sichtbare Ansicht bekommt den Innenabstand, den frueher .bo-main hatte */
  .bo-main > .bo-ansicht { padding: 16px; max-width: 1100px; }
  .bo-tab {
    width: 100%; text-align: left; border-radius: 9px; border-color: transparent;
    padding: 9px 12px; font-size: 13.5px;
  }
  .bo-tab:hover { background: var(--feld); }
  .bo-tab.aktiv:hover { background: var(--gruen); }
  .bo-nav-hinweis { margin-top: 8px; padding: 6px 8px; font-size: 11px; line-height: 1.35; border-top: 1px solid var(--linie); }
}
.bo-nav-hinweis { display: none; }
@media (min-width: 900px) { .bo-nav-hinweis { display: block; } }
/* Tab-Leiste (mehrere offene Bereiche) */
.bo-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 16px 0; position: sticky; top: 0; z-index: 15; background: var(--grund, transparent); }
@media (min-width: 900px) { .bo-tabs { padding: 8px 16px 0; } }
.bo-tab-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; border: 1px solid var(--linie); border-bottom: none; border-radius: 9px 9px 0 0; background: var(--karte); color: var(--tinte); font-size: 13px; cursor: pointer; max-width: 220px; }
.bo-tab-chip.aktiv { background: var(--gruen); color: #fff; border-color: var(--gruen); }
.bo-tab-chip > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bo-tab-x { border: none; background: transparent; color: inherit; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 4px; border-radius: 5px; opacity: .7; }
.bo-tab-x:hover { opacity: 1; background: rgba(0,0,0,.15); }
/* Stammdaten-Unterseiten (Sub-Navigation für mehr Übersicht) */
.stamm-subnav { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.stamm-subtab { padding: 8px 14px; border: 1px solid var(--linie); border-radius: 999px; background: var(--karte); color: var(--tinte); cursor: pointer; font-size: 13.5px; }
.stamm-subtab.aktiv { background: var(--gruen); color: #fff; border-color: var(--gruen); }
.stamm-subtab:hover:not(.aktiv) { background: var(--feld); }
.bo-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.bo-kopf h2 { margin: 0; font-size: 18px; }
.bo-suche { padding: 10px 12px; border: 1px solid var(--linie); border-radius: 10px; background: var(--feld); color: var(--tinte); min-width: 220px; }
.bo-tabelle-huelle { overflow-x: auto; border: 1px solid var(--linie); border-radius: 12px; background: var(--karte); }
.bo-tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.bo-tabelle th, .bo-tabelle td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--linie); white-space: nowrap; }
/* Lange Texte (Artikelnamen, Warengruppen-Pfade) kappen mit Ellipse — sonst
   drueckt EIN langer Name alle anderen Spalten unsichtbar nach rechts
   (Befund Andrea 30.08.: "man sieht nur den Namen"). Der volle Text steht im
   title-Tooltip; Zahlenspalten (.num) bleiben unangetastet. */
.bo-tabelle td:not(.num) { max-width: 340px; overflow: hidden; text-overflow: ellipsis; }
/* Artikel-Liste: Textspalten duerfen UMBRECHEN — nur so passen alle gewaehlten
   Spalten ohne unsichtbares Seitwaerts-Scrollen nebeneinander (echte Tabelle). */
#ansicht-artikel .bo-tabelle { table-layout: auto; }
#ansicht-artikel .bo-tabelle td:not(.num) { white-space: normal; overflow-wrap: anywhere; }   /* Kopfzeile bleibt einzeilig */
/* Kundenliste: gleiche Falle wie damals bei den Artikeln (Befund Andrea
   01.09.). Lange Namen/E-Mails + nowrap machten die Tabelle breiter als das
   Fenster; im schmalen Fenster war die Spalte mit „Bearbeiten" abgeschnitten,
   und der Mac zeigt keinen Rollbalken, also sah es aus wie „weg". */
#ansicht-kunden .bo-tabelle td:not(.num):not(.aktionen) { white-space: normal; overflow-wrap: anywhere; }
#ansicht-kunden .bo-tabelle td:not(.num):not(.aktionen) { max-width: 220px; }
/* Und die Knopf-Spalte bleibt IMMER sichtbar, auch wenn man seitlich scrollt. */
/* Spezifisch genug, um die Grundregel (nowrap) und ID-Regeln zu schlagen.
   KEIN position:sticky mehr (Befund 01.09.): Bei vielen Zeilen muss der Browser
   jede klebende Zelle bei jedem Layout neu berechnen — mit ~2.000 Kundenzeilen
   stand die Oberflaeche 31 Sekunden still (gemessen mit dem Blockade-Melder).
   Die Spalte bleibt trotzdem sichtbar, weil die Liste jetzt umbricht und
   gedeckelt ist. */
.bo-tabelle td.aktionen, #ansicht-kunden .bo-tabelle td.aktionen {
  max-width: none;
  /* Knoepfe duerfen umbrechen: im schmalen Fenster passen drei nebeneinander
     nicht mehr, und die Spalte waere trotz „klebt rechts" abgeschnitten. */
  white-space: normal;
}
.bo-tabelle td.aktionen > button, #ansicht-kunden .bo-tabelle td.aktionen > button { margin: 1px 2px; }
#ansicht-artikel .bo-tabelle td:first-child { max-width: 420px; min-width: 180px; }
.bo-tabelle th { color: var(--grau); font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em; position: sticky; top: 0; background: var(--karte); }
.bo-tabelle tr:last-child td { border-bottom: 0; }
.bo-tabelle .num { text-align: right; font-variant-numeric: tabular-nums; }
.bo-tabelle .bestand-wert { font-weight: 700; }
.bo-tabelle .bestand-null { color: var(--fehler); }
.bo-tabelle .mini { padding: 5px 10px; font-size: 12.5px; }
.bo-kopf-rechts { display: flex; gap: 8px; align-items: center; }

/* Stammdaten */
.bo-stamm-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.bo-karte { background: var(--karte); border: 1px solid var(--linie); border-radius: 12px; padding: 14px; }
.bo-karte h3 { margin: 0 0 10px; font-size: 15px; }
.stamm-liste { display: grid; gap: 5px; margin-bottom: 10px; max-height: 320px; overflow: auto; }
/* flex-wrap: Zeilen mit vielen Knoepfen (z.B. Kassierer: Rolle, PIN, zwei
   Kartenknoepfe, Hub-E-Mail, Loeschen) sollen umbrechen statt rechts
   abgeschnitten zu werden -- die Zeile selbst hatte keinen eigenen
   Scrollweg, wenn sie breiter als ihre Grid-Spalte wurde (Befund Andrea
   09.09.2026: "Fenster rechts abgeschnitten, kann nicht hinscrollen"). */
.stamm-liste .zeile { display: flex; flex-wrap: wrap; row-gap: 4px; justify-content: space-between; align-items: center; padding: 6px 9px; border: 1px solid var(--linie); border-radius: 8px; font-size: 13.5px; }
.stamm-liste .zeile.unter { margin-left: 16px; opacity: .9; }
.stamm-liste .zeile button { border: 0; background: transparent; color: var(--fehler); cursor: pointer; }
.stamm-form { display: flex; gap: 6px; flex-wrap: wrap; }
.stamm-form input, .stamm-form select { padding: 8px 10px; border: 1px solid var(--linie); border-radius: 8px; background: var(--feld); color: var(--tinte); font-size: 13.5px; flex: 1 1 auto; min-width: 90px; }

/* Artikel-Editor */
.edit-dialog { width: min(1500px, 97vw); max-height: 94vh; overflow: auto; }
.edit-kopfzeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.edit-kopfzeile h3 { margin: 0; }
#edit-bild { width: 84px; height: 84px; object-fit: contain; border-radius: 10px; background: #fff; border: 1px solid var(--linie); }
.edit-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.edit-raster label { display: grid; gap: 4px; font-size: 12.5px; color: var(--grau); }
.edit-raster input, .edit-raster select { padding: 9px 10px; border: 1px solid var(--linie); border-radius: 8px; background: var(--feld); color: var(--tinte); font-size: 14px; }
.edit-schalter { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0; }
.edit-schalter .schalter { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--tinte); }
.edit-block { border-top: 1px solid var(--linie); padding-top: 12px; margin-top: 10px; }
.edit-block h4 { margin: 0 0 8px; font-size: 14px; }
.barcode-liste { display: grid; gap: 5px; margin-bottom: 8px; }
.barcode-liste .zeile { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 9px; border: 1px solid var(--linie); border-radius: 8px; font-size: 13px; font-family: ui-monospace, Menlo, monospace; }
.barcode-liste .zeile button { border: 0; background: transparent; color: var(--fehler); cursor: pointer; }
.barcode-add { display: flex; gap: 6px; flex-wrap: wrap; }
.barcode-add input, .barcode-add select { padding: 8px 10px; border: 1px solid var(--linie); border-radius: 8px; background: var(--feld); color: var(--tinte); font-size: 13.5px; }
.barcode-add input:first-child { flex: 1 1 160px; }
.edit-knoepfe { display: flex; align-items: center; gap: 10px; }

/* Import/Export */
.imp-mapping { margin-top: 12px; display: grid; gap: 10px; }
.imp-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.imp-felder label { display: grid; gap: 3px; font-size: 12.5px; color: var(--grau); }
.imp-felder select { padding: 7px 9px; border: 1px solid var(--linie); border-radius: 8px; background: var(--feld); color: var(--tinte); font-size: 13px; }
.imp-zeile { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.imp-zeile input, .imp-zeile select { padding: 7px 9px; border: 1px solid var(--linie); border-radius: 8px; background: var(--feld); color: var(--tinte); }
.imp-diff { margin-top: 12px; max-height: 300px; overflow: auto; font-size: 13px; }
.imp-diff .neu { color: var(--ok); } .imp-diff .upd { color: var(--warn); }
.imp-diff table { width: 100%; border-collapse: collapse; }
.imp-diff td, .imp-diff th { padding: 5px 8px; border-bottom: 1px solid var(--linie); text-align: left; white-space: nowrap; }
.exp-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }

/* Wareneingang-Regel-Editor */
.we-regeln { margin: 10px 0; }
.we-regeln summary { cursor: pointer; margin: 6px 0; font-size: 13.5px; }
.we-regeln textarea { width: 100%; font-family: ui-monospace, Menlo, monospace; font-size: 12px; border: 1px solid var(--linie); border-radius: 8px; padding: 8px; background: var(--feld); color: var(--tinte); }

/* Etiketten-Engine (Sunnseit-Look) */
.etikett-blatt { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8mm; margin-top: 16px; }
/* Vorschau NEBEN den Einstellungen (Wunsch Andrea 01.09.: nicht mehr scrollen).
   Ab 1100 px zweispaltig; darunter bleibt alles untereinander. */
@media (min-width: 1100px) {
  .et-arbeitsflaeche { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); gap: 16px; align-items: start; }
  .et-vorschau-spalte { position: sticky; top: 12px; max-height: calc(100vh - 40px); overflow: auto;
    background: var(--karte, #fff); border: 1px solid var(--linie, #e4e2d8); border-radius: 12px; padding: 12px; }
  .et-vorschau-spalte .etikett-blatt { margin-top: 8px; grid-template-columns: 1fr; gap: 6mm; }
}
.et-vorschau-titel { font-size: 13px; font-weight: 700; color: var(--grau, #5F584C); margin: 0 0 2px; }
.etikett { border: 1px dashed #C9C2B3; border-radius: 3mm; padding: var(--et-pad, 6mm); min-height: 58mm; box-sizing: border-box; background: #fff; color: #2E2A24;
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  /* Alle Schriftgroessen haengen an --et-skala, damit sich der Inhalt der
     Etikettengroesse anpasst (kleines Etikett -> kleinere Schrift). */
  font-size: calc(1em * var(--et-skala, 1)); }
.etikett .sonnenbalken { height: calc(3.4mm * var(--et-luft, 1)); border-radius: 3px; background: linear-gradient(90deg,#FFCD00,#F39A4B,#C61624,#3C8C4E,#16948B); margin-bottom: calc(2.4mm * var(--et-luft, 1)); }
.etikett .e-name { font-size: calc(20px * var(--et-skala, 1) * var(--et-f-name, 1)); font-weight: 800; color: #2E2A24; line-height: 1.12; }
.etikett .e-wg { font-size: calc(11px * var(--et-skala, 1) * var(--et-f-detail, 1)); color: #5F584C; margin-top: calc(1.4mm * var(--et-luft, 1)); }
.etikett .e-preis { font-size: calc(30px * var(--et-skala, 1) * var(--et-f-preis, 1)); font-weight: 900; color: var(--et-akzent, #3C8C4E); margin-top: auto; }
.etikett .e-lmiv { font-size: calc(9px * var(--et-skala, 1) * var(--et-f-detail, 1)); color: #5F584C; margin-top: calc(1.4mm * var(--et-luft, 1)); line-height: 1.25; }
/* Thekenschild (06.09.2026): Beschreibung/Geschmack als Kleintext direkt unter
   dem Namen; Besonderheiten wie die bio/glutenfrei-Badges (e-badge), nur in
   neutraler Farbe, da es keine feste Merkmalliste ist. */
.etikett .e-beschreibung { font-size: calc(13px * var(--et-skala, 1) * var(--et-f-detail, 1)); color: #5F584C; font-style: italic; margin-top: calc(0.8mm * var(--et-luft, 1)); }
.etikett .e-besonderheiten { display: flex; flex-wrap: wrap; gap: calc(1.4mm * var(--et-f-merkmal, 1)); margin-top: calc(1.6mm * var(--et-luft, 1)); }
/* QR laeuft im Fluss mit -- absolut positioniert lag er ueber dem Strichcode. */
.etikett .e-qr { align-self: flex-end; width: min(20mm, 40%); aspect-ratio: 1; margin-top: calc(1.2mm * var(--et-luft, 1)); }
.etikett .e-qr svg { width: 100%; height: 100%; display: block; }
.etikett .e-barcode { margin-top: calc(2mm * var(--et-luft, 1)); }
.etikett .e-barcode svg { width: 100%; height: calc(10mm * var(--et-skala, 1) * var(--et-f-code, 1)); display: block; }
.etikett .e-bctext { font-size: calc(10px * var(--et-skala, 1) * var(--et-f-detail, 1)); letter-spacing: 1px; color: #2E2A24; text-align: center; margin-top: 0.5mm; font-variant-numeric: tabular-nums; }
.etikett .e-freivon { display: flex; flex-wrap: wrap; gap: calc(1.4mm * var(--et-f-merkmal, 1)); margin-top: calc(1.6mm * var(--et-luft, 1)); }
/* Merkmale (bio, glutenfrei …) sind ein Verkaufsargument und sollen auffallen:
   Grundgroesse 16px statt 12px, dazu ein eigener Regler --et-f-merkmal
   (Wunsch Andrea 01.09.). Farbe kommt je Merkmal aus dem Etikett-Editor. */
.etikett .e-badge { font-size: calc(16px * var(--et-skala, 1) * var(--et-f-merkmal, 1)); font-weight: 800; letter-spacing: .01em; color: var(--badge-text, #16603a); background: var(--badge-bg, #e7f3ea); border: calc(0.6mm * var(--et-f-merkmal, 1)) solid var(--badge-linie, #3C8C4E); border-radius: 2mm; padding: calc(0.9mm * var(--et-f-merkmal, 1)) calc(2.2mm * var(--et-f-merkmal, 1)); line-height: 1.15; }
/* Nichts darf sich ueberlagern, egal welche Felder gewaehlt sind. */
.etikett > * { max-width: 100%; }
.etikett .e-name, .etikett .e-wg, .etikett .e-lmiv, .etikett .e-beschreibung { overflow-wrap: break-word; }
@media print {
  body.bo * { visibility: hidden !important; }
  /* Runde 4 (B20): visibility:hidden laesst die LAYOUT-HOEHE der ganzen App
     stehen -> nach der Karte kamen ~100 leere Seiten. Beim Faktura-/Karten-
     Druck traegt der Body diese Klasse, und alles ausser dem Druckblatt-
     Container verschwindet WIRKLICH (display:none = keine Hoehe, 1 Seite). */
  body.druck-nur-faktura > :not(#dokvor-huelle) { display: none !important; }
  /* Etiketten: GENAU dieselbe Lehre wie beim Bondruck (Befund Gmunden 30.08.)
     — visibility:hidden laesst die Layout-Hoehe der ganzen WaWi stehen. Bei
     Etikettengroesse als Seitenmass ergab das Tausende leere Seiten: Chrome
     rechnete minutenlang und zeigte am Ende eine leere Vorschau (Befund
     Andrea 01.09.). Beim Drucken haengt das Blatt direkt am <body> und alles
     andere verschwindet WIRKLICH. */
  body.druck-nur-etikett > :not(#etikett-blatt) { display: none !important; }
  body.druck-nur-etikett #etikett-blatt, body.druck-nur-etikett #etikett-blatt * { visibility: visible !important; }
  body.druck-nur-etikett #etikett-blatt { display: grid !important; position: static !important; width: auto !important; margin: 0 !important; }
  #etikett-blatt, #etikett-blatt * { visibility: visible !important; }
  #etikett-blatt { position: absolute; left: 0; top: 0; width: 100%; margin: 0; }
  .etikett { page-break-inside: avoid; }
  /* Faktura: immer hell/schwarz, unabhaengig vom Bildschirm-Theme */
  #faktura-blatt, #faktura-blatt * { visibility: visible !important; color: #111 !important; }
  /* display MUSS mit -- sonst druckt das Blatt leer (es ist am Bildschirm ausgeblendet). */
  #faktura-blatt { display: block !important; position: absolute; left: 0; top: 0; width: 100%; margin: 0; background: #fff !important; }
  /* Vorschau-Zoom und -Rahmen duerfen den Druck nicht verzerren. */
  #dokvor-skala { display: block !important; transform: none !important; padding: 0 !important; background: none !important; }
  #dokvor-huelle { display: block !important; position: static !important; background: none !important; padding: 0 !important; overflow: visible !important; }
  .dokvor-leiste { display: none !important; }
  .fk-seite { box-shadow: none !important; margin: 0 !important; width: auto !important; min-height: 0 !important; }
}
@page { size: A4; margin: 0; }
/* Faktura / Rechnung */
#faktura-blatt { display: none; }
.fk { max-width: 720px; margin: 0 auto; padding: 24px; color: #111; font-size: 13.5px; }
.fk-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; border-bottom: 2px solid #234A30; padding-bottom: 12px; margin-bottom: 16px; }
.fk-aussteller { font-weight: 700; font-size: 16px; color: #234A30; }
.fk-meta { text-align: right; font-size: 12.5px; }
.fk-titel { font-size: 22px; font-weight: 800; margin: 4px 0 12px; }
.fk-adr { margin-bottom: 18px; line-height: 1.5; }
.fk-tab { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.fk-tab th, .fk-tab td { padding: 7px 8px; border-bottom: 1px solid #ddd; text-align: left; }
.fk-tab th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; color: #555; }
.fk-tab td.num, .fk-tab th.num { text-align: right; font-variant-numeric: tabular-nums; }
.fk-summe { margin-left: auto; width: 260px; }
.fk-summe .z { display: flex; justify-content: space-between; padding: 3px 0; }
.fk-summe .gesamt { font-weight: 800; font-size: 16px; border-top: 2px solid #234A30; margin-top: 4px; padding-top: 6px; }
.fk-fuss { margin-top: 22px; font-size: 11.5px; color: #555; line-height: 1.5; border-top: 1px solid #ddd; padding-top: 10px; }

/* Auswertung */
.aw-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.aw-tile { background: var(--karte); border: 1px solid var(--linie); border-radius: 12px; padding: 14px; }
.aw-tile .w { font-size: 24px; font-weight: 800; color: var(--gruen); font-variant-numeric: tabular-nums; }
.aw-tile .l { font-size: 12px; color: var(--grau); margin-top: 2px; }
.aw-chart { margin-top: 4px; }
.hbars { display: flex; flex-direction: column; gap: 6px; }
.hbar { display: grid; grid-template-columns: 40% 1fr auto; align-items: center; gap: 8px; font-size: 12px; }
.hbar-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tinte); }
.hbar-track { background: var(--linie); border-radius: 6px; height: 12px; overflow: hidden; }
.hbar-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--sun), var(--sun-tief)); border-radius: 6px; }
.hbar-v { font-variant-numeric: tabular-nums; color: var(--grau); white-space: nowrap; }
.sw-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.sw-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--sun); color: #3A2705; border-radius: 999px; padding: 3px 6px 3px 12px; font-size: 13px; font-weight: 600; }
.sw-chip button { border: 0; background: rgba(0,0,0,.14); color: inherit; border-radius: 999px; width: 18px; height: 18px; line-height: 1; cursor: pointer; font-size: 13px; }
.kl-vorschau { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; padding: 8px; border: 1px solid var(--linie); border-radius: 10px; background: var(--bg); min-height: 60px; }
.kl-tile { position: relative; border-radius: 10px; padding: 10px 8px; min-height: 52px; display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 700; font-size: 12.5px; line-height: 1.15; cursor: grab; border: 1px solid var(--linie); user-select: none; }
.kl-tile.kl-drag { opacity: .4; }
.kl-tile-x { position: absolute; top: 2px; right: 2px; border: 0; background: rgba(0,0,0,.22); color: #fff; border-radius: 999px; width: 17px; height: 17px; line-height: 1; font-size: 11px; cursor: pointer; }
#aw-renner .zeile, #aw-penner .zeile, #aw-wg .zeile, #aw-steuer .zeile { justify-content: space-between; }

/* Karten-Druck (Kunden-/Mitarbeiterkarte mit QR) */
.karte-druck { width: 320px; margin: 30px auto; padding: 22px; border: 1px solid #ccc; border-radius: 14px; text-align: center; color: #111; }
.karte-druck .kd-marke { font-weight: 800; color: #234A30; letter-spacing: .02em; }
.karte-druck .kd-titel { font-size: 12px; color: #555; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.karte-druck .kd-name { font-size: 20px; font-weight: 700; margin-bottom: 12px; }
.karte-druck .kd-qr { width: 180px; height: 180px; margin: 0 auto; }
.karte-druck .kd-qr svg { width: 100%; height: 100%; }
.karte-druck .kd-strich { margin: 10px auto 0; width: 240px; }
.karte-druck .kd-schreibfeld { border-bottom: 1.5px solid #999; width: 80%; margin: 0 auto 12px; min-height: 26px; }
/* Runde 4 (B20): A4-Bogen, 10 Karten je Blatt (85,6 x 54 mm = Scheckkarte,
   Raster der gaengigen Visitenkarten-Bogen von Avery-Zweckform/Sigel/Herma). */
.karten-bogen { display: grid; grid-template-columns: repeat(2, 85.6mm); gap: 4mm 8mm; justify-content: center; padding: 8mm 0; page-break-after: always; }
.karten-bogen:last-child { page-break-after: auto; }
.karte-a4 { width: 85.6mm; height: 54mm; border: 0.3mm dashed #bbb; border-radius: 3mm; padding: 3mm 4mm; color: #111; display: flex; flex-direction: column; overflow: hidden; background: #fff; }
.karte-a4 .kd-marke { font-weight: 800; color: #234A30; font-size: 11px; }
.karte-a4 .kd-titel { font-size: 8px; color: #555; text-transform: uppercase; letter-spacing: .05em; }
.karte-a4 .kd-schreibfeld-a4 { border-bottom: 0.4mm solid #999; margin: 3mm 0 2mm; min-height: 7mm; }
.karte-a4 .ka4-codes { display: flex; gap: 3mm; align-items: flex-end; margin-top: auto; }
.karte-a4 .ka4-qr { width: 17mm; height: 17mm; flex: 0 0 auto; }
.karte-a4 .ka4-qr svg { width: 100%; height: 100%; }
.karte-a4 .ka4-strich { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1mm; }
.karte-a4 .ka4-code { font-size: 8px; font-family: ui-monospace, monospace; color: #333; }
.karte-druck .kd-code { margin-top: 10px; font-family: monospace; font-size: 14px; }

/* ── Dashboard: Säulendiagramm (HTML statt SVG, damit die Schrift nie verzerrt) ── */
.dash-saeulen { --saeulen: 1; }
.dash-saeulen-flaeche { display: grid; grid-template-columns: repeat(var(--saeulen), minmax(0, 1fr)); gap: 4px; align-items: end; height: 150px; }
.dash-saeule { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; min-width: 0; }
.dash-saeule-wert { font-size: 10.5px; color: var(--grau); font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1; }
.dash-saeule-balken { display: block; width: 100%; border-radius: 4px 4px 0 0; }
.dash-saeulen-achse { display: grid; grid-template-columns: repeat(var(--saeulen), minmax(0, 1fr)); gap: 4px; margin-top: 5px; }
.dash-saeule-label { font-size: 11px; color: var(--grau); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: clip; font-variant-numeric: tabular-nums; }

/* Aufklappbare Erklärung (überall gleich) */
.bo-hilfe { margin: 4px 0 8px; border-left: 3px solid var(--linie); padding-left: 8px; }
.bo-hilfe > summary { cursor: pointer; font-size: 13px; color: var(--grau); }
.bo-hilfe > summary:hover { color: var(--text, inherit); }
.bo-hilfe p { font-size: 13px; line-height: 1.45; margin: 6px 0; }
.bo-hilfe ol, .bo-hilfe ul { font-size: 13px; line-height: 1.45; margin: 6px 0; padding-left: 20px; }
.bo-hilfe li { margin: 3px 0; }

/* ── Zuschaltbarer Filter (Artikel, Etiketten) ─────────────────────────────── */
.filt-panel { margin: 0 0 10px; }
.filt-kopf { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-bottom: 8px; border-bottom: 1px solid var(--linie); }
.filt-zeilen { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.filt-zeile { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.filt-zeile select, .filt-zeile input { font-size: 13px; }
.klein-knopf.aktiv { background: var(--sun); color: #3A2705; font-weight: 700; }
.dialog.dialog-breit { width: min(860px, 96vw); }
.apick-zeile { cursor: pointer; }
.apick-zeile:hover td { background: var(--feld, rgba(0,0,0,.04)); }
.etikett .sonnenbalken.einfarbig { background: var(--et-akzent, #3C8C4E); }

/* ── Block 1: Belegdokument als echte A4-Seite (Vorschau = Druckbild) ──────── */
.dokvor-huelle { padding: 0; align-items: stretch; }
.dokvor-leiste { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 10px 14px; background: var(--karte); border-bottom: 1px solid var(--linie); }
.dokvor-skala { --dok-zoom: 1; flex: 1; overflow: auto; padding: 16px 8px 40px; text-align: center; }
.dokvor-skala #faktura-blatt { display: inline-block; transform: scale(var(--dok-zoom)); transform-origin: top center; }
.fk-seite { width: 210mm; min-height: 297mm; box-sizing: border-box; padding: 16mm 18mm 12mm; background: #fff; color: #111;
  font-size: 10.5pt; line-height: 1.45; text-align: left; display: flex; flex-direction: column; box-shadow: 0 2px 14px rgba(0,0,0,.22); margin: 0 auto; }
.fk-inhalt { flex: 1; }
.fk-briefpapier img { max-width: 100%; max-height: 34mm; display: block; margin-bottom: 6mm; }
.fk-kopfzeile { display: flex; justify-content: space-between; align-items: flex-start; gap: 10mm; border-bottom: 2px solid #234A30; padding-bottom: 4mm; margin-bottom: 8mm; }
.fk-firma { display: flex; gap: 4mm; align-items: flex-start; }
.fk-logo { max-height: 18mm; max-width: 40mm; }
.fk-aussteller { font-weight: 700; font-size: 14pt; color: #234A30; line-height: 1.2; }
.fk-firma-klein, .fk-kontakt { font-size: 9pt; color: #555; line-height: 1.4; }
.fk-kontakt { text-align: right; }
.fk-oben { display: flex; justify-content: space-between; gap: 10mm; margin-bottom: 10mm; }
.fk-empf { width: 85mm; min-height: 30mm; }
.fk-absender-klein { font-size: 7.5pt; color: #666; border-bottom: .3mm solid #bbb; padding-bottom: 1mm; margin-bottom: 3mm; }
.fk-empf-inhalt { line-height: 1.5; }
.fk-info { border-collapse: collapse; font-size: 9.5pt; }
.fk-info th { text-align: left; color: #555; font-weight: 500; padding: .8mm 4mm .8mm 0; white-space: nowrap; }
.fk-info td { text-align: right; font-variant-numeric: tabular-nums; padding: .8mm 0; white-space: nowrap; }
.fk-titel { font-size: 17pt; font-weight: 800; margin: 0 0 3mm; color: #234A30; }
.fk-einleitung { margin: 0 0 5mm; }
.fk-tab { width: 100%; border-collapse: collapse; margin-bottom: 6mm; font-size: 10pt; }
.fk-tab th { text-align: left; font-size: 8.5pt; text-transform: uppercase; letter-spacing: .04em; color: #444; border-bottom: .5mm solid #234A30; padding: 0 2mm 1.5mm; }
.fk-tab td { padding: 2mm; border-bottom: .2mm solid #ddd; vertical-align: top; }
.fk-tab td.num, .fk-tab th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fk-tab .fk-pos { width: 10mm; color: #777; }
.fk-rabatt { font-size: 8.5pt; color: #B0503E; }
.fk-leer { color: #777; font-style: italic; }
.fk-summe { margin-left: auto; width: 80mm; font-size: 10pt; }
.fk-summe .z { display: flex; justify-content: space-between; gap: 6mm; padding: 1mm 0; }
.fk-summe .gesamt { font-weight: 800; font-size: 12pt; border-top: .6mm solid #234A30; margin-top: 1.5mm; padding-top: 2mm; }
.fk-schluss { margin: 8mm 0 0; }
.fk-eigen { margin: 4mm 0 0; font-size: 9.5pt; color: #444; }
.fk-fussleiste { display: flex; gap: 8mm; justify-content: space-between; border-top: .3mm solid #bbb; padding-top: 3mm; margin-top: 8mm; font-size: 8pt; color: #555; line-height: 1.45; }
.fk-fussleiste > div { flex: 1; }
@media (max-width: 900px) { .dokvor-skala { padding: 8px 0 30px; } }

/* ── Lagerbelege (Mappen-Prinzip) ──────────────────────────────────────────── */
.vg-summen { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.vg-summe { border: 1px solid var(--linie); border-radius: 8px; padding: 4px 9px; font-size: 12.5px; }
.vg-detail { background: var(--feld, rgba(0,0,0,.03)); }
.vg-detail-box { display: grid; gap: 12px; padding: 10px 4px 14px; }
.vg-detail-box h4 { margin: 0 0 6px; font-size: 13.5px; }
.vg-dok { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.9; }
.vg-aktionen { display: flex; flex-wrap: wrap; gap: 8px; }
.aw-summe td { border-top: 2px solid var(--linie); }
#ua-anzahl h4, .bo-stamm-raster h4 { margin: 0 0 6px; font-size: 13.5px; }

/* ── Kundenbestellungen (Gliederung wie in der Team-App) ───────────────────── */
.vb-gruppe { border: 1px solid var(--linie); border-radius: 12px; margin-bottom: 8px; overflow: hidden; }
.vb-kopf { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; user-select: none; background: var(--feld, rgba(0,0,0,.03)); }
.vb-punkt { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.vb-chev { color: var(--grau); font-size: 12px; }
.vb-koerper { display: none; padding: 8px; }
.vb-gruppe.offen .vb-koerper { display: block; }
.vb-karte { border: 1px solid var(--linie); border-radius: 10px; padding: 9px 11px; margin-top: 6px; background: var(--karte); }
.vb-karte:first-child { margin-top: 0; }
.vb-karte-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vb-pille { font-size: 10.5px; font-weight: 700; border: 1px solid var(--linie); border-radius: 999px; padding: 2px 8px; color: var(--grau); }
.vb-pille.vb-datum { color: var(--gruen); border-color: var(--gruen); }
.vb-tel { display: inline-block; margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--gruen); text-decoration: none; }
.vb-artikel { font-size: 13.5px; line-height: 1.45; margin-top: 6px; padding: 6px 9px; border: 1px solid var(--linie); border-radius: 9px; }
.vb-notiz { font-size: 13px; line-height: 1.4; margin-top: 6px; color: var(--grau); white-space: pre-wrap; }
.vb-aktionen { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

/* ── Import/Export: Gruppen und Überlauf ───────────────────────────────────── */
/* Ohne min-width:0 koennen Grid-Kinder nicht schrumpfen -- breite Tabellen
   sind dann aus der Karte herausgelaufen und lagen ueber der Schrift. */
.bo-stamm-raster > * { min-width: 0; }
.bo-karte { min-width: 0; overflow-wrap: break-word; }
.ie-gruppe { margin: 18px 0 8px; font-size: 15px; color: var(--gruen); border-bottom: 2px solid var(--linie); padding-bottom: 5px; }
/* Der Modul-Schalter umklammert zwei Karten, soll aber selbst keine Spalte belegen. */
.ie-gruppe-inhalt { display: contents; }
.ie-gruppe-inhalt[hidden] { display: none; }
.ie-scroll { overflow-x: auto; max-width: 100%; }
.gi-tab { width: 100%; min-width: 340px; }
.ie-scroll table { min-width: max-content; }
.imp-felder { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.imp-diff table { min-width: max-content; }

/* ── Einstellungen je Mandant ──────────────────────────────────────────────── */
.einst-liste { display: grid; gap: 10px; }
.einst-zeile { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; cursor: pointer; }
.einst-zeile input { margin-top: 3px; }
.einst-zeile .hinweis { font-size: 12.5px; line-height: 1.4; margin-top: 2px; }
.einst-feld { display: grid; gap: 4px; font-size: 13.5px; margin-bottom: 10px; }
.einst-feld textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--linie); border-radius: 8px; background: var(--feld); color: var(--tinte); font-family: inherit; font-size: 13.5px; resize: vertical; }
/* Segment-Umschalter auf hellen Karten (der Theme-Schalter hat weisse Schrift) */
.bo-segment { display: inline-flex; border: 1px solid var(--linie); border-radius: 999px; overflow: hidden; background: var(--feld); }
.bo-segment button { border: 0; background: none; cursor: pointer; padding: 7px 14px; color: var(--tinte); font: inherit; font-size: 13.5px; font-weight: 600; }
.bo-segment button.aktiv { background: var(--sun); color: #3A2705; }
.et-farben { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; font-size: 12.5px; }
.et-farbe { display: inline-flex; align-items: center; gap: 5px; }
.et-farbe input[type=color] { width: 34px; height: 24px; padding: 0; border: 1px solid var(--linie); border-radius: 6px; background: none; }
/* Block 14/17: Stammdaten bekommen mehr Platz */
.stamm-liste-gross { max-height: 420px; overflow: auto; }
.bo-stamm-raster { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }
.bo-karte .stamm-liste { max-height: 340px; overflow: auto; }
.stamm-form { gap: 6px; }
/* Etikett, dessen Inhalt selbst verkleinert nicht mehr passt — sichtbar machen,
   statt stillschweigend abzuschneiden. */
.etikett.etikett-zu-voll { outline: 1.2mm solid #C0392B; outline-offset: -1.2mm; }
@media print { .etikett.etikett-zu-voll { outline: 0.4mm dashed #C0392B; } }
/* Merkmal, das in den Einstellungen auf „fest“ steht: Haken gesperrt */
.schalter.gesperrt { opacity: .85; cursor: not-allowed; }
.et-fest { font-size: 10px; font-weight: 700; border: 1px solid var(--linie); border-radius: 999px; padding: 0 5px; color: var(--grau); }
.einst-zeile-wahl { grid-template-columns: 7.5em 1fr; align-items: start; cursor: default; }
.einst-zeile-wahl select { width: 100%; }

/* Runde 4 (B25): Auswahlfelder in den Belege-Karten duerfen nicht ueber den
   Rand laufen -- volle Breite innerhalb der Zeile, Umbruch statt Ueberlauf. */
#ansicht-belege .barcode-add { flex-wrap: wrap; }
#ansicht-belege .barcode-add select, #ansicht-belege .barcode-add input[type="date"] { flex: 1 1 180px; min-width: 0; max-width: 100%; }

/* Runde 4 (B29): Auswertungs-Kacheln zum Auf-/Zuklappen -- man waehlt selbst,
   was offen ist. Offene Kachel bekommt einen farbigen Balken. */
#ansicht-auswertung .bo-karte > h3 { cursor: pointer; user-select: none; }
#ansicht-auswertung .bo-karte > h3::before { content: "▾ "; color: var(--sun); }
#ansicht-auswertung .bo-karte.aw-zu > h3::before { content: "▸ "; color: var(--grau); }
#ansicht-auswertung .bo-karte.aw-zu > :not(h3) { display: none !important; }
#ansicht-auswertung .bo-karte:not(.aw-zu) { border-left: 3px solid var(--sun); }

/* Runde 5 / E2: Stift-Modus — kurzes Aufblitzen nach erfolgreichem Speichern. */
.bo-tabelle td.gespeichert { background: color-mix(in srgb, var(--gruen, #2e7d32) 22%, transparent); transition: background .4s; }

/* Runde 5 / A1: Handy-Feinschliff fuer die WaWi — Formulare umbrechen,
   Tabellen scrollen im eigenen Rahmen, Knoepfe fingerfreundlich. */
@media (max-width: 700px) {
  .bo-kopf { flex-wrap: wrap; }
  .bo-kopf-rechts { flex-wrap: wrap; width: 100%; }
  .bo-filter { overflow-x: auto; }
  .stamm-form { flex-wrap: wrap; }
  .stamm-form > * { min-width: 0; }
  .bo-tabelle-huelle { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .bo-tabelle td, .bo-tabelle th { white-space: nowrap; }
  .klein-knopf, .haupt-knopf { min-height: 40px; }
  .bo-segment { flex-wrap: wrap; }
  .kl-vorschau { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)) !important; }
}

/* Tab-Leiste (Runde 5 Nachtrag): +-Knopf, Menue, Internet-Seiten-Chips */
.bo-tab-plus { padding: 6px 12px; font-weight: 800; position: relative; }
.bo-tab-welt { background: color-mix(in srgb, var(--sun, #e8a92c) 16%, var(--karte)); }
.bo-tab-menue { position: absolute; top: 100%; left: 0; z-index: 40; background: var(--karte); border: 1px solid var(--linie); border-radius: 10px; box-shadow: 0 12px 40px rgba(0,0,0,.25); padding: 6px; display: grid; grid-template-columns: repeat(2, minmax(130px, 1fr)); gap: 2px; }
.bo-tab-menue button { border: 0; background: none; color: var(--tinte); text-align: left; padding: 7px 10px; border-radius: 8px; cursor: pointer; font-size: 13.5px; }
.bo-tab-menue button:hover { background: var(--gruen-soft, #e6efe6); }

/* Herkunft einer Filialbestellung: seit 01.09.2026 koennen die Filialen sie in
   der Team-App zusammenscannen. Eigener Klassenname -- .marke ist im
   Sunntech-Design bereits die Wort-Bild-Marke im Kopf (display:flex). */
.fb-herkunft { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 7px;
  border-radius: 999px; background: var(--sonne-weich, #fdf1d8); color: #7a5a1e;
  border: 1px solid var(--sonne-linie, #eddcb4); vertical-align: 1px; }