/* NF Mentoring · pages/wissen.css · Build-Output von build.mjs – nicht von Hand ändern. Quellen: src/pages/wissen/, src/blocks/. */

/* ── src/zeichnungen/zeichnung.css ── */
/* Zeichnungs-System: Farben und Strich der Isometrie-Zeichnungen (src/zeichnungen/NAME.svg).
   Die SVG tragen keine Farben, nur Klassen. Werte sind Markenfarben aus RULES.md oder Mischungen daraus.
   Hell ist Standard (wie das Vorbild, Bauplan V1). Dunkel gilt unter data-theme bordeaux, bordeaux-2 und ink.
   Linienfarben sind deckend vorgemischt (Tinte zu 55 % auf Creme), damit sich Kanten, die zweimal
   gezeichnet werden, nicht verdunkeln. */

:root,
[data-theme="cream"] {
  --z-strich: 1.5px;                /* eine Linienstärke für alle Konturen */
  --z-strich-weg: 2.25px;           /* roter Weg wie der rote Faden im Vorbild, 1,5-fach */
  --z-linie: #716F6E;               /* ink #08080A zu 55 % auf cream #F1EDE8 */
  --z-linie-zart: #B0ADAA;          /* ink zu 28 %: Grundriss, Maßketten, Zeilen */
  --z-flaeche-1: #FBFBFB;           /* oben: white */
  --z-flaeche-2: #EDE8E1;           /* links: cream-2 mit 7 % ink (V1 TONE_WALL) */
  --z-flaeche-3: #DFDBD7;           /* rechts: cream mit 16 % ink (V1 TONE_WALL) */
  --z-boden: #F5F0E8;               /* Bodenfläche: cream-2 wie die Grundplatte im Vorbild */
  --z-akzent: #B4121E;              /* red */
  --z-akzent-flaeche: #ECD7D1;      /* wine #AE1D2B zu 12 % auf cream-2 */
  --z-durch: 0.26;                  /* roter Weg hinter Wänden, wie das Röntgenbild im Vorbild */
}

[data-theme="bordeaux"],
[data-theme="bordeaux-2"],
[data-theme="ink"] {
  --z-linie: #B6A9A8;               /* cream zu 70 % auf bordeaux #2D0912 */
  --z-linie-zart: #6C5256;          /* cream zu 32 % */
  --z-flaeche-1: #4C2D34;           /* oben: bordeaux mit 16 % cream */
  --z-flaeche-2: #3F1D25;           /* links: bordeaux mit 9 % cream */
  --z-flaeche-3: #30191F;           /* rechts: bordeaux-2 #1F070E mit 8 % cream */
  --z-boden: #33101A;               /* bordeaux mit 3,5 % cream */
  --z-akzent: #C66A68;              /* red-light (75 % red-soft + 25 % cream) für Linien */
  --z-akzent-flaeche: #4B0C16;      /* red #B4121E zu 22 % auf bordeaux */
  --z-durch: 0.4;
}

[data-theme="ink"] {
  --z-linie: #ABA8A5;               /* cream zu 70 % auf ink #08080A */
  --z-linie-zart: #535151;
}

/* Grundwerte: Füllung und Strich kommen nur aus den Klassen */
.zeichnung {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  fill: none;
  stroke: none;
  stroke-width: var(--z-strich);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.zeichnung :where(path, circle, ellipse) { vector-effect: non-scaling-stroke; }

.zeichnung .z-linie { stroke: var(--z-linie); }
.zeichnung .z-linie-zart { stroke: var(--z-linie-zart); }
.zeichnung .z-akzent { stroke: var(--z-akzent); }
.zeichnung .z-weg { stroke: var(--z-akzent); stroke-width: var(--z-strich-weg); }
.zeichnung .z-weg-durch { opacity: var(--z-durch); }
.zeichnung .z-flaeche-1 { fill: var(--z-flaeche-1); }
.zeichnung .z-flaeche-2 { fill: var(--z-flaeche-2); }
.zeichnung .z-flaeche-3 { fill: var(--z-flaeche-3); }
.zeichnung .z-boden { fill: var(--z-boden); }
.zeichnung .z-akzent-flaeche { fill: var(--z-akzent-flaeche); }
.zeichnung .z-punkt { fill: var(--z-akzent); }

/* Aufbau beim Eintritt: steuert allein core.js (NF.zeichnung, DESIGN.md §7). Es entfernt pathLength, misst die Linien
   in px und setzt .is-bereit/.is-sichtbar; die Zustände stehen in site/css/base.css. Ohne Skript und mit reduzierter
   Bewegung steht die Zeichnung fertig da. (Die früheren [data-z-aufbau]/[pathLength]-Regeln setzte kein Skript mehr;
   pathLength schneidet bei Maßstab ≠ 1 die Wegenden ab, deshalb entfernt, V2-I.) */

/* ── src/blocks/cta-band.css ── */
/* Baustein cta-band · Namensraum .b-cta-band (Slice V5-P0). Steht in einer Section mit data-theme (Farben über --text …).
   Rev. 6 (V9-A0): ruhiger, symmetrischer Schlussblock auf white oder grey: zentriert, höchstens 640 px breit, Text 36rem,
   gleiche Abstände (die Section liefert oben/unten --section-y), Knopf einzeilig mit Microcopy darunter, mobil volle Breite.
   Keine eigene Fläche, kein Verlauf, kein Raster: Hintergrund, Schrift (--text/--text-soft/--text-mute ≥ 4,5:1) und der zarte
   Rotschein des Knopfs (--nf-shadow-btn-hell) kommen aus dem Theme der Section.
   V11-C (Farbwelt Rev. 7, bauplan v11 §1/§4): Schluss-CTA auf data-theme="red" (Rot-Verlauf); der Primärknopf liest --btn1-*
   und steht dort invers (weiß mit rotem Text, 6,98:1), Microcopy --text-mute (Weiß 85 %, 5,39:1 am hellsten Stopp #AE1D2B).
   Variante, wenn die Section davor dunkel ist (olive/red, nie zwei dunkle Flächen nacheinander): dieselbe Section mit
   data-theme="olive-light" (Knopf Rot-Verlauf, Microcopy grey-500 4,62:1 am Verlaufsende); der Baustein selbst bleibt
   gleich: die Section in src/pages wählt das Attribut (Regel: Vorgänger-Section olive oder red → olive-light, sonst red). */
.b-cta-band { display: grid; justify-items: center; gap: 16px; width: 100%; max-width: 40rem; margin-inline: auto; text-align: center; }
.b-cta-band__titel { max-width: 100%; }
.b-cta-band__text { max-width: 36rem; }
.b-cta-band__aktion { display: grid; justify-items: center; gap: 12px; margin-top: 12px; }
.b-cta-band__cta { white-space: nowrap; }
.b-cta-band__micro { margin: 0; color: var(--text-mute); }
@media (max-width: 599px) {
  .b-cta-band__aktion { justify-items: stretch; width: 100%; }
  .b-cta-band__cta { width: 100%; }
}
@media (max-width: 400px) { .b-cta-band__cta { white-space: normal; } .b-cta-band__cta, .b-cta-band__micro { text-wrap: balance; } }   /* V9-FX1 (mob-freebies-05): keine Waise „passt“/„unverbindlich“ */

/* ── src/pages/wissen/01-kopf.css ── */
/* /wissen · 01-kopf · Namensraum .pg-wissen-01-kopf (Slice V5-PW)
   Oliv (Farbwelt Rev. 4, Raster-Klasse bleibt), Pille, H1 mit zwei Akzentwörtern, Leitsatz, Funnel-CTA. Ab 768 px rechts die Zeichnung im Rahmen
   (Text 7 Spalten, Zeichnung 5). Darunter (V10-C) die Zeichnung klein unter dem Text: höchstens rund 200 px hoch, H1, Lead und
   Knopf bleiben im ersten Bildschirm, core baut die Figur beim Eintritt auf. */
.pg-wissen-01-kopf { padding-top: calc(var(--header-h) + clamp(40px, 6vw, 88px)); overflow: hidden; }
.pg-wissen-01-kopf__grid { display: grid; gap: 40px; }
.pg-wissen-01-kopf__text { display: grid; justify-items: start; align-content: center; }
.pg-wissen-01-kopf__pill { margin-bottom: 18px; }
.pg-wissen-01-kopf__title { max-width: 11em; padding-bottom: 0.06em; }
.pg-wissen-01-kopf__lead { max-width: 40ch; margin-top: 22px; }
.pg-wissen-01-kopf__aktion { display: grid; justify-items: start; gap: 12px; margin-top: 32px; }
.pg-wissen-01-kopf__micro { margin: 0; }
.pg-wissen-01-kopf__zeichnung { display: block; }
.pg-wissen-01-kopf__zeichnung .zeichnung { display: block; width: 100%; height: auto; }

/* V10-C: mobil klein und mittig unter dem Text (360 × 280 → ca. 205 px hoch); die Regel ab 768 px bleibt unberührt */
@media (max-width: 767px) {
  .pg-wissen-01-kopf__grid { gap: 32px; }
  .pg-wissen-01-kopf__zeichnung { width: min(100%, 260px); margin: 0 auto; }
}

@media (max-width: 400px) {
  .pg-wissen-01-kopf__aktion .btn { white-space: normal; text-align: left; text-wrap: balance; }   /* V9: bei 320/340 „…, / ob es passt“ statt „passt“ allein */
}

@media (min-width: 768px) {
  .pg-wissen-01-kopf__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(40px, 5vw, 88px);
    align-items: center;
  }
  .pg-wissen-01-kopf__zeichnung { display: block; width: 100%; max-width: 460px; justify-self: end; }
}

/* ── src/pages/wissen/02-ressourcen.css ── */
/* /wissen · 02-ressourcen · Namensraum .pg-wissen-02-ressourcen (Slice V5-PW)
   Grau (V9, Farbwelt Rev. 6; vorher Hell-Oliv). Fünf weiße Karten aus den Rollen (--surface-card, --surface-card-line, --shadow-card) mit Doppelrand (helle Bildfläche 8 px im Kartenrand). Unter 1024 px je Karte
   eine Zeile: Bild links (38 %), Text rechts, damit die Liste kurz und scannbar bleibt. Ab 1024 px ein Raster aus sechs
   Spalten: die beiden ersten Karten groß (je 3), darunter drei (je 2). Bilder stehen ganz (contain) auf der dunklen Fläche;
   das Video-Standbild füllt sie (cover), die hellen Screenshots bekommen etwas Luft, die hohen Skript-Vorschauen
   zeigen ihren Kopf (cover, oben bündig). Ganze Karte klickbar über den Link.
   V11-D (Rev. 7): Section ist die Oliv-Bühne der Seite (data-theme olive); Karten, Bildbrunnen und Link lesen die Rollen des Themes. */
.pg-wissen-02-ressourcen .pg-wissen-02-ressourcen__liste {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pg-wissen-02-ressourcen__karte {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 8px;
  border: 1px solid var(--surface-card-line);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
  transition: border-color var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out);
}
.pg-wissen-02-ressourcen__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: calc(var(--radius-md) - 8px);
  background: var(--bg);   /* V9: heller Bildbrunnen (Section-Fläche) statt Ink; dunkle Motive stehen gerahmt auf Hell */
}
.pg-wissen-02-ressourcen__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 400ms var(--ease-out);
}
.pg-wissen-02-ressourcen__media--hell img { inset: 7%; width: 86%; height: 86%; }
.pg-wissen-02-ressourcen__media--fuellen img { object-fit: cover; }
.pg-wissen-02-ressourcen__media--oben img { object-fit: cover; object-position: 50% 0; }
.pg-wissen-02-ressourcen__body { display: grid; justify-items: start; gap: 6px; min-width: 0; padding: 6px 6px 6px 0; }
.pg-wissen-02-ressourcen__titel { font-size: clamp(1.0625rem, 0.95rem + 0.6vw, var(--fs-h3)); line-height: 1.25; text-wrap: balance; }
.pg-wissen-02-ressourcen__text { margin: 0; color: var(--text-soft); font-size: var(--fs-small); line-height: 1.45; }
.pg-wissen-02-ressourcen__link { margin: 2px 0 0 -4px; color: var(--accent-text); font-size: var(--fs-small); }
.pg-wissen-02-ressourcen__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.pg-wissen-02-ressourcen__karte:has(.pg-wissen-02-ressourcen__link:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.pg-wissen-02-ressourcen__link:focus-visible { outline: none; }

@media (hover: hover) and (pointer: fine) {
  .pg-wissen-02-ressourcen__karte:hover { border-color: var(--line, var(--nf-line-soft-strong)); box-shadow: var(--shadow-media); }   /* V11-D: Rolle, Section ist Oliv */
  .pg-wissen-02-ressourcen__karte:hover .pg-wissen-02-ressourcen__media img { transform: scale(1.02); }
  .pg-wissen-02-ressourcen__karte:hover .pg-wissen-02-ressourcen__link svg { transform: translateX(3px); }
}

/* V9: unter 360 px wären die Vorschaubilder nur ca. 90 px breit und die Links brächen um: Bild über dem Text */
@media (max-width: 359px) {
  .pg-wissen-02-ressourcen__karte { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pg-wissen-02-ressourcen__media { aspect-ratio: 16 / 9; }
  .pg-wissen-02-ressourcen__body { padding: 0 8px 8px; }
}
@media (min-width: 640px) {
  .pg-wissen-02-ressourcen__karte { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 22px; }
  .pg-wissen-02-ressourcen__body { gap: 8px; }
  .pg-wissen-02-ressourcen__text { font-size: var(--fs-body); }
  /* V9 Bildausschnitt: die Hochformat-Mockups (480 × 655) ganz zeigen statt oben angeschnitten; ihr dunkler Grund verschmilzt
     mit der Bildfläche, wie beim ganzen Haken-Mockup daneben */
  .pg-wissen-02-ressourcen__media--oben img { right: 0; left: 0; width: auto; max-width: 100%; height: 100%; margin-inline: auto; object-fit: cover; border-radius: 8px; }
}

@media (min-width: 1024px) {
  .pg-wissen-02-ressourcen .pg-wissen-02-ressourcen__liste { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; }
  .pg-wissen-02-ressourcen__karte {
    grid-column: span 2;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    align-items: stretch;
    gap: 0;
  }
  .pg-wissen-02-ressourcen__karte--gross { grid-column: span 3; }
  .pg-wissen-02-ressourcen__karte--gross .pg-wissen-02-ressourcen__media { aspect-ratio: 16 / 9; }
  /* V9 Symmetrie: Spalte statt Raster, damit „Jetzt …“ in jeder Reihe unten auf einer Linie steht (Titel ein- oder zweizeilig) */
  .pg-wissen-02-ressourcen__body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px 14px 12px; }
  .pg-wissen-02-ressourcen__link { margin-top: auto; padding-top: 4px; }
}

/* Eintritt (02-ressourcen.js): Startzustand nur unter dem Motion-Gate, nur transform und clip-path; dieselben Werte stehen
   als „from“ im fromTo() der JS-Datei. */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  html:not(.is-static) .pg-wissen-02-ressourcen [data-motion] {
    transform: translate3d(0, var(--reveal-y), 0);
    clip-path: inset(0% 0% 100% 0%);
  }
}

/* ── src/pages/wissen/03-talks.css ── */
/* /wissen · 03-talks · Namensraum .pg-wissen-03-talks (Slice V5-PW)
   Fläche white (farbwelt.md §3.2, vorher Ink; Farben nur über Rollen: Text, Haarlinie, Oliv-Sekundärknöpfe). Mobil gestapelt (Headline, zwei Kanäle, dann die Podcast-Karte), ab 1024 px Karte links (6 Spalten, gerahmt), Text
   rechts. Die Kanäle sind zwei kurze Absätze mit je einem Knopf, getrennt durch eine Haarlinie. */
.pg-wissen-03-talks__grid { display: grid; gap: 36px; }
.pg-wissen-03-talks__bild { order: 2; min-width: 0; margin: 0; }
.pg-wissen-03-talks__bild img { display: block; width: 100%; height: auto; border-radius: calc(var(--radius-md) - var(--frame-pad)); }
.pg-wissen-03-talks__text { order: 1; display: grid; align-content: center; min-width: 0; }
.pg-wissen-03-talks__title { max-width: 14em; }
.pg-wissen-03-talks .pg-wissen-03-talks__kanaele { display: grid; gap: 0; margin: 26px 0 0; padding: 0; list-style: none; }
.pg-wissen-03-talks__kanal { display: grid; justify-items: start; gap: 14px; padding: 20px 0; border-top: 1px solid var(--hairline); }
.pg-wissen-03-talks__kanal:last-child { padding-bottom: 0; }
.pg-wissen-03-talks__kanal-text { max-width: 52ch; margin: 0; color: var(--text-soft); font-size: var(--fs-body); line-height: 1.55; text-wrap: pretty; }

@media (max-width: 400px) {
  .pg-wissen-03-talks__knopf { white-space: normal; text-align: left; }
}

@media (min-width: 1024px) {
  .pg-wissen-03-talks__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    column-gap: clamp(48px, 5.5vw, 96px);
    align-items: center;
  }
  .pg-wissen-03-talks__bild { order: 1; }
  .pg-wissen-03-talks__text { order: 2; }
}