/* ── Settings modal ──────────────────────────────────────── */
    .overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: color-mix(in srgb, var(--color-neutral-900) 55%, transparent);
      z-index: 200;
      align-items: center;
      justify-content: center;
      padding: var(--space-4);
    }
    .overlay.open { display: flex; }

    .modal {
      background: var(--color-bg);
      color: var(--color-text);
      border: 1px solid var(--color-divider);
      border-radius: 0;
      width: min(960px, calc(100vw - 32px));
      max-height: calc(100vh - 32px);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .modal-header {
      display: flex; align-items: center; gap: 14px;
      padding: 18px 26px;
      border-bottom: 1px solid var(--color-divider);
      flex-shrink: 0;
    }
    .modal-header h2 { font-size: 26px; margin: 0; }
    .modal-header-hint { font-size: 13px; color: var(--color-text-muted); }

    .modal-body {
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 0;
      overflow: hidden;
    }

    .modal-col {
      padding: 26px 28px;
      display: flex; flex-direction: column; gap: 24px;
      overflow-y: auto;
    }
    .modal-col + .modal-col { border-left: 1px solid var(--color-divider); }
    .modal-col-shows { background: var(--color-surface); }

    .modal-section { display: flex; flex-direction: column; gap: 12px; }
    .modal-section-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-muted);
    }
    .modal-section-hint { font-size: 13px; color: var(--color-text-muted); margin-top: -4px; }

    /* — Formularfelder (gemeinsame Basiskomponenten) ─────────────── */
    /* Kein eigener margin-bottom: .modal-section (gap) bzw. .field-row (gap)
       sorgen für den Abstand zwischen Feldern bereits – ein zusätzlicher
       margin-bottom hier addierte sich obendrauf und ließ v.a. das letzte
       Feld einer Sektion mit doppelt so viel Luft nach unten wirken. */
    .field label, .fg label {
      display: block;
      font-family: var(--font-heading); font-weight: var(--font-heading-weight);
      font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--color-text-muted);
      margin-bottom: 7px;
    }
    .input, .fg input {
      width: 100%;
      min-height: 38px;
      background: var(--color-surface);
      border: 1px solid var(--color-divider);
      color: var(--color-text);
      padding: 8px 10px;
      border-radius: 0;
      font-size: 14px;
      font-family: inherit;
    }
    .input:focus-visible, .fg input:focus { outline: 2px solid var(--color-accent); outline-offset: -1px; }
    .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }

    /* — Segmented Control ─────────────────────────────────────────── */
    .seg { display: flex; overflow: hidden; border: 1px solid var(--color-divider); }
    .seg-opt {
      flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
      padding: 9px 10px; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
      font-size: 14px; cursor: pointer;
    }
    .seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
    .seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
    .seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); }
    .seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
    .seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }
    /* Kompakte Variante im Header (Alle/Meine) */
    .seg-hdr { flex-shrink: 0; }
    .seg-hdr .seg-opt { flex: none; padding: 6px 12px; font-size: 13px; }

    .modal-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 20px;
    }

    /* ── Konto-Box (Settings-Modal) ───────────────────────────────── */
    .account-box { padding: 16px 18px; margin-bottom: var(--space-4); }
    .account-box-body { display: flex; align-items: center; gap: 16px; }
    .account-box-info { flex: 1; }
    .account-box-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 20px; }
    .account-box-meta { font-size: 13px; color: var(--color-text-muted); margin-top: 2px; }

    /* ── Utility ───────────────────────────────────────────────────── */
    .hidden { display: none !important; }

    /* ── Header: Konto-Badge ──────────────────────────────────────── */
    .user-badge { display: flex; align-items: center; gap: 12px; }

    /* ── Login-Screen ──────────────────────────────────────────────── */
    .login-screen {
      display: flex; position: fixed; inset: 0; z-index: 300;
      background: var(--color-bg); color: var(--color-text);
    }
    .login-brand {
      flex: 1; display: flex; align-items: center;
      padding: 8vw; border-right: 1px solid var(--color-divider);
    }
    .login-wordmark {
      font-size: clamp(40px, 7vw, 100px); line-height: 0.95; margin: 0; letter-spacing: -0.02em;
    }
    .login-wordmark .accent { color: var(--color-accent); }
    .login-action {
      flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
      gap: var(--space-6); padding: 8vw;
    }
    .login-eyebrow {
      font-family: var(--font-heading); font-weight: var(--font-heading-weight);
      font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-text-muted);
    }
    .login-btn {
      width: 100%; max-width: 420px;
      font-size: 20px; letter-spacing: 0.02em; padding: 18px 24px; gap: 12px;
    }

    @media (max-width: 720px) {
      .login-screen { flex-direction: column; }
      .login-brand {
        flex: none; align-items: flex-end; border-right: none;
        border-bottom: 1px solid var(--color-divider); padding: 12vw 7vw 8vw;
      }
      .login-wordmark { font-size: 15vw; }
      .login-action { flex: none; padding: 8vw 7vw 12vw; justify-content: flex-start; }
      .login-btn { font-size: 17px; padding: 16px 20px; }
    }

    /* Schmale Viewports: Nebeninfos (Sub-Labels, Divider, Konto-Badge)
       verschwinden, Rest bleibt. Reicht allein aber nicht (Logo + Woche-Nav +
       Datum + Refresh + Zahnrad passen trotzdem nicht in <430px) – der
       Zahnrad-Button lief dadurch rechts aus dem Viewport und war gar nicht
       mehr klickbar (siehe Bugreport "kein Save-Button", eigentlich schon
       "Einstellungen" nicht erreichbar). .spacer bekommt deshalb hier
       flex-basis:100%, was in einem wrap-fähigen Flex-Container einen
       Zeilenumbruch erzwingt: Zeile 1 = Logo+Navigation+Datum, Zeile 2 =
       Refresh+Zahnrad – beide Zeilen für sich passen locker. Steht bewusst
       ganz am Dateiende, damit sie die unconditional .show-legend/
       .user-badge/.last-updated-Regeln bei gleicher Spezifität in der
       Cascade schlägt. */
    @media (max-width: 720px) {
      header { padding: 8px 10px; gap: 8px; flex-wrap: wrap; }
      .spacer { flex-basis: 100%; height: 0; }
      .logo { font-size: 16px; }
      .hdr-stack-main { font-size: 16px; }
      .hdr-stack-sub, .hdr-divider, .user-badge { display: none; }
      .status-bar { display: none; }
      /* Derselbe Zeilenumbruch-Trick wie beim App-Header: .modal-header
         (Titel+Hinweistext+Schließen+Speichern) überlief hier ebenso –
         Zeile 1 = Titel+Hinweis, Zeile 2 = Buttons. */
      .modal-header { flex-wrap: wrap; padding: 14px 20px; row-gap: 10px; }
      .modal-header h2 { font-size: 20px; }
      /* Gestapelt statt nebeneinander: .modal-body wird selbst der
         Scroll-Container (eine durchgehende Seite) statt zwei einzelne
         .modal-col mit je eigener, abgeschnittener Scroll-Höhe zu lassen –
         sonst wirkt der Übergang zwischen den Spalten wie ein Rendering-
         Fehler (siehe Bugreport). */
      .modal-body { grid-template-columns: 1fr; overflow-y: auto; overflow-x: hidden; }
      .modal-col { overflow-y: visible; }
      .modal-col + .modal-col { border-left: none; border-top: 1px solid var(--color-divider); }
    }


    /* ── Ausgeblendete Jobs (Settings) ────────────────────────────────── */
    .modal-section-label-row {
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
    }
    .hidden-jobs-restore-all { font-size: 12px; padding: 4px 10px; flex-shrink: 0; }

    .hidden-jobs-list { display: flex; flex-direction: column; gap: 6px; }
    .hidden-jobs-empty { font-size: 13px; color: var(--color-text-muted); padding: 8px 0; }

    .hidden-job-row {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 10px; border-radius: 6px;
      background: var(--color-bg); border: 1px solid var(--color-divider);
    }
    .hidden-job-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .hidden-job-title { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .hidden-job-meta  { font-size: 11px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .hidden-job-restore { font-size: 12px; padding: 4px 10px; flex-shrink: 0; }

    /* Location-Auswahl: ganze Zeile klickbar, Haken = sichtbar */
    .location-row { cursor: pointer; }
    .location-row:has(input:not(:checked)) .hidden-job-title { color: var(--color-text-muted); text-decoration: line-through; }
    .location-check { width: 16px; height: 16px; accent-color: var(--color-accent); flex-shrink: 0; margin: 0; }