/* ============================================================
   RetainLens — marketing site
   Tokens → base → layout → components → sections → responsive
   ============================================================ */

/* ── Schriften, selbst ausgeliefert ───────────────────────── */
/* Vorher kamen Inter und Instrument Serif von fonts.googleapis.com. Damit ging
   die IP jedes Besuchers an Google, was in der Datenschutzerklaerung stehen
   musste und ohne Einwilligung angreifbar ist. Die Dateien liegen jetzt in
   fonts/ und stammen aus derselben Quelle, nur einmal heruntergeladen.
   Inter ist die Variable-Font-Datei: eine Datei traegt 400 bis 700, deshalb
   "font-weight:400 700" und kein Schnitt je Gewicht. Instrument Serif hat
   keine Variable-Fassung und wird nur in 400 verwendet (.quote__line), Kursiv
   nirgends — also eine Datei je Subset.
   latin und latin-ext getrennt wie bei Google: latin deckt Umlaute, §, die
   typografischen Anfuehrungszeichen und die Pfeile ab, latin-ext laedt nur,
   wenn wirklich ein Zeichen daraus vorkommt. */
/* Inter — latin */
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("fonts/inter-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter — latin-ext */
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Instrument Serif — latin */
@font-face{
  font-family:'Instrument Serif'; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/instrument-serif-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Instrument Serif — latin-ext */
@font-face{
  font-family:'Instrument Serif'; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/instrument-serif-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  --ink:#0B0B0F;
  --ink-2:#16171C;
  --ink-3:#22242B;
  --muted:#767D8B;          /* second-line headline grey */
  --text:#4A4F59;
  --text-2:#6A707E;
  --line:#E8E9ED;
  --line-2:#F1F2F5;
  --bg:#FFFFFF;
  --soft:#FAFAFB;
  --soft-2:#F4F5F7;

  --accent:#2A46D8;
  --accent-2:#1F37B8;
  --accent-soft:#EEF1FE;

  --red:#C43A2E;   --red-bg:#FDF1F0;  --red-line:#F5D9D6;
  --amber:#A96A05; --amber-bg:#FDF6E9; --amber-line:#F3E3C4;
  --green:#0F7A59; --green-bg:#EDF6F2; --green-line:#CFE7DD;

  --r-sm:6px; --r:10px; --r-lg:14px; --r-xl:20px;
  --shadow-sm:0 1px 2px rgba(11,11,15,.05), 0 1px 1px rgba(11,11,15,.04);
  --shadow:0 2px 4px rgba(11,11,15,.04), 0 8px 24px rgba(11,11,15,.06);
  --shadow-lg:0 1px 2px rgba(11,11,15,.06), 0 12px 32px rgba(11,11,15,.08), 0 40px 80px rgba(11,11,15,.07);

  --shell:1360px;
  --pad:clamp(20px,4.2vw,64px);
  --nav-h:64px;

  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --serif:"Instrument Serif",Iowan Old Style,Georgia,"Times New Roman",serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px)}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"cv05" 1,"ss03" 1;
  overflow-x:hidden;
}
img,svg{max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit}
h1,h2,h3,h4{margin:0; font-weight:600; letter-spacing:-.028em; line-height:1.1}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}

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

.sr-only,.skip{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip:focus{
  position:fixed; top:10px; left:10px; z-index:200; width:auto; height:auto;
  clip:auto; margin:0; padding:10px 16px; background:var(--ink); color:#fff; border-radius:var(--r);
}

/* ── layout primitives ───────────────────────────────────── */
.shell{
  /* always keep a gutter outside the hairlines, so they stay visible
     on laptop widths instead of sitting flush against the viewport */
  width:min(var(--shell), calc(100% - 48px)); margin:0 auto;
  border-left:1px solid var(--line); border-right:1px solid var(--line);
}
.sec{position:relative; border-bottom:1px solid var(--line)}
/* .sec--bleed: die untere Trennlinie läuft über die volle Fensterbreite
   und schneidet die beiden senkrechten Ränder, statt an ihnen zu enden. */
.sec--bleed{border-bottom:0}
.sec--bleed::after{
  content:""; position:absolute; bottom:-1px; left:calc(50% - 50vw);
  width:100vw; height:1px; background:var(--line); pointer-events:none;
}
.pad{padding-left:var(--pad); padding-right:var(--pad)}
.pad-x{padding-left:var(--pad); padding-right:var(--pad)}
.br-lg{display:none}
@media (min-width:800px){ .br-lg{display:block} }
/* Die Hero-Ueberschrift bricht immer zwischen den beiden Saetzen. Ohne das
   teilten sie sich bei 430, 480 und 780px eine Zeile ("to cancel. Weeks
   before"), weil der Umbruch erst ab 800px galt. */
.hero .h1 br{display:block}

/* ── type ────────────────────────────────────────────────── */
.h1{
  font-size:clamp(2.25rem,6.6vw,5rem); font-weight:600;
  letter-spacing:-.042em; line-height:.99;
}
.h2{
  font-size:clamp(1.9rem,4.1vw,3.05rem); font-weight:600;
  letter-spacing:-.036em; line-height:1.06;
}
.h2--sm{font-size:clamp(1.7rem,3vw,2.3rem)}
.h2--display{letter-spacing:-.04em}
/* Zahlenspannen wie 6–8 oder 30–50: Die Display-Größen sind negativ
   getrackt, dadurch klebt der Gedankenstrich an den Ziffern. Hier lokal
   zurücknehmen und etwas Luft geben. */
.rng{margin:0 .1em; letter-spacing:normal}
.muted{color:var(--muted); font-weight:600}
.lede{
  margin-top:22px; font-size:clamp(1.02rem,1.4vw,1.2rem);
  line-height:1.55; color:var(--text); max-width:34em;
}
.eyebrow{
  font-size:.8rem; letter-spacing:.04em; color:var(--text-2);
}
.microcopy{margin-top:18px; font-size:.82rem; color:var(--text-2)}
.microcopy--left{margin:0; max-width:62ch}

.tagpill{
  display:inline-block; padding:5px 11px; border-radius:999px;
  background:var(--accent-soft); color:var(--accent);
  font-size:.78rem; font-weight:600; letter-spacing:-.005em;
  margin-bottom:22px;
}

/* ── buttons ─────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:42px; padding:0 18px; border-radius:999px; border:1px solid transparent;
  font-size:.92rem; font-weight:500; letter-spacing:-.01em; cursor:pointer;
  transition:background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
  white-space:nowrap;
}
.btn--primary{background:var(--accent); color:#fff; box-shadow:0 1px 2px rgba(42,70,216,.28)}
.btn--primary:hover{background:var(--accent-2)}
.btn--ghost{background:#fff; color:var(--ink); border-color:var(--line); box-shadow:var(--shadow-sm)}
.btn--ghost:hover{border-color:#D3D5DC; background:var(--soft)}
.btn--sm{height:36px; padding:0 15px; font-size:.875rem}
.btn--block{display:flex; width:100%}
.btn:active{transform:translateY(.5px)}

/* ── Hervorhebung mit Unterstreichung ────────────────────────
   Gerade Linie im Farbverlauf, die sich von links aufbaut. Als
   Pseudo-Element statt SVG — bei einer geraden Linie braucht es
   keinen Pfad, und scaleX animiert auf dem Compositor. */
.mark{position:relative; display:inline-block; white-space:nowrap}
.mark::after{
  content:""; position:absolute; left:0; right:0; bottom:-.09em;
  height:.068em; min-height:3px; border-radius:999px;
  background:linear-gradient(90deg,#8B5CF6 0%,#EC4899 52%,#FB923C 100%);
  transform:scaleX(0); transform-origin:left center;
  animation:markDraw .8s cubic-bezier(.16,1,.3,1) 1.15s forwards;
}
@keyframes markDraw{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){
  .mark::after{animation:none; transform:scaleX(1)}
}

/* ── Shine Border ────────────────────────────────────────────
   Farbverlauf, der um den Rand läuft. Ein Kegelverlauf rotiert
   hinter einem schmalen Rahmen; der Button selbst deckt die Mitte
   ab und bleibt dadurch weiß. Wrapper .shine um den Button. */
.shine{
  position:relative; display:inline-flex; isolation:isolate; overflow:hidden;
  padding:1.4px; border-radius:999px;
  background:transparent;
}
/* weicher Schein nach außen, damit der Rand auch auf Blau trägt */
.shine::after{
  content:""; position:absolute; z-index:-2; inset:-5px; border-radius:999px;
  background:conic-gradient(from 0deg,
    transparent 0deg, #8B5CF6 34deg, #EC4899 72deg, #FB923C 110deg,
    transparent 162deg, transparent 360deg);
  filter:blur(6px); opacity:.72;
  animation:shineSpin 4s linear infinite;
  will-change:transform;
}
.shine::before{
  content:""; position:absolute; z-index:-1;
  left:50%; top:50%; width:260%; aspect-ratio:1/1;
  background:conic-gradient(from 0deg,
    rgba(139,92,246,.45) 0deg, #8B5CF6 34deg, #EC4899 72deg, #FB923C 108deg,
    rgba(251,146,60,.50) 150deg, rgba(139,92,246,.38) 250deg, rgba(139,92,246,.45) 360deg);
  animation:shineSpin 4s linear infinite;
  will-change:transform;
}
@keyframes shineSpin{
  from{transform:translate(-50%,-50%) rotate(0deg)}
  to  {transform:translate(-50%,-50%) rotate(360deg)}
}
.shine > .btn{border-radius:999px}
@media (prefers-reduced-motion:reduce){
  .shine::before,.shine::after{animation:none}
}

/* ── announcement ────────────────────────────────────────── */
.announce{background:var(--ink); color:#fff}
.announce__in{
  width:min(var(--shell), calc(100% - 48px)); margin:0 auto; padding:0 var(--pad);
  height:42px; display:flex; align-items:center; justify-content:center; position:relative;
}
.announce__in a{font-size:.845rem; color:#E6E7EC; letter-spacing:-.008em}
.announce__in a:hover{color:#fff}
.announce__x{
  position:absolute; right:var(--pad); background:none; border:0; padding:6px;
  color:#8E93A0; cursor:pointer; line-height:0; border-radius:6px;
}
.announce__x:hover{color:#fff}

/* ── nav ─────────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:80;
  background:transparent; border-bottom:1px solid rgba(255,255,255,.38);
  transition:background .2s ease, border-color .2s ease;
}
/* sobald die Navbar den Hero verlässt (oder das Mobilmenü offen ist) */
.nav:not(.is-solid):not(.is-open) .brand{color:#fff}
.nav:not(.is-solid):not(.is-open) .nav__links a{color:rgba(255,255,255,.96)}
.nav:not(.is-solid):not(.is-open) .nav__links a:hover{color:#fff}
.nav:not(.is-solid):not(.is-open) .nav__burger span{background:#fff}
.nav:not(.is-solid):not(.is-open) .btn--ghost{
  background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.42); color:#fff; box-shadow:none;
}
.nav:not(.is-solid):not(.is-open) .btn--ghost:hover{background:rgba(255,255,255,.24); border-color:rgba(255,255,255,.6)}
.nav:not(.is-solid):not(.is-open) .btn--primary{background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(11,11,15,.18)}
.nav:not(.is-solid):not(.is-open) .btn--primary:hover{background:#EDEFF5}

.nav.is-solid,.nav.is-open{
  background:rgba(255,255,255,.82); border-bottom-color:var(--line);
  backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px);
}
.nav__in{
  position:relative;
  width:min(var(--shell), calc(100% - 48px)); margin:0 auto; padding:0 var(--pad);
  height:var(--nav-h); display:flex; align-items:center; gap:34px;
}
/* Eigene senkrechte Linien: die Navbar liegt über denen der Seite und
   würde sie sonst abdecken, sobald sie weiß wird. */
.nav__in::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  border-left:1px solid rgba(255,255,255,.26);
  border-right:1px solid rgba(255,255,255,.26);
}
.nav.is-solid .nav__in::before,.nav.is-open .nav__in::before{border-color:var(--line)}
/* Lockup wie in der Designdatei festgelegt: Markenhöhe = Schriftgrad der
   Wortmarke, Abstand = 0,38 × Markenhöhe. Deshalb sitzt der Schriftgrad auf
   .brand und Mark wie Abstand rechnen in em. */
.brand{display:flex; align-items:center; font-size:1.28rem; gap:.38em; color:var(--ink)}
.brand__mark{width:1em; height:1em; flex:none}
/* Der optionale Split aus der Designdatei: "retain" 500, "lens" 700,
   in einer Farbe. Das <b> traegt nur das Gewicht, kein zweites Wort.
   Laufweite bleibt -.045em. Die Designdatei sieht unter 24px -.028em vor;
   das war eingebaut und wurde wieder verworfen. */
.brand__word{font-weight:500; letter-spacing:-.045em}
.brand__word b{font-weight:700}
.brand--dark{color:#fff}

.nav__links{display:flex; gap:26px; margin-right:auto}
.nav__links a{
  font-size:.92rem; color:var(--text); font-weight:450; letter-spacing:-.01em;
  transition:color .15s ease;
}
.nav__links a:hover{color:var(--ink)}
.nav__cta{display:flex; gap:9px; align-items:center}

.nav__burger{
  display:none; width:38px; height:38px; margin-left:auto; background:none; border:0;
  cursor:pointer; padding:0; place-items:center; border-radius:8px;
}
.nav__burger span{display:block; width:17px; height:1.6px; background:var(--ink); border-radius:2px; transition:transform .2s ease, opacity .2s ease}
.nav__burger span+span{margin-top:5px}
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(3.3px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-3.3px) rotate(-45deg)}

.mobilemenu{
  display:none; flex-direction:column; padding:8px var(--pad) 22px;
  border-top:1px solid var(--line); background:#fff;
}
.mobilemenu a{padding:13px 0; font-size:1.02rem; border-bottom:1px solid var(--line-2)}
.mobilemenu__cta{display:flex; gap:9px; margin-top:18px}
.mobilemenu__cta .btn{flex:1}

/* ── hero ────────────────────────────────────────────────── */
.hero{position:relative; isolation:isolate; padding-top:clamp(40px,5.5vw,76px)}

/* Vollflächiger Hero-Hintergrund: bricht aus der Shell aus (100vw) und
   reicht nach oben hinter die Navbar, die dort transparent ist.
   Darauf zeichnet app.js den animierten Shader; der CSS-Verlauf darunter
   greift bei prefers-reduced-motion oder fehlendem WebGL. */
.hero__bg{
  position:absolute; z-index:-1; pointer-events:none;
  left:calc(50% - 50vw); width:100vw;
  top:calc(-1 * var(--nav-h) - 2px); height:calc(100% + var(--nav-h) + 2px);
  /* Standbild-Fallback in derselben Palette wie der Shader — greift bei
     prefers-reduced-motion oder fehlendem WebGL, wo der Canvas ausbleibt.
     Muss dunkel sein, weil der Hero-Text hell ist. */
  background:
    radial-gradient(ellipse 58% 48% at 26% 44%, rgba(168,255,243,.80), rgba(168,255,243,0) 62%),
    radial-gradient(ellipse 72% 62% at 74% 16%, rgba(201,233,255,.32), rgba(201,233,255,0) 70%),
    linear-gradient(152deg, #0B3BF5 0%, #0A2FE6 46%, #0726C9 100%);
}
/* der animierte Shader legt sich über das Standbild und blendet sich ein,
   sobald WebGL läuft — sonst bleibt das Bild stehen */
/* ── Auftritt beim Laden ─────────────────────────────────────
   Gestaffelt von unten eingeblendet. Nur opacity und transform,
   damit der Compositor das übernimmt und der WebGL-Hintergrund
   nicht ruckelt. Reine CSS-Animation: läuft auch ohne JS und es
   gibt kein Aufblitzen, falls das Skript spät kommt.
   Nach 1,85 s steht alles, lesbar ist der Text ab etwa 0,65 s. */
@keyframes heroIn{
  0%  {opacity:0; transform:translate3d(0,22px,0)}
  55% {opacity:1}
  100%{opacity:1; transform:none}
}
@keyframes shotIn{
  0%  {opacity:0; transform:translate3d(0,38px,0) scale(.975)}
  50% {opacity:1}
  100%{opacity:1; transform:none}
}
/* Die Deckkraft ist schon bei gut der Hälfte fertig, die Bewegung läuft
   danach sanft aus. Dadurch ist der Text früh lesbar, obwohl sich alles
   langsam setzt — sonst wirkt langsam einfach nur zäh. */
.hero .h1,.hero .lede,.hero__cta,.hero .microcopy{
  animation:heroIn 1.05s cubic-bezier(.16,1,.3,1) both;
}
.hero .h1{animation-delay:.06s}
.hero .lede{animation-delay:.18s}
.hero__cta{animation-delay:.30s}
.hero .microcopy{animation-delay:.40s}
.hero__shot .u-app{
  animation:shotIn 1.35s cubic-bezier(.16,1,.3,1) both;
  animation-delay:.50s; transform-origin:50% 0;
}
@media (prefers-reduced-motion:reduce){
  .hero .h1,.hero .lede,.hero__cta,.hero .microcopy,
  .hero__shot .u-app{animation:none}
}

/* Die senkrechten Shell-Linien verschwinden im Hero, weil der Hintergrund
   sie überdeckt. Hier laufen sie als helle Variante darüber weiter. */
.hero::before{
  content:""; position:absolute; bottom:0; left:-1px; right:-1px;
  /* bis zur Oberkante der Navbar hoch, gleiche Höhe wie der Hintergrund */
  top:calc(-1 * var(--nav-h) - 2px);
  border-left:1px solid rgba(255,255,255,.26);
  border-right:1px solid rgba(255,255,255,.26);
  pointer-events:none;
}

.hero__canvas{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  opacity:0; transition:opacity .5s ease;
}
.hero__canvas.is-on{opacity:1}
/* Weil der Verlauf animiert ist, schwankt der Kontrast hinter dem Text.
   Ein weicher Schleier in der Mitte hält ihn konstant, die Ränder
   bleiben farbig. */
.hero__bg::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    /* Streifen oben: sichert die Navbar, egal wo der helle Bereich steht */
    linear-gradient(180deg, rgba(3,10,42,.34) 0%, rgba(3,10,42,.14) 58%, rgba(3,10,42,0) 100%)
      no-repeat top / 100% 190px,
    /* Feld in der Mitte: sichert Headline, Fließtext und Microcopy */
    radial-gradient(ellipse 66% 52% at 50% 38%,
      rgba(3,10,42,.26) 0%, rgba(3,10,42,.14) 52%, rgba(3,10,42,0) 82%);
}

/* Auf dem farbigen Feld tragen die neutralen Grautöne nicht —
   Textfarben und Primär-Button werden im Hero überschrieben. */
.hero .h1{color:#fff}
.hero .muted{color:rgba(255,255,255,.84)}
.hero .lede{color:rgba(255,255,255,.94)}
.hero .microcopy{color:rgba(255,255,255,.88)}
.hero .btn--primary{background:#fff; color:var(--ink); box-shadow:0 2px 10px rgba(3,10,42,.28)}
.hero .btn--primary:hover{background:#EDEFF5}
.hero .btn--ghost{
  background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.45); color:#fff; box-shadow:none;
}
.hero .btn--ghost:hover{background:rgba(255,255,255,.24); border-color:rgba(255,255,255,.65)}

.hero__in{text-align:center; display:flex; flex-direction:column; align-items:center}
.hero .lede{margin-left:auto; margin-right:auto; text-align:center}
.hero .h1{margin-top:26px; max-width:min(100%,1060px)}
.hero__cta{display:flex; gap:10px; margin-top:32px; flex-wrap:wrap; justify-content:center}
.hero__shot{padding:clamp(22px,2.8vw,40px) clamp(14px,2vw,28px) clamp(40px,5vw,72px)}

/* ============================================================
   Product UI kit
   The in-app look shared by every mockup on the page: window
   chrome, dense grid, chip cells, calculation footer.
   Everything is scoped to .u-* so it never leaks into the
   marketing chrome above it.
   ============================================================ */
:root{
  --u-line:#E7E8EE;
  --u-line-2:#EFF0F4;
  --u-side:#FCFCFD;
  --u-bar:#F7F8FA;
  --u-ink:#1B1D24;
  --u-txt:#474C58;
  --u-mut:#868C9B;
  --u-hov:#F3F4F7;
  --u-link:#3A57DD;
}

/* icons ------------------------------------------------------ */
.u-i{
  width:14px; height:14px; flex:none; display:block;
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.u-i--sm{width:12px; height:12px}

/* window ----------------------------------------------------- */
.u-app{
  border-radius:13px; background:#fff; overflow:hidden;
  border:1px solid rgba(11,11,15,.09);
  box-shadow:0 1px 2px rgba(11,11,15,.05),
             0 16px 36px -14px rgba(11,11,15,.20),
             0 56px 90px -50px rgba(11,11,15,.22);
}
.u-app__bar{display:flex; align-items:center; gap:7px; height:32px; padding:0 13px; background:var(--u-bar)}
.u-app__bar i{width:9px; height:9px; border-radius:50%; display:block}
.u-app__bar i:nth-child(1){background:#F0655A}
.u-app__bar i:nth-child(2){background:#F4BE4F}
.u-app__bar i:nth-child(3){background:#61C554}
.u-frame{display:grid; grid-template-columns:200px 1fr; min-width:0}

/* sidebar ---------------------------------------------------- */
.u-side{border-right:1px solid var(--u-line); background:var(--u-side); padding:0 9px 16px; min-width:0}
.u-side__ws{display:flex; align-items:center; gap:8px; height:48px; padding:0 3px}
.u-ws__logo{
  width:22px; height:22px; border-radius:7px; background:var(--ink); color:#fff;
  display:grid; place-items:center; font-size:.65rem; font-weight:700; flex:none;
}
.u-ws__name{font-size:.87rem; font-weight:600; letter-spacing:-.02em; color:var(--u-ink)}
.u-ws__chev{color:var(--u-mut)}
.u-side__ws .u-i:last-child{margin-left:auto; color:var(--u-mut)}

.u-side__find{display:flex; gap:6px; margin-bottom:12px}
.u-find{
  display:flex; align-items:center; gap:7px; flex:1; height:30px; padding:0 9px;
  border:1px solid var(--u-line); border-radius:8px; background:#fff;
  font-size:.775rem; color:var(--u-mut); min-width:0;
}
.u-find span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.u-kbd{
  margin-left:auto; font-size:.66rem; color:#A2A8B6; background:var(--u-hov);
  border-radius:4px; padding:1px 4px; flex:none;
}

.u-nav{display:flex; flex-direction:column; gap:1px}
.u-nav__i{
  display:flex; align-items:center; gap:9px; height:30px; padding:0 8px;
  border-radius:7px; font-size:.8rem; color:var(--u-txt); letter-spacing:-.01em; min-width:0;
}
.u-nav__i span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.u-nav__i .u-i{color:var(--u-mut)}
.u-nav__i.is-on{background:var(--u-hov); color:var(--u-ink); font-weight:550}
.u-nav__i.is-on .u-i{color:var(--u-ink)}
.u-nav__n{margin-left:auto; font-size:.71rem; color:var(--u-mut); font-style:normal; flex:none}
.u-side__grp{
  display:flex; align-items:center; gap:5px; margin:16px 0 6px; padding:0 8px;
  font-size:.72rem; color:#A2A8B6; letter-spacing:-.005em;
}
.u-side__grp .u-i{width:11px; height:11px}

/* main pane -------------------------------------------------- */
.u-main{min-width:0; display:flex; flex-direction:column}
.u-head{display:flex; align-items:center; gap:9px; height:48px; padding:0 14px; border-bottom:1px solid var(--u-line)}
.u-head__ico{
  width:19px; height:19px; border-radius:6px; display:grid; place-items:center; flex:none;
  background:var(--red-bg); color:var(--red);
}
.u-head__ico .u-i{width:12px; height:12px}
.u-head__t{font-size:.9rem; font-weight:600; letter-spacing:-.022em; color:var(--u-ink); white-space:nowrap}
.u-head__r{margin-left:auto; display:flex; align-items:center; gap:8px}
.u-avs{display:flex; align-items:center}
.u-avs i{
  width:22px; height:22px; border-radius:50%; margin-left:-6px; border:2px solid #fff;
  display:grid; place-items:center; font-size:.58rem; font-weight:700; color:#fff; font-style:normal;
}
.u-avs i:first-child{margin-left:0}
.u-avs b{margin-left:5px; font-size:.72rem; color:var(--u-mut); font-weight:500}
.u-rule{width:1px; height:18px; background:var(--u-line)}

.u-btn{
  display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 9px;
  border-radius:8px; font-size:.795rem; color:var(--u-txt); white-space:nowrap;
}
.u-btn--bd{border:1px solid var(--u-line); background:#fff; box-shadow:0 1px 1px rgba(11,11,15,.03)}
.u-btn--ico{padding:0; width:28px; justify-content:center; color:var(--u-mut)}
.u-ask{
  display:inline-flex; align-items:center; gap:6px; height:31px; padding:0 12px;
  border:1px solid var(--u-line); border-radius:999px; background:#fff;
  font-size:.795rem; color:var(--u-ink); box-shadow:0 1px 1px rgba(11,11,15,.03); white-space:nowrap;
}

.u-tools{display:flex; align-items:center; gap:8px; height:46px; padding:0 14px; border-bottom:1px solid var(--u-line)}
.u-view{display:inline-flex; align-items:center; gap:7px; height:31px; padding:0 9px; border-radius:8px; background:var(--u-hov)}
.u-view__ico{width:17px; height:17px; border-radius:5px; display:grid; place-items:center; background:var(--green-bg); color:var(--green); flex:none}
.u-view__ico .u-i{width:11px; height:11px}
.u-view b{font-size:.83rem; font-weight:600; letter-spacing:-.02em; color:var(--u-ink)}
.u-tools__r{margin-left:auto; display:flex; align-items:center; gap:8px}

.u-filters{display:flex; align-items:center; gap:7px; height:46px; padding:0 14px; border-bottom:1px solid var(--u-line)}
.u-fchip{
  display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 10px;
  border:1px solid var(--u-line); border-radius:8px; background:#fff;
  font-size:.785rem; color:var(--u-mut); white-space:nowrap; box-shadow:0 1px 1px rgba(11,11,15,.03);
}
.u-fchip b{color:var(--u-ink); font-weight:550}
.u-fchip em{
  font-style:normal; background:var(--u-hov); border-radius:4px; padding:0 5px;
  font-size:.72rem; color:var(--u-txt);
}
.u-fchip--add{width:30px; padding:0; justify-content:center; border-style:dashed; color:var(--u-mut)}
.u-fchip--ico{width:30px; padding:0; justify-content:center; color:var(--u-mut)}
.u-filters__r{margin-left:auto; display:flex; gap:7px}

/* grid ------------------------------------------------------- */
.u-tbl{--cols:1.52fr .88fr 3.03fr 1.01fr .88fr .86fr; min-width:0}
.u-tbl__hd,.u-tbl__r,.u-tbl__ft{display:grid; grid-template-columns:var(--cols); min-width:0}
.u-tbl__hd{height:36px; border-bottom:1px solid var(--u-line)}
.u-th{
  display:flex; align-items:center; gap:6px; padding:0 14px; min-width:0; overflow:hidden;
  border-right:1px solid var(--u-line-2);
  font-size:.735rem; color:var(--u-mut); letter-spacing:-.005em; white-space:nowrap;
}
.u-th:last-child{border-right:0}
.u-th .u-i{width:12px; height:12px; color:#A2A8B6}
.u-th__add{margin-left:auto; color:#B6BBC7}
/* schmalere Fenster: die Spalten-Icons weichen, damit die Beschriftungen
   vollständig bleiben */
@media (max-width:1250px){ .u-th>.u-i:first-child{display:none} }

.u-tbl__r{position:relative; min-height:56px; border-bottom:1px solid var(--u-line-2)}
.u-tbl__r:hover,.u-tbl__r.is-hover{background:var(--u-hov)}

/* Zeilenaktionen: erscheinen beim Überfahren am rechten Rand — das ist der
   Weg, auf dem "Mark contacted" ausgelöst wird, ohne eine dauerhafte
   Button-Spalte zu kosten. Eine Zeile zeigt den Zustand fest, damit er
   auch auf einem Standbild sichtbar ist. */
.u-row-actions{
  position:absolute; right:0; top:1px; bottom:1px; z-index:2;
  display:flex; align-items:center; gap:6px; padding:0 14px 0 36px;
  background:linear-gradient(90deg, rgba(243,244,247,0), var(--u-hov) 34px);
  opacity:0; transition:opacity .13s ease;
}
.u-tbl__r:hover .u-row-actions,.u-tbl__r.is-hover .u-row-actions{opacity:1}
/* Tooltips für Buttons, die nur ein Icon tragen. Standard über dem
   Element; .u-tip--b zeigt nach unten, wo oben kein Platz ist. */
.u-tip{position:relative}
.u-tip::after,.u-tip::before{
  position:absolute; left:50%; opacity:0; pointer-events:none; z-index:6;
  transition:opacity .12s ease, transform .12s ease;
}
.u-tip::after{
  content:attr(data-tip);
  bottom:calc(100% + 7px); transform:translateX(-50%) translateY(3px);
  padding:4px 8px; border-radius:6px; background:var(--u-ink); color:#fff;
  font-size:.7rem; font-weight:500; letter-spacing:-.004em; white-space:nowrap;
  box-shadow:0 2px 8px rgba(11,11,15,.22);
}
.u-tip::before{
  content:""; bottom:calc(100% + 2px); transform:translateX(-50%) translateY(3px);
  border:4px solid transparent; border-top-color:var(--u-ink);
}
.u-tip:hover::after,.u-tip:hover::before{opacity:1; transform:translateX(-50%) translateY(0)}
/* .u-tip--r: Blase rechtsbündig zum Button statt zentriert — für Symbole
   direkt an der Fensterkante, wo overflow:hidden sonst abschneidet.
   Der Pfeil zeigt weiterhin auf die Mitte des Buttons. */
.u-tip--r::after{left:auto; right:0; transform:translateX(0) translateY(3px)}
.u-tip--r:hover::after{transform:translateX(0)}
.u-tip--r.u-tip--b::after{transform:translateX(0) translateY(-3px)}
.u-tip--r.u-tip--b:hover::after{transform:translateX(0)}
.u-tip--b::after{bottom:auto; top:calc(100% + 7px); transform:translateX(-50%) translateY(-3px)}
.u-tip--b::before{
  bottom:auto; top:calc(100% + 2px); transform:translateX(-50%) translateY(-3px);
  border-top-color:transparent; border-bottom-color:var(--u-ink);
}
@media (prefers-reduced-motion:reduce){
  .u-tip::after,.u-tip::before{transition:opacity .12s ease}
  .u-tip:hover::after,.u-tip:hover::before,
  .u-tip--b::after,.u-tip--b::before{transform:translateX(-50%)}
}

.u-act--pri{background:#fff; border-color:#D6DAE2; color:var(--u-ink); font-weight:550;
  box-shadow:0 1px 1px rgba(11,11,15,.04)}
.u-act--ico{padding:0; width:28px; justify-content:center; background:#fff; color:var(--u-mut);
  box-shadow:0 1px 1px rgba(11,11,15,.04)}
.u-tbl__r:last-child{border-bottom:0}
.u-td{
  display:flex; align-items:center; gap:9px; padding:10px 14px; min-width:0; overflow:hidden;
  border-right:1px solid var(--u-line-2); font-size:.815rem; color:var(--u-txt);
}
.u-td:last-child{border-right:0}
.u-td--why{color:var(--u-txt); line-height:1.35; white-space:normal}
.u-td--c{justify-content:center; text-align:center; white-space:nowrap}
.u-td--c .u-bars{margin:0 auto}
.u-th--c{justify-content:center}
.u-tbl__r--muted{background:var(--u-side)}
.u-tbl__r--muted .u-rec__n,.u-tbl__r--muted .u-td{color:var(--u-mut)}

.u-rec{display:flex; align-items:center; gap:8px; min-width:0}
.u-rec__av{
  width:21px; height:21px; border-radius:6px; flex:none; display:grid; place-items:center;
  font-size:.6rem; font-weight:700; color:#fff; font-style:normal; letter-spacing:0;
}
.u-rec__n{
  font-size:.825rem; font-weight:550; color:var(--u-ink);
  text-decoration:underline; text-decoration-color:#CDD1DA; text-underline-offset:2.5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.av-1{background:#7C63D6} .av-2{background:#1F1F24} .av-3{background:#C9558B}
.av-4{background:#2A46D8} .av-5{background:#C87A1E} .av-6{background:#0F7A59}
.av-7{background:#3E8FBF} .av-8{background:#B0463A}

.u-pill{
  display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 8px; border-radius:5px;
  font-size:.755rem; font-weight:550; font-style:normal; white-space:nowrap;
}
.u-pill--risk{background:#FDECEA; color:#B93A2D}
.u-pill--watch{background:#FCF3E2; color:#96650A}
.u-pill--steady{background:#E9F6F0; color:#0D7554}
.u-pill--low{background:#F1F2F5; color:#6A707E}
.u-pill i{width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; opacity:.85}

.u-bars{display:flex; align-items:flex-end; gap:2px; height:26px; width:100%; max-width:124px}
.u-bars i{flex:1; min-width:2px; border-radius:1.5px; background:#B9BFCD; height:var(--h,50%)}
.u-bars i.lo{background:#D8503F}
.u-bars--w i.lo{background:#DE9A1C}

.u-tbl__ft{height:46px; border-top:1px solid var(--u-line); background:var(--u-side)}
.u-tbl__ft .u-td{font-size:.765rem; color:var(--u-mut); border-right-color:var(--u-line-2); white-space:nowrap}
.u-tbl__ft b{color:var(--u-ink); font-weight:600}
.u-sum{color:var(--u-mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.u-sum b{color:var(--u-ink); font-weight:600}

.u-note{
  padding:12px 14px; border-top:1px solid var(--u-line-2);
  font-size:.785rem; color:var(--u-mut); background:#fff;
}
.u-note b{color:var(--u-txt); font-weight:550}

/* panel card — the window without a sidebar ------------------- */
.u-card{
  border:1px solid var(--u-line); border-radius:12px; background:#fff; overflow:hidden;
  box-shadow:0 1px 2px rgba(11,11,15,.05), 0 12px 28px -14px rgba(11,11,15,.16);
  min-width:0;
}
.u-card__hd{display:flex; align-items:center; gap:9px; height:44px; padding:0 14px; border-bottom:1px solid var(--u-line)}
.u-card__hd .u-head__t{font-size:.875rem}
.u-card__hd .u-fchip,.u-card__hd .u-pill{margin-left:auto}
.u-card__body{padding:14px}

/* progress rows (New Member Watch) ---------------------------- */
.u-prog{display:grid; grid-template-columns:1.15fr 1.5fr .95fr; gap:16px; align-items:center; padding:13px 14px; border-bottom:1px solid var(--u-line-2)}
.u-prog:last-child{border-bottom:0}
.u-prog__n b{display:block; font-size:.825rem; font-weight:600; color:var(--u-ink)}
.u-prog__n small{font-size:.735rem; color:var(--u-mut)}
.u-track{position:relative; height:7px; border-radius:5px; background:#EDEEF2}
.u-track i{position:absolute; inset:0 auto 0 0; border-radius:5px}
.u-track i.f-red{background:#D4483A} .u-track i.f-amber{background:#DFA02A} .u-track i.f-green{background:#12885F}
.u-track b{position:absolute; top:-4px; bottom:-4px; width:2px; border-radius:2px; background:#B6BBC7}
.u-prog__m{display:flex; align-items:center; gap:8px; justify-content:flex-end; white-space:nowrap}
.u-prog__m span{font-size:.765rem; color:var(--u-mut)}

/* email ------------------------------------------------------- */
.u-mail{width:min(556px,100%); margin:0 auto}
.u-mail__hd{padding:14px}
.u-mail__hd b{display:block; font-size:.93rem; letter-spacing:-.025em; color:var(--u-ink)}
.u-mail__hd small{font-size:.74rem; color:var(--u-mut)}
.u-mail__body{padding:15px 14px}
.u-mail__intro{font-size:.85rem; color:var(--u-txt); margin-bottom:12px}
.u-mrow{display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--u-line-2)}
.u-mrow__t{min-width:0; flex:1}
.u-mrow__t b{display:block; font-size:.83rem; font-weight:600; color:var(--u-ink)}
.u-mrow__t span{display:block; font-size:.79rem; color:var(--u-txt)}
.u-mail__ft{margin-top:14px; font-size:.815rem; color:var(--u-txt)}
.u-mail__ft b{color:var(--u-ink)}
.u-mail__cta{
  display:inline-flex; align-items:center; gap:6px; height:33px; padding:0 14px; margin-top:14px;
  border-radius:8px; background:var(--accent); color:#fff; font-size:.815rem; font-weight:500;
}

/* reports ----------------------------------------------------- */
.u-reports{display:grid; grid-template-columns:1fr 1fr; gap:12px}
/* Nur in der schmalen Ansicht: dort sind die Spaltenkoepfe ausgeblendet und
   "24D" bzw. "3Y 4M" stuenden ohne jede Erklaerung da. */
.u-td__k{display:none}
.u-cap{display:none}
.u-kpis{grid-column:1/-1; display:grid; grid-template-columns:repeat(4,1fr)}
.u-kpi{padding:14px 15px; border-right:1px solid var(--u-line-2)}
.u-kpi:last-child{border-right:0}
.u-kpi span{display:flex; align-items:center; gap:5px; font-size:.735rem; color:var(--u-mut)}
.u-kpi b{display:block; margin-top:5px; font-size:1.42rem; font-weight:600; letter-spacing:-.04em; color:var(--u-ink); line-height:1}
.u-kpi em{display:block; margin-top:5px; font-size:.72rem; font-style:normal; color:var(--u-mut)}
.u-kpi em.up{color:#0D7554} .u-kpi em.dn{color:#0D7554}
.u-rep__hd{display:flex; align-items:center; gap:7px; padding:12px 14px 0; font-size:.83rem; font-weight:600; letter-spacing:-.02em; color:var(--u-ink)}
.u-rep__hd .u-i{color:#B6BBC7}
.u-rep__hd .u-btn--ico{margin-left:auto}
.u-legend{display:flex; gap:13px; padding:9px 14px 0; font-size:.72rem; color:var(--u-mut)}
.u-legend span{display:inline-flex; align-items:center; gap:5px}
.u-legend i{width:7px; height:7px; border-radius:50%}
.u-chart{width:100%; height:104px; padding:10px 14px 2px; display:block}
.u-card--wide{grid-column:1/-1}
.u-card--wide .u-chart{height:150px}
.u-chart line{stroke:var(--u-line-2); stroke-width:1; vector-effect:non-scaling-stroke}
.u-chart .ln{fill:none; stroke:var(--accent); stroke-width:1.8; vector-effect:non-scaling-stroke; stroke-linejoin:round}
.u-chart .ar{fill:var(--accent); opacity:.08; stroke:none}
.u-chart__x{display:flex; justify-content:space-between; padding:0 14px 12px; font-size:.68rem; color:var(--u-mut)}
.u-heat{display:grid; grid-template-columns:24px repeat(7,1fr); gap:3px; padding:12px 14px 14px}
.u-heat span{font-size:.65rem; color:var(--u-mut); text-align:center; line-height:1.5}
.u-heat span.y{text-align:left}
.u-heat i{display:block; height:16px; border-radius:3px}
.u-heat .l0{background:#F1F2F5} .u-heat .l1{background:#DBE1FB} .u-heat .l2{background:#B6C2F4}
.u-heat .l3{background:#8095EB} .u-heat .l4{background:#2A46D8}
.u-cohort{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:14px 16px 16px}
.u-cohort div{display:grid; grid-template-rows:104px auto auto; text-align:center}
.u-cohort i{align-self:end; width:74%; margin:0 auto; background:var(--accent); opacity:.85; border-radius:5px 5px 0 0; display:block}
.u-cohort small{margin-top:6px; font-size:.68rem; color:var(--u-mut)}
.u-cohort b{font-size:.76rem; font-weight:600; color:var(--u-ink)}

/* record page ------------------------------------------------- */
.u-record{max-width:700px; margin:0 auto}
.u-record__hd{display:flex; align-items:center; gap:11px; padding:15px 16px; border-bottom:1px solid var(--u-line)}
.u-record__hd .u-rec__av{width:36px; height:36px; border-radius:10px; font-size:.8rem}
.u-record__hd b{display:block; font-size:.98rem; letter-spacing:-.025em; color:var(--u-ink)}
.u-record__hd small{font-size:.76rem; color:var(--u-mut)}
.u-record__btns{margin-left:auto; display:flex; gap:7px; flex-wrap:wrap}
.u-attrs{display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--u-line)}
.u-attrs div{padding:12px 16px; border-right:1px solid var(--u-line-2)}
.u-attrs div:last-child{border-right:0}
.u-attrs span{display:flex; align-items:center; gap:5px; font-size:.715rem; color:var(--u-mut)}
.u-attrs b{display:block; margin-top:4px; font-size:.97rem; font-weight:600; letter-spacing:-.03em; color:var(--u-ink)}
.u-log{padding:15px 16px}
.u-log__i{display:flex; gap:12px; padding-bottom:14px; position:relative}
.u-log__i:last-child{padding-bottom:0}
.u-log__i::before{content:""; position:absolute; left:3.5px; top:12px; bottom:-2px; width:1px; background:var(--u-line)}
.u-log__i:last-child::before{display:none}
.u-log__d{width:8px; height:8px; border-radius:50%; flex:none; margin-top:5px; position:relative; z-index:1; background:var(--accent)}
.u-log__d.a{background:#DFA02A} .u-log__d.g{background:#12885F}
.u-log__i b{display:block; font-size:.82rem; font-weight:500; color:var(--u-txt); line-height:1.5}
.u-log__i small{font-size:.71rem; color:var(--u-mut)}

/* compact rows used in the "how it works" steps ---------------- */
.u-mini{margin-top:24px; font-size:.79rem}
.u-mini .u-card__body{padding:11px 12px}
.u-file{display:flex; align-items:center; gap:10px; padding-bottom:10px; border-bottom:1px solid var(--u-line-2)}
.u-file__t{width:29px; height:29px; border-radius:7px; flex:none; display:grid; place-items:center;
  background:var(--green-bg); color:var(--green); font-size:.58rem; font-weight:700}
.u-file b{display:block; font-size:.785rem; font-weight:600; color:var(--u-ink)}
.u-file small{font-size:.715rem; color:var(--u-mut)}
.u-file .u-i{margin-left:auto; color:var(--green)}
.u-map{display:flex; align-items:center; gap:8px; padding:6px 1px; border-bottom:1px solid var(--u-line-2); color:var(--u-mut)}
.u-map:last-child{border-bottom:0}
.u-map code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.715rem}
.u-map .u-i{width:11px; height:11px; color:#C2C6D0}
.u-map b{margin-left:auto; color:var(--u-ink); font-weight:550; font-size:.755rem}
.u-srow{display:flex; align-items:center; gap:8px; padding:7px 1px; border-bottom:1px solid var(--u-line-2); min-width:0}
.u-srow:last-child{border-bottom:0}
.u-srow b{font-size:.775rem; font-weight:600; color:var(--u-ink); white-space:nowrap}
.u-srow span{font-size:.765rem; color:var(--u-mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.u-acts{display:flex; gap:6px; flex-wrap:wrap}
.u-act{
  display:inline-flex; align-items:center; gap:5px; height:27px; padding:0 10px; border-radius:7px;
  border:1px solid var(--u-line); background:#fff; font-size:.755rem; color:var(--u-txt);
}
.u-act--on{background:#E9F6F0; border-color:#CFE7DC; color:#0D7554; font-weight:600}
.u-quote{margin-top:11px; padding:10px 11px; border-radius:8px; background:var(--u-side)}
.u-quote small{font-size:.7rem; color:var(--u-mut)}
.u-quote p{margin-top:4px; font-size:.775rem; color:var(--u-txt); line-height:1.5}

/* ── compatibility ───────────────────────────────────────── */
/* Die Zeile ueber den Logos ist auf beiden Seiten weg — sie sagte nichts,
   was die Logos darunter nicht schon sagen. Dadurch stossen die Logos direkt
   an den Hero, der als .sec eine untere Haarlinie mitbringt; zusammen mit der
   oberen der Logoreihe waeren es zwei, und die lesen sich als 2px-Strich.
   Also legt die Reihe ihre ab. (.compat__hd stand hier und ist mit der Zeile
   verschwunden.) */
.compat .logorow{border-top:0}
.logorow{display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.logocell{
  display:flex; align-items:center; justify-content:center; gap:7px;
  min-height:86px; border-right:1px solid var(--line); background:var(--soft);
  transition:background .2s ease;
  /* Umbruch zwischen Name und Auszeichnung, nicht innerhalb. Zweispaltig auf
     dem Handy sind es 195px je Zelle; "CSV upload" plus "ANY PLATFORM" braucht
     194px, also brach beides mitten im Wort um und sah eingequetscht aus.
     So faellt die Auszeichnung in eine zweite Zeile darunter. */
  flex-wrap:wrap; padding:0 10px;
}
.logocell:last-child{border-right:0}
.logocell:hover{background:#fff}
.wordmark{font-size:1.06rem; font-weight:600; letter-spacing:-.035em; color:#5C6270; white-space:nowrap}
.tag{
  font-size:.62rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-soft); padding:2px 6px; border-radius:4px; font-style:normal;
  white-space:nowrap;
}
.tag--dark{background:rgba(255,255,255,.1); color:#B9BECC}
/* Oben und unten gleich viel. Vorher 20/34: den Ausgleich trug die Kopfzeile
   ueber den Logos, und seit die weg ist, klebte der Text an der Oberkante. */
.compat__ft{padding-top:34px; padding-bottom:34px; text-align:center}
.compat__ft .microcopy{margin-inline:auto; max-width:none}

/* ── problem ─────────────────────────────────────────────── */
.problem .pad{padding-top:clamp(64px,8vw,110px); padding-bottom:clamp(46px,6vw,72px)}
.tri{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line)}
.tri__cell{padding:34px var(--pad) 40px; border-right:1px solid var(--line)}
.tri__cell:last-child{border-right:0}
.tri__cell h3{font-size:1.06rem; letter-spacing:-.025em}
.tri__cell p{margin-top:10px; font-size:.93rem; color:var(--text); line-height:1.6}

.statrow{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); background:var(--soft)}
.stat{padding:30px var(--pad) 34px; border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat b{display:block; font-size:clamp(2.1rem,3.4vw,2.7rem); letter-spacing:-.045em; line-height:1; font-weight:600}
/* > span, nicht span: sonst greift die Label-Regel auch auf .rng im <b>. */
.stat > span{display:block; margin-top:10px; font-size:.86rem; color:var(--text-2); max-width:26ch}


/* ── Mockups richten sich nach ihrer eigenen Breite ──────────
   Frueher haengten diese Regeln an der Fensterbreite. Dadurch liess sich das
   App-Fenster auf dem Handy nur umbauen, nie verkleinert zeigen: ein auf
   Desktop-Breite gezwungenes Fenster haette trotzdem die Handy-Regeln
   bekommen. Ueber @container entscheidet die Breite des Fensters selbst,
   also kann der Hero sein volles Layout behalten und nur skaliert werden,
   waehrend die Panel-Karten weiter in Karten falten. */
.u-app,.u-card{container-type:inline-size}
@container (max-width:700px){
  .u-side{display:none}
  .u-frame{grid-template-columns:1fr}
  .u-head{padding:0 12px}
  .u-head .u-btn,.u-head .u-rule,.u-head .u-avs{display:none}
  .u-head__r{gap:6px}
  .u-tools,.u-filters{padding:0 12px; overflow-x:auto; scrollbar-width:none}
  .u-tools::-webkit-scrollbar,.u-filters::-webkit-scrollbar{display:none}
  .u-tools>*,.u-filters>*{flex:none}
  .u-filters__r{margin-left:0}
  .u-td--c{justify-content:flex-start; text-align:left}
  .u-td--c .u-bars{margin:0}
  .u-tbl__hd{display:none}
  .u-tbl__r{grid-template-columns:1fr auto; gap:4px 10px; padding:11px 12px; min-height:0}
  .u-td{border-right:0; padding:0; overflow:visible}
  .u-tbl__r .u-td:nth-child(1){grid-area:1/1}
  .u-tbl__r .u-td:nth-child(2){grid-area:1/2; justify-self:end}
  .u-tbl__r .u-td:nth-child(3){grid-area:2/1; font-size:.795rem; line-height:1.45}
  .u-tbl__r .u-td:nth-child(4){grid-area:3/1; padding-top:2px}
  .u-tbl__r .u-td:nth-child(5){grid-area:2/2; justify-self:end; align-self:end}
  .u-tbl__r .u-td:nth-child(6){grid-area:3/2; justify-self:end; align-self:end; font-size:.775rem}
  .u-row-actions{display:none}
  .u-tbl__r.is-hover{background:transparent}
  .u-bars{max-width:104px}
  .u-tbl__ft{grid-template-columns:1fr 1fr; gap:0 10px; height:auto; padding:11px 12px}
  .u-tbl__ft .u-td:not(:nth-child(1)):not(:nth-child(2)){display:none}
  .u-sm-hide{display:none}   /* nur noch die Sortier-Beschreibung; "Export CSV" passt ungekuerzt */
  .u-head__r{display:none}
  .u-tools .u-btn:not(.u-btn--bd){display:none}   /* "View settings" */
  .u-filters .u-fchip--add{display:none}
  .u-td__k{
    display:block; font-size:.62rem; line-height:1.2; letter-spacing:.02em;
    color:var(--u-mut); font-weight:500; margin-bottom:1px;
  }
}

/* ── how it works ────────────────────────────────────────── */
.how .pad{padding-top:clamp(64px,8vw,110px); padding-bottom:clamp(40px,5vw,60px)}
.steps{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line)}
.steps__item{padding:32px var(--pad) 38px; border-right:1px solid var(--line); display:flex; flex-direction:column}
.steps__item:last-child{border-right:0}
.steps__n{font-size:.76rem; font-weight:600; color:var(--accent); letter-spacing:.08em}
.steps__item h3{margin-top:14px; font-size:1.28rem; letter-spacing:-.03em}
.steps__item p{margin-top:10px; font-size:.92rem; color:var(--text); line-height:1.6}
/* ── features (tabbed) ───────────────────────────────────── */
/* Keine untere Haarlinie: darunter beginnt das dunkle Band, der Farbwechsel
   trennt deutlich genug. Die Linie lief zudem nur über Shell-Breite und
   hätte über dem randlosen Band als Stummel geendet. */
.feat{border-bottom:0}
.feat .pad{padding-top:clamp(64px,8vw,110px); padding-bottom:clamp(40px,5vw,64px)}
.feat__grid{display:grid; grid-template-columns:290px 1fr; border-top:1px solid var(--line)}
.feat__rail{border-right:1px solid var(--line)}
.railnav{
  position:sticky; top:calc(var(--nav-h) + 40px);
  display:flex; flex-direction:column; align-items:flex-start;
  padding:40px 0 40px var(--pad); gap:4px;
}
.railnav__b{
  position:relative; display:flex; align-items:baseline; background:none; border:0; padding:9px 0; cursor:pointer;
  font-size:1.14rem; font-weight:500; letter-spacing:-.028em; color:#6A707E; text-align:left;
  text-decoration:none; transition:color .18s ease;
}
.railnav__b i{
  flex:none; width:24px; font-style:normal;
  font-size:.72rem; font-weight:600; letter-spacing:.06em; color:#6A707E;
  transition:color .18s ease;
}
.railnav__b:hover{color:#3E4450}
.railnav__b.is-active{color:var(--ink); font-weight:600}
.railnav__b.is-active i{color:var(--accent)}
.railnav__b::before{
  content:""; position:absolute; left:calc(-1 * var(--pad)); top:50%; transform:translateY(-50%);
  width:2px; height:0; background:var(--accent); border-radius:2px;
  transition:height .22s cubic-bezier(.4,0,.2,1);
}
.railnav__b.is-active::before{height:26px}

.feat__panels{min-width:0}
.panel,.panel__art{min-width:0}
/* Alle Panels stehen untereinander; die Leiste links markiert, welches
   gerade im Blickfeld ist. Kein Ein-/Ausblenden mehr.
   Nur die Naht ZWISCHEN Panels bekommt eine Linie: innerhalb eines Panels
   trennt der Hintergrundwechsel Text von Mockup. Zwei gleich aussehende
   Kanten sagten dem Leser vorher nicht, wo ein neuer Punkt anfängt. */
.panel + .panel{border-top:1px solid var(--line)}
.panel{scroll-margin-top:calc(var(--nav-h) + 24px)}

.panel__copy{padding:clamp(56px,5.6vw,84px) var(--pad) 28px}
/* Gleiche Sprache wie .steps__n: Akzent-Nummer, dann der Name. Das Grau ist
   #6A707E (4.96:1 auf Weiß) — var(--muted) käme bei 12px nur auf 4.14:1. */
.panel__eyebrow{
  display:flex; align-items:center; gap:12px; margin-bottom:18px;
  font-size:.76rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:#6A707E;
}
.panel__eyebrow b{font-weight:600; color:var(--accent); letter-spacing:.08em}
.panel__copy h3{font-size:clamp(1.18rem,2.05vw,1.6rem); font-weight:500; letter-spacing:-.03em; line-height:1.32; color:var(--muted); max-width:30ch}
.panel__copy h3 b{color:var(--ink); font-weight:600}

.panel__art{padding:32px var(--pad) clamp(44px,4.6vw,68px); background:var(--soft)}
.panel__art--grey{background:var(--soft-2)}

/* ── Produktsektion: eine Kategorie zur Zeit ──────────────────
   .feat__panels ist reine Scrollstrecke (fünf Bildschirmhöhen).
   Darin dockt .feat__stage an, und die fünf Panels liegen deckungs-
   gleich übereinander — beim Scrollen wird nur überblendet, Leiste
   und Mockup-Rahmen bleiben stehen. Zwischen zwei Wechseln liegt eine
   Haltestrecke, man sieht also wirklich eine Kategorie und nicht
   dauernd zwei halbe.

   Die Klasse js-pin setzt app.js. Ohne JavaScript greift keine dieser
   Regeln und es bleibt bei den untereinander stehenden Panels — die
   Anker in der Leiste funktionieren dann wie bisher.

   Ausgeblendet wird per opacity, nicht per hidden/display:none: alle
   fünf bleiben im DOM und im Barrierefreiheits-Baum. Genau das war der
   Grund, das frühere Tab-Muster abzulösen.

   Erst ab 901px Breite und 720px Höhe: darunter läuft die Leiste
   waagerecht, und 100vh ist auf Mobile wegen der ein- und ausfahrenden
   URL-Leiste unbrauchbar. Die Höhengrenze ist nicht willkürlich — das
   Dashboard-Mockup ist mit rund 620px das höchste, und unter 720px
   Fensterhöhe müsste es unter 0.7 skaliert werden, um neben die
   Überschrift zu passen; dann ist die Beschriftung darin nicht mehr
   lesbar. Darunter greift die gestapelte Fassung. */
@media (min-width:901px) and (min-height:720px){
  .feat__panels.js-pin{height:calc(5 * (100vh - var(--nav-h)))}
  .js-pin .feat__stage{
    position:sticky; top:var(--nav-h); height:calc(100vh - var(--nav-h));
  }
  .js-pin .panel{
    position:absolute; inset:0;
    display:flex; flex-direction:column; overflow:hidden;
    background:var(--bg);
    opacity:0; transition:opacity .34s ease;
  }
  .js-pin .panel.is-on{opacity:1}
  .js-pin .panel + .panel{border-top:0}

  .js-pin .panel__copy{flex:none; padding:clamp(30px,4vh,52px) var(--pad) clamp(18px,2.4vh,28px)}
  .js-pin .panel__eyebrow{margin-bottom:14px}
  /* Breiteres Maß als im gestapelten Layout: die Überschrift soll hier
     zwei Zeilen brauchen, nicht vier — die Höhe geht dem Mockup ab. */
  .js-pin .panel__copy h3{max-width:58ch}

  .js-pin .panel__art{
    flex:1; min-height:0;
    display:flex; align-items:center; justify-content:center;
    padding:clamp(16px,2.4vh,32px) var(--pad) clamp(24px,3.6vh,48px);
  }
  /* --fit setzt app.js, wenn ein Mockup in der Resthöhe nicht aufgeht:
     lieber proportional verkleinern als unten abschneiden. */
  .js-pin .panel__art > *{width:100%; transform:scale(var(--fit,1)); transform-origin:center}
}
@media (prefers-reduced-motion:reduce){
  .js-pin .panel{transition:none}
}
/* Beim Zuschalten von js-pin würde sonst für jedes Panel eine Überblendung
   vom alten Zustand aus starten — sichtbar als Aufblitzen aller fünf beim
   Laden. app.js setzt den Anfangszustand deshalb unter js-no-anim. */
/* !important mit Absicht: dieser Riegel muss jede Transition schlagen, auch
   spezifischere wie .quote.js-read .w (0,3,0). Ohne ihn startet beim Setzen
   der Klasse eine Überblendung aus dem alten Zustand. */
.js-no-anim .panel,.js-no-anim .w{transition:none !important}

/* ── dark band ───────────────────────────────────────────── */
.dark{position:relative; color:#fff; border-bottom:0}
/* Volle Fensterbreite statt nur Shell-Breite, gleiches Mittel wie
   .sec--bleed::after. Bündig bei top:0 — der Abschnitt darüber hat dafür
   seine untere Haarlinie abgelegt (.feat), sonst bliebe hier ein 1px
   breiter Ink-Streifen über dem Strahlenfächer stehen. */
.dark::before{
  content:""; position:absolute; top:0; bottom:0;
  left:calc(50% - 50vw); width:100vw;
  background:var(--ink); z-index:0;
}
/* Die senkrechten Shell-Linien laufen über dem randlosen Hintergrund weiter,
   sonst reißt das Raster der Seite für die Höhe des Bandes ab. Helle Variante
   wie bei .hero::before und .nav__in::before. */
.dark::after,.math::after{
  content:""; position:absolute; top:0; bottom:0; left:-1px; right:-1px;
  border-left:1px solid rgba(255,255,255,.26);
  border-right:1px solid rgba(255,255,255,.26);
  pointer-events:none; z-index:1;
}
.dark>*{position:relative; z-index:1}
/* Eigener --ink-Grund: .dark__hero ist durch z-index:1 ein eigener
   Stapelkontext, mix-blend-mode des Rings mischt sich also gegen diese
   Fläche und nicht gegen den Hintergrund des Bandes. Ohne sie bliebe das
   Schwarz des Bildes als dunkles Rechteck stehen. */
.dark__hero{
  position:relative; overflow:hidden; background:var(--ink);
  /* Der obere Abstand traegt jetzt die Ueberschrift selbst: die Zeile
     darueber ("Built for the person...") ist weg, ohne Nachziehen saesse die
     Ueberschrift 38px hoeher als vorher. 150-200px setzen sie stattdessen
     rund 40px tiefer als mit der Zeile. */
  padding:clamp(150px,14vw,200px) 0 clamp(130px,17vw,250px); text-align:center;
  /* Der Fächer füllt genau bis an die senkrechten Shell-Linien, nicht darüber
     hinaus. Das Bild skaliert über die Breite, seine Höhe hängt also an der
     Shell-Breite (Breite / 1.777). Damit immer derselbe Bildausschnitt im Band
     steht, wächst die Bandhöhe mit: 0.42 x Shell-Breite sind rund drei Viertel
     der Bildhöhe. Dieselbe Formel wie in .shell, sonst schrumpft der Fächer,
     je breiter das Fenster wird. */
  /* Die Untergrenze traegt die schmale Ansicht: mit background-size:cover ist
     dort die volle Bildhoehe sichtbar, der Faecher steht also unter dem Text —
     aber nur, wenn das Band hoch genug ist. Bei 400px lag der Text noch in den
     Strahlen, bei 560px darueber. */
  min-height:clamp(560px, calc(0.42 * min(var(--shell), 100vw - 48px)), 600px);
}
/* Der Strahlenfächer aus ring.jpg. screen macht das Schwarz des Bildes
   unsichtbar und lässt nur die Strahlen aufleuchten — deshalb braucht das
   Bild keine Transparenz und kann ein JPEG sein (116 KB statt 963 KB PNG). */
.dark__glow{
  /* Füllt das Band ganz. cover skaliert das Bild auf die Breite, top schneidet
     unten ab statt mittig — so bleibt die dunkle obere Bildmitte hinter der
     Überschrift und der Fächer geht darunter auf, wie im Original. */
  /* 1px Überstand nach links, rechts und unten: overflow:hidden des Bandes
     schneidet ihn ohnehin ab, aber so kann Subpixel-Rundung an den Kanten
     keinen Spalt hinterlassen. */
  position:absolute; inset:0 -1px -1px -1px;
  background:url("ring.jpg") center top/cover no-repeat;
  mix-blend-mode:screen; pointer-events:none;
}
.dark__hero-in{position:relative}
.dark .h2{color:#fff}
.dark__lede{margin:20px auto 0; max-width:44ch; font-size:1.02rem; color:#9AA0AF; line-height:1.6}

.cells{position:relative; display:grid; grid-template-columns:repeat(4,1fr)}
/* Ober- und Unterkante laufen bis zum Fensterrand, wie der Hintergrund des
   Bandes — als Rahmen ginge das nicht, der endet am Element. position:absolute
   ist hier Bedingung: sonst würden die Pseudo-Elemente des Grid-Containers
   selbst zu Grid-Items und säßen mit in den Spalten. */
.cells::before,.cells::after{
  content:""; position:absolute; left:calc(50% - 50vw); width:100vw; height:1px;
  background:rgba(255,255,255,.1); pointer-events:none;
}
.cells::before{top:0}
.cells::after{bottom:0}
.cells__c{padding:28px 24px 34px; border-right:1px solid rgba(255,255,255,.1)}
.cells__c:last-child{border-right:0}
.cells__c h3{margin-top:22px; font-size:.96rem; letter-spacing:-.025em; color:#fff}
.cells__c p{margin-top:9px; font-size:.85rem; color:#8F95A4; line-height:1.6}
/* Nur in .cells verwendet. Helle Akzentfarbe wie die Striche an den Zahlen
   im Abschnitt darunter — #7D95F5 statt --accent, das auf --ink verschwindet. */
.ic2{display:block; width:19px; height:19px; background:currentColor; color:#7D95F5}
.ic2--eye{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Cpath d='M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Cpath d='M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3C/svg%3E") center/contain no-repeat}
.ic2--lock{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Crect x='4' y='10.5' width='16' height='10' rx='2'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Crect x='4' y='10.5' width='16' height='10' rx='2'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/contain no-repeat}
.ic2--shield{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Cpath d='M12 3l7.5 3v6c0 4.5-3.1 8-7.5 9.5C7.6 20 4.5 16.5 4.5 12V6z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Cpath d='M12 3l7.5 3v6c0 4.5-3.1 8-7.5 9.5C7.6 20 4.5 16.5 4.5 12V6z'/%3E%3C/svg%3E") center/contain no-repeat}
.ic2--clock{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E") center/contain no-repeat}
.ic2--phone{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Crect x='6.5' y='2.5' width='11' height='19' rx='2.5'/%3E%3Cpath d='M10.5 18.5h3'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Crect x='6.5' y='2.5' width='11' height='19' rx='2.5'/%3E%3Cpath d='M10.5 18.5h3'/%3E%3C/svg%3E") center/contain no-repeat}

/* ── the maths ───────────────────────────────────────────── */
/* kein overflow:hidden mehr — Hintergrund und Verlauf sollen ja gerade
   über die Shell hinausreichen; body hat overflow-x:hidden. */
/* Gleiche Behandlung wie .dark: dunkel und über die volle Fensterbreite.
   Beide Bänder stoßen aneinander und lesen sich als ein Block; die Grenze zum
   hellen Zitat darunter ist der Farbwechsel, deshalb keine Trennlinie. */
.math{position:relative; color:#fff; border-bottom:0}
.math::before{
  content:""; position:absolute; top:0; bottom:0;
  left:calc(50% - 50vw); width:100vw;
  background:var(--ink); z-index:0;
}
.math>*{position:relative; z-index:1}
/* Der Abschnitt trug mit 72-120px Innenabstand rund 570px und stand damit
   deutlich unter dem Band darueber; 140-180px geben ihm etwa ein Fuenftel
   mehr Hoehe, ohne dass der Textblock selbst waechst. */
.math__in{position:relative; z-index:1; padding-top:clamp(140px,14vw,180px); padding-bottom:clamp(140px,14vw,180px)}
.math .h2{color:#fff}
.math .h2 .muted{color:#9AA0AF}
.math .tagpill{background:rgba(255,255,255,.12); color:#fff}
.math__stats{display:grid; grid-template-columns:repeat(4,1fr); gap:2px 0; margin-top:44px; max-width:760px}
/* --accent liegt auf Schwarz bei rund 1,6:1 und verschwindet; auf dunklem
   Grund die helle Variante der Akzentfarbe. */
.mstat{padding-left:16px; border-left:2px solid #7D95F5; padding-bottom:26px}
/* tabular-nums: beim Hochzählen haben die Ziffern sonst unterschiedliche
   Breiten und die Zahl zappelt. */
.mstat b{display:block; font-size:clamp(1.8rem,2.9vw,2.35rem); letter-spacing:-.045em; line-height:1; font-weight:600; font-variant-numeric:tabular-nums}
.mstat span{display:block; margin-top:8px; font-size:.83rem; color:#9AA0AF; max-width:20ch}
.math .microcopy--left{margin-top:12px; color:#9AA0AF}

/* ── quote ───────────────────────────────────────────────── */
.quote{
  background-image:radial-gradient(circle, #DCDEE4 1px, transparent 1px);
  background-size:22px 22px; background-color:#FCFCFD;
}
.quote__in{padding:clamp(80px,11vw,150px) var(--pad); text-align:center}
/* ── Zitat: Wörter färben beim Scrollen nach ──────────────────
   Gleiche Bauweise wie die Produktsektion: .quote__track ist reine
   Scrollstrecke, .quote__stage dockt darin an. Solange Wörter fehlen,
   bleibt die Bühne stehen — man scrollt also erst weiter, wenn alle
   schwarz sind.

   Die Klasse js-read setzt app.js. Ohne JavaScript greift nichts davon
   und alle Wörter stehen von vornherein in --ink. Grau ist der
   Zwischenzustand, nicht der Ausgangszustand im Markup. */
/* Zwei Schwellen statt einer: auf dem Telefon soll der Satz genauso stehen
   bleiben und sich Wort fuer Wort einfaerben. Breite Fenster brauchen 720px
   Hoehe, weil dort 72px-Zeilen und 150px Innenabstand in die Buehne muessen;
   unter 901px sind Schrift und Abstand kleiner, dort reichen 600px. Damit
   faellt nur noch weg, was wirklich zu flach ist: Telefone im Querformat
   (390-430px hoch) und sehr flache Fenster. */
@media (min-width:901px) and (min-height:720px),
       (max-width:900px) and (min-height:600px){
  /* 2.05 statt 2.25: bei zwölf Wörtern kamen rund 87px Scrollweg auf ein
     Wort, bei zehn wären es sonst 105px. Ändert sich der Satz, hier mitziehen. */
  .quote.js-read .quote__track{height:calc(2.05 * (100vh - var(--nav-h)))}
  .quote.js-read .quote__stage{
    position:sticky; top:var(--nav-h); height:calc(100vh - var(--nav-h));
    display:flex; flex-direction:column; justify-content:center;
  }
  /* svh statt vh, wo es der Browser kennt: auf dem Telefon ist 100vh die
     Hoehe *ohne* die Adressleiste, die Buehne waere also hoeher als das, was
     man sieht, und der Satz stuende beim Scrollen nicht still. svh ist die
     kleine Variante — die Buehne passt in beiden Zustaenden der Leiste.
     Auf dem Desktop sind beide gleich. Die vh-Zeilen darueber bleiben als
     Rueckfall fuer aeltere Browser stehen. */
  .quote.js-read .quote__track{height:calc(2.05 * (100svh - var(--nav-h)))}
  .quote.js-read .quote__stage{height:calc(100svh - var(--nav-h))}
  /* #8D93A2 = 3.0:1 auf dem Zitat-Hintergrund, die Untergrenze aus den
     Design-Notes für Display-Grau. Heller wirkt der Effekt stärker, aber
     wer mitten im Ablauf anhält, säße dann vor unlesbarem Text. */
  .quote.js-read .w{color:#8D93A2; transition:color .22s ease}
  .quote.js-read .w.is-on{color:var(--ink)}
}
@media (prefers-reduced-motion:reduce){
  .quote .w{transition:none}
}
.quote__line{
  font-family:var(--serif); font-weight:400;
  /* Die Untergrenze traegt alles unter 773px, wo 6vw kleiner ist als sie —
     also Telefon und kleines Tablet; ab 901px haengt die Groesse weiter an
     6vw, der Desktop bleibt unveraendert. 2.9rem sind 46.4px statt 38.4px.
     Damit faellt der Umbruch an der Satzgrenze weg, den der 19ch-Satz auf
     breiten Fenstern haelt: es werden drei etwa gleich lange Zeilen ("You
     can't save a / member you don't / know is leaving."), bei 320px und bei
     390px dieselben. 3rem waeren bei 320px nur noch 2px von der Kante
     entfernt, ab 3.2rem bricht "leaving." allein auf eine vierte Zeile. */
  font-size:clamp(2.9rem,6vw,4.5rem); line-height:1.1; letter-spacing:-.022em;
  max-width:19ch; margin:0 auto; color:var(--ink);
}
/* Das Eyebrow ist hier kein Schmuck: ohne es trug der Abschnitt als einziger
   der Seite die Bildsprache, die sonst nur Zitate haben (zentriert, Serife,
   gross, unbeschriftet) — und wirkte dadurch wie ein Zitat, dem die
   Anfuehrungszeichen fehlen. */
.quote .tagpill{margin-bottom:26px}

/* ── pricing ─────────────────────────────────────────────── */
.pricing .pad:first-child{padding-top:clamp(64px,8vw,110px); padding-bottom:clamp(40px,5vw,58px)}
.plans{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line)}
.plan{padding:32px var(--pad) 38px; border-right:1px solid var(--line); display:flex; flex-direction:column}
.plan:last-child{border-right:0}
.plan{position:relative}
.plan--hero{background:var(--soft)}
.plan__flag{
  position:absolute; top:34px; right:var(--pad);
  padding:4px 10px; border-radius:999px;
  background:var(--accent); color:#fff; font-size:.7rem; font-weight:600; letter-spacing:.01em;
}
.plan h3{font-size:1.24rem; letter-spacing:-.03em}
.plan__for{margin-top:7px; font-size:.86rem; color:var(--text-2)}
.plan__price{display:flex; align-items:baseline; gap:6px; margin:22px 0 20px}
.plan__price b{font-size:clamp(2.3rem,3.4vw,2.8rem); letter-spacing:-.05em; font-weight:600; line-height:1}
.plan__price span{font-size:.88rem; color:var(--text-2)}
.plan__list{margin-top:26px; display:flex; flex-direction:column; gap:11px}
.plan__list li{
  position:relative; padding-left:23px; font-size:.88rem; color:var(--text); line-height:1.5;
}
.plan__list li::before{
  content:""; position:absolute; left:0; top:6px; width:13px; height:13px;
  background:var(--green); opacity:.9;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4l3.2 3.2L13 4.8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4l3.2 3.2L13 4.8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.pricing__ft{padding-top:22px; padding-bottom:34px; border-top:1px solid var(--line)}

/* ── faq ─────────────────────────────────────────────────── */
.faq__grid{display:grid; grid-template-columns:340px 1fr; gap:0 60px; padding-top:clamp(64px,8vw,104px); padding-bottom:clamp(56px,7vw,96px)}
.faq__side{position:sticky; top:calc(var(--nav-h) + 40px); align-self:start}
.faq__more{margin-top:18px; font-size:.9rem; color:var(--text-2)}
.faq__more a{color:var(--accent); text-decoration:underline; text-underline-offset:3px}
/* Die auszufuellende Adresse in dieser Zeile traegt .lg__fill wie in den
   Rechtstexten. Ohne diese Regel gewinnt .faq__more a (spezifischer) und
   faerbt sie akzentblau auf bernsteinfarbenem Grund. Faellt weg, sobald
   dort auf beiden Seiten eine echte Adresse steht. */
.faq__more .lg__fill{color:var(--amber)}
.faq__list{border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{
  display:flex; align-items:center; gap:20px; padding:20px 0; cursor:pointer; list-style:none;
  font-size:1.02rem; font-weight:550; letter-spacing:-.022em;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary span{flex:1}
.qa summary i{
  position:relative; width:16px; height:16px; flex:none;
}
.qa summary i::before,.qa summary i::after{
  content:""; position:absolute; left:50%; top:50%; background:var(--text-2); border-radius:2px;
  transform:translate(-50%,-50%); transition:transform .22s ease, opacity .22s ease;
}
.qa summary i::before{width:13px; height:1.6px}
.qa summary i::after{width:1.6px; height:13px}
.qa[open] summary i::after{transform:translate(-50%,-50%) rotate(90deg); opacity:0}
.qa__a{padding:0 60px 22px 0; max-width:68ch}
.qa__a p{font-size:.94rem; color:var(--text); line-height:1.65}
.qa[open] .qa__a{animation:panelIn .26s ease both}

/* ── final CTA ───────────────────────────────────────────── */
.cta{position:relative; background:var(--ink); color:#fff; overflow:hidden; text-align:center}
.cta__grid{
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 45%, #000 20%, transparent 78%);
  mask-image:radial-gradient(ellipse 70% 70% at 50% 45%, #000 20%, transparent 78%);
}
.cta__in{position:relative; width:min(var(--shell), calc(100% - 48px)); margin:0 auto; padding:clamp(84px,11vw,140px) var(--pad)}
.cta .h2{color:#fff; font-size:clamp(2.1rem,5vw,3.6rem)}
.cta__lede{margin:20px auto 0; max-width:42ch; color:#9AA0AF; font-size:1.02rem}
.signup{display:flex; gap:9px; justify-content:center; flex-wrap:wrap; margin-top:34px; position:relative}
.signup input{
  height:46px; width:min(320px,100%); padding:0 17px; border-radius:999px;
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.055); color:#fff;
  font:inherit; font-size:.94rem; transition:border-color .16s ease, background .16s ease;
}
.signup input::placeholder{color:#787E8D}
.signup input:hover{border-color:rgba(255,255,255,.26)}
.signup input:focus{outline:none; border-color:#fff; background:rgba(255,255,255,.09)}
.signup input[aria-invalid="true"]{border-color:#E0796C}
.signup .btn{height:46px; padding:0 22px}
/* Der Honigtopf gegen Bots. .sr-only allein reichte nicht: .signup input
   ueberschreibt dessen 1x1, und das Feld lag dann als 320x46 grosser,
   absolut positionierter Block ueber dem Formular. Deshalb eine eigene,
   spezifischere Regel - links aus dem Bild geschoben und ohne Trefferflaeche,
   damit es unter keinen Umstaenden einen Klick abfaengt. */
.signup .signup__hp{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; padding:0; border:0;
  opacity:0; pointer-events:none;
}
.signup__msg{flex-basis:100%; margin-top:12px; font-size:.84rem; color:#9AA0AF; min-height:1.2em}
/* Das zweite Formular im Hero gehoert nur der schmalen Ansicht.
   Eigene Feldfarben: die Grundfassung ist fuer den fast schwarzen Abschluss-
   Abschnitt gebaut. Der Hero-Verlauf hat helle Stellen (Mint bei 44% Hoehe,
   genau dort steht das Formular), auf denen ein weisser Rahmen mit weisser
   Fuellung verschwindet. Dunkle Fuellung plus kraeftigerer Rahmen traegt auf
   hellem wie auf dunklem Untergrund. */
.signup--hero{display:none}
.narrow-only{display:none}
.signup--hero input{
  border-color:rgba(255,255,255,.45); background:rgba(11,11,15,.28);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.signup--hero input::placeholder{color:rgba(255,255,255,.66)}
.signup--hero input:hover{border-color:rgba(255,255,255,.62)}
.signup--hero input:focus{border-color:#fff; background:rgba(11,11,15,.4)}
.signup--hero .signup__msg{color:rgba(255,255,255,.9)}
.signup__msg.is-ok{color:#5FCFA3}
.signup__msg.is-err{color:#E0796C}
.cta__micro{margin-top:26px; font-size:.86rem; color:#787E8D}
.cta__micro a{color:#C9CDD8; text-decoration:underline; text-underline-offset:3px}
.cta__micro a:hover{color:#fff}

/* ── footer ──────────────────────────────────────────────── */
.foot{
  background:var(--ink-2); color:#fff; border-top:1px solid rgba(255,255,255,.08);
  /* Die Hoehe des Fussbereichs faellt durch die Zeilenhoehen auf einen
     Bruchteil (gemessen: Unterkante 10843.734, Dokument 10844). Der Rest
     davon blieb als heller Streifen des weissen Seitengrunds stehen. Ein
     Schatten ohne Weichzeichnung legt dieselbe Farbe darunter; er nimmt
     keinen Platz ein und kann die Seite nicht verlaengern. */
  box-shadow:0 2px 0 var(--ink-2);
}
.foot__in{
  width:min(var(--shell), calc(100% - 48px)); margin:0 auto; padding:clamp(48px,6vw,72px) var(--pad) 44px;
  display:grid; grid-template-columns:1.2fr 2.6fr; gap:44px;
}
.foot__tag{margin-top:16px; font-size:.88rem; color:#8F95A4; max-width:26ch; line-height:1.6}
.foot__cols{display:grid; grid-template-columns:repeat(4,1fr); gap:28px}
.foot__col{display:flex; flex-direction:column; gap:11px}
.foot__col h4{font-size:.78rem; color:#787E8D; font-weight:500; letter-spacing:.01em; margin-bottom:3px}
.foot__col a{display:flex; align-items:center; gap:7px; font-size:.875rem; color:#C9CDD8; transition:color .15s ease}
.foot__col a:hover{color:#fff}
.foot__base{
  width:min(var(--shell), calc(100% - 48px)); margin:0 auto; padding:20px var(--pad) 34px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:.78rem; color:#7B8190; border-top:1px solid rgba(255,255,255,.08);
}


/* ============================================================
   Responsive
   ============================================================ */

/* ── Rechtstexte (privacy.html, terms.html, dpa.html, …) ──── */
/* Eigene, sehr kleine Seitenhuelle: die Rechtstexte brauchen weder die
   Navigation noch app.js. Sie teilen sich mit der Startseite nur die
   Variablen und die Grundtypografie, damit sie nicht wie eine fremde
   Seite aussehen. Eine Spalte, 760px, gelesen wird hier und nichts sonst. */
.lg__nav{border-bottom:1px solid var(--line); background:var(--bg)}
.lg__nav-in{
  width:min(var(--shell), calc(100% - 48px)); margin:0 auto; padding:0 var(--pad);
  height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.lg__back{font-size:.875rem; color:var(--text-2); transition:color .15s ease}
.lg__back:hover{color:var(--ink)}
.lg{width:min(760px, calc(100% - 40px)); margin:0 auto; padding:clamp(44px,6vw,80px) 0 clamp(64px,8vw,110px)}
.lg h1{font-size:clamp(1.9rem,4.2vw,2.6rem); letter-spacing:-.035em}
.lg__meta{margin-top:14px; font-size:.85rem; color:var(--text-2)}
.lg__lede{margin-top:22px; font-size:1.02rem; line-height:1.7; color:var(--text)}
/* Der Kasten traegt, was fuer den Leser vor dem ersten Absatz wahr sein muss —
   etwa dass das Produkt noch nicht laeuft. Kein Schmuck: ohne ihn liest sich
   eine Sicherheitsseite wie die Beschreibung eines Systems, das es gibt. */
.lg__note{
  margin-top:26px; padding:16px 18px; border:1px solid var(--line);
  border-radius:var(--r); background:var(--soft); font-size:.9rem;
  line-height:1.65; color:var(--text);
}
.lg h2{margin-top:46px; font-size:1.1rem; letter-spacing:-.022em}
.lg h3{margin-top:28px; font-size:.96rem}
.lg p{margin-top:13px; line-height:1.72; color:var(--text)}
.lg ul{margin-top:13px; display:flex; flex-direction:column; gap:9px}
.lg li{position:relative; padding-left:19px; line-height:1.7; color:var(--text)}
.lg li::before{
  content:""; position:absolute; left:2px; top:.72em;
  width:5px; height:5px; border-radius:50%; background:#C2C6D0;
}
.lg a:not(.lg__back){color:var(--accent); text-decoration:underline; text-underline-offset:2px}
.lg dt{margin-top:16px; font-weight:600; font-size:.94rem}
.lg dd{margin:6px 0 0; line-height:1.72; color:var(--text)}
/* Die auszufuellenden Stellen sind absichtlich sichtbar: [[…]] faellt beim
   Lesen auf und laesst sich mit einem grep ueber die fuenf Dateien finden.
   Sie muessen vor dem Livegang alle weg sein. */
.lg__fill{
  background:var(--amber-bg); border-bottom:1px solid var(--amber-line);
  color:var(--amber); font-weight:600; padding:0 3px; border-radius:3px;
}
.lg__foot{border-top:1px solid var(--line); background:var(--soft)}
.lg__foot-in{
  width:min(var(--shell), calc(100% - 48px)); margin:0 auto; padding:26px var(--pad) 34px;
  display:flex; flex-wrap:wrap; gap:8px 22px; font-size:.85rem; color:var(--text-2);
}
.lg__foot a{transition:color .15s ease}
/* Die Seite, auf der man steht, steht mit im Fussbereich, aber nicht als Link
   auf sich selbst — sonst sucht man den Unterschied. */
.lg__foot-here{color:var(--ink); font-weight:500}
.lg__foot a:hover{color:var(--ink)}
/* Nur das Copyright rechts, nicht jedes span: .lg__foot-here ist auch eines
   und wurde sonst mit ans Ende geschoben. */
.lg__foot-in>span:last-child{margin-left:auto}
@media (max-width:700px){
  .lg h2{margin-top:38px}
  .lg__foot-in>span:last-child{margin-left:0; width:100%}
}

@media (max-width:1080px){
  .feat__grid{grid-template-columns:250px 1fr}
  .faq__grid{grid-template-columns:280px 1fr; gap:0 40px}
  .u-frame{grid-template-columns:176px 1fr}
  .u-tbl{--cols:1.5fr .92fr 2.8fr 1.05fr .92fr .82fr}
  .cells{grid-template-columns:repeat(2,1fr)}
  .cells__c:nth-child(2n){border-right:0}
  .cells__c:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.1)}
}

/* a narrow window collapses its sidebar, the way the real app does.
   Six columns plus a sidebar stop fitting just under 1180px, so that is
   where the window trades the sidebar for grid width. */
@media (max-width:1180px){
}

@media (max-width:900px){
  :root{--nav-h:60px}
  .nav__links{display:none}
  /* Die E-Mail-Erfassung steht hier direkt im Hero, deshalb faellt der
     Hauptbutton daneben weg — und der in der Navbar mit ihm. Achtung: damit
     ist zwischen Hero und Preisen wieder kein Aufruf sichtbar, der Weg
     dorthin geht ueber das Burger-Menue. */
  /* Der Abschluss-Abschnitt kommt hier mit Ueberschrift und Formular aus:
     die Lede wiederholt, was die Seite schon gesagt hat, und die Zeile darunter
     stand wortgleich im Hero. */
  .cta__lede,.cta__micro{display:none}
  .signup--hero{display:flex; margin-top:24px}
  /* Der Knopfblock faellt weg: der Aufruf ist hier das Formular darueber. */
  .hero__cta{display:none}
  .wide-only{display:none}
  /* revert statt block: die beiden Klassen tragen nur noch die zwei Fassungen
     der Hero-Lede, aber revert stellt den Standardwert des jeweiligen Elements
     her — das bleibt richtig, wenn sie wieder auf einem <span> landen. */
  .narrow-only{display:revert}
  .nav__cta{display:none}
  .nav__in{gap:12px}
  .brand{margin-right:auto}
  .nav__cta .btn--ghost{display:none}
  /* Kompakter als der Rest der Buttons: in der Leiste soll er erreichbar sein,
     nicht dominieren. 40px statt 44 sind knapp unter der Antipp-Empfehlung, dafuer
     steht er nicht mehr wie ein Block neben der Wortmarke. */
  .nav__cta .btn{height:40px; padding:0 14px; font-size:.85rem; font-weight:450}
  .nav__burger{display:grid; margin-left:0}
  .nav.is-open .mobilemenu{display:flex}

  .feat__grid{grid-template-columns:1fr}
  /* min-width:0, sonst dehnt sich das Grid-Item auf die Inhaltsbreite der
     Leiste (min-width:auto) und schiebt die ganze Seite waagerecht auf —
     das overflow-x:auto der Leiste käme nie zum Zug. */
  .feat__rail{border-right:0; border-bottom:1px solid var(--line); min-width:0}
  .railnav{
    position:static; flex-direction:row; padding:0 var(--pad); gap:22px;
    overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .railnav::-webkit-scrollbar{display:none}
  .railnav__b{padding:16px 0; font-size:.98rem; white-space:nowrap; flex:none}
  .railnav__b::before{left:0; right:0; top:auto; bottom:0; transform:none; width:auto; height:0}
  .railnav__b.is-active::before{height:2px; width:100%}

  .faq__grid{grid-template-columns:1fr; gap:34px}
  .faq__side{position:static}

  .foot__in{grid-template-columns:1fr; gap:38px}
  .foot__cols{grid-template-columns:repeat(2,1fr); gap:30px 24px}

  /* Zweispaltig zu zweit: vier Zahlen nebeneinander werden hier zu schmal.
     Der Zeilenabstand kommt als gap statt als padding-bottom der Kachel,
     sonst laufen die beiden Striche einer Spalte zu einer durchgehenden
     Linie zusammen und die vier Zahlen lesen sich als zwei Listen. */
  .math__stats{grid-template-columns:repeat(2,1fr); gap:26px 24px; max-width:520px}
  .mstat{padding-bottom:0}
  /* Der Abstand zur Fussnote haengt sonst am padding-bottom der Kachel, das
     hier auf 0 steht — 12px standen zu dicht unter der letzten Zahl. 34px
     entsprechen den 26+12px des vierspaltigen Layouts. */
  .math .microcopy--left{margin-top:34px}
  .u-reports{grid-template-columns:1fr}
  .u-kpis{grid-template-columns:repeat(2,1fr)}
  .u-kpi:nth-child(2n){border-right:0}
  .u-kpi:nth-child(-n+2){border-bottom:1px solid var(--u-line-2)}
  .u-prog{grid-template-columns:1fr 1.2fr .9fr; gap:12px}
}

@media (max-width:760px){
  .shell,.nav__in,.announce__in,.cta__in,.foot__in,.foot__base{width:100%}
  .hero::before,.nav__in::before,.dark::after,.math::after{display:none}
  .shell{border-left:0; border-right:0}
  .hero{padding-top:30px}
  .hero .h1{margin-top:18px; letter-spacing:-.038em}
  .hero .lede{margin-top:16px; font-size:.98rem; max-width:30em}
  .hero__cta{margin-top:24px}
  .hero .microcopy{margin-top:14px}
  .hero__shot{padding-top:34px}
  /* the app window drops its sidebar and the grid becomes a card list,
     so the plain-English reason survives on a phone */

  /* Die Kopf- und Werkzeugleisten waren breiter als das Fenster (u-tools 66px,
     u-filters 74px, u-head 15px) und liessen sich seitlich wegschieben. Was hier
     faellt, ist reine App-Chrome; die Aussage der Tabelle bleibt. */
  /* Abgekuerzte Werte beschriften, sonst sind sie unlesbar geraten */
  /* Hinweis, dass hier die schmale Fassung der App gezeigt wird */
  /* Das Hero-Fenster wird nicht umgebaut, sondern auf Desktop-Breite gezwungen
     und verkleinert — dank der Container-Abfrage oben behaelt es dabei sein
     volles Layout mit Seitenleiste und Tabellenkopf. Den genauen Faktor setzt
     app.js; der Vorgabewert passt fuer ein 390px-Fenster. */
  .hero__shot .u-app{width:1120px; zoom:var(--u-zoom,.3125)}
  .u-cap{
    display:block; margin-top:12px; text-align:center;
    font-size:.78rem; color:var(--text-2);
  }

  .logorow{grid-template-columns:repeat(2,1fr)}
  .logocell{min-height:74px; border-right:1px solid var(--line); border-bottom:1px solid var(--line)}
  .logocell:nth-child(2n){border-right:0}
  .logocell:last-child{grid-column:1/-1; border-right:0; border-bottom:0}

  .tri,.statrow,.steps,.plans{grid-template-columns:1fr}
  /* min-width:0, sonst schrumpfen die Grid-Items nicht unter ihre Inhaltsbreite
     und schieben bei 320px die ganze Seite 15px zur Seite. Gleiche Ursache wie
     seinerzeit bei .feat__rail. */
  .tri__cell,.stat,.steps__item,.plan{min-width:0}
  .tri__cell,.stat,.steps__item,.plan{border-right:0; border-bottom:1px solid var(--line)}
  .tri__cell:last-child,.stat:last-child,.steps__item:last-child,.plan:last-child{border-bottom:0}

  .cells{grid-template-columns:1fr}
  /* Einspaltig zentriert: nebeneinander traegt die linke Kante die Ordnung,
     untereinander gibt es keine Spalte mehr, an der sie sich ausrichten muesste.
     Das Icon braucht dafuer margin-inline:auto, es ist ein Block. */
  .cells__c{text-align:center}
  .cells__c .ic2{margin-inline:auto}
  .cells__c p{margin-inline:auto; max-width:34ch}
  .cells__c{border-right:0; border-bottom:1px solid rgba(255,255,255,.1)}
  .cells__c:last-child{border-bottom:0}

  /* Auf dem Handy war je Panel 132px reines Polster verbaut, ueber fuenf
     Panels 660px. Gestrafft, aber nicht zusammengeschoben. */
  .panel__copy{padding-top:34px; padding-bottom:20px}
  .panel__eyebrow{margin-bottom:12px}
  .panel__art{padding:20px 14px 34px}
  /* Die Nummer trägt hier das Eyebrow im Panel; in der horizontalen
     Leiste würde sie nur Breite fressen. */
  .railnav__b i{display:none}
  .u-card__hd{height:auto; padding:11px 12px; flex-wrap:wrap; gap:8px}
  .u-card__hd .u-fchip,.u-card__hd .u-pill{margin-left:0}
  .u-prog{grid-template-columns:1fr; gap:10px; padding:12px}
  .u-prog__m{justify-content:flex-start}
  .u-mail__body{padding:14px 12px}
  .u-record__hd{flex-wrap:wrap; padding:13px 12px}
  .u-record__btns{margin-left:0; width:100%}
  .u-attrs{grid-template-columns:repeat(2,1fr)}
  .u-attrs div:nth-child(2n){border-right:0}
  .u-attrs div:nth-child(-n+2){border-bottom:1px solid var(--u-line-2)}
  .u-log{padding:13px 12px}

  .qa__a{padding-right:0}
  .foot__base{flex-direction:column; gap:8px}
  .announce__in a{padding-right:26px; text-align:left; line-height:1.3; font-size:.79rem}
}

@media (max-width:560px){
  /* 16px statt --pad (20px): die groessere Schrift laesst der laengsten Zeile
     bei 320px sonst nur 3px zu jeder Seite, sie klebt am Rand. */
  .quote__in{padding-left:16px; padding-right:16px}
  /* Die vier Zahlen bleiben zweispaltig. Einspaltig standen sie als lange
     Liste untereinander und die Rechnung las sich nicht mehr als Block. */
  .foot__cols{grid-template-columns:1fr}
  .signup input,.signup .btn{width:100%}
  /* Achsenbeschriftungen anheben: .68rem/.65rem sind auf dem Handy 10.4-10.9px.
     Das ist der einzige Text in den Mockups, der hier wirklich zu klein wird —
     Spaltenkoepfe sind ausgeblendet und die 9.6px sind Avatar-Initialen.
     Die y-Spalte des Heatmaps waechst mit, sonst brechen die Uhrzeiten um. */
  .u-chart__x,.u-heat span,.u-cohort small{font-size:.72rem}
  /* Bei 320px blieben in der Werkzeug- und Filterleiste 11 bzw. 5px Ueberlauf,
     die sich wegschieben liessen. Chevron und Kebab sind reine Zierde. */
  .u-view>.u-i{display:none}
  .u-filters__r{display:none}
  .u-heat{grid-template-columns:24px repeat(7,1fr)}
  .u-cohort div{grid-template-rows:70px auto auto}
  /* Die Kennzahlen bleiben auch hier zweispaltig. Einspaltig waren die vier
     Kacheln 392px hoch, also fast ein halber Handybildschirm fuer vier Zahlen,
     die nebeneinander passen. */
}

@media print{
  .nav,.announce,.cta,.hero__shot{display:none}
  body{color:#000}
}