/* ===================================================================================
   NIS2-Produktseite.

   EIGENE DATEI UND KEIN ANHANG AN styles.css - aus zwei Gruenden:

   1. styles.css ist das Stilblatt der ANWENDUNG (1300 Zeilen Cockpit, Lieferanten,
      Verwaltung). Eine oeffentliche Seite, die davon abhaengt, laedt fuer nichts.
   2. Die Anwendung wird taeglich angefasst. Eine Produktseite, die bei jeder
      Cockpit-Aenderung mitwackelt, ist die Sorte Kopplung, die man erst bemerkt,
      wenn die Marketingseite kaputt ist.

   Was sie sich TEILT: die Farb- und Schrifttoken aus dem TOMORIS-Tokenpaket. Zwei
   Farbsaetze im selben Haus sind ein Glaubwuerdigkeitsproblem, keine Geschmacksfrage.
   Deshalb steht hier kein einziger Farbhartwert - nur var(--tm-*) beziehungsweise die
   in styles.css darauf gelegten Namen.

   KEIN externes CDN, keine Fremdschrift: Nunito Sans liegt unter /fonts.
=================================================================================== */

.n2-top {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px clamp(16px, 4vw, 48px);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.n2-mark {
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--head);
  text-decoration: none;
  font-size: 1.02rem;
}
.n2-mark .accent { color: var(--orange); }

.n2-nav { display: flex; gap: 18px; flex-wrap: wrap; margin-left: auto; }
.n2-nav a { color: var(--ink-2); text-decoration: none; font-size: .9rem; font-weight: 600; }
.n2-nav a:hover { color: var(--pulse-text); text-decoration: underline; }

main { display: block; }

.n2-hero,
.n2-block {
  max-width: 940px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px) clamp(16px, 4vw, 48px);
}

.n2-hero { padding-bottom: clamp(20px, 3vw, 32px); }

/* Versalien in den Ueberschriften - TOMORIS-Vorgabe. Die H1 bleibt gemischt: ein
   ganzer Fragesatz in Grossbuchstaben liest sich schlechter, und diese H1 IST ein
   Fragesatz. Die Vorgabe gilt der Wirkung, nicht dem Buchstaben. */
.n2-hero h1 {
  font-size: clamp(1.7rem, 4.2vw, 2.6rem);
  line-height: 1.15;
  margin: 0 0 14px;
  color: var(--head);
  max-width: 22ch;
}

.n2-block h2 {
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  text-transform: uppercase;
  letter-spacing: .045em;
  color: var(--head);
  margin: 0 0 12px;
}

.n2-block h3 {
  font-size: 1.02rem;
  color: var(--head);
  margin: 22px 0 8px;
}

.n2-lead { font-size: clamp(1rem, 1.9vw, 1.16rem); color: var(--ink-2); max-width: 62ch; margin: 0 0 20px; }
.n2-block p { max-width: 68ch; line-height: 1.6; color: var(--ink-2); }
.n2-klein { font-size: .85rem; color: var(--muted); margin-top: 12px; }

.n2-hinweis {
  font-size: .85rem;
  color: var(--muted);
  border-left: 2px solid var(--line-strong);
  padding-left: 12px;
  margin-top: 18px;
}

/* Der ehrliche Zwischenzustand: das Rechenwerk steht, der Betrieb fehlt. Bewusst KEINE
   Signalfarbe - das ist kein Fehler und keine Warnung, sondern eine Ankuendigung. */
.n2-bald {
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  background: var(--surface-2);
  padding: 14px 16px;
  margin: 16px 0 0;
  font-size: .92rem;
}

.n2-hebt { background: var(--surface-2); border-top: 1px solid var(--line-weak); border-bottom: 1px solid var(--line-weak); max-width: none; }
.n2-hebt > * { max-width: 940px; margin-left: auto; margin-right: auto; }

.n2-tat { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }

.n2-btn {
  display: inline-block;
  padding: 11px 20px;
  border-radius: 8px;
  background: var(--pulse);
  color: var(--pulse-ink);
  text-decoration: none;
  font-weight: 700;
  font-size: .94rem;
  border: 1px solid var(--pulse);
}
.n2-btn:hover { background: var(--pulse-hover); border-color: var(--pulse-hover); }
.n2-btn.ghost { background: transparent; color: var(--pulse-text); border-color: var(--line-strong); }
.n2-btn.ghost:hover { background: var(--hover); }

/* Sichtbarer Fokus. Ein Fokusring, der nur die Systemvorgabe erbt, verschwindet auf
   getoenten Flaechen - und diese Seite hat zwei davon. */
.n2-btn:focus-visible,
.n2-nav a:focus-visible,
.n2-mark:focus-visible {
  outline: 2px solid var(--pulse);
  outline-offset: 2px;
}

.n2-liste { margin: 0; }
.n2-liste dt { font-weight: 700; color: var(--head); margin-top: 16px; }
.n2-liste dd { margin: 4px 0 0; color: var(--ink-2); line-height: 1.6; max-width: 68ch; }

/* Die zwoelf Module. Eine ORDERED list, weil die Nummer fachlich ist - sie ist die
   Ordnung, in der das Produkt die Pflichten abarbeitet, und sie steht so auch im
   Modulkatalog des Rechenwerks. */
.n2-module { margin: 8px 0 0; padding-left: 1.4em; }
.n2-module li { margin: 14px 0; line-height: 1.55; }
.n2-m-name { font-weight: 700; color: var(--head); }
.n2-m-recht { font-size: .74rem; color: var(--muted); font-variant: small-caps; margin-left: 8px; }
.n2-m-text { display: block; color: var(--ink-2); font-size: .92rem; margin-top: 2px; max-width: 66ch; }

/* Der geplante Umfang steht NEBEN dem Zweck und ist der Grund, warum ein Modul in
   Vorbereitung trotzdem etwas aussagt. Er tritt zurueck, ohne zu verschwinden. */
.n2-m-umfang { display: block; color: var(--muted); font-size: .86rem; margin-top: 4px; max-width: 72ch; }

/* Die Kopfzeile ueber der Liste nennt die Katalogfassung und wie viele Module heute
   messen. Beide Zahlen sind erzeugt und nicht getippt - siehe MODULKATALOG-Marken. */
.n2-modul-stand { color: var(--muted); font-size: .88rem; margin: 10px 0 0; }

/* Diese Marke tragen genau die Module, die heute messen, und das ist der Punkt: der
   Besucher soll sehen, was schon misst und was nicht. Eine Seite, die alle zwoelf gleich
   aussehen laesst, verkauft elf Versprechen als Bestand. */
.n2-m-verfuegbar {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--pulse-soft);
  color: var(--pulse-text);
  border: 1px solid var(--pulse);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Das Gegenstueck zu "verfügbar", und es gibt es aus demselben Grund: die ABWESENHEIT
   eines Abzeichens ist kein Zustand. Ohne diese Marke sah ein geplantes Modul aus wie
   eines, bei dem jemand das Abzeichen vergessen hat - und der Auftrag verlangt, dass
   geplante Module ALS geplant erkennbar sind, nicht weggelassen und nicht als vorhanden.

   Bewusst zurueckhaltend: Rand und Schrift in den Ruhefarben, keine eigene Signalfarbe.
   Ein geplantes Modul ist keine Warnung, es ist nur noch nicht da. Keine neuen Farbwerte -
   beide Rollen stammen aus dem Tokenpaket (--tm-text-3, --tm-border-weak). */
.n2-m-geplant {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--muted);
  border: 1px dashed var(--line-weak);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Die dritte Frage je Modul: was brauche ich dafuer. Sie steht unter Zweck und Umfang,
   weil sie erst zaehlt, wenn die beiden ueberzeugt haben - aber sie steht DA, weil sie
   sonst als Erstes im Vertriebsgespraech gestellt wird. */
.n2-m-braucht {
  display: block;
  color: var(--ink-2);
  font-size: .86rem;
  margin-top: 4px;
  max-width: 72ch;
}
.n2-m-braucht b { color: var(--head); font-weight: 700; }

.n2-schritte { margin: 8px 0 0; padding-left: 1.4em; }
.n2-schritte li { margin: 14px 0; line-height: 1.6; color: var(--ink-2); max-width: 66ch; }
.n2-s-kopf { display: block; font-weight: 700; color: var(--head); }

.n2-fuss {
  border-top: 1px solid var(--line);
  padding: 20px clamp(16px, 4vw, 48px);
  text-align: center;
  font-size: .85rem;
}

/* ===================================================================================
   TOMORIS-LINIE (Auftrag TBRU 22.10.2026, BA-270): dieselbe Sprache wie die Startseite
   und TOMORIS Atlas. Kopfleiste und Einstieg stehen auf der Buehne, die Abschnitte auf der
   Flaeche; Ueberschriften in Satzschreibung, Knoepfe als Pillen. Weiter ohne Farbhartwert:
   nur Rollen des Pakets und deren Mischung. Der Schriftzug (.sc-lockup) kommt aus styles.css.
=================================================================================== */
.n2-top {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--core) 90%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--tm-stage-border) 30%, transparent);
  color: var(--stage-ink);
}
.n2-top .sc-lockup { font-size: inherit; }
.n2-nav a { color: var(--stage-2nd); font-weight: 700; padding: 7px 12px; border-radius: var(--tm-radius-pill); }
.n2-nav a:hover { color: var(--stage-ink); background: color-mix(in srgb, var(--stage-ink) 10%, transparent); text-decoration: none; }
.n2-nav a:focus-visible, .n2-top .sc-lockup:focus-visible { outline: 2px solid var(--orange-buehne); outline-offset: 2px; }

.n2-hero {
  max-width: none; position: relative; isolation: isolate; overflow: hidden; color: var(--stage-ink);
  padding: clamp(56px, 8vw, 104px) max(clamp(16px, 4vw, 48px), calc((100% - 940px) / 2)) clamp(48px, 6vw, 80px);
  background: var(--core);
}
.n2-hero::before {
  content: ""; position: absolute; inset: -20%; z-index: -1; pointer-events: none; filter: blur(28px);
  background:
    radial-gradient(38% 40% at 18% 28%, color-mix(in srgb, var(--tm-brand-2) 55%, transparent), transparent 70%),
    radial-gradient(30% 34% at 82% 70%, color-mix(in srgb, var(--tm-brand-3) 26%, transparent), transparent 72%);
}
.n2-hero h1 { color: var(--stage-ink); font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 1.06; letter-spacing: -.03em; max-width: 20ch; }
.n2-hero .n2-lead { color: var(--stage-2nd); }
.n2-hero .n2-klein { color: var(--stage-3rd); }

.n2-btn {
  border-radius: var(--tm-radius-pill); padding: 13px 22px; font-weight: 800; border: 1px solid transparent;
  background: linear-gradient(120deg, var(--tm-brand-2), color-mix(in srgb, var(--tm-brand-2) 55%, var(--tm-brand-3)));
  color: var(--tm-stage-ink);
  box-shadow: 0 14px 40px color-mix(in srgb, var(--tm-brand-2) 40%, transparent);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-slow) var(--ease), background var(--dur-fast) var(--ease);
}
.n2-btn:hover { transform: translateY(-2px); background: linear-gradient(120deg, var(--tm-brand-2), color-mix(in srgb, var(--tm-brand-2) 55%, var(--tm-brand-3))); border-color: transparent; }
.n2-btn.ghost { background: transparent; color: var(--pulse-text); border-color: var(--line-strong); box-shadow: none; }
.n2-btn.ghost:hover { background: var(--hover); border-color: var(--pulse); }
.n2-hero .n2-btn.ghost { color: var(--stage-ink); border-color: color-mix(in srgb, var(--stage-ink) 30%, transparent); }
.n2-hero .n2-btn.ghost:hover { background: color-mix(in srgb, var(--stage-ink) 10%, transparent); }
.n2-hero .n2-btn:focus-visible { outline-color: var(--orange-buehne); }

.n2-block h2 { text-transform: none; letter-spacing: -.02em; font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.12; margin-bottom: 16px; }
.n2-block h2::before {
  content: ""; display: block; width: 36px; height: 3px; border-radius: 3px; margin-bottom: 14px;
  background: linear-gradient(90deg, var(--tm-brand-2), var(--tm-brand-3));
}
.n2-block h3 { font-size: 1.12rem; }
.n2-liste dt { font-size: 1.02rem; }
.n2-hebt { background: var(--surface-2); }
/* Befund (auf main sichtbar): .n2-block h2 setzt margin: 0 0 12px und hob damit das zentrierende
   margin: auto aus .n2-hebt > * auf - die Ueberschrift stand am linken Rand, der Text 350 px weiter
   rechts. Jetzt traegt das Band die Einrueckung selbst und alle Kinder beginnen an derselben Kante. */
.n2-block.n2-hebt { padding-left: max(clamp(16px, 4vw, 48px), calc((100% - 940px) / 2)); padding-right: max(clamp(16px, 4vw, 48px), calc((100% - 940px) / 2)); }
.n2-block.n2-hebt > * { margin-left: 0; margin-right: 0; }
.n2-top .sc-lockup { text-transform: none; letter-spacing: normal; }
.n2-module { list-style: none; padding-left: 0; display: grid; gap: 10px; }
.n2-module li {
  margin: 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: calc(var(--radius) + 2px); background: var(--surface);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-slow) var(--ease);
}
.n2-module li:hover { border-color: var(--pulse); box-shadow: 0 18px 48px -28px color-mix(in srgb, var(--tm-brand-2) 50%, transparent); }
.n2-m-verfuegbar { background: var(--green-fill); color: var(--green-text); border-color: color-mix(in srgb, var(--green) 50%, transparent); text-transform: none; letter-spacing: 0; }
.n2-m-geplant { text-transform: none; letter-spacing: 0; }
.n2-schritte li::marker { color: var(--orange-text); font-weight: 800; }
.n2-fuss { font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace; font-size: 12px; letter-spacing: .04em; }

@media (prefers-reduced-motion: reduce) {
  .n2-btn { transition: none; }
}