/* ==========================================================================
   FinLap — Design-Fundament
   Tokens · Reset · Typografie · Layout · wiederverwendbare Komponenten.

   Verwandt zur Exit-Like-A-Pro-Landingpage (dark, Inter, Glass-Frames,
   Featured-Icons, grüner CTA-Verlauf), aber eigenständig:
     · kälterer, tieferer Grund (#07080b statt #0c0e12)
     · Signalblau statt Lila als Marke
     · Chart-Raster ("Graticule") als visuelle Signatur
     · Tabellenziffern für jede Zahl
   Grün ist AUSSCHLIESSLICH CTA und positives Signal, Rot ausschließlich
   Problem und Short. Kein dritter Akzent.

   Kein Build-Step (Repo-Konvention): handgeschriebenes CSS, direkt verlinkt.
   ========================================================================== */

/* --- Font ---------------------------------------------------------------- */
/* Zwei Stufen derselben Familie:
     1. die vollständige Datei (343 KB) als Auffangnetz für alles,
     2. ein auf Latin beschnittenes Subset (65 KB) für alles, was diese Seite
        tatsächlich benutzt.
   Bei gleicher Familie gewinnt die ZULETZT deklarierte Regel — deshalb steht
   das Subset unten. Ergebnis: im Normalfall lädt der Browser nur die 65 KB;
   taucht in künftiger Copy ein Zeichen ausserhalb des Subsets auf (etwa ein
   Pfeil oder ein kyrillischer Name), holt er automatisch die volle Datei
   nach, statt still auf eine Ersatzschrift zu fallen.

   Neu erzeugen (Zeichenumfang prüfen!):
     pyftsubset InterVariable.woff2 --output-file=InterVariable-latin.woff2 \
       --flavor=woff2 --unicodes="<Bereich unten>" \
       --layout-features="kern,liga,calt,tnum,ccmp,locl,mark,mkmk" \
       --no-hinting --desubroutinize
*/
@font-face {
  font-family: 'InterVariable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/InterVariable.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'InterVariable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/InterVariable-latin.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Tokens -------------------------------------------------------------- */
:root {
  /* Flächen */
  --bg:          #07080b;
  --bg-1:        #0b0d12;
  --bg-2:        #111520;
  --bg-3:        #171c28;
  --line:        rgba(255, 255, 255, .075);
  --line-2:      rgba(255, 255, 255, .13);

  /* Text */
  --txt:         #f5f7fa;
  --txt-2:       #c2c8d6;
  --txt-3:       #8a92a4;
  --txt-4:       #626a7c;

  /* Marke */
  --brand:       #5b8cff;
  --brand-deep:  #2e5bd8;
  --brand-glow:  #38bdf8;
  --brand-txt:   #a9c4ff;
  --brand-soft:  rgba(91, 140, 255, .13);

  /* Signal */
  --ok:          #35c977;
  --ok-soft:     rgba(53, 201, 119, .13);
  --danger:      #f26d78;
  --danger-soft: rgba(242, 109, 120, .11);
  --warn:        #f5b544;

  /* CTA — der einzige grüne Verlauf auf der Seite */
  --cta-from:    #14874f;
  --cta-to:      #35c977;

  /* Radien */
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-2xl: 24px;
  --r-full: 999px;

  /* Abstände */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-7: 32px;  --s-8: 40px;
  --s-9: 48px;  --s-10: 64px; --s-11: 80px; --s-12: 104px;

  /* Layout */
  --container: 1180px;
  --gutter: 20px;
  --section-y: 76px;
  --nav-h: 64px;

  /* Schatten */
  --sh-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-md: 0 8px 24px -8px rgba(0, 0, 0, .6);
  --sh-lg: 0 32px 64px -24px rgba(0, 0, 0, .8);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, .07);

  /* Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

@media (min-width: 768px) {
  :root { --gutter: 32px; --section-y: 104px; }
}
@media (min-width: 1024px) {
  :root { --section-y: 128px; --nav-h: 72px; }
}

/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font-family: 'InterVariable', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Jede Zahl auf dieser Seite ist ein Argument — Ziffern dürfen nicht springen. */
  font-variant-numeric: tabular-nums;
  /* Schutz gegen horizontales Scrollen durch dekorative Glow-Layer. */
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0; font-weight: 620; line-height: 1.15; letter-spacing: -.022em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: rgba(91, 140, 255, .3); color: #fff; }

/* Sichtbar nur für Screenreader, bis fokussiert (Skip-Link). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link:focus {
  position: fixed; top: 12px; left: 12px; z-index: 200;
  width: auto; height: auto; clip: auto; margin: 0;
  padding: 10px 16px; background: var(--bg-2); border: 1px solid var(--line-2);
  border-radius: var(--r-md);
}

/* --- Typografie-Skala ---------------------------------------------------- */
/* clamp() statt der zwei Breakpoint-Sprünge der Referenz: auf einem 820px
   breiten Tablet sitzt die Referenz-Headline sonst zwischen den Stühlen. */
.t-display {
  font-size: clamp(2.25rem, 1.1rem + 4.2vw, 3.9rem);
  line-height: 1.06;
  letter-spacing: -.035em;
  font-weight: 640;
  /* Verhindert Hurenkinder in der Headline, ohne harte <br> zu erzwingen. */
  text-wrap: balance;
}
.t-h2 {
  font-size: clamp(1.75rem, 1.15rem + 2.4vw, 2.85rem);
  line-height: 1.12;
  letter-spacing: -.03em;
  font-weight: 640;
  text-wrap: balance;
}
.t-h3 {
  font-size: clamp(1.15rem, 1.02rem + .55vw, 1.45rem);
  line-height: 1.3;
  letter-spacing: -.02em;
  font-weight: 620;
}
.t-lead {
  font-size: clamp(1.06rem, 1rem + .38vw, 1.28rem);
  line-height: 1.6;
  color: var(--txt-2);
  letter-spacing: -.008em;
}
.t-body { color: var(--txt-2); }
.t-sm { font-size: .875rem; line-height: 1.55; }
.t-xs { font-size: .8125rem; line-height: 1.5; }
.t-muted { color: var(--txt-3); }
.t-quiet { color: var(--txt-4); }
.t-strong { color: var(--txt); font-weight: 600; }

.eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 640;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand-txt);
}

/* --- Layout -------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(760px + var(--gutter) * 2); }
.container--mid { max-width: calc(940px + var(--gutter) * 2); }

/* overflow:hidden ist hier kein Detail: die dekorativen .glow-Layer ragen
   bewusst über den Sektionsrand hinaus und würden sonst die Seite horizontal
   scrollbar machen (body{overflow-x:hidden} allein reicht nicht — das
   Wurzelelement scrollt weiter). */
.section { padding-block: var(--section-y); position: relative; overflow: hidden; }
.section--tight { padding-block: calc(var(--section-y) * .62); }
.section--flush-top { padding-top: 0; }
.section--raised { background: var(--bg-1); }
.section--edge-top { border-top: 1px solid var(--line); }

.stack { display: flex; flex-direction: column; gap: var(--stack, var(--s-4)); }
.center { text-align: center; }

.head {
  display: flex; flex-direction: column; gap: var(--s-4);
  max-width: 720px;
}
.head--center { margin-inline: auto; text-align: center; align-items: center; }

.grid { display: grid; gap: var(--s-5); }
@media (min-width: 720px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
  .grid--2 { gap: var(--s-7); }
}

/* Zwei-Spalten-Split, der auf Mobil stapelt. `min-width:0` verhindert, dass
   ein breites Kind (Screenshot, Tabelle) die Spalte aufbläst. */
.split { display: grid; gap: var(--s-8); align-items: center; }
.split > * { min-width: 0; }
@media (min-width: 1000px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-10); }
  .split--reverse > :first-child { order: 2; }
}

/* --- Graticule: die visuelle Signatur ------------------------------------ */
/* Feines Chart-Raster, das nach unten ausblendet. Rein dekorativ, deshalb
   aria-hidden am Element und pointer-events:none hier. */
.graticule {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .028) 1px, transparent 1px);
  background-size: 64px 64px;
  /* Ellipse mittig statt am oberen Rand: sonst schneidet die Sektionskante das
     Raster hart ab und es liest sich als Fehler statt als Textur. */
  -webkit-mask-image: radial-gradient(ellipse 82% 68% at 50% 42%, #000 0%, transparent 72%);
          mask-image: radial-gradient(ellipse 82% 68% at 50% 42%, #000 0%, transparent 72%);
}

/* Farbiger Lichtkegel hinter einer Sektion. */
.glow {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .55;
}
.glow--brand { background: radial-gradient(circle, rgba(91, 140, 255, .5), transparent 70%); }
.glow--cyan  { background: radial-gradient(circle, rgba(56, 189, 248, .34), transparent 70%); }
.glow--red   { background: radial-gradient(circle, rgba(242, 109, 120, .3), transparent 70%); }
.glow--green { background: radial-gradient(circle, rgba(53, 201, 119, .3), transparent 70%); }

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 13px 22px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-weight: 620;
  font-size: .975rem;
  letter-spacing: -.01em;
  cursor: pointer;
  text-align: center;
  transition: filter .16s ease, transform .16s ease, background-color .16s ease,
              border-color .16s ease;
  /* 44px Mindesthöhe für Touch. */
  min-height: 46px;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: linear-gradient(to top, var(--cta-from), var(--cta-to));
  border-color: rgba(255, 255, 255, .16);
  color: #04170d;
  box-shadow: var(--sh-inset), 0 6px 20px -8px rgba(53, 201, 119, .6);
}
.btn--secondary {
  background: rgba(255, 255, 255, .04);
  border-color: var(--line-2);
  color: var(--txt);
}
.btn--secondary:hover { background: rgba(255, 255, 255, .07); }
.btn--brand {
  background: var(--brand);
  border-color: rgba(255, 255, 255, .18);
  color: #fff;
  box-shadow: var(--sh-inset);
}
.btn--ghost { background: transparent; color: var(--txt-2); padding-inline: 12px; }
.btn--ghost:hover { color: var(--txt); }
.btn--lg { padding: 16px 30px; font-size: 1.03rem; min-height: 54px; }
.btn--block { width: 100%; }

/* CTA + Entwarnungszeile als eine Einheit. */
.cta-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
}
.cta-stack--start { align-items: flex-start; }
.cta-note {
  font-size: .82rem;
  color: var(--txt-3);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  justify-content: center;
}
.cta-stack--start .cta-note { justify-content: flex-start; }
.cta-note span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.cta-note svg { flex: none; color: var(--ok); }
/* Für Angemeldete steht unter dem CTA ein ganzer Satz statt der drei Häkchen.
   Deshalb block statt flex: die nowrap-Regel oben würde ihn aus der Seite
   schieben. */
.cta-note--status { display: block; text-align: center; max-width: 48ch; }
.cta-stack--start .cta-note--status { text-align: left; }
.cta-note--status a { color: var(--txt-2); text-decoration: underline; text-underline-offset: 3px; }
.cta-note--status a:hover { color: var(--txt); }

/* --- Pills / Badges ------------------------------------------------------ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 13px 6px 11px;
  border-radius: var(--r-full);
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, .035);
  font-size: .8rem;
  font-weight: 500;
  color: var(--txt-2);
}
.pill__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(53, 201, 119, .18);
  flex: none;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  background: var(--brand-soft);
  border: 1px solid rgba(91, 140, 255, .22);
  color: var(--brand-txt);
  font-size: .78rem;
  font-weight: 560;
  white-space: nowrap;
}
.tag--neutral {
  background: rgba(255, 255, 255, .04);
  border-color: var(--line-2);
  color: var(--txt-2);
}

/* --- Cards --------------------------------------------------------------- */
.card {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.card--quiet { background: rgba(255, 255, 255, .018); }
.card--pad-lg { padding: var(--s-7); }

/* Featured Icon — 44px, skeuomorpher Inset wie in der Referenz, aber in den
   FinLap-Rollenfarben. */
.ficon {
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  flex: none;
  box-shadow: var(--sh-inset), var(--sh-sm);
}
.ficon svg { width: 21px; height: 21px; }
.ficon--brand  { background: var(--brand-soft); border: 1px solid rgba(91,140,255,.3);  color: var(--brand-txt); }
.ficon--danger { background: var(--danger-soft); border: 1px solid rgba(242,109,120,.32); color: var(--danger); }
.ficon--ok     { background: var(--ok-soft);     border: 1px solid rgba(53,201,119,.32);  color: var(--ok); }

/* --- Glass-Frame um Produkt-Screenshots ---------------------------------- */
.shot {
  position: relative;
  border-radius: var(--r-2xl);
  padding: 6px;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: var(--sh-lg);
}
.shot > img {
  display: block;
  width: 100%;
  border-radius: 18px;
  border: 1px solid rgba(0, 0, 0, .5);
}
.shot__glow {
  position: absolute;
  inset: -14% -6% -10%;
  z-index: -1;
  border-radius: 50%;
  background: linear-gradient(237deg,
      rgba(91, 140, 255, .28) 5%,
      rgba(56, 189, 248, .22) 45%,
      rgba(255, 255, 255, .12) 55%,
      rgba(53, 201, 119, .16) 100%);
  filter: blur(46px);
  pointer-events: none;
}
.shot--flat { padding: 4px; border-radius: var(--r-xl); }
.shot--flat > img { border-radius: 14px; }

/* Auf dem Telefon ist ein 1400px breiter UI-Screenshot bei 350px Anzeigebreite
   nur noch Textur — man erkennt nichts mehr, und genau das Erkennen ist hier
   das Argument. Statt zusätzlicher Assets wird derselbe Screenshot per
   object-fit auf den aussagekräftigen Ausschnitt beschnitten; die Quelle ist
   breit genug, dass der Ausschnitt dabei immer noch herunterskaliert wird.
   aspect-ratio hält die Layoutreservierung deterministisch (kein CLS). */
@media (max-width: 700px) {
  .shot--zoom > img {
    aspect-ratio: var(--zoom-ar, 4 / 5);
    object-fit: cover;
    object-position: var(--zoom-pos, left top);
  }
}

/* --- Reveal-Animation ---------------------------------------------------- */
/* Wird per IntersectionObserver mit .is-in versehen. Ohne JS (oder wenn der
   Beobachter nie feuert) bleibt der Inhalt sichtbar — deshalb setzt erst das
   JS die Klasse .reveal-armed auf <html>, die den Startzustand aktiviert. */
.reveal-armed .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal-armed .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal-armed .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}