/* ==========================================================================
   aiteam.css — ai-team-gfx-v1 (17.08.2026)
   Reiter "Aktivität" und "Berichte" des KI-Teams.

   ANLASS Michael: "diese beiden Punkte sind grafisch noch nicht schön
   gelöst". Der Befund war nicht die Farbe, sondern fehlende Gliederung:
   173 Handlungen lagen als EIN Strom untereinander (gemessen 14.662 px
   Seitenhöhe = 16 Bildschirme), ohne Tagestrenner, ohne Filter, ohne
   Farbe am Status — und die Berichte zeigten drei gleich starke
   Überschriften je Karte, zwei davon regelmäßig leer ("Erledigt (0)").

   FARBREGEL — bewusst zwei getrennte Sätze:
   1. STATUS (--aiv-good/warn/neutral/info) trägt kleine Schrift in
      Marken. Alle vier sind gegen ihren eigenen 12%-Ton auf >= 4.5:1
      gemessen (WCAG kleiner Text): 4.51 / 5.00 / 5.15 / 5.93.
      Die Hausfarben --v2-success (#2d9d78) und --v2-danger (#d94452)
      erreichen dort nur 2.97 bzw. 3.66 — sie bleiben deshalb den
      GROSSEN Kennzahlen vorbehalten (>= 3:1 genügt), wo sie weiter
      benutzt werden. Wer sie in eine Statusmarke setzt, macht sie
      unlesbar.
   2. Farbe steht bei einem Status NIE allein: jede Marke trägt Symbol
      UND Wort. Das ist nicht Zierde, sondern die Absicherung — gemessen
      liegen "abgelehnt" (neutral) und "Entwurf" (info) bei normalem
      Sehen nur ΔE 10.5 auseinander, unter Rot-Grün-Schwäche noch näher.
      Ein früher Entwurf hatte Rot für "abgelehnt": der lag zu Bernstein
      bei ΔE 13.2 / 4.1 (deuteran) und war damit schlechter. "Abgelehnt"
      ist ohnehin KEINE Störung, sondern eine Entscheidung des Inhabers
      und steht deshalb neutral.

   --v2-primary wird für Status NICHT benutzt: er ist markenabhängig
   (physio-edition schaltet ihn auf Grün) und wäre dort von "erledigt"
   nicht mehr zu unterscheiden.
   ========================================================================== */

.v2-layout {
    --aiv-good:    #0d7a58;   /* erledigt                  */
    --aiv-warn:    #8a5a00;   /* nicht möglich / blockiert */
    --aiv-neutral: #55637a;   /* abgelehnt (Entscheidung)  */
    --aiv-info:    #3f51a8;   /* Entwurf, wartet auf Sie   */
}

/* ---------------------------------------------------------- Kennzahlen
   Eine Reihe Kacheln statt eines Fließsatzes. Die Kacheln sind KNÖPFE:
   sie sind zugleich der Statusfilter, damit eine Zahl nicht nur
   berichtet, sondern zum nächsten Schritt führt.
   inv-kpi-row-Lehre aus dem KI-Team-Mobilbau: Grid statt waagerechtem
   Scrollen, sonst liegt die dritte Kachel ausserhalb des Bildes. */
.aiv-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.aiv-kpi {
    display: block; width: 100%; text-align: left;
    border: 1px solid var(--v2-outline, rgba(94,109,127,0.12));
    border-radius: var(--v2-radius, 0.75rem);
    background: var(--v2-surface-card, #fff);
    padding: 0.6rem 0.75rem;
    position: relative; overflow: hidden;
    transition: border-color .12s, box-shadow .12s;
}
.aiv-kpi::before {           /* schmaler Farbstreifen, kein Vollflächen-Ton */
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--aiv-akzent, var(--v2-text-muted, #8a97a8));
}
button.aiv-kpi { cursor: pointer; }
button.aiv-kpi:hover { border-color: var(--aiv-akzent, var(--v2-primary, #2E6B94)); }
.aiv-kpi.is-an {
    border-color: var(--aiv-akzent, var(--v2-primary, #2E6B94));
    box-shadow: 0 0 0 1px var(--aiv-akzent, var(--v2-primary, #2E6B94)) inset;
}
.aiv-kpi-wert {
    font-family: 'Manrope', sans-serif; font-weight: 700;
    font-size: 1.5rem; line-height: 1.1;
    color: var(--aiv-akzent, var(--v2-text, #1a2332));
    font-variant-numeric: tabular-nums;
}
.aiv-kpi-lab {
    font-size: 0.72rem; letter-spacing: .02em;
    color: var(--v2-text-secondary, #5e6d7f); margin-top: 0.1rem;
}

/* ------------------------------------------------------------- Filter
   Eine Zeile über der Liste (Vorgabe aus der Hausregel für Filter).
   Der Suchknopf ist bewusst kein Formular: Tippen filtert sofort. */
.aiv-filter {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
    margin-bottom: 0.5rem;
}
.aiv-chip {
    border: 1px solid var(--v2-outline, rgba(94,109,127,0.12));
    background: var(--v2-surface-card, #fff);
    color: var(--v2-text-secondary, #5e6d7f);
    border-radius: 999px; padding: 0.2rem 0.7rem;
    font-size: 0.8rem; cursor: pointer; white-space: nowrap;
}
.aiv-chip:hover { border-color: var(--v2-primary, #2E6B94); }
.aiv-chip.is-an {
    background: var(--v2-primary, #2E6B94); border-color: var(--v2-primary, #2E6B94);
    color: #fff; font-weight: 600;
}
.aiv-suche {
    flex: 1 1 180px; min-width: 140px; max-width: 320px;
    border: 1px solid var(--v2-outline, rgba(94,109,127,0.12));
    border-radius: 999px; padding: 0.2rem 0.8rem; font-size: 0.8rem;
    background: var(--v2-surface-card, #fff); color: var(--v2-text, #1a2332);
}
.aiv-suche:focus { outline: none; border-color: var(--v2-primary, #2E6B94); }
.aiv-zaehler { font-size: 0.78rem; color: var(--v2-text-muted, #8a97a8); margin-left: auto; }

/* ------------------------------------------------------------ Tagesband
   Klebt beim Scrollen oben. Ohne diesen Trenner stand "15:11" über
   "23:58" und niemand sah, dass dazwischen ein Tag lag. */
.aiv-tag {
    position: sticky; top: 0; z-index: 3;
    display: flex; align-items: baseline; gap: 0.5rem;
    padding: 0.35rem 0.1rem; margin-top: 0.35rem;
    background: var(--v2-surface, #f5f7fa);
    border-bottom: 1px solid var(--v2-outline, rgba(94,109,127,0.12));
}
.aiv-tag-name {
    font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 0.85rem;
    color: var(--v2-text, #1a2332);
}
.aiv-tag-zahl { font-size: 0.75rem; color: var(--v2-text-muted, #8a97a8); }

/* ------------------------------------------------------------ Zeitstrahl
   Der Punkt trägt die Statusfarbe, die durchgehende Linie den Verlauf.
   2px, wie für Linienmarken vorgesehen; der Punkt >= 8px. */
.aiv-strang { position: relative; padding-left: 1.35rem; }
.aiv-strang::before {
    content: ''; position: absolute; left: 4px; top: 0.35rem; bottom: 0.35rem;
    width: 2px; background: var(--v2-outline, rgba(94,109,127,0.12));
}
.aiv-zeile { position: relative; padding: 0.45rem 0 0.45rem 0; }
.aiv-zeile + .aiv-zeile { border-top: 1px solid rgba(94,109,127,0.08); }
.aiv-punkt {
    position: absolute; left: -1.35rem; top: 0.72rem;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--aiv-akzent, var(--v2-text-muted, #8a97a8));
    box-shadow: 0 0 0 2px var(--v2-surface, #f5f7fa);   /* 2px Ring auf der Fläche */
}
.aiv-kopf {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.aiv-uhr {
    font-variant-numeric: tabular-nums; font-size: 0.78rem;
    color: var(--v2-text-muted, #8a97a8); white-space: nowrap;
}
.aiv-wer {
    font-size: 0.75rem; font-weight: 600; white-space: nowrap;
    color: var(--v2-text-secondary, #5e6d7f);
    background: var(--v2-surface-low, #edf1f5);
    border-radius: 999px; padding: 0.05rem 0.5rem;
}
.aiv-was {
    font-size: 0.88rem; font-weight: 600; color: var(--v2-text, #1a2332);
    min-width: 0;
}

/* --------------------------------------------------------- Statusmarke
   Symbol UND Wort — nie Farbe allein. */
.aiv-marke {
    margin-left: auto; white-space: nowrap;
    font-size: 0.72rem; font-weight: 600;
    border-radius: 999px; padding: 0.1rem 0.55rem;
    display: inline-flex; align-items: center; gap: 0.3rem;
    color: var(--aiv-akzent, var(--v2-text-secondary, #5e6d7f));
    background: color-mix(in srgb, var(--aiv-akzent, #8a97a8) 12%, #fff);
}
.aiv-marke i { font-size: 0.85em; }

/* ---------------------------------------------------------- Ergebnistext
   Gemessen bis 2.768 Zeichen bei 240 im Schnitt. Ungekappt war der
   Fließtext das eigentliche Raumproblem: er drückte die Kopfzeile —
   also WER WAS WANN — unter den Erklärtext. Zwei Zeilen, Rest auf Klick. */
.aiv-erg {
    font-size: 0.82rem; color: var(--v2-text-secondary, #5e6d7f);
    margin-top: 0.2rem; overflow-wrap: anywhere; white-space: pre-line;
}
.aiv-erg.is-kurz {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.aiv-mehr {
    background: none; border: none; padding: 0; margin-top: 0.1rem;
    font-size: 0.75rem; color: var(--v2-primary, #2E6B94);
    cursor: pointer; font-weight: 600;
}
.aiv-mehr:hover { text-decoration: underline; }

/* =======================================================  BERICHTE  ==== */

.aiv-woche {
    border: 1px solid var(--v2-outline, rgba(94,109,127,0.12));
    border-radius: var(--v2-radius, 0.75rem);
    background: var(--v2-surface-card, #fff);
    box-shadow: var(--v2-shadow, 0 12px 32px rgba(25,28,30,0.06));
    padding: 1rem; margin-bottom: 1rem;
}
.aiv-woche-kopf {
    display: flex; align-items: baseline; gap: 0.5rem;
    flex-wrap: wrap; margin-bottom: 0.75rem;
}
.aiv-woche-kopf h6 {
    margin: 0; font-family: 'Manrope', sans-serif; font-weight: 700;
    font-size: 1rem; color: var(--v2-text, #1a2332);
}
.aiv-zeitraum { margin-left: auto; font-size: 0.78rem; color: var(--v2-text-muted, #8a97a8); }
.aiv-satz { font-size: 0.9rem; color: var(--v2-text-secondary, #5e6d7f); margin-bottom: 0.75rem; }

/* Mitarbeiter-Zeile mit Anteilsbalken.
   Warum ein Balken und keine weitere Zahlenspalte: die Tabelle nannte
   16 / 0 / 10 / 9 nebeneinander, aber nicht das VERHAELTNIS. Dass bei
   einem Mitarbeiter 17 blockierte auf 8 erledigte Handlungen kommen,
   war in vier gleich grossen Ziffern nicht zu sehen. */
.aiv-mit { padding: 0.55rem 0; }
.aiv-mit + .aiv-mit { border-top: 1px solid rgba(94,109,127,0.08); }
.aiv-mit-kopf {
    display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap;
    margin-bottom: 0.3rem;
}
.aiv-mit-name { font-weight: 600; font-size: 0.9rem; color: var(--v2-text, #1a2332); }
.aiv-mit-titel { font-size: 0.78rem; color: var(--v2-text-muted, #8a97a8); }
.aiv-mit-summe { margin-left: auto; font-size: 0.78rem; color: var(--v2-text-muted, #8a97a8); }
.aiv-balken {
    height: 8px; border-radius: 4px; overflow: hidden;
    background: var(--v2-surface-low, #edf1f5);
}
/* Die Spur bleibt immer 100% breit — sie ist der Massstab, an dem man
   die Laenge des gefuellten Teils ueberhaupt ablesen kann. */
.aiv-balken-innen { display: flex; gap: 2px; height: 100%; }
.aiv-balken span { display: block; height: 100%; }
.aiv-balken-innen span:first-child { border-radius: 4px 0 0 4px; }
.aiv-balken-innen span:last-child  { border-radius: 0 4px 4px 0; }
.aiv-balken-innen span:only-child  { border-radius: 4px; }
.aiv-legende {
    display: flex; flex-wrap: wrap; gap: 0.75rem;
    margin-top: 0.3rem; font-size: 0.76rem; color: var(--v2-text-secondary, #5e6d7f);
}
.aiv-leg { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
.aiv-leg i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.aiv-mit-still {
    font-size: 0.76rem; color: var(--aiv-warn); font-weight: 600;
}

/* ------------------------------------------------------- Tagesberichte */
.aiv-taggruppe { margin-bottom: 0.6rem; }
.aiv-taggruppe > summary {
    cursor: pointer; list-style: none;
    display: flex; align-items: baseline; gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--v2-outline, rgba(94,109,127,0.12));
    border-radius: var(--v2-radius, 0.75rem);
    background: var(--v2-surface-card, #fff);
    font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 0.88rem;
    color: var(--v2-text, #1a2332);
}
.aiv-taggruppe > summary::-webkit-details-marker { display: none; }
.aiv-taggruppe > summary::before {
    content: '\f105'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    color: var(--v2-text-muted, #8a97a8); transition: transform .12s;
    display: inline-block; width: 0.7rem;
}
.aiv-taggruppe[open] > summary::before { transform: rotate(90deg); }
.aiv-taggruppe > summary:hover { border-color: var(--v2-primary, #2E6B94); }
.aiv-tagzahl { margin-left: auto; font-weight: 400; font-size: 0.78rem; color: var(--v2-text-muted, #8a97a8); }
.aiv-tagkoerper { padding: 0.5rem 0 0.1rem 0.6rem; }

.aiv-bericht {
    border: 1px solid var(--v2-outline, rgba(94,109,127,0.12));
    border-left: 3px solid var(--v2-outline, rgba(94,109,127,0.12));
    border-radius: var(--v2-radius, 0.75rem);
    background: var(--v2-surface-card, #fff);
    padding: 0.7rem 0.85rem; margin-bottom: 0.5rem;
}
.aiv-bericht.hat-wartet { border-left-color: var(--aiv-info); }
.aiv-bericht.hat-blockiert { border-left-color: var(--aiv-warn); }
.aiv-bericht-kopf {
    display: flex; align-items: baseline; gap: 0.45rem; flex-wrap: wrap;
    margin-bottom: 0.35rem;
}
.aiv-bericht-wer { font-weight: 700; font-size: 0.92rem; color: var(--v2-text, #1a2332); }
.aiv-bericht-rolle { font-size: 0.78rem; color: var(--v2-text-muted, #8a97a8); }
.aiv-bericht-datum { margin-left: auto; font-size: 0.76rem; color: var(--v2-text-muted, #8a97a8); }

/* Ein Abschnitt erscheint NUR, wenn er Inhalt hat. Vorher standen bei
   jedem Bericht drei fette Ueberschriften, davon regelmaessig zwei mit
   "(0)" — zwei Drittel der Karte sagten nichts. */
.aiv-abschnitt { margin-top: 0.4rem; }
.aiv-abschnitt-kopf {
    display: flex; align-items: center; gap: 0.35rem;
    font-size: 0.78rem; font-weight: 700; letter-spacing: .01em;
    color: var(--aiv-akzent, var(--v2-text-secondary, #5e6d7f));
}
.aiv-abschnitt ul {
    margin: 0.15rem 0 0; padding-left: 1.1rem;
    font-size: 0.83rem; color: var(--v2-text-secondary, #5e6d7f);
}
.aiv-abschnitt li { margin-bottom: 0.12rem; overflow-wrap: anywhere; }
.aiv-leer {
    font-size: 0.82rem; color: var(--v2-text-muted, #8a97a8); font-style: italic;
}

/* Der Fuehrungsblock ist ein Bericht IM Bericht — er tritt zurueck. */
.aiv-fuehrung {
    margin-top: 0.5rem; padding: 0.5rem 0.6rem;
    background: var(--v2-surface-low, #edf1f5);
    border-radius: 0.5rem;
}

/* -------------------------------------------------------------- schmal */
@media (max-width: 575.98px) {
    .aiv-kpis { grid-template-columns: repeat(2, 1fr); }
    .aiv-kpi-wert { font-size: 1.25rem; }
    .aiv-marke { margin-left: 0; }
    .aiv-zaehler { margin-left: 0; width: 100%; }
}


/* =================================================================
   ai-team-mobil-v1 (20.08.2026) — Personalakte auf dem Handy
   -----------------------------------------------------------------
   BEFUND, gemessen mit headless Chrome bei 390px Breite:
   styles.css setzt unter 768px ".table th,.table td{white-space:nowrap}"
   (Z.801) und global ".table{table-layout:fixed}" (Z.450). Die
   Vertrauens-Tabelle bekam damit 140px je Spalte, gebraucht wurden
   224px fuer den Text und 195px fuer das Auswahlfeld. Abgeschnitten
   wurde OHNE Auslassungspunkte, also ohne jeden Hinweis darauf.
   Die Reiterleiste brach auf VIER Zeilen um (209px = ein Viertel des
   Bildschirms, bevor ueberhaupt Inhalt kam).
   ================================================================= */

/* Ohne Breitengrenze: dieselbe Tabelle ist auch auf dem Desktop zu eng.
   Bei 1200px steht sie in einer col-lg-6, ist nur 398px breit und gibt
   der Beschriftung 199px bei 224px Bedarf — ebenfalls gemessen, ebenfalls
   abgeschnitten. In der Akte gibt es genau vier Tabellen, die Regel
   bleibt also eng begrenzt. */
#aiTeamRoot table.table { table-layout: auto !important; }
#aiTeamRoot table.table > thead > tr > th,
#aiTeamRoot table.table > tbody > tr > td {
    white-space: normal !important;
    overflow: visible !important;
    max-width: none !important;
    overflow-wrap: anywhere;
}

/* Ohne Breitenhinweis bekommt die Beschriftung im auto-Layout nur 143px,
   weil das Auswahlfeld (w-auto, 195px) die zweite Spalte aufspannt — der
   Text bricht dann unnoetig oft um. 60/40 gibt beiden genug. */
/* Bewusst generisch statt an eine Klasse gebunden: ":first-child:nth-last-child(2)"
   trifft die erste von genau ZWEI Spalten und wirkt damit fuer jede
   zweispaltige Tabelle der Akte, ohne Zutun von aiTeam.js.
   (Der frueher hier genannte Bezug auf .aiv-vertrauen ist seit
   aiv-liste-v1 hinfaellig - die Vertrauensstufen sind keine Tabelle mehr.) */
#aiTeamRoot table.table > tbody > tr > td:first-child:nth-last-child(2) { width: 60%; }
#aiTeamRoot table.table > tbody > tr > td:first-child:nth-last-child(2) ~ td { width: 40%; }

@media (max-width: 767.98px) {
    #aiTeamRoot table.table > thead > tr > th,
    #aiTeamRoot table.table > tbody > tr > td { padding: 8px 6px !important; }

    /* Reiterleiste: eine seitlich schiebbare Zeile statt vier gestapelter. */
    #aiTeamRoot .nav-tabs {
        flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    #aiTeamRoot .nav-tabs::-webkit-scrollbar { display: none; }
    #aiTeamRoot .nav-tabs > .nav-item { flex: 0 0 auto; }
    #aiTeamRoot .nav-tabs .nav-link { white-space: nowrap; }
}

@media (max-width: 575.98px) {
    /* Vertrauensstufen: Beschriftung UEBER die Auswahl statt zwei enge
       Spalten nebeneinander. Bei 390px bekam jede Spalte 140px bei 224px
       bzw. 195px Bedarf - gemessen, beides abgeschnitten.

       ZWEI GETRENNTE BLOECKE MIT ABSICHT: stuenden :has() und der Rueckfall
       in derselben Selektorliste, wuerfe ein Browser ohne :has() die ganze
       Regel weg - also auch den Rueckfall. */
    /* Weg 1: jede zweispaltige Tabelle in der Akte, ohne Zutun von aiTeam.js */
    #aiTeamRoot table.table:has(> tbody > tr > td:first-child:nth-last-child(2)) {
        display: block; width: 100%;
    }
    #aiTeamRoot table.table:has(> tbody > tr > td:first-child:nth-last-child(2)) > tbody {
        display: block; width: 100%;
    }
    #aiTeamRoot table.table:has(> tbody > tr > td:first-child:nth-last-child(2)) > tbody > tr {
        display: block; width: 100%;
        padding: .45rem 0; border-bottom: 1px solid rgba(0,0,0,.08);
    }
    #aiTeamRoot table.table:has(> tbody > tr > td:first-child:nth-last-child(2)) > tbody > tr:last-child {
        border-bottom: 0;
    }
    #aiTeamRoot table.table:has(> tbody > tr > td:first-child:nth-last-child(2)) > tbody > tr > td {
        display: block; width: 100% !important;
        border: 0 !important; padding: .1rem 0 !important;
    }
    #aiTeamRoot table.table:has(> tbody > tr > td:first-child:nth-last-child(2)) > tbody > tr > td.text-end {
        text-align: left !important; margin-top: .2rem;
    }
    #aiTeamRoot table.table:has(> tbody > tr > td:first-child:nth-last-child(2)) .form-select {
        width: 100% !important; max-width: 100% !important; display: block !important;
    }

    /* Reiterleiste: eine seitlich schiebbare Zeile statt vier gestapelter. */
    #aiTeamRoot .nav-tabs {
        flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    #aiTeamRoot .nav-tabs::-webkit-scrollbar { display: none; }
    #aiTeamRoot .nav-tabs > .nav-item { flex: 0 0 auto; }
    #aiTeamRoot .nav-tabs .nav-link { white-space: nowrap; }
}

/* ---- aiv-liste-v1: Vertrauensstufen als Liste statt Tabelle --------
   Michaels zweiter Befund: "passt nicht zum UX der restlichen Anzeigen".
   Er hat recht - der Block DIREKT DARUEBER ("Worauf ich zugreifen darf")
   ist eine kompakte Liste aus form-check-Zeilen, dieser war als Tabelle
   gebaut. Dadurch kamen drei Dinge zusammen, die man einzeln nicht
   sieht: table-sm + align-middle erzeugen hohe Zeilen; die generischen
   Akte-Regeln (60/40-Spalten, "overflow-wrap: anywhere") gelten fuer
   JEDE Tabelle hier und zerlegten die Kurztexte; und der mobile Umbau
   brauchte zwei komplette Ersatzbloecke.

   Die Liste umgeht das alles: sie erbt keine Tabellenregeln, sie ist von
   Haus aus umbruchfaehig, und sie sieht aus wie der Block darueber.
   ENTFERNT wurden deshalb der Rueckfallblock "Weg 2" und der frueher
   ergaenzte aiv-gruppen-v1-Block - beide haengen an einer Tabelle, die
   es nicht mehr gibt. "Weg 1" (generisch, :has) bleibt: den brauchen
   die UEBRIGEN zweispaltigen Tabellen der Akte weiterhin. */
#aiTeamRoot .aiv-vs { margin-bottom: .25rem; }

/* Gruppenkopf: normale Schrift statt Versalien. Das Haus setzt Ueber-
   schriften als h6 in normaler Schreibweise; gesperrte Versalien mit
   Sperrsatz kommen sonst nirgends vor und schreien bei drei Wieder-
   holungen. Der erklaerende Halbsatz haengt als graue Fortsetzung
   dahinter statt als zweite Zeile. */
#aiTeamRoot .aiv-vs-gruppe {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem;
    padding: 1rem 0 .35rem;
    font-size: .875rem; font-weight: 600;
    color: var(--v2-text, #1a2332);
}
#aiTeamRoot .aiv-vs-gruppe:first-child { padding-top: .15rem; }
#aiTeamRoot .aiv-vs-gruppe > span {
    font-size: .78rem; font-weight: 400;
    color: var(--v2-text-muted, #8a97a8);
}

/* Zeile: dieselbe Anmutung wie die Schalterliste darueber - eine duenne
   Trennlinie, wenig Polsterung, Text links, Bedienelement rechts. */
/* GEMESSEN, und der Grund fuer den zweiten Anlauf: der Block steht in
   einer HALBEN Spalte (col-12 col-lg-6). Bei 1100px Fensterbreite sind
   das 321px. Mit "flex: 0 0 auto" auf der rechten Seite und "min-width: 0"
   links wurde die Beschriftung dann auf NULL Pixel zusammengedrueckt und
   brach buchstabenweise um - eine Zeile war 751px hoch.

   Die Zeile darf deshalb UMBRECHEN, und die Beschriftung hat eine
   Mindestbreite. Passt beides nicht nebeneinander, rutscht die Bedienung
   in die naechste Zeile. Das heilt sich bei jeder Breite selbst und macht
   den frueheren Sonderblock fuer schmale Schirme ueberfluessig. */
#aiTeamRoot .aiv-vs-zeile {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: .3rem 1rem;
    padding: .4rem 0;
    border-top: 1px solid rgba(94,109,127,.10);
}
#aiTeamRoot .aiv-vs-gruppe + .aiv-vs-zeile { border-top: 0; }
#aiTeamRoot .aiv-vs-text { flex: 1 1 auto; min-width: 10rem; }
#aiTeamRoot .aiv-vs-name { font-size: .9rem; color: var(--v2-text, #1a2332); }
/* "flex: 0 1" statt "0 0": die Bedienspalte DARF schrumpfen. Mit "0 0"
   behielt sie ihre volle Inhaltsbreite (Auswahlfeld 176px + Kontingent
   130px = 314px) und lief bei 390px Fensterbreite ueber die verfuegbaren
   274px hinaus - gemessen an zwei Zeilen. Beim Schrumpfen greift dann
   der eigene Umbruch, und das Kontingent rutscht unter das Auswahlfeld. */
/* FESTES ZWEISPALTEN-RASTER statt frei laufender Flexbox. Sichtbar im
   Screenshot: die zwei Zeilen MIT Kontingent schoben ihr Auswahlfeld nach
   links, weil die Bedienspalte rechtsbuendig endet und bei ihnen breiter
   ist. Die Auswahlfelder fluchteten dadurch nicht. Mit einem Raster ist
   die Bedienspalte in JEDER Zeile gleich breit - die zweite Spalte bleibt
   bei Zeilen ohne Kontingent einfach leer. minmax(0, ...) laesst beide
   Spalten schrumpfen, damit auf schmalen Schirmen nichts ueberlaeuft.
   "flex: 0 1" bleibt noetig, sonst behaelt die Spalte ihre volle Breite
   und laeuft ueber (gemessen bei 390px). */
#aiTeamRoot .aiv-vs-ctrl {
    flex: 0 1 auto; max-width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 11rem) minmax(0, 8rem);
    align-items: center; gap: .5rem;
}
#aiTeamRoot .aiv-vs-ctrl .form-select { width: 100%; }
/* Die gesperrte Klasse hat kein Auswahlfeld - ihr Hinweis nimmt beide
   Rasterspalten ein, sonst wuerde er in die 11rem-Spalte gequetscht. */
#aiTeamRoot .aiv-vs-sperre { grid-column: 1 / -1; text-align: right; }
#aiTeamRoot .aiv-vs-sperre {
    font-size: .8rem; color: var(--v2-text-muted, #8a97a8); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}

/* Das Tageskontingent steht NEBEN dem Auswahlfeld statt darunter. Das
   war der zweite Grund fuer die hohen Zeilen: fuenf von elf Zeilen
   waren dreizeilig, weil Hinweis und Zahl gestapelt darunter hingen. */
#aiTeamRoot .aiv-lim {
    display: inline-flex; align-items: center; justify-content: flex-end; gap: .3rem;
    white-space: nowrap;
    font-size: .78rem; color: var(--v2-text-muted, #8a97a8);
}
#aiTeamRoot .aiv-lim .form-control { width: 3.5rem; flex: 0 0 auto; }

/* Zuruecknehmen, solange die gewaehlte Stufe die Zahl nicht nutzt.
   NICHT ueber :has(option:checked): der Selektor TRIFFT dort zwar nach dem
   Umschalten, der berechnete Stil folgt aber nicht (gemessen: opacity blieb
   auf .45, waehrend querySelector das Element lieferte). Die Klasse setzt
   aiTeam.js beim Rendern und schaltet sie im delegierten change-Listener um. */
#aiTeamRoot .aiv-vs-ctrl .aiv-lim {
    opacity: .45; transition: opacity .15s ease-in-out;
}
#aiTeamRoot .aiv-vs-ctrl.hat-limit .aiv-lim {
    opacity: 1;
}

/* Kein Sonderblock fuer schmale Schirme mehr: die Zeile bricht oben schon
   bei jeder Breite von selbst um, sobald Beschriftung und Bedienung nicht
   mehr nebeneinander passen. Eine Breite fest zu verdrahten hiesse, genau
   eine Schwelle zu treffen und alle anderen zu verfehlen. */