/* PokerCTRL Public PWA – Login-Designvorschau v1.1.1
   Keine produktive Anmeldung / keine Serverkommunikation.
   Design basiert auf dem PokerCTRL-Logo und Gold #C9A25D. */
:root{color-scheme:dark;--black:#080808;--gold:#c9a25d;--gold-hi:#eed2a0;--stroke:rgba(201,162,93,.31);--text:#f3ece1;--muted:#b8b2ab;--card:rgba(10,10,10,.71)}
*{box-sizing:border-box}
html{min-height:100%;background:#080808}
body{margin:0;min-height:100vh;min-height:100dvh;background:#080808;color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
button,select,input{font:inherit}
button{cursor:pointer}
button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
.scene{position:fixed;inset:0;z-index:0;background-image:linear-gradient(90deg,rgba(3,3,3,.45),rgba(3,3,3,.18)),url('../assets/branding/backgrounds/desktop.webp');background-repeat:no-repeat;background-position:center center;background-size:cover;transform:translateZ(0)}
.scene::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.38) 0%,rgba(0,0,0,.10) 34%,rgba(0,0,0,.36) 100%)}
.layout{position:relative;z-index:1;width:min(100%,1160px);margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(18px,3.5vh,34px) 18px max(14px,env(safe-area-inset-bottom))}
.brand-area{text-align:center;margin-bottom:12px}
.brand-logo{display:block;width:clamp(168px,22vw,250px);height:auto;margin:0 auto;filter:drop-shadow(0 6px 22px rgba(0,0,0,.6))}
.brand-caption{display:flex;gap:12px;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#e9d7b8;white-space:nowrap;margin-top:-2px}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--gold));width:25px}
.rule:last-child{transform:rotate(180deg)}
.login-card{width:min(100%,430px);margin:22px auto 12px;padding:23px 28px 19px;background:var(--card);border:1px solid var(--stroke);border-radius:19px;box-shadow:0 28px 80px rgba(0,0,0,.66),inset 0 1px 0 rgba(255,245,221,.09);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.eyebrow{display:flex;align-items:center;gap:9px;font-size:9px;color:var(--gold-hi);font-weight:700}
.gold-dot{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px var(--gold)}
.eyebrow-number{margin-left:auto;color:#857760;}
h1{font-size:clamp(25px,4.2vw,32px);font-weight:600;line-height:1.2;margin:15px 0 8px}h1 em{font-style:normal;color:var(--gold-hi)}
.lead{font-size:12px;margin:0;color:#bdb6aa;line-height:1.6}
.thin-rule{height:1px;margin:19px 0 18px;background:linear-gradient(90deg,var(--stroke),transparent)}
.field-label{display:block;color:#d3bd94;font-size:9px;font-weight:700;margin-bottom:9px}
.select-wrap{position:relative;display:flex;align-items:center;height:44px;border:1px solid rgba(224,198,149,.24);background:rgba(255,255,255,.03);border-radius:9px;transition:border-color .2s}
.select-wrap:focus-within{border-color:var(--gold)}
.user-icon{width:19px;height:19px;margin:0 11px 0 13px;color:var(--gold);flex-shrink:0}
.select-wrap select{height:100%;width:100%;border:0;color:#efe5d3;background:transparent;appearance:none;outline:none;font-size:13px;cursor:pointer}
.select-wrap option{background:#151515;color:#fff}
.chevron{width:8px;height:8px;border-right:1px solid #c9a25d;border-bottom:1px solid #c9a25d;transform:rotate(45deg);margin-right:15px;pointer-events:none}
.passkey-btn{width:100%;display:flex;align-items:center;gap:13px;border:1px solid rgba(232,198,135,.65);border-radius:10px;background:linear-gradient(120deg,#d7af68,#b98e4b 54%,#f0cf94);color:#120f0b;padding:12px 15px;text-align:left;margin-top:13px;box-shadow:0 6px 15px rgba(0,0,0,.3);transition:transform .15s,filter .15s}
.passkey-btn:hover{filter:brightness(1.07)}.passkey-btn:active{transform:scale(.99)}
.passkey-btn svg{width:26px;height:26px;flex-shrink:0}.passkey-btn span{font-size:13px;font-weight:750}.passkey-btn small{display:block;font-size:10px;font-weight:500;opacity:.72;margin-top:3px}.passkey-arrow{margin-left:auto;font-size:19px!important;font-weight:400!important}
.or{display:flex;gap:13px;align-items:center;margin:20px 0 15px;color:#958b7e}.or span{height:1px;flex:1;background:rgba(235,224,200,.15)}.or small{font-size:9px;white-space:nowrap}
.pin-head{display:flex;justify-content:space-between;align-items:center}.clear-pin{font-size:10px;background:none;color:var(--muted);border:0;padding:3px 0}
.pin-dots{display:flex;justify-content:center;gap:20px;margin:6px 0 17px}.pin-dots i{width:11px;height:11px;border:1.3px solid var(--gold);border-radius:100%;background:transparent;transition:background .1s}.pin-dots i.filled{background:var(--gold);box-shadow:0 0 12px rgba(201,162,93,.5)}
.pin-entry{position:relative}.pin-entry input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.keypad{max-width:235px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 auto}
.keypad button{display:grid;place-items:center;width:61px;height:47px;margin:auto;background:rgba(255,255,255,.025);border:1px solid rgba(201,162,93,.16);border-radius:9px;color:#eee0c6;font-size:19px;font-weight:400;transition:background .15s,border-color .15s}
.keypad button:hover{background:rgba(201,162,93,.16);border-color:var(--gold)}.keypad button:active{background:rgba(201,162,93,.3)}
.forgot{border:0;background:none;color:#c7ac77;display:block;margin:16px auto 0;padding:3px 8px;font-size:11px}
.demo-label{font-size:8px;color:#a69a88;text-align:center;margin:18px 0 0;border-top:1px solid rgba(255,255,255,.09);padding-top:12px}
.sr-status:empty{display:none}.sr-status{margin-top:10px;font-size:11px;color:#e8d8b9;text-align:center;line-height:1.4}
.footer{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#bcac92;text-align:center;text-shadow:0 2px 8px #000;margin-top:5px}.footer span{color:var(--gold);margin:0 6px}
/* Mobile portrait */
@media (orientation:portrait) and (max-width:649px){.scene{background-image:linear-gradient(180deg,rgba(0,0,0,.17),rgba(0,0,0,.30)),url('../assets/branding/backgrounds/mobile.webp');background-position:center center}.layout{justify-content:flex-start;padding-top:max(10px,env(safe-area-inset-top))}.brand-logo{width:171px}.brand-caption{font-size:8px}.login-card{margin-top:10px;margin-bottom:10px;padding:16px 20px 12px;border-radius:16px;background:rgba(7,7,7,.65)}h1{font-size:26px;margin:9px 0 4px}.thin-rule{margin:12px 0}.keypad{width:100%;max-width:282px;gap:8px}.keypad button{width:100%;min-width:0;height:56px;font-size:23px;border-radius:12px;background:rgba(255,255,255,.04)}.or{margin:12px 0 10px}.pin-dots{margin:2px 0 10px}.passkey-btn{padding:10px 12px}.demo-label{margin-top:12px}.footer{font-size:8px}.lead{font-size:11px}}
/* Kleinere Smartphones: groessere, dennoch gut erreichbare PIN-Tasten.
   Auf kurzen Displays ist die Seite bei Bedarf scrollbar, statt Inhalte abzuschneiden. */
@media (orientation:portrait) and (max-width:649px) and (max-height:740px){.keypad button{height:49px;font-size:21px}.keypad{gap:6px}.login-card{padding-top:13px;padding-bottom:11px}.brand-logo{width:150px}.forgot{margin-top:12px}.demo-label{margin-top:9px}}
/* Mittlere Smartphone-Hoehen: kompakteres Branding statt unnötigem Miniscroll. */
@media (orientation:portrait) and (max-width:649px) and (min-height:741px) and (max-height:900px){.brand-logo{width:156px}.brand-area{margin-bottom:8px}.login-card{margin-top:8px}}
/* Tall devices and portrait tablets */
@media (orientation:portrait) and (min-width:650px){.scene{background-image:linear-gradient(90deg,rgba(0,0,0,.35),rgba(0,0,0,.24)),url('../assets/branding/backgrounds/tablet-portrait.webp')}.login-card{width:min(86vw,460px)}}
/* Landscape tablets */
@media (orientation:landscape) and (min-width:650px) and (max-width:1199px){.scene{background-image:linear-gradient(90deg,rgba(0,0,0,.43),rgba(0,0,0,.23)),url('../assets/branding/backgrounds/tablet-landscape.webp')}.layout{justify-content:center}.brand-logo{width:190px}.brand-area{margin-bottom:4px}.login-card{margin-top:7px;padding:15px 22px}.thin-rule{margin:12px 0}.keypad button{height:38px}.pin-dots{margin:3px 0 9px}.or{margin:12px 0 10px}.demo-label{margin-top:10px;padding-top:8px}}
@media (orientation:landscape) and (min-width:1200px) and (max-height:1050px){.brand-logo{width:175px}.brand-area{margin-bottom:3px}.login-card{margin:6px auto 8px;padding:15px 23px 12px}.login-card h1{font-size:26px;margin:8px 0 5px}.lead{font-size:11px}.thin-rule{margin:11px 0}.passkey-btn{padding:8px 12px;margin-top:9px}.or{margin:10px 0 8px}.pin-dots{margin:2px 0 8px}.keypad button{height:37px}.forgot{margin-top:9px}.demo-label{margin-top:9px;padding-top:8px}}
@media (orientation:landscape) and (min-width:650px) and (max-width:1199px) and (min-height:751px) and (max-height:850px){.brand-logo{width:175px}.login-card{margin:4px auto 6px}.footer{margin-top:0}}
@media (max-height:750px) and (orientation:landscape){.layout{padding-top:10px}.brand-logo{width:110px}.brand-caption{font-size:7px}.login-card{margin-top:5px;padding:10px 18px}.login-card h1{font-size:19px;margin:5px 0}.lead{font-size:10px}.thin-rule{margin:7px 0}.passkey-btn{padding:6px 10px;margin-top:7px}.or{margin:8px 0 5px}.keypad button{height:32px;font-size:15px}.pin-dots{margin:0 0 5px}.forgot{margin-top:6px}.demo-label{margin-top:8px;padding-top:5px}.footer{font-size:7px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}

/* v1.1.1 – Touch/Zoom-Fix
   Doppeltipp-Zoom deaktivieren, normales Scrollen und bewusstes
   Vergrößern mit zwei Fingern (Barrierefreiheit) beibehalten.
   Keine JS-Touch-Sperren: PIN-Buttons und spätere Chat-Gesten bleiben bedienbar. */
html, body, .layout, .login-card, button, select, input {
  touch-action: manipulation;
}

/* iOS Safari: kein ungewollter Fokus-Zoom bei kleinen Select-Schriften.
   Das versteckte PIN-Feld bleibt ebenfalls bei >= 16 px. */
@media (hover: none) and (pointer: coarse) {
  .select-wrap select,
  .pin-entry input {
    font-size: 16px;
  }
}