/* ── Reißbrett-Basiskomponenten (Buttons, Blueprint-Rahmen) ───────── */
    .blueprint { position: relative; border: 1px solid var(--color-divider); border-radius: 0; }
    .blueprint > .corner { position: absolute; width: 11px; height: 11px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
    .blueprint > .corner::before, .blueprint > .corner::after { content: ""; position: absolute; background: currentColor; }
    .blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
    .blueprint > .corner::after  { top: 5px; left: 0; width: 100%; height: 1px; }
    .blueprint > .corner.tl { top: -6px; left: -6px; }
    .blueprint > .corner.tr { top: -6px; right: -6px; }
    .blueprint > .corner.bl { bottom: -6px; left: -6px; }
    .blueprint > .corner.br { bottom: -6px; right: -6px; }

    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 6px;
      cursor: pointer; text-decoration: none;
      font-family: var(--font-heading); font-weight: var(--font-heading-weight);
      font-size: 14px; line-height: 1.2; color: var(--color-text);
      background: transparent; border: 1px solid var(--color-divider); border-radius: 0;
      padding: var(--space-2) calc(var(--space-3) * 1.2);
      min-height: 36px; /* min-height statt height: Buttons mit größerer
        eigener Schrift/Padding (z.B. .login-btn) dürfen darüber wachsen,
        aber jeder normale Text-Button ist exakt so hoch wie .btn-icon. */
      transition: background 0.12s, border-color 0.12s;
    }
    .btn svg { display: block; }
    .btn:disabled { opacity: 0.45; cursor: not-allowed; }
    .btn:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
    .btn:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
    .btn-primary { background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); }
    .btn-primary:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); }
    .btn-primary:active { background: var(--color-accent-700); border-color: var(--color-accent-700); }
    :root[data-theme="dark"] .btn-primary:hover { background: color-mix(in srgb, var(--color-accent) 82%, white); }
    .btn-ghost { color: var(--color-accent); border-color: transparent; padding-inline: var(--space-1); }
    .btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
    .btn-icon { width: 36px; height: 36px; padding: 0; font-size: 14px; }

    /* — Tags — feste Ramp-Stufen statt Rollen-Tokens: bleiben bewusst ein
       heller Chip auf jedem Grund, statt mit Light/Dark umzuklappen. */
    .tag {
      display: inline-flex; align-items: center;
      font-family: var(--font-heading); font-weight: var(--font-heading-weight);
      font-size: 12px; letter-spacing: 0.04em;
      padding: 4px 10px;
    }
    .tag-accent  { background: var(--color-accent-100); color: var(--color-accent-800); }
    .tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
    .tag-outline { border: 1px solid var(--color-divider); color: var(--color-text-muted); }

    /* — Tabelle (Label/Wert-Paare) — */
    .table { width: 100%; border-collapse: collapse; font-size: 14px; }
    .table td { padding: 8px 0; border-bottom: 1px solid var(--color-divider-soft); vertical-align: top; }
    .table td:first-child { color: var(--color-text-muted); width: 42%; }
    .table-empty { color: var(--color-text-faint); font-style: italic; }

    :focus { outline: none; }
    :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: var(--font-body);
      background: var(--color-bg);
      color: var(--color-text);
      height: 100dvh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

    /* ── Header ──────────────────────────────────────────────── */
    header {
      background: var(--color-bg);
      border-bottom: 1px solid var(--color-divider);
      padding: 14px 20px;
      display: flex;
      align-items: center;
      gap: 18px;
      flex-shrink: 0;
      z-index: 20;
    }

    .logo {
      font-family: var(--font-heading);
      font-weight: var(--font-heading-weight);
      font-size: 20px;
      white-space: nowrap;
    }
    .logo span { color: var(--color-accent); }

    .hdr-divider { width: 1px; align-self: stretch; background: var(--color-divider); flex-shrink: 0; }

    .week-nav {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    button {
      font-family: inherit;
      cursor: pointer;
      border: none;
      background: none;
      transition: background 0.12s;
    }

    /* Zweizeilige Info-Blöcke (Datumsbereich, Aktualisiert/Auto-Refresh,
       Konto) – exakt wie im Design-Canvas gestaffelt statt einzeiliger
       Fließtext. */
    .hdr-stack { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; }
    .hdr-stack-right { align-items: flex-end; text-align: right; }
    .hdr-stack-main {
      font-family: var(--font-heading); font-weight: var(--font-heading-weight);
      font-size: 20px;
      white-space: nowrap;
    }
    .hdr-stack-main-sm { font-size: 15px; }
    .hdr-stack-sub { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }
    .hdr-stack-sub-accent { color: var(--color-accent); }
    .hdr-stack-sub-warn { color: var(--color-accent); font-weight: 600; }

    .hdr-refresh-group { display: flex; align-items: center; gap: 10px; }

    .spacer { flex: 1; }

    .show-legend {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-shrink: 0;
    }
    .legend-item {
      display: flex;
      align-items: center;
      gap: 5px;
      font-family: var(--font-heading); font-weight: var(--font-heading-weight);
      font-size: 13px;
      color: var(--color-text-muted);
      white-space: nowrap;
    }
    .legend-dot {
      width: 14px;
      height: 8px;
      border-radius: 0;
    }

    /* ── Status-Bar (Footer mit Show-Legende) ─────────────────── */
    .status-bar {
      flex-shrink: 0;
      background: var(--color-bg);
      border-top: 1px solid var(--color-divider);
      padding: 0 20px;
      height: 44px;
      display: flex;
      align-items: center;
      gap: 14px;
      z-index: 10;
    }
    .status-bar-label {
      font-family: var(--font-heading); font-weight: var(--font-heading-weight);
      font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
      color: var(--color-text-faint); flex-shrink: 0;
    }
    .status-bar-staffing {
      display: flex; align-items: center; gap: 6px; flex-shrink: 0;
    }
    .status-bar-hint { font-size: 12px; color: var(--color-text-muted); }
    .staffing-dot {
      width: 9px; height: 9px; border: 1.5px solid var(--color-text); flex-shrink: 0;
    }
    .staffing-dot.staffing-full { background: var(--color-text); }
    .staffing-dot.staffing-open { background: transparent; margin-left: 8px; }

    /* ── Show-Farben-Auswahl (Einstellungen) ─────────────────── */
    .show-color-count { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--color-text-muted); }
    .show-color-list { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
    .show-color-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .show-color-input {
      flex: 1;
      min-width: 0;
      height: 32px;
      box-sizing: border-box;
      background: var(--color-surface);
      border: 1px solid var(--color-divider);
      color: var(--color-text);
      padding: 0 9px;
      border-radius: 0;
      font-size: 13px;
      font-family: inherit;
    }
    /* Reihenfolge bestimmt die Match-Priorität (erstes passendes Stichwort
       gewinnt, siehe matchShow()) – zwei winzige, gestapelte Buttons statt
       Drag&Drop, damit es auch auf Touch/Mobile zuverlässig bedienbar bleibt. */
    .show-color-order {
      flex-shrink: 0;
      width: 20px;
      height: 32px;
      display: flex;
      flex-direction: column;
    }
    .show-color-order-btn {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: 1px solid var(--color-divider);
      color: var(--color-text-muted);
      cursor: pointer;
      padding: 0;
    }
    .show-color-order-btn:first-child { border-bottom: none; }
    .show-color-order-btn:hover:not(:disabled) { color: var(--color-accent); background: var(--color-surface); }
    .show-color-order-btn:disabled { opacity: 0.25; cursor: default; }
    .show-color-order-btn svg { width: 10px; height: 10px; pointer-events: none; }

    .show-color-swatch-wrap { position: relative; flex-shrink: 0; display: flex; }
    .show-color-swatch-btn {
      width: 32px;
      height: 32px;
      box-sizing: border-box;
      border-radius: 0;
      border: 1px solid var(--color-divider);
      cursor: pointer;
      padding: 0;
    }
    .show-color-popover {
      /* position: fixed statt absolute, damit das Popover nicht vom
         scrollenden .modal abgeschnitten wird (siehe app.js); top/left
         werden dort per JS anhand der Button-Position gesetzt. */
      position: fixed;
      z-index: 220;
      display: grid;
      grid-template-columns: repeat(5, 20px);
      gap: 6px;
      background: var(--color-surface);
      border: 1px solid var(--color-divider);
      border-radius: 0;
      padding: 8px;
      box-shadow: var(--shadow-lg);
    }
    .show-color-popover[hidden] { display: none; } /* [hidden] sonst von .show-color-popover { display: grid } überstimmt */
    .show-color-swatch {
      width: 20px;
      height: 20px;
      border-radius: 0;
      border: 2px solid transparent;
      cursor: pointer;
      padding: 0;
    }
    .show-color-swatch.selected { border-color: var(--color-text); }
    .show-color-remove {
      flex-shrink: 0;
      width: 32px;
      height: 32px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      color: var(--color-text-muted);
      cursor: pointer;
      font-size: 15px;
      padding: 0;
    }
    .show-color-remove:hover { color: var(--color-accent); }
    .show-color-add {
      margin-top: 8px;
      width: 100%;
      border: 1px dashed var(--color-divider);
      background: transparent;
    }
    .show-color-add:disabled { opacity: 0.4; cursor: not-allowed; }

    /* ── Error banner ────────────────────────────────────────── */
    .error-banner {
      background: var(--color-accent-100);
      border-bottom: 1px solid var(--color-accent);
      border-left: 6px solid var(--color-accent);
      padding: 10px 18px;
      display: none;
      align-items: center;
      gap: 12px;
      flex-shrink: 0;
      color: var(--color-accent-900);
    }
    .error-banner.visible { display: flex; }
    .error-banner svg { flex-shrink: 0; }
    .error-banner-text { flex: 1; font-size: 13px; line-height: 1.5; }
    .error-banner-retry { flex-shrink: 0; white-space: nowrap; }