/* ==========================================================================
   aNuCa UI-Bausteine

   Elemente, die auf mehreren Seiten vorkommen. Setzt anuca-tokens.css voraus.

   Ladereihenfolge:
       anuca-tokens.css  ->  anuca-ui.css  ->  anuca-pages.css

   Alle Klassen sind mit "au-" gepraefixt (aNuCa UI) und kollidieren damit
   nicht mit styles.css, carousel.css oder Bootstrap.

   Diese Datei ist die Grundlage, wenn der neue Stil schrittweise in die
   Anwendung uebernommen wird - Buttons und Textbausteine muessen dort
   nicht neu gebaut werden.
   ========================================================================== */


/* ==========================================================================
   1. Seitengrundlage
   Wird auf den aeusseren Container einer Seite gesetzt.
   ========================================================================== */

.au-page {
    background: var(--al-paper);
    color: var(--al-ink);
    font-family: var(--al-font);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

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

/* Layout-Vererbung aus styles.css neutralisieren: was hier nicht gesetzt
   wird, kann sonst von globalen Regeln durchschlagen. */
.au-page div,
.au-page section,
.au-page p,
.au-page h1,
.au-page h2,
.au-page h3,
.au-page span,
.au-page a,
.au-page ul,
.au-page li {
    float: none;
    clear: none;
}

.au-page h1,
.au-page h2,
.au-page h3 {
    font-family: var(--al-font);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--al-ink);
    text-transform: none;
    text-shadow: none;
}

.au-page p { color: inherit; margin: 0; }
.au-page a { color: inherit; }


/* ==========================================================================
   2. Container
   ========================================================================== */

.au-wrap {
    max-width: 1140px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0 24px;
    float: none;
}

.au-wrap--narrow { max-width: 720px; }


/* ==========================================================================
   3. Textbausteine
   ========================================================================== */

/* Kleines Label ueber einer Ueberschrift */
.au-eyebrow {
    display: block;
    font-family: var(--al-font-mono);
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--al-sage);
    font-weight: 600;
    margin-bottom: 14px;
}

/* Zentrierter Kopf einer Sektion: Eyebrow + Ueberschrift + Beschreibung */
.au-head {
    text-align: center;
    max-width: 560px;
    margin: 0 auto 48px;
}
.au-head h2 { font-size: 30px; margin-bottom: 10px; }
.au-head p { color: var(--al-ink-soft); font-size: 16px; }


/* ==========================================================================
   4. Schaltflaechen
   ========================================================================== */

.au-btn {
    display: inline-block;
    background: var(--al-amber);
    color: #fff;
    padding: 14px 26px;
    border-radius: var(--al-radius);
    border: 0;
    text-decoration: none;
    font-family: var(--al-font);
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}
.au-btn:hover {
    background: var(--al-amber-deep);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

/* Zweitrangige Aktion: Text mit Unterstrich statt Flaeche */
.au-btn-text {
    color: var(--al-ink);
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    border-bottom: 2px solid var(--al-line);
    padding-bottom: 2px;
}
.au-btn-text:hover {
    border-color: var(--al-ink);
    color: var(--al-ink);
    text-decoration: none;
}

/* Dezenter Verweis, der nicht mit einem Button konkurrieren soll */
.au-link-soft {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    color: var(--al-ink-soft);
    text-decoration: none;
    border-bottom: 1px dashed var(--al-line);
    padding-bottom: 1px;
}
.au-link-soft:hover {
    color: var(--al-ink);
    border-color: var(--al-ink-soft);
    text-decoration: none;
}
.au-link-soft i { font-size: 11px; }


/* ==========================================================================
   5. Flaechen
   ========================================================================== */

.au-card {
    background: var(--al-card);
    border: 1px solid var(--al-line);
    border-radius: var(--al-radius);
    padding: 28px 26px;
}

/* Dunkle Flaeche, farblich identisch zur Navigation */
.au-dark {
    background: var(--al-teal);
    border-radius: 14px;
    padding: 34px 36px;
}
.au-dark h2,
.au-dark h3 { color: #fff; }
.au-dark p { color: #C9D6D4; }


/* ==========================================================================
   6. Icon-Kacheln
   Grundform in Amber; die Modulvarianten nur dort einsetzen, wo das
   jeweilige Modul auch benannt ist.
   ========================================================================== */

.au-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(226, 128, 58, 0.12);
    color: var(--al-amber);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.au-icon--analyse      { background: rgba(170, 163, 142, 0.22); color: var(--mod-analyse-dark); }
.au-icon--wachstum     { background: rgba(254, 203, 0, 0.16);   color: var(--mod-wachstum-dark); }
.au-icon--reduktion    { background: rgba(146, 162, 189, 0.22); color: var(--mod-reduktion-dark); }
.au-icon--napfplan     { background: rgba(68, 68, 68, 0.12);    color: var(--mod-napfplan); }
.au-icon--futtermittel { background: rgba(162, 173, 0, 0.16);   color: var(--mod-futtermittel-dark); }
/* Flaeche aus dem Token statt als festes Rot - sonst steht hinter dem
   braunen Symbol weiterhin ein rosa Grund. */
.au-icon--marktplatz   { background: rgba(176, 137, 104, 0.18);  color: var(--mod-marktplatz-dark); }
.au-icon--marktplatz   { background: color-mix(in srgb, var(--mod-marktplatz) 18%, transparent); }


/* ==========================================================================
   7. Kennzeichnungen
   ========================================================================== */

/* Pillenfoermige Auflistung, z.B. fuer Merkmale */
.au-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--al-card);
    border: 1px solid var(--al-line);
    border-radius: 100px;
    padding: 9px 18px;
    font-size: 14px;
    color: var(--al-ink-soft);
}
.au-chip i { color: var(--al-sage); font-size: 12px; }

/* Kleines Label, etwa fuer Zusatzpakete */
.au-tag {
    display: inline-block;
    font-family: var(--al-font-mono);
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--al-sage);
    border: 1px solid var(--al-line);
    background: var(--al-card);
    border-radius: 4px;
    padding: 3px 7px;
}


/* ==========================================================================
   8. Barrierefreiheit
   ========================================================================== */

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


/* ==========================================================================
   9. Modulseiten (Wachstum, Reduktion, Analyse)

   Bausteine fuer die Erfassungsmasken der Module. Jedes Modul setzt seine
   Farbe ueber --modulfarbe, der Rest bleibt gleich - so bekommen alle
   Masken dieselbe Struktur bei eigener Farbcodierung.

   Anwendung:
       <div class="au-modul" style="--modulfarbe: var(--mod-wachstum)">
   ========================================================================== */

/* ---------- Seitenbreite ----------
   Umschliesst alles, was zu einer Modulseite gehoert: Modulkopf,
   Kartenraster, Aufklappbereich, Grafikleiste und Diagramme. Die Begrenzung
   sitzt hier und nicht auf .au-modul, damit alle Bloecke dieselbe linke
   Kante haben - sonst stehen die Karten zentriert und alles darunter
   beginnt am Fensterrand.

   Der Wert steht als Token in anuca-tokens.css und gilt damit fuer alle
   Module, die diese Klasse verwenden. Module ohne die Klasse bleiben
   unberuehrt.                                                              */

.au-seite {
    max-width: var(--al-seitenbreite);
    margin-left: auto;
    margin-right: auto;
    /* Abstand nach oben und unten als Innenabstand, nicht als Aussenabstand:
       .allpagebackground hat oben keinen Innenabstand, ein margin wuerde
       herausfallen und den Dokumenthintergrund zeigen. */
    padding-top: 16px;
    padding-bottom: 40px;
    /* Das Grau aus .world_container wuerde als zentrierte Flaeche neben dem
       Seitenhintergrund stehen. Auf den umgestellten Seiten traegt der
       Hintergrund durchgehend --al-paper. */
    background: transparent;
}

.au-modul {
    --modulfarbe: var(--al-amber);      /* Vorgabe, vom Modul ueberschrieben */
    /* Modulfarben wie --mod-wachstum haben auf Weiss zu wenig Kontrast
       fuer Text und Symbole. --modulfarbe-kontrast traegt alles, was
       gelesen werden muss; --modulfarbe alles, was nur Flaeche ist. */
    --modulfarbe-kontrast: var(--al-sage);
    background: var(--al-paper);
    color: var(--al-ink);
    font-family: var(--al-font);
}

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


/* ---------- Kopfzeile ---------- */

.au-modulkopf {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 20px;
    background: var(--al-card);
    border: 1px solid var(--al-line);
    border-left: 4px solid var(--modulfarbe);
    border-radius: var(--al-radius);
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(52, 58, 64, 0.06),
                0 6px 16px -10px rgba(52, 58, 64, 0.10);
}

.au-modulkopf-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--modulfarbe) 18%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.au-modulkopf-icon img { width: 26px; height: 26px; }

.au-modulkopf h1 {
    font-size: 21px;
    font-weight: 600;
    margin: 0;
    letter-spacing: -0.01em;
}
.au-modulkopf-nummer {
    font-family: var(--al-font-mono);
    font-size: 13px;
    color: var(--al-ink-soft);
    display: block;
    margin-top: 2px;
}

/* Aktionen rechts, rutschen auf schmalen Schirmen in die naechste Zeile */
.au-modulkopf-aktionen {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Kompaktes Eingabefeld fuer die Teilen-Funktion */
.au-kopf-teilen {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    border: 1px solid var(--al-line);
    border-radius: 8px;
    background: var(--al-card);
}
.au-kopf-teilen input {
    border: 0;
    outline: none;
    background: none;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--al-ink);
    padding: 8px 0;
    width: 190px;
}
.au-kopf-teilen:focus-within { border-color: var(--modulfarbe); }


/* ---------- Kartenraster ----------
   Feste Spaltenzahl statt auto-fit: die Anordnung aendert sich nur an den
   beiden hier gesetzten Punkten und nicht laufend beim Ziehen des Fensters.
   Module mit anderer Kartenzahl setzen --spalten selbst.
   minmax(0, 1fr) statt 1fr verhindert, dass ein langer Feldinhalt die
   Spalte ueber ihre Breite hinaus aufzieht.                               */

.au-kartenraster {
    --spalten: 3;
    display: grid;
    grid-template-columns: repeat(var(--spalten), minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;      /* Karten einer Zeile gleich hoch */
    margin-bottom: 16px;
}
.au-kartenraster--zwei  { --spalten: 2; }
.au-kartenraster--breit { --spalten: 2; }

/* Vier Karten: der Ausgangszustand ist der 2x2-Block, die vierte Spalte kommt
   erst ab 1180px dazu. Drei Spalten gibt es hier nicht - eine Karte stuende
   sonst allein in der zweiten Zeile.

   Absichtlich als min-width formuliert und ganz ans Ende gestellt: die beiden
   allgemeinen Punkte darunter haben dieselbe Spezifitaet, es entscheidet also
   die Reihenfolge. Mit einer max-width-Regel weiter oben kippt die Anordnung,
   sobald jemand die Datei umsortiert oder eine Regel dazwischenschiebt. */
.au-kartenraster--vier  { --spalten: 2; }

@media (max-width: 1180px) { .au-kartenraster { --spalten: 2; } }
@media (max-width: 780px)  { .au-kartenraster { --spalten: 1; } }

@media (min-width: 1181px) { .au-kartenraster--vier { --spalten: 4; } }


/* ---------- Formularkarte ---------- */

.au-formcard {
    background: var(--al-card);
    border: 1px solid var(--al-line);
    border-radius: var(--al-radius);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    /* Weisse Karten auf hellem Grund heben sich kaum ab. Ein dezenter
       Schatten gibt Tiefe, ohne den Grundton aendern zu muessen. */
    box-shadow: 0 1px 3px rgba(52, 58, 64, 0.06),
                0 6px 16px -10px rgba(52, 58, 64, 0.10);
}

.au-formcard-titel {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--al-ink-soft);
    padding-bottom: 10px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--al-line);   /* Rueckfall */
    border-bottom: 2px solid color-mix(in srgb, var(--modulfarbe) 55%, var(--al-line));
}
.au-formcard-titel i { color: var(--modulfarbe-kontrast); font-size: 14px; }


/* ---------- Felder ----------
   Zwei Spalten je Karte, fest. Damit steht jedes Feld immer an derselben
   Stelle und der Aufriss bleibt beim Verbreitern des Fensters erhalten. */

.au-felder {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
}
.au-felder--eins { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 480px) {
    .au-felder { grid-template-columns: minmax(0, 1fr); }
}

/* justify-content: space-between drueckt das Eingabefeld an das untere Ende.
   Damit liegen die Felder einer Zeile auf einer Linie, auch wenn ein Label
   zweizeilig umbricht und ein anderes nicht. */
.au-feld {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 4px;
    min-width: 0;
}

/* Das hidden-Attribut setzt display: none - allerdings nur im
   Browser-Stylesheet. Die Regel oben ist eine Autorenregel und gewinnt
   damit, ein <div class="au-feld" hidden> bliebe sichtbar. Dasselbe gilt
   fuer jede andere Klasse, die display setzt. */
.au-feld[hidden] { display: none; }

.au-feld label,
.au-feld .au-label {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--al-ink-soft);
    margin: 0;
}

.au-feld input[type="text"],
.au-feld input[type="email"],
.au-feld input[type="date"],
.au-feld input[type="number"],
.au-feld select,
.au-feld textarea {
    width: 100%;
    padding: 8px 10px;
    font-size: 14px;
    font-family: inherit;
    color: var(--al-ink);
    background: var(--al-card);
    border: 1px solid var(--al-line);
    border-radius: 7px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.au-feld textarea { resize: vertical; min-height: 84px; }

.au-feld input:focus,
.au-feld select:focus,
.au-feld textarea:focus {
    border-color: var(--modulfarbe);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--modulfarbe) 22%, transparent);
}

/* Nur-Lese-Felder wie Alter oder berechnete Dauer */
/* Nur-Lese-Felder tragen oft laengere Angaben wie "54 Monate, 0 Woche(n)".
   Etwas kleinere Schrift verhindert, dass der Text abgeschnitten wird. */
.au-feld input[readonly],
.au-feld input:disabled {
    background: var(--al-paper);
    color: var(--al-ink-soft);
    font-size: 13px;
}

.au-feld-fehler { font-size: 12px; color: var(--al-warn); }


/* Elterntiere: zwei Spalten nebeneinander, damit Vater und Mutter direkt
   vergleichbar bleiben. Fest gesetzt, damit die Gegenueberstellung nicht
   je nach Fensterbreite verloren geht. */
.au-eltern {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
}
.au-eltern .au-slider-wert { font-size: 14px; }


/* ---------- Schieberegler mit Wertanzeige ---------- */

.au-slider-kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}
.au-slider-label { font-size: 12.5px; font-weight: 600; color: var(--al-ink-soft); }
.au-slider-wert {
    font-family: var(--al-font-mono);
    font-size: 17px;
    font-weight: 600;
    color: var(--al-ink);
}
.au-slider-wert--gross { font-size: 24px; color: var(--al-amber-deep); }

.au-modul input[type="range"] { width: 100%; margin: 2px 0 0; }


/* ---------- Aufklappbereich ----------
   Ersetzt die bisherigen Button-artigen Umschalter: sichtbar als Zeile mit
   Pfeil, nicht als Schaltflaeche - das entspricht dem, was passiert.       */

.au-aufklapp {
    background: var(--al-card);
    border: 1px solid var(--al-line);
    /* Gleiche Kante wie der Modulkopf: beide sind eigenstaendige
       Bloecke auf Seitenebene und gehoeren sichtbar zusammen. */
    border-left: 4px solid var(--modulfarbe);
    border-radius: var(--al-radius);
    margin-bottom: 16px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(52, 58, 64, 0.06);
}

.au-aufklapp-kopf {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 14px 20px;
    background: none;
    border: 0;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--al-ink);
    text-align: left;
    cursor: pointer;
}
.au-aufklapp-kopf:hover { background: var(--al-paper); }
.au-aufklapp-kopf::after {
    content: '';
    margin-left: auto;
    width: 8px; height: 8px;
    border-right: 2px solid var(--al-ink-soft);
    border-bottom: 2px solid var(--al-ink-soft);
    transform: rotate(45deg);
    transition: transform 0.18s ease;
}
.au-aufklapp-kopf[aria-expanded="true"]::after { transform: rotate(-135deg); }
.au-aufklapp-kopf i { color: var(--modulfarbe); }

.au-aufklapp-inhalt { padding: 4px 20px 20px; }


/* ---------- Aktionsschaltflaeche ----------
   Fuer die jeweils wichtigste Aktion eines Bereichs. Getragen von
   --al-amber und nicht von der Modulfarbe: Gelb traegt keine weisse
   Schrift, Amber schon. Modulunabhaengig, damit Analyse, Reduktion
   und Marktplatz dieselbe Schaltflaeche bekommen.               */

.au-btn-primaer {
    /* inline-flex, damit die Klasse auch auf einem <a> traegt - etwa fuer
       "Neue Planung" in den Uebersichtsseiten. */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    background-color: var(--al-amber);
    border: 1px solid var(--al-amber);
    color: #FFFFFF;
    font-weight: 600;
    padding: 5px 16px;
    border-radius: 8px;
    white-space: nowrap;
    transition: background-color 120ms ease-in, border-color 120ms ease-in;
}

.au-btn-primaer:hover,
.au-btn-primaer:focus,
.au-btn-primaer:active {
    background-color: var(--al-amber-deep);
    border-color: var(--al-amber-deep);
    color: #FFFFFF;
    box-shadow: none;
    text-decoration: none;
}

/* Tastaturbedienung sichtbar halten - der Fokusring von Bootstrap
   entfaellt durch box-shadow: none oben. */
.au-btn-primaer:focus-visible {
    outline: 2px solid var(--al-ink);
    outline-offset: 2px;
}

/* Nicht verfuegbar.

   Ohne diese Regel sieht eine deaktivierte Schaltflaeche genauso aus wie
   eine bedienbare: das disabled-Attribut unterbindet nur den Klick, es
   aendert die Darstellung nicht. Bootstrap bringt das fuer .btn mit, und
   genau deshalb ist es beim Wechsel auf .au-btn-primaer verlorengegangen -
   eine Schaltflaeche, die zum Klicken einlaedt und nichts tut.

   Kein Amber mehr, sondern neutral: die Farbe der Hauptaktion soll nur dort
   stehen, wo auch etwas passiert. */
.au-btn-primaer:disabled,
.au-btn-primaer.disabled {
    background-color: var(--al-paper);
    border-color: var(--al-line);
    color: var(--al-ink-soft);
    cursor: not-allowed;
    opacity: 0.75;
}
.au-btn-primaer:disabled:hover,
.au-btn-primaer.disabled:hover {
    background-color: var(--al-paper);
    border-color: var(--al-line);
    color: var(--al-ink-soft);
}


/* ---------- Schaltflaechen ---------- */

.au-modul .au-aktion {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    border-radius: 8px;
    border: 1px solid var(--al-line);
    background: var(--al-card);
    color: var(--al-ink);
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.au-modul .au-aktion:hover {
    border-color: var(--al-ink-soft);
    text-decoration: none;
    color: var(--al-ink);
}
.au-modul .au-aktion--symbol { padding: 9px 11px; }

/* Hauptaktion, etwa Speichern */
.au-modul .au-aktion--primaer {
    background: var(--al-teal);
    border-color: var(--al-teal);
    color: #fff;
}
.au-modul .au-aktion--primaer:hover { background: #23272b; color: #fff; }

.au-modul .au-aktion:disabled,
.au-modul .au-aktion.disabled { opacity: 0.5; cursor: not-allowed; }


@media (max-width: 640px) {
    .au-modulkopf-aktionen { margin-left: 0; width: 100%; }
    .au-formcard { padding: 16px; }
}


/* ==========================================================================
   10. Wochentabelle

   Verlaufstabelle mit Sollwerten je Woche und den erfassten Ist-Gewichten.
   Verwendet in der Wachstumsplanung und in der Reduktionsplanung; die
   Bausteine sind deshalb modulunabhaengig und nehmen ihre Farbe aus
   --modulfarbe.

   Die Ist-Gewichte werden direkt in der Tabelle erfasst und bearbeitet.
   Gespeichert wird weiterhin datumsgenau ueber die vorhandenen
   Formularfelder - die Tabelle ist reine Darstellung.
   ========================================================================== */

/* Rechtsbuendig, damit die Eingabe ueber der Spalte steht, in der der
   Wert danach erscheint. Bricht die Zeile um, waere rechtsbuendig eine
   Treppe - darum unter 700px wieder linksbuendig. */
.wt-neu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 14px;
    margin-bottom: 12px;
    background: var(--al-card);
    border: 1px solid var(--al-line);
    border-radius: var(--al-radius);
}
.wt-neu-titel {
    font-size: 13px;
    font-weight: 600;
    color: var(--al-ink-soft);
    margin-right: 4px;
}
.wt-neu-einheit { font-size: 13px; color: var(--al-ink-soft); }

@media (max-width: 700px) {
    .wt-neu { justify-content: flex-start; }
}

/* Eine Zeile je Messung - mehrere Messungen einer Woche untereinander.
   Gewicht und Datum stehen links am Spaltenanfang, das Loeschsymbol am
   rechten Rand. Das haelt die Schaltflaechen mehrerer Messungen einer Woche
   untereinander auf einer Linie. */
.wt-ist-zeile {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
}
/* Feste Breite mit rechtsbuendiger Zahl: damit stehen die Kommastellen
   mehrerer Messungen untereinander, auch bei zwei- und dreistelligen
   Gewichten. */
.wt-ist-wert {
    font-size: 13px;
    font-weight: 600;
    color: var(--al-ink);
    min-width: 62px;
    text-align: right;
}
.wt-ist-datum { font-size: 12px; color: var(--al-ink-soft); white-space: nowrap; }
/* Loeschen als erkennbarer Button statt als unauffaelliges Zeichen */
.wt-ist-loeschen {
    margin-left: auto;
    width: 22px;
    height: 22px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    line-height: 1;
    color: var(--al-warn);
    background: color-mix(in srgb, var(--al-warn) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--al-warn) 25%, transparent);
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.wt-ist-loeschen:hover {
    background: color-mix(in srgb, var(--al-warn) 22%, transparent);
    border-color: color-mix(in srgb, var(--al-warn) 45%, transparent);
}

/* Ist-Spalte optisch als Erfassungsbereich absetzen.
   Zuvor standen hier feste Gelbtoene aus der Wachstumsplanung - in der
   Reduktion haette die Tabelle damit die Farbe des falschen Moduls
   getragen. */
.wt-ist-spalte {
    background: var(--al-paper);                       /* Rueckfall */
    background: color-mix(in srgb, var(--modulfarbe) 8%, transparent);
    border-left: 2px solid var(--al-line);             /* Rueckfall */
    border-left: 2px solid color-mix(in srgb, var(--modulfarbe) 45%, var(--al-line));
    /* Etwas Luft zur Trennlinie und zum rechten Rand - sonst kleben Wert und
       Loeschsymbol an den Kanten der Spalte. */
    padding-left: 12px !important;
    padding-right: 10px !important;
}

/* Abweichung vom Sollwert - nur eingefaerbt, wenn die eingestellte
   Toleranz ueber- oder unterschritten wird. In der Reduktion gibt es
   keine Toleranzen; dort bleibt die Abweichung durchgehend neutral. */
.wt-abw { font-size: 13px; color: var(--al-ink-soft); padding: 3px 0; }
.wt-abw--ausserhalb { color: var(--al-warn); font-weight: 600; }


/* ==========================================================================
   11. Tierauswahl

   Ueberschreibt Vorgaben aus styles.css und muss deshalb spaeter
   geladen werden - anuca-ui.css steht im Template hinter styles.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tierauswahl

   styles.css hellt die nicht gewaehlte Tierart mit
   filter: brightness(1.8) grayscale(1) opacity(.7) auf. Das funktioniert
   nur bei dunklen Symbolen: das helle Katzensymbol wird dabei auf weissem
   Grund praktisch unsichtbar.

   Innerhalb des neuen Designs wird die Auswahl deshalb ueber eine Flaeche
   geloest statt ueber eine Aufhellung - das Symbol bleibt in beiden
   Zustaenden erkennbar, und der gewaehlte Zustand traegt die Modulfarbe.
   -------------------------------------------------------------------------- */

.au-modul .cc-selector {
    display: flex;
    gap: 10px;
    align-items: center;
}

.au-modul .drinkcard-cc {
    width: 84px;
    height: 74px;
    margin-top: 0;
    background-color: var(--al-card);
    background-position: center;
    background-size: 52px 52px;
    border: 1px solid var(--al-line);
    border-radius: var(--al-radius);
    /* Kein brightness(): das wuerde helle Symbole ausloeschen. Graustufe
       und Deckkraft reichen aus, um den Zustand zu unterscheiden. */
    filter: grayscale(1) opacity(0.5);
    transition: filter 120ms ease-in, border-color 120ms ease-in,
                background-color 120ms ease-in;
}

.au-modul .drinkcard-cc:hover {
    filter: grayscale(0.4) opacity(0.85);
    border-color: var(--modulfarbe);
}

/* Hoehere Spezifitaet als die Regel in styles.css, damit der gewaehlte
   Zustand hier greift. */
.au-modul .cc-selector input:checked + .drinkcard-cc {
    filter: none;
    border-color: var(--modulfarbe);
    background-color: var(--al-card);   /* Rueckfall fuer aeltere Browser */
    background-color: color-mix(in srgb, var(--modulfarbe) 14%, white);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--modulfarbe) 28%, transparent);
}


/* ==========================================================================
   12. Grafikleiste

   Die Schalterleiste ueber den Wachstumskurven. In styles.css liegt auf
   #kalkuliertekopfdatendiv ein flaechiges Grau (rgb(206,210,215)) aus der
   Bootstrap-4-Zeit. Es wird hier nur fuer die umgestellten Module
   ueberschrieben - die uebrigen Seiten behalten ihre bisherige Darstellung,
   bis sie an der Reihe sind.

   Die Leiste ist eine Bedieneinheit, kein Inhalt: helle Flaeche wie die
   Karten, aber ohne farbige Modulkante. Die traegt nur, was die Seite
   gliedert - Modulkopf und Aufklappbereich.

   Achtung: dieser Block liegt ausserhalb von .au-modul, --modulfarbe ist
   hier also nicht gesetzt. Nur neutrale Token verwenden.
   ========================================================================== */

#kalkuliertekopfdatendiv {
    min-height: 0;
    padding: 12px 16px;
    margin-bottom: 16px;
    background: var(--al-card);
    border: 1px solid var(--al-line);
    border-radius: var(--al-radius);
    font-family: var(--al-font);
    font-size: 13px;
    color: var(--al-ink);
    box-shadow: 0 1px 3px rgba(52, 58, 64, 0.06);
}

/* Gleiche Auszeichnung wie die Kartentitel, damit die Leiste als
   gleichrangige Ueberschrift gelesen wird. */
#kalkuliertekopfdatendiv .titelzeile {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--al-ink-soft);
    line-height: 24px;
}

/* Die Beschriftungen der Schalter stehen im Template als inline-divs.
   Sie bekommen hier einheitliche Groesse und Farbe, ohne dass am
   Markup etwas geaendert werden muss. */
#kalkuliertekopfdatendiv div[style*="inline"] {
    font-size: 13px;
    color: var(--al-ink-soft);
    line-height: 24px;
}

/* Der Schieberegler der X-Skalierung sitzt sonst zu dicht an den
   Schaltern darueber. */
#kalkuliertekopfdatendiv #graph_xranges {
    vertical-align: middle;
}


/* --------------------------------------------------------------------------
   Schalter im ausgeschalteten Zustand

   styles.css gibt der Schiene im Aus-Zustand #fafafa. Auf dem bisherigen
   grauen Untergrund war sie damit sichtbar, auf der jetzt hellen Flaeche
   verschwindet sie - zu sehen ist nur noch der orange Knopf, und der sieht
   frei schwebend aus.

   Geloest ueber Fuellung und einen inneren Rand als box-shadow. Ein echter
   border wuerde die Schiene um einen Pixel einruecken und den Knopf
   verschieben, der ueber left/bottom positioniert ist; box-shadow wirkt
   sich auf die Geometrie nicht aus.
   -------------------------------------------------------------------------- */

.au-modul .slider_switch,
#kalkuliertekopfdatendiv .slider_switch {
    background-color: var(--al-line);
    box-shadow: inset 0 0 0 1px rgba(23, 40, 42, 0.22);
}

/* Eingeschaltet bleibt die dunkle Schiene aus styles.css - dort traegt
   der Kontrast bereits, ein zusaetzlicher Rand wuerde ihn nur truebern. */
.au-modul input:checked + .slider_switch,
#kalkuliertekopfdatendiv input:checked + .slider_switch {
    box-shadow: none;
}

/* Tastaturfokus sichtbar halten, ohne den inneren Rand zu verlieren. */
.au-modul input:focus + .slider_switch,
#kalkuliertekopfdatendiv input:focus + .slider_switch {
    box-shadow: inset 0 0 0 1px rgba(23, 40, 42, 0.22),
                0 0 0 2px rgba(226, 128, 58, 0.35);
}

/* Nicht verfuegbare Schalter (Paket Fun) sollen sich vom bloss
   ausgeschalteten Zustand unterscheiden. */
.au-modul .slider_switch.disabled,
#kalkuliertekopfdatendiv .slider_switch.disabled {
    opacity: 0.45;
}


/* ==========================================================================
   13. Individuelle Gewichtsplanung

   25 gleichartige Eingaben, eine je Lebensmonat. Als Tabelle brauchte das
   rund 1870px und lief damit ueber die Seitenbreite hinaus - mit zwei
   Folgen: waagerechter Rollbalken, und rechts neben dem Inhalt wurde der
   weisse Seitenkoerper sichtbar, weil .allpagebackground nur so breit ist
   wie das Fenster.

   Als umbrechendes Raster passt sich der Block jeder Breite an. Die Zellen
   haben eine feste Breite statt 1fr, damit die Felder bei wenigen Spalten
   nicht unfoermig breit werden.
   ========================================================================== */

.au-monatsraster-rahmen {
    padding: 14px 16px;
    margin-bottom: 16px;
    background: var(--al-card);
    border: 1px solid var(--al-line);
    border-radius: var(--al-radius);
    font-family: var(--al-font);
    box-shadow: 0 1px 3px rgba(52, 58, 64, 0.06);
}

.au-monatsraster-titel {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--al-ink-soft);
    margin-bottom: 12px;
}

.au-monatsraster {
    display: grid;
    grid-template-columns: repeat(auto-fill, 76px);
    justify-content: start;
    gap: 8px;
}

.au-monatsfeld {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 0;
}

.au-monatsfeld-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--al-ink-soft);
    text-align: center;
}

.au-monatsfeld input {
    width: 100%;
    padding: 5px 4px;
    text-align: center;
    font-size: 13px;
    color: var(--al-ink);
    background: var(--al-card);
    border: 1px solid var(--al-line);
    border-radius: 6px;
}

.au-monatsfeld input:focus {
    outline: none;
    border-color: var(--al-amber);
    box-shadow: 0 0 0 2px rgba(226, 128, 58, 0.18);
}


/* --------------------------------------------------------------------------
   Seitenkoerper

   Faellt ein Block doch einmal breiter aus als das Fenster, wird rechts
   daneben der Hintergrund des Dokuments sichtbar - .allpagebackground ist
   nur fensterbreit. Derselbe Effekt entsteht in Abstaenden zwischen zwei
   Bloecken, etwa zwischen Inhalt und Fusszeile: .world_container hat in
   styles.css 10px Aussenabstand nach unten, und der faellt aus
   .allpagebackground heraus, weil dort kein Innenabstand nach unten steht.

   body muss mitgesetzt werden: Bootstrap gibt dem Element in reboot.css
   ausdruecklich background-color: #fff. Eine Farbe allein auf html wird
   davon verdeckt, weil der Hintergrund von body die Zeichenflaeche
   uebernimmt, sobald er nicht transparent ist.
   -------------------------------------------------------------------------- */

html,
body {
    background-color: var(--al-paper);
}


/* ==========================================================================
   14. Uebersichtstabellen

   Die Einstiegsseite je Modul: eine DataTables-Tabelle mit allen
   gespeicherten Planungen. Die Tabelle behaelt id und die Klassen
   "display compact", damit die Initialisierung in analysen.js unveraendert
   greift - gestaltet wird ausschliesslich ueber zusaetzliche Klassen.

   Die Gruppenfarben der Kopfzeile kamen bisher als feste Gelbtoene aus dem
   Markup. Sie leiten sich jetzt aus --modulfarbe ab: dieselbe Tabelle
   traegt in Reduktion Graublau und in Analyse Taupe, ohne dass am Template
   etwas geaendert werden muss.
   ========================================================================== */

.au-tabellenkarte {
    overflow-x: auto;          /* breite Tabelle rollt in der Karte, nicht
                                  im Dokument */
    margin-bottom: 24px;
}

.au-datentabelle {
    width: 100%;
    font-size: 13px;
    color: var(--al-ink);
    border-collapse: collapse;
}

.au-datentabelle thead th {
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--al-ink);
    background: var(--al-card);
    border-bottom: 1px solid var(--al-line);
    /* Kein nowrap: bei 13 Spalten erzwingen die Ueberschriften sonst eine
       Mindestbreite, die den Rollbalken schon bei voller Seitenbreite
       ausloest. Der Rollbalken der Karte bleibt als Rueckfall bestehen. */
    vertical-align: bottom;
}

.au-datentabelle tbody td {
    /* 11px statt 7px: mit Symbolschaltern in der Zeile war die Hoehe zu
       knapp, die Symbole standen gedraengt zwischen den Trennlinien. */
    padding: 11px 10px;
    border-bottom: 1px solid var(--al-line);
    vertical-align: middle;
}

.au-datentabelle tbody tr:hover td {
    background: var(--al-paper);
}

/* Gruppenbaender der oberen Kopfzeile. Drei Abstufungen derselben
   Modulfarbe statt drei einzeln gewaehlter Toene. */
.au-tabgruppe {
    text-align: center;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--al-line);
}
/* Die Selektoren tragen thead th mit, weil .au-datentabelle thead th
   darueber bereits einen Hintergrund setzt und sonst gewinnt. */
.au-datentabelle thead th.au-tabgruppe--1 { background: var(--al-paper); }
.au-datentabelle thead th.au-tabgruppe--1 { background: color-mix(in srgb, var(--modulfarbe) 14%, var(--al-card)); }
.au-datentabelle thead th.au-tabgruppe--2 { background: var(--al-paper); }
.au-datentabelle thead th.au-tabgruppe--2 { background: color-mix(in srgb, var(--modulfarbe) 30%, var(--al-card)); }
.au-datentabelle thead th.au-tabgruppe--3 { background: var(--al-line); }
.au-datentabelle thead th.au-tabgruppe--3 { background: color-mix(in srgb, var(--modulfarbe) 50%, var(--al-card)); }

/* Nummernspalte: fuehrt in die Planung und ist die wichtigste Aktion
   der Zeile. */
.au-nummernlink {
    display: inline-block;
    min-width: 52px;
    padding: 3px 10px;
    font-family: var(--al-font-mono);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    color: var(--al-ink);
    background: var(--al-paper);
    border: 1px solid var(--al-line);
    border-radius: 6px;
    text-decoration: none;
}
.au-nummernlink:hover {
    color: var(--al-ink);
    text-decoration: none;
    border-color: var(--modulfarbe);
    background: var(--al-card);
}

/* Zugriff auf ein hinterlegtes Dokument. Als beschriftete Marke und nicht
   als blosses Symbol: ein PDF-Symbol allein in einer schmalen Zelle ist
   schwer zu erkennen und sagt nicht, dass es anklickbar ist. */
.au-dokument {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--al-ink-soft);
    background: var(--al-card);
    border: 1px solid var(--al-line);
    border-radius: 20px;
    text-decoration: none;
    white-space: nowrap;
}
.au-dokument i { font-size: 15px; color: var(--al-warn); }
.au-dokument:hover {
    color: var(--al-ink);
    border-color: var(--al-ink-soft);
    background: var(--al-paper);
    text-decoration: none;
}

/* Zaehler fuer verknuepfte Analysen und Dateianhaenge. */
.au-zaehler {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--al-ink-soft);
    background: var(--al-paper);
    border: 1px solid var(--al-line);
    border-radius: 20px;
    white-space: nowrap;
}
.au-zaehler--leer {
    background: transparent;
    border-color: transparent;
    color: var(--al-line);
}

/* Fortschritt einer laufenden Planung.

   Ersetzt die Bootstrap-Progressbar aus der Reduktionsuebersicht: deren
   bg-info, bg-success und bg-warning stammen aus einer fremden Palette und
   fuellten die Spalte ueber die ganze Breite ein, auch wenn nichts lief.
   Hier traegt der Balken die Modulfarbe, und die beiden Endzustaende
   "geplant" und "beendet" stehen als Statusmarke - ein Balken auf 100 oder
   0 Prozent sagt weniger als das Wort.

   Der Wert liegt ueber dem Balken und nicht dahinter: sonst verschwindet er
   bei kleinem Fortschritt aus der Spalte. */
.au-fortschritt {
    position: relative;
    min-width: 92px;
    height: 20px;
    background: var(--al-paper);
    border: 1px solid var(--al-line);
    border-radius: 20px;
    overflow: hidden;
}

.au-fortschritt-balken {
    height: 100%;
    background: var(--al-line);                        /* Rueckfall */
    background: color-mix(in srgb, var(--modulfarbe) 55%, var(--al-card));
    transition: width 0.2s ease;
}

.au-fortschritt-wert {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--al-ink);
}

/* Aktionen innerhalb einer Zeile - klein und zurueckhaltend, damit die
   Daten die Tabelle tragen und nicht eine Wand aus Schaltflaechen. */
.au-zeilenaktion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: 13px;
    color: var(--al-ink-soft);
    background: var(--al-card);
    border: 1px solid var(--al-line);
    border-radius: 6px;
    cursor: pointer;
}
.au-zeilenaktion:hover {
    color: var(--al-ink);
    border-color: var(--al-ink-soft);
}
.au-zeilenaktion--gefahr:hover {
    color: var(--al-warn);
    border-color: var(--al-warn);
    background: color-mix(in srgb, var(--al-warn) 6%, transparent);
}

/* --- Bedienelemente von DataTables ------------------------------------
   Suchfeld, Eintraege-je-Seite, Blaetterung. Werden vom Skript erzeugt,
   lassen sich aber ueber ihre festen Klassen an das System angleichen. */

.au-tabellenkarte .dataTables_filter input,
.au-tabellenkarte .dataTables_length select {
    padding: 5px 10px;
    margin-left: 8px;
    font-size: 13px;
    color: var(--al-ink);
    background: var(--al-card);
    border: 1px solid var(--al-line);
    border-radius: 6px;
}
.au-tabellenkarte .dataTables_filter input:focus,
.au-tabellenkarte .dataTables_length select:focus {
    outline: none;
    border-color: var(--al-amber);
    box-shadow: 0 0 0 2px rgba(226, 128, 58, 0.18);
}

.au-tabellenkarte .dataTables_filter,
.au-tabellenkarte .dataTables_length,
.au-tabellenkarte .dataTables_info,
.au-tabellenkarte .dataTables_paginate {
    font-size: 13px;
    color: var(--al-ink-soft);
    margin-bottom: 10px;
}

.au-tabellenkarte .dataTables_paginate .paginate_button {
    padding: 4px 10px;
    margin-left: 4px;
    border-radius: 6px;
    border: 1px solid transparent;
    color: var(--al-ink-soft) !important;
    cursor: pointer;
}
.au-tabellenkarte .dataTables_paginate .paginate_button:hover {
    color: var(--al-ink) !important;
    background: var(--al-paper);
    border-color: var(--al-line);
}
.au-tabellenkarte .dataTables_paginate .paginate_button.current {
    color: var(--al-ink) !important;
    background: var(--al-paper);
    border-color: var(--modulfarbe);
}


/* DataTables faerbt die sortierte Spalte ein (.sorting_1). Bei einer
   Vorsortierung nach einer Nebenspalte sieht das wie eine zufaellig
   markierte Spalte aus. Die Sortierrichtung zeigen die Pfeile in der
   Kopfzeile bereits an. */
.au-datentabelle tbody td.sorting_1,
.au-datentabelle tbody td.sorting_2,
.au-datentabelle tbody td.sorting_3 {
    background: inherit;
}


/* --------------------------------------------------------------------------
   Messungen ausserhalb des Planungszeitraums

   Stehen am Ende der Wochentabelle. Absichtlich zurueckhaltend gestaltet:
   es sind gueltige Erfassungen, meist aber Tippfehler im Datum. Sie sollen
   auffindbar sein, ohne die Tabelle zu dominieren.
   -------------------------------------------------------------------------- */

.wt-ausserhalb-kopf td {
    padding-top: 18px !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--al-ink-soft);
    border-top: 1px solid var(--al-line);
    background: var(--al-paper);
}

.wt-ausserhalb td {
    background: var(--al-paper);
}

.wt-ausserhalb-datum {
    font-weight: 600;
    margin-right: 10px;
}

.wt-ausserhalb-grund {
    font-size: 13px;
    color: var(--al-ink-soft);
}

/* ==========================================================================
   15. Belegerfassung

   Rechnungen und Gutschriften von Hand anlegen. Verwaltungsmaske, nur fuer
   Administratoren.

   Die Positionen stehen in einem Raster mit festen Spaltenbreiten statt in
   einer Tabelle: die Felder sollen untereinander buendig stehen, und ihre
   sinnvolle Breite haengt am Inhalt (Menge schmal, Beschreibung breit),
   nicht am laengsten Spaltenkopf.

   Unterhalb der Mindestbreite rollt der Block waagerecht. Fuer eine
   Verwaltungsmaske ist das vertretbar - ein Umbruch je Position wuerde die
   Buendigkeit aufgeben, die hier der eigentliche Zweck ist.
   ========================================================================== */

.au-belegkarte {
    overflow-x: auto;
}

.au-belegraster {
    display: grid;
    grid-template-columns:
        36px                    /* Pos.          */
        minmax(180px, 1.4fr)    /* Beschreibung  */
        minmax(160px, 1.2fr)    /* Produkt       */
        80px                    /* Menge         */
        120px                   /* Einzelpreis   */
        90px                    /* Gebuehr       */
        minmax(160px, 1.2fr)    /* Kommentar     */
        minmax(140px, 1fr);     /* Referenzbeleg */
    gap: 10px 12px;
    align-items: center;
    min-width: 1060px;
}

.au-belegraster-kopf {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--al-ink-soft);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--al-line);
}

.au-belegraster-nr {
    font-family: var(--al-font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--al-ink-soft);
    text-align: center;
}

/* Eingabefelder der Maske: dieselbe Anmutung wie .au-feld, aber ohne
   dessen Flexbox - im Raster sitzt jedes Feld in seiner eigenen Zelle. */
.au-belegraster input,
.au-belegraster select,
.au-belegfeld input,
.au-belegfeld select {
    width: 100%;
    padding: 7px 10px;
    font-size: 14px;
    font-family: inherit;
    color: var(--al-ink);
    background: var(--al-card);
    border: 1px solid var(--al-line);
    border-radius: 7px;
}

.au-belegraster input:focus,
.au-belegraster select:focus,
.au-belegfeld input:focus,
.au-belegfeld select:focus {
    outline: none;
    border-color: var(--al-amber);
    box-shadow: 0 0 0 2px rgba(226, 128, 58, 0.18);
}

.au-belegfeld label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--al-ink-soft);
    margin-bottom: 5px;
}

/* Betragsfelder rechtsbuendig - Zahlen liest man an der letzten Stelle. */
.au-belegraster input[name^="price"],
.au-belegraster input[name^="fee"],
.au-belegraster input[name^="amount"] {
    text-align: right;
}


/* ==========================================================================
   16. Bestaetigungsdialoge

   Die kleinen Rueckfragen vor einer Aktion ("Wirklich loeschen?",
   "Per Rechnung bestellen?") kommen von bootstrap-confirmation und werden
   als Bootstrap-Popover dargestellt. Sie erscheinen im ganzen System und
   sahen bisher als einzige Elemente noch nach Bootstrap 4 aus.

   Die Regeln stehen nicht unter einer Seiten-ID: Popover werden ans Ende
   des Dokuments gehaengt und liegen damit ausserhalb jedes Seitenwrappers.
   Abgegrenzt sind sie trotzdem - anuca-ui.css wird nur auf den umgestellten
   Seiten geladen.
   ========================================================================== */

/* Der Rand liegt als eigene Eigenschaft vor, weil ihn auch die Pfeilspitze
   braucht: die besteht aus zwei uebereinanderliegenden Dreiecken, von denen
   das hintere die Randfarbe traegt. Als Custom Property wird sie an die
   Pseudoelemente vererbt und muss nur an dieser Stelle gepflegt werden. */
.popover {
    --popover-rand: var(--al-line);                                /* Rueckfall */
    --popover-rand: color-mix(in srgb, var(--al-ink) 22%, transparent);

    font-family: var(--al-font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--al-ink);
    background: var(--al-card);
    /* Deutlicherer Rand und tieferer Schatten als bei den Karten: das Popover
       schwebt ueber der Seite und steht dabei oft auf einer weissen Karte -
       mit dem hellen --al-line allein war die Kante kaum zu erkennen. */
    border: 1px solid var(--popover-rand);
    border-radius: var(--al-radius);
    box-shadow: 0 10px 34px -10px rgba(23, 40, 42, 0.45),
                0 2px 6px rgba(23, 40, 42, 0.10);
    max-width: 340px;
}

.popover .popover-header {
    padding: 13px 16px 11px;
    font-size: 14px;
    font-weight: 600;
    color: var(--al-ink);
    background: var(--al-card);
    border-bottom: 1px solid var(--al-line);
    border-top-left-radius: var(--al-radius);
    border-top-right-radius: var(--al-radius);
}

.popover .popover-body {
    padding: 14px 16px 16px;
    font-size: 14px;
    color: var(--al-ink-soft);
    /* styles.css legt hier ein helles Blau darueber
       (rgba(112, 196, 255, 0.1)) - die einzige Stelle im System, an der
       diese Farbe vorkommt. Muss ausdruecklich ueberschrieben werden. */
    background: var(--al-card);
    border-bottom-left-radius: var(--al-radius);
    border-bottom-right-radius: var(--al-radius);
}

/* Der Pfeil besteht in Bootstrap aus zwei uebereinanderliegenden Dreiecken:
   ::before traegt die Rahmenfarbe, ::after die Flaeche. Beide muessen je
   Richtung gesetzt werden, sonst bleibt der alte Grauton stehen. */
.bs-popover-top    > .arrow::before { border-top-color: var(--popover-rand); }
.bs-popover-top    > .arrow::after  { border-top-color: var(--al-card); }
.bs-popover-bottom > .arrow::before { border-bottom-color: var(--popover-rand); }
.bs-popover-bottom > .arrow::after  { border-bottom-color: var(--al-card); }
.bs-popover-left   > .arrow::before { border-left-color: var(--popover-rand); }
.bs-popover-left   > .arrow::after  { border-left-color: var(--al-card); }
.bs-popover-right  > .arrow::before { border-right-color: var(--popover-rand); }
.bs-popover-right  > .arrow::after  { border-right-color: var(--al-card); }

/* Bootstrap faerbt die Kopfzeile ueber ein zusaetzliches Pseudoelement
   ein - das faellt hier weg, weil Kopf und Koerper dieselbe Flaeche haben. */
.bs-popover-bottom .popover-header::before { display: none; }

/* --- Die beiden Schaltflaechen ---------------------------------------
   bootstrap-confirmation setzt die Klassen aus den data-Attributen am
   ausloesenden Element. Im Template stehen dort au-btn-bestaetigen und
   au-btn-abbrechen statt btn-success und btn-outline-danger.

   Bestaetigen traegt Amber wie jede Hauptaktion. Abbrechen bleibt neutral:
   Ein rotes Abbrechen liest sich wie eine Warnung, dabei ist es der
   harmlose der beiden Wege. */

/* Raster statt Flexbox, damit beide Schaltflaechen gleich breit sind.

   Mit display: flex und flex: 1 1 0 waren sie es nicht: die automatische
   Mindestbreite eines Flexkindes ist seine Min-Content-Breite, und die haengt
   am laengsten Wort beziehungsweise - bei white-space: nowrap - am gesamten
   Text. Die laengere Beschriftung hat sich damit mehr Platz genommen,
   unabhaengig von flex-grow.

   grid-auto-columns: minmax(0, 1fr) setzt die Mindestbreite ausdruecklich auf
   0 und teilt den Platz zu gleichen Teilen. Ueber grid-auto-flow: column gilt
   das fuer zwei Schaltflaechen genauso wie fuer eine. */
.popover .btn-group {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 10px;
    margin-top: 16px;
    /* Bootstrap zieht in einer btn-group die Rundungen der inneren
       Schaltflaechen weg und laesst sie aneinanderstossen. Hier sollen es
       zwei getrennte Schaltflaechen sein. */
    align-items: stretch;
}
.popover .btn-group > * {
    border-radius: 8px !important;
    margin: 0 !important;
}

/* Die Beschriftungen sind hier ganze Saetze und duerfen umbrechen - das
   nowrap der Grundregel gilt den kurzen Beschriftungen in Dialogfenstern.

   display: grid statt inline-flex, und das ist der entscheidende Teil: in
   einer Flexbox in Zeilenrichtung wird der Text zu einem anonymen Flexkind
   mit automatischer Mindestbreite. Der Umbruch wird dann noch anhand der
   urspruenglichen, breiteren Groesse berechnet, bevor das Kind auf die
   Spaltenbreite schrumpft - die erste Zeile stand danach ueber den Rand
   hinaus. Im Raster wird der Text zu einem Blockkasten und bricht an der
   endgueltigen Breite um. place-items uebernimmt die Zentrierung, die vorher
   von align-items und justify-content kam. */
.popover .btn-group .au-btn-bestaetigen,
.popover .btn-group .au-btn-abbrechen {
    display: grid;
    place-items: center;
    min-width: 0;
    white-space: normal;
    text-align: center;
    overflow-wrap: break-word;
}

.popover .btn-group .au-btn-bestaetigen,
.popover .btn-group .au-btn-abbrechen,
.au-btn-bestaetigen,
.au-btn-abbrechen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex: 1 1 0;
    min-height: 38px;
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.2;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
}

.au-btn-bestaetigen {
    color: #FFFFFF;
    background: var(--al-amber);
    border: 1px solid var(--al-amber);
}
.au-btn-bestaetigen:hover,
.au-btn-bestaetigen:focus {
    color: #FFFFFF;
    background: var(--al-amber-deep);
    border-color: var(--al-amber-deep);
    text-decoration: none;
}

.au-btn-abbrechen {
    color: var(--al-ink-soft);
    background: var(--al-card);
    border: 1px solid var(--al-line);
}
.au-btn-abbrechen:hover,
.au-btn-abbrechen:focus {
    color: var(--al-ink);
    border-color: var(--al-ink-soft);
    text-decoration: none;
}

/* Fuer Rueckfragen vor unwiderruflichen Schritten - Loeschen, Stornieren.
   Im Template statt au-btn-bestaetigen setzen. */
.au-btn-bestaetigen--gefahr {
    background: var(--al-warn);
    border-color: var(--al-warn);
}
.au-btn-bestaetigen--gefahr:hover,
.au-btn-bestaetigen--gefahr:focus {
    background: #8E2626;
    border-color: #8E2626;
}


/* ==========================================================================
   16a. Kennzahlenzeile

   Wenige Zahlen, die den Zustand einer Seite auf einen Blick zusammenfassen -
   etwa im Affiliate-Programm: eingeladen, angemeldet, honorierbar, offenes
   Honorar. Gedacht fuer drei bis fuenf Kacheln; darueber liest es sich als
   Tabelle und gehoert dann auch in eine.

   Die Zahl traegt die Kachel, nicht die Beschriftung: deshalb steht sie
   gross und in der Modulfarbe-Kontrastvariante, waehrend das Wort darunter
   klein und zurueckhaltend bleibt.
   ========================================================================== */

.au-kennzahlen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.au-kennzahl {
    padding: 16px 18px;
    background: var(--al-card);
    border: 1px solid var(--al-line);
    /* Gleiche Kante wie Modulkopf und Aufklappbereich - die Kennzahlenzeile
       ist ein eigenstaendiger Block auf Seitenebene. */
    border-left: 4px solid var(--modulfarbe);
    border-radius: var(--al-radius);
    box-shadow: 0 1px 3px rgba(52, 58, 64, 0.06);
}

.au-kennzahl-wert {
    display: block;
    font-family: var(--al-font-mono);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--modulfarbe-kontrast);
}

.au-kennzahl-label {
    display: block;
    margin-top: 4px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--al-ink-soft);
}

/* Vorschau auf der Einstiegsseite: die Kacheln zeigen, was den Anwender
   erwartet, tragen aber noch keine echten Werte. */
.au-kennzahlen--vorschau { opacity: 0.45; filter: grayscale(0.6); }


/* ==========================================================================
   17. Statusmarken

   Kurze Zustandsangaben in Tabellen - bezahlt, offen, storniert. Bewusst
   ohne Bootstrap-Badges: deren Farben (success, warning, danger) stammen
   aus einer anderen Palette und stechen im System heraus.
   ========================================================================== */

.au-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 11px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    border-radius: 20px;
    border: 1px solid #ABB0AD;                                    /* Rueckfall */
    border: 1px solid color-mix(in srgb, var(--al-line) 65%, var(--al-ink-soft));
    background: #E6E6E4;                                          /* Rueckfall */
    background: color-mix(in srgb, var(--al-paper) 92%, var(--al-ink-soft));
    color: var(--al-ink-soft);
}

/* Bezahlt ist der Normalfall und tritt zurueck. */
.au-status--erledigt {
    color: var(--al-gruen);
    background: rgba(60, 107, 74, 0.10);                          /* Rueckfall */
    background: color-mix(in srgb, var(--al-gruen) 10%, transparent);
    border-color: rgba(60, 107, 74, 0.30);                        /* Rueckfall */
    border-color: color-mix(in srgb, var(--al-gruen) 30%, transparent);
}

/* Offen ist das, worauf jemand reagieren muss - deshalb Amber. */
.au-status--offen {
    color: var(--al-amber-deep);
    background: rgba(226, 128, 58, 0.12);
    border-color: rgba(226, 128, 58, 0.35);
}


/* ==========================================================================
   18. Dialogfenster

   Bootstrap-Modals fuer Rueckfragen, die mehr Text brauchen als in ein
   Popover passt - etwa die Loeschbestaetigung mit Aufzaehlung dessen, was
   dabei verlorengeht.

   Fuer kurze Rueckfragen bleibt der Popover aus Abschnitt 16 das Mittel
   der Wahl: er erscheint an Ort und Stelle und braucht keinen eigenen
   Knopf zum Schliessen.
   ========================================================================== */

.au-modal .modal-content {
    font-family: var(--al-font);
    color: var(--al-ink);
    background: var(--al-card);
    border: 1px solid var(--al-line);
    border-radius: var(--al-radius);
    box-shadow: 0 10px 40px -12px rgba(23, 40, 42, 0.35);
    /* Damit die dunkle Kopfzeile an den oberen Ecken sauber abschliesst und
       nicht ueber die Rundung des Fensters hinauslaeuft. */
    overflow: hidden;
}

/* ---------- Kopfzeile ----------

   Dunkel, im Ton der Navigation. Ein Dialogfenster liegt ueber der Seite,
   und das soll man ihm ansehen: eine helle Kopfzeile auf hellen Karten
   laesst es wie einen weiteren Block im Seitenfluss wirken.

   Das ist bewusst die einzige dunkle Flaeche im neuen Design. Sie hat hier
   eine Aufgabe, die Farbe allein nicht erfuellen koennte - anders als in
   den Kopfzeilen und Tabellenbaendern, wo sie nur Dekoration waere.    */

.au-modal .modal-header {
    align-items: center;
    padding: 15px 20px;
    background: var(--al-teal);
    border-bottom: 0;
}

.au-modal .modal-title {
    font-size: 16px;
    font-weight: 600;
    color: #FFFFFF;
}

/* Kein Markenpraefix im Titel: innerhalb der Anwendung ist klar, wo man
   ist, und "aNuCa ·" vor jedem Dialog schiebt nur den eigentlichen Titel
   nach rechts. Die alten Dialoge tragen es noch, es faellt bei der
   Umstellung der jeweiligen Seite weg. */

/* Bootstrap gibt dem Schliesskreuz schwarze Schrift mit weissem Schatten -
   auf dunklem Grund ist es damit kaum zu sehen. */
.au-modal .modal-header .close {
    color: #FFFFFF;
    opacity: 0.7;
    text-shadow: none;
}
.au-modal .modal-header .close:hover,
.au-modal .modal-header .close:focus {
    color: #FFFFFF;
    opacity: 1;
}

.au-modal .modal-body {
    padding: 18px 20px;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--al-ink-soft);
}

.au-modal .modal-footer {
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--al-line);
}
/* Bootstrap setzt an jedes Kind der Fusszeile einen eigenen Aussenabstand;
   der Abstand kommt hier aus gap. */
.au-modal .modal-footer > * { margin: 0; }

/* Hervorhebung im Text - etwa der Name des Datensatzes, um den es geht. */
.au-modal-hervor {
    font-weight: 600;
    color: var(--al-ink);
}


/* Einordnung statt Bewertung - Rollen, Pakete, Zugehoerigkeit. Bewusst in
   Blaugrau und nicht in Gruen: Gruen steht im System fuer "erledigt" oder
   "aktiv", und eine Rolle ist weder das eine noch das andere. */
.au-status--einordnung {
    color: var(--mod-reduktion-dark);
    background: rgba(92, 110, 140, 0.12);
    border-color: rgba(92, 110, 140, 0.35);
}

/* Achtung - fuer Zustaende, die der Aufmerksamkeit beduerfen: abgelaufene
   Lizenz, Administratorenrolle, gesperrtes Konto. */
.au-status--achtung {
    color: var(--al-warn);
    background: color-mix(in srgb, var(--al-warn) 10%, transparent);
    border-color: color-mix(in srgb, var(--al-warn) 30%, transparent);
}

/* Profilbild in Listen. */
.au-avatar {
    border-radius: 8px;
    object-fit: cover;
}

/* Geloeschte Datensaetze bleiben lesbar, treten aber zurueck. */
.au-geloescht {
    text-decoration: line-through;
    opacity: 0.6;
}


/* Lange Einzelwerte in Tabellenzellen kuerzen.

   Ein Benutzername wie "DELETED_20260916102107_pahema" laesst sich nicht
   umbrechen und zieht seine Spalte ueber die halbe Tabelle. Naheliegend
   waere max-width mit overflow-wrap: anywhere - das ist aber genau falsch:
   damit sinkt die Mindestbreite der Spalte auf ein Zeichen, und der
   Spaltenalgorithmus schrumpft sie auf eine Buchstabensaeule zusammen.

   Deshalb wird nicht die Zelle begrenzt, sondern ihr Inhalt: ein
   Inline-Block fester Hoechstbreite mit Auslassungszeichen. Der
   vollstaendige Wert steht im title-Attribut. */
.au-kurz {
    display: inline-block;
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* ==========================================================================
   19. aNuCa Smart

   Das Markenzeichen der Funktionen, die dem Anwender Arbeit abnehmen.
   Heute ist das die Etikettenerkennung, spaeter kommen Optimierungs-
   rechnungen dazu. Deshalb traegt es einen Zauberstab und nicht ein Gehirn
   oder einen Chip: das Zeichen soll nicht auf KI festgelegt sein, sonst
   passt es auf die naechste Funktion nicht mehr.

   Bisher stand dasselbe Zeichen in drei Bauformen im Markup - als
   Abzeichen im Benutzerdashboard, in die Schaltflaeche eingebaut in der
   Futtermittelliste, als Inlinetext im QR-Dialog. Hier ist es eine
   Definition.

   Warum es immer auf dunklem Grund steht: der Fuenf-Farben-Verlauf traegt
   nur dort. Auf dem Papierton erreicht das Gelb 1,54:1 und das Mint
   1,97:1 - beides nicht lesbar; auf --al-teal liegen alle fuenf Stopps
   zwischen 3,2:1 und 6,7:1. Das Zeichen hat deshalb entweder seine eigene
   dunkle Pille oder sitzt in einer dunklen Schaltflaeche
   (.au-smart--innen). Ohne eine der beiden darf es nicht stehen.

   Die alten Klassen in styles.css bleiben vorlaeufig bestehen:
   Benutzerdashboard und QR-Dialog laufen weiter darueber, bis beide
   umgestellt sind.
   ========================================================================== */

.au-smart {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 13px 6px 11px;
    border-radius: 999px;
    background: var(--al-teal);
    border: 1px solid var(--al-teal);
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
}

/* Der Zauberstab. Derselbe Verlauf wie im Wortzeichen, nur steiler und auf
   drei Stopps verkuerzt - auf 13px Breite gehen fuenf Farben nicht mehr
   auseinander. */
.au-smart__symbol {
    font-size: 13px;
    background: linear-gradient(135deg, #f05a42 0%, #f9bc41 70%, #7cbca6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 0 2px rgba(240, 90, 66, 0.45));
}

/* Serifenkursiv aus dem Systembestand. In styles.css stand Playfair Display
   an erster Stelle - die Schrift wird nirgends eingebunden, es rendert also
   seit immer Georgia. Jetzt steht das auch so da, und es bleibt bei
   Systemschriften ohne Abruf bei Dritten. */
.au-smart__wort {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 15px;
    letter-spacing: 0.3px;
    background: linear-gradient(to right,
        #f05a42 0%,     /* aNuCa-Koralle */
        #f9bc41 30%,    /* warmes Gelb   */
        #7cbca6 60%,    /* Mintgruen     */
        #5b9bd5 85%,    /* helles Blau   */
        #957bbb 100%);  /* Lila          */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    /* Gelb und Mint gehen auf dem dunklen Grund sonst unter. */
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}
.au-smart__wort b    { font-weight: 700; }   /* Smart */
.au-smart__wort span { font-weight: 400; }   /* Assist */

/* Kleine Form fuer Kacheln und Dialogkoepfe. */
.au-smart--klein { padding: 4px 10px 4px 9px; gap: 6px; }
.au-smart--klein .au-smart__symbol { font-size: 11px; }
.au-smart--klein .au-smart__wort   { font-size: 12.5px; }

/* Fuer eine Flaeche, die schon dunkel ist - eine dunkle Schaltflaeche oder
   eine dunkle Kopfzeile. Das Zeichen bringt dann keinen eigenen Grund mit.

   Ohne diese Fassung wuerde die Pille auf einer dunklen Kopfzeile zwar
   ruhend verschwinden, weil beide --al-teal tragen, beim Ueberfahren aber
   als hellerer Kasten auftauchen: die Kopfzeile dunkelt dann ab, die Pille
   nicht. Gemessen am Futter-Scanner: rgb(52,58,64) ruhend gegen
   rgb(29,33,36) beim Ueberfahren. */
.au-smart--innen {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 1px 0;
}

/* Die Trennlinie gehoert zur Schaltflaeche, nicht zum Zeichen: dort steht
   das Zeichen dicht neben der Beschriftung und braucht die Abgrenzung. Am
   rechten Rand einer breiten Kopfzeile stuende sie allein im Raum. */
.au-aktion-smart .au-smart--innen {
    border-left: 1px solid rgba(255, 255, 255, 0.22);
    padding-left: 13px;
}


/* --- Hauptaktion mit angebautem Zeichen -------------------------------

   Eigene Klasse und nicht .au-aktion--primaer mit Zusatz: rechts steht
   14px statt 16px, weil die Trennlinie ihren Abstand selbst mitbringt. */

.au-aktion-smart {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    padding: 8px 14px 8px 16px;
    font-family: var(--al-font);
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    background: var(--al-teal);
    border: 1px solid var(--al-teal);
    color: #fff;
    cursor: pointer;
    text-decoration: none;
}
.au-aktion-smart:hover,
.au-aktion-smart:focus {
    background: #23272b;
    color: #fff;
    text-decoration: none;
}
/* Der Fokusring von Bootstrap entfaellt durch die eigene Hintergrundregel. */
.au-aktion-smart:focus-visible {
    outline: 2px solid var(--al-ink);
    outline-offset: 2px;
}

.au-aktion-smart__text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

/* Nicht verfuegbar - fuer die Rolle Fun ab drei eigenen Futtermitteln.

   Zuvor war das ein voellig anderes Element (btn disabled btn-sm bg-white)
   ohne jedes Zeichen: der Anwender sah an der gesperrten Schaltflaeche
   nicht, welche Funktion ihm fehlt. Jetzt ist es dieselbe Schaltflaeche,
   nur stumpf - der Verlauf geht in Grau, damit nichts zum Klicken
   einlaedt. */
.au-aktion-smart:disabled,
.au-aktion-smart.disabled {
    background: var(--al-paper);
    border-color: var(--al-line);
    color: var(--al-ink-soft);
    cursor: not-allowed;
    opacity: 0.75;
}
.au-aktion-smart:disabled:hover,
.au-aktion-smart.disabled:hover {
    background: var(--al-paper);
    color: var(--al-ink-soft);
}
.au-aktion-smart:disabled .au-smart--innen,
.au-aktion-smart.disabled .au-smart--innen { border-left-color: var(--al-line); }
.au-aktion-smart:disabled .au-smart__wort,
.au-aktion-smart:disabled .au-smart__symbol,
.au-aktion-smart.disabled .au-smart__wort,
.au-aktion-smart.disabled .au-smart__symbol { filter: grayscale(1) opacity(0.8); }


/* ==========================================================================
   20. Weender Analyse als Band

   Die sechs analytischen Bestandteile als ein Band je Zeile, darueber
   dieselbe Aufteilung als Legende in der Kopfzeile der Futtermittelliste.

   Die sechs Farben standen bisher als feste Hexwerte im Markup - einmal in
   der Legende, einmal je Zeile, und ein drittes Mal in der Erfassungsmaske.
   Sie gehoeren zu den Bestandteilen und nicht zur Seite: der Anwender
   erkennt sie aus der Analyse wieder. Deshalb stehen sie als Token in
   anuca-tokens.css. Die Werte sind unveraendert uebernommen, bg-success
   (#28a745) und bg-secondary (#6c757d) aus Bootstrap ausgeschrieben.

   Geaendert ist nur die Schriftfarbe. Bootstrap setzt in .progress-bar
   Weiss, und Weiss auf dem Gelb der Rohfaser erreicht 1,60:1, auf dem
   Hellblau der Feuchte 1,66:1 - die Zahl stand in zwei von sechs
   Abschnitten praktisch unsichtbar drin. Jetzt traegt jeder Abschnitt die
   Schriftfarbe mit dem besseren Kontrast: Tinte auf den fuenf helleren,
   Weiss nur auf dem Grau der NFE (4,69:1 gegen 3,26:1).
   ========================================================================== */

/* Die Mindestbreite ist der Grund, warum die Spalte ueberhaupt Platz
   bekommt: DataTables verteilt die Breite nach dem Textumfang der Spalte,
   und ein Balken hat keinen. Ohne sie fiel die Spalte auf rund 150px und
   die Anteile waren nicht mehr auseinanderzuhalten - bei 220px ist ein
   Abschnitt von 8 % noch gut 17px breit und traegt damit seine Zahl.
   Wird es auf dem Schirm zu eng, rollt die Tabelle in .au-tabellenkarte. */
.au-weender {
    display: flex;
    min-width: 220px;
    height: 18px;
    overflow: hidden;
    border-radius: 4px;
    background: var(--al-paper);
    font-size: 11px;
    line-height: 18px;
}

/* min-width: 0 ist hier nicht kosmetisch, sondern noetig: die Mindestbreite
   eines Flexkindes ist sonst die Breite seines Textes. Ein Abschnitt mit
   1 % Anteil und der Ziffer "1" darin hat sich damit so viel Platz genommen,
   wie die Ziffer braucht - in Summe lief das Band ueber die Spalte hinaus
   und die Anteile stimmten nicht mehr mit den Prozentwerten ueberein. */
.au-weender-teil {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
    font-weight: 600;
    color: var(--al-ink);
    white-space: nowrap;
    cursor: pointer;
}

.au-weender-teil--rp  { background: var(--al-rohprotein); }
.au-weender-teil--rf  { background: var(--al-rohfett); }
.au-weender-teil--rfa { background: var(--al-rohfaser); }
.au-weender-teil--ra  { background: var(--al-rohasche); }
.au-weender-teil--fe  { background: var(--al-feuchte); }
.au-weender-teil--nfe { background: var(--al-nfe); color: #fff; }

/* In der Kopfzeile stehen sechs gleich breite Abschnitte als Legende. */
.au-weender--legende .au-weender-teil { flex: 1 1 0; }


/* Nachtrag zu Abschnitt 14: ein Zaehler mit Popover ist anklickbar und
   soll das auch zeigen. Stand vorher als style-Attribut im Markup. */
.au-zaehler[data-toggle="popover"] { cursor: pointer; }