/* ‼️ KEINE VERSALIEN (Torsten, 10.09.2026): „alle anderen versalien auch in
      normalschrift." Alle neun Stellen mit `text-transform: uppercase` sind
      entfernt. Im HTML standen die Texte ohnehin schon in normaler
      Schreibweise — nur der Stil wandelte sie um.
      Die weite Sperrung (1,0 bis 1,5 px) ging mit: Sie ist fuer Versalien
      gedacht und zieht normale Schrift auseinander. Dafuer sind die
      Schriftgrade leicht angehoben, sonst wirkten die Zeilen ohne
      Grossbuchstaben zu zierlich. */
/* AFNB — gemeinsames Aussehen aller Seiten.
   Aus der einseitigen Fassung ausgelagert am 25.08.2026.
   Farben und Bedienelemente nach der NM24-Hausregel. */

  :root {
    --nm-blue:     #002060;
    --nm-red:      #960000;
    /* ‼️ Die beiden NM24-Signalfarben (Memory `reference_nm24_cyan_to_magenta`,
       Stand 2026-05-22). Sie tragen auf hellem UND auf dunklem Grund — genau
       deshalb hat Torsten sie am 10.09.2026 fuer die Dreiteilung gewaehlt:
       „ich moechte mint, magenta und weiss/blau (je nach hintergrund)."
       ⛔ Cyan bleibt im ganzen Stack tabu. */
    --nm-magenta:  #FF40FF;
    --nm-mint:     #34D399;
    --header-bg:   #D6E0EF;
    --body-bg:     #EEF4FC;
    --card-bg:     #E0E9F6;
    --card-hover:  #D3DEEC;
    --card-border: rgba(0,32,96,0.12);
  /* Knopffarbe auf dunkelblauen Flaechen. #D6E0EF war zu blass und wirkte weiss
     (Torsten, 09.09.2026). #9FBAE3 ist der NM24-Symbolkachel-Ton — kraeftig
     genug, markentreu, und Weiss bleibt tabu. */
  --btn-hell:    #9FBAE3;
  }

  * { box-sizing: border-box; }

  html { scroll-behavior: smooth; }

  body {
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    background: var(--body-bg);
    color: var(--nm-blue);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
  }

  /* ───────────────────────── KOPFLEISTE ───────────────────────── */
  header {
    background: var(--header-bg);
    /* ‼️ [13.09.2026] SICHERHEITSZONE DES TELEFONS. Die Seite steht auf
       `viewport-fit=cover` — sie reicht also bis unter die Statusleiste und die
       Insel des iPhones. Ohne diese zwei Zeilen liegt der Kopf DAHINTER
       (Torsten: „der header wird von meiner iPhone-Leiste überdeckt").
       `env(safe-area-inset-top)` ist am Rechner 0 — die Regel schadet dort nicht.
       ‼️ Wer die Kopfhoehe aendert, aendert sie an DREI Stellen: hier, in der
          Handyfassung weiter unten und bei `.sprungleiste`, die darunter klebt. */
    height: calc(130px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 40px;
    border-bottom: 4px solid var(--card-border);
    /* ‼️ 10.09.2026: von 50 auf 70 gesetzt. Der Kopf ist `sticky` MIT z-index —
       damit bildet er einen eigenen Stapel, und alles darin (auch die
       Aufklappflaeche mit ihren 60) bleibt auf SEINER Ebene gefangen. Der
       Schleier auf 55 legte sich deshalb ueber das Menue selbst.
       Torsten: „es scheint, als wenn auch das untermenue abgeblendet erscheint."
       ‼️ Wer diesen Wert aendert: Er muss ueber dem Schleier (55) bleiben. */
    position: sticky; top: 0; z-index: 70;
  }
  /* Schriftzug buendig mit der Unterkante des Logos (Torsten, 09.09.2026) */
.brand { display: flex; align-items: flex-end; gap: 18px; flex: 1; min-width: 0; text-decoration: none; }
/* Buendig heisst: GRUNDLINIE des Schriftzugs auf Unterkante der AFNB-Buchstaben.
   `align-items: flex-end` allein reicht nicht — es richtet die Textbox aus, und
   der Zeilenabstand laesst die Schrift darin hoeher enden. Am 09.09.2026
   ausgemessen: 5 px Ausgleich. Die Unterlaenge des „g" ragt dann leicht unter
   die Logo-Kante — das ist typografisch richtig so.
   ‼️ Nach jeder Aenderung an Schriftgroesse, Zeilenabstand oder Logohoehe neu
      messen und am vergroesserten Ausschnitt PRUEFEN, nicht nur rechnen. */
.brand-text { padding-bottom: 0; position: relative; top: 5px; }
  .brand img { height: 62px; width: auto; display: block; }
  .brand-text { font-size: 15px; line-height: 1.35; color: rgba(0,32,96,0.72); max-width: 300px; }

  .head-nav-alt-unbenutzt a {
    font-size: 14.5px; font-weight: 500; color: var(--nm-blue);
    text-decoration: none; white-space: nowrap;
    border-bottom: 2px solid transparent; padding-bottom: 2px;
    transition: color .15s, border-color .15s;
  }
  .head-nav-alt-unbenutzt a:hover { color: var(--nm-red); }

  .btn {
    background: var(--nm-blue); color: #fff; border: none; border-radius: 50px;
    padding: 12px 24px; font-size: 14px; font-weight: 600;
    font-family: inherit; cursor: pointer; text-decoration: none;
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0,32,96,0.18);
    transition: background .15s, transform .15s;
  }
  .btn:hover { background: var(--nm-red); transform: translateY(-1px); }
  .btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

  .btn-quiet {
    background: transparent; color: var(--nm-blue);
    border: 1.5px solid rgba(0,32,96,0.28); box-shadow: none;
  }
  .btn-quiet:hover { background: var(--nm-blue); color: #fff; border-color: var(--nm-blue); }

  .btn-kurz { display: none; }
  .brand img { max-width: 100%; }

  /* Sprunglink: nur sichtbar, wenn er den Tastaturfokus hat */
  .skip {
    position: absolute; left: 12px; top: -60px; z-index: 100;
    background: var(--nm-blue); color: #fff; text-decoration: none;
    padding: 12px 20px; border-radius: 0 0 10px 10px; font-size: 14px; font-weight: 600;
    transition: top .15s;
  }
  .skip:focus { top: 0; }

  /* Tastaturfokus muss ueberall sichtbar sein */
  a:focus-visible, button:focus-visible {
    outline: 3px solid var(--nm-red); outline-offset: 3px; border-radius: 4px;
  }

  /* ───────────────────────── EINSTIEG ───────────────────────── */
  .hero {
    max-width: 1600px;
    margin: 0 auto;
    padding: 72px 40px 8px;
  }
  .hero-inner { max-width: 900px; }
  .hero h1 {
    font-size: 46px; font-weight: 600; line-height: 1.14;
    letter-spacing: -0.8px; margin: 0 0 20px;
  }
  .hero h1 .accent { color: var(--nm-red); }
  .nb { white-space: nowrap; }
  .hero .lead {
    font-size: 18px; line-height: 1.6; color: rgba(0,32,96,0.75);
    margin: 0 0 16px; max-width: 780px;
  }
  .hero .lead-2 {
    font-size: 16px; line-height: 1.6; color: rgba(0,32,96,0.72);
    margin: 0 0 32px; max-width: 780px;
  }
  .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
  .hero-fuer {
    font-size: 13.5px; font-weight: 600; letter-spacing: 0.2px; color: var(--nm-red);
    margin: 0 0 14px;
  }

  /* ───────────────────────── VERTRAUENSBAND ───────────────────────── */
  .proof-wrap { max-width: 1600px; margin: 48px auto 0; padding: 0 40px; }
  .proof {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 18px;
    padding: 28px 32px;
    display: flex; flex-direction: column; gap: 22px;
  }
  .proof-zahlen {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  }
  @media (max-width: 899px) { .proof-zahlen { grid-template-columns: repeat(2, 1fr); } }
  .proof-zahl { display: flex; flex-direction: column; gap: 3px; }
  .proof-zahl .z { font-size: 26px; font-weight: 600; letter-spacing: -0.5px; line-height: 1.1; }
  .proof-zahl .w { font-size: 13px; line-height: 1.4; color: rgba(0,32,96,0.75); }
  .proof-namen { border-top: 1px solid var(--card-border); padding-top: 20px; }
  .proof-label {
    font-size: 12.5px; font-weight: 700; letter-spacing: 0.2px; color: rgba(0,32,96,0.72); margin: 0 0 8px;
  }
  .proof-liste { font-size: 14px; line-height: 1.75; color: rgba(0,32,96,0.82); margin: 0; }

  /* ───────────────────────── ABSCHNITTE ───────────────────────── */
  /* ‼️ Unten MUSS Polster stehen. Ohne das klebt der Inhalt an der Kante
     des naechsten Abschnitts — bei farbigen Abschnitten sofort sichtbar.
     Am 09.09.2026 von Torsten gemeldet, betraf alle Seiten. */
  .section { max-width: 1600px; margin: 0 auto; padding: 56px 40px 76px; }
  /* ‼️ [10.09.2026] KEIN Deckel mehr — Torsten: „Bitte mache Überschriften
     grundsätzlich immer über die komplette Kontextbreite damit ich hier nicht
     jede einzelne Überschrift immer extra reklamieren muss."
     Der Deckel wandert auf den Fliesstext DARUNTER: Der braucht eine ruhige
     Zeilenlaenge, die Ueberschrift nicht. */
  .section-head { margin-bottom: 28px; max-width: none; }
  .section-head > p { max-width: 820px; }
  .section-eyebrow {
    font-size: 12.5px; font-weight: 700; letter-spacing: 0.2px; color: rgba(0,32,96,0.5); margin: 0 0 10px;
  }
  .section-head h2 {
    font-size: 32px; font-weight: 600; letter-spacing: -0.5px;
    margin: 0 0 12px; line-height: 1.2;
  }
  .section-head p { font-size: 16px; line-height: 1.6; color: rgba(0,32,96,0.72); margin: 0; }

  .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  @media (max-width: 1279px) { .grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 899px)  { .grid, .grid-2 { grid-template-columns: 1fr; } }

  /* ───────────────────────── KACHEL ───────────────────────── */
  .tile {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 18px;
    padding: 28px 28px 24px;
    display: flex; flex-direction: column; gap: 14px;
    position: relative; overflow: hidden;
    min-height: 280px;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
  }
  .tile:hover { background-color: var(--card-hover); transform: translateY(-4px); box-shadow: 0 14px 32px rgba(0,32,96,0.15); }
  .tile > * { position: relative; z-index: 1; }

  /* Großes Symbol als ruhiges Wasserzeichen rechts */
  .tile-watermark {
    position: absolute; right: -28px; top: 50%; transform: translateY(-50%);
    width: 190px; height: 190px; z-index: 0; pointer-events: none;
    color: rgba(0,32,96,0.09);
  }
  .tile-watermark svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }

  .tile-head { display: flex; align-items: center; gap: 10px; min-height: 26px; flex-wrap: wrap; }
  .tile-status {
    font-size: 10.5px; font-weight: 700; padding: 4px 10px; border-radius: 50px;
    letter-spacing: 0.1px;
  }
  .tile-status.ok   { background: rgba(45,180,99,0.18);  color: #14512d; }
  .tile-status.soon { background: rgba(0,32,96,0.10);    color: rgba(0,32,96,0.78); }
  .tile-status.date { background: rgba(150,0,0,0.10);    color: var(--nm-red); }
  .tile-status.info { background: rgba(0,32,96,0.12);    color: var(--nm-blue); }

  .tile-title { font-size: 21px; font-weight: 600; margin: 0; line-height: 1.25; }
  .tile-desc  { font-size: 14px; line-height: 1.55; color: rgba(0,32,96,0.78); margin: 0; flex: 1; max-width: 80%; }
  .tile-meta  { font-size: 12.5px; color: rgba(0,32,96,0.72); font-weight: 500; margin: 0; }

  .tile-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; max-width: 82%; }
  .tile-list li { font-size: 13.5px; line-height: 1.45; color: rgba(0,32,96,0.75); padding-left: 18px; position: relative; }
  .tile-list li::before {
    content: ''; position: absolute; left: 0; top: 7px;
    width: 7px; height: 7px; border-radius: 50%; background: rgba(0,32,96,0.35);
  }

  .tile-cta {
    background: var(--nm-blue); color: #fff; border: none; border-radius: 50px;
    padding: 10px 22px; font-size: 13.5px; font-weight: 600;
    font-family: inherit; cursor: pointer; text-decoration: none;
    display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
    box-shadow: 0 4px 12px rgba(0,32,96,0.18);
    margin-top: 4px; transition: background .15s;
  }
  .tile-cta:hover { background: var(--nm-red); }
  .tile-cta.soon {
    background: transparent; color: rgba(0,32,96,0.75);
    border: 1.5px solid rgba(0,32,96,0.32); box-shadow: none; cursor: default;
  }
  .tile-cta.soon:hover { background: transparent; }
  .tile-cta svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

  /* Kachel im Zustand „in Vorbereitung" */
  .tile.upcoming { background-color: var(--body-bg); }
  .tile.upcoming:hover { background-color: var(--card-bg); }
  .tile.upcoming .tile-title { color: rgba(0,32,96,0.82); }
  .tile.upcoming .tile-desc, .tile.upcoming .tile-list li { color: rgba(0,32,96,0.75); }

  /* ───────────────── Phasen-Kachel mit Nummer ───────────────── */
  .phase-num {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--nm-blue); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 600; flex: 0 0 auto;
  }

  /* ───────────────────────── BANNER ───────────────────────── */
  .banner {
    max-width: 1600px; margin: 56px auto 0;
    padding: 30px 40px;
    background: linear-gradient(90deg, var(--header-bg) 0%, var(--card-bg) 100%);
    border: 1px solid var(--card-border); border-radius: 18px;
    display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  }
  .banner-wrap { padding: 0 40px; }
  .banner-weit { margin: 0; padding: 34px 40px; position: relative; overflow: hidden; }
  .banner-weit > * { position: relative; z-index: 1; }
  .banner-watermark {
    position: absolute; right: -30px; top: 50%; transform: translateY(-50%);
    width: 420px; height: 210px; z-index: 0; pointer-events: none;
    color: rgba(0,32,96,0.08);
  }
  .banner-watermark svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 0.9; stroke-linecap: round; stroke-linejoin: round; }
  @media (max-width: 1100px) { .banner-watermark { display: none; } }
  .banner-weit .section-eyebrow { margin-bottom: 8px; }
  .banner-weit h2 { font-size: 30px; font-weight: 600; letter-spacing: -0.5px; margin: 0 0 14px; line-height: 1.2; }
  .banner-weit .banner-text p { max-width: 900px; }
  .banner-weit .banner-text p + p { margin-top: 12px; }
  .banner-text { flex: 1; min-width: 300px; }
  .banner-text h3 { font-size: 24px; font-weight: 600; margin: 0 0 8px; letter-spacing: -0.3px; }
  .banner-text p { font-size: 15px; line-height: 1.6; color: rgba(0,32,96,0.72); margin: 0; }
  .banner-actions { display: flex; gap: 12px; flex-wrap: wrap; }

  /* ───────────────────────── FUSSLEISTE ───────────────────────── */
  footer {
    margin-top: 72px;
    background: var(--header-bg);
    border-top: 3px solid var(--card-border);
    padding: 40px 40px 32px;
  }
  .footer-inner {
    max-width: 1600px; margin: 0 auto;
    display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap;
    font-size: 13px; color: rgba(0,32,96,0.7); line-height: 1.7;
  }
  .footer-inner strong { display: block; font-size: 14px; color: var(--nm-blue); margin-bottom: 6px; font-weight: 600; }
  .footer-links { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
  .footer-links a { color: rgba(0,32,96,0.75); text-decoration: none; }
  .footer-links a:hover { color: var(--nm-red); }

  /* ───────────────────────── BUCHUNGS-FENSTER ───────────────────────── */
  .modal {
    display: none; position: fixed; inset: 0; z-index: 200;
    background: rgba(0,0,0,0.4);
    align-items: center; justify-content: center; padding: 20px;
  }
  .modal.open { display: flex; }
  .modal-card {
    background: var(--card-bg); border-radius: 18px;
    width: min(1150px, 96vw); height: min(90vh, 1500px);
    padding: 18px 18px 14px; position: relative;
    display: flex; flex-direction: column; gap: 10px;
    box-shadow: 0 20px 60px rgba(0,32,96,0.28);
  }
  .modal-card h2 { margin: 0; font-size: 17px; font-weight: 600; padding-right: 50px; letter-spacing: -0.2px; }
  .modal-close {
    position: absolute; top: 12px; right: 12px;
    width: 34px; height: 34px; border-radius: 50%;
    border: none; background: rgba(0,32,96,0.1); color: var(--nm-blue);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
  }
  .modal-close:hover { background: rgba(150,0,0,0.15); color: var(--nm-red); }
  .modal-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }
  .modal-frame { flex: 1; min-height: 0; border-radius: 10px; overflow: hidden; background: var(--body-bg); }
  .modal-frame iframe { width: 100%; height: 100%; border: 0; }

  /* Fenster ohne Kalender: nur so hoch wie noetig */
  .modal-card.modal-schmal { width: min(560px, 94vw); height: auto; max-height: 90vh; padding: 26px 28px 24px; }
  .modal-card.modal-schmal h2 { font-size: 21px; line-height: 1.3; }
  .modal-inhalt { display: flex; flex-direction: column; gap: 18px; min-height: 0; }
  .kennen-zeile { font-size: 15px; line-height: 1.6; color: rgba(0,32,96,0.82); margin: 0; }
  .kennen-wege { display: flex; gap: 12px; flex-wrap: wrap; }
  .kennen-wege .btn { font-size: 14px; }
  .kennen-fuss { font-size: 13px; line-height: 1.55; color: rgba(0,32,96,0.7); margin: 0; }

  /* ───────────────────────── MOBIL ───────────────────────── */
  /* ‼️ [10.09.2026] Hier STAND die Umschaltung auf die Schublade
     (`.nav-punkte { display: none }`, `.nav-burger { display: inline-flex }`,
     `.brand-text { display: none }`). Sie war WIRKUNGSLOS: Die Grundregeln
     dieser drei Klassen stehen im Navigationsblock am Dateiende, also SPAETER
     im Stil. Bei gleicher Spezifitaet gewinnt die spaetere — auf dem Handy
     blieb die Menueleiste stehen, das Logo wurde hinausgedraengt und der
     Burger blieb aus. Gefunden beim Nachmessen bei 390 px, nicht mit blossem
     Auge. Die Umschaltung steht jetzt am Dateiende bei ihren Grundregeln. */
  @media (max-width: 767px) {
    header { height: calc(92px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 20px 0; gap: 12px; }
    .brand img { height: 38px; }
    .btn-head { padding: 10px 16px; font-size: 13px; gap: 6px; }
    .hero { padding: 44px 20px 8px; }
    .hero h1 { font-size: 32px; letter-spacing: -0.5px; }
    .hero .lead { font-size: 16.5px; }
    .section { padding: 44px 20px 56px; }
    .section-head h2 { font-size: 26px; }
    .banner-wrap { padding: 0 20px; }
    .banner { padding: 26px 24px; }
    .tile { padding: 24px 22px 22px; min-height: 0; }
    .tile-desc, .tile-list { max-width: 100%; }
    .tile-watermark { width: 140px; right: -34px; }
    footer { padding: 32px 20px 28px; }
  }

  @media (max-width: 430px) {
    .btn-lang { display: none; }
    .btn-kurz { display: inline; }
    .brand img { height: 34px; }
  }

/* ═══════════════ MEHRSEITER — ergaenzt am 25.08.2026 ═══════════════ */

/* Kachel, die selbst ein Verweis ist */
a.tile-link { text-decoration: none; color: inherit; cursor: pointer; }
a.tile-link .tile-cta { pointer-events: none; }
a.tile-link:hover .tile-cta { background: var(--nm-red); }
a.tile-link.upcoming:hover .tile-cta { background: var(--nm-blue); }

/* Aktive Seite in der Navigation */
.footer-nav a.aktiv { color: var(--nm-red); font-weight: 600; }

/* Fussnavigation */
.footer-nav { display: flex; flex-direction: column; gap: 6px; }
.footer-nav a { color: rgba(0,32,96,0.75); text-decoration: none; font-size: 13px; }
.footer-nav a:hover { color: var(--nm-red); }

/* Kopfbereich einer Unterseite */
.seiten-kopf { max-width: 1600px; margin: 0 auto; padding: 64px 40px 0; }
/* [12.09.2026] Torsten: „mach den Abstand zum 2. Abschnitt groesser, klebt
   direkt aneinander." Der Kopf hatte unten gar keine Polsterung — wo ein
   DUNKLER Abschnitt folgt, endete der Text unmittelbar an der Farbkante.
   Betrifft Konzept, Mitgliedschaft, Kennenlernen und Impressum. */
.seiten-kopf:has(+ .section.dunkel) { padding-bottom: 54px; }
/* ── Der Seitenkopf nutzt die Breite, ohne lange Zeilen zu erzeugen ─────────
   Torsten, 10.09.2026: „ich stimme dir zu, dass texte nicht ueber die gesamte
   breite gehen sollten. aber wenn es dann rechts so leer ist, sieht das auch
   nicht gut aus. was koennen wir machen? Vielleicht den text in 2 spalten?"

   KEIN Zeitungssatz: Die beiden Absaetze sind zwei und drei Zeilen kurz —
   fliessender Spaltensatz zwingt das Auge nach unten und wieder hoch, fuer
   fuenf Zeilen lohnt das nie.

   Stattdessen stehen die BEIDEN VORHANDENEN Absaetze nebeneinander: links die
   Kernaussage, rechts die Vertiefung, optisch abgesetzt. Jede Zeile bleibt
   kurz, die Flaeche ist gefuellt, und es entsteht eine Rangfolge statt zweier
   gleich lauter Bloecke.
   ‼️ Alle vier Seitenkoepfe haben genau `lead` und `lead-2` — am 10.09.2026
      geprueft. Kaeme je ein dritter Absatz dazu, landet er in der linken
      Spalte; dann hier nachsehen. */
/* ‼️ Torsten, 10.09.2026: „die zwei textspalten sollten jeweils so breit sein,
      dass sie in der summe den kontextbereich abdecken."
      Vorher waren sie auf 1280 px gedeckelt und endeten sichtbar vor dem
      rechten Rand, waehrend Ueberschrift und Kacheln darunter weiterliefen.
      Jetzt ohne Deckel — die Breite gibt der Abschnitt vor (1600 px minus
      2 x 40 px Polsterung). */
.seiten-kopf .innen {
  /* ‼️ 1.12 : 1 bei 48 px Abstand (Torsten, 10.09.2026: „in der linken spalte
     wuerde das wort Grundlagen noch locker in die erste zeile passen").
     Gemessen: Es fehlten genau 19 px. Jetzt hat die linke Spalte 778 statt
     746 px, die rechte 694 — beide unter 90 Zeichen je Zeile. */
  max-width: none;
  display: grid; grid-template-columns: 1.12fr 1fr;
  column-gap: 48px; align-items: start;
}
.seiten-kopf .innen > h1,
.seiten-kopf .innen > .zurueck { grid-column: 1 / -1; }
/* Die Ueberschrift bleibt schmaler als das Raster — 1280 px waeren fuer eine
   40-px-Zeile zu weit. */
/* ‼️ Ebenfalls ohne Deckel (10.09.2026) — siehe Vermerk bei `.section-head`.
   Auf vier Seiten fehlten der Ueberschrift dadurch 620 px. */
.seiten-kopf .innen > h1 { max-width: none; }
.seiten-kopf .lead-2 {
  border-left: 3px solid rgba(0,32,96,0.18);
  padding-left: 22px;
}
@media (max-width: 900px) {
  .seiten-kopf .innen { grid-template-columns: 1fr; row-gap: 4px; max-width: 860px; }
  .seiten-kopf .lead-2 { border-left: 0; padding-left: 0; }
}
.seiten-kopf h1 { font-size: 40px; font-weight: 600; line-height: 1.15; letter-spacing: -0.7px; margin: 0 0 18px; }
.seiten-kopf h1 .accent { color: var(--nm-red); }
/* ‼️ GLEICHE SCHRIFTGROESSE (Torsten, 10.09.2026: „warum haben die texte
      unterschiedliche schriftgroessen?").
      Die Abstufung 18/16 px stammte aus dem alten Aufbau, in dem die beiden
      Absaetze UNTEREINANDER standen — dort trug sie die Rangfolge. Seit sie
      nebeneinander stehen, liest sich derselbe Unterschied wie ein Fehler.
      Die Rangfolge tragen jetzt der senkrechte Strich und die etwas hellere
      Farbe rechts. */
.seiten-kopf .lead,
.seiten-kopf .lead-2 { font-size: 17px; line-height: 1.62; margin: 0; }
.seiten-kopf .lead { color: rgba(0,32,96,0.8); }
.seiten-kopf .lead-2 { color: rgba(0,32,96,0.7); }
.seiten-kopf .zurueck,
.leistung-kopf .zurueck {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 500; color: rgba(0,32,96,0.72);
  text-decoration: none; margin-bottom: 18px;
}
.seiten-kopf .zurueck:hover,
.leistung-kopf .zurueck:hover { color: var(--nm-red); }
.seiten-kopf .zurueck svg,
.leistung-kopf .zurueck svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Ablauf in nummerierten Schritten */
.schritte { display: flex; flex-direction: column; gap: 0; max-width: 900px; margin: 0; padding: 0; list-style: none; counter-reset: schritt; }
.schritte li {
  position: relative; padding: 0 0 30px 62px; counter-increment: schritt;
}
.schritte li::before {
  content: counter(schritt);
  position: absolute; left: 0; top: 0;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--nm-blue); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 600;
}
.schritte li::after {
  content: ''; position: absolute; left: 19.5px; top: 44px; bottom: 4px;
  width: 2px; background: rgba(0,32,96,0.16);
}
.schritte li:last-child { padding-bottom: 0; }
.schritte li:last-child::after { display: none; }
.schritte h3 { font-size: 18px; font-weight: 600; margin: 8px 0 6px; line-height: 1.3; }
.schritte p { font-size: 15px; line-height: 1.6; color: rgba(0,32,96,0.78); margin: 0; }

/* Aufzaehlung mit Haken */
/* ‼️ [13.09.2026] Abstand nach OBEN (Torsten: „das klebt mir zu dicht an dem
   Text unter dem Titel"). `.haken` stand auf `margin: 0` und hing damit direkt
   am Absatz darüber — derselbe Fehler, der am 12.09. schon bei den Pillen
   auffiel und dort behoben wurde; die Häkchenlisten waren übersehen worden.
   `:first-child` bleibt bei 0: Steht die Liste als erstes in ihrem Kasten,
   soll oben kein Loch entstehen. */
.haken { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 28px; max-width: 900px; }
.haken:first-child { margin-top: 0; }
@media (max-width: 767px) { .haken { grid-template-columns: 1fr; } }
.haken li { position: relative; padding-left: 30px; font-size: 15px; line-height: 1.55; color: rgba(0,32,96,0.82); }
.haken li::before {
  content: ''; position: absolute; left: 0; top: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: rgba(0,32,96,0.10);
}
.haken li::after {
  content: ''; position: absolute; left: 5px; top: 8px;
  width: 8px; height: 4px; border-left: 2px solid var(--nm-blue); border-bottom: 2px solid var(--nm-blue);
  transform: rotate(-45deg);
}

@media (max-width: 767px) {
  .seiten-kopf { padding: 40px 20px 0; }
  .seiten-kopf:has(+ .section.dunkel) { padding-bottom: 34px; }
  .seiten-kopf:has(+ .section.dunkel) { padding-bottom: 32px; }
  .seiten-kopf h1 { font-size: 29px; }
  .schritte li { padding-left: 52px; }
  .schritte li::before { width: 34px; height: 34px; font-size: 15px; }
  .schritte li::after { left: 16.5px; top: 38px; }
}

/* ═══════════════ NEUER STIL — 25.08.2026 ═══════════════
   Weg vom Kachelraster einer Arbeitsoberflaeche, hin zu wechselnden
   Abschnittsformen: grosse Flaechen, Bilder, dunkle Passagen fuer Tiefe,
   Typografie als Gestaltungsmittel. Farben unveraendert nach NM24-Hausregel. */

/* ── Bilder und ihre Platzhalter ───────────────────────────────────── */
.bild { margin: 0; border-radius: 18px; overflow: hidden; background: var(--card-bg); width: 100%; }
.bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bild-leer {
  display: flex; align-items: center; justify-content: center;
  background:
    repeating-linear-gradient(135deg, rgba(0,32,96,0.035) 0 14px, rgba(0,32,96,0.07) 14px 28px);
  border: 2px dashed rgba(0,32,96,0.22);
  padding: 24px; text-align: center;
}
.bild-leer-text {
  font-size: 14px; line-height: 1.5; font-weight: 500; color: rgba(0,32,96,0.68);   /* 0,62 ergab 4,46 — knapp unter AA */
  max-width: 320px; display: flex; flex-direction: column; gap: 8px;
}
.bild-leer-text em {
  font-style: normal; font-size: 12px; font-family: ui-monospace, Menlo, monospace;
  color: rgba(0,32,96,0.72); word-break: break-all;   /* 0,58 ergab 3,96 */
}
.dunkel .bild-leer {
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 14px, rgba(255,255,255,0.09) 14px 28px);
  border-color: rgba(255,255,255,0.28);
}
.dunkel .bild-leer-text { color: rgba(255,255,255,0.78); }
.dunkel .bild-leer-text em { color: rgba(255,255,255,0.66); }

/* ── Grosser Einstieg mit Bild ─────────────────────────────────────── */
.buehne { position: relative; background: var(--nm-blue); overflow: hidden; }
.buehne-bild { position: absolute; inset: 0; z-index: 0; }
.buehne-bild .bild { height: 100%; border-radius: 0; background: transparent; }
.buehne-bild .bild img { filter: saturate(0.85); }
.buehne-bild::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(0,32,96,0.97) 0%, rgba(0,32,96,0.93) 46%, rgba(0,32,96,0.86) 74%, rgba(0,32,96,0.78) 100%);
}
.buehne-innen {
  position: relative; z-index: 1;
  max-width: 1600px; margin: 0 auto; padding: 96px 40px 88px;
}
.buehne-text { max-width: 720px; color: #fff; }
.buehne-fuer {
  font-size: 13.5px; font-weight: 600; letter-spacing: 0.2px;
  color: rgba(255,255,255,0.8); margin: 0 0 18px;
}
.buehne h1 {
  font-size: 52px; font-weight: 600; line-height: 1.1; letter-spacing: -1.3px;
  margin: 0 0 24px; color: #fff;
}
.buehne h1 .hell { color: #9FBAE3; }
.buehne .lead { font-size: 20px; line-height: 1.55; color: rgba(255,255,255,0.9); margin: 0 0 16px; max-width: 660px; }
.buehne .lead-2 { font-size: 17px; line-height: 1.6; color: rgba(255,255,255,0.75); margin: 0 0 34px; max-width: 660px; }
.buehne .btn { background: var(--btn-hell); color: var(--nm-blue); box-shadow: 0 8px 24px rgba(0,0,0,0.22); }
.buehne .btn:hover { background: var(--nm-red); color: #fff; }
.buehne .btn-quiet { background: transparent; color: #fff; border-color: rgba(255,255,255,0.55); box-shadow: none; }
.buehne .btn-quiet:hover { background: var(--btn-hell); color: var(--nm-blue); border-color: var(--btn-hell); }

/* ── Dunkler Abschnitt ─────────────────────────────────────────────── */
.dunkel { background: var(--nm-blue); color: #fff; }
.dunkel .section-eyebrow { color: rgba(255,255,255,0.65); }
.dunkel .section-head h2 { color: #fff; }
.dunkel .section-head p,
.dunkel p { color: rgba(255,255,255,0.82); }
.dunkel h3 { color: #fff; }
.dunkel .btn { background: var(--btn-hell); color: var(--nm-blue); }
.dunkel .btn:hover { background: var(--nm-red); color: #fff; }
.dunkel .btn-quiet { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); }
.dunkel .btn-quiet:hover { background: var(--btn-hell); color: var(--nm-blue); }
.dunkel-innen { max-width: 1600px; margin: 0 auto; padding: 84px 40px; }

/* ── Grosse Aussage, nur Typografie ────────────────────────────────── */
.aussage { max-width: 1600px; margin: 0 auto; padding: 96px 40px; }
/* ‼️ [10.09.2026] `>` ist PFLICHT, und `max-width: none` ebenso.
   * Ohne `>` traf die Regel JEDEN Absatz im Abschnitt — auch die Zeile unter
     den beiden CTA-Bildern. Torsten: „Der Text unter den beiden Bildern ist
     viel zu groß. Das sind doch keine Überschriften oder Titel." Sie stand
     dort bei 25 px statt 15 px, weil `.aussage p` (0,1,1) die Regel
     `.cta-was` (0,1,0) schlug.
   * Der Deckel von 1080 px ist weg, weil dieser Absatz eine ÜBERSCHRIFT ist.
     Torsten am 10.09.2026: „Bitte mache Überschriften grundsätzlich immer über
     die komplette Kontextbreite." Die Zeile „Lerne uns kennen …" brach genau
     deswegen um. */
.aussage > p {
  font-size: 38px; font-weight: 500; line-height: 1.28; letter-spacing: -0.8px;
  max-width: none; margin: 0; color: var(--nm-blue);
}
.aussage .quelle { font-size: 15px; font-weight: 500; color: rgba(0,32,96,0.65); margin-top: 22px; letter-spacing: 0; }
.dunkel .aussage > p { color: #fff; }
.dunkel .aussage .quelle { color: rgba(255,255,255,0.7); }

/* ── Wechselnde Reihe: Bild und Text nebeneinander ─────────────────── */
.reihe {
  max-width: 1600px; margin: 0 auto; padding: 72px 40px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
  align-items: start;   /* Torsten 09.09.2026: Bild und Text oben buendig */
}
.reihe.gedreht .reihe-bild { order: 2; }
.reihe-text h2 { font-size: 34px; font-weight: 600; letter-spacing: -0.6px; line-height: 1.18; margin: 0 0 16px; }
.reihe-text h3 { font-size: 26px; font-weight: 600; letter-spacing: -0.4px; line-height: 1.22; margin: 0 0 14px; }
.reihe-text p { font-size: 16.5px; line-height: 1.65; color: rgba(0,32,96,0.8); margin: 0 0 14px; }
.reihe-text p:last-of-type { margin-bottom: 0; }
.reihe-nummer {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--nm-blue); color: #fff; font-size: 19px; font-weight: 600;
  margin-bottom: 18px;
}
.dunkel .reihe-nummer { background: var(--btn-hell); color: var(--nm-blue); }
@media (max-width: 899px) {
  .reihe { grid-template-columns: 1fr; gap: 28px; padding: 48px 20px; }
  .reihe.gedreht .reihe-bild { order: 0; }
}

/* ── Porträts der Forschenden ──────────────────────────────────────── */
.koepfe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 1100px) { .koepfe { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .koepfe { grid-template-columns: 1fr; } }
.kopf .bild { margin-bottom: 14px; }
.kopf b { display: block; font-size: 16px; font-weight: 600; line-height: 1.3; margin-bottom: 4px; }
.kopf span { font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,0.72); }

/* ── Kennzahlen gross ──────────────────────────────────────────────── */
.zahlen-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
@media (max-width: 899px) { .zahlen-band { grid-template-columns: repeat(2, 1fr); } }
.zahl b { display: block; font-size: 46px; font-weight: 600; letter-spacing: -1.4px; line-height: 1; margin-bottom: 8px; }
.zahl span { font-size: 14.5px; line-height: 1.45; color: rgba(255,255,255,0.75); }

@media (max-width: 767px) {
  .buehne-innen { padding: 72px 20px 64px; }
  .buehne h1 { font-size: 34px; letter-spacing: -0.8px; }
  .buehne .lead { font-size: 17px; }
  .dunkel-innen { padding: 56px 20px; }
  .aussage { padding: 56px 20px; }
  .aussage > p { font-size: 25px; letter-spacing: -0.4px; }
  .reihe-text h2 { font-size: 26px; }
  .zahl b { font-size: 36px; }
}

/* ── Verweise im Fliesstext ────────────────────────────────────────── */
/* ‼️ :not(.btn):not(.tile-cta) ist PFLICHT — sonst faerben diese Regeln die
   Knoepfe um und machen sie unsichtbar (blau auf blau bzw. weiss auf weiss).
   Am 25.08.2026 waren dadurch acht Knoepfe auf sieben Seiten unsichtbar. */
.reihe-text a:not(.btn):not(.tile-cta):not(.tool-kachel),
.aussage a:not(.btn):not(.tile-cta):not(.tool-kachel),
.tile-desc a:not(.btn):not(.tile-cta):not(.tool-kachel),
.kennen-zeile a:not(.btn):not(.tile-cta):not(.tool-kachel),
.banner-text a:not(.btn):not(.tile-cta):not(.tool-kachel) {
  color: var(--nm-blue); font-weight: 600; text-decoration: none;
  border-bottom: 2px solid rgba(0,32,96,0.28); padding-bottom: 1px;
  transition: color .15s, border-color .15s;
}
.reihe-text a:not(.btn):not(.tile-cta):not(.tool-kachel):hover,
.aussage a:not(.btn):not(.tile-cta):not(.tool-kachel):hover,
.tile-desc a:not(.btn):not(.tile-cta):not(.tool-kachel):hover,
.kennen-zeile a:not(.btn):not(.tile-cta):not(.tool-kachel):hover,
.banner-text a:not(.btn):not(.tile-cta):not(.tool-kachel):hover {
  color: var(--nm-red); border-bottom-color: var(--nm-red);
}
.dunkel .reihe-text a:not(.btn):not(.tile-cta):not(.tool-kachel),
.dunkel .aussage a:not(.btn):not(.tile-cta):not(.tool-kachel),
.dunkel p a:not(.btn):not(.tile-cta):not(.tool-kachel) {
  color: #fff; border-bottom-color: rgba(255,255,255,0.45);
}
.dunkel .reihe-text a:not(.btn):not(.tile-cta):not(.tool-kachel):hover,
.dunkel .aussage a:not(.btn):not(.tile-cta):not(.tool-kachel):hover,
.dunkel p a:not(.btn):not(.tile-cta):not(.tool-kachel):hover {
  color: #9FBAE3; border-bottom-color: #9FBAE3;
}
/* Fussleiste, Navigation und Knoepfe behalten ihre eigene Gestaltung */
footer a, .head-nav a, .footer-nav a, .btn, .tile-cta, a.kopf { border-bottom: none; }

/* ‼️ Knoepfe duerfen NICHT von den Verweis-Regeln erfasst werden.
   Am 25.08.2026 war „Zum Kennenlernen" im dunklen Abschnitt weiss auf weiss
   und damit unsichtbar: `.dunkel .aussage a` schlug `.dunkel .btn`.
   Diese Regeln stehen bewusst am Ende und sind spezifischer. */
.dunkel .aussage a.btn,
.dunkel .reihe-text a.btn,
.dunkel p a.btn,
.dunkel a.btn { background: var(--btn-hell); color: var(--nm-blue); border-bottom: none; }
.dunkel .aussage a.btn:hover,
.dunkel .reihe-text a.btn:hover,
.dunkel p a.btn:hover,
.dunkel a.btn:hover { background: var(--nm-red); color: #fff; }

.dunkel .aussage a.btn-quiet,
.dunkel a.btn-quiet { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.5); }
.dunkel .aussage a.btn-quiet:hover,
.dunkel a.btn-quiet:hover { background: var(--btn-hell); color: var(--nm-blue); border-color: var(--btn-hell); }

.buehne a.btn { background: var(--btn-hell); color: var(--nm-blue); border-bottom: none; }
.buehne a.btn:hover { background: var(--nm-red); color: #fff; }
.buehne a.btn-quiet { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.55); }
.buehne a.btn-quiet:hover { background: var(--btn-hell); color: var(--nm-blue); border-color: var(--btn-hell); }

/* ═══════════════ BEWEGUNG — 25.08.2026 ═══════════════
   Grundsatz: Bewegung fuehrt den Blick, sie faellt nicht auf.
   Kurz (0,5–0,7 s), einmalig, leicht versetzt. Keine Einfluege von der Seite.

   ‼️ ZWEI PFLICHTEN, die hier eingebaut sind:

   1. Ohne JavaScript bleibt ALLES sichtbar. Die Startwerte (unsichtbar,
      leicht verschoben) setzt erst das Skript ueber die Klasse `js` am
      html-Element. Faellt das Skript aus, sieht der Besucher die
      vollstaendige Seite statt einer leeren.

   2. `prefers-reduced-motion` wird respektiert. Wer im Betriebssystem
      „Bewegung reduzieren" gesetzt hat, bekommt gar keine Animation —
      Menschen mit Gleichgewichtsstoerungen wird von Bewegung schlecht.
      Das ist WCAG 2.3.3 und bei einer Akademie fuer Gehirnforschung
      nicht verhandelbar. */

.js .auf {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .62s cubic-bezier(.22,.61,.36,1),
              transform .62s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.js .auf.da { opacity: 1; transform: none; }

/* Leichter Versatz, wenn mehrere Elemente nebeneinander stehen */
.js .auf.v1 { transition-delay: .07s; }
.js .auf.v2 { transition-delay: .14s; }
.js .auf.v3 { transition-delay: .21s; }

/* Die Buehne blendet sofort ein, nicht erst beim Scrollen */
.js .buehne .auf { transition-delay: .1s; }

/* Bilder: sehr dezentes Heranzoomen beim Ueberfahren */
.bild img { transition: transform .7s cubic-bezier(.22,.61,.36,1); }
a:hover > .bild img,
a:hover .bild img,
.reihe:hover .reihe-bild .bild img { transform: scale(1.035); }

/* Kopfleiste loest sich beim Scrollen vom Inhalt */
header { transition: box-shadow .25s, background-color .25s; }
header.gescrollt { box-shadow: 0 6px 24px rgba(0,32,96,0.14); }

/* Zahlen, die hochzaehlen: gleiche Breite, damit nichts springt */
.zahl b { font-variant-numeric: tabular-nums; }

/* ── Wer weniger Bewegung will, bekommt keine ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .js .auf { opacity: 1 !important; transform: none !important; transition: none !important; }
  .bild img { transition: none !important; }
  a:hover > .bild img, a:hover .bild img, .reihe:hover .reihe-bild .bild img { transform: none !important; }
  header { transition: none !important; }
  html { scroll-behavior: auto !important; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* ═══════════════ LEISTUNGSABSCHNITTE — 09.09.2026 ═══════════════ */

/* Video-Platzhalter: wie Bild, aber mit Abspielzeichen */
.bild-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.bild-leer-video { position: relative; }
.bild-leer-video::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 62px; height: 62px; margin: -31px 0 0 -31px;
  border-radius: 50%; border: 2.5px solid rgba(0,32,96,0.3);
  background: rgba(0,32,96,0.06);
}
.bild-leer-video::before {
  content: ''; position: absolute; left: 50%; top: 50%; z-index: 1;
  margin: -11px 0 0 -6px;
  border-left: 18px solid rgba(0,32,96,0.42);
  border-top: 11px solid transparent; border-bottom: 11px solid transparent;
}
.dunkel .bild-leer-video::after { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.08); }
.dunkel .bild-leer-video::before { border-left-color: rgba(255,255,255,0.55); }
.buehne .bild-leer-video::after { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.08); }
.buehne .bild-leer-video::before { border-left-color: rgba(255,255,255,0.55); }

/* ── Ein Leistungsbaustein ────────────────────────────────────────── */
.leistung { border-top: 1px solid var(--card-border); }
.leistung:first-of-type { border-top: none; }
.leistung-innen {
  max-width: 1600px; margin: 0 auto; padding: 84px 40px;
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px;
  align-items: start;   /* Torsten 09.09.2026: Bild und Text oben buendig */
}
/* ‼️ `gedreht` sitzt am inneren Raster, nicht an der Section — beide Formen
   werden abgedeckt, damit der Seitenwechsel sicher greift. */
.leistung.gedreht .leistung-bild,
.leistung-innen.gedreht .leistung-bild { order: 2; }
/* ‼️ [10.09.2026] UNGLEICH HOHE CLIPS — Torsten: „warum haben die videoclips
   auf der startseite unterschiedliche formate. mal nur ca. 380 und mal ca. 440
   pixel hoehe?"

   Ursache: Das Raster ist absichtlich ungleich (`1fr 1.15fr`) — die TEXTspalte
   soll breiter sein. `gedreht` tauscht aber nur die REIHENFOLGE der Kinder,
   nicht die Spaltenbreiten. Damit landete das Bild mal in der schmalen, mal in
   der breiten Spalte — bei 16:9 also 381 px hoch gegen 438 px. Alle vier Clips
   haben dasselbe Seitenverhaeltnis, es lag nie am Material.

   Fix: Bei `gedreht` kehren sich die Spaltenbreiten mit um. So bleibt die
   Textspalte immer die breitere und das Bild immer gleich gross. */
.leistung-innen.gedreht { grid-template-columns: 1.15fr 1fr; }
/* ‼️ Torsten, 10.09.2026: „bitte verwende keine GROSSBUCHSTABEN. Schreibe in
      normalen Buchstaben." Die Versalien standen direkt im HTML, nicht im
      Stil — sie sind dort ersetzt. Die weite Sperrung (1,6 px) war fuer
      Versalien gedacht und zieht normale Schrift unschoen auseinander. */
.leistung-nummer {
  font-size: 13.5px; font-weight: 700; letter-spacing: 0.3px;
  color: rgba(0,32,96,0.72); margin: 0 0 12px;
}
.leistung h2 {
  font-size: 36px; font-weight: 600; letter-spacing: -0.7px; line-height: 1.15;
  margin: 0 0 16px;
}
.leistung .kurz {
  font-size: 18px; line-height: 1.6; color: rgba(0,32,96,0.82); margin: 0 0 14px;
}
.leistung .dazu {
  font-size: 16px; line-height: 1.65; color: rgba(0,32,96,0.72); margin: 0 0 24px;
}
/* ‼️ KEINE Pillen mit Rahmen und Hintergrund — die sahen aus wie Knoepfe und
   standen direkt neben dem echten Knopf „Mehr entdecken" (Torsten, 09.09.2026).
   Jetzt schlichter Text, getrennt durch einen senkrechten Strich. Semantisch
   bleibt es eine Liste, optisch ist es eine ruhige Zeile. */
.leistung .punkte {
  list-style: none; margin: 0 0 28px; padding: 0;
  display: flex; flex-wrap: wrap; align-items: baseline;
  font-size: 15px; line-height: 1.7; color: rgba(0,32,96,0.78);
}
/* ‼️ TRENNSTRICHE RAUS (Torsten, 10.09.2026): „die aufzaehlungen mit den
      senkrechten strichen dazwischen ueberall raus. das wird bei anderen
      tools zu viel."
      Er hat recht, und der Grund liegt tiefer: Dieselbe Form trug zwei
      Inhaltsarten. Bei Schlagwoertern („Video | Hoerbuch | Podcast")
      funktionierten die Striche; bei halben Saetzen („Uebungen mit Ablauf
      und Zeitrahmen | Methoden fuer Gruppen und Einzelne") sah es aus wie
      ein zerhackter Satz.
      Jetzt trennt allein der Abstand: 30 px zwischen den Eintraegen gegen
      rund 4 px zwischen den Woertern INNERHALB eines Eintrags — zusammen
      mit `white-space: nowrap` bleibt jeder Eintrag als Einheit lesbar. */
.leistung .punkte { gap: 7px 30px; }
.leistung .punkte li { white-space: nowrap; }

/* Dunkle Leistungsabschnitte im Wechsel */
.leistung.dunkel { border-top: none; }
.leistung.dunkel .leistung-nummer { color: rgba(255,255,255,0.6); }
.leistung.dunkel h2,
.leistung-kopf.dunkel h1 { color: #fff; }
/* ‼️ Der Zurueck-Verweis steht auf Bausteinseiten mit dunklem Kopf auf
   Dunkelblau. Ohne diese Regel bliebe er im Blau der hellen Seiten stehen
   und waere praktisch unlesbar. */
.leistung-kopf.dunkel .zurueck { color: rgba(255,255,255,0.78); }
.leistung-kopf.dunkel .zurueck:hover { color: #fff; }
.leistung.dunkel .kurz { color: rgba(255,255,255,0.9); }
.leistung.dunkel .dazu { color: rgba(255,255,255,0.78); }
.leistung.dunkel .punkte { color: rgba(255,255,255,0.86); }

@media (max-width: 1000px) {
  .leistung-innen { grid-template-columns: 1fr; gap: 30px; padding: 56px 20px; }
  /* ‼️ [11.09.2026] `.leistung-innen.gedreht` (0,2,0, siehe oben) schlug diese Regel
     (0,1,0) — am Handy standen die Abschnitte mit Bild rechts (02/04/06/08) weiter
     zweispaltig: Bild 63–130 px breit. Gemessen, nicht gesehen. */
  .leistung-innen.gedreht { grid-template-columns: 1fr; }
  .leistung.gedreht .leistung-bild,
  .leistung-innen.gedreht .leistung-bild { order: 0; }
  .leistung h2 { font-size: 28px; }
  .leistung .kurz { font-size: 16.5px; }
}

/* ── Hook ─────────────────────────────────────────────────────────── */
.buehne h1 .zeile2 { display: block; color: #9FBAE3; }
.buehne-credo {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 600; letter-spacing: 0.3px;
  color: #fff; background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50px; padding: 9px 18px; margin: 0 0 26px;
}
/* Zweispaltig: Text links, Video rechts — sonst bleibt die rechte Haelfte leer */
.buehne-raster {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: start;   /* Torsten 09.09.2026: Bild und Text oben buendig */
}
.buehne-video .bild { border-radius: 16px; box-shadow: 0 26px 64px rgba(0,0,0,0.4); }
@media (max-width: 1060px) {
  .buehne-raster { grid-template-columns: 1fr; gap: 34px; }
  .buehne-video { max-width: 100%; }
}

/* ── KI-KENNZEICHNUNG (EU AI Act Art. 50) ──────────────────────────────────
   ‼️ GROESSE IST FESTGESCHRIEBEN: 24 px im grossen Player, 13 px auf kleinen
      Vorschaubildern. NICHT hochsetzen, auch nicht „nur zwei Pixel".
      Am 22.05.2026 nach Beschwerde von 26/48 auf 13/24 halbiert.
      Der Hinweis muss erkennbar sein, aber nicht visuell dominant. */
.bild { position: relative; }

/* ‼️ `.bild img.ki-kennung` ist PFLICHT — die allgemeine Regel `.bild img`
   (100 % Breite, object-fit) ist spezifischer als eine blosse Klasse und hat
   die Kennung am 09.09.2026 auf 523 × 294 px aufgeblasen. Sie lag dann
   bildschirmfuellend ueber dem Video und sah aus wie der Videoinhalt. */
.bild img.ki-kennung {
  position: absolute; bottom: 10px; right: 10px;
  width: 24px; height: 24px;
  min-width: 24px; max-width: 24px;
  object-fit: contain;
  opacity: 0.9;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
  z-index: 5;
  border-radius: 5px;
}
/* Kleine Vorschauen: 13 px */
.koepfe .bild img.ki-kennung {
  bottom: 5px; right: 5px;
  width: 13px; height: 13px; min-width: 13px; max-width: 13px;
  opacity: 0.88; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
}

/* ── Dreiteilung: Herausforderung · Antwort · Gewinn ───────────────────── */
.pln { display: flex; flex-direction: column; gap: 18px; margin: 0 0 26px; }
.pln-teil { position: relative; padding-left: 18px; }
.pln-teil::before {
  content: ''; position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 3px; border-radius: 2px; background: var(--nm-blue);
}
/* ── Die drei Stufen steigern sich ─────────────────────────────────────────
   Torsten schlug am 10.09.2026 Ampelfarben vor (rot/gelb/gruen). Dagegen
   sprachen drei Dinge: Gelb sagt „Vorsicht" — gemeint ist aber „hier kommt
   die Loesung"; Gelb und Gruen stehen nicht in der NM24-Palette; und der
   Dreierblock steht SIEBENMAL auf der Startseite, das waeren 21 Ampeln.
   Stattdessen eine Steigerung INNERHALB der Marke:
     1 Herausforderung → blasses Blau (das Problem, noch ungeloest)
     2 Unsere Antwort  → volles Dunkelblau (die Marke greift ein)
     3 Dein Gewinn     → NM24-Rot (das Ziel, kraeftigste Farbe)
   ‼️ `:nth-child(2)` ist hier sicher: In `.pln` stehen ausschliesslich die
      drei `.pln-teil` — am 10.09.2026 ueber alle sieben Bloecke geprueft. */
/* ── Die drei Streifen (Torsten, 10.09.2026) ───────────────────────────────
   „ich möchte mint, magenta und weiß/blau (je nach hintergrund)."
     1 Die Herausforderung → Blau bzw. Weiß, je nach Grund (neutral)
     2 Unsere Antwort      → Magenta (die NM24-Farbe für „hier greift es ein")
     3 Dein Gewinn         → Mint (die NM24-Farbe für Erfolg)
   ‼️ Der Anlass: Seit dem Hell-Dunkel-Tausch stehen vier der sieben Blöcke auf
      Dunkelblau. Das frühere NM24-Rot verschwand dort fast. Magenta und Mint
      tragen auf beiden Gründen — deshalb brauchen sie KEINE `.dunkel`-Fassung.
   ‼️ Wer hier eine `.dunkel .pln-teil::before`-Regel ergänzt, überschreibt sie
      wieder: gleiche Spezifität, spätere Stelle. Deshalb ist die Regel für den
      ersten Streifen unten auf `:first-child` eingegrenzt. */
.pln-teil:nth-child(2)::before { background: var(--nm-magenta); }
.pln-teil.gewinn::before { background: var(--nm-mint); }

/* ‼️ Die drei Überschriften sind EINHEITLICH — Torsten am 10.09.2026:
   „die 3 Überschriften Herausforderung, Antwort, Gewinn sollten einheitlich
   fett und in weiß oder blau sein." Vorher trug jede eine eigene Farbe. */
.pln-marke {
  display: block; font-size: 12.5px; font-weight: 700; letter-spacing: 0.2px;
  color: var(--nm-blue); margin: 0 0 5px;
}
.pln-teil p { font-size: 16px; line-height: 1.62; color: rgba(0,32,96,0.82); margin: 0; }
.pln-teil.gewinn p { color: var(--nm-blue); font-weight: 500; }

/* Auf dunklem Grund */
/* Nur der ERSTE Streifen wechselt mit dem Grund — `:first-child`, damit er
   Magenta und Mint nicht überschreibt. */
.dunkel .pln-teil:first-child::before { background: #fff; }
.dunkel .pln-marke { color: #fff; }
.dunkel .pln-teil p { color: rgba(255,255,255,0.82); }
.dunkel .pln-teil.gewinn p { color: #fff; font-weight: 500; }

@media (max-width: 767px) {
  .pln { gap: 15px; }
  .pln-teil p { font-size: 15.5px; }
}

/* ‼️ WEISS IST TABU — bei Hintergruenden und bei Knoepfen (NM24-Hausregel,
   von Torsten am 09.09.2026 erneut eingeschaerft). Auf dunkelblauen Flaechen
   tritt `--header-bg` (#D6E0EF) an die Stelle von Weiss.
   Weisse SCHRIFT auf dunklem Grund bleibt erlaubt und ueblich — verboten ist
   die weisse FLAECHE. */

/* ═══════════════ MEHR BEWEGUNG BEIM SCROLLEN — 09.09.2026 ═══════════════
   Torsten wollte spuerbar mehr. Vier Ebenen, alle weiterhin dezent:
   1. Bilder kommen von ihrer Aussenseite herein und betonen den Wechsel
   2. Textbloecke kommen etwas weiter von unten und minimal vergroessert
   3. Die Dreiteilung erscheint gestaffelt, Teil fuer Teil
   4. Leichte Parallaxe auf den Leistungsbildern beim Scrollen
   ‼️ Bei „Bewegung reduzieren" bleibt alles davon aus. */

/* ── 1. Bilder von der Aussenseite ────────────────────────────────── */
.js .leistung-bild.auf,
.js .reihe-bild.auf {
  opacity: 0;
  transform: translateX(-46px) scale(0.97);
  transition: opacity .8s cubic-bezier(.22,.61,.36,1),
              transform .8s cubic-bezier(.22,.61,.36,1);
}
.js .leistung-innen.gedreht .leistung-bild.auf,
.js .reihe.gedreht .reihe-bild.auf { transform: translateX(46px) scale(0.97); }
.js .leistung-bild.auf.da,
.js .reihe-bild.auf.da { opacity: 1; transform: none; }

/* ── 2. Textbloecke etwas kraeftiger ──────────────────────────────── */
.js .leistung-text.auf,
.js .reihe-text.auf {
  opacity: 0; transform: translateY(34px);
  transition: opacity .72s cubic-bezier(.22,.61,.36,1) .12s,
              transform .72s cubic-bezier(.22,.61,.36,1) .12s;
}
.js .leistung-text.auf.da,
.js .reihe-text.auf.da { opacity: 1; transform: none; }

/* ── 3. Dreiteilung gestaffelt ────────────────────────────────────── */
.js .pln-teil {
  opacity: 0; transform: translateY(14px);
  transition: opacity .55s ease, transform .55s ease;
}
.js .leistung-text.da .pln-teil { opacity: 1; transform: none; }
.js .leistung-text.da .pln-teil:nth-child(1) { transition-delay: .30s; }
.js .leistung-text.da .pln-teil:nth-child(2) { transition-delay: .44s; }
.js .leistung-text.da .pln-teil:nth-child(3) { transition-delay: .58s; }

/* Stichwortzeile und Knopf zuletzt */
.js .leistung-text .punkte,
.js .leistung-text > .btn {
  opacity: 0; transform: translateY(12px);
  transition: opacity .5s ease .72s, transform .5s ease .72s;
}
.js .leistung-text.da .punkte,
.js .leistung-text.da > .btn { opacity: 1; transform: none; }

/* ── 4. Parallaxe ─────────────────────────────────────────────────── */
.js .leistung-bild .bild { will-change: transform; }

/* ── Zahlenband: die Ziffern kommen einzeln ───────────────────────── */
.js .zahl b { display: block; }
.js .zahl.da b { animation: zahlRein .6s cubic-bezier(.22,.61,.36,1) both; }
@keyframes zahlRein {
  from { opacity: 0; transform: translateY(16px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}

/* ── Grosse Aussage: Zeile fuer Zeile heller ──────────────────────── */
.js .aussage > p.auf { transform: translateY(26px); }

@media (prefers-reduced-motion: reduce) {
  .js .leistung-bild.auf, .js .reihe-bild.auf,
  .js .leistung-text.auf, .js .reihe-text.auf,
  .js .pln-teil, .js .leistung-text .punkte, .js .leistung-text > .btn {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .js .zahl.da b { animation: none !important; }
  .js .leistung-bild .bild { transform: none !important; }
}

/* ── Kennzahlen als Leiste am Fuss der Buehne ──────────────────────────────
   Vorher ein eigener dunkelblauer Abschnitt direkt unter der dunkelblauen
   Buehne — dadurch wirkte er wie ein leeres Anhaengsel, und die vier Bloecke
   standen verloren im Raum (Torsten, 09.09.2026). Jetzt eine kompakte Leiste
   INNERHALB der Buehne, mit feinen Trennlinien. Danach folgt sofort der helle
   Bereich, der Wechsel ist klar. */
.buehne-fakten {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: 58px; padding-top: 30px;
  border-top: 1px solid rgba(255,255,255,0.18);
}
.buehne-fakten .fakt { padding: 0 26px; border-left: 1px solid rgba(255,255,255,0.14); }
.buehne-fakten .fakt:first-child { padding-left: 0; border-left: none; }
.buehne-fakten .fakt b {
  display: block; font-size: 19px; font-weight: 600; letter-spacing: -0.3px;
  line-height: 1.25; color: #fff; margin-bottom: 7px;
}
.buehne-fakten .fakt span {
  font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,0.78);
  display: block;
}
/* Drei Versprechen statt vier Kennzahlen */
.buehne-fakten.drei { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 899px) {
  .buehne-fakten.drei { grid-template-columns: 1fr; gap: 24px 0; }
  .buehne-fakten.drei .fakt { padding-left: 0; border-left: none; }
}
@media (max-width: 899px) {
  .buehne-fakten { grid-template-columns: repeat(2, 1fr); gap: 22px 0; margin-top: 40px; }
  .buehne-fakten .fakt { padding: 0 18px; }
  .buehne-fakten .fakt:nth-child(odd) { padding-left: 0; border-left: none; }
  .buehne-fakten .fakt b { font-size: 23px; }
}

/* Hochzaehlen gilt jetzt fuer .fakt statt .zahl */
.js .fakt b { display: block; }
.js .fakt.da b { animation: zahlRein .6s cubic-bezier(.22,.61,.36,1) both; }
@media (prefers-reduced-motion: reduce) { .js .fakt.da b { animation: none !important; } }

/* ── Abspielzeichen auf beendeten Clips ───────────────────────────────────
   Wer weiter unten ankommt, findet den Clip moeglicherweise schon durchgelaufen
   vor. Dann erscheint dieses Zeichen — ein Klick spielt ihn erneut ab. */
.bild-video { position: relative; }
.bild-video:hover::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 64px; height: 64px; margin: -32px 0 0 -32px;
  border-radius: 50%; background: rgba(0,32,96,0.72);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  pointer-events: none; z-index: 4;
  transition: opacity .3s;
}
.bild-video:hover::before {
  content: ''; position: absolute; left: 50%; top: 50%; z-index: 5;
  margin: -11px 0 0 -6px;
  border-left: 19px solid #fff;
  border-top: 11px solid transparent; border-bottom: 11px solid transparent;
  pointer-events: none;
}
.bild-video:hover::after { background: rgba(150,0,0,0.8); }
/* ‼️ Waehrend der Clip laeuft, kein Abspielzeichen — sonst steht ein „Play"
      ueber einem laufenden Video. Die Klasse setzt `_bewegung.html`. */
.bild-video.laeuft:hover::after,
.bild-video.laeuft:hover::before { content: none; }

/* ═══════════════ KRAEFTIGERE BEWEGUNG — 09.09.2026 ═══════════════
   Torsten wollte es effektvoller. Fuenf Ebenen, die zusammen wirken:
   1. Bilder werden aufgedeckt statt nur eingeblendet (clip-path)
   2. dazu von der Aussenseite herein und leicht heranfahrend
   3. Nummer, Ueberschrift und Kurztext kommen nacheinander
   4. die Balken der Dreiteilung wachsen von oben nach unten
   5. kraeftigere Parallaxe
   ‼️ Bei „Bewegung reduzieren" bleibt alles davon aus (Block am Ende). */

/* ── 1+2. Bild: aufdecken, hereinfahren, heranfahren ──────────────── */
.js .leistung-bild.auf,
.js .reihe-bild.auf {
  opacity: 0;
  transform: translateX(-72px) scale(0.94);
  transition: opacity .55s cubic-bezier(.22,.61,.36,1),
              transform .95s cubic-bezier(.16,.84,.34,1);
}
/* ‼️ Das Aufdecken sitzt am INNEREN .bild, nicht am Rahmen. Am Rahmen wuerde es
   das parallax-bewegte Kind an den Kanten abschneiden. Am .bild selbst wandert
   der Schnitt mit — sichtbar ist nichts davon, sobald es offen ist. */
.js .leistung-bild.auf .bild,
.js .reihe-bild.auf .bild {
  clip-path: inset(0 0 100% 0);
  transition: clip-path .95s cubic-bezier(.16,.84,.34,1);
}
.js .leistung-bild.auf.da .bild,
.js .reihe-bild.auf.da .bild { clip-path: inset(0 0 0 0); }
.js .leistung-innen.gedreht .leistung-bild.auf,
.js .reihe.gedreht .reihe-bild.auf { transform: translateX(72px) scale(0.94); }
.js .leistung-bild.auf.da,
.js .reihe-bild.auf.da { opacity: 1; transform: none; }

/* ── 3. Textspalte: Teile nacheinander ───────────────────────────── */
.js .leistung-text.auf {
  opacity: 0; transform: translateY(46px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1) .1s,
              transform .8s cubic-bezier(.16,.84,.34,1) .1s;
}
.js .leistung-text.auf.da { opacity: 1; transform: none; }

.js .leistung-text .leistung-nummer,
.js .leistung-text h2,
.js .leistung-text .kurz {
  opacity: 0; transform: translateY(20px);
  transition: opacity .5s ease, transform .55s cubic-bezier(.16,.84,.34,1);
}
.js .leistung-text.da .leistung-nummer { opacity: 1; transform: none; transition-delay: .18s; }
.js .leistung-text.da h2 { opacity: 1; transform: none; transition-delay: .28s; }
.js .leistung-text.da .kurz          { opacity: 1; transform: none; transition-delay: .38s; }

/* Dreiteilung spaeter und deutlicher versetzt */
.js .pln-teil { transform: translateY(22px); transition: opacity .5s ease, transform .55s cubic-bezier(.16,.84,.34,1); }
.js .leistung-text.da .pln-teil:nth-child(1) { transition-delay: .50s; }
.js .leistung-text.da .pln-teil:nth-child(2) { transition-delay: .64s; }
.js .leistung-text.da .pln-teil:nth-child(3) { transition-delay: .78s; }

.js .leistung-text .punkte,
.js .leistung-text > .btn {
  transition: opacity .5s ease .94s, transform .5s cubic-bezier(.16,.84,.34,1) .94s;
}

/* ── 4. Die Balken wachsen von oben nach unten ───────────────────── */
.js .pln-teil::before { transform: scaleY(0); transform-origin: top; transition: transform .55s cubic-bezier(.16,.84,.34,1); }
.js .leistung-text.da .pln-teil:nth-child(1)::before { transform: scaleY(1); transition-delay: .58s; }
.js .leistung-text.da .pln-teil:nth-child(2)::before { transform: scaleY(1); transition-delay: .72s; }
.js .leistung-text.da .pln-teil:nth-child(3)::before { transform: scaleY(1); transition-delay: .86s; }

/* ── Grosse Aussage: kraeftiger ──────────────────────────────────── */
.js .aussage > p.auf { transform: translateY(40px) scale(0.985); }
.js .aussage > p.auf.da { transform: none; }
.js .aussage > * { transition-duration: .85s; }

/* ── Trennlinie zwischen den Abschnitten laeuft ein ──────────────── */
.leistung { position: relative; }
.js .leistung { border-top-color: transparent; }   /* die Linie laeuft ein, siehe ::before */
.js .leistung::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--card-border); transform: scaleX(0); transform-origin: left;
  transition: transform 1.1s cubic-bezier(.16,.84,.34,1);
}
.js .leistung:has(.leistung-text.da)::before { transform: scaleX(1); }
.leistung.dunkel::before, .leistung:first-of-type::before { display: none; }

@media (prefers-reduced-motion: reduce) {
  .js .leistung-bild.auf, .js .reihe-bild.auf,
  .js .leistung-text.auf, .js .leistung-text .leistung-nummer,
  .js .leistung-text h2, .js .leistung-kopf .leistung-text h1, .js .leistung-text .kurz,
  .js .pln-teil, .js .aussage > p.auf {
    opacity: 1 !important; transform: none !important;
    clip-path: none !important; transition: none !important;
  }
  .js .pln-teil::before, .js .leistung::before { transform: none !important; transition: none !important; }
}

/* ═══ WIEDERERKENNUNGSKOPF DER BAUSTEINSEITEN — 09.09.2026 ═══
   Der Abschnitt von der Startseite steht oben auf der eigenen Seite wieder:
   gleiches Video, gleiche Nummer, gleiche Ueberschrift, gleiche Dreiteilung.
   ‼️ Nur die FORM wiederholt sich, der TEXT geht ein Stockwerk tiefer. */
.leistung-kopf { border-top: none; }
/* ‼️ Der Zurueck-Verweis steht ueber dem GANZEN Kopf, oben links — so wie auf
   allen uebrigen Seiten. In der Textspalte stand er auf der falschen Seite,
   weil das Bild links liegt und niemand die Navigation rechts sucht. */
.leistung-kopf .kopf-zurueck { max-width: 1600px; margin: 0 auto; padding: 40px 40px 0; }
.leistung-kopf .zurueck { margin-bottom: 0; }
.leistung-kopf .leistung-innen { padding-top: 26px; }
@media (max-width: 900px) {
  .leistung-kopf .kopf-zurueck { padding: 26px 20px 0; }
  .leistung-kopf .leistung-innen { padding-top: 18px; }
}

/* ‼️ ECHTER FEHLER, am 09.09.2026 gemessen: Die gedrehten Bilder blieben
   dauerhaft 72 px verschoben und auf 0,94 verkleinert stehen — die Animation
   kam nie an ihrem Ziel an. Grund ist die Spezifitaet:
     `.js .leistung-innen.gedreht .leistung-bild.auf`  = 0,5,0   (Startzustand)
     `.js .leistung-bild.auf.da`                       = 0,4,0   (Endzustand)
   Der Startzustand gewinnt. Diese Regel (0,6,0) stellt das richtig.
   Gefunden wurde es nur, weil die Oberkanten von Bild und Text gemessen
   wurden — mit blossem Auge faellt ein gleichmaessiger Versatz nicht auf. */
.js .leistung-innen.gedreht .leistung-bild.auf.da,
.js .reihe.gedreht .reihe-bild.auf.da { transform: none; }

/* ‼️ Das Bild der Buehne ist DEKORATION — es liegt hinter Ueberschrift und
   Text. Solange es fehlt, darf sein Platzhaltertext dort nicht auftauchen:
   er schimmerte am 09.09.2026 hinter dem Hook durch, sobald der Kontrast
   angehoben war. Vorher war er nur deshalb unsichtbar, weil er dunkelblau
   auf dunkelblau stand — also aus dem falschen Grund. Welches Bild fehlt,
   steht in BILDER-BENOETIGT.md, nicht auf der Seite. */
.buehne-bild .bild-leer-text { display: none; }
.buehne-bild .bild-leer { border-color: transparent; }

/* ═══════════════ MEDIATHEK-SEITE — 09.09.2026 ═══════════════
   Torsten: „Da steht alles irgendwie völlig unsortiert untereinander …
   das hat doch nichts mit einer schicken modernen Website zu tun."
   Antwort: Farbwechsel fuer Rhythmus, Zahlen fuer Substanz, ein Karussell
   statt sieben Bloecke untereinander, Felder statt Hakenliste. */

/* ── Umfang: das Zahlenband ──────────────────────────────────────────── */
.umfang-band {
  max-width: 1600px; margin: 0 auto; padding: 0 40px;
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 18px;
}
.umfang-band .fakt {
  text-align: center; padding: 22px 10px;
  border-radius: 14px; background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.16);
}
.umfang-band .fakt b {
  display: block; font-size: 40px; font-weight: 600; letter-spacing: -1px;
  color: #fff; line-height: 1.05; font-variant-numeric: tabular-nums;
}
.umfang-band .fakt span {
  display: block; margin-top: 7px; font-size: 13px; line-height: 1.4;
  color: rgba(255,255,255,0.8);
}
/* Torsten 11.09.2026: kleines Durchschnittszeichen vor den Mengenangaben.
   Per ::before, weil der Zaehler in _bewegung.html den Text im <b> ersetzt. */
.umfang-band .fakt.schnitt b::before {
  content: "\00D8"; content: "\00D8" / "durchschnittlich";
  font-size: 0.45em; font-weight: 500; letter-spacing: 0;
  margin-right: 0.18em; vertical-align: 0.55em; opacity: 0.75;
}
.umfang-fuss {
  max-width: 1600px; margin: 26px auto 0; padding: 0 40px;
  font-size: 17px; color: rgba(255,255,255,0.82);
}
@media (max-width: 1200px) { .umfang-band { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 760px)  {
  .umfang-band { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0 20px; }
  .umfang-band .fakt b { font-size: 32px; }
  .umfang-fuss { padding: 0 20px; font-size: 15.5px; }
}

/* ── Karussell der sieben Formate ────────────────────────────────────── */
.kar { max-width: 1600px; margin: 0 auto; padding: 0 40px; }

.kar-reiter {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px;
}
.kar-tab {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 17px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 14.5px; font-weight: 500;
  color: var(--nm-blue); background: var(--card-bg);
  border: 1px solid var(--card-border);
  transition: background .25s, color .25s, border-color .25s, transform .25s;
}
.kar-tab:hover { background: var(--card-hover); transform: translateY(-1px); }
.kar-tab .kar-nr {
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  color: rgba(0,32,96,0.72);   /* 0,5 ergab 3,06 — unter WCAG AA */
  transition: color .25s;
}
.kar-tab.aktiv {
  background: var(--nm-blue); color: #fff; border-color: var(--nm-blue);
}
.kar-tab.aktiv .kar-nr { color: rgba(255,255,255,0.65); }
.kar-tab:focus-visible { outline: 2px solid var(--nm-blue); outline-offset: 3px; }

.kar-buehne {
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: 18px; padding: 26px;
}
.kar-blatt {
  display: grid; grid-template-columns: 1.08fr 1fr; gap: 34px; align-items: start;
}
.kar-medium .bild { border-radius: 12px; overflow: hidden; }
.kar-mass {
  font-size: 13.5px; font-weight: 700; letter-spacing: 0.2px;
  color: rgba(0,32,96,0.66); margin: 0 0 10px;
}
.kar-mass b {
  font-size: 30px; font-weight: 600; letter-spacing: -0.6px; color: var(--nm-red);
  margin-right: 7px; font-variant-numeric: tabular-nums;
  text-transform: none; vertical-align: -2px;
}
.kar-text h3 {
  font-size: 27px; font-weight: 600; letter-spacing: -0.5px; margin: 0 0 12px;
  color: var(--nm-blue);
}
.kar-text > p { font-size: 16.5px; line-height: 1.62; color: rgba(0,32,96,0.82); margin: 0 0 16px; }

/* ── Fussleiste des Karussells ───────────────────────────────────────── */
.kar-fuss { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.kar-pfeil {
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--card-bg); border: 1px solid var(--card-border); color: var(--nm-blue);
  transition: background .25s, transform .25s;
}
.kar-pfeil:hover { background: var(--card-hover); transform: scale(1.06); }
.kar-pfeil:focus-visible { outline: 2px solid var(--nm-blue); outline-offset: 3px; }
.kar-pfeil svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kar-punkte { display: flex; gap: 8px; }
.kar-punkt {
  width: 8px; height: 8px; border-radius: 50%; cursor: pointer; padding: 0;
  border: none; background: rgba(0,32,96,0.22);
  transition: background .25s, transform .25s;
}
.kar-punkt.aktiv { background: var(--nm-red); transform: scale(1.35); }

@media (max-width: 900px) {
  .kar { padding: 0 20px; }
  .kar-blatt { grid-template-columns: 1fr; gap: 22px; }
  .kar-buehne { padding: 18px; }
  .kar-text h3 { font-size: 23px; }
  .kar-tab { font-size: 13.5px; padding: 9px 13px; }
}

/* ── Hoerproben ──────────────────────────────────────────────────────── */
/* ═══ HÖRPROBE — EIGENER ABSPIELER, 10.09.2026 ═══
   Torsten: „kannst du die Visualisierung der Hör-Dateien nicht schöner
   machen? … weiß ist doch tabu als Hintergrund."
   Der eingebaute Browser-Player ist weiss und laesst sich nicht einfaerben.
   Deshalb ein eigener: dunkelblauer Grund, weinroter Knopf, echte Wellenform
   aus der Tondatei (beim Bauen berechnet, siehe `wellenform()` in bauen.py). */
.hoerprobe {
  margin: 0; padding: 30px 32px; border-radius: 12px;
  background: linear-gradient(150deg, #002060 0%, #143a7d 55%, #1b4794 100%);
  border: 1px solid rgba(255,255,255,0.14);
  display: flex; flex-direction: column; gap: 20px; justify-content: center;
}
/* ‼️ Ohne Skript bleibt der eingebaute Player sichtbar und bedienbar — die
   eigene Leiste waere dann ja tot. Erst wenn das Skript uebernommen hat
   (Klasse `js-hp`), wird getauscht. */
.hoerprobe audio { width: 100%; }
.hoerprobe .hp-leiste { display: none; }
.hoerprobe.js-hp audio { display: none; }
.hoerprobe.js-hp .hp-leiste { display: flex; }
.hoerprobe figcaption { font-size: 14px; color: rgba(255,255,255,0.78); }

.hp-leiste { align-items: center; gap: 20px; }

.hp-knopf {
  flex: 0 0 auto; width: 54px; height: 54px; border-radius: 50%; cursor: pointer;
  border: none; padding: 0; background: var(--nm-red); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(150,0,0,0.35);
  transition: transform .25s, background .25s;
}
.hp-knopf:hover { transform: scale(1.07); background: #b40000; }
.hp-knopf:focus-visible { outline: 3px solid #9FBAE3; outline-offset: 3px; }
.hp-knopf svg { width: 20px; height: 20px; fill: currentColor; }
.hp-knopf .hp-pause { display: none; }
.hoerprobe.laeuft .hp-knopf .hp-play  { display: none; }
.hoerprobe.laeuft .hp-knopf .hp-pause { display: block; }

/* Die Wellenform: ein Balken je Messwert, Hoehe aus der Tondatei. */
.hp-welle {
  position: relative; flex: 1 1 auto; height: 46px; cursor: pointer;
  display: flex; align-items: center; gap: 2px; overflow: hidden;
}
.hp-welle i {
  flex: 1 1 auto; min-width: 2px; border-radius: 2px;
  background: rgba(255,255,255,0.26); transition: background .2s;
}
/* Der abgespielte Teil wird eingefaerbt — ueber eine Maske, damit die Balken
   selbst nicht angefasst werden muessen. */
.hp-fortschritt {
  position: absolute; inset: 0 100% 0 0; pointer-events: none;
  background: linear-gradient(90deg, #9FBAE3, #cfe0f7);
  mix-blend-mode: overlay; transition: right .12s linear;
}
.hp-welle:hover i { background: rgba(255,255,255,0.36); }

.hp-zeit {
  flex: 0 0 auto; min-width: 46px; text-align: right;
  font-size: 14px; font-variant-numeric: tabular-nums; color: rgba(255,255,255,0.9);
}

@media (max-width: 620px) {
  .hoerprobe { padding: 22px 20px; }
  .hp-knopf { width: 46px; height: 46px; }
  .hp-welle { height: 38px; }

  /* ‼️ [13.09.2026] Die Hoerprobe ragte am Telefon aus dem Bild (Torsten: „die
     Songs passen nicht rein"). Grund: 65 Balken mit je 2 px Mindestbreite und
     2 px Abstand brauchen 260 px — vorhanden sind rund 165. Die Leiste kann
     nicht schrumpfen, also zeigt sie hier nur JEDEN ZWEITEN Balken. Die
     Wellenform bleibt erkennbar, der Fortschrittsbalken liegt darueber und ist
     davon unberuehrt. Dazu engere Abstaende und eine schmalere Zeitangabe. */
  /* ‼️ Schrumpfen erlauben: Flex- und Rasterkinder gehen von sich aus NICHT
     unter ihre Mindestbreite. Ohne diese drei Zeilen bleibt die Karte 355 px
     breit, obwohl ihre Spalte nur 257 px hat — gemessen am 13.09.2026. */
  /* ‼️ `min-width: 0` an der KARTE selbst ist der entscheidende Teil: Sie ist
     ein Rasterkind, und ein Rasterkind geht ohne diese Angabe nie unter seine
     Mindestbreite — gemessen blieb sie 355 px breit in einer 257 px breiten
     Spalte. Erst danach greifen die Regeln fuer die Leiste darin. */
  .hoerprobe { max-width: 100%; min-width: 0; }
  .hp-leiste { gap: 12px; min-width: 0; }
  .hp-welle { gap: 1px; min-width: 0; }
  /* Von 65 Balken bleibt jeder vierte stehen — 16 Balken passen in die rund
     90 px, die neben Knopf und Zeitangabe uebrig bleiben. */
  .hp-welle i:not(:nth-child(4n+1)) { display: none; }
  .hp-zeit { min-width: 38px; font-size: 13px; }
  .hoerprobe figcaption { font-size: 13px; }
}
.hoerprobe-leer {
  background: repeating-linear-gradient(135deg, rgba(0,32,96,0.035) 0 14px, rgba(0,32,96,0.07) 14px 28px);
  border: 2px dashed rgba(0,32,96,0.22);
  align-items: center; text-align: center; min-height: 190px;
}

/* ── Die zwanzig Kategorien ─────────────────────────────────────────────
   ‼️ Torsten 09.09.2026: Bei der Mediathek heisst es KATEGORIEN, nicht Felder. */
.kat-raster {
  max-width: 1600px; margin: 0 auto; padding: 0 40px;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.kat {
  padding: 11px 18px; border-radius: 999px; font-size: 15px; font-weight: 500;
  color: rgba(255,255,255,0.92); background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.2);
  transition: background .3s, transform .3s, border-color .3s;
}
.kat:hover { background: rgba(255,255,255,0.17); border-color: rgba(255,255,255,0.4); transform: translateY(-2px); }
@media (max-width: 760px) { .kat-raster { padding: 0 20px; } .kat { font-size: 14px; padding: 9px 14px; } }

/* ── Ablauf: Schritte neben dem Bildschirmfoto ───────────────────────── */
.ablauf-raster {
  max-width: 1600px; margin: 0 auto; padding: 0 40px;
  display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: start;
}
@media (max-width: 900px) {
  .ablauf-raster { grid-template-columns: 1fr; gap: 30px; padding: 0 20px; }
}

/* ── Karussell: sichtbar erst, wenn das Skript laeuft ─────────────────
   ‼️ Ohne Skript stehen alle sieben Blaetter untereinander und die Bedienung
      ist ausgeblendet — haesslicher, aber vollstaendig lesbar. Reiter und
      Pfeile ohne Wirkung anzuzeigen waere schlimmer als sie wegzulassen. */
.kar-reiter, .kar-fuss { display: none; }
.kar.js-kar .kar-reiter { display: flex; }
.kar.js-kar .kar-fuss   { display: flex; }
.kar-blatt + .kar-blatt { margin-top: 34px; padding-top: 34px; border-top: 1px solid var(--card-border); }
.kar.js-kar .kar-blatt       { display: none; }
.kar.js-kar .kar-blatt.aktiv { display: grid; margin-top: 0; padding-top: 0; border-top: none; }

/* Der Wechsel wird sanft eingeblendet — kurz, damit es flott bleibt. */
@keyframes kar-auf {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.kar.js-kar .kar-blatt.aktiv { animation: kar-auf .38s cubic-bezier(.22,.61,.36,1); }
.kar.js-kar .kar-blatt.aktiv .kar-medium { animation: kar-auf .5s cubic-bezier(.16,.84,.34,1) .06s backwards; }
.kar.js-kar .kar-blatt.aktiv .kar-text   { animation: kar-auf .5s cubic-bezier(.16,.84,.34,1) .12s backwards; }

@media (prefers-reduced-motion: reduce) {
  .kar.js-kar .kar-blatt.aktiv,
  .kar.js-kar .kar-blatt.aktiv .kar-medium,
  .kar.js-kar .kar-blatt.aktiv .kar-text { animation: none !important; }
  .kar-tab, .kar-pfeil, .kat { transition: none !important; }
}

/* ── Die zwanzig Kategorien poppen NACHEINANDER auf ─────────────────────
   Torsten, 10.09.2026: „hier waere es auch schoen, wenn alle 20 Kategorien
   der Reihe nach kurz aufpoppen wuerden." Vorher liefen sie zeilenweise in
   vier Schueben binnen 0,24 s — das sah aus wie ein einziger Auftritt.
   Jetzt hat jede Kachel ihren eigenen Takt: 0,11 s Abstand, die letzte bei
   2,15 s. Der Ueberschwinger in der Beschleunigungskurve macht das „Pop".
   ‼️ `:nth-child` ist hier sicher — im `.kat-raster` stehen ausschliesslich
      die zwanzig `<span class="kat">` und sonst nichts. */
.js .kat { opacity: 0; transform: translateY(10px) scale(0.86);
           transition: opacity .3s ease, transform .42s cubic-bezier(.34,1.56,.64,1); }
.js .kat-raster.da .kat { opacity: 1; transform: none; }
.js .kat-raster.da .kat:nth-child(1) { transition-delay: 0.06s; }
.js .kat-raster.da .kat:nth-child(2) { transition-delay: 0.17s; }
.js .kat-raster.da .kat:nth-child(3) { transition-delay: 0.28s; }
.js .kat-raster.da .kat:nth-child(4) { transition-delay: 0.39s; }
.js .kat-raster.da .kat:nth-child(5) { transition-delay: 0.50s; }
.js .kat-raster.da .kat:nth-child(6) { transition-delay: 0.61s; }
.js .kat-raster.da .kat:nth-child(7) { transition-delay: 0.72s; }
.js .kat-raster.da .kat:nth-child(8) { transition-delay: 0.83s; }
.js .kat-raster.da .kat:nth-child(9) { transition-delay: 0.94s; }
.js .kat-raster.da .kat:nth-child(10) { transition-delay: 1.05s; }
.js .kat-raster.da .kat:nth-child(11) { transition-delay: 1.16s; }
.js .kat-raster.da .kat:nth-child(12) { transition-delay: 1.27s; }
.js .kat-raster.da .kat:nth-child(13) { transition-delay: 1.38s; }
.js .kat-raster.da .kat:nth-child(14) { transition-delay: 1.49s; }
.js .kat-raster.da .kat:nth-child(15) { transition-delay: 1.60s; }
.js .kat-raster.da .kat:nth-child(16) { transition-delay: 1.71s; }
.js .kat-raster.da .kat:nth-child(17) { transition-delay: 1.82s; }
.js .kat-raster.da .kat:nth-child(18) { transition-delay: 1.93s; }
.js .kat-raster.da .kat:nth-child(19) { transition-delay: 2.04s; }
.js .kat-raster.da .kat:nth-child(20) { transition-delay: 2.15s; }
@media (prefers-reduced-motion: reduce) {
  .js .kat { opacity: 1 !important; transform: none !important; }
}

/* Nachjustierung nach dem ersten Augenschein (09.09.2026) */
.umfang-fuss { margin-top: 30px; }
/* Im Karussell einspaltig — zweispaltig wirkten die Stichpunkte gequetscht. */
.kar-text .haken { grid-template-columns: 1fr; gap: 9px; }
.kar-text .haken li { font-size: 15.5px; }

/* ═══ KARUSSELL: EINE GRÖSSE FÜR ALLE SIEBEN — 09.09.2026 ═══
   Torsten: „Bei dem Karussell wird es beim Hörbuch sehr schmal, bei Videos und
   Bildern wird es wieder breit. Es ändert also beim Durchklicken permanent die
   Größe." Gemessen: Medium zwischen 190 und 387 px, Text konstant 263 px.

   ‼️ `!important` ist hier PFLICHT: Das Seitenverhaeltnis kommt aus `bauen.py`
      als inline `style="aspect-ratio:…"`. Inline schlaegt jede normale Regel. */
.kar-medium .bild,
.kar-medium .hoerprobe {
  aspect-ratio: 16 / 9 !important;
  min-height: 0;
  height: auto;
}
.kar-medium .bild img:not(.ki-kennung),
.kar-medium .bild video { width: 100%; height: 100%; object-fit: cover; }
/* Die Abspielleiste sitzt mittig in derselben Flaeche wie ein Bild. */
.kar-medium .hoerprobe { align-items: center; justify-content: center; padding: 30px; }
/* ‼️ [11.09.2026] In Handybreite weitete eine Hoerprobe das Karussell auf ca.
   575 px (64 Wellenbalken + Knopf + Zeit lassen sich nicht schmaler machen) —
   die ganze Seite wurde dadurch 635 statt 390 px breit (gemessen, TS Modul B
   und Mediathek). Rasterzelle und Wellenform duerfen schrumpfen; die Welle
   wird rechts abgeschnitten (`overflow: hidden` hat sie schon). */
.kar-medium { min-width: 0; }
.hp-welle { min-width: 0; }
/* ‼️ Die Ursache (gemessen 390 px): `align-items: center` oben gibt der Leiste
   ihre volle Wunschbreite (525 px in 272 px) — sie ragte beidseitig heraus, der
   rote Knopf lag bei x = −67, also AUSSERHALB des Bildschirms (TS UND Mediathek).
   Die Leiste nimmt deshalb die Breite der Hoerprobe an; die Welle schrumpft. */
.kar-medium .hoerprobe .hp-leiste { align-self: stretch; }

/* ── KI-Kennung auch an allen Hoerformaten (Torsten 11.09.2026: „mach die
   ai-kennung auch bei allen hörformaten") — gleiche Groesse wie bei Bildern und
   Videos, 24 px FEST (Memory `feedback_ki_badge_size`, nicht hochsetzen). */
.hoerprobe { position: relative; }
.hoerprobe img.ki-kennung {
  position: absolute; bottom: 10px; right: 10px;
  width: 24px; height: 24px; min-width: 24px; max-width: 24px;
  object-fit: contain; opacity: 0.9; pointer-events: none;
}

/* ── Dunkle Abschnitte ueber die VOLLE Breite (Torsten 11.09.2026: „sonst sieht
   es bei den blauen abschnitten immer wie ein kasten aus und nicht wie ein
   abschnitt") — gemessen: nur `.section.dunkel` ist selbst auf 1600 px begrenzt;
   `.leistung.dunkel` und `.dunkel` mit `.dunkel-innen` reichen schon bis zum Rand.
   Das Blau wird per `border-image` mit Ueberstand bis an die Bildschirmkanten
   gemalt: kein Einfluss auf das Layout, keine Scrollleiste (Ueberstand zaehlt
   nicht als scrollbarer Inhalt), nichts wird abgeschnitten. Der Inhalt bleibt
   in seiner 1600-px-Spalte. */
.section.dunkel {
  border-image: conic-gradient(var(--nm-blue) 0 0) fill 0 // 0 100vmax;
}
.kar-medium .hoerprobe audio { max-width: 420px; }

/* ── Bedienleiste: deutlich sichtbar und mit Luft ─────────────────────
   Torsten: „unten ist die Navigation … kaum zu erkennen und klebt direkt
   darunter an den Kategorien." */
.kar-fuss {
  margin-top: 26px; padding-top: 22px;
  border-top: 1px solid var(--card-border);
  justify-content: center; gap: 22px;
}
.kar-pfeil {
  width: 48px; height: 48px;
  background: var(--nm-blue); border-color: var(--nm-blue); color: #fff;
  box-shadow: 0 2px 10px rgba(0,32,96,0.18);
}
.kar-pfeil:hover { background: #001845; border-color: #001845; transform: scale(1.08); }
.kar-pfeil svg { width: 21px; height: 21px; stroke-width: 2.4; }
.kar-punkte { gap: 11px; align-items: center; }
.kar-punkt { width: 11px; height: 11px; background: rgba(0,32,96,0.28); }
.kar-punkt:hover { background: rgba(0,32,96,0.5); }
.kar-punkt.aktiv { background: var(--nm-red); transform: scale(1.45); }
/* Der Fokusrahmen soll der runden Form folgen, nicht eckig darüberliegen. */
.kar-pfeil:focus-visible { outline: 3px solid var(--nm-red); outline-offset: 3px; }
.kar-punkt:focus-visible { outline: 2px solid var(--nm-blue); outline-offset: 3px; }

@media (max-width: 900px) {
  .kar-pfeil { width: 42px; height: 42px; }
}

/* ═══ KATEGORIEN: GLEICHMÄSSIGES RASTER — 09.09.2026 ═══
   Torsten: „Da sind einfach 20 Pillen in unterschiedlicher Breite aneinander
   und untereinander gereiht. Das sieht aus wie Kraut und Rüben."

   Jetzt fünf Spalten mal vier Zeilen — bei genau zwanzig Kategorien geht das
   ohne Rest auf. Alle Kacheln gleich breit und gleich hoch, egal wie lang das
   Wort ist. Die Nummer macht nebenbei sichtbar, dass es zwanzig sind. */
.kat-raster {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
}
.kat {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 6px; min-height: 82px; padding: 16px 18px;
  border-radius: 12px; font-size: 15px; font-weight: 500; line-height: 1.3;
  color: rgba(255,255,255,0.94); background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  transition: background .3s, transform .3s, border-color .3s;
}
.kat i {
  font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: 1.2px;
  color: rgba(255,255,255,0.55);
}
.kat:hover {
  background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.4);
  transform: translateY(-3px);
}
@media (max-width: 1200px) { .kat-raster { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px)  { .kat-raster { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px)  {
  /* ‼️ [11.09.2026] `1fr` war mindestens so breit wie „Persoenlichkeitsentwicklung"
     — die Seite wurde 426 statt 390 px breit (gemessen). Spalten duerfen
     schrumpfen, lange Woerter werden getrennt. */
  .kat-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .kat { overflow-wrap: anywhere; hyphens: auto; }
  .kat { min-height: 72px; padding: 13px 14px; font-size: 14px; }
}

/* ═══ KOPF DER BAUSTEINSEITEN — 09.09.2026 ═══
   Torsten: „Da muss am Anfang oben ganz groß Mediathek stehen … dahinter kann
   dann stehen Bindestrich nie wieder bei null anfangen. Und darunter kommt
   dann zum Beispiel ein Videoclip mit Text."

   Seitenname und Hook stehen in EINER Zeile ueber der vollen Breite. Der Name
   traegt die volle Farbe, der Hook steht gedaempft dahinter — man liest zuerst,
   wo man ist, und gleich danach, warum es sich lohnt. */
.kopf-titel {
  max-width: 1600px; margin: 0 auto; padding: 26px 40px 0;
}
.kopf-titel h1 {
  font-size: 46px !important; font-weight: 600; line-height: 1.12;
  letter-spacing: -1.2px; color: var(--nm-blue); margin: 6px 0 0;
}
.kopf-titel .hook {
  color: rgba(0,32,96,0.6); font-weight: 500;
}
.leistung-kopf.dunkel .kopf-titel h1 { color: #fff; }
.leistung-kopf.dunkel .kopf-titel .hook { color: rgba(255,255,255,0.66); }
.leistung-kopf .leistung-innen { padding-top: 30px; }

@media (max-width: 900px) {
  .kopf-titel { padding: 18px 20px 0; }
  .kopf-titel h1 { font-size: 30px !important; letter-spacing: -0.7px; }
}

/* Drei Kennzahlen direkt unter dem Hook — sie fuellen den Raum neben dem
   Bild und liefern sofort Substanz, statt ihn leer zu lassen. */
.hook-punkte {
  list-style: none; margin: 24px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 12px;
}
.hook-punkte li {
  padding: 12px 18px; border-radius: 11px;
  background: var(--card-bg); border: 1px solid var(--card-border);
  font-size: 14.5px; color: rgba(0,32,96,0.82);
  display: flex; align-items: baseline; gap: 8px;
}
.hook-punkte b {
  font-size: 22px; font-weight: 600; letter-spacing: -0.4px; color: var(--nm-red);
  font-variant-numeric: tabular-nums;
}
.leistung-kopf.dunkel .hook-punkte li {
  background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.88);
}
.leistung-kopf.dunkel .hook-punkte b { color: #9FBAE3; }

@media (max-width: 900px) {
  .hook-punkte li { padding: 10px 14px; font-size: 13.5px; }
  .hook-punkte b { font-size: 19px; }
}

/* ═══ BAUKASTEN ALS MATRIX — DRITTER ANLAUF, 09.09.2026 ═══
   Torsten zu den ersten beiden Versuchen: „Das visualisiert noch immer nicht
   das Baukastenprinzip … da blickt kein Mensch durch." Und zum Pfeil: „Für
   mich sieht das aus, als mache ich meinen Workshop aus irgendwelchen
   biochemischen Prozessen, weil da der Pfeil herkommt."

   Zwei Lehren daraus:
   1. Das PRINZIP braucht ein Bild — ein Raster, aus dem gegriffen wird.
      Karten nebeneinander zeigen nur Beispiele, nicht das System.
   2. Die Leserichtung muss stimmen. Der Pfeil laeuft jetzt nach UNTEN, vom
      Raster zum Ergebnis, und Ziffern verbinden Zelle und Ergebniszeile —
      man sieht, WOHER jeder Baustein kommt. */
.mx-huelle { max-width: none; margin: 0; padding: 0; }
.mx-scroll { overflow-x: auto; padding-bottom: 6px; }

/* Spaltentitel: lang am Rechner, kurz am Telefon (Regel in der Handyfassung). */
.mx-lang { display: inline; }
.mx-kurz { display: none; }
.mx {
  display: grid;
  grid-template-columns: minmax(170px, 1.15fr) repeat(6, minmax(112px, 1fr));
  gap: 7px; min-width: 900px;
}
.mx-ecke, .mx-kopf {
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.2px;
  color: rgba(255,255,255,0.62); line-height: 1.35;
  padding: 0 4px 10px; display: flex; align-items: flex-end;
}
.mx-kopf { justify-content: center; text-align: center; }
.mx-thema {
  display: flex; align-items: center; padding: 0 14px 0 0;
  font-size: 15.5px; font-weight: 500; color: rgba(255,255,255,0.92);
}
.mx-zelle {
  height: 52px; border-radius: 9px;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14);
  display: flex; align-items: center; justify-content: center;
  transition: background .3s, border-color .3s, transform .3s;
}
.mx-zelle:hover { background: rgba(255,255,255,0.13); }
/* Die gewaehlten Zellen — sie tragen die Ziffer, die unten wiederkehrt. */
.mx-gewaehlt {
  background: #9FBAE3; border-color: #fff;
  box-shadow: 0 0 0 3px rgba(159,186,227,0.28);
}
.mx-gewaehlt span {
  font-size: 15px; font-weight: 700; color: #002060;
}

/* Vom Raster nach unten ins Ergebnis */
.mx-ernte { display: flex; flex-direction: column; align-items: stretch; margin-top: 8px; }
.mx-pfeil { align-self: center; }
.mx-pfeil { padding: 18px 0 14px; }
.mx-pfeil svg {
  width: 30px; height: 30px; fill: none; stroke: #9FBAE3;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
/* ‼️ Torsten 09.09.2026: „Der Kasten unten drunter mit dem eigenen Thema, der
   muss irgendwie über die Breite gehen von der Matrix, damit das optisch
   zueinander passt." Also volle Breite statt zentriertem Kasten. */
.mx-ergebnis {
  width: 100%; padding: 26px 28px; border-radius: 14px;
  background: rgba(159,186,227,0.16); border: 1px solid #9FBAE3;
}
.mx-ergebnis-kopf { margin: 0 0 16px; font-size: 14px; color: rgba(255,255,255,0.72); line-height: 1.5; }
.mx-ergebnis-kopf b { display: block; font-size: 23px; font-weight: 600; color: #fff; margin-top: 3px; }
.mx-liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 13px;
}
.mx-liste li {
  display: flex; flex-direction: column; gap: 5px;
  padding: 16px 18px; border-radius: 11px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2);
}
.mx-liste i {
  width: 26px; height: 26px; border-radius: 8px; margin-bottom: 3px;
  background: #9FBAE3; color: #002060;
  font-style: normal; font-size: 13.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.mx-liste b { font-size: 16px; font-weight: 600; color: #fff; line-height: 1.25; }
.mx-liste em { font-style: normal; font-size: 13px; color: #B6CAE8; }   /* #9FBAE3 ergab 4,50 — knapp unter AA */
.mx-liste span { font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.78); }

.mx-fuss { margin: 18px 0 0; font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,0.7); }

@media (max-width: 760px) {
  .mx-huelle { padding: 0; }
  .mx-ergebnis { padding: 18px; }
  .mx-ergebnis-kopf b { font-size: 20px; }
}

/* ═══ ZUSAMMENBAU-ANIMATION — 10.09.2026 ═══
   Paarweise: Zelle 1 im Raster springt auf, gleich darauf die Karte 1 unten.
   Dann 2, 3, 4, 5. So sieht man, wie das eigene Thema Stueck fuer Stueck
   entsteht. Getaktet ueber Verzoegerungen, kein Skript noetig. */
.js .mx-gewaehlt {
  opacity: 0; transform: scale(0.55);
  transition: opacity .3s ease, transform .5s cubic-bezier(.34,1.56,.5,1);
}
.js .mx-liste li {
  opacity: 0; transform: scale(0.9) translateY(10px);
  transition: opacity .3s ease, transform .5s cubic-bezier(.34,1.56,.5,1);
}
.js .baukasten.da .mx-gewaehlt,
.js .baukasten.da .mx-liste li { opacity: 1; transform: none; }

/* Die Ziffer im Raster und die Karte unten teilen sich denselben Takt:
   Baustein n erscheint oben bei n × 0,55 s, unten 0,22 s spaeter. */
.js .baukasten.da .mx-gewaehlt[data-nr="1"] { transition-delay: .30s; }
.js .baukasten.da .mx-liste li:nth-child(1)   { transition-delay: .52s; }
.js .baukasten.da .mx-gewaehlt[data-nr="2"] { transition-delay: .85s; }
.js .baukasten.da .mx-liste li:nth-child(2)   { transition-delay: 1.07s; }
.js .baukasten.da .mx-gewaehlt[data-nr="3"] { transition-delay: 1.40s; }
.js .baukasten.da .mx-liste li:nth-child(3)   { transition-delay: 1.62s; }
.js .baukasten.da .mx-gewaehlt[data-nr="4"] { transition-delay: 1.95s; }
.js .baukasten.da .mx-liste li:nth-child(4)   { transition-delay: 2.17s; }
.js .baukasten.da .mx-gewaehlt[data-nr="5"] { transition-delay: 2.50s; }
.js .baukasten.da .mx-liste li:nth-child(5)   { transition-delay: 2.72s; }

/* Der Rahmen des Ergebnisses ist von Anfang an da — nur die Bausteine darin
   erscheinen nacheinander. Sonst haette man einen leeren Kasten, der ploetzlich
   auftaucht. */
.js .mx-ergebnis { opacity: 0; transform: translateY(12px); transition: opacity .5s ease .15s, transform .5s cubic-bezier(.16,.84,.34,1) .15s; }
.js .baukasten.da .mx-ergebnis { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .mx-gewaehlt, .js .mx-ergebnis, .js .mx-liste li {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* ═══ AUFBAU ALS VERSCHACHTELTE STRUKTUR — 09.09.2026 ═══
   ‼️ Der erste Entwurf stellte zwei Listen NEBENEINANDER. Torsten musste
      denselben Screenshot dreimal schicken: „Kein Mensch erkennt auf einen
      Blick, um was es hier geht." Zu Recht — nebeneinander sieht man zwei
      Aufzählungen, aber nicht, dass die eine IN der anderen steckt.
      Die Verschachtelung ist die Aussage. Also EINE Struktur mit Einrückung
      und Verbindungslinie. */
.baum { max-width: 1600px; margin: 0 auto; padding: 0 40px; }
.baum-marke {
  font-size: 13px; font-weight: 700; letter-spacing: 0.2px;
  color: rgba(0,32,96,0.66); margin: 0 0 12px;
}
.baum-kasten {
  border: 1px solid var(--card-border); border-radius: 16px;
  padding: 18px; background: var(--card-bg);
  display: flex; flex-direction: column; gap: 9px;
}

/* Eine Zeile der obersten Ebene: Überblick oder Kapitel */
.bz {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding: 15px 20px; border-radius: 11px;
  background: rgba(255,255,255,0.5); border: 1px solid var(--card-border);
}
.bz-name { font-size: 17px; font-weight: 600; color: var(--nm-blue); }
.bz-was, .bz-ebenso { font-size: 14.5px; color: rgba(0,32,96,0.7); }
.bz-ebenso { font-style: italic; color: rgba(0,32,96,0.72); }   /* 0,55 ergab 3,63 — unter AA */
.bz-ueberblick { background: rgba(255,255,255,0.5); }
/* Das aufgeklappte Kapitel — es zeigt, was in JEDEM Kapitel steckt. */
.bz-offen { background: #C7D3E5; border-color: rgba(0,32,96,0.28); }

/* ── Die fünf Abschnitte: eingerückt, mit Verbindungslinie ───────────── */
.baum-abschnitte {
  list-style: none; margin: 0 0 4px 34px; padding: 4px 0 4px 26px;
  display: flex; flex-direction: column;
  position: relative;
}
/* Die senkrechte Linie macht die Zugehoerigkeit sichtbar. */
.baum-abschnitte::before {
  content: ''; position: absolute; left: 0; top: -6px; bottom: 22px;
  width: 2px; background: rgba(0,32,96,0.25);
}
.baum-abschnitte li {
  position: relative;
  display: grid; grid-template-columns: 30px 210px 1fr;
  gap: 14px; align-items: baseline;
  padding: 11px 16px; margin-bottom: 7px; border-radius: 9px;
  background: rgba(255,255,255,0.62); border: 1px solid var(--card-border);
}
.baum-abschnitte li:last-child { margin-bottom: 0; }
/* Der waagerechte Strich zur Linie */
.baum-abschnitte li::before {
  content: ''; position: absolute; left: -26px; top: 50%;
  width: 26px; height: 2px; background: rgba(0,32,96,0.25);
}
.baum-abschnitte i {
  font-style: normal; width: 26px; height: 26px; border-radius: 7px;
  background: var(--nm-blue); color: #fff;
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  align-self: center;
}
.baum-abschnitte b { font-size: 16px; font-weight: 600; color: var(--nm-blue); }
.baum-abschnitte span { font-size: 14.5px; line-height: 1.55; color: rgba(0,32,96,0.75); }


@media (max-width: 820px) {
  .baum { padding: 0 20px; }
  .baum-kasten { padding: 12px; }
  .baum-abschnitte { margin-left: 16px; padding-left: 20px; }
  .baum-abschnitte li::before { left: -20px; width: 20px; }
  .baum-abschnitte li { grid-template-columns: 26px 1fr; gap: 9px; }
  .baum-abschnitte span { grid-column: 2; }
  .bz { padding: 12px 15px; }
}

/* ═══ AUFKLAPPEN DER SECHS ABSCHNITTE — 10.09.2026 ═══
   Torsten: „bei dieser Grafik könnte man doch das Kapitel 1 gut animieren,
   indem sich die Unterpunkte nacheinander öffnen oder aufklappen."
   Also nicht bloss einblenden: Jede Zeile geht wirklich auf — Hoehe, Polster
   und Abstand wachsen gemeinsam. Die Zielhoehe ist bekannt und bei allen
   sechs gleich (einzeilig), deshalb ist `max-height` hier unproblematisch. */
.js .baum-abschnitte li {
  max-height: 0; opacity: 0; overflow: hidden;
  padding-top: 0; padding-bottom: 0; margin-bottom: 0; border-width: 0;
  transition: max-height .42s cubic-bezier(.22,.61,.36,1),
              padding .42s cubic-bezier(.22,.61,.36,1),
              margin .42s cubic-bezier(.22,.61,.36,1),
              border-width .2s ease,
              opacity .3s ease .08s;
}
.js .baum-abschnitte.da li {
  max-height: 90px; opacity: 1;
  padding-top: 11px; padding-bottom: 11px; margin-bottom: 7px; border-width: 1px;
}
.js .baum-abschnitte.da li:last-child { margin-bottom: 0; }
.js .baum-abschnitte.da li:nth-child(1) { transition-delay: .05s, .05s, .05s, .05s, .13s; }
.js .baum-abschnitte.da li:nth-child(2) { transition-delay: .19s, .19s, .19s, .19s, .27s; }
.js .baum-abschnitte.da li:nth-child(3) { transition-delay: .33s, .33s, .33s, .33s, .41s; }
.js .baum-abschnitte.da li:nth-child(4) { transition-delay: .47s, .47s, .47s, .47s, .55s; }
.js .baum-abschnitte.da li:nth-child(5) { transition-delay: .61s, .61s, .61s, .61s, .69s; }
.js .baum-abschnitte.da li:nth-child(6) { transition-delay: .75s, .75s, .75s, .75s, .83s; }
@media (prefers-reduced-motion: reduce) {
  .js .baum-abschnitte li {
    max-height: none !important; opacity: 1 !important; overflow: visible !important;
    padding: 11px 16px !important; margin-bottom: 7px !important;
    border-width: 1px !important; transition: none !important;
  }
}

/* ═══ KOPFBÜHNE DER BAUSTEINSEITEN — 09.09.2026 ═══
   Torsten: „Der Block ist sehr schmal und es muss am Anfang ein Wow-Effekt,
   ein Kracher sein … so sieht es als Hook insgesamt etwas mickrig aus."

   Drei Hebel: das Video deutlich groesser (62 % der Breite statt 47 %), die
   Kennzahlen gross statt als beilaeufige Pillen, und ein Knopf, der die
   rechte Spalte unten abschliesst — vorher blieb dort Leere. */
.kopf-buehne {
  max-width: 1600px; margin: 0 auto; padding: 34px 40px 76px;   /* unten wie .section */
  display: grid; grid-template-columns: 1.62fr 1fr; gap: 54px; align-items: start;
}

.kopf-video .bild {
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,32,96,0.18), 0 2px 8px rgba(0,32,96,0.08);
}
/* ‼️ `:not(.ki-kennung)` ist PFLICHT. Ohne das streckt `height: 100%` die
   KI-Kennung auf die volle Videohoehe — sie erscheint dann als schmaler
   Streifen am rechten Rand (am 09.09.2026 zweimal passiert). */
.kopf-video .bild img:not(.ki-kennung),
.kopf-video .bild video { width: 100%; height: 100%; object-fit: cover; }

.kopf-text .kurz { font-size: 18.5px; line-height: 1.6; margin: 0 0 30px; }

/* ── [MENUE-HIER-2026-09-12] Wo bin ich gerade? ─────────────────────────────
   Torsten: „es wäre gut, wenn der menüpunkt noch visuell aktivert ist von der
   seite, auf der ich gerade bin."
   Der obere Punkt („Leistungen") war schon markiert — im aufgeklappten Menü
   aber nicht zu sehen, auf welcher der acht Seiten man steht.
   ‼️ Nicht nur Farbe: ein Strich davor. Farbe allein unterscheidet nicht
      genug vom Ueberfahren, und wer Farben schlecht sieht, hat sonst gar kein
      Merkmal. */
.nav-klapp a.hier,
.nav-spalten-lade a.hier { color: var(--nm-red); font-weight: 600; }
.nav-klapp a.hier { position: relative; }
.nav-klapp a.hier::before {
  content: ""; position: absolute; left: -13px; top: 3px; bottom: 3px;
  width: 3px; border-radius: 2px; background: var(--nm-red);
}
.nav-klapp a.hier em, .nav-spalten-lade a.hier em { color: rgba(150,0,0,0.72); }

/* ── [KOPF-BAUSTEINE-2026-09-12] Die Bausteine im Seitenkopf ────────────────
   Torsten: „darunter mit roten aufzählungspunkten die bausteine. die 3 zahlen
   raus." Sie stehen dort, wo vorher die drei grossen Zahlen standen.

   ‼️ ZWEI ROTTOENE, nicht einer: Der Kopf der Factory ist hell, der des
      Ateliers dunkel. Das Markenrot `#960000` ist auf Dunkelblau nicht mehr
      lesbar — dort gilt `#FF7070`, der einzige geprüfte Wert (Kontrast 4,66:1).
   ‼️ Zweispaltig ab 600 px Platz: Zwoelf Punkte untereinander wuerden den Kopf
      des Ateliers doppelt so hoch machen wie das Video daneben. */
.kopf-bausteine {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 26px;
}
/* ‼️ [12.09.2026] Torsten: „die aufzählungen alle in fettschrift" — gilt fuer
      die Aufzaehlung im Kopf ALLER acht Bausteinseiten, hell wie dunkel.
      Die Regel „kein Fettdruck im Fliesstext" bleibt davon unberuehrt: das hier
      sind Stichworte, kein Fliesstext. */
.kopf-bausteine li {
  position: relative; padding-left: 17px;
  font-size: 15.5px; line-height: 1.45; color: rgba(0,32,96,0.84);
  font-weight: 600;
}
.kopf-bausteine li::before {
  content: ""; position: absolute; left: 0; top: 0.52em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--nm-red);
}
/* ‼️ [12.09.2026] Torsten: „mach die 3 aufzählungen untereinander" — gilt fuer
      den Kopf von Tools und Services. Drei Punkte in zwei Spalten sahen
      unausgewogen aus (zwei oben, einer allein darunter). */
.kopf-bausteine.untereinander { grid-template-columns: 1fr; gap: 9px; }
.leistung-kopf.dunkel .kopf-bausteine li { color: rgba(255,255,255,0.88); }
/* ‼️ [12.09.2026] Torsten: „mach die aufzählungspunkte mal in #960000" — auch
      auf dem dunklen Kopf des Ateliers, wo vorher das hellere #FF7070 stand.
      GEMESSEN: #960000 auf #002060 ergibt 1,67:1. Die Punkte sind dort also
      nur schwach zu erkennen; für Text waere das zu wenig, fuer reine
      Aufzaehlungspunkte ist es seine Entscheidung. Er ist darauf hingewiesen. */
.leistung-kopf.dunkel .kopf-bausteine li::before { background: var(--nm-red); }
@media (max-width: 560px) {
  .kopf-bausteine { grid-template-columns: 1fr; gap: 8px; }
}
/* [12.09.2026] Die Punkte im Kopf erscheinen nacheinander (Torsten: „mach das
   mit dem aufpoppen auch bei ba und ef, wo es passt"). Zwoelf Punkte im Atelier
   — deshalb nur 55 ms Versatz, sonst dauert es ueber eine Sekunde. */
.js .kopf-bausteine.auf:not(.da) li { opacity: 0; }
.js .kopf-bausteine.da li {
  animation: feld-auf .46s cubic-bezier(.34,.9,.4,1) both;
  animation-delay: calc(var(--i, 0) * 65ms);
}
@media (prefers-reduced-motion: reduce) {
  .kopf-bausteine li { animation: none !important; opacity: 1 !important; }
}

/* Die Zahlen tragen den Einstieg — gross, untereinander, mit Trennlinien. */
.kopf-zahlen { margin: 0 0 30px; padding: 0; display: flex; flex-direction: column; }
.kopf-zahlen > div {
  display: flex; align-items: baseline; gap: 18px;
  padding: 16px 0; border-top: 1px solid var(--card-border);
}
.kopf-zahlen > div:last-child { border-bottom: 1px solid var(--card-border); }
.kopf-zahlen dt {
  flex: 0 0 auto; min-width: 78px;
  font-size: 42px; font-weight: 600; letter-spacing: -1.4px; line-height: 1;
  color: var(--nm-red); font-variant-numeric: tabular-nums;
}
.kopf-zahlen dd {
  margin: 0; font-size: 15.5px; line-height: 1.5; color: rgba(0,32,96,0.8);
}
.leistung-kopf.dunkel .kopf-zahlen > div { border-color: rgba(255,255,255,0.2); }
.leistung-kopf.dunkel .kopf-zahlen dt { color: #9FBAE3; }
.leistung-kopf.dunkel .kopf-zahlen dd { color: rgba(255,255,255,0.86); }
.leistung-kopf.dunkel .kopf-text .kurz { color: rgba(255,255,255,0.9); }

@media (max-width: 1000px) {
  .kopf-buehne { grid-template-columns: 1fr; gap: 28px; padding: 22px 20px 56px; }
  .kopf-zahlen dt { font-size: 34px; min-width: 64px; }
}

/* Auftritt: Video und Text gestaffelt */
.js .kopf-video { opacity: 0; transform: translateY(22px) scale(0.98); transition: opacity .7s ease .1s, transform .8s cubic-bezier(.16,.84,.34,1) .1s; }
.js .kopf-video.da { opacity: 1; transform: none; }
.js .kopf-text { opacity: 0; transform: translateY(22px); transition: opacity .7s ease .24s, transform .8s cubic-bezier(.16,.84,.34,1) .24s; }
.js .kopf-text.da { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .kopf-video, .js .kopf-text { opacity: 1 !important; transform: none !important; }
}

/* Der Einleitungssatz im Umfang-Abschnitt soll in EINE Zeile (Torsten, 10.09.2026).
   `.section-head` ist auf 820 px begrenzt — fuer diesen einen Abschnitt aufgehoben.
   Kein `nowrap`: auf schmalen Fenstern bricht der Satz weiter normal um, statt
   ueber den Rand zu laufen. */
.section.umfang .section-head { max-width: none; }

/* ═══ AUFBAU: Fliesstext links (1/3), Grafik rechts (2/3) — 10.09.2026 ═══
   Die Ueberschrift bleibt oben ueber die volle Breite. Die Grafik behaelt bei
   zwei Dritteln genug Breite, dass die Erklaerungen NEBEN den Namen stehen —
   bei halb/halb rutschten sie darunter und jede Zeile wurde zweizeilig. */
.aufbau-zwei {
  display: grid; grid-template-columns: 1fr 2fr; gap: 48px; align-items: start;
}
.aufbau-zwei .baum { max-width: none; margin: 0; padding: 0; }
.aufbau-text p {
  font-size: 16.5px; line-height: 1.65; color: rgba(0,32,96,0.78); margin: 0;
}
/* Die vier Absaetze brauchen Luft — ohne das laufen sie als ein Block. */
.aufbau-text p + p { margin-top: 15px; }
@media (max-width: 1000px) {
  .aufbau-zwei { grid-template-columns: 1fr; gap: 26px; }
}

/* ═══ BAUKASTEN: Grafik links (2/3), Text rechts (1/3) — 10.09.2026 ═══
   Umgekehrt zum Aufbau-Abschnitt. Das Ergebnis steht danach ueber die volle
   Breite, damit der Pfeil weiter von oben nach unten liest. */
/* ‼️ [11.09.2026] Die Tabelle ist als wischbarer Bereich gebaut (`.mx-scroll`,
   820 px Mindestbreite). Als Rasterkind gab ihr Rahmen aber nach: die ganze
   Spalte wurde 820 px breit, die Mediathek-Seite am Handy 841 statt 390 px
   (gemessen). Rasterkinder duerfen schrumpfen — gewischt wird innen. */
.bk-zwei > * { min-width: 0; }
.bk-zwei {
  display: grid; grid-template-columns: 2fr 1fr; gap: 44px; align-items: start;
}
.bk-text p { font-size: 16px; line-height: 1.65; color: rgba(255,255,255,0.84); margin: 0; }
.bk-text p + p { margin-top: 15px; }

/* ‼️ Bei zwei Dritteln muss die Matrix schmaler werden, sonst entsteht ein
   waagerechter Rollbalken: sechs Spalten plus Themenspalte brauchten vorher
   mindestens 900 px, verfuegbar sind nur noch rund 830. */
.bk-zwei .mx {
  grid-template-columns: minmax(120px, 0.95fr) repeat(6, minmax(84px, 1fr));
  gap: 6px; min-width: 0;
}
/* 10 px waren fuer Versalien gerechnet. In Normalschrift ist das zu klein —
   Kleinbuchstaben brauchen aber weniger Breite, also passt 11 px trotz der
   sieben engen Spalten. */
.bk-zwei .mx-ecke, .bk-zwei .mx-kopf { font-size: 11px; letter-spacing: .1px; padding-bottom: 8px; }
.bk-zwei .mx-thema { font-size: 14px; padding-right: 10px; }
.bk-zwei .mx-zelle { height: 46px; }

@media (max-width: 1100px) {
  .bk-zwei { grid-template-columns: 1fr; gap: 26px; }
  .bk-zwei .mx { grid-template-columns: minmax(150px, 1fr) repeat(6, minmax(100px, 1fr)); min-width: 820px; }
}

/* ‼️ AUF SCHMALEN BILDSCHIRMEN KEIN KLAPPEN ÜBER `max-height`.
   Dort werden die Zeilen zweizeilig; die feste Klapphoehe von 90 px schnitt
   dann Text ab (bei 500 px Fensterbreite gemessen: 5 von 6 Zeilen). Statt die
   Hoehe zu raten, entfaellt das Klappen hier — die Zeilen blenden nur ein.
   Lesbarkeit geht vor Effekt. */
@media (max-width: 900px) {
  .js .baum-abschnitte li {
    max-height: none; overflow: visible;
    padding: 11px 16px; margin-bottom: 7px; border-width: 1px;
    transform: translateY(8px);
    transition: opacity .4s ease, transform .45s cubic-bezier(.16,.84,.34,1);
  }
  .js .baum-abschnitte.da li { max-height: none; transform: none; }
  .js .baum-abschnitte.da li:nth-child(1) { transition-delay: .05s; }
  .js .baum-abschnitte.da li:nth-child(2) { transition-delay: .13s; }
  .js .baum-abschnitte.da li:nth-child(3) { transition-delay: .21s; }
  .js .baum-abschnitte.da li:nth-child(4) { transition-delay: .29s; }
  .js .baum-abschnitte.da li:nth-child(5) { transition-delay: .37s; }
  .js .baum-abschnitte.da li:nth-child(6) { transition-delay: .45s; }
}

/* Langes Lernvideo im Karussell: die Bedienleiste braucht Platz, das Bild
   soll nicht beschnitten werden. */
.bild-video-lang video { object-fit: contain; background: #001233; }

/* Im Karussell hat die Hörprobe viel Platz — dort darf sie groesser auftreten.
   Bei 46 px Wellenhoehe wirkte sie im 16:9-Feld verloren. */
.kar-medium .hoerprobe { padding: 36px 40px; gap: 26px; }
.kar-medium .hoerprobe .hp-welle { height: 104px; gap: 3px; }
.kar-medium .hoerprobe .hp-welle i { min-width: 3px; border-radius: 3px; }
.kar-medium .hoerprobe .hp-knopf { width: 64px; height: 64px; }
.kar-medium .hoerprobe .hp-knopf svg { width: 24px; height: 24px; }
.kar-medium .hoerprobe .hp-zeit { font-size: 15px; min-width: 52px; }
.kar-medium .hoerprobe figcaption { font-size: 14.5px; text-align: center; }
@media (max-width: 900px) {
  .kar-medium .hoerprobe { padding: 24px; gap: 18px; }
  .kar-medium .hoerprobe .hp-welle { height: 64px; }
  .kar-medium .hoerprobe .hp-knopf { width: 52px; height: 52px; }
}

/* ── Bildschirmaufnahmen werden eingepasst, nicht beschnitten ───────────────
   Das Karussell zwingt jedes Medium in 16/9 (`.kar-medium .bild`, mit
   `!important`, damit alle sieben Reiter gleich gross bleiben). Eine
   E-Book-Aufnahme ist 1600x830 — mit `cover` verlaere sie links und rechts
   je 4 %, und das ist Text. Deshalb `contain` auf dunklem Grund.
   ‼️ Muss NACH `.kar-medium .bild video` stehen, sonst greift es dort nicht. */
.bild-video-voll video { object-fit: contain !important; background: #001233; }

/* ── Zwei Hoerproben in einer Karussell-Flaeche (Songs, deutsch + englisch) ──
   Jedes Thema hat ZWEI Songs. Beide gehoeren in denselben Reiter, ohne dass
   das Karussell seine Groesse aendert — der Rahmen bleibt 16/9, die beiden
   Leisten teilen ihn sich.
   ‼️ `aspect-ratio: auto` mit `!important` ist noetig: Die Regel
      `.kar-medium .hoerprobe` weiter oben zwingt sonst JEDE Hoerprobe auf
      16/9, und die beiden waeren zusammen doppelt so hoch wie das Karussell. */
.kar-medium.hp-zwei { aspect-ratio: 16 / 9; display: grid; grid-template-rows: 1fr 1fr; gap: 16px; }
.kar-medium.hp-zwei .hoerprobe {
  aspect-ratio: auto !important; height: 100%; min-height: 0; padding: 18px 26px; gap: 16px;
}
.kar-medium.hp-zwei .hp-welle { height: 56px; }
.kar-medium.hp-zwei .hp-knopf { width: 48px; height: 48px; }
.kar-medium.hp-zwei .hp-knopf svg { width: 19px; height: 19px; }
.kar-medium.hp-zwei figcaption { font-size: 13.5px; text-align: center; }
@media (max-width: 900px) {
  .kar-medium.hp-zwei { aspect-ratio: auto; }
  .kar-medium.hp-zwei .hoerprobe { height: auto; padding: 20px; }
}

/* ── Bildschirmfotos lassen sich gross ansehen ──────────────────────────────
   Torsten, 10.09.2026. Beim Ueberfahren erscheint eine Lupe in der Mitte —
   dieselbe Bauart wie das Abspielzeichen auf den Videoclips, damit „hier
   passiert etwas beim Klick" ueberall gleich aussieht.
   ‼️ KEINE Regel auf `.bild img` hier — die wuerde die KI-Kennung mit
      verzerren (zweimal passiert am 09.09.2026). */
.bild-lupe { position: relative; cursor: zoom-in; }
.bild-lupe::after {
  content: ''; position: absolute; left: 50%; top: 50%; z-index: 4;
  width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 50%;
  background: rgba(0,32,96,0.72) no-repeat center/26px 26px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cline x1='15.5' y1='15.5' x2='21' y2='21'/%3E%3Cline x1='10.5' y1='7.6' x2='10.5' y2='13.4'/%3E%3Cline x1='7.6' y1='10.5' x2='13.4' y2='10.5'/%3E%3C/svg%3E");
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  opacity: 0; transition: opacity .22s; pointer-events: none;
}
.bild-lupe:hover::after,
.bild-lupe:focus-visible::after { opacity: 1; }
.bild-lupe:focus-visible { outline: 3px solid var(--nm-red); outline-offset: 3px; }

/* Das Fenster selbst: schwarzer Grund, damit das Bildschirmfoto wirkt, und
   nur so gross wie noetig. */
.modal-lupe { background: rgba(0,16,48,0.82); }
.modal-card.modal-bild {
  width: auto; max-width: 96vw; height: auto; max-height: 92vh;
  padding: 16px 16px 14px;
}
.modal-card.modal-bild h2 {
  font-size: 14px; font-weight: 600; letter-spacing: 0.2px;
  color: rgba(0,32,96,0.72); padding-right: 46px;
}
.lupe-flaeche {
  min-height: 0; border-radius: 10px; overflow: hidden; background: var(--body-bg);
  display: flex; align-items: center; justify-content: center;
}
/* ‼️ `max-height` in `vh` PLUS `width:auto`: Sonst waechst ein breites
      Bildschirmfoto ueber die Fensterhoehe hinaus und der Schliessknopf
      wandert aus dem Bild. */
.lupe-flaeche img { display: block; width: auto; height: auto; max-width: 92vw; max-height: 80vh; }
@media (max-width: 620px) {
  .modal-card.modal-bild { padding: 12px 12px 10px; }
  .lupe-flaeche img { max-height: 70vh; }
}
@media (prefers-reduced-motion: reduce) {
  .bild-lupe::after { transition: none !important; }
}

/* ── Das Knopfpaar: zwei gleichwertige Wege ─────────────────────────────────
   Torsten, 10.09.2026: „beide buttons sollten die gleiche breite und das
   gleiche layout haben, damit sie als alternative gleichberechtigt
   nebeneinander stehen."

   Raster statt Flexbox: `1fr 1fr` gibt beiden Spalten dieselbe Breite,
   unabhaengig davon, wie lang die Beschriftung ist. Mit Flexbox richtete
   sich die Breite nach dem Text — 269 gegen 342 px.
   ‼️ `minmax(0, 1fr)`, nicht `1fr`: Sonst kann eine Spalte nicht unter die
      Breite ihres Inhalts schrumpfen und das Raster laeuft aus dem Banner. */
.cta-paar {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px; max-width: 760px; align-items: stretch;
}
/* [CTA-ODER-2026-09-12] „oder" zwischen den Knoepfen (Torsten, 12.09.2026) —
   NUR im Banner am Seitenende (`.cta-leise`).
   ‼️ GEMESSEN und verworfen: erst stand es in JEDEM Knopfpaar. Oben auf der
      Startseite ist der Platz aber knapp — die dritte Spalte machte die
      Knoepfe so schmal, dass die Beschriftung ueber den Rand lief („anmelden"
      abgeschnitten, Foto 12.09.). Und das Woertchen selbst war dort
      unsichtbar: dunkelblau auf dunklem Grund, weil der Held-Bereich die
      Kennzeichnung `dunkel` nicht traegt.
      Deshalb: ausgeblendet ausserhalb des Banners, dort zwei Spalten wie zuvor. */
.cta-oder { display: none; }
.cta-leise .cta-oder {
  display: block; align-self: center; font-size: 14px; line-height: 1;
  color: rgba(0, 32, 96, 0.55); white-space: nowrap;
}
.dunkel .cta-leise .cta-oder { color: rgba(255, 255, 255, 0.6); }
.cta-paar .btn { width: 100%; justify-content: center; text-align: center; }
/* ‼️ [11.09.2026] `.btn` bricht nie um (nowrap) — in Handybreite waren die beiden
   Knoepfe 389 px breit bei 300 px Platz (gemessen, ALLE Seiten). Hier darf der
   Text umbrechen — NUR in Handybreite: am Rechner brach er sonst auf der
   Startseite in zwei Zeilen (Foto 11.09.2026), live stand er einzeilig. */
@media (max-width: 620px) { .cta-paar .btn { white-space: normal; min-width: 0; } }
/* Nebeneinander wird es unter rund 780 px zu eng — dann untereinander,
   weiterhin gleich breit. */
@media (max-width: 860px) {
  .cta-paar { grid-template-columns: 1fr; max-width: 420px; }
}

/* ── Abschluss jeder Seite: zwei Wege mit Bild ──────────────────────────────
   Torsten, 10.09.2026: „ich dachte eher, dass die beiden bilder am ende jeder
   seite zu sehen sind und darunter jeweils der knopf."

   Aufbau je Karte: Bild (16/9) · eine Zeile zum Unterschied · Knopf.
   Die Karten sind gleich breit und gleich hoch; der Knopf sitzt unten buendig,
   auch wenn die Zeilen verschieden lang umbrechen (`margin-top: auto`).
   ‼️ `.cta-bild img:not(.ki-kennung)` ist PFLICHT — die allgemeine Regel wuerde
      sonst die KI-Kennung auf volle Bildgroesse ziehen. Genau dieser Fehler ist
      am 09.09.2026 ZWEIMAL passiert (523x294 und 24x510). */
/* ‼️ Torsten, 10.09.2026: „die bilder webinar und demo sollten über die
      gesamte contentbreite gehen." Vorher war das Paar auf 860 px gedeckelt
      und stand als schmaler Block im breiten Abschnitt. Jetzt ohne Deckel —
      die Breite gibt der umgebende Abschnitt vor.
      Deshalb liegen die beiden Bilder auch in 1600 statt 1100 px vor: Bei
      voller Breite wird jedes rund 740 px gross, auf feinen Bildschirmen das
      Doppelte. */
.cta-karten {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 30px; align-items: stretch;
}
/* [CTA-ODER-BILD-2026-09-12] „und das oder dazwischen" (Torsten, 12.09.2026).
   Hier ist der Platz da — anders als oben auf der Startseite, wo das Woertchen
   deshalb ausgeblendet bleibt. Farbe wie im Banner, auf dunklem Grund hell. */
.cta-karten .cta-oder {
  display: block; align-self: center; font-size: 14px; line-height: 1;
  color: rgba(0, 32, 96, 0.55); white-space: nowrap;
}
.dunkel .cta-karten .cta-oder { color: rgba(255, 255, 255, 0.6); }
.cta-karte { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cta-bild {
  position: relative; margin: 0; border-radius: 14px; overflow: hidden;
  aspect-ratio: 16 / 9; background: var(--body-bg);
  box-shadow: 0 8px 26px rgba(0,32,96,0.14);
}
.cta-bild img:not(.ki-kennung) { width: 100%; height: 100%; object-fit: cover; display: block; }
.cta-bild .ki-kennung { position: absolute; right: 8px; bottom: 8px; width: 24px; height: 24px; opacity: 0.9; }
.cta-was {
  font-size: 15px; line-height: 1.58; color: rgba(0,32,96,0.78); margin: 0;
}
.cta-karte .btn { margin-top: auto; width: 100%; justify-content: center; text-align: center; }

/* Auf dunklem Grund */
.dunkel .cta-was, .leistung.dunkel .cta-was { color: rgba(255,255,255,0.82); }
.dunkel .cta-bild { box-shadow: 0 8px 26px rgba(0,0,0,0.3); }

/* Untereinander, sobald zwei Spalten zu schmal werden. */
@media (max-width: 860px) {
  .cta-karten { grid-template-columns: 1fr; max-width: 460px; gap: 30px; margin: 0 auto; }
  .cta-karten .cta-oder { justify-self: center; }
}

/* ── ‼️ SPEZIFITAET: die Kleinschrift wurde ueberstimmt ─────────────────────
   Am 10.09.2026 beim Umstellen auf Normalschrift gemessen:
     `.section-eyebrow`   (0,1,0)  verlor gegen `.section-head p`  (0,1,1) → 16 px
     `.kar-mass`          (0,1,0)  verlor gegen `.kar-text > p`    (0,1,1) → 16,5 px
   Mit Versalien fiel das nicht auf — die Grossbuchstaben trennten die Zeile
   optisch von der Ueberschrift. In Normalschrift stand sie ploetzlich fast so
   gross wie der Fliesstext da und las sich wie eine zweite Ueberschrift.
   Diese beiden Regeln haben (0,2,0) und gewinnen. */
.section-head .section-eyebrow { font-size: 12.5px; }
.kar-text .kar-mass { font-size: 13.5px; }

/* ═══════════════ HAUPTNAVIGATION — Umbau 10.09.2026 ═══════════════
   Torsten: „mir gefaellt unser navigationssystem noch nicht. ein teil ist oben
   im header, ein anderer im footer."
   Der eigentliche Mangel war groesser: Die sieben Leistungen standen im Kopf
   ueberhaupt nicht — man erreichte sie nur ueber die Startseite oder die
   Fusszeile. Jetzt drei Menuepunkte mit Aufklappflaechen.
   ‼️ Der `header` ist `position: sticky` mit z-index 50 — die Aufklappflaeche
      liegt absolut darin und braucht deshalb einen HOEHEREN Wert. */
.head-nav { display: flex; align-items: center; }
.nav-punkte { display: flex; align-items: center; gap: 3px; list-style: none; margin: 0; padding: 0; }
.nav-punkt {
  font: inherit; font-size: 15px; font-weight: 500; color: var(--nm-blue);
  background: transparent; border: 0; cursor: pointer;
  padding: 10px 15px; border-radius: 9px;
  display: inline-flex; align-items: center; gap: 7px;
  transition: background .15s, color .15s;
}
.nav-punkt:hover { background: rgba(0,32,96,0.07); }
.nav-punkt.aktiv { color: var(--nm-red); }
.nav-punkt[aria-expanded="true"] { background: #C7D3E5; }
/* ‼️ Torsten, 10.09.2026: „der rote rahmen bei aktiviertem menue gefaellt mir
      gar nicht." Zwei Aenderungen, beide noetig:
      1. Der Ring ist jetzt weich und in der Markenfarbe statt hart und rot.
      2. Bei GEOEFFNETEM Menue faellt er ganz weg — dort markiert die gefuellte
         Flaeche bereits, ein zweiter Rahmen darum ist doppelt.
      ‼️ Ganz entfernen darf man ihn NICHT: Wer mit der Tastatur navigiert,
         sieht sonst nicht, wo er steht. */
.nav-punkt:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,32,96,0.32);
}
.nav-punkt[aria-expanded="true"]:focus-visible { box-shadow: none; }
.nav-punkt svg {
  width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round; transition: transform .2s;
}
.nav-punkt[aria-expanded="true"] svg { transform: rotate(180deg); }

.head-rechts { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

/* Zweiter Rang mit Absicht: Rand statt Flaeche. Wer schon Mitglied ist, sucht
   gezielt — der Knopf muss gefunden werden, nicht auffallen. */
.btn-login {
  background: transparent; color: var(--nm-blue);
  border: 1.5px solid rgba(0,32,96,0.3); box-shadow: none;
}
.btn-login:hover { background: var(--btn-hell); border-color: var(--btn-hell); color: var(--nm-blue); }

.nav-burger {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 10px;
  border: 1.5px solid rgba(0,32,96,0.28); background: transparent;
  cursor: pointer; color: var(--nm-blue); flex: 0 0 auto;
}
.nav-burger svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.nav-burger:hover { background: rgba(0,32,96,0.07); }
.nav-burger:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0,32,96,0.32); }

/* ── Die Aufklappflaechen ─────────────────────────────────────────────── */
.nav-klapp {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 60;
  background: var(--body-bg);
  border-top: 1px solid var(--card-border); border-bottom: 4px solid var(--card-border);
  box-shadow: 0 20px 44px rgba(0,32,96,0.17);
  padding: 30px 40px 28px;
}
.nav-klapp[hidden] { display: none; }
/* ‼️ 512 px, nicht 460: „Wissensvermittlung, Kompetenzentwicklung und
      Transformation" misst ungebrochen 464 px — bei 460 px Spalte blieben nach
      dem Innenabstand 438 px, der Eintrag brach auf zwei Zeilen um. Gemessen
      am Live-Stand vom 10.09.2026. Wer die Beschriftung verlaengert, misst
      hier nach. */
.nav-spalten { max-width: 1600px; margin: 0 auto; display: grid; gap: 30px; grid-template-columns: minmax(0, 512px); }
.nav-klapp-breit .nav-spalten { grid-template-columns: repeat(4, minmax(0, 1fr)); }   /* [11.09.2026] vier Leistungsbereiche */
.nav-gruppe h3 {
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.2px; color: rgba(0,32,96,0.45);
  margin: 0 0 12px; padding-bottom: 9px; border-bottom: 1px solid var(--card-border);
}
.nav-gruppe ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
/* ‼️ Torsten, 10.09.2026: Die Erklaerung steht UNTER dem Namen, nicht daneben.
      Nebeneinander rutschte sie bei laengeren Saetzen aus der Spalte, und der
      Name selbst ging zwischen zwei Textbloecken unter. */
.nav-gruppe a {
  display: flex; flex-direction: column; gap: 2px; text-decoration: none;
  color: var(--nm-blue); font-size: 15px; font-weight: 500;
  padding: 9px 11px; border-radius: 8px; transition: background .13s;
}
.nav-gruppe a:hover { background: var(--card-bg); }

/* ── Gruppen ohne Erklaerungstext: alles in EINE Zeile ──────────────────────
   Torsten am 10.09.2026 zum Konzept-Menue: „bitte in eine zeile."
   ‼️ Ein fester Spaltendeckel reicht dafuer NICHT — er haelt nur so lange, bis
      jemand eine Beschriftung verlaengert oder der Schirm schmaler wird. Statt
      dessen richtet sich die Spalte nach dem laengsten Eintrag (`max-content`),
      und `nowrap` sichert es zusaetzlich ab. In der Schublade auf dem Handy
      bleibt der Umbruch erlaubt — dort ist die Breite wirklich knapp. */
.nav-gruppe.ohne-text a { white-space: nowrap; }
.nav-klapp:has(.nav-gruppe.ohne-text) .nav-spalten { grid-template-columns: minmax(0, max-content); }
.nav-lade .nav-gruppe.ohne-text a { white-space: normal; }

/* ‼️ Die einspaltigen Flaechen sind nur so breit wie ihr Inhalt. Ohne das
      bliebe der Rasterbehaelter ueber die ganze Breite stehen, und das
      Ausrichten am Knopf in `_navi.html` haette keinen Platz zum Schieben —
      es rechnete jedes Mal 0 heraus. In der Schublade nicht anwenden. */
.nav-klapp:not(.nav-klapp-breit) .nav-spalten { width: max-content; max-width: 100%; }
.nav-gruppe a:focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgba(0,32,96,0.32); }
.nav-gruppe a em { font-style: normal; font-size: 13px; line-height: 1.45; color: rgba(0,32,96,0.6); font-weight: 400; }

/* ── Schublade auf schmalen Schirmen ──────────────────────────────────── */
.nav-lade {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 60;
  /* ‼️ [13.09.2026] Der Grund der Schublade ist der Ton der KOPFLEISTE, nicht
     der des Seiteninhalts. Mit `--body-bg` (#EEF4FC) wirkte sie weiss und ging
     in die Seite ueber (Torsten: „außerdem sollte die Hintergrundfarbe dort
     nicht Weiß sein").
     ‼️ Nachgebessert am selben Tag: `--header-bg` (#D6E0EF) war Torsten immer
     noch zu blass — „bei einem hellen Display wirkt es wie weiß". Jetzt der
     kraeftige Kachelton `--btn-hell` (#9FBAE3), derselbe Ton, mit dem Knoepfe
     auf dunkelblauen Flaechen arbeiten. Dunkelblaue Schrift und die rote Marke
     bleiben darauf klar lesbar. */
  background: var(--btn-hell); border-bottom: 4px solid var(--card-border);
  box-shadow: 0 20px 44px rgba(0,32,96,0.17);
  padding: 8px 20px 22px; max-height: calc(100vh - 92px - env(safe-area-inset-top, 0px)); overflow-y: auto;
}
.nav-lade[hidden] { display: none; }
/* ‼️ [13.09.2026] Sanft von oben nach unten (Torsten: „dass sich dann die
   Menüseite nicht schlagartig öffnet"). Der Schnitt laeuft von oben auf, dazu
   ein kurzer Weg nach unten — das Menue faehrt aus dem Kopf heraus statt
   aufzuploppen. Eine Ueberblendung reicht nicht: `hidden` schaltet die Flaeche
   hart ab, deshalb eine Animation beim Erscheinen statt eines Uebergangs. */
@keyframes nav-lade-auf {
  from { opacity: 0; transform: translateY(-8px); clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; transform: translateY(0);    clip-path: inset(0 0 0 0); }
}
/* ‼️ [13.09.2026] Auch das Schliessen laeuft weich (Torsten). Das Skript setzt
   dafuer `zu` und schaltet die Flaeche ERST danach ab — die 380 ms dort und
   die 0,38 s hier gehoeren zusammen. */
@keyframes nav-lade-zu {
  from { opacity: 1; transform: translateY(0);    clip-path: inset(0 0 0 0); }
  to   { opacity: 0; transform: translateY(-8px); clip-path: inset(0 0 100% 0); }
}
.nav-lade:not([hidden]):not(.zu) { animation: nav-lade-auf .45s cubic-bezier(.22,.61,.36,1); }
.nav-lade.zu { animation: nav-lade-zu .38s cubic-bezier(.4,0,.7,.35); pointer-events: none; }
.nav-lade details { border-bottom: 1px solid var(--card-border); }
.nav-lade summary {
  list-style: none; cursor: pointer; padding: 15px 4px;
  font-weight: 600; font-size: 16px; color: var(--nm-blue);
  display: flex; align-items: center; justify-content: space-between;
}
/* ‼️ [13.09.2026] Die Gruppe, in der die offene Seite liegt, traegt die
   Marke — auch zugeklappt (Torsten: „damit ich weiß, dass ich mich innerhalb
   von Leistungen befinde, wenn ich das Menü wieder schließe"). Gleiche Marke
   wie in der Menueleiste am Rechner (`.nav-punkt.aktiv`). */
.nav-lade details.aktiv > summary { color: var(--nm-red); }
.nav-lade-verweis.aktiv { color: var(--nm-red); }
.nav-lade summary::-webkit-details-marker { display: none; }
.nav-lade summary svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; transition: transform .2s; }
.nav-lade details[open] summary svg { transform: rotate(180deg); }
.nav-lade summary:focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgba(0,32,96,0.32); }
.nav-spalten-lade { grid-template-columns: 1fr !important; gap: 14px; padding-bottom: 14px; }
.nav-lade-knopf { margin-top: 14px; width: 100%; justify-content: center; }

/* ── Fusszeile: sie traegt ALLES, das Menue nicht ─────────────────────── */
.footer-nav {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  grid-template-rows: auto auto;
  gap: 26px 30px; flex: 1 1 100%;
}
/* ‼️ [12.09.2026] Die Listen starten in ALLEN Spalten auf derselben Linie —
   auch wenn ein Titel zwei oder drei Zeilen braucht. Dafuer teilen sich die
   Spalten dieselben zwei Zeilen der Fusszeile (`subgrid`); die Titelzeile ist
   damit ueberall so hoch wie der laengste Titel. Kein fester Pixelwert, der
   bei einem neuen Titel wieder kippt. Kann ein Browser kein `subgrid`, greift
   die Mindesthoehe von zwei Zeilen an `h4` weiter unten. */
.fuss-gruppe { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
/* ‼️ [13.09.2026] Die Gruppen sind `<details>`, damit sie am Telefon aufklappen.
   AM RECHNER darf davon nichts zu sehen sein: kein Dreieck, kein Pfeil, kein
   Zeiger — und die Titelzeile nimmt keine Klicks an, sonst liesse sich die
   Fusszeile am Rechner versehentlich zuklappen. */
.fuss-gruppe > summary { list-style: none; pointer-events: none; }
.fuss-gruppe > summary::-webkit-details-marker { display: none; }
.fuss-gruppe > summary svg { display: none; }
/* ‼️ [12.09.2026] Torsten: „bring die Unterpunkte auf eine Höhe, auch wenn die
   Überschrift zweizeilig ist. Dann bei einzeilig eben eine Leerzeile
   dazwischen." Drei der sieben Spaltentitel brechen um — dadurch begannen
   die Listen auf verschiedenen Höhen. `min-height` von zwei Zeilen loest das
   ohne feste Pixelwerte: einzeilige Titel bekommen die freie Zeile, zweizeilige
   passen genau hinein. Die Zeilenhoehe steht deshalb ausdruecklich hier —
   ohne sie haengt die Rechnung an der Vorgabe des Browsers. */
.fuss-gruppe h4 {
  font-size: 12px; font-weight: 700; letter-spacing: 0.2px;
  color: rgba(0,32,96,0.45); margin: 0 0 10px;
  line-height: 1.45; min-height: 2.9em;
}
.fuss-gruppe ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fuss-gruppe a { color: rgba(0,32,96,0.78); text-decoration: none; font-size: 13.5px; }
.fuss-gruppe a:hover { color: var(--nm-red); }
.footer-unten {
  max-width: 1600px; margin: 26px auto 0; padding-top: 20px;
  border-top: 1px solid var(--card-border);
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  font-size: 13px; color: rgba(0,32,96,0.7);
}
.footer-copy { flex: 0 0 auto; }

@media (max-width: 1100px) {
  /* ‼️ Die Umschaltung auf die Schublade MUSS hier stehen, hinter den
     Grundregeln von `.nav-punkte`, `.nav-burger` und `.brand-text`. Weiter
     oben im Stil war sie wirkungslos (siehe Vermerk beim Abschnitt MOBIL). */
  .nav-punkte { display: none; }
  .nav-burger { display: inline-flex; }
  .brand-text { display: none; }
  .nav-klapp { padding: 24px 20px 22px; }
  .nav-klapp-breit .nav-spalten { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 767px) {
  .btn-login .btn-lang { display: none; }
  .btn-login { padding: 10px 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-punkt, .nav-punkt svg, .nav-gruppe a, .nav-lade summary svg { transition: none !important; }
  /* Wer weniger Bewegung will, bekommt die Schublade ohne Einblendung. */
  .nav-lade:not([hidden]), .nav-lade.zu { animation: none !important; }
}

/* ── Schleier hinter dem offenen Menue ──────────────────────────────────────
   Torsten, 10.09.2026: „ist es gewollt, dass die leiste der untermenues den
   kontext der webseite ueberlagert, oder waere es nicht eleganter, wenn beim
   oeffnen der leiste sich der kontext nach unten schiebt?"

   Ueberlagern bleibt — Wegschieben wuerde den Inhalt um bis zu 333 px
   verschieben (40 % der Fensterhoehe bei 820 px), und die Kopfleiste klebt
   beim Scrollen mit: Wer liest, verlaere seine Stelle. Gemessen am 10.09.2026.

   Was fehlte, war der ZUSAMMENHANG. Der Schleier macht aus dem „liegt darauf"
   ein „liegt darueber". Er sitzt UNTER der Aufklappflaeche (z-index 55 gegen
   60) und ueber dem Inhalt.
   ‼️ `pointer-events: none` ist Pflicht — sonst schluckt der Schleier den
      Klick, mit dem man das Menue wieder schliesst. */
.nav-schleier {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(0,32,96,0.28);
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease;
}
.nav-schleier.da { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .nav-schleier { transition: none; }
}

/* ── Das Fussballbeispiel in den drei Phasen-Kacheln ────────────────────────
   Torsten, 10.09.2026: drei Bilder zum Vergleich, der im Seitenkopf steht —
   Regelwerk lesen, mit dem Trainer ueben, im Spiel treffen. Dieselbe Person
   in allen dreien; die Reihenfolge erzaehlt die drei Phasen.
   Das Wasserzeichen entfaellt bei diesen Kacheln: Bild UND Symbol waeren
   doppelt gemoppelt.
   ‼️ `:not(.ki-kennung)` ist PFLICHT — sonst zieht die Regel die KI-Kennung
      auf volle Bildgroesse (am 09.09.2026 zweimal passiert). */
.tile-mitbild { padding-top: 0; padding-left: 0; padding-right: 0; }
.tile-mitbild > *:not(.tile-bild) { padding-left: 28px; padding-right: 28px; }
.tile-bild { margin: 0 0 4px; }
.tile-bild .bild {
  border-radius: 0; overflow: hidden; position: relative;
  border-bottom: 1px solid var(--card-border);
}
.tile-bild .bild img:not(.ki-kennung) { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile-bild .ki-kennung { position: absolute; right: 8px; bottom: 8px; width: 24px; height: 24px; opacity: 0.9; }
@media (max-width: 767px) {
  .tile-mitbild > *:not(.tile-bild) { padding-left: 22px; padding-right: 22px; }
}

/* ── Zwei Welten, dieselben drei Phasen ─────────────────────────────────────
   Torsten, 10.09.2026: erst „deutlich machen, wie es im Sport funktioniert und
   wie man es in die Wirtschaft uebertraegt", dann: „der umschalter gefaellt mir
   nicht. wie waere es, wenn es automatisch alle 4 sekunden wechselt? wenn ja,
   dann musst aber sicherstellen, dass die texte unter den bildern sich nicht
   verschieben."

   ‼️ GEGEN DAS VERSCHIEBEN: Die beiden Welten liegen UEBEREINANDER in derselben
      Rasterzelle (`grid-area: 1/1`). Damit richtet sich die Hoehe nach dem
      LAENGEREN der beiden Beispielsaetze und bleibt beim Wechsel konstant —
      der Text darunter kann nicht springen. Mit `display: none` waere die Hoehe
      bei jedem Wechsel neu berechnet worden, und genau das haette gewackelt.
      Deshalb `opacity` + `visibility`, nicht `display`. */
.welt-paar { display: grid; }

/* ── LAMELLENEFFEKT — die Jalousie (Torsten, 10.09.2026) ───────────────────
   „ich meinte senkrechte lamellen. auf der einen seite sind die fussballbilder
    und wenn sie sich dann senkrecht drehen erscheint die rueckseite der
    lamellen mit den business bildern."

   Also eine echte Jalousie: Zehn senkrechte Lamellen drehen sich um ihre eigene
   senkrechte Achse. VORNE die Sportbilder, HINTEN die Bilder aus der Wirtschaft.
   Beim Wechsel kippen sie nacheinander um 180 Grad.

   ‼️ Der erste Versuch war ein Aufziehen von Streifen — Torsten: „nicht schoen".
      Der Unterschied ist die Drehung: Sie zeigt beide Welten als zwei Seiten
      DESSELBEN Objekts. Genau das ist die Aussage der Seite.

   ‼️ `backface-visibility: hidden` ist Pflicht — ohne das scheint die
      Rueckseite spiegelverkehrt durch die Vorderseite.
   ‼️ Die Rueckseite traegt selbst `rotateY(180deg)`. Ohne das erschiene ihr
      Bild gespiegelt, sobald die Lamelle gedreht ist.
   ‼️ `perspective` gehoert auf die HUELLE, nicht auf die Lamelle — sonst
      bekaeme jede ihren eigenen Fluchtpunkt und die Reihe wirkte gewoelbt. */
.welt-paar > .tile-bild {
  grid-area: 1 / 1;
  opacity: 1; visibility: visible;
}
.js .welt-paar > .tile-bild.aus { opacity: 0; visibility: hidden; }

/* ‼️ NUR ÜBER DAS BILD, nicht über den Beispielsatz (Torsten, 10.09.2026:
      „während der animation werden die bilder höher").
      Als Rasterelement fuellte die Huelle die GANZE Zelle — also Bild UND Satz,
      243 statt 183 px. Waehrend der Drehung wuchs die Bildflaeche dadurch um
      60 px. `align-self: start` setzt sie nach oben; die genaue Hoehe traegt
      das Skript ein, gemessen am Bild daneben. So stimmt es auch, wenn ein
      Bild einmal ein anderes Seitenverhaeltnis hat. */
.lamellen {
  grid-area: 1 / 1; z-index: 2;
  align-self: start;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  perspective: 1400px;
  pointer-events: none;
  overflow: hidden;
}
.lamellen i {
  display: block; position: relative;
  transform-style: preserve-3d;
  transition: transform .62s cubic-bezier(.4,0,.2,1);
}
.lamellen.gedreht i { transform: rotateY(180deg); }
.lamellen i span {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background-repeat: no-repeat;
}
.lamellen i .rueck { transform: rotateY(180deg); }

/* Die KI-Kennung liegt UEBER den Lamellen — sie muss auch waehrend der
   Drehung sichtbar bleiben (EU AI Act Art. 50). Groesse wie ueberall: 24 px. */
.lamellen-kennung {
  position: absolute; right: 8px; bottom: 8px; z-index: 3;
  width: 24px; height: 24px; opacity: 0.9; pointer-events: none;
}

/* Jede Lamelle kippt 55 ms nach ihrer Vorgaengerin — von links nach rechts.
   Zehn x 55 ms + 620 ms Drehung = rund 1,17 s fuer den ganzen Wechsel. */
.lamellen i:nth-child(1)  { transition-delay: 0s; }
.lamellen i:nth-child(2)  { transition-delay: .055s; }
.lamellen i:nth-child(3)  { transition-delay: .11s; }
.lamellen i:nth-child(4)  { transition-delay: .165s; }
.lamellen i:nth-child(5)  { transition-delay: .22s; }
.lamellen i:nth-child(6)  { transition-delay: .275s; }
.lamellen i:nth-child(7)  { transition-delay: .33s; }
.lamellen i:nth-child(8)  { transition-delay: .385s; }
.lamellen i:nth-child(9)  { transition-delay: .44s; }
.lamellen i:nth-child(10) { transition-delay: .495s; }

@media (prefers-reduced-motion: reduce) {
  .lamellen { display: none !important; }
  .lamellen i { transition: none !important; }
}

/* ‼️ Bei „Bewegung reduzieren" laeuft nichts von selbst — und seit dem
   Entfernen der Anzeige (Torsten, 10.09.2026: „und das kann auch weg") gibt es
   auch keine Bedienung mehr. Damit die zweite Welt nicht unerreichbar wird,
   stehen dort BEIDE untereinander. Die Klasse setzt das Skript. */
.welt-paar.beide { display: block; }
.welt-paar.beide > .tile-bild { opacity: 1 !important; visibility: visible !important; }
.welt-paar.beide > .tile-bild + .tile-bild { margin-top: 14px; }

@media (prefers-reduced-motion: reduce) {
  .welt-paar > .tile-bild { transition: none; }
}

/* ── Zweispaltiger Text auch INNERHALB einer Seite ──────────────────────────
   [10.09.2026] Beim Zusammenlegen von „Unser Ansatz" und „Gehirnforschung und
   KI" brauchte der zweite Abschnittskopf dieselbe Form wie ein Seitenkopf —
   sonst haette die Seite zwei verschiedene Handschriften.
   Gleiche Regeln wie `.seiten-kopf .innen`, nur ohne dessen Polsterung. */
/* Gleiche Regel wie im Seitenkopf — Torsten am 10.09.2026 ausdruecklich auch
   fuer diesen Abschnitt: „das gleiche auch unten bei dem naechsten punkt
   Gehirnforschung und kuenstliche Intelligenz". */
.doppel-text {
  /* ‼️ 1.12 : 1 bei 48 px Abstand (Torsten, 10.09.2026: „in der linken spalte
     wuerde das wort Grundlagen noch locker in die erste zeile passen").
     Gemessen: Es fehlten genau 19 px. Jetzt hat die linke Spalte 778 statt
     746 px, die rechte 694 — beide unter 90 Zeichen je Zeile. */
  max-width: none;
  display: grid; grid-template-columns: 1.12fr 1fr;
  column-gap: 48px; align-items: start;
}
.doppel-text .lead,
.doppel-text .lead-2 { font-size: 17px; line-height: 1.62; margin: 0; }
.doppel-text .lead { color: rgba(0,32,96,0.8); }
.doppel-text .lead-2 {
  color: rgba(0,32,96,0.7);
  border-left: 3px solid rgba(0,32,96,0.18);
  padding-left: 22px;
}
/* [DOPPELTEXT-DUNKEL-2026-09-12] Der Abschnitt „Menschliche und kuenstliche
   Intelligenz" steht seit heute im dunklen Streifen (Torsten: „müßte blau
   sein, oder?"). Ohne diese drei Zeilen stuende dunkelblauer Text auf
   dunkelblauem Grund — der bekannte Fall bei jedem Streifentausch. */
.dunkel .doppel-text .lead { color: rgba(255,255,255,0.88); }
.dunkel .doppel-text .lead-2 {
  color: rgba(255,255,255,0.78); border-left-color: rgba(255,255,255,0.28);
}
/* [12.09.2026] Zweispaltiger Untertitel im Abschnittskopf. `doppel-text` steht
   sonst als eigener Block im Abschnitt; hier sitzt er IM Kopf und braucht
   deshalb den Abstand und die Schriftgroesse des Untertitels. */
.unter-titel-zwei { margin-top: 14px; }
.unter-titel-zwei p {
  margin: 0; font-size: 17px; line-height: 1.62; color: rgba(0,32,96,0.78);
}
.dunkel .unter-titel-zwei p { color: rgba(255,255,255,0.82); }
@media (max-width: 900px) { .unter-titel-zwei p + p { margin-top: 12px; } }

@media (max-width: 900px) {
  .doppel-text { grid-template-columns: 1fr; row-gap: 14px; max-width: 860px; }
  .doppel-text .lead-2 { border-left: 0; padding-left: 0; }
}

/* Ein Abschnittskopf, dessen Ueberschrift NICHT umbrechen soll. `.section-head`
   ist auf 820 px begrenzt — richtig fuer Fliesstext, zu schmal fuer eine lange
   Ueberschrift. (Torsten, 10.09.2026: „die ueberschrift in einer zeile") */
.section-head.breit { max-width: none; }
.section-head.breit h2 { max-width: none; }
/* Nur die Phasen-Ueberschrift bleibt zwingend einzeilig (Torsten, 10.09.2026:
   „die ueberschrift in einer zeile"). Der lange Titel im Gehirnforschungs-
   Abschnitt muss dagegen umbrechen duerfen, sonst laeuft er aus dem Bild. */
#ansatz .section-head.breit h2 { text-wrap: nowrap; }
@media (max-width: 1100px) {
  #ansatz .section-head.breit h2 { text-wrap: balance; }
}

/* Untertitel unter einer Abschnittsüberschrift (Torsten, 10.09.2026).
   ‼️ Eigene Klasse statt `.section-head p` — die Regel dort ist auf 820 px
      begrenzt und haette den Satz mitten im Wort umbrechen lassen, waehrend
      die Ueberschrift darueber ueber die volle Breite laeuft. */
.section-head .unter-titel {
  font-size: 17px; line-height: 1.6; color: rgba(0,32,96,0.7);
  margin: 10px 0 0; max-width: none;
}

/* ═══════════ ZWEI QUELLEN, EIN ERGEBNIS ═══════════
   Torsten, 10.09.2026: „gehirnforschung + kuenstliche intelligenz = Neue
   Zukunftsperspektiven. Aber bitte nicht in einer einfachen mathe-formel."

   ZWEITER ANLAUF nach seiner Rueckmeldung: „die geschwungenen linien wirken
   nicht und wirken auch unsymetrisch. mach die bilder kleiner und lass die
   linien an der linken kante des linken bildes in der mitte entstehen und an
   der mitte der rechten kante des rechten bildes. dann laufen beide nach unten
   fliesen in das dritte bild. der rote punkt kann ruhig dauerhaft pulsieren."

   Die Linien umfassen die Komposition jetzt wie eine KLAMMER: Sie beginnen
   aussen an den Bildkanten, laufen nach unten und muenden gemeinsam oben im
   dritten Bild.

   ‼️ Die Pfade werden in `_bewegung.html` aus den ECHTEN Positionen berechnet,
      nicht in einem festen viewBox geschaetzt. Nur so sind sie wirklich
      symmetrisch — und bleiben es bei jeder Fensterbreite. */
.zusammenfluss { padding-top: 8px; }
.zf-buehne { position: relative; max-width: 1000px; margin: 0 auto; }

.zf-quellen {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px;
}
.zf-quelle { margin: 0; }
.zf-bild .bild { border-radius: 14px; overflow: hidden; position: relative;
                 box-shadow: 0 10px 30px rgba(0,32,96,0.16); }
/* ‼️ `:not(.ki-kennung)` ist PFLICHT — sonst zieht die Regel die KI-Kennung
      auf volle Bildgroesse (am 09.09.2026 zweimal passiert). */
.zf-bild .bild img:not(.ki-kennung) { width: 100%; height: 100%; object-fit: cover; display: block; }
.zf-bild .ki-kennung { position: absolute; right: 8px; bottom: 8px; width: 24px; height: 24px; opacity: .9; }
.zf-quelle figcaption { display: block; padding: 14px 4px 0; }
.zf-marke { display: block; font-size: 17px; font-weight: 600; color: var(--nm-blue); letter-spacing: -0.2px; }
.zf-was { display: block; font-size: 14.5px; line-height: 1.5; color: rgba(0,32,96,0.66); margin-top: 3px; }

/* ── Die Klammer ── */
.zf-fluss {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0; overflow: visible;
}
/* ‼️ Torsten, 10.09.2026: „die animierte linie sieht nicht wirklich richtig
      schick aus. und ist auch viel zu duenn." — Aus 2,5 px grau werden 5 px
      mit Farbverlauf, darunter ein weicher Schein. Die Linie beginnt in der
      Markenfarbe und wird zur Mitte hin rot: Dort kommen beide zusammen. */
.zf-linie {
  fill: none; stroke-width: 6; stroke-linecap: round;
}
.zf-linie.zf-links  { stroke: url(#zfVerlaufLinks); }
.zf-linie.zf-rechts { stroke: url(#zfVerlaufRechts); }

/* Der Schein liegt darunter — breit, blass, unscharf. Er gibt der Linie Tiefe,
   ohne sie zu ueberdecken. */
/* !! [12.09.2026] Auf dem blauen Grund war die Linie streckenweise unsichtbar
   (Torsten). Kein Wunder: Schein, Verlaufsanfang und die kleinen Funken
   waren dunkelblau — also genau die Farbe des Abschnitts. Alles Dunkle ist
   hier auf Hell umgestellt, die Mitte bleibt rot. */
.zf-schein {
  fill: none; stroke: rgba(255,255,255,0.16); stroke-width: 16; stroke-linecap: round;
  filter: blur(7px);
}

/* Die Lichtpunkte wandern dauerhaft zur Mitte — das ist der „Strom". */
.zf-funke { fill: var(--nm-red); opacity: .9; filter: drop-shadow(0 0 6px rgba(150,0,0,.65)); }
.zf-funke-klein { fill: #EEF4FC; opacity: .8; filter: drop-shadow(0 0 6px rgba(255,255,255,.55)); }
.js .zf-linie, .js .zf-schein { stroke-dasharray: var(--laenge, 1200); stroke-dashoffset: var(--laenge, 1200); }
.js .zusammenfluss.da .zf-linie,
.js .zusammenfluss.da .zf-schein {
  animation: zf-zeichnen 1.4s cubic-bezier(.4,0,.3,1) .5s forwards;
}
/* Die Funken erscheinen erst, wenn die Linien gezogen sind. */
.js .zf-funke { opacity: 0; }
.js .zusammenfluss.da .zf-funke { animation: zf-auf .6s ease 1.9s forwards; }
@keyframes zf-auf { to { opacity: .9; } }
@keyframes zf-zeichnen { to { stroke-dashoffset: 0; } }

/* ── Das Ergebnis ── */
/* ‼️ Viel Luft nach oben: In diesem Raum laufen die Linien zusammen, OHNE
   Beschriftungen oder den Titel zu kreuzen (Torsten, 10.09.2026: „die linien
   muessen so verlaufen, dass sie nicht durch das bild oder durch die texte
   hindurch gehen"). */
.zf-ergebnis { margin: 104px 0 0; text-align: center; position: relative; z-index: 1; }
.zf-titel { font-size: 28px; font-weight: 600; letter-spacing: -0.5px; color: var(--nm-red); margin: 0 0 18px; }
.zf-bild-gross { width: calc((100% - 34px) / 2); margin: 0 auto; position: relative; }
.zf-bild-gross .bild { border-radius: 16px; box-shadow: 0 16px 44px rgba(0,32,96,0.2); }
.zf-text { font-size: 17px; line-height: 1.62; color: rgba(0,32,96,0.75); margin: 20px auto 0; max-width: 62ch; }

/* ── Der Punkt, an dem beide Linien einmuenden — er pulsiert DAUERHAFT ──
   Torsten: „der rote punkt kann ruhig dauerhaft pulsieren und nicht nur
   einmal." Er sitzt mittig auf der Oberkante des dritten Bildes, genau dort,
   wo die Linien ankommen. */
/* Der Puls sitzt am TREFFPUNKT der beiden Linien — im freien Raum ueber dem
   Titel. Seine Hoehe setzt das Skript, damit er dort sitzt, wo die Linien
   wirklich ankommen. */
/* ‼️ Torsten: „der pulsierende rote punkt kann auch durchaus viel groesser
      sein" — von 15 auf 34 px, mit einem hellen Kern und zwei Ringen, die
      nacheinander nach aussen laufen. */
.zf-puls {
  position: absolute; left: 50%; top: var(--treff, 0px); width: 34px; height: 34px;
  margin: -17px 0 0 -17px; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #d43a3a 0%, var(--nm-red) 58%, #6d0000 100%);
  box-shadow: 0 0 26px rgba(255,90,90,0.55), 0 4px 16px rgba(150,0,0,0.5);
  z-index: 3; animation: zf-pochen 2.4s ease-in-out infinite;
}
/* !! [12.09.2026] Der Puls war kaum noch zu bemerken (Torsten). Die Ringe waren
   dunkelrot auf Dunkelblau und liefen nur bis zum 2,7-fachen. Jetzt heller,
   breiter und weiter — sichtbar, ohne unruhig zu wirken. */
.zf-puls::before,
.zf-puls::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2.5px solid rgba(255,120,120,0.8);
  animation: zf-ring 2.4s cubic-bezier(.2,.6,.35,1) infinite;
}
.zf-puls::after { animation-delay: 1.2s; }
@keyframes zf-ring {
  0%   { transform: scale(1);   opacity: .95; }
  75%  { opacity: 0.1; }
  100% { transform: scale(3.6); opacity: 0; }
}
@keyframes zf-pochen {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.28); }
}

/* ── Startzustaende. Nur mit Skript, damit ohne JS alles sichtbar bleibt. ── */
.js .zusammenfluss .zf-quelle { opacity: 0; transition: opacity .7s ease, transform .7s cubic-bezier(.16,.84,.34,1); }
.js .zusammenfluss .zf-quelle[data-zf="1"] { transform: translateX(-40px); }
.js .zusammenfluss .zf-quelle[data-zf="2"] { transform: translateX(40px); }
.js .zusammenfluss.da .zf-quelle { opacity: 1; transform: none; }
.js .zusammenfluss.da .zf-quelle[data-zf="2"] { transition-delay: .15s; }

.js .zusammenfluss .zf-ergebnis {
  opacity: 0; transform: translateY(30px);
  transition: opacity .8s ease 1.6s, transform .8s cubic-bezier(.16,.84,.34,1) 1.6s;
}
.js .zusammenfluss.da .zf-ergebnis { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .zf-buehne { max-width: 460px; }
  .zf-quellen { grid-template-columns: 1fr; gap: 24px; }
  .zf-bild-gross { width: 100%; }
  .zf-ergebnis { margin-top: 30px; }
  .zf-titel { font-size: 23px; }
  /* Untereinander ergaebe die Klammer keinen Sinn mehr. */
  .zf-fluss { display: none; }

  /* ‼️ [13.09.2026] Der Puls braucht dann auch einen neuen Platz. Seine Hoehe
     kommt sonst aus der BERECHNUNG der Linien — und die sind hier aus. Ergebnis
     am Telefon: er lag auf der Ueberschrift (Torsten: „der pulsierende Punkt
     überdeckt die Überschrift"). Jetzt steht er in einer eigenen Zeile zwischen
     den beiden Quellen und dem Ergebnis: derselbe Gedanke — hier kommt es
     zusammen —, nur ohne Linien und ohne Ueberdeckung.
     Dazu eine kurze senkrechte Linie darueber und darunter, damit der Punkt
     nicht zusammenhanglos im Raum steht. */
  /* ‼️ `display: block` ist hier PFLICHT, nicht Geschmack: Der Puls ist ein
     `span`. Ohne `position: absolute` faellt er in den Fliesstext zurueck und
     ist damit ein INLINE-Element — seine 34 px gelten dann nicht mehr. Am
     13.09.2026 blies sich sein Ring dadurch ueber die ganze Buehne auf und lief
     als riesiger roter Bogen quer durch den Abschnitt. */
  .zf-puls {
    position: static; display: block; width: 34px; height: 34px;
    margin: 44px auto 62px;
  }
  .zf-puls::before, .zf-puls::after { border-color: rgba(255,120,120,0.75); }
}
/* ‼️ Bei „Bewegung reduzieren" steht alles sofort da — kein Zeichnen, kein
      Pochen. Die Aussage traegt auch ohne Bewegung. */
@media (prefers-reduced-motion: reduce) {
  .js .zusammenfluss .zf-quelle,
  .js .zusammenfluss .zf-ergebnis { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js .zusammenfluss.da .zf-linie,
  .js .zusammenfluss.da .zf-schein { animation: none !important; stroke-dashoffset: 0; }
  .js .zusammenfluss.da .zf-funke { animation: none !important; opacity: .9; }
  .zf-puls, .zf-puls::before, .zf-puls::after { animation: none !important; }
  .zf-puls::before, .zf-puls::after { opacity: 0; }
}


/* Untertitel unter einer Abschnittsüberschrift (Torsten, 10.09.2026).
   ‼️ Eigene Klasse statt `.section-head p` — die Regel dort ist auf 820 px
      begrenzt und haette den Satz mitten im Wort umbrechen lassen, waehrend
      die Ueberschrift darueber ueber die volle Breite laeuft. */
.section-head .unter-titel {
  font-size: 17px; line-height: 1.6; color: rgba(0,32,96,0.7);
  margin: 10px 0 0; max-width: none;
}

/* ═══════════ ZWEI QUELLEN, EIN ERGEBNIS ═══════════
   Torsten, 10.09.2026: „gehirnforschung + kuenstliche intelligenz = Neue
   Zukunftsperspektiven. Aber bitte nicht in einer einfachen mathe-formel.
   denke dir hierzu etwas richtig schickes und toll animiertes aus."

   Der Ablauf beim Sichtwerden:
     1. Die beiden Quellen fahren von aussen herein          (0,0 s / 0,15 s)
     2. Aus jeder zeichnet sich eine Linie nach unten-innen  (ab 0,55 s)
     3. Am Treffpunkt schlaegt ein Puls auf                  (ab 1,35 s)
     4. Das Ergebnis steigt auf und blendet ein              (ab 1,50 s)

   ‼️ ALLES beginnt aus einem SICHTBAREN Zustand heraus? Nein — hier bewusst
      nicht: Der Abschnitt liegt weit unten auf der Seite und wird erst beim
      Hinunterscrollen erreicht. Ohne Skript (`.js` fehlt) steht trotzdem alles
      da; die Startzustaende gelten nur, wenn JavaScript laeuft. */
.zusammenfluss { padding-top: 8px; }

/* ── Der Aufruf am Ende der Inhaltsseiten ───────────────────────────────────
   Torsten, 10.09.2026, in drei Schritten: Zwei grosse Bildkarten waren „zu
   aufdringlich", eine reine Textzeile zu zurueckhaltend, kleine Vorschaubilder
   immer noch zu viel. Endfassung: „mach einfach die 2 blauen button ueber die
   kontextbreite."

   Also nur die beiden Knoepfe, je zur Haelfte ueber die volle Inhaltsbreite,
   getrennt durch eine feine Linie vom Inhalt darueber. Die Bildfassung steht
   weiterhin auf der Startseite. */
.cta-leise {
  border-top: 1px solid var(--card-border);
  padding-top: 28px; margin-top: 8px;
}
/* ‼️ Ueber die VOLLE Breite: Der Deckel von 760 px aus `.cta-paar` wird hier
      aufgehoben, sonst stuenden die Knoepfe schmal links. */
.cta-leise .cta-paar { max-width: none; gap: 16px;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
/* [CTA-ODER-2026-09-12] Etwas kleiner auf Torstens Wunsch („mach die beiden
   buttons auf allen seiten etwas kleiner"): vorher 15px Schrift und
   15px/20px Innenabstand, Symbol 34 px. */
.cta-leise .cta-paar .btn { padding: 12px 18px; font-size: 14px; }

/* ── Das Symbol vor der Beschriftung (Torsten, 10.09.2026) ──────────────────
   ‼️ Es ist ein `<img>`, kein `<svg>` — die Regel `.btn svg { width: 16px }`
      greift hier also NICHT. Ohne eigene Groesse stuende das Bild 160 px hoch
      im Knopf. `flex: 0 0 auto` haelt es rund, wenn die Beschriftung umbricht. */
/* ‼️ Die Symbolflaeche traegt das Bild als MASKE, nicht als Inhalt: Damit
   bestimmt `currentColor` die Farbe, und das Symbol passt sich jedem Knopf an
   — weiss auf dunkelblau, blau auf hellblau, weiss auf rot im Ueberfahren.
   Die Pfade sind relativ zu DIESER Datei (`assets/stil.css`), gelten also auf
   allen Seiten gleich, egal wie tief sie liegen. */
.btn-sym {
  width: 28px; height: 28px; flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}
.btn-sym-webinar { -webkit-mask-image: url(bilder/sym-webinar.png); mask-image: url(bilder/sym-webinar.png); }
.btn-sym-demo    { -webkit-mask-image: url(bilder/sym-demo.png);    mask-image: url(bilder/sym-demo.png); }
.cta-leise .btn-sym { width: 28px; height: 28px; }
.cta-leise .cta-paar .btn { gap: 10px; }

.dunkel .cta-leise { border-top-color: rgba(255,255,255,0.2); }

@media (max-width: 860px) {
  .cta-leise .cta-paar { grid-template-columns: 1fr; max-width: none; }
  /* Untereinander steht „oder" als eigene Zeile mittig dazwischen. */
  .cta-leise .cta-oder { justify-self: center; }
}

/* ═══════════════ SPRUNGLEISTE — Abschnitte EINER Seite ═══════════════
   Torsten am 10.09.2026: „Konzept" und „Mitgliedschaft" sind keine
   Aufklappmenues mehr, sondern Direktverweise. Ihre Abschnitte erreicht man
   jetzt hier — auf der Seite selbst.

   ‼️ Der `header` ist `sticky` mit z-index 70 und 130 px hoch (unter 767 px
      nur 92 px). Die Leiste klebt genau darunter und braucht deshalb beide
      Werte. Wer die Kopfhoehe aendert, aendert sie hier mit — sonst klafft
      eine Luecke oder die Leiste verschwindet unter dem Kopf. */
.sprungleiste {
  position: sticky; top: calc(130px + env(safe-area-inset-top, 0px)); z-index: 40;
  background: var(--header-bg);
  border-bottom: 1px solid var(--card-border);
  padding: 0 40px;
}
.sprung-innen {
  max-width: 1600px; margin: 0 auto;
  display: flex; align-items: stretch; gap: 4px;
  overflow-x: auto; scrollbar-width: none;
}
.sprung-innen::-webkit-scrollbar { display: none; }
.sprungleiste a {
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: 14px 14px 12px; text-decoration: none;
  font-size: 14.5px; font-weight: 500; color: rgba(0,32,96,0.72);
  border-bottom: 2px solid transparent;
  transition: color .13s, border-color .13s;
}
.sprungleiste a:hover { color: var(--nm-blue); }
.sprungleiste a.hier { color: var(--nm-red); border-bottom-color: var(--nm-red); }
.sprungleiste a:focus-visible { outline: 3px solid var(--nm-red); outline-offset: -3px; }

/* ‼️ Ohne das springt der Anker HINTER die Kopfleiste: 130 px Kopf plus 49 px
      Leiste, dazu etwas Luft. Vorher fehlte im ganzen Stil jedes
      `scroll-margin` — Ankersprunge landeten schon immer zu hoch. */
.section[id] { scroll-margin-top: 196px; }

/* ── Menuepunkte, die einfach verweisen (Start, Konzept, Mitgliedschaft) ──
      Sie sehen aus wie die Klappknoepfe, haben aber kein Pfeilchen. */
a.nav-verweis { text-decoration: none; }
.nav-lade-verweis {
  display: block; padding: 15px 4px; font-weight: 600; font-size: 16px;
  color: var(--nm-blue); text-decoration: none;
  border-bottom: 1px solid var(--card-border);
}
.nav-lade-verweis:hover { color: var(--nm-red); }

@media (max-width: 767px) {
  .sprungleiste { top: calc(92px + env(safe-area-inset-top, 0px)); padding: 0 20px; }
  .sprungleiste a { font-size: 13.5px; padding: 12px 10px 10px; }
  .section[id] { scroll-margin-top: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .sprungleiste a { transition: none !important; }
}

/* ═══════════════ ÜBERLEITUNG IN EINER ZEILE ═══════════════
   Torsten am 10.09.2026: „aber bitte in 1 zeile."
   Gemessen: Der Satz ist 38,8-mal so breit wie die Schriftgröße. Bei festen
   38 px wären das 1475 px — mehr als der Deckel von 1080 px aus `.aussage p`,
   der Satz brach also zweimal um. Deshalb hier: kein Deckel, und die Schrift
   wächst mit dem Fenster statt fest zu stehen.
   ‼️ Der Faktor 2,4vw hat rund 5 % Luft eingerechnet: `letter-spacing` ist ein
      fester Wert in Pixeln und schrumpft NICHT mit der Schrift, der Satz wird
      bei kleiner Schrift also verhältnismäßig breiter.
   ‼️ Unterhalb von 768 px darf er umbrechen — sonst stünde er dort bei 7 px.
      Diese Regel MUSS hier stehen: `.aussage.einzeilig p` ist spezifischer als
      die Mobilregel weiter oben und würde sie sonst überall schlagen. */
.aussage.einzeilig > p { font-size: min(38px, calc(2.4vw - 2px)); }
@media (max-width: 767px) {
  .aussage.einzeilig > p { font-size: 25px; }
}

/* ═══════════════ DIE SIEBEN BAUSTEINE ALS KACHELREIHE ═══════════════
   Torsten am 10.09.2026: „Darunter sollten jetzt nebeneinander 7 Kacheln in
   denen der name des Tools steht und darunter ein passendes Icon."
   Sie stehen im hellen Überleitungsabschnitt. Deshalb ist die Reihenfolge von
   Hell und Dunkel bei den sieben Abschnitten darunter getauscht — sonst
   folgten zwei helle Flächen aufeinander („mediathek müßte dann blau werden"). */
.tool-reihe {
  margin-top: 46px;
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 14px;
}
.tool-kachel {
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  cursor: default;
  /* Torsten, 10.09.2026: „die kacheln hoeher und die icons viel groesser"
     und „zwischen den icons und den kacheln unten einen rand, also abstand
     lassen" — deshalb unten deutlich mehr Luft als oben. */
  padding: 26px 12px 46px; text-decoration: none;
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px;
  transition: background .14s, transform .14s, border-color .14s;
}
/* ‼️ [10.09.2026] KEIN Hover, KEIN Fokusrahmen — Torsten: „sie sollten aber
   nicht verlinkt sein und auch keinen mouse over effekt haben." Die Reihe ist
   eine Übersicht, kein Bedienelement. Wer hier wieder etwas Anklickbares
   einbaut, braucht beides zurück (und den Eintrag in der Textlink-Ausnahme). */
/* ‼️ Der Name steht OBEN, das Symbol darunter — so hat Torsten es bestellt.
      Deshalb `flex-direction: column` und der Name als erstes Kind. */
.tool-name {
  font-size: 16.5px; font-weight: 600; line-height: 1.3; text-align: center;
  color: var(--nm-blue); letter-spacing: -0.2px;
  /* ‼️ Platz fuer zwei Zeilen, auch wenn nur eine gebraucht wird. „Learning
     Management" bricht um und schob sein Symbol sonst nach unten — die sieben
     Symbole standen dann nicht mehr auf einer Linie. */
  display: flex; align-items: center; min-height: 2.6em;
}
.tool-sym {
  display: flex; align-items: center; justify-content: center;
  width: 104px; height: 104px; border-radius: 26px;
  background: var(--btn-hell); color: var(--nm-blue); flex: 0 0 auto;
}
.tool-sym svg { width: 58px; height: 58px; stroke-width: 1.6; }

@media (max-width: 1200px) {
  .tool-reihe { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .tool-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 30px; }
  .tool-kachel { padding: 20px 10px 32px; gap: 16px; }
  .tool-sym { width: 78px; height: 78px; border-radius: 20px; }
  .tool-sym svg { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .tool-kachel { transition: none !important; }
  .tool-kachel:hover { transform: none; }
}


/* ═══════════════ AUFTRITT DER SIEBEN KACHELN ═══════════════
   Torsten am 10.09.2026: „stattdessen wäre aber eine schicke animation beim
   öffnen der seite schön."

   Sie hängt am vorhandenen Einblende-Beobachter (`.auf` → `.da`), also an
   derselben Mechanik wie der Rest der Seite — nichts Neues daneben. Jede
   Kachel steigt auf, das Symbol kommt kurz danach mit leichtem Überschwingen
   hinterher.

   ‼️ `--v` staffelt BEIDE Bewegungen aus einer Quelle. Zwei getrennte
      Verzögerungslisten liefen sonst irgendwann auseinander.
   ‼️ Die Stufen überschreiben die allgemeinen `.auf.v1…v3` aus dem Beobachter:
      `.js .tool-reihe > .tool-kachel:nth-child(n)` ist spezifischer. Die
      allgemeinen Stufen reichen nur bis drei — hier sind es sieben. */
.js .tool-reihe > .tool-kachel:nth-child(1) { --v: 0s; }
.js .tool-reihe > .tool-kachel:nth-child(2) { --v: .09s; }
.js .tool-reihe > .tool-kachel:nth-child(3) { --v: .18s; }
.js .tool-reihe > .tool-kachel:nth-child(4) { --v: .27s; }
.js .tool-reihe > .tool-kachel:nth-child(5) { --v: .36s; }
.js .tool-reihe > .tool-kachel:nth-child(6) { --v: .45s; }
.js .tool-reihe > .tool-kachel:nth-child(7) { --v: .54s; }
.js .tool-reihe > .tool-kachel:nth-child(8) { --v: .63s; }

.js .tool-kachel.auf {
  opacity: 0; transform: translateY(26px) scale(.96);
  transition: opacity .55s cubic-bezier(.22,.61,.36,1),
              transform .55s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--v, 0s);
}
.js .tool-kachel.auf.da { opacity: 1; transform: none; }

/* Das Symbol setzt kurz nach seiner Kachel auf — mit weichem Überschwingen. */
.js .tool-kachel.auf .tool-sym {
  opacity: 0; transform: scale(.55) rotate(-10deg);
  transition: opacity .5s ease, transform .62s cubic-bezier(.34,1.5,.64,1);
  transition-delay: calc(var(--v, 0s) + .14s);
}
.js .tool-kachel.auf.da .tool-sym { opacity: 1; transform: none; }

/* ‼️ WCAG 2.3.3: Wer „Bewegung reduzieren" gewählt hat, sieht die Reihe
      sofort und vollständig. Bei einer Akademie für Gehirnforschung ist das
      nicht verhandelbar. */
@media (prefers-reduced-motion: reduce) {
  .js .tool-kachel.auf,
  .js .tool-kachel.auf .tool-sym {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* ═══════════════ DER AUFTRITT DER STARTSEITE IN DREI PHASEN ═══════════════
   Torsten am 10.09.2026: „alles ist zur gleichen Zeit animiert. hier wäre ein
   zeitliches hintereinander in 3 Phasen sinnvoll: erst der Block Menschen
   verstehen…, dann die 3 Spalten darunter und dann der Abschnitt mit den
   7 Tools."

     Phase 1  ab 0,10 s — Bühne: Zeile für Zeile, dann das Video daneben
     Phase 2  ab 0,85 s — die drei Spalten unter der Bühne
     Phase 3  ab 1,45 s — Überleitungssatz, danach die sieben Kacheln

   ‼️ Alle Regeln hängen an `.start`. Die Klasse vergibt `_bewegung.html` nur
      an das, was beim Laden schon im Bild steht. Ohne sie bliebe jemand, der
      später hinunterscrollt, eineinhalb Sekunden vor einer leeren Fläche
      sitzen. Wer hier eine Verzögerung ergänzt, hängt sie ebenfalls an
      `.start` — nie an `.auf` allein. */

/* ── Phase 1: die Bühne ── */
.js .buehne-text > .auf.start:nth-child(1) { transition-delay: .10s; }
.js .buehne-text > .auf.start:nth-child(2) { transition-delay: .22s; }
.js .buehne-text > .auf.start:nth-child(3) { transition-delay: .34s; }
.js .buehne-text > .auf.start:nth-child(4) { transition-delay: .46s; }
/* ‼️ Bühnenbild und Bühnenvideo stehen bewusst NICHT in der Auswahl des
   Bewegungsskripts — sie sind von Anfang an da. Eine Regel für sie wäre hier
   wirkungslos; wer sie einblenden lassen will, trägt sie erst in `AUSWAHL`
   in `bausteine/_bewegung.html` ein. */

/* ── Phase 2: die drei Spalten ──
   ‼️ Diese Regeln müssen die allgemeinen `.auf.v1/.v2` überschreiben, die das
      Bewegungsskript für Nachbarn vergibt. Sie sind spezifischer — aber nur,
      solange `.start` mit im Selektor steht. */
.js .buehne-fakten .fakt.auf.start:nth-child(1) { transition-delay: .85s; }
.js .buehne-fakten .fakt.auf.start:nth-child(2) { transition-delay: .97s; }
.js .buehne-fakten .fakt.auf.start:nth-child(3) { transition-delay: 1.09s; }

/* ── Phase 3: Überleitung und die sieben Kacheln ──
   Die Kacheln behalten ihre eigene Staffelung aus `--v`; hier kommt nur der
   Vorlauf der Phase davor. */
.js .aussage > .auf.start { transition-delay: 1.45s; }
.js .tool-kachel.auf.start { transition-delay: calc(1.60s + var(--v, 0s)); }
.js .tool-kachel.auf.start .tool-sym { transition-delay: calc(1.74s + var(--v, 0s)); }

@media (prefers-reduced-motion: reduce) {
  .js .auf.start,
  .js .tool-kachel.auf.start .tool-sym { transition-delay: 0s !important; }
}

/* ── Untertitel unter der Überleitung (Torsten, 10.09.2026) ────────────────
   „Wir haben alles, was Du brauchst. Was wir nicht haben, das brauchst Du
   nicht." — dahinter ein Smiley „in unserem layout", also ein SVG im
   Lucide-Stil, kein Emoji.
   ‼️ Der Selektor muss `.aussage.einzeilig > p` schlagen — das ist (0,2,1).
      Der erste Versuch `.aussage .aussage-unter` war nur (0,2,0) und verlor:
      Der Untertitel stand danach in 38 px, genauso gross wie die Zeile
      darueber. Am Live-Stand gemessen — mit blossem Auge sah es nur
      „irgendwie zu gross" aus. Jetzt (0,3,1). */
.aussage.einzeilig > p.aussage-unter,
.aussage > p.aussage-unter {
  font-size: 19px; font-weight: 400; line-height: 1.5; letter-spacing: 0;
  color: rgba(0,32,96,0.72); margin: 16px 0 0; max-width: none;
}
/* ‼️ Ein `<img>`, keine Zeichnung: Der Smiley ist Torstens eigenes Bild und
   farbig — er braucht deshalb WEDER `currentColor` NOCH eine eigene Fassung
   fuer dunkle Abschnitte. Etwas groesser als die Schrift, sonst zerfaellt das
   Motiv (Daumen und Gesicht) zu einem Fleck. */
.aussage > p.aussage-unter .unter-sym {
  /* Torsten, 10.09.2026: „Der Smiley ist zu klein, mach ihn größer." */
  width: 70px; height: 70px; vertical-align: -25px; margin-left: 11px;
}
/* ‼️ [12.09.2026] `lang` fuer den ausfuehrlichen Text auf der Startseite
      (Torstens neue Fassung, drei Saetze statt einer Zeile). Ohne Hoechstbreite
      liefe er ueber die vollen 1600 px — unlesbar lange Zeilen. */
/* ‼️ [12.09.2026] Torsten: „den untertiteltext in 2 spalten". Zwei Spalten ueber
      die volle Inhaltsbreite — genau ueber den zwei Karten darunter, deshalb
      derselbe Spaltenabstand (20 px) wie im Vergleich.
      Unter 760 px Platz eine Spalte, wie beim Vergleich auch. */
.aussage > p.aussage-unter.lang {
  max-width: none;
  columns: 2; column-gap: 20px;
}
@media (max-width: 760px) {
  .aussage > p.aussage-unter.lang { columns: 1; }
}

/* ══════════════════════ VERGLEICH-2026-09-12 ═══════════════════════════════
   Torsten hat sich am 12.09.2026 fuer die Gegenueberstellung entschieden
   („mach mal C"): links, was das Einzelnkaufen bedeutet, rechts, was es hier
   heisst. Zahlen stehen bewusst NICHT drin — Torsten: „schreibe nicht 30
   sondern viele".

   ‼️ Die linke Karte ist bewusst zurueckgenommen (heller Grund, gedaempfte
      Schrift), die rechte traegt die Markenfarbe. Beide bleiben ueber 4,5:1 —
      nach dem Einbau gemessen. */
/* ‼️ [12.09.2026] KEINE eigene Hoechstbreite — Torsten: „die beiden kacheln
      breiter, damit sie den contentbereich füllen". Es gilt die Breite des
      Abschnitts, wie bei den Zahlungswegen auf der LMS-Seite auch. */
.vergleich {
  margin: 34px 0 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
}
/* ‼️ [12.09.2026] Torsten hat zwei Bilder dazu gebaut: links die losen Fenster,
      rechts dieselben Fenster an einem Bildschirm. Sie stehen AUSSEN, die
      Listen bleiben innen an der Luecke — sonst waere die Gegenueberstellung
      wieder auseinandergerissen.
   ‼️ Das rechte Bild kam als RGB-PNG mit eingebranntem Karomuster (wie damals
      der Smiley). Freigestellt mit `scratchpad/karo-freistellen.py`:
      Flutfuellung vom Rand ueber alle neutralgrauen Pixel. Wer das Bild neu
      bekommt, muss das wieder tun — oder Torsten bittet um eine Fassung mit
      echter Transparenz.
   ‼️ KEINE KI-Kennzeichnung: keine erzeugten Personen, nur Sinnbilder
      (Augenschein am Bild). */
.vergleich-karte {
  border: 1px solid var(--card-border); border-radius: 16px; padding: 24px 26px;
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 24px; align-items: center;
}
.vergleich-karte.mit { grid-template-columns: minmax(0, 1fr) auto; }
/* Breite so gewaehlt, dass das Bild die Kartenhoehe fast ganz ausfuellt:
   240 px ergeben bei 507×900 rund 426 px Hoehe; die Karte ist mit elf Zeilen
   etwa 430 px hoch. Torsten hatte 190 px noch als „zu klein" reklamiert. */
/* ‼️ [12.09.2026] Torsten zweimal „zu klein“ — erst bei 190, dann bei 240 px.
   Zwei Schritte statt nur groesser stellen:
   1. Beide Bilder auf das Motiv BESCHNITTEN. Vorher lag viel Leerraum in der
      Datei, vor allem rechts (Motiv 496×617 in einem Rahmen von 507×900 —
      oben 172 px, unten 111 px leer). Der Leerraum frass jede Vergroesserung.
   2. Danach auf 320 px Breite. Die Karten werden dadurch hoeher — gewollt. */
/* ‼️ [12.09.2026] Torsten gibt die Hoehe vor: „die grafiken sollten 400 px
      höhe haben“. Also HOEHE fest, Breite rechnet sich. Beide Bilder sind
      auf ihr Motiv beschnitten, deshalb sind sie bei gleicher Hoehe
      unterschiedlich breit (links 474×846, rechts 496×617). */
/* ‼️ [12.09.2026] Torsten: „Die linke Grafik ist kleiner als die rechte …
      damit sie beide die gleichen Ausmasse haben.“
      Ursache: Die Motive sind verschieden geformt — links hochkant und locker
      verteilt (474×846), rechts kompakt (496×617). Bei gleicher HOEHE ist das
      linke deshalb schmaler und wirkt kleiner.
      Loesung: BEIDE bekommen denselben Kasten (330×460) und werden darin
      eingepasst. Damit ist die belegte Flaeche gleich gross. Ein Zuschnitt
      auf dasselbe Seitenverhaeltnis ginge nicht ohne Bildteile abzuschneiden —
      die Fenster reichen links bis an alle Raender. */
/* ‼️ [12.09.2026] Torsten: „die linke grafik wirkt kleiner als die rechte,
      oder?“ — er hatte recht, und der gleiche Kasten hat es NICHT geloest.

   GEMESSEN, statt nach Gefuehl gestellt: Entscheidend ist nicht der Kasten,
   sondern wie viel Flaeche das Motiv darin tatsaechlich belegt.
     links:  Motiv belegt 42 % der Bildflaeche, angezeigt 258×460 → 50.177 px
     rechts: Motiv belegt 54 % der Bildflaeche, angezeigt 330×410 → 73.638 px
   Das rechte Motiv brachte also knapp die Haelfte mehr auf den Schirm — daher
   der Eindruck. Ausgleichsfaktor: Wurzel aus 73.638/50.177 = 1,21.

   Deshalb bekommt jedes Bild jetzt SEINE eigene Groesse, beide im
   Seitenverhaeltnis der Datei, und belegen damit rund gleich viel Flaeche. */
.vergleich-bild { display: block; object-fit: contain; }
.vergleich-karte.ohne .vergleich-bild { width: 312px; height: 557px; }
.vergleich-karte.mit  .vergleich-bild { width: 330px; height: 410px; }
/* ‼️ [12.09.2026] Zoom von klein nach gross, sobald der Vergleich ins Bild
      kommt (Torstens Ansage). Die Regel ist mit drei Klassen spezifischer als
      die allgemeine Einblendung `.js .auf` und ueberschreibt deren Verschiebung.
      NUR `transform`, keine Durchsichtigkeit — siehe Begruendung in der
      Bewegungssteuerung. Die Vorgabe „Bewegung reduzieren" hebelt das weiter
      oben in dieser Datei ohnehin aus. */
.js .vergleich-bild.auf {
  opacity: 1; transform: scale(0.4);
  /* ‼️ Torsten: „der Zoom-Effekt ist viel zu schnell, mindestens dreimal
     langsamer“ — aus 0,85 s werden 2,6 s. */
  /* ‼️ Der Verlauf ist bewusst GLEICHMAESSIG (`ease-in-out`). Mit der vorigen
     Kurve (`cubic-bezier(.2,.75,.25,1)`) war der Zoom nach gemessenen 1,6 s
     faktisch fertig, obwohl 2,6 s eingestellt waren — sie zieht den Weg an
     den Anfang. Dadurch wirkte es weiter zu schnell. */
  transition: transform 2.6s ease-in-out;
}
.js .vergleich-bild.auf.da { transform: none; }
@media (max-width: 1180px) {
  .vergleich-karte.ohne .vergleich-bild { width: 224px; height: 400px; }
  .vergleich-karte.mit  .vergleich-bild { width: 237px; height: 295px; }
}
@media (max-width: 1040px) {
  .vergleich-karte.ohne .vergleich-bild { width: 157px; height: 280px; }
  .vergleich-karte.mit  .vergleich-bild { width: 166px; height: 206px; }
}
@media (max-width: 860px) {
  .vergleich-bild { display: none; }
  .vergleich-karte, .vergleich-karte.mit { grid-template-columns: 1fr; }
}
.vergleich-karte h3 {
  font-size: 17px; font-weight: 600; margin: 0 0 14px; letter-spacing: -0.2px;
}
.vergleich-karte ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.vergleich-karte li {
  position: relative; padding-left: 17px; font-size: 15.5px; line-height: 1.45;
  font-weight: 600;
}
.vergleich-karte li::before {
  content: ""; position: absolute; left: 0; top: 0.52em;
  width: 7px; height: 7px; border-radius: 50%;
}
/* ‼️ [12.09.2026] Torsten: „wie wäre es wenn der inhalt der linken kachel
      rechtsbündig wäre und die aufzählungspunkte auf der rechten seite. dann
      hängen ohne uns und mit direkt als gegenüber aneinander."
      Die linke Karte spiegelt deshalb ihre Ausrichtung: Text rechtsbuendig,
      der Punkt sitzt rechts vom Text. Dadurch stossen beide Listen an der Lücke
      in der Mitte zusammen. */
.vergleich-karte.ohne { background: rgba(0,32,96,0.04); text-align: right; }
.vergleich-karte.ohne li { padding-left: 0; padding-right: 17px; }
.vergleich-karte.ohne li::before { left: auto; right: 0; }
.vergleich-karte.ohne h3 { color: rgba(0,32,96,0.7); }
/* ‼️ GEMESSEN: 0,62 ergab nur 4,33:1 — unter der Schwelle. 0,68 ergibt 5,17:1
      und bleibt trotzdem deutlich zurueckgenommen gegenueber der rechten Karte. */
.vergleich-karte.ohne li { color: rgba(0,32,96,0.68); font-weight: 400; }
.vergleich-karte.ohne li::before { background: rgba(0,32,96,0.3); }
.vergleich-karte.mit { background: var(--card-bg); }
.vergleich-karte.mit h3 { color: var(--nm-blue); }
.vergleich-karte.mit li { color: var(--nm-blue); }
.vergleich-karte.mit li::before { background: var(--nm-red); }
.dunkel .vergleich-karte.ohne { background: rgba(255,255,255,0.06); }
.dunkel .vergleich-karte.ohne h3 { color: rgba(255,255,255,0.72); }
.dunkel .vergleich-karte.ohne li { color: rgba(255,255,255,0.66); }
.dunkel .vergleich-karte.ohne li::before { background: rgba(255,255,255,0.34); }
.dunkel .vergleich-karte.mit { background: rgba(255,255,255,0.10); }
.dunkel .vergleich-karte.mit h3,
.dunkel .vergleich-karte.mit li { color: rgba(255,255,255,0.92); }
@media (max-width: 760px) {
  .vergleich { grid-template-columns: 1fr; gap: 14px; }
}
/* ‼️ Der Smiley bleibt, wird in der langen Fassung aber kleiner: mit 70 px riss
      er die letzte Zeile des Absatzes auseinander (Foto 12.09.). In der kurzen
      Fassung stand er allein in einer Zeile, dort waren 70 px richtig. */
/* GEMESSEN am gebauten Stand: Der Absatz hat vier Zeilen à 28,5 px = 114 px.
   Bei 46 px Smiley wurde er 131,5 px hoch — die letzte Zeile bekam 17 px
   Luft zu viel. Bei 30 px sind es 115,5 px, also praktisch kein Aufschlag. */
.aussage > p.aussage-unter.lang .unter-sym {
  width: 30px; height: 30px; vertical-align: -9px; margin-left: 8px;
}
.dunkel .aussage > p.aussage-unter { color: rgba(255,255,255,0.78); }

@media (max-width: 767px) {
  .aussage.einzeilig > p.aussage-unter,
  .aussage > p.aussage-unter { font-size: 16.5px; margin-top: 12px; }
  .aussage > p.aussage-unter .unter-sym { width: 52px; height: 52px; vertical-align: -18px; margin-left: 8px; }
}

/* ── Zwei dunkle Abschnitte hintereinander brauchen einen Bruch ────────────
   Torsten am 10.09.2026 zur Mediathek-Seite: „klebt direkt am vorherigen
   abschnitt."

   Ursache: Seit dem Hell-Dunkel-Tausch ist der Wiedererkennungskopf der
   Mediathek dunkel — und der Abschnitt „Das steckt in einem einzigen Thema"
   war es schon vorher. Beide gingen ohne Grenze ineinander über. Im Baustein
   steht dazu sogar noch der Vermerk „Dunkler Abschnitt als Bruch nach dem
   hellen Kopf" — der Bruch war weg.

   ‼️ Bewusst als Geschwister-Regel und nicht auf der Mediathek-Seite von Hand:
      So greift sie überall, wo künftig zwei dunkle Abschnitte
      aufeinanderfolgen. Über alle zehn Seiten geprüft — heute ist die
      Mediathek der einzige Fall.
   ‼️ Den Umfang-Block stattdessen hell zu machen ginge NICHT ohne Umbau: Seine
      Kacheln sind vollständig auf weisse Schrift und durchscheinende Flächen
      gebaut. */
/* ‼️ [12.09.2026, spaeter am Tag] Der 36-px-Streifen ist WIEDER RAUS. Torsten
   sah ihn auf der Mediathek-Seite: „hier stimmt auch etwas nicht mit den
   abschnittsfarben" — der helle Spalt zwischen zwei blauen Flaechen liest sich
   wie ein Fehler, nicht wie ein Bruch. Seit demselben Tag gilt ausserdem: die
   Farbe folgt dem INHALT. Zwei blaue Abschnitte hintereinander gehoeren
   zusammen und sollen auch als eine Flaeche wirken (Konzeptseite:
   Intelligenz + Zusammenfluss). Wer hier wieder trennen will, macht den
   zweiten Abschnitt hell — dafuer muessen seine Kacheln umgebaut werden. */

/* ═══════════════ SEITE BUSINESS ATELIER ═══════════════
   Aufgebaut aus den Bausteinen der Mediathek-Seite (Torsten, 10.09.2026:
   „baue im Stil von der Mediathekseite die Seite für das BA"). Neu sind hier
   nur die Kette, die Fragenkacheln und die Belegflächen. */

/* ── Die Kette der vier Stufen ─────────────────────────────────────────────
   Die Aussage des Werkzeugs ist, dass die Reihenfolge zählt. Deshalb keine
   gleichwertigen Kacheln, sondern Glieder mit sichtbarer Verbindung: eine
   Linie läuft durch alle vier, die Nummer sitzt darauf.
   ‼️ Die Linie ist ein `::before` am Listenelement, KEINE durchgehende Linie
      am Behälter — beim Umbruch auf schmalen Schirmen liefe die sonst ins
      Leere. Beim letzten Glied wird sie ausgeblendet. */
.kette {
  max-width: 1600px; margin: 0 auto; padding: 0 40px;
  list-style: none;
  /* ‼️ KEINE feste Spaltenzahl: Die Kette hat vier Glieder (Business Atelier,
     Education Factory, Learning Management) oder drei (Transfer Studio,
     Málaga). Mit `grid-auto-flow: column` verteilt sie sich von selbst auf
     die vorhandene Anzahl — bei festen vier Spalten blieb bei drei Gliedern
     rechts eine leere Spalte stehen, und die Kette wirkte abgeschnitten. */
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: 26px; counter-reset: kette;
}
.kette > li { position: relative; padding-top: 62px; }
/* Die Verbindungslinie zum nächsten Glied */
/* ‼️ Die Linienfarbe richtet sich nach dem Grund. Erst nur weiss gesetzt —
   auf der hellen Seite der Education Factory war die Kette dadurch keine
   Kette mehr, sondern vier lose Nummern. Im Bild gefunden, nicht im Code. */
.kette > li::before {
  content: ''; position: absolute; left: 46px; right: -26px; top: 22px; height: 2px;
  background: rgba(0,32,96,0.22);
}
.dunkel .kette > li::before { background: rgba(255,255,255,0.22); }
.kette > li:last-child::before { display: none; }
.kette-nr {
  position: absolute; top: 0; left: 0;
  width: 46px; height: 46px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 600; letter-spacing: -0.5px;
  background: var(--btn-hell); color: var(--nm-blue);
}
.kette h3 { font-size: 19px; font-weight: 600; margin: 0 0 9px; letter-spacing: -0.3px; }

/* ── [KETTE-MITTE-2026-09-12] Zentrierte Fassung ────────────────────────────
   Torsten zur Kette auf der LMS-Seite: „hier wäre es schöner, wenn die
   nummerierung und die texte drunter zentriert erscheinen würde. passt besser
   zum video." Im Film stehen vier Bildschirme nebeneinander — die Kette
   darunter nimmt diese Anordnung jetzt auf.

   ‼️ NUR mit der Zusatzklasse. Die Kette steckt auch auf der Eventseite und
      im Transfer Studio; dort bleibt sie linksbuendig.
   ‼️ Die Verbindungslinie laeuft jetzt von Kreisrand zu Kreisrand, nicht mehr
      vom linken Rand. Die Rechnung: Der Kreis ist 46 px breit, seine Mitte
      liegt bei 50 %. Links beginnt die Linie also bei 50 % + 23 + 7 px
      Abstand; rechts endet sie 7 px vor dem naechsten Kreis, der eine halbe
      Elementbreite plus Luecke weiter sitzt. */
.kette-mitte > li { text-align: center; }
.kette-mitte .kette-nr { left: 50%; margin-left: -23px; }
.kette-mitte > li::before { left: calc(50% + 30px); right: calc(4px - 50%); }

@media (max-width: 767px) {
  /* Untereinander steht die Nummer wieder links neben dem Text — zentriert
     saehe eine einspaltige Liste unruhig aus. */
  .kette-mitte > li { text-align: left; }
  .kette-mitte .kette-nr { left: 0; margin-left: 0; }
}
.kette p { font-size: 15px; line-height: 1.6; margin: 0; }
.dunkel .kette h3 { color: #fff; }
.dunkel .kette p { color: rgba(255,255,255,0.8); }

/* ‼️ Der Auftritt ist gestaffelt: Die Glieder kommen von links nacheinander,
   so wie die Kette gelesen wird. `--k` steht am Element im Baustein, damit
   Reihenfolge und Versatz aus EINER Quelle kommen. */
.js .kette > li.auf {
  opacity: 0; transform: translateX(-26px);
  transition: opacity .5s cubic-bezier(.22,.61,.36,1),
              transform .6s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--k, 0) * .13s);
}
.js .kette > li.auf.da { opacity: 1; transform: none; }
/* Die Linie wächst erst, wenn ihr Glied steht. */
.js .kette > li.auf::before { transform: scaleX(0); transform-origin: left center; }
.js .kette > li.auf.da::before {
  transform: scaleX(1);
  transition: transform .55s cubic-bezier(.22,.61,.36,1) calc(var(--k, 0) * .13s + .3s);
}

/* ── Die sechs Fragen ───────────────────────────────────────────────────── */
.ba-fragen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ba-marke {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: none;
  color: rgba(0,32,96,0.5); margin: 0 0 10px;
}
.tile-synthese .ba-marke { color: var(--nm-red); }
/* ‼️ Die zwei Synthesen heben sich ab — sie sind das Ergebnis, nicht die
   Zutat. Farbig markiert wird nur die Marke, nicht die ganze Kachel: sonst
   zerfällt das Raster in zwei Blöcke. */
.tile-synthese { border-color: rgba(150,0,0,0.28); }
.dunkel .ba-marke { color: rgba(255,255,255,0.6); }

/* ── Die vier Gruppen ───────────────────────────────────────────────────── */
.ba-gruppen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ba-gruppen .tile-list { max-width: 100%; }
.ba-gruppen .tile-list li { font-size: 14.5px; line-height: 1.55; }
.ba-gruppen .tile-list b { font-weight: 600; }
.dunkel .ba-gruppen .tile-list li { color: rgba(255,255,255,0.8); }
.dunkel .ba-gruppen .tile-list li::before { background: rgba(255,255,255,0.45); }
.dunkel .ba-gruppen .tile-list b { color: #fff; }

/* ── Belegflächen für Bildschirmfotos und Grafiken ─────────────────────── */
.ba-beleg { max-width: 1600px; margin: 44px auto 0; padding: 0 40px; }

@media (max-width: 1100px) {
  .ba-fragen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kette { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 26px; }
  /* Bei zwei Spalten endet die Linie am zweiten Glied jeder Reihe. */
  .kette > li:nth-child(2n)::before { display: none; }
}
@media (max-width: 767px) {
  .kette, .ba-beleg { padding: 0 20px; }
  .kette { grid-auto-flow: row; grid-template-columns: 1fr; gap: 26px; }
  .kette > li::before { display: none; }
  .kette > li { padding-top: 0; padding-left: 62px; }
  .ba-fragen, .ba-gruppen { grid-template-columns: 1fr; }
  .ba-beleg { margin-top: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .kette > li.auf, .js .kette > li.auf::before {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* ‼️ [10.09.2026] KACHELN IM DUNKLEN ABSCHNITT — vorher gab es diese Regel
   NICHT. Auf der neuen Seite Business Atelier stand dadurch weisse Schrift auf
   hellblauen Kacheln: `.tile` bringt `background: var(--card-bg)` mit, und die
   `.dunkel`-Regeln faerben Ueberschrift und Text weiss. Gemessen im Bild,
   nicht im Code — im Quelltext sah beides richtig aus.
   Vorbild sind die Zahlenkacheln der Mediathek (`.umfang-band .fakt`): eine
   durchscheinende Flaeche auf dem Dunkelblau statt einer eigenen Farbe. */
.dunkel .tile {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.16);
}
.dunkel .tile:hover { background: rgba(255,255,255,0.11); }
.dunkel .tile-title { color: #fff; }
.dunkel .tile-desc { color: rgba(255,255,255,0.78); }
.dunkel .tile-list li { color: rgba(255,255,255,0.78); }
.dunkel .tile-list li::before { background: rgba(255,255,255,0.45); }

/* ‼️ Die Kacheln der Werkzeugseiten tragen kurze Texte. Die Mindesthoehe von
   280 px aus `.tile` liess sie halb leer stehen — hier richtet sich die Hoehe
   nach dem Inhalt. */
.ba-fragen .tile, .ba-gruppen .tile { min-height: 0; }

/* ═══════════════ SEITE EDUCATION FACTORY ═══════════════
   Die Schrittfolgen sind die eigentliche Nachricht: Die ersten drei Schritte
   sind bei allen vier Formaten dieselben. Deshalb sind genau die markiert —
   ohne Farbe wäre die Gemeinsamkeit nur ein Text, den man glauben muss. */
.ef-formate { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ef-schritte {
  list-style: none; counter-reset: efs; margin: 0 0 16px; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.ef-schritte li {
  counter-increment: efs; position: relative; padding-left: 30px;
  font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,0.8);
}
.ef-schritte li::before {
  content: counter(efs);
  position: absolute; left: 0; top: 1px;
  width: 21px; height: 21px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 600;
  background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.75);
}
/* Die drei gemeinsamen Schritte — hervorgehoben in der Markenfarbe für „hier
   greift es ein" (Magenta), passend zu den Streifen auf der Startseite. */
.ef-schritte li.gleich { color: #fff; font-weight: 500; }
.ef-schritte li.gleich::before { background: var(--nm-magenta); color: #fff; }
.ef-legende {
  max-width: 1600px; margin: 26px auto 0; padding: 0 40px;
  font-size: 14px; color: rgba(255,255,255,0.7);
  display: flex; align-items: center; gap: 9px;
}
.ef-punkt {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--nm-magenta); flex: 0 0 auto;
}
/* In der schmalen Textspalte des Ablaufs stehen die Schritte untereinander. */
.schritte-schmal { margin-top: 22px; }

/* ── [SCHRITTE-BUCHSTABEN-2026-09-12] A, B, C statt 1, 2, 3 ─────────────────
   Torsten: „statt 1,2 und 3 lieber A, B und C. die drei sollten animiert werden
   und nacheinander eischeinen."

   ‼️ NUR mit der Zusatzklasse. Die Schrittliste steckt auch in der Mediathek
      und weiter oben auf dieser Seite — dort bleiben es Zahlen.
   ‼️ Der Auftritt haengt am Startsignal `.da`, das der Beobachter am
      Abschnittskopf setzt. Ohne Skript (oder bei „Bewegung reduzieren") steht
      alles sofort da — die Regeln greifen nur unter `.js`. */
.schritte-buchstaben li::before { content: counter(schritt, upper-alpha); }

.js .section-head.auf:not(.da) .schritte-buchstaben > li { opacity: 0; }
@keyframes schritt-auf {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.js .section-head.da .schritte-buchstaben > li {
  animation: schritt-auf .46s cubic-bezier(.22,.61,.36,1) both;
}
.js .section-head.da .schritte-buchstaben > li:nth-child(1) { animation-delay: .10s; }
.js .section-head.da .schritte-buchstaben > li:nth-child(2) { animation-delay: .34s; }
.js .section-head.da .schritte-buchstaben > li:nth-child(3) { animation-delay: .58s; }

/* ── [12.09.2026] Die beiden neuen Abschnitte der LMS-Seite ─────────────────
   ‼️ `min-height: 0`: Die Kacheln haben sonst eine Mindesthoehe aus dem
      Grundstil — bei kurzen Texten stand darunter viel Leere (im Bild gesehen).
   ‼️ Die Bezahlwege sind ZWEI Kacheln. Im dreispaltigen Raster bliebe rechts
      eine leere Spalte stehen. */
.grid.ohne-grenzen .tile, .grid.bezahl-wege .tile { min-height: 0; }
/* ‼️ [12.09.2026] KEINE eigene Hoechstbreite mehr. Mit 1060 px fuellten die
   beiden Kacheln nur zwei Drittel des Inhaltsbereichs, rechts blieb Leere
   (Torsten: „mach die kacheln breiter, damit sie den contentbereich füllen").
   Jetzt gilt die Breite des Rasters wie ueberall sonst. */
.grid.bezahl-wege { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
/* ── [12.09.2026] Die drei Zahlungssysteme IN der Kachel „Gegen Bezahlung" ──
   Torsten: sie gehoeren dorthin, nicht allgemein darunter — sonst sieht es aus,
   als gaelten sie auch fuer die kostenlosen Kurse.
   `align-items: start` am Raster: Die rechte Kachel ist dadurch hoeher als die
   linke, ohne dass die linke leeren Raum mitzieht. */
.bezahl-kopf {
  margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--card-border);
  font-size: 13.5px; font-weight: 600; letter-spacing: 0.2px; color: rgba(0,32,96,0.62);
}
.bezahl-liste { margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.bezahl-liste > div { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 12px; }
.bezahl-liste dt { font-size: 14.5px; font-weight: 600; color: var(--nm-blue); }
.bezahl-liste dd { margin: 0; font-size: 14.5px; line-height: 1.45; color: rgba(0,32,96,0.76); }
.dunkel .bezahl-kopf { color: rgba(255,255,255,0.7); border-top-color: rgba(255,255,255,0.2); }
.dunkel .bezahl-liste dt { color: #fff; }
.dunkel .bezahl-liste dd { color: rgba(255,255,255,0.8); }
@media (max-width: 620px) { .bezahl-liste > div { grid-template-columns: 1fr; gap: 2px; } }
@media (max-width: 860px) { .grid.bezahl-wege { grid-template-columns: 1fr; } }

/* ── [FELDER-AUFPOPPEN-2026-09-12] Die Kachelfelder erscheinen nacheinander ──
   Torsten: „die felder sollten aufpoppen beim hinscrollen".
   Sie blendeten vorher als Gruppe ein; jetzt kommt jedes Feld einzeln, leicht
   aus der Tiefe. Der Zaehler `--i` kommt aus `_bewegung.html`. */
/* ‼️ [12.09.2026, zweite Fassung] Torsten: „mit aufpoppen meinte ich nicht das
   alle gleichzeitig eingeblendet werden, sondern nacheinander kurz nach vorne
   kommen und wieder zurückgehen."
   Also kein blosses Einblenden mehr: Jedes Feld kommt kurz NACH VORNE (ueber
   seine Endgroesse hinaus) und legt sich dann zurueck. Der Ueberschwung bei
   55 % ist der eigentliche Effekt — ohne ihn waere es wieder nur ein Auftauchen. */
@keyframes feld-auf {
  0%   { opacity: 0; transform: scale(0.94); }
  55%  { opacity: 1; transform: scale(1.055); }
  100% { opacity: 1; transform: scale(1); }
}
.js .grid.felder-auf.auf:not(.da) > * { opacity: 0; }
.js .grid.felder-auf.da > * {
  animation: feld-auf .52s cubic-bezier(.34,.9,.4,1) both;
  animation-delay: calc(var(--i, 0) * 110ms);
}
@media (prefers-reduced-motion: reduce) {
  .schritte-buchstaben > li, .grid.felder-auf > * {
    animation: none !important; opacity: 1 !important;
  }
}
/* ── [FRAGETYPEN-2026-09-12] Drei nebeneinander, ueber die volle Breite ─────
   Dritte Fassung. Torsten: „fragetypen vielleicht in 3 blöcken nebeneinander
   über den contentbereich".
   Verworfen: zweispaltige Hakenliste (die Zeilen sprangen gegeneinander) und
   eine einspaltige Liste mit Trennlinien (in der halben Textspalte zu schmal).
   Jetzt volle Inhaltsbreite, drei Spalten, zwei Reihen — jeder Typ in einem
   eigenen Feld, alle gleich hoch. */
.fragetypen-block { max-width: 1600px; margin: 44px auto 0; padding: 0 40px; }
.fragetypen-kopf {
  margin: 0 0 16px; font-size: 14px; font-weight: 600; letter-spacing: 0.2px;
  color: rgba(0,32,96,0.62);
}
.fragetypen-raster {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
}
.fragetypen-raster article {
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: 14px; padding: 18px 20px;
}
.fragetypen-raster h3 {
  margin: 0 0 6px; font-size: 16.5px; font-weight: 600; color: var(--nm-blue);
}
.fragetypen-raster p {
  margin: 0; font-size: 15px; line-height: 1.5; color: rgba(0,32,96,0.78);
}
.dunkel .fragetypen-kopf { color: rgba(255,255,255,0.7); }
.dunkel .fragetypen-raster article {
  background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.16);
}
.dunkel .fragetypen-raster h3 { color: #fff; }
.dunkel .fragetypen-raster p { color: rgba(255,255,255,0.82); }
@media (max-width: 980px) { .fragetypen-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px)  {
  .fragetypen-block { padding: 0 20px; }
  .fragetypen-raster { grid-template-columns: 1fr; }
}

@media (max-width: 1200px) {
  .ef-formate { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .ef-formate { grid-template-columns: 1fr; }
  .ef-legende { padding: 0 20px; }
}

/* ═══════════════ SEITE TRANSFER STUDIO ═══════════════
   Zwei Module nebeneinander. Die Formatlisten stehen als Paar aus Name und
   kurzer Erklärung — so, wie sie im Werkzeug auch angezeigt werden. */
.ts-module { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ts-module .tile { min-height: 0; }
/* Torsten 11.09.2026: kein Wasserzeichen in diesen Kaesten — die allgemeine
   Grenze `.tile-desc { max-width: 80% }` brach den Text nur zu frueh um. */
.ts-module .tile-desc { max-width: none; }
.ts-formate { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ts-formate li {
  display: flex; align-items: baseline; gap: 12px;
  padding: 11px 14px; border-radius: 10px;
  background: rgba(255,255,255,0.06);
}
.ts-formate b { font-size: 14.5px; font-weight: 600; color: #fff; flex: 0 0 108px; }
.ts-formate span { font-size: 13.5px; line-height: 1.45; color: rgba(255,255,255,0.72); }
/* Torsten 11.09.2026: die sechs Trainingsformate je Modul — Namen sind lang
   („Mini-Story mit Identifikationsmoment"), deshalb breitere Namensspalte. */
.ts-formate.namen b { flex-basis: 240px; line-height: 1.35; }
/* Torsten 11.09.2026: alle Zeilen gleich hoch — ordentlich und symmetrisch.
   Mindesthoehe = zwei Zeilen, Inhalt mittig; innerhalb einer Liste zieht
   `1fr` alle Zeilen auf die hoechste, falls es schmal wird. */
.ts-formate.namen { display: grid; grid-auto-rows: minmax(64px, 1fr); }
.ts-formate.namen li { align-items: center; }
/* Medienformate als Kacheln unter den sechs Formaten (Torsten 11.09.2026).
   Immer vier Spalten — bei Modul B bleibt die vierte leer, so sind die
   Kacheln in beiden Kaesten gleich gross. */
.ts-medien { margin: 22px 0 0; }
.ts-medien-titel { margin: 0 0 10px; font-size: 13px; font-weight: 600; letter-spacing: .3px; color: rgba(255,255,255,0.72); }
.ts-medien-reihe { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ts-medien-reihe li {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 6px 12px; border-radius: 12px; text-align: center;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18);
}
.ts-medien-reihe svg { width: 26px; height: 26px; fill: none; stroke: #9FBAE3; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ts-medien-reihe span { font-size: 13.5px; font-weight: 600; color: #fff; line-height: 1.2; }
.section:not(.dunkel) .ts-medien-titel { color: rgba(0,32,96,0.72); }
.section:not(.dunkel) .ts-medien-reihe li { background: rgba(0,32,96,0.05); border-color: var(--card-border); }
.section:not(.dunkel) .ts-medien-reihe svg { stroke: var(--nm-blue); }
.section:not(.dunkel) .ts-medien-reihe span { color: var(--nm-blue); }
@media (max-width: 520px) {
  .ts-medien-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Torsten 11.09.2026: beide Kaesten SYMMETRISCH — gemeinsames Zeilenraster
   (subgrid). Kennung, Titel, Text, sechs Formatzeilen und Medienreihe liegen
   in beiden Kaesten auf denselben Zeilen; jede Formatzeile ist so hoch wie
   die hoechste ihrer Reihe in BEIDEN Kaesten. Nur nebeneinander (ab 900 px)
   und nur, wo der Browser subgrid kann — sonst gilt die Fassung darueber
   (gleich hoch innerhalb eines Kastens). Gemessen: ohne das liefen die
   Kaesten zwischen 900 und 1279 px auseinander (z. B. 1200: 81 zu 64 px). */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 900px) {
    /* Zeilen 4–9 = die sechs Formatzeilen: 1fr bei offener Hoehe = alle so
       hoch wie die hoechste (in beiden Kaesten) — ALLE Felder gleich hoch. */
    .ts-module { grid-template-rows: auto auto auto repeat(6, minmax(64px, 1fr)) auto; row-gap: 0; }
    /* ‼️ EIN Abstand (10 px) fuer Kasten UND Liste und KEIN Rand an der Liste:
       sonst rechnet das Raster den Unterschied bzw. den Rand in die erste
       Zeile ein, und 1fr zieht ALLE Zeilen darauf hoch (gemessen: 64/84/82).
       Die Luft ueber der Liste kommt deshalb als Rand unter den Text. */
    .ts-module .tile { display: grid; grid-row: span 10; grid-template-rows: subgrid; row-gap: 10px; }
    .ts-module .ba-marke, .ts-module .tile-title { margin-bottom: 4px; }
    .ts-module .tile-desc { margin-bottom: 22px; }
    .ts-module .ts-formate.namen { grid-row: span 6; grid-template-rows: subgrid; row-gap: 10px; margin-top: 0; }
    .ts-module .ts-formate.namen li { min-height: 64px; }
  }
}

/* ═══ BEISPIEL-AUFGABENSTELLUNG (Transfer-Studio-Seite, 11.09.2026) ═══
   Torsten: „lade alles zu einer Fragestellung herunter und überlege, wie wir das
   einbauen, damit es eine großartige Wirkung erzielt." Vier Abschnitte:
   Einstieg (dunkel), Karussell Modul A (hell, vorhandenes `.kar`), Zeitleiste
   Modul B (dunkel), Aufbau (hell, vorhandener `.baum`). Neu sind nur die
   Rahmen hier — Karussell, Baum, Video und Hoerprobe sind die Bauteile der
   Mediathek-Seite. */
.ts-bsp-buehne {
  max-width: 1600px; margin: 0 auto; padding: 0 40px;
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 44px; align-items: start;
}
.ts-bsp-video .bild, .ts-zeit-medien .bild { border-radius: 14px; overflow: hidden; }
.ts-bsp-marke { font-size: 13px; font-weight: 700; letter-spacing: 0.2px; color: #9FBAE3; margin: 0 0 14px; }
.ts-bsp-fragetext {
  font-size: 27px; line-height: 1.35; font-weight: 600; letter-spacing: -0.4px;
  color: #fff; margin: 0 0 18px;
}
.ts-bsp-frage > p:last-child { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,0.82); margin: 0; }

/* Zeitleiste Modul B: sechs Impulse untereinander, Linie links, je drei Einheiten */
.ts-zeit {
  max-width: 1600px; margin: 0 auto; padding: 0 40px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start;
}
.ts-zeitleiste { list-style: none; margin: 0; padding: 0; position: relative; display: flex; flex-direction: column; gap: 10px; }
.ts-zeitleiste::before {
  content: ''; position: absolute; left: 18px; top: 22px; bottom: 22px;
  width: 2px; background: rgba(255,255,255,0.22);
}
.ts-zeitleiste li {
  position: relative; display: grid; grid-template-columns: 38px 1fr auto;
  gap: 16px; align-items: center;
  padding: 12px 16px 12px 0;
}
.ts-zl-nr {
  position: relative; z-index: 1; width: 38px; height: 38px; border-radius: 50%;
  background: #9FBAE3; color: var(--nm-blue); font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.ts-zeitleiste b { display: block; font-size: 16px; font-weight: 600; color: #fff; }
.ts-zl-titel { display: block; margin-top: 3px; font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,0.78); }
.ts-zl-einheiten { display: flex; gap: 6px; }
.ts-zl-einheiten em { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.55); }
.ts-zeit-medien { display: flex; flex-direction: column; gap: 18px; }

/* Aufbau: Dateizahl rechts in den Zeilen des Baums, Summe als Abschluss */
.ts-bz-zahl { margin-left: auto; font-size: 14.5px; color: rgba(0,32,96,0.7); white-space: nowrap; }
.ts-bz-zahl b { font-size: 17px; font-weight: 700; color: var(--nm-red); font-variant-numeric: tabular-nums; }
.ts-bz-summe {
  display: flex; align-items: baseline; gap: 14px; margin-top: 6px;
  padding: 16px 20px; border-radius: 11px; background: var(--nm-blue);
}
.ts-bz-summe b { font-size: 40px; font-weight: 600; letter-spacing: -1px; line-height: 1; color: #fff; }
.ts-bz-summe span { font-size: 16px; color: rgba(255,255,255,0.86); }

@media (max-width: 900px) {
  .ts-bsp-buehne, .ts-zeit { grid-template-columns: 1fr; gap: 24px; padding: 0 20px; }
  .ts-bsp-fragetext { font-size: 22px; }
  .ts-zeitleiste li { grid-template-columns: 38px 1fr; }
  .ts-zl-einheiten { grid-column: 2; }
  /* Sechs lange Reiternamen brachen in Handybreite auf 259 px um (gemessen).
     Hier EINE Zeile, seitlich wischbar — nur fuer diese Karussells. */
  .ts-bsp-a .kar-reiter, .ts-bsp-b .kar-reiter { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
  .ts-bsp-a .kar-tab, .ts-bsp-b .kar-tab { flex: 0 0 auto; white-space: nowrap; }
}

/* ── Formate im Karussell-Blatt (Torsten 11.09.2026: „ja zu 2,3 und 4") ──
   Leiste ueber dem Medium schaltet zwischen den Formaten derselben Uebung.
   OHNE Skript stehen alle Flaechen untereinander (erst `js-fw` blendet aus). */
.fw-leiste { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.fw-knopf {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 7px 13px; border-radius: 999px;
  color: var(--nm-blue); background: rgba(255,255,255,0.7); border: 1px solid var(--card-border);
  transition: background .2s, color .2s;
}
.fw-knopf:hover { background: var(--card-hover); }
.fw-knopf.aktiv { background: var(--nm-blue); color: #fff; border-color: var(--nm-blue); }
.fw-knopf:focus-visible { outline: 2px solid var(--nm-blue); outline-offset: 2px; }
.js-fw .fw-flaeche:not(.aktiv) { display: none; }
.fw-flaeche + .fw-flaeche { margin-top: 14px; }
.js-fw .fw-flaeche + .fw-flaeche { margin-top: 0; }
.fw-hinweis { margin: 8px 0 0; font-size: 13px; color: rgba(0,32,96,0.7); }
/* Dokumentseite: 16:9-Ausschnitt von OBEN, die ganze Seite in der Lupe */
.kar-medium .fw-dok img:not(.ki-kennung) { object-position: top; }
.fw-dok { cursor: zoom-in; }
/* Folien zum Durchblaettern */
.js-folien .fw-folie:not(.aktiv) { display: none; }
.fw-folie + .fw-folie { margin-top: 10px; }
.js-folien .fw-folie + .fw-folie { margin-top: 0; }
.fw-folien-leiste { display: none; }
.js-folien .fw-folien-leiste { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; }
.fw-blaettern {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--nm-blue); border: none; color: #fff;
}
.fw-blaettern svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fw-zaehler { font-size: 13.5px; font-weight: 600; color: var(--nm-blue); min-width: 56px; text-align: center; font-variant-numeric: tabular-nums; }

/* ── Karussell auf DUNKLEM Grund (Modul B) ───────────────────────────────
   Das Karussell ist fuer helle Abschnitte gebaut. Auf Dunkelblau wuerden der
   aktive Reiter (Dunkelblau auf Dunkelblau) und die Punkte verschwinden. */
.dunkel .kar-tab.aktiv { background: #9FBAE3; color: var(--nm-blue); border-color: #9FBAE3; }
.dunkel .kar-tab.aktiv .kar-nr { color: rgba(0,32,96,0.72); }
.dunkel .kar-punkt { background: rgba(255,255,255,0.35); }
/* Pfeile auf Dunkelblau: sonst nur duenne weisse Haken (Foto 11.09.2026) */
.dunkel .kar-pfeil { background: #9FBAE3; border-color: #9FBAE3; color: var(--nm-blue); }
.dunkel .kar-pfeil:hover { background: #fff; }
.dunkel .kar-punkt.aktiv { background: var(--nm-red); }
.dunkel .kar-buehne .kar-text h3 { color: var(--nm-blue); }
.dunkel .kar-buehne .kar-text > p { color: rgba(0,32,96,0.82); }
.dunkel .kar-buehne .kar-mass { color: rgba(0,32,96,0.66); }
.dunkel .kar-buehne .haken li { color: rgba(0,32,96,0.82); }
.dunkel .kar-buehne .fw-hinweis { color: rgba(0,32,96,0.7); }

/* ‼️ Auf hellem Grund braucht dieselbe Liste die andere Fassung. Sie steht
   heute nur im dunklen Abschnitt — wer sie verschiebt, braucht das hier. */
.section:not(.dunkel) .ts-formate li { background: rgba(0,32,96,0.05); }
.section:not(.dunkel) .ts-formate b { color: var(--nm-blue); }
.section:not(.dunkel) .ts-formate span { color: rgba(0,32,96,0.72); }

@media (max-width: 900px) {
  .ts-module { grid-template-columns: 1fr; }
  .ts-formate b, .ts-formate.namen b { flex-basis: auto; }
  .ts-formate li { flex-direction: column; gap: 3px; }
  /* untereinander: links buendig, senkrecht mittig (sonst zentriert
     align-items:center in Spaltenrichtung waagrecht) */
  .ts-formate.namen li { align-items: flex-start; justify-content: center; }
}

/* ── Die vier Formate, die noch kommen (Education Factory) ─────────────────
   Sie stehen im Werkzeug in derselben Liste wie die fertigen, nur mit der
   Kennung „Kommt bald". Auf der Seite deshalb bewusst zurückgenommen: gleiche
   Form, weniger Gewicht — sie sollen erkennbar sein, aber nicht mit dem
   konkurrieren, was es schon gibt. */
.ef-bald { max-width: 1600px; margin: 54px auto 0; padding: 0 40px; }
.ef-bald-titel {
  font-size: 17px; font-weight: 600; margin: 0 0 20px; letter-spacing: -0.2px;
  padding-top: 26px; border-top: 1px solid rgba(255,255,255,0.16);
}
.dunkel .ef-bald-titel { color: rgba(255,255,255,0.9); }
.ef-bald .grid { padding: 0; max-width: none; }
/* ‼️ `.tile.upcoming` ist für HELLE Abschnitte gebaut (heller Grund, blaue
   Schrift). Im dunklen Abschnitt braucht es die eigene Fassung, sonst steht
   blaue Schrift auf Dunkelblau — derselbe Fehler wie bei `.dunkel .tile`. */
.dunkel .tile.upcoming {
  background: transparent;
  border-style: dashed;
  border-color: rgba(255,255,255,0.28);
}
.dunkel .tile.upcoming:hover { background: rgba(255,255,255,0.05); }
.dunkel .tile.upcoming .tile-title { color: rgba(255,255,255,0.9); }
.dunkel .tile.upcoming .tile-desc { color: rgba(255,255,255,0.7); }
.marke-bald { color: var(--nm-mint) !important; }

@media (max-width: 767px) {
  .ef-bald { padding: 0 20px; margin-top: 36px; }
}

/* ── Seite Learning Management ─────────────────────────────────────────────
   Sechs Inhaltsarten in drei Spalten, darunter drei Verwaltungskacheln. Die
   Rasterbreiten stehen hier, damit die Kacheln nicht in der allgemeinen
   `.grid`-Aufteilung landen und je nach Anzahl unterschiedlich breit werden. */
.lms-inhalte { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lms-inhalte .tile { min-height: 0; }
/* ── [LMS-PAAR-2026-09-12] Kacheln untereinander, Film daneben ──────────────
   Torsten: „mache hier die blöcke untereinander und rechts bzw. links daneben
   die videos ohne grenzen und du siehst wer wo steht."
   ‼️ Die Seite wechselt: beim ersten Abschnitt steht der Film rechts, beim
      zweiten links (`lms-paar-links`). Umgesetzt ueber die Spaltenzuweisung,
      NICHT ueber `direction` — sonst kippt die Leserichtung des Textes.
   ‼️ Der Film klebt beim Scrollen mit (`position: sticky`): Die Kachelspalte
      ist hoeher als er, sonst stuende er oben allein. */
/* ‼️ [12.09.2026] HALBE UND HALBE. Torsten: „jetzt habe ich extra die videos in
   1:1 gemacht, damit du die halbe contentbreite nutzen kannst. warum so klein?"
   Die Filme sind quadratisch (960×960) — genau dafuer hat er sie neu gebaut.
   Die frueheren 1,45 zu 0,55 stammen aus der Hochkant-Fassung und liessen den
   Film nur 339 px breit werden. Wer hier wieder ein anderes Format einsetzt,
   prueft die Spalten MIT. */
.lms-paar {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px; align-items: start; max-width: 1600px; margin: 0 auto; padding: 0 40px;
}
/* ‼️ [12.09.2026] Beim Seitenwechsel muessen die BREITEN mitwandern. Vorher
   stand nur die Spaltenzuweisung hier — der Film landete dadurch in der breiten
   Spalte und war 893 px breit statt 339 (gemessen: er ragte 326 px ueber die
   Kachelspalte hinaus). Erst die Messung hat es gezeigt, im Foto sah es nach
   Absicht aus. Bei gleichen Spalten faellt das nicht mehr auf — die Zuweisung
   bleibt trotzdem stehen, falls die Breiten wieder auseinandergehen. */
.lms-paar-links { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.lms-paar-links .lms-paar-text { grid-column: 2; grid-row: 1; }
.lms-paar-links .lms-paar-film { grid-column: 1; grid-row: 1; }
.lms-paar .section-head, .lms-paar .grid { padding: 0; margin-left: 0; margin-right: 0; max-width: none; }
.lms-paar-film { position: sticky; top: 150px; }
.lms-paar-film .bild { border-radius: 14px; overflow: hidden; }
/* Eine Spalte, egal wie breit das Fenster ist — sie stehen ja nebeneinander. */
.lms-paar .grid.lms-verwalten, .lms-paar .grid.ohne-grenzen { grid-template-columns: 1fr; gap: 16px; }

@media (max-width: 1000px) {
  .lms-paar { grid-template-columns: 1fr; gap: 26px; padding: 0 20px; }
  /* Untereinander steht der Film immer ZUERST — auch im gedrehten Abschnitt. */
  .lms-paar-links .lms-paar-film, .lms-paar-film { grid-column: 1; grid-row: 1; }
  .lms-paar-links .lms-paar-text, .lms-paar-text { grid-column: 1; grid-row: 2; }
  .lms-paar-film { position: static; }
}

.lms-verwalten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lms-verwalten .tile { min-height: 0; }
.lms-verwalten .tile-list { max-width: 100%; }
.lms-verwalten .tile-list li { font-size: 14.5px; line-height: 1.5; }

/* ‼️ Die Hakenliste steht hier ohne Bild daneben und darf deshalb zweispaltig
   laufen — sonst entsteht eine sehr lange schmale Spalte im breiten Abschnitt. */
.haken-breit {
  columns: 2; column-gap: 48px;
}
.haken-breit li { break-inside: avoid; }

@media (max-width: 1100px) {
  .lms-inhalte, .lms-verwalten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .lms-inhalte, .lms-verwalten { grid-template-columns: 1fr; }
  .haken-breit { columns: 1; }
}

/* ── Seite Tools und Services ──────────────────────────────────────────────
   Die beiden Ausgabenbilder sind hochformatig (Newsletter). `.reihe-bild`
   erwartet sonst Querformat — hier bekommt die Bildspalte deshalb einen
   Deckel, damit die Ausgabe nicht die halbe Seite füllt. */
.reihe-bild .bild[style*="820/932"] { max-width: 430px; margin: 0 auto; }
.ts-suche { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ts-suche .tile { min-height: 0; }
.ts-suche .tile-list { max-width: 100%; margin-bottom: 14px; }
.ts-suche .tile-list li { font-size: 14.5px; }
.tile-cta-zeile { margin: 18px 0 0; }

@media (max-width: 900px) {
  .ts-suche { grid-template-columns: 1fr; }
}

/* Die drei Bausteine des Jahrestreffens nutzen die Kette der Werkzeugseiten —
   auf hellem Grund, deshalb genügt die vorhandene Regel. Nur der Abstand nach
   oben ist hier eigen, weil kein Bild dazwischensteht. */
.ev-malaga { margin-top: 8px; }

/* ═══════════════ SEITE MITGLIEDSCHAFT ═══════════════ */
.vor-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vor-raster .tile { min-height: 0; }
.vor-zwei { max-width: 1600px; margin: 40px auto 0; padding: 0 40px; }

/* ── Der Beitrag ─────────────────────────────────────────────────────────── */
.preis-block {
  display: grid; grid-template-columns: auto 1fr; gap: 48px; align-items: center;
  margin: 8px 0 34px;
}
.preis-zahl dt {
  font-size: 68px; font-weight: 600; letter-spacing: -2px; line-height: 1;
  color: #fff; font-variant-numeric: tabular-nums;
}
.preis-zahl dd { margin: 8px 0 0; font-size: 16px; color: rgba(255,255,255,0.75); }
/* ‼️ [13.09.2026] Torsten: „schreibe vor die 200 € noch das Wort nur". In der
   Groesse der Zahl (68 px) wuerde „nur" die Aussage erschlagen — deshalb klein
   und als eigene Zeile darueber. Das negative Wortabstands-Erbe der grossen
   Zahl (-2 px) wird hier zurueckgenommen, sonst klebt „nur" zusammen. */
.preis-nur {
  /* [13.09.2026] Torsten: „nur bitte vor 200 nicht drüber" — also in derselben
     Zeile. Kleiner als die Zahl, aber nicht winzig; der Abstand ersetzt das
     Leerzeichen, das im Markup fehlt. */
  font-size: 22px; font-weight: 500; letter-spacing: 0;
  color: rgba(255,255,255,0.8); margin-right: 12px;
}
.preis-text p { font-size: 16.5px; line-height: 1.62; margin: 0 0 12px; }
.preis-text p:last-child { margin-bottom: 0; }
.preis-haken { margin-top: 6px; }

/* ── Das Antragspanel ─────────────────────────────────────────────────────
   ‼️ Die Felder sind `disabled`, weil das Formular NICHT sendet (Serverfunktionen
      sind in diesem Projekt tabu). Sie sehen deshalb bewusst ruhiger aus als
      ein benutzbares Feld — wer hineinklickt, soll sofort merken, dass hier
      nichts erfasst wird. Der Hinweis darüber sagt es zusätzlich. */
.antrag-panel {
  max-width: 1100px; margin: 46px auto 0; padding: 34px 36px 32px;
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 18px;
}
.antrag-hinweis {
  display: flex; align-items: flex-start; gap: 11px;
  margin: 0 0 28px; padding: 14px 16px; border-radius: 11px;
  background: rgba(0,32,96,0.05);
  font-size: 14.5px; line-height: 1.55; color: rgba(0,32,96,0.8);
}
.antrag-hinweis svg {
  width: 19px; height: 19px; flex: 0 0 auto; margin-top: 1px;
  fill: none; stroke: var(--nm-red); stroke-width: 2; stroke-linecap: round;
}
.antrag-form fieldset { border: 0; margin: 0 0 30px; padding: 0; }
.antrag-form fieldset:last-of-type { margin-bottom: 18px; }
.antrag-block {
  font-size: 17px; font-weight: 600; color: var(--nm-blue); padding: 0;
  margin-bottom: 4px; letter-spacing: -0.2px;
}
.antrag-erklaerung { font-size: 14px; color: rgba(0,32,96,0.65); margin: 0 0 16px; }
/* !! [12.09.2026] SECHS Spalten statt zwei. Torsten hat die Zeilen des Antrags
   festgelegt: Strasse lang neben Hausnummer kurz, PLZ / Ort / Land in eine
   Zeile, danach immer zwei Felder nebeneinander, im Zahlungsteil drei.
   Mit zwei Spalten liessen sich drei Felder in einer Zeile nicht abbilden.
   Sechs teilt sich glatt in Haelften (3+3), Drittel (2+2+2) und in 1+3+2 —
   deshalb sechs und nicht vier. Die Breitenklassen zaehlen in Sechsteln. */
.antrag-raster {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px 18px;
}
.feld { display: flex; flex-direction: column; gap: 6px; min-width: 0; grid-column: span 3; }
.feld-breit { grid-column: span 6; }   /* ganze Zeile */
.feld-lang  { grid-column: span 4; }   /* Strasse */
.feld-drittel { grid-column: span 2; } /* drei in einer Zeile */
.feld-kurz  { grid-column: span 2; }   /* Hausnummer, Land */
.feld-mini  { grid-column: span 1; }   /* PLZ */
.feld > span { font-size: 13.5px; font-weight: 500; color: rgba(0,32,96,0.78); }
.feld i { font-style: normal; color: var(--nm-red); }
.feld input, .feld select {
  font: inherit; font-size: 15px; color: var(--nm-blue);
  padding: 10px 12px; border-radius: 9px;
  border: 1px solid rgba(0,32,96,0.18); background: var(--body-bg);
  min-width: 0; width: 100%;
}
.feld input:disabled, .feld select:disabled {
  background: rgba(0,32,96,0.035); color: rgba(0,32,96,0.45); cursor: not-allowed;
}
.antrag-haken { display: flex; flex-direction: column; gap: 11px; margin-top: 18px; }
.kasten { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.5; color: rgba(0,32,96,0.8); }
.kasten input { margin-top: 3px; flex: 0 0 auto; width: 17px; height: 17px; accent-color: var(--nm-blue); }
.kasten a { color: var(--nm-blue); }
.antrag-pflicht { font-size: 13.5px; color: rgba(0,32,96,0.6); margin: 0 0 22px; }
.antrag-pflicht i { font-style: normal; color: var(--nm-red); }
/* [12.09.2026] Zusage ueber dem Absendeknopf: erst nach der Aufnahme wird
   belastet. Sie steht bewusst hervorgehoben — das ist der Satz, der die letzte
   Hemmung vor dem Absenden nimmt. */
.antrag-zusage {
  font-size: 14.5px; line-height: 1.55; color: rgba(0,32,96,0.82);
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: 11px; padding: 13px 15px; margin: 0 0 20px;
}
.antrag-zusage b { font-weight: 600; }
.antrag-knopf { display: flex; justify-content: center; }
.antrag-kette { margin-bottom: 6px; }

@media (max-width: 1100px) {
  .vor-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .vor-raster { grid-template-columns: 1fr; }
  .vor-zwei { padding: 0 20px; }
  .preis-block { grid-template-columns: 1fr; gap: 20px; }
  .preis-zahl dt { font-size: 52px; }
  .antrag-panel { padding: 24px 20px; margin-top: 32px; border-radius: 14px; }
  .antrag-raster { grid-template-columns: 1fr; }
  /* Am Telefon steht jedes Feld fuer sich — auch die schmalen. */
  .feld, .feld-breit, .feld-lang, .feld-drittel, .feld-kurz, .feld-mini { grid-column: span 1; }
}

/* ═══ Kein seitliches Verschieben der Seite (11.09.2026) ═══
   Gemessen: Die Einblend-Animation startet Bilder 40–72 px seitlich versetzt
   (`.auf` vor `.da`). Bis sie eingeblendet sind, ragen sie rechts hinaus —
   Startseite am Rechner 1454 statt 1440 px, Konzept und Tools am Handy
   410/413 statt 390 px. Mit fertigen Animationen passt alles. `clip` statt
   `hidden`: erzeugt keinen eigenen Scrollbereich, die feste Kopfleiste und
   die volle Breite der dunklen Abschnitte bleiben unberuehrt. */
/* ‼️ Erste Fassung `body { overflow-x: clip }` wirkte NICHT (gemessen: Tools am Handy
   weiter 413 px, Start am Rechner 1454 px) — der Wert am body geht ans Fenster
   ueber. Deshalb am Hauptinhalt; die Kopfleiste liegt ausserhalb. */
main { overflow-x: clip; }

/* ── Transfer-Studio-Karussells: Reiter kompakter (Torsten 11.09.2026: „bitte
   anpassen, damit es keinen umbruch gibt“) — gemessen bei 1440 px: Platz 1280,
   Bedarf A 1291 / B 1515. Gleiche Groesse fuer A und B. */
@media (min-width: 901px) {
  .ts-bsp-a .kar-tab, .ts-bsp-b .kar-tab { padding: 9px 13px; gap: 7px; font-size: 14px; }
  .ts-bsp-a .kar-reiter, .ts-bsp-b .kar-reiter { gap: 6px; }
  /* Bei 1280 px brachen beide noch um (Bedarf 1191/1230, Platz 1120, gemessen).
     Die Nummern in den Reitern haben — wie die entfernten roten Nummern — fuer
     Kunden keine Bedeutung; ohne sie passen beide Reihen in eine Zeile. */
  .ts-bsp-a .kar-tab .kar-nr, .ts-bsp-b .kar-tab .kar-nr { display: none; }
}
/* ── Dokumente komplett zum Durchscrollen (Torsten 11.09.2026: „das komplette
   dokument zum durchscrollen, nicht nur die titelseite“) — alle Seiten
   untereinander in einer 16:9-Flaeche, jede Seite oeffnet per Klick die Lupe. */
.fw-dok-rahmen { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #D3DEEC; }
.fw-dokument {
  position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 14px; padding: 14px;
}
.fw-dokument:focus-visible { outline: 2px solid var(--nm-blue); outline-offset: -2px; }
.fw-seite { margin: 0 auto; width: 100%; max-width: 560px; cursor: zoom-in; }
.fw-seite img { display: block; width: 100%; height: auto; border-radius: 3px; box-shadow: 0 4px 14px rgba(0,32,96,0.22); }
.fw-dok-rahmen img.ki-kennung {
  position: absolute; bottom: 10px; right: 22px;
  width: 24px; height: 24px; min-width: 24px; max-width: 24px; object-fit: contain; opacity: 0.9; pointer-events: none;
}


/* ══ SEITE STRATEGISCHE POSITIONIERUNG (Leistung 04, 11.09.2026) ═════════════
   Durchgehendes Beispiel Musterprofil Paul Powerman. Alle Klassen beginnen mit
   `pos-` bzw. `pw-` (Weggrafik), damit nichts auf anderen Seiten mitwirkt. */

/* ── Die Weggrafik (Startseite 04 und Seitenkopf) ── */
.pos-weg { background: var(--nm-blue); }
.pos-weg svg { display: block; width: 100%; height: 100%; }
.pos-weg text { font-family: inherit; text-anchor: middle; }
.pw-spalten text { font-size: 13px; font-weight: 700; letter-spacing: 1.2px; fill: rgba(255,255,255,0.55); }
.pw-t { font-size: 17px; font-weight: 600; fill: #fff; }
.pw-t-dunkel { fill: var(--nm-blue); }
.pw-t-klein { font-size: 15px; }
/* [11.09.2026] Torsten: „der weiße hintergrund bei profil geht nicht“ — Hellblau wie die Synthesen. */
.pw-profil { fill: #9FBAE3; }
.pw-ring { fill: none; stroke: rgba(159,186,227,0.4); stroke-width: 1.5; }
.pw-analyse { fill: rgba(255,255,255,0.08); stroke: rgba(255,255,255,0.42); stroke-width: 1.5; }
.pw-synthese { fill: #9FBAE3; }
/* [11.09.2026] Werkzeug-Felder farbig statt weiss (Torsten: „mächtige Tools");
   die Fuellung kommt als Verlauf aus der Grafik selbst (`fill:url(#pw-tool-…)`). */
.pw-werkzeug { stroke: rgba(159,186,227,0.85); stroke-width: 1.5; }
.pw-t-unter { fill: rgba(255,255,255,0.8); font-weight: 500; }
/* Seitenkopf: breite Fassung am Rechner, kompakte am Handy. */
.pos-weg.pw-schmal-nur { display: none; }
@media (max-width: 700px) {
  .pos-weg.pw-breit-nur { display: none; }
  .pos-weg.pw-schmal-nur { display: block; }
}
.kopf-buehne.kopf-voll { grid-template-columns: 1fr; }
.kopf-titel .kopf-unter { margin: 18px 0 0; max-width: 1080px; font-size: 19px; line-height: 1.6; color: rgba(0,32,96,0.8); }
@media (max-width: 900px) { .kopf-titel .kopf-unter { font-size: 17px; } }
/* Zweispaltiger Untertitel (Torsten 11.09.2026: „teile ihn in 2 spalten auf"). */
.kopf-titel .kopf-unter-zwei { max-width: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; }
.kopf-titel .kopf-unter-zwei p { margin: 0; }
@media (max-width: 900px) { .kopf-titel .kopf-unter-zwei { grid-template-columns: 1fr; row-gap: 14px; } }
.pw-linie {
  fill: none; stroke: rgba(159,186,227,0.5); stroke-width: 1.6;
  stroke-dasharray: 1; stroke-dashoffset: 0;
  transition: stroke-dashoffset .9s cubic-bezier(.4,0,.2,1) var(--d, 0s);
}
.pw-knoten {
  transform-box: fill-box; transform-origin: center;
  transition: opacity .5s ease var(--d, 0s), transform .6s cubic-bezier(.16,.84,.34,1) var(--d, 0s);
}
/* Aufbau erst, wenn der Rahmen (`.leistung-bild` / `.kopf-video`) sichtbar wird. */
.js .auf:not(.da) .pw-linie { stroke-dashoffset: 1; }
.js .auf:not(.da) .pw-knoten { opacity: 0; transform: scale(0.8); }
@media (prefers-reduced-motion: reduce) {
  .pw-linie, .pw-knoten { transition: none !important; }
}

/* ── Stufe 1: Profil ── */
.pos-profil { display: grid; grid-template-columns: 1.15fr 1fr; gap: 44px; align-items: start; }
.pos-geschichte h3, .pos-szene h3 {
  font-size: 21px; font-weight: 600; letter-spacing: -0.3px; margin: 0 0 16px; color: var(--nm-blue);
}
.pos-geschichte blockquote {
  margin: 0 0 18px; padding: 2px 0 2px 22px; border-left: 3px solid rgba(150,0,0,0.45);
  font-size: 17.5px; line-height: 1.65; color: rgba(0,32,96,0.84);
}
.pos-steckbrief {
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: 18px; padding: 26px 28px;
}
.pos-steckbrief-kopf { font-size: 12.5px; font-weight: 700; letter-spacing: 0.2px; color: rgba(0,32,96,0.55); margin: 0 0 16px; }
.pos-steckbrief dl { margin: 0; display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 11px 18px; }
.pos-steckbrief dt { font-size: 13.5px; font-weight: 700; color: rgba(0,32,96,0.6); padding-top: 2px; }
.pos-steckbrief dd { margin: 0; font-size: 15.5px; line-height: 1.5; color: rgba(0,32,96,0.88); }
.pos-unterkopf { font-size: 21px; font-weight: 600; letter-spacing: -0.3px; margin: 52px 0 18px; color: var(--nm-blue); }
.pos-otoene {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
}
.pos-otoene li {
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px;
  padding: 18px 20px; font-size: 16px; line-height: 1.55; color: var(--nm-blue);
}
.pos-notiz { margin: 18px 0 0; font-size: 15px; line-height: 1.6; color: rgba(0,32,96,0.66); max-width: 920px; }
.dunkel .pos-notiz { color: rgba(255,255,255,0.72); }

/* ── Stufe 2: die Analysen im Karussell ──
   ‼️ Zwei Klassen tief (`.pos-dok .x`): Sonst gewinnt `.dunkel p` (weiss) — Titel,
      Kopf- und Fusszeile des Dokuments waren am 11.09.2026 auf dem Foto unsichtbar. */
.pos-dok {
  position: relative; background: #EEF4FC; border-radius: 8px; padding: 30px 34px 26px;
  box-shadow: 0 10px 30px rgba(0,32,96,0.16), 0 1px 4px rgba(0,32,96,0.08);
}
.pos-dok .pos-dok-art { font-size: 12px; font-weight: 700; letter-spacing: 0.3px; color: var(--nm-red); margin: 0 0 8px; }
.pos-dok .pos-dok-titel {
  font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; color: var(--nm-blue);
  margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--card-border);
}
.pos-dok ol { margin: 0; padding: 0 0 0 26px; display: flex; flex-direction: column; gap: 7px; }
.pos-dok li { font-size: 15px; line-height: 1.4; color: rgba(0,32,96,0.84); padding-left: 4px; }
.pos-dok li::marker { color: rgba(0,32,96,0.45); font-weight: 600; }
.pos-dok li.pos-dok-grenze { list-style-type: '– '; color: var(--nm-red); }
.pos-dok .pos-dok-fuss {
  margin: 20px 0 0; padding-top: 12px; border-top: 1px solid var(--card-border);
  font-size: 13px; font-weight: 600; color: rgba(0,32,96,0.6);
}
.pos-dok img.ki-kennung {
  position: absolute; right: 18px; bottom: 16px;
  width: 24px; height: 24px; min-width: 24px; max-width: 24px; object-fit: contain; opacity: 0.9;
}
.kar-text > p.pos-auszug { border-left: 3px solid rgba(150,0,0,0.45); padding-left: 18px; color: rgba(0,32,96,0.88); }
.kar-text > p.pos-listenkopf { font-size: 14px; font-weight: 700; color: rgba(0,32,96,0.62); margin: 0 0 10px; }
.pos-grenze {
  margin-top: 20px; padding: 14px 18px; background: rgba(150,0,0,0.05);
  border-left: 3px solid var(--nm-red); border-radius: 0 12px 12px 0;
}
.pos-grenze .pos-grenze-kopf { font-size: 12.5px; font-weight: 700; color: var(--nm-red); margin: 0 0 6px; }
.pos-grenze p { margin: 0; font-size: 15px; line-height: 1.55; color: rgba(0,32,96,0.82); }
.pos-szenarien { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pos-szenarien li {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px;
  font-size: 15.5px; line-height: 1.5; color: rgba(0,32,96,0.84);
}
.pos-szenarien span {
  align-self: start; text-align: center; padding: 3px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; color: var(--nm-blue); background: var(--btn-hell);
}

/* ── Stufe 3: Persona ── */
.pos-persona { display: grid; grid-template-columns: 1fr 1.15fr; gap: 44px; align-items: start; }
.pos-person {
  display: flex; align-items: center; gap: 16px;
  margin: 0 0 20px; padding-bottom: 18px; border-bottom: 1px solid var(--card-border);
}
.pos-initialen {
  flex: 0 0 auto; width: 60px; height: 60px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--nm-blue); color: #fff; font-size: 20px; font-weight: 600; letter-spacing: 0.5px;
}
.pos-person-name { margin: 0; font-size: 20px; font-weight: 600; color: var(--nm-blue); }
.pos-person-rolle { margin: 2px 0 0; font-size: 14.5px; line-height: 1.45; color: rgba(0,32,96,0.7); }
.pos-szene > p { font-size: 17px; line-height: 1.7; color: rgba(0,32,96,0.84); margin: 0 0 22px; }

/* ── Stufe 3: Alleinstellung (dunkler Abschnitt) ── */
.grid.pos-kern { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pos-kern .tile { min-height: 0; }
.pos-ton {
  margin: 4px 0 0; padding-left: 18px; border-left: 3px solid rgba(0,32,96,0.25);
  font-size: 16px; line-height: 1.6; color: rgba(0,32,96,0.84);
}
.dunkel .pos-ton { border-left-color: rgba(159,186,227,0.6); color: rgba(255,255,255,0.9); }
.pos-usp-liste {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px;
}
.pos-usp-liste li {
  display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: 14px;
  background: var(--card-bg); border: 1px solid var(--card-border);
  font-size: 15.5px; line-height: 1.45; color: var(--nm-blue);
}
.dunkel .pos-usp-liste li { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.16); color: rgba(255,255,255,0.9); }
.pos-usp-liste span { font-size: 12px; font-weight: 700; letter-spacing: 0.2px; color: var(--nm-red); }
.dunkel .pos-usp-liste span { color: #9FBAE3; }

/* ═══════ [WEGFENSTER-2026-09-12] DER WEG ALS FENSTER ═══════════════════════
   Torsten: der Verweis „So entsteht sie, am Beispiel gezeigt" oeffnet kein
   neues Seitenziel mehr, sondern ein Fenster mit der animierten Wegstrecke.

   ‼️ Die Flaeche traegt `auf` und beim Oeffnen `da` — dieselben zwei Klassen,
      an denen die Aufbau-Animation haengt (`.js .auf:not(.da) .pw-linie`).
      Hier wird nichts nachgebaut, nur dasselbe Signal gegeben.
   ‼️ Der Verweis bleibt ein echter Verweis auf die Positionierungsseite. Faellt
      das Skript aus, landet man dort — statt auf einem toten Link. */
.weg-link { font-weight: 500; }
.modal-weg { background: rgba(0,16,48,0.86); }
.modal-weg .modal-card { max-width: min(1180px, 94vw); }
.weg-flaeche { margin: 4px 0 0; }
/* Zum Zuruecksetzen zwischen zwei Oeffnungen — siehe _wegfenster.html. */
.weg-flaeche.sofort .pw-linie,
.weg-flaeche.sofort .pw-knoten { transition: none !important; }
.weg-flaeche .pos-weg { border-radius: 14px; overflow: hidden; }
.weg-fuss {
  margin: 16px 0 0; font-size: 14.5px; line-height: 1.55;
  color: rgba(0,32,96,0.72); max-width: 760px;
}
@media (max-width: 700px) { .weg-fuss { font-size: 13.5px; } }

/* ═══════ [BAUSTEIN-ABSCHNITTE-2026-09-12] EIN BAUSTEIN, EIN ABSCHNITT ══════
   Torsten: „alle bausteine, die wir in stufe 4 aufgelistet haben sollen einen
   eigenen abschnitt und ein kleines video erhalten."

   Zwoelf Abschnitte im Atelier, neun in der Factory. Damit das nicht erschlaegt:
   * der Abschnitt ist FLACHER als ein gewoehnlicher (weniger Luft oben/unten)
   * der Film ist klein und steht in einer eigenen Spalte
   * Film und Text tauschen die Seite, sonst laeuft das Auge zwoelfmal denselben Weg
   ‼️ Der Farbwechsel hell/dunkel kommt aus `bauen.py` (jeder zweite dunkel) —
      wer dort die Reihenfolge aendert, prueft, ob der Abschnitt DAVOR und
      DANACH noch passt. */
.bs-abschnitt { padding-top: 62px; padding-bottom: 62px; }
/* ‼️ [12.09.2026, zweite Fassung] GROESSER. Torsten: „die abschnitte mit den
      tools in ba und ef sind zu klein. die videos müssen größer zur geltung
      kommen."
      Vorher 340 px — das war die Antwort auf sein früheres „kleines video",
      hat sich mit den fertigen Filmen aber als zu zurückhaltend erwiesen.
      Jetzt 560 px und der Abschnitt bekommt mehr Luft. Der Text behält
      daneben rund 560 px, bleibt also gut lesbar. */
.bs-reihe {
  display: grid; grid-template-columns: 560px minmax(0, 1fr);
  gap: 52px; align-items: center; max-width: 1240px; margin: 0 auto;
}
.bs-reihe.gedreht { grid-template-columns: minmax(0, 1fr) 560px; }
/* Gedreht: der Film steht rechts. Umgesetzt ueber die Spaltenzuweisung, NICHT
   ueber `direction` — sonst kippt auch die Leserichtung des Textes. */
.bs-reihe.gedreht .bs-film { grid-column: 2; grid-row: 1; }
.bs-reihe.gedreht .bs-text { grid-column: 1; grid-row: 1; }
.bs-film .bild { border-radius: 14px; overflow: hidden; }
/* ‼️ [12.09.2026] Der Pop gilt hier NUR fuer die Textspalte. Ein 560 px breiter
   Film, der vor- und zurueckspringt, wirkt unruhig statt lebendig — deshalb
   blendet er ruhig ein (Regel `.js .auf`), waehrend der Text daneben aufpoppt. */
.js .bs-text.auf:not(.da) { opacity: 0; }
.js .bs-text.da {
  animation: feld-auf .52s cubic-bezier(.34,.9,.4,1) both;
  animation-delay: .08s;
  transform-origin: left center;
}
.bs-text h2 { font-size: 31px; line-height: 1.2; margin: 6px 0 14px; }
.bs-text p { font-size: 17.5px; line-height: 1.62; color: rgba(0,32,96,0.82); margin: 0; }
.dunkel .bs-text p { color: rgba(255,255,255,0.8); }

@media (max-width: 860px) {
  /* Untereinander: der Film immer ZUERST — auch im gedrehten Abschnitt.
     Ohne die beiden Regeln stuende dort der Text vor dem Film, und die Seite
     laese sich mal so, mal so. */
  .bs-reihe, .bs-reihe.gedreht { grid-template-columns: 1fr; gap: 22px; }
  .bs-film { max-width: 560px; }
  .bs-reihe.gedreht .bs-film { grid-column: 1; grid-row: 1; }
  .bs-reihe.gedreht .bs-text { grid-column: 1; grid-row: 2; }
  .bs-text h2 { font-size: 23px; }
}

/* ═══════ [POS-EFFEKTE-2026-09-12] AUFTRITT DER ABSCHNITTE ═══════════════════
   Torsten am 12.09.2026: die Abschnitte sollen staerker hervortreten.

   Bauart wie beim Zusammenfluss-Abschnitt: Der Beobachter setzt am Container
   nur `.da`, alles Weitere steht hier. Der Zaehler `--i` je Listenpunkt kommt
   aus `_bewegung.html`.

   ‼️ Alles haengt an `.js`. Wer „Bewegung reduzieren" eingestellt hat, bekommt
      diese Klasse gar nicht erst — dann steht alles sofort da. Genau deshalb
      wird der Ausgangszustand NIE ohne `.js` gesetzt: Ein Ausfall des Skripts
      darf keinen unsichtbaren Inhalt hinterlassen.
   ‼️ Der Aufbau der Wegstrecke oben (Linien zeichnen, Knoten hereinsetzen)
      war bereits gebaut und laeuft — siehe `.pw-linie` / `.pw-knoten`.
      Nicht doppeln. */

@keyframes pos-zeile-ein {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}

/* 1 · Die Gliederung eines Dokuments laeuft zeilenweise ein.
      Das wiederholt sich bei JEDEM Reiterwechsel: Das neue Blatt war vorher
      ausgeblendet, damit faengt die Animation von selbst wieder an.
      Gesamtdauer bei zehn Punkten rund 0,75 s — laenger wirkt zaeh. */
.js .kar.auf:not(.da) .pos-dok ol > li { opacity: 0; }
.js .kar.da .pos-dok ol > li {
  animation: pos-zeile-ein .34s cubic-bezier(.22,.61,.36,1) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}

/* 2 · Pauls O-Toene erscheinen einzeln — wie Saetze, die nacheinander fallen. */
.js .pos-otoene-kasten.auf:not(.da) li { opacity: 0; }
.js .pos-otoene-kasten.da li {
  animation: pos-zeile-ein .42s cubic-bezier(.22,.61,.36,1) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}

/* 3 · Die Bausteinlisten in Stufe 4 fuellen sich von oben nach unten. */
.js .pos-wofuer .tile-list.auf:not(.da) li { opacity: 0; }
.js .pos-wofuer .tile-list.da li {
  animation: pos-zeile-ein .34s cubic-bezier(.22,.61,.36,1) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}

/* 4 · Die Stufennummer: ein Ring laeuft einmal nach aussen.
      ‼️ Bewusst KEIN sich zeichnender Kreisbogen: der braucht entweder eine
         Eigenschaft, die aeltere Browser nicht kennen (@property), oder ein
         zweites SVG je Stufe. Der Ring erreicht dieselbe Wirkung mit sechs
         Zeilen und laeuft ueberall. */
@keyframes pos-stufe-ring {
  from { box-shadow: 0 0 0 0 rgba(0,32,96,0.38); }
  to   { box-shadow: 0 0 0 18px rgba(0,32,96,0); }
}
@keyframes pos-stufe-ring-hell {
  from { box-shadow: 0 0 0 0 rgba(159,186,227,0.5); }
  to   { box-shadow: 0 0 0 18px rgba(159,186,227,0); }
}
.js .pos-stufe-kopf.da .pos-stufe-nr {
  animation: pos-stufe-ring 1.15s .2s cubic-bezier(.2,.7,.3,1) both;
}
.js .dunkel .pos-stufe-kopf.da .pos-stufe-nr {
  animation-name: pos-stufe-ring-hell;
}

/* 5 · Die drei Mengenangaben in Stufe 4 (1 Profil, 4 Analysen, 2 Synthesen)
      setzen sich nacheinander.
      ‼️ Hochzaehlen waere hier sinnlos — von 0 auf 4 sieht niemand. Stattdessen
         treten die Ziffern kurz hervor und legen sich dann in die Zeile. */
/* ‼️ KEIN Fettdruck: Das hier ist Fliesstext, und dort ist Fettdruck im
      Projekt verboten. Die Ziffer tritt allein durch die Bewegung hervor. */
.pos-menge { display: inline-block; }
@keyframes pos-menge-ein {
  0%   { opacity: 0; transform: scale(1.5); }
  55%  { opacity: 1; transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}
.js .pos-menge.auf { opacity: 1; transform: none; transition: none; }
.js .pos-menge.auf:not(.da) { opacity: 0; }
.js .pos-menge.da {
  animation: pos-menge-ein .5s cubic-bezier(.2,.8,.3,1) both;
  animation-delay: calc(var(--n, 0) * 160ms);
}

@media (prefers-reduced-motion: reduce) {
  .pos-menge, .pos-dok ol > li, .pos-otoene-kasten li,
  .pos-wofuer .tile-list li, .pos-stufe-nr { animation: none !important; opacity: 1 !important; }
}

/* ── Stufe 4: Wofuer ── */
.grid.pos-wofuer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pos-wofuer .tile { min-height: 0; }
/* [POS-BAUSTEINE-2026-09-12] Die Bausteinliste schliesst direkt an den Text an.
   Grund: `.tile-desc` hat global `flex: 1` und schiebt bei kuerzerem Text alles
   darunter nach unten — gemessen am 12.09., in der Factory-Kachel klaffte eine
   Luecke von rund 90 Pixeln, in der Atelier-Kachel nicht. Der Dehnraum wandert
   deshalb hier auf die Liste. Gilt NUR in `.pos-wofuer`, nicht global. */
.pos-wofuer .tile-desc { flex: 0 0 auto; margin-bottom: 4px; }
.pos-wofuer .tile-list { flex: 1; }
/* [POS-BAUSTEINE-2026-09-12] Die Bausteinnamen stehen fett — Torstens
   ausdrueckliche Ansage („und mache alle bausteine in fettschrift").
   Das ist KEIN Verstoss gegen „kein Fettdruck im Fliesstext": hier stehen
   keine Saetze, sondern Namen. Gewicht 600 wie die Namen in den Listen der
   Atelier-Seite — nicht schwerer, sonst schlaegt es die Kachelueberschrift.
   An EINER Stelle geregelt, nicht 21-mal im Baustein ausgezeichnet. */
.pos-wofuer .tile-list li { font-weight: 600; color: rgba(255,255,255,0.88); }
.pos-haken { margin-top: 26px; }
.pos-banner { margin-top: 56px; }

@media (max-width: 900px) {
  .pos-profil, .pos-persona { grid-template-columns: 1fr; gap: 28px; }
  .grid.pos-kern, .grid.pos-wofuer { grid-template-columns: 1fr; }
  .pos-otoene { grid-template-columns: 1fr; }
  .pos-dok { padding: 22px 20px 20px; }
  .pos-unterkopf { margin-top: 40px; }
}
/* ── Einleitung (Torstens Text) und Schluss ── */
.pos-einleitung .doppel-text + .doppel-text { margin-top: 22px; }
.pos-einleitung .doppel-text p { margin: 0; font-size: 17px; line-height: 1.68; color: rgba(255,255,255,0.88); }
.pos-einleitung .pos-unterkopf { margin-top: 60px; color: #fff; }
.pos-schluss { margin-top: 52px; }
.pos-schluss p { margin: 0; font-size: 17px; line-height: 1.68; color: rgba(0,32,96,0.84); }
.pos-fazit {
  margin: 36px 0 0; max-width: 1040px; padding-left: 24px; border-left: 4px solid var(--nm-red);
  font-size: 26px; line-height: 1.38; font-weight: 600; letter-spacing: -0.4px; color: var(--nm-blue);
}
@media (max-width: 900px) {
  .pos-einleitung .doppel-text + .doppel-text { margin-top: 14px; }
  .pos-fazit { font-size: 21px; padding-left: 18px; }
}

/* ── Einleitung: zwei Beiträge im Vergleich (Torsten, 11.09.2026) ──
   Helle Karten auf dem dunklen Abschnitt; zwei Klassen tief, damit
   `.dunkel p/h3` (weiß) nicht gewinnt. */
.pos-posts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 6px 0 36px; }
.pos-einleitung .pos-post {
  position: relative; background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: 18px; padding: 26px 28px 34px;
}
.pos-einleitung .pos-post-marke { font-size: 12.5px; font-weight: 700; letter-spacing: 0.2px; margin: 0 0 14px; color: rgba(0,32,96,0.6); }
/* [11.09.2026] Torsten: Beitrag 1 rot, Beitrag 2 grün. Grün aus der Mint-Familie,
   abgedunkelt — Mint (#34D399) selbst wäre auf der hellen Kachel kaum lesbar. */
.pos-einleitung .pos-post-marke.ohne { color: var(--nm-red); }
.pos-einleitung .pos-post-marke.mit { color: #047857; }
/* Erklärtext unter den Kacheln: gleiche Spalten wie die Kacheln, damit die zweite
   Spalte bündig an Kachel 2 beginnt (Torsten: „nicht linksbündig mit der kachel"). */
.pos-einleitung .doppel-text { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.pos-einleitung .pos-post h3 { font-size: 21px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; margin: 0 0 14px; color: var(--nm-blue); }
.pos-einleitung .pos-post p { font-size: 15.5px; line-height: 1.6; margin: 0 0 12px; color: rgba(0,32,96,0.86); }
.pos-einleitung .pos-post ul { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
/* [11.09.2026] Torsten: Aufzählungspunkte statt Pfeile, Text eingerückt —
   umbrochene Zeilen beginnen unter dem Text, nicht unter dem Punkt. */
.pos-einleitung .pos-post li { position: relative; padding-left: 22px; font-size: 15.5px; line-height: 1.55; color: rgba(0,32,96,0.86); }
.pos-einleitung .pos-post li::before {
  content: ""; position: absolute; left: 6px; top: 0.62em;
  width: 6px; height: 6px; border-radius: 50%; background: rgba(0,32,96,0.55);
}
.pos-einleitung .pos-post .pos-post-tags { margin: 16px 0 0; font-size: 14.5px; color: #3f63a8; }
.pos-einleitung .pos-post img.ki-kennung {
  position: absolute; right: 18px; bottom: 16px;
  width: 24px; height: 24px; min-width: 24px; max-width: 24px; object-fit: contain; opacity: 0.9;
}
@media (max-width: 900px) {
  .pos-posts { grid-template-columns: 1fr; gap: 16px; }
  .pos-einleitung .doppel-text { grid-template-columns: 1fr; }
  .pos-einleitung .pos-post { padding: 22px 20px 34px; }
}

/* Handy: die vier Reiter in EINER wischbaren Zeile — wie im Transfer Studio
   (Torsten 11.09.2026 dort: Pillen ohne Umbruch). */
@media (max-width: 900px) {
  .pos-analysen .kar-reiter { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
  .pos-analysen .kar-tab { flex: 0 0 auto; white-space: nowrap; }
}
@media (max-width: 520px) {
  .pos-steckbrief { padding: 20px; }
  .pos-steckbrief dl { grid-template-columns: 1fr; gap: 2px; }
  .pos-steckbrief dd { margin-bottom: 10px; }
  .pos-szenarien li { grid-template-columns: 1fr; gap: 6px; }
  .pos-szenarien span { justify-self: start; }
}


/* ── Knopf „Nach oben“ (Torsten, 11.09.2026) ─────────────────────────────
   Hellblau mit dunkelblauem Pfeil: auf hellen UND dunklen Abschnitten sichtbar.
   z-index 50 — unter Kopfleiste (60–100), Handy-Schublade (55) und Fenstern (200). */
.nach-oben {
  position: fixed; right: 24px; bottom: 24px; z-index: 50;
  width: 50px; height: 50px; padding: 0; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--btn-hell); color: var(--nm-blue);
  border: 2px solid rgba(255,255,255,0.85);
  box-shadow: 0 8px 24px rgba(0,32,96,0.28), 0 2px 6px rgba(0,32,96,0.18);
  opacity: 0; transform: translateY(12px) scale(0.9); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, background .2s ease;
}
.nach-oben.da { opacity: 1; transform: none; pointer-events: auto; }
.nach-oben:hover { background: #B6CBEA; }
.nach-oben:focus-visible { outline: 3px solid var(--nm-blue); outline-offset: 3px; }
.nach-oben svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 700px) { .nach-oben { right: 16px; bottom: 16px; width: 46px; height: 46px; } }
@media (prefers-reduced-motion: reduce) { .nach-oben { transition: none; } }


/* ══ POS-KACHELN-AUF-DUNKEL-2026-09-11 ═══════════════════════════════════════════════
   ‼️ Torsten, 11.09.2026: „und noch einmal: weiß ist tabu als kachelhintergrund!!!!!“
   Die Kartenfarbe #E0E9F6 ist fuer HELLE Abschnitte gedacht — auf Dunkelblau wirkt
   sie weiss. Die Beitragskacheln nehmen deshalb die Form von `.dunkel .tile`:
   durchscheinend dunkel, helle Schrift (wie die sieben Gruende weiter unten).
   Kennzeilen: Rot/Gruen der Marke sind auf Dunkelblau nicht lesbar → helles Rot
   (Kontrast 6,6:1) und Mint --nm-mint (6,5:1). Gemessen mit hell.mjs (alle 13 Seiten). */
.pos-einleitung .pos-post { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.16); }
.pos-einleitung .pos-post-marke { color: rgba(255,255,255,0.6); }
/* [12.09.2026] Torsten: „nimm dafür ein sattes rot und nich dieses blasse rosa“.
   #FF7070 = voll gesaettigtes Rot, Kontrast 4,66:1 auf der Kachel (ab 4,5 lesbar).
   Saftigere Toene wie #FF3B30 liegen bei 3,5:1 und fallen durch. */
.pos-einleitung .pos-post-marke.ohne { color: #FF7070; }
.pos-einleitung .pos-post-marke.mit { color: var(--nm-mint); }
.pos-einleitung .pos-post h3 { color: #fff; }
.pos-einleitung .pos-post p, .pos-einleitung .pos-post li { color: rgba(255,255,255,0.84); }
.pos-einleitung .pos-post li::before { background: rgba(255,255,255,0.55); }
.pos-einleitung .pos-post .pos-post-tags { color: #9FBAE3; }
/* Das „Dokument“ im Analyse-Karussell war #EEF4FC — praktisch weiss. */
.pos-dok { background: #D3DEEC; }


/* ══ WEISS-TABU-RUNDE2-2026-09-11 ════════════════════════════════════════════════════
   ‼️ Torsten, 11.09.2026: „Ja alle umstellen“ — nach der Messung heller Flaechen
   (hell.mjs, 13 Seiten). Weiss und fast-weiss sind als Kachel-/Knopfflaeche tabu.
   1) Karussell auf DUNKLEM Grund (Positionierung „Analysen“, Transfer Studio Modul B):
      Buehne, Reiter, Dokument durchscheinend dunkel, Schrift hell. Aktiver Reiter
      und Pfeile bleiben Hellblau #9FBAE3; Pfeil-Hover Hellblau statt Weiss.
   2) Formatknoepfe: auf hellem Grund #D3DEEC statt rgba(255,255,255,.7).
   3) Baum (Mediathek, Transfer Studio): Kaesten #D3DEEC statt halbdurchsichtig weiss. */
.dunkel .kar-buehne { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.16); }
.dunkel .kar-tab { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.22); }
.dunkel .kar-tab:hover { background: rgba(255,255,255,0.16); }
.dunkel .kar-tab .kar-nr { color: rgba(255,255,255,0.7); }
.dunkel .kar-tab.aktiv { background: #9FBAE3; color: var(--nm-blue); border-color: #9FBAE3; }
.dunkel .kar-tab.aktiv .kar-nr { color: rgba(0,32,96,0.72); }
.dunkel .kar-pfeil:hover { background: #C7D3E5; border-color: #C7D3E5; }
.dunkel .kar-buehne .kar-text h3 { color: #fff; }
.dunkel .kar-buehne .kar-text > p { color: rgba(255,255,255,0.84); }
.dunkel .kar-buehne .kar-mass { color: rgba(255,255,255,0.66); }
.dunkel .kar-buehne .haken li { color: rgba(255,255,255,0.84); }
.dunkel .kar-buehne .haken li::before { background: rgba(255,255,255,0.14); }
.dunkel .kar-buehne .haken li::after { border-color: #9FBAE3; }
.dunkel .kar-buehne .fw-hinweis { color: rgba(255,255,255,0.72); }
.dunkel .fw-knopf { background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.22); }
.dunkel .fw-knopf:hover { background: rgba(255,255,255,0.18); }
.dunkel .fw-knopf.aktiv { background: #9FBAE3; color: var(--nm-blue); border-color: #9FBAE3; }
.dunkel .fw-dok-rahmen { background: rgba(255,255,255,0.08); }
/* Positionierung: Inhalte der Analyse-Buehne auf dunklem Grund */
.pos-analysen .kar-text > p.pos-auszug { color: rgba(255,255,255,0.9); border-left-color: rgba(252,165,165,0.7); }
.pos-analysen .kar-text > p.pos-listenkopf { color: rgba(255,255,255,0.66); }
.pos-analysen .pos-grenze { background: rgba(252,165,165,0.08); border-left-color: #FCA5A5; }
.pos-analysen .pos-grenze .pos-grenze-kopf { color: #FCA5A5; }
.pos-analysen .pos-grenze p { color: rgba(255,255,255,0.84); }
.pos-analysen .pos-szenarien li { color: rgba(255,255,255,0.84); }
.pos-analysen .pos-dok { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); box-shadow: none; }
.pos-analysen .pos-dok .pos-dok-art { color: #FCA5A5; }
.pos-analysen .pos-dok .pos-dok-titel { color: #fff; border-bottom-color: rgba(255,255,255,0.16); }
.pos-analysen .pos-dok li { color: rgba(255,255,255,0.84); }
.pos-analysen .pos-dok li::marker { color: rgba(255,255,255,0.5); }
.pos-analysen .pos-dok li.pos-dok-grenze { color: #FCA5A5; }
.pos-analysen .pos-dok .pos-dok-fuss { color: rgba(255,255,255,0.66); border-top-color: rgba(255,255,255,0.16); }
/* 2) Formatknoepfe auf hellem Grund */
.fw-knopf { background: var(--card-hover); }
.fw-knopf:hover { background: #C7D3E5; }
.fw-knopf.aktiv { background: var(--nm-blue); color: #fff; border-color: var(--nm-blue); }
/* 3) Baum */
.bz, .bz-ueberblick { background: var(--card-hover); }
.bz.bz-offen { background: #C7D3E5; }
.baum-abschnitte li { background: var(--card-hover); }


/* ══ POS-STUFEN-2026-09-11 ════════════════════════════════════════════════════════
   Stufen deutlich machen — in der Weggrafik (Spaltenkoepfe) UND an jedem Abschnitt:
   grosse Nummer im Kreis + „Stufe N von 4 · …“. Hell-Abschnitt: Dunkelblau mit
   weisser Ziffer; Dunkel-Abschnitt: Hellblau mit dunkelblauer Ziffer. */
.pw-spalten .pw-stufe circle { fill: #9FBAE3; }
.pw-spalten .pw-stufe-nr { fill: var(--nm-blue); font-weight: 700; letter-spacing: 0; text-anchor: middle; }
.pw-spalten .pw-stufe-name { fill: #fff; font-weight: 600; letter-spacing: 0; text-anchor: start; }
.pos-stufe-kopf { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 24px; align-items: start; }
.pos-stufe-nr {
  width: 64px; height: 64px; margin-top: 2px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 700; line-height: 1;
  background: var(--nm-blue); color: #fff;
}
.dunkel .pos-stufe-nr { background: #9FBAE3; color: var(--nm-blue); }
.pos-stufe-kopf .pos-stufe-marke { font-size: 15.5px; font-weight: 700; letter-spacing: 0; color: var(--nm-blue); margin: 2px 0 6px; }
.dunkel .pos-stufe-kopf .pos-stufe-marke { color: #9FBAE3; }
@media (max-width: 700px) {
  .pos-stufe-kopf { column-gap: 14px; }
  .pos-stufe-nr { width: 48px; height: 48px; font-size: 23px; }
  .pos-stufe-kopf .pos-stufe-marke { font-size: 14px; }
}


/* ══ POS-PROFIL-ZWEI-2026-09-12 ═══════════════════════════════════════════════════════
   Torsten, 12.09.2026: Steckbrief links (Ueberschrift darueber), O-Toene rechts. */
.pos-profil-zwei { grid-template-columns: 1fr 1fr; gap: 40px; }
.pos-unterkopf-oben { margin: 0 0 14px; font-size: 19px; }
.pos-otoene-eins { grid-template-columns: 1fr; gap: 12px; }
@media (max-width: 900px) { .pos-profil-zwei { grid-template-columns: 1fr; gap: 28px; } }


/* ══ POS-OTOENE-KASTEN-2026-09-12 ═══════════════════════════════════════════════════
   Torsten, 12.09.2026: „packe die texte aus dem rechten block auch in einen kasten,
   statt in 6 kleine kacheln“ — ein Rahmen, die Saetze durch feine Linien getrennt. */
.pos-otoene-kasten {
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: 18px; padding: 10px 26px;
}
.pos-otoene-kasten ul { list-style: none; margin: 0; padding: 0; }
.pos-otoene-kasten li {
  font-size: 16px; line-height: 1.55; color: var(--nm-blue);
  padding: 14px 0; border-top: 1px solid var(--card-border);
}
.pos-otoene-kasten li:first-child { border-top: none; }
@media (max-width: 520px) { .pos-otoene-kasten { padding: 8px 20px; } }


/* ══ POS-ANALYSEN-NUR-GLIEDERUNG-2026-09-12 ════════════════════════════════════════════
   Torsten, 12.09.2026: im Karussell nur noch die Gliederung, darunter die Methoden. */
.pos-analysen .kar-blatt { grid-template-columns: 1fr; }
.pos-analysen .kar-medium { max-width: 860px; margin: 0 auto; }
.pos-analysen .pos-dok .pos-dok-methoden-kopf {
  margin: 20px 0 6px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.16);
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.2px; color: #FCA5A5;
}
.pos-analysen .pos-dok .pos-dok-methoden { margin: 0; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,0.84); }
.pos-analysen .pos-dok .pos-dok-fuss { border-top: none; padding-top: 16px; }


/* ══ POS-SYNTHESEN-HELL-2026-09-12 ══════════════════════════════════════════════════
   Stufe 3 im Layout von Stufe 2, aber auf HELLEM Grund (Farbwechsel der Seite).
   Das Dokument behaelt seine helle Grundform (#D3DEEC); nur die Spalte darf nicht
   zweigeteilt sein, und die Methoden brauchen die hellen Farben. */
.pos-synthesen .kar-blatt { grid-template-columns: 1fr; }
.pos-synthesen .kar-medium { max-width: 860px; margin: 0 auto; }
.pos-synthesen .pos-dok .pos-dok-methoden-kopf {
  margin: 20px 0 6px; padding-top: 14px; border-top: 1px solid var(--card-border);
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.2px; color: var(--nm-red);
}
.pos-synthesen .pos-dok .pos-dok-methoden { margin: 0; font-size: 15px; line-height: 1.55; color: rgba(0,32,96,0.84); }


/* ══ STREIFEN-ZWEIFARBIG-2026-09-12 ═════════════════════════════════════════
   Torsten: „bitte noch mal alle seiten prüfen und überall in die abschnitte
   abwechselnd blau weiß."

   Beim Umstellen der Streifenfolge kam heraus: einige Innenbausteine haben ihre
   Schriftfarbe fest verdrahtet — auf genau die Farbwelt, in der sie bisher
   zufaellig standen. Wandert ihr Abschnitt in die andere Farbe, steht der Text
   unsichtbar auf gleichfarbigem Grund.

   ‼️ GEMESSEN am 12.09.2026 ueber alle dreizehn Seiten (Kontrastrechnung, nicht
      Augenmass): ZWANZIG Textstellen waren schon VOR dieser Umstellung live
      unlesbar — Konzept, Mitgliedschaft, Tools und Services, Transfer Studio.
      Im Foto faellt so etwas nicht auf: dort steht dann einfach nichts.
   ‼️ Jeder Baustein braucht BEIDE Faelle. Wer hier einen neuen ergaenzt, prueft
      ihn in hell UND in dunkel — sonst kehrt genau dieser Fehler zurueck.
   Bauart uebernommen von den bestehenden Gegenregeln (`.dunkel .kar-buehne …`
   und `.section:not(.dunkel) .ts-formate li`), nichts neu erfunden. */

/* ── Auf HELL gebaut, jetzt auch im dunklen Abschnitt tragfaehig ── */
.dunkel .haken li { color: rgba(255,255,255,0.84); }
.dunkel .haken li::before { background: rgba(255,255,255,0.14); }
.dunkel .haken li::after  { border-left-color: #9FBAE3; border-bottom-color: #9FBAE3; }
.dunkel .reihe-text p  { color: rgba(255,255,255,0.82); }
.dunkel .aufbau-text p { color: rgba(255,255,255,0.82); }
.dunkel .zf-marke { color: #fff; }
.dunkel .zf-was   { color: rgba(255,255,255,0.78); }
.dunkel .tile-status.ok   { background: rgba(45,180,99,0.28);  color: #BFF0D2; }
.dunkel .tile-status.soon { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.82); }
.dunkel .tile-status.date { background: rgba(255,255,255,0.12); color: #FCA5A5; }
.dunkel .tile-status.info { background: rgba(255,255,255,0.14); color: #fff; }

/* ‼️ NUR IN DUNKEL GEBAUT — nicht umstellen, ohne sie neu zu gestalten:
   das Zahlenband der Mediathek (`.umfang-band`), ihr Baukasten-Raster (`.mx-`)
   und der Ergebniskasten darunter (`.bk-text`). Alle drei arbeiten mit weisser
   Schrift und hellen Raendern auf Blau. Am 12.09.2026 versuchsweise auf hell
   gestellt: 34 Textstellen wurden unlesbar. Die Mediathek bleibt deshalb bei
   der Folge D D h D h D h D — Kopf und Zahlenband sind EIN dunkler Block. */

/* ══════════════════════ MERKMALE-2026-09-12 ══════════════════════════════
   Torsten, 12.09.2026: „Die Aussagen mit den Haekchen sind unguenstig
   platziert sieht optisch nicht gut aus ausserdem wird dort im Prinzip
   wiederholt was vorher schon steht. Hier brauchen wir eine andere Form
   der Darstellung" — und zum zweiten Block: „hier das gleiche".

   Was falsch war: `.haken` hat `margin: 0` und klebte deshalb ohne jeden
   Abstand am Absatz darueber. Dazu standen dort ganze Saetze, die den Absatz
   noch einmal erzaehlt haben.

   Die neue Form: kurze Stichworte als Pillen in einer Reihe. Das Muster ist
   nicht neu erfunden — es uebernimmt Rundung, Kartenfarbe und Randfarbe der
   bestehenden Formatleiste (`.fw-knopf`), nur ohne Knopf-Verhalten.
   ‼️ Beide Farbwelten sind bedient. Nach dem Einbau ueber ALLE Seiten
      gerechnet: Schwelle 4,5:1, Erwartung 0 Fundstellen. */
/* ‼️ [12.09.2026] Abstand NACH UNTEN ist Pflicht: Torsten „Der Text hängt zu
      dicht an den Pillen". Folgt ein Absatz, klebte er sonst an der Pillenreihe. */
.merkmale {
  list-style: none; margin: 22px 0 20px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.merkmale li {
  font-size: 13.5px; font-weight: 600; line-height: 1.3;
  padding: 7px 14px; border-radius: 999px;
  color: var(--nm-blue);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
}
.dunkel .merkmale li {
  color: rgba(255,255,255,0.92);
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.22);
}
@media (max-width: 560px) {
  .merkmale li { font-size: 13px; padding: 6px 12px; }
}

/* ══════════════════ BANNER-IN-DUNKEL-2026-09-12 ═══════════════════════════
   Torsten, 12.09.2026: „siehst du den fehler" — Foto der Mediathek-Seite.

   Was falsch war: `.banner` bringt IMMER seinen hellen Verlauf mit
   (`--header-bg` → `--card-bg`). Steht er in einem dunklen Abschnitt, faerbt
   die dunkle Farbwelt seine Schrift weiss — weiss auf hellem Grund. Betroffen
   waren vier Seiten: Mediathek, Mitgliedschaft, Tools und Services,
   Kennenlernen. Auf der LMS-Seite war es schon einmal aufgefallen und dort mit
   einem hellen Abschnitt umgangen worden; die Ursache blieb.

   ‼️ WARUM DIE KONTRASTRECHNUNG DAS NICHT GEFUNDEN HAT: Der Banner-Hintergrund
      ist ein VERLAUF. `backgroundColor` meldet dafuer „transparent", und die
      Messung rechnet dann gegen den dunklen Abschnitt dahinter — also gegen den
      falschen Grund. Verlaeufe sind fuer diese Messung unsichtbar. Wer misst,
      prueft solche Stellen zusaetzlich am Foto.

   Die Loesung: Der Banner bleibt hell (die Knoepfe darin sind auf Hell gebaut),
   seine Schrift wird in der dunklen Farbwelt wieder dunkelblau. */
.dunkel .banner .banner-text h3,
.dunkel .banner-weit h2,
.dunkel .banner .banner-text h2 { color: var(--nm-blue); }
.dunkel .banner .banner-text p { color: rgba(0,32,96,0.72); }
.dunkel .banner .section-eyebrow { color: rgba(0,32,96,0.65); }
.dunkel .banner .cta-leise .cta-oder { color: rgba(0,32,96,0.55); }

/* ══════════════════════ EV-FILM-2026-09-12 ═══════════════════════════════
   Torsten baut je einen Film fuer Online, Praesenz und Aufzeichnungen. Alle
   drei stehen in ihrem Abschnitt an derselben Stelle und in derselben Breite —
   vorher war der Kopffilm der Events-Seite ZWEIMAL hintereinander zu sehen
   (einmal im Kopf, einmal gross darunter) und der Abschnitt „Aufzeichnungen"
   hatte gar nichts.
   ‼️ Hoechstbreite 1100 px: Ueber die volle Inhaltsbreite von 1520 px wirkten
      die Filme auf der Seite erschlagend — die Kachelreihen darunter tragen
      den Abschnitt. */
.ev-film { max-width: 1100px; margin: 34px auto 0; }
.ev-film + .grid { margin-top: 34px; }

/* ‼️ [12.09.2026] Das Muster „Kacheln in einer Spalte, Film daneben" wird jetzt
   auch auf der Events-Seite benutzt (Torsten: „das video rechts die beiden
   kacheln links daneben untereinander"). Dort steht ein schlichtes `.grid`
   ohne eigene Zusatzklasse — deshalb hier allgemein. Fuer die beiden
   LMS-Raster aendert die Regel NICHTS: sie stehen schon auf denselben Werten. */
.lms-paar .grid { grid-template-columns: 1fr; gap: 16px; }

/* ‼️ [12.09.2026] Kacheln IM Paar-Muster brauchen ihre feste Mindesthoehe von
   280 px nicht — sie stehen dort untereinander in einer schmalen Spalte und
   wirkten dadurch halbleer (Foto Events-Seite, Abschnitt Aufzeichnungen).
   Dieselbe Ausnahme gibt es schon fuer die Raster `ohne-grenzen` und
   `bezahl-wege`; hier gilt sie NUR fuer die Events-Raster (`ev-kacheln`) — die Kacheln der
   LMS-Seite bleiben unberuehrt. */
.lms-paar .grid.ev-kacheln .tile { min-height: 0; }

/* ‼️ [12.09.2026] Torsten zum Abschnitt Aufzeichnungen: „die 3 kacheln
   schmaler". Nur DORT wird die Spaltenteilung verschoben — der Film bekommt
   mehr Platz, die Kacheln weniger.
   ⛔ Die allgemeine Regel `.lms-paar-links` auf `1fr 1fr` bleibt unangetastet:
      Sie ist Torstens ausdrueckliche Ansage fuer die Filme der LMS-Seite
      („warum so klein?") und steht als Regression-Lock in der Uebergabe. */
#aufzeichnungen .lms-paar-links {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
}
@media (max-width: 900px) {
  #aufzeichnungen .lms-paar-links { grid-template-columns: 1fr; }
}

/* ══════════════════════ PROGRAMM-2026-09-12 ══════════════════════════════
   Das Programm der Málaga Insight Days als ZEITSCHIENE — Torsten: „vielleicht
   vier blöcke nebeneinander als zeitschiene animiert, wenn der platz reicht".

   ‼️ Nichts neu erfunden: Es ist die bestehende Kette (`.kette`) mit vier
      Gliedern. Sie bringt Nummernscheibe, Verbindungslinie und die Animation
      schon mit — Glied fuer Glied herein, danach waechst die Linie. Deshalb
      steht hier nur, was die Punkte INNERHALB eines Tages betrifft.
   ‼️ „wenn der platz reicht": Unter 1100 px stellt die Kette von selbst auf
      zwei Spalten um, unter 700 px auf eine. Vier Tagesspalten mit je fuenf
      Punkten waeren dort nicht mehr lesbar. */
.kette-programm > li { padding-top: 62px; }
/* ‼️ [12.09.2026] Die Zeit steht HINTER dem Tag in derselben Zeile (Torsten:
   „schreibe die uhrzeiten hinter die tage"), nicht mehr als eigene Zeile
   darunter. Deshalb `inline`, kleiner und zurueckgenommen.
   ‼️ GEMESSEN: mit 0,6 Deckkraft lag die Zeitangabe bei 4,2:1 — unter der
   Schwelle. 0,72 ergibt 5,8:1 und bleibt optisch trotzdem leiser. */
.prg-zeit {
  display: inline; white-space: nowrap;
  font-size: 13.5px; font-weight: 600; letter-spacing: 0.2px;
  color: rgba(0,32,96,0.72);
}
.dunkel .prg-zeit { color: rgba(255,255,255,0.65); }
.prg-punkte { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
/* Zweiter Block desselben Tages (Freitag: Vormittag und Nachmittag) —
   die Luecke macht sichtbar, dass dort ein Schnitt ist. */
.prg-punkte.weiter { margin-top: 14px; }
/* ‼️ [12.09.2026] Torsten: „und vor Expert Talk KI Mittagspause". Die Pause ist
   KEIN Programmpunkt — sie steht als leise Trennzeile zwischen Vormittag und
   Nachmittag, mit feiner Linie statt fetter Ueberschrift. */
.prg-pause {
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.3px;
  /* ‼️ GEMESSEN: 0,55 ergab 3,63:1 — unter der Schwelle. 0,72 wie bei der
     Zeitangabe. */
  color: rgba(0,32,96,0.72); margin: 20px 0 0;
}
.prg-pause::after {
  content: ''; flex: 1; height: 1px; background: rgba(0,32,96,0.16);
}
.dunkel .prg-pause { color: rgba(255,255,255,0.6); }
.dunkel .prg-pause::after { background: rgba(255,255,255,0.2); }
.prg-punkte > li { display: block; }
.prg-punkte b {
  display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.1px;
  color: var(--nm-blue); margin-bottom: 3px;
}
.prg-punkte span {
  display: block; font-size: 14px; line-height: 1.5; color: rgba(0,32,96,0.72);
}
.dunkel .prg-punkte b { color: #fff; }
.dunkel .prg-punkte span { color: rgba(255,255,255,0.78); }
@media (max-width: 700px) {
  .prg-punkte span { font-size: 14.5px; }
}

/* ‼️ [12.09.2026] Der Film der Insight Days laeuft ueber die volle
   Inhaltsbreite statt der sonstigen 1100 px (Torsten). Zusammen mit dem
   Verhaeltnis 32:9 aus der Bauvorschrift ergibt das ein breites Band unter der
   Zeitschiene. Die uebrigen Events-Filme bleiben bei 1100 px. */
/* ‼️ [12.09.2026] Das Band steht jetzt VOR der Zeitschiene, direkt unter dem
   Titelbereich (Torsten). Deshalb Abstand nach unten statt nur nach oben. */
.ev-film.ev-film-breit { max-width: 1600px; padding: 0 40px; margin-bottom: 40px; }
@media (max-width: 767px) {
  .ev-film.ev-film-breit { padding: 0 20px; }
}

/* ‼️ [12.09.2026] Vier Kacheln je Reihe — Torsten fuer die acht Bausteine auf
   der Mitgliedschaftsseite: „aus den acht kacheln müssen wir 2 reihen mit
   jeweils 4 machen". Damit stehen sie in zwei sauberen Reihen statt drei plus
   drei plus zwei.
   Die Stufen darunter entsprechen dem Grundraster: ab 1279 px zwei Spalten,
   ab 899 px eine. */
.grid.grid-vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1279px) { .grid.grid-vier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 899px)  { .grid.grid-vier { grid-template-columns: 1fr; } }

/* ‼️ [12.09.2026] Die beiden Absaetze „Alles inklusive" und „Alles ist ein Kann"
   stehen jetzt im Preis-Abschnitt (Torsten: „das muss bei preis mit rein").
   Dort ist die Farbwelt dunkel — deshalb die Gegenregeln. Abstand nach oben,
   damit sie sich vom Preisblock loesen. */
.preis-doppel { margin-top: 34px; }
.dunkel .preis-doppel p { color: rgba(255,255,255,0.82); }
.dunkel .preis-doppel b { color: #fff; }

/* ══════════════════ CREDITS-2026-09-13 ═══════════════════════════════════
   Das Inklusivguthaben im Preis-Abschnitt. Die Kennzahlenleiste ist das
   vorhandene Bauteil `.buehne-fakten.drei` von der Startseite — nur der
   Abstand nach oben ist hier kleiner, weil sie nicht eine ganze Buehne
   abschliesst, sondern in einem Block sitzt.
   ‼️ Farbwelt ist dunkel. Jede Farbe hier ist eine Gegenregel und muss
      bleiben — sonst steht Dunkelblau auf Dunkelblau. */
.credits-block {
  margin-top: 40px; padding-top: 34px;
  border-top: 1px solid rgba(255,255,255,0.18);
}
.credits-block h3 { margin: 0 0 14px; font-size: 21px; letter-spacing: -0.3px; }
.credits-block p { max-width: 860px; font-size: 16.5px; line-height: 1.62; margin: 0; }
.dunkel .credits-block p { color: rgba(255,255,255,0.82); }
/* ‼️ Die beiden Absaetze stehen nebeneinander (Torsten, 13.09.2026). Die
   Breitenbegrenzung von oben muss hier weg, sonst bricht die rechte Spalte
   viel zu frueh um. */
.credits-doppel p { max-width: none; }
.dunkel .credits-doppel p { color: rgba(255,255,255,0.82); }
.credits-vorsatz { margin-top: 26px !important; }
.dunkel .credits-vorsatz { color: rgba(255,255,255,0.7) !important; }
.credits-fakten { margin-top: 18px; padding-top: 0; border-top: 0; }

/* ‼️ [13.09.2026] Torsten: „drei Haken unter der ersten, drei Haken unter der
   zweiten und zwei Haken." Also DREI Spalten, und zwar SPALTENWEISE gefuellt
   (`grid-auto-flow: column` + drei feste Zeilen) — mit der zeilenweisen
   Grundfuellung stuenden die Punkte quer durcheinander.
   ‼️ Nur `.preis-haken`. `.haken-breit` allein gehoert dem LMS und bleibt
      zweispaltig. Auch die Breitengrenze von 900 px muss hier weg.
   ‼️ Die Spalten muessen BUENDIG unter denen der Kennzahlenleiste stehen.
      Die hat kein Spaltenabstand, sondern 26 px Polsterung je Zelle (ausser
      links). Deshalb hier column-gap 0 und dieselben 26 px am Listenpunkt —
      mit Spaltenabstand sass jede Spalte um 26 px daneben. */
.preis-haken {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  column-gap: 0;
  max-width: none;
  /* ‼️ [13.09.2026] Torsten: „klebt viel zu dicht … es sieht aus als würden
     diese Häkchen dazugehören." Mit 30 px las sich die Liste wie eine vierte
     Zeile der Kennzahlenleiste. Jetzt echter Abstand UND eine Schlusslinie —
     dieselbe Linie, die den Credits-Block oben eroeffnet. */
  margin-top: 54px !important;
  padding-top: 34px;
  border-top: 1px solid rgba(255,255,255,0.18);
}
.preis-haken li { padding-left: 56px; }            /* 26 Polsterung + 30 Symbol */
.preis-haken li::before { left: 26px; }
.preis-haken li::after { left: 31px; }
/* Die erste Spalte steht am Seitenrand und bekommt die Polsterung nicht. */
.preis-haken li:nth-child(-n+3) { padding-left: 30px; }
.preis-haken li:nth-child(-n+3)::before { left: 0; }
.preis-haken li:nth-child(-n+3)::after { left: 5px; }
@media (max-width: 1100px) {
  .preis-haken {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: none; grid-auto-flow: row; column-gap: 28px;
  }
  /* Zurueck auf den Normalfall — die Buendigkeit gibt es nur dreispaltig. */
  .preis-haken li, .preis-haken li:nth-child(-n+3) { padding-left: 30px; }
  .preis-haken li::before, .preis-haken li:nth-child(-n+3)::before { left: 0; }
  .preis-haken li::after, .preis-haken li:nth-child(-n+3)::after { left: 5px; }
}
@media (max-width: 767px) { .preis-haken { grid-template-columns: 1fr; } }
@media (max-width: 899px) {
  .credits-block { margin-top: 30px; padding-top: 26px; }
  .credits-fakten { margin-top: 20px; }
}

/* ══════════════════ ANTRAG-VORSCHAU-2026-09-12 ═══════════════════════════
   Torsten: „der antrag sollte hier nur in klein zu sehen sein und daneben der
   button." Vorher stand das komplette Formular in Originalgroesse auf der
   Seite — ueber 1500 px Attrappe, die nichts tut.

   Links eine verkleinerte Vorschau (echtes Markup, nur skaliert — bleibt
   deshalb gestochen scharf), rechts der Weg zum echten Formular.
   ‼️ Die Vorschau ist nicht bedienbar: `pointer-events: none` plus die schon
      vorhandenen `disabled`-Felder. Niemand soll dort tippen. */
.antrag-vorschau {
  max-width: 1600px; margin: 40px auto 0; padding: 0 40px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  gap: 40px; align-items: center;
}
.antrag-mini {
  position: relative; height: 430px; overflow: hidden;
  border: 1px solid var(--card-border); border-radius: 18px;
  background: var(--card-bg); pointer-events: none;
}
.antrag-mini-inhalt {
  width: 1580px; transform: scale(0.4); transform-origin: top left;
  padding: 26px 30px;
}
.antrag-mini-schleier {
  position: absolute; left: 0; right: 0; bottom: 0; height: 150px;
  background: linear-gradient(to bottom, rgba(224,233,246,0), var(--card-bg));
}
.antrag-weg h3 { font-size: 22px; font-weight: 600; margin: 0 0 12px; letter-spacing: -0.3px; color: var(--nm-blue); }
.antrag-weg p { font-size: 15.5px; line-height: 1.6; color: rgba(0,32,96,0.75); margin: 0 0 22px; }
@media (max-width: 900px) {
  .antrag-vorschau { grid-template-columns: 1fr; gap: 24px; padding: 0 20px; }
  .antrag-mini { height: 300px; }
}

/* ‼️ [12.09.2026] Der Knopf steht jetzt IM zweiten Kettenglied des Aufnahmewegs
   (Torsten: „lass das alles weg und baue den button unter schritt 2").
   Die nachgebaute Formular-Vorschau ist damit von der Seite verschwunden —
   ihr Markup steht weiter in der Versionsverwaltung und in der Sicherung
   `bausteine/mitgliedschaft.html.backup-*`. */
/* ‼️ In der zentrierten Kette stehen auch die Knoepfe mittig — sonst haengen
   sie links, waehrend Nummer und Text zentriert sind (Foto 12.09.). */
/* ‼️ GEMESSEN: Der Knopf im zweiten Glied sass 14 px hoeher als der im ersten.
   Ursache: `.kette p { margin: 0 }` ist spezifischer als `.kette-knopf` und
   hat den Abstand weggenommen — der Knopf dort steckt in einem Absatz.
   Deshalb zwei Klassen im Selektor. */
.kette .kette-knopf { margin: 14px 0 0; }
.kette-mitte .kette-knopf { display: flex; justify-content: center; }
.kette-mitte .kette-knopf-paar .cta-paar { justify-items: center; }

/* ‼️ [12.09.2026] Die beiden Knoepfe „Webinar" und „Demotermin" stehen auf der
   Mitgliedschaftsseite IM ersten Kettenglied (Torsten: „lass auf dieser seite
   diesen block auch weg und baue die beiden button unter schritt 1"). Das
   Schlussbanner dieser Seite ist dafuer entfallen.
   ‼️ In einer Kettenspalte ist nur rund ein Viertel der Seitenbreite Platz —
      die beiden Knoepfe stehen deshalb UNTEREINANDER, nicht nebeneinander. */
.kette-knopf-paar .cta-paar { grid-template-columns: 1fr; gap: 10px; max-width: none; }
.kette-knopf-paar .btn { font-size: 14px; padding: 11px 16px; }

/* ‼️ [12.09.2026] Die drei Knoepfe im Aufnahmeweg sollen gleich breit sein und
   auf gleicher Hoehe beginnen (Torsten). Zwei Dinge dafuer:
   1. feste Breite fuer alle drei — sonst richtet sich jeder nach seiner
      Beschriftung;
   2. die Textabsaetze der vier Glieder bekommen dieselbe Mindesthoehe, sonst
      faengt der Knopf im zweiten Glied hoeher an als im ersten. Der Wert ist
      an der laengsten der vier Beschreibungen gemessen. */
.antrag-kette > li > p:not(.kette-knopf) { min-height: 7.8em; }
.antrag-kette .btn { width: 260px; justify-content: center; text-align: center; }
.antrag-kette .kette-knopf-paar .cta-paar { grid-template-columns: 260px; justify-content: center; }
@media (max-width: 1100px) {
  .antrag-kette > li > p:not(.kette-knopf) { min-height: 0; }
  .antrag-kette .btn { width: 100%; max-width: 320px; }
  .antrag-kette .kette-knopf-paar .cta-paar { grid-template-columns: 1fr; max-width: 320px; }
}

/* ══════════════════ ANTRAGSFENSTER-2026-09-12 ════════════════════════════
   Der Antrag oeffnet sich als Fenster und wird wirklich abgeschickt
   (Torstens Freigabe vom 12.09.2026). Bauart wie Lupe und Wegfenster.
   ‼️ Der Honigtopf muss im Quelltext stehen, darf aber niemand sehen —
      `display:none` genuegt, Roboter lesen das Markup, nicht die Anzeige. */
.modal-antrag-card {
  max-width: 900px; width: 100%; max-height: 88vh; overflow-y: auto;
  padding: 28px 30px 30px; text-align: left;
}
/* !! [12.09.2026] Torsten wollte den Titel des Antragsfensters groesser.
   Die 17 px stammen aus den kleinen Hinweisfenstern; dieses hier ist ein
   ganzes Formular und braucht einen Titel in Abschnittsgroesse. */
.modal-antrag-card h2 { margin-bottom: 18px; font-size: 26px; letter-spacing: -0.4px; }
@media (max-width: 767px) { .modal-antrag-card h2 { font-size: 21px; } }
.honigtopf { display: none; }
.antrag-senden { margin-top: 22px; display: grid; gap: 12px; justify-items: start; }
.antrag-hinweis-klein { font-size: 13px; line-height: 1.5; color: rgba(0,32,96,0.65); margin: 0; max-width: 640px; }
.antrag-danke { padding: 10px 0 6px; }
.antrag-danke h3 { font-size: 22px; font-weight: 600; margin: 0 0 12px; color: var(--nm-blue); }
.antrag-danke p { font-size: 15.5px; line-height: 1.6; color: rgba(0,32,96,0.78); margin: 0 0 22px; max-width: 640px; }

/* ═══════════════ RECHTSTEXTE (AGB) — 13.09.2026 ═══════════════════════════
   Torsten: „baue die AGB in gleichem Stil, also Blocksatz, Schriftgröße,
   Schriftfarbe usw. bis hin zum PDF-Download-Knopf."
   Vorbild sind die bestehenden Seiten Datenschutz und Haftungshinweise auf der
   Dashboard-Adresse. Von dort übernommen, Wert für Wert:
     · Karte auf hellem Grund, Rundung 18 px, Polsterung 32/36
     · Fließtext 12 px im BLOCKSATZ mit Silbentrennung — Torstens Vorgabe vom
       06.09.2026 („schriftgröße 9 und mache blocksatz"): 9 Punkt sind 12 Pixel.
       Ohne Silbentrennung reisst der Blocksatz Löcher.
     · Zwischentitel 14 px, Gewicht 500
     · Knopf dunkelblau, im Überfahren rot
   NICHT übernommen: der eigene Seitenkopf und die eigene Fusszeile von dort —
   die stellt hier die Vorlage der Homepage. */
/* ‼️ [13.09.2026] LINKSBÜNDIG zur Überschrift, nicht mittig (Torsten: „die
   Überschrift ist nach links versetzt"). Gemessen bei 1800 px Fensterbreite:
   Der Seitenkopf beginnt bei 140 px, die mittig gestellte Karte erst bei
   450 px — 310 px Versatz. Die Karte folgt jetzt der Kante des Abschnitts;
   die Lesebreite von 900 px bleibt. */
/* ‼️ [13.09.2026] Der Seitenkopf ist normalerweise ein Raster aus zwei Spalten —
   links Text, rechts Bild. Auf den Rechtsseiten gibt es kein Bild, der
   Einleitungssatz brach deshalb schon nach der halben Breite um (gemessen:
   473 statt 944 px). Torsten: „Achte darauf, dass der Satz unter der Überschrift
   über die Seitenbreite geht." Hier also EINSPALTIG. */
.seiten-kopf.rechts-kopf .innen { display: block; }
.seiten-kopf.rechts-kopf .seiten-unter { max-width: none; }
.rechtstext { max-width: 900px; margin: 0; }
.rechts-stand { font-size: 12.5px; color: rgba(0,32,96,0.6); margin: 0 0 20px; }
.rechts-blatt {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  padding: 32px 36px;
}
.rechts-blatt h2 {
  font-size: 14px; font-weight: 500; color: var(--nm-blue);
  margin: 26px 0 8px; letter-spacing: 0;
}
.rechts-blatt h2:first-child { margin-top: 0; }
.rechts-blatt h3 { font-size: 13px; font-weight: 600; margin: 16px 0 6px; }
.rechts-blatt p {
  font-size: 12px; line-height: 1.7; margin: 0 0 12px;
  text-align: justify; hyphens: auto; -webkit-hyphens: auto;
  color: rgba(0,32,96,0.88);
}
/* Die Absatznummer bleibt am Zeilenanfang stehen und wird nicht mitgetrennt. */
.rechts-nr { font-weight: 600; color: var(--nm-blue); hyphens: none; }
.rechts-blatt ul {
  margin: 0 0 12px; padding-left: 20px;
  font-size: 12px; line-height: 1.7; color: rgba(0,32,96,0.88);
}
.rechts-blatt li { margin-bottom: 4px; }
.rechts-blatt b { font-weight: 600; color: var(--nm-blue); }
.rechts-tabelle-rahmen { overflow-x: auto; margin: 0 0 14px; }
.rechts-tabelle {
  border-collapse: collapse; width: 100%; font-size: 12px; min-width: 380px;
}
.rechts-tabelle th, .rechts-tabelle td {
  text-align: left; padding: 8px 12px;
  border-bottom: 1px solid var(--card-border);
}
.rechts-tabelle th { font-weight: 600; color: var(--nm-blue); }
.rechts-tabelle td { font-variant-numeric: tabular-nums; }
.rechts-tabelle tr:last-child td { border-bottom: none; }
.rechts-pdf { margin-top: 26px; }
.rechts-pdf svg {
  width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
@media (max-width: 620px) {
  .rechts-blatt { padding: 22px 18px; }
}

/* ═══════════════ HANDYANSICHT — Nacharbeit (12.09.2026) ═══════════════════
   Gemessen bei 390 px Breite ueber alle 13 Seiten. Keine Seite ragte seitlich
   hinaus; die Befunde betrafen Tippziele und Kleinschrift. */

@media (max-width: 620px) {
  /* Gemessen: „Jetzt zum kostenlosen Webinar anmelden" lief 4 px ueber den
     Knopfrand. Die Regel gab es fuer `.cta-paar` schon, fuer die Bildkarten
     nicht — beim Verlaengern der Beschriftung uebersehen. */
  .cta-karte .btn { white-space: normal; min-width: 0; }

  /* ── Formatleiste der Uebungen: Symbole statt Beschriftung ──────────────
     Torsten am 13.09.2026: „statt der Pillen Erklärvideo, Videopodcast,
     Präsentation und Dokumentation besser Icons verwenden, damit es besser
     hineinpasst und sich auch von den übergeordneten Pillen abhebt — aber nur
     in der mobilen Version." Gilt fuer Modul A (Erklaervideo, Video-Podcast,
     Praesentation, Dokument) und Modul B (Kurzvideo, Podcast, Dokument).
     ‼️ Die vier Symbole sind DIESELBEN wie in der Liste „Was drin ist" auf
     derselben Seite — nichts Neues erfunden.
     Der Text bleibt im Quelltext stehen (`font-size: 0`), damit Vorlesegeraete
     ihn weiter ansagen; das Symbol liegt als Maske in `::before` und nimmt
     ueber `currentColor` beide Zustaende mit (hell/aktiv, hell/dunkel). */
  .fw-leiste { gap: 8px; }
  .fw-knopf {
    font-size: 0; line-height: 0; padding: 0;
    width: 42px; height: 42px; border-radius: 13px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .fw-knopf::before {
    content: ''; width: 21px; height: 21px; background-color: currentColor;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: 21px 21px; mask-size: 21px 21px;
  }
  .fw-knopf[data-fw="video"]::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5'/%3E%3Crect x='2' y='6' width='14' height='12' rx='2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5'/%3E%3Crect x='2' y='6' width='14' height='12' rx='2'/%3E%3C/svg%3E");
  }
  .fw-knopf[data-fw="podcast"]::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3'/%3E%3C/svg%3E");
  }
  .fw-knopf[data-fw="folien"]::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h20'/%3E%3Cpath d='M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3'/%3E%3Cpath d='m7 21 5-5 5 5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h20'/%3E%3Cpath d='M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3'/%3E%3Cpath d='m7 21 5-5 5 5'/%3E%3C/svg%3E");
  }
  .fw-knopf[data-fw="dokument"]::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E");
  }
}

@media (max-width: 767px) {
  /* ── Tippziele ──────────────────────────────────────────────────────────
     Gemessen: 22 Verweise je Seite mit 16 px Hoehe (Fusszeile, Rechtszeile,
     Zurueck-Verweis) und die Punkte der Kollektionen mit 11 px. Unter einem
     Daumen ist das zu wenig. Die Flaeche waechst, das Aussehen bleibt:
     die Polsterung ersetzt den Abstand, der vorher zwischen den Zeilen lag. */
  .fuss-gruppe ul { gap: 0; }
  .fuss-gruppe a { display: inline-block; padding: 9px 0; }
  .footer-unten a { display: inline-block; padding: 8px 0; }
  .seiten-kopf .zurueck,
  .leistung-kopf .zurueck { padding: 8px 0; margin-bottom: 12px; }

  /* Der Punkt bleibt 11 px gross — angefasst wird ein Feld von 34 px.
     Deshalb sitzt der sichtbare Punkt in `::after`, nicht im Knopf selbst. */
  .kar-punkte { gap: 0; }
  .kar-punkt {
    width: 34px; height: 34px; background: transparent; border-radius: 50%;
    position: relative; transform: none;
  }
  .kar-punkt::after {
    content: ''; position: absolute; inset: 11.5px; border-radius: 50%;
    background: rgba(0,32,96,0.28); transition: background .25s, transform .25s;
  }
  .kar-punkt:hover { background: transparent; }
  .kar-punkt:hover::after { background: rgba(0,32,96,0.5); }
  .kar-punkt.aktiv { background: transparent; transform: none; }
  .kar-punkt.aktiv::after { background: var(--nm-red); transform: scale(1.4); }
  .dunkel .kar-punkt { background: transparent; }
  .dunkel .kar-punkt::after { background: rgba(255,255,255,0.35); }
  .dunkel .kar-punkt.aktiv::after { background: var(--nm-red); }

  /* ── Kleinschrift ───────────────────────────────────────────────────────
     Inhaltszeilen unter 12,5 px sind am Telefon schwer zu lesen. Betrifft die
     Kennzeichnung der Bausteine und die Art der Unterlagen. Die 11 px in den
     nachgebauten Oberflaechen (`mx-kopf`, `kar-nr`) bleiben — sie sind Teil
     des Bildes, kein Lesetext. */
  /* ‼️ [13.09.2026] Die lange Beschriftung „Jetzt zum kostenlosen Webinar
     anmelden" brach am Telefon in zwei Zeilen um (Torsten). Kleinere Schrift
     und engere Polsterung halten sie einzeilig — gemessen bei 375 px. */
  /* ‼️ [13.09.2026] Das Raster des Baukastens passte am Telefon nicht ins Bild —
     es stand auf 820 px Mindestbreite und musste seitlich geschoben werden
     (Torsten: „hier muss ich nach rechts scrollen um die Matrix zu sehen").
     Jetzt fuellt es die Breite: schmalere Themenspalte, engere Abstaende,
     kleinere Zellen. Die Spaltentitel brechen um — das ist gewollt, sie tragen
     die Aussage. */
  .bk-zwei .mx {
    min-width: 0;
    grid-template-columns: minmax(58px, 0.85fr) repeat(6, minmax(0, 1fr));
    gap: 4px;
  }
  .bk-zwei .mx-ecke, .bk-zwei .mx-kopf { font-size: 10px; padding-bottom: 6px; line-height: 1.25; }
  /* Kurzfassung der Spaltentitel — die lange laeuft am Telefon ineinander. */
  .mx-lang { display: none; }
  .mx-kurz { display: inline; }
  .bk-zwei .mx-thema { font-size: 11px; padding-right: 5px; }
  .bk-zwei .mx-zelle { height: 34px; }
  .bk-zwei .mx-gewaehlt { font-size: 12px; }

  .cta-leise .cta-paar .btn { font-size: 12px; padding: 12px 10px; gap: 7px; }
  .cta-leise .cta-paar .btn .btn-sym { width: 20px; height: 20px; }

  .ba-marke { font-size: 12.5px; }
  .pos-dok .pos-dok-art { font-size: 12.5px; }

  /* ── Zeitschiene der Insight Days ───────────────────────────────────────
     Sie erbt die Kettenform. Deren Polsterung nach oben macht am Rechner
     Platz fuer die waagerechte Linie — am Telefon stehen die Glieder
     untereinander, und der Platz wurde zur leeren Zeile ueber jedem Tag.
     Gemessen am 12.09.2026 in 375 px Breite. */
  .kette-programm > li { padding-top: 0; padding-left: 62px; }

  /* ── Der Vergleich ──────────────────────────────────────────────────────
     Am Rechner steht die linke Karte gespiegelt — beide Listen laufen auf die
     Mitte zu, das ist der ganze Witz der Gegenueberstellung. Am Telefon stehen
     die Karten UNTEREINANDER; die Spiegelung hat dann keinen Bezugspunkt mehr
     und liest sich nur noch ungewohnt. Deshalb hier beide linksbuendig. */
  .vergleich-karte.ohne { text-align: left; }
  .vergleich-karte.ohne li { padding-left: 17px; padding-right: 0; }
  .vergleich-karte.ohne li::before { left: 0; right: auto; }

  /* ── Menueknopf nach rechts (Torsten, 12.09.2026) ───────────────────────
     Am Telefon greift der Daumen rechts. Die Reihenfolge dreht sich nur in
     der Anzeige — im Quelltext bleibt der Knopf vorn, damit die Tastatur- und
     Vorlesereihenfolge stimmt. */
  .head-rechts { display: flex; align-items: center; }
  .nav-burger { order: 3; margin-left: 6px; }
  .btn-head   { order: 1; }
  .btn-login  { order: 2; }

  /* ── Kompakter (Torsten, 12.09.2026: „sollte auf der mobilen Version alles
     etwas kompakter sein") ────────────────────────────────────────────────
     Gemessen am Telefon: die Abschnitte trugen 44/56 px Polsterung, die
     Fusszeile liess je Spalte drei Zeilen Luft stehen. */
  .section { padding: 32px 20px 40px; }
  .section-head { margin-bottom: 20px; }
  .grid { gap: 16px; }
  .tile { padding: 20px 18px 18px; }

  /* ── Fusszeile am Telefon: eine Spalte zum Aufklappen ───────────────────
     Torsten am 13.09.2026: „die Abstände zwischen den einzelnen Punkten sind
     zu groß. Es wird auch nicht deutlich, was Kategorie-Überschriften sind und
     was dann Inhalte sind." Gemessen bei 430 px: zwei Spalten von je 184 px —
     zu schmal fuer Titel wie „KI-gestützte Tools für Deine Tätigkeit". Drei
     Titel brachen um, die Bloecke wurden unterschiedlich hoch, dazwischen
     standen Loecher. 780 px Hoehe fuer 18 Verweise.
     Jetzt: EINE Spalte, jede Kategorie eine Zeile zum Antippen (das Skript in
     `_navi.html` klappt sie zu), Trennlinien statt Abstaenden, und der Titel
     ist GROESSER und dunkler als seine Eintraege — vorher war er kleiner und
     blasser als das, was er ueberschreibt. */
  .fuss-gruppe { display: block; }
  .footer-nav { grid-template-columns: 1fr; grid-template-rows: none; gap: 0; }
  .fuss-gruppe { border-top: 1px solid var(--card-border); }
  .fuss-gruppe:first-child { border-top: none; }
  .fuss-gruppe > summary {
    pointer-events: auto; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 13px 2px;
  }
  .fuss-gruppe > summary svg {
    display: block; flex: 0 0 auto; width: 14px; height: 14px;
    fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round;
    color: rgba(0,32,96,0.5); transition: transform .2s;
  }
  .fuss-gruppe[open] > summary svg { transform: rotate(180deg); }
  .fuss-gruppe h4 {
    min-height: 0; margin: 0; font-size: 14.5px; letter-spacing: 0;
    color: rgba(0,32,96,0.92); line-height: 1.3;
  }
  /* `overflow: hidden` gehoert zur Auf-/Zubewegung: waehrend das Skript die
     Hoehe fuehrt, duerfen die Eintraege nicht ueber den Rand hinausstehen. */
  .fuss-gruppe ul { padding: 0 0 10px 2px; overflow: hidden; }
  .fuss-gruppe a { font-size: 14px; padding: 7px 0; color: rgba(0,32,96,0.72); }
  footer { padding: 26px 20px 22px; }
  .footer-unten { margin-top: 18px; padding-top: 14px; }
}