/* ============================================================================
   DOMI Exclusiv - Gestaltungssystem (EIN Stylesheet für ALLE drei Oberflächen)
   ----------------------------------------------------------------------------
   Verbindliche Grundlage ist docs/DESIGN.md. Hier wird NICHTS erfunden: Farben,
   Schriftgrößen, Abstände, Radien und Schatten stehen dort, dieses Blatt setzt
   sie um.

   Warum eine einzige Datei statt drei:
   Innendienst (layouts/app), Anmeldung (auth/_authlayout) und Fachberater-Portal
   (portal/layout) sollen sich nicht auseinanderentwickeln. Drei Stylesheets sind
   erfahrungsgemäß nach einem halben Jahr drei verschiedene Anwendungen. Die
   Besonderheiten des Portals (größere Klickflächen, mobil zuerst) stehen deshalb
   weiter unten als eigener ABSCHNITT in dieser Datei.

   Eingebunden wird sie IMMER über App\Support\Assets::v('css/app.css') - der
   angehängte Änderungszeitpunkt zwingt den Browser nach einem Deploy zum
   Neuladen. Ein nackter Pfad führt dazu, dass einzelne Anwender wochenlang mit
   einer alten Fassung arbeiten.

   Gliederung:
     1  Token (Farben, Schrift, Abstände, Radien, Schatten)
     2  Grundlagen (Reset, Grundtext, Typografie-Skala, Fokus)
     3  Symbole (SVG-Sprite)
     4  Gerüst Innendienst (Seitenleiste, Kopfzeile, Inhalt)
     5  Bausteine (Karte, Knopf, Feld, Feldraster, Tabelle, Zahl, Pille,
        Leerzustand, Hinweis)
     6  Listenbausteine (Listenkopf, Suche, Chips, Filter, Sortierkopf,
        Blättern, Zeileninhalte, Kachelreihe, Reiter)
     7  Formular- und Detailbausteine (Abschnitt, Weiche, Summenleiste,
        Zeitleiste, Sprungnav, Einstellungen-Layout, Summenblock, Kette,
        Combobox)
     8  Meldungen und Sonderbausteine
     9  Übergangs-Aliase (alte Klassennamen)
    10  Anmeldung
    11  Fachberater-Portal
    12  Schmale Bildschirme
    13  Bewegung reduzieren / Druck
   ========================================================================== */

/* ==========================================================================
   1  TOKEN
   ========================================================================== */

:root {
    /* --- Hausfarben: Petrol/Teal. Farbe trägt Bedeutung, sie dekoriert nicht. */
    --petrol-900: #0E2A36;
    --petrol-800: #123240;
    --petrol-700: #173A4A;   /* Grundtext, Seitenleiste */
    --petrol-500: #3D6376;   /* Nebentext */
    --petrol-300: #7D97A4;   /* Beschriftungen - erfüllt 4,5:1 auf Weiß */
    --petrol-100: #D9E4E9;

    --teal-600: #0E7A70;
    --teal-500: #17A79B;     /* Primäraktion - höchstens eine je Bildschirm */
    --teal-100: #E4F5F3;

    --gold-600: #C99400;     /* „Achtung, ein Mensch muss schauen" */
    --gold-500: #F2B705;
    --gold-100: #FDF3D3;

    --rot-600: #B23B31;      /* Geld weg oder Fehler - nie Dekoration */
    --rot-500: #E0564A;
    --rot-100: #FBE7E4;

    --gruen-600: #2F7D57;    /* erledigt */
    --gruen-500: #3FA372;
    --gruen-100: #E3F4EB;

    /* --- BEREICHSFARBEN (seit v1.24.0, Vorgabe GL 03.09.2026 "etwas bunter").
           Jeder Menuebereich hat einen eigenen Ton. Das ist ORIENTIERUNG, nicht
           Dekoration: Die Farbe beantwortet "wo bin ich?" - in der Seitenleiste,
           am Seitenkopf und an den Kennzahlen des Bereichs.

           STRENG GETRENNT von den Statusfarben: Rot bleibt "Geld weg/Fehler",
           Gold "ein Mensch muss schauen", Gruen "erledigt". Bereichsfarben
           erscheinen NIE an einer Pille, einem Betrag oder einer Statuszeile -
           sonst waere nicht mehr unterscheidbar, ob Farbe warnt oder verortet.

           Alle acht Toene liegen in derselben Helligkeit/Saettigung: auf dem
           dunklen Petrol der Leiste lesbar (>= 4,5:1) und auf Weiss als
           Akzentstrich ruhig. */
    --b-verkauf:    #17A79B;   /* Teal - das Kerngeschaeft, wie gehabt */
    --b-crm:        #7C93F0;   /* Indigo - Menschen und Adressen */
    --b-qualitaet:  #B084E9;   /* Violett - Compliance, Pruefung */
    --b-finanzen:   #F0B54A;   /* Bernstein - Geld (NICHT das Warngold) */
    --b-logistik:   #4FB0E0;   /* Azur - Bewegung, Versand */
    --b-stammdaten: #9FB0D4;   /* Lavendelgrau - Ruhendes, Kataloge */
    --b-auswertung: #E07BA8;   /* Rosé - Zahlen und Berichte */
    --b-system:     #90A6B4;   /* Nebel - Verwaltung */

    /* Dieselben acht Toene als DUNKLE Geschwister. Grund: Die hellen Toene
       oben sind fuer die dunkle Seitenleiste gemacht (dort 4,0-6,6:1) und
       erreichen auf WEISS nur 1,8-3,0:1 - als Flaeche und Balken genug, als
       Text oder Kennzahl aber zu blass. Regel deshalb:
         heller Ton  -> Symbole, Balken, Flaechen (auf dunklem Grund)
         dunkler Ton -> Text, Ziffern, Beschriftungen (auf hellem Grund)
       Alle Dunkeltoene liegen ueber 4,5:1 auf Weiss. */
    --b-verkauf-600:    #0E7A70;
    --b-crm-600:        #3F55B5;
    --b-qualitaet-600:  #7A4BB8;
    --b-finanzen-600:   #96690A;
    --b-logistik-600:   #1D7CA6;
    --b-stammdaten-600: #5C6E96;
    --b-auswertung-600: #B0447A;
    --b-system-600:     #566C7A;

    /* Der Ton des gerade betrachteten Bereichs. Das Layout setzt ihn am
       <body>; alles darunter erbt ihn ueber var(--bereich). */
    --bereich: var(--teal-500);

    --flaeche: #FFFFFF;
    --papier: #F5F8F9;
    --linie: #E3EBEF;

    /* --- Schrift: Systemschriften. Kein externer Font, keine Ladezeit,
           keine Datenschutzfrage. */
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-num: "SF Mono", "Segoe UI Mono", "Roboto Mono", ui-monospace, monospace;

    --t-xs: 11px;
    --t-sm: 12.5px;
    --t-md: 13.5px;          /* Grundtext */
    --t-lg: 15px;
    --t-xl: 18px;
    --t-2xl: 22px;

    --lh-xs: 1.45;
    --lh-sm: 1.5;
    --lh-md: 1.55;
    --lh-lg: 1.45;
    --lh-xl: 1.35;
    --lh-2xl: 1.3;

    /* --- Abstände: 4-px-Raster, sonst nichts. */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;
    --s-7: 48px;

    /* --- Radien und Höhe */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-full: 999px;

    --schatten-1: 0 1px 2px rgba(16, 42, 54, .06), 0 1px 3px rgba(16, 42, 54, .04);
    --schatten-2: 0 2px 8px rgba(16, 42, 54, .08), 0 1px 3px rgba(16, 42, 54, .04);

    /* --- Maße des Gerüsts */
    --sbw: 260px;            /* Breite der Seitenleiste */
    --kopf-h: 53px;          /* Höhe der klebenden Kopfzeile */
    --klick: 32px;           /* kleinste Klickfläche Innendienst */

    /* ------------------------------------------------------------------
       ÜBERGANG: Aliase der alten Variablennamen.
       Hunderte bestehende Views tragen noch style="color:var(--muted)" o. ä.
       Diese Namen bleiben deshalb bestehen und zeigen jetzt auf die neuen
       Werte - dadurch verbessert sich der Kontrast überall auf einmal, ohne
       eine einzige View anzufassen. Neue Ansichten benutzen die Token oben.
       ------------------------------------------------------------------ */
    --teal: var(--teal-500);
    --teal-dk: var(--teal-600);
    --teal-soft: var(--teal-100);
    --yellow: var(--gold-500);
    --yellow-dk: var(--gold-600);
    --yellow-soft: var(--gold-100);
    --petrol: var(--petrol-700);
    --navy: var(--teal-600);
    --navy-2: var(--teal-500);
    --accent: var(--teal-500);
    --ink: var(--petrol-700);
    --soft: var(--petrol-500);
    --muted: var(--petrol-300);      /* alter Grauton erfüllte 4,5:1 nicht */
    --line: var(--linie);
    --line-2: var(--linie);
    --paper: var(--papier);
    --surface: var(--flaeche);
    --go: var(--gruen-600);
    --go-bg: var(--gruen-100);
    --warn: var(--gold-600);
    --risk: var(--rot-500);
    --radius: var(--r-md);
}

/* ==========================================================================
   2  GRUNDLAGEN
   ========================================================================== */

* { box-sizing: border-box; }

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

/* Ausgeblendetes bleibt ausgeblendet - auch dann, wenn ein Raster weiter unten
   für dasselbe Element ein display setzt. Ohne diese Regel taucht z. B. eine
   ausgeblendete Aufklappzeile wieder auf, sobald sie Rasterkind wird. */
[hidden] { display: none !important; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--t-md);
    line-height: var(--lh-md);
    background: var(--papier);
    color: var(--petrol-700);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Zahlen laufen IMMER in Tabellenziffern. Ohne das springen Beträge in
   Spalten und lassen sich nicht überfliegen - in einer Warenwirtschaft ist
   das kein Schönheitsfehler, sondern ein Arbeitsfehler. */
body,
input,
select,
textarea,
button,
table {
    font-variant-numeric: tabular-nums;
}

a {
    color: var(--teal-600);
    text-decoration: none;
}

a:hover { text-decoration: underline; }

/* --- Typografie-Skala. Überschriften kommen aus dem System, nicht aus
       Inline-Stilen der einzelnen Ansicht. */
h1, h2, h3, h4 {
    margin: 0 0 var(--s-3);
    color: var(--petrol-700);
    font-weight: 700;
    letter-spacing: -.01em;
}

h1 { font-size: var(--t-2xl); line-height: var(--lh-2xl); }
h2 { font-size: var(--t-xl);  line-height: var(--lh-xl); }
h3 { font-size: var(--t-lg);  line-height: var(--lh-lg); }
h4 { font-size: var(--t-md);  line-height: var(--lh-md); }

p { margin: 0 0 var(--s-3); }

/* Aufzählungen: gleicher Rhythmus wie Absätze, Einzug aus dem 4-px-Raster. */
ul, ol { margin: 0 0 var(--s-3); padding-left: var(--s-5); }
li { margin-bottom: var(--s-1); }
li:last-child { margin-bottom: 0; }

small, .klein { font-size: var(--t-sm); line-height: var(--lh-sm); }

/* Technischer Bezeichner im Fließtext (Einstellungsschlüssel, Dateiname). */
code, kbd {
    font-family: var(--font-num);
    font-size: .92em;
    padding: 1px 4px;
    border-radius: var(--r-sm);
    background: var(--papier);
}

.mini  { font-size: var(--t-xs); line-height: var(--lh-xs); }
.dezent { color: var(--petrol-300); }
.neben  { color: var(--petrol-500); }

/* Text, der nur für Vorleseprogramme da ist (Spaltenzweck, Sortierrichtung).
   Nicht display:none - was ausgeblendet ist, wird auch nicht vorgelesen. */
.nur-vorleser {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --- Fokus: sichtbar auf ALLEM Bedienbaren. Der Innendienst arbeitet mit der
       Tastatur; wer nicht sieht, wo er steht, arbeitet blind. */
:focus-visible {
    outline: 2px solid var(--teal-500);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

/* Dunkler Untergrund (Seitenleiste, Anmeldung): heller Ring statt Teal. */
aside :focus-visible,
.anmeldung-kopf :focus-visible {
    outline-color: #FFFFFF;
}

/* ==========================================================================
   3  SYMBOLE
   Einfarbig über currentColor, Strichstärke 1,75, 24er-Raster, keine Füllung.
   Die Definitionen liegen in resources/views/partials/icons.blade.php.
   ========================================================================== */

.ic {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -3px;
}

.ic-20 { width: 20px; height: 20px; }
.ic-24 { width: 24px; height: 24px; }

/* ==========================================================================
   4  GERÜST INNENDIENST
   ========================================================================== */

/* --- Seitenleiste: ruhig, eine Farbe, klare Gruppen. --------------------- */
aside {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    width: var(--sbw);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: var(--petrol-900);
    color: #C9DAE1;
    transform: translateX(0);
    transition: transform .22s ease;
}

aside .brand {
    padding: var(--s-5) var(--s-5) var(--s-4);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

aside .brand b {
    font-size: var(--t-xl);
    font-weight: 700;
    letter-spacing: .18em;
    color: #FFFFFF;
}

aside .brand span {
    display: block;
    margin-top: var(--s-1);
    font-size: var(--t-xs);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #8FB7C2;
}

nav.menu {
    flex: 1;
    padding: var(--s-3) 0 var(--s-4);
}

/* Menüpunkt */
.mi {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin: 1px var(--s-2);
    padding: var(--s-2) var(--s-3);
    min-height: var(--klick);
    border-radius: var(--r-sm);
    color: #C9DAE1;
    font-size: var(--t-md);
    line-height: 1.3;
    text-decoration: none;
}

.mi:hover {
    background: rgba(255, 255, 255, .07);
    color: #FFFFFF;
    text-decoration: none;
}

/* Aktiv: eindeutig, aber ohne Farbfläche über die halbe Leiste.
   Der Balken traegt seit v1.24.0 die BEREICHSFARBE (var(--bereich), von der
   Gruppe vererbt) - so sieht man an der Kante sofort, in welchem Bereich man
   arbeitet. Ohne gesetzte Gruppenfarbe bleibt es beim Teal. */
.mi.active {
    background: color-mix(in srgb, var(--bereich) 18%, transparent);
    color: #FFFFFF;
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--bereich);
}

.mi .ic { width: 20px; height: 20px; opacity: .85; }
.mi.active .ic { opacity: 1; color: var(--bereich); }

/* Das Gruppensymbol traegt den Bereichston - acht ruhige Farbpunkte statt
   einer grauen Liste. Der Text bleibt hell, damit die Leiste ruhig wirkt. */
details.grp > summary .ic { color: var(--bereich); opacity: 1; }
details.grp[open] > summary { color: #FFFFFF; }

/* Gruppe */
details.grp { margin-top: var(--s-3); }

details.grp summary {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-5) var(--s-1);
    cursor: pointer;
    list-style: none;
    user-select: none;
    font-size: var(--t-xs);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #7E9BA8;
}

details.grp summary::-webkit-details-marker { display: none; }

details.grp summary .ic { width: 16px; height: 16px; opacity: .7; }

details.grp summary .chev {
    margin-left: auto;
    display: inline-flex;
    transition: transform .15s ease;
    color: #5E7C8A;
}

details.grp summary .chev .ic { width: 14px; height: 14px; }
details.grp[open] summary .chev { transform: rotate(90deg); }

details.grp .mi { padding-left: var(--s-4); }

/* Neue Nachrichten: Punkt an der Gruppe (auch sichtbar, wenn zugeklappt),
   Zähler am Menüpunkt. */
.nav-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: var(--r-full);
    background: var(--rot-500);
    box-shadow: 0 0 0 3px rgba(224, 86, 74, .22);
    flex-shrink: 0;
}

.nav-badge {
    margin-left: auto;
    min-width: 18px;
    padding: 2px 6px;
    border-radius: var(--r-full);
    background: var(--rot-500);
    color: #FFFFFF;
    font-size: var(--t-xs);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    flex-shrink: 0;
}

.mi.active .nav-badge { background: #FFFFFF; color: var(--rot-600); }

aside .foot {
    padding: var(--s-4) var(--s-5);
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: var(--t-sm);
    color: #A8C0C9;
}

aside .foot a { color: #D5E5EA; }
aside .foot .wer { display: flex; align-items: center; gap: var(--s-2); }
aside .foot .abmelden { display: inline-flex; align-items: center; gap: var(--s-1); margin-top: var(--s-1); }
aside .foot .version { margin-top: var(--s-2); font-size: var(--t-xs); color: #7E9BA8; }
aside .foot .copy { margin-top: 2px; font-size: var(--t-xs); color: #7E9BA8; }
aside .foot form.verborgen { display: none; }

/* --- Hauptbereich ------------------------------------------------------- */
main {
    margin-left: var(--sbw);
    min-width: 0;
    min-height: 100vh;
    transition: margin .22s ease;
}

body.sb-closed aside { transform: translateX(-100%); }
body.sb-closed main { margin-left: 0; }

header.top {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-2) var(--s-5);
    min-height: var(--kopf-h);
    background: var(--flaeche);
    border-bottom: 1px solid var(--linie);
}

header.top h1 {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin: 0;
    font-size: var(--t-xl);
    line-height: var(--lh-xl);
    font-weight: 700;
    color: var(--petrol-700);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

header.top h1 .ic { width: 18px; height: 18px; color: var(--petrol-300); }

header.top .who {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    font-size: var(--t-sm);
    color: var(--petrol-500);
    white-space: nowrap;
}

/* Werkzeugknopf in der Kopfzeile (Menü, Glocke) - gleiche Maße, ruhig.
   .burger und .hinweis-btn sind die alten Namen und laufen als Alias mit. */
.kopf-btn,
.burger,
.hinweis-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    padding: 0;
    background: none;
    border: 1px solid var(--linie);
    border-radius: var(--r-sm);
    color: var(--petrol-700);
    cursor: pointer;
}

.kopf-btn:hover,
.burger:hover,
.hinweis-btn:hover { background: var(--papier); border-color: var(--petrol-100); }

/* Glocke: alle offenen Punkte gebündelt. */
.hinweis-wrap { position: relative; flex-shrink: 0; }

.hinweis-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--r-full);
    background: var(--rot-500);
    color: #FFFFFF;
    font-size: var(--t-xs);
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.hinweis-box {
    display: none;
    position: absolute;
    top: 42px;
    right: 0;
    z-index: 60;
    width: 300px;
    background: var(--flaeche);
    border-radius: var(--r-md);
    box-shadow: var(--schatten-2), 0 12px 32px rgba(16, 42, 54, .14);
    overflow: hidden;
}

.hinweis-box.open { display: block; }

.hinweis-head {
    padding: var(--s-2) var(--s-3);
    border-bottom: 1px solid var(--linie);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--petrol-300);
}

.hinweis-row {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-3);
    color: var(--petrol-700);
    font-size: var(--t-md);
    text-decoration: none;
    border-bottom: 1px solid var(--linie);
}

.hinweis-row:last-child { border-bottom: none; }
.hinweis-row:hover { background: var(--papier); text-decoration: none; }
.hinweis-row .ic { color: var(--petrol-300); }
.hinweis-row .hi-lbl { flex: 1; }

.hinweis-row .hi-cnt {
    padding: 1px var(--s-2);
    border-radius: var(--r-full);
    background: var(--rot-500);
    color: #FFFFFF;
    font-size: var(--t-xs);
    font-weight: 700;
}

.hinweis-empty {
    padding: var(--s-4) var(--s-3);
    font-size: var(--t-md);
    color: var(--petrol-300);
}

.backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(14, 42, 54, .45);
}

.content {
    padding: var(--s-5) var(--s-6);
    max-width: 1100px;
    min-width: 0;
}

/* ==========================================================================
   5  BAUSTEINE
   Klassennamen sind verbindlich (docs/DESIGN.md). Die alten Namen laufen als
   Alias mit, damit noch nicht umgestellte Ansichten nicht zerbrechen.
   ========================================================================== */

/* --- Karte: Schatten statt Rahmen. Ein Rahmen ist die Ausnahme. ---------- */
.karte,
.card {
    background: var(--flaeche);
    border: 0;
    border-radius: var(--r-lg);
    padding: var(--s-5);
    box-shadow: var(--schatten-1);
    transition: box-shadow .15s ease;
    /* Lange E-Mail-Adressen, IBANs oder Firmennamen liefen sonst aus der
       Karte heraus: Ein Grid-Element ist per Vorgabe min-width:auto und
       schrumpft nicht unter seinen längsten Inhalt. min-width:0 erlaubt
       das Schrumpfen, break-word bricht dann das zu lange Wort um. */
    min-width: 0;
    overflow-wrap: break-word;
}

.karte.gerahmt,
.card.gerahmt { box-shadow: none; border: 1px solid var(--linie); }

/* Abschlusskarte einer Aufstellung (Endsaldo eines Kontos): dunkel, damit das
   Ergebnis den Blick fängt. Höchstens eine je Seite. */
.karte.saldo { background: var(--petrol-700); color: #FFFFFF; }
.karte.saldo .hilfe { color: #9FC0CF; }
.karte.saldo :focus-visible { outline-color: #FFFFFF; }

/* Negativer Betrag auf dunklem Grund - --rot-600 hätte dort keinen Kontrast. */
.karte.saldo .num.minus { color: #FF9B90; }

.karte-kopf {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin: 0 0 var(--s-4);
}

.karte-kopf h2,
.karte-kopf h3 { margin: 0; flex: 1; min-width: 0; }

/* Ist die Kopfzeile der einzige Inhalt der Karte, entfällt ihr Abstand nach
   unten - sonst steht die Karte unten hohl. */
.karte-kopf:last-child { margin-bottom: 0; }

/* margin-left:auto statt „Titel flext": so stehen die Aktionen auch dann
   rechts, wenn links kein h2/h3 steht, sondern ein Textblock. */
.karte-kopf .aktionen { display: flex; gap: var(--s-2); flex-shrink: 0; margin-left: auto; }

/* Kennzahlenband und Kartenpaare. .cards ist das EINZIGE Raster des Hauses -
   Kennzahlreihe (Standard), zweispaltige Kartenpaare mit .zwei. Wer ein Raster
   braucht, nimmt das hier und schreibt kein eigenes grid-template in die View. */
.cards,
.karten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--s-4);
    margin-bottom: var(--s-5);
}

.cards.zwei,
.karten.zwei { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.karte .big,
.card .big {
    font-size: var(--t-2xl);
    line-height: var(--lh-2xl);
    font-weight: 700;
    color: var(--petrol-700);
    font-variant-numeric: tabular-nums;
}

/* Kennzahl mit Bedeutung. Farbe ist nie der alleinige Träger - unter der Zahl
   steht immer die Beschriftung. */
.karte .big.go,   .card .big.go   { color: var(--gruen-600); }
.karte .big.warn, .card .big.warn { color: var(--gold-600); }
.karte .big.risk, .card .big.risk { color: var(--rot-600); }
.karte .big.neutral, .card .big.neutral { color: var(--petrol-500); }

.karte .lbl,
.card .lbl {
    margin-top: var(--s-1);
    font-size: var(--t-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--petrol-300);
}

/* --- Knöpfe -------------------------------------------------------------
   .btn ist der SEKUNDÄRE Standard (weiß, Linie, Petrol-Text).
   Teal gefüllt ist ausdrücklich .btn.primaer - höchstens einer je Bildschirm.
   ------------------------------------------------------------------------ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: var(--klick);
    padding: var(--s-2) var(--s-4);
    background: var(--flaeche);
    color: var(--petrol-700);
    border: 1px solid var(--linie);
    border-radius: var(--r-sm);
    font-family: inherit;
    font-size: var(--t-md);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.btn:hover {
    background: var(--papier);
    border-color: var(--petrol-100);
    color: var(--petrol-900);
    text-decoration: none;
}

.btn:disabled,
.btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.btn .ic { width: 15px; height: 15px; }

.btn.primaer {
    background: var(--teal-500);
    border-color: var(--teal-500);
    color: #FFFFFF;
}

.btn.primaer:hover { background: var(--teal-600); border-color: var(--teal-600); color: #FFFFFF; }

.btn.gefahr {
    background: var(--rot-600);
    border-color: var(--rot-600);
    color: #FFFFFF;
}

.btn.gefahr:hover { background: #972F27; border-color: #972F27; color: #FFFFFF; }

.btn.leise {
    background: none;
    border-color: transparent;
    padding: var(--s-1) var(--s-2);
    min-height: 0;
    color: var(--teal-600);
    font-weight: 600;
}

.btn.leise:hover { background: var(--teal-100); color: var(--teal-600); }

.btn.klein { min-height: 0; padding: var(--s-1) var(--s-3); font-size: var(--t-sm); }

/* Aktiver Reiter einer Ansichtsleiste (Arbeitsvorrat / Entschieden / Alle).
   NICHT .primaer benutzen: Teal-Vollton ist der EINEN Primäraktion der Seite
   vorbehalten. Ein Reiter zeigt an, wo man ist - er ist keine Aktion. */
.btn.aktiv {
    background: var(--teal-100);
    border-color: var(--teal-500);
    color: var(--teal-600);
}

.btn.aktiv:hover { background: var(--teal-100); border-color: var(--teal-600); color: var(--teal-600); }

/* ÜBERGANG: Bestandsansichten färben .btn per style="background:…" ein und
   setzen dabei einen dunklen Ton voraus, weil .btn früher gefüllt war. Ohne
   diese Regel stünde dunkler Text auf dunklem Grund. Fällt weg, sobald die
   Inline-Stile aus den Ansichten verschwunden sind. */
.btn[style*="background"] { color: #FFFFFF; border-color: transparent; }
.btn[style*="background"]:hover { color: #FFFFFF; }

/* ÜBERGANG: nackter Text-Knopf aus dem Bestand. */
.btn-link {
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    font-size: var(--t-sm);
    color: var(--teal-600);
    cursor: pointer;
}

/* --- Formularfeld ------------------------------------------------------- */
.feld,
.field { margin-bottom: var(--s-4); }

label {
    display: block;
    margin: 0 0 var(--s-1);
    font-size: var(--t-sm);
    color: var(--petrol-500);
}

input,
select,
textarea {
    width: 100%;
    min-height: var(--klick);
    padding: var(--s-2) var(--s-3);
    background: var(--flaeche);
    color: var(--petrol-700);
    border: 1px solid var(--linie);
    border-radius: var(--r-sm);
    font-family: inherit;
    font-size: var(--t-md);
    line-height: 1.4;
}

input::placeholder,
textarea::placeholder { color: var(--petrol-300); }

input:hover,
select:hover,
textarea:hover { border-color: var(--petrol-100); }

input:focus,
select:focus,
textarea:focus {
    outline: 2px solid var(--teal-500);
    outline-offset: 1px;
    border-color: var(--teal-500);
}

input[type="checkbox"],
input[type="radio"] {
    width: auto;
    min-height: 0;
    padding: 0;
    accent-color: var(--teal-500);
}

input[disabled],
select[disabled],
textarea[disabled],
input[readonly] { background: var(--papier); color: var(--petrol-500); }

/* --- Feldraster ----------------------------------------------------------
   .cards ist das Raster der KENNZAHLKACHELN: minmax(180px,1fr), alle Spalten
   gleich schwer. Für Eingabefelder taugt das nicht - ein Datumsfeld und ein
   Freitextfeld haben nicht dasselbe Gewicht, und 180 px sind für ein Feld mit
   Beschriftung zu wenig. Deshalb hier ein eigenes, benanntes Raster.

   Verwendung:
     <div class="feld-reihe">        … bricht selbsttätig um …
     <div class="feld-reihe s2">     … genau zwei Spalten …
     <div class="feld-reihe s3"><div class="feld breit"> … 2 von 3 Spalten …

   Regel wie beim Kartenraster: KEIN eigenes grid-template in der Ansicht.
   ------------------------------------------------------------------------ */
.feld-reihe {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--s-3) var(--s-4);
    align-items: end;
    margin-bottom: var(--s-4);
}

/* Rasterkinder dürfen nicht über ihre Spalte hinauswachsen (lange Namen in
   einem <select> sprengen sonst die Zeile). */
.feld-reihe > * { min-width: 0; }

/* Im Raster trägt die Reihe den Abstand, nicht das einzelne Feld. */
.feld-reihe > .feld,
.feld-reihe > .field,
.feld-reihe > label { margin-bottom: 0; }

/* Feste Spaltenzahl: für Felder, die zusammen gelesen werden (PLZ/Ort,
   Von/Bis) und deshalb NICHT einzeln umbrechen sollen. Die Kurzformen .s2/.s3/
   .s4 sind die in den Ansichten verwendeten Namen; die ausgeschriebenen laufen
   gleichwertig mit, damit keine Ansicht nachgezogen werden muss. */
.feld-reihe.s2, .feld-reihe.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feld-reihe.s3, .feld-reihe.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feld-reihe.s4, .feld-reihe.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Ungleiche Breiten: ein Feld darf zwei bzw. drei Spalten einnehmen. So bekommt
   „Grund/Beschreibung" mehr Platz als „Datum", ohne dass die Ansicht ein
   eigenes Spaltenverhältnis erfindet. */
.feld-reihe > .breit  { grid-column: span 2; }
.feld-reihe > .breiter { grid-column: span 3; }
.feld-reihe > .voll   { grid-column: 1 / -1; }

/* Ein Knopf am Ende einer Erfassungszeile nimmt nur seine eigene Breite ein
   und steht auf derselben Grundlinie wie die Felder. */
.feld-reihe > .btn,
.feld-reihe > button { justify-self: start; }

/* Schmal wird jede Feldreihe einspaltig - nebeneinander stehende Felder sind
   auf 360 px unbedienbar. */
@media (max-width: 640px) {
    .feld-reihe,
    .feld-reihe.s2, .feld-reihe.zwei,
    .feld-reihe.s3, .feld-reihe.drei,
    .feld-reihe.s4, .feld-reihe.vier { grid-template-columns: 1fr; }

    .feld-reihe > .breit,
    .feld-reihe > .breiter,
    .feld-reihe > .voll { grid-column: auto; }
}

/* Zusammengehörige Felder/Kästchen als Block (z. B. eine Rechte-Gruppe in der
   Benutzermaske): Luft dazwischen, damit die Gruppen als Gruppen lesbar sind. */
.gruppe,
.rechte-gruppe { margin: 0 0 var(--s-5); }

.gruppe > h3,
.gruppe > legend,
.rechte-gruppe > h3,
.rechte-gruppe > legend {
    margin: 0 0 var(--s-2);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--petrol-300);
}

/* Hilfetext. Bewusst NICHT auf .feld beschränkt: er wird auch als Zweitzeile
   in einer Tabellenzelle oder als Beschriftung unter einem Knopf gebraucht. */
.hilfe {
    display: block;
    margin: var(--s-1) 0 0;
    font-size: var(--t-xs);
    line-height: var(--lh-xs);
    color: var(--petrol-300);
}

.feld.fehler input,
.feld.fehler select,
.feld.fehler textarea,
.field.fehler input,
.field.fehler select,
.field.fehler textarea { border-color: var(--rot-500); }

/* Fehlermeldung AM Feld - die bessere Darstellung als ein Sammelkasten oben,
   weil sie zeigt, wo das Problem liegt. .meldung ist der alte Name,
   .fehlermeldung der in den Formularansichten verwendete Zweitname. */
.fehlertext,
.fehlermeldung,
.feld.fehler .meldung,
.field.fehler .meldung {
    display: block;
    margin: var(--s-1) 0 0;
    font-size: var(--t-xs);
    line-height: var(--lh-xs);
    color: var(--rot-600);
}

/* --- Tabelle -------------------------------------------------------------
   Keine Zebrastreifen, klebende Kopfzeile, Zeile hebt sich beim Überfahren.
   border-collapse:separate ist Absicht: mit „collapse" verliert eine klebende
   Kopfzeile in Chrome ihre Linien.
   ------------------------------------------------------------------------ */
.tabelle,
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--flaeche);
    border-radius: var(--r-lg);
    box-shadow: var(--schatten-1);
}

.tabelle th,
.tabelle td,
table th,
table td {
    padding: var(--s-3) var(--s-4);
    text-align: left;
    font-size: var(--t-md);
    border-bottom: 1px solid var(--linie);
}

.tabelle th,
table th {
    position: sticky;
    top: var(--kopf-h);
    z-index: 2;
    background: var(--flaeche);
    color: var(--petrol-300);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.tabelle thead th:first-child,
table thead th:first-child { border-top-left-radius: var(--r-lg); }

.tabelle thead th:last-child,
table thead th:last-child { border-top-right-radius: var(--r-lg); }

.tabelle tbody tr:last-child td,
table tbody tr:last-child td { border-bottom: none; }

.tabelle tbody tr:hover td,
table tbody tr:hover td { background: var(--papier); }

/* Klebende Kopfzeilen gehören auf LISTENSEITEN (eine lange Tabelle, die man
   scrollend liest). Auf Detailseiten stehen mehrere kurze Tabellen in eigenen
   Karten untereinander - dort schwebte je Tabelle ein Kopf über den Inhalt und
   verdeckte die erste Zeile (gemeldet 17.08.2026). Deshalb: in `.karte.abschnitt`
   steht der Kopf still. */
.karte.abschnitt .tabelle th,
.karte.abschnitt table th {
    position: static;
    top: auto;
    z-index: auto;
}

/* Dasselbe gilt in einem waagrecht scrollbaren Behälter - und zwar aus einem
   anderen Grund: `overflow-x: auto` macht `.tabelle-wrap` zu einem eigenen
   Scroll-Bereich (steht eine Achse auf `auto`, wird die andere es auch).
   `position: sticky` bezieht sich dann auf DIESEN Behälter statt auf das
   Fenster - der Kopf rutscht um die Höhe der Seitenkopfzeile nach unten und
   verdeckt die erste Zeile. Gemeldet am 18.08.2026 an der Markenliste; betraf
   alle 55 Ansichten mit diesem Behälter. */
.tabelle-wrap .tabelle th,
.tabelle-wrap table th {
    position: static;
    top: auto;
    z-index: auto;
}

/* Anklickbare Zeilen erkennbar machen. */
tbody tr[onclick] { cursor: pointer; }

/* Hervorgehobene Zeilen (eskalierter Prüffall, überfällige Mahnung): dezent
   getönte Fläche plus farbige Kante links - NICHT die ganze Zeile einfärben,
   sonst schreit die Liste wieder gleichmäßig laut. Die Bedeutung muss auch
   ohne Farbe erkennbar sein: in der Zeile steht zusätzlich eine Pille.
   Beim Überfahren legt sich derselbe leichte Schleier darüber wie sonst. */
.tabelle tbody tr.warn td, table tbody tr.warn td { background: var(--gold-100); }
.tabelle tbody tr.risk td, table tbody tr.risk td,
.tabelle tbody tr.fehlversuch td, table tbody tr.fehlversuch td { background: var(--rot-100); }
.tabelle tbody tr.go   td, table tbody tr.go   td { background: var(--gruen-100); }

/* tr.fehlversuch (gescheiterte Anmeldung im Protokoll) ist fachlich genau
   „risk" - deshalb derselbe Zustand unter dem sprechenden Namen, kein neuer. */
tbody tr.fehlversuch > td:first-child { box-shadow: inset 3px 0 0 var(--rot-600); }

/* Folgezeile, die zur Zeile darüber gehört (Seite 2 von 3 eines Vertragsscans).
   BEWUSST KEIN Farbzustand: Rot heißt Fehler, Gold heißt „Mensch muss schauen" -
   eine Folgeseite ist beides nicht. Sie wird über die Einrückung und die
   durchlaufende Schiene links als Fortsetzung erkennbar. */
tbody tr.folgeseite > td { color: var(--petrol-500); }
tbody tr.folgeseite > td:first-child {
    padding-left: var(--s-6);
    box-shadow: inset 3px 0 0 var(--petrol-100);
}
/* Die Trennlinie zwischen Kopf- und Folgezeile entfällt - so bleibt die Gruppe
   als Block stehen. Browser ohne :has() zeigen lediglich die Linie weiter. */
tbody tr:has(+ tr.folgeseite) > td,
tbody tr.folgeseite:has(+ tr.folgeseite) > td { border-bottom-color: transparent; }

tbody tr.warn > td:first-child { box-shadow: inset 3px 0 0 var(--gold-600); }
tbody tr.risk > td:first-child { box-shadow: inset 3px 0 0 var(--rot-600); }
tbody tr.go   > td:first-child { box-shadow: inset 3px 0 0 var(--gruen-600); }

.tabelle tbody tr.warn:hover td, table tbody tr.warn:hover td,
.tabelle tbody tr.risk:hover td, table tbody tr.risk:hover td,
.tabelle tbody tr.go:hover   td, table tbody tr.go:hover   td {
    box-shadow: inset 0 0 0 100px rgba(16, 42, 54, .035);
}

.tabelle tbody tr.warn:hover > td:first-child, table tbody tr.warn:hover > td:first-child {
    box-shadow: inset 3px 0 0 var(--gold-600), inset 0 0 0 100px rgba(16, 42, 54, .035);
}
.tabelle tbody tr.risk:hover > td:first-child, table tbody tr.risk:hover > td:first-child {
    box-shadow: inset 3px 0 0 var(--rot-600), inset 0 0 0 100px rgba(16, 42, 54, .035);
}
.tabelle tbody tr.go:hover > td:first-child, table tbody tr.go:hover > td:first-child {
    box-shadow: inset 3px 0 0 var(--gruen-600), inset 0 0 0 100px rgba(16, 42, 54, .035);
}

/* Summenzeile am Fuß einer Tabelle: getönt und fett, damit sie sich vom
   Datenbereich abhebt, ohne eine weitere Farbe zu erfinden. */
.tabelle tfoot td,
table tfoot td {
    background: var(--papier);
    font-weight: 700;
    border-top: 1px solid var(--linie);
    border-bottom: none;
}

/* Eine Tabelle IN einer Karte braucht keinen zweiten Schatten. */
.karte .tabelle,
.karte table,
.card .tabelle,
.card table { box-shadow: none; }

/* Waagrechtes Scrollen gehört in den Behälter, NIE auf die Seite. */
.tabelle-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* --- Zahlen -------------------------------------------------------------- */
.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.num-mono { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* --- Pille (Status) ------------------------------------------------------
   Farbe ist nie der alleinige Bedeutungsträger - in der Pille steht Text.
   ------------------------------------------------------------------------ */
.pille,
.pill {
    display: inline-block;
    padding: 2px var(--s-2);
    border-radius: var(--r-full);
    font-size: var(--t-xs);
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
    background: var(--petrol-100);
    color: var(--petrol-700);
}

.pille.go,   .pill.go,   .pill.abgeschlossen { background: var(--gruen-100); color: var(--gruen-600); }
.pille.warn, .pill.warn                      { background: var(--gold-100);  color: var(--gold-600); }
.pille.risk, .pill.risk, .pill.storniert     { background: var(--rot-100);   color: var(--rot-600); }
.pille.neutral, .pill.neutral, .pill.offen   { background: var(--petrol-100); color: var(--petrol-700); }

/* --- Leerzustand: Symbol, ein Satz, ein Knopf. --------------------------- */
.leer {
    padding: var(--s-6) var(--s-5);
    text-align: center;
    color: var(--petrol-300);
    font-size: var(--t-md);
}

.leer .ic { width: 28px; height: 28px; color: var(--petrol-100); }
.leer p { margin: var(--s-3) 0 var(--s-4); }
.leer .btn { color: var(--petrol-700); }

/* --- Hinweiskasten ------------------------------------------------------- */
.hinweis {
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-md);
    font-size: var(--t-md);
    line-height: var(--lh-md);
    background: var(--petrol-100);
    color: var(--petrol-700);
    border-left: 3px solid var(--petrol-500);
}

.hinweis > p:last-child { margin-bottom: 0; }

/* ÜBERGANG: Ansichten schreiben teils class="hinweis hint". Ohne diese Regel
   stünde der blasse Hilfetext-Grauton auf getöntem Grund - zu wenig Kontrast. */
.hinweis.hint,
.hinweis .hint { color: var(--petrol-700); font-size: var(--t-sm); }

.hinweis.info    { background: var(--teal-100);  color: var(--petrol-700); border-left-color: var(--teal-600); }
.hinweis.warn    { background: var(--gold-100);  color: #6B4E00;           border-left-color: var(--gold-600); }
.hinweis.gefahr  { background: var(--rot-100);   color: var(--rot-600);    border-left-color: var(--rot-600); }
.hinweis.erfolg  { background: var(--gruen-100); color: var(--gruen-600);  border-left-color: var(--gruen-600); }

/* ==========================================================================
   6  LISTENBAUSTEINE
   Kopfzeile, Suche, aktive Filter, Filterleiste, Sortierkopf, Blättern,
   Zeileninhalte, Kachelreihe, Reiter.

   Diese Regeln standen übergangsweise als @once-Stylesheet in
   resources/views/partials/listenstile.blade.php, weil zwei Ansichten-Agents
   dieses Blatt nicht anfassen durften. Fachlich gehören sie hierher: sie
   beschreiben Bausteine, keine Ansichten. Bewusst nur RASTER und POSITION -
   Farben, Radien und Abstände kommen aus den Token oben.
   ========================================================================== */

/* --- Kopfzeile einer Liste: Suche/Filter links, Aktionen rechts ---------- */
.listen-kopf {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--s-4);
    flex-wrap: wrap;
    margin-bottom: var(--s-3);
}

.listen-kopf > form { flex: 1; min-width: 260px; }

/* Die Chipzeile gehört UNTER Suche und Aktionen, nicht dazwischen. */
.listen-kopf > .chips { flex: 1 0 100%; margin-bottom: 0; }

.listen-aktionen { display: flex; gap: var(--s-2); flex-wrap: wrap; flex-shrink: 0; }

.listen-titel { margin: var(--s-6) 0 var(--s-3); font-size: var(--t-lg); font-weight: 700; }

/* --- Suchleiste ---------------------------------------------------------- */
.suchleiste {
    display: flex;
    gap: var(--s-2);
    align-items: center;
    max-width: 520px;
    margin-bottom: var(--s-3);
}

.suchleiste .feld { margin: 0; flex: 1; }

/* Lupe im Feld, Löschknopf am rechten Rand - das Eingabefeld hält Platz frei. */
.feld.suche { position: relative; }
.feld.suche input { padding-left: 34px; padding-right: 34px; }

.feld.suche .suche-lupe {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--petrol-300);
}

.feld.suche .suche-weg {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--r-full);
    color: var(--petrol-300);
}

.feld.suche .suche-weg:hover { background: var(--papier); color: var(--petrol-700); }

/* --- Aktive Filter als entfernbare Chips --------------------------------- */
.chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-3);
    font-size: var(--t-sm);
    color: var(--petrol-300);
}

.chips-titel { font-weight: 700; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: 3px var(--s-2);
    border-radius: var(--r-full);
    background: var(--petrol-100);
    color: var(--petrol-700);
    font-size: var(--t-xs);
    line-height: 1.6;
    text-decoration: none;
    white-space: nowrap;
}

.chip:hover { background: var(--teal-100); color: var(--teal-600); text-decoration: none; }
.chip .chip-bez { color: var(--petrol-500); }
.chip .chip-wert { font-weight: 700; }
.chip .ic { width: 12px; height: 12px; }
.chip-alle { background: none; text-decoration: underline; }

/* --- Filterleiste über einer Tabelle ------------------------------------- */
.filterleiste { margin-bottom: var(--s-3); }
.filterleiste-zeile { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: flex-end; }
.filterleiste-zeile .feld { margin: 0; min-width: 140px; }
.filterleiste-zeile .feld.feld-breit { flex: 1; min-width: 200px; }
.filterleiste-knoepfe { display: flex; gap: var(--s-2); align-items: center; }

@media (max-width: 640px) {
    .filterleiste-zeile .feld { min-width: 100%; }
}

/* --- Sortierbarer Spaltenkopf -------------------------------------------- */
.sortbar { padding: 0 !important; }

.sortlink {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-3) var(--s-4);
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    font: inherit;
}

.sortbar.num .sortlink { justify-content: flex-end; }
.sortlink:hover { color: var(--teal-600); text-decoration: none; }
.sortpfeil { width: 12px; height: 12px; flex-shrink: 0; opacity: .25; }
.sortlink:hover .sortpfeil,
.sortlink:focus-visible .sortpfeil { opacity: .6; }

/* Aktive Spalte: kräftiger Pfeil UND kräftiger Text - nicht nur Farbe. */
.sort-aktiv .sortlink { color: var(--teal-600); }
.sort-aktiv .sortpfeil { opacity: 1; }

/* --- Blätter-Navigation --------------------------------------------------- */
.blaettern {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-3);
    flex-wrap: wrap;
    margin-top: var(--s-3);
}

.blaettern-info { margin: 0; font-size: var(--t-sm); color: var(--petrol-300); }
.blaettern-info .num { display: inline; }
.blaettern-seiten { display: flex; gap: var(--s-1); align-items: center; flex-wrap: wrap; }

.blatt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-1);
    min-width: 34px;
    height: 34px;
    padding: 0 var(--s-3);
    border: 1px solid var(--linie);
    border-radius: var(--r-md);
    background: var(--flaeche);
    color: var(--petrol-700);
    font-size: var(--t-sm);
    text-decoration: none;
}

.blatt:hover { background: var(--papier); text-decoration: none; }
.blatt .ic { width: 12px; height: 12px; }
.blatt.aus { color: var(--petrol-300); opacity: .55; cursor: not-allowed; }

.blatt.hier {
    background: var(--teal-600);
    border-color: var(--teal-600);
    color: #FFFFFF;
    font-weight: 700;
}

/* --- Leerzustand in der Tabelle ------------------------------------------ */
/* Der Leerzustand füllt die ganze Zeile; die Zelle steuert nichts bei. */
.leer-zeile td { padding: 0 !important; background: var(--flaeche); }
.leer-zeile:hover td { background: var(--flaeche); }

/* --- Zeileninhalte -------------------------------------------------------- */
.zeilen-aktionen {
    display: flex;
    gap: var(--s-2);
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    white-space: nowrap;
}

.zeilen-aktionen form { margin: 0; display: flex; gap: var(--s-1); align-items: center; }
.zeilen-formular { display: flex; flex-direction: column; gap: var(--s-1); margin: 0; }
.zeilen-notiz { display: block; font-size: var(--t-xs); color: var(--petrol-300); }
.zelle-text { max-width: 220px; white-space: normal; }

.ankreuz {
    display: flex;
    gap: var(--s-1);
    align-items: center;
    white-space: nowrap;
    margin: 0;
    font-size: var(--t-xs);
}

.ankreuz input { width: auto; }

/* Entwertete (stornierte) Belege bleiben lesbar, treten aber zurück. */
.entwertet td { opacity: .55; }

/* --- Kachelreihe über einer Liste (Zahl- und Lieferstand je Kunde) -------- */
.kachel { display: block; text-decoration: none; color: inherit; }
.kachel:hover { text-decoration: none; }
.kachel.aktiv { outline: 2px solid var(--teal-500); outline-offset: -1px; }
.kachel .big.risk { color: var(--rot-600); }
.kachel .big.warn { color: var(--gold-600); }
.kachel .big.neutral { color: var(--petrol-500); }

/* --- Reiterleiste (Statusfilter einer Liste) ----------------------------- */
.reiter { display: flex; gap: var(--s-1); flex-wrap: wrap; margin-bottom: var(--s-3); }
.reiter a { text-decoration: none; }
.reiter a:hover { text-decoration: none; }

/* --- Aufklappbare Zeile (Lagerbuchung) ----------------------------------- */
.aufklapp td { background: var(--papier); }
.aufklapp-inhalt { display: flex; gap: var(--s-5); flex-wrap: wrap; padding: var(--s-2) 0; }

.aufklapp-inhalt .umlagern {
    border-left: 1px solid var(--linie);
    padding-left: var(--s-5);
}

@media (max-width: 760px) {
    .aufklapp-inhalt .umlagern { border-left: none; padding-left: 0; }
}

/* --- Zahl mit Bedeutung ---------------------------------------------------
   Rot heißt „Geld weg", Gold „Mensch muss schauen", Grün „erledigt". Bewusst
   mit :where() (Spezifität 0), damit .num aus Abschnitt 5 die Ausrichtung
   behält und eine Pille ihre eigene Farbe behält.
   ------------------------------------------------------------------------ */
:where(td.risk, span.risk, .num.risk) { color: var(--rot-600); font-weight: 600; }
:where(td.warn, span.warn) { color: var(--gold-600); font-weight: 600; }
:where(td.go, span.go) { color: var(--gruen-600); font-weight: 600; }

/* Dieselbe Bedeutung an einer Zahl oder einem Hilfetext. Hier MUSS die
   Spezifität greifen: .hilfe und .num setzen selbst eine Farbe bzw. stehen in
   einer Zelle, die eine erbt. */
.num.risk, .hilfe.risk { color: var(--rot-600); }
.num.warn, .hilfe.warn { color: var(--gold-600); }
.num.go,   .hilfe.go   { color: var(--gruen-600); }

/* ==========================================================================
   7  FORMULAR- UND DETAILBAUSTEINE
   Abschnitt, Aktionsreihe, Weiche, klebende Summenleiste, Zeitleiste,
   Sprungnavigation, Betragsaufstellung, Fortschrittskette, Combobox.

   Herkunft wie Abschnitt 6: standen übergangsweise in
   resources/views/partials/formularstile.blade.php.
   ========================================================================== */

/* Abstand zwischen aufeinanderfolgenden Karten einer Detailseite.
   .karte selbst trägt bewusst keinen Außenabstand. */
.abschnitt { margin-bottom: var(--s-4); }

/* Sprungziel nicht unter Kopfzeile + klebender Sprungnavigation verstecken. */
.abschnitt[id] { scroll-margin-top: 120px; }

/* Zeile ÜBER dem ersten Abschnitt: Rückweg links, Seitenaktionen rechts.
   Das Gegenstück zu .listen-kopf auf einer Detail-/Formularseite. */
.abschnitt-kopf {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    flex-wrap: wrap;
    margin-bottom: var(--s-3);
}

.abschnitt-kopf > .aktionen,
.abschnitt-kopf > .listen-aktionen { margin-left: auto; }

/* Aktionsreihe außerhalb einer Kartenkopfzeile (dort gilt .karte-kopf .aktionen). */
.aktionen { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: flex-end; }
.aktionen form { margin: 0; }
.aktionsgruppe { margin-bottom: var(--s-4); }
.aktionsgruppe:last-child { margin-bottom: 0; }

.aktionsgruppe > .titel {
    margin-bottom: var(--s-2);
    font-size: var(--t-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--petrol-300);
}

/* Aufklapper, dessen Griff wie ein Knopf bzw. wie eine Überschrift aussieht.
   Ohne list-style:none behält Safari/Chrome zusätzlich das Dreieck. */
summary.btn { display: inline-flex; list-style: none; cursor: pointer; }
summary.btn::-webkit-details-marker { display: none; }
summary.listen-titel { cursor: pointer; }

/* Weiche: zwei gleichwertige Wege, von denen genau einer gilt. */
.weiche {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--s-3);
    margin-bottom: var(--s-4);
}

.weiche label {
    display: flex;
    gap: var(--s-2);
    align-items: flex-start;
    margin: 0;
    cursor: pointer;
    padding: var(--s-3);
    border: 1px solid var(--linie);
    border-radius: var(--r-md);
    background: var(--flaeche);
    color: var(--petrol-700);
    font-size: var(--t-md);
}

.weiche.eng {
    /* Bleibt bei EINER Wahlmöglichkeit kompakt, statt über die halbe Seite zu
       laufen (gemeldet 17.08.2026, nachdem „Lieferung & Montage" entfiel). */
    grid-template-columns: repeat(auto-fit, minmax(240px, 340px));
    justify-content: start;
}

.weiche label:has(input:checked) { border-color: var(--teal-500); background: var(--teal-100); }
.weiche label:focus-within { outline: 2px solid var(--teal-500); outline-offset: 2px; }
.weiche input { flex: 0 0 auto; margin-top: 3px; }
.weiche b { display: block; }
.weiche small { display: block; margin-top: var(--s-1); font-size: var(--t-xs); color: var(--petrol-300); }

/* Klebende Summen-/Speicherleiste am unteren Rand langer Formulare. */
.summenleiste {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    flex-wrap: wrap;
}

.summenleiste .summe {
    font-size: var(--t-2xl);
    line-height: var(--lh-2xl);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--teal-600);
}

/* Zeitleiste des Journals: Zeitstempel dezent links, Vorgang hervorgehoben. */
.zeitleiste { list-style: none; margin: 0; padding: 0; }

.zeitleiste li {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: var(--s-3);
    padding: var(--s-2) 0;
    border-bottom: 1px solid var(--linie);
}

.zeitleiste li:last-child { border-bottom: none; }

.zl-zeit {
    font-size: var(--t-xs);
    line-height: var(--lh-xs);
    color: var(--petrol-300);
    font-variant-numeric: tabular-nums;
}

.zl-aktion { font-weight: 700; }
.zl-detail { margin-top: 2px; font-size: var(--t-sm); line-height: var(--lh-sm); }
.zl-wer { margin-top: 2px; font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--petrol-300); }

@media (max-width: 640px) {
    .zeitleiste li { grid-template-columns: 1fr; gap: 0; }
}

.journal-notiz { display: flex; gap: var(--s-2); margin-bottom: var(--s-4); }
.journal-notiz input { flex: 1; }

/* Sprungnavigation langer Einstellungsseiten. */
.sprungnav {
    position: sticky;
    top: 56px;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1);
    padding: var(--s-2) 0 var(--s-3);
    margin-bottom: var(--s-4);
    background: var(--papier);
    border-bottom: 1px solid var(--linie);
}

/* --- Einstellungen: Gruppennavigation links, EINE Gruppe rechts -----------
   Das Formular (.einstellungen-layout) trägt Navigation und Gruppen, damit ein
   Speichern-Knopf alle Gruppen schreibt. Mit JS bekommt es die Klasse .js:
   dann ist nur die Gruppe .aktiv sichtbar. Ohne JS stehen alle Gruppen
   untereinander und die Navigation ist eine Liste gewöhnlicher Sprunglinks.

   AUSNAHME Emoji (docs/DESIGN.md, Nachtrag „Einstellungsgruppen"): die
   Gruppen tragen ein Emoji - ausdrücklicher Wunsch des Auftraggebers. Die
   Klasse .emoji gibt ihm feste Breite, damit die Namen bündig stehen.
   ------------------------------------------------------------------------ */
.einstellungen-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: var(--s-4);
    align-items: start;
}

.einstellungen-nav {
    position: sticky;
    top: 68px;
    max-height: calc(100vh - 84px);
    overflow: auto;
    padding: var(--s-3);
}

.einstellungen-nav .feld.suche { margin: 0 0 var(--s-2); }
.einstellungen-nav .feld.suche input { min-height: var(--klick); font-size: var(--t-sm); }

.einstellungen-nav-liste { display: flex; flex-direction: column; gap: 2px; }

.einstellungen-nav-link {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    min-height: var(--klick);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--r-sm);
    font-size: var(--t-sm);
    color: var(--petrol-700);
    text-decoration: none;
}

.einstellungen-nav-link:hover { background: var(--papier); text-decoration: none; }

.einstellungen-nav-link.aktiv {
    background: var(--teal-100);
    color: var(--teal-600);
    font-weight: 600;
}

.einstellungen-nav-link .text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.einstellungen-nav-link .anzahl { font-variant-numeric: tabular-nums; }
.einstellungen-nav-link.aktiv .anzahl { color: var(--teal-600); }
.einstellungen-nav-link.treffer .text { font-weight: 600; }

.emoji {
    display: inline-block;
    width: 1.5em;
    flex-shrink: 0;
    text-align: center;
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
    font-style: normal;
    line-height: 1;
}

.einstellungen-gruppe .karte-kopf h2 { display: flex; align-items: center; gap: var(--s-2); }

.einstellungen-inhalt { min-width: 0; }
.einstellungen-gruppe .hinweis { margin-bottom: var(--s-4); }

/* Reiteransicht (nur mit JS): genau eine Gruppe sichtbar. */
.einstellungen-layout.js .einstellungen-gruppe { display: none; }
.einstellungen-layout.js .einstellungen-gruppe.aktiv { display: block; }
.einstellungen-layout.js .einstellungen-gruppe.kein-treffer { display: none; }

/* Suche: Treffer bekommen eine goldene Beschriftung („hier schauen"), nicht
   passende Felder und Gruppen sind ausgeblendet (per hidden-Attribut aus JS). */
.einstellungen-layout.sucht [data-feld].treffer > label,
.einstellungen-layout.sucht [data-feld].treffer > legend {
    display: inline-block;
    padding: 0 var(--s-1);
    border-radius: var(--r-sm);
    background: var(--gold-100);
    color: var(--petrol-700);
}

/* Boolesches Feld: Beschriftung oben, kompakte Ja/Nein-Wahl in einer Zeile.
   Ein fieldset, damit die beiden Radios eine gemeinsame Beschriftung haben. */
.feld.schalter {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.feld.schalter > legend {
    display: block;
    padding: 0;
    margin: 0 0 var(--s-1);
    font-size: var(--t-sm);
    color: var(--petrol-500);
}

/* Freitextsuche über einer Artikel-Auswahlliste: schmal, unaufdringlich,
   direkt über dem Feld, das sie filtert. */
.artikel-suche {
    width: 100%;
    margin-bottom: var(--s-1);
    padding: var(--s-1) var(--s-2);
    font-size: var(--t-sm);
    line-height: var(--lh-sm);
    border: 1px solid var(--linie);
    border-radius: var(--r-sm);
    background: var(--papier);
    color: var(--petrol-700);
}
.artikel-suche:focus { background: var(--flaeche); }

.ja-nein {
    display: inline-flex;
    border: 1px solid var(--linie);
    border-radius: var(--r-sm);
    background: var(--flaeche);
    overflow: hidden;
}

.ja-nein label {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    margin: 0;
    padding: var(--s-1) var(--s-3);
    min-height: var(--klick);
    font-size: var(--t-md);
    color: var(--petrol-700);
    cursor: pointer;
}

.ja-nein label + label { border-left: 1px solid var(--linie); }
.ja-nein label:hover { background: var(--papier); }
.ja-nein input { margin: 0; }
.ja-nein label:has(input:checked) { background: var(--teal-100); color: var(--teal-600); font-weight: 600; }
.ja-nein label:has(input:focus-visible) { outline: 2px solid var(--teal-500); outline-offset: -2px; }

/* Speicherleiste: Hilfetext links, Hinweis „nicht gespeichert" und Knopf rechts. */
.einstellungen-speichern { justify-content: flex-end; }
.einstellungen-speichern > .hilfe { margin: 0 auto 0 0; }
.einstellungen-ungespeichert { padding: var(--s-1) var(--s-3); font-size: var(--t-sm); }

/* Schmale Bildschirme: Navigation als Reiterleiste über den Gruppen. */
@media (max-width: 900px) {
    .einstellungen-layout { grid-template-columns: 1fr; }

    .einstellungen-nav {
        top: 56px;
        z-index: 20;
        max-height: none;
        overflow: visible;
    }

    .einstellungen-nav-liste { flex-direction: row; flex-wrap: wrap; gap: var(--s-1); }
    .einstellungen-nav-link { border: 1px solid var(--linie); }
    .einstellungen-nav-link.aktiv { border-color: var(--teal-500); }
    .einstellungen-nav-link .text { white-space: normal; }
    .einstellungen-nav-link .anzahl { display: none; }
}

/* Einstellungsgruppen: Felder OBEN ausrichten. Das allgemeine `align-items:
   end` der Feldreihe richtet Eingaben an einer Grundlinie aus - gut fuer
   Formulare mit Knopf daneben, aber auf der Einstellungsseite druecken die
   unterschiedlich langen Hilfetexte die Felder auf verschiedene Hoehen
   ("zerstreut", gemeldet 19.08.2026). */
.einstellungen-gruppe .feld-reihe { align-items: start; }

/* Betragsaufstellung rechts unter den Positionen. */
.summenblock { max-width: 340px; margin-left: auto; }

.summenblock .zeile {
    display: flex;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-1) 0;
    font-size: var(--t-md);
}

.summenblock .zeile.klein { font-size: var(--t-sm); color: var(--petrol-300); }

.summenblock .zeile.gesamt {
    margin-top: var(--s-1);
    padding-top: var(--s-2);
    font-size: var(--t-lg);
    font-weight: 700;
    color: var(--teal-600);
    border-top: 1px solid var(--linie);
}

/* Fortschrittskette des Auftrags. */
.kette { display: flex; flex-wrap: wrap; gap: var(--s-1); }

/* Zweispaltige Listenzeile mit Nebenangabe rechts (Top-Listen, Kennzahlpaare). */
.zeilen-liste {
    display: flex;
    justify-content: space-between;
    gap: var(--s-3);
    padding: var(--s-2) 0;
    font-size: var(--t-md);
    border-bottom: 1px solid var(--linie);
}

.zeilen-liste:last-of-type { border-bottom: none; }

/* Unterschriftfläche auf dem Tablet des Fahrers. Gestrichelt, weil hier etwas
   HINEIN gehört - eine durchgezogene Linie sähe aus wie ein fertiges Feld. */
.unterschrift {
    border: 2px dashed var(--petrol-100);
    border-radius: var(--r-md);
    background: var(--flaeche);
    touch-action: none;
    margin: var(--s-1) 0;
}

.unterschrift canvas { display: block; width: 100%; height: 240px; border-radius: var(--r-md); }

/* Auswahlliste der Kundensuche (Combobox). */
.combo { position: relative; }

.combo-liste {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 20;
    max-height: 240px;
    overflow: auto;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--r-md);
    box-shadow: var(--schatten-2);
}

.combo-liste .cust-opt {
    padding: var(--s-2) var(--s-3);
    cursor: pointer;
    border-bottom: 1px solid var(--linie);
}

.combo-liste .cust-opt:last-child { border-bottom: none; }
.combo-liste .cust-opt:hover { background: var(--papier); }

/* Dichte Positionszeilen und rechtsbündige Zahleneingaben. */
.tabelle.dicht th,
.tabelle.dicht td { padding: var(--s-2) var(--s-3); }

.num input,
input.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Eingaben, die nur wenige Stellen aufnehmen (Menge, Kürzel, Betrag in einer
   Positionszeile). Ohne das läuft ein Mengenfeld über die halbe Spalte. */
input.kurz { width: 6em; min-width: 6em; }
input.mittel { width: 10em; min-width: 10em; }

/* Pflichtfeldstern und Geheimnis-Marke. */
.pflicht { color: var(--rot-600); }
.geheim { font-size: var(--t-xs); color: var(--gold-600); }

/* Kleines Formular in einer Hinweiszeile (z. B. Mahnsperre aufheben). */
form.inline { display: inline-block; margin-left: var(--s-3); }

/* Guthaben/Verbrauch eines Dienstes unter seinem Schlüssel (Einstellungen). */
.guthaben { margin-top: var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); font-size: var(--t-sm); line-height: var(--lh-sm); }
.guthaben .hilfe { display: inline; margin-left: var(--s-2); }
.guthaben-ok { background: var(--gruen-100); color: var(--gruen-600); }
.guthaben-hinweis { background: var(--gold-100); color: var(--petrol-800); }
.guthaben-fehler { background: var(--rot-100); color: var(--rot-600); }

/* Abweichung vom Katalogpreis / Nebenrechnung: „Achtung, Mensch muss schauen". */
.pnote { margin-top: var(--s-1); font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--gold-600); }

/* --- Balken und Säulen einer Auswertung -----------------------------------
   Eine Auswertung braucht Größenvergleiche. Der Balken ist KEINE Dekoration,
   deshalb steht die Zahl immer daneben - Länge allein ist nicht ablesbar.
   Keine Diagrammbibliothek: die Anwendung lädt nichts von fremden Servern.

   Die Länge kommt als CSS-Variable --wert (bevorzugt) oder - in Ansichten, die
   ein anderer Bereich pflegt - als style="width:…" am Füllkörper.
   ------------------------------------------------------------------------ */
.balken {
    height: var(--s-2);
    border-radius: var(--r-full);
    background: var(--petrol-100);
    overflow: hidden;
}

.balken > span,
.balken > i {
    display: block;
    height: 100%;
    width: var(--wert, 0%);
    border-radius: var(--r-full);
    background: var(--teal-500);
}

.balken.warn > span, .balken.warn > i { background: var(--gold-500); }
.balken.risk > span, .balken.risk > i { background: var(--rot-500); }
.balken.go   > span, .balken.go   > i { background: var(--gruen-500); }

/* Dieselbe Optik als <progress>. Das ist die ehrlichere Form, wenn die Länge
   aus Serverdaten kommt: Wert und Maximum stehen als Attribute am Element, es
   braucht KEIN style="width:…" in der Ansicht. Daneben steht immer die Zahl,
   deshalb ist das Element für Vorleseprogramme ausgeblendet. */
progress.balken {
    display: block;
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: var(--petrol-100);
}

progress.balken::-webkit-progress-bar { background: var(--petrol-100); border-radius: var(--r-full); }
progress.balken::-webkit-progress-value { background: var(--teal-500); border-radius: var(--r-full); }
progress.balken::-moz-progress-bar { background: var(--teal-500); border-radius: var(--r-full); }

progress.balken.warn::-webkit-progress-value { background: var(--gold-500); }
progress.balken.warn::-moz-progress-bar { background: var(--gold-500); }
progress.balken.risk::-webkit-progress-value { background: var(--rot-500); }
progress.balken.risk::-moz-progress-bar { background: var(--rot-500); }
progress.balken.go::-webkit-progress-value { background: var(--gruen-500); }
progress.balken.go::-moz-progress-bar { background: var(--gruen-500); }

/* Balkenzeile: links Beschriftung samt Balken, rechts die Zahl. */
.balken-zeile {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) 64px;
    gap: var(--s-3);
    align-items: center;
    margin-bottom: var(--s-2);
}

.balken-zeile .bez { font-size: var(--t-sm); }

/* Steht rechts ein Geldbetrag statt einer Stückzahl, braucht die Spalte mehr
   Platz - sonst bricht „1.234.567,89 €" um. */
.balken-zeile.mit-betrag { grid-template-columns: minmax(140px, 1fr) 130px; }

/* Zwei Balken übereinander (Umsatz und Zahlungseingang desselben Monats). */
.balkenblock progress.balken + progress.balken { margin-top: 2px; }

/* Balken unter einer eigenen Beschriftungszeile (Umsatz je Monat, Ziele). */
.balkenblock { margin-bottom: var(--s-3); }

.balkenblock .kopf {
    display: flex;
    justify-content: space-between;
    gap: var(--s-3);
    font-size: var(--t-sm);
    margin-bottom: var(--s-1);
}

/* Legende zu mehreren Balkenreihen. Farbe allein sagt nichts, deshalb steht
   der Text unmittelbar daneben - die Legende ist die Beschriftung, nicht der
   Ersatz für sie. Die Farbnamen sind dieselben wie am Balken. */
.legende {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-4);
    margin-bottom: var(--s-3);
    font-size: var(--t-sm);
    color: var(--petrol-500);
}

.legende span { display: inline-flex; align-items: center; gap: var(--s-1); }
.legende i { width: 10px; height: 10px; border-radius: 2px; background: var(--teal-500); }
.legende i.warn { background: var(--gold-500); }
.legende i.risk { background: var(--rot-500); }
.legende i.go { background: var(--gruen-500); }

/* --- Wochenkalender (CRM-Termine) ----------------------------------------
   Bewusst eine reine Tabelle: keine Kalenderbibliothek von fremden Servern,
   und eine gut lesbare Tabelle schlägt einen halbfertigen Kalender.
   ------------------------------------------------------------------------ */
.wochenkopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    margin-bottom: var(--s-3);
    flex-wrap: wrap;
}

.wochenkopf .spanne { font-size: var(--t-lg); font-weight: 700; }

.kalender { table-layout: fixed; }
.kalender td { vertical-align: top; }

.kal-tag { font-weight: 700; }

.kal-tag .datum {
    display: block;
    font-size: var(--t-xs);
    color: var(--petrol-300);
    font-variant-numeric: tabular-nums;
}

.kal-block {
    display: block;
    padding: var(--s-2);
    margin-bottom: var(--s-2);
    border-radius: var(--r-sm);
    border-left: 3px solid var(--linie);
    background: var(--papier);
    color: var(--petrol-700);
    text-decoration: none;
    font-size: var(--t-sm);
}

.kal-block:last-child { margin-bottom: 0; }
.kal-block:hover { text-decoration: none; }
.kal-block .zeit { font-weight: 700; font-variant-numeric: tabular-nums; }
.kal-block .wer { display: block; color: var(--petrol-500); }
.kal-block.go { border-left-color: var(--gruen-600); }
.kal-block.warn { border-left-color: var(--gold-600); }
.kal-block.risk { border-left-color: var(--rot-600); }
.kal-block.neutral { border-left-color: var(--petrol-300); }
.kal-leer { color: var(--petrol-300); font-size: var(--t-xs); }

/* Ein Formular, das in einer Tabellenzelle nur einen Knopf trägt. */
.zeilenaktion { display: inline; margin: 0; }

@media (max-width: 900px) {
    .kalender { min-width: 760px; }
}

/* ==========================================================================
   8  MELDUNGEN UND SONDERBAUSTEINE
   ========================================================================== */

.flash,
.err,
.note {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    margin-bottom: var(--s-4);
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-md);
    font-size: var(--t-md);
}

.flash { background: var(--gruen-100); color: var(--gruen-600); border-left: 3px solid var(--gruen-600); }
.err   { background: var(--rot-100);   color: var(--rot-600);   border-left: 3px solid var(--rot-600); }
.note  { background: var(--gold-100);  color: #6B4E00;          border-left: 3px solid var(--gold-600); }

.flash .ic, .err .ic, .note .ic { margin-top: 2px; }

/* Ablagefläche für Datei-Uploads (wird per JS um jedes
   <input type=file data-dropzone> gelegt). */
.dropzone {
    padding: var(--s-4);
    text-align: center;
    background: var(--papier);
    border: 1px dashed var(--petrol-100);
    border-radius: var(--r-md);
    color: var(--petrol-500);
    font-size: var(--t-md);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.dropzone:hover { border-color: var(--teal-500); color: var(--petrol-700); }
.dropzone.dz-over { border-color: var(--teal-500); background: var(--teal-100); color: var(--teal-600); }
.dropzone b { color: var(--teal-600); }

/* ==========================================================================
   9  ÜBERGANGS-ALIASE
   Die bestehenden Ansichten benutzen .card .field .btn .pill .num .hint. Die
   Klassen sind oben zusammen mit den neuen Namen definiert; hier stehen nur
   die, die keine neue Entsprechung haben. Diese Regeln verschwinden, sobald
   alle Ansichten umgestellt sind.
   ========================================================================== */

.hint {
    font-size: var(--t-sm);
    line-height: var(--lh-sm);
    color: var(--petrol-300);
}

.btn-yellow,
.btn.btn-yellow {
    background: var(--gold-500);
    border-color: var(--gold-500);
    color: #3A2E00;
}

.btn-yellow:hover { background: var(--gold-600); border-color: var(--gold-600); color: #3A2E00; }

/* ==========================================================================
   10  ANMELDUNG (auth/_authlayout)
   Absichtlich mit EINFACHER Klassenspezifität (.box, nicht .anmeldung .box):
   der Einrichtungsassistent verbreitert die Box in einem eigenen <style> im
   Rumpf - das muss weiterhin gewinnen.
   ========================================================================== */

body.anmeldung {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--s-4);
    background: var(--petrol-900);
    background: linear-gradient(180deg, #143C4C 0%, #0E2A36 100%);
}

.box {
    width: min(360px, 100%);
    padding: var(--s-6) var(--s-6) var(--s-5);
    background: var(--flaeche);
    border-radius: var(--r-lg);
    box-shadow: 0 20px 60px rgba(14, 42, 54, .35);
}

.logo { text-align: center; margin-bottom: var(--s-5); }

.logo b {
    font-size: var(--t-2xl);
    font-weight: 700;
    letter-spacing: .22em;
    color: var(--teal-600);
}

.logo span {
    display: block;
    margin-top: var(--s-1);
    font-size: var(--t-xs);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--petrol-300);
}

/* Auf einer Anmeldemaske ist die Primäraktion der einzige Knopf, der zählt -
   sie läuft über die volle Breite und ist fingerbreit hoch. Nebenknöpfe
   („Codes kopieren", „Drucken") bleiben davon unberührt. */
.box .btn.primaer { width: 100%; min-height: 44px; }

/* ÜBERGANG: Masken, die noch einen nackten <button> ohne Klasse tragen.
   AUSNAHME .pw-schalter: Der Aufdecken-Knopf im Passwortfeld wird von
   public/js/passwort.js INS Feld gesetzt und ist ein Symbolknopf, keine
   Absendeschaltfläche. Ohne diesen Ausschluss griff die Regel unten auch auf
   ihn - er wurde volle Breite, fingerbreit hoch und teal und verdeckte damit
   das Eingabefeld vollständig. Genau das war live zu sehen. */
.box form button:not(.btn):not(.pw-schalter) {
    width: 100%;
    min-height: 44px;
    margin-top: var(--s-1);
    padding: var(--s-3);
    background: var(--teal-500);
    border: 1px solid var(--teal-500);
    border-radius: var(--r-sm);
    color: #FFFFFF;
    font-family: inherit;
    font-size: var(--t-lg);
    font-weight: 600;
    cursor: pointer;
}

.box form button:not(.btn):not(.pw-schalter):hover { background: var(--teal-600); border-color: var(--teal-600); }

/* Aufdecken-Knopf im Passwortfeld.
   Die Regeln stehen zusätzlich in public/js/passwort.js (die Datei bringt ihr
   eigenes Stylesheet mit, damit der Knopf ohne app.css nicht nackt dasteht).
   Hier stehen sie, weil das Stylesheet SPÄTER geladen wird als das vom Skript
   eingefügte und sonst die Übergangsregel oben gewinnt. */
.box .pw-huelle { position: relative; display: block; }
.box .pw-huelle > input { padding-right: 44px; }
.box .pw-schalter {
    position: absolute; top: 0; right: 0;
    width: 40px; min-width: 40px; height: 100%;
    display: flex; align-items: center; justify-content: center;
    margin: 0; padding: 0;
    background: none; border: 0; border-radius: 0 var(--r-sm) var(--r-sm) 0;
    color: var(--petrol-300); cursor: pointer;
}
.box .pw-schalter:hover,
.box .pw-schalter[aria-pressed="true"] { color: var(--teal-600); background: none; }
.box .pw-schalter:focus-visible { outline: 2px solid var(--teal-500); outline-offset: -2px; }

@media (max-width: 480px) {
    .box .pw-huelle > input { min-height: 44px; padding-right: 48px; }
    .box .pw-schalter { width: 44px; min-width: 44px; }
}

.box .hint { text-align: center; margin-top: var(--s-4); }

/* ==========================================================================
   11  FACHBERATER-PORTAL (portal/layout)
   MOBIL ZUERST: Der Vertreter steht beim Kunden vor der Tür und hat ein
   Telefon in der Hand. Klickflächen 44 px, Eingabefelder 16 px (sonst zoomt
   iOS beim Antippen). Ab 720 px wird nur mehr Luft gegeben.
   ========================================================================== */

/* Das Portal hat keine klebende Kopfzeile - die klebende Tabellenkopfzeile
   darf hier also ganz oben andocken. */
body.portal,
body.anmeldung { --kopf-h: 0px; }

body.portal { font-size: var(--t-lg); }

header.pk {
    padding: var(--s-3) var(--s-3);
    background: var(--petrol-900);
    color: #FFFFFF;
}

header.pk .marke { display: flex; align-items: center; gap: var(--s-3); }
header.pk .marke b { font-size: var(--t-xl); font-weight: 700; letter-spacing: .16em; }

header.pk .marke span {
    font-size: var(--t-xs);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #8FB7C2;
}

header.pk .marke .rubrik {
    font-size: var(--t-xs);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #8FB7C2;
}

header.pk .wer {
    margin-left: auto;
    text-align: right;
    font-size: var(--t-sm);
    line-height: 1.4;
    color: #A9C6CF;
}

header.pk .wer form { display: inline; }

header.pk .wer button {
    min-height: 32px;
    padding: 0;
    background: none;
    border: 0;
    color: #C9DAE1;
    font-family: inherit;
    font-size: var(--t-sm);
    text-decoration: underline;
    cursor: pointer;
}

header.pk :focus-visible { outline-color: #FFFFFF; }

nav.pn {
    display: flex;
    background: var(--petrol-800);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

nav.pn a {
    flex: 1 0 auto;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--s-3) var(--s-4);
    color: #C9DAE1;
    font-size: var(--t-md);
    white-space: nowrap;
    border-bottom: 3px solid transparent;
}

nav.pn a:hover { color: #FFFFFF; text-decoration: none; }

nav.pn a.on {
    background: rgba(23, 167, 155, .18);
    border-bottom-color: var(--teal-500);
    color: #FFFFFF;
    font-weight: 600;
}

main.pc { max-width: 900px; margin: 0 auto; padding: var(--s-4) var(--s-3) var(--s-6); }

h1.pt { margin: 0 0 var(--s-4); font-size: var(--t-xl); line-height: var(--lh-xl); font-weight: 700; }

footer.pf {
    padding: var(--s-4) var(--s-3) var(--s-6);
    text-align: center;
    font-size: var(--t-xs);
    color: var(--petrol-300);
}

/* App-Modus (App\Support\AppModus): das Portal in der App-Huelle.
   In der App liegt das Geraet oft auf dem Tisch oder steckt im Tablet-Halter;
   die Browser-Stufen (Grundtext 13,5 px, Statusschilder 11 px) sind dafuer zu
   klein. Angehoben wird ueber die Stufen selbst, damit jede Regel des Portals
   mitwaechst und keine vergessen wird. Zeilenhoehen sind Faktoren und passen
   sich von allein an. */
body.portal.app-modus {
    --t-xs: 13px;
    --t-sm: 14px;
    --t-md: 15px;
    --t-lg: 16px;
    --t-xl: 20px;
    --t-2xl: 24px;
}

/* Tablet in der App: Menue umbrechen statt seitlich wegrollen - alle Punkte
   auf einen Blick. Am Handy bleibt es rollbar (sonst frisst es drei Zeilen). */
@media (min-width: 720px) {
    body.portal.app-modus nav.pn { flex-wrap: wrap; overflow-x: visible; }
}

/* Im Portal ist alles Bedienbare fingerbreit. */
body.portal .btn,
body.portal input,
body.portal select,
body.portal textarea { min-height: 44px; }

body.portal input,
body.portal select,
body.portal textarea { font-size: 16px; }

body.portal .karte,
body.portal .card { padding: var(--s-4); margin-bottom: var(--s-3); }

body.portal .leise { color: var(--petrol-300); font-size: var(--t-sm); }

@media (min-width: 720px) {
    header.pk { padding: var(--s-4) var(--s-5); }
    nav.pn { padding: 0 var(--s-3); }
    nav.pn a { flex: 0 0 auto; min-width: 150px; }
    main.pc { padding: var(--s-5) var(--s-5) var(--s-7); }
}

/* ==========================================================================
   12  SCHMALE BILDSCHIRME
   Der Innendienst muss ab 360 px wenigstens benutzbar bleiben: die
   Seitenleiste klappt weg, Tabellen scrollen waagrecht im eigenen Behälter.
   ========================================================================== */

@media (max-width: 920px) {
    main { margin-left: 0; }
    aside { transform: translateX(-100%); box-shadow: 6px 0 24px rgba(14, 42, 54, .35); }
    body.sb-open aside { transform: translateX(0); }
    body.sb-open .backdrop { display: block; }

    header.top { padding: var(--s-2) var(--s-3); }
    header.top .who { display: none; }
    .content { padding: var(--s-4) var(--s-3); }

    /* Tabellen wischen statt quetschen - der Behälter scrollt, nicht die Seite. */
    .tabelle,
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tabelle th,
    table th { position: static; }

    /* Mehrspaltige Raster aus Inline-Stilen auf eine Spalte.
       ÜBERGANG - fällt weg, sobald die Inline-Stile verschwunden sind. */
    div[style*="grid-template-columns"],
    form[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

    /* 16 px verhindert den Auto-Zoom von iOS beim Antippen. */
    input,
    select,
    textarea { font-size: 16px; min-height: 40px; }

    .btn { min-height: 40px; }
}

/* ==========================================================================
   13  BEWEGUNG REDUZIEREN / DRUCK
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    aside,
    header.top,
    .backdrop,
    nav.pn { display: none !important; }

    main { margin-left: 0; }
    body { background: #FFFFFF; }
    .karte, .card, .tabelle, table { box-shadow: none; border: 1px solid var(--linie); }
}

/* ==========================================================================
   14  ERGEBNISWAHL UND PORTAL-POLITUR (Nachtrag W2, GL 02.09.2026)
   Karten-Radios der Besuchsmaske, Ergebnis-Farbbalken an Knöpfen, klebende
   Aktionsleisten mit iPhone-Inset, Druck-Feedback und Kopfmarke des Portals.
   NUR Ergänzungen - kein bestehender Baustein wird umdefiniert (Ausnahme:
   .summenleiste bekommt zusätzlich das Geräte-Inset, sonst unverändert).
   ========================================================================== */

/* --- Karten-Radios (.wahl-karten): Ergebnis-Auswahl der Besuchsmaske. -----
   Wie .weiche, aber mit klarer Wahl-Optik: Rahmen + Haken statt nacktem
   Radiopunkt, dazu ein dezenter Farbbalken links in der Farblogik der
   Ergebnis-Pillen (go/warn/risk/offen aus CrmBesuch::ERGEBNIS_COLORS).
   Die Kantenfarben sind dieselben wie an tr.go/tr.warn/tr.risk. */
.wahl-karten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--s-3);
    margin-bottom: var(--s-4);
}

.wahl-karte {
    position: relative;
    display: flex;
    gap: var(--s-3);
    align-items: flex-start;
    margin: 0;
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--linie);
    border-left: 4px solid var(--petrol-100);
    border-radius: var(--r-md);
    background: var(--flaeche);
    color: var(--petrol-700);
    font-size: var(--t-md);
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}

.wahl-karte:hover { border-color: var(--petrol-300); box-shadow: var(--schatten-1); }

.wahl-karte.go    { border-left-color: var(--gruen-600); }
.wahl-karte.warn  { border-left-color: var(--gold-600); }
.wahl-karte.risk  { border-left-color: var(--rot-600); }
.wahl-karte.offen { border-left-color: var(--petrol-300); }

/* Der native Radiopunkt verschwindet zugunsten des Hakens rechts - aber nur
   optisch: das Eingabeelement bleibt im Formular, fokussierbar und ohne JS
   bedienbar. Browser ohne :has() zeigen ihn weiter (siehe @supports unten). */
.wahl-karte input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.wahl-karte .wahl-text { flex: 1; min-width: 0; }
.wahl-karte .wahl-text b { display: block; color: var(--petrol-900); }

/* petrol-500 statt petrol-300: der Beschreibungstext muss auch auf der
   getönten Teal-Fläche der gewählten Karte 4,5:1 halten. */
.wahl-karte .wahl-text small {
    display: block;
    margin-top: var(--s-1);
    font-size: var(--t-xs);
    line-height: var(--lh-xs);
    color: var(--petrol-500);
}

.wahl-haken {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border: 2px solid var(--linie);
    border-radius: var(--r-full);
    background: var(--flaeche);
    color: transparent;
}

.wahl-haken .ic { width: 13px; height: 13px; }

.wahl-karte:has(input:checked) {
    border-color: var(--teal-500);
    background: var(--teal-100);
    box-shadow: var(--schatten-1);
}

.wahl-karte:has(input:checked) .wahl-haken {
    border-color: var(--teal-600);
    background: var(--teal-600);
    color: #FFFFFF;
}

/* Tastatur: Fokusring auf der GANZEN Karte, nicht auf dem unsichtbaren Punkt. */
.wahl-karte:has(input:focus-visible) { outline: 2px solid var(--teal-500); outline-offset: 2px; }

/* Rückfall ohne :has(): der native Radiopunkt bleibt sichtbar und trägt
   Auswahl und Fokus selbst - keine Funktion hängt an der neuen Optik. */
@supports not selector(:has(*)) {
    .wahl-karte input[type="radio"] {
        position: static;
        width: auto;
        height: auto;
        opacity: 1;
        pointer-events: auto;
    }

    .wahl-haken { display: none; }
}

/* --- Ergebnis-Farbbalken an Knöpfen (Ein-Tipp-Ergebnisse im Portal). ------
   Dieselbe Farblogik wie an den Karten-Radios, als Kante am .btn. */
.btn.erg-go    { border-left: 4px solid var(--gruen-600); }
.btn.erg-warn  { border-left: 4px solid var(--gold-600); }
.btn.erg-risk  { border-left: 4px solid var(--rot-600); }
.btn.erg-offen { border-left: 4px solid var(--petrol-300); }

/* --- Klebende Leisten und das iPhone-Inset. -------------------------------
   env() ist ohne viewport-fit=cover schlicht 0 - am Schreibtisch ändert sich
   nichts. .safe-unten kommt an die klebende Speicherleiste der Besuchsmaske:
   Grundabstand wie der Karten-Innenabstand, plus Balkenhöhe des Geräts. */
.summenleiste { bottom: env(safe-area-inset-bottom, 0px); }

.safe-unten { padding-bottom: calc(var(--s-5) + env(safe-area-inset-bottom, 0px)); }

/* Portal: klebende Aktionsleiste am Fuß einer Erfassungskarte. Sie sitzt IM
   Formular (der Knopf sendet es ab) und deckt mit eigener Fläche und Linie
   den darunter durchlaufenden Inhalt ab. */
body.portal .p-aktion {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: var(--s-4) calc(-1 * var(--s-4)) calc(-1 * var(--s-4));
    padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
    background: var(--flaeche);
    border-top: 1px solid var(--linie);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
}

body.portal .p-aktion .btn {
    width: 100%;
    min-height: 56px;
    font-size: var(--t-lg);
}

/* Auch der Portal-Fuß rutscht nicht unter den Wischbalken. */
footer.pf { padding-bottom: calc(var(--s-6) + env(safe-area-inset-bottom, 0px)); }

/* --- Portal: aktiver Menüpunkt deutlicher. ------------------------------- */
nav.pn a.on { background: rgba(23, 167, 155, .30); font-weight: 700; }

/* --- Portal: sanftes Druck-Feedback. Klasse .druck für antippbare Karten
   und Wege; Knöpfe bekommen es pauschal. Nur, wenn Bewegung erwünscht ist -
   der globale Reduced-Motion-Block würde zwar die Übergänge stoppen, aber
   nicht den Transform selbst, deshalb der eigene Zaun. */
@media (prefers-reduced-motion: no-preference) {
    body.portal .btn,
    body.portal .druck {
        transition: transform .08s ease, background .12s ease,
                    border-color .12s ease, color .12s ease, box-shadow .12s ease;
    }

    body.portal .btn:active,
    body.portal .druck:active { transform: scale(.985); }
}

/* --- Portal: Kopf mit Kontext - Initialen-Marke neben dem Namen. --------- */
header.pk .wer {
    display: flex;
    align-items: center;
    gap: var(--s-3);
}

header.pk .wer-marke {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--r-full);
    background: rgba(23, 167, 155, .25);
    color: #FFFFFF;
    font-size: var(--t-sm);
    font-weight: 700;
    letter-spacing: .04em;
}

header.pk .wer-name { font-weight: 600; color: #FFFFFF; }

/* --- Portal: Leerzustände einheitlich (Symbol, kräftige Zeile, Satz). ----- */
body.portal .leer b {
    display: block;
    margin-top: var(--s-2);
    font-size: var(--t-lg);
    color: var(--petrol-700);
}

/* ==========================================================================
   15  BEREICHSFARBEN IN DER FLAECHE (v1.24.0)
   ========================================================================== */

/* Seitenkopf: schmaler Farbstrich des Bereichs. Er ersetzt keine Beschriftung,
   er bestaetigt sie - beim Blattern durch die Anwendung entsteht so ein
   spuerbarer Ortswechsel. */
header.top { border-bottom: 3px solid var(--bereich); }

/* Kennzahl-Kachel mit Akzent. Ohne Modifikator bleibt die Karte weiss wie
   bisher; .ak faerbt den linken Rand und die Ziffer.
   .ak-geld/-warn/-gut/-ruhe sind die vier Bedeutungen, die im Dashboard
   vorkommen - sie greifen bewusst auf die STATUSFARBEN zu (Geld = Teal,
   Achtung = Gold, erledigt = Gruen), nicht auf die Bereichstoene. */
.karte.ak { border-left: 4px solid var(--ak, var(--bereich)); }
/* Die Ziffer traegt IMMER den dunklen Ton - sie ist Text und muss auf Weiss
   lesbar bleiben (4,5:1). Der Rand darf der hellere sein. */
.karte.ak .big { color: var(--ak-text, var(--ak, var(--bereich))); }
.karte.ak-geld  { --ak: var(--teal-600);       --ak-text: var(--teal-600); }
.karte.ak-warn  { --ak: var(--gold-500);       --ak-text: var(--b-finanzen-600); }
.karte.ak-gut   { --ak: var(--gruen-500);      --ak-text: var(--gruen-600); }
.karte.ak-risk  { --ak: var(--rot-500);        --ak-text: var(--rot-600); }
.karte.ak-ruhe  { --ak: var(--b-logistik);     --ak-text: var(--b-logistik-600); }
.karte.ak-crm   { --ak: var(--b-crm);          --ak-text: var(--b-crm-600); }

/* Kachelreihe: sanfter Farbschimmer am oberen Rand, damit eine Reihe von
   Kennzahlen nicht als weisse Wand erscheint. */
.cards .karte.ak { background:
    linear-gradient(180deg, color-mix(in srgb, var(--ak, var(--bereich)) 6%, #FFFFFF) 0 40px, var(--flaeche) 40px); }

/* Aeltere Browser ohne color-mix bekommen schlicht die weisse Karte. */
@supports not (color: color-mix(in srgb, red 10%, blue)) {
    .cards .karte.ak { background: var(--flaeche); }
    .mi.active { background: rgba(23, 167, 155, .18); }
}

/* --- Kontaktwege: Rufnummer und Anschrift als Handlung ---------------------
   Baustein resources/views/partials/kontaktwege.blade.php. Vorgabe GL
   07.09.2026: Der Vertrieb tippt die Nummer an und telefoniert, er tippt die
   Anschrift an und hat die Route. Deshalb ist der Weg eine FLAECHE, kein
   Wort in einer Zeile - im Portal 44px (Daumen, Auto), im Innendienst als
   .klein 32px (Maus, Tabellenzeile), beides aus docs/DESIGN.md.
   Die vier Portal-CRM-Ansichten trugen diese Regeln bis v1.24 je einzeln. */
.kontaktwege { display: grid; gap: var(--s-2); }
.kontaktweg {
    display: flex; align-items: center; gap: var(--s-3);
    min-height: 44px; padding: var(--s-2) var(--s-3);
    border-radius: var(--r-md);
    background: var(--papier); color: var(--petrol-700);
}
.kontaktweg:hover { text-decoration: none; background: var(--teal-100); color: var(--teal-600); }
.kontaktweg .ic { flex: 0 0 auto; color: var(--teal-600); }
.kontaktweg span { min-width: 0; word-break: break-word; }

/* Kompakt: in der Tabellenzelle steht der Weg neben dem Text, nicht als Block.
   32px ist die Innendienst-Untergrenze aus docs/DESIGN.md. */
.kontaktwege.klein { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); }
.kontaktwege.klein .kontaktweg {
    min-height: 32px; padding: 0; gap: var(--s-1);
    background: none; color: var(--teal-600); font-size: inherit;
}
.kontaktwege.klein .kontaktweg:hover { background: none; text-decoration: underline; }