/* hochzwei tech 2026 Rebrand: hochzwei Nachweisakte detail page.
 * Built on styles/core.css tokens (+ shared components from styles/index.css
 * and styles/security.css). No raw hex, so light/dark flips automatically.
 * No em-dashes or en-dashes. */

/* --- Sechs Fragen: zwei Spalten, nummerierte Zeilen ----------------------- */
.na-qs { counter-reset: naq; }
.na-qs--cont { counter-reset: naq 3; }   /* zweite Spalte zaehlt bei 04 weiter */
.na-qs li {
  counter-increment: naq;
  position: relative;
  padding-left: 2.4em;
  font-size: var(--fs-lead);
  line-height: 1.35;
  margin-bottom: var(--space-4);
}
.na-qs li::before {
  content: counter(naq, decimal-leading-zero);
  position: absolute; left: 0; top: 0.15em;
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: 2px; color: var(--c-brand);
}
.na-qs__foot { border-top: 1px solid var(--c-border); padding-top: var(--space-4); margin-top: var(--space-2); }

/* --- Pruefumfang: sieben Zeilen, Bereich / Risiko / Nachweis --------------
 * Bewusst nicht .compare: hier stehen keine zwei Optionen gegeneinander,
 * also auch kein hervorgehobener Us-Balken. */
/* Lesebreite begrenzen: der .container ist site-weit full-bleed
   (--container-max: 100%), ungebremst werden die Textspalten auf 1920px
   ueber 850px breit und die Zeilen unlesbar lang. */
.na-scope { border-top: 1px solid var(--c-border); }
.na-scope__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-4) var(--space-6);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--c-border);
  align-items: start;
}
.na-scope__area { font-weight: 700; line-height: var(--lh-head); }
.na-scope__area span {
  display: block;
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: 3px; color: var(--c-brand);
  font-weight: 400; margin-bottom: 0.35em;
}
.na-scope__risk { color: var(--c-text-muted); opacity: 0.9; }
.na-scope__proof { color: var(--c-text); }

/* --- Panels fuer Garantien und Grenzen ------------------------------------ */
.na-panel {
  display: flex; flex-direction: column; gap: var(--space-4);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  color: var(--c-text);
  padding: var(--space-6);
}
.na-panel .mono-label { color: var(--c-brand); }
.na-panel__title { font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-head); letter-spacing: -0.01em; }
.na-panel__note {
  border-top: 1px solid var(--c-border);
  padding-top: var(--space-4);
  font-size: var(--fs-body);
  color: var(--c-text-muted);
}

/* --- Grenzen: was nicht enthalten ist, mit Verweis ------------------------ */
/* Linke Spalte bewusst schmaler: sie traegt kurze Labels. Bei gleichen
   Anteilen entsteht im full-bleed Container eine Luecke zwischen dem Ende
   des linken Textes und dem Beginn der rechten Spalte. */
.na-limits { border-top: 1px solid var(--c-border); }
.na-limits__row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-3) var(--space-7);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--c-border);
}
.na-limits__who { color: var(--c-text-muted); }
/* Kopfzeile: die Headline positioniert, diese Zeile sagt, was die Spalten sind. */
.na-limits__row--head { padding-top: 0; }
.na-limits__row--head p {
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: 3px; text-transform: uppercase; color: var(--c-text-muted);
}

/* --- Ansprechpartner: eine .person-Karte auf Lesebreite ------------------- */
.na-owner { max-width: 860px; }

@media (max-width: 1024px) {
  .na-scope__row { grid-template-columns: 1fr 1fr; }
  .na-scope__proof { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .na-scope__row, .na-limits__row { grid-template-columns: 1fr; }
  .na-scope__proof { grid-column: auto; }
}