/* POS-Assistant Anmeldung 2026
   Uebernommen aus pos-login-2026.html. Die Farbtokens liegen zentral in
   design-system.css; hier stehen nur die Komponentenregeln der Anmeldeseite.
   Die globalen body-Regeln der Vorlage sind auf #authOverlay umgehaengt, damit
   das Portal dahinter unberuehrt bleibt. Die Modal-Klassen sind mit authLegal
   praefixt, weil .modal unter body[data-pos-surface] bereits belegt ist. */

/* ============================================================
   POS-Assistant Anmeldung
   Signatur: Sechs-Segment-Ring. Er ist Bildmarke, Abbild des
   Kreislaufs und Fortschrittsanzeige der Anmeldung zugleich.
   ============================================================ */



#authOverlay,#authOverlay *{box-sizing:border-box;}


#authOverlay{
  position:fixed;inset:0;overflow-y:auto;z-index:9999;
  /* Die bestehende .authOverlay-Klasse zentriert per align-items:center. Bei Inhalt,
     der hoeher ist als das Fenster, laeuft dadurch der Kopfbereich nach oben aus dem
     Scrollbereich heraus und ist nicht mehr erreichbar. Deshalb hier ueberschrieben. */
  align-items:stretch;justify-content:flex-start;

  margin:0;
  font-family:var(--ds-font);
  font-size:var(--ds-step-3);
  line-height:1.55;
  color:var(--ds-ink);
  background:var(--ds-canvas);
  display:flex;flex-direction:column;min-height:100vh;
  overflow-x:hidden;
}
/* Sehr zurueckhaltender Lichtverlauf. Keine Farbwolken. */
#authOverlay::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(120% 70% at 50% -10%, rgba(91,157,255,.10), transparent 62%);
}
body[data-theme="light"] #authOverlay::before{
  background:radial-gradient(120% 70% at 50% -10%, rgba(37,99,235,.09), transparent 62%);
}
#authOverlay > *{position:relative;z-index:1;}

button,input{font:inherit;color:inherit;}
a{color:inherit;text-decoration:none;}
:focus-visible{outline:2px solid var(--ds-focus);outline-offset:3px;border-radius:6px;}

/* ===================== Kopfzeile ===================== */
.bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:min(1180px,100%);margin:0 auto;
  padding:20px 28px;
  flex:0 0 auto;
}
.barId{
  display:flex;align-items:center;gap:9px;
  font-size:var(--ds-step-1);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ds-ink-3);
}
.barDot{
  width:6px;height:6px;border-radius:50%;
  background:var(--ds-accent);flex:0 0 auto;
}
.ghost{
  border:1px solid var(--ds-line);
  background:transparent;
  color:var(--ds-ink-2);
  height:36px;padding:0 14px;border-radius:999px;
  font-size:var(--ds-step-1);font-weight:600;
  cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  transition:border-color .18s ease, color .18s ease, background .18s ease;
}
.ghost:hover{border-color:var(--ds-ink-3);color:var(--ds-ink);background:var(--ds-surface-2);}
.ghost svg{width:14px;height:14px;}

/* ===================== Buehne ===================== */
.stage{
  flex:1 1 auto;
  width:min(1180px,100%);margin:0 auto;
  padding:calc(var(--ds-sp) * 3) 28px calc(var(--ds-sp) * 6);
  display:flex;flex-direction:column;align-items:center;
}

/* ===================== Signatur: Ring ===================== */
.markWrap{
  display:grid;place-items:center;
  width:112px;height:112px;
  margin-bottom:calc(var(--ds-sp) * 3);
}
.mark{width:112px;height:112px;grid-area:1/1;overflow:visible;}
/* Sechs Boegen, aufsteigend heller: der Kreislauf gewinnt an Wirkung,
   der letzte Bogen schliesst ihn und ist voll deckend. */
.markSeg{
  fill:none;
  stroke:var(--ds-accent);
  stroke-width:3.5;
  stroke-linecap:round;
  transform-origin:50% 50%;
  transform:rotate(-90deg);
  opacity:0;
  --o:.32;
  animation:segIn .42s cubic-bezier(.2,.75,.35,1) forwards;
}
@keyframes segIn{from{opacity:0;}to{opacity:var(--o);}}
.markSeg:nth-child(1){--o:.18;animation-delay:.05s;}
.markSeg:nth-child(2){--o:.32;animation-delay:.13s;}
.markSeg:nth-child(3){--o:.46;animation-delay:.21s;}
.markSeg:nth-child(4){--o:.62;animation-delay:.29s;}
.markSeg:nth-child(5){--o:.80;animation-delay:.37s;}
.markSeg:nth-child(6){--o:1;animation-delay:.45s;}

/* Fortschrittsbogen waehrend der Anmeldung */
.markRun{
  fill:none;stroke:var(--ds-accent);stroke-width:3.5;stroke-linecap:round;
  transform-origin:50% 50%;transform:rotate(-90deg);
  stroke-dasharray:70 213;
  stroke-dashoffset:0;
  opacity:0;
}
body.isChecking .markRun{opacity:1;animation:runRing 1.05s linear infinite;}
body.isChecking .markSeg{opacity:.14 !important;transition:opacity .2s ease;}
@keyframes runRing{to{stroke-dashoffset:-283;}}

.markCore{
  grid-area:1/1;
  font-size:var(--ds-step-5);font-weight:700;letter-spacing:-.03em;
  color:var(--ds-ink);
}

/* ===================== Titel ===================== */
.lede{text-align:center;margin-bottom:calc(var(--ds-sp) * 4);}
.wordmark{
  margin:0;
  font-size:var(--ds-step-6);
  font-weight:700;letter-spacing:-.035em;line-height:1.05;
}
.claim{
  margin:calc(var(--ds-sp) * 1.25) 0 0;
  color:var(--ds-ink-3);
  font-size:var(--ds-step-3);
}

/* ===================== Anmeldung ===================== */
.auth{width:min(380px,100%);}
.authForm{display:grid;gap:calc(var(--ds-sp) * 1.5);min-width:0;}
.authForm > *{min-width:0;}

.authErr{
  display:none;
  border:1px solid var(--ds-danger-line);
  background:var(--ds-danger-bg);
  color:var(--ds-danger);
  border-radius:var(--ds-radius);
  padding:10px 13px;
  font-size:var(--ds-step-2);
}
.authErr.show{display:block;}

.authLabel{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-size:var(--ds-step-1);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ds-ink-3);
}
.authField{position:relative;display:flex;min-width:0;}
.authInput{
  flex:1;min-width:0;
  height:58px;
  border:1px solid var(--ds-line);
  border-radius:var(--ds-radius);
  background:var(--ds-surface);
  color:var(--ds-ink);
  padding:0 82px 0 16px;
  font-family:var(--ds-font-mono);
  font-size:17px;
  letter-spacing:.34em;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.authInput::placeholder{color:var(--ds-ink-3);letter-spacing:.1em;font-family:var(--ds-font);}
.authInput:hover{border-color:var(--ds-ink-3);}
.authInput:focus{
  outline:none;
  border-color:var(--ds-accent);
  box-shadow:0 0 0 3px var(--ds-accent-ring);
}
.authPeek{
  position:absolute;right:7px;top:50%;transform:translateY(-50%);
  height:42px;padding:0 13px;border:0;border-radius:10px;
  background:transparent;color:var(--ds-ink-3);
  font-size:var(--ds-step-2);font-weight:600;cursor:pointer;
}
.authPeek:hover{color:var(--ds-ink);background:var(--ds-surface-2);}

.authCaps{margin:0;font-size:var(--ds-step-2);color:#E0A83C;}
.authCaps:empty{display:none;}   /* keine Luecke, solange kein Hinweis noetig ist */
body[data-theme="light"] .authCaps{color:#9A6400;}

.authBtn{
  height:54px;border:0;border-radius:var(--ds-radius);
  background:var(--ds-accent-2);
  color:var(--ds-accent-ink);
  font-size:var(--ds-step-3);font-weight:650;letter-spacing:-.01em;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:10px;
  transition:background .18s ease, transform .07s ease, opacity .18s ease;
}
.authBtn:hover{background:var(--ds-accent);}
.authBtn:active{transform:translateY(1px);}
.authBtn[disabled]{opacity:.55;cursor:progress;}
.authBtn svg{width:15px;height:15px;}

.authMeta{
  margin:calc(var(--ds-sp) * 0.5) 0 0;
  font-size:var(--ds-step-2);color:var(--ds-ink-3);line-height:1.6;text-align:center;
}

/* ===================== Trennlinie ===================== */
.rule{
  width:100%;max-width:1000px;
  height:1px;background:var(--ds-line-soft);
  margin:calc(var(--ds-sp) * 7) 0 calc(var(--ds-sp) * 5);
  border:0;
}

/* ===================== Bereiche als Register ===================== */
.scope{width:100%;max-width:1000px;}
.scopeHead{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  margin:0 0 calc(var(--ds-sp) * 3);
}
.scopeHead h2{
  margin:0;font-size:var(--ds-step-4);font-weight:650;letter-spacing:-.02em;
}
.scopeHead span{font-size:var(--ds-step-2);color:var(--ds-ink-3);}

.row{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:6px 28px;
  padding:calc(var(--ds-sp) * 2.25) 0;
  border-top:1px solid var(--ds-line-soft);
  align-items:start;
}
.row:last-of-type{border-bottom:1px solid var(--ds-line-soft);}
.rowName{
  font-size:var(--ds-step-3);font-weight:650;letter-spacing:-.01em;
  display:flex;align-items:center;gap:10px;
}
.rowTick{
  width:7px;height:7px;border-radius:50%;flex:0 0 auto;
  background:var(--ds-accent);opacity:.85;
}
.rowBody{min-width:0;}
.rowLead{margin:0 0 7px;color:var(--ds-ink-2);font-size:var(--ds-step-2);}
.rowList{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:6px 8px;
}
.rowList li{
  font-size:var(--ds-step-1);color:var(--ds-ink-3);
  border:1px solid var(--ds-line);
  border-radius:999px;padding:4px 11px;
  background:var(--ds-surface-2);
  max-width:100%;
}

/* ===================== Kreislauf ===================== */
.cycle{width:100%;max-width:1000px;margin-top:calc(var(--ds-sp) * 6);}
.cycleHead{
  margin:0 0 calc(var(--ds-sp) * 2.5);
  font-size:var(--ds-step-1);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ds-ink-3);
}
.cycleFlow{position:relative;}
.cycleSteps{display:flex;flex-wrap:nowrap;align-items:flex-start;gap:0;}
.cycleStep{
  flex:1 1 0;min-width:0;
  display:flex;align-items:flex-start;gap:9px;
  font-size:var(--ds-step-1);font-weight:600;line-height:1.4;
  color:var(--ds-ink-2);
  padding-right:24px;
}
.cycleStep .cycleNum{margin-top:-1px;}
.cycleNum{
  width:22px;height:22px;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;
  border:1px solid var(--ds-line);
  background:var(--ds-surface);
  font-family:var(--ds-font-mono);font-size:10px;font-weight:500;
  color:var(--ds-ink-3);
}
.cycleStep:last-child .cycleNum{
  border-color:var(--ds-accent);color:var(--ds-accent);
}
.cycleLoop{
  position:relative;height:16px;
  margin:12px 11px 0;
  border:1px dashed var(--ds-line);
  border-top:none;
  border-radius:0 0 14px 14px;
}
.cycleLoop::before{
  content:"";position:absolute;
  left:-5px;top:-1px;width:0;height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-bottom:7px solid var(--ds-ink-3);
  border-top:none;
}
.cycleNote{
  margin:calc(var(--ds-sp) * 2.5) 0 0;
  font-size:var(--ds-step-2);color:var(--ds-ink-3);line-height:1.7;
}
.cycleNote b{color:var(--ds-ink-2);font-weight:650;}

/* ===================== Fusszeile ===================== */
.foot{
  flex:0 0 auto;
  width:min(1180px,100%);margin:0 auto;
  padding:0 28px calc(var(--ds-sp) * 4);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:8px 20px;
  font-size:var(--ds-step-1);color:var(--ds-ink-3);
  border-top:1px solid var(--ds-line-soft);
  padding-top:calc(var(--ds-sp) * 2.5);
}
.footLinks{display:flex;gap:16px;}
.footLinks a{border-bottom:1px solid transparent;transition:color .18s ease,border-color .18s ease;}
.footLinks a:hover{color:var(--ds-ink);border-bottom-color:var(--ds-line);}

/* ===================== Schmale Ansichten ===================== */
@media (max-width:900px){
  .cycleSteps{flex-direction:column;align-items:stretch;gap:5px;}
  .cycleFlow{max-width:420px;padding-left:26px;}
  .cycleStep{padding:5px 0;align-items:center;font-size:var(--ds-step-2);}
  .cycleLoop{
    position:absolute;left:0;top:17px;bottom:17px;
    width:18px;height:auto;margin:0;
    border:1px dashed var(--ds-line);
    border-right:none;
    border-radius:12px 0 0 12px;
  }
  .cycleLoop::before{
    left:auto;right:-1px;top:-4px;
    border-left:7px solid var(--ds-ink-3);
    border-top:5px solid transparent;
    border-bottom:5px solid transparent;
    border-right:none;
  }
}

@media (max-width:720px){
  .row{grid-template-columns:1fr;gap:8px;}
}

@media (max-width:560px){
  :root{--ds-step-6:30px;--ds-step-5:22px;}
  .bar{padding:16px 18px;}
  .stage{padding:8px 18px 40px;}
  .foot{padding-left:18px;padding-right:18px;justify-content:center;text-align:center;}
  .markWrap,.mark{width:92px;height:92px;}
  .rule{margin:40px 0 30px;}
  .ghost span{display:none;}
  .ghost{padding:0 11px;}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;}
  .markSeg{opacity:var(--o);}
  .markRun{display:none;}
}

/* ============================================================
   Rechtliches-Modal, uebernommen aus pos-assistant-landing.
   Nur die Farben laufen jetzt ueber die Tokens oben.
   ============================================================ */
body.authLegalOpen{overflow:hidden}
.authLegal{position:fixed;inset:0;z-index:10000;display:none;}
.authLegal.open{display:block}
.authLegalBackdrop{
  position:absolute;inset:0;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
}
body[data-theme="light"] .authLegalBackdrop{background:rgba(12,20,33,.42);}
.authLegalShell{
  position:relative;height:100%;
  display:flex;align-items:flex-start;justify-content:center;
  padding:64px 16px 22px;overflow:hidden;overscroll-behavior:contain;
}
.authLegalPanel{
  width:100%;max-width:1040px;height:min(82vh,860px);
  background:var(--ds-surface);
  border:1px solid var(--ds-line);
  border-radius:var(--ds-radius-lg);
  box-shadow:0 50px 130px rgba(0,0,0,.55);
  overflow:hidden;display:flex;flex-direction:column;
  transform:translateY(8px);opacity:0;
  animation:authLegalIn .18s ease-out forwards;
}
@keyframes authLegalIn{to{transform:translateY(0);opacity:1}}
.authLegalHead{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 16px 14px;
  border-bottom:1px solid var(--ds-line-soft);
  background:var(--ds-surface);
}
.authLegalHeadLeft{display:flex;flex-direction:column;gap:3px;}
.authLegalTitle{
  margin:0;font-size:var(--ds-step-1);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ds-ink-3);
}
.authLegalSubtitle{margin:0;font-size:var(--ds-step-2);color:var(--ds-ink-2);}
.authLegalClose{
  width:40px;height:40px;border-radius:999px;
  border:1px solid var(--ds-line);
  background:transparent;color:var(--ds-ink-2);cursor:pointer;
  display:grid;place-items:center;font-weight:600;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.authLegalClose:hover{background:var(--ds-surface-2);border-color:var(--ds-ink-3);color:var(--ds-ink);}
.authLegalBody{display:grid;grid-template-columns:250px 1fr;height:100%;min-height:0;}
.authLegalSidebar{
  border-right:1px solid var(--ds-line-soft);
  background:var(--ds-surface-2);
  padding:12px;overflow:auto;-webkit-overflow-scrolling:touch;
}
.authLegalNavGroup{display:flex;flex-direction:column;gap:6px;}
.authLegalNav{
  color:var(--ds-ink-2);
  border:1px solid transparent;
  border-radius:12px;padding:11px 12px;
  font-weight:650;font-size:var(--ds-step-2);
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.authLegalNav small{
  display:block;margin-top:3px;font-size:var(--ds-step-1);
  color:var(--ds-ink-3);font-weight:500;line-height:1.35;
}
.authLegalNav:hover{background:var(--ds-surface);border-color:var(--ds-line);color:var(--ds-ink);}
.authLegalNav.active{background:var(--ds-surface);border-color:var(--ds-accent);color:var(--ds-ink);}
.authLegalContent{padding:22px 24px 26px;overflow:auto;-webkit-overflow-scrolling:touch;}
.authLegalPage{display:none}
.authLegalPage.active{display:block}
.authLegalH2{margin:0 0 6px;font-size:var(--ds-step-4);font-weight:650;letter-spacing:-.02em;}
.authLegalMeta{margin:0 0 16px;font-size:var(--ds-step-2);color:var(--ds-ink-3);line-height:1.4}
.authLegalContent p,.authLegalContent li{color:var(--ds-ink-2);font-size:var(--ds-step-2);line-height:1.8;margin:10px 0;}
.authLegalContent ul{margin:10px 0 0 18px}
.authLegalContent a{color:var(--ds-accent);}
.authLegalContent a:hover{text-decoration:underline;}
.authLegalCallout{
  margin:14px 0;padding:12px 14px;border-radius:var(--ds-radius);
  border:1px solid var(--ds-line);background:var(--ds-surface-2);color:var(--ds-ink-2);
}
.authLegalCallout strong{color:var(--ds-ink)}
.authLegalHr{height:1px;background:var(--ds-line-soft);margin:18px 0}

@media (max-width:700px){
  .authLegalShell{padding:0}
  .authLegalPanel{max-width:none;width:100%;height:100svh;height:100dvh;border-radius:0;}
  .authLegalHead{position:sticky;top:0;z-index:6;padding-top:calc(16px + env(safe-area-inset-top));}
  .authLegalBody{grid-template-columns:1fr}
  .authLegalSidebar{border-right:none;border-bottom:1px solid var(--ds-line-soft);padding:10px;}
  .authLegalNavGroup{flex-direction:row;gap:8px;}
  .authLegalNav{flex:1 1 auto;text-align:center;padding:9px;border-radius:999px;border-color:var(--ds-line);}
  .authLegalNav small{display:none}
  .authLegalContent{padding:16px 16px calc(20px + env(safe-area-inset-bottom));}
}