/* LOGIN_NEU_FILM_2026_10_29: neues Anmelde-Design (Gruender "ja bring alles live", Canvas "Login & Registrieren neu").
   Gilt nur, wenn <body> die Klasse ln-seite traegt (Anmelden, Registrieren, Passwort, Zwei-Faktor, Bestaetigen,
   Einladung) - App-Modus (?app=1 / native Huelle) und die Shopify-App-Anmeldung tragen sie NICHT.
   Handy/Tablet: grauer Grund, Logo mittig, eine ruhige weisse Karte, Anbieter als kompakte Liste, keine Grafik.
   Breit (>= 1100 x 600): weiss, Formular links (E-Mail zuerst), rechts der Film (login_film.js laedt ihn nach load).
   Schrift: Inter (fonts.css -> auf der Website fonts_website.css, beide liefern Inter). Zeichen nie einfaerben. */

body.ln-seite{
  --ln-ink:#0f172a; --ln-text:#475569; --ln-leise:#64748b; --ln-linie:#e2e8f0; --ln-grau:#f5f6f8;
  --ln-fb:min(572px, 40vw);
  background:var(--ln-grau) !important;
  color:var(--ln-ink);
  font-family:Inter, system-ui, -apple-system, "Segoe UI", sans-serif !important;
}
body.ln-seite, body.ln-seite *{ -webkit-font-smoothing:antialiased; }
body.ln-seite::before, body.ln-seite::after{ display:none !important; }
body.ln-seite .promoBar, body.ln-seite header.header, body.ln-seite > footer,
body.ln-seite .loginStripeGrid, body.ln-seite .loginVignette,
body.ln-seite .loginWave1, body.ln-seite .loginWave2, body.ln-seite .loginWave3{ display:none !important; }

/* ---------------------------------------------------------------- Film-Rahmen (nur breit sichtbar) */
.ln-film{ display:none; }
.setup-side > .ln-film{ display:none; }

/* ---------------------------------------------------------------- Sprachknopf */
body.ln-seite .ln-sprache{
  position:absolute; top:38px; right:16px; z-index:5;
  display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 10px; border-radius:10px;
  font:700 14px/1 Inter, system-ui, sans-serif; color:#475569; text-decoration:none;
}
body.ln-seite .ln-sprache:hover{ background:rgba(15,23,42,.04); color:var(--ln-ink); }
body.ln-seite .ln-sprache img{ width:20px; height:auto; border-radius:3px; box-shadow:0 0 0 1px rgba(15,23,42,.08); display:block; }

/* ================================================================ Anmelden / Registrieren (page-login) */
body.ln-seite.page-login main.wrap{
  min-height:100vh !important; min-height:100dvh !important;
  display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:flex-start !important;
  padding:0 16px 32px !important; margin:0 !important; box-sizing:border-box;
}
body.ln-seite.page-login .auth-logo{
  height:112px; margin:0 !important; display:flex !important; align-items:center; justify-content:center; flex:none;
}
/* logo1.png traegt viel Rand (Inhalt 350x82 in 512x341): ein Fenster in Inhaltsgroesse, das Bild darin verschoben */
body.ln-seite.page-login .auth-logo a{ pointer-events:auto; display:block; width:102px; height:24px; overflow:hidden; }
body.ln-seite.page-login .auth-logo img, body.ln-seite.ln-klein .logo-row img{
  height:100px !important; width:auto !important; max-width:none !important; display:block; margin:-36px 0 0 -25px !important;
}
body.ln-seite.page-login main.wrap .container{
  display:block !important; width:100% !important; max-width:440px !important; padding:0 !important; margin:0 auto !important;
}
body.ln-seite.page-login main.wrap .card{
  width:100% !important; max-width:440px !important; margin:0 !important;
  background:#fff !important; border:0 !important; border-radius:20px !important;
  box-shadow:0 1px 3px rgba(13,27,42,.05) !important; padding:28px 24px !important; overflow:visible !important;
}
body.ln-seite.page-login main.wrap .card::before{ display:none !important; }
body.ln-seite.page-login main.wrap .cardInner{ padding:0 !important; }
body.ln-seite.page-login main.wrap h1{
  margin:0 0 8px !important; font-size:24px !important; line-height:1.25 !important; font-weight:650 !important;
  letter-spacing:-.02em !important; color:var(--ln-ink) !important; text-align:left !important;
}
body.ln-seite.page-login main.wrap h1 .ln-breit{ display:none; }
body.ln-seite.page-login main.wrap .sub{
  margin:0 0 20px !important; font-size:15px !important; line-height:1.5 !important; font-weight:400 !important;
  color:#5b6675 !important; text-align:left !important;
}
body.ln-seite.page-login main.wrap form{ display:flex; flex-direction:column; margin:0; }
body.ln-seite.page-login main.wrap label{
  display:block !important; margin:0 0 8px !important; font-size:14px !important; font-weight:500 !important;
  color:#3c4757 !important; text-transform:none !important; letter-spacing:0 !important;
}
body.ln-seite.page-login main.wrap label.rm-zeile, body.ln-seite.page-login main.wrap label.reg-unternehmer{
  display:flex !important; align-items:flex-start; gap:10px; margin:6px 0 4px !important; line-height:1.5;
}
body.ln-seite.page-login main.wrap input:not([type=checkbox]):not([type=radio]):not([type=hidden]){
  height:50px !important; min-height:50px !important; box-sizing:border-box !important; padding:0 14px !important;
  border:1px solid #d9dee4 !important; border-radius:12px !important; background:#fff !important;
  font:400 16px Inter, system-ui, sans-serif !important; color:var(--ln-ink) !important; margin-bottom:14px;
  box-shadow:none !important;
}
body.ln-seite.page-login main.wrap input.code{ padding:0 !important; text-align:center; font-weight:600 !important; }
body.ln-seite.page-login main.wrap input:not([type=checkbox]):focus{
  border-color:var(--ln-ink) !important; box-shadow:0 0 0 3px rgba(13,27,42,.07) !important; outline:none !important;
}
body.ln-seite.page-login main.wrap input[type=checkbox]{ accent-color:var(--ln-ink); }
body.ln-seite.page-login main.wrap .submitBtn{
  width:100% !important; height:50px !important; min-height:50px !important; margin-top:6px !important; padding:0 16px !important;
  border:0 !important; border-radius:12px !important; background:var(--ln-ink) !important; color:#fff !important;
  font:600 16px Inter, system-ui, sans-serif !important; box-shadow:none !important; transform:none !important;
  display:flex !important; align-items:center; justify-content:center; gap:8px;
}
body.ln-seite.page-login main.wrap .submitBtn:hover{ background:#1e293b !important; transform:none !important; box-shadow:none !important; }
body.ln-seite.page-login main.wrap .submitBtn:disabled,
body.ln-seite.page-login main.wrap .submitBtn[aria-disabled="true"]{ background:#94a3b8 !important; }
body.ln-seite.page-login main.wrap .lf-knopf.is-marke{ background:var(--ln-ink) !important; color:#fff !important; border-radius:12px !important; }
body.ln-seite.page-login main.wrap .lf-knopf.is-rand, body.ln-seite.page-login main.wrap .lf-knopf.is-neutral{ border-radius:12px !important; }
body.ln-seite.page-login main.wrap .hint{ font-size:14px !important; color:#5b6675 !important; line-height:1.5 !important; }
body.ln-seite.page-login main.wrap .hint a, body.ln-seite.page-login main.wrap .ln-recht a{ color:#0f7a55 !important; font-weight:600 !important; text-decoration:none; }
body.ln-seite.page-login main.wrap .hint a:hover, body.ln-seite.page-login main.wrap .ln-recht a:hover{ text-decoration:underline; }
body.ln-seite.page-login main.wrap .ln-recht{
  order:20; margin:14px 0 0; font-size:12.5px; font-weight:400; line-height:1.55; color:#8a94a0; text-align:center;
}
body.ln-seite.page-login main.wrap .ln-recht a{ color:#5b6675 !important; font-weight:500 !important; text-decoration:underline; text-underline-offset:2px; }

/* Anbieter: am Handy eine kompakte Liste (Google, Microsoft, Shopify, Apple), davor "oder" */
body.ln-seite.page-login main.wrap .social-wrap{
  order:10; display:flex !important; flex-direction:column; margin:14px 0 0 !important; padding:0 !important; gap:0;
}
body.ln-seite.page-login main.wrap .social-wrap .divider{ display:none !important; }
body.ln-seite.page-login main.wrap .social-wrap .social-sub{
  order:-1; display:flex !important; align-items:center; gap:12px; margin:0 0 14px !important; padding:0;
  font-size:13px !important; font-weight:500 !important; color:#98a1ac !important; text-align:left;
}
body.ln-seite.page-login main.wrap .social-wrap .social-sub::before,
body.ln-seite.page-login main.wrap .social-wrap .social-sub::after{ content:""; flex:1; height:1px; background:#edf0f3; }
body.ln-seite.page-login main.wrap .social-sub .ln-oder-lang{ display:none; }
body.ln-seite.page-login main.wrap .social-btn{
  display:flex !important; align-items:center !important; justify-content:flex-start !important; gap:12px !important;
  height:48px !important; min-height:48px !important; margin:0 !important; padding:0 16px !important;
  border:1px solid #e3e7ec !important; border-radius:0 !important; background:#fff !important; color:var(--ln-ink) !important;
  font:500 15px Inter, system-ui, sans-serif !important; box-shadow:none !important; transform:none !important; text-decoration:none !important;
}
body.ln-seite.page-login main.wrap .social-btn + .social-btn{ margin-top:-1px !important; border-top-color:#eef1f4 !important; }
body.ln-seite.page-login main.wrap .social-btn:first-of-type{ border-radius:12px 12px 0 0 !important; }
body.ln-seite.page-login main.wrap .social-btn:last-of-type{ border-radius:0 0 12px 12px !important; }
body.ln-seite.page-login main.wrap .social-btn:only-of-type{ border-radius:12px !important; }
body.ln-seite.page-login main.wrap .social-btn:hover{ background:#f8fafc !important; transform:none !important; box-shadow:none !important; }
/* Apple: weisse Fassung mit Rand und schwarzem Zeichen (Apple-HIG "white outline") */
body.ln-seite.page-login main.wrap .social-btn-apple{ background:#fff !important; color:var(--ln-ink) !important; border-color:#e3e7ec !important; }
body.ln-seite.page-login main.wrap .social-btn-apple .social-ico path{ fill:#000 !important; }
body.ln-seite.page-login main.wrap .social-ico{ width:18px !important; height:18px !important; flex:none; }
/* Sichtbar nur der Anbietername; der volle Name bleibt fuer Screenreader im Text (Kurzform per CSS ohne Vorlesen) */
body.ln-seite.page-login main.wrap .social-btn > span{
  position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important;
}
body.ln-seite.page-login main.wrap .social-btn[href^="/auth/google"]::after{ content:"Google"; content:"Google" / ""; }
body.ln-seite.page-login main.wrap .social-btn[href^="/auth/microsoft"]::after{ content:"Microsoft"; content:"Microsoft" / ""; }
body.ln-seite.page-login main.wrap .social-btn[href^="/auth/shopify"]::after{ content:"Shopify"; content:"Shopify" / ""; }
body.ln-seite.page-login main.wrap .social-btn[href^="/auth/apple"]::after{ content:"Apple"; content:"Apple" / ""; }
body.ln-seite.page-login main.wrap .hint.ln-neu{ order:15; text-align:center !important; margin-top:16px !important; }
/* S2-Hinweis (needs_account/expired/team) bleibt, nur ruhiger eingepasst */
body.ln-seite.page-login main.wrap .s2-note{ border-radius:12px; }

/* ================================================================ kleine Seiten (Passwort, 2FA, Bestaetigen, Einladung) */
body.ln-seite.ln-klein{
  margin:0 !important; min-height:100vh; min-height:100dvh; box-sizing:border-box;
  display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:flex-start !important;
  padding:0 16px 32px !important;
}
body.ln-seite.ln-klein .logo-row{
  width:102px; height:24px; overflow:hidden; margin:44px 0 !important; padding:0 !important; display:block !important; flex:none;
}
body.ln-seite.ln-klein .card{
  width:100% !important; max-width:440px !important; margin:0 !important; box-sizing:border-box;
  background:#fff !important; border:0 !important; border-radius:20px !important;
  box-shadow:0 1px 3px rgba(13,27,42,.05) !important; padding:28px 24px !important;
}
body.ln-seite.ln-klein .card h1{
  margin:0 0 8px !important; font-size:24px !important; line-height:1.25 !important; font-weight:650 !important; letter-spacing:-.02em !important; color:var(--ln-ink) !important;
}
body.ln-seite.ln-klein .card .sub, body.ln-seite.ln-klein .card .desc{ font-size:15px !important; line-height:1.5 !important; color:#5b6675 !important; }
body.ln-seite.ln-klein .card label{ font-size:14px !important; font-weight:500 !important; color:#3c4757 !important; text-transform:none !important; letter-spacing:0 !important; }
body.ln-seite.ln-klein .card input:not([type=checkbox]):not([type=radio]):not([type=hidden]){
  min-height:50px !important; box-sizing:border-box !important; border:1px solid #d9dee4 !important; border-radius:12px !important;
  font-family:Inter, system-ui, sans-serif !important; font-size:16px !important; color:var(--ln-ink) !important; background:#fff !important; box-shadow:none !important;
}
body.ln-seite.ln-klein .card input:not([type=checkbox]):focus{ border-color:var(--ln-ink) !important; box-shadow:0 0 0 3px rgba(13,27,42,.07) !important; outline:none !important; }
body.ln-seite.ln-klein .card .submit-btn, body.ln-seite.ln-klein .card .btn-primary, body.ln-seite.ln-klein .card a.btn:not(.btn-secondary){
  min-height:50px !important; border:0 !important; border-radius:12px !important; background:var(--ln-ink) !important; color:#fff !important;
  font:600 16px Inter, system-ui, sans-serif !important; box-shadow:none !important; transform:none !important;
}
body.ln-seite.ln-klein .card .submit-btn:hover, body.ln-seite.ln-klein .card .btn-primary:hover, body.ln-seite.ln-klein .card a.btn:hover{ background:#1e293b !important; }
body.ln-seite.ln-klein .card .submit-btn:disabled{ background:#94a3b8 !important; }
body.ln-seite.ln-klein .card .hint{ color:#5b6675 !important; }
body.ln-seite.ln-klein .card a:not(.btn){ color:#0f7a55; }
body.ln-seite.ln-klein .back-link{ margin:18px 0 0 !important; text-align:center; }
body.ln-seite.ln-klein .back-link a{ color:#5b6675 !important; font-weight:500 !important; font-size:14px !important; text-decoration:none; }
body.ln-seite.ln-klein .back-link a:hover{ color:var(--ln-ink) !important; }

/* ================================================================ BREIT: Formular links, Film rechts */
@media (min-width:1100px) and (min-height:600px){
  body.ln-seite{ background:#fff !important; }
  body.ln-seite > .ln-film{
    display:block; position:fixed; top:68px; right:68px; bottom:68px; width:var(--ln-fb); z-index:1;
    border-radius:28px; overflow:hidden;
    background:linear-gradient(110deg,#d9f5ea 0%,#e4f1f8 55%,#d6e8fb 100%);
  }
  body.ln-seite > .ln-film > .d{ animation:lnFilmEin .6s ease-out both; }
  @keyframes lnFilmEin{ from{ opacity:0 } to{ opacity:1 } }
  body.ln-seite .ln-sprache{ top:26px; right:calc(var(--ln-fb) + 68px + 64px); }

  /* Anmelden / Registrieren */
  body.ln-seite.page-login main.wrap{
    align-items:flex-start !important; justify-content:center !important;
    padding:96px calc(var(--ln-fb) + 68px + 64px) 72px clamp(40px, 9.4vw, 136px) !important;
  }
  body.ln-seite.page-login .auth-logo{ position:absolute; top:31px; left:64px; height:26px; }
  body.ln-seite.page-login .auth-logo a, body.ln-seite.ln-klein .logo-row{ width:111px; height:26px; }
  body.ln-seite.page-login .auth-logo img, body.ln-seite.ln-klein .logo-row img{ height:108px !important; margin:-39px 0 0 -27px !important; }
  body.ln-seite.page-login main.wrap .container{ max-width:420px !important; margin:0 !important; }
  body.ln-seite.page-login main.wrap .card{
    max-width:420px !important; background:transparent !important; border-radius:0 !important; box-shadow:none !important; padding:0 !important;
  }
  body.ln-seite.page-login main.wrap h1{
    margin:0 0 12px !important; font-size:44px !important; line-height:1.08 !important; font-weight:800 !important; letter-spacing:-.035em !important;
  }
  body.ln-seite.page-login main.wrap h1 .ln-breit{ display:inline; }
  body.ln-seite.page-login main.wrap h1 .ln-schmal{ display:none; }
  body.ln-seite.page-login main.wrap .sub{ margin:0 0 30px !important; font-size:17px !important; color:var(--ln-text) !important; }
  body.ln-seite.page-login main.wrap label{ font-size:13.5px !important; font-weight:600 !important; color:#334155 !important; margin-bottom:7px !important; }
  body.ln-seite.page-login main.wrap input:not([type=checkbox]):not([type=radio]):not([type=hidden]){
    height:52px !important; min-height:52px !important; padding:0 16px !important; border:1.5px solid var(--ln-linie) !important; border-radius:14px !important; font-weight:500 !important;
  }
  body.ln-seite.page-login main.wrap input.code{ padding:0 !important; }
  body.ln-seite.page-login main.wrap input:not([type=checkbox]):focus{ border-color:var(--ln-ink) !important; box-shadow:0 0 0 4px rgba(15,23,42,.06) !important; }
  body.ln-seite.page-login main.wrap .submitBtn{
    height:52px !important; min-height:52px !important; border-radius:14px !important; font:700 15.5px Inter, system-ui, sans-serif !important;
    box-shadow:0 8px 20px rgba(15,23,42,.18) !important;
  }
  body.ln-seite.page-login main.wrap .card.ln-mail .submitBtn:not(.lp-wait):not(.lf-sek)::after{ content:"→"; content:"→" / ""; }

  /* Anbieter oben: Google ganze Breite, darunter Microsoft | Apple | Shopify, dann "oder mit E-Mail" */
  body.ln-seite.page-login main.wrap .card.ln-mail .social-wrap{ order:-1; margin:0 0 4px !important; }
  body.ln-seite.page-login main.wrap .social-wrap{ flex-direction:row; flex-wrap:wrap; gap:10px; }
  body.ln-seite.page-login main.wrap .social-btn,
  body.ln-seite.page-login main.wrap .social-btn + .social-btn{
    flex:1 1 0; min-width:0; height:50px !important; min-height:50px !important; margin:0 !important; justify-content:center !important; gap:8px !important;
    border:1px solid var(--ln-linie) !important; border-radius:14px !important; box-shadow:0 1px 2px rgba(15,23,42,.05) !important;
    font:600 14px Inter, system-ui, sans-serif !important; padding:0 10px !important;
  }
  body.ln-seite.page-login main.wrap .social-btn:first-of-type{ flex-basis:100%; font-size:15px !important; gap:12px !important; }
  body.ln-seite.page-login main.wrap .social-btn[href^="/auth/google"]::after{ content:"Weiter mit Google"; content:"Weiter mit Google" / ""; }
  html[lang="en"] body.ln-seite.page-login main.wrap .social-btn[href^="/auth/google"]::after{ content:"Continue with Google"; content:"Continue with Google" / ""; }
  body.ln-seite.page-login main.wrap .social-btn[href^="/auth/microsoft"]{ order:2; }
  body.ln-seite.page-login main.wrap .social-btn[href^="/auth/apple"]{ order:3; }
  body.ln-seite.page-login main.wrap .social-btn[href^="/auth/shopify"]{ order:4; }
  body.ln-seite.page-login main.wrap .social-btn:hover{ border-color:#cbd5e1 !important; }
  body.ln-seite.page-login main.wrap .card.ln-mail .social-wrap .social-sub{ order:9; }
  body.ln-seite.page-login main.wrap .social-wrap .social-sub{
    flex-basis:100%; margin:8px 0 6px !important; font-size:12.5px !important; font-weight:600 !important; color:#94a3b8 !important;
  }
  body.ln-seite.page-login main.wrap .social-wrap .social-sub::before,
  body.ln-seite.page-login main.wrap .social-wrap .social-sub::after{ background:var(--ln-linie); }
  body.ln-seite.page-login main.wrap .card.ln-mail .social-sub .ln-oder-lang{ display:inline; }
  body.ln-seite.page-login main.wrap .card.ln-mail .social-sub .ln-oder-kurz{ display:none; }
  body.ln-seite.page-login main.wrap .hint.ln-neu{ text-align:left !important; font-size:13px !important; }
  body.ln-seite.page-login main.wrap .ln-recht{ text-align:left; margin-top:8px; color:var(--ln-leise); }

  /* kleine Seiten */
  body.ln-seite.ln-klein{
    align-items:flex-start !important; justify-content:center !important;
    padding:96px calc(var(--ln-fb) + 68px + 64px) 72px clamp(40px, 9.4vw, 136px) !important;
  }
  body.ln-seite.ln-klein .logo-row{ position:absolute; top:31px; left:64px; margin:0 !important; }
  body.ln-seite.ln-klein .card{ max-width:420px !important; background:transparent !important; box-shadow:none !important; border-radius:0 !important; padding:0 !important; }
  body.ln-seite.ln-klein .card h1{ font-size:36px !important; line-height:1.08 !important; font-weight:800 !important; letter-spacing:-.035em !important; margin-bottom:12px !important; }
  body.ln-seite.ln-klein .card .sub, body.ln-seite.ln-klein .card .desc{ font-size:17px !important; color:var(--ln-text) !important; }
  body.ln-seite.ln-klein .card input:not([type=checkbox]):not([type=radio]):not([type=hidden]){ min-height:52px !important; border:1.5px solid var(--ln-linie) !important; border-radius:14px !important; }
  body.ln-seite.ln-klein .card .submit-btn, body.ln-seite.ln-klein .card .btn-primary, body.ln-seite.ln-klein .card a.btn:not(.btn-secondary){
    min-height:52px !important; border-radius:14px !important; font-weight:700 !important; box-shadow:0 8px 20px rgba(15,23,42,.18) !important;
  }
  body.ln-seite.ln-klein .back-link{ text-align:left; }

  /* Einstieg (Onboarding Schritt E-Mail / Code / Konto): Film statt Widget-Vorschau, sobald geladen */
  .setup-side{ position:relative; }
  .setup-side > .ln-film[data-geladen]{
    display:block; position:absolute; inset:28px 28px 28px 8px; z-index:3; border-radius:28px; overflow:hidden;
    background:linear-gradient(110deg,#d9f5ea 0%,#e4f1f8 55%,#d6e8fb 100%);
  }
  .setup-side.ln-mit-film > :not(.ln-film){ visibility:hidden; }
}
@media (prefers-reduced-motion:reduce){
  body.ln-seite > .ln-film > .d{ animation:none !important; }
}