/**
 * angebote.css — nur Angebote-Spezifika (Kopf/Gruppen/Positionen-Modell)
 *
 * Alle generischen Listen-Patterns kommen aus dem Shared-Set
 * (_shared/functions/list-view/grid-css/idf-list-grid.css, inline-editing,
 * forms). Hier bleiben nur Spaltenbreiten + Status-Pillen-Farben (erlaubt
 * nach SHARED-REORG-PROPOSAL §7.4) + Summen-Ausrichtung.
 */

/* ================================================================ */
/* Kopf-Liste (index.php) — Grid: Spaltenbreiten                     */
/* ================================================================ */
/* Status (Pille) · Nummer · Titel (1fr) · Kunde · Summe (brutto) ·
   Datum · Oeffnen (Pfeil) · Loeschen. */
.an-grid {
  display: grid;
  /* Breiten aus der CSS-Variable (col-resize-Baustein); Fallback = Defaults. */
  grid-template-columns: var(--an-cols,
    120px               /* Nummer */
    minmax(220px, 1fr)  /* Titel */
    180px               /* Kunde */
    130px               /* Summe (netto) */
    130px               /* Deckungsbeitrag */
    110px               /* Datum */
    130px               /* Status (Pille) */
    44px                /* Markt-Ampel (Icon-Spalte wie im Editor) */
    72px                /* Aktionen (Duplizieren + Loeschen) */
  );
  align-items: stretch;
  gap: 0;
}

/* Nummer monospace-artig (tabellarische Ziffern, ruhige Spalte). */
.an-nummer { font-variant-numeric: tabular-nums; color: var(--mid, #555); }

/* Deckungsbeitrag-Spalte (interne Marge-Kennzahl): dezent gegenueber Netto. */
.an-cell-db .an-summe { color: var(--mid, #555); }

/* Aktionsspalte der Uebersicht: Duplizieren + Loeschen nebeneinander, beide
   erst bei Row-Hover (leise Liste, wie die Loesch-Pille). */
.an-cell-actions { gap: 2px; }
.an-row .an-dup-btn { opacity: 0; pointer-events: none; }
.an-row:hover .an-dup-btn { opacity: 0.55; pointer-events: auto; }
.an-dup-btn:hover { opacity: 1; }

/* Summe rechtsbuendig (Geldspalte), tabellarische Ziffern. Der Wert-Span
   fuellt die Cell (flex:1), daher richtet text-align:right die Zahl rechts aus
   (justify-content am Cell-Container allein reicht dafuer nicht). */
.an-cell-summe-head { text-align: right; }
.an-cell-summe { display: flex; justify-content: flex-end; align-items: center; }
.an-summe { flex: 1 1 auto; text-align: right; font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------- */
/* Status-Pillen pro angebot_status ([data-status]).                 */
/* Getoenter Baustein (.idf-pill-tag) wie in den anderen Apps        */
/* (werkzeuge/protokolle/unternehmen): Tint-Hintergrund + Token-     */
/* Textfarbe, nicht solid. Geometrie kommt aus dem Shared-Baustein.  */
/* ----------------------------------------------------------------- */
.an-status-pill[data-status="entwurf"]    { background: var(--tint-neutral); color: var(--mid, #555); }
.an-status-pill[data-status="angeboten"]  { background: var(--tint-accent);  color: var(--accent, #167ea0); }
.an-status-pill[data-status="angenommen"] { background: var(--tint-confirm); color: var(--confirm, #0c998e); }
.an-status-pill[data-status="abgelehnt"]  { background: var(--tint-primary); color: var(--primary, #c8134b); }
.an-status-pill[data-status="storniert"]  { background: var(--tint-neutral); color: var(--mid, #555); text-decoration: line-through; }

/* ================================================================ */
/* Kalkulations-Editor (angebot.php)                                 */
/* ================================================================ */

/* Zurück-Pille: jetzt Shared-Standard .idf-app-header-back (via $appBack im
   app-header). Lokales .an-back-pill entfernt (angebot v0.40.1). */

/* Editor-Headline: „Angebote / Angebots-Name" als EINE Breadcrumb-Headline.
   Der App-Name „Angebote" laeuft auf derselben Breadcrumb-Skala wie der Titel-
   Input (idf-app-breadcrumb: font-xxl / bold), nur gedaempft (--mid) als Label
   vor dem eigentlichen Angebots-Namen (--ink). Vorher stand „Angebote" mini
   (font-md/mid) und wirkte verloren neben dem grossen Titel (Joerg-Review).
   Nur auf der Editor-Seite (body.an-editor-page), nicht in der Liste. */
.an-editor-page .idf-app-header-title {
  font-size: var(--font-xxl, 1.75rem);
  font-weight: var(--weight-bold, 700);
  letter-spacing: -0.02em;
  color: var(--mid, #555);
  align-self: center;
  flex: 0 0 auto;
}

/* Kopfdaten per Toolbar-Toggle ausblendbar (Default: aus, mehr Platz). */
.an-kopf-header.is-hidden { display: none; }

/* Kopf-Header — Stammdaten (Muster bp-kopf-header). */
.an-kopf-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 24px 16px;
  background: var(--white, #fff);
  border-bottom: 1px solid var(--line, #e5e5e5);
  margin: 0 0 12px 0;
  position: sticky;
  top: 0;
  z-index: 5;
  isolation: isolate;
}
.an-kopf-fields.idf-form {
  display: grid;
  /* auto-fit statt fester Spaltenzahl: jedes Feld min. 165px, keine
     Ueberlappung / keine extrem breite Spalte, wenn Felder dazukommen. */
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 8px 14px;
  align-items: end;
}
.an-kopf-texts.idf-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
}
/* Feld-Labels in Tabellenkopf-Schrift (uppercase 11px). */
.an-kopf-fields.idf-form > label > span,
.an-kopf-fields.idf-form > .an-kopf-field > span,
.an-kopf-texts.idf-form > label > span {
  font-size: var(--font-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--mid, #555);
}
.an-kopf-fields.idf-form > .an-kopf-field { display: grid; gap: var(--space-1, 4px); }

.an-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-height: 36px;
}

@media (max-width: 1100px) {
  .an-kopf-texts.idf-form  { grid-template-columns: 1fr; }
}

/* Kopf-Texte (Einleitung/Schluss): Label + Vorlage-Combobox in einer Kopfzeile,
   darunter der Markdown-Editor (Toolbar + Textfeld, mount via markdown-editor). */
.an-kopf-text-field { display: grid; gap: 4px; }
.an-kopf-text-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.an-kopf-text-label {
  font-size: var(--font-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--mid, #555);
}
.an-kopf-vorlage { flex: 0 1 auto; min-width: 150px; max-width: 230px; }
/* Read-only Markdown-Vorschau des gewaehlten Einleitungs-/Schlusstextes (kein
   Inline-Editor mehr - Auswahl nur ueber die Vorlage-Combobox darueber). */
.an-kopf-text-preview {
  min-height: 52px;
  max-height: 150px;
  overflow: auto;
  padding: 8px 10px;
  border: 1px solid var(--line, #e5e5e5);
  border-radius: var(--radius-md, 6px);
  background: var(--bg, #fafafa);
  font-size: var(--font-xs2);
  line-height: 1.45;
  color: var(--ink, #111);
}
.an-kopf-text-preview.idf-markdown-preview > :first-child { margin-top: 0; }
.an-kopf-text-preview.idf-markdown-preview > :last-child { margin-bottom: 0; }
.an-kopf-text-preview p { margin: 0 0 4px; }
.an-kopf-text-empty { color: var(--mid, #555); font-style: italic; }

/* Positions-Liste — Grid: Position · Menge · Einheit · EK · VK · Rabatt ·
   Summe · Loeschen. */
.an-pos-grid {
  display: grid;
  /* Breiten aus der CSS-Variable (col-resize-Baustein); Fallback = Defaults. */
  grid-template-columns: var(--an-pos-cols,
    28px                /* Drag-Griff */
    minmax(190px, 1fr)  /* Position (+ Beschreibung-Subline) */
    84px                /* Menge */
    84px                /* Einheit */
    96px                /* EK */
    120px               /* Aufschlag % (VK wird daraus errechnet; breit genug fuer Label + Pen-Padding) */
    96px                /* VK */
    104px               /* Rabatt % */
    116px               /* Summe */
    44px                /* Markt-Ampel */
    36px                /* Duplizieren */
    36px                /* Sync */
    36px                /* Loeschen */
  );
  align-items: stretch;
  gap: 0;
}
/* Aktionsspalten: Duplizieren / Sync / Loeschen - je EINE eigene Grid-Spalte
   (wie in den anderen Listen jede Pille eine Spalte hat, Joerg-Review). Dup +
   Sync erst bei Row-Hover (leise Liste); die Loesch-Pille gated der Shared
   .idf-list-row:hover-Default. Sync verhaelt sich exakt wie die Kopier-Pille. */
.an-pos-row .an-pos-dup-btn,
.an-pos-row .an-pos-sync-btn { opacity: 0; pointer-events: none; }
.an-pos-row:hover .an-pos-dup-btn,
.an-pos-row:hover .an-pos-sync-btn { opacity: 0.55; pointer-events: auto; }
.an-pos-dup-btn:hover,
.an-pos-sync-btn:hover { opacity: 1; }

/* Aufschlag-Spalte optisch als "Eingang" markieren (dezent), VK als Ergebnis. */
.an-cell-marge .idf-list-cell-text { color: var(--ink); }

/* Zahlenspalten rechtsbuendig + tabellarische Ziffern. */
.an-num-head { text-align: right; }
#an-pos-thead .an-num-head,
#an-thead .an-cell-summe-head { text-align: right; justify-content: flex-end; }
.an-num { text-align: right; font-variant-numeric: tabular-nums; }
.an-row-summe { font-weight: 600; }

/* Zahlen buendig unter den Headern: In den Zahlen-Zellen mit Pen sitzt die Zahl
   um die Pen-Breite (24px) vom rechten Rand eingerueckt (der Pen bleibt im Fluss
   NEBEN der Zahl, nicht darueber). Der Header bekommt daher rechts extra
   Padding, damit sein Label genau ueber der Zahl steht (Joerg-Review: lieber
   Header-Padding als Pen ueber die Zahl). Summe hat keinen Pen -> kein Extra. */
#an-pos-thead .an-num-head-pen { padding: 0 36px 0 4px; }

/* Datum-Feld: readonly-Input als Anker fuer den Shared-Datepicker
   (IDF.datePicker). Sieht aus wie die anderen Kopf-Inputs; Cursor +
   fehlender Text-Caret signalisieren „klicken statt tippen". */
.an-date-input {
  cursor: pointer;
  caret-color: transparent;
  background: var(--white, #fff);
  color: var(--ink, #111);
}
.an-date-input::placeholder { color: var(--mid, #555); }

/* Summen-Footer (sticky unten). */
.an-summen {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 22px;
  justify-content: flex-end;
  align-items: baseline;
  flex-wrap: wrap;
  padding: 10px 24px;
  background: var(--white, #fff);
  border-top: 1px solid var(--line, #e5e5e5);
}
.an-summen-line { display: flex; gap: 8px; align-items: baseline; }
.an-summen-line > span { color: var(--mid, #555); font-size: var(--font-sm); }
.an-summen-line > strong { font-variant-numeric: tabular-nums; }
/* Netto ist die Leitzahl (groesser als der Rest), Deckungsbeitrag ebenso gross;
   Brutto laeuft normal mit (Joerg-Review). */
.an-summen-primary > strong { font-size: var(--font-xl); }
.an-summen-db { color: var(--mid, #555555); }

/* Rabatt-Zeile im Footer (abgezogener Gesamt-Rabatt vom Kopf): dezent
   hervorgehoben, damit der Zusammenhang Zwischensumme -> Rabatt -> Netto
   sofort lesbar ist. */
.an-summen-rabatt > strong { color: var(--primary, #c8134b); }

/* Deckungsbeitrag ist eine interne Komplex-Kennzahl — im einfachen Modus aus. */
body:not(.an-modus-komplex) .an-summen-db { display: none; }

/* Anlegen-Leiste: Freitext-Button + Quellen-Picker (Material/Katalog). */
.an-add-area {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 6px 0 0;
}
/* Alle drei Anlege-Controls (Position/Material/Artikel) gleich breit + in einer
   Reihe. Der Shared inline-add bringt fuer die Listen-Boden-Variante eine grosse
   Wrapper-Einrueckung mit (padding 12/32/20) - hier neutralisieren, damit der
   „Position"-Button exakt wie die Material-/Artikel-Picker sitzt (gleiche Hoehe
   + Breite, Joerg-Review „Buttons gleiches Design"). */
.an-add-area #an-inline-add,
.an-add-area .an-source-pick { flex: 1 1 220px; min-width: 200px; }
.an-add-area .idf-inline-add,
.an-group-add .idf-inline-add { padding: 0; }

/* Herkunft (Snapshot-Quelle) in der Positionszeile ist jetzt eine Shared
   Link-Annotation (.idf-link-annot, klickbar -> Modal), kein eigenes
   Badge-Styling mehr noetig.

   Leistungen-Modal (Katalog-Quelle) ist read-only: den Loeschen-Button des
   Standard-Artefakts ausblenden, damit von hier kein Katalog-Artikel geloescht
   wird (Marker-Klasse .an-lv-modal via computeWrapClass, leistungen-varianten-modal.js). */
.an-lv-modal .idf-sa-delete { display: none !important; }

/* "Als Artikel uebernehmen"-Affordance an Freitext-Positionen (Link-Optik). */
.an-promote-btn {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: var(--font-xs2);
  color: var(--primary, #c8134b);
}
.an-promote-btn:hover { text-decoration: underline; }
.an-promote-btn i { margin-right: 3px; opacity: 0.85; }

/* ---------------------------------------------------------------- */
/* Beschreibung-Subtext (Position + Gruppe): gerendertes Markdown +  */
/* Bearbeiten-Pen (erscheint beim Hovern). Leer -> dezente           */
/* „+ Beschreibung"-Flaeche. Editiert wird ueber den Modal-Editor     */
/* (Shared-Baustein markdown-editor).                                 */
/* ---------------------------------------------------------------- */
.an-cell-besch {
  display: flex;
  align-items: flex-start;
  gap: 4px;
}
.an-cell-besch .an-besch-text { flex: 1 1 auto; min-width: 0; }

/* Gruppen-Beschreibung: eigene volle Zeile im Kopf (flex:1 1 100% bricht sie
   in der wrap-Zeile des .an-group-head unter Titel + Controls). */
.an-group-besch {
  flex: 1 1 100%;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin-top: 2px;
}
.an-group-besch .an-besch-text { flex: 1 1 auto; min-width: 0; }

/* Kompakte Markdown-Typografie im Subtext (die idf-markdown-preview-Defaults
   sind auf Buch-Lesefluss ausgelegt -> hier klein + gedaempft). */
.an-cell-besch .idf-markdown-preview,
.an-group-besch .idf-markdown-preview {
  font-size: var(--font-xs2);
  line-height: 1.45;
  color: var(--mid, #555);
}
.an-cell-besch .idf-markdown-preview > :first-child,
.an-group-besch .idf-markdown-preview > :first-child { margin-top: 0; }
.an-cell-besch .idf-markdown-preview > :last-child,
.an-group-besch .idf-markdown-preview > :last-child { margin-bottom: 0; }
.an-cell-besch .idf-markdown-preview p,
.an-group-besch .idf-markdown-preview p { margin: 0 0 2px; }
.an-cell-besch .idf-markdown-preview ul,
.an-cell-besch .idf-markdown-preview ol,
.an-group-besch .idf-markdown-preview ul,
.an-group-besch .idf-markdown-preview ol { margin: 2px 0; padding-left: 1.3em; }

/* Bearbeiten-Pen: erscheint beim Hovern der Zeile bzw. Gruppe. */
.an-besch-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--mid, #555);
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  opacity: 0;
  transition: opacity 120ms ease, background 120ms ease, color 120ms ease;
}
.an-pos-row:hover .an-besch-btn,
.an-group:hover .an-besch-btn,
.an-besch-btn:focus-visible { opacity: 1; }
.an-besch-btn:hover { background: var(--tint-neutral, rgba(0, 0, 0, 0.06)); color: var(--ink, #111); }

/* „+ Beschreibung" (leer): dezenter Link, dauerhaft sichtbar. */
.an-besch-add {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: var(--font-xs2);
  color: var(--mid, #555555);
  opacity: 0.75;
}
.an-besch-add:hover { color: var(--accent, #167ea0); opacity: 1; text-decoration: underline; }
.an-besch-add i { margin-right: 3px; font-size: 10px; }
/* In der (dichten) Positionsliste erscheint „+ Beschreibung" erst beim Hovern
   der Zeile - wie der Bearbeiten-Pen -, damit die Liste ruhig bleibt. Im
   Gruppenkopf (wenige, prominente Koepfe) bleibt es dauerhaft sichtbar. */
.an-cell-besch.is-empty .an-besch-add { opacity: 0; transition: opacity 120ms ease; }
.an-pos-row:hover .an-cell-besch.is-empty .an-besch-add,
.an-cell-besch.is-empty .an-besch-add:focus-visible { opacity: 0.85; }

/* ================================================================ */
/* Komplexer Modus: Themen-Gruppen (angebot_gruppen)                 */
/* Rein additiv: nutzt das bestehende .an-pos-grid (col-resize) fuer */
/* die Zwischensummen-Zeile, damit die Betraege unter der Summe-     */
/* Spalte stehen. Nur im Komplex-Modus im DOM (JS-gesteuert).        */
/* ================================================================ */

/* „Gruppe hinzufügen"-Button: nur im Komplex-Modus, schwarz wie der aktive
   Komplex-Toggle (.idf-list-toggle.is-active). */
body:not(.an-modus-komplex) .an-group-add-btn { display: none; }

/* Im Komplex-Modus hat JEDE Gruppe ihre eigene Anlege-Leiste (Position +
   Material + Artikel); die generische Leiste ganz unten entfaellt dann. */
body.an-modus-komplex .an-add-area { display: none; }
.an-group-add-btn {
  background: var(--ink, #111);
  color: var(--white, #fff);
  border-color: var(--ink, #111);
}
/* Hover = Abdunklung der Ink-Basis, bleibt an --ink gekoppelt; rendert #040404,
   quasi-identisch zum frueheren #000 (Audit L-E5/#201). */
.an-group-add-btn:hover {
  background: color-mix(in srgb, var(--ink) 25%, black);
  border-color: color-mix(in srgb, var(--ink) 25%, black);
  color: var(--white, #fff);
}

/* Gruppen-Sektion: dezente Karte, klare Trennung zwischen Themen. */
.an-group {
  border: 1px solid var(--line, #e5e5e5);
  border-radius: 8px;
  margin: 0 0 22px;   /* etwas mehr Luft zur naechsten Gruppe */
  /* overflow sichtbar: sonst schneidet die Karte die Tooltips (liegen ueber
     dem Element) und col-resize-Griffe ab. Kopf-Ecken via border-radius. */
  overflow: visible;
  background: var(--white, #fff);
}
.an-group.an-group-none { border-style: dashed; }
/* Optionalgruppe klar markiert (zaehlt nicht in die Gesamtsumme). */
.an-group.is-optional-group { border-color: var(--mid, #555555); border-style: dashed; }

/* Loeschen-Pillen sitzen ganz rechts; ihr zentrierter data-tooltip liefe nach
   rechts aus dem Viewport und erzeugt einen horizontalen Scrollbalken (die
   Seite springt). Fuer diese Pillen den Tooltip daher rechtsbuendig oeffnen
   (nach links), statt zentriert. Gilt fuer die Gruppen-Loesch-Pille und die
   Positions-Loesch-Pillen (letzte Grid-Spalte). */
.an-group-del[data-tooltip]:hover::after,
.an-group-del[data-tooltip]:focus-visible::after,
.an-group-dup[data-tooltip]:hover::after,
.an-group-dup[data-tooltip]:focus-visible::after,
.an-pos-row .idf-list-delete-btn[data-tooltip]:hover::after,
.an-pos-row .idf-list-delete-btn[data-tooltip]:focus-visible::after,
.an-pos-row .an-pos-dup-btn[data-tooltip]:hover::after,
.an-pos-row .an-pos-dup-btn[data-tooltip]:focus-visible::after,
.an-pos-row .an-pos-sync-btn[data-tooltip]:hover::after,
.an-pos-row .an-pos-sync-btn[data-tooltip]:focus-visible::after {
  left: auto;
  right: 0;
  transform: none;
}

/* Gruppen-Kopf als GRID: [Titel/Controls 1fr] [Dup 36] [Sync 36] [Loeschen 36].
   So sitzen die Gruppen-Aktionspillen exakt unter den Positions-Aktionsspalten
   (gleiche 32px-Einrueckung + gleiche 36px-Spalten wie die .an-pos-grid-Zeilen -
   Joerg-Review „alle Pillen auf einer Linie"). Der Kopfinhalt (Titel + Optional/
   Vergabe/Rabatt) lebt im 1fr-Feld und bricht dort um; die Beschreibungszeile
   spannt alle Spalten. Bei „Ohne Gruppe" bleiben die Aktionsspalten leer. */
.an-group-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px 36px 36px;
  align-items: center;
  gap: 0;
  padding: 8px 32px;
  background: var(--bg-hover, #f8f8f8);
  border-bottom: 1px solid var(--line, #e5e5e5);
  border-radius: 7px 7px 0 0;
  print-color-adjust: exact;
}
/* Kopfinhalt (alles ausser den Aktionsspalten) - flex mit Umbruch wie zuvor. */
.an-group-headmain {
  grid-column: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  min-width: 0;
}
/* Dup in die Sync-vorige Spalte (2), Loeschen in die letzte Spalte (4) - so
   deckt sich Dup mit der Positions-Dup-Spalte und Loeschen mit der Positions-
   Loesch-Spalte; die Sync-Spalte (3) bleibt in der Gruppe leer (Gruppen haben
   keinen Sync). */
.an-group-head > .an-group-dup { grid-column: 2; justify-self: center; }
.an-group-head > .an-group-del { grid-column: 4; justify-self: center; }
/* Beschreibungszeile unter Titel + Controls spannt die ganze Breite. */
.an-group-head > .an-group-besch { grid-column: 1 / -1; }
/* Gruppen-Aktionspillen erst bei Hover (leise), wie die Positions-Pillen - nicht
   mehr dauerhaft sichtbar (Joerg-Review „Pillen-Verhalten einheitlich"). */
.an-group-head .an-group-dup,
.an-group-head .an-group-del { opacity: 0; pointer-events: none; }
.an-group-head:hover .an-group-dup,
.an-group-head:hover .an-group-del { opacity: 0.55; pointer-events: auto; }
.an-group-head .an-group-dup:hover,
.an-group-head .an-group-del:hover { opacity: 1; }

/* Titel-Zeile waechst und schiebt die Controls nach rechts. */
.an-group-titleline { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; }
.an-group-drag { flex: 0 0 20px; display: inline-flex; justify-content: center; align-items: center; }
.an-group-drag-handle { cursor: grab; color: var(--mid, #555555); }
.an-group-drag-handle:active { cursor: grabbing; }

/* Ein-/Ausklappen: Chevron links am Kopf. Zugeklappt sind Positionen + Anlege-
   Leiste aus; Kopf + Zwischensumme bleiben sichtbar. */
.an-group-collapse {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--mid, #555);
  cursor: pointer;
  padding: 2px 4px;
  font-size: 13px;
  line-height: 1;
}
.an-group-collapse:hover { color: var(--ink, #111); }
.an-group-collapse i { transition: transform 0.12s ease; }
.an-group.is-collapsed .an-group-collapse i { transform: rotate(-90deg); }
.an-group.is-collapsed .an-group-body,
.an-group.is-collapsed .an-group-add { display: none; }

/* Titel wie ein Positions-Titel: Text content-breit, Pen direkt dahinter,
   Edit ueber die ganze Zeile. Groesserer Titel-Text. */
.an-group-title { flex: 1 1 auto; min-width: 0; }
/* 19px bewusst ausserhalb der Token-Skala (prominenter Gruppen-Titel, 18 < x < 20) - Audit L-E3/#201, dokumentierte Ausnahme. */
.an-group-title-text { font-size: 19px; font-weight: 800; color: var(--ink, #111); }
.an-group-title.idf-list-cell-two-line-row > .an-group-title-text { flex: 0 1 auto; }
.an-group-title .idf-inline-edit-btn { margin-left: 0; }
/* Edit fuellt die Titel-Zeile per flex-grow, ohne die 100%-Basis-Umbruch-Falle. */
.an-group-title.is-editing { width: auto; }
/* 15px bewusst ausserhalb der Token-Skala (gewollte Hierarchie 13 < x < 20) - Audit L-E3/#201, dokumentierte Ausnahme. */
.an-group-title-none {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--mid, #555); font-weight: 700; font-size: 15px;
}

/* „optional"-Badge neben dem Titel. */
/* 10px bewusst ausserhalb der Token-Skala (Uppercase-Badge im Gruppenkopf) - Audit L-E3/#201, dokumentierte Ausnahme. */
.an-group-optional-badge {
  flex: 0 0 auto;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--mid, #555); background: var(--tint-neutral, rgba(0, 0, 0, 0.06));
  border-radius: 999px; padding: 2px 8px;
}

/* Kleine Feld-Labels (Vergabe/Rabatt). */
/* 10px bewusst ausserhalb der Token-Skala (Uppercase-Minilabel im Gruppenkopf) - Audit L-E3/#201, dokumentierte Ausnahme. */
.an-group-lbl {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.02em; color: var(--mid, #555); margin-right: 4px;
}

/* Controls rechts (bei Platzmangel unter den Titel). */
.an-group-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; flex: 0 0 auto; }
.an-group-optional { flex: 0 0 auto; font-size: var(--font-xs2); }
.an-group-sub-vergabe { display: inline-flex; align-items: center; gap: 4px; }
.an-group-sub-vergabe .an-group-sub-mount { display: inline-block; min-width: 160px; }

/* Positionen-Body der Gruppe. */
.an-group-body:empty { min-height: 0; }

/* Anlegen-Leiste pro Gruppe: Position + Material + Artikel nebeneinander,
   gleiche Breite + gleiche Optik (Harmonisierung siehe .an-source-pick unten). */
.an-group-add {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 6px 12px 10px;
}
.an-group-add-pos, .an-group-add-src { flex: 1 1 180px; min-width: 150px; }

/* Quellen-Picker-Optik (dashed/transparent/zentriert) lebt jetzt 1:1 als Shared-Variante
   .combobox.is-add-style in idf-core.css, aktiviert via createCombobox({ cls }) in buildPicker() - Audit L-E6/#201. */

/* Zwischensummen-Zeile: nutzt .an-pos-grid -> Betrag steht unter „Summe". */
/* Zwischensummen-Zeile: GLEICHES Muster wie der Gesamt-Footer (.an-summen),
   rechtsbuendige „Label Wert"-Paare (.an-summen-line) nebeneinander. */
.an-group-sub {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 22px;
  padding: 8px 12px;
  border-top: 1px solid var(--line, #e5e5e5);
  border-bottom: 2px solid var(--ink, #111111);  /* durchgezogene 2px-Linie am Gruppen-Ende */
  background: var(--bg, #fafafa);
  print-color-adjust: exact;
}
/* Netto/Ergebnis der Gruppe: fett, aber kleiner als die grosse Gesamt-Summe
   (Hierarchie: Gruppen-Zwischensumme < Gesamt). */
/* 15px bewusst ausserhalb der Token-Skala (gewollte Hierarchie 13 < x < 20) - Audit L-E3/#201, dokumentierte Ausnahme. */
.an-group-sub .an-group-sub-net > strong { font-weight: 800; color: var(--ink, #111); font-size: 15px; }
.an-group-sub.is-optional > .an-summen-line > span,
.an-group-sub.is-optional > .an-summen-line > strong { color: var(--mid, #555555); font-style: italic; }

/* Gruppen-Rabatt-Feld im Kopf (neben Vergabe): sichtbar + inline editierbar,
   Eingabe schmal (nicht die ganze Zeile). */
.an-group-rabatt { display: inline-flex; align-items: center; gap: 4px; }
.an-group-rabatt-text { min-width: 30px; text-align: right; color: var(--primary, #c8134b); font-weight: 700; }
.an-group-rabatt.is-editing { width: auto; flex: 0 0 auto; }
.an-group-rabatt.is-editing .idf-inline-edit-input { width: 48px; flex: 0 0 48px; }

/* Herkunft-Link + Gruppen-Chip + „Als Artikel übernehmen" nebeneinander in
   EINER Sub-Zeile (spart Platz). Items brechen um statt zu schrumpfen/ellipsen. */
.an-cell-meta { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; }
.an-cell-meta > * { flex: 0 0 auto; max-width: 100%; }
.an-cell-meta .an-promote { overflow: visible; }

/* Gruppen-Zuordnungs-Chip in der Positionszeile (Subline). */
.an-cell-gruppe {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-xs2);
  color: var(--mid, #555);
}
.an-cell-gruppe-ico { opacity: 0.7; }
.an-cell-gruppe .idf-inline-edit-btn { margin-left: 2px; }

/* ================================================================ */
/* Textbausteine (texte.php) - Verwaltung der Einleitungs-/Schluss-  */
/* text-Vorlagen (angebot_basistexte). Grid + Art-Pille + Standard-  */
/* Toggle + Text-Vorschau (Markdown, Modal-Editor).                  */
/* ================================================================ */
.an-texte-grid {
  display: grid;
  /* Breiten aus der CSS-Variable (col-resize-Baustein); Fallback = Defaults.
     Titel ist die Flex-/Puffer-Spalte (Standard wie in allen Listen), Art/
     Text sind feste, resizebare Spalten; Drag/Standard/Loeschen sind Icon-
     Spalten (nicht resizebar). */
  grid-template-columns: var(--an-texte-cols,
    28px                /* Drag-Griff */
    minmax(200px, 1fr)  /* Titel (Flex/Puffer) */
    130px               /* Art */
    520px               /* Text */
    44px                /* Standard */
    44px                /* Loeschen */
  );
  align-items: center;
}
.an-texte-cell-drag { cursor: grab; }
.an-texte-cell-drag .idf-list-drag-handle { color: var(--mid, #555555); }

/* Art-Pille (getoenter Baustein wie die Status-Pillen). */
.an-texte-art-pill[data-art="einleitung"] { background: var(--tint-accent);  color: var(--accent, #167ea0); }
.an-texte-art-pill[data-art="schluss"]    { background: var(--tint-neutral); color: var(--mid, #555); }

/* Standard-Toggle: Shared-Baustein IDF.createFlagCheck (Compact-Mode, fa-star)
   in der .idf-list-cell-action-Zelle, gemountet in wireRow. Ruhezustand/Hover/
   Active kommen aus idf-flag-check.css - kein lokaler Pillen-Skin mehr. */

/* Text-Vorschau (Markdown) + Bearbeiten-Pen (erscheint beim Hovern der Zeile).
   „+ Text" (leer) bleibt dezent sichtbar. */
.an-texte-textcell { display: flex; align-items: flex-start; gap: 4px; padding: 4px 0; }
.an-texte-textcell .an-besch-text { flex: 1 1 auto; min-width: 0; }
.an-texte-textcell .idf-markdown-preview {
  font-size: var(--font-xs2);
  line-height: 1.45;
  color: var(--mid, #555);
}
.an-texte-textcell .idf-markdown-preview > :first-child { margin-top: 0; }
.an-texte-textcell .idf-markdown-preview > :last-child { margin-bottom: 0; }
.an-texte-textcell .idf-markdown-preview p { margin: 0 0 2px; }
.an-texte-textcell .idf-markdown-preview ul,
.an-texte-textcell .idf-markdown-preview ol { margin: 2px 0; padding-left: 1.3em; }
.an-texte-row:hover .an-besch-btn,
.an-texte-row .an-besch-btn:focus-visible { opacity: 1; }

/* Anlegen-Leiste (wie im Editor). */
.an-texte-add-area { padding: 10px 0 4px; }

/* ================================================================ */
/* Sync-Modal (Position <-> Stammdaten): Feld-Liste mit Haken + zwei  */
/* Richtungs-Buttons. Standard-Typografie (erbt vom Modal-Body), nur   */
/* Layout + Token-Farben, KEINE eigenen Schriftgroessen.               */
/* ================================================================ */
.an-sync-intro { margin: 0 0 12px; }
.an-sync-table { width: 100%; border-collapse: collapse; }
.an-sync-table th {
  text-align: left;
  font-weight: 700;
  color: var(--mid, #555);
  padding: 5px 8px;
  border-bottom: 1px solid var(--line, #e5e5e5);
}
.an-sync-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--line, #e5e5e5);
  vertical-align: top;
}
.an-sync-table .an-sync-c { width: 30px; text-align: center; }
.an-sync-table .an-sync-c input { width: 16px; height: 16px; cursor: pointer; }
.an-sync-table .an-sync-f { font-weight: 600; color: var(--ink, #111); white-space: nowrap; }
.an-sync-table .an-sync-v { color: var(--ink, #111); }
.an-sync-table tr.is-same td { color: var(--mid, #555555); }