/* ============================================================
   BECRO Trading — styles.css
   ============================================================

   Das einzige Stylesheet der Seite. Vorbild: die Produktseite des
   Bloomberg Terminal. Schwarzer Kopf und Hero, weisser Koerper, flache
   Flaechen, und die Produkt-Screens sind das Bildmotiv. Keine Seite hat
   einen eigenen <style>-Block.

   Farbregeln, verbindlich:
     Schwarz #000   Kopf, Hero, CTA-Kasten, Member+-Karte und die
                    ganze Startseite (body.home) bis zum Fuss
     Weiss #fff     Koerper der Unterseiten und der Fuss auf allen Seiten
     Blau #1A5CFF   flach, NUR fuer Knoepfe, Links, Kicker und Zahlen
   Keine farbigen Flaechen hinter Screenshots: Screens stehen in einem
   dunklen Rahmen auf Weiss. Kein Glow, keine farbigen Schatten, keine
   Verlaufs-Knoepfe, keine Verlaeufe. Die Skyline im Slider ist nur
   unscharf und abgedunkelt.

   Cache-Busting: der ?v=N-Parameter am <link> muss bei jeder Aenderung
   hochgezaehlt werden, auf allen Seiten.
   ============================================================ */


/* ── 1. Schrift ───────────────────────────────────────────────
   Avenir Next wie bei bloomberg.com/professional. Gewichte: Headlines 600,
   Navigation und Knoepfe 500, Fliesstext 400; Zeichenabstand normal.

   Avenir Next ist lizenziert. Bis die Dateien in /fonts liegen, nur
   local(): auf Mac und iOS ist sie installiert (auch als LT Pro) und wird
   ohne Download benutzt. Verweise auf eigene Dateien gibt es erst, wenn
   die Lizenz da ist (siehe fonts/README.md).
   Sonst greift Nunito Sans (OFL), selbst gehostet als variable Schrift
   (400-700) in zwei Teilen: latin wird im <head> per preload geladen,
   latin-ext nur bei Bedarf. Kein Google-Server beim Seitenaufruf. */

@font-face { font-family: "Avenir Next"; font-weight: 400; font-style: normal; font-display: swap;
  src: local("Avenir Next Regular"), local("AvenirNext-Regular"), local("Avenir Next LT Pro Regular"), local("AvenirNextLTPro-Regular"); }
@font-face { font-family: "Avenir Next"; font-weight: 500; font-style: normal; font-display: swap;
  src: local("Avenir Next Medium"), local("AvenirNext-Medium"), local("Avenir Next LT Pro Medium"), local("AvenirNextLTPro-Medium"); }
@font-face { font-family: "Avenir Next"; font-weight: 600; font-style: normal; font-display: swap;
  src: local("Avenir Next Demi Bold"), local("AvenirNext-DemiBold"), local("Avenir Next LT Pro Demi"), local("AvenirNextLTPro-Demi"); }

@font-face { font-family: "Nunito Sans"; font-weight: 400 700; font-style: normal; font-display: swap;
  src: url("fonts/NunitoSans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito Sans"; font-weight: 400 700; font-style: normal; font-display: swap;
  src: url("fonts/NunitoSans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }


/* ── 2. Tokens ───────────────────────────────────────────── */

:root {
  --c-black:   #000000;
  --c-white:   #FFFFFF;
  --c-blue:    #1A5CFF;
  --c-blue-dk: #0B3FD6;
  --c-text:    #111111;
  --c-muted:   #6B7280;
  --c-tile:    #F4F4F6;
  --c-line:    #E5E7EB;
  --c-on-dark: rgba(255, 255, 255, 0.72);
  --c-on-dark-hi: #E8E8E8;
  --c-line-dk: rgba(255, 255, 255, 0.16);
  --c-graphite:  #2C2C30;
  --c-blue-lt:   #6B96FF;
  --c-mega-line: rgba(255, 255, 255, 0.14);
  --c-mega-text: #A1A1AA;

  --font: "Avenir Next", "Avenir Next LT Pro", "Nunito Sans", sans-serif;

  --max: 1280px;
  --pad: 32px;
  --sec: 120px;
  --r: 4px;
  --r-card: 8px;
  --r-frame: 12px;
  --r-lg: 16px;
  --hd-h: 72px;

}


/* ── 3. Reset ────────────────────────────────────────────── */

*, *::after, *::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


/* ── 4. Basis ────────────────────────────────────────────── */

/* Sprungmarken landen 24px unter dem Kopf (plus Unternavigation bzw.
   Anker-Leiste, siehe unten). */
html { scroll-padding-top: calc(var(--hd-h) + 24px); }

body {
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.15;
  color: inherit;
  overflow-wrap: break-word;
}
/* Lange deutsche Komposita („Datenschutzerklaerung") sprengen auf dem
   Handy die Spalte. Silbentrennung nur dort, wo das passiert — im Hero
   saehe „Marktteil-nehmer" nach Fehler aus. */
.legal-hero h1, .legal-body h2 { hyphens: auto; }
h1 { font-size: 56px; }
h2 { font-size: 40px; }
h3 { font-size: 22px; line-height: 1.2; }
/* Avenir ist bis 600 angelegt; 700 waere kuenstlich verfettet. */
b, strong { font-weight: 600; }
a { color: var(--c-blue); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 3px; }

.container {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--pad));
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* Weisse Sektionen stossen ohne doppelten Abstand aneinander: die
   zweite verzichtet auf ihren oberen. So bleibt es ueberall bei 120px.
   */
.sec { padding-block: var(--sec); }
.sec + .sec { padding-top: 0; }
/* Trenner zwischen zwei Abschnitten, 1px ueber die Containerbreite. */
.rule { height: 0; margin: 0; border: 0; border-top: 1px solid var(--c-line); }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}


/* ── 5. Typo-Helfer ───────────────────────────────────────────
   Der Kicker wie bei bloomberg.com/professional, auf allen Seiten gleich:
   Versalien, fett, 0.08em gesperrt, klein, BECRO-Blau. */

.kicker {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-blue);
  margin-bottom: 16px;
}
.lead { font-size: 20px; line-height: 1.6; }
.muted { color: var(--c-muted); }

.sec-head { max-width: 760px; margin-bottom: 56px; }
.sec-head h2 + p { margin-top: 16px; }
.sec-head.center { margin-inline: auto; text-align: center; }

.text-link { font-weight: 600; }
/* Pfeile in Links ruecken beim Hover 4px nach rechts. */
.arrow { display: inline-block; margin-left: 6px; transition: transform .2s ease; }
a:hover .arrow { transform: translateX(4px); }


/* ── 6. Knoepfe ───────────────────────────────────────────────
   Flach, rechteckig, 4px Radius. Hover dunkelt nur ab. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 52px;
  padding: 0 24px;
  border: 1px solid var(--c-blue);
  border-radius: var(--r);
  background: var(--c-blue);
  color: var(--c-white);
  font-family: inherit;
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn:hover { background: var(--c-blue-dk); border-color: var(--c-blue-dk); color: var(--c-white); text-decoration: none; }
.btn-sm { height: 40px; padding: 0 18px; font-size: 15px; }

/* Kontur: erbt die Textfarbe der Umgebung — dunkel auf Weiss, weiss auf
   Schwarz, ohne eigene Variante pro Untergrund. */
.btn-ghost, .btn-outline {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}
.btn-ghost:hover, .btn-outline:hover { background: var(--c-text); border-color: var(--c-text); color: var(--c-white); }
:is(.on-dark, .subhero, .dark-box, .cta-box) :is(.btn-ghost, .btn-outline):hover { background: var(--c-white); border-color: var(--c-white); color: var(--c-black); }

.btn-group { display: flex; flex-wrap: wrap; gap: 16px; }

/* Runder weisser Pfeil im CTA-Kasten. Die Beschriftung steht daneben im
   selben Link — ein Pfeil allein sagt nicht, wohin es geht. */
.go {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  color: var(--c-white);
  font-weight: 500;
}
.go:hover { text-decoration: none; color: var(--c-white); }
.go-ring {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--c-white);
  color: var(--c-black);
  flex-shrink: 0;
  transition: background-color .15s, color .15s;
}
.go-ring svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.go:hover .go-ring { background: var(--c-blue); color: var(--c-white); }


/* ── 7. Kopf ──────────────────────────────────────────────────
   Bloomberg-Logik. Oben eine schmale Leiste (32px) mit Schnellzugriffen,
   rechtsbuendig; sie scrollt mit weg. Darunter der Kopf (72px, klebt):
   Logo, vier Bereiche mit Mega-Menue, rechts Portal und Knopf. Der aktive
   Bereich (aus der aktuellen Seite, site.js) bekommt die 3px-Linie unten.

   Mega-Menue nach bloomberg.com/professional (Products): ein Panel ueber
   die volle Breite direkt unter dem Kopf, --c-graphite; der offene Punkt hat
   dieselbe Flaeche, Tab und Panel wirken verbunden. Die Seite dahinter
   bleibt sichtbar. Spalten mit duennen senkrechten Linien; jede Zeile Text
   links, duenner Pfeil rechts, feine Linie darunter. Inaktiv grau, aktiv
   weiss mit blauer Unterlinie. Produkte hat drei Spalten (Angebote,
   Unterpunkte des aktiven Angebots, feste Links), die anderen zwei
   (Eintraege, Beschreibung des aktiven). Oeffnen per Hover (Desktop) und
   Klick, 150ms Fade. Auf dem Desktop ist .hd-panel `display: contents`;
   unter 1024px wird es zum Vollbild-Menue mit Akkordeons. */

.topbar { height: 32px; background: var(--c-black); border-bottom: 1px solid #1f1f1f; }
.topbar-in { display: flex; align-items: center; justify-content: flex-end; gap: 24px; height: 100%; }
.topbar a { font-size: 12px; line-height: 1; color: #8A8F98; transition: color .15s; }
.topbar a:hover { color: var(--c-white); text-decoration: none; }

.hd {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--hd-h);
  background: var(--c-black);
  color: var(--c-white);
}
.hd-in { display: flex; align-items: center; height: 100%; gap: 40px; }
.hd-logo { display: block; flex-shrink: 0; }
.hd-logo img { height: 28px; width: auto; }
.hd-panel { display: contents; }

.hd-nav { display: flex; align-items: stretch; gap: 0; height: 100%; margin-left: -16px; }
.hd-item { display: flex; }
.hd-top {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding: 0 16px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  color: var(--c-on-dark);
  cursor: pointer;
  transition: color .15s, background-color .15s;
}
.hd-top:hover, .hd-item.is-open .hd-top, .hd-item.is-active .hd-top { color: var(--c-white); }
.hd-item.is-open .hd-top { background: var(--c-graphite); }
.hd-chev { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.hd-item.is-open .hd-chev { transform: rotate(180deg); }
.hd-item.is-active .hd-top::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 3px;
  background: var(--c-blue);
}
.hd-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 40px 0 48px;
  background: var(--c-graphite);
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease, visibility 0s linear .15s;
}
.hd-item.is-open .hd-menu { opacity: 1; visibility: visible; transition: opacity .15s ease; }

.mm { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mm.mm-two { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.mm-col { padding: 0 40px; }
.mm-col:first-child { padding-left: 0; }
.mm-col + .mm-col { border-left: 1px solid var(--c-mega-line); }
.mm-list li[hidden] { display: none; }
.mm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--c-mega-line);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--c-mega-text);
  transition: color .15s, border-color .15s;
}
.mm-row:hover, .mm-row:focus-visible, .mm-row.is-on, .mm-row[aria-current] { color: var(--c-white); text-decoration: none; }
.mm-row.is-on, .mm-row[aria-current] { border-bottom-color: var(--c-blue); }
.mm-arr { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.mm-row:hover .mm-arr { transform: translateX(3px); }
.mm-cta { margin-top: 32px; }
/* Partner-Angebot unter den eigenen Produkten: kleiner Abstand, Kicker,
   Eintrag mit Unterzeile. Schmal (Mobil-Menue) entfaellt der Block wie
   die erste Spalte; das Feld "Mentalcoaching (Partner)" steht dann mit
   den anderen Feldern untereinander. */
.mm-partner { margin-top: 28px; }
.mm-kicker { margin-bottom: 4px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--c-mega-text); }
.mm-row small { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--c-mega-text); }
.btn-black { background: var(--c-black); border-color: var(--c-black); }
.btn-black:hover { background: var(--c-blue); border-color: var(--c-blue); }
/* Mit Skript steht nur das aktive Feld; ohne stehen alle untereinander. */
.js .mm-pane:not(.is-on) { display: none; }
.mm-h { display: none; }
.mm-dt { margin-bottom: 8px; font-size: 22px; font-weight: 600; color: var(--c-white); }
.mm-desc p:not(.mm-dt) { max-width: 520px; color: var(--c-mega-text); }

.hd-actions { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.hd-portal { font-size: 16px; font-weight: 500; color: var(--c-white); }
.hd-portal:hover { color: var(--c-white); }
.hd-m { display: none; }

.hd-burger {
  display: none;
  width: 40px;
  height: 40px;
  margin-left: auto;
  margin-right: -8px;
  background: none;
  border: 0;
  cursor: pointer;
  position: relative;
}
.hd-burger span {
  position: absolute;
  left: 10px;
  width: 20px;
  height: 2px;
  background: var(--c-white);
  transition: transform .2s, opacity .2s;
}
.hd-burger span:nth-child(1) { top: 13px; }
.hd-burger span:nth-child(2) { top: 19px; }
.hd-burger span:nth-child(3) { top: 25px; }
.hd[data-open] .hd-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hd[data-open] .hd-burger span:nth-child(2) { opacity: 0; }
.hd[data-open] .hd-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Unter 1024px: keine Leiste, Hamburger rechts, Vollbild-Menue auf
   Schwarz. Die Bereiche sind Gruppen, die per Klick aufklappen; darunter
   Portal, Journal, Discord und der Knopf. */
@media (max-width: 1023px) {
  .topbar { display: none; }
  .home { --hd-top: var(--hd-h); }
  .hd-burger { display: block; }
  .hd-panel {
    display: none;
    position: fixed;
    top: var(--hd-h);
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    padding: 8px var(--pad) 40px;
    background: var(--c-black);
    border-top: 1px solid var(--c-line-dk);
  }
  .hd[data-open] .hd-panel { display: block; }
  .hd-nav { flex-direction: column; gap: 0; height: auto; }
  .hd-item { display: block; border-bottom: 1px solid var(--c-line-dk); }
  .hd-top { justify-content: space-between; width: 100%; height: auto; padding: 18px 0; font-size: 20px; color: var(--c-white); }
  .hd-chev { width: 16px; height: 16px; }
  .hd-nav { margin-left: 0; }
  .hd-top { padding: 18px 0; }
  .hd-item.is-active .hd-top::after { left: -16px; right: auto; top: 18px; bottom: 18px; width: 3px; height: auto; }
  .hd-item.is-open .hd-top { background: none; }
  .hd-menu {
    display: none;
    position: static;
    padding: 0 0 24px;
    background: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transition: none;
  }
  .hd-item.is-open .hd-menu { display: block; }
  /* Akkordeon in derselben Struktur: bei Produkte stehen die Unterpunkte
     aller Angebote unter ihrem Titel, dann die festen Links, dann der
     Knopf. Bei den zweispaltigen Menues bleibt nur die Liste. */
  .mm, .mm.mm-two { display: flex; flex-direction: column; padding: 0; }
  .mm-col, .mm-col:first-child { padding: 0; }
  .mm-col + .mm-col { border-left: 0; }
  .mm-first { order: 3; }
  .mm:not(.mm-two) .mm-main { display: none; }
  .mm-two .mm-panes { display: none; }
  .js .mm-pane:not(.is-on) { display: block; }
  .mm-h { display: block; margin: 20px 0 4px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-mega-text); }
  .mm-pane:first-child .mm-h { margin-top: 4px; }
  .mm-side { margin-top: 20px; }
  .mm-row { padding: 12px 0; font-size: 17px; color: var(--c-on-dark); border-bottom-color: var(--c-line-dk); }
  .mm-row.is-on { color: var(--c-on-dark); border-bottom-color: var(--c-line-dk); }
  .mm-cta { width: 100%; margin-top: 24px; background: var(--c-white); border-color: var(--c-white); color: var(--c-black); }
  .hd-actions { flex-direction: column; align-items: stretch; gap: 20px; margin: 32px 0 0; }
  .hd-portal { font-size: 18px; }
  .hd-m { display: block; }
  .hd-actions .btn { height: 52px; font-size: 17px; }
}


/* ── 8. Hero ──────────────────────────────────────────────────
   Startseite (.hero-bg): siehe unten.

   Unterseiten (mentoring.html) nutzen den aelteren Aufbau:
   es beginnt bei 55 % der Containerbreite (also ca. 45 % breit), laeuft
   rechts bis zum Browserrand und sitzt unten buendig. Die Maske laesst
   das Foto nach links ueber 240px und nach oben ueber 200px in Schwarz
   auslaufen, oben langsam anlaufend, damit das Studio-Grau nicht am
   Header ansteht; das Foto ist insgesamt um 15 % abgedunkelt; ein schwarzer Verlauf (zur Mitte klar, am Rand 40 %) gleicht
   das Studio-Grau an den Rest des Heros an, ohne das Gesicht abzudunkeln. Beim Laden blendet es einmal ein, sonst keine
   Bewegung. --w ist die Innenbreite des Containers. */

.hero, .subhero-top {
  --w: min(100% - 2 * var(--pad), var(--max));
  position: relative;
  min-height: 600px;
  overflow: hidden;
  background: var(--c-black);
  color: var(--c-white);
}
.hero .container { position: relative; z-index: 1; }
.hero-copy { max-width: 560px; padding: 112px 0 120px; }
/* Umbruch nach „die," per <br>; die Spalte ist breit genug fuer die
   erste Zeile, schmal skaliert die Schrift mit der Breite. */
/* Die erste Zeile ist breiter als die 560px-Spalte: die Headline darf
   ueberstehen, damit der Umbruch beim <br> bleibt. */
.hero-copy h1 { margin-bottom: 24px; white-space: nowrap; }
.hero-copy p { color: var(--c-on-dark); max-width: 520px; margin-bottom: 40px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.hero-link { font-weight: 600; color: var(--c-white); }
.hero-link:hover { color: var(--c-white); }

.hero-photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: calc((100% - var(--w)) / 2 + var(--w) * 0.55);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 240px), linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.3) 100px, #000 200px);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 240px), linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.3) 100px, #000 200px);
  mask-composite: intersect;
  animation: photo-in .9s ease both;
}
.hero-photo img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 15%;
}
/* Unterseiten-Hero: das Foto endet ueber den Kennzahlen, also auf
   Schwarz statt am Abschnittsrand, und laeuft deshalb auch nach unten aus.
   Das Foto kommt fertig gegradet und wird nicht zusaetzlich abgedunkelt. */
.hero-photo.fade-bottom {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 240px), linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.3) 100px, #000 200px), linear-gradient(0deg, transparent 0, #000 120px);
  mask-image: linear-gradient(90deg, transparent 0, #000 240px), linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.3) 100px, #000 200px), linear-gradient(0deg, transparent 0, #000 120px);
}
.subhero-top .hero-photo img { object-position: 0% 30%; filter: none; }
@keyframes photo-in { from { opacity: 0; } to { opacity: 1; } }
/* Startseite: zentriert wie bloomberg.com/professional. Oben das
   Desk-Foto als Banner, 160px breiter als der Container und hoechstens
   21:9; auf niedrigen Bildschirmen flacher (100svh - 460px), damit die
   Produkt-Kacheln im ersten Bildschirm angeschnitten sichtbar sind. Der
   Hero zieht sich unter Leiste und Kopf (--hd-top), die hier transparent
   sind. Das Foto in Originalfarben, nur minimal mehr Kontrast und
   Saettigung. Abgedunkelt wird an drei Stellen: oben hinter Leiste und
   Navigation fast schwarz (::before), damit Logo und Nav auf ruhigem
   Grund stehen; die warme Holzwand zwischen Gesicht und Monitoren; und
   ein weicher radialer Verlauf unten hinter Headline, Subline und
   Knoepfen (beide ::after). Monitore und Gesicht bleiben frei. Die
   Raender laufen per Maske in Schwarz aus: seitlich je 12 %, unten ab
   60 %. Die Headline rueckt 112px in den ausgeblendeten unteren Teil. */
.home { --hd-top: calc(32px + var(--hd-h)); }
.home .hero {
  --bw: min(100vw - 2 * var(--pad), var(--max) + 160px);
  min-height: 0;
  margin-top: calc(-1 * var(--hd-top));
  text-align: center;
}
.home .hero-copy { max-width: none; margin-top: -112px; padding: 0 0 24px; }
.home .hero-copy h1 { white-space: normal; }
/* Subline fast weiss wie bei bloomberg.com/professional (#E8E8E8 auf
   Schwarz 16.8:1); sie steht unter dem ausgeblendeten Fotorand. */
.home .hero-copy p { max-width: 640px; margin-inline: auto; color: var(--c-on-dark-hi); }
.home .hero-actions { justify-content: center; gap: 16px; }
.hero-bg {
  position: relative;
  width: var(--bw);
  height: clamp(320px, 100svh - 460px, var(--bw) * 9 / 21);
  margin-inline: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(180deg, #000 60%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(180deg, #000 60%, transparent 100%);
  mask-composite: intersect;
  animation: photo-in .9s ease both;
}
.hero-bg::before, .hero-bg::after { content: ""; position: absolute; z-index: 1; pointer-events: none; }
.hero-bg::before { inset: 0 0 auto; height: calc(var(--hd-top) + 96px); background: linear-gradient(180deg, rgba(0, 0, 0, 0.94), rgba(0, 0, 0, 0.88) 55%, rgba(0, 0, 0, 0.4) 80%, transparent); }
.hero-bg::after {
  inset: 0;
  background:
    radial-gradient(ellipse 12% 60% at 35% 32%, rgba(0, 0, 0, 0.5), transparent),
    radial-gradient(ellipse 42% 38% at 50% 100%, rgba(0, 0, 0, 0.55), transparent);
}
.hero-bg img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 0 34%;
  filter: contrast(1.06) saturate(1.08);
}

/* Kopf auf der Startseite: transparent ueber dem Hero; nach etwas
   Scrollen (site.js setzt .is-solid) oder mit offenem Menue schwarz,
   300ms eingeblendet. */
.home .topbar { position: relative; z-index: 51; background: transparent; border-bottom-color: rgba(255, 255, 255, 0.08); }
.home .hd { background: transparent; transition: background-color .3s ease; }
.home .hd.is-solid, .home .hd[data-open], .home .hd:has(.hd-item.is-open) { background: var(--c-black); }
/* Solange der Kopf transparent ueber dem Foto steht: weicher Schatten
   hinter den Texten statt staerkerer Abdunklung des Bildes. */
.home .topbar a, .home .hd:not(.is-solid) :is(.hd-nav, .hd-portal) { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6); }

/* ── 10. Kacheln (Ansatz) ─────────────────────────────────── */

.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.tiles.three { grid-template-columns: repeat(3, 1fr); }
.tile {
  background: var(--c-tile);
  border-radius: var(--r);
  padding: 32px 28px 36px;
}
.tile-icon { width: 28px; height: 28px; fill: none; stroke: var(--c-blue); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.tile h3 { font-size: 20px; margin: 24px 0 8px; }
.tile p { font-size: 16px; line-height: 1.55; }
.after-tiles { display: flex; flex-wrap: wrap; gap: 12px 40px; margin-top: 40px; }

/* Entscheidungszyklus: vier Spalten mit Linie darueber, wie der Handelstag. */


/* ── 10b. Produkte ────────────────────────────────────────────
   Direkt unter dem Hero, noch auf Schwarz. Sechs Kacheln in drei Spalten (Das BECRO System),
   120px hoch, ohne Rahmen, wie bei bloomberg.com/professional: das Bild
   fuellt die ganze Kachel (cover), links liegt ein dunkler Verlauf hinter
   Titel und Pfeil, rechts bleibt das Bild satt. Beim Hover zoomt das Bild
   auf 1.03 und der Pfeil wird heller. Die ganze Kachel ist der Link. */

.products { padding-block: 96px 0; background: var(--c-black); }
.hero + .products { padding-top: 72px; }
.products .kicker { margin-bottom: 24px; }
.ptiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ptile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 120px;
  padding: 0 24px;
  overflow: hidden;
  border-radius: var(--r-card);
  background: #000;
  color: var(--c-white);
}
.ptile:hover { text-decoration: none; color: var(--c-white); }
.ptile-title, .ptile-go { position: relative; z-index: 1; }
.ptile-title { font-size: 26px; font-weight: 600; line-height: 1.2; }
.ptile-go {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--c-blue);
  transition: transform .2s ease, background-color .2s ease;
}
.ptile-go svg { width: 16px; height: 16px; fill: none; stroke: var(--c-white); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ptile:hover .ptile-go { transform: translateX(4px); background: var(--c-blue-lt); }
.ptile-img { position: absolute; inset: 0; overflow: hidden; }
.ptile-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.9) 0, rgba(0, 0, 0, 0.8) 35%, rgba(0, 0, 0, 0.4) 58%, transparent 82%);
}
.ptile-img img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  transition: transform .4s ease;
}
.ptile:hover .ptile-img img { transform: scale(1.03); }
/* Mentalcoaching: Netz aus feinen Linien und Knoten, nach rechts
   dichter, leichter Schein ueber den SVG-Filter. Zoomt beim Hover wie
   die Bilder; der gemeinsame Verlauf liegt darueber. */
.ptile-net svg { display: block; width: 100%; height: 100%; transition: transform .4s ease; }
.ptile:hover .ptile-net svg { transform: scale(1.03); }
.nt-line { fill: none; stroke: #1F5BFF; stroke-width: 0.8; stroke-opacity: 0.55; }
.nt-dot { fill: #1F5BFF; }
.nt-hot { fill: #6B96FF; }
.ptile-tag { position: absolute; z-index: 1; top: 12px; right: 12px; padding: 3px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.6); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-white); }


/* ── 10c. Startseite auf Schwarz ──────────────────────────────
   Die ganze Startseite (body.home) ist schwarz, vom Hero bis
   zum Fuss; der Fuss ist wie ueberall weiss.
   Karten stehen dort als #0d0d0d-Flaechen mit 1px #1f1f1f-Rand, wie die
   Ausklappmenues im Kopf; Nebentext in #8A8F98. */

body.home { background: var(--c-black); color: var(--c-white); }
.home .rating-line { color: var(--c-on-dark); }
.home .rs-card { border-color: #1f1f1f; background: #0d0d0d; color: var(--c-white); }
.home .rs-card:hover { color: var(--c-white); }
.home .rs-time, .home .rs-teaser, .home .rs-foot { color: #8A8F98; }
.home .lift:hover { box-shadow: none; border-color: #333; }

/* Loesungen, wie bloomberg.com/professional „Solutions": links Kicker,
   Titel und zwei Saetze (5 von 12 Spalten), rechts die vier Situationen
   als Linkliste in zwei Spalten. Jede Zeile hat eine Linie darueber und
   nur die Situation in Grau, der Pfeil direkt hinter dem letzten Wort;
   beim Hover wird der Text weiss, die Linie blau, der Pfeil rueckt. */

.products + .solutions { padding-top: var(--sec); }
.sol { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; align-items: start; }
.sol-copy h2 { margin-bottom: 16px; }
.sol-copy p:not(.kicker) { color: var(--c-on-dark); }
/* Textlink unter dem Absatz: helleres Blau, auf Schwarz lesbar. */
.sol-copy .sol-more { margin-top: 28px; }
.sol-copy .sol-more a { color: var(--c-blue-lt); }
.sol-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
.sol-list a {
  display: block;
  height: 100%;
  padding: 24px 0;
  border-top: 1px solid #2a2a2a;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--c-mega-text);
  transition: border-color .15s, color .15s;
}
.sol-list li:nth-last-child(-n+2) a { border-bottom: 1px solid #2a2a2a; }
.sol-list a:hover { text-decoration: none; color: var(--c-white); border-top-color: var(--c-blue); }
/* Letztes Wort und Pfeil brechen nur gemeinsam um. */
.sol-list .nw { white-space: nowrap; }
.sol-list svg { display: inline-block; width: 18px; height: 18px; margin-left: 8px; vertical-align: -3px; fill: none; stroke: var(--c-blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.sol-list a:hover svg { transform: translateX(4px); }

/* Journal, wie „AI at Bloomberg": Text links, rechts der Screen in einer
   dunklen Karte. */
.jhl { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; align-items: center; }
.jhl-copy h2 { margin-bottom: 20px; }
.jhl-copy p:not(.kicker) { margin-bottom: 40px; color: var(--c-on-dark); }
.jhl-card { padding: 12px; border: 1px solid #1f1f1f; border-radius: var(--r-frame); background: #0d0d0d; }
.jhl-card img { width: 100%; border-radius: var(--r); }


/* ── 11. Unterseiten-Vorlage (member-plus.html) ─────────────────
   Standard fuer alle weiteren Unterseiten (body.page): nur Kopf und Hero
   schwarz, ab dem Hero weiss mit dunklem Text, graue Flaechen in
   --c-tile (#F4F4F6), Akzent BECRO-Blau, grosszuegige Abstaende.
   Reihenfolge und gemeinsame Klassen:
     .subhero.page-hero   Hero: Brotkrumen (.crumbs), Kicker, H1, Lead,
                          zwei Knoepfe, Zeile .hero-note
     .subnav              Unternavigation auf Weiss, klebt unter dem Kopf
     .mp-band             hoechstens ein grosses Bild: Skyline-Band mit
                          Monitor und schwarzer Karte
     .tiles.three/.tile   graue Karten mit blauem .tile-icon, Titel und
                          zwei Saetzen; Anker liegen auf den Karten
     .price-box           Preis auf Grau, darunter .price-claim
     .rv-grid/.rv-card    Bewertungen, fest im HTML (tools/bewertungen.py)
     .faq                 Akkordeon in .container.narrow
     .cta-box             grauer Kasten (#2C2C30) als dunkler Abschluss
   Danach der weisse Fuss mit Linie oben und Risikohinweis (.ft-risk). */

/* Gemeinsamer Sektionsrhythmus fuer Startseite und Unterseiten: jeder
   Abstand zwischen zwei Sektionen ist genau einmal --sec. */
.home, .page { --sec: 160px; }

html:has(.subnav) { scroll-padding-top: calc(var(--hd-h) + 52px + 24px); }

.page-hero { padding-bottom: 112px; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; font-size: 14px; color: var(--c-mega-text); }
.crumbs li + li::before { content: "›"; margin-right: 8px; }
.crumbs a { color: var(--c-mega-text); }
.crumbs a:hover { color: var(--c-white); }
.page-hero .btn-group { column-gap: 16px; }
/* Hero mit Mentoring-Panel (.ph, mentoring.html): Text links wie
   gehabt, das Fenster absolut daneben. Es beginnt kurz rechts vom Text
   (48 % der Breite), oben auf Hoehe der Ueberschrift, endet 50px vor dem
   rechten Rand und laeuft unten ueber den Hero hinaus; .ph schneidet es
   ab (es reicht immer 48px unter den Hero, das helle Feld fuellt den
   Rest). Die Hero-Hoehe ergibt sich weiter nur aus dem Text. Beim Laden
   blendet das Fenster ein und gleitet 24px nach oben; bei reduzierter
   Bewegung steht es. Schmal steht es unter dem Text ueber die volle
   Breite, ebenfalls unten angeschnitten. */
.ph { position: relative; overflow: hidden; }
.ph-copy { width: calc((100% - 64px) / 2.15); }
.ph .ph-copy h1, .ph .ph-copy .lead { max-width: 580px; }
.ph-shot { position: absolute; top: 200px; bottom: -48px; left: 48%; right: 50px; container-type: inline-size; animation: ph-shot-in .9s cubic-bezier(.22, .8, .3, 1) .15s both; }
@keyframes ph-shot-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* Mentoring-Panel (.mmp): oben schwarzes Band mit der Fortschrittsleiste
   ueber die 11 Live-Webinare (01-03 erledigt, 04 als naechstes), darunter
   auf #F4F4F6 drei weisse Karten, die Hausaufgabe und die letzte
   Aufzeichnung. Alle Groessen haengen an --u (2,46 % der Fensterbreite,
   14 bis 24px), so waechst der Inhalt mit dem Rahmen. Mit .is-in fuellen
   sich die Punkte nacheinander (--i, je 140ms), Linie und Kursbalken
   laufen auf ihren Wert, die Karten blenden versetzt ein (--d). */
.mmp { --u: clamp(14px, 2.46cqi, 24px); display: flex; flex-direction: column; height: 100%; }
.mmp .eqp-bar { gap: calc(var(--u) * 0.875); height: calc(var(--u) * 2.625); padding: 0 calc(var(--u) * 1); }
.mmp .eqp-dots { gap: calc(var(--u) * 0.375); }
.mmp .eqp-dots i { width: calc(var(--u) * 0.625); height: calc(var(--u) * 0.625); }
.mmp .eqp-title { font-size: calc(var(--u) * 0.875); }
.mmp .eqp-tag { padding: calc(var(--u) * 0.125) calc(var(--u) * 0.5); font-size: calc(var(--u) * 0.6875); }
.mmp-band { padding: calc(var(--u) * 1.375) calc(var(--u) * 1.5) calc(var(--u) * 2.5); background: var(--c-black); }
.mmp-head { display: flex; justify-content: space-between; align-items: baseline; gap: calc(var(--u) * 1); margin-bottom: calc(var(--u) * 1.25); }
.mmp-head b { font-size: calc(var(--u) * 1); font-weight: 600; }
.mmp-head span { font-size: calc(var(--u) * 0.75); color: #8A8F98; white-space: nowrap; }
.mmp-track { position: relative; display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.mmp-track::before, .mmp-track::after { content: ""; position: absolute; top: 50%; left: calc(100% / 22); height: calc(var(--u) * 0.125); margin-top: U(-1); background: #2a2e38; }
.mmp-track::before { right: calc(100% / 22); }
.mmp-track::after { width: calc(100% * 2 / 11); background: var(--c-blue); transform-origin: left; }
.mmp-track li { position: relative; z-index: 1; display: flex; justify-content: center; }
.mmp-track span { display: grid; place-items: center; width: calc(var(--u) * 1.625); height: calc(var(--u) * 1.625); border: calc(var(--u) * 0.09375) solid #3a3f4b; border-radius: 50%; background: #0c0e13; font-size: calc(var(--u) * 0.625); font-weight: 600; color: #8A8F98; font-variant-numeric: tabular-nums; }
.mmp-track .is-done span { border-color: var(--c-blue); background: var(--c-blue); color: var(--c-white); }
.mmp-track .is-next span { border-color: var(--c-blue); color: var(--c-white); box-shadow: 0 0 0 calc(var(--u) * 0.25) rgba(26, 92, 255, .22); }
.mmp-track em { position: absolute; top: calc(var(--u) * 2.125); left: 50%; transform: translateX(-50%); font-size: calc(var(--u) * 0.6875); font-style: normal; font-weight: 600; color: var(--c-blue-lt); white-space: nowrap; }
.mmp > * { flex-shrink: 0; }
.mmp-body { flex: 1 0 auto; display: grid; align-content: start; gap: calc(var(--u) * 0.75); padding: calc(var(--u) * 1); background: var(--c-tile); color: var(--c-text); }
.mmp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 0.75); }
.mmp-card { display: flex; flex-direction: column; gap: calc(var(--u) * 0.375); padding: calc(var(--u) * 0.875) calc(var(--u) * 1) calc(var(--u) * 1); border: 1px solid var(--c-line); border-radius: calc(var(--u) * 0.5); background: var(--c-white); }
.mmp-card b { font-size: calc(var(--u) * 0.9375); font-weight: 600; line-height: 1.3; }
.mmp-label { display: flex; align-items: center; gap: calc(var(--u) * 0.375); font-size: calc(var(--u) * 0.6875); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); }
.mmp-label svg { width: calc(var(--u) * 0.8125); height: calc(var(--u) * 0.8125); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.mmp-meta { margin-top: auto; font-size: calc(var(--u) * 0.8125); line-height: 1.4; color: var(--c-muted); }
.mmp-meta strong { display: block; font-weight: 600; color: var(--c-blue); }
.mmp-bar { height: calc(var(--u) * 0.375); margin-top: calc(var(--u) * 0.5); border-radius: calc(var(--u) * 0.1875); background: var(--c-line); overflow: hidden; }
.mmp-bar i { display: block; width: calc(var(--v) * 100%); height: 100%; border-radius: inherit; background: var(--c-blue); transform-origin: left; }
.mmp-card.is-locked b, .mmp-card.is-locked .mmp-label { color: #9CA3AF; }
.mmp-hw { flex-direction: row; align-items: center; justify-content: space-between; gap: calc(var(--u) * 0.75); padding: calc(var(--u) * 0.75) calc(var(--u) * 1); }
.mmp-hw b { font-size: calc(var(--u) * 0.875); }
.mmp-status { padding: calc(var(--u) * 0.1875) calc(var(--u) * 0.625); border-radius: 999px; background: rgba(26, 92, 255, .1); font-size: calc(var(--u) * 0.75); font-weight: 600; color: var(--c-blue); white-space: nowrap; }
.mmp-rec { flex-direction: row; align-items: center; gap: calc(var(--u) * 1); padding: calc(var(--u) * 0.75); }
.mmp-rec-text { display: flex; flex-direction: column; gap: calc(var(--u) * 0.375); }
.mmp-rec .mmp-meta { margin-top: 0; }
.mmp-thumb { position: relative; flex: 0 0 38%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: calc(var(--u) * 0.375); background: #0c0e13; }
.mmp-thumb svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mmp-thumb-grid { fill: none; stroke: #1d2028; stroke-width: 1; vector-effect: non-scaling-stroke; }
.mmp-thumb-line { fill: none; stroke: #1F5BFF; stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mmp-play { position: absolute; top: 50%; left: 50%; width: calc(var(--u) * 2.25); height: calc(var(--u) * 2.25); margin: U(-18) 0 0 U(-18); border-radius: 50%; background: rgba(255, 255, 255, .92); }
.mmp-play::after { content: ""; position: absolute; top: 50%; left: 54%; border-style: solid; border-width: calc(var(--u) * 0.375) 0 calc(var(--u) * 0.375) calc(var(--u) * 0.625); border-color: transparent transparent transparent var(--c-black); transform: translate(-50%, -50%); }
.mmp-thumb small { position: absolute; right: calc(var(--u) * 0.375); bottom: calc(var(--u) * 0.375); padding: calc(var(--u) * 0.0625) calc(var(--u) * 0.3125); border-radius: calc(var(--u) * 0.1875); background: rgba(0, 0, 0, .7); font-size: calc(var(--u) * 0.625); font-weight: 600; color: var(--c-white); font-variant-numeric: tabular-nums; }
.js .mmp:not(.is-in) .is-done span { border-color: #3a3f4b; background: #0c0e13; color: #8A8F98; }
.js .mmp:not(.is-in) .is-next span { border-color: #3a3f4b; box-shadow: none; }
.js .mmp:not(.is-in) .mmp-track em { opacity: 0; }
.js .mmp:not(.is-in) .mmp-track::after, .js .mmp:not(.is-in) .mmp-bar i { transform: scaleX(0); }
.js .mmp:not(.is-in) .mmp-card { opacity: 0; transform: translateY(10px); }
.js .mmp.is-in .mmp-track span { transition: background-color .3s ease, border-color .3s ease, color .3s ease, box-shadow .4s ease; transition-delay: calc(var(--i) * 140ms + 200ms); }
.js .mmp.is-in .mmp-track::after { transition: transform .5s cubic-bezier(.22, .8, .3, 1) .2s; }
.js .mmp.is-in .mmp-track em { transition: opacity .4s ease .8s; }
.js .mmp.is-in .mmp-card { transition: opacity .5s ease, transform .5s cubic-bezier(.22, .8, .3, 1); transition-delay: calc(var(--d) * 120ms + 500ms); }
.js .mmp.is-in .mmp-bar i { transition: transform 1s cubic-bezier(.22, .8, .3, 1) .9s; }
@media (prefers-reduced-motion: reduce) {
  .ph-shot { animation: none; }
  .js .mmp .mmp-track span, .js .mmp .mmp-track::after, .js .mmp .mmp-track em, .js .mmp .mmp-card, .js .mmp .mmp-bar i { transition: none; }
}
@media (max-width: 1080px) {
  .subhero.ph { padding-bottom: 0; }
  .ph-copy { width: auto; }
  .ph-shot { position: relative; top: auto; bottom: auto; left: auto; right: auto; height: clamp(380px, 100vw, 560px); margin-top: 48px; overflow: hidden; }
  .ph-shot .mmp { height: auto; }
}
@media (max-width: 760px) {
  .mmp { --u: 15px; }
  .mmp-head { flex-direction: column; gap: calc(var(--u) * 0.125); }
  .mmp-cards { grid-template-columns: 1fr; }
}
.hero-note { margin-top: 20px; font-size: 15px; color: var(--c-mega-text); }

.subnav {
  position: sticky;
  top: var(--hd-h);
  z-index: 40;
  height: 52px;
  border-bottom: 1px solid var(--c-line);
  background: var(--c-white);
}
.subnav-in { display: flex; align-items: center; gap: 28px; height: 100%; overflow-x: auto; scrollbar-width: none; }
.subnav-in::-webkit-scrollbar { display: none; }
.subnav-t { flex-shrink: 0; font-weight: 600; color: var(--c-text); }
.subnav a:not(.btn) {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 100%;
  border-bottom: 2px solid transparent;
  font-size: 15px;
  font-weight: 500;
  color: var(--c-muted);
}
.subnav a:not(.btn):hover { text-decoration: none; color: var(--c-text); }
.subnav a[aria-current] { color: var(--c-text); border-bottom-color: var(--c-blue); }
.subnav-cta { flex-shrink: 0; margin-left: auto; height: 36px; }

/* Portal-Band (member-plus.html), Code wie geliefert. */
.mp-band{position:relative;height:clamp(560px,78vh,820px);overflow:hidden;background:#0b0d12;--p:0}
.mp-band__bg{position:absolute;inset:-40px;background-size:cover;background-position:center 60%;filter:blur(6px) brightness(.72);transform:scale(1.05)}
.mp-band__monitor{position:absolute;left:-6vw;top:50%;width:62vw;max-width:1100px;
  transform:translateY(calc(-50% + (1 - var(--p)) * 40px)) perspective(1600px) rotateY(16deg) rotateX(3deg) scale(calc(.96 + var(--p) * .04));
  transform-origin:left center;background:#0a0a0a;border-radius:14px;padding:12px;
  box-shadow:0 40px 80px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.10);will-change:transform}
.mp-band__screen{aspect-ratio:16/10;overflow:hidden;border-radius:4px;background:#000}
.mp-band__screen img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}
.mp-band__inner{position:relative;z-index:2;height:100%;max-width:1240px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:flex-end}
.mp-band__card{width:min(400px,100%);background:#000;color:#fff;border-radius:12px;padding:36px}
.mp-band__kicker{margin:0 0 8px;color:#1F5BFF;font-size:15px}
.mp-band__title{margin:0 0 14px;font-size:clamp(26px,2.4vw,34px);line-height:1.15;font-weight:600}
.mp-band__text{margin:0 0 22px;color:#E8E8E8;line-height:1.6}
.mp-band__link{color:#fff;font-weight:600;text-decoration:none}
.mp-band__link span{color:#1F5BFF;margin-left:6px}
@media (max-width:860px){
  .mp-band{height:auto;padding:48px 0}
  .mp-band__monitor{position:relative;left:auto;top:auto;width:calc(100% - 32px);margin:0 16px 24px;transform:none}
  .mp-band__inner{height:auto;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.mp-band__monitor{transform:translateY(-50%) perspective(1600px) rotateY(16deg) rotateX(3deg)}}

/* Leistungen: Anker auf den Karten, damit sie unter Kopf und
   Unternavigation landen. */
.page .tile { scroll-margin-top: 24px; }
.page .tile p a { color: inherit; text-decoration: underline; text-decoration-color: var(--c-blue); text-underline-offset: 3px; }

.price-box {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 64px;
  padding: 64px;
  border-radius: var(--r-lg);
  background: var(--c-tile);
}
.price-main h2 { margin-bottom: 8px; }
.price-amount { font-size: 56px; font-weight: 600; line-height: 1.1; }
.price-amount small { margin-left: 10px; font-size: 18px; font-weight: 500; color: var(--c-muted); }
.price-terms { margin: 12px 0 32px; font-size: 15px; color: var(--c-muted); }
.price-note { margin-top: 20px; max-width: 400px; font-size: 15px; color: var(--c-muted); }
.price-list { align-self: center; }
.price-list li { position: relative; padding: 14px 0 14px 32px; border-bottom: 1px solid #E2E2E6; }
.price-list li:first-child { border-top: 1px solid #E2E2E6; }
.price-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 22px;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--c-blue);
  border-bottom: 2px solid var(--c-blue);
  transform: rotate(-45deg);
}
.price-claim { margin-top: 40px; font-size: 20px; font-weight: 500; text-align: center; }

.container.narrow { max-width: calc(880px + 2 * var(--pad)); }

/* Ausbildung (mentoring.html): Zeitleiste, Kurskarten,
   Passt/Passt nicht. Alles auf Weiss bzw. --c-tile. */

/* Zeitleiste: fuenf Spalten, Nummernkreise auf einer durchgehenden
   Linie. Schmal untereinander, die Linie laeuft links senkrecht. */
.timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px; counter-reset: tl; }
.tl-step { position: relative; padding-top: 72px; }
.tl-step::before {
  counter-increment: tl;
  content: counter(tl);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-blue);
  color: var(--c-white);
  font-size: 18px;
  font-weight: 600;
}
.tl-step::after { content: ""; position: absolute; top: 22px; left: 0; right: -32px; border-top: 1px solid var(--c-line); }
.tl-step:last-child::after { right: 0; }
.tl-step h3 { font-size: 20px; margin-bottom: 8px; }
.tl-step p { font-size: 16px; line-height: 1.55; color: var(--c-muted); }

/* Videokurse: zwei Karten mit Cover. */
.courses { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 96px; }
.course { overflow: hidden; border-radius: var(--r-lg); background: var(--c-tile); }
.course-cover {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 16 / 9;
  padding: 32px;
  background: linear-gradient(135deg, #000 0%, #0B2FA8 70%, var(--c-blue) 100%);
  color: var(--c-white);
}
.course-cover.alt { background: linear-gradient(135deg, #000 0%, var(--c-graphite) 60%, #4A4A52 100%); }
.course-cover small { font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-blue-lt); }
.course-cover b { margin-top: 8px; font-size: 28px; font-weight: 600; line-height: 1.2; }
.course-body { padding: 28px 32px 36px; }
.course-body h3 { font-size: 20px; margin-bottom: 8px; }
.course-body p { font-size: 16px; line-height: 1.55; }

/* Fuer wen: zwei Spalten mit Linie darueber. */
.fit { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.fit-col { padding-top: 24px; border-top: 2px solid var(--c-blue); }
.fit-col.no { border-top-color: var(--c-line); }
.fit-col h3 { margin-bottom: 16px; }
.fit-col li { padding: 12px 0; font-size: 18px; line-height: 1.5; }
.fit-col li + li { border-top: 1px solid var(--c-line); }

/* Bewertungen: helle Karten mit feinem Rand, fest im HTML (erzeugt mit
   tools/bewertungen.py aus data/bewertungen.json). Oben Sterne in Blau,
   der Text mit .js auf sechs Zeilen gekappt (site.js blendet dann
   „Weiterlesen“ ein), unten Name, Datum und Produkt-Label. .rv-tabs,
   .rv-count und .wins nur auf bewertungen.html. */
.rv-sec h2 { margin-bottom: 40px; }
.rv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.rv-card {
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  background: var(--c-white);
}
.rv-card[hidden] { display: none; }
.rv-stars { margin-bottom: 14px; font-size: 18px; letter-spacing: 2px; line-height: 1; color: var(--c-blue); }
.rv-text { font-size: 17px; line-height: 1.6; }
.rv-text p + p { margin-top: 12px; }
.js .rv-card:not(.is-open) .rv-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden; }
.rv-toggle { align-self: flex-start; margin-top: 8px; padding: 0; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 600; color: var(--c-blue); cursor: pointer; }
.rv-toggle[hidden] { display: none; }
/* Fusszeile: Name · Datum links (darf umbrechen), Label rechts in
   derselben Zeile, nie allein in einer eigenen. */
.rv-card footer { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--c-line); font-size: 15px; line-height: 1.4; color: var(--c-muted); }
.rv-card footer > span:first-child { min-width: 0; }
.rv-tag { flex-shrink: 0; padding: 3px 10px; border-radius: 999px; background: var(--c-tile); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; color: var(--c-text); }
.rv-count { margin-bottom: 24px; font-size: 16px; color: var(--c-muted); }
.rv-count .rv-of[hidden] { display: none; }

/* bewertungen.html: Mauerwerk statt Raster, Karten unterschiedlicher
   Hoehe stehen ohne Luecken untereinander (Spalten von oben nach unten). */
.rv-masonry { display: block; columns: 3; column-gap: 24px; }
.rv-masonry .rv-card { break-inside: avoid; margin-bottom: 24px; }

/* Was haengen bleibt: drei kurze Zitate unter dem Hero, dicht an Hero
   und Filter. */
.rv-quotes { padding-block: 72px 56px; }
.rv-quotes .kicker { margin-bottom: 24px; }
.rv-quote-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.rv-quote { margin: 0; padding-top: 24px; border-top: 2px solid var(--c-blue); }
.rv-quote blockquote p { font-size: 22px; font-weight: 500; line-height: 1.4; }
.rv-quote figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 16px; font-size: 15px; color: var(--c-muted); }
.rv-quote figcaption b { font-weight: 600; color: var(--c-text); }
.page .rv-quotes + .rv-all { padding-top: 0; }
.cta-box .btn-group { margin-top: 32px; }
.rv-count .rv-n, .rv-count .rv-avg { font-weight: 600; color: var(--c-text); }
.rv-more { margin-top: 32px; font-size: 16px; color: var(--c-muted); }
.page .rv-more a, .rating-big a { color: var(--c-blue); }

.rating-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; margin-top: 40px; }
.rating-big b { font-size: 64px; font-weight: 600; line-height: 1; }
.rating-big span { font-size: 18px; color: var(--c-on-dark); }
.rating-big a { color: var(--c-blue-lt); }

.rv-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.rv-tabs button {
  height: 40px;
  padding: 0 18px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: var(--c-white);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--c-text);
  cursor: pointer;
}
.rv-tabs button:hover { border-color: var(--c-text); }
.rv-tabs button[aria-pressed="true"] { border-color: var(--c-text); background: var(--c-text); color: var(--c-white); }

/* Fortschritte: Bild-Karten, Klick oeffnet die Lightbox. */
.wins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.wins a { display: block; color: inherit; }
.wins a:hover { text-decoration: none; }
.wins figure { overflow: hidden; border-radius: var(--r-card); background: var(--c-tile); }
.wins img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .3s ease; }
.wins a:hover img { transform: scale(1.03); }
.wins figcaption { padding: 20px 24px 24px; font-size: 16px; line-height: 1.5; }
.wins figcaption b { display: block; margin-bottom: 4px; }
.wins-note {
  margin-top: 32px;
  padding: 20px 24px;
  border-left: 3px solid var(--c-blue);
  background: var(--c-tile);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.55;
}

.lightbox { max-width: min(1100px, 92vw); max-height: 92vh; padding: 0; border: 0; border-radius: var(--r-card); background: var(--c-black); color: var(--c-white); }
.lightbox::backdrop { background: rgba(0, 0, 0, 0.8); }
.lightbox img { display: block; max-width: 100%; max-height: calc(92vh - 64px); margin: 0 auto; }
.lightbox p { padding: 16px 24px; font-size: 15px; color: var(--c-on-dark); }
.lightbox p:empty { display: none; }
.lightbox-x { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: var(--c-white); font-size: 24px; line-height: 1; cursor: pointer; }

.home-rating { margin-top: 32px; font-size: 16px; color: var(--c-on-dark); }
.home-rating a { color: var(--c-white); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1080px) {
  .rv-grid, .wins { grid-template-columns: repeat(2, 1fr); }
  .rv-masonry { columns: 2; }
  .rv-quote-row { grid-template-columns: 1fr; gap: 28px; }
  .rv-quotes { padding-block: 56px 48px; }
}
@media (max-width: 760px) {
  .rv-grid, .wins { grid-template-columns: 1fr; }
  .rv-masonry { columns: 1; }
  .rv-quote blockquote p { font-size: 19px; }
  .rating-big b { font-size: 52px; }
}

@media (max-width: 1080px) {
  .timeline { grid-template-columns: 1fr; gap: 0; }
  .tl-step { padding: 0 0 40px 72px; }
  .tl-step::after { top: 44px; bottom: 0; left: 22px; right: auto; border-top: 0; border-left: 1px solid var(--c-line); }
  .tl-step:last-child { padding-bottom: 0; }
  .tl-step:last-child::after { display: none; }
}
@media (max-width: 760px) {
  .courses, .fit { grid-template-columns: 1fr; gap: 40px; }
  .courses { margin-top: 72px; }
  .course-cover { padding: 24px; }
  .course-cover b { font-size: 24px; }
  .course-body { padding: 24px; }
}



/* ── 14. Bewertungen ──────────────────────────────────────────
   Die Karten (.rv-*) stehen in Abschnitt 11, hier nur die Wertungszeile. */

.rating-line { margin: 16px 0 0; }


/* ── 15. Stufen ───────────────────────────────────────────────
   Drei Zeilen ueber die Containerbreite, getrennt durch 1px Linien, 56px
   Innenabstand. Links Nummer, Titel, Unterzeile und Preis, in der Mitte
   die Leistungen als schlichte Liste, rechts die Aktion. Keine Karte,
   keine Hervorhebung: Member+ unterscheidet sich nur durch den Knopf. */

.plans { border-bottom: 1px solid var(--c-line); }
.plan {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr);
  gap: 48px;
  align-items: start;
  padding-block: 56px;
  border-top: 1px solid var(--c-line);
}
.plan-n { display: block; margin-bottom: 12px; font-size: 16px; font-weight: 600; color: var(--c-blue); }
.plan h3 { font-size: 32px; line-height: 1.2; }
.plan-desc { margin-top: 8px; font-size: 16px; color: var(--c-muted); }
.plan-price { margin-top: 24px; font-size: 40px; font-weight: 600; line-height: 1.1; }
.plan-price small { margin-left: 6px; font-size: 16px; font-weight: 500; color: var(--c-muted); }
.plan-list { padding-top: 36px; }
.plan-list li { font-size: 17px; line-height: 1.5; }
.plan-list li + li { margin-top: 10px; }
.plan-go { justify-self: end; padding-top: 36px; }


/* ── 16. Ueber ───────────────────────────────────────────────
   Bild auf 5 von 12 Spalten (4:5, volle Spaltenbreite), Text auf 7, 64px
   Abstand. Der Kicker steht oben in der Textspalte, also auf Hoehe der
   Bildoberkante. Die Textspalte ist so hoch wie die Zeile: ist der Text
   kuerzer als das Bild, rutscht die Fakten-Zeile an die Bildunterkante,
   ist er laenger, steht sie einfach darunter. */

.about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 64px; align-items: stretch; }
.about-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 0; border-radius: 8px; }
.about-copy { display: flex; flex-direction: column; }
.about-copy > * { flex-shrink: 0; }
.about-copy h2 { margin-bottom: 8px; }
.about-role { display: block; color: var(--c-muted); margin-bottom: 32px; }
.about-copy p + p { margin-top: 20px; }
.about-copy .about-facts { margin-top: auto; padding-top: 32px; font-size: 16px; color: var(--c-muted); }


/* ── 16b. Research ────────────────────────────────────────────
   Kopf mit Link rechts oben, darunter eine waagerechte Kartenreihe: sie
   beginnt an der Containerkante, laeuft bis zum Fensterrand und wird dort
   angeschnitten. Gescrollt (oder gewischt) wird quer, mit Einrasten an der
   Kartenkante, ohne sichtbare Scrollleiste. Karten 360px, schmal 300px;
   darunter Pfeile und Punkte (.rs-ctrl). Gefuellt wird sie von site.js; bleibt sie leer,
   bleibt die Sektion `hidden`. Steht sie nicht da, holt sich der
   CTA-Kasten seinen oberen Abstand zurueck. */

/* Eine ausgeblendete Sektion zaehlt nicht: die naechste schliesst ohne
   eigenen oberen Abstand an die vorige an, wie bei .sec + .sec. */
.sec + .sec[hidden] + .sec { padding-top: 0; }
.rs-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 48px; }
.rs-head .text-link { flex-shrink: 0; padding-bottom: 6px; }
.rs-row {
  --edge: max(var(--pad), (100% - var(--max)) / 2);
  display: flex;
  gap: 24px;
  overflow-x: auto;
  padding: 4px var(--edge) 24px;
  scroll-padding-inline: var(--edge);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.rs-row::-webkit-scrollbar { display: none; }
.rs-card {
  display: flex;
  flex-direction: column;
  flex: none;
  width: 360px;
  min-height: 260px;
  padding: 28px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  background: var(--c-white);
  color: var(--c-text);
  scroll-snap-align: start;
}
.rs-card:hover { text-decoration: none; color: var(--c-text); }
.rs-meta { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.rs-type { font-weight: 600; color: var(--c-blue); }
.rs-time { flex-shrink: 0; color: var(--c-muted); }
.rs-card h3 { margin-top: 14px; font-size: 20px; font-weight: 600; line-height: 1.3; }
.rs-teaser {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--c-muted);
}
.rs-foot { margin-top: auto; padding-top: 24px; font-size: 14px; color: var(--c-muted); }
.rs-row:focus-visible { outline-offset: -2px; }

/* Karussell-Steuerung wie „Featured Insights": unter der Reihe links ein
   Pfeil, die Punkte (einer je Karte), rechts ein Pfeil. Ein Pfeil blaettert
   um eine Karte; am Anfang oder Ende ist er abgeblendet. Passen alle Karten
   ins Fenster, faellt die Steuerung weg (site.js setzt `hidden`). */
.rs-ctrl { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.rs-ctrl[hidden] { display: none; }
.rs-arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #333;
  border-radius: 50%;
  background: none;
  color: var(--c-white);
  cursor: pointer;
  transition: border-color .15s, background-color .15s, opacity .15s;
}
.rs-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rs-arrow:hover:not(:disabled) { border-color: var(--c-white); }
.rs-arrow:disabled { opacity: .35; cursor: default; }
.rs-dots { display: flex; gap: 2px; }
.rs-dots button { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.rs-dots button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #444; transition: background-color .2s; }
.rs-dots button[aria-current="true"]::before { background: var(--c-blue); }


/* ── 17. CTA-Kasten ───────────────────────────────────────── */

/* Wie die Newsletter-Box auf bloomberg.com/professional: Flaeche im
   Grauton des Mega-Menues, ohne Rahmen. Der Screenshot sitzt mit 48px
   Abstand im Kasten und hat eigene runde Ecken. Fliesstext hellgrau
   (~9:1), Link im helleren Blau --c-blue-lt (4.9:1, WCAG AA) - das
   BECRO-Blau selbst kaeme auf dem Grau nur auf 2.7:1. */
.cta-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 64px;
  min-height: 460px;
  padding: 48px 48px 48px 80px;
  border-radius: var(--r-lg);
  background: var(--c-graphite);
  color: var(--c-white);
}
.cta-copy { max-width: 500px; padding-block: 32px; }
.cta-copy h2 { margin-bottom: 20px; }
.cta-copy p { color: var(--c-on-dark); }
.cta-copy .go { margin-top: 40px; }
.cta-copy .cta-small { margin-top: 32px; font-size: 16px; }
.cta-small a { color: var(--c-blue-lt); }
/* Psychologie (psychologie.html): Hero mit randlosem Portraet und blauem
   Lichtschein, Leiste .ps-facts, Warum zweispaltig mit Zitat, schlichter
   Fliesstext (.prose). Prinzipien (prinzipien.html): links die
   mitlaufende Inhaltsliste, rechts die zehn Prinzipien mit Leitfragen
   auf Grau und Merksatz mit blauer Linie; Prinzip 09 mit dem
   Fuenf-Schritt-Loop als SVG, am Ende das Zitat gross. */
.ps-hero { position: relative; overflow: hidden; min-height: 620px; }
.ps-copy { position: relative; z-index: 2; }
.ps-copy h1, .ps-copy .lead { max-width: 560px; }
.ps-glow { position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse 42% 60% at 76% 46%, rgba(31, 91, 255, 0.22), transparent 70%); pointer-events: none; }
.ps-photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 48%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 38%), linear-gradient(0deg, transparent 0, #000 32%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 38%), linear-gradient(0deg, transparent 0, #000 32%);
  mask-composite: intersect;
  animation: photo-in .9s ease both;
}
.ps-photo img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 15%; }
.btn-wa svg { width: 18px; height: 18px; margin-right: 6px; fill: currentColor; }
.ps-facts { border-bottom: 1px solid var(--c-line); background: var(--c-white); }
.ps-facts ul { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 16px 32px; padding-block: 28px; }
.ps-facts li { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 500; }
.ps-facts svg { flex-shrink: 0; width: 22px; height: 22px; fill: none; stroke: var(--c-blue); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ps-why { padding-top: 112px; }
.ps-why-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 80px; align-items: center; }
.ps-quote { padding-left: 32px; border-left: 3px solid var(--c-blue); }
.ps-quote p { font-size: 32px; font-weight: 500; line-height: 1.3; }
.ps-quote figcaption { margin-top: 20px; font-size: 15px; color: var(--c-muted); }
.ps-quote figcaption a { color: var(--c-blue); }
.prose { max-width: 760px; }
.prose p { font-size: 19px; line-height: 1.65; }
.prose p + p { margin-top: 20px; }
.prose a, .pr-text a { color: var(--c-blue); text-decoration: underline; text-underline-offset: 3px; }

.pr-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 80px; align-items: start; }
.pr-toc { position: sticky; top: calc(var(--hd-h) + 40px); }
.pr-toc-t { margin-bottom: 16px; font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-blue); }
.pr-toc li a { display: flex; gap: 10px; padding: 7px 0 7px 12px; border-left: 2px solid var(--c-line); font-size: 14px; line-height: 1.4; color: var(--c-muted); }
.pr-toc li a span { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.pr-toc li a:hover { text-decoration: none; color: var(--c-text); }
.pr-toc li a[aria-current] { border-left-color: var(--c-blue); color: var(--c-blue); font-weight: 600; }
.pr-list { max-width: 800px; }
.pr-item { position: relative; isolation: isolate; overflow: hidden; padding-block: 64px; border-top: 1px solid var(--c-line); scroll-margin-top: calc(var(--hd-h) + 24px); }
/* Grosse Nummer hinter der Ueberschrift, links leicht angeschnitten. */
.pr-item::before { content: attr(data-n); position: absolute; z-index: -1; top: 28px; left: -0.07em; font-size: 168px; font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: #EDEDF0; pointer-events: none; }
.pr-item:first-child::before { top: -36px; }
.pr-item .pr-num { padding-top: 56px; }
.pr-item:first-child { padding-top: 0; border-top: 0; }
.pr-item:last-child { padding-bottom: 0; }
.pr-num { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; font-size: 15px; font-weight: 600; color: var(--c-blue); }
.pr-badge { padding: 3px 10px; border-radius: 999px; background: var(--c-blue); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-white); }
.pr-item h2 { font-size: 34px; margin-bottom: 24px; }
.pr-text p { font-size: 18px; line-height: 1.65; }
.pr-text p + p { margin-top: 16px; }
.pr-q { margin-top: 32px; padding: 24px 28px; border-radius: var(--r-card); background: var(--c-tile); }
.pr-q h3 { margin-bottom: 12px; font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); }
.pr-q li { position: relative; padding-left: 20px; font-size: 17px; line-height: 1.55; }
.pr-q li + li { margin-top: 8px; }
.pr-q li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--c-blue); }
.pr-rule { margin-top: 40px; padding-left: 24px; border-left: 3px solid var(--c-blue); font-size: 26px; font-weight: 500; line-height: 1.35; }
/* Prinzipien-Hero: rechts die Schleife aus dem PDF. Die weisse Linie
   zeichnet sich in 2s ein, danach kommen Pfeile und Beschriftungen
   nacheinander; bei reduzierter Bewegung steht alles sofort. Die kleine
   dunkle Fassung (.loop-sm) steht bei Prinzip 09, ohne Animation. */
.pr-hero { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px; align-items: center; }
.pr-hero-art { margin-block: -40px; }
.loop { display: block; width: 100%; height: auto; overflow: visible; }
.lp-line { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; }
.lp-arrow { fill: none; stroke: #1F5BFF; stroke-width: 2; stroke-linecap: round; }
.lp-label { font-size: 15px; font-weight: 600; letter-spacing: 0.12em; fill: #fff; }
.lp-num { fill: #1F5BFF; }
.loop-hero .lp-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: lp-draw 2s ease-in-out .3s forwards; }
.loop-hero .lp-arrow, .loop-hero .lp-label { opacity: 0; animation: lp-in .5s ease forwards; animation-delay: calc(2.1s + var(--i) * .28s); }
@keyframes lp-draw { to { stroke-dashoffset: 0; } }
@keyframes lp-in { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .loop-hero .lp-line { stroke-dashoffset: 0; animation: none; }
  .loop-hero .lp-arrow, .loop-hero .lp-label { opacity: 1; animation: none; }
}
.loop-sm { max-width: 460px; margin: 32px 0 8px; }
.loop-sm .lp-line { stroke: var(--c-text); stroke-width: 2.5; }
.loop-sm .lp-label { font-size: 16px; fill: var(--c-text); }

/* Drei Aussagen unter dem Hero. */
.pr-pillars { border-bottom: 1px solid var(--c-line); background: var(--c-white); }
.pr-pillars ul { display: grid; grid-template-columns: repeat(3, 1fr); }
.pr-pillars li { padding: 48px 32px; text-align: center; }
.pr-pillars li + li { border-left: 1px solid var(--c-line); }
.pr-pillars b { display: block; font-size: 44px; font-weight: 600; line-height: 1.1; color: var(--c-blue); }
.pr-pillars span { display: block; margin-top: 8px; font-size: 17px; color: var(--c-muted); }

/* Einleitung mit den zehn Kacheln. */
.pr-intro { padding-top: 112px; }
.pr-intro-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 80px; align-items: start; }
.pr-glance-t { margin-bottom: 16px; font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-blue); }
.pr-glance ol { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pr-tile { display: flex; flex-direction: column; height: 100%; padding: 16px 18px; border: 2px solid transparent; border-radius: var(--r-card); background: var(--c-tile); color: var(--c-text); transition: border-color .2s; }
.pr-tile:hover { text-decoration: none; border-color: var(--c-line); }
.pr-tile b { font-size: 28px; font-weight: 600; line-height: 1; color: var(--c-blue); }
.pr-tile span { margin-top: 8px; font-size: 15px; line-height: 1.35; }
.pr-tile em { margin-top: 8px; font-size: 12px; font-style: normal; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-blue); }
.pr-tile.is-lead, .pr-tile.is-lead:hover { border-color: var(--c-blue); }

.pr-quote { max-width: 960px; margin: 96px auto 0; text-align: center; }
.pr-quote p { font-size: 34px; font-weight: 500; line-height: 1.35; }
.pr-quote figcaption { margin-top: 24px; font-size: 16px; font-weight: 600; color: var(--c-blue); }

@media (max-width: 1080px) {
  .subhero.ps-hero { min-height: 0; padding-top: 0; }
  .ps-glow { background: radial-gradient(ellipse 70% 40% at 50% 22%, rgba(31, 91, 255, 0.22), transparent 70%); }
  .ps-photo {
    position: relative;
    width: 100%;
    height: min(86vw, 480px);
    -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 40%);
    mask-image: linear-gradient(0deg, transparent 0, #000 40%);
  }
  .ps-copy { margin-top: -32px; }
  .ps-facts ul { grid-template-columns: 1fr 1fr; justify-content: stretch; }
  .ps-why { padding-top: 80px; }
  .ps-why-in { grid-template-columns: 1fr; gap: 48px; }
  .pr-layout { grid-template-columns: 1fr; }
  .pr-toc { display: none; }
  .pr-hero { grid-template-columns: 1fr; gap: 24px; }
  .pr-hero-art { max-width: 420px; margin-block: 0; }
  .pr-intro { padding-top: 88px; }
  .pr-intro-in { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 760px) {
  .prose p, .pr-text p { font-size: 17px; }
  .pr-item { padding-block: 48px; }
  .pr-item h2 { font-size: 28px; }
  .pr-q { padding: 20px; }
  .pr-rule { font-size: 21px; }
  .pr-item::before { font-size: 120px; }
  .pr-item .pr-num { padding-top: 36px; }
  .pr-pillars li { padding: 28px 8px; }
  .pr-pillars b { font-size: 26px; }
  .pr-pillars span { font-size: 14px; }
  .pr-quote { margin-top: 64px; }
  .pr-quote p { font-size: 24px; }
}

/* Kontaktbereich (psychologie.html): .cta-box mit Formular
   statt Screenshot. Felder dunkel auf dem Graphit, 1px heller Rand,
   Fokus in Blau. Schmal Text und Knoepfe oben, Formular darunter. */
.cf-box { align-items: start; }
.cf-box .cta-copy .kicker { color: var(--c-blue-lt); }
.cf-box .cta-copy .btn-group { margin-top: 32px; }
.cf { display: grid; gap: 16px; padding: 32px; border-radius: var(--r-frame); background: #232327; }
.cf h3 { font-size: 20px; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cf-field { display: grid; gap: 6px; font-size: 14px; color: var(--c-on-dark); }
.cf-field small { font-size: 13px; color: var(--c-mega-text); }
.cf-field input, .cf-field textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--c-line-dk);
  border-radius: var(--r);
  background: #18181B;
  font: inherit;
  font-size: 16px;
  color: var(--c-white);
}
.cf-field textarea { resize: vertical; min-height: 104px; }
.cf-field input:focus, .cf-field textarea:focus { outline: 2px solid var(--c-blue); outline-offset: 0; border-color: transparent; }
.cf-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--c-on-dark); }
.cf-check input { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--c-blue); }
.cf-check a { color: var(--c-blue-lt); }
.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cf-send { justify-self: start; }
.cf-send[disabled] { opacity: .7; cursor: progress; }
.cf-msg { font-size: 15px; line-height: 1.5; }
.cf-msg:empty { display: none; }
.cf-msg.is-error { color: #FCA5A5; }
.cf-msg a { color: var(--c-blue-lt); }
.cf.is-done > :not(.cf-msg) { display: none; }
.cf.is-done .cf-msg { font-size: 18px; color: var(--c-white); }
.cf-more { margin-top: 24px; font-size: 16px; color: var(--c-muted); text-align: center; }
.cf-more a { color: var(--c-blue); }
@media (max-width: 1080px) {
  .cf-box .cta-copy { padding-block: 16px 0; }
}
@media (max-width: 640px) {
  .cf { padding: 24px 20px; }
  .cf-row { grid-template-columns: 1fr; }
}
.cta-shot {
  width: 100%;
  height: auto;
  border-radius: var(--r-frame);
}
/* Trial-Box (.cta-trial): schwarz mit duennem Rand wie die anderen
   Boxen. Rechts das Bild wie ein Monitor (.cta-mon): ragt von unten
   rechts in die Box, an der Kante angeschnitten, leicht gedreht
   (rotateY -8deg). Nicht abgedunkelt, nur zum Text hin per Maske weich;
   beim Hover ein paar Pixel nach oben. */
.cta-box.cta-trial { overflow: hidden; align-items: stretch; padding: 0 0 0 80px; border: 1px solid #1E1E22; background: #0B0B0F; }
.cta-trial .cta-copy { align-self: center; padding-block: 72px; }
.cta-mon { position: relative; align-self: end; margin-top: 64px; perspective: 1400px; }
.cta-mon img { display: block; width: 122%; max-width: none; height: auto; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px 0 0 0; box-shadow: -24px -24px 60px rgba(0, 0, 0, 0.45); transform: rotateY(-8deg) translateY(6%); transform-origin: left bottom; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20%); mask-image: linear-gradient(90deg, transparent 0, #000 20%); transition: transform .5s cubic-bezier(.22, .8, .3, 1); }
:is(.cta-trial, .cta-half):hover .cta-mon img { transform: rotateY(-8deg) translate(-4px, calc(6% - 8px)) scale(1.01); }
/* In den Haelften (methode.html): unten rechts, ca. 60 % der Flaeche;
   zum Text oben links per Maske weich. */
.cta-mon.is-half { position: absolute; right: 0; bottom: 0; width: 64%; aspect-ratio: 16 / 10; margin: 0; }
.cta-mon.is-half img { position: absolute; inset: 0; width: 118%; height: 118%; object-fit: cover; object-position: left top; transform: rotateY(-8deg) translate(6%, 6%); -webkit-mask-image: linear-gradient(135deg, transparent 0, #000 30%); mask-image: linear-gradient(135deg, transparent 0, #000 30%); }
.cta-half:hover .cta-mon.is-half img { transform: rotateY(-8deg) translate(calc(6% - 6px), calc(6% - 6px)) scale(1.02); }

/* ueber.html: Calendly in der rechten Haelfte erst nach Klick. Vorher das
   Foto (nicht abgedunkelt) mit weissem Knopf unten links; nach dem Klick
   ersetzt der Kalender in Seitenfarben das Foto, die Flaeche waechst
   sanft auf ca. 700px. */
.cal-ben { position: relative; min-height: 460px; }
.cal-ben-pre { position: absolute; inset: 0; }
.cal-ben-pre .cta-photo { min-height: 0; }
.cal-ben-go { position: absolute; left: 32px; bottom: 28px; }
.cal-ben-go p { margin-top: 10px; font-size: 13px; color: var(--c-white); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7); }
.btn.btn-white { background: var(--c-white); border-color: var(--c-white); color: var(--c-black); }
.btn.btn-white:hover { background: #E8EAF0; border-color: #E8EAF0; color: var(--c-black); }
.cal-ben .cal-widget { display: none; height: 700px; border-radius: 0; background: var(--c-black); }
.cal-ben.is-open { min-height: 0; }
.cal-ben.is-open .cal-ben-pre { display: none; }
.cal-ben.is-open .cal-widget { display: block; animation: cal-grow .6s cubic-bezier(.22, .8, .3, 1) backwards; }
@keyframes cal-grow { from { height: 460px; opacity: 0; } to { height: 700px; opacity: 1; } }
.cal-ben.is-loading .cal-load { opacity: .6; pointer-events: none; }
/* In den grauen Boxen (Ausbildung, Coaching) mit runden Ecken wie die Box. */
.cta-box:not(.cta-ben) .cal-ben { overflow: hidden; border-radius: var(--r-frame); }
@media (max-width: 1080px) {
  .cal-ben { min-height: 0; }
  .cal-ben-pre { position: relative; }
  .cal-ben-pre .cta-photo { aspect-ratio: 4 / 3; }
  .cal-ben-go { left: 24px; bottom: 20px; }
  .cal-ben.is-open .cal-widget { height: 1040px; margin-inline: 0; }
  @keyframes cal-grow { from { opacity: 0; } to { opacity: 1; } }
}

/* Community-Zeile (index.html) unter der Trial-Box: keine eigene Box,
   duenne Linie oben, rechts der Rahmen-Knopf in Weiss. */
.crow { display: flex; align-items: center; justify-content: space-between; gap: 24px 48px; margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.crow p { max-width: 760px; font-size: 16px; color: var(--c-on-dark); }
.crow b { margin-right: 6px; font-weight: 600; color: var(--c-white); }
.crow .btn-outline { flex: none; border-color: var(--c-white); color: var(--c-white); }
.crow .btn-outline:hover { background: var(--c-white); border-color: var(--c-white); color: var(--c-black); }
/* ueber.html: schwarze Box, rechts das Foto bis an den Rand, rechts
   angeschnitten, ohne Abdunklung. */
.cta-box.cta-ben { overflow: hidden; align-items: stretch; padding-block: 0; padding-right: 0; background: var(--c-black); }
.cta-ben .cta-copy { align-self: center; padding-block: 64px; }
.cta-photo { width: 100%; height: 100%; min-height: 460px; object-fit: cover; object-position: 20% 40%; }
/* Desk-Foto statt Screenshot (mentoring.html): gleicher Ausschnitt wie
   frueher im Hero, Gesicht im Bild. */
.cta-photo { aspect-ratio: 4 / 3; object-fit: cover; object-position: 0 30%; }


/* ── 18. Fuss ─────────────────────────────────────────────── */

/* Hell auf allen Seiten: weiss, Ueberschriften fast schwarz, Links und
   Text dunkelgrau (#4B5563, 7.6:1), Copyright-Zeile #6B7280 (4.8:1),
   Hover in BECRO-Blau (5.2:1) - alles mindestens WCAG AA. Oben eine
   hellgraue Linie, damit der Fuss sich vom weissen Koerper der
   Unterseiten absetzt. */
.ft { background: var(--c-white); color: #4B5563; padding: 96px 0 40px; font-size: 16px; border-top: 1px solid var(--c-line); }
.ft-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; }
.ft-brand img { height: 48px; width: auto; }
.ft-brand p { margin-top: 20px; max-width: 360px; }
.ft-social { display: flex; gap: 20px; margin-top: 20px; }
.ft h2 { font-size: 16px; font-weight: 600; color: var(--c-text); margin-bottom: 16px; }
.ft li + li { margin-top: 10px; }
.ft a { color: #4B5563; }
.ft a:hover { color: var(--c-blue); }
.ft-risk { margin-top: 24px; max-width: 880px; font-size: 13px; line-height: 1.6; color: #6B7280; }
.ft-risk strong { font-weight: 600; color: #4B5563; }
.ft-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  margin-top: 80px;
  padding-top: 28px;
  border-top: 1px solid var(--c-line);
  font-size: 14px;
  color: var(--c-muted);
}
.ft-legal { display: flex; flex-wrap: wrap; gap: 24px; }
/* Social-Links mit Linien-Icon (18px, Farbe wie der Text, Hover blau);
   Knopf "Journal kostenlos nutzen" unter Kontakt wie der Trial-Knopf. */
.ft-social a { display: inline-flex; align-items: center; gap: 8px; }
.ft-ic { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ft li.ft-go { margin-top: 20px; }
.ft .ft-go .btn, .ft .ft-go .btn:hover { background: #1A5CFF; border-color: #1A5CFF; color: var(--c-white); }
.ft .ft-go .btn:hover { filter: brightness(1.08); }


/* ── 19. Bewegung ─────────────────────────────────────────────
   Fade-in beim Scrollen, innerhalb eines Containers je 80ms versetzt
   (site.js setzt die Verzoegerung). Screens kommen zusaetzlich leicht von
   unten. Karten heben sich beim Hover um 2px. Die Klasse .js setzt ein
   Inline-Skript im <head>, ohne Skript bleibt alles sichtbar. */

/* Die Staffelung kommt als --d und gilt nur fuer das Einblenden — der
   Hover-Lift darf nicht 400ms auf sich warten lassen. Deshalb steht die
   Verzoegerung im transition-Kurzwert und nicht in transition-delay. */
.js .reveal { opacity: 0; transition: opacity .8s ease var(--d, 0ms); }
.js .reveal.in { opacity: 1; }
.js .reveal-up {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .9s ease var(--d, 0ms), transform .9s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms);
}
.js .reveal-up.in { opacity: 1; transform: none; }

.lift { transition: transform .2s ease, box-shadow .2s ease; }
.js .lift.reveal { transition: opacity .8s ease var(--d, 0ms), transform .2s ease, box-shadow .2s ease; }
.lift:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -14px rgba(0, 0, 0, 0.22); }

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal-up { opacity: 1; transform: none; transition: none; }
  .hero-photo, .hero-bg { animation: none; }
  .home .hd { transition: none; }
  .lift, .arrow, .ptile-go, .ptile-img img, .ptile-net svg, .vid-play { transition: none; }
}


/* ── 20. Unterseiten ──────────────────────────────────────────
   mentoring.html und psychologie.html. */

.on-dark { color: var(--c-white); }

.subhero { background: var(--c-black); color: var(--c-white); padding: 112px 0 120px; }
.subhero h1 { max-width: 900px; margin-bottom: 24px; }
.subhero .lead { max-width: 720px; color: var(--c-on-dark); }
.subhero .btn-group { margin-top: 40px; }
.subhero .btn-group { align-items: center; column-gap: 32px; }
.subhero .hero-link, .subhero .hero-link:hover { text-decoration: none; }
.subhero.has-photo { padding-top: 0; }
.subhero-top { position: relative; overflow: hidden; padding-top: 112px; }
.subhero-top .container { position: relative; z-index: 1; }
.subhero-copy { max-width: 600px; }
/* coaching.html: keine Kennzahlen unter dem Hero, das Foto laeuft bis
   zur Unterkante; den Abstand nach unten haelt der Text. */
.subhero.chero { padding-bottom: 0; }
.chero .subhero-copy { padding-bottom: 120px; }
.hero-date { margin-top: 32px; font-size: 16px; color: var(--c-on-dark); }
.hero-date strong { color: var(--c-white); font-weight: 600; }
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 72px;
  padding-top: 40px;
  border-top: 1px solid var(--c-line-dk);
}
.stats.three { grid-template-columns: repeat(3, 1fr); }
.stat .v { font-size: 40px; font-weight: 600; line-height: 1.1; color: var(--c-blue); }
.stat .l { margin-top: 10px; font-size: 16px; color: var(--c-on-dark); }

.split { display: grid; grid-template-columns: 5fr 7fr; gap: 80px; align-items: start; }
.split-body p + p, .split-body p + div, .split-body div + p { margin-top: 20px; }
.split-body .lead { font-weight: 500; }
.split-note { margin-top: 28px; color: var(--c-muted); }

.panel { background: var(--c-tile); border-radius: var(--r); padding: 40px; }
.panel h3 { margin-bottom: 20px; }

.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 40px; }
.check-list { display: grid; gap: 14px; }
.check-grid li, .check-list li { display: flex; gap: 12px; font-size: 17px; line-height: 1.5; }
.check-grid svg, .check-list svg {
  width: 20px; height: 20px; flex-shrink: 0; margin-top: 3px;
  fill: none; stroke: var(--c-blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.trait-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.trait h3 { margin-bottom: 12px; }
.trait p { font-size: 17px; }

.price-split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.price-split > .panel:first-child { display: flex; flex-direction: column; justify-content: center; }
.p-amount { font-size: 64px; line-height: 1; font-weight: 600; color: var(--c-blue); }
.p-sub { margin-top: 12px; color: var(--c-muted); }
.price-split .btn-group { margin-top: 32px; }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.steps.three { grid-template-columns: repeat(3, 1fr); }
.pstep .n { display: block; margin-bottom: 16px; font-weight: 600; color: var(--c-blue); }
.pstep h3 { margin-bottom: 10px; }
.pstep p { font-size: 17px; }

.qa-grid { display: grid; grid-template-columns: 4fr 8fr; gap: 80px; align-items: start; }
.faq-item { border-bottom: 1px solid var(--c-line); }
.faq-item:first-child { border-top: 1px solid var(--c-line); }
.faq-q {
  position: relative;
  display: block;
  width: 100%;
  padding: 24px 48px 24px 0;
  background: none;
  border: 0;
  text-align: left;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
}
.faq-icon { position: absolute; right: 4px; top: 50%; width: 16px; height: 16px; margin-top: -8px; }
.faq-icon::before, .faq-icon::after {
  content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 2px; background: var(--c-blue);
  transition: transform .2s;
}
.faq-icon::after { transform: rotate(90deg); }
.faq-q[aria-expanded="true"] .faq-icon::after { transform: rotate(0deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
.faq-q[aria-expanded="true"] + .faq-a { grid-template-rows: 1fr; }
.faq-a-inner { overflow: hidden; }
.faq-a-inner p { padding-bottom: 24px; max-width: 720px; }

.dark-box {
  padding: 80px;
  border-radius: var(--r-lg);
  background: var(--c-black);
  color: var(--c-white);
}
.dark-box h2 { margin-bottom: 20px; }
.dark-box p { color: var(--c-on-dark); max-width: 620px; }
.dark-box p a { color: var(--c-white); text-decoration: underline; text-underline-offset: 3px; }
.dark-box .btn-group { margin-top: 40px; }
/* Calendly in der Box (.cal, mentoring.html und coaching.html): weisse
   Flaeche, der Kalender laedt beim Seitenaufruf. Die Hoehe meldet
   Calendly selbst (site.js), 700px bzw. schmal 1040px sind nur der Start,
   damit beim Laden nichts springt. Laedt Calendly nicht, bleibt der Link. */
.cal { width: 100%; }
.cal-widget { position: relative; display: grid; place-items: center; height: 700px; overflow: hidden; border-radius: var(--r-frame); background: var(--c-white); }
.cal.is-open .cal-widget { display: block; }
.cal-widget iframe { display: block; width: 100%; height: 100%; }
.cal-fallback { font-size: 16px; color: var(--c-blue); }
.cal.is-loading .cal-fallback { visibility: hidden; }

.partner-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 80px; align-items: start; }
.partner-portrait img { width: 100%; border-radius: var(--r); }
.partner-role { display: block; margin-bottom: 24px; color: var(--c-muted); }
.partner-body > p + p { margin-top: 20px; }
.partner-body h3 { margin: 40px 0 16px; }
.contact-rows { margin-top: 40px; }
.contact-row { display: grid; grid-template-columns: 180px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--c-line); }
.contact-row:last-child { border-bottom: 1px solid var(--c-line); }
.contact-row dt { color: var(--c-muted); }
.partner-logo { width: 88px; margin-top: 40px; }

.principles { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.principle .n { display: block; font-weight: 600; color: var(--c-blue); }
.principle .en { display: block; margin: 4px 0 16px; font-size: 15px; color: var(--c-muted); }
.principle h3 { margin-bottom: 10px; }
.principle p { font-size: 17px; }

.quote-box { max-width: 920px; margin-inline: auto; text-align: center; }
.quote-box blockquote { font-size: 32px; line-height: 1.35; font-weight: 500; }
.q-rule { width: 48px; height: 3px; margin: 36px auto 20px; background: var(--c-blue); }
.q-name { color: var(--c-muted); font-size: 16px; }

.tag-row { display: flex; flex-wrap: wrap; gap: 12px; }
.tag { padding: 8px 14px; border-radius: var(--r); background: var(--c-tile); font-size: 16px; }
.tag .n { margin-right: 6px; font-weight: 600; color: var(--c-blue); }

/* Rechtsseiten: schlichter Text, eine Lesespalte. Bei langen Seiten
   steht links ein Inhaltsverzeichnis, das beim Lesen mitlaeuft. */
.legal-hero { padding: 96px 0 88px; }
.legal { display: grid; grid-template-columns: 1fr; }
.legal:has(.legal-toc) { grid-template-columns: 280px minmax(0, 1fr); gap: 80px; }
.legal-toc { position: sticky; top: calc(var(--hd-h) + 32px); align-self: start; font-size: 15px; }
.legal-toc h2 { font-size: 16px; margin-bottom: 12px; }
.legal-toc ol { list-style: none; }
.legal-toc li + li { margin-top: 6px; }
.legal-toc a { color: var(--c-text); }
.legal-body { max-width: 760px; }
.legal-body section + section { margin-top: 56px; }
.legal-body h2 { font-size: 26px; line-height: 1.25; margin-bottom: 16px; }
.legal-body h3 { font-size: 19px; margin: 28px 0 8px; }
.legal-body p + p { margin-top: 14px; }
.legal-body ul { list-style: disc; padding-left: 22px; margin: 14px 0; }
.legal-body li + li { margin-top: 6px; }
.legal-body { overflow-wrap: break-word; }

/* Klebender Knopf auf dem Handy. Der Fuss bekommt darunter Platz, damit
   die Rechtslinks nicht verdeckt werden. */
.cta-bar { display: none; }


/* ── 20b. Methode (methode.html) ──────────────────────────────
   Hero mit dem IODA-Kreis rechts: nur Konturen, keine Flaechen, kein
   Schein. Darunter die vier Stufen in 4 + 8 Spalten: links klebt der
   Kreis noch einmal (320px, auf einem schwarzen Feld, damit die weissen
   Konturen auf Weiss stehen), rechts die Stufen untereinander. Die Stufe
   in der Fenstermitte fuellt ihren Buchstaben blau (site.js). Schmal wird
   aus dem Kreis eine klebende Reihe der vier Buchstaben. Die
   Zick-Zack-Reihen (.zz) nutzt journal.html und hier „Im Journal“. */

/* Methode-Hero wie Bloombergs "Trading Solutions": schwarz, nach rechts
   in kraeftiges Blau. Rechts vier Glasebenen, isometrisch geneigt
   (rotateX 60, rotateZ 45), leicht transparent, Beschriftung kursiv in
   Versalien; beim Laden schweben sie nacheinander ein (--k). */
.mhero { padding-block: 96px 104px; overflow: hidden; }
.mhero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.mhero h1 { max-width: 560px; }
/* Visual: Monitor, Drahtgitter-Turm und vier Glaskarten wie Leitersprossen.
   Der Turm steht in der Schraege rotateX(55deg) rotateZ(-35deg); eine
   Sprosse ist --g hoch (translateZ). Jede Karte laeuft dieselbe Schleife
   (--t = vier Takte), um je einen Takt versetzt: unten aus dem Monitor
   einblenden, drei Sprossen steigen, oben ausblenden. Pro Takt 1,2 s
   Bewegung, der Rest Pause. Nur transform und opacity. */
.mviz { --g: 64px; --t: 10s; position: relative; height: 560px; }
.mv-glow { position: absolute; left: 30%; top: 8%; width: 70%; height: 70%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.35), rgba(120, 160, 255, 0.12) 50%, transparent); }
/* Szene 1,6-mal groesser, mittig in der rechten Haelfte; rechts
   angeschnitten ist okay (der Hero schneidet ab). */
.mv-scene { position: absolute; inset: 0; perspective: 1800px; transform: scale(var(--s, 1.6)); transform-origin: 50% 50%; }
.mv-tower { position: absolute; left: 50%; top: 68%; width: 240px; height: 150px; margin: -75px 0 0 -120px; transform-style: preserve-3d; transform: rotateX(55deg) rotateZ(-35deg); }
.mv-frame, .mv-card { position: absolute; inset: 0; border-radius: 14px; }
.mv-frame { border: 1px solid rgba(255, 255, 255, 0.25); transform: translateZ(calc(var(--f) * var(--g) / 2)); }
.mv-post { position: absolute; width: 1px; height: calc(var(--g) * 4); background: rgba(255, 255, 255, 0.25); transform-origin: top; transform: rotateX(90deg); }
.mv-post.is-tl { left: 6px; top: 6px; }
.mv-post.is-tr { right: 6px; top: 6px; }
.mv-post.is-bl { left: 6px; top: calc(100% - 6px); }
.mv-post.is-br { right: 6px; top: calc(100% - 6px); }
.mv-card {
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.14));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 0 40px rgba(26, 92, 255, 0.25);
  opacity: 0;
  animation: mv-rise var(--t) cubic-bezier(.45, 0, .25, 1) infinite;
  /* --p: Startpunkt in der Schleife (I oben, O Mitte, D unten, A unten unsichtbar). */
  animation-delay: calc(var(--p) * var(--t) * -1);
}
.mv-lab { position: absolute; right: 14px; bottom: 10px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 15px; font-style: italic; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.82); }
.mv-lab.is-on { color: var(--c-white); opacity: 0; animation: mv-lab var(--t) cubic-bezier(.45, 0, .25, 1) infinite; animation-delay: inherit; }
/* Ein Takt = 25 %, davon 12 % Bewegung. Unten (0) unsichtbar am Fuss des
   Gitters, beim Aufsteigen weich eingeblendet, dann Sprosse 1, 2 (Mitte,
   hell), 3, oben (4) ausgeblendet. */
@keyframes mv-rise {
  0%       { transform: translateZ(0); opacity: 0; }
  12%, 25% { transform: translateZ(var(--g)); opacity: .72; }
  37%, 50% { transform: translateZ(calc(var(--g) * 2)); opacity: 1; }
  62%, 75% { transform: translateZ(calc(var(--g) * 3)); opacity: .72; }
  87%, 100% { transform: translateZ(calc(var(--g) * 4)); opacity: 0; }
}
@keyframes mv-lab {
  0%, 25%  { opacity: 0; }
  37%, 50% { opacity: 1; }
  62%, 100% { opacity: 0; }
}
.mviz.is-paused :is(.mv-card, .mv-lab) { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .mv-card { animation: none; opacity: .75; transform: translateZ(calc((4 - var(--k)) * var(--g) - var(--g) / 2)); }
  .mv-card[style*="--k:1"] { opacity: 1; }
  .mv-lab.is-on { animation: none; }
  .mv-card[style*="--k:1"] .mv-lab.is-on { opacity: 1; }
}

/* Anker-Leiste unter dem Hero, klebt unter dem Kopf. */
.manchor { position: sticky; top: var(--hd-h); z-index: 40; border-bottom: 1px solid var(--c-line); background: var(--c-white); }
.manchor-in { display: flex; gap: 40px; height: 56px; align-items: stretch; overflow-x: auto; scrollbar-width: none; }
.manchor a { display: flex; align-items: center; flex: none; font-size: 15px; font-weight: 600; color: var(--c-text); white-space: nowrap; }
.manchor a:hover { text-decoration: none; color: var(--c-blue); }
html:has(.manchor) { scroll-padding-top: calc(var(--hd-h) + 56px + 24px); }

/* Ueberblick: ein Absatz in voller Breite. */
.mover { font-size: 28px; font-weight: 500; line-height: 1.45; }

/* Die vier Stufen: Karten wie bei Bloomberg. */
.mcards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.mcard { padding: 32px 28px 36px; border-radius: var(--r-card); background: var(--c-tile); }
.mcard-icon { width: 32px; height: 32px; fill: none; stroke: var(--c-blue); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mcard-k { margin-top: 28px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); }
.mcard h3 { margin: 6px 0 10px; font-size: 21px; }
.mcard p:not(.mcard-k) { font-size: 16px; line-height: 1.55; color: var(--c-muted); }
.ioda { display: block; width: 100%; max-width: 400px; margin-left: auto; overflow: visible; }
.ioda path, .ioda circle { fill: none; stroke: var(--c-white); stroke-width: 1.25; }
.ioda marker path { stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.ioda text { fill: var(--c-white); font-family: var(--font); font-size: 48px; font-weight: 600; text-anchor: middle; dominant-baseline: central; }

/* Sieh es dir in echt an: zwei Videokarten. */
.mvids { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.mvid h3 { margin-top: 20px; font-size: 22px; }
.mvid p { margin-top: 6px; font-size: 17px; color: var(--c-muted); }

/* Abschluss Methode: schwarze Box, zwei gleich grosse Haelften, dazwischen
   eine duenne Linie; schmal untereinander. */
.cta-two { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border-radius: var(--r-lg); background: var(--c-black); color: var(--c-white); }
.cta-half { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-height: 600px; padding: 64px 64px 0; overflow: hidden; }
.cta-half > :not(.cta-mon) { position: relative; z-index: 1; }
.cta-half + .cta-half { border-left: 1px solid rgba(255, 255, 255, 0.14); }
.cta-half .kicker { margin-bottom: 14px; color: var(--c-blue-lt); }
.cta-half h2 { margin-bottom: 16px; }
.cta-half p:not(.kicker) { max-width: 440px; color: var(--c-on-dark); }
.cta-half p:not(.kicker) { margin-bottom: 36px; }
.cta-half .go { margin-top: 0; }
@media (max-width: 760px) {
  .cta-two { grid-template-columns: 1fr; border-radius: 12px; }
  .cta-half { padding: 40px 24px; }
  .cta-half + .cta-half { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.14); }
}



.zz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; }
.zz.flip .zz-copy { order: 2; }
.zz-copy h2 { margin-bottom: 8px; }
.zz-copy h3 { margin-top: 28px; font-size: 17px; font-weight: 600; }
.zz-copy h3 + p { margin-top: 4px; }
.zz-copy p { font-size: 17px; }
.zz-copy h2 + p { margin-top: 16px; }
.zz-copy p + p { margin-top: 16px; }
.zz-copy .zz-link { margin-top: 32px; }

.screen { padding: 12px; border-radius: var(--r-frame); background: #0b0b0b; }
.screen img { width: 100%; border-radius: var(--r); }
.screen img.crop { aspect-ratio: 16 / 10; object-fit: cover; object-position: left top; }


/* ── 20c. Journal (journal.html) ─────────────────────────────
   Hero 760px: Text links, vertikal mittig zum animierten Equity-Panel
   (.eqp) rechts, das im Hero zusaetzlich die Kalender-Reihe zeigt. Darunter das
   Intro, die Kacheln vom Ansatz, Zick-Zack-Reihen wie auf methode.html
   und der Preis als eine Zeile zwischen zwei Linien (.jfree, auch auf
   coaching.html). */

.jhero {
  --w: min(100% - 2 * var(--pad), var(--max));
  position: relative;
  height: 760px;
  overflow: hidden;
  background: var(--c-black);
  color: var(--c-white);
}
.jhero .container { position: relative; z-index: 1; display: flex; align-items: center; height: 100%; }
.jhero-copy { max-width: 520px; }
.jhero-copy h1 { margin-bottom: 24px; }
.jhero-copy > p:not(.kicker) { margin-bottom: 40px; color: var(--c-on-dark); }
.jhero-shot {
  position: absolute;
  top: 50%;
  left: calc((100% - var(--w)) / 2 + var(--w) * 0.47);
  width: calc(var(--w) * 0.53);
  transform: translateY(-50%);
}


/* Equity-Panel (.eqp, nur journal.html): Nachbau des
   Handelsberichts als App-Fenster mit Demo-Werten. Kommt es ins Bild,
   setzt site.js .is-in: die Kurve zeichnet sich in 1,6s ein, der Verlauf
   blendet nachlaufend ein, die Zahlen zaehlen hoch, am Ende pulsiert ein
   Punkt. Ohne Skript und bei reduzierter Bewegung steht der Endzustand. */
.eqp { margin: 0; overflow: hidden; border: 1px solid #262a33; border-radius: var(--r-frame); background: #0c0e13; color: var(--c-white); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8); }
.eqp-bar { display: flex; align-items: center; gap: 14px; height: 42px; padding: 0 16px; border-bottom: 1px solid #1d2028; }
.eqp-dots { display: flex; gap: 6px; }
.eqp-dots i { width: 10px; height: 10px; border-radius: 50%; background: #2a2e38; }
.eqp-title { font-size: 14px; font-weight: 600; }
.eqp-tag { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: #1a1e27; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #8A8F98; }
.eqp-main { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); gap: 24px; align-items: center; padding: 28px 24px 20px; }
.eqp-total b { display: block; font-size: 38px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.eqp-total > span { display: block; margin-top: 8px; font-size: 13px; line-height: 1.4; color: #8A8F98; }
.eqp-chart { display: block; width: 100%; height: auto; overflow: visible; }
.eqp-line { fill: none; stroke: #1F5BFF; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.eqp-dot { fill: #1F5BFF; }
.eqp-pulse { fill: none; stroke: #1F5BFF; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.eqp-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; border-top: 1px solid #1d2028; }
.eqp-stats > div { padding: 16px 16px 18px; }
.eqp-stats > div + div { border-left: 1px solid #1d2028; }
.eqp-stats dt { font-size: 12px; color: #8A8F98; }
.eqp-stats dd { margin: 4px 0 0; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.eqp-stats dd.is-loss { color: #E8A33D; }
.js .eqp:not(.is-in) .eqp-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .eqp:not(.is-in) .eqp-area, .js .eqp:not(.is-in) .eqp-dot { opacity: 0; }
.js .eqp.is-in .eqp-line { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s cubic-bezier(.22, .8, .3, 1); }
.js .eqp.is-in .eqp-area { transition: opacity 1.2s ease .6s; }
.js .eqp.is-in .eqp-dot { transition: opacity .3s ease 1.5s; }
.eqp.is-in .eqp-pulse { animation: eqp-pulse 2.4s ease-out 1.8s infinite; }
@keyframes eqp-pulse { 0% { opacity: .8; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(3.2); } }
@media (prefers-reduced-motion: reduce) {
  .js .eqp:not(.is-in) .eqp-line, .js .eqp.is-in .eqp-line { stroke-dashoffset: 0; transition: none; }
  .js .eqp:not(.is-in) .eqp-area, .js .eqp:not(.is-in) .eqp-dot { opacity: 1; }
  .eqp.is-in .eqp-pulse { animation: none; }
}

/* Kalender im Hero-Panel (nur journal.html): zwei Wochen Mo bis Fr plus
   KW-Summe, Stil wie im Journal. Gewinntage blau, Staerke ueber --a
   (Betrag), Verlusttage dunkel mit Bernstein-Rand, ein Tag leer. Nach der
   Kurve erscheinen die Tage nacheinander (--i, je 60ms), dann die
   KW-Summen. */
.eqp-cal { padding: 16px 16px 18px; border-top: 1px solid #1d2028; }
/* Equity-Feld zwischen Kennzahlen und Kalender (journal.html): nur
   Ueberschrift und Zeitraum, Linie zeichnet sich in 1,2 s. */
.eqp-eq { padding: 16px 16px 6px; border-top: 1px solid #1d2028; }
.eqp-eq .eqp-cal-head { margin-bottom: 6px; }
.eqp-eq-chart { height: 84px; }
.js .eqp.is-in .eqp-eq-chart .eqp-line { transition-duration: 1.2s; }
.eqp-cal-head { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 12px; font-weight: 600; color: #8A8F98; }
.eqp-cal-head span:first-child { color: var(--c-white); }
.eqp-cal-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, .8fr); gap: 6px; }
.eqp-cal-grid > span { padding-bottom: 2px; font-size: 11px; text-align: center; color: #8A8F98; }
.eqp-day { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 52px; padding: 6px 7px; border: 1px solid transparent; border-radius: 6px; background: #161922; }
.eqp-day > span { position: absolute; top: 4px; right: 6px; font-size: 10px; color: #8A8F98; }
.eqp-day b { font-size: 13px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.eqp-day small { font-size: 10px; color: rgba(255, 255, 255, 0.6); }
.eqp-day.is-win { background: rgba(31, 91, 255, var(--a)); }
.eqp-day.is-win > span { color: rgba(255, 255, 255, 0.75); }
.eqp-day.is-loss { border-color: #E8A33D; background: #12141b; }
.eqp-day.is-loss b { color: #E8A33D; }
.eqp-day.is-empty { background: #11131a; }
.eqp-kw { display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 6px; background: #12141b; }
.eqp-kw small { font-size: 10px; color: #8A8F98; }
.eqp-kw b { font-size: 13px; font-weight: 600; }
.js .eqp:not(.is-in) .eqp-day { opacity: 0; transform: scale(.9); }
.js .eqp:not(.is-in) .eqp-kw { opacity: 0; }
.js .eqp.is-in .eqp-day { transition: opacity .3s ease, transform .3s cubic-bezier(.2, .8, .3, 1.2); transition-delay: calc(1.5s + var(--i) * 60ms); }
.js .eqp.is-in .eqp-kw { transition: opacity .4s ease 2.2s; }
@media (prefers-reduced-motion: reduce) {
  .js .eqp:not(.is-in) .eqp-day, .js .eqp:not(.is-in) .eqp-kw { opacity: 1; transform: none; }
  .js .eqp.is-in .eqp-day, .js .eqp.is-in .eqp-kw { transition: none; }
}

.jintro { max-width: 820px; margin-bottom: 56px; font-size: 22px; line-height: 1.55; }

.jfree {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px 48px;
  padding-block: 56px;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.jfree h2 { font-size: 28px; }
.jfree p { margin-top: 8px; color: var(--c-muted); }
.jfree .jfree-note { margin-top: 12px; font-size: 15px; }
.jfree-go { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }

/* Hinweis unter den Hero-Knoepfen und beim Plugin. */
.jhero-note, .jd-note { display: inline-block; padding: 6px 12px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; font-size: 14px; color: var(--c-on-dark); }
.jhero-note { margin-top: 32px; }
.zz-copy .jd-note { margin-top: 24px; border-color: var(--c-blue); color: var(--c-blue); font-size: 14px; font-weight: 600; }
.jd-plus { display: inline-block; padding: 2px 10px; border: 1px solid var(--c-blue); border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-blue); }

/* ── Journal-Demos (.jd, journal.html) ──
   HTML-Nachbauten im Stil des Journals: schwarz, Karten #0A0A0C mit
   1px #1E1E22, Gewinn weiss bzw. blau, Verlust Bernstein. Alle Werte
   sind Demo-Werte. Animation ueber data-eqp (site.js setzt .is-in):
   Zahlen zaehlen hoch, Kurven (.jd-line) zeichnen sich, Kacheln
   (.jd-pop) erscheinen nacheinander nach --i, Balken wachsen. */
.jd-wrap { min-width: 0; }
.jd { --jd-line: #1E1E22; --jd-mute: #8A8F98; --jd-up: #6B96FF; --jd-down: #E8A33D; container-type: inline-size; margin: 0; padding: 20px; border: 1px solid var(--jd-line); border-radius: var(--r-frame); background: #000; color: var(--c-white); font-size: 14px; line-height: 1.4; font-variant-numeric: tabular-nums; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6); }
.jd-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.jd-bar b { font-size: 14px; font-weight: 600; }
.jd-tag { flex: none; padding: 2px 8px; border-radius: 999px; background: #16161A; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--jd-mute); }
.jd-card { padding: 14px; border: 1px solid var(--jd-line); border-radius: var(--r-card); background: #0A0A0C; }
.jd-k { font-size: 12px; color: var(--jd-mute); }
.jd .is-up { color: var(--jd-up); }
.jd .is-down { color: var(--jd-down); }
.jd dl, .jd dd { margin: 0; }
.jd dt { font-size: 12px; color: var(--jd-mute); }
.jd dd { margin-top: 4px; font-size: 18px; font-weight: 600; white-space: nowrap; }
.jd svg { display: block; }
.jd h3, .jd h4 { font-size: 14px; font-weight: 600; }

.jd-line { fill: none; stroke: #1F5BFF; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.jd-line.is-amber { stroke: #E8A33D; }
.jd-area { fill: rgba(31, 91, 255, 0.18); }
.jd-uw { fill: rgba(232, 163, 61, 0.14); }
.jd-zero { stroke: var(--jd-line); stroke-width: 1; vector-effect: non-scaling-stroke; }

.js .jd:not(.is-in) .jd-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .jd.is-in .jd-line { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s cubic-bezier(.22, .8, .3, 1); }
.js .jd:not(.is-in) :is(.jd-area, .jd-uw) { opacity: 0; }
.js .jd.is-in :is(.jd-area, .jd-uw) { transition: opacity 1s ease .6s; }
.js .jd:not(.is-in) .jd-pop { opacity: 0; transform: translateY(6px); }
.js .jd.is-in .jd-pop { transition: opacity .4s ease calc(var(--i, 0) * 40ms), transform .4s ease calc(var(--i, 0) * 40ms); }
.js .jd:not(.is-in) :is(.jds-rbars i, .jds-zbar i, .jdp-bar i) { transform: scale(0); }
.js .jd.is-in :is(.jds-rbars i, .jds-zbar i, .jdp-bar i) { transition: transform 1s cubic-bezier(.22, .8, .3, 1) .3s; }
@media (prefers-reduced-motion: reduce) {
  .js .jd .jd-line, .js .jd :is(.jd-area, .jd-uw), .js .jd .jd-pop, .js .jd :is(.jds-rbars i, .jds-zbar i, .jdp-bar i) { stroke-dashoffset: 0; opacity: 1; transform: none; transition: none; }
}

/* Kalender: Mo bis Fr plus KW. Gewinntage blau nach Betrag (--a),
   Verlusttage mit Bernstein-Rand ohne Fuellung. */
.jdc-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; font-weight: 600; }
.jdc-head b { font-size: 20px; }
.jdc-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, .85fr); gap: 5px; }
.jdc-grid > span { padding-bottom: 2px; font-size: 11px; text-align: center; color: var(--jd-mute); }
.jdc-day { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 62px; padding: 5px 6px; border: 1px solid var(--jd-line); border-radius: 6px; background: #0A0A0C; overflow: hidden; }
.jdc-d { position: absolute; top: 4px; right: 6px; font-size: 10px; color: var(--jd-mute); }
.jdc-day b { font-size: 13px; font-weight: 600; line-height: 1.2; }
.jdc-day small { font-size: 10px; color: rgba(255, 255, 255, 0.6); }
.jdc-day em { margin-bottom: auto; padding-top: 14px; font-size: 9.5px; font-style: normal; font-weight: 600; line-height: 1.15; color: var(--c-white); }
.jdc-day.is-win { border-color: transparent; background: rgba(31, 91, 255, var(--a)); }
.jdc-day.is-win .jdc-d { color: rgba(255, 255, 255, 0.75); }
.jdc-day.is-loss { border-color: #E8A33D; background: transparent; }
.jdc-day.is-loss b { color: #E8A33D; }
.jdc-day.is-empty em { color: var(--jd-mute); }
.jdc-day.is-out { border-color: transparent; background: transparent; }
.jdc-day.is-out .jdc-d { opacity: .5; }
.jdc-ic { position: absolute; top: 4px; left: 5px; display: flex; gap: 2px; }
.jdc-ic svg { width: 11px; height: 11px; fill: none; stroke: rgba(255, 255, 255, 0.7); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.jdc-kw { display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 6px; background: #0A0A0C; }
.jdc-kw small { font-size: 10px; color: var(--jd-mute); }
.jdc-kw b { font-size: 13px; font-weight: 600; }
.jdc-foot { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--jd-line); }
.jdc-foot dd { font-size: 15px; }
.jdc-foot small { font-size: 11px; font-weight: 400; color: var(--jd-mute); }
@container (max-width: 460px) {
  .jdc-day { min-height: 54px; padding: 4px; }
  .jdc-day b { font-size: 11px; }
  .jdc-day small span { display: none; }
  .jdc-day em { font-size: 8px; }
  .jdc-kw b { font-size: 11px; }
  .jdc-foot { grid-template-columns: 1fr 1fr; }
}

/* Daily: Kopf mit Ergebnis und Hinweisen, Workflow-Leiste, offene
   Bewertungen mit Bernstein-Strich. */
.jdd-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.jdd-day { display: flex; flex-direction: column; gap: 2px; }
.jdd-day b { font-size: 30px; font-weight: 600; line-height: 1.15; }
.jdd-hints ul { margin-top: 6px; }
.jdd-hints li { position: relative; padding-left: 14px; font-size: 13px; }
.jdd-hints li + li { margin-top: 4px; }
.jdd-hints li::before { content: ""; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; border-radius: 50%; background: var(--jd-mute); }
.jdd-hints li.is-warn::before { background: #E8A33D; }
.jdd-flow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.jdd-flow li { display: flex; align-items: center; gap: 6px; padding: 5px 10px 5px 6px; border: 1px solid var(--jd-line); border-radius: 999px; background: #0A0A0C; font-size: 12px; color: var(--jd-mute); }
.jdd-flow svg, .jdd-flow i { flex: none; width: 16px; height: 16px; }
.jdd-flow svg { fill: none; stroke: var(--jd-up); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.jdd-flow i { display: grid; place-items: center; border-radius: 50%; background: #16161A; font-size: 10px; font-style: normal; font-weight: 600; }
.jdd-flow .is-done { color: var(--c-white); }
.jdd-flow .is-cur { border-color: #1F5BFF; background: #1F5BFF; color: var(--c-white); }
.jdd-flow .is-cur i { background: rgba(255, 255, 255, 0.2); }
.jdd-open { margin-top: 16px; padding: 10px 12px; border-left: 2px solid #E8A33D; background: #0A0A0C; font-size: 13px; }
.jdd-open span { color: #E8A33D; font-weight: 600; }
@container (max-width: 400px) { .jdd-top { grid-template-columns: 1fr; } }

/* Trade-Detail mit den zwei automatischen Screenshots. */
.jdt-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.jdt-sym { font-size: 20px; font-weight: 600; }
.jdt-dir { padding: 2px 8px; border: 1px solid #E8A33D; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #E8A33D; }
.jdt-head .jd-k { flex-basis: 100%; }
.jdt-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.jdt-stats .jd-card { padding: 10px 12px; }
.jdt-row { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px; align-items: center; margin-top: 14px; }
.jdt-ioda { display: flex; gap: 6px; }
.jdt-ioda b { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--jd-line); border-radius: 6px; background: #0A0A0C; font-size: 13px; color: var(--jd-mute); }
.jdt-ioda b.is-on { border-color: #1F5BFF; background: #1F5BFF; color: var(--c-white); }
.jdt-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.jdt-tools li { padding: 3px 9px; border: 1px solid var(--jd-line); border-radius: 999px; font-size: 12px; color: var(--jd-mute); }
.jdt-tools li.is-on { border-color: rgba(31, 91, 255, 0.6); color: var(--c-white); }
.jdt-chart { margin-top: 16px; }
.jdt-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.jdt-shot { overflow: hidden; border: 1px solid var(--jd-line); border-radius: 6px; background: #0A0A0C; }
.jdt-shot svg { width: 100%; height: auto; aspect-ratio: 2 / 1; padding: 6px 4px 0; }
.jdt-shot span { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-top: 1px solid var(--jd-line); font-size: 11px; color: var(--jd-mute); }
.jdt-shot span svg { width: 13px; height: 13px; padding: 0; aspect-ratio: auto; fill: none; stroke: currentColor; stroke-width: 2; }
.jdt-shot :is(.cu, .cd) path { stroke-width: 1; vector-effect: non-scaling-stroke; }
.jdt-shot .cu { stroke: #6B96FF; fill: #6B96FF; }
.jdt-shot .cd { stroke: #5a5f6b; fill: #5a5f6b; }
.jdt-shot .cm { stroke: #E8A33D; stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.jdt-shot .cmd { fill: #E8A33D; }

/* Statistik: drei Kennzahlen, darunter sechs Karten. */
.jds-kpi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.jds-kpi dd { font-size: 24px; }
.jds-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.jds-grid .jd-card { display: flex; flex-direction: column; min-height: 168px; }
.jds-grid .jd-k { margin: 2px 0 12px; }
.jds-grid .jd-k b { font-weight: 600; }
.jds-svg { width: 100%; height: 90px; margin-top: auto; overflow: visible; }
.jds-rbars { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; align-items: end; height: 96px; margin-top: auto; }
.jds-rbars > div { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.jds-rbars i { display: block; height: calc(var(--h) * 76px); border-radius: 3px 3px 0 0; background: #1F5BFF; transform-origin: bottom; }
.jds-rbars i.is-down { background: #E8A33D; }
.jds-rbars i.is-flat { background: #3a3e48; }
.jds-rbars span { margin-top: 4px; font-size: 10px; text-align: center; color: var(--jd-mute); white-space: nowrap; }
.jds-dots { display: grid; grid-template-columns: repeat(10, 12px); justify-content: space-between; gap: 8px 4px; margin-top: auto; }
.jds-dots i { aspect-ratio: 1; border-radius: 50%; background: #1F5BFF; }
.jds-dots i.l { background: #E8A33D; }
.jds-dots i.b { background: #3a3e48; }
.jds-zones { display: grid; gap: 10px; margin-top: auto; }
.jds-zones li { display: grid; grid-template-columns: 72px minmax(0, 1fr) 40px 62px; gap: 8px; align-items: center; font-size: 12px; }
.jds-zones b { font-weight: 600; text-align: right; }
.jds-zones .is-warn > span:first-child { color: #E8A33D; }
.jds-zbar { height: 6px; border-radius: 3px; background: #16161A; overflow: hidden; }
.jds-zbar i { display: block; width: calc(var(--w) * 100%); height: 100%; border-radius: 3px; background: #1F5BFF; transform-origin: left; }
.jds-zones .is-warn .jds-zbar i { background: #E8A33D; }
.jds-tilt { display: grid; gap: 8px; margin-top: auto; }
.jds-tilt li { display: flex; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid var(--jd-line); font-size: 13px; }
.jds-tilt li:last-child { padding-bottom: 0; border-bottom: 0; }
.jds-tilt span { color: var(--jd-mute); }
@container (max-width: 820px) { .jds-grid { grid-template-columns: 1fr 1fr; } }
@container (max-width: 520px) {
  .jds-grid { grid-template-columns: 1fr; }
  .jds-grid .jd-card { min-height: 0; }
  .jds-kpi { gap: 6px; }
  .jds-kpi .jd-card { padding: 10px; }
  .jds-kpi dd { font-size: 17px; }
  .jds-kpi dt { font-size: 11px; }
}

/* Wochenbericht: Kernsatz, vier Kennzahlen, Wochenkurve, Scorecard. */
.jdw-core { font-size: 17px; font-weight: 600; line-height: 1.35; }
.jdw-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 14px; border-top: 1px solid var(--jd-line); border-bottom: 1px solid var(--jd-line); }
.jdw-kpi > div { padding: 10px 12px; }
.jdw-kpi > div:first-child { padding-left: 0; }
.jdw-kpi > div + div { border-left: 1px solid var(--jd-line); }
.jdw-svg { height: 80px; margin: 14px 0; }
.jdw-score ul { display: grid; gap: 6px; margin-top: 8px; }
.jdw-score li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.jdw-score svg { flex: none; width: 16px; height: 16px; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.jdw-score .is-ok svg { stroke: var(--jd-up); }
.jdw-score .is-miss svg { stroke: #E8A33D; }
.jdw-score .is-miss span { color: #E8A33D; }
@container (max-width: 440px) {
  .jdw-kpi { grid-template-columns: 1fr 1fr; }
  .jdw-kpi > div { padding-left: 0; }
  .jdw-kpi > div:nth-child(odd) { border-left: 0; }
  .jdw-kpi > div:nth-child(even) { padding-left: 12px; }
  .jdw-kpi > div:nth-child(-n+2) { border-bottom: 1px solid var(--jd-line); }
}

/* Prop-Konten nebeneinander, schmal untereinander. */
.jdp-accs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.jdp-acc { display: flex; flex-direction: column; gap: 2px; padding: 12px; }
.jdp-type { align-self: flex-start; margin-bottom: 6px; padding: 1px 7px; border-radius: 999px; background: #16161A; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--jd-mute); }
.jdp-acc > b { font-size: 14px; font-weight: 600; }
.jdp-st { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 12px; color: var(--jd-mute); }
.jdp-st i { width: 6px; height: 6px; border-radius: 50%; background: var(--jd-up); }
.jdp-res { margin-bottom: 8px; font-size: 18px; font-weight: 600; }
.jdp-bar { height: 6px; margin-top: 4px; border-radius: 3px; background: #16161A; overflow: hidden; }
.jdp-bar i { display: block; width: calc(var(--w) * 100%); height: 100%; border-radius: 3px; background: #1F5BFF; transform-origin: left; }
.jdp-bar.is-low i { background: #E8A33D; }
.jdp-left { margin-top: 4px; font-size: 11px; color: var(--jd-mute); }
.jdp-sum { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--jd-line); }
.jdp-sum b { font-size: 18px; font-weight: 600; }
@container (max-width: 460px) { .jdp-accs { grid-template-columns: 1fr; } }

/* Wissen: drei Beitrags-Kacheln. */
.jdk-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.jdk-post { display: flex; flex-direction: column; gap: 4px; padding: 0 0 12px; overflow: hidden; }
.jdk-cover { display: grid; place-items: center; aspect-ratio: 16 / 9; margin-bottom: 8px; background: radial-gradient(circle at 30% 20%, rgba(31, 91, 255, 0.45), transparent 60%), #0E0F14; }
.jdk-cover svg { width: 26px; height: 26px; fill: none; stroke: var(--c-white); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.jdk-cat { padding-inline: 12px; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--jd-up); }
.jdk-post b { padding-inline: 12px; font-size: 14px; font-weight: 600; line-height: 1.3; }
.jdk-post .jd-k { margin-top: auto; padding: 6px 12px 0; }
@container (max-width: 460px) {
  .jdk-posts { grid-template-columns: 1fr; }
  .jdk-post { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 0; padding: 0; }
  .jdk-cover { grid-row: 1 / 4; aspect-ratio: auto; height: 100%; margin: 0; }
  .jdk-cat { padding-top: 10px; }
  .jdk-post .jd-k { padding-bottom: 10px; }
}

/* Feature-Uebersicht: kurze Karten im Raster. */
.jf-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.jf-card { padding: 24px 22px; border-radius: var(--r-card); background: var(--c-tile); }
.jf-card h3 { margin-bottom: 8px; font-size: 17px; font-weight: 600; line-height: 1.3; }
.jf-card p { font-size: 15px; line-height: 1.5; color: var(--c-muted); }
.jf-tag { display: inline-block; margin-left: 4px; padding: 1px 7px; border: 1px solid var(--c-blue); border-radius: 999px; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; vertical-align: 2px; color: var(--c-blue); }
@media (max-width: 1180px) { .jf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .jf-grid { grid-template-columns: 1fr 1fr; gap: 12px; } .jf-card { padding: 20px 18px; } }
@media (max-width: 480px) { .jf-grid { grid-template-columns: 1fr; } }


/* ── 20d. Ausbildungs-Hero (mentoring.html) ───────────────────
   Vorbild Bloomberg „Data Solutions", in Blau. Ausnahme von den
   Farbregeln oben: nur hier gibt es einen Verlauf.
   Masse bezogen auf die Hero-Breite W und H = 640px:
     Monitor     ab 0,58 W / 0,30 H, Ecke 18px, Bezel 14px, Bild -40 %
     Verlauf     transparent bei 0,55 W, #0B2FA8 bei 0,80 W, #1A5CFF am
                 Rand; hinter dem Monitor voll, darueber mit 20 %
     Text        hoechstens 0,42 W breit, etwas ueber der Mitte */

.ahero {
  --w: min(100% - 2 * var(--pad), var(--max));
  --grad: linear-gradient(90deg, transparent 55%, #0B2FA8 80%, #1A5CFF 100%);
  position: relative;
  height: 640px;
  overflow: hidden;
  background: #000 var(--grad);
  color: var(--c-white);
}
.ahero-art { position: absolute; inset: 0; }
.ahero-mon {
  position: absolute;
  left: 58%;
  top: 30%;
  width: 60%;
  height: 90%;
  padding: 14px 0 0 14px;
  border: 1px solid #333;
  border-right: 0;
  border-bottom: 0;
  border-top-left-radius: 18px;
  background: #0b0b0b;
}
.ahero-mon img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: left top;
  border-top-left-radius: 6px;
  filter: brightness(0.6);
}
.ahero-veil { position: absolute; inset: 0; background: var(--grad); opacity: 0.2; }
.ahero-in { position: relative; z-index: 1; display: flex; align-items: center; height: 100%; }
.ahero-copy { max-width: min(560px, 42vw); padding-bottom: 130px; }
.ahero-copy h1 { margin-bottom: 24px; }
.ahero-copy .lead { color: var(--c-on-dark); }
.ahero-copy .btn-group { margin-top: 40px; align-items: center; column-gap: 32px; }
.ahero-copy .hero-link, .ahero-copy .hero-link:hover { text-decoration: none; }
.ahero-shot { display: none; }


/* ── 20e. Lernsystem (lernsystem.html) ───────────────────────
   Die Bausteine mit echten Bildschirmen. Hero mit drei versetzten
   App-Fenstern (.ls-col), die unten angeschnitten sind; Einleitung;
   die Bausteine als nummerierte Szenen (.ws-scene) mit Bildern und
   Videos (.vid). Danach Haltung, drei Einstiege, FAQ und
   der graue Abschluss ohne Bild. App-Fenster (.win) haben die Leiste
   des Equity-Panels (.eqp-bar). */

.ls-top { padding-bottom: 0; overflow: hidden; }
.ls-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: end; }
.ls-hero-copy { padding-bottom: 112px; }
.ls-col { position: relative; height: 500px; }
.ls-col .win { position: absolute; width: 74%; }
.ls-col .win { transform: rotate(var(--rot)); animation: ls-win-in .9s cubic-bezier(.22, .8, .3, 1) var(--d) both; }
.ls-w1 { --rot: -2deg; --d: .15s; top: 0; left: 0; }
.ls-w2 { --rot: 2deg; --d: .3s; top: 96px; right: -2%; }
.ls-w3 { --rot: -1deg; --d: .45s; top: 220px; left: 10%; }
@keyframes ls-win-in { from { opacity: 0; transform: translateY(24px) rotate(var(--rot)); } to { opacity: 1; transform: rotate(var(--rot)); } }

/* App-Fenster: dunkler Rahmen, Leiste mit drei Punkten, darunter das Bild
   oder der Platzhalter. */
.win { margin: 0; overflow: hidden; border: 1px solid #262a33; border-radius: var(--r-frame); background: #0c0e13; color: var(--c-white); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.55); }
.win-body img { display: block; width: 100%; height: auto; }
.win-mmp { container-type: inline-size; }
.win-net { overflow: hidden; aspect-ratio: 16 / 10; border-radius: var(--r-frame); background: #000; }
.win-net svg { display: block; width: 100%; height: 100%; }

.ws-intro-sec { padding-top: 120px; }
.ws-intro { max-width: 820px; margin-inline: auto; font-size: 26px; font-weight: 500; line-height: 1.5; text-align: center; }


/* Die Bausteine: kompakt wie die Education-Seite von Bloomberg. Text und
   Bild je halb, vertikal mittig, Bild abwechselnd rechts und links, 96px
   zwischen den Szenen, keine Linien. Alle Bilder 16:9 mit runden Ecken
   und feinem Schatten (.ws-media); die HTML-Nachbauten stehen oben
   buendig darin und werden unten abgeschnitten. */
.ws-scenes { max-width: 1040px; margin-inline: auto; }
.ws-scene { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; scroll-margin-top: 24px; }
.ws-scene + .ws-scene { margin-top: 96px; }
.ws-scene.flip .ws-copy { order: 2; }
.ws-scene.flip .ws-shot { justify-self: end; }
.ws-shot { width: 100%; max-width: 480px; }
.ws-copy .kicker { margin-bottom: 10px; font-size: 13px; }
.ws-copy h3 { margin-bottom: 10px; font-size: 22px; font-weight: 600; }
.ws-copy p:not(.kicker) { font-size: 16px; line-height: 1.6; color: var(--c-muted); }
.ws-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ws-tags span { padding: 2px 9px; border: 1px solid var(--c-blue); border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-blue); }
.ws-copy .ws-link { margin-top: 16px; }
.ws-copy .ws-link a { color: var(--c-blue); font-size: 16px; }

.ws-media { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-frame); background: #0c0e13; box-shadow: 0 12px 32px -14px rgba(0, 0, 0, 0.35); }
.ws-img { height: auto; object-fit: cover; object-position: top; }
.ws-panel .eqp { border: 0; border-radius: 0; box-shadow: none; }
.ws-panel .eqp-bar { display: none; }
/* Im 16:9-Ausschnitt immer Summe und Kurve nebeneinander, auch schmal. */
.ws-panel .eqp-main { grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); gap: 16px; padding: 20px; }
.ws-panel .eqp-total b { font-size: 28px; }
.ws-mmp { container-type: inline-size; }
.ws-mmp .mmp { height: auto; }
.ws-net { background: #000; }
.ws-net svg { display: block; width: 100%; height: 100%; }

/* Demo-Panels Muster und Wochenbericht: alle Masse in em, die Schrift
   waechst mit der Breite (cqw), so passt der Inhalt auch schmal in den
   16:9-Ausschnitt. "ohne Zone" und die Sperre in Bernstein wie die
   Verlusttage im Journal-Kalender. */
.ws-fit { container-type: inline-size; }
.ws-fit .eqp { display: flex; flex-direction: column; height: 100%; border: 0; border-radius: 0; box-shadow: none; font-size: 3cqw; }
.jtl-head, .wbp-head { padding: 1.2em 1.4em .8em; }
.jtl-head { display: flex; justify-content: space-between; align-items: baseline; }
.jtl-head b { font-size: 1em; font-weight: 600; }
.jtl-head span, .wbp-head span { font-size: .75em; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #8A8F98; }
.jtl-list { width: 100%; border-collapse: collapse; font-size: .92em; font-variant-numeric: tabular-nums; }
.jtl-list th, .jtl-list td { padding: .55em .6em; border-bottom: 1px solid #1d2028; text-align: left; white-space: nowrap; }
.jtl-list th { padding-block: .4em; border-top: 1px solid #1d2028; font-size: .82em; font-weight: 600; color: #8A8F98; }
.jtl-list :is(th, td):first-child { padding-left: 1.5em; color: #8A8F98; }
.jtl-list :is(th, td):last-child { padding-right: 1.5em; text-align: right; }
.jtl-list .is-win { color: var(--c-blue-lt); }
.jtl-list tr.is-warn td:first-child { box-shadow: inset 2px 0 #E8A33D; }
.jtl-tag { display: inline-block; padding: .05em .6em; border: 1px solid #2a2e38; border-radius: 999px; font-size: .85em; color: #8A8F98; }
.is-warn .jtl-tag { border-color: #E8A33D; color: #E8A33D; }
.jtl-lock { display: flex; align-items: center; gap: .5em; margin-top: auto; padding: .8em 1.5em; border-top: 1px solid #1d2028; background: rgba(232, 163, 61, 0.08); font-size: .92em; font-weight: 600; color: #E8A33D; }
.jtl-lock svg { flex: none; width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.wbp-head span { display: block; margin-bottom: .35em; }
.wbp-head b { display: block; font-size: 1.15em; font-weight: 600; line-height: 1.3; }
.wbp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid #1d2028; border-bottom: 1px solid #1d2028; }
.wbp-stats > div { padding: .7em .9em .8em; }
.wbp-stats > div:first-child { padding-left: 1.5em; }
.wbp-stats > div + div { border-left: 1px solid #1d2028; }
.wbp-stats dt { font-size: .8em; color: #8A8F98; }
.wbp-stats dd { margin: .2em 0 0; font-size: 1.2em; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wbp-chart { margin-top: auto; padding: 1em 1.5em 1.2em; box-sizing: border-box; }

/* Video: eigenes Vorschaubild (Standbild aus assets/thumbs/ mit Verlauf),
   Titel und Zeile als HTML darueber, runder blauer Play-Knopf unten
   links. Ohne Vimeo-ID kein Knopf und kein Klick. Der Klick ersetzt das
   Vorschaubild durch den Player (site.js); vorher laedt nichts von Vimeo. */
.vid-poster { padding: 0; border: 0; background-color: #0c0e13; background-size: cover; background-position: center; color: var(--c-white); font: inherit; text-align: left; cursor: default; }
/* Vorschaubild unverdeckt, nur unten ein leichter Verlauf fuer Titel
   und Play-Knopf. */
.vid-poster::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0, rgba(0, 0, 0, 0.35) 28%, transparent 50%); }
.vid-text { position: absolute; z-index: 1; left: 28px; right: 28px; bottom: 26px; }
.vid.has-id .vid-text { left: 108px; }
.vid-text b { display: block; font-size: 26px; font-weight: 700; line-height: 1.1; }
.vid-text small { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-blue-lt); }
.vid-play { position: absolute; z-index: 1; left: 28px; bottom: 24px; display: none; width: 64px; height: 64px; border-radius: 50%; background: #1F5BFF; transition: transform .2s ease; }
.vid-play::after { content: ""; position: absolute; top: 50%; left: 54%; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff; transform: translate(-50%, -50%); }
.vid.has-id .vid-play { display: block; }
.vid.has-id .vid-poster { cursor: pointer; }
.vid.has-id .vid-poster:hover .vid-play, .vid.has-id .vid-poster:focus-visible .vid-play { transform: scale(1.08); }
.vid-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r-frame); background: #000; }
.vid-note { margin-top: 10px; font-size: 13px; color: var(--c-muted); }


/* Haltung: drei Aussagen mit Linie darueber. */
.ws-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.ws-values li { padding-top: 28px; border-top: 1px solid var(--c-line); }
.ws-values b { display: block; margin-bottom: 12px; font-size: 30px; font-weight: 600; line-height: 1.2; }
.ws-values p { font-size: 17px; color: var(--c-muted); }
.ws-more { margin-top: 48px; }

/* Einstiege: drei graue Karten, Knoepfe unten. */
.ws-entry { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ws-card { display: flex; flex-direction: column; padding: 40px 36px; border-radius: var(--r-card); background: var(--c-tile); }
.ws-card-k { margin-bottom: 12px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c-blue); }
.ws-card h3 { margin-bottom: 12px; font-size: 24px; }
.ws-card > p:not(.ws-card-k) { font-size: 17px; line-height: 1.55; }
.ws-card .btn-group { margin-top: auto; padding-top: 32px; align-items: center; column-gap: 24px; }
.ws-hint { margin-top: 48px; font-size: 22px; font-weight: 500; text-align: center; }

/* Abschluss ohne Bild: eine Spalte. */
.cta-box.ls-cta { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 72px 80px; }
.ls-cta .cta-copy { max-width: 640px; padding-block: 0; }
.ls-cta .btn-group { margin-top: 36px; }

@media (prefers-reduced-motion: reduce) {
  .ls-col .win { animation: none; }
}
@media (max-width: 1180px) {
  .ws-entry { grid-template-columns: 1fr; }
  .ws-card .btn-group { margin-top: 0; }
}
/* Schmal: Zeitleiste als Leiste unter dem Kopf, Szenen untereinander,
   Bild immer unter dem Text. */
@media (max-width: 1080px) {
  .ls-hero { grid-template-columns: 1fr; gap: 48px; }
  .ls-hero-copy { padding-bottom: 0; }
  .ls-col { height: min(68vw, 420px); }
  .ws-scene, .ws-scene.flip { grid-template-columns: 1fr; gap: 28px; }
  .ws-scene + .ws-scene { margin-top: 72px; }
  .ws-scene.flip .ws-copy { order: 0; }
  .ws-shot, .ws-scene.flip .ws-shot { max-width: none; justify-self: stretch; }
  .ws-values { grid-template-columns: 1fr; gap: 32px; }
  .cta-box.ls-cta { padding: 56px 40px; }
}
@media (max-width: 640px) {
  .ws-intro { font-size: 21px; }
  .vid-text { left: 20px; right: 20px; bottom: 18px; }
  .vid.has-id .vid-text { left: 90px; }
  .vid-text b { font-size: 24px; }
  .vid-play { left: 20px; bottom: 18px; width: 56px; height: 56px; }
  .ws-values b { font-size: 24px; }
  .ws-card { padding: 28px 24px; }
  .ws-hint { font-size: 19px; }
  .cta-box.ls-cta { padding: 40px 24px; }
}


/* ── 20f. Kontakt (kontakt.html) ─────────────────────────────
   Links das Formular hell (.cf.kt-form), oben die vier Themen als
   Kacheln (Radio-Knoepfe, die gewaehlte mit blauem Rand), darunter der
   passende Hinweis. Rechts die anderen Wege. Schmal: Kacheln 2x2,
   rechte Spalte unter dem Formular. */
.kt { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 80px; align-items: start; }
.cf.kt-form { gap: 20px; padding: 0; background: none; }
.kt-form .cf-field { color: var(--c-text); font-weight: 500; }
.kt-form .cf-field small { color: var(--c-muted); font-weight: 400; }
.kt-form .cf-field input, .kt-form .cf-field textarea { border-color: #D1D5DB; background: var(--c-white); color: var(--c-text); }
.kt-form .cf-field textarea { min-height: 160px; }
.kt-form .cf-check { color: var(--c-muted); }
.kt-form .cf-check a { color: var(--c-blue); }
.kt-form .cf-msg.is-error { color: #B91C1C; }
.kt-form .cf-msg a { color: var(--c-blue); }
.kt-form.is-done .cf-msg { padding: 32px; border-radius: var(--r-card); background: var(--c-tile); font-size: 20px; color: var(--c-text); }
.kt-topics { border: 0; padding: 0; margin: 0; min-width: 0; }
.kt-topics legend { margin-bottom: 12px; padding: 0; font-size: 20px; font-weight: 600; }
.kt-topic-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kt-topic { position: relative; cursor: pointer; }
.kt-topic input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kt-topic span { display: flex; align-items: center; justify-content: center; min-height: 72px; padding: 12px; border: 2px solid transparent; border-radius: var(--r-card); background: var(--c-tile); font-weight: 600; text-align: center; transition: border-color .15s, background-color .15s; }
.kt-topic:hover span { border-color: var(--c-line); }
.kt-topic input:checked + span { border-color: var(--c-blue); background: var(--c-white); color: var(--c-blue); }
.kt-topic input:focus-visible + span { outline: 2px solid var(--c-blue); outline-offset: 2px; }
.kt-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 16px 20px; border-radius: var(--r-card); background: rgba(31, 91, 255, 0.06); font-size: 16px; }
.kt-hint[hidden] { display: none; }
.kt-hint p { margin: 0; }
.kt-side { display: grid; gap: 12px; }
.kt-side h2 { margin-bottom: 8px; font-size: 20px; }
.kt-way { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 16px; align-items: center; width: 100%; padding: 20px; border: 0; border-radius: var(--r-card); background: var(--c-tile); font: inherit; text-align: left; color: var(--c-text); cursor: pointer; transition: box-shadow .2s, transform .2s; }
.kt-way:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 14px 32px -14px rgba(0, 0, 0, 0.22); }
.kt-way svg { grid-row: span 2; width: 28px; height: 28px; fill: none; stroke: var(--c-blue); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.kt-way b { font-weight: 600; }
.kt-way span { font-size: 15px; color: var(--c-muted); }
.mm-pane-btn { margin-top: 20px; }
@media (max-width: 1080px) {
  .kt { grid-template-columns: 1fr; gap: 64px; }
}
@media (max-width: 640px) {
  .kt-topic-row { grid-template-columns: 1fr 1fr; }
  .kt-form .cf-row { grid-template-columns: 1fr; }
}


/* ── 21. Responsiv ───────────────────────────────────────── */

@media (max-width: 1180px) {
  .hd-in { gap: 32px; }
  .hd-actions { gap: 20px; }
}
@media (min-width: 1024px) and (max-width: 1180px) {
  .hd-nav { margin-left: -12px; }
  .hd-top { padding: 0 12px; }
  .hd-item.is-active .hd-top::after { left: 12px; right: 12px; }
}
/* Knapp ueber der Mobil-Grenze passt der Portal-Link nicht mehr in den
   Kopf; er steht dann nur in der Leiste darueber. */
@media (min-width: 1024px) and (max-width: 1120px) {
  .hd-actions .hd-portal { display: none; }
}

/* ── WhatsApp-Chat ────────────────────────────────────────────
   Unten rechts auf allen Seiten, Markup aus site.js. Avatar 56px mit
   gruenem Badge, darueber das Fenster (340px, #0d0d0d). Ohne Skript gibt
   es nichts davon. */

.wa { position: fixed; right: 24px; bottom: 24px; z-index: 60; font: inherit; }
/* Offenes Klappmenue: der Avatar laege sonst ueber dem Menue. */
body:has(.hd[data-open]) .wa { display: none; }
.wa-btn {
  position: relative;
  display: block;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #1f1f1f;
  cursor: pointer;
  /* Feiner dunkler Ring: bleibt auch ueber dem weissen Fuss klar abgesetzt. */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 10px 28px -6px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.92);
  transition: opacity .4s ease, transform .4s ease, visibility 0s linear .4s;
}
.wa.is-shown .wa-btn { opacity: 1; visibility: visible; transform: none; transition: opacity .4s ease, transform .4s ease; }
.wa-btn img { width: 100%; height: 100%; max-width: none; border-radius: 50%; object-fit: cover; }
.wa-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid var(--c-white);
  border-radius: 50%;
  background: #25D366;
}
.wa-badge svg { width: 12px; height: 12px; fill: var(--c-white); }
.wa-btn:focus-visible, .wa-close:focus-visible, .wa-go:focus-visible { outline: 2px solid #25D366; outline-offset: 3px; }

.wa-panel {
  position: absolute;
  right: 0;
  bottom: 68px;
  width: 340px;
  overflow: hidden;
  border: 1px solid #1f1f1f;
  border-radius: 12px;
  background: #0d0d0d;
  color: var(--c-white);
  box-shadow: 0 24px 56px -16px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(8px);
  transform-origin: bottom right;
  transition: opacity .25s ease, transform .25s ease;
}
.wa.is-open .wa-panel { opacity: 1; transform: none; }
.wa-head { display: flex; align-items: center; gap: 12px; padding: 16px; border-bottom: 1px solid #1f1f1f; }
.wa-av { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; object-fit: cover; }
.wa-who { flex: 1; min-width: 0; line-height: 1.3; }
.wa-who strong { display: block; font-size: 15px; font-weight: 600; color: var(--c-white); }
.wa-who span { display: block; font-size: 12px; color: #8A8F98; }
.wa-close {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.wa-close svg { width: 18px; height: 18px; fill: none; stroke: #8A8F98; stroke-width: 2; stroke-linecap: round; }
.wa-close:hover svg { stroke: var(--c-white); }
.wa-body { padding: 16px; }
.wa-bubble {
  max-width: 92%;
  min-height: 40px;
  padding: 12px 14px;
  border-radius: 4px 12px 12px 12px;
  background: #1f1f1f;
  font-size: 15px;
  line-height: 1.5;
  color: var(--c-white);
}
.wa-dots { display: inline-flex; gap: 5px; padding: 5px 2px; }
.wa-dots i { width: 7px; height: 7px; border-radius: 50%; background: #8A8F98; animation: wa-dot 1s ease-in-out infinite; }
.wa-dots i:nth-child(2) { animation-delay: .15s; }
.wa-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes wa-dot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.wa-go {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  margin-top: 16px;
  border-radius: var(--r);
  background: #25D366;
  font-weight: 500;
  color: var(--c-white);
}
.wa-go:hover { color: var(--c-white); text-decoration: none; filter: brightness(0.95); }
.wa-go svg { width: 20px; height: 20px; fill: var(--c-white); }

@media (max-width: 600px) {
  .wa-btn { width: 52px; height: 52px; }
  .wa-panel { position: fixed; left: 16px; right: 16px; bottom: 88px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-btn, .wa.is-shown .wa-btn, .wa-panel { transition: none; transform: none; }
  .wa-dots i { animation: none; }
}


/* Ueber: unter 1024px Bild ueber dem Text, bis 400px breit, zentriert. */
@media (max-width: 1023px) {
  .about { grid-template-columns: 1fr; row-gap: 48px; }
  .about-photo { width: 100%; max-width: 400px; margin-inline: auto; }
}

@media (max-width: 1080px) {
  :root { --pad: 24px; --sec: 96px; }
  .home, .page { --sec: 120px; }


  /* Schmal steht das Foto unter dem Text: volle Breite, 360px hoch, oben
     nach Schwarz auslaufend. */
  .hero { min-height: 0; }
  .hero-copy { padding: 88px 0 48px; }
  .hero-photo {
    position: relative;
    left: auto;
    height: 360px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 120px);
    mask-image: linear-gradient(180deg, transparent 0, #000 120px);
  }
  .hero-photo img { object-position: 50% 25%; }
  /* Startseite: das Foto steht oben ueber die volle Breite (unter dem
     transparenten Kopf) und laeuft nach unten in Schwarz aus, Text und
     Buttons zentriert darunter. */
  .home .hero { --bw: 100vw; }
  .hero-bg {
    height: min(64vw, 480px);
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  }
  .hero-bg::after { background: radial-gradient(ellipse 70% 45% at 50% 100%, rgba(0, 0, 0, 0.5), transparent); }
  .hero-bg img { object-position: 15% 30%; }
  .home .hero-copy { margin-top: -32px; padding-bottom: 32px; }

  .tiles { grid-template-columns: repeat(2, 1fr); }
  .ptiles { grid-template-columns: repeat(2, 1fr); }
  /* Zweispaltig sind die Kacheln schmaler: kleinerer Titel, damit Titel
     und Pfeil vor dem Bild bleiben. */
  .ptile-title { font-size: 22px; }
  .price-box { grid-template-columns: 1fr; gap: 40px; padding: 40px 32px; }

  .sol, .jhl { grid-template-columns: 1fr; gap: 48px; }
  .eqp-main { grid-template-columns: 1fr; gap: 16px; }
  .eqp-stats { grid-template-columns: 1fr 1fr; }
  .eqp-stats > div { border-top: 1px solid #1d2028; }
  .eqp-stats > div + div { border-left: 0; }
  .eqp-stats > div:nth-child(even) { border-left: 1px solid #1d2028; }
  .eqp-stats > div:nth-child(-n+2) { border-top: 0; }
  .eqp-stats > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .mhero { padding-bottom: 0; }
  .mhero-in { grid-template-columns: 1fr; gap: 24px; }
  .mviz { --t: 14s; --s: 1.3; height: 480px; max-width: 620px; width: 100%; margin-inline: auto; }
  .mcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mover { font-size: 22px; }
  .mvids { grid-template-columns: 1fr; gap: 48px; }
  /* Journal-Hero: Screen unter dem Text, volle Breite. */
  .jhero { height: auto; }
  .jhero .container { display: block; height: auto; }
  .jhero-copy { max-width: none; padding: 88px 0 48px; }
  .jhero-shot { position: static; width: auto; height: auto; transform: none; padding: 0 var(--pad) 64px; }
  /* Ausbildungs-Hero: Verlauf von oben nach unten, der Monitor faellt
     weg, der Screen steht unter dem Text in voller Breite. */
  .ahero { height: auto; --grad: linear-gradient(180deg, transparent 55%, #0B2FA8 80%, #1A5CFF 100%); }
  .ahero-art { display: none; }
  .ahero-in { display: block; height: auto; }
  .ahero-copy { max-width: none; padding: 88px 0 48px; }
  .ahero-shot { display: block; position: relative; padding-bottom: 64px; }
  .ahero-shot img { width: 100%; height: auto; border-radius: 2px; }
  .ioda { max-width: 300px; margin-left: 0; }
  .zz { grid-template-columns: 1fr; gap: 48px; }
  .zz.flip .zz-copy { order: 0; }
  /* Stufen: Kopf, Liste und Aktion untereinander. */
  .plan { grid-template-columns: 1fr; gap: 0; padding-block: 48px; }
  .plan-list { padding-top: 28px; }
  .plan-go { justify-self: start; padding-top: 32px; }

  .split, .partner-grid, .qa-grid, .calendly-box, .legal:has(.legal-toc) { grid-template-columns: 1fr; gap: 48px; }
  .legal-toc { position: static; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  /* Drei Spalten (coaching.html) gehen schmal gleich untereinander. */
  .tiles.three, .steps.three { grid-template-columns: 1fr; }

  .cta-box { grid-template-columns: 1fr; gap: 24px; padding: 32px 48px 48px; min-height: 0; }
  .subhero-top { padding-top: 88px; }
  .subhero-copy { max-width: none; }
  .chero .subhero-copy { padding-bottom: 0; }
  .subhero-top .hero-photo { margin-top: 48px; }
  .hero-photo.fade-bottom {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 120px), linear-gradient(0deg, transparent 0, #000 64px);
    mask-image: linear-gradient(180deg, transparent 0, #000 120px), linear-gradient(0deg, transparent 0, #000 64px);
  }

  .ft-grid { grid-template-columns: 1fr 1fr 1fr; }
  .ft-brand { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  :root { --sec: 80px; }
  .home, .page { --sec: 96px; }
  h1 { font-size: 40px; }
  .ptiles { grid-template-columns: 1fr; }
  .hero-copy h1 { font-size: min(40px, 8vw); }
  h2 { font-size: 32px; }
  .quote-box blockquote { font-size: 24px; }
  .price-box { padding: 32px 24px; }
  .price-amount { font-size: 44px; }
  .products { padding-top: 72px; }
  .ptiles { gap: 12px; }
  .ptile { height: 100px; padding: 0 20px; }
  .ptile-title { font-size: 22px; }
  .plan h3 { font-size: 28px; }
  .plan-price { font-size: 36px; }
  .rs-head { flex-direction: column; align-items: flex-start; margin-bottom: 32px; }
  .rs-row { gap: 16px; }
  .rs-card { width: 300px; }
  .tiles, .trait-grid, .principles, .price-split, .check-grid, .steps { grid-template-columns: 1fr; }
  .panel, .dark-box { padding: 32px 24px; }
  .dark-box { border-radius: 12px; }
  .cta-box { padding: 16px 24px 24px; border-radius: 12px; }
  .cta-shot { border-radius: var(--r-card); }
  /* Schmal steht der Kalender einspaltig: Monat, darunter die Zeiten. */
  .cal-widget { height: 1040px; margin-inline: -8px; border-radius: var(--r-card); }
  .p-amount { font-size: 52px; }
  .contact-row { grid-template-columns: 1fr; gap: 2px; }
  .ft-grid { grid-template-columns: 1fr 1fr; }

  .cta-bar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    padding: 12px var(--pad);
    background: var(--c-black);
    border-top: 1px solid var(--c-line-dk);
  }
  .cta-bar .btn { width: 100%; }
  body:has(.cta-bar) .ft { padding-bottom: 112px; }
  body:has(.cta-bar) .wa { bottom: 96px; }
}

@media (max-width: 640px) {
  :root { --pad: 16px; }
  .hd-logo img { height: 24px; }
  .stats, .stats.three { grid-template-columns: 1fr; gap: 24px; }
  .btn-group .btn { width: 100%; }
  .ft-grid { grid-template-columns: 1fr; }
  .plan .btn { width: 100%; }
  .jintro { font-size: 19px; }
  .sol-list { grid-template-columns: 1fr; }
  .sol-list li:nth-last-child(2) a { border-bottom: 0; }
  .jfree { padding-block: 48px; }
  .plan-go { justify-self: stretch; }
}

/* Schmal steht das WhatsApp-Fenster fest am Viewport: ueber der Leiste. */
@media (max-width: 600px) {
  body:has(.cta-bar) .wa-panel { bottom: 160px; }
}

/* ueber.html, schmal: Text oben, Foto darunter bis an die Raender. */
@media (max-width: 1080px) {
  .cta-box.cta-ben { gap: 0; padding: 0; }
  .cta-ben .cta-copy { padding: 40px 32px 32px; }
  .cta-photo { min-height: 0; aspect-ratio: 4 / 3; }
}
@media (max-width: 760px) {
  .cta-ben .cta-copy { padding: 32px 24px 24px; }
}

/* Methode, schmal: Karten untereinander, Ebenen kleiner. */
@media (max-width: 640px) {
  .mcards { grid-template-columns: 1fr; }
  .mviz { --s: 1; height: 380px; }
  .manchor-in { gap: 24px; }
}

/* ── Blauer Verlauf fuer die Unterseiten-Heros (.hero--blue) ──
   Wie im Methode-Hero: links Schwarz fuer den Text, ab etwa der Mitte
   Uebergang in #1A5CFF, ganz rechts heller. Steht am Ende, damit er den
   schwarzen Grund von .subhero und .jhero ersetzt. Bilder und Panels im
   Hero liegen darueber und werden nicht eingefaerbt. Schmal kommt das
   Blau nur aus der Ecke unten rechts, damit Text und Knoepfe auf Schwarz
   bleiben; Methode laeuft schmal nach unten ins Blau (Glasebenen). */
.hero--blue { background: linear-gradient(90deg, #000 38%, #071A5C 62%, #1A5CFF 86%, #4F84FF 100%); }
@media (max-width: 1080px) {
  .hero--blue { background: radial-gradient(140% 55% at 100% 100%, #1A5CFF 0, #071A5C 45%, #000 85%); }
  .hero--blue.mhero { background: linear-gradient(180deg, #000 45%, #071A5C 70%, #1A5CFF 100%); }
}

/* Trial-Box, Community-Zeile und Methode-Haelften schmal. */
@media (max-width: 1080px) {
  .cta-box.cta-trial { padding: 0; gap: 0; }
  .cta-trial .cta-copy { padding: 40px 32px 0; }
  .cta-mon { margin: 40px 0 0 32px; }
  .cta-mon img { width: 110%; }
}
@media (max-width: 760px) {
  .cta-trial .cta-copy { padding: 32px 24px 0; }
  .cta-mon { margin: 32px 0 0 24px; }
  .crow { flex-direction: column; align-items: flex-start; }
  .crow .btn-outline { width: 100%; }
  .cta-half { min-height: 520px; padding: 40px 24px 0; }
  .cta-mon.is-half { width: 82%; }
}
/* Briefings (index.html): ab Tablet drei Spalten ueber die volle
   Inhaltsbreite statt Karussell; schmal bleibt es zum Wischen. */
@media (min-width: 768px) {
  .rs-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; padding-bottom: 4px; scroll-snap-type: none; }
  .rs-card { width: auto; }
  .rs-card:nth-child(n+3) { display: none; }
}
@media (min-width: 1024px) {
  .rs-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rs-card:nth-child(3) { display: flex; }
}

/* Kontrast (WCAG AA): kleiner blauer Text auf dunklem Grund in einem
   etwas helleren Blau (#3D74FF, 4,8:1 statt 4,0:1); Grau auf der hellen
   Preisbox dunkler; Links im Fliesstext unterstrichen. */
:is(.home, .subhero, .mp-band) .kicker, .mp-band__kicker, .home .rs-type, .home .rs-head .text-link { color: #3D74FF; }
.price-box :is(.price-terms, .price-note, .price-amount small) { color: #5B6270; }
.cta-small a, .ft-risk a { text-decoration: underline; text-underline-offset: 3px; }

/* 404-Seite: Hero und vier Wege weiter. */
.nf-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.nf-links a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 24px; border-radius: var(--r-card); background: var(--c-tile); color: var(--c-text); }
.nf-links a:hover { text-decoration: none; background: #ECECF0; }
.nf-links b { font-size: 18px; font-weight: 600; }
.nf-links span { font-size: 15px; color: var(--c-muted); }
@media (max-width: 1023px) { .nf-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .nf-links { grid-template-columns: 1fr; } }

/* Kleine graue Bildunterschrift unter Screenshots mit Beispielwerten. */
.shot-cap { margin-top: 10px; font-size: 13px; color: var(--c-muted); }
.home .shot-cap, .cta-fig .shot-cap, .screen .shot-cap { color: #8A8F98; }
.screen .shot-cap { margin: 8px 4px 0; }
.cta-fig { margin: 0; }
.cta-fig img { display: block; width: 100%; height: auto; border-radius: var(--r-frame); }
.ws-fig { margin: 0; }

/* Partner-Leiste (index.html) ueber dem Footer: hell wie der Footer,
   duenne Linie oben, Kicker links, Logos als Endlos-Laufband von rechts
   nach links. Die Liste steht doppelt im HTML; die Spur laeuft um die
   halbe Breite und beginnt dann nahtlos von vorn. Raender weich
   ausgeblendet, Hover pausiert, bei reduzierter Bewegung statisch. */
.partners { border-top: 1px solid var(--c-line); background: var(--c-white); }
.partners-in { display: flex; align-items: center; gap: 48px; padding-block: 36px; }
.partners-k { flex: none; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); }
.partners-run { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); }
.partners-track { display: flex; width: max-content; animation: partners-run 36s linear infinite; }
.partners-list { display: flex; flex: none; align-items: center; gap: 72px; padding-right: 72px; }
.partners-list img { display: block; width: auto; height: 32px; max-width: none; }
@keyframes partners-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (hover: hover) { .partners-run:hover .partners-track { animation-play-state: paused; } }
@media (prefers-reduced-motion: reduce) {
  .partners-track { animation: none; width: 100%; }
  .partners-list[aria-hidden] { display: none; }
  .partners-run .partners-list { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; gap: 20px 40px; padding: 0; }
  .partners-run { -webkit-mask-image: none; mask-image: none; }
}

/* Member+-Hero: rechts der Handelstag. Vier Glaskarten als Treppe
   (je 100px tiefer, 36px weiter rechts), die ganze Treppe leicht in 3D
   geneigt. Der Punkt laeuft in 10 s die Linie herab (90 %), dann blendet
   er aus. Jede Karte hat dieselbe Hervorhebung (tday-on), versetzt um die
   Zeit, zu der der Punkt ihre Mitte erreicht. Einschweben von rechts auf
   der Huelle (.tday-item), Anheben auf der Karte. */
.mp-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 48px; align-items: center; }
.mp-hero .mp-hero-copy h1 { max-width: 640px; }
.tday { --t: 10s; position: relative; height: 420px; }
.tday-stack { position: absolute; inset: 0; transform: perspective(1100px) rotateY(-14deg) rotateX(6deg); transform-origin: 30% 50%; }
.tday-line { position: absolute; left: 4px; top: 20px; width: 1px; height: 380px; background: rgba(255, 255, 255, 0.28); }
.tday-dot { position: absolute; left: -5px; top: -5px; width: 11px; height: 11px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(26, 92, 255, 0.35), 0 0 18px 4px rgba(107, 150, 255, 0.9); animation: tday-dot var(--t) linear infinite; }
@keyframes tday-dot {
  0% { transform: translateY(0); opacity: 0; }
  4% { opacity: 1; }
  88% { opacity: 1; }
  90%, 100% { transform: translateY(380px); opacity: 0; }
}
.tday-list { position: absolute; inset: 0 0 0 28px; }
.tday-item { position: absolute; top: calc(20px + var(--k) * 100px); left: calc(var(--k) * 36px); width: 300px; animation: tday-in .8s cubic-bezier(.22, .8, .3, 1) calc(.2s + var(--k) * .15s) both; }
@keyframes tday-in { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: none; } }
.tday-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px 20px; border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 14px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06)); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--c-white); animation: tday-lift var(--t) ease-in-out infinite; animation-delay: calc(var(--k) * var(--t) * 0.237 - var(--t) * 0.008); }
/* Hervorhebung: hellere Flaeche und blauer Rand als eigene Ebene. */
.tday-card::after { content: ""; position: absolute; inset: -1px; border: 1px solid #1A5CFF; border-radius: inherit; background: rgba(255, 255, 255, 0.14); box-shadow: 0 0 32px rgba(26, 92, 255, 0.45); opacity: 0; animation: tday-glow var(--t) ease-in-out infinite; animation-delay: inherit; pointer-events: none; }
@keyframes tday-lift { 0%, 20%, 100% { transform: none; } 6%, 14% { transform: translateY(-6px); } }
@keyframes tday-glow { 0%, 20%, 100% { opacity: 0; } 6%, 14% { opacity: 1; } }
.tday-time { display: flex; align-items: center; gap: 8px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #BFD0FF; }
.tday-name { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; }
.tday-name svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tday-live { width: 7px; height: 7px; border-radius: 50%; background: #FF3B3B; box-shadow: 0 0 8px rgba(255, 59, 59, 0.8); animation: tday-pulse 2s ease-in-out infinite; }
@keyframes tday-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.tday.is-paused :is(.tday-dot, .tday-card, .tday-live), .tday.is-paused .tday-card::after { animation-play-state: paused; }
@media (max-width: 1080px) {
  .mp-hero-in { grid-template-columns: 1fr; gap: 40px; }
  .tday { height: 340px; max-width: 420px; }
  .tday-line { display: none; }
  .tday-list { inset: 0; }
  .tday-item { top: calc(var(--k) * 80px); left: calc(var(--k) * 24px); width: min(300px, calc(100% - 72px)); }
  .tday-card { padding: 12px 16px; }
  .tday-name { font-size: 16px; }
}

/* Journal-Landingpage: drei Schritte, fuenf Funktionen, Vergleich. */
.jsteps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.jstep { position: relative; padding: 32px 28px; border-radius: var(--r-card); background: var(--c-tile); }
.jstep-n { position: absolute; top: 24px; right: 28px; font-size: 40px; font-weight: 600; line-height: 1; color: var(--c-blue); opacity: .25; }
.jstep h3 { margin: 20px 0 8px; font-size: 20px; }
.jstep p { font-size: 16px; line-height: 1.55; color: var(--c-muted); }
.jtiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.jcmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.jcmp { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 16px; }
.jcmp th, .jcmp td { padding: 16px 20px; border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: top; }
.jcmp thead th { font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--c-muted); }
.jcmp thead th:last-child { color: var(--c-blue); }
.jcmp tbody th { width: 22%; font-weight: 600; }
.jcmp td:nth-child(2) { color: var(--c-muted); }
.jcmp td:last-child { font-weight: 600; }
@media (max-width: 1180px) { .jtiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .jsteps { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .jtiles { grid-template-columns: 1fr; } }

/* Ratgeber (ratgeber/*.html): Layout der Rechtsseiten, Fliesstext etwas
   groesser, am Ende Kasten zum Journal und weitere Ratgeber. */
.rg-body p, .rg-body li { font-size: 18px; line-height: 1.7; }
.rg-body > p + section { margin-top: 48px; }
.rg-body a { color: var(--c-blue); text-decoration: underline; text-underline-offset: 3px; }
.rg-body ol { list-style: decimal; padding-left: 22px; margin: 14px 0; }
.rg-cta { margin-top: 64px; padding: 36px 40px; border-radius: var(--r-lg); background: #0B0B0F; color: var(--c-white); }
.rg-cta-k { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #3D74FF; }
.rg-cta-h { margin-top: 8px; font-size: 24px; font-weight: 600; line-height: 1.3; }
.rg-body .rg-cta p:not(.rg-cta-k):not(.rg-cta-h) { margin: 10px 0 24px; font-size: 16px; color: var(--c-on-dark); }
.rg-cta .btn { margin-right: 24px; }
.rg-body .rg-cta .text-link { color: var(--c-white); text-decoration: none; }
.rg-more { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--c-line); }
.rg-more h2 { font-size: 20px; margin-bottom: 12px; }
.rg-more ul { list-style: none; padding: 0; }
.rg-more li + li { margin-top: 8px; }


/* Mobilmenue (.hd-mnav): nur unter 1024px. */
.hd-mnav { display: none; }

/* ── Mobil ────────────────────────────────────────────────────
   Tippflaechen mindestens 44px (eigenstaendige Links und Knoepfe; Links
   mitten im Fliesstext bleiben), Headlines per clamp, Raster 1 Spalte
   unter 768px und 2 ab 768px, Platz fuer das WhatsApp-Widget, ruhigere
   Animationen. */
@media (max-width: 1023px) {
  .hd-burger { width: 44px; height: 44px; margin-right: -10px; }
  .hd-burger span:nth-child(1) { top: 15px; }
  .hd-burger span:nth-child(2) { top: 21px; }
  .hd-burger span:nth-child(3) { top: 27px; }
  .hd-logo { display: flex; align-items: center; min-height: 44px; }
  /* Menue: "7 Tage kostenlos testen" bleibt unten im Bild, auch wenn
     eine Gruppe offen ist; der Community-Eintrag erscheint auch hier. */
  .hd[data-open] .hd-panel { padding-bottom: 104px; }
  .hd[data-open] .hd-actions .btn { position: fixed; left: var(--pad); right: var(--pad); bottom: 16px; z-index: 2; box-shadow: 0 -16px 32px #000; }
  .mm:not(.mm-two) .mm-main:has([data-discord]) { display: block; order: 4; margin-top: 8px; }
  .hd-portal.hd-m { display: flex; align-items: center; min-height: 44px; }
  .crumbs a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; }
  :is(.text-link, .hero-link) { display: inline-flex; align-items: center; min-height: 44px; }
  .rv-toggle, .rv-more a, .rating-big a { display: inline-flex; align-items: center; min-height: 44px; }
  .subnav a:not(.btn) { min-width: 44px; justify-content: center; }
  .subnav-cta { height: 44px; }
  .rs-dots button { width: 44px; height: 44px; }
  .ft li + li { margin-top: 0; }
  .ft li a, .ft-legal a, .ft-social a { display: inline-flex; align-items: center; min-height: 44px; }
  .ft-legal { column-gap: 20px; row-gap: 0; }
  .ft-social { gap: 4px 20px; margin-top: 8px; }
  /* sehr kurze Links (AGB, Start) breit genug, Inhaltsverzeichnis der
     Rechtsseiten, Filter auf Bewertungen, Band-Link auf Member+. */
  .ft-legal a, .crumbs a { min-width: 44px; justify-content: center; }
  .legal-toc li a { display: inline-flex; align-items: center; min-height: 44px; }
  .legal-toc li + li { margin-top: 0; }
  button[data-filter] { min-height: 44px; }
  .mp-band__link { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 767px) {
  h1, .subhero h1 { font-size: clamp(28px, 7.6vw, 40px); hyphens: auto; overflow-wrap: break-word; }
  h2 { font-size: clamp(25px, 6.6vw, 32px); hyphens: auto; }
  .mvids, .mcards, .jf-grid { grid-template-columns: 1fr; }
  /* WhatsApp: kleiner, naeher am Rand; der Footer laesst unten Platz,
     damit der Avatar keine Links verdeckt. */
  .wa { right: 12px; bottom: 12px; }
  .wa-btn { width: 48px; height: 48px; }
  .ft { padding-bottom: 104px; }
  /* Scroll-Effekte aus: alles steht sofort. */
  .js .reveal, .js .reveal-up { opacity: 1; transform: none; transition: none; }
}
@media (min-width: 768px) and (max-width: 1080px) {
  .mvids { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
/* Weniger Bewegung gewuenscht: alle Animationen und Uebergaenge auf
   ihren Endzustand. Endlos-Schleifen (Methode-Leiter) haben dafuer eigene
   Standbilder. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Footer schmal: Knopf volle Breite, Icons bleiben neben den Namen. */
@media (max-width: 767px) {
  .ft .ft-go .btn { width: 100%; }
}

/* ── Mobilmenue flach (unter 1024px) ──
   Statt der Mega-Menues eine Liste in zwei Gruppen, Eintraege 48px, 17px;
   darunter Mitgliederportal, der Knopf aus .hd-actions unten fest. */
@media (max-width: 1023px) {
  .hd-nav, .hd-actions .hd-portal { display: none; }
  .hd-mnav { display: block; padding-top: 8px; }
  .hd-mh { margin: 20px 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--c-mega-text); }
  .hd-mh:first-child { margin-top: 8px; }
  .hd-mnav li a { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--c-line-dk); font-size: 17px; color: var(--c-white); }
  .hd-mnav li a:hover, .hd-mnav li a[aria-current] { text-decoration: none; color: var(--c-blue-lt); }
  .hd-mportal { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; margin-top: 16px; font-size: 17px; font-weight: 600; color: var(--c-white); }
  .hd-mportal:hover { text-decoration: none; color: var(--c-blue-lt); }
  .hd-actions { margin: 0; }
}

/* ── Mobil kompakt (bis 767px) ── Desktop unveraendert. */
@media (max-width: 767px) {
  :root { --sec: 48px; }
  .home, .page { --sec: 56px; }
  h1, .subhero h1, .hero-copy h1, .home .hero-copy h1, .ahero-copy h1, .jhero-copy h1 { font-size: 30px; line-height: 1.15; }
  h2, .sec-head h2, .cta-copy h2, .cta-half h2, .zz-copy h2, .mprin h2, .rs-head h2, .ws-end h3 { font-size: 24px; line-height: 1.2; }
  body { font-size: 15px; }
  main p:not([class]), main li:not([class]) { font-size: 15px; }
  .lead, .jintro, .ws-intro, .mover { font-size: 17px; }
  .kicker, .ws-copy .kicker { font-size: 11px; margin-bottom: 10px; }
  .sec-head { margin-bottom: 28px; }
  .btn, .btn-sm { height: 44px; padding: 0 18px; font-size: 15px; }
  .tile, .mcard, .jstep, .zcard, .jf-card, .rs-card, .ws-card, .price-box, .panel, .dark-box, .rg-cta, .istep, .cal-preview { padding: 20px; }
  .cta-box { padding: 20px 20px 24px; }
  .cta-half { padding: 28px 20px 0; min-height: 440px; }
  .subhero { padding-top: 64px; padding-bottom: 56px; }
  .page-hero { padding-bottom: 56px; }
  .legal-hero { padding: 64px 0 48px; }
  /* Startseite: Foto heller und klarer, Gesicht und Monitore im
     Ausschnitt, nur unten ein Verlauf; Text und Knoepfe darunter. */
  .home .hero { --bw: 100vw; }
  .hero-bg { height: auto; aspect-ratio: 4 / 3; -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%); }
  .hero-bg::before { height: calc(var(--hd-top) + 24px); background: linear-gradient(180deg, rgba(0, 0, 0, 0.7), transparent); }
  .hero-bg::after { background: none; }
  .hero-bg img { object-position: 0% 30%; filter: brightness(1.12) contrast(1.04) saturate(1.05); }
  .home .hero-copy { margin-top: 0; padding: 12px 0 8px; }
  .hero-actions, .home .hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
  .hero-actions .btn { flex: 1 1 auto; }
  .partners-in { flex-direction: column; align-items: stretch; padding-block: 24px; gap: 14px; }
  .partners-list { gap: 44px; padding-right: 44px; }
  .partners-list img { height: 26px; }
}