/* ============================================================
   Intentio-Rahmen — ein Look fuer alle Intentio-Apps
   ------------------------------------------------------------
   Wie die Workstation selbst: Kopfzeile und Seitenleisten bilden eine
   Flaeche im Verlauf der Designfarbe, der Inhalt liegt darauf mit runder
   Ecke und feiner Kante. Schrift und Icons auf dem Verlauf sind dunkel in
   der Designfarbe getoent, der aktive Punkt einen Tick kraeftiger.

   Die Farbe kommt aus dem gewaehlten Workstation-Design: applyChrome() in
   main.js setzt --ck-tint-rgb auf <body>. Deshalb stehen die Variablen
   unten auf :root UND body — auf :root allein wuerde var(--ck-tint-rgb)
   dort aufgeloest, wo es die Variable nicht gibt, und alles bliebe blau.
   Unterseiten in iframes bekommen die Farbe ueber iframe-accent.js.

   Eine App macht mit, indem sie in den Rollen auftaucht:
     Rahmen   das Fenster, auf dem der Verlauf liegt
     Chrome   Kopfzeile, Leisten, Fuss — durchsichtig, ohne Striche
     Inhalt   die Flaeche mit der runden Ecke oben links
     Punkt    Eintraege in Leisten; gewaehlt = .on/.active/.sel
     Schrift  Titel, Unterzeile, Schliessen, Abschnittskoepfe
   Die CRM Suite nutzt die Variablen direkt (crm-suite.css).

   Dieses Blatt steht in index.html als LETZTES, damit es die Farben der
   Apps ueberstimmt, ohne deren Aufbau anzufassen. In den iframe-Seiten
   steht es vor </head> und greift nur unter html[data-ir="…"].
   ============================================================ */
:root, body{
  --ir-tint:var(--ck-tint-rgb, 47,122,214);
  --ir-verlauf:linear-gradient(180deg, color-mix(in srgb, rgb(var(--ir-tint)) 22%, #fff) 0%, color-mix(in srgb, rgb(var(--ir-tint)) 13%, #fff) 70%);
  --ir-text:color-mix(in srgb, rgb(var(--ir-tint)) 30%, #0b1726);
  --ir-ic:color-mix(in srgb, rgb(var(--ir-tint)) 55%, #0b1726);
  /* Der leise Ton stand auf einem Grau, das fuer WEISSEN Grund gedacht war.
     Auf dem Verlauf (oben 22 % Toenung) kam er nur auf 1,6:1 — nicht lesbar.
     Jetzt rund 5,3:1, und immer noch klar zurueckgenommen. */
  --ir-leise:color-mix(in srgb, rgb(var(--ir-tint)) 35%, #3b4a5c);
  --ir-aktiv:color-mix(in srgb, rgb(var(--ir-tint)) 70%, #0b1726);
  /* Beschriftung nicht gewaehlter Knoepfe in der Inhaltsleiste (Ansichten,
     Spalten, Filter). Alle aus derselben Quelle, damit die Zeile ruhig wirkt. */
  --ir-knopf:color-mix(in srgb, rgb(var(--ir-tint)) 35%, #46566b);
  --ir-hover:rgba(var(--ir-tint), .10);
  --ir-gewaehlt:rgba(var(--ir-tint), .18);
  --ir-kante:rgba(var(--ir-tint), .26);
  /* Eingabefelder — Suchzeilen, Filter. Sie liegen auf der getoenten Flaeche
     und brauchen einen eigenen Grund; ein fest weisses Feld wird in einem
     dunklen Design zur Leuchtflaeche, auf der die helle Schrift verschwindet. */
  --ir-feld:rgba(255,255,255,.75);
  --ir-feldkante:rgba(var(--ir-tint), .18);
  --ir-ecke:18px;
}

/* ---------- Dunkle Designs ----------
   Die Rollen oben mischen ihren Grund mit Weiss — gut fuer helle Flaechen,
   falsch fuer schwarze: die Navigation stand als weisse Leiste in einem
   schwarzen Fenster. Hier kehrt sich die Mischung um: der Grund ist die
   Toenung selbst (eine Spur heller als die Flaeche), die Schrift wird hell.
   Die Werte sind so gewaehlt, dass Text 4,5:1 und Symbole 3:1 erreichen. */
body[data-ir-dunkel="1"], html[data-ir-dunkel="1"], html[data-ir-dunkel="1"] body{
  /* Kein eigener Ton, kein Verlauf: die Navigation traegt genau die Flaeche
     des Designs. Bei Midnight also Schwarz — Nav und Fenster sind eins. */
  --ir-verlauf:var(--ck-chrome, #141414);
  --ir-text:#ffffff;
  --ir-ic:#ffffff;
  --ir-leise:rgba(255,255,255,.72);
  --ir-aktiv:#ffffff;
  --ir-knopf:rgba(255,255,255,.82);
  --ir-hover:rgba(255,255,255,.10);
  --ir-gewaehlt:rgba(255,255,255,.16);
  --ir-kante:rgba(255,255,255,.16);
  --ir-feld:rgba(255,255,255,.10);
  --ir-feldkante:rgba(255,255,255,.22);
}

/* =================================================================
   Apps im Hauptfenster
   ================================================================= */

/* ---------- Rahmen ---------- */
.email-frame, .fx-frame, .cs-frame, .ck-frame, .pc-frame, .db-frame, .tmapp-frame, .srec-frame, .deck-frame,
.ftpapp-frame, #vikAppsLib .val-modal, .ibx-pop, .an-pop, .ab-pop, #crmOverlay .crm-panel, .mc-frame, .fbk-frame,
.bkapp-frame, body #sceneStudioOverlay > .scn-frame,
#kalenderOverlay .kal-frame, #bookingOverlay .bk-frame, #vaultOverlay .vt-frame, #netzOverlay .nz-frame,
#zentraleOverlay .zt-frame, #cpOverlay .cp-frame,
#lmOverlay .lm-frame,
#zeOverlay .ze-frame,
#qrOverlay .qr-frame,
#tcOverlay .tc-frame,
#vsOverlay .vs-frame,
#bsOverlay .bs-frame,
#picOverlay .pic-frame{ background:var(--ir-verlauf) !important; color:var(--ir-text); }

/* ---------- Chrome: durchsichtig, ohne Trennstriche ---------- */
#lmOverlay .lm-nav, #lmOverlay .lm-chrome, #lmOverlay .lm-haupt,
#zeOverlay .ze-nav, #zeOverlay .ze-chrome, #zeOverlay .ze-haupt, #qrOverlay .qr-nav, #qrOverlay .qr-chrome, #qrOverlay .qr-haupt,
#tcOverlay .tc-nav, #tcOverlay .tc-kopf, #tcOverlay .tc-haupt,
#vsOverlay .vs-nav, #vsOverlay .vs-kopf, #vsOverlay .vs-haupt,
#bsOverlay .bs-nav, #bsOverlay .bs-chrome, #bsOverlay .bs-arbeit,
#picOverlay .pic-nav, #picOverlay .pic-chrome,
.email-topbar, #emailOverlay .em-layout, #emailOverlay .em-account-bar, #emailOverlay .em-sidebar,
.fx-head, .fx-vtabs, .fx-side, .fx-foot,
.cs-head, .cs-rail,
.ck-head, .ck-rail,
.pc-head, .pc-rail,
.db-head, .db-side, .db-body,
.tmapp-head, .tm-hist, .tmapp-body,
.srec-head, .srec-side, .srec-body,
.deck-head, .deck-body, .deck-frame .sd-rail,
.ftpapp-head, .fxftp-root, .fxftp-body, .fxftp-main, .fxftp-servers, .fxftp-queue,
#vikAppsLib .val-head, #vikAppsLib .val-body, #vikAppsLib .val-list,
.ibx-h, .ibx-src, .ibx-body, .ibx-split, .ibx-rail,
.an-h, .an-tools,
.ab-h, .ab-tools,
#crmOverlay .crm-head,
.mc-head, .fbk-head,
.bkapp-head, .bkapp-body, .bk-side,
body #sceneStudioOverlay > .scn-frame > div:first-child,
#kalenderOverlay .kal-topbar{ background:transparent !important; border-color:transparent !important; box-shadow:none !important; }

/* ---------- Inhalt: runde Ecke oben links, feine Kante ----------
   Ohne overflow:hidden, wo Menues aus dem Inhalt herausragen koennen. */
#emailOverlay .em-list{ position:relative; border-top-left-radius:var(--ir-ecke); background:var(--panel); box-shadow:inset 1px 1px 0 var(--ir-kante); }
#emailOverlay .em-detail{ background:var(--panel); box-shadow:inset 0 1px 0 var(--ir-kante); }
.fx-main, .cs-main, .ck-main, .pc-main, .db-main, .tm-mid, .srec-main, .deck-frame .sd-center, .fxftp-two,
#vikAppsLib .val-detail, .an-body, .ab-body, .mc-body, .fbk-body,
.bkapp-body > .bk-home, .bkapp-body > .bkm, .bkapp-body > .bk-stage,
body #sceneStudioOverlay > .scn-frame > div:nth-child(2){
  position:relative; border-top-left-radius:var(--ir-ecke) !important; background-color:var(--panel); }
.pc-main{ background:#fbfcfe !important; }
.srec-main{ background:#f5f6fb !important; }
.fbk-body{ background:#f5f8fc !important; }
.fx-main > :first-child, .cs-main > :first-child, .ck-main > :first-child, .db-main > :first-child, .tm-mid > :first-child,
.deck-frame .sd-center > :first-child{ border-top-left-radius:var(--ir-ecke); }
.fx-main::after, .cs-main::after, .ck-main::after, .pc-main::after, .db-main::after, .tm-mid::after, .srec-main::after,
.deck-frame .sd-center::after, .fxftp-two::after, #vikAppsLib .val-detail::after{
  content:""; position:absolute; inset:0; z-index:6; border-top-left-radius:inherit; pointer-events:none; box-shadow:inset 1px 1px 0 var(--ir-kante); }
.deck-frame .sd-insp{ background:#fff !important; box-shadow:inset 0 1px 0 var(--ir-kante); }
/* Inbox: im Splitbild ist die Leiste Chrome, sonst ist der ganze Rumpf Inhalt */
.ibx-body:has(.ibx-split){ padding:0 !important; }
.ibx-split .ibx-pane, .ibx-body:not(:has(.ibx-split)){ position:relative; border-top-left-radius:var(--ir-ecke); background:#fff !important; box-shadow:inset 1px 1px 0 var(--ir-kante) !important; }
/* ToDos: der Rumpf rollt selbst — die Ecke schneidet die klebenden Tabellenkoepfe mit */
#crmOverlay .crm-body{ border-top-left-radius:var(--ir-ecke); background:var(--panel); }

/* Die Textfarbe des Rahmens gilt fuer den ganzen Frame — im dunklen Design
   also hell, und sie vererbt sich in jedes Panel mit hellem Grund, das kein
   eigenes color setzt (das Schubfach der Mail-App zum Beispiel). Darum hier
   zurueck auf dunkel: was in der Navigation hell sein muss, holt sich seine
   Farbe ohnehin ausdruecklich aus einer Rolle. */
body[data-ir-dunkel="1"] :is(.email-frame, .fx-frame, .cs-frame, .ck-frame, .pc-frame,
  .db-frame, .tmapp-frame, .srec-frame, .deck-frame, .ftpapp-frame,
  #vikAppsLib .val-modal, .ibx-pop, .an-pop, .ab-pop, #crmOverlay .crm-panel,
  .mc-frame, .fbk-frame, .bkapp-frame, body #sceneStudioOverlay > .scn-frame,
  #kalenderOverlay .kal-frame, #bookingOverlay .bk-frame, #vaultOverlay .vt-frame,
  #netzOverlay .nz-frame, #zentraleOverlay .zt-frame, #cpOverlay .cp-frame){
  color:#12233a;
}

/* ---------- Inhalt bleibt hell, auch im dunklen Design ----------
   Der Rahmen setzt oben color:var(--ir-text) auf den ganzen Frame, und die
   Rollen sind im dunklen Design hell. Beides vererbt sich in genau die
   Flaechen, die weiss bleiben: Dateinamen, Tabellenzeilen und die
   Ansichten-Leisten standen weiss auf weiss.

   Statt jede einzelne Regel zu behandeln, bekommen die Inhaltsflaechen hier
   die Rollen in ihrer hellen Fassung zurueck. Alles, was innerhalb einer
   solchen Flaeche eine Rolle benutzt, ist damit automatisch richtig — auch
   das, was spaeter dazukommt. */
body[data-ir-dunkel="1"] :is(#emailOverlay .em-list, #emailOverlay .em-detail, #emailOverlay .em-drawer, .fx-main, .cs-main, .ck-main, .pc-main, .db-main, .tm-mid, .srec-main, .deck-frame .sd-center, .deck-frame .sd-insp, .fxftp-two, #vikAppsLib .val-detail, .an-body, .ab-body, .mc-body, .fbk-body, .bkapp-body > .bk-home, .bkapp-body > .bkm, .bkapp-body > .bk-stage, .ibx-split .ibx-pane, .ibx-body:not(:has(.ibx-split)), #crmOverlay .crm-body),
html[data-ir-dunkel="1"] :is(#emailOverlay .em-list, #emailOverlay .em-detail, #emailOverlay .em-drawer, .fx-main, .cs-main, .ck-main, .pc-main, .db-main, .tm-mid, .srec-main, .deck-frame .sd-center, .deck-frame .sd-insp, .fxftp-two, #vikAppsLib .val-detail, .an-body, .ab-body, .mc-body, .fbk-body, .bkapp-body > .bk-home, .bkapp-body > .bkm, .bkapp-body > .bk-stage, .ibx-split .ibx-pane, .ibx-body:not(:has(.ibx-split)), #crmOverlay .crm-body){
  --ir-text:#12233a;
  --ir-ic:#46566b;
  --ir-leise:#5b6b80;
  --ir-knopf:#46566b;
  --ir-aktiv:#12233a;
  --ir-hover:rgba(18,35,58,.06);
  --ir-gewaehlt:rgba(18,35,58,.10);
  --ir-kante:rgba(18,35,58,.12);
  --ir-feld:#ffffff;
  --ir-feldkante:rgba(18,35,58,.14);
  color:#12233a;
}

/* ---------- Schrift: Titel, Unterzeile, Schliessen, Abschnittskoepfe ---------- */
:is(.email-topbar, .fx-head, .tmapp-head, .ftpapp-head, .an-h, .ab-h, #crmOverlay .crm-head, .bkapp-head, #kalenderOverlay .kal-topbar) .iapp-titlestack h2,
.email-topbar b, .cs-head h2, .ck-head h2, .pc-head h2, .db-head h2, .srec-tt h2, .deck-head h2, .mc-head h2, .fbk-hstack h2,
#vikAppsLib .val-htt, .ibx-tt, body #sceneStudioOverlay > .scn-frame h2{ color:var(--ir-text) !important; }
:is(.email-topbar, .fx-head, .tmapp-head, .ftpapp-head, .an-h, .ab-h, .bkapp-head) .iapp-sub,
.cs-sub, .ck-sub, .pc-sub, .db-head .db-sub, .srec-sub, .deck-head .deck-sub, .mc-sub, .fbk-powered, #vikAppsLib .val-hst{ color:var(--ir-leise) !important; border-left-color:rgba(var(--ir-tint), .22) !important; }
.email-close, .fx-close, .cs-x, .ck-x, .pc-x, .db-x, .tmapp-x, .srec-x, .deck-frame .deck-x, .ftpapp-x, #vikAppsLib .val-x,
#ibxClose, .an-x, .ab-x, #crmClose, .mc-x, .fbk-x, .bkapp-x, #scnClose, #kalenderOverlay .kal-close{
  color:var(--ir-ic) !important; background:transparent !important; border-color:transparent !important; }
:is(.email-close, .fx-close, .cs-x, .ck-x, .pc-x, .db-x, .tmapp-x, .srec-x, .deck-x, .ftpapp-x, .val-x, #ibxClose, .an-x, .ab-x, #crmClose, .mc-x, .fbk-x, .bkapp-x, .kal-close):hover{
  background:var(--ir-hover) !important; color:var(--ir-text) !important; }
#emailOverlay .em-section-label, #emailOverlay .em-acc-vert-title, .fx-side-h, .fx-foot, .pc-rail .h, .db-sh,
.tm-hist .tm-lbl, .srec-lbl, .deck-frame .sd-rl, .fxftp-servers-head, .fxftp-sh{ color:var(--ir-leise) !important; }

/* ---------- Punkte in den Leisten ---------- */
#emailOverlay .em-folder, .fx-src, .fx-vtab, .cs-nav, .ck-nav, .pc-nav, .db-crow, .db-onode, .tm-hrow,
.deck-frame .sd-prof, .deck-frame .sd-page, .fxftp-srv, #vikAppsLib .val-row, .ibx-ai{ color:var(--ir-text) !important; }
:is(#emailOverlay .em-folder, .fx-src, .fx-vtab, .cs-nav, .ck-nav, .pc-nav, .db-crow, .db-onode, .tm-hrow, .deck-frame .sd-prof, .deck-frame .sd-page, .fxftp-srv, .ibx-ai) .material-symbols-rounded,
.fx-src .fx-sic{ color:var(--ir-ic) !important; }
:is(#emailOverlay .em-folder, #emailOverlay .em-acc-btn, .fx-src, .fx-vtab, .cs-nav, .ck-nav, .pc-nav, .db-crow, .db-onode, .tm-hrow, .deck-frame .sd-prof, .deck-frame .sd-page, .fxftp-srv, #vikAppsLib .val-row, .ibx-ai):hover{
  background:var(--ir-hover) !important; }
#emailOverlay .em-folder.active, .fx-src.on, .cs-nav.on, .ck-nav.on, .pc-nav.on, .db-cnode.on > .db-crow, .db-onode.on, .tm-hrow.on,
.deck-frame .sd-prof.on, .deck-frame .sd-page.on, .fxftp-srv.on, #vikAppsLib .val-row.sel, .ibx-ai.on{
  background:var(--ir-gewaehlt) !important; color:var(--ir-aktiv) !important; border-color:transparent !important; }
:is(#emailOverlay .em-folder.active, .fx-src.on, .cs-nav.on, .ck-nav.on, .pc-nav.on, .db-cnode.on > .db-crow, .db-onode.on, .tm-hrow.on, .deck-frame .sd-prof.on, .deck-frame .sd-page.on, .fxftp-srv.on, .ibx-ai.on) .material-symbols-rounded,
.fx-src.on .fx-sic, #vikAppsLib .val-row.sel *{ color:var(--ir-aktiv) !important; }
#emailOverlay .em-acc-btn.active{ background:var(--ir-gewaehlt); border-color:rgba(var(--ir-tint), .35); }
.fx-vtab.on{ background:var(--ir-gewaehlt) !important; color:var(--ir-aktiv) !important; box-shadow:inset 0 -2px 0 rgb(var(--ir-tint)) !important; }
.fx-vtab.on .material-symbols-rounded{ color:var(--ir-aktiv) !important; }

/* =================================================================
   Unterseiten in iframes (html[data-ir="…"])
   Das Fenster im Hauptfenster traegt denselben Verlauf; die Seite legt
   ihn selbst noch einmal auf, damit beim Laden nichts aufblitzt.
   ================================================================= */
html[data-ir], html[data-ir] body{ color-scheme:light; }

/* Kalender: Kopfzeile im Hauptfenster, darunter die Seite durchsichtig */
html[data-ir="kalender"], html[data-ir="kalender"] body{ background:transparent !important; }
/* ---- Gemessene Blasstellen, die in JEDER App vorkommen ----
   Alle drei standen auf Toenen fuer weissen Grund, liegen aber auf dem
   Verlauf. Werte gegen den dunkelsten Punkt des Verlaufs gerechnet. */
/* „powered by IntentioDesk" in der Kopfzeile: 1,93:1 */
.iapp-powered{ color:var(--ir-leise) !important; }
/* Die Ansichten-Leisten standen in neutralem Grau (#5f7280 bzw. #5f7a93),
   waehrend ringsum alles in der Designfarbe getoent ist — das wirkt blass und
   fremd. Jetzt getoent und eine Spur kraeftiger; der gewaehlte Eintrag bleibt
   unveraendert. */
.m3-segmented > button:not(.on){ color:var(--ir-knopf); }
.m3-segmented > button:not(.on):hover{ color:var(--ir-text); }
/* Der Knopf „Spalten" steht in derselben Zeile und trug ein neutrales
   Dunkelgrau — daneben sah die Zeile zweifarbig aus. */
.crm-eskin-trg .lbl,
.crm-eskin-trg > .material-symbols-rounded{ color:var(--ir-knopf); }
.crm-eskin-trg:hover .lbl,
.crm-eskin-trg:hover > .material-symbols-rounded{ color:var(--ir-text); }

html[data-ir="kalender"] .sidebar{ background:transparent !important; border-color:transparent !important; box-shadow:none !important; }
/* Die Navigation des Kalenders liegt auf dem Verlauf, trug aber noch die
   Grautoene fuer weissen Grund (--muted 3,6:1, --faint 1,9:1). */
html[data-ir="kalender"]{
  --muted:color-mix(in srgb, rgb(var(--ir-tint)) 45%, #22303f);
  --faint:var(--ir-leise);
}
/* Dunkles Design: die Toene der Seitenleiste leiten sich aus dem Tint ab, und
   der ist bei einer schwarzen Flaeche selbst fast schwarz — Kategorien, der
   Mini-Monat und die Kalenderliste standen dunkel auf dunkel. Die Werte
   stehen auf der Seitenleiste, nicht am Dokument: die Wochenansicht rechts
   bleibt hell und braucht ihre dunkle Schrift. */
html[data-ir="kalender"][data-ir-dunkel="1"] .sidebar{
  --text:var(--ir-text);
  --muted:var(--ir-leise);
  --faint:color-mix(in srgb, rgb(var(--ir-tint)) 42%, #ffffff);
  --chrome:rgba(255,255,255,.10);
  --surface:rgba(255,255,255,.06);
  color:var(--ir-text);
}
html[data-ir="kalender"] .cal-card{ border-top-left-radius:var(--ir-ecke); box-shadow:0 0 0 1px var(--ir-kante); }
html[data-ir="kalender"] .sb-title{ color:var(--ir-leise) !important; }

/* Terminbuchung: Kopf + Leiste + Inhalt */
html[data-ir="termin"], html[data-ir="termin"] body{ background:var(--ir-verlauf) !important; }
html[data-ir="termin"] .m-head, html[data-ir="termin"] .rail{ background:transparent !important; border-color:transparent !important; }
html[data-ir="termin"] .content{ background:#fff !important; border-top-left-radius:var(--ir-ecke); box-shadow:inset 1px 1px 0 var(--ir-kante); }
html[data-ir="termin"] .m-title{ color:var(--ir-text) !important; }
html[data-ir="termin"] .m-sub, html[data-ir="termin"] .rail-h{ color:var(--ir-leise) !important; }
html[data-ir="termin"] .nav{ color:var(--ir-text) !important; }
html[data-ir="termin"] .nav:hover{ background:var(--ir-hover) !important; }
html[data-ir="termin"] .nav.active{ background:var(--ir-gewaehlt) !important; color:var(--ir-aktiv) !important; }
html[data-ir="termin"] .m-close{ color:var(--ir-ic) !important; }

/* Tresor: Kopf + Inhalt */
html[data-ir="tresor"], html[data-ir="tresor"] body{ background:var(--ir-verlauf) !important; }
html[data-ir="tresor"] .app > .iapp-head{ background:transparent !important; border-color:transparent !important; }
html[data-ir="tresor"] .app > .body{ background:#fff !important; border-top-left-radius:var(--ir-ecke); box-shadow:inset 1px 1px 0 var(--ir-kante); }
html[data-ir="tresor"] .iapp-titlestack h2{ color:var(--ir-text) !important; }
html[data-ir="tresor"] .iapp-sub{ color:var(--ir-leise) !important; }
html[data-ir="tresor"]{ --muted:color-mix(in srgb, rgb(var(--ir-tint)) 45%, #22303f); --faint:var(--ir-leise); }

/* Netzwerk (System-Monitor): Kopf + Kartenflaeche — nur im hellen Modus */
html[data-ir="netz"]:not([data-theme="dark"]), html[data-ir="netz"]:not([data-theme="dark"]) body{ background:var(--ir-verlauf) !important; }
html[data-ir="netz"]:not([data-theme="dark"]) body > .iapp-head{ background:transparent !important; border-color:transparent !important; }
html[data-ir="netz"]:not([data-theme="dark"]) body > .body{ background:#eef2f8 !important; border-top-left-radius:var(--ir-ecke); box-shadow:inset 1px 1px 0 var(--ir-kante); }
html[data-ir="netz"]:not([data-theme="dark"]) .iapp-titlestack h2{ color:var(--ir-text) !important; }

/* Zentrale: Kopf + Reiter + Inhalt — nur im hellen Modus */
html[data-ir="zentrale"]:not([data-theme="dark"]), html[data-ir="zentrale"]:not([data-theme="dark"]) body{ background:var(--ir-verlauf) !important; }
html[data-ir="zentrale"]:not([data-theme="dark"]) header.top, html[data-ir="zentrale"]:not([data-theme="dark"]) nav.tabs, html[data-ir="zentrale"]:not([data-theme="dark"]) .zt-reiter{ background:transparent !important; box-shadow:none !important; border-color:transparent !important; }
html[data-ir="zentrale"]:not([data-theme="dark"]) body > main{ background:#eef2f7 !important; border-top-left-radius:var(--ir-ecke); box-shadow:inset 1px 1px 0 var(--ir-kante); }
html[data-ir="zentrale"]:not([data-theme="dark"]) .top b{ color:var(--ir-text) !important; }
html[data-ir="zentrale"]:not([data-theme="dark"]) .tabs button{ color:var(--ir-text); }
html[data-ir="zentrale"]:not([data-theme="dark"]) .tabs button.on{ color:var(--ir-aktiv) !important; }

/* Color Picker: Kopf + zwei Leisten, dazwischen die Flaeche */
html[data-ir="farbe"], html[data-ir="farbe"] body{ background:var(--ir-verlauf) !important; }
html[data-ir="farbe"] .apphead, html[data-ir="farbe"] aside.projs, html[data-ir="farbe"] aside.rail{ background:transparent !important; border-color:transparent !important; }
html[data-ir="farbe"] .board{ background:#fff !important; border-radius:var(--ir-ecke) var(--ir-ecke) 0 0; box-shadow:inset 1px 1px 0 var(--ir-kante), inset -1px 0 0 var(--ir-kante); }
html[data-ir="farbe"] .iapp-titlestack h2, html[data-ir="farbe"] .proj{ color:var(--ir-text) !important; }
html[data-ir="farbe"] .proj:hover{ background:var(--ir-hover) !important; }
html[data-ir="farbe"] .proj.on{ background:var(--ir-gewaehlt) !important; color:var(--ir-aktiv) !important; }
html[data-ir="farbe"] .projs .lbl, html[data-ir="farbe"] .iapp-sub{ color:var(--ir-leise) !important; }

/* =================================================================
   Suche in der Kopfzeile — wie in der CRM Suite
   Das Feld wandert aus der Werkzeugleiste in die Kopfzeile, gleich nach
   dem Titel; was rechts steht, rueckt ans Ende.
   ================================================================= */
.ir-kopfsuche{ flex:1 1 auto !important; width:auto !important; max-width:520px !important; min-width:160px !important; display:flex !important; align-items:center; gap:9px;
  height:40px; margin:0 auto 0 14px !important; padding:0 12px 0 14px !important; border-radius:20px !important; border:0 !important;
  /* Der Grund kommt aus der Rolle: ein fest weisses Feld wird in einem
     dunklen Design zur Leuchtflaeche, auf der die helle Schrift verschwindet. */
  background:var(--ir-feld) !important; box-shadow:inset 0 0 0 1px var(--ir-feldkante) !important; color:var(--ir-ic); cursor:text; }
.ir-kopfsuche[hidden]{ display:none !important; }
.ir-kopfsuche:focus-within{ box-shadow:inset 0 0 0 2px var(--ir-kante) !important; }
.ir-kopfsuche > .material-symbols-rounded{ font-size:20px !important; color:var(--ir-ic) !important; }
.ir-kopfsuche input{ flex:1 !important; min-width:0; height:100%; border:0 !important; outline:0 !important; background:transparent !important; box-shadow:none !important;
  padding:0 !important; margin:0 !important; font:inherit; font-size:14px !important; color:var(--ir-text) !important; }
.ir-kopfsuche input::placeholder{ color:var(--ir-leise); opacity:1; }
.pc-kopfslot{ display:contents; }
html[data-theme="dark"] .ir-kopfsuche{ background:rgba(255,255,255,.08) !important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14) !important; }
html[data-theme="dark"] .ir-kopfsuche input{ color:inherit !important; }

/* =================================================================
   Apps ohne Seitenleiste: der Inhalt liegt mit 5px Abstand links und
   unten auf dem Verlauf, beide linken Ecken rund.
   ================================================================= */
.an-body, .ab-body, #crmOverlay .crm-body, .mc-body, .fbk-body,
.bkapp-body > .bk-home, .bkapp-body > .bkm,
body #sceneStudioOverlay > .scn-frame > div:nth-child(2),
.ibx-body:not(:has(.ibx-split)),
html[data-ir="tresor"] .app > .body,
html[data-ir="netz"]:not([data-theme="dark"]) body > .body,
html[data-ir="zentrale"]:not([data-theme="dark"]) body > main{
  margin:0 0 25px 10px !important; border-bottom-left-radius:var(--ir-ecke) !important;
  /* Echte Kante statt Schatten: klebende Tabellenkoepfe und farbige Zeilen
     malen sonst ueber den Schatten und ragen scheinbar links heraus. */
  box-shadow:none !important; border-style:solid !important; border-width:1px 0 1px 1px !important; border-color:var(--ir-kante) !important; }

/* =================================================================
   Knoepfe im Inhalt statt in der Kopfzeile
   In der Kopfzeile stehen nur Logo, Titel, Suche und Schliessen. Alles
   andere steht in der ersten Zeile des Inhalts — Ansicht links, Neu rechts.
   irLeiste() in main.js setzt die Knoten nach jedem Neuzeichnen wieder ein.
   ================================================================= */
.ir-vorrat{ display:none !important; }
.ir-sp{ flex:1 1 auto; min-width:8px; }
.ir-leiste{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* ToDos: Ansicht | Spalten/Design … Smart CRM, Neues ToDo */
#crmOverlay .crm-body > :is(.crm-tbar, .crm-kbar, .crm-eskins){ display:flex !important; justify-content:flex-start !important; align-items:center; gap:10px; flex-wrap:wrap; }
#crmOverlay .crm-body > .crm-kbar{ padding:14px 16px 4px !important; }
/* Posteingang */
.ibx-body .ibx-leiste{ position:sticky; top:0; z-index:4; background:#fff; padding:2px 2px 10px; }
.ibx-split .ibx-leiste{ margin:-8px -8px 4px; padding:8px 8px 10px; }
/* Snippets, Notizen */
.ab-body > .ab-tools{ position:sticky; top:-14px; z-index:4; margin:-14px -16px 10px; padding:12px 16px 10px !important; background:#fff !important; border:0 !important; border-top-left-radius:var(--ir-ecke); }
.an-body > .an-tools{ flex:none; padding:12px 16px 4px !important; border:0 !important; }
/* Datenbank */
.db-crumb .db-neu{ height:34px; margin-left:10px; }
/* Katalog */
.bk-zurueck{ all:unset; box-sizing:border-box; cursor:pointer; display:inline-flex; align-items:center; gap:7px; height:36px; min-width:36px; justify-content:center; border-radius:10px; color:var(--ci-mut, #5b6b7d); font-size:13px; font-weight:600; }
.bk-zurueck:hover{ background:var(--ci-soft, #eef2f7); color:var(--ci-ink, #0f172a); }
.bk-zurueck .material-symbols-rounded{ font-size:20px; }
.bk-zurueck.breit{ padding:0 10px 0 6px; margin:0 0 10px -4px; }
/* FTP */
.fxftp-sidehead .ftpapp-viewbtn{ height:30px; padding:0 11px; margin-left:4px; font-size:12.5px; }
/* Performance Control */
.pc-vh > .pc-admchip, .pc-vh > .pc-health, .pc-vh > .pc-seg{ align-self:center; flex:none; }
.pc-vh > div:first-child{ min-width:0; }
/* Code Suite, Campaign Kit, Media Convert: "Lokal" leise am Ende */
.cs-rail, .ck-rail{ display:flex !important; flex-direction:column; }
.cs-rail > .cs-lokal, .ck-rail > .cs-lokal{ margin-top:auto; align-self:flex-start; margin-left:6px; }
.mc-body > .mc-lokal{ align-self:flex-start; }
/* ScreenRecord */
.srec-leiste{ flex:none; display:flex; align-items:center; gap:10px; margin-bottom:12px; }

/* ============================================================
   ICON-FAMILIE DER INTENTIO APPS — Doppelkachel
   Vorn (::after) die App in ihrer Kategorie-Farbe, dahinter (.int-back)
   versetzt die Markenkachel in Vikolia-Orange.
   Die Kantenlänge gibt der Container über font-size vor; alles andere rechnet
   in em/%, damit dieselbe Kachel vom Menüeintrag bis zur Einstellungsliste passt.
   Farbe kommt als --ih / --isat / --il aus intIconVars() in main.js.
   ============================================================ */
.int-ic{
  position:relative; flex:none; display:grid; place-items:center; isolation:isolate;
  width:1em; height:1em; border-radius:.26em; color:#fff; overflow:visible;
}
.int-ic > .material-symbols-rounded{
  z-index:2; font-size:.5em; line-height:1; color:#fff;
  font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 40;
}
/* vordere Kachel — die App */
.int-ic::after{
  content:""; position:absolute; z-index:1; inset:0; border-radius:inherit;
  background:linear-gradient(158deg,
    hsl(var(--ih, 222) calc(var(--isat, 70) * 1%) calc(var(--il, 54) * 1% + 11%)),
    hsl(var(--ih, 222) calc(var(--isat, 70) * 1%) calc(var(--il, 54) * 1% - 9%)));
  box-shadow:0 .05em .13em -.05em rgba(16,42,66,.5), inset 0 1px 0 rgba(255,255,255,.42);
}
/* hintere Kachel — die Marke, ohne Schrift */
.int-back{
  position:absolute; z-index:0; inset:0; border-radius:inherit;
  background:linear-gradient(150deg,#f4b064,#c6741d);
  transform:translate(11%,-9%) rotate(7deg);
  box-shadow:0 .035em .09em rgba(16,42,66,.3);
}

/* Im Kopf einer App ist das Icon so groß wie die alte Kachel. */
.int-ic.iapp-ic{ font-size:30px; }
[data-intlogo]{ display:inline-flex; flex:none; }

/* FTP: der Inhalt steht zwischen Verbindungsleiste und Übertragungsleiste —
   beide linken Ecken rund, darunter etwas Luft. overflow:hidden, weil die
   Spaltenköpfe sonst über die runde Ecke malen. */
.fxftp-two{ border-bottom-left-radius:var(--ir-ecke) !important; overflow:hidden; margin-bottom:10px; }
.fxftp-two::after{ border-radius:inherit; box-shadow:inset 1px 1px 0 var(--ir-kante), inset 0 -1px 0 var(--ir-kante); }

/* Datei-Explorer: wie bei FTP — der Inhalt endet mit runder Ecke über der
   Fußzeile. Der Rumpf hebt sich mit, damit auch die Vorschau rechts passt. */
.fx-body{ margin-bottom:10px; }
.fx-main{ border-bottom-left-radius:var(--ir-ecke) !important; overflow:hidden; }
.fx-main::after{ border-radius:inherit; box-shadow:inset 1px 1px 0 var(--ir-kante), inset 0 -1px 0 var(--ir-kante); }

/* Eine feine Kante zwischen Konten und Ordnern. Der Rahmen nimmt oben alle
   Trennstriche weg; hier ist einer sinnvoll, weil beide Spalten dieselbe
   Flaeche tragen und sonst ineinanderlaufen. Sie haengt am Raster, nicht an
   der Spalte: die scrollt, die Linie soll stehen bleiben. */
#emailOverlay .em-layout::before{
  content:""; position:absolute; top:0; bottom:0; left:var(--em-c1, 210px); width:2px; margin-left:-1px;
  z-index:5; pointer-events:none;
  /* Kraeftig in der Mitte, oben und unten nur noch ein Hauch - aber nie ganz weg. */
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--ir-feldkante) 25%, transparent) 0,
    var(--ir-feldkante) 18%, var(--ir-feldkante) 82%,
    color-mix(in srgb, var(--ir-feldkante) 25%, transparent) 100%);
  /* … und dabei schmaler werdend: zwei Pixel in der Mitte, ein Pixel an den Enden. */
  clip-path:polygon(25% 0, 75% 0, 100% 18%, 100% 82%, 75% 100%, 25% 100%, 0 82%, 0 18%);
}


/* ---- SCHWARZ: die Inhaltsflaechen der Apps ----
   data-ir-dunkel setzt sie bewusst auf hell zurueck (siehe oben) — das ist
   fuer ein dunkles DESIGN richtig, fuer echtes Schwarz falsch. Hier wird es
   aufgehoben. Klasse + Attribut wiegen schwerer als das Attribut allein. */
body.theme-dark[data-ir-dunkel="1"] :is(#emailOverlay .em-list, #emailOverlay .em-detail, #emailOverlay .em-drawer, .fx-main, .cs-main, .ck-main, .pc-main, .db-main, .tm-mid, .srec-main, .deck-frame .sd-center, .deck-frame .sd-insp, .fxftp-two, #vikAppsLib .val-detail, .an-body, .ab-body, .mc-body, .fbk-body, .bkapp-body > .bk-home, .bkapp-body > .bkm, .bkapp-body > .bk-stage, .ibx-split .ibx-pane, .ibx-body:not(:has(.ibx-split)), #crmOverlay .crm-body),
body.theme-dark :is(#emailOverlay .em-list, #emailOverlay .em-detail, #emailOverlay .em-drawer, .fx-main, .cs-main, .ck-main, .pc-main, .db-main, .tm-mid, .srec-main, .deck-frame .sd-center, .deck-frame .sd-insp, .fxftp-two, #vikAppsLib .val-detail, .an-body, .ab-body, .mc-body, .fbk-body, .bkapp-body > .bk-home, .bkapp-body > .bkm, .bkapp-body > .bk-stage, .ibx-split .ibx-pane, .ibx-body:not(:has(.ibx-split)), #crmOverlay .crm-body){
  --ir-text:#f2f4f7;
  --ir-ic:rgba(255,255,255,.72);
  --ir-leise:rgba(255,255,255,.55);
  --ir-knopf:rgba(255,255,255,.72);
  --ir-aktiv:#ffffff;
  --ir-hover:rgba(255,255,255,.07);
  --ir-gewaehlt:rgba(255,255,255,.12);
  --ir-kante:rgba(255,255,255,.10);
  --ir-feld:#16161a;
  --ir-feldkante:rgba(255,255,255,.16);
  color:var(--text);
  background-color:var(--panel);
}

/* Fuenf Flaechen setzen ihre Farbe mit !important — dagegen hilft nur
   dasselbe Mittel. */
body.theme-dark .pc-main,
body.theme-dark .srec-main,
body.theme-dark .fbk-body,
body.theme-dark .deck-frame .sd-insp,
body.theme-dark .ibx-split .ibx-pane,
body.theme-dark .ibx-body:not(:has(.ibx-split)){
  background:var(--panel) !important;
}


/* =================================================================
   Lead Magnet
   -----------------------------------------------------------------
   Die App bringt den Aufbau schon richtig mit (Leiste und Kopf auf
   einer Flaeche, Inhalt mit runder Ecke). Hier steht nur, was vom
   gewaehlten Design abhaengt und darum nicht in ihr eigenes Blatt
   gehoert.
   ================================================================= */
#lmOverlay .lm-koerper::after{ box-shadow:inset 1px 1px 0 var(--ir-kante); }
#lmOverlay .lm-navfuss{ border-top-color:var(--ir-kante); }
#lmOverlay .lm-nb{ color:var(--ir-text); }
#lmOverlay .lm-nb .material-symbols-rounded{ color:var(--ir-ic); }
#lmOverlay .lm-nb:hover{ background:var(--ir-hover); }
#lmOverlay .lm-nb.lm-an{ background:var(--ir-gewaehlt); color:var(--ir-aktiv); }
#lmOverlay .lm-nb.lm-an .material-symbols-rounded{ color:var(--ir-aktiv); }
#lmOverlay .lm-nvgr, #lmOverlay .lm-mt small{ color:var(--ir-leise); }
#lmOverlay .lm-gsfeld{ background:var(--ir-feld); border-color:var(--ir-feldkante); color:var(--ir-leise); }
#lmOverlay .lm-gsfeld input{ color:var(--ir-text); }
#lmOverlay .lm-gsfeld kbd{ background:var(--ir-hover); color:var(--ir-leise); }
#lmOverlay .lm-xzu{ color:var(--ir-leise); }
#lmOverlay .lm-xzu:hover{ background:var(--ir-hover); color:var(--ir-text); }
#lmOverlay .lm-zurueckf{ border-color:var(--ir-kante); }


/* =================================================================
   Zeiterfassung
   -----------------------------------------------------------------
   Leiste durchsichtig auf dem Verlauf, Inhalt mit runder Ecke darauf.
   Die Masse (Pillen 42/21, Logo 36/11) stehen im eigenen Blatt --
   die haengen nicht am Design.
   ================================================================= */
#zeOverlay .ze-nav{ border-right:0; }
#zeOverlay .ze-nv{ color:var(--ir-text); }
#zeOverlay .ze-nv .material-symbols-rounded{ color:var(--ir-ic); }
#zeOverlay .ze-nv:hover{ background:var(--ir-hover); color:var(--ir-text); }
#zeOverlay .ze-nv.an{ background:var(--ir-gewaehlt); color:var(--ir-aktiv); }
#zeOverlay .ze-nv.an .material-symbols-rounded{ color:var(--ir-aktiv); }
#zeOverlay .ze-nvgr, #zeOverlay .ze-mt small, #zeOverlay .ze-navnote{ color:var(--ir-leise); }
#zeOverlay .ze-navfuss{ border-top-color:var(--ir-kante); }
#zeOverlay .ze-schalter{ color:var(--ir-text); }
#zeOverlay .ze-schalter:hover{ background:var(--ir-hover); }
/* Die Uhr sitzt in der Leiste und stand auf einem Akzentton, der fuer
   WEISSEN Grund gedacht war. Auf dem Verlauf braucht sie einen eigenen
   Grund, sonst verschwimmt sie mit der Flaeche. */
#zeOverlay .ze-uhrkarte{ background:rgba(255,255,255,.55);
  box-shadow:inset 0 0 0 1px var(--ir-kante); }
#zeOverlay .ze-uhrzeit{ color:var(--ir-aktiv); }
#zeOverlay .ze-uhrwas{ color:var(--ir-leise); }
/* Die feine Kante an der runden Ecke -- dieselbe wie bei der CRM Suite. */
#zeOverlay .ze-main{ box-shadow:inset 1px 1px 0 var(--ir-kante); }
#zeOverlay .ze-gsfeld{ background:var(--ir-feld); border-color:var(--ir-feldkante); color:var(--ir-leise); }
#zeOverlay .ze-gsfeld input{ color:var(--ir-text); }
#zeOverlay .ze-gsfeld kbd{ background:var(--ir-hover); color:var(--ir-leise); }
#zeOverlay .ze-zu{ color:var(--ir-leise); }
#zeOverlay .ze-zu:hover{ background:var(--ir-hover); color:var(--ir-text); }


/* =================================================================
   QR-Codes
   ================================================================= */
#qrOverlay .qr-nav{ border-right:0; }
#qrOverlay .qr-nv{ color:var(--ir-text); }
#qrOverlay .qr-nv .material-symbols-rounded{ color:var(--ir-ic); }
#qrOverlay .qr-nv:hover{ background:var(--ir-hover); color:var(--ir-text); }
#qrOverlay .qr-nv.an{ background:var(--ir-gewaehlt); color:var(--ir-aktiv); }
#qrOverlay .qr-nv.an .material-symbols-rounded{ color:var(--ir-aktiv); }
#qrOverlay .qr-nvgr, #qrOverlay .qr-mt small{ color:var(--ir-leise); }
#qrOverlay .qr-main{ box-shadow:inset 1px 1px 0 var(--ir-kante); }
#qrOverlay .qr-gsfeld{ background:var(--ir-feld); border-color:var(--ir-feldkante); color:var(--ir-leise); }
#qrOverlay .qr-gsfeld input{ color:var(--ir-text); }
#qrOverlay .qr-gsfeld kbd{ background:var(--ir-hover); color:var(--ir-leise); }
#qrOverlay .qr-zu{ color:var(--ir-leise); }
#qrOverlay .qr-zu:hover{ background:var(--ir-hover); color:var(--ir-text); }


/* =================================================================
   Video Suite
   -----------------------------------------------------------------
   Hier wird auch der KOPF zum Chrome: er traegt den Verlauf mit und
   verliert seinen Trennstrich, so wie .crs-kopf. Die runde Ecke sitzt
   darum am Rumpf darunter.
   ================================================================= */
#vsOverlay .vs-nav{ border-right:0; }
#vsOverlay .vs-kopf{ border-bottom:0; }
#vsOverlay .vs-nv{ color:var(--ir-text); }
#vsOverlay .vs-nv .material-symbols-rounded{ color:var(--ir-ic); }
#vsOverlay .vs-nv:hover{ background:var(--ir-hover); color:var(--ir-text); }
#vsOverlay .vs-nv.an{ background:var(--ir-gewaehlt); color:var(--ir-aktiv); }
#vsOverlay .vs-nv.an .material-symbols-rounded{ color:var(--ir-aktiv); }
#vsOverlay .vs-navgruppe, #vsOverlay .vs-mt small{ color:var(--ir-leise); }
#vsOverlay .vs-kopf h1{ color:var(--ir-text); }
#vsOverlay .vs-body{ box-shadow:inset 1px 1px 0 var(--ir-kante); }


/* =================================================================
   Board Suite
   -----------------------------------------------------------------
   Die Tafelliste sind Kacheln, keine Navigationseintraege -- sie
   behalten ihre Form. Getoent werden Leiste, Kopf und die Umgebung
   der Leinwand.
   ================================================================= */
#bsOverlay .bs-nav{ border-right:0; }
#bsOverlay .bs-navfuss{ border-top-color:var(--ir-kante); }
#bsOverlay .bs-mt small{ color:var(--ir-leise); }
#bsOverlay .bs-gr{ color:var(--ir-leise); }
#bsOverlay .bs-gsfeld{ background:var(--ir-feld); border-color:var(--ir-feldkante); color:var(--ir-leise); }
#bsOverlay .bs-gsfeld input{ color:var(--ir-text); }
#bsOverlay .bs-gsfeld kbd{ background:var(--ir-hover); color:var(--ir-leise); }
#bsOverlay .bs-zu{ color:var(--ir-leise); }
#bsOverlay .bs-zu:hover{ background:var(--ir-hover); color:var(--ir-text); }
#bsOverlay .bs-koerper{ box-shadow:inset 1px 1px 0 var(--ir-kante); }


/* =================================================================
   Picture Suite
   -----------------------------------------------------------------
   Drei Spalten, im Bearbeiten vier -- der Kopf laeuft ueber alles
   rechts der Leiste, sonst saesse er schief ueber dem Bild. Die
   rechte Spalte bleibt weiss: sie ist Inhalt, kein Chrome.
   ================================================================= */
#picOverlay .pic-nav{ border-right:0; }
#picOverlay .pic-nv{ color:var(--ir-text); }
#picOverlay .pic-nv .material-symbols-rounded{ color:var(--ir-ic); }
#picOverlay .pic-nv:hover{ background:var(--ir-hover); color:var(--ir-text); }
#picOverlay .pic-nv.an{ background:var(--ir-gewaehlt); color:var(--ir-aktiv); }
#picOverlay .pic-nv.an .material-symbols-rounded{ color:var(--ir-aktiv); }
#picOverlay .pic-nvgr, #picOverlay .pic-mt small{ color:var(--ir-leise); }
#picOverlay .pic-navfuss{ border-top-color:var(--ir-kante); }
#picOverlay .pic-gsfeld{ background:var(--ir-feld); border-color:var(--ir-feldkante); color:var(--ir-leise); }
#picOverlay .pic-gsfeld input{ color:var(--ir-text); }
#picOverlay .pic-gsfeld kbd{ background:var(--ir-hover); color:var(--ir-leise); }
#picOverlay .pic-zu{ color:var(--ir-leise); }
#picOverlay .pic-zu:hover{ background:var(--ir-hover); color:var(--ir-text); }
#picOverlay .pic-mitte{ box-shadow:inset 1px 1px 0 var(--ir-kante); }