/* ============================================================
   Meistertrainer — Marke fuer die Anmeldeseite (Etappe "Marke", 24.09.2026)
   Nur in index.html eingebunden. Eigene Gestaltung obendrauf, aendert
   stil.css nicht - nutzt aber dessen Farbvariablen (--farbe-*, --raster,
   --radius-gross), die auf :root stehen und deshalb hier verfuegbar sind.
   Die Abstaende zwischen den drei Bloecken unten (Kopf/Illustration/Karte)
   liefert bereits .anmeldeseite (gap, siehe stil.css) - hier nur die
   Bloecke selbst gestalten, keine zusaetzlichen Aussenabstaende.
   ============================================================ */

.marke-kopf {
  text-align: center;
}

.marke-kopf__wortmarke {
  display: block;
  width: 220px;
  max-width: 70%;
  height: auto;
  margin: 0 auto calc(var(--raster) * 1.5);
}

/* Wasserzeichen im Seitenhintergrund (Auftrag "Schlicht", 24.09.2026): eine reine Zirkel-Form
   (bilder/zirkel-hintergrund.svg, kein Logo mit blauer Flaeche) als sehr blasses Muster hinter
   der Anmeldekarte. Ueber eine Maske statt eines Bildes eingebunden, damit die Farbe den
   vorhandenen Textfarbvariablen folgt und in beiden Farbschemata von selbst passt - kein
   Umschalten auf ein zweites Bild noetig. position:fixed haengt die Form am Bildschirm fest,
   sie scrollt nicht mit; z-index:-1 haelt sie hinter Karte und Formularfeldern, die
   uneingeschraenkt lesbar bleiben. */
.anmeldeseite::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  mask-image: url("bilder/zirkel-hintergrund.svg");
  -webkit-mask-image: url("bilder/zirkel-hintergrund.svg");
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: 100% 100%;
  -webkit-mask-position: 100% 100%;
  mask-size: 140vw auto;
  -webkit-mask-size: 140vw auto;
  background-color: var(--farbe-text);
  opacity: 0.05;
}

@media (prefers-color-scheme: dark) {
  .anmeldeseite::before {
    opacity: 0.06;
  }
}

.marke-karte {
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-gross);
  padding: calc(var(--raster) * 3);
  display: flex;
  flex-direction: column;
  gap: calc(var(--raster) * 3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

@media (prefers-color-scheme: dark) {
  .marke-karte {
    box-shadow: none;
  }
}

/* Nachbesserung 24.09.2026 (Opus-Pruefung): Zwischen Passwortfeld und "Anmelden"-Knopf
   klaffte eine grosse Luecke. Ursache in stil.css (nicht geaendert, nur hier ausgeglichen):
   .fehlertext hat dort bewusst min-height:20px, damit spaeter erscheinender Fehlertext
   nichts verschiebt - plus je 16px .formular-gap davor und danach ergibt das die Luecke,
   solange <p class="fehlertext"> leer ist. :empty blendet die leere Reserve komplett aus
   (kein Flex-Gap fuer display:none-Elemente) - sobald js/index.js per textContent einen
   Fehler einsetzt, ist der Absatz nicht mehr leer, :empty greift nicht mehr und die
   gewohnte Reserve samt Abstand steht wieder normal da. Nur index.html betroffen. */
.anmeldeseite .fehlertext:empty {
  display: none;
}