/* =========================================================
   LiloCall AI · Model-Seite (Call + Credits)
   Zwei Themes: .t-std (hell/blau, Referenz 1672x941)
                .t-fsk (dunkel/lila, Referenz 1536x1024)
   ========================================================= */
.t-std{
  --m-bg:linear-gradient(160deg,#0ab6ff 0%,#078cde 55%,#00a6f8 100%);
  --m-head:#fff; --m-sub:#fff;
  --m-acc:linear-gradient(180deg,#ffe95a 0%,#ffc11f 45%,#ff8a14 100%);
  --m-card:rgba(240,250,255,.82); --m-card-b:rgba(255,255,255,.9);
  --m-ink:#0b2559; --m-muted:#3a5687;
  --m-btn:linear-gradient(180deg,#ffa63a 0%,#ff8a1f 45%,#ff6a10 100%);
  --m-btn-ring:rgba(255,214,120,.55); --m-btn-sh:rgba(255,100,0,.7);
  --m-round:#eaf4ff; --m-round-ink:#0b2559;
  --m-hang:radial-gradient(circle at 40% 30%,#ffa53b,#ff6a10 70%);
  --m-name:linear-gradient(180deg,#2d8cff,#0d4fc8);
  --m-pop:#ff9a1f;
}
.t-fsk{
  --m-bg:radial-gradient(60% 50% at 50% 20%,#3a1670 0%,transparent 70%),linear-gradient(180deg,#1b0838 0%,#120528 100%);
  --m-head:#fff; --m-sub:#e8dcff;
  --m-acc:linear-gradient(180deg,#ffd2ff 0%,#f08bff 40%,#d65cff 75%,#c04cf5 100%);
  --m-card:rgba(40,16,80,.55); --m-card-b:rgba(200,130,255,.55);
  --m-ink:#fff; --m-muted:#d9c9f5;
  --m-btn:linear-gradient(180deg,#f07dff 0%,#cf45f5 50%,#a72fe6 100%);
  --m-btn-ring:rgba(240,150,255,.5); --m-btn-sh:rgba(200,60,255,.75);
  --m-round:rgba(255,255,255,.08); --m-round-ink:#fff;
  --m-hang:radial-gradient(circle at 40% 30%,#ff8bff,#d23cf0 70%);
  --m-name:linear-gradient(180deg,#f0a8ff,#c050ff);
  --m-pop:#d65cff;
}
body.model{background:#120528}
body.t-std.model{background:#078cde}

.ms{position:relative;overflow:hidden;min-height:min(56.3vw,1080px);background:var(--m-bg);display:flex;flex-direction:column;align-items:center;padding:0 4vw 2.2vw}
.t-fsk .ms{min-height:min(66.7vw,1150px)}
.ms__bg{position:absolute;inset:0;background-size:cover;background-position:center top;z-index:0}
.ms>*:not(.ms__bg){position:relative;z-index:2}
.ms__spacer{height:clamp(132.94px,14.23vw,258.06px)}
.t-fsk .ms__spacer{height:clamp(140.76px,15.64vw,265.88px)}

.mh{font-family:'Outfit';font-weight:800;color:var(--m-head);letter-spacing:-.025em;line-height:1.05;font-size:clamp(26.59px,3.2vw,54.74px);text-align:center;text-shadow:0 4px 24px rgba(0,0,0,.18)}
.mh .acc{background:var(--m-acc);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 3px 10px rgba(255,120,0,.2))}
.t-fsk .mh .acc{filter:drop-shadow(0 0 16px rgba(220,90,255,.55))}
.msub{margin-top:8px;color:var(--m-sub);text-align:center;font-size:clamp(13px,1.02vw,17.2px);font-weight:500}
.msub b{font-weight:800}
.mtrust{display:flex;gap:18px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:12px;color:var(--m-sub);font-size:clamp(13px,0.98vw,16.42px)}
.mtrust li{display:flex;align-items:center;gap:10px}
.mtrust li+li::before{content:"·";margin-right:8px}
.mtrust svg{width:1.3em;height:1.3em}
.t-std .mtrust svg{color:#fff}
.t-std .mtrust li:nth-child(2) svg{color:#ffc11f}
.t-std .mtrust li:nth-child(3) svg{color:#ff8a14}
.t-fsk .mtrust svg{color:#e3a0ff}

.mglass{border-radius:28px;background:var(--m-card);border:2px solid var(--m-card-b);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);box-shadow:0 30px 70px -30px rgba(0,30,90,.55),0 0 40px rgba(255,255,255,.25)}
.t-fsk .mglass{box-shadow:0 30px 70px -30px rgba(0,0,0,.7),0 0 40px rgba(190,90,255,.35),inset 0 1px 0 rgba(255,255,255,.12)}

.mbtn{display:inline-flex;align-items:center;justify-content:center;gap:12px;border:0;cursor:pointer;border-radius:999px;background:var(--m-btn);color:#fff;font-family:'Outfit';font-weight:700;white-space:nowrap;box-shadow:inset 0 2px 0 rgba(255,255,255,.45),0 0 0 3px var(--m-btn-ring),0 16px 36px -12px var(--m-btn-sh);transition:filter .25s;position:relative;overflow:hidden;isolation:isolate}
.mbtn::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);transform:translateX(-130%);animation:shine 5s var(--ease) infinite}
.mbtn:hover{filter:brightness(1.07)}
.mbtn svg{width:1em;height:1em}

/* ---------- Call ---------- */
.call{width:min(41vw,690px);margin-top:clamp(10.95px,1.25vw,20.33px);padding:clamp(7.82px,0.78vw,14.08px) clamp(18.77px,2.35vw,39.1px) clamp(14.08px,1.41vw,23.46px);display:flex;flex-direction:column;align-items:center;border-radius:clamp(23.46px,2.35vw,40.66px)}
.call__av{position:relative;width:clamp(93.84px,7.82vw,132.94px);aspect-ratio:1;margin-top:calc(-1 * clamp(3.13px,0.47vw,7.82px))}
.call__av img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:4px solid rgba(255,255,255,.9);box-shadow:0 0 0 5px rgba(140,200,255,.45),0 0 30px rgba(170,220,255,.8)}
.t-fsk .call__av img{border-color:rgba(230,180,255,.85);box-shadow:0 0 0 5px rgba(200,100,255,.35),0 0 34px rgba(210,90,255,.8)}
.call__av::after{content:"";position:absolute;inset:-12px;border-radius:50%;border:2px solid rgba(255,255,255,.55);animation:ring 2.4s ease-out infinite}
@keyframes ring{0%{transform:scale(.92);opacity:1}100%{transform:scale(1.28);opacity:0}}
.live2{position:absolute;left:50%;bottom:-6%;translate:-50% 0;display:flex;align-items:center;gap:6px;padding:4px 14px;border-radius:999px;background:#159947;color:#fff;font-weight:800;font-size:clamp(13px,0.78vw,13.29px);box-shadow:0 6px 14px -6px rgba(0,0,0,.5)}
.live2 i{width:9px;height:9px;border-radius:50%;background:#5bff9a;animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.35}}
.call__t{margin-top:12px;font-family:'Outfit';font-weight:700;color:var(--m-ink);font-size:clamp(13.29px,1.05vw,17.99px);font-variant-numeric:tabular-nums}
.call .wave{height:clamp(42.23px,3.44vw,57.87px);margin:8px 0 6px;gap:3px;justify-content:center;width:100%}
.call .wave i{width:clamp(2.35px,0.25vw,4.69px)}
.call__btns{display:grid;grid-template-columns:repeat(4,1fr);align-items:end;width:100%;gap:10px}
.cb{display:flex;flex-direction:column;align-items:center;gap:8px;border:0;background:none;cursor:pointer;color:var(--m-ink);font-size:clamp(13px,0.82vw,13.29px);font-weight:600}
.cb span{display:grid;place-items:center;width:clamp(43.79px,4.22vw,70.38px);aspect-ratio:1;border-radius:50%;background:var(--m-round);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 10px 20px -12px rgba(0,30,90,.5);transition:transform .25s var(--ease),background .25s}
.t-fsk .cb span{border:1px solid rgba(255,255,255,.12)}
.cb span svg{width:42%;height:42%;color:var(--m-round-ink)}
.cb:hover span{transform:translateY(-3px)}
.cb.on span{background:#1676f3}.cb.on span svg{color:#fff}
.t-fsk .cb.on span{background:#a72fe6}
.cb--hang span{width:clamp(62.56px,5.01vw,84.46px);background:var(--m-hang);box-shadow:0 0 0 6px rgba(255,255,255,.18),0 16px 30px -10px var(--m-btn-sh)}
.cb--hang span svg{width:52%;height:52%;color:#fff}
.cb--hang{align-self:center}

.credits{display:flex;align-items:center;gap:clamp(10.95px,1.1vw,18.77px);margin-top:clamp(10.95px,1.1vw,18.77px);padding:clamp(7.82px,0.71vw,10.95px) clamp(9.38px,0.86vw,14.08px) clamp(7.82px,0.71vw,10.95px) clamp(14.08px,1.25vw,21.9px);border-radius:24px}
.credits__ic{width:clamp(35.97px,2.81vw,48.48px);height:clamp(35.97px,2.81vw,48.48px)}
.credits__ic img{width:100%;height:100%;object-fit:contain}
.credits small{display:block;color:var(--m-muted);font-size:clamp(13px,0.82vw,13.29px)}
.credits b{font-family:'Outfit';font-weight:700;color:var(--m-ink);font-size:clamp(15.64px,1.29vw,21.9px)}
.credits__div{width:1px;height:44px;background:rgba(120,140,180,.35);margin:0 clamp(14.08px,3.13vw,54.74px) 0 clamp(6.26px,0.47vw,7.82px)}
.t-fsk .credits__div{background:rgba(255,255,255,.2)}
.credits .mbtn{height:clamp(39.1px,2.98vw,50.05px);padding:0 clamp(15.64px,1.56vw,26.59px);font-size:clamp(13px,1.02vw,17.2px)}

/* ---------- Packs ---------- */
.ms--credits .ms__spacer{height:clamp(117.3px,12.51vw,226.78px)}
.t-fsk .ms--credits .ms__spacer{height:clamp(132.94px,13.69vw,234.6px)}
.packs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(7.82px,0.71vw,12.51px);width:min(55vw,920px);margin-top:clamp(12.51px,1.41vw,23.46px)}
.pack{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(10.95px,1.1vw,18.77px) 12px clamp(10.95px,1.02vw,17.2px);border-radius:28px;cursor:pointer;transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.pack:hover{transform:translateY(-6px)}
.pack.sel{border-color:var(--m-pop);box-shadow:0 0 0 3px var(--m-pop),0 0 50px color-mix(in srgb,var(--m-pop) 55%,transparent),0 30px 70px -30px rgba(0,30,90,.55)}
.t-std .pack.sel{background:rgba(255,248,236,.92)}
.pack__badge{position:absolute;top:0;left:50%;translate:-50% -55%;display:flex;align-items:center;gap:8px;padding:6px 22px;border-radius:999px;background:linear-gradient(180deg,#ffa63a,#ff7a12);color:#fff;font-family:'Outfit';font-weight:700;font-size:clamp(13px,0.94vw,15.64px);box-shadow:0 8px 18px -8px rgba(255,100,0,.8);opacity:0;transition:opacity .3s}
.t-fsk .pack__badge{background:rgba(60,20,110,.9);border:2px solid #d65cff;box-shadow:0 0 18px rgba(214,92,255,.6)}
.pack.sel .pack__badge{opacity:1}
.pack__badge svg{width:1.1em;height:1.1em}
.pack img{width:clamp(70.38px,5.94vw,101.66px);height:auto;filter:drop-shadow(0 10px 14px rgba(0,0,0,.18));transition:transform .5s var(--ease)}
.pack:hover img{transform:translateY(-4px) rotate(-3deg)}
.pack b{font-family:'Outfit';font-weight:800;color:var(--m-ink);font-size:clamp(25.02px,2.27vw,39.1px);line-height:1;margin-top:6px}
.t-std .pack b{color:#0d2b6b}
.pack strong{font-family:'Outfit';font-weight:800;font-size:clamp(14.08px,1.22vw,20.33px);background:var(--m-name);-webkit-background-clip:text;background-clip:text;color:transparent;margin-top:4px}
.pack p{color:var(--m-muted);font-size:clamp(13px,0.82vw,13.29px);line-height:1.2;min-height:2.4em;margin-top:2px}
.incl{display:inline-flex;align-items:center;gap:10px;margin-top:10px;padding:6px 18px 6px 6px;border-radius:999px;background:rgba(255,255,255,.85);font-weight:700;color:var(--m-ink);font-size:clamp(13px,0.78vw,12.51px)}
.t-std .incl{color:#0b2559}
.t-fsk .incl{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15)}
.coin{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe36b,#ff9f1a);color:#fff}
.t-fsk .coin{background:radial-gradient(circle at 35% 30%,#f2a4ff,#b23cf0)}
.coin svg{width:60%;height:60%}

.pay{display:flex;align-items:center;gap:clamp(9.38px,1.1vw,18.77px);width:min(55vw,920px);margin-top:clamp(10.95px,1.17vw,18.77px);padding:clamp(7.82px,0.78vw,12.51px) clamp(7.82px,0.78vw,12.51px) clamp(7.82px,0.78vw,12.51px) clamp(12.51px,1.25vw,20.33px);border-radius:28px}
.pay__card{display:grid;place-items:center;width:clamp(39.1px,3.05vw,51.61px);height:clamp(39.1px,3.05vw,51.61px);border-radius:14px;background:#fff;color:#2e7ae0;box-shadow:0 6px 14px -8px rgba(0,30,90,.4)}
.t-fsk .pay__card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);color:#fff}
.pay__card svg{width:58%;height:58%}
.pay__sel{border:0;background:none;text-align:left;color:var(--m-ink);cursor:pointer;font:inherit}
.pay__sel b{display:flex;align-items:center;gap:30px;font-size:clamp(13px,0.9vw,14.86px);font-weight:700}
.pay__sel b svg{width:16px;height:16px}
.pay__sel span{font-size:clamp(13px,0.82vw,14.08px);letter-spacing:.06em}
.pay__logos{display:flex;align-items:center;gap:14px;padding-left:clamp(7.82px,1.1vw,18.77px);border-left:1px solid rgba(120,140,180,.3)}
.pay__logos svg{width:clamp(31.28px,2.03vw,35.97px);height:auto}
.visa{font-family:'Outfit';font-weight:900;font-style:italic;font-size:clamp(17.2px,1.41vw,23.46px);letter-spacing:-.02em;color:#1a1f71}
.t-fsk .visa{color:#fff}
.pay__div{width:1px;align-self:stretch;margin:8px 0;background:rgba(120,140,180,.3)}
.pay .mbtn{margin-left:auto;height:clamp(43.79px,3.37vw,56.3px);padding:0 clamp(20.33px,2.35vw,40.66px);font-size:clamp(14.08px,1.25vw,21.11px);flex:1;max-width:440px}

.balance{display:flex;align-items:center;gap:12px;margin-top:clamp(9.38px,1.02vw,17.2px);padding:8px 26px 8px 8px;border-radius:999px;color:var(--m-ink);font-size:clamp(13px,0.9vw,14.86px)}
.balance .coin{width:clamp(26.59px,1.88vw,32.84px);height:clamp(26.59px,1.88vw,32.84px)}
.balance b{font-family:'Outfit';font-weight:800}
.t-std .balance b{color:#0d4fc8}

.m-switch{position:fixed;right:16px;bottom:16px;z-index:50;display:flex;gap:6px;padding:6px;border-radius:999px;background:rgba(0,0,0,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.m-switch a{padding:8px 16px;border-radius:999px;color:#fff;font-weight:700;font-size:13px}
.m-switch a.on{background:#fff;color:#111}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .ms,.t-fsk .ms{min-height:0;padding:0 16px 48px}
  .ms__bg{background-size:auto 520px;background-repeat:no-repeat}
  .ms__spacer,.t-fsk .ms__spacer,.ms--credits .ms__spacer,.t-fsk .ms--credits .ms__spacer{height:200px}
  .call,.packs,.pay{width:100%}
  .call{padding:14px 16px 20px}
  .call__btns{gap:6px}
  .credits{flex-wrap:wrap;justify-content:center;width:100%}
  .credits__div{display:none}
  .credits .mbtn{width:100%}
  .packs{grid-template-columns:1fr;gap:26px}
  .pay{flex-wrap:wrap}
  .pay .mbtn{flex-basis:100%;max-width:none}
  .pay__div{display:none}
}
/* --- fixes --- */
.ms__bg{background-size:100% auto;background-repeat:no-repeat;background-color:transparent}
.t-std .ms{background:#069bee}
.cb span{--s:clamp(40.66px,3.6vw,61px);width:var(--s);height:var(--s);aspect-ratio:auto}
.cb--hang span{--s:clamp(59.43px,4.84vw,81.33px)}
.call__av{width:clamp(86.02px,6.88vw,117.3px)}
.call .wave{height:clamp(35.97px,2.81vw,48.48px);margin:4px 0}
.call__t{margin-top:10px}
@media (max-width:900px){.ms__bg{background-size:auto 520px;background-position:center top}}

/* weiche Übergänge zwischen den Screens + Lesbarkeit */
.ms__bg{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 86%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 86%,transparent 100%)}
.ms--credits .ms__bg{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 88%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 88%,transparent 100%)}
.msub,.mtrust{text-shadow:0 2px 10px rgba(0,40,110,.45)}
.t-fsk .msub,.t-fsk .mtrust{text-shadow:0 2px 12px rgba(0,0,0,.6)}
.t-fsk .ms{background:#160630}
.ms,.t-fsk .ms{min-height:0;padding-bottom:clamp(34px,3.06vw,59.5px)}
.t-fsk .mh .acc{filter:drop-shadow(0 0 1.5px rgba(255,255,255,.7)) drop-shadow(0 0 16px rgba(220,90,255,.65))}
.t-std .mh .acc{filter:drop-shadow(0 0 1.5px rgba(255,255,255,.6)) drop-shadow(0 3px 10px rgba(255,120,0,.3))}
/* Bild bleibt gleich groß: Abstand zum Kopf der Frau wiederherstellen */
@media (min-width:901px){
  .ms__spacer{height:19.5vw}
  .t-fsk .ms__spacer{height:21vw}
  .ms--credits .ms__spacer{height:17.5vw}
  .t-fsk .ms--credits .ms__spacer{height:19vw}
}