/* ══ HÜLLE DER NEUEN APP (Bau 3, T2432, 04.11.2026) ═══════════════════════════
   Seitenleiste, Kopfzeile, Handy-Leiste nach Mockup R9 — layouts/_shell_neu.
   JEDE Regel beginnt mit html[data-ui="neu"]: Propshaft lädt diese Datei in alle
   Layouts (:app), wirken darf sie nur in der neuen App (NEUE_APP / Vorschau).
   Farben nur aus den G2-Token (basis/tokens.css, hell + dunkel); Radien und kleine
   Schriftgrade der Leisten (9/10 px, 11–11,5 px) wie Mockup R9.
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-ui="neu"] body { background: var(--v3-canvas); color: var(--v3-ink); font-family: var(--v3-font); }

html[data-ui="neu"] .na-huelle {
  display: grid; grid-template-columns: var(--v3-shell-w) minmax(0, 1fr); min-height: 100dvh;
}
html[data-ui="neu"] .na-i {
  width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; flex: none;
}

/* ── Seitenleiste ─────────────────────────────────────────────────────────── */
html[data-ui="neu"] .na-seitenleiste {
  position: sticky; top: 0; height: 100dvh; overflow-y: auto; background: var(--v3-sb); color: var(--v3-sb-ink);
  display: flex; flex-direction: column; padding: 0 var(--v3-s-12) var(--v3-s-14); z-index: 50;
}
html[data-ui="neu"] .na-marke-zeile { display: flex; align-items: center; justify-content: space-between; }
html[data-ui="neu"] .na-marke {
  display: flex; align-items: center; gap: 11px; padding: 18px 10px 16px; font-weight: var(--v3-fw-titel);
  font-size: var(--v3-fs-5); color: var(--v3-sb-ink); text-decoration: none;
}
html[data-ui="neu"] .na-logo {
  width: 32px; height: 32px; border-radius: 9px; background: var(--v3-card); color: var(--v3-brand);
  display: grid; place-items: center; font-size: var(--v3-fs-3); font-weight: var(--v3-fw-titel);
}
html[data-ui="neu"] .na-zu {
  display: none; background: none; border: 0; color: var(--v3-sb-ink); padding: var(--v3-s-8);
  border-radius: var(--v3-r-xs); cursor: pointer;
}
html[data-ui="neu"] .na-nav {
  display: flex; align-items: center; gap: var(--v3-s-12); padding: 10px var(--v3-s-12); border-radius: 10px;
  font-size: var(--v3-fs-3); font-weight: 500; color: var(--v3-sb-ink); margin: 1px 0; text-decoration: none;
}
html[data-ui="neu"] .na-nav:hover { background: var(--v3-sb-active); color: var(--v3-sb-ink); }
html[data-ui="neu"] .na-nav.na-im { background: var(--v3-sb-active); font-weight: 600; }
html[data-ui="neu"] .na-nav.na-an,
html[data-ui="neu"] .na-nav[aria-current="true"] {
  background: var(--v3-sb-active); font-weight: var(--v3-fw-fett); box-shadow: inset 3px 0 0 var(--v3-sb-brand);
}
html[data-ui="neu"] .na-nav.na-sub { padding: 7px var(--v3-s-12) 7px 44px; font-size: var(--v3-fs-2); color: var(--v3-sb-mut); }
html[data-ui="neu"] .na-nav.na-sub.na-an { color: var(--v3-sb-ink); }
html[data-ui="neu"] .na-nav:focus-visible,
html[data-ui="neu"] .na-zu:focus-visible { outline: 2px solid var(--v3-sb-brand); outline-offset: 1px; }
html[data-ui="neu"] .na-zahl {
  margin-left: auto; font-size: var(--v3-fs-1); font-weight: 700; color: var(--v3-sb-ink);
  border: 1px solid var(--v3-sb-mut); border-radius: var(--v3-r-pill); padding: 0 var(--v3-s-8);
}
html[data-ui="neu"] .na-trenner { border-top: 1px solid var(--v3-sb-active); margin: var(--v3-s-8) 4px; }
html[data-ui="neu"] .na-unten { margin-top: auto; padding-top: var(--v3-s-12); border-top: 1px solid var(--v3-sb-active); }
html[data-ui="neu"] .na-unten .na-nav { font-size: var(--v3-fs-2); }

/* ── Kopfzeile ────────────────────────────────────────────────────────────── */
html[data-ui="neu"] .na-haupt { min-width: 0; display: flex; flex-direction: column; }
html[data-ui="neu"] .na-kopf {
  position: sticky; top: 0; z-index: 40; height: 60px; display: flex; align-items: center; gap: var(--v3-s-12);
  padding: 0 28px; background: var(--v3-top-bg); backdrop-filter: blur(8px); border-bottom: 1px solid var(--v3-line);
}
html[data-ui="neu"] .na-suche { flex: 1; max-width: 460px; position: relative; }
html[data-ui="neu"] .na-suche input {
  width: 100%; padding: 9px 56px 9px 38px; border: 1px solid var(--v3-line); border-radius: 10px;
  background: var(--v3-card); color: var(--v3-ink); font: inherit; font-size: var(--v3-fs-3);
}
html[data-ui="neu"] .na-suche input::placeholder { color: var(--v3-ink3-text); }
html[data-ui="neu"] .na-suche input:focus { outline: 2px solid var(--v3-brand); outline-offset: 0; box-shadow: var(--v3-fokus); }
html[data-ui="neu"] .na-suche .shell-si { position: absolute; left: var(--v3-s-12); top: 10px; color: var(--v3-ink3-text); }
html[data-ui="neu"] .na-suche kbd {
  position: absolute; right: 10px; top: 9px; font: 600 11.5px/1 var(--v3-font); color: var(--v3-ink3-text);
  border: 1px solid var(--v3-line); border-radius: 6px; padding: 3px 6px; background: var(--v3-card);
}
/* Wegweiser-Panel: dieselben Bauteile wie die alte Hülle (#807); deren --shell-*-Werte
   gibt es nur unter .shell — hier auf die Token abgebildet, damit Hell und Dunkel stimmen. */
html[data-ui="neu"] .na-suche {
  --shell-line: var(--v3-line); --shell-ink: var(--v3-ink); --shell-muted: var(--v3-ink2);
  --shell-soft: var(--v3-hover); --shell-accent: var(--v3-brand); --shell-accent-2: var(--v3-brand);
}
html[data-ui="neu"] .na-suche .wgw-panel { background: var(--v3-card); color: var(--v3-ink); border-color: var(--v3-line); box-shadow: var(--v3-shadow-hoch); }
html[data-ui="neu"] .na-suche .wgw-gruppe + .wgw-gruppe { border-top-color: var(--v3-line); }
html[data-ui="neu"] .na-suche .wgw-item.on,
html[data-ui="neu"] .na-suche .wgw-item:hover { background: var(--v3-hover); }
html[data-ui="neu"] .na-rechts { margin-left: auto; display: flex; align-items: center; gap: 10px; }
html[data-ui="neu"] .na-knopf {
  position: relative; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  background: var(--v3-card); border: 1px solid var(--v3-line); color: var(--v3-ink2); cursor: pointer; flex: none;
}
html[data-ui="neu"] .na-knopf:focus-visible,
html[data-ui="neu"] .na-ich:focus-visible,
html[data-ui="neu"] .na-handy a:focus-visible,
html[data-ui="neu"] .na-handy button:focus-visible { outline: 2px solid var(--v3-brand); outline-offset: 2px; box-shadow: var(--v3-fokus); }
html[data-ui="neu"] .na-punktzahl {
  position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--v3-r-pill);
  background: var(--v3-bad); color: var(--v3-card); font-size: 11px; font-weight: 700; display: grid; place-items: center;
  border: 2px solid var(--v3-canvas);
}
html[data-ui="neu"] .na-punktzahl.hidden { display: none; }

/* Kürzel → Mein Konto */
html[data-ui="neu"] .na-konto { position: relative; }
html[data-ui="neu"] .na-ich {
  list-style: none; width: 36px; height: 36px; border-radius: 50%; background: var(--v3-brand); color: var(--v3-card);
  display: grid; place-items: center; font-weight: 700; font-size: var(--v3-fs-2); cursor: pointer;
}
html[data-ui="neu"] .na-ich::-webkit-details-marker { display: none; }
html[data-ui="neu"] .na-konto-menue {
  position: absolute; right: 0; top: 44px; min-width: 230px; background: var(--v3-card); color: var(--v3-ink);
  border-radius: var(--v3-r-sm); box-shadow: var(--v3-shadow-hoch); padding: 6px; z-index: 60;
  display: flex; flex-direction: column;
}
html[data-ui="neu"] .na-konto-wer { display: flex; flex-direction: column; padding: var(--v3-s-8) 10px; border-bottom: 1px solid var(--v3-line); margin-bottom: 4px; }
html[data-ui="neu"] .na-konto-wer span { font-size: var(--v3-fs-1); color: var(--v3-ink2); }
html[data-ui="neu"] .na-konto-menue a,
html[data-ui="neu"] .na-konto-knopf {
  display: block; width: 100%; text-align: left; padding: var(--v3-s-8) 10px; border-radius: var(--v3-r-xs);
  font-size: var(--v3-fs-3); color: var(--v3-ink); background: none; border: 0; cursor: pointer; text-decoration: none;
}
html[data-ui="neu"] .na-konto-menue a:hover,
html[data-ui="neu"] .na-konto-knopf:hover { background: var(--v3-hover); }
html[data-ui="neu"] .na-konto-menue a:focus-visible,
html[data-ui="neu"] .na-konto-knopf:focus-visible { outline: 2px solid var(--v3-brand); outline-offset: -2px; }

/* ── Inhalt + Umschalter Arbeiten · Auswerten · Abschluss ─────────────────── */
html[data-ui="neu"] .na-inhalt { width: 100%; padding: 28px 28px 40px; }
html[data-ui="neu"] .na-modus {
  float: right; display: inline-flex; background: var(--v3-mut-soft); border-radius: 10px; padding: 3px;
  margin: 2px 0 var(--v3-s-12) var(--v3-s-16); position: relative; z-index: 1;
}
html[data-ui="neu"] .na-modus a {
  padding: 7px var(--v3-s-16); border-radius: var(--v3-r-xs); font-size: var(--v3-fs-3); font-weight: 600;
  color: var(--v3-ink2); white-space: nowrap; text-decoration: none;
}
html[data-ui="neu"] .na-modus a:hover { color: var(--v3-ink); }
html[data-ui="neu"] .na-modus a.na-an { background: var(--v3-card); color: var(--v3-ink); box-shadow: var(--v3-shadow); }
html[data-ui="neu"] .na-modus a:focus-visible { outline: 2px solid var(--v3-brand); outline-offset: 1px; }

/* Bis 1100 px steht der Umschalter über dem Inhalt, nicht neben alten Reiterleisten. */
@media (max-width: 1100px) {
  html[data-ui="neu"] .na-modus { float: none; margin: 0 0 var(--v3-s-12); }
}

/* ── Handy-Leiste + Schublade ─────────────────────────────────────────────── */
html[data-ui="neu"] .na-handy { display: none; }
html[data-ui="neu"] .na-scrim { display: none; }

@media (max-width: 860px) {
  html[data-ui="neu"] .na-huelle { grid-template-columns: minmax(0, 1fr); }
  html[data-ui="neu"] .na-seitenleiste {
    position: fixed; left: 0; top: 0; width: 270px; transform: translateX(-100%); transition: transform .2s; visibility: hidden; z-index: 60;
  }
  html[data-ui="neu"] .na-schublade .na-seitenleiste { transform: none; visibility: visible; }
  html[data-ui="neu"] .na-schublade .na-scrim { display: block; position: fixed; inset: 0; background: var(--v3-ink); opacity: .4; z-index: 55; }
  html[data-ui="neu"] .na-zu { display: grid; }
  html[data-ui="neu"] .na-handy {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--v3-card); border-top: 1px solid var(--v3-line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  html[data-ui="neu"] .na-handy a,
  html[data-ui="neu"] .na-handy button {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; font: 600 11.5px/1.2 var(--v3-font);
    color: var(--v3-ink2); background: none; border: 0; padding: 6px 2px; border-radius: 10px; cursor: pointer; text-decoration: none;
  }
  html[data-ui="neu"] .na-handy a.na-an { color: var(--v3-brand); }
  html[data-ui="neu"] .na-handy .na-i { width: 22px; height: 22px; }
  html[data-ui="neu"] .na-handy .na-punktzahl { top: 0; right: calc(50% - 22px); }
  html[data-ui="neu"] .na-haupt { padding-bottom: 68px; }
  /* „Frag Claude“ schwebt über der Handy-Leiste, nicht auf ihr (sonst verdeckt er „Menü“). */
  html[data-ui="neu"] .assistant-dock { bottom: calc(76px + env(safe-area-inset-bottom)); right: var(--v3-s-12); }
  html[data-ui="neu"] .assistant-dock-panel { bottom: calc(140px + env(safe-area-inset-bottom)); }
}

@media (max-width: 600px) {
  html[data-ui="neu"] .na-kopf { padding: 0 var(--v3-s-16); gap: 10px; }
  html[data-ui="neu"] .na-inhalt { padding: 22px var(--v3-s-16) 32px; }
  html[data-ui="neu"] .na-suche kbd { display: none; }

  html[data-ui="neu"] .na-suche input { padding-right: var(--v3-s-12); }
  html[data-ui="neu"] .na-kopf .na-glocke,
  html[data-ui="neu"] .na-kopf .na-thema { display: none; }
  html[data-ui="neu"] .na-modus { float: none; display: flex; margin: 0 0 var(--v3-s-16); }
  html[data-ui="neu"] .na-modus a { flex: 1; text-align: center; padding: var(--v3-s-8) 6px; }
}