/* PLAN&LOS Cockpit – Anmeldeseite im App-Design (27.10.2026, Notiz ANMELDESEITE-REELS-27-10).
   Nur Aussehen: Formulare, Passkey-Knopf und Ablauf sind unverändert (ui.php / app.js).
   Handy eine Spalte, ab 700 px links Pflaume-Fläche + rechts Karte, ab 1920 px bleibt alles mittig in max. 1240 px. */
@font-face{font-family:Anton;src:url(fonts/anton-400.woff2) format("woff2");font-display:swap}
@font-face{font-family:Outfit;src:url(fonts/outfit-var.woff2) format("woff2");font-weight:100 900;font-display:swap}
body.aussen{--an-plum:#2b1526;--an-mag:#b0306f;--an-bg:#f3f0f5;--an-card:#fff;--an-ink:#1b1420;--an-ink2:#6a6072;--an-line:#e6e0ec;--an-feld:#f6f3f8;
  background:var(--an-bg)!important;color:var(--an-ink);font-family:system-ui,-apple-system,"SF Pro Text","Segoe UI",sans-serif;display:flex!important;flex-direction:column;min-height:100svh;place-items:initial}
@media (prefers-color-scheme:dark){body.aussen{--an-bg:#0f0c13;--an-card:#19151e;--an-ink:#f3eef7;--an-ink2:#b3a9bd;--an-line:#2c2533;--an-feld:#221c28;--an-mag:#e0559a}}
body.aussen .flug{display:none}
body.aussen .auth{flex:1;width:100%;max-width:1240px;margin:0 auto;padding:max(28px,env(safe-area-inset-top)) 16px 20px;display:flex;flex-direction:column;justify-content:center}
body.aussen .an-seite{display:none}
body.aussen .auth-box{width:100%;max-width:420px;margin:0 auto;background:var(--an-card);color:var(--an-ink);border:1px solid var(--an-line);border-radius:24px;padding:30px 24px 26px;box-shadow:0 2px 6px rgba(43,21,38,.05),0 24px 60px rgba(43,21,38,.10);text-align:left}
body.aussen .auth-logo{width:64px;height:64px;border-radius:17px;box-shadow:0 10px 26px rgba(176,48,111,.28)}
body.aussen .auth h1{margin:18px 0 4px;font:800 32px/1.05 system-ui,-apple-system,"SF Pro Display","Segoe UI",sans-serif;letter-spacing:-.035em;color:var(--an-ink)}
body.aussen .auth h1 span{color:var(--an-mag)}
body.aussen .an-unter{margin:0 0 22px;color:var(--an-ink2);font-size:15px}
body.aussen .leise{color:var(--an-ink2)}
body.aussen .msg{border-radius:12px;padding:12px 14px;margin:0 0 16px;font-size:15px;text-align:left}
body.aussen .msg.fehler{background:rgba(176,48,111,.10);color:var(--an-mag)}
body.aussen .stack{display:grid;gap:14px;margin-top:6px}
body.aussen label{display:grid;gap:6px;font:600 14px system-ui,-apple-system,sans-serif;color:var(--an-ink2)}
body.aussen input:not([type=checkbox]){width:100%;box-sizing:border-box;min-height:52px;border-radius:14px;border:1px solid var(--an-line);background:var(--an-feld);color:var(--an-ink);padding:0 14px;font:500 17px system-ui,-apple-system,sans-serif;outline:none;transition:border-color .2s,box-shadow .2s}
body.aussen input:focus{border-color:var(--an-mag);box-shadow:0 0 0 4px rgba(176,48,111,.14);background:var(--an-card)}
body.aussen input.code{text-align:center;letter-spacing:.3em;font-size:24px}
body.aussen label.check{display:flex;align-items:center;gap:10px;font-weight:500;color:var(--an-ink2)}
body.aussen label.check input{width:20px;height:20px;accent-color:var(--an-mag)}
body.aussen .btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:54px;border:0;border-radius:15px;background:var(--an-mag);color:#fff;font:600 17px system-ui,-apple-system,sans-serif;cursor:pointer;box-shadow:0 10px 24px rgba(176,48,111,.25);transition:transform .1s,filter .2s}
body.aussen .btn:hover{filter:brightness(1.07)}body.aussen .btn:active{transform:scale(.985)}
body.aussen .btn.face{background:var(--an-plum)}
@media (prefers-color-scheme:dark){body.aussen .btn.face{background:#3a1f33}}
body.aussen .pwlogin{margin-top:18px}
body.aussen .pwlogin summary{color:var(--an-ink2);font-weight:600;text-align:center;padding:8px;border-radius:10px}
body.aussen .pwlogin[open] summary{margin-bottom:8px}
body.aussen .pk-fehler{color:var(--an-mag);font-size:14px;margin:10px 0 0}
body.aussen .fuss{color:var(--an-ink2);font-size:12.5px;padding:14px 16px calc(14px + env(safe-area-inset-bottom))}
/* Tastatur am Handy: Felder bleiben sichtbar */
body.aussen input{scroll-margin:120px}

/* Ab 700 px: links Pflaume, rechts Karte */
@media (min-width:700px){
  body.aussen .auth{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,440px);gap:0;align-items:stretch;padding:40px 32px;max-height:calc(100svh - 70px);min-height:min(680px,calc(100svh - 70px))}
  body.aussen .an-seite{display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;background:var(--an-plum);color:#fff;border-radius:28px 0 0 28px;padding:36px 36px 0}
  body.aussen .an-seite::before{content:"";position:absolute;right:-120px;bottom:-140px;width:420px;height:420px;border-radius:50%;background:radial-gradient(closest-side,rgba(224,51,143,.45),transparent)}
  body.aussen .an-logo{width:170px;background:#fff;border-radius:12px;padding:8px 12px;align-self:flex-start;position:relative}
  body.aussen .an-seite b{display:block;font:800 clamp(48px,6vw,92px)/.95 system-ui,-apple-system,"SF Pro Display","Segoe UI",sans-serif;letter-spacing:-.045em;position:relative}
  body.aussen .an-seite p{margin:14px 0 0;font-size:18px;color:rgba(255,255,255,.75);max-width:360px;position:relative}
  body.aussen .an-birdy{width:150px;height:auto;align-self:flex-end;margin-right:20px;position:relative;filter:drop-shadow(0 14px 22px rgba(0,0,0,.35))}
  body.aussen .auth-box{max-width:none;margin:0;border-radius:0 28px 28px 0;border-left:0;display:flex;flex-direction:column;justify-content:center;padding:44px 40px}
  body.aussen .auth-box .auth-logo{display:none}
  body.aussen .auth h1{margin-top:0}
}
@media (min-width:700px) and (max-width:899px){body.aussen .an-birdy{width:110px}body.aussen .an-seite{padding:28px 26px 0}}
@media (min-width:1400px){body.aussen .auth{grid-template-columns:minmax(0,1fr) 460px}}
@media (prefers-reduced-motion:no-preference){body.aussen .an-birdy{animation:an-wippen 3.6s ease-in-out infinite alternate}@keyframes an-wippen{to{transform:translateY(-8px) rotate(-2deg)}}}
@media (min-width:700px){body.aussen .auth{flex:0 0 auto;margin:auto;height:min(760px,calc(100svh - 110px));min-height:600px;max-height:none;width:100%}}
@media (min-width:1600px){body.aussen .auth{max-width:1200px}}