/* ---------------------------------------------------------------------------
   Spur B — „KI-Systeme für unternehmerisches Wissen"

   Additive Ebene über site.css. Diese Datei ergänzt, sie überschreibt nichts:
   jede Klasse trägt den Präfix `w-`, damit Spur A (Angebots-Keil) unter keinen
   Umständen mitverändert wird. site.css und site.js bleiben unberührt.

   Bewusste Abweichungen von Spur A — Vorgabe aus dem Briefing §7.1/§15.1:
   - kein Netzwerk-Canvas, keine Bewegung  (dort ausdrücklich als Antimuster benannt)
   - heller Grundton statt Night-Panels    (strategische Boutique statt Agentur)
   - mehr Weißraum, dünnere Linien, Lime nur noch als einzelner Marker
   Farben, Radien und Schriftgrößen kommen unverändert aus den Design-Tokens.
--------------------------------------------------------------------------- */

/* ---- Navigation ---------------------------------------------------------- */

/* Spur B trug bis zum 01.08.2026 fünf Navigationspunkte, darunter „Executive
   System" — lang genug, dass die Leiste unterhalb von ~1180px waagerecht
   überlief und `flex-shrink: 0` nötig war, damit der Block als Ganzes umbricht
   statt mitten im Punkt.
   Seit die drei Anwendungsfelder unter dem Sammelpunkt „Angebote" liegen, sind
   es vier Punkte wie auf Spur A und der Umbruch-Notbehelf ist weg. `w-nav`
   bleibt als Haken bestehen: die CTA-Beschriftung ist hier weiterhin länger,
   und die Klasse trennt Spur B sauber von Spur A auf `ueber-mich.html`, das
   diese Datei ebenfalls lädt. */
.nav.w-nav .nav-links > a { white-space: nowrap; }
.nav.w-nav .lockup-by { white-space: nowrap; }

@media (max-width: 1160px) {
  .nav.w-nav .nav-links { gap: 20px; font-size: 14px; }
}

/* ---- Rhythmus ------------------------------------------------------------ */

.w-section { padding: 0 var(--gutter); }
.w-section + .w-section { margin-top: 84px; }

/* Farbrhythmus — dieselbe Mechanik wie `.section.band` in site.css, nur für das
   Sektionsraster der Spur B. Der Sprungpunkt „Angebote" aus der Navigation
   landet dadurch auf einer sichtbar eigenen Fläche statt mitten im Fließtext. */
.w-section.band {
  background: var(--surface-tint);
  /* Außenabstand wie in site.css: ohne ihn beginnt die Farbfläche direkt an der
     Unterkante der Karten darüber. */
  margin-top: var(--space-16); padding-top: 84px; padding-bottom: 84px;
}
/* Aus einer Farbfläche heraus kostet derselbe Abstand wie hinein: 64px. Der
   Wert stand bis zum 18.08.2026 auf 0 — in der Annahme, die 84px Innenabstand
   der Bandunterkante reichten aus. Sie reichen nicht: die Fläche endet an ihrer
   Kante, und der nächste Abschnitt setzte direkt darauf auf. Auf `vorgehen.html`
   klebte so das dunkle Panel „Was ich nicht verspreche" an der Bandkante, auf
   vier weiteren Seiten der Spur B derselbe Fehler. Spur A hat ihn dort, wo er
   auftrat, mit `style="padding-top:56px"` je Abschnitt von Hand zugedeckt. */
.w-section.band + .w-section { margin-top: var(--space-16); }
.w-section.band + .w-section.band { margin-top: 0; padding-top: 0; }
.w-narrow { max-width: 720px; }
.w-mid { max-width: 860px; }

.w-rule { height: 1px; background: var(--border-hairline); border: 0; margin: 0; }

/* Feine Oberzeile über einem Abschnitt — ersetzt die farbigen Panels aus Spur A */
.w-head { max-width: 700px; margin-bottom: var(--space-8); }
.w-head .w-eyebrow { display: block; margin-bottom: var(--space-4); }
.w-head p { margin: var(--space-4) 0 0; }

.w-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-label);
}
.w-eyebrow-accent { color: var(--primary); }

/* ---- Kopfbereich --------------------------------------------------------- */

/* Dunkles Hero-Panel wie in Spur A. Bis zum 01.08.2026 ohne Netzwerk-Canvas,
   weil das Briefing §7.1 „generische Netzwerkvisualisierungen" ausschliesst —
   Peter hat die Einschränkung aufgehoben: das Motiv ist die Marke, nicht eine
   beliebige KI-Grafik, und es soll auf beiden Spuren gleich auftreten.
   Tiefe kommt jetzt aus Canvas, Ringen und der Glasfläche zusammen. */
.w-hero-dunkel {
  position: relative; overflow: hidden;
  background: var(--nws-night); border-radius: var(--radius-panel);
  padding: 66px 52px 58px; margin: var(--gutter) var(--gutter) 0;
  box-shadow: var(--shadow-hero);
}
/* Nur der Inhaltscontainer wird gehoben — NICHT `> *`: das würde auch das
   `position: absolute` der Ringe überschreiben, sie nähmen Platz ein und
   schöben den Text aus dem Panel heraus. */
.w-hero-dunkel canvas { position: absolute; inset: 0; z-index: 1; }
.w-hero-dunkel .w-hero-split { position: relative; z-index: 2; }
.w-hero-dunkel h1 { margin: 26px 0 var(--space-6); font-size: 46px; line-height: 1.05; letter-spacing: var(--tracking-display-serif); font-weight: var(--fw-display); color: #fff; }
.w-hero-dunkel .w-sub { color: var(--nws-on-dark); max-width: 34em; }
.w-hero-dunkel .w-eyebrow { color: var(--accent); }

.w-hero-split { display: grid; grid-template-columns: 1.32fr .68fr; gap: var(--space-10); align-items: center; }
.w-hero-split h1 { max-width: 13em; }

/* Einspaltiger Kopf ohne Beleg-Karte, randlos ueber die volle Fensterbreite —
   dieselbe Bauart wie `.hero` auf den anderen beiden Leistungsseiten
   (site.css, PLAN 1ar). Zum Anschalten und nicht in `.w-hero-dunkel` selbst:
   das Bauteil steht auf sieben Seiten, geaendert werden sollten nur die beiden
   Leistungsseiten `wissen/index.html` und `wissen/expertise-skalieren.html`.

   Das Zeilenmass von 720 px ist dasselbe wie bei `.hero .h1`, damit alle vier
   Leistungsseiten denselben Kopf haben. Zum `overflow-x: clip` am `body`, das
   den Ausbruch ueber `100vw` erst gefahrlos macht, siehe site.css. */
.w-hero-dunkel .w-hero-solo { position: relative; z-index: 2; }
.w-hero-solo h1 { max-width: 720px; }
.w-hero-dunkel.is-randlos {
  border-radius: 0; box-shadow: none;
  margin: 0; margin-left: calc(50% - 50vw);
  width: 100vw; padding: 66px 0 58px;
}
.w-hero-dunkel.is-randlos > .w-hero-solo {
  max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter);
}
/* Wenn rechts ein Diagramm steht statt eines schmalen Kastens, braucht die
   zweite Spalte deutlich mehr Platz. */
.w-hero-split.is-weit { grid-template-columns: 1fr .92fr; }
.w-hero-split.is-weit h1 { max-width: 11em; }

/* Der Kopfbereich ist auf allen Seiten gleich — bewusst. Am 01.08.2026 war
   kurz eine Variation drin (gespiegelte Spalten, wechselnde Ringe), um die
   Wiederholung der sechs Panels zu brechen. Sie wirkte nicht: der Kopf ist
   das Wiedererkennungszeichen, Abwechslung darin liest sich als Unruhe, nicht
   als Gestaltung. Wieder entfernt. Wenn die Monotonie erneut auffällt, gehört
   die Lösung in den Inhalt darunter, nicht in den Kopf. */

/* Der Kasten rechts im Hero — „Der Einstieg" */
.w-peek {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-md);
  padding: 24px;
}
.w-peek-note {
  margin: 20px 0 0; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: 12.5px; line-height: 1.55; color: var(--nws-on-dark-muted);
}

/* Auslöser-Liste als Checkliste auf dunklem Grund — zwei Spalten, damit acht
   Punkte nicht als acht Zeilen Fliesstext dastehen. */
.w-checkliste { display: grid; grid-template-columns: 1fr 1fr; gap: 15px var(--space-8); }
.w-checkliste .step { align-items: flex-start; font-size: 14.5px; line-height: 1.5; }
.w-checkliste .chk { margin-top: 1px; flex: 0 0 auto; }

.w-hero { padding: 72px var(--gutter) 0; }
.w-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--space-16); align-items: center; }
.w-hero h1 { margin: var(--space-5) 0 var(--space-6); font-size: 50px; line-height: 1.04; letter-spacing: var(--tracking-display-serif); font-weight: var(--fw-display); color: var(--text-heading); }
.w-hero .w-sub { margin: 0; font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--text-body); max-width: 30em; }
.w-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-8); }

/* `.w-hero-solo` stand hier als Kopf einer Unterseite „schmaler, ohne Grafik
   daneben" — 44 px, spaeter 34 px auf dem Telefon. Die Klasse ist nie in einem
   Auszeichnungstext aufgetaucht, in keiner Fassung; sie war ein Vorrat, der nie
   gebraucht wurde. Am 20.08.2026 hat der einspaltige Kopf der beiden
   Leistungsseiten den Namen uebernommen (oben, PLAN 1as) — er bedeutet jetzt
   genau eine Sache. Die beiden Waisen sind weg, weil sie sonst still die
   Schriftgroesse des neuen Kopfes gesetzt haetten: 44 statt 46 px, gefunden
   beim Nachmessen. */

/* ---- Ruhige Flächen ------------------------------------------------------ */

/* Wie .card-light, aber ohne Schatten — der Boutique-Ton lebt von der Hairline. */
.w-panel {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  padding: 28px;
}
.w-panel h3 { margin: 0 0 var(--space-3); font-size: var(--fs-h3); font-weight: var(--fw-bold); letter-spacing: var(--tracking-heading); color: var(--text-heading); }
.w-panel p { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body); }
.w-panel p + p { margin-top: var(--space-3); }

.w-panel-tint { background: var(--surface-tint); border-color: #dedcfa; }
/* Auf dunklem Grund trägt derselbe Innenabstand weniger weit: der Kasten hat
   keine Umgebung, in die er ausatmen kann. Deshalb 32 statt 28. */
.w-panel-ink { background: var(--nws-night); border-color: transparent; padding: 32px; }
.w-panel-ink h3 { color: #fff; }
.w-panel-ink p { color: var(--nws-on-dark); }

/* ---- Aufzählungen in Karten ---------------------------------------------- */

/* Ersetzt die inline gesetzten Listen, die vorher auf jeder Seite wiederholt
   wurden. Auf dunklem Grund die Variante `w-liste-dunkel`. */
.w-liste { margin: var(--space-4) 0 0; padding-left: 18px; font-size: var(--fs-body); line-height: 1.75; color: var(--text-body); }
.w-liste li { margin-bottom: var(--space-1); }
.w-liste li::marker { color: var(--primary); }
.w-liste-dunkel { color: var(--nws-on-dark); }
.w-liste-dunkel li::marker { color: var(--accent); }

/* ---- Anwendungsfelder (die Einstiegskarten) ------------------------------ */

.w-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
/* Die Dachseite zeigt vier Leistungen statt drei Anwendungsfelder. Zwei mal
   zwei statt vier nebeneinander: vier Spalten drücken die Karten so schmal,
   dass Überschrift und Zielgruppenzeile umbrechen und die Karte zerfällt. */
.w-fields.is-vier { grid-template-columns: repeat(2, 1fr); }
/* Seit dem 18.08. zeigt `/wissen/` zwei Anwendungsfelder statt drei — „Expertise
   skalieren" ist eines der vier Leistungsfelder der Dachseite und wurde hier
   ein zweites Mal referenziert (PLAN §1ak). Ohne diese Zeile stünden die zwei
   Karten in zwei von drei Spalten und liessen rechts eine Lücke.
   ACHTUNG: Diese Regel hat zwei Klassen und schlägt damit `.w-fields` in der
   1000-px-Umbruchregel weiter unten. Der Einspalter dort muss deshalb ebenfalls
   auf `.is-zwei` wiederholt werden — ohne das steht die Seite unter 400 px
   72 px über den Schirm hinaus (gefunden von `scripts/pruefe-umbruch.mjs`). */
.w-fields.is-zwei { grid-template-columns: repeat(2, 1fr); }
/* Die Nummer macht auf der Dachseite sichtbar, dass es genau vier sind — auf
   den Anwendungsfeldern von Spur B gibt es sie bewusst nicht. */
.w-field .w-nr {
  font-family: var(--font-mono); font-size: var(--fs-caption);
  letter-spacing: var(--tracking-label); color: var(--text-label);
  display: block; margin-bottom: var(--space-2);
}
.w-field {
  display: flex; flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  padding: 30px 28px;
  transition: border-color var(--dur-fast, .18s) ease, transform var(--dur-fast, .18s) ease;
}
.w-field:hover { border-color: var(--primary); transform: translateY(-2px); opacity: 1; }
.w-field .w-eyebrow { color: var(--primary); }
.w-field h3 { margin: var(--space-4) 0 var(--space-3); font-size: 22px; font-weight: var(--fw-bold); letter-spacing: var(--tracking-heading); color: var(--text-heading); }
.w-field .w-for { margin: 0 0 var(--space-4); font-size: 13px; color: var(--text-label); }
.w-field p { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body); }
.w-field .w-more { margin-top: auto; padding-top: var(--space-6); font-size: 13.5px; font-weight: var(--fw-semibold); color: var(--primary); }
.w-field .w-more::after { content: ' →'; }

/* ---- Auslöser-Liste („Trifft eines davon zu?") --------------------------- */

.w-triggers { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-8); margin: 0; padding: 0; list-style: none; }
.w-triggers li {
  position: relative;
  padding: 14px 0 14px 26px;
  font-size: 15px; line-height: 1.55; color: var(--text-body);
  border-bottom: 1px solid var(--border-hairline);
}
.w-triggers li::before {
  content: ''; position: absolute; left: 0; top: 22px;
  width: 7px; height: 7px; border-radius: 50%;
  border: 1.5px solid var(--primary);
}

/* ---- Gegenüberstellung (dokumentiert / nicht dokumentiert, vorher/nachher) */

.w-contrast { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.w-contrast ul { margin: var(--space-4) 0 0; padding-left: 18px; font-size: var(--fs-body); line-height: 1.75; color: var(--text-body); }
.w-contrast li { margin-bottom: var(--space-1); }
.w-contrast .w-side-a li::marker { color: var(--text-label); }
.w-contrast .w-side-b li::marker { color: var(--primary); }
.w-side-tag { display: block; margin-bottom: var(--space-2); font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.w-side-a .w-side-tag { color: var(--text-label); }
.w-side-b .w-side-tag { color: var(--primary); }

/* ---- Methodik: die fünf Phasen ------------------------------------------ */

.w-phases { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); }
.w-phase { position: relative; padding-top: 30px; }
.w-phase::before { content: ''; position: absolute; top: 7px; left: 0; right: 0; height: 1px; background: var(--border-hairline); }
.w-phase:last-child::before { right: 50%; }
.w-phase::after { content: ''; position: absolute; top: 3px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--nws-white); border: 2px solid var(--primary); }
.w-phase.is-goal::after { background: var(--accent); border-color: var(--accent); }
.w-phase .w-n { font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: var(--tracking-label); color: var(--text-label); }
.w-phase h3 { margin: var(--space-2) 0 var(--space-2); font-size: 15.5px; font-weight: var(--fw-bold); letter-spacing: var(--tracking-heading); color: var(--text-heading); }
.w-phase p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--text-body); }

/* ---- Fragen, die das System beantwortet --------------------------------- */

.w-qa { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.w-qa div {
  padding: 18px 20px;
  border-left: 2px solid var(--primary);
  background: var(--surface-card);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 14.5px; line-height: 1.55; color: var(--text-heading);
}

/* ---- Bausteine der Leistung (nummerierte Liste, ruhig) ------------------ */

.w-build { margin: 0; padding: 0; list-style: none; counter-reset: wb; }
.w-build li {
  counter-increment: wb;
  position: relative;
  padding: 16px 0 16px 44px;
  border-bottom: 1px solid var(--border-hairline);
  font-size: 15px; line-height: 1.55; color: var(--text-body);
}
.w-build li::before {
  content: counter(wb, decimal-leading-zero);
  position: absolute; left: 0; top: 18px;
  font-family: var(--font-mono); font-size: var(--fs-caption);
  letter-spacing: var(--tracking-label); color: var(--primary);
}
.w-build strong { color: var(--text-heading); font-weight: var(--fw-semibold); }

/* ---- Einstiegsangebot (Scan) -------------------------------------------- */

/* Rechte Spalte breiter als die ursprünglichen 340px: dort steht jetzt der
   Einstiegsdialog, und dessen Fragen brauchen Zeilenlänge. */
.w-offer { display: grid; grid-template-columns: 1fr 430px; gap: var(--space-8); align-items: start; }
.w-offer ul { margin: var(--space-4) 0 0; padding-left: 18px; font-size: var(--fs-body); line-height: 1.75; color: var(--text-body); }
.w-offer li::marker { color: var(--primary); }

/* ---- Qualifizierungs-Formular ------------------------------------------- */

.w-form { display: flex; flex-direction: column; gap: var(--space-4); }
.w-field-row { display: flex; flex-direction: column; gap: 6px; }
.w-field-row label { font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-label); }
.w-input, .w-textarea {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--nws-border-strong);
  background: var(--nws-white);
  color: var(--text-heading);
  font-family: var(--font-sans); font-size: 14.5px; line-height: 1.5;
}
.w-input { height: var(--space-11); padding-top: 0; padding-bottom: 0; }
.w-textarea { resize: vertical; min-height: 84px; }
.w-input:focus, .w-textarea:focus { outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, var(--primary)); outline-offset: 1px; border-color: var(--primary); }
.w-input[aria-invalid="true"], .w-textarea[aria-invalid="true"] { border-color: #d06767; }
.w-form-note { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--text-label); }
.w-form-note a { color: var(--primary); font-weight: var(--fw-medium); }
.w-form-error { margin: 0; font-size: 12.5px; color: #b34b4b; }
.w-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.w-form-done { display: flex; gap: var(--space-3); align-items: flex-start; }
.w-form-done p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-body); }
.w-form-done strong { color: var(--text-heading); }
.w-tick {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); color: var(--nws-lime-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: var(--fw-bold); margin-top: 2px;
}

/* ---- Abschlussband (ohne Canvas, ohne Ringe) ---------------------------- */

/* Die 96px gelten für den Fall, dass das Abschlussband auf weißem Grund steht
   (`wissen/index.html`, `okr-app.html`): davor soll eine deutliche Pause liegen.
   Steht es in einer Farbfläche, bringt die schon 84px Innenabstand mit — beides
   zusammen ergab 180px über dem Panel gegen 84px darunter, ein sichtbar
   verrutschter Kasten in seiner eigenen Fläche (18.08.2026). */
.w-cta {
  /* `position` und `overflow` tragen das Netzmotiv (09.09.2026): Das Canvas
     liegt absolut im Kasten, die Ecken muessen es beschneiden. `site.js` sucht
     `canvas[data-network]` im ganzen Dokument und belebt jedes gefundene —
     das Motiv brauchte hier also nur einen Platz, keinen eigenen Aufruf. */
  position: relative; overflow: hidden;
  margin-top: 96px;
  background: var(--nws-night);
  border-radius: var(--radius-panel);
  padding: 60px;
  display: flex; justify-content: space-between; gap: var(--space-10); flex-wrap: wrap; align-items: center;
}
.w-cta canvas { position: absolute; inset: 0; z-index: 1; }
.w-section.band > .w-cta { margin-top: 0; }
/* Ein gemeinsames Mass fuer Ueberschrift und Fliesstext (09.09.2026).
   Vorher trug die h2 `max-width: 15em` und der Absatz `34em` — bei einer langen
   Ueberschrift lief die Ueberschrift auf 480 px in vier Zeilen um, waehrend der
   Absatz darunter 578 px breit stand. Eine Ueberschrift, die schmaler ist als
   ihr eigener Fliesstext, sieht aus wie ein Umbruchfehler. Das Mass sitzt
   deshalb an der Textspalte, nicht an den einzelnen Elementen.

   Eigene Klasse statt `> div:first-child`: Seit das Canvas als erstes Kind im
   Kasten liegt, waere `:first-child` das Canvas und `:first-of-type` der
   Zierring — beides nicht die Textspalte. */
.w-cta-text { max-width: 34em; position: relative; z-index: 2; }
.w-cta-knoepfe { position: relative; z-index: 2; display: flex; gap: 12px; flex-wrap: wrap; }
.w-cta h2 { margin: 0 0 var(--space-4); font-size: var(--fs-h2); font-weight: var(--fw-display); letter-spacing: var(--tracking-heading-serif); color: #fff; }
.w-cta p { margin: 0; font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--nws-on-dark); }
/* Die schmale Polsterung dieses Bandes — siehe `--termin-ausbruch` in site.css. */
.w-cta { --termin-ausbruch: 44px; }
.w-cta .w-eyebrow { color: var(--accent); display: block; margin-bottom: var(--space-4); }

/* ---- Spurenwechsel (nur auf „Über mich") -------------------------------- */

.w-tracks { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.w-track {
  display: block;
  padding: 22px 24px;
  border: 1px solid var(--border-hairline);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
}
.w-track:hover { border-color: var(--primary); opacity: 1; }
.w-track .w-eyebrow { color: var(--text-label); }
.w-track strong { display: block; margin: 8px 0 6px; font-size: 16px; font-weight: var(--fw-bold); letter-spacing: var(--tracking-heading); color: var(--text-heading); }
.w-track span.w-track-desc { display: block; font-size: 13.5px; line-height: 1.55; color: var(--text-body); }
/* Der belegte Fall trägt als einziger den Akzent. */
.w-track.is-proven { border-left-color: var(--accent); }

/* ---- Diagramm-Beschriftungen -------------------------------------------- */

.w-dia { width: 100%; height: auto; display: block; }
.w-dia text { font-family: var(--font-sans); fill: var(--text-body); }
.w-dia .w-dia-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; fill: var(--text-label); }

/* ---- Sekundärnavigation im Footer der Spur ------------------------------ */

.w-foot-note { margin: var(--space-4) 0 0; font-size: 12.5px; line-height: 1.6; color: var(--text-label); }

/* ===========================================================================
   Diagramme und Bewegung
   ---------------------------------------------------------------------------
   Grundsatz: Der Endzustand ist der Normalzustand. `is-bereit` setzt eine
   Grafik nur dann zurück, wenn JavaScript sie auch wieder abspielen kann —
   ohne JS bleibt alles sichtbar. Keine Dauerschleifen, keine Bewegung
   ausserhalb des Sichtbereichs.
   =========================================================================== */

.w-viz { position: relative; }
.w-viz svg { width: 100%; height: auto; display: block; }
.w-viz text { font-family: var(--font-sans); }
.w-viz .v-titel { font-size: 12px; font-weight: var(--fw-semibold); fill: var(--text-heading); }
.w-viz .v-klein-text { font-size: 10.5px; fill: var(--text-body); }
.w-viz .v-marke {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: .1em; text-transform: uppercase; fill: var(--text-label);
}

/* Tafel um eine Grafik — hebt sie vom Fliesstext ab, ohne laut zu werden. */
.w-viz-tafel {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  padding: 30px 32px 26px;
}
/* Über die volle Spaltenbreite wird eine 620er-Zeichenfläche gut 1090px breit
   und damit unangenehm gross. Begrenzen und mittig setzen. */
.w-viz-tafel .w-viz svg { max-width: 780px; margin: 0 auto; }
.w-viz-bu { margin: var(--space-5) 0 0; font-size: 13px; line-height: 1.6; color: var(--text-label); max-width: 62ch; }
.w-viz-bu strong { color: var(--text-body); font-weight: var(--fw-semibold); }

/* ---- Bausteine der Einblendung ------------------------------------------ */

[data-viz] .v-an {
  transform-box: fill-box; transform-origin: center;
  transition: opacity .5s var(--ease-out) var(--d, 0s),
              transform .5s var(--ease-out) var(--d, 0s);
}
[data-viz].is-bereit .v-an { opacity: 0; }
[data-viz].is-bereit .v-hoch { transform: translateY(12px); }
[data-viz].is-bereit .v-klein { transform: scale(.35); }
[data-viz].is-sichtbar .v-an { opacity: 1; transform: none; }

/* Striche wachsen aus ihrem Ursprung heraus — billiger und robuster als
   stroke-dasharray, weil keine Längen gepflegt werden müssen. */
[data-viz] .v-strich {
  transform-box: fill-box; transform-origin: left center;
  transition: transform .6s var(--ease-out) var(--d, 0s);
}
[data-viz].is-bereit .v-strich { transform: scaleX(0); }
[data-viz].is-sichtbar .v-strich { transform: scaleX(1); }
[data-viz] .v-strich-rechts { transform-origin: right center; }

/* Balken, die eine Menge zeigen.
   `is-bereit` bleibt gesetzt, nachdem `is-sichtbar` dazukommt — der Endzustand
   muss deshalb ausdrücklich dastehen und nach der Ruhelage stehen. */
[data-viz] .v-balken {
  transform-box: fill-box; transform-origin: left center;
  transition: transform .7s var(--ease-out) var(--d, 0s);
}
[data-viz].is-bereit .v-balken { transform: scaleX(0); }
[data-viz].is-sichtbar .v-balken { transform: none; }

/* Zweistufige Grafiken: vorher blendet aus, nachher blendet ein. Diese Regeln
   müssen nach den Einblende-Regeln stehen — gleiche Spezifität, Reihenfolge
   entscheidet. */
[data-viz] .v-vorher, [data-viz] .v-nachher { transition: opacity .8s var(--ease-out); }
[data-viz] .v-nachher { opacity: 0; }
[data-viz].is-nachher .v-nachher { opacity: 1; }
[data-viz].is-nachher .v-vorher { opacity: 0; }

/* Wiederholen-Knopf unter zweistufigen Grafiken */
.w-viz-neu {
  margin-top: var(--space-4);
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: var(--fs-caption);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--primary);
}
.w-viz-neu:hover { text-decoration: underline; }

/* ---- Gestaffelte Einblendung ganzer Blöcke ------------------------------ */

[data-viz].v-stapel > * {
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
[data-viz].v-stapel.is-bereit > * { opacity: 0; transform: translateY(12px); }
/* Endzustand ausdrücklich — auch wenn `wissen-viz.js` `is-bereit` inzwischen
   entfernt, soll diese Datei für sich lesbar bleiben. */
[data-viz].v-stapel.is-sichtbar > * { opacity: 1; transform: none; }
[data-viz].v-stapel > *:nth-child(1) { transition-delay: 0s; }
[data-viz].v-stapel > *:nth-child(2) { transition-delay: .07s; }
[data-viz].v-stapel > *:nth-child(3) { transition-delay: .14s; }
[data-viz].v-stapel > *:nth-child(4) { transition-delay: .21s; }
[data-viz].v-stapel > *:nth-child(5) { transition-delay: .28s; }
[data-viz].v-stapel > *:nth-child(6) { transition-delay: .35s; }
[data-viz].v-stapel > *:nth-child(7) { transition-delay: .42s; }
[data-viz].v-stapel > *:nth-child(8) { transition-delay: .49s; }
[data-viz].v-stapel > *:nth-child(9) { transition-delay: .56s; }

/* ---- Der Zeitstrahl der fünf Phasen ------------------------------------- */

[data-viz].w-phases .w-phase::before,
[data-viz].w-phases .w-phase::after,
[data-viz].w-phases .w-phase > * {
  transition: transform .5s var(--ease-out), opacity .45s var(--ease-out);
  transition-delay: calc(var(--i, 0) * .13s);
}
[data-viz].w-phases .w-phase::before { transform-origin: left center; }
[data-viz].w-phases.is-bereit .w-phase::before { transform: scaleX(0); }
[data-viz].w-phases.is-bereit .w-phase::after { transform: scale(0); }
[data-viz].w-phases.is-bereit .w-phase > * { opacity: 0; }
[data-viz].w-phases .w-phase > * { transition-delay: calc(var(--i, 0) * .13s + .18s); }
[data-viz].w-phases.is-sichtbar .w-phase::before,
[data-viz].w-phases.is-sichtbar .w-phase::after { transform: none; }
[data-viz].w-phases.is-sichtbar .w-phase > * { opacity: 1; }

/* ===========================================================================
   CTA-Varianten
   =========================================================================== */

.w-cta-slot { min-height: 260px; }

/* ---- Variante 1: Dialog -------------------------------------------------- */

.w-chat-kopf { margin-bottom: var(--space-5); }
.w-chat-hinweis { margin: var(--space-2) 0 0; font-size: 12.5px; line-height: 1.55; color: var(--text-label); }

.w-chat-verlauf { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-5); }
.w-blase {
  max-width: 88%; padding: 13px 17px;
  font-size: 14.5px; line-height: 1.55;
  border-radius: var(--radius-md);
  /* Als Animation statt als Klassenwechsel: eine per JS gesetzte Klasse müsste
     über requestAnimationFrame ausgelöst werden, und das ist in einem nicht
     gezeichneten Tab ausgesetzt — die Blase bliebe dann unsichtbar stehen. */
  animation: w-einblenden .35s var(--ease-out) both;
}
.w-blase-links {
  align-self: flex-start;
  background: var(--surface-tint); color: var(--text-heading);
  border-bottom-left-radius: var(--radius-xs);
}
.w-blase-rechts {
  align-self: flex-end;
  background: var(--nws-night); color: var(--nws-on-dark);
  border-bottom-right-radius: var(--radius-xs);
}

.w-chat-zeile { display: flex; }
.w-chat-feld { width: 100%; }
.w-chat-aktionen { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-3); flex-wrap: wrap; }
.w-chat-ueber {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-sans); font-size: 13.5px; color: var(--text-label);
  text-decoration: underline;
}
.w-chat-ueber:hover { color: var(--text-body); }
.w-chat-stand { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: .06em; color: var(--text-label); }

/* ---- Variante 2: Diagnose ------------------------------------------------ */

.w-diag-vorspann { margin: var(--space-2) 0 0; font-size: 14px; line-height: 1.6; color: var(--text-body); }
.w-diag-balken { height: 3px; border-radius: var(--radius-pill); background: var(--nws-border-strong); overflow: hidden; margin: var(--space-5) 0 var(--space-6); }
.w-diag-balken i { display: block; height: 100%; width: 0; background: var(--primary); transition: width .45s var(--ease-out); }

.w-diag-frage, .w-diag-ergebnis { animation: w-einblenden .4s var(--ease-out) both; }

@keyframes w-einblenden {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}
.w-diag-n { display: block; font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-label); }
.w-diag-frage h3 { margin: var(--space-3) 0 var(--space-5); font-size: 20px; font-weight: var(--fw-bold); letter-spacing: var(--tracking-heading); color: var(--text-heading); }

.w-diag-optionen { display: flex; flex-direction: column; gap: var(--space-2); }
.w-diag-option {
  text-align: left; cursor: pointer;
  padding: 15px 18px;
  border: 1px solid var(--nws-border-strong);
  border-radius: var(--radius-sm);
  background: var(--nws-white);
  font-family: var(--font-sans); font-size: 14.5px; line-height: 1.5;
  color: var(--text-body);
  transition: border-color var(--dur-fast, .18s) ease, background var(--dur-fast, .18s) ease, transform var(--dur-fast, .18s) ease;
}
.w-diag-option:hover { border-color: var(--primary); background: var(--surface-tint); color: var(--text-heading); transform: translateX(3px); }

.w-diag-ergebnis h3 { margin: var(--space-3) 0 var(--space-3); font-size: 24px; font-weight: var(--fw-black); letter-spacing: var(--tracking-heading); color: var(--text-heading); }
.w-diag-ergebnis > p { margin: 0 0 var(--space-4); font-size: 15px; line-height: 1.65; color: var(--text-body); }
.w-diag-felder { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.w-diag-felder .w-side-tag { margin: 0 var(--space-2) 0 0; color: var(--text-label); }
.w-chip {
  padding: 5px 12px; border-radius: var(--radius-pill);
  background: var(--surface-tint); color: var(--primary);
  font-size: 12.5px; font-weight: var(--fw-medium);
}
.w-diag-fussnote { font-size: 12.5px !important; line-height: 1.55; color: var(--text-label) !important; }
.w-diag-abschluss { font-weight: var(--fw-medium); color: var(--text-heading) !important; }

/* ---- Variante 3: Ein Feld ------------------------------------------------ */

.w-einfeld-frage { margin: var(--space-3) 0 var(--space-5); font-size: 23px; font-weight: var(--fw-bold); letter-spacing: var(--tracking-heading); line-height: 1.25; color: var(--text-heading); }
.w-einfeld-feld { width: 100%; font-size: 15px; }

/* ---- Gemeinsamer Abschluss ---------------------------------------------- */

.w-cta-abschluss { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-5); }
.w-cta-abschluss .w-field-row { gap: 6px; }
.w-cta-abschluss button { align-self: flex-start; }

.w-cta-fertig { display: flex; gap: var(--space-3); align-items: flex-start; }
.w-cta-fertig strong { display: block; font-size: 16px; color: var(--text-heading); }
.w-cta-fertig p { margin: var(--space-2) 0 0; font-size: 14.5px; line-height: 1.6; color: var(--text-body); }
.w-cta-fertig a { color: var(--primary); font-weight: var(--fw-medium); }

/* ---- Vergleichsleiste (nur lokal) --------------------------------------- */

.w-variantenleiste {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  display: flex; align-items: center; gap: var(--space-2);
  padding: 9px 12px;
  background: var(--nws-night); border-radius: var(--radius-pill);
  box-shadow: var(--shadow-float);
}
.w-variantenleiste > span {
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--nws-on-dark-muted); margin-right: var(--space-1);
}
.w-variantenknopf {
  cursor: pointer; padding: 6px 13px; border: 0;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.09); color: #fff;
  font-family: var(--font-sans); font-size: 12.5px; font-weight: var(--fw-medium);
}
.w-variantenknopf:hover { background: rgba(255,255,255,.18); }
.w-variantenknopf[aria-pressed="true"] { background: var(--accent); color: var(--nws-lime-ink); font-weight: var(--fw-bold); }

/* ---- Umbrüche ------------------------------------------------------------ */

@media (max-width: 1000px) {
  .w-hero-split { grid-template-columns: 1fr; gap: var(--space-8); }
  .w-hero-dunkel { padding: 44px 30px 40px; }
  /* Eigene Zeile, weil `.w-hero-dunkel.is-randlos` mit zwei Klassen die Regel
     darueber schlaegt — dieselbe Falle wie im Responsiv-Block von site.css
     (PLAN 1ar). Nur die Hoehe zurueck, der Ausbruch bleibt. */
  .w-hero-dunkel.is-randlos { padding: 44px 0 40px; }
  .w-hero-dunkel h1 { font-size: 36px; }
  .w-checkliste { grid-template-columns: 1fr; }
  .w-hero-grid { grid-template-columns: 1fr; gap: var(--space-10); }
  .w-fields, .w-fields.is-zwei { grid-template-columns: 1fr; }
  .w-phases { grid-template-columns: 1fr 1fr 1fr; }
  .w-phase::before { display: none; }
  .w-offer { grid-template-columns: 1fr; }
  .w-tracks { grid-template-columns: 1fr; }
  .w-cta { padding: 44px; }
}
@media (max-width: 720px) {
  .w-hero h1 { font-size: 38px; }
  .w-triggers, .w-contrast, .w-qa { grid-template-columns: 1fr; }
  /* Zwei nebeneinander bleiben, solange sie passen — auf dem Telefon passen
     sie nicht: die schmalste Karte misst 204 px, zwei davon mit Abstand und
     Seitenrändern brauchen 472 px. Die Startseite war deshalb bis zum
     08.08.2026 auf jedem Telefon 454 px breit und ließ sich seitwärts
     schieben. Die Regel muss die Klasse `is-vier` mitnennen, sonst gewinnt
     die spezifischere Zwei-Spalten-Regel von oben. */
  .w-fields.is-vier { grid-template-columns: 1fr; gap: 10px; }

  /* Vier vollständige Karten untereinander machen den Abschnitt 1938 px
     hoch — knapp drei Bildschirmlängen für vier Einstiege. Auf dem Telefon
     wird die Karte deshalb zur Zeile: Symbol links, daneben Kategorie,
     Titel, Zielgruppe, Link. Das trägt die Entscheidung „für wen ist das,
     und wo geht es weiter"; der beschreibende Absatz steht vollständig auf
     der Zielseite, einen Fingertipp entfernt. 844 px statt 1938 px.
     Peters Entscheidung am 08.08.2026, PLAN §1z. */
  .w-fields.is-vier .w-field {
    display: grid; grid-template-columns: var(--space-11) 1fr;
    column-gap: var(--space-4); row-gap: 2px;
    padding: 18px 20px; align-items: start;
  }
  .w-fields.is-vier .ic { grid-column: 1; grid-row: 1 / span 3; margin: 0; }
  /* Die Nummer zeigt am Schreibtisch, dass es genau vier sind. In der Zeile
     zählt der Leser sie ohnehin ab. */
  .w-fields.is-vier .w-nr { display: none; }
  .w-fields.is-vier .w-eyebrow,
  .w-fields.is-vier h3,
  .w-fields.is-vier .w-for,
  .w-fields.is-vier .w-more { grid-column: 2; }
  .w-fields.is-vier h3 { margin: var(--space-2) 0 var(--space-2); font-size: 18px; }
  .w-fields.is-vier .w-for { margin: 0; }
  .w-fields.is-vier .w-field > p:not(.w-for) { display: none; }
  .w-fields.is-vier .w-more { margin-top: 0; padding-top: 10px; }
  .w-phases { grid-template-columns: 1fr; }
  .w-viz-tafel { padding: 22px 20px 20px; }
  .w-einfeld-frage { font-size: 20px; }
  .w-blase { max-width: 100%; }
  .w-variantenleiste { right: 10px; bottom: 10px; padding: 7px 9px; }
  .w-variantenknopf { padding: 5px 10px; font-size: 11.5px; }

  /* Dieselbe Ursache wie in `site.css` am Dateiende: die Spalten des
     geteilten Heroes und die Blöcke im Abschlussband schrumpfen sonst nie
     unter ihre Mindestbreite, und das dunkle Panel schneidet den Überhang
     ab. */
  .w-hero-split > *, .w-hero-grid > *, .w-cta > * { min-width: 0; }
}

/* Wer Bewegung abbestellt hat, bekommt sofort den Endzustand — auch dann,
   wenn JavaScript die Klassen gar nicht erst setzt. */
@media (prefers-reduced-motion: reduce) {
  [data-viz] *, .w-blase, .w-diag-frage, .w-diag-ergebnis, .w-diag-balken i {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}