/* ══════════════════════════════════════════════════════════════════
   RadEx v25 — Mobile-Optimierung der Landing Page
   Basis: v24. Betrifft ausschliesslich die Website (#login);
   das Portal (.app) wird hier nur aus dem Weg geräumt.
   Wird als LETZTES Stylesheet geladen.

   Breakpoints
     ≤ 900px  Burger-Navigation (die Leiste mit 5 Links + rechter
              Gruppe braucht ~830px und lief vorher aus dem Bild)
     ≤ 760px  Handy-Layout
     ≤ 420px  kleine Handys
     ≤ 359px  sehr schmale Geräte
   ══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   BUGFIX 1 (alle Breiten): Das Portal blähte das Layout-Viewport auf.
   Das Dashboard ist ~955px breit. Da es im selben Dokument liegt,
   verbreiterte es auf dem Handy das Layout-Viewport auf 955px — und
   weil .login `position:fixed; inset:0` ist, wurde die ganze Landing
   in einer 955px-Box auf einem 375px-Screen gerendert: rechts
   abgeschnitten, und das vorhandene Mobile-CSS griff nie.
   Solange die Website sichtbar ist, ist das Portal jetzt raus.
   ───────────────────────────────────────────────────────────────── */
body.landing .app{display:none}
/* Und falls jemand ins Portal wechselt: es darf nie das Dokument
   verbreitern, sondern scrollt in sich selbst. */
.app{max-width:100vw;overflow-x:auto}

/* ─────────────────────────────────────────────────────────────────
   BUGFIX 2: Dekor-Elemente (Farbwolken, 100vw-breite Linien) ragen
   über den rechten Rand hinaus. `overflow-x:hidden` unterbindet zwar
   das Wischen, liess den Container aber per Fokus oder Skript
   trotzdem ~140px zur Seite rutschen — und von dort kam man nicht
   mehr zurück. Der Riegel dagegen steht in radex-v25-mobile.js;
   auf Handy und Tablet fällt die Ursache zusätzlich ganz weg
   (siehe .lp-blob weiter unten).
   `overflow-x:clip` hilft hier übrigens nicht: sobald die andere
   Achse scrollt, verhält sich `clip` laut Spec wie `hidden`.
   ───────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────
   BUGFIX 3 (alle Breiten): Sprungziele landeten unter der klebenden
   Navigationsleiste — die Überschrift der angesprungenen Sektion war
   halb verdeckt. scroll-margin-top hält die Leiste frei.
   ───────────────────────────────────────────────────────────────── */
#login>section[id],#login>footer[id],#login>div[id]{scroll-margin-top:88px}

/* ─────────────────────────────────────────────────────────────────
   Burger-Button — auf grossen Bildschirmen unsichtbar
   ───────────────────────────────────────────────────────────────── */
.lp-burger{display:none;position:relative;width:44px;height:44px;flex:none;
  border:1px solid var(--line-2);border-radius:12px;background:rgba(255,255,255,.62);
  cursor:pointer;padding:0;justify-self:end;-webkit-tap-highlight-color:transparent}
.lp-burger span{position:absolute;left:12px;width:20px;height:2px;border-radius:2px;
  background:var(--navy);transition:transform .26s cubic-bezier(.4,0,.2,1),opacity .18s ease}
.lp-burger span:nth-child(1){top:15px}
.lp-burger span:nth-child(2){top:21px}
.lp-burger span:nth-child(3){top:27px}
.lp-nav.nav-open .lp-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.lp-nav.nav-open .lp-burger span:nth-child(2){opacity:0}
.lp-nav.nav-open .lp-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.lp-nav-scrim{display:none}

/* ═════════════════════════════════════════════════════════════════
   ≤ 900px — Burger-Navigation
   Vorher standen Links und rechte Gruppe bis x≈863 nebeneinander und
   ragten auf Tablet und Handy aus dem Bild.
   ═════════════════════════════════════════════════════════════════ */
@media(max-width:900px){
  .lp-nav{grid-template-columns:minmax(0,1fr) auto auto;gap:12px;padding:12px 24px}
  .lp-burger{display:block}
  .nav-right{gap:10px}

  /* Links als Ausklapp-Panel unter der Leiste */
  .lp-nav .links{
    position:absolute;left:0;right:0;top:100%;
    display:block;margin:0;padding:6px 24px 18px;
    background:#fff;
    -webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%);
    border-bottom:1px solid var(--line);
    box-shadow:0 18px 34px rgba(16,30,70,.12);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .22s ease,transform .22s ease,visibility .22s;
  }
  .lp-nav.nav-open .links{opacity:1;visibility:visible;transform:none}
  .lp-nav .links a{
    display:block;padding:13px 4px;font-size:15px;font-weight:600;
    color:var(--navy);border-bottom:1px solid var(--line);
  }
  .lp-nav .links a:last-child{border-bottom:none}
  .lp-nav .links a::after{display:none}
  /* Ein offenes Menü darf beim Scrollen nicht mit der Leiste wegfahren */
  .lp-nav.nav-open.nav-hidden{transform:none}

  .lp-nav-scrim{display:block;position:fixed;inset:0;z-index:9;
    background:rgba(10,18,40,.34);opacity:0;visibility:hidden;
    transition:opacity .22s ease,visibility .22s}
  .lp-nav-scrim.show{opacity:1;visibility:visible}

  /* Die dekorativen Farbwolken ragen aus dem Bild (Ursache des
     seitlichen Verrutschens) und kosten beim Scrollen Rechenzeit —
     auf Tablet und Handy tragen sie ohnehin nichts bei. */
  .lp-blob{display:none}
}

/* ═════════════════════════════════════════════════════════════════
   ≤ 760px — Handy
   ═════════════════════════════════════════════════════════════════ */
@media(max-width:760px){

  #login>section[id],#login>footer[id],#login>div[id]{scroll-margin-top:60px}

  /* ── Seitenränder: 64px Innenabstand liessen auf einem 375px-Screen
        nur 247px Inhalt übrig. Nur links/rechts anfassen, damit die
        sektionseigenen Vertikalabstände erhalten bleiben. ── */
  .lp-sec{padding-left:20px;padding-right:20px}
  .lp-hero{padding-left:22px;padding-right:22px}
  .lp-hero-text{max-width:none}

  /* ── Navigation kompakter ── */
  .lp-nav{gap:10px;padding:12px 16px}
  .lp-nav .brand h1{font-size:15px!important;line-height:1.15}
  .lp-nav .brand h1 span{font-size:8.5px;letter-spacing:.7px}
  .lp-nav .links{padding:6px 16px 16px}
  .nav-right{gap:8px}
  .lp-nav .nav-pill{padding:10px 16px;font-size:12.5px;min-height:40px}
  /* Entwickler-Werkzeuge (Bild ersetzen / exportieren) sind auf dem
     Handy weder bedienbar noch gemeint — sie kosteten nur Platz. */
  .lp-nav .lp-editbtn{display:none!important}
  /* Sprachwahl bleibt im Footer erreichbar */
  .lp-nav .lang-sw.lang-nav{display:none}

  /* ── Hero: Der Inhalt lief unter die Leiste, weil die Stage um die
        Nav-Höhe hochgezogen wird und der Text auf 92vh zentriert war.
        Auf dem Handy ist er höher als der Screen → oben ausrichten. ── */
  .lp-stage-panels .lp-panel-hero{min-height:0;align-items:flex-start;padding-top:112px;padding-bottom:44px}
  .lp-panel-hero .lp-eyebrow{margin-bottom:14px}
  .lp-panel{min-height:0}
  .lp-panel-pro{padding-top:24px;padding-bottom:56px}

  /* ── Der dunkle Prospecta-Schleier ist als Querverlauf gebaut
        (links .90 → rechts .24), weil der Text auf dem Desktop in der
        linken Spalte steht. Auf dem Handy läuft er über die volle
        Breite und lag rechts fast blank auf dem hellen Videobild.
        Gleiche Optik, nur horizontal gleichmässiger. ── */
  .lp-wash-pro{
    background:
      linear-gradient(180deg,rgba(7,17,41,.45) 0%,rgba(7,17,41,.10) 24%,rgba(7,17,41,.10) 66%,rgba(7,17,41,.45) 100%),
      linear-gradient(90deg,rgba(7,17,41,.88) 0%,rgba(7,17,41,.76) 50%,rgba(7,17,41,.72) 100%);
  }

  /* ── Prozess-Karten: die feste Höhe schnitt 12px Inhalt ab ── */
  .v203-card{height:auto;min-height:430px}

  /* ── Footer: die vier Spalten blieben nebeneinander stehen und
        liefen weit aus dem Bild. ── */
  .lp-bigfoot-top{grid-template-columns:1fr 1fr;gap:26px 20px;padding-bottom:28px}
  .lp-bigfoot-top>div:first-child{grid-column:1 / -1}
  .lp-bigfoot-top>div:first-child p{max-width:none}
  .lp-bigfoot-divider{width:calc(100% - 40px)}
  .lp-bigfoot-bottom{gap:10px;padding:18px 0}
  .lp-bigfoot-bottom .right{margin-left:0;text-align:left;flex-wrap:wrap;gap:10px}
  .lp-bigfoot-legal{padding:18px 0 4px}

  /* ── Rady-Chat: sass auf dem Inhalt und war fast randlos ── */
  .chat-fab{right:16px;bottom:16px;width:50px;height:50px;font-size:22px}
  .chat-win{right:12px;left:12px;bottom:76px;width:auto;max-height:70vh}

  /* ── Touch-Ziele: alles Klickbare gross genug für einen Daumen ── */
  .lp-cta,.lp-gs-primary,.lp-gs-ghost,.lp-ctarow button{min-height:44px}
  .spot-arrows>button,.lp-expert-nav button{width:44px;height:44px}
  .lp-best-link{min-height:44px}
  .lp-spec-tab{min-height:44px}
  /* Footer-Links waren nur 20px hoch */
  .lp-bigfoot-col a{padding:9px 0;margin-bottom:0}
  /* Die 7px-Punkte des Stimmen-Karussells bekommen eine unsichtbare,
     grössere Trefferfläche — das Aussehen bleibt unverändert. */
  .spot-arrows .spot-page{position:relative}
  .spot-arrows .spot-page::after{content:"";position:absolute;left:50%;top:50%;
    transform:translate(-50%,-50%);width:calc(100% + 7px);height:38px}

  /* ── Dialoge passen aufs Handy ── */
  .modal{padding:16px}
  .login-box{width:100%;max-width:100%!important;max-height:88vh;overflow-y:auto;padding:26px 20px}
  .login-foot{font-size:11.5px;line-height:1.7}
  /* Zweispaltige Zeile im Registrieren-Dialog (Inline-Style) stapeln */
  #regModal [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}

  /* ── Kein iOS-Auto-Zoom beim Fokus auf Eingabefelder
        (Safari zoomt hinein, sobald die Schrift < 16px ist) ── */
  input,select,textarea{font-size:16px}
  .lp-ctarow input{width:100%}
}

/* ═════════════════════════════════════════════════════════════════
   ≤ 420px — kleine Handys
   ═════════════════════════════════════════════════════════════════ */
@media(max-width:420px){
  .lp-sec{padding-left:16px;padding-right:16px}
  .lp-hero{padding-left:18px;padding-right:18px}
  .lp-nav{padding:10px 12px}
  .lp-nav .links{padding:6px 12px 14px}
  .lp-nav .nav-pill{padding:9px 13px;font-size:12px}
  .lp-bigfoot-divider{width:calc(100% - 32px)}
  .lp-gs-stats{gap:26px}
  .lp-map-stats{gap:28px}
}

/* ═════════════════════════════════════════════════════════════════
   ≤ 359px — sehr schmale Geräte
   ═════════════════════════════════════════════════════════════════ */
@media(max-width:359px){
  .lp-bigfoot-top{grid-template-columns:1fr}
}