/* 44CHKN Business OS — Layout: Sidebar (Desktop), Topbar + Untere Navigation (Mobil),
   Inhaltsspalte, sticky Filterleiste. Raster auf 4-px-Grid, funktioniert ab 320 px. */

.skip-link {
  position: absolute; left: var(--s2); top: var(--s2);
  transform: translateY(-200%);
  background: var(--surface); color: var(--ink);
  padding: var(--s2) var(--s4); border-radius: var(--radius);
  box-shadow: var(--shadow); z-index: 200;
  transition: transform .12s ease;
}
.skip-link:focus { transform: translateY(0); }

/* ---------- App-Rahmen ---------- */
.app-shell { min-height: 100vh; }

.layout { display: grid; grid-template-columns: 1fr; min-height: 100vh; }
/* Inhaltsspalte darf unter die Inhaltsbreite schrumpfen (Grid-Mindestgröße
   aushebeln), damit breite Kinder nie die Seite selbst verbreitern. */
.layout > div { min-width: 0; }
@media (min-width: 1024px) {
  .layout { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
}

/* ---------- Sidebar (Desktop) ---------- */
.sidebar {
  display: none;
  position: sticky; top: 0; height: 100vh;
  background: var(--dark); color: #eef1f6;
  flex-direction: column; padding: var(--s6) 0 var(--s4);
}
@media (min-width: 1024px) { .sidebar { display: flex; } }

.brand {
  display: flex; align-items: baseline; gap: var(--s2);
  padding: 0 var(--s6) var(--s6); margin: 0;
}
.brand-name { font-size: var(--fs-3); font-weight: 700; letter-spacing: .04em; color: #fff; }
.brand-sub { font-size: var(--fs-0); color: #b4bccb; }

.nav { display: flex; flex-direction: column; gap: 2px; padding: 0 var(--s3); flex: 1 1 auto; overflow-y: auto; }
.nav-link {
  display: flex; align-items: center; min-height: 44px;
  padding: var(--s2) var(--s3); border-radius: 8px;
  color: #c9d0dc; text-decoration: none; font-size: var(--fs-2);
}
.nav-link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.nav .nav-link[aria-current="page"] { background: var(--brand); color: var(--brand-ink); font-weight: 600; }
.nav .nav-link[aria-current="page"]:hover { background: var(--brand); color: var(--brand-ink); }

.sidebar-foot { padding: var(--s3) var(--s6) 0; border-top: 1px solid rgba(255, 255, 255, .12); margin-top: var(--s4); }
.sidebar-user { display: block; color: #eef1f6; font-size: var(--fs-1); }
.sidebar-role { display: block; color: #b4bccb; font-size: var(--fs-0); margin-bottom: var(--s2); }
.sidebar-stand { color: #b4bccb; font-size: var(--fs-0); margin: var(--s2) 0; }
.sidebar-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }

/* Buttons in der dunklen Sidebar */
.sidebar .btn-ghost { color: #c9d0dc; border-color: rgba(255, 255, 255, .25); }
.sidebar .btn-ghost:hover { background: rgba(255, 255, 255, .08); color: #fff; }

/* ---------- Mobile Topbar ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  position: sticky; top: 0; z-index: 60;
  height: var(--topbar-h); padding: 0 var(--s4);
  background: var(--dark); color: #fff;
}
@media (min-width: 1024px) { .topbar { display: none; } }
.topbar .brand-name { color: #fff; font-size: var(--fs-3); }

/* ---------- Untere Navigation (Mobil) ---------- */
.bottom-nav {
  position: sticky; bottom: 0; z-index: 60;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--surface); border-top: 1px solid var(--line);
}
@media (min-width: 1024px) { .bottom-nav { display: none; } }
.bottom-nav a, .bottom-nav button {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-height: 52px; padding: var(--s1);
  background: none; border: 0; border-top: 3px solid transparent; border-radius: 0;
  color: var(--muted); text-decoration: none; font-size: var(--fs-0);
}
.bottom-nav .nav-link:hover { background: none; color: var(--ink); }
.bottom-nav a[aria-current="page"] { color: var(--brand); border-top-color: var(--brand); font-weight: 600; }

/* ---------- Inhalt ---------- */
.content { padding: var(--s4); max-width: 1200px; width: 100%; margin: 0 auto; min-width: 0; }
@media (min-width: 640px) { .content { padding: var(--s6) var(--s8); } }
@media (min-width: 1024px) { .content { padding: var(--s8) var(--s8) var(--s12); } }

.page-head { margin: var(--s4) 0 var(--s6); }
.page-head h1 { font-size: var(--fs-4); margin: 0 0 var(--s2); line-height: 1.25; }
.page-lead { color: var(--muted); margin: 0; max-width: 62ch; }

main h1:focus, main h2:focus, main h3:focus { box-shadow: none; } /* Fokus-Marke kommt vom Routen-Wechsel */
/* Programmatischer Fokus auf main (Routen-Wechsel) zeichnet keine Marke;
   Tastatur-Fokus auf Bedienelementen bleibt sichtbar (:focus-visible). */
main:focus, main:focus-visible { outline: none; box-shadow: none; }

/* ---------- Hinweisleiste Datenstand ---------- */
.datastand {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4);
  padding: var(--s2) var(--s4); margin: 0 0 var(--s4);
  background: var(--surface-2); border-radius: var(--radius);
  font-size: var(--fs-1); color: var(--muted);
}
.banner {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s3) var(--s4); margin: 0 0 var(--s4);
  border-radius: var(--radius); font-size: var(--fs-1);
  background: var(--part-bg); color: var(--part);
}
.banner strong { color: inherit; }

/* ---------- Filterleiste ---------- */
/* Sticky unter der Mobil-Topbar (nicht darüber), damit beim Scrollen nichts
   verdeckt wird; Desktop ohne Topbar bei top: 0. Kompakt gehalten. */
.filterbar {
  position: sticky; top: var(--topbar-h); z-index: 30;
  background: var(--bg);
  padding: var(--s2) 0;
  margin: 0 0 var(--s4);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 1024px) { .filterbar { top: 0; z-index: 30; } }
.filterbar-row { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: end; }
.filter-field { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.filter-field label { font-size: var(--fs-0); color: var(--muted); }
.filter-field select, .filter-field input {
  min-height: 44px; padding: var(--s1) var(--s2);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; font-size: var(--fs-1);
  font-family: var(--font); max-width: 100%;
}
.filter-field input[type="month"] { font-variant-numeric: tabular-nums; }
.filter-field.grow { flex: 1 1 240px; }
.filter-actions { margin-left: auto; display: flex; gap: var(--s2); }

/* Kompakte Filterzusammenfassung (Mobil) */
.filter-compact { display: flex; gap: var(--s2); align-items: center; justify-content: space-between; }
.filter-summary {
  flex: 1 1 auto; min-width: 0;
  font-size: var(--fs-1); color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (min-width: 768px) {
  .filter-compact { display: none; }
  .filterbar-row { display: flex; }
}
@media (max-width: 767px) {
  .filterbar-row.closed { display: none; }
}

/* ---------- Abschnitte ---------- */
.section { margin: var(--s8) 0 0; }
.section > h2 { font-size: var(--fs-3); margin: 0 0 var(--s3); }
.section > .section-hint { color: var(--muted); font-size: var(--fs-1); margin: calc(var(--s3) * -1) 0 var(--s3); }

.grid { display: grid; gap: var(--s4); }
.grid-tiles { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(480px, 100%), 1fr)); }

/* Das hidden-Attribut gilt immer, auch auf Elementen mit eigener display-Regel. */
[hidden] { display: none !important; }