/* ==========================================================================
   Kennzahlen Bockler – Stylesheet „Kontoauszug“
   Ein Controlling-Dashboard wie ein guter Bank-Kontoauszug: oben ein durchgehender
   Navy-Kopf in der Markenfarbe mit Titel und Kennzahlen; darunter ruhiges, kühles
   Papier, auf dem die Karten aufliegen. Zahlen tragen die Persönlichkeit
   (Bricolage Grotesque, tabellarische Ziffern), alles Übrige bleibt leise (Inter).
   Diagramme in Blau-Abstufungen, Rot nur als Signal (Rückgang). Hell und dunkel
   über Tokens; [data-theme] gewinnt, sonst folgt die Oberfläche dem System.
   ========================================================================== */

@font-face {
  font-family: 'InterVariable';
  src: url('fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@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;
}

*, *::before, *::after { box-sizing: border-box; }

/* ------------------------------------------------------------------ Tokens */

:root {
  --accent: #e2001a;
  --accent-tief: #b8001a;
  --navy: #0b1d3a;
  --navy-deep: #081831;
  --navy-hell: #16305a;

  --bg: #eef1f6;
  --bg-tief: #e6eaf1;
  --card: #ffffff;
  --card-2: #f5f7fb;
  --ink: #0f1a2e;
  --ink-weich: #33415a;
  --muted: #5f6b80;
  --line: #e2e7ef;
  --line-stark: #cfd6e2;

  --gut: #0f7b5a;
  --gut-hell: #e4f3ec;
  --warn: #946200;
  --warn-hell: #fbf1dc;
  --gefahr: #b3261e;
  --gefahr-hell: #fbeceb;
  --info: #1d4ed8;
  --info-hell: #eaf1fe;

  /* Diagramme: Blau-Abstufungen je Jahr/Serie, Rot nur für Rückgang */
  /* Jahresreihen: eine Blau-Rampe, laufendes Jahr am kräftigsten; OKLab-Helligkeit hell .49/.71/.82/.91, dunkel .72/.54/.42/.35 (11/2026) */
  --chart-eins: #1d5fb4;
  --chart-zwei: #6fa6e3;
  --chart-drei: #a9c8ee;
  --chart-vier: #d2e1f5;
  --chart-plus: #1f9257;
  --chart-minus: #d9534f;
  --chart-grund: #eef1f6;
  --chart-gitter: #e2e7ef;

  --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);
  --schrift: 'InterVariable', 'Avenir Next', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --zahlschrift: 'Bricolage', var(--schrift);
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --navy: #0a1730; --navy-hell: #122849;
  --bg: #0b111c; --bg-tief: #080d16; --card: #121a28; --card-2: #182236;
  --ink: #e9eef6; --ink-weich: #c3cbd8; --muted: #8d99ad; --line: #1f2a3c; --line-stark: #2c3a50;
  --gut: #4cc384; --gut-hell: #112a1e; --warn: #d9a83f; --warn-hell: #2b2311; --gefahr: #f0736a; --gefahr-hell: #331a17;
  --info: #7aa7f5; --info-hell: #14233d;
  --chart-eins: #5ea8ff; --chart-zwei: #3d6fae; --chart-drei: #2d4f7c; --chart-vier: #223a5c;
  --chart-grund: #18223a; --chart-gitter: #1f2a3c; --chart-minus: #f0736a;
  --schatten: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 30px -18px rgba(0, 0, 0, .8);
  --schatten-hoch: 0 2px 4px rgba(0, 0, 0, .5), 0 22px 44px -22px rgba(0, 0, 0, .9);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --navy: #0a1730; --navy-hell: #122849;
    --bg: #0b111c; --bg-tief: #080d16; --card: #121a28; --card-2: #182236;
    --ink: #e9eef6; --ink-weich: #c3cbd8; --muted: #8d99ad; --line: #1f2a3c; --line-stark: #2c3a50;
    --gut: #4cc384; --gut-hell: #112a1e; --warn: #d9a83f; --warn-hell: #2b2311; --gefahr: #f0736a; --gefahr-hell: #331a17;
    --info: #7aa7f5; --info-hell: #14233d;
    --chart-eins: #5ea8ff; --chart-zwei: #3d6fae; --chart-drei: #2d4f7c; --chart-vier: #223a5c;
    --chart-grund: #18223a; --chart-gitter: #1f2a3c; --chart-minus: #f0736a;
    --schatten: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 30px -18px rgba(0, 0, 0, .8);
    --schatten-hoch: 0 2px 4px rgba(0, 0, 0, .5), 0 22px 44px -22px rgba(0, 0, 0, .9);
    color-scheme: dark;
  }
}

/* --------------------------------------------------------------- Grundlagen */

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--schrift); font-size: 14px; line-height: 1.5; color: var(--ink);
  background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: clip;
}
h1, h2, h3 { margin: 0; text-wrap: balance; }
h2 { font-size: 15px; font-weight: 650; letter-spacing: -.015em; margin-bottom: .75rem; }
h2 small { font-weight: 480; color: var(--muted); }
h3 { font-size: 13px; font-weight: 650; color: var(--ink-weich); margin: 1rem 0 .4rem; }
p { margin: 0 0 .75rem; }
a { color: var(--ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
code { font-family: var(--mono); font-size: .9em; }
[hidden] { display: none !important; }

.muted { color: var(--muted); }
.klein { font-size: .82rem; }
.num, .rechts { text-align: right; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.plus { color: var(--gut); }
.minus { color: var(--gefahr); }
.zahl { font-family: var(--zahlschrift); font-variant-numeric: tabular-nums lining-nums; font-weight: 600; letter-spacing: -.02em; }
:focus-visible { outline: 2px solid var(--chart-eins); outline-offset: 3px; border-radius: 6px; }

/* --------------------------------------------------------- Kopfleiste (Navy) */

.topbar { position: sticky; top: 0; z-index: 30; background: var(--navy-deep); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.topbar-inner { max-width: 1180px; margin: 0 auto; padding: .65rem 1.25rem; display: flex; align-items: center; gap: 1.25rem; }
.brand { display: flex; align-items: center; gap: .75rem; color: #fff; }
.brand:hover { text-decoration: none; }
.brand-logo { width: 138px; height: auto; display: block; }
.brand-tool { color: rgba(255, 255, 255, .62); font-size: .82rem; font-weight: 500; padding-left: .8rem; border-left: 1px solid rgba(255, 255, 255, .22); }
.mainnav { display: flex; align-items: center; gap: .15rem; margin-left: .25rem; }
.mainnav a { padding: 6px 12px; border-radius: 999px; color: rgba(255, 255, 255, .66); font-weight: 500; font-size: .9rem; transition: background .15s, color .15s; }
.mainnav a:hover { color: #fff; background: rgba(255, 255, 255, .08); text-decoration: none; }
.mainnav a.active { color: var(--navy); background: #fff; }
.mainnav a.cockpit-link { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .8); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.theme-knopf {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .1); color: #fff;
}
.theme-knopf:hover { background: rgba(255, 255, 255, .2); }
.theme-knopf .icon:last-child { display: none; }
:root[data-theme="dark"] .theme-knopf .icon:first-child { display: none; }
:root[data-theme="dark"] .theme-knopf .icon:last-child { display: block; }
.icon { flex-shrink: 0; vertical-align: middle; }

.profil { position: relative; }
.profil summary { list-style: none; cursor: pointer; border-radius: 50%; }
.profil summary::-webkit-details-marker { display: none; }
.avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: .8rem; font-weight: 600; }
.profil[open] .avatar, .profil summary:hover .avatar { background: rgba(255, 255, 255, .24); }
.profil-menue {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; min-width: 260px; max-width: calc(100vw - 2rem);
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: .4rem; box-shadow: var(--schatten-hoch);
}
.profil-kopf { display: flex; flex-direction: column; padding: .55rem .7rem .65rem; border-bottom: 1px solid var(--line); margin-bottom: .3rem; }
.profil-kopf strong { font-size: .92rem; }
.profil-menue a, .profil-menue button {
  display: flex; align-items: center; gap: .6rem; width: 100%; padding: .55rem .7rem; border-radius: 9px;
  color: var(--ink); font: inherit; font-size: .92rem; background: none; border: 0; cursor: pointer; text-align: left;
}
.profil-menue a:hover, .profil-menue button:hover { background: var(--card-2); text-decoration: none; }
.profil-menue .icon { color: var(--muted); }

/* -------------------------------------------------------- Seitenkopf (Navy) */

.container { max-width: 1180px; margin: 0 auto; padding: 0 1.25rem 4rem; }
.container-bare { max-width: 480px; padding-top: 9vh; }

.seitenkopf {
  position: relative; isolation: isolate; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin: 0 0 -46px; padding: 28px 0 74px; color: #fff;
}
.seitenkopf::before {
  content: ""; position: absolute; z-index: -1; top: -400px; 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%);
}
.eyebrow { color: rgba(255, 255, 255, .62); font-size: 12.5px; font-weight: 500; margin-bottom: .3rem; }
.seitenkopf h1 { font-family: var(--zahlschrift); font-size: clamp(28px, 3.2vw, 38px); font-weight: 650; letter-spacing: -.03em; color: #fff; line-height: 1.1; }
.kopf-sub { color: rgba(255, 255, 255, .72); margin: .35rem 0 0; font-size: 13.5px; }
.kopf-sub strong { color: #fff; font-weight: 600; }
.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-accent { background: var(--accent); border-color: var(--accent); }
.seitenkopf + * { position: relative; }
main > .flash { position: relative; z-index: 2; margin: 14px 0 0; border-radius: var(--radius-klein); }

/* Jahresschalter (Segment-Chips im Kopf oder auf Papier) */
.jahre { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .1); }
.jahre a { padding: 6px 13px; border-radius: 999px; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .78); font-variant-numeric: tabular-nums; }
.jahre a:hover { background: rgba(255, 255, 255, .12); text-decoration: none; color: #fff; }
.jahre a.active { background: #fff; color: var(--navy); }
.jahre a.vorgaenger { opacity: .7; font-weight: 500; }
.papier .jahre { background: var(--card-2); border: 1px solid var(--line); }
.papier .jahre a { color: var(--muted); }
.papier .jahre a.active { background: var(--ink); color: var(--card); }

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

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--schatten); padding: 18px 20px; margin-bottom: 16px; }
.card-tabelle { padding: 8px 0 0; overflow: hidden; }
.card-tabelle .card-kopf { padding: 10px 20px 6px; }
.card-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; }
.card-kopf h2 { margin: 0; }
.card-kopf .muted { font-size: 12.5px; }
.form-card { max-width: 820px; padding: 22px 24px; }
.raster-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.raster-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.raster-2 > .card, .raster-3 > .card { margin-bottom: 0; }

/* --------------------------------------------------------- Kennzahl-Kacheln */

.kpi-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-bottom: 16px; }
.kpi {
  position: relative; display: flex; flex-direction: column; gap: 3px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px 15px; color: var(--ink); box-shadow: var(--schatten); min-width: 0;
}
.kpi::before { content: ""; position: absolute; left: 18px; top: 21px; width: 7px; height: 7px; border-radius: 50%; background: var(--line-stark); display: none; }
.kpi-gut::before, .kpi-warn::before, .kpi-gefahr::before { display: block; }
.kpi-gut::before { background: var(--gut); }
.kpi-warn::before { background: var(--warn); }
.kpi-gefahr::before { background: var(--accent); }
.kpi-label { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.kpi-gut .kpi-label, .kpi-warn .kpi-label, .kpi-gefahr .kpi-label { padding-left: 15px; }
.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; line-height: 1.15; }
.kpi-wert small { font-size: 14px; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-left: .25rem; font-family: var(--schrift); }
.kpi-sub { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.kpi-fuss { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: .45rem; margin-top: .45rem; }
a.kpi:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--schatten-hoch); transition: transform .15s, box-shadow .15s; }
.kpi .sparkline { display: block; margin-top: .25rem; width: 100%; height: 36px; }

.seitenkopf .kpi-reihe { width: 100%; margin: 18px 0 0; }
.seitenkopf .kpi { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); box-shadow: none; color: #fff; }
.seitenkopf .kpi::before { display: none; }
.seitenkopf .kpi-label { padding-left: 0; color: rgba(255, 255, 255, .7); }
.seitenkopf .kpi-sub, .seitenkopf .kpi-wert small { color: rgba(255, 255, 255, .62); }

/* Delta-Etikett: Rot nur bei Rückgang */
.delta { display: inline-flex; align-items: center; gap: .2rem; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.delta-auf { background: var(--gut-hell); color: var(--gut); }
.delta-ab { background: var(--gefahr-hell); color: var(--gefahr); }
.delta-gleich, .delta-leer { background: var(--card-2); color: var(--muted); }
.seitenkopf .delta-auf { background: rgba(76, 195, 132, .22); color: #bdf0d4; }
.seitenkopf .delta-ab { background: rgba(240, 115, 106, .22); color: #ffd1cc; }
.seitenkopf .delta-gleich, .seitenkopf .delta-leer { background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .8); }

.etikett { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .76rem; font-weight: 500; background: var(--card-2); color: var(--muted); border: 1px solid var(--line); white-space: nowrap; }
.etikett-gut { background: var(--gut-hell); color: var(--gut); border-color: transparent; }
.etikett-warn { background: var(--warn-hell); color: var(--warn); border-color: transparent; }
.etikett-gefahr { background: var(--gefahr-hell); color: var(--gefahr); border-color: transparent; }
.etikett-info { background: var(--info-hell); color: var(--info); border-color: transparent; }
.punkt-unsicher { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); margin-left: .3rem; vertical-align: 2px; }

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

.tabelle-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabelle th, .tabelle td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tabelle thead th { font-size: 12px; font-weight: 500; color: var(--muted); background: var(--card); position: sticky; top: 0; z-index: 1; }
.tabelle tbody tr:hover td { background: color-mix(in srgb, var(--chart-eins) 5%, transparent); }
.tabelle tbody tr:last-child td { border-bottom: 0; }
.tabelle tfoot td, .tabelle tfoot th { font-weight: 650; border-top: 2px solid var(--ink); border-bottom: 0; background: var(--card); text-align: left; }
.tabelle tfoot td.num, .tabelle tfoot th.num { text-align: right; }
.tabelle td.num, .tabelle th.num { text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.tabelle .zeile-leise td { color: var(--muted); }
.tabelle .zeile-summe td { font-weight: 650; background: var(--card-2); }
.tabelle tr[data-href] { cursor: pointer; }
.tabelle .leer { color: var(--line-stark); }
.tabelle.kompakt th, .tabelle.kompakt td { padding: 6px 9px; font-size: 12.5px; }
.tabelle td.aktuell, .tabelle th.aktuell { background: color-mix(in srgb, var(--chart-eins) 8%, transparent); }
.tabelle .vorgaenger td { color: var(--muted); font-style: italic; }
.doppelstrich td { border-top: 3px double var(--ink); }

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

.chart { display: block; width: 100%; height: auto; font-family: var(--schrift); }
.chart .gitter { stroke: var(--chart-gitter); stroke-width: 1; }
.chart .gitter-null { stroke: var(--line-stark); }
.chart .tick { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart .linie { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.chart .punkt, .chart .punkt-ende { stroke: var(--card); stroke-width: 1.5; }
.chart .linien-label { font-size: 11px; font-weight: 600; }
.serie.linie-j0 .linie { stroke: var(--chart-eins); stroke-width: 2.8; }
.serie.linie-j0 .punkt, .serie.linie-j0 .punkt-ende, .serie.linie-j0 .linien-label { fill: var(--chart-eins); }
.serie.linie-j1 .linie { stroke: var(--chart-zwei); stroke-width: 2.2; stroke-dasharray: 7 5; }
.serie.linie-j1 .punkt, .serie.linie-j1 .punkt-ende, .serie.linie-j1 .linien-label { fill: var(--chart-zwei); }
.serie.linie-j2 .linie { stroke: var(--chart-drei); stroke-width: 1.8; }
.serie.linie-j2 .punkt, .serie.linie-j2 .punkt-ende { fill: var(--chart-drei); }
.serie.linie-j2 .linien-label { fill: var(--muted); }
.serie.linie-j3 .linie, .serie.linie-j4 .linie, .serie.linie-j5 .linie, .serie.linie-j6 .linie { stroke: var(--chart-vier); stroke-width: 1.6; }
.serie.linie-j3 .punkt-ende, .serie.linie-j4 .punkt-ende, .serie.linie-j5 .punkt-ende, .serie.linie-j6 .punkt-ende,
.serie.linie-j3 .linien-label, .serie.linie-j4 .linien-label, .serie.linie-j5 .linien-label, .serie.linie-j6 .linien-label { fill: var(--muted); }
.serie.linie-ziel .linie { stroke: var(--muted); stroke-dasharray: 4 5; stroke-width: 1.5; }
.serie.linie-ziel .punkt-ende { fill: var(--muted); }
.serie.linie-warm .linie { stroke: var(--chart-plus); }
.serie.linie-warm .punkt-ende, .serie.linie-warm .punkt { fill: var(--chart-plus); }
.chart .balken { fill: var(--chart-eins); }
.chart .balken-hell { fill: var(--chart-zwei); }
.chart .balken-leise { fill: var(--chart-drei); }
.chart .balken-vorjahr { fill: var(--chart-drei); }
.chart .balken-minus { fill: var(--chart-minus); }
.chart .balken-ziel { fill: var(--chart-grund); stroke: var(--line-stark); stroke-dasharray: 3 3; }
.chart .balken-wert { fill: var(--ink-weich); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.chart-leer { padding: 2rem 1rem; text-align: center; color: var(--muted); font-size: 13px; }
.sparkline .spark-linie { fill: none; stroke: var(--chart-eins); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sparkline .spark-flaeche { fill: color-mix(in srgb, var(--chart-eins) 12%, transparent); }
.sparkline .spark-punkt { fill: var(--chart-eins); }
.seitenkopf .sparkline .spark-linie { stroke: #fff; }
.seitenkopf .sparkline .spark-flaeche { fill: rgba(255, 255, 255, .14); }
.seitenkopf .sparkline .spark-punkt { fill: #fff; }
.legende { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin: .5rem 0 0; }
.legende-eintrag { display: inline-flex; align-items: center; gap: .4rem; }
.legende-farbe { display: inline-block; width: 14px; height: 4px; border-radius: 2px; background: var(--chart-eins); }
.legende-farbe.linie-j1 { background: repeating-linear-gradient(90deg, var(--chart-zwei) 0 5px, transparent 5px 8px); }
.legende-farbe.linie-j2 { background: var(--chart-drei); }
.legende-farbe.linie-j3, .legende-farbe.linie-j4, .legende-farbe.linie-j5, .legende-farbe.linie-j6 { background: var(--chart-vier); }
.legende-farbe.linie-ziel { background: repeating-linear-gradient(90deg, var(--muted) 0 3px, transparent 3px 6px); }
.legende-farbe.balken-vorjahr, .legende-farbe.balken-leise { background: var(--chart-drei); }
.legende-farbe.balken-minus { background: var(--chart-minus); }
.legende-farbe.linie-warm { background: var(--chart-plus); }

/* Fortschritt (Staffeln) */
.fortschritt { margin: .6rem 0 1.6rem; }
.fortschritt-spur { position: relative; height: 10px; border-radius: 999px; background: var(--chart-grund); }
.fortschritt-fuellung { height: 100%; border-radius: 999px; background: var(--chart-eins); transition: width .4s; }
.fortschritt-marke { position: absolute; top: -3px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fortschritt-marke i { width: 2px; height: 16px; background: var(--line-stark); border-radius: 1px; }
.fortschritt-marke b { font-size: 10.5px; font-weight: 600; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Stufen-Anzeige */
.stufen { display: flex; gap: 4px; }
.stufe { flex: 1; height: 8px; border-radius: 3px; background: var(--chart-grund); }
.stufe.erreicht { background: var(--chart-eins); }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--line-stark); background: var(--card); color: var(--ink); font: inherit; font-size: .9rem; font-weight: 600;
  cursor: pointer; text-decoration: none; transition: transform .08s, background .15s; -webkit-tap-highlight-color: transparent;
}
.btn:hover { text-decoration: none; background: var(--card-2); }
.btn:active { transform: translateY(1px); }
.btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--accent) 80%, transparent); }
.btn-accent:hover { background: var(--accent-tief); border-color: var(--accent-tief); }
.btn-gefahr { border-color: color-mix(in srgb, var(--gefahr) 45%, transparent); color: var(--gefahr); }
.btn-gefahr:hover { background: var(--gefahr); border-color: var(--gefahr); color: #fff; }
.btn-still { background: none; border-color: transparent; color: var(--muted); }
.btn-block { width: 100%; }
.btn-klein { padding: 5px 12px; font-size: .82rem; }
.linklike { background: none; border: 0; padding: 0; color: var(--muted); cursor: pointer; font: inherit; }
.linklike:hover { text-decoration: underline; }
.aktionsleiste { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 1rem; }

/* --------------------------------------------------------------- Meldungen */

.flash { padding: .8rem 1rem; border-radius: var(--radius-klein); margin-bottom: 1rem; font-size: .92rem; font-weight: 500; border: 1px solid; display: flex; gap: .6rem; align-items: flex-start; }
.flash::before { font-weight: 700; flex-shrink: 0; }
.flash-ok { background: var(--gut-hell); border-color: color-mix(in srgb, var(--gut) 35%, transparent); color: var(--gut); }
.flash-ok::before { content: "✓"; }
.flash-fehler { background: var(--gefahr-hell); border-color: color-mix(in srgb, var(--gefahr) 35%, transparent); color: var(--gefahr); }
.flash-fehler::before { content: "!"; }
.flash-warn { background: var(--warn-hell); border-color: color-mix(in srgb, var(--warn) 35%, transparent); color: var(--warn); }
.flash-warn::before { content: "!"; }
.hinweis { background: var(--info-hell); border: 1px solid color-mix(in srgb, var(--info) 30%, transparent); color: var(--ink); border-radius: var(--radius-klein); padding: .75rem 1rem; margin-bottom: 1rem; font-size: .9rem; }
.hinweis-warn { background: var(--warn-hell); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.hinweis-leise { background: var(--card-2); border-color: var(--line); color: var(--muted); }

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

.field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; min-width: 0; }
.field > span { font-size: .8rem; font-weight: 600; color: var(--ink); }
.field-hint { font-size: .8rem; color: var(--muted); font-weight: 400; }
legend { color: var(--ink-weich); font-size: 12.5px; font-weight: 600; padding: 0; margin-bottom: .6rem; }
fieldset { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="number"],
input[type="date"], input[type="month"], input[type="search"], select, textarea {
  font: inherit; font-size: 1rem; color: var(--ink); background: var(--card); border: 1px solid var(--line-stark);
  border-radius: 10px; padding: 10px 12px; width: 100%; transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { outline: none; 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); }
.check { display: flex; align-items: center; gap: .55rem; margin: .5rem 0 1rem; font-size: .95rem; cursor: pointer; }
.check input { width: 1.1rem; height: 1.1rem; }
.feldpaar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.felddrei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.eingabe-euro { position: relative; }
.eingabe-euro input { padding-right: 2.6rem; font-family: var(--zahlschrift); font-weight: 600; font-size: 1.15rem; }
.eingabe-euro span.einheit { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: .9rem; }
.segment { display: flex; flex-wrap: wrap; gap: .4rem; margin: .1rem 0 1.1rem; }
.segment label { position: relative; }
.segment input { position: absolute; opacity: 0; pointer-events: none; }
.segment span { display: inline-block; padding: .5rem .9rem; border-radius: 999px; border: 1px solid var(--line-stark); background: var(--card); color: var(--ink); font-size: .9rem; font-weight: 500; cursor: pointer; }
.segment span:hover { background: var(--card-2); }
.segment input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--card); }
.filterleiste { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; box-shadow: var(--schatten); margin-bottom: 16px; }
.filterleiste .field { margin: 0; min-width: 9rem; flex: 1; }
.filterleiste select, .filterleiste input { padding: 7px 10px; font-size: .9rem; }
.unternav { display: inline-flex; gap: 2px; flex-wrap: wrap; margin: 0 0 16px; padding: 3px; background: var(--card-2); border: 1px solid var(--line); border-radius: 999px; }
.unternav a { padding: .4rem .95rem; border-radius: 999px; color: var(--muted); font-size: .88rem; font-weight: 500; }
.unternav a:hover { text-decoration: none; color: var(--ink); }
.unternav a.active { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(13, 27, 48, .12); }
.seitenkopf .unternav { background: rgba(255, 255, 255, .1); border-color: transparent; margin: 0; }
.seitenkopf .unternav a { color: rgba(255, 255, 255, .75); }
.seitenkopf .unternav a.active { background: #fff; color: var(--navy); box-shadow: none; }

/* ---------------------------------------------------------------- Listen */

.gruppe { background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-bottom: 1rem; }
.gruppe-zeile { display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem; color: var(--ink); border-bottom: 1px solid var(--line); font-size: .95rem; }
.gruppe-zeile:last-child { border-bottom: 0; }
a.gruppe-zeile:hover { background: var(--card-2); text-decoration: none; }
.gruppe-zeile > span:first-child { flex: 1; }
.gruppe-wert { font-weight: 600; font-variant-numeric: tabular-nums; font-family: var(--zahlschrift); }
.schritte { padding-left: 1.25rem; }
.schritte li { margin-bottom: .55rem; }

/* ------------------------------------------------------------------ Login */

.login-wrap { min-height: 100dvh; display: grid; place-items: center; padding: 1.5rem; }
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-stage { width: 100%; max-width: 400px; }
.login-logo-oevo { width: 244px; height: auto; display: block; margin: 0 auto 2rem; }
.login-card { width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--schatten-hoch); padding: 34px 32px 28px; }
.login-brand { text-align: center; margin-bottom: 1.5rem; }
.login-brand h1 { font-family: var(--zahlschrift); font-size: 24px; font-weight: 650; letter-spacing: -.02em; margin: .25rem 0 0; }
.login-brand .muted { font-size: .88rem; margin: .25rem 0 0; }
.qr-wrap { display: flex; justify-content: center; margin: .75rem 0; }
.qr-wrap svg { width: 200px; height: 200px; border-radius: 12px; }
.setup-secret { font-family: var(--mono); font-size: .95rem; letter-spacing: .06em; background: var(--card-2); padding: .65rem .8rem; border-radius: var(--radius-klein); word-break: break-all; display: inline-block; }
.setup-steps { padding-left: 1.2rem; }
.setup-steps li { margin-bottom: .55rem; }
.code-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .5rem; margin: 1rem 0; }
.code-raster code { display: block; text-align: center; padding: .55rem; background: var(--card-2); border: 1px dashed var(--line-stark); border-radius: var(--radius-klein); font-size: .95rem; letter-spacing: .05em; }

/* ------------------------------------------------------- Tab-Leiste (Handy) */

.tabbar { display: none; }

/* ======================================================================
   Handy (10/2026): wischbare Nav, 16-px-Felder, Karten statt Tabellen,
   untere Tab-Leiste. Breakpoint 760 px.
   ====================================================================== */
@media (max-width: 760px) {
  body { font-size: 15px; }
  .topbar { position: relative; z-index: 30; }
  .topbar-inner { padding: .55rem 1rem; gap: .75rem; }
  .brand-logo { width: 118px; }
  .brand-tool { display: none; }
  .mainnav { display: none; }
  .container { padding: 0 1rem calc(4.6rem + env(safe-area-inset-bottom)); }
  .seitenkopf { padding: 20px 0 62px; margin-bottom: -40px; align-items: flex-start; flex-direction: column; }
  .seitenkopf h1 { font-size: 26px; }
  .kpi-wert { font-size: 22px; }
  .kpi-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 13px 14px 12px; }
  .raster-2, .raster-3, .feldpaar, .felddrei { grid-template-columns: minmax(0, 1fr); }
  .card { padding: 14px 15px; }
  .card-tabelle { padding: 6px 0 0; }
  .card-tabelle .card-kopf { padding: 8px 15px 4px; }
  .tabelle { font-size: 12.5px; }
  .tabelle th, .tabelle td { padding: 8px 9px; }
  input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="date"], input[type="month"], input[type="search"], select, textarea { font-size: 16px; }
  .filterleiste select, .filterleiste input { font-size: 16px; }
  .jahre { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .jahre::-webkit-scrollbar { display: none; }
  .jahre a { flex: 0 0 auto; }
  .unternav { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .unternav a { flex: 0 0 auto; }

  /* Listen-Tabellen → Karten */
  .karten-mobil, .karten-mobil tbody, .karten-mobil tr, .karten-mobil td { display: block; }
  .karten-mobil thead, .karten-mobil .karten-aktion { display: none; }
  .karten-mobil tr { padding: .6rem 1rem; border-bottom: 1px solid var(--line); }
  .karten-mobil td { border: 0; padding: .15rem 0; display: flex; justify-content: space-between; gap: 1rem; text-align: right; }
  .karten-mobil td::before { content: attr(data-label); color: var(--muted); font-size: .78rem; text-align: left; flex: 1; }
  .karten-mobil td.karten-kopf { display: block; text-align: left; font-weight: 650; padding-bottom: .3rem; }
  .karten-mobil td.karten-kopf::before { display: none; }

  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: color-mix(in srgb, var(--card) 92%, transparent); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
    border-top: 1px solid var(--line); padding: .35rem .5rem calc(.35rem + env(safe-area-inset-bottom));
  }
  .tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .4rem .2rem .3rem; border-radius: 12px; color: var(--muted); font-size: .68rem; font-weight: 500; min-width: 0; }
  .tabbar a:hover { text-decoration: none; }
  .tabbar a.active { color: var(--chart-eins); }
  .tab-icon { position: relative; line-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
  .topbar, .tabbar, .btn, .aktionsleiste, .jahre, .theme-knopf { display: none !important; }
  body { background: #fff; color: #000; }
  .seitenkopf { color: #000; padding: 0; margin: 0 0 12px; }
  .seitenkopf::before { display: none; }
  .seitenkopf h1, .seitenkopf .kopf-sub, .seitenkopf .eyebrow { color: #000; }
  .card, .kpi { box-shadow: none; break-inside: avoid; }
}

/* ======================================================================
   Start (11/2026): drei Führungszahlen im Kopf, Ertragsreihe,
   „Offen“ und „Hebel“, zwei Diagramme. Sentence case, eine Aussage je Kachel.
   ====================================================================== */
.kopf-zeile { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; width: 100%; }
.fuehrung { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: 100%; margin-top: 22px; }
.fk {
  display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 18px 20px 16px; border-radius: var(--radius);
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); color: #fff;
}
a.fk:hover { text-decoration: none; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .22); }
.fk-label { font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .7); }
.fk-wert { font-family: var(--zahlschrift); font-size: 34px; font-weight: 620; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums lining-nums; font-variation-settings: 'opsz' 48; }
.fk-wert small { font-family: var(--schrift); font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .62); letter-spacing: 0; margin-left: .3rem; }
.fk-zeile { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: 12.5px; color: rgba(255, 255, 255, .72); line-height: 1.4; }
.fk-zeile strong { color: #fff; font-weight: 600; }
.fk-balken { margin-top: 8px; }
.fk-balken .spur { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.fk-balken .fuellung { height: 100%; border-radius: 999px; background: #fff; }
.fk-balken .text { display: flex; justify-content: space-between; gap: .75rem; font-size: 11.5px; color: rgba(255, 255, 255, .62); margin-top: 6px; font-variant-numeric: tabular-nums; }
.fk-balken .text b { color: rgba(255, 255, 255, .85); font-weight: 600; }
.fk .sparkline { display: block; width: 100%; height: 34px; margin-top: 8px; }
.fk-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; font-size: 12px; color: rgba(255, 255, 255, .7); }
.fk-split b { display: block; color: #fff; font-family: var(--zahlschrift); font-size: 16px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fk-split small { display: block; font-size: 11px; color: rgba(255, 255, 255, .55); margin-top: 1px; }
.fk-split .fehlt { color: #ffd9a8; }

.ertrag { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.ek {
  display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 14px 16px 13px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); color: var(--ink); box-shadow: var(--schatten);
}
a.ek:hover { text-decoration: none; box-shadow: var(--schatten-hoch); transform: translateY(-2px); transition: transform .15s, box-shadow .15s; }
.ek-label { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.ek-wert { font-family: var(--zahlschrift); font-size: 24px; font-weight: 620; letter-spacing: -.025em; line-height: 1.15; font-variant-numeric: tabular-nums lining-nums; }
.ek-zeile { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 2px; }

.offen { list-style: none; margin: 0; padding: 0; }
.offen li { display: flex; align-items: center; gap: .8rem; padding: .62rem 0; border-top: 1px solid var(--line); }
.offen li:first-child { border-top: 0; }
.offen .punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); flex-shrink: 0; }
.offen .punkt-ziel { background: var(--info); }
.offen .punkt-pruefen { background: var(--line-stark); }
.offen .text { flex: 1; min-width: 0; font-size: 13.5px; }
.offen .text small { display: block; color: var(--muted); font-size: 12px; }
.offen .btn { padding: 5px 12px; font-size: 12.5px; flex-shrink: 0; }
.offen-leer { display: flex; align-items: center; gap: .5rem; color: var(--gut); font-size: 13.5px; padding: .4rem 0; }

.hebel { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.hebel td { padding: .6rem 0; border-top: 1px solid var(--line); vertical-align: middle; }
.hebel tr:first-child td { border-top: 0; }
.hebel td + td { padding-left: .9rem; }
.hebel .stufen { width: 84px; }
.hebel .num { font-variant-numeric: tabular-nums; }
.hebel .muted { font-size: 12px; }
.start .card-kopf h2 small { font-weight: 480; color: var(--muted); }

@media (max-width: 760px) {
  .fuehrung { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 16px; }
  .fk { padding: 15px 16px 14px; }
  .fk-wert { font-size: 30px; }
  .ertrag { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ek-wert { font-size: 21px; }
  .hebel .stufen { width: 64px; }
  .hebel td.hebel-text { display: none; }
}

/* ---------------------------------------------------- Portal-Bericht (11/2026) */
.upload-feld {
  display: flex; flex-direction: column; align-items: center; gap: .4rem; text-align: center; padding: 1.6rem 1rem; cursor: pointer;
  border: 1.5px dashed var(--line-stark); border-radius: var(--radius); background: var(--card-2); color: var(--ink-weich); transition: border-color .15s, background .15s;
}
.upload-feld:hover, .upload-feld.aktiv { border-color: var(--chart-eins); background: color-mix(in srgb, var(--chart-eins) 6%, var(--card-2)); }
.upload-feld .icon { color: var(--chart-eins); }
.upload-feld input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.upload-liste { list-style: none; margin: .7rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.upload-liste li { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .7rem; border-radius: 999px; background: var(--info-hell); color: var(--info); font-size: 12.5px; }
.upload-liste li small { color: var(--muted); }
.upload-liste li .upload-weg { border: 0; background: transparent; color: inherit; font: inherit; font-size: 16px; line-height: 1; padding: 0 0 0 .15rem; cursor: pointer; opacity: .7; }
.upload-liste li .upload-weg:hover { opacity: 1; }
details.card > summary { list-style: none; }
details.card > summary::-webkit-details-marker { display: none; }
details.card[open] > summary { margin-bottom: .75rem; }
button[disabled].btn { opacity: .5; cursor: not-allowed; }
.btn.lauft { position: relative; pointer-events: none; opacity: .75; }
/* ---- Pflegeplan (11/2026): Monats- und Jahresroutine auf der Startseite ---- */
.offen .punkt-erledigt { background: var(--gut); }
.offen .punkt-offen { background: var(--warn); }
.offen .punkt-ueberfaellig { background: var(--gefahr); }
.offen li.erledigt .text { color: var(--muted); }
.offen li.erledigt .text small { color: var(--gut); }
.pflegeplan-kopf { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin: 1rem 0 .2rem; }
.pflegeplan-kopf h3 { margin: 0; font-size: 14px; font-weight: 600; }
.pflegeplan-fuss { font-size: 12px; color: var(--muted); margin: .7rem 0 0; }

/* Berichtsart auf der Upload-Seite (11/2026) */
.berichtsart { display: flex; flex-wrap: wrap; gap: .2rem 1.4rem; margin: 0 0 .4rem; }
.berichtsart .check { margin: .2rem 0; align-items: flex-start; }
.berichtsart .check input { margin-top: .15rem; }

/* ==========================================================================
   Mandantenneutral (11/2026): Wortmarke statt Logo, Nachtrag-Blöcke im Pflegeplan
   ========================================================================== */
.brand-wortmarke { color: #fff; font-weight: 700; font-size: 1.05rem; letter-spacing: .01em; white-space: nowrap; }
.login-wortmarke { color: #fff; font-weight: 700; font-size: 1.5rem; text-align: center; margin: 0 auto 2rem; letter-spacing: .01em; }
.logo-preview { display: inline-flex; align-items: center; background: #081831; border-radius: 10px; padding: 10px 14px; }
.logo-preview img { max-height: 40px; max-width: 200px; height: auto; display: block; }
details.nachtrag { border-bottom: 1px solid var(--line); padding: .4rem 0 .6rem; }
details.nachtrag summary { display: flex; align-items: center; justify-content: space-between; gap: .8rem; cursor: pointer; list-style: none; padding: .3rem 0; }
details.nachtrag summary::-webkit-details-marker { display: none; }
details.nachtrag .nachtrag-titel { font-weight: 600; }
details.nachtrag .nachtrag-titel::before { content: '▸ '; color: var(--muted); }
details.nachtrag[open] .nachtrag-titel::before { content: '▾ '; }
.hinweis-kundendaten { margin: .8rem 0 .2rem; }