/* ========================================================================== IKS — Oberfläche, Richtung B (Papier) Umsetzung des Design-Handoffs vom 24.08.2026. Aufbau: 1 Schriften 2 Tokens 3 Grundgerüst (Rail, Kopfzeile, Inhalt) 4 Karten und Typografie 5 Buttons, Chips, Pillen 6 Tabellen 7 Formulare 8 Dashboard (KPI, Risikomatrix, Listen) 9 Detailansicht 10 Login Alle Klassen sind mit `iks-` präfixiert und alle Tokens mit `--iks-`. Solange das alte Bootstrap-Theme für die noch nicht umgestellten Screens geladen bleibt, verhindert das jede Kollision. Es gibt keine Regel auf nackten Elementselektoren ausserhalb von `.iks-app` und `.iks-login`. Markenabhängige Werte (--iks-brand, --iks-brand-soft, --iks-brand-line, --iks-brand-veil, --iks-ff, --iks-r, --iks-r-sm) setzt das Layout auf ; sie kommen aus Vokuro\Plugins\Ci\Brand. Die Vorgaben hier sind nur der Rückfall. ========================================================================== */ /* 1 Schriften ============================================================ */ @font-face { font-family: 'Instrument Sans'; src: url('/fonts/iks/InstrumentSans-var.woff2') format('woff2-variations'); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/iks/IBMPlexMono-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/iks/IBMPlexMono-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } /* 2 Tokens =============================================================== */ /* WICHTIG: Diese Vorgaben stehen auf :root, nicht auf .iks-app. Das Layout setzt die gespeicherten Markenwerte als Inline-Stil auf . Stuenden die Vorgaben hier auf .iks-app, gaebe es eine Deklaration direkt am Element — und die gewinnt in CSS immer gegen einen vom Elternelement geerbten Wert. Die Werte von waeren damit wirkungslos, und das Erscheinungsbild liesse sich nicht aendern. Genau das war der Fall. */ :root { /* Marke — wird von ueberschrieben */ --iks-brand: #27427f; --iks-brand-soft: rgba(39, 66, 127, .12); --iks-brand-line: rgba(39, 66, 127, .3); --iks-brand-veil: rgba(39, 66, 127, .3); --iks-brand-dark: #243a75; /* Fläche und Schrift — fix */ --iks-ink: #221f1a; --iks-muted: #7b756a; --iks-bg: #faf8f3; --iks-card: #fff; --iks-field: #fdfcf9; --iks-head: #f7f4ee; --iks-hover: #faf7f1; --iks-track: rgba(60, 45, 20, .07); --iks-line: rgba(70, 55, 25, .11); --iks-line-strong: rgba(70, 55, 25, .24); --iks-rail: #f2ede3; --iks-rail-line: rgba(70, 55, 25, .12); --iks-rail-ink: #2a251d; --iks-rail-ink-dim: rgba(42, 37, 29, .5); /* Status — bewusst nicht konfigurierbar, damit die Ampel lesbar bleibt */ --iks-ok: #1c6b45; --iks-ok-bg: rgba(28, 107, 69, .11); --iks-warn: #8a6218; --iks-warn-bg: rgba(138, 98, 24, .12); --iks-bad: #a13a2f; --iks-bad-bg: rgba(161, 58, 47, .11); --iks-ff: 'Instrument Sans', Helvetica, Arial, sans-serif; --iks-ff-head: 'Instrument Sans', Helvetica, Arial, sans-serif; --iks-ff-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --iks-r: 6px; --iks-r-sm: 4px; --iks-pad: 16px; } .iks-app *, .iks-login *, .iks-app *::before, .iks-login *::before, .iks-app *::after, .iks-login *::after { box-sizing: border-box; } .iks-app, .iks-login { font-family: var(--iks-ff); color: var(--iks-ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Sichtbarer Fokus für Tastaturbedienung. Im Handoff offen gelassen (Offener Punkt 4); ohne das ist die Oberfläche nicht bedienbar. */ .iks-app :focus-visible, .iks-login :focus-visible { outline: 2px solid var(--iks-brand); outline-offset: 2px; border-radius: 2px; } /* 3 Grundgerüst ========================================================== */ .iks-app { display: flex; min-height: 100vh; background: var(--iks-bg); } .iks-rail { width: 238px; flex: none; background: var(--iks-rail); border-right: 1px solid var(--iks-rail-line); display: flex; flex-direction: column; padding: 18px 12px 14px; } .iks-rail__brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 20px; } .iks-rail__mark { width: 30px; height: 30px; flex: none; border-radius: calc(var(--iks-r) - 3px); background: var(--iks-brand); display: flex; align-items: center; justify-content: center; font: 700 12px/1 var(--iks-ff); color: #fff; overflow: hidden; } .iks-rail__mark img { max-width: 100%; max-height: 100%; display: block; } /* Firmenlogo in der Navigationsspalte: volle Breite, feste Maximalhoehe. Ein Schriftzug ist breiter als hoch und waere in der quadratischen Markenkachel unkenntlich. */ .iks-rail__logo { display: block; max-width: 100%; max-height: 40px; width: auto; object-fit: contain; } .iks-rail__name { font: 600 13.5px/1.15 var(--iks-ff-head); color: var(--iks-rail-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .iks-rail__sub { font: 400 10px/1.4 var(--iks-ff-mono); color: var(--iks-rail-ink-dim); margin-top: 2px; } .iks-rail__group { padding-bottom: 14px; } .iks-rail__grouptitle { font: 500 9.5px/1 var(--iks-ff-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--iks-rail-ink-dim); padding: 0 8px 9px; } .iks-rail__items { display: flex; flex-direction: column; gap: 1px; } .iks-nav { display: flex; align-items: center; gap: 9px; text-align: left; border: 0; background: transparent; color: var(--iks-rail-ink-dim); font: 500 13px/1 var(--iks-ff); padding: 9px; border-radius: var(--iks-r-sm); cursor: pointer; text-decoration: none; width: 100%; } .iks-nav__dot { width: 6px; height: 6px; flex: none; border-radius: 2px; background: rgba(70, 55, 25, .16); } .iks-nav__label { flex: 1; } .iks-nav__badge { font: 500 10px/1 var(--iks-ff-mono); color: var(--iks-rail-ink-dim); } .iks-nav:hover { background: rgba(70, 55, 25, .05); color: var(--iks-rail-ink); } .iks-nav.is-active { background: var(--iks-brand-soft); color: var(--iks-brand); } .iks-nav.is-active .iks-nav__dot { background: var(--iks-brand); } .iks-rail__spacer { flex: 1; } .iks-rail__user { border-top: 1px solid var(--iks-rail-line); padding: 13px 8px 3px; display: flex; align-items: center; gap: 10px; } .iks-rail__username { font: 500 12px/1.2 var(--iks-ff); color: var(--iks-rail-ink); } .iks-rail__role { font: 400 9.5px/1.3 var(--iks-ff-mono); color: var(--iks-rail-ink-dim); margin-top: 2px; } .iks-main { flex: 1; min-width: 0; background: var(--iks-bg); display: flex; flex-direction: column; } .iks-header { display: flex; align-items: center; gap: 16px; padding: 16px 30px; border-bottom: 1px solid var(--iks-line); background: var(--iks-card); } .iks-header__crumb { font: 400 10.5px/1 var(--iks-ff-mono); color: var(--iks-muted); letter-spacing: .06em; } .iks-header__title { font: 600 19px/1.25 var(--iks-ff-head); letter-spacing: -.015em; margin: 6px 0 0; } .iks-header__actions { display: flex; align-items: center; gap: 9px; } .iks-content { padding: 26px 30px 34px; flex: 1; } /* 4 Karten und Typografie ================================================ */ .iks-card { background: var(--iks-card); border: 1px solid var(--iks-line); border-radius: var(--iks-r); padding: 20px 22px; } .iks-card--flush { padding: 0; overflow: hidden; } .iks-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .iks-card__title { font: 600 15px/1 var(--iks-ff-head); margin: 0; } .iks-grid { display: grid; gap: 14px; } .iks-grid--4 { grid-template-columns: repeat(4, 1fr); } .iks-grid--2 { grid-template-columns: repeat(2, 1fr); } .iks-grid--split { grid-template-columns: 1.15fr 1fr; } .iks-grid--detail { grid-template-columns: 1.6fr 1fr; } .iks-section + .iks-section { margin-top: 20px; } .iks-mono { font-family: var(--iks-ff-mono); } .iks-label { font: 500 10px/1 var(--iks-ff-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--iks-muted); } .iks-meta { font: 400 11.5px/1 var(--iks-ff-mono); color: var(--iks-muted); } .iks-text { font: 400 13.5px/1.6 var(--iks-ff); color: var(--iks-muted); max-width: 60em; } .iks-muted { color: var(--iks-muted); } .iks-ok { color: var(--iks-ok); } .iks-warn { color: var(--iks-warn); } .iks-bad { color: var(--iks-bad); } /* 5 Buttons, Chips, Pillen =============================================== */ .iks-btn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid transparent; border-radius: var(--iks-r-sm); font: 600 13px/1 var(--iks-ff); padding: 10px 14px; cursor: pointer; text-decoration: none; white-space: nowrap; } .iks-btn--primary { background: var(--iks-brand); color: #fff; } .iks-btn--primary:hover { background: var(--iks-brand-dark); color: #fff; } .iks-btn--secondary { background: transparent; border-color: var(--iks-line-strong); color: var(--iks-ink); } .iks-btn--secondary:hover { background: var(--iks-hover); color: var(--iks-ink); } .iks-btn--block { width: 100%; justify-content: center; padding: 14px; font-size: 14px; } .iks-btn--mono { font: 500 11px/1 var(--iks-ff-mono); padding: 7px 10px; border-radius: 6px; border-color: var(--iks-line); background: transparent; color: var(--iks-muted); } .iks-btn--mono.is-active { background: var(--iks-brand-soft); border-color: var(--iks-brand-line); color: var(--iks-brand); } .iks-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--iks-line); background: transparent; color: var(--iks-muted); font: 500 11px/1 var(--iks-ff); padding: 7px 11px; border-radius: var(--iks-r-sm); cursor: pointer; text-decoration: none; } .iks-chip.is-active { background: var(--iks-brand-soft); border-color: var(--iks-brand-line); color: var(--iks-brand); } .iks-chip--flat { background: var(--iks-track); border-color: transparent; font: 500 10.5px/1 var(--iks-ff); border-radius: 5px; padding: 5px 8px; cursor: default; } .iks-pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; font: 500 11px/1 var(--iks-ff); padding: 6px 11px; white-space: nowrap; } .iks-pill--ok { background: var(--iks-ok-bg); color: var(--iks-ok); } .iks-pill--warn { background: var(--iks-warn-bg); color: var(--iks-warn); } .iks-pill--bad { background: var(--iks-bad-bg); color: var(--iks-bad); } .iks-pill--brand { background: var(--iks-brand-soft); color: var(--iks-brand); } .iks-dot { width: 8px; height: 8px; flex: none; border-radius: 999px; display: inline-block; } .iks-dot--ok { background: var(--iks-ok); } .iks-dot--warn { background: var(--iks-warn); } .iks-dot--bad { background: var(--iks-bad); } .iks-avatar { width: 26px; height: 26px; flex: none; border-radius: 999px; background: var(--iks-brand-soft); color: var(--iks-brand); display: inline-flex; align-items: center; justify-content: center; font: 600 10.5px/1 var(--iks-ff); } .iks-avatar--sm { width: 20px; height: 20px; font-size: 9px; } .iks-avatar--lg { width: 27px; height: 27px; } /* 6 Tabellen ============================================================= */ .iks-table { width: 100%; border-collapse: collapse; } .iks-table thead th { background: var(--iks-head); font: 500 10px/1 var(--iks-ff-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--iks-muted); text-align: left; padding: 12px 18px; border-bottom: 1px solid var(--iks-line); white-space: nowrap; } .iks-table thead th.is-sortable { cursor: pointer; user-select: none; } .iks-table thead th.is-sortable:hover { color: var(--iks-ink); } .iks-table thead th.is-sortable::after { content: '\2195'; margin-left: 6px; opacity: .3; font-size: 10px; } .iks-table thead th[aria-sort="ascending"]::after { content: '\2191'; opacity: 1; color: var(--iks-brand); } .iks-table thead th[aria-sort="descending"]::after { content: '\2193'; opacity: 1; color: var(--iks-brand); } .iks-table tbody td { padding: var(--iks-pad) 18px; border-bottom: 1px solid var(--iks-line); font: 400 13.5px/1.35 var(--iks-ff); vertical-align: middle; } .iks-table tbody tr:last-child td { border-bottom: 0; } .iks-table tbody tr.is-clickable { cursor: pointer; } .iks-table tbody tr.is-clickable:hover { background: var(--iks-hover); } .iks-table td.iks-td-mono, .iks-table th.iks-td-mono { font-family: var(--iks-ff-mono); font-size: 12.5px; color: var(--iks-muted); } .iks-table td.iks-td-strong { font-weight: 500; color: var(--iks-ink); } .iks-table .iks-cell-person { display: flex; align-items: center; gap: 8px; } .iks-filterbar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; } .iks-filterbar__count { margin-left: auto; font: 400 11.5px/1 var(--iks-ff-mono); color: var(--iks-muted); } /* 7 Formulare ============================================================ */ .iks-field { display: block; margin-bottom: 14px; } .iks-field__label { display: block; font: 500 11.5px/1 var(--iks-ff); color: var(--iks-muted); margin-bottom: 7px; } .iks-input, .iks-select, .iks-textarea { width: 100%; background: var(--iks-field); border: 1px solid var(--iks-line); border-radius: var(--iks-r-sm); padding: 11px 12px; font: 400 13.5px/1.35 var(--iks-ff); color: var(--iks-ink); } .iks-input::placeholder, .iks-textarea::placeholder { color: var(--iks-muted); } .iks-input:focus, .iks-select:focus, .iks-textarea:focus { border-color: var(--iks-brand-line); } .iks-textarea { resize: vertical; min-height: 96px; } /* Mehrfachauswahl, etwa die Benutzerrollen in users/edit und users/account. Ohne Mindesthoehe zeigt ein multiple-Select nur eine Zeile und wirkt wie ein defektes Eingabefeld. */ .iks-select[multiple] { min-height: 118px; padding: 6px; } .iks-select[multiple] option { padding: 6px 8px; border-radius: var(--iks-r-sm); } .iks-select[multiple] option:checked { background: var(--iks-brand-soft) linear-gradient(0deg, var(--iks-brand-soft), var(--iks-brand-soft)); color: var(--iks-brand); font-weight: 500; } /* Optionsreihen in den Kontrollformularen: Radio- und Auswahlfelder als Pillen, wie im Entwurf. Das eigentliche Feld bleibt bedienbar und fokussierbar — es wird nicht versteckt, sondern nur klein gehalten, damit Tastatur und Screenreader weiter funktionieren. */ .iks-optionrow { display: flex; flex-wrap: wrap; gap: 8px; } .iks-option { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--iks-line); border-radius: var(--iks-r-sm); padding: 8px 12px; font: 500 12.5px/1 var(--iks-ff); color: var(--iks-muted); cursor: pointer; background: transparent; } .iks-option:hover { background: var(--iks-hover); } .iks-option input { accent-color: var(--iks-brand); width: 14px; height: 14px; margin: 0; } .iks-option:focus-within { border-color: var(--iks-brand-line); } /* :has() traegt die Hervorhebung ohne JavaScript. Browser ohne Unterstuetzung zeigen weiterhin das angekreuzte Feld — die Information geht nicht verloren. */ .iks-option:has(input:checked) { background: var(--iks-brand-soft); border-color: var(--iks-brand-line); color: var(--iks-brand); } .iks-check { display: inline-flex; align-items: center; gap: 8px; font: 400 13px/1 var(--iks-ff); color: var(--iks-muted); cursor: pointer; } .iks-check input { accent-color: var(--iks-brand); width: 15px; height: 15px; } .iks-search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--iks-line); border-radius: var(--iks-r-sm); padding: 0 12px; width: 230px; background: var(--iks-field); } .iks-search input { border: 0; background: transparent; padding: 9px 0; font: 400 12.5px/1 var(--iks-ff); color: var(--iks-ink); width: 100%; } .iks-search input:focus { outline: none; } /* Meldungen — ersetzt die Bootstrap-Alerts auf umgestellten Screens */ .iks-flash { border-radius: var(--iks-r-sm); padding: 11px 14px; font: 400 13px/1.5 var(--iks-ff); margin-bottom: 14px; border: 1px solid transparent; } .iks-flash--ok { background: var(--iks-ok-bg); color: var(--iks-ok); } /* Flash\Direct erzeugt Bootstrap-Klassen. Damit die Meldungen im neuen Gestell nicht nackt erscheinen, bekommen sie hier dasselbe Aussehen. */ .iks-flashzone .alert { border-radius: var(--iks-r-sm); padding: 11px 14px; font: 400 13px/1.5 var(--iks-ff); margin-bottom: 14px; border: 1px solid transparent; } .iks-flashzone .alert-success { background: var(--iks-ok-bg); color: var(--iks-ok); } .iks-flashzone .alert-danger { background: var(--iks-bad-bg); color: var(--iks-bad); } .iks-flashzone .alert-warning { background: var(--iks-warn-bg); color: var(--iks-warn); } .iks-flashzone .alert-info { background: var(--iks-brand-soft); color: var(--iks-brand); } .iks-flash--warn { background: var(--iks-warn-bg); color: var(--iks-warn); } .iks-flash--bad { background: var(--iks-bad-bg); color: var(--iks-bad); } /* 8 Dashboard ============================================================ */ .iks-kpi__value { font: 600 32px/1 var(--iks-ff-head); letter-spacing: -.03em; margin: 8px 0 0; display: flex; align-items: baseline; gap: 7px; } .iks-kpi__unit { font: 400 11.5px/1 var(--iks-ff); color: var(--iks-muted); letter-spacing: 0; } .iks-kpi__track { height: 4px; border-radius: 999px; background: var(--iks-track); margin: 14px 0 10px; overflow: hidden; } .iks-kpi__bar { height: 100%; border-radius: 999px; background: var(--iks-brand); } .iks-kpi__bar--warn { background: var(--iks-warn); } .iks-kpi__bar--bad { background: var(--iks-bad); } .iks-kpi__bar--ok { background: var(--iks-ok); } .iks-kpi__note { font: 400 11.5px/1.4 var(--iks-ff); color: var(--iks-muted); margin: 0; } .iks-matrix { display: grid; grid-template-columns: 64px repeat(4, 1fr); gap: 5px; } .iks-matrix__axis { font: 500 9.5px/1 var(--iks-ff-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--iks-muted); display: flex; align-items: center; } .iks-matrix__axis--y { justify-content: flex-end; padding-right: 8px; text-align: right; } .iks-matrix__cell { height: 62px; border-radius: calc(var(--iks-r-sm) - 2px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; } .iks-matrix__count { font: 600 17px/1 var(--iks-ff-head); } .iks-matrix__state { font: 400 9.5px/1 var(--iks-ff-mono); opacity: .65; } /* Fixe Risikoskala: Index = Eintrittswahrscheinlichkeit + Schadenausmass */ .iks-lv0 { background: #eaefe9; color: #41544a; } .iks-lv1 { background: #eff0e2; color: #4d5236; } .iks-lv2 { background: #f7eedb; color: #6c5a2a; } .iks-lv3 { background: #f8e3d0; color: #7d4f26; } .iks-lv4 { background: #f4d3cd; color: #8c3a2e; } .iks-list__row { display: flex; align-items: center; gap: 11px; padding: 12px 0; border-bottom: 1px solid var(--iks-line); text-decoration: none; color: inherit; } .iks-list__row:last-child { border-bottom: 0; } .iks-list__row:hover { background: var(--iks-hover); } .iks-list__name { font: 500 13px/1.3 var(--iks-ff); color: var(--iks-ink); } .iks-list__meta { font: 400 11px/1.4 var(--iks-ff-mono); color: var(--iks-muted); margin-top: 3px; } .iks-list__due { margin-left: auto; font: 400 11.5px/1 var(--iks-ff-mono); color: var(--iks-muted); white-space: nowrap; } /* 9 Detailansicht ======================================================== */ .iks-detail__head { display: flex; align-items: flex-start; gap: 16px; } .iks-detail__title { font: 600 24px/1.25 var(--iks-ff-head); letter-spacing: -.02em; margin: 10px 0 8px; } .iks-tabs { display: flex; gap: 22px; margin-top: 18px; border-top: 1px solid var(--iks-line); padding-top: 14px; } .iks-tab { font: 500 12.5px/1 var(--iks-ff); color: var(--iks-muted); text-decoration: none; padding-bottom: 11px; border-bottom: 2px solid transparent; } .iks-tab.is-active { color: var(--iks-ink); border-bottom-color: var(--iks-brand); } .iks-pair { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--iks-line); } .iks-pair:last-child { border-bottom: 0; } .iks-pair__label { font: 400 12.5px/1.35 var(--iks-ff); color: var(--iks-muted); } .iks-pair__value { font: 500 12.5px/1.35 var(--iks-ff); text-align: right; } .iks-dropzone { border: 1px dashed var(--iks-line-strong); border-radius: var(--iks-r-sm); padding: 18px; text-align: center; font: 400 11.5px/1.5 var(--iks-ff); color: var(--iks-muted); } .iks-file { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--iks-line); } .iks-file__ext { font: 500 9.5px/1 var(--iks-ff-mono); text-transform: uppercase; background: var(--iks-brand-soft); color: var(--iks-brand); padding: 5px 6px; border-radius: 4px; } /* Randlose Screens: Das Hyper-Theme legt Abstaende und eine Mindesthoehe auf body und #wrapper. Login und Passwort-vergessen sollen aber von Kante zu Kante laufen, deshalb werden diese Regeln hier gezielt zurueckgenommen. */ body.iks-bare { margin: 0; padding: 0; background: var(--iks-card, #fff); } body.iks-bare #wrapper { margin: 0; padding: 0; min-height: 100vh; display: block; overflow: visible; } body.iks-bare .content-page, body.iks-bare .navbar-custom, body.iks-bare .footer { display: none; } /* 10 Login =============================================================== */ .iks-login { display: flex; min-height: 100vh; background: var(--iks-card); } .iks-login__panel { position: relative; width: 46%; flex: none; overflow: hidden; background: #0e1216; } .iks-login__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.1s ease-in-out; } /* Das erste Bild ist immer sichtbar — unabhaengig davon, ob serverseitig eine Klasse gesetzt wurde. Faellt JavaScript aus oder greift die Klasse nicht, steht damit trotzdem ein Bild. Das war der Fehler: die Sichtbarkeit hing allein an einer Klasse aus der Schleife. */ .iks-login__image:first-of-type, .iks-login__image.is-visible { opacity: 1; } /* Sobald das Skript uebernimmt, entscheidet allein die Klasse. */ .iks-login__panel.is-cycling .iks-login__image:first-of-type { opacity: 0; } .iks-login__panel.is-cycling .iks-login__image.is-visible { opacity: 1; } /* Wer Bewegung reduziert haben moechte, bekommt keinen Wechsel. */ @media (prefers-reduced-motion: reduce) { .iks-login__image { transition: none; } } /* Band beim Arbeiten in fremder Ansicht. Muss auffallen — deshalb volle Breite, Fehlerfarbe und ein Knopf zurueck. */ .iks-impersonate { display: flex; align-items: center; gap: 14px; padding: 10px 30px; background: var(--iks-bad-bg); border-bottom: 1px solid var(--iks-line); font: 500 12.5px/1.4 var(--iks-ff); color: var(--iks-bad); } .iks-impersonate__label { font-family: var(--iks-ff-mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; } .iks-login__scrim { position: absolute; inset: 0; background: linear-gradient(155deg, rgba(10, 13, 16, .82) 0%, rgba(10, 13, 16, .62) 45%, rgba(10, 13, 16, .88) 100%); } .iks-login__veil { position: absolute; inset: 0; background: var(--iks-brand-veil); mix-blend-mode: multiply; } .iks-login__panelinner { position: relative; height: 100%; padding: 56px 54px; display: flex; flex-direction: column; pointer-events: none; } .iks-login__logo { max-height: 34px; max-width: 190px; } .iks-login__claim { margin: auto 0; } .iks-login__claimtitle { font: 600 40px/1.14 var(--iks-ff-head); letter-spacing: -.025em; color: #fff; text-shadow: 0 1px 24px rgba(0, 0, 0, .45); margin: 0 0 16px; } .iks-login__claimtext { font: 400 14px/1.6 var(--iks-ff); color: rgba(255, 255, 255, .8); text-shadow: 0 1px 16px rgba(0, 0, 0, .5); margin: 0; max-width: 34em; } .iks-login__facts { display: flex; flex-wrap: wrap; gap: 18px; font: 400 11px/1 var(--iks-ff-mono); color: rgba(255, 255, 255, .62); } .iks-login__form { flex: 1; display: flex; align-items: center; justify-content: center; padding: 56px; } .iks-login__box { width: 376px; max-width: 100%; } .iks-login__title { font: 600 26px/1.2 var(--iks-ff-head); letter-spacing: -.02em; margin: 0 0 8px; } .iks-login__subtitle { font: 400 13.5px/1.6 var(--iks-ff); color: var(--iks-muted); margin: 0 0 26px; } .iks-login__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 18px; } .iks-login__link { font: 500 13px/1 var(--iks-ff); color: var(--iks-brand); text-decoration: none; } .iks-login__langs { display: flex; gap: 8px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--iks-line); } /* Arbeitsbreite ist 1440 px fix (Handoff, Offener Punkt 1: responsives Verhalten ist nicht entworfen, Einsatz laut Auftraggeber nur Desktop). Der eine Umbruch hier verhindert lediglich, dass der Login auf schmalen Fenstern unbenutzbar wird. */ @media (max-width: 900px) { .iks-login { flex-direction: column; } .iks-login__panel { width: 100%; min-height: 220px; } .iks-login__form { padding: 32px 22px; } } @media print { .iks-rail, .iks-header__actions { display: none; } .iks-app { display: block; } .iks-card { border-color: #ddd; } }