/* Datenraum: Design-System. Werte laut docs/DESIGN.md. */

@font-face {
  font-family: "Geist";
  src: url("fonts/geist-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist";
  src: url("fonts/geist-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #F4F5F9;
  --surface: #FFFFFF;
  --surface-2: #F7F8FA;
  --surface-head: #FAFAFC;
  --ink: #1E1E2A;
  --ink-2: #4A4A57;
  --muted: #6B6B78;
  --faint: #B4B5C0;
  --line: #EDEEF2;
  --ring: 0 0 0 1px #E3E4EA;
  --ring-strong: 0 0 0 1px #D5D7DE;
  --hover: #F4F5F9;
  --hover-2: #ECEDF2;
  --accent: #3B5BDB;
  --on-accent: #FFFFFF;
  --accent-soft: color-mix(in srgb, var(--accent) 10%, #FFFFFF);
  --warn-bg: #FCEBE9;
  --warn-ink: #A1271B;
  --ok-bg: #E7F4EC;
  --ok-ink: #17663A;
  --amber-bg: #FDF3DC;
  --amber-ink: #7A4B00;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--bg);
  font-variant-numeric: tabular-nums;
}
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
code, .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; }
.ic { flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.grow { flex-grow: 1; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack-lg { display: flex; flex-direction: column; gap: 24px; }
.cluster { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.between { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* Gerüst: Seitenleiste und Arbeitsfläche */
.shell { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; min-height: 100vh; padding: 8px; }
.side { flex: 0 0 248px; max-width: 100%; display: flex; flex-direction: column; gap: 4px; padding: 8px 6px; }
.panel { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; background: var(--surface); border-radius: 12px; box-shadow: var(--ring), 0 1px 2px rgba(23, 23, 33, .04); }

.brand { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 8px; }
.brand-tile { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 600; background: var(--ink); color: #FFFFFF; flex-shrink: 0; }
.brand-tile.is-accent { background: var(--accent); color: var(--on-accent); }
.brand-text { min-width: 0; line-height: 1.25; }
.brand-name { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-sub { display: block; font-size: 12px; color: var(--muted); }

.nav { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.nav-item { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px; border-radius: 8px; text-decoration: none; color: var(--ink-2); transition: background .12s ease; }
.nav-item:hover { background: var(--hover-2); }
.nav-item.is-active { background: var(--surface); color: var(--ink); font-weight: 500; box-shadow: var(--ring), 0 1px 2px rgba(23, 23, 33, .05); }
.nav-item.is-active .ic { color: var(--accent); }
.nav-label { margin: 18px 10px 6px; font-size: 12px; font-weight: 500; color: var(--muted); }
.side-user { display: flex; align-items: center; gap: 10px; padding: 6px 8px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: #DCDDE6; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex-shrink: 0; }
.side-note { display: flex; align-items: center; gap: 8px; margin: 0 4px 6px; padding: 8px 10px; border-radius: 8px; background: var(--hover-2); font-size: 12px; color: var(--ink-2); }

.topbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 56px; padding: 8px 20px 8px 24px; border-bottom: 1px solid var(--line); }
.crumbs { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.crumbs .ic { color: var(--faint); stroke-width: 2; }
.crumbs strong { color: var(--ink); font-weight: 500; }
.content { padding: 28px 32px 36px; display: flex; flex-direction: column; gap: 24px; }
.page-title { font-size: 22px; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; }
.section-title { font-size: 15px; font-weight: 600; }

/* Karten, Kacheln, Listen */
.card { border-radius: 12px; box-shadow: var(--ring); background: var(--surface); }
.card-pad { padding: 18px 20px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 12px; }
.tile { padding: 16px 18px; border-radius: 12px; box-shadow: var(--ring); display: flex; flex-direction: column; gap: 4px; }
.tile-label { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.tile-value { font-size: 26px; line-height: 1.2; font-weight: 500; letter-spacing: -.01em; }
.tile-note { font-size: 12px; color: var(--muted); }

.rows { border-radius: 12px; box-shadow: var(--ring); overflow: hidden; }
.rows-scroll { overflow-x: auto; }
.rows-head { display: flex; align-items: center; gap: 16px; min-height: 38px; padding: 0 16px; background: var(--surface-head); border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 500; color: var(--muted); }
.row { display: flex; align-items: center; gap: 16px; min-height: 52px; padding: 8px 16px; border-top: 1px solid var(--line); transition: background .12s ease; }
.row:first-child, .rows-head + .row { border-top: 0; }
.row:hover { background: var(--hover); }
.row-icon { width: 30px; height: 30px; border-radius: 50%; background: #F0F1F5; color: var(--ink-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.row-icon.is-warn { background: var(--warn-bg); color: var(--warn-ink); }
.row-icon.is-ok { background: var(--ok-bg); color: var(--ok-ink); }
.row-main { flex: 1 1 0; min-width: 0; }
.row-title { font-weight: 500; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.col-w { flex: 0 0 auto; }
.w-90 { width: 90px; } .w-120 { width: 120px; } .w-150 { width: 150px; } .w-200 { width: 200px; } .w-260 { width: 260px; }
.right { text-align: right; }
.min-720 { min-width: 720px; }

.pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 8px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--hover); color: var(--ink-2); white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #9C9DAA; }
.pill-ok { background: var(--ok-bg); color: var(--ok-ink); } .pill-ok::before { background: #1E8E4E; }
.pill-warn { background: var(--warn-bg); color: var(--warn-ink); } .pill-warn::before { background: #C4321F; }
.pill-amber { background: var(--amber-bg); color: var(--amber-ink); } .pill-amber::before { background: #B7791F; }
.pill-accent { background: var(--accent-soft); color: var(--accent); } .pill-accent::before { background: var(--accent); }
.pill-plain { padding: 0 10px; } .pill-plain::before { display: none; }

/* Buttons und Formulare */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--surface); box-shadow: var(--ring-strong); color: var(--ink); font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .12s ease, filter .12s ease; }
.btn:hover { background: var(--hover); }
.btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.btn-primary:hover { background: var(--accent); filter: brightness(.93); }
.btn-lg { height: 46px; font-size: 15px; }
.btn-block { width: 100%; }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn-quiet { box-shadow: none; background: transparent; color: var(--ink-2); }
.btn-quiet:hover { background: var(--hover-2); }
.icon-btn { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.icon-btn:hover { background: var(--hover-2); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field > label, .label { font-weight: 500; }
.label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.hint { font-size: 12px; color: var(--muted); }
.input-wrap { display: flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 6px 0 14px; border-radius: 10px; background: var(--surface); box-shadow: var(--ring-strong); }
.input-wrap:focus-within { box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.input-wrap input, .input-wrap select { flex: 1 1 0; min-width: 0; height: 42px; border: 0; outline: 0; background: transparent; font-size: 15px; }
.input-wrap input[type="color"] { flex: 0 0 34px; height: 28px; padding: 0; border-radius: 6px; cursor: pointer; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px; }
.check { display: flex; align-items: center; gap: 10px; min-height: 32px; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }
.link { color: var(--accent); text-decoration: none; font-weight: 500; }
.link:hover { text-decoration: underline; }

.alert { display: flex; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); }
.alert .ic { margin-top: 1px; }
.alert-error { background: var(--warn-bg); color: var(--warn-ink); }
.alert-ok { background: var(--ok-bg); color: var(--ok-ink); }
.alert-amber { background: var(--amber-bg); color: var(--amber-ink); }

.empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 56px 24px; text-align: center; border-radius: 12px; box-shadow: var(--ring); }
.empty-icon { width: 52px; height: 52px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.empty-title { font-size: 17px; font-weight: 600; }
.empty-text { max-width: 440px; color: var(--ink-2); }

.kv { display: flex; flex-direction: column; margin: 0; }
.kv > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--line); }
.kv > div:first-child { border-top: 0; padding-top: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 500; text-align: right; overflow-wrap: anywhere; }
.copy-box { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 14px; border-radius: 10px; background: var(--surface-2); box-shadow: var(--ring); }
.copy-box code { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }

/* Anmeldung: zweigeteilt */
.auth { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; min-height: 100vh; padding: 12px; background: var(--surface); }
.auth-main { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; padding: 20px 28px; }
.auth-head { display: flex; align-items: center; gap: 10px; }
.auth-center { flex-grow: 1; display: flex; align-items: center; justify-content: center; padding: 40px 0; }
.auth-form { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 18px; }
.auth-title { font-size: 26px; line-height: 1.2; font-weight: 600; letter-spacing: -.015em; }
.auth-sub { margin-top: 6px; font-size: 15px; color: var(--ink-2); }
.auth-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.auth-foot span { display: flex; align-items: center; gap: 6px; }
.auth-divider { padding-top: 16px; border-top: 1px solid var(--line); color: var(--ink-2); }
.auth-side { flex: 1.25 1 460px; min-width: 0; min-height: 320px; position: relative; overflow: hidden; border-radius: 16px; background: var(--ink); color: #FFFFFF; display: flex; flex-direction: column; justify-content: flex-end; padding: 36px; }
.auth-side.is-accent { background: var(--accent); color: var(--on-accent); }
.auth-pattern { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .10; }
.auth-side-text { position: relative; display: flex; flex-direction: column; gap: 10px; max-width: 520px; }
.auth-side-title { font-size: 30px; line-height: 1.15; font-weight: 600; letter-spacing: -.015em; }
.auth-side-sub { font-size: 16px; line-height: 1.5; color: #D5D7E0; }
.status-code { font-size: 13px; font-weight: 500; color: var(--muted); }

/* Einrichtung */
.install { min-height: 100vh; display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 40px 16px 56px; }
.install-card { width: 100%; max-width: 640px; background: var(--surface); border-radius: 16px; box-shadow: var(--ring), 0 1px 2px rgba(23, 23, 33, .04); padding: 28px 32px 32px; display: flex; flex-direction: column; gap: 20px; }
.steps { display: flex; gap: 6px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.steps li { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 6px; border-radius: 999px; font-size: 13px; color: var(--muted); background: transparent; }
.steps .num { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; background: #E3E4EA; color: var(--ink-2); }
.steps li.is-current { background: var(--surface); box-shadow: var(--ring); color: var(--ink); font-weight: 500; }
.steps li.is-current .num, .steps li.is-done .num { background: var(--accent); color: var(--on-accent); }
.actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 4px; }
.check-list { display: flex; flex-direction: column; border-radius: 12px; box-shadow: var(--ring); overflow: hidden; }
.check-item { display: flex; align-items: flex-start; gap: 12px; padding: 11px 14px; border-top: 1px solid var(--line); }
.check-item:first-child { border-top: 0; }
.check-item .row-icon { width: 24px; height: 24px; }
.check-hint { font-size: 12px; color: var(--ink-2); margin-top: 2px; }

@media (max-width: 860px) {
  .side { flex-basis: 100%; }
  .nav { flex-direction: row; overflow-x: auto; }
  .nav-item { white-space: nowrap; }
  .nav-label, .side-note { display: none; }
  .content { padding: 20px 16px 28px; }
  .topbar { padding: 8px 16px; }
  .auth-main { padding: 16px 12px; }
  .install-card { padding: 22px 18px 24px; }
}