/* ============================================================================
   nova sales academy — Haupt-Stylesheet
   ----------------------------------------------------------------------------
   Design-System für die Academy-Landingpage und die Angebotsdetailseiten.
   Bewusst dunkler, klassisch-eleganter Look als Kontrast zur helleren
   vista-Welt (siehe /vista/). Klassennamen sind mit "na-" (nova academy)
   präfigiert, um Kollisionen mit den bestehenden "vista-"-Klassen im
   /vista/-Ordner zu vermeiden.

   Schriften: Serifenschrift "Playfair Display" für Überschriften,
   Sans-Serif "Inter" für Fließtext/Navigation — beides Platzhalter im
   Sinne des vista Style Manuals (Kap. 4, dort ausdrücklich als
   Empfehlung/Platzhalter markiert), bis lizenzierte Marken-Fonts vorliegen.
   ============================================================================ */

/* ---------- Lokal eingebettete Schriftarten (self-hosted, kein Google-Fonts-Request) ----------
   Quelle: Fontsource-Distribution (SIL Open Font License 1.1).
   Lizenztexte: /assets/fonts/LICENSE-inter.txt, /assets/fonts/LICENSE-playfair-display.txt */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/playfair-display-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/playfair-display-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/playfair-display-latin-500-italic.woff2") format("woff2");
}

/* ---------- Farbvariablen & Grundmaße ---------- */
:root {
  /* Kernfarben laut Briefing */
  --na-anthrazit: #191817;
  --na-anthrazit-alt: #24201D;
  --na-kupfer: #A97142;
  --na-kupfer-hell: #C68A56;
  --na-beige: #D5C6B8;
  --na-creme: #FCFAF7;
  --na-grau: #A6A6A3;

  /* Funktionale Aliase */
  --na-bg: var(--na-anthrazit);
  --na-bg-alt: var(--na-anthrazit-alt);
  --na-text: var(--na-creme);
  --na-text-muted: var(--na-beige);
  --na-text-soft: var(--na-grau);
  --na-border: rgba(213, 198, 184, 0.18);
  --na-border-strong: rgba(169, 113, 66, 0.55);

  /* Typografie */
  --na-font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --na-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Layout */
  --na-max-width: 1200px;
  --na-space-xs: 0.5rem;
  --na-space-sm: 1rem;
  --na-space-md: 2rem;
  --na-space-lg: 4rem;
  --na-space-xl: 7rem;
  --na-radius: 4px;
  --na-header-height: 76px;
}

/* ---------- Reset & Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--na-bg);
  color: var(--na-text-muted);
  font-family: var(--na-font-sans);
  font-size: 1.05rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--na-font-serif);
  color: var(--na-creme);
  line-height: 1.25;
  margin: 0 0 var(--na-space-sm);
  font-weight: 600;
}

h1 { font-size: clamp(2.1rem, 4.5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3 { font-size: 1.3rem; }

p { margin: 0 0 var(--na-space-sm); }

a { color: var(--na-kupfer-hell); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Sichtbare, konsistente Fokuszustände für Tastaturbedienung */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--na-kupfer-hell);
  outline-offset: 3px;
  border-radius: 2px;
}

.na-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.na-skip-link {
  position: absolute;
  left: var(--na-space-sm);
  top: -60px;
  background: var(--na-kupfer);
  color: var(--na-creme);
  padding: 0.75rem 1.25rem;
  border-radius: var(--na-radius);
  z-index: 1000;
  transition: top 0.2s ease;
}
.na-skip-link:focus { top: var(--na-space-sm); }

/* Banner ausschließlich für angebote/muster-vorschau.html — deutlich
   markiert, damit die Beispielinhalte nie mit einer echten Seite
   verwechselt werden können. */
.na-muster-banner {
  margin: 0;
  padding: 0.7rem var(--na-space-md);
  background: var(--na-kupfer);
  color: var(--na-creme);
  font-family: var(--na-font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
}

.na-container {
  max-width: var(--na-max-width);
  margin: 0 auto;
  padding: 0 var(--na-space-md);
}

@media (max-width: 640px) {
  .na-container { padding: 0 var(--na-space-sm); }
}

.na-eyebrow {
  font-family: var(--na-font-sans);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.8rem;
  color: var(--na-kupfer-hell);
  font-weight: 600;
  margin-bottom: var(--na-space-sm);
}

.na-lead {
  font-size: 1.2rem;
  color: var(--na-text);
  max-width: 62ch;
}

/* Wiederkehrendes Gehirnsymbol als kleiner Markenakzent (sparsam eingesetzt) */
.na-brain {
  width: 1.4em;
  height: 1.4em;
  display: inline-block;
  vertical-align: -0.3em;
  object-fit: contain;
}

.na-brain-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--na-space-sm);
  margin: var(--na-space-lg) 0;
  color: var(--na-border-strong);
}
.na-brain-divider::before,
.na-brain-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--na-border);
  max-width: 320px;
}
.na-brain-divider img { width: 28px; height: 28px; opacity: 0.85; }

/* Variante direkt unter dem Hero: gleicher Abstand oberhalb (zum Hero) wie
   unterhalb (zur folgenden Section) — siehe .na-section--tight-top, das
   den sonst sehr großzügigen Section-Innenabstand für "Über Myriam"
   gezielt verkleinert, damit der Trenner wirklich mittig zwischen beiden
   Abschnitten sitzt statt nah am Hero zu kleben. */
.na-brain-divider--hero-close { margin: var(--na-space-md) 0; }

/* ---------- Buttons ---------- */
.na-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--na-font-sans);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.01em;
  padding: 0.9rem 1.8rem;
  border-radius: var(--na-radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  line-height: 1.2;
}
.na-btn:hover { text-decoration: none; transform: translateY(-1px); }

.na-btn--primary {
  background: var(--na-kupfer);
  color: var(--na-creme);
  border-color: var(--na-kupfer);
}
.na-btn--primary:hover { background: var(--na-kupfer-hell); border-color: var(--na-kupfer-hell); }

.na-btn--secondary {
  background: transparent;
  color: var(--na-creme);
  border-color: var(--na-beige);
}
.na-btn--secondary:hover { background: rgba(213, 198, 184, 0.08); border-color: var(--na-creme); }

.na-btn--ghost {
  background: transparent;
  color: var(--na-kupfer-hell);
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
}
.na-btn--ghost:hover { color: var(--na-creme); }

.na-btn--disabled,
.na-btn[aria-disabled="true"] {
  background: transparent;
  color: var(--na-text-soft);
  border-color: var(--na-border);
  cursor: not-allowed;
  opacity: 0.75;
}
.na-btn--disabled:hover,
.na-btn[aria-disabled="true"]:hover { transform: none; text-decoration: none; }

/* ---------- Header / Navigation ---------- */
.na-header {
  position: sticky;
  top: 0;
  z-index: 500;
  height: var(--na-header-height);
  display: flex;
  align-items: center;
  background: rgba(25, 24, 23, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.na-header.is-scrolled {
  border-bottom-color: var(--na-border);
  background: rgba(25, 24, 23, 0.96);
}

.na-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--na-space-md);
  width: 100%;
}

.na-header__logo img { height: 42px; width: auto; }
.na-header__logo { display: flex; align-items: center; }

.na-nav {
  display: flex;
  align-items: center;
  gap: var(--na-space-md);
}

.na-nav__list {
  display: flex;
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.na-nav__list a {
  color: var(--na-beige);
  font-size: 0.95rem;
  font-weight: 500;
}
.na-nav__list a:hover { color: var(--na-creme); text-decoration: none; }

.na-header__cta { white-space: nowrap; }

.na-nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--na-border);
  color: var(--na-creme);
  border-radius: var(--na-radius);
  padding: 0.5rem 0.7rem;
  font-size: 1.1rem;
}

@media (max-width: 860px) {
  .na-nav__list { display: none; }
  .na-nav-toggle { display: inline-flex; }
  .na-header__cta span { display: none; }
  .na-header__cta { padding: 0.75rem 1rem; }
}

.na-nav--open .na-nav__list {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: var(--na-header-height);
  left: 0;
  right: 0;
  background: var(--na-anthrazit);
  border-bottom: 1px solid var(--na-border);
  padding: var(--na-space-md);
  gap: var(--na-space-sm);
}

/* ---------- Sections, allgemein ---------- */
.na-section {
  padding: var(--na-space-xl) 0;
}
.na-section--tight { padding: var(--na-space-lg) 0; }
.na-section--alt { background: var(--na-bg-alt); }
/* Nur der obere Innenabstand verkleinert (Bottom bleibt normal) — für
   Sections, denen bereits ein eigenes Trennelement direkt darüber genug
   Abstand zum vorherigen Abschnitt gibt (z. B. "Über Myriam" nach dem
   Gehirn-Trenner unter dem Hero). */
.na-section--tight-top { padding-top: var(--na-space-md); }

.na-section__head {
  max-width: 68ch;
  margin-bottom: var(--na-space-lg);
}
.na-section__head--center { margin-left: auto; margin-right: auto; text-align: center; }

/* Reveal-Animation beim Scrollen (dezent, respektiert reduced-motion) */
.na-reveal {
  opacity: 1;
  transform: none;
}
.has-js .na-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.has-js .na-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- Hero ---------- */
.na-hero {
  position: relative;
  /* Unten bewusst knapper als oben: der Gehirn-Trenner direkt danach
     (.na-brain-divider--hero-close) übernimmt den optischen Abschluss,
     der Hero soll nicht zusätzlich viel Leerraum vor ihm aufbauen. */
  padding: var(--na-space-xl) 0 var(--na-space-md);
  overflow: hidden;
}
/* Bricht die Section aus dem zentrierten, gepolsterten <main class="na-
   container"> heraus, sodass der Verlaufshintergrund randlos die komplette
   Bildschirmbreite füllt (statt wie zuvor auf 1200px begrenzt und dadurch
   "abgeschnitten" zu wirken). Der eigentliche Inhalt bleibt lesbar, weil
   direkt im HTML ein zusätzlicher .na-container um .na-hero__grid liegt,
   der die gewohnte Breite/Zentrierung/Außenabstände wiederherstellt. */
.na-hero--full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.na-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 78% 15%, rgba(169, 113, 66, 0.16), transparent 55%),
    radial-gradient(ellipse at 10% 90%, rgba(213, 198, 184, 0.06), transparent 60%);
  pointer-events: none;
}

.na-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--na-space-lg);
  align-items: center;
}

@media (max-width: 900px) {
  .na-hero__grid { grid-template-columns: 1fr; }
  .na-hero__media { order: -1; }
}

.na-hero__leitsatz {
  font-family: var(--na-font-serif);
  font-style: italic;
  /* Größer als die erste Korrektur, aber weiterhin mit begrenztem
     vw-Anteil: die Hero-Textspalte ist durch --na-max-width nach oben
     begrenzt (bleibt auf breiten Bildschirmen konstant schmal). Wert
     anhand tatsächlicher Textbreite beider Sätze kalibriert, damit
     "Ich sage Dir nicht, was Du hören willst." und "Ich sage Dir, was
     Dich weiterbringt." bei üblichen Desktop-Breiten weiterhin jeweils
     in eine Zeile passen. */
  font-size: clamp(1.3rem, 2.4vw, 1.95rem);
  color: var(--na-creme);
  line-height: 1.38;
  margin: var(--na-space-sm) 0 var(--na-space-md);
  white-space: normal;
}
.na-hero__leitsatz span { color: var(--na-kupfer-hell); }

.na-hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: var(--na-space-md);
}

.na-hero__media {
  position: relative;
}

/* Bild-Platzhalter — klar erkennbar, aber hochwertig gestaltet */
.na-photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  aspect-ratio: 4 / 5;
  border: 1px dashed var(--na-border-strong);
  border-radius: var(--na-radius);
  background: linear-gradient(155deg, rgba(213,198,184,0.06), rgba(169,113,66,0.05));
  color: var(--na-text-soft);
  text-align: center;
  padding: var(--na-space-md);
}
.na-photo-placeholder svg { width: 40px; height: 40px; opacity: 0.6; }
.na-photo-placeholder__label {
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  max-width: 22ch;
}

.na-photo-placeholder--wide { aspect-ratio: 16 / 10; }
.na-photo-placeholder--square { aspect-ratio: 1 / 1; }

/* Sujet-Bild statt leerem Platzhalter: dieselbe Fläche (Seitenverhältnis,
   Ecken-Radius), aber ohne gestrichelten Rand/Verlauf/Icon — stattdessen
   ein echtes Bild, formatfüllend zugeschnitten. */
.na-photo-placeholder--filled {
  display: block;
  border-style: solid;
  border-color: var(--na-border);
  background: none;
  padding: 0;
  overflow: hidden;
}
.na-photo-placeholder--filled img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Vertrauensanker (jetzt Teil von "Über Myriam", unter dem
   Portraitbild) ---------- */
.na-trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--na-space-md);
}

/* Feste 2x2-Anordnung unter dem Portraitbild (Nutzervorgabe), statt der
   auto-fit-Variante von .na-trust. Fällt auf sehr schmalen Bildschirmen
   auf eine Spalte zurück (siehe Media Query unten). */
.na-trust--2x2 {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--na-space-sm);
  margin-top: var(--na-space-lg);
}
@media (max-width: 480px) {
  .na-trust--2x2 { grid-template-columns: 1fr; }
}

.na-trust__item {
  padding: var(--na-space-md);
  border: 1px solid var(--na-border);
  border-radius: var(--na-radius);
  background: rgba(213, 198, 184, 0.03);
}
.na-trust--2x2 .na-trust__item { padding: 1.1rem; }
.na-trust__item img { margin-bottom: var(--na-space-sm); }
/* Größer als die Standard-Akzentgröße (.na-brain: 1.4em) — in den
   Vertrauensanker-Kacheln ist das Gehirnsymbol ein eigenständiges visuelles
   Element, kein Mini-Icon neben Fließtext. */
.na-trust__item .na-brain { width: 2.2rem; height: 2.2rem; }
.na-trust__item h3 {
  font-family: var(--na-font-sans);
  font-size: 1rem;
  color: var(--na-creme);
  margin-bottom: 0.4rem;
}
.na-trust__item p { font-size: 0.92rem; margin: 0; color: var(--na-text-soft); }

/* ---------- Über Myriam ---------- */
.na-about__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--na-space-lg);
  align-items: start;
}
@media (max-width: 900px) {
  .na-about__grid { grid-template-columns: 1fr; }
}

.na-about__portrait { position: sticky; top: calc(var(--na-header-height) + 1.5rem); }
@media (max-width: 900px) { .na-about__portrait { position: static; } }

.na-about__rolle {
  font-family: var(--na-font-sans);
  font-weight: 600;
  color: var(--na-kupfer-hell);
  font-size: 0.95rem;
  margin-top: var(--na-space-sm);
  text-align: center;
}

.na-pull-quote {
  font-family: var(--na-font-serif);
  font-style: italic;
  font-size: 1.35rem;
  color: var(--na-creme);
  border-left: 2px solid var(--na-kupfer);
  padding-left: var(--na-space-md);
  margin: var(--na-space-md) 0;
}

.na-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem 1.5rem;
  list-style: none;
  margin: var(--na-space-md) 0;
  padding: 0;
  font-size: 0.92rem;
  color: var(--na-text-soft);
}
.na-facts li { display: flex; gap: 0.5rem; }
.na-facts li::before { content: "—"; color: var(--na-kupfer); flex-shrink: 0; }
@media (max-width: 560px) { .na-facts { grid-template-columns: 1fr; } }

/* ---------- Entstehung / Prinzipien ----------
   Die vier Prinzipien in Abschnitt E ("Entstehung der nova sales academy")
   nutzen bewusst dieselben Kartenklassen wie die Vertrauensanker unter
   "Über Myriam" (.na-trust / .na-trust--2x2 / .na-trust__item, siehe oben)
   — gleiches 2x2-Kartenformat, hier für Prinzipien statt Credentials.
   Ein zusätzliches Utility für den maximalen Breitenrahmen dieser
   Instanz: */
.na-prinzipien-grid { }

/* ---------- Angebote ---------- */
.na-angebote-kategorie {
  margin-bottom: var(--na-space-lg);
}
.na-angebote-kategorie__label {
  font-family: var(--na-font-sans);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.82rem;
  color: var(--na-text-soft);
  margin-bottom: var(--na-space-sm);
}

.na-angebot-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--na-space-lg);
  align-items: center;
  padding: var(--na-space-lg);
  border: 1px solid var(--na-border-strong);
  border-radius: var(--na-radius);
  background: linear-gradient(160deg, rgba(169,113,66,0.09), rgba(213,198,184,0.03));
  margin-bottom: var(--na-space-lg);
}
@media (max-width: 860px) {
  .na-angebot-featured { grid-template-columns: 1fr; padding: var(--na-space-md); }
}

.na-angebot-featured__vista-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: var(--na-beige);
  margin-bottom: var(--na-space-sm);
}
.na-angebot-featured__vista-link img { width: 18px; height: 18px; }

/* Kasten um die Themenkurs-Kacheln — bewusst derselbe Rahmen/Hintergrund
   wie .na-angebot-featured (vista-Box), damit beide Kategorien optisch
   als gleichwertige "Kästen" wirken. */
.na-kurse-box {
  padding: var(--na-space-lg);
  border: 1px solid var(--na-border-strong);
  border-radius: var(--na-radius);
  background: linear-gradient(160deg, rgba(169, 113, 66, 0.09), rgba(213, 198, 184, 0.03));
  margin-bottom: var(--na-space-lg);
}
@media (max-width: 860px) {
  .na-kurse-box { padding: var(--na-space-md); }
}

/* Vier gleich große Kacheln (2x2 auf Desktop, einspaltig ab 720px). Höhe
   passt sich dem Inhalt an (Badge, Gehirn, Preis, Titel, Nutzenversprechen,
   "Kurs entdecken"), CSS-Grid gleicht die Zeilenhöhe automatisch aus. */
.na-kurse-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--na-space-lg);
}
@media (max-width: 720px) {
  .na-kurse-grid { grid-template-columns: 1fr; }
}

.na-kurse-kachel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  min-height: 15rem;
  padding: var(--na-space-lg) var(--na-space-md) var(--na-space-md);
  border: 1px dashed var(--na-border-strong);
  border-radius: var(--na-radius);
  background: linear-gradient(155deg, rgba(213, 198, 184, 0.06), rgba(169, 113, 66, 0.05));
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
/* Rand deutlich hervorheben (durchgezogen + Kupfer-Ton) und Fläche leicht
   aufhellen. Bewusst KEINE Unterstreichung beim Hover (überschreibt die
   globale a:hover-Regel) — Randfarbe, Aufhellung und der Mauszeiger als
   Link reichen als Hover-Hinweis. */
a.na-kurse-kachel:hover,
a.na-kurse-kachel:focus-visible {
  border-style: solid;
  border-color: var(--na-kupfer-hell);
  background: linear-gradient(155deg, rgba(213, 198, 184, 0.11), rgba(169, 113, 66, 0.1));
  transform: translateY(-2px);
  text-decoration: none;
}
.na-kurse-kachel .na-brain { width: 2.2rem; height: 2.2rem; }
.na-kurse-kachel svg { width: 34px; height: 34px; opacity: 0.6; }
.na-kurse-kachel h3 { margin: 0; font-size: 1.05rem; }
.na-kurse-kachel__nutzen {
  margin: 0;
  font-size: 0.88rem;
  color: var(--na-text-soft);
  /* Bewusst kein enges max-width mehr: die volle Kachelbreite nutzen, damit
     längere Nutzenversprechen in 1-2 Zeilen passen. -webkit-line-clamp
     bleibt als Sicherheitsnetz für außergewöhnlich lange Texte bestehen,
     sollte aber im Normalfall nicht mehr greifen. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.na-kurse-kachel__preis {
  font-family: var(--na-font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--na-creme);
  margin: 0.2rem 0 0;
}
.na-kurse-kachel__cta {
  margin-top: 0.4rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--na-border);
  width: 100%;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--na-kupfer-hell);
}
.na-kurse-kachel--platzhalter p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--na-text-soft);
  font-style: italic;
}

.na-karte__untertitel {
  font-size: 0.9rem;
  color: var(--na-kupfer-hell);
  margin-bottom: 0.6rem;
}

.na-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.25rem 0.6rem;
  border-radius: 100px;
  border: 1px solid var(--na-border-strong);
  color: var(--na-beige);
  margin-bottom: 0.75rem;
}


/* ---------- Referenzen ---------- */
.na-referenzen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--na-space-md);
}

.na-referenz-karte {
  padding: var(--na-space-md);
  border: 1px dashed var(--na-border-strong);
  border-radius: var(--na-radius);
  background: rgba(213, 198, 184, 0.02);
  display: flex;
  flex-direction: column;
  gap: var(--na-space-sm);
}
.na-referenz-karte__zitat {
  font-family: var(--na-font-serif);
  font-style: italic;
  color: var(--na-text);
  flex-grow: 1;
}
.na-referenz-karte__person {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.na-referenz-karte__avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(169,113,66,0.15);
  border: 1px solid var(--na-border-strong);
  flex-shrink: 0;
}
.na-referenz-karte__name { font-size: 0.9rem; color: var(--na-creme); font-weight: 600; }
.na-referenz-karte__rolle { font-size: 0.82rem; color: var(--na-text-soft); }
.na-referenz-hinweis {
  margin-top: var(--na-space-md);
  font-size: 0.85rem;
  color: var(--na-text-soft);
  font-style: italic;
}

/* ---------- vista-Übergang (bewusst hellerer Abschnitt) ---------- */
.na-vista-uebergang {
  background: linear-gradient(180deg, var(--na-anthrazit) 0%, var(--na-beige) 100%);
  padding-top: var(--na-space-xl);
  padding-bottom: 0;
}
.na-vista-uebergang__inner {
  background: var(--na-creme);
  border-radius: var(--na-radius) var(--na-radius) 0 0;
  padding: var(--na-space-xl) var(--na-space-md) var(--na-space-lg);
  text-align: center;
}
.na-vista-uebergang__inner .na-eyebrow { color: var(--na-kupfer); }
.na-vista-uebergang__inner h2 { color: var(--na-anthrazit); }
.na-vista-uebergang__inner p {
  color: #5A5A5A;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}
.na-vista-uebergang__inner .na-btn--primary { margin-top: var(--na-space-sm); }
.na-vista-uebergang__meta {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  padding: 0;
  margin: var(--na-space-sm) 0 0;
  font-size: 0.85rem;
  color: #5A5A5A;
}

/* ---------- Persönlicher Abschluss ---------- */
.na-abschluss {
  text-align: center;
  padding: var(--na-space-xl) 0;
}
.na-abschluss__gedanke {
  font-family: var(--na-font-serif);
  font-style: italic;
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--na-creme);
  max-width: 46ch;
  margin: 0 auto var(--na-space-lg);
}
.na-abschluss__cta-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}

/* ---------- Footer ---------- */
.na-footer {
  border-top: 1px solid var(--na-border);
  padding: var(--na-space-lg) 0 var(--na-space-md);
  background: var(--na-bg-alt);
}
.na-footer__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: var(--na-space-lg);
  margin-bottom: var(--na-space-lg);
}
@media (max-width: 760px) {
  .na-footer__grid { grid-template-columns: 1fr; gap: var(--na-space-md); }
}
.na-footer__logo img { height: 46px; margin-bottom: var(--na-space-sm); }
.na-footer__desc { font-size: 0.9rem; color: var(--na-text-soft); max-width: 40ch; }
.na-footer__heading {
  font-family: var(--na-font-sans);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.8rem;
  color: var(--na-text-soft);
  margin-bottom: var(--na-space-sm);
}
.na-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.na-footer__list a { color: var(--na-beige); font-size: 0.92rem; }
.na-footer__bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-top: var(--na-space-md);
  border-top: 1px solid var(--na-border);
  font-size: 0.82rem;
  color: var(--na-text-soft);
}
.na-footer__platzhalter-hinweis {
  font-size: 0.78rem;
  color: var(--na-text-soft);
  font-style: italic;
  margin-top: 0.4rem;
}

/* ============================================================================
   Angebotsdetailseiten
   Struktur: Hero (Text links, Buchungsbox rechts) → Kommt Dir das bekannt
   vor? → Was sich für Dich verändert → beim vista-Angebot zusätzlich eine
   Reihe optionaler, ausführlicherer Abschnitte (siehe Felddokumentation in
   assets/js/angebote-daten.js). Siehe docs/STRUKTUR.md.
   ============================================================================ */
.na-detail-hero {
  padding: calc(var(--na-space-xl) * 0.7) 0 var(--na-space-lg);
  border-bottom: 1px solid var(--na-border);
}
.na-breadcrumb {
  font-size: 0.85rem;
  color: var(--na-text-soft);
  margin-bottom: var(--na-space-md);
}
.na-breadcrumb a { color: var(--na-text-soft); }

.na-lead--soft { color: var(--na-text-soft); }

/* Zweispaltiger Hero (Text/Buchungsbox), dieselbe Grundidee wie
   .na-hero__grid auf der Startseite. Auf schmalen Bildschirmen rutscht die
   Buchungsbox unter den Text (normale Quellreihenfolge, kein Reordering —
   die Headline soll zuerst gelesen werden). */
.na-detail-hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--na-space-lg);
  align-items: start;
}
@media (max-width: 900px) {
  .na-detail-hero__grid { grid-template-columns: 1fr; }
}
.na-detail-hero__media { position: relative; }

#na-d-hero-cta-wrap:not(:empty) { margin-top: var(--na-space-md); }
#na-d-hinweis-wrap:not(:empty) { margin-top: var(--na-space-md); }

/* Reihe aus einem oder mehreren CTA-Kästen (z. B. vista-Test + Warteliste
   nebeneinander, je mit eigenem Button und eigenem Begleitsatz). */
.na-detail-hinweis {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Wiederverwendbarer Kasten um einen einzelnen CTA-Button samt kurzem
   Begleittext — sorgt dafür, dass ein Call-to-Action optisch klar als
   solcher zu erkennen ist. Wird sowohl im Hero (innerhalb
   .na-detail-hinweis) als auch einzeln (z. B. beim vista-Test-Promo)
   verwendet. */
.na-cta-box {
  flex: 1 1 220px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  padding: var(--na-space-sm) var(--na-space-md);
  border: 1px solid var(--na-border);
  border-radius: var(--na-radius);
  background: rgba(213, 198, 184, 0.03);
}
.na-cta-box p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--na-text-soft);
}

/* Der Inhaltsbereich unter dem Hero ist seit dem Umzug der Buchungsbox in
   den Hero einspaltig (keine Sidebar mehr). */
.na-detail-main { max-width: 68ch; }

.na-detail-block {
  padding: var(--na-space-lg) 0;
  border-bottom: 1px solid var(--na-border);
}
.na-detail-block:last-child { border-bottom: none; }

/* Echte Zwischenüberschrift statt kleiner Eyebrow-Beschriftung — vorher
   kleiner als der eigentliche Fließtext darunter, was falsch wirkte. */
.na-detail-block__label {
  font-family: var(--na-font-serif);
  font-weight: 600;
  font-style: normal;
  text-transform: none;
  letter-spacing: normal;
  font-size: clamp(1.2rem, 1.6vw, 1.45rem);
  color: var(--na-creme);
  margin-bottom: var(--na-space-sm);
}

.na-details-folgen-hinweis {
  color: var(--na-text-soft);
  font-style: italic;
  margin: 0;
}

/* "Kommt Dir das bekannt vor?" — das freigestellte Gehirnsymbol dient hier
   sparsam als Aufzählungszeichen, statt eines gewöhnlichen Bullets. */
.na-situationen-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.na-situationen-liste__item {
  position: relative;
  padding-left: 1.8rem;
  font-size: 0.98rem;
  color: var(--na-text);
}
.na-situationen-liste__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.1em;
  height: 1.1em;
  background: url("../img/brain-icon.png") center / contain no-repeat;
  opacity: 0.85;
}

/* "Was sich für Dich verändert" — schlichter Strich-Bullet, wie an anderen
   Stellen der Seite (.na-facts), damit das Gehirnsymbol ein besonderes
   Aufzählungszeichen bleibt statt überall wiederzukehren. */
.na-ergebnisse-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.na-ergebnisse-liste__item {
  display: flex;
  gap: 0.6rem;
  font-size: 0.98rem;
  color: var(--na-text);
}
.na-ergebnisse-liste__item::before { content: "—"; color: var(--na-kupfer); flex-shrink: 0; }

/* ---------- Zusätzliche, aktuell nur bei vista befüllte Abschnitte ---------- */

/* Zwischentext, "Warum ein Coaching..."-Text: normaler Fließtext, keine
   eigenen Regeln nötig (erbt von p / .na-detail-block). */

/* vista-Test-Promo: nutzt .na-facts (siehe unten) für die vier
   Erfolgsstrategien; der Kasten (.na-cta-box, siehe oben) umschließt NUR
   den CTA-Button, damit er klar als Handlungsaufforderung erkennbar ist.
   Der kurze Begleittext (ctaHinweis) steht bewusst AUSSERHALB des
   Kastens, direkt darunter. */
.na-cta-box-fussnote {
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
  color: var(--na-text-soft);
}

/* Abschluss-CTA ganz am Seitenende: zentrierter Buchungs-Button ohne
   umgebenden Fließtext. */
.na-detail-block--abschluss-cta { text-align: center; }

/* "So entsteht Transformation" — nummerierte Schrittliste, ähnlich
   aufgebaut wie die frühere .na-module-liste, aber unter neuem Namen und
   nur für den optionalen "prozess"-Abschnitt verwendet. */
.na-prozess-liste {
  list-style: none;
  counter-reset: na-prozess;
  margin: 0 0 var(--na-space-md);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--na-space-sm);
}
.na-prozess-liste__item {
  counter-increment: na-prozess;
  position: relative;
  padding-left: 2.1rem;
}
.na-prozess-liste__item::before {
  content: counter(na-prozess) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--na-font-serif);
  font-weight: 600;
  color: var(--na-kupfer-hell);
}
.na-prozess-liste__titel {
  display: block;
  font-family: var(--na-font-sans);
  font-weight: 600;
  color: var(--na-creme);
  margin-bottom: 0.2rem;
}
.na-prozess-liste__item p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--na-text-soft);
}

/* Arbeitsfelder- und Zielgruppen-Listen nutzen .na-facts (bereits oben im
   Stylesheet definiert) für ein konsistentes, kompaktes Listenbild. */

/* Zentrierte Variante von .na-pull-quote für den abschließenden Leitsatz
   am Ende der Seite. */
.na-pull-quote--center {
  text-align: center;
  border-left: none;
  padding-left: 0;
  max-width: 44ch;
  margin-left: auto;
  margin-right: auto;
}

/* Hinweis: Die frühere "Kursinhalte"-Modulliste (.na-module-liste) und die
   eigene "Format & Leistungsumfang"-Liste (.na-leistungsumfang) wurden auf
   Nutzerwunsch als eigene Abschnitte entfernt. Die zugehörigen Daten
   (module, leistungsumfang) bleiben in angebote-daten.js erhalten;
   leistungsumfang fließt weiterhin in die Fakten der Buchungsbox
   (.na-booking-box__fakten) ein.

   Buchungsbox — steht jetzt oben rechts im Hero statt in einer separaten
   Seitenleiste. */
.na-booking-box {
  position: sticky;
  top: calc(var(--na-header-height) + 1.5rem);
  border: 1px solid var(--na-border-strong);
  border-radius: var(--na-radius);
  padding: var(--na-space-md);
  background: rgba(169, 113, 66, 0.06);
}
.na-booking-box__titel {
  font-family: var(--na-font-sans);
  font-weight: 600;
  color: var(--na-creme);
  font-size: 0.95rem;
  margin: 0 0 0.4rem;
}
.na-booking-box__preis {
  font-family: var(--na-font-serif);
  font-size: 1.5rem;
  color: var(--na-creme);
  margin-bottom: 0.25rem;
}
.na-booking-box__preis-hinweis {
  font-size: 0.82rem;
  color: var(--na-text-soft);
  margin-bottom: var(--na-space-sm);
}
.na-booking-box__sicherheitshinweis { margin-top: var(--na-space-sm); }
.na-booking-box__fakten {
  list-style: none;
  margin: 0 0 var(--na-space-sm);
  padding: 0;
  font-size: 0.85rem;
  color: var(--na-text-soft);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.na-booking-box__hinweis {
  font-size: 0.92rem;
  color: var(--na-text-soft);
  margin: 0;
}
.na-booking-box .na-btn { width: 100%; margin-top: 0.5rem; }
.na-booking-box__status {
  display: inline-block;
  font-size: 0.78rem;
  padding: 0.2rem 0.6rem;
  border-radius: 100px;
  border: 1px solid var(--na-border-strong);
  color: var(--na-beige);
  margin-bottom: var(--na-space-sm);
}

@media (max-width: 900px) {
  .na-booking-box { position: static; margin-top: var(--na-space-md); }
}

/* ============================================================================
   Rechtstexte / einfache Contentseiten (Impressum, Datenschutz)
   ============================================================================ */
.na-legal {
  padding: var(--na-space-xl) 0;
  max-width: 72ch;
  margin: 0 auto;
}
.na-legal h2 { margin-top: var(--na-space-lg); }
.na-legal .na-platzhalter {
  border: 1px dashed var(--na-border-strong);
  border-radius: var(--na-radius);
  padding: var(--na-space-sm) var(--na-space-md);
  color: var(--na-text-soft);
  font-style: italic;
  font-size: 0.92rem;
}

/* ============================================================================
   Einfache Formulare (z. B. Warteliste)
   ============================================================================ */
.na-form { max-width: 32rem; }
.na-form__feld {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: var(--na-space-md);
}
.na-form__feld label {
  font-family: var(--na-font-sans);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--na-creme);
}
.na-form__feld input[type="text"],
.na-form__feld input[type="email"] {
  font-family: var(--na-font-sans);
  font-size: 0.95rem;
  color: var(--na-creme);
  background: rgba(213, 198, 184, 0.04);
  border: 1px solid var(--na-border);
  border-radius: var(--na-radius);
  padding: 0.65rem 0.8rem;
}
.na-form__feld input[type="text"]:focus-visible,
.na-form__feld input[type="email"]:focus-visible {
  outline: 2px solid var(--na-kupfer-hell);
  outline-offset: 1px;
}
.na-form__hint { font-size: 0.82rem; color: var(--na-text-soft); }
.na-form__checkbox-zeile {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}
.na-form__checkbox-zeile input[type="checkbox"] {
  margin-top: 0.2rem;
  flex-shrink: 0;
}
.na-form__checkbox-zeile label {
  font-family: var(--na-font-sans);
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--na-text-soft);
}
.na-form__checkbox-zeile a { color: var(--na-kupfer-hell); }
.na-form__fehler {
  border: 1px solid var(--na-border-strong);
  border-radius: var(--na-radius);
  padding: var(--na-space-sm) var(--na-space-md);
  color: var(--na-kupfer-hell);
  font-size: 0.9rem;
  margin-bottom: var(--na-space-md);
}
/* Honeypot-Feld gegen Spam-Bots: für Menschen unsichtbar, aber weiterhin im
   Layout vorhanden (kein display:none, das manche Bots erkennen). */
.na-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}