:root{--bg:#efeee9;--ink:#26312d;--muted:#727972;--line:#d9dcd3;--green:#30493c;font-family:'Avenir Next',Avenir,'Helvetica Neue',sans-serif;color:var(--ink);font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;min-height:100svh;display:grid;place-items:center;padding:32px 20px;background:radial-gradient(1100px 620px at 8% -6%,#e2e8dc 0,transparent 62%),radial-gradient(900px 560px at 104% 108%,#eceadf 0,transparent 60%),var(--bg)}
.page{width:100%;max-width:376px;display:flex;flex-direction:column;align-items:center;gap:18px}

.card{width:100%;background:#fbfbf7;border:1px solid var(--line);border-radius:14px;padding:32px 30px 16px;box-shadow:0 20px 54px #26312d0f;text-align:center}
.collab{display:flex;align-items:center;justify-content:center;gap:13px}
.logo{display:flex;align-items:center;gap:9px}
.logo .mark{height:23px;width:auto;display:block}
.hauptwerk{color:var(--ink)}
.hauptwerk .word{height:14px;width:auto;display:block}
.midnite .full{height:22px;width:auto;display:block}
.midnite .mark{display:none}
.cross{color:#a5ac9f;font-size:14px}

.eyebrow{font-size:10px;letter-spacing:2.2px;text-transform:uppercase;color:#7d8778;margin:26px 0 0}
h1{font-size:30px;font-weight:500;letter-spacing:-1px;line-height:1.1;margin:9px 0 26px}

label{display:block;font-size:12px;color:#5f685e;margin-bottom:8px}
input,button{font:inherit;width:100%;border-radius:7px}
input{border:1px solid #cdd3c8;background:#fff;height:47px;padding:12px 14px;font-size:16px;color:var(--ink);text-align:center}
input:focus{outline:2px solid #718e76;outline-offset:1px}
button{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px;height:48px;padding:0 18px;background:var(--green);border:1px solid var(--green);color:#fff;font-size:14px;font-weight:500;cursor:pointer;transition:background .16s}
button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
button:hover{background:#253e30}
button:focus-visible{outline:2px solid #718e76;outline-offset:3px}
button:disabled{opacity:.6;cursor:wait}
/* Zwei Zeilen freihalten, sonst springt die zentrierte Maske bei einer Meldung. */
#unlock-status{min-height:30px;font-size:12px;line-height:1.5;margin:12px 0 0;color:#677662}
#unlock-status[data-error=true]{color:#94472c}

.note{margin:0;font-size:11px;color:#8b9285;text-align:center}

@media(max-width:430px){
 body{padding:24px 16px}
 .card{padding:26px 22px 14px}
 h1{font-size:27px}
}
/* Nur auf sehr schmalen Geraeten passt das volle Logopaar nicht mehr in die Karte. */
@media(max-width:359px){
 .hauptwerk .word{display:none}
 .midnite .full{display:none}
 .midnite .mark{display:block}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}