@import url('/fonts.css');

/* ── Grundlagen ─────────────────────────────────────────────── */
/* Hausfarbe: #602b7a (Algorithmics-Lila), Schrift: Montserrat */
:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f0f2f5;
  --border: #e2e5ea;
  --text: #1c2530;
  --text-dim: #5d6874;
  --accent: #602b7a;
  --accent-soft: #f1e9f6;
  --accent-ink: #ffffff;
  --ok: #1a7f4b;
  --ok-soft: #e4f4ec;
  --warn: #a4620a;
  --warn-soft: #fdf1dd;
  --bad: #c0392b;
  --bad-soft: #fbeae8;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .04);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12161c; --surface: #1a1f27; --surface-2: #222833; --border: #2c333f;
    --text: #e6eaf0; --text-dim: #9aa5b4; --accent: #b98fd0; --accent-soft: #2b1c35; --accent-ink: #1b1020;
    --ok: #57c98a; --ok-soft: #16301f; --warn: #e0a458; --warn-soft: #32261364;
    --bad: #f28b7d; --bad-soft: #3a1e1b;
    --shadow: 0 1px 2px rgba(0,0,0,.4);
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.6 Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; }
h1 { font-size: 1.55rem; letter-spacing: -.015em; font-weight: 700; }
h2 { font-size: 1.1rem; font-weight: 600; }
h3 { font-size: .95rem; font-weight: 600; }

/* ── Kopfzeile ──────────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; gap: 1.25rem;
  padding: .6rem 1.25rem; background: var(--surface);
  border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; flex: none; }
.brand:hover { text-decoration: none; opacity: .85; }
.brand img { height: 30px; width: auto; }

/* Es wird immer genau EINE Fassung der Wortmarke angezeigt: lila auf hellem,
   weiß auf dunklem Grund. Die Regeln müssen spezifisch genug sein, um eine
   allgemeine img-Regel zu überstimmen – sonst stehen beide nebeneinander. */
img.logo-light { display: block; }
img.logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  img.logo-light { display: none; }
  img.logo-dark { display: block; }
}
.mainnav { display: flex; gap: .25rem; }
.mainnav a {
  padding: .35rem .7rem; border-radius: 7px; color: var(--text-dim); font-weight: 500;
}
.mainnav a:hover { background: var(--surface-2); text-decoration: none; color: var(--text); }
.mainnav a.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.topbar-search { margin-left: auto; }
.topbar-search input {
  width: 15rem; max-width: 40vw; padding: .4rem .7rem; border-radius: 7px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
}
.userbox { display: flex; align-items: center; gap: .6rem; font-size: .85rem; color: var(--text-dim); }
.linkbtn { background: none; border: 0; color: var(--text-dim); cursor: pointer; font: inherit; text-decoration: underline; padding: 0; }

.page { max-width: 1140px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
.page-wide { max-width: 1440px; }
.foot { text-align: center; color: var(--text-dim); font-size: .8rem; padding: 0 1rem 2rem; }

/* ── Karten & Raster ────────────────────────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1.1rem;
}
.grid { display: grid; gap: 1rem; }
.grid-6 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.grid-5 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.section { margin: 2rem 0 0; }
.section > h2 { display: flex; align-items: baseline; gap: .6rem; }
.section > h2 .sub { font-size: .8rem; font-weight: 400; color: var(--text-dim); }

/* ── Kennzahl-Kacheln ───────────────────────────────────────── */
.kpi { display: flex; flex-direction: column; gap: .35rem; }
.kpi .label { font-size: .78rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; }
.kpi .value { font-size: 1.75rem; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi .delta { font-size: .82rem; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.delta .up { color: var(--ok); } .delta .down { color: var(--bad); } .delta .flat { color: var(--text-dim); }
.delta .ref { color: var(--text-dim); }
.kpi .goal { font-size: .78rem; color: var(--text-dim); }
.kpi .split { font-size: .82rem; color: var(--text-dim); display: flex; gap: .4rem; flex-wrap: wrap; align-items: baseline; }
.kpi .split b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.kpi .split .dot { opacity: .5; }
.pill { display: inline-block; padding: .05rem .45rem; border-radius: 999px; font-size: .72rem; font-weight: 600; }
.pill-ok { background: var(--ok-soft); color: var(--ok); }
.pill-warn { background: var(--warn-soft); color: var(--warn); }
.pill-bad { background: var(--bad-soft); color: var(--bad); }
.pill-neutral { background: var(--surface-2); color: var(--text-dim); }

/* ── Sparkline ──────────────────────────────────────────────── */
.spark { display: block; width: 100%; height: 34px; overflow: visible; }
.spark path { fill: none; stroke: var(--accent); stroke-width: 1.8; }
.spark .area { fill: var(--accent-soft); stroke: none; }
.spark circle { fill: var(--accent); }

/* ── Funnel ─────────────────────────────────────────────────── */
.funnel { display: flex; flex-direction: column; gap: .1rem; }
.funnel-step { display: grid; grid-template-columns: 12rem 1fr auto; align-items: center; gap: .75rem; padding: .3rem 0; }
.funnel-step .name { font-size: .87rem; color: var(--text-dim); }
.funnel-bar { height: 26px; border-radius: 5px; background: var(--accent); opacity: .85; min-width: 3px; }
.funnel-step .n { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 4rem; text-align: right; }
.funnel-gap { display: grid; grid-template-columns: 12rem 1fr; gap: .75rem; font-size: .76rem; color: var(--text-dim); }
.funnel-gap span:last-child { padding-left: .2rem; }

/* ── Tabellen ───────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .88rem; }
th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--border); }
th { font-weight: 600; color: var(--text-dim); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: var(--surface-2); }
td .up { color: var(--ok); } td .down { color: var(--bad); } td .flat { color: var(--text-dim); }

/* ── Formulare & Knöpfe ─────────────────────────────────────── */
.btn {
  display: inline-block; padding: .45rem .9rem; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-weight: 550; cursor: pointer; font-size: .9rem;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-block { display: block; width: 100%; text-align: center; margin-top: 1.1rem; }
.btn-primary:hover { filter: brightness(1.08); background: var(--accent); }
.btn-danger { color: var(--bad); border-color: var(--bad); background: transparent; }
.btn-sm { padding: .25rem .6rem; font-size: .8rem; }
input[type=text], input[type=email], input[type=search], input[type=date], input[type=url], input[type=password], select, textarea {
  width: 100%; padding: .45rem .6rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text); font: inherit;
}
textarea { min-height: 5rem; resize: vertical; }
label { display: block; font-size: .82rem; color: var(--text-dim); margin: .8rem 0 .25rem; font-weight: 550; }
.row { display: flex; gap: .75rem; flex-wrap: wrap; align-items: flex-end; }
.row > * { flex: 1 1 12rem; }
.actions { display: flex; gap: .5rem; margin-top: 1.1rem; flex-wrap: wrap; align-items: center; }

.segmented { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--surface); }
.segmented a { padding: .35rem .75rem; font-size: .84rem; color: var(--text-dim); }
.segmented a + a { border-left: 1px solid var(--border); }
.segmented a.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.segmented a:hover { text-decoration: none; background: var(--surface-2); }

.flash { padding: .6rem .85rem; border-radius: 8px; font-size: .88rem; margin: 0 0 1rem; }
.flash-ok { background: var(--ok-soft); color: var(--ok); }
.flash-info { background: var(--accent-soft); color: var(--accent); }
.flash-warn { background: var(--warn-soft); color: var(--warn); }
.muted { color: var(--text-dim); }
.small { font-size: .82rem; }
.stack > * + * { margin-top: .75rem; }

/* ── Anmeldeseite ───────────────────────────────────────────── */
.login-body { display: grid; place-items: center; min-height: 100vh; }
.login-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 2.5rem; text-align: center; box-shadow: var(--shadow); max-width: 22rem;
}
.login-logo { width: 210px; max-width: 70%; height: auto; margin: 0 auto .25rem; }
.login-card .sub { color: var(--text-dim); margin: .25rem 0 1.25rem; font-size: .9rem; }
.login-form { text-align: left; }
.login-form label { margin-top: .9rem; }
.login-card .notice { background: var(--accent-soft); color: var(--accent); padding: .6rem; border-radius: 8px; font-size: .85rem; }
.login-card .hint { color: var(--text-dim); font-size: .8rem; }
.login-card .error { background: var(--bad-soft); color: var(--bad); padding: .6rem; border-radius: 8px; font-size: .85rem; }
.login-card { max-width: 24rem; }

/* ── Wiki ───────────────────────────────────────────────────── */
.wiki-layout { display: grid; grid-template-columns: 15rem 1fr; gap: 1.75rem; align-items: start; }
@media (max-width: 800px) { .wiki-layout { grid-template-columns: 1fr; } }
.wiki-tree { position: sticky; top: 4.5rem; font-size: .88rem; }
.wiki-tree h3 { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); margin: 1.2rem 0 .35rem; }
.wiki-tree a { display: block; padding: .22rem .5rem; border-radius: 6px; color: var(--text); }
.wiki-tree a:hover { background: var(--surface-2); text-decoration: none; }
.wiki-tree a.is-active { background: var(--accent-soft); color: var(--accent); }
.prose { max-width: 46rem; }
.prose h2 { margin-top: 1.6em; }
.prose img { max-width: 100%; height: auto; border-radius: 8px; }
.prose pre { background: var(--surface-2); padding: .75rem; border-radius: 8px; overflow-x: auto; }
.prose blockquote { border-left: 3px solid var(--border); margin: 1em 0; padding-left: 1em; color: var(--text-dim); }
.prose table { margin: 1em 0; }

.hit { border-bottom: 1px solid var(--border); padding: .9rem 0; }
.hit:last-child { border-bottom: 0; }
.hit h3 { margin-bottom: .15rem; }
.hit .kindtag { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); }
.hit .summary { margin: .2rem 0 .35rem; }
.hit .snippet { font-size: .85rem; color: var(--text-dim); background: var(--surface-2); padding: .4rem .6rem; border-radius: 6px; }
.hit mark { background: #ffe9a8; color: #2b2000; border-radius: 3px; padding: 0 .1em; }
@media (prefers-color-scheme: dark) { .hit mark { background: #5b4a12; color: #ffeeb8; } }

/* ── Editor ─────────────────────────────────────────────────── */
.editor-toolbar { display: flex; gap: .2rem; flex-wrap: wrap; border: 1px solid var(--border); border-bottom: 0; border-radius: 8px 8px 0 0; padding: .3rem; background: var(--surface-2); }
.editor-toolbar button { border: 0; background: none; padding: .3rem .55rem; border-radius: 6px; cursor: pointer; color: var(--text); font-size: .85rem; }
.editor-toolbar button:hover { background: var(--surface); }
.editor {
  border: 1px solid var(--border); border-radius: 0 0 8px 8px; padding: 1rem 1.1rem;
  min-height: 22rem; background: var(--surface); outline: none;
}
.editor:focus { border-color: var(--accent); }

/* ── Fortschritt ────────────────────────────────────────────── */
.bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--accent); }
.bar.done > span { background: var(--ok); }
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { border-bottom: 1px solid var(--border); padding: .7rem 0; display: flex; gap: .7rem; align-items: flex-start; }
.checklist li:last-child { border-bottom: 0; }
.checklist input[type=checkbox] { width: 1.15rem; height: 1.15rem; margin-top: .15rem; flex: none; accent-color: var(--accent); }
.checklist .it-title { font-weight: 550; }
.checklist li.done .it-title { color: var(--text-dim); text-decoration: line-through; }
.secret { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--surface-2); padding: .2rem .45rem; border-radius: 6px; }