/* =========================================================
   LiloCall AI · Responsive (wird als LETZTE Datei geladen)
   ========================================================= */

/* ---------- Tablet (≤1180px) ---------- */
@media (max-width:1180px){
  .stats,.earn__cta,.feats,.ctrl,.acc,.vs__cols,.two__cards,.steps__row,.packs,.pay{max-width:none!important;width:100%!important}
  .demo__grid{grid-template-columns:1fr!important;gap:36px}
  .demo__p,.demo__info{max-width:none}
  .two__in{padding-left:4.6vw!important}
  .s{padding-top:64px!important;padding-bottom:64px!important}
  .hero{padding-top:0!important}
  /* Frau auf Tablet/Handy dezent als Hintergrund rechts */
  .scene .woman{opacity:.35!important;height:70%!important;right:-8%!important;left:auto!important;translate:0 0!important}
  .scene .vbubble{display:none}
}

/* ---------- Handy (≤760px) ---------- */
@media (max-width:760px){
  .wrap{padding:0 16px!important}
  .s{padding-top:48px!important;padding-bottom:48px!important}

  /* Typo */
  .h1{font-size:36px!important;line-height:1.04}
  .h2,.earn .h2,.bind__h,.steps__head .h2,.two__head .h2,.vs .h2,.sec .h2,.faq .h2,.demo .h2{font-size:32px!important;line-height:1.06}
  .lead,.earn__lead,.bind__lead,.hero__lead{font-size:16px!important}
  .eyebrow{font-size:12px!important;letter-spacing:.14em!important}

  /* Navigation */
  .nav{padding-top:14px}
  .nav .logo{font-size:24px!important}
  .nav__links{display:none}
  .nav__cta{margin-left:auto;width:auto!important;height:40px!important;padding:0 16px!important;font-size:13px!important}

  /* Buttons */
  .btn,.btn--md,.btn--sm{width:100%;min-width:0!important;height:56px!important;padding:0 18px!important;font-size:16px!important}
  .nav .nav__cta.btn{width:auto!important;height:40px!important;padding:0 14px!important;font-size:13px!important;flex:none}
  .nav .logo{font-size:22px!important}
  .cta-sub{font-size:13px}

  /* Hero */
  .hero__in{padding-top:24px}
  .trust{flex-direction:column;gap:8px}
  .trust li{width:100%;height:56px;font-size:14px}
  .hero__chip{display:none}

  /* Video */
  .vid__top{font-size:16px}
  .aud{border-radius:16px;padding:8px 12px;font-size:13px;width:auto}
  .aud li+li::before{margin:0 6px}
  .vid__stage{grid-template-columns:1fr!important}
  .vid__side{display:none}
  .player{border-radius:16px;border-width:3px}
  .player__play{width:72px}
  .player__bar{font-size:12px}

  /* Stats / Features / Control */
  .stats,.feats,.ctrl,.secbar,.vs__cols,.two__cards{grid-template-columns:1fr!important}
  .stat{padding:16px}
  .stat b{font-size:40px!important}
  .feat,.ctrl__c{padding:14px}
  .feat .ic,.ctrl__c .ic{width:48px!important;height:48px!important}
  .feat b,.ctrl__c b{font-size:16px!important}
  .feat p,.ctrl__c p{font-size:14px!important}

  /* 3 Schritte */
  .steps__row{grid-template-columns:1fr!important;gap:14px}
  .steps__chev{transform:rotate(90deg);justify-self:center}
  .step h3{font-size:22px!important}
  .step>p{font-size:14px!important}
  .share{flex-direction:column;align-items:stretch;min-height:0!important}
  .share__list{flex-direction:row;flex-wrap:wrap;gap:8px}
  .share__list li{transform:none!important;flex:1 1 45%;padding:8px 12px 8px 8px;font-size:13px}
  .phone{margin:16px auto 0;transform:none!important;width:210px;max-width:210px}
  .step3{min-height:430px!important}
  .msgs{width:84%!important}

  /* 2 Dinge */
  .two .scene{display:none}
  .two__head{margin-left:0!important}
  .num{width:56px!important;font-size:30px!important}
  .thing h3{font-size:26px!important}
  .thing header p{font-size:16px!important}
  .tones{grid-template-columns:repeat(2,1fr)!important}
  .minis{grid-template-columns:1fr!important}
  .linkvis{min-height:290px}
  .linkvis .phone{width:58%;left:0;transform:rotate(-6deg)!important}
  .linkpill{left:2%;font-size:13px;padding:10px 16px}

  /* Vergleich */
  .vs__col{padding:16px}
  .vs__col h3{font-size:22px!important}
  .vs__col li{gap:14px;padding:10px 12px;font-size:14px!important}
  .vs__col li br{display:none}
  .vs__col li i{width:40px!important;height:40px!important}

  /* Sicherheit */
  .dash{display:none}
  .secbar li{font-size:14px}

  /* FAQ */
  .acc__i summary{gap:12px;font-size:16px!important;padding:14px}
  .acc__a{padding:0 14px 14px!important}
  .acc__a p{font-size:14px!important}
  .qbubble{display:none}

  /* Formular */
  .form{padding:20px 16px!important;border-radius:22px}
  .form h3{font-size:26px!important}
  .radios{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px}
  .radios--2{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .radios label{min-width:0}
  .radios span{padding:0 10px;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .demo__pts li{font-size:14px}
  .demo__info{max-width:none}

  /* Fester CTA unten */
  .mcta{display:flex!important;left:12px;right:12px;width:auto!important;height:54px!important}
}

/* ---------- Model-Seiten: Gold statt Orange (Standard) ---------- */
.t-std{
  --m-btn:linear-gradient(180deg,#fbe08a 0%,#e9bb4c 50%,#c9922a 100%);
  --m-hang:linear-gradient(180deg,#fbe08a 0%,#e9bb4c 50%,#c9922a 100%);
  --m-pop:#e2a62a;
  --m-acc:linear-gradient(180deg,#fff3b0 0%,#ffd84d 45%,#ffb52e 100%)}
.mbtn{box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 0 1px rgba(255,236,170,.5)!important}
.mbtn::before{display:none!important}
.mbtn:hover{filter:brightness(1.05)}
.t-std .mbtn{color:#3a2400!important;text-shadow:0 1px 0 rgba(255,246,210,.6)}
.t-std .mbtn svg{color:#3a2400}
.t-std .cb--hang span svg{color:#3a2400}
.t-std .cb--hang span,.cb--hang span{box-shadow:inset 0 1px 0 rgba(255,255,255,.6)!important}
.t-std .pack__badge{background:linear-gradient(180deg,#fbe08a,#c9922a);color:#3a2400;box-shadow:none}
.t-std .pack.sel{box-shadow:0 0 0 3px #e2a62a,0 30px 70px -30px rgba(0,30,90,.55)!important;background:rgba(255,250,235,.94)!important}
.t-std .credits__ic img,.t-std .pack img{filter:none}
.mh .acc{filter:drop-shadow(0 1px 0 rgba(10,50,120,.3)) drop-shadow(0 2px 6px rgba(10,50,120,.2))!important}
.t-fsk .mbtn{box-shadow:inset 0 1px 0 rgba(255,255,255,.45)!important}
@media (max-width:760px){
  .mh{font-size:30px!important}
  .msub{font-size:14px!important}
  .mtrust{gap:8px;font-size:13px}
  .call__btns .cb{font-size:12px}
  .pay__logos{border-left:0;padding-left:0}
}

/* Logo: nur blauer Verlauf (Icon), Schrift einfarbig – kein Gold */
.logo .ai,.vs__col h3 .ai{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;color:inherit!important;filter:none!important}
.logo svg{filter:drop-shadow(0 0 0 #fff) drop-shadow(0 1px 2px rgba(0,30,90,.25))}
.nav .logo svg,.hero .logo svg{background:#fff;border-radius:12px;padding:3px}
.app__logo,.phone__logo,.dash__top .logo{color:#0b2559!important}
.app__logo span,.phone__logo span,.dash__top .logo span{color:#0b2559!important;background:none!important}
@media (max-width:760px){
  .demo__grid{display:flex!important;flex-direction:column}
  .demo__l{display:contents}
  .demo__foot{order:3;text-align:center;margin-top:8px}
  .form{order:2}
  .minis{grid-template-columns:repeat(3,1fr)!important}
  .minis .card{flex-direction:column;text-align:center;padding:12px 6px;font-size:12px}
}
.mh .acc{white-space:nowrap}



/* Akzent-Schrift: Gold-Verlauf mit mehr Tiefe unten (nur Text, nicht Buttons) */
.gold,.mh .acc,.step .gold,.thing .gold,.card .gold,.glass .gold,.vs__col .gold{
  background:linear-gradient(180deg,#fff0b0 0%,#ffd75a 45%,#f5b630 80%,#e39a1f 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}

/* Section 2: Deko links/rechts fix HINTER dem Video, ohne Animation */
@media (min-width:761px){
  .vid__stage{position:relative;display:block!important}
  .vid__stage .player{position:relative;z-index:2}
  .vid__side{display:block!important;position:absolute;top:8%;bottom:8%;width:min(22vw,320px);min-height:0;z-index:1;pointer-events:none}
  .vid__side--l{right:calc(50% + min(440px,40vw) - 90px)}
  .vid__side--r{left:calc(50% + min(440px,40vw) - 90px)}
  .vid__side .bigbars{bottom:auto;top:50%;translate:0 -50%;height:70%}
  .vid__side--l .bigbars{left:0}
  .vid__side--r .bigbars{right:0}
  .vid__side .bigbars i,.vid__chip{animation:none!important}
  .vid__chip{top:-6%;right:auto;left:40%;transform:none}
}
@media (min-width:761px){
  .vid__side--l .bigbars{left:auto!important;right:0!important}
  .vid__side--r .bigbars{right:auto!important;left:0!important}
  .vid__chip{top:2%!important;left:auto!important;right:auto!important;left:22%!important}
}

/* Hero: generiertes Studio-Hintergrundbild */
.hero .scene{background:
  linear-gradient(90deg,rgba(7,120,210,.45) 0%,rgba(7,120,210,.15) 45%,rgba(7,120,210,0) 65%),
  url(../img/hero-bg.webp?v=3) 30% center/cover no-repeat!important}
.hero .scene__bokeh,.hero .scene__shelf,.hero .scene__neon{display:none!important}
.hero .scene{background:
  linear-gradient(180deg,rgba(10,120,215,.55) 0%,rgba(10,120,215,0) 18%),
  linear-gradient(90deg,rgba(7,120,210,.5) 0%,rgba(7,120,210,.18) 45%,rgba(7,120,210,0) 65%),
  url(../img/hero-bg.webp?v=3) 30% center/cover no-repeat!important}
.hero__chip{background:rgba(10,90,180,.55)!important;border-color:rgba(255,255,255,.85)!important;backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important}

/* Section "KI bindet": Chat-App links neben die Frau, fix (keine Animation) */
@media (min-width:1181px){
  .bind .app{right:auto!important;left:56%!important;top:18%!important;animation:none!important;translate:none!important;transform:perspective(1200px) rotateY(8deg)!important;z-index:4}
}
.app__hero{overflow:hidden}.app__hero .wave{min-width:0;gap:2px}.app__hero .wave i{width:2px}


/* Logo oben: besser sichtbar ohne Balken */
.hero .nav .logo{color:#fff!important;text-shadow:0 2px 10px rgba(5,50,120,.45),0 1px 2px rgba(5,50,120,.4)}
.hero .nav .logo .ai{background:linear-gradient(180deg,#fff0b0 0%,#ffd75a 45%,#f5b630 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;text-shadow:none;filter:drop-shadow(0 2px 6px rgba(5,50,120,.45))!important}
.hero .nav .logo svg{background:#fff!important;border-radius:12px;padding:4px!important;box-shadow:0 6px 16px -6px rgba(5,50,120,.6)}
.nav__links a{text-shadow:0 1px 6px rgba(5,50,120,.45)}

/* Sprechblasen-Logo, Schrift größer */
.brand{display:inline-flex!important;align-items:center;gap:14px;text-decoration:none}
.hero .nav .brand svg.brand__mark{width:56px!important;height:56px!important;background:none!important;padding:0!important;border-radius:0!important;box-shadow:none!important;filter:drop-shadow(0 6px 12px rgba(5,50,120,.4))!important}
.brand__name{font-family:'Outfit';font-weight:800;font-size:clamp(32px,2.8vw,42px);letter-spacing:-.04em;color:#fff;text-shadow:0 2px 12px rgba(5,50,120,.4)}
.brand__ai{display:inline-grid;place-items:center;height:32px;padding:0 11px;margin-left:-2px;border-radius:9px;
  background:linear-gradient(180deg,#ffe9a0,#f5b630);color:#3a2600;font-family:'Outfit';font-weight:800;font-size:18px;letter-spacing:.04em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 4px 10px -4px rgba(5,50,120,.5)}
@media (max-width:760px){.hero .nav .brand svg.brand__mark{width:38px!important;height:38px!important}.brand__name{font-size:24px}.brand__ai{height:24px;font-size:13px;padding:0 7px}}

/* Section "Starte, bevor…": Text sauber einpassen */
.demo .h2{line-height:1.08!important;margin-bottom:6px}
.demo__p{max-width:min(36vw,540px)!important;margin-top:22px!important;font-size:clamp(15px,1.15vw,18px)!important;line-height:1.5!important;position:relative;z-index:3}
.demo__pts{margin-top:26px!important;max-width:min(36vw,540px)}
.demo__info{max-width:min(36vw,540px)!important}
.demo .woman{left:44%!important}
@media (max-width:1180px){.demo__p,.demo__pts,.demo__info{max-width:none!important}}
.hero__in{padding-top:clamp(48px,4.4vw,80px)!important}@media (max-width:760px){.hero__in{padding-top:36px!important}}
@media (min-width:1181px){.hero__chip{right:auto!important;left:55%!important;top:55%!important;animation:none!important;translate:none!important}}

/* Zielgruppen-Leiste: echte Trennpunkte */
.aud li::before,.aud li+li::before{content:none!important}
.aud{gap:0 clamp(10px,1.2vw,18px)!important;align-items:center}
.aud__dot{font-weight:800;color:#1676f3;opacity:.7}
.brand__ai{height:34px;padding:0 12px;font-size:19px;border-radius:9.5px}
@media (max-width:760px){.brand__ai{height:25px;font-size:13.5px;padding:0 7.5px}}
.brand__ai{height:37px;padding:0 13px;font-size:21px;border-radius:10.5px}
@media (max-width:760px){.brand__ai{height:27.5px;font-size:15px;padding:0 8px}}

/* Einheitliche Flucht links/rechts: alle Inhaltsblöcke auf die gleiche Seitenkante */
@media (min-width:1181px){
  .steps__row{max-width:none!important;margin-left:0!important;margin-right:0!important}
  .vs__cols{width:100%!important;max-width:none!important}
  .two__cards{max-width:none!important}
  .dash{right:4.6vw!important}
  .sec .secbar{padding-left:4.6vw!important;padding-right:4.6vw!important}
}

/* Sprach-Umschalter */
.lang{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:rgba(255,255,255,.18);border:1.5px solid rgba(255,255,255,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.lang a{min-width:38px;height:30px;display:grid;place-items:center;padding:0 10px;border-radius:999px;font-family:'Outfit';font-weight:700;font-size:13px;letter-spacing:.06em;color:#fff;text-decoration:none;transition:background .2s,color .2s}
.lang a.on{background:#fff;color:#0b4fc4}
.lang a:not(.on):hover{background:rgba(255,255,255,.2)}
.nav .lang{margin-left:6px}
.mnav .lang{margin-left:auto}
.t-fsk .lang a.on{color:#7a2bd0}
@media (max-width:760px){.nav .lang{margin-left:auto}.nav .lang+.nav__cta{margin-left:8px!important}.lang a{min-width:32px;height:26px;padding:0 8px;font-size:12px}}
/* Mobile Hero: Frau im Hintergrund kräftiger */
@media (max-width:760px){.hero .scene .woman{opacity:.62!important;height:72%!important;right:-12%!important}}
@media (max-width:760px){
  .hero__fade{display:block!important;background:linear-gradient(90deg,rgba(10,100,190,.55) 0%,rgba(10,100,190,.25) 60%,rgba(10,100,190,.05) 100%)!important}
  .hero .scene .woman{opacity:.85!important}
  .hero .h1,.hero__lead,.hero .eyebrow,.hero__small,.hero .cta-sub{text-shadow:0 2px 10px rgba(5,50,120,.45)}
}
/* Mobile Hero: Bild etwas höher, Beschreibung schmaler -> Gesicht rechts frei */
@media (max-width:760px){
  .hero .scene .woman{bottom:6%!important;right:-22%!important;height:66%!important}
  .hero__lead{max-width:58%;font-size:15px!important}
  .hero__small{max-width:100%}
}
/* Mobile: "Starte, bevor…" Block größer & kompakter */
@media (max-width:760px){
  .demo .h2{font-size:38px!important;line-height:1.05!important}
  .demo__p{font-size:17px!important;line-height:1.5!important;margin-top:14px!important}
  .demo__pts{margin-top:16px!important;gap:10px!important}
  .demo__pts li{font-size:16px!important;gap:14px!important;line-height:1.35}
  .demo__pts .ic--glass{width:42px!important;height:42px!important}
  .demo__info{margin-top:16px!important;padding:14px 16px!important;gap:14px!important}
  .demo__info b{font-size:15px!important}
  .demo__info span{font-size:14px!important}
}
@media (max-width:760px){
  .demo__grid{gap:0!important;align-items:stretch!important}
  .demo__grid>*,.demo__l>*{margin-left:0!important}
  .demo__l .pill,.demo__pill{align-self:flex-start;margin:0 0 12px!important}
  .demo .h2{text-align:left;margin:0!important}
  .demo__pts li br{display:none}
  .demo__info{margin-bottom:20px!important}
  .demo__foot{margin-top:18px!important}
}

/* Wistia-Video im Player-Rahmen (16:9) */
.player--wistia{aspect-ratio:16/9;background:#000}
.player--wistia wistia-player{display:block;width:100%;height:100%}