/* Lilo-Banner (Variante B) – gleiches Layout wie webme-Banner, Lilo-Branding.
   Responsive-Huellkurve an die festen iFrame-Hoehen des Homepage-Baukastens angepasst:
   >=940 -> 740px | 785-939 -> 820px | 480-784 -> 390px | <=480 -> 620px
   Trust-Badges nur >=785px (wie webme). */
:root{
  --purple:#7C3AED; --purple-d:#6D28D9; --purple-l:#A78BFA;
  --ink:#1A1523; --muted:#5B5670; --line:#ECE7FA;
  --bg1:#FCFBFF; --bg2:#F1EBFF;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1100px 520px at 78% 8%, rgba(124,58,237,.10), transparent 60%),
    radial-gradient(760px 520px at 12% 100%, rgba(167,139,250,.14), transparent 60%),
    linear-gradient(180deg,var(--bg1) 0%,var(--bg2) 100%);
  -webkit-font-smoothing:antialiased;
}
.banner{max-width:1180px;margin:0 auto;padding:36px 40px 42px}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:30px}
.brand img{height:36px;width:auto;display:block}

.hero{display:grid;grid-template-columns:minmax(0,46%) minmax(0,54%);gap:46px;align-items:center;min-height:432px}
.pill{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);
  color:var(--purple-d);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:7px 13px;border-radius:999px;margin-bottom:20px;box-shadow:0 2px 10px rgba(124,58,237,.06)}
.pill svg{width:14px;height:14px}
h1{font-family:'Plus Jakarta Sans','Inter',sans-serif;font-weight:800;
  font-size:46px;line-height:1.09;letter-spacing:-.02em;margin:0 0 20px}
h1 .accent{color:var(--purple)}
.sub{font-size:18px;line-height:1.5;color:var(--muted);margin:0 0 28px;max-width:30em}
.cta{display:inline-flex;align-items:center;gap:9px;background:var(--purple);color:#fff;
  font-weight:700;font-size:17px;text-decoration:none;padding:15px 32px;border-radius:999px;
  box-shadow:0 10px 24px rgba(124,58,237,.30);transition:transform .15s ease,box-shadow .15s ease}
.cta:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(124,58,237,.38)}
.cta svg{width:18px;height:18px}

/* Mockup (Browser-Frame + Phone) */
.mock{position:relative;padding-bottom:8px}
.browser{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(76,29,149,.35),0 8px 20px rgba(76,29,149,.10)}
.browser .bar{display:flex;align-items:center;gap:6px;padding:11px 14px;background:#FAF8FF;border-bottom:1px solid var(--line)}
.browser .bar i{width:10px;height:10px;border-radius:50%;background:#E3DCF6;display:inline-block}
.browser .bar .addr{margin-left:10px;height:16px;flex:1;background:#F0EBFB;border-radius:6px;max-width:60%}
.shots{position:relative;aspect-ratio:1400/681}
.shots img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
.shots img.on{opacity:1}
.phone{position:absolute;right:-6px;bottom:-14px;width:23%;min-width:112px;aspect-ratio:200/410;
  background:#fff;border:5px solid #1A1523;border-radius:22px;overflow:hidden;
  box-shadow:0 22px 40px -12px rgba(26,21,35,.5)}
.phone img{width:100%;height:100%;object-fit:cover;object-position:top center}
.dots{display:flex;gap:7px;justify-content:flex-start;margin-top:22px}
.dots b{width:8px;height:8px;border-radius:50%;background:#D9CEF6;transition:background .3s,width .3s}
.dots b.on{background:var(--purple);width:22px;border-radius:5px}

/* Trust-Badges (nur >=785px sichtbar) */
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:46px}
.badge{display:flex;align-items:center;gap:14px}
.badge .ic{flex:none;width:52px;height:52px;border-radius:14px;background:#fff;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(124,58,237,.08)}
.badge b{display:block;font-size:16px;font-weight:700;line-height:1.25}
.badge span{font-size:14px;color:var(--muted)}

/* ---- 785-939px: iFrame 820px. Headline+Mockup oben, dann Subtitle/CTA, Badges unten ---- */
@media (min-width:785px) and (max-width:939px){
  .hero{grid-template-columns:1fr;min-height:0;gap:30px;align-items:start}
  .hero .copy{order:1;display:grid;grid-template-columns:1fr auto;grid-template-areas:"pill mock" "h1 mock" "sub mock" "cta mock";column-gap:34px;align-items:start}
  .pill{grid-area:pill}h1{grid-area:h1;font-size:42px}.sub{grid-area:sub}.cta{grid-area:cta;justify-self:start}
  .mock{grid-area:mock;align-self:center;width:100%}
  .hero .mock{order:0}
  .trust{margin-top:36px}
}

/* ---- 480-784px: iFrame 390px. 2-Spalten kompakt, KEINE Badges, kein Logo/Phone ---- */
@media (min-width:480px) and (max-width:784px){
  .banner{padding:22px 26px 24px}
  .brand{display:none}
  .hero{grid-template-columns:minmax(0,52%) minmax(0,48%);gap:24px;min-height:0;align-items:center}
  .pill{margin-bottom:12px;padding:5px 11px;font-size:11px}
  h1{font-size:27px;margin:0 0 12px;line-height:1.1}
  .sub{font-size:14px;margin:0 0 16px;line-height:1.4}
  .cta{font-size:15px;padding:12px 22px}
  .phone,.dots{display:none}
  .trust{display:none}
}

/* ---- <=479px: iFrame 620px. Gestapelt zentriert, KEINE Badges ---- */
@media (max-width:479px){
  .banner{padding:24px 22px 26px;text-align:center}
  .brand{justify-content:center;margin-bottom:20px}
  .hero{grid-template-columns:1fr;gap:24px;min-height:0}
  .pill{margin-bottom:16px}
  h1{font-size:32px}
  .sub{font-size:16px;margin-left:auto;margin-right:auto}
  .cta{font-size:16px}
  .mock{max-width:420px;margin:0 auto}
  .phone{width:22%}
  .dots{justify-content:center}
  .trust{display:none}
}