/* Tokens, Basis (Schrift, Überschriften, Formularelemente) und Bausteine stehen in design.css,
         das vor diesem Block geladen wird. */

      /* ---------- Anmeldung ---------- */
      #authScreen,
      #mfaScreen {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--s4);
      }
      #mfaScreen {
        display: none;
      }
      .authBox {
        width: 100%;
        max-width: 380px;
        padding: var(--s6);
      }
      .authBox h1 {
        font-family: var(--font-serif);
        font-weight: 500;
        font-size: var(--fs-2xl);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--s2);
        margin: 0 0 var(--s2);
      }
      .authBox p.sub {
        color: var(--ink-3);
        text-align: center;
        margin: 0 0 var(--s5);
        font-size: var(--fs-sm);
      }
      .errorMsg {
        color: var(--danger);
        font-size: var(--fs-sm);
        margin-top: var(--s2);
        min-height: 16px;
      }
      .authSwitch {
        text-align: center;
        margin-top: var(--s4);
        font-size: var(--fs-sm);
        color: var(--ink-3);
      }
      .linkBtn {
        background: none;
        border: 0;
        padding: 0;
        font: inherit;
        color: var(--primary);
        cursor: pointer;
      }
      .linkBtn:hover {
        text-decoration: underline;
      }

      /* ---------- App shell ---------- */
      #appShell {
        display: none;
        min-height: 100vh;
      }
      #appShell.active {
        display: flex;
      }
      .sidebar {
        width: 256px;
        flex-shrink: 0;
        background: var(--surface-2);
        border-right: 1px solid var(--border);
        display: flex;
        flex-direction: column;
        padding: 18px 0;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        overflow-y: auto;
        z-index: 20;
        transition: transform 0.2s;
      }
      .collapsibleHead {
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .collapsibleHead .chevron {
        color: var(--ink-3);
        font-size: var(--fs-xs);
      }
      .collapsibleHead:hover .chevron {
        color: var(--ink);
      }
      .hamburger {
        display: none;
        position: fixed;
        top: 14px;
        left: 14px;
        z-index: 30;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-md);
        padding: 8px 10px;
        cursor: pointer;
        color: var(--ink);
      }