/* BAUKOPF — Komponentenbibliothek (ADR-0041)
 *
 * Jede Komponente ist rollenunabhängig. Was sich je Rolle unterscheidet, ist die
 * Auswahl und Dichte der Komponenten, nicht ihr Aussehen.
 *
 * Alle Werte kommen aus tokens.css. Ein fester Farb-, Abstands- oder Radiuswert
 * in dieser Datei ist ein Fehler und wird von tests/unit/test_designsystem.py
 * gemeldet.
 *
 * Reihenfolge: Grundlagen · Navigation · Karten · Status · Listen · Zustände
 */

/* ══ Grundlagen ═══════════════════════════════════════════════════════════ */

.bk {
  background: var(--bk-hintergrund);
  color: var(--bk-text);
  font-family: var(--bk-schrift);
  font-size: var(--bk-groesse-m);
  line-height: var(--bk-zeilenhoehe);
  margin: 0;
  min-height: 100vh;
  -webkit-text-size-adjust: 100%;
}

.bk h1,
.bk h2,
.bk h3 {
  line-height: var(--bk-zeilenhoehe-eng);
  margin: 0 0 var(--bk-abstand-3);
}

.bk h1 { font-size: var(--bk-groesse-xl); font-weight: var(--bk-fett-halb); }
.bk h2 { font-size: var(--bk-groesse-l); font-weight: var(--bk-fett-halb); }
.bk h3 { font-size: var(--bk-groesse-m); font-weight: var(--bk-fett-halb); }

.bk a { color: var(--bk-primaer-hell); }

.bk :focus-visible {
  border-radius: var(--bk-radius-s);
  box-shadow: var(--bk-schatten-fokus);
  outline: none;
}

/* Inline-SVG-Icons: erben Farbe und Schriftgrösse ihres Elements (Teil C). */
.bk-icon {
  flex: none;
  height: 1.25em;
  vertical-align: -0.2em;
  width: 1.25em;
}

.bk-icon-gross { height: 1.75em; width: 1.75em; }

.bk-leise { color: var(--bk-text-leise); }
.bk-klein { font-size: var(--bk-groesse-s); }
.bk-etikett {
  color: var(--bk-text-leise);
  font-size: var(--bk-groesse-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Sichtbar nur für Screenreader — Farbe wird nie allein verwendet. */
.bk-nur-vorlesen {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* ══ Layout ═══════════════════════════════════════════════════════════════ */

.bk-seite {
  margin: 0 auto;
  max-width: var(--bk-breite-inhalt);
  padding: var(--bk-abstand-5) var(--bk-abstand-4);
}

/* Mitarbeitendenansicht am Desktop: Lesebreite statt gedehnter Handyansicht. */
.bk-schmal { max-width: 560px; }

.bk-raster {
  display: grid;
  gap: var(--bk-abstand-4);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.bk-reihe {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--bk-abstand-3);
}

/* Leiste der Designgalerie — nur ausserhalb der Produktion sichtbar. */
.bk-galerieleiste {
  align-items: center;
  background: var(--bk-flaeche-tief);
  border-bottom: 1px solid var(--bk-rand-stark);
  display: flex;
  gap: var(--bk-abstand-4);
  justify-content: space-between;
  padding: var(--bk-abstand-2) var(--bk-abstand-4);
}

.bk-stapel > * + * { margin-top: var(--bk-abstand-4); }

/* ══ Top Bar ══════════════════════════════════════════════════════════════ */

.bk-topbar {
  align-items: center;
  background: var(--bk-flaeche-tief);
  border-bottom: 1px solid var(--bk-rand);
  display: flex;
  gap: var(--bk-abstand-4);
  min-height: var(--bk-navhoehe);
  padding: 0 var(--bk-abstand-4);
  position: sticky;
  top: 0;
  z-index: var(--bk-ebene-nav);
}

.bk-marke {
  color: var(--bk-text);
  font-weight: var(--bk-fett-stark);
  letter-spacing: 0.08em;
  text-decoration: none;
}

.bk-topbar-rechts { margin-left: auto; }

/* ══ Side Navigation (Desktop) ════════════════════════════════════════════ */

.bk-huelle { display: flex; min-height: 100vh; }

.bk-seitennav {
  background: var(--bk-flaeche-tief);
  border-right: 1px solid var(--bk-rand);
  flex: 0 0 var(--bk-seitennav);
  padding: var(--bk-abstand-4) var(--bk-abstand-3);
}

.bk-seitennav a {
  align-items: center;
  border-radius: var(--bk-radius-s);
  color: var(--bk-text-leise);
  display: flex;
  gap: var(--bk-abstand-3);
  min-height: var(--bk-touch);
  padding: 0 var(--bk-abstand-3);
  text-decoration: none;
  transition: background var(--bk-dauer) var(--bk-kurve);
}

.bk-seitennav a:hover { background: var(--bk-flaeche); }

.bk-seitennav a[aria-current="page"] {
  background: var(--bk-blau-flaeche);
  color: var(--bk-text);
  font-weight: var(--bk-fett-halb);
}

.bk-hauptbereich { flex: 1 1 auto; min-width: 0; }

/* ══ Bottom Navigation (Mobile) ═══════════════════════════════════════════ */

.bk-bottomnav {
  background: var(--bk-flaeche-tief);
  border-top: 1px solid var(--bk-rand);
  bottom: 0;
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  left: 0;
  position: fixed;
  right: 0;
  z-index: var(--bk-ebene-nav);
}

.bk-bottomnav a {
  align-items: center;
  color: var(--bk-text-leise);
  display: flex;
  flex-direction: column;
  font-size: var(--bk-groesse-xs);
  gap: var(--bk-abstand-1);
  justify-content: center;
  min-height: var(--bk-navhoehe);
  text-decoration: none;
}

.bk-bottomnav a[aria-current="page"] {
  color: var(--bk-primaer-hell);
  font-weight: var(--bk-fett-halb);
}

.bk-bottomnav .bk-symbol { font-size: var(--bk-groesse-l); }

/* Platz, damit die Leiste nichts verdeckt. */
.bk-mit-bottomnav { padding-bottom: calc(var(--bk-navhoehe) + var(--bk-abstand-5)); }

/* ══ Karten ═══════════════════════════════════════════════════════════════ */

.bk-karte {
  background: var(--bk-flaeche);
  border: 1px solid var(--bk-rand);
  border-radius: var(--bk-radius-m);
  box-shadow: var(--bk-schatten-1);
  padding: var(--bk-abstand-4);
}

.bk-karte-hoch { background: var(--bk-flaeche-hoch); box-shadow: var(--bk-schatten-2); }

a.bk-karte {
  color: inherit;
  display: block;
  text-decoration: none;
  transition: background var(--bk-dauer) var(--bk-kurve);
}

a.bk-karte:hover { background: var(--bk-flaeche-hoch); }

.bk-karte-kopf {
  align-items: baseline;
  display: flex;
  gap: var(--bk-abstand-3);
  justify-content: space-between;
}

/* KPI Card — Symbolplakette, grosse Zahl, Etikett, kurze Zusatzzeile */
.bk-kpi-wert {
  font-family: var(--bk-schrift-zahl);
  font-size: var(--bk-groesse-xxl);
  font-weight: var(--bk-fett-stark);
  line-height: var(--bk-zeilenhoehe-eng);
}

.bk-plakette {
  align-items: center;
  background: var(--bk-blau-flaeche);
  border-radius: var(--bk-radius-s);
  color: var(--bk-primaer-hell);
  display: inline-flex;
  font-size: var(--bk-groesse-l);
  height: 40px;
  justify-content: center;
  width: 40px;
}

.bk-plakette-gruen  { background: var(--bk-gruen-flaeche);  color: var(--bk-gruen-hell); }
.bk-plakette-orange { background: var(--bk-orange-flaeche); color: var(--bk-orange-hell); }
.bk-plakette-rot    { background: var(--bk-rot-flaeche);    color: var(--bk-rot-hell); }

/* Reiter — Heute · Diese Woche · Kommend · Vergangen */
.bk-tabs {
  border-bottom: 1px solid var(--bk-rand);
  display: flex;
  gap: var(--bk-abstand-4);
  overflow-x: auto;
}

.bk-tabs a {
  border-bottom: 2px solid transparent;
  color: var(--bk-text-leise);
  min-height: var(--bk-touch);
  padding: var(--bk-abstand-2) var(--bk-abstand-1);
  text-decoration: none;
  white-space: nowrap;
}

.bk-tabs a[aria-current="page"] {
  border-bottom-color: var(--bk-primaer);
  color: var(--bk-text);
  font-weight: var(--bk-fett-halb);
}

/* Aktionsraster im Einsatzdetail — Symbol über Text, grosse Ziele */
.bk-aktionen {
  display: grid;
  gap: var(--bk-abstand-2);
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
}

.bk-aktion {
  align-items: center;
  background: var(--bk-flaeche-hoch);
  border: 1px solid var(--bk-rand);
  border-radius: var(--bk-radius-m);
  color: var(--bk-text);
  display: flex;
  flex-direction: column;
  font-size: var(--bk-groesse-s);
  gap: var(--bk-abstand-1);
  justify-content: center;
  min-height: 76px;
  padding: var(--bk-abstand-2);
  text-align: center;
  text-decoration: none;
}

.bk-aktion:hover { background: var(--bk-rand); }
.bk-aktion .bk-symbol { font-size: var(--bk-groesse-l); }

/* Kopfzeile einer Detailansicht: zurück, Titel, Nebenmenü */
.bk-detailkopf {
  align-items: center;
  display: flex;
  gap: var(--bk-abstand-3);
  margin-bottom: var(--bk-abstand-4);
}

.bk-detailkopf h1 { margin: 0; }

/* Zeilenliste mit Symbol, Text und Pfeil — „Mein Bereich" */
.bk-eintraege { list-style: none; margin: 0; padding: 0; }
.bk-eintraege li + li { margin-top: var(--bk-abstand-2); }

.bk-eintrag {
  align-items: center;
  background: var(--bk-flaeche);
  border: 1px solid var(--bk-rand);
  border-radius: var(--bk-radius-m);
  color: var(--bk-text);
  display: flex;
  gap: var(--bk-abstand-3);
  min-height: 60px;
  padding: var(--bk-abstand-2) var(--bk-abstand-4);
  text-decoration: none;
}

.bk-eintrag:hover { background: var(--bk-flaeche-hoch); }
.bk-eintrag-text { flex: 1 1 auto; min-width: 0; }
.bk-eintrag-pfeil { color: var(--bk-text-leise); }

/* Assignment Card / Project Card */
.bk-einsatz-zeit {
  color: var(--bk-primaer-hell);
  font-weight: var(--bk-fett-halb);
}

.bk-karte-titel {
  font-size: var(--bk-groesse-l);
  font-weight: var(--bk-fett-halb);
  margin: var(--bk-abstand-1) 0;
}

/* ══ Status Badge ═════════════════════════════════════════════════════════ */

.bk-badge {
  align-items: center;
  border-radius: var(--bk-radius-voll);
  display: inline-flex;
  font-size: var(--bk-groesse-s);
  font-weight: var(--bk-fett-halb);
  gap: var(--bk-abstand-2);
  padding: var(--bk-abstand-1) var(--bk-abstand-3);
  white-space: nowrap;
}

.bk-badge-gruen  { background: var(--bk-gruen-flaeche);  color: var(--bk-gruen-hell); }
.bk-badge-blau   { background: var(--bk-blau-flaeche);   color: var(--bk-primaer-hell); }
.bk-badge-orange { background: var(--bk-orange-flaeche); color: var(--bk-orange-hell); }
.bk-badge-rot    { background: var(--bk-rot-flaeche);    color: var(--bk-rot-hell); }
.bk-badge-grau   { background: var(--bk-grau-flaeche);   color: var(--bk-grau-hell); }

/* ══ Progress Ring und Balken ═════════════════════════════════════════════ */

.bk-ring {
  align-items: center;
  aspect-ratio: 1;
  background: conic-gradient(var(--bk-primaer) calc(var(--bk-wert, 0) * 1%), var(--bk-rand) 0);
  border-radius: var(--bk-radius-voll);
  display: inline-flex;
  justify-content: center;
  width: 64px;
}

.bk-ring-innen {
  align-items: center;
  background: var(--bk-flaeche);
  border-radius: var(--bk-radius-voll);
  display: flex;
  font-size: var(--bk-groesse-s);
  font-weight: var(--bk-fett-halb);
  height: 76%;
  justify-content: center;
  width: 76%;
}

/* Der Ring färbt sich nach dem Wert — trägt aber immer auch die Zahl. */
.bk-ring-gut  { background: conic-gradient(var(--bk-gruen)  calc(var(--bk-wert, 0) * 1%), var(--bk-rand) 0); }
.bk-ring-mitte{ background: conic-gradient(var(--bk-orange) calc(var(--bk-wert, 0) * 1%), var(--bk-rand) 0); }
.bk-ring-tief { background: conic-gradient(var(--bk-rot)    calc(var(--bk-wert, 0) * 1%), var(--bk-rand) 0); }
.bk-ring-hoch .bk-ring-innen { background: var(--bk-flaeche-hoch); }

.bk-balken {
  background: var(--bk-rand);
  border-radius: var(--bk-radius-voll);
  height: 8px;
  overflow: hidden;
}

.bk-balken-fuellung {
  background: var(--bk-primaer);
  height: 100%;
  width: calc(var(--bk-wert, 0) * 1%);
}

/* ══ Avatare ══════════════════════════════════════════════════════════════ */

.bk-avatare { display: flex; }

.bk-avatar {
  align-items: center;
  background: var(--bk-primaer-tief);
  border: 2px solid var(--bk-flaeche);
  border-radius: var(--bk-radius-voll);
  color: var(--bk-text);
  display: inline-flex;
  font-size: var(--bk-groesse-s);
  font-weight: var(--bk-fett-halb);
  height: 36px;
  justify-content: center;
  width: 36px;
}

.bk-avatare .bk-avatar + .bk-avatar { margin-left: calc(-1 * var(--bk-abstand-2)); }

.bk-avatar-mehr { background: var(--bk-rand); color: var(--bk-text-leise); }

/* ══ Hinweis- und Empfehlungskarten ═══════════════════════════════════════ */

.bk-hinweis {
  border-left: var(--bk-akzentkante) solid var(--bk-primaer);
  border-radius: var(--bk-radius-s);
  display: flex;
  gap: var(--bk-abstand-3);
  padding: var(--bk-abstand-3) var(--bk-abstand-4);
}

.bk-hinweis-warnung { background: var(--bk-orange-flaeche); border-left-color: var(--bk-orange); }
.bk-hinweis-problem { background: var(--bk-rot-flaeche);    border-left-color: var(--bk-rot); }
.bk-hinweis-info    { background: var(--bk-blau-flaeche); }
.bk-hinweis-gut     { background: var(--bk-gruen-flaeche);  border-left-color: var(--bk-gruen); }

/* Recommendation Card — die KI spricht, sie handelt nicht (ADR-0037). */
.bk-empfehlung { border-left-color: var(--bk-tuerkis); }
.bk-empfehlung .bk-etikett { color: var(--bk-tuerkis); }

/* ══ Knöpfe ═══════════════════════════════════════════════════════════════ */

.bk-knopf {
  align-items: center;
  background: var(--bk-flaeche-hoch);
  border: 1px solid var(--bk-rand-stark);
  border-radius: var(--bk-radius-s);
  color: var(--bk-text);
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: var(--bk-groesse-m);
  font-weight: var(--bk-fett-halb);
  gap: var(--bk-abstand-2);
  justify-content: center;
  min-height: var(--bk-touch);
  padding: 0 var(--bk-abstand-4);
  text-decoration: none;
  transition: background var(--bk-dauer) var(--bk-kurve);
}

.bk-knopf:hover { background: var(--bk-rand); }

.bk-knopf-haupt {
  background: var(--bk-primaer);
  border-color: var(--bk-primaer);
  color: var(--bk-text);
  min-height: var(--bk-touch-haupt);
}

.bk-knopf-haupt:hover { background: var(--bk-primaer-tief); }

.bk-knopf-breit { width: 100%; }

/* ══ Checkliste ═══════════════════════════════════════════════════════════ */

.bk-checkliste { list-style: none; margin: 0; padding: 0; }

.bk-checkliste li + li { margin-top: var(--bk-abstand-2); }

.bk-checkliste label {
  align-items: center;
  background: var(--bk-flaeche-hoch);
  border-radius: var(--bk-radius-s);
  cursor: pointer;
  display: flex;
  gap: var(--bk-abstand-3);
  min-height: var(--bk-touch);
  padding: var(--bk-abstand-2) var(--bk-abstand-3);
}

.bk-checkliste input { height: 24px; width: 24px; }

.bk-checkliste input:checked + span { color: var(--bk-text-leise); text-decoration: line-through; }

/* ══ Dokumentenliste ══════════════════════════════════════════════════════ */

.bk-dokumente { list-style: none; margin: 0; padding: 0; }

.bk-dokumente li + li { border-top: 1px solid var(--bk-rand); }

.bk-dokumente a {
  align-items: center;
  color: var(--bk-text);
  display: flex;
  gap: var(--bk-abstand-3);
  min-height: var(--bk-touch);
  padding: var(--bk-abstand-2) 0;
  text-decoration: none;
}

/* ══ Fotoraster ═══════════════════════════════════════════════════════════ */

.bk-fotos {
  display: grid;
  gap: var(--bk-abstand-2);
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.bk-foto {
  align-items: flex-end;
  aspect-ratio: 4 / 3;
  background: var(--bk-flaeche-hoch);
  border: 1px solid var(--bk-rand);
  border-radius: var(--bk-radius-s);
  display: flex;
  overflow: hidden;
  padding: var(--bk-abstand-2);
}

.bk-foto-anlass {
  background: rgba(8, 19, 36, 0.82);
  border-radius: var(--bk-radius-voll);
  font-size: var(--bk-groesse-xs);
  padding: var(--bk-abstand-1) var(--bk-abstand-2);
}

/* Kachel „Foto hinzufügen" — höchstens drei je Rückmeldung (ADR-0040). */
.bk-foto-neu {
  align-items: center;
  border-style: dashed;
  color: var(--bk-text-leise);
  font-size: var(--bk-groesse-xl);
  justify-content: center;
}

/* ══ Wochenplanung ════════════════════════════════════════════════════════
 * Die einzige Tabelle im System. Auf kleinen Bildschirmen scrollt sie
 * waagrecht, statt zu einer unlesbaren Kachelwand zu werden.
 */

.bk-planung { border-collapse: collapse; min-width: 720px; width: 100%; }

.bk-planung th,
.bk-planung td {
  border-bottom: 1px solid var(--bk-rand);
  padding: var(--bk-abstand-2);
  text-align: left;
  vertical-align: middle;
}

.bk-planung thead th {
  color: var(--bk-text-leise);
  font-size: var(--bk-groesse-s);
  font-weight: var(--bk-fett-halb);
}

.bk-planung tbody th {
  align-items: center;
  display: flex;
  font-weight: var(--bk-fett-normal);
  gap: var(--bk-abstand-2);
  white-space: nowrap;
}

.bk-block {
  background: var(--bk-blau-flaeche);
  border-left: var(--bk-akzentkante) solid var(--bk-primaer);
  border-radius: var(--bk-radius-s);
  color: var(--bk-text);
  display: block;
  font-size: var(--bk-groesse-s);
  min-height: var(--bk-touch);
  padding: var(--bk-abstand-2);
  text-decoration: none;
}

.bk-block-frei {
  background: var(--bk-grau-flaeche);
  border-left-color: var(--bk-grau);
  color: var(--bk-text-leise);
}

/* ══ Timeline / Verlauf ═══════════════════════════════════════════════════ */

.bk-verlauf { list-style: none; margin: 0; padding: 0 0 0 var(--bk-abstand-5); position: relative; }

.bk-verlauf::before {
  background: var(--bk-rand);
  bottom: var(--bk-abstand-3);
  content: "";
  left: 6px;
  position: absolute;
  top: var(--bk-abstand-3);
  width: 2px;
}

.bk-verlauf li { padding-bottom: var(--bk-abstand-4); position: relative; }

.bk-verlauf li::before {
  background: var(--bk-primaer);
  border-radius: var(--bk-radius-voll);
  content: "";
  height: 10px;
  left: calc(-1 * var(--bk-abstand-5) + 2px);
  position: absolute;
  top: 7px;
  width: 10px;
}

/* ══ Rückmeldung ══════════════════════════════════════════════════════════ */

.bk-rueckmeldung { display: grid; gap: var(--bk-abstand-3); }

.bk-option {
  align-items: center;
  background: var(--bk-flaeche-hoch);
  border: 2px solid var(--bk-rand-stark);
  border-radius: var(--bk-radius-m);
  cursor: pointer;
  display: flex;
  gap: var(--bk-abstand-3);
  min-height: 76px;
  padding: var(--bk-abstand-3) var(--bk-abstand-4);
  text-align: left;
  width: 100%;
}

.bk-option .bk-symbol { font-size: var(--bk-groesse-xl); }
.bk-option-titel { font-size: var(--bk-groesse-l); font-weight: var(--bk-fett-halb); }

.bk-option-fertig    { border-color: var(--bk-gruen); }
.bk-option-teilweise { border-color: var(--bk-orange); }
.bk-option-offen     { border-color: var(--bk-grau); }
.bk-option-problem   { border-color: var(--bk-rot); }

/* ══ Formularfelder und Schnellauswahl ════════════════════════════════════
 * Antippen statt Schreiben: Die Auswahlflächen sind so gross, dass sie mit
 * Handschuhen treffbar sind.
 */

.bk-zeile { display: block; }

.bk-zeit-gross { font-size: var(--bk-groesse-xxl); }

.bk .bk-feld {
  background: var(--bk-flaeche-hoch);
  border: 1px solid var(--bk-rand-stark);
  border-radius: var(--bk-radius-s);
  color: var(--bk-text);
  font-family: inherit;
  font-size: var(--bk-groesse-m);
  min-height: var(--bk-touch);
  padding: var(--bk-abstand-3);
  width: 100%;
}

.bk label { display: block; margin: var(--bk-abstand-4) 0 var(--bk-abstand-2); }

.bk-wahlreihe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bk-abstand-2);
}

.bk-wahlreihe .bk-wahl {
  align-items: center;
  background: var(--bk-flaeche-hoch);
  border: 1px solid var(--bk-rand-stark);
  border-radius: var(--bk-radius-voll);
  cursor: pointer;
  display: flex;
  gap: var(--bk-abstand-2);
  margin: 0;
  min-height: var(--bk-touch);
  padding: var(--bk-abstand-2) var(--bk-abstand-4);
}

.bk-wahl input { height: 20px; width: 20px; }
.bk-wahl:has(input:checked) { border-color: var(--bk-primaer); background: var(--bk-blau-flaeche); }

/* ══ Besondere Zustände ═══════════════════════════════════════════════════ */

.bk-zustand {
  border: 1px dashed var(--bk-rand-stark);
  border-radius: var(--bk-radius-m);
  padding: var(--bk-abstand-6) var(--bk-abstand-4);
  text-align: center;
}

.bk-zustand .bk-symbol { display: block; font-size: var(--bk-groesse-xxl); }
.bk-zustand-offline { background: var(--bk-grau-flaeche); border-style: solid; }
.bk-zustand-fehler  { background: var(--bk-rot-flaeche);  border-color: var(--bk-rot); }
.bk-zustand-sperre  { background: var(--bk-orange-flaeche); border-color: var(--bk-orange); }
.bk-zustand-gut     { background: var(--bk-gruen-flaeche);  border-color: var(--bk-gruen); border-style: solid; }

/* ══ LiveBoard ════════════════════════════════════════════════════════════ */

.bk-board { font-size: var(--bk-groesse-l); padding: var(--bk-abstand-6); }
.bk-board h1 { font-size: var(--bk-groesse-board); }
.bk-board .bk-kpi-wert { font-size: var(--bk-groesse-board); }
.bk-board .bk-karte { padding: var(--bk-abstand-5); }

/* ══ Breakpoints ══════════════════════════════════════════════════════════
 * s  < 640px   Mitarbeitende, Bottom Navigation
 * m  640–1023  Tablet, Bottom Navigation, zweispaltige Raster
 * l  >= 1024   Desktop, Side Navigation
 */

@media (max-width: 1023px) {
  .bk-seitennav { display: none; }
  .bk-seite { padding: var(--bk-abstand-4) var(--bk-abstand-3); }
}

@media (min-width: 1024px) {
  .bk-bottomnav { display: none; }
  .bk-mit-bottomnav { padding-bottom: var(--bk-abstand-5); }
}