/* Anmeldung: der Schieber. Das Karo muss ins markierte Feld; das Skript setzt nur --griff-x und --ziel-x. */

@layer seiten {
  .schieber {
    --griff-x: 0px;
    --ziel-x: 0px;
    display: grid;
    gap: 0.45rem;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  .schieber-bahn {
    position: relative;
    display: flex;
    align-items: center;
    height: 3.4rem;
    overflow: hidden;
    border-radius: 14px;
    background: var(--tinte-flaeche);
    box-shadow: var(--schatten-innen);
    touch-action: none;

    /* die schon zurückgelegte Strecke */
    &::before {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: calc(var(--griff-x) + 1.8rem);
      background: var(--tinte-flaeche);
    }
  }

  .schieber-ziel {
    position: absolute;
    left: calc(5px - 0.3rem);
    width: 3.3rem;
    height: 3.3rem;
    transform: translateX(var(--ziel-x));
    border: 2px dashed var(--text-leise);
    border-radius: 13px;
    background: var(--glas-leicht);
    transition: border-color var(--dauer-kurz), background var(--dauer-kurz);
  }

  .schieber-griff {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    flex: none;
    width: 2.7rem;
    height: 2.7rem;
    margin-left: 5px;
    transform: translateX(var(--griff-x));
    color: var(--akzent-text);
    background: var(--akzent);
    border: 0;
    border-radius: 11px;
    box-shadow: var(--schatten-knopf);
    cursor: grab;

    & .icon { grid-area: 1 / 1; width: 1.2rem; height: 1.2rem; }
    & .icon-check { display: none; }
  }

  .schieber-text {
    font-size: var(--gr-13);
    color: var(--text-leise);
    text-align: center;
  }

  .schieber.zieht .schieber-griff { cursor: grabbing; box-shadow: var(--schatten-1); }
  .schieber.trifft .schieber-ziel { border: 2px solid var(--plus); background: var(--plus-flaeche); }

  .schieber.fertig {
    & .schieber-bahn::before { background: var(--plus-flaeche); }
    & .schieber-ziel { display: none; }
    & .schieber-griff { color: var(--akzent-text); background: var(--plus); cursor: default; }
    & .schieber-griff .icon-arrow-right { display: none; }
    & .schieber-griff .icon-check { display: block; }
    & .schieber-text { color: var(--plus); }
  }

  .schieber + .knopf.haupt { animation: auftauchen var(--dauer) var(--kurve); }

  /* Der Code: ein Feld für den Server, darüber sechs Ziffernfelder aus dem Skript */
  input.code {
    font: 600 var(--gr-28) / 1.2 var(--schrift-titel);
    letter-spacing: 0.4em;
    text-align: center;
    font-variant-numeric: tabular-nums;

    &.verdeckt { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; opacity: 0; }
  }

  .code-felder {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.45rem;

    & input {
      min-height: 3.6rem;
      padding: 0.5rem 0;
      font: 600 var(--gr-28) / 1 var(--schrift-titel);
      font-variant-numeric: tabular-nums;
      text-align: center;
      caret-color: transparent;
    }
    & input:nth-child(3) { margin-right: 0.35rem; }
  }

  .nebenbei { display: flex; justify-content: space-between; gap: var(--a3); }

  @keyframes auftauchen {
    from { opacity: 0; transform: translateY(6px); }
  }
  /* Anmelden mit Passkey: Knopf über dem Formular, darunter "oder" zwischen zwei Linien */
  .passkey-knopf { width: 100%; }
  .trenner { display: flex; align-items: center; gap: var(--a3); margin: var(--a4) 0 0; color: var(--text-leise); font-size: var(--gr-14);
    &::before, &::after { content: ""; flex: 1; border-top: 1px solid var(--linie); } }
}