@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=5.
   ========================================================================== */


/* ══ 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);

  /* ---- 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),
                       0 0 52px -20px rgba(46, 144, 250, .22),
                       0 30px 60px -34px #000;
  --shadow-card-lift:  inset 0 1px 0 rgba(255, 255, 255, .055),
                       0 0 48px -16px rgba(46, 144, 250, .26),
                       0 34px 66px -34px #000;
  --shadow-accent:     0 16px 34px -16px var(--glow);
  --shadow-accent-lift:0 20px 38px -18px var(--glow);
  --shadow-nav:        0 12px 28px -14px var(--glow);

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

  /* ---- 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),
              0 0 64px -24px rgba(46, 144, 250, .26),
              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; }


/* ══ 7 · Ankündigungsleiste ═══════════════════════════════════════════════ */

.announce {
  background-image: var(--grad-brand);
  text-align: center;
}
.announce a {
  display: block;
  padding: .6rem var(--pad-x);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--on-accent);
}
.announce .arrow { display: inline-block; transition: transform var(--t) var(--ease); }
.announce a:hover .arrow { transform: translateX(3px); }


/* ══ 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);
}

.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; }

.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; }


/* ══ 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%);
}

/* Markt-Komposit: Heat-Raster, Volumenprofil an der rechten Kante,
   leuchtender Preispfad. Der Hero bleibt textgeführt.

   Die Deckkraft ist bewusst niedrig: bei .55 lief der Preispfad als klare
   Linie quer durch Buttons und Vorspann statt hinter ihnen zu liegen. Auf
   Schmalviewports fällt das Komposit ganz weg — dort ist die Textspalte so
   breit wie die Fläche, jede Linie darunter wird zur Störung. */
.hero-composite { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .34; }
.cmp-heat    { opacity: .10; }
.cmp-profile rect { fill: var(--accent); opacity: .16; }
.cmp-fill    { fill: url(#hg); opacity: .14; }
.cmp-path    { fill: none; stroke: var(--accent); stroke-width: 2; filter: drop-shadow(0 0 10px var(--glow)); }
.spark       { fill: var(--on-accent); filter: drop-shadow(0 0 8px var(--accent)); }

.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);
}

.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; }
.hero-meta { margin-top: 1.6rem; font-size: .8125rem; color: var(--text-3); }


/* ══ 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); }


/* ══ 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; }

/* --- 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 ═══════════════════════════════════════════════ */

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.f-card { padding: 1.75rem 1.6rem 1.8rem; }
.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; }


/* ══ 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),
              0 0 90px -24px rgba(46, 144, 250, .48),
              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),
              0 0 64px -22px rgba(46, 144, 250, .26),
              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),
              0 0 110px -22px rgba(46, 144, 250, .55),
              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); }


/* ══ 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; }
.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 ═══════════════════════════════════════════════════════ */

.band { position: relative; overflow: hidden; height: clamp(240px, 30vw, 360px); padding: 0; }
.band-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Das Foto wird in den Grund gezogen: fast schwarz, ein blauer Hauch darauf. */
.band-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 5, 8, .82), rgba(5, 5, 8, .94)),
    radial-gradient(70% 120% at 20% 10%, rgba(46, 144, 250, .22), transparent 65%);
}
.band-line {
  position: relative;
  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;
}


/* ══ 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; }
.page-hero .lead { margin-top: 1.5rem; }
.page-hero .btn-group { margin-top: 2.2rem; }

/* --- 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: 900px) {
  .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));
    background-color: rgba(5, 5, 8, .88);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-top: 1px solid var(--line);
  }
  .cta-bar .btn { flex: 1; justify-content: center; }
  /* Platz, damit die Leiste den Fuß nicht überdeckt. */
  footer.site { padding-bottom: 6.5rem; }
}


/* ══ 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. */
.reveal {
  opacity: 0;
  translate: 0 20px;
  transition:
    opacity 600ms ease-out var(--reveal-delay, 0ms),
    translate 600ms ease-out 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 600ms ease-out var(--reveal-delay, 0ms),
    translate 600ms ease-out 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),
              0 0 80px -20px rgba(46, 144, 250, .38),
              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),
              0 0 130px -20px rgba(46, 144, 250, .62),
              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) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .plan-grid    { grid-template-columns: 1fr; max-width: 520px; }
  .t-grid       { grid-template-columns: 1fr; }
  .f-grid       { grid-template-columns: 1fr 1fr; }
  .steps        { grid-template-columns: repeat(2, 1fr); }
}

@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; }

  /* Die Pillen-Navigation klappt zur Vollbreiten-Liste unter dem Kopf auf. */
  .hamburger { display: block; }
  .nav-actions .btn { display: none; }
  .nav-pill {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 10px;
    border-radius: var(--r-card);
  }
  .nav-pill.open { display: flex; }
  .nav-pill a { padding: .8rem 1rem; font-size: .9375rem; }
  .nav-pill .nav-cta { display: flex; justify-content: center; margin-top: 4px; background-image: var(--grad-brand); color: var(--on-accent); font-weight: 600; box-shadow: var(--shadow-nav); }
}

@media (min-width: 901px) {
  /* Beide stehen auf dem Desktop als Buttons rechts im Kopf; in der Pille
     wären sie doppelt. Auf dem Handy ist es umgekehrt — dort liegen sie in
     der aufgeklappten Liste, weil rechts nur der Menüknopf Platz hat. */
  .nav-pill .nav-cta,
  .nav-pill .nav-portal { display: none; }
}

@media (max-width: 900px) {
  /* Siehe Kommentar an .hero-composite. */
  .hero-composite { display: none; }
}

@media (max-width: 640px) {
  .feature-grid { grid-template-columns: 1fr; }
  .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; }
  .hero h1 { max-width: none; }
  .f-bottom { flex-direction: column; align-items: flex-start; }
  .steps    { grid-template-columns: 1fr; }
}


/* ══ 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; transform: none; }
  /* Der wandernde Lichtpunkt im Hero-Chart ist reine Zierde. */
  .spark  { display: none; }
}