/* ════════════════════════════════════════════════════════════════════════
   layout.css — Struktur: Header, Sidebar, Content-Grid (Layer: layout)
   ════════════════════════════════════════════════════════════════════════ */

@layer layout {

  /* ── Skip-Link (WCAG 2.4.1) ───────────────────────────────────────────── */
  .skip-link {
    position: absolute;
    left: var(--sp-2);
    top: -100px;
    z-index: 200;
    padding: var(--sp-2) var(--sp-4);
    background: var(--accent);
    color: #000;
    border-radius: var(--radius);
    font-weight: 600;
    transition: top var(--t-fast);
  }
  .skip-link:focus { top: var(--sp-2); }

  /* ── Header ───────────────────────────────────────────────────────────── */
  .site-header {
    position: fixed;
    inset: 0 0 auto;
    height: var(--header-h);
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 var(--sp-5);
    background: rgb(8 11 19 / 85%);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    z-index: 100;
  }

  /* ── Layout-Container ─────────────────────────────────────────────────── */
  .layout {
    display: flex;
    padding-top: var(--header-h);
    padding-left: var(--sidebar-w);
    min-height: 100vh;
    position: relative;
    z-index: 1;
  }

  /* ── Sidebar ──────────────────────────────────────────────────────────── */
  .sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    position: fixed;
    inset: var(--header-h) auto 0 0;
    overflow: hidden auto;
    padding: var(--sp-5) var(--sp-3);
    border-right: 1px solid var(--border);
    background: rgb(8 11 19 / 60%);
    backdrop-filter: blur(8px);
  }

  /* Eingeloggter Nutzer ganz oben in der Sidebar (rollengefärbt) */
  .sidebar-user {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1) var(--sp-2);
    align-items: baseline;
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--border);
  }

  .sidebar-user-name {
    font-family: var(--font-head);
    font-size: var(--fs-sm);
  }

  .sidebar-user-role {
    font-size: var(--fs-xs);
    opacity: 0.85;
  }

  /* ── Hauptinhalt ──────────────────────────────────────────────────────── */
  .content {
    flex: 1;
    min-width: 0;
    margin-inline: auto;
    padding: var(--sp-8) var(--sp-10) var(--sp-14);
    max-width: var(--content-max);
  }

  /* ── Globaler Footer ──────────────────────────────────────────────────────
     Liegt außerhalb von .layout → braucht denselben Sidebar-Offset, sonst
     verschwindet er hinter der fixen Sidebar. Mittig im Content-Bereich. */
  .site-footer {
    margin-left: var(--sidebar-w);
    padding: var(--sp-8) var(--sp-10) var(--sp-10);
    border-top: 1px solid var(--border);
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--text-3);
  }

  /* ── Backdrop hinter dem offenen Drawer (nur ≤900px aktiv) ────────────── */
  .sidebar-backdrop {
    position: fixed;
    inset: var(--header-h) 0 0;
    z-index: 90;
    background: rgb(0 0 0 / 50%);
  }

  /* ── Responsive: Sidebar wird zum Off-Canvas-Drawer (von links) ───────── */
  @media (width <= 900px) {
    .layout { padding-left: 0; }

    .sidebar {
      z-index: 95;
      transform: translateX(-100%);
      transition: transform var(--t-fast);
      will-change: transform;
    }

    .sidebar.is-open { transform: translateX(0); }

    /* Body-Scroll-Lock, solange der Drawer offen ist. */
    .nav-open,
    .nav-open body { overflow: hidden; }

    .content {
      padding: var(--sp-5) var(--sp-4) var(--sp-10);
      max-width: 100%;
    }

    /* Kein Sidebar-Offset mehr (Drawer ist off-canvas) → Footer mittig & voll. */
    .site-footer {
      margin-left: 0;
      padding-inline: var(--sp-4);
    }
  }
}