/* ==========================================================================
   Rechnungsblick v2 — gemeinsames Stylesheet
   Ein Token-Satz, beide Farbschemata, keine Abhängigkeiten.
   ========================================================================== */

/* --------------------------------------------------------------- 1 Tokens */
:root{
  --bg:#ffffff;
  --bg-soft:#f6f9fd;
  --bg-sunken:#eef3fa;
  --card:#ffffff;
  --ink:#0f1722;
  --ink-2:#33455b;
  --muted:#64768d;
  --line:#e2e8f0;
  --line-soft:#edf1f7;

  --brand:#1667e0;
  --brand-ink:#0b4aae;
  --brand-soft:#e8f1fe;
  --brand-line:#c6dcfb;

  --violet:#7b55e7;  --violet-soft:#f0ebff;  --violet-ink:#5730c4;
  --green:#1e9e5e;   --green-soft:#e7f6ee;   --green-ink:#116b3b;
  --cyan:#0d97a8;    --cyan-soft:#e4f7f9;    --cyan-ink:#076b78;
  --amber:#d97316;   --amber-soft:#fdf0e4;   --amber-ink:#9a4f08;
  --magenta:#bd2ecb; --magenta-soft:#fbe9fd; --magenta-ink:#8a1c95;

  --win-bg:#ffffff;
  --win-bar:#f2f5f9;
  --win-line:#dbe3ed;

  --bar:rgba(255,255,255,.72);
  --bar-solid:rgba(255,255,255,.92);

  --shadow-s:0 1px 2px rgba(15,23,34,.05), 0 8px 22px rgba(15,23,34,.06);
  --shadow-m:0 18px 44px rgba(15,23,34,.12);
  --shadow-win:0 40px 90px rgba(15,23,34,.24), 0 4px 12px rgba(15,23,34,.08);

  --ease:cubic-bezier(.16,1,.3,1);
  --radius:12px;
  --header-h:72px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0c1119; --bg-soft:#111926; --bg-sunken:#080c12; --card:#141c28;
    --ink:#e9eef6; --ink-2:#bdc9d9; --muted:#8595a9;
    --line:#25313f; --line-soft:#1b2431;
    --brand:#6ba5ff; --brand-ink:#a9cbff; --brand-soft:#152840; --brand-line:#27405f;
    --violet:#a58bff;  --violet-soft:#221c3d;  --violet-ink:#c3b0ff;
    --green:#4cc088;   --green-soft:#12291f;   --green-ink:#6fd3a3;
    --cyan:#3cc4d6;    --cyan-soft:#0d2a2f;    --cyan-ink:#66d8e6;
    --amber:#eba055;   --amber-soft:#2e2013;   --amber-ink:#f4bb7f;
    --magenta:#df76ea; --magenta-soft:#2c1533; --magenta-ink:#eb9df3;
    --win-bg:#0f1722; --win-bar:#1a2432; --win-line:#2a3746;
    --bar:rgba(12,17,25,.66); --bar-solid:rgba(12,17,25,.9);
    --shadow-s:0 1px 2px rgba(0,0,0,.4), 0 8px 22px rgba(0,0,0,.28);
    --shadow-m:0 18px 44px rgba(0,0,0,.42);
    --shadow-win:0 40px 90px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --bg:#0c1119; --bg-soft:#111926; --bg-sunken:#080c12; --card:#141c28;
  --ink:#e9eef6; --ink-2:#bdc9d9; --muted:#8595a9;
  --line:#25313f; --line-soft:#1b2431;
  --brand:#6ba5ff; --brand-ink:#a9cbff; --brand-soft:#152840; --brand-line:#27405f;
  --violet:#a58bff;  --violet-soft:#221c3d;  --violet-ink:#c3b0ff;
  --green:#4cc088;   --green-soft:#12291f;   --green-ink:#6fd3a3;
  --cyan:#3cc4d6;    --cyan-soft:#0d2a2f;    --cyan-ink:#66d8e6;
  --amber:#eba055;   --amber-soft:#2e2013;   --amber-ink:#f4bb7f;
  --magenta:#df76ea; --magenta-soft:#2c1533; --magenta-ink:#eb9df3;
  --win-bg:#0f1722; --win-bar:#1a2432; --win-line:#2a3746;
  --bar:rgba(12,17,25,.66); --bar-solid:rgba(12,17,25,.9);
  --shadow-s:0 1px 2px rgba(0,0,0,.4), 0 8px 22px rgba(0,0,0,.28);
  --shadow-m:0 18px 44px rgba(0,0,0,.42);
  --shadow-win:0 40px 90px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.4);
}

/* ----------------------------------------------------------- 2 Grundlagen */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  transition:background-color .18s ease, color .18s ease;
}
body.is-locked{overflow:hidden}
/* Kein seitliches Scrollen auf dem Telefon. `clip` statt `hidden`, weil hidden
   einen Scrollbereich erzeugt und damit position:sticky aushebeln würde.
   Die waagerechten Galerien haben ihr eigenes overflow-x:auto und bleiben
   davon unberührt. */
body{overflow-x:clip}
@supports not (overflow: clip){ body{overflow-x:hidden} }
img{display:block;max-width:100%;height:auto}
h1,h2,h3,h4,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:6px;transition:outline-width .12s ease-out}

.container{width:min(1180px, calc(100% - 40px));margin:0 auto}
.section{padding:104px 0}
section[id]{scroll-margin-top:calc(var(--header-h) + 16px)}
.section.soft{background:var(--bg-soft);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}

.ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.ic-fill{fill:currentColor;stroke:none}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;min-height:30px;padding:0 12px;
  color:var(--brand-ink);background:var(--brand-soft);
  border:1px solid var(--brand-line);border-radius:999px;
  font-size:13px;font-weight:700;
}
.sec-head{max-width:62ch;margin-bottom:44px}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head h2{margin:16px 0 14px;font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:800;line-height:1.1;letter-spacing:-.022em;text-wrap:balance}
.sec-head p{color:var(--ink-2);font-size:1.06rem}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:46px;padding:0 18px;border-radius:9px;font-size:14.5px;font-weight:700;white-space:nowrap;
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  transition:transform .16s var(--ease), box-shadow .16s ease, background-color .16s ease, border-color .16s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-s)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-ink);border-color:var(--brand-ink)}
:root[data-theme="dark"] .btn-primary,:root[data-theme="dark"] .btn-primary:hover{color:#08111f}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .btn-primary,
  :root:not([data-theme="light"]) .btn-primary:hover{color:#08111f}
}
.btn-ghost{background:transparent}
.btn-sm{min-height:38px;padding:0 13px;font-size:13.5px;border-radius:8px}

.tlink{display:inline-flex;align-items:center;gap:8px;color:var(--brand);font-weight:700;font-size:14.5px}
.tlink .ic{transition:transform .18s var(--ease)}
.tlink:hover .ic{transform:translateX(4px)}

.skip{position:absolute;left:-9999px;top:8px;z-index:2000;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:10px 16px}
.skip:focus{left:16px}

/* Einheitliches Einblenden — ohne JS bleibt alles sichtbar */
.js .reveal{opacity:0;transform:translateY(12px);transition:opacity .4s var(--ease), transform .4s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}

/* Symbolplättchen. Die Farb- und Größenangaben sind bewusst mit .sym.sym
   doppelt gewichtet, damit Abschnitts-Regeln wie `.karte span {}` sie nicht
   versehentlich überschreiben — genau das hatte die Icons grau gefärbt. */
.sym{
  display:grid;place-items:center;flex:0 0 auto;
  width:46px;height:46px;border-radius:11px;
  border:1px solid var(--brand-line);
}
.sym.sym{font-size:22px;color:var(--brand-ink);background:var(--brand-soft);line-height:1}
.sym .ic{stroke-width:1.9}
.sym-sm.sym-sm{width:36px;height:36px;border-radius:9px;font-size:18px}
.sym-lg.sym-lg{width:58px;height:58px;border-radius:14px;font-size:27px}
.sym-violet.sym-violet{color:var(--violet-ink);background:var(--violet-soft);border-color:color-mix(in srgb,var(--violet) 34%, transparent)}
.sym-green.sym-green{color:var(--green-ink);background:var(--green-soft);border-color:color-mix(in srgb,var(--green) 34%, transparent)}
.sym-cyan.sym-cyan{color:var(--cyan-ink);background:var(--cyan-soft);border-color:color-mix(in srgb,var(--cyan) 34%, transparent)}
.sym-amber.sym-amber{color:var(--amber-ink);background:var(--amber-soft);border-color:color-mix(in srgb,var(--amber) 34%, transparent)}
.sym-magenta.sym-magenta{color:var(--magenta-ink);background:var(--magenta-soft);border-color:color-mix(in srgb,var(--magenta) 34%, transparent)}

/* macOS-Fensterrahmen um jeden Screenshot */
.win{border-radius:var(--radius);overflow:hidden;background:var(--win-bg);border:1px solid var(--win-line);box-shadow:var(--shadow-m)}
.win-bar{display:flex;align-items:center;gap:7px;padding:9px 13px;background:var(--win-bar);border-bottom:1px solid var(--win-line)}
.win-bar i{width:11px;height:11px;border-radius:50%;display:block;flex:0 0 auto}
.win-bar i:nth-child(1){background:#ff5f57}
.win-bar i:nth-child(2){background:#febc2e}
.win-bar i:nth-child(3){background:#28c840}
.win-bar span{margin-left:8px;font-size:11.5px;color:var(--muted);font-weight:600}

/* Randlicht beim Überfahren */
.sheen{position:relative}
.sheen::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  padding:1px;opacity:0;transition:opacity .16s ease;
  background:linear-gradient(135deg, var(--brand), transparent 58%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
}
.sheen:hover::after,.sheen:focus-visible::after{opacity:1}

/* --------------------------------------------------------- 3 Kopfleiste */
.header{
  position:sticky;top:0;z-index:900;background:var(--bar);
  backdrop-filter:saturate(150%) blur(12px);-webkit-backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid transparent;
  transition:background-color .22s ease, backdrop-filter .22s ease, border-color .22s ease;
}
.header.is-stuck{
  background:var(--bar-solid);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom-color:var(--line);
}
.nav{display:flex;align-items:center;gap:26px;min-height:var(--header-h);position:relative}
.brand{display:inline-flex;align-items:center;gap:11px;font-size:17px;font-weight:800;letter-spacing:-.01em}
.brand img{width:34px;height:34px;border-radius:9px;box-shadow:var(--shadow-s)}
.nav-main{display:flex;align-items:center;gap:2px;margin-right:auto}
.nav-item{
  display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 13px;border-radius:8px;
  color:var(--ink-2);font-size:14px;font-weight:650;
  transition:color .16s ease, background-color .16s ease;
}
.nav-item:hover,.nav-item[aria-expanded="true"],.nav-item.is-current{color:var(--ink);background:var(--bg-sunken)}
.nav-item .chev{transition:transform .2s var(--ease)}
.nav-item[aria-expanded="true"] .chev{transform:rotate(180deg)}
.badge-new{margin-left:2px;padding:1px 7px;border-radius:999px;background:var(--green-soft);color:var(--green);font-size:10.5px;font-weight:800;letter-spacing:.03em}
.nav-side{display:flex;align-items:center;gap:9px}

.theme{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--card)}
.theme button{display:grid;place-items:center;width:30px;height:26px;border-radius:999px;color:var(--muted);font-size:14px;transition:color .16s ease, background-color .16s ease}
.theme button:hover{color:var(--ink)}
.theme button[aria-pressed="true"]{color:var(--brand);background:var(--brand-soft)}

.mega{
  position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:950;
  display:grid;grid-template-columns:270px minmax(0,1fr);gap:26px;padding:22px;border-radius:16px;
  background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-m);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .18s ease, transform .18s var(--ease), visibility .18s;
}
.mega.is-open{opacity:1;visibility:visible;transform:none}
.mega-aside{display:flex;flex-direction:column;justify-content:space-between;gap:18px;padding:18px;border-radius:12px;background:var(--bg-soft);border:1px solid var(--line-soft)}
.mega-aside strong{display:block;font-size:15px;margin-bottom:6px}
.mega-aside p{color:var(--muted);font-size:13.5px}
.mega-syms{display:flex;gap:9px}
.mega-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.mega-item{display:grid;grid-template-columns:36px minmax(0,1fr);gap:11px;align-items:start;padding:10px;border-radius:10px;transition:background-color .16s ease}
.mega-item:hover{background:var(--bg-sunken)}
.mega-item strong{display:block;font-size:13.5px;font-weight:700;margin-bottom:2px}
.mega-item span span{display:block;color:var(--muted);font-size:12.5px;line-height:1.45}

.burger{display:none;width:40px;height:40px;place-items:center;border:1px solid var(--line);border-radius:9px;font-size:18px}
/* Liegt bewusst außerhalb von <header>: dessen backdrop-filter würde sonst
   der Bezugsrahmen für position:fixed sein und das Panel auf Headerhöhe
   zusammenschrumpfen. */
.mobile{display:none;position:fixed;inset:var(--header-h) 0 0;z-index:940;padding:18px 20px 40px;overflow-y:auto;overscroll-behavior:contain;background:var(--bg);border-top:1px solid var(--line)}
.mobile.is-open{display:block;animation:slideDown .26s var(--ease)}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.mobile a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 2px;border-bottom:1px solid var(--line-soft);font-weight:650}
.mobile a.sub{padding-left:16px;color:var(--ink-2);font-weight:550;font-size:14.5px}
.mobile .btn{width:100%;margin-top:20px}

/* --------------------------------------------------------------- 4 Held */
.hero{position:relative;overflow:hidden;background:var(--bg-soft);border-bottom:1px solid var(--line-soft)}
.aurora{
  position:absolute;inset:-25%;z-index:0;pointer-events:none;
  background:
    radial-gradient(36% 42% at 20% 30%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 62%),
    radial-gradient(32% 38% at 78% 58%, color-mix(in srgb, var(--violet) 20%, transparent), transparent 64%),
    radial-gradient(28% 34% at 54% 14%, color-mix(in srgb, var(--cyan) 16%, transparent), transparent 62%);
  filter:blur(16px);animation:aurora 18s linear infinite;
}
@keyframes aurora{
  0%{transform:translate3d(-2%,-1%,0) scale(1)}
  50%{transform:translate3d(3%,2.5%,0) scale(1.07)}
  100%{transform:translate3d(-2%,-1%,0) scale(1)}
}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:20px;align-items:center;padding:76px 0 0;perspective:1500px}
.hero-copy > *{opacity:0}
.js .hero.is-play .hero-copy > *{animation:rise .52s var(--ease) forwards;animation-delay:calc(var(--i) * 70ms)}
.no-js .hero-copy > *{opacity:1}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.hero h1{margin:20px 0 0;font-size:clamp(2.5rem,5vw,4.4rem);font-weight:830;line-height:1.04;letter-spacing:-.028em;text-wrap:balance}
.hero h1 em{display:block;font-style:normal;margin-top:.16em;font-size:clamp(1.35rem,2.7vw,2.35rem);font-weight:750;line-height:1.14;letter-spacing:-.018em;color:var(--ink-2)}
.hero-lead{margin-top:18px;color:var(--ink-2);font-size:clamp(1.02rem,1.4vw,1.16rem);max-width:38ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:26px}
.hero-note{margin-top:14px;color:var(--muted);font-size:13px}

.seg{position:relative;display:inline-flex;gap:2px;margin-top:30px;padding:4px;background:var(--card);border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow-s)}
.seg-pill{position:absolute;top:4px;left:4px;height:calc(100% - 8px);border-radius:8px;background:var(--brand-soft);transition:transform .22s var(--ease), width .22s var(--ease)}
.seg button{position:relative;z-index:1;padding:7px 13px;border-radius:8px;font-size:13px;font-weight:700;color:var(--muted);transition:color .18s ease}
.seg button[aria-selected="true"]{color:var(--brand-ink)}

.hero-stage{position:relative;height:min(560px, 52vw);align-self:end}
.hero-win{position:absolute;left:0;top:0;width:138%;transform-origin:left top;transform:rotateY(9deg) rotateX(1.5deg);transition:transform .45s var(--ease);will-change:transform}
.js .hero.is-play .hero-win{animation:winIn .9s var(--ease) .25s backwards}
@keyframes winIn{
  from{opacity:0;transform:translateY(34px) rotateY(16deg) rotateX(3deg) scale(.94)}
  to{opacity:1;transform:rotateY(9deg) rotateX(1.5deg) scale(1)}
}
.hero-shots{position:relative}
.hero-shots img{width:100%;transition:opacity .32s ease, transform .32s ease}
.hero-shots img:not(.is-on){position:absolute;inset:0;opacity:0;transform:translateX(12px);pointer-events:none}
.hero-shots img.is-on{position:relative;opacity:1;transform:none}

.kpi{
  position:absolute;left:-30px;bottom:96px;z-index:3;padding:13px 17px;border-radius:13px;
  background:color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter:blur(16px) saturate(170%);-webkit-backdrop-filter:blur(16px) saturate(170%);
  border:1px solid var(--line);box-shadow:var(--shadow-m);
}
.kpi small{display:block;font-size:11px;color:var(--muted);letter-spacing:.02em;font-weight:600}
.kpi strong{font-size:24px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi span{display:block;font-size:11.5px;color:var(--green);font-weight:700;margin-top:2px}
.js .hero.is-play .kpi{animation:rise .5s var(--ease) .78s backwards}

.trust{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:10px 34px;justify-content:center;padding:26px 0;margin-top:34px;border-top:1px solid var(--line-soft)}
.trust li{display:inline-flex;align-items:center;gap:9px;color:var(--ink-2);font-size:13.5px;font-weight:650}
.trust .ic{color:var(--green);font-size:15px}

/* --------------------------------------------------------- 5 Belegfluss */
.flow{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:60px;align-items:start}
.flow-sticky{position:sticky;top:calc(var(--header-h) + 40px);display:flex;flex-direction:column;gap:18px}
.flow-view{position:relative;display:flex;flex-direction:column;border-radius:var(--radius);overflow:hidden}
.flow-view .win-bar{flex:0 0 auto}
.flow-shots{position:relative;flex:1;aspect-ratio:16/10}
.flow-shots img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;opacity:0;transform:scale(.985);transition:opacity .32s ease, transform .32s ease}
.flow-shots img.is-on{opacity:1;transform:none}

.doc{position:absolute;right:20px;bottom:20px;width:124px;height:160px;z-index:4;perspective:800px}
.doc-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.5,0,.2,1)}
.doc.is-flipped .doc-inner{transform:rotateY(180deg)}
.doc-face{position:absolute;inset:0;backface-visibility:hidden;overflow:hidden;border-radius:9px;border:1px solid var(--win-line);background:#fff;box-shadow:0 16px 34px rgba(15,23,34,.28);padding:12px 11px}
.doc-face.back{transform:rotateY(180deg);background:#0d141d;border-color:#26313e}
.doc-tag{display:inline-block;margin-bottom:9px;padding:2px 6px;border-radius:4px;background:#e8f1fe;color:#0b4aae;font:600 8.5px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.07em}
.doc-face.back .doc-tag{background:#16293d;color:#8fd0ff}
.doc-line{height:5px;border-radius:3px;background:#e4eaf2;margin-bottom:6px}
.doc-line.a{width:58%} .doc-line.b{width:84%} .doc-line.c{width:72%}
.doc-line.hi{background:#bcd6f8}
.doc-face.back code{display:block;white-space:pre;color:#7fe0b5;font:400 7px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace}
.doc-stamp{
  position:absolute;right:8px;bottom:10px;padding:2px 6px;border-radius:4px;
  border:1.6px solid #5fd69b;color:#5fd69b;background:rgba(13,20,29,.85);
  font:600 8.5px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;
  transform:rotate(-9deg) scale(.4);opacity:0;
  transition:transform .34s cubic-bezier(.2,1.6,.4,1), opacity .2s ease;
}
.doc.is-paid .doc-stamp{transform:rotate(-9deg) scale(1);opacity:1}

.flow-rail{display:flex;align-items:center}
.flow-rail .node{width:13px;height:13px;border-radius:50%;flex:0 0 auto;border:2px solid var(--line);background:var(--card);transition:background-color .25s ease, border-color .25s ease, transform .25s var(--ease)}
.flow-rail .node.done{background:var(--brand);border-color:var(--brand)}
.flow-rail .node.now{background:var(--brand);border-color:var(--brand);transform:scale(1.35)}
.flow-rail .seg-line{position:relative;flex:1;height:2px;background:var(--line);overflow:hidden}
.flow-rail .seg-line::after{content:"";position:absolute;inset:0;background:var(--brand);transform:scaleX(0);transform-origin:left;transition:transform .4s ease}
.flow-rail .seg-line.fill::after{transform:scaleX(1)}

.flow-steps{display:flex;flex-direction:column}
.flow-step{min-height:66vh;display:flex;flex-direction:column;justify-content:center;padding:26px 0 26px 24px;border-left:2px solid var(--line);opacity:.4;transition:opacity .3s ease, border-color .3s ease}
.flow-step.is-active{opacity:1;border-left-color:var(--brand)}
.flow-step .no{font:700 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;color:var(--brand)}
.flow-step h3{margin:12px 0 10px;font-size:clamp(1.25rem,2vw,1.6rem);font-weight:780;letter-spacing:-.016em}
.flow-step p{color:var(--ink-2);max-width:40ch}
.flow-checks{display:flex;flex-direction:column;gap:9px;margin-top:18px}
.flow-checks li{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--ink-2)}
.flow-checks .ic{color:var(--brand);font-size:17px}
.flow-checks .ic path{stroke-dasharray:22;stroke-dashoffset:22;transition:stroke-dashoffset .24s ease}
.flow-step.is-active .flow-checks li:nth-child(1) .ic path{transition-delay:.05s}
.flow-step.is-active .flow-checks li:nth-child(2) .ic path{transition-delay:.11s}
.flow-step.is-active .flow-checks li:nth-child(3) .ic path{transition-delay:.17s}
.flow-step.is-active .flow-checks .ic path{stroke-dashoffset:0}
.flow-fallback{display:none}

/* ---------------------------------------------------------- 6 Funktionen
   Bento-Raster mit fester Belegung: keine Löcher, gleiche Zeilenhöhen.
   -------------------------------------------------------------------- */
.bento{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.tile{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;gap:12px;
  padding:24px;border-radius:18px;
  background:var(--card);border:1px solid var(--line);
  transition:transform .28s var(--ease), box-shadow .28s ease, border-color .2s ease;
}
.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-m);border-color:var(--brand-line)}
.tile:active{transform:translateY(-1px)}
/* Lichtkegel folgt dem Zeiger */
.tile::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  opacity:0;transition:opacity .3s ease;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),
             color-mix(in srgb, var(--brand) 13%, transparent), transparent 62%);
}
.tile:hover::before{opacity:1}
.tile h3{font-size:17px;font-weight:770;letter-spacing:-.014em}
.tile p{color:var(--muted);font-size:14px;line-height:1.55}
.tile .more{
  margin-top:auto;padding-top:8px;display:inline-flex;align-items:center;gap:7px;
  color:var(--brand);font-size:13.5px;font-weight:700;
}
.tile .more .ic{transition:transform .22s var(--ease)}
.tile:hover .more .ic{transform:translateX(5px)}

/* Zwei große Kacheln mit Bild */
.tile-lg{grid-column:span 2;grid-row:span 2;padding-bottom:0}
.tile-tall{grid-row:span 2;padding-bottom:0}
.tile-lg h3,.tile-tall h3{font-size:21px;letter-spacing:-.02em}
.tile-lg p,.tile-tall p{font-size:14.5px;max-width:46ch}
.tile-shot{
  position:relative;margin:8px -24px 0 0;flex:1;min-height:170px;overflow:hidden;
  border-top-left-radius:12px;
}
.tile-shot img{
  position:absolute;left:0;top:0;width:126%;max-width:none;
  border-radius:12px 0 0 0;
  border:1px solid var(--win-line);border-right:0;border-bottom:0;
  box-shadow:-10px -10px 34px rgba(15,23,34,.13);
  transition:transform .38s var(--ease);
}
.tile:hover .tile-shot img{transform:translate(-8px,-8px) scale(1.015)}
.tile-tall .tile-shot{min-height:210px}
.tile-tall .tile-shot img{width:150%}

/* Abschluss-Kachel */
.tile-cta{
  align-items:flex-start;justify-content:center;gap:14px;
  background:linear-gradient(140deg, var(--brand-soft), color-mix(in srgb, var(--violet-soft) 65%, transparent));
  border-color:var(--brand-line);
}
.tile-cta h3{font-size:19px}
.tile-cta p{color:var(--ink-2)}

/* Gestaffelt einblenden */
.js .bento .tile{opacity:0;transform:translateY(16px)}
.js .bento.is-in .tile{
  animation:tileIn .55s var(--ease) forwards;
  animation-delay:calc(var(--t) * 55ms);
}
@keyframes tileIn{to{opacity:1;transform:none}}

/* ------------------------------------------------------- 6b Passt dazu */
.next{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ncard{
  position:relative;display:flex;flex-direction:column;gap:10px;
  padding:20px;border-radius:14px;
  background:var(--card);border:1px solid var(--line);
  transition:transform .2s var(--ease), box-shadow .2s ease, border-color .2s ease;
}
.ncard:hover{transform:translateY(-3px);box-shadow:var(--shadow-m);border-color:var(--brand-line)}
.ncard strong{font-size:15.5px;font-weight:750;letter-spacing:-.012em}
.ncard p{color:var(--muted);font-size:13.5px;line-height:1.5}
.ncard .more{
  margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:7px;
  color:var(--brand);font-size:13px;font-weight:700;
}
.ncard .more .ic{transition:transform .22s var(--ease)}
.ncard:hover .more .ic{transform:translateX(5px)}

/* -------------------------------------------------------- 7 Produktbänder */
.band{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px;align-items:center}
.band + .band{margin-top:104px}
.band-copy h2{margin:16px 0 14px;font-size:clamp(1.7rem,2.9vw,2.3rem);font-weight:800;line-height:1.12;letter-spacing:-.02em;text-wrap:balance}
.band-copy > p{color:var(--ink-2)}
.checks{display:flex;flex-direction:column;gap:11px;margin:24px 0}
.checks li{display:flex;gap:11px;align-items:flex-start;font-size:15px;color:var(--ink-2)}
.checks .ic{color:var(--green);font-size:19px;margin-top:2px}
.shot{display:block;width:100%;position:relative;text-align:left}
.shot .win{transition:transform .2s var(--ease), box-shadow .2s ease}
.shot:hover .win{transform:translateY(-3px);box-shadow:var(--shadow-win)}
.shot-zoom{
  position:absolute;right:12px;bottom:12px;z-index:2;display:inline-flex;align-items:center;gap:7px;
  padding:7px 11px;border-radius:8px;
  background:color-mix(in srgb, var(--card) 90%, transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line);color:var(--ink-2);font-size:12px;font-weight:700;
  opacity:0;transform:translateY(6px);transition:opacity .18s ease, transform .18s var(--ease);
}
.shot:hover .shot-zoom,.shot:focus-visible .shot-zoom{opacity:1;transform:none}

/* ---------------------------------------------------------- 8 Companion */
.companion{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:56px;align-items:center}
.companion-points{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0 26px}
.companion-points span{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:13px;font-weight:650;color:var(--ink-2)}
.phones{display:flex;justify-content:center;align-items:flex-end}
.phone{width:31%;border-radius:22px;overflow:hidden;border:1px solid var(--win-line);background:var(--win-bg);box-shadow:var(--shadow-win);transition:transform .24s var(--ease)}
.phone:nth-child(1){transform:rotate(-5deg) translateX(16px)}
.phone:nth-child(2){z-index:2;transform:translateY(-22px) scale(1.07)}
.phone:nth-child(3){transform:rotate(5deg) translateX(-16px)}
.phone:hover{transform:translateY(-10px) scale(1.09);z-index:3}

/* ------------------------------- 9 Zielgruppen, FAQ, Ratgeber, Kaufen */
.aud{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.acard{display:flex;flex-direction:column;gap:11px;padding:24px;border-radius:14px;background:var(--card);border:1px solid var(--line);transition:transform .16s var(--ease), box-shadow .16s ease}
.acard:hover{transform:translateY(-2px);box-shadow:var(--shadow-m)}
.acard .kick{color:var(--muted);font-size:12.5px;font-weight:650}
.acard h3{font-size:19px;font-weight:790;letter-spacing:-.016em}
.acard p{color:var(--ink-2);font-size:14.5px}
.acard .tags{margin-top:auto;padding-top:8px;color:var(--muted);font-size:12.5px;font-weight:600}

.privacy{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center;padding:38px 40px;border-radius:18px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-s)}
.privacy h2{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:800;letter-spacing:-.02em;margin-bottom:10px}
.privacy p{color:var(--ink-2);max-width:58ch}

.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
.faq-item{border-bottom:1px solid var(--line);padding:4px 0}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px 0;font-size:16px;font-weight:700;cursor:pointer;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .ic{color:var(--muted);transition:transform .22s var(--ease)}
.faq-item[open] summary .ic{transform:rotate(45deg)}
.faq-item p{padding:0 0 18px;color:var(--ink-2);max-width:62ch}
.faq-item[open] p{animation:rise .3s var(--ease)}

.guides{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.gcard{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:13px;align-items:center;padding:16px 18px;border-radius:12px;background:var(--card);border:1px solid var(--line);transition:transform .16s var(--ease), border-color .16s ease}
.gcard:hover{transform:translateY(-2px)}
.gcard strong{display:block;font-size:14.5px;font-weight:700}
.gcard > span > span{display:block;color:var(--muted);font-size:13px;line-height:1.45}
.gcard > .ic:last-child{color:var(--muted);transition:transform .18s var(--ease)}
.gcard:hover > .ic:last-child{transform:translateX(4px);color:var(--brand)}

.buy{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center;padding:44px 46px;border-radius:20px;background:linear-gradient(135deg, var(--brand-soft), color-mix(in srgb, var(--violet-soft) 70%, transparent));border:1px solid var(--brand-line)}
.buy h2{font-size:clamp(1.6rem,2.7vw,2.2rem);font-weight:820;letter-spacing:-.022em;margin-bottom:10px;text-wrap:balance}
.buy p{color:var(--ink-2);max-width:56ch}

/* ------------------------------------------------------ 10 Feature-Seiten */
.fhero{position:relative;overflow:hidden;background:var(--bg-soft);border-bottom:1px solid var(--line-soft);padding:72px 0 0}
.fhero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:44px;align-items:center;perspective:1500px}
.fhero-copy > *{opacity:0}
.js .fhero.is-play .fhero-copy > *{animation:rise .52s var(--ease) forwards;animation-delay:calc(var(--i) * 70ms)}
.no-js .fhero-copy > *{opacity:1}
.crumbs{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;font-weight:600;margin-bottom:18px}
.crumbs a:hover{color:var(--brand)}
.crumbs .ic{font-size:13px}
.fhero h1{margin:18px 0 0;font-size:clamp(2rem,3.9vw,3.2rem);font-weight:820;line-height:1.07;letter-spacing:-.026em;text-wrap:balance}
.fhero .lead{margin-top:16px;color:var(--ink-2);font-size:clamp(1rem,1.35vw,1.13rem);max-width:46ch}
.fhero-stage{position:relative;padding-bottom:60px}
.js .fhero.is-play .fhero-stage .win{animation:winIn2 .9s var(--ease) .25s backwards}
@keyframes winIn2{from{opacity:0;transform:translateY(28px) scale(.96)}to{opacity:1;transform:none}}

.fpills{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.fpills span{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:12.5px;font-weight:650;color:var(--ink-2)}

.fblocks{display:flex;flex-direction:column;gap:104px}
.fblock{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px;align-items:center}
.fblock.flip .fblock-copy{order:2}
.fblock-copy h2{margin:16px 0 14px;font-size:clamp(1.5rem,2.5vw,2.05rem);font-weight:790;line-height:1.14;letter-spacing:-.02em;text-wrap:balance}
.fblock-copy > p{color:var(--ink-2)}

.frelated{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.rcard{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:13px;align-items:center;padding:16px 18px;border-radius:12px;background:var(--card);border:1px solid var(--line);transition:transform .16s var(--ease)}
.rcard:hover{transform:translateY(-2px)}
.rcard strong{display:block;font-size:14.5px;font-weight:700}
.rcard > span > span{display:block;color:var(--muted);font-size:13px;line-height:1.45}
.rcard > .ic:last-child{color:var(--muted);transition:transform .18s var(--ease)}
.rcard:hover > .ic:last-child{transform:translateX(4px);color:var(--brand)}

/* -------------------------------------------------------- 11 Fußbereich */
.footer{background:var(--bg-soft);border-top:1px solid var(--line-soft);padding:64px 0 34px}
.footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:40px}
.footer-brand p{color:var(--muted);font-size:14px;margin-top:14px;max-width:34ch}
.footer-col h3{font-size:12px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.footer-col a{display:block;padding:5px 0;color:var(--ink-2);font-size:14.5px;transition:color .16s ease}
.footer-col a:hover{color:var(--brand)}
.footer-bottom{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;margin-top:48px;padding-top:24px;border-top:1px solid var(--line);color:var(--muted);font-size:13.5px}
.footer-bottom a{color:var(--brand)}

/* --------------------------------------------------------- 12 Lightbox */
.lightbox{width:min(1180px, 94vw);max-width:none;padding:0;border:0;border-radius:16px;background:var(--card);color:var(--ink);box-shadow:var(--shadow-win)}
.lightbox::backdrop{background:rgba(6,10,16,.72);backdrop-filter:blur(6px)}
.lightbox[open]{animation:rise .24s var(--ease)}
.lightbox-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 18px;border-bottom:1px solid var(--line)}
.lightbox-bar span{font-size:13.5px;font-weight:650;color:var(--ink-2)}
.lightbox-bar button{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;color:var(--muted)}
.lightbox-bar button:hover{background:var(--bg-sunken);color:var(--ink)}
.lightbox img{width:100%;border-radius:0 0 16px 16px}

/* --------------------------------------------------- 13 Schmale Fenster */
@media (max-width:1080px){
  .nav-main{display:none}
  /* Auch das Aufklapp-Panel entfernen, nicht nur seinen Auslöser: mit
     visibility:hidden bleibt es im Layout, ist durch die 270-px-Spalte und
     das Dreierraster rund 600 px breit und erzeugt so eine leere Scrollfläche
     rechts neben der Seite. */
  .mega{display:none}
  .burger{display:grid}
  .theme{order:2}
  .nav{gap:14px}
  .brand{margin-right:auto}
  .nav-side .btn:not(.btn-primary){display:none}

  .hero-grid{grid-template-columns:1fr;gap:0;padding-top:56px}
  .hero-copy{padding-bottom:8px}
  .hero-lead{max-width:52ch}
  .hero-stage{height:min(430px,84vw);margin-top:34px;align-self:auto}
  .hero-win{width:116%;transform:rotateY(5deg)}
  .kpi{left:8px;bottom:44px}

  .flow{grid-template-columns:1fr;gap:0}
  .flow-sticky{display:none}
  .flow-steps{gap:14px}
  .flow-step{min-height:0;border-left:0;padding:0;opacity:1}
  .flow-step + .flow-step{margin-top:14px}
  .flow-fallback{display:block;margin-top:18px;border-radius:var(--radius);overflow:hidden}

  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile-lg{grid-column:span 2;grid-row:span 1}
  .tile-tall{grid-column:span 2;grid-row:span 1}
  .tile-tall .tile-shot img{width:126%}
  .next{grid-template-columns:repeat(2,minmax(0,1fr))}
  .band,.fblock{grid-template-columns:1fr;gap:34px}
  .band + .band{margin-top:72px}
  .band.flip .band-copy,.fblock.flip .fblock-copy{order:2}
  .fblocks{gap:72px}
  .fhero-grid{grid-template-columns:1fr;gap:32px}
  .fhero-stage{padding-bottom:40px}
  .companion{grid-template-columns:1fr;gap:38px}
  .aud,.frelated,.guides{grid-template-columns:repeat(2,minmax(0,1fr))}
  .faq{grid-template-columns:1fr;gap:28px}
  .privacy,.buy{grid-template-columns:1fr;gap:22px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:680px){
  .section{padding:72px 0}
  .hero-stage{height:min(340px,86vw)}
  .hero-win{width:124%}
  .kpi{left:4px;bottom:26px;padding:10px 13px}
  .kpi strong{font-size:20px}
  .seg{flex-wrap:wrap}
  .seg-pill{display:none}
  .seg button[aria-selected="true"]{background:var(--brand-soft)}
  .bento{grid-template-columns:1fr}
  .tile-lg,.tile-tall{grid-column:span 1}
  .next{grid-template-columns:1fr}
  .aud,.frelated,.guides,.footer-grid,.next{grid-template-columns:1fr}
  .privacy,.buy{padding:28px 24px}
  .trust{gap:10px 20px}
  .fblocks{gap:56px}
}

/* ------------------------------------------------ 14 Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .hero-copy > *,.fhero-copy > *{opacity:1}
  .js .reveal{opacity:1;transform:none}
  .aurora{animation:none}
  .tile:hover,.ncard:hover,.acard:hover,.gcard:hover,.rcard:hover,.phone:hover{transform:none}
  .js .bento .tile{opacity:1;transform:none;animation:none}
}

/* ==========================================================================
   15 — Companion: eigene Landingpage fürs iPhone
   Die Screenshots sind fertige App-Store-Poster (9:19,5, eigener Hintergrund,
   eigener Gerätrahmen). Sie kommen deshalb ausschließlich in die Galerie —
   nie in zweispaltige Textblöcke, dort wirken sie zu hochkant.
   ========================================================================== */
.cp-hero{
  position:relative;overflow:hidden;text-align:center;
  padding:88px 0 0;
  background:
    radial-gradient(120% 90% at 50% -20%, color-mix(in srgb, var(--brand) 26%, transparent), transparent 60%),
    var(--bg-soft);
  border-bottom:1px solid var(--line-soft);
}
.cp-hero-copy{position:relative;z-index:1;max-width:56ch;margin:0 auto}
.cp-hero-copy > *{opacity:0}
.js .cp-hero.is-play .cp-hero-copy > *{animation:rise .55s var(--ease) forwards;animation-delay:calc(var(--i) * 75ms)}
.no-js .cp-hero-copy > *{opacity:1}
.cp-hero h1{
  margin:20px 0 0;font-size:clamp(2.2rem,4.6vw,3.7rem);font-weight:830;
  line-height:1.05;letter-spacing:-.028em;text-wrap:balance;
}
.cp-hero h1 em{display:block;font-style:normal;color:var(--brand);margin-top:.1em}
.cp-hero .lead{margin:18px auto 0;color:var(--ink-2);font-size:clamp(1.02rem,1.4vw,1.16rem);max-width:46ch}
.cp-hero .hero-actions{justify-content:center}
.cp-req-note{
  display:inline-flex;align-items:center;gap:9px;margin-top:16px;
  padding:8px 14px;border-radius:999px;
  background:var(--card);border:1px solid var(--line);
  color:var(--muted);font-size:12.5px;font-weight:600;
}
.cp-req-note .ic{color:var(--brand);font-size:15px}

/* Bildschirm-Galerie */
.cp-rail-wrap{position:relative;margin-top:56px}
.cp-rail{
  display:flex;gap:22px;
  padding:8px 0 44px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.cp-rail::-webkit-scrollbar{display:none}
.cp-rail::before,.cp-rail::after{content:"";flex:0 0 max(20px, calc((100vw - 1180px) / 2))}
/* Ausrichtung über die Bildhöhe, nicht über die Kartenbreite: der
   Widgets-Bildschirm ist breiter zugeschnitten als die übrigen, und ein
   erzwungenes Seitenverhältnis würde ihm die Widgets abschneiden. */
.cp-card{
  flex:0 0 auto;scroll-snap-align:center;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  transition:transform .35s var(--ease);
}
.cp-card img{
  height:var(--cp-h, 540px);width:auto;max-width:none;display:block;border-radius:26px;
  border:1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  box-shadow:0 26px 60px rgba(15,23,34,.28);
}
.cp-card figcaption{width:248px;padding:0 4px}
.cp-card strong{display:block;font-size:15px;font-weight:750;letter-spacing:-.012em}
.cp-card span{display:block;color:var(--muted);font-size:13.5px;line-height:1.5;margin-top:3px}
.cp-card:hover{transform:translateY(-6px)}
.js .cp-rail .cp-card{opacity:0;transform:translateY(24px)}
.js .cp-rail.is-in .cp-card{animation:tileIn .6s var(--ease) forwards;animation-delay:calc(var(--t) * 70ms)}

.cp-nav{
  position:absolute;top:calc(50% - 60px);z-index:2;
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:color-mix(in srgb, var(--card) 92%, transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line);color:var(--ink-2);
  box-shadow:var(--shadow-s);
  transition:transform .16s var(--ease), color .16s ease, opacity .2s ease;
}
.cp-nav:hover{transform:scale(1.08);color:var(--brand)}
.cp-nav[disabled]{opacity:.35;pointer-events:none}
.cp-nav.prev{left:12px}
.cp-nav.next{right:12px}

/* Mac → iCloud → iPhone
   Die Verbindung sitzt als Segment am jeweils folgenden Schritt. Dadurch ist
   sie immer an dessen Plättchen ausgerichtet und kann nicht verrutschen. */
.cp-sync{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;align-items:start}
.cp-sync-step{text-align:center;padding:0 18px;position:relative}
.cp-sync-step .sym{position:relative;z-index:1;margin:0 auto 18px}
.cp-sync-step strong{display:block;font-size:17px;font-weight:770;margin-bottom:7px}
.cp-sync-step p{color:var(--muted);font-size:14px;max-width:30ch;margin:0 auto}

.cp-sync-step + .cp-sync-step::before{
  content:"";position:absolute;z-index:0;
  top:28px;                            /* Mitte des 58-px-Plättchens */
  left:calc(-50% + 42px);              /* endet hinter dem vorigen Plättchen */
  right:calc(50% + 42px);              /* stoppt vor dem eigenen */
  height:2px;border-radius:2px;
  background:linear-gradient(90deg,
             color-mix(in srgb, var(--brand) 28%, transparent), var(--brand));
  transform:scaleX(0);transform-origin:left center;
  transition:transform .75s var(--ease);
}
.cp-sync.is-in .cp-sync-step + .cp-sync-step::before{transform:scaleX(1)}
.cp-sync.is-in .cp-sync-step:nth-child(3)::before{transition-delay:.28s}

/* Spitze am Ende jedes Segments */
.cp-sync-step + .cp-sync-step::after{
  content:"";position:absolute;z-index:0;
  top:23px;right:calc(50% + 40px);
  width:9px;height:9px;
  border-top:2px solid var(--brand);border-right:2px solid var(--brand);
  border-radius:1px;
  transform:rotate(45deg) scale(0);transform-origin:center;
  transition:transform .3s var(--ease) .5s;
}
.cp-sync.is-in .cp-sync-step + .cp-sync-step::after{transform:rotate(45deg) scale(1)}
.cp-sync.is-in .cp-sync-step:nth-child(3)::after{transition-delay:.78s}

/* Funktionsraster ohne Bilder */
.cp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.cp-feat{
  display:flex;flex-direction:column;gap:11px;padding:24px;border-radius:14px;
  background:var(--card);border:1px solid var(--line);
  transition:transform .18s var(--ease), box-shadow .18s ease, border-color .18s ease;
}
.cp-feat:hover{transform:translateY(-3px);box-shadow:var(--shadow-m);border-color:var(--brand-line)}
.cp-feat strong{font-size:16px;font-weight:750;letter-spacing:-.012em}
.cp-feat p{color:var(--muted);font-size:14px;line-height:1.55}

/* Voraussetzungen */
.cp-req{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:center;
  padding:30px 34px;border-radius:18px;
  background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-s);
}
.cp-req h2{font-size:1.3rem;font-weight:780;letter-spacing:-.016em;margin-bottom:8px}
.cp-req p{color:var(--ink-2);max-width:64ch}
.cp-req ul{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.cp-req li{
  display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;
  background:var(--bg-soft);border:1px solid var(--line);font-size:12.5px;font-weight:650;color:var(--ink-2);
}
.cp-req li .ic{color:var(--green);font-size:15px}

@media (max-width:1080px){
  .cp-sync{grid-template-columns:1fr;gap:34px}
  .cp-sync-step + .cp-sync-step::before,
  .cp-sync-step + .cp-sync-step::after{display:none}
  .cp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cp-req{grid-template-columns:1fr;gap:16px}
  .cp-nav{display:none}
}
@media (max-width:680px){
  .cp-hero{padding-top:64px}
  .cp-grid{grid-template-columns:1fr}
  .cp-card{--cp-h:452px}
  .cp-card figcaption{width:212px}
  .cp-req{padding:24px}
}
@media (prefers-reduced-motion: reduce){
  .cp-hero-copy > *{opacity:1}
  .js .cp-rail .cp-card{opacity:1;transform:none;animation:none}
  .cp-rail{scroll-behavior:auto}
  .cp-sync-step + .cp-sync-step::before{transform:scaleX(1)}
  .cp-sync-step + .cp-sync-step::after{transform:rotate(45deg) scale(1)}
  .cp-card:hover,.cp-feat:hover{transform:none}
}

/* ==========================================================================
   16 — Feature-Unterseiten, neues Layout
   Statt alternierender Zweispalter: ein Showcase mit Schrittliste links und
   mitlaufendem Fenster rechts, danach ein Detailraster und kurze Fragen.
   ========================================================================== */

/* Held etwas kompakter */
.fhero{padding:64px 0 0}
.fhero-grid{gap:52px;align-items:center}
.fpills{gap:7px;margin-top:22px}
.fpills span{background:transparent;border-color:var(--line);color:var(--muted)}

/* --- Showcase ----------------------------------------------------------- */
.fx-show{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:52px;align-items:start}
.fx-steps{display:flex;flex-direction:column;gap:6px}
.fx-step{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;
  width:100%;text-align:left;padding:20px 20px 20px 22px;border-radius:14px;
  border:1px solid transparent;background:transparent;
  transition:background-color .28s ease, border-color .28s ease;
}
.fx-step::before{
  content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;border-radius:2px;
  background:var(--line);transition:background-color .28s ease, transform .28s var(--ease);
  transform:scaleY(.55);transform-origin:center;
}
.fx-step:hover{background:var(--bg-soft)}
.fx-step.is-on{background:var(--card);border-color:var(--line)}
.fx-step.is-on::before{background:var(--brand);transform:scaleY(1)}
.fx-step-n{
  font:700 12px/1.9 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.1em;color:var(--muted);transition:color .28s ease;
}
.fx-step.is-on .fx-step-n{color:var(--brand)}
.fx-step strong{
  display:block;font-size:16.5px;font-weight:750;letter-spacing:-.014em;
  color:var(--ink-2);transition:color .28s ease;text-wrap:balance;
}
.fx-step.is-on strong{color:var(--ink)}
/* Beschreibung fährt auf — 0fr auf 1fr statt max-height-Trickserei */
.fx-step-more{
  display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .38s var(--ease), opacity .28s ease;
}
.fx-step.is-on .fx-step-more{grid-template-rows:1fr;opacity:1}
.fx-step-more > span{overflow:hidden;display:block}
.fx-step-more p{padding-top:9px;color:var(--ink-2);font-size:14.5px;line-height:1.6}

.fx-stage{position:sticky;top:calc(var(--header-h) + 32px)}
.fx-shots{position:relative}
.fx-shots img{width:100%;transition:opacity .34s ease, transform .34s var(--ease)}
.fx-shots img:not(.is-on){position:absolute;inset:0;opacity:0;transform:scale(.99);pointer-events:none}
.fx-shots img.is-on{position:relative;opacity:1;transform:none}
.fx-stage .win{transition:box-shadow .3s ease}
.fx-mobile-shot{display:none}

/* --- Detailraster -------------------------------------------------------- */
.fx-details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.fx-detail{
  display:flex;gap:13px;align-items:flex-start;
  padding:22px 24px;background:var(--card);
  transition:background-color .2s ease;
}
.fx-detail:hover{background:var(--bg-soft)}
.fx-detail .ic{color:var(--green);font-size:19px;margin-top:1px}
.fx-detail span{font-size:14.5px;line-height:1.55;color:var(--ink-2)}

/* --- Kurze Fragen -------------------------------------------------------- */
.fx-faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.fx-q{
  padding:22px 24px;border-radius:14px;
  background:var(--card);border:1px solid var(--line);
  transition:border-color .2s ease, transform .2s var(--ease);
}
.fx-q:hover{border-color:var(--brand-line);transform:translateY(-2px)}
.fx-q h3{font-size:15.5px;font-weight:750;letter-spacing:-.012em;margin-bottom:8px}
.fx-q p{color:var(--muted);font-size:14px;line-height:1.6}

@media (max-width:1080px){
  .fx-show{grid-template-columns:1fr;gap:26px}
  .fx-stage{display:none}
  .fx-step{padding:20px}
  .fx-step-more{grid-template-rows:1fr;opacity:1}
  .fx-step{background:var(--card);border-color:var(--line)}
  .fx-step::before{background:var(--brand);transform:scaleY(1)}
  .fx-mobile-shot{display:block;margin-top:16px;border-radius:var(--radius);overflow:hidden}
  .fx-details{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fx-faq{grid-template-columns:1fr}
}
@media (max-width:680px){
  .fx-details{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
  .fx-step-more{transition:none}
  .fx-q:hover{transform:none}
}

/* ==========================================================================
   17 — Vorlagen-Galerie (PDF-Layouts)
   Ein Umschalter über einem Fenster: die sechs Vorlagen im direkten Vergleich.
   ========================================================================== */
.vor{display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,1fr);gap:40px;align-items:start}
.vor-list{display:flex;flex-direction:column;gap:6px}
.vor-btn{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;
  width:100%;text-align:left;padding:16px 18px;border-radius:13px;
  border:1px solid transparent;background:transparent;
  transition:background-color .24s ease, border-color .24s ease;
}
.vor-btn::before{
  content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;border-radius:2px;
  background:var(--line);transform:scaleY(.5);transform-origin:center;
  transition:background-color .24s ease, transform .24s var(--ease);
}
.vor-btn:hover{background:var(--bg-soft)}
.vor-btn.is-on{background:var(--card);border-color:var(--line)}
.vor-btn.is-on::before{background:var(--brand);transform:scaleY(1)}
.vor-btn .sym{width:34px;height:34px;border-radius:9px}
.vor-btn strong{display:block;font-size:15.5px;font-weight:750;color:var(--ink-2);transition:color .24s ease}
.vor-btn.is-on strong{color:var(--ink)}
.vor-btn span span{display:block;color:var(--muted);font-size:13px;line-height:1.5;margin-top:2px}

.vor-stage{position:sticky;top:calc(var(--header-h) + 32px)}
.vor-shots{position:relative}
.vor-shots img{width:100%;transition:opacity .32s ease, transform .32s var(--ease)}
.vor-shots img:not(.is-on){position:absolute;inset:0;opacity:0;transform:scale(.99);pointer-events:none}
.vor-shots img.is-on{position:relative;opacity:1;transform:none}

@media (max-width:1080px){
  .vor{grid-template-columns:1fr;gap:22px}
  .vor-stage{position:static}
  .vor-list{flex-direction:row;overflow-x:auto;gap:8px;padding-bottom:6px;scrollbar-width:none}
  .vor-list::-webkit-scrollbar{display:none}
  .vor-btn{flex:0 0 auto;width:auto;grid-template-columns:auto;padding:10px 14px}
  .vor-btn::before{display:none}
  .vor-btn .sym,.vor-btn span span{display:none}
  .vor-btn.is-on{border-color:var(--brand-line)}
}

/* ==========================================================================
   18 — App-Aufnahmen
   Die Screenshots bringen den macOS-Fensterrahmen selbst mit, inklusive
   runder Ecken als Transparenz. Deshalb kein zweiter Rahmen darum, sondern
   ein drop-shadow, der der Fensterform folgt. Jede Aufnahme ist anklickbar.
   ========================================================================== */
.appshot{
  display:block;width:100%;position:relative;text-align:left;padding:0;
  background:none;border:0;cursor:zoom-in;
}
.appshot img{
  width:100%;display:block;
  filter:drop-shadow(0 22px 48px rgba(15,23,34,.20)) drop-shadow(0 2px 6px rgba(15,23,34,.10));
  transition:transform .25s var(--ease), filter .25s ease;
}
.appshot:hover img{
  transform:translateY(-3px);
  filter:drop-shadow(0 30px 62px rgba(15,23,34,.26)) drop-shadow(0 3px 8px rgba(15,23,34,.12));
}
:root[data-theme="dark"] .appshot img{filter:drop-shadow(0 22px 52px rgba(0,0,0,.62))}
:root[data-theme="dark"] .appshot:hover img{filter:drop-shadow(0 30px 66px rgba(0,0,0,.72))}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .appshot img{filter:drop-shadow(0 22px 52px rgba(0,0,0,.62))}
  :root:not([data-theme="light"]) .appshot:hover img{filter:drop-shadow(0 30px 66px rgba(0,0,0,.72))}
}
.appshot .zoom{
  position:absolute;right:14px;bottom:16px;z-index:2;
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 12px;border-radius:9px;
  background:color-mix(in srgb, var(--card) 92%, transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line);color:var(--ink-2);
  font-size:12.5px;font-weight:700;
  opacity:0;transform:translateY(6px);
  transition:opacity .18s ease, transform .18s var(--ease);
}
.appshot:hover .zoom,.appshot:focus-visible .zoom{opacity:1;transform:none}

/* Mehrere Aufnahmen übereinander (Showcase, Vorlagen, Held) */
.appshot-stack{position:relative}
.appshot-stack img{transition:opacity .32s ease, transform .32s var(--ease)}
.appshot-stack img:not(.is-on){position:absolute;inset:0;opacity:0;transform:scale(.995);pointer-events:none}
.appshot-stack img.is-on{position:relative;opacity:1;transform:none}

/* Lightbox: Aufnahme groß, ohne zweiten Rahmen */
.lightbox{background:var(--card)}
.lightbox-body{padding:18px;background:var(--bg-soft)}
.lightbox-body img{width:100%;border-radius:0;filter:drop-shadow(0 18px 44px rgba(15,23,34,.24))}
@media (max-width:680px){ .lightbox-body{padding:10px} }


/* Anpassungen, seit die Aufnahmen ihren Fensterrahmen selbst mitbringen */
.hero-win{border-radius:0;overflow:visible;border:0;background:none;box-shadow:none}
.hero-win img{width:100%}
.hero-stage .appshot .zoom{right:auto;left:18px;bottom:18px}
.flow-view{border-radius:0;overflow:visible;border:0;background:none;box-shadow:none;display:block}
.flow-shots{position:relative;aspect-ratio:16/10}
.flow-shots img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;
  filter:drop-shadow(0 18px 40px rgba(15,23,34,.18));
}
:root[data-theme="dark"] .flow-shots img{filter:drop-shadow(0 18px 44px rgba(0,0,0,.6))}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .flow-shots img{filter:drop-shadow(0 18px 44px rgba(0,0,0,.6))}
}
.tile-shot img{border:0;border-radius:0;box-shadow:none;filter:drop-shadow(-8px -8px 26px rgba(15,23,34,.16))}
:root[data-theme="dark"] .tile-shot img{filter:drop-shadow(-8px -8px 26px rgba(0,0,0,.55))}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .tile-shot img{filter:drop-shadow(-8px -8px 26px rgba(0,0,0,.55))}
}
.fx-mobile-shot{border:0;border-radius:0;box-shadow:none;filter:drop-shadow(0 14px 32px rgba(15,23,34,.18))}
.mc-frame{border:0;background:none;box-shadow:none;border-radius:0}
.mc-frame-bar{display:none}

/* ==========================================================================
   19 — Ratgeber
   Artikel mit Fließtext links und einer mitlaufenden Spalte rechts.
   ========================================================================== */
.rg-hero{position:relative;overflow:hidden;background:var(--bg-soft);border-bottom:1px solid var(--line-soft);padding:56px 0 44px}
.rg-hero-inner{position:relative;z-index:1;max-width:62ch}
.rg-hero-inner > *{opacity:0}
.js .rg-hero.is-play .rg-hero-inner > *{animation:rise .5s var(--ease) forwards;animation-delay:calc(var(--i) * 70ms)}
.no-js .rg-hero-inner > *{opacity:1}
.rg-hero h1{margin:18px 0 0;font-size:clamp(1.9rem,3.7vw,3rem);font-weight:820;line-height:1.08;letter-spacing:-.026em;text-wrap:balance}
.rg-hero .lead{margin-top:16px;color:var(--ink-2);font-size:clamp(1.02rem,1.35vw,1.14rem)}
.rg-meta{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:20px;color:var(--muted);font-size:13.5px;font-weight:600}
.rg-meta span{display:inline-flex;align-items:center;gap:8px}
.rg-meta span + span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--line);margin-right:12px}

.rg-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;align-items:start}

/* Fließtext */
.prose h2{
  margin:44px 0 14px;font-size:clamp(1.35rem,2.2vw,1.75rem);font-weight:790;
  line-height:1.18;letter-spacing:-.018em;text-wrap:balance;scroll-margin-top:calc(var(--header-h) + 20px);
}
.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 16px;color:var(--ink-2);font-size:16.5px;line-height:1.72;max-width:70ch}
.prose p:last-child{margin-bottom:0}
.prose a{color:var(--brand);font-weight:650;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.prose a:hover{color:var(--brand-ink)}
.prose strong{color:var(--ink);font-weight:700}

.rg-shot{margin:32px 0 40px}
.rg-quellen{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;
  margin:36px 0 0;padding:18px 20px;border-radius:13px;
  background:var(--bg-soft);border:1px solid var(--line-soft);
}
.rg-quellen strong{display:block;font-size:14px;margin-bottom:4px}
.rg-quellen p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.6}
.rg-quellen p a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.rg-quellen .ic{color:var(--brand);font-size:19px;margin-top:2px}

/* Mitlaufende Spalte */
.rg-side{position:sticky;top:calc(var(--header-h) + 28px);display:flex;flex-direction:column;gap:16px}
.rg-card{padding:22px;border-radius:15px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-s)}
.rg-card strong{display:block;font-size:15.5px;font-weight:770;margin-bottom:7px}
.rg-card p{color:var(--muted);font-size:14px;line-height:1.55;margin-bottom:14px}
.rg-card ul{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.rg-card li{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink-2)}
.rg-card li .ic{color:var(--green);font-size:16px}
.rg-card .btn{width:100%}
.rg-toc a{
  display:block;padding:8px 0;color:var(--ink-2);font-size:14px;line-height:1.45;
  border-bottom:1px solid var(--line-soft);transition:color .16s ease;
}
.rg-toc a:last-child{border-bottom:0}
.rg-toc a:hover{color:var(--brand)}
.rg-toc strong{margin-bottom:4px}

@media (max-width:1080px){
  .rg-layout{grid-template-columns:1fr;gap:34px}
  .rg-side{position:static}
  .rg-toc{display:none}
}


/* ==========================================================================
   20 — Kopfleiste auf schmalen Geräten
   Marke + Menütaste brauchen 190 px. Farbschema und App-Store-Knopf zusammen
   brauchen weitere 200 px — auf einem iPhone mit 390 px passt das nicht,
   die Beschriftung bricht um. Beides wandert deshalb ins Menü.
   ========================================================================== */
@media (max-width:680px){
  .nav{gap:12px}
  .nav-side .theme,
  .nav-side .btn{display:none}
  .brand{font-size:16px;gap:9px;min-width:0}
  .brand img{width:30px;height:30px}
  .burger{width:38px;height:38px}

  .mobile-top{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding-bottom:14px;margin-bottom:6px;border-bottom:1px solid var(--line-soft);
  }
  .mobile-top .theme{display:inline-flex}
  .mobile-top span{color:var(--muted);font-size:13px;font-weight:650}

  /* Trennpunkt weglassen, sonst steht er beim Umbruch allein am Zeilenanfang */
  .rg-meta{gap:2px 0;flex-direction:column;align-items:flex-start}
  .rg-meta span + span::before{display:none}
}
@media (min-width:681px){
  .mobile-top{display:none}
}


/* ==========================================================================
   21 — Gestaffeltes Einblenden für gestapelte Listen
   Auf dem Telefon steht alles untereinander und war bisher auf einen Schlag
   da. Jede Gruppe blendet ihre Kinder nun nacheinander ein, sobald sie in
   den Blick kommt. Der Index kommt aus dem Skript, damit auch Gruppen mit
   wechselnder Anzahl versorgt sind.
   ========================================================================== */
.js [data-stagger] > *{opacity:0;transform:translateY(14px)}
.js [data-stagger].is-in > *{
  animation:tileIn .5s var(--ease) forwards;
  animation-delay:calc(var(--t, 0) * 60ms);
}

/* Die Aufnahme im Schritt kommt einen Tick später und leicht heranfahrend */
.js .fx-steps[data-stagger] .fx-mobile-shot{opacity:0;transform:translateY(16px) scale(.98)}
.js .fx-steps[data-stagger].is-in .fx-mobile-shot{
  animation:shotIn .55s var(--ease) forwards;
  animation-delay:calc(var(--t, 0) * 60ms + 120ms);
}
@keyframes shotIn{to{opacity:1;transform:none}}

/* Die Ziffer und die Kante wachsen mit */
.js .fx-steps[data-stagger] .fx-step::before{transform:scaleY(0)}
.js .fx-steps[data-stagger].is-in .fx-step::before{
  animation:railIn .5s var(--ease) forwards;
  animation-delay:calc(var(--t, 0) * 60ms + 80ms);
}
@keyframes railIn{to{transform:scaleY(1)}}

@media (prefers-reduced-motion: reduce){
  .js [data-stagger] > *,
  .js .fx-steps[data-stagger] .fx-mobile-shot{opacity:1;transform:none;animation:none}
  .js .fx-steps[data-stagger] .fx-step::before{transform:scaleY(1);animation:none}
}