/* ─── ERP Launchpad — Custom Styles ──────────────────────────────────────── */

/* Site-weite Zweitfarbe (Leitungskennzeichnung im Organigramm u. a. — NICHT nur Login-spezifisch,
   deshalb hier statt im Login-Abschnitt weiter unten). CD-Manual-Grün ("Ergänzung") #336666
   (2026-08-10, Nutzer-Anlage CD Manual v2.0) — dieselbe Farbe wie --erp-position-occupied-color,
   da das CD Manual keine fünfte Akzentfarbe vorsieht. Ohne diese Definition würden einzelne
   Verwendungsstellen auf einen abweichenden eigenen Fallback zurückfallen — deshalb zentral
   gesetzt. */
:root {
    --erp-accent-color: #336666;
}

/* Nutzer-Auftrag 2026-09-08 ("blaue Farbe über CSS unserem Farbraum anpassen => violett"): der
   sap.m.BusyIndicator (z. B. InboxApp.view.xml während /busy) zeigte SAP-Horizon-Standardblau
   (#0064D9) statt der App-Markenfarbe. Live-DevTools-Fund: die drei animierten Punkte selbst
   tragen keine sichtbare Farbe, das Blau kommt über ihr `::before`-Pseudoelement
   (`.sapUiLocalBusyIndicatorAnimStandard > div::before`). App-weit (nicht nur Inbox) auf Plum
   umgestellt, da JEDE App im Produkt denselben BusyIndicator nutzen kann. */
.sapUiLocalBusyIndicatorAnimStandard > div::before {
    background-color: var(--ct-color-brand-plum, #483f59) !important;
}

/* ─── App-CSS-Grundsatz (Nutzer-Entscheidung 2026-08-10, Primärfarbe aktualisiert 2026-08-21) ──
   Vollständiges kunden-/CI-Branding (Blau #003366 · Korall #FF6666 · Gelb
   #F8B716 · Grün #336666 nach CD Manual v2.0) lebt AUSSCHLIESSLICH in der
   mandantenspezifischen Custom-CSS-Datei (Administration → Mandant & Branding
   → „Eigenes CSS", siehe [[nginx-css-regex-uploads-bug]] für die zugehörige
   nginx-Reparatur). OHNE eine solche Datei soll die App aber auch nicht wie
   eine unveränderte SAP-Oberfläche wirken (Nutzer-Feedback 2026-08-10: "in
   einer Standardauslieferung ohne kundeneigenes CSS sollen vor allen Dingen
   Grautöne verwendet werden und eventuell unser cohrteam-Blau") — diese Datei
   definiert daher eine eigenständige, neutrale STANDARD-Optik: überwiegend
   Grau-/Anthrazittöne aus der CD-Manual-Neutralpalette (Text #1C2532, Grau
   #5D6C7B — bewusst NICHT erfunden, sondern bereits Teil des CD Manuals).
   Listen-Redesign 2026-08-21 (neues Mockup-Zielbild): die bisher an genau drei
   Stellen als leiser Wiedererkennungswert hartkodierte cohrteam-Navy
   (#003366 — Primär-Buttons, aktiver Bereichs-Tab, Fokus-Rahmen) ist jetzt an
   genau denselben drei Stellen auf das ADR-028-Token
   --ct-color-action-primary-background (Indigo/Violett) umgehängt — damit
   folgt die Standard-Optik konsistent dem systemweiten Farbwechsel statt einem
   zweiten, unabhängigen Navy-Wert zu pflegen. Eine hochgeladene Tenant-CSS-
   Datei überschreibt diese Standard-Optik weiterhin vollständig — dafür ist
   JEDE Regel hier bewusst auf die Selektor-Spezifität der (als Vorlage
   dienenden) cohrteam-Tenant-CSS-Datei abgestimmt (Einzelklassen-Selektoren,
   keine Verkettung wie ".sapMBar.sapMPageHeader"): bei gleicher Spezifität +
   !important entscheidet die DOM-Reihenfolge, und die per BrandingLoader.js
   NACH dieser Datei eingehängte Tenant-CSS gewinnt zuverlässig. Eine höhere
   Spezifität hier würde das verhindern, selbst wenn eine Tenant-Datei eine
   andere Farbe vorgibt. */
.sapMBtnEmphasized {
    background-color: var(--ct-color-action-primary-background) !important;
    border-color: var(--ct-color-action-primary-background) !important;
}
.sapMBtnEmphasized:hover {
    background-color: var(--ct-color-action-primary-background-hover) !important;
    border-color: var(--ct-color-action-primary-background-hover) !important;
}
.sapMBtnEmphasized:active,
.sapMBtnEmphasized.sapMBtnActive {
    background-color: var(--ct-color-action-primary-background-active) !important;
    border-color: var(--ct-color-action-primary-background-active) !important;
}
/* Listen-Redesign 2026-08-21: dezent rundere Ecken (Mockup-Anmutung) statt UI5-Theme-Standard. */
.sapMBtnEmphasized {
    border-radius: var(--ct-radius-control) !important;
}
/* Nutzer-Feedback 2026-08-22: der DE/EN-Sprachumschalter (TranslatableField.js, ADR-015)
   markiert die aktive Sprache über einen Emphasized-Button — das ist bewusst KEINE Primär-
   Aktion und soll nicht dieselbe kräftige Akzentfarbe wie "Antrag stellen"/"Genehmigen" tragen
   ("weniger prominente Farbe"). Höhere Spezifität (.erpI18nToggle + .sapMBtnEmphasized) gewinnt
   gegen die generische Regel oben.
   KORREKTUR (Nutzer-Feedback 2026-08-22, Live-Test): --ct-palette-neutral-700 ist selbst ein
   dunkler, gedeckter Ton und wirkte neben der (ebenfalls dunklen, gedeckten) Primärfarbe
   violet-700 optisch kaum unterschieden. Statt eines weiteren dunklen Tons jetzt ein HELLER
   Pillen-Hintergrund (neutral-100) mit dunklem Text — klar von jedem Primär-/Emphasized-Button
   im Rest der App unterscheidbar, passend zur geforderten "weniger prominenten" Wirkung. Der
   INAKTIVE Tab (Default-Button) zeigte zusätzlich SAP-Standard-Blau als Textfarbe (Theme-
   Default für sap.m.Button type="Default") — hier ebenfalls explizit auf den gedämpften
   Text-Ton der Palette umgestellt statt der UI5-Vorgabe. */
/* Live-Test 2026-08-22: eine Tenant-CSS-Regel (nicht im Repo, direkt auf dem Host gepflegt,
   siehe .sapMBtnInner.sapMBtnEmphasized in der Branding-CSS) setzt jede Emphasized-Button-
   Hintergrundfarbe global auf die Primärfarbe #483F59 — mit !important UND einer nach
   erp-launchpad.css geladenen Tenant-CSS-Datei gewinnt sie gegen eine gleich spezifische Regel
   hier immer. Deshalb hier zusätzlich auf .sapMBtnInner zielen (höhere Spezifität: 3 statt 2
   Klassen) UND !important setzen, um den DE/EN-Umschalter zuverlässig zu überstimmen. */
.erpI18nToggle .sapMBtnInner.sapMBtnEmphasized {
    background-color: var(--ct-palette-neutral-100) !important;
    border-color: var(--ct-palette-neutral-100) !important;
}
.erpI18nToggle .sapMBtnInner.sapMBtnEmphasized .sapMBtnContent,
.erpI18nToggle .sapMBtnInner.sapMBtnEmphasized .sapMBtnIcon {
    color: var(--ct-color-text-default) !important;
}
.erpI18nToggle .sapMBtnInner.sapMBtnDefault {
    background-color: transparent !important;
    border-color: var(--ct-palette-neutral-300) !important;
}
.erpI18nToggle .sapMBtnInner.sapMBtnDefault .sapMBtnContent,
.erpI18nToggle .sapMBtnInner.sapMBtnDefault .sapMBtnIcon {
    color: var(--ct-color-text-muted) !important;
}
/* Nutzer-Feedback 2026-08-12: der bisherige Versuch über CSS-Custom-Properties
   (--sapSwitch_OnBackground) griff nicht — sap_horizon (UI5 1.120.23) verdrahtet die
   "An"-Farbe des Switch-Controls fest auf #0064d9 (SAP-Blau) statt eine Variable zu lesen
   (siehe .sapMSwtOn:not(.sapMSwtAcceptReject) in resources/sap/m/themes/sap_horizon/library.css).
   Direkter Override auf denselben Selektor statt einer wirkungslosen Variable. */
.sapMSwtOn:not(.sapMSwtAcceptReject) {
    background: #5D6C7B !important;
    border-color: #5D6C7B !important;
}
.sapMSwtOn:not(.sapMSwtAcceptReject):hover {
    background: #52606d !important;
    border-color: #52606d !important;
}
/* Verengt von .sapMListTbl auf .ctDataTable (2026-08-20, AP4-Nachtrag): seit der Migration
   der letzten 14 Views mit rohem sap.m.Table nutzt die App ausschließlich noch ct.DataTable —
   kein globaler Treffer auf sap.m.Table-DOM mehr nötig (UID-007). */
.ctDataTable .sapUiIcon {
    color: #5D6C7B !important;
}
.sapMITBSelected {
    color: var(--ct-color-action-primary-background) !important;
}
.sapMITBItem:not(.sapMITBSelected) {
    color: #5D6C7B !important;
}
/* Nutzer-Fund 2026-09-15 (störende SAP-Fokusrahmen): die frühere Zusatzregel
   `.sapMBtn:focus-visible .sapMBtnInner { outline }` legte einen DRITTEN Ring über die beiden
   Theme-Ringe von sap_horizon (siehe controls.css, Abschnitt "Button-Fokus") — entfernt, Buttons
   bekommen ihren einen Tastatur-Fokusring jetzt ausschließlich aus dem Theme. Eingabefelder
   behalten ihren eigenen Ring unverändert (Rahmen ist dort Bestandteil der Gestaltung). */
.sapMInputBaseInner:focus {
    outline: 2px solid var(--ct-focus-color) !important;
    outline-offset: 1px;
}

/* Kachel: Wrapper für relative Positionierung von Icon und Stern */
.erp-tile-content-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 0.25rem;
    box-sizing: border-box;
}

/* App-Icon: unten links */
.erp-tile-app-icon {
    position: absolute;
    bottom: 0.25rem;
    left: 0.5rem;
}

/* Favoriten-Stern: oben rechts */
.erp-favorite-btn {
    position: absolute !important;
    top: -0.75rem;
    right: -0.25rem;
    min-width: 2rem !important;
    min-height: 2rem !important;
    padding: 0 !important;
    line-height: 2rem !important;
    z-index: 10;
}

/* Favoriten-Stern — Farbe je nach Zustand */
.erp-favorite-btn .sapUiIcon {
    color: #c0c0c0; /* grau = kein Favorit */
    font-size: 1rem;
    transition: color 0.15s ease, transform 0.1s ease;
}

.erp-favorite-btn:hover .sapUiIcon,
.erp-favorite-btn:focus .sapUiIcon {
    color: #f0ab00; /* Hover: gold/gelb */
    transform: scale(1.15);
}

/* Aktiver Favorit: gelb gefüllt */
.erp-favorite-active .sapUiIcon {
    color: #f0ab00 !important; /* gelb */
}

/* Favoriten-Button: kein Rahmen/Border und kein Background in allen interaktiven Zuständen.
   Nur das Icon selbst soll beim Hover hervorgehoben werden, kein Button-Kasten sichtbar. */
.erp-favorite-btn.sapMBtn:hover,
.erp-favorite-btn.sapMBtn.sapMBtnHoverable:hover,
.erp-favorite-btn.sapMBtn:active,
.erp-favorite-btn.sapMBtn.sapMBtnActive,
.erp-favorite-btn.sapMBtn:focus,
.erp-favorite-btn.sapMBtn:focus-visible {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ─── Stabile Scrollbar-Reservierung ─────────────────────────────────────────
   Verhindert horizontales "Ruckeln" bei Navigation: kurze Seiten (Login) ohne
   Scrollbar vs. lange Seiten mit Scrollbar würden den Inhalt sonst um die
   Scrollbar-Breite verschieben. scrollbar-gutter reserviert den Platz dauerhaft;
   overflow-y:scroll ist der Fallback für ältere Browser. Auf Touch/Overlay-
   Scrollbars (Mobile) hat es keine sichtbare Wirkung. */
html {
    scrollbar-gutter: stable;
}

/* ─── Login (ADR-028, AP4 — erstes migriertes View) ──────────────────────────
   War bis 2026-08-20 ein gebrandeter Verlauf in der TENANT-Primärfarbe
   (--erp-primary-color). Laut Handbuch (UI-Design-Architecture.md, Abschnitt „Hintergrund der
   Anmeldeoberfläche"; Theme-and-Branding.md, Tabelle „Assetanforderungen") ist der Login-
   Hintergrund eine PLATTFORMWEIT FESTE visuelle Referenz, NICHT tenantänderbar — anders als die
   Primär-/Akzentfarbe. Die beiden Verlaufsfarben kommen deshalb jetzt aus der festen
   Rohpalette (--ct-palette-cyan-500/--ct-palette-violet-700, Zielbild-Referenz
   07-login-background.png), nicht mehr aus Tenant-Branding-Variablen.
   Rein CSS, keine externen Bilder (CSP-sicher, kein Assetbudget/keine AVIF-/WebP-
   Optimierungspipeline nötig — UID-017 ist damit über eine CSS-Nachbildung der Zielbild-
   Farbrichtung erfüllt, nicht über das Originalbild selbst; siehe Umsetzungsplan, Abgrenzung).
   Vorheriger `url("/static/background_verlauf.png")`-Verweis war eine tote Referenz (Datei
   existiert nicht im Repo, kein Server-Route dafür) — mit dieser Migration entfernt.
   Responsiv, respektiert prefers-reduced-motion und prefers-color-scheme. */

.erpLoginPage,
.erpLoginPage .sapMPageBgTransparent {
    background: transparent !important;
}

.erpLoginBg {
    position: relative;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    padding: 1.5rem;
    /* Nutzer-Feedback 2026-08-21: die vorherige blasse Fläche + zwei diffuse Ecken-Blobs
       entsprach nicht dem kräftigen, vollflächigen Verlauf aus dem Mockup
       (business-automation-platform/Images/ui-design/07-login-background.png, Cyan → helle
       Mitte → Violett). Statt der bisherigen flachen Grundfarbe jetzt selbst ein sanfter
       Diagonal-Verlauf zwischen den beiden Plattformfarben als Basis — die Blobs darüber
       (unten) sorgen zusätzlich für den hellen "Hotspot" in der Mitte, jetzt kräftiger/weniger
       verwaschen. */
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--ct-palette-cyan-500) 32%, #ffffff) 0%,
        var(--ct-color-surface-page) 45%,
        color-mix(in srgb, var(--ct-palette-violet-700) 22%, #ffffff) 100%);
}

/* Animierte Licht-Blobs im Hintergrund — feste Plattformfarben (Cyan/Violett), nicht mehr
   tenantabhängig (siehe Kommentar oben). Kräftiger als zuvor (Nutzer-Feedback 2026-08-21):
   höhere Deckkraft + weniger Weichzeichnung, damit der Verlauf sichtbar definierter wirkt,
   näher am Mockup. */
.erpLoginBg::before,
.erpLoginBg::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.8;
    pointer-events: none;
    z-index: 0;
}
.erpLoginBg::before {
    width: 48vmax;
    height: 48vmax;
    top: -16vmax;
    right: -12vmax;
    background: radial-gradient(circle at center,
        color-mix(in srgb, var(--ct-palette-cyan-500) 80%, #ffffff) 0%, transparent 70%);
    animation: erpLoginFloatA 18s ease-in-out infinite;
}
.erpLoginBg::after {
    width: 40vmax;
    height: 40vmax;
    bottom: -14vmax;
    left: -10vmax;
    background: radial-gradient(circle at center,
        color-mix(in srgb, var(--ct-palette-violet-700) 75%, #ffffff) 0%, transparent 70%);
    animation: erpLoginFloatB 22s ease-in-out infinite;
}
@keyframes erpLoginFloatA {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-4vmax, 3vmax) scale(1.08); }
}
@keyframes erpLoginFloatB {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(3vmax, -3vmax) scale(1.1); }
}

/* Glas-Karte */
.erpLoginCard.sapMFlexBox {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 28rem;
    box-sizing: border-box;
    padding: 2.5rem 2.25rem 2rem;
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    animation: erpLoginCardIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes erpLoginCardIn {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

.erpLoginLogo {
    margin-bottom: 1.25rem;
    align-self: flex-start;
}
/* Nutzer-Auftrag 2026-08-24: Marken-Zeichen der Anwendung oben auf der Login-Karte.
   Nutzer-Feedback 2026-08-26: margin-top ergänzt, nachdem der bisher direkt darunter
   angezeigte "nendaro"-Fallback-Text entfernt wurde (siehe Login.view.xml/erpLoginTenant) —
   der Schriftzug saß dadurch zu dicht an der Kartenoberkante.
   Nutzer-Fund 2026-09-15: vormals eine einzelne "Lockup"-Bilddatei (Icon+Schriftzug fest
   kombiniert), jetzt dieselben zwei eigenständigen Markendateien wie die Sidebar
   (App.view.xml/controls.css .ctAppSidebarLogo) — Signet + reine Wortmarke nebeneinander. */
.erpLoginBrand {
    align-self: flex-start;
    gap: 0.5rem;
    margin-top: 0.75rem;
    margin-bottom: 1rem;
}
.erpLoginBrandSignet {
    max-height: 2rem;
    max-width: 2rem;
    width: auto;
    object-fit: contain;
}
/* Seitenverhältnis/max-width wie .ctAppSidebarWordmarkImg (controls.css) — dieselbe, dort
   bereits nicht-destruktiv auf die tatsächliche Glyph-Bounding-Box zugeschnittene Datei
   (/nendaro-wortmarke-violet.png), damit der Schriftzug hier optisch gleich hoch wie das
   Signet wirkt statt durch ungenutzten Leerraum kleiner. */
.erpLoginBrandWordmark {
    max-height: 2rem;
    max-width: 9.75rem;
    width: auto;
    object-fit: contain;
}
.erpLoginTenant.sapMText {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.15;
    margin-top: 0.15rem;
    color: var(--ct-color-text-default);
}
.erpLoginSub.sapMText {
    font-size: 0.875rem;
    color: var(--ct-color-text-muted);
    margin-top: 0.4rem;
}
/* Nutzer-Auftrag 2026-08-31: Domain-Anzeige unter dem Untertitel — dezent, kein Kontrastbruch. */
.erpLoginDomain.sapMText {
    font-size: 0.75rem;
    color: var(--ct-color-text-muted);
    opacity: 0.75;
    margin-bottom: 1.5rem;
}
.erpLoginForm.sapMFlexBox {
    width: 100%;
}
.erpLoginBtn.sapMBtn {
    height: 2.75rem;
    border-radius: 0.6rem;
}
/* Bestätigte E-Mail-Adresse in Schritt 2 (Nutzer-Auftrag 2026-08-31) — leicht gedämpft, damit
   klar erkennbar bereits bestätigt/nicht mehr editierbar. */
.erpLoginConfirmedEmail.sapMText {
    font-size: 0.9rem;
    color: var(--ct-color-text-default);
    font-weight: 600;
}
/* Nutzer-Feedback 2026-08-31: der ganze Block (Titel/Links/Sprachbutton) mittig statt
   linksbündig — analog Referenz-Vorbild. alignItems="Center" (XML) zentriert die Flex-Kinder
   selbst, text-align sorgt zusätzlich dafür, dass mehrzeiliger Text innerhalb eines einzelnen
   Text-Controls (z. B. bei schmaler Karte) ebenfalls zentriert umbricht. */
.erpLoginHelpBlock.sapMFlexBox {
    width: 100%;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--ct-color-border-subtle, rgba(0, 0, 0, 0.08));
    text-align: center;
}
.erpLoginHelpTitle.sapMText {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ct-color-text-muted);
    margin-bottom: 0.9rem;
}
.erpLoginHelpLinks.sapMFlexBox {
    row-gap: 0.3rem;
}
.erpLoginHelpLinks .sapMLnk {
    font-size: 0.8rem;
}
/* Nutzungsbedingungen + Datenschutz nebeneinander, verbunden durch "und" (Nutzer-Feedback
   2026-08-31, analog Referenz-Vorbild). Bugfix (Nutzer-Fund): "und" saß spürbar tiefer als die
   beiden Links — sap.m.Link setzt ein eigenes line-height/vertical-align fürs Underline-Styling,
   das vom normalen Text abweicht; explizites line-height auf beiden Kindtypen gleicht das an. */
.erpLoginLegalRow.sapMFlexBox {
    column-gap: 0.3rem;
    line-height: 1.2;
}
.erpLoginLegalRow .sapMLnk,
.erpLoginLegalAnd.sapMText {
    font-size: 0.8rem;
    line-height: 1.2;
    vertical-align: baseline;
}
.erpLoginLegalAnd.sapMText {
    color: var(--ct-color-text-muted);
}
.erpLoginLangBtn.sapMBtn {
    margin-top: 0.6rem;
    color: var(--ct-color-text-muted);
}
.erpLoginFooter.sapMText {
    position: relative;
    z-index: 1;
    margin-top: 1.5rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
}

/* Mobile: etwas kompakter, Karte darf volle Breite bis Rand nutzen */
@media (max-width: 600px) {
    .erpLoginBg { padding: 0.75rem; }
    .erpLoginCard.sapMFlexBox {
        padding: 2rem 1.5rem 1.75rem;
        border-radius: 1rem;
    }
    .erpLoginTenant.sapMText { font-size: 1.5rem; }
}

/* Dark-Mode-Anpassung der Karte */
@media (prefers-color-scheme: dark) {
    .erpLoginCard.sapMFlexBox {
        background: rgba(28, 34, 44, 0.82);
        border-color: rgba(255, 255, 255, 0.12);
    }
    .erpLoginTenant.sapMText { color: #eaf1f8; }
    .erpLoginSub.sapMText { color: #aab7c4; }
}

/* Barrierefreiheit: Animationen bei Bedarf abschalten */
@media (prefers-reduced-motion: reduce) {
    .erpLoginBg::before,
    .erpLoginBg::after,
    .erpLoginCard.sapMFlexBox {
        animation: none;
    }
}

/* ─── IconTabBar auf CI-Farbe ─────────────────────────────────────────────────
   Der Auswahl-Unterstrich und der Icon-Kreis/-Rahmen in Icon-Reitern nutzten
   den Theme-Default-Blauton. Hier auf die App-Primärfarbe umgestellt —
   gescopt auf .erpCiTabs (Alias .erpSettingsTabs bleibt aus Kompatibilität
   erhalten), damit keine anderen Tab-Leisten betroffen sind. Anwenden auf JEDE
   IconTabBar mit Icon-only-Reitern (Settings, Personen/Positionen/
   Org-Einheiten/Organigramm-Detailreiter).
   Listen-Redesign 2026-08-21: von der tenant-abhängigen --erp-primary-color
   auf das plattformkontrollierte ADR-028-Token
   --ct-color-action-primary-background umgehängt (Indigo/Violett) — konsistent
   mit den Emphasized-Buttons oben; diese Tabs sind Teil der Kopfzeilen-Optik
   der Entitäts-Detailbereiche mit Tab-Reitern (siehe Listen-Redesign-Plan
   Punkt 7), nicht Tenant-Branding. */
.erpCiTabs, .erpSettingsTabs {
    --sapSelectedColor: var(--ct-color-action-primary-background);
    --sapContent_Selected_ForegroundColor: var(--ct-color-action-primary-background);
    --sapHighlightColor: var(--ct-color-action-primary-background);
    --sapContent_IconColor: var(--ct-color-action-primary-background);
}
/* Auswahl-Indikator (Unterstrich): sitzt NUR auf dem ::after-Pseudo-Element von
   .sapMITBContentArrow (NICHT auf einer Klasse "SelectionIndicator" — die existiert in
   dieser Kontrolle nicht), analog zum bereits bestehenden Muster für die
   Launchpad-Bereichs-Tabs weiter unten. Das Basis-Element selbst NICHT mitfärben — das
   nutzt border-Tricks für die Pfeilform, ein background-color darauf macht daraus einen
   ausgefüllten Block statt der schmalen Linie. */
.erpCiTabs .sapMITBSelected .sapMITBContentArrow::after,
.erpSettingsTabs .sapMITBSelected .sapMITBContentArrow::after {
    background-color: var(--ct-color-action-primary-background) !important;
    border-color: var(--ct-color-action-primary-background) !important;
}
/* Nutzer-Feedback 2026-08-21 (Listen-Redesign, Live-Vergleich mit dem Mockup): die bisherigen
   runden Icon-Kreis-Reiter ("Meine Vertreter"/"Ich vertrete" als große Kreis-Icons mit winziger
   Beschriftung darunter) entsprechen NICHT dem Mockup — dort sind Detail-Reiter reiner Text mit
   Unterstrich, ohne Icon. Icon-Kreis-Darstellung komplett entfernt (Icon ausgeblendet) statt nur
   umgefärbt — die vorhandenen `icon="..."`-Attribute in den ~9 betroffenen Views bleiben
   unangetastet (nur CSS-Änderung, kein Markup-Umbau nötig), sie werden hier nur nicht mehr
   gerendert. */
.erpCiTabs .sapMITBFilterIcon,
.erpSettingsTabs .sapMITBFilterIcon {
    display: none !important;
}

/* ─── Launchpad-Kacheln + Abschnitte ─────────────────────────────────────────
   Bis 2026-07 wurde dieser Block zur Laufzeit als JS-String injiziert
   (Launchpad.controller.js _injectStyles()) — hierher verschoben, damit
   Tenant-Custom-CSS (per Abschnitts-Erweiterung: Karten/Slider/Listen/Karten-
   Ausschnitt-Abschnitte, Abschnitts-Farbverläufe) diese Regeln zuverlässig per
   Kaskade/Spezifität überschreiben kann — bei einem später eingehängten
   <style>-Tag war die Reihenfolge nicht deterministisch. */

/* Kompakte Custom-Kachel (Karten-Look) */
.erp-ctile {
    box-sizing: border-box;
    height: 100%;
    padding: 0.6rem 0.7rem;
    background: #ffffff;
    border: 1px solid #e6e9ee;
    border-radius: 0.75rem;
    box-shadow: 0 0.25rem 0.75rem 0 rgba(16, 30, 54, 0.22);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: box-shadow .15s, border-color .15s, transform .05s;
}
.erp-ctile:hover {
    border-color: #d4d9e1;
    box-shadow: 0 0.5rem 1.25rem 0 rgba(16, 30, 54, 0.30);
}
.erp-ctile:active { transform: translateY(1px); }

/* Grafik-Kachel (launchType=image): rein optisch → kein Klick-Cursor/Hover-Lift.
   Mit "Bei Klick vergrößern" (data-enlarge): Zoom-Cursor + Hover-Lift. */
.erp-ctile[data-launchtype='image'] { cursor: default; }
.erp-ctile[data-launchtype='image']:hover {
    border-color: #e6e9ee;
    box-shadow: 0 0.25rem 0.75rem 0 rgba(16, 30, 54, 0.22);
}
.erp-ctile[data-launchtype='image']:active { transform: none; }
.erp-ctile[data-launchtype='image'][data-enlarge='true'] { cursor: zoom-in; }
.erp-ctile[data-launchtype='image'][data-enlarge='true']:hover {
    border-color: #d4d9e1;
    box-shadow: 0 0.5rem 1.25rem 0 rgba(16, 30, 54, 0.30);
}

/* Bereich-Tab-Unterstrich (ADR-028 AP4, 2026-08-20): die frühere IconTabBar-Override-Regel
   (`.sapMITBContentArrow::after`) ist entfallen — die Bereichs-Tabs sind jetzt ct.SideNavigation
   (horizontal, siehe Launchpad.view.xml), Styling kommt vollständig aus controls.css
   (.ctSideNavigation--horizontal .ctSideNavigationItem--selected). */

/* Abschnitts-Listenelemente sind nur Container — störenden Fokus-Rahmen entfernen */
.erpLaunchpadPage .sapMLIB.sapMLIBFocusable:focus,
.erpLaunchpadPage .sapMLIB:focus {
    outline: none !important;
}
.erpLaunchpadPage .sapMLIB.sapMLIBFocusable:focus::after,
.erpLaunchpadPage .sapMLIB:focus::after {
    border: none !important;
    box-shadow: none !important;
}

/* Nutzer-Feedback 2026-08-21: der Inhaltsbereich wechselte beim Scrollen unruhig zwischen
   hellblau/türkis/weiß/grau. Ursache: sap.m.List/CustomListItem (u. a. die äußere Abschnitte-
   Liste "sectionsList" in Launchpad.view.xml, sowie jede reguläre 'list'-Sektion) bringen ihre
   eigene UI5-Theme-Hintergrundfarbe mit (weiß/hellgrau) und ließen so die eigentlich vorgesehene,
   EINHEITLICHE Canvas-Fläche darunter (Tenant-/Abschnitts-Canvas, siehe
   Launchpad.controller.js#_applyCanvas/_applySectionCanvases, sonst der Standard-Ton
   --ct-color-surface-page) fleckig durchscheinen. Bisher wurde nur BEI AKTIVEM Tenant-Canvas
   erzwungen, dass diese Elemente transparent werden (_applyCanvas, JS) — jetzt IMMER, auch ohne
   gesetzten Canvas, damit der Standard-Ton lückenlos einheitlich bleibt. Kacheln (.erp-ctile)
   und Dialoge/Popover sind bewusst NICHT betroffen (sollen als weiße Karte auf der Canvas-Fläche
   abgesetzt bleiben, siehe Mockup business-automation-platform/Images/ui-design/
   03-list-detail-page.png). */
.erpLaunchpadPage .sapMList,
.erpLaunchpadPage .sapMLIB,
.erpLaunchpadPage .sapMCLI {
    background: transparent !important;
}

/* Titel & Untertitel */
.erp-ctile-title {
    color: var(--erp-primary-color, #003366) !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    line-height: 1.2 !important;
    margin-top: 0.4rem !important;
}
.erp-ctile-sub {
    color: #5D6C7B !important;
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
    margin-top: 0.15rem !important;
}

/* Icon */
.erp-ctile .sapUiIcon { color: var(--erp-primary-color, #003366); font-weight: 300 !important; }
.erp-ctile-icon-img {
    height: 2.5rem !important;
    width: auto !important;
    max-width: 3rem !important;
    object-fit: contain !important;
}

/* Aktionen (Favorit/Ausblenden) kompakt oben rechts */
.erp-ctile-actions .sapMBtn { margin: -0.2rem -0.2rem 0 0; }

/* Favoriten-Stern transparent */
.erp-fav-btn, .erp-fav-btn .sapMBtnInner, .erp-fav-btn.sapMBtnHoverable:hover .sapMBtnInner,
.erp-fav-btn .sapMBtnInner:focus, .erp-fav-btn.sapMBtnActive .sapMBtnInner {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
.erp-fav-on .sapMBtnIcon { color: #f0ab00 !important; }
.erp-fav-off .sapMBtnIcon { color: #a9b4be !important; }
/* Aktions-Icons (Stern/Ausblenden) neutral grau; favorisierter Stern (Glyph \e065) in Gold —
   Färbung über den Glyph, da die bound class nicht greift. */
.erp-ctile .sapMBtn .sapUiIcon { color: #a9b4be !important; }
.erp-ctile .sapMBtn .sapUiIcon[data-sap-ui-icon-content="\e065"] { color: #f0ab00 !important; }

/* Gestaltungsmodus-Umschalter im aktiven (pressed) Zustand sichtbar halten (ADR-028, AP4: in
   ct.PageHeader statt .sapMPageHeader; Nutzer-Feedback 2026-08-21/Mockup-Abgleich: sitzt jetzt
   als reines Icon im Header-Aktionscluster neben der Glocke statt separat neben der Suchleiste —
   bleibt weiterhin innerhalb ct.PageHeader, diese Regel greift unverändert). sapMToggleBtnPressed liegt direkt auf
   .sapMBtnInner. Hover/Focus-Varianten mit höherer Spezifität, damit die Branding-Regel
   (:focus → weiß) nicht gewinnt. Da ct.PageHeader (anders als das bisherige dunkle
   .sapMPageHeader) eine helle Kartenfläche ist, dient die gefüllte Primärfarbe hier als reiner
   Aktiv-Zustands-Indikator, nicht mehr als Kontrastanpassung an einen dunklen Hintergrund. */
.ctPageHeader .sapMBtnInner.sapMToggleBtnPressed,
.ctPageHeader .sapMBtn:hover .sapMBtnInner.sapMToggleBtnPressed,
.ctPageHeader .sapMBtn:focus .sapMBtnInner.sapMToggleBtnPressed,
.ctPageHeader .sapMToggleBtnPressed .sapMBtnInner {
    background-color: var(--erp-primary-color, #003366) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: none !important;
}
.ctPageHeader .sapMToggleBtnPressed .sapMBtnIcon,
.ctPageHeader .sapMBtnInner.sapMToggleBtnPressed .sapMBtnIcon { color: #ffffff !important; }

/* Ausgeblendete Kachel im Gestaltungsmodus (ausgegraut) */
.erp-tile-hidden { opacity: 0.45 !important; }

/* Persönlich ausgeblendeter Abschnitt im Gestaltungsmodus (ausgegraut, bleibt bedienbar) */
.erp-section-hidden { opacity: 0.45; }

/* ─── Bild-/Farb-Kacheln ──────────────────────────────────────────────────── */
.erp-ctile.erp-tile-image, .erp-ctile.erp-tile-bg { border-color: transparent; }
/* Contain-Letterbox neutral weiß (transparente Bildbereiche wirken sonst dunkel) */
.erp-ctile.erp-tile-contain { background-color: #ffffff; }
/* Lesbarkeits-Overlay UNTEN — dort stehen Titel/Untertitel */
.erp-ctile.erp-tile-scrim::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 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%);
}
/* Inhalte über das Overlay heben */
.erp-ctile.erp-tile-image > *, .erp-ctile.erp-tile-bg > * { position: relative; z-index: 2; }
/* Text/Icons auf Bild- und Farb-Kacheln in Weiß */
.erp-ctile.erp-tile-image .erp-ctile-title, .erp-ctile.erp-tile-image .erp-ctile-sub,
.erp-ctile.erp-tile-bg .erp-ctile-title, .erp-ctile.erp-tile-bg .erp-ctile-sub {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
.erp-ctile.erp-tile-bg .sapUiIcon:not(.sapMBtnIcon) { color: #ffffff !important; }
/* Stern auf Bild-/Farb-Kacheln weiß mit kräftigem Halo → auf hellen UND dunklen Bildern sichtbar */
.erp-ctile.erp-tile-image .sapMBtn .sapUiIcon, .erp-ctile.erp-tile-bg .sapMBtn .sapUiIcon {
    color: #ffffff !important;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.85), 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* ─── Video-Kachel: zentriertes Play-Symbol ─────────────────────────────────── */
.erp-ctile.erp-tile-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");
}
/* Bei Video-Thumbnail das generische Kachel-Icon ausblenden (Thumbnail spricht für sich) */
.erp-ctile.erp-tile-video-thumb .sapUiIcon:not(.sapMBtnIcon) { display: none !important; }
.erp-ctile.erp-tile-video-thumb .erp-ctile-icon-img { display: none !important; }

/* ─── Abschnitte 2.0 (Höhe/Auto-Hide/Inhaltstypen/Styling) ───────────────────
   Basisklassen je Abschnittstyp — .erp-section trägt immer data-section-type
   (siehe Launchpad.view.xml). Abschnitts-Hintergrund (Canvas) wird PRO Abschnitt
   dynamisch in ein generiertes <style id="erp-section-canvases">-Tag geschrieben
   (Launchpad.controller.js _applySectionCanvases(), analog zum Tenant-Canvas).
   Tenant-Custom-CSS kann jede dieser Klassen sowie
   .erp-section[data-section-tech="…"] gezielt überschreiben. */
.erp-section { box-sizing: border-box; }
.erp-section--scroll { overflow-y: auto; }

/* Zwischenraum als PADDING-BOTTOM statt MARGIN (Nutzer-Feedback 2026-08-12, präzisiert: der
   Zwischenraum soll sichtbar bleiben, aber dem OBEREN der beiden Abschnitte "gehören" — seine
   Füllfarbe/-verlauf zieht sich also bis zum nächsten Abschnitt durch, statt als separater
   weißer Balken zu erscheinen). NUR padding-bottom (kein padding-top): der Abstand liegt damit
   vollständig innerhalb der Box des Abschnitts, NACH dem er kommt, und wird von dessen eigenem
   Canvas (siehe _applySectionCanvases) automatisch mit eingefärbt — ein Abschnitt ohne Canvas
   (z. B. "Meine Apps") lässt den Zwischenraum entsprechend weiß/transparent. */
.erp-section-spacing { padding-bottom: 1.5rem; }

/* Nutzer-Feedback 2026-08-21: Abschnittsüberschriften (ALLE Typen — "Meine Apps",
   "Genehmigungen", "Organigramm" usw., nicht nur der eigene Sectiontyp "heading") sollen fett
   erscheinen; vorher galt Fettdruck nur für die .erp-section--heading-Typ-Modifier-Klasse.
   !important nötig: sap.m.Title rendert den Text in einem inneren .sapMTitleInner-Span, der vom
   UI5-Theme (lädt NACH dieser Datei, siehe Kaskaden-Reihenfolge-Kommentar oben in dieser Datei)
   eine eigene, konkrete font-weight-Deklaration je Title-Level mitbringt — eine einzelne
   Zusatzklasse auf dem äußeren Element schlägt das nicht (verifiziert 2026-08-21, derselbe
   bereits mehrfach dokumentierte Befund wie bei .ctAppSidebarFooterName). */
.erp-section-title,
.erp-section-title .sapMTitleInner {
    font-weight: 600 !important;
}

.erp-section--heading .erp-section-title {
    color: var(--erp-primary-color, #003366);
}

/* ADR-026 Schritt 2: optionales Projekt-Banner oben im Projekt-Bereich — begrenzte Höhe,
   objektfüllend zugeschnitten, damit Bilder jeden Seitenverhältnisses konsistent wirken. */
.erp-project-banner {
    max-height: 12rem;
    object-fit: cover;
    border-radius: 0.25rem;
}

/* Nutzer-Auftrag 2026-08-24: Projektname als weißer, großer Titel oben links AUF dem
   Bannerbild (vorher unten). position:relative auf dem Wrapper, Titel absolut über dem
   oberen Bildrand, Verlaufs-Scrim für Lesbarkeit unabhängig vom jeweiligen Bildinhalt
   (Banner ist tenant-/projektabhängig hochgeladen, kein fester Kontrast garantiert). */
.erp-project-banner-wrap {
    position: relative;
}
/* Nutzer-Feedback 2026-08-24, Root-Cause per Puppeteer-DOM-Analyse gefunden: sap.m.VBox
   rendert JEDES Kind in einen eigenen Wrapper-<div class="… sapMFlexItem">, der selbst
   position:relative trägt (UI5-Basis-CSS) — das ist näher am Titel als dieser Wrap, das
   absolute Positionieren griff deshalb relativ zu diesem engen, formfixen Wrapper (der exakt
   an der Stelle im normalen Textfluss sitzt, an der der Titel OHNE die Overlay-Klasse stünde)
   statt relativ zum Bild. Direkte Flex-Item-Kinder dieses Wraps zurück auf static, damit die
   Containing-Block-Suche zum eigentlichen Wrap (eine Ebene höher) weiterspringt. */
.erp-project-banner-wrap > .sapMFlexItem {
    position: static !important;
}
/* Default (kein Bannerbild): normale Überschrift unter dem Wrapper. Wird zur Überblendung
   AUF dem Bild, sobald Launchpad.controller.js die --overlay-Klasse zusätzlich setzt. */
.erp-project-banner-title {
    margin-top: 0.5rem;
    margin-left: 1rem;
    margin-bottom: 1rem;
}
.erp-project-banner-title--overlay {
    /* !important nötig: sap_horizon setzt auf .sapMTitle bereits eine eigene position (höhere
       Spezifität/spätere Ladereihenfolge gewinnt sonst gegen diese einfache Klassenregel, siehe
       Kommentarblock oben zur Tenant-CSS-Ladereihenfolge — dieselbe Ursache). Live per Puppeteer
       verifiziert: Klasse kam korrekt an, position blieb ohne !important trotzdem "relative". */
    position: absolute !important;
    left: 0;
    right: 0;
    top: 0;
    margin: 0 !important;
    padding: 1.25rem 1.25rem 3rem;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
    color: #ffffff !important;
    /* !important auch hier nötig (Nutzer-Feedback 2026-08-24: Schriftgröße wirkte trotz 3rem
       unverändert) — sap_horizon setzt auf .sapMTitle bereits eine eigene font-size/font-weight,
       gleiche Ursache wie bei position oben. Nutzer-Feedback 2026-08-24 (2): 48px wirkte immer
       noch zu groß für den Projektnamen über dem kompakten Banner, auf 28px reduziert. */
    font-size: 28px !important;
    font-weight: 700 !important;
    text-align: left;
    border-radius: 0.25rem 0.25rem 0 0;
}

/* ADR-026 Schritt 2: Filterleiste des Abschnittstyps "Workflow-Ergebnisse" — vertikaler
   Zeilenabstand beim Umbruch auf schmalen Bildschirmen (HBox wrap="Wrap" allein lässt Zeilen
   sonst direkt aneinanderstoßen). */
.erp-wfr-filterbar > * { margin-bottom: 0.375rem; }

.erp-section--list .erp-section-list-icon { color: var(--erp-primary-color, #003366); }

.erp-section--html { padding: 0.25rem 0; }
.erp-section--html img { max-width: 100%; height: auto; }

.erp-section--map iframe {
    width: 100%;
    border: 0;
    border-radius: 0.5rem;
}

/* ADR-017 Ausbaustufe: interaktiver Explorer statt statischem SVG-Bild — eigenes CSS wird von
   OrgChartExplorer.js selbst injiziert (siehe dort _injectStyles), analog zu SortableTable.js.
   Der Abschnitt selbst braucht kein spezielles Overflow-/Scroll-Verhalten mehr (Karten-Layout
   statt einer u. U. breiten SVG). Nur die Ladeanzeige im Vergrößerungs-Dialog (Platzhaltertext
   vor dem ersten Explorer-Render) bleibt hier, da das core:HTML-Control sie vor dem Mounten
   des JS-Containers kurz zeigt. */
.erpOrgChartDialogLoading { padding: 2rem; text-align: center; color: var(--erp-text-muted, #666); }

/* Organigramm-App (#/admin-org-chart) — zoombarer Zeichenbereich, per JS positionierte Knoten. */
.erpOrgChartViewport {
    width: 100%;
    height: 60vh;
    min-height: 22rem;
    overflow: auto;
    background: var(--sapList_Background, #fff);
    border: 1px solid var(--sapList_BorderColor, #d9d9d9);
    border-radius: 0.25rem;
    position: relative;
}
.erpOrgChartInner {
    position: relative;
    transform-origin: 0 0;
    /* Passt der Baum vollständig in den sichtbaren Ausschnitt (z. B. nach einer Suche),
       zentriert margin:auto ihn horizontal statt ihn am linken Rand kleben zu lassen. */
    margin: 0 auto;
}
.erpOcNode {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    user-select: none;
}
.erpOcNode.erpOcSelected .erpOcBox,
.erpOcNode.erpOcSelected .erpOcCircle {
    box-shadow: 0 0 0 3px var(--sapButton_Emphasized_Background, #0854a0);
}
/* Über die Suche gefundener Knoten (Nutzer-Feedback) — eigener Korallton, klar unterscheidbar
   vom blauen Klick-Auswahlrahmen oben. */
.erpOcNode.erpOcSearchHit .erpOcBox,
.erpOcNode.erpOcSearchHit .erpOcCircle {
    box-shadow: 0 0 0 3px var(--erp-coral-color) !important;
}
.erpOcBox {
    background: var(--sapTile_Background, #f5f6f7);
    border: 1px solid var(--sapList_BorderColor, #d9d9d9);
    border-left: 4px solid var(--erp-primary-color, #003366);
    border-radius: 0.25rem;
    padding: 0.5rem 0.75rem;
    min-width: 9rem;
    max-width: 11rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.85rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.erpOcCircle {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    /* FEST #003366, NICHT --erp-primary-color (Nutzer-Feedback 2026-08-13: "bei blauen Avataren
       gibt es einen auberginefarbenen Hintergrund") — die Illustrations-Avatare sind feste
       Bilddateien mit eingebranntem Blauton (blau_003366.png); die tenant-eigene Markenfarbe
       kann davon abweichen (dieser Tenant nutzt z. B. Aubergine als Primärfarbe) und passt dann
       nicht mehr zum Bild, das am 16%-Rand durchscheint. */
    background: #003366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    overflow: hidden;
}
/* Illustrations-Avatare (Christians PNGs) sind bereits als volle Kreisgrafik angelegt
   (Kopf/Schultern füllen fast die ganze Fläche) — bei 100% Containergröße wirkt das
   Gesicht dadurch zu groß/nah. Etwas verkleinert und zentriert lassen (Nutzer-Feedback). */
.erpOcCircle img { width: 84%; height: 84%; object-fit: cover; border-radius: 50%; }
/* Leitungsposition (Leiterplanstelle der Org-Einheit) — abweichende Farbe (Türkis-Akzent)
   ggü. regulären Mitarbeitern (Primärfarbe), damit beide optisch klar unterscheidbar sind. */
.erpOcCircle.erpOcLeader { background: var(--erp-accent-color, #336666); }
/* Rollenfarben vervollständigt (Nutzer-Feedback 2026-08-12/13: "überall, wo das Avatar-Bild zum
   Einsatz kommt" dieselbe Regel — ich=korall, Leitung=grün, Vertreter=gelb, Mitarbeiter=blau).
   Bei echtem Profilfoto (Rollenfarbe steckt dann nicht im Bild) zusätzlich ein Ring statt/neben
   dem Hintergrund — hebt frühere Entscheidung "keine Ring-Kennzeichnung mehr" auf. */
.erpOcCircle.erpOcMe { background: #FF6666; }
.erpOcCircle.erpOcSubstituteNode { background: var(--erp-substitute-color, #F8B716); }
.erpOcCircle.erpOcHasPhoto { box-sizing: border-box; border: 3px solid transparent; }
.erpOcCircle.erpOcHasPhoto.erpOcMe { border-color: #FF6666; background: #fff; }
.erpOcCircle.erpOcHasPhoto.erpOcSubstituteNode { border-color: var(--erp-substitute-color, #F8B716); background: #fff; }
.erpOcCircle.erpOcHasPhoto.erpOcLeader { border-color: var(--erp-accent-color, #336666); background: #fff; }
.erpOcCircle.erpOcHasPhoto:not(.erpOcMe):not(.erpOcSubstituteNode):not(.erpOcLeader) { border-color: #003366; background: #fff; }
/* Vakanz-Platzhalter im people-/Berichtsweg-Baum (Nutzer-Feedback 2026-08-12): kein Foto/
   Illustrations-Avatar, sondern ein leerer weißer Kreis mit Ring in der Vakanz-Farbe — sieht wie
   ein Personen-Knoten aus, nicht wie ein Positions-Kästchen. */
.erpOcCircle.erpOcCircleVacant { background: #fff; box-sizing: border-box; border: 3px solid var(--erp-position-vacant-color); }
/* Vertreter-Zusatzkachel (Nutzer-Feedback 2026-08-11): kompakte, absolut positionierte Kachel
   rechts neben dem Kreis der VERTRETENEN Person (siehe _renderSubstituteBadges) — bewusst nicht
   Teil des normalen Baum-Layouts, dafür in _computeWidths/_assignX per Zusatzbreite reserviert,
   damit sie keine Nachbarkarte überlagert. Die Rollenfarbe steckt in der gewählten Bilddatei
   selbst (AVATAR_COLOR_SUBSTITUTE), NICHT mehr in einem CSS-Hintergrund/-Ring — vermeidet auch,
   dass eine tenant-spezifische Custom-CSS die Farbe überschreiben kann.*/
/* z-index (Nutzer-Feedback 2026-08-12): das Avatar-Icon muss IMMER über der Verbindungslinie
   liegen, nicht nur durch korrekte Linienlänge (siehe _renderSubstituteBadges-Fix) — zusätzliche
   Absicherung, falls sich Badge und Linie durch künftige Layout-Änderungen doch überschneiden. */
.erpOcSubstituteBadge { position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: center; cursor: pointer; text-align: center; }
.erpOcSubstituteBadgeLabel { max-width: 6.5rem; font-size: 0.7rem; }
.erpOcSubstituteBadgeSubtitle { max-width: 6.5rem; }
/* Nutzer-Feedback 2026-08-13: ab dem ZWEITEN gleichzeitigen Vertreter nur noch ein kleines,
   textloses Avatarbild statt einer weiteren vollen Kachel — sonst wächst der Baum bei mehreren
   Vertretern über die sichtbare Breite hinaus (horizontale Scrollbar am Gesamtdiagramm). Name/
   Rolle nur als Tooltip (title-Attribut), kein eigenes Label/Verbindungslinie. */
.erpOcSubstituteChip { position: absolute; z-index: 2; cursor: pointer; width: 1.75rem; height: 1.75rem; }
.erpOcLabel {
    margin-top: 0.3rem;
    font-weight: 600;
    font-size: 0.78rem;
    text-align: center;
    max-width: 9rem;
}
.erpOcSubtitle {
    font-size: 0.72rem;
    color: var(--sapContent_LabelColor, #6a6d70);
    text-align: center;
    max-width: 9rem;
}
.erpOcLine {
    position: absolute;
    z-index: 0;
    background: var(--sapList_BorderColor, #bfbfbf);
}

/* OrgChart Browser (ADR-014): Positions-Farbcodierung, Attribut-/Ereignis-Zeilen, Geister-
   Knoten, Legende-Icon-Farben (ersetzen die früher hartcodierten color="#..."-Attribute).
   GRÜN KORRIGIERT (2026-08-10, Nutzer-Anlage cohrteam CD Manual v2.0): #1b5e20 war nie gegen
   das verbindliche CD Manual geprüft worden — dort ist Grün ("Ergänzung"/Sekundärfarbe)
   ausdrücklich #336666 festgelegt. VAKANT KORRIGIERT (2026-08-13, Nutzer-Feedback: "Ring bei
   vakanten Planstellen [...] entspricht nicht dem CI"): #b71c1c war lange als UX-übliches
   Negativ-Rot akzeptiert, obwohl das CD Manual KEIN offizielles Rot definiert (Palette: Blau
   #003366, Korall #FF6666, Gelb #F8B716, Grün #336666) — jetzt Korall statt eines CI-fremden
   Rottons, konsistent mit der übrigen Rollenfarbpalette. */
:root {
    --erp-position-vacant-color: #FF6666;
    --erp-position-occupied-color: #336666;
    --erp-event-enter-color: #336666;
    --erp-event-leave-color: #b71c1c;
    /* Korallton — entspricht exakt der CD-Manual-Akzentfarbe #FF6666. */
    --erp-coral-color: #ff6666;
    /* Vertreter-Kennzeichnung im OrgChart Browser — entspricht CD-Manual-Gelb #F8B716. */
    --erp-substitute-color: #f8b716;
}
/* !important nötig — sonst gewinnt teils das SAP-Theme (gleiche/höhere Quell-Priorität je
   nach Ladereihenfolge), analog zur bestehenden Konvention in diesem Stylesheet
   (siehe .erpCiTabs weiter oben). */
.erpOcBox.erpOcPositionVacant { border-left-color: var(--erp-position-vacant-color) !important; }
.erpOcBox.erpOcPositionOccupied { border-left-color: var(--erp-position-occupied-color) !important; }
/* Leiterplanstelle (Nutzer-Feedback: im Positions-Chart bisher nicht erkennbar) — zusätzlich
   zur Links-Randfarbe (vakant/besetzt) ein farbiger oberer Rand in der Akzentfarbe, analog zur
   Leiter-Kennzeichnung bei Personen-Kreisen (dieselbe Farbe wie dort). */
.erpOcBox.erpOcPositionLeader { border-top: 4px solid var(--erp-accent-color, #336666) !important; }
/* Immer sichtbares "Vakant"/"Gesperrt"-Label (nicht per Attribut-Schalter zuschaltbar) —
   Vakanz-Zwischenknoten im people-/Berichtsweg-Diagramm sowie vakante Planstellen müssen ohne
   weitere Interaktion erkennbar sein (Nutzer-Feedback). */
.erpOcVacantLabel { color: var(--erp-position-vacant-color) !important; font-weight: 700; }
/* Ein-/Austritts-Pfeil direkt am Personen-Knoten im Zeitraum-Modus (Nutzer-Feedback 2026-08-12) —
   dieselbe Farbkonvention wie die bestehende Org-Einheiten-Ereignisliste. */
.erpOcRangeArrow { font-weight: 600; }
.erpOcRangeArrow.erpOcRangeEnter { color: var(--erp-event-enter-color); }
.erpOcRangeArrow.erpOcRangeLeave { color: var(--erp-event-leave-color); }

/* Positionen/Org-Einheiten optisch unterscheidbar machen (Nutzer-Feedback): zusätzlich zur
   Randfarbe ein kleines Typ-Icon vor dem Titel sowie ein leichter Hintergrund-Unterschied. */
.erpOcBoxTitleRow { display: flex; align-items: center; justify-content: center; gap: 0.3rem; }
.erpOcBoxTypeIcon { width: 0.85rem; height: 0.85rem; flex: none; }
.erpOcBoxOrgUnit { background: var(--sapTile_Background, #f5f6f7); }
.erpOcBoxPosition { background: #fbfaf7; }

.erpOcAttrLine {
    font-size: 0.7rem;
    font-weight: 400;
    text-align: left;
    color: var(--sapContent_LabelColor, #6a6d70);
    margin-top: 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.erpOcEvents { margin-top: 0.25rem; display: flex; flex-direction: column; gap: 0.1rem; max-width: 11rem; }
.erpOcEventRow {
    font-size: 0.68rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.erpOcEventRow.erpOcEventEnter { color: var(--erp-event-enter-color); }
.erpOcEventRow.erpOcEventLeave { color: var(--erp-event-leave-color); }
.erpOcEventRow::before { content: ""; display: inline-block; width: 0; height: 0; flex: none; }
.erpOcEventEnter::before { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid var(--erp-event-enter-color); }
.erpOcEventLeave::before { border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 6px solid var(--erp-event-leave-color); }

.erpOcNode.erpOcGhost { opacity: 0.55; }
.erpOcNode.erpOcGhost .erpOcBox,
.erpOcNode.erpOcGhost .erpOcCircle { border-style: dashed; cursor: default; }

.erpOcPersonAttr { font-style: italic; }

.erpOcLegendIconLeader { color: var(--erp-accent-color, #336666) !important; }
.erpOcLegendIconEmployee { color: var(--erp-primary-color, #003366) !important; }
.erpOcLegendIconSubstitute { color: var(--erp-substitute-color, #f8b716) !important; }

/* Positions-Legende (Nutzer-Feedback): Farbbalken statt Haken/Kreuz-Symbolen — an den
   Kästchen selbst gibt es nie ein Haken-/Kreuz-Icon, nur die Randfarbe; die Legende soll
   genau das zeigen, was tatsächlich vorkommt. */
.erpOcLegendSwatch { width: 1rem; height: 0.75rem; border-radius: 0.15rem; flex: none; }
.erpOcLegendSwatchLeader { border-top: 4px solid var(--erp-accent-color, #336666) !important; background: var(--sapTile_Background, #f5f6f7); }
.erpOcLegendSwatchOccupied { background: var(--erp-position-occupied-color) !important; }
.erpOcLegendSwatchVacant { background: var(--erp-position-vacant-color) !important; }

/* Pan (linke Maustaste + Ziehen) statt reinem Mausrad-Zoom (Nutzer-Feedback: Mausrad soll
   normal die Seite scrollen; Strg+Mausrad zoomt; Ziehen verschiebt den Ausschnitt). */
.erpOrgChartViewport { cursor: grab; }
.erpOrgChartViewport.erpOcDragging { cursor: grabbing; }

/* Stichtag/Zeitraum-Umschalter: der bisherige SegmentedButton wirkte als flächiger blauer
   Balken zu dominant (Nutzer-Feedback) — ersetzt durch einen kompakten Switch zwischen zwei
   Text-Labels. Nur das jeweils aktive Label ist fett/CI-Navy hervorgehoben, der Switch selbst
   bleibt klein und bewusst unaufdringlich (kein flächiger Blau-Block mehr). Die Switch-Farbe
   selbst kommt jetzt von der globalen `.sapMSwt`-Regel weiter oben (2026-08-10). */
.erpOcDateModeLabel { font-size: 0.85rem; color: var(--sapContent_LabelColor, #6a6d70); }
.erpOcDateModeLabelActive { font-weight: 700; color: var(--erp-primary-color, #003366); }

/* Detailbereich: Zeilenhöhe zwischen reinen Text-Zeilen und Wert+Schalter-Zeilen angleichen
   (Nutzer-Feedback: Zeilenhöhen unterschiedlich) — der Switch-Control ist von Haus aus höher
   als eine reine Text-Zeile; leicht verkleinert und mittig ausgerichtet passt es sich an. */
.erpOcAttrSwitchRow { min-height: 1.5rem; }
.erpOcAttrSwitchRow .sapMSwt {
    transform: scale(0.8);
    transform-origin: left center;
    margin: -0.25rem 0;
}

/* Work-Item-App (ADR-019) / "Meine Anträge" — Tabellenzeilen (Nutzer-Feedback 2026-08-14:
   Spaltenüberschriften statt freier Zeilenlayouts, gleiches Look and Feel beider Apps).
   Verbleibende Zellen-Klassen (Icon/Titel/Avatar/Ungelesen-Kennzeichnung). */
.erpWiRowIcon { font-size: 1rem; flex: none; margin-right: 0.6rem; }
.erpWiRowTitle { font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Nutzer-Feedback 2026-08-21: sekundäre Spalten (aktueller Schritt u. Ä.) mussten aus der
   schmalen Listen-Spalte von ct:ListDetailLayout entfernt werden (Popin-Mechanik griff nicht,
   siehe MyRequests.view.xml/WorkItems.view.xml-Kommentare) — als dezenter Ersatz eine kleine
   graue Unterzeile unter dem Titel statt einer ganz eigenen Spalte. */
.erpMrRowSubtext,
.erpWiRowSubtext,
.erpAdminRowSubtext {
    font-size: 0.75rem;
    color: var(--ct-color-text-muted, #5d6c7b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Ring in der Rollenfarbe (Nutzer-Feedback 2026-08-12/13: "Avatarbilder sind anzugleichen ...
   den Ring angeht"; Führungskraft soll grün statt Blau zeigen). FESTE Hex-Werte statt
   --erp-primary-color/--erp-accent-color: die Illustrations-Avatare sind feste Bilddateien mit
   eingebrannten Rollenfarben (blau_003366/gruen_336666/...), unabhängig von der tenant-eigenen
   Markenfarbe — mit der Tenant-Variable ergab sich bei diesem Tenant ein Blau-Bild vor
   auberginefarbenem Rand/Hintergrund (Nutzer-Feedback: "bei blauen Avataren ... aubergine
   farbener Hintergrund"), weil dessen --erp-primary-color eben NICHT #003366 ist. */
.erpWiRowAvatar,
.erpWiRowAvatar img {
    flex: none;
    width: 1.75rem !important;
    height: 1.75rem !important;
    min-width: 1.75rem;
    border-radius: 50%;
    object-fit: cover;
    box-sizing: border-box;
    border: 2px solid #003366;
}
.erpWiRowAvatar.erpWiRowAvatar--leader,
.erpWiRowAvatar.erpWiRowAvatar--leader img { border-color: #336666; }
.erpWiUnread .erpWiRowTitle { font-weight: 700; }

/* Detailansicht: Kopf-Metadaten (Antragsteller/Datum) bewusst zurückhaltend, der Antragstext
   selbst (worum es geht) ist der eigentliche Blickfang. */
.erpWiDetailMeta { font-size: 0.8rem; color: var(--sapContent_LabelColor, #6a6d70); }
.erpWiDetailMessage { font-size: 1rem; }

/* Verlauf zuklappbar (Nutzer-Feedback 2026-08-12) — Panel statt fester Title+List. */
.erpWiHistoryPanel .sapMPanelHdr { font-weight: 600; }

/* Work-Item-Vorschau-Abschnitt (ADR-019, Startseite) — jede Zeile nimmt die volle Breite ein
   und ist in einen eigenen Kachelrahmen eingebettet, mit Typ-Symbol + Titel LINKS und
   Absender(-Avatar)/Zeitstempel RECHTSBÜNDIG (Nutzer-Feedback 2026-08-12); auf schmalen
   Bildschirmen bricht die rechte Gruppe in eine eigene Zeile um (siehe Media Query unten). */
/* Seitlicher Abstand zum Abschnittsrand (Nutzer-Feedback 2026-08-12: "rechts und links ...
   fehlt Platz, sieht gedrungen aus") — die Kachel-Zeilen sollen nicht bündig an der
   Abschnittsfarbe/-kante kleben. */
.erp-wip-mount { display: flex; flex-direction: column; gap: 0.5rem; padding: 0 1rem; }
.erp-wip-empty { color: var(--sapContent_LabelColor, #6a6d70); font-size: 0.85rem; padding: 0.5rem 0; }
.erp-wip-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 0.75rem;
    cursor: pointer;
    border-radius: 0.5rem;
    border: 1px solid var(--sapList_BorderColor, #e5e5e5);
    background: var(--sapTile_Background, #ffffff);
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.erp-wip-row:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.12); transform: translateY(-1px); }
.erp-wip-left { display: flex; align-items: center; gap: 0.6rem; flex: 1 1 auto; min-width: 8rem; overflow: hidden; }
.erp-wip-type-icon { flex: none; font-size: 1rem; }
/* Korall/Rot war für eine offene Aufgabe missverständlich (wirkte wie ein Fehlerhinweis,
   Nutzer-Feedback 2026-08-12) — Gelb ist im CD Manual die To-do-/Ergänzungsfarbe. */
.erp-wip-type-icon-decision { color: #F8B716; }
.erp-wip-type-icon-info { color: var(--erp-primary-color, #003366); }
.erp-wip-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; }
.erp-wip-title-unread { font-weight: 700; }
.erp-wip-right { display: flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; margin-left: auto; }
.erp-wip-avatar {
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    object-fit: cover;
    box-sizing: border-box;
    border: 2px solid #003366;
}
.erp-wip-avatar--leader { border-color: #336666; }
.erp-wip-sender-text { font-size: 0.8rem; color: var(--sapContent_LabelColor, #6a6d70); max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Mobile (Nutzer-Feedback 2026-08-12): rechte Gruppe untereinander statt rechtsbündig neben dem
   Titel — bei wenig Platz sonst zu eng, Absendername/Zeit würden abgeschnitten. */
@media (max-width: 30rem) {
    .erp-wip-right { flex-basis: 100%; margin-left: 0; justify-content: flex-end; }
}

/* Kostenauswertung (ADR-023, Nutzer-Feedback 2026-08-14): Einzelpositionen als integrierte
   Tabellenzeilen statt Popup-Dialog. Einrückung je Hierarchieebene läuft über einen gebundenen
   Spacer (`width`-Property, siehe View) statt einer dynamischen CSS-Klasse — robuster gegen
   Binding-Aktualisierungsprobleme bei nachträglich per Lazy-Load eingefügten Zeilen. */
.erpCeToggle { flex: none; min-width: 2rem; }
.erpCeGroupLabel { font-weight: 600; }

/* Ergebnisansicht (ResultViewer.js, Nutzer-Feedback 2026-08-19: "kein Rahmen"/"noch Potential") —
   jeder Ergebnis-Block (Text/CSV/Tabelle/Bild/Datei) bekommt eine eigene Karte statt formlos im
   Dialog zu schweben; der Dialog-Innenabstand selbst kommt aus sapUiSmallMargin am Aufrufer. */
.erp-rv-block {
    background: var(--sapList_Background, #ffffff);
    border: 1px solid var(--sapList_BorderColor, #e5e8ec);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
}
.erp-rv-block:last-child { margin-bottom: 0; }
.erp-rv-text { white-space: pre-wrap; }
/* KEIN width:100% (mehr) auf dem Control selbst — sonst wird ein kleines/generiertes Testbild
   (z. B. 1x1-Pixel) gewaltig hochskaliert statt in Originalgröße/-verhältnis dargestellt. */
.erp-rv-image, .erp-rv-image img {
    max-width: 100%;
    max-height: 20rem;
    width: auto;
    height: auto;
    border-radius: 0.375rem;
    object-fit: contain;
    display: block;
}

/* Launchpad-Suchzeile (Zielbild-Abgleich 2026-08-20, ct.PageHeader-Ergänzung, kein eigenes
   ct.*-Control — nur auf dieser einen Seite verwendet). */
.erpLaunchpadSearchRow {
    gap: var(--ct-spacing-xs);
}
.erpLaunchpadSearchField {
    flex: 1 1 auto;
    max-width: 32rem;
}

/* Hilfe-Fundstellen-Liste der globalen Suche (Nutzer-Auftrag 2026-08-28) — flache Zeilen statt
   Kacheln, Treffer im Textausschnitt hervorgehoben (siehe Launchpad.controller.js
   #formatSearchSnippet). Textausschnitt bewusst auf 2–3 Zeilen begrenzt (Nutzer-Feedback: ein
   einzeiliger Ausschnitt zeigte zu wenig Kontext, um die Fundstelle einzuordnen) statt einer
   einzelnen abgeschnittenen Zeile. */
.ctSearchHelpTitle {
    font-weight: 600;
}
.ctSearchHelpSnippet {
    color: var(--ct-color-text-muted);
    font-size: 0.875rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
/* Nutzer-Feedback 2026-08-28: das vorherige Grau (--ct-palette-neutral-100) war auf dem
   hellblauen Seitenhintergrund kaum erkennbar — CD-Manual-Gelb (#F8B716, siehe Farbpalette-Kommentar
   am Dateikopf) hebt sich deutlich ab. Eigener dunkler Textton statt geerbtem --ct-color-text-muted,
   da Gelb auf hellem/dunklem Theme sonst zu wenig Kontrast zum Fließtext-Grau hätte. */
.ctSearchHighlight {
    background-color: #F8B716;
    color: #1a1a1a;
    border-radius: 3px;
    padding: 0 2px;
}

/* Kompaktes Datums-Badge links vom Begrüßungstitel (Nutzer-Auftrag 2026-08-25, Referenz-
   Screenshot einer Kalender-App-Optik, Nachschliff 2. Runde: jetzt drei Zeilen statt zwei) —
   Wochentags-Kürzel oben (farbig), Monat in Textform darunter, große Tageszahl zuunterst. Nur
   auf dieser einen Seite verwendet (ct:PageHeader#badge-Slot, siehe Launchpad.view.xml),
   deshalb hier statt in controls.css. */
.erpLaunchpadDateBadge {
    /* Nutzer-Feedback 2026-08-25 (3. Runde): Badge stand a) einen Tick zu weit links gegenüber
       den übrigen Seitenelementen, b) Text klebte am linken/rechten Rand (Breite zu knapp
       bemessen für den 3-stelligen Monatstext), c) stand höher als die Begrüßung ("Guten Tag,
       Nadine!") — Header hat "align-items: center" (bezogen auf den GESAMTEN, höheren
       Titel+Untertitel-Block), align-self hier gezielt auf flex-start umgestellt und das Badge
       um denselben Betrag nach unten verschoben, den .ctPageHeaderTitle bereits durch seine
       Zeilenhöhe von der Box-Oberkante hat. */
    align-items: center;
    align-self: flex-start;
    margin-top: 0.2rem;
    margin-inline-start: var(--ct-spacing-xs);
    width: 3.5rem;
    flex-shrink: 0;
    border-radius: var(--ct-radius-control);
    overflow: hidden;
    border: 1px solid var(--ct-color-border-divider);
    margin-inline-end: var(--ct-spacing-m);
}
.erpLaunchpadDateBadgeWeekday {
    width: 100%;
    padding: 0.15rem 0.25rem;
    box-sizing: border-box;
    background: var(--ct-color-action-primary-background);
    /* !important nötig: sap.m.Text bringt vom UI5-Theme eine eigene Textfarbe mit, die eine
       einzelne Zusatzklasse nicht schlägt (Nutzer-Feedback 2026-08-25: dunkle Theme-Schrift auf
       dem lila Badge-Hintergrund praktisch unlesbar) — derselbe, bereits mehrfach dokumentierte
       Befund wie bei .ctAppSidebarProductName/.ctAppSidebarFooterName. Kein text-transform mehr
       (Nutzer-Feedback 2026-08-25, 2. Runde): "Di" statt "DI" ist besser lesbar — die
       Groß-/Kleinschreibung kommt jetzt unverändert aus formatWeekdayShort. */
    color: #fff !important;
    font-size: var(--ct-font-size-s);
    font-weight: var(--ct-font-weight-bold);
    text-align: center;
}
.erpLaunchpadDateBadgeMonth {
    width: 100%;
    padding: 0.1rem 0.25rem 0;
    box-sizing: border-box;
    background: var(--ct-color-surface-card);
    color: var(--ct-color-text-muted);
    font-size: var(--ct-font-size-s);
    text-align: center;
}
.erpLaunchpadDateBadgeDay {
    width: 100%;
    padding: 0 0.25rem 0.2rem;
    box-sizing: border-box;
    background: var(--ct-color-surface-card);
    color: var(--ct-color-text-default);
    font-size: 1.4rem;
    font-weight: var(--ct-font-weight-bold);
    line-height: 1.1;
    text-align: center;
}
.erp-rv-mono textarea { font-family: var(--sapFontFamilyMonospace, "SFMono-Regular", Consolas, monospace); font-size: 0.8rem; }

/* Inbox-Apps (ADR-031/ADR-033): ungelesene Zeilen fett statt eines eigenen Icons (Nutzer-Auftrag
   2026-09-01 — die frühere Punkt-Markierung war unklar, "ungelesen" erschloss sich nur per Hover). */
.inboxAppRow--unread { font-weight: var(--ct-font-weight-bold, 600); }
/* Nutzer-Fund 2026-09-04 (Live-Screenshot, Feinschliff): von 2rem/4rem auf 2.5rem/4.5rem
   vergrößert (Mockup-Vorgabe, Bild-Spalte der Folgeaktions-Ergebnisliste jetzt 5rem breit). */
/* Nutzer-Auftrag 2026-09-08 (Mockup-Feinschliff, Runde 4): etwas größer + einheitliches
   Seitenverhältnis statt variabler max-width/max-height (Karten unterschiedlicher Formate
   wirkten dadurch uneinheitlich groß), konsistenter Radius, kein farbiger Rahmen. */
.inboxAppThumb { width: 3.5rem; height: 2.5rem; object-fit: cover; border-radius: var(--ct-radius-control); }
/* Nutzer-Fund 2026-09-14 (Lazy Load): Platzhalter-Icon in der Vorschau-Spalte für Folgeaktions-
   Läufe, deren resultData aus Größengründen erst beim Öffnen nachgeladen wird (siehe
   InboxApp.controller.js#_buildRunImageCell) — gleiche Fläche wie ein echtes Thumbnail. */
.inboxAppThumbPlaceholder { width: 3.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; color: var(--ct-color-text-muted); }
.inboxAppFullImage { max-width: 100%; max-height: 24rem; object-fit: contain; }
/* Nutzer-Auftrag 2026-09-04 (Feinschliff): fett hervorgehobene Folgeaktions-Bezeichnung (Mockup-
   Vorgabe) über der gedämpften Start-/Dauer-Sekundärzeile (_renderFollowUpRunsTable). */
/* Nutzer-Auftrag 2026-09-08 (Runde 8, "Fettschrift reduzieren"): Folgeaktion in Tabellenzeilen war
   voll fett ("Aktionsbeschriftungen"/"Tabelleninhalte" gehören laut Auftrag zu Regular/Medium, kein
   Bold) — auf Medium abgeschwächt, bleibt dadurch noch klar von der gedämpften Zeitzeile darunter
   unterscheidbar, ohne so schwer zu wirken. */
.inboxAppRunActionLabel { font-weight: var(--ct-font-weight-medium, 500); }
.inboxAppRunTimestamp { font-size: var(--ct-font-size-s); color: var(--ct-color-text-muted); }
/* Nutzer-Auftrag 2026-09-08 (Mockup-Feinschliff): Abschnitts-Überschrift ("Eingang"/"Ergebnisse
   der Folgeaktionen") + Zähler-Pille + erklärender Zusatztext jetzt in EINER Zeile statt Titel/
   Zähler-Satz auf zwei Zeilen.
   Historie (Runde 5→8, siehe auch Kommentar bei alignItems="Baseline" in InboxApp.view.xml):
   Runde 5 wich probeweise auf `align-items:center` aus, weil reines `baseline` bei
   unterschiedlichen Font-Metriken (Title vs. Pille) versetzt wirkte — behob den Versatz aber
   nicht zuverlässig. Runde 8: zurück auf `baseline` (fachlich der richtige Ansatz), diesmal
   kombiniert mit line-height:1 auf allen Kindern (siehe unten) — DAS eliminiert die
   unterschiedlichen Zeilenhöhen als eigentliche Störquelle. */
.inboxAppSectionHeading {
  gap: var(--ct-spacing-s);
  flex-wrap: wrap;
}
/* Nutzer-Fund 2026-09-09 (Mobile-Umbau, Live-Regressionstest): die äußere Kopfzeile "Ergebnisse
   der Folgeaktionen" (Titel+Zähler LINKS, Item-Filter-Select+Refresh RECHTS,
   justifyContent="SpaceBetween") passte auf einem 375px-Phone nicht in eine Zeile — der
   Filter-Select wurde durch das umgebende overflow-x:hidden der Seite bis zu 102px abgeschnitten
   und war dadurch per Touch nicht erreichbar (nicht nur optisch, ECHTER Bedienbarkeits-Ausfall,
   siehe Vorgabe "Filterung nach Eingangsergebnis muss mobil vollständig verfügbar sein"). Reines
   CSS `flex-wrap:wrap` reichte NICHT — sap.m.HBox rendert ohne explizites `wrap`-Property die
   UI5-Utility-Klasse `sapMFlexBoxWrapNoWrap`, die `flex-wrap:nowrap` mit `!important` erzwingt
   (live per computed style bestätigt). Fix daher auf View-Ebene: `wrap="Wrap"` als echte
   HBox-Property gesetzt (InboxApp.view.xml) statt CSS-Override zu erzwingen — bei Desktop-Breite
   bleibt genug Platz, sodass hier NIE tatsächlich umgebrochen wird (keine sichtbare
   Desktop-Änderung), nur der zusätzliche Row-Gap für den (dann möglichen) Umbruchfall. */
.inboxAppFollowUpRunsHeaderRow {
  row-gap: var(--ct-spacing-xs);
}
/* Bugfix (Nutzer-Fund 2026-09-08, Runde 9, Live-Screenshot): `line-height:1` auf dem Title
   schnitt Unterlängen ab ("Eingang"/"Ergebnisse" — das "g" verlor seinen unteren Bogen), weil die
   Zeilenbox dadurch knapper wurde als der tatsächliche Schriftschnitt Platz braucht (Font-
   Unterlängen reichen über die reine em-Box hinaus). `align-items:baseline` auf dem Elternelement
   BRAUCHT das ohnehin nicht — die CSS-Baseline eines Elements hängt an der Textmetrik, nicht an
   `line-height` (unterschiedliche line-height-Werte verschieben NICHT die Baseline, solange
   nichts abgeschnitten wird). Nur noch auf ein moderates Maß gesetzt (genug Puffer für
   Unterlängen), nicht mehr auf das knappe Minimum 1. */
.inboxAppSectionHeading .sapMTitle,
.inboxAppSectionHeading .sapMTitle .sapMTitleInner,
.inboxAppSectionHeading .inboxAppRunTimestamp {
  line-height: 1.3;
}
/* Nutzer-Auftrag 2026-09-09 (Mobile-Umbau, Runde 2): "Kartenansicht"-Label neben der
   "Eingang"-Überschrift ist auf dem Smartphone bedeutungslos (dort ist IMMER nur die
   Kartenansicht aktiv, der Floorplan ist ohnehin nicht nutzerseitig umschaltbar) — verdrängte
   dort bisher die Beschreibung ("aus dem vorherigen Prozessschritt") in einen unruhigen Umbruch.
   Gleicher Sidebar-Breakpoint wie überall (controls.css:1143). */
/* Nutzer-Auftrag 2026-09-09 (Mobile-Umbau, Runde 4, Reihenfolge-Bugfix Runde 5): auf Desktop
   standardmäßig unsichtbar (mobil-exklusiv). MUSS VOR der Mobile-Media-Query unten stehen —
   Bugfix (Live-Fund Runde 5): stand zuvor DANACH im Quelltext und gewann dadurch bei gleicher
   Selektor-Spezifität IMMER (auch mobil) gegen die dortige `display:block`-Regel, wodurch die
   "Ergebnisse"-Überschrift komplett unsichtbar war (Text existierte im DOM, war aber
   display:none) — eigener Fund/Fehler aus Runde 4, hier korrigiert. */
.sapMTitle.inboxAppFollowUpRunsTitleMobile {
  display: none;
}
/* Nutzer-Auftrag 2026-09-09 (Runde 5): einheitliche Filterzeile ("Gefiltert: <Titel> Filter
   aufheben") für BEIDE Breakpoints — ersetzt sowohl den alten Desktop-Inline-Hinweis als auch die
   vorherige, nur-mobile Variante. Standardmäßig unsichtbar (die `visible`-Bindung im View
   entscheidet allein, ob sie bei aktivem Filter erscheint) — hier nur der Basis-Zustand
   VOR der Media-Query, damit die eigene-Zeile-Regel unten bei gleicher Spezifität zuverlässig
   gewinnt (dieselbe Lehre wie beim Titel-Bug oben). */
.inboxAppFollowUpFilterHintText {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ct-color-text-muted);
}
@media (max-width: 767.98px) and (pointer: coarse), (max-height: 499.98px) and (max-width: 960px) and (pointer: coarse) {
  /* Bugfix (Live-Fund 2026-09-09): reines `.inboxAppCardViewLabel{display:none}` griff NICHT —
     UI5s eigenes Theme-CSS (`.sapMHBox{display:flex}`) wird dynamisch NACH unseren statischen
     Stylesheets ins <head> injiziert und gewinnt bei gleicher Selektor-Spezifität durch spätere
     Quellreihenfolge (exakt derselbe Mechanismus wie beim `wrap`-Property-Fund an anderer
     Stelle). Zusätzliche Klasse `.sapMHBox` erhöht die Spezifität (0,2,0 statt 0,1,0) und
     gewinnt dadurch unabhängig von der Ladereihenfolge. */
  .sapMHBox.inboxAppCardViewLabel { display: none; }
  /* Nutzer-Auftrag 2026-09-09 (Mobile-Umbau, Runde 4): "aus dem vorherigen Prozessschritt" ist
     mobil verzichtbar (nimmt unnötig Platz, siehe Live-Screenshot) — vollständig aus dem
     Layout genommen (display:none, kein reservierter Platz), nicht nur ausgeblendet. Live-Fund:
     `sap.m.Text` bringt vom UI5-Theme ein eigenes `display:inline-block` mit, das bei gleicher
     Selektor-Spezifität durch spätere Ladereihenfolge gewinnt (derselbe Mechanismus wie beim
     `.sapMHBox`/`wrap`-Fund an anderer Stelle) — `!important` erzwingt hier zuverlässig. */
  .inboxAppItemsCountSuffixText { display: none !important; }

  /* Nutzer-Auftrag 2026-09-09 (Mobile-Umbau, Runde 4): mobil kürzere Ergebnisüberschrift
     ("Ergebnisse" statt "Ergebnisse der Folgeaktionen") — analog .inboxAppCardViewLabel-Muster
     oben, `.sapMTitle`-Kompositionsklasse zur Sicherheit gegen dieselbe Spezifitäts-/
     Ladereihenfolge-Falle (siehe Kommentar dort). */
  .sapMTitle.inboxAppFollowUpRunsTitleDesktop { display: none; }
  .sapMTitle.inboxAppFollowUpRunsTitleMobile { display: block; }
}
/* Nutzer-Auftrag 2026-09-09 (Runde 5): die einheitliche Filterzeile bildet auf JEDER Breite
   (nicht nur mobil) eine eigene volle Zeile innerhalb der `wrap="Wrap"`-Kopfzeile — ohne
   `flex-basis:100%` könnte sie bei zufällig ausreichend Restplatz neben der ersten Zeile
   "andocken" statt zuverlässig umzubrechen. Kein Breakpoint-Gate mehr nötig (ersetzt sowohl
   Desktop- als auch Mobile-Variante aus Runde 4). */
.sapMHBox.inboxAppFollowUpFilterHint {
  flex-basis: 100%;
  gap: var(--ct-spacing-s);
}
/* Nutzer-Auftrag 2026-09-08 (Mockup-Feinschliff, Runde 4): dieselbe helle Blaugrau-Familie wie
   die Typ-Badges der Karten (.ctResultCardTypeBadge) statt eines neutralen Grautons — Pillentext
   etwas kräftiger als der nachfolgende Beschreibungstext ("aus dem vorherigen Prozessschritt"). */
/* Bugfix (Nutzer-Fund 2026-09-12, "Grundlinien der Bereichsüberschriften" erneut gemeldet):
   die seit Runde 8 beabsichtigte `display:inline-flex` griff NIE — Live-Diagnose (computed style)
   zeigte weiterhin `display:inline-block` auf dem tatsächlichen DOM-Element. Ursache: exakt das
   bereits an anderer Stelle in diesem Projekt dokumentierte Muster (siehe
   `.sapMHBox.inboxAppCardViewLabel`/`.sapMTitle.inboxAppFollowUpRunsTitleMobile` weiter oben) —
   `sap.m.Text` bringt vom UI5-Theme über `.sapMText`/`.sapMTextMaxWidth` sein EIGENES
   `display:inline-block` mit, geladen NACH diesem Stylesheet; bei gleicher Selektor-Spezifität
   (beides genau eine Klasse) gewinnt die spätere Theme-Regel. Der reine Klassenselektor
   `.inboxAppSectionCountBadge` änderte am tatsächlich gerenderten Element daher nichts — nur der
   COMPUTED STYLE bewies das (nicht durch erneutes Ausprobieren einzelner Werte gefunden). Fix:
   Verbund-Selektor `.sapMText.inboxAppSectionCountBadge` (Spezifität zwei Klassen statt einer)
   gewinnt unabhängig von der Ladereihenfolge. */
.sapMText.inboxAppSectionCountBadge {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem var(--ct-spacing-s);
  border-radius: var(--ct-radius-pill, 999px);
  background: var(--ct-color-status-information-background);
  color: var(--ct-color-status-information-text);
  font-size: var(--ct-font-size-s);
  /* Nutzer-Auftrag 2026-09-08 (Runde 8, "Fettschrift reduzieren"): Badges/Status-Pillen gehören
     laut Auftrag zu "Medium", nicht Bold. */
  font-weight: var(--ct-font-weight-medium, 500);
  /* Nutzer-Fund 2026-09-08 (Runde 5/8): ohne explizite line-height erbt die Pille die
     Theme-Standardzeilenhöhe (deutlich mehr als ihr eigener Text braucht) — das machte ihre
     Boxhöhe unvorhersehbar größer als der eigentliche Textinhalt und dadurch die vertikale
     Ausrichtung neben Titel/Text optisch unsauber. margin-block:0, damit kein Theme-Default-Absatz-
     Außenabstand die Baseline-Berechnung zusätzlich verschiebt. */
  line-height: 1;
  margin-block: 0;
}
/* Bugfix (Nutzer-Fund 2026-09-08, Runde 9, Live-DevTools-Screenshot): ALLE folgenden Regeln
   nutzten bisher exakte ID-Selektoren (`#inboxAppTablePanel` usw.) — UI5 präfixiert
   XML-View-Control-IDs zur Laufzeit IMMER mit Component/View-Pfad
   ("container-erp.launchpad---inboxApp--inboxAppTablePanel", siehe DevTools-Screenshot), ein
   exakter `#id`-Selektor OHNE diesen Präfix trifft dadurch NIE — exakt derselbe, bereits an
   anderer Stelle in diesem Projekt dokumentierte Fallstrick (Sidebar-Avatar-Selektor). Jede der
   folgenden Regeln griff dadurch seit ihrer jeweiligen Einführung nie wirklich; der weiße Rahmen
   blieb deshalb trotz mehrerer vermeintlicher Fixes bestehen. Auf `[id$="..."]`
   (Attribut-Selektor "endet mit") umgestellt — funktioniert unabhängig vom Präfix. */
/* Nutzer-Auftrag 2026-09-04 (Feinschliff): Sicherheitsnetz gegen einen horizontalen
   Seiten-Scrollbalken — nur der Kartenband-Track (.ctResultCarouselTrack) darf selbst scrollen. */
[id$="inboxAppTablePanel"] { overflow-x: hidden; }
/* Nutzer-Fund 2026-09-08 (Mockup-Feinschliff, Runde 6): sap.m.Panel bringt vom UI5-Theme
   IMMER eine eigene weiße Fläche + Rahmen + Schatten mit (".sapMPanel"-Basisklasse) — beide
   Panels hier dienen aber NUR als struktureller Träger für einen bereits selbst fertig
   gestalteten Inhalt (die Karten-Arbeitsfläche `.ctResultCarousel` bzw. die Tabellenkarte
   `.ctDataTable`/`.ctFollowUpRunsDataTable`, siehe controls.css). Das ergab ZWEI verschachtelte
   weiße/umrandete Flächen ("weißer Außenwrapper um einen weiteren grauen Bereich") statt einer
   einzigen sichtbaren Fläche. Panel-Chrome hier vollständig neutralisiert (transparent, randlos,
   schattenlos, ohne eigenes Innenpadding) — nur noch der jeweilige Kindinhalt ist sichtbar. */
[id$="inboxAppTablePanel"].sapMPanel,
[id$="inboxAppFollowUpRunsPanel"].sapMPanel {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
/* Bugfix (Live-Fund 2026-09-09, Runde 4): sap.m.Panel setzt standardmäßig `width:100%` UND trägt
   gleichzeitig `sapUiSmallMargin` (16px je Seite) — beides zusammen ergibt 16px MEHR als der
   verfügbare Platz (klassisches "width:100% + margin"-Overflow-Problem), wodurch die
   Folgeaktions-Ergebniskarten rechts unsichtbar abgeschnitten wurden (der Rahmen war nur links
   sichtbar). `width:auto` lässt den Browser die Breite korrekt als "Elternbreite minus Margin"
   berechnen. NUR mobil (der Effekt fiel auf Desktop bei der bisherigen Breitenprüfung nicht auf,
   Desktop bleibt unverändert bei width:100%). `!important` nötig, da `width:100%` vermutlich als
   UI5-Control-Property mit entsprechender CSS-Spezifität/Priorität gerendert wird (siehe bereits
   etabliertes !important-Muster oben für dieselben Panel-Selektoren).
   Nutzer-Fund 2026-09-09 (Runde 5): derselbe Bug betraf auch `inboxAppTablePanel` (der
   Eingangskarussell-Wrapper, strukturell identisch — auch er ist ein sap.m.Panel mit
   `sapUiSmallMargin`) — hier in Runde 4 versehentlich NICHT mitkorrigiert, obwohl beide Panels
   dieselbe Margin-/Breiten-Regel teilen (siehe die gemeinsamen Hintergrund-/Rahmen-Regeln oben).
   Live-Messung bestätigte 16px Überstand rechts, der sich bis zur Karussell-Karte fortsetzte und
   dort als asymmetrischer Rand erschien — jetzt für BEIDE Panels behoben.
   Bugfix (Nutzer-Fund 2026-09-12, "rechter Rand von Karussell und Ergebnistabelle abgeschnitten"):
   diese Korrektur war bisher NUR auf die Touch-Mobile-Media-Query begrenzt (`pointer: coarse`) —
   derselbe `width:100%` + `sapUiSmallMargin`-Überstand (16px) betrifft aber JEDES schmale Fenster
   unabhängig vom Zeigertyp (z. B. ein schmales Desktop-/Maus-Fenster bei ausgeklappter Sidebar,
   siehe Screenshot). Auf ALLE Breiten ausgeweitet (kein Breakpoint-Gate mehr nötig) — auf breitem
   Desktop ändert sich am sichtbaren Ergebnis nichts, `width:auto` berechnet dort exakt dieselbe
   Breite wie zuvor `width:100%` minus Margin, nur eben korrekt statt zusätzlich draufgerechnet. */
[id$="inboxAppTablePanel"].sapMPanel,
[id$="inboxAppFollowUpRunsPanel"].sapMPanel {
  width: auto !important;
}
/* Bugfix (Live-Puppeteer-Fund 2026-09-08, Runde 9): Pixel-Sampling bewies weiterhin reines Weiß
   (255,255,255) am linken/oberen Rand beider Panels VOR dem grauen inneren Wrapper — Ursache
   NEBEN dem ID-Präfix-Fund oben: `.sapMPanelContent` (der Inhalts-Div INNERHALB von .sapMPanel)
   trägt vom UI5-Theme sein EIGENES `background-color`, unabhängig vom Wurzelelement. */
[id$="inboxAppTablePanel"] .sapMPanelContent,
[id$="inboxAppFollowUpRunsPanel"] .sapMPanelContent {
  padding: 0 !important;
  background: transparent !important;
}
/* Nutzer-Fund 2026-09-08 (Runde 8, Live-Screenshot): trotz neutralisierter Panel-Umrandung blieb
   um Karussell/Ergebnistabelle weiterhin eine sichtbar weiße Fläche — Ursache: sap.m.Page bringt
   vom UI5-Theme selbst eine eigene, opake WEISSE Standard-Hintergrundfarbe mit
   (backgroundDesign="Standard", Theme-Variable), unabhängig vom grauen App-Shell-Hintergrund
   dahinter (.ctAppShellBody). Auf DIESER Seite erzwungen grau — mehrere UI5-interne Klassen-
   Kandidaten abgedeckt, da die exakte DOM-Struktur von sap.m.Page (Content-/Scroll-Wrapper)
   sich je Version leicht unterscheiden kann. */
/* Nutzer-Auftrag 2026-09-14 (zentraler Standardhintergrund): die vorherige, auf "inboxAppPage"
   ID-gescopte Fassung dieser Regel (siehe Git-Historie) galt nur für EINE Seite — jede andere
   über ct.AppShell#content geroutete Seite blieb beim opaken WEISSEN sap.m.Page-Theme-Default
   (s. o.). Nicht die Quelle des auf der Startseite beobachteten Blaus (das ist eine bewusste,
   PRO TENANT gespeicherte Canvas-Farbe auf tenants.config.branding.canvas, injiziert von
   Launchpad.controller.js#_applyCanvas auf ".erpLaunchpadPage > section" — eine ANDERE, tiefer
   liegende DOM-Ebene als diese Page-Grundfläche hier, siehe Übergabe-Notiz) — aber der davor
   sichtbare WEISSE Page-Grund war ebenfalls nicht gewollt (Vorgabe: derselbe Ton wie die
   Business-Flow-Apps). Jetzt zentral für JEDE Seite im Content-Bereich: Grundfläche
   #F7F8FA (--ct-color-surface-page), auf DERSELBEN Ebene wie zuvor nur für die Inbox-App. Eine
   Seite mit bewusst abweichendem Hintergrund (z. B. der Tenant-Canvas, andere DOM-Ebene) kann
   das weiterhin überschreiben. */
.ctAppShellContent .sapMPage,
.ctAppShellContent .sapMPageBg,
.ctAppShellContent .sapMPageEnableScrolling {
  background: var(--ct-color-surface-page) !important;
}