/* CARmove "App aus einem Guss" (#1206 Paket 2): die neun wiederverwendbaren Bausteine.
   Alle Farben aus tokens.css (hell und dunkel kommen ueber die Token, kein festes Hex).
   Klassen mit Praefix ag-, weil die kurzen Namen des Design-Buchs (.row, .st, .z, .b, .hint)
   in components.css/legacy.css schon belegt sind. Zuordnung Buch -> hier:
   .sub a -> ag-reiter, .chips -> ag-chips, .seg -> ag-segment, .z -> ag-zahl, .st -> ag-status,
   .row -> ag-zeile, .fold -> ag-klapp, .hint -> ag-hinweis, .top (h1 + p) -> ag-kopf.
   Schon vorhanden und hier NICHT doppelt gebaut: cm-abschnitt-* (components.css, #1144),
   Hauptknopf/Nebenknopf (.cm-btn in components.css).
   Container-Query: ein Eltern-Element mit .ag-behaelter, ab 900 px Breite wird umgebaut. */

.ag-behaelter { container: ag / inline-size; }

/* #1276: Lesebreite für Fließtext (72 Zeichen) und Formularbreite (760 px).
   Datenseiten laufen über die volle Breite — Absätze und Formulare bleiben schmal. */
.ag-lesebreite { max-width: 72ch; }
.ag-formular { max-width: 760px; }

/* 1. Reiter: eine Zeile, wischbar, Unterstreichung statt Knopf-Teppich */
.ag-reiter { display: flex; gap: 4px; padding: 0 var(--space-4, 16px); overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); background: var(--ground); }
.ag-reiter::-webkit-scrollbar { display: none; }
.ag-reiter a, .ag-reiter button { flex: none; display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 10px 10px 11px; margin-bottom: -1px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--ink-muted); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.ag-reiter a:hover, .ag-reiter button:hover { color: var(--ink); }
.ag-reiter .is-aktiv, .ag-reiter [aria-current="page"], .ag-reiter [aria-selected="true"] { color: var(--ink); border-bottom-color: var(--brand); }

/* 2. Chips: Filter, ausgewaehlt = dunkel. Brechen auf allen Breiten um,
   keiner wird abgeschnitten (Design-Regel 8, #1276; Entscheidung vom
   10.11.: auch am Handy umbrechen statt wischen, #1276/#1300). */
.ag-chips { display: flex; flex-wrap: wrap; gap: 6px; overflow: visible; }
.ag-chips a, .ag-chips button { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink-muted); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.ag-chips .is-aktiv, .ag-chips [aria-pressed="true"], .ag-chips [aria-current="true"] { background: var(--ink); color: var(--ground); border-color: var(--ink); }

/* 3. Segment: Umschalter mit wenigen Optionen (z. B. Zeilen / Kacheln) */
.ag-segment { display: inline-flex; flex: none; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); }
.ag-segment a, .ag-segment button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border: 0; background: transparent; color: var(--ink-muted); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.ag-segment .is-aktiv, .ag-segment [aria-pressed="true"], .ag-segment [aria-current="true"] { background: var(--ink); color: var(--ground); }

/* 4. Zahl-Kachel: eine Kennzahl, Name darunter, optional Zusatz */
.ag-zahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ag-zahl { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); text-decoration: none; }
.ag-zahl b { font: 800 22px/1.1 var(--font-display, var(--font-sans)); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-zahl span { font-size: 13px; color: var(--ink-muted); }
.ag-zahl small { font-size: 12px; color: var(--ink-muted); }
.ag-zahl.is-danger b { color: var(--danger); }
.ag-zahl.is-warn b { color: var(--warn); }
.ag-zahl.is-ok b { color: var(--ok); }
.ag-zahl.is-info b { color: var(--info); }

/* 5. Status: immer Wort UND Farbe (Punkt + Text), nie Farbe allein */
.ag-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; background: var(--surface-sunken); color: var(--ink-muted); font-size: 13px; font-weight: 700; white-space: nowrap; }
.ag-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.ag-status.is-ok { background: var(--ok-tint); color: var(--ok); }
.ag-status.is-warn { background: var(--warn-tint); color: var(--warn); }
.ag-status.is-danger { background: var(--danger-tint); color: var(--danger); }
.ag-status.is-info { background: var(--info-tint); color: var(--info); }

/* 6. Zeile 56 px mit Trennlinie: Symbol/Bild, Titel + Nebenzeile, Wert rechts */
.ag-zeile { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.ag-zeile:first-child { border-top: 0; }
.ag-zeile-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ag-zeile-text b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-zeile-text small { font-size: 13px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-zeile-wert { flex: none; font: 800 16px var(--font-display, var(--font-sans)); }
.ag-zeile-wert:empty { display: none; }
.ag-zeile-wert.is-danger { color: var(--danger); }
.ag-zeile-wert.is-warn { color: var(--warn); }
.ag-zeile-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--surface-sunken); color: var(--ink-muted); }
.ag-zeile-icon.is-danger { background: var(--danger-tint); color: var(--danger); }
.ag-zeile-icon.is-warn { background: var(--warn-tint); color: var(--warn); }
.ag-zeile-icon.is-ok { background: var(--ok-tint); color: var(--ok); }
.ag-zeile-pfeil { flex: none; color: var(--line-strong); }
/* Zeile, deren Hauptfläche ein Link ist und die rechts einen freien Knopf
   trägt (Räder-Lager #1344: Kleinanzeigen-Text je Zeile). */
.ag-zeile-haupt { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.ag-zeile-haupt:hover .ag-zeile-text b { text-decoration: underline; }

/* 7. Klappbarer Abschnitt (<details>): Kopf = Zeile, "Alle N zeigen" als Nebenknopf.
   Der Abschnitts-Rahmen mit Icon und Zaehler ist cm-abschnitt-* (components.css). */
.ag-klapp { border-top: 1px solid var(--line); }
.ag-klapp:first-of-type { border-top: 0; }
.ag-klapp > summary { display: flex; align-items: center; gap: 8px; min-height: 56px; list-style: none; cursor: pointer; }
.ag-klapp > summary::-webkit-details-marker { display: none; }
.ag-klapp > summary .ag-zeile { flex: 1; min-width: 0; border-top: 0; }
.ag-klapp[open] > summary > .ag-zeile-pfeil { transform: rotate(180deg); }
.ag-klapp-inhalt { display: flex; flex-direction: column; padding: 0 0 10px 52px; }
.ag-klapp-alle { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }

/* 8. Hinweisleiste (nur auf Heute): rot nur, wenn dringend, sonst neutral */
.ag-hinweis { border-radius: 12px; background: var(--surface-sunken); color: var(--ink); }
.ag-hinweis.is-danger { background: var(--danger-tint); color: var(--danger); }
.ag-hinweis > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 12px; list-style: none; cursor: pointer; }
.ag-hinweis > summary::-webkit-details-marker { display: none; }
.ag-hinweis > summary b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-hinweis > summary span { margin-left: auto; padding: 1px 8px; border-radius: 999px; background: var(--surface); color: var(--ink-muted); font-size: 13px; white-space: nowrap; }
.ag-hinweis-inhalt { padding: 0 12px 8px; color: var(--ink); }

/* 9. Ueberschrift-Kopf: Seitenname ohne Punkt + grauer Kontextsatz */
.ag-kopf { min-width: 0; padding: 14px var(--space-4, 16px) 8px; background: var(--ground); }
.ag-kopf h1 { margin: 0; font: 800 28px/1.15 var(--font-display, var(--font-sans)); letter-spacing: -.02em; color: var(--ink); }
.ag-kopf p { margin: 3px 0 0; font-size: 13px; color: var(--ink-muted); }

/* Ab 900 px Containerbreite: Kennzahlen füllen die Reihe (auto-fit statt fester
   2/4/6 Spalten, #1276), Reiter mit mehr Luft */
@container ag (min-width: 900px) {
  .ag-zahlen { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .ag-zahl b { font-size: 26px; }
  .ag-reiter a, .ag-reiter button { padding: 12px 12px 13px; }
  .ag-kopf { padding: 22px 28px 10px; }
  .ag-kopf h1 { font-size: 30px; }
}

/* QA #1206: grauer Kontextsatz unter dem Seitennamen, auf jeder Seite gleich
   (stand nur in ag-seite-akte.css, auf Heute und Liste blieb er schwarz und 16 px). */
.ag-kontext { margin: 0; color: var(--ink-muted); font-size: 13px; line-height: 19px; font-weight: 400; overflow-wrap: anywhere; }

/* QA #1206: Links ohne Klasse bekommen aus legacy.css (.cm-content a:not([class])) Orange und
   Unterstreichung. Reiter, Chips und Segment-Optionen behalten ihre Baustein-Farbe. */
body .ag-reiter a:not([class]):not([aria-current]), body .ag-chips a:not([class]):not([aria-current]), body .ag-segment a:not([class]):not([aria-current]) { color: var(--ink-muted); text-decoration: none; }
body .ag-reiter a:not([class]):not([aria-current]):hover, body .ag-chips a:not([class]):not([aria-current]):hover, body .ag-segment a:not([class]):not([aria-current]):hover { color: var(--ink); }

/* Ungerade Kachel-Zahl (z. B. 3) im 2-Spalten-Raster: die letzte Kachel nimmt die volle Breite. */
@container ag (max-width: 899px) {
  .ag-zahlen > .ag-zahl:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* #1206 Zusammenführung: Aktionszeile am Anfang des Seiteninhalts (Rückruf auf Heute u. a.). */
.ag-aktionen { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
body .ag-chips a[aria-current="true"]:not([class]) { color: var(--ground); text-decoration: none; }
body .ag-reiter a[aria-current="page"]:not([class]) { color: var(--ink); text-decoration: none; }

/* #1206 Nachbesserung: Kopfzeile mit Umriss-Knopf rechts (Verkauf), Rot-Umriss im Hinweisband,
   Links in Zeilen ohne Orange/Unterstrich, 44-px-Tippflaechen. */
.ag-kopfzeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.ag-kopfzeile-text { min-width: 0; flex: 1; }
.ag-kopfzeile .cm-btn { flex: none; min-height: 44px; }
body .cm-banner .cm-btn.secondary.is-danger, body .cm-btn.secondary.is-danger { color: var(--danger); border-color: var(--danger-line); background: transparent; }
.cm-dran-link, .cm-list-link { color: var(--ink); text-decoration: none; }
.cm-response-name, .cm-response-alle { text-decoration: none; }
.cm-response-name { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.cm-response-handy .cm-response-zeile a.cm-btn { text-decoration: none; }

/* #1206 Prozessbalken der Akte: Namen erst beim Antippen */
.ag-prozess-namen > summary { display: flex; align-items: center; min-height: 44px; list-style: none; cursor: pointer; font-size: 13px; color: var(--ink-muted); }
.ag-prozess-namen > summary::-webkit-details-marker { display: none; }
.ag-prozess-namen ol { margin: 0 0 8px; padding-left: 22px; color: var(--ink); font-size: 14px; line-height: 24px; }
.ag-prozess-namen li.is-jetzt { font-weight: 800; }
.ag-prozess-namen li.is-skipped { color: var(--ink-muted); text-decoration: line-through; }

/* #1206 Tippflaechen 44 px (Handy und PC) fuer Huelle und neue Bausteine */
.cm-user { min-height: 44px; }
.cm-rueckruf-toast .t .zu { width: 44px; height: 44px; }
body .cm-seg.lg a { min-height: 44px; height: 44px; }
.cm-toolbar .cm-chip { min-height: 44px; }

/* Links in der Nebenzeile einer Zeile: ruhig, nicht als orange Unterstreichung (#1206 Sichtprüfung) */
.ag-zeile-text small a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ag-zeile-text small a:hover { color: var(--ink); }
/* #1227: Titel-Link einer Zeile ist eine ganze Tippfläche (>= 44 px) */
.ag-zeile-text > a { display: flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; }
.ag-zeile-text > a b { min-width: 0; }

/* Suchfeld als <form>: die globale form-Regel (Spalte) darf Lupe und Feld nicht stapeln (#1206 Sichtprüfung) */
form.ag-suche { flex-direction: row; align-items: center; }

/* #1344d Punkt 1: Raeder-Lager-Suche mit Saison, Lagerort und Knopf. Lupe und
   Suchfeld sind eine Einheit; unter 900 px Containerbreite bekommt das Suchfeld
   eine eigene Zeile, Saison, Lagerort und Knopf teilen sich die zweite. */
.ag-suche .ag-suche-feld { display: flex; flex: 1; min-width: 0; align-items: center; gap: 8px; }
.ag-suche .ag-suche-feld svg { flex: none; }
.ag-ankauf .ag-suche .cm-select { flex: none; }
.ag-ankauf .ag-suche input[name="lagerort"] { flex: none; width: 150px; }

@container ag (max-width: 899px) {
  .ag-suche:has(.ag-suche-feld) { flex-wrap: wrap; }
  .ag-suche .ag-suche-feld { flex: 1 1 100%; }
  .ag-ankauf .ag-suche .cm-select { flex: 1 1 auto; }
  .ag-ankauf .ag-suche .cm-select select { width: 100%; }
  .ag-ankauf .ag-suche input[name="lagerort"] { flex: 1 1 auto; width: auto; }
  .ag-ankauf .ag-suche .cm-btn { flex: 1 1 auto; }
}

/* #1512 (QM beta.288): die Unternavigation des Bereichs Verkauf bleibt am Handy
   eine Zeile und ist wischbar — der Umbruch aus #1273c machte die Zeile auf
   kleinen Geräten fünf Zeilen (236 px) hoch und drückte den Inhalt zusammen.
   Die Grundregel .sub (components.css) ist schon einzeilig und wischbar;
   reiter.js (#1276c) holt den aktiven Reiter in den sichtbaren Bereich und
   zeichnet am Rand einen weichen Verlauf, wenn noch Reiter folgen. */
/* #1216: Darstellungs-Umschalter (Hell/Dunkel) im Konto-Menü und Mandanten-Umschalter
   in der Seitenleiste als 44-px-Tippflaechen statt 30 bzw. ~35 px */
.cm-profile-panel .cm-seg button { height: auto; min-height: 44px; padding: 0 14px; font: 600 13px/1 var(--font-sans); letter-spacing: 0; text-transform: none; }
.cm-tenant { min-height: 44px; }
.cm-tenant-list button.nav { min-height: 44px; }
/* #1227: Textlinks im Verlauf der Kontakt-Akte und Links in aufgeklappten Akte-Abschnitten als Tippfläche (>= 44 px) */
.cm-steps .t > a, .ag-fold-koerper .cm-link { display: inline-flex; align-items: center; min-height: 44px; }
/* #269r: „Ändern“ in der Nebenzeile einer Zahl-Kachel (Verlust) als 44-px-Tippfläche,
   ruhig mit dezentem Unterstrich statt Orange */
.cm-app .ag-zahl small a:not([class]) { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; justify-content: center; color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cm-app .ag-zahl small a:not([class]):hover { color: var(--ink); }
/* Rückruf-Karte am Handy: der lange Status ("Nicht erreicht · 1. Versuch") steht unter dem Text, nicht daneben */
@media (max-width: 759px) {
  .ag-rueckruf > summary .ag-zeile { flex-wrap: wrap; }
  .ag-rueckruf > summary .ag-zeile-text { flex: 1 1 calc(100% - 64px); min-width: 0; }
  .ag-rueckruf > summary .ag-status { flex: 0 0 auto; margin-left: 52px; }
}

/* #948 Stufe b1: Deckungsanzeige eines Katalogprodukts (Verkaufsblock, Formular,
   Akte-Hinweis). Wort UND Farbe („nicht gedeckt“ steht als Text dazu), keine
   Beträge von Prämie/Provision. Alle Farben aus tokens.css. */
.ag-deckung { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; padding: 12px 14px; border: 1px solid var(--line); border-left: 4px solid var(--info); border-radius: 12px; background: var(--surface); color: var(--ink); }
.ag-deckung > b { font: 700 16px/1.3 var(--font-sans); }
.ag-deckung-titel { margin-top: 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); }
.ag-deckung-zeile { display: flex; align-items: center; gap: 8px; min-height: 34px; font-size: 14px; }
.ag-deckung-zeile svg { flex: none; color: var(--ok); }
.ag-deckung-zeile b { margin-left: auto; font-weight: 700; }
.ag-deckung-zeile.ist-nicht { color: var(--ink-muted); }
.ag-deckung-zeile.ist-nicht svg { color: var(--line-strong); }
.ag-deckung-ausschluss { margin: 4px 0 0; font-size: 13px; color: var(--ink-muted); }
.ag-deckung-fuss { margin: 8px 0 0; font-size: 13px; color: var(--ink-muted); }

/* Aufklapper „Deckung ansehen“ im Akte-Hinweis: Tippfläche >= 44 px, ruhig */
.ag-deckung-klapp { margin-top: 8px; border-top: 1px solid var(--line); }
.ag-deckung-klapp > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; list-style: none; cursor: pointer; font-weight: 600; }
.ag-deckung-klapp > summary::-webkit-details-marker { display: none; }
.ag-deckung-klapp > summary svg { margin-left: auto; color: var(--line-strong); }
.ag-deckung-klapp[open] > summary svg { transform: rotate(180deg); }
.ag-deckung-klapp .ag-deckung { margin-top: 0; }

/* Staffel-Eingaben im Produktformular: je Stufe km/% nebeneinander */
.ag-staffel { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ag-staffel input { width: 100%; }
.ag-staffel-kopf { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 13px; color: var(--ink-muted); }

/* Baugruppen als Haken im Produktformular: Kacheln, ab 900 px zwei Spalten */
.ag-baugruppen { display: grid; grid-template-columns: 1fr; gap: 8px; }
.ag-baugruppen .cm-check { align-items: center; min-height: 52px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); }
@container ag (min-width: 900px) {
  .ag-baugruppen { grid-template-columns: 1fr 1fr; }
}