/* ─── cohrteam Design System — ct.*-Control-Styles (ADR-028) ───────────────
   Ausschließlich semantische Tokens aus tokens.css, keine Rohwerte (siehe UID-003). Wird nach
   tokens.css geladen. Jede ct.*-Komponente bekommt hier einen eigenen Abschnitt. */

/* ── ct.PageHeader ─────────────────────────────────────────────────────── */

.ctPageHeader {
  display: flex;
  align-items: center;
  /* Nutzer-Feedback 2026-08-25: "justify-content: space-between" verteilte den verfügbaren
     Platz GLEICHMÄSSIG zwischen ALLEN Kind-Elementen — solange nur zwei sichtbare Kinder da
     waren (Titel-Block + Aktionen, der Zurück-Button ist per display:none entfernt, kein Logo
     gesetzt), sah das durch Zufall korrekt aus (Titel blieb das erste Element, landete also
     links). Sobald ein drittes Element davor steht (hier: das neue Datums-Badge, ct:badge —
     dasselbe würde bei jeder Seite mit gesetztem logoUrl auftreten), rutschte der Titel
     sichtbar in die Mitte, weil space-between den Platz jetzt auf ZWEI Lücken statt einer
     aufteilte. Robuster Fix: kein space-between mehr, stattdessen wächst .ctPageHeaderMain
     selbst (flex:1, siehe dort) und schiebt die Aktionen ans Ende — bleibt dabei unabhängig
     von der Anzahl vorangehender Elemente (Zurück-Button/Logo/Badge) direkt neben diesen. */
  gap: var(--ct-spacing-m);
  padding: var(--ct-spacing-m) var(--ct-spacing-l);
  background: var(--ct-color-surface-card);
  border-bottom: 1px solid var(--ct-color-border-divider);
  font-family: var(--ct-font-family);
}

.ctPageHeaderBack {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ct-color-text-default);
  cursor: pointer;
  font-size: 1.1rem;
}
.ctPageHeaderBack:hover {
  background: var(--ct-color-surface-sunken);
}
.ctPageHeaderBack:focus-visible {
  outline: var(--ct-focus-width) solid var(--ct-focus-color);
  outline-offset: var(--ct-focus-offset);
}
.ctPageHeaderBack--visuallyHidden {
  display: none;
}
/* Nutzer-Auftrag 2026-09-09 (Mobile-Umbau, Runde 4): der Zurück-Pfeil ist jetzt ein
   sap.ui.core.Icon (sap-icon://arrow-left, PageHeader.ts) statt eines reinen Unicode-Zeichens —
   Größe/Farbe explizit an die bisherige Optik angleichen, da UI5s Icon-Theme-Default vom
   Elternelement (`.ctPageHeaderBack`, font-size:1.1rem) abweichen kann. */
.ctPageHeaderBack .sapUiIcon {
  font-size: 1.1rem;
  color: inherit;
}

.ctPageHeaderLogo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.ctPageHeaderLogo img {
  height: 1.75rem;
  width: auto;
}

.ctPageHeaderMain {
  flex: 1 1 auto;
  min-width: 0;
}

.ctPageHeaderTitle {
  margin: 0;
  font-size: var(--ct-font-size-xl);
  font-weight: var(--ct-font-weight-bold);
  color: var(--ct-color-text-default);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Nutzer-Feedback 2026-08-21 (Mobile-Befund, zurückgenommen 2026-09-09 Runde 4): auf schmalen
   Bildschirmen nahm die dreiteilige Action-Gruppe (Hilfe/Glocke/App-Raster) so viel Platz ein,
   dass selbst eine kurze Begrüßung ("Guten Tag, Nadine!") mitten im Wort abgeschnitten wurde —
   damals wurde Umbruch statt Kürzung gewählt. Live-Befund Runde 4 (Business-Flow-App): ein
   zweizeiliger Titel vergrößert den Header unnötig — App-Titel sollen jetzt IMMER einzeilig
   bleiben (Ellipsis, siehe Basisregel oben), der vollständige Titel bleibt über den nativen
   `title`-Tooltip (PageHeader.ts) weiterhin zugänglich. Gilt app-weit für ALLE ct:PageHeader-
   Titel (geteilte Komponente) — auf einer zweiten Seite stichprobenartig gegengeprüft. */

.ctPageHeaderSubtitle {
  margin: var(--ct-spacing-xxs) 0 0;
  font-size: var(--ct-font-size-m);
  color: var(--ct-color-text-muted);
}

/* Für Verwendung als erstes content-Element einer sap.m.Page statt in customHeader (siehe
   Launchpad.view.xml) — hält die Kopfzeile beim Scrollen oben fixiert, analog dem bisherigen
   customHeader-Verhalten. */
.ctPageHeader--sticky {
  position: sticky;
  top: 0;
  z-index: 10;
}

.ctPageHeaderActions {
  display: flex;
  align-items: center;
  gap: var(--ct-spacing-xs);
  flex-shrink: 0;
}

/* ── ct.StatusBadge ────────────────────────────────────────────────────── */

.ctStatusBadge {
  display: inline-flex;
  align-items: center;
  gap: var(--ct-spacing-xxs);
  padding: var(--ct-spacing-xxs) var(--ct-spacing-s);
  border-radius: var(--ct-radius-pill);
  font-family: var(--ct-font-family);
  font-size: var(--ct-font-size-s);
  font-weight: var(--ct-font-weight-bold);
  line-height: 1;
}

.ctStatusBadgeDot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.ctStatusBadge--success {
  background: var(--ct-color-status-success-background);
  /* AP5-Nachtrag 2026-08-20 (WCAG-AA-Kontrastbefund): dedizierter Textton statt der satten
     Statusfarbe direkt, analog dem bereits bestehenden Warnung-Muster unten. */
  color: var(--ct-color-status-success-text);
}
.ctStatusBadge--success .ctStatusBadgeDot { background: var(--ct-color-status-success); }
/* Nutzer-Auftrag 2026-09-08 (Mockup-Feinschliff, Runde 4, InboxApp.controller.js
   #_buildStatusBadgeForRun): "Erfolgreich" nutzte gleichzeitig einen (violett gerenderten) Haken,
   grünen Text UND hellgrünen Hintergrund — dreifache Farbcodierung. NUR in der Folgeaktions-
   Ergebnisliste auf dieselbe blaugraue Familie wie Typ-/Zähler-Pillen umgestellt (Klasse additiv,
   `ct.StatusBadge` bleibt für jeden anderen Verwender unverändert grün/rot). `!important` auf dem
   Icon nötig, da `sap.ui.core.Icon` seine Farbe nicht zuverlässig von `color` erbt. */
.ctResultListStatusBadge.ctStatusBadge--success {
  background: var(--ct-color-status-information-background);
  color: var(--ct-color-status-information-text);
}
.ctResultListStatusBadge.ctStatusBadge--success .ctStatusBadgeDot {
  background: var(--ct-color-status-information-text);
}
.ctResultListStatusBadge .sapUiIcon {
  color: var(--ct-color-status-information-text) !important;
}
/* Nutzer-Auftrag 2026-09-08 (Runde 8, "Fettschrift reduzieren"): NUR in dieser Ergebnisliste
   abgeschwächt (Medium statt Bold, "Status soll nicht stärker wirken als der eigentliche
   Tabelleninhalt") — `ct.StatusBadge` selbst bleibt für andere Verwender (z. B. Admin-Monitoring)
   unverändert, kein globaler Eingriff in die geteilte Komponente. */
.ctResultListStatusBadge {
  font-weight: var(--ct-font-weight-medium, 500);
}

.ctStatusBadge--warning {
  background: var(--ct-color-status-warning-background);
  color: var(--ct-color-status-warning-text);
}
.ctStatusBadge--warning .ctStatusBadgeDot { background: var(--ct-color-status-warning); }

.ctStatusBadge--error {
  background: var(--ct-color-status-error-background);
  color: var(--ct-color-status-error-text);
}
.ctStatusBadge--error .ctStatusBadgeDot { background: var(--ct-color-status-error); }

.ctStatusBadge--information {
  background: var(--ct-color-status-information-background);
  color: var(--ct-color-status-information-text);
}
.ctStatusBadge--information .ctStatusBadgeDot { background: var(--ct-color-status-information); }

.ctStatusBadge--neutral {
  background: var(--ct-color-status-neutral-background);
  color: var(--ct-color-text-muted);
}
.ctStatusBadge--neutral .ctStatusBadgeDot { background: var(--ct-color-status-neutral); }

/* ── ct.EmptyState ─────────────────────────────────────────────────────── */

.ctEmptyState {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--ct-spacing-xxl) var(--ct-spacing-l);
  font-family: var(--ct-font-family);
}

.ctEmptyStateIcon {
  color: var(--ct-color-text-muted);
  font-size: 2rem;
  margin-bottom: var(--ct-spacing-m);
}

.ctEmptyStateTitle {
  font-size: var(--ct-font-size-l);
  font-weight: var(--ct-font-weight-bold);
  color: var(--ct-color-text-default);
}

.ctEmptyStateDescription {
  margin: var(--ct-spacing-xs) 0 0;
  color: var(--ct-color-text-muted);
  font-size: var(--ct-font-size-m);
  max-width: 28rem;
}

.ctEmptyStateActions {
  display: flex;
  gap: var(--ct-spacing-xs);
  margin-top: var(--ct-spacing-m);
}

/* ── ct.Avatar / ct.AvatarGroup ────────────────────────────────────────── */

.ctAvatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: var(--ct-font-family);
  font-weight: var(--ct-font-weight-bold);
  color: var(--ct-color-text-inverse);
  flex-shrink: 0;
}

.ctAvatar--s { width: 1.5rem; height: 1.5rem; font-size: var(--ct-font-size-s); }
.ctAvatar--m { width: 2rem; height: 2rem; font-size: var(--ct-font-size-m); }
.ctAvatar--l { width: 2.75rem; height: 2.75rem; font-size: var(--ct-font-size-l); }

.ctAvatar--variant1 { background: var(--ct-color-category-1); }
.ctAvatar--variant2 { background: var(--ct-color-category-2); }
.ctAvatar--variant3 { background: var(--ct-color-category-3); }
.ctAvatar--variant4 { background: var(--ct-color-category-4); }
.ctAvatar--variant5 { background: var(--ct-color-category-5); }
.ctAvatar--variant6 { background: var(--ct-color-category-6); }

.ctAvatarGroup {
  display: flex;
}
.ctAvatarGroup .ctAvatar {
  border: 2px solid var(--ct-color-surface-card);
  margin-inline-start: -0.5rem;
}
.ctAvatarGroup .ctAvatar:first-child {
  margin-inline-start: 0;
}
.ctAvatarGroupOverflow {
  background: var(--ct-color-surface-sunken);
  color: var(--ct-color-text-muted);
}

/* ── ct.AppTile ────────────────────────────────────────────────────────── */

.ctAppTile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ct-spacing-xs);
  width: 100%;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  padding: var(--ct-spacing-m);
  background: var(--ct-color-surface-card);
  border: 1px solid var(--ct-color-border-default);
  border-radius: var(--ct-radius-card);
  box-shadow: var(--ct-shadow-card);
  font-family: var(--ct-font-family);
  text-align: start;
  cursor: pointer;
  overflow: hidden;
}

.ctAppTile:hover {
  border-color: var(--ct-color-border-strong);
}

.ctAppTile:focus-visible {
  outline: var(--ct-focus-width) solid var(--ct-focus-color);
  outline-offset: var(--ct-focus-offset);
}

/* Reine Bildkachel (kein "bei Klick vergrößern"): kein Klick-Cursor/Hover-Effekt gewünscht. */
.ctAppTile--image {
  cursor: default;
}
.ctAppTile--zoomable {
  cursor: zoom-in;
}
/* Play-Symbol auf Video-Kacheln (ADR-028 AP4, ersetzt .erp-ctile.erp-tile-video::before). */
.ctAppTile--video::before {
  content: '';
  position: absolute;
  z-index: 3;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 2.6rem; height: 2.6rem;
  pointer-events: none;
  background: center/contain no-repeat url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%2048'%3E%3Ccircle%20cx='24'%20cy='24'%20r='23'%20fill='rgba(0,0,0,0.55)'/%3E%3Cpath%20d='M19%2014%20L36%2024%20L19%2034%20Z'%20fill='%23ffffff'/%3E%3C/svg%3E");
}
.ctAppTile--hidden {
  opacity: 0.45;
}

/* Lesbarkeits-Overlay unten (Titel/Untertitel liegen dort) bei Bild-/Video-Kacheln. */
.ctAppTileScrim {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(0deg, rgba(2, 18, 38, 0.80) 0%, rgba(2, 18, 38, 0.45) 50%, rgba(2, 18, 38, 0.06) 82%, rgba(2, 18, 38, 0) 100%);
}
.ctAppTile--image .ctAppTileTitle, .ctAppTile--image .ctAppTileSubtitle,
.ctAppTile--video .ctAppTileTitle, .ctAppTile--video .ctAppTileSubtitle,
.ctAppTile--hasImage .ctAppTileTitle, .ctAppTile--hasImage .ctAppTileSubtitle {
  position: relative;
  z-index: 2;
  color: var(--ct-color-text-inverse);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
/* Nutzer-Auftrag 2026-08-28: Suchbegriff in Titel/Untertitel von Suchergebnis-Kacheln hervorheben
   (AppTile.ts#highlightQuery) — dieselbe CD-Manual-Gelb-Behandlung wie .ctSearchHighlight
   (erp-launchpad.css, Hilfe-Fundstellen), eigener dunkler Textton statt geerbtem Kachel-Textton. */
.ctAppTileHighlight {
  background-color: #F8B716;
  color: #1a1a1a;
  border-radius: 3px;
  padding: 0 2px;
  text-shadow: none;
}

.ctAppTileHead {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}

.ctAppTileIcon {
  color: var(--ct-color-brand-accent);
  font-size: 1.5rem;
}
.ctAppTileIconImg {
  height: 2.5rem;
  width: auto;
  max-width: 3rem;
  object-fit: contain;
}
.ctAppTile--image .ctAppTileIcon, .ctAppTile--video .ctAppTileIcon {
  color: var(--ct-color-text-inverse);
}

/* Farbige Badge-Fläche hinter dem Icon (Zielbild-Abgleich 2026-08-20) — Icon-Farbe = gesättigtes
   Kategorie-Token, Hintergrund = dasselbe Token stark aufgehellt (color-mix, kein eigenes
   Pastell-Token nötig). Nur gesetzt, wenn AppTile.ts/.js bShowBadge true berechnet hat. */
.ctAppTileIcon--badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--ct-radius-control);
  font-size: 1.125rem;
}
.ctAppTileIcon--cat-1 { color: var(--ct-color-category-1); background: color-mix(in srgb, var(--ct-color-category-1) 15%, white); }
.ctAppTileIcon--cat-2 { color: var(--ct-color-category-2); background: color-mix(in srgb, var(--ct-color-category-2) 15%, white); }
.ctAppTileIcon--cat-3 { color: var(--ct-color-category-3); background: color-mix(in srgb, var(--ct-color-category-3) 15%, white); }
.ctAppTileIcon--cat-4 { color: var(--ct-color-category-4); background: color-mix(in srgb, var(--ct-color-category-4) 15%, white); }
.ctAppTileIcon--cat-5 { color: var(--ct-color-category-5); background: color-mix(in srgb, var(--ct-color-category-5) 15%, white); }
.ctAppTileIcon--cat-6 { color: var(--ct-color-category-6); background: color-mix(in srgb, var(--ct-color-category-6) 15%, white); }

/* Nutzer-Auftrag 2026-09-08 ("ruhigeres, business-orientiertes Erscheinungsbild"): sollte NUR in
   der Sidebar-"Zuletzt verwendet"-Liste einen neutralen Icon-Stil statt der pro App
   deterministisch gehashten Kategoriefarbe erzwingen. Bugfix (Live-Test 2026-09-08, Folgeauftrag
   "Navigation/Icons"): diese Regel war WIRKUNGSLOS — weiter unten in dieser Datei (Zeile ~857,
   Stand 2026-08-21) überschreibt ein ÄLTERER Regelblock dieselben Klassen mit `!important`
   (pastellfarbene Kategorie-Hintergründe je App) und gewinnt IMMER gegen diese Regel hier,
   unabhängig von Spezifität oder Ladereihenfolge — die bunten Kacheln blieben dadurch die ganze
   Zeit sichtbar. Der eigentliche Fix (Kacheln komplett entfernt, freistehende Outline-Icons)
   sitzt jetzt direkt an der GEWINNENDEN Stelle, siehe `.ctAppSidebarRecentIcon.ctAppTileIcon--badge`
   weiter unten — dieser Block hier ist obsolet und entfernt (keine zwei konkurrierenden
   Fundstellen für dieselbe Regel mehr). */

.ctAppTileActions {
  display: flex;
  gap: var(--ct-spacing-xxs);
}

.ctAppTileAction {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ct-color-text-muted);
  cursor: pointer;
}
.ctAppTile--image .ctAppTileAction, .ctAppTile--video .ctAppTileAction {
  color: var(--ct-color-text-inverse);
}
/* Immer gerendert, nur per Klasse ausgeblendet (siehe AppTile.ts-Kommentar zum apiVersion-2-
   Renderer-Patching-Bug) — display:none statt Entfernen aus dem DOM. */
.ctAppTileAction--visuallyHidden {
  display: none;
}
.ctAppTileAction:hover {
  background: var(--ct-color-surface-sunken);
}
.ctAppTileAction--active {
  color: var(--ct-palette-yellow-500);
}
.ctAppTileActionIcon {
  font-size: 0.9rem;
  line-height: 1;
}

/* Nutzer-Feedback 2026-08-20: Titel/Untertitel liefen bei längeren Texten unbegrenzt weiter und
   ragten über den Kachelrand hinaus (das vormalige sap.m.Text hatte maxLines="2" — hier fehlte
   das Äquivalent, overflow:hidden auf .ctAppTile allein reichte nicht, siehe Flexbox-Falle
   "min-height:auto" bei verschachtelten Flex-/Grid-Höhen). Echtes 2-zeiliges Line-Clamping. */
.ctAppTileTitle {
  font-size: var(--ct-font-size-m);
  font-weight: var(--ct-font-weight-bold);
  color: var(--ct-color-text-default);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.ctAppTileSubtitle {
  font-size: var(--ct-font-size-s);
  color: var(--ct-color-text-muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* ── ct.AppLauncher ────────────────────────────────────────────────────── */

.ctAppLauncher {
  font-family: var(--ct-font-family);
}

.ctAppLauncherTitle {
  font-size: var(--ct-font-size-l);
  font-weight: var(--ct-font-weight-bold);
  color: var(--ct-color-text-default);
  margin: 0 0 var(--ct-spacing-m);
}

/* Layout kommt von sap.f.GridContainer selbst (JS-berechnetes, virtualisierungsfähiges Grid,
   siehe AppLauncher.ts) — diese Klasse ist nur noch ein Stylinghaken (Abstand), kein eigenes
   CSS-Grid mehr. */
.ctAppLauncherGrid {
  margin-top: var(--ct-spacing-xs);
}

/* ── ct.SideNavigation ─────────────────────────────────────────────────── */

/* Nutzer-Fund 2026-09-14 (Live-Screenshot, Sidebar-Redesign): DIESE Regel war die tatsächliche
   Ursache des verbliebenen dunkellila Blocks hinter "Start/Business Flows/..." — das
   .ctAppShellNav-Hintergrund-Token oben wirkt nur auf den ÄUSSEREN Wrapper, ct.SideNavigation
   (dieses `<nav>`/`<ul>`-Element selbst) bringt mit dieser Regel eine EIGENE, unabhängige
   Vollflächen-Hintergrundfarbe mit (--ct-color-surface-navigation, unverändert dunkelviolett) —
   beim ersten Anlauf übersehen, weil nur der äußere Wrapper geändert wurde. `orientation="vertical"`
   wird ausschließlich in der App-Sidebar verwendet (kein zweiter Verwendungsort im Projekt,
   verifiziert) — direkte Änderung hier ist daher sidebar-exklusiv, keine Nebenwirkung auf andere
   Verwender. Erbt jetzt dasselbe Token wie der äußere Wrapper (EIN Wert, nicht dupliziert). */
/* Nutzer-Fund 2026-09-14 (Nachschliff): die tatsächlichen Item-Werte (Padding/Gap) waren zwischen
   Hauptnavigation und App-Historie bereits identisch (siehe .ctSideNavigationItem/
   .ctAppSidebarRecentItem unten) — der verbliebene "lockerere" Eindruck kam von HIER: dieser
   Container hatte zusätzlich sein EIGENES vertikales Padding (vormals --ct-spacing-m, 1rem),
   das sich zum bereits eigenen Padding der neuen Kopfzeile (.ctAppSidebarHeader) addierte —
   macht knapp 2rem Abstand zwischen Kopfzeile und "Start", während vor der App-Historie kein
   vergleichbarer zusätzlicher Container-Abstand existiert (.ctAppSidebarRecentList hat keine
   eigene Padding-Regel). Auf einen kleinen, kompakteren Wert reduziert — die App-Historie bleibt
   damit wie gefordert der Maßstab. */
.ctSideNavigation--vertical {
  background: var(--ct-sidebar-bg);
  height: 100%;
  padding: var(--ct-spacing-xs) 0;
}

.ctSideNavigation--horizontal {
  background: var(--ct-color-surface-card);
  border-bottom: 1px solid var(--ct-color-border-divider);
}

.ctSideNavigation--vertical .ctSideNavigationList {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ctSideNavigation--horizontal .ctSideNavigationList {
  list-style: none;
  margin: 0;
  padding: 0 var(--ct-spacing-m);
  display: flex;
  flex-wrap: wrap;
  gap: var(--ct-spacing-xs);
}

.ctSideNavigationItem {
  display: block;
  text-align: start;
  background: transparent;
  border: none;
  font-family: var(--ct-font-family);
  font-size: var(--ct-font-size-m);
  cursor: pointer;
}

.ctSideNavigation--vertical .ctSideNavigationItem {
  width: 100%;
  /* Nutzer-Auftrag 2026-09-14 (Sidebar-Redesign): vertikales Padding auf denselben, kompakteren
     Wert wie die App-Historie darunter (.ctAppSidebarRecentItem, --ct-spacing-xxs) angeglichen —
     vorher --ct-spacing-xs, wirkte dadurch lockerer/höher als die App-Historie. Horizontales
     Padding/Gap waren bereits identisch. */
  padding: var(--ct-spacing-xxs) var(--ct-spacing-l);
  color: var(--ct-sidebar-text);
  opacity: 0.85;
  display: flex;
  align-items: center;
  gap: var(--ct-spacing-s);
}
/* Nutzer-Feedback 2026-08-21 (4): Text/Icons der Bereichs-Navigation standen sichtbar weiter
   links als bei "Zuletzt verwendet" — der Icon-Glyph hier hatte keine feste Breite (natürliche
   Glyphbreite < 1.5rem), während das Badge bei "Zuletzt verwendet" fest 1.5rem breit ist. Feste
   Breite + zentriert angeglichen, damit beide Icon-Spalten exakt gleich breit sind und der
   nachfolgende Text in derselben Spalte beginnt. */
.ctSideNavigationItemIcon {
  flex: none;
  font-size: 1.125rem;
  display: inline-flex;
  justify-content: center;
  width: 1.5rem;
}
.ctSideNavigation--vertical .ctSideNavigationItem:hover {
  opacity: 1;
  background: var(--ct-sidebar-hover-bg);
}
/* Nutzer-Auftrag 2026-09-14 (Sidebar-Redesign): der aktive Eintrag ist NICHT mehr fett (Auftrag:
   "auch der aktive Eintrag soll nicht allein durch Fettdruck gekennzeichnet werden") — dezenter
   Farbwasch + der bereits bestehende Akzentbalken (box-shadow) bleiben als eindeutiges,
   ausreichendes Kennzeichen. */
.ctSideNavigation--vertical .ctSideNavigationItem--selected {
  opacity: 1;
  background: var(--ct-sidebar-selected-bg);
  font-weight: var(--ct-font-weight-normal, 400);
  box-shadow: inset 3px 0 0 var(--ct-color-brand-accent);
}

.ctSideNavigation--horizontal .ctSideNavigationItem {
  padding: var(--ct-spacing-s) var(--ct-spacing-xs);
  color: var(--ct-color-text-muted);
  border-bottom: 2px solid transparent;
}
.ctSideNavigation--horizontal .ctSideNavigationItem:hover {
  color: var(--ct-color-text-default);
}
.ctSideNavigation--horizontal .ctSideNavigationItem--selected {
  color: var(--ct-color-text-default);
  font-weight: var(--ct-font-weight-bold);
  border-bottom-color: var(--ct-color-brand-accent);
}

.ctSideNavigationItem:focus-visible {
  outline: var(--ct-focus-width) solid var(--ct-color-brand-accent);
  outline-offset: -2px;
}

/* Nutzer-Auftrag 2026-08-22: Auf-/Zuklapp-Pfeil für Items mit Unterpunkten. Der Chevron-Text
   ("›") wird per rotate() gedreht statt ein zweites Icon-Glyph zu laden. */
.ctSideNavigationItemChevron {
  margin-inline-start: auto;
  transition: transform 0.15s ease;
  transform: rotate(90deg);
  flex-shrink: 0;
}
.ctSideNavigationItemChevron--expanded {
  transform: rotate(-90deg);
}

/* Unterpunkte (Sidebar-Feinschliff, Nutzer-Auftrag 2026-08-20: Projekte des angemeldeten Nutzers
   eingerückt unter "Projekte", siehe SideNavigationItem.ts/App.view.xml).
   Nutzer-Auftrag 2026-08-22: standardmäßig eingeklappt (siehe ct.SideNavigationItem#expanded) —
   die Liste bleibt immer im DOM (apiVersion-2-Patching-Stabilität, siehe AppTile.ts-Erfahrung),
   nur --collapsed blendet sie aus. */
.ctSideNavigationSubList {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--ct-spacing-xs);
}
.ctSideNavigationSubList--collapsed {
  display: none;
}
.ctSideNavigationSubItem {
  display: block;
  width: 100%;
  text-align: start;
  background: transparent;
  border: none;
  font-family: var(--ct-font-family);
  font-size: var(--ct-font-size-s);
  cursor: pointer;
  /* Bündig mit dem Parent-LABEL (nicht dessen Icon) ausgerichtet: Parent-Text beginnt bei
     spacing-l (Button-Padding) + 1.5rem (Icon-Breite, .ctSideNavigationItemIcon) + spacing-s
     (Flex-Gap zwischen Icon und Label) — vorher fest 1.75rem statt der tatsächlichen
     Icon+Gap-Breite, dadurch stand der Unterpunkt-Text 0.5rem zu weit links (Nutzer-Feedback
     2026-08-24, per Puppeteer nachgemessen: Parent-Label bei 3.75rem, Unterpunkt bei 3.25rem). */
  padding: var(--ct-spacing-xxs) var(--ct-spacing-l) var(--ct-spacing-xxs) calc(var(--ct-spacing-l) + 1.5rem + var(--ct-spacing-s));
  color: var(--ct-sidebar-text);
  opacity: 0.65;
}
.ctSideNavigationSubItem:hover {
  opacity: 0.9;
  background: var(--ct-sidebar-hover-bg);
}
.ctSideNavigationSubItem:focus-visible {
  outline: var(--ct-focus-width) solid var(--ct-color-brand-accent);
  outline-offset: -2px;
}

/* ── ct.AppShell ───────────────────────────────────────────────────────── */

.ctAppShell {
  display: flex;
  min-height: 100vh;
}

.ctAppShellNav {
  flex-shrink: 0;
  width: 16rem;
  /* Nutzer-Auftrag 2026-09-14 (Sidebar-Redesign, Nachschliff): Positionierungs-Kontext für den
     dekorativen vertikalen Trenner (::after unten). */
  position: relative;
  /* Notch-/Rundungs-Aussparung im Querformat (viewport-fit=cover, siehe index.html) — die
     Sidebar liegt am linken Rand, ohne dieses Polster säße ihr Inhalt teils unter der Notch. */
  padding-left: env(safe-area-inset-left, 0);
  /* Nutzer-Auftrag 2026-09-14 (Sidebar-Redesign): Hintergrundbild + violettes Verlaufs-Overlay
     (Nutzer-Auftrag 2026-09-08, siehe Git-Historie) vollständig entfernt — reine, einfarbige
     helle Fläche. Eigene Tokens NUR für diesen Bereich (nicht global, siehe CLAUDE.md-Vorgabe
     "über gemeinsame Sidebar-Komponenten/Design-Tokens, nicht einzelne Einträge") — bewusst
     NICHT `--ct-color-text-on-navigation` überschrieben, das teilt sich die (unveränderte)
     mobile Bottom-Navigation (ct.BottomNavigation, außerhalb dieses Auftrags) mit derselben
     dunklen Sidebar-Optik. */
  --ct-sidebar-bg: #EDEEF2;
  --ct-sidebar-text: var(--ct-color-text-default);
  --ct-sidebar-text-muted: var(--ct-color-text-muted);
  --ct-sidebar-hover-bg: rgba(0, 0, 0, 0.06);
  --ct-sidebar-selected-bg: rgba(0, 0, 0, 0.08);
  /* Nutzer-Fund 2026-09-14 (Live-Screenshot, Nachschliff): --ct-color-border-divider ist
     neutral-100 — praktisch identisch mit der neuen Sidebar-Grundfläche (#EDEEF2) und dadurch
     auf ihr faktisch unsichtbar ("Trennlinie fehlt"). --ct-color-border-default (neutral-300,
     ein Schritt dunkler) bleibt dezent, ist auf #EDEEF2 aber tatsächlich wahrnehmbar. */
  --ct-sidebar-divider: var(--ct-color-border-default);
  background: var(--ct-sidebar-bg);
  /* Nutzer-Feedback 2026-08-24: bei knapper Höhe (iPhone-Querformat) passten nicht mehr alle
     Menüpunkte hinein und die Leiste bot keine Möglichkeit, den Rest zu erreichen (kein
     Scrollen). Container darf jetzt intern scrollen, statt Inhalt stillschweigend abzuschneiden. */
  overflow-y: auto;
  /* Nutzer-Auftrag 2026-09-14 (Nachschliff): die eigentliche Ursache der gemeldeten horizontalen
     Scrollbar war eine echte Überbreite (überdimensioniertes Logo, siehe
     .ctAppSidebarLogoImg/.ctAppSidebarWordmarkImg-Kommentar) — jetzt behoben, nichts ragt mehr
     über die Sidebar-Breite hinaus. `overflow-x:hidden` hier zusätzlich als bewusste
     Absicherung GEGEN das erneute Auftreten (ohne diese Regel berechnet die CSS-Spezifikation
     overflow-x bei gesetztem overflow-y automatisch auf "auto", jeder künftige Millimeter
     Überbreite brächte die Scrollbar sonst sofort zurück) — verdeckt dabei keinen Inhalt, da
     nach der eigentlichen Ursachenbehebung nichts mehr überstehen sollte. */
  overflow-x: hidden;
}
/* Nutzer-Auftrag 2026-09-14 (Sidebar-Redesign, Nachschliff): rein dekorativer vertikaler
   "Splitter" zwischen Sidebar und Content-Bereich — ein `::after` statt einem echten
   `border-right`, damit sich Deckkraft/Farbe über die Höhe per Verlauf ändern lassen (in der
   Mitte deutlicher, oben/unten sanft auslaufend), was ein einfacher Rahmen nicht kann. `right:0`
   liegt exakt auf der bestehenden Bereichsgrenze (Sidebar endet dort, kein zusätzlicher
   Platzbedarf/keine neue Layoutspalte — `width:1px` verändert weder die Sidebar- noch die
   Content-Breite). `pointer-events:none` + kein `tabindex`/keine `role`: rein visuell, kein
   Drag-Handle, kein zusätzlicher Tastaturfokus. Folgt automatisch der schmaleren Breite im
   eingeklappten Zustand (`right:0` relativ zu `.ctAppShellNav`, dessen Breite dort per
   `.ctAppShellNav--collapsed` bereits auf 4.5rem sinkt — kein eigener Zustand hier nötig). */
.ctAppShellNav::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--ct-color-border-default) 20%,
    var(--ct-color-border-default) 80%,
    transparent 100%
  );
  pointer-events: none;
}

.ctAppShellBody {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--ct-color-surface-page);
}

.ctAppShellContent {
  flex: 1;
  /* Notch-/Rundungs-Aussparung im Querformat (viewport-fit=cover, siehe index.html) — betrifft
     hier den rechten Rand, links übernimmt bereits die Sidebar ihr eigenes Polster. */
  padding-right: env(safe-area-inset-right, 0);
  /* Nutzer-Feedback 2026-08-21: das Polster hier ließ die Grundfarbe von .ctAppShellBody
     (--ct-color-surface-page, helles Blau) als störender "Rahmen" um Bereiche/Abschnitte
     durchscheinen, die selbst KEINEN eigenen Canvas gesetzt haben. Auf Nutzerwunsch entfernt —
     Inhalt reicht jetzt bis an den Rand, kein Polster mehr auf dieser Ebene. Einzelne Views
     regeln ihren eigenen Innenabstand bereits selbst (sapUiSmallMargin*-Klassen, siehe
     Launchpad.view.xml/AdminSpaces.view.xml u. a.). */
  padding: 0;
}

/* ── App-Sidebar (App.view.xml, ADR-028 Navigations-Kurskorrektur) ───────── */
/* Zusammengesetzter Sidebar-Inhalt (Logo/Bereiche/Nutzer-Fußbereich) im ct:AppShell
   navigation-Slot — eigene Klassen statt ct.*-Control, da rein kompositorisch (keine
   Wiederverwendung außerhalb der App-Shell absehbar). */

.ctAppSidebar {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Login-Seite: body-Klasse (App.controller.js#_onRouteMatched) statt Databinding — siehe
   AppShell.ts/.js-Kommentar zum Grund. Blendet den gesamten Wrapper (inkl. 16rem-Breite) aus,
   nicht nur den Inhalt. */
.erpNoShell .ctAppShellNav {
  display: none;
}
.erpNoShell .ctAppShellMobileNav {
  display: none !important;
}

/* Nutzer-Auftrag 2026-09-14 (Sidebar-Redesign, Nachschliff — Langdock-Referenz): Logo UND
   Ein-/Ausklapp-Toggle bilden jetzt EINE gemeinsame Kopfzeile (App.view.xml) statt zweier
   versetzter Zeilen (vormals .ctAppSidebarLogoBlock + separates .ctAppSidebarToggleRow, beide
   entfallen) — das gesamte Zeilen-Padding sitzt jetzt hier statt verteilt auf Logo und Toggle
   einzeln, "kein unnötig hoher Leerraum unter dem Logo" (Nutzer-Auftrag). */
/* Nutzer-Auftrag 2026-09-14 (Nachschliff 2): rechtes Innenpolster gezielt kleiner als das linke
   (0.5rem statt 1.5rem) — rückt den Toggle-Button "dichter an den rechten Rand" (Nutzer-Auftrag),
   während links weiterhin dieselbe Flucht wie die Bereichs-Navigation darunter gilt
   (.ctSideNavigationItem, padding-inline var(--ct-spacing-l)). Macht zugleich Platz für die
   größere Wortmarke (s. .ctAppSidebarWordmarkImg), ohne die 16rem-Sidebarbreite zu sprengen. */
.ctAppSidebarHeader {
  padding: var(--ct-spacing-m) var(--ct-spacing-xs) var(--ct-spacing-m) var(--ct-spacing-l);
  gap: var(--ct-spacing-s);
}
.ctAppSidebarLogo {
  gap: var(--ct-spacing-xs);
  /* Icon+Wortmarke dürfen in der schmalen Kopfzeile nicht schrumpfen (sonst quetscht sie der
     Toggle-Button rechts zusammen, bevor der Text selbst per max-width begrenzt). */
  flex-shrink: 0;
}

/* Nutzer-Auftrag 2026-09-14 (Logo-Nachschliff): frühere Zwischenlösung (Icon standardmäßig
   verborgen, siehe Git-Historie) wieder zurückgenommen — die NEUEN Markendateien
   (nendaro-signet-violet.png + nendaro-wortmarke-violet.png) sind bewusst ZWEI eigenständige,
   sich ergänzende Bilder (die neue Wortmarke enthält anders als die alte "Lockup"-Datei KEIN
   Icon mehr), sollen also im ausgeklappten Zustand gemeinsam als eine Markeneinheit erscheinen.
   Sowohl echtes Tenant-Logo als auch das Signet nutzen dieselbe Größe/Passung. */
/* Nutzer-Fund 2026-09-14 (Live-Screenshot, Nachschliff): DIES war die eigentliche Ursache der
   gemeldeten horizontalen Sidebar-Scrollbar — Icon (bis 2.5rem) + Wortmarke (bis ~10.6rem bei
   ihrer alten max-height 3.02rem, Seitenverhältnis ~3.53:1) + Toggle-Button + Kopfzeilen-Padding
   ergaben in Summe ~19.6rem, deutlich mehr als die 16rem Sidebar-Breite — `.ctAppShellNav` mit
   `overflow-y:auto` berechnet `overflow-x` dadurch implizit ebenfalls auf `auto` (CSS-Spezifikation:
   ein einzelnes Overflow-Achsen-"visible" wird bei gesetzter anderer Achse zu "auto"), die
   Scrollbar war also eine direkte Folge dieser echten Überbreite, keine separate Ursache. Kleiner
   (zusätzlich Nutzer-Auftrag "Logo etwas kleiner") behebt beides zugleich. */
.ctAppSidebarLogoImg {
  max-height: 1.75rem;
  max-width: 6rem;
  object-fit: contain;
}

/* Schriftzug (in .ctAppSidebarLogo, vertikal zentriert neben dem Logo durch dessen
   alignItems="Center") + Untertitel darunter über die volle Breite (Nutzer-Auftrag 2026-08-21,
   Nachschliff: erst als schmale Spalte NEBEN dem Logo gestapelt, jetzt wie hier). NUR im
   ausgeklappten Zustand sichtbar (Collapsed-Regeln weiter unten). Deutlich größer/fetter als
   der Fließtext, um als Wortmarke erkennbar zu sein (eigene Schriftart wäre ein zusätzliches
   Webfont-Ladeziel — hier bewusst bei der bestehenden Systemschrift belassen).
   !important auf der Farbe nötig: sap.m.Text bringt eine eigene Textfarbe mit, die eine
   einzelne Zusatzklasse nicht schlägt (derselbe, bereits mehrfach dokumentierte Befund wie bei
   .ctAppSidebarFooterName/.ctAppSidebarRecentItem .ctSideNavigationItemLabel) — ohne
   !important blieb der Schriftzug schwarz auf dunklem Grund und war praktisch unlesbar. */
.ctAppSidebarProductName {
  /* Nutzer-Feedback 2026-08-21 (Nachschliff): --ct-font-size-xl (1.25rem, gleich groß wie ein
     normaler Seitentitel) wirkte als Wortmarke noch nicht prominent genug — es gibt keinen
     noch größeren Token, hier bewusst ein Rohwert (1.5rem) statt eines nicht vorhandenen Tokens.
     Nachschliff (2): font-size/font-weight zusätzlich mit !important — sap.m.Text bringt vom
     UI5-Theme (lädt NACH controls.css) eine eigene Schriftgröße mit, die bei gleicher
     Spezifität sonst gewinnt (derselbe Befund wie bei der Farbe, s.u.) — ohne !important blieb
     die Schrift bei --ct-font-size-m (14px) hängen, die Größenänderung wirkte dadurch nicht.
     margin-top schiebt den Schriftzug etwas nach unten (Nutzer-Feedback: zu weit oben relativ
     zum Logo). */
  font-size: 1.5rem !important;
  font-weight: var(--ct-font-weight-bold) !important;
  color: var(--ct-color-text-on-navigation) !important;
  line-height: 1.2;
  margin-top: 0.35rem;
}
/* Nutzer-Auftrag 2026-08-26: Schriftzug-Bild bringt jetzt den Claim direkt mit
   (nendaro-lockup-tuerkis.png), der bisherige separate Untertitel-Text
   (.ctAppSidebarProductSubtitle) entfällt dadurch. Der Namensteil "nendaro" ist bei gleicher
   Pixelgröße wie im alten reinen Namens-Schriftzug gezeichnet — max-height hier so gewählt,
   dass der Name optisch genauso groß bleibt wie zuvor (bei 1.75rem auf das alte, enger
   zugeschnittene Bild); da der Claim jetzt mit im Bild steckt, ist die Gesamthöhe
   entsprechend größer als die alten 1.75rem.
   Nutzer-Feedback 2026-08-26: mit alignItems="Center" auf der HBox zentrierte sich zunächst
   die GESAMTE (jetzt höhere) Bild-Box gegen das Icon — der Name selbst sitzt darin aber im
   oberen Bereich (Claim hängt darunter), wirkte dadurch zu hoch/das Icon zu groß Richtung
   Claim. Statt fragiler Flex-Korrektur (Center/End + Margin ändern sich gegenseitig) wurde
   die PNG-Datei stattdessen oben zusätzlich transparent aufgefüllt, bis die Namensmitte
   exakt der Bild-Mitte entspricht — die bestehende Center-Ausrichtung zum Icon funktioniert
   dadurch wieder unverändert wie beim alten, reinen Namens-Schriftzug. */
/* Nutzer-Fund 2026-09-14 (Nachschliff 2, Live-Vermessung per sharp/Alphakanal-Bounding-Box):
   die servierte Wortmarken-Datei (src/public/nendaro-wortmarke-violet.png) hatte innerhalb ihrer
   Bild-Leinwand einen riesigen transparenten Randbereich — das eigentliche Schriftzug-Glyph füllte
   nur ~37,6% der Bildhöhe (895 von 2383px), gegenüber ~92% beim quadratischen Signet. Bei
   gleicher max-height (1.75rem) wirkte der SICHTBARE Schriftzug dadurch optisch deutlich kleiner
   als das Signet, obwohl beide Bild-Boxen gleich hoch skaliert wurden — kein CSS-Fehler, sondern
   eine Eigenschaft der Bilddatei selbst. Fix: nicht-destruktiver Zuschnitt AUS DEM ORIGINAL
   (assets/Logo/Wortmarke/nendaro_wortmarke_violet.png bleibt unverändert) exakt auf die Glyph-Bounding-Box + ca.
   6%/12% Luft (Achtung: Original-Designdatei nicht verändert, nur die servierte Ableitung neu
   erzeugt) — neues Seitenverhältnis ca. 4,82:1 (vorher 3,53:1 der unbeschnittenen Datei) macht bei
   gleicher max-height jetzt fast das gesamte Wortmarke-Bild aus, optisch vergleichbar hoch wie das
   Signet. max-width entsprechend von 7rem auf 8.25rem angehoben, damit weiterhin max-height (nicht
   max-width) die bindende Schranke ist (sonst würde die Wortmarke durch die Breiten-Deckelung doch
   wieder kleiner skaliert als das Signet). */
.ctAppSidebarWordmarkImg {
  max-height: 1.75rem;
  max-width: 8.25rem;
  width: auto;
  object-fit: contain;
}
/* Nutzer-Feedback 2026-08-25 (Regression): diese Regel zielte noch auf die alte Text-Klasse
   "ctAppSidebarProductName", die dem Wortmarken-BILD am 2026-08-25 entzogen wurde (siehe
   App.view.xml-Kommentar dort) — dadurch blieb der Schriftzug im eingeklappten Zustand
   sichtbar/abgeschnitten UND sprengte durch seine tatsächliche Breite die 4.5rem schmale Rail
   (Folge: horizontaler Scrollbalken, Logo-Icon wirkte "verschwunden", weil aus dem sichtbaren
   Ausschnitt gedrängt). Klasse hier ergänzt statt der alten. */
.ctAppShellNav--collapsed .ctAppSidebarWordmarkImg {
  display: none !important;
}
/* Nutzer-Feedback 2026-08-25 (Regression): der Auf-/Zuklapp-Pfeil eines Menüpunkts mit
   Unterpunkten (hier: "Projekte") blieb im eingeklappten Rail-Zustand bislang unsichtbar
   gerendert (sein Unterpunkte-Container ist bereits per .ctSideNavigationSubList{display:none}
   entfernt), behielt aber sein "margin-inline-start: auto" — dieser Auto-Margin drängt das
   verbleibende sichtbare Icon aus der Mitte an den Anfang der Zeile (exakt dasselbe Muster wie
   der bereits dokumentierte, analog behobene "gap bleibt trotz ausgeblendetem Label"-Fall bei
   .ctAppSidebarRecentItem weiter unten). */
.ctAppShellNav--collapsed .ctSideNavigationItemChevron {
  display: none;
}

/* Ein-/Ausklapp-Toggle (Sidebar-Feinschliff, Nutzer-Auftrag 2026-08-20, Nachschliff
   2026-08-21/2026-09-14): nur der Pfeil/das Icon selbst, KEIN Button-Hintergrund (auch nicht im
   Hover) — Nutzer-Feedback: die vorherige helle Kreisfläche wirkte wie ein eigenständiges
   Button-Element statt eines reinen Navigations-Symbols. Rechtsbündig über die gemeinsame
   Kopfzeile (.ctAppSidebarHeader, justifyContent="SpaceBetween" in App.view.xml) statt einer
   eigenen Zeile (vormals .ctAppSidebarToggleRow, entfällt). */
.ctAppSidebarToggle {
  flex-shrink: 0;
  outline: none;
}
/* Nutzer-Fund 2026-09-15 (Root Cause, ersetzt die Analyse vom 2026-09-14): der "doppelte SAP-
   Rahmen" kommt NICHT von einer Outline auf .sapMBtnInner, sondern aus ZWEI Pseudo-Elementen des
   sap_horizon-Themes, die beide bei JEDEM `:focus` (auch nach Mausklick) gezeichnet werden:
   `.sapMBtn:focus::after` (1px gepunktet, blau) UND `.sapMBtn:focus > .sapMFocusable::before`
   (2px solide, blau). Die generische Entschärfung (Maus: kein Ring, Tastatur: genau ein Ring) lebt
   im Abschnitt "Button-Fokus" weiter unten. Der Sidebar-Toggle ist ein rahmenloser Icon-Button:
   auch bei TASTATURfokus kein umlaufender Ring, sondern nur eine dezente Hintergrund-/Iconfarb-
   Änderung — Abmessungen bleiben in jedem Zustand identisch (kein outline/box-shadow/border). */
.ctAppSidebarToggle .sapMBtnInner {
  background: transparent !important;
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}
.ctAppShellNav .ctAppSidebarToggle:focus > .sapMFocusable::before {
  display: none;
}
/* Testlauf 2026-09-22: Spezifität über der generischen Regel „.sapMBtn:focus-visible > .sapMBtnInner.sapMBtnInner.sapMBtnTransparent" (2026-09-16), die den Toggle-Fokus-Hintergrund überschrieb. */
.ctAppShellNav .ctAppSidebarToggle:focus-visible > .sapMBtnInner.sapMBtnInner.sapMBtnInner {
  background: var(--ct-palette-neutral-300) !important;
}
.ctAppShellNav .ctAppSidebarToggle:focus-visible .sapMBtnIcon.sapMBtnIcon {
  color: var(--ct-palette-violet-700) !important;
  opacity: 1;
}
/* Spezifität bewusst auf 4 Klassen angehoben (Klassen-Verdopplung ".sapMBtnIcon.sapMBtnIcon",
   dieselbe bereits etablierte Technik wie in der Tenant-Kopfleisten-Regel, siehe deren
   Kommentar): Tenant-Branding-CSS (BrandingLoader.js, lädt NACH controls.css) bringt im
   cohrteam-Testtenant eine generische ".sapMBtnTransparent:not(.erp-fav-btn) .sapMBtnIcon"-Regel
   mit (Spezifität 3 Klassen, ebenfalls !important) — bei einer bloß gleich hohen Spezifität (3
   Klassen) gewinnt bei !important-Gleichstand die SPÄTER geladene Tenant-Regel unabhängig vom
   Farbwert. Verifiziert 2026-08-21: der Pfeil war dadurch dunkel auf dem dunklen Sidebar-Grund
   praktisch unsichtbar. */
.ctAppShellNav .ctAppSidebarToggle .sapMBtnIcon.sapMBtnIcon {
  color: var(--ct-sidebar-text) !important;
  opacity: 0.75;
}
.ctAppShellNav .ctAppSidebarToggle .sapMBtnInner:hover .sapMBtnIcon.sapMBtnIcon {
  opacity: 1;
}

/* ── Button-Fokus (Nutzer-Fund 2026-09-15, "störende SAP-Fokusrahmen") ───────────────────────
   sap_horizon (UI5 1.120.23, sap/m/themes/sap_horizon/library.css) zeichnet auf sap.m.Button bei
   JEDEM `:focus` ZWEI Ringe übereinander: `.sapMBtn:focus::after` (1px gepunktet) und
   `.sapMBtn:focus > .sapMFocusable::before` (2px solide, beide #0032a5). Da UI5 den Button nach
   einem Mausklick programmatisch fokussiert, blieben beide Ringe nach jedem Klick stehen (z. B.
   "Schließen" in Meldungsdialogen, Pin-Pille im Ergebnisdialog). Gezielt auf sap.m.Button-
   Pseudo-Elemente beschränkt (KEIN globales `*:focus { outline:none }`). Eingabefelder und alle
   Nicht-Button-Controls bleiben unberührt.

   Nutzer-Fund 2026-09-16 (Screenshot Kopfleiste, Hilfe-Button): der Ring stand auch OHNE jede
   Nutzeraktion — UI5 setzt beim Seitenaufbau den Fokus programmatisch auf den ersten Button der
   Kopfleiste, der Browser wertet das als `:focus-visible` (kein vorheriger Mausklick), und die
   bisherige Regel ließ für Tastaturfokus den soliden Theme-Ring bewusst stehen. Live gemessen:
   `.sapMBtnInner::before` = 2px solid rgb(0,50,165). Entscheidung: ALLE sap.m.Button verhalten
   sich wie der Sidebar-Toggle (siehe .ctAppSidebarToggle oben) — kein umlaufender Ring in
   keinem Zustand, Tastaturfokus als dezente Flächenänderung: Transparent-Buttons bekommen den
   abgesenkten Hintergrund (dasselbe Muster wie .ctListCardToolbar/.ctDataTable), gefüllte Buttons
   (Default/Emphasized) eine leichte Abdunklung — der Fokus bleibt so für Tastaturnutzer sichtbar,
   ohne Blau und ohne Maßänderung.
   Spezifität bewusst auf 4 Klassen (".sapMBtnInner.sapMBtnInner"): das Tenant-Branding-CSS
   (Upload, lädt NACH controls.css) bringt im Test-Tenant eine eigene
   ".sapMBtn:focus-visible .sapMBtnInner { outline: 2px solid … !important }"-Regel mit (3 Klassen,
   der zweite, violette Ring im Screenshot) — bei Gleichstand gewinnt sonst die später geladene
   Tenant-Regel, exakt der bereits beim Toggle-Pfeil dokumentierte Befund. */
.sapMBtn:focus::after {
  display: none;
}
.sapMBtn:focus > .sapMFocusable::before {
  display: none;
}
.sapMBtn:focus-visible > .sapMBtnInner.sapMBtnInner {
  outline: none !important;
  box-shadow: none !important;
}
.sapMBtn:focus-visible > .sapMBtnInner.sapMBtnInner.sapMBtnTransparent {
  background: var(--ct-color-surface-sunken) !important;
  border-radius: var(--ct-radius-pill) !important;
}
.sapMBtn:focus-visible > .sapMBtnInner.sapMBtnInner:not(.sapMBtnTransparent) {
  filter: brightness(0.92);
}

/* ── Kippschalter (sap.m.Switch) — Smoke-Fund 2026-09-16 ──────────────────────────────────
   Das Control war app-weit ungestylt (Kostenauswertung, Job-Steuerung, alle weiteren
   Kippschalter). Live gemessen (sap_horizon, Typ Default): Bahn AUS rgb(120,143,166), Bahn AN
   rgb(82,96,109) — beides neutral, aber die AN-Beschriftung ("Ja") stand in UI5-Blau
   rgb(0,100,217) auf der grauen Bahn. Branding wie bei den übrigen Aktions-Controls: Bahn AN in
   der Markenfarbe, Beschriftung darauf weiß; AUS bleibt neutral (etwas heller als das Theme, wie
   die Rahmenfarbe der Eingabefelder). Der Theme-Fokusring (blauer .sapMSwtFocEl-Rahmen) fällt
   weg wie bei den Buttons — Tastaturfokus als leichte Abdunklung der Bahn. Die Bahn trägt ihre
   Farbe als background UND border (gemessen: 1px in derselben Farbe), daher beide setzen. */
.sapMSwt.sapMSwtOn,
.sapMSwt.sapMSwtOn.sapMSwtHoverable:hover {
  background: var(--ct-palette-violet-700) !important;
  border-color: var(--ct-palette-violet-700) !important;
}
.sapMSwt.sapMSwtOn .sapMSwtText,
.sapMSwt.sapMSwtOn .sapMSwtLabel {
  color: var(--ct-color-text-inverse) !important;
}
.sapMSwt.sapMSwtOff,
.sapMSwt.sapMSwtOff.sapMSwtHoverable:hover {
  background: var(--ct-palette-neutral-300) !important;
  border-color: var(--ct-palette-neutral-300) !important;
}
.sapMSwt.sapMSwtOff .sapMSwtText,
.sapMSwt.sapMSwtOff .sapMSwtLabel {
  color: var(--ct-color-text-default) !important;
}
.sapMSwtCont:focus .sapMSwtFocEl,
.sapMSwtCont:focus-visible .sapMSwtFocEl {
  display: none !important;
}
.sapMSwtCont:focus-visible .sapMSwt {
  filter: brightness(0.9);
}

.ctAppSidebarNavList {
  flex: 0 0 auto;
}

/* Zuletzt verwendete Apps (Sidebar-Feinschliff, Nutzer-Auftrag 2026-08-20) — Trennlinie +
   kompakte Liste unterhalb der Bereichsnavigation, oberhalb des Spacers. */
.ctAppSidebarDivider {
  border-top: 1px solid var(--ct-sidebar-divider);
  margin: var(--ct-spacing-s) var(--ct-spacing-l);
}
.ctAppSidebarRecentList {
  background: transparent !important;
  flex: 0 0 auto;
}
/* sap.m.List/CustomListItem bringen ihre eigene (helle) Listenzeilen-Optik UND eigene
   Zeilen-Innenabstände/Mindesthöhe mit (Nutzer-Feedback 2026-08-21: Zeilen wirkten breiter/mit
   größerem Abstand als die Bereichs-Navigation oben — Ursache war genau dieses zusätzliche,
   von sap.m.List selbst mitgebrachte Padding OBENDRAUF auf .ctAppSidebarRecentItem, siehe unten)
   — hier komplett auf 0 gesetzt, das eigentliche Padding kommt ausschließlich aus
   .ctAppSidebarRecentItem, exakt wie bei .ctSideNavigationItem oben. !important aus demselben,
   bereits etablierten Grund wie .ctAppSidebarFooterText (UI5-Theme-CSS lädt nach controls.css
   und gewinnt sonst bei gleicher Spezifität). */
.ctAppSidebarRecentList.sapMList,
.ctAppSidebarRecentList .sapMLIB {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  min-height: 0 !important;
}
/* Spezifität auf 4 Klassen angehoben (.sapMLIB verdoppelt): Tenant-Branding-CSS bringt
   ".sapMLIB.sapMLIBHoverable:hover" (3 Klassen, !important) mit — bei gleicher Spezifität
   gewinnt sonst wieder die später geladene Tenant-Regel, exakt derselbe bereits dokumentierte
   Befund wie beim Toggle-Pfeil-Icon. Farbwert jetzt identisch zu .ctSideNavigationItem:hover
   oben (rgba(255,255,255,0.08)) statt eines eigenen Werts. */
.ctAppSidebarRecentList .sapMLIB.sapMLIB:hover {
  background: var(--ct-sidebar-hover-bg) !important;
}
.ctAppSidebarRecentItem {
  /* Identische Werte wie .ctSideNavigationItem oben (Nutzer-Feedback 2026-08-21: Abstand
     zwischen den Einträgen war größer als in der Bereichs-Navigation; Nachschliff (3): Abstand
     wird von der Icon-Größe vorgegeben — Badge unten zusätzlich verkleinert, hier zusätzlich
     das vertikale Padding auf xxs reduziert, damit die Zeilenhöhe näher an die Navigation oben
     heranrückt, ohne dass die Icons aneinanderkleben). */
  padding: var(--ct-spacing-xxs) var(--ct-spacing-l);
  gap: var(--ct-spacing-s);
  color: var(--ct-sidebar-text);
}
/* Nutzer-Auftrag 2026-09-08 (Navigation/Icons-Korrektur): freistehende Outline-Icons DIREKT auf
   dem dunkelvioletten Navigationshintergrund statt einer Icon-Kachel — Bugfix-Historie: die
   ursprüngliche 2026-08-21-Fassung dieses Blocks erzwang hier PER APP eine pastellfarbene
   Kategorie-Hintergrundfläche (`!important`, siehe Git-Historie) — das war laut Mockup-Abgleich
   2026-09-08 nicht mehr gewollt (Ist: "weiße Symbole auf sehr hellen, pastellfarbenen Kacheln",
   Soll: "skizzierte Outline-Icons direkt auf dem dunkelvioletten Navigationshintergrund"). Keine
   Box/kein Hintergrund/kein Radius mehr, nur noch Icon-Größe (an die Bereichs-Navigation oben
   angeglichen) + Farbe über `currentColor` (vom Listenzeilen-Text geerbt, siehe
   .ctAppSidebarRecentItem `color: var(--ct-color-text-on-navigation)` oben — automatisch auch für
   Hover/Aktiv-Zustände korrekt, keine zusätzliche Farbregel pro Zustand nötig). */
/* Nutzer-Auftrag 2026-09-14 (Sidebar-Redesign): feste Icon-Spaltenbreite wie
   .ctSideNavigationItemIcon oben (1.5rem, zentriert) — vorher `width:auto`, wodurch
   unterschiedlich breite Icon-Glyphen den Textbeginn dieser Zeilen gegenüber der Bereichs-
   Navigation verschoben ("Icons und Text müssen sauber vertikal zentriert sein, unterschiedliche
   Iconformen dürfen den Textbeginn nicht verschieben"). */
.ctAppSidebarRecentIcon.ctAppTileIcon--badge {
  flex: none;
  width: 1.5rem;
  height: auto;
  font-size: 1.125rem;
  display: inline-flex;
  justify-content: center;
  background: none;
  border-radius: 0;
  color: currentColor;
}
.ctAppSidebarRecentIconImg {
  max-width: 1.125rem;
  max-height: 1.125rem;
  object-fit: contain;
}
/* sap.m.Text bringt eine eigene Textfarbe mit, die eine einzelne Zusatzklasse nicht schlägt
   (Nutzer-Feedback 2026-08-21: Name schwarz statt hell auf dem aubergine Grund — derselbe Befund
   wie bei .ctAppSidebarFooterName/-Email). */
.ctAppSidebarRecentItem .ctSideNavigationItemLabel {
  color: var(--ct-sidebar-text) !important;
}

.ctAppSidebarSpacer {
  flex: 1 1 auto;
}

.ctAppSidebarFooter {
  padding: var(--ct-spacing-m) var(--ct-spacing-l);
  border-top: 1px solid var(--ct-sidebar-divider);
}

/* Nutzer-Auftrag 2026-09-08 ("ruhigeres, business-orientiertes Erscheinungsbild"): sap.m.Avatar
   vergibt ohne echtes Foto (kein `src`, nur `initials`) automatisch eine von mehreren knalligen
   Akzentfarben aus dem UI5-Theme — konkurriert mit dem Kartenband-Inhalt. Neutraler, gedämpfter
   Grund erzwungen. Bugfix (Live-Test 2026-09-08): der ursprüngliche Selektor
   `.ctAppSidebarFooter .sapMAvatar` griff NICHT — sap.m.Avatar rendert seinen Root-DOM-Knoten
   inzwischen mit der Klasse `sapFAvatar` (intern auf sap.f.Avatar umgestellt), nicht mehr
   `sapMAvatar`. Über die ohnehin vorhandene, stabile `id="sidebarUserAvatar"` (App.view.xml)
   angesprochen statt einer internen, versionsabhängigen UI5-Klasse hinterherzuraten — das bleibt
   auch bei einer künftigen UI5-Aktualisierung korrekt. Ein echtes Profilfoto (`src` gebunden an
   launchpad>/user/avatarUrl) zeigt weiterhin unverändert das Foto selbst, diese Regel wirkt nur
   auf den initialenbasierten Fallback. Bugfix (Live-Test 2026-09-08, Nachtrag): eine EXAKTE
   ID-Regel (`#sidebarUserAvatar`) griff ebenfalls nicht — UI5 präfixt Control-IDs zur Laufzeit mit
   Komponenten-/View-ID (z. B. "container-erp.launchpad---app--sidebarUserAvatar"), das literale
   `id`-Attribut im DOM ist NIE nur "sidebarUserAvatar". Attribut-Endet-mit-Selektor statt exaktem
   ID-Selektor, damit es unabhängig vom tatsächlichen Präfix trifft. */
/* Nutzer-Auftrag 2026-09-15 ("viele Farben reduzieren"): vormals grauer, neutraler Platzhalter
   (2026-09-08) auf die Firmenfarbe Lila (--ct-palette-violet-700, dasselbe Token wie Sidebar-
   Fokusring/Primäraktionen/Textlinks) umgestellt — der zugehörige Illustrations-Avatar-Fallback
   (buntes, rollenabhängig eingefärbtes Icon aus dem Org-Chart-Bildersatz) wurde dafür in
   App.controller.js entfernt, sonst hätte diese Regel weiterhin nicht gegriffen (`src` zeigt bei
   gesetzter URL immer das Bild, unabhängig vom Hintergrund-CSS). */
/* Nutzer-Fund 2026-09-15 (Avatar-Farbwechsel nach Profil-Navigation): EINE gemeinsame Klasse
   für den generischen Nutzer-Avatar (Sidebar-Fuß UND Profilseite, App.view.xml/Profile.view.xml)
   statt eines ID-Selektors nur für die Sidebar — beide Stellen zeigen ohne Profilfoto exakt
   dasselbe Icon in derselben Firmenfarbe. Ein echtes Foto (`src` gesetzt) bleibt unberührt. */
.ctUserAvatar {
  background-color: var(--ct-palette-violet-700) !important;
  color: #fff !important;
}

.ctAppSidebarFooterText {
  min-width: 0;
}

/* !important nötig: sap.m.Text bringt eine eigene Textfarbe mit, die eine einzelne Zusatzklasse
   nicht schlägt (Nutzer-Feedback 2026-08-20, gleicher Befund wie .ctAppSidebarProductName). */
.ctAppSidebarFooterName {
  color: var(--ct-sidebar-text) !important;
  font-size: var(--ct-font-size-s);
  font-weight: var(--ct-font-weight-bold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ctAppSidebarFooterEmail {
  color: var(--ct-sidebar-text-muted) !important;
  opacity: 1;
  font-size: var(--ct-font-size-s);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Initialen-Kürzel-Span (siehe SideNavigation.js) standardmäßig ausgeblendet — kommt erst im
   schmalen Rail-Zustand unten zum Einsatz. */
.ctSideNavigationItemInitial {
  display: none;
}

/* Schmale Sidebar ("Compact Rail"): AP5-Nachtrag 2026-08-20 führte das zunächst rein per
   @media (max-width:1023px) ein (Auslöser: auf einem Smartphone belegte die volle 16rem-Sidebar
   68% der Breite, Puppeteer-Screenshot-Beleg im AP5-Backlog-Abschnitt). Sidebar-Feinschliff
   (Nutzer-Auftrag 2026-08-20, gleicher Tag): auf eine Klasse (.ctAppShellNav--collapsed,
   gesteuert über ct:AppShell/navCollapsed, siehe AppShell.ts) umgestellt, damit der neue
   Pfeil-Toggle-Button den Zustand unabhängig vom Viewport manuell übersteuern kann — eine
   weiterhin LIVE auswertende @media-Regel würde sonst auf schmalen Bildschirmen jede manuelle
   "Ausklappen"-Entscheidung des Nutzers sofort wieder zurückdrehen. App.controller.js#onInit
   berechnet denselben 1024px-Schwellwert nur noch EINMALIG als Vorbelegung beim allerersten
   Laden (kein `matchMedia`-Listener), der Toggle-Button gewinnt danach immer. */
.ctAppShellNav--collapsed {
  width: 4.5rem;
}
/* Nutzer-Auftrag 2026-09-15 (Nachschliff 3): "Logo in der kondensierten Ansicht in Nav
   ausblenden" — vormals blieb dort ein verkleinertes Signet neben dem Toggle-Button sichtbar
   (Nachschliff 2, s. Git-Historie), jetzt auf ausdrücklichen Nutzerwunsch komplett entfernt.
   Blendet die GESAMTE Logo-Gruppe aus (Tenant-Logo/Signet/Wortmarke gleichermaßen, alle drei
   liegen in .ctAppSidebarLogo) statt nur das Signet zu verkleinern — die Kopfzeile zeigt im
   eingeklappten Zustand nur noch den Toggle-Button, zentriert über die volle Rail-Breite. */
.ctAppShellNav--collapsed .ctAppSidebarLogo {
  display: none;
}
.ctAppShellNav--collapsed .ctAppSidebarHeader {
  justify-content: center;
  padding-inline: 0;
}
.ctAppShellNav--collapsed .ctAppSidebarToggle,
.ctAppShellNav--collapsed .ctAppSidebarToggle .sapMBtnInner {
  min-width: 1.75rem;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0 !important;
}
/* Nutzer-Feedback 2026-08-21 (Fehleranalyse): "padding: var(--ct-spacing-s)" (einheitlich
   0.75rem) ersetzte bislang komplett die Basisregel "padding: var(--ct-spacing-xs)
   var(--ct-spacing-l)" (0.5rem vertikal) — dadurch wuchs der VERTIKALE Abstand zwischen den
   Menüpunkten beim Einklappen sichtbar (0.5rem → 0.75rem), obwohl nur der horizontale
   Innenabstand angepasst werden sollte. Jetzt nur noch padding-inline überschrieben, das
   vertikale Padding bleibt in beiden Zuständen identisch. */
.ctAppShellNav--collapsed .ctSideNavigation--vertical .ctSideNavigationItem {
  padding-inline: var(--ct-spacing-s);
  justify-content: center;
}
.ctAppShellNav--collapsed .ctSideNavigationItemLabel,
.ctAppShellNav--collapsed .ctAppSidebarRecentItem .ctSideNavigationItemLabel {
  display: none;
}
/* Unterpunkte (Projekte) entfallen im schmalen Zustand ersatzlos — kein Platz für eine dritte
   Ebene (Nutzer-Auftrag: "im zugeklappten Zustand nur das Logo"). */
.ctAppShellNav--collapsed .ctSideNavigationSubList {
  display: none;
}
/* Nutzer-Feedback 2026-08-21: Icons dürfen beim Ein-/Ausklappen NICHT die Größe wechseln — vormals
   1.25rem im schmalen Zustand vs. 1.125rem (.ctSideNavigationItemIcon Basisregel) im breiten,
   hier ersatzlos entfernt statt überschrieben. */
.ctAppShellNav--collapsed .ctSideNavigationItemInitial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: var(--ct-sidebar-selected-bg);
  color: var(--ct-sidebar-text);
  font-weight: var(--ct-font-weight-bold);
}
.ctAppShellNav--collapsed .ctSideNavigation--vertical .ctSideNavigationItem--selected .ctSideNavigationItemInitial {
  background: var(--ct-color-brand-accent);
}
/* Nutzer-Feedback 2026-08-21 (Fehleranalyse, Live-DOM-Vermessung): das Icon stand trotz
   justify-content:center sichtbar 6px links der Mitte — obwohl das ausgeblendete Label
   (display:none, s.o.) selbst keinen Platz mehr einnimmt, bleibt der von der Basisregel
   geerbte "gap" (--ct-spacing-s) zwischen Icon und Label als Lücke bestehen und verschiebt
   dadurch das EINE sichtbare Kind aus der Mitte. Hier auf 0 zurückgesetzt (analog dem
   bereits zurückgesetzten padding-inline). */
.ctAppShellNav--collapsed .ctAppSidebarRecentItem {
  justify-content: center;
  padding-inline: 0;
  gap: 0;
}
/* !important nötig: sap.m.VBox bringt über die eigene .sapMVBox-Klasse ein display:flex mit,
   das nach controls.css geladen wird (UI5-Theme-CSS, siehe Kaskaden-Reihenfolge-Kommentar in
   erp-launchpad.css) und bei gleicher Spezifität gewinnt — reines display:none ohne !important
   griff deshalb nicht (verifiziert 2026-08-20). Gilt ebenso für die Avatar-Zentrierung
   (Sidebar-Feinschliff, Nutzer-Auftrag 2026-08-20: Avatar war im schmalen Zustand nicht
   zentriert, .sapMFlexBox/.sapMHBox bringt eine eigene justify-content-Deklaration mit).
   Nutzer-Auftrag: Hover zeigt den Namen — dafür bleibt der native Avatar-Tooltip
   (App.view.xml, sidebarUserAvatar tooltip-Property) unabhängig vom Layout erhalten. */
.ctAppShellNav--collapsed .ctAppSidebarFooterText {
  display: none !important;
}
.ctAppShellNav--collapsed .ctAppSidebarFooter {
  justify-content: center !important;
  padding-inline: 0;
}

/* Nutzer-Feedback 2026-08-24 (2. Runde): Versuch, im Telefon-Querformat stattdessen die VOLLE
   violette Sidebar zu erzwingen (statt Bottom-Nav) — per echtem iPhone-Screenshot (3. Runde)
   widerlegt: die volle Sidebar nahm dort ca. ein Drittel der (durch die Safari-Symbolleiste
   ohnehin schon knappen) Breite ein UND war selbst der Höhe nach abgeschnitten (kein
   erkennbarer Scroll-Hinweis). Der Ansatz wurde wieder verworfen — siehe stattdessen die
   erweiterte Bottom-Nav-Bedingung unten, die jetzt AUCH das Querformat abdeckt (entspricht
   damit wieder konsequent dem iPhone-Mockup, das für keine Ausrichtung eine Sidebar zeigt). */

/* ── ct.BottomNavigation ───────────────────────────────────────────────── */
/* Nutzer-Auftrag 2026-08-24 (Mockup 09-mobile-iphone.png): unter 768px (sap.m-Phone-Breakpoint)
   ersetzt eine untenliegende Icon+Label-Leiste die schmale Icon-Rail-Sidebar — auf dem iPhone
   (390px) nahm die 4,5rem breite Rail sonst spürbar Platz von der ohnehin knappen Breite weg
   (per echtem Puppeteer-Test am Testserver vermessen: nur noch 1 statt 2 Kacheln pro Zeile).
   Standardmäßig ausgeblendet (display:none), erscheint nur innerhalb des @media-Blocks unten. */
.ctAppShellMobileNav {
  display: none;
}
.ctBottomNavigation {
  display: flex;
  background: var(--ct-color-surface-navigation);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  /* Nutzer-Auftrag 2026-09-09 (Mobile-Umbau, Runde 2): oberes/unteres Padding leicht reduziert
     (0.375rem statt --ct-spacing-xs/0.5rem) — spart sichtbare Höhe für die letzte Ergebniskarte
     darüber, Touch-Fläche bleibt durch das unveränderte Item-Padding weiterhin komfortabel.
     App-weit genutzte Komponente (nicht auf Business-Flows beschränkbar) — bewusst konservativ
     gehalten, .ctAppShellContent-Bodenabstand unten entsprechend nachgezogen. */
  padding: 0.375rem 0.375rem env(safe-area-inset-bottom, 0);
}
.ctBottomNavigationItem {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  min-width: 0;
  padding: 0.375rem 0.15rem;
  background: transparent;
  border: none;
  font-family: var(--ct-font-family);
  color: var(--ct-color-text-on-navigation);
  opacity: 0.75;
  cursor: pointer;
}
/* Gleiche Selektions-Optik wie ct.SideNavigation (.ctSideNavigation--vertical
   .ctSideNavigationItem--selected): heller Weiß-Wash + Akzentbalken statt reiner Textfarben-
   Änderung — ein Tenant-Branding-Primärfarbe (--ct-color-brand-accent, siehe tokens.css) kann
   dunkel sein und wäre auf dem ebenfalls dunklen Sidebar-Grund als reine Icon-/Textfarbe kaum
   sichtbar (per Puppeteer-Screenshot am Testserver gefunden: "Start" praktisch unsichtbar). */
.ctBottomNavigationItem--selected {
  opacity: 1;
  background: rgba(255, 255, 255, 0.14);
  font-weight: var(--ct-font-weight-bold);
  box-shadow: inset 0 3px 0 var(--ct-color-brand-accent);
}
.ctBottomNavigationItemIcon {
  font-size: 1.25rem;
}
.ctBottomNavigationItemInitial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  font-weight: var(--ct-font-weight-bold);
  font-size: var(--ct-font-size-s);
}
.ctBottomNavigationItem--selected .ctBottomNavigationItemInitial {
  background: var(--ct-color-brand-accent);
  color: var(--ct-color-text-on-navigation);
}
.ctBottomNavigationItemLabel {
  font-size: 0.6875rem;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Mobiler Breakpoint (angelehnt an den sap.m-Phone-Schwellwert): linke Sidebar (auch im
   eingeklappten Icon-Rail-Zustand) weicht vollständig der Bottom Navigation — nicht nur ein
   Umschalten der Rail-Breite wie beim bestehenden 1023px-Schwellwert, siehe dortiger Kommentar.
   .ctAppShellContent bekommt zusätzlichen Bodenabstand, damit die fixierte Leiste keinen Inhalt
   (insbesondere Tabellen-/Listen-Aktionen am unteren Rand) verdeckt.

   Zwei getrennte Bedingungen (OR, per Komma), 3 Nutzer-Feedback-Runden am 2026-08-24:
   1. Hochformat: schmale Breite (<768px) — unverändert seit der ersten Umsetzung.
   2. Querformat: statt eine reine Breiten-Bedingung zu verlängern (träfe dann fälschlich auch
      Tablets/Desktop im Querformat) wird hier gezielt über GERINGE HÖHE erkannt (jedes
      Telefon-Querformat hat deutlich unter 500px Höhe, jedes Tablet/Desktop im Querformat
      deutlich mehr) — zusätzlich mit einer Breiten-Obergrenze abgesichert, damit ein sehr
      niedrig gezogenes Desktop-Browserfenster nicht versehentlich mit hineinfällt. Ursprünglich
      wurde hier stattdessen versucht, im Querformat die VOLLE Sidebar zu erzwingen (siehe
      Kommentar oben) — per echtem Geräte-Screenshot widerlegt (nahm ein Drittel der Breite ein
      UND war selbst der Höhe nach abgeschnitten). Bottom-Nav passt strukturell besser, weil sie
      nur eine dünne horizontale Leiste braucht statt der vollen Höhe.

   Nutzer-Feedback 2026-08-24 (5. Runde): "and (pointer: coarse)" ergänzt — ein NICHT
   maximiertes/schmales PC-Browserfenster mit Maus ist rein rechnerisch ("Breite < 768px")
   von einem Telefon nicht zu unterscheiden und kippte dadurch ungewollt ins Phone-Layout
   (Sidebar weg, Bottom-Nav). pointer:coarse erkennt echte Touch-Geräte (Handy/Tablet)
   unabhängig von der Fensterbreite — ein Maus-Nutzer behält die Sidebar auch bei schmalem
   Fenster, ein Touch-Gerät bekommt die Bottom-Nav auch bei (seltener) Maus-/Trackpad-Nutzung
   nicht mehr fälschlich referenziert. */
@media (max-width: 767.98px) and (pointer: coarse), (max-height: 499.98px) and (max-width: 960px) and (pointer: coarse) {
  .ctAppShellNav {
    display: none;
  }
  .ctAppShellMobileNav {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
  }
  .ctAppShellContent {
    padding-bottom: calc(3.75rem + env(safe-area-inset-bottom, 0));
  }
}

/* Nutzer-Feedback 2026-08-31 (echter iPhone-Screenshot, Hochformat): der Untertitel
   "Willkommen zurück in deiner Arbeitsumgebung." nahm zusammen mit Datums-Badge/Begrüßung zu
   viel vom knappen mobilen Höhenbudget ein, bevor überhaupt eine Kachel sichtbar wurde — analog
   dem bereits bestehenden Querformat-Fix oben (max-height:499.98px), hier aber für den
   NORMALEN mobilen Hochformat-Breakpoint (max-width:767.98px, s.o.), unabhängig von der Höhe. */
@media (max-width: 767.98px) and (pointer: coarse) {
  .ctPageHeaderSubtitle {
    display: none;
  }
  .ctPageHeader {
    padding-block: var(--ct-spacing-xs);
    /* Nutzer-Auftrag 2026-09-09 (Runde 5): weniger Abstand zwischen Zurück-Button/Titelblock/
       Aktionen — mehr Platz für den Titel (Live-Befund: "Bild ergänzen" wurde unnötig früh mit
       Ellipsis gekürzt). Nur mobil, Desktop behält den großzügigeren Standardabstand. */
    gap: var(--ct-spacing-xs);
  }
  /* Nutzer-Auftrag 2026-09-09 (Mobile-Umbau, Runde 2 → Runde 5 korrigiert): Runde 2 vergrößerte
     den Zurück-Button auf 44×44px (WCAG-Touch-Ziel) — Live-Befund Runde 5: dadurch wirkte der
     Button (bzw. genauer: der ihm folgende `:focus-visible`-Ring, der exakt der `border-radius:
     50%`-Kreisform folgt, siehe unten) im Vergleich zu den übrigen Header-Icons unverhältnismäßig
     groß. Die SICHTBARE Größe geht zurück auf die kompaktere Desktop-Größe (2.25rem, siehe
     Basisregel oben) — die 44px-Touchfläche bleibt über ein unsichtbares `::before`-Pseudo-
     element ("Hit-Slop", etabliertes barrierefreies Muster) erhalten, statt den sichtbaren Kreis
     selbst zu vergrößern. */
  .ctPageHeaderBack {
    position: relative;
  }
  .ctPageHeaderBack::before {
    content: "";
    position: absolute;
    inset: -0.25rem;
  }
  .ctPageHeaderActions .sapMBtn {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }
  .ctPageHeaderActions {
    /* Nutzer-Auftrag 2026-09-09 (Runde 5): kompakterer Abstand zwischen Weiter/Aktualisieren/
       Hilfe — spart zusätzlichen Platz für den Titel. Die 44px-Touchfläche jedes einzelnen
       Buttons (siehe oben) bleibt unverändert, nur der Zwischenraum wird schmaler. */
    gap: var(--ct-spacing-xxs);
  }
  /* Nutzer-Auftrag 2026-09-09 (Runde 2): der sticky Seitenkopf (position:sticky, top:0) hatte
     keinen Schutzabstand gegen die iOS-Notch/Statusleiste im Hochformat — analog zur bereits
     vorhandenen Sidebar-/Bottom-Nav-Behandlung (env(safe-area-inset-left/right/bottom), siehe
     .ctAppSidebar/.ctBottomNavigation) ergänzt.
     Bugfix (Runde 3, Live-Fund "Zurück-Button oben abgeschnitten"): dieses `padding-top` traf
     auf DEMSELBEN <header> auf das oben gesetzte `.ctPageHeader{padding-block:var(--ct-spacing-xs)}`
     — bei gleicher Selektor-Spezifität ERSETZTE die spätere Regel den Wert komplett, statt ihn zu
     ergänzen (padding-top wurde dadurch auf Geräten/Kontexten ohne Safe-Area faktisch 0, während
     der Zurück-Button in derselben Runde von 36px auf 44px wuchs — der jetzt größere Kreis saß
     praktisch ohne Luft an der oberen Kante). Jetzt ADDIERT statt ersetzt — garantiert immer
     mindestens das reguläre Polster, unabhängig vom tatsächlichen Safe-Area-Wert. */
  .ctPageHeader--sticky {
    padding-top: calc(var(--ct-spacing-xs) + env(safe-area-inset-top, 0));
  }
}

/* Nutzer-Feedback 2026-08-24 (4. Runde, per echtem iPhone-Screenshot): im Telefon-Querformat
   (Sichtviewport nach Safari-Symbolleiste oft nur ~300px hoch) verdeckte die Bottom-Nav die
   Kachelreihe fast vollständig — nicht durch fehlerhafte Positionierung, sondern weil Begrüßungs-
   Kopfzeile (Titel + Untertitel) und die volle Icon+Label-Bottom-Nav zusammen einen zu großen
   Anteil des extrem knappen Höhenbudgets belegten, sodass praktisch keine Zeile Kacheln mehr
   überblieb. Eigener, NUR über die Höhe abgegrenzter Media Query (nicht die Breiten-Bedingung
   oben mitnutzen — dieträfe sonst fälschlich auch das schmale Hochformat, das bereits
   funktioniert): Untertitel ausblenden, Kopfzeilen-Padding reduzieren, Bottom-Nav auf reine
   Icons ohne Label verkleinern (aria-label bleibt für Screenreader erhalten, siehe
   BottomNavigation.ts). Ergänzt um "and (pointer: coarse)" (5. Runde, siehe Kommentar beim
   Bottom-Nav-Umschalt-Breakpoint oben) — betrifft sonst auch ein schmales/niedriges
   Maus-Browserfenster auf dem PC, wo die Bottom-Nav ohnehin gar nicht angezeigt wird. */
@media (max-height: 499.98px) and (max-width: 960px) and (pointer: coarse) {
  .ctPageHeaderSubtitle {
    display: none;
  }
  .ctPageHeader {
    padding-block: var(--ct-spacing-xs);
  }
  .ctBottomNavigationItem {
    padding-block: 0.25rem;
  }
  .ctBottomNavigationItemLabel {
    display: none;
  }
  .ctAppShellContent {
    padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0));
  }
}

/* ── ct.ListDetailLayout ───────────────────────────────────────────────── */

.ctListDetailLayout {
  display: flex;
  gap: var(--ct-spacing-m);
  height: 100%;
}

.ctListDetailList {
  flex: 0 0 22rem;
  min-width: 0;
  overflow-y: auto;
}

.ctListDetailDetail {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
}

/* Nutzer-Feedback 2026-08-21: auf breiten Bildschirmen stand die Detailspalte bisher IMMER
   nebeneinander zur Liste, auch ganz ohne Auswahl — nach "Zurück" (schließt nur den Inhalt,
   ct.ListDetailLayout selbst kennt keine Navigation, siehe ListDetailLayout.ts) blieb eine
   leere, aber weiterhin sichtbare Spalte stehen, statt zu verschwinden. Jetzt blendet sich die
   Detailspalte auch im breiten Zustand aus, sobald showDetail=false ist — die Liste nimmt dann
   die volle Breite ein (analog dem bereits bestehenden Compact/Medium-Verhalten unten). */
.ctListDetailLayout:not(.ctListDetailLayout--showDetail) .ctListDetailDetail {
  display: none;
}
.ctListDetailLayout:not(.ctListDetailLayout--showDetail) .ctListDetailList {
  flex: 1 1 auto;
}

/* Compact/Medium (siehe UI-Design-Architecture.md, Responsive-Zustände): unter 1024px zeigt
   ListDetailLayout jeweils nur eine Spalte; showDetail=true blendet auf die Detailspalte um. */
@media (max-width: 1023px) {
  .ctListDetailLayout {
    display: block;
  }
  .ctListDetailList,
  .ctListDetailDetail {
    display: none;
  }
  /* Nutzer-Feedback 2026-08-22 (Live-Diagnose per Konsole): im Flex-Modus (breit) bekommt jede
     Spalte automatisch eine echte Pixel-Höhe (flex-Stretch am height:100%-Container) — hier im
     Block-Modus (schmal) fehlte diese, "height:auto" wächst aber NICHT mit, wenn das einzige
     Kind (sap.m.Page) seinen Inhalt intern absolut positioniert (Standard-UI5-Verhalten, braucht
     zwingend eine Elternhöhe zum Verankern). Ergebnis: die sichtbare Spalte hatte trotz
     vorhandenem Inhalt (bestätigt: DOM/HTML war da) buendige Höhe 0 — komplett leere Seite.
     .ctListDetailLayout hat selbst bereits eine definite Höhe (kommt von weiter oben in der
     Seite), height:100% kann hier also zuverlässig auflösen. */
  .ctListDetailList,
  .ctListDetailDetail {
    height: 100%;
  }
  .ctListDetailLayout:not(.ctListDetailLayout--showDetail) .ctListDetailList {
    display: block;
  }
  .ctListDetailLayout--showDetail .ctListDetailDetail {
    display: block;
  }
}

/* ── ct.ModalDialog ────────────────────────────────────────────────────── */
/* Wrapper um sap.m.Dialog — nur ergänzende Tokens, keine internen sap.m-DOM-Selektoren
   (siehe UID-007); Dialog-Grundmechanik (Overlay, Fokusfalle) bleibt Standardcontrol-Verhalten. */

.ctModalDialog {
  border-radius: var(--ct-radius-card);
}

/* Nutzer-Auftrag 2026-08-22 (Farbkonzept-Vorgabe für modale Dialoge, bisher nicht umgesetzt):
   Footer-Buttons folgen einer FESTEN Semantik unabhängig vom App-weiten Primärfarb-Token —
   Bestätigen/Genehmigen/Annehmen = Grün, Ablehnen (im Genehmigungskontext) = Rot/Pink,
   Abbrechen = helles Lila-Grau. Gescoped auf den Dialog-Footer (`sapMDialogFooter`), damit
   normale Emphasized-Buttons AUSSERHALB von Dialogen unverändert die Primärfarbe behalten.
   Alle Werte kommen aus der bereits vorhandenen Rohpalette (tokens.css), keine neuen Farben.
   Selektor-Typ (sap.m.Button#type) statt Klasse, da `type` bereits die semantische Bedeutung
   trägt (Emphasized=primäre Bestätigung, Accept=Genehmigen, Reject=Ablehnen, Default=Abbrechen —
   sap.m.Button rendert diese als sapMBtnEmphasized/sapMBtnAccept/sapMBtnReject/sapMBtnDefault). */
/* Nutzer-Feedback 2026-08-22 (Live-Test, 4. Korrektur): NUR unten mehr Abstand — der vorherige
   Versuch überschrieb alle vier Seiten des Paddings (Shorthand) und vergrößerte dadurch
   ungewollt auch links/rechts, außerdem fehlte ein expliziter Hintergrund (grauer Streifen
   durch abweichende Footer-Standardfarbe). Jetzt NUR padding-bottom ergänzt (top/links/rechts
   bleiben UI5-Standard) und Hintergrund explizit auf die Kartenfarbe gesetzt. */
.ctModalDialog .sapMDialogFooter {
  padding-bottom: var(--ct-spacing-m) !important;
  background: var(--ct-color-surface-card);
}
.ctModalDialog .sapMDialogFooter .sapMBtnEmphasized,
.ctModalDialog .sapMDialogFooter .sapMBtnAccept {
  background-color: var(--ct-palette-green-500) !important;
  border-color: var(--ct-palette-green-500) !important;
  border-radius: var(--ct-radius-pill) !important;
}
.ctModalDialog .sapMDialogFooter .sapMBtnEmphasized:hover,
.ctModalDialog .sapMDialogFooter .sapMBtnAccept:hover {
  background-color: var(--ct-palette-green-700) !important;
  border-color: var(--ct-palette-green-700) !important;
}
.ctModalDialog .sapMDialogFooter .sapMBtnReject {
  background-color: var(--ct-palette-pink-600) !important;
  border-color: var(--ct-palette-pink-600) !important;
  border-radius: var(--ct-radius-pill) !important;
  color: var(--ct-color-text-inverse) !important;
}
.ctModalDialog .sapMDialogFooter .sapMBtnReject:hover {
  background-color: var(--ct-palette-pink-700) !important;
  border-color: var(--ct-palette-pink-700) !important;
}
.ctModalDialog .sapMDialogFooter .sapMBtnDefault {
  background-color: var(--ct-palette-blue-050) !important;
  border-color: var(--ct-palette-blue-050) !important;
  color: var(--ct-palette-violet-700) !important;
  border-radius: var(--ct-radius-pill) !important;
}
.ctModalDialog .sapMDialogFooter .sapMBtnDefault:hover {
  background-color: var(--ct-palette-neutral-100) !important;
}
/* Nutzer-Fund 2026-09-04 (Detail-Dialog-Redesign): die generische Grün-Regel oben (Genehmigen/
   Bestätigen-Semantik) traf ungewollt auch die primäre FOLGEAKTION im neuen Detail-Dialog
   (z. B. "Branding hinzufügen") — das ist kein Genehmigungsvorgang, Grün gehört laut Farbkonzept
   ausschließlich Erfolg/positivem Status. Höher-spezifisch auf den neuen, dedizierten
   Footer-Scope (.ctResultDetailFooter, siehe ResultDetailDialog.js) zurück auf die reguläre
   Primärfarbe (Pflaumenton) gesetzt — betrifft NUR diesen Dialog, keine anderen Verwender der
   generischen Grün-Regel oben (z. B. WorkItems-Genehmigen). */
.ctModalDialog .sapMDialogFooter .ctResultDetailFooter .sapMBtnEmphasized {
  background-color: var(--ct-color-action-primary-background) !important;
  border-color: var(--ct-color-action-primary-background) !important;
}
.ctModalDialog .sapMDialogFooter .ctResultDetailFooter .sapMBtnEmphasized:hover {
  background-color: var(--ct-color-action-primary-background-hover) !important;
  border-color: var(--ct-color-action-primary-background-hover) !important;
}
/* Löschen ist im Detail-Dialog-Footer eine klar destruktive, sekundäre Aktion — visuell von der
   primären Folgeaktion abgesetzt (zusätzlich zu .ctResultCardDeleteBtn's Dämpfung, siehe dort). */
/* ADR-053 Nachtrag 4 (Live-Fund Smoke-Screenshot): mit Bearbeiten + zwei KI-Aktionen + „Weiterleiten
   nach …" + Folgeaktion verschwand der letzte Button im „…"-Überlauf der OverflowToolbar. Der
   Detail-Dialog nutzt deshalb eine einfache Toolbar, die UMBRICHT (rechtsbündig, mehrzeilig) statt
   Aktionen zu verstecken — ohne ToolbarSpacer (der würde beim Umbruch eine eigene Zeile belegen). */
.ctModalDialog .sapMDialogFooter .ctResultDetailFooter.sapMTB {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  height: auto;
  min-height: 2.75rem;
  row-gap: var(--ct-spacing-xs, 0.25rem);
  padding-top: var(--ct-spacing-xs, 0.25rem);
  padding-bottom: var(--ct-spacing-xs, 0.25rem);
}
.ctResultDetailFooterDelete.sapMBtn {
  color: var(--ct-color-status-error) !important;
  margin-inline-start: var(--ct-spacing-s);
}

/* ── ct.ModalDialog-Inhalt (Projektbereich-Redesign 2026-08-22, Mockup "Modaler Dialog") ─── */

/* Nutzer-Feedback 2026-08-22 (Live-Test, 3. Korrektur): Schließen-Button jetzt in DERSELBEN
   Zeile wie Icon+Titel (siehe ModalDialog.ts) statt in einer eigenen Zeile darüber — jede
   eigene Zeile für den X-Button fügte durch dessen Button-Eigenpadding spürbaren Leerraum ein
   und drückte Icon+Titel insgesamt nach unten. Ausrichtung läuft jetzt über die echte
   sap.m.FlexBox-Property alignItems="Start" (ModalDialog.ts) statt CSS align-items — dadurch
   entfällt auch das Spezifitäts-/Ladereihenfolge-Risiko gegenüber UI5-Theme-Defaults. */
.ctModalDialogHeader {
  padding: var(--ct-spacing-m) var(--ct-spacing-m) 0 var(--ct-spacing-m);
  gap: var(--ct-spacing-s);
}
.ctModalDialogHeaderText {
  flex: 1 1 auto;
  gap: var(--ct-spacing-xxs);
  min-width: 0;
}
/* Nutzer-Feedback 2026-08-22: heller, weicher Badge-Hintergrund statt voller Sättigung — das
   Icon selbst bleibt in der satten Kategoriefarbe, nur der Hintergrund wird über color-mix()
   aufgehellt (reine Verdünnung des bereits bestehenden Kategorie-Tokens, keine neue Farbe).
   Nutzer-Feedback 2026-08-22 (Live-Test): Icon-GLYPH wirkte "zu tief"/nicht zentriert — line-
   height:1 auf dem sap.ui.core.Icon-Glyph selbst erzwungen, dessen Schriftart bringt sonst
   eigene Zeilenhöhen-Reserven mit, die die Zentrierung im Quadrat sichtbar nach oben/unten
   verschieben. */
.ctModalDialogIcon {
  width: 3rem;
  height: 3rem;
  min-width: 3rem;
  /* Nutzer-Feedback 2026-08-22 (Live-Test, 4. Korrektur): Glyph klebte weiterhin oben links —
     display:flex/align-items/justify-content griffen offenbar gar nicht (Glyph wirkte wie
     Standard-Blockrendering). Ursache vermutlich dieselbe Ladereihenfolge-Falle wie beim DE/EN-
     Umschalter: das UI5-Theme (sap.ui.core.Icon-Basisklasse .sapUiIcon) wird dynamisch NACH
     unseren statischen <link>-Tags injiziert und gewinnt bei gleicher Spezifität den Tie-Break.
     Jetzt mit !important erzwungen, unabhängig von Ladereihenfolge/Theme-Defaults. */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  border-radius: var(--ct-radius-control);
  font-size: 1.375rem;
  line-height: 1 !important;
}
.ctModalDialogIcon--variant1 { background: color-mix(in srgb, var(--ct-color-category-1) 18%, white); color: var(--ct-color-category-1); }
.ctModalDialogIcon--variant2 { background: color-mix(in srgb, var(--ct-color-category-2) 18%, white); color: var(--ct-color-category-2); }
.ctModalDialogIcon--variant3 { background: color-mix(in srgb, var(--ct-color-category-3) 18%, white); color: var(--ct-color-category-3); }
.ctModalDialogIcon--variant4 { background: color-mix(in srgb, var(--ct-color-category-4) 18%, white); color: var(--ct-color-category-4); }
.ctModalDialogIcon--variant5 { background: color-mix(in srgb, var(--ct-color-category-5) 18%, white); color: var(--ct-color-category-5); }
.ctModalDialogIcon--variant6 { background: color-mix(in srgb, var(--ct-color-category-6) 18%, white); color: var(--ct-color-category-6); }
.ctModalDialogTitle {
  font-size: var(--ct-font-size-xl);
  font-weight: var(--ct-font-weight-bold);
  color: var(--ct-color-text-default);
}
.ctModalDialogDescription {
  color: var(--ct-color-text-muted);
  font-size: var(--ct-font-size-m);
}
/* Nutzer-Fund 2026-09-04 (Detail-Dialog-Feinschliff): der Schließen-Button wirkte durch den
   dauerhaft sichtbaren Theme-Standardrahmen des Transparent-Buttons zu auffällig/schwer —
   Rahmen nur noch im Fokus-/Hover-Zustand zeigen (sichtbarer Fokusring bleibt erhalten). */
.ctModalDialogClose.sapMBtn {
  border-color: transparent;
  color: var(--ct-color-text-muted);
  outline: none;
}
.ctModalDialogClose.sapMBtn:hover {
  border-color: var(--ct-color-border-default);
  color: var(--ct-color-text-default);
}
/* Nutzer-Fund 2026-09-05 (Mockup-Feinschliff): der X-Button zeigte im Fokuszustand MEHRERE
   ineinanderliegende Rahmen — UI5s eigene Theme-Fokusoptik auf dem inneren `.sapMBtnInner`
   (bereits an anderer Stelle im Projekt als stabiler, gezielt genutzter Selektor etabliert, siehe
   .ctAppSidebarToggle/.ctDataTable weiter oben in dieser Datei) kam zusätzlich zu unserem eigenen
   Outline auf dem äußeren `.sapMBtn` zum Tragen — zwei sichtbare Ringe übereinander. Inneres
   Element neutralisiert, GENAU EIN Ring bleibt (auf dem äußeren Button, nur bei :focus-visible,
   also nicht dauerhaft nach einem reinen Mausklick). */
.ctModalDialogClose.sapMBtn .sapMBtnInner {
  outline: none !important;
  box-shadow: none !important;
}
/* Nutzer-Fund 2026-09-15: wie der Sidebar-Toggle ein rahmenloser Icon-Button — Tastaturfokus
   als dezente Flächen-/Farbänderung statt eines umlaufenden Rings (Root Cause der Mehrfachringe
   siehe Abschnitt "Button-Fokus"). */
.ctModalDialogClose.sapMBtn:focus > .sapMFocusable::before {
  display: none;
}
.ctModalDialogClose.sapMBtn:focus-visible {
  border-color: var(--ct-color-border-default);
  color: var(--ct-color-text-default);
  background-color: var(--ct-color-surface-sunken);
}

.ctModalDialogDetails {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ct-spacing-s) var(--ct-spacing-m);
  padding: var(--ct-spacing-m);
  background: var(--ct-color-surface-sunken);
  margin: var(--ct-spacing-s) var(--ct-spacing-m) 0;
  border-radius: var(--ct-radius-control);
}
.ctModalDialogDetails:empty {
  display: none;
  margin: 0;
}
/* Nutzer-Feedback 2026-08-22: Datenfelder brauchten eine erkennbare Überschrift — jeder
   Details-Eintrag ist eine Label+Text-Kombination (siehe WorkItems.view.xml), das Label bekommt
   hier die Bildunterschrift-Optik des Mockups (klein, gedämpft), der Wert bleibt normal. */
.ctModalDialogDetails .sapMLabel {
  font-size: var(--ct-font-size-s);
  color: var(--ct-color-text-muted);
  font-weight: var(--ct-font-weight-regular);
}
.ctModalDialogDetails .sapMText {
  font-size: var(--ct-font-size-m);
  color: var(--ct-color-text-default);
  font-weight: var(--ct-font-weight-bold);
}

.ctModalDialogBody {
  padding: 0 var(--ct-spacing-m) var(--ct-spacing-m);
  gap: var(--ct-spacing-s);
}

.ctModalDialogParticipants {
  align-items: center;
  gap: var(--ct-spacing-s);
  padding: 0 var(--ct-spacing-m) var(--ct-spacing-m);
}
.ctModalDialogParticipantsList {
  display: flex;
}
.ctModalDialogParticipantsList .ctAvatar {
  border: 2px solid var(--ct-color-surface-card);
  margin-inline-start: -0.5rem;
}
.ctModalDialogParticipantsList .ctAvatar:first-child {
  margin-inline-start: 0;
}

/* Nutzer-Auftrag 2026-09-04 (Detail-Dialog-Redesign): optionaler Fach-Status-Chip rechts in der
   Kopfzeile (z. B. ct.StatusBadge), zwischen Titel/Beschreibung und dem Schließen-Button. */
.ctModalDialogHeaderActions {
  flex: 0 0 auto;
  gap: var(--ct-spacing-xs);
}
/* Fullscreen-auf-Phone (stretchOnPhone=true, native sap.m.Dialog-Mechanik — die Klasse
   .sapMDialogStretched setzt UI5 selbst, siehe ModalDialog.ts#init): eigene Header/Body-Wrapper
   behalten sonst ihre Eckenrundung, obwohl der Dialog den ganzen Bildschirm ausfüllt. */
.sapMDialogStretched.ctModalDialog {
  border-radius: 0;
}
/* Nutzer-Auftrag 2026-09-04 (Detail-Dialog-Redesign, Bugfix): Breite über CSS statt der
   sap.m.Dialog#contentWidth-Property — die Property schreibt ein Inline-style="width:...", das
   die stretchOnPhone-Vollbild-Klasse (oben) mit höherer Spezifität überstimmt und auf Phones
   sichtbare Ränder übrig ließ. Nur außerhalb des gestreckten Zustands wirksam, betrifft keine
   anderen ModalDialog-Verwender (deren feste rem-contentWidth-Werte liegen alle darunter).
   Nutzer-Fund 2026-09-04 (Nachtrag): OHNE !important maß sap.m.Dialog seine eigene
   Popup-Positionierungslogik nach dem Rendern erneut nach und schrieb dabei selbst wieder ein
   Inline-style="width:..." auf den DOM-Knoten (Inhalt-abhängige Größe) — das lief unserer
   CSS-Regel ohne !important den Rang ab und ließ den Dialog auf schmale ~500px zusammenschrumpfen
   (Container-Query erkannte dadurch permanent nur die einspaltige Breite). !important gewinnt
   IMMER gegen jedes Inline-style, unabhängig davon, wann/wodurch es gesetzt wurde. */
.ctModalDialog:not(.sapMDialogStretched) {
  width: min(90vw, 56rem) !important;
  min-width: 0;
}

/* ── ct.ModalDialog Tabs (Detail-Dialog-Redesign 2026-09-04) — Nutzer-Fund 2026-09-04
   (Live-Screenshot vs. Mockup): der ursprünglich hier verwendete Pflaumenton
   (--ct-color-brand-plum, ein dunkles Grauviolett) wirkte im Vergleich zum kräftigen
   Mockup-Akzent wie "gar keine Farbe" — auf denselben plattformkontrollierten
   Primärakzent umgehängt, den das bereits etablierte .erpCiTabs-Muster (erp-launchpad.css)
   für IconTabBar-Reiter nutzt (konsistent mit den Emphasized-Buttons dieses Dialogs), gescopt
   auf .ctModalDialogTabs, damit keine andere IconTabBar im Projekt betroffen ist. */
.ctModalDialogTabs {
  box-sizing: border-box; /* Nutzer-Fund 2026-09-23: width 100% + Padding lief rechts über (H-Scrollbar, kein rechter Rand) */
  --sapSelectedColor: var(--ct-color-action-primary-background);
  --sapContent_Selected_ForegroundColor: var(--ct-color-action-primary-background);
  --sapHighlightColor: var(--ct-color-action-primary-background);
  padding: 0 var(--ct-spacing-m);
}
.ctModalDialogTabs .sapMITBSelected .sapMITBContentArrow::after {
  background-color: var(--ct-color-action-primary-background) !important;
  border-color: var(--ct-color-action-primary-background) !important;
}
.ctModalDialogTabs .sapMITBFilterIcon {
  display: none !important;
}

/* ── ct.ResultDetailDialog-Inhalt (Detail-Dialog-Redesign 2026-09-04) ────────────────────────
   Zweispaltig (Medienvorschau links, Text rechts) sobald genug Platz — Container Query statt
   Media Query: der Dialog ist nie viewport-breit, ein @media-Umbruch würde bei Split-Screen/
   schmalerem Desktop-Fenster falsch entscheiden (Auftrag: "anhand des verfügbaren Platzes"). */
.ctResultDetailContentGrid {
  container-type: inline-size;
}
.ctResultDetailContentGrid .ctResultDetailGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ct-spacing-m);
  align-items: start;
}
@container (min-width: 44rem) {
  .ctResultDetailContentGrid .ctResultDetailGrid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  }
  /* Nutzer-Auftrag 2026-09-12 ("Bild ergänzen", "kein Bild vorhanden"): ohne Bild bleibt es bei
     EINER Spalte, die den vollen verfügbaren Platz nutzt — sonst würde der zweispaltige Grid
     oben eine leere zweite Spalte reservieren, obwohl nur ein Kind (der Textbereich) existiert. */
  .ctResultDetailContentGrid .ctResultDetailGrid.ctResultDetailGrid--textOnly {
    grid-template-columns: 1fr;
  }
}
.ctResultDetailMedia {
  position: relative;
  border-radius: var(--ct-radius-card);
  border: 1px solid var(--ct-color-border-default);
  overflow: hidden;
  background: var(--ct-color-surface-sunken);
  min-width: 0;
}
.ctResultDetailMedia img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(28rem, 60vh);
  object-fit: contain;
}
/* Nutzer-Fund 2026-09-04 (Live-Messung via Puppeteer): computed position blieb "relative" statt
   "absolute" — dasselbe, im Projekt bereits mehrfach dokumentierte Ladereihenfolge-Problem (das
   UI5-Theme injiziert seine eigene .sapMHBox/.sapMFlexBox-Basis-CSS dynamisch NACH unseren
   statischen <link>-Tags und gewinnt bei gleicher Selektor-Spezifität den Tie-Break, siehe
   .ctModalDialogIcon weiter oben). !important erzwingt es unabhängig von der Ladereihenfolge. */
.ctResultDetailMediaActions {
  position: absolute !important;
  top: var(--ct-spacing-xs);
  right: var(--ct-spacing-xs);
  display: flex;
  gap: var(--ct-spacing-xxs);
  z-index: 2;
}
.ctResultDetailMediaActions .sapMBtn {
  min-width: 44px;
  min-height: 44px;
  background: var(--ct-color-surface-card) !important;
  border-radius: 50% !important;
  /* Nutzer-Fund 2026-09-04 (Live-Screenshot): UI5s eigener Hover-Zustand (sap.m.Button
     Transparent) legt eine RECHTECKIGE Hintergrundfläche über den ganzen Button — ohne
     overflow:hidden ragte die über den hier erzwungenen Kreis (border-radius:50%) hinaus. Clip
     auf die Kreisform, damit auch der Hover-Zustand rund bleibt. */
  overflow: hidden !important;
}
.ctResultDetailText {
  max-width: 60ch;
  overflow-wrap: break-word;
}
/* Bugfix (Nutzer-Fund 2026-09-12, "Textabstände"): sap.m.FormattedText/UI5-Theme setzt `<p>`
   standardmäßig ohne (oder mit unterschiedlichem) vertikalem Außenabstand — mehrere fachlich
   getrennte Absätze (ResultPresentation.js#markdownToSafeHtml erzeugt bereits korrekt EIN `<p>`
   je durch Leerzeile getrennten Absatz) klebten dadurch optisch aneinander, obwohl die HTML-
   Struktur bereits korrekt war. Explizite, symmetrische Absatz-Abstände statt implizitem
   Theme-Default. Erster/letzter Absatz ohne zusätzlichen Rand zum Kartenrahmen. */
.ctResultDetailText p {
  margin-block: 0 var(--ct-spacing-s);
}
.ctResultDetailText p:last-child {
  margin-bottom: 0;
}
.ctResultDetailText a {
  color: var(--ct-color-brand-plum);
}

/* Nutzer-Auftrag 2026-09-06 (Karussell-Textkarte): optischer Karten-Rahmen für den Text, analog
   .ctResultDetailMedia — technisch ein sap.m.Carousel mit GENAU EINER Seite (kein Blättern), nur
   für die visuelle Konsistenz zur Bild-Karte. Die eigentliche .sapMCrslInner-Navigation bleibt bei
   einer Seite ohnehin unsichtbar, .ctResultDetailTextCard trägt Rahmen/Innenabstand. */
.ctResultDetailTextCarousel {
  min-width: 0;
}
.ctResultDetailTextCard {
  border-radius: var(--ct-radius-card);
  border: 1px solid var(--ct-color-border-default);
  background: var(--ct-color-surface-sunken);
  padding: var(--ct-spacing-m);
  min-width: 0;
}
.ctResultDetailTextActions {
  display: flex;
  gap: var(--ct-spacing-xs);
  margin-top: var(--ct-spacing-s);
}

/* ── ct.RichTextInput ────────────────────────────────────────────────────── */

.ctRichTextInput {
  border: 1px solid var(--ct-color-border-default);
  border-radius: var(--ct-radius-control);
  overflow: hidden;
}
.ctRichTextToolbar {
  display: flex;
  gap: var(--ct-spacing-xxs);
  padding: var(--ct-spacing-xs);
  background: var(--ct-color-surface-sunken);
  border-bottom: 1px solid var(--ct-color-border-default);
}
.ctRichTextToolbarBtn {
  min-width: 1.75rem;
  height: 1.75rem;
  border: 1px solid transparent;
  border-radius: var(--ct-radius-control);
  background: transparent;
  color: var(--ct-color-text-default);
  cursor: pointer;
  font-family: var(--ct-font-family);
  font-size: var(--ct-font-size-s);
}
.ctRichTextToolbarBtn:hover {
  background: var(--ct-color-surface-card);
  border-color: var(--ct-color-border-default);
}
.ctRichTextToolbarBtn.ctRichTextBtnBold { font-weight: var(--ct-font-weight-bold); }
.ctRichTextToolbarBtn.ctRichTextBtnItalic { font-style: italic; }
.ctRichTextEditable {
  min-height: 5rem;
  max-height: 12rem;
  overflow-y: auto;
  padding: var(--ct-spacing-s);
  font-family: var(--ct-font-family);
  font-size: var(--ct-font-size-m);
  color: var(--ct-color-text-default);
}
.ctRichTextEditable:empty::before {
  content: attr(data-placeholder);
  color: var(--ct-color-text-muted);
}
.ctRichTextEditable:focus-visible {
  outline: none;
}
.ctRichTextCounter {
  padding: var(--ct-spacing-xxs) var(--ct-spacing-s);
  text-align: end;
  font-size: var(--ct-font-size-s);
  color: var(--ct-color-text-muted);
  background: var(--ct-color-surface-sunken);
  border-top: 1px solid var(--ct-color-border-default);
}

/* ── ct.HighlightedTextArea ──────────────────────────────────────────────── */
/* Nutzer-Auftrag 2026-08-25 (KI-Prompts): {{feld.pfad}}-Platzhalter im Prompt-Text grau
   hervorheben, während getippt wird — "synced overlay"-Technik: transparente <textarea> exakt
   deckungsgleich über einem <div>-Overlay, das denselben Text mit markierten {{...}}-Treffern
   rendert (siehe HighlightedTextArea.ts). Beide Ebenen brauchen IDENTISCHES Box-Modell
   (Padding/Font/Line-Height/Border), sonst verschiebt sich der sichtbare Text gegen den
   (unsichtbaren) echten Cursor.
   WICHTIG (Nutzer-Fund 2026-09-15): die Werte hier sind nur die Ausgangslage — verlassen darf
   man sich darauf NICHT. Tenant-Branding-CSS laedt NACH dieser Datei und setzt z. B.
   `input, select, textarea, button { font-family: "Inter" !important }`, was ausschliesslich die
   <textarea> trifft und die beiden Ebenen auseinanderlaufen laesst. Massgeblich ist deshalb die
   Laufzeit-Spiegelung in HighlightedTextArea.ts#_syncMetrics (uebertraegt die TATSAECHLICH
   berechneten Metriken der Textarea auf das Overlay, auch nach dem Nachladen eines Webfonts). */
.ctHighlightedTextArea {
  position: relative;
  display: block;
  width: 100%;
  border: 1px solid var(--ct-color-border-default);
  border-radius: var(--ct-radius-control);
  background: var(--ct-color-surface-card);
}
.ctHighlightedTextAreaOverlay,
.ctHighlightedTextAreaInput {
  box-sizing: border-box;
  width: 100%;
  padding: var(--ct-spacing-s);
  font-family: var(--ct-font-family);
  font-size: var(--ct-font-size-m);
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
  border: none;
}
.ctHighlightedTextAreaOverlay {
  position: absolute;
  inset: 0;
  /* Nutzer-Fund 2026-09-15: KEINE eigene Scrollbar. Zeigt das Overlay eine (die Textarea aber
     nicht, oder umgekehrt), unterscheidet sich die nutzbare Zeilenbreite um die Scrollbar-Breite
     — die Zeilen brechen dann verschieden um und der sichtbare Text driftet gegen den echten
     Cursor. Gescrollt wird das Overlay ausschliesslich programmatisch (HighlightedTextArea.ts:
     _onScroll/_syncMetrics spiegeln scrollTop/scrollLeft der Textarea); `overflow: hidden`
     verhindert eine eigene Scrollbar, erlaubt aber weiterhin das Setzen von scrollTop. */
  overflow: hidden;
  pointer-events: none;
  color: var(--ct-color-text-default);
}
.ctHighlightedTextAreaInput {
  position: relative;
  display: block;
  /* Nutzer-Fund 2026-09-06 ("wächst nur nach unten, nicht zur Seite"): ein horizontaler
     Ziehpunkt (resize:both/horizontal) würde die Textarea breiter als ihren Wrapper machen
     können, OHNE dass das deckungsgleiche Overlay (siehe Klassenkommentar) mitwächst — sichtbarer
     Text und markierte Platzhalter liefen dann auseinander. Die eigentliche Lösung ist daher eine
     BREITERE Formularzeile (siehe AdminPrompts.controller.js, GridData-Layout auf dieser Zeile,
     volle Breite statt der schmalen Label+Feld-Spaltenaufteilung) statt eines manuellen
     Breiten-Resizes, der die Synchronität bräche.
     resize bleibt daher bei vertical. */
  resize: vertical;
  background: transparent;
  color: transparent;
  caret-color: var(--ct-color-text-default);
  -webkit-text-fill-color: transparent;
}
.ctHighlightedTextAreaInput:focus-visible {
  outline: var(--ct-focus-width) solid var(--ct-focus-color);
  outline-offset: var(--ct-focus-offset);
}
.ctHighlightedTextAreaToken {
  background: var(--ct-color-surface-sunken);
  border-radius: 0.2em;
  color: inherit;
}

/* ADR-046 (Nutzer-Auftrag 2026-09-15): JSON-Editor für die Cloudinary-Transformationsvorlage —
   Monospace + kein Zeilenumbruch mitten im Transformations-Fragment, damit Segmentgrenzen ("/")
   und Platzhalter beim Lesen erkennbar bleiben. */
.erpAdminMonospaceArea textarea {
  font-family: monospace;
  font-size: var(--ct-font-size-s);
  white-space: pre;
  overflow-x: auto;
}

/* ── Business-Flow-Prompt-Editor: Feld-Chips (Nutzer-Auftrag 2026-09-06) ────────────────────── */
.erpAdminPromptHint {
  display: block;
  color: var(--ct-color-text-muted);
  font-size: var(--ct-font-size-s);
  white-space: normal;
}
.erpAdminPromptFieldChip.sapMBtn {
  font-family: monospace;
  font-size: var(--ct-font-size-s);
  border-radius: var(--ct-radius-pill);
  cursor: grab;
  margin: 0 var(--ct-spacing-xs) var(--ct-spacing-xs) 0;
  /* Nutzer-Fund 2026-09-06 (Live-Test): Klick-Einfügen funktionierte, Ziehen nicht — klassische
     Ursache bei draggable-Elementen MIT sichtbarem Text: ohne user-select:none interpretieren
     Browser einen Mausdruck+Bewegung auf dem Text als Textauswahl-Geste statt als Drag-Start,
     das native dragstart-Ereignis feuert dadurch gar nicht erst zuverlässig. */
  user-select: none;
  -webkit-user-select: none;
  /* Chromium/WebKit setzen auf nativen Formular-Controls (button/input/select/textarea) per
     User-Agent-Stylesheet standardmäßig -webkit-user-drag:none — das unterdrückt natives Drag
     UNABHÄNGIG vom draggable-Attribut. Muss für ein <button>-basiertes Chip explizit
     zurückgesetzt werden, sonst startet gar kein dragstart. */
  -webkit-user-drag: element;
}
.erpAdminPromptFieldChip.sapMBtn:active {
  cursor: grabbing;
}

/* ── ct.DataTable / ct.WorkItemTable ──────────────────────────────────── */

.ctDataTable {
  background: var(--ct-color-surface-card);
  border-radius: var(--ct-radius-card);
  box-shadow: var(--ct-shadow-card);
  overflow: hidden;
}
/* Nutzer-Auftrag 2026-09-14 (zurückgenommen ggü. Runde 6 vom 2026-09-08): die zusätzliche
   graue-Arbeitsfläche-Optik (--ct-color-surface-workarea + Rahmen) wirkte wie ein eigener,
   unerwünschter Außenkasten um die gesamte Folgeaktions-Ergebnistabelle (inkl. Paginierung, die
   denselben Hintergrund erbt) — geht jetzt nahtlos in den helleren Seitenhintergrund über
   (--ct-color-surface-page, derselbe Token wie [id$="inboxAppPage"] in erp-launchpad.css). Kein
   eigener Rahmen/Schatten mehr auf dieser äußeren Fläche. Zeilen bleiben über die
   `.ctDataTable.ctFollowUpRunsDataTable .sapMLIB`-Regel unten UNVERÄNDERT explizit hell/weiß
   (unabhängig von diesem Hintergrund) — nur die Fläche DRUMHERUM wurde angeglichen. */
.ctFollowUpRunsDataTable {
  background: var(--ct-color-surface-page) !important;
  /* Nutzer-Fund 2026-09-14 (Live-Screenshot, Nachschliff): ganz ohne Rahmen wirkte die Fläche
     konturlos/schwebend — derselbe dünne, dezente Rahmenton wie bei den Eingang-Kacheln
     (.ctResultCard), NICHT die frühere kräftigere --ct-color-border-faint-Variante samt
     Hintergrundfarbe. Reine Kontur, keine eigene Fläche mehr. */
  border: 1px solid var(--ct-color-border-divider);
  box-shadow: none !important;
  padding: var(--ct-spacing-m);
}
/* Nutzer-Auftrag 2026-09-11 (responsive Überarbeitungsrunde, Anforderung 6): Spaltenüberschriften
   dürfen bei knappem Platz zwischen Wörtern umbrechen, NIEMALS mitten im Wort/Buchstabenweise —
   defensiv für JEDE ct.DataTable-Instanz, nicht nur die Folgeaktions-Ergebnisliste. */
.ctDataTable .sapMListTblHeaderCell {
  word-break: normal;
  overflow-wrap: normal;
}
/* Höhere Selektor-Spezifität (3 statt 2 Klassen) nötig, um die spätere, allgemeine
   ".ctDataTable .sapMLIB { background: transparent !important; }"-Regel weiter unten in dieser
   Datei sicher zu schlagen (dieselbe Zeilen-Kachel trägt BEIDE Klassen). */
.ctDataTable.ctFollowUpRunsDataTable .sapMLIB {
  background: var(--ct-color-surface-card) !important;
}
/* Nutzer-Auftrag 2026-09-09 (Mobile-Umbau "Business Flows"): mobiler Kartenstapel als Ersatz für
   .ctFollowUpRunsDataTable unterhalb des Sidebar-Breakpoints (siehe FollowUpRunCardStack.js —
   wird NUR dort gebaut, kein CSS-Sichtbarkeits-Gate nötig). Design-Tokens identisch zu
   .ctResultCard/.ctDataTable (Radius/Schatten/Rahmen), keine neuen Tokens. */
.ctFollowUpRunCards .sapMLIB {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin-bottom: var(--ct-spacing-m);
  /* Nutzer-Auftrag 2026-09-09 (Mobile-Umbau, Runde 4): im Gegensatz zum Karussell
     (.ctResultCarousel, Runde 3) fehlte hier bisher box-sizing:border-box/max-width — die
     Zeilenkachel konnte dadurch (Border/Padding-Restaddition) minimal breiter als ihr
     Elterncontainer werden und rechts über den Viewport hinausragen. */
  box-sizing: border-box;
  max-width: 100%;
}
.ctFollowUpRunCard {
  display: flex;
  flex-direction: column;
  background: var(--ct-color-surface-card);
  border: 1px solid var(--ct-color-border-default);
  border-radius: var(--ct-radius-card);
  box-shadow: var(--ct-shadow-card);
  overflow: hidden;
  font-family: var(--ct-font-family);
  box-sizing: border-box;
  max-width: 100%;
}
.ctFollowUpRunCardImage {
  width: 100%;
  height: 10rem;
  /* Nutzer-Auftrag 2026-09-09 (Runde 2 → Runde 3 zurückgenommen): siehe .ctResultCardMedia img —
     dieselbe Rücknahme von `contain` (sichtbare Farbbalken) zu `cover` (randfüllend). */
  object-fit: cover;
  object-position: center;
}
.ctFollowUpRunCardBody {
  display: flex;
  flex-direction: column;
  gap: var(--ct-spacing-xs);
  padding: var(--ct-spacing-m);
}
.ctFollowUpRunCardSection {
  padding-block: var(--ct-spacing-xs);
  border-top: 1px solid var(--ct-color-border-divider);
}
.ctFollowUpRunCardBody > .ctFollowUpRunCardSection:first-child {
  padding-block-start: 0;
  border-top: none;
}
.ctFollowUpRunCardMeta,
.ctFollowUpRunCardEval {
  gap: var(--ct-spacing-s);
  /* Nutzer-Auftrag 2026-09-09 (Mobile-Umbau, Runde 4): ohne Umbruch konnte der Inhalt dieser
     Zeilen (Initiator+Status bzw. Bewertung+Aktionen) bei wenig Platz nicht ausweichen und die
     Karte dadurch zu horizontalem Overflow zwingen. */
  flex-wrap: wrap;
}
.ctFollowUpRunCardCaption {
  font-size: var(--ct-font-size-s);
  color: var(--ct-color-text-muted);
}
/* Nutzer-Auftrag 2026-09-11 (verpflichtender Prozess-Titel): prominent oben auf der mobilen
   Ergebniskarte — deutlich gewichtiger als die übrigen Metazeilen, aber kein zusätzlicher bunter
   Akzent (bestehendes professionelles Erscheinungsbild, siehe Auftrag Abschnitt 6). Leerer Titel
   (Altdaten ohne Prozess-Titel) rendert als leere Zeile statt eines Platzhaltertexts -- :empty
   blendet die Sektion dann vollständig aus. */
.ctFollowUpRunCardTitle {
  font-size: var(--ct-font-size-m);
  font-weight: 600;
  color: var(--ct-color-text-default);
  /* Nutzer-Auftrag 2026-09-12 (80-Zeichen-Erweiterung): visuell kontrolliert gekürzt, voller Titel
     über `tooltip` (siehe FollowUpRunCardStack.js) und den Ergebnisdetail-Dialog erreichbar. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ctFollowUpRunCardTitle:empty {
  display: none;
}
/* Nutzer-Fund 2026-09-09 (Runde 2, Live-Screenshot): Bewertung UND Aktion stehen jetzt in
   DERSELBEN Sektion (.ctFollowUpRunCardEval, siehe FollowUpRunCardStack.js) statt in zwei
   getrennten Blöcken mit je eigenem Rahmen/Sunken-Hintergrund — das war die Hauptursache der
   auffälligen Leerfläche. WCAG-Mindestmaß für die Aktions-Buttons bleibt erhalten (analog
   .ctResultCardFooter .sapMBtn), jetzt auf die neue gemeinsame Zeile bezogen. */
.ctFollowUpRunCardEval .sapMBtn {
  min-width: 44px;
  min-height: 44px;
}
/* Nutzer-Feedback 2026-08-21 (AdminSpaces "Bereich & Abschnitte"): die Datenzeilen der inneren
   sap.m.Table bringen ihre eigene UI5-Theme-Hintergrundfarbe mit (Hellgrau) statt der
   Kartenfläche oben (--ct-color-surface-card) zu folgen — dieselbe Ursache wie beim Launchpad-
   Inhaltsbereich (siehe erp-launchpad.css). NUR die Datenzeilen (.sapMLIB), NICHT die Kopfzeile
   (.sapMListTblHeader*) — die ist im Test-Tenant per Branding-CSS bewusst dunkel-aubergine
   eingefärbt (".sapMListTblHeaderCell { background-color: #483F59 !important }") und soll das
   bleiben. */
.ctDataTable .sapMLIB {
  background: transparent !important;
}
/* Nutzer-Feedback 2026-08-21 ("Meine Work Items", betrifft laut Nutzer viele Master-Detail-
   Apps mit type="Navigation"-Zeilen): die reservierten Kopfzeilen-Spalten für Auswahl-Highlight/
   Navigationspfeil (.sapMListTblHighlightCol/.sapMListTblNavCol/.sapMListTblNavigatedCol) bringen
   vom UI5-Theme eine EIGENE, undurchsichtige weiße Hintergrundfarbe mit — verdeckt die
   eigentlich korrekt eingefärbte Kopfzeile darunter (Tenant-Branding oder Theme-Default) als
   sichtbare weiße Lücke am rechten Rand. transparent statt einer festen Farbe, damit das für
   JEDES Tenant-Branding automatisch passt (analog der bereits bestehenden Regel für die
   Datenzeilen direkt darüber). */
.sapMListTblHeader .sapMListTblHighlightCol,
.sapMListTblHeader .sapMListTblNavCol,
.sapMListTblHeader .sapMListTblNavigatedCol {
  background: transparent !important;
}
/* Nutzer-Feedback 2026-08-21 ("Meine Vertretungen", betrifft aber jede App nach dem
   Tabellen-Standard aus CLAUDE.md — Toolbar direkt vor einer ct:DataTable, z. B. "+ Neue
   Vertretung"/Filter-Zeilen): sap.m.Toolbar bringt ihre eigene, leicht abweichende UI5-Theme-
   Hintergrundfarbe mit statt sich als EIGENE, dezent abgesetzte (graue) Fläche über der
   weißen Tabellenkarte zu zeigen — sichtbare Farbkante zwischen Toolbar und Tabellenkopf.
   :has() statt einer festen Klasse, damit JEDE nach diesem Standard gebaute Toolbar
   automatisch erfasst wird, auch rückwirkend.
   Nachschliff (Fehlversuch verifiziert 2026-08-21): ".sapMTB:has(+ .ctDataTable)" griff NICHT —
   sap.m.VBox (new-flex-Rendering, Klasse "sapMTBNewFlex") wickelt JEDES Kind-Control in einen
   EIGENEN ".sapMFlexItem"-Wrapper-Div, Toolbar und DataTable sind dadurch keine direkten
   Geschwister mehr (Live-DOM-Vermessung: nextElementSibling der Toolbar war null), sondern nur
   ihre jeweiligen Wrapper-Divs. Selektor deshalb eine Ebene höher angesetzt: der Wrapper VOR
   dem Wrapper, der irgendwo eine .ctDataTable enthält.
   Nachschliff (2): Nutzer-Klarstellung per markiertem Screenshot — die Toolbar soll NICHT das
   Kartenweiß der Tabelle annehmen (das war ein Missverständnis meinerseits, "grauer Ton" wurde
   fälschlich mit dem weißen Tabellenhintergrund gleichgesetzt), sondern sichtbar EIGENSTÄNDIG
   grau bleiben (--ct-color-surface-sunken) — als dritte, eigene Fläche neben Seiten-Blau und
   Tabellen-Weiß. */
.sapMFlexItem:has(+ .sapMFlexItem .ctDataTable) .sapMTB {
  background: var(--ct-color-surface-sunken) !important;
}

/* ── Listen-Redesign 2026-08-21 (neues Mockup): Zeilentrenner + Aktions-Icons ───────────── */

/* Dezenter Zeilentrenner statt der UI5-Theme-Standardlinie, sanfte Hover-Fläche wie im Mockup. */
.ctDataTable .sapMListTblRow {
  border-bottom: 1px solid var(--ct-color-border-divider);
}
.ctDataTable .sapMListTblRow:last-child {
  border-bottom: none;
}
.ctDataTable .sapMLIB.sapMLIBHoverable:hover {
  background: var(--ct-color-surface-sunken) !important;
}

/* Runder Hover-/Fokus-Hintergrund für Icon-Buttons in Tabellenzeilen (Bearbeiten/Löschen u. Ä.),
   analog dem Mockup. Bewusst einheitlich für alle Icon-Buttons (keine Einfärbung je Aktionstyp,
   siehe Listen-Redesign-Plan Punkt 6 — ohne Markup-Änderung an allen 41 Views nicht robust
   unterscheidbar). */
.ctDataTable .sapMBtn.sapMBtnTransparent:hover .sapMBtnInner,
.ctDataTable .sapMBtn.sapMBtnTransparent:focus-visible .sapMBtnInner {
  background: var(--ct-color-surface-sunken) !important;
  border-radius: var(--ct-radius-pill) !important;
}

/* ── ct.DataTable-Pagination (Listen-Redesign 2026-08-21) ──────────────────────────────── */

.ctDataTablePagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ct-spacing-s);
  padding: var(--ct-spacing-s) var(--ct-spacing-m);
  border-top: 1px solid var(--ct-color-border-divider);
  font-family: var(--ct-font-family);
  font-size: var(--ct-font-size-s);
  color: var(--ct-color-text-muted);
}

.ctDataTablePaginationPages {
  display: flex;
  align-items: center;
  gap: var(--ct-spacing-xxs);
}

.ctDataTablePaginationBtn {
  min-width: 2rem;
  height: 2rem;
  padding: 0 var(--ct-spacing-xs);
  border: 1px solid var(--ct-color-border-default);
  border-radius: var(--ct-radius-control);
  background: var(--ct-color-surface-card);
  color: var(--ct-color-text-default);
  font-family: var(--ct-font-family);
  font-size: var(--ct-font-size-s);
  cursor: pointer;
}
.ctDataTablePaginationBtn:hover:not(:disabled) {
  background: var(--ct-color-surface-sunken);
}
.ctDataTablePaginationBtn:disabled {
  color: var(--ct-color-action-disabled-text);
  cursor: default;
  opacity: 0.6;
}
.ctDataTablePaginationBtn--active {
  background: var(--ct-color-action-primary-background);
  border-color: var(--ct-color-action-primary-background);
  color: var(--ct-color-action-primary-text);
}
.ctDataTablePaginationBtn:focus-visible {
  outline: var(--ct-focus-width) solid var(--ct-focus-color);
  outline-offset: var(--ct-focus-offset);
}

.ctDataTablePaginationSize {
  height: 2rem;
  padding: 0 var(--ct-spacing-xs);
  border: 1px solid var(--ct-color-border-default);
  border-radius: var(--ct-radius-control);
  background: var(--ct-color-surface-card);
  color: var(--ct-color-text-default);
  font-family: var(--ct-font-family);
  font-size: var(--ct-font-size-s);
}
.ctDataTablePaginationSize:focus-visible {
  outline: var(--ct-focus-width) solid var(--ct-focus-color);
  outline-offset: var(--ct-focus-offset);
}

/* ── ct.ListCard (Listen-Redesign 2026-08-21) ───────────────────────────────
   Nutzer-Feedback: Primär-Button, Tableiste und Tabelle wirkten wie drei lose
   Flächen statt der EINEN durchgängigen Karte aus dem Mockup. .ctListCard fasst
   Aktions-Toolbar + IconTabBar (+ die darin verschachtelte ct:DataTable je
   Reiter) zu einer gemeinsamen weißen Fläche zusammen — die verschachtelte
   ct:DataTable verliert dafür ihre EIGENE Kartenoptik (siehe Override unten),
   sonst entstünde eine Karte-in-Karte-Optik mit doppeltem Schatten. */
.ctListCard {
  background: var(--ct-color-surface-card);
  border-radius: var(--ct-radius-card);
  box-shadow: var(--ct-shadow-card);
  overflow: hidden;
}
.ctListCardToolbar {
  background: transparent !important;
  padding: var(--ct-spacing-m) var(--ct-spacing-m) 0;
}
.ctListCard .ctDataTable {
  box-shadow: none;
  border-radius: 0;
}

/* Nutzer-Fund 2026-09-16 (Kostenauswertung): die Icon-Buttons der Listen-Toolbar (Alle auf-/
   zuklappen, Spalten) trugen noch das UI5-Standardblau — im nendaro-Design ist Blau keine
   Interaktionsfarbe. Gleiches Muster wie die Zeilen-Icon-Buttons in .ctDataTable: neutraler
   Icon-Ton, runder gesenkter Hover-Hintergrund. Klassen-Verdopplung für die Spezifität gegen das
   spät geladene UI5-Theme (siehe Kommentar bei .ctAppSidebarToggle). */
/* Gemessen 2026-09-16 (Puppeteer, Klassenketten im Live-DOM): der Button selbst trägt nur
   "sapMBtnBase sapMBtn sapMBarChild" — "sapMBtnDefault"/"sapMBtnTransparent" sitzen auf dem
   INNEREN Element (.sapMBtnInner). Ein Selektor über ".sapMBtn.sapMBtnDefault" greift deshalb
   nie. Daher typunabhängig über die Kette Button → Inner → Icon. */
.ctListCardToolbar .sapMBtn .sapMBtnInner .sapMBtnIcon.sapMBtnIcon,
.ctListCardToolbar .sapMBtn .sapMBtnInner {
  color: var(--ct-color-text-muted) !important;
}
.ctListCardToolbar .sapMBtn:hover .sapMBtnInner,
.ctListCardToolbar .sapMBtn:focus-visible .sapMBtnInner {
  background: var(--ct-color-surface-sunken) !important;
  border-radius: var(--ct-radius-pill) !important;
  border-color: transparent !important;
}
.ctListCardToolbar .sapMBtn .sapMBtnInner {
  border-color: transparent !important;
  background: transparent !important;
}
/* Nutzer-Fund 2026-09-28 („Neuer Flow" kaum lesbar): Emphasized-Buttons behielten die weiße
   Beschriftung aus Theme/Tenant-Branding (.sapMBtnEmphasized .sapMBtnContent), obwohl der
   Hintergrund oben transparent wird — weiß auf hell in jeder Listenkarte. Beschriftung daher wie
   das Icon neutral; die Hauptaktion hebt sich per Schriftstärke ab. */
.ctListCardToolbar .sapMBtn .sapMBtnInner .sapMBtnContent.sapMBtnContent {
  color: var(--ct-color-text-default) !important;
}
.ctListCardToolbar .sapMBtn .sapMBtnInner.sapMBtnEmphasized .sapMBtnContent.sapMBtnContent {
  font-weight: 600;
}

/* Umschalter (sap.m.SegmentedButton) im nendaro-Design — Nutzer-Fund 2026-09-16 (Kostenauswertung
   "Hierarchisch / Flach"): blaue Schrift und blauer Rahmen stammten aus dem UI5-Theme. Neutraler
   Rahmen und Text, gewählter Eintrag in Plum mit inversem Text. Kein Blau. Die Beschriftung darf
   nicht abgeschnitten werden (vorher "Hierarchi…" / "Flach pro …"): keine erzwungene Breite, die
   Einträge nehmen sich den Platz, den ihr Text braucht. */
.sapMSegB {
  border-radius: var(--ct-radius-pill) !important;
  border: 1px solid var(--ct-color-border-default) !important;
  background: var(--ct-color-surface-sunken) !important;
  padding: 2px !important;
  width: auto !important;
  display: inline-flex !important;
}
.sapMSegB .sapMSegBBtn,
.sapMSegB .sapMSegBBtn.sapMSegBBtnMixed,
.sapMSegB .sapMSegBBtn.sapMSegBBtnFocusable {
  background: transparent !important;
  border: none !important;
  border-radius: var(--ct-radius-pill) !important;
  color: var(--ct-color-text-muted) !important;
  font-weight: 500 !important;
  padding: 0 var(--ct-spacing-m) !important;
  white-space: nowrap !important;
  min-width: 0 !important;
  width: auto !important;
}
/* Gemessen 2026-09-16 (Live-DOM): das Kind des Eintrags ist ".sapMSegBBtnInnerWrapper" mit
   WEISSEM Hintergrund und eigener 8px-Rundung — es lag über dem Plum des gewählten Eintrags und
   machte den weißen Text unsichtbar; die Eck-Rundung erzeugte den Eindruck eines Kippschalters.
   Wrapper durchsichtig, Farbe geerbt, Rundung wie der Eintrag. */
.sapMSegB .sapMSegBBtn .sapMSegBBtnInnerWrapper,
.sapMSegB .sapMSegBBtn .sapMSegBBtnInner {
  background: transparent !important;
  color: inherit !important;
  /* Gemessen 2026-09-16: .sapMSegBBtnInner trägt "border: 1px solid rgb(0,100,217)" — der
     dünne blaue Ring um jeden Eintrag im Screenshot. Kein Rahmen auf den Innenelementen. */
  border: none !important;
  border-radius: var(--ct-radius-pill) !important;
  overflow: visible !important;
  text-overflow: clip !important;
  padding: 0 !important;
  box-shadow: none !important;
}
/* Höhe an die Eingabefelder daneben angleichen. Nachgemessen 2026-09-16: der Innen-Wrapper
   behielt 36px in einem 32px-Eintrag (ragte heraus), die Leiste selbst wuchs auf 44px durch
   eigene Mindesthöhe — beides hier ausdrücklich geerdet. */
.sapMSegB {
  height: auto !important;
  min-height: 0 !important;
  line-height: normal !important;
}
.sapMSegB .sapMSegBBtn {
  height: 2rem !important;
  line-height: 2rem !important;
  min-height: 0 !important;
}
.sapMSegB .sapMSegBBtn .sapMSegBBtnInnerWrapper,
.sapMSegB .sapMSegBBtn .sapMSegBBtnInner {
  height: 100% !important;
  min-height: 0 !important;
  line-height: inherit !important;
}
.sapMSegB .sapMSegBBtn:hover {
  color: var(--ct-color-text-default) !important;
}
.sapMSegB .sapMSegBBtn.sapMSegBBtnSel,
.sapMSegB .sapMSegBBtn.sapMSegBBtnSel:hover {
  background: var(--ct-color-brand-plum) !important;
  color: var(--ct-color-text-inverse) !important;
  box-shadow: none !important;
}
.sapMSegB .sapMSegBBtn:focus-visible {
  outline: 2px solid var(--ct-color-brand-plum-soft) !important;
  outline-offset: 1px !important;
}

/* Kachel-KPI-Zahl (ADR-031/033, Redesign 2026-09-01, 2. Anlauf nach Nutzer-Feedback zu den
   vorherigen zwei Floating-Badges) -- grosse Zahl + kleines Label im Kachel-Body, analog dem
   SAP-Fiori-Launchpad-Vorbild ("13" gross + "Tasks" klein), aber bewusst modern/dezent statt
   SAP-Blau/-Boxig: Coral-Akzent nur bei ungelesenen Elementen (--new), sonst neutraler Text-Ton
   (--total). Immer gerendert, nur per --empty-Klasse ausgeblendet (siehe AppTile.ts-Kommentar
   zum inkrementellen apiVersion-2-Rendering). */
/* Nutzer-Feedback 2026-09-01 (3. Anlauf): im Textfluss unter dem Titel sprengte die KPI-Zahl bei
   zweizeiligem Titel die feste Kachel-Hoehe (Text wurde unten abgeschnitten, .ctAppTile hat
   overflow:hidden) UND sollte ohnehin an den rechten Rand statt linksbuendig unter den Titel.
   Absolut positioniert (nimmt keinen Platz im Fluss weg, kollidiert dadurch auch nicht mit
   zweizeiligen Titeln) unten rechts, Wert ueber Label rechtsbuendig gestapelt. */
.ctAppTileKpi {
  position: absolute;
  right: 0.7rem;
  bottom: 0.6rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1;
  pointer-events: none;
  max-width: calc(100% - 1.4rem);
}
.ctAppTileKpi--empty {
  display: none;
}
/* Nutzer-Fund 2026-09-03: die absolut positionierte KPI-Zahl unten rechts kollidiert bei
   zweizeiligem Untertitel mit dessen zweiter Zeile (Text lief bis zum Rand, Zahl lag optisch
   auf dem Text). Untertitel reserviert daher Platz am rechten Rand, aber NUR wenn tatsaechlich
   eine (nicht-leere) KPI direkt davor gerendert wird — Kacheln ohne Zaehler (die meisten)
   bleiben unveraendert. */
.ctAppTileKpi:not(.ctAppTileKpi--empty) + .ctAppTileSubtitle {
  padding-right: 2.75rem;
}
/* Nutzer-Feedback 2026-09-01: die Coral-Faerbung bei "neu > 0" (--new) wieder entfernt — EIN
   einheitlicher, neutraler Textton unabhaengig davon, ob es neue Elemente gibt. Die --new/--total-
   Modifikator-Klassen bleiben auf dem Wurzelelement bestehen (AppTile.ts), falls spaeter erneut
   eine Unterscheidung gewuenscht wird, wirken aktuell aber beide gleich. */
.ctAppTileKpiValue {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: var(--ct-color-text-muted);
}
.ctAppTileKpiLabel {
  font-size: 0.65rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--ct-color-text-muted);
  margin-top: 0.1rem;
}
.ctAppTile--image .ctAppTileKpiLabel, .ctAppTile--video .ctAppTileKpiLabel, .ctAppTile--hasImage .ctAppTileKpiLabel {
  color: var(--ct-color-text-inverse);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

/* Suchergebnis "Hilfeseiten-Treffer" (Nutzer-Auftrag 2026-08-27, Experimental) -- optisch klar
   von einer echten App-Kachel abgesetzt: gestrichelter Rahmen + gedaempfter Hintergrund statt
   der uebrigens ct.AppTile-eigenen Badge-Farbflaeche. */
.ctAppTile--helpResult {
  border-style: dashed;
  background: var(--ct-color-surface-sunken);
}
.ctAppTile--helpResult .ctAppTileIcon {
  background: transparent !important;
}

/* ── ct.ResultCarousel (Kartenband-Redesign, Nutzer-Auftrag 2026-09-04) ──────────────────────
   Netflix-artiges horizontales Kartenband — CSS Scroll Snap trägt Maus/Trackpad/Touch-Wischen
   OHNE eigenen JS-Zusatzcode, die Pfeil-Buttons rufen dieselbe Scroll-API nur für Desktop/
   Tastatur-unabhängige Bedienung zusätzlich auf. */
/* Nutzer-Auftrag 2026-09-08 (Mockup-Feinschliff, Runde 4): das Karussell bildet jetzt einen
   eigenständigen, ruhigen Arbeitsbereich (hellgrauer Grund + dezenter Rahmen) statt auf der
   nahezu weißen Seitenfläche zu stehen — grenzt sich klar vom Seitenhintergrund ab, ohne wie ein
   zusätzlicher schwerer Container zu wirken (derselbe Radius/Ton wie andere ruhige Flächen,
   `--ct-color-surface-sunken`, bereits u. a. für Badges/Zähler-Pillen verwendet). Die Pfeile
   sitzen dadurch automatisch INNERHALB dieses Bereichs (Innenabstand), statt lose auf der
   Seitenfläche zu stehen. */
/* Nutzer-Fund 2026-09-08 (Mockup-Feinschliff, Runde 5): der Container war bislang selbst eine
   Flex-Reihe aus [Pfeil][Spur][Pfeil] — jeder Pfeil beanspruchte dadurch eine EIGENE, 44px breite
   Layout-Spalte samt Gap, sichtbar als breite leere Fläche links/rechts der Karten und als Ursache
   dafür, dass die Karten-Breitenrechnung (§6, drei Karten pro Reihe) nie exakt aufging — die Spur
   hatte schlicht nie die volle Containerbreite zur Verfügung. Pfeile liegen jetzt als absolut
   positionierte Overlays AUF der Spur (wie im Ziel-Mockup), die Spur selbst nimmt die gesamte
   Containerbreite ein; ein Innenabstand auf der Spur (siehe unten) hält die äußerste Karte dabei
   frei von den Pfeil-Kreisen. */
.ctResultCarousel {
  /* Nutzer-Auftrag 2026-09-11 (responsive Überarbeitungsrunde): Kartenanzahl richtet sich seit
     hier nach der TATSÄCHLICH VERFÜGBAREN Trackbreite (Container Query), nicht mehr nach der
     Viewport-Breite — genau das behebt den gemeldeten Bug ("3 Karten auf Kachel-Kachel gepresst,
     Button-Text abgeschnitten"), weil Viewport-Breite bei eingeklappter/ausgeklappter Sidebar
     nichts über die tatsächlich verfügbare Content-Breite aussagt. Ersetzt die bisherigen
     @media(max-width:900px)/@media(max-width:560px)-Regeln unten in diesem Abschnitt. Die
     Touch-Mobile-Regel (pointer:coarse) bleibt bewusst @media, da Container Queries keine
     Pointer-Art abfragen können — sie steht im Quelltext weiterhin NACH diesen @container-Regeln
     und gewinnt dort dank Kaskadenreihenfolge unverändert (siehe deren Kommentar). */
  container-type: inline-size;
  container-name: ct-result-carousel;
  position: relative;
  /* Bugfix (Live-Puppeteer-Fund 2026-09-08): ohne border-box addierte der Browser das eigene
     `padding` ZUSÄTZLICH zu `width:100%` — die Box wurde dadurch ca. 2× `--ct-spacing-m` breiter
     als ihr Elternelement, der rechte Pfeil (position:absolute, `right: var(--ct-spacing-xs)`)
     rutschte dadurch über den sichtbaren Seitenrand hinaus (praktisch unsichtbar, obwohl
     technisch klickbar). */
  box-sizing: border-box;
  width: 100%;
  /* Nutzer-Auftrag 2026-09-14 (zurückgenommen ggü. Runde 8 vom 2026-09-08): der damals bewusst
     dunklere --ct-color-surface-workarea-Ton samt Rahmen wirkte wie ein eigener, unerwünschter
     Außenkasten um das gesamte Karussell. Geht jetzt nahtlos in den helleren Seitenhintergrund
     über (--ct-color-surface-page, derselbe Token wie [id$="inboxAppPage"] in erp-launchpad.css)
     — die einzelnen Karten (.ctResultCard) tragen ihr eigenes, davon unabhängiges weißes
     background + Schatten/Rahmen und bleiben dadurch unverändert klar erkennbar. */
  background: var(--ct-color-surface-page);
  /* Nutzer-Fund 2026-09-14 (Live-Screenshot, zweiter Nachschliff): anders als bei
     .ctFollowUpRunsDataTable soll DIESER Bereich ganz ohne eigene Kontur bleiben — die einzelnen
     Eingang-Kacheln (.ctResultCard) tragen bereits ihren eigenen Rahmen/Schatten, ein zusätzlicher
     Rahmen um das gesamte Karussell wäre hier redundant. */
  border: none;
  border-radius: var(--ct-radius-card);
  padding: var(--ct-spacing-m);
}
.ctResultCarouselTrack {
  display: flex;
  /* Bugfix (Nutzer-Fund 2026-09-08, Regression nach ADR-042): Flex-Default ist align-items:
     stretch — jede Karte einer Reihe wurde dadurch auf die Höhe der höchsten Nachbarkarte
     gezwungen (siehe .ctResultCard-Kommentar). Karten richten sich jetzt oben aus, jede behält
     ihre eigene, inhaltsabhängige Höhe. */
  align-items: flex-start;
  gap: var(--ct-spacing-m);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scroll-padding-inline: var(--ct-spacing-m);
  /* Innenabstand links/rechts hält Raum für die jetzt überlagernden Pfeil-Kreise frei (siehe
     Kommentar oben), damit keine Karte teilweise hinter einem Pfeil verschwindet.
     Nutzer-Auftrag 2026-09-12 ("stärkere Überlappung ausdrücklich erwünscht"): von 2.75rem auf
     2rem reduziert — der Pfeil (44px/2.75rem Durchmesser) überlappt dadurch spürbar mehr in den
     Kartenrand, verdeckt aber weiterhin keinen fachlichen Karteninhalt (nur den unbedruckten
     Kartenrand/-innenabstand). */
  padding-block: 2px;
  padding-inline: var(--ct-spacing-xl);
  /* Übergang für die Verkleinerung unten (--atStart/--atEnd), damit der Rand beim Scrollen an den
     Anschlag sanft einschrumpft statt abrupt zu springen. */
  transition: padding-inline-start 0.15s ease, padding-inline-end 0.15s ease;
  flex: 1 1 auto;
  min-width: 0;
  /* Nutzer-Auftrag 2026-09-08 ("ruhigeres, business-orientiertes Erscheinungsbild"): sichtbaren
     Browser-Scrollbar vollständig entfernen (vorher nur "thin") — die Pfeile UND das
     angeschnittene nächste Karte-Signal reichen als Navigationshinweis, Scrollbarkeit per Maus/
     Trackpad/Touch/Tastatur bleibt unverändert (native Scroll-Snap, keine JS-Emulation). */
  scrollbar-width: none;
}
.ctResultCarouselTrack::-webkit-scrollbar {
  display: none;
}
/* Nutzer-Fund 2026-09-08 ("breiter Streifen links beim Ganz-nach-links-Blättern"): am jeweiligen
   Anschlag ist der zugehörige Pfeil disabled (kein Karteninhalt mehr dahinter zu schützen) — die
   volle 2.75rem-Reserve dort ist dann unnötige Leerfläche. Auf ein knappes Mindestmaß reduziert
   (Klassen werden von ResultCarousel.ts#_updateArrowState anhand des scroll-Events gepflegt),
   OHNE auf 0 zu gehen — der disabled-Pfeil bleibt sichtbar (nur ausgegraut, siehe
   .ctResultCarouselArrow--disabled) und braucht weiterhin etwas Luft zur ersten/letzten Karte. */
/* Nutzer-Auftrag 2026-09-12 (Layout-Korrektur "Veröffentlichung", "stärkere Überlappung
   ausdrücklich erwünscht"): von --ct-spacing-xl (2rem) auf --ct-spacing-s (0.75rem) reduziert —
   der jeweils dort disabled/unwirksame Pfeil braucht nur noch minimal Abstand zur Karte, statt
   einer vollen zweiten Pfeil-Reserve. Deutlich stärkere Überlappung mit dem Kartenrand als zuvor. */
.ctResultCarouselTrack--atStart {
  padding-inline-start: var(--ct-spacing-s);
}
.ctResultCarouselTrack--atEnd {
  padding-inline-end: var(--ct-spacing-s);
}
/* Nutzer-Auftrag 2026-09-12: weder nach links noch nach rechts scrollbar (genau eine Karte oder
   alle Karten passen bereits vollständig hinein) — keinerlei Pfeil-Reserve mehr nötig, die Spur
   bekommt denselben knappen Innenabstand wie der äußere Arbeitsbereich selbst. */
.ctResultCarousel--noNav .ctResultCarouselTrack {
  padding-inline: var(--ct-spacing-s);
}
.ctResultCarouselItem {
  scroll-snap-align: start;
  flex: 0 0 auto;
  /* Nutzer-Auftrag 2026-09-11 (responsive Überarbeitungsrunde, Anforderung 5): "keine Karte darf
     als extrem schmaler Streifen erscheinen" — Untergrenze deckungsgleich mit
     LayoutBreakpoints.CARD_MIN_WIDTH (JS, für die Kartenanzahl-Berechnung). Der Track scrollt
     ohnehin horizontal, ein Unterschreiten dieser Breite ist nie nötig — lieber eine Karte weniger
     gleichzeitig sichtbar als eine unlesbar schmale. */
  min-width: 260px;
  /* Nutzer-Fund 2026-09-08 (Runde 5): viewport-relative Breite (vw/clamp) ergab je nach
     Bildschirmgröße mal zu wenige, mal zu viele Karten — verlangt ist stattdessen eine an der
     tatsächlich verfügbaren SPUR-Breite (Containerbreite) orientierte Rechnung: exakt drei Karten
     auf Desktop, aus verfügbarer Breite minus zwei Zwischenräumen, geteilt durch drei. Prozent-
     werte einer Flex-Kind-Breite beziehen sich auf die Content-Box des Flex-Containers (hier die
     Spur), Padding/Pfeil-Freiraum ist also bereits automatisch herausgerechnet. */
  width: calc((100% - 2 * var(--ct-spacing-m)) / 3);
}
/* Compact (Nutzer-Auftrag 2026-09-11, LayoutBreakpoints.COMPACT_MAX_WIDTH = 1023px, hier als
   Container-Breite statt Viewport-Breite): ein bis zwei Karten, je nachdem wie viel Trackbreite
   TATSÄCHLICH übrig ist (schmales Desktopfenster, Sidebar ausgeklappt ODER Tablet). Ersetzt die
   frühere starre @media(max-width:900px)-Zwei-Karten-Regel, die bei ausgeklappter Sidebar und
   z.B. 1024-1280px Viewport-Breite trotzdem IMMER drei (dann zu schmale) Karten erzwang. */
@container ct-result-carousel (max-width: 1023px) {
  .ctResultCarouselItem { width: calc((100% - 1 * var(--ct-spacing-m)) / 2); }
  /* Nutzer-Auftrag 2026-09-08: dieselbe gemeinsame Kartenhöhe-Variable, aber kompakter je
     Layoutzustand (siehe tokens.css) — "identisch INNERHALB einer responsiven Ansicht", nicht
     zwingend identisch ÜBER alle Ansichten hinweg. Auf .ctResultCarousel selbst statt :root
     gesetzt (Container-Query-Regeln matchen nur Elemente INNERHALB des benannten Containers,
     :root/html liegt außerhalb) — Karten erben die Variable normal über die DOM-Verschachtelung. */
  .ctResultCarousel { --ct-result-card-height: 20rem; }
}
/* Sehr schmal (Tablet Hochformat/kleines Fenster): nur noch eine Karte, mit Anschnitt der
   nächsten, damit erkennbar bleibt, dass horizontal weitergeblättert werden kann. */
@container ct-result-carousel (max-width: 560px) {
  .ctResultCarouselItem { width: 82%; }
  .ctResultCarouselTrack { scroll-snap-type: x mandatory; padding-inline: var(--ct-spacing-s); }
  .ctResultCarousel { --ct-result-card-height: 19rem; }
}
/* Nutzer-Auftrag 2026-09-09 (Mobile-Umbau "Business Flows"): EXAKT derselbe Breakpoint wie der
   Sidebar->BottomNav-Wechsel (siehe oben, Zeile 1143, "Sidebar/Bottom-Nav-Weiche") statt der
   beiden vorherigen, unabhängig entstandenen 900px/560px-Regeln (bleiben für Maus-Geräte
   unverändert bestehen, siehe deren Kommentare). Für Touch-Geräte unterhalb dieses Breakpoints
   überschreibt diese Regel (steht bewusst NACH den obigen, gleiche Selektor-Spezifität → letzte
   Regel im Quelltext gewinnt) die Karten-Breite auf einen mobilen Einzelkarten-Anschnitt.
   Zwischen 767.98px und 900px (oberhalb dieses Breakpoints) bleibt die bestehende
   2-Spalten-Tablet-Ansicht unverändert, da diese Regel dort nicht matched. */
@media (max-width: 767.98px) and (pointer: coarse), (max-height: 499.98px) and (max-width: 960px) and (pointer: coarse) {
  /* Bugfix (Runde 3, Live-Fund "Karte asymmetrisch/rechts abgeschnitten"): `85vw` bemaß die
     Kartenbreite relativ zum GESAMTEN Viewport und ignorierte dabei die kumulierten seitlichen
     Einrückungen aus Panel-Margin (sapUiSmallMargin), dem .ctResultCarousel-Padding (siehe unten,
     jetzt ebenfalls mobil reduziert) und dem Track-eigenen padding-inline — die Karte war dadurch
     breiter als der tatsächlich verfügbare Platz und ragte rechts heraus, während der Rest links
     als Lücke/Trennlinie erschien. Jetzt wie auf Desktop/Tablet PROZENTUAL relativ zur
     Track-Content-Box berechnet (siehe Kommentar bei der Desktop-Basisregel oben) — kann dadurch
     nie breiter als der verfügbare Platz werden, unabhängig von Panel-/Carousel-/Track-Padding. */
  /* Nutzer-Auftrag 2026-09-09 (Runde 4): Runde 3 beließ hier bewusst eine kleine 3rem-Anschnitt-
     Reserve — jetziger Live-Befund will KEINEN Anschnitt mehr (nächste Karte ragt sichtbar in den
     Viewport). Auf die volle Track-Content-Breite gesetzt: die zweite Karte beginnt dadurch erst
     nach dem Track-`gap` (var(--ct-spacing-m)) außerhalb des sichtbaren Bereichs, unabhängig von
     Panel-/Carousel-/Track-Padding (dieselbe prozentuale Logik wie Desktop/Tablet oben). */
  .ctResultCarouselItem { width: 100%; }
  /* Nutzer-Fund 2026-09-09 (Runde 2, Live-Screenshot): Pfeile sind in diesem Breakpoint komplett
     ausgeblendet (siehe .ctResultCarouselArrow-Regel weiter unten) — das ursprüngliche
     `padding-inline: var(--ct-spacing-s)` war dafür ursprünglich als kleine Restreserve gedacht,
     wirkte am echten Gerät aber als unnötiger Leerrand. Auf ein knappes Minimum reduziert (nur
     noch der reguläre Kartenabstand `--ct-spacing-xs`, kein Pfeil-Zuschlag mehr).
     Runde 3: `scroll-padding-inline` blieb bisher IMMER bei `var(--ct-spacing-m)` (Desktop-Wert,
     Basisregel oben) — auf Mobile weicht das sichtbare Padding jetzt davon ab, Snap-Ziel und
     sichtbarer Rand liefen dadurch auseinander. Auf denselben reduzierten Wert gesetzt. */
  .ctResultCarouselTrack {
    scroll-snap-type: x mandatory;
    padding-inline: var(--ct-spacing-xs);
    scroll-padding-inline: var(--ct-spacing-xs);
  }
  /* Runde 3: der äußere Arbeitsbereich-Rahmen (.ctResultCarousel) reservierte bisher ungeprüft
     denselben großzügigen Desktop-Innenabstand (--ct-spacing-m, 1rem) auch mobil — zusätzlich zum
     Track-eigenen Padding. Nur horizontal reduziert (nicht padding-block), das vertikale
     Rahmen-Polster oben/unten bleibt für die optische Konsistenz unverändert. */
  .ctResultCarousel { padding-inline: var(--ct-spacing-xs); }
  :root { --ct-result-card-height: 19rem; }
}
.ctResultCarouselArrow {
  /* Nutzer-Fund 2026-09-08 (Runde 5): overlay statt eigener Flex-Spalte (siehe Kommentar bei
     .ctResultCarousel) — vertikal auf halber Spurhöhe, horizontal am Rand des Arbeitsbereichs. */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Nutzer-Auftrag 2026-09-08: optisch kleiner/zurückhaltender (schwächerer Schatten, kein
     Standard-Rand, dezenterer Grund) — die Touch-/Klickfläche bleibt bei 44px (WCAG-Mindestmaß,
     min-width/min-height), nur die SICHTBARE Kreisfläche/das Icon sind kompakter.
     Bugfix (Live-Puppeteer-Fund 2026-09-08): transparenter Border + 92%-heller Kreis auf hellem
     Karussell-/Kartengrund + sehr schwacher Schatten (6% Opazität) waren im Ruhezustand auf zwei
     unabhängigen Screenshots praktisch NICHT erkennbar (nur bei :hover sichtbar) — echter, wenn
     auch dezenter Rahmenton statt transparent, kräftigerer Schatten. */
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  border: 1px solid var(--ct-color-border-default);
  background: var(--ct-color-surface-card);
  box-shadow: var(--ct-shadow-card-hover);
  color: var(--ct-color-text-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  font-family: var(--ct-font-family);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ctResultCarouselArrow--prev { left: var(--ct-spacing-xs); }
.ctResultCarouselArrow--next { right: var(--ct-spacing-xs); }
.ctResultCarouselArrow:hover {
  /* Konsistent mit .ctResultCard:hover (Plum statt Cyan) — Cyan ist an anderer Stelle für den
     Auswahlzustand reserviert, siehe dortiger Kommentar. */
  border-color: var(--ct-color-brand-plum-soft);
  color: var(--ct-color-text-default);
}
.ctResultCarouselArrow:focus-visible {
  outline: var(--ct-focus-width) solid var(--ct-focus-color);
  outline-offset: var(--ct-focus-offset);
}
/* Nutzer-Auftrag 2026-09-04 (Feinschliff): Pfeil nur "aktiv", solange in diese Richtung noch
   gescrollt werden kann (Zustand wird von ResultCarousel.ts#_updateArrowState anhand des
   scroll-Events gepflegt) — ausgegraut statt entfernt, damit Fokusreihenfolge/Tab stabil bleibt. */
.ctResultCarouselArrow--disabled {
  opacity: 0.35;
  pointer-events: none;
}
/* Nutzer-Auftrag 2026-09-12: komplett ausgeblendet statt nur ausgegraut, wenn in KEINE Richtung
   navigiert werden kann (siehe ResultCarousel.ts#_updateArrowState) — höhere Spezifität
   (Eltern+Kind-Klasse) gewinnt zuverlässig gegen die obige `display:flex`-Basisregel. */
.ctResultCarousel--noNav .ctResultCarouselArrow {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .ctResultCarouselTrack { scroll-behavior: auto; }
  .ctResultCarouselArrow--disabled { transition: none; }
}
/* Nutzer-Auftrag 2026-09-09 (Mobile-Umbau "Business Flows"): Vorgabe erlaubt, die Pfeile auf
   kleinen Touchgeräten auszublenden — Wisch-Geste bleibt über die bestehende Scroll-Snap-Mechanik
   in ResultCarousel.ts voll funktionsfähig. MUSS als eigene Regel NACH dem gesamten
   .ctResultCarouselArrow-Block oben stehen (gleiche Selektor-Spezifität wie dessen
   `display: flex`, Zeile ~2198 — bei gleicher Spezifität gewinnt die im Quelltext SPÄTERE Regel,
   unabhängig davon, welche der beiden Regeln in einer Media-Query steht; als Teil des früheren
   .ctResultCarouselItem-Blocks weiter oben griff dieser Override deshalb NIE, siehe Live-Fund). */
@media (max-width: 767.98px) and (pointer: coarse), (max-height: 499.98px) and (max-width: 960px) and (pointer: coarse) {
  .ctResultCarouselArrow { display: none; }
}

/* ── ct.ResultCard (Kartenband-Redesign, Nutzer-Auftrag 2026-09-04) ──────────────────────────
   Sechs Darstellungsmuster über .ctResultCard--image/--text/--imageAndText/--document/
   --structuredData/--custom (siehe ResultCard.ts-Renderer-Registry). Gemeinsame Kartenoptik
   (Radius/Schatten) analog .ctAppTile/.ctDataTable.
   Historie 2026-09-08 (zwei aufeinanderfolgende Korrekturen):
   1) `height: 100%` zwang JEDE Karte in Kombination mit dem Flex-Default `align-items: stretch`
      des Carousel-Tracks auf die Höhe der HÖCHSTEN Nachbarkarte derselben Reihe — bei einer
      Bild+Text-Karte neben einer kompakten Dokument-/Struktur-/Custom-Karte entstand dadurch
      riesige Leerfläche in den kompakten Karten. Zunächst ersatzlos entfernt (natürliche,
      inhaltsabhängige Höhe je Karte).
   2) Nutzer-Fund (Live-Screenshot, Folgeauftrag): ohne JEDE feste Höhe lagen die Karten-Footer
      nicht mehr auf einer gemeinsamen Grundlinie — optisch uneinheitlich. Jetzt EINE gemeinsame,
      responsive Design-Variable (`--ct-result-card-height`, tokens.css) statt entweder "100% des
      gestreckten Nachbarn" (Fehler 1) oder "gar keine Vorgabe" (Fehler 2) — alle Karten sind
      dadurch gleich hoch, OHNE von ihren Nachbarn abhängig zu sein (jede Karte bekommt denselben
      Wert unabhängig gesetzt, kein Flex-Stretch-Mechanismus mehr im Spiel). Der Inhalt wird PRO
      RENDERER auf diese Höhe hin begrenzt (Zeilen-Clamping/max-height), nicht umgekehrt. */
.ctResultCard {
  position: relative;
  display: flex;
  flex-direction: column;
  height: var(--ct-result-card-height);
  background: var(--ct-color-surface-card);
  /* Nutzer-Fund 2026-09-08 (Mockup-Feinschliff, Runde 5): der Rahmen wirkte gegenüber dem Mockup
     zu kräftig/dunkel — die eigentliche optische Trennung zur Umgebung soll über den Schatten
     laufen, der Rahmen selbst nur noch eine sehr helle Kontur sein (--ct-color-border-divider
     statt --ct-color-border-default). */
  border: 1px solid var(--ct-color-border-divider);
  border-radius: var(--ct-radius-card);
  box-shadow: var(--ct-shadow-card);
  overflow: hidden;
  cursor: pointer;
  font-family: var(--ct-font-family);
  text-align: start;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* Nutzer-Fund 2026-09-08 (Mockup-Feinschliff, Runde 5): Hover soll den SCHATTEN anheben (Karte
   wirkt "angehoben"), nicht den Rahmen dunkel einfärben — ein dunklerer Rahmen bei bloßem Hover
   wirkte in Live-Screenshots wie ein zusätzlicher Auswahl-Zustand. Rahmenfarbe bleibt unverändert,
   nur die Erhebung (Schatten) verstärkt sich. */
.ctResultCard:hover {
  box-shadow: var(--ct-shadow-card-hover);
}
.ctResultCard:focus-visible {
  outline: var(--ct-focus-width) solid var(--ct-focus-color);
  outline-offset: var(--ct-focus-offset);
}
/* Nutzer-Auftrag 2026-09-04: visuell UND programmatisch eindeutiger "ausgewählt"-Zustand, wenn
   per Folgeaktions-Badge auf diese Karte gefiltert wird (siehe InboxApp.controller.js
   #_filterFollowUpRuns) — programmatisch über aria-pressed (Renderer), visuell über den
   Marken-Akzent statt einer reinen Farbänderung (bleibt auch ohne Farbwahrnehmung als dickerer,
   andersfarbiger Rahmen + Haken-Symbol erkennbar, siehe ::after unten).
   Nutzer-Fund 2026-09-08 (Mockup-Feinschliff): Cyan wirkte zu kräftig UND kollidierte optisch mit
   dem ebenfalls violett-blauen Tastaturfokusring (`--ct-focus-color`) — auf Plum (dunkles
   Grauviolett) als DÜNNEN Rahmen + sehr leichte Hintergrundtönung umgestellt.
   Bugfix (Live-Test 2026-09-08): `--ct-color-brand-plum` und `--ct-focus-color` sind im
   Token-System TECHNISCH derselbe Hex-Wert (#483f59, beide leiten von --ct-palette-violet-700
   ab) — Auswahlrahmen und Fokusring waren dadurch farblich IDENTISCH, nur über Randbreite
   unterscheidbar. `--ct-color-brand-plum-soft` (helleres Grauviolett) für die Auswahl statt
   `--ct-color-brand-plum` — jetzt auch farblich klar vom kräftigeren Fokus-Violett getrennt. */
.ctResultCard--selected {
  border-color: var(--ct-color-brand-plum-soft);
  border-width: 1px;
  background: color-mix(in srgb, var(--ct-color-brand-plum-soft) 6%, var(--ct-color-surface-card));
  box-shadow: var(--ct-shadow-card);
}
.ctResultCard--selected::after {
  content: '✓';
  position: absolute;
  top: var(--ct-spacing-xs);
  right: var(--ct-spacing-xs);
  z-index: 3;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ct-color-brand-plum-soft);
  color: var(--ct-color-text-inverse);
  font-size: 0.85rem;
  font-weight: 700;
}
/* Nutzer-Auftrag 2026-09-09 (Mobile-Umbau, Runde 4): der Haken soll auf der mobilen
   Eingangskarte vollständig entfallen — ein dezenter Rahmen genügt, wenn tatsächlich ein
   aktiver Filter für diese Karte besteht (Code-Audit bestätigt: `selected` wird ausschließlich
   über einen expliziten Filter-Badge-Klick/Select-Change/"Filter aufheben" gesetzt, NIE durch
   Scrollen/Fokus/Dialog-Öffnen). Desktop behält den Haken unverändert (Basisregel oben bleibt
   unangetastet) — muss NACH der Basisregel stehen (gleiche Selektor-Spezifität, spätere Regel
   gewinnt), analog dem bereits etablierten Muster bei .ctResultCarouselArrow. */
@media (max-width: 767.98px) and (pointer: coarse), (max-height: 499.98px) and (max-width: 960px) and (pointer: coarse) {
  .ctResultCard--selected::after { display: none; }
}
/* Nutzer-Auftrag Abschnitt 2 (Nachtrag 2026-09-07): Inhaltstyp-Badge "Text"/"Bild"/"Bild + Text"
   — außerhalb des Medienbereichs eine ruhige, dezente Pille über dem Titel; auf einem Bild
   (imageOverlay) stattdessen mit halbtransparentem dunklem Grund (siehe --onMedia), da der helle
   Standard-Badge dort auf hellen Bildbereichen unlesbar wäre. */
.ctResultCardTypeBadge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 0.15rem var(--ct-spacing-s);
  margin: var(--ct-spacing-s) var(--ct-spacing-m) 0;
  border-radius: var(--ct-radius-pill, 999px);
  /* Nutzer-Auftrag 2026-09-08 (Mockup-Feinschliff, Runde 4): einheitlicher heller Blaugrau-Ton
     für ALLE Ergebnistypen statt eines neutralen Grau — wiederverwendet die bereits vorhandenen
     Info-Status-Tokens (dieselbe Farbfamilie wie z. B. Info-Badges an anderer Stelle im Projekt),
     KEIN neues Farbpaar eingeführt. Kein kräftiger Farbcode je Typ (Auftrag Abschnitt 5). */
  background: var(--ct-color-status-information-background);
  border: 1px solid transparent;
  color: var(--ct-color-status-information-text);
  /* Nutzer-Fund 2026-09-08 (Mockup-Feinschliff): normale Schreibweise statt GROSSBUCHSTABEN
     ("Strukturierte Daten" statt "STRUKTURIERTE DATEN") — wirkte im Vergleich zum Mockup zu
     laut/technisch für eine sachliche Enterprise-Anwendung. */
  font-size: var(--ct-font-size-xs, 0.6875rem);
  /* Nutzer-Auftrag 2026-09-08 (Runde 8, "Fettschrift reduzieren"): Badges/Pillen -> Medium. */
  font-weight: var(--ct-font-weight-medium, 500);
}
.ctResultCardTypeBadge--onMedia {
  position: absolute;
  z-index: 2;
  top: var(--ct-spacing-s);
  left: var(--ct-spacing-s);
  margin: 0;
  background: rgba(24, 15, 31, 0.55);
  border-color: transparent;
  color: var(--ct-color-text-inverse);
  backdrop-filter: blur(2px);
}
.ctResultCardMedia {
  position: relative;
  flex: 0 0 auto;
  height: 10rem;
  background: var(--ct-color-surface-soft);
}
.ctResultCardMedia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Nutzer-Auftrag 2026-09-09 (Mobile-Umbau, Runde 2 → Runde 3 zurückgenommen): Runde 2 stellte
   mobil auf `object-fit:contain` um, um eingebetteten Bildtext vor Beschnitt zu schützen — das
   erzeugte am echten Gerät sichtbare linke/rechte Farbbalken (Live-Screenshot Runde 3), was
   optisch unerwünscht ist. Nutzerentscheidung Runde 3: mobile Kartenvorschau soll randfüllend
   sein wie der Desktop (`cover`, siehe Basisregel oben, gilt jetzt wieder einheitlich für
   Desktop UND Mobile) — Beschnitt oben/unten wird in Kauf genommen, das vollständige Bild bleibt
   über den Detaildialog erreichbar. Kein Metadatenfeld für Foto-vs-Grafik vorhanden (weiterhin
   unverändert, siehe ADR-033-Blockschema), daher kein Sonderfall mehr nötig. */
/* Nutzer-Fund 2026-09-08 (Priorität 2/3): kein `min-height` mehr — die Karte selbst hat jetzt
   eine feste, gemeinsame Höhe (`--ct-result-card-height`), der Medienbereich füllt per Flex-Grow
   exakt den nach Footer (und ggf. Text darunter) verbleibenden Rest davon aus. Ein zusätzliches
   `min-height` hätte diesen Rest sonst überschreiben und die Karte wieder ungleich hoch machen
   können. `min-height: 0` ist der Standard-Flexbox-Fix, damit der Bereich bei Bedarf auch
   SCHRUMPFEN darf statt seinen Inhalt zu überlaufen. */
.ctResultCardMedia--overlay {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}
.ctResultCardOverlayScrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(24, 15, 31, 0.85) 0%, rgba(24, 15, 31, 0.45) 55%, rgba(24, 15, 31, 0.05) 85%, rgba(24, 15, 31, 0) 100%);
}
.ctResultCardOverlayText {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 2;
  padding: var(--ct-spacing-m);
  color: var(--ct-color-text-inverse);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
.ctResultCardOverlayText .ctResultCardTitle,
.ctResultCardOverlayText .ctResultCardText {
  color: inherit;
  text-shadow: inherit;
}
/* Nutzer-Auftrag 2026-09-11 (verpflichtender Prozess-Titel): eigenes Overlay-Banner am OBEREN
   Bildrand — getrennt vom Inhalts-Overlay-Text (.ctResultCardOverlayText, unten) und dessen
   Verlauf (.ctResultCardOverlayScrim), damit Prozess-Titel (Wiedererkennung) und Inhaltsüberschrift
   (generatedHeadline) nicht optisch verschmelzen. Eigener, dezenter Verlauf von oben — funktioniert
   unabhängig davon, ob darunter zusätzlich ein Inhalts-Overlay-Text sitzt. Rein clientseitiges
   DOM-Element, brennt nichts in die Bilddatei ein. */
.ctResultCardProcessTitleOverlay {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 2;
  padding: var(--ct-spacing-s) var(--ct-spacing-m);
  color: var(--ct-color-text-inverse);
  font-size: var(--ct-font-size-s);
  font-weight: var(--ct-font-weight-bold);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  background: linear-gradient(180deg, rgba(24, 15, 31, 0.75) 0%, rgba(24, 15, 31, 0.35) 70%, rgba(24, 15, 31, 0) 100%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Bildlose Karten (Text/Dokument/strukturierte Daten/nicht unterstützt): Prozess-Titel als
   primäre Hauptüberschrift vor dem eigentlichen Inhaltstitel — deutlicher gewichtet, aber kein
   zusätzlicher bunter Akzent (professionelles Erscheinungsbild bleibt erhalten). */
.ctResultCardProcessTitleHeading {
  font-size: var(--ct-font-size-l);
  font-weight: var(--ct-font-weight-bold);
  color: var(--ct-color-text-default);
  /* Nutzer-Auftrag 2026-09-12 (80-Zeichen-Erweiterung): visuell kontrolliert gekürzt (Ellipsis) —
     der vollständige Titel bleibt über das native `title`-Tooltip-Attribut UND den Detaildialog
     erreichbar (siehe ResultCard.ts/ResultDetailDialog.js). Zwei Zeilen erlaubt (nicht nur eine),
     da diese Überschrift bei bildlosen Karten mehr vertikalen Platz zur Verfügung hat. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ctResultCardBody {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ct-spacing-xs);
  padding: var(--ct-spacing-m);
}
/* "Trennlinie" zwischen Bild und Titel/Text (imageText-Muster, Auftrag) — nur wenn dem Body
   tatsächlich ein Medienbereich vorausgeht (Overlay-/Text-Modus haben keinen). */
.ctResultCardMedia + .ctResultCardBody {
  border-top: 1px solid var(--ct-color-border-default);
}
/* Bugfix (Nutzer-Fund 2026-09-08, Regression): "compact"-Profil für Textkarten — oben
   ausgerichtet statt vertikal zentriert (Zentrierung wirkte nur "richtig", solange die Karte
   künstlich auf Nachbar-Kartenhöhe gestreckt war, siehe .ctResultCard-Kommentar), Innenabstand
   verkleinert (war für eine große, gestreckte Karte bemessen). Das große dekorative Zitatzeichen
   wurde entfernt (Auftrag: "keine großen dekorativen Anführungszeichen im Hintergrund"). */
.ctResultCardBody--textOnly {
  padding: var(--ct-spacing-m);
  gap: var(--ct-spacing-s);
  justify-content: flex-start;
}
.ctResultCardBody--textOnly .ctResultCardTitle {
  font-size: var(--ct-font-size-l);
}
.ctResultCardBody--textOnly .ctResultCardText {
  font-size: var(--ct-font-size-m);
  -webkit-line-clamp: 6;
}
.ctResultCardTitle {
  font-size: var(--ct-font-size-m);
  font-weight: var(--ct-font-weight-bold);
  color: var(--ct-color-text-default);
}
/* Nutzer-Auftrag 2026-09-11 (Textgenerierung erweitert um Kernaussage): kompakter, zusammen-
   fassender Text zwischen Überschrift und vollständigem Text — bewusst NICHT fett (Auftrag:
   "keine unnötig massiven Schriftgewichte"), dezent abgesetzt über die Textfarbe. */
.ctResultCardCoreStatement {
  font-size: var(--ct-font-size-s);
  color: var(--ct-color-text-muted);
  font-style: italic;
}
.ctResultCardOverlayText .ctResultCardCoreStatement {
  color: inherit;
  text-shadow: inherit;
}
/* Lange Texte sinnvoll begrenzt (Auftrag) — vollständiger Inhalt bleibt über die Detailansicht
   (Kartenklick -> _openDetailDialog) erreichbar, hier nur eine Vorschau. Unterstützt Emojis
   korrekt (reiner Unicode-Text, keine Sonderbehandlung nötig).
   Nutzer-Fund 2026-09-04 (historisch, seit 2026-09-08 ÜBERHOLT): das Zeilenlimit war damals
   bewusst auf 8 angehoben + `flex:1 1 auto` gesetzt, um den durch die (damals gewollte)
   Höhenangleichung ALLER Karten einer Reihe ohnehin vorhandenen Leerraum zu füllen. Nutzer-Fund
   2026-09-08 (Regression): genau diese Höhenangleichung wurde entfernt (siehe .ctResultCard-
   Kommentar) — Karten sind jetzt inhaltsabhängig unterschiedlich hoch, ein "Rest der Kartenhöhe"
   zum Auffüllen existiert nicht mehr. Kompakte Vorschau (4 Zeilen) statt vollem Fließtext, kein
   Flex-Grow mehr (Textblock nimmt nur so viel Platz wie sein eigener Inhalt braucht). */
.ctResultCardText {
  font-size: var(--ct-font-size-s);
  color: var(--ct-color-text-muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  white-space: pre-line;
}
/* Nutzer-Auftrag 2026-09-08 ("ruhigeres, business-orientiertes Erscheinungsbild"): Fettschriften
   aus dem generierten Inhalt (Markdown "**...**") bleiben SEMANTISCH erhalten (weiterhin <strong>,
   z. B. für Screenreader), wirken in der KartenVORSCHAU aber nicht mehr optisch lauter als der
   restliche Text — die volle, unveränderte Formatierung bleibt dem Ergebnisdetail-Dialog
   vorbehalten (ResultDetailDialog.js, dort KEINE Einschränkung). Reine CSS-Dämpfung, der
   zugrundeliegende Text/die Konvertierung selbst ändert sich nicht. */
.ctResultCardText strong {
  font-weight: var(--ct-font-weight-bold);
  color: inherit;
}
.ctResultCardOverlayText .ctResultCardText strong {
  color: inherit;
}
/* Dokument-Renderer (renderType==='document') — Nutzer-Fund 2026-09-08 (Mockup-Feinschliff): die
   ursprüngliche zentrierte Icon-über-Text-Anordnung bestand überwiegend aus ungenutzter
   Weißfläche; jetzt ein kompaktes Vorschau-Thumbnail links + Dateiname/Typ/Aktion rechts,
   KEINE Bilddarstellung vortäuschen (Auftrag Abschnitt 4/6). Größe/Seitenzahl werden bewusst NICHT
   angezeigt — ADR-033-file-Blöcke liefern laut Schema nur `url`/`label`, keine Metadaten dazu
   erfinden. */
.ctResultCardBody--document {
  /* Nutzer-Auftrag 2026-09-11 (verpflichtender Prozess-Titel): Spalte statt Zeile — die
     Thumb+Info-Anordnung lebt jetzt in .ctResultCardDocumentRow darunter, damit der Prozess-Titel
     als eigene Zeile darüber Platz hat. */
  flex-direction: column;
  gap: var(--ct-spacing-s);
}
.ctResultCardDocumentRow {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--ct-spacing-m);
}
/* Nutzer-Fund 2026-09-08 (Runde 8, Live-Screenshot): die bisherige umgeknickte Ecke (zwei Ränder
   auf halbtransparentem Grund) wirkte auf dem Screenshot wie eine kleine diagonale Farbfläche im
   Icon statt wie eine Dokumentecke — explizit unerwünscht ("keine diagonale farbige Fläche").
   Entfernt, stattdessen schlicht ein deutlich GRÖSSERES, ruhiges Dokument-Icon auf größerer
   Thumbnail-Fläche — bei normaler Betrachtungsgröße eindeutig als PDF/Dokument erkennbar, ohne
   grafische Spielerei. Echte PDF-Erstseiten-Vorschauen bleiben technisch NICHT verfügbar
   (ADR-033-file-Blöcke liefern keine Thumbnail-URL) — dieser Rahmen ist der ehrliche, generische
   Fallback für ALLE Dateitypen. */
.ctResultCardDocumentThumb {
  position: relative;
  flex: 0 0 auto;
  width: 4.5rem;
  height: 5.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ct-radius-control);
  border: 1px solid var(--ct-color-border-default);
  background: var(--ct-color-surface-card);
  overflow: hidden;
}
.ctResultCardDocumentIcon {
  font-size: 2.5rem;
  color: var(--ct-color-text-muted);
}
.ctResultCardDocumentInfo {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ct-spacing-xxs);
  /* Nutzer-Auftrag 2026-09-08 (Runde 8): "genügend Abstand zwischen Dokumentdarstellung und
     Textinformationen" — .ctResultCardBody--document liefert bereits ein `gap`, hier zusätzlich
     etwas Innenabstand, damit Icon-Block und Textblock optisch klar getrennt bleiben. */
  padding-inline-start: var(--ct-spacing-xs);
}
.ctResultCardDocumentName {
  -webkit-line-clamp: 2;
  word-break: break-word;
}
.ctResultCardDocumentType {
  font-size: var(--ct-font-size-xs, 0.6875rem);
  color: var(--ct-color-text-muted);
  letter-spacing: 0.03em;
}
/* Nutzer-Auftrag 2026-09-08 (Runde 8): "Vorschau öffnen" ist jetzt ein ECHTES <a href> (siehe
   ResultCard.ts) statt reinem Anzeigetext — sichtbarer Link-Charakter (Unterstreichung) +
   eigener Hover-/Fokuszustand statt der bisherigen reinen Fließtext-Optik. */
.ctResultCardDocumentAction {
  font-size: var(--ct-font-size-s);
  font-weight: var(--ct-font-weight-medium, 500);
}
.ctResultCardDocumentAction--link {
  color: var(--ct-color-action-primary-background);
  text-decoration: underline;
  text-underline-offset: 2px;
  display: inline-block;
  width: fit-content;
  border-radius: var(--ct-radius-control);
}
.ctResultCardDocumentAction--link:hover {
  color: var(--ct-color-brand-plum-soft);
}
.ctResultCardDocumentAction--link:focus-visible {
  outline: var(--ct-focus-width) solid var(--ct-focus-color);
  outline-offset: var(--ct-focus-offset);
}
/* Strukturierte Daten (renderType==='structuredData') — die eingehängten Block-Controls
   (ResultViewer.renderItem, identisch zum Detaildialog) können hoch sein (z. B. Tabellen); auf der
   kompakten Karte visuell begrenzen, vollständig bleibt es über den Detaildialog erreichbar.
   Nutzer-Fund 2026-09-08 (Mockup-Feinschliff): `.erp-rv-block` (ResultViewer.js#wrapBlock) trägt
   im Detaildialog bewusst einen eigenen Rahmen/Hintergrund ("eigene Karte je Block") — HIER, wo
   der Block bereits INNERHALB einer Karte liegt, wirkte das wie zwei ineinander verschachtelte
   Dialoge. Nur in diesem Kontext neutralisiert, der Detaildialog bleibt unverändert. */
.ctResultCardBody--structured {
  /* Kompakter Inhalt (Titel + gedeckelte Tabelle + Hinweis) füllt nicht immer die volle,
     einheitliche Körperhöhe aus — vertikal zentriert statt am oberen Rand mit sichtbarer
     Leerfläche darunter stehen zu bleiben. */
  justify-content: center;
}
/* Bugfix (Live-Test 2026-09-08, Priorität 2 "einheitliche Kartenhöhe"): die Höhendeckelung saß
   bisher DIREKT auf `.ctResultCardBody--structured` — demselben Element, das per `flex:1 1 auto`
   (Basisregel `.ctResultCardBody`) den nach Titel/Footer verbleibenden Platz füllen soll. Ein
   `max-height` GENAU dort verhinderte das Füllen, der Footer dieser Karte rückte dadurch NICHT
   auf dieselbe Grundlinie wie bei allen anderen Kartentypen. Deckelung jetzt auf diesem inneren
   Wrapper.
   Nutzer-Fund 2026-09-08 (Mockup-Feinschliff, Runde 5): KEIN `max-height`/Verlaufsmaske mehr —
   die Zeilenbegrenzung passiert jetzt auf DATENEBENE (InboxApp.controller.js#_renderResultCarousel
   übergibt nur noch die ersten Zeilen an den Renderer, siehe dortiger Kommentar), eine visuelle
   Fade-Maske hätte sonst vorhandene Werte kaum lesbar am unteren Rand abgeschnitten. `overflow:
   hidden` bleibt als reines Sicherheitsnetz (falls ein Renderer trotzdem mehr Höhe braucht als
   verfügbar), OHNE optische Verlaufsmaske. */
.ctResultCardStructuredBlocks {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.ctResultCardStructuredBlocks .erp-rv-block {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0;
}
/* Nutzer-Auftrag 2026-09-08 (Mockup-Feinschliff, Runde 4): das "Als JSON kopieren"-Icon
   (ResultViewer.js#renderTable, geteilt mit dem Detaildialog) gehört NICHT zur vorgesehenen
   Bedienung der kompakten Kartenvorschau — nur hier ausgeblendet, der Detaildialog (wo derselbe
   Block über `.ctModalDialog`/ResultDetailDialog gerendert wird, NICHT über diese Klasse) behält
   den Kopieren-Button unverändert. */
.ctResultCardStructuredBlocks .erp-rv-block .sapMBtn {
  display: none;
}
.ctResultCardStructuredHint {
  flex: 0 0 auto;
  font-size: var(--ct-font-size-xs, 0.6875rem);
  color: var(--ct-color-text-muted);
}
/* Fallback für einen unbekannten/nicht registrierten Typ (Auftrag Abschnitt 1/7) — Nutzer-Fund
   2026-09-08 (Mockup-Feinschliff): das bisherige große "?"-Symbol wirkte wie ein Fehlerzustand.
   Ein unbekannter Typ ist ein gültiger technischer Zustand, keine Warnung — neutrales Icon (KEINE
   Warnfarbe), zweistufiger Text (Überschrift + Erklärung) statt eines einzelnen Fließtexts. */
.ctResultCardBody--custom {
  align-items: center;
  text-align: center;
  justify-content: center;
  gap: var(--ct-spacing-xs);
  color: var(--ct-color-text-muted);
}
.ctResultCardCustomIcon {
  font-size: 1.75rem;
  color: var(--ct-color-text-muted);
}
.ctResultCardCustomTitle {
  font-weight: var(--ct-font-weight-bold);
  color: var(--ct-color-text-default);
}
.ctResultCardCustomExplanation {
  font-size: var(--ct-font-size-s);
  color: var(--ct-color-text-muted);
}
.ctResultCardCustomAction {
  font-size: var(--ct-font-size-s);
  color: var(--ct-color-action-primary-background);
  font-weight: var(--ct-font-weight-bold);
  margin-top: var(--ct-spacing-xxs);
}
.ctResultCardFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ct-spacing-s);
  padding: var(--ct-spacing-s) var(--ct-spacing-m);
  border-top: 1px solid var(--ct-color-border-default);
  background: var(--ct-color-surface-card);
  position: relative;
  z-index: 2;
  /* Nutzer-Fund 2026-09-04 (Live-Screenshot): der Zähler-Badge und die Folgeaktion durften bei
     schmalerer Karte NIE in getrennte Zeilen umbrechen — der Badge ist inzwischen (siehe
     .ctResultCardBadgeBtn) ein kompaktes Icon+Zahl statt eines langen Labels, dadurch reicht der
     Platz jetzt auch bei schmaler Karte für beide in EINER Zeile. */
  flex-wrap: nowrap;
}
.ctResultCardActions {
  display: flex;
  align-items: center;
  gap: var(--ct-spacing-xs);
  flex-wrap: nowrap;
  justify-content: flex-end;
  min-width: 0;
}
/* Touch-Ziele (Auftrag: mind. ~44×44px) — betrifft die im Footer eingehängten sap.m.Button/
   MenuButton-Instanzen (vom Controller gebaut), hier pauschal für alle Footer-Buttons erzwungen. */
.ctResultCardFooter .sapMBtn {
  min-width: 44px;
  min-height: 44px;
}
/* Nutzer-Fund 2026-09-04: der Zähler-Badge (jetzt kompaktes Icon+Zahl, siehe
   _buildRunCountBadgeButton) behält immer seine volle Breite, NIE mehr Zeilenumbruch zwischen
   Badge und Folgeaktion (.ctResultCardFooter ist nowrap). */
.ctResultCardBadgeBtn {
  flex-shrink: 0;
}
/* ADR-045 (Nutzer-Feinschliff 2026-09-14) — Aufbewahrungsfrist-Anzeige in der Dialog-Kopfzeile
   (ct.ModalDialog#headerActions, siehe ResultDetailDialog.js#_buildRetentionPill). Bewusst OHNE
   eigene Pillen-/Grau-Optik (früherer Versuch hier entfernt) — Konsistenz-Fund: ein individuell
   gestyltes "Pille"-Aussehen ließ sich nicht von der rein dekorativen, nicht-klickbaren Typ-Pille
   (.ctResultCardTypeBadge) unterscheiden, obwohl DIESES Element klickbar ist (Pin-Toggle).
   Stattdessen exakt dasselbe Muster wie der bereits etablierte "N× Folgeaktionen"-Badge
   (_buildRunCountBadgeButton, .ctResultCardBadgeBtn) — ein normaler sap.m.Button (type
   Transparent) mit Icon+Text, UI5-Standard-Chrome (Hover/Fokus) signalisiert "klickbar"
   einheitlich im ganzen Dialog. */
/* Nutzer-Auftrag 2026-09-11 (responsive Überarbeitungsrunde, KORRIGIERT das bisherige Verhalten):
   der Folgeaktions-Button durfte bisher schrumpfen + wurde per text-overflow:ellipsis gekürzt —
   Live-Fund zeigte, dass das bei knappem Platz bis auf "B…" zusammenschrumpfte, unlesbar.
   Beschriftungen wie "Bild generieren"/"Branding hinzufügen" MÜSSEN vollständig lesbar bleiben.
   Der Button behält jetzt immer seine volle Inhaltsbreite (min-inline-size:max-content) und
   schrumpft NIE (flex-shrink:0) — reicht der Platz nicht, muss die Kartenanzahl sinken
   (siehe @container-Regeln oben), nicht der Button-Text. Bewusst NUR auf dieser einen,
   gekapselten Klasse (.ctResultCardActions .sapMBtn), keine globale Button-Regel. */
.ctResultCardActions .sapMBtn {
  flex-shrink: 0;
  white-space: nowrap;
  min-inline-size: max-content;
  min-width: 44px;
}
.ctResultCardActions .sapMBtn .sapMBtnContent {
  white-space: nowrap;
}

/* ── ct.FollowUpSplitButton (Nutzer-Auftrag 2026-09-06, Inbox-App-Redesign Abschnitt 1) ───────
   Ersetzt den früheren sap.m.MenuButton(buttonMode:"Split") — eigenes, stabiles DOM statt
   Styling gegen interne UI5-Klassen (.sapMSB/.sapMSBText/.sapMSBArrow, siehe FollowUpSplitButton.ts
   Klassenkommentar für die Historie). Beide Segmente teilen sich EINE Fläche/Rundung, dezente
   Trennlinie dazwischen, Pflaumenton als Primärfläche (--ct-color-action-primary-*, dasselbe
   Token wie der Primär-Button im Detail-Dialog) — Cyan taucht hier bewusst NICHT auf (die
   App-weite Konvention für :focus-visible ist --ct-focus-color, siehe .ctResultCard/
   .ctResultCarouselArrow oben — Cyan ist an anderer Stelle für den Auswahlzustand reserviert,
   siehe .ctResultCard--selected). */
.ctFollowUpSplitButton {
  display: inline-flex;
  align-items: stretch;
  height: 44px;
  border-radius: var(--ct-radius-pill);
  overflow: hidden;
  /* Historie 2026-09-08: kurzzeitig auf einen Ghost/Outline-Stil umgestellt, dann auf einen
     zustandsabhängigen Wechsel (gefüllt nur bei Hover/Auswahl) — beides per Live-Screenshot
     wieder verworfen. Der Mockup-Vergleich zeigt eindeutig: die Primäraktion ist ein kompakter,
     DURCHGÄNGIG dunkelvioletter Button gemäß CI, identisch auf JEDER Karte unabhängig vom
     Auswahl-/Hoverzustand ("keine unterschiedlichen Stile für dieselbe Folgeaktion" gilt für die
     eine bleibende Optik, nicht für Ghost vs. gefüllt). */
  background: var(--ct-color-action-primary-background);
  border: 1px solid transparent;
  font-family: var(--ct-font-family);
  /* Nutzer-Auftrag 2026-09-11 (responsive Überarbeitungsrunde, KORRIGIERT Live-Fund "Branding
     hin…"): max-width:100%+min-width:0 erlaubten diesem Button, sich beliebig zusammenzudrücken
     — kombiniert mit der text-overflow:ellipsis auf .ctFollowUpSplitButtonMainText unten schrumpfte
     die Beschriftung bei knappem Platz bis auf einzelne Buchstaben, unlesbar. Der Button behält
     jetzt immer seine volle Inhaltsbreite; reicht der Platz nicht, muss die Kartenanzahl sinken
     (siehe @container-Regeln bei .ctResultCarousel), nicht der Button-Text. */
  flex-shrink: 0;
  min-inline-size: max-content;
}
.ctFollowUpSplitButtonMain,
.ctFollowUpSplitButtonChevron {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--ct-color-action-primary-text);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--ct-font-size-m);
  font-weight: var(--ct-font-weight-bold);
  line-height: 1;
}
.ctFollowUpSplitButtonChevron {
  border-left-color: color-mix(in srgb, var(--ct-color-action-primary-text) 30%, transparent);
}
.ctFollowUpSplitButtonMain {
  display: flex;
  align-items: center;
  min-inline-size: max-content;
  padding: 0 var(--ct-spacing-m);
  flex: 0 0 auto;
}
.ctFollowUpSplitButtonMainText {
  white-space: nowrap;
}
.ctFollowUpSplitButtonChevron {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.25rem;
  min-width: 44px;
  /* Dezente Trennlinie zwischen den Segmenten statt einer harten Kante (Auftrag Abschnitt 1) —
     NUR die Breite hier, die Farbe kommt aus border-left-color weiter oben (Default-Ghost- vs.
     gefüllter Zustand, Nutzer-Auftrag 2026-09-08), sonst würde dieses spätere volle
     `border-left`-Shorthand die Zustandsfarbe bei gleicher Spezifität immer überschreiben. */
  border-left-style: solid;
  border-left-width: 1px;
}
.ctFollowUpSplitButtonChevronIcon {
  font-size: 0.7em;
}
/* Standard-Hover-/Active-Abdunklung für einen gefüllten violetten Button (Mockup-Feinschliff
   2026-09-08, siehe .ctFollowUpSplitButton-Historie oben). */
.ctFollowUpSplitButtonMain:hover,
.ctFollowUpSplitButtonChevron:hover {
  background: var(--ct-color-action-primary-background-hover);
}
.ctFollowUpSplitButtonMain:active,
.ctFollowUpSplitButtonChevron:active {
  background: var(--ct-color-action-primary-background-active);
}
/* Cyan ausschließlich als Tastatur-Fokusindikator, nie dauerhaft nach Maus-Klick (Auftrag
   Abschnitt 1) — :focus-visible statt :focus. */
.ctFollowUpSplitButtonMain:focus-visible,
.ctFollowUpSplitButtonChevron:focus-visible {
  outline: var(--ct-focus-width) solid var(--ct-focus-color);
  outline-offset: -2px;
}
.ctFollowUpSplitButton--disabled {
  opacity: 0.5;
}
.ctFollowUpSplitButton--disabled .ctFollowUpSplitButtonMain,
.ctFollowUpSplitButton--disabled .ctFollowUpSplitButtonChevron {
  cursor: not-allowed;
}
.ctFollowUpSplitButton--busy {
  opacity: 0.7;
  pointer-events: none;
}

/* Menü-Popover (sap.m.Popover, siehe FollowUpSplitButton.ts#_openMenu) — weiße Fläche, dezenter
   Rand, weicher Schatten statt UI5-Rohtheme-Kasten; eigener Z-Index/Layer kommt automatisch vom
   Popup-Stack, kann daher NIE vom overflow:hidden der Karte/des Karussells abgeschnitten werden. */
.ctFollowUpSplitButtonPopover .sapMPopoverCont {
  padding: var(--ct-spacing-xs) 0;
}
.ctFollowUpSplitButtonMenu {
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: max-content;
}
.ctFollowUpSplitButtonMenuItem {
  display: flex;
  align-items: center;
  gap: var(--ct-spacing-xs);
  min-height: 44px;
  padding: var(--ct-spacing-xs) var(--ct-spacing-m);
  margin: 0 var(--ct-spacing-xs);
  border-radius: var(--ct-radius-control);
  color: var(--ct-color-text-default);
  font-family: var(--ct-font-family);
  font-size: var(--ct-font-size-m);
  cursor: pointer;
  outline: none;
}
.ctFollowUpSplitButtonMenuItemCheck {
  flex: 0 0 1.1em;
  color: var(--ct-color-action-primary-background);
  font-weight: var(--ct-font-weight-bold);
}
.ctFollowUpSplitButtonMenuItemText {
  overflow: hidden;
  text-overflow: ellipsis;
}
.ctFollowUpSplitButtonMenuItem--selected {
  background: var(--ct-color-surface-sunken);
  font-weight: var(--ct-font-weight-bold);
}
.ctFollowUpSplitButtonMenuItem:hover {
  background: var(--ct-palette-blue-050);
}
.ctFollowUpSplitButtonMenuItem:focus-visible {
  outline: var(--ct-focus-width) solid var(--ct-focus-color);
  outline-offset: -2px;
}

/* Aufgeklapptes Menü der Folgeaktionen (sap.m.Menu, DOM-Klassen sapUiMnu/sapMMenu) — bisher
   komplettes UI5-Rohstyling (eckiger weißer Kasten, hartkantiger Blau-Fokusrahmen ums erste
   Item). An denselben Rundungs-/Schatten-Stil wie .ctModalDialog/Popover angeglichen; global
   gescoped, weil dieselbe sap.m.Menu-Komponente weiterhin im Detail-Dialog verwendet wird
   (ResultDetailDialog.js) — NICHT mehr für den Kartenband-Split-Button (der nutzt jetzt
   .ctFollowUpSplitButtonMenu oben, kein sap.m.Menu mehr). */
.sapMMenu.sapUiMnu {
  border-radius: var(--ct-radius-card) !important;
  border: 1px solid var(--ct-color-border-default) !important;
  box-shadow: var(--ct-shadow-overlay) !important;
  padding: var(--ct-spacing-xs) 0;
  overflow: hidden;
}
.sapMMenu.sapUiMnu .sapUiMnuLst {
  padding: 0;
}
.sapMMenu.sapUiMnu .sapUiMnuItm {
  border-radius: var(--ct-radius-control);
  margin: 0 var(--ct-spacing-xs);
  width: auto;
  outline: none !important;
  box-shadow: none !important;
}
.sapMMenu.sapUiMnu .sapUiMnuItm.sapUiMnuItmHov,
.sapMMenu.sapUiMnu .sapUiMnuItm:hover {
  background: var(--ct-palette-blue-050) !important;
}

/* Nutzer-Auftrag 2026-09-04 (Feinschliff): Löschen ist eine destruktive Nebenaktion — visuell
   gedämpft und vom primären Aktionsbereich abgesetzt (Touch-Fläche/Bestätigungsdialog
   unverändert). */
.ctResultCardDeleteBtn {
  opacity: 0.65;
  margin-inline-start: var(--ct-spacing-xs);
}
.ctResultCardDeleteBtn:hover,
.ctResultCardDeleteBtn:focus-visible {
  opacity: 1;
}

/* Nutzer-Auftrag 2026-09-08 ("ruhigeres, business-orientiertes Erscheinungsbild"): Löschen steht
   auf der Karte nicht mehr gleichwertig neben der Primäraktion — kleiner, neutraler Kebab-Button
   öffnet ein schlankes Popover mit genau einem, destruktiv gekennzeichneten Eintrag. */
/* Nutzer-Auftrag 2026-09-08 (Avatar-Vereinheitlichung, Ergebnisliste): fehlt ein echtes
   Profilfoto, zeigt sap.m.Avatar sein Icon-Fallback ("sap-icon://person-placeholder") —
   Hintergrund/Symbolfarbe hier bewusst neutral (kein Cyan-/Pink-/Grün-Hash mehr, siehe
   InboxApp.controller.js#_buildInitiatorCell). Wirkt auch beim Umschalten von Foto→Fallback
   (kein Foto = kein `src`, Avatar fällt automatisch auf `initials`/Icon zurück). */
.ctNeutralAvatar {
  background-color: var(--ct-color-surface-sunken) !important;
  color: var(--ct-color-text-muted) !important;
}

/* ── ct.EvaluationControl (Kartenband-Redesign, Nutzer-Auftrag 2026-09-04) ───────────────────
   Daumen hoch/runter — Bewertung ist NEBEN Icon+Farbe auch über aria-pressed/aria-label codiert
   (siehe EvaluationControl.ts), hier nur die visuelle Umsetzung (aktiver Zustand farbig+Kontur,
   kein rein farbbasierter Unterschied). */
.ctEvaluationControl {
  display: flex;
  align-items: center;
  gap: var(--ct-spacing-xxs);
}
/* Bugfix (Nutzer-Fund 2026-09-08, Mockup-Feinschliff): die Icons sind seit dem EvaluationControl.ts-
   Fix flache, monochrome sap-icon://-Glyphen (vorher echte Unicode-Emoji, siehe dortiger
   Kommentar) — `filter:grayscale` war nur ein unvollständiger Behelf dagegen und entfällt jetzt,
   Farbgebung läuft ausschließlich über `color`. Nicht bewertet = neutrales Grau (weder Rot/Grün/
   Gelb noch Cyan), positiv = dieselbe blaugraue Familie wie Typ-/Status-Pillen, negativ = nur ein
   dunklerer Grauton statt einer Warnfarbe (Auftrag Abschnitt 17). */
/* Nutzer-Fund 2026-09-08 (Mockup-Feinschliff, Runde 5): "kompakter, flacher, engerer Abstand
   zwischen den beiden Buttons" — dies ist eine sekundäre Tabellenzeilen-Aktion (keine primäre
   Touch-Bedienfläche wie die Karussell-Pfeile), daher kein festes 44px-WCAG-Mindestmaß nötig.
   Randlos im Ruhezustand (nur Farbe zeigt den Zustand, siehe --active-Regeln unten), Kontur kommt
   erst bei Hover/aktiv dazu. */
.ctEvaluationControlBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: var(--ct-radius-control);
  border: 1px solid transparent;
  background: transparent;
  color: var(--ct-color-text-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ctEvaluationControlBtn:hover {
  background: var(--ct-color-surface-sunken);
}
.ctEvaluationControlBtn:focus-visible {
  outline: var(--ct-focus-width) solid var(--ct-focus-color);
  outline-offset: var(--ct-focus-offset);
}
.ctEvaluationControlBtn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
/* Bugfix (Nutzer-Fund 2026-09-08, Runde 8, Live-Screenshot): der ausgewählte "Daumen runter"
   nutzte denselben Grauton (--ct-color-surface-sunken) wie Zeilen-Hover/Zebra-Streifen/
   deaktivierte Buttons anderswo in derselben Tabelle — auf einer bereits gräulich hervorgehobenen
   Zeile verschmolz die Auswahl dadurch praktisch unsichtbar mit dem Zeilenhintergrund. Sichtbar
   dunklerer, eigenständiger Grauton (neutral-300, dieselbe Stufe wie --ct-color-border-default,
   NICHT der -050/-100-Sunken-Bereich) + zusätzlicher Rahmen als Inset-Ring — bleibt dadurch auch
   auf einer grau hinterlegten Zeile klar vom Zeilenhintergrund unterscheidbar.
   Nutzer-Fund 2026-09-14 (Live-Screenshot): "Daumen hoch" nutzte bislang eine ABWEICHENDE
   Info-Blau-Familie statt dieses Grautons — markierte Bewertungen sahen je nach Richtung
   unterschiedlich aus, obwohl es sich um denselben Auswahlzustand handelt. Jetzt EINE gemeinsame
   Regel für beide Richtungen. */
.ctEvaluationControlBtn--up.ctEvaluationControlBtn--active,
.ctEvaluationControlBtn--down.ctEvaluationControlBtn--active {
  border-color: var(--ct-color-border-strong);
  background: var(--ct-palette-neutral-300);
  color: var(--ct-color-text-default);
}
/* Nutzer-Auftrag 2026-09-09 (Mobile-Umbau, Runde 2): die kompakten 32px (Runde 8) waren bewusst
   für den Desktop-Tabellenkontext gedacht ("sekundäre Zeilenaktion, kein WCAG-Touch-Ziel nötig")
   — auf der mobilen Folgeaktionskarte ist Bewerten dagegen die primäre Touch-Interaktion, dort
   gilt das reguläre 44px-Mindestmaß wie beim Karten-Footer. Desktop bleibt unverändert kompakt. */
@media (max-width: 767.98px) and (pointer: coarse), (max-height: 499.98px) and (max-width: 960px) and (pointer: coarse) {
  .ctEvaluationControlBtn {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ── Business-Flow-Startdialog (Nutzer-Auftrag 2026-09-04, ADR-038) ──────────────────────────
   Konfigurationsgetriebener Formular-Renderer (FieldRendererRegistry.js/InputFieldsForm.js) —
   Label OBERHALB des Controls (Mockup-Vorgabe) statt der bisherigen SimpleForm-Label-Spalte.
   Container Query statt Media Query (derselbe Grund wie .ctResultDetailContentGrid: der Dialog
   ist nie viewport-breit). Pflaumenton bleibt der App-weite Primärakzent (--ct-color-action-
   primary-background, dieselbe Farbe wie alle Emphasized-Buttons) — "Workflow starten" wird
   dadurch NIE grün (Grün ist ausschließlich für Erfolgszustände reserviert, siehe
   --ct-color-eval-positive/StatusBadge an anderer Stelle). */
/* Nutzer-Fund 2026-09-05 (Live-Smoke-Test): .ctFlowFormColumns/.ctFlowFormGrid liegen auf
   sap.m.HBox/VBox — deren EIGENE Basisklassen (.sapMHBox/.sapMVBox) tragen selbst eine
   flex-direction-Regel und werden vom UI5-Theme dynamisch NACH unseren statischen <link>-Tags
   nachgeladen (dasselbe, bereits an mehreren Stellen in dieser Datei dokumentierte Ladereihen-
   folge-Problem, siehe .ctModalDialogIcon/.ctResultDetailMediaActions) — bei gleicher Spezifität
   gewinnt die später geladene Theme-Regel. Ergebnis ohne !important: die Karte blieb bei JEDER
   Fensterbreite zweispaltig (auch am Phone), weder @container noch @media griffen sichtbar.
   !important erzwingt unsere Regel unabhängig von der Ladereihenfolge. */
.ctFlowFormGrid {
  container-type: inline-size;
  display: flex;
  flex-direction: column !important;
  gap: var(--ct-spacing-m);
}
.ctFlowFormColumns {
  display: flex;
  flex-direction: column !important;
  gap: var(--ct-spacing-l);
  align-items: start;
}
@container (min-width: 34rem) {
  .ctFlowFormColumns {
    flex-direction: row !important;
  }
  .ctFlowFormColumn--main {
    flex: 1 1 55%;
  }
  .ctFlowFormColumn--attachments {
    flex: 1 1 45%;
  }
}
.ctFlowFormColumn {
  display: flex;
  flex-direction: column;
  gap: var(--ct-spacing-m);
  min-width: 0;
  width: 100%;
}
.ctFlowFormRow {
  display: flex;
  flex-direction: column;
  gap: var(--ct-spacing-xxs);
  min-width: 0;
}
.ctFlowFormLabel {
  font-weight: var(--ct-font-weight-bold, 600);
  font-size: var(--ct-font-size-s);
}
.ctFlowFormLabel--inline {
  font-weight: normal;
  margin-inline-start: var(--ct-spacing-xs);
}
.ctFlowFormHelpText {
  font-size: var(--ct-font-size-s);
  color: var(--ct-color-text-muted);
}
.ctFlowFormControl {
  width: 100%;
  min-width: 0;
}
.ctFieldRendererError {
  color: var(--ct-color-status-error, #c32b5d);
  font-style: italic;
}
.ctFieldCheckboxGroup,
.ctFieldRadioGroup {
  display: flex;
  flex-direction: column;
  gap: var(--ct-spacing-xs);
}
/* ct.FieldGroup (Auftrag Abschnitt 12, Nachtrag 2026-09-06): natives <fieldset>/<legend> statt
   nur role="group"/aria-label — Browser-Standardrahmen/-Innenabstand des <fieldset> zurückgesetzt
   (sonst ungewollter Kasten um die Radio-/Checkbox-Gruppe, den das Mockup nicht zeigt), <legend>
   optisch wie das bestehende Feld-Label (.ctFlowFormLabel) gestaltet. */
.ctFieldGroup {
  border: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.ctFieldGroupLegend {
  padding: 0;
  font-weight: var(--ct-font-weight-bold, 600);
  font-size: var(--ct-font-size-s);
  color: var(--ct-color-text-default);
}

/* ── ct.AttachmentField (Nutzer-Auftrag 2026-09-04, ADR-038) ─────────────────────────────────
   Dropzone + natives Datei-Input (versteckt, per Button ausgelöst) + optionaler Zwischenablage-
   Bereich + Dateiliste. Fokuszustand in Cyan (Mockup-Vorgabe "Cyan für Fokuszustände"), Erfolg/
   Fehler NIE über Farbe allein (zusätzlich Text, siehe AttachmentField.ts). */
.ctAttachmentField {
  display: flex;
  flex-direction: column;
  gap: var(--ct-spacing-s);
  min-width: 0;
}
.ctAttachmentFieldDropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ct-spacing-xs);
  padding: var(--ct-spacing-l) var(--ct-spacing-m);
  border: 1px dashed var(--ct-color-border-default);
  border-radius: var(--ct-radius-card);
  background: var(--ct-color-surface-soft);
  text-align: center;
}
.ctAttachmentFieldIcon {
  font-size: 1.3rem;
  /* Nutzer-Auftrag 2026-09-05 (Auftrag Abschnitt 6): Upload-Icon in der CI-Akzentfarbe statt
     neutralem Grau. */
  color: var(--ct-color-accent-blue);
}
.ctAttachmentFieldDropHint {
  font-size: var(--ct-font-size-s);
  color: var(--ct-color-text-muted);
}
.ctAttachmentFieldNativeInput {
  /* Bewusst NICHT display:none (nimmt sich sonst manche Screenreader/Testtools aus dem
     Fokus-Baum) — visuell unsichtbar, aber weiterhin fokussierbar/aktivierbar. */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
/* Nutzer-Auftrag 2026-09-05 (Auftrag Abschnitt 6): "Datei auswählen" visuell SEKUNDÄR statt in
   der Primärfarbe umrandet (die frühere Fassung wirkte fast wie eine zweite Primäraktion neben
   "Workflow starten") — neutraler Rand/Text, erst im Hover/Fokus erkennbar akzentuiert. */
.ctAttachmentFieldSelectBtn {
  min-height: 44px;
  padding: 0 var(--ct-spacing-m);
  border: 1px solid var(--ct-color-action-secondary-border);
  border-radius: var(--ct-radius-control);
  background: var(--ct-color-surface-card);
  color: var(--ct-color-text-muted);
  font: inherit;
  cursor: pointer;
}
.ctAttachmentFieldSelectBtn:hover {
  background: var(--ct-color-surface-soft);
  border-color: var(--ct-color-accent-blue);
  color: var(--ct-color-text-default);
}
.ctAttachmentFieldSelectBtn:focus-visible,
.ctAttachmentFieldClipboardZone:focus-visible {
  outline: var(--ct-focus-width) solid var(--ct-color-brand-cyan);
  outline-offset: var(--ct-focus-offset);
}
.ctAttachmentFieldSelectBtn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ctAttachmentFieldClipboardZone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ct-spacing-xxs);
  padding: var(--ct-spacing-m);
  border: 1px dashed var(--ct-color-border-default);
  border-radius: var(--ct-radius-control);
  background: var(--ct-color-surface-card);
  color: var(--ct-color-text-muted);
  font-size: var(--ct-font-size-s);
  text-align: center;
  cursor: text;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.ctAttachmentFieldClipboardZone:hover {
  border-color: var(--ct-color-accent-blue);
  background: var(--ct-color-surface-soft);
}
.ctAttachmentFieldClipboardIcon {
  font-size: 1.3rem;
  color: var(--ct-color-accent-blue);
}
/* Nutzer-Auftrag 2026-09-06: Kamera-Aufnahme — eigener Button (keine Dropzone/Drag&Drop, eine
   Aufnahme ist immer eine bewusste Einzelaktion), gleiche sekundäre Optik wie "Datei auswählen". */
.ctAttachmentFieldCameraBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ct-spacing-xs);
  width: 100%;
  min-height: 44px;
  padding: 0 var(--ct-spacing-m);
  border: 1px solid var(--ct-color-action-secondary-border);
  border-radius: var(--ct-radius-control);
  background: var(--ct-color-surface-card);
  color: var(--ct-color-text-muted);
  font: inherit;
  cursor: pointer;
}
.ctAttachmentFieldCameraBtn:hover {
  background: var(--ct-color-surface-soft);
  border-color: var(--ct-color-accent-blue);
  color: var(--ct-color-text-default);
}
.ctAttachmentFieldCameraBtn:focus-visible {
  outline: var(--ct-focus-width) solid var(--ct-color-brand-cyan);
  outline-offset: var(--ct-focus-offset);
}
.ctAttachmentFieldCameraBtn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ctAttachmentFieldCameraIcon {
  font-size: 1.1rem;
  color: var(--ct-color-accent-blue);
}
/* Nutzer-Auftrag 2026-09-05 (Auftrag Abschnitt 7): "Strg+V" ist auf Touchgeräten ohne Tastatur
   irreführend — zwei Hinweistexte, per CSS (nicht JS/Device-Sniffing) nach tatsächlicher
   Eingabefähigkeit des Geräts umgeschaltet. */
.ctAttachmentFieldClipboardHintTouch {
  display: none;
}
@media (pointer: coarse) {
  .ctAttachmentFieldClipboardHintDesktop { display: none; }
  .ctAttachmentFieldClipboardHintTouch { display: inline; }
}
.ctAttachmentFieldClipboardEmptyHint {
  font-size: var(--ct-font-size-s);
  color: var(--ct-color-status-error, #c32b5d);
}
.ctAttachmentFieldList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ct-spacing-xs);
}
.ctAttachmentFieldItem {
  display: flex;
  align-items: center;
  gap: var(--ct-spacing-s);
  padding: var(--ct-spacing-xs) var(--ct-spacing-s);
  border: 1px solid var(--ct-color-border-default);
  border-radius: var(--ct-radius-control);
  background: var(--ct-color-surface-card);
  min-width: 0;
}
.ctAttachmentFieldItem--error {
  border-color: var(--ct-color-status-error, #c32b5d);
}
.ctAttachmentFieldThumb {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--ct-radius-control);
  object-fit: cover;
  flex: 0 0 auto;
}
.ctAttachmentFieldFileIcon {
  font-size: 1.4rem;
  flex: 0 0 auto;
}
.ctAttachmentFieldItemInfo {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}
.ctAttachmentFieldFileName {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ctAttachmentFieldFileSize {
  font-size: var(--ct-font-size-s);
  color: var(--ct-color-text-muted);
}
.ctAttachmentFieldItemError {
  font-size: var(--ct-font-size-s);
  color: var(--ct-color-status-error, #c32b5d);
}
.ctAttachmentFieldRemoveBtn {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  border: none;
  background: transparent;
  color: var(--ct-color-text-muted);
  cursor: pointer;
  font-size: 1rem;
}
.ctAttachmentFieldRemoveBtn:hover {
  color: var(--ct-color-status-error, #c32b5d);
}
.ctAttachmentFieldRemoveBtn:focus-visible {
  outline: var(--ct-focus-width) solid var(--ct-color-brand-cyan);
  outline-offset: var(--ct-focus-offset);
}

/* ── Business-Flow-Startdialog — Feinschliff nach Mockup-Abgleich (Nutzer-Auftrag 2026-09-05) ─
   Dialogproportionen: kompakt statt "eigene Seite". max-height begrenzt die Gesamthöhe relativ
   zum Viewport, sap.m.Dialog scrollt seinen Inhaltsbereich dann selbst (Standard-Mechanik) — nur
   der mittlere Formularbereich wird dadurch scrollbar, Kopf/Fußleiste bleiben fix sichtbar.
   Gescopt auf .ctFlowDialog (siehe N8nAppLauncher.js — _getInnerDialog().addStyleClass(...), DER
   Weg, weil ct.ModalDialog selbst kein eigenes DOM hat), betrifft keine anderen Dialoge. */
.ctFlowDialog:not(.sapMDialogStretched) {
  max-height: min(85vh, 42rem) !important;
  /* Nutzer-Fund 2026-09-05 (Mockup-Feinschliff): OHNE dieses height:auto wuchs der Dialog bei
     WENIGEN Feldern trotzdem fast bis an max-height heran (viel ungenutzter Leerraum unterhalb
     der letzten Checkbox) — sap.m.Dialog reserviert ohne explizites height sonst den kompletten
     erlaubten Rahmen statt sich am tatsächlichen Inhalt zu orientieren. max-height bleibt die
     Obergrenze (viele Felder/Anhänge dürfen weiterhin bis dorthin wachsen und dann scrollen),
     height:auto sorgt dafür, dass WENIGER Inhalt den Dialog auch tatsächlich kompakter macht. */
  height: auto !important;
}
/* Nutzer-Auftrag 2026-09-05 (Auftrag Abschnitt 5, CI-Farben auf Form Controls): sap_horizon
   definiert Auswahl-/Fokusfarbe von RadioButton/CheckBox/Select/Input etc. über diese beiden
   öffentlichen, dokumentierten Theming-Parameter (KEINE privaten/instabilen Klassenselektoren,
   siehe UID-007) — hier auf den Dialog gescopt umgehängt: Pflaumenton für den Auswahlzustand
   (Radio-Punkt/Checkbox-Häkchen), Cyan für den Fokusring (Dropdown/Texteingabe/Radio/Checkbox).
   Dasselbe Muster wie bereits bei .ctModalDialogTabs weiter oben in dieser Datei etabliert. */
.ctFlowDialog {
  --sapSelectedColor: var(--ct-color-brand-plum);
  --sapContent_Selected_ForegroundColor: var(--ct-color-brand-plum);
  --sapContent_FocusColor: var(--ct-color-accent-blue);
}
/* Nutzer-Auftrag 2026-09-05 (Auftrag Abschnitt 1: "nur der mittlere Formularbereich soll
   scrollen"): Header UND Body liegen laut ModalDialog.ts BEIDE im selben, von sap.m.Dialog
   intern verwalteten Scroll-Container (kein separates natives Header-Slot, da showHeader:false)
   — dessen private Klassen fassen wir bewusst nicht an (UID-007). position:sticky auf dem
   Header-Block braucht daher KEINE internen Selektoren und hält ihn trotzdem oben fixiert,
   während der gemeinsame Container darunter scrollt; die Fußleiste ist ohnehin bereits über
   sap.m.Dialog#footer strukturell vom scrollenden Inhalt getrennt (immer sichtbar). */
.ctFlowDialog .ctModalDialogHeader {
  padding: var(--ct-spacing-s) var(--ct-spacing-m) var(--ct-spacing-xs) var(--ct-spacing-m);
  gap: var(--ct-spacing-xs);
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--ct-color-surface-card);
  /* Nutzer-Auftrag 2026-09-05 (Auftrag Abschnitt 3): sehr dezente Trennung zwischen Kopf- und
     Formularbereich statt eines abrupten Übergangs. */
  border-bottom: 1px solid var(--ct-color-border-divider);
}
.ctFlowDialog .ctModalDialogIcon {
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
  font-size: 1.1rem;
}
.ctFlowDialog .ctModalDialogHeaderText {
  gap: 0;
}
.ctFlowDialog .ctModalDialogTitle {
  font-size: var(--ct-font-size-l);
  overflow-wrap: break-word;
}
.ctFlowDialog .ctModalDialogDescription {
  font-size: var(--ct-font-size-s);
}
.ctFlowDialog .ctModalDialogBody {
  padding: var(--ct-spacing-s) var(--ct-spacing-m) var(--ct-spacing-s);
}

/* Fußleiste: dezente Trennlinie, kompakter als der App-Standard, Pflichtfeld-Hinweis links.
   Nutzer-Fund 2026-09-05: .sapMBtnEmphasized im Dialog-Footer ist app-weit auf Grün verdrahtet
   (Bestätigen/Genehmigen-Semantik, siehe die generische Regel weiter oben in dieser Datei) — für
   diesen Dialog gilt die Ausnahme bereits für .ctResultDetailFooter, hier identisch für
   .ctFlowDialogFooter: "Workflow starten" ist keine Genehmigung, sondern die normale
   Primäraktion (Pflaumenton), Grün bleibt ausschließlich Erfolgszuständen vorbehalten. */
.ctModalDialog .sapMDialogFooter .ctFlowDialogFooter .sapMBtnEmphasized {
  background-color: var(--ct-color-action-primary-background) !important;
  border-color: var(--ct-color-action-primary-background) !important;
}
.ctModalDialog .sapMDialogFooter .ctFlowDialogFooter .sapMBtnEmphasized:hover {
  background-color: var(--ct-color-action-primary-background-hover) !important;
  border-color: var(--ct-color-action-primary-background-hover) !important;
}
.ctFlowDialogFooter {
  border-top: 1px solid var(--ct-color-border-default);
  padding-top: var(--ct-spacing-xs) !important;
}
.ctFlowDialogRequiredHint {
  font-size: var(--ct-font-size-s);
  color: var(--ct-color-text-muted);
}

/* Formular-Feinschliff: kompaktere Zwischenräume zwischen Feldgruppen/Radio-/Checkbox-Optionen
   (Touch-Ziele bleiben unverändert ≥44px, nur der LEERRAUM dazwischen schrumpft). */
.ctFlowDialog .ctFlowFormGrid {
  gap: var(--ct-spacing-s);
}
.ctFlowDialog .ctFlowFormColumns {
  gap: var(--ct-spacing-m);
}
.ctFlowDialog .ctFlowFormColumn {
  gap: var(--ct-spacing-xs);
}
.ctFlowDialog .ctFieldCheckboxGroup,
.ctFlowDialog .ctFieldRadioGroup {
  gap: 0;
}
/* Zurückhaltende vertikale Trennlinie zwischen Formular- und Anhänge-Spalte (nur wenn beide
   Spalten tatsächlich nebeneinander stehen, siehe @container-Regel oben). */
@container (min-width: 34rem) {
  .ctFlowDialog .ctFlowFormColumn--attachments {
    border-inline-start: 1px solid var(--ct-color-border-default);
    padding-inline-start: var(--ct-spacing-m);
  }
}
/* Textarea (Thema/Kurzbeschreibung): ausreichend, aber nicht übermäßig hoch — reine Layout-
   Vorgabe, keine harte Pixelgrenze (rows bleibt die semantische UI5-Property). */
.ctFlowDialog .sapMTextArea {
  min-height: 4.5rem;
}
.ctFlowDialog .sapMInputBaseInner,
.ctFlowDialog .sapMSelect {
  min-height: 2.25rem;
}

/* "Optional"-Chip neben dem Anhänge-Feld-Label (Mockup-Vorgabe, nur dort). */
.ctFlowFormLabelRow {
  gap: var(--ct-spacing-xs);
}
.ctFlowDialogOptionalChip {
  font-size: var(--ct-font-size-s);
  color: var(--ct-color-text-muted);
  background: var(--ct-color-surface-soft);
  border-radius: var(--ct-radius-pill);
  padding: 0.05rem 0.55rem;
}

/* Fehlermeldung (Auftrag Abschnitt 7): kompakter Alert statt einer wachsenden MessageStrip-Zeile,
   technische Details nur hinter "Details anzeigen". */
.ctFlowFormErrorStrip {
  margin-bottom: 0 !important;
}
.ctFlowFormErrorDetailToggle {
  font-size: var(--ct-font-size-s);
  margin-top: var(--ct-spacing-xxs);
}
.ctFlowFormErrorDetailText {
  display: block;
  font-size: var(--ct-font-size-s);
  color: var(--ct-color-text-muted);
  background: var(--ct-color-surface-sunken);
  border-radius: var(--ct-radius-control);
  padding: var(--ct-spacing-xs) var(--ct-spacing-s);
  margin-top: var(--ct-spacing-xxs);
  overflow-wrap: break-word;
}

/* ── ct.AttachmentField — Abschnitts-Feinschliff (Mockup-Abgleich 2026-09-05) ────────────────
   Datei-Upload/Zwischenablage als zwei erkennbare Unterbereiche statt eines gemischten Blocks;
   Formathinweis direkt unter der Dropzone; kompaktere Dropzone/Zeilen als zuvor; Zusammenfassung
   ("N Anhänge") + begrenzte, intern scrollbare Liste, damit viele Anhänge nicht die gesamte
   Dialoghöhe sprengen. */
.ctAttachmentFieldSection + .ctAttachmentFieldSection {
  margin-top: var(--ct-spacing-m);
}
.ctAttachmentFieldSectionTitle {
  font-size: var(--ct-font-size-s);
  font-weight: var(--ct-font-weight-bold, 600);
  color: var(--ct-color-text-muted);
  margin-bottom: var(--ct-spacing-xs);
}
.ctAttachmentFieldSummary {
  font-size: var(--ct-font-size-s);
  color: var(--ct-color-text-muted);
}
.ctAttachmentFieldDropzone {
  padding: var(--ct-spacing-m) var(--ct-spacing-m);
  gap: var(--ct-spacing-xxs);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
/* Nutzer-Auftrag 2026-09-05 (Auftrag Abschnitt 6): Hover-/Drag-over-Zustand mit CI-Tokens statt
   optisch reglos — Drag-over-Klasse wird von AttachmentField.ts bei ondragenter/-leave gesetzt. */
.ctAttachmentFieldDropzone:hover,
.ctAttachmentFieldDropzone--dragover {
  border-color: var(--ct-color-accent-blue);
  background: var(--ct-color-surface-soft);
}
.ctAttachmentFieldFormatHint {
  font-size: var(--ct-font-size-s);
  color: var(--ct-color-text-muted);
  margin-top: var(--ct-spacing-xxs);
}
.ctAttachmentFieldList {
  max-height: 12rem;
  overflow-y: auto;
  margin-top: var(--ct-spacing-xs);
}
.ctAttachmentFieldItem--large {
  align-items: center;
}
.ctAttachmentFieldThumb--large {
  width: 3.5rem;
  height: 3.5rem;
}
.ctAttachmentFieldItemActions {
  display: flex;
  align-items: center;
  gap: var(--ct-spacing-xxs);
  flex: 0 0 auto;
}
.ctAttachmentFieldReplaceBtn {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  border: none;
  background: transparent;
  color: var(--ct-color-text-muted);
  cursor: pointer;
  font-size: 1rem;
}
.ctAttachmentFieldReplaceBtn:hover {
  color: var(--ct-color-action-primary-background);
}
.ctAttachmentFieldReplaceBtn:focus-visible {
  outline: var(--ct-focus-width) solid var(--ct-color-brand-cyan);
  outline-offset: var(--ct-focus-offset);
}
/* Grün AUSSCHLIESSLICH hier (erfolgreiche Validierung) — keine sonstige Interaktion in diesem
   Control verwendet Grün (Auftrag Abschnitt 4 letzter Punkt). */
.ctAttachmentFieldStatusIcon {
  color: var(--ct-color-eval-positive, #17805e);
  font-weight: var(--ct-font-weight-bold, 600);
  margin-inline-start: var(--ct-spacing-xxs);
}
.ctAttachmentFieldStatusAnnouncement {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

/* Phone: Dropzone/Buttons über die volle Breite, kompaktere Zeilen — geerbt von den
   allgemeinen .ctFlowForm*-Regeln, hier nur die attachment-spezifische Feinjustierung. */
@media (max-width: 30rem) {
  .ctAttachmentFieldList {
    max-height: 9rem;
  }
}

/* Phone: einspaltig, Formular über die volle Breite, Aktionsleiste unten (kommt aus
   ct.ModalDialog#stretchOnPhone, hier nur sicherstellen, dass nichts horizontal überläuft). */
@media (max-width: 30rem) {
  .ctFlowFormColumns {
    flex-direction: column !important;
  }
}

/* Planungs-Dialog „LinkedIn veröffentlichen" (Nutzer-Fund 2026-09-15): das Bild lief über die
   volle Dialogbreite und schob Text- und Terminfeld unter den Falz — man musste erst scrollen,
   bevor überhaupt etwas bearbeitbar war. Aufteilung wie im Ergebnis-Detail: Vorschau links mit
   gedeckelter Höhe, Formular rechts. Unter Tablet-Breite stapelt die HBox über `wrap` wieder
   untereinander, dann nimmt die Vorschau die volle Breite ein. */
.ctScheduleSplit {
  gap: 1rem;
  align-items: flex-start;
  width: 100%;
}
.ctSchedulePreview {
  flex: 0 1 22rem;
  min-width: 0;
  border-radius: var(--ct-radius-card);
  border: 1px solid var(--ct-color-border-default);
  overflow: hidden;
  background: var(--ct-color-surface-sunken);
}
.ctSchedulePreviewImage {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(22rem, 45vh);
  object-fit: contain;
}
.ctScheduleForm {
  flex: 1 1 24rem;
  min-width: 0;
}
@media (max-width: 599px) {
  .ctSchedulePreview { flex-basis: 100%; }
  .ctScheduleForm { flex-basis: 100%; }
}

/* ADR-051: Fehler-/Diagnosekarte (RunDiagnosticsCard.js) + technische Kennungen */
.ctMono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem; word-break: break-all; }
.ctMutedText { color: var(--ct-text-muted, #6a6d70); font-size: 0.8125rem; }
.ctRunDiagnosticsCard .sapMLabel { color: var(--ct-text-muted, #6a6d70); }

/* Nutzer-Feedback 2026-09-21 (2. Runde, ADR-053 Nachtrag 4): KI-Aktionen (Neu generieren, Anpassen)
   NICHT per Text-Suffix, sondern per eigener Button-FARBE von manuellen Aktionen (Bearbeiten) und
   von der Folgeaktion (Primärfarbe) abheben — gefüllte Fläche in --ct-color-action-ai-background
   (tokens.css: Lila purple-600, heller als die Primäraktion), gilt in Dialog-Fußleisten, Tabellen-
   Aktionsspalte und Startdialog gleichermaßen. Icon `sap-icon://ai` (2026-09-22: das vorher
   verwendete `synthesize` existiert in UI5 1.120 nicht — leerer Icon-Platz verschob den Text).
   Spezifität bewusst über den generischen Footer-Regeln (.sapMBtnDefault, !important). */
.ctFlowDialogAiAction.sapMBtn .sapMBtnInner,
.ctModalDialog .sapMDialogFooter .ctFlowDialogAiAction.sapMBtn .sapMBtnInner {
  background-color: var(--ct-color-action-ai-background) !important;
  border-color: var(--ct-color-action-ai-background) !important;
  color: var(--ct-color-action-ai-text) !important;
  border-radius: var(--ct-radius-pill) !important;
}
.ctFlowDialogAiAction.sapMBtn .sapMBtnInner:hover,
.ctModalDialog .sapMDialogFooter .ctFlowDialogAiAction.sapMBtn .sapMBtnInner:hover {
  background-color: var(--ct-color-action-ai-background-hover) !important;
  border-color: var(--ct-color-action-ai-background-hover) !important;
}
.ctFlowDialogAiAction.sapMBtn .sapMBtnIcon,
.ctFlowDialogAiAction.sapMBtn .sapMBtnContent { color: var(--ct-color-action-ai-text) !important; }
.ctFlowDialogAiAction.sapMBtn.sapMBtnDisabled .sapMBtnInner { opacity: 0.5; }

/* ADR-053 Nachtrag 5: Reiter „Versionen" im Detail-Dialog eines Entwurfs. */
.ctDraftVersion { padding: 0.5rem 0.75rem; border: 1px solid var(--ct-color-border-default); border-radius: var(--ct-radius-card); margin-bottom: 0.5rem; }
.ctDraftVersionIsCurrent { border-color: var(--ct-color-action-ai-background); }
.ctDraftVersionTitle { font-weight: 600; }
.ctDraftVersionCurrent { color: var(--ct-color-action-ai-background); font-weight: 600; }
.ctDraftVersionPreview { color: var(--ct-color-text-muted); margin-top: 0.25rem; }

/* ADR-054: Meldungen des Business-Checks (Startdialog, Bestätigungsdialog). */
.ctBusinessCheckList .ctBusinessCheckMsg { width: 100%; }
.ctBusinessCheckInfo .sapMMsgStrip { margin-bottom: 0.25rem; }

/* Nutzer-Feedback 2026-09-23: Fußleiste des Detail-Dialogs — Icon-Buttons für App-Aktionen,
   Gruppen-Beschriftung „Überarbeiten" / „Folgeaktionen" mit Trennlinie; KI-Buttons in Normalschrift. */
.ctModalDialog .sapMDialogFooter .ctResultDetailFooter .ctFooterIconBtn.sapMBtn { margin-left: 0; }
.ctModalDialog .sapMDialogFooter .ctResultDetailFooter .ctFooterIconBtn.sapMBtn .sapMBtnInner { min-width: 2.25rem; padding: 0; }
.ctModalDialog .sapMDialogFooter .ctResultDetailFooter .ctFooterGroupLabel {
  margin-left: 0.75rem; padding-left: 0.75rem; border-left: 1px solid var(--ct-color-border-default);
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ct-color-text-muted);
  line-height: 2.25rem; white-space: nowrap;
}
.ctFlowDialogAiAction.sapMBtn .sapMBtnContent { font-weight: 400 !important; }
.ctModalDialog .sapMDialogFooter .ctResultDetailFooter .ctFooterGroup { column-gap: 0.25rem; row-gap: var(--ct-spacing-xs, 0.25rem); }
.ctModalDialog .sapMDialogFooter .ctResultDetailFooter .ctFooterGroup > .sapMBtn { margin-left: 0; }
/* Nutzer-Feedback 2026-09-23 (Messung Smoke D0c): der sap.m.Dialog-Fußbereich hatte eine feste Höhe —
   eine umgebrochene zweite Zeile der Aktionsleiste lag außerhalb des Dialogs (abgeschnitten). */
.ctModalDialog .sapMDialogFooter { height: auto !important; min-height: 3rem; }
.ctModalDialog .sapMDialogFooter .sapMIBar.ctResultDetailFooter, .ctModalDialog .sapMDialogFooter .sapMIBar.ctResultDetailFooter .sapMTBContent { height: auto !important; }
/* Nutzer-Feedback 2026-09-23 (2. Runde): keine Gruppen-Beschriftungen, nur Trennlinien; runde Hover-
   Fläche der Icon-Buttons (passend zu den Pillen-Buttons); Löschen als eigene Gruppe mit Abstand. */
.ctModalDialog .sapMDialogFooter .ctResultDetailFooter .ctFooterGroup { margin-left: 0.5rem; padding-left: 0.75rem; border-left: 1px solid var(--ct-color-border-default); min-height: 2.25rem; }
.ctModalDialog .sapMDialogFooter .ctResultDetailFooter .ctFooterIconBtn.sapMBtn .sapMBtnInner { border-radius: var(--ct-radius-pill) !important; min-width: 2.25rem; width: 2.25rem; }
.ctModalDialog .sapMDialogFooter .ctResultDetailFooter .ctFooterGroup > .sapMBtn + .sapMBtn { margin-left: 0.375rem; }
.ctDraftVersionFull { white-space: pre-wrap; margin-top: 0.25rem; }

/* ADR-055: Vorschau der Aktionsleiste im Admin-Dialog (gleiche Optik wie die Fußleiste). */
.ctActionBarPreview { padding: 0.5rem 0.75rem; border: 1px dashed var(--ct-color-border-default); border-radius: var(--ct-radius-card); justify-content: flex-end; column-gap: 0.25rem; min-height: 3rem; }
.ctActionBarPreview .ctFooterGroup { margin-left: 0.5rem; padding-left: 0.75rem; border-left: 1px solid var(--ct-color-border-default); }
.ctActionBarPreview .ctFooterGroup:first-child { margin-left: 0; padding-left: 0; border-left: 0; }
.ctActionBarPreview .ctFlowDialogAiAction.sapMBtn .sapMBtnInner { background-color: var(--ct-color-action-ai-background) !important; border-color: var(--ct-color-action-ai-background) !important; color: var(--ct-color-action-ai-text) !important; border-radius: var(--ct-radius-pill) !important; }
.ctActionBarPreview .ctFlowDialogAiAction.sapMBtn .sapMBtnIcon, .ctActionBarPreview .ctFlowDialogAiAction.sapMBtn .sapMBtnContent { color: var(--ct-color-action-ai-text) !important; }
.ctModalDialog .sapMDialogFooter .ctResultDetailFooter .ctFooterGroup:first-child { margin-left: 0; padding-left: 0; border-left: 0; }

/* ── sap.m.Link Fokus (Nutzer-Fund 2026-09-23, Versionen-Tab „Text einklappen"): das UI5-Theme
   hinterlegt einen fokussierten Link (auch nach Mausklick) mit --sapContent_FocusColor (Dunkelblau)
   — mit der per Tenant-CSS erzwungenen Textfarbe wird der Link dadurch unlesbar. Projektweit:
   kein Hintergrund, Maus-Fokus ohne Rahmen, Tastatur-Fokus (focus-visible) als dezenter Ring in
   der Linkfarbe. */
.sapMLnk:focus {
  background-color: transparent !important;
  outline: none !important;
}
.sapMLnk:focus-visible {
  outline: 2px solid color-mix(in srgb, currentColor 55%, transparent) !important;
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── ADR-055 Nachtrag 2: Split-Buttons in Liste/Karte (ActionBarRenderer#buildListSplits) — Stil folgt
   dem Hauptsegment: KI-Aktion lila (wie .ctFlowDialogAiAction), sonst dunkle Primärfläche des Basis-Controls. */
.ctListSplit.ctListSplit--style-ai {
  background: var(--ct-color-action-ai-background);
}
.ctListSplit.ctListSplit--style-ai .ctFollowUpSplitButtonMain,
.ctListSplit.ctListSplit--style-ai .ctFollowUpSplitButtonChevron {
  color: var(--ct-color-action-ai-text);
}
.ctListSplit.ctListSplit--style-ai .ctFollowUpSplitButtonMain:hover,
.ctListSplit.ctListSplit--style-ai .ctFollowUpSplitButtonChevron:hover {
  background: var(--ct-color-action-ai-background-hover);
}

/* ── ADR-056 Anzeigefelder im Startdialog + ADR-054 Nachtrag 1 Feld-Check ─────────────────── */
.ctFlowDisplayField { padding: 0.5rem 0.75rem; border: 1px solid var(--ct-color-border-default); border-radius: var(--ct-radius-card); background: color-mix(in srgb, var(--ct-color-border-default) 18%, white); }
.ctFlowDisplayField--status { padding: 0.25rem 0; border: none; background: transparent; }
.ctFlowDisplayMarkdown ul { margin: 0.25rem 0 0.25rem 1.25rem; padding: 0; }
.ctFlowDisplayImage { max-width: 100%; max-height: 18rem; object-fit: contain; border-radius: var(--ct-radius-card); }
.ctFlowDisplayReferenceTitle { font-weight: 600; }
.ctFlowDisplayReferenceRow { gap: 0.75rem; margin-top: 0.25rem; }
.ctFlowDisplayReferenceLabel { color: var(--ct-color-text-muted); min-width: 9rem; }
.ctFlowFieldAdjusted .sapMInputBaseInner, .ctFlowFieldAdjusted.sapMSlt { box-shadow: inset 0 0 0 2px var(--ct-color-action-primary-background); }
.ctFieldCheckBox--pending { opacity: 0.6; }
.ctFormInitReload.sapMBtn .sapMBtnContent { font-size: var(--ct-font-size-s); }

/* ── ADR-055 Nachtrag 3 (Nutzer-Feedback 2026-09-24): Split-Buttons in Liste/Karte optisch wie die
   Einzel-Buttons daneben — gleiche Höhe wie .sapMBtn (2.75rem cozy), Icon im Hauptsegment, kompaktes
   Menü ohne Auswahl-Haken. */
.ctListSplit.ctFollowUpSplitButton { height: 2.75rem; }
.ctFollowUpSplitButtonIcon { font-size: 1rem; line-height: 1; margin-right: 0.5rem; }
.ctFollowUpSplitButtonMenu--compact .ctFollowUpSplitButtonMenuItem { min-height: 2.25rem; padding: 0.25rem 0.875rem; font-size: var(--ct-font-size-s); font-weight: var(--ct-font-weight-regular, 400); }
.ctFollowUpSplitButtonMenu--compact .ctFollowUpSplitButtonMenuItem--selected { background: transparent; font-weight: inherit; }

/* ── CI-Farben in Admin-Dialogen/Popovers (Nutzer-Feedback 2026-09-24, Feld-Editor/Anhang-Dialog):
   das UI5-Theme färbt Auswahl-Listen, Checkbox-Haken, Radio-Buttons und Fokusrahmen in SAP-Blau —
   über die Theme-Variablen auf die Plattform-Primärfarbe umgehängt (dasselbe Muster wie
   .ctModalDialogTabs), gescopt auf Dialoge und Popovers, damit Kacheln/Seiten unberührt bleiben. */
.sapMDialog, .sapMPopover, .sapMSelectList, .sapMSltPicker {
  --sapSelectedColor: var(--ct-color-action-primary-background);
  --sapContent_Selected_ForegroundColor: var(--ct-color-action-primary-background);
  --sapHighlightColor: var(--ct-color-action-primary-background);
  --sapContent_FocusColor: var(--ct-color-action-primary-background);
  --sapList_SelectionBackgroundColor: color-mix(in srgb, var(--ct-color-action-primary-background) 10%, white);
  --sapList_SelectionBorderColor: var(--ct-color-action-primary-background);
  --sapList_Hover_Background: color-mix(in srgb, var(--ct-color-action-primary-background) 6%, white);
  --sapField_Hover_BorderColor: var(--ct-color-action-primary-background);
  --sapField_Focus_BorderColor: var(--ct-color-action-primary-background);
  --sapButton_Lite_TextColor: var(--ct-color-action-primary-background);
  --sapLinkColor: var(--ct-color-action-primary-background);
}
.ctFormSchemaEditor .sapMListTblCell { vertical-align: top; }
.ctFormSchemaEditor .sapMBtn .sapMBtnInner { white-space: nowrap; }

/* ── Nutzer-Feedback 2026-09-24 („Anpassen-Buttons zu groß, ragen über die Kachel hinaus", danach
   „Buttons jetzt in zwei Zeilen"): Buttons/Split-Buttons sind in der Karte kompakter (2.5rem) als in
   Dialog-Fußleisten UND schmaler (Segment-Padding, Chevron-Breite, Icon-Abstand, Button-Innenabstand),
   damit „Anpassen ▾" + „Bild generieren" bei der Kartenbreite des Kartenbands in EINER Zeile bleiben.
   Umbruch bleibt nur als letzter Ausweg (statt Überlauf) für sehr schmale Karten. */
.ctResultCardActions { flex-wrap: wrap; row-gap: 0.375rem; gap: 0.375rem; }
/* Nutzer-Feedback 2026-09-24 (3. Runde, „Grundlinie hat noch nicht funktioniert"): sap.m.Button trägt
   außen 0.25rem vertikales Padding (cozy) — mit 2.5rem Innenfläche ragte die sichtbare Fläche 4 px nach
   unten über die (im Smoke gemessene) äußere Box hinaus. Padding weg, Innenfläche = äußere Box. */
.ctResultCardActions .sapMBtn { height: 2.5rem; min-height: 2.5rem; padding: 0; }
.ctResultCardActions .sapMBtn .sapMBtnInner { height: 2.5rem; min-height: 2.5rem; line-height: 2.5rem; padding-left: 0.625rem; padding-right: 0.625rem; }
/* Nutzer-Feedback 2026-09-24 (4. Runde, „Anpassen steht etwas tiefer als Bild generieren"): UI5 setzt Text/
   Icon im Button auf line-height 34 px mit vertical-align top — in der 38-px-Innenfläche (40 px − Rahmen)
   sitzt der Text dadurch 2 px über der Mitte, während der Split-Button (Flex, zentriert) exakt mittig ist.
   Beide exakt mittig: Zeilenhöhe = Innenfläche. Äußere Boxen/Grundlinie bleiben unverändert. */
.ctResultCardActions .sapMBtn .sapMBtnInner .sapMBtnContent,
.ctResultCardActions .sapMBtn .sapMBtnInner .sapMBtnIcon { line-height: 2.375rem; height: 2.375rem; }
/* Nutzer-Auftrag 2026-09-24 („Löschen als Default auf jeder Karte sichtbar", ADR-055 Nachtrag 5): das
   Löschen-Symbol steht als eigener Icon-Button in der KOPFZEILE der Karte rechts oben (ResultCard#headerActions)
   — die Fußzeile hat bei Kartenbreite für Element-Aktion + Folgeaktion + Löschen nachweislich keinen Platz
   (gemessen: 289 px Aktionen bei 291 px verfügbar, Löschen rutschte in eine zweite Zeile). */
.ctResultCardHeaderActions {
  position: absolute; top: 0.5rem; right: 0.5rem; z-index: 3;
  display: flex; align-items: center; gap: 0.25rem;
}
.ctResultCardHeaderActions .sapMBtn { height: 2.25rem; min-height: 2.25rem; width: 2.25rem; min-width: 2.25rem; padding: 0; }
.ctResultCardHeaderActions .sapMBtn .sapMBtnInner { height: 2.25rem; min-height: 2.25rem; width: 2.25rem; min-width: 2.25rem; padding: 0; line-height: 2.25rem; }
/* ADR-055 Nachtrag 6 (Christian, 2026-09-24): Karte zeigt NUR Folgeaktionen + Löschen, alles unten in der
   Fußzeile — Löschen als schmaler Icon-Button (2 rem) rechts außen; Kopfzeilen-Aktionen bleiben als
   Control-Fähigkeit erhalten, werden von der Inbox-App aber nicht mehr belegt. */
.ctResultCardActions .ctListStandalone--delete.sapMBtn { width: 2rem; min-width: 2rem; }
.ctResultCardActions .ctListStandalone--delete.sapMBtn .sapMBtnInner { padding-left: 0; padding-right: 0; width: 2rem; min-width: 2rem; }
.ctResultCardActions .sapMBtn .sapMBtnContent { font-size: var(--ct-font-size-s); }
/* Nutzer-Feedback 2026-09-24 („Buttons sind nicht auf einer Grundlinie"): der 1px-Rahmen des Split-Buttons
   wurde zur Höhe addiert (42 statt 40 px) und sein Text war fett, der KI-Einzel-Button daneben normal —
   box-sizing + gleiche Schriftstärke (Fußleisten-Konvention: KI-Aktionen in Normalschrift). */
.ctResultCardActions .ctListSplit.ctFollowUpSplitButton { height: 2.5rem; box-sizing: border-box; min-inline-size: 0; }
.ctResultCardActions .ctListSplit .ctFollowUpSplitButtonMain { padding: 0 0.625rem; }
.ctResultCardActions .ctListSplit .ctFollowUpSplitButtonMain,
.ctResultCardActions .ctListSplit .ctFollowUpSplitButtonChevron { font-weight: var(--ct-font-weight-regular, 400); }
.ctResultCardActions .ctListSplit .ctFollowUpSplitButtonMainText { font-size: var(--ct-font-size-s); }
.ctResultCardActions .ctListSplit .ctFollowUpSplitButtonIcon { margin-right: 0.375rem; }
.ctResultCardActions .ctListSplit .ctFollowUpSplitButtonChevron { width: 2rem; min-width: 2rem; }

/* ── ADR-058: Business-Flow-Konfiguration — Workflow-Tabelle (Detail + Dialog) ──────────────── */
.erpWfKind { font-weight: 600; }
.erpWfPath { font-family: var(--ct-font-family-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); font-size: var(--ct-font-size-s); word-break: break-all; }
.erpWfOverview.sapUiForm .sapUiFormResGridLayout { padding-top: 0; }
.erpWfTabs .sapMITBContent { padding: 0.75rem 0 0; }

/* ── ADR-059: Inbox-Filterleiste (InboxFilterBar.js) — Eingang + Ergebnisse der Folgeaktionen ─────── */
.ibxFilterHost { margin-bottom: 0; }
.ibxFilterBar.sapMTB { background: transparent; border: none; padding-left: 0; height: auto; min-height: 2.75rem; flex-wrap: wrap; }
.ibxFilterBar .ibxFilterSearch { max-width: 100%; }
.ibxFilterBar .ibxFilterCount { white-space: nowrap; }
.ibxFilterPopover .ibxFilterSectionTitle { font-size: var(--ct-font-size-s); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ct-color-text-muted); margin: 0.75rem 0 0.25rem; }
.ibxFilterPopover .ibxFilterSectionTitle:first-child { margin-top: 0; }
.ibxFilterPopover .ibxFilterList .sapMLIB { padding-top: 0.125rem; padding-bottom: 0.125rem; min-height: 2.25rem; }
.ibxFilterPopover .ibxFilterQuickBox .sapMCb { margin-left: -0.5rem; }
@media (max-width: 600px) {
  .ibxFilterBar .ibxFilterSearch { width: 100% !important; }
}
.ibxFilterPopover .ibxFilterPeriodRow { gap: 0.25rem; }