@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/OpenSans-latin-ext.062c1f2aaf2d.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/OpenSans-latin.dcf31ebe1074.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  /* --- Produktfarbe #2b4242 (F-01, F-04, F-05) ------------------------------ */
  --green-50:  #eaefef;   /* dezente Flaeche; rechnerisch ~10 % der Produktfarbe auf Weiss – keine Regelwerk-Nuance (F-04 kennt 100/60/20), Befund 17.09.2026 */
  --green-100: #d5dcdc;
  --green-200: #c2cfce;
  --green-400: #5c7a79;   /* zurueckgestellt / dekorativ */
  --green-500: #35504f;
  --green-600: #2b4242;   /* Produktfarbe */
  --green-700: #1f3131;   /* Hover gefuellter Primaerbuttons (F-05) */
  --green-900: #16211f;

  /* --- Warnung var(--warning) (F-06) ---------------------------------------------- */
  --amber-50:  var(--warning-soft);   /* helle Warnflaeche */
  --amber-100: #ffe4bb;
  --amber-400: #c08340;
  --amber-500: #a25d10;
  --amber-600: var(--warning);   /* Warnung */
  --amber-700: #6d3b06;
  --amber-900: #4a2804;

  /* --- Gefahr var(--danger) (F-06, B-03) ----------------------------------------- */
  --red-50:  #fce9e7;     /* helle Gefahrenflaeche */
  --red-100: #f8d4d0;
  --red-400: #d9695f;
  --red-500: #c73529;
  --red-600: var(--danger);     /* Gefahr */
  --red-700: #8f1c13;     /* Gefahr Hover */
  --red-900: #611009;

  /* --- Neutrale Toene (F-02) ----------------------------------------------- */
  --ink-900: #303030;     /* Primaertext */
  --ink-800: #4a4a4a;
  --ink-700: #686868;     /* Sekundaertext */
  --ink-600: #686868;     /* zusammengefuehrt: keine eigene Rolle im Regelwerk */
  --ink-500: #878787;     /* zurueckgestellte Inhalte, Feldrahmen */
  --ink-300: #b2b2b2;     /* deaktiviert / dekorativ */
  --ink-100: #e9e9e9;     /* Trennlinien */
  --ink-50:  #fafbfb;     /* subtile Flaeche */
  --paper:   #f5f6f7;     /* Seitenflaeche */
  --white:   #ffffff;     /* Komponentenflaeche */

  /* --- Semantische Rollen des Regelwerks ------------------------------------ */
  --product:        #2b4242;
  --product-60:     rgba(43, 66, 66, .60);
  --product-20:     rgba(43, 66, 66, .20);
  --product-hover:  #1f3131;
  --gold:           #b9924c;   /* F-03: hoechstens einmal je Ansicht */
  --gold-60:        rgba(185, 146, 76, .60);
  --gold-20:        rgba(185, 146, 76, .20);
  --gold-ink:       var(--ink-900);   /* dunkler Text auf Gold, Weiss kontrastiert zu schwach */
  --gold-hover:     #a27f3f;   /* Rahmen des Aufmerksamkeits-Hovers; Flaeche bleibt Gold (Kontrast 4,5:1 zu var(--ink-900) nur bei var(--gold)) */
  --success:        #177245;
  --success-soft:   #e7f4ec;
  --warning:        #8a4b08;
  --warning-soft:   #fff2dc;
  --danger:         #b42318;
  --danger-hover:   #8f1c13;
  --danger-soft:    #fce9e7;
  --info:           #175cd3;
  --info-soft:      #e9f1ff;
  --focus:          #2f80ed;   /* Tastaturfokus */

  /* Akzent: eine Produktfarbe fuer alle Bereiche (F-01) */
  --accent:        var(--product);
  --accent-strong: var(--product-hover);
  --accent-soft:   var(--green-50);
  --accent-grad:   var(--product);   /* kein Verlauf mehr (F-04) */

  /* --- Rundungen (A-04): 6 / 10 / 16, keine allgemeine Pillenform ----------- */
  --radius:    16px;   /* groessere Karten und Dialoge */
  --radius-sm: 10px;   /* Bedienelemente und kleine Karten */
  --radius-xs: 6px;    /* Statuskennzeichnungen, Tags, kleine Elemente */

  /* --- Abstandsskala (A-01): 4-Pixel-Raster, keine Zwischenwerte ------------- */
  --sp-1: 4px;    /* Label-Feld, Icon-Text */
  --sp-2: 8px;    /* kleine Gaps, Chips */
  --sp-3: 12px;   /* Innenabstand kleiner Komponenten */
  --sp-4: 16px;   /* Feldgruppen, Karten mobil */
  --sp-5: 24px;   /* Karten, Abstand zwischen Bereichen */
  --sp-6: 32px;   /* grosse Seitenbereiche */
  --sp-7: 48px;
  --sp-8: 64px;

  /* --- Schatten (A-05): nur bei tatsaechlicher Hoehe ------------------------ */
  --shadow-el: 0 8px 24px rgba(48, 48, 48, .16);   /* Dialog, schwebendes Menue */
  --shadow-sm: 0 2px 8px rgba(48, 48, 48, .10);    /* Popover, Toast */

  /* --- Schriftleiter (T-03): sechs Stufen, nichts unter 12 px --------------- */
  --fs-h1: 32px;   --lh-h1: 38px;
  --fs-h2: 24px;   --lh-h2: 30px;
  --fs-h3: 18px;   --lh-h3: 24px;
  --fs-body: 16px; --lh-body: 25px;
  --fs-ui: 14px;   --lh-ui: 20px;
  --fs-meta: 12px; --lh-meta: 17px;

  /* --- Weiss auf dunkler Flaeche (F-04: nur 100 / 60 / 20 %) ---------------- */
  --white-60: rgba(255, 255, 255, 0.60);   /* Rahmen, Icons, sekundaerer Text auf Produktfarbe */
  --white-20: rgba(255, 255, 255, 0.20);   /* dezente Flaeche auf Produktfarbe */
  --scrim:    rgba(48, 48, 48, .50);      /* Hintergrund hinter Dialogen */

  /* --- Seitenleiste: dunkle Flaeche nach visueller Referenz ------------------
     (HfM-Planner-UI-Regelwerk_Entwurf-0.2.html, .sidebar). Der Anthrazitton
     steht nicht in der Token-Palette von CLAUDE.md Abschnitt 3 - Uebernahme
     als bewusste, gemeldete Entscheidung (Andreas, 20.08.2026). */
  --side-bg: #262b31;

  /* --- Kategoriefarbe (kein Status): Aufgaben im Kalender ------------------- */
  --cat-aufgaben: #6155b0;
  /* Kategoriefarben (Andreas 29.10.2026, Kreise: „richtige Farben für die Standorte/Unternehmen“): unterscheidbar,
     keine Status- oder Produktfarbe, weiße Schrift darauf mindestens 4,5:1; nie allein, immer mit Marke/Text (F-07) */
  --kat-1: #1d6fa5;   /* Blau */
  --kat-2: #a8572a;   /* Rost */
  --kat-3: #6155b0;   /* Violett */
  --kat-4: #5b7a1e;   /* Oliv */
  --kat-5: #b03a74;   /* Beere */
  --kat-6: #4f5d6b;   /* Schiefer */

  --header-h:  60px;
  --bx-page-max: 960px;   /* einheitliche Content-/Listen-Breite aller Bereiche */
}
.bx-theme-green, .bx-theme-amber, .bx-theme-red { --accent: var(--product); --accent-strong: var(--product-hover); --accent-soft: var(--green-50); --accent-grad: var(--product); }
* { box-sizing: border-box; }
.bx [hidden], .bx[hidden] { display: none !important; }
html { background: var(--paper); overscroll-behavior: none; }
b, strong { font-weight: 600; }
.bx {
  margin: 0;
  min-height: 100vh;
  touch-action: manipulation;   /* kein Doppeltipp-Zoom */
  overscroll-behavior: none;    /* kein iOS-Rubberband, das Fixes mitzieht */
  overflow-x: clip;             /* kein horizontaler Seiten-Scroll (clip bricht kein sticky) */
  font-family: "Open Sans", Arial, sans-serif;
  color: var(--ink-900);
  background: transparent;       /* Verlauf liegt fix dahinter (.bx-bg) */
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}
.bx-bg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--paper);   /* F-01: neutrale Arbeitsflaeche, keine Toenung */
}
.bx-header {
  position: -webkit-sticky;   /* iOS Safari */
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--side-bg);        /* wie Sidebar und Bottombar (Andreas, 23.08.2026) */
  color: var(--white);
  padding-top: env(safe-area-inset-top, 0);

}
.bx-header-inner {
  max-width: 1100px;
  margin: 0 auto;
  min-height: var(--header-h);
  padding: var(--sp-2) var(--sp-4);
  display: grid;
  grid-template-columns: 1fr auto 1fr;   /* User bleibt mittig */
  align-items: center;
  gap: var(--sp-3);
}
.bx-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--white);
  text-decoration: none;
  font-size: var(--fs-h3);
  letter-spacing: .2px;
}
.bx-brand-text strong { font-weight: 600; }
.bx-menu-btn {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--white-60);
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex: 0 0 auto;
  transition: background .15s ease, color .15s ease;
}
.bx-menu-btn i { font-size: 24px; }
.bx-menu-btn:hover { color: var(--white); background: var(--white-20); }
.bx-menu-btn:active { color: var(--white); background: var(--white-20); }
.bx-menu-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.bx-logo {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background: var(--white);

  overflow: hidden;
  flex: 0 0 auto;
}
.bx-logo img { width: 30px; height: 30px; object-fit: contain; display: block; }
.bx-exit {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--white);
  text-decoration: none;
  font-size: var(--fs-ui);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  background: var(--white-20);
  border: 1px solid var(--white-20);
  transition: background .15s ease, transform .1s ease;
}
.bx-exit:hover { background: var(--white-20); color: var(--white); }
.bx-exit:active { transform: scale(.96); }
.bx-logout-form { display: inline-flex; margin: 0; }
.bx-logout { cursor: pointer; font: inherit; font-size: var(--fs-ui); }
.bx-logout i { font-size: var(--fs-body); }
.bx-login {
  min-height: 100dvh;
  display: flex; flex-direction: column;
}
.bx-login-showcase {
  order: 1;                                   /* mobil: unter dem Login */
  position: relative; overflow: hidden;
  padding: var(--sp-6) var(--sp-5) 88px;
  background: var(--product);
  color: var(--white);
}
.bx-login-hero { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.bx-login-hero-logo {
  width: 56px; height: 56px; flex: 0 0 auto;
  display: grid; place-items: center; overflow: hidden;
  border-radius: var(--radius); background: var(--white);

}
.bx-login-hero-logo img { width: 100%; height: 100%; object-fit: cover; }
.bx-login-hero-title { margin: 0; font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: 600; letter-spacing: -.5px; }
.bx-login-hero-title strong { font-weight: 600; }
.bx-login-hero-claim { margin: var(--sp-1) 0 0; font-size: var(--fs-ui); color: var(--white); }
.bx-login-tiles {
  position: relative; z-index: 1;
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(2, 1fr);
  max-width: 640px;
}
.bx-login-tile {
  display: flex; flex-direction: column; gap: var(--sp-1);
  padding: var(--sp-4); border-radius: var(--radius);
  background: var(--white-20);
  border: 1px solid var(--white-20);
  backdrop-filter: blur(2px);
  transition: transform .12s ease, background .12s ease;
}
.bx-login-tile:hover { transform: translateY(-3px); background: var(--white-20); }
.bx-login-tile-ic {
  width: 38px; height: 38px; margin-bottom: var(--sp-1);
  display: grid; place-items: center; border-radius: var(--radius-sm);
  background: var(--accent-grad); color: var(--white); font-size: var(--fs-body);

}
.bx-login-tile-label { font-weight: 600; font-size: var(--fs-ui); }
.bx-login-tile-hint { font-size: var(--fs-ui); color: var(--white); line-height: 1.25; }
.bx-login-hills { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 88px; z-index: 0; }
.bx-login-auth {
  order: 0;                                   /* mobil: zuerst */
  flex: 1 1 auto;
  display: grid; place-items: center;
  padding: var(--sp-6) var(--sp-4); background: var(--paper);
}
.bx-login-card {
  width: min(380px, 100%); text-align: center;
}
.bx-login-logo {
  width: 60px; height: 60px; margin: 0 auto;
  display: grid; place-items: center; overflow: hidden;
  border-radius: var(--radius); background: var(--white);
  border: 1px solid var(--ink-100);

}
.bx-login-logo img { width: 100%; height: 100%; object-fit: cover; }
.bx-login-title { margin: var(--sp-4) 0 0; font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 600; color: var(--ink-900); letter-spacing: -.4px; }
.bx-login-sub { margin: var(--sp-2) 0 var(--sp-5); color: var(--ink-500); font-size: var(--fs-ui); }
.bx-login-err {
  display: flex; align-items: center; gap: var(--sp-2); text-align: left;
  margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-3);
  border-radius: var(--radius-sm); font-size: var(--fs-ui); font-weight: 600;
  color: var(--red-700); background: var(--red-50); border: 1px solid var(--red-100);
}
.bx-login-form { display: flex; flex-direction: column; gap: var(--sp-4); text-align: left; }
.bx-login-ip { position: relative; display: block; }
.bx-login-ip-ic {
  position: absolute; top: 50%; left: 16px; transform: translateY(-50%);
  color: var(--ink-300); font-size: var(--fs-ui); pointer-events: none;
}
.bx-login-ip .bx-clock-input { padding-left: 40px; }
.bx-login-ip:focus-within .bx-login-ip-ic { color: var(--green-500); }
.bx-login-ip .bx-clock-input#id_password { padding-right: 46px; }
.bx-login-pw-toggle {
  position: absolute; top: 50%; right: 2px; transform: translateY(-50%);
  width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer;
  color: var(--ink-500); border-radius: var(--radius-sm); display: grid; place-items: center;
}
.bx-login-pw-toggle:hover { color: var(--ink-700); background: var(--ink-100); }
.bx-login-submit { justify-content: center; margin-top: var(--sp-2); width: 100%; border: 0; cursor: pointer; font-size: var(--fs-ui); }
.bx-login-classic {
  display: block; text-align: center; margin-top: var(--sp-4);
  color: var(--ink-500); font-size: var(--fs-ui); text-decoration: none;
}
.bx-login-classic:hover { color: var(--ink-700); text-decoration: underline; }
@media (min-width: 920px) {
  .bx-login { flex-direction: row; }
  .bx-login-showcase {
    order: 0; flex: 1.15 1 0;
    padding: var(--sp-7) var(--sp-7) 100px;
    display: flex; flex-direction: column; justify-content: center;
  }
  .bx-login-hero { margin-bottom: var(--sp-6); }
  .bx-login-hero-title { font-size: var(--fs-h1); }
  .bx-login-tiles { grid-template-columns: repeat(2, minmax(160px, 1fr)); gap: var(--sp-4); }
  .bx-login-auth { order: 1; flex: .85 1 0; padding: var(--sp-6) var(--sp-6); }
  .bx-login-hills { height: 100px; }
}
@media (min-width: 1200px) {
  .bx-login-tiles { grid-template-columns: repeat(4, 1fr); max-width: 760px; }
}
.bx-exit { justify-self: end; }
.bx-pw-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.bx-pw-ip .bx-clock-input { padding-right: 46px; }
.bx-pw-aktionen { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin: 0; }
.bx-pw-aktionen .bx-btn { text-decoration: none; }
.bx-pw-ok { margin-bottom: var(--sp-4); }
@media (max-width: 640px) {
  .bx-pw-aktionen { flex-direction: column; }
  .bx-pw-aktionen .bx-btn { justify-content: center; }
}
.bx-left {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}
.bx-layout {
  flex: 1 0 auto;
  display: flex;
  align-items: flex-start;
  width: 100%;
}
.bx-content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.bx-content .bx-main { flex: 1 0 auto; }
.bx-sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 90;
  width: 300px;
  max-width: 86vw;
  padding: var(--sp-4) var(--sp-3) calc(var(--sp-4) + env(safe-area-inset-bottom, 0));
  padding-top: calc(env(safe-area-inset-top, 0) + var(--sp-4));
  background: var(--side-bg);
  border-right: 0;
  box-shadow: var(--shadow-el);
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform .25s ease;
}
body.bx-side-open .bx-sidebar { transform: translateX(0); }
.bx-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-ui);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--white-60);
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
}
.bx-sidebar-close {
  display: inline-block;
  border: none; background: transparent;
  color: var(--white-60);
  font-size: 20px;
  cursor: pointer;
}
.bx-sidebar-close:hover { color: var(--white); }
.bx-side-nav { display: flex; flex-direction: column; gap: var(--sp-1); }
.bx-side-item:focus-visible, .bx-side-subitem:focus-visible, .bx-sidebar-close:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.bx-side-caret {
  margin-left: auto; flex: 0 0 auto;
  font-size: var(--fs-meta); color: var(--white-60);
  transition: transform .16s ease, color .16s ease;
}
.bx-side-item.is-open .bx-side-caret { transform: rotate(180deg); }
.bx-side-item.is-active .bx-side-caret { color: var(--white); }
@media (prefers-reduced-motion: reduce) {
  .bx-side-caret { transition: none; }
}
.bx-side-sub {
  display: flex; flex-direction: column; gap: 2px;
  margin: 2px 0 var(--sp-2) 26px; padding-left: var(--sp-3);
  border-left: 1px solid var(--white-20);
}
.bx-side-sub[hidden] { display: none; }
.bx-side-subitem {
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: 36px; padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  text-decoration: none; color: var(--white-60);
  font-size: var(--fs-ui); font-weight: 400;
  transition: background .14s ease, color .14s ease;
}
.bx-side-subitem:hover { background: var(--white-20); color: var(--white); }
.bx-side-subitem.is-active {
  background: var(--ink-800); color: var(--white); font-weight: 600;
}
.bx-side-subic {
  width: 20px; flex: 0 0 auto; display: grid; place-items: center;
  font-size: var(--fs-ui); color: var(--white-60);
}
.bx-side-subitem.is-active .bx-side-subic { color: var(--white); }
.bx-side-sublabel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bx-side-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--white-60);
  font-weight: 600;
  transition: background .14s ease, color .14s ease;
}
.bx-side-item:hover { background: var(--white-20); color: var(--white); }
.bx-side-ic {
  width: 36px; height: 36px;
  flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  font-size: var(--fs-ui);
  color: var(--white);
  background: var(--white-20);
  transition: background .14s ease, color .14s ease;
}
.bx-side-item.is-active {
  background: var(--ink-800);
  color: var(--white);
}
.bx-side-item.is-active .bx-side-ic {
  background: var(--white-20);
  color: var(--white);
}
.bx-side-sep {
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--white-60);
  padding: var(--sp-4) var(--sp-3) var(--sp-2);
}
.bx-side-home { margin-bottom: 2px; }
.bx-backdrop {
  position: fixed; inset: 0;
  z-index: 80;
  background: var(--scrim);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease;
}
body.bx-side-open .bx-backdrop { opacity: 1; visibility: visible; }
body.bx-side-open { overflow: hidden; }
@media (min-width: 1024px) {
  body.bx-side-open { overflow: auto; }
  body.bx-side-open .bx-backdrop { opacity: 0; visibility: hidden; }
  .bx-layout { transition: padding-left .2s ease; }
  body.bx-side-open .bx-layout { padding-left: 300px; }
}
.bx-right {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.bx-status { display: inline-flex; align-items: center; gap: 2px; }
.bx-schlank .bx-header-inner { grid-template-columns: 1fr auto; }
.bx-iconbtn, .bx-live {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font: inherit;
  line-height: 1;
  text-decoration: none;   /* fuer .bx-bell als <a> */
}
.bx-live { cursor: default; }
.bx-iconbtn i { font-size: 20px; }
.bx-status-label { font-size: var(--fs-meta); font-weight: 600; white-space: nowrap; }
.bx-badge {
  position: absolute;
  top: -8px; right: -8px;
  min-width: 16px; height: 16px;
  padding: 0 var(--sp-1);
  font-size: var(--fs-meta); font-weight: 600; line-height: var(--lh-meta);
  text-align: center;
  color: var(--white);
  background: var(--amber-600);
  border-radius: var(--radius-xs);
}
.bx-live.is-on { --st: var(--green-400); }
.bx-live.is-pause { --st: var(--amber-400); }
.bx-live.is-off { --st: var(--ink-300); }
.bx-live-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--st, var(--green-500));
}
.bx-live.is-on .bx-live-dot { animation: bx-pulse 1.8s infinite; }
@keyframes bx-pulse {
  0%   { box-shadow: 0 0 0 0 var(--product-60); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.bx-header .bx-status { color: var(--white); }
.bx-header .bx-iconbtn { color: var(--white); }
.bx-header .bx-iconbtn:hover { background: var(--white-20); }
.bx-header .bx-live { color: var(--white); }
.bx-header .bx-status-label { display: none; }
.bx-header .bx-live .bx-status-label { display: inline; }
@media (max-width: 899px) {
  .bx-header .bx-status { display: none; }
  .bx-content { padding-bottom: 60px; }
}
.bx-crumbs {
  max-width: var(--bx-page-max);
  margin: var(--sp-4) auto 0;
  padding: 0 var(--sp-5);
  display: flex;
  flex-wrap: wrap;   /* lange Prozessnamen (z. B. Pflanzenschutz · Arbeitsgang AG-…) brechen mobil um statt zu überlaufen */
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-ui);
  color: var(--ink-500);
}
.bx-crumbs a:not(.bx-zurueck) { color: var(--ink-500); text-decoration: none; }
.bx-crumbs a:hover { color: var(--accent); }
.bx-crumbs .bx-crumb-home {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; margin: -12px 0 -12px -12px; border-radius: var(--radius-sm);
}
.bx-crumbs .bx-crumb-home:hover { background: var(--product-20); }
.bx-crumbs .bx-sep { font-size: var(--fs-meta); opacity: .6; }
.bx-crumb-current { color: var(--ink-900); font-weight: 600; }
.bx-zurueck-zeile { flex-basis: 100%; }
.bx-zurueck {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 44px; margin: -8px 0 -12px -12px; padding: 0 var(--sp-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-ui); font-weight: 600; color: var(--product); text-decoration: none;
}
.bx-zurueck:hover { text-decoration: underline; }
body:has(.bx-zurueck-knopf) .bx-zurueck-zeile { display: none; }
.bx-zurueck:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.bx-side-favbox, .bx-side-favs { display: flex; flex-direction: column; gap: 2px; }
.bx-side-fav {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 44px; padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  text-decoration: none; color: var(--white-60);
  font-size: var(--fs-ui); font-weight: 400;
  transition: background .14s ease, color .14s ease;
}
.bx-side-fav:hover { background: var(--white-20); color: var(--white); }
.bx-side-fav:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.bx-main {
  flex: 1 0 auto;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-5) var(--sp-7);
}
.bx-version {
  padding: 0 var(--sp-4) var(--sp-4);
  text-align: center;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--ink-700);
}
.bx-phead {
  display: flex; align-items: center; gap: var(--sp-3);
  max-width: var(--bx-page-max); margin: var(--sp-2) auto var(--sp-4);
}
.bx-phead-icon {
  width: 44px; height: 44px; flex: 0 0 auto; border-radius: var(--radius-sm);
  display: inline-grid; place-items: center; font-size: 20px;
  color: var(--white); background: var(--accent-grad);

}
.bx-phead-txt { min-width: 0; display: flex; flex-direction: column; }
.bx-phead-title { margin: 0; font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: 600; letter-spacing: -.3px; color: var(--ink-900); }
@media (max-width: 640px) {
  .bx-phead-title { font-size: var(--fs-h2); line-height: var(--lh-h2); }
}
.bx-phead-sub { font-size: var(--fs-ui); color: var(--ink-500); }
.bx-phead-info { display: none; }
details.bx-mehr { display: contents; }
details.bx-mehr > summary { display: none; }
details.bx-mehr > .bx-mehr-list { display: contents; }
.bx-mehr-knopf { margin-top: var(--sp-2); }
.bx-section { margin-bottom: var(--sp-6); }
.bx-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin: var(--sp-2) 2px var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--ink-100);
}
.bx-section-title {
  margin: 0;
  font-size: var(--fs-h2); line-height: var(--lh-h2);
  font-weight: 600;
  letter-spacing: -.2px;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.bx-section-title i { color: var(--product); }
.bx-section-note {
  font-size: var(--fs-ui);
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: .6px;
  white-space: nowrap;
}
.bx-hint {
  margin: var(--sp-4) 2px 0;
  font-size: var(--fs-ui);
  color: var(--ink-500);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.bx-hint i { color: var(--green-600); }
.bx-hint-mobile { display: none; }
@media (max-width: 899px) {
  .bx-hint-mobile { display: inline; }
}
.bx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--sp-4);
  max-width: var(--bx-page-max); margin-left: auto; margin-right: auto;
}
@media (min-width: 720px) {
  .bx-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
}
.bx-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-4);
  min-height: 150px;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--ink-100);
  text-decoration: none;
  color: var(--ink-900);
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.bx-tile::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: var(--accent-grad);
  opacity: .9;
}
.bx-tile:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
}
.bx-tile:active { transform: translateY(-1px) scale(.99); }
.bx-tile-icon {
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  border-radius: var(--radius);
  font-size: 24px;
  color: var(--accent-strong);
  background: var(--accent-soft);
  transition: transform .16s ease;
}
.bx-tile:hover .bx-tile-icon { transform: scale(1.06); }
.bx-tile-label { font-weight: 600; font-size: var(--fs-body); line-height: 1.2; }
.bx-tile-meta {
  font-size: var(--fs-ui);
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: .6px;
}
.bx-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius);
  padding: var(--sp-5);
}
.bx-card-head {
  display: flex; align-items: center; gap: var(--sp-2);
  font-weight: 600; font-size: var(--fs-body);
  margin-bottom: var(--sp-4);
}
.bx-card-head i { color: var(--ink-500); }
.bx-card-link {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-4);
  font-weight: 600; font-size: var(--fs-ui);
  color: var(--green-700); text-decoration: none;
}
.bx-card-link:hover { color: var(--green-600); }
#bx-team .bx-card {
  background: none; border: 0; box-shadow: none; padding: 0;
}
#bx-team .bx-card-head { font-size: var(--fs-ui); }
#bx-team .bx-chip { padding: 2px var(--sp-2); font-size: var(--fs-meta); }
.bx-clock-input {
  width: 100%;
  min-height: 48px;            /* einheitliche Höhe für alle Felder */
  padding: var(--sp-3) var(--sp-3);
  border: 1px solid var(--ink-500);   /* F-02: Feldrahmen */
  border-radius: var(--radius-sm);    /* A-04 */
  font-size: var(--fs-body);              /* >=16px: kein iOS-Auto-Zoom */
  font-family: inherit;
  color: var(--ink-900);
  background: var(--white);
}
.bx-clock-input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--focus);
}
.bx-clock-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--product-20);
}
body.bx input[type="date"], body.bx input[type="time"], body.bx input[type="datetime-local"] {
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
  min-width: 0;
  max-width: 100%;
}
body.bx input[type="date"]::-webkit-date-and-time-value, body.bx input[type="time"]::-webkit-date-and-time-value, body.bx input[type="datetime-local"]::-webkit-date-and-time-value {
  text-align: left;
  width: 100%;
  margin: 0;
}
body.bx input::-webkit-datetime-edit { padding: 0; }
body.bx input::-webkit-calendar-picker-indicator {
  margin-left: auto;
  opacity: .45;
  cursor: pointer;
}
.bx-modal {
  position: fixed; inset: 0;
  z-index: 120;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4);
}
.bx-modal[hidden] { display: none; }
.bx-modal-backdrop { position: absolute; inset: 0; background: var(--scrim); animation: bx-fade .2s ease; }
.bx-modal-box {
  position: relative;
  width: min(440px, 100%);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-el);
  text-align: left;
  transform-origin: center center;     /* per JS auf den geklickten Knoten gesetzt */
  animation: bx-grow .24s cubic-bezier(.2, .8, .3, 1.05);
}
@keyframes bx-grow { from { transform: scale(.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes bx-fade { from { opacity: 0; } to { opacity: 1; } }
.bx-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-5) var(--sp-3);
}
.bx-modal-head h2, .bx-modal-head h3 {
  margin: 0; font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 600;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  /* Lange Titelwörter (Pflanzenschutzmaßnahme) dürfen mobil trennen, statt das Schließen-Kreuz aus dem Dialog zu schieben */
  min-width: 0; hyphens: auto; overflow-wrap: anywhere;
}
.bx-modal-head h2 > span, .bx-modal-head h3 > span { min-width: 0; }
.bx-modal-head h2 i, .bx-modal-head h3 i { color: var(--green-600); }
@media (max-width: 640px) {
  .bx-modal-head h2, .bx-modal-head h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
}
.bx-modal-x {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  min-width: 44px; min-height: 44px; padding: 0; margin: -8px -12px -8px 0;
  border: 0; border-radius: var(--radius-sm); background: transparent;
  font-size: 20px; line-height: 1; color: var(--ink-500); cursor: pointer;
}
.bx-modal-x:hover { background: var(--product-20); color: var(--ink-900); }
.bx-modal-kopfaktion { margin-left: auto; margin-right: var(--sp-2); padding: var(--sp-2) var(--sp-3); }
@media (max-width: 640px) {
  .bx-modal-kopfaktion span { display: none; }
  .bx-modal-kopfaktion { min-width: 44px; padding: 0; }
}
.bx-modal-body { padding: var(--sp-2) var(--sp-5) var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-4); }
.bx-field { display: flex; flex-direction: column; gap: var(--sp-1); }
.bx-field-label {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2);
  font-size: var(--fs-ui); font-weight: 600; color: var(--ink-700);
}
.bx-required { color: var(--danger); font-weight: 600; }
.bx-optional { color: var(--ink-700); font-size: var(--fs-ui); font-weight: 400; }
.bx-field-hint { margin: 0; font-size: var(--fs-ui); line-height: 1.42; color: var(--ink-700); }
.bx-field-hint[hidden] { display: none; }
.bx-field.is-error .bx-clock-input, .bx-clock-input[aria-invalid="true"] {
  border: 2px solid var(--danger);
}
.bx-field.is-error .bx-field-hint { color: var(--danger); font-weight: 600; }
.bx-field.is-disabled { color: var(--ink-600); }
.bx-field.is-disabled .bx-clock-input { background: var(--paper); cursor: not-allowed; }
.bx-modal-hint { margin: 2px 2px 0; font-size: var(--fs-ui); color: var(--ink-700); }
.bx-loadbar { height: 4px; border-radius: 999px; background: var(--ink-100); overflow: hidden; margin: var(--sp-2) 2px 0; }
.bx-loadbar[hidden] { display: none; }
.bx-loadbar > span { display: block; height: 100%; width: 38%; border-radius: 999px; background: var(--green-600); animation: bx-loadbar 1.05s ease-in-out infinite; }
@keyframes bx-loadbar { 0% { transform: translateX(-130%); } 100% { transform: translateX(320%); } }
.bx-modal-hint.is-err { color: var(--red-600); font-weight: 600; }
.bx-modal-hint.is-ok { color: var(--green-700); font-weight: 600; }
.bx-check { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-ui); color: var(--ink-900); cursor: pointer; margin: 2px 0; }
.bx-check input { width: 17px; height: 17px; accent-color: var(--green-600); flex: 0 0 auto; }
.bx-field-row { display: flex; gap: var(--sp-3); }
.bx-field-row .bx-field { flex: 1 1 0; min-width: 0; }
@media (max-width: 600px) {
  .bx-modal { padding: var(--sp-3); }
  .bx-modal-box { width: 100%; overflow-x: hidden; }
  .bx-modal .bx-field-row { flex-direction: column; gap: var(--sp-3); }
  .bx-clock-input { min-width: 0; }
}
.bx-modal-foot {
  display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: flex-end;
  padding: var(--sp-3) var(--sp-5) var(--sp-4);
}
.bx-modal-foot .bx-btn { border: 0; cursor: pointer; font-family: inherit; }
.bx-modal-cancel {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; border: 1px solid var(--ink-500); cursor: pointer; font-family: inherit;
  background: var(--white); color: var(--ink-900); font-weight: 600;
  font-size: var(--fs-ui); line-height: 1.25;   /* wie .bx-btn, damit Abbrechen und Hauptaktion gleich gross sind */
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm);
}
.bx-modal-cancel:hover { background: var(--product-20); border-color: var(--product-60); }
.bx-modal-cancel:active { background: var(--product-20); border-color: var(--product); }
.bx-modal-cancel:disabled { color: var(--ink-300); border-color: var(--ink-300); cursor: not-allowed; background: var(--white); }
.bx-modal-cancel:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
body.bx-modal-open { overflow: hidden; }
.bx-choices { display: flex; flex-direction: column; gap: var(--sp-2); }
.bx-choice {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-sm);
  background: var(--white);
  text-decoration: none;
  color: var(--ink-900);
  font-weight: 600;
  transition: background .14s ease, border-color .14s ease, transform .1s ease;
}
.bx-choice:hover { background: var(--green-50); border-color: var(--green-500); }
.bx-choice:active { transform: scale(.99); }
.bx-choice-ic {
  width: 38px; height: 38px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background: var(--green-50); color: var(--green-700);
  font-size: var(--fs-body);
}
.bx-choice-label { flex: 1 1 auto; min-width: 0; }
.bx-choice-arrow { color: var(--ink-300); font-size: var(--fs-ui); }
.bx-card-link-btn { border: 0; background: transparent; cursor: pointer; font-family: inherit; }
.bx-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-xs);
  font-size: var(--fs-ui); font-weight: 600;
}
.bx-chip b { font-weight: 600; }
.bx-chip-on { background: var(--green-50); color: var(--green-700); }
.bx-chip-pause { background: var(--amber-50); color: var(--amber-700); }
.bx-chip-off { background: var(--ink-100);  color: var(--ink-700); }
.bx-empty {
  text-align: center;
  padding: var(--sp-7) var(--sp-5);
  border-radius: var(--radius);
  background: var(--white);
  border: 1px dashed var(--ink-300);
  color: var(--ink-500);
}
.bx-empty i { font-size: 2.4rem; color: var(--accent); margin-bottom: var(--sp-3); }
.bx-empty p { margin: 0 0 var(--sp-4); font-size: var(--fs-body); }
.bx-empty strong { color: var(--ink-900); }
.bx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  /* Explizit statt geerbt: <button> erbt die Seitenschrift nicht (UA-Default
     ~13px), <a> schon (16px) — ohne feste Groesse laufen beide auseinander */
  font-family: inherit;
  font-size: var(--fs-ui);
  line-height: 1.25;
  font-weight: 600;
  /* Ein Knopf ist immer einzeilig und 44 px hoch (Regelwerk .btn: min-height 44,
     line-height 1). Reicht der Platz nicht, bricht die Leiste um – nie der Text
     im Knopf (Befund 28.08.2026: „Pegel messen" zweizeilig neben „Schließen"). */
  white-space: nowrap;
  text-decoration: none;
  color: var(--white);
  background: var(--accent);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.bx-btn:hover { background: var(--accent-strong); }
.bx-btn:active { background: var(--accent-strong); }
.bx-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.bx-btn:disabled, .bx-btn[aria-disabled="true"] {
  background: var(--ink-300); color: var(--white); cursor: not-allowed;
}
.bx-btn[aria-busy="true"] { background: var(--accent-strong); cursor: progress; }
.bx-btn.bx-btn-sec { background: var(--white); color: var(--ink-900); border: 1px solid var(--ink-500); }
.bx-btn.bx-btn-sec:hover { background: var(--product-20); border-color: var(--product-60); }
.bx-btn.bx-btn-sec:active { background: var(--product-20); border-color: var(--product); }
.bx-btn.bx-btn-sec:disabled, .bx-btn.bx-btn-sec[aria-disabled="true"] { background: var(--white); color: var(--ink-300); border-color: var(--ink-300); cursor: not-allowed; }
.bx-btn.bx-btn-sec[aria-busy="true"] { background: var(--product-20); border-color: var(--product-60); cursor: progress; }
.bx-btn.bx-btn-text { background: transparent; color: var(--accent); border-color: transparent; }
.bx-btn.bx-btn-text:hover { background: var(--product-20); }
.bx-btn.bx-btn-text:active { background: var(--product-20); color: var(--accent-strong); }
.bx-btn.bx-btn-text:disabled, .bx-btn.bx-btn-text[aria-disabled="true"] { background: transparent; color: var(--ink-300); cursor: not-allowed; }
.bx-btn.bx-btn-text[aria-busy="true"] { background: var(--product-20); cursor: progress; }
.bx-btn.bx-btn-attention { background: var(--gold); color: var(--gold-ink); }
.bx-btn.bx-btn-attention:hover, .bx-btn.bx-btn-attention:active { background: var(--gold); color: var(--gold-ink); box-shadow: inset 0 0 0 2px var(--gold-hover); }
.bx-btn.bx-btn-attention:disabled, .bx-btn.bx-btn-attention[aria-disabled="true"] { background: var(--ink-300); color: var(--white); cursor: not-allowed; }
.bx-btn.bx-btn-attention[aria-busy="true"] { background: var(--gold); color: var(--gold-ink); box-shadow: inset 0 0 0 2px var(--gold-hover); cursor: progress; }
.bx-btn.bx-btn-danger, .bx-btn.bx-sst-btn-gefahr, .bx-btn.bx-btn-sec.bx-sst-gefahr, .bx-btn.bx-trm-del { background: var(--danger); color: var(--white); border: 1px solid transparent; }
.bx-btn.bx-btn-danger:hover, .bx-btn.bx-btn-danger:active, .bx-btn.bx-sst-btn-gefahr:hover, .bx-btn.bx-sst-btn-gefahr:active, .bx-btn.bx-btn-sec.bx-sst-gefahr:hover, .bx-btn.bx-btn-sec.bx-sst-gefahr:active, .bx-btn.bx-trm-del:hover, .bx-btn.bx-trm-del:active { background: var(--danger-hover); color: var(--white); border-color: transparent; }
.bx-btn.bx-btn-danger:disabled, .bx-btn.bx-btn-danger[aria-disabled="true"], .bx-btn.bx-sst-btn-gefahr:disabled, .bx-btn.bx-sst-btn-gefahr[aria-disabled="true"], .bx-btn.bx-btn-sec.bx-sst-gefahr:disabled, .bx-btn.bx-btn-sec.bx-sst-gefahr[aria-disabled="true"], .bx-btn.bx-trm-del:disabled, .bx-btn.bx-trm-del[aria-disabled="true"] { background: var(--ink-300); color: var(--white); border-color: transparent; cursor: not-allowed; }
.bx-btn.bx-btn-danger[aria-busy="true"], .bx-btn.bx-sst-btn-gefahr[aria-busy="true"], .bx-btn.bx-btn-sec.bx-sst-gefahr[aria-busy="true"], .bx-btn.bx-trm-del[aria-busy="true"] { background: var(--danger-hover); color: var(--white); cursor: progress; }
.bx-icon { display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; vertical-align: -0.125em; flex: 0 0 auto; }
.bx-icon-svg { width: 100%; height: 100%; display: block; }
.bx-icon--spin .bx-icon-svg { animation: bx-spin 1s linear infinite; }
@keyframes bx-spin { to { transform: rotate(360deg); } }
.bx-iconbtn .bx-icon { font-size: 20px; }
.bx-iconbtn.is-lg .bx-icon { font-size: 24px; }
.bx-iconbtn {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  min-width: 44px; min-height: 44px; padding: 0;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: var(--ink-700);
  font-size: 20px; line-height: 1; text-decoration: none; cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.bx-iconbtn > i, .bx-iconbtn > svg { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; }
.bx-iconbtn.is-lg { font-size: 24px; }
.bx-iconbtn.is-lg > i, .bx-iconbtn.is-lg > svg { width: 24px; height: 24px; }
.bx-iconbtn:hover { background: var(--product-20); color: var(--ink-900); }
.bx-iconbtn:active { background: var(--product-20); color: var(--product); }
.bx-iconbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.bx-iconbtn:disabled, .bx-iconbtn[aria-disabled="true"] { background: transparent; color: var(--ink-300); cursor: not-allowed; }
.bx-iconbtn[aria-busy="true"] { background: var(--product-20); cursor: progress; }
@media (max-width: 640px) {
  .bx-brand-text { display: none; }
  .bx-brand-nurtext { display: none; }
  .bx-exit-text { display: none; }
  .bx-exit { padding: var(--sp-2) var(--sp-3); }
  .bx-section-note { display: none; }
}
@media (max-width: 420px) {
  .bx-tile { min-height: 132px; padding: var(--sp-5) var(--sp-3); }
  .bx-tile-icon { width: 52px; height: 52px; font-size: 24px; }
}
@keyframes bx-cal-phead-pop {
  0%   { opacity: 0; max-height: 0;    margin-top: 0;   margin-bottom: 0;    transform: translateY(-8px); }
  10%  { opacity: 1; max-height: 80px; margin-top: var(--sp-2); margin-bottom: var(--sp-4); transform: translateY(0); }
  78%  { opacity: 1; max-height: 80px; margin-top: var(--sp-2); margin-bottom: var(--sp-4); transform: translateY(0); }
  100% { opacity: 0; max-height: 0;    margin-top: 0;   margin-bottom: 0;    transform: translateY(-8px); }
}
.bx-trm-sec {
  background: var(--white);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
}
.bx-trm-sechead { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.bx-trm-sechead-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-2); }
.bx-trm-sectitle { display: flex; flex-direction: column; gap: 2px; font-weight: 600; font-size: var(--fs-body); }
.bx-trm-sectitle > i { color: var(--ink-500); margin-right: var(--sp-2); }
.bx-trm-subtitle { font-weight: 400; font-size: var(--fs-ui); color: var(--ink-500); }
.bx-trm-add {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--sp-2);
  /* B-05: 44 px Mindestziel; T-02: 600 fuer wichtige Aktionen; T-03: min. 14 px */
  min-height: 44px;
  border: 0; cursor: pointer; font-family: inherit; font-weight: 600; font-size: var(--fs-ui);
  color: var(--white); background: var(--accent-grad);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-sm);

  transition: transform .12s ease, box-shadow .12s ease;
}
.bx-trm-add:hover { transform: translateY(-2px); }
.bx-trm-add:active { transform: translateY(0) scale(.98); }
.bx-trm-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.bx-trm-empty { margin: var(--sp-2) 2px 0; font-size: var(--fs-ui); color: var(--ink-500); }
.bx-trm-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3); border-radius: var(--radius-sm);
  border: 1px solid var(--ink-100); background: var(--white);
  cursor: pointer; transition: background .12s ease, border-color .12s ease, transform .08s ease;
}
.bx-trm-item:hover { background: var(--accent-soft); border-color: var(--accent); }
.bx-trm-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.bx-trm-dot { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; background: var(--c, var(--ink-500)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, var(--ink-500)) 22%, transparent); }
.bx-trm-itxt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bx-trm-iname { font-weight: 600; font-size: var(--fs-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bx-trm-imeta { font-size: var(--fs-ui); color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bx-trm-edit { flex: 0 0 auto; color: var(--ink-300); font-size: var(--fs-ui); }
.bx-trm-item:hover .bx-trm-edit { color: var(--accent-strong); }
.bx-trm-form { display: flex; flex-direction: column; gap: var(--sp-3); padding-bottom: var(--sp-2); }
.bx-trm-field { display: flex; flex-direction: column; gap: var(--sp-1); }
.bx-trm-field > span { font-size: var(--fs-ui); font-weight: 600; color: var(--ink-700); }
.bx-trm-opt { font-style: normal; font-weight: 400; font-size: var(--fs-ui); color: var(--ink-500); }
.bx-trm-field input[type="text"], .bx-trm-field input[type="password"], .bx-trm-field input[type="date"], .bx-trm-field input[type="time"], .bx-trm-field input[type="datetime-local"], .bx-trm-field input[type="search"], .bx-trm-field input[type="url"], .bx-trm-field input[type="email"], .bx-trm-field input[type="tel"], .bx-trm-field select, .bx-trm-field textarea {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--ink-500); border-radius: var(--radius-sm);   /* F-02: Feldrahmen */
  padding: var(--sp-3) var(--sp-3); font-family: inherit; font-size: var(--fs-ui); color: var(--ink-900);
  background: var(--white);
}
.bx-trm-field input:focus-visible, .bx-trm-field select:focus-visible, .bx-trm-field textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--accent); }
.bx-trm-field textarea { resize: vertical; min-height: 44px; }
.bx-trm-row { display: flex; gap: var(--sp-3); }
.bx-trm-row .bx-trm-field > input, .bx-trm-row .bx-trm-field > select, .bx-trm-row .bx-trm-field > textarea { margin-top: auto; }
.bx-trm-row .bx-trm-field { flex: 1 1 0; min-width: 0; }
.bx-trm-row:has(.bx-trm-err:not(:empty)) { align-items: flex-start; }
.bx-trm-colorfield { flex-direction: row; align-items: center; gap: var(--sp-3); }
.bx-trm-colorfield input[type="color"] { width: 44px; height: 32px; padding: 0; border: 1px solid var(--ink-500); border-radius: var(--radius-xs); background: none; cursor: pointer; }
.bx-trm-check { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-ui); font-weight: 600; color: var(--ink-700); cursor: pointer; }
.bx-trm-check input { width: 16px; height: 16px; accent-color: var(--accent); }
.bx-trm-err {
  display: block; font-style: normal; font-size: var(--fs-ui); line-height: 1.42;
  color: var(--danger); font-weight: 600; margin: var(--sp-1) 0 0;
}
.bx-trm-err:empty { display: none; }
.bx-trm-nebenlink {
  display: inline-block;
  margin-top: var(--sp-1);
  font-size: var(--fs-ui);
  color: var(--ink-600);
  text-decoration: underline;
}
.bx-trm-nebenlink:hover { color: var(--product); }
.bx-trm-field > span:first-child {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2);
  font-size: var(--fs-ui); font-weight: 600; color: var(--ink-700);
}
.bx-trm-msg { font-size: var(--fs-ui); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); }
.bx-trm-msg.is-err { color: var(--red-700); background: var(--red-50); }
.bx-trm-msg.is-ok { color: var(--green-700); background: var(--green-50); }
.bx-trm-msg.is-info { color: var(--info); background: var(--info-soft); }
.bx-trm-msg.is-warn { color: var(--warning); background: var(--warning-soft); }
.bx-trm-members { display: flex; flex-direction: column; gap: var(--sp-1); max-height: 190px; overflow-y: auto; border: 1px solid var(--ink-100); border-radius: var(--radius-sm); padding: var(--sp-2); }
.bx-trm-mchk { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-2); border-radius: var(--radius-sm); cursor: pointer; }
.bx-trm-mchk:hover { background: var(--accent-soft); }
.bx-trm-mchk input { width: 15px; height: 15px; accent-color: var(--accent); flex: 0 0 auto; }
.bx-trm-mav { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--ink-100); color: var(--ink-700); font-size: var(--fs-meta); font-weight: 600; }
.bx-trm-mav img { width: 100%; height: 100%; object-fit: cover; }
.bx-trm-mname { font-size: var(--fs-ui); font-weight: 600; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bx-trm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--sp-2); margin-top: var(--sp-1); }
.bx-trm-actions > .bx-btn { padding-inline: var(--sp-4); }
.bx-trm-spacer { flex: 1 1 auto; }
@media (max-width: 640px) {
  .bx-modal-foot, .bx-trm-actions { flex-wrap: wrap; }
  .bx-modal-foot > .bx-btn, .bx-modal-foot > .bx-modal-cancel, .bx-trm-actions > .bx-btn, .bx-trm-actions > .bx-modal-cancel { flex: 1 1 100%; justify-content: center; }
  .bx-trm-actions > .bx-trm-spacer { display: none; }
  .bx-trm-actions > .bx-trm-nebenlink { flex: 1 1 100%; text-align: center; }
}
.bx-trm-form .bx-btn { cursor: pointer; font-family: inherit; font-size: var(--fs-ui); }
.bx-modal-bare .bx-modal-backdrop { background: var(--product-20); backdrop-filter: blur(2px); }
@keyframes bx-cmp-in {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--a)) translateY(0) rotate(calc(var(--a) * -1)) scale(.3);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(var(--r) * -1)) rotate(calc(var(--a) * -1)) scale(1);
  }
}
.bx-modal-box-wide { width: min(760px, 100%); }
.bx-konf-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3); border: 1px solid var(--ink-100); border-radius: var(--radius-sm); cursor: pointer;
}
.bx-konf-txt { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.bx-konf-txt b { color: var(--ink-900); font-size: var(--fs-ui); }
.bx-konf-txt small { color: var(--ink-500); font-size: var(--fs-ui); }
.bx-konf-toggle { position: absolute; opacity: 0; pointer-events: none; }
.bx-konf-switch { flex: 0 0 auto; width: 42px; height: 24px; border-radius: 999px; background: var(--ink-300); position: relative; transition: background .15s ease; }
.bx-konf-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--white); transition: transform .15s ease; }
.bx-konf-toggle:checked + .bx-konf-switch { background: var(--green-500); }
.bx-konf-toggle:checked + .bx-konf-switch::after { transform: translateX(18px); }
.bx-konf-toggle:disabled + .bx-konf-switch { opacity: .5; }
#bx-set-m-abwtypen .bx-btn { box-shadow: none; font-weight: 600; }
@keyframes bxPopGrow { from { transform: scale(.2); opacity: 0; } }
#bx-pr-view-sorten .bx-msgbox { margin-bottom: var(--sp-3); }
.bx-modal-box::-webkit-scrollbar { width: 10px; }
.bx-modal-box::-webkit-scrollbar-track { background: transparent; margin: var(--sp-5) 0; }
.bx-modal-box::-webkit-scrollbar-thumb {
  background: var(--ink-300);
  border-radius: 999px;               /* funktional rund: Scrollgriff */
  border: 3px solid transparent;      /* "schwebt" mit Abstand zur Kante */
  background-clip: content-box;
}
.bx-modal-box::-webkit-scrollbar-thumb:hover { background-color: var(--ink-500); }
@supports (-moz-appearance: none) {
  .bx-modal-box { scrollbar-width: thin; scrollbar-color: var(--ink-300) transparent; }
}
.bx-fb-zeile.is-klickbar { cursor: pointer; }
.bx-fb-zeile.is-klickbar:hover { background: var(--green-50); border-color: var(--product-60); }
.bx-fb-zeile.is-klickbar:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.bx-fb-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-3); }
.bx-fb-kpi {
  background: var(--white); border: 1px solid var(--ink-100); border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-1);
}
.bx-fb-kpilabel { font-size: var(--fs-ui); color: var(--ink-700); }
@media (max-width: 640px) {
  .bx-fb-kpis { grid-template-columns: 1fr 1fr; }
  .bx-fb-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.bx-fb-liste { list-style: none; margin: 0; padding: 0; background: var(--white); border: 1px solid var(--ink-100); border-radius: var(--radius-sm); }
.bx-fb-zeile { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--ink-100); }
.bx-fb-zeile:last-child { border-bottom: none; }
.bx-fb-liste > .bx-fb-zeile:first-child { border-top-left-radius: var(--radius-sm); border-top-right-radius: var(--radius-sm); }
.bx-fb-liste > .bx-fb-zeile:last-child { border-bottom-left-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); }
.bx-fb-zeilentxt { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; flex: 1 1 auto; }
.bx-fb-titel { font-size: var(--fs-ui); font-weight: 600; color: var(--ink-900); }
.bx-fb-status { font-weight: 600; white-space: nowrap; }
.bx-fb-status::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; margin-right: var(--sp-1); vertical-align: 1px;
}
.bx-fb-status.has-icon::before { display: none; }
.bx-fb-status.has-icon .bx-icon { vertical-align: -0.15em; margin-right: 2px; }
.bx-fb-status.is-laeuft { color: var(--green-700); }
.bx-fb-status.is-fertig { color: var(--success); }
.bx-fb-status.is-pause { color: var(--warning); }
.bx-fb-status.is-warn { color: var(--warning); }
.bx-fb-status.is-storno { color: var(--red-700); }
.bx-fb-status.is-info { color: var(--info); }
.bx-fb-status.is-leer { color: var(--ink-700); }
.bx-trm-field.has-vorschlaege { position: relative; }
.bx-fb-zeile.is-laufend { box-shadow: inset 4px 0 0 var(--product); }
.bx-fb-zeile.is-laufend.is-klickbar:hover { background: var(--product-20); }
.bx-ag-tabellenbox { background: var(--white); border: 1px solid var(--ink-100);
  border-radius: var(--radius); overflow-x: auto; }
.bx-ag-tab { border-collapse: collapse; width: 100%; font-size: var(--fs-ui); line-height: var(--lh-ui);
  font-variant-numeric: tabular-nums; min-width: 720px; }
.bx-ag-tab th { font-size: var(--fs-ui); line-height: var(--lh-meta); font-weight: 600; color: var(--ink-500);
  text-align: left; background: var(--ink-50); padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--ink-100); white-space: nowrap; }
.bx-ag-tab td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--ink-100); vertical-align: top; }
.bx-ag-tab tbody tr:last-child td { border-bottom: none; }
th.is-sortiert { color: var(--ink-900); }
.bx-ag-tab tr.is-klickbar { cursor: pointer; }
.bx-ag-tab tr.is-klickbar:hover td { background: var(--green-50); }
.bx-ag-tab tfoot td { font-weight: 600; background: var(--ink-50);
  border-top: 2px solid var(--product-60); border-bottom: none; }
.bx-ag-tab td .bx-trm-err { display: block; text-align: right; }
@media (max-width: 640px) {
  .bx-ag-tab { min-width: 0; display: block; }
  .bx-ag-tab thead { display: none; }
  .bx-ag-tab tbody, .bx-ag-tab tfoot { display: block; }
  .bx-ag-tab tr { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2) var(--sp-4);
    padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--ink-100); }
  .bx-ag-tab tbody tr:last-child { border-bottom: 1px solid var(--ink-100); }
  .bx-ag-tab td { display: block; border: none; padding: 0; }
  .bx-ag-tab td:empty { display: none; }
  .bx-ag-tab td[data-label]::before { content: attr(data-label); display: block;
    font-size: var(--fs-ui); line-height: var(--lh-meta); color: var(--ink-500); }
  .bx-ag-tab tfoot tr { background: var(--ink-50); border-top: 2px solid var(--product-60); border-bottom: none; }
  .bx-ag-tab tfoot td { background: none; border: none; }
  .bx-ag-tab td .bx-trm-err { text-align: left; }
}
@media (max-width: 640px) {
  .bx-ag-tab tr.is-klickbar:hover td { background: none; }
}
.bx-fb-zeile.is-storno .bx-fb-titel { color: var(--ink-300); }
@media (max-width: 640px) {
  .bx-fb-zeile { flex-wrap: wrap; }
}
.bx-sst-item { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; cursor: default; }
.bx-sst-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bx-sst-titel { font-weight: 600; color: var(--ink-900); }
.bx-sst-sub { font-size: var(--fs-ui); color: var(--ink-700); }
.bx-sst-seite { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.bx-sst-hinweis { margin: var(--sp-2) 0 0; font-size: var(--fs-ui); color: var(--ink-700); }
.bx-sst-hinweis a { color: var(--accent-strong); }
.bx-sst-fehler { font-size: var(--fs-ui); color: var(--red-600); }
.bx-trm-field > span.bx-sst-fehler { color: var(--red-600); font-weight: 400; }
.bx-sst-neuzeile { margin: var(--sp-3) 0 0; }
.bx-sst-laeuft, .bx-sst-item > .bx-msgbox { flex: 1 1 100%; }
.bx-sst-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-3); }
.bx-sst-kachel { position: relative; display: flex; flex-direction: column; gap: var(--sp-1); min-height: 44px;
  padding: var(--sp-4) var(--sp-7) var(--sp-4) var(--sp-4); border-radius: var(--radius-sm); border: 1px solid var(--ink-100);
  background: var(--white); color: var(--ink-900); text-decoration: none; transition: border-color .12s ease; }
.bx-sst-kachel:hover { border-color: var(--product-60); text-decoration: none; }
.bx-sst-kachel:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.bx-sst-kachelkopf { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.bx-sst-kachelkopf .bx-icon { width: 20px; height: 20px; color: var(--product-60); flex: 0 0 auto; }
.bx-sst-kachelkopf .bx-fb-status { font-size: var(--fs-ui); margin-left: auto; }
.bx-sst-kachelmeta { color: var(--ink-700); }
.bx-sst-kachelpfeil { position: absolute; right: var(--sp-4); top: 50%; width: 20px; height: 20px; margin-top: -10px; color: var(--ink-300); }
.bx-sst-kachel:hover .bx-sst-kachelpfeil { color: var(--accent-strong); }
.bx-dash-card > .bx-schritte { margin: var(--sp-3) 0 0; }
.bx-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bx-btn[aria-busy="true"] { cursor: progress; }
@media (max-width: 640px) {
  .bx-schritte-reiter { flex-direction: column; gap: var(--sp-1); }
  .bx-schritte-reiter .bx-schritt, .bx-schritte-reiter .bx-schritt.is-aktuell { flex: 0 0 auto; border-top: 0; border-left: 4px solid var(--ink-100); }
  .bx-schritte-reiter .bx-schritt.is-fertig { border-left-color: var(--product-60); }
  .bx-schritte-reiter .bx-schritt.is-aktuell { border-left-color: var(--accent); }
  .bx-schritte-reiter .bx-schritt.is-spaeter { border-left-style: dashed; }
  .bx-schritte-reiter .bx-schritt-in, .bx-schritte-reiter .bx-schritt.is-aktuell .bx-schritt-in { justify-content: flex-start; padding-left: var(--sp-3); }
  .bx-schritte-reiter .bx-schritt:not(.is-aktuell) .bx-schritt-text { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
}
.bx-sst-uebertragungen { margin-top: var(--sp-3); grid-template-columns: 1fr; }
#bx-fc-live .bx-ag-tabellenbox { margin-top: 0; }
.bx-trm-field input[readonly] { background: var(--ink-50); color: var(--ink-700); }
.bx-dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-4); margin-top: var(--sp-4); }
.bx-dash-card { background: var(--white); border: 1px solid var(--ink-100); border-radius: var(--radius-sm); padding: var(--sp-4) var(--sp-5); }
.bx-dash-card-wide { grid-column: 1 / -1; }
.bx-dash-h { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 600; color: var(--ink-900); margin: 0 0 var(--sp-4); }
.bx-dash-h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; color: var(--ink-900); margin: var(--sp-4) 0 var(--sp-2); }
.bx-dash-h3 small { display: block; font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: 400; color: var(--ink-700); }
.bx-dash-balken { display: flex; flex-direction: column; gap: var(--sp-2); }
.bx-dash-row { display: grid; grid-template-columns: minmax(80px, 130px) 1fr auto; align-items: center; gap: var(--sp-2); }
.bx-dash-label { font-size: var(--fs-ui); color: var(--ink-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bx-dash-bar { height: 14px; background: var(--ink-50); border-radius: var(--radius-xs); overflow: hidden; }
.bx-dash-fill { display: block; height: 100%; background: var(--accent); border-radius: var(--radius-xs); min-width: 2px; }
.bx-dash-fill.is-warn { background: var(--warning); }
.bx-dash-wert { font-size: var(--fs-ui); color: var(--ink-900); font-variant-numeric: tabular-nums; white-space: nowrap; }
a.bx-dash-link { color: inherit; text-decoration: none; border-radius: var(--radius-xs); padding: var(--sp-1) var(--sp-2);
  margin: 0 calc(-1 * var(--sp-2)); min-height: 36px; }
a.bx-dash-link:hover { background: var(--product-20); }
a.bx-dash-link:hover .bx-dash-label { text-decoration: underline; }
a.bx-dash-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.bx-dash-linkicon { font-size: 16px; color: var(--product-60); }
.bx-dash-leer { color: var(--ink-700); font-size: var(--fs-ui); }
.bx-dash-fuss { margin-top: var(--sp-4); font-size: var(--fs-ui); color: var(--ink-700); }
.bx a:focus-visible, .bx button:focus-visible, .bx input:focus-visible, .bx select:focus-visible, .bx textarea:focus-visible, .bx [tabindex]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
.bx-choices-row { flex-direction: row; flex-wrap: wrap; gap: var(--sp-4); }
.bx-choices-row > .bx-choice {
  flex: 1 1 240px; min-width: 0; min-height: 44px;
  padding: var(--sp-4) var(--sp-5); font: inherit; text-align: left; cursor: pointer;
}
.bx-choice:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.bx-choice-sub {
  display: block; margin-top: var(--sp-1);
  font-size: var(--fs-ui); line-height: var(--lh-ui); font-weight: 400; color: var(--ink-700);
}
.bx-choice.is-primary { background: var(--product); border-color: var(--product); color: var(--white); }
.bx-choice.is-primary:hover { background: var(--product-hover); border-color: var(--product-hover); }
.bx-choice.is-primary .bx-choice-ic { background: var(--white-20); color: var(--white); }
.bx-choice.is-primary .bx-choice-sub { color: var(--green-100); }
.bx-choice.is-primary .bx-choice-arrow { color: var(--white); }
.bx-dash-grid-2-1 { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); margin-top: 0; }
@media (max-width: 899px) {
  .bx-dash-grid-2-1 { grid-template-columns: 1fr; }
}
.bx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bx-info { margin-top: var(--sp-3); }
.bx-info > summary { list-style: none; display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px;
  padding: 0 var(--sp-2) 0 0; cursor: pointer; color: var(--ink-700); font-size: var(--fs-ui); font-weight: 600; }
.bx-info > summary::-webkit-details-marker { display: none; }
.bx-info > summary .bx-icon { color: var(--accent); flex: 0 0 auto; }
.bx-info > summary:hover { color: var(--accent); }
.bx-info > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-xs); }
.bx-info[open] > summary { color: var(--accent); }
.bx-info > .bx-info-body { margin: var(--sp-1) 0 0; font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--ink-700); max-width: 65ch; }
.bx-info > .bx-info-body p { margin: 0 0 var(--sp-2); }
.bx-info > .bx-info-body p:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
  html, body.bx { overflow-x: clip; }
  .bx-main p, .bx-dash-fuss, .bx-empty p, .bx-phead-sub, .bx-info-body, .bx-modal-box p {
    hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
  .bx-info-body, .bx-info-body p, .bx-dash-fuss { text-align: justify; text-justify: inter-word; }
  .bx-trm-sechead { flex-wrap: wrap; }
  .bx-trm-sechead-actions { flex: 1 1 100%; justify-content: flex-start; }
  .bx-trm-row { flex-wrap: wrap; }
  .bx-trm-row > .bx-trm-field { flex: 1 1 100%; }
  .bx-dash-label { white-space: normal; overflow-wrap: anywhere; }
  h2 > .bx-trm-opt { display: block; margin-left: 0; }
  .bx-phead { flex-wrap: wrap; }
  .bx-phead-sub { display: none; }
  .bx-phead-info { display: contents; }
  .bx-phead-info > summary { margin-left: auto; min-width: 44px; justify-content: center; padding: 0; }
  .bx-phead-info > .bx-info-body { flex: 1 1 100%; margin: 0; }
  details.bx-mehr { display: block; flex: 1 1 100%; }
  details.bx-mehr > summary { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); list-style: none;
    min-height: 44px; padding: 0 var(--sp-4); border: 1px solid var(--ink-100); border-radius: var(--radius-sm); background: var(--white);
    font-size: var(--fs-ui); font-weight: 600; color: var(--ink-900); cursor: pointer; width: 100%; }
  details.bx-mehr > summary::-webkit-details-marker { display: none; }
  details.bx-mehr > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  details.bx-mehr[open] > summary .bx-icon { transform: rotate(180deg); }
  details.bx-mehr > .bx-mehr-list { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); }
  details.bx-mehr > .bx-mehr-list > .bx-btn { width: 100%; }
  .bx-dash-row { grid-template-columns: minmax(96px, 1fr) minmax(0, 62%); align-items: baseline; }
  a.bx-dash-link { min-height: 44px; margin: 0; }
  .bx-dash-label { grid-column: 1; grid-row: 1; }
  .bx-dash-wert { grid-column: 2; grid-row: 1; white-space: normal; overflow-wrap: anywhere; text-align: right; }
  .bx-dash-bar { grid-column: 1 / -1; grid-row: 2; }
  .bx-fb-status { white-space: normal; }
}
.bx-reiter { margin-top: var(--sp-4); }
.bx-reiter-leiste { display: inline-grid; grid-auto-flow: column; grid-auto-columns: max-content; max-width: 100%;
  border: 1px solid var(--ink-500); border-radius: var(--radius-sm); background: var(--white); overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin; vertical-align: top; }
.bx-reiter-tab { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 44px; min-width: 0;
  padding: 0 var(--sp-4); border: 0; border-radius: 0; background: transparent; color: var(--ink-900);
  font-family: inherit; font-size: var(--fs-ui); line-height: var(--lh-ui); font-weight: 400; cursor: pointer;
  transition: background .12s ease; }
.bx-reiter-tab + .bx-reiter-tab { border-left: 1px solid var(--ink-100); }
.bx-reiter-tab > .bx-icon { font-size: var(--fs-body); color: var(--ink-700); flex: 0 0 auto; }
.bx-reiter-tab > .bx-reiter-chev { display: none; }
.bx-reiter-name { min-width: 0; }
.bx-reiter-wert { display: inline-flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.bx-reiter-zahl { color: var(--ink-700); }
.bx-reiter-tab .bx-fb-status { font-size: var(--fs-ui); white-space: nowrap; }
.bx-reiter-tab:hover { background: var(--product-20); }
.bx-reiter-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.bx-reiter-tab.is-active { box-shadow: inset 0 -3px 0 var(--product); font-weight: 600; }
.bx-reiter-tab.is-active > .bx-icon, .bx-reiter-tab.is-active .bx-reiter-zahl { color: var(--product); }
.bx-reiter-panel { margin-top: var(--sp-3); }
.bx-reiter-panel[hidden] { display: none; }
.bx-reiter-panel > .bx-fb-liste:first-child, .bx-reiter-panel > .bx-ag-tabellenbox:first-child { margin-top: 0; }
.bx-reiter-panel > .bx-info { margin-top: var(--sp-1); }
.bx-reiter-zeile > .bx-reiter-leiste { display: block; border-color: var(--ink-100); }
.bx-reiter-zeile .bx-reiter-tab { display: flex; width: 100%; justify-content: flex-start; min-height: 52px; }
.bx-reiter-zeile .bx-reiter-tab > .bx-reiter-chev { display: inline-flex; margin-left: auto; transition: transform .15s ease; }
.bx-reiter-zeile .bx-reiter-tab.is-active { box-shadow: none; }
.bx-reiter-zeile .bx-reiter-tab.is-active > .bx-reiter-chev { transform: rotate(180deg); color: var(--product); }
.bx-reiter-zeile:hover > .bx-reiter-leiste, .bx-reiter-zeile.is-offen > .bx-reiter-leiste { border-color: var(--product-60); }
@media (max-width: 640px) {
  .bx-reiter:not(.bx-reiter-zeile) > .bx-reiter-leiste { display: grid; grid-auto-flow: row; width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bx-reiter:not(.bx-reiter-zeile) > .bx-reiter-leiste:has(> .bx-reiter-tab:only-child) { grid-template-columns: minmax(0, 1fr); }
  .bx-reiter:not(.bx-reiter-zeile) > .bx-reiter-leiste:has(> .bx-reiter-tab:nth-child(2):last-child), .bx-reiter:not(.bx-reiter-zeile) > .bx-reiter-leiste:has(> .bx-reiter-tab:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bx-reiter-leiste:has(> .bx-reiter-tab:nth-child(4):last-child) > .bx-reiter-tab:nth-child(n+3) { border-top: 1px solid var(--ink-100); }
  .bx-reiter-leiste:has(> .bx-reiter-tab:nth-child(4):last-child) > .bx-reiter-tab:nth-child(3) { border-left: 0; }
  .bx-reiter:not(.bx-reiter-zeile) > .bx-reiter-leiste:has(> .bx-reiter-tab:nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .bx-reiter-leiste:has(> .bx-reiter-tab:nth-child(5):last-child) > .bx-reiter-tab { grid-column: span 2; }
  .bx-reiter-leiste:has(> .bx-reiter-tab:nth-child(5):last-child) > .bx-reiter-tab:nth-child(n+4) { grid-column: span 3; border-top: 1px solid var(--ink-100); }
  .bx-reiter-leiste:has(> .bx-reiter-tab:nth-child(5):last-child) > .bx-reiter-tab:nth-child(4) { border-left: 0; }
  .bx-reiter:not(.bx-reiter-zeile) .bx-reiter-tab { flex-direction: column; gap: 0; min-height: 56px; padding: var(--sp-1) var(--sp-1); }
  .bx-reiter:not(.bx-reiter-zeile) .bx-reiter-tab > .bx-icon:not(.bx-reiter-chev), .bx-reiter:not(.bx-reiter-zeile) .bx-reiter-wert { order: 1; min-height: var(--lh-body); }
  .bx-reiter:not(.bx-reiter-zeile) .bx-reiter-name { order: 2; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bx-reiter:not(.bx-reiter-zeile) .bx-reiter-tab:has(.bx-reiter-wert) > .bx-icon:not(.bx-reiter-chev) { display: none; }
  .bx-reiter:not(.bx-reiter-zeile) .bx-reiter-zahl { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 600; color: var(--ink-900); }
  .bx-reiter:not(.bx-reiter-zeile) .bx-reiter-tab.is-active .bx-reiter-zahl { color: var(--product); }
  .bx-reiter-wert { gap: var(--sp-1); }
  .bx-reiter-wort { display: none; }
  .bx-reiter-zeile .bx-reiter-tab { padding: 0 var(--sp-3); }
}
button.bx-choice { width: 100%; font: inherit; text-align: left; cursor: pointer; }
button.bx-choice:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
#bx-so-modal .bx-trm-unitwrap { display: flex; align-items: center; gap: var(--sp-2); }
#bx-so-modal .bx-trm-unitwrap input { flex: 1 1 auto; min-width: 0; }
#bx-so-modal .bx-trm-unit { white-space: nowrap; color: var(--ink-500); font-size: var(--fs-ui); }
.bx-nutzung { display: flex; flex-direction: column; gap: var(--sp-4); }
.bx-nz-woche { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.bx-nz-wochentitle, .bx-nz-wochentitel { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 600; color: var(--ink-900); margin: 0; text-align: center; flex: 1 1 auto; }
.bx-nz-platz { min-width: 120px; }
.bx-nz-kpis .bx-fb-kpi { gap: 2px; }
a.bx-nz-kpi { color: inherit; text-decoration: none; }
a.bx-nz-kpi:hover { border-color: var(--product-60); }
a.bx-nz-kpi:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.bx-nz-row { color: inherit; text-decoration: none; border-radius: var(--radius-sm); }
a.bx-nz-row:hover .bx-dash-label, .bx-nz-row:hover > a.bx-dash-label { color: var(--product); }
a.bx-nz-row:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.bx-nz-row.is-zukunft { color: var(--ink-500); }
.bx-nz-row.is-zukunft .bx-dash-fill { background: var(--ink-100); }
.bx-nz-liste { margin: 0; padding-left: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-ui); line-height: var(--lh-ui); }
ul.bx-nz-liste { list-style: none; padding-left: 0; }
.bx-nz-pfad { font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace; font-size: var(--fs-meta); color: var(--ink-900); word-break: break-all; }
#bx-nz-live .bx-dash-row { grid-template-columns: minmax(200px, 260px) 1fr auto; }
#bx-nz-live .bx-dash-label { display: flex; align-items: center; gap: var(--sp-2); }
#bx-nz-live .bx-nz-liste { margin-top: var(--sp-3); }
#bx-nz-live .bx-trm-msg { margin-bottom: var(--sp-3); }
@media (max-width: 719px) {
  #bx-nz-live .bx-dash-row { grid-template-columns: minmax(0, 1fr); }
  #bx-nz-live .bx-dash-label { grid-column: 1; grid-row: 1; flex-wrap: wrap; }
  #bx-nz-live .bx-dash-wert { grid-column: 1; grid-row: 3; text-align: left; }
  #bx-nz-live .bx-dash-bar { grid-column: 1; grid-row: 2; }
}
.bx-nz-breit { width: 100%; }
.bx-nz-h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; color: var(--ink-900); margin: var(--sp-5) 0 var(--sp-3); }
.bx-nz-fuss { margin: 0; font-size: var(--fs-ui); color: var(--ink-700); }
.bx-nz-tab { min-width: 0; }
.bx-nz-tab td { vertical-align: middle; }
.bx-nz-zeit { white-space: nowrap; }
.bx-nz-tab tr.is-fehler td { background: var(--red-50); }
.bx-nz-filter { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-3); align-items: end;
  background: var(--white); border: 1px solid var(--ink-100); border-radius: var(--radius); padding: var(--sp-4); }
.bx-nz-filter .bx-trm-field { margin: 0; }
.bx-nz-filterhaken { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; min-height: 44px; }
.bx-nz-stand { margin: 0; font-size: var(--fs-ui); color: var(--ink-700); font-variant-numeric: tabular-nums; }
.bx-nz-blaettern { display: flex; gap: var(--sp-3); justify-content: space-between; flex-wrap: wrap; }
.bx-nz-aendliste .bx-fb-zeilentxt { min-width: 0; }
.bx-nz-felder { margin-top: var(--sp-2); }
.bx-nz-feldtab { border-collapse: collapse; width: 100%; font-size: var(--fs-ui); line-height: var(--lh-ui); font-variant-numeric: tabular-nums; }
.bx-nz-feldtab th { text-align: left; font-weight: 600; color: var(--ink-500); padding: var(--sp-1) var(--sp-2); border-bottom: 1px solid var(--ink-100); }
.bx-nz-feldtab td { padding: var(--sp-1) var(--sp-2); border-bottom: 1px solid var(--ink-100); vertical-align: top; word-break: break-word; }
.bx-nz-feldtab td:first-child { color: var(--ink-700); white-space: nowrap; }
@media (max-width: 640px) {
  .bx-nz-woche { justify-content: center; }
  .bx-nz-wochentitel { order: -1; flex-basis: 100%; }
  .bx-nz-platz { display: none; }
  .bx-nz-filter { grid-template-columns: 1fr; }
  .bx-nz-filter .bx-btn { width: 100%; }
  .bx-nz-zeit { white-space: normal; }
  .bx-nz-feldtab, .bx-nz-feldtab thead, .bx-nz-feldtab tbody, .bx-nz-feldtab tr, .bx-nz-feldtab td { display: block; }
  .bx-nz-feldtab thead { display: none; }
  .bx-nz-feldtab tr { padding: var(--sp-2) 0; border-bottom: 1px solid var(--ink-100); }
  .bx-nz-feldtab td { border: 0; padding: 0; }
  .bx-nz-feldtab td:first-child { font-weight: 600; white-space: normal; }
  .bx-nz-feldtab td:nth-child(2)::before { content: "vorher: "; color: var(--ink-500); }
  .bx-nz-feldtab td:nth-child(3)::before { content: "nachher: "; color: var(--ink-500); }
}
.bx-nz-bestand { margin: 0 0 var(--sp-3); font-size: var(--fs-ui); color: var(--ink-700); font-variant-numeric: tabular-nums; }
.bx-nz-loeschform { display: flex; gap: var(--sp-3); align-items: end; flex-wrap: wrap; }
.bx-nz-loeschform .bx-trm-field { margin: 0; min-width: 180px; }
.bx-nz-rueckfrage { display: flex; gap: var(--sp-3); align-items: flex-start; }
.bx-nz-rf-text { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.bx-nz-rf-aktionen { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
@media (max-width: 640px) {
  .bx-nz-loeschform .bx-btn, .bx-nz-rf-aktionen .bx-btn { width: 100%; }
  .bx-nz-loeschform .bx-trm-field { width: 100%; }
}
.bx-nz-tab tr.is-aus td { color: var(--ink-500); }
.bx-btn.bx-btn-text.is-gefahr { color: var(--danger); }
.bx-btn.bx-btn-text.is-gefahr:hover, .bx-btn.bx-btn-text.is-gefahr:focus-visible { color: var(--danger-hover); background: var(--danger-soft); }
.bx-schritte { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--sp-2); }
.bx-schritt { flex: 1 1 0; min-width: 0; border-top: 4px solid var(--ink-100); }
.bx-schritt.is-fertig { border-top-color: var(--product-60); }
.bx-schritt.is-aktuell { border-top-color: var(--accent); }
.bx-schritt-in { display: flex; align-items: center; gap: var(--sp-2); min-height: 44px; padding: var(--sp-2) var(--sp-1); color: var(--ink-900); text-decoration: none; border-radius: var(--radius-xs); }
a.bx-schritt-in:hover { background: var(--product-20); }
a.bx-schritt-in:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.bx-schritt-nr { flex: 0 0 auto; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; border: 1px solid var(--ink-500); border-radius: var(--radius-xs); background: var(--white); color: var(--ink-700); font-size: var(--fs-meta); line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; }
.bx-schritt-nr .bx-icon { width: 16px; height: 16px; }
.bx-schritt.is-fertig .bx-schritt-nr { border-color: var(--product-60); color: var(--accent); }
.bx-schritt.is-aktuell .bx-schritt-nr { border-color: var(--accent); background: var(--accent); color: var(--white); }
.bx-schritt-text { display: flex; flex-direction: column; min-width: 0; }
.bx-schritt-zahl { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--ink-700); font-variant-numeric: tabular-nums; }
.bx-schritt-label { font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--ink-900); overflow-wrap: anywhere; }
.bx-schritt.is-aktuell .bx-schritt-label { font-weight: 600; }
.bx-schritt.is-spaeter { border-top-style: dashed; }
.bx-schritt.is-spaeter .bx-schritt-nr { border-style: dashed; color: var(--ink-500); }
button.bx-schritt-in { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; color: var(--ink-900); }
button.bx-schritt-in:hover { background: var(--product-20); }
button.bx-schritt-in:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
button.bx-schritt-in[aria-expanded="true"] { box-shadow: inset 0 -3px 0 var(--product); }
.bx-schritte-reiter .bx-schritt-label::after { content: ""; }
@media (max-width: 640px) {
  .bx-schritt { flex: 0 0 44px; }
  .bx-schritt.is-aktuell { flex: 1 1 0; }
  .bx-schritt-in { justify-content: center; }
  .bx-schritt.is-aktuell .bx-schritt-in { justify-content: flex-start; }
  .bx-schritt:not(.is-aktuell) .bx-schritt-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.bx-trm-mchk.is-aus { color: var(--ink-500); }
.bx-side-item.is-aus .bx-side-caret { margin-left: var(--sp-2); }
.bx-side-item.is-aus .bx-side-ic { background: transparent; border: 1px dashed var(--white-60); }
.bx-tile.is-aus { border-style: dashed; border-color: var(--ink-500); }
.bx-tile-aus { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-meta); color: var(--ink-700); }
.bx-btn.bx-btn-klein { min-height: 44px; padding: var(--sp-2) var(--sp-3); }
.bx-btn.bx-btn-text.is-gefahr { color: var(--danger); }
.bx-btn.bx-btn-text.is-gefahr:hover { background: var(--danger-soft); }
.bx-bg-kopf { display: flex; gap: var(--sp-5); align-items: flex-start; }
.bx-bg-vorschau { flex: 0 0 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2);
                  min-height: 120px; border: 1px solid var(--ink-100); border-radius: var(--radius-sm); background: var(--ink-50);
                  color: var(--ink-700); font-size: var(--fs-ui); overflow: hidden; }
.bx-bg-vorschau img { display: block; width: 100%; height: auto; max-height: 240px; object-fit: contain; }
.bx-bg-vorschau .bx-icon { width: 32px; height: 32px; color: var(--product-60); }
.bx-bg-kopftext { flex: 1 1 16rem; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.bx-bg-dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-1) var(--sp-4); margin: 0; font-size: var(--fs-ui); line-height: var(--lh-ui); }
.bx-bg-dl > div { display: contents; }
.bx-bg-dl dt { color: var(--ink-700); font-weight: 400; }
.bx-bg-dl dd { margin: 0; color: var(--ink-900); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bx-bg-meta { margin: 0; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--ink-700); }
.bx-bg-pruefungen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.bx-bg-pruefungen li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-2); font-size: var(--fs-ui); line-height: var(--lh-ui); }
.bx-bg-prueftext { color: var(--ink-700); }
.bx-bg-satz { margin: 0 0 var(--sp-3); font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--ink-900); }
.bx-bg-ziele { display: flex; flex-direction: column; gap: var(--sp-1); }
.bx-bg-zielwahl { align-items: flex-start; border: 1px solid var(--ink-100); border-radius: var(--radius-sm); padding: var(--sp-3); }
.bx-bg-zielwahl:has(input:checked) { border-color: var(--product-60); background: var(--product-20); }
.bx-bg-zielwahl input { margin-top: 3px; }
.bx-bg-zielwahl strong { display: inline-flex; align-items: center; gap: var(--sp-1); font-weight: 600; }
.bx-bg-zielwahl .bx-icon { width: 18px; height: 18px; color: var(--product-60); }
.bx-bg-zielwahl .bx-fb-status { margin-left: var(--sp-2); vertical-align: middle; }
.bx-bg-inline { display: inline; }
.bx-bg-verwerfen.is-danger { color: var(--danger); }
.bx-bg-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.bx-bg-zeile + .bx-bg-zeile { border-top: 1px solid var(--ink-100); }
.bx-bg-zeile-in { display: grid; grid-template-columns: 1fr auto; gap: 0 var(--sp-3); align-items: center; padding: var(--sp-3) 0;
                  color: inherit; text-decoration: none; min-height: 44px; }
.bx-bg-zeile-in:hover .bx-bg-zeile-titel { text-decoration: underline; }
.bx-bg-zeile-titel { font-size: var(--fs-ui); line-height: var(--lh-ui); font-weight: 600; color: var(--ink-900); }
.bx-bg-zeile-detail { grid-column: 1; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--ink-700); font-variant-numeric: tabular-nums; }
.bx-bg-zeile-in .bx-fb-status { grid-column: 2; grid-row: 1 / span 2; }
.bx-bg-dialoghinweis:empty { display: none; }
@media (max-width: 640px) {
  .bx-bg-kopf { flex-direction: column; }
  .bx-bg-vorschau { flex-basis: auto; width: 100%; max-height: 200px; }
  .bx-bg-dl { grid-template-columns: 1fr; }
  .bx-bg-dl dt { margin-top: var(--sp-1); }
  .bx-bg-zeile-in { grid-template-columns: 1fr; }
  .bx-bg-zeile-in .bx-fb-status { grid-column: 1; grid-row: auto; justify-self: start; margin-top: var(--sp-1); }
}