@charset "UTF-8";
/* ============================================================================
   BECRO Trading — becro-dark.css
   Das gemeinsame Designsystem der Website. Vollständig: Tokens, Reset,
   Typografie, Komponenten. Eine Seite braucht danach keinen eigenen
   <style>-Block mehr.
   ============================================================================

   HERKUNFT DER TOKENS
   Farben, Verläufe, Glows, Schatten, Radien und Schrift kommen aus dem
   überarbeiteten BECRO Journal:
       C:\Users\bencr\Trading Journal\becro-journal-v2\frontend\app\globals.css
   (Arbeitsstand 23.08.2026, dort noch uncommitted — Werte hier bewusst
   eingefroren.) Dessen Farbwerte stammen ihrerseits 1:1 aus der App,
       becro-billing/app/static/becro.css.
   Website, App und Journal teilen damit denselben Tokensatz.

   Das Journal schreibt seine Farben als sRGB-Kanäle ("46 144 250"), weil
   Tailwind daraus Deckkraft-Modifier baut. Die Website hat kein Tailwind —
   hier stehen dieselben Werte als Hex/rgba.

   DREI BEWUSSTE ABWEICHUNGEN vom Journal, jeweils an Ort und Stelle begründet:
     1. --h1-hero — eigener, größerer Grad nur für den Seiten-Hero.
     2. --max-w 1320px wie die App, aber Textblöcke in ch begrenzt.
     3. --section-v — die große Luft zwischen Blöcken setzt hier das System,
        nicht die einzelne Seite.

   KASKADE — WICHTIG
   Auf allen Altseiten steht der seiteneigene <style>-Block NACH diesem
   <link>. Bei gleicher Spezifität gewinnt die Quellreihenfolge, also der
   Inline-Block. Diese Datei kann eine Seite deshalb nur umfärben, wenn
   deren Inline-Block entfernt wird — nicht durch Ergänzen.

   CACHE-BUSTING
   Der ?v=N-Parameter am <link> muss bei jeder Änderung hier hochgezählt
   werden. Aktuell: v=12.
   ========================================================================== */


/* ══ 1 · Tokens ═══════════════════════════════════════════════════════════ */

:root {
  /* Sagt dem Browser, wie er Formularelemente, Scrollbalken und Datumsfelder
     einfärbt — sonst rendert er sie hell auf Schwarz. */
  color-scheme: dark;

  /* ---- Blau: die einzige Leitfarbe ------------------------------------- */
  --accent:            #2e90fa;
  --accent-hover:      #3f7ef5;
  --accent-deep:       #1a6fd4;
  --violet:            #635bff;   /* nur als Partner im Verlauf, nie allein */
  --accent-tint:       #112034;   /* Blau als Fläche, sehr leise */

  /* ---- Grund und Flächen -----------------------------------------------
     Fast schwarz, ohne Blaustich. Das Blau kommt NICHT aus der Fläche,
     sondern aus dem Licht darauf: Ambient-Wolke, Streulicht unter dem
     Panel, Lichtnaht auf seiner Oberkante. */
  --bg:                #050508;
  --bg-2:              #0a0a0f;
  --surface:           #0a0a10;   /* die Panelfläche, eine Spur über dem Grund */
  --surface-raised:    #101017;
  --surface-hover:     #12121a;
  --overlay:           #040408;

  /* ---- Linien -----------------------------------------------------------
     Die App schreibt sie als Weiß mit Deckkraft (7 % / 13 % / 5 %); hier
     stehen die daraus über der Panelfläche ausgerechneten Volltöne. */
  --line-soft:         #1f1f26;
  --line:              #232329;
  --line-2:            #2b2b33;

  /* ---- Text -------------------------------------------------------------- */
  --text:              #f4f4f6;
  --text-2:            #a6a6b4;
  --text-3:            #7b7b8b;
  --text-disabled:     #585864;
  --on-accent:         #ffffff;

  /* ---- Semantik — NUR für Zahlen und Werte ------------------------------
     Lime statt Smaragd, klares Rot statt Korallrot: das gedämpfte Paar
     verschwand auf fast schwarzem Grund. Diese beiden tragen Kennzahlen,
     nie Flächen, nie Fließtext, nie Buttons. */
  --positive:          #76ca28;
  --positive-soft:     #1a2810;
  --negative:          #ff3b3b;
  --negative-soft:     #301618;
  --neutral:           #a6a6b4;
  --amber:             #ffb700;
  --amber-soft:        #2c2716;

  /* ---- Blau mit Deckkraft (App-Werte, unverändert) ---------------------- */
  --accent-soft:       rgba(46, 144, 250, .16);
  --accent-line:       rgba(46, 144, 250, .42);
  --glass:             rgba(10, 10, 16, .72);
  --glow:              rgba(46, 144, 250, .42);

  /* ---- Die Glow-Leiter --------------------------------------------------
     Der Schein war ueber die Datei verteilt in acht verschiedenen Werten
     gesetzt — Deckkraft von .22 bis .62, Weichzeichnung von 48 bis 130px,
     Ausbreitung von -16 bis -24px, jeweils frei gewaehlt. Aus der Naehe
     faellt das nicht auf, im Ganzen schon: die Seite hatte kein Licht,
     sondern acht.

     Hier steht es als LEITER. Eine Farbe, ein festes Verhaeltnis von
     Ausbreitung zu Weichzeichnung (-1/5, also ueberall dieselbe Weichheit),
     und eine steigende Deckkraft. Die vier Stufen sind:

       1  Ruhe einer Flaeche      Karten, Panels
       2  dieselbe unter der Hand Karten-Hover
       3  ausgezeichnete Flaeche  Preisbox, empfohlene Stufe
       4  dieselbe unter der Hand deren Hover

     Wer eine neue Glow-Stelle baut, nimmt eine dieser Stufen. Ein eigener
     Wert heisst, dass die Leiter eine Stufe zu wenig hat — dann gehoert sie
     hier ergaenzt, nicht dort umgangen. */
  --glow-rgb:          46, 144, 250;
  --glow-1:            0 0 60px -12px rgba(var(--glow-rgb), .26);
  --glow-2:            0 0 74px -14px rgba(var(--glow-rgb), .40);
  --glow-3:            0 0 100px -20px rgba(var(--glow-rgb), .52);
  --glow-4:            0 0 118px -22px rgba(var(--glow-rgb), .68);

  /* Knoepfe tragen zusaetzlich zum Abwurf nach unten einen zentrierten
     Schein. Er ist enger als der der Flaechen: ein Knopf ist klein, ein
     100px-Halo waere um ihn herum eine Wolke. */
  --glow-cta:          0 0 30px -6px rgba(var(--glow-rgb), .40);
  --glow-cta-hi:       0 0 46px -6px rgba(var(--glow-rgb), .70);

  /* Der Stationspunkt der Handelstag-Timeline ist 11px gross. Die Sprossen
     oben haben alle eine negative Ausbreitung — an einem Punkt dieser
     Groesse bliebe davon nichts uebrig. Deshalb eine eigene Sprosse mit
     positiver Ausbreitung statt eines frei gewaehlten Werts an Ort und
     Stelle; die Leiter oben sagt ausdruecklich, dass sie zu ergaenzen ist
     und nicht zu umgehen. */
  --glow-dot:          0 0 12px 2px rgba(var(--glow-rgb), .55);

  /* Gruen fuer die Zahlen und das „verifiziert". Als text-shadow, deshalb
     ohne Ausbreitung — und sehr leise: die Ziffern sollen nicht leuchten,
     sondern nur nicht flach auf dem Grund liegen. */
  --glow-green:        0 0 14px rgba(118, 202, 40, .32);
  --glow-green-soft:   0 0 10px rgba(118, 202, 40, .22);

  /* ---- Verläufe ---------------------------------------------------------- */

  /* Buttons, aktive Navigation, Fortschritt. Blau führt, Violett begleitet. */
  --grad-brand:
    linear-gradient(120deg, #2e90fa 0%, #3f7ef5 55%, #635bff 100%);

  /* Der Schimmer auf jeder Panelfläche. Leise, weil die Fläche darunter fast
     schwarz ist und jeder Weißanteil sie sofort aufhellt. */
  --grad-soft:
    linear-gradient(180deg, rgba(255, 255, 255, .012), rgba(255, 255, 255, 0));

  /* Die Waschung auf großen Flächen (Zugang-Panel). */
  --grad-hero:
    radial-gradient(90% 130% at 88% 8%, rgba(17, 42, 82, .62), transparent 62%),
    radial-gradient(60% 90% at 6% 100%, rgba(28, 28, 74, .34), transparent 60%);

  /* Der Grund ist ruhig: eine einzige weiche Lichtquelle oben links. Mehrere
     Wolken ließen die Seite blau anlaufen und machten jede Kachel unruhig. */
  --grad-page:
    radial-gradient(48% 34% at 22% 12%, rgba(17, 42, 82, .55), transparent 68%);

  /* ---- Schatten ---------------------------------------------------------
     Die Panelsignatur: helle Innenlinie an der Oberkante, blaues Streulicht
     ringsum, tiefer schwarzer Abwurf. Kein harter Rand. */
  --shadow-sm:         0 2px 8px -4px rgba(0, 0, 0, .6);
  --shadow-md:         0 24px 50px -34px #000,
                       0 2px 8px -4px rgba(0, 0, 0, .6);
  --shadow-lg:         0 34px 66px -34px #000,
                       0 0 34px -16px var(--glow);
  --shadow-card:       inset 0 1px 0 rgba(255, 255, 255, .055),
                       var(--glow-1),
                       0 30px 60px -34px #000;
  --shadow-card-lift:  inset 0 1px 0 rgba(255, 255, 255, .055),
                       var(--glow-2),
                       0 34px 66px -34px #000;
  /* Der Abwurf nach unten gibt dem Knopf sein Gewicht, der zentrierte
     Schein sein Licht. Vorher gab es nur den Abwurf — der CTA hatte damit
     einen Schatten, aber keinen Glow. */
  --shadow-accent:     0 16px 34px -16px var(--glow), var(--glow-cta);
  --shadow-accent-lift:0 20px 38px -18px var(--glow), var(--glow-cta-hi);
  --shadow-nav:        0 12px 28px -14px var(--glow);

  /* ---- Radien ------------------------------------------------------------ */
  --r-sm:              12px;
  --r-card:            22px;
  --r-hero:            26px;
  --pill:              9999px;

  /* Die Kurve jedes Scroll-Auftritts: GSAPs power3.out. Vorne schnell,
     hinten weich auslaufend. Snappy wird eine Bewegung durch die Kurve,
     nicht durch die Dauer. */
  --reveal-ease:       cubic-bezier(.215, .61, .355, 1);
  /* Dieselbe Kurve mit Ueberschwung (back.out) — fuer alles, was ploppt
     statt einzublenden: sie faehrt ein Stueck ueber ihr Ziel hinaus und
     faellt zurueck. */
  --reveal-back:       cubic-bezier(.34, 1.46, .64, 1);

  /* ---- Schrift ----------------------------------------------------------- */
  --font-sans:         'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display:      'Outfit', 'Inter', system-ui, sans-serif;
  --font-mono:         'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --tracking-kicker:   .2em;
  --tracking-display:  -.04em;
  --tracking-heading:  -.015em;

  /* ABWEICHUNG 1: Der Seiten-Hero braucht mehr als der Seitentitel einer
     App-Ansicht. h1 bleibt sonst exakt auf der Journal-Regel; nur `.h-hero`
     greift diesen Grad ab. */
  --h1-hero:           clamp(2.7rem, 5.4vw, 4.6rem);

  /* ---- Maße --------------------------------------------------------------
     ABWEICHUNG 2: 1320px wie `.page-shell` der App. Fließtext wird nicht über
     die Spalte, sondern über max-width in ch begrenzt (siehe `p`). */
  --max-w:             1320px;
  --pad-x:             clamp(20px, 5vw, 40px);

  /* ABWEICHUNG 3: Die große Luft zwischen Blöcken. Die Referenzen (zoom,
     fundednext) liegen bei 96–112px; hier eine Spur mehr, weil die Seite
     wenige, lange Abschnitte hat. */
  --section-v:         clamp(76px, 9vw, 132px);

  /* ---- Bewegung ----------------------------------------------------------- */
  --ease:              cubic-bezier(.2, .7, .3, 1);
  --t-fast:            150ms;
  --t:                 200ms;
}


/* ══ 2 · Reset und Grundlage ══════════════════════════════════════════════ */

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

html {
  scroll-behavior: smooth;
  /* Der Kopf klebt oben. Ohne scroll-padding landet ein Sprungziel exakt
     unter ihm und die Überschrift ist verdeckt. */
  scroll-padding-top: 88px;
}

body {
  min-height: 100%;
  background-color: var(--bg);
  /* Die Ambient-Wolke liegt fest über dem Grund und wandert beim Scrollen
     nicht mit — dadurch wirkt die Fläche beleuchtet statt gemustert. */
  background-image: var(--grad-page);
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Nichts darf horizontal aus dem Viewport laufen. */
  overflow-x: hidden;
}

a   { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul  { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

a:focus-visible,
button:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--accent-soft); color: var(--text); }


/* ══ 3 · Typografie ═══════════════════════════════════════════════════════ */

/* Die Überschriftenregel der App, 1:1: Outfit, sehr eng, sehr fett. */
h1, h2, h3, .display {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
  color: var(--text);
}
h1 { font-size: clamp(2.375rem, 3.6vw, 3.375rem); font-weight: 800; line-height: 1; }
h2 { font-size: clamp(1.5rem, 2.2vw, 2.125rem);   font-weight: 800; line-height: 1.05; }
h3 { font-size: 1.125rem; font-weight: 700; line-height: 1.2; letter-spacing: -.028em; }
h4 { font-family: var(--font-display); font-size: 1rem; font-weight: 700;
     letter-spacing: var(--tracking-heading); color: var(--text); }

/* Nur der Seiten-Hero. Siehe Abweichung 1 oben. */
.h-hero { font-size: var(--h1-hero); line-height: .98; }

p { color: var(--text-2); max-width: 68ch; }

.lead {
  font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
  line-height: 1.55;
  color: var(--text-2);
  max-width: 60ch;
}
.small { font-size: .875rem; color: var(--text-3); }
.mut   { color: var(--text-2); }
.sub   { color: var(--text-3); }

/* --- Versalkicker (die `.eyebrow` der App) ------------------------------
   Monospace, 10,5px, 600, 0.2em gesperrt, Versalien, in Grau. Eine
   vorangestellte Nummer trägt das Blau. Steht über jedem Abschnitt.

   Bewusst ohne `display`: die Klasse sitzt auch auf Elementen in einem
   Flex-Kontext, wo ein eigenes `display` sie aus dem Layout risse. */
.kicker {
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-kicker);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.kicker-num { color: var(--accent); font-weight: 700; }

/* Sektionsmarke: Kicker, dahinter die Leuchtlinie. Feste Breite von 84px
   statt der ganzen Restzeile — dadurch bleibt die Marke ein Zeichen und
   wird nicht zum Trennstrich. */
.kicker-rule { display: flex; align-items: center; gap: 10px; }
.kicker-rule::after {
  content: "";
  flex: 0 0 auto;
  width: 84px; height: 1px;
  background: linear-gradient(90deg, var(--accent-line), transparent);
}

/* Alle Zahlen: Monospace und tabellarische Ziffern, damit Spalten fluchten. */
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Lime und Rot ausschließlich auf Werten. */
.pos { color: var(--positive); }
.neg { color: var(--negative); }


/* ══ 4 · Layout ═══════════════════════════════════════════════════════════ */

.wrap { max-width: var(--max-w); margin-inline: auto; padding-inline: var(--pad-x); }

main > section { padding-block: var(--section-v); }

/* Abschnittskopf: Kicker, Überschrift, Lead. */
.section-head { margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }
.section-head .kicker-rule { margin-bottom: 1.1rem; }
.section-head h2 { max-width: 20ch; }
.section-head .lead { margin-top: 1.1rem; }


/* ══ 5 · Panels ═══════════════════════════════════════════════════════════ */

/* --- Die Panelfläche ---------------------------------------------------
   Fläche eine Spur über dem Grund, Schimmer von oben, feine helle Linie,
   helle Innenkante und ein weiches blaues Streulicht ringsum. Das Panel
   hebt sich über Kante, Naht und Licht ab — nicht über Farbe in der Fläche. */
.panel {
  background-color: var(--surface);
  background-image: var(--grad-soft);
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}

.panel-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-hero);
  background-color: var(--surface);
  background-image: var(--grad-hero), var(--grad-soft);
  border: 1px solid rgba(255, 255, 255, .075);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055),
              var(--glow-1),
              0 34px 66px -34px #000;
}
.panel-hero > * { position: relative; }

/* --- Die Lichtnaht -----------------------------------------------------
   Eine 1px-Linie auf der Oberkante, die aus dem Nichts ins Blau und wieder
   ins Nichts läuft. Das ist es, was die Kacheln der App leben lässt — ein
   Lichtstreif, kein Rahmen. */
.seam { position: relative; overflow: hidden; }
.seam::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-line), transparent);
}

/* `.lift` ist nur noch eine Markierung: Übergänge und Hover-Zustand stehen
   gesammelt in Abschnitt 21, damit sie sich nicht mit dem Scroll-Reveal
   ins Gehege kommen. */


/* ══ 6 · Buttons ══════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  border: 1px solid transparent;
  border-radius: var(--pill);
  padding: .8em 1.55em;
  font-family: var(--font-sans);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  transition: transform var(--t) var(--ease),
              box-shadow var(--t) var(--ease),
              background-color var(--t) var(--ease),
              border-color var(--t) var(--ease),
              filter var(--t) var(--ease);
}
.btn .arrow { transition: transform var(--t) var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* Blau ist nie eine flache Füllung: Verlauf plus farbiger Schlagschatten.
   Das Leuchten kommt aus dem Schatten, nicht aus der Fläche. */
.btn-primary {
  background-image: var(--grad-brand);
  color: var(--on-accent);
  box-shadow: var(--shadow-accent);
}
.btn-primary:hover { filter: brightness(1.08); box-shadow: var(--shadow-accent-lift); transform: translateY(-2px); }

.btn-ghost {
  background-color: rgba(255, 255, 255, .04);
  border-color: var(--line-2);
  color: var(--text);
}
.btn-ghost:hover { background-color: var(--surface-hover); border-color: var(--accent-line); transform: translateY(-2px); }

/* Schlanker Umriss-Button. Steht neben dem Haupt-CTA, ohne ihn zu
   bedrängen — für Wege, die sich an bestehende Kunden richten (Login) und
   nicht um die Neuanmeldung konkurrieren sollen. */
.btn-line {
  background-color: transparent;
  border-color: var(--line-2);
  color: var(--text-2);
}
.btn-line:hover {
  background-color: rgba(255, 255, 255, .04);
  border-color: var(--accent-line);
  color: var(--text);
  transform: translateY(-2px);
}

.btn-quiet { padding-inline: 0; color: var(--text-2); font-weight: 500; }
.btn-quiet:hover { color: var(--accent); }

.btn-sm { padding: .6em 1.15em; font-size: .875rem; }

.btn-group { display: flex; flex-wrap: wrap; align-items: center; gap: .85rem; }

/* Discord-Knopf. Drei Einbauorte mit bewusst verschiedenem Gewicht:

     Hero    `btn-primary`  gefuellt — hier ist Discord der Haupt-Weg
     Kopf    `btn-line`     Umriss, neben dem blauen Trial-Knopf
     Fuss    kein Knopf     Icon in der Sozial-Reihe

   Der Hero traegt damit ein zweites gefuelltes Blau neben dem Trial-Knopf
   im Kopf. Das ist eine bewusste Ausnahme von „genau ein Blau pro Ansicht":
   der Hero soll in den kostenlosen Server fuehren, der Trial bleibt oben
   rechts im Kopf und auf dem Handy in der klebrigen Leiste erreichbar.

   Das Icon erbt `currentColor` und macht so den Hover-Farbwechsel der
   jeweiligen Knopfvariante mit, statt in Discord-Lila danebenzustehen. In
   der Sozial-Reihe des Fusses greift dagegen `.f-social svg` — spezifischer
   als `.icon-discord` — und faerbt es wie Instagram und YouTube. */
.icon-discord { width: 1.15em; height: 1.15em; flex: none; fill: currentColor; }

/* Warum im Kopf nur „Discord" steht und nicht die volle Beschriftung:
   `.wrap` deckelt die Leiste bei --max-w (1320px), der Inhalt hat also auch
   auf einem 1920er-Schirm nur 1240px. Belegt sind davon heute 1103px. Der
   volle Text „Kostenlos Discord beitreten" braucht 257px und sprengt das
   Budget — gemessen quetscht er die Wortmarke von 193px auf 102px, also auf
   gut die Haelfte, und zwar auf JEDER Desktop-Breite. Mit „Discord" bleibt
   die Wortmarke unversehrt. Die volle Beschriftung steht dort, wo Platz ist:
   im Fuss und im Klappmenue; im Kopf tragen sie aria-label und title.
   Unterhalb von 1320px wird es noch enger, dort bleibt nur das Icon. */
@media (max-width: 1319px) {
  .nav-actions .btn-discord { padding-inline: .75em; }
  .nav-actions .btn-discord .btn-label { display: none; }
}


/* ══ 7 · Ankündigungsleiste ═══════════════════════════════════════════════
   Die Zeile über dem Kopf. Sie kündigt den nächsten Mentoring-Durchgang an
   und führt auf mentoring.html.

   Bewusst NICHT `position: fixed` wie die alte Vollblau-Leiste: die musste
   Kopf, Mobilmenü und Hero mit `top`- und `padding-top`-Korrekturen um ihre
   36px verschieben, und jede dieser Korrekturen war eine eigene Regel pro
   Seite. Hier steht die Leiste im normalen Fluss ÜBER dem klebrigen Kopf.
   Sie scrollt weg, der Kopf klebt danach wie zuvor bei `top: 0` — kein
   einziger Versatz nötig, und `.nav-panel` (absolut zum Kopf) stimmt auch.

   Die Farbstufe liegt zwischen dem alten Vollblau (#0A2E6E deckend) und der
   ersten, fast unsichtbaren Fassung: ein dunkelblauer Grund mit einem
   Verlaufs-Schimmer darüber, der von links nach rechts durch Blau, Violett
   und zurück läuft — dieselben drei Töne wie `--grad-brand`, nur mit
   Deckkraft im Zehntelbereich. Unten schließt eine feine blaue Linie ab.

   Ausblenden merkt sich becro-dark.js in localStorage('becro_announce').
   Damit die Leiste bei gesetztem Merker nicht kurz aufblitzt, setzt ein
   winziges Inline-Skript im <head> JEDER Seite vorab `html.ab-off` —
   becro-dark.js läuft mit `defer` erst nach dem ersten Bild. */

.announce {
  position: relative;
  z-index: 61;                    /* über dem Kopf (60), damit die
                                     Kopf-Unschärfe nicht darüberliegt */
  background-color: #0a1220;
  background-image:
    linear-gradient(90deg,
      rgba(46, 144, 250, .22) 0%,
      rgba(99, 91, 255, .13) 48%,
      rgba(46, 144, 250, .19) 100%);
  border-bottom: 1px solid rgba(46, 144, 250, .24);
}
html.ab-off .announce { display: none; }

/* Der Link trägt die ganze Leiste, nicht nur den Text: `display: flex` auf
   Blockebene, die Zentrierung passiert innen. Damit ist der komplette
   Streifen die Trefferfläche — auf dem Handy der Unterschied zwischen einem
   13px hohen Textziel und einer 46px hohen Zeile.

   Das X liegt als Geschwister darüber (`z-index`), nicht im Link: ein
   <button> darf nicht in einem <a> stehen, und der Klick aufs X soll gerade
   NICHT navigieren. Weil der Link kein Vorfahr des Knopfs ist, hellt die
   Leiste beim Zeigen aufs X auch nicht auf. */
.announce-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 46px;
  padding-block: .6rem;
  /* Rechts Platz für das X, links derselbe Betrag, damit der Text trotz
     `justify-content: center` optisch mittig bleibt. */
  padding-inline: calc(var(--pad-x) + 26px);
  font-size: .8375rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text);
  text-align: center;
  transition: background-color var(--t) var(--ease);
}
.announce-link:hover { background-color: rgba(255, 255, 255, .05); }

/* Der Akzent sitzt auf dem Datum — das ist die Information, die den Blick
   halten soll. `--accent` (#2e90fa) selbst ist auf diesem blauen Grund zu
   nah dran und käme auf 4,4:1; der aufgehellte Ton liegt bei rund 6,6:1 und
   hebt sich zugleich sichtbarer vom Weiß daneben ab. */
.announce-date { color: #6cb6ff; font-weight: 600; }
.announce-link:hover .announce-date { color: #8ac6ff; }

.announce-link .arrow { display: inline-block; transition: transform var(--t) var(--ease); }
.announce-link:hover .arrow { transform: translateX(4px); }

/* Der blaue Punkt — dieselbe Marke, die auch der Termin im Mentoring-Hero
   trägt. Ein Rand aus verlaufendem Blau pulst langsam nach außen; bei
   reduzierter Bewegung schaltet Abschnitt 23 die Animation ab, der Punkt
   bleibt. */
.pulse-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: var(--pill);
  background-color: var(--accent);
  box-shadow: 0 0 0 0 var(--glow);
  animation: pulse-dot 2.6s var(--ease) infinite;
}
@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(46, 144, 250, .42); }
  70%  { box-shadow: 0 0 0 6px rgba(46, 144, 250, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 144, 250, 0); }
}
/* In der Leiste steht der Punkt auf hellerem Grund als im Hero und braucht
   etwas mehr Leuchtkraft, um nicht flach zu wirken. */
.announce .pulse-dot { background-color: #58a6ff; }

.announce-close {
  position: absolute;
  z-index: 2;                     /* über der Trefferfläche des Links */
  top: 50%;
  right: max(calc(var(--pad-x) - 8px), 8px);
  transform: translateY(-50%);
  display: flex;
  padding: 8px;
  border: 0;
  background: none;
  color: rgba(244, 244, 246, .55);
  cursor: pointer;
  transition: color var(--t) var(--ease);
}
.announce-close:hover { color: var(--text); }
.announce-close svg { width: 10px; height: 10px; display: block; }

@media (max-width: 560px) {
  /* „, Anmeldung offen" fällt weg — Titel, Datum und Pfeil passen bei 360px
     noch in eine Zeile, der volle Satz lief in eine zweite. */
  .announce-more { display: none; }
  .announce-link { gap: .45rem; font-size: .78125rem; padding-inline: calc(var(--pad-x) + 22px); }
}


/* ══ 8 · Kopf und Navigation ══════════════════════════════════════════════ */

header.site {
  position: sticky;
  top: 0;
  z-index: 60;
  background-color: rgba(5, 5, 8, .72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease);
}
header.site.scrolled {
  background-color: rgba(5, 5, 8, .88);
  border-bottom-color: var(--line);
}

/* Auf dem Handy OHNE backdrop-filter. Die Leiste klebt oben und liegt damit
   ueber allem, was unter ihr durchscrollt: Safari muss den Blur dann bei
   JEDEM Bild ueber die volle Breite neu rechnen. Das war die groesste
   einzelne Ursache des Stockens beim Scrollen — ein Filter, den man auf
   einem 390px-Schirm ohnehin kaum sieht.

   An seine Stelle tritt ein deckenderer, halbtransparenter Grund: die Leiste
   traegt weiterhin die Seitenfarbe und nicht Weiss, sie rechnet nur nichts
   mehr. Umschaltpunkt 990px — derselbe, an dem die Pille zum Menue wird,
   also genau die Breiten, auf denen ein Finger scrollt. */
@media (max-width: 990px) {
  header.site {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-color: rgba(5, 5, 8, .92);
  }
  header.site.scrolled { background-color: rgba(5, 5, 8, .97); }
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 72px;
  position: relative;
}
.brand img { height: 26px; width: auto; }

/* Die Pillen-Navigation der App: Glasfläche, runde Kapsel, aktiver Punkt im
   Blauverlauf. Auf der Website sitzt sie mittig zwischen Marke und CTA. */
.nav-pill {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  background-color: var(--glass);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: var(--shadow-md);
}
.nav-pill a {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--pill);
  padding: .5rem 1rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--text-2);
  transition: color var(--t) var(--ease), background-color var(--t) var(--ease);
}
.nav-pill a:hover { color: var(--text); background-color: rgba(255, 255, 255, .04); }
.nav-pill a.active {
  background-image: var(--grad-brand);
  color: var(--on-accent);
  font-weight: 600;
  box-shadow: var(--shadow-nav);
}

.nav-actions { display: flex; align-items: center; gap: .75rem; }

/* Die Huelle um Pille und Aktionen. Auf dem Desktop `display: contents` —
   dann sitzt die Pille wie ohne Wrapper direkt im Flexlauf der Leiste und
   das Layout aendert sich um kein Pixel. Erst unter 990px wird sie zum
   eigenen, deckenden Panel (siehe Mobilmenue-Block weiter unten). */
.nav-panel { display: contents; }
.nav-panel-actions,
.nav-scrim { display: none; }

.hamburger {
  display: none;
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  background-color: var(--glass);
}
.hamburger span {
  display: block;
  width: 16px; height: 1.5px;
  margin-inline: auto;
  border-radius: 2px;
  background-color: var(--text);
}
.hamburger span + span { margin-top: 4px; }
.hamburger span { transition: transform var(--t) var(--ease), opacity var(--t) var(--ease); }
/* Offen ist derselbe Knopf das X oben rechts: drei Balken, der mittlere
   blendet aus, die aeusseren kippen um je 5.5px (1.5px Balken + 4px Luft)
   in die Mitte. Ein zweiter Schliessen-Knopf im Panel waere eine zweite
   Trefferflaeche fuer dieselbe Handlung. */
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }


/* ══ 9 · Hero ═════════════════════════════════════════════════════════════ */

.hero { position: relative; overflow: hidden; padding-block: clamp(64px, 8vw, 116px) clamp(56px, 7vw, 104px); }

.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

/* Akzent-Wolken. Sie liegen im geklippten .hero — dass sie über dessen Kante
   hinausragen, ist Absicht und erzeugt keinen Dokument-Überlauf. */
.hero-glow { position: absolute; border-radius: 50%; filter: blur(80px); }
.glow-a {
  width: 720px; height: 720px; top: -300px; right: -180px;
  background: radial-gradient(circle, rgba(46, 144, 250, .28), transparent 70%);
}
.glow-b {
  width: 620px; height: 620px; bottom: -320px; left: -200px;
  background: radial-gradient(circle, rgba(99, 91, 255, .18), transparent 70%);
}

/* Das feine Raster. Was hier früher noch stand — Volumenprofil, gefüllter
   Preispfad und ein wandernder Lichtpunkt — ist entfallen: eine generische
   Chart-Zackenlinie sagt über diese Arbeit nichts aus. An ihre Stelle tritt
   die Orderbuch-Heatmap darunter. */
.hero-composite { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .34; }
.cmp-heat    { opacity: .10; }


/* --- Orderbuch-Heatmap im Hero -----------------------------------------
   Ein echter Bookmap-Screenshot (`hero-heatmap.png`) als Grund der rechten
   Hälfte. Vier Schritte machen aus einem bunten Chart eine Fläche:

     1. abdunkeln (--shot-dim) und entsättigen,
     2. Deckkraft auf --shot-opacity — das Bild soll erkennbar bleiben, nicht
        verschwinden,
     3. `mix-blend-mode: color` zieht es ins Markenblau: die Helligkeit des
        Bildes bleibt, Farbton und Sättigung kommen von uns. Bookmaps
        Gelb-Rot-Grün ist damit weg, die Struktur bleibt,
     4. zweifache Maske — nach links auf null, oben und unten weich — damit
        die Textspalte auf sauberem Schwarz steht.

   Die drei Regler stehen bewusst oben an `.hero-bg`: daran wird kalibriert,
   nicht an den Regeln darunter. Fehlt die Bilddatei, bleibt der Hero
   einfach Verlauf plus Schein — nichts bricht. */
.hero-bg {
  --shot-opacity: .22;   /* Sichtbarkeit des Bildes insgesamt */
  --shot-dim: .55;       /* Helligkeit VOR der Deckkraft */
  --shot-width: 66%;     /* wie weit das Bild von rechts hereinragt */
}

/* Der Schein liegt UNTER dem Bild und gibt der rechten Hälfte Tiefe. */
.hero-shot-glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(58% 72% at 78% 42%, rgba(46, 144, 250, .34), transparent 68%),
    radial-gradient(38% 46% at 92% 76%, rgba(99, 91, 255, .22), transparent 70%);
  filter: blur(18px);
}

.hero-shot {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: var(--shot-width);
  /* Der eigene Stapelkontext ist Pflicht: ohne ihn färbt die Blendung unten
     nicht das Bild, sondern alles, was im Hero darunter liegt. */
  isolation: isolate;
  opacity: var(--shot-opacity);

  background-image: url("hero-heatmap.png");
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;

  filter: brightness(var(--shot-dim)) saturate(.55) contrast(1.08);

  /* Zwei Masken gleichzeitig: waagerecht nach links auf null, senkrecht an
     Ober- und Unterkante weich. `intersect` nimmt von beiden das Minimum —
     nur wo beide durchlassen, ist das Bild zu sehen. */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.10) 22%, rgba(0,0,0,.45) 46%, rgba(0,0,0,.82) 72%, #000 100%),
    linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.10) 22%, rgba(0,0,0,.45) 46%, rgba(0,0,0,.82) 72%, #000 100%),
    linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-composite: intersect;
}

/* Schritt 3: Farbe der Marke, Helligkeit des Bildes. */
.hero-shot::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(200deg, #4da2fb 0%, #2e90fa 52%, #635bff 100%);
  mix-blend-mode: color;
}

.hero .wrap { position: relative; z-index: 1; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem 1rem .45rem .7rem;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  background-color: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: .8125rem;
  color: var(--text-2);
}
.hero-badge .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background-color: var(--accent);
  box-shadow: 0 0 10px 1px var(--glow);
}
/* Wie bei der Kopfleiste: auf dem Handy kein Filter. Das Abzeichen steht im
   Hero, also genau dort, wo der erste Scrollstoss ankommt. */
@media (max-width: 990px) {
  .hero-badge {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-color: rgba(10, 10, 16, .90);
  }
}

.hero h1 { margin-top: 1.6rem; max-width: 16ch; }
.hero-body { margin-top: 1.6rem; max-width: 62ch; }
.hero-body .small { margin-top: .8rem; }
.hero .btn-group { margin-top: 2.2rem; }




/* ══ 9b · Hero auf der Mittelachse, Orderflow als Grund (nur Startseite) ══
   Der Radial-Schein ist der Grund, den jede zweite Seite hat. An seine
   Stelle tritt das, was hier taeglich gelesen wird — zur Laufzeit auf
   Canvas gezeichnet, ohne eingebundenes Bild.

   Der Grund steht STILL. Ein Hintergrund, der laeuft, zieht den Blick von
   der Headline ab; bewegt wird nur der Auftritt der Texte.

   Die Regler stehen hier oben, daran wird kalibriert:
     --of-opacity  Gesamtdeckkraft der Textur.

   Die Klassen haengen an .hero-mid und .hero-flow und damit nur an der
   Startseite; die Glow-Regeln in Abschnitt 9 bleiben unangetastet, weil
   zehn weitere Seiten sie benutzen. */
.hero-flow { --of-opacity: .42; }

/* Die Klasse sitzt auf der Leinwand UND auf dem Standbild, das
   becro-motion.js auf dem Handy an ihre Stelle setzt (siehe dort,
   `orderflowBackdrop`). `object-fit` greift nur beim Bild: die Aufnahme
   entsteht einmal in der Groesse beim Laden, und wenn Safari beim Scrollen
   seine Adressleiste ein- und ausblendet, wird sie nur skaliert statt neu
   gezeichnet. Bei einer abstrakten Textur sieht man das nicht. */
.of-scatter {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: var(--of-opacity);
  object-fit: cover;
  object-position: center;
}

/* Die abgedunkelte Zone liegt dort, wo der Text steht — mittig oben. Nach
   aussen laeuft sie aus, damit die Textur an den Raendern stehen bleibt. */
.of-scrim {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 54% at 50% 40%,
      rgba(5, 5, 8, .96) 0%, rgba(5, 5, 8, .88) 42%,
      rgba(5, 5, 8, .42) 74%, rgba(5, 5, 8, 0) 100%),
    linear-gradient(180deg,
      rgba(5, 5, 8, .60) 0%, rgba(5, 5, 8, 0) 22%,
      rgba(5, 5, 8, 0) 74%, rgba(5, 5, 8, .74) 100%);
}

/* --- Die Mittelachse ----------------------------------------------------
   Alles sitzt auf einer Achse: Kicker, Headline, Text, ein Knopf. Der
   zweite Weg ("Der Ansatz") ist entfallen — er steht in der Navigation,
   und zwei gleichwertige Knoepfe nehmen dem einen die Wirkung. */
.hero-mid {
  display: flex; flex-direction: column; justify-content: center;
  min-height: min(86vh, 880px);
  padding-block: clamp(52px, 6vw, 92px) 0;
  text-align: center;
}
.hero-mid .wrap { position: relative; z-index: 1; }

.hero-kicker {
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--text-3);
  max-width: none;
}
.hero-mid h1 {
  margin: 1.8rem auto 0;
  max-width: 20ch;
  font-size: clamp(2.5rem, 5.6vw, 4.75rem);
  line-height: .98;
  text-wrap: balance;
}
.hero-mid .hero-body { margin: 1.6rem auto 0; max-width: 62ch; }
.hero-mid .hero-body .lead { margin-inline: auto; max-width: 60ch; }
.hero-mid .hero-body .small { margin: .9rem auto 0; max-width: none; }
.hero-mid .btn-group { margin-top: 2.6rem; justify-content: center; }

/* --- Kennzahlen ohne Rahmen ---------------------------------------------
   Vier Mono-Zeilen auf der Unterkante des Heros, gleichmaessig verteilt.
   Kein Panel, keine Naht: sie sind Beleg, keine Angebotskarten. */
.hero-figures {
  position: relative; z-index: 1;
  display: flex; justify-content: space-between; gap: 1.5rem;
  width: min(var(--max-w), 100%);
  margin: clamp(3.5rem, 6vw, 5.5rem) auto 0;
  padding: 1.4rem var(--pad-x) clamp(28px, 3vw, 44px);
  text-align: left;
}
.hero-figures div { font-family: var(--font-mono); }
.hero-figures b {
  display: block;
  font-size: 1.0625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  color: var(--text);
}
.hero-figures b.pos { color: var(--positive); }
.hero-figures span {
  display: block;
  margin-top: .35rem;
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
}

@media (max-width: 700px) {
  /* Untereinander und mittig, die Kennzahlen als Zweierraster. Der Grund
     wird leiser: auf einer schmalen Flaeche steht die Textur dichter und
     konkurriert sonst mit dem Text. */
  .hero-flow { --of-opacity: .34; }
  .hero-mid { min-height: 0; }
  /* Bei .26em Sperrung brach die Kicker-Zeile auf 390px um. */
  .hero-kicker { font-size: .625rem; letter-spacing: .16em; }
  .hero-figures {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 1.6rem 1.2rem;
    text-align: center;
  }
  .of-scrim {
    background:
      radial-gradient(94% 48% at 50% 34%,
        rgba(5, 5, 8, .96) 0%, rgba(5, 5, 8, .84) 58%, rgba(5, 5, 8, .32) 100%),
      linear-gradient(180deg,
        rgba(5, 5, 8, .62) 0%, rgba(5, 5, 8, 0) 24%,
        rgba(5, 5, 8, 0) 78%, rgba(5, 5, 8, .58) 100%);
  }
}


/* ══ 10 · Kennzahlen-Kacheln ══════════════════════════════════════════════ */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: clamp(3rem, 5vw, 4.5rem);
}
.stat { padding: 1.5rem 1.5rem 1.4rem; }
.stat .v {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--text);
}
/* Belegzahlen tragen das Lime — die einzige Stelle im Kopf, an der eine
   Farbe eine Aussage macht. */
.stat .v.pos { color: var(--positive); }
.stat .l { margin-top: .7rem; font-size: .8125rem; line-height: 1.4; color: var(--text-2); }


/* ══ 10b · Zwischenruf zwischen Hero und Plattform-Leiste ═════════════════
   Eine Zeile, kein Abschnitt: gesetzt wie die Mono-Kicker, zentriert, und
   leise genug, dass sie den Hero nicht einholt. */
.hero-note {
  padding-block: clamp(28px, 4vw, 52px) 0;
  text-align: center;
}
.hero-note p {
  margin-inline: auto;
  /* Keine Begrenzung: mit Sperrung braucht die Zeile rund 780px und brach
     bei 62ch mitten im Gedankenstrich um. Der Satzspiegel deckelt sie
     ohnehin, auf schmalen Displays bricht sie von allein. */
  max-width: none;
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: .1em;
  color: var(--text-3);
}
@media (max-width: 640px) {
  .hero-note p { font-size: .6875rem; letter-spacing: .06em; }
}


/* ══ 11 · Plattform-Leiste ════════════════════════════════════════════════ */

.platforms { padding-block: clamp(40px, 5vw, 64px) 0; }
.platforms .wrap { border-top: 1px solid var(--line-soft); padding-top: clamp(32px, 4vw, 48px); }
.platforms .lbl {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 1.6rem;
  text-align: center;
}
/* Die Leiste ist eine Reihe gleichrangiger Marken ohne Leserichtung —
   zentriert steht sie ruhiger als linksbündig mit offenem Rest. */
.logo-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.8rem, 5vw, 3.6rem); }
.logo-slot { display: inline-flex; align-items: center; }
/* Alle vier Partnerlogos liegen dunkel vor (ATAS ist reines Schwarz) und
   wären auf dem Grund unsichtbar. brightness(0) invert(1) macht sie flach
   weiß; die Deckkraft hält sie hinter dem Inhalt zurück. */
.logo-slot img {
  height: 24px; width: auto;
  filter: brightness(0) invert(1);
  opacity: .45;
  transition: opacity var(--t) var(--ease);
}
.logo-slot:hover img { opacity: .8; }


/* ══ 12 · Split (Text zweispaltig) ════════════════════════════════════════ */

.split { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.split-head h2 { max-width: 14ch; }
.split-head .kicker-rule { margin-bottom: 1.1rem; }
.split-body > * + * { margin-top: 1.15rem; }
.split-body .lead { color: var(--text); max-width: 62ch; }

/* Der Ansatz: die Überschrift steht allein in der ersten Zeile; Kachelstapel
   und Textspalte beginnen darunter auf derselben Linie. Der Abstand kommt vom
   row-gap, nicht mehr vom margin-top der Kacheln — sonst säße der Stapel
   tiefer als der Text daneben. Unter 900px stehen die drei Blöcke ohnehin
   untereinander, Reihenfolge und Abstände bleiben dort unverändert. */
#ansatz .split { row-gap: 2rem; }
#ansatz .split-points { margin-top: 0; }
@media (min-width: 901px) {
  #ansatz .split-head   { grid-column: 1; grid-row: 1; }
  #ansatz .split-points { grid-column: 1; grid-row: 2; }
  #ansatz .split-body   { grid-column: 2; grid-row: 2; }
}

/* --- Kernpunkte unter einer Split-Überschrift -------------------------
   Die linke Spalte trug nur Marke und Überschrift; darunter stand eine
   Spaltenhöhe Leere neben dem Fließtext. Diese drei Kacheln füllen sie mit
   dem, was der Text daneben ohnehin benennt — Werkzeug statt Dekoration. */
.split-points { display: flex; flex-direction: column; gap: .7rem; margin-top: 2rem; }
.split-point { display: flex; gap: 1rem; padding: 1.1rem 1.2rem; }
.split-point .n {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px; font-weight: 700;
  letter-spacing: var(--tracking-kicker);
  color: var(--accent);
  padding-top: .2rem;
}
.split-point h3 { font-size: .95rem; }
.split-point p { margin-top: .3rem; font-size: .8125rem; line-height: 1.45; color: var(--text-3); max-width: none; }


/* ══ 13 · Leistungs-Kacheln ═══════════════════════════════════════════════ */

/* --- Bento statt Gleichraster -------------------------------------------
   Sieben gleich grosse Kacheln sagten ueber das Angebot nichts aus:
   Mitgliederbereich und Journal sind die beiden Traeger, die Discord-Karte
   ist eine Fussnote daneben. Sechs Spalten — die beiden Grossen nehmen je
   drei, die fuenf Kleinen darunter je zwei, die letzten beiden je drei. So
   geht jede Reihe glatt auf (3+3, 2+2+2, 3+3) und die Hierarchie entsteht
   aus der Flaeche, nicht daraus, dass eine Kachel lauter gestaltet waere.

   Die Bruchstellen stehen hier und nicht in Abschnitt 22, weil `grid-column`
   der Kacheln und `grid-template-columns` des Rasters nur zusammen Sinn
   ergeben: bei einer Spalte muss die Ueberspannung zurueckgenommen werden,
   sonst legt der Browser eine zweite, implizite Spalte an. */
.feature-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }
.f-card { grid-column: span 2; padding: 1.75rem 1.6rem 1.8rem; }

/* Die letzten beiden teilen sich eine Reihe zu zweit statt zu dritt. Der
   Positionsbezug ist Absicht — er haengt an der ANZAHL der kleinen Kacheln,
   nicht an ihrem Inhalt. Kommt eine sechste dazu, gehoert diese Regel
   angefasst, sonst bleibt unten eine Luecke. */
.feature-grid > .f-card:nth-last-child(-n+2) { grid-column: span 3; }

/* Die beiden Grossen: mehr Innenraum, eine Spur groessere Ueberschrift und
   der Medienbereich am Fuss. `margin-top: auto` schiebt ihn nach unten, damit
   die Videos beider Karten auf einer Linie sitzen, auch wenn der Text
   darueber unterschiedlich lang ist. */
.f-feature {
  grid-column: span 3;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: clamp(2rem, 2.6vw, 2.6rem);
}
/* Der Text nimmt den Ueberschuss auf, der Medienbereich bleibt bei seiner
   Groesse — so sitzen die Videos beider Karten auf einer Linie, auch wenn
   der Text darueber unterschiedlich lang ist. */
.f-body  { flex: 1 1 auto; }
.f-media { flex: 0 0 auto; }
.f-feature h3 { font-size: 1.3rem; }
.f-feature p { font-size: .95rem; }

/* Platzhalter fuer die Produktvideos. Bewusst leer: ein Fremdbild waere eine
   Behauptung, ein Piktogramm Dekoration. Die Flaeche traegt dieselbe
   Waschung wie die grossen Panels der Seite, nur auf dunklerem Grund, damit
   sie als Aussparung IN der Karte liest und nicht als zweite Karte. */
.f-media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, .055);
  background-color: var(--bg);
  background-image: var(--grad-hero), var(--grad-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
/* Steht schon eine Aufnahme darin, fuellt sie die Flaeche. Die Datei ist
   bereits auf 16:9 zugeschnitten — `cover` ist nur die Absicherung, falls
   spaeter eine mit anderem Verhaeltnis hereinkommt. Der Verlauf darunter
   bleibt als Grund stehen, solange das Bild noch nicht geladen ist. */
.f-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1180px) {
  /* Zwei Spalten: die Grossen laufen ueber die volle Breite, die Kleinen
     stehen zu zweit. Fuenf Kleine gehen darin nicht auf — die letzte nimmt
     deshalb die ganze Breite, statt als halbe Waise stehen zu bleiben. */
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .f-card { grid-column: span 1; }
  .f-feature { grid-column: span 2; }
  .feature-grid > .f-card:nth-last-child(-n+2) { grid-column: span 1; }
  .feature-grid > .f-card:last-child { grid-column: span 2; }
}
@media (max-width: 1180px) and (min-width: 641px) {
  /* Ueber die volle Breite gestellt, wuerde ein 16:9-Medium die Karte auf
     ueber 700px auftuermen — bei 1024px waere der Platzhalter allein 494px
     hoch. Hier legt sich die grosse Karte deshalb quer: Text links, Medium
     rechts. Das Seitenverhaeltnis bleibt, die Karte wird halb so hoch. */
  .f-feature {
    flex-direction: row;
    align-items: center;
    gap: clamp(1.6rem, 2.6vw, 2.6rem);
  }
  .f-feature .f-body  { flex: 1 1 44%; }
  .f-feature .f-media { flex: 0 0 52%; }
}
@media (max-width: 640px) {
  .feature-grid { grid-template-columns: 1fr; }
  .feature-grid > .f-card,
  .feature-grid > .f-card:nth-last-child(-n+2),
  .feature-grid > .f-card:last-child { grid-column: auto; }
}

.f-ico {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  background-image: var(--grad-brand);
  box-shadow: var(--shadow-accent);
  margin-bottom: 1.2rem;
}
.f-ico svg { width: 20px; height: 20px; fill: none; stroke: var(--on-accent); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.f-card h3 { margin-bottom: .55rem; }
.f-card p { font-size: .9rem; color: var(--text-2); max-width: none; }

/* Der Hinweis unter dem Medienbereich: die Aufnahme zeigt eine
   Beispieldarstellung, keine zugesicherte Auswertung. Klein und
   zurueckhaltend, aber vorhanden. */
.f-note {
  margin-top: .7rem;
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
  max-width: none;
}

/* --- Rand-Schein unter dem Zeiger ---------------------------------------
   Ein Lichtpunkt, der auf dem RAND der Kachel mitwandert. Der Ring entsteht
   aus zwei Masken: die eine deckt die ganze Flaeche, die andere nur den
   Inhaltskasten, `exclude` laesst die 1px-Fuellung dazwischen stehen. So
   braucht es kein zweites Element im Markup.

   Die Position kommt als --mx/--my aus becro-motion.js. Bleibt das Skript
   aus, stehen beide auf 50 % und die Kachel bekommt beim Ueberfahren einen
   ruhigen, mittigen Schein — kein kaputter Zustand, nur ein leiserer.
   Sichtbar wird der Ring ohnehin erst im Hover, deshalb kostet er auf
   Touch-Geraeten nichts. */
.f-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background:
    radial-gradient(160px circle at var(--mx, 50%) var(--my, 50%),
      rgba(46, 144, 250, .55), rgba(46, 144, 250, 0) 72%);
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 240ms var(--ease);
  pointer-events: none;
}
/* Die grossen Kacheln sind gut doppelt so breit — mit demselben Radius saehe
   der Schein dort aus wie ein Fleck statt wie ein Lichtpunkt. */
.f-feature::before {
  background:
    radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
      rgba(46, 144, 250, .5), rgba(46, 144, 250, 0) 72%);
}
.f-card:hover::before { opacity: 1; }


/* ══ 13b · Handelstag-Timeline ════════════════════════════════════════════
   Abschnitt 02 zeigt keine Leistungsliste mehr, sondern die Chronologie
   eines Tages. Die Reihenfolge IST das Argument — wer sie von oben nach
   unten liest, sieht, dass zwischen Briefing und Journal keine Luecke
   bleibt.

   Aufbau. `.tl-frame` ist der Rahmen: er traegt die Maximalbreite, die
   Zentrierung, das Gleis, die gezeichnete Linie und den Leucht-Kopf. Die
   `ol` darin ist nur noch die Liste.

     |  Gleis (.tl-frame::before, ruhende Linie)
     |  gezeichnete Linie (.tl-frame::after, folgt dem Scroll-Fortschritt)
     *  Leucht-Kopf (.tl-head), laeuft der Linie ein Stueck voraus
     o  Stationspunkt, ploppt auf, wenn die Linie ihn erreicht
        ZEITMARKE          Titel
                           Text

   Linie und Gleis laufen von der Mitte des ERSTEN Punktes bis zur Mitte
   des LETZTEN. Frueher spannten sie ueber die volle Hoehe der Liste — und
   weil die letzte Station Text unter ihrem Punkt hat, lief die Linie
   danach noch ein Stueck ins Leere. Wo genau die beiden Punkte sitzen,
   weiss nur der Browser; becro-micro.js misst es einmal und schreibt es
   als `--tl-y0` und `--tl-h` her. Der Fortschritt `--tl-p` zaehlt ueber
   dieselbe Strecke, also ist die Linie GENAU dann voll, wenn der letzte
   Punkt aufleuchtet.

   Ohne Skript ist ALLES sichtbar: die Linie steht auf `scaleY(1)`, jeder
   Punkt leuchtet, jeder Text steht. Erst `.is-live` — die Klasse setzt
   becro-micro.js — dreht das auf den Anfangszustand zurueck. Damit ist der
   Fall „kein Skript", der Fall „prefers-reduced-motion" (das Skript steigt
   dann sofort aus) und der Fall „alter Browser" mit einer einzigen
   Entscheidung erledigt, statt mit drei Sonderregeln. */

/* `--tl-p` wird per `@property` als Zahl angemeldet. Das ist kein Beiwerk:
   nur ein angemeldeter Typ hat einen definierten Anfangswert, und ohne den
   waere `scaleY(var(--tl-p))` vor dem ersten Schreiben ungueltig.

   `inherits: true` ist dabei Pflicht und war der erste Versuch NICHT wert:
   mit `inherits: false` (gedacht als Sparmassnahme gegen das Neubewerten
   des Teilbaums) bekommt das Pseudoelement nicht den Wert seines
   Ursprungselements, sondern den Anfangswert — die Linie stand damit auf
   jeder Scrollhoehe auf `scaleY(0)` und war schlicht unsichtbar. Ein
   Pseudoelement ERBT von seinem Ursprungselement; eine nicht vererbte
   Property erreicht es nie. Der Teilbaum hier sind fuenf Stationen, das
   Neubewerten ist also ohnehin nicht der Rede wert. */
@property --tl-p {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

/* Bild und Timeline stehen auf derselben Spaltenbreite und mittig auf der
   Seite — sie sind EIN Block, kein Bild mit einer Liste darunter.

   `overflow-x: clip` faengt die Wege ab, die Zeitmarke und Inhalt beim
   Hereinkommen zuruecklegen (bis 56px nach links bzw. rechts). `clip` und
   nicht `hidden`: es macht keinen Scrollcontainer auf. Senkrecht bleibt
   sichtbar, was ueber den Rand ragt — sonst waeren die Punkt-Bursts oben
   und unten abgeschnitten. */
#member {
  --tl-max: 840px;
  overflow-x: clip;
}

/* --- Der Screenshot ueber der Timeline --------------------------------- */
.day-shot {
  margin: clamp(1.6rem, 3vw, 2.4rem) auto 0;
  max-width: var(--tl-max, 840px);
}
.day-cap {
  margin-top: .85rem;
  text-align: center;
  font-size: .8125rem;
  color: var(--text-3);
  max-width: none;
}

/* --- Rahmen, Gleis, Linie, Kopf ---------------------------------------- */
.tl-frame {
  --tl-pad: 3.4rem;   /* Abstand des Textes von der Linie */
  --tl-x: 5px;        /* linke Kante der Linie */
  --tl-dot: 11px;
  --tl-slide: 56px;   /* Weg, den Zeitmarke und Inhalt hereinkommen */
  /* GSAPs power3.out als Kurve — vorne schnell, hinten weich auslaufend.
     Das ist es, was eine Bewegung snappy macht, nicht die Dauer. */
  --tl-ease: cubic-bezier(.215, .61, .355, 1);

  position: relative;
  max-width: var(--tl-max, 840px);
  margin: clamp(1.8rem, 3vw, 2.6rem) auto 0;
}

.tl-frame::before,
.tl-frame::after {
  content: "";
  position: absolute;
  left: var(--tl-x);
  /* Rueckfallwerte fuer den Fall ohne Skript: volle Hoehe, leicht
     eingerueckt. Mit Skript stehen hier die gemessenen Punktpositionen. */
  top: var(--tl-y0, .45rem);
  height: var(--tl-h, calc(100% - .9rem));
  width: 1px;
}
.tl-frame::before { background-color: var(--line-2); }
.tl-frame::after {
  background-image: linear-gradient(180deg,
    rgba(var(--glow-rgb), .3), rgba(var(--glow-rgb), .95) 12%, rgba(var(--glow-rgb), .95));
  transform-origin: top center;
}
/* Erst mit Skript folgt sie dem Scroll-Fortschritt; ohne steht sie voll. */
.tl-frame.is-live::after { transform: scaleY(var(--tl-p)); }

/* Der Leucht-Kopf laeuft der gezeichneten Linie zehn Pixel voraus — er
   zieht sie, statt ihr zu folgen. Sichtbar nur unterwegs: am Anfang und am
   Ende nimmt becro-micro.js `tl-run` weg, damit er nicht auf dem ersten
   oder hinter dem letzten Punkt liegen bleibt. */
.tl-head {
  position: absolute;
  left: var(--tl-x);
  top: var(--tl-y0, .45rem);
  margin-left: -1px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 10px 3px rgba(var(--glow-rgb), .9),
              0 0 24px 9px rgba(var(--glow-rgb), .42);
  pointer-events: none;
  opacity: 0;
  transform: translateY(calc(var(--tl-p) * var(--tl-h, 0px) + 10px));
  transition: opacity 240ms var(--ease);
}
.tl-frame.tl-run .tl-head { opacity: 1; }

/* --- Liste und Stationen ----------------------------------------------- */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 11.5rem 1fr;
  gap: 0 1.7rem;
  align-items: start;
  padding-left: var(--tl-pad);
  padding-bottom: clamp(1.7rem, 2.6vw, 2.5rem);
}
.tl-item:last-child { padding-bottom: 0; }

/* Der Punkt sitzt auf der Linie, nicht daneben: die halbe Differenz aus
   Punktbreite und Linienbreite nach links. */
.tl-dot {
  position: absolute;
  left: calc(var(--tl-x) - (var(--tl-dot) - 1px) / 2);
  top: .38rem;
  width: var(--tl-dot);
  height: var(--tl-dot);
  border-radius: 50%;
  border: 1px solid transparent;
  background-color: var(--accent);
  box-shadow: var(--glow-dot);
  transition: background-color 260ms var(--ease),
              border-color 260ms var(--ease),
              box-shadow 260ms var(--ease);
}
/* Der Blitz. Liegt als eigene Ebene ueber dem Punkt, damit er unabhaengig
   von dessen Groesse aufreissen und ausblenden kann. */
.tl-dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background-image: radial-gradient(circle,
    rgba(255, 255, 255, .95) 0%, rgba(var(--glow-rgb), .7) 42%, rgba(var(--glow-rgb), 0) 72%);
  opacity: 0;
  pointer-events: none;
}
/* Noch nicht erreicht: klein, dunkel, ohne Schein. */
.tl-frame.is-live .tl-item:not(.is-lit) .tl-dot {
  background-color: var(--surface-raised);
  border-color: var(--line-2);
  box-shadow: 0 0 0 0 rgba(var(--glow-rgb), 0);
  transform: scale(.55);
}
/* Erreicht: aufploppen mit Ueberschwung, dazu einmal der Blitz. Beides
   sind Animationen und keine Uebergaenge — sie sollen einmal laufen und
   fertig sein, nicht beim Verlassen rueckwaerts zuruecklaufen. */
.tl-frame.is-live .tl-item.is-lit .tl-dot {
  animation: becro-dot-pop 380ms var(--tl-ease) 1;
}
.tl-frame.is-live .tl-item.is-lit .tl-dot::after {
  animation: becro-dot-burst 520ms var(--tl-ease) 1;
}
@keyframes becro-dot-pop {
  0%   { transform: scale(.45); }
  52%  { transform: scale(1.38); }
  100% { transform: scale(1); }
}
@keyframes becro-dot-burst {
  0%   { opacity: .95; transform: scale(.35); }
  100% { opacity: 0;   transform: scale(3.4); }
}

.tl-time {
  margin: 0;
  padding-top: .34rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-2);
  max-width: none;
}
.tl-body h3 { margin: 0; font-size: 1.3rem; }
.tl-body p { margin-top: .7rem; font-size: 1.0625rem; line-height: 1.6; color: var(--text-2); max-width: 54ch; }

/* Das Bild einer Station laeuft nicht ueber die volle Textbreite: es ist
   ein Beleg zum Absatz, keine zweite Ebene. */
.tl-shot { margin-top: 1.2rem; max-width: 520px; }

/* Zeitmarke von links, Inhalt von rechts — die Linie in der Mitte ist die
   Achse, aus der beide kommen. Nur `opacity` und `transform`; der Punkt
   dazwischen schaltet ueber Farbe, Schein und seine eigene Animation um. */
.tl-frame.is-live .tl-time,
.tl-frame.is-live .tl-body {
  opacity: 0;
  transition: opacity 380ms var(--tl-ease), transform 380ms var(--tl-ease);
}
.tl-frame.is-live .tl-time { transform: translateX(calc(-1 * var(--tl-slide))); }
.tl-frame.is-live .tl-body { transform: translateX(var(--tl-slide)); }
.tl-frame.is-live .tl-item.is-lit .tl-time,
.tl-frame.is-live .tl-item.is-lit .tl-body {
  opacity: 1;
  transform: none;
}

.day-more { margin-top: clamp(1.9rem, 3vw, 2.8rem); }

@media (max-width: 760px) {
  /* Die Linie rueckt an den Rand, der Punkt wird kleiner, und die
     Zeitmarke steht ueber dem Inhalt statt daneben — bei 390px blieben
     sonst fuer den Text keine 200px. Die Inszenierung bleibt dieselbe, nur
     die Wege sind kuerzer: 56px waeren hier fast ein Drittel der
     Bildbreite und laesen als Herumfliegen, nicht als Hereinkommen. */
  .tl-frame { --tl-pad: 1.9rem; --tl-x: 3px; --tl-dot: 9px; --tl-slide: 26px; }
  .tl-item {
    grid-template-columns: 1fr;
    gap: .4rem 0;
    padding-bottom: 1.7rem;
  }
  .tl-time { padding-top: 0; font-size: .6875rem; }
  .tl-body h3 { font-size: 1.15rem; }
  .tl-body p { font-size: .9688rem; }
  .day-shot { margin-top: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  /* Der globale Block in Abschnitt 23 zieht Animationen auf .001ms
     zusammen — der Punkt stuende danach auf seinem Startwert, also auf
     `scale(.45)`. Deshalb hier ausdruecklich: keine Animation, volle
     Groesse, kein Blitz. */
  .tl-dot { animation: none !important; transform: none !important; }
  .tl-dot::after { animation: none !important; opacity: 0 !important; }
}


/* ══ 14 · Preis-Panel (einzeilig) ═════════════════════════════════════════ */

/* Das Preis-Panel schloss optisch an die sechs Leistungskacheln darüber an
   und ging in der Reihe unter. Es traegt jetzt den Blauverlauf als Rand, eine
   leichte blaue Waschung in der Flaeche, mehr Innenabstand und eine groessere
   Zahl — es ist der Abschluss des Abschnitts, keine siebte Kachel. */
.price-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 2.2rem;
  padding: clamp(2.2rem, 4vw, 3.2rem);
  border: 1px solid transparent;
  border-radius: var(--r-hero);
  /* Erste Ebene fuellt die Flaeche (padding-box), zweite faerbt den Rand
     (border-box) — so bekommt der Rahmen den Markenverlauf. */
  background-image:
    linear-gradient(120deg, rgba(46, 144, 250, .10), rgba(99, 91, 255, .07) 60%, rgba(10, 10, 16, 0)),
    linear-gradient(var(--surface-raised), var(--surface-raised)),
    var(--grad-brand);
  background-origin: border-box;
  background-clip: padding-box, padding-box, border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08),
              var(--glow-3),
              0 34px 66px -34px #000;
}
.p-amount { font-family: var(--font-mono); font-size: clamp(2.3rem, 4vw, 2.9rem); font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--text); }
.p-amount span { font-family: var(--font-sans); font-size: .95rem; font-weight: 500; color: var(--text-2); margin-left: .45rem; letter-spacing: 0; }
.p-sub { margin-top: .8rem; font-size: .875rem; color: var(--text-2); max-width: none; }

/* Das Waehrungszeichen laeuft nicht im Monospace mit: dort hat jedes Glyph
   dieselbe Laufweite, auch das Leerzeichen — "99 €" riss dadurch sichtbar
   auseinander. Als eigenes Element in der Textschrift mit gesetztem Abstand
   sitzt es eng an der Zahl. */
.p-amount .cur,
.plan-price .cur {
  font-family: var(--font-sans);
  /* font-size muss explizit stehen: `.p-amount span` trifft dieses Element
     ebenfalls und wuerde ihm sonst die Groesse des „/ Monat"-Zusatzes geben.
     .68em haelt das Zeichen eine Spur unter der Zahl — die Zahl bleibt der
     Blickfang, das Zeichen nur ihre Einheit. */
  font-size: .68em;
  font-weight: 600;
  margin-left: .14em;
  letter-spacing: 0;
}



/* ══ 15 · Stufen-Karten ═══════════════════════════════════════════════════ */

/* Der Abschnitt bekommt eine eigene, sehr leise Lichtquelle. Ohne sie steht
   das Kartenraster auf demselben Grund wie alles andere und der ganze Block
   verschwindet zwischen Foto-Band und Portrait. */
#zusammenarbeit {
  background-image:
    radial-gradient(58% 42% at 50% 0%, rgba(17, 42, 82, .55), transparent 70%);
}

.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: stretch; }

/* Die Karten liegen eine Stufe heller als die uebrigen Panels und haben eine
   deutlichere Kante — sie sind das Angebot der Seite, nicht Beiwerk. */
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2.2rem 1.9rem 2rem;
  background-color: var(--surface-raised);
  border-color: rgba(255, 255, 255, .11);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07),
              var(--glow-1),
              0 34px 66px -34px #000;
}

/* Die empfohlene Karte traegt den Markenverlauf als Rand statt einer
   Randfarbe: erste Ebene fuellt die Flaeche (padding-box), zweite faerbt den
   Rand (border-box). Dazu ein deutlich weiteres Streulicht. */
.plan.featured {
  border: 1px solid transparent;
  background-image:
    linear-gradient(160deg, rgba(46, 144, 250, .09), rgba(99, 91, 255, .05) 55%, rgba(10, 10, 16, 0)),
    linear-gradient(var(--surface-raised), var(--surface-raised)),
    var(--grad-brand);
  background-origin: border-box;
  background-clip: padding-box, padding-box, border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09),
              var(--glow-3),
              0 40px 72px -32px #000;
}
.plan-badge {
  position: absolute; top: -11px; left: 1.8rem;
  padding: .3rem .8rem;
  border-radius: var(--pill);
  background-image: var(--grad-brand);
  box-shadow: var(--shadow-accent);
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--on-accent);
}
.plan-tag {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--text-3);
}
.plan h3 { margin-top: .8rem; }
.plan-price { margin-top: 1.1rem; font-family: var(--font-mono); font-size: 1.9rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--text); }
.plan-price span { font-family: var(--font-sans); font-size: .85rem; font-weight: 500; color: var(--text-2); margin-left: .35rem; letter-spacing: 0; }
.plan-price.soft { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--text-2); }
.plan-sub { margin-top: .6rem; font-size: .8125rem; color: var(--text-3); max-width: none; }
.plan-divider { height: 1px; margin: 1.5rem 0; background: linear-gradient(90deg, var(--line-2), transparent); }
.plan-list { display: flex; flex-direction: column; gap: .7rem; }
.plan-list li { position: relative; padding-left: 1.7rem; font-size: .875rem; line-height: 1.5; color: var(--text-2); }
.plan-list svg { position: absolute; left: 0; top: .18rem; width: 16px; height: 16px; fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.plan-req { margin-top: 1.1rem; font-size: .8125rem; color: var(--text-3); max-width: none; }
.plan-req b { color: var(--text-2); font-weight: 600; }
.plan-cta { margin-top: auto; padding-top: 1.8rem; display: flex; flex-direction: column; align-items: flex-start; gap: .8rem; }
.plan-cta .btn { width: 100%; justify-content: center; }
.plan-alt { font-size: .8125rem; font-weight: 500; color: var(--text-2); transition: color var(--t) var(--ease); }
.plan-alt:hover { color: var(--accent); }
.plan-alt .arrow { display: inline-block; transition: transform var(--t) var(--ease); }
.plan-alt:hover .arrow { transform: translateX(3px); }

/* Die Positionsanzeige unter der Spur. Auf Tablet und Desktop gibt es nichts
   anzuzeigen — dort liegen alle drei Karten ohnehin nebeneinander; deshalb
   ist sie dort ausgeblendet und nicht nur unscheinbar.

   Der Knopf ist 30px gross, der Punkt darin 7px: angetippt wird die
   Trefferflaeche, gesehen der Punkt. Der aktive Punkt wird nicht heller,
   sondern laenger — eine Pille im Markenverlauf. Das liest man auch mit dem
   Daumen davor noch. */
.plan-dots {
  display: none;
  justify-content: center;
  gap: .4rem;
  margin-top: 1.4rem;
}
.plan-dot {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  padding: 0; border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.plan-dot::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: var(--pill);
  background-color: var(--text-3);
  opacity: .55;
  transition: width var(--t) var(--ease),
              opacity var(--t) var(--ease),
              background-color var(--t) var(--ease);
}
.plan-dot[aria-current="true"]::before {
  width: 22px;
  background-color: transparent;
  background-image: var(--grad-brand);
  opacity: 1;
  box-shadow: var(--shadow-accent);
}

/* --- Mobile: die drei Stufen als Wisch-Karussell -------------------------
   Bis 767px stehen die Karten nicht mehr untereinander, sondern in einer
   waagerechten Spur mit Scroll-Snap. Drei volle Preiskarten gestapelt sind
   auf dem Handy eine sehr lange Strecke — gewischt liegt das Angebot in
   einer Handbewegung nebeneinander.

   Kein Skript im Wisch: das ist natives Scrollen, damit es auf iOS am Finger
   klebt, den Schwung behaelt und am Ende gummibandet. becro-dark.js beruehrt
   nur die Punkte darunter.

   `scroll-snap-align: start`, nicht `center`: die naechste Karte soll RECHTS
   anlugen. Zentriert kostet jedes Prozent Vorschau rechts dasselbe links —
   bei 13% Vorschau blieben der Karte selbst noch ~66% Breite, dann fuellt
   sie die Flaeche nicht mehr. Mit `start` sitzt die aktive Karte buendig
   unter der Ueberschrift und nur rechts zeigt sich die naechste.

   Die Spur laeuft ueber negative Aussenabstaende bis an die Bildkante
   (`--pad-x` heraus, als Innenabstand wieder herein) — sonst begaenne das
   Wischen erst 20px innen. Waagerecht scrollt dabei die Spur, nicht die
   Seite: `.plan-grid` ist der einzige Rahmen mit `overflow-x`.

   Die Innenabstaende oben und unten sind kein Weissraum, sondern Platz fuer
   das, was aus einer Karte herausragt und ein Scroll-Rahmen sonst abschneidet:
   die Pille „Einstieg" sitzt auf -11px, der Schatten liegt unter der Karte,
   und das Reveal schiebt sie beim Erscheinen 20px nach unten. Die gleich
   grossen negativen Aussenabstaende nehmen den Platz optisch wieder zurueck,
   damit die Sektion nicht auseinanderfaellt. */
@media (max-width: 767px) {
  .plan-grid {
    --rail-peek: 13vw;      /* so viel der naechsten Karte steht rechts */
    --rail-gap:  .85rem;

    display: flex;
    max-width: none;
    gap: var(--rail-gap);

    margin-inline: calc(var(--pad-x) * -1);
    padding-inline: var(--pad-x);
    padding-block: 18px 30px;
    margin-block: -18px -30px;

    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: var(--pad-x);
    -webkit-overflow-scrolling: touch;

    /* Die Bildlaufleiste ist hier Stoerung, nicht Auskunft — dafuer stehen
       die Punkte darunter. */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .plan-grid::-webkit-scrollbar { display: none; }

  .plan-grid > .plan {
    /* Bildbreite minus linkem Rand minus Vorschau minus Abstand. */
    flex: 0 0 calc(100vw - var(--pad-x) - var(--rail-peek) - var(--rail-gap));
    scroll-snap-align: start;
    scroll-snap-stop: always;   /* pro Wisch genau eine Karte, nie zwei */
  }
  /* Gleiche Hoehe fuer alle drei kommt vom Flex-Rahmen selbst: `align-items:
     stretch` steht schon an `.plan-grid` und streckt jede Karte auf die
     hoechste der drei. */

  .plan-dots { display: flex; }
}


/* ══ 16 · Beleg (Trustpilot) ══════════════════════════════════════════════ */

.rating {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  margin-top: 2rem;
  padding: .7rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  background-color: var(--surface);
  transition: border-color var(--t) var(--ease);
}
.rating:hover { border-color: var(--accent-line); }
.stars { display: inline-flex; gap: 2px; }
.stars svg, .t-mini-stars svg { width: 16px; height: 16px; fill: var(--positive); }
.r-txt { font-size: .875rem; color: var(--text-2); }
.r-txt b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--positive); }

.t-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.4rem; }

/* Startseite: die Bewertungen stehen in zwei Reihen untereinander. Was die
   Reihen selbst angeht — Spur, Lauf, Kartenbreite, das statische Raster bei
   `prefers-reduced-motion` —, steht vollstaendig in becro-motion.css,
   Abschnitt 4. Hier bleibt nur der Abstand der beiden Reihen zueinander. */
.t-rows { display: grid; gap: 1rem; margin-top: 2.4rem; }

.t-card { display: flex; flex-direction: column; padding: 1.7rem 1.6rem; }
.t-mini-stars { display: flex; gap: 2px; margin-bottom: 1.1rem; }
.t-card .quote { font-size: .9rem; line-height: 1.6; color: var(--text-2); max-width: none; }
.t-meta { margin-top: 1.2rem; font-size: .75rem; color: var(--text-3); max-width: none; }
.verified { color: var(--positive); }


/* ══ 17 · Foto-Band ═══════════════════════════════════════════════════════ */

/* NICHT AENDERN: Band = obere 78 % des Bildes, oben verankert.

   Dies ist die EINZIGE Stelle, an der die Geometrie des Bandes definiert
   wird. Es gibt keine zweite Hoehe und kein Skript, das hier nachtraeglich
   etwas verschiebt — genau daran ist die Hoehe dreimal gescheitert.

   Die Datei ist 1600x800. Gezeigt werden davon die oberen 624 Zeilen
   (78 %); der Kleinstadt-Teppich im Vordergrund faellt weg. Das
   Seitenverhaeltnis des Containers ist deshalb 1600/624 und nicht
   1600/800, und die Bilder sind mit `object-position: center top`
   verankert. Beides zusammen ergibt: der Beschnitt sitzt IMMER unten und
   ist bei jeder Fensterbreite derselbe, Turmspitzen und Himmel stehen
   immer vollstaendig.

   `width: 100%` ist Pflicht, nicht Zierde: sobald `min-height` greift,
   leitet der Browser sonst die BREITE aus dem Verhaeltnis ab statt der
   Hoehe — das Band wurde auf einem 390px-Display 520px breit und schob die
   Seite waagerecht auf.

   Die Mindesthoehe ist nur ein Notnagel gegen einen Haarstreifen auf sehr
   kleinen Geraeten. Sie greift erst unterhalb von 385px Fensterbreite;
   darueber traegt das Verhaeltnis, auch auf dem Handy. */
.band {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1600 / 624;
  min-height: 150px;
  padding: 0;
}

/* --- Zwei Aufnahmen, ein Bildausschnitt -------------------------------
   Unten liegt dieselbe Skyline mit beleuchteten Buerofenstern, darueber die
   dunkle. skyline-band-lit-1600.webp ist pixelgenau derselbe Ausschnitt in
   denselben Massen (1600x800) — `object-fit: cover` beschneidet also beide
   gleich, egal wie breit das Band gerade ist. Wuerden die Ausschnitte
   auseinanderlaufen, saehe man beim Wandern des Lichts einen Versatz.

   Genau das war lange der Fall: die beleuchtete Aufnahme war um 2,5 Prozent
   hineingezoomt (Zentrum bei 653/668), am Bildrand also gut 19 Pixel gegen
   die dunkle verschoben. Das steckte in der DATEI, nicht im Stylesheet — hier
   waren beide Ebenen immer schon gleich. Die Datei ist zurechtgerechnet;
   wer sie ersetzt, muss die Deckung nachmessen.

   Jede Aufnahme steckt in einem eigenen Rahmen, weil die Maske an den
   BANDAUSSCHNITT gehoert und nicht ans Bild. Einen Parallax gibt es hier
   nicht mehr und soll es auch nicht geben: er haette im Scroll-Handler
   Bildgeometrie schreiben muessen, und genau das ruckelt auf dem Handy. Der
   Rahmen steht still, das Bild steht darin still. */
.band-layer { position: absolute; inset: 0; overflow: hidden; }

/* Beide Aufnahmen fuellen den Container vollstaendig und bekommen exakt
   dieselben Werte. Weil der Container das Verhaeltnis der Datei traegt,
   beschneidet `cover` genau die unteren 22 Prozent weg und sonst nichts.
   Kein Transform, kein Parallax: was die Ebenen auseinanderziehen koennte,
   gibt es nicht mehr. */
.band-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Oben verankert — dadurch schneidet `cover` ausschliesslich unten ab.
     Beide Ebenen bekommen denselben Wert, es gibt keinen zweiten. */
  object-position: center top;
}

/* Der Kontrast zwischen den Ebenen macht den Effekt, nicht die Helligkeit:
   unten warm (die Fenster leuchten), oben kuehl und entsaettigt (blaue
   Abenddaemmerung). Ohne das waere es eine Taschenlampe auf einem Foto. */
.band-lit {
  z-index: 0;
  filter: brightness(1.04) saturate(1.28) contrast(1.04) sepia(.12) hue-rotate(-8deg);
}
.band-dark {
  z-index: 1;
  filter: brightness(.78) saturate(.58) contrast(1.06) hue-rotate(6deg);

  --band-x: 50%;
  --band-y: 50%;
  --band-r: 350px;    /* Halo — der grosse, sehr weiche Schein */
  --band-core: 150px; /* Kern — klein und deutlich */

  /* ZWEI Loecher statt eines. `intersect` nimmt von beiden Masken die
     kleinere Deckkraft: wo EINE der beiden durchlaesst, ist die dunkle Ebene
     weg. Der Kern gibt die Stelle, an der die Fenster wirklich brennen, der
     Halo den Abfall drumherum — eine einzelne Maske kann beides nicht, sie
     ist entweder hart oder flau.

     Die Startwerte stehen hier und nicht im Skript, denn sie sind zugleich
     der Ruhezustand: ohne Skript und bei `prefers-reduced-motion` bleibt ein
     stiller Schein in der Bandmitte stehen, ganz ohne Bewegung. */
  -webkit-mask-image:
    radial-gradient(circle var(--band-core) at var(--band-x) var(--band-y),
      rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .30) 55%, #000 100%),
    radial-gradient(circle var(--band-r) at var(--band-x) var(--band-y),
      rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, .70) 44%, rgba(0, 0, 0, .92) 76%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(circle var(--band-core) at var(--band-x) var(--band-y),
      rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .30) 55%, #000 100%),
    radial-gradient(circle var(--band-r) at var(--band-x) var(--band-y),
      rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, .70) 44%, rgba(0, 0, 0, .92) 76%, #000 100%);
  mask-composite: intersect;
}
/* Auf dem Handy ist das Band nur gut 240px hoch: mit 350px Radius leuchtete
   die ganze Flaeche und man saehe nicht mehr, dass sich etwas bewegt. */
@media (max-width: 700px) {
  .band-dark { --band-r: 210px; --band-core: 96px; }
}

/* Der Schleier zieht das Foto in den Grund, die Vignette an Ober- und
   Unterkante laesst das Band in die Seite hineinlaufen statt hart
   anzuschneiden. Sie steht als ERSTE Lage, also ueber allem anderen. */
.band-overlay {
  position: absolute; inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, var(--bg) 0%, rgba(5, 5, 8, 0) 15%, rgba(5, 5, 8, 0) 68%, var(--bg) 100%),
    linear-gradient(180deg, rgba(5, 5, 8, .40), rgba(5, 5, 8, .66)),
    radial-gradient(70% 120% at 20% 10%, rgba(46, 144, 250, .22), transparent 65%);
}
.band-line {
  position: relative;
  z-index: 3;
  /* Weisse Schrift auf einem Foto — und im Lichtkegel stehen darunter helle
     Fassaden. Zwei Schatten: ein enger fuer die Kante, ein weiter als
     Abdunklung. Beide bewusst schwach, sie sollen die Schrift tragen und
     nicht auffallen. */
  text-shadow: 0 1px 2px rgba(5, 5, 8, .62), 0 2px 20px rgba(5, 5, 8, .68);
  display: flex; align-items: center; justify-content: center;
  height: 100%;
  padding-inline: var(--pad-x);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3vw, 2.125rem);
  font-weight: 800;
  letter-spacing: var(--tracking-display);
  color: var(--text);
  text-align: center;
  max-width: none;
  text-wrap: balance;
}
/* Unterhalb von 700px lief die Zeile in den Rand: die Klammer oben faengt bei
   1.25rem an, und 20px mal „Verstaendnis. Klarheit. Performance." sind rund
   310px — auf einem 360er-Display bleiben nach dem Innenabstand nur 320px.
   Hier waechst die Schrift stattdessen mit der Breite (5vw) und trifft bei
   genau 700px wieder auf die 21px der Klammer oben, damit kein Sprung
   entsteht. Ganz unten deckelt 1rem; darunter bricht die Zeile um und bleibt
   damit ebenfalls vollstaendig sichtbar. */
@media (max-width: 700px) {
  .band-line { font-size: clamp(1rem, 5vw, 1.3125rem); }
}


/* ══ 18 · Über ════════════════════════════════════════════════════════════ */

.about-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.about-portrait { overflow: hidden; border-radius: var(--r-hero); border: 1px solid rgba(255, 255, 255, .075); box-shadow: var(--shadow-card); }
.about-portrait img { width: 100%; height: auto; }
.about-body .kicker-rule { margin-bottom: 1.1rem; }
.about-role { display: block; margin-top: .6rem; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--accent); }
.about-body p { margin-top: 1.15rem; font-size: .95rem; }
.about-facts { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.8rem; }
.about-facts span {
  padding: .45rem .95rem;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  background-color: var(--surface);
  font-size: .8125rem;
  color: var(--text-2);
}
.about-facts b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--positive); }


/* ══ 19 · Zugang-Panel ════════════════════════════════════════════════════ */

.access { padding: clamp(2.6rem, 6vw, 4.6rem) clamp(1.8rem, 5vw, 4rem); text-align: center; }
.access .kicker-rule { justify-content: center; margin-bottom: 1.2rem; }
.access .kicker-rule::after { display: none; }
.access h2 { margin-inline: auto; max-width: 18ch; }
.access p { margin: 1.3rem auto 0; max-width: 60ch; }
.access .btn-group { justify-content: center; margin-top: 2.2rem; }
.access .small { margin-top: 1.4rem; }
.access .small a { color: var(--accent); }
.access .small a:hover { text-decoration: underline; }


/* ══ 20 · Fuß ═════════════════════════════════════════════════════════════ */

footer.site {
  border-top: 1px solid var(--line-soft);
  background-color: var(--bg-2);
  padding-block: clamp(3.4rem, 6vw, 5rem) 2rem;
}
.f-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: clamp(2rem, 5vw, 3.5rem); }
.f-brand img { height: 26px; width: auto; margin-bottom: 1.3rem; }
.f-brand p { font-size: .875rem; color: var(--text-3); max-width: 42ch; }
.f-social { display: flex; gap: .6rem; margin-top: 1.5rem; }
.f-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background-color: var(--surface);
  transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease);
}
.f-social svg { width: 15px; height: 15px; fill: var(--text-2); transition: fill var(--t) var(--ease); }
.f-social a:hover { border-color: var(--accent-line); background-color: var(--surface-hover); }
.f-social a:hover svg { fill: var(--text); }

.f-col h2 { margin-bottom: 1.1rem; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--text-3); }
.f-col ul { display: flex; flex-direction: column; gap: .7rem; }
.f-col a { font-size: .875rem; color: var(--text-2); transition: color var(--t) var(--ease); }
.f-col a:hover { color: var(--text); }
/* Als `a.f-col-cta` geschrieben, nicht als `.f-col-cta`: die Regel `.f-col a`
   direkt darüber ist spezifischer als eine einzelne Klasse und hätte dem
   Button sonst das Grau der Fußzeilen-Links gegeben. Gleiches gilt für den
   Hover-Zustand. */
.f-col a.f-col-cta {
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 1.2rem; padding: .65em 1.2em;
  border-radius: var(--pill);
  background-image: var(--grad-brand);
  box-shadow: var(--shadow-accent);
  font-size: .8125rem; font-weight: 600;
  color: var(--on-accent);
}
.f-col a.f-col-cta:hover { color: var(--on-accent); filter: brightness(1.08); }

.f-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(2.6rem, 5vw, 4rem);
  padding-top: 1.8rem;
  border-top: 1px solid var(--line-soft);
}
.f-bottom p { font-size: .8125rem; color: var(--text-3); max-width: none; }
.f-legal { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.f-legal a { font-size: .8125rem; color: var(--text-3); transition: color var(--t) var(--ease); }
.f-legal a:hover { color: var(--text-2); }


/* ══ 20b · Unterseiten ════════════════════════════════════════════════════
   Alles ab hier braucht nur der One-Pager NICHT. Die Regeln stehen trotzdem
   in derselben Datei, damit es weiter genau ein Stylesheet gibt. */

/* --- Kopfbereich einer Unterseite --------------------------------------
   Ruhiger als der Seiten-Hero: kein Markt-Komposit, nur die Ambient-Wolken
   und ein kleinerer Grad. */
.page-hero { position: relative; overflow: hidden; padding-block: clamp(56px, 7vw, 92px) clamp(44px, 5vw, 72px); }
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero .kicker-rule { margin-bottom: 1.4rem; }
.page-hero h1 {
  max-width: 18ch;
  /* Deutsche Komposita sprengen schmale Viewports: „Datenschutzerklärung“
     lief bei 390px 17px über die Spalte hinaus. `hyphens` greift nur, wenn
     das Wort sonst nicht passt — kurze Titel bleiben ungetrennt. */
  overflow-wrap: break-word;
  hyphens: auto;
}
.page-hero .lead { margin-top: 1.5rem; }
.page-hero .btn-group { margin-top: 2.2rem; }

/* --- Termin-Marke unter den Hero-Knöpfen --------------------------------
   Steht direkt unter „Erstgespräch buchen", damit Datum und Handlung im
   selben Blick liegen. Bewusst als Kapsel und nicht als Fließtext-Absatz:
   ein Absatz an dieser Stelle läse sich als Fortsetzung des Leads und ginge
   unter. Der pulsende Punkt ist derselbe wie in der Ankündigungsleiste —
   dieselbe Nachricht, dieselbe Marke.

   `width: fit-content` statt `display: inline-flex`: die Kapsel ist ein
   Blockelement in einer Textspalte, `inline-flex` allein ließe sie zwar
   schrumpfen, aber `p { max-width: 68ch }` aus Abschnitt 3 griffe weiter
   und der Umbruch säße bei langem Text falsch. */
.hero-date {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: fit-content;
  max-width: 100%;
  margin-top: 1.5rem;
  padding: .55rem 1rem;
  border: 1px solid var(--line-2);
  border-radius: var(--pill);
  background-color: var(--surface);
  box-shadow: var(--shadow-sm);
  font-size: .875rem;
  color: var(--text-2);
}
.hero-date strong { color: var(--text); font-weight: 600; }

@media (max-width: 640px) {
  .hero-date { align-items: flex-start; border-radius: var(--r-sm); }
  .hero-date .pulse-dot { margin-top: .38rem; }
}

/* --- Häkchenlisten ------------------------------------------------------ */
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 2.4rem; }
.check-list { display: flex; flex-direction: column; gap: .75rem; }
.check-list li, .check-grid li {
  position: relative;
  padding-left: 1.75rem;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--text-2);
}
.check-list svg, .check-grid svg {
  position: absolute; left: 0; top: .2rem;
  width: 16px; height: 16px;
  fill: none; stroke: var(--accent); stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round;
}

/* --- Split mit Seitenkarte ---------------------------------------------- */
.side-card { padding: 1.9rem 1.7rem; }
.side-card h3 { margin-bottom: 1.2rem; }
.split-note { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--line-soft); font-size: .8125rem; color: var(--text-3); max-width: none; }

/* --- Prinzipien --------------------------------------------------------
   Zehn Kacheln, jede mit ihrer Nummer als Mono-Zahl im Blau. Die Nummer ist
   die Sektionsmarke der Kachel, nicht Dekoration. */
.principles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.principle { padding: 1.7rem 1.6rem; }
.principle .n {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px; font-weight: 700;
  letter-spacing: var(--tracking-kicker);
  color: var(--accent);
}
.principle .en { display: block; margin-top: .9rem; font-size: .78rem; color: var(--text-3); letter-spacing: .01em; }
.principle h3 { margin-top: .3rem; }
.principle p { margin-top: .7rem; font-size: .9rem; max-width: none; }

/* --- Nummerierte Schritte ----------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.pstep { padding: 1.7rem 1.5rem; }
.pstep .n {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 2.2rem; font-weight: 700; line-height: 1;
  letter-spacing: -.04em;
  color: var(--accent);
}
.pstep h3 { margin-top: 1rem; font-size: 1rem; }
.pstep p { margin-top: .55rem; font-size: .875rem; max-width: none; }

/* --- Merkmal-Kacheln (»Ist das richtig für dich?«) ---------------------- */
.trait-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.trait { padding: 1.7rem 1.6rem; }
.trait h3 { margin-bottom: .6rem; }
.trait p { font-size: .9rem; max-width: none; }

/* --- Zitatblock --------------------------------------------------------- */
.quote-box { max-width: 760px; margin-inline: auto; text-align: center; }
.quote-box blockquote {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  line-height: 1.25;
  letter-spacing: var(--tracking-display);
  color: var(--text);
  text-wrap: balance;
}
.quote-box .q-rule { width: 84px; height: 1px; margin: 1.6rem auto 1.2rem; background: linear-gradient(90deg, transparent, var(--accent-line), transparent); }
.quote-box .q-name { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--text-3); max-width: none; }

/* --- FAQ ---------------------------------------------------------------- */
.qa-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.qa-head { position: sticky; top: 104px; }
.faq { border-top: 1px solid var(--line-soft); }
.faq-item { border-bottom: 1px solid var(--line-soft); }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  width: 100%;
  padding: 1.25rem 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 700;
  letter-spacing: var(--tracking-heading);
  color: var(--text);
  transition: color var(--t) var(--ease);
}
.faq-q:hover, .faq-q[aria-expanded="true"] { color: var(--accent); }
.faq-icon { position: relative; flex-shrink: 0; width: 26px; height: 26px; border: 1px solid var(--line-2); border-radius: 50%; transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease); }
.faq-icon::before, .faq-icon::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  background-color: var(--accent); border-radius: 1px;
  transition: transform .35s var(--ease), opacity var(--t) var(--ease), background-color var(--t) var(--ease);
}
.faq-icon::before { width: 11px; height: 1.5px; transform: translate(-50%, -50%); }
.faq-icon::after  { width: 1.5px; height: 11px; transform: translate(-50%, -50%); }
.faq-q[aria-expanded="true"] .faq-icon { background-image: var(--grad-brand); border-color: transparent; }
.faq-q[aria-expanded="true"] .faq-icon::before,
.faq-q[aria-expanded="true"] .faq-icon::after { background-color: var(--on-accent); }
.faq-q[aria-expanded="true"] .faq-icon::after { transform: translate(-50%, -50%) scaleY(0); opacity: 0; }
/* grid-template-rows 0fr -> 1fr animiert eine unbekannte Höhe, ohne dass
   man sie in JS ausmessen muss. */
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.faq-q[aria-expanded="true"] + .faq-a { grid-template-rows: 1fr; }
.faq-a-inner { overflow: hidden; }
.faq-a-inner p { padding-bottom: 1.35rem; font-size: .9rem; max-width: 68ch; }

/* --- Partner (Trading-Psychologie) -------------------------------------- */
.partner-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.partner-portrait { overflow: hidden; border-radius: var(--r-card); border: 1px solid rgba(255, 255, 255, .075); box-shadow: var(--shadow-card); }
.partner-portrait img { width: 100%; height: auto; }
/* 22px reichten hier nicht: das Imagen-Zeichen ist annaehernd quadratisch und
   trägt die Wortmarke unter dem Signet — auf 22px Höhe war beides unleserlich.
   Die Plattform-Logos auf der Startseite sind reine Wortmarken und kommen
   deshalb mit 24px aus. */
.partner-logo { margin-top: 1.6rem; height: 46px; width: auto; filter: brightness(0) invert(1); opacity: .55; }
.partner-role { display: block; margin-top: .6rem; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--accent); }
.partner-body p { margin-top: 1.15rem; font-size: .95rem; }

/* Kontaktzeilen (Ansprechpartner / Telefon / E-Mail) */
.contact-rows { display: flex; flex-direction: column; margin-top: 1.6rem; }
.contact-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; padding: .8rem 0; border-bottom: 1px solid var(--line-soft); }
.contact-row:first-child { border-top: 1px solid var(--line-soft); }
.contact-row dt { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--text-3); }
.contact-row dd { font-size: .9rem; color: var(--text-2); text-align: right; }
.contact-row dd a:hover { color: var(--accent); }

/* --- Merkmal-Pillen ----------------------------------------------------- */
.tag-row { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.6rem; }
.tag {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .95rem;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  background-color: var(--surface);
  font-size: .8125rem;
  color: var(--text-2);
}
.tag .n { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: var(--tracking-kicker); color: var(--accent); }

/* --- Calendly-Einbettung ------------------------------------------------
   Der Widget-Grund ist hell und lässt sich von außen nicht einfärben.
   Deshalb sitzt er in einem eigenen hellen Rahmen mit Radius statt frei auf
   dem dunklen Grund — sonst steht ein weißer Block ohne Kante in der Seite. */
.calendly-panel { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 4vw, 3rem); align-items: center; padding: clamp(1.8rem, 4vw, 2.6rem); }
.calendly-wrap { border-radius: var(--r-sm); overflow: hidden; background-color: #fff; border: 1px solid var(--line-2); }
.calendly-panel h2 { max-width: 16ch; }
.calendly-panel p { margin-top: 1.1rem; }
.calendly-panel .btn-group { margin-top: 1.8rem; }

/* --- Klebrige Handy-Aktionsleiste --------------------------------------
   Auf dem Handy verschwindet der Kopf-CTA, sobald das Menü zu ist und man
   scrollt. Diese Leiste hält den Trial-Weg auf jeder Scrollhöhe erreichbar —
   das ist der Weg, über den Empfehlungs-Traffic aus Discord/Instagram kommt.
   Erst ab Desktop ausgeblendet, wo der Kopf-CTA dauerhaft sichtbar ist. */
.cta-bar { display: none; }

@media (max-width: 990px) {
  .cta-bar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 70;
    display: flex;
    gap: .6rem;
    padding: .7rem var(--pad-x) calc(.7rem + env(safe-area-inset-bottom));
    /* Kein backdrop-filter: die Leiste ist ausschliesslich auf dem Handy
       sichtbar, liegt fest ueber dem scrollenden Inhalt und muesste den Blur
       sonst bei jedem Bild neu rechnen. Deckender Grund statt Glas. */
    background-color: rgba(5, 5, 8, .96);
    border-top: 1px solid var(--line);
  }
  .cta-bar .btn { flex: 1; justify-content: center; }
  /* Bei offenem Menü weg: die Leiste liegt über dem Scrim und zeigte sonst
     denselben blauen Trial-Knopf ein zweites Mal, direkt unter dem im Panel. */
  body.nav-open .cta-bar { display: none; }
  /* Platz, damit die Leiste den Fuß nicht überdeckt — aber nur auf den
     Seiten, die die Leiste überhaupt mitbringen. index.html hat sie nicht
     mehr, dort stand sonst ein leerer Streifen unter dem Fuß. */
  body:has(.cta-bar) footer.site { padding-bottom: 6.5rem; }
}


/* ══ 20c · Rechtsseiten ═══════════════════════════════════════════════════
   Impressum, Datenschutz, AGB, Risikohinweis. Lange Fließtexte, die niemand
   zum Vergnügen liest — sie müssen vor allem ruhig und scanbar sein.

   Drei Entscheidungen tragen den Block:

   1. **Eine schmale Spalte.** Der Grundtext läuft auf 68ch (die p-Regel aus
      der Typografie), die Sektionsköpfe dürfen nicht breiter werden — sonst
      springt das Auge beim Zeilenwechsel. Deshalb bekommt `.legal-body` eine
      feste Maximalbreite statt der vollen `.wrap`.
   2. **Ein Inhaltsverzeichnis nur dort, wo es trägt.** AGB und Datenschutz
      haben elf bzw. mehr Abschnitte; Impressum und Risikohinweis passen auf
      zwei Bildschirme und bekommen keins.
   3. **Trennung über Abstand und eine feine Linie, nicht über `<hr>`.** Die
      alten Seiten setzten zwischen jeden Paragrafen ein `<hr>`; hier trägt
      das `h2` die Linie selbst, damit das Markup nur noch Inhalt enthält. */

.legal { padding-block: clamp(8px, 2vw, 24px) var(--section-v); }

/* Zwei Spalten, Verzeichnis links und klebrig — dieselbe Aufteilung wie die
   FAQ, damit die Seiten nicht auseinanderlaufen. */
.legal-grid {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.legal-toc { position: sticky; top: 104px; padding: 1.5rem 1.4rem; }
.legal-toc h2 {
  font-size: 10.5px;
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 1rem;
}
.legal-toc ol { list-style: none; counter-reset: toc; display: flex; flex-direction: column; gap: .55rem; }
.legal-toc li { counter-increment: toc; }
.legal-toc a {
  display: flex;
  gap: .6rem;
  font-size: .8125rem;
  line-height: 1.35;
  color: var(--text-2);
  transition: color var(--t) var(--ease);
}
.legal-toc a::before {
  content: counter(toc, decimal-leading-zero);
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--accent);
}
.legal-toc a:hover { color: var(--text); }

/* --- Der Fließtext ------------------------------------------------------ */
.legal-body { max-width: 72ch; }

/* Der erste Abschnitt braucht die Trennlinie über sich nicht. */
.legal-body > section + section { margin-top: 2.8rem; padding-top: 2.8rem; border-top: 1px solid var(--line-soft); }

.legal-body h2 { font-size: clamp(1.25rem, 1.7vw, 1.5rem); scroll-margin-top: 110px; }
.legal-body h3 { margin-top: 1.9rem; color: var(--text); }
.legal-body h2 + p, .legal-body h3 + p { margin-top: .9rem; }
.legal-body p { margin-top: 1rem; max-width: none; font-size: .95rem; line-height: 1.72; }
.legal-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.legal-body a:hover { color: var(--text); }
.legal-body strong { color: var(--text); font-weight: 600; }

/* `ul` ist global markerlos (Reset). Für Fließtext braucht es wieder eine
   Marke — ein kurzer blauer Strich, kein Punkt: er wiederholt die Kicker-
   Linie und wirkt in einer Textwüste ruhiger als ein Bullet. */
.legal-body ul { margin-top: 1rem; display: flex; flex-direction: column; gap: .6rem; }
.legal-body li {
  position: relative;
  padding-left: 1.5rem;
  font-size: .95rem;
  line-height: 1.65;
  color: var(--text-2);
}
.legal-body li::before {
  content: "";
  position: absolute; left: 0; top: .72em;
  width: 10px; height: 1px;
  background-color: var(--accent-line);
}

/* --- Hervorgehobener Kasten --------------------------------------------
   Widerrufsbelehrung, Verantwortlicher, Warnhinweis: Stellen, die man beim
   Überfliegen finden muss. */
.legal-note { margin-top: 1.4rem; padding: 1.5rem 1.5rem 1.6rem; }
.legal-note > :first-child { margin-top: 0; }
.legal-note .kicker { display: block; margin-bottom: .9rem; }

/* Anschriften und andere Blöcke, in denen der Zeilenumbruch Bedeutung hat. */
.legal-adr { font-style: normal; line-height: 1.85; }

/* Die Fußnote am Ende jeder Seite: Stand, Hinweis auf die Schwesterseiten. */
.legal-foot { margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid var(--line-soft); }
.legal-foot p { font-size: .8125rem; color: var(--text-3); }

@media (max-width: 900px) {
  /* Ein klebriges Verzeichnis über dem Text hilft niemandem — es wird zur
     normalen Liste am Anfang der Seite. */
  .legal-grid { grid-template-columns: 1fr; }
  .legal-toc { position: static; }
}


/* ══ 21 · Bewegung: Scroll-Reveal und Karten-Hover ════════════════════════
   Beides steht hier zusammen, und zwar aus einem konkreten Grund: eine Karte
   ist gleichzeitig Reveal-Ziel und Hover-Ziel. Stünden die `transition`-
   Deklarationen in zwei Regeln, ersetzte die spätere die frühere komplett —
   je nach Reihenfolge wäre entweder das Einblenden ohne Übergang oder das
   Anheben beim Hover so träge wie das Einblenden.

   Deshalb laufen die beiden Bewegungen über ZWEI VERSCHIEDENE Eigenschaften:
   das Einblenden über `translate`, das Anheben über `transform`. So können
   beide in derselben Transition-Liste stehen, ohne sich zu überschreiben,
   und jede behält ihre eigene Dauer.                                      */

/* --- Scroll-Reveal ------------------------------------------------------
   Startzustand für alles, was becro-dark.js als Reveal-Ziel markiert.
   0,6s, ease-out, 20px von unten. `--reveal-delay` setzt das Skript für den
   Versatz innerhalb einer Kartengruppe. */
/* Die Werte kommen von der Handelstag-Timeline auf der Startseite: ein
   langer Weg und eine Kurve, die den groessten Teil davon ins erste Drittel
   der Zeit legt. Das ist es, was ein Einblenden zu einem Ankommen macht.

   Auf index.html greift davon nichts — dort nimmt becro-motion.css den
   Versatz weg (`html.motion .reveal { translate: none }`) und GSAP macht
   dieselbe Arbeit Bild fuer Bild. Diese Werte gelten also fuer alle
   UEBRIGEN Seiten und fuer index dann, wenn das CDN ausfaellt: in beiden
   Faellen soll dieselbe Handschrift dastehen.

   Bewegt wird `translate`, nicht `transform`. Die beiden sind eigene
   Eigenschaften — so bleibt `transform` frei fuer das Anheben beim Hover,
   und beides kann gleichzeitig laufen, ohne sich zu ueberschreiben. */
.reveal {
  opacity: 0;
  translate: 0 var(--reveal-y, 56px);
  transition:
    opacity var(--reveal-t, 720ms) var(--reveal-ease) var(--reveal-delay, 0ms),
    translate var(--reveal-t, 720ms) var(--reveal-ease) var(--reveal-delay, 0ms),
    scale var(--reveal-t, 720ms) var(--reveal-ease) var(--reveal-delay, 0ms);
}
.reveal.in {
  opacity: 1;
  translate: 0 0;
}

/* --- Karten: Reveal + Hover in einer Liste ------------------------------ */
.stat, .f-card, .t-card, .plan, .principle, .trait, .pstep, .split-point, .lift {
  transition:
    opacity var(--reveal-t, 720ms) var(--reveal-ease) var(--reveal-delay, 0ms),
    translate var(--reveal-t, 720ms) var(--reveal-ease) var(--reveal-delay, 0ms),
    scale var(--reveal-t, 720ms) var(--reveal-ease) var(--reveal-delay, 0ms),
    transform 240ms var(--ease),
    box-shadow 240ms var(--ease),
    border-color 240ms var(--ease);
}

/* Minimal anheben, Rand eine Spur heller, Streulicht etwas weiter. */
.f-card:hover, .t-card:hover, .principle:hover, .trait:hover,
.pstep:hover, .split-point:hover, .lift:hover {
  transform: translateY(-4px);
  border-color: var(--accent-line);
  box-shadow: var(--shadow-card-lift);
}

/* Die Stufen-Karten tragen schon ein kräftigeres Streulicht — ihr Hover darf
   das nicht zurücknehmen, sonst wirkt das Überfahren wie ein Rückschritt. */
.plan:hover {
  transform: translateY(-4px);
  border-color: var(--accent-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09),
              var(--glow-2),
              0 40px 72px -32px #000;
}
/* Die empfohlene Karte behält ihren Verlaufsrand (er sitzt im
   background-image) und bekommt nur mehr Licht. */
.plan.featured:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .11),
              var(--glow-4),
              0 44px 78px -30px #000;
}

/* Kennzahlen-Kacheln heben nicht an: sie sind Anzeige, nicht Angebot. */
.stat:hover { border-color: var(--accent-line); }


/* ══ 22 · Responsive ══════════════════════════════════════════════════════ */

@media (max-width: 1080px) {
  .t-grid       { grid-template-columns: 1fr; }
  .f-grid       { grid-template-columns: 1fr 1fr; }
  .steps        { grid-template-columns: repeat(2, 1fr); }
}

/* Die Stufen-Karten stapeln nur noch im Tablet-Band. Unter 768px werden sie
   zum Wisch-Karussell (Abschnitt 15) — und weil diese Regel hier weiter
   unten in der Datei steht als die des Karussells, wuerde sie ihm sonst
   ihre alte max-width von 520px zurueckgeben und die Spur mitten im Bild
   abschneiden.
   Die Untergrenze ist deshalb keine Kosmetik, sondern der Grund, warum das
   Karussell ueberhaupt die volle Breite bekommt. */
@media (max-width: 1080px) and (min-width: 768px) {
  .plan-grid    { grid-template-columns: 1fr; max-width: 520px; }
}

@media (max-width: 900px) {
  .split      { grid-template-columns: 1fr; gap: 2rem; }
  .about-grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .about-portrait { max-width: 340px; }
  .stats      { grid-template-columns: repeat(2, 1fr); }
  .principles { grid-template-columns: 1fr; }
  .trait-grid { grid-template-columns: 1fr; }
  .check-grid { grid-template-columns: 1fr; }
  .qa-grid    { grid-template-columns: 1fr; gap: 2rem; }
  .qa-head    { position: static; }
  .partner-grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .partner-portrait { max-width: 300px; }
  .calendly-panel { grid-template-columns: 1fr; }
}

/* Der Umschaltpunkt liegt bei 990px, nicht bei 900px wie beim uebrigen
   Raster: die Kopfleiste braucht mit Marke, Pille und drei Knoepfen
   gemessen 972px. Bei 900px lief sie schon vorher um 20px ueber (Logo auf
   0px gequetscht), mit dem Discord-Icon waeren es 71px. Die Raster-Regeln
   oben bleiben bewusst bei 900px — sie haben mit der Leiste nichts zu tun. */
@media (max-width: 990px) {
  /* Die Pillen-Navigation klappt zum Panel unter dem Kopf auf.

     Warum ein deckender Scrim und kein durchscheinendes Glas: die Pille trug
     `--glass` (rgba(10,10,16,.72)) plus backdrop-filter. Auf dem Handy legt
     sie sich damit ueber die Hero-Ueberschrift, und beides war gleichzeitig
     lesbar — aus „Grosse Marktteilnehmer" und „Ansatz/Member+/Ausbildung"
     wurde ein Buchstabensalat. Der Scrim liegt jetzt ueber der ganzen Seite
     (inset: 0, also auch hinter der Kopfleiste) und ist praktisch opak; das
     Panel selbst steht auf `--surface`, ohne jede Transparenz. */
  .hamburger { display: block; }
  .nav-actions .btn { display: none; }

  .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;                 /* unter der Kopfleiste (60), ueber allem sonst */
    background-color: var(--bg);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t) var(--ease);
  }
  body.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }
  /* Die Leiste selbst ist im Ruhezustand halbtransparent — offen muss auch
     ihr Streifen decken, sonst scheint der Seiteninhalt oben durch. */
  body.nav-open header.site {
    background-color: var(--bg);
    border-bottom-color: var(--line);
  }

  .nav-panel {
    display: block;
    position: absolute;
    top: calc(100% + 10px);
    left: 0; right: 0;
    max-height: calc(100vh - 104px);
    max-height: calc(100dvh - 104px);
    overflow-y: auto;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background-color: var(--surface);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity var(--t) var(--ease), transform var(--t) var(--ease),
                visibility var(--t) var(--ease);
  }
  body.nav-open .nav-panel {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  /* Im Panel ist die Pille keine Pille mehr, sondern eine schlichte Liste
     mit Trennlinien — Kapsel, Glas und Schatten wuerden sich mit der
     Panelflaeche darunter doppeln. */
  .nav-pill {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav-pill li + li { border-top: 1px solid var(--line); }
  .nav-pill a {
    border-radius: 0;
    padding: .95rem .4rem;
    font-size: 1rem;
    color: var(--text);
  }
  .nav-pill a:hover { background-color: transparent; }

  .nav-panel-actions {
    display: grid;
    gap: .6rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
  }
  .nav-panel-actions .btn { width: 100%; justify-content: center; }
}

/* Solange das Menue offen ist, darf die Seite dahinter nicht scrollen. Das
   Skript merkt sich die Scrollposition und setzt sie beim Schliessen zurueck
   — `overflow: hidden` allein reicht auf iOS nicht. */
body.nav-open {
  position: fixed;
  left: 0; right: 0;
  width: 100%;
  overflow: hidden;
}

@media (max-width: 900px) {
  /* Auf Schmalviewports ist die Textspalte so breit wie die Fläche — jede
     Struktur darunter wird zur Störung. Das Raster fällt ganz weg, die
     Heatmap wird erst leiser und verschwindet eine Stufe später. */
  .hero-composite { display: none; }
  .hero-bg { --shot-opacity: .07; --shot-width: 80%; }
  .hero-shot-glow { opacity: .6; }
}

@media (max-width: 640px) {
  /* Die Rolle unter dem Namen ist versal und weit gesperrt (.2em); bei 390px
     stand sie auf 2px genau an der Kante, darunter lief sie über. */
  /* Eine Stufe unter der Dämpfung: hier fällt die Heatmap ganz weg. */
  .hero-shot, .hero-shot-glow { display: none; }
  .about-role { letter-spacing: .12em; }
  .stats        { grid-template-columns: 1fr; }
  .f-grid       { grid-template-columns: 1fr; gap: 2.4rem; }
  .price-panel  { flex-direction: column; align-items: flex-start; }
  .price-panel .btn-group { width: 100%; }
  .btn-group .btn { width: 100%; justify-content: center; }
  /* `.btn` steht global auf `white-space: nowrap`. Bei 320px lief die
     CTA-Zeile der empfohlenen Stufe damit 4px aus dem Bild — das war der
     einzige echte Ueberlauf der Seite, nicht die Logo-Marquee (die ist
     von `.logo-marquee` sauber geklippt). Hier darf die Beschriftung
     umbrechen. */
  .plan .btn, .price-panel .btn, .btn-group .btn { white-space: normal; }
  .hero h1 { max-width: none; }
  .f-bottom { flex-direction: column; align-items: flex-start; }
  .steps    { grid-template-columns: 1fr; }
}


/* ══ 22b · Das Licht selbst ═══════════════════════════════════════════════
   Die Leiter oben sagt, WIE hell etwas scheint. Hier steht, WAS scheint.

   Alles laeuft ueber `box-shadow`, `text-shadow` oder `filter` — keine
   Groesse, keine Position, kein Layout. Der einzige dauerhaft laufende
   Effekt ist das Atmen der Haupt-CTAs, und der bewegt ausschliesslich
   `opacity` eines Pseudoelements: das rechnet der Compositor, ohne die
   Flaeche neu zu zeichnen.
   ────────────────────────────────────────────────────────────────────── */

/* --- 1 · Der Schriftzug im Kopf ----------------------------------------
   Die Marke ist eine SVG-Datei, kein Text — `text-shadow` greift daran
   nicht. `drop-shadow` schon: es folgt der Silhouette der Buchstaben statt
   dem rechteckigen Kasten, und mehrere hintereinander bauen den Schein
   stufenweise auf (jedes Filter arbeitet auf dem Ergebnis des vorigen).
   Zwei Stufen: ein enger weisser Saum, der die Kanten traegt, und ein
   weiter blauer Hof darum. */
.brand img {
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, .22))
          drop-shadow(0 0 9px rgba(var(--glow-rgb), .34));
  transition: filter var(--t) var(--ease);
}

/* --- 2 · Haupt-CTA: Schein und Atmen -----------------------------------
   Der Ruhe-Schein sitzt in einem ::after und nicht im `box-shadow` des
   Knopfes. Das ist der Grund, warum das Atmen nichts kostet: bewegt wird
   nur die Deckkraft dieser einen Ebene, und Deckkraft ist das Einzige, was
   ein Browser ohne Neuzeichnen aendern kann. Ein pulsender `box-shadow`
   direkt am Knopf haette dieselbe Optik und muesste den Knopf samt Umfeld
   in JEDEM Bild neu malen — auf einer Seite mit fuenf Haupt-CTAs waere das
   dauerhafte Arbeit fuer nichts.

   Sechs Sekunden, `alternate`, und ein Hub von .42 auf .74. Das ist
   bewusst so langsam und so knapp, dass man es nicht als Blinken liest,
   sondern hoechstens als „der Knopf lebt".

   ::before gehoert dem Glanz-Sweep aus becro-micro.css — deshalb hier
   ::after. */
.btn-primary { position: relative; }
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: var(--glow-cta);
  animation: becro-breathe 6s ease-in-out infinite alternate;
}
@keyframes becro-breathe {
  from { opacity: .42; }
  to   { opacity: .74; }
}
/* Unter der Hand uebernimmt der hellere Schein des Knopfes selbst
   (`--shadow-accent-lift`). Das Atmen haelt dabei an: zwei Lichtquellen
   auf demselben Knopf waeren eine zu viel, und auf den drei Inhaltsseiten
   liegt beim Ueberfahren ohnehin ein `overflow: hidden` fuer den Sweep
   darauf, das diesen Schein abschneiden wuerde. */
.btn-primary:hover::after {
  opacity: 0;
  animation-play-state: paused;
}

/* --- 3 · Zweitrangige Knoepfe: Schein nur unter der Hand ---------------
   `.btn-ghost` (Member+ werden, Erstgespraech buchen) und `.btn-line`
   (Discord im Kopf, Mitgliederportal) stehen im Ruhezustand bewusst ohne
   Licht da — sonst konkurrieren sie mit dem Haupt-CTA, und genau das
   sollen sie nicht. Erst die Hand holt sie hervor.

   Der Wert ist eine Stufe unter dem CTA-Hover: sie antworten, sie
   uebernehmen nicht. */
@media (hover: hover) and (pointer: fine) {
  .brand:hover img {
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, .38))
            drop-shadow(0 0 13px rgba(var(--glow-rgb), .55));
  }
  .btn-ghost, .btn-line { box-shadow: 0 0 0 0 rgba(var(--glow-rgb), 0); }
  .btn-ghost:hover, .btn-line:hover { box-shadow: var(--glow-cta); }
}

/* --- 5 · Die gruenen Akzente ------------------------------------------
   Die Zahlen (30+, 5,0, die Fakten in der Ueber-Sektion) und das
   „verifiziert" unter den Bewertungen. Hauchfein: der Schein soll die
   Ziffer vom Grund abheben, nicht sie zum Leuchten bringen. Deshalb zwei
   Stufen — die Zahlen tragen etwas mehr als der Kleintext, weil sie
   groesser gesetzt sind und ein gleich starker Schein an ihnen sonst
   verschwaende. */
.pos,
.hero-figures b.pos,
.stat .v.pos,
.r-txt b,
.about-facts b { text-shadow: var(--glow-green); }

.verified,
.stars svg,
.t-mini-stars svg { filter: drop-shadow(var(--glow-green-soft)); }

/* --- 6 · Auf dem Handy eine Nummer kleiner ----------------------------
   Derselbe Schein wirkt auf einem 390px-Schirm deutlich praesenter: die
   Flaechen sind kleiner, der Hof um sie herum bleibt aber gleich gross und
   nimmt damit anteilig mehr Bild ein. Eine Stufe zurueck haelt das
   Verhaeltnis.

   Das Atmen entfaellt hier ganz. Nicht der Optik wegen, sondern weil eine
   dauerhaft laufende Animation auf dem Telefon dauerhaft Arbeit ist — auch
   eine, die nur die Deckkraft bewegt, haelt den Compositor wach. Der
   Ruhe-Schein bleibt als fester Wert stehen. */
@media (max-width: 990px) {
  :root {
    --glow-1: 0 0 48px -12px rgba(var(--glow-rgb), .20);
    --glow-2: 0 0 58px -14px rgba(var(--glow-rgb), .30);
    --glow-3: 0 0 78px -20px rgba(var(--glow-rgb), .40);
    --glow-4: 0 0 92px -22px rgba(var(--glow-rgb), .52);
    --glow-cta: 0 0 24px -6px rgba(var(--glow-rgb), .32);
    --glow-cta-hi: 0 0 36px -6px rgba(var(--glow-rgb), .52);
    /* Auch das Gruen eine Spur zurueck — dieselbe Begruendung. */
    --glow-green: 0 0 11px rgba(118, 202, 40, .24);
    --glow-green-soft: 0 0 8px rgba(118, 202, 40, .16);
  }
  .brand img {
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, .18))
            drop-shadow(0 0 7px rgba(var(--glow-rgb), .26));
  }
  .btn-primary::after { animation: none; opacity: .55; }
}


/* ══ 23 · Bewegung aus ════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    /* Ohne das bliebe der Stagger-Versatz stehen: die Kacheln erschienen
       zwar ohne Bewegung, aber weiterhin nacheinander. */
    transition-delay: 0ms !important;
  }
  /* Inhalte sofort sichtbar, unabhängig davon, ob das Skript lief. */
  .reveal { opacity: 1; translate: none; scale: none; rotate: none; transform: none; }
  /* Der Schein der Haupt-CTAs steht still — aber er steht. Die Regel oben
     wuerde die Animation auf .001ms zusammenziehen und damit auf ihrem
     Startwert einfrieren; hier bekommt er ausdruecklich seinen Ruhewert,
     damit der Knopf nicht dunkler dasteht als gedacht. */
  .btn-primary::after { animation: none !important; opacity: .58; }
}