/* ==========================================================================
   Cowfare Design-System
   --------------------------------------------------------------------------
   Einziges Projekt-Stylesheet. Wird in base.html und auth_base.html nach
   Bootstrap eingebunden und stimmt Bootstrap über dessen --bs-* Variablen um.

   Gliederung
     1  Tokens
     2  Bootstrap-Anbindung
     3  Grundlagen & Typografie
     4  App-Gerüst (Sidebar, Topbar, Mobile-Navigation)
     5  Komponenten
     6  Anmeldeseiten
     7  Hilfsklassen
     8  Druck

   Regeln
     - Keine Farbe direkt im Template, nur Tokens.
     - Kein Text unter --cw-font-min (0.8rem).
     - Kein Textton unter 4.5:1 Kontrast, keine Grafiklinie unter 3:1.
     - Gefüllt statt umrandet: Flächen und ein weicher Schatten trennen,
       nicht Umrisse. Umrisse überall wirken unruhig und beliebig.
     - Alte Klassennamen (.card-cw, .btn-cw-*, …) bleiben als Alias gültig,
       damit noch nicht umgestellte Templates unverändert funktionieren.
   ========================================================================== */


/* ==========================================================================
   1  TOKENS
   Kontraste gegen #FFF gerechnet und in den Kommentaren vermerkt.
   ========================================================================== */

:root {
    /* --- Flächen -------------------------------------------------------
       Leitgedanke: gefüllt statt umrandet. Ein Element bekommt eine
       Fläche, keinen Umriss — Umrisse überall erzeugen die unruhige
       Baukasten-Anmutung. Rahmen nur noch, wo etwas wirklich getrennt
       werden muss. */
    --cw-bg:              #F0F2F5;   /* Karte hebt sich mit 1.12:1 ab */
    --cw-card:            #FFFFFF;
    --cw-card-sunken:     #F7F8FA;   /* eingelassene Bereiche, Kennzahlen */
    --cw-fill:            #E4E6EB;   /* Sekundär-Schaltflächen, Chips, Pillen */
    --cw-fill-hover:      #D8DADF;
    --cw-hover:           #F2F2F2;   /* Hover auf Navigation und Listen */
    --cw-border:          #DDE1E5;   /* feine Linie in Tabellen */
    --cw-border-strong:   #CED0D4;   /* Trenner, Feldrand */

    /* --- Text: zwei kräftige Stufen -----------------------------------
       Fast schwarz für alles Wichtige, ein Grau für alles Begleitende.
       Mehr Abstufungen machen die Oberfläche flau statt differenziert. */
    --cw-text:            #050505;   /* 19.6:1  Werte, Überschriften, Fließtext */
    --cw-text-secondary:  #65676B;   /*  4.9:1  Labels, Hilfstext */
    --cw-text-muted:      #65676B;   /*  4.9:1  gleiche Stufe, Name bleibt für Bestand */
    --cw-text-disabled:   #9AA1AC;   /*  2.6:1  nur echt deaktiviert */
    --cw-text-on-accent:  #FFFFFF;

    /* --- Akzent: Grün trägt Marke und Bedienung ------------------------ */
    --cw-primary:         #2E7D32;   /*  5.1:1 */
    --cw-primary-dark:    #256428;   /*  6.6:1  Hover, Text auf Soft */
    --cw-primary-soft:    #E7F3E8;   /*         Fläche aktiver Navigation */
    --cw-primary-rgb:     46, 125, 50;

    /* --- Semantik: Daten, nicht Bedienung ------------------------------ */
    --cw-positive:        #2E7D32;   /*  5.1:1 */
    --cw-positive-soft:   #E8F5E9;
    --cw-positive-border: #B7DFBA;
    --cw-negative:        #C62828;   /*  5.6:1 */
    --cw-negative-soft:   #FDECEA;
    --cw-negative-border: #F3B9B4;
    --cw-negative-dark:   #8E1D1D;   /*  8.7:1  Hover, Verlaufsfuß */
    --cw-warning:         #8A5300;   /*  6.3:1  Warntext */
    --cw-warning-fill:    #F9A825;   /*         Fläche, Text darauf #111827 = 9.0:1 */
    --cw-warning-soft:    #FFF8E1;
    --cw-warning-border:  #F0D68A;
    --cw-info:            #1565C0;   /*  5.8:1 */
    --cw-info-soft:       #E3F2FD;
    --cw-info-border:     #A9CDF0;
    --cw-neutral:         #8A9199;   /*  3.2:1  nur Linien und Diagramme */

    /* --- Kategoriefarben der Kennzahlen --------------------------------
       Tragen die Zugehörigkeit (Streifen, Symbol), nicht die Bewertung.
       Alle drei erfüllen AA auch als Text, damit sie notfalls auch einen
       Wert einfärben dürfen. Ersetzen #4CAF50 (2.8:1), #2196F3 (3.1:1)
       und #26A69A (3.0:1), die dafür alle zu schwach waren. */
    --cw-cat-iofc:        #2E7D32;   /*  5.1:1  Wirtschaftlichkeit */
    --cw-cat-milk:        #1565C0;   /*  5.8:1  Milch, ECM */
    /* Futter/TMA braucht zwei Töne, weil grafische Marken und Text
       verschiedene Untergrenzen haben: Linien 3:1, Text 4.5:1. Der für
       Diagramme kräftige Ton ist als Schrift zu hell — und der dunkle
       fällt in der Palettenprüfung als "liest sich grau" durch. */
    --cw-cat-feed:        #00897B;   /*  Diagramme: besteht Chroma und CVD */
    --cw-cat-feed-text:   #00695C;   /*  6.6:1  wenn die Kategorie Text färbt */

    /* --- Akzent für den Zustand "ungespeichert" ------------------------
       Die Fläche ist --cw-warning-fill; hier steht nur der dunklere Ton
       für Hover und Verlaufsfüße. */
    --cw-accent-dark:     #E59100;

    /* --- Radien: eine Stufe, plus klein und groß ----------------------- */
    --cw-radius-sm:       6px;
    --cw-radius:          8px;
    --cw-radius-lg:       12px;      /* nur Sheets und Overlays */

    /* --- Abstände ------------------------------------------------------ */
    --cw-space-1:         4px;
    --cw-space-2:         8px;
    --cw-space-3:         12px;
    --cw-space-4:         16px;
    --cw-space-5:         24px;
    --cw-space-6:         32px;

    /* --- Typografie ---------------------------------------------------- */
    --cw-font:            'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --cw-font-min:        0.8rem;    /* nichts darunter */
    --cw-font-sm:         0.875rem;
    --cw-font-base:       1rem;
    --cw-font-lg:         1.125rem;
    --cw-font-value:      2.25rem;   /* KPI-Wert */

    /* --- Maße ---------------------------------------------------------- */
    --cw-sidebar-width:   220px;
    --cw-bottomnav-h:     64px;      /* löst hartkodierte 75px ab */
    --cw-touch:           44px;      /* Mindestgröße für Finger */
    --cw-content-max:     1200px;

    /* --- Erhebung: bewusst sparsam ------------------------------------- */
    --cw-shadow-sm:       0 1px 2px rgba(0, 0, 0, 0.10);
    --cw-shadow-overlay:  0 -4px 24px rgba(17, 24, 39, 0.12);

    /* --- Bestandsschutz: alte Tokennamen ------------------------------- */
    --cw-primary-light:   #4CAF50;   /* nur noch Diagrammfläche, nie Text */
    --cf-green:           var(--cw-positive);
    --cf-gold:            var(--cw-warning-fill);
    --cf-red:             var(--cw-negative);
    --cf-red-light:       var(--cw-negative-soft);
    --cf-red-bg:          #FFCDD2;
    --cf-green-light:     var(--cw-positive-soft);
    --cf-green-bg:        #C8E6C9;
    --cf-ink:             var(--cw-text);
    --cf-gray-dark:       var(--cw-text);
    --cf-gray-mid:        var(--cw-text-secondary);
    --cf-gray-light:      var(--cw-border);
}


/* ==========================================================================
   2  BOOTSTRAP-ANBINDUNG
   Bootstrap 5.3 liest seine eigenen Variablen zur Laufzeit. Wer sie
   überschreibt, stimmt damit jede Bootstrap-Komponente um, ohne im Template
   eine Klasse zu ändern — Buttons, Formulare, Tabellen, Meldungen, Abzeichen,
   Dropdowns und Modals kommen in großer Zahl aus Bootstrap.
   ========================================================================== */

:root {
    --bs-body-font-family:      var(--cw-font);
    --bs-body-color:            var(--cw-text);
    --bs-body-color-rgb:        5, 5, 5;
    --bs-body-bg:               var(--cw-card);
    --bs-secondary-color:       var(--cw-text-muted);   /* .text-muted, 203 Fundstellen */
    --bs-tertiary-color:        var(--cw-text-muted);
    --bs-tertiary-bg:           var(--cw-card-sunken);
    --bs-emphasis-color:        var(--cw-text);

    --bs-border-color:          var(--cw-border);
    --bs-border-color-translucent: var(--cw-border);
    --bs-border-radius:         var(--cw-radius);
    --bs-border-radius-sm:      var(--cw-radius-sm);
    --bs-border-radius-lg:      var(--cw-radius);
    --bs-border-radius-xl:      var(--cw-radius-lg);

    --bs-primary:               var(--cw-primary);
    --bs-primary-rgb:           var(--cw-primary-rgb);
    --bs-link-color:            var(--cw-primary);
    --bs-link-color-rgb:        var(--cw-primary-rgb);
    --bs-link-hover-color:      var(--cw-primary-dark);
    --bs-link-decoration:       none;

    --bs-success:               var(--cw-positive);
    --bs-danger:                var(--cw-negative);
    --bs-warning:               var(--cw-warning-fill);
    --bs-info:                  var(--cw-info);
}

/* Bootstrap-Karte auf die Cowfare-Karte ziehen: keine zwei Kartensysteme. */
.card {
    --bs-card-bg: var(--cw-card);
    --bs-card-border-color: transparent;
    --bs-card-border-radius: var(--cw-radius);
    --bs-card-spacer-y: var(--cw-space-4);
    --bs-card-spacer-x: var(--cw-space-4);
    --bs-card-cap-bg: var(--cw-card-sunken);
    --bs-card-cap-padding-y: var(--cw-space-3);
    --bs-card-cap-padding-x: var(--cw-space-4);
    box-shadow: var(--cw-shadow-sm);
}

/* Bootstrap-Buttons: Primär und Sekundär auf die Cowfare-Farben. */
.btn {
    --bs-btn-border-radius: var(--cw-radius-sm);
    font-weight: 600;
    font-size: 0.9375rem;
}
.btn-primary {
    --bs-btn-bg: var(--cw-primary);
    --bs-btn-border-color: var(--cw-primary);
    --bs-btn-hover-bg: var(--cw-primary-dark);
    --bs-btn-hover-border-color: var(--cw-primary-dark);
    --bs-btn-active-bg: var(--cw-primary-dark);
    --bs-btn-active-border-color: var(--cw-primary-dark);
}
/* Auch die Bootstrap-Umrissbuttons werden zu grauen Flächen — sonst
   stehen im selben Formular zwei verschiedene Schaltflächen-Sprachen. */
.btn-outline-primary, .btn-outline-secondary, .btn-outline-warning {
    --bs-btn-color: var(--cw-text);
    --bs-btn-bg: var(--cw-fill);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: var(--cw-fill-hover);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-hover-color: var(--cw-text);
    --bs-btn-active-bg: var(--cw-fill-hover);
    --bs-btn-active-border-color: transparent;
    --bs-btn-active-color: var(--cw-text);
}
.btn-danger {
    --bs-btn-bg: var(--cw-negative);
    --bs-btn-border-color: var(--cw-negative);
    --bs-btn-hover-bg: var(--cw-negative-dark);
    --bs-btn-hover-border-color: var(--cw-negative-dark);
}
.btn-outline-danger {
    --bs-btn-color: var(--cw-negative);
    --bs-btn-bg: var(--cw-fill);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: var(--cw-negative);
    --bs-btn-hover-border-color: var(--cw-negative);
    --bs-btn-hover-color: #fff;
}

/* Bootstrap-Alerts auf die Cowfare-Semantik. */
.alert { --bs-alert-border-radius: var(--cw-radius); }
.alert-success { --bs-alert-color: var(--cw-primary-dark); --bs-alert-bg: var(--cw-positive-soft); --bs-alert-border-color: var(--cw-positive-border); }
.alert-danger  { --bs-alert-color: var(--cw-negative);     --bs-alert-bg: var(--cw-negative-soft); --bs-alert-border-color: var(--cw-negative-border); }
.alert-warning { --bs-alert-color: var(--cw-warning);      --bs-alert-bg: var(--cw-warning-soft); --bs-alert-border-color: var(--cw-warning-border); }
.alert-info    { --bs-alert-color: var(--cw-info);         --bs-alert-bg: var(--cw-info-soft);    --bs-alert-border-color: var(--cw-info-border); }

/* Bootstrap-Badges: Warnung braucht dunkle Schrift, sonst 2:1. */
.badge { border-radius: var(--cw-radius-sm); font-weight: 600; font-size: var(--cw-font-min); padding: 0.35em 0.6em; }
.badge.bg-warning { color: var(--cw-text) !important; }
.badge.bg-light   { color: var(--cw-text) !important; }

/* Bootstrap-Formulare */
.form-control, .form-select {
    --bs-border-radius: var(--cw-radius);
    background: var(--cw-card-sunken);
    border-color: var(--cw-border-strong);
    color: var(--cw-text);
    font-size: 0.9375rem;
    min-height: var(--cw-touch);
}
.form-control:focus, .form-select:focus {
    border-color: var(--cw-primary);
    box-shadow: 0 0 0 3px rgba(var(--cw-primary-rgb), 0.15);
}
.form-label { color: var(--cw-text-secondary); font-weight: 500; font-size: var(--cw-font-sm); }
.input-group-text { background: var(--cw-card-sunken); border-color: var(--cw-border-strong); color: var(--cw-text-secondary); }

/* Bootstrap-Tabellen */
.table {
    --bs-table-color: var(--cw-text);
    --bs-table-border-color: var(--cw-border);
    --bs-table-hover-bg: rgba(var(--cw-primary-rgb), 0.04);
}

/* Bootstrap-Dropdown */
.dropdown-menu {
    --bs-dropdown-border-color: var(--cw-border);
    --bs-dropdown-border-radius: var(--cw-radius);
    --bs-dropdown-link-active-bg: var(--cw-primary-soft);
    --bs-dropdown-link-active-color: var(--cw-primary-dark);
    box-shadow: 0 4px 16px rgba(17, 24, 39, 0.1);
}
.dropdown-item { min-height: var(--cw-touch); display: flex; align-items: center; }

/* Bootstrap-Modal */
.modal-content { border-radius: var(--cw-radius); border-color: var(--cw-border); }
.modal-header, .modal-footer { border-color: var(--cw-border); }


/* ==========================================================================
   3  GRUNDLAGEN & TYPOGRAFIE
   ========================================================================== */

/* Seitliches Überlaufen kappen — aber mit clip statt hidden: hidden macht
   body zum Scroll-Container, und position:sticky (mobiler Kopfbalken,
   Spaltenköpfe) klebt dann nie. hidden bleibt als Rückfall für alte Browser. */
html { overflow-x: hidden; overflow-x: clip; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--cw-font);
    font-size: var(--cw-font-base);
    line-height: 1.5;
    background-color: var(--cw-bg);
    color: var(--cw-text);
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    overflow-x: clip;    /* wie oben: hidden würde position:sticky brechen */
    -webkit-font-smoothing: antialiased;
}

/* Zahlen in gleicher Breite — Spalten fluchten, Werte springen beim
   Aktualisieren nicht. Für eine Datenanwendung nicht kosmetisch. */
table, .cw-kpi-value, .kpi-value, .kpi-card-value, .cf-kpi-value,
.cw-num, input[type="number"] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

h1, h2, h3, h4, h5, h6 { color: var(--cw-text); font-weight: 600; }

a { color: var(--cw-primary); text-decoration: none; }
a:hover { color: var(--cw-primary-dark); text-decoration: underline; }

small, .small { font-size: var(--cw-font-min); }

/* Untergrenze durchsetzen: Bootstraps .small und eigene Winzschriften
   landen sonst bei 0.65rem und sind im Stall nicht mehr lesbar. */
.text-muted { color: var(--cw-text-muted) !important; }
.text-secondary { color: var(--cw-text-secondary) !important; }
.text-success { color: var(--cw-positive) !important; }
.text-danger  { color: var(--cw-negative) !important; }
.text-warning { color: var(--cw-warning) !important; }
.text-info    { color: var(--cw-info) !important; }


/* ==========================================================================
   4  APP-GERÜST
   ========================================================================== */

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

/* --- Sidebar (Desktop) ------------------------------------------------- */
.sidebar {
    width: var(--cw-sidebar-width);
    background: var(--cw-card);
    border-right: 1px solid var(--cw-border);
    position: fixed;
    top: 0; left: 0; bottom: 0;
    overflow-y: auto;
    z-index: 1000;
    display: flex;
    flex-direction: column;
}

.sidebar-brand { padding: var(--cw-space-4); border-bottom: 1px solid var(--cw-border); }
.sidebar-brand img { height: 28px; }

.sidebar-nav {
    flex: 1;
    padding: 6px;
    overflow-y: auto;
    /* Schattenkante: erscheint nur, wenn in der Richtung noch etwas liegt.
       Die Navigation braucht rund 1050px und passt damit auf keinen
       üblichen Bildschirm — ohne diesen Hinweis sieht niemand, dass unter
       der Kante noch Einträge folgen. */
    background:
        linear-gradient(var(--cw-card) 30%, rgba(255, 255, 255, 0)) top / 100% 20px no-repeat local,
        linear-gradient(rgba(255, 255, 255, 0), var(--cw-card) 70%) bottom / 100% 20px no-repeat local,
        radial-gradient(farthest-side at 50% 0, rgba(17, 24, 39, 0.14), rgba(17, 24, 39, 0)) top / 100% 8px no-repeat scroll,
        radial-gradient(farthest-side at 50% 100%, rgba(17, 24, 39, 0.14), rgba(17, 24, 39, 0)) bottom / 100% 8px no-repeat scroll;
}

.sidebar-section {
    padding: 10px 12px 2px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--cw-text-secondary);
    margin: 0;
}
.sidebar-section:first-child { margin-top: 0; }

/* Gerundete Fläche statt Randstreifen — der aktive Eintrag ist eine
   Pille, kein Balken am Rand. */
.sidebar-link {
    display: flex;
    align-items: center;
    min-height: var(--cw-touch);
    margin-bottom: 1px;
    padding: 6px 12px;
    border-radius: var(--cw-radius);
    color: var(--cw-text);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
}
.sidebar-link:hover { background: var(--cw-hover); color: var(--cw-text); text-decoration: none; }
.sidebar-link.active {
    background: var(--cw-primary-soft);
    color: var(--cw-primary-dark);
    font-weight: 600;
}
.sidebar-link i, .sidebar-link .cw-icon {
    width: 20px; margin-right: var(--cw-space-3); font-size: 1.15rem;
    text-align: center; color: var(--cw-text-secondary);
}
.sidebar-link.active i, .sidebar-link.active .cw-icon { color: var(--cw-primary); }
.sidebar-link.disabled { color: var(--cw-text-disabled); pointer-events: none; }

/* 44px sind eine Anforderung für Finger, nicht für die Maus. Am Desktop
   wird die Seitenleiste nur mit Zeiger bedient — dort reichen 38px, und
   die Navigation gewinnt gut 100px Höhe. */
@media (pointer: fine) {
    .sidebar-link { min-height: 36px; padding-top: 6px; padding-bottom: 6px; }
    .sidebar-user { min-height: 36px; }
}

.sidebar-link .badge-soon {
    font-size: var(--cw-font-min);
    padding: 0.15rem 0.4rem;
    background: var(--cw-card-sunken);
    border: 1px solid var(--cw-border);
    color: var(--cw-text-muted);
    border-radius: var(--cw-radius-sm);
    margin-left: auto;
}

.sidebar-divider { height: 1px; background: var(--cw-border-strong); margin: 6px 12px; }

.sidebar-footer { padding: var(--cw-space-3); border-top: 1px solid var(--cw-border); background: var(--cw-card-sunken); }

.sidebar-user {
    display: flex;
    align-items: center;
    min-height: var(--cw-touch);
    padding: var(--cw-space-2);
    border-radius: var(--cw-radius);
    text-decoration: none;
    color: var(--cw-text);
    transition: background 0.15s ease;
}
.sidebar-user:hover { background: var(--cw-card); text-decoration: none; }
.sidebar-user-avatar {
    width: 36px; height: 36px;
    background: var(--cw-primary);
    color: var(--cw-text-on-accent);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: var(--cw-font-sm);
    margin-right: var(--cw-space-3);
    flex-shrink: 0;
}
.sidebar-user-info { flex: 1; min-width: 0; }
.sidebar-user-name { font-weight: 600; font-size: var(--cw-font-min); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-role { font-size: var(--cw-font-min); color: var(--cw-text-muted); }

/* --- Hauptbereich ------------------------------------------------------ */
.main-wrapper {
    flex: 1;
    margin-left: var(--cw-sidebar-width);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0;
}

.top-bar {
    background: var(--cw-card);
    border-bottom: 1px solid var(--cw-border);
    padding: var(--cw-space-3) var(--cw-space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cw-space-4);
    position: sticky;
    top: 0;
    z-index: 100;
    min-height: 56px;
}
.top-bar-title { font-weight: 700; font-size: 1.3rem; letter-spacing: -0.01em; color: var(--cw-text); }
.top-bar-date { font-size: var(--cw-font-sm); color: var(--cw-text-muted); white-space: nowrap; }
.top-bar-date strong { color: var(--cw-text-secondary); font-weight: 600; }

.main-content {
    flex: 1;
    padding: var(--cw-space-5);
    max-width: var(--cw-content-max);
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Layout-Varianten. Seiten setzen sie über {% block main_class %}, statt
   .main-content per !important zu überschreiben. */
.main-content.is-wide {
    max-width: none;
    padding: var(--cw-space-3);
}
/* Seiten mit fixierter Kopfanzeige brauchen mobil Platz darunter */
@media (max-width: 767px) {
    .main-content.hat-fixkopf { padding-top: 70px; }
}

/* --- Berater-Banner ---------------------------------------------------- */
.berater-banner {
    background: var(--cw-warning-fill);
    color: var(--cw-text);              /* dunkel auf Orange: 9.0:1 */
    text-align: center;
    padding: var(--cw-space-2) var(--cw-space-4);
    font-size: var(--cw-font-sm);
    font-weight: 500;
}
.berater-banner a { color: var(--cw-text); margin-left: var(--cw-space-2); text-decoration: underline; }

/* --- Mobiler Kopf ------------------------------------------------------ */
.mobile-header {
    background: var(--cw-card);
    border-bottom: 1px solid var(--cw-border);
    padding: var(--cw-space-3) var(--cw-space-4);
    display: none;
    justify-content: space-between;
    align-items: center;
    gap: var(--cw-space-3);
    position: sticky;
    top: 0;
    z-index: 100;
}
.mobile-header img { height: 26px; }
.mobile-header-right { display: flex; align-items: center; gap: var(--cw-space-3); }
.mobile-header-date { font-size: var(--cw-font-min); color: var(--cw-text-muted); white-space: nowrap; }

/* Seitentitel auf dem Handy: steht auf dem Desktop in der Topbar und darf
   mobil nicht verschwinden. */
.mobile-title {
    display: none;
    font-weight: 700;
    font-size: var(--cw-font-lg);
    color: var(--cw-text);
    padding: var(--cw-space-3) var(--cw-space-4) 0;
}

/* --- Untere Navigation (Handy) ----------------------------------------- */
.bottom-nav {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--cw-card);
    border-top: 1px solid var(--cw-border);
    z-index: 1000;
    padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav-inner { display: flex; justify-content: space-around; align-items: stretch; max-width: 500px; margin: 0 auto; }
.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--cw-text-muted);
    font-size: var(--cw-font-min);
    font-weight: 500;
    padding: var(--cw-space-2) var(--cw-space-1);
    min-width: 64px;
    min-height: var(--cw-bottomnav-h);
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.15s ease;
}
.bottom-nav-item i { font-size: 1.35rem; margin-bottom: 2px; }
.bottom-nav-item:hover { color: var(--cw-text-secondary); text-decoration: none; }
.bottom-nav-item.active { color: var(--cw-primary-dark); font-weight: 600; }
.bottom-nav-item.active i { color: var(--cw-primary); }

/* --- Mehr-Menü --------------------------------------------------------- */
.mehr-overlay { display: none; position: fixed; inset: 0; background: rgba(17, 24, 39, 0.45); z-index: 1100; }
.mehr-overlay.show { display: block; }

.mehr-menu {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--cw-card);
    border-top-left-radius: var(--cw-radius-lg);
    border-top-right-radius: var(--cw-radius-lg);
    box-shadow: var(--cw-shadow-overlay);
    z-index: 1200;
    max-height: 70vh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.25s ease;
    padding-bottom: env(safe-area-inset-bottom);
}
.mehr-menu.show { display: block; transform: translateY(0); }
.mehr-menu-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--cw-space-4) var(--cw-space-5);
    border-bottom: 1px solid var(--cw-border);
    font-weight: 700; font-size: var(--cw-font-lg);
}
.mehr-close {
    background: none; border: none;
    font-size: var(--cw-font-lg); color: var(--cw-text-secondary);
    min-width: var(--cw-touch); min-height: var(--cw-touch);
    cursor: pointer;
}
.mehr-menu-items { padding: var(--cw-space-2) 0; }
.mehr-menu-item {
    display: flex; align-items: center; gap: var(--cw-space-4);
    min-height: var(--cw-touch);
    padding: var(--cw-space-3) var(--cw-space-5);
    color: var(--cw-text); text-decoration: none;
    font-size: var(--cw-font-base); font-weight: 500;
}
.mehr-menu-item:hover { background: var(--cw-card-sunken); text-decoration: none; }
.mehr-menu-item.active { color: var(--cw-primary-dark); background: var(--cw-primary-soft); font-weight: 600; }
.mehr-menu-item i, .mehr-menu-item .cw-icon { font-size: 1.2rem; width: 24px; text-align: center; color: var(--cw-text-muted); }
.mehr-menu-item.active i, .mehr-menu-item.active .cw-icon { color: var(--cw-primary); }
.mehr-menu-divider { height: 1px; background: var(--cw-border); margin: var(--cw-space-2) var(--cw-space-5); }

/* --- Umschaltpunkt ----------------------------------------------------- */
@media (max-width: 768px) {
    .sidebar { display: none; }
    .top-bar { display: none; }
    .main-wrapper { margin-left: 0; padding-bottom: calc(var(--cw-bottomnav-h) + var(--cw-space-4)); }
    .mobile-header { display: flex !important; }
    .mobile-title { display: block; }
    .bottom-nav { display: block !important; }
    .main-content { padding: var(--cw-space-4); max-width: 100vw; }
    }

@media (min-width: 769px) {
    .mobile-header { display: none !important; }
    .mobile-title { display: none !important; }
    .bottom-nav { display: none !important; }
}


/* ==========================================================================
   5  KOMPONENTEN
   Jeweils ein Name plus Alias auf die bisherige Schreibweise.
   ========================================================================== */

/* --- Karte ------------------------------------------------------------- */
.cw-card, .card-cw {
    background: var(--cw-card);
    border: none;
    border-radius: var(--cw-radius);
    padding: 20px;
    margin-bottom: var(--cw-space-4);
    box-shadow: var(--cw-shadow-sm);
}

/* Abschnittsüberschrift: groß, fett, fast schwarz. Klein und grau
   gesperrt liest sich wie ein Formularfeld, nicht wie eine Überschrift. */
.cw-card-header, .card-cw-header {
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.01em;
    color: var(--cw-text);
    margin: 0 0 var(--cw-space-4);
    display: flex;
    align-items: center;
    gap: 10px;
}
.cw-card-header i, .card-cw-header i,
.cw-card-header .cw-icon, .card-cw-header .cw-icon { color: var(--cw-text-secondary); font-size: 1.1rem; }


@media (max-width: 768px) {
    .cw-card, .card-cw { padding: var(--cw-space-4); }}

/* --- Kennzahl ---------------------------------------------------------- */
.cw-kpi, .kpi-box, .kpi-card, .cf-kpi {
    background: var(--cw-card-sunken);
    border: none;
    border-radius: var(--cw-radius);
    padding: 16px 18px;
    height: 100%;
}

.cw-kpi-label, .kpi-label, .kpi-card-label, .cf-kpi-label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--cw-text-secondary);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: var(--cw-space-1);
}

.cw-kpi-value, .kpi-value, .kpi-card-value, .cf-kpi-value {
    font-size: var(--cw-font-value);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--cw-text);
    line-height: 1.1;
}
.cw-kpi-value small, .kpi-card-value small { font-size: var(--cw-font-sm); font-weight: 500; color: var(--cw-text-muted); }

.cw-kpi-unit, .kpi-unit { font-size: var(--cw-font-min); color: var(--cw-text-muted); margin-top: var(--cw-space-1); }
.cw-kpi-sub, .kpi-card-avg, .kpi-card-date { font-size: var(--cw-font-min); color: var(--cw-text-muted); margin-top: var(--cw-space-1); }

/* Wertfarbe nach Bedeutung — nie über eine rohe Farbe im Template */
.cw-kpi-value.is-positive, .cw-value-positive { color: var(--cw-positive); }
.cw-kpi-value.is-negative, .cw-value-negative { color: var(--cw-negative); }
.cw-kpi-value.is-neutral,  .cw-value-neutral  { color: var(--cw-text-muted); }

/* Die Zugehörigkeit trägt das Symbol, nicht ein Randstreifen —
   Streifen an jeder Kachel bringen die Unruhe zurück. */
.cw-kpi.is-cat-iofc .cw-kpi-label i { color: var(--cw-cat-iofc); }
.cw-kpi.is-cat-milk .cw-kpi-label i { color: var(--cw-cat-milk); }
.cw-kpi.is-cat-feed .cw-kpi-label i { color: var(--cw-cat-feed-text); }

/* Kopfzeile der Kennzahl: Text links, Trendpfeil rechts */
.cw-kpi-inner, .kpi-card-inner { display: flex; align-items: center; gap: var(--cw-space-3); }
.cw-kpi-text, .kpi-card-text { flex: 1; min-width: 0; }
.cw-kpi-arrow, .kpi-card-arrow { flex-shrink: 0; display: flex; align-items: center; }
.cw-kpi-arrow i, .trend-arrow { font-size: 2rem; }

/* Untergruppe innerhalb einer Kennzahl (z. B. Milch nat. unter ECM) */
.cw-kpi-group, .kpi-card-gruppe { font-size: var(--cw-font-min); font-weight: 700; color: var(--cw-text-secondary); }
.cw-kpi-split {
    margin-top: var(--cw-space-2);
    padding-top: var(--cw-space-2);
    border-top: 1px solid var(--cw-border);
}
.cw-kpi-split-label { font-size: var(--cw-font-min); color: var(--cw-text-secondary); }
.cw-kpi-split-value { font-weight: 700; font-size: var(--cw-font-lg); color: var(--cw-text); }

/* Kennwert-Chips (Fett, Eiweiß, Harnstoff) */
.cw-chips, .kpi-milch-details { display: flex; gap: var(--cw-space-2); flex-wrap: wrap; margin-top: var(--cw-space-2); }
.cw-chip, .kpi-milch-details span {
    background: var(--cw-fill);
    border: none;
    color: var(--cw-text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 4px 11px;
    border-radius: 999px;
    white-space: nowrap;
}

/* Zustandsfläche der ganzen Kachel — wird per JavaScript umgeschaltet,
   damit die Farben hier stehen und nicht im Skript. */
.cw-kpi.is-state-positive { background: var(--cw-primary-soft); }
.cw-kpi.is-state-positive .cw-kpi-value { color: var(--cw-primary-dark); }
.cw-kpi.is-state-negative { background: #FFEBE9; }
.cw-kpi.is-state-negative .cw-kpi-value { color: var(--cw-negative); }
.cw-kpi.is-state-neutral  { background: var(--cw-card-sunken); }
.cw-kpi.is-state-neutral .cw-kpi-value { color: var(--cw-text-secondary); }

/* Trendpfeil — die farbunabhängige Zweitcodierung */
.cw-trend, .kpi-card-trend { font-size: var(--cw-font-min); font-weight: 600; margin-top: var(--cw-space-1); }
.cw-trend-up,   .trend-up   { color: var(--cw-positive); }
.cw-trend-down, .trend-down { color: var(--cw-negative); }
.cw-trend-flat, .trend-stable { color: var(--cw-text-muted); }

@media (max-width: 768px) {
    .cw-kpi-value, .kpi-value, .kpi-card-value, .cf-kpi-value { font-size: 2rem; }
}



/* --- Schaltflächen ----------------------------------------------------- */
.cw-btn, .btn-cw-primary, .btn-cw-accent, .btn-cw-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cw-space-2);
    min-height: var(--cw-touch);
    padding: 0.625rem var(--cw-space-4);
    border-radius: var(--cw-radius-sm);
    border: 1px solid transparent;
    font-size: var(--cw-font-base);
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.cw-btn:hover { text-decoration: none; }

.cw-btn-primary, .btn-cw-primary {
    background: var(--cw-primary);
    border-color: var(--cw-primary);
    color: var(--cw-text-on-accent);
}
.cw-btn-primary:hover, .btn-cw-primary:hover {
    background: var(--cw-primary-dark);
    border-color: var(--cw-primary-dark);
    color: var(--cw-text-on-accent);
}

.cw-btn-accent, .btn-cw-accent {
    background: var(--cw-warning-fill);
    border-color: var(--cw-warning-fill);
    color: var(--cw-text);
}
.cw-btn-accent:hover, .btn-cw-accent:hover {
    background: var(--cw-accent-dark);
    border-color: var(--cw-accent-dark);
    color: var(--cw-text);
}

/* Sekundär ist eine graue Fläche, kein Umriss — das ist der Kern des
   Erscheinungsbilds. Umrisse an jeder Schaltfläche wirken unruhig. */
.cw-btn-outline, .btn-cw-outline, .cw-btn-ghost {
    background: var(--cw-fill);
    border-color: transparent;
    color: var(--cw-text);
}
.cw-btn-outline:hover, .btn-cw-outline:hover, .cw-btn-ghost:hover {
    background: var(--cw-fill-hover);
    color: var(--cw-text);
}

/* Noch nicht im Markup verwendet — bleibt, weil sie die Button-Familie
   vervollständigt und in der Ausblendliste des Berater-Modus steht, also
   auch für künftiges Markup greift. */
.cw-btn-danger {
    background: var(--cw-negative);
    border-color: var(--cw-negative);
    color: var(--cw-text-on-accent);
}
.cw-btn-danger:hover { background: var(--cw-negative-dark); border-color: var(--cw-negative-dark); color: var(--cw-text-on-accent); }

/* Kleiner Button — bleibt bei 36px, weil er nur neben Text in Tabellen und
   Kartenköpfen steht, nie als Hauptaktion. */
.cw-btn-sm {
    min-height: 36px;
    padding: 0.3rem var(--cw-space-3);
    font-size: var(--cw-font-sm);
}

.cw-btn:disabled, .cw-btn.disabled { opacity: 0.55; cursor: not-allowed; }

/* Sichtbarer Fokus für Tastaturbedienung — fehlte bislang komplett. */
.cw-btn:focus-visible, .btn:focus-visible, .sidebar-link:focus-visible,
.bottom-nav-item:focus-visible, .mehr-menu-item:focus-visible,
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
    outline: 3px solid rgba(var(--cw-primary-rgb), 0.45);
    outline-offset: 2px;
}

/* --- Formulare --------------------------------------------------------- */
.cw-label, .form-label-cw {
    display: block;
    font-weight: 600;
    font-size: var(--cw-font-sm);
    color: var(--cw-text-secondary);
    margin-bottom: var(--cw-space-2);
}

.cw-input, .form-control-cw {
    width: 100%;
    min-height: var(--cw-touch);
    border: 1px solid var(--cw-border-strong);
    border-radius: var(--cw-radius);
    padding: 0.625rem var(--cw-space-3);
    font-size: 0.9375rem;
    color: var(--cw-text);
    background: var(--cw-card-sunken);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cw-input:focus, .form-control-cw:focus {
    border-color: var(--cw-primary);
    box-shadow: 0 0 0 3px rgba(var(--cw-primary-rgb), 0.15);
    outline: none;
}

/* Eingabefeld mit vorangestelltem Symbol (z.B. Suchfeld) — das Symbol liegt
   IM Feld statt in einer eigenen Box davor (gefüllt statt umrandet). */
.cw-input-icon { position: relative; }
.cw-input-icon > .bi {
    position: absolute;
    left: var(--cw-space-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--cw-text-secondary);
    pointer-events: none;
}
.cw-input-icon > .cw-input { padding-left: 2.4rem; }

/* Eingabefeld mit nachgestellter Einheit (z.B. "g") — die Einheit liegt
   rechts IM Feld statt in einer eigenen Box dahinter. */
.cw-input-unit { position: relative; }
.cw-input-unit > .cw-input-unit-label {
    position: absolute;
    right: var(--cw-space-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--cw-text-secondary);
    pointer-events: none;
    font-size: 0.9375rem;
}
.cw-input-unit > .cw-input { padding-right: 2.2rem; }

/* Inaktive Futtermittel: gedämpft, aber lesbar (Katalog-Archivgruppe) */
.fm-inaktiv { opacity: 0.55; }

.no-spinner::-webkit-outer-spin-button,
.no-spinner::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.no-spinner { -moz-appearance: textfield; }

.cw-hint { font-size: var(--cw-font-min); color: var(--cw-text-muted); margin-top: var(--cw-space-1); }

/* --- Tabelle ----------------------------------------------------------- */
.cw-table, .table-cw { width: 100%; border-collapse: separate; border-spacing: 0; }

.cw-table th, .table-cw th {
    background: transparent;
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--cw-text-secondary);
    padding: var(--cw-space-3) var(--cw-space-4);
    border-bottom: 1px solid var(--cw-border-strong);
    text-align: left;
    white-space: nowrap;
}

.cw-table td, .table-cw td {
    padding: var(--cw-space-3) var(--cw-space-4);
    border-bottom: 1px solid var(--cw-border);
    vertical-align: middle;
    font-size: var(--cw-font-base);      /* Messwerte in voller Größe */
    color: var(--cw-text);
}

.cw-table tbody tr:hover, .table-cw tbody tr:hover { background: rgba(var(--cw-primary-rgb), 0.04); }
.cw-table tbody tr:last-child td, .table-cw tbody tr:last-child td { border-bottom: none; }

/* Zahlenspalte */
.cw-table .num, .table-cw .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Waagerecht scrollende Tabelle statt gequetschter Spalten */
.cw-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --- Meldungen --------------------------------------------------------- */
.cw-alert, .alert-cw-success, .alert-cw-warning, .alert-cw-error, .alert-cw-info {
    display: flex;
    align-items: flex-start;
    gap: var(--cw-space-2);
    border-radius: var(--cw-radius);
    padding: var(--cw-space-3) var(--cw-space-4);
    font-size: 0.9375rem;
    border: none;
}
.cw-alert-success, .alert-cw-success { background: var(--cw-positive-soft); color: var(--cw-primary-dark); }
.cw-alert-warning, .alert-cw-warning { background: #FFF6E0;  color: var(--cw-warning); }
.cw-alert-error,   .alert-cw-error   { background: #FFEBE9; color: var(--cw-negative); }
.cw-alert-info,    .alert-cw-info    { background: var(--cw-info-soft);     color: var(--cw-info); }
/* Flash-Kategorie "message" ist Flasks Standard und hatte bisher keine Regel */
.alert-cw-message { background: var(--cw-info-soft); border-color: var(--cw-info-border); color: var(--cw-info); }

/* --- Eigene Symbole ---------------------------------------------------- */
/* Inline-SVG aus _makros.html. Verhält sich wie ein Symbol der Schrift:
   erbt Farbe über currentColor und skaliert mit der Schriftgröße, damit
   eigene und mitgelieferte Symbole nebeneinander gleich wirken. */
.cw-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cw-icon svg {
    width: 1em;
    height: 1em;
    display: block;
}

/* --- Farbpunkt --------------------------------------------------------- */
/* Kleiner Farbtupfer vor einem Label, z. B. in den Grenzwert-Einstellungen.
   Rein erklärend — die Bedeutung steht immer als Text daneben. */
.cw-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    vertical-align: middle;
    border: 1px solid rgba(17, 24, 39, 0.15);
}
.cw-swatch-positive { background: var(--cw-positive); }
.cw-swatch-warning  { background: var(--cw-warning-fill); }
.cw-swatch-negative { background: var(--cw-negative); }

/* --- Hinweisbox -------------------------------------------------------- */
/* Größer als .cw-alert: Überschrift, Aufzählung und Folgeaktion.
   Ersetzt die handgebauten Warnkästen auf der Übersicht, deren
   Überschriften in #F57F17 (2.65:1) und Zusätze in #888 (3.54:1) standen. */
.cw-notice {
    border: none;
    background: var(--cw-card-sunken);
    border-radius: var(--cw-radius);
    padding: 16px 18px;
    margin-bottom: var(--cw-space-4);
}
.cw-notice-title {
    display: flex;
    align-items: center;
    gap: var(--cw-space-2);
    font-weight: 700;
    font-size: 1.0625rem;
    margin-bottom: var(--cw-space-2);
    color: var(--cw-text);
}
.cw-notice ul { margin: 0; padding-left: var(--cw-space-5); list-style: disc; }
.cw-notice li + li { margin-top: var(--cw-space-1); }
.cw-notice-actions { margin-top: var(--cw-space-3); }

.cw-notice-warning { background: #FFF6E0; }
.cw-notice-warning .cw-notice-title { color: var(--cw-warning); }
.cw-notice-danger  { background: #FFEBE9; }
.cw-notice-danger .cw-notice-title { color: var(--cw-negative); }
.cw-notice-info    { background: var(--cw-info-soft); }
.cw-notice-info .cw-notice-title { color: var(--cw-info); }

/* --- Abzeichen --------------------------------------------------------- */
.cw-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--cw-space-1);
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    border: none;
}
.cw-badge-neutral  { background: var(--cw-fill); color: var(--cw-text-secondary); }
.cw-badge-positive { background: var(--cw-positive-soft); color: var(--cw-primary-dark); }
.cw-badge-negative { background: #FFEBE9; color: var(--cw-negative); }
.cw-badge-warning  { background: #FFF6E0;  color: var(--cw-warning); }

/* --- Speicherleiste ---------------------------------------------------- */
/* Ersetzt .save-button-fixed aus ration, ts_messung und schuettelbox —
   dort dreimal identisch mit hartkodiertem bottom: 75px. */
.cw-savebar {
    position: fixed;
    bottom: var(--cw-bottomnav-h);
    left: 0; right: 0;
    padding: var(--cw-space-3) var(--cw-space-4);
    background: var(--cw-card);
    border-top: 1px solid var(--cw-border);
    box-shadow: 0 -2px 8px rgba(17, 24, 39, 0.06);
    z-index: 100;
}
.cw-savebar .cw-btn, .cw-savebar .btn { width: 100%; }

.cw-savebar-spacer { height: calc(var(--cw-bottomnav-h) + 72px); }

@media (min-width: 769px) {
    .cw-savebar {
        position: static;
        padding: 0;
        background: none;
        border: none;
        box-shadow: none;
        margin-top: var(--cw-space-4);
    }
    .cw-savebar .cw-btn, .cw-savebar .btn { width: auto; }
    .cw-savebar-spacer { display: none; }
}

/* Speicherzustand: orange = ungespeichert, grün = gespeichert.
   Beide Zustände tragen zusätzlich ein Icon im Template, damit der
   Unterschied nicht allein an der Farbe hängt. */
.cw-btn-save.is-unsaved, .btn-unsaved {
    background: var(--cw-warning-fill);
    border-color: var(--cw-warning-fill);
    color: var(--cw-text);
}
.cw-btn-save.is-unsaved:hover, .btn-unsaved:hover {
    background: var(--cw-accent-dark);
    border-color: var(--cw-accent-dark);
    color: var(--cw-text);
}
.cw-btn-save.is-saved, .btn-saved {
    background: var(--cw-primary);
    border-color: var(--cw-primary);
    color: var(--cw-text-on-accent);
}
.cw-btn-save.is-saved:hover, .btn-saved:hover {
    background: var(--cw-primary-dark);
    border-color: var(--cw-primary-dark);
    color: var(--cw-text-on-accent);
}

/* --- Listenkarte (mobile Zeilendarstellung) ---------------------------- */
/* Ersetzt .eintrag-mobile, .messung-mobile, .lieferung-mobile,
   .fm-mobile-card und .beladeplan-item. */
.cw-list { display: flex; flex-direction: column; gap: var(--cw-space-2); }

.cw-list-card {
    background: var(--cw-card-sunken);
    border: none;
    border-radius: var(--cw-radius);
    padding: var(--cw-space-3) var(--cw-space-4);
}
.cw-list-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cw-space-3);
    margin-bottom: var(--cw-space-2);
}
.cw-list-card-title { font-weight: 700; font-size: var(--cw-font-base); color: var(--cw-text); }
.cw-list-card-meta { font-size: var(--cw-font-min); color: var(--cw-text-muted); }
.cw-list-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
    gap: var(--cw-space-2) var(--cw-space-3);
}
/* Bei fester Spaltenzahl auto-fit nicht raten lassen: sonst rutscht auf
   390px Gerätebreite der vierte Wert — meist die TMA — allein in eine
   zweite Zeile. */
.cw-list-card-grid.ist-vier { grid-template-columns: repeat(4, 1fr); gap: var(--cw-space-2); }
.cw-list-card-grid.ist-drei { grid-template-columns: repeat(3, 1fr); gap: var(--cw-space-2); }
.cw-list-card-item { display: flex; flex-direction: column; gap: 2px; }
.cw-list-card-item .label { font-size: var(--cw-font-min); color: var(--cw-text-muted); }
.cw-list-card-item .value { font-size: var(--cw-font-base); font-weight: 600; color: var(--cw-text); font-variant-numeric: tabular-nums; }
.cw-list-card-note {
    margin-top: var(--cw-space-2);
    padding-top: var(--cw-space-2);
    border-top: 1px solid var(--cw-border);
    font-size: var(--cw-font-min);
    color: var(--cw-text-secondary);
}
.cw-list-card-actions { display: flex; gap: var(--cw-space-2); margin-top: var(--cw-space-2); }

/* --- Auswahlkarte ------------------------------------------------------ */
/* Ersetzt .gruppe-card aus taegliches, ration_auswahl und beladeplan_auswahl. */
.cw-select-list { display: flex; flex-direction: column; gap: var(--cw-space-3); }

.cw-select-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cw-space-3);
    min-height: 64px;
    padding: var(--cw-space-4);
    background: var(--cw-card-sunken);
    border: none;
    border-radius: var(--cw-radius);
    color: var(--cw-text);
    text-decoration: none;
    transition: background 0.15s ease;
}
.cw-select-card:hover { background: var(--cw-fill); color: var(--cw-text); text-decoration: none; }
.cw-select-card.is-done { background: var(--cw-primary-soft); }
.cw-select-card-title { font-weight: 700; font-size: var(--cw-font-lg); }
.cw-select-card-meta { font-size: var(--cw-font-sm); color: var(--cw-text-secondary); margin-top: 2px; }
.cw-select-card-status { display: flex; align-items: center; gap: var(--cw-space-2); font-size: var(--cw-font-sm); font-weight: 600; }

/* --- Legende ----------------------------------------------------------- */
/* Ersetzt .legende aus auswertung_tma, auswertung_tma_tabelle, futtermittel. */
.cw-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cw-space-3) var(--cw-space-5);
    padding: var(--cw-space-3) 0 0;
    font-size: var(--cw-font-min);
    color: var(--cw-text-secondary);
}
.cw-legend-item { display: flex; align-items: center; gap: var(--cw-space-2); }
.cw-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.cw-legend-dot.is-line { width: 16px; height: 3px; border-radius: 2px; }

/* --- Zeitraum-Umschalter ----------------------------------------------- */
/* Ersetzt .time-btn und .dash-time-btn. */
.cw-segmented {
    display: inline-flex;
    gap: var(--cw-space-2);
    background: transparent;
    border: none;
    padding: 0;
    max-width: 100%;
}
/* Auf schmalen Geräten füllen die Schalter die Breite gleichmäßig, statt
   in eine zweite Zeile zu rutschen und den Rahmen zu zerreißen. */
@media (max-width: 480px) {
    .cw-segmented { display: flex; width: 100%; }
    .cw-segmented-btn, .time-btn, .dash-time-btn { flex: 1; padding: 0 var(--cw-space-1); }
}
/* Pillen statt Segmentkasten */
.cw-segmented-btn, .time-btn, .dash-time-btn {
    min-height: 38px;
    padding: 0 var(--cw-space-4);
    border: none;
    border-radius: 999px;
    background: var(--cw-fill);
    color: var(--cw-text);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.cw-segmented-btn:hover, .time-btn:hover, .dash-time-btn:hover { background: var(--cw-fill-hover); }
.cw-segmented-btn.active, .time-btn.active, .dash-time-btn.active { background: var(--cw-primary); color: var(--cw-text-on-accent); }


/* --- Diagrammbeschriftung ---------------------------------------------- */
.cw-chart-title { font-size: var(--cw-font-base); font-weight: 700; color: var(--cw-text); margin-bottom: var(--cw-space-1); }
.cw-chart-subtitle, .cf-chart-subtitle { font-size: var(--cw-font-sm); font-weight: 600; color: var(--cw-text-secondary); margin: var(--cw-space-3) 0 var(--cw-space-1); }
.cw-chart-loading, .dash-chart-loading { text-align: center; padding: var(--cw-space-6) 0; color: var(--cw-text-muted); }

/* --- Leerzustand ------------------------------------------------------- */
.cw-empty { text-align: center; padding: var(--cw-space-6) var(--cw-space-4); color: var(--cw-text-muted); }
.cw-empty i { font-size: 2rem; color: var(--cw-text-disabled); display: block; margin-bottom: var(--cw-space-3); }


/* --- Lagebild (Startseite) ---------------------------------------------
   Die Statuskarte beantwortet „Wie steht der Betrieb?" in einem Satz,
   bevor die erste Zahl kommt. Die Richtung trägt ein Chevron auf einer
   runden Fläche — Form und Wortlaut, nie nur die Farbe. */
.cw-status { display: flex; gap: var(--cw-space-4); align-items: flex-start; flex-wrap: wrap; }
.cw-status-icon {
    width: 56px; height: 56px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
    flex-shrink: 0;
}
.cw-status-icon.is-auf    { background: var(--cw-primary-soft);  color: var(--cw-primary); }
.cw-status-icon.is-ab     { background: var(--cw-negative-soft); color: var(--cw-negative); }
.cw-status-icon.is-stabil { background: var(--cw-fill);          color: var(--cw-text-secondary); }
.cw-status-text { flex: 1; min-width: 240px; }
.cw-status-kopf {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
}
.cw-status-satz { color: var(--cw-text-secondary); margin-top: var(--cw-space-1); }
.cw-status-hinweise { display: flex; flex-direction: column; align-items: flex-end; gap: var(--cw-space-2); }
.cw-status-hinweise-titel { font-size: var(--cw-font-min); font-weight: 600; color: var(--cw-text-secondary); }
.cw-status-frei { font-size: var(--cw-font-sm); font-weight: 600; color: var(--cw-positive); }
.cw-status-frei .bi { margin-right: 4px; }
@media (max-width: 768px) {
    .cw-status-kopf { font-size: 1.25rem; }
    .cw-status-hinweise { width: 100%; align-items: stretch; margin-top: var(--cw-space-2); }
}

/* Hinweis-Pille: eine offene Aufgabe, gefüllt und anklickbar. Der Farbton
   sagt die Dringlichkeit, Symbol und Text tragen die Bedeutung. */
.cw-hintpill {
    display: inline-flex;
    align-items: center;
    gap: var(--cw-space-2);
    min-height: 40px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: var(--cw-font-sm);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.cw-hintpill:hover { text-decoration: none; }
.cw-hintpill .bi-chevron-right { margin-left: auto; font-size: var(--cw-font-min); }
.cw-hintpill.is-warnung  { background: var(--cw-warning-soft);  color: var(--cw-warning); }
.cw-hintpill.is-warnung:hover  { background: #FBEEC2; color: var(--cw-warning); }
.cw-hintpill.is-dringend { background: var(--cw-negative-soft); color: var(--cw-negative); }
.cw-hintpill.is-dringend:hover { background: #FBDDD9; color: var(--cw-negative); }
.cw-hintpill.is-info     { background: var(--cw-info-soft);     color: var(--cw-info); }
.cw-hintpill.is-info:hover     { background: #D2E7FA; color: var(--cw-info); }
@media (max-width: 768px) {
    .cw-hintpill { min-height: var(--cw-touch); white-space: normal; }
}

/* Unsichere Zahlen: Eine stark veraltete TS-Messung nimmt der TMA-Zahl
   ehrlich die Verbindlichkeit — Wert zurückgenommen, Warnzeile mit Symbol
   und Klartext (Bedeutung nie nur über Farbe). */
.cw-kpi-value.is-unsicher { color: var(--cw-text-secondary); }
.cw-ts-unsicher {
    font-size: var(--cw-font-min);
    font-weight: 600;
    color: var(--cw-warning);
    margin-top: var(--cw-space-1);
}
.cw-status-warnzeile {
    color: var(--cw-warning);
    font-weight: 600;
    margin-top: var(--cw-space-2);
}

/* Wochen-Trend-Abzeichen in den Kacheln: Ø 7 Tage gegen Vorwoche */
.cw-trendbadge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 700;
    margin-top: var(--cw-space-2);
}
.cw-trendbadge { align-self: flex-start; } /* in der Flex-Kachel nicht auf volle Breite strecken */
.cw-trendbadge.is-auf    { background: var(--cw-positive-soft); color: var(--cw-positive); }
.cw-trendbadge.is-ab     { background: var(--cw-negative-soft); color: var(--cw-negative); }
.cw-trendbadge.is-stabil { background: var(--cw-fill);          color: var(--cw-text-secondary); }

/* Klickbare Kennzahl-Kachel: die ganze Karte ist der Link zur Detailsicht.
   Der Chevron im Kopf macht das sichtbar, der Hover bestätigt es. */
a.cw-tile {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
    width: 100%;
    transition: background 0.15s ease;
}
/* Gruppenblock in der TMA-Kachel: füllt die Kachel, damit die Sparkline
   wie bei den Nachbarkacheln am Boden abschließt */
.cw-tile-gruppe { display: flex; flex-direction: column; flex: 1; }
a.cw-tile:hover { background: var(--cw-card-sunken); color: inherit; text-decoration: none; }
.cw-tile .cw-kpi-label { margin-bottom: var(--cw-space-2); }
.cw-tile-pfeil { margin-left: auto; color: var(--cw-text-secondary); font-size: 0.85rem; }
.cw-tile-flach { width: 100%; }
.cw-tile-erklaerung {
    font-size: var(--cw-font-sm);
    color: var(--cw-text-secondary);
    margin-top: var(--cw-space-3);
    line-height: 1.45;
}
.cw-tile.is-cat-iofc .cw-kpi-label i:first-child { color: var(--cw-cat-iofc); }
.cw-tile.is-cat-milk .cw-kpi-label i:first-child { color: var(--cw-cat-milk); }
.cw-tile.is-cat-feed .cw-kpi-label i:first-child { color: var(--cw-cat-feed-text); }

/* Sparkline in der Kachel: 14 Tage, gestrichelt der 30-Tage-Schnitt */
.cw-spark { display: block; width: 100%; height: 40px; margin-top: auto; padding-top: var(--cw-space-3); }
.cw-spark-linie { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.cw-spark-ref { stroke: var(--cw-neutral); stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }

/* Monatsmittel-Streifen unten in den Kacheln: Vormonate als graue Fläche,
   der aktuelle Monat in der Kategoriefarbe der Kachel, quer die
   gestrichelte Jahresschnitt-Linie. */
.cw-strip {
    margin-top: var(--cw-space-3);
    padding-top: var(--cw-space-3);
    border-top: 1px solid var(--cw-border);
}
.cw-strip-kopf {
    display: flex;
    justify-content: space-between;
    gap: var(--cw-space-2);
    font-size: var(--cw-font-min);
    font-weight: 700;
    color: var(--cw-text);
    margin-bottom: var(--cw-space-2);
}
.cw-strip-unter {
    font-size: var(--cw-font-min);
    color: var(--cw-text-secondary);
    margin: -4px 0 var(--cw-space-2);
}
.cw-mbars {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: var(--cw-space-2);
    height: 72px;
}
.cw-mbar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; position: relative; }
.cw-mbar-fuel { background: var(--cw-fill-hover); border-radius: 4px 4px 0 0; text-align: center; }
.is-cat-iofc .cw-mbar.is-aktuell .cw-mbar-fuel { background: var(--cw-cat-iofc); }
.is-cat-milk .cw-mbar.is-aktuell .cw-mbar-fuel { background: var(--cw-cat-milk); }
.is-cat-feed .cw-mbar.is-aktuell .cw-mbar-fuel { background: var(--cw-cat-feed); }
.cw-mbars-linie {
    position: absolute;
    left: 0; right: 0;
    border-top: 2px dashed var(--cw-neutral);
    pointer-events: none;
}
.cw-mbars-labels { display: flex; gap: var(--cw-space-2); margin-top: var(--cw-space-1); }
.cw-mbar-label { flex: 1; text-align: center; font-size: var(--cw-font-min); color: var(--cw-text-secondary); }
.cw-mbar-label.is-aktuell { font-weight: 700; color: var(--cw-text); }


/* ==========================================================================
   6  ANMELDESEITEN
   Eine Karte, dieselben Komponenten wie im angemeldeten Bereich.
   ========================================================================== */

.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--cw-space-5) var(--cw-space-4);
    background: var(--cw-bg);
}

.auth-card {
    background: var(--cw-card);
    border: 1px solid var(--cw-border);
    border-radius: var(--cw-radius);
    box-shadow: 0 2px 12px rgba(17, 24, 39, 0.06);
    max-width: 420px;
    width: 100%;
    overflow: hidden;
}
.auth-card-wide { max-width: 560px; }

.auth-header {
    background: var(--cw-primary);
    color: var(--cw-text-on-accent);
    padding: var(--cw-space-6) var(--cw-space-5);
    text-align: center;
}
/* logo.svg ist in Grüntönen gezeichnet und damit auf der grünen Kopffläche
   unsichtbar. Der Filter macht daraus eine weiße Fassung — die drei Punkte
   bleiben durch ihre unterschiedliche Größe erkennbar. */
.auth-header img {
    height: 38px;
    filter: brightness(0) invert(1);
}
.auth-header p { margin: var(--cw-space-2) 0 0; font-size: var(--cw-font-sm); color: rgba(255, 255, 255, 0.9); }

.auth-body { padding: var(--cw-space-5); }
.auth-footer {
    background: var(--cw-card-sunken);
    padding: var(--cw-space-4) var(--cw-space-5);
    text-align: center;
    border-top: 1px solid var(--cw-border);
    font-size: var(--cw-font-sm);
    color: var(--cw-text-secondary);
}
.auth-section-divider {
    display: flex; align-items: center; gap: var(--cw-space-3);
    margin: var(--cw-space-5) 0 var(--cw-space-4);
    font-size: var(--cw-font-min); font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.4px; color: var(--cw-text-muted);
}
.auth-section-divider::before, .auth-section-divider::after {
    content: ""; flex: 1; height: 1px; background: var(--cw-border);
}

/* Rollenauswahl bei der Registrierung */
.auth-role-select { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cw-space-3); }
.auth-role-option {
    display: flex; flex-direction: column; align-items: center; gap: var(--cw-space-1);
    min-height: 88px; padding: var(--cw-space-3);
    border: 1px solid var(--cw-border-strong); border-radius: var(--cw-radius);
    background: var(--cw-card); color: var(--cw-text-secondary);
    font-size: var(--cw-font-sm); font-weight: 600;
    cursor: pointer; text-align: center;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.auth-role-option i { font-size: 1.5rem; }
.auth-role-option:hover { border-color: var(--cw-primary); background: var(--cw-card-sunken); }
.auth-role-option.active { border-color: var(--cw-primary); background: var(--cw-primary-soft); color: var(--cw-primary-dark); }


/* ==========================================================================
   7  HILFSKLASSEN
   ========================================================================== */


.cw-text-secondary { color: var(--cw-text-secondary); }
.cw-text-muted     { color: var(--cw-text-muted); }
.cw-text-positive  { color: var(--cw-positive); }
.cw-text-negative  { color: var(--cw-negative); }


/* Nur für Screenreader */
.cw-sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Bewegung reduzieren, wenn das System es verlangt */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}


/* ==========================================================================
   8  DRUCK
   Bildschirm-Navigation gehört nicht aufs Papier. beladeplan_print.html
   bringt eigene Druckregeln mit und bleibt davon unberührt.
   ========================================================================== */

@media print {
    .sidebar, .top-bar, .mobile-header, .bottom-nav, .mehr-menu,
    .mehr-overlay, .cw-savebar, .berater-banner { display: none !important; }

    .main-wrapper { margin-left: 0; padding-bottom: 0; }
    .main-content { padding: 0; max-width: none; }

    body { background: #fff; }
    .cw-card, .card-cw, .card { border: 1px solid #999; box-shadow: none; break-inside: avoid; }
    a { color: #000; text-decoration: none; }
}