/* ============================================================
   Cropy — Website (Apple-Stil, monochrom: schwarz / weiß / grau)
   ============================================================ */
:root{
  --bg:#ffffff;
  --bg-soft:#f5f5f7;
  --bg-dark:#0a0a0b;
  --ink:#1d1d1f;
  --ink-2:#6e6e73;
  --ink-3:#86868b;
  --line:#d2d2d7;
  --line-soft:#e8e8ed;
  --card:#ffffff;
  --r:24px; --r-md:18px; --r-sm:12px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow-sm:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  --shadow:0 2px 6px rgba(0,0,0,.05), 0 30px 70px rgba(0,0,0,.12);
  --shadow-xl:0 40px 110px rgba(0,0,0,.22);
  --font:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", system-ui, Helvetica, Arial, sans-serif;
  --maxw:1180px;
}

/* ===== Marke: Cropy.it (Cal Sans; „." = Akzent-Punkt, etwas größer = Record-Punkt; „it" heller) ===== */
@font-face{font-family:"Cal Sans"; src:url("assets/fonts/CalSans-Regular.ttf") format("truetype"); font-weight:400 700; font-display:swap}
.brandmark{font-family:"Cal Sans", var(--font)}
.brandmark .bm-dot{color:#e8443a; font-size:1.18em; font-weight:800; letter-spacing:-.03em}
.brandmark .bm-it{opacity:.5; font-weight:500}
/* Über dem dunklen Hero (Nav noch nicht gescrollt): alles weiß, Farbe erst beim Runterscrollen */
.nav:not(.scrolled) .brandmark .bm-dot{color:inherit}
.nav:not(.scrolled) .brandmark .bm-it{opacity:.72}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
section[id], main [id]{scroll-margin-top:84px}
body{
  margin:0; font-family:var(--font); color:var(--ink); background:var(--bg);
  line-height:1.5; font-size:17px; font-weight:430;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
ul{margin:0; padding:0; list-style:none}
.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px}

h1,h2,h3{margin:0; letter-spacing:-.022em; line-height:1.05; font-weight:600}
h2{font-size:clamp(2rem, 4.4vw, 3.4rem)}
h3{font-size:1.18rem; letter-spacing:-.01em}
.dim{color:var(--ink-3); font-weight:600}
.kicker{font-size:.82rem; font-weight:650; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin:0 0 14px}
.kicker.light{color:rgba(255,255,255,.55)}
.p{color:var(--ink-2); font-size:1.12rem; line-height:1.6; max-width:46ch; margin:18px 0 0}
.p.center{margin-left:auto; margin-right:auto; text-align:center}
.demo-note{margin:18px auto 0; max-width:46ch; font-size:.82rem; line-height:1.5; color:var(--ink-3); font-weight:450; text-align:center;
  transform-origin:50% 0%; backface-visibility:hidden; will-change:transform,opacity}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:8px; border-radius:980px; font-weight:560;
  padding:11px 20px; font-size:.96rem; transition:transform .25s var(--ease), background .25s, opacity .25s; border:1px solid transparent}
.btn-sm{padding:8px 16px; font-size:.9rem}
.btn-dark{background:var(--ink); color:#fff}
.btn-dark:hover{transform:translateY(-1px); background:#000}

/* ---------- NAV ---------- */
.nav{position:fixed; inset:0 0 auto 0; z-index:50; height:64px; display:flex; align-items:center;
  background:rgba(255,255,255,.62); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid transparent; transition:border-color .3s, background .3s}
.nav.scrolled{border-bottom-color:var(--line-soft); background:rgba(255,255,255,.78)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px}
.brand{display:flex; align-items:center; gap:11px; font-weight:650; letter-spacing:-.02em; font-size:1.22rem; color:var(--ink)}
.brand-mark{display:grid; place-items:center; color:var(--ink)}
.brand-mark img{width:38px; height:38px; object-fit:contain; display:block}
.nav-links{display:flex; gap:30px}
.nav-links a{font-size:.92rem; color:var(--ink-2); font-weight:480; transition:color .2s}
.nav-links a:hover{color:var(--ink)}

/* ---------- HERO ---------- */
.hero{position:relative; padding:128px 0 70px; text-align:center; overflow:hidden; background:linear-gradient(180deg,#fbfbfc,#f4f5f7)}
.hero-amb{position:absolute; inset:-12% -8% auto -8%; height:920px; z-index:-1;
  background:url("assets/img/hero_bg.png") center top/cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent); mask-image:linear-gradient(180deg,#000 55%,transparent);
  opacity:.5; transform-origin:55% 38%; animation:heroZoom 30s ease-in-out infinite alternate}
@keyframes heroZoom{from{transform:scale(1.015)} to{transform:scale(1.13)}}

/* Split-Hero: Headline links, 3D-Visual rechts */
.hero-grid{display:grid; grid-template-columns:0.94fr 1.06fr; gap:32px; align-items:center; text-align:left}
.hero-copy{max-width:560px}
.hero-copy .morph-title{justify-content:flex-start}
.hero-copy .word{font-size:clamp(2.9rem,6.4vw,5.6rem)}
.hero-copy .hero-sub{font-size:clamp(1.05rem,2vw,1.38rem)}
.hero-copy .lede{margin-left:0; margin-right:0; max-width:46ch}
.hero-copy .cta-row{justify-content:flex-start}
.hero-visual{position:relative; border-radius:24px; padding:2%; will-change:transform;
  background:linear-gradient(165deg,#f9fafb,#ebedf0); border:1px solid rgba(0,0,0,.05);
  box-shadow:0 36px 66px -30px rgba(0,0,0,.22), 0 4px 14px rgba(0,0,0,.04);
  animation:heroVisFloat 7s ease-in-out infinite}
.hero-visual img{display:block; width:100%; height:auto; border-radius:15px}
@keyframes heroVisFloat{0%,100%{transform:translateY(0)} 50%{transform:translateY(-13px)}}

.eyebrow{font-size:.95rem; font-weight:560; color:var(--ink-3); letter-spacing:.01em; margin:0 0 22px}
.morph-title{margin:10px 0 0; display:flex; justify-content:center; line-height:1}
.word{position:relative; display:inline-block; height:1.08em; padding-bottom:.2em; overflow:visible;
  font-size:clamp(3.2rem, 11vw, 7.8rem); font-weight:740; letter-spacing:-.04em; line-height:1;
  transition:width .6s cubic-bezier(.16,1,.3,1)}
.ltr{position:absolute; top:0; left:0; white-space:pre; opacity:0; transform:translateX(0); filter:blur(0); color:var(--ink);
  transition:transform .72s cubic-bezier(.16,1,.3,1), opacity .5s ease, filter .5s ease; will-change:transform,opacity,filter}
.word.pop{animation:wordPop .55s var(--ease)}
@keyframes wordPop{0%{transform:scale(1)} 38%{transform:scale(1.04)} 100%{transform:scale(1)}}
.hero-sub{margin:20px 0 0; font-size:clamp(1.1rem,2.4vw,1.55rem); font-weight:560; color:var(--ink); letter-spacing:-.012em}
.hero-sub .plus{color:var(--ink-3); font-weight:300; margin:0 .18em}
.lede{max-width:54ch; margin:22px auto 0; font-size:clamp(1.04rem,1.9vw,1.22rem); line-height:1.55; color:var(--ink-2); font-weight:440}
.lede b{color:var(--ink); font-weight:640}
.lede strong{color:var(--ink); font-weight:600}
.lede em{font-style:normal; color:var(--ink)}

.cta-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:34px}
.cta-row.center{justify-content:center}
.store-btn{display:inline-flex; align-items:center; gap:11px; background:var(--ink); color:#fff; border-radius:14px; padding:11px 20px; transition:transform .25s var(--ease), background .25s}
.store-btn:hover{transform:translateY(-2px); background:#000}
.store-btn svg{flex:none}
.store-btn span{display:flex; flex-direction:column; line-height:1.05; text-align:left}
.store-btn small{font-size:.66rem; opacity:.8; font-weight:450}
.store-btn b{font-size:1.04rem; font-weight:560; letter-spacing:-.01em}
.store-win{background:#fff; color:var(--ink); border:1px solid var(--line)}
.store-win:hover{background:#fff; border-color:var(--ink-3)}
/* Windows noch nicht verfügbar: ausgegraut + „Coming soon", nicht klickbar. */
.store-btn.is-soon{opacity:.5; filter:grayscale(1); cursor:not-allowed; pointer-events:none}
.store-btn.is-soon:hover{transform:none}
.price-chip{margin:18px 0 0; font-size:.95rem; color:var(--ink-3)}
.price-chip b{color:var(--ink); font-weight:620}

/* ---------- WINDOW / MOCKUPS ---------- */
.hero-showcase{position:relative; display:grid; grid-template-columns:0.74fr 1.26fr; gap:40px; align-items:center; margin-top:96px}
.showcase-copy{position:relative; z-index:1; max-width:430px; text-align:left; opacity:0; will-change:transform, opacity}
.showcase-copy h2{margin-top:6px}
.showcase-shot{position:relative; z-index:3; perspective:1900px; perspective-origin:56% 34%}
.appicon{position:absolute; top:-58px; left:50%; transform:translateX(-50%); width:124px; z-index:3; filter:drop-shadow(0 22px 36px rgba(0,0,0,.22))}
.appicon img{width:100%; height:auto}
.appicon.big{position:static; transform:none; width:104px; margin:0 auto 18px}

.window{background:var(--card); border:1px solid var(--line-soft); border-radius:16px; box-shadow:var(--shadow-xl); overflow:hidden; text-align:left}
/* Transform/Opacity werden scroll-gesteuert per JS gesetzt (Reveal). */
.editor-window{position:relative; max-width:1040px; width:108%; margin:0 auto;
  opacity:0; transform-origin:56% 46%;
  box-shadow:-16px 26px 56px -38px rgba(0,0,0,.26), 0 6px 16px rgba(0,0,0,.05);
  will-change:transform, opacity}
.win-bar{display:flex; align-items:center; gap:12px; height:42px; padding:0 14px; background:linear-gradient(#fbfbfd,#f1f1f4); border-bottom:1px solid var(--line-soft)}
.dots{display:flex; gap:8px}
.dots i{width:12px; height:12px; border-radius:50%; background:#e0e0e4}
.dots i:nth-child(1){background:#ff5f57}.dots i:nth-child(2){background:#febc2e}.dots i:nth-child(3){background:#28c840}
.win-title{font-size:.85rem; color:var(--ink-3); font-weight:520}

.win-toolbar{display:flex; align-items:center; gap:14px; padding:10px 14px; background:#fafafc; border-bottom:1px solid var(--line-soft)}
.win-toolbar.compact{gap:8px}
.tool-group{display:flex; align-items:center; gap:3px}
.tool-group.right{margin-left:auto; gap:8px}
.tool{display:grid; place-items:center; width:32px; height:28px; border-radius:8px; color:var(--ink-2); transition:background .2s, color .2s}
.tool svg{width:18px; height:18px}
.tool:hover{background:#ececf1}
.tool.active{background:rgba(45,124,246,.14); color:#2d7cf6}
.tool.ghost{color:var(--ink-3)}
.tool-swatches{display:flex; gap:6px; padding:0 4px; border-left:1px solid var(--line-soft); border-right:1px solid var(--line-soft); height:22px; align-items:center}
.tool-swatches i{width:16px; height:16px; border-radius:50%; background:var(--c); box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.pill{font-size:.82rem; font-weight:540; padding:6px 13px; border-radius:8px; background:#ececf1; color:var(--ink)}
.pill-dark{background:var(--ink); color:#fff}

.win-canvas{position:relative; background:#fff; overflow:hidden}
.win-canvas.light{background:#fff}
.shot-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}

/* Editor-Canvas: realistischer Dokument-Screenshot mit sinnvollen Annotationen.
   In-Flow (keine feste Hoehe) -> Canvas waechst exakt mit dem Inhalt, kein leerer Boden. */
.doc{position:relative; padding:6.6% 7.5%; display:flex; flex-direction:column; gap:1.2em;
  background:#fff; font-size:clamp(11px,1.55vw,18px)}
.doc-top{margin-bottom:1%}
.doc-title{display:inline-block; font-size:1.55em; font-weight:680; letter-spacing:-.015em; color:var(--ink)}
.doc-sub{font-size:.82em; color:var(--ink-3); margin-top:.15em}
.doc-field{position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:#fff; border:1px solid var(--line-soft); border-radius:11px; padding:2.7% 3.4%; box-shadow:0 1px 2px rgba(0,0,0,.04)}
.doc-field .dl{color:var(--ink-3); font-size:.9em; font-weight:500}
.doc-field .dv{color:var(--ink); font-weight:540; font-size:.98em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.doc-field.hl{border-color:#2d7cf6; box-shadow:0 0 0 3px rgba(45,124,246,.20)}
.blurv{filter:blur(5px); user-select:none}
.doc-save{align-self:flex-start; margin-top:.4%; background:var(--ink); color:#fff; border:none; border-radius:10px; padding:2.5% 5.6%; font-weight:560; font-size:.96em; cursor:default}
.fld-badge{position:absolute; left:-13px; top:-13px; width:28px; height:28px; font-size:.86rem}
.an-arrow{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}

/* === Animierte Editor-Demo === */
.anim-layer{position:absolute; inset:0; pointer-events:none; z-index:7; overflow:hidden}
.cursor-sim{position:absolute; top:0; left:0; width:23px; height:23px; z-index:9; pointer-events:none; opacity:0;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.45)); transform:translate(46%,55%);
  transition:transform .62s cubic-bezier(.5,.05,.2,1), opacity .3s ease}
.cursor-sim.show{opacity:1}
.cursor-sim svg{width:100%; height:100%; transition:transform .12s ease; transform-origin:20% 15%}
.cursor-sim.click svg{transform:scale(.78)}

.an-rect{position:absolute; border:2.5px solid #2d7cf6; border-radius:8px; box-shadow:0 0 0 3px rgba(45,124,246,.14);
  width:0; height:0; opacity:0; transition:width .5s ease, height .5s ease, opacity .25s ease}
.an-badge{position:absolute; width:26px; height:26px; border-radius:50%; background:#e8443a; color:#fff;
  display:grid; place-items:center; font-weight:700; font-size:.82rem; box-shadow:0 3px 8px rgba(0,0,0,.3);
  transform:scale(0); transition:transform .34s cubic-bezier(.2,1.35,.4,1)}
.an-badge.in{transform:scale(1)}
.an-blur{position:absolute; width:0; border-radius:5px; overflow:hidden;
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); background:rgba(244,244,247,.16);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.04); transition:width .55s ease}
.an-arrow2{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible}
.sel-hl{position:absolute; background:rgba(45,124,246,.30); border-radius:3px; width:0; transition:width .42s ease}
.tool-swatches i.sel{box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--c)}
.an-text{position:absolute; z-index:8; display:flex; align-items:center; white-space:nowrap;
  font-weight:700; letter-spacing:-.01em; color:#e8443a; line-height:1}
.an-text .t-caret{display:inline-block; width:2px; height:1em; margin-left:2px; border-radius:1px;
  background:#e8443a; animation:caretBlink .75s step-end infinite}
@keyframes caretBlink{50%{opacity:0}}

.ctx-menu{position:absolute; top:0; left:0; z-index:8; min-width:172px; padding:5px;
  background:rgba(252,252,253,.97); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line-soft); border-radius:10px; box-shadow:var(--shadow); font-size:.86rem;
  opacity:0; transform:scale(.94); transform-origin:top left; pointer-events:none;
  transition:opacity .16s ease, transform .16s ease}
.ctx-menu.in{opacity:1; transform:scale(1)}
.ctx-menu .mi{display:flex; align-items:center; gap:9px; padding:6px 11px; border-radius:6px; color:var(--ink)}
.ctx-menu .mi svg{width:15px; height:15px}
.ctx-menu .mi.hl{background:#2d7cf6; color:#fff}
.ctx-menu .sep{height:1px; background:var(--line-soft); margin:4px 8px}
.anno{position:absolute; inset:0; width:100%; height:100%}
.badge-demo{position:absolute; right:24%; top:30%; width:34px; height:34px; border-radius:50%; background:#e8443a; color:#fff; display:grid; place-items:center; font-weight:700; font-size:1rem; box-shadow:0 4px 12px rgba(0,0,0,.35)}
.badge-demo.b2{right:30%; top:24%}
.blur-demo{position:absolute; left:30%; bottom:16%; padding:8px 16px; border-radius:8px; color:rgba(255,255,255,.85); letter-spacing:3px; font-weight:700;
  background:rgba(255,255,255,.12); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px)}
.blur-demo.big{left:24%; bottom:22%; font-size:1.1rem}

/* Schwebendes Zwischenablage-Panel im Hero */
.floating-clip{position:absolute; right:-30px; bottom:-72px; width:286px; z-index:4; box-shadow:var(--shadow-xl)}
.floating-clip .clip-head{padding:12px 12px 9px; gap:9px}
.floating-clip .clip-search{padding:9px 11px; font-size:.9rem; border-radius:9px}
.floating-clip .clip-search svg{width:16px; height:16px}
.floating-clip .clip-seg{border-radius:9px; padding:3px}
.floating-clip .clip-seg b{padding:6px 0; font-size:.82rem; border-radius:7px}
.floating-clip .clip-list{padding:6px; max-height:none}
.floating-clip .clip-row{padding:7px 7px; gap:10px}
.floating-clip .ci{width:34px; height:34px; border-radius:8px}
.floating-clip .ci svg{width:16px; height:16px}
.floating-clip .ct b{max-width:150px; font-size:.88rem}
.floating-clip .ct small{font-size:.74rem}

/* Crop-Simulation (dunkle Sektion) */
.crop-sim{position:relative; aspect-ratio:16/10; border-radius:16px; overflow:hidden; box-shadow:var(--shadow-xl); border:1px solid rgba(255,255,255,.08)}
.crop-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.crop-box{position:absolute; left:15%; top:16%; width:0; height:0; border:2px solid #fff; box-shadow:0 0 0 3000px rgba(0,0,0,.5); animation:cropBox 5.6s var(--ease) infinite}
.crop-box .ch{position:absolute; width:9px; height:9px; background:#fff; border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.crop-box .ch.tl{left:-5px; top:-5px}.crop-box .ch.tr{right:-5px; top:-5px}.crop-box .ch.bl{left:-5px; bottom:-5px}.crop-box .ch.br{right:-5px; bottom:-5px}
.crop-cursor{position:absolute; left:15%; top:16%; width:24px; height:24px; margin:-2px 0 0 -2px; z-index:5; filter:drop-shadow(0 3px 6px rgba(0,0,0,.55)); animation:cropCursor 5.6s var(--ease) infinite}
.crop-cursor svg{width:100%; height:100%}
.crop-size{position:absolute; left:46%; top:46%; transform:translate(-50%,-50%); font-size:.78rem; font-weight:600; color:#fff; background:rgba(0,0,0,.55); padding:4px 9px; border-radius:7px; opacity:0; z-index:5; animation:cropSize 5.6s var(--ease) infinite}
.crop-toast{position:absolute; left:50%; bottom:16px; transform:translateX(-50%) translateY(8px); display:flex; align-items:center; gap:7px; background:rgba(255,255,255,.96); color:var(--ink); font-size:.84rem; font-weight:560; padding:8px 14px; border-radius:980px; box-shadow:var(--shadow); opacity:0; z-index:6; animation:cropToast 5.6s var(--ease) infinite}
.crop-toast svg{width:16px; height:16px; color:#28a745}
@keyframes cropBox{
  0%{width:0; height:0; opacity:0}
  6%{opacity:1}
  46%{width:62%; height:60%}
  72%{width:62%; height:60%; box-shadow:0 0 0 3000px rgba(0,0,0,.5)}
  80%{width:62%; height:60%; box-shadow:0 0 0 3000px rgba(0,0,0,0); border-color:rgba(255,255,255,.65)}
  90%{width:62%; height:60%; opacity:0; box-shadow:0 0 0 3000px rgba(0,0,0,0)}
  100%{width:0; height:0; opacity:0}
}
@keyframes cropCursor{
  0%{left:15%; top:16%; opacity:0}
  6%{opacity:1}
  46%{left:77%; top:76%}
  78%{left:77%; top:76%; opacity:1}
  88%{left:79%; top:78%; opacity:0}
  100%{opacity:0}
}
@keyframes cropSize{0%,10%{opacity:0} 22%,70%{opacity:1} 80%,100%{opacity:0}}
@keyframes cropToast{0%,74%{opacity:0; transform:translateX(-50%) translateY(8px)} 82%{opacity:1; transform:translateX(-50%) translateY(0)} 92%{opacity:1} 100%{opacity:0; transform:translateX(-50%) translateY(0)}}
@media (prefers-reduced-motion:reduce){
  .crop-box{width:62%; height:60%; animation:none; box-shadow:0 0 0 3000px rgba(0,0,0,.5)}
  .crop-cursor{left:77%; top:76%; animation:none}
  .crop-size{opacity:1; animation:none} .crop-toast{animation:none}
}

/* ---------- SECTIONS ---------- */
.section{padding:108px 0}

/* Subtile Gemini-Section-Backgrounds (Crop-Sektion .dark bleibt unberuehrt) */
.usp, #funktionen, .lokal{position:relative; isolation:isolate}
.usp::before, #funktionen::before, .lokal::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-size:cover; background-position:center;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 15%,#000 85%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 15%,#000 85%,transparent)}
.usp::before{background-image:url("assets/img/bg_soft.png"); opacity:.5}
#funktionen::before{background-image:url("assets/img/bg_soft.png"); opacity:.45; transform:scaleX(-1)}
.lokal::before{background-image:url("assets/img/bg_soft.png"); opacity:.55; background-position:right center}
.usp{padding-top:120px; overflow:clip}
.sec-head{margin-bottom:54px; max-width:30ch}

/* USP (gespiegelt zum Editor: Panel links, Text rechts) */
.usp-grid{position:relative; display:grid; grid-template-columns:1fr 1.05fr; gap:48px; align-items:center}
.usp-shot{order:1; position:relative; z-index:3; perspective:1900px; perspective-origin:44% 34%}
.usp-copy{order:2; position:relative; z-index:1; opacity:0; will-change:transform, opacity}
.usp-copy h2{margin-top:6px}
.ticks{margin-top:26px; display:grid; gap:13px}
.ticks li{position:relative; padding-left:30px; color:var(--ink-2); font-size:1.04rem}
.ticks li::before{content:""; position:absolute; left:0; top:3px; width:19px; height:19px; border-radius:50%;
  background:var(--ink) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12l5 5 9-10'/></svg>") center/13px no-repeat}

/* Clipboard mockup (Reveal-Transform per JS) */
.clip-window{max-width:460px; width:108%; margin:0 auto; opacity:0; transform-origin:44% 46%;
  box-shadow:16px 26px 56px -38px rgba(0,0,0,.26), 0 6px 16px rgba(0,0,0,.05); will-change:transform, opacity}
.clip-head{padding:16px 16px 12px; border-bottom:1px solid var(--line-soft); display:grid; gap:12px; background:#fcfcfe}
.clip-search{display:flex; align-items:center; gap:10px; background:var(--bg-soft); border-radius:12px; padding:13px 15px; color:var(--ink-3); font-size:1.05rem}
.clip-search svg{width:19px; height:19px}
.clip-seg{display:flex; background:var(--bg-soft); border-radius:12px; padding:4px}
.clip-seg b{flex:1; text-align:center; font-size:.98rem; font-weight:540; color:var(--ink-2); padding:9px 0; border-radius:9px; transition:background .2s, color .2s}
.clip-seg b.on{background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.13)}
.clip-list{padding:8px; display:grid; gap:1px; max-height:none}
.clip-row{display:flex; align-items:center; gap:13px; padding:10px 10px; border-radius:12px; transition:background .2s}
.clip-row:hover{background:var(--bg-soft)}
.clip-row.dim{opacity:.5}
.ci{flex:none; width:42px; height:42px; border-radius:10px; display:grid; place-items:center; color:var(--ink-3); background:var(--bg-soft)}
.ci svg{width:19px; height:19px}
.ci.img{background:linear-gradient(135deg,#7f8bff,#4a54d8)}
.ci.img.alt{background:linear-gradient(135deg,#9aa0aa,#5b606b)}
.ct{display:flex; flex-direction:column; gap:2px; min-width:0}
.ct b{font-size:1rem; font-weight:540; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:250px}
.ct small{font-size:.82rem; color:var(--ink-3)}
.cstar{margin-left:auto; color:#f0b400; font-size:.95rem}
.clip-more{text-align:center; padding:14px; font-size:.9rem; color:var(--ink-3); border-top:1px solid var(--line-soft)}

/* ===== Feature-Bento — vollflaechige Bild-Cards mit Hover-Demos ===== */
.feat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.feat-grid.bento{grid-auto-flow:dense; grid-auto-rows:1fr}
.feat-big{grid-column:span 2; grid-row:span 2}
.feat-wide{grid-column:span 2}

.feat{position:relative; display:flex; overflow:hidden; border-radius:18px; min-height:236px; color:#fff;
  isolation:isolate; transition:transform .45s var(--ease), box-shadow .45s, opacity .4s, filter .4s}
.feat-big{min-height:488px}
.feat-bg{position:absolute; inset:0; z-index:0; background-size:cover; background-position:center;
  transform:scale(1.01); transition:transform .6s var(--ease), filter .5s}
.feat::before{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(8,9,12,.95) 6%, rgba(8,9,12,.55) 42%, rgba(8,9,12,.16) 100%)}
.feat:hover, .feat.in-view{transform:translateY(-6px); box-shadow:0 32px 64px -28px rgba(0,0,0,.6)}.feat:hover .feat-bg, .feat.in-view .feat-bg{transform:scale(1.07)}.feat-grid:has(.feat:hover) .feat:not(:hover), .feat-grid:has(.feat.in-view) .feat:not(.in-view){opacity:.62; filter:brightness(.8)}

.feat-body{position:relative; z-index:3; margin-top:auto; padding:20px}
.fi{display:inline-grid; place-items:center; width:32px; height:32px; color:#fff; margin-bottom:9px;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.55))}
.fi svg{width:30px; height:30px}
.feat h3{margin-bottom:6px; font-size:1.12rem; letter-spacing:-.01em; color:#fff}
.feat p{margin:0; color:rgba(255,255,255,.78); font-size:.92rem; line-height:1.5}
.feat-big .feat-body{padding:28px}
.feat-big h3{font-size:1.8rem}
.feat-big p{font-size:1.05rem; max-width:42ch}

.fx{position:absolute; inset:0; z-index:2; pointer-events:none}

/* 1) Crop — Auswahl zieht ERST bei Hover von oben-links auf (vorher KEIN Marker sichtbar) */
.fx-crop{opacity:0; transition:opacity .25s}
.feat--crop:hover .fx-crop, .feat--crop.in-view .fx-crop{opacity:1}.fx-crop .sel{position:absolute; left:22%; top:14%; width:0; height:0; border:1.7px dashed #fff; border-radius:5px;
  box-shadow:0 0 0 999px rgba(8,10,14,0); transition:box-shadow .35s}
.fx-crop .sel::before,.fx-crop .sel::after{content:""; position:absolute; width:9px; height:9px; background:#fff; border-radius:2px; opacity:0; transition:opacity .3s}
.fx-crop .sel::before{left:-4px; top:-4px}.fx-crop .sel::after{right:-4px; bottom:-4px}
.fx-crop .seltag{position:absolute; left:22%; top:calc(14% - 23px); font-size:.66rem; font-weight:600; color:#fff;
  background:rgba(18,18,20,.85); padding:2px 8px; border-radius:5px; opacity:0; transition:opacity .25s}
.feat--crop:hover .fx-crop .sel, .feat--crop.in-view .fx-crop .sel{animation:cropDraw .85s var(--ease) forwards; box-shadow:0 0 0 999px rgba(8,10,14,.5)}.feat--crop:hover .fx-crop .sel::before,.feat--crop:hover .fx-crop .sel::after, .feat--crop.in-view .fx-crop .sel::before,.feat--crop.in-view .fx-crop .sel::after{opacity:1; transition-delay:.72s}.feat--crop:hover .fx-crop .seltag, .feat--crop.in-view .fx-crop .seltag{opacity:1; transition-delay:.76s}@keyframes cropDraw{from{width:0;height:0} to{width:48%;height:48%}}

/* 2) Blur — das Bild wird bei Hover unscharf */
.feat--blur .feat-bg{transition:transform .6s var(--ease), filter .5s}
.feat--blur:hover .feat-bg, .feat--blur.in-view .feat-bg{filter:blur(8px) brightness(.85)}
/* Scroll-Aufnahme: Fenster-Mockup, Inhalt scrollt hoch, Scrollleiste wandert mit (Hover + Mobile-Reveal) */
.fx-scroll{opacity:0; transition:opacity .3s}
.feat--scroll:hover .fx-scroll, .feat--scroll.in-view .fx-scroll{opacity:1}
.fx-scroll .scr{position:absolute; left:15%; top:13%; width:56%; height:54%; border:1.6px solid rgba(255,255,255,.5);
  border-radius:9px; overflow:hidden; background:rgba(255,255,255,.05); box-shadow:0 10px 30px -12px rgba(0,0,0,.6)}
.fx-scroll .scr-lines{position:absolute; left:11px; right:24px; top:11px}
.fx-scroll .scr-lines i{display:block; height:5px; border-radius:3px; background:rgba(255,255,255,.42); margin-bottom:8px}
.fx-scroll .scr-lines i:nth-child(3n){width:66%} .fx-scroll .scr-lines i:nth-child(4n+1){width:90%} .fx-scroll .scr-lines i:nth-child(2n){width:78%}
.feat--scroll:hover .scr-lines, .feat--scroll.in-view .scr-lines{animation:scrRoll 2.8s var(--ease) infinite}
@keyframes scrRoll{0%,8%{transform:translateY(0)} 92%,100%{transform:translateY(-48%)}}
.fx-scroll .scr-bar{position:absolute; right:8px; top:11px; bottom:11px; width:4px; border-radius:3px; background:rgba(255,255,255,.16)}
.fx-scroll .scr-thumb{position:absolute; left:0; right:0; top:0; height:34%; border-radius:3px; background:rgba(255,255,255,.72)}
.feat--scroll:hover .scr-thumb, .feat--scroll.in-view .scr-thumb{animation:scrThumb 2.8s var(--ease) infinite}
@keyframes scrThumb{0%,8%{top:0} 92%,100%{top:66%}}
@media(prefers-reduced-motion:reduce){.fx-scroll .scr-lines,.fx-scroll .scr-thumb{animation:none!important}}
/* 3) Nummer-Badges — poppen nacheinander auf */
.fx-badge{display:flex; align-items:center; justify-content:center; gap:14px; padding-bottom:30%}
.fx-badge .bd{width:36px; height:36px; border-radius:50%; background:#e8443a; color:#fff; display:grid; place-items:center;
  font-weight:700; font-size:.92rem; box-shadow:0 5px 14px rgba(0,0,0,.45); opacity:0; transform:scale(0)}
.feat--badge:hover .fx-badge .bd, .feat--badge.in-view .fx-badge .bd{animation:badgePop .42s var(--ease) forwards}.feat--badge:hover .fx-badge .bd:nth-child(2), .feat--badge.in-view .fx-badge .bd:nth-child(2){animation-delay:.14s}.feat--badge:hover .fx-badge .bd:nth-child(3), .feat--badge.in-view .fx-badge .bd:nth-child(3){animation-delay:.28s}@keyframes badgePop{0%{opacity:0;transform:scale(0)} 70%{opacity:1;transform:scale(1.18)} 100%{opacity:1;transform:scale(1)}}

/* 4) OCR — mehrere Textzeilen werden nacheinander markiert */
.fx-ocr .mark{position:absolute; left:12%; height:6.5%; width:0; background:rgba(255,224,70,.5);
  border-radius:3px; box-shadow:0 0 0 1px rgba(255,224,70,.45); transition:width .5s var(--ease)}
.fx-ocr .m1{top:30%; --w:66%}
.fx-ocr .m2{top:43%; --w:54%}
.fx-ocr .m3{top:56%; --w:44%}
.feat--ocr:hover .fx-ocr .mark, .feat--ocr.in-view .fx-ocr .mark{width:var(--w)}.feat--ocr:hover .fx-ocr .m2, .feat--ocr.in-view .fx-ocr .m2{transition-delay:.16s}.feat--ocr:hover .fx-ocr .m3, .feat--ocr.in-view .fx-ocr .m3{transition-delay:.32s}
/* 5) Annotieren — Rechteck-Kontur + ein Pfeil zeichnen sich bei Hover */
.fx-annot{display:grid; place-items:center; padding-top:6%; color:#ff5a4d; opacity:0; transition:opacity .3s}
.feat--annot:hover .fx-annot, .feat--annot.in-view .fx-annot{opacity:1}.fx-annot svg{width:62%; height:62%; overflow:visible}
.fx-annot line,.fx-annot rect{fill:none; stroke:#ff5a4d; stroke-width:3.2; stroke-linecap:round; filter:drop-shadow(0 1px 3px rgba(0,0,0,.4))}
.fx-annot line{stroke-dasharray:64; stroke-dashoffset:64}
.fx-annot rect{stroke-dasharray:172; stroke-dashoffset:172}
.feat--annot:hover .fx-annot .ar, .feat--annot.in-view .fx-annot .ar{animation:faRect .62s ease forwards}.feat--annot:hover .fx-annot .a1, .feat--annot.in-view .fx-annot .a1{animation:faDraw .45s ease .3s forwards}@keyframes faRect{to{stroke-dashoffset:0}}
@keyframes faDraw{from{stroke-dashoffset:64} to{stroke-dashoffset:0}}

/* 6) Teilen — Bild dunkelt ab, Papierflieger erscheint */
.fx-share{display:grid; place-items:center; padding-bottom:18%}
.fx-share::after{content:""; position:absolute; inset:0; background:rgba(8,9,12,0); transition:background .4s}
.fx-share .plane{position:relative; z-index:2; color:#fff; opacity:0; transform:scale(.5) rotate(-16deg) translateY(8px); transition:.5s var(--ease)}
.fx-share .plane svg{width:50px; height:50px; filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
.feat--share:hover .fx-share::after, .feat--share.in-view .fx-share::after{background:rgba(8,9,12,.52)}.feat--share:hover .fx-share .plane, .feat--share.in-view .fx-share .plane{opacity:1; transform:none}
/* 7) Hotkeys — Tasten poppen hoch */
.fx-keys{display:flex; align-items:center; justify-content:center; gap:10px; padding-bottom:28%}
.fx-keys kbd{display:grid; place-items:center; min-width:44px; height:48px; padding:0 12px; border-radius:11px;
  background:linear-gradient(#fafafa,#e0e2e8); border:1px solid rgba(255,255,255,.55);
  box-shadow:0 3px 0 rgba(0,0,0,.3), 0 9px 18px rgba(0,0,0,.45); font-family:var(--font); font-size:1.25rem; font-weight:600;
  color:#1d1d1f; opacity:0; transform:translateY(14px)}
.feat--keys:hover .fx-keys kbd, .feat--keys.in-view .fx-keys kbd{animation:keyPop .36s var(--ease) forwards}.feat--keys:hover .fx-keys kbd:nth-child(2), .feat--keys.in-view .fx-keys kbd:nth-child(2){animation-delay:.1s}.feat--keys:hover .fx-keys kbd:nth-child(3), .feat--keys.in-view .fx-keys kbd:nth-child(3){animation-delay:.2s}@keyframes keyPop{to{opacity:1; transform:none}}

/* 8) Lokal — Tueren schliessen, Schloss erscheint */
.fx-doors .door{position:absolute; top:0; bottom:0; width:51%; z-index:1;
  background:linear-gradient(160deg,rgba(22,22,26,.97),rgba(8,8,12,.97)); transition:transform .55s var(--ease)}
.fx-doors .door.l{left:0; transform:translateX(-101%)}
.fx-doors .door.r{right:0; transform:translateX(101%)}
.fx-doors .lk{position:absolute; inset:0; display:grid; place-items:center; padding-bottom:26%; color:#fff; opacity:0; z-index:2; transition:opacity .3s .35s}
.fx-doors .lk svg{width:36px; height:36px}
.feat--local:hover .fx-doors .door, .feat--local.in-view .fx-doors .door{transform:none}.feat--local:hover .fx-doors .lk, .feat--local.in-view .fx-doors .lk{opacity:1}
/* Dark editor section */
.section.dark{position:relative; background:var(--bg-dark); color:#f5f5f7; overflow:hidden;
  border-radius:40px; margin:24px 16px; box-shadow:0 40px 80px -50px rgba(0,0,0,.5)}
.amb-dark{position:absolute; inset:0; z-index:0; background:url("assets/img/ambient_dark.png") center/cover no-repeat; opacity:.85}
.editor-sec-grid{position:relative; z-index:1; display:grid; grid-template-columns:1fr 1.1fr; gap:60px; align-items:center}
.on-dark{color:#f5f5f7}
.dim2{color:rgba(255,255,255,.5); font-weight:600}
.on-dark-2{color:rgba(255,255,255,.62)}
.kbd-row{display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; margin-top:30px}
.kbd{font-family:var(--font); font-size:.9rem; font-weight:560; padding:7px 12px; border-radius:9px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:#fff}
.ksep{color:rgba(255,255,255,.5); font-size:.9rem; margin-right:6px}
.editor-window.mini{max-width:none}

/* Lokal */
.lokal{text-align:center; background:var(--bg-soft)}
.lokal-inner{max-width:680px; margin:0 auto}
.big-lock{display:grid; place-items:center; width:74px; height:74px; border-radius:22px; background:var(--ink); color:#fff; margin:0 auto 28px; box-shadow:var(--shadow)}
.big-lock svg{width:36px; height:36px}
.trust-row{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:30px}
.trust{font-size:.88rem; font-weight:520; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:980px; padding:9px 18px}

/* Preis */
.preis{padding-top:40px; overflow:clip}
.preis-grid{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
.preis-copy{position:relative; z-index:1; max-width:440px; opacity:0; will-change:transform,opacity}
.preis-copy h2{margin-top:6px}
.preis-shot{position:relative; z-index:3; perspective:1900px; perspective-origin:56% 40%}
.price-card{position:relative; max-width:520px; margin:0 auto; text-align:center; background:var(--card); border:1px solid var(--line-soft); border-radius:var(--r); padding:48px 38px 42px; box-shadow:16px 26px 56px -34px rgba(0,0,0,.3), 0 6px 16px rgba(0,0,0,.05); opacity:0; transform-origin:54% 50%; will-change:transform,opacity}
.price-num{font-size:clamp(3.6rem,9vw,5.4rem); font-weight:680; letter-spacing:-.04em; line-height:1; margin:6px 0 10px}
.price-num .cur{font-size:.5em; font-weight:560; vertical-align:super; margin-right:.06em; color:var(--ink-2)}
.price-sub{color:var(--ink-2); margin:0 0 28px; font-size:1.02rem}
/* Launch-Preis-Aktion (echter Zähler vom Server, statischer Fallback) */
.launch-badge{display:inline-block; background:#e8443a; color:#fff; font-size:.8rem; font-weight:700; letter-spacing:.02em;
  padding:6px 14px; border-radius:999px; margin-bottom:12px; box-shadow:0 8px 18px -8px rgba(232,68,58,.65)}
.price-was{color:var(--ink-3); font-size:1.06rem; margin:-6px 0 14px}
.price-was s{opacity:.85}
/* Launch-Fortschrittsbalken mit Zahl DRIN (Reveal: dunkel auf Track, weiß auf Füllung) */
.launch-counter{margin:4px auto 24px; max-width:430px}
.launch-counter .lm-bar{position:relative; height:27px; border-radius:999px; background:rgba(232,68,58,.13);
  overflow:hidden; box-shadow:inset 0 1px 2px rgba(0,0,0,.07)}
/* Beide Labels sind IMMER volle Balkenbreite + zentriert -> deckungsgleich, garantiert mittig.
   Das weiße wird per clip-path auf die Füllbreite beschnitten (rein CSS, kein JS-Timing). */
.launch-counter .lm-lbl{position:absolute; top:0; left:0; width:100%; height:100%; display:flex; align-items:center;
  justify-content:center; font-size:.82rem; font-weight:800; font-style:normal; letter-spacing:.02em;
  white-space:nowrap; pointer-events:none}
.launch-counter .lm-lbl-base{color:var(--ink-2)}
.launch-counter .lm-fill{position:absolute; left:0; top:0; height:100%; border-radius:999px; width:0;
  background:linear-gradient(90deg,#e8443a,#ff7a5c); box-shadow:0 2px 10px -3px rgba(232,68,58,.7);
  overflow:hidden; transition:width 1.1s cubic-bezier(.2,1,.3,1)}
.launch-counter .lm-fill::after{content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.5) 50%,transparent 62%);
  transform:translateX(-130%); animation:lmShimmer 2.6s linear infinite}
.launch-counter .lm-lbl-on{color:#fff; z-index:2; clip-path:inset(0 100% 0 0)}
@keyframes lmShimmer{100%{transform:translateX(130%)}}
.launch-counter .lm-sub{margin-top:11px; font-size:.95rem; font-weight:600; color:var(--ink-2)}
.launch-counter .lm-sub b{color:#e8443a; font-weight:800}
.launch-sold .launch-badge,.launch-sold .price-was,.launch-sold .launch-counter .lm-bar{display:none}
@media(prefers-reduced-motion:reduce){.launch-counter .lm-fill::after{animation:none}}
/* Hero-Launch (V41): Before/After-Split + Plätze-Meter mit der Zahl DRIN.
   Der Meter bleibt versteckt, bis der Server echte Zahlen geliefert hat (kein Fake-Stand offline). */
.hero-launch{width:min(370px,100%); margin:22px auto 0; text-align:center}
.hero-launch .hl-split{position:relative; display:flex; border-radius:16px; overflow:hidden;
  background:#fff; border:1px solid rgba(0,0,0,.06); box-shadow:0 12px 32px -16px rgba(0,0,0,.28)}
.hero-launch .hl-old{flex:0 0 37%; padding:13px 8px 13px 18px; display:flex; flex-direction:column; gap:1px; text-align:left}
/* padding-left schafft Platz, damit die Rabatt-Pille auf der Naht den Preis nicht überdeckt */
.hero-launch .hl-new{flex:1; margin-left:-24px; padding:13px 16px 13px 64px; text-align:left; color:#fff;
  background:linear-gradient(115deg,#e8443a,#ff7a5c); clip-path:polygon(24px 0,100% 0,100% 100%,0 100%);
  display:flex; flex-direction:column; gap:1px}
.hero-launch .hl-k{font-size:9.5px; font-weight:750; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap}
.hero-launch .hl-old .hl-k{color:var(--ink-3)}
.hero-launch .hl-new .hl-k{opacity:.93}
.hero-launch .hl-v{font-size:26px; font-weight:800; letter-spacing:-.025em; line-height:1.18; white-space:nowrap}
/* Durchstreichung ROT (wie in V29), nicht grau */
.hero-launch .hl-old .hl-v{font-size:20px; font-weight:650; color:var(--ink-3);
  text-decoration:line-through; text-decoration-color:#e8443a; text-decoration-thickness:2px}
/* Rabatt-Pille auf der Naht */
.hero-launch .hl-off{position:absolute; left:37%; top:50%; transform:translate(-50%,-50%); z-index:2;
  background:#fff; color:#c9342b; font-size:11.5px; font-weight:850; letter-spacing:.01em; font-style:normal;
  padding:4px 10px; border-radius:999px; white-space:nowrap; box-shadow:0 6px 16px -6px rgba(0,0,0,.4)}
.hero-launch .hl-meter{display:none; position:relative; height:30px; margin-top:10px; border-radius:999px;
  background:rgba(232,68,58,.13); overflow:hidden; box-shadow:inset 0 1px 2px rgba(0,0,0,.06)}
.hero-launch.is-ready .hl-meter{display:block}
/* font-style:normal — der Füllbalken ist ein <i>, dessen Kursiv-Default sonst aufs Label durchschlägt */
.hero-launch .hl-lbl{position:absolute; top:0; left:0; height:100%; width:100%; display:flex; align-items:center;
  justify-content:center; font-size:12.5px; font-weight:800; font-style:normal; letter-spacing:.01em;
  white-space:nowrap; color:var(--ink-2); pointer-events:none}
.hero-launch .hl-fill{position:absolute; left:0; top:0; height:100%; width:0; border-radius:999px; overflow:hidden;
  background:linear-gradient(90deg,#e8443a,#ff7a5c); box-shadow:0 2px 10px -3px rgba(232,68,58,.7);
  transition:width 1.1s cubic-bezier(.2,1,.3,1)}
.hero-launch .hl-fill::after{content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.5) 50%,transparent 62%);
  transform:translateX(-130%); animation:lmShimmer 2.6s linear infinite}
/* weißes Label: volle Balkenbreite + zentriert, per clip-path auf die Füllung beschnitten
   (animiert synchron mit der Balken-Füllung) -> immer mittig, kein JS-Breiten-Timing */
.hero-launch .hl-on{color:#fff; z-index:2; clip-path:inset(0 100% 0 0);
  transition:clip-path 1.1s cubic-bezier(.2,1,.3,1)}
.hero-launch .hl-trial{margin:10px 0 0; font-size:.82rem; font-weight:600; color:var(--ink-2)}
@media(prefers-reduced-motion:reduce){.hero-launch .hl-fill::after{animation:none}
  .hero-launch .hl-fill,.hero-launch .hl-on{transition:none}}
/* Der Hero ist die DUNKLE Crop-Bühne: Track, Labels und Trial-Zeile müssen auf Dunkel tragen.
   text-shadow der Hero-Inner darf nicht in die weiße Split-Karte durchschlagen. */
.hero-crop .hero-launch{text-shadow:none}
.hero-crop .hero-launch .hl-split{border-color:rgba(255,255,255,.16); box-shadow:0 20px 46px -20px rgba(0,0,0,.75)}
.hero-crop .hero-launch .hl-meter{background:rgba(255,255,255,.17); box-shadow:inset 0 1px 2px rgba(0,0,0,.25)}
.hero-crop .hero-launch .hl-lbl{color:rgba(255,255,255,.85)}
.hero-crop .hero-launch .hl-on{color:#fff}
.hero-crop .hero-launch .hl-trial{color:rgba(255,255,255,.6)}
.req{margin:22px 0 0; font-size:.84rem; color:var(--ink-3)}

/* Footer — Brand-Block + Sitemap-Spalten (an vinedit angelehnt) */
.visually-hidden{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

.footer{border-top:1px solid var(--line-soft); background:var(--bg-soft); padding:72px 0 0}

/* Brand-Block + Sitemap-Spalten */
.foot-top{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1.75fr); gap:48px 64px; align-items:start; padding-bottom:48px}
.foot-brand{max-width:360px}
.foot-logo{display:inline-flex; align-items:center; gap:10px; font-weight:650; letter-spacing:-.02em; font-size:1.18rem; color:var(--ink)}
.foot-logo .brand-mark img{width:26px; height:26px; object-fit:contain; display:block}
.foot-word{line-height:1; color:var(--ink)}
.foot-tag{margin:16px 0 0; max-width:42ch; color:var(--ink-2); font-size:.95rem; line-height:1.6; font-weight:440}
.foot-plat{display:flex; align-items:center; gap:8px; margin:18px 0 0; color:var(--ink-3); font-size:.82rem; font-weight:520; letter-spacing:.01em}
.foot-plat .ico{width:14px; height:14px; color:var(--ink-3)}
.foot-sep{color:var(--line); margin:0 2px}

.foot-nav{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:32px}
.foot-col{display:flex; flex-direction:column; gap:11px}
.foot-head{margin:0 0 5px; font-size:.76rem; font-weight:650; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
.foot-col a{font-size:.94rem; color:var(--ink-2); font-weight:460; transition:color .2s var(--ease)}
.foot-col a:hover{color:var(--ink)}

/* Hairline + ruhige Bottom-Bar */
.foot-rule{height:1px; background:var(--line-soft)}
.foot-bar{display:flex; align-items:center; justify-content:space-between; gap:16px 24px; flex-wrap:wrap; padding:24px 0 30px}
.foot-copy{margin:0; color:var(--ink-3); font-size:.84rem}
.foot-made{display:inline-flex; align-items:center; gap:7px; margin:0; color:var(--ink-3); font-size:.82rem; font-weight:520}
.foot-made svg{flex:none; width:13px; height:13px; color:var(--ink-2); opacity:.85}

@media (max-width:760px){
  .footer{padding-top:56px}
  .foot-top{grid-template-columns:1fr; gap:40px; padding-bottom:40px}
  .foot-brand{max-width:none}
  .foot-nav{grid-template-columns:1fr 1fr; gap:34px 24px}
  .foot-bar{flex-direction:column; align-items:flex-start; gap:12px; padding-bottom:34px}
}
@media (max-width:420px){
  .foot-nav{grid-template-columns:1fr}
}

/* ---------- Unterseiten: Rechtliches / Hilfe ---------- */
.legal{padding:128px 0 56px}
.legal-wrap{max-width:820px}
.legal-head{margin-bottom:38px; padding-bottom:30px; border-bottom:1px solid var(--line-soft)}
.legal-head h1{font-size:clamp(2.1rem,5vw,3.1rem); letter-spacing:-.025em; line-height:1.04; margin:8px 0 0}
.legal-meta{margin:18px 0 0; color:var(--ink-3); font-size:.9rem}
.legal-lede{margin:16px 0 0; color:var(--ink-2); font-size:1.12rem; line-height:1.6; max-width:62ch}

.prose{color:var(--ink-2); font-size:1.02rem; line-height:1.72}
.prose h2{font-size:1.5rem; letter-spacing:-.015em; color:var(--ink); margin:46px 0 14px; line-height:1.2}
.prose h3{font-size:1.12rem; color:var(--ink); margin:28px 0 10px}
.prose p{margin:0 0 16px}
.prose ul{margin:0 0 18px; padding:0; display:grid; gap:9px}
.prose li{position:relative; padding-left:24px}
.prose li::before{content:""; position:absolute; left:3px; top:11px; width:6px; height:6px; border-radius:50%; background:var(--ink-3)}
.prose a{color:var(--ink); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line)}
.prose a:hover{text-decoration-color:var(--ink)}
.prose strong{color:var(--ink); font-weight:600}
.prose .muted{color:var(--ink-3); font-size:.92rem}
.prose address{font-style:normal}

.note{margin:24px 0; padding:18px 20px; background:var(--bg-soft); border:1px solid var(--line-soft); border-radius:14px; font-size:.96rem; line-height:1.6; color:var(--ink-2)}
.note strong{color:var(--ink)}

/* FAQ-Accordion */
.faq-cat{margin:42px 0 14px; font-size:.82rem; font-weight:650; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
.faq-cat:first-child{margin-top:8px}
.faq-list{display:grid; gap:12px}
.faq{border:1px solid var(--line-soft); border-radius:14px; background:var(--card); overflow:hidden; transition:border-color .2s}
.faq[open]{border-color:var(--line)}
.faq summary{list-style:none; cursor:pointer; padding:18px 20px; font-weight:560; color:var(--ink); font-size:1.04rem;
  display:flex; align-items:center; justify-content:space-between; gap:18px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-size:1.5rem; font-weight:300; line-height:1; color:var(--ink-3); transition:transform .25s var(--ease)}
.faq[open] summary::after{transform:rotate(45deg)}
.faq-a{padding:0 20px 20px; color:var(--ink-2); line-height:1.68}
.faq-a p{margin:0 0 10px}
.faq-a p:last-child{margin:0}
.faq-a a{color:var(--ink); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line)}

@media (max-width:760px){
  .legal{padding:104px 0 40px}
}

/* ---------- Kontaktformular ---------- */
.btn-lg{padding:13px 26px; font-size:1rem}
.kontakt-form{margin-top:6px; max-width:640px}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.field{display:block; margin-bottom:16px}
.field > span{display:block; font-size:.86rem; font-weight:560; color:var(--ink-2); margin-bottom:7px}
.field input, .field textarea{width:100%; font:inherit; font-size:1rem; color:var(--ink); background:var(--card);
  border:1px solid var(--line); border-radius:12px; padding:13px 15px; transition:border-color .2s, box-shadow .2s; resize:vertical}
.field input::placeholder, .field textarea::placeholder{color:var(--ink-3)}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--ink); box-shadow:0 0 0 4px rgba(0,0,0,.06)}
.form-foot{display:flex; align-items:center; gap:16px 22px; flex-wrap:wrap; margin-top:6px}
.form-hint{margin:0; color:var(--ink-3); font-size:.92rem}
.form-hint a, .kontakt-note a{color:var(--ink); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line)}
.form-hint a:hover, .kontakt-note a:hover{text-decoration-color:var(--ink)}
.form-status{margin:18px 0 0; padding:13px 16px; border-radius:12px; background:var(--bg-soft); border:1px solid var(--line-soft); color:var(--ink-2); font-size:.95rem}
.form-status.err{background:#fff4f3; border-color:#f1c7c2; color:#a3372f}
.kontakt-note{margin:24px 0 0; color:var(--ink-3); font-size:.92rem; max-width:640px}
@media (max-width:560px){
  .form-row{grid-template-columns:1fr; gap:0}
}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0; transform:translateY(36px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.reveal.in{opacity:1; transform:none}
/* Scroll-Fortschrittsbalken oben */
.scroll-prog{position:fixed; top:0; left:0; height:3px; width:100%; transform:scaleX(0); transform-origin:left;
  z-index:60; background:linear-gradient(90deg,var(--ink),#8a8a8e); will-change:transform}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  .editor-window{transition:none}
}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .feat-grid{grid-template-columns:repeat(2,1fr)}
  .feat-big{grid-row:auto}
  .usp-grid, .editor-sec-grid, .preis-grid{grid-template-columns:1fr; gap:42px}
  .usp-shot, .editor-sec-shot{order:-1}
  .preis-copy{max-width:none; text-align:center; margin:0 auto}
  .nav-links{display:none}
  .hero-showcase{grid-template-columns:1fr; gap:30px; margin-top:64px}
  .showcase-copy{max-width:560px; margin:0 auto; text-align:center}
  .editor-window.tilted{transform:rotateX(3deg) rotateY(-13deg)}
  .hero-grid{grid-template-columns:1fr; text-align:center; gap:18px}
  .hero-copy{max-width:600px; margin:0 auto}
  .hero-copy .morph-title{justify-content:center}
  .hero-copy .lede{margin-left:auto; margin-right:auto}
  .hero-copy .cta-row{justify-content:center}
  .hero-visual-wrap{max-width:540px; margin:6px auto 0}
}
@media (max-width:560px){
  body{font-size:16px}
  .section{padding:74px 0}
  .feat-grid{grid-template-columns:1fr}
  .feat-big, .feat-wide{grid-column:span 1}
  .hero{padding-top:120px}
  .appicon{width:96px; top:-44px}
  .price-card{padding:40px 22px 36px}
  .cta-row{flex-direction:column; align-items:stretch}
  .store-btn{justify-content:center}
  /* Hero-Buttons nicht über die volle Breite ziehen — kompakt & zentriert */
  .hero-crop .cta-row{align-items:center}
  .hero-crop .store-btn{width:auto; min-width:210px; padding-left:24px; padding-right:24px}
  .win-toolbar{overflow-x:auto}
}
@media (max-width:820px){ .floating-clip{display:none} }

/* ===== Lenis Smooth-Scroll ===== */
html.lenis, html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* ===== Hero-Visual Parallax-Wrapper ===== */
.hero-visual-wrap{position:relative; will-change:transform; transition:transform .3s cubic-bezier(.22,.61,.36,1)}

/* ===== Marquee ===== */
.marquee{position:relative; overflow:hidden; padding:26px 0; margin:6px 0;
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee-track{display:flex; align-items:center; width:max-content; animation:marquee 32s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee.paused .marquee-track{animation-play-state:paused}   /* außer Sicht: Leistung sparen */
.marquee-track span{font-size:clamp(1.5rem,3.2vw,2.6rem); font-weight:680; letter-spacing:-.02em; color:var(--ink); padding:0 .42em; white-space:nowrap}
.marquee-track i{color:var(--ink-3); font-size:1.1rem; font-style:normal; opacity:.55}
@keyframes marquee{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .marquee-track{animation:none} }

/* ============================================================
   HERO · LIVE-CROP (dunkle Bühne, scharfer Farb-Ausschnitt)
   ============================================================ */
.hero-crop{position:relative; min-height:94vh; display:flex; align-items:center; overflow:hidden;
  background:#08080a; color:#fff; isolation:isolate}
.hero-stage{position:absolute; inset:0; z-index:0}
.stage-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center}
.stage-img.dim{filter:grayscale(.85) brightness(.4) blur(3px); transform:scale(1.06)}
.stage-img.sharp{filter:saturate(1.06) contrast(1.03) brightness(.74);
  clip-path:inset(15% 18% 19% 18% round 12px); transition:clip-path .16s linear; will-change:clip-path}
.stage-vignette{position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(125% 108% at 50% 46%, transparent 34%, rgba(0,0,0,.58) 100%)}
.crop-ui{position:absolute; left:18%; top:15%; width:64%; height:66%; z-index:2; pointer-events:none}
@keyframes cropIn{from{opacity:0; transform:scale(.9)} to{opacity:1; transform:scale(1)}}
.crop-ants{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.crop-ants rect{stroke:#fff; stroke-width:1.7; stroke-dasharray:8 5; animation:ants 1s linear infinite;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.55))}
@keyframes ants{to{stroke-dashoffset:-26}}
.hdl{position:absolute; width:9px; height:9px; background:#fff; border-radius:2px; transform:translate(-50%,-50%); box-shadow:0 1px 3px rgba(0,0,0,.5)}
.hdl.tl{left:0;top:0}.hdl.tr{left:100%;top:0}.hdl.bl{left:0;top:100%}.hdl.br{left:100%;top:100%}
.hdl.t{left:50%;top:0}.hdl.b{left:50%;top:100%}.hdl.l{left:0;top:50%}.hdl.r{left:100%;top:50%}
.crop-size{position:absolute; left:0; top:-32px; background:rgba(18,18,20,.82); color:#fff; font-size:.78rem; font-weight:560;
  padding:4px 10px; border-radius:8px; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); font-variant-numeric:tabular-nums; white-space:nowrap}
.crop-copied{position:absolute; right:0; bottom:-40px; background:#fff; color:#111; font-size:.82rem; font-weight:600;
  padding:6px 13px; border-radius:980px; box-shadow:0 10px 26px rgba(0,0,0,.35); white-space:nowrap; opacity:0; transform:translateY(8px) scale(.92)}
.crop-copied.show{animation:copiedPop .55s var(--ease) forwards}
@keyframes copiedPop{0%{opacity:0;transform:translateY(8px) scale(.92)} 55%{opacity:1;transform:translateY(0) scale(1.05)} 100%{opacity:1;transform:none}}
.hero-crop .hero-inner{position:relative; z-index:3; text-align:center; max-width:640px; margin:0 auto; text-shadow:0 2px 26px rgba(0,0,0,.45)}
.hero-crop .eyebrow{color:rgba(255,255,255,.62); margin-bottom:18px}
.hero-crop .morph-title{justify-content:center; margin-top:6px}
.hero-crop .word{font-size:clamp(3.5rem,8.6vw,7rem)}
.hero-crop .ltr{color:#fff}
.hero-crop .hero-sub{color:rgba(255,255,255,.9); margin-top:16px}
.hero-crop .hero-sub .plus{color:rgba(255,255,255,.5)}
.hero-lede2{margin:14px auto 0; max-width:46ch; color:rgba(255,255,255,.6); font-size:1.05rem; line-height:1.55}
.hero-crop .cta-row{justify-content:center; margin-top:30px}
.hero-crop .store-btn{box-shadow:0 12px 30px rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.1)}
.hero-crop .store-win{background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.22); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.hero-crop .store-win:hover{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.4)}
.hero-crop .price-chip{color:rgba(255,255,255,.55); margin-top:18px}
.hero-crop .price-chip b{color:#fff}
.hero-hint{position:absolute; left:0; right:0; bottom:26px; text-align:center; z-index:3;
  font-size:.82rem; color:rgba(255,255,255,.5); letter-spacing:.02em; animation:hintPulse 2.4s ease-in-out infinite; transition:opacity .4s}
@keyframes hintPulse{0%,100%{opacity:.4} 50%{opacity:.78}}
.hero-crop.interacting .hero-hint{opacity:0; animation:none}

/* Editor-Showcase als eigene Sektion */
.showcase-sec{padding:92px 0 80px}
.showcase-sec .hero-showcase{margin-top:0}

/* Nav ueber dem dunklen Hero (oben, nicht gescrollt) */
.nav:not(.scrolled){background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; border-bottom-color:transparent}
.nav:not(.scrolled) .nav-links a{color:rgba(255,255,255,.78)}
.nav:not(.scrolled) .nav-links a:hover{color:#fff}
.nav:not(.scrolled) .brand-name{color:#fff}
.nav:not(.scrolled) .brand-mark img{filter:brightness(0) invert(1)}
.nav:not(.scrolled) .btn-dark{background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.nav:not(.scrolled) .btn-dark:hover{background:rgba(255,255,255,.22)}

@media (max-width:760px){
  .hero-crop{min-height:88vh}
  .crop-ui{left:auto; right:6%; top:14%; width:60%; height:34%}
  .stage-img.sharp{clip-path:inset(14% 6% 52% 34% round 12px)}
  .stage-vignette{background:linear-gradient(180deg, rgba(8,8,10,.4), rgba(8,8,10,.85))}
  .hero-crop .hero-inner{max-width:none; text-align:left}
}

/* ============ Legal-Seiten: Sprach-Tab (Deutsch | English) ============ */
.lang-tabs{display:inline-flex;gap:3px;padding:3px;background:var(--bg-soft);border:1px solid var(--line-soft);border-radius:999px;margin:18px 0 6px}
.lang-tab{padding:6px 18px;border-radius:999px;font-size:13px;font-weight:600;letter-spacing:.1px;color:var(--ink-2);text-decoration:none;transition:color .15s,background .15s}
.lang-tab.is-active{background:var(--bg);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.lang-tab:not(.is-active):hover{color:var(--ink);background:rgba(0,0,0,.035)}

/* ============ Sprachauswahl — vertikal, kein Kasten, symmetrisch animiert, Tooltip links ============ */
#langsel{position:relative;display:inline-flex;align-items:center;margin-left:10px}
#langsel .lang-trigger{width:36px;height:36px;min-width:36px;border:none;background:transparent;border-radius:50%;padding:0;cursor:pointer;display:block;transition:transform .15s ease}
#langsel .lang-trigger:hover{transform:scale(1.08)}
#langsel .lang-trigger:focus-visible{outline:none}
#langsel .lang-flag-orb{width:100%;height:100%;border-radius:50%;overflow:hidden;display:block;box-shadow:0 0 0 1.5px rgba(0,0,0,.14)}
#langsel .lang-flag-orb svg{width:100%;height:100%;display:block;border-radius:50%}
/* Menü ohne Kasten; Sichtbarkeit erst nach der gestaffelten Schließ-Animation ausblenden */
#langsel .lang-menu{position:absolute;right:0;top:calc(100% + 14px);padding:0;background:none;border:none;box-shadow:none;z-index:9999;visibility:hidden;transition:visibility 0s linear .62s}
#langsel.open .lang-menu{visibility:visible;transition:visibility 0s}
#langsel .lang-options-list{display:flex;flex-direction:column;align-items:flex-end;gap:11px}
/* Basis = geschlossener Zustand (auch Ziel der Ausblendung) */
#langsel .lang-option{position:relative;width:36px;height:36px;border-radius:50%;display:block;cursor:pointer;text-decoration:none;opacity:0;transform:translateX(16px) scale(.55);transition:transform .34s cubic-bezier(.34,1.56,.64,1),opacity .22s ease,box-shadow .16s ease}
#langsel.open .lang-option{opacity:1;transform:translateX(0) scale(1)}
/* Öffnen: kaskadiert von oben nach unten */
#langsel.open .lang-option:nth-child(1){transition-delay:.02s}
#langsel.open .lang-option:nth-child(2){transition-delay:.05s}
#langsel.open .lang-option:nth-child(3){transition-delay:.08s}
#langsel.open .lang-option:nth-child(4){transition-delay:.11s}
#langsel.open .lang-option:nth-child(5){transition-delay:.14s}
#langsel.open .lang-option:nth-child(6){transition-delay:.17s}
#langsel.open .lang-option:nth-child(7){transition-delay:.20s}
#langsel.open .lang-option:nth-child(8){transition-delay:.23s}
#langsel.open .lang-option:nth-child(9){transition-delay:.26s}
/* Schließen: zieht sich von unten nach oben zusammen (gestaffelt, analog) */
#langsel .lang-option:nth-child(9){transition-delay:.02s}
#langsel .lang-option:nth-child(8){transition-delay:.05s}
#langsel .lang-option:nth-child(7){transition-delay:.08s}
#langsel .lang-option:nth-child(6){transition-delay:.11s}
#langsel .lang-option:nth-child(5){transition-delay:.14s}
#langsel .lang-option:nth-child(4){transition-delay:.17s}
#langsel .lang-option:nth-child(3){transition-delay:.20s}
#langsel .lang-option:nth-child(2){transition-delay:.23s}
#langsel .lang-option:nth-child(1){transition-delay:.26s}
#langsel .lang-option .lang-flag-orb{box-shadow:0 0 0 1.5px rgba(0,0,0,.12)}
#langsel .lang-option:hover{transform:scale(1.16);z-index:2}
#langsel .lang-option:hover .lang-flag-orb{box-shadow:0 5px 14px rgba(0,0,0,.22),0 0 0 2px #fff}
#langsel .lang-option.active .lang-flag-orb{box-shadow:0 0 0 2px #e8443a,0 0 0 5px rgba(232,68,58,.18)}
#langsel .lang-option-label{position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%) translateX(4px);opacity:0;pointer-events:none;background:#1d1d1f;color:#fff;font-size:12px;font-weight:600;letter-spacing:.2px;padding:5px 10px;border-radius:8px;white-space:nowrap;transition:opacity .14s ease,transform .14s ease;z-index:3}
#langsel .lang-option-label::after{content:"";position:absolute;left:100%;top:50%;transform:translateY(-50%);border:5px solid transparent;border-left-color:#1d1d1f}
#langsel .lang-option:hover .lang-option-label{opacity:1;transform:translateY(-50%) translateX(0)}
.hero-crop #langsel .lang-flag-orb,.nav:not(.scrolled) #langsel .lang-trigger .lang-flag-orb{box-shadow:0 0 0 1.5px rgba(255,255,255,.5)}
@media (prefers-reduced-motion:reduce){#langsel .lang-menu,#langsel .lang-option{transition-duration:.01s !important;transition-delay:0s !important}}

/* ============================================================================
   MOBILE / TABLET OPTIMIERUNG — greift nur bei kleinen Screens.
   Desktop (> 980px) bleibt komplett unberührt.
   ============================================================================ */

/* --- Grundsatz: KEIN horizontales Scrollen (Nav ist position:fixed -> unkritisch) --- */
@media (max-width:980px){
  html,body{overflow-x:hidden}
  /* 108%-breite, überstehende Fenster auf Containerbreite bringen */
  .editor-window,.clip-window{width:100%;max-width:100%}
}

/* --- TABLET (601–980): Clipboard darf gedreht bleiben (genug Platz), nur Überlauf gefixt --- */

/* --- SMARTPHONE (≤600): alles flach, nichts rotiert/3D, Demos kompakt --- */
@media (max-width:600px){
  /* JS-3D-Tilts neutralisieren — opacity bleibt (separat gesetzt) -> Elemente sichtbar & flach */
  .showcase-shot .editor-window,
  .usp-shot .clip-window,
  .preis-shot .price-card{transform:none !important}
  .showcase-shot,.usp-shot,.preis-shot{perspective:none !important}

  /* Editor-Demo (Showcase) kompakter statt „viel zu groß" */
  .showcase-shot{max-width:440px;margin:0 auto}
  .editor-window{width:100%;border-radius:14px}

  /* Clipboard-Demo flach */
  .clip-window{width:100%}

  /* Preis-Card: ganz normale flache Draufsicht */
  .price-card{padding:32px 20px 30px}

  /* Topleiste: „Für macOS · Windows" + Maus-Hinweis raus (passt/gilt nicht am Handy) */
  .hero-crop .eyebrow{display:none}
  .hero-hint{display:none}
  /* Nach dem einmaligen Auswahl-Durchlauf: Bedien-Optik der Auswahl ausblenden */
  .hero-crop.crop-done #cropUI{opacity:0;transition:opacity .55s ease;pointer-events:none}

  /* Hero-Titel/Text: passt in die Breite, kein Überlauf */
  .hero-crop{min-height:88vh}
  .hero-crop .word{font-size:clamp(2.7rem,14vw,4rem)}
  .hero-lede2{font-size:.96rem;max-width:34ch}
  .hero-crop .cta-row{flex-wrap:wrap}

  /* Sicherheitsnetz gegen Rest-Überläufe */
  .wrap{max-width:100%}
  img,svg,.window,.price-card{max-width:100%}
}
/* Systemvoraussetzung im Footer */
.foot-reqhead{margin:18px 0 0;font-size:.7rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.foot-req{margin-top:6px;font-size:.82rem;color:var(--ink-3);display:flex;align-items:center;gap:7px}
.foot-req svg{width:15px;height:15px;opacity:.7}

/* --- MOBILE-FEINSCHLIFF (Fortsetzung) --- */
/* Herzstück (Verlauf/usp): mobil erst Text, dann Schaubild */
@media (max-width:980px){
  .usp-copy{order:-1}
  .usp-shot{order:0}
}
/* Editor-Demo („Markieren im Editor") passt voll ins Bild: Toolbar kompakt */
@media (max-width:600px){
  .editor-window .tool-swatches{display:none}
  .editor-window .tool-group.right .tool.ghost{display:none}
  .editor-window .win-toolbar{gap:7px;padding:8px 10px;overflow-x:visible;flex-wrap:nowrap}
  .editor-window .win-toolbar .tool{width:26px;height:24px}
  .editor-window .win-toolbar .tool svg{width:16px;height:16px}
  .editor-window .win-toolbar .pill{padding:5px 11px;font-size:.78rem}
  .showcase-shot{max-width:400px}
}
/* .feat.in-view spiegelt jetzt vollständig :hover (siehe Regeln oben); per JS nur auf
   Touch-Geräten gesetzt, sobald die Karte ins Bild scrollt. Desktop-Hover unberührt. */

/* ============================================================================
   EDITOR-DEMO GLÄTTE (Smartphone): teure Effekte reduzieren, Ebenen kompositieren
   ============================================================================ */
@media (max-width:600px){
  /* Cursor + Annotationsebene auf eigene GPU-Schicht -> ruckelfreier */
  .cursor-sim{will-change:transform}
  .anim-layer{transform:translateZ(0)}
  /* Pfeil/Rahmen isolieren, damit die Neuzeichnung nicht die ganze Karte trifft */
  .an-arrow2,.an-rect,.sel-hl{will-change:transform,width}
}

/* Mobil: Abschnitte einmalig einblenden (statt scroll-gebunden -> kein Ruckeln).
   Übergänge nur hier definieren, damit der Desktop-Scroll-Reveal (JS je Frame) frei bleibt. */
@media (max-width:760px){
  .showcase-copy,.usp-copy,.preis-copy{transform:translateY(18px)}
  .showcase-copy,.usp-copy,.preis-copy,
  .showcase-shot .editor-window,.usp-shot .clip-window,.preis-shot .price-card,
  .demo-note{transition:opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1)}
}

/* ============================================================================
   MOBILES BURGER-MENÜ (≤760px) — Desktop-Navlinks + Sprachen in einem Panel
   ============================================================================ */
.nav-burger{display:none;width:40px;height:40px;border:none;background:transparent;padding:0;
  cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent}
.nav-burger .bl{position:absolute;left:9px;right:9px;height:2px;border-radius:2px;background:var(--ink);
  transition:transform .34s cubic-bezier(.6,.05,.2,1),opacity .2s ease,top .34s cubic-bezier(.6,.05,.2,1)}
.nav-burger .bl:nth-child(1){top:14px}
.nav-burger .bl:nth-child(2){top:20px}
.nav-burger .bl:nth-child(3){top:26px}
.nav:not(.scrolled) .nav-burger .bl{background:#fff}
.nav-burger.open .bl:nth-child(1){top:20px;transform:rotate(45deg)}
.nav-burger.open .bl:nth-child(2){opacity:0}
.nav-burger.open .bl:nth-child(3){top:20px;transform:rotate(-45deg)}

.nav-panel{position:fixed;top:72px;right:12px;left:12px;z-index:49;max-width:360px;margin-left:auto;
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);
  border:1px solid rgba(255,255,255,.5);border-radius:20px;box-shadow:0 30px 70px -28px rgba(0,0,0,.42),0 4px 14px rgba(0,0,0,.06);
  padding:12px;transform-origin:top right;opacity:0;transform:translateY(-10px) scale(.97);
  visibility:hidden;pointer-events:none;
  transition:opacity .26s ease,transform .32s cubic-bezier(.16,1,.3,1),visibility 0s linear .32s}
.nav-panel.open{opacity:1;transform:none;visibility:visible;pointer-events:auto;
  transition:opacity .26s ease,transform .32s cubic-bezier(.16,1,.3,1),visibility 0s}
.np-item{opacity:0;transform:translateY(7px);transition:opacity .26s ease,transform .3s cubic-bezier(.16,1,.3,1)}
.nav-panel.open .np-item{opacity:1;transform:none}
.nav-panel.open .np-item:nth-child(1){transition-delay:.03s}
.nav-panel.open .np-item:nth-child(2){transition-delay:.06s}
.nav-panel.open .np-item:nth-child(3){transition-delay:.09s}
.nav-panel.open .np-item:nth-child(4){transition-delay:.12s}
.nav-panel.open .np-item:nth-child(5){transition-delay:.15s}
.nav-panel.open .np-item:nth-child(6){transition-delay:.18s}
.nav-panel.open .np-item:nth-child(7){transition-delay:.21s}
.nav-panel.open .np-item:nth-child(8){transition-delay:.24s}
.np-link{display:block;padding:12px 14px;border-radius:12px;font-size:1.04rem;font-weight:560;
  color:var(--ink);text-decoration:none;transition:background .15s ease}
.np-link:active{background:var(--bg-soft)}
.np-div{height:1px;background:var(--line-soft);margin:9px 6px 4px}
.np-langhead{font-size:.7rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);padding:4px 8px 8px}
.np-langs{display:flex;flex-wrap:wrap;gap:12px;padding:0 8px 6px}
.np-lang{width:34px;height:34px;border-radius:50%;overflow:hidden;display:block;
  box-shadow:0 0 0 1.5px rgba(0,0,0,.12);transition:transform .14s ease}
.np-lang:active{transform:scale(1.12)}
.np-lang svg{width:100%;height:100%;display:block;border-radius:50%}
.np-lang.active{box-shadow:0 0 0 2px #e8443a,0 0 0 5px rgba(232,68,58,.18)}

@media (min-width:761px){ .nav-panel{display:none} }
@media (max-width:760px){
  .nav-burger{display:block}
  #langsel{display:none}                 /* Sprache steckt jetzt im Burger-Menü */
  .nav-inner .btn-dark{margin-left:auto}  /* CTA + Burger rechts gruppieren, Brand links */
  .nav-burger{margin-left:8px}
}
@media (prefers-reduced-motion:reduce){
  .nav-panel,.np-item,.nav-burger .bl{transition-duration:.01s !important;transition-delay:0s !important}
}