/* ─── 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;
}

.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): auf schmalen Bildschirmen nimmt 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 — Umbruch statt Kürzung ist hier
   sinnvoller als der abgeschnittene Text (gilt für ALLE ct:PageHeader-Titel, nicht nur die
   Begrüßung, da auch andere Seitentitel auf schmalen Bildschirmen betroffen wären). */
@media (max-width: 480px) {
  .ctPageHeaderTitle {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

.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); }

.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);
}

.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); }

.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 ─────────────────────────────────────────────────── */

.ctSideNavigation--vertical {
  background: var(--ct-color-surface-navigation);
  height: 100%;
  padding: var(--ct-spacing-m) 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%;
  /* Abstand verringert (Sidebar-Feinschliff, Nutzer-Auftrag 2026-08-20: "mehrere Menüpunkte
     anzeigen können") — vormals --ct-spacing-s. Icon+Label nebeneinander (flex), vormals reiner
     Text-Block. */
  padding: var(--ct-spacing-xs) var(--ct-spacing-l);
  color: var(--ct-color-text-on-navigation);
  opacity: 0.8;
  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: rgba(255, 255, 255, 0.08);
}
.ctSideNavigation--vertical .ctSideNavigationItem--selected {
  opacity: 1;
  background: rgba(255, 255, 255, 0.14);
  font-weight: var(--ct-font-weight-bold);
  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-color-text-on-navigation);
  opacity: 0.65;
}
.ctSideNavigationSubItem:hover {
  opacity: 0.9;
  background: rgba(255, 255, 255, 0.06);
}
.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;
  /* 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-Feedback 2026-08-20: die violette Fläche muss über die volle Höhe reichen (Logo bis
     Fußbereich), nicht nur hinter der Bereichs-Liste. .ctAppSidebar (VBox) hat zwar ebenfalls
     background gesetzt, füllt aber nicht zuverlässig die volle Flex-Höhe — hier auf dem
     strukturellen AppShell-Wrapper (garantiert höhengleich zu .ctAppShellBody) ist es robust. */
  background: var(--ct-color-surface-navigation);
  /* 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;
}

.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;
}

.ctAppSidebarLogo {
  /* Nutzer-Feedback 2026-08-25 (Wiederholte Runden): der Abstand zum Claim darunter wurde bisher
     über einen negativen margin-top auf .ctAppSidebarProductSubtitle wegkorrigiert — laut
     DevTools-Box-Modell korrekt angewendet, blieb visuell aber unverändert (vermutlich Effekt
     eines VBox-Item-Wrappers, der die Höhenreduktion nicht nach außen durchreicht). Robuster:
     padding-bottom dieser Zeile selbst direkt verkleinert (siehe padding-block-end unten) statt
     hinterher über den Nachbarn zu kompensieren. */
  padding-block: var(--ct-spacing-m) 0.25rem;
  padding-inline: var(--ct-spacing-l);
  gap: var(--ct-spacing-xs);
}

/* Sowohl echtes Tenant-Logo als auch der Christian-Platzhalter (2026-08-20) nutzen dieselbe
   Größe/Passung. */
.ctAppSidebarLogoImg {
  max-height: 2.5rem;
  max-width: 10rem;
  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. */
.ctAppSidebarWordmarkImg {
  max-height: 3.02rem;
  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):
   nur der Pfeil 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-Pfeils. Rechtsbündig über die umgebende HBox (justifyContent="End" in
   App.view.xml), nicht mehr über align-self (siehe dortiger Kommentar). */
.ctAppSidebarToggleRow {
  padding: 0 var(--ct-spacing-m) var(--ct-spacing-xs) var(--ct-spacing-l);
}
.ctAppSidebarToggle .sapMBtnInner {
  background: transparent !important;
  border-color: transparent !important;
}
/* 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-color-text-on-navigation) !important;
  opacity: 0.75;
}
.ctAppShellNav .ctAppSidebarToggle .sapMBtnInner:hover .sapMBtnIcon.sapMBtnIcon {
  opacity: 1;
}

.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 rgba(255, 255, 255, 0.14);
  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: rgba(255, 255, 255, 0.08) !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-color-text-on-navigation);
}
/* Nutzer-Feedback 2026-08-21 (3): die geteilte Badge-Größe (.ctAppTileIcon--badge, 2.25rem/
   1.125rem — richtig für Kacheln) wirkte im schmalen Sidebar-Kontext zu groß und trieb den
   Zeilenabstand der "Zuletzt verwendet"-Liste deutlich über den der Bereichs-Navigation
   (dortige Icons haben keine feste Box, nur font-size:1.125rem ohne Hintergrund). Hier gezielt
   verkleinert (1.5rem/0.8rem statt 2.25rem/1.125rem), damit die Zeilenhöhe an die Navigation
   herankommt — Icons bleiben dabei klar voneinander getrennt (kein Berühren), siehe Mockup
   business-automation-platform/Images/ui-design/02-app-launcher.png ("Zuletzt verwendet":
   deutlich kleinere Icon-Quadrate als die Kacheln selbst). */
.ctAppSidebarRecentIcon.ctAppTileIcon--badge {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.8rem;
}
/* Nutzer-Feedback 2026-08-21, Korrektur: die vorherige Umstellung auf eine halbtransparente
   WEISSE Badge-Fläche war eine Fehlinterpretation — laut Mockup
   (business-automation-platform/Images/ui-design/02-app-launcher.png, Bereich "Zuletzt
   verwendet") behält jedes Icon SEINE EIGENE Kategoriefarbe als Hintergrund (z. B. Grün für
   "Meine Vertretungen", passend zur Kachel), auch auf dem dunklen Sidebar-Grund.
   Fehleranalyse (3): die Badge-HBox ist ein sap.m.FlexBox — JEDER Wert von backgroundDesign
   (Transparent/Solid/Translucent) bekommt vom sap_horizon-Theme eine EIGENE, erzwungene
   background-color-Klasse (".sapMFlexBoxBGTransparent{background-color:transparent}" bzw.
   ".sapMFlexBoxBGSolid,.sapMFlexBoxBGTranslucent{background-color:#fff}") — es gibt keinen Wert,
   der "unangetastet lassen" bedeutet. Diese Klassen laden NACH controls.css und gewinnen bei
   gleicher Spezifität, egal welchen backgroundDesign-Wert die HBox in App.view.xml trägt. Hier
   deshalb pro Kategorie explizit mit höherer Spezifität (2 statt 1 Klasse) + !important
   überschrieben, damit die Kategoriefarbe zuverlässig gewinnt. */
.ctAppSidebarRecentIcon.ctAppTileIcon--cat-1 { background: color-mix(in srgb, var(--ct-color-category-1) 15%, white) !important; }
.ctAppSidebarRecentIcon.ctAppTileIcon--cat-2 { background: color-mix(in srgb, var(--ct-color-category-2) 15%, white) !important; }
.ctAppSidebarRecentIcon.ctAppTileIcon--cat-3 { background: color-mix(in srgb, var(--ct-color-category-3) 15%, white) !important; }
.ctAppSidebarRecentIcon.ctAppTileIcon--cat-4 { background: color-mix(in srgb, var(--ct-color-category-4) 15%, white) !important; }
.ctAppSidebarRecentIcon.ctAppTileIcon--cat-5 { background: color-mix(in srgb, var(--ct-color-category-5) 15%, white) !important; }
.ctAppSidebarRecentIcon.ctAppTileIcon--cat-6 { background: color-mix(in srgb, var(--ct-color-category-6) 15%, white) !important; }
.ctAppSidebarRecentIconImg {
  max-width: 1.5rem;
  max-height: 1.5rem;
  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-color-text-on-navigation) !important;
}

.ctAppSidebarSpacer {
  flex: 1 1 auto;
}

.ctAppSidebarFooter {
  padding: var(--ct-spacing-m) var(--ct-spacing-l);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.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-color-text-on-navigation) !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-color-text-on-navigation) !important;
  opacity: 0.7;
  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;
}
.ctAppShellNav--collapsed .ctAppSidebarLogoImg {
  max-width: 2.5rem;
}
/* Nutzer-Feedback 2026-08-21 (Fehleranalyse): .ctAppSidebarLogo hat im breiten Zustand einen
   horizontalen Innenabstand (--ct-spacing-l), der das Logo dort optisch links ausgerichtet
   zeigt (so gewollt) — im schmalen Rail-Zustand macht genau dieser Abstand das verkleinerte
   Logo sichtbar außermittig (nach rechts verschoben) statt zentriert, da HBox ohne eigenes
   justify-content standardmäßig linksbündig ist. Analog zu Toggle-Zeile/Footer/Recent-Icons
   unten hier ebenfalls zentrieren + Innenabstand zurücksetzen. */
.ctAppShellNav--collapsed .ctAppSidebarLogo {
  justify-content: center;
  padding-inline: 0;
}
.ctAppShellNav--collapsed .ctAppSidebarToggleRow {
  justify-content: center;
  padding-inline: 0;
}
/* 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: rgba(255, 255, 255, 0.14);
  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);
  padding: var(--ct-spacing-xs) var(--ct-spacing-xs) 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: var(--ct-spacing-xs) 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-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;
}

/* ── 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);
}

.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;
}

/* ── 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. */
.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;
  overflow: auto;
  pointer-events: none;
  color: var(--ct-color-text-default);
}
.ctHighlightedTextAreaInput {
  position: relative;
  display: block;
  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;
}

/* ── 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-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;
}