/* ===========================================================================
   Leasing Expert – Anmeldeseite zum Leasing-Portal (/login/)

   Aufbau wie die Kundenportal-Anmeldung von masko-consulting.com
   (kundenportal.html): links Anmeldung per Login-Link, rechts das Motiv.
   Das Motiv ist hier kein Bild, sondern gebaut (Überschrift, Liste, Telefon),
   damit Logo und Beschriftung „Leasing Expert“ tragen. Eigene Klassen mit
   Vorsilbe lp-/o-/m-/p-, damit nichts aus site.css hineinwirkt.
   =========================================================================== */

.bare{min-height:100dvh}
.lp{position:relative;min-height:100dvh;display:grid;grid-template-columns:1fr;font-weight:400}
@media(min-width:960px){ .lp{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }

/* ---------- Linke Spalte: Anmeldung ---------- */
.lp-form{display:flex;flex-direction:column;padding:28px clamp(20px,5vw,56px) 40px;min-width:0}
.lp-kopf{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:auto}
.lp-kopf .logo .emblem{height:40px}
.lp-zurueck{
  display:inline-flex;align-items:center;gap:7px;flex:none;
  padding:9px 15px;border-radius:999px;
  border:1px solid var(--line);background:var(--white);
  font-size:14px;font-weight:500;color:var(--muted);text-decoration:none;
  white-space:nowrap;
  transition:border-color .2s,color .2s,background .2s;
}
.lp-zurueck:hover{border-color:var(--slate-300);color:var(--navy);background:var(--slate-100)}
.lp-zurueck svg{width:15px;height:15px;flex:none}

.lp-mitte{width:100%;max-width:400px;margin:0 auto;padding:40px 0 32px}
@media(min-width:960px){ .lp-mitte{padding:44px 0 36px} }

.lp h1{font-size:clamp(28px,3.4vw,38px);line-height:1.14;letter-spacing:-.02em;margin:0 0 12px;color:var(--navy)}
.lp-lead{margin:0 0 30px;font-size:15.5px;line-height:1.6;color:var(--muted)}

/* Formular */
.lp-feld{margin:0 0 18px}
.lp-feld label{display:block;margin:0 0 8px;font-size:13.5px;font-weight:500;color:var(--muted)}
.lp-feld input{
  display:block;width:100%;margin:0;
  padding:15px 16px;
  font-family:inherit;font-size:15.5px;line-height:1.4;color:var(--navy);
  background:var(--slate-100);
  border:1px solid var(--line);border-radius:14px;
  transition:border-color .2s,background .2s,box-shadow .2s;
  -webkit-appearance:none;appearance:none;
}
.lp-feld input::placeholder{color:#8b95a4}
.lp-feld input:hover{border-color:var(--slate-300)}
.lp-feld input:focus{outline:none;border-color:var(--blue);background:var(--white);box-shadow:0 0 0 3px rgba(40,71,122,.16)}
.lp-feld input:user-invalid{border-color:#c4574c}
.lp-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

.lp-knopf{
  display:block;width:100%;margin:4px 0 0;
  height:54px;padding:0 20px;border:1px solid var(--navy);border-radius:100vw;
  font-family:inherit;font-weight:500;font-size:16px;line-height:1;
  color:var(--white);background:var(--navy);cursor:pointer;
  transition:background .15s,border-color .15s,transform .15s,box-shadow .2s;
}
.lp-knopf:hover{background:var(--navy-h);border-color:var(--navy-h);transform:translateY(-1px);box-shadow:0 10px 22px -12px rgba(20,35,59,.7)}
.lp-knopf:active{background:var(--navy-a);transform:translateY(0)}
.lp-knopf:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none}
.lp-hinweis{margin:14px 0 0;font-size:13px;line-height:1.55;color:#8b95a4;text-align:center}

/* Bestätigung nach dem Anfordern */
.lp-gesendet{text-align:center;padding:4px 0}
.lp-gesendet .symbol{
  display:grid;place-items:center;width:56px;height:56px;margin:0 auto 18px;
  border-radius:50%;color:var(--green-dark);background:#eaf3e8;border:1px solid #cfe3c9;
}
.lp-gesendet .symbol svg{width:25px;height:25px}
.lp-gesendet h2{font-size:21px;line-height:1.25;margin:0 0 10px;color:var(--navy)}
.lp-gesendet p{margin:0 0 22px;font-size:15px;line-height:1.6;color:var(--muted)}
.lp-gesendet .adresse{font-weight:700;color:var(--navy);word-break:break-word}
.lp-textknopf{border:0;background:none;padding:0;font-family:inherit;font-size:14.5px;font-weight:500;color:var(--blue);cursor:pointer}
.lp-textknopf:hover{text-decoration:underline}

/* Trenner und Fußzeile */
.lp-trenner{display:flex;align-items:center;gap:14px;margin:22px 0;color:#8b95a4;font-size:13px}
.lp-trenner::before,.lp-trenner::after{content:"";flex:1;height:1px;background:var(--line)}
.lp-fuss{margin:0 0 10px;text-align:center;font-size:14.5px;line-height:1.6;color:var(--muted)}
.lp-fuss a{color:var(--blue);text-decoration:none;font-weight:500}
.lp-fuss a:hover{text-decoration:underline}
.lp-rechtlich{margin:auto 0 0;padding-top:20px;text-align:center;font-size:12.5px;color:#8b95a4}
.lp-rechtlich a{color:#8b95a4;text-decoration:none}
.lp-rechtlich a:hover{text-decoration:underline}
.lp-rechtlich span{margin:0 8px;opacity:.5}

/* ---------- Ordner: klappt auf, die Inhalte fächern heraus ----------
   Übernommen von der Masko-Anmeldeseite; Deckel in Kupfer, Rückwand in Navy,
   auf dem Deckel das Leasing-Expert-Zeichen. Steht mittig über der Überschrift. */
.ordner{position:relative;z-index:3;width:220px;height:190px;margin:0 auto 34px;perspective:1000px;cursor:pointer}
.ordner-buehne{position:absolute;inset:0;display:grid;place-items:center}
.o-back,.o-front,.o-glanz{
  position:absolute;width:134px;height:98px;border-radius:11px;
  transform-origin:bottom center;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1);
}
.o-back{background:linear-gradient(160deg,#28477a,#14233b);box-shadow:0 6px 14px -8px rgba(0,0,0,.8);z-index:10}
.o-lasche{
  position:absolute;width:56px;height:17px;border-radius:7px 7px 0 0;
  background:linear-gradient(160deg,#1d3354,#14233b);
  top:calc(50% - 49px - 13px);left:calc(50% - 67px + 16px);
  transform-origin:bottom center;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1);z-index:10;
  display:grid;place-items:center;
}
.o-lasche img{height:11px;width:auto;opacity:.9;filter:brightness(0) invert(1)}
.o-front{
  top:calc(50% - 49px + 5px);z-index:30;
  background:linear-gradient(160deg,#e0a074,#c8825a 55%,#a5643e);
  box-shadow:0 12px 26px -12px rgba(0,0,0,.7);
}
.o-glanz{top:calc(50% - 49px + 5px);z-index:31;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.34) 0%,transparent 52%)}
.o-m{
  position:absolute;top:calc(50% - 49px + 5px);z-index:32;
  width:134px;height:98px;display:grid;place-items:center;pointer-events:none;
  transform-origin:bottom center;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1);
}
.o-m img{height:34px;width:auto;opacity:.94;filter:brightness(0) invert(1) drop-shadow(0 2px 4px rgba(0,0,0,.4))}

.ordner:hover .o-back,.ordner:focus-within .o-back{transform:rotateX(-15deg)}
.ordner:hover .o-lasche,.ordner:focus-within .o-lasche{transform:rotateX(-25deg) translateY(-2px)}
.ordner:hover .o-front,.ordner:hover .o-glanz,.ordner:hover .o-m,
.ordner:focus-within .o-front,.ordner:focus-within .o-glanz,.ordner:focus-within .o-m{transform:rotateX(25deg) translateY(8px)}

.o-karten{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:20}
.o-karte{
  position:absolute;left:-38px;top:-52px;width:76px;height:100px;
  border-radius:10px;overflow:hidden;border:0;padding:0;cursor:pointer;
  background:linear-gradient(160deg,#1d3354,#0b111c);
  box-shadow:0 12px 26px -10px rgba(0,0,0,.8);
  opacity:0;transform:translateY(0) translateX(0) rotate(0) scale(.5);
  transition:all .6s cubic-bezier(.34,1.56,.64,1);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  color:#e0a074;text-align:center;font-family:inherit;
}
.o-karte svg{width:20px;height:20px}
.o-karte span{font-size:8.5px;line-height:1.25;font-weight:500;color:#fff;padding:0 6px;letter-spacing:.01em}
.ordner:hover .o-karte,.ordner:focus-within .o-karte{opacity:1}
.ordner:hover .o-karte:nth-child(1),.ordner:focus-within .o-karte:nth-child(1){transform:translateY(-84px) translateX(-52px) rotate(-12deg) scale(1);transition-delay:0ms}
.ordner:hover .o-karte:nth-child(2),.ordner:focus-within .o-karte:nth-child(2){transform:translateY(-92px) translateX(0) rotate(0deg) scale(1);transition-delay:80ms}
.ordner:hover .o-karte:nth-child(3),.ordner:focus-within .o-karte:nth-child(3){transform:translateY(-84px) translateX(52px) rotate(12deg) scale(1);transition-delay:160ms}
.o-karte:hover{outline:2px solid rgba(224,160,116,.6);outline-offset:1px}
.o-titel{
  position:absolute;left:0;right:0;bottom:-14px;z-index:40;text-align:center;
  font-size:13px;line-height:1.3;font-weight:700;color:var(--navy);margin:0;
  transition:transform .3s ease;
}
.o-titel small{display:block;font-size:11px;line-height:1.4;font-weight:400;color:var(--muted);margin-top:3px}
.ordner:hover .o-titel{transform:translateY(4px)}

/* Großansicht zum Ordner */
.o-lupe{
  position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:24px;
  background:rgba(10,16,26,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  animation:lupeAuf .3s ease both;
}
.o-lupe[hidden]{display:none}
@keyframes lupeAuf{from{opacity:0}to{opacity:1}}
.o-lupe-karte{
  position:relative;width:min(460px,100%);border-radius:22px;overflow:hidden;
  background:linear-gradient(160deg,#1d3354,#0b111c);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 50px 110px -40px rgba(0,0,0,.9);
  animation:lupeRein .38s cubic-bezier(.16,1,.3,1) both;
}
@keyframes lupeRein{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
.o-lupe-kopf{
  height:150px;display:grid;place-items:center;color:#e0a074;
  background:radial-gradient(120% 140% at 70% -20%,rgba(200,130,90,.38),transparent 62%),linear-gradient(150deg,#28477a,#14233b);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.o-lupe-kopf svg{width:46px;height:46px}
.o-lupe-txt{padding:24px 26px 26px}
.o-lupe-txt h3{font-size:21px;line-height:1.25;color:#fff;margin:0 0 9px}
.o-lupe-txt p{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.72);margin:0}
.o-lupe-nav{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 26px 22px}
.o-punkte{display:flex;gap:7px}
.o-punkt{width:8px;height:8px;border-radius:50%;border:0;padding:0;cursor:pointer;background:rgba(255,255,255,.28);transition:background .25s,transform .25s}
.o-punkt.an{background:#fff;transform:scale(1.15)}
.o-pfeile{display:flex;gap:9px}
.o-pfeil,.o-zu{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  color:rgba(255,255,255,.8);background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);transition:background .2s,color .2s,transform .2s;
}
.o-pfeil:hover,.o-zu:hover{background:rgba(255,255,255,.2);color:#fff}
.o-pfeil:disabled{opacity:.3;cursor:default}
.o-pfeil svg,.o-zu svg{width:17px;height:17px}
.o-zu{position:absolute;top:14px;right:14px;z-index:2}

/* ---------- Rechte Spalte: Motiv (ab 960 px) ---------- */
.lp-bild{display:none}
@media(min-width:960px){
  .lp-bild{
    display:block;position:relative;margin:16px 16px 16px 0;
    border-radius:26px;overflow:hidden;color:#fff;
    background:
      radial-gradient(90% 60% at 100% 0%,rgba(200,130,90,.42),transparent 60%),
      radial-gradient(60% 40% at 0% 100%,rgba(40,71,122,.55),transparent 65%),
      linear-gradient(165deg,#1d3354 0%,#14233b 45%,#0b111c 100%);
    box-shadow:0 30px 70px -40px rgba(20,35,59,.6);
  }
  /* feine Kupferlinie oben, wie beim Masko-Motiv */
  .lp-bild::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,#c8825a 40%,#e0a074 60%,transparent)}
}
.m-inhalt{position:absolute;inset:0;padding:clamp(28px,4vw,56px)}
.m-eyebrow{display:flex;align-items:center;gap:12px;margin:0;font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#e0a074}
.m-eyebrow::before{content:"";width:28px;height:2px;background:#c8825a;flex:none}
.m-titel{margin:18px 0 0;font-size:clamp(30px,3.2vw,46px);line-height:1.08;letter-spacing:-.02em;color:#fff}
.m-titel span{color:#e0a074}
.m-liste{list-style:none;margin:clamp(36px,7vh,88px) 0 0;padding:0;display:grid;gap:18px;max-width:300px}
.m-liste li{display:flex;align-items:center;gap:16px;font-size:17px;font-weight:500;line-height:1.3}
.m-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);color:#e0a074}
.m-ic svg{width:20px;height:20px}

/* Telefon mit Anmeldekarte – erst ab 1181 px, darunter wäre es zu eng neben der Liste */
.phone{display:none}
@media(min-width:1181px){
  .phone{
    display:block;position:absolute;right:6%;top:21%;
    width:clamp(220px,36%,300px);aspect-ratio:300/610;border-radius:44px;
    padding:12px;background:#2f3742;
    box-shadow:0 50px 90px -30px rgba(0,0,0,.8),inset 0 0 0 2px rgba(255,255,255,.08);
    transform:rotate(-8deg);
  }
}
.phone-screen{
  position:absolute;inset:12px;border-radius:34px;overflow:hidden;
  background:linear-gradient(180deg,#0d1522 0%,#132339 60%,#1b365f 100%);
  padding:22% 8% 0;display:flex;flex-direction:column;align-items:center;gap:14px;
}
.phone-notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:34%;height:16px;border-radius:99px;background:#0b111c}
.p-kopf{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;color:#fff;white-space:nowrap}
.p-kopf img{height:34px;width:auto}
.p-karte{width:100%;border-radius:16px;padding:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);text-align:left}
.p-karte b{display:block;font-size:14px;margin-bottom:6px;color:#fff}
.p-karte p{font-size:10.5px;line-height:1.45;color:rgba(255,255,255,.7);margin:0 0 12px}
.p-feld{border-radius:10px;padding:10px 12px;font-size:11px;color:rgba(255,255,255,.5);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);margin-bottom:10px}
.p-knopf{border-radius:99px;padding:11px;text-align:center;font-size:11.5px;font-weight:700;color:#fff;background:#c8825a}
.p-fuss{font-size:9.5px;color:rgba(255,255,255,.5);margin:0}

/* Zwei Glaskarten am unteren Rand */
.glasleiste{position:absolute;left:22px;right:22px;bottom:26px;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:13px;align-items:stretch}
@media(max-width:1180px){ .glasleiste{grid-template-columns:1fr} }
.vertrauen{
  display:flex;align-items:flex-start;gap:13px;min-width:0;
  padding:16px 17px;border-radius:19px;color:#fff;
  background:rgba(16,26,44,.58);border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.vertrauen .v-ic{width:42px;height:42px;flex:none;border-radius:13px;display:grid;place-items:center;background:rgba(255,255,255,.18)}
.vertrauen .v-ic svg{width:21px;height:21px}
.vertrauen > span:last-child{min-width:0}
.vertrauen b{display:block;font-size:14.5px;font-weight:700;margin-bottom:3px}
.vertrauen span{font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.86)}
.stores{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.store{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;font-size:12px;font-weight:500;color:#fff;white-space:nowrap;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22)}
.store svg{width:13px;height:13px;flex:none}

/* ---------- Einblenden ---------- */
@keyframes lpAuf{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.lp .an{opacity:0;animation:lpAuf .55s cubic-bezier(.22,.61,.36,1) forwards}
.lp .an-2{animation-delay:.07s}.lp .an-3{animation-delay:.14s}
.lp .an-4{animation-delay:.21s}.lp .an-5{animation-delay:.28s}
@media(prefers-reduced-motion:reduce){
  .lp .an{animation:none;opacity:1}
  .lp-knopf:hover,.lp-zurueck:hover{transform:none}
  .o-back,.o-front,.o-glanz,.o-m,.o-lasche,.o-karte,.o-titel{transition:none}
  .o-lupe,.o-lupe-karte{animation:none}
}

/* ---------- Schmale Geräte ---------- */
@media(max-width:480px){
  .lp-form{padding:18px 16px 32px}
  .lp-kopf .logo .emblem{height:34px}
  .lp-kopf .logo .word b{font-size:16px}
  .lp-kopf .logo .word span{font-size:8px;letter-spacing:.3em}
  .lp-zurueck{padding:8px 13px;font-size:13.5px}
  .lp-zurueck .lang{display:none}
  .lp-mitte{padding:32px 0}
}