/* Anmeldeseite intern.infino.at: Tiefsee-Szene, Anmeldung links ohne Hintergrundplatte */
@font-face{font-family:"Montserrat";font-style:normal;font-display:swap;font-weight:100 900;
  src:url(/fonts/montserrat-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Montserrat";font-style:normal;font-display:swap;font-weight:100 900;
  src:url(/fonts/montserrat-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --tiefblau:#173454; --mint:#7CDFBF; --petrol:#0B77A9; --weiss:#fff;
  --see-tief:#020A1C; --see-text:#E6F1FA; --see-leise:#A9C3DA; --fehler:#FFB4AB;
  --feld:rgba(2,10,28,.55); --feld-rand:rgba(184,211,236,.35);
  --schrift:"Montserrat", Arial, system-ui, sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--see-tief);color:var(--see-text);font-family:var(--schrift);font-size:1rem;line-height:1.55;overflow:hidden}
:focus-visible{outline:3px solid var(--mint);outline-offset:3px;border-radius:8px}
[hidden]{display:none!important}
#see{position:fixed;inset:0;width:100%;height:100%;display:block}

.anmeldung{position:fixed;top:50%;left:max(24px, 8vw);width:min(420px, calc(100% - 48px));max-height:calc(100% - 32px);overflow-y:auto;
  transform:translateY(-50%);text-shadow:0 2px 18px rgba(2,10,28,.85);padding:4px}
.anmeldung .logo img{width:76px;height:68px;display:block;filter:drop-shadow(0 0 20px rgba(124,223,191,.4))}
.klein-titel{margin:20px 0 6px;font-size:.74rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--mint)}
.anmeldung h1{margin:0 0 10px;font-size:clamp(1.9rem,4vw,2.6rem);font-weight:800;letter-spacing:-.02em;line-height:1.1;text-wrap:balance}
.anmeldung p{margin:0 0 20px;color:var(--see-leise);max-width:36ch}

/* Schritte erscheinen nacheinander; beim Kommen von infino.at blendet nur der Text ein */
.schritt{animation:auf .5s ease both}
@keyframes auf{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

form{display:grid;gap:14px;max-width:360px}
label{display:grid;gap:6px;font-size:.88rem;font-weight:600;color:var(--see-leise)}
input{font:inherit;font-size:1rem;color:var(--see-text);background:var(--feld);border:1px solid var(--feld-rand);border-radius:12px;padding:12px 14px;text-shadow:none}
input:focus{border-color:var(--mint);outline:none;box-shadow:0 0 0 3px rgba(124,223,191,.25)}
input.code{font-variant-numeric:tabular-nums;letter-spacing:.35em;font-size:1.35rem;text-align:center;max-width:220px}
.knopf{justify-self:start;display:inline-flex;align-items:center;gap:10px;font:inherit;font-weight:600;font-size:1rem;color:var(--tiefblau);background:var(--weiss);
  border:0;border-radius:999px;padding:12px 26px;cursor:pointer;text-shadow:none;transition:box-shadow .3s, transform .2s}
.knopf:hover{box-shadow:0 0 0 6px rgba(124,223,191,.18), 0 0 30px rgba(124,223,191,.35);transform:translateY(-1px)}
.knopf[disabled]{opacity:.6;cursor:wait}
.meldung{min-height:1.4em;margin:2px 0 0;font-size:.9rem;font-weight:600;color:var(--fehler)}
.hinweis-klein{font-size:.85rem!important;margin:0!important}

.qr{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;margin:0 0 16px}
.qr img{width:168px;height:168px;background:#fff;border-radius:12px;padding:8px;image-rendering:pixelated}
.qr .schluessel{font-family:ui-monospace,Consolas,monospace;font-size:.85rem;word-break:break-all;color:var(--see-text);background:var(--feld);border-radius:8px;padding:8px 10px;display:block;margin-top:6px;user-select:all}
.qr div{flex:1;min-width:160px;font-size:.88rem;color:var(--see-leise)}

.logo-flug{position:fixed;left:0;top:0;z-index:5;pointer-events:none;filter:drop-shadow(0 0 20px rgba(124,223,191,.4))}

@media (max-width:560px){ .anmeldung{left:20px;width:calc(100% - 40px)} }
@media (prefers-reduced-motion:reduce){ .schritt{animation:none} .knopf{transition:none} }