/* Antragsregister — Design „Kontoauszug" (v3, Vorschau).
   Gedanke: ein Agentur-Register wie ein guter Bank-Kontoauszug. Oben ein
   durchgehender Navy-Kopf in der Markenfarbe, darin Titel und Kennzahlen;
   darunter ruhiges, kühles Papier, auf dem die Karten aufliegen und den Kopf
   leicht überlappen. Zahlen tragen die Persönlichkeit (Bricolage Grotesque,
   tabellarische Ziffern), alles Übrige bleibt leise (Inter). Rot nur als Signal.
   Wird nach app.css geladen und überschreibt nur, was sich ändert. */

@font-face {
  font-family: 'Bricolage';
  src: url('fonts/BricolageGrotesque-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy: #0b1d3a;
  --navy-deep: #081831;
  --navy-hell: #16305a;
  --bg: #eef1f6;
  --bg-tief: #e6eaf1;
  --card: #ffffff;
  --ink: #0f1a2e;
  --ink-weich: #33415a;
  --muted: #5f6b80;
  --line: #e2e7ef;
  --line-stark: #cfd6e2;
  --gut: #0f7b5a;
  --gut-hell: #e4f3ec;
  --warn: #946200;
  --warn-hell: #fbf1dc;
  --chart-eins: #2a78d6;
  --chart-plus: #1f9257;
  --chart-grund: #eef1f6;
  --radius: 16px;
  --radius-klein: 10px;
  --schatten: 0 1px 2px rgba(11, 29, 58, .05), 0 10px 30px -18px rgba(11, 29, 58, .28);
  --schatten-hoch: 0 2px 4px rgba(11, 29, 58, .06), 0 22px 44px -22px rgba(11, 29, 58, .38);
  --zahlschrift: 'Bricolage', var(--schrift);
}

:root[data-theme="dark"] {
  --navy: #0a1730;
  --bg: #0b111c;
  --bg-tief: #080d16;
  --card: #121a28;
  --ink: #e9eef6;
  --ink-weich: #c3cbd8;
  --muted: #8d99ad;
  --line: #1f2a3c;
  --line-stark: #2c3a50;
  --chart-eins: #3987e5;
  --chart-grund: #18223a;
  --schatten: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 30px -18px rgba(0, 0, 0, .8);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --navy: #0a1730;
    --bg: #0b111c;
    --bg-tief: #080d16;
    --card: #121a28;
    --ink: #e9eef6;
    --ink-weich: #c3cbd8;
    --muted: #8d99ad;
    --line: #1f2a3c;
    --line-stark: #2c3a50;
    --chart-eins: #3987e5;
    --chart-grund: #18223a;
    --schatten: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 30px -18px rgba(0, 0, 0, .8);
  }
}

body { overflow-x: clip; font-size: 14px; }

/* ------------------------------------------------ Topbar geht in den Kopf über */

.topbar { background: var(--navy); border-bottom: 0; box-shadow: none; }
.mainnav a { color: rgba(255, 255, 255, .66); border-radius: 999px; padding: 6px 12px; }
.mainnav a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.mainnav a.active { color: var(--navy); background: #fff; }
.mainnav a.cockpit-link { border-color: rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .8); }

/* --------------------------------------------- der Navy-Kopf jeder Seite */

.container { padding-top: 0; }

.seitenkopf {
  position: relative;
  isolation: isolate;
  margin: 0 0 -46px;
  padding: 30px 0 76px;
  color: #fff;
  align-items: flex-end;
}
.seitenkopf::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -400px; /* reicht unter Hinweise nach oben bis an die Leiste */
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background:
    radial-gradient(120% 140% at 85% -20%, rgba(42, 120, 214, .28), transparent 55%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-hell) 100%);
}
.seitenkopf .eyebrow { color: rgba(255, 255, 255, .58); letter-spacing: .14em; }
.seitenkopf h1 {
  font-family: var(--zahlschrift);
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 650;
  letter-spacing: -.03em;
  font-variation-settings: 'opsz' 96;
  color: #fff;
}
.seitenkopf a:not(.btn) { color: #fff; }
.seitenkopf .btn { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22); color: #fff; }
.seitenkopf .btn:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .4); color: #fff; }
.seitenkopf .btn-still { background: none; border-color: transparent; color: rgba(255, 255, 255, .72); }
.seitenkopf .btn-accent { background: var(--accent); border-color: var(--accent); }
.seitenkopf .kpi { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); box-shadow: none; color: #fff; }
.seitenkopf .kpi .kpi-label, .seitenkopf .kpi .kpi-sub { color: rgba(255, 255, 255, .62); }
.seitenkopf .kpi::before { display: none; }

/* alles direkt unter dem Kopf liegt auf dem Navy auf */
.seitenkopf + * { position: relative; }

/* ------------------------------------------------------------- Karten */

.card { border-radius: var(--radius); border-color: var(--line); padding: 18px 20px; margin-bottom: 16px; }
.card-tabelle { padding: 8px 0 0; }
.card-tabelle .card-kopf { padding: 10px 20px 6px; }
h2 { font-size: 15px; font-weight: 650; letter-spacing: -.015em; }
.card-kopf h2 small, h2 small { font-weight: 480; }

/* ---------------------------------------------------------- Kennzahlen */

.kpi-reihe { gap: 14px; margin-bottom: 16px; }
.kpi { border-radius: var(--radius); padding: 16px 18px 15px; gap: 3px; }
.kpi::before {
  inset: 18px auto auto 18px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line-stark);
  opacity: 1;
}
.kpi .kpi-label { padding-left: 15px; }
.kpi-gut::before { background: var(--gut); }
.kpi-warn::before { background: var(--warn); }
.kpi-gefahr::before { background: var(--accent); }
.kpi-label { font-size: 10.5px; letter-spacing: .11em; }
.kpi-wert, .prod-wert, .zeitraum-werte .kpi-wert {
  font-family: var(--zahlschrift);
  font-size: 27px;
  font-weight: 620;
  letter-spacing: -.03em;
  font-variation-settings: 'opsz' 48;
  font-variant-numeric: tabular-nums lining-nums;
}
.kpi-sub { font-size: 12px; line-height: 1.45; }
a.kpi:hover { transform: translateY(-2px); }
.kpi-aktiv { border-color: var(--chart-eins); box-shadow: 0 0 0 1px var(--chart-eins), var(--schatten-hoch); }

/* ------------------------------------------------------------ Tabellen */

.tabelle { font-size: 13.5px; }
.tabelle th { font-size: 10.5px; letter-spacing: .1em; padding: 10px 12px 9px; border-bottom-color: var(--line); color: var(--muted); }
.tabelle td { padding: 10px 12px; }
.tabelle tbody tr:hover { background: color-mix(in srgb, var(--chart-eins) 5%, transparent); }
.tabelle tfoot td { padding: 10px 12px; border-bottom-color: var(--ink); }
.vnr-titel { font-family: var(--schrift); font-weight: 650; letter-spacing: .01em; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- Stempel */

.stempel { border-radius: 999px; border-width: 1px; padding: 2px 9px; font-size: 9.5px; letter-spacing: .08em; }
.stempel-wartend { border-style: solid; }

/* -------------------------------------------------------------- Knöpfe */

.btn { border-radius: 999px; padding: 8px 16px; font-weight: 600; }
.btn-klein { padding: 5px 12px; border-radius: 999px; }
.btn-accent { box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--accent) 80%, transparent); }

/* ---------------------------------------------------------- Diagramme */

.prod-panel h2, .team-karte-kopf h3 { font-size: 14px; }
.prod-wert { font-size: 30px; }
.saeule-balken, .saeule-balken-minus { max-width: 20px; }
.team-balken-spur { height: 12px; border-radius: 999px; background: var(--chart-grund); }
.team-balken-fuellung { border-radius: 999px; }
.team-qualitaet strong { font-family: var(--zahlschrift); font-size: 18px; font-weight: 620; }
.team-zelle[style] { background: color-mix(in srgb, var(--chart-eins) var(--staerke), var(--card)); }

/* Hinweise oberhalb des Kopfes liegen auf dem Navy */
main > .flash { position: relative; margin: 14px 0 0; border-radius: var(--radius-klein); }

/* Provisions-Verlauf: erhalten kräftig, offen hell — Rot bleibt dem Storno vorbehalten */
.balken { max-width: 30px; border-radius: 8px 8px 3px 3px; background: var(--chart-grund); }
.balken-erhalten { background: var(--chart-eins); }
.balken-offen { background: color-mix(in srgb, var(--chart-eins) 34%, var(--card)); }
.punkt-erhalten { background: var(--chart-eins); }
.punkt-offen { background: color-mix(in srgb, var(--chart-eins) 34%, var(--card)); }
.balken-teil-erhalten { color: var(--ink-weich); }
.balken-teil-offen { color: var(--muted); }
.balken-teil-rueck, .punkt-rueck { color: var(--warn); }

/* ----------------------------------------- Filter und Reiter auf Papier */

.filterleiste { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; box-shadow: var(--schatten); }
.unternav a { border-radius: 999px; }

/* --------------------------------------------------------- Formulare */

/* Formularseiten: eine ruhige, mittige Spalte — Kopf und Formular stehen bündig übereinander */
.container:has(.form-card):not(:has(.card-tabelle)):not(:has(.kpi-reihe)) { max-width: 820px; }
.form-card { max-width: none; padding: 22px 24px; }
legend { color: var(--ink-weich); letter-spacing: .12em; }
.field > span { font-weight: 600; color: var(--ink); }
input[type="text"], input[type="password"], input[type="email"], input[type="url"],
input[type="number"], input[type="date"], input[type="month"], input[type="time"],
input[type="search"], select, textarea {
  border-radius: 10px;
  padding: 10px 12px;
  border-color: var(--line-stark);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--chart-eins);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--chart-eins) 16%, transparent);
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--chart-eins); }
:focus-visible { outline-color: var(--chart-eins); }
.aktionsleiste { gap: 10px; }

/* ------------------------------------------------------------ Anmeldung */

.container-bare { padding-top: 9vh; }
body.ist-bare {
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(42, 120, 214, .32), transparent 55%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  background-attachment: fixed;
}
.login-card { border-top: 0; border-radius: 20px; padding: 34px 32px 28px; }
.login-brand h1 { font-family: var(--zahlschrift); font-size: 24px; font-weight: 650; letter-spacing: -.02em; }

/* ------------------------------------------------------------ Handy */

@media (max-width: 760px) {
  .seitenkopf { padding: 22px 0 64px; margin-bottom: -40px; }
  .seitenkopf h1 { font-size: 26px; }
  .kpi-wert, .zeitraum-werte .kpi-wert { font-size: 22px; }
}

@media print {
  .seitenkopf { color: #000; padding: 0; margin: 0 0 12px; }
  .seitenkopf::before { display: none; }
  .seitenkopf h1 { color: #000; }
}