/* ===========================================================================
Capita Web-Tools — Design-System (Kanon v1)
Marke: Ellio (zuvor Capita). Telag bleibt unveraendert daneben.
Zentrale, geteilte Stylesheet-Quelle für alle Web-Tools am Cognito-Pool.
Eingebunden via:
Betrieb: TELAG AG
=========================================================================== */
/* ---------- Fonts (self-hosted, OFL) ---------- */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-500.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-600.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/inter-700.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/inter-800.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/jetbrains-mono-500.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/jetbrains-mono-600.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/jetbrains-mono-700.woff2') format('woff2');}
/* ---------- Tokens: Light ----------
Marke: Ellio. Werte aus den CSS-Variablen von elliocx.com uebernommen:
#07433b Dunkelgruen #c9ff65 Lime #09090b Schwarz #eeefe8 Warmgrau
Die Logodateien enthalten dieselben Toene (#00433a / #c9ff66).
Zwei Regeln tragen die Palette:
1. Die Rollen tauschen zwischen hell und dunkel. Dunkelgruen hat auf Weiss
11.20:1 und traegt dort jede Schrift; auf Schwarz kommt es auf 1.78:1.
Lime ist umgekehrt: 1.17:1 auf Weiss --- als Schrift oder duenne Linie im
Hellmodus unsichtbar --- und 17.03:1 auf Schwarz. Hell fuehrt also
Dunkelgruen, dunkel fuehrt Lime.
2. Die Marke ist gruen, und gruen bedeutet hier schon "in Ordnung". Der
ok-Ton wurde deshalb vom Markengruen weggedreht (#1f9d6b -> #1f9a4a,
Abstand 20.5 -> 31.5 Grad) und --accent-soft ist bewusst warmes Grau
statt Gruen: sonst stehen Marken- und ok-Abzeichen als zwei blasse
gruene Pillen nebeneinander. --bad bleibt #d2232a, unangetastet.
---------- */
:root{
color-scheme: light;
--bg:#f2f3ec; --surface:#ffffff; --surface-2:#f8f9f4; --surface-3:#eeefe8;
--ink:#09090b; --ink-2:#3f4a44; --muted:#545b55; --faint:#666d64;
--border:#dfe1d6; --line:#eceee5; --hairline:#e7e9df; --hover:#f5f7f0; --overlay:rgba(7,67,59,.05);
/* Akzent = Ellio-Dunkelgruen, Rot = Gefahr (unveraendert) */
--accent:#07433b; --accent-dark:#052e28; --accent-soft:#eceadf; --on-accent:#ffffff;
--cyan:#c9ff65; --navy:#07433b;
--ok:#1f9a4a; --ok-bg:#e6f5e6; --ok-ink:#1a6d30;
--warn:#c9871a; --warn-bg:#fdf3e2; --warn-ink:#8a5b06;
--bad:#d2232a; --bad-bg:#fbe9ea; --bad-ink:#a81b21;
--info:#3b6fd4; --info-bg:#e8edfb; --info-ink:#2f5cab;
--neutral:#545b55; --neutral-bg:#eeefe8;
/* Seitenleiste (immer dunkel) --- die groesste Markenflaeche im Werkzeug */
--nav-bg:#07433b; --nav-ink:#cfe3d8; --nav-ink-active:#ffffff;
--nav-hover:rgba(255,255,255,.07); --nav-active:rgba(201,255,101,.16); --nav-line:rgba(255,255,255,.10);
/* Radius / Schatten */
--r-xs:6px; --r-sm:9px; --radius:12px; --radius-lg:16px; --r-xl:22px; --r-pill:999px;
--shadow-xs:0 1px 2px rgba(25,29,37,.05);
--shadow-sm:0 1px 3px rgba(25,29,37,.06), 0 1px 2px rgba(25,29,37,.04);
--shadow:0 1px 2px rgba(25,29,37,.04), 0 4px 16px -8px rgba(25,29,37,.10);
--shadow-lg:0 12px 36px -12px rgba(25,29,37,.22), 0 2px 6px rgba(25,29,37,.06);
/* Typo / Motion */
--sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
--mono:'JetBrains Mono',ui-monospace,'SF Mono','Cascadia Code',Consolas,monospace;
--ease:cubic-bezier(.22,.61,.36,1); --dur:160ms;
}
/* ---------- Tokens: Dark ----------
Neutraler Grund, gruene Seitenleiste. Der Inhaltsbereich soll nichts wollen:
dort wird gelesen, und ein Farbstich im Untergrund mischt sich in die
Statusfarben --- bei Gruen ausgerechnet in die Farbe, die "in Ordnung" heisst.
Die Marke bekommt stattdessen die Seitenleiste. Nebeneffekt: sie sieht in
hell und dunkel gleich aus, nur der Inhalt daneben wechselt.
---------- */
:root[data-theme="dark"]{
color-scheme: dark;
--bg:#09090b; --surface:#121215; --surface-2:#17171b; --surface-3:#1f1f24;
--ink:#f0f0f2; --ink-2:#b2b2ba; --muted:#9a9aa3; --faint:#868691;
--border:#2a2a31; --line:#1c1c21; --hairline:#191920; --hover:#1a1a1f; --overlay:rgba(201,255,101,.06);
--accent:#c9ff65; --accent-dark:#b2e84f; --accent-soft:#22221c; --on-accent:#09090b;
--cyan:#c9ff65; --navy:#07433b;
--ok:#3fcaa4; --ok-bg:#12241f; --ok-ink:#5adcb8;
--warn:#e0a743; --warn-bg:#2b2415; --warn-ink:#f0c069;
--bad:#e2474d; --bad-bg:#2b1a1c; --bad-ink:#f08a8e;
--info:#5a93e6; --info-bg:#181f30; --info-ink:#8fb4f0;
--neutral:#9a9aa3; --neutral-bg:#1f1f24;
--nav-bg:#07433b; --nav-ink:#cfe3d8;
--nav-active:rgba(201,255,101,.18);
--shadow-xs:0 1px 2px rgba(0,0,0,.5);
--shadow-sm:0 1px 3px rgba(0,0,0,.5);
--shadow:0 1px 2px rgba(0,0,0,.30), 0 6px 18px -10px rgba(0,0,0,.55);
--shadow-lg:0 14px 40px -14px rgba(0,0,0,.65), 0 2px 6px rgba(0,0,0,.4);
}
/* ---------- Lesbarkeit der leisen Textstufen -------------------------------
Gefunden beim Nachmessen jedes Textknotens gegen seinen tatsaechlichen
Untergrund: --faint und die halbtransparenten Weisstoene der Seitenleiste
lagen unter 4.5:1. Betroffen war echter Inhalt, nicht Zierde --- .cui-note
traegt Erklaerungstexte, .cui-section > h2 traegt Abschnittsueberschriften.
Das ist Bestand und nicht Folge des Rebrandings: im alten Capita-Schema kam
--faint auf 2.22 (hell) und 3.09 (dunkel). Da die Datei ohnehin angefasst
wird, ist es hier mitkorrigiert.
Die Stufung bleibt sichtbar: ink -> ink-2 -> muted -> faint, jede Stufe
heller als die vorige, alle ueber 4.5:1 auch auf der getoenten Flaeche.
-------------------------------------------------------------------------- */
/* ---------- Reset / Basis ---------- */
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{font-family:var(--sans); background:var(--bg); color:var(--ink); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{line-height:1.25;}
a{color:var(--accent); text-decoration:none;}
a:hover{text-decoration:underline;}
.cui-mono{font-family:var(--mono); font-variant-numeric:tabular-nums;}
.cui-muted{color:var(--muted);}
[hidden]{display:none !important;}
/* ---------- App-Layout: Sidebar + Main ---------- */
.cui-app{display:grid; grid-template-columns:240px 1fr; min-height:100vh;}
.cui-side{background:var(--nav-bg); color:var(--nav-ink); border-right:1px solid var(--nav-line); display:flex; flex-direction:column; position:sticky; top:0; height:100vh;}
.cui-brand{padding:22px 22px 20px; border-bottom:1px solid var(--nav-line); display:flex; flex-direction:column; gap:18px;}
.cui-brand .cui-lbl{font-size:10px; text-transform:uppercase; letter-spacing:.15em; color:rgba(255,255,255,.64); font-weight:700; margin-bottom:-2px;}
.cui-brand img{height:30px; width:auto; max-width:186px; display:block; object-fit:contain;}
.cui-brand img.cui-telag{height:42px;}
.cui-brand .cui-divider{display:none;}
/* Ellio steht ueber Telag. Bewusst per order und nicht im Markup: die elf
Tools tragen dieselbe Reihenfolge im HTML, und eine CSS-Regel hier spart
elf Repo-Aenderungen. Wer das Markup spaeter aufraeumt, kann diese vier
Zeilen ersatzlos loeschen. */
.cui-brand .cui-lbl{order:0;}
.cui-brand img{order:1;}
.cui-brand .cui-divider{order:2;}
.cui-brand img.cui-telag{order:3;}
.cui-nav{padding:12px; overflow-y:auto; flex:1;}
.cui-nav .cui-sec{font-size:10px; text-transform:uppercase; letter-spacing:.11em; color:rgba(255,255,255,.60); padding:6px 12px 8px; font-weight:700;}
.cui-nav a{display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:var(--r-sm); color:var(--nav-ink); font-weight:500; font-size:13.5px; margin-bottom:2px; transition:background var(--dur) var(--ease); position:relative; cursor:pointer;}
.cui-nav a:hover{background:var(--nav-hover); color:#fff; text-decoration:none;}
.cui-nav a.active{background:var(--nav-active); color:var(--nav-ink-active); font-weight:600;}
.cui-nav a.active::before{content:""; position:absolute; left:-12px; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:var(--cyan);}
.cui-nav a svg{width:17px; height:17px; stroke:currentColor; stroke-width:1.7; fill:none; flex:none; opacity:.85;}
.cui-nav a.active svg{opacity:1; color:var(--cyan);}
.cui-switcher{display:flex; align-items:center; gap:10px; padding:10px 11px; border-radius:var(--r-sm); background:rgba(255,255,255,.05); color:#fff; font-weight:600; font-size:13px; cursor:pointer; border:1px solid var(--nav-line); margin-bottom:10px;}
.cui-switcher svg{width:16px; height:16px; stroke:currentColor; stroke-width:1.8; fill:none;}
.cui-switcher .cui-chev{margin-left:auto; opacity:.6;}
.cui-side .cui-foot{padding:14px 18px; border-top:1px solid var(--nav-line); font-size:11px; color:rgba(255,255,255,.64);}
.cui-main{display:flex; flex-direction:column; min-width:0;}
/* ---------- Topbar ---------- */
.cui-topbar{display:flex; align-items:center; gap:14px; padding:12px 26px; border-bottom:1px solid var(--border); background:color-mix(in srgb, var(--surface) 88%, transparent); position:sticky; top:0; z-index:20; backdrop-filter:saturate(1.2) blur(6px);}
.cui-crumb{font-size:13px; color:var(--muted);}
.cui-crumb b{color:var(--ink); font-weight:600;}
.cui-spacer{flex:1;}
.cui-search{position:relative;}
.cui-search input{width:220px; padding:8px 11px 8px 32px; border-radius:var(--r-sm); border:1px solid var(--border); background:var(--surface-2); color:var(--ink); font-size:13px; font-family:inherit;}
.cui-search svg{position:absolute; left:9px; top:8px; width:16px; height:16px; stroke:var(--muted); stroke-width:1.8; fill:none;}
.cui-content{padding:26px 32px; max-width:1280px; width:100%; margin:0 auto;}
.cui-page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:22px;}
.cui-page-head h1{font-size:23px; font-weight:800; letter-spacing:-.02em;}
.cui-page-head p{color:var(--muted); font-size:14px; margin-top:3px;}
/* ---------- Buttons ---------- */
.cui-btn{display:inline-flex; align-items:center; gap:7px; font-family:inherit; font-size:13.5px; font-weight:600; padding:9px 15px; border-radius:var(--r-sm); border:1px solid transparent; cursor:pointer; transition:all var(--dur) var(--ease); white-space:nowrap; text-decoration:none;}
.cui-btn:hover{text-decoration:none;}
.cui-btn svg{width:16px; height:16px; stroke:currentColor; stroke-width:1.9; fill:none;}
.cui-btn-primary{background:var(--accent); color:var(--on-accent); box-shadow:var(--shadow-sm);}
.cui-btn-primary:hover{background:var(--accent-dark);}
.cui-btn-secondary{background:var(--surface); color:var(--ink); border-color:var(--border); box-shadow:var(--shadow-xs);}
.cui-btn-secondary:hover{background:var(--hover);}
.cui-btn-ghost{background:transparent; color:var(--ink-2);}
.cui-btn-ghost:hover{background:var(--hover); color:var(--ink);}
.cui-btn-danger{background:transparent; color:var(--bad); border-color:color-mix(in srgb, var(--bad) 35%, transparent);}
.cui-btn-danger:hover{background:var(--bad-bg);}
.cui-btn-sm{padding:6px 11px; font-size:12.5px;}
.cui-btn-mini{padding:5px 10px; font-size:12px; background:var(--surface-2); color:var(--ink-2); border:1px solid var(--border); border-radius:var(--r-xs); font-weight:600; cursor:pointer;}
.cui-btn:disabled{opacity:.5; cursor:not-allowed;}
.cui-icon-btn{display:inline-grid; place-items:center; width:36px; height:36px; border-radius:var(--r-sm); border:1px solid var(--border); background:var(--surface); color:var(--ink-2); cursor:pointer; transition:all var(--dur) var(--ease);}
.cui-icon-btn:hover{background:var(--hover); color:var(--ink);}
.cui-icon-btn svg{width:18px; height:18px; stroke:currentColor; stroke-width:1.8; fill:none;}
/* ---------- Cards ---------- */
.cui-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);}
.cui-card-h{padding:16px 22px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:12px;}
.cui-card-h h2{font-size:15px; font-weight:700;}
.cui-card-b{padding:22px;}
.cui-card-pad{padding:22px;}
.cui-section{margin-bottom:22px;}
.cui-section > h2{font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); font-weight:700; margin-bottom:12px;}
/* ---------- KPI-Stat ---------- */
.cui-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.cui-stat{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow);}
.cui-stat .cui-lbl2{font-size:12px; color:var(--muted); font-weight:500;}
.cui-stat .cui-val{font-size:27px; font-weight:800; letter-spacing:-.02em; margin-top:6px; font-variant-numeric:tabular-nums;}
/* ---------- Badges ---------- */
.cui-badge{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:3px 9px; border-radius:var(--r-pill); line-height:1.4;}
.cui-badge .cui-dot{width:6px; height:6px; border-radius:50%; background:currentColor;}
.cui-badge-ok{background:var(--ok-bg); color:var(--ok-ink);}
.cui-badge-warn{background:var(--warn-bg); color:var(--warn-ink);}
.cui-badge-bad{background:var(--bad-bg); color:var(--bad-ink);}
.cui-badge-info{background:var(--info-bg); color:var(--info-ink);}
.cui-badge-neutral{background:var(--neutral-bg); color:var(--muted);}
.cui-badge-accent{background:var(--accent-soft); color:var(--accent-dark);}
:root[data-theme="dark"] .cui-badge-accent{color:var(--accent);}
/* ---------- Formular ---------- */
.cui-form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px 20px;}
.cui-fld{display:flex; flex-direction:column; gap:6px;}
.cui-fld.cui-span2{grid-column:1 / -1;}
.cui-fld label{font-size:12.5px; font-weight:600; color:var(--ink-2);}
.cui-fld label .cui-hint{color:var(--faint); font-weight:400;}
.cui-input,.cui-select,.cui-textarea{width:100%; padding:9px 11px; border-radius:var(--r-sm); border:1px solid var(--border); background:var(--surface-2); color:var(--ink); font-size:13.5px; font-family:inherit; transition:border var(--dur) var(--ease), box-shadow var(--dur) var(--ease);}
.cui-textarea{resize:vertical; min-height:120px; line-height:1.5;}
/* Ring direkt aus der Akzentfarbe: --accent-soft ist jetzt warmes Grau und
waere als Ring auf weissem Grund unsichtbar. */
.cui-input:focus,.cui-select:focus,.cui-textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent);}
.cui-form-actions{display:flex; align-items:center; gap:12px; margin-top:20px; padding-top:18px; border-top:1px solid var(--line);}
.cui-status-text{font-size:12.5px; color:var(--faint);}
/* Chips (Mehrfachauswahl) */
.cui-chips{display:flex; flex-wrap:wrap; gap:8px;}
.cui-chip{display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:var(--r-pill); font-size:12.5px; font-weight:600; border:1px solid var(--border); background:var(--surface-2); color:var(--ink-2); cursor:pointer; user-select:none;}
.cui-chip.on{background:var(--accent-soft); border-color:color-mix(in srgb, var(--accent) 40%, transparent); color:var(--accent-dark);}
:root[data-theme="dark"] .cui-chip.on{color:var(--accent);}
.cui-chip svg{width:13px; height:13px; stroke:currentColor; stroke-width:2.4; fill:none;}
/* Toggle-Switch */
.cui-switch{position:relative; display:inline-block; width:42px; height:24px;}
.cui-switch input{opacity:0; width:0; height:0;}
.cui-switch .cui-track{position:absolute; inset:0; background:var(--border); border-radius:var(--r-pill); transition:background var(--dur) var(--ease); cursor:pointer;}
.cui-switch .cui-track::before{content:""; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform var(--dur) var(--ease); box-shadow:var(--shadow-sm);}
.cui-switch input:checked + .cui-track{background:var(--accent);}
.cui-switch input:checked + .cui-track::before{transform:translateX(18px);}
/* ---------- Tabs ---------- */
.cui-tabs{display:flex; gap:2px; border-bottom:1px solid var(--border); margin-bottom:18px;}
.cui-tab{padding:9px 14px; font-size:13.5px; font-weight:600; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:color var(--dur) var(--ease);}
.cui-tab:hover{color:var(--ink);}
.cui-tab.active{color:var(--accent); border-bottom-color:var(--accent);}
/* ---------- Tabelle ---------- */
.cui-table-wrap{overflow-x:auto;}
.cui-table{width:100%; border-collapse:collapse; font-size:13.5px;}
.cui-table thead th{text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; padding:11px 22px; background:var(--surface-2); border-bottom:1px solid var(--border);}
.cui-table tbody td{padding:12px 22px; border-bottom:1px solid var(--line);}
.cui-table tbody tr:last-child td{border-bottom:none;}
.cui-table tbody tr{transition:background var(--dur) var(--ease);}
.cui-table tbody tr:hover{background:var(--hover);}
.cui-table tr.tint-ok{background:color-mix(in srgb, var(--ok) 7%, transparent);}
.cui-table tr.tint-warn{background:color-mix(in srgb, var(--warn) 9%, transparent);}
.cui-table tr.tint-bad{background:color-mix(in srgb, var(--bad) 8%, transparent);}
.cui-table td.cui-acts{text-align:right; white-space:nowrap;}
.cui-ic{display:inline-grid; place-items:center; width:30px; height:30px; border-radius:var(--r-xs); border:1px solid transparent; color:var(--muted); cursor:pointer;}
.cui-ic:hover{background:var(--hover); color:var(--ink);}
.cui-ic.del:hover{color:var(--bad); background:var(--bad-bg);}
.cui-ic svg{width:16px; height:16px; stroke:currentColor; stroke-width:1.8; fill:none;}
/* ---------- Skeleton ---------- */
.cui-skel{background:linear-gradient(90deg, var(--line) 25%, var(--surface-3) 50%, var(--line) 75%); background-size:200% 100%; animation:cui-sh 1.3s infinite; border-radius:var(--r-xs); height:12px;}
@keyframes cui-sh{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
@media (prefers-reduced-motion: reduce){ .cui-skel{animation:none;} }
/* ---------- Modal + Toast ---------- */
.cui-overlay{position:fixed; inset:0; background:rgba(10,14,20,.5); display:none; place-items:center; z-index:50; backdrop-filter:blur(2px);}
.cui-overlay.open{display:grid;}
.cui-modal{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); width:min(440px,92vw); padding:24px;}
.cui-modal h2,.cui-modal h3{font-size:17px; font-weight:700; margin-bottom:8px;}
.cui-modal p{color:var(--muted); font-size:14px; margin-bottom:20px;}
.cui-modal .cui-row{display:flex; justify-content:flex-end; gap:10px;}
.cui-toast-wrap{position:fixed; right:22px; bottom:22px; display:flex; flex-direction:column; gap:10px; z-index:60;}
.cui-toast{display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--ok); border-radius:var(--r-sm); box-shadow:var(--shadow-lg); padding:12px 16px; font-size:13.5px; font-weight:500; min-width:260px; animation:cui-slidein var(--dur) var(--ease);}
.cui-toast.err{border-left-color:var(--bad);}
.cui-toast svg{width:18px; height:18px; stroke:var(--ok); stroke-width:2; fill:none; flex:none;}
@keyframes cui-slidein{from{transform:translateY(8px); opacity:0;}to{transform:none; opacity:1;}}
/* ---------- Utilities ---------- */
.cui-stack{display:flex; flex-wrap:wrap; gap:10px; align-items:center;}
.cui-cols-2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.cui-note{font-size:12.5px; color:var(--faint);}
@media (max-width:900px){
.cui-app{grid-template-columns:1fr;}
.cui-side{display:none;}
.cui-stats{grid-template-columns:1fr 1fr;}
.cui-cols-2,.cui-form-grid{grid-template-columns:1fr;}
}
/* ---------- Textstellen aus dem Markup der Tools -----------------------------
Sie stehen eigentlich im HTML der elf Repos. Sie hier per CSS zu loesen
spart elf Repo-Aenderungen und elf Deploys --- dieselbe Ueberlegung wie bei
der Logo-Reihenfolge in .cui-brand. Wer das Markup spaeter aufraeumt, kann
die Bloecke ersatzlos loeschen.
1) Fusszeile der Seitenleiste: steht in elf index.html noch als
"TELAG AG · Part of Capita plc".
-------------------------------------------------------------------------- */
.cui-side .cui-foot{ font-size:0; line-height:0; }
.cui-side .cui-foot::after{
content:"TELAG AG \00B7 Part of Ellio";
font-size:11px; line-height:1.5; display:block;
}
/* 2) Tools Portal: waagrechte Kopfleiste mit eigenem Markup (.tp-brand).
Ellio gehoert auch dort vor Telag. */
.tp-brand img{ order:1; }
.tp-brand .tp-div{ order:2; }
.tp-brand img.tp-telag{ order:3; }
/* 3) Kopf der Seitenleiste: steht in allen Tools als
Interne Web-Tools
ueber Ellio und Telag.
Hier wird daraus das Logo "AWS Apps" (Fassung fuer gruenen Grund).
Der Text bleibt fuer Screenreader im Markup; die URL ist relativ zu
dieser Datei, also je Umgebung der passende UI-Host. */
.cui-side .cui-brand .cui-lbl{
height:34px; margin:0 0 2px; font-size:0; letter-spacing:0; color:transparent;
background:url("logos/aws-apps/mit-text/aws-apps-quer-gruen.svg") no-repeat center / contain;
}