/* ==========================================================================
   mejo Marketingplan – Oberfläche

   Gestaltungsidee: technisches Datenblatt. Zahlen laufen in Festbreite und
   rechtsbündig wie in einer Maßtabelle, Kanäle tragen eine feste Farbmarke,
   dekorative Elemente entfallen.

   Schriften: Work Sans, selbst gehostet unter assets/fonts. Bewusst nicht
   über Google Fonts eingebunden – das wäre bei der Consent-Aufstellung des
   Hauses ein Rückschritt.

   Zahlen laufen ebenfalls in Work Sans, mit font-variant-numeric: tabular-nums.
   Die Schrift bringt echte Tabellenziffern mit, Spalten stehen dadurch sauber
   untereinander. Die Festbreitenschrift bleibt den Stellen vorbehalten, wo sie
   inhaltlich etwas bedeutet: Codes, Kennungen, Datumsangaben – dort ist der
   technische Charakter gewollt.
   ========================================================================== */

/* Work Sans · SIL Open Font License · siehe assets/fonts/LICENSE-work-sans.txt */
@font-face {
    font-family: "Work Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/work-sans-latin-400-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
                   U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Work Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/work-sans-latin-ext-400-normal.woff2") format("woff2");
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
                   U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Work Sans"; font-style: normal; font-weight: 500; font-display: swap;
    src: url("fonts/work-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Work Sans"; font-style: normal; font-weight: 500; font-display: swap;
    src: url("fonts/work-sans-latin-ext-500-normal.woff2") format("woff2");
    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+2C60-2C7F;
}
@font-face {
    font-family: "Work Sans"; font-style: normal; font-weight: 600; font-display: swap;
    src: url("fonts/work-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Work Sans"; font-style: normal; font-weight: 600; font-display: swap;
    src: url("fonts/work-sans-latin-ext-600-normal.woff2") format("woff2");
    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+2C60-2C7F;
}
@font-face {
    font-family: "Work Sans"; font-style: normal; font-weight: 700; font-display: swap;
    src: url("fonts/work-sans-latin-700-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Work Sans"; font-style: normal; font-weight: 700; font-display: swap;
    src: url("fonts/work-sans-latin-ext-700-normal.woff2") format("woff2");
    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+2C60-2C7F;
}

:root {
    /* --- Flächen und Text ------------------------------------------------
       Kühles Aluminiumgrau als Grundton, Anthrazit als Textfarbe. */
    --paper:    #EEF1F3;
    --surface:  #FFFFFF;
    --ink:      #15191D;
    --ink-2:    #59636C;
    --ink-3:    #8B959D;
    --rule:     #D6DCE1;
    --rule-2:   #AEB7BF;
    --shade:    #F6F8F9;

    /* --- Hausfarbe -------------------------------------------------------
       mejo-Grün #009261.

       Es gibt zwei Abstufungen, weil der Grundton auf Weiß nur 3,97:1
       erreicht – genug für Flächen, Balken und Kanten, zu wenig für Fließtext
       (die Schwelle liegt bei 4,5:1). Für Schrift auf hellem Grund gilt
       deshalb --brand-text mit 4,61:1.

       --brand       Flächen, Balken, Kanten, Markierungen
       --brand-text  Schrift auf hellem Grund
       --brand-dark  gedrückter Zustand, Hover auf Flächen
       --brand-soft  getönte Fläche, etwa hinterlegte Zeilen                 */
    --brand:      #009261;
    --brand-text: #008659;
    --brand-dark: #00724C;
    --brand-soft: #E5F4EF;

    /* Signalfarben. Bewusst getrennt von der Hausfarbe: Eine Warnung soll
       nicht wie ein Markenelement aussehen. Grün für „im Plan" greift dagegen
       den Hauston auf – zwei verschiedene Grüntöne nebeneinander wären
       schlicht verwirrend. */
    --signal:   #E2600F;
    --ok:       #008659;
    --bad:      #C0392B;

    --sans: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    --u: 4px;
    --nav-w: 208px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 15px/1.5 var(--sans);
}

a { color: var(--ink); text-decoration-color: var(--rule-2); text-underline-offset: 2px; }
a:hover { text-decoration-color: var(--brand-text); }

:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
}

/* ---------------------------------------------------------------- Gerüst */

.shell { display: flex; min-height: 100vh; }

.nav {
    width: var(--nav-w);
    flex: 0 0 var(--nav-w);
    background: var(--ink);
    color: #C9D1D7;
    padding: calc(var(--u) * 6) 0;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.nav__brand {
    padding: 0 calc(var(--u) * 5) calc(var(--u) * 6);
    line-height: 1.2;
}
.nav__logo {
    display: block;
    width: 88px;           /* Seitenverhältnis 3:1 – ergibt rund 29 px Höhe */
    max-width: 100%;       /* Notbremse, falls das Stylesheet mal nicht greift */
    height: auto;
    margin-bottom: calc(var(--u) * 3);
}
@media (max-width: 900px) {
    .nav__logo { width: 76px; }
}
.nav__brand strong {
    display: block;
    color: #FFF;
    font-size: 15px;
    letter-spacing: -0.01em;
}
.nav__brand span {
    display: block;
    margin-top: 2px;
    font: 12px/1.5 var(--sans);
    color: #808C96;
}

.nav__year {
    padding: 0 calc(var(--u) * 5) calc(var(--u) * 3);
    border-bottom: 1px solid #2A3138;
    margin-bottom: calc(var(--u) * 2);
}
.nav__year label {
    display: block;
    font: 600 10px/1 var(--sans);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #6B7680;
    margin-bottom: calc(var(--u) * 1.5);
}
.nav__year select {
    background: #12171B;
    color: #FFF;
    border: 1px solid #39424A;
    font-family: var(--mono);
    font-size: 13px;
    padding: calc(var(--u) * 1.5) calc(var(--u) * 2);
}
.nav__year select:focus { border-color: var(--brand); }

.nav__group {
    font: 600 10px/1 var(--sans);
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: #6B7680;
    padding: calc(var(--u) * 4) calc(var(--u) * 5) calc(var(--u) * 2);
}

.nav a {
    display: block;
    padding: calc(var(--u) * 2) calc(var(--u) * 5);
    color: #C9D1D7;
    text-decoration: none;
    border-left: 3px solid transparent;
    font-size: 14px;
}
.nav a:hover { background: #1E242A; color: #FFF; }
.nav a[aria-current="page"] {
    background: #1E242A;
    color: #FFF;
    border-left-color: var(--brand);
}

.main { flex: 1; min-width: 0; padding: calc(var(--u) * 7) calc(var(--u) * 8) calc(var(--u) * 14); }

/* ---------------------------------------------------------------- Kopf */

.head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: calc(var(--u) * 4);
    flex-wrap: wrap;
    padding-bottom: calc(var(--u) * 3);
    border-bottom: 2px solid var(--ink);
    margin-bottom: calc(var(--u) * 6);
}
h1, h2, h3, strong, .btn, input, select, textarea, button {
    font-family: var(--sans);
}

.head h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.02em;
}
.head__meta { font: 13px/1.4 var(--sans); color: var(--ink-2); }

.eyebrow {
    font: 600 11px/1.2 var(--sans);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-3);
    display: block;
    margin-bottom: calc(var(--u) * 2);
}

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

.card {
    background: var(--surface);
    border: 1px solid var(--rule);
    padding: calc(var(--u) * 5);
    margin-bottom: calc(var(--u) * 5);
}
.card--flush { padding: 0; }
.card h2 {
    margin: 0 0 calc(var(--u) * 4);
    font-size: 15px;
    font-weight: 600;
}
.card__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: calc(var(--u) * 3);
    padding: calc(var(--u) * 4) calc(var(--u) * 5);
    border-bottom: 1px solid var(--rule);
}
.card__head h2 { margin: 0; }

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

.figures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
    margin-bottom: calc(var(--u) * 5);
}
.figure { background: var(--surface); padding: calc(var(--u) * 4) calc(var(--u) * 5); }
.figure__value {
    font: 600 30px/1.1 var(--sans);
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
    display: block;
    margin: calc(var(--u) * 2) 0 calc(var(--u));
}
.figure__sub { font: 13px/1.45 var(--sans); color: var(--ink-2); }

/* ---------------------------------------------------------------- Maßleiste
   Die Monatsachse ist als Maßlinie gezeichnet: Grundlinie, Hilfslinien je
   Monat, Plan als Kontur, Ist als Fläche. Das ist die eine Stelle, an der
   die Oberfläche etwas Eigenes macht – alles übrige bleibt Tabelle.        */

.rail { padding: calc(var(--u) * 5); }
.rail__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: calc(var(--u) * 2);
    align-items: end;
    height: 168px;
    border-bottom: 2px solid var(--ink);
    padding-bottom: 0;
}
.rail__col {
    position: relative;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
}
.rail__plan, .rail__ist { width: 42%; min-height: 2px; }
.rail__plan {
    border: 1px solid var(--rule-2);
    border-bottom: none;
    background: repeating-linear-gradient(
        135deg, transparent 0 3px, var(--shade) 3px 6px
    );
}
.rail__ist { background: var(--brand); }
.rail__ist--over { background: var(--bad); }

.rail__axis {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: calc(var(--u) * 2);
    margin-top: calc(var(--u) * 2);
}
.rail__tick {
    text-align: center;
    font: 11px/1.4 var(--sans);
    font-variant-numeric: tabular-nums;
    color: var(--ink-2);
    border-top: 1px solid var(--rule);
    padding-top: calc(var(--u));
    position: relative;
}
.rail__tick::before {
    content: "";
    position: absolute;
    top: -7px; left: 50%;
    width: 1px; height: 6px;
    background: var(--rule-2);
}
.rail__tick b { display: block; font-weight: 600; color: var(--ink); }

.legend {
    display: flex;
    gap: calc(var(--u) * 5);
    font: 12px/1 var(--sans);
    color: var(--ink-2);
    margin-top: calc(var(--u) * 4);
    flex-wrap: wrap;
}
.legend i {
    display: inline-block;
    width: 10px; height: 10px;
    margin-right: 6px;
    vertical-align: -1px;
}
.legend .p { border: 1px solid var(--rule-2); background: var(--shade); }
.legend .i { background: var(--brand); }
.legend .o { background: var(--bad); }

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

.table-wrap { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }

th {
    font: 600 11px/1.3 var(--sans);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ink-2);
    text-align: left;
    padding: calc(var(--u) * 3) calc(var(--u) * 3);
    border-bottom: 1px solid var(--rule-2);
    white-space: nowrap;
    vertical-align: bottom;
}
td {
    padding: calc(var(--u) * 2.5) calc(var(--u) * 3);
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
}
tbody tr:hover { background: var(--shade); }

.num, th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    /* Zahlen samt Einheit gehören zusammen – ein umbrechendes Prozentzeichen
       oder Eurozeichen liest sich als eigene Zeile. */
    white-space: nowrap;
}
/* Festbreite bleibt Codes, Kennungen und Datumsangaben vorbehalten. */
.mono { font-family: var(--mono); font-size: 12.5px; letter-spacing: -0.01em; }
.nowrap { white-space: nowrap; }

tfoot td {
    border-top: 2px solid var(--ink);
    border-bottom: none;
    font-weight: 600;
    background: var(--shade);
}

/* Kanalmarke: farbige Kante links – trägt die Kanalzugehörigkeit durch alle Tabellen */
.spine { border-left: 3px solid var(--rule-2); padding-left: calc(var(--u) * 3); }

.chip {
    display: inline-block;
    font: 500 11px/1.6 var(--sans);
    padding: 0 6px;
    border: 1px solid var(--rule-2);
    color: var(--ink-2);
    white-space: nowrap;
}
.chip--ok   { border-color: var(--ok);     color: var(--ok); }
.chip--warn { border-color: var(--signal); color: var(--signal); }
.chip--bad  { border-color: var(--bad);    color: var(--bad); }

/* Vorschaubilder der Beiträge. Quadratischer Ausschnitt, damit Hoch- und
   Querformate in der Liste gleich hoch stehen. */
.thumb {
    display: block;
    width: 64px;
    height: 64px;
    object-fit: cover;
    border: 1px solid var(--rule);
    background: var(--shade);
}
.thumb--sm { width: 52px; height: 52px; }
.thumb--empty {
    background: repeating-linear-gradient(135deg,
        var(--shade) 0 4px, var(--surface) 4px 8px);
}

.caption {
    margin-top: 6px;
    font-size: 13px;
}
.caption summary {
    cursor: pointer;
    color: var(--ink-2);
    font-size: 12px;
}
.caption p {
    margin: 8px 0 0;
    padding: 10px 12px;
    background: var(--shade);
    border: 1px solid var(--rule);
    color: var(--ink);
    max-width: 620px;
}

/* Kurzfassungen mit Verweis auf die Detailseiten. */
.teasers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
    border-top: 1px solid var(--rule);
}
.teaser {
    display: block;
    padding: calc(var(--u) * 5);
    border-right: 1px solid var(--rule);
    text-decoration: none;
    color: var(--ink);
}
.teaser:last-child { border-right: 0; }
.teaser:hover { background: var(--shade); }
.teaser strong { display: block; font-size: 15px; margin-bottom: calc(var(--u) * 2); }
.teaser__value {
    display: block;
    font: 600 24px/1.1 var(--sans);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    color: var(--brand-text);
}
.teaser__sub { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-2); }

/* Anfragetrichter. Die Balkenbreite zeigt den Anteil an der ersten Stufe –
   der Schwund zwischen den Stufen ist die eigentliche Aussage. */
.funnel { padding: calc(var(--u) * 5) calc(var(--u) * 5) calc(var(--u) * 2); }
.funnel__step { position: relative; margin-bottom: calc(var(--u) * 3); }
.funnel__bar {
    height: 46px;
    background: var(--brand);
    opacity: 0.14;
    border-left: 3px solid var(--brand);
}
.funnel__step:nth-child(2) .funnel__bar { opacity: 0.22; }
.funnel__step:nth-child(3) .funnel__bar { opacity: 0.34; }
.funnel__text {
    position: absolute;
    top: 0;
    left: calc(var(--u) * 4);
    height: 46px;
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 3);
    white-space: nowrap;
}
.funnel__text strong {
    font: 600 20px/1 var(--sans);
    font-variant-numeric: tabular-nums;
}
.funnel__text span { font-size: 14px; }
.funnel__text em { font-style: normal; font-size: 13px; color: var(--ink-2); }

.nav__foot {
    margin-top: auto;
    padding: calc(var(--u) * 5);
    font-size: 12px;
    line-height: 1.6;
    color: rgba(255,255,255,0.38);
    border-top: 1px solid rgba(255,255,255,0.08);
}

.spark--wide { width: 160px; }
.spark--wide i { width: auto; }

/* Aufklappbare Menügruppen. Der Pfeil ist selbst gesetzt, weil die
   Standardmarkierung je nach Browser unterschiedlich aussieht. */
.nav__cat > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
}
.nav__cat > summary::-webkit-details-marker { display: none; }
.nav__cat > summary::after {
    content: '';
    width: 5px;
    height: 5px;
    margin-right: 2px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    opacity: 0.5;
    transition: transform 0.15s;
}
.nav__cat[open] > summary::after {
    transform: rotate(-135deg) translate(-2px, -2px);
}
.nav__cat > summary:hover { color: rgba(255, 255, 255, 0.85); }

/* Eine zugeklappte Gruppe mit aktiver Seite gäbe es nicht – sie bleibt
   offen. Der Rand markiert trotzdem, wo man steht. */
.nav__cat[open] { padding-bottom: calc(var(--u) * 2); }

/* Vorschlaege aus der Rechnung. Sichtbar abgesetzt, damit klar ist:
   das ist noch nicht gespeichert. */
.suggest {
    margin: calc(var(--u) * 4) 0;
    padding: calc(var(--u) * 4);
    background: var(--brand-soft);
    border: 1px solid var(--rule);
}
.suggest__head { font-size: 13px; margin-bottom: calc(var(--u) * 3); }
.suggest__row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(var(--u) * 2);
    margin-bottom: calc(var(--u) * 2);
}
.suggest__label {
    font-size: 12px;
    color: var(--ink-2);
    min-width: 64px;
}
.chip--click {
    cursor: pointer;
    border-color: var(--brand);
    background: #FFF;
    font: inherit;
    font-size: 12px;
}
.chip--click:hover { background: var(--brand); color: #FFF; }
.chip--gewaehlt { background: var(--brand); color: #FFF; }
.feld--uebernommen { border-color: var(--brand); }

/* Leiste fuer die Mehrfachauswahl. Klebt am unteren Rand der Tabelle,
   damit sie auch bei langen Listen erreichbar bleibt. */
.sammel {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 3);
    padding: calc(var(--u) * 3) calc(var(--u) * 5);
    background: var(--ink);
    color: #FFF;
    border-top: 1px solid var(--rule);
}
.sammel__zahl { font-size: 13px; white-space: nowrap; }
.sammel__zahl b { font-size: 15px; }
.sammel select {
    background: #FFF;
    border: 1px solid var(--rule);
    padding: 6px 8px;
    font: inherit;
    font-size: 13px;
}
.sammel .note { color: rgba(255,255,255,0.55); font-size: 12px; }

/* Griff zum Sortieren. Nur hier ziehbar – sonst startet jeder Klick auf
   einen Link einen Ziehvorgang. */
.griff {
    cursor: grab;
    color: var(--ink-3);
    user-select: none;
    text-align: center;
    letter-spacing: 1px;
}
.griff:active { cursor: grabbing; }
tr.zieht { opacity: 0.4; background: var(--brand-soft); }

/* Websiteschalter im Kopf – neben der Ueberschrift, nicht in der
   Filterleiste: Er wechselt den Blickwinkel, er filtert nicht. */
.head__switch {
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 2);
    font-size: 13px;
}
.head__switch select {
    border: 1px solid var(--rule);
    background: #FFF;
    padding: 6px 8px;
    font: inherit;
    font-size: 13px;
}

/* Redaktionskalender. Sieben Spalten, montags beginnend. */
.kal {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-top: 1px solid var(--rule);
}
.kal__wt {
    padding: 8px 10px;
    font: 600 11px/1 var(--sans);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-2);
    border-bottom: 1px solid var(--rule);
    border-right: 1px solid var(--rule);
}
.kal__wt:nth-child(7n) { border-right: 0; }
.kal__tag {
    min-height: 108px;
    padding: 6px;
    border-bottom: 1px solid var(--rule);
    border-right: 1px solid var(--rule);
}
.kal__tag:nth-child(7n) { border-right: 0; }
.kal__tag--fremd { background: #FAFBFC; }
.kal__tag--fremd .kal__zahl { color: var(--ink-3); }
.kal__tag--heute { background: var(--brand-soft); }
.kal__zahl {
    font: 600 12px/1 var(--sans);
    color: var(--ink-2);
    margin-bottom: 5px;
}

/* Ein Beitrag im Kalender. Der farbige Streifen links zeigt den Status –
   bei zwanzig Beitraegen im Monat sieht man so auf einen Blick, was
   noch offen ist. */
.kal__pos {
    display: block;
    margin-bottom: 3px;
    padding: 3px 5px 3px 7px;
    font-size: 11px;
    line-height: 1.35;
    text-decoration: none;
    color: var(--ink);
    background: #FFF;
    border: 1px solid var(--rule);
    border-left: 3px solid var(--ink-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kal__pos:hover { background: var(--brand-soft); }
.kal__pos b { font-weight: 600; margin-right: 3px; color: var(--ink-2); }

.kal__pos--planung   { border-left-color: #AEB7BF; }
.kal__pos--arbeit    { border-left-color: #E2A03F; }
.kal__pos--pruefung  { border-left-color: #4A7DBD; }
.kal__pos--geplant   { border-left-color: #7B5EA7; }
.kal__pos--fertig    { border-left-color: var(--brand); }
.kal__pos--verworfen { border-left-color: #C0453B; opacity: 0.55; }

.kal__legende {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 12px 20px;
    font-size: 12px;
    color: var(--ink-2);
}
.kal__legende span { display: flex; align-items: center; gap: 6px; }
.kal__legende i {
    width: 3px;
    height: 13px;
    border-left: 3px solid;
    display: inline-block;
}

.tabs { display: flex; gap: 2px; }
.tab {
    font: 500 12px/1 var(--sans);
    padding: calc(var(--u) * 2) calc(var(--u) * 3);
    background: transparent;
    border: 1px solid var(--rule);
    color: var(--ink-2);
    cursor: pointer;
    border-radius: 0;
}
.tab:hover { background: var(--shade); color: var(--ink); }
.tab--on {
    background: var(--ink);
    border-color: var(--ink);
    color: #FFF;
}

.spark { display: flex; align-items: flex-end; gap: 2px; height: 24px; }
.spark i {
    display: block;
    width: 6px;
    background: var(--rule-2);
    min-height: 1px;
}
.spark i:last-child { background: var(--brand); }

.row-danger td { background: #FDF3F2; }
.row-danger td:first-child { border-left: 3px solid var(--bad); }

.delta-ok  { color: var(--ok); }
.delta-bad { color: var(--bad); }
.muted     { color: var(--ink-3); }

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

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--u) * 2);
    align-items: flex-end;
    padding: calc(var(--u) * 4) calc(var(--u) * 5);
    background: var(--surface);
    border: 1px solid var(--rule);
    margin-bottom: calc(var(--u) * 5);
}

.field { display: flex; flex-direction: column; gap: calc(var(--u)); }
.field > label {
    font: 600 11px/1 var(--sans);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ink-2);
}
.field--wide { grid-column: 1 / -1; }

input[type=text], input[type=number], input[type=date], input[type=month],
input[type=password], input[type=file], select, textarea {
    font: 14px/1.4 var(--sans);
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--rule-2);
    border-radius: 0;
    padding: calc(var(--u) * 2) calc(var(--u) * 2.5);
    min-width: 0;
    width: 100%;
}
input.mono { font-family: var(--mono); }
input[type=number] { font-variant-numeric: tabular-nums; }
textarea { min-height: 84px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--ink); }

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: calc(var(--u) * 4);
}

.presets {
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 2);
    flex-wrap: wrap;
    margin-top: calc(var(--u) * 3);
}
.presets__label {
    font: 600 11px/1 var(--sans);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ink-2);
}

.actions {
    display: flex;
    gap: calc(var(--u) * 3);
    align-items: center;
    flex-wrap: wrap;
    margin-top: calc(var(--u) * 5);
    padding-top: calc(var(--u) * 4);
    border-top: 1px solid var(--rule);
}
.actions--right { justify-content: flex-end; }

.btn {
    display: inline-block;
    font: 13px/1 var(--sans);
    font-weight: 500;
    letter-spacing: 0.01em;
    padding: calc(var(--u) * 2.5) calc(var(--u) * 4);
    border: 1px solid var(--ink);
    background: var(--ink);
    color: #FFF;
    cursor: pointer;
    text-decoration: none;
    border-radius: 0;
}
.btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--shade); }
.btn--danger { background: transparent; border-color: var(--bad); color: var(--bad); }
.btn--danger:hover { background: var(--bad); color: #FFF; }
.btn--small { padding: calc(var(--u) * 1.5) calc(var(--u) * 2.5); font-size: 12px; }

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

.flash {
    padding: calc(var(--u) * 3) calc(var(--u) * 4);
    border-left: 3px solid var(--ok);
    background: var(--surface);
    border-top: 1px solid var(--rule);
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    margin-bottom: calc(var(--u) * 5);
    font-size: 14px;
}
.flash--bad { border-left-color: var(--bad); }

.empty {
    padding: calc(var(--u) * 10) calc(var(--u) * 5);
    text-align: center;
    color: var(--ink-2);
}
.empty p { margin: 0 0 calc(var(--u) * 4); }

.note {
    font-size: 13px;
    color: var(--ink-2);
    margin: calc(var(--u) * 2) 0 0;
}

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

.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: calc(var(--u) * 5);
}
.login {
    width: 100%;
    max-width: 340px;
    background: var(--surface);
    border: 1px solid var(--rule);
    padding: calc(var(--u) * 8);
}
.login h1 { margin: 0 0 calc(var(--u) * 2); font-size: 18px; }
.login p { margin: 0 0 calc(var(--u) * 6); color: var(--ink-2); font-size: 13px; }

/* ---------------------------------------------------------------- Klein */

/* --- Kopfleiste fuer schmale Bildschirme --------------------------------
   Auf dem Rechner unsichtbar. Dort steht das Menue links und braucht keinen
   Schalter. */
.mobilbar { display: none; }

@media (max-width: 900px) {
    .mobilbar {
        display: flex;
        align-items: center;
        gap: calc(var(--u) * 3);
        position: sticky;
        top: 0;
        z-index: 40;
        padding: calc(var(--u) * 3) calc(var(--u) * 4);
        background: var(--ink);
        color: #FFF;
    }
    .mobilbar__titel {
        flex: 1;
        font: 600 15px/1.2 var(--sans);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .mobilbar__jahr {
        font: 13px/1 var(--mono);
        color: #808C96;
    }

    /* Der Schalter. Drei Striche, die sich beim Oeffnen zum Kreuz drehen –
       die Bewegung macht den Zusammenhang zwischen Knopf und Menue
       deutlich. */
    /* Der Schalter liegt ueber der Schublade. Sonst deckt bei geoeffnetem
       Menue das Logo den Knopf ab und man kommt nicht mehr heraus – genau
       das ist beim Pruefen passiert. */
    .mobilbar { position: sticky; }
    .mobilbar__knopf {
        position: relative;
        z-index: 60;
        width: 40px;
        height: 40px;
        margin: -8px 0 -8px -8px;
        padding: 10px 8px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background: none;
        border: 0;
        cursor: pointer;
    }
    .mobilbar__knopf span {
        display: block;
        height: 2px;
        background: #FFF;
        transition: transform 0.18s, opacity 0.18s;
    }
    .menue-offen .mobilbar__knopf span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .menue-offen .mobilbar__knopf span:nth-child(2) { opacity: 0; }
    .menue-offen .mobilbar__knopf span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* Menue als Schublade. Es liegt ueber dem Inhalt statt ihn zu
       verschieben – so bleibt die Leseposition erhalten. */
    .shell { flex-direction: column; }

    .nav {
        position: fixed;
        /* Unterhalb der Kopfleiste, damit der Schalter frei bleibt. */
        top: 52px;
        left: 0;
        bottom: 0;
        width: min(300px, 84vw);
        z-index: 50;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.28);
    }
    .menue-offen .nav { transform: translateX(0); }

    /* Abdunkeln, was dahinterliegt. Ein Tippen daneben schliesst. */
    .menue-offen::after {
        content: '';
        position: fixed;
        inset: 52px 0 0 0;
        z-index: 45;
        background: rgba(21, 25, 29, 0.5);
    }

    .nav__group { display: block; }
    .nav__year { border-bottom: 1px solid #2A3138; }

    .main { padding: calc(var(--u) * 4) calc(var(--u) * 4) calc(var(--u) * 12); }

    /* Zwei Kacheln nebeneinander statt einer. Bei sechs Kennzahlen sind
       drei Reihen ueberschaubar, sechs waeren eine Rutschpartie. */
    .figures { grid-template-columns: repeat(2, 1fr); }

    /* Bleibt in der letzten Reihe eine Kachel allein, nimmt sie die volle
       Breite – eine leere Zelle daneben sieht aus wie ein Fehler. */
    .figure:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .figure { padding: calc(var(--u) * 3); }
    .figure__value { font-size: 22px; }
    .figure__sub { font-size: 11px; }

    /* Diagramme: niedriger und mit weniger Beschriftung, sonst ueberlagern
       sich die Achsentexte. */
    .rail__grid { height: 150px; }
    .rail__tick { font-size: 9px; }

    /* Jede zweite Monatsbeschriftung ausblenden – zwoelf Kuerzel auf
       390 Pixeln ueberlappen sonst. */
    .rail__label:nth-child(even) { visibility: hidden; }

    /* Tabellen seitlich schiebbar, statt die Seite zu sprengen. */
    .table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .table-wrap table { min-width: 620px; }

    /* Kopfzeile der Seiten untereinander. */
    .head { flex-wrap: wrap; gap: calc(var(--u) * 2); }
    .head h1 { font-size: 24px; }

    /* Filterleisten umbrechen lassen. */
    .filters { flex-wrap: wrap; gap: calc(var(--u) * 2); }
    .filters .field { flex: 1 1 140px; }

    /* Formulare einspaltig. */
    .grid { grid-template-columns: 1fr; }

    /* Kalender: schmaler, mit kleinerer Schrift – sieben Spalten bleiben,
       weil eine Wochenansicht den Ueberblick zerstoert. */
    .kal__tag { min-height: 74px; padding: 3px; }
    .kal__pos { font-size: 9px; padding: 2px 3px 2px 5px; }
    .kal__zahl { font-size: 10px; }
    .kal__wt { padding: 5px 3px; font-size: 9px; }
}

/* --- Sehr schmale Geraete ---------------------------------------------- */
@media (max-width: 420px) {
    /* Eine Kachel je Zeile waere zu wenig Uebersicht, aber die Werte
       brauchen Platz. */
    .figure__value { font-size: 20px; }
    .main { padding-left: calc(var(--u) * 3); padding-right: calc(var(--u) * 3); }
}

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

@media print {
    .nav, .filters, .actions, .btn { display: none; }
    .main { padding: 0; }
    .card { border-color: #000; break-inside: avoid; }
    body { background: #FFF; }
}