/*
 * SignalOne — mobile.css (LIGHT VERSION)
 * ======================================
 * Helles Premium-Mobile-System
 * Vollständige CSS-Datei
 */

/* ─────────────────────────────────────
   GLOBAL MOBILE NAV
───────────────────────────────────── */
@media (max-width:1100px){

  nav.top,
  nav.fun,
  nav.p{

    padding:14px 20px !important;

    gap:10px;

    background:
      rgba(255,255,255,.92) !important;

    backdrop-filter:
      blur(18px) !important;

    border-bottom:
      1px solid rgba(20,16,12,.08) !important;
  }

  .logo img{
    height:34px !important;
  }

  .nav-links{
    display:none !important;
  }

  nav.top .btn-primary,
  nav.fun .btn-primary,
  nav.p .btn-primary{

    padding:9px 14px !important;

    font-size:13px !important;
  }
}

/* ─────────────────────────────────────
   MOBILE
───────────────────────────────────── */
@media (max-width:768px){

  nav.top,
  nav.fun,
  nav.p{

    padding:12px 16px !important;
  }

  .logo img{
    height:30px !important;
  }

  nav.top .nav-right .btn-primary,
  nav.top .nav-right .btn-ghost,
  nav.top .nav-right .signin,
  nav.fun .btn-primary,
  nav.p .nav-right .btn-primary,
  nav.p .nav-right .btn-ghost,
  .nav-center{

    display:none !important;
  }

  #mn-toggle{
    display:flex !important;
  }

  .wrap,
  .wrap-tight,
  .tight{

    padding:0 18px !important;
  }

  /* HERO */

  .hero,
  .fhero{

    padding:
      42px 0 56px !important;
  }

  .hero h1,
  .fhero h1{

    font-size:
      clamp(30px,9vw,46px) !important;

    line-height:
      1.05 !important;

    letter-spacing:
      -.04em !important;
  }

  .hero .sub,
  .fhero .sub{

    font-size:
      15px !important;

    margin-top:
      16px !important;

    line-height:
      1.7 !important;
  }

  /* BUTTONS */

  .btn-lg,
  .fcta,
  .pcta{

    width:100% !important;

    display:flex !important;

    justify-content:center !important;

    text-align:center !important;

    padding:14px 20px !important;

    font-size:14px !important;
  }

  /* TRUST */

  .trust-row,
  .ftrust-row{

    gap:8px 14px !important;

    font-size:10px !important;

    justify-content:center !important;

    flex-wrap:wrap !important;
  }

  /* GRID */

  .compare-inner,
  .steps-row,
  .stps,
  .t-cards,
  .price-inner,
  .phero-inner,
  .calc-inner,
  .pstps{

    grid-template-columns:
      1fr !important;

    gap:14px !important;
  }

  .price-box{

    padding:24px 18px !important;
  }

  /* LEGAL */

  main{

    grid-template-columns:
      1fr !important;

    padding:
      34px 18px 56px !important;

    gap:
      26px !important;
  }

  .toc{

    position:static !important;

    background:
      rgba(255,255,255,.84);

    border:
      1px solid rgba(20,16,12,.08);

    border-radius:
      14px;

    padding:
      16px;
  }

  .toc ul{

    display:grid !important;

    grid-template-columns:
      1fr 1fr !important;

    gap:4px !important;
  }

  .toc ul li a{

    font-size:
      12px !important;

    padding:
      7px 8px !important;

    border-radius:
      8px;
  }

  .page-header{

    padding:
      34px 18px 24px !important;
  }

  .page-header h1{

    font-size:
      clamp(28px,8vw,40px) !important;
  }

  .breadcrumb{

    padding:
      12px 18px !important;
  }

  .legal-table{

    display:block !important;

    overflow-x:auto !important;

    font-size:12px !important;
  }

  .legal-box{

    padding:
      14px 16px !important;
  }

  .address-block{

    width:100% !important;

    display:block !important;

    padding:
      14px 16px !important;

    font-size:
      12px !important;
  }

  /* FOOTER */

  .f-grid{

    grid-template-columns:
      1fr 1fr !important;

    gap:24px !important;
  }

  .f-bottom,
  .mf,
  .pf-foot,
  .f-inner{

    flex-direction:
      column !important;

    gap:
      12px !important;

    align-items:
      flex-start !important;
  }

  .footer-links,
  .pf-foot .links,
  .mf .links{

    flex-wrap:
      wrap !important;

    gap:
      12px !important;
  }

  /* FINAL */

  .ffinal{

    padding:
      56px 0 64px !important;
  }

  .ffinal h2{

    font-size:
      clamp(28px,9vw,44px) !important;

    line-height:
      1.08 !important;
  }
}

/* ─────────────────────────────────────
   VERY SMALL
───────────────────────────────────── */
@media (max-width:400px){

  .logo img{
    height:26px !important;
  }

  .hero h1,
  .fhero h1{

    font-size:
      27px !important;
  }

  .f-grid{

    grid-template-columns:
      1fr !important;
  }

  .toc ul{

    grid-template-columns:
      1fr !important;
  }
}