/* ==========================================================
base.css — globale Styles + Hell/Dunkel-Modus
==========================================================
Theme-Variablen kommen aus zwei Quellen:
1) Brand-Farben (--primary, --accent ...) werden vom Server
pro Tenant gerendert (siehe View::brandStyles()).
2) UI-Variablen (--bg, --text, --surface ...) sind hier
definiert und switchen ueber [data-theme="light"|"dark"]
auf .
========================================================== */
/* ---------- Light theme (default) ---------- */
:root,
:root[data-theme="light"] {
--bg: #ffffff;
--bg-alt: #f9fafb;
--surface: #ffffff;
--surface-alt: #f3f4f6;
--text: #1d2432;
--text-muted: #6b7280;
--border: #e5e7eb;
--border-strong:#d1d5db;
--shadow: 0 4px 32px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06);
--shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
--logo-light-display: block;
--logo-dark-display: none;
}
/* ---------- Dark theme ---------- */
:root[data-theme="dark"] {
--bg: #0f172a;
--bg-alt: #111827;
--surface: #1e293b;
--surface-alt: #283449;
--text: #e5e7eb;
--text-muted: #94a3b8;
--border: #334155;
--border-strong:#475569;
--shadow: 0 4px 32px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.3);
--shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
--logo-light-display: none;
--logo-dark-display: block;
}
/* ---------- Auto via prefers-color-scheme ----------
Greift wenn KEIN data-theme gesetzt ist, also User noch
nichts manuell gewaehlt hat. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
--bg: #0f172a;
--bg-alt: #111827;
--surface: #1e293b;
--surface-alt: #283449;
--text: #e5e7eb;
--text-muted: #94a3b8;
--border: #334155;
--border-strong:#475569;
--shadow: 0 4px 32px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.3);
--shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
--logo-light-display: none;
--logo-dark-display: block;
}
}
/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; }
/* Scrollbare Seiten brauchen auto-Hoehe damit position:sticky greift */
html:has(body.body-scrollable),
body.body-scrollable { height: auto; min-height: 100%; }
/* HTML hidden-Attribut muss immer gewinnen */
[hidden] { display: none !important; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
background: var(--bg);
color: var(--text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition: background-color 200ms, color 200ms;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
/* ---------- Logo-Switching ----------
Im HTML steht ![]()
+ ![]()
.
CSS zeigt jeweils das passende basierend auf data-theme. */
.logo-light { display: var(--logo-light-display); }
.logo-dark { display: var(--logo-dark-display); }
/* ---------- Theme-Toggle-Button ---------- */
.theme-toggle {
background: none;
border: 1px solid transparent;
color: var(--text);
padding: 6px;
border-radius: 6px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 120ms;
}
.theme-toggle:hover { background: var(--surface-alt); }
.theme-toggle svg { width: 22px; height: 22px; }
/* Im Light-Mode den Mond zeigen (= zu Dark wechseln), im Dark-Mode die Sonne. */
.theme-toggle .icon-sun { display: var(--logo-dark-display); }
.theme-toggle .icon-moon { display: var(--logo-light-display); }
/* ---------- Auth-Pages ---------- */
.auth-shell {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 24px;
background:
linear-gradient(180deg,
color-mix(in srgb, var(--bg) var(--login-overlay-top, 25%), transparent) 0%,
color-mix(in srgb, var(--bg) var(--login-overlay-bot, 45%), transparent) 100%),
var(--login-bg, none),
var(--bg);
background-size: cover, cover, auto;
background-position: center, center, center;
background-repeat: no-repeat, no-repeat, repeat;
}
/* Im Dark-Mode bleibt der Overlay etwas staerker, damit das Card lesbar bleibt. */
:root[data-theme="dark"] .auth-shell {
--login-overlay-top: 45%;
--login-overlay-bot: 65%;
}
.auth-card {
width: 100%;
max-width: 420px;
background: var(--surface);
border-radius: 12px;
padding: 32px;
box-shadow: var(--shadow);
position: relative;
}
.auth-theme-toggle {
position: absolute;
top: 12px;
right: 12px;
}
.auth-logo {
max-width: 220px;
height: auto;
margin: 0 auto 28px;
}
.auth-logo-wrap {
text-align: center;
}
.auth-title {
text-align: center;
margin: 0 0 28px;
color: var(--primary);
}
.auth-form { display: flex; flex-direction: column; gap: 16px; }
.form-row { display: flex; flex-direction: column; gap: 6px; }
.form-row span {
font-size: 13px;
font-weight: 600;
color: var(--text-muted);
}
.form-row input {
padding: 12px 14px;
border: 1px solid var(--border-strong);
border-radius: 8px;
font-size: 16px;
font-family: inherit;
background: var(--surface);
color: var(--text);
transition: border-color 120ms, box-shadow 120ms;
}
.form-row input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent);
}
.btn {
border: none;
cursor: pointer;
font-family: inherit;
font-size: 16px;
font-weight: 600;
padding: 12px 20px;
border-radius: 8px;
transition: background 120ms, transform 60ms;
}
.btn:active { transform: scale(0.98); }
.btn-primary {
background: var(--primary);
color: #fff;
}
.btn-primary:hover { background: var(--primary-dark); }
.btn-link {
background: none;
border: none;
color: var(--primary);
cursor: pointer;
font: inherit;
padding: 0;
}
.btn-link:hover { text-decoration: underline; }
.alert {
padding: 12px 14px;
border-radius: 8px;
margin-bottom: 16px;
font-size: 14px;
}
.alert-error {
background: color-mix(in srgb, #ef4444 12%, var(--surface));
color: #b91c1c;
border: 1px solid color-mix(in srgb, #ef4444 30%, transparent);
}
:root[data-theme="dark"] .alert-error {
color: #fca5a5;
}
.auth-meta {
margin-top: 16px;
text-align: center;
font-size: 14px;
}
.auth-subtitle {
text-align: center;
margin: 0 0 12px;
color: var(--text);
font-size: 22px;
font-weight: 700;
}
.auth-desc {
text-align: center;
margin: 0 0 24px;
color: var(--text-muted);
font-size: 14px;
line-height: 1.5;
}
.code-input {
text-align: center;
letter-spacing: 8px;
font-size: 22px !important;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-weight: 700;
}
.auth-footer {
margin-top: 32px;
color: var(--text-muted);
font-size: 13px;
}
.auth-footer a { color: var(--text-muted); }
/* ---------- Legal-Pages ---------- */
.legal-header {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 24px;
border-bottom: 1px solid var(--border);
background: var(--surface);
}
.back-link { font-size: 14px; }
.legal-logo { height: 32px; }
.legal-content {
max-width: 720px;
margin: 32px auto;
padding: 0 24px;
line-height: 1.6;
color: var(--text);
}
.legal-content h1 { color: var(--primary); }
.legal-content h2 { margin-top: 28px; }
/* ===== Ghost-Banner (global, wird vom Header-Partial gerendert) ===== */
.ghost-banner {
background: linear-gradient(90deg, #c026d3 0%, #db2777 100%);
color: #fff;
padding: 8px 16px;
display: flex;
align-items: center;
gap: 12px;
font-size: 13px;
position: sticky;
top: 0;
z-index: 9999;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.ghost-banner[hidden] { display: none !important; }
.ghost-banner-icon { font-size: 18px; flex-shrink: 0; }
.ghost-banner-text {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.ghost-banner-text strong { font-weight: 700; }
.ghost-banner-btn {
background: #fff !important;
color: #c026d3 !important;
border: none !important;
padding: 6px 12px !important;
font-size: 12px !important;
font-weight: 600 !important;
border-radius: 6px !important;
cursor: pointer !important;
flex-shrink: 0;
}
.ghost-banner-btn:hover { background: #fce7f3 !important; }