/* ═══════════════════════════════════════════════════════════════════════════
   Mobbros — Verkaufs-Site für JTL-Templates & Editor
   Helles, ruhiges Design. Keine Hintergrund-Animation, kein WebGL.
   Bewegung nur dort, wo sie Bedeutung trägt: sanftes Einblenden beim Scrollen
   und ein Anheben beim Überfahren.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Flächen */
  --bg:      #FFFFFF;
  --bg-2:    #F7F8FB;   /* getönte Sektionen */
  --bg-3:    #EEF1F6;   /* Chips, Felder     */

  /* Schrift */
  --ink:     #0C0E14;
  --ink-2:   #4E5566;
  --ink-3:   #838B9C;

  /* Linien */
  --line:    #E7E9F0;
  --line-2:  #D7DBE5;

  /* Akzent */
  --v:       #5B3DF5;
  --v-dark:  #4A2FD8;
  --v-soft:  #EFEBFF;
  --c:       #0891B2;
  --c-soft:  #E2F5FA;
  --w:       #D97706;
  --grad:    linear-gradient(100deg, #5B3DF5, #0891B2);

  /* Tiefe — flach und weich, nie schwer */
  --sh-1: 0 1px 2px rgba(16,24,40,.05);
  --sh-2: 0 1px 3px rgba(16,24,40,.06), 0 8px 24px -10px rgba(16,24,40,.10);
  --sh-3: 0 2px 6px rgba(16,24,40,.07), 0 22px 48px -18px rgba(16,24,40,.18);
  --sh-v: 0 10px 34px -12px rgba(91,61,245,.45);

  --r:    12px;
  --r-l:  18px;
  --r-xl: 24px;

  --wrap: 1200px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --disp: 'Space Grotesk', 'Inter', -apple-system, 'Segoe UI', sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 17px/1.62 var(--font);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--disp); font-weight:600; letter-spacing:-.032em; line-height:1.06;
  margin:0; color:var(--ink); }
h1{ font-size:clamp(2.3rem, 4.2vw, 3.5rem); }
h2{ font-size:clamp(1.9rem, 3.6vw, 2.9rem); line-height:1.1; }
h3{ font-size:1.18rem; letter-spacing:-.018em; }
p{ margin:0; }
code{ font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace; font-size:.85em;
  background:var(--bg-3); border-radius:5px; padding:.12em .4em; color:var(--ink-2); }
::selection{ background:#DED6FF; color:#1A1140; }
[hidden]{ display:none !important; }

.wrap{ width:min(100% - 2.6rem, var(--wrap)); margin-inline:auto; }
.wrap-narrow{ width:min(100% - 2.6rem, 780px); }
.grad{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sr,.skip{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip:focus{ position:fixed; top:10px; left:10px; width:auto; height:auto; clip:auto; z-index:999;
  background:var(--v); color:#fff; padding:.7rem 1.1rem; border-radius:10px; }

/* ────────────────────────────────────────────── Einblenden beim Scrollen */
.reveal{ opacity:0; transform:translate3d(0,16px,0);
  transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.07s } .reveal[data-d="2"]{ transition-delay:.14s }
.reveal[data-d="3"]{ transition-delay:.21s } .reveal[data-d="4"]{ transition-delay:.28s }
.reveal[data-d="5"]{ transition-delay:.35s }

/* ───────────────────────────────────────────────────────────────── Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font:600 .94rem/1 var(--font); letter-spacing:-.005em; padding:.88rem 1.4rem;
  border-radius:10px; border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:background .22s, border-color .22s, color .22s, box-shadow .22s, transform .22s var(--ease);
}
.btn-lg{ padding:1.02rem 1.7rem; font-size:1rem; }
.btn-sm{ padding:.58rem 1rem; font-size:.85rem; }
.btn-block{ display:flex; width:100%; }

.btn-primary{ background:var(--v); color:#fff; box-shadow:var(--sh-v); }
.btn-primary:hover{ background:var(--v-dark); transform:translateY(-1px);
  box-shadow:0 14px 40px -12px rgba(91,61,245,.55); }
.btn-primary:active{ transform:none; }

.btn-line{ background:#fff; border-color:var(--line-2); color:var(--ink); box-shadow:var(--sh-1); }
.btn-line:hover{ border-color:var(--ink-3); transform:translateY(-1px); box-shadow:var(--sh-2); }

.btn-ghost{ color:var(--ink-2); padding-inline:.9rem; }
.btn-ghost:hover{ color:var(--ink); background:var(--bg-3); }

.btn-invert{ background:#fff; color:var(--v); }
.btn-invert:hover{ background:#F2EFFF; }

/* ────────────────────────────────────────────────────────────────── Header */
.nav{ position:fixed; inset:0 0 auto; z-index:80; background:rgba(255,255,255,.72);
  backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid transparent; transition:border-color .3s, box-shadow .3s; }
.nav.stuck{ border-bottom-color:var(--line); box-shadow:var(--sh-1); }
.nav-in{ display:flex; align-items:center; gap:1.5rem; height:72px; }
.brand{ display:inline-flex; align-items:center; gap:.55rem; font-family:var(--disp);
  font-weight:600; font-size:1.12rem; letter-spacing:-.03em; }
.brand-mark{ display:grid; place-items:center; }
.brand-txt em{ font-style:normal; color:var(--v); }
.nav-links{ display:flex; gap:1.6rem; margin-left:auto; font-size:.93rem; color:var(--ink-2);
  font-weight:500; }
.nav-links a{ padding:.3rem 0; transition:color .22s; }
.nav-links a:hover, .nav-links a.is-here{ color:var(--ink); }
.nav-cta{ display:flex; align-items:center; gap:.4rem; margin-left:1rem; }

.burger{ display:none; width:42px; height:42px; margin-left:auto; background:#fff;
  border:1px solid var(--line-2); border-radius:11px; cursor:pointer; padding:0; }
.burger span{ display:block; width:17px; height:1.7px; background:var(--ink); margin:3.6px auto;
  border-radius:2px; transition:transform .3s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.3px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.3px) rotate(-45deg); }

.mobmenu{ position:fixed; inset:72px 0 auto; z-index:79; background:#fff;
  border-bottom:1px solid var(--line); box-shadow:var(--sh-2);
  padding:.8rem 1.3rem 1.6rem; display:flex; flex-direction:column; }
.mobmenu a{ padding:.85rem .3rem; font-size:1.02rem; font-weight:500; border-bottom:1px solid var(--line); }
.mobmenu .mob-btn{ margin-top:1rem; border-bottom:0; justify-content:center; }

/* ──────────────────────────────────────────────────────────────────── Hero */
.hero{ position:relative; padding:9.5rem 0 4rem; overflow:hidden;
  background:linear-gradient(180deg,#FBFBFE 0%, #F6F7FC 42%, var(--bg) 100%); }
.hero::before{ content:""; position:absolute; inset:-30% -10% auto -10%; height:70%;
  background:radial-gradient(60% 60% at 70% 40%, rgba(91,61,245,.10), transparent 70%),
             radial-gradient(50% 50% at 20% 30%, rgba(8,145,178,.07), transparent 70%);
  pointer-events:none; }
.hero-in{ position:relative; display:grid; grid-template-columns:1.12fr 1fr; gap:3rem;
  align-items:center; }

.eyebrow{ display:inline-flex; align-items:center; gap:.55rem; font-size:.78rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-2);
  background:#fff; border:1px solid var(--line); border-radius:999px; padding:.45rem .9rem;
  box-shadow:var(--sh-1); margin-bottom:1.6rem; }
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:#16A34A; }

.lede{ font-size:clamp(1.02rem,1.4vw,1.16rem); color:var(--ink-2); max-width:52ch; margin-top:1.4rem; }
.lede strong{ color:var(--ink); font-weight:600; }
.hero-btns{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2.1rem; }
.hero-trust{ list-style:none; padding:0; margin:2.2rem 0 0; display:flex; flex-wrap:wrap;
  gap:.5rem 1.5rem; font-size:.88rem; color:var(--ink-3); }
.hero-trust li{ position:relative; padding-left:1.2rem; }
.hero-trust li::before{ content:"✓"; position:absolute; left:0; color:#16A34A; font-weight:700; }

/* Statische Produktansicht */
.hero-shot{ position:relative; height:min(30vw,420px); min-height:330px; }
.shot{ position:absolute; border-radius:var(--r-l); overflow:hidden; background:#fff;
  border:1px solid var(--line); }
.shot-front{ width:82%; right:0; top:8%; box-shadow:var(--sh-3); z-index:3; }
.shot-back-1{ width:62%; left:0; top:0; opacity:.9; box-shadow:var(--sh-2); z-index:2; }
.shot-back-2{ width:52%; left:6%; bottom:0; opacity:.75; box-shadow:var(--sh-2); z-index:1; }

/* Kennzahlen */
.hero-stats{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  margin-top:4.5rem; background:var(--line); border:1px solid var(--line);
  border-radius:var(--r-l); overflow:hidden; box-shadow:var(--sh-1); }
.stat{ background:#fff; padding:1.4rem 1.3rem; }
.stat b{ display:block; font-family:var(--disp); font-size:clamp(1.6rem,2.6vw,2.15rem);
  font-weight:600; letter-spacing:-.04em; color:var(--v); line-height:1; }
.stat span{ font-size:.84rem; color:var(--ink-3); margin-top:.4rem; display:block; }

/* ────────────────────────────────────────────────────── Merkmale-Leiste */
.strip{ border-block:1px solid var(--line); background:var(--bg-2); }
.strip-in{ display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem 2.2rem;
  padding:1.1rem 0; font-size:.88rem; color:var(--ink-3); font-weight:500; }
.strip-in span{ position:relative; }
.strip-in span:not(:last-child)::after{ content:"·"; position:absolute; right:-1.2rem; color:var(--line-2); }

/* ─────────────────────────────────────────────────────────── Sektionen */
.sec{ position:relative; padding:clamp(4.2rem,7vw,6.4rem) 0; }
.sec-tint{ background:var(--bg-2); border-block:1px solid var(--line); }
.sec-head{ max-width:700px; margin-bottom:3rem; }
.sec-head-center{ margin-inline:auto; text-align:center; }
.kicker{ font-size:.76rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--v); margin-bottom:.9rem; }
.sec-sub{ color:var(--ink-2); font-size:1.03rem; margin-top:1.1rem; }
.sec-sub strong{ color:var(--ink); font-weight:600; }

/* Filter */
.filters{ display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:2.2rem; }
.chip{ font:500 .87rem/1 var(--font); color:var(--ink-2); background:#fff;
  border:1px solid var(--line-2); border-radius:999px; padding:.6rem 1.05rem; cursor:pointer;
  transition:.22s; }
.chip:hover{ border-color:var(--ink-3); color:var(--ink); }
.chip.is-on{ color:#fff; background:var(--v); border-color:var(--v); font-weight:600; }

/* ───────────────────────────────────────────────────── Template-Karten */
.tpl-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:1.5rem; }
.tpl{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-xl); padding:.9rem .9rem 0; box-shadow:var(--sh-1);
  transition:box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s; }
.tpl:hover{ transform:translateY(-4px); box-shadow:var(--sh-3); border-color:var(--line-2); }
.tpl.is-out{ display:none; }

.tpl-media{ position:relative; display:flex; align-items:flex-end; min-height:250px;
  border-radius:16px; overflow:hidden; padding:1.35rem 1.35rem 0;
  background:linear-gradient(160deg,
    color-mix(in srgb, var(--t-accent) 16%, #fff),
    color-mix(in srgb, var(--t-accent2) 5%, #fff)); }
.tpl-badge{ position:absolute; top:.8rem; left:.85rem; z-index:3; font-size:.67rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:#fff; background:var(--ink);
  border-radius:6px; padding:.3rem .6rem; }

/* Storefront-Attrappe (rein CSS, je Template eingefärbt) */
.mock{ width:100%; border-radius:10px 10px 0 0; overflow:hidden;
  background:var(--t-paper); color:var(--t-ink); box-shadow:0 12px 30px -14px rgba(16,24,40,.4);
  border:1px solid rgba(0,0,0,.06); border-bottom:0; }
.mock-serif{ font-family:Georgia,'Times New Roman',serif; }
.mock-bar{ display:flex; align-items:center; gap:5px; padding:8px 11px;
  background:color-mix(in srgb,var(--t-ink) 7%, var(--t-paper)); }
.mock-bar i{ width:7px; height:7px; border-radius:50%;
  background:color-mix(in srgb,var(--t-ink) 20%, var(--t-paper)); }
.mock-bar u{ flex:1; margin-left:8px; text-decoration:none; font-family:var(--font);
  font-size:8px; color:color-mix(in srgb,var(--t-ink) 45%, transparent);
  background:color-mix(in srgb,var(--t-ink) 5%, var(--t-paper)); border-radius:20px;
  padding:2px 8px; }
.mock-page{ padding:11px 13px 15px; font-family:var(--disp); }
.mock-serif .mock-page{ font-family:inherit; }
.mock-nav{ display:flex; align-items:center; gap:9px; padding-bottom:9px;
  border-bottom:1px solid color-mix(in srgb,var(--t-ink) 11%, transparent); }
.mock-nav b{ font-size:9.5px; letter-spacing:.16em; }
.mock-nav span{ width:20px; height:3px; border-radius:2px;
  background:color-mix(in srgb,var(--t-ink) 18%, transparent); }
.mock-nav em{ margin-left:auto; width:14px; height:14px; border-radius:50%; background:var(--t-accent); }
.mock-hero{ display:grid; grid-template-columns:1fr .85fr; gap:11px; align-items:center; padding:13px 0; }
.mock-hero.mock-center{ grid-template-columns:1fr; text-align:center; padding:48px 0; }
.mock-copy .l{ height:8px; border-radius:3px;
  background:color-mix(in srgb,var(--t-ink) 74%, transparent); margin-bottom:6px; }
.mock-copy .l.s{ height:4px; background:color-mix(in srgb,var(--t-ink) 24%, transparent); }
.mock-copy .l.mid{ margin-inline:auto; }
.w90{width:90%} .w80{width:80%} .w70{width:70%} .w60{width:60%}
.mock-btn{ width:52px; height:15px; border-radius:8px; background:var(--t-accent); margin-top:9px; }
.mock-btn.mid{ margin-inline:auto; }
.mock-shot{ aspect-ratio:1/1; border-radius:8px;
  background:linear-gradient(150deg, color-mix(in srgb,var(--t-accent) 52%, transparent),
             color-mix(in srgb,var(--t-accent2) 16%, transparent)); }
.mock-shot.mock-grid4{ display:grid; grid-template-columns:1fr 1fr; gap:4px; background:none; }
.mock-shot.mock-grid4 i{ border-radius:5px;
  background:color-mix(in srgb,var(--t-accent) 32%, transparent); }
.mock-strip{ display:flex; gap:6px; margin-bottom:10px; }
.mock-strip i{ flex:1; height:5px; border-radius:3px;
  background:color-mix(in srgb,var(--t-ink) 10%, transparent); }
.mock-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.mock-card{ aspect-ratio:3/4; border-radius:7px;
  background:linear-gradient(170deg, color-mix(in srgb,var(--t-ink) 7%, var(--t-paper)),
             color-mix(in srgb,var(--t-accent) 14%, transparent)); }

.tpl-body{ display:flex; flex-direction:column; flex:1; padding:1.4rem .5rem 1.5rem; }
.tpl-body h3{ display:flex; align-items:baseline; gap:.5rem; }
.ver{ font-family:var(--font); font-size:.7rem; font-weight:500; color:var(--ink-3);
  background:var(--bg-3); border-radius:5px; padding:.16rem .45rem; }
.tpl-body p{ color:var(--ink-2); font-size:.93rem; margin-top:.55rem; }
.tpl-tags{ list-style:none; display:flex; flex-wrap:wrap; gap:.35rem; padding:0; margin:.95rem 0 1.3rem; }
.tpl-tags li{ font-size:.74rem; color:var(--ink-2); background:var(--bg-2);
  border:1px solid var(--line); border-radius:6px; padding:.25rem .5rem; }
.tpl-foot{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-top:auto; padding-top:1.1rem; border-top:1px solid var(--line); }
.price{ font-family:var(--disp); font-size:1.2rem; font-weight:600; letter-spacing:-.02em; }
.price small{ display:block; font-family:var(--font); font-size:.72rem; font-weight:400;
  color:var(--ink-3); letter-spacing:0; }
.grid-note{ text-align:center; margin-top:2.4rem; color:var(--ink-3); font-size:.94rem; }
.grid-note a{ color:var(--v); font-weight:600; }
.grid-note a:hover{ text-decoration:underline; }

/* ───────────────────────────────────────────────────────── Editor-Sektion */
.editor-in{ display:grid; grid-template-columns:1fr 1.06fr; gap:clamp(2.5rem,5vw,4.5rem);
  align-items:center; }
.feat-list{ list-style:none; padding:0; margin:2.4rem 0 0; display:grid; gap:1.1rem; }
.feat-list li{ display:flex; gap:.95rem; }
.fl-ico{ flex:none; width:40px; height:40px; display:grid; place-items:center; border-radius:11px;
  background:var(--v-soft); color:var(--v); }
.fl-ico svg{ fill:currentColor; }
.feat-list b{ font-family:var(--disp); font-weight:600; font-size:1rem; }
.feat-list p{ color:var(--ink-2); font-size:.92rem; margin-top:.15rem; }

/* Abbildung der Editor-Oberfläche — dunkel, weil die App dunkel ist */
.editor-shot{ position:relative; }
.app{ border-radius:var(--r-l); overflow:hidden; background:#12141C;
  border:1px solid #23273A; box-shadow:var(--sh-3); }
.app-top{ display:flex; align-items:center; gap:6px; padding:11px 14px; font-size:.72rem;
  color:#8D95AA; background:#181B26; border-bottom:1px solid #23273A; }
.app-top i{ width:8px; height:8px; border-radius:50%; background:#333849; }
.app-top span{ margin-left:.7rem; }
.app-top em{ margin-left:auto; font-style:normal; font-weight:600; color:#fff;
  background:var(--v); border-radius:6px; padding:.24rem .6rem; }
.app-body{ display:grid; grid-template-columns:120px 1fr 134px; min-height:296px; }
.app-side,.app-insp{ padding:11px 10px; font-size:.68rem; }
.app-side{ border-right:1px solid #23273A; }
.app-insp{ border-left:1px solid #23273A; }
.side-h{ font-family:var(--disp); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  color:#6C7488; margin-bottom:.6rem; }
.side-i{ padding:.42rem .5rem; border-radius:7px; color:#98A0B4; margin-bottom:3px;
  border:1px solid transparent; }
.side-i.is-on{ background:rgba(91,61,245,.2); border-color:rgba(91,61,245,.55); color:#E6E8F2; }
.app-canvas{ padding:12px; display:grid; gap:8px; align-content:start; background:#0E1017; }
.cv-block{ position:relative; border-radius:9px; border:1px dashed #2C3145;
  background:linear-gradient(150deg,rgba(91,61,245,.2),rgba(8,145,178,.06)); min-height:44px; }
.cv-hero{ min-height:86px; border-style:solid; border-color:rgba(91,61,245,.6); }
.cv-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.cv-wide{ min-height:56px; }
.cv-tag{ position:absolute; top:6px; left:7px; font-size:.57rem; letter-spacing:.1em;
  text-transform:uppercase; color:#fff; background:var(--v); border-radius:4px; padding:.1rem .34rem; }
.fld{ margin-bottom:.6rem; }
.fld span{ display:block; color:#6C7488; font-size:.58rem; letter-spacing:.06em;
  text-transform:uppercase; margin-bottom:.24rem; }
.fld i{ display:block; font-style:normal; color:#D8DCE8; background:#181B26;
  border:1px solid #23273A; border-radius:6px; padding:.32rem .45rem; font-size:.66rem; }
.sw{ display:flex; gap:4px; }
.sw b{ width:15px; height:15px; border-radius:5px; background:var(--c); border:1.5px solid transparent; }
.sw b.on{ border-color:#fff; }
.rng{ height:4px; border-radius:3px; background:#23273A; position:relative; margin-top:6px; }
.rng i{ position:absolute; left:58%; top:50%; translate:-50% -50%; width:11px; height:11px;
  border-radius:50%; background:var(--v); }

/* ────────────────────────────────────────────────────────────── Funktionen */
.feat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.2rem; }
.card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-l);
  padding:1.8rem 1.6rem 1.7rem; box-shadow:var(--sh-1);
  transition:box-shadow .3s var(--ease), transform .3s var(--ease); }
.card:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); }
.card-ico{ display:grid; place-items:center; width:44px; height:44px; border-radius:12px;
  background:var(--v-soft); color:var(--v); margin-bottom:1.3rem; }
.card h3{ margin-bottom:.55rem; }
.card p{ color:var(--ink-2); font-size:.94rem; }

/* ─────────────────────────────────────────────────────────────── Schritte */
.steps{ list-style:none; padding:0; margin:0; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.3rem; counter-reset:s; }
.step{ position:relative; padding:1.8rem 1.5rem 1.6rem; border:1px solid var(--line);
  border-radius:var(--r-l); background:#fff; box-shadow:var(--sh-1); }
.step b{ display:inline-grid; place-items:center; width:34px; height:34px; margin-bottom:1rem;
  font-family:var(--disp); font-size:.82rem; font-weight:600; color:var(--v);
  background:var(--v-soft); border-radius:10px; }
.step h3{ margin-bottom:.5rem; font-size:1.06rem; }
.step p{ color:var(--ink-2); font-size:.91rem; }

/* ───────────────────────────────────────── Umschalter Kauf ⇄ Abo */
.billing-switch{ position:relative; display:flex; gap:.3rem; width:max-content; max-width:100%;
  margin:0 auto 2.4rem; padding:.3rem; background:var(--bg-3); border:1px solid var(--line);
  border-radius:999px; }
.bs-opt{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center;
  gap:.1rem; font:600 .94rem/1.2 var(--font); color:var(--ink-2); background:none; border:0;
  cursor:pointer; padding:.66rem 1.5rem; border-radius:999px; transition:color .3s var(--ease);
  white-space:nowrap; }
.bs-opt em{ font-style:normal; font-weight:400; font-size:.73rem; opacity:.8; }
.bs-opt.is-on{ color:var(--ink); }
.bs-thumb{ position:absolute; z-index:1; top:.3rem; bottom:.3rem; left:0; width:var(--w,50%);
  background:#fff; border-radius:999px; box-shadow:var(--sh-2);
  transform:translateX(var(--x,0)); transition:transform .35s var(--ease), width .35s var(--ease); }

/* ────────────────────────────────────────────────────────────────── Preise */
.plans{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:1.3rem;
  align-items:stretch; }
.plan{ position:relative; display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-xl); padding:2rem 1.8rem 1.8rem;
  box-shadow:var(--sh-1); transition:box-shadow .3s var(--ease), transform .3s var(--ease); }
.plan:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); }
.plan-hi{ border-color:var(--v); box-shadow:0 0 0 1px var(--v), var(--sh-3); }
.plan-hi:hover{ box-shadow:0 0 0 1px var(--v), var(--sh-3); transform:translateY(-3px); }
.plan-flag{ position:absolute; top:-.72rem; left:50%; translate:-50% 0; font-size:.68rem;
  font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#fff;
  background:var(--v); border-radius:999px; padding:.34rem .8rem; white-space:nowrap; }
.plan-sub{ color:var(--ink-3); font-size:.89rem; margin-top:.3rem; }
.plan-price{ display:flex; align-items:baseline; gap:.35rem; margin:1.4rem 0 1.3rem;
  padding-bottom:1.3rem; border-bottom:1px solid var(--line); }
.plan-price b{ font-family:var(--disp); font-size:2.9rem; font-weight:600; letter-spacing:-.045em;
  line-height:1; }
.plan-price span{ color:var(--ink-3); font-size:.86rem; }
.plan ul{ list-style:none; padding:0; margin:0 0 1.7rem; display:grid; gap:.62rem; flex:1; }
.plan li{ position:relative; padding-left:1.55rem; font-size:.93rem; color:var(--ink-2); }
.plan li::before{ content:"✓"; position:absolute; left:0; top:-.02em; color:#16A34A; font-weight:700; }
.plan li strong{ color:var(--ink); font-weight:600; }
.plan li.is-off{ color:var(--ink-3); }
.plan li.is-off::before{ content:"·"; color:var(--ink-3); }
.plan-note{ text-align:center; font-size:.79rem; color:var(--ink-3); margin-top:.8rem; }
.plan.is-busy{ opacity:.6; pointer-events:none; }
.plan-err{ margin-top:.7rem; font-size:.82rem; color:#DC2626; text-align:center; }

.pay-note{ display:flex; align-items:center; justify-content:center; gap:.45rem; flex-wrap:wrap;
  margin-top:2rem; color:var(--ink-3); font-size:.87rem; }
.pay-note strong{ color:var(--ink-2); }
.pay-note svg{ color:#16A34A; flex:none; }
.guarantee{ text-align:center; margin-top:1rem; color:var(--ink-3); font-size:.93rem; }
.guarantee b{ color:var(--ink); }

/* ────────────────────────────────────────────────────────────────── Support */
.sup-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:1.2rem; }
.sup-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-l);
  padding:1.8rem 1.5rem 1.6rem; box-shadow:var(--sh-1);
  transition:box-shadow .3s var(--ease), transform .3s var(--ease); }
.sup-card:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); }
.sup-hi{ border-color:var(--v); box-shadow:0 0 0 1px var(--v), var(--sh-2); }
.sup-hi:hover{ box-shadow:0 0 0 1px var(--v), var(--sh-2); }
.sup-step{ display:inline-block; font-size:.67rem; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--c); background:var(--c-soft); border-radius:999px;
  padding:.28rem .65rem; margin-bottom:1rem; }
.sup-hi .sup-step{ color:var(--v); background:var(--v-soft); }
.sup-card h3{ margin-bottom:.55rem; }
.sup-card p{ color:var(--ink-2); font-size:.93rem; }
.sup-card strong{ color:var(--ink); font-weight:600; }

.sup-rule{ display:flex; gap:1.4rem; align-items:flex-start; margin-top:1.2rem;
  background:#fff; border:1px solid var(--line); border-left:3px solid var(--w);
  border-radius:var(--r-l); padding:1.8rem 1.7rem; box-shadow:var(--sh-1); }
.sup-rule-ico{ flex:none; width:48px; height:48px; display:grid; place-items:center;
  font-family:var(--disp); font-size:1.4rem; font-weight:600; color:var(--w);
  background:#FEF3E2; border-radius:14px; }
.sup-rule h3{ margin-bottom:.55rem; }
.sup-rule p{ color:var(--ink-2); font-size:.95rem; max-width:74ch; }
.sup-rule .btn{ margin-top:1.1rem; }

/* ─────────────────────────────────────────────────────────────── Stimmen */
.quotes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:1.3rem; }
.quote{ margin:0; background:#fff; border:1px solid var(--line); border-radius:var(--r-l);
  padding:1.9rem 1.6rem 1.5rem; box-shadow:var(--sh-1);
  transition:box-shadow .3s var(--ease), transform .3s var(--ease); }
.quote:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); }
.quote blockquote{ margin:0; font-size:.99rem; color:var(--ink); line-height:1.6; }
.quote figcaption{ display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto;
  column-gap:.75rem; align-items:center; margin-top:1.4rem; padding-top:1.1rem;
  border-top:1px solid var(--line); }
.av{ grid-row:span 2; width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--disp); font-size:.78rem; font-weight:600; color:#fff; }
.av1{ background:#5B3DF5 } .av2{ background:#0891B2 } .av3{ background:#B0492B }
.quote b{ font-family:var(--disp); font-size:.94rem; align-self:end; }
.quote i{ font-style:normal; font-size:.81rem; color:var(--ink-3); align-self:start; }

/* ─────────────────────────────────────────────────────────────────── FAQ */
.faq{ display:grid; gap:.6rem; }
.faq details{ background:#fff; border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--sh-1); transition:border-color .3s; }
.faq details[open]{ border-color:var(--line-2); }
.faq summary{ list-style:none; cursor:pointer; padding:1.1rem 3rem 1.1rem 1.3rem; position:relative;
  font-family:var(--disp); font-weight:500; font-size:1.01rem; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary i{ position:absolute; right:1.2rem; top:50%; translate:0 -50%; width:13px; height:13px; }
.faq summary i::before,.faq summary i::after{ content:""; position:absolute; inset:50% 0 auto 0;
  height:1.7px; background:var(--v); border-radius:2px; transition:transform .3s var(--ease); }
.faq summary i::after{ transform:rotate(90deg); }
.faq details[open] summary i::after{ transform:rotate(0); }
.faq div{ padding:0 1.3rem 1.3rem; color:var(--ink-2); font-size:.95rem; }
.faq strong{ color:var(--ink); font-weight:600; }

/* ─────────────────────────────────────────────────────────────────── CTA */
.cta{ padding:clamp(4.5rem,8vw,6.5rem) 0; text-align:center; color:#fff;
  background:linear-gradient(120deg,#4A2FD8 0%, #5B3DF5 46%, #0891B2 100%); }
.cta-in{ max-width:680px; }
.cta h2{ color:#fff; }
.cta p{ color:rgba(255,255,255,.82); margin-top:1.1rem; }
.cta-form{ display:flex; gap:.55rem; margin:2.2rem auto 0; max-width:500px; }
.cta-form input{ flex:1; min-width:0; font:400 1rem/1 var(--font); color:var(--ink);
  background:#fff; border:1px solid transparent; border-radius:10px; padding:1.02rem 1.2rem; }
.cta-form input::placeholder{ color:var(--ink-3); }
.cta-form input:focus{ outline:none; box-shadow:0 0 0 3px rgba(255,255,255,.45); }
.cta-form input.err{ box-shadow:0 0 0 3px rgba(255,120,120,.55); }
.cta-note{ font-size:.84rem !important; color:rgba(255,255,255,.7) !important; margin-top:1rem !important; }
.cta-ok{ margin-top:1.3rem; color:#fff !important; font-weight:500; }

/* ──────────────────────────────────────────────────────────────── Footer */
.foot{ border-top:1px solid var(--line); background:var(--bg-2); padding:3.6rem 0 1.5rem; }
.foot-in{ display:grid; grid-template-columns:1.7fr repeat(3,1fr); gap:2.2rem; }
.foot-brand p{ color:var(--ink-3); font-size:.89rem; margin-top:.9rem; max-width:34ch; }
.foot nav{ display:flex; flex-direction:column; gap:.55rem; font-size:.89rem; }
.foot nav b{ font-family:var(--disp); font-size:.76rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:.3rem; }
.foot nav a{ color:var(--ink-2); transition:color .22s; }
.foot nav a:hover{ color:var(--v); }
.foot-bar{ display:flex; flex-wrap:wrap; gap:.7rem 2rem; justify-content:space-between;
  margin-top:2.8rem; padding-top:1.4rem; border-top:1px solid var(--line);
  font-size:.78rem; color:var(--ink-3); }

/* ─────────────────────────────────────────────────────────────── Responsive */
@media (max-width:1040px){
  .hero-in{ grid-template-columns:1fr; }
  .hero-shot{ height:min(56vw,400px); max-width:620px; }
  .editor-in{ grid-template-columns:1fr; }
  .foot-in{ grid-template-columns:1fr 1fr; }
}
@media (max-width:860px){
  .nav-links,.nav-cta{ display:none; }
  .burger{ display:block; }
  .hero{ padding-top:7.5rem; }
  .hero-stats{ grid-template-columns:1fr 1fr; margin-top:3rem; }
  .app-body{ grid-template-columns:100px 1fr; }
  .app-insp{ display:none; }
  .cta-form{ flex-direction:column; }
  .cta-form .btn{ width:100%; }
  .billing-switch{ width:100%; }
  .bs-opt{ flex:1; padding-inline:.6rem; font-size:.87rem; }
  .sup-rule{ flex-direction:column; gap:1rem; }
}
@media (max-width:560px){
  body{ font-size:16px; }
  .hero-shot{ height:min(72vw,330px); }
  .shot-front{ width:88%; }
  .shot-back-2{ display:none; }
  .foot-in{ grid-template-columns:1fr; gap:1.8rem; }
}

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

/* ═══════════════════════════════════════════════ Modales Fenster ═══════ */
.modal{ position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:1.2rem; }
.modal-bg{ position:absolute; inset:0; background:rgba(12,14,20,.4); backdrop-filter:blur(3px); }
.modal-box{ position:relative; width:min(100%,520px); max-height:90vh; overflow-y:auto;
  background:#fff; border-radius:var(--r-xl); padding:2rem 1.9rem 1.8rem;
  box-shadow:0 30px 80px -24px rgba(16,24,40,.45); outline:none;
  animation:modalIn .26s var(--ease); }
@keyframes modalIn{ from{ transform:translateY(12px); opacity:0 } }
.modal-box.wide, .modal-box:has(.pv){ width:min(100%,900px); }
.modal-x{ position:absolute; top:.9rem; right:1rem; width:34px; height:34px; display:grid;
  place-items:center; font-size:1.5rem; line-height:1; color:var(--ink-3); background:none;
  border:0; border-radius:9px; cursor:pointer; transition:.2s; }
.modal-x:hover{ background:var(--bg-3); color:var(--ink); }
.modal-box h2{ font-size:1.5rem; margin-bottom:1.2rem; }

/* Bestellfenster */
.co-sum{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-l);
  padding:1.1rem 1.2rem; margin-bottom:1.4rem; }
.co-sum > div{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.32rem 0; font-size:.95rem; }
.co-sum span{ color:var(--ink-3); }
.co-sum b{ font-family:var(--disp); font-weight:600; }
.co-note{ display:block !important; margin-top:.6rem; padding-top:.7rem;
  border-top:1px solid var(--line); font-size:.83rem; color:var(--ink-3); }
.co-field{ display:grid; gap:.35rem; margin-bottom:1.1rem; }
.co-field > span{ font-size:.88rem; font-weight:600; }
.co-field > span i{ font-style:normal; color:var(--v); }
.co-field input{ font:400 1rem/1.4 var(--font); color:var(--ink); background:#fff;
  border:1px solid var(--line-2); border-radius:10px; padding:.8rem 1rem;
  transition:border-color .2s, box-shadow .2s; }
.co-field input:focus{ outline:none; border-color:var(--v); box-shadow:0 0 0 3px rgba(91,61,245,.14); }
.co-field small{ font-size:.79rem; color:var(--ink-3); }
.co-check{ display:grid; grid-template-columns:auto 1fr; gap:.7rem; align-items:start;
  margin-bottom:1.2rem; font-size:.88rem; color:var(--ink-2); line-height:1.5; }
.co-check input{ width:18px; height:18px; margin-top:.15rem; accent-color:#5B3DF5; }
.co-check a{ color:var(--v); text-decoration:underline; }
.co-err{ padding:.75rem 1rem; margin-bottom:1rem; font-size:.87rem; color:#B91C1C;
  background:#FEF2F2; border:1px solid #FBC5C5; border-radius:10px; }
.co-fine{ margin-top:.9rem; font-size:.79rem; color:var(--ink-3); text-align:center; }

/* Vorschaufenster */
.pv{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:start; }
.pv-shot{ border-radius:var(--r-l); overflow:hidden; padding:1.2rem 1.2rem 0;
  background:linear-gradient(160deg, color-mix(in srgb, var(--t-accent) 16%, #fff),
             color-mix(in srgb, var(--t-accent2) 5%, #fff)); }
.pv-desc{ color:var(--ink-2); font-size:.96rem; margin-top:.8rem; }
.pv-tags{ list-style:none; display:flex; flex-wrap:wrap; gap:.35rem; padding:0; margin:1rem 0 0; }
.pv-tags li{ font-size:.75rem; color:var(--ink-2); background:var(--bg-2);
  border:1px solid var(--line); border-radius:6px; padding:.25rem .5rem; }
.pv-facts{ display:grid; grid-template-columns:auto 1fr; gap:.4rem 1rem; margin:1.3rem 0 0;
  padding-top:1.1rem; border-top:1px solid var(--line); font-size:.89rem; }
.pv-facts dt{ color:var(--ink-3); }
.pv-facts dd{ margin:0; }
.pv-btns{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.4rem; }
.pv-fine{ margin-top:.9rem; font-size:.79rem; color:var(--ink-3); }
.pv-fine a{ color:var(--v); text-decoration:underline; }

@media (max-width:760px){
  .pv{ grid-template-columns:1fr; gap:1.4rem; }
  .modal-box{ padding:1.6rem 1.3rem 1.4rem; }
}
.co-lead{ color:var(--ink-2); font-size:.96rem; margin-bottom:1.3rem; }
.co-field textarea{ font:400 1rem/1.5 var(--font); color:var(--ink); background:#fff;
  border:1px solid var(--line-2); border-radius:10px; padding:.8rem 1rem; resize:vertical;
  transition:border-color .2s, box-shadow .2s; }
.co-field textarea:focus{ outline:none; border-color:var(--v); box-shadow:0 0 0 3px rgba(91,61,245,.14); }

/* ═════════════════════════════════════════ Echte Aufnahmen ════════════ */
/* Die Bilder sind Produktfotos, keine Dekoration: Rahmen wie ein Fenster,
   damit erkennbar bleibt, dass es eine Bildschirmaufnahme ist. */
.hero-shot{ position:relative; height:auto; min-height:0; margin:0; }
.hero-shot figcaption{ margin-top:.9rem; font-size:.8rem; color:var(--ink-3); text-align:center; }
.hero-shot figcaption a{ color:var(--v); font-weight:600; }
.hero-shot figcaption a:hover{ text-decoration:underline; }

.shotrow{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; align-items:start; }
.shotfig{ margin:0; }
.shotfig img{ width:100%; height:auto; border-radius:var(--r-l);
  border:1px solid var(--line); box-shadow:var(--sh-2); background:#fff; }
.shotfig figcaption{ margin-top:.8rem; font-size:.88rem; color:var(--ink-2); }
.shotfig figcaption b{ font-family:var(--disp); color:var(--ink); font-weight:600; }
.shotfig-wide{ grid-column:1 / -1; }
.shotfig-phone img{ max-width:250px; margin-inline:auto; }
.shotfig-app{ margin:0 0 3rem; }
.shotfig-app img{ box-shadow:var(--sh-3); }

.subhead{ font-family:var(--disp); font-size:1.5rem; font-weight:600; letter-spacing:-.025em;
  margin-top:3.6rem; }

/* Templates, die es noch nicht zu kaufen gibt — ehrlich als solche gezeigt */
.soon-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem;
  margin-top:1.8rem; }
.soon{ position:relative; background:#fff; border:1px dashed var(--line-2); border-radius:var(--r-l);
  padding:1.4rem 1.3rem; }
.soon::before{ content:""; display:block; width:34px; height:5px; border-radius:3px;
  background:var(--t-accent); margin-bottom:.9rem; opacity:.75; }
.soon b{ font-family:var(--disp); font-size:1.05rem; display:block; }
.soon span{ display:block; color:var(--ink-2); font-size:.9rem; margin-top:.4rem; }
.soon em{ display:inline-block; font-style:normal; font-size:.7rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3);
  background:var(--bg-3); border-radius:999px; padding:.26rem .62rem; margin-top:.9rem; }

.feat-grid-4{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }

/* ═══════════════════════════════════════════ Problem → Lösung ═════════ */
/* Der Satz des Kunden steht oben und wirkt wie zitiert; darunter, optisch
   abgesetzt, unsere Antwort. Die Reihenfolge ist die Botschaft. */
.prob-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:1.3rem; }
.prob{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-xl); padding:1.7rem 1.6rem 1.6rem; box-shadow:var(--sh-1);
  transition:box-shadow .3s var(--ease), transform .3s var(--ease); }
.prob:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); }
.prob-q{ position:relative; font-family:var(--disp); font-size:1.06rem; font-weight:500;
  line-height:1.4; color:var(--ink-2); padding-left:1.1rem; }
.prob-q::before{ content:""; position:absolute; left:0; top:.25em; bottom:.25em; width:3px;
  border-radius:2px; background:var(--line-2); }
.prob-a{ margin-top:1.2rem; padding-top:1.2rem; border-top:1px solid var(--line); }
.prob-a b{ display:block; font-family:var(--disp); font-size:1.02rem; font-weight:600;
  color:var(--v); margin-bottom:.45rem; }
.prob-a p{ color:var(--ink-2); font-size:.94rem; }
.prob-a a{ color:var(--v); font-weight:600; white-space:nowrap; }
.prob-a a:hover{ text-decoration:underline; }

/* ═══════════════════════════════════════════════ Preiskarte „Anfrage" ═ */
.plan-ask{ font-size:1.7rem !important; letter-spacing:-.02em; }
.plan-custom{ border-style:dashed; }

/* ══════════════════════════════════════════════════ Rückmeldung ═══════ */
.fb{ background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  padding:2rem 1.9rem 1.8rem; box-shadow:var(--sh-1); }
.fb-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.fb-field{ display:grid; gap:.35rem; margin-bottom:1.2rem; }
.fb-field > span{ font-size:.88rem; font-weight:600; }
.fb-field > span i{ font-style:normal; color:var(--v); }
.fb-field small{ font-size:.79rem; color:var(--ink-3); }
.fb-field input, .fb-field select, .fb-field textarea{
  font:400 1rem/1.5 var(--font); color:var(--ink); background:#fff;
  border:1px solid var(--line-2); border-radius:10px; padding:.8rem 1rem;
  transition:border-color .2s, box-shadow .2s; }
.fb-field textarea{ resize:vertical; }
.fb-field input:focus, .fb-field select:focus, .fb-field textarea:focus{
  outline:none; border-color:var(--v); box-shadow:0 0 0 3px rgba(91,61,245,.14); }
.fb-stars{ display:flex; gap:.2rem; }
.fb-stars button{ font-size:1.7rem; line-height:1; color:var(--line-2); background:none;
  border:0; cursor:pointer; padding:.1rem .12rem; transition:color .18s, transform .18s var(--ease); }
.fb-stars button:hover{ transform:translateY(-2px); }
.fb-stars button.is-on{ color:#F2A20C; }
.fb-err{ padding:.75rem 1rem; margin-bottom:1rem; font-size:.87rem; color:#B91C1C;
  background:#FEF2F2; border:1px solid #FBC5C5; border-radius:10px; }
.fb-ok{ text-align:center; margin-top:1.4rem; padding:1.2rem 1.4rem; font-size:1rem;
  color:#14532D; background:#F0FDF4; border:1px solid #BBF7D0; border-radius:var(--r-l); }

@media (max-width:860px){
  .shotrow{ grid-template-columns:1fr; }
  .fb-row{ grid-template-columns:1fr; gap:0; }
}

/* ═══════════════════════════════════ Unterseiten einer echten Website ═ */
/* Die Startseite trägt nur noch Anrisse; jedes Thema hat seine eigene Seite.
   `.pagehead` ist deren Kopf — schmaler als ein Hero, damit der Inhalt sofort
   beginnt und die Seite nicht wieder lang wird. */
.pagehead{ position:relative; padding:8.4rem 0 3.2rem; overflow:hidden;
  background:linear-gradient(180deg,#FBFBFE 0%, #F6F7FC 55%, var(--bg) 100%);
  border-bottom:1px solid var(--line); }
.pagehead::before{ content:""; position:absolute; inset:-40% -10% auto -10%; height:80%;
  background:radial-gradient(55% 60% at 72% 35%, rgba(91,61,245,.10), transparent 70%),
             radial-gradient(45% 50% at 18% 30%, rgba(8,145,178,.07), transparent 70%);
  pointer-events:none; }
.pagehead-in{ position:relative; max-width:760px; }
.pagehead h1{ font-size:clamp(2rem,3.6vw,2.9rem); margin-top:.5rem; }
.pagehead .lede{ margin-top:1rem; }
.crumb-nav{ display:flex; align-items:center; gap:.5rem; font-size:.84rem; color:var(--ink-3); }
.crumb-nav a{ color:var(--ink-2); }
.crumb-nav a:hover{ color:var(--v); text-decoration:underline; }
.nav-links a.is-current{ color:var(--ink); font-weight:600; }

/* Anrisse auf der Startseite — jeder führt auf seine eigene Seite */
.teaser-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:1.3rem; }
.teaser{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-1);
  transition:box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s; }
.teaser:hover{ transform:translateY(-4px); box-shadow:var(--sh-3); border-color:var(--line-2); }
.teaser-shot{ aspect-ratio:16/10; overflow:hidden; background:var(--bg-2);
  border-bottom:1px solid var(--line); }
.teaser-shot img{ width:100%; height:100%; object-fit:cover; object-position:left top; }
.teaser-body{ display:flex; flex-direction:column; flex:1; padding:1.5rem 1.5rem 1.4rem; }
.teaser-body h3{ font-size:1.15rem; }
.teaser-body p{ color:var(--ink-2); font-size:.94rem; margin-top:.55rem; }
.teaser-more{ margin-top:auto; padding-top:1.1rem; color:var(--v); font-weight:600; font-size:.92rem; }
.teaser:hover .teaser-more{ text-decoration:underline; }

/* Ein Schlussband, das auf jeder Unterseite zur Kasse führt */
.endband{ margin-top:clamp(3rem,6vw,4.5rem); background:var(--bg-2);
  border:1px solid var(--line); border-radius:var(--r-xl); padding:2.4rem 2rem;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.4rem; }
.endband h2{ font-size:1.5rem; }
.endband p{ color:var(--ink-2); font-size:.95rem; margin-top:.4rem; max-width:52ch; }
.endband .btn{ flex:none; }
.endband-acts{ display:flex; flex-wrap:wrap; gap:.7rem; }

/* Knopfreihe unter dem Seitenkopf (Katalogstudio: ansehen · testen) */
.pagehead-cta{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.5rem; }

@media (max-width:860px){
  .pagehead{ padding-top:6.6rem; }
  .endband{ flex-direction:column; align-items:flex-start; }
}

/* ═══════════════════════════════════════ Aufnahmen im Raum (3D) ═══════ */
/* Die Bildschirmaufnahmen stehen leicht gekippt im Raum und richten sich auf,
   während sie durch das Fenster wandern. Die Drehung kommt aus der Scroll-
   position, nicht aus einer Zeitachse — deshalb fühlt sie sich an, als hinge
   das Bild am Scrollrad und nicht an einer Animation.

   Gerechnet wird in JS (site.js), gesetzt werden nur diese beiden Variablen.
   Ohne JS steht das Bild gerade und vollständig sichtbar da. */
.shotfig, .hero-shot, .depth{ perspective:1500px; perspective-origin:50% 42%; }
.shotfig img, .duo-stage > .hs-browser, .depth > img{
  transform-style:preserve-3d;
  transform:
    perspective(1500px)
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg))
    translate3d(0, var(--ty, 0px), var(--tz, 0px))
    scale(var(--sc, 1))
    rotate(var(--rot, 0deg));
  transition:box-shadow .5s var(--ease);
}
/* Nur bewegte Bilder bekommen will-change — sonst hält der Browser für jedes
   Bild der Seite dauerhaft eine eigene Ebene vor. */
.is-moving{ will-change:transform; }
/* Der Schatten wächst mit der Nähe zur Fenstermitte: das ist es, was die
   Kippung als Höhe lesbar macht statt als Verzerrung. */
.shotfig img, .duo-stage > .hs-browser{
  box-shadow:
    0 calc(8px + var(--lift, 0) * 26px) calc(24px + var(--lift, 0) * 52px)
      rgba(16,24,40, calc(.10 + var(--lift, 0) * .16)),
    0 2px 6px rgba(16,24,40,.07);
}

@media (prefers-reduced-motion:reduce){
  .shotfig img, .duo-stage > .hs-browser, .depth > img{ transform:none !important; }
}

/* ────────────────────────────────────────────── Live-Demo (prisma.html#demo)
   Die Demo in einem Rahmen: oben Seiten-Reiter und Gerätewahl, darunter die
   echte Seite in einem iframe. Das iframe hat immer die volle Gerätebreite
   (1440 / 820 / 390 px) und wird auf die verfügbare Breite verkleinert — so
   sieht man den Desktop als Desktop, nicht als umgebrochene Schmalfassung.
   Maße setzt js/site.js („Live-Demo"). */
.demo-view{ background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  box-shadow:var(--sh-3); overflow:hidden; }
.demo-bar{ display:flex; align-items:center; gap:.8rem; padding:.6rem .7rem .6rem 1rem;
  border-bottom:1px solid var(--line); background:#fff; }
.demo-dots{ display:flex; gap:6px; flex:0 0 auto; }
.demo-dots i{ width:10px; height:10px; border-radius:50%; background:var(--line-2); }
.demo-pages{ position:relative; display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; min-width:0; flex:1 1 auto; }
.demo-pages::-webkit-scrollbar{ display:none; }
.demo-pages a{ flex:0 0 auto; font-size:.86rem; font-weight:500; color:var(--ink-2);
  padding:.48rem .75rem; border-radius:9px; white-space:nowrap; transition:background .2s, color .2s; }
.demo-pages a:hover{ color:var(--ink); background:var(--bg-3); }
.demo-pages a.is-on{ color:var(--v-dark); background:var(--v-soft); }
.demo-devices{ display:flex; gap:2px; padding:3px; background:var(--bg-3); border-radius:11px; flex:0 0 auto; }
.demo-devices button{ display:grid; place-items:center; width:34px; height:30px; border:0; border-radius:8px;
  background:transparent; color:var(--ink-3); cursor:pointer; transition:background .2s, color .2s; }
.demo-devices button:hover{ color:var(--ink); }
.demo-devices button.is-on{ background:#fff; color:var(--ink); box-shadow:var(--sh-1); }
.demo-open{ display:inline-flex; align-items:center; gap:.4rem; flex:0 0 auto; font-size:.86rem; font-weight:600;
  color:var(--ink); padding:.48rem .8rem; border:1px solid var(--line-2); border-radius:9px; transition:border-color .2s; }
.demo-open:hover{ border-color:var(--ink-3); }
.demo-pages a:focus-visible, .demo-devices button:focus-visible, .demo-open:focus-visible{
  outline:2px solid var(--v); outline-offset:2px; }
.demo-stage{ display:flex; justify-content:center; background:var(--bg-3);
  background-image:radial-gradient(var(--line-2) 1px, transparent 1px); background-size:18px 18px; }
.demo-stage.is-device{ padding:1.4rem 1rem; }
.demo-screen{ position:relative; overflow:hidden; background:#fff; height:min(78vh, 820px); }
/* Gerät: Rahmen mit schmalem Metallrand, oben eine Statusleiste mit Kamera, unten
   der Home-Balken. Die Seite (iframe) beginnt unter der Statusleiste und endet über
   dem Balken — so läuft sie nie unter die runden Ecken. Maße setzt site.js (--sb, --hb). */
.demo-stage.is-device .demo-screen{ background:#07080A; border-radius:var(--dr, 40px);
  box-shadow:0 0 0 10px #07080A, 0 0 0 12px #9BA1AA, 0 30px 60px -24px rgba(16,24,40,.45); }
.demo-stage.is-device .demo-screen::before{ content:""; position:absolute; z-index:2; top:calc(var(--sb) / 2); left:50%;
  translate:-50% -50%; width:clamp(64px, 26%, 110px); height:calc(var(--sb) * .55); border-radius:99px; background:#000;
  box-shadow:inset -10px 0 0 -6px #1D2B3C; }
.demo-stage.is-device .demo-screen::after{ content:""; position:absolute; z-index:2; bottom:calc(var(--hb) / 2); left:50%;
  translate:-50% 50%; width:34%; height:4px; border-radius:99px; background:rgba(255,255,255,.55); }
.demo-stage.is-device .demo-screen iframe{ top:var(--sb); }
.demo-screen iframe{ position:absolute; top:0; left:0; border:0; width:1440px; height:100%;
  transform-origin:0 0; background:#fff; }

.demo-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; margin-top:2.2rem; }
.demo-tile{ display:block; background:#fff; border:1px solid var(--line); border-radius:var(--r-l);
  overflow:hidden; box-shadow:var(--sh-1); transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.demo-tile:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); }
.demo-tile img{ width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; object-position:top;
  border-bottom:1px solid var(--line); }
.demo-tile span{ display:block; padding:.75rem .9rem .85rem; font-size:.84rem; color:var(--ink-2); line-height:1.4; }
.demo-tile b{ display:block; font-family:var(--disp); font-weight:600; font-size:.98rem; color:var(--ink); margin-bottom:.15rem; }

@media (max-width:1040px){ .demo-grid{ grid-template-columns:repeat(2,1fr); } }
/* Tablet: Seiten-Reiter bekommen eine eigene Zeile, sonst schieben sie sich unter die Gerätewahl */
@media (max-width:1100px){
  .demo-bar{ flex-wrap:wrap; padding:.55rem; gap:.5rem; }
  .demo-dots{ display:none; }
  .demo-pages{ order:3; flex-basis:100%; }
  .demo-devices{ margin-right:auto; }
}
@media (max-width:760px){ .demo-screen{ height:min(72vh, 700px); } }
@media (max-width:560px){ .demo-grid{ gap:.7rem; } .demo-tile span{ font-size:.78rem; } }

/* ────────────────────────────────────────────── Zusatzprodukte (zusatzprodukte.html)
   Je Produkt eine Karte: Aufnahme links, Text, Preis und Wege rechts. Der
   Preis mit Editor-Abo steht grün daneben — geprüft wird er beim Kauf. */
.sec-top0{ padding-top:clamp(1.2rem,2.4vw,2rem); }
.addon{ display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(1.6rem,4vw,3.4rem); align-items:center;
  padding:clamp(1.2rem,2.4vw,2rem); background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  box-shadow:var(--sh-2); }
.addon-shot{ position:relative; display:block; padding-bottom:1.6rem; }
.addon-shot > img{ width:92%; height:auto; border-radius:var(--r-l); border:1px solid var(--line); box-shadow:var(--sh-3); }
.addon-shot-m{ position:absolute; right:0; bottom:0; width:24%; padding:5px; border-radius:20px; background:#10121A; box-shadow:var(--sh-3); }
.addon-shot-m img{ width:100%; height:auto; border-radius:15px; }
.addon-body h2{ font-size:clamp(1.8rem,3vw,2.4rem); }
.addon-lede{ margin-top:.8rem; color:var(--ink-2); font-size:1.02rem; }
.addon-list{ list-style:none; margin:1.2rem 0 0; padding:0; display:grid; gap:.5rem; }
.addon-list li{ position:relative; padding-left:1.6rem; font-size:.95rem; color:var(--ink-2); }
.addon-list li::before{ content:"✓"; position:absolute; left:0; top:.1rem; width:1.1rem; height:1.1rem; border-radius:50%;
  display:grid; place-items:center; font-size:.65rem; font-weight:700; color:var(--v); background:var(--v-soft); }
.addon-price{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem 1.4rem; margin-top:1.6rem; padding-top:1.3rem; border-top:1px solid var(--line); }
.addon-list-price b{ font-family:var(--disp); font-size:2rem; font-weight:600; letter-spacing:-.03em; }
.addon-list-price span{ color:var(--ink-3); font-size:.9rem; }
.addon-deal{ font-size:.93rem; color:#15803D; }
.addon-deal b{ font-weight:700; }
.addon-deal em{ font-style:normal; font-weight:700; margin-left:.3rem; padding:.15rem .45rem; border-radius:6px; background:#DCFCE7; }
.addon-acts{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.5rem; }
@media (max-width:860px){
  .addon{ grid-template-columns:1fr; }
}

/* ════════════════════════════════════════════ Startseite: Wert & Wechsel ═
   Zeit · Tempo · Geld, der Vergleich mit Agentur, die Sorgen vor dem Wechsel
   und „ein gutes Template" gegen Prisma + Editor. Die Vergleiche sind als
   Raster gebaut, nicht als <table>, damit sie am Telefon stapeln. */
.gain-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.3rem; }
.gain{ background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  padding:1.8rem 1.6rem 1.7rem; box-shadow:var(--sh-1);
  transition:box-shadow .3s var(--ease), transform .3s var(--ease); }
.gain:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); }
.gain-ico{ display:inline-grid; place-items:center; width:44px; height:44px; border-radius:12px;
  background:var(--v-soft); color:var(--v); margin-bottom:1.1rem; }
.gain h3{ font-size:.8rem; font-family:var(--font); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); }
.gain-claim{ font-family:var(--disp); font-size:1.3rem; font-weight:600; letter-spacing:-.02em;
  line-height:1.25; color:var(--ink); margin:.45rem 0 .7rem; }
.gain p:last-child{ color:var(--ink-2); font-size:.94rem; }

/* Rechtlich auf Stand (index.html#recht): was Prisma schon mitbringt */
.law-done{ margin:2.2rem auto 0; max-width:940px; text-align:center; background:var(--v-soft);
  border-radius:var(--r-xl); padding:1.6rem 1.5rem 1.5rem; }
.law-done-k{ font-size:.76rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--v); margin-bottom:.9rem; }
.law-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:.55rem; list-style:none; margin:0; padding:0; }
.law-chips li{ display:inline-flex; align-items:center; gap:.45rem; background:#fff; border:1px solid var(--line);
  border-radius:999px; padding:.5rem .95rem; text-align:left; font-size:.9rem; font-weight:500; color:var(--ink); box-shadow:var(--sh-1); }
.law-chips li::before{ content:"✓"; color:var(--v); font-weight:700; }
.law-done-note{ margin-top:1rem; color:var(--ink-3); font-size:.86rem; }

.vs,.cmp{ margin:2.6rem auto 0; max-width:940px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-xl); box-shadow:var(--sh-2); overflow:hidden; }
.vs-row,.cmp-row{ display:grid; grid-template-columns:1.1fr 1fr 1fr; align-items:center;
  border-top:1px solid var(--line); }
.vs-row:first-child,.cmp-row:first-child{ border-top:0; }
.vs-row > span,.cmp-row > span{ padding:1rem 1.3rem; font-size:.93rem; color:var(--ink-2); }
.vs-row > span:first-child,.cmp-row > span:first-child{ font-weight:600; color:var(--ink); }
.vs-head > span,.cmp-head > span{ font-size:.74rem !important; font-weight:700 !important;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3) !important; }
.vs-us,.cmp-us{ align-self:stretch; display:flex; align-items:center;
  background:var(--v-soft); color:var(--ink) !important; font-weight:500; }
.vs-head .vs-us,.cmp-head .cmp-us{ color:var(--v) !important; }
.cmp-row > span.yes,.cmp-row > span.no{ justify-content:center; text-align:center;
  font-size:1.05rem; font-weight:700; }
.cmp-row > span.yes,.cmp-row > span.yes.cmp-us{ color:#16A34A !important; }
.cmp-row > span.no{ color:var(--ink-3); }
.cmp-head > span:not(:first-child){ justify-content:center; text-align:center; }
.cmp-plus > span:first-child::after{ content:"Plus"; margin-left:.5rem; padding:.12rem .45rem;
  border-radius:6px; font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--v); background:var(--v-soft); vertical-align:.12em; }
.vs-ask,.cmp-line{ text-align:center; max-width:640px; margin:2.2rem auto 0;
  font-family:var(--disp); font-size:1.15rem; line-height:1.45; color:var(--ink-2); }
.cmp-line strong{ color:var(--ink); font-weight:600; }
/* vier Spalten: die Preistabelle der Plugins (plugins.html) */
.cmp-4 .cmp-row{ grid-template-columns:1.3fr 1fr 1fr 1fr; }
.cmp-4 .cmp-row > span:not(:first-child){ justify-content:center; text-align:center; display:flex; }


@media (max-width:640px){
  .vs-row,.cmp-row{ grid-template-columns:1fr 1fr; }
  .vs-row > span:first-child,.cmp-row > span:first-child{ grid-column:1 / -1; padding-bottom:.2rem; }
  .vs-row > span,.cmp-row > span{ padding:.7rem 1rem; font-size:.88rem; }
  .vs-head > span:first-child,.cmp-head > span:first-child{ display:none; }
  .vs-us,.cmp-us{ align-self:stretch; }
  .cmp-4 .cmp-row{ grid-template-columns:repeat(3,1fr); }
}

/* ════════════════════════════════════════ Startseite: Bewegung mit Aussage ═
   Jede Animation zeigt etwas, das das Produkt wirklich tut — keine Deko:
     · Hero: zwei Telefone, links wechseln die drei Bühnen von Prisma
     · Rennen: dieselbe Änderung mit Agentur und mit Mobbros
     · Vorher/Nachher: der Vergleich aus der Admin-Vorschau, zum Ziehen
     · Schritte, Haken, Testwoche: nacheinander, damit man die Reihenfolge liest
   Gesteuert von site.js; ohne JS oder mit reduzierter Bewegung steht alles still
   und vollständig da. */

/* Hero: die Farbe von „Ohne Entwickler." wandert langsam, der Knopf lädt einmal ein */
.hero h1 .grad{ background-image:linear-gradient(100deg,#5B3DF5,#0891B2,#5B3DF5);
  background-size:200% auto; animation:gradMove 7s ease-in-out infinite alternate; }
@keyframes gradMove{ to{ background-position:100% 0; } }
.hero-btns .btn-primary{ animation:ctaCall 2.4s 1.6s 2 ease-out; }
@keyframes ctaCall{ 0%{ box-shadow:var(--sh-v), 0 0 0 0 rgba(91,61,245,.45); }
  70%,100%{ box-shadow:var(--sh-v), 0 0 0 14px rgba(91,61,245,0); } }

/* Glanz über dem Hauptknopf beim Überfahren */
.btn-primary{ position:relative; overflow:hidden; isolation:isolate; }
.btn-primary::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);
  transform:translateX(-120%); transition:transform .7s var(--ease); }
.btn-primary:hover::after{ transform:translateX(120%); }

/* ── Rennen: Agentur gegen Mobbros ──────────────────────────────────────── */
.race{ max-width:940px; margin:2.6rem auto 0; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-xl); box-shadow:var(--sh-2); padding:1.4rem 1.5rem 1.5rem; display:grid; gap:1rem; }
.race-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.race-t{ font-size:.92rem; color:var(--ink-2); }
.race-t b{ color:var(--ink); font-weight:600; }
.race-again{ font:600 .82rem/1 var(--font); color:var(--v); background:var(--v-soft); border:0;
  border-radius:8px; padding:.5rem .75rem; cursor:pointer; }
.race-again:hover{ background:#E4DDFF; }
.lane{ display:grid; grid-template-columns:120px 1fr 96px; align-items:center; gap:1rem; }
.lane-name{ font-weight:600; font-size:.9rem; }
.lane-us .lane-name{ color:var(--v); }
.lane-track{ position:relative; height:40px; border-radius:99px; background:var(--bg-3); overflow:hidden; }
.lane-bar{ position:absolute; inset:0 auto 0 0; width:0; border-radius:99px; }
.lane-them .lane-bar{ background:linear-gradient(90deg,#E2E5EC,#CDD2DC); }
.lane-us .lane-bar{ background:var(--grad); }
.lane-steps{ position:absolute; inset:0; list-style:none; margin:0; padding:0 .4rem;
  display:flex; justify-content:space-around; align-items:center; }
.lane-steps li{ font-size:.76rem; font-weight:500; color:var(--ink-3); transition:color .3s; }
.lane-end{ font-size:.86rem; font-weight:600; opacity:0; transition:opacity .4s; }
.lane-them .lane-end{ color:var(--ink-3); }
.lane-us .lane-end{ color:#15803D; }

.race.run .lane-us .lane-bar{ animation:laneUs 1.5s .3s cubic-bezier(.3,.7,.3,1) forwards; }
.race.run .lane-them .lane-bar{ animation:laneThem 8s .3s cubic-bezier(.2,.6,.4,1) forwards; }
@keyframes laneUs{ to{ width:100%; } }
@keyframes laneThem{ to{ width:44%; } }
.race.run .lane-us li{ animation:stepOn .3s forwards; }
.race.run .lane-us li:nth-child(1){ animation-delay:.55s; }
.race.run .lane-us li:nth-child(2){ animation-delay:1.05s; }
.race.run .lane-us li:nth-child(3){ animation-delay:1.55s; }
.race.run .lane-them li:nth-child(1){ animation:stepThem .3s .7s forwards; }
.race.run .lane-them li:nth-child(2){ animation:stepThem .3s 3.2s forwards, waitPulse 1.4s 3.5s infinite; }
@keyframes stepOn{ to{ color:#fff; font-weight:600; } }
@keyframes stepThem{ to{ color:var(--ink); font-weight:600; } }
@keyframes waitPulse{ 50%{ opacity:.35; } }
.race.run .lane-us .lane-end{ opacity:1; transition-delay:1.8s; }
.race.run .lane-them .lane-end{ opacity:1; transition-delay:2.4s; }

@media (max-width:640px){
  .race{ padding:1.1rem 1rem 1.2rem; }
  .race-head{ flex-direction:column; align-items:flex-start; gap:.6rem; }
  .lane{ grid-template-columns:1fr auto; grid-template-areas:"name end" "track track"; gap:.45rem .8rem; }
  .lane-name{ grid-area:name; } .lane-end{ grid-area:end; } .lane-track{ grid-area:track; height:36px; }
  .lane-steps li{ font-size:.66rem; }
}

/* ── Vorher/Nachher aus der Admin-Vorschau ─────────────────────────────── */
.ba{ --p:50%; max-width:940px; margin:2.6rem auto 0; }
.ba > .ba-bar, .ba > .ba-stage{ background:#fff; }
.ba-bar{ display:flex; align-items:center; gap:.8rem; padding:.7rem 1rem;
  border:1px solid var(--line); border-bottom:0; border-radius:var(--r-l) var(--r-l) 0 0; }
.ba-dots{ display:flex; gap:5px; }
.ba-dots i{ width:9px; height:9px; border-radius:50%; background:var(--line-2); }
.ba-title{ font-size:.82rem; font-weight:600; color:var(--ink-2); }
.ba-eye{ margin-left:auto; display:inline-flex; align-items:center; gap:.45rem; font-size:.78rem;
  font-weight:600; color:#15803D; background:#DCFCE7; padding:.32rem .65rem; border-radius:99px; }
.ba-eye i{ width:7px; height:7px; border-radius:50%; background:#16A34A; animation:eyePulse 2s infinite; }
@keyframes eyePulse{ 0%{ box-shadow:0 0 0 0 rgba(22,163,74,.5); } 80%,100%{ box-shadow:0 0 0 7px rgba(22,163,74,0); } }
.ba-stage{ position:relative; aspect-ratio:16/10; overflow:hidden; border:1px solid var(--line);
  border-radius:0 0 var(--r-l) var(--r-l); box-shadow:var(--sh-3); touch-action:pan-y; }
.ba-new{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; }
.ba-old{ position:absolute; inset:0; background:#F3F4F7; clip-path:inset(0 calc(100% - var(--p)) 0 0); }
.ba-old span{ position:absolute; display:flex; gap:2%; }
.ba-old i{ display:block; background:#DDE0E6; border-radius:4px; }
.wf-top{ left:0; right:0; top:0; height:3.4%; background:#D3D6DD; }
.wf-head{ left:5.7%; right:5.7%; top:6%; height:7%; align-items:center; }
.wf-head i{ width:9%; height:60%; }
.wf-head .wf-search{ flex:1; height:55%; background:#E6E8ED; border:1px solid #D3D6DD; }
.wf-nav{ left:5.7%; top:17%; height:3%; gap:3% !important; width:60%; }
.wf-nav i{ flex:1; height:100%; }
.wf-hero{ left:5.7%; right:5.7%; top:24%; height:44%; background:#E3E5EA; border-radius:14px;
  flex-direction:column; justify-content:center; padding:0 5%; gap:4% !important; }
.wf-hero i:nth-child(1){ width:40%; height:12%; background:#CDD1D8; }
.wf-hero i:nth-child(2){ width:55%; height:6%; }
.wf-hero i:nth-child(3){ width:18%; height:12%; background:#CDD1D8; border-radius:99px; }
.wf-row{ left:5.7%; right:5.7%; top:73%; height:14%; }
.wf-row i{ flex:1; background:#fff; border:1px solid #DDE0E6; }
.ba-lab{ position:absolute; top:14px; z-index:2; font-size:.76rem; font-weight:600; color:#fff;
  background:rgba(12,14,20,.62); backdrop-filter:blur(4px); padding:.35rem .65rem; border-radius:8px; }
.ba-lab-l{ left:14px; } .ba-lab-r{ right:14px; background:rgba(91,61,245,.85); }
.ba-handle{ position:absolute; top:0; bottom:0; left:var(--p); width:2px; margin-left:-1px; z-index:2;
  background:#fff; box-shadow:0 0 0 1px rgba(12,14,20,.12), 0 0 18px rgba(12,14,20,.25); }
.ba-handle i{ position:absolute; top:50%; left:50%; translate:-50% -50%; width:42px; height:42px;
  border-radius:50%; display:grid; place-items:center; background:#fff; color:var(--v);
  font:700 .9rem/1 var(--font); font-style:normal; box-shadow:var(--sh-3); transition:transform .2s; }
.ba-stage:hover .ba-handle i{ transform:scale(1.08); }
.ba-stage:focus-within .ba-handle i{ box-shadow:var(--sh-3), 0 0 0 3px var(--v); }
.ba-range{ position:absolute; inset:0; z-index:3; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; }
.ba figcaption{ margin-top:.8rem; text-align:center; font-size:.84rem; color:var(--ink-3); }
@media (max-width:560px){
  .ba-stage{ aspect-ratio:4/3.4; }
  .ba-lab{ top:10px; font-size:.68rem; } .ba-lab-l{ left:10px; } .ba-lab-r{ right:10px; }
  .ba-title{ display:none; }
}

/* ── „Ohne Risiko": drei Schritte mit kleiner Vorführung ────────────────
   Jede Karte zeigt oben, was in dem Schritt passiert (gezeichnet, keine
   Aufnahme): der Download läuft voll, drei Klicks werden abgehakt, die
   Vorschau steht neben dem bisherigen Shop. Die Vorführungen laufen erst,
   wenn die Karte im Bild ist (.in aus dem Reveal). */
.sec-safe{ overflow:hidden;
  background:
    radial-gradient(55% 45% at 50% 0%, rgba(91,61,245,.09), transparent 70%),
    radial-gradient(35% 40% at 95% 55%, rgba(8,145,178,.07), transparent 70%),
    radial-gradient(35% 40% at 5% 70%, rgba(22,163,74,.05), transparent 70%),
    var(--bg); }
.safe-kicker{ display:inline-flex; align-items:center; gap:.45rem; margin-bottom:1.1rem;
  font-size:.76rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#15803D; background:#DCFCE7; padding:.42rem .9rem; border-radius:99px; }
.safe-chips{ list-style:none; padding:0; margin:1.6rem 0 0; display:flex; flex-wrap:wrap;
  justify-content:center; gap:.55rem; }
.safe-chips li{ display:inline-flex; align-items:center; gap:.45rem; font-size:.86rem; font-weight:500;
  color:var(--ink-2); background:#fff; border:1px solid var(--line); border-radius:99px;
  padding:.45rem .95rem .45rem .5rem; box-shadow:var(--sh-1); }
.safe-chips li::before{ content:"✓"; display:grid; place-items:center; width:20px; height:20px;
  border-radius:50%; background:#16A34A; color:#fff; font-size:.66rem; font-weight:700; }

.flow{ position:relative; list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(3,1fr); gap:1.6rem; }
/* Die gestrichelte Linie liegt hinter den Karten und ist nur in den Lücken zu
   sehen — sie wandert, damit man die Richtung liest. */
.flow::before{ content:""; position:absolute; left:12%; right:12%; top:92px; height:2px;
  background:repeating-linear-gradient(90deg, var(--v) 0 8px, transparent 8px 16px);
  opacity:.45; animation:flowDash 1.2s linear infinite; }
@keyframes flowDash{ to{ background-position:16px 0; } }
.flow-card{ position:relative; display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--sh-2); overflow:hidden;
  transition:opacity .7s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; }
.flow-card:hover{ transform:translateY(-6px); box-shadow:var(--sh-3); border-color:#D9D1FF; }
.flow-art{ position:relative; height:184px; display:grid; place-items:center; overflow:hidden;
  background:linear-gradient(160deg,#F4F1FF 0%,#EEF4FF 55%,#E8F7FA 100%); border-bottom:1px solid var(--line); }
.flow-body{ padding:1.4rem 1.6rem 1.7rem; }
.flow-n{ display:block; font:700 2.6rem/1 var(--disp); letter-spacing:-.04em; margin-bottom:.7rem;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.flow-body h3{ font-size:1.28rem; }
.flow-body p{ color:var(--ink-2); font-size:.96rem; margin-top:.55rem; }
.flow-body strong{ color:var(--ink); font-weight:600; }

/* 01 · Download */
.dl-file{ width:80%; display:flex; align-items:center; gap:11px; padding:12px 13px; background:#fff;
  border-radius:13px; box-shadow:var(--sh-2); }
.dl-ico{ flex:none; display:grid; place-items:center; width:38px; height:38px; border-radius:10px;
  background:var(--v); color:#fff; font:700 .64rem/1 var(--font); letter-spacing:.06em; }
.dl-meta{ flex:1; display:grid; gap:8px; min-width:0; }
.dl-meta b{ font-size:.8rem; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dl-bar{ display:block; height:6px; border-radius:99px; background:var(--bg-3); overflow:hidden; }
.dl-bar i{ display:block; height:100%; width:0; border-radius:99px; background:var(--grad); }
.dl-done{ flex:none; display:grid; place-items:center; width:24px; height:24px; border-radius:50%;
  background:#16A34A; color:#fff; font-size:.72rem; font-weight:700; transform:scale(0); }
.dl-chip{ position:absolute; bottom:18px; font-size:.74rem; font-weight:700; color:#15803D;
  background:#DCFCE7; padding:.3rem .75rem; border-radius:99px; opacity:0; transform:translateY(6px); }
.flow-card.in .dl-bar i{ animation:dlFill 5s .4s infinite; }
.flow-card.in .dl-done{ animation:dlDone 5s .4s infinite; }
.flow-card.in .dl-chip{ animation:chipIn .5s 2.2s var(--ease) forwards; }
@keyframes dlFill{ 0%{ width:0; } 36%{ width:100%; } 92%{ width:100%; opacity:1; } 100%{ width:100%; opacity:0; } }
@keyframes dlDone{ 0%,37%{ transform:scale(0); } 43%{ transform:scale(1.25); } 49%,92%{ transform:scale(1); } 100%{ transform:scale(0); } }
@keyframes chipIn{ to{ opacity:1; transform:none; } }

/* 02 · Drei Klicks */
.fx-inst{ grid-template-columns:repeat(3,auto); justify-content:center; align-content:center; gap:10px 8px; }
.in-btn{ display:inline-flex; align-items:center; gap:6px; padding:9px 11px 9px 8px; background:#fff;
  border:1.5px solid var(--line-2); border-radius:10px; box-shadow:var(--sh-1);
  font-size:.74rem; font-weight:600; color:var(--ink-2); }
.in-btn i{ position:relative; display:grid; place-items:center; width:19px; height:19px; border-radius:50%;
  background:var(--bg-3); color:var(--ink-3); font:700 .64rem/1 var(--font); font-style:normal; }
.in-btn i::after{ content:"✓"; position:absolute; inset:0; display:grid; place-items:center; border-radius:50%;
  background:#16A34A; color:#fff; transform:scale(0); }
.in-count{ grid-column:1 / -1; justify-self:center; font-size:.76rem; font-weight:700; color:var(--v);
  background:#fff; padding:.3rem .8rem; border-radius:99px; box-shadow:var(--sh-1); opacity:0; }
.flow-card.in .in-btn{ animation:inPress 5s infinite; }
.flow-card.in .in-btn i::after{ animation:inCheck 5s infinite; }
.flow-card.in .in-btn:nth-child(1), .flow-card.in .in-btn:nth-child(1) i::after{ animation-delay:.5s; }
.flow-card.in .in-btn:nth-child(2), .flow-card.in .in-btn:nth-child(2) i::after{ animation-delay:1.3s; }
.flow-card.in .in-btn:nth-child(3), .flow-card.in .in-btn:nth-child(3) i::after{ animation-delay:2.1s; }
.flow-card.in .in-count{ animation:chipIn .5s 2.8s var(--ease) forwards; transform:translateY(6px); }
@keyframes inPress{ 0%{ transform:none; } 4%{ transform:scale(.9); border-color:var(--v); box-shadow:0 0 0 4px rgba(91,61,245,.15); }
  9%,78%{ transform:none; border-color:#86EFAC; box-shadow:var(--sh-1); } 88%,100%{ border-color:var(--line-2); } }
@keyframes inCheck{ 0%,5%{ transform:scale(0); } 10%{ transform:scale(1.25); } 14%,78%{ transform:scale(1); } 88%,100%{ transform:scale(0); } }

/* 03 · Vergleichen */
.fx-cmp{ display:flex; justify-content:center; align-items:center; gap:14px; padding-top:18px; }
.cm-eye{ position:absolute; top:14px; left:50%; translate:-50% 0; display:inline-flex; align-items:center; gap:5px;
  font-size:.7rem; font-weight:700; color:#15803D; background:#DCFCE7; padding:.25rem .65rem; border-radius:99px; }
.cm-shop{ position:relative; width:40%; height:108px; display:grid; grid-template-rows:12px 1fr 20px; gap:5px;
  padding:6px; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:var(--sh-2); }
.cm-shop i{ display:block; border-radius:4px; }
.cm-shop em{ position:absolute; left:50%; bottom:-22px; translate:-50% 0; font-size:.66rem; font-weight:700;
  font-style:normal; color:var(--ink-3); white-space:nowrap; }
.cm-old i{ background:#E3E5EA; }
.cm-old i:nth-of-type(3){ background:repeating-linear-gradient(90deg,#E3E5EA 0 30%,transparent 30% 35%); }
.cm-new{ border-color:#D9D1FF; }
.cm-new em{ color:var(--v); }
.cm-new i:nth-of-type(1){ background:#1E1916; }
.cm-new i:nth-of-type(2){ background:
  radial-gradient(circle at 18% 72%, #C2410C 0 5px, transparent 6px),
  linear-gradient(90deg, transparent 55%, rgba(234,221,205,.55) 55% 64%, transparent 64% 70%, rgba(234,221,205,.4) 70% 80%, transparent 80%),
  linear-gradient(120deg,#35302D,#6A615A); }
.cm-new i:nth-of-type(3){ background:repeating-linear-gradient(90deg,#EFE4D6 0 30%,transparent 30% 35%); }
.flow-card.in .cm-new{ animation:cmNew 5s .6s infinite; }
@keyframes cmNew{ 0%,8%{ opacity:.35; transform:scale(.93); filter:saturate(0); }
  22%,85%{ opacity:1; transform:none; filter:none; box-shadow:var(--sh-3), 0 0 0 3px rgba(91,61,245,.18); }
  100%{ opacity:.35; transform:scale(.93); filter:saturate(0); } }
.cm-eye svg{ flex:none; }

@media (max-width:980px){
  .flow{ grid-template-columns:1fr; max-width:520px; margin-inline:auto; gap:1.2rem; }
  .flow::before{ left:50%; right:auto; top:0; bottom:0; width:2px; height:auto;
    background:repeating-linear-gradient(180deg, var(--v) 0 8px, transparent 8px 16px);
    animation-name:flowDashV; }
  @keyframes flowDashV{ to{ background-position:0 16px; } }
  .flow-art{ height:170px; }
}

@media (prefers-reduced-motion:reduce){
  .flow::before, .flow-card.in .dl-bar i, .flow-card.in .dl-done, .flow-card.in .in-btn,
  .flow-card.in .in-btn i::after, .flow-card.in .cm-new{ animation:none !important; }
  .dl-bar i{ width:100%; } .dl-done, .in-btn i::after{ transform:none; }
  .dl-chip, .in-count{ opacity:1; transform:none; }
}

/* ── Vergleichstabelle: Zeilen und Haken nacheinander ──────────────────── */
.cmp-row:nth-child(2){ --i:1 } .cmp-row:nth-child(3){ --i:2 } .cmp-row:nth-child(4){ --i:3 }
.cmp-row:nth-child(5){ --i:4 } .cmp-row:nth-child(6){ --i:5 } .cmp-row:nth-child(7){ --i:6 }
.cmp-row:nth-child(8){ --i:7 }
.cmp.in .cmp-row{ animation:rowIn .5s var(--ease) both; animation-delay:calc(var(--i,0) * 110ms); }
.cmp.in .cmp-row .cmp-us.yes{ animation:tickIn .45s var(--ease) both; animation-delay:calc(var(--i,0) * 110ms + 250ms); }
.cmp.in .cmp-plus .cmp-us.yes{ animation:tickIn .45s var(--ease) both, plusGlow 1.2s ease-out both;
  animation-delay:calc(var(--i,0) * 110ms + 250ms), calc(var(--i,0) * 110ms + 400ms); }
@keyframes rowIn{ from{ opacity:0; transform:translateY(8px); } }
@keyframes tickIn{ 0%{ transform:scale(0); } 60%{ transform:scale(1.35); } 100%{ transform:none; } }
@keyframes plusGlow{ 0%{ background-color:var(--v-soft); } 40%{ background-color:#DCD3FF; } 100%{ background-color:var(--v-soft); } }

/* ── Testwoche: sieben Tage, der letzte gehört Ihnen ────────────────────── */
.week{ list-style:none; display:grid; grid-template-columns:repeat(7,1fr); max-width:560px;
  margin:2rem auto 0; padding:0; position:relative; }
.week::before{ content:""; position:absolute; left:calc(100%/14); right:calc(100%/14); top:7px; height:2px;
  background:rgba(255,255,255,.25); }
.week li{ position:relative; display:grid; justify-items:center; align-content:start; gap:.5rem; }
.week i{ width:16px; height:16px; border-radius:50%; background:rgba(255,255,255,.3); }
.week span{ font-size:.7rem; line-height:1.3; color:rgba(255,255,255,.7); text-align:center; }
.week b{ color:#fff; font-weight:600; }
.week.in i{ animation:dayOn .35s ease-out both; }
.week.in li:nth-child(1) i{ animation-delay:.3s } .week.in li:nth-child(2) i{ animation-delay:.5s }
.week.in li:nth-child(3) i{ animation-delay:.7s } .week.in li:nth-child(4) i{ animation-delay:.9s }
.week.in li:nth-child(5) i{ animation-delay:1.1s } .week.in li:nth-child(6) i{ animation-delay:1.3s }
.week.in .week-end i{ animation:dayOn .35s 1.5s ease-out both, dayCall 2s 1.9s infinite; }
@keyframes dayOn{ to{ background:#fff; } }
@keyframes dayCall{ 0%{ box-shadow:0 0 0 0 rgba(255,255,255,.6); } 80%,100%{ box-shadow:0 0 0 10px rgba(255,255,255,0); } }
@media (max-width:560px){ .week span{ font-size:.62rem; } }

@media (prefers-reduced-motion:reduce){
  .hero h1 .grad, .ba-eye i, .week.in .week-end i,
  .race.run .lane-them li:nth-child(2){ animation:none !important; }
  .week i{ background:#fff; }
  .race .lane-us .lane-bar{ width:100%; } .race .lane-them .lane-bar{ width:44%; }
  .race .lane-end{ opacity:1; }
  .btn-primary::after{ display:none; }
}

/* ── „Ohne Risiko": vier Sorgen, vier Antworten ─────────────────────────
   Die Sorge steht als Sprechblase oben und wird durchgestrichen, sobald die
   Karte im Bild ist. Darunter die Antwort und ein kleiner Beleg, was genau
   gilt (Liste, Schalter, Sichtbarkeit, Uhr). */
.worry-head{ text-align:center; margin:3.6rem auto 1.7rem; }
.worry-head h3{ font-size:clamp(1.4rem,2.2vw,1.75rem); }
.worry-head p{ margin-top:.45rem; color:var(--ink-3); font-size:.96rem; }
.worries{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.3rem; }
.worry{ display:flex; flex-direction:column; gap:1.15rem; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-xl); padding:1.5rem 1.6rem 1.4rem; box-shadow:var(--sh-1);
  transition:opacity .7s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; }
.worry:hover{ transform:translateY(-4px); box-shadow:var(--sh-3); border-color:#BBF7D0; }
.worry-q{ align-self:flex-start; background:var(--bg-2); border:1px solid var(--line);
  border-radius:16px 16px 16px 4px; padding:.65rem .95rem; font:500 1rem/1.45 var(--disp); color:var(--ink-2); }
.worry-q span{ background:linear-gradient(rgba(220,38,38,.7),rgba(220,38,38,.7)) no-repeat 0 58% / 0% 1.5px;
  transition:background-size .7s .6s var(--ease), color .5s .6s; }
.worry.in .worry-q span{ background-size:100% 1.5px; }
.worry-a{ display:flex; gap:.95rem; align-items:flex-start; }
.worry-ico{ flex:none; display:grid; place-items:center; width:46px; height:46px; border-radius:13px;
  background:#DCFCE7; color:#15803D; }
.worry.in .worry-ico{ animation:numPop .55s 1.1s var(--ease) both; }
@keyframes numPop{ 0%{ transform:scale(.4); } 60%{ transform:scale(1.15); } 100%{ transform:none; } }
.worry-a b{ display:block; font:600 1.14rem/1.25 var(--disp); color:var(--ink); }
.worry-a p{ margin-top:.3rem; font-size:.93rem; color:var(--ink-2); }
.worry-fx{ margin-top:auto; padding-top:1rem; border-top:1px dashed var(--line-2); }

/* Alles bleibt: die Dinge, die ein Template nicht anfasst */
.fx-keep{ list-style:none; margin-bottom:0; padding-left:0; display:flex; flex-wrap:wrap; gap:.4rem; }
.fx-keep li{ display:inline-flex; align-items:center; gap:.3rem; font-size:.78rem; font-weight:600; color:#15803D;
  background:#F0FDF4; border:1px solid #BBF7D0; border-radius:99px; padding:.28rem .7rem .28rem .5rem; }
.fx-keep li::before{ content:"✓"; font-size:.7rem; }
.worry.in .fx-keep li{ animation:keepIn .4s var(--ease) both; }
.worry.in .fx-keep li:nth-child(1){ animation-delay:1.2s } .worry.in .fx-keep li:nth-child(2){ animation-delay:1.32s }
.worry.in .fx-keep li:nth-child(3){ animation-delay:1.44s } .worry.in .fx-keep li:nth-child(4){ animation-delay:1.56s }
.worry.in .fx-keep li:nth-child(5){ animation-delay:1.68s }
@keyframes keepIn{ from{ opacity:0; transform:translateY(6px) scale(.9); } }

/* Niemand sieht etwas: wer was sieht */
.fx-who{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.who{ display:grid; gap:.2rem; padding:.65rem .8rem; border-radius:12px; }
.who i{ font-style:normal; font-size:.67rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.who b{ font-size:.84rem; font-weight:600; line-height:1.35; }
.who-admin{ position:relative; background:var(--v-soft); }
.who-admin i{ color:var(--v); } .who-admin b{ color:var(--ink); }
.who-admin::after{ content:""; position:absolute; top:.75rem; right:.8rem; width:7px; height:7px; border-radius:50%;
  background:var(--v); animation:eyePulseV 2s infinite; }
@keyframes eyePulseV{ 0%{ box-shadow:0 0 0 0 rgba(91,61,245,.5); } 80%,100%{ box-shadow:0 0 0 7px rgba(91,61,245,0); } }
.who-cust{ background:var(--bg-2); }
.who-cust i{ color:var(--ink-3); } .who-cust b{ color:var(--ink-2); }

/* Dann ändert sich nichts: ein Schalter, der hin und zurück geht */
.fx-toggle{ display:flex; align-items:center; flex-wrap:wrap; gap:.6rem .8rem; }
.tg-lab{ font-size:.84rem; font-weight:600; color:var(--ink); }
.tg{ position:relative; flex:none; width:46px; height:26px; border-radius:99px; background:var(--line-2); }
.tg i{ position:absolute; left:3px; top:3px; width:20px; height:20px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(16,24,40,.25); }
.tg-state{ display:grid; }
.tg-state em{ grid-area:1 / 1; font-style:normal; font-size:.8rem; font-weight:600; white-space:nowrap; }
.tg-off{ color:var(--ink-3); } .tg-on{ color:#15803D; opacity:0; }
.worry.in .tg{ animation:tgBg 5s 1.4s infinite; }
.worry.in .tg i{ animation:tgKnob 5s 1.4s infinite; }
.worry.in .tg-off{ animation:tgOff 5s 1.4s infinite; }
.worry.in .tg-on{ animation:tgOn 5s 1.4s infinite; }
@keyframes tgBg{ 0%,40%{ background:var(--line-2); } 50%,88%{ background:#16A34A; } 98%,100%{ background:var(--line-2); } }
@keyframes tgKnob{ 0%,40%{ transform:none; } 50%,88%{ transform:translateX(20px); } 98%,100%{ transform:none; } }
@keyframes tgOff{ 0%,40%{ opacity:1; } 46%,90%{ opacity:0; } 98%,100%{ opacity:1; } }
@keyframes tgOn{ 0%,40%{ opacity:0; } 46%,90%{ opacity:1; } 98%,100%{ opacity:0; } }

/* Es geht in Minuten: was Sie NICHT brauchen, wird gestrichen */
.fx-time{ display:flex; align-items:center; gap:1rem; }
.tm-dial{ position:relative; flex:none; width:40px; height:40px; border-radius:50%; border:2.5px solid var(--v); background:#fff; }
.tm-dial i{ position:absolute; left:50%; bottom:50%; width:2px; height:13px; margin-left:-1px; border-radius:2px;
  background:var(--v); transform-origin:50% 100%; animation:dialTurn 3s linear infinite; }
.tm-dial::after{ content:""; position:absolute; left:50%; top:50%; width:5px; height:5px; margin:-2.5px 0 0 -2.5px;
  border-radius:50%; background:var(--v); }
@keyframes dialTurn{ to{ transform:rotate(360deg); } }
.tm-list{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .8rem; }
.tm-list s{ text-decoration:none; font-size:.84rem; color:var(--ink-2);
  background:linear-gradient(#DC2626,#DC2626) no-repeat 0 58% / 0% 2px; transition:background-size .4s, color .4s; }
.worry.in .tm-list s{ background-size:100% 2px; color:var(--ink-3); }
.worry.in .tm-list s:nth-child(1){ transition-delay:1.3s } .worry.in .tm-list s:nth-child(2){ transition-delay:1.6s }
.worry.in .tm-list s:nth-child(3){ transition-delay:1.9s }
.tm-list b{ font-size:.8rem; font-weight:700; color:#15803D; background:#DCFCE7; padding:.28rem .7rem; border-radius:99px; }
.worry.in .tm-list b{ animation:keepIn .45s 2.3s var(--ease) both; }

/* Abschluss: ein Band mit Verlaufsrahmen statt eines einzelnen Knopfs */
.safe-cta{ display:flex; align-items:center; justify-content:space-between; gap:1.4rem 2rem; margin-top:2.4rem;
  padding:1.5rem 1.6rem 1.5rem 1.9rem; border:2px solid transparent; border-radius:var(--r-xl);
  background:linear-gradient(#fff,#fff) padding-box, var(--grad) border-box; box-shadow:var(--sh-3); }
.safe-cta-txt b{ display:block; font:600 clamp(1.1rem,1.8vw,1.3rem)/1.3 var(--disp); color:var(--ink); }
.safe-cta-txt > span{ display:block; margin-top:.35rem; font-size:.88rem; color:var(--ink-3); }
.safe-cta .btn span{ transition:transform .25s var(--ease); }
.safe-cta .btn:hover span{ transform:translateX(4px); }

@media (max-width:760px){
  .worries{ grid-template-columns:1fr; }
  .worry{ padding:1.3rem 1.2rem 1.2rem; }
  .safe-cta{ flex-direction:column; align-items:stretch; text-align:center; padding:1.4rem 1.2rem; }
  .safe-cta .btn{ white-space:normal; }
}
@media (max-width:400px){ .fx-who{ grid-template-columns:1fr; } }

@media (prefers-reduced-motion:reduce){
  .who-admin::after, .tm-dial i, .worry.in .tg, .worry.in .tg i, .worry.in .tg-off, .worry.in .tg-on{ animation:none !important; }
}

/* ── Handschrift: kurze Randnotizen, wie mit dem Stift an den Rand geschrieben ─
   Nur für wenige, kurze Sätze (Hero, Preis, Abschluss) — sonst verliert sie
   ihre Wirkung. Die Unterstreichung zeichnet sich einmal von links nach rechts. */
.hand-under{ position:relative; display:inline-block; }
.hand-under svg{ position:absolute; left:-1%; bottom:-.2em; width:102%; height:.34em; overflow:visible; }
.hand-under path{ fill:none; stroke:#F2A93B; stroke-width:5; stroke-linecap:round;
  stroke-dasharray:420; stroke-dashoffset:420; vector-effect:non-scaling-stroke;
  animation:handDraw 1s .9s cubic-bezier(.6,.1,.3,1) forwards; }
.hand-under path + path{ stroke-width:3.5; opacity:.7; animation-delay:1.35s; }
@keyframes handDraw{ to{ stroke-dashoffset:0; } }
.hand-note{ display:inline-block; margin-top:1rem; transform:rotate(-2deg); transform-origin:left;
  font:700 clamp(1.55rem,2.5vw,2rem)/1.1 'Caveat', cursive; color:var(--v); }
.hand-note.reveal.in{ transform:rotate(-2deg); }
.hand-price{ position:relative; display:grid; gap:.1rem; margin-top:1.1rem; padding-left:3.4rem; }
.hand-arrow{ position:absolute; left:.2rem; top:-.9rem; width:2.8rem; height:2.8rem; }
.hand-arrow path{ fill:none; stroke:var(--ink-3); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.hp-num{ font:700 2.1rem/1 'Caveat', cursive; color:var(--ink); }
.hp-num small{ font-size:.62em; color:var(--ink-2); }
.hp-sub{ font:700 1.3rem/1.15 'Caveat', cursive; color:var(--ink-3); }
.cta .hand-note-light{ color:#FFE7B8; margin:0 0 .6rem; transform-origin:center; }
.cta .hand-note-light.reveal.in{ transform:rotate(-2deg); }
@media (prefers-reduced-motion:reduce){ .hand-under path{ stroke-dashoffset:0; animation:none; } }
.hand-note a{ color:inherit; text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:4px; }
.hand-note a:hover{ text-decoration-style:wavy; }
.sec-head-center .hand-note{ transform-origin:center; }
.hand-link{ display:inline-block; margin-top:.8rem; transform:rotate(-1.5deg); transform-origin:left;
  font:700 1.5rem/1.1 'Caveat', cursive; color:var(--v); }
.hand-link:hover{ text-decoration:underline; text-decoration-style:wavy; text-underline-offset:5px; }

/* ── Hero-Bühne: zwei Telefone, drei Designs ───────────────────────────────
   Links wechselt die Startseite durch die drei Bühnen von Prisma, rechts steht
   die Artikelseite. Der Umschalter darüber zeigt, welches Design gerade läuft;
   die Chips nennen weitere Bereiche mit je drei Designs. Die Gerätehüllen sind
   gezeichnet und bewusst generisch; Rundungen in Prozent (Breite / Höhe), damit
   das Telefon in jeder Größe gleich aussieht. Das Schweben läuft über
   `translate`, die Kippung beim Scrollen über `transform` — beide stören sich nicht. */
.hero-shot{ isolation:isolate; max-width:640px; margin-inline:auto; }
.hero-shot::before{ content:""; position:absolute; inset:10% -10% 8% -6%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(42% 42% at 35% 40%, rgba(91,61,245,.34), transparent 70%),
    radial-gradient(38% 40% at 70% 65%, rgba(8,145,178,.26), transparent 70%),
    radial-gradient(28% 28% at 80% 18%, rgba(242,169,59,.24), transparent 70%);
  filter:blur(36px); animation:glowDrift 14s ease-in-out infinite alternate; }
@keyframes glowDrift{ 50%{ transform:translate(3%,-2%) scale(1.06) rotate(4deg); } 100%{ transform:translate(-3%,2%) scale(.98) rotate(-3deg); } }

/* Umschalter: drei Designs, der Daumen gleitet mit, ein Balken zeigt die Zeit */
.duo-switch{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); width:min(100%,360px);
  margin:0 auto 1.4rem; padding:4px; background:#fff; border:1px solid var(--line); border-radius:99px; box-shadow:var(--sh-2); }
.duo-thumb{ position:absolute; top:4px; bottom:4px; left:4px; width:calc((100% - 8px) / 3); border-radius:99px;
  background:var(--grad); box-shadow:var(--sh-v); transform:translateX(calc(var(--i, 0) * 100%));
  transition:transform .55s cubic-bezier(.5,.1,.2,1); }
.duo-switch button{ position:relative; z-index:1; overflow:hidden; border:0; background:none; cursor:pointer;
  font:600 .86rem/1 var(--font); color:var(--ink-2); padding:.62rem .4rem; border-radius:99px; transition:color .35s; }
.duo-switch button[aria-selected="true"]{ color:#fff; }
.duo-switch button:focus-visible{ outline:2px solid var(--v); outline-offset:2px; }
.duo-switch button i{ position:absolute; left:22%; right:22%; bottom:5px; height:2px; border-radius:2px;
  background:rgba(255,255,255,.85); transform:scaleX(0); transform-origin:left; }
.duo-switch.is-auto button[aria-selected="true"] i{ animation:duoTime var(--duo-t, 3.6s) linear forwards; }
@keyframes duoTime{ to{ transform:scaleX(1); } }

/* Bühne am Rechner: das Browserfenster steht im Fluss, die beiden Telefone davor
   rechts unten. Am Telefon (unten) nur die zwei Telefone nebeneinander. */
.duo-stage{ position:relative; padding:0 0 22% 0; }
.hs-browser{ position:relative; width:86%; background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.hs-bar{ display:flex; align-items:center; gap:10px; height:32px; padding:0 11px; background:#F6F7FA; border-bottom:1px solid var(--line); }
.hs-dots{ display:flex; gap:6px; }
.hs-dots i{ width:9px; height:9px; border-radius:50%; }
.hs-dots i:nth-child(1){ background:#F2A0A0; } .hs-dots i:nth-child(2){ background:#F5D08A; } .hs-dots i:nth-child(3){ background:#9FD9A8; }
.hs-url{ flex:1; max-width:220px; margin-inline:auto; display:flex; align-items:center; justify-content:center; gap:6px;
  height:20px; background:#fff; border:1px solid var(--line); border-radius:6px; font-size:10.5px; font-weight:500; color:var(--ink-3); }
.hs-live{ display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:600; color:#15803D; }
.hs-live i{ width:7px; height:7px; border-radius:50%; background:#16A34A; animation:eyePulse 2s infinite; }
.hs-browser .duo-screen{ border-radius:0; }
.hs-browser .duo-screen img{ display:block; width:100%; height:auto; aspect-ratio:1440/1100; object-fit:cover; object-position:top; }

/* Falt-Telefon: aufgeklappt ein Querformat-Bildschirm (1040 : 748) mit schmalem
   schwarzen Rand und großen Rundungen, zugeklappt ein kurzes, breites Telefon
   (480 : 690) mit Kamera oben rechts und dem Falz links als Metallkante.
   Gezeichnet, ohne Marke. Die linke Hälfte klappt um die Mitte nach vorn
   (rotateY um ihre rechte Kante); ihre Rückseite ist der Außenbildschirm.
   Zugeklappt rückt der Körper um ein Viertel nach links, damit das geschlossene
   Telefon mittig steht. Das Schweben läuft über `translate`, das Klappen über
   `transform` — beide stören sich nicht. */
.fold{ --metal:linear-gradient(140deg, #E6E3DC 0%, #A9A49A 24%, #F3F1EC 46%, #8F8A80 68%, #D8D4CC 88%, #A8A399 100%);
  --bez:5px; --r:26px; perspective:2000px; animation:phoneFloat 6s ease-in-out infinite alternate;
  filter:drop-shadow(0 34px 34px rgba(16,24,40,.30)) drop-shadow(0 8px 12px rgba(16,24,40,.16)); }
@keyframes phoneFloat{ from{ translate:0 0; } to{ translate:0 -12px; } }
.fold-body{ position:relative; transform-style:preserve-3d; transition:transform 1.25s cubic-bezier(.65,0,.25,1); }

/* beide Hälften: schwarzer Rand in einem hauchdünnen Metallrahmen */
.fold-r, .fold-front, .fold-back{ padding:var(--bez); border:2px solid transparent;
  background:linear-gradient(#050608, #050608) padding-box, var(--metal) border-box; }
.fold-r{ position:relative; width:50%; margin-left:50%; border-left:0; padding-left:0; border-radius:0 var(--r) var(--r) 0; }
.fold-l{ position:absolute; left:0; top:0; bottom:0; width:50%; transform-origin:right center; transform-style:preserve-3d;
  transition:transform 1.25s cubic-bezier(.65,0,.25,1); }
.fold-face{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.fold-front{ border-right:0; padding-right:0; border-radius:var(--r) 0 0 var(--r); }
.fold-back{ transform:rotateY(180deg); border-radius:var(--r); }

/* Innerer Bildschirm: jede Hälfte zeigt ihre Hälfte derselben Aufnahme */
.fold .fold-inner{ position:relative; overflow:hidden; }
.fold .fold-inner-r{ border-radius:0 calc(var(--r) - 6px) calc(var(--r) - 6px) 0; }
.fold .fold-inner-l{ border-radius:calc(var(--r) - 6px) 0 0 calc(var(--r) - 6px); height:100%; }
.fold .fold-inner img{ display:block; width:200%; max-width:none; height:auto; aspect-ratio:1040/748; object-fit:cover; object-position:top; }
.fold .fold-inner-r img{ margin-left:-100%; }
.fold .fold-inner-r img + img{ position:absolute; top:0; left:-100%; margin:0; height:100%; }
.fold .fold-inner-l img{ position:absolute; top:0; left:0; height:100%; }
/* Unschärfe beim Aufklappen, in zwei Schritten:
   1. Der Außenbildschirm (Vorderseite) wird langsam unscharf, während er wegklappt.
   2. Aufgeklappt liegt ein Weichzeichner über dem inneren Bildschirm, der von links
      nach rechts verschwindet — erst über der linken Hälfte, dann über der rechten,
      mit weicher Kante (wandernde Maske). Zugeklappt ist alles wieder zurückgesetzt. */
.fold .fold-cover img{ transition:filter .3s; }
.fold:not(.is-closed) .fold-cover img{ filter:blur(12px) brightness(.95); transition:filter .9s ease-in; }
/* Mattglas: eine unscharfe, weiß-hellblau getönte Kopie der Aufnahme, durch die der
   Shop darunter schwach durchscheint. Eine weiche Kante wandert in einem Zug vom
   linken bis zum rechten Rand über beide Hälften: --e ist die Lage der Kante in
   Prozent der Ebenenbreite; die rechte Hälfte läuft um genau eine Hälfte versetzt mit. */
@property --e{ syntax:'<percentage>'; inherits:false; initial-value:-40%; }
.fold .fold-blur{ position:absolute; inset:-40px; z-index:3; pointer-events:none; --e:-40%; opacity:.9;
  background-image:linear-gradient(120deg, rgba(255,255,255,.62), rgba(186,222,255,.55) 45%, rgba(236,246,255,.5) 75%, rgba(255,255,255,.58)), var(--shot, none);
  background-repeat:no-repeat; background-size:100% 100%, calc(200% + 80px) auto; filter:blur(16px) saturate(1.1);
  -webkit-mask-image:linear-gradient(90deg, transparent var(--e), #000 calc(var(--e) + 40%));
  mask-image:linear-gradient(90deg, transparent var(--e), #000 calc(var(--e) + 40%)); }
.fold .fold-inner-l .fold-blur{ background-position:0 0, left top; }
.fold .fold-inner-r .fold-blur{ background-position:0 0, right top;
  /* dieselbe Kante, um genau eine Hälftenbreite (Ebene minus 2 × 40px Rand) versetzt */
  -webkit-mask-image:linear-gradient(90deg, transparent calc(var(--e) - 100% + 80px), #000 calc(var(--e) - 60% + 80px));
  mask-image:linear-gradient(90deg, transparent calc(var(--e) - 100% + 80px), #000 calc(var(--e) - 60% + 80px)); }
.fold:not(.is-closed) .fold-inner-l .fold-blur{ animation:blurSweepL 1.8s 1.15s cubic-bezier(.45,0,.35,1) forwards; }
.fold:not(.is-closed) .fold-inner-r .fold-blur{ animation:blurSweepL 1.8s 1.15s cubic-bezier(.45,0,.35,1) forwards; }
@keyframes blurSweepL{ from{ --e:-40%; } to{ --e:230%; } }
@media (prefers-reduced-motion:reduce){ .fold .fold-blur{ display:none; } .fold .fold-cover img{ filter:none; } }
.fold .fold-inner-r{ margin-left:-1px; }
/* Kamera im inneren Bildschirm, oben rechts */
.fold-r::after{ content:""; position:absolute; z-index:4; top:calc(var(--bez) + 2.6%); right:calc(var(--bez) + 5%); width:3.2%; aspect-ratio:1;
  border-radius:50%; background:radial-gradient(circle at 40% 40%, #2A3A52, #04060A 70%); }
/* Beim Klappen fällt Licht anders: die umklappende Hälfte dunkelt ab */
.fold-front::after{ content:""; position:absolute; inset:0; z-index:5; border-radius:inherit; pointer-events:none;
  background:#000; opacity:0; transition:opacity 1.25s cubic-bezier(.65,0,.25,1); }

/* Außenbildschirm (zugeklappt), Kamera oben rechts, Glasreflex */
.fold .fold-cover{ position:absolute; inset:var(--bez); border-radius:calc(var(--r) - 6px); overflow:hidden; }
.fold .fold-cover img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; }
.fold-back::before{ content:""; position:absolute; z-index:4; top:calc(var(--bez) + 3.2%); right:calc(var(--bez) + 6%);
  width:7.5%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 40% 40%, #2A3A52, #04060A 70%); }
.fold-back::after{ content:""; position:absolute; z-index:3; inset:var(--bez); border-radius:calc(var(--r) - 6px); pointer-events:none;
  background:linear-gradient(125deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.04) 30%, transparent 44%); }

/* der Falz zugeklappt: links eine gerundete Metallkante */
.fold-spine{ position:absolute; z-index:6; left:50%; top:1.2%; bottom:1.2%; width:8px; translate:-100% 0; border-radius:8px 0 0 8px;
  background:linear-gradient(90deg, #8F8A80, #EDEAE4 45%, #A9A49A 80%, #6F6A61); opacity:0; transition:opacity .3s; pointer-events:none; }

.fold.is-closed .fold-l{ transform:rotateY(180deg); }
.fold.is-closed .fold-body{ transform:translateX(-25%); }
.fold.is-closed .fold-front::after{ opacity:.55; }
.fold.is-closed .fold-spine{ opacity:1; transition-delay:.95s; }

/* Am Rechner steht das Falt-Telefon vor dem Browserfenster, rechts unten */
.duo-stage > .fold{ position:absolute; right:-6%; bottom:2%; width:58%; z-index:3; }
@media (max-width:760px){
  .duo-stage{ padding:0; }
  .hs-browser{ display:none; }
  .duo-stage > .fold{ position:relative; right:auto; bottom:auto; width:100%; margin:0 auto 1.4rem; }
  .fold{ --bez:4px; --r:20px; }
}

/* Bildschirm: das neue Design wischt von oben herein, ein Lichtstreif folgt */
.duo-screen{ position:relative; overflow:hidden; border-radius:14% / 6.5%; }
.duo-screen img{ border-radius:0; }
.duo-screen img + img{ position:absolute; inset:0; height:100%; }
.duo-screen img:not(.on):not(.was){ visibility:hidden; }
.duo-screen img.was{ z-index:1; }
.duo-screen img.on{ z-index:2; }
.duo-screen img.on.in{ animation:screenIn .75s cubic-bezier(.6,.05,.25,1) both; }
@keyframes screenIn{ from{ clip-path:inset(0 0 100% 0); transform:scale(1.06); filter:brightness(1.15); } to{ clip-path:inset(0); transform:none; filter:none; } }
.duo-shine{ position:absolute; inset:-20% -60%; z-index:3; pointer-events:none; opacity:0;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%); }
.duo-screen.flash .duo-shine{ animation:screenShine .9s .25s ease-out; }
@keyframes screenShine{ from{ opacity:1; transform:translateX(-40%); } to{ opacity:0; transform:translateX(40%); } }

/* ×3: das Versprechen als Plakette, mit einem umlaufenden Ring */
.duo-badge{ position:absolute; z-index:4; right:0; bottom:6%; display:flex; align-items:center; gap:.6rem;
  padding:.6rem .9rem .6rem .6rem; background:#fff; border-radius:18px; box-shadow:var(--sh-3);
  animation:badgeIn .6s 1s cubic-bezier(.3,1.6,.5,1) both; }
.duo-badge b{ position:relative; display:grid; place-items:center; width:46px; height:46px; border-radius:50%;
  font:700 1.15rem/1 var(--disp); color:#fff; background:var(--grad); }
.duo-badge b::before{ content:""; position:absolute; inset:-5px; border-radius:50%;
  background:conic-gradient(from 0deg, #5B3DF5, #0891B2, #F2A93B, #5B3DF5);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  animation:ringSpin 4s linear infinite; }
.duo-badge span{ font-size:.8rem; font-weight:600; line-height:1.25; color:var(--ink); }
@keyframes badgeIn{ from{ opacity:0; transform:scale(.6) rotate(-8deg); } }
@keyframes ringSpin{ to{ transform:rotate(360deg); } }

/* Weitere Bereiche mit je drei Designs: einer nach dem anderen, rund um die Telefone */
.duo-orbit{ list-style:none; margin:0; padding:0; }
.duo-orbit li{ position:absolute; z-index:4; white-space:nowrap; font-size:.78rem; font-weight:600; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:99px; padding:.42rem .8rem .42rem .55rem; box-shadow:var(--sh-2);
  display:inline-flex; align-items:center; gap:.4rem; opacity:0; transform:translateY(8px) scale(.94);
  transition:opacity .45s, transform .45s cubic-bezier(.3,1.4,.5,1); }
.duo-orbit li::before{ content:"3"; display:grid; place-items:center; width:18px; height:18px; border-radius:50%;
  font-size:.66rem; font-weight:700; color:#fff; background:var(--v); }
.duo-orbit li.on{ opacity:1; transform:none; }
.duo-orbit li:nth-child(1){ left:-2%; top:12%; } .duo-orbit li:nth-child(2){ right:-4%; top:2%; }
.duo-orbit li:nth-child(3){ left:-4%; top:52%; } .duo-orbit li:nth-child(4){ right:2%; top:40%; }
.duo-orbit li:nth-child(5){ left:4%; bottom:4%; } .duo-orbit li:nth-child(6){ right:-2%; top:24%; }

.duo-note{ display:flex; align-items:flex-start; gap:.4rem; justify-content:center; margin:1.2rem 0 0; transform:rotate(-2deg); transform-origin:center; }
.duo-note svg{ order:2; width:46px; height:32px; flex:none; transform:translateY(-14px); }
.duo-note svg path{ fill:none; stroke:var(--v); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.hero-shot figcaption{ margin-top:.6rem; }

@media (max-width:1040px){ .hero-shot{ margin-top:1rem; } }
@media (max-width:560px){
  .duo-orbit li{ font-size:.68rem; padding:.32rem .6rem .32rem .42rem; }
  .duo-orbit li:nth-child(1){ left:0; } .duo-orbit li:nth-child(3){ left:0; }
  .duo-orbit li:nth-child(2), .duo-orbit li:nth-child(6){ right:0; }
  .duo-badge{ bottom:2%; padding:.45rem .7rem .45rem .45rem; }
  .duo-badge b{ width:38px; height:38px; font-size:1rem; }
  .duo-badge span{ font-size:.7rem; }
}
@media (prefers-reduced-motion:reduce){
  .hero-shot::before, .fold, .duo-badge b::before{ animation:none; }
  .duo-screen img.on.in{ animation:none; }
}
.legal .hand-note, .pg-wrap .hand-note{ margin:.2rem 0 .9rem; }
.ks .hand-note.ks-hand{ color:var(--coral-ink, #B5372E); margin:.6rem 0 .4rem; }
@media (min-width:761px){
  .duo-badge{ right:auto; left:-4%; bottom:20%; }
  .duo-orbit li:nth-child(1){ left:-6%; top:12%; } .duo-orbit li:nth-child(2){ right:4%; top:-3%; }
  .duo-orbit li:nth-child(3){ left:-6%; top:42%; } .duo-orbit li:nth-child(4){ left:4%; right:auto; top:auto; bottom:6%; }
  .duo-orbit li:nth-child(5){ left:34%; bottom:auto; top:24%; } .duo-orbit li:nth-child(6){ right:-5%; top:18%; }
}

/* Punchlines: groß, kurz, die Pointe handschriftlich unterstrichen. Unterstreichungen
   weiter unten zeichnen sich erst, wenn ihr Block ins Bild kommt. */
.sec-head h2.punch{ font-size:clamp(2.3rem,4.6vw,3.7rem); line-height:1.05; }
.gain .gain-claim{ font-size:clamp(1.55rem,2.3vw,1.95rem); line-height:1.15; margin:.5rem 0 .6rem; }
.gain .gain-claim + p{ font-size:1rem; }
.reveal:not(.in) .hand-under path{ animation-play-state:paused; }

/* „Kennen Sie das?": die Antwort als Pointe, ein Stempel „Gelöst", am Ende die Einladung */
.prob{ position:relative; }
.prob-a b{ font-size:clamp(1.3rem,1.9vw,1.55rem); line-height:1.2; color:var(--ink); margin-bottom:.5rem; }
.prob-a p{ font-size:.98rem; }
.prob-ok{ position:absolute; right:1.2rem; top:-.7rem; font-size:.72rem; font-weight:700; letter-spacing:.04em;
  color:#15803D; background:#DCFCE7; border:1px solid #BBF7D0; padding:.22rem .6rem; border-radius:99px;
  transform:rotate(4deg) scale(0); }
.prob.in .prob-ok{ animation:okStamp .5s .9s cubic-bezier(.3,1.6,.5,1) forwards; }
@keyframes okStamp{ to{ transform:rotate(4deg) scale(1); } }
.prob.in .prob-q{ transition:color .5s .6s; color:var(--ink-3); }
.prob:hover{ border-color:#BBF7D0; }
.prob-cta{ margin-top:2.2rem; }
.prob-cta .hand-note{ margin:0 0 .3rem; transform-origin:left; }
.prob-cta .safe-cta-txt b{ font-size:clamp(1.25rem,2.1vw,1.6rem); }
@media (max-width:760px){ .prob-cta .hand-note{ transform-origin:center; } }
@media (prefers-reduced-motion:reduce){ .prob-ok{ transform:rotate(4deg); } }
.lede-punch{ margin-top:1rem; font:600 clamp(1.3rem,2vw,1.6rem)/1.25 var(--disp); letter-spacing:-.02em; color:var(--ink); }

/* „Noch nicht überzeugt?": am Ende jedes Abschnitts eine handschriftliche Frage, die
   eine Stufe tiefer führt — jede Antwort mit mehr Detail, bis zum Test. */
.nudge{ display:grid; justify-items:center; gap:.35rem; width:max-content; max-width:100%;
  margin:clamp(2.6rem,5vw,3.6rem) auto 0; text-align:center; color:var(--ink); }
.nudge-q{ position:relative; font:700 clamp(1.9rem,3.2vw,2.5rem)/1.05 'Caveat', cursive; color:var(--v);
  transform:rotate(-2deg); }
.nudge-q::after{ content:""; position:absolute; left:4%; right:4%; bottom:-.12em; height:.22em;
  background:no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M3 11c40-6 90-9 150-7 45 1 90 4 144-1' fill='none' stroke='%23F2A93B' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
  transform:scaleX(0); transform-origin:left; transition:transform .8s .35s cubic-bezier(.6,.1,.3,1); }
.nudge.in .nudge-q::after{ transform:scaleX(1); }
.nudge-a{ font-size:1.02rem; font-weight:500; color:var(--ink-2); max-width:34ch; }
.nudge-arrow{ width:26px; height:38px; margin-top:.2rem; animation:nudgeBob 1.8s ease-in-out infinite; }
.nudge-arrow path{ fill:none; stroke:var(--v); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
@keyframes nudgeBob{ 50%{ transform:translateY(6px); } }
.nudge:hover .nudge-a{ color:var(--v); }
.nudge:focus-visible{ outline:2px solid var(--v); outline-offset:6px; border-radius:12px; }
.hero .nudge{ margin-top:2.4rem; }
@media (prefers-reduced-motion:reduce){ .nudge-arrow{ animation:none; } .nudge-q::after{ transform:none; } }

/* ── Telefon & Tablet: Unterseiten (prisma.html u. a.) ──────────────────── */
.shotfig-phone figcaption{ text-align:center; }
@media (max-width:1040px){
  /* Die Kippung rückt die Aufnahmen nach vorn und lässt sie über den Rand ragen —
     auf schmalen Schirmen stehen sie ruhig im Raster. */
  .shotfig img{ transform:none !important; }
  .soon-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .soon-grid{ grid-template-columns:1fr; }
  /* Knopfreihen stapeln sauber in voller Breite statt versetzt */
  .hero-btns .btn, .endband-acts .btn, .endband > .btn{ width:100%; justify-content:center; }
  .endband-acts{ width:100%; }
  .endband{ padding:1.8rem 1.3rem; }
  /* Seiten-Reiter der Demo: rechts ausblenden, damit man sieht, dass es weitergeht */
  .demo-pages{ -webkit-mask-image:linear-gradient(90deg, #000 82%, transparent); mask-image:linear-gradient(90deg, #000 82%, transparent); padding-right:2rem; }
}

/* „Sie nutzen bereits ein Template?": zwei Karten. Links würdigend und ruhig, rechts
   leuchtend — die vier Zusätze kommen nacheinander herein, der Zähler läuft 3 → 7. */
.vs2{ display:grid; grid-template-columns:1fr auto 1.15fr; align-items:center; gap:1.2rem; max-width:980px; margin:2.6rem auto 0; }
.vs2-card{ position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); padding:1.7rem 1.6rem 1.6rem; }
.vs2-them{ box-shadow:var(--sh-1); }
.vs2-us{ border:2px solid transparent; background:linear-gradient(#fff,#fff) padding-box, var(--grad) border-box;
  box-shadow:0 30px 60px -28px rgba(91,61,245,.45), var(--sh-2); padding:2rem 1.8rem 1.8rem; }
.vs2-flag{ position:absolute; top:-.8rem; left:1.6rem; font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:#fff; background:var(--grad); padding:.32rem .75rem; border-radius:99px; box-shadow:var(--sh-v); }
.vs2-label{ font:600 1.15rem/1.2 var(--disp); color:var(--ink); }
.vs2-them .vs2-label{ color:var(--ink-2); }
.vs2-count{ margin-top:.3rem; font-size:.82rem; color:var(--ink-3); }
.vs2-count b{ font:700 1.9rem/1 var(--disp); color:var(--ink-2); margin-right:.15rem; }
.vs2-us .vs2-count b{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.vs2 ul{ list-style:none; margin:1.2rem 0 0; padding:0; display:grid; gap:.55rem; }
.vs2 li{ position:relative; padding-left:1.9rem; font-size:.95rem; line-height:1.4; color:var(--ink-2); }
.vs2 li::before{ position:absolute; left:0; top:.05rem; width:1.3rem; height:1.3rem; border-radius:50%; display:grid; place-items:center;
  font-size:.72rem; font-weight:700; }
.vs2 li.ok::before{ content:"✓"; color:#fff; background:#16A34A; }
.vs2 li.off{ color:var(--ink-3); opacity:.75; }
.vs2 li.off::before{ content:"–"; color:var(--ink-3); background:var(--bg-3); }
.vs2-us li{ color:var(--ink); }
.vs2-us li.add::before{ background:var(--grad); }
.vs2 li em{ font-style:normal; margin-left:.35rem; font-size:.64rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--v); background:var(--v-soft); padding:.12rem .42rem; border-radius:6px; vertical-align:.12em; }
.vs2-plus{ display:grid; place-items:center; width:52px; height:52px; border-radius:50%; font:700 1.7rem/1 var(--disp); color:#fff;
  background:var(--grad); box-shadow:var(--sh-v); }
/* Einlauf: die vier Zusätze nacheinander, mit kurzem Aufleuchten */
.vs2.in .vs2-us li.add{ animation:addIn .55s cubic-bezier(.3,1.4,.5,1) both; }
.vs2.in .vs2-us li.add:nth-child(4){ animation-delay:.7s } .vs2.in .vs2-us li.add:nth-child(5){ animation-delay:1s }
.vs2.in .vs2-us li.add:nth-child(6){ animation-delay:1.3s } .vs2.in .vs2-us li.add:nth-child(7){ animation-delay:1.6s }
@keyframes addIn{ 0%{ opacity:0; transform:translateX(-14px); background:transparent; } 60%{ background:var(--v-soft); } 100%{ opacity:1; transform:none; background:transparent; } }
.vs2.in .vs2-plus{ animation:plusPop .6s .4s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes plusPop{ from{ transform:scale(0) rotate(-90deg); } }
@media (max-width:820px){
  .vs2{ grid-template-columns:1fr; max-width:520px; }
  .vs2-plus{ justify-self:center; margin:-.4rem 0; }
}
@media (prefers-reduced-motion:reduce){ .vs2.in .vs2-us li.add, .vs2.in .vs2-plus{ animation:none; } }

/* ── Rennen & „Was sich für Sie ändert": größer, lebendiger ─────────────── */
.race{ padding:1.8rem 1.8rem 1.6rem; gap:1.2rem; border:2px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box, linear-gradient(120deg,#E7E9F0,#D9D1FF 60%,#BFE8F2) border-box; }
.race-k{ font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--v); }
.race-t{ font:500 1.15rem/1.35 var(--disp); color:var(--ink-2); margin-top:.2rem; }
.race-t b{ font-weight:600; color:var(--ink); }
.lane{ grid-template-columns:150px 1fr 110px; }
.lane-name{ display:inline-flex; align-items:center; gap:.45rem; font-size:.95rem; }
.lane-name i{ font-style:normal; font-size:1.15rem; }
.lane-track{ height:48px; }
.lane-steps li{ font-size:.8rem; }
.lane-us .lane-track{ box-shadow:0 0 0 0 rgba(91,61,245,0); transition:box-shadow .6s; }
.race.run .lane-us .lane-track{ animation:laneGlow 1s 1.8s ease-out both; }
@keyframes laneGlow{ 0%{ box-shadow:0 0 0 0 rgba(91,61,245,.45); } 100%{ box-shadow:0 0 0 12px rgba(91,61,245,0); } }
.lane-us .lane-end{ font-size:1rem; }
.race-win{ justify-self:center; font:700 clamp(1.4rem,2.4vw,1.8rem)/1.1 'Caveat', cursive; color:var(--v);
  transform:rotate(-2deg) scale(.6); opacity:0; }
.race.run .race-win{ animation:winIn .6s 2s cubic-bezier(.3,1.6,.5,1) forwards; }
@keyframes winIn{ to{ opacity:1; transform:rotate(-2deg) scale(1); } }

.swap-head{ text-align:center; margin:3rem auto 1.4rem; }
.swap-head h3{ font-size:clamp(1.5rem,2.4vw,1.9rem); }
.swap-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem; max-width:940px; margin:0 auto; }
.swap{ position:relative; display:grid; gap:.55rem; background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  padding:1.3rem 1.4rem 1.4rem; box-shadow:var(--sh-1); transition:opacity .7s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease); }
.swap:hover{ transform:translateY(-4px); box-shadow:var(--sh-3); }
.swap-ico{ position:absolute; right:1.2rem; top:1.1rem; font-size:1.4rem; }
.swap-topic{ font:600 1.1rem/1.2 var(--disp); color:var(--ink); padding-right:2rem; }
.swap-old, .swap-new{ display:grid; gap:.15rem; font-size:.95rem; line-height:1.4; }
.swap-old span, .swap-new span{ font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.swap-old{ color:var(--ink-3); }
.swap-old span{ color:var(--ink-3); }
.swap-new{ position:relative; color:var(--ink); font-weight:600; background:var(--v-soft); border-radius:12px; padding:.7rem .85rem .75rem 2.3rem; }
.swap-new span{ color:var(--v); }
.swap-new::before{ content:"✓"; position:absolute; left:.75rem; top:.8rem; width:1.15rem; height:1.15rem; border-radius:50%;
  display:grid; place-items:center; font-size:.66rem; color:#fff; background:var(--grad); }
.swap.in .swap-old{ animation:oldFade .6s .4s both; }
@keyframes oldFade{ from{ color:var(--ink-2); } }
.swap.in .swap-new{ animation:newIn .55s .6s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes newIn{ from{ opacity:0; transform:translateY(8px) scale(.97); } }
@media (max-width:760px){
  .swap-grid{ grid-template-columns:1fr; }
  .lane{ grid-template-columns:1fr auto; }
  .lane-track{ height:40px; }
}
@media (prefers-reduced-motion:reduce){ .race-win{ opacity:1; transform:rotate(-2deg); } }
@media (max-width:760px){ .lane-them .lane-steps{ padding:0 .2rem; } .lane-them .lane-steps li{ font-size:.6rem; letter-spacing:-.01em; } }

/* ── Plugins: alle vier auf einen Blick (owner, 2026-10-13) ────────────────
   „User should see all of them very quick without scrolling the page." Ein
   knapper Seitenkopf und vier kompakte Karten nebeneinander; die Einzelheiten
   stehen auf den Produktseiten. */
.pagehead-tight{ padding:5.9rem 0 .9rem; }
.pagehead-tight .pagehead-in{ max-width:900px; }
.pagehead-tight h1{ font-size:clamp(1.9rem,3.2vw,2.6rem); }
.pagehead-tight .lede{ margin-top:.4rem; max-width:80ch; font-size:.98rem; }
.pagehead-tight .lede b{ color:var(--ink); font-weight:600; }
.pc-sec{ padding-top:1.1rem; padding-bottom:clamp(2.4rem,4vw,3.6rem); }
.pc-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1rem; align-items:stretch; }
.pc{ position:relative; display:flex; flex-direction:column; padding:1.15rem 1.15rem 1.2rem; border-radius:var(--r-l);
  background:#fff; border:1px solid var(--line); box-shadow:var(--sh-1, 0 1px 3px rgba(16,24,40,.06));
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; scroll-margin-top:90px; }
.pc:hover{ transform:translateY(-3px); box-shadow:var(--sh-3); border-color:color-mix(in srgb, var(--pc) 35%, var(--line)); }
.pc-top{ display:flex; align-items:center; gap:.6rem; margin:-1.15rem -1.15rem .85rem; padding:.75rem 1.15rem;
  border-radius:var(--r-l) var(--r-l) 0 0; background:linear-gradient(120deg, var(--pc), var(--pc2)); color:#fff; }
.pc-mark{ min-width:34px; height:34px; padding:0 .45rem; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.35); font-weight:800; font-size:.92rem; }
.pc-tab{ font-size:.76rem; font-weight:600; opacity:.95; }
.pc-kick{ font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--pc); margin:0; }
.pc-name{ font-size:1.22rem; line-height:1.2; margin:.3rem 0 0; }
.pc-lede{ margin:.45rem 0 0; color:var(--ink-2); font-size:.9rem; line-height:1.45; }
.pc-list{ list-style:none; margin:.7rem 0 .9rem; padding:0; display:grid; gap:.32rem; font-size:.86rem; color:var(--ink-2); }
.pc-list li{ display:flex; gap:.5rem; align-items:flex-start; }
.pc-list li::before{ content:"✓"; flex:0 0 auto; width:1.05rem; height:1.05rem; margin-top:.12rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:.62rem; font-weight:700;
  color:var(--pc); background:color-mix(in srgb, var(--pc) 12%, #fff); }
.pc-price{ margin-top:auto; padding-top:.8rem; display:flex; align-items:baseline; gap:.35rem; border-top:1px solid var(--line); }
.pc-price b{ font-size:1.45rem; letter-spacing:-.02em; }
.pc-price span{ font-size:.82rem; color:var(--ink-2); }
.pc-deal{ margin:.2rem 0 0; font-size:.8rem; color:#15803d; }
.pc-deal b{ font-weight:600; }
.pc-acts{ display:flex; flex-direction:column; gap:.35rem; margin-top:.75rem; }
.pc-acts .btn{ width:100%; justify-content:center; padding:.72rem 1rem; }
.pc-acts .btn[hidden]{ display:none; }
.pc-more{ font-size:.84rem; font-weight:600; color:var(--pc); text-align:center; }
.pc-more:hover{ text-decoration:underline; }
.pc-flag{ position:absolute; top:-.6rem; right:.9rem; z-index:2; padding:.22rem .6rem; border-radius:999px;
  font-size:.7rem; font-weight:700; background:#fff; color:var(--pc); border:1px solid color-mix(in srgb, var(--pc) 40%, #fff);
  box-shadow:0 4px 12px rgba(90,42,143,.18); }
.pc-free{ border-color:color-mix(in srgb, var(--pc) 30%, var(--line)); }
@media (max-width:1100px){ .pc-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:620px){ .pc-grid{ grid-template-columns:1fr; } .pagehead-tight{ padding-top:5.6rem; } }

/* niedrige Bildschirme (z. B. 1280×720): enger, damit alle vier ohne Scrollen ganz zu sehen sind */
@media (min-width:1101px) and (max-height:820px){
  .pagehead-tight{ padding:5.4rem 0 .6rem; }
  .pagehead-tight h1{ font-size:2.1rem; }
  .pc{ padding:1rem 1rem 1rem; }
  .pc-top{ margin:-1rem -1rem .7rem; padding:.6rem 1rem; }
  .pc-lede{ font-size:.86rem; margin-top:.35rem; }
  .pc-list{ margin:.55rem 0 .7rem; gap:.22rem; font-size:.82rem; }
  .pc-price{ padding-top:.6rem; }
  .pc-price b{ font-size:1.3rem; }
  .pc-acts .btn{ padding:.6rem 1rem; }
}

/* auf dem Handy: alle vier Namen auf einen Blick, ein Tipp springt zur Karte */
.pc-jump{ display:none; }
@media (max-width:620px){
  .pc-jump{ display:flex; flex-wrap:wrap; gap:.45rem; margin:0 0 1rem; }
  .pc-jump a{ padding:.42rem .8rem; border-radius:999px; font-size:.84rem; font-weight:600; color:var(--pc);
    background:color-mix(in srgb, var(--pc) 10%, #fff); border:1px solid color-mix(in srgb, var(--pc) 30%, #fff); }
}

/* Plugins: ein Bildschirmfoto oben in jeder Karte (owner, 2026-10-13) — statt des Farbbands */
.pc-shot{ position:relative; display:block; height:132px; margin:-1.15rem -1.15rem .85rem; overflow:hidden;
  border-radius:var(--r-l) var(--r-l) 0 0; background:color-mix(in srgb, var(--pc) 12%, #f4f5f8);
  border-bottom:1px solid var(--line); }
.pc-shot img{ display:block; width:100%; height:100%; object-fit:cover; object-position:left top;
  transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.pc:hover .pc-shot img{ transform:scale(1.04); }
.pc-shot::after{ content:""; position:absolute; inset:auto 0 0 0; height:56%;
  background:linear-gradient(to top, color-mix(in srgb, var(--pc) 88%, #000) 0%, transparent 100%); }
.pc-shot .pc-mark, .pc-shot .pc-tab{ position:absolute; z-index:1; bottom:.6rem; color:#fff; }
.pc-shot .pc-mark{ left:.75rem; background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.45);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.pc-shot .pc-tab{ left:3.3rem; bottom:1.05rem; text-shadow:0 1px 4px rgba(0,0,0,.35); }
.pc-free .pc-shot .pc-tab{ left:3.75rem; }
@media (min-width:1101px) and (max-height:820px){
  .pc-shot{ height:104px; margin:-1rem -1rem .7rem; }
}