/* Die Anmeldung.
   ---------------------------------------------------------------------
   Ein Kasten in der Mitte des Fensters, fest stehend. Darin zwei Felder
   nebeneinander: links der Rettungswagen, rechts die Eingaben.

   Die Drehung ist nicht ans Scrollen gebunden. Sie läuft beim Öffnen
   einmal über sechs Sekunden durch, der Wagen dreht sich und öffnet
   sein Heck, und dann bleibt das Bild stehen. Wer sich anmelden will, tippt
   die ganze Zeit ungestört: Die Bewegung passiert daneben und verlangt
   nichts.

   Die Seite scrollt nicht. Passt der Kasten einmal nicht ins Fenster, gibt
   das Fahrzeugfeld Höhe ab, und auf sehr flachen Fenstern fällt es ganz
   weg. Das Formular hat immer Vorrang.
*/

.tor-koerper {
  margin: 0;
  background: var(--grund);
}

.tor {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

/* ── Der Kasten ─────────────────────────────────────────────────────── */

.tor__blatt {
  width: min(880px, 100%);
  max-height: calc(100svh - 36px);
  background: var(--buehne);
  border-radius: var(--r-buehne);
  box-shadow: 0 1px 2px rgba(22, 24, 26, 0.05),
    0 20px 40px rgba(22, 24, 26, 0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Die beiden Felder. Der Wagen steht links, wo das Auge herkommt, die Hand
   arbeitet rechts. */
.tor__reihe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  align-items: stretch;
  min-height: 0;
}

.tor__innen {
  padding: 26px 30px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 15px;
  min-width: 0;
  overflow-y: auto;
}

.tor__marke {
  display: flex;
  align-items: center;
  gap: 11px;
}

.tor h1 {
  font-size: clamp(1.6rem, 5vw, 1.9rem);
  font-weight: 380;
  letter-spacing: -0.035em;
  line-height: 1;
}

.tor .fehlerzeile {
  padding: 12px 14px;
  border-radius: var(--r-feld);
  background: var(--blau-hauch);
  color: var(--blau-tief);
  font-size: 13px;
  line-height: 1.5;
}

.tor code {
  font-family: 'Azeret Mono', ui-monospace, monospace;
  font-size: 0.92em;
}

/* ── Das Fahrzeugfeld ───────────────────────────────────────────────── */

/* Ein Feld im Kasten, durch eine Haarlinie abgesetzt, wie jede andere
   Gliederung in diesem Portal. */
.tor__wagen {
  position: relative;
  border-right: 1px solid var(--tinte-haarlinie);
  background: var(--buehne);
  display: flex;
  align-items: center;
  min-width: 0;
  /* Luft, damit der Wagen nicht am Blattrand klebt. Die Einzelbilder sind
     bis an ihre Kante freigestellt; ohne Innenabstand berührt die
     Motorhaube die Haarlinie. */
  padding: 22px 18px;
}

.dreh {
  position: relative;
  width: 100%;
  aspect-ratio: 64 / 55;
  max-height: 100%;
}

.dreh__ruhe,
.dreh__leinwand {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Die Leinwand liegt über dem Standbild und wird erst sichtbar, wenn
   wirklich etwas darauf steht. */
.dreh__leinwand {
  opacity: 0;
}

.dreh[data-bereit] .dreh__leinwand {
  opacity: 1;
}

.dreh[data-bereit] .dreh__ruhe {
  opacity: 0;
}

/* ── Die Vorführung: Rollen zum Anwählen ────────────────────────────── */

/* In der Vorführung tippt niemand eine Kennung ab, die zwei Zeilen tiefer
   offen danebensteht. An der Stelle der beiden Felder stehen deshalb die
   Konten selbst, eines je Rolle, und ein Klick ist die ganze Anmeldung. Wer
   lieber tippt, klappt die Felder darunter auf.

   Eine Karte mit drei Zeilen braucht mehr Spalte als ein Feld. Der Kasten
   bleibt gleich breit, das Fahrzeugfeld gibt die Breite ab; nebeneinander
   steht ohnehin nur, wer den Platz dafür hat. */
@media (min-width: 761px) {
  .tor--vorfuehrung .tor__reihe {
    grid-template-columns: minmax(0, 1fr) minmax(0, 430px);
  }
}

/* Der Satz unter der Überschrift sagt, was zu tun ist. Ohne ihn sind zwei
   Karten zwei Behauptungen. */
.tor__satz {
  margin-top: -3px;
  max-width: 36ch;
  color: var(--tinte-leise);
  font-size: 13px;
  line-height: 1.55;
}

.rollen {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rollen form {
  display: flex;
  min-width: 0;
}

.rolle {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  min-width: 0;
  padding: 15px 17px 14px;
  text-align: left;
  background: var(--buehne);
  border: 1px solid var(--tinte-haarlinie);
  border-radius: var(--r-feld);
  color: var(--tinte);
  font-family: inherit;
  cursor: pointer;
  transition: border-color var(--zeit-farbe) ease-out,
    background-color var(--zeit-farbe) ease-out,
    transform var(--zeit-mass) var(--schwung);
}

.rolle:hover {
  border-color: var(--blau);
  background: var(--blau-hauch);
}

.rolle:active {
  transform: translateY(1px);
}

.rolle:focus-visible {
  outline: 2px solid var(--blau);
  outline-offset: 2px;
}

.rolle__titel {
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.012em;
}

.rolle__text {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--tinte-leise);
}

/* Kennung und Kennwort stehen offen auf der Karte. Sie sind öffentlich, und
   wer doch tippen will, findet sie dort, wo er sie braucht. */
.rolle__fuss {
  margin-top: 2px;
  font-family: 'Azeret Mono', ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--blau);
}

/* Der Weg für alle, die tippen wollen. Eine Zeile und kein Kasten: Neben den
   beiden Karten soll sie nicht wie eine dritte aussehen. */
.selbst > summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 4px 0;
  cursor: pointer;
  list-style: none;
  color: var(--blau);
  font-size: 12.5px;
}

.selbst > summary::-webkit-details-marker {
  display: none;
}

/* Derselbe selbst gezeichnete Pfeil wie bei der eingeklappten Auswahl im
   Portal, nur kleiner. */
.selbst > summary::after {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--zeit-mass) var(--schwung);
  flex: none;
}

.selbst[open] > summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.selbst > summary:focus-visible {
  outline: 2px solid var(--blau);
  outline-offset: 3px;
  border-radius: 4px;
}

.selbst .formular {
  margin-top: 12px;
}

/* Der Kasten der Vorführung ist höher als der im Betrieb: zwei Karten, ein
   Aufklapper und ein Satz zur Herkunft der Daten. Passt er nicht mehr ins
   Fenster, scrollt die Seite, statt den Inhalt in ein Feld mit eigenem
   Balken zu sperren. Zentriert wird über `margin: auto` und nicht über
   `align-items`: Beim Zentrieren über die Achse wandert ein zu hoher Kasten
   nach oben aus dem Fenster, und der Kopf mit dem Namen des Dienstes ist
   dann abgeschnitten und nicht mehr erreichbar. */
.tor--vorfuehrung {
  align-items: flex-start;
}

.tor--vorfuehrung .tor__blatt {
  max-height: none;
  margin: auto;
}

.tor--vorfuehrung .tor__innen {
  overflow-y: visible;
}

/* ── Schmale Fenster: untereinander ─────────────────────────────────── */

@media (max-width: 760px) {
  .tor {
    padding: 12px;
  }

  .tor__blatt {
    width: min(460px, 100%);
  }

  .tor__reihe {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Der Wagen sitzt jetzt über den Eingaben, die Linie wandert mit. */
  .tor__wagen {
    border-right: 0;
    border-bottom: 1px solid var(--tinte-haarlinie);
  }

  .dreh {
    /* Flacher als die Quelle: Der Wagen sitzt im mittleren Band, oben und
       unten steht Weiss. Ein flacheres Feld schneidet das weg und lässt dem
       Formular darunter den Platz. */
    aspect-ratio: 16 / 10;
  }

  .dreh__ruhe,
  .dreh__leinwand {
    object-fit: cover;
  }

  .tor__wagen {
    padding: 14px 16px 10px;
  }

  .tor__innen {
    padding: 20px 22px 26px;
    gap: 13px;
  }
}

/* Flache Fenster, etwa ein quer gehaltenes Telefon: Das Fahrzeugfeld gibt
   Höhe ab, damit das Formular ganz in den Kasten passt. */
@media (max-height: 700px) {
  .tor__innen {
    padding: 18px 26px 22px;
    gap: 12px;
  }
}

@media (max-width: 760px) and (max-height: 760px) {
  .dreh {
    aspect-ratio: 22 / 9;
  }
}

/* In der Vorführung stehen unter dem Wagen zwei Karten statt zweier Felder.
   Der Wagen gibt dafür Höhe ab: Wer die Anmeldung öffnet, soll die Wahl
   sehen und nicht erst dahin scrollen müssen. */
@media (max-width: 760px) {
  .tor--vorfuehrung .dreh {
    aspect-ratio: 22 / 9;
  }
}

/* Bleibt nicht genug für beides, entfällt der Wagen. Das Formular hat
   Vorrang; es ist der Zweck dieser Seite. */
@media (max-height: 520px) {
  .tor__wagen {
    display: none;
  }
}

/* ── Ohne Bewegung ──────────────────────────────────────────────────── */

/* Ein Bild, ein Formular, fertig. Die Anmeldung funktioniert vollständig,
   sie ist nur still. Das Standbild zeigt den Wagen geschlossen. */
@media (prefers-reduced-motion: reduce) {
  .dreh[data-bereit] .dreh__leinwand {
    opacity: 0;
  }

  .dreh[data-bereit] .dreh__ruhe {
    opacity: 1;
  }
}