/*
  workspace-bento-arbeitszeit.css — Gestaltung des Bereichs „Arbeitszeit" in der Bento-Ansicht (Logik: workspace-bento-arbeitszeit.js).

  Kurzbeschreibung (für Laien): Ralph, 08.11.2026 — Zusatz-Baustein Arbeitszeit. Weiße Kacheln im Raster wie auf der Startseite
  (12 Spalten, gleiche Rundung, gleicher Schatten), Reiter in der Kopfzeile des Bereichs, Liste der Anträge rechts schmal.
  Die Stempel-Kachel läuft von zartem Blau leicht ins Weiße aus. Kein farbiger Seitenstreifen, keine Beispieltexte in Feldern,
  kein eigenes Suchfeld (das Suchfeld oben filtert die Namen). Listen und Tabellen passen sich der Breite an und scrollen nur senkrecht.
  Greift nur im geöffneten Bereich (#bsBereich[data-bereich="stempeln"]); die Reiter-Leiste der Stoppuhr-Seite wird hier eingeblendet.
*/
/* marke-ausnahme: Bento-Ansicht wie im AIOS — Kachel-Radien (--bs-r) und Pillen-Reiter gelten hier bewusst (marke/REGELN.md, Abschnitt Bento-Ansicht) */

/* Stoppuhr-Seite: nur die Umschalter-Kachel („Tätigkeiten | Arbeitszeit") wieder sichtbar, wenn der Baustein zugeschaltet ist */
#bsBereich[data-bereich="zeit"] .bs-kopf:has(.bs-schalter-kachel) { display: grid; margin-bottom: var(--bs-luft); }

#bsBereich[data-bereich="stempeln"] .bs-pillen { display: none; }
#bsBereich[data-bereich="stempeln"] .bs-liste-karte { overflow: visible; background: transparent; box-shadow: none; }
#bsBereich[data-bereich="stempeln"] .bs-liste { margin: 0 -20px -20px; padding: 4px 20px 20px; }

#bsBereich[data-bereich="stempeln"] .az-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
#bsBereich[data-bereich="stempeln"] .az-k { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 18px 20px; box-sizing: border-box;
  background: var(--bs-karte); color: var(--bs-text); border-radius: var(--bs-r); box-shadow: var(--wb-rand, none); font-family: var(--marke-schrift); font-size: 13px; }
#bsBereich[data-bereich="stempeln"] .az-k.b2 { grid-column: span 2; }
#bsBereich[data-bereich="stempeln"] .az-k.b3 { grid-column: span 3; }
#bsBereich[data-bereich="stempeln"] .az-k.b4 { grid-column: span 4; }
#bsBereich[data-bereich="stempeln"] .az-k.b5 { grid-column: span 5; }
#bsBereich[data-bereich="stempeln"] .az-k.b7 { grid-column: span 7; }
#bsBereich[data-bereich="stempeln"] .az-k.b8 { grid-column: span 8; }
#bsBereich[data-bereich="stempeln"] .az-k.breit { grid-column: 1 / -1; }
#bsBereich[data-bereich="stempeln"] .az-k.h2 { grid-row: span 2; }
/* Menü-Modus (Fenster rechts, weißer Grund): flache Kacheln mit dünnem Rand statt weißer Fläche auf grauem Grund */
html.wb-menue-modus #bsBereich[data-bereich="stempeln"] .az-k:not(.stempel) { border: 1px solid var(--bs-linie); box-shadow: none; }
/* Farbige Fläche: zartes Blau, das nach rechts unten ins Weiße ausläuft */
#bsBereich[data-bereich="stempeln"] .az-k.stempel { background: linear-gradient(135deg, var(--wb-akzent-zart, var(--marke-nav-kachel)) 0%, var(--bs-karte) 100%); }
#bsBereich[data-bereich="stempeln"] .az-k-l { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--bs-leise); }
#bsBereich[data-bereich="stempeln"] .az-gross { font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; font-variant-numeric: tabular-nums; }
#bsBereich[data-bereich="stempeln"] .az-gross small { font-size: 13px; font-weight: 500; color: var(--bs-leise); letter-spacing: 0; }
#bsBereich[data-bereich="stempeln"] .az-gross.minus, #bsBereich[data-bereich="stempeln"] td.minus { color: var(--marke-gefahr); }
#bsBereich[data-bereich="stempeln"] .az-sub { display: block; font-size: 12px; color: var(--bs-leise); }
#bsBereich[data-bereich="stempeln"] .az-sub.warn, #bsBereich[data-bereich="stempeln"] .az-vorschau.warn { color: var(--marke-gefahr); }
#bsBereich[data-bereich="stempeln"] .az-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 4px; }
#bsBereich[data-bereich="stempeln"] .az-balken { height: 6px; border-radius: 999px; background: var(--bs-weich); overflow: hidden; }
#bsBereich[data-bereich="stempeln"] .az-balken i { display: block; height: 100%; border-radius: 999px; background: var(--wb-auswahl, var(--marke-nav-blau)); }
#bsBereich[data-bereich="stempeln"] .az-link { border: 0; background: none; padding: 0; font: 600 12px var(--marke-schrift); color: var(--wb-auswahl, var(--marke-nav-blau)); cursor: pointer; text-decoration: underline; }
#bsBereich[data-bereich="stempeln"] .az-link:hover { color: var(--bs-text); }
#bsBereich[data-bereich="stempeln"] .az-leer { padding: 12px 4px; text-align: center; color: var(--bs-leise); font-size: 13px; }
#bsBereich[data-bereich="stempeln"] .az-hinweis { padding: 8px 12px; border-radius: var(--marke-r-m, 9px); background: color-mix(in srgb, var(--marke-warn) 14%, var(--bs-karte)); font-size: 12px; }
#bsBereich[data-bereich="stempeln"] .az-meldung { padding: 8px 12px; border-radius: var(--marke-r-m, 9px); background: color-mix(in srgb, var(--marke-ok) 12%, var(--bs-karte)); font-size: 12px; }
#bsBereich[data-bereich="stempeln"] .az-meldung.fehler { background: color-mix(in srgb, var(--marke-gefahr) 12%, var(--bs-karte)); color: var(--marke-gefahr); }
#bsBereich[data-bereich="stempeln"] .az-vorschau { min-height: 18px; font-size: 12px; color: var(--bs-leise); }
#bsBereich[data-bereich="stempeln"] .az-name { font-size: 15px; font-weight: 700; }
#bsBereich[data-bereich="stempeln"] .az-trenn { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--bs-linie); font-size: 12px; font-weight: 600; color: var(--bs-leise); }

/* Formulare */
#bsBereich[data-bereich="stempeln"] .az-form { display: flex; flex-direction: column; gap: 10px; }
#bsBereich[data-bereich="stempeln"] .az-zeile { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
#bsBereich[data-bereich="stempeln"] .az-feld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#bsBereich[data-bereich="stempeln"] .az-feld .a4h-field { width: 100%; box-sizing: border-box; }
#bsBereich[data-bereich="stempeln"] .az-nachtrag { padding: 12px; border-radius: var(--marke-r-m, 9px); background: var(--bs-weich); }
#bsBereich[data-bereich="stempeln"] .az-tage { display: flex; gap: 4px; flex-wrap: wrap; }
#bsBereich[data-bereich="stempeln"] .az-tage button { height: 28px; min-width: 36px; padding: 0 10px; border: 1px solid var(--bs-linie); border-radius: var(--marke-r-pill); background: transparent; color: var(--bs-leise);
  font: 600 12px var(--marke-schrift); cursor: pointer; }
#bsBereich[data-bereich="stempeln"] .az-tage button.an { background: var(--wb-auswahl, var(--marke-nav-blau)); border-color: transparent; color: #fff; }

/* Tabellen: passen sich der Breite an, nur senkrecht scrollen */
#bsBereich[data-bereich="stempeln"] .az-tab { width: 100%; border-collapse: collapse; table-layout: auto; }
#bsBereich[data-bereich="stempeln"] .az-tab th { padding: 6px 8px; text-align: left; font-size: 11px; font-weight: 600; color: var(--bs-leise); border-bottom: 1px solid var(--bs-linie); white-space: nowrap; }
#bsBereich[data-bereich="stempeln"] .az-tab td { padding: 8px; border-bottom: 1px solid var(--bs-linie); vertical-align: middle; font-variant-numeric: tabular-nums; }
#bsBereich[data-bereich="stempeln"] .az-tab th.z, #bsBereich[data-bereich="stempeln"] .az-tab td.z { text-align: right; white-space: nowrap; }
#bsBereich[data-bereich="stempeln"] .az-tab td.hin { color: var(--bs-leise); font-size: 12px; overflow-wrap: anywhere; }
#bsBereich[data-bereich="stempeln"] .az-tab tr.heute td { background: var(--wb-akzent-zart, var(--marke-nav-kachel)); font-weight: 600; }
#bsBereich[data-bereich="stempeln"] .az-tab tr.frei td { color: var(--bs-leise); }
#bsBereich[data-bereich="stempeln"] .az-tab tr.wahl { cursor: pointer; }
#bsBereich[data-bereich="stempeln"] .az-tab tr.wahl:hover td { background: var(--bs-weich); }
#bsBereich[data-bereich="stempeln"] .az-tab tr.wahl.an td { background: var(--wb-auswahl, var(--marke-nav-blau)); color: #fff; }
#bsBereich[data-bereich="stempeln"] .az-tab small { font-size: 11px; color: var(--bs-leise); }
#bsBereich[data-bereich="stempeln"] .az-tab tr.wahl.an small { color: inherit; }
#bsBereich[data-bereich="stempeln"] .az-tab.kompakt td { text-align: right; font-weight: 700; }

/* Listen rechts: schmal, nur senkrecht scrollbar */
#bsBereich[data-bereich="stempeln"] .az-liste { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; max-height: 420px; }
#bsBereich[data-bereich="stempeln"] .az-liste.kurz { max-height: 150px; }
#bsBereich[data-bereich="stempeln"] .az-eintrag { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: var(--marke-r-m, 9px); background: var(--bs-weich); }
#bsBereich[data-bereich="stempeln"] .az-eintrag.klein { flex-direction: row; justify-content: space-between; align-items: center; padding: 6px 10px; }
#bsBereich[data-bereich="stempeln"] .az-eintrag b { display: block; font-size: 13px; }
#bsBereich[data-bereich="stempeln"] .az-rechts { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* Abwesenheitskalender des Monats: eine Zeile je Person, eine Zelle je Tag */
#bsBereich[data-bereich="stempeln"] .az-kal { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; }
#bsBereich[data-bereich="stempeln"] .az-kal-z { display: grid; grid-template-columns: minmax(70px, 130px) minmax(0, 1fr); gap: 8px; align-items: center; font-size: 11px; }
#bsBereich[data-bereich="stempeln"] .az-kal-z > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#bsBereich[data-bereich="stempeln"] .az-kal-z > div { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; }
#bsBereich[data-bereich="stempeln"] .az-kal-z i { height: 14px; border-radius: 3px; background: var(--bs-weich); }
#bsBereich[data-bereich="stempeln"] .az-kal-z i.we, #bsBereich[data-bereich="stempeln"] .az-kal-z i.fei { background: color-mix(in srgb, var(--bs-leise) 28%, var(--bs-karte)); }
#bsBereich[data-bereich="stempeln"] .az-kal-z i.abw { background: var(--wb-auswahl, var(--marke-nav-blau)); }
#bsBereich[data-bereich="stempeln"] .az-kal-z i.abw.offen { background: color-mix(in srgb, var(--marke-warn) 70%, var(--bs-karte)); }

@media (max-width: 900px) {
  #bsBereich[data-bereich="stempeln"] .az-k { grid-column: 1 / -1; }
  #bsBereich[data-bereich="stempeln"] .az-k.h2 { grid-row: auto; }
}