/* ============================================================
   BHS Design-System · Layout
   ------------------------------------------------------------
   Das Seitengerüst. Setzt tokens.css und bausteine.css voraus.

   bausteine.css liefert die Einzelteile, layout.css das Gerüst,
   in dem sie sitzen. Getrennt, weil man das Gerüst einmal für
   die ganze Anwendung festlegt und die Bausteine dauernd benutzt.
   ============================================================ */

/* ════════════════ APP-RAHMEN ════════════════ */

.bhs-app {
  display: grid;
  grid-template-columns: var(--nav-breite) minmax(0, 1fr);
  min-height: 100vh;
  background: var(--surface);
  font-family: var(--font);
  color: var(--ink);
}
.bhs-app.is-schmal { grid-template-columns: var(--nav-breite-schmal) minmax(0, 1fr); }

/* --- Seitenleiste ---
   Bleibt beim Scrollen stehen und bringt bei Bedarf ihren eigenen
   Scrollbalken mit. Nur der Inhaltsbereich rechts scrollt. */
.bhs-app__nav {
  background: var(--nav-bg);
  border-right: 1px solid var(--nav-line);
  display: flex; flex-direction: column;
  padding: 0 0 var(--s-m);
  position: sticky; top: 0; align-self: start;
  height: 100vh; overflow-y: auto; overscroll-behavior: contain;
}
.bhs-app__marke {
  height: var(--kopf-hoehe);
  display: flex; align-items: center; gap: 10px;
  padding: 0 var(--s-m); flex-shrink: 0;
}
.bhs-app__marke-name {
  font-family: var(--font-titel); font-weight: 700; font-size: 15px;
  letter-spacing: .04em; display: flex; align-items: center; gap: 7px;
}
.bhs-app__marke-klammer { color: var(--brand); }
.bhs-app__marke-zusatz {
  font-weight: 500; color: var(--ink-soft);
  letter-spacing: .08em; font-size: var(--text-s);
}
.bhs-app__umschalter {
  width: 34px; height: 34px; border-radius: var(--r-mittel);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink); background: none; border: none; cursor: pointer; flex-shrink: 0;
}
.bhs-app__nav-gruppe { display: flex; flex-direction: column; gap: 2px; }
.bhs-app__nav-fuss {
  margin-top: auto; padding: var(--s-s) 20px 0;
  font-size: var(--text-xs); color: var(--ink-faint); letter-spacing: .04em;
}
/* Karte am unteren Rand der Leiste — Verbrauch, Restlaufzeit, Hinweis */
.bhs-app__nav-karte {
  margin: 0 var(--s-s); padding: var(--s-m);
  border: 1px solid var(--nav-line); border-radius: var(--r-gross);
  background: var(--surface);
  display: flex; flex-direction: column; gap: var(--s-xs);
}

/* --- Hauptbereich --- */
.bhs-app__haupt { display: flex; flex-direction: column; min-width: 0; }

/* Kopfzeile bleibt oben stehen. Alles Angeheftete braucht eine
   deckende Fläche, sonst scrollt der Inhalt sichtbar darunter durch. */
.bhs-app__kopf {
  height: var(--kopf-hoehe); flex-shrink: 0;
  display: flex; align-items: center; justify-content: flex-end; gap: var(--s-xs);
  padding: 0 28px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: var(--z-layout); background: var(--surface);
}
.bhs-app__kopf-links { margin-right: auto; display: flex; align-items: center;
                       gap: var(--s-s); min-width: 0; }
.bhs-app__avatar {
  width: 30px; height: 30px; border-radius: var(--r-voll);
  background: var(--brand-strong); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-s); font-weight: 700; margin-left: var(--s-2xs);
}
.bhs-app__inhalt { flex-grow: 1; padding: 28px 32px 48px; min-width: 0; }
.bhs-app__inhalt--eng { max-width: 1040px; margin: 0 auto; width: 100%; }


/* ════════════════ SEITENKOPF ════════════════ */

.bhs-seitenkopf { margin-bottom: var(--s-l); }
.bhs-seitenkopf--abgesetzt {
  padding: 18px 32px var(--s-m);
  border-bottom: 1px solid var(--line);
  margin: -28px -32px var(--s-l);
}
/* Bleibt unter der Kopfzeile stehen — damit Titel und Fortschritt
   auch beim Scrollen sichtbar bleiben. */
.bhs-seitenkopf--angeheftet {
  position: sticky; top: var(--kopf-hoehe);
  z-index: calc(var(--z-layout) - 1); background: var(--surface);
}
.bhs-seitenkopf__pfad {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--text-m); color: var(--ink-soft); margin-bottom: 10px;
}
.bhs-seitenkopf__pfad a { color: inherit; text-decoration: none; }
.bhs-seitenkopf__pfad a:hover { text-decoration: underline; }
.bhs-seitenkopf__pfad [aria-current] { color: var(--ink); }

.bhs-seitenkopf__zeile {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-l); flex-wrap: wrap;
}
.bhs-seitenkopf__titel {
  font-family: var(--font-titel); font-size: var(--titel-l);
  font-weight: 700; letter-spacing: -.01em; margin: 0;
}
.bhs-seitenkopf__titel--klein { font-size: var(--titel-m); }
.bhs-seitenkopf__aktionen { display: flex; gap: 9px; align-items: center; flex-shrink: 0; }
.bhs-seitenkopf__meta {
  font-size: var(--text-m); color: var(--ink-soft); line-height: 1.6; margin-top: 6px;
}

/* Meta plus Fortschritt in einer Zeile — für Vorgänge */
.bhs-seitenkopf__lauf {
  display: flex; align-items: center; gap: 20px; margin-top: 10px; flex-wrap: wrap;
}
.bhs-seitenkopf__lauf .bhs-fortschritt { flex-grow: 1; max-width: 460px; }
.bhs-seitenkopf__trenner { width: 1px; height: 22px; background: var(--line); flex-shrink: 0; }


/* ════════════════ WERKZEUGLEISTE ════════════════
   Suche und Filter über einer Liste. Sitzt immer direkt darüber,
   nie in einer Seitenspalte. */

.bhs-werkzeugleiste {
  display: flex; align-items: center; gap: var(--s-xs);
  flex-wrap: wrap; margin-bottom: 18px;
}
.bhs-werkzeugleiste .bhs-feld { width: auto; }
.bhs-werkzeugleiste__suche { width: 210px; }


/* ════════════════ ARBEITSBEREICH ════════════════
   Zweispaltig: Abschnittsnavigation links, Inhalt rechts.
   Für Vorgänge mit mehreren Abschnitten. */

.bhs-arbeit { display: grid; grid-template-columns: 248px minmax(0, 1fr);
              gap: var(--s-xl); align-items: start; }
.bhs-arbeit__spalte { min-width: 0; display: flex; flex-direction: column; gap: var(--s-xl); }

/* Die Abschnittsnavigation bleibt neben dem scrollenden Inhalt stehen.
   --anker sagt, wie viel oben schon angeheftet ist (Kopfzeile plus
   Seitenkopf) — daran hängt auch scroll-margin der Abschnitte. */
.bhs-arbeit__nav {
  position: sticky; top: calc(var(--anker) + var(--s-l));
  align-self: start; max-height: calc(100vh - var(--anker) - var(--s-xl));
  overflow-y: auto; overscroll-behavior: contain;
}
:root { --anker: var(--kopf-hoehe); }

.bhs-schrittnav { display: flex; flex-direction: column; gap: 3px; }
.bhs-schrittnav__titel {
  font-size: var(--text-s); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-soft);
  margin-bottom: var(--s-s); padding-left: 2px;
}
.bhs-schrittnav__eintrag {
  display: flex; align-items: center; gap: 11px;
  padding: 9px var(--s-s); border-radius: var(--r-mittel); cursor: pointer;
}
.bhs-schrittnav__eintrag.is-aktiv { background: var(--brand-soft); }
.bhs-schrittnav__marke {
  width: 19px; height: 19px; border-radius: var(--r-voll); flex-shrink: 0;
  border: 2px solid #cdcdcd; background: var(--surface);
  display: flex; align-items: center; justify-content: center;
}
/* Erledigt schlägt aktiv: Wo ein grüner Haken steht, braucht es weder
   Ring noch Punkt. Beides übereinander sieht nach Fehler aus. */
.bhs-schrittnav__eintrag.is-aktiv .bhs-schrittnav__marke { border-color: var(--brand); }
.bhs-schrittnav__eintrag.is-aktiv .bhs-schrittnav__marke::after {
  content: ""; width: 7px; height: 7px; border-radius: var(--r-voll); background: var(--brand);
}
.bhs-schrittnav__eintrag.is-erledigt .bhs-schrittnav__marke {
  background: var(--ok); border: none;
}
.bhs-schrittnav__eintrag.is-erledigt .bhs-schrittnav__marke::after {
  content: ""; width: 8px; height: 4px; margin-top: -2px;
  border-left: 2.2px solid #fff; border-bottom: 2.2px solid #fff;
  border-radius: 0; background: none; transform: rotate(-45deg);
}
.bhs-schrittnav__eintrag.is-gesperrt .bhs-schrittnav__marke {
  background: var(--nav-bg); border-color: var(--nav-line);
}
.bhs-schrittnav__label { font-size: var(--text-m); line-height: 1.3; }
.bhs-schrittnav__eintrag.is-aktiv .bhs-schrittnav__label { font-weight: 700; }
.bhs-schrittnav__eintrag.is-erledigt .bhs-schrittnav__label { color: var(--ink-soft); }
.bhs-schrittnav__zaehler { font-size: var(--text-xs); color: var(--ink-faint); margin-top: 2px; }


/* ════════════════ BLOCKBREITE ════════════════
   Alle umrahmten Blöcke enden auf derselben Kante. Eingabefelder
   dürfen schmaler sein — ein Datum braucht keine 800 px. */

.bhs-block { width: var(--block); max-width: 100%; }


/* ════════════════ FUSSLEISTE EINES VORGANGS ════════════════ */

.bhs-vorgangsfuss {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding: var(--s-m) 20px; border-radius: var(--r-gross);
  background: var(--surface-sunken); border: 1px solid var(--line);
}
.bhs-vorgangsfuss__text { font-size: var(--text-m); color: var(--ink-soft); line-height: 1.5; }


/* ════════════════ MOBIL ════════════════
   Ab hier klappt die Leiste weg und die Spalten stapeln sich.
   Die Kontrollhöhe wächst auf L — Finger brauchen mehr Fläche. */

@media (max-width: 900px) {
  .bhs-app { grid-template-columns: minmax(0, 1fr); }
  .bhs-app__nav { display: none; }
  /* Angeheftetes wieder lösen — auf kleinen Schirmen frisst es den halben Bildschirm */
  .bhs-seitenkopf--angeheftet { position: static; }
  .bhs-arbeit__nav { position: static; max-height: none; }
  .bhs-app__nav.is-offen { display: flex; position: fixed; inset: 0 auto 0 0;
                           width: var(--nav-breite); z-index: var(--z-modal); }
  .bhs-app__inhalt { padding: 20px var(--s-m) 40px; }
  .bhs-seitenkopf--abgesetzt { margin: -20px calc(-1 * var(--s-m)) var(--s-l);
                               padding: var(--s-m); }
  .bhs-arbeit { grid-template-columns: minmax(0, 1fr); gap: var(--s-l); }
  .bhs-block { width: 100%; }
  .bhs-karte__felder { grid-template-columns: minmax(0, 1fr); }
  .bhs-kaestchenliste { grid-template-columns: minmax(0, 1fr); }
  .bhs-detailzeile { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .bhs-feld { height: var(--h-l); font-size: var(--text-l); }
  .bhs-knopf { min-height: 44px; }
}