/* ══ Landing v2 — below-hero redesign (claude.ai/design translation) ══
   Namespace: every selector starts with .lv2- . Fonts/colors per design. */

/* ── tokens ── */
.lv2-section { background:#fff; font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color:#15131a; padding:clamp(58px,11vh,112px) 0 0; }
.lv2-container    { width:min(1072px,calc(100% - 77px)); margin:0 auto; }
.lv2-container-xl { width:min(1200px,calc(100% - 96px)); }
.lv2-container-md { width:min(992px,calc(100% - 64px)); }
.lv2-container-sm { width:min(960px,calc(100% - 64px)); }
.lv2-h2 { font-size:clamp(32px,4.4vw,54px); font-weight:800; letter-spacing:-0.03em; line-height:0.98; color:#0d0a16; margin:0; text-wrap:balance; }
.lv2-lead { font-size:15px; line-height:1.55; color:rgba(0,0,0,0.6); margin:0; text-wrap:pretty; }
.lv2-eyebrow { font-size:11px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:#6b6875; margin-bottom:14px; }
.lv2-btn-dark { display:inline-flex; align-items:center; justify-content:center; height:48px; padding:0 27px; border:0; border-radius:10px; background:#15131a; color:#fff; font-size:14px; font-weight:700; cursor:pointer; text-decoration:none; transition:background .15s; }
.lv2-btn-dark:hover { background:#000; }

/* ── S1 features ── */
.lv2-features-head { display:flex; justify-content:space-between; align-items:flex-end; gap:32px; margin-bottom:clamp(29px,4vw,45px); }
.lv2-features-head .lv2-lead { max-width:352px; }
.lv2-features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(13px,1.6vw,21px); }
.lv2-feature-card { position:relative; display:block; aspect-ratio:5/6; border-radius:22px; overflow:hidden; background:linear-gradient(155deg,#23222a 0%,#161519 55%,#0c0b0f 100%); box-shadow:0 19px 40px -18px rgba(0,0,0,0.55); text-decoration:none; }
.lv2-feature-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.92; }
.lv2-feature-card-top { position:absolute; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:19px 21px; color:#fff; font-size:17px; font-weight:700; background:linear-gradient(180deg,rgba(12,11,15,0.72),rgba(12,11,15,0)); z-index:1; }
.lv2-feature-card-top svg { flex:0 0 24px; }

/* ── S2 video ── */
.lv2-video { padding-top:clamp(58px,11vh,112px); }
.lv2-video-card { width:80%; max-width:880px; margin:0 auto; aspect-ratio:16/9; border-radius:26px; overflow:hidden; background:#0e0a18; box-shadow:0 22px 51px -14px rgba(31,13,68,0.28); }
.lv2-video-card img, .lv2-video-card video { width:100%; height:100%; object-fit:cover; display:block; }

/* ── S3 intro (tilted deck) ── */
.lv2-intro { padding-top:clamp(64px,12vh,128px); padding-bottom:clamp(48px,8vh,96px); }  /* room for the tilted deck corners */
.lv2-intro-grid { display:flex; align-items:center; gap:clamp(38px,7vw,96px); }
.lv2-intro-copy { flex:1; }
.lv2-intro-copy .lv2-h2 { font-size:clamp(30px,4vw,51px); font-weight:700; margin-bottom:18px; }
.lv2-intro-copy .lv2-lead { font-size:18px; color:rgba(0,0,0,0.55); }
.lv2-deck { position:relative; flex:0 0 clamp(400px,54%,592px); aspect-ratio:4/3; }
.lv2-deck-card { position:absolute; inset:0; border-radius:38px; overflow:hidden; border:1.5px solid #15131a; box-shadow:0 24px 48px -19px rgba(31,13,68,0.26); }
.lv2-deck-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .26s ease; }  /* images fill and tilt WITH the card */
.lv2-deck-nav { position:absolute; top:50%; transform:translateY(-50%); width:26px; height:58px; padding:0; border-radius:999px; border:1px solid rgba(21,19,26,0.12); background:rgba(255,255,255,0.85); backdrop-filter:blur(6px); color:#15131a; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:3; box-shadow:0 10px 22px -12px rgba(31,13,68,0.4); transition:background .15s; }
.lv2-deck-nav:hover { background:#fff; }
.lv2-deck-prev { left:-13px; }
.lv2-deck-next { right:-13px; }
.lv2-deck-3 { transform:rotate(7deg);   background:#EDE7F4; }
.lv2-deck-2 { transform:rotate(2.5deg); background:#fff; }
.lv2-deck-1 { transform:rotate(-3.5deg); background:#f1eff6; }

/* ── S4 phone scroll ── */
.lv2-phone-section { position:relative; height:300vh; background:#fff; }
.lv2-phone-sticky { position:sticky; top:0; height:100vh; display:flex; align-items:center; overflow:hidden; }
.lv2-phone-stage { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(32px,6vw,88px); width:min(992px,calc(100% - 64px)); margin:0 auto; }
.lv2-phone { width:269px; height:549px; margin:0 auto; transform-origin:center; }
.lv2-phone-frame { width:100%; height:100%; border-radius:51px; padding:4px; background:linear-gradient(135deg,#9fa3a8,#54585e); box-shadow:0 32px 64px -24px rgba(0,0,0,0.45); }
.lv2-phone-bezel { width:100%; height:100%; border-radius:48px; padding:6px; background:#080810; }
.lv2-phone-screenwin { width:100%; height:100%; border-radius:42px; overflow:hidden; background:#0e0a18; }
.lv2-phone-screens { display:flex; flex-direction:column; transition:transform 0.85s cubic-bezier(0.65,0,0.18,1); }
.lv2-phone-screens img { width:100%; height:528px; object-fit:cover; display:block; }
.lv2-phone-right { display:flex; gap:22px; align-items:center; }
.lv2-phone-rail { display:flex; flex-direction:column; gap:8px; }
.lv2-phone-rail span { width:4px; height:18px; border-radius:2px; background:#e3e0ec; transition:background .3s; }
.lv2-phone-rail span.is-on { background:#15131a; }
.lv2-phone-panelcol { flex:1; display:flex; flex-direction:column; justify-content:center; }
.lv2-phone-panels { position:relative; min-height:208px; }
.lv2-phone-more { display:flex; align-items:center; gap:12px; margin-top:18px; opacity:0; pointer-events:none; transition:opacity .4s ease; }
.lv2-phone-more.is-visible { opacity:1; pointer-events:auto; }
.lv2-phone-more button { display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 18px; border:0; border-radius:10px; background:#15131a; color:#fff; font-size:14px; font-weight:700; font-family:inherit; cursor:pointer; transition:background .15s; }
.lv2-phone-more button:hover { background:#000; }
.lv2-phone-counter { font-size:13px; font-weight:600; color:#9a97a3; font-variant-numeric:tabular-nums; }
.lv2-phone-panel { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; opacity:0; transform:translateY(22px); transition:opacity .55s ease,transform .55s ease; pointer-events:none; }
.lv2-phone-panel.is-active { opacity:1; transform:translateY(0); pointer-events:auto; }
.lv2-phone-panel.is-past { transform:translateY(-22px); }
.lv2-step-num { font-size:11px; font-weight:700; letter-spacing:0.14em; color:#9a97a1; margin-bottom:11px; }
.lv2-phone-panel h3 { font-size:clamp(24px,3vw,35px); font-weight:800; letter-spacing:-0.02em; margin:0 0 13px; color:#0d0a16; }
.lv2-phone-panel p { font-size:16px; line-height:1.55; color:#3a3742; margin:0; }

/* ── S5 banner ── */
.lv2-banner-card { aspect-ratio:3.75/1; border-radius:29px; overflow:hidden; background:#E7E4DB; }
.lv2-banner-card img { width:100%; height:100%; object-fit:cover; display:block; }

/* ── S6 preise ── */
.lv2-preise-grid { display:grid; grid-template-columns:1fr 1.25fr; align-items:center; gap:clamp(32px,5vw,72px); }
.lv2-preise-copy .lv2-h2 { font-size:clamp(35px,4.6vw,61px); margin-bottom:18px; }
.lv2-preise-copy .lv2-lead { font-size:15px; color:#3a3742; margin-bottom:24px; }
.lv2-price-cards { display:grid; grid-template-columns:1fr 1fr; gap:clamp(13px,1.6vw,21px); }
.lv2-price-card { border:1.5px solid #15131a; border-radius:18px; padding:27px 24px; background:#fff; display:flex; flex-direction:column; gap:6px; }
.lv2-price-card.lv2-price-glow { border-radius:19px; box-shadow:0 14px 35px -16px rgba(110,139,255,0.5); }
.lv2-price-name { font-size:14px; font-weight:700; }
.lv2-price-fig { font-size:clamp(38px,4.6vw,61px); font-weight:800; letter-spacing:-0.03em; line-height:1; }
.lv2-price-sub { font-size:13px; color:#56535e; }
.lv2-price-foot { font-size:14px; font-weight:700; margin-top:auto; padding-top:14px; }

/* ── S7 steps ── */
.lv2-steps-head { text-align:center; margin-bottom:clamp(38px,6vw,67px); }
.lv2-step-row { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(32px,5vw,72px); margin-bottom:clamp(45px,7vw,77px); }
.lv2-step-row:last-child { margin-bottom:0; }
.lv2-step-row.lv2-step-flip .lv2-step-media { order:-1; }
.lv2-step-media { aspect-ratio:4/3; border-radius:19px; overflow:hidden; background:#f4f4f2; }
.lv2-step-media img { width:100%; height:100%; object-fit:cover; display:block; }
.lv2-step-eyebrow { font-size:10px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:#9a97a1; margin-bottom:10px; }
.lv2-step-copy h3 { font-size:clamp(22px,2.6vw,32px); font-weight:800; letter-spacing:-0.02em; margin:0 0 11px; }
.lv2-step-copy p { font-size:18px; line-height:1.5; color:#3a3742; margin:0; }

/* ── S8 hardware ── */
.lv2-hardware-card { background:#15131a; border-radius:22px; padding:clamp(32px,5vw,58px); display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:clamp(29px,4vw,51px); }
.lv2-hardware-card .lv2-eyebrow { color:rgba(255,255,255,0.55); }
.lv2-hardware-card h2 { font-size:clamp(27px,3.4vw,43px); font-weight:800; letter-spacing:-0.02em; color:#fff; margin:0 0 14px; }
.lv2-hardware-card p { font-size:15px; line-height:1.55; color:rgba(255,255,255,0.72); margin:0 0 22px; }
.lv2-btn-light { display:inline-flex; align-items:center; gap:10px; height:46px; padding:0 24px; border-radius:10px; background:#fff; color:#15131a; font-size:14px; font-weight:700; text-decoration:none; }
.lv2-hardware-media { aspect-ratio:4/3; border-radius:14px; overflow:hidden; background:#211d2b; }
.lv2-hardware-media img { width:100%; height:100%; object-fit:cover; display:block; }

/* ── S9 branchen grid ── */
.lv2-branchen { padding-left:clamp(13px,3vw,35px); padding-right:clamp(13px,3vw,35px); }
.lv2-branchen-head { text-align:center; margin-bottom:clamp(26px,4vw,42px); }
.lv2-branchen-readout { font-size:16px; font-weight:700; margin-top:11px; min-height:1.4em; color:#9b98a3; }
.lv2-branchen-readout.is-picked { color:#15131a; }
.lv2-branchen-grid { display:grid; grid-template-columns:repeat(10,1fr); gap:clamp(5px,0.8vw,10px); }
.lv2-tile { position:relative; aspect-ratio:1; border:0; padding:0; border-radius:10px; overflow:hidden; cursor:pointer; background:#f1efe9; transition:transform .18s,box-shadow .18s; }
.lv2-tile:hover { transform:translateY(-2px); }
.lv2-tile img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.lv2-tile-caption { position:absolute; inset:auto 0 0 0; padding:14px 6px 6px; font-size:9px; font-weight:700; color:#fff; background:linear-gradient(180deg,rgba(21,19,26,0),rgba(21,19,26,0.82)); opacity:0; transform:translateY(5px); transition:opacity .2s,transform .2s; }
.lv2-tile.is-selected { outline:3px solid #15131a; outline-offset:2px; box-shadow:0 11px 24px -10px rgba(21,19,26,0.4); }
.lv2-tile.is-selected .lv2-tile-caption { opacity:1; transform:translateY(0); }

/* ── S10 portal ── */
.lv2-portal-head { text-align:center; margin-bottom:clamp(32px,5vw,51px); }
.lv2-portal-head .lv2-lead { max-width:576px; margin:16px auto 0; }
.lv2-portal { overflow:hidden; }
.lv2-portal-card { position:relative; height:clamp(352px,58vh,496px); border-radius:16px 16px 0 0; border:1px solid #e6e3da; border-bottom:none; box-shadow:0 32px 72px -32px rgba(21,19,26,0.45); overflow:hidden; }
.lv2-portal-card img { width:100%; display:block; object-fit:cover; object-position:50% 0; }
.lv2-portal-fade { position:absolute; left:0; right:0; bottom:0; height:120px; background:linear-gradient(180deg,rgba(255,255,255,0),#ffffff 82%); }

/* ── S11 ratings ── */
.lv2-ratings-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(13px,1.6vw,21px); }
.lv2-rating-card { border:1px solid #ececec; border-radius:16px; padding:32px 19px; display:flex; flex-direction:column; align-items:center; gap:10px; color:inherit; text-decoration:none; }
a.lv2-rating-card { transition:border-color .15s, transform .15s; }
a.lv2-rating-card:hover { border-color:#c9bde6; transform:translateY(-2px); }
.lv2-rating-score { font-size:45px; font-weight:800; letter-spacing:-0.02em; }
.lv2-rating-stars { display:flex; gap:4px; color:#E1890B; }
.lv2-rating-label { font-size:13px; color:#6b6875; font-weight:600; }

/* ── S12 footer ── */
.lv2-footer { background:#fff; font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; padding:clamp(51px,8vh,88px) 0 32px; }
.lv2-footer-top { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1.3fr; gap:clamp(19px,3vw,38px); padding-bottom:38px; }
.lv2-footer-logo img { width:134px; display:block; }
.lv2-footer-col h4 { font-size:16px; font-weight:700; color:#15131a; margin:0 0 14px; }
.lv2-footer-col a { display:block; font-size:14px; color:#6b6875; text-decoration:none; margin-bottom:10px; }
.lv2-footer-col a:hover { color:#15131a; }
.lv2-footer-news p { font-size:13px; color:#6b6875; margin:0 0 13px; }
.lv2-footer-form { display:flex; align-items:center; border:1px solid #ececec; border-radius:999px; background:#f3f2f0; padding:4px 4px 4px 14px; }
.lv2-footer-form input { flex:1; min-width:0; border:0; background:transparent; font-size:12px; outline:none; font-family:inherit; }
.lv2-footer-form button { height:35px; padding:0 18px; border:0; border-radius:999px; background:#15131a; color:#fff; font-size:12px; font-weight:700; cursor:pointer; }
.lv2-footer-bottom { border-top:1px solid #ececec; padding-top:22px; font-size:12px; color:#9a97a1; }

/* ── lv2 responsive (not from design — artifact was desktop-only) ── */
@media (max-width:1080px) {
  .lv2-features-grid { grid-template-columns:1fr; }
  .lv2-feature-card { aspect-ratio:16/10; }
  .lv2-features-head { flex-direction:column; align-items:flex-start; }
  .lv2-intro-grid { flex-direction:column; }
  .lv2-deck { flex-basis:auto; width:100%; margin-bottom:28px; }  /* rotated cards need room below */
  .lv2-phone-stage { grid-template-columns:1fr; gap:19px; }
  .lv2-phone { display:none; }             /* phone showcase text-only on small screens */
  .lv2-phone-section { height:auto; }
  .lv2-phone-sticky { position:static; height:auto; padding:32px 0; }
  .lv2-phone-panels { min-height:0; }
  .lv2-phone-panel { position:static; opacity:1; transform:none; pointer-events:auto; margin-bottom:29px; }
  .lv2-phone-panel:nth-child(n+4) { display:none; }  /* mobile shows only the 3-step story */
  .lv2-phone-more { display:none; }
  .lv2-phone-rail { display:none; }
  .lv2-preise-grid, .lv2-step-row, .lv2-hardware-card { grid-template-columns:1fr; }
  .lv2-step-row.lv2-step-flip .lv2-step-media { order:0; }
  .lv2-branchen-grid { grid-template-columns:repeat(5,1fr); }
  .lv2-ratings-grid { grid-template-columns:1fr; }
  .lv2-footer-top { grid-template-columns:1fr 1fr; }
}
@media (max-width:560px) {
  .lv2-container, .lv2-container-xl, .lv2-container-md, .lv2-container-sm { width:calc(100% - 32px); }
  .lv2-branchen-grid { grid-template-columns:repeat(4,1fr); }
  .lv2-price-cards { grid-template-columns:1fr; }
  .lv2-footer-top { grid-template-columns:1fr; }
  .lv2-banner-card { aspect-ratio:2.2/1; border-radius:16px; }
}

/* 0.8x scale for inline SVG icons (HTML width/height attrs are design-size) */
.lv2-feature-card-top svg { width:24px; height:24px; }
.lv2-btn-light svg { width:14px; height:14px; }
.lv2-rating-card > svg { width:27px; height:27px; }
.lv2-rating-stars svg { width:14px; height:14px; }

/* App Store badge in lv2 footer */
.lv2-footer-logo .footer-appstore-label{margin-top:18px;font-size:13px;font-weight:600;color:#6b6880}
.lv2-footer-logo .footer-appstore{display:inline-block;margin-top:8px}
.lv2-footer-logo .footer-appstore img{display:block;height:40px;width:auto;border-radius:8px;transition:opacity .15s}
.lv2-footer-logo .footer-appstore:hover img{opacity:.85}