/* shared-drawer.css — Drawer-Shell + Drawer-Container-Queries.

   Die Container-Query-Bloecke (Drawer-Responsiveness) stehen am DATEIENDE —
   nicht hier oben. Grund: Die Query-Regeln haben dieselbe Spezifitaet wie die
   Basis-Regeln weiter unten in dieser Datei (z.B. .field-grid); ein @container
   erhoeht die Prioritaet NICHT, es entscheidet die Quelltext-Reihenfolge.
   Staenden die Queries vor den Basis-Regeln, waeren sie wirkungslos. */

/* Footer-Action rechtsbuendig (erste right-aligned Aktion schiebt sich nach rechts). */
.drawer-action--right { margin-left: auto; }
/* Close-X-Icon ohne Inline-Baseline-Luecke. */
.drawer-x-ico { display: block; }

/* ==========================================================================
   Drawer-Shell, Stack, Container-Query-States, Header-Action-Overflow,
   Header-/Body-/Footer-Layout, Field-Grid, Drawer-Chips, Drawer-Textarea,
   Mention-Composer-Host, Drawer-Live-Region, Globaler Drawer-Host.
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   Shared Drawer (right-side overlay, ueber dem Content-Bereich)
   ══════════════════════════════════════════════════════════════════════════ */
/* Backdrop sichtbar abgesetzt, Fade-in via drawerFade */
.app-scope .drawer-backdrop {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--lod-darkblue-900) 22%, transparent);
  z-index: var(--z-drawer-stack);
  animation: app-drawerFade var(--duration-normal) var(--lod-ease);
}
/* Border-left + stärkerer Schatten + weißer Hintergrund */
.app-scope .shared-drawer {
  position: absolute; top: 0; right: 0; bottom: 0;
  background: var(--lod-white);
  border-left: 1px solid var(--lod-gray-200);
  box-shadow: -20px 0 50px -10px color-mix(in srgb, var(--lod-darkblue-900) 22%, transparent);
  z-index: var(--z-drawer-panel);
  display: flex; flex-direction: column;
  animation: app-drawerSlide var(--duration-flow) var(--lod-ease);
  max-width: 100%;
  /* Zentrale Responsiveness via Container-Query-Scope. Alle Drawer-internen
     Layout-Regeln messen die DRAWER-Breite, nicht die Viewport-Breite. So
     verhaelt sich der Drawer auf Mobile genauso wie wenn man ihn im
     Desktop-View schmaler zieht — die gleiche Logik greift auf allen V2-Tabs
     die diesen Drawer verwenden. */
  container-type: inline-size;
  container-name: drawer;
}
/* Drawer-Breiten (container-query-faehig via Klasse) */
.app-scope .shared-drawer.width-narrow { width: 480px; }
.app-scope .shared-drawer.width-medium { width: 560px; }
.app-scope .shared-drawer.width-wide { width: 720px; }
/* xwide: fuer datendichte Review-Drawer (z.B. das 2-stufige Abrechnungs-Grid mit
   Titel + Dauer/Fakt/Faktor%/Abgerechnet). Bewusst "fast voll" — der Content
   dahinter bleibt nur angeschnitten sichtbar. max-width:100% + Container-Queries
   greifen weiterhin: auf schmaleren Containern/Mobile faellt er auf Vollbreite
   zurueck, die Drawer-internen Layouts adaptieren via @container drawer. */
.app-scope .shared-drawer.width-xwide { width: 1200px; }
/* full: Vollbreiten-Takeover für Dokument-Viewer (Lösungsdoku-Browser) — nutzt
   die gesamte Bildschirmbreite, Close nur über das X im Header. z-index MUSS
   über die Nav-Rail (--z-nav-rail 1000), sonst überdeckt die Rail die linke
   Kante (Kopf/Tabs werden abgeschnitten). Echter Takeover: Rail liegt darunter. */
.app-scope .shared-drawer.width-full { width: 100vw; max-width: 100vw; left: 0; z-index: 1001; }

/* ══════════════════════════════════════════════════════════════════════════
   Drawer-Stack (N-Stack)
   Beliebig viele Drawer koennen gestackt werden. JS berechnet pro resize:
   - welche Drawer sichtbar sind (von rechts her nach Viewport-Platz)
   - welche verborgen sind (display:none)
   - den translateX-Shift pro sichtbarem Drawer (inline style)
   - z-index pro Stack-Level (inline style, 250+level)
   Das CSS liefert nur die Transitions + das Backdrop-Gating.
   ══════════════════════════════════════════════════════════════════════════ */
.app-scope .shared-drawer {
  /* Stack-Transition mit dem Premium-Enter-Easing (Charakter B): ruhiges,
     ease-out-artiges Ankommen statt abrupt. Frueher hartkodiertes
     cubic-bezier(.22,.9,.34,1) → jetzt zentral via --ease-enter tunebar. */
  transition: transform var(--duration-spring) var(--ease-enter), width var(--duration-normal) var(--ease-soft), max-width var(--duration-normal) var(--ease-soft);
  will-change: transform;
}
/* Drawer-Stack-Schatten: jeder Drawer hat einen Shadow nach links — die
   unteren (von Top aus gesehen) leicht schwaecher, damit die Tiefe spuerbar
   ist. Plus ein semi-transparenter Overlay auf allen Nicht-Top-Drawern
   (via ::after), damit visuell klar ist: "dieser Drawer ist 'ausgegraut',
   ein Klick dort schliesst den oberen statt dort zu editieren". */
.app-scope .has-drawer-stack .shared-drawer {
  /* Basis-Schatten fuer alle gestackten Drawers */
  border-left: 1px solid var(--lod-gray-300);
  box-shadow: -8px 0 20px -6px color-mix(in srgb, var(--lod-darkblue-900) 18%, transparent);
}
.app-scope .has-drawer-stack .shared-drawer.drawer-stack-top {
  /* Top-Drawer hat den staerksten Schatten */
  box-shadow: -14px 0 32px -8px color-mix(in srgb, var(--lod-darkblue-900) 32%, transparent);
}
/* Nicht-Top-Drawer: duenner Overlay, damit der User merkt: "Klicken hier
   schliesst den oberen, statt hier zu editieren". Zusaetzlich
   pointer-events:none auf den Inhalten, damit Inputs/Buttons nicht triggern. */
.app-scope .has-drawer-stack .shared-drawer:not(.drawer-stack-top)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--lod-darkblue-900) 5%, transparent);
  pointer-events: none;
  z-index: 3;
  transition: background var(--duration-flow) var(--ease-soft);
}
/* Inputs/Buttons innerhalb Nicht-Top-Drawer komplett deaktivieren.
   Das inert-Attribut (JS) macht die Hauptarbeit; pointer-events:none hier
   ist ein zweiter Gürtel fuer Browser ohne inert-Support. */
.app-scope .has-drawer-stack .shared-drawer:not(.drawer-stack-top) {
  pointer-events: none;
}
.app-scope .has-drawer-stack .shared-drawer:not(.drawer-stack-top) * {
  user-select: none;
}
/* Hidden-Drawer (passt nicht in den Viewport) — komplett versteckt, keine Transitions. */
.app-scope .shared-drawer.drawer-stack-hidden {
  transition: none;
}
/* Backdrops: nur der des Top-Drawers bekommt Pointer-Events + volle Opacity.
   Unter dem Top-Drawer liegende Backdrops sind transparent + inaktiv. */
.app-scope .drawer-backdrop.drawer-stack-backdrop-inactive {
  pointer-events: none;
  opacity: 0;
}
/* Nur der letzte Backdrop (Top) bleibt mit voller z-index unter dem Top-Drawer
   aber ueber allen anderen Drawern. */
.app-scope .has-drawer-stack .drawer-backdrop:last-of-type {
  z-index: var(--z-drawer-stack);
}

/* ══════════════════════════════════════════════════════════════════════════
   Drawer-Container-Query-Breakpoints
   ──────────────────────────────────────────────────────────────────────────
   640px  ist die Grenze "zweispaltig moeglich":
          - Field-Grid 120px + 1fr passt, mit Fakturierbar-Checkbox daneben
          - Chips-Zeile nimmt 3x220px nebeneinander
   480px  ist die Grenze "kompakt":
          - Zusaetzliche Buttons weichen, Labels werden kuerzer
   Alles unter 480 faellt auf die kompakte Variante.
   Diese beiden Breakpoints sind KANONISCH - sie gelten fuer jeden Drawer
   der diese Shell nutzt (Aufgaben, Projekte, Kontingente, ...).
   ══════════════════════════════════════════════════════════════════════════ */

/* Dirty-State-Marker für MOB-0 Check (data-drawer-dirty) */
.app-scope .shared-drawer[data-drawer-dirty="true"] { /* Marker nur — kein visueller Effekt hier */ }

/* Drawer read-only wenn Aufgabe abgeschlossen. Keine Inputs,
   keine Picker-Klicks, keine Quick-Actions.
   AUSNAHME: Header-Aktionen (.drawer-head-icon-btn — Overflow-⋯, Copy-Link,
   „In 365 öffnen", Duplizieren) sind Navigation/Meta, kein Inhalts-Edit — sie
   bleiben im Schreibschutz bedienbar. Sonst ist bei abgeschlossenen Records
   das ⋯-Overflow-Menü tot und „In 365 öffnen" nicht erreichbar (Kyle-QA).
   AUSNAHME Footer: „Wieder aktiv" (reopen) existiert NUR im Schreibschutz —
   ohne Whitelist-Eintrag sperrt sich der Reaktivieren-Weg selbst aus (Kyle-QA).
   „Abbrechen" (cancel) ist reines Schließen, ebenfalls kein Inhalts-Edit. */
.app-scope .shared-drawer.drawer-readonly .drawer-title-editable,
.app-scope .shared-drawer.drawer-readonly textarea,
.app-scope .shared-drawer.drawer-readonly input,
.app-scope .shared-drawer.drawer-readonly select,
.app-scope .shared-drawer.drawer-readonly button:not(.drawer-close):not(.drawer-head-icon-btn):not([data-drawer-action="copy-link"]):not([data-drawer-action="delete"]):not([data-drawer-action="complete"]):not([data-drawer-action="reopen"]):not([data-drawer-action="cancel"]):not([data-al-attachment-url]):not(.app-activity-log-attachment-chip) {
  pointer-events: none !important;
  opacity: 0.6;
}
.app-scope .shared-drawer.drawer-readonly .drawer-title-editable,
.app-scope .shared-drawer.drawer-readonly .mention-composer,
.app-scope .shared-drawer.drawer-readonly textarea,
.app-scope .shared-drawer.drawer-readonly input {
  background: var(--lod-gray-50);
  cursor: default;
}
/* Schreibschutz-Hinweis wird als echtes drawer-head-badge gerendert
   (ag-drawer.js, data-ag-readonly-badge) — kein CSS-::after-Banner mehr.
   Grund: das alte ::after war ein Flex-Item ohne nowrap/flex-shrink und
   brach in der overflow:hidden-Meta-Zeile mehrzeilig um + wurde abgeschnitten.
   Das echte Badge nimmt an der Badge-Cascade teil und clippt nicht. */
/* Erledigt-Button im Header ausblenden (nicht sinnvoll) */
.app-scope .shared-drawer.drawer-readonly [data-drawer-action="complete"] { display: none; }
/* Speichern-Button im Footer ausblenden */
.app-scope .shared-drawer.drawer-readonly [data-drawer-action="save"] { display: none; }
/* Checklist-Items: Add-Button + Drag-Handles weg im Readonly-Modus. */
.app-scope .shared-drawer.drawer-readonly .app-checklist-add,
.app-scope .shared-drawer.drawer-readonly .app-checklist-drag { display: none; }
/* Kommentare/Uploader-Leiste unten weg */
.app-scope .shared-drawer.drawer-readonly .app-activity-log-commentbox { display: none; }

/* Drawer-View: neutraler Nur-Ansicht-Modus. Im Gegensatz zu drawer-readonly
   kein "Abgeschlossen"-Banner. Inputs sind nicht bedienbar, wirken grau,
   Primary-Aktionen (Subgrid-Add, ActivityLog-Commentbox) verstecken.
   Der Edit-Toggle-Button im Header bleibt bedienbar (darf nicht ausgeblendet
   werden). */
.app-scope .shared-drawer.drawer-view .drawer-title-editable,
.app-scope .shared-drawer.drawer-view textarea,
.app-scope .shared-drawer.drawer-view input,
.app-scope .shared-drawer.drawer-view select,
.app-scope .shared-drawer.drawer-view .app-drawer-select,
.app-scope .shared-drawer.drawer-view .app-drawer-input,
.app-scope .shared-drawer.drawer-view .app-drawer-date-trigger,
.app-scope .shared-drawer.drawer-view .app-betreff-picker,
.app-scope .shared-drawer.drawer-view .app-kategorie-picker,
.app-scope .shared-drawer.drawer-view .app-phase-picker,
.app-scope .shared-drawer.drawer-view .app-person-field,
.app-scope .shared-drawer.drawer-view .app-duration-picker-trigger,
.app-scope .shared-drawer.drawer-view .app-toggle-pill,
.app-scope .shared-drawer.drawer-view .kanban-fakturierbar-check {
  pointer-events: none !important;
  opacity: 0.75;
}
.app-scope .shared-drawer.drawer-view .drawer-title-editable,
.app-scope .shared-drawer.drawer-view .mention-composer,
.app-scope .shared-drawer.drawer-view textarea,
.app-scope .shared-drawer.drawer-view input {
  background: transparent;
  cursor: default;
}
/* Speichern-Button im Footer gibt's im View-Modus nicht — Consumer setzt
   footerActions: null. Falls er trotzdem da ist, verbergen. */
.app-scope .shared-drawer.drawer-view [data-drawer-action="save"],
.app-scope .shared-drawer.drawer-view [data-drawer-action="cancel"] { display: none; }
/* ActivityLog: Kommentar-Box im View-Modus verstecken (wie bei readonly).
   Timeline + bestehende Anhaenge bleiben lesbar. */
.app-scope .shared-drawer.drawer-view .app-activity-log-commentbox { display: none; }

/* Drawer-Busy + Spinner fuer Speichern/Abschliessen-Flows. */
.app-scope .shared-drawer.drawer-busy { pointer-events: none; }
.app-scope .shared-drawer.drawer-busy [data-drawer-action="save"],
.app-scope .shared-drawer.drawer-busy [data-drawer-action="complete"] { pointer-events: auto; }
.app-scope .shared-drawer.drawer-busy::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(255,255,255,0.35);
  z-index: 50;
  pointer-events: none;
}
.shared-drawer-spinner {
  display: inline-block;
  width: 12px; height: 12px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: lod-spin var(--duration-spinner) var(--ease-linear) infinite;
  margin-right: var(--space-1-5);
  vertical-align: -2px;
}
.app-scope .btn.is-loading { opacity: 0.85; }

/* DrawerDirtyGuard Saving-Overlay.
   Liegt ueber dem aktiven Drawer waehrend der Save-Kaskade laeuft, bevor der
   Sub-Drawer geoeffnet wird. Blockierend, damit der Nutzer nicht im falschen
   Drawer rumklickt. */
.app-drawer-saving-overlay {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 27, 48, 0.18);
  backdrop-filter: blur(1px);
  animation: app-drawerFade var(--duration-quick) var(--ease-out-soft);
}
.app-drawer-saving-card {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2-5);
  padding: var(--space-3-5) var(--space-4-5);
  background: var(--lod-white);
  color: var(--lod-darkblue);
  border-radius: var(--radius-pill-sm);
  box-shadow: 0 6px 24px rgba(15, 27, 48, 0.18), 0 0 0 1px rgba(15, 27, 48, 0.06);
  font-weight: var(--fw-semibold);
  font-size: var(--font-size-base);
}
.app-drawer-saving-card .shared-drawer-spinner {
  width: 14px; height: 14px;
  border-width: 2px;
  margin-right: 0;
  color: var(--lod-darkblue);
}

@keyframes app-drawerSlide {
  from { transform: translateX(24px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes app-drawerFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Exit (Charakter B) — getriggert via .is-closing (LoD.motion.animateOut).
   Panel gleitet nach rechts raus + fadet, Backdrop fadet; schneller als der
   Enter (Accelerate). pointer-events:none am schliessenden Backdrop. */
.app-scope .shared-drawer.is-closing { animation: app-drawerSlideOut var(--motion-exit) var(--ease-exit) forwards; }
.app-scope .drawer-backdrop.is-closing { pointer-events: none; animation: app-drawerFadeOut var(--motion-exit) var(--ease-exit) forwards; }
@keyframes app-drawerSlideOut {
  from { transform: translateX(0); opacity: 1; }
  to   { transform: translateX(24px); opacity: 0; }
}
@keyframes app-drawerFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Mobile: Drawer Full-Width */
@media (max-width: 599px) {
  .app-scope .shared-drawer,
  .app-scope .shared-drawer.width-narrow,
  .app-scope .shared-drawer.width-medium,
  .app-scope .shared-drawer.width-wide {
    width: 100%;
  }
}

/* Drawer-Header.
   Default-Mode (ohne Custom-Header): Subtitle + Titel + Close.
   Custom-Header (Kanban etc.): Consumer rendert die komplette Header-Struktur
   inkl. Close-Button, der Drawer selbst rendert nur das <header>-Element. */
.app-scope .shared-drawer .drawer-header {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-6);
  border-bottom: 1px solid var(--lod-gray-200);
  flex-shrink: 0;
  min-height: 52px;
}
/* Sticky-Subtitle: Slot unter dem Header fuer zwei Arten von Inhalt:
   (a) .drawer-sticky-pinned: dauerhaft angeheftet (z.B. Zeit-Drawer zeigt
       die Aufgabe permanent).
   (b) .drawer-sticky-scrolltitle: erscheint zusaetzlich beim Body-Scroll
       (IntersectionObserver triggert). */
.app-scope .shared-drawer .drawer-sticky-title {
  flex-shrink: 0;
  max-height: 0;
  overflow: hidden;
  padding: 0 var(--space-6);
  border-bottom: 1px solid transparent;
  background: var(--color-surface);
  transition: max-height var(--duration-normal) var(--ease-soft), padding var(--duration-normal) var(--ease-soft), border-color var(--duration-normal) var(--ease-soft);
}
.app-scope .shared-drawer .drawer-sticky-title.is-visible {
  max-height: 90px;
  padding: var(--space-2) var(--space-6);
  border-bottom: 1px solid var(--lod-gray-200);
}
.app-scope .shared-drawer .drawer-sticky-pinned {
  font-size: 12.5px;
  color: var(--lod-gray-600);
  font-weight: var(--fw-medium);
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-scope .shared-drawer .drawer-sticky-scrolltitle {
  margin-top: var(--space-xxs);
  font-family: var(--lod-font-display);
  font-size: 15px;
  font-weight: var(--fw-bold);
  color: var(--lod-darkblue-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-scope .shared-drawer .drawer-title-area {
  display: flex; flex-direction: column;
  flex: 1; min-width: 0;
}
/* Subtitle dezent (Label-Caps-Stil, keine Entity-ID).
   Subtitle steht eng am Titel — 4px margin-bottom bindet sie visuell als Einheit. */
.app-scope .shared-drawer .drawer-subtitle {
  font-size: var(--font-size-sm);
  font-weight: var(--fw-bold);
  color: var(--lod-gray-500);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  margin-bottom: var(--space-1);
  line-height: 1.2;
}
.app-scope .shared-drawer .drawer-title {
  font-family: var(--lod-font-display);
  font-size: var(--font-size-h4);  /* 22px aus Tokens, Handoff-ausgerichtet */
  font-weight: var(--fw-bold);
  color: var(--lod-darkblue-700);
  letter-spacing: 0.01em;
  line-height: 1.25;
}
/* Close-Button — Desktop: 36px, Mobile (Touch-Target): 44px via @media unten.
   Fluent-X-Icon (dismiss_24_regular) statt Unicode-Glyphe. */
.app-scope .shared-drawer .drawer-close,
.app-scope .shared-drawer .drawer-head-icon-btn {
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  color: var(--lod-gray-500);
  background: transparent;
  display: grid; place-items: center;
  transition: background var(--duration-quick), color var(--duration-quick);
  flex-shrink: 0;
  padding: 0;
}
.app-scope .shared-drawer .drawer-close:hover,
.app-scope .shared-drawer .drawer-head-icon-btn:hover {
  background: var(--lod-gray-100);
  color: var(--lod-darkblue);
}
.app-scope .shared-drawer .drawer-close:focus-visible,
.app-scope .shared-drawer .drawer-head-icon-btn:focus-visible {
  outline: none;
  box-shadow: var(--lod-shadow-focus);
}
/* Icon-Img in Header-Icon-Buttons: 16px zentriert, folgt currentColor */
.app-scope .shared-drawer .drawer-head-icon-btn img,
.app-scope .shared-drawer .drawer-close img {
  width: 16px; height: 16px;
  /* SVG-Icons werden durch filter/currentColor eingefaerbt, falls sie inline waren.
     Fluent-SVG-Files nutzen stroke/fill="currentColor" — fuer sie reicht color. */
}

/* Held-Aktion im Drawer-Kopf: EIN beschrifteter CTA (z. B. „Qualifizieren", „Gewonnen")
   neben den neutralen Icon-Buttons — die wichtigste Aktion des Datensatzes bekommt
   sichtbares Gewicht, statt als eines von acht Monochrom-Icons unterzugehen.
   Brand-Gradient = dieselbe Premium-CTA-Sprache wie pauf-abs-primary/Mail-Send. */
.app-scope .shared-drawer .drawer-head-cta {
  display: inline-flex; align-items: center; gap: var(--space-1-5);
  height: 32px; padding: 0 var(--space-3);
  border: 1px solid transparent; border-radius: var(--radius-pill);
  background: linear-gradient(120deg, var(--lod-darkblue), var(--lod-violet) 70%, var(--lod-turquoise));
  color: #fff; font-size: var(--font-size-sm); font-weight: 600; line-height: 1;
  box-shadow: var(--shadow-2); cursor: pointer; flex-shrink: 0;
  transition: filter var(--duration-quick), box-shadow var(--duration-quick);
}
.app-scope .shared-drawer .drawer-head-cta:hover { filter: brightness(1.08); box-shadow: var(--shadow-4); }
.app-scope .shared-drawer .drawer-head-cta:focus-visible { outline: none; box-shadow: var(--lod-shadow-focus); }
.app-scope .shared-drawer .drawer-head-cta img { width: 16px; height: 16px; filter: brightness(0) invert(1); }
/* Danger-Ghost (z. B. „Verloren"): sichtbar beschriftet, aber bewusst leiser als der
   Gewinn-CTA daneben — Text-Look mit roter Kontur, kein zweiter Farbblock. */
.app-scope .shared-drawer .drawer-head-cta--danger {
  background: var(--color-surface); color: var(--status-danger-fg, #b10e1c);
  border-color: color-mix(in srgb, var(--status-danger-fg, #b10e1c) 45%, var(--color-surface));
  box-shadow: none;
}
.app-scope .shared-drawer .drawer-head-cta--danger:hover { filter: none; background: color-mix(in srgb, var(--status-danger-fg, #b10e1c) 7%, var(--color-surface)); box-shadow: none; }
.app-scope .shared-drawer .drawer-head-cta--danger img { filter: none; opacity: .8; }

/* Title-Static: View-Modus-Title (statisch, gross).
   aus wissen-drawer.css migriert — wird auch von EntityDrawer-Default und
   firma-drawer als Title-Slot im View-Mode genutzt. */
.shared-drawer .drawer-title-static {
  font-size: var(--font-size-h4);
  font-weight: var(--fw-semibold, 600);
  color: var(--color-text-primary);
  line-height: 1.3;
  padding: var(--space-1) 0;
}

/* Drawer-Header-Meta-Streifen (Herkunft-Pill + A-Nr + Status-Pill) */
.app-scope .shared-drawer .drawer-head-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.app-scope .shared-drawer .drawer-head-meta .id {
  font-family: var(--lod-font-mono);
  font-size: var(--font-size-sm);
  color: var(--lod-gray-500);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  /* Autonummer ist ein geschaeftskritischer Anker (siehe drawer-header-actions.js):
     nicht schrumpfen, sonst clippt sie trotz nowrap unter die Nachbar-Pillen. */
  flex-shrink: 0;
}
/* Herkunft-/Entity-Pille (als "pill-tag" gerendert, nicht "pill pill-tag" — daher
   greift das nowrap aus pill.css nicht) + generische Pille: als Header-Anker nicht
   schrumpfen und nicht mehrzeilig umbrechen. Sonst sprengt ein mehrwortiges Label
   ("NEUE ANFRAGE", "NEUES PROJEKT") die auf 52px ausgelegte Kopfzeile. Der Platz-
   druck landet dann korrekt bei den Tone-Badges (Tier-Hide greift). */
.app-scope .shared-drawer .drawer-head-meta .pill-tag,
.app-scope .shared-drawer .drawer-head-meta .pill {
  flex-shrink: 0;
  white-space: nowrap;
}
/* Gesamt-Dauer-Badge im Drawer-Header. Gleiche Groesse wie Status-Pill
   (kompakter), damit Header-Badges visuell harmonieren. */
.app-scope .shared-drawer .drawer-head-meta .drawer-head-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 10.5px;
  color: var(--lod-gray-500);
  font-weight: var(--fw-semibold);
  padding: var(--space-xxs) var(--space-2);
  background: var(--lod-gray-50);
  border-radius: var(--radius-circular);
  white-space: nowrap;
  /* Wie .id/.pill-tag NICHT schrumpfen: der Meta-Streifen hat overflow:hidden,
     ein schrumpfendes nowrap-Badge wuerde sonst mitten im Label hart geclippt
     ("In Bearbeitun"). Feste Breite ist zugleich Voraussetzung dafuer, dass die
     Tier-Collapse-Logik (drawer-header-actions.js) den Ueberlauf ueberhaupt
     erkennt und sauber auf is-meta-tier-1/-2 eskaliert statt zu clippen. */
  flex-shrink: 0;
  line-height: 1.3;
}
.app-scope .shared-drawer .drawer-head-meta .drawer-head-badge img { opacity: 0.6; }
/* Tone-Varianten fuer Drawer-Head-Badges.
   Tokens: --lod-turquoise-* = success (fakturierbar), --lod-danger* = negativ. */
.app-scope .shared-drawer .drawer-head-meta .drawer-head-badge.tone-success {
  background: var(--lod-turquoise-100);
  color: var(--lod-turquoise-900);
}
.app-scope .shared-drawer .drawer-head-meta .drawer-head-badge.tone-danger {
  background: var(--status-danger-bg);
  color: var(--lod-danger);
}
/* tone-info (Teams),
   tone-warn (Outlook-Sync ausstehend). */
.app-scope .shared-drawer .drawer-head-meta .drawer-head-badge.tone-info {
  background: var(--lod-blue-50);
  color: var(--lod-blue-700);
}
.app-scope .shared-drawer .drawer-head-meta .drawer-head-badge.tone-warn {
  background: var(--lod-amber-50);
  color: var(--lod-amber-700);
}
/* VK-Phase-Badge: Farbskala früh→spät (identisch zur Pipeline-Board-Skala in
   pipeline.css) — „wie weit im Trichter" ist damit am Badge ablesbar, statt
   dass jede Phase dasselbe tone-info-Blau trägt. Klasse setzt vk-drawer. */
.app-scope .shared-drawer .drawer-head-meta .drawer-head-badge.vk-phase-s0 { background: var(--lod-gray-100); color: var(--lod-gray-700); }
.app-scope .shared-drawer .drawer-head-meta .drawer-head-badge.vk-phase-s1 { background: var(--lod-darkblue-50); color: var(--lod-darkblue-300); }
.app-scope .shared-drawer .drawer-head-meta .drawer-head-badge.vk-phase-s2 { background: var(--lod-darkblue-50); color: var(--lod-darkblue); }
.app-scope .shared-drawer .drawer-head-meta .drawer-head-badge.vk-phase-s3 { background: var(--lod-violet-50); color: var(--lod-violet); }
.app-scope .shared-drawer .drawer-head-meta .drawer-head-badge.vk-phase-s4 { background: var(--lod-turquoise-50); color: var(--lod-turquoise-900); }
.app-scope .shared-drawer .drawer-head-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}
/* Co-Editing-Presence-Slot: sitzt zwischen .drawer-head-meta (waechst) und
   .drawer-head-actions (rechts gepinnt) → rechtsbuendig direkt links der
   Action-Icons, mit dezentem Abstand. Presence-Cluster-Innenleben:
   web/styles/components/badges/presence-cluster.css. */
.app-scope .shared-drawer .drawer-head-presence {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.app-scope .shared-drawer .drawer-head-presence:empty { display: none; }
/* Abstand zu den Action-Icons NUR wenn tatsaechlich Avatare da sind — solo
   (Normalfall) kollabiert der Slot, kein toter Header-Spalt. */
.app-scope .shared-drawer .drawer-head-presence .presence-cluster.has-presence { margin-right: var(--space-2); }

/* ══════════════════════════════════════════════════════════════════════════
   Drawer-Header-Action-Overflow SSOT.
   Content-basierte Fit-Messung via ResizeObserver. Pflichtkonsument:
   web/js/components/drawers/_shared/drawer-header-actions.js (Auto-Hook in
   EntityDrawer._renderHeader).

   PROGRESSIV, kein Alles-oder-nichts: der Helper klappt nur so viele
   Aktionen ins "..." wie noetig — die wichtigsten bleiben als Icon-Buttons
   sichtbar. Eskalation danach: Tone-Badges kompakter (is-meta-tier-1) →
   Tone-Badges hide (is-meta-tier-2), pill-tag + id bleiben immer.
   ══════════════════════════════════════════════════════════════════════════ */

/* Overflow-Button selbst: Default-Zustand versteckt. Wird nur sichtbar wenn
   der Helper feststellt dass Meta + Actions nicht in den Header passen
   (siehe drawer-header-actions.js — content-basierte Fit-Messung). */
.app-scope .shared-drawer .drawer-head-overflow-btn { display: none; }

/* `data-dha-hidden` setzt der Helper PRO ELEMENT: nur die Aktionen, die
   tatsaechlich nicht mehr passen, verschwinden ins "..." (nach Prioritaet,
   von rechts). Gilt auch fuer Divider, deren Gruppe komplett eingeklappt
   ist. `.is-overflow-mode` am Strip bedeutet "mindestens eine Aktion
   eingeklappt" und blendet den "..."-Button ein. Beides haengt am
   tatsaechlichen Inhaltsbedarf, nicht an einer fixen Pixel-Schwelle. */
.app-scope .shared-drawer .drawer-head-actions [data-dha-hidden="true"] {
  display: none;
}
.app-scope .shared-drawer .drawer-head-actions.is-overflow-mode .drawer-head-overflow-btn {
  display: grid;
}

/* ─── Badge-Cascade (analog Card-Header-Tiers in card.css) ───
   Klassen werden vom drawer-header-actions.js content-basiert gesetzt:
     - .is-meta-tier-1: Meta-Inhalt passt mit Action-Overflow nicht rein,
                        Tone-Badges kompakter (Padding + Font kleiner)
     - .is-meta-tier-2: Selbst kompakte Tone-Badges passen nicht — hide,
                        pill-tag + id bleiben als geschaeftskritische Anker.
   Heute haben die Drawer-Head-Tone-Badges meist NUR Text, kein Icon —
   Icon-only ist also nicht moeglich. Wir reduzieren stattdessen Padding +
   Schrift in Tier 1 und hiden in Tier 2. */
.app-scope .shared-drawer .drawer-head-meta.is-meta-tier-1 .drawer-head-badge {
  padding: var(--space-px) var(--space-1-5);
  font-size: var(--font-size-xs);
}
.app-scope .shared-drawer .drawer-head-meta.is-meta-tier-2 .drawer-head-badge {
  display: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   Aktionen-Seitenleiste (Rail-Modus, Desktop/Tablet >=600px & hover-fähig).
   Modul: drawer-action-rail.js + drawer-action-rail.css. Diese drei Bausteine
   betreffen die Drawer-HÜLLE selbst (Body-Wrap, Header-Ausblendung der in die
   Rail gespiegelten Originale, View/Readonly-Freigabe) — deshalb hier, nicht
   im self-scoped Modul-CSS. Auf <600px wird die Rail vom JS abgebaut und der
   Header-"..."-Overflow (oben) übernimmt wieder.
   ══════════════════════════════════════════════════════════════════════════ */

/* .drawer-mid ist eine Flex-Row: links die Inhalts-Spalte (Sticky-Title + Body),
   rechts die Rail. So bleibt die Rail oben unter der Kopfzeile verankert und wird
   vom einblendenden Sticky-Title NICHT nach unten gedrückt. .drawer-mid ist zugleich
   Positionsanker für das absolute Ausklapp-Panel (spannt die volle Mid-Höhe). */
.app-scope .shared-drawer .drawer-mid {
  flex: 1;
  min-height: 0;
  display: flex;
  position: relative;
}
.app-scope .shared-drawer .drawer-mid-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.app-scope .shared-drawer .drawer-mid-main > .drawer-body {
  flex: 1;
  min-width: 0;
  min-height: 0;
}

/* Im Rail-Modus bleibt im Header nur Meta + Bearbeiten-Stift + Hero-CTA +
   Schließen; die overflowable Aktionen (inkl. Copy-Link/D365) leben in der
   Rail. Die Header-Originale werden ausgeblendet — das Modul spiegelt sie als
   Rail-Proxys und triggert beim Klick den Original-Button. */
.app-scope .shared-drawer.drawer-has-action-rail .drawer-head-actions .drawer-head-icon-btn:not(.drawer-close):not([data-drawer-action="toggle-edit"]):not([data-anchor="true"]),
.app-scope .shared-drawer.drawer-has-action-rail .drawer-head-actions .drawer-head-overflow-btn,
.app-scope .shared-drawer.drawer-has-action-rail .drawer-head-actions .drawer-head-divider {
  display: none !important;
}

/* Rail-Buttons sind Navigation/Meta (Copy-Link, D365, Duplizieren …), kein
   Inhalts-Edit — im View-/Readonly-Modus bedienbar halten, analog zur
   Header-Icon-Whitelist weiter oben. */
.app-scope .shared-drawer.drawer-readonly .drawer-action-rail button,
.app-scope .shared-drawer.drawer-readonly .dar-panel button,
.app-scope .shared-drawer.drawer-view .drawer-action-rail button,
.app-scope .shared-drawer.drawer-view .dar-panel button {
  pointer-events: auto !important;
  opacity: 1;
}

/* Mobile: Icon-Buttons auf 44px MOB-0 Touch-Target. */
@media (max-width: 599px) {
  .app-scope .shared-drawer .drawer-head-icon-btn,
  .app-scope .shared-drawer .drawer-close {
    width: 44px; height: 44px;   /* Mobile MOB-0 Touch-Target */
  }
  /* Held-CTA mobil: Label weg (Icon-Pill bleibt durch den Gradient erkennbar),
     Höhe aufs Touch-Target. */
  .app-scope .shared-drawer .drawer-head-cta { height: 40px; padding: 0 var(--space-2-5); }
  .app-scope .shared-drawer .drawer-head-cta .drawer-head-cta-lbl { display: none; }
}
/* Body mit 18px top + 24px bottom/horizontal (Handoff-ausgerichtet).
   Body-gap kleiner (18px) — Sections haben ihre eigenen h4-Header mit
   margin-top, so matcht der Handoff-Rhythmus exakt. */
.app-scope .shared-drawer .drawer-body {
  padding: var(--space-4) var(--space-6) var(--space-6);
  overflow-y: auto;
  /* Horizontales Containment auf Drawer-Body-Ebene. Verhindert,
     dass ein internes Modul (Subgrid mit fixer Grid-Template, Tabelle,
     überlanger Pille etc.) den gesamten Drawer-Body horizontal scrollbar
     macht. min-width:0 erlaubt dem Body, in einem flex-Parent unter seine
     intrinsische Inhaltsbreite zu schrumpfen — sonst greift overflow-x
     bei flex-children nicht zuverlässig. Ist ein Sicherheitsnetz, kein
     Designziel: einzelne Subgrids bekommen pro Modul Mobile-Layouts
     (Spalten-Drop), damit der Inhalt drinbleibt statt clipped zu werden. */
  overflow-x: hidden;
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Titel-Area oben im Body (nicht im Header, wegen editable).
   flex:0 0 auto resettet das flex:1 der Header-Variante — sonst wuerde
   die Title-Area im vertikalen Drawer-Body-Flex die komplette Rest-Hoehe
   fressen und einen riesigen Leerraum vor der Details-Section erzeugen. */
.app-scope .shared-drawer .drawer-body > .drawer-title-area {
  flex: 0 0 auto;
  margin-bottom: var(--space-4);
}

/* Editable Titel — textarea mit Hover-Hintergrund + Focus-Border */
.app-scope .shared-drawer .drawer-title-editable {
  font-family: var(--lod-font-display);
  font-size: var(--font-size-h4);
  font-weight: var(--fw-bold);
  color: var(--lod-darkblue-700);
  line-height: 1.25;
  width: 100%;
  padding: var(--space-1-5) var(--space-2-5);
  margin: -6px -10px 0;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  resize: none;
  outline: none;
  overflow: hidden;            /* C-Fix: kein Scrollbalken im Titel - autosize macht die Hoehe */
  transition: background var(--duration-quick), border-color var(--duration-quick);
  box-sizing: border-box;
  display: block;
}
/* Mobile: Negativer Seiten-Margin faellt weg, damit Titel in der Flucht der
   Felder darunter bleibt (sonst wirkt die Titel-Zeile im schmalen Drawer
   sichtbar nach links versetzt). Hover/Focus-Highlight rueckt entsprechend
   mit — weiter visuell sauber, nur ohne Ueberhang. */
@media (max-width: 599px) {
  .app-scope .shared-drawer .drawer-title-editable {
    margin: 0;
    padding: var(--space-1-5) 0;
    width: 100%;
  }
}
.app-scope .shared-drawer .drawer-title-editable:hover {
  background: var(--lod-gray-50);
}
.app-scope .shared-drawer .drawer-title-editable:focus {
  background: var(--color-surface);
  border-color: var(--lod-turquoise);
  box-shadow: var(--lod-shadow-focus);
}
.app-scope .shared-drawer .drawer-title-editable::placeholder {
  color: var(--lod-gray-500);
  font-weight: var(--fw-medium);
}
/* Kontakt-Title ist reine Anzeige (abgeleitet aus Vorname+Nachname).
   is-readonly unterdrueckt Hover/Focus + Cursor. */
.app-scope .shared-drawer .drawer-title-editable.is-readonly {
  cursor: default;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  pointer-events: none;
  /* Readonly-Titel ist ein <div> (kein autosize-Textarea, z.B. Kontakt-Drawer):
     ein umbruchloser Name (E-Mail-als-Name, langer Kompositum-Nachname) wuerde
     sonst vom overflow:hidden der Basis-Regel still abgeschnitten. */
  overflow-wrap: anywhere;
}

/* Chips-Zeile unter Titel (Projekt + Phase) */
.app-scope .shared-drawer .drawer-chips {
  /* Desktop = Chips nebeneinander in einer Zeile, jeder nimmt gleich viel
     Platz (flex: 1 1 0). Bei schmalem Drawer (narrow) via Container-Query
     weiter unten: column-Stack. So sieht Desktop klassisch aus, Mobile ist
     gut lesbar. */
  display: flex;
  flex-direction: row;
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-2);
  flex-wrap: nowrap;
}
.app-scope .shared-drawer .drawer-chips .f-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1) var(--space-2-5);
  border-radius: var(--radius-circular);
  border: 1px solid var(--lod-gray-200);
  background: var(--color-surface);
  font-size: 12.5px;
  color: var(--lod-gray-700);
  font-weight: var(--fw-medium);
  transition: all var(--duration-snappy);
  cursor: default;
}
/* Interaktive Varianten: pointer cursor + hover-feedback. is-editable
   triggert einen Picker, is-clickable einen Drill-Drawer. Non-editable
   chips bleiben ohne Pointer und ohne Hover-Tinten (Paket Aufgabe-Drawer-
   Gast sieht klar, dass das Feld locked ist). */
.app-scope .shared-drawer .drawer-chips .f-chip.is-editable,
.app-scope .shared-drawer .drawer-chips .f-chip.is-clickable {
  cursor: pointer;
}
.app-scope .shared-drawer .drawer-chips .f-chip.is-editable:hover,
.app-scope .shared-drawer .drawer-chips .f-chip.is-clickable:hover {
  border-color: var(--lod-darkblue-300);
  color: var(--lod-darkblue);
}
.app-scope .shared-drawer .drawer-chips .f-chip.tone-turq {
  background: var(--lod-turquoise-100);
  color: var(--lod-darkblue-900);
  border-color: transparent;
}
.app-scope .shared-drawer .drawer-chips .f-chip.tone-darkblue {
  background: var(--lod-darkblue-100);
  color: var(--lod-darkblue);
  border-color: transparent;
}
.app-scope .shared-drawer .drawer-chips .f-chip.tone-gray {
  background: var(--lod-gray-100);
  color: var(--lod-gray-800);
  border-color: transparent;
}
.app-scope .shared-drawer .drawer-chips .f-chip img {
  width: 12px; height: 12px; opacity: 0.7; flex-shrink: 0;
}
/* Chips + leere Picker-Slots teilen sich die Zeile immer exakt gleichmaessig
   (flex: 1 1 0 → jeder 1/N der Breite, unabhaengig vom Inhalt). Damit steht die
   Kunde-/Kontakt-Zeile nie „schepp": egal ob beide leer, einer gefuellt oder
   beide gefuellt — die Felder bleiben gleich breit. Ein ueberlanger Firmen-/
   Projekt-/Phasenname kuerzt via Ellipsis-Span (unten) und zeigt den vollen Text
   im title-Tooltip. min-width:0 ist Pflicht, sonst kann der nowrap-Inhalt die
   Gleichteilung sprengen (Grid-/Flex-Blowout). */
.app-scope .shared-drawer .drawer-chips .f-chip,
.app-scope .shared-drawer .drawer-chips .app-phase-picker {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
/* PhasePicker-Trigger (height:32px aus drawer-fields.css) — in der Chips-Zeile
   die feste Control-Hoehe neutralisieren, damit er nicht ~8px hoeher steht
   als die padding-basierten Firma-/Projekt-Chips daneben. */
.app-scope .shared-drawer .drawer-chips .app-phase-picker {
  height: auto;
  min-height: 0;
}
.app-scope .shared-drawer .drawer-chips .f-chip > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
}
/* Placeholder-Variante: dezenter, gestrichelter Rand — signalisiert "noch leer,
   bitte ausfuellen". Klickbar (springt zum Picker im Field-Grid).
   */
.app-scope .shared-drawer .drawer-chips .f-chip.is-placeholder {
  background: transparent;
  border: 1px dashed var(--lod-gray-300);
  color: var(--lod-gray-500);
}
.app-scope .shared-drawer .drawer-chips .f-chip.is-placeholder:hover {
  border-color: var(--lod-darkblue-300);
  color: var(--lod-darkblue);
}
.app-scope .shared-drawer .drawer-chips .f-chip .f-chip-open-icon {
  width: 10px; height: 10px; opacity: 0.55; margin-left: var(--space-xxs); flex-shrink: 0;
}
/* Clear-Button im Chip.
   Erlaubt es, Firma/Kontakt direkt am Chip zu entfernen, ohne den Picker
   neu oeffnen zu muessen. Dezent — nur on-hover sichtbarer als sonst. */
.app-scope .shared-drawer .drawer-chips .f-chip-clear {
  background: transparent;
  border: 0;
  padding: 0 var(--space-xxs);
  margin-left: var(--space-1);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  border-radius: 50%;
  flex: 0 0 auto;
  opacity: 0.45;
  transition: opacity var(--duration-quick) var(--ease-soft);
}
.app-scope .shared-drawer .drawer-chips .f-chip-clear:hover,
.app-scope .shared-drawer .drawer-chips .f-chip-clear:focus-visible {
  opacity: 0.95;
  background: rgba(0,0,0,0.06);
  outline: none;
}
.app-scope .shared-drawer .drawer-chips .f-chip-clear img {
  width: 10px; height: 10px; opacity: 0.85;
}
/* Picker-Slot: AsyncPicker-Trigger lebt direkt im Chip-Container und sieht
   aus wie ein dezenter Placeholder-Chip. */
.app-scope .shared-drawer .drawer-chips .f-chip-picker-slot {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
}
.app-scope .shared-drawer .drawer-chips .f-chip-picker-slot .app-async-picker {
  width: 100%;
  height: auto;
  min-height: 28px;
  padding: var(--space-1) var(--space-2-5);
  border-radius: var(--radius-circular);
  border: 1px dashed var(--lod-gray-300);
  background: transparent;
  color: var(--lod-gray-500);
  font-size: 12.5px;
  font-weight: var(--fw-medium);
}
.app-scope .shared-drawer .drawer-chips .f-chip-picker-slot .app-async-picker:hover {
  border-color: var(--lod-darkblue-300);
  color: var(--lod-darkblue);
}

/* Inline-Picker-Slot : vollbreiter Wizard-Slot fuer
 Pflicht-Typeahead-Eingaben (pj-Create-Firma). Bricht in der drawer-chips-
 Flex-Reihe auf eine eigene Zeile um und nimmt die volle Breite ein. Der
 Konsument (z.B. pj-drawer) rendert sein eigenes Eingabe-Layout in den
 inneren .f-chip-inline-picker-host und stylt dieses File-lokal. */
.app-scope .shared-drawer .drawer-chips .f-chip-picker-slot--inline {
  flex: 1 1 100%;
  width: 100%;
  display: block;
  position: relative;
}
.app-scope .shared-drawer .drawer-chips .f-chip-picker-slot--inline .f-chip-inline-picker-host {
  width: 100%;
}
.app-scope .shared-drawer .drawer-chips .f-chip-picker-slot--inline .app-required-dot {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Body-Sections — h4-Header mit margin-top (Handoff-Rhythmus) */
.app-scope .shared-drawer .drawer-section + .drawer-section {
  margin-top: var(--space-6);
}
/* Letzte Section (meist Aktivitaet/Kommentare) fuellt den Restplatz im
   Drawer-Body — sonst endet die Kommentar-Box frueher als der Drawer selbst.
   Greift ueber alle Drawer-Varianten (Phase/Firma/Kontakt/Projekt/Aufgabe). */
.app-scope .shared-drawer .drawer-body > .drawer-section:last-child {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
.app-scope .shared-drawer .drawer-body > .drawer-section:last-child > * {
  flex-shrink: 0;
}
.app-scope .shared-drawer .drawer-section h4 {
  font-size: var(--fs-badge);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--lod-gray-500);
  margin: 0 0 var(--space-3);
  font-family: var(--lod-font-body);
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
}

/* Field-Grid 120px Label | 1fr Wert */
.app-scope .shared-drawer .field-grid {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--space-2) var(--space-3-5);
  align-items: start;
}
.app-scope .shared-drawer .field-grid .field-label {
  font-size: 12.5px;
  color: var(--lod-gray-700);
  padding-top: 7px;
  font-weight: var(--fw-regular);
}
.app-scope .shared-drawer .field-grid .field-value {
  font-size: 13.5px;
  color: var(--lod-gray-900);
  font-weight: var(--fw-medium);
  padding: var(--space-1-5) var(--space-2-5);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  /* Grid-Item-Blowout-Guard: ohne min-width:0 setzt breiter nowrap-Inhalt
     (Datum-Trigger + Quick-Chips) die min-content-Breite der 1fr-Spalte hoch
     und der Drawer-Inhalt laeuft rechts aus dem Drawer (Clip am Drawer-Rand). */
  min-width: 0;
  transition: all var(--duration-quick);
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.app-scope .shared-drawer .field-grid .field-value.editable {
  cursor: pointer;
}
.app-scope .shared-drawer .field-grid .field-value.editable:hover {
  background: var(--lod-gray-50);
  border-color: var(--lod-gray-200);
}
.app-scope .shared-drawer .field-grid .field-value.empty {
  color: var(--lod-gray-500);
  font-style: italic;
  font-weight: var(--fw-regular);
}
/* Edit-Modus: Input/Select greift statt Display */
.app-scope .shared-drawer .field-grid .field-value.editing {
  padding: 0;
  background: transparent;
  border-color: transparent;
}
.app-scope .shared-drawer .field-grid .field-value .field-icon {
  width: 14px; height: 14px; opacity: 0.7; flex-shrink: 0;
}
.app-scope .shared-drawer .field-grid .field-value input,
.app-scope .shared-drawer .field-grid .field-value select,
.app-scope .shared-drawer .field-grid .field-value textarea {
  flex: 1;
  width: 100%;
}

/* Beschreibung-Textarea im Drawer-Body */
.app-scope .shared-drawer .drawer-textarea {
  width: 100%;
  min-height: 70px;
  border: 1px solid var(--lod-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-2-5);
  font-size: 13.5px;
  font-family: inherit;
  outline: none;
  resize: none;
  background: var(--lod-gray-50);
  color: var(--lod-gray-900);
  transition: border-color var(--duration-quick), background var(--duration-quick), box-shadow var(--duration-quick);
}
.app-scope .shared-drawer .drawer-textarea:focus {
  background: var(--color-surface);
  border-color: var(--lod-turquoise);
  box-shadow: var(--lod-shadow-focus);
}
.app-scope .shared-drawer .drawer-textarea::placeholder {
  color: var(--lod-gray-500);
}

/* MentionComposer im Drawer-Kontext spiegelt das drawer-textarea-Look&Feel */
.app-scope .shared-drawer .drawer-composer-host { width: 100%; }
.app-scope .shared-drawer .drawer-composer-host .mention-composer {
  min-height: 70px;
  background: var(--lod-gray-50);
  color: var(--lod-gray-900);
  border-color: var(--lod-gray-200);
  font-size: 13.5px;
}
.app-scope .shared-drawer .drawer-composer-host .mention-composer:focus {
  background: var(--color-surface);
  border-color: var(--lod-turquoise);
  box-shadow: var(--lod-shadow-focus);
}

.app-scope .shared-drawer .drawer-footer {
  padding: var(--space-3) var(--space-6);
  /* iPhone-Rundung/Home-Indicator: Save-Button darf nicht abgeschnitten werden.
     max() haelt das normale padding-bottom auf Desktop, hebt es aber an, sobald
     env(safe-area-inset-bottom) groesser ist. */
  padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
  border-top: 1px solid var(--lod-gray-100);
  /* flex-wrap:wrap als Grundzustand: bei vielen Buttons (z.B. Abrechnungs-Footer
     mit bis zu 6 Aktionen) auf schmalem Viewport-Band (481-599px, wo der 480px-
     Container-Query noch nicht greift) brechen ueberzaehlige Buttons um statt
     horizontal aus der Footer-Zeile zu ragen. */
  display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap;
  background: var(--lod-gray-50);
  flex-shrink: 0;
}

/* Drawer-Live-Region (ARIA) — visuell versteckt */
.app-scope .shared-drawer .drawer-live {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Globaler Drawer-Host — tab-unabhaengiger Mount-Punkt
   ══════════════════════════════════════════════════════════════════════════
   Dient als Fallback-Container fuer alle LoD*Drawer-Module, wenn kein
   sektionseigener Container existiert (z.B. auf Projekte-, Anfragen-,
   Admin-Seiten).

   Der Host liegt im <main id="main-content"> (das ist position:relative +
   overflow:hidden) UNTERHALB von Topbar + Tab-Bar. Er ueberlagert nur den
   Content-Bereich per position:absolute inset:0 — nicht den ganzen Viewport.
   Backdrop-Klicks treffen also Content, Topbar/Tabs bleiben klickbar.

   Der Host traegt .app-scope, damit alle bestehenden .app-scope .shared-drawer-
   Regeln ohne Aenderung greifen (keine CSS-Duplikation).

   Im Kanban bleibt der section-eigene [data-kanban-content] die erste
   Wahl — dort ist das Verhalten unveraendert.
   ══════════════════════════════════════════════════════════════════════════ */
#lod-drawer-host {
  position: absolute;
  inset: 0;
  z-index: var(--z-drawer-backdrop);
  overflow: hidden;
  pointer-events: none; /* Host selbst faengt nichts — Kinder uebernehmen */
}
#lod-drawer-host:empty { display: none; }
/* Solange nur Kinder das Event brauchen (Backdrop + Drawer), kippt jeder
   Child auf pointer-events:auto — inkl. des Backdrops (.drawer-backdrop).
   Damit: Klicks auf Backdrop -> Drawer close. Klicks ausserhalb #main-content
   (Topbar, Tabbar) -> unberuehrt, Tab-Wechsel funktioniert. */
#lod-drawer-host > * { pointer-events: auto; }

/* Vertikaler Trenner im Header-Action-Strip: Quick-Create-Gruppe | System-
   Aktionen (Copy-Link/D365/X). Ist die Gruppe vor dem Trenner komplett ins
   "..."-Menue eingeklappt, setzt drawer-header-actions.js data-dha-hidden
   auch am Trenner (generische Hide-Regel oben). */
.app-scope .shared-drawer .drawer-head-divider {
  width: 1px;
  height: 16px;
  background: var(--color-border);
  margin: 0 var(--space-1);
  flex-shrink: 0;
  align-self: center;
}

/* ══════════════════════════════════════════════════════════════════════════
 * DRAWER RESPONSIVENESS — Container-Queries
 *
 * Zentrale, wiederverwendbare Drawer-Reaktions-Logik. Alle Regeln messen die
 * DRAWER-Breite (container-name: drawer, container-type: inline-size am
 * .shared-drawer, oben in dieser Datei).
 *
 * MUSS am DATEIENDE stehen: @container erhoeht die Prioritaet nicht — bei
 * gleicher Spezifitaet gewinnt die spaetere Regel. Die Basis-Regeln
 * (.field-grid, .drawer-chips, .drawer-footer) stehen weiter oben in dieser
 * Datei; nur durch die End-Position gewinnen die Query-Regeln, wenn ihre
 * Bedingung matcht. Fuer Regeln, deren Basis in SPAETER geladenen Dateien
 * liegt (Datum-/Dauer-Quick-Chips: tm-attendees-editor.css, Layer 8), ist
 * zusaetzlich .shared-drawer im Selektor — die hoehere Spezifitaet gewinnt
 * ladereihenfolge-unabhaengig.
 *
 * Breakpoint: < 480px "compact" — einspaltiges Field-Grid (Label oben),
 * Chips untereinander, Fakturierbar-Checkbox in eigene Zeile, Datum-/Dauer-
 * Quick-Buttons weg, Footer-Buttons teilen sich eine Zeile.
 *
 * Die Schwelle liegt BEWUSST unter 480px (= schmalste Desktop-Drawer-Breite
 * width-narrow): Desktop-Drawer behalten ihr zweispaltiges Field-Grid samt
 * Quick-Chips; nur echte Klein-Viewports (Drawer = 100% Viewport unter
 * 480px, d.h. Phones) kippen in den Compact-Modus. 478px statt 479px, weil
 * Container-Queries die CONTENT-Box messen: der 480px-Drawer hat
 * border-left:1px → Content-Box 479px, die NICHT matchen darf. Das Band 480-599px
 * (Drawer = Vollbreite, aber noch zweispaltig) wird durch die Basis-Regeln
 * abgefedert: .field-grid .field-value hat min-width:0 (kein Grid-Blowout)
 * und die Datum-Quick-Chips schrumpfen/scrollen intern wie die Dauer-Chips
 * (tm-attendees-editor.css) statt rechts aus dem Drawer zu laufen.
 *
 * Diese Logik gilt fuer ALLE V2-Drawer (Aufgaben/Projekte/Kontingente/...),
 * weil sie am gemeinsamen .shared-drawer-Shell haengt. Neue Drawer-Consumer
 * muessen NICHTS tun - die Regeln greifen automatisch.
 * ══════════════════════════════════════════════════════════════════════════ */

@container drawer (max-width: 478px) {
  /* Field-Grid einspaltig: Label oben, Value darunter */
  .app-scope .shared-drawer .field-grid {
    grid-template-columns: 1fr;
    gap: var(--space-1-5) 0;
  }
  .app-scope .shared-drawer .field-grid .field-label {
    padding-top: 0;
    padding-bottom: var(--space-xxs);
    font-weight: var(--fw-medium);
  }

  /* Herkunft-Row (Dropdown + Fakturierbar-Checkbox): Checkbox wandert in
     eine neue "Zeile" darunter, damit sie nicht das Dropdown staucht.
     Mit 8px Gap und padding-right-Reset wirkt die Checkbox als
     eigenstaendige Zeile unter dem Dropdown statt angehaengt am Rand. */
  .app-scope .shared-drawer .field-value-row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    padding-right: 0;
  }
  .app-scope .shared-drawer .field-value-row .field-value-main {
    width: 100%;
  }
  .app-scope .shared-drawer .field-value-row .app-toggle-pill,
  .app-scope .shared-drawer .field-value-row .kanban-fakturierbar-check {
    align-self: flex-start;
    /* Pille fluchtend mit dem Dropdown-Inhalt der ersten Zeile anfangen,
       statt linksbuendig mit dem Icon-Slot. Indent = .field-value padding-left
       (10px) + icon (14px) + gap (8px) = 32px. So liest sich die Pille als
       zugehoeriger Sub-Modifier des Hauptfeldes statt als eigenstaendiges
       neues Feld. */
    margin-left: calc(10px + 14px + 8px);
  }

  /* Drawer-Chips im narrow-Mode untereinander statt nebeneinander. Jeder Chip
     nimmt die volle Breite ein - lange Firma-/Projekt-/Phasen-Namen bleiben
     lesbar. Desktop nutzt 3-Spalten-Layout (siehe app.css .drawer-chips). */
  .app-scope .shared-drawer .drawer-chips {
    flex-direction: column;
    align-items: stretch;
  }
  .app-scope .shared-drawer .drawer-chips .f-chip,
  .app-scope .shared-drawer .drawer-chips .f-chip-picker-slot,
  .app-scope .shared-drawer .drawer-chips .app-phase-picker {
    flex: 0 0 auto;
    width: 100%;
  }

  /* Quick-Buttons fuer Datum + Dauer: im narrow-Drawer komplett weg, statt
     halb abgeschnitten am Rand zu stehen. User nutzt den Picker-Trigger,
     der einen vollwertigen Picker oeffnet - das ist auf Mobile besser.
     Beide Selector-Varianten abdecken: app-drawer-date-chips (Datum) und
     app-duration-picker-chips (Dauer). .shared-drawer im Selektor ist Pflicht:
     die Basis-Regeln (display:inline-flex/flex) liegen in tm-attendees-editor.css,
     die NACH dieser Datei laedt — nur die hoehere Spezifitaet gewinnt hier. */
  .app-scope .shared-drawer .app-drawer-date-chips,
  .app-scope .shared-drawer .app-duration-picker-chips {
    display: none;
  }
}

/* ── Dokument-Card (geteilt) ──────────────────────────────────────────────
   Visuell hervorgehobener Datei-Block mit Icon-Tile; klickbar (role=button)
   → oeffnet die In-App-Lightbox. Konsumenten: vt-drawer (Vertrags-PDF),
   zt-drawer (Zertifikats-Bescheinigung). Leerzustand .drawer-doc-empty statt
   stillem Weglassen; Sekundaeraktionen (Ersetzen/Hochladen) in .drawer-doc-actions. */
.shared-drawer .drawer-doc-card {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-quick) var(--ease-soft), box-shadow var(--duration-quick) var(--ease-soft);
}
.shared-drawer .drawer-doc-card--clickable { cursor: pointer; }
.shared-drawer .drawer-doc-card--clickable:hover {
  border-color: var(--brand-default);
  box-shadow: var(--shadow-sm);
}
.shared-drawer .drawer-doc-card--clickable:focus-visible {
  outline: 2px solid var(--brand-default);
  outline-offset: 2px;
}
.shared-drawer .drawer-doc-ico {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--brand-default) 10%, transparent);
  color: var(--brand-default);
}
.shared-drawer .drawer-doc-text { flex: 1; min-width: 0; }
.shared-drawer .drawer-doc-name {
  font-size: var(--fs-body, 14px);
  font-weight: var(--fw-semibold, 600);
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shared-drawer .drawer-doc-hint {
  font-size: var(--fs-caption, 12px);
  color: var(--color-text-secondary);
  margin-top: var(--space-xxs);
}
.shared-drawer .drawer-doc-empty {
  font-size: var(--fs-caption, 12px);
  color: var(--color-text-tertiary);
  font-style: italic;
}
.shared-drawer .drawer-doc-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}

/* Footer bei sehr schmalem Drawer: Alle drei Buttons bekommen gleich viel
   Platz in EINER Zeile. Stattdessen flexen alle Buttons zu gleichen Teilen
   — das Icon+Label-Layout wird dadurch an jeden Button schmal und
   konsistent. */
@container drawer (max-width: 478px) {
  .app-scope .shared-drawer .drawer-footer {
    flex-wrap: nowrap;
    gap: var(--space-1-5);
  }
  .app-scope .shared-drawer .drawer-footer .btn-primary-sm,
  .app-scope .shared-drawer .drawer-footer .btn-outline-sm,
  .app-scope .shared-drawer .drawer-footer .btn-danger-sm {
    flex: 1 1 0;
    min-width: 0;
    padding: var(--space-2) var(--space-2-5);
    justify-content: center;
    margin-left: 0 !important;
  }
  /* Label + Icon kompakt zeigen; bei sehr schmal eventuell Label abschneiden */
  .app-scope .shared-drawer .drawer-footer .btn-primary-sm > span,
  .app-scope .shared-drawer .drawer-footer .btn-outline-sm > span,
  .app-scope .shared-drawer .drawer-footer .btn-danger-sm > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}