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

/* ─── 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;
}
.sapMBtn:focus-visible .sapMBtnInner,
.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: 25rem;
    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-Lockup 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. */
.erpLoginBrandLockup {
    max-height: 2rem;
    width: auto;
    object-fit: contain;
    align-self: flex-start;
    margin-top: 0.75rem;
    margin-bottom: 1rem;
}
.erpLoginGreeting.sapMText {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ct-palette-cyan-700);
    opacity: 0.9;
}
.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;
    margin-bottom: 1.5rem;
}
.erpLoginForm.sapMFlexBox {
    width: 100%;
}
.erpLoginBtn.sapMBtn {
    height: 2.75rem;
    border-radius: 0.6rem;
}
.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;
}

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