/* ============================================================
   Plenum · Anmeldeseite
   ============================================================
   Die einzige Seite mit eigener Farbwelt.

   Alles hinter der Anmeldung ist hell und ruhig. Das ist
   beabsichtigt: Wer einen Vorgang bearbeitet, soll den Inhalt
   sehen, nicht die Oberflaeche. Die Anmeldung darf anders sein.
   Sie ist der einzige Ort, an dem niemand arbeitet, und der
   erste Eindruck von Plenum.

   ## Diese Datei enthaelt keine einzige Farbe

   Das ist der ganze Unterschied zur vorigen Fassung. Dort
   standen rund sechzig feste Farbwerte, und themes.css
   ueberschrieb davon drei Stellen -- Karte, Feld, Knopf. Das
   Ergebnis war eine gruene Karte auf blauem Grund und weisse
   Schrift auf hellem Beige.

   Jetzt steht hier nur die FORM: Raster, Abstaende, Groessen,
   Zustaende. Jede Farbe, jede Rundung, jede Schrift und jeder
   Schatten kommt aus einer --t-Variablen. Wer ein Theme baut,
   muss diese Datei nicht anfassen -- und wer diese Datei
   aendert, aendert alle zehn Themes zugleich.

   Den vollstaendigen Satz der Variablen setzt themes.css;
   dort steht auch, was jede bedeutet.
   ============================================================ */

/* Die drei Ansichten -- Anmeldung, "Zugang existiert nicht" und
   Einladung -- teilen sich diesen Rahmen. Frueher trug
   #ansicht-anmeldung den Hintergrund; dann war die
   Einladungsseite ungetheml. */
.anmeldeseite {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  padding: 1.75rem clamp(1.375rem, 4vw, 4rem);
  overflow: hidden;
  color: var(--t-text);
  font-family: var(--t-schrift);
  font-size: 16px;
  background: var(--t-grund);
}

/* Die Musterschicht: Raster, Linien, Punkte, Vignette -- oder
   nichts. Jedes Theme entscheidet das fuer sich; hier steht nur,
   dass es eine Schicht gibt. */
.anmeldeseite::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--t-muster);
  background-size: var(--t-muster-groesse);
  -webkit-mask-image: var(--t-muster-maske);
  mask-image: var(--t-muster-maske);
}

.anmelde-schimmer {
  position: absolute;
  z-index: 0;
  border-radius: 999px;
  filter: blur(90px);
  opacity: var(--t-schimmer-deck);
  pointer-events: none;
}
.anmelde-schimmer--a {
  width: 20.625rem; height: 20.625rem;
  left: -7.5rem; top: 36%;
  background: var(--t-schimmer-a);
}
.anmelde-schimmer--b {
  width: 22.5rem; height: 22.5rem;
  right: -10rem; top: 22%;
  background: var(--t-schimmer-b);
}

/* ---------- Kopfzeile ---------- */
.anmelde-kopf {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 96rem;
  margin: 0 auto 1.875rem;
}
.anmelde-marke {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--t-schrift-titel);
  font-size: 1.125rem;
  font-weight: 700;
}
.anmelde-marke svg,
.anmelde-marke img { width: 1.9375rem; height: 1.9375rem; }

/* ---------- Buehne ---------- */
.anmelde-buehne {
  position: relative;
  z-index: 2;
  flex: 1;
  width: 100%;
  max-width: 96rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(17rem, .9fr) minmax(27rem, 1.18fr) minmax(15rem, .75fr);
  gap: clamp(1.75rem, 4vw, 4.375rem);
  align-items: center;
  min-height: 40rem;
}

/* ---------- Aufmacher links ---------- */
.anmelde-zeichen {
  display: flex;
  align-items: center;
  gap: 1.375rem;
  margin-bottom: 2.125rem;
}
.anmelde-zeichen__bild { width: 7rem; height: 7rem; flex: none; }
.anmelde-zeichen__name {
  display: block;
  font-family: var(--t-schrift-titel);
  font-size: clamp(2.625rem, 4vw, 4.375rem);
  font-weight: var(--t-titel-fett);
  line-height: .92;
  letter-spacing: var(--t-titel-sperr);
}
.anmelde-zeichen__unter {
  display: block;
  margin-top: .625rem;
  color: var(--t-still);
  font-size: 1.125rem;
  line-height: 1.45;
}

.anmelde-strich {
  display: block;
  width: 5.75rem;
  height: 4px;
  margin: .25rem 0 1.75rem;
  border-radius: var(--t-strich-rundung);
  background: var(--t-strich);
}

.anmelde-schlagzeile {
  margin: 0 0 1.25rem;
  color: var(--t-titel);
  font-family: var(--t-schrift-titel);
  font-size: clamp(3.25rem, 5vw, 5.125rem);
  font-weight: var(--t-titel-fett);
  line-height: .98;
  letter-spacing: var(--t-titel-sperr);
}
/* Der hervorgehobene Teil. Ein Farbverlauf im Text braucht
   background-clip; ein Theme ohne Verlauf setzt einfach eine
   Farbe ein -- dieselbe Regel traegt beides. */
.anmelde-schlagzeile span {
  background: var(--t-titel-hervor);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.anmelde-vorspann {
  margin: 0;
  color: var(--t-still);
  font-size: clamp(1.125rem, 1.6vw, 1.5rem);
  line-height: 1.45;
}

/* ---------- Die Karte ---------- */
.anmelde-karte {
  position: relative;
  width: min(100%, 38rem);
  justify-self: center;
  border: var(--t-rand-breite) solid var(--t-karte-rand);
  border-radius: var(--t-rundung);
  background: var(--t-karte);
  box-shadow: var(--t-karte-schatten);
  -webkit-backdrop-filter: blur(var(--t-karte-blur));
  backdrop-filter: blur(var(--t-karte-blur));
}
.anmelde-karte__inhalt {
  position: relative;
  padding: clamp(1.875rem, 4vw, 3.25rem);
}

.anmelde-ueberzeile {
  margin: 0 0 .5rem;
  color: var(--t-ueberzeile);
  font-family: var(--t-schrift-ueber);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: var(--t-ueber-sperr);
  text-transform: uppercase;
}
.anmelde-titel {
  margin: 0 0 .375rem;
  color: var(--t-titel);
  font-family: var(--t-schrift-titel);
  font-size: clamp(2rem, 3vw, 2.75rem);
  font-weight: var(--t-titel-fett);
  line-height: 1.08;
  letter-spacing: var(--t-titel-sperr);
}
.anmelde-still {
  margin: 0 0 2rem;
  color: var(--t-still);
  font-size: 1.125rem;
}

.anmeldeseite label {
  display: block;
  margin: 0 0 .5rem;
  color: var(--t-still);
  font-family: var(--t-schrift-ueber);
  font-size: .875rem;
  font-weight: 500;
}

/* Ein Feld mit Symbol links. Der Rahmen liegt am Feld, nicht am
   Eingabefeld -- so sitzt das Symbol innerhalb der Umrandung. */
.anmelde-feld {
  display: flex;
  align-items: center;
  gap: .75rem;
  height: 3.875rem;
  margin-bottom: 1.125rem;
  padding: 0 1rem;
  border: var(--t-rand-breite) solid var(--t-feld-rand);
  border-radius: var(--t-feld-rundung);
  background: var(--t-feld);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.anmelde-feld:focus-within {
  border-color: var(--t-ueberzeile);
  box-shadow: 0 0 0 4px var(--t-fokus-ring);
}

/* Die Symbole nehmen die Schriftfarbe an. Als <img> koennten sie
   das nicht -- blaue Symbole auf einer Terrakotta-Kachel waeren
   der naechste halb umgefaerbte Bildschirm. Deshalb liegen sie
   im Markup als inline-SVG mit currentColor. */
.anmelde-feld svg {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  color: var(--t-still);
}
.anmelde-feld input {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--t-text);
  font: inherit;
  font-size: 1.0625rem;
  outline: 0;
}
.anmelde-feld input::placeholder { color: var(--t-still); opacity: .75; }

/* Safari faerbt automatisch ausgefuellte Felder gelb. Auf
   dunklem Grund unlesbar -- und auf hellem ebenso haesslich. */
.anmelde-feld input:-webkit-autofill {
  -webkit-text-fill-color: var(--t-text);
  -webkit-box-shadow: 0 0 0 60px var(--t-feld-voll) inset;
}

.anmelde-auge {
  display: grid;
  place-items: center;
  padding: .3rem .45rem;
  border: var(--t-rand-breite) solid transparent;
  border-radius: calc(var(--t-feld-rundung) - 3px);
  background: transparent;
  color: var(--t-still);
  cursor: pointer;
}
.anmelde-auge svg { width: 1.375rem; height: 1.375rem; }
.anmelde-auge:hover,
.anmelde-auge[aria-pressed="true"] {
  border-color: var(--t-feld-rand);
  color: var(--t-text);
}

.anmelde-knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.125rem;
  width: 100%;
  height: 4rem;
  margin-top: .5rem;
  border: 0;
  border-radius: var(--t-feld-rundung);
  background: var(--t-akzent);
  box-shadow: var(--t-akzent-schatten);
  color: var(--t-akzenttext);
  font-family: var(--t-schrift-titel);
  font-size: 1.125rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform .2s ease, filter .2s ease;
}
.anmelde-knopf:hover { transform: translateY(-2px); filter: brightness(1.06); }
.anmelde-knopf:active { transform: translateY(0); }
.anmelde-knopf:disabled { opacity: .6; cursor: default; transform: none; }

.anmelde-vergessen {
  display: block;
  margin-top: 1.375rem;
  color: var(--t-ueberzeile);
  font-size: .9375rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.anmelde-vergessen:hover { text-decoration: underline; }

/* Die Fehlermeldung muss auf jedem der zehn Gruende lesbar
   bleiben. Deshalb bekommt sie ihre eigenen Variablen und nicht
   das Rot aus der Anwendung. */
.anmeldeseite .fehler {
  margin: 0 0 1rem;
  padding: .75rem 1rem;
  border: 1px solid var(--t-fehler-rand);
  border-radius: var(--t-feld-rundung);
  background: var(--t-fehler-grund);
  color: var(--t-fehler-text);
  font-size: .9375rem;
  line-height: 1.5;
}

.anmelde-schloss {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5625rem;
  margin: 1.75rem 0 0;
  color: var(--t-still);
  font-size: .75rem;
}
.anmelde-punkt {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--t-ueberzeile);
  animation: anmelde-puls 2s infinite;
}
@keyframes anmelde-puls {
  0%   { box-shadow: 0 0 0 0 var(--t-fokus-ring); }
  70%  { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ---------- Seitenspalte ---------- */
/* Ein Faden, an dem drei Plaettchen haengen. Er zeigt, dass in
   Plenum eines aufs andere folgt -- ein Vorgang ist eine Kette,
   kein Stapel. Themes ohne Schmuck blenden ihn ueber
   --t-faden-deck aus. */
.anmelde-spalte { position: relative; min-height: 33rem; }

.anmelde-faden {
  position: absolute;
  left: .625rem;
  top: .25rem;
  width: 8.75rem;
  height: 32.5rem;
  opacity: var(--t-faden-deck);
}
.anmelde-faden svg { width: 100%; height: 100%; }

.anmelde-plaettchen {
  position: absolute;
  right: 0;
  width: min(100%, 15rem);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.0625rem 1.1875rem;
  border: var(--t-rand-breite) solid var(--t-plaettchen-rand);
  border-radius: var(--t-plaettchen-rundung);
  background: var(--t-plaettchen);
  box-shadow: var(--t-plaettchen-schatten);
  color: var(--t-plaettchen-text);
  -webkit-backdrop-filter: blur(var(--t-karte-blur));
  backdrop-filter: blur(var(--t-karte-blur));
}
.anmelde-plaettchen svg.anmelde-plaettchen__zeichen {
  width: 3.25rem;
  height: 3.25rem;
  flex: none;
  padding: .625rem;
  border: 1px solid var(--t-plaettchen-rand);
  border-radius: calc(var(--t-plaettchen-rundung) - 5px);
  color: var(--t-ueberzeile);
}
.anmelde-plaettchen strong,
.anmelde-plaettchen span span { display: block; }
.anmelde-plaettchen strong {
  font-family: var(--t-schrift-ueber);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.anmelde-plaettchen span span {
  margin-top: .25rem;
  color: var(--t-plaettchen-still);
  font-size: .875rem;
}

.anmelde-plaettchen--1 { top: 3.375rem; }
.anmelde-plaettchen--2 { top: 13.625rem; }
.anmelde-plaettchen--3 { top: 23.875rem; }

/* Ein langsames Schweben, versetzt. Nicht als Schmuck: Es nimmt
   der Seite die Starre, waehrend man auf die Anmeldung wartet. */
@keyframes anmelde-schweben {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
.anmelde-plaettchen { animation: anmelde-schweben 5.5s ease-in-out infinite; }
.anmelde-plaettchen--2 { animation-delay: .5s; }
.anmelde-plaettchen--3 { animation-delay: 1s; }

/* ---------- Welle ---------- */
.anmelde-welle {
  position: absolute;
  z-index: 1;
  left: -3%;
  right: -3%;
  bottom: -2%;
  opacity: var(--t-welle-deck);
  pointer-events: none;
}
.anmelde-welle svg { display: block; width: 100%; height: auto; }

/* ---------- Einzelne Karte (kein Space, Einladung) ---------- */
/* Eine Karte allein, mittig. Kein Aufmacher, keine Seitenspalte
   -- wer hier ist, will eine Sache erledigen. */
.anmelde-buehne--einzeln {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 32rem;
}
.anmelde-buehne--einzeln .anmelde-karte { width: min(100%, 30rem); }

.anmelde-bescheid {
  margin-top: 1.5rem;
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--t-plaettchen-rand);
  border-radius: var(--t-feld-rundung);
  background: var(--t-plaettchen);
}
.anmelde-bescheid p {
  margin: 0;
  color: var(--t-plaettchen-text);
  font-size: .9375rem;
  line-height: 1.6;
}
.anmelde-kleingedruckt {
  margin-top: .75rem !important;
  color: var(--t-still) !important;
  font-size: .84375rem !important;
}

/* ---------- Wer Bewegung abgestellt hat ---------- */
@media (prefers-reduced-motion: reduce) {
  .anmelde-punkt,
  .anmelde-plaettchen { animation: none; }
  .anmelde-knopf,
  .anmelde-feld { transition: none; }
}

/* ---------- Schmalere Fenster ---------- */
/* Unter 75 rem wird die dritte Spalte zu schmal -- dann lieber
   ganz weg als gequetscht. */
@media (max-width: 75rem) {
  .anmelde-buehne { grid-template-columns: minmax(17rem, .9fr) minmax(26rem, 1.2fr); }
  .anmelde-spalte { display: none; }
}

@media (max-width: 60rem) {
  .anmelde-buehne { display: block; min-height: auto; }
  .anmelde-vorstellung { margin: 2rem 0 2.25rem; }
  .anmelde-zeichen__bild { width: 5.5rem; height: 5.5rem; }
  .anmelde-zeichen { margin-bottom: 1.625rem; }
  .anmelde-schlagzeile { font-size: 3.375rem; }
  .anmelde-karte { margin: 0 auto; }
  .anmelde-welle { bottom: 0; }
}

@media (max-width: 34rem) {
  .anmeldeseite { padding: 1.25rem; }
  .anmelde-marke span { display: none; }
  .anmelde-zeichen { gap: .875rem; }
  .anmelde-zeichen__bild { width: 4.5rem; height: 4.5rem; }
  .anmelde-zeichen__name { font-size: 2.75rem; }
  .anmelde-zeichen__unter { font-size: .9375rem; }
  .anmelde-schlagzeile { font-size: 2.875rem; }
  .anmelde-karte__inhalt { padding: 1.625rem 1.25rem; }
  .anmelde-titel { font-size: 1.9375rem; }
}