/* arbeitsflaeche.css — Anordnung aus dem Handoff, Farben aus der CI.
 *
 * KEINE Viewport-Einheit hier. shell.css:76-90 setzt am .shell bereits
 * grid-template-rows: 100vh und macht .shell-main zu
 * grid-template-rows: var(--topbar-h) 1fr mit overflow: hidden — die
 * Seitenzeile ist damit schon begrenzt. height: 100% loest darin auf;
 * ein calc(100vh - …) waere eine zweite, konkurrierende Rechnung und
 * genau die Fehlerklasse, die den Seitenueberlauf erzeugt (die Kette hat
 * ausserdem eine optionale Bannerzeile, shell.css:98, die keine Rechnung
 * kennt).
 *
 * Token-Namen sind an tokens.css/theme.css abgeglichen: es gibt KEIN
 * --space-*, KEIN --shadow-2 und KEIN --on-accent; die Namen heissen
 * --r/--r-lg, --shadow-lg und --accent-on.
 */

.flaeche {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  height: 100%;
  min-height: 0;
}

.flaeche-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

/* ── Kopf ───────────────────────────────────────────────────────── */
.flaeche-kopf {
  height: 70px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 20px;
  border-bottom: 1px solid var(--border);
}
.flaeche-kopf-links { display: flex; align-items: center; gap: 8px; position: relative; }
.flaeche-kopf-rechts { display: flex; align-items: center; gap: 14px; }
.flaeche-link { color: var(--fg-muted); text-decoration: none; font-size: 13px; }
.flaeche-link:hover { color: var(--fg); }

.flaeche-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 17px/1.2 var(--font-ui, inherit);
  background: none;
  border: 0;
  color: var(--fg);
  cursor: pointer;
  padding: 6px 8px;
  border-radius: var(--r);
}
.flaeche-trigger:hover { background: var(--surface-2); }
.flaeche-trigger-chevron { display: inline-flex; color: var(--fg-muted); }

.flaeche-kbd {
  font: 11px/1 var(--font-mono);
  color: var(--fg-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 3px 5px;
}

/* ── Agentenwahl ────────────────────────────────────────────────── */
.flaeche-picker {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 360px;
  max-width: calc(100vw - 32px);
  max-height: 440px;
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  z-index: 20;
}
.flaeche-picker-suche {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--fg);
  font: inherit;
}
.flaeche-picker-zeile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  background: none;
  border: 0;
  color: var(--fg);
  cursor: pointer;
  font: inherit;
}
.flaeche-picker-zeile small { color: var(--fg-muted); font-size: 12px; }
.flaeche-picker-zeile:hover,
.flaeche-picker-zeile:focus-visible { background: var(--surface-2); }

/* ── Hilfe (Welle 2) ────────────────────────────────────────────────
   Knopf und Popover sind das Paar zu Trigger und Picker: gleicher
   Container (.flaeche-kopf-links, position: relative), gleiche Ablage
   unter der Kopfzeile, gleiche Tokens. KEINE Viewport-Hoehe (Kopf der
   Datei); die Breite darf wie beim Picker am Fenster anschlagen. */
.flaeche-hilfe-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--fg-muted);
  cursor: pointer;
}
.flaeche-hilfe-knopf:hover,
.flaeche-hilfe-knopf:focus-visible,
.flaeche-hilfe-knopf[aria-expanded="true"] { background: var(--surface-2); color: var(--fg); }

.flaeche-hilfe {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 520px;
  max-width: calc(100vw - 32px);
  max-height: 560px;
  overflow: auto;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  z-index: 20;
}
/* Das Popover traegt den Fokus (tabindex="-1"). Der Ring aus theme.css
   (:focus-visible) verloere gegen den eigenen box-shadow oben — gleiche
   Spezifitaet, spaetere Datei; deshalb beide gestapelt. Mit Rueckfall:
   der Chat laedt tokens.css nicht, dort ist --shadow-lg undefiniert, und
   ein Stapel mit undefiniertem Glied faellt als Ganzes auf none — der
   Ring waere weg (gemessen 05.09.2026 an der laufenden Instanz). */
.flaeche-hilfe:focus-visible { box-shadow: var(--shadow-lg, 0 0 0 transparent), var(--focus-ring); }
.flaeche-hilfe-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--fg);
}
.flaeche-hilfe-abschnitt h3 { margin: 0 0 4px; }
.flaeche-hilfe-abschnitt p,
.flaeche-hilfe-abschnitt ol { margin: 0; }
.flaeche-hilfe-ablauf { padding-left: 18px; }
.flaeche-hilfe-eingaben { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.flaeche-hilfe-feldzeile { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.flaeche-hilfe-marke {
  font: 10px/1 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--fg-muted);
  font-weight: 400;
}
.flaeche-hilfe-marke.is-pflicht { border-color: var(--accent); color: var(--accent); }
.flaeche-hilfe-woher,
.flaeche-hilfe-leer { color: var(--fg-muted); }
.flaeche-hilfe-allgemein {
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  color: var(--fg-muted);
}
.atr-sheet .flaeche-hilfe-inhalt { padding: 0 16px 8px; }

/* ── Inhaltsspalte ──────────────────────────────────────────────── */
.flaeche-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; }
.flaeche-spalte { max-width: 760px; margin: 0 auto; padding: 28px 20px; }

.flaeche-leer h1 { font-size: 26px; margin: 0 0 8px; }
.flaeche-leer p { color: var(--fg-muted); margin: 0; }
.flaeche-suche {
  width: 100%;
  box-sizing: border-box;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  margin: 16px 0;
}
.flaeche-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.flaeche-karte {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 10px;
  text-align: left;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--fg);
  cursor: pointer;
  font: inherit;
}
.flaeche-karte:hover,
.flaeche-karte:focus-visible { border-color: var(--accent); }
.flaeche-karte-icon { grid-row: span 3; color: var(--accent); display: inline-flex; }
.flaeche-karte-titel { font-weight: 600; }
.flaeche-karte-sub,
.flaeche-karte-kat { color: var(--fg-muted); font-size: 13px; }
.flaeche-karte-fuss { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ``align-self``, nicht ``justify-self``: die Zeile ist ein
   Flex-Container (column), und dort ignoriert der Browser
   justify-self — die Marke wurde auf die volle Breite gezogen. */
.flaeche-picker-zeile .atrium-herkunft { align-self: flex-start; margin-top: 2px; }

.flaeche-beschreibung { color: var(--fg-muted); max-width: 620px; margin: 0 0 16px; }

.flaeche-eingabezeile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border);
  /* Radius der Ablieferung (1.1): eine Eingabe, kein Kartenrahmen. */
  border-radius: var(--r);
  background: var(--card-2);
  color: var(--fg-muted);
  cursor: pointer;
  font: inherit;
  margin-bottom: 20px;
  text-align: left;
}
.flaeche-eingabezeile span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.flaeche-eingabezeile span:last-child {
  flex: 0 0 auto;
  font: 10px/1 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Der EINE Wartezustand dieser Ansicht — die Punkte aus
   companion-motion.css, kein zweiter Schimmer daneben. */
.flaeche-laufkarte {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.flaeche-laufkarte small { color: var(--fg-muted); }

.flaeche-fehler {
  padding: 14px 18px;
  border-radius: var(--r-lg);
  border: 1px solid var(--error);
  color: var(--error);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.flaeche-fehler button {
  flex: 0 0 auto;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
}

/* ── Ergebnis ───────────────────────────────────────────────────── */
.flaeche-ergebniskopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  margin-top: 20px;
  flex-wrap: wrap;
}
.flaeche-mono {
  font: 11px/1 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.flaeche-aktionen { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Die Karte baut Kopieren, Teilen und Uebergeben SELBST und haengt sie in
   die Slots dieser Reihe — sie kommen deshalb mit ihren eigenen Klassen
   (.atrium-output-card-action) und muessen hier auf dieselbe Hoehe und
   denselben Radius wie die Knoepfe der Flaeche gebracht werden. */
.flaeche-aktionen button,
.flaeche-aktionen a,
.flaeche-aktionen .atrium-output-card-action {
  height: 38px;
  padding: 0 14px;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg);
  cursor: pointer;
  font: inherit;
}
.flaeche-aktionen .atrium-menu-wrap { display: inline-flex; }
/* Die Reihe setzt Radius und Polster fuer JEDEN Kartenknopf in ihr —
   damit gewinnt sie auch gegen die Nullungen des Splitknopfs (0,2,0
   gegen 0,1,0). Ohne diese beiden Zeilen zerfaellt „Kopieren ▾" wieder
   in zwei gleich runde Knoepfe mit Luecke. */
.flaeche-aktionen .atrium-kopieren-haupt {
  border-top-right-radius: 0; border-bottom-right-radius: 0; padding-right: 10px;
}
.flaeche-aktionen .atrium-kopieren-pfeil {
  border-top-left-radius: 0; border-bottom-left-radius: 0;
  padding: 0 8px; min-width: 30px; justify-content: center;
}
/* Im Kopf geht ein Menue nach UNTEN auf — im Karten-Fuss nach oben. */
.flaeche-aktionen .atrium-menu { top: calc(100% + 6px); bottom: auto; }
.flaeche-primaer {
  background: var(--accent) !important;
  color: var(--accent-on) !important;
  border-color: var(--accent) !important;
}
/* „Uebergeben" ist die Hauptuebergabe, aber nicht die Primaeraktion:
   getoente Flaeche, Akzentschrift, weicher Halo (Ablieferung 1.2). */
.flaeche-aktionen .atrium-output-card-action--uebergeben {
  background: var(--accent-soft);
  border-color: var(--accent-tint);
  color: var(--accent-strong);
  font-weight: 600;
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.flaeche-aktionen .atrium-output-card-action--uebergeben:hover {
  background: var(--accent-tint);
}

/* ── Dateien-Zeile ──────────────────────────────────────────────────── */
.flaeche-dateien:not(:empty) { margin: 0 0 18px; }

/* ── Aktionsleiste ──────────────────────────────────────────────── */
.flaeche-aktionsleiste {
  height: 62px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 20px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.flaeche-pruefliste {
  color: var(--fg-muted);
  font-size: 13px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.flaeche-ausfuehren {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  font: inherit;
}
.flaeche-ausfuehren:disabled { opacity: .5; cursor: not-allowed; }
.flaeche-ausfuehren .flaeche-kbd { border-color: currentColor; color: inherit; opacity: .75; }

/* ── Auftraege-Leiste (Task 1.7 fuellt sie) ─────────────────────── */
.flaeche-leiste {
  border-left: 1px solid var(--border);
  overflow: auto;
  min-height: 0;
  background: var(--surface-1);
}

[x-cloak] { display: none !important; }

/* ── Auftraege-Leiste (Task 1.7) ────────────────────────────────────
 *
 * Zeile als zweizeiliges Raster: Punkt · Titel · Version, darunter
 * Kurzfassung · Zeit · Sprechblase. Der Statuspunkt ist die EINZIGE
 * Bewegung hier (cm-pulse aus companion-motion.css) — der Wartezustand
 * der Ansicht bleibt cm-typing in der Laufkarte.
 */
.leiste-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 70px;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
}
.leiste-zahl { color: var(--fg-muted); font-size: 12px; }

.leiste-liste { display: flex; flex-direction: column; }

/* Welle 7: Die Zeile ist ein Behaelter (Rahmen, Hintergrund, Papierkorb),
 * das Raster sitzt im Hauptknopf — ein Knopf im Knopf waere ungueltig. */
.leiste-zeile {
  position: relative;
  border-bottom: 1px solid var(--border);
}
.leiste-haupt {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 8px;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  background: none;
  color: var(--fg);
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.leiste-haupt:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: -2px; }
/* Der Papierkorb liegt UEBER der Zeitangabe und traegt deshalb denselben
 * Grund wie die Zeile im Schwebezustand — sonst blitzte der Text darunter
 * durch. Auf Geraeten ohne Zeigegeraet steht er dauerhaft da, dafuer
 * bekommt der Hauptknopf rechts Platz. */
.leiste-loeschen {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--fg-muted);
  cursor: pointer;
  opacity: 0;
}
.leiste-zeile:hover .leiste-loeschen,
.leiste-zeile:focus-within .leiste-loeschen { opacity: 1; }
.leiste-loeschen:hover { color: var(--error); border-color: currentColor; }
.leiste-loeschen:focus-visible { opacity: 1; outline: 2px solid var(--accent-ring); outline-offset: 1px; }
@media (hover: none) {
  .leiste-loeschen { opacity: 1; }
  .leiste-haupt { padding-right: 40px; }
}
.leiste-zeile:hover { background: var(--surface-2); }
.leiste-zeile.is-aktiv { background: var(--surface-2); }
.leiste-titel {
  font-weight: 600;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.leiste-version { font: 11px/1 var(--font-mono); color: var(--fg-muted); }
.leiste-meta {
  grid-column: 2;
  color: var(--fg-muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.leiste-zeit { grid-column: 3; color: var(--fg-muted); font-size: 11px; }
.leiste-chat { grid-column: 3; display: inline-flex; color: var(--fg-muted); }

.leiste-punkt {
  grid-row: span 2;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fg-muted);
  justify-self: center;
}
.leiste-punkt--fertig { background: var(--success); }
.leiste-punkt--fehler { background: var(--error); }
/* cm-pulse bringt eigene Groesse mit (22 px) — fuer die Zeile kleiner,
   der Kern bleibt der Punkt. */
.leiste-punkt.cm-pulse {
  width: 16px;
  height: 16px;
  background: none;
  border-radius: 0;
}
.leiste-punkt .cm-pulse__core { width: 8px; height: 8px; }

/* Skelett NUR beim ersten Laden — eine Flaeche mit unbekanntem Inhalt,
   kein Schimmer ueber lesbarem Text. */
.leiste-skelett {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 6px 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.leiste-skelett .leiste-titel { height: 11px; width: 60%; }
.leiste-skelett .leiste-meta { height: 9px; width: 85%; }
.leiste-skelett .leiste-punkt { background: none; }

.leiste-leer { color: var(--fg-muted); font-size: 13px; padding: 16px 14px; margin: 0; }
.leiste-alle {
  display: block;
  padding: 12px 14px;
  color: var(--fg-muted);
  font-size: 12px;
  text-decoration: none;
}
.leiste-alle:hover { color: var(--fg); }

/* ── Smartphone (Task 1.11) ─────────────────────────────────────────
 *
 * DIE GRENZE LIEGT STRIKT UNTER DEM JS-BRUCHPUNKT (900 px, in
 * arbeitsflaeche.js). Waeren beide gleich, rendert JS bei genau 900 px
 * die Desktop-Fassung, waehrend diese Regel die Auftraege-Leiste schon
 * versteckt — ein Pixel ohne Weg zu den Auftraegen (fact-Lehre, Spec E13).
 */
@media (max-width: 899.98px) {
  .flaeche { grid-template-columns: minmax(0, 1fr); }
  .flaeche-leiste { display: none; }
  .flaeche-raster { grid-template-columns: minmax(0, 1fr); }
  .flaeche-spalte { padding: 20px 16px 12px; }
}

.flaeche-mobilkopf {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}
.flaeche-mobilkopf .flaeche-agentkarte { flex: 1 1 auto; min-width: 0; }
.flaeche-mobilkopf .flaeche-hilfe-knopf {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.flaeche-agentkarte {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 8px;
  width: 100%;
  min-height: 48px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--fg);
  text-align: left;
  font: inherit;
  cursor: pointer;
}
/* Die drei Kinder werden AUSDRUECKLICH gesetzt. Mit Auto-Platzierung
   landete das Zeichen in der zweiten Zeile links (es passt neben den
   Namen nicht mehr in die zweite Spalte) und der Name oben rechts —
   im Rundgang am 04.09.2026 so fotografiert. */
.flaeche-agentkarte .flaeche-mono { grid-area: 1 / 1; }
.flaeche-agentkarte-name { grid-area: 2 / 1; font-weight: 600; }
.flaeche-agentkarte .flaeche-trigger-chevron {
  grid-area: 1 / 2 / 3 / 3;
  align-self: center;
  justify-self: end;
}

.flaeche-fussleiste {
  position: sticky;
  bottom: 0;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 8px;
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.flaeche-fussleiste button { min-height: 48px; }
.flaeche-zaehler {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.flaeche-zaehler small {
  font: 9px/1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.flaeche-ausfuehren-mobil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  padding: 0 16px;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
}
.flaeche-ausfuehren-mobil:disabled { opacity: .5; cursor: not-allowed; }

/* ── Sheets ─────────────────────────────────────────────────────────
   80vh/100% an einem Kasten, der am Fensterrand beginnt (position:
   fixed) — das ist die eine Stelle, an der eine Viewport-Einheit
   keine zweite, konkurrierende Hoehenrechnung aufmacht. */
.atr-sheet { position: fixed; inset: 0; z-index: 40; }
.atr-sheet-abdunkelung { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.atr-sheet-karte {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 80vh;
  overflow: auto;
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: var(--shadow-lg);
}
.atr-sheet-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 16px 10px;
}
.atr-sheet-zu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--fg-muted);
  cursor: pointer;
}
.atr-sheet-zu:hover { background: var(--surface-2); color: var(--fg); }
.atr-sheet .flaeche-picker-suche { border-top: 1px solid var(--border); }
.atr-sheet #flaeche-leiste-mobil .leiste-kopf { display: none; }

html.atr-sheet-open { overflow: hidden; }

/* ══════════════════════════════════════════════════════════════════════
   Ziel-Picker (ziel_picker.js) — EIN Dialogkoerper fuer vier Modi.

   Umzug aus handoff_picker.css und dem <style>-Block, den
   termin_anhang_picker.js selbst einhaengte. Die Regeln stehen bewusst
   EIGENSTAENDIG (jedes Token mit Rueckfall) und nicht auf
   components.css: der Chat laedt weder components.css noch die
   Agenten-style.css — dort staende der Dialog sonst nackt da. Genau
   dieser Befund war der Grund fuer den alten Selbst-Stil.

   Der Wirtsknoten kommt von shared/modal.js und traegt beide
   Klassenfamilien: .atr-modal-host/.atr-modal-backdrop/.atr-modal fuer
   den Helfer, .ziel-* fuer das Aussehen.
   ══════════════════════════════════════════════════════════════════════ */

.ziel-host { position: fixed; inset: 0; z-index: 2200; display: flex;
  align-items: center; justify-content: center; padding: 24px; }
.ziel-hintergrund { position: absolute; inset: 0;
  background: rgba(10, 10, 10, .45); backdrop-filter: blur(2px); }

/* BREITE UND BEWEGUNG STEHEN HIER, NICHT GEERBT. Der Dialogkoerper
   traegt zwei Klassen: ``.atr-modal`` (fuer modal.js) und
   ``.ziel-picker`` (fuer das Aussehen). Auf der Agentenflaeche ist
   components.css geladen, dort setzt ``.atr-modal`` bei GLEICHER
   Spezifitaet ``max-width: min(560px, 100%)`` und eine Einblende — im
   Chat ist die Datei nicht da. Ohne eigene Angaben stand derselbe
   Dialog deshalb 560 px breit mit Bewegung auf der Flaeche und 620 px
   ohne Bewegung im Chat (Rundgang 2026-09-05, nebeneinander gemessen).
   ``width`` allein genuegte nicht: ``max-width`` schlaegt sie.
   Gemessen wird die Gleichheit im Browser
   (test_ziel_picker.py::test_beide_seiten_zeigen_denselben_dialog). */
.ziel-picker { position: relative; display: flex; flex-direction: column;
  width: min(620px, 100%); max-width: min(620px, 100%);
  animation: ziel-auf 120ms ease-out;
  max-height: min(760px, 90vh); border-radius: 16px;
  overflow: hidden; background: var(--card, #fff); color: var(--ink, #0a0a0a);
  border: 1px solid var(--border, #e5e5e5);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
  font-family: inherit; font-size: 14px; }

@keyframes ziel-auf {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .ziel-picker { animation: none; }
}

.ziel-kopf { display: flex; align-items: flex-start; gap: 12px;
  padding: 18px 20px 14px; border-bottom: 1px solid var(--border, #e5e5e5); }
.ziel-titel { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.ziel-intro { margin: 4px 0 0; font-size: 12px; color: var(--ink-4, #a3a3a3);
  line-height: 1.5; }
.ziel-intro:empty { display: none; }
.ziel-x { margin-left: auto; flex-shrink: 0; width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 1px solid var(--border, #e5e5e5);
  background: transparent; color: var(--ink-3, #525252); cursor: pointer; }
.ziel-x:hover { background: var(--paper-2, #f4f4f5); }

.ziel-koerper { padding: 16px 20px; overflow-y: auto; flex: 1; min-height: 0; }

/* Die Kruemelleiste des eigenen Ordnerbaums ist mit ihm gegangen
   (Plan 5b): die Ordnerwahl macht der geteilte Picker, hier steht nur
   noch der gewaehlte Pfad. */
.ziel-wahl-pfad { margin: 0 0 10px; font-size: 13px;
  color: var(--ink, #0a0a0a); overflow-wrap: anywhere; }

.ziel-suche { width: 100%; box-sizing: border-box; padding: 9px 12px;
  border-radius: 10px; border: 1px solid var(--border, #e5e5e5);
  background: var(--paper, #fafafa); color: var(--ink, #0a0a0a);
  font: inherit; font-size: 13px; margin-bottom: 10px; }
.ziel-suche[hidden] { display: none; }
.ziel-suche:focus { outline: 2px solid var(--accent, #6B3FD4); outline-offset: -1px; }

.ziel-liste { display: flex; flex-direction: column; gap: 6px;
  max-height: 260px; overflow-y: auto; margin-bottom: 18px; }
.ziel-liste:empty { display: none; margin-bottom: 0; }
.ziel-gruppenkopf { margin: 8px 2px 2px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-4, #a3a3a3); }
.ziel-gruppenkopf:first-child { margin-top: 0; }

.ziel-zeile { display: flex; align-items: center; gap: 12px; width: 100%;
  text-align: left; padding: 9px 12px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--border, #e5e5e5); background: var(--paper, #fafafa);
  color: inherit; font: inherit; }
.ziel-zeile:hover { background: var(--paper-2, #f4f4f5); }
.ziel-zeile.is-gewaehlt { border-color: var(--accent, #6B3FD4);
  background: var(--accent-tint, rgba(107, 63, 212, .08)); }
.ziel-zeile[disabled] { cursor: not-allowed; opacity: .5; }
.ziel-zeile-zeichen { flex-shrink: 0; display: inline-flex;
  color: var(--ink-4, #a3a3a3); }
.ziel-zeile-wann { flex-shrink: 0; width: 96px; font-size: 12px;
  font-weight: 700; color: var(--ink-3, #525252); }
.ziel-zeile-wann small { display: block; font-weight: 500;
  color: var(--ink-4, #a3a3a3); }
.ziel-zeile-haupt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ziel-zeile-titel { font-size: 13px; font-weight: 600; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.ziel-zeile.is-erledigt .ziel-zeile-titel { text-decoration: line-through; opacity: .7; }
.ziel-zeile-quelle { font-size: 11px; color: var(--ink-4, #a3a3a3);
  margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ziel-zeile-marke { flex-shrink: 0; font-size: 12px; display: inline-flex;
  color: var(--accent, #6B3FD4); font-weight: 700; }

.ziel-mehr { align-self: flex-start; border: 0; background: transparent;
  font: inherit; font-size: 12px; color: var(--accent, #6B3FD4); cursor: pointer; }

.ziel-dateiname { display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 14px; font-size: 12px; font-weight: 700;
  color: var(--ink-3, #525252); }
.ziel-dateiname[hidden] { display: none; }
.ziel-dateiname-feld { padding: 9px 12px; border-radius: 10px;
  border: 1px solid var(--border, #e5e5e5); background: var(--paper, #fafafa);
  color: var(--ink, #0a0a0a); font: inherit; font-size: 13px; font-weight: 400; }

.ziel-abschnitt { margin: 0 0 8px; font-size: 12px; font-weight: 700;
  color: var(--ink-3, #525252); }
.ziel-abschnitt[hidden] { display: none; }

.ziel-formate { display: flex; flex-wrap: wrap; gap: 8px; }
.ziel-haken { display: inline-flex; align-items: center; gap: 7px;
  width: 100%; font-size: 13px; }
.ziel-haken.is-aus { opacity: .55; }
.ziel-haken small { color: var(--ink-4, #a3a3a3); }
.ziel-pille { display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px; font-size: 12px; font-weight: 600;
  cursor: pointer; border: 1px solid var(--border, #e5e5e5);
  background: var(--paper, #fafafa); color: var(--ink-3, #525252);
  font-family: inherit; }
.ziel-pille:hover { background: var(--paper-2, #f4f4f5); }
.ziel-pille.is-an { border-color: var(--accent, #6B3FD4);
  background: var(--accent-tint, rgba(107, 63, 212, .08));
  color: var(--accent, #6B3FD4); }
.ziel-pille-marke { width: 14px; display: inline-flex; }

.ziel-note { font-size: 12px; color: var(--ink-4, #a3a3a3); padding: 10px 2px;
  margin: 0; }
.ziel-fehler { font-size: 13px; color: var(--danger, #dc2626); padding: 8px 0;
  margin: 0; }
.ziel-fehler[hidden] { display: none; }

.ziel-ergebnis { margin-top: 14px; padding: 12px 14px; border-radius: 10px;
  background: var(--paper, #fafafa); border: 1px solid var(--border, #e5e5e5); }
.ziel-ergebnis[hidden] { display: none; }
.ziel-ergebnis h3 { margin: 0 0 8px; font-size: 13px; font-weight: 700; }
.ziel-ergebnis ul { margin: 0; padding-left: 18px; font-size: 12px; line-height: 1.7; }
.ziel-ergebnis li.is-fehler { color: var(--danger, #dc2626); }
.ziel-ergebnis li.is-ok { color: var(--ok, #15803d); }

.ziel-fuss { display: flex; align-items: center; gap: 10px; padding: 14px 20px;
  border-top: 1px solid var(--border, #e5e5e5); background: var(--paper, #fafafa); }
.ziel-luecke { flex: 1; }
.ziel-btn { padding: 8px 16px; border-radius: 10px; font: inherit;
  font-size: 13px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--border, #e5e5e5); background: var(--card, #fff);
  color: var(--ink, #0a0a0a); }
.ziel-btn:hover { background: var(--paper-2, #f4f4f5); }
/* ``--accent-on`` statt hartem Weiss: im Dunkelmodus ist ``--accent``
   ein helles Flieder (rgb(180,155,255)) — weisse Schrift darauf ergab
   2,3:1 und war kaum lesbar. Dieselbe Schreibweise wie ``.flaeche-primaer``
   weiter oben; der Rueckfall deckt nur Seiten ohne Tokens ab. */
.ziel-btn--primaer { background: var(--accent, #6B3FD4);
  border-color: var(--accent, #6B3FD4); color: var(--accent-on, #fff); }
.ziel-btn--primaer:hover { filter: brightness(1.08); }
.ziel-btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ── „Übergeben"-Menü an der Ergebniskarte ─────────────────────────────
   Umzug aus handoff_picker.css. Das Menü baut output_card.js, nicht der
   Picker — aber seine Regeln standen NUR in der Picker-CSS, die der
   Picker sich auf jeder Seite selbst nachlud. Mit dem Selbstaufbau fiel
   dieser Nachladeweg weg; ohne diesen Umzug stünde das Menü seit Task
   1.8 als ungestylte Knopfliste im Textfluss — auf der Fläche UND im
   Chat. Tokens mit Rückfall, aus demselben Grund wie oben. */
.atrium-uebergeben-wrap { position: relative; display: inline-flex; }
/* Die Grundregel gilt fuer JEDES kleine Menue der Karte — seit Welle 8
   auch fuer „Kopieren ▾". Ohne sie war dessen Menue ein durchsichtiger
   Block IM Textfluss: es klappte nicht ueber, sondern IN die Knopfzeile
   auf und schob alles darunter weg. */
.atrium-menu,
.atrium-uebergeben-menu {
  position: absolute; bottom: calc(100% + 6px); left: 0; min-width: 240px;
  background: var(--card, #fff); border: 1px solid var(--border, #e5e5e5);
  border-radius: var(--r-lg, 10px);
  box-shadow: var(--shadow-lg, 0 12px 32px rgba(0, 0, 0, .18));
  padding: 6px; display: flex; flex-direction: column; gap: 2px; z-index: 50;
}
.atrium-menu[hidden],
.atrium-uebergeben-menu[hidden] { display: none; }
/* Die Zeile eines kleinen Menues — gemeinsames Vokabular fuer
   „Kopieren ▾" und „Uebergeben". Was nur der Uebergabe gehoert (Chip,
   Kontextzeile, Pfeil), traegt zusaetzlich .atrium-uebergeben-item. */
.atrium-menu-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: 0; border-radius: 8px; background: transparent;
  color: var(--ink, #0a0a0a); font-size: .88rem; text-align: left;
  cursor: pointer; width: 100%; font-family: inherit;
}
.atrium-menu-item:hover,
.atrium-menu-item:focus-visible { background: var(--paper-2, rgba(127, 127, 127, .1)); }
.atrium-menu-item:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: -2px; }
.atrium-menu-item[hidden] { display: none; }
.atrium-uebergeben-item-icon { width: 20px; text-align: center; }

/* ── Das Uebergeben-Menue (Welle 8, D5) ──────────────────────────────
   Vorher eine nackte Liste aus „Nach X senden". Jetzt: Kopfzeile,
   Gruppen, je Zeile ein Monogramm und ein Satz, WAS dort passiert — und
   eine Fusszeile, die sagt, wo man Ziele aendert. Nur Tokens; die
   Rueckfaelle var(--x, …) sind der Bestand dieser Datei (der Chat laedt
   components.css nicht). */
.atrium-uebergeben-menu { min-width: 300px; max-width: 380px; padding: 0; }
.atrium-uebergeben-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 12px 14px 9px;
  font: 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-muted);
}
.atrium-uebergeben-kbd {
  font: 10px/1 var(--font-mono); letter-spacing: normal; text-transform: none;
  border: 1px solid var(--border); border-radius: 4px; padding: 2px 5px;
}
.atrium-uebergeben-suche { padding: 0 10px 8px; }
.atrium-uebergeben-suchfeld {
  width: 100%; box-sizing: border-box; padding: 7px 10px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--paper-2); color: inherit; font: inherit; font-size: 13px;
}
.atrium-uebergeben-suchfeld:focus-visible {
  outline: 2px solid var(--accent-ring); outline-offset: -1px;
}
.atrium-uebergeben-gruppe { padding: 0 6px 6px; }
.atrium-uebergeben-gruppe[hidden] { display: none; }
.atrium-uebergeben-gruppe-titel {
  padding: 6px 8px 4px; font-size: 11px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--fg-muted);
}
.atrium-uebergeben-menu > .atrium-uebergeben-item { margin: 0 6px; }
.atrium-uebergeben-chip {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  background: var(--accent-soft); color: var(--accent-strong);
}
.atrium-uebergeben-item-text {
  flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px;
}
.atrium-uebergeben-name {
  font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.atrium-uebergeben-kontext {
  font-size: 11.5px; color: var(--fg-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.atrium-uebergeben-pfeil { flex-shrink: 0; font-size: 12px; color: var(--fg-muted); }
.atrium-uebergeben-leer { padding: 10px 14px; font-size: 13px; color: var(--fg-muted); }
.atrium-uebergeben-leer[hidden] { display: none; }
.atrium-uebergeben-fuss {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 14px; font-size: 12px; color: var(--fg-muted);
  border-top: 1px solid var(--hair-2, var(--border));
  background: var(--paper-2);
}
.atrium-uebergeben-fuss a { color: var(--accent); font-weight: 600; text-decoration: none; }
.atrium-uebergeben-fuss a:hover { text-decoration: underline; }

/* Auf dem Telefon fuellt das Menue die Breite — an DEMSELBEN Bruchpunkt
   wie alles andere (899.98px). Ein eigener bei 640px waere ein zweiter
   Bruchpunkt in einem Haus, das genau einen hat. */
@media (max-width: 899.98px) {
  .atrium-uebergeben-menu {
    position: fixed; left: 8px; right: 8px; bottom: 8px; top: auto;
    min-width: 0; max-width: none; max-height: 70vh; overflow-y: auto;
  }
}

/* ── Dateien-Zeile unter den Knoepfen (Welle 8, D4) ─────────────────
   Bis Welle 7 zog hydrate() die Downloads-Sektion in einen Slot MITTEN
   im Knopfstreifen. Sie brachte ihre Fuss-Regeln mit (Rand oben,
   Spaltenrichtung), also brauchte es drei Gegenregeln: eine, die den
   Gruppenkopf „ERGEBNIS" per :has() versteckte (er stand sonst doppelt),
   eine, die Rand und Richtung zuruecknahm, und eine, die den Pillen eine
   eigene Zeile per order/flex-basis verschaffte, weil die Reihe sonst an
   zufaelliger Stelle umbrach.

   Alle drei sind weg: die Sektion hat jetzt ihre eigene Zeile UNTER dem
   Kopf und darf ihre Gruppenueberschriften behalten — „Quellen &
   Rohdaten" und „Herunterladen" sagen beide etwas. */
#flaeche-dateien:empty { display: none; }
#flaeche-dateien .atrium-output-card-downloads {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
#flaeche-uebergeben:empty,
#flaeche-kopieren:empty { display: none; }

/* ── Versions-Chips im Ergebniskopf (Welle 5) ────────────────────────
 * v1 · v2 · v2 — nach Generation, der aktive Lauf gedrueckt. Kleiner
 * als die Aktionen rechts, damit der Kopf eine Zeile bleibt. */
.flaeche-fassungen { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; }
.flaeche-fassung {
  height: 22px; min-width: 30px; padding: 0 8px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--fg-muted);
  font: 600 11px/1 var(--font-mono); letter-spacing: .04em; cursor: pointer;
}
.flaeche-fassung:hover { color: var(--fg); border-color: var(--fg-muted); }
.flaeche-fassung.is-aktiv, .flaeche-fassung[aria-pressed="true"] {
  background: var(--accent); border-color: var(--accent); color: var(--accent-on); cursor: default;
}
.flaeche-fassung:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 1px; }

/* ── Nachbesprechung (Welle 5) ────────────────────────────────────────
 * Panel unter dem Ergebnis: Kopf, „Der Chat kennt"-Chips, Verlauf,
 * Komponist. Auf dem Smartphone bleibt der Slot leer (display none) und
 * ein Knopf oeffnet das Sheet, in das dasselbe Element wandert. */
.flaeche-nb-slot { margin-top: 20px; }
.flaeche-nb-mobil {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  height: 36px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--fg); font: inherit; cursor: pointer;
}
@media (max-width: 899px) { .flaeche-nb-slot { display: none; } }
.flaeche-nb-mobil-slot { padding: 0 16px 16px; }
/* Ablieferung 1.6: gedaempfter Grund, damit die Nachbesprechung sich vom
   Ergebnis unterscheidet, ohne mit dem Block „Aus dem Ergebnis"
   (Akzentflaeche) zu konkurrieren. */
.nb { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card-2); padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 12px; }
.nb-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nb-zahl { font-size: 12px; color: var(--fg-muted); }
.nb-oeffnen { margin-left: auto; font-size: 13px; color: var(--accent); text-decoration: none; }
.nb-oeffnen:hover { text-decoration: underline; }
.nb-kennt { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--fg-muted); }
.nb-chip { padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2, var(--paper-2)); color: var(--fg); }
.nb-verlauf { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow: auto; }
.nb-leer { margin: 0; font-size: 13px; color: var(--fg-muted); }
.nb-nachricht { max-width: 92%; padding: 8px 12px; border-radius: 12px; font-size: 14px; line-height: 1.45; }
.nb-nachricht.is-nutzer { align-self: flex-end; background: var(--accent); color: var(--accent-on); }
.nb-nachricht.is-assistent { align-self: flex-start; background: var(--surface-2, var(--paper-2)); color: var(--fg); }
.nb-nachricht .nb-text { margin: 0; white-space: pre-wrap; }
.nb-nachricht .md-rendered { white-space: normal; }
.nb-nachricht .md-rendered > :first-child { margin-top: 0; }
.nb-nachricht .md-rendered > :last-child { margin-bottom: 0; }
.nb-live::after { content: "▍"; opacity: .6; }
.nb-fuss { display: flex; gap: 8px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.nb-karte { font-size: 12px; color: var(--accent); }
.nb-uebernehmen { height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--accent); background: transparent; color: var(--accent); font: inherit; font-size: 12px; cursor: pointer; }
.nb-uebernehmen:disabled { opacity: .6; cursor: default; }
.nb-uebernehmen[data-fassung] { background: var(--accent); color: var(--accent-on); }
.nb-fehler { margin: 0; padding: 6px 10px; border: 1px solid var(--error, var(--risk)); border-radius: var(--r-sm); color: var(--error, var(--risk)); font-size: 13px; }
.nb-komponist { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.nb-eingabe { width: 100%; resize: vertical; min-height: 44px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--fg); font: inherit; }
.nb-eingabe:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 1px; }
.nb-senden { height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-on); font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.nb-senden:disabled { opacity: .6; cursor: default; }

/* ── „Der Lauf kennt" (Welle 6.1) ────────────────────────────────── */
.flaeche-wissen-chip {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; margin-left: 8px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface-2, var(--paper-2)); color: var(--fg-muted); font-size: 11px;
}
.atrium-modal-field-wissen { display: flex; flex-direction: column; gap: 4px; }
.atrium-modal-field-wissen select { width: 100%; }

/* ── Alle Auftraege (Welle 7) ─────────────────────────────────────────
 * Die Vollansicht fuellt die Spalte. Die rechte Leiste zeigt dieselben
 * Laeufe und tritt zurueck, solange sie offen ist. */
.flaeche--auftraege .flaeche-leiste { display: none; }
.auftraege { display: flex; flex-direction: column; gap: var(--s-3, 12px); padding: var(--s-4, 16px); min-width: 0; }
.auftraege-kopf { display: flex; align-items: center; gap: 12px; }
.auftraege-titel { margin: 0; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); }
.auftraege-zurueck {
  height: 28px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--fg); font: inherit; font-size: 13px; cursor: pointer;
}
.auftraege-zurueck:hover { border-color: var(--accent); color: var(--accent); }
.auftraege-filter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.auftraege-agent {
  height: 30px; padding: 0 8px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--fg); font: inherit; font-size: 13px; max-width: 240px;
}
.auftraege-chips { display: inline-flex; gap: 4px; }
.auftraege-chip {
  height: 28px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--fg-muted); font: inherit; font-size: 12px; cursor: pointer;
}
.auftraege-chip:hover { color: var(--fg); }
.auftraege-chip.is-aktiv { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
.auftraege-liste { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r, 8px); overflow: hidden; }
.auftraege-zeile { position: relative; border-bottom: 1px solid var(--border); }
.auftraege-zeile:last-child { border-bottom: 0; }
.auftraege-zeile:hover { background: var(--surface-2, var(--paper-2)); }
.auftraege-haupt {
  display: grid;
  grid-template-columns: 16px minmax(0, 1.2fr) minmax(0, 2fr) 90px 110px;
  align-items: center; gap: 12px;
  width: 100%; padding: 10px 40px 10px 14px;
  border: 0; background: none; color: var(--fg); text-align: left; font: inherit; cursor: pointer;
}
.auftraege-haupt:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: -2px; }
.auftraege-titel-zelle { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auftraege-meta { color: var(--fg-muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auftraege-dauer, .auftraege-zeit { color: var(--fg-muted); font-size: 12px; }
.auftraege-loeschen {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: var(--surface-2, var(--paper-2)); color: var(--fg-muted); cursor: pointer; opacity: 0;
}
.auftraege-zeile:hover .auftraege-loeschen,
.auftraege-zeile:focus-within .auftraege-loeschen { opacity: 1; }
.auftraege-loeschen:hover { color: var(--error); border-color: currentColor; }
.auftraege-loeschen:focus-visible { opacity: 1; outline: 2px solid var(--accent-ring); outline-offset: 1px; }
@media (hover: none) { .auftraege-loeschen { opacity: 1; } }
.auftraege-skelett { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.auftraege-leer, .auftraege-fehler { margin: 0; padding: 16px; color: var(--fg-muted); font-size: 13px; }
.auftraege-fehler { color: var(--error, var(--risk)); }
.auftraege-mehr {
  align-self: center; height: 34px; padding: 0 16px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--fg); font: inherit; cursor: pointer;
}
.auftraege-mehr:disabled { opacity: .6; cursor: default; }
@media (max-width: 899px) {
  .auftraege-haupt { grid-template-columns: 16px minmax(0, 1fr) 80px; padding-right: 40px; }
  .auftraege-meta, .auftraege-dauer { display: none; }
}