/* Brand Palace: Code-Eingabe als Kartendeck (2FA). Gehört zu assets/js/code-deck.js.

   Die Regeln greifen nur an Elementen, die das Skript erzeugt (.bpc …). Ohne Skript bleibt das
   normale Eingabefeld stehen. Ziffern und Haken sind im Ruhezustand sichtbar, Animationen sind
   nur der Weg dorthin. */

.bpc{--bpc-slate:#2F3A44;--bpc-gruen:#2E7D52;--bpc-rot:#B0483D;--bpc-rad:12px;position:relative;width:100%;min-width:0;}
.bpc-reihe{position:relative;display:flex;align-items:flex-start;justify-content:center;gap:8px;padding:16px 0;}
.bpc--links .bpc-reihe{justify-content:flex-start;}

/* Karte: Lage und Drehung kommen aus Variablen, damit jeder Zustand dieselbe Funktionsliste hat
   und der Browser sauber zwischen ihnen überblendet. */
.bpc-karte{--x:0px;--y:0px;--r:0deg;--ry:0deg;--s:1;position:relative;flex:1 1 0;min-width:0;max-width:46px;height:58px;border-radius:var(--bpc-rad);
  transform-style:preserve-3d;transform:perspective(700px) translate3d(var(--x),var(--y),0) rotate(var(--r)) rotateY(var(--ry)) scale(var(--s));
  transition:transform .34s cubic-bezier(.2,.9,.3,1.12);}
@supports (aspect-ratio:1/1){.bpc-karte{height:auto;aspect-ratio:46/58;}}
.bpc-karte.bpc-gruppe{margin-right:10px;}
/* Schatten als eigene Ebene: die Rückseite ist beschnitten und kann keinen eigenen Schatten werfen. */
.bpc-karte::before{content:'';position:absolute;inset:0;border-radius:var(--bpc-rad);box-shadow:0 12px 24px -12px rgba(47,58,68,.55);opacity:0;transition:opacity .25s ease,box-shadow .35s ease;}

.bpc-vorne,.bpc-hinten{position:absolute;inset:0;border-radius:var(--bpc-rad);-webkit-backface-visibility:hidden;backface-visibility:hidden;}
/* Ausblenden immer an den Flächen, nie an der Karte: opacity an der Karte zwingt Chrome, sie flach zu zeichnen,
   dann blitzt beim Umdrehen die weiße Vorderseite auf. */
.bpc-vorne{display:flex;align-items:center;justify-content:center;background:#fff;box-shadow:inset 0 0 0 1px rgba(47,58,68,.16);transition:box-shadow .18s ease,opacity .2s ease;}
.bpc-ziffer{font-size:clamp(19px,6.2vw,24px);font-weight:600;line-height:1;letter-spacing:-.3px;color:var(--bpc-slate);font-variant-numeric:tabular-nums lining-nums;}
.bpc-karte.is-voll .bpc-vorne{box-shadow:inset 0 0 0 1px rgba(47,58,68,.34);}
.bpc-karte.is-aktiv .bpc-vorne{box-shadow:inset 0 0 0 1.5px rgba(47,58,68,.72),0 0 0 4px rgba(47,58,68,.08);}
.bpc-karte.is-neu .bpc-ziffer{animation:bpc-pop .24s cubic-bezier(.3,1.5,.5,1);}
.bpc-caret{display:none;width:2px;height:42%;border-radius:1px;background:var(--bpc-slate);animation:bpc-blinken 1.05s steps(1) infinite;}
.bpc-karte.is-aktiv .bpc-caret{display:block;}

/* Rückseite in Schiefer. clip-path statt nur overflow, sonst lässt Safari den laufenden Streif
   an den runden Ecken eckig herausstehen. */
.bpc-hinten{transform:rotateY(180deg);overflow:hidden;clip-path:inset(0 round var(--bpc-rad));background-color:var(--bpc-slate);transition:background-color .3s ease,opacity .22s ease;}
.bpc-spur{position:absolute;inset:-50%;opacity:0;background:conic-gradient(from 0deg,rgba(255,255,255,0) 0deg,rgba(255,255,255,0) 210deg,rgba(255,255,255,.5) 300deg,#fff 344deg,rgba(255,255,255,0) 358deg);}
.bpc-flaeche{position:absolute;inset:3px;border-radius:calc(var(--bpc-rad) - 3px);display:flex;align-items:center;justify-content:center;
  background-color:var(--bpc-slate);background-image:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,0) 46%,rgba(0,0,0,.16));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);transition:background-color .3s ease;}
.bpc-haken{width:58%;height:auto;opacity:0;}
.bpc-haken path{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:18;stroke-dashoffset:0;}

.bpc-strahlen{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;}
.bpc-strahl{position:absolute;left:-1px;top:-5px;width:2px;height:10px;border-radius:2px;background:var(--bpc-gruen);opacity:0;transform:translate(var(--x1),var(--y1)) rotate(var(--a));}

/* Eingabefeld liegt unsichtbar über den Kästchen: Tippen, Einfügen und Autofill gehen an ein echtes Feld.
   16 px Schrift, sonst zoomt das iPhone beim Antippen. */
/* input. und :focus mit Absicht: die allgemeinen Fokusrahmen des Backends (body:has(.app-topbar) input:focus) wiegen sonst mehr. */
.bpc input.bpc-feld,.bpc input.bpc-feld:focus,.bpc input.bpc-feld:hover{position:absolute;inset:0;z-index:2;width:100%;max-width:none;height:100%;margin:0;padding:0;border:0;border-radius:0;outline:0;box-shadow:none;background:transparent;
  color:transparent;-webkit-text-fill-color:transparent;caret-color:transparent;font-size:16px;letter-spacing:0;cursor:text;-webkit-appearance:none;appearance:none;}
.bpc .bpc-feld::selection{background:transparent;}
.bpc .bpc-feld:-webkit-autofill,.bpc .bpc-feld:-webkit-autofill:focus{-webkit-text-fill-color:transparent;-webkit-box-shadow:0 0 0 1000px transparent inset;transition:background-color 100000s 0s;}
.bpc-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ---------- Ablauf ---------- */
/* 1. Auffächern wie ein Blatt Karten */
.bpc.is-faecher .bpc-karte{--x:var(--fx);--y:var(--fy);--r:var(--fr);}
.bpc.is-faecher .bpc-karte::before{opacity:1;}
/* Ohne Übergang: sonst trägt beim schnellen Tippen eine Karte noch den Rahmen des aktiven Felds in den Fächer. */
.bpc.is-faecher .bpc-vorne,.bpc.is-zurueck .bpc-vorne{transition:none;}
.bpc.is-faecher .bpc-vorne{box-shadow:inset 0 0 0 1px rgba(47,58,68,.3);}
/* 2. Umdrehen und von links nach rechts zum Stapel zusammenschieben */
.bpc.is-stapel .bpc-karte{--x:var(--sx);--y:var(--sy);--r:0deg;--ry:180deg;transition:transform .4s cubic-bezier(.55,.05,.25,1);transition-delay:calc(var(--i) * 32ms);}
/* 3. Prüfen: nur die oberste Karte bleibt, ein Lichtstreif läuft um ihren Rand */
.bpc.is-pruefen .bpc-karte{transition-delay:0s;}
.bpc.is-pruefen .bpc-karte:not(.bpc-oben) .bpc-hinten,.bpc.is-pruefen .bpc-karte:not(.bpc-oben)::before{opacity:0;}
.bpc.is-pruefen .bpc-oben{--s:1.12;}
.bpc.is-pruefen .bpc-oben .bpc-spur{opacity:1;animation:bpc-drehen .9s linear infinite;}
/* 4a. Richtig: grün, Haken, Strahlen, Leuchten */
.bpc.is-bestaetigt .bpc-oben .bpc-spur{opacity:0;animation:none;}
.bpc.is-bestaetigt .bpc-hinten,.bpc.is-bestaetigt .bpc-flaeche{background-color:var(--bpc-gruen);}
.bpc.is-bestaetigt .bpc-oben::before{box-shadow:0 0 0 7px rgba(46,125,82,.13),0 16px 32px -12px rgba(46,125,82,.65);}
.bpc.is-bestaetigt .bpc-haken{opacity:1;}
.bpc.is-bestaetigt .bpc-haken path{animation:bpc-haken .42s cubic-bezier(.65,0,.35,1);}
.bpc.is-bestaetigt .bpc-strahl{animation:bpc-strahl .75s cubic-bezier(.2,.7,.3,1);}
/* 4b. Falsch: rot und wackeln, danach kommen die Felder leer zurück */
.bpc.is-fehler .bpc-oben .bpc-spur{opacity:0;animation:none;}
.bpc.is-fehler .bpc-hinten,.bpc.is-fehler .bpc-flaeche{background-color:var(--bpc-rot);}
.bpc.is-fehler .bpc-reihe,.bpc.is-wackeln .bpc-reihe{animation:bpc-wackeln .42s cubic-bezier(.36,.07,.19,.97);}
.bpc.is-zurueck .bpc-karte{transition:transform .4s cubic-bezier(.3,.8,.3,1.05);transition-delay:calc((var(--n) - 1 - var(--i)) * 28ms);}

/* Bewegung reduzieren: Kästchen bleiben stehen, nur Farbe und Deckkraft zeigen den Stand. */
.bpc.is-ruhig .bpc-karte{transition:none;}
.bpc.is-ruhig.is-warten .bpc-vorne{opacity:.45;}
.bpc.is-ruhig.is-ok .bpc-vorne{opacity:1;box-shadow:inset 0 0 0 1.5px var(--bpc-gruen);}
.bpc.is-ruhig.is-nein .bpc-vorne{opacity:1;box-shadow:inset 0 0 0 1.5px var(--bpc-rot);}
@media (prefers-reduced-motion:reduce){
  .bpc-karte,.bpc-karte::before,.bpc-vorne,.bpc-hinten,.bpc-flaeche{transition:none !important;}
  .bpc *,.bpc .bpc-reihe{animation:none !important;}
}

@keyframes bpc-pop{from{transform:scale(.5);opacity:.15;}}
@keyframes bpc-blinken{50%{opacity:0;}}
@keyframes bpc-drehen{to{transform:rotate(360deg);}}
@keyframes bpc-haken{from{stroke-dashoffset:18;}}
@keyframes bpc-strahl{
  0%{opacity:0;transform:translate(var(--x0),var(--y0)) rotate(var(--a)) scaleY(.3);}
  35%{opacity:1;}
  100%{opacity:0;transform:translate(var(--x1),var(--y1)) rotate(var(--a)) scaleY(1);}
}
@keyframes bpc-wackeln{
  10%,90%{transform:translateX(-1px);}
  20%,80%{transform:translateX(3px);}
  30%,50%,70%{transform:translateX(-6px);}
  40%,60%{transform:translateX(6px);}
}

/* ---------- Anmeldeseite ---------- */
.bp-apple .auth-title{transition:color .3s ease;}
.bp-apple .auth-title.auth-title--ok{color:var(--bpc-gruen,#2E7D52);}
.auth-code-hinweis{margin:-18px 0 24px;text-align:center;font-size:14px;line-height:1.5;color:#8A939B;}
.mit-deck .lbl{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.mit-deck .auth-btn{display:none;}
.mit-deck .field{margin-bottom:4px;}