.tresor {
  --ease: cubic-bezier(.22, 1, .36, 1);
  position: relative;
  overflow: hidden;
}

body.tw-anmeldung {
  --tw-cyan: #22D3EE; --tw-petrol: #0E7490; --tw-blau: #3B82F6; --tw-tinte: #0B1220;
  --sl-1: #F24242; --sl-2: #F29A58; --sl-3: #8442DC; --fm-dunkel: #0B5563; --papier-schrift: #FFFFFF;
  --marke: var(--tw-cyan); --tinte: #0F172A; --jade: var(--tw-petrol); --jade-fl: #E6F6FA; --jade-text: var(--tw-petrol);
  --linnen: #F1F5F9; --karte: #FFFFFF; --nebel: #5B687A; --rand: #D5DDE8; --rand-kraeftig: #8896AD; --text: #0F172A; --akz-schrift: #FFFFFF;
  --signal: #8A4F08; --signal-fl: #FAEEDA; --signal-text: #8A4F08; --rot: #A4322A; --rot-fl: #FBE9E7;
  color-scheme: light;
  background: var(--linnen); background-image: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.tw-anmeldung {
    --jade: var(--tw-cyan); --jade-fl: #0E2A3A; --jade-text: var(--tw-cyan);
    --linnen: #0F172A; --karte: #151F31; --nebel: #94A3B8; --rand: #24324A; --rand-kraeftig: #4B5D7A; --text: #F1F5F9; --akz-schrift: var(--tw-tinte);
    --signal-fl: #3A2712; --signal-text: #E7A94C; --rot-fl: #3A1613; --rot: #E98A82;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] body.tw-anmeldung {
  --jade: var(--tw-cyan); --jade-fl: #0E2A3A; --jade-text: var(--tw-cyan);
  --linnen: #0F172A; --karte: #151F31; --nebel: #94A3B8; --rand: #24324A; --rand-kraeftig: #4B5D7A; --text: #F1F5F9; --akz-schrift: var(--tw-tinte);
  --signal-fl: #3A2712; --signal-text: #E7A94C; --rot-fl: #3A1613; --rot: #E98A82;
  color-scheme: dark;
}

.tresor-hintergrund { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.tresor-glut {
  position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--tw-cyan) 10%, transparent), transparent);
  top: -20vmax; left: -22vmax;
  animation: tresor-treiben 22s ease-in-out infinite alternate;
}
.tresor-glut.zwei {
  top: auto; left: auto; bottom: -30vmax; right: -26vmax; width: 60vmax; height: 60vmax;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--tw-blau) 8%, transparent), transparent);
  animation-duration: 29s; animation-delay: -9s;
}
@keyframes tresor-treiben {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(9vmax, 6vmax, 0); }
}
@keyframes tresor-ring { to { transform: rotate(360deg); } }
.tresor-schau { position: absolute; inset: 0; display: none; pointer-events: none; z-index: 1; }
@media (min-width: 1180px) { .tresor-schau { display: block; } }
.tresor-schau > * { pointer-events: auto; }
.tresor-schild, .tresor-zettel { animation: tresor-zettelauftritt .8s var(--ease) both; }
.tresor-schild { animation-delay: .3s; }
.tresor-zettel.slyne { animation-delay: .42s; }
.tresor-zettel.flowmatik { animation-delay: .54s; }
@keyframes tresor-zettelauftritt {
  from { opacity: 0; translate: 0 16px; }
  to   { opacity: 1; translate: 0 0; }
}
.tresor-schild { position: absolute; right: calc(50% + 236px); top: 236px; }
.tresor-schild a {
  display: flex; flex-direction: column; gap: 4px; padding: 12px 22px 11px 26px; position: relative;
  text-decoration: none; border-radius: 8px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--karte) 80%, transparent), var(--karte));
  border: 1px solid var(--rand-kraeftig);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--papier-schrift) 6%, transparent),
              0 18px 40px -20px color-mix(in srgb, var(--tw-tinte) 80%, transparent);
}
.tresor-schild a::before, .tresor-schild a::after { content: ''; position: absolute; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--rand-kraeftig); transform: translateY(-50%); }
.tresor-schild a::before { left: 9px; }
.tresor-schild a::after { right: 9px; }
.tresor-schild-marke { font: 700 20px/1 var(--anzeige); letter-spacing: .32em; color: var(--jade-text); padding-left: .1em; }
.tresor-schild-unter { font: 600 11px/1 var(--anzeige); letter-spacing: .12em; text-transform: uppercase; color: var(--nebel); }
.tresor-zettel {
  position: absolute; bottom: 66px; width: 246px; padding: 22px 18px 16px; border-radius: 4px; text-decoration: none;
  box-shadow: 0 24px 50px -24px color-mix(in srgb, var(--tw-tinte) 90%, transparent);
  transition: transform .35s var(--ease);
}
.tresor-zettel.slyne { left: calc(50% - 480px); background: linear-gradient(150deg, var(--sl-1), var(--sl-2) 60%, var(--sl-3)); }
.tresor-zettel.flowmatik { right: calc(50% - 480px); background: linear-gradient(150deg, var(--tw-petrol), var(--fm-dunkel)); }
.tresor-zettel:hover { transform: translateY(-4px); }
.tresor-klebe { position: absolute; left: 50%; top: -10px; width: 74px; height: 20px; margin-left: -37px; border-radius: 2px; background: color-mix(in srgb, var(--papier-schrift) 40%, transparent); transform: rotate(-2deg); }
.tresor-zettel-text { display: block; font: 500 16px/1.4 var(--anzeige); color: var(--papier-schrift); }
.tresor-zettel-text b { font-weight: 700; }
.tresor-pille {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 8px 13px 8px 10px; border-radius: 999px;
  font-family: var(--anzeige); font-weight: 700; font-size: 12px; line-height: 1; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  transition: transform .25s var(--ease);
}
.tresor-pille i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .8; }
.tresor-pille .ziel { opacity: .75; font-weight: 600; letter-spacing: .04em; text-transform: none; }
.tresor-zettel.slyne .tresor-pille { background: var(--papier-schrift); color: var(--sl-3); }
.tresor-zettel.flowmatik .tresor-pille { background: var(--tw-cyan); color: var(--tw-tinte); }
.tresor-zettel:hover .tresor-pille { transform: translateY(-1px); }

.tresor .anmelde-karte { position: relative; }
.tresor .anmelde-marke,
.tresor .tresor-tuer,
.tresor .anmelde-fuss { animation: tresor-auftritt .75s var(--ease) both; }
.tresor .tresor-tuer  { animation-delay: .1s; }
.tresor .anmelde-fuss { animation-delay: .32s; }
.tresor .karte > :not(.tresor-handrad):not(.tresor-nieten) { animation: tresor-auftritt .6s var(--ease) both; }
.tresor .karte > :nth-child(3) { animation-delay: .18s; }
.tresor .karte > :nth-child(4) { animation-delay: .24s; }
.tresor .karte > :nth-child(5) { animation-delay: .30s; }
.tresor .karte > :nth-child(6) { animation-delay: .36s; }
.tresor .karte > :nth-child(7) { animation-delay: .42s; }
@keyframes tresor-auftritt {
  from { opacity: 0; transform: translate3d(0, 16px, 0) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.tresor .tresor-tuer {
  position: relative; padding: 12px;
  border-radius: calc(var(--r-gross) + 12px);
  background: color-mix(in srgb, var(--linnen) 55%, var(--karte));
  border: 1px solid var(--rand);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--karte) 70%, transparent),
              0 24px 60px -30px color-mix(in srgb, var(--text) 40%, transparent);
  perspective: 1400px;
}
.tresor .tresor-tuer::before {
  content: ''; position: absolute; inset: 12px; border-radius: var(--r-gross);
  background: radial-gradient(ellipse at 30% 50%, color-mix(in srgb, var(--jade) 45%, transparent), transparent 70%);
  opacity: 0; transition: opacity .7s ease .2s;
}
@property --tresor-winkel { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.tresor .tresor-tuer::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--tresor-winkel),
      transparent 0 62%, color-mix(in srgb, var(--jade) 55%, transparent) 78%, var(--jade-text) 86%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
  animation: tresor-saum 7s linear infinite;
}
@keyframes tresor-saum { to { --tresor-winkel: 360deg; } }

.tresor .karte {
  position: relative; margin: 0; padding: 46px 24px 24px;
  border-color: var(--rand-kraeftig);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--karte) 60%, transparent) inset,
              0 10px 30px -18px color-mix(in srgb, var(--text) 45%, transparent);
  transform-origin: 6% 50%;
  transform: rotateX(var(--ny, 0deg)) rotateY(var(--nx, 0deg));
  transition: transform .45s var(--ease), opacity .55s ease .25s;
  backface-visibility: hidden;
}
.tresor .karte::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
      color-mix(in srgb, var(--jade) 11%, transparent), transparent 65%);
  opacity: 0; transition: opacity .45s ease;
}
.tresor .karte:hover::before { opacity: 1; }

.tresor .tresor-handrad {
  position: absolute; top: -40px; left: 50%; margin-left: -39px; width: 78px; height: 78px;
  border-radius: 50%; display: grid; place-items: center;
  color: var(--jade-text);
  background: radial-gradient(circle at 35% 30%, var(--karte), color-mix(in srgb, var(--karte) 88%, var(--linnen)));
  box-shadow: inset 0 0 0 1px var(--rand-kraeftig), inset 0 -2px 6px color-mix(in srgb, var(--text) 10%, transparent), var(--schatten);
  transform: rotate(var(--drehung, 0deg));
  transition: transform .65s cubic-bezier(.34, 1.56, .64, 1);
}
.tresor .tresor-handrad::before {
  content: ''; position: absolute; inset: -7px; border-radius: 50%;
  background: repeating-conic-gradient(var(--rand-kraeftig) 0 1.6deg, transparent 1.6deg 10deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  opacity: .7;
  animation: tresor-ring 45s linear infinite reverse;
}
.tresor .tresor-handrad svg { width: 58px; height: 58px; display: block; position: relative; }
.tresor .tresor-handrad.dreht { animation: tresor-dreh 1.1s linear infinite; }
@keyframes tresor-dreh { to { transform: rotate(calc(var(--drehung, 0deg) + 360deg)); } }


.tresor .tresor-nieten { position: absolute; inset: 10px; pointer-events: none; }
.tresor .tresor-nieten i {
  position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--karte) 70%, var(--rand-kraeftig)), var(--rand-kraeftig) 70%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nebel) 50%, transparent), 0 1px 1px color-mix(in srgb, var(--text) 25%, transparent);
  transition: background .3s ease, box-shadow .3s ease;
}
.tresor .tresor-nieten i:nth-child(1) { left: 0; top: 0; }
.tresor .tresor-nieten i:nth-child(2) { right: 0; top: 0; }
.tresor .tresor-nieten i:nth-child(3) { left: 0; bottom: 0; }
.tresor .tresor-nieten i:nth-child(4) { right: 0; bottom: 0; }
.tresor-bestaetigt .tresor-nieten i {
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--jade) 55%, var(--karte)), var(--jade) 70%);
  box-shadow: 0 0 8px color-mix(in srgb, var(--jade) 50%, transparent);
}
.tresor-fehler .tresor-nieten i { background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--rot) 55%, var(--karte)), var(--rot) 70%); }

.tresor .tresor-zeile {
  display: flex; justify-content: center; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--nebel); margin: 0 0 10px;
}
.tresor .tresor-punkt {
  width: 8px; height: 8px; border-radius: 50%; background: var(--jade-text);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--jade) 45%, transparent);
  animation: tresor-puls 2.6s ease-out infinite;
}
@keyframes tresor-puls {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--jade) 45%, transparent); }
  70%  { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.tresor .anmelde-titel { font-family: var(--anzeige); font-size: 1.75rem; letter-spacing: -.015em; line-height: 1.1; margin: 0 0 6px; text-align: center; }
.tresor .karte > p.klein { text-align: center; }
.tresor .anmelde-marke { margin-bottom: 52px; }

.tresor .feld { position: relative; display: block; }
.tresor .feld::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--jade-text), transparent);
  transform: scaleX(0); opacity: 0;
  transition: transform .5s var(--ease), opacity .3s ease;
}
.tresor .feld:focus-within::after { transform: scaleX(1); opacity: 1; }
.tresor .feld input {
  transition: border-color .2s ease, box-shadow .25s ease, background .2s ease;
  background: color-mix(in srgb, var(--karte) 88%, var(--linnen));
}
.tresor .feld input:focus-visible {
  outline: none; border-color: var(--jade-text);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--jade) 22%, transparent);
  background: var(--karte);
}

.tresor .knopf.haupt { position: relative; overflow: hidden; letter-spacing: .01em; }
.tresor .knopf.haupt::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 32%, color-mix(in srgb, var(--akz-schrift) 26%, transparent) 50%, transparent 68%);
  transform: translateX(-130%);
  pointer-events: none;
}
.tresor .knopf.haupt:hover::after { transition: transform .9s var(--ease); transform: translateX(130%); }
.tresor .knopf.haupt[aria-busy="true"] { opacity: 1; }
.tresor .knopf.haupt[aria-busy="true"]::after { animation: tresor-scan 1.3s ease-in-out infinite; }
@keyframes tresor-scan { from { transform: translateX(-130%); } to { transform: translateX(130%); } }

.tresor .pruefung { --pw-farbe: var(--jade); --pw-fortschritt: 0; }
.tresor .pruefung.pw-fehler { --pw-farbe: var(--rot); }
.tresor .pruefung.pw-ok { --pw-fortschritt: 100; }
.tresor .pruefung.pw-karte {
  max-width: none; min-height: 76px; padding: 12px 14px; gap: 14px;
  border-radius: var(--r); border: 1px solid var(--rand);
  background: color-mix(in srgb, var(--linnen) 55%, var(--karte));
  overflow: visible;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.tresor .pruefung.pw-ok.pw-karte {
  border-color: var(--jade-text);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jade) 16%, transparent);
}
.tresor .pruefung.pw-fehler.pw-karte { border-color: var(--rot); }

.tresor .pruefung .pw-knopf {
  width: 52px; height: 52px; border-radius: 50%; border: 0;
  background:
    radial-gradient(circle, var(--karte) 0 20px, transparent 20.5px),
    conic-gradient(var(--pw-farbe) calc(var(--pw-fortschritt) * 1%),
                   color-mix(in srgb, var(--rand-kraeftig) 55%, transparent) 0);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--jade) 40%, transparent);
  transition: box-shadow .3s ease, transform .3s var(--ease);
}
.tresor .pruefung:not(.pw-ok):not(.pw-fehler) .pw-knopf:not(:disabled) { animation: tresor-atmen 2.6s ease-out infinite; }
@keyframes tresor-atmen {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--jade) 40%, transparent); }
  65%  { box-shadow: 0 0 0 12px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.tresor .pruefung .pw-knopf:hover:not(:disabled) { transform: scale(1.06); border: 0; }
.tresor .pruefung .pw-knopf:focus-visible { outline: 3px solid var(--jade-text); outline-offset: 3px; }
.tresor .pruefung .pw-knopf::before {
  content: ''; position: absolute; inset: 7px; border-radius: 50%;
  background:
    linear-gradient(var(--pw-farbe), var(--pw-farbe)) 50% 2px / 2px 8px no-repeat,
    repeating-conic-gradient(from 0deg, var(--rand-kraeftig) 0 2deg, transparent 2deg 15deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
  transform: rotate(calc(var(--pw-fortschritt) * 3.6deg));
  transition: transform .25s var(--ease);
}
.tresor .pruefung .pw-knopf::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%; background: var(--pw-farbe);
  box-shadow: 0 0 0 3px var(--karte), 0 0 0 4px color-mix(in srgb, var(--rand-kraeftig) 60%, transparent);
}
.tresor .pruefung .pw-knopf:has(.pw-dreher)::before { animation: tresor-scheibe 1.4s linear infinite; }
.tresor .pruefung .pw-dreher { display: none; }
@keyframes tresor-scheibe { to { transform: rotate(calc(var(--pw-fortschritt) * 3.6deg + 360deg)); } }
.tresor .pruefung .pw-haken {
  inset: 11px; border-radius: 50%; z-index: 1;
  background: var(--jade); color: var(--akz-schrift); font-size: 17px;
  animation: tresor-einrasten .5s var(--ease);
}
@keyframes tresor-einrasten {
  0%   { transform: scale(.3) rotate(-90deg); opacity: 0; }
  60%  { transform: scale(1.12) rotate(4deg); opacity: 1; }
  100% { transform: none; }
}
.tresor .pruefung.pw-ok .pw-knopf::before,
.tresor .pruefung.pw-ok .pw-knopf::after { opacity: 0; }

.tresor .pruefung .pw-text { display: flex; flex-direction: column; gap: 2px; }
.tresor .pruefung #pw-text { font-weight: 600; font-size: .95rem; }
.tresor .pruefung .pw-unter { font-size: .74rem; }
.tresor .pruefung .pw-unter:empty::before { content: 'Zum Entriegeln antippen'; }
.tresor .pruefung .pw-text::after {
  content: ''; display: block; width: 74px; height: 8px; margin-top: 6px;
  background: linear-gradient(90deg, var(--pw-farbe) calc(var(--pw-fortschritt) * 1%),
                              color-mix(in srgb, var(--rand-kraeftig) 55%, transparent) 0);
  -webkit-mask: radial-gradient(circle 3.5px, #000 96%, transparent) 0 0 / 15px 8px repeat-x;
          mask: radial-gradient(circle 3.5px, #000 96%, transparent) 0 0 / 15px 8px repeat-x;
  transition: background .2s ease;
}
.tresor .pruefung.pw-ok .pw-text::after { animation: tresor-pop .55s var(--ease); }
@keyframes tresor-pop { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } }
.tresor .pruefung .pw-balken { opacity: 0; height: 0; }

.tresor-fehler .karte { animation: tresor-ruetteln .5s ease-in-out; }
@keyframes tresor-ruetteln {
  10%, 90% { transform: translate3d(-2px, 0, 0); }
  20%, 80% { transform: translate3d(4px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-6px, 0, 0); }
  40%, 60% { transform: translate3d(6px, 0, 0); }
}

.tresor-offen .tresor-tuer::before { opacity: 1; }
.tresor-offen .karte {
  transform: rotateY(-48deg) translateX(-3%);
  opacity: 0;
  transition-delay: .22s, .45s;
}
.tresor-offen .tresor-handrad { transition-duration: 1.1s; }
.tresor-offen .tresor-tuer::after { animation-duration: 1.6s; }

@media (max-width: 480px) {
  .tresor .karte { padding: 22px 16px 18px; }
  .tresor .tresor-handrad { width: 62px; height: 62px; top: -32px; margin-left: -31px; }
  .tresor .karte { padding-top: 38px; }
  .tresor .tresor-handrad svg { width: 46px; height: 46px; }
}