/* * ms.css – gemeinsame Design-Basis für alle Momentesammler-Tools. * * Dies ist die Design-Sprache des gesamten Ökosystems: Portal, Login und * (nach und nach) alle weiteren Tools. Neue Tools binden entweder diese * Datei direkt ein (verlinkt vom Portal unter /_portal/ms.css) oder * kopieren sie als Startpunkt. Bewusst generisch gehalten, keine * Portal-spezifischen Annahmen in den Komponentenklassen. * * Aufbau dieser Datei: * 1. @font-face (selbst gehostet, siehe public/fonts/) * 2. Design-Tokens (hell/dunkel) als CSS-Variablen auf :root * 3. Reset & Basiselemente * 4. Layout-Bausteine (Container, Topbar, Dropdowns) * 5. Komponenten (Karten, KPIs, Kacheln, Formulare, Buttons, Tabellen, …) * 6. Seiten-spezifische Bausteine (Login, Lesemodus für Rechtstexte) * 7. Responsive Anpassungen & prefers-reduced-motion */ /* ========================================================================== 1. Schriften (selbst gehostet, CSP erlaubt keine externen Fonts) ========================================================================== */ @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/playfair-display-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/inter-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/inter-latin-500-normal.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/inter-latin-600-normal.woff2') format('woff2'); } /* ========================================================================== 2. Design-Tokens ========================================================================== */ :root { /* -- Schrift ------------------------------------------------------- */ --ms-font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --ms-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif; /* -- Radius / Abstände / Maße ---------------------------------------- */ --ms-radius-lg: 12px; --ms-radius: 8px; --ms-radius-pill: 999px; --ms-space-1: 4px; --ms-space-2: 8px; --ms-space-3: 12px; --ms-space-4: 16px; --ms-space-6: 24px; --ms-space-8: 32px; --ms-space-12: 48px; --ms-space-16: 64px; --ms-bar-height: 64px; --ms-container-max: 1320px; --ms-gutter: 16px; --ms-shadow-dropdown: 0 12px 32px rgba(0, 0, 0, 0.28); --ms-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04); --ms-transition-fast: 0.12s ease; --ms-transition: 0.18s ease; /* -- Farben: Helles Theme (Standard) ---------------------------------- */ --ms-bg: #f4f3ee; --ms-elevated: #ffffff; --ms-surface: #ffffff; --ms-surface-2: #f7f6f2; --ms-border: #dedcd4; --ms-border-strong: #c9c7bf; --ms-text: #1c1e1b; --ms-text-muted: #5f635c; --ms-text-subtle: #8b8f88; --ms-accent: #5f7050; --ms-accent-hover: #526144; --ms-on-accent: #ffffff; --ms-warn: #b8842f; --ms-danger: #a8392f; --ms-success: #4c7a49; --ms-focus-ring: rgba(95, 112, 80, 0.35); color-scheme: light; font-family: var(--ms-font-ui); } /* Dunkles Theme: automatisch nach Systemeinstellung ("automatisch" in den Kontoeinstellungen), außer der Benutzer hat explizit Hell gewählt (data-theme="light" auf , siehe views/layout.js). */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --ms-bg: #161816; --ms-elevated: #1c1f1c; --ms-surface: #202320; --ms-surface-2: #272b27; --ms-border: #2d312c; --ms-border-strong: #3b403a; --ms-text: #f1f0eb; --ms-text-muted: #9c9f98; --ms-text-subtle: #6f736c; --ms-accent: #6b7c5c; --ms-accent-hover: #7a8d69; --ms-on-accent: #ffffff; --ms-warn: #e0b04b; --ms-danger: #c75c52; --ms-success: #6f9d6a; --ms-focus-ring: rgba(107, 124, 92, 0.4); color-scheme: dark; } } /* Dunkles Theme: explizit vom Benutzer gewählt (data-theme="dark"). */ :root[data-theme='dark'] { --ms-bg: #161816; --ms-elevated: #1c1f1c; --ms-surface: #202320; --ms-surface-2: #272b27; --ms-border: #2d312c; --ms-border-strong: #3b403a; --ms-text: #f1f0eb; --ms-text-muted: #9c9f98; --ms-text-subtle: #6f736c; --ms-accent: #6b7c5c; --ms-accent-hover: #7a8d69; --ms-on-accent: #ffffff; --ms-warn: #e0b04b; --ms-danger: #c75c52; --ms-success: #6f9d6a; --ms-focus-ring: rgba(107, 124, 92, 0.4); color-scheme: dark; } /* ========================================================================== 3. Reset & Basiselemente ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--ms-bg); color: var(--ms-text); font-family: var(--ms-font-ui); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--ms-font-display); font-weight: 400; line-height: 1.15; margin: 0; color: var(--ms-text); } p { margin: 0 0 var(--ms-space-3); } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } button { font: inherit; color: inherit; } svg { display: block; } /* Sichtbarer, konsistenter Fokus-Ring überall (Tastaturbedienung). */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--ms-accent); outline-offset: 2px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } .ms-icon { width: 18px; height: 18px; flex-shrink: 0; } .text-muted, .ms-text-muted { color: var(--ms-text-muted); } .ms-text-subtle { color: var(--ms-text-subtle); } /* Kleine Abstands-/Breiten-Utilities (ersetzen Inline-Styles, die die CSP nicht erlaubt). */ .ms-mt-3 { margin-top: var(--ms-space-3); } .ms-mt-4 { margin-top: var(--ms-space-4); } .ms-mt-6 { margin-top: var(--ms-space-6); } .ms-card--narrow { max-width: 480px; } .ms-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ========================================================================== 4. Layout-Bausteine ========================================================================== */ .ms-container { max-width: var(--ms-container-max); margin: 0 auto; padding: var(--ms-space-8) var(--ms-gutter); width: 100%; } .ms-container--narrow { max-width: 640px; } .ms-container--reading { max-width: 720px; } /* Seiten, die die Bar einbinden, brauchen Platz oberhalb des Inhalts. */ body.has-topbar { padding-top: var(--ms-bar-height); } /* -- Topbar ------------------------------------------------------------ */ .ms-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--ms-bar-height); background: var(--ms-elevated); border-bottom: 1px solid var(--ms-border); display: flex; align-items: center; justify-content: space-between; gap: var(--ms-space-4); padding: 0 var(--ms-space-6); } .ms-topbar__left, .ms-topbar__right { display: flex; align-items: center; gap: var(--ms-space-4); min-width: 0; } .ms-topbar__brand { display: flex; align-items: center; gap: var(--ms-space-2); color: var(--ms-text); flex-shrink: 0; } .ms-topbar__logo { width: 24px; height: 24px; color: var(--ms-text); flex-shrink: 0; } .ms-topbar__wordmark { font-family: var(--ms-font-ui); font-weight: 500; font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase; white-space: nowrap; } .ms-topbar__divider { width: 1px; height: 24px; background: var(--ms-border); flex-shrink: 0; } .ms-topbar__page { font-size: 14px; font-weight: 500; color: var(--ms-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* -- Übersicht-Button + User-Chip (öffnen Dropdowns) -------------------- */ .ms-topbar__btn { display: inline-flex; align-items: center; gap: var(--ms-space-2); background: transparent; border: 1px solid var(--ms-border); border-radius: var(--ms-radius); padding: 8px 12px; cursor: pointer; font-size: 13.5px; font-weight: 500; color: var(--ms-text); transition: border-color var(--ms-transition-fast), background var(--ms-transition-fast); } .ms-topbar__btn:hover, .ms-topbar__btn[aria-expanded='true'] { border-color: var(--ms-border-strong); background: var(--ms-surface-2); } .ms-topbar__btn .ms-icon { width: 16px; height: 16px; } .ms-topbar__chevron { width: 14px; height: 14px; transition: transform var(--ms-transition-fast); } .ms-topbar__btn[aria-expanded='true'] .ms-topbar__chevron { transform: rotate(180deg); } .ms-avatar { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--ms-border-strong); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: var(--ms-text); flex-shrink: 0; } .ms-topbar__user-name { white-space: nowrap; } /* -- Dropdown-Menüs ------------------------------------------------------ */ .ms-dropdown-wrap { position: relative; } .ms-dropdown { position: absolute; top: calc(100% + 8px); right: 0; min-width: 240px; background: var(--ms-elevated); border: 1px solid var(--ms-border); border-radius: var(--ms-radius); box-shadow: var(--ms-shadow-dropdown); padding: var(--ms-space-2); display: none; flex-direction: column; gap: 2px; z-index: 200; } .ms-dropdown[data-open='true'] { display: flex; } .ms-dropdown__item { display: flex; align-items: center; gap: var(--ms-space-3); min-height: 40px; padding: 0 var(--ms-space-3); border-radius: 6px; font-size: 14px; color: var(--ms-text); background: transparent; border: none; text-align: left; width: 100%; cursor: pointer; } .ms-dropdown__item:hover, .ms-dropdown__item:focus-visible { background: var(--ms-surface-2); outline: none; } .ms-dropdown__item[aria-current='true'] { color: var(--ms-accent); font-weight: 600; } .ms-dropdown__item .ms-icon { color: var(--ms-text-muted); width: 17px; height: 17px; } .ms-dropdown__divider { height: 1px; background: var(--ms-border); margin: var(--ms-space-2) var(--ms-space-1); } .ms-dropdown__label { padding: var(--ms-space-2) var(--ms-space-3) var(--ms-space-1); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ms-text-subtle); } /* Schmale Bildschirme: Seitenlabel + Vorname ausblenden, Dropdowns werden volle Panels statt kleiner Popover. */ @media (max-width: 640px) { .ms-topbar { padding: 0 var(--ms-space-3); } [data-ms-hide-narrow] { display: none; } .ms-dropdown { position: fixed; top: calc(var(--ms-bar-height) + 8px); left: var(--ms-space-3); right: var(--ms-space-3); min-width: 0; } } /* ========================================================================== 5. Komponenten ========================================================================== */ /* -- Karten -------------------------------------------------------------- */ .ms-card { background: var(--ms-surface); border: 1px solid var(--ms-border); border-radius: var(--ms-radius-lg); padding: 26px; box-shadow: var(--ms-shadow-card); } .ms-card__title { font-family: var(--ms-font-display); font-size: 26px; font-weight: 400; margin: 0 0 2px; } .ms-card__subtitle { color: var(--ms-text-muted); font-size: 13.5px; margin: 0 0 var(--ms-space-4); } .ms-card__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ms-space-4); } @media (max-width: 860px) { .ms-card__grid { grid-template-columns: 1fr; } } /* -- KPI-Anzeigen ---------------------------------------------------------- */ .ms-kpi { display: flex; flex-direction: column; gap: 2px; } .ms-kpi__label { font-size: 12.5px; color: var(--ms-text-muted); } .ms-kpi__value { font-size: 20px; font-weight: 600; } .ms-kpi--hero { padding-bottom: var(--ms-space-3); margin-bottom: var(--ms-space-1); border-bottom: 1px solid var(--ms-border); } .ms-kpi--hero .ms-kpi__value { font-family: var(--ms-font-display); font-size: 38px; font-weight: 400; line-height: 1.1; } /* -- Zeilen (Label links, Wert rechts, mit Trennlinien) -------------------- */ .ms-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ms-space-3); padding: 10px 0; border-bottom: 1px solid var(--ms-border); font-size: 14px; } .ms-row:last-of-type { border-bottom: none; } .ms-row__label { color: var(--ms-text); } .ms-row__meta { display: block; font-size: 12px; color: var(--ms-text-subtle); } .ms-row__value { font-weight: 600; white-space: nowrap; } /* -- Link mit Pfeil -------------------------------------------------------- */ .ms-link-arrow { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--ms-space-4); font-size: 13.5px; font-weight: 500; color: var(--ms-text); } .ms-link-arrow .ms-icon { width: 15px; height: 15px; transition: transform var(--ms-transition-fast); } .ms-link-arrow:hover { text-decoration: underline; } .ms-link-arrow:hover .ms-icon { transform: translateX(3px); } /* -- Kachel-Grid (Tools) --------------------------------------------------- */ .ms-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--ms-space-4); } @media (max-width: 480px) { .ms-tiles { grid-template-columns: repeat(2, 1fr); } } .ms-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ms-space-3); background: var(--ms-surface); border: 1px solid var(--ms-border); border-radius: var(--ms-radius-lg); padding: var(--ms-space-6) var(--ms-space-3); text-align: center; color: var(--ms-text); transition: border-color var(--ms-transition-fast), transform var(--ms-transition-fast); } a.ms-tile:hover { border-color: var(--ms-border-strong); transform: translateY(-2px); } .ms-tile__icon { width: 28px; height: 28px; stroke-width: 1.5; color: var(--ms-text); } .ms-tile__label { font-size: 13.5px; font-weight: 500; } .ms-tile--disabled { opacity: 0.5; cursor: default; } .ms-tile__badge { margin-top: -4px; } /* -- Buttons --------------------------------------------------------------- */ .ms-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ms-space-2); height: 44px; padding: 0 var(--ms-space-4); border-radius: var(--ms-radius); border: 1px solid var(--ms-border); background: var(--ms-surface); color: var(--ms-text); font-size: 14px; font-weight: 600; cursor: pointer; transition: background var(--ms-transition-fast), border-color var(--ms-transition-fast), color var(--ms-transition-fast); } .ms-btn:hover { border-color: var(--ms-border-strong); } .ms-btn:disabled { opacity: 0.5; cursor: not-allowed; } .ms-btn--primary { height: 48px; background: var(--ms-accent); border-color: var(--ms-accent); color: var(--ms-on-accent); } .ms-btn--primary:hover { background: var(--ms-accent-hover); border-color: var(--ms-accent-hover); } .ms-btn--ghost { background: transparent; border-color: transparent; } .ms-btn--ghost:hover { background: var(--ms-surface-2); border-color: var(--ms-surface-2); } .ms-btn--danger { background: transparent; border-color: var(--ms-danger); color: var(--ms-danger); } .ms-btn--danger:hover { background: var(--ms-danger); color: #ffffff; } .ms-btn--small { height: 34px; padding: 0 var(--ms-space-3); font-size: 13px; } .ms-btn--block { width: 100%; } .ms-btn .ms-icon { width: 16px; height: 16px; } /* -- Formulare --------------------------------------------------------------- */ .ms-form { display: flex; flex-direction: column; gap: var(--ms-space-4); } .ms-field { display: flex; flex-direction: column; gap: 6px; } .ms-field__label { font-size: 13px; font-weight: 500; color: var(--ms-text-muted); } .ms-field input[type='text'], .ms-field input[type='email'], .ms-field input[type='password'], .ms-field input[type='search'], .ms-field select, .ms-field textarea { height: 44px; padding: 0 var(--ms-space-3); background: var(--ms-surface); color: var(--ms-text); border: 1px solid var(--ms-border); border-radius: var(--ms-radius); font: inherit; font-size: 14.5px; width: 100%; } .ms-field textarea { height: auto; padding: var(--ms-space-3); min-height: 96px; } .ms-field input:focus, .ms-field select:focus, .ms-field textarea:focus { outline: none; border-color: var(--ms-accent); box-shadow: 0 0 0 3px var(--ms-focus-ring); } .ms-field--with-action { position: relative; } .ms-field__action { position: absolute; right: 6px; bottom: 6px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: 6px; color: var(--ms-text-muted); cursor: pointer; } .ms-field--with-action .ms-field__action { top: 28px; } .ms-field__action:hover { color: var(--ms-text); background: var(--ms-surface-2); } .ms-checkbox { display: inline-flex; align-items: center; gap: var(--ms-space-2); font-size: 13.5px; color: var(--ms-text); cursor: pointer; } .ms-checkbox input { width: 17px; height: 17px; accent-color: var(--ms-accent); cursor: pointer; } .ms-row-between { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--ms-space-2); font-size: 13.5px; } .ms-row-between a { text-decoration: underline; text-underline-offset: 2px; color: var(--ms-text-muted); } .ms-row-between a:hover { color: var(--ms-text); } fieldset.ms-fieldset { border: 1px solid var(--ms-border); border-radius: var(--ms-radius); padding: var(--ms-space-3); margin: 0; } fieldset.ms-fieldset legend { padding: 0 6px; font-size: 13px; color: var(--ms-text-muted); } /* -- Segmented Control (Theme-Auswahl) --------------------------------------- */ .ms-segmented { display: inline-flex; align-items: center; gap: 2px; background: var(--ms-surface-2); border: 1px solid var(--ms-border); border-radius: var(--ms-radius-pill); padding: 3px; } .ms-segmented__option { position: relative; } .ms-segmented__option input { position: absolute; opacity: 0; width: 1px; height: 1px; } .ms-segmented__label { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--ms-radius-pill); font-size: 13px; font-weight: 500; color: var(--ms-text-muted); cursor: pointer; white-space: nowrap; transition: background var(--ms-transition-fast), color var(--ms-transition-fast); } .ms-segmented__option input:checked + .ms-segmented__label, button.ms-segmented__label[aria-pressed='true'] { background: var(--ms-elevated); color: var(--ms-text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); } button.ms-segmented__label { border: none; background: transparent; cursor: pointer; } .ms-segmented__option input:focus-visible + .ms-segmented__label { outline: 2px solid var(--ms-accent); outline-offset: 2px; } .ms-segmented__label .ms-icon { width: 15px; height: 15px; } /* -- Tabellen ----------------------------------------------------------------- */ .ms-table-wrap { overflow-x: auto; max-width: 100%; } .ms-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .ms-table th, .ms-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--ms-border); white-space: nowrap; } .ms-table th { color: var(--ms-text-muted); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; } .ms-table tbody tr:last-child td { border-bottom: none; } .ms-table-actions { display: flex; gap: var(--ms-space-2); flex-wrap: wrap; } .ms-inline-form { display: inline; } /* -- Meldungen / Badges --------------------------------------------------------- */ .ms-alert { display: flex; align-items: flex-start; gap: var(--ms-space-2); border-radius: var(--ms-radius); padding: 12px 14px; font-size: 13.5px; border: 1px solid transparent; } .ms-alert--danger { background: color-mix(in srgb, var(--ms-danger) 12%, transparent); border-color: var(--ms-danger); color: var(--ms-danger); } .ms-alert--success { background: color-mix(in srgb, var(--ms-success) 14%, transparent); border-color: var(--ms-success); color: var(--ms-success); } .ms-badge { display: inline-flex; align-items: center; gap: 5px; background: var(--ms-surface-2); border: 1px solid var(--ms-border); color: var(--ms-text-muted); border-radius: var(--ms-radius-pill); padding: 3px 10px; font-size: 11px; font-weight: 600; } .ms-badge--success { background: color-mix(in srgb, var(--ms-success) 16%, transparent); border-color: transparent; color: var(--ms-success); } .ms-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .ms-dot--warn { background: var(--ms-warn); } .ms-dot--success { background: var(--ms-success); } /* -- Checkbox-Grid (Tool-Berechtigungen in der Verwaltung) ---------------------- */ .ms-tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--ms-space-2); } .ms-tool-grid__item { display: flex; align-items: center; gap: var(--ms-space-2); padding: 10px 12px; border: 1px solid var(--ms-border); border-radius: var(--ms-radius); font-size: 13.5px; } .ms-tool-grid__item .ms-icon { width: 17px; height: 17px; color: var(--ms-text-muted); } /* ========================================================================== 6. Seiten-spezifische Bausteine ========================================================================== */ /* -- Login --------------------------------------------------------------------- */ .ms-login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 62%) minmax(420px, 38%); } @media (max-width: 900px) { .ms-login { grid-template-columns: 1fr; } } .ms-login__hero { position: relative; min-height: 100vh; background-image: url('img/login-hero.jpg'); background-size: cover; /* Bildausschnitt: Torbogen + die beiden Figuren im Blick behalten (das Quellbild ist quadratisch, die Spalte ist hochformatig). */ background-position: 62% 55%; display: flex; flex-direction: column; justify-content: space-between; padding: var(--ms-space-8); color: #ffffff; } @media (max-width: 900px) { .ms-login__hero { min-height: 240px; padding: var(--ms-space-4); /* Im flachen Mobil-Banner höher ausschnitten, damit der Torbogen im Bild bleibt statt nur Himmel/Meer zu zeigen. */ background-position: 62% 38%; } /* Im flachen Banner ist weniger Platz: Überschrift kleiner, damit sie nicht an den unteren Rand stößt. */ .ms-login__headline { font-size: 26px; margin-bottom: 6px; } .ms-login__sub { font-size: 13px; } } .ms-login__hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10, 12, 10, 0.82) 0%, rgba(10, 12, 10, 0.35) 55%, rgba(10, 12, 10, 0.15) 100%); } .ms-login__hero > * { position: relative; z-index: 1; } .ms-login__hero .ms-topbar__wordmark, .ms-login__hero .ms-topbar__logo { color: #ffffff; } .ms-login__headline { font-family: var(--ms-font-display); font-size: clamp(32px, 4.5vw, 48px); font-weight: 400; line-height: 1.1; margin: 0 0 var(--ms-space-3); } .ms-login__sub { font-size: 15px; color: rgba(255, 255, 255, 0.82); max-width: 30em; } .ms-login__hero-foot { display: none; } @media (min-width: 901px) { .ms-login__hero-foot { display: flex; gap: var(--ms-space-2); font-size: 13px; color: rgba(255, 255, 255, 0.75); } } .ms-login__form-col { display: flex; flex-direction: column; padding: var(--ms-space-8) var(--ms-space-8); background: var(--ms-bg); } @media (max-width: 900px) { .ms-login__form-col { padding: var(--ms-space-6) var(--ms-space-4) var(--ms-space-8); } } .ms-login__form-top { display: flex; justify-content: flex-end; margin-bottom: var(--ms-space-8); } .ms-login__form-wrap { flex: 1; display: flex; flex-direction: column; justify-content: center; max-width: 380px; margin: 0 auto; width: 100%; } .ms-login__title { font-family: var(--ms-font-ui); font-size: 26px; font-weight: 600; margin: 0 0 4px; } .ms-login__lead { color: var(--ms-text-muted); font-size: 14px; margin: 0 0 var(--ms-space-6); } .ms-login__note { text-align: center; color: var(--ms-text-subtle); font-size: 12.5px; margin: var(--ms-space-4) 0 0; } .ms-login__footer { text-align: center; font-size: 12.5px; color: var(--ms-text-subtle); margin-top: var(--ms-space-8); display: flex; gap: var(--ms-space-2); justify-content: center; } .ms-login__footer a { color: var(--ms-text-subtle); text-decoration: underline; text-underline-offset: 2px; } .ms-login__footer a:hover { color: var(--ms-text); } /* -- Lesemodus (Rechtstexte) ----------------------------------------------------- */ .ms-reading { font-size: 15px; line-height: 1.7; } .ms-reading h1 { font-size: clamp(28px, 4vw, 38px); margin-bottom: var(--ms-space-6); } .ms-reading h2 { font-family: var(--ms-font-display); font-size: 22px; font-weight: 400; margin: var(--ms-space-8) 0 var(--ms-space-3); } .ms-reading h3 { font-family: var(--ms-font-ui); font-size: 16px; font-weight: 600; margin: var(--ms-space-6) 0 var(--ms-space-2); } .ms-reading p, .ms-reading ul, .ms-reading ol { margin: 0 0 var(--ms-space-3); color: var(--ms-text); /* Rechtstexte enthalten lange, unveränderte URLs als Linktext (z. B. Datenschutzerklärungen von Drittanbietern) – ohne Umbruch würden sie auf schmalen Bildschirmen die Seite horizontal aufreißen. */ overflow-wrap: break-word; word-break: break-word; } .ms-reading ul, .ms-reading ol { padding-left: 1.3em; } .ms-reading li { margin-bottom: 4px; } .ms-reading a { color: var(--ms-accent); text-decoration: underline; text-underline-offset: 2px; } .ms-reading table { width: 100%; border-collapse: collapse; margin: 0 0 var(--ms-space-4); font-size: 14px; } .ms-reading td, .ms-reading th { border: 1px solid var(--ms-border); padding: 8px 10px; text-align: left; } .ms-reading-header { display: flex; align-items: center; justify-content: space-between; height: var(--ms-bar-height); padding: 0 var(--ms-space-6); border-bottom: 1px solid var(--ms-border); background: var(--ms-elevated); } .ms-reading-header .ms-topbar__brand { display: flex; align-items: center; gap: var(--ms-space-2); } /* -- Fehlerseiten (404, 403 "Kein Zugriff") --------------------------------------- */ .ms-error-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--ms-space-3); padding: var(--ms-space-6); } .ms-error-page__code { font-family: var(--ms-font-display); font-size: 64px; color: var(--ms-text-subtle); } .ms-error-page__title { font-size: 22px; font-weight: 600; } .ms-error-page__desc { color: var(--ms-text-muted); max-width: 32em; } /* -- Begrüßung / Startseiten-Kopf ------------------------------------------------- */ .ms-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ms-space-4); flex-wrap: wrap; margin-bottom: var(--ms-space-8); } .ms-page-head__greeting { font-size: 13.5px; color: var(--ms-text-muted); margin: 0 0 4px; } .ms-page-head__title { font-size: clamp(34px, 4.5vw, 52px); } .ms-page-head__date { color: var(--ms-text-muted); font-size: 13.5px; white-space: nowrap; } .ms-section { margin-top: var(--ms-space-12); } .ms-section:first-of-type { margin-top: 0; } .ms-section__title { font-size: 22px; margin-bottom: var(--ms-space-4); } .ms-automations { display: flex; align-items: center; justify-content: space-between; gap: var(--ms-space-3); margin-top: var(--ms-space-6); padding-top: var(--ms-space-4); border-top: 1px solid var(--ms-border); font-size: 13.5px; color: var(--ms-text-muted); } .ms-automations__left { display: flex; align-items: center; gap: var(--ms-space-2); } .ms-automations a { color: var(--ms-text); font-weight: 500; display: inline-flex; align-items: center; gap: 4px; } .ms-automations a:hover { text-decoration: underline; }