/* ============================================================
   Kontoknopf und Anmeldefenster
   ============================================================
   Teil der nach Funktion aufgeteilten Gestaltung (29.08.2026).

   Vorher lag alles in einer seite.css mit 1.940 Zeilen, und jede neue
   Funktion wurde hinten drangehaengt. Max am 29.08.2026: "dass nicht
   alles in App.js reinkommt und in CSS, sondern dass das nach Funktion
   getrennt wird." Beim JavaScript war das laengst so, beim CSS nicht.

   Neue Regeln gehoeren in die Datei ihrer Funktion, nicht ans Ende der
   naechstbesten. Die Einbindereihenfolge in den HTML-Dateien entspricht
   der Reihenfolge, in der die Bloecke vorher in seite.css standen -
   daran haengt die Kaskade. tests/frontend-architecture.test.js prueft
   beides.
   ============================================================ */

/* ============================================================
   Anmeldung auf der ganzen Vereinsseite (29.08.2026)
   ============================================================
   Max: "dass der Login ausgelagert wird, nicht mehr nur auf der
   Quizseite, sondern fuer die generelle Seite" - mit einem Knopf oben
   im Kopf und einem Fenster, das jede Seite aufrufen kann.
   Verhalten und Markup: src/core/anmeldung.js, src/ui/login-dialog.js. */

/* ---------- Kontoknopf im Seitenkopf ---------- */

.konto-bereich { position: relative; flex: none; }

.konto-knopf {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 8px 15px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--card); color: var(--marke-hell);
  font: inherit; font-size: .85rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.konto-knopf:hover { background: var(--marke-lighter); border-color: var(--marke-hell); }

.konto-symbol {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.konto-knopf.ist-angemeldet { position: relative; }
.konto-knopf.ist-angemeldet::after,
.konto-knopf.hat-neuigkeit::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 2px var(--card);
}
.konto-knopf.hat-neuigkeit::after { background: #f59e0b; }

.konto-menue {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 220px; z-index: 60;
  /* Das Menue traegt seit dem 30.08.2026 auch die Profil-Eintraege. Auf
     einem kleinen Geraet im Querformat waere es sonst laenger als der
     Bildschirm und die unteren Punkte waeren nicht erreichbar. */
  max-height: calc(100vh - 90px);
  max-height: calc(100dvh - 90px);
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 8px;
}
.konto-menue[hidden] { display: none; }
.konto-menue-kopf {
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.konto-menue-kopf strong { display: block; font-size: .9rem; }
.konto-menue-kopf span { display: block; color: var(--muted); font-size: .74rem; margin-top: 2px; }
.konto-menue a,
.konto-menue button {
  display: block; width: 100%; text-align: left;
  padding: 10px; min-height: 42px;
  border: 0; border-radius: 9px; background: transparent;
  font: inherit; font-size: .84rem; color: var(--marke-hell);
  text-decoration: none; cursor: pointer;
}
.konto-menue a:hover,
.konto-menue button:hover { background: var(--marke-lighter); }
.konto-menue .konto-abmelden { color: #b91c1c; font-weight: 600; }

@media (max-width: 960px) {
  /* Der Kontoknopf bleibt auch auf dem Handy sichtbar und wandert NICHT
     ins Burgermenue: wer sich anmelden will, soll nicht erst ein Menue
     aufklappen muessen. Er steht links vom Menueknopf. */
  .konto-bereich { order: 1; margin-left: auto; }
  /* Steht der Quiz-Knopf davor, hat DER den Auto-Rand (siehe
     stil/kopf-fuss.css). Zwei Auto-Raender wuerden sich den freien Platz
     teilen und eine Luecke mitten in die Gruppe reissen. */
  .nav-anmelden ~ .konto-bereich { margin-left: 0; }
  .nav-knopf { order: 2; margin-left: 0; }
  .konto-knopf {
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
  }
  .konto-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .konto-menue { min-width: 200px; }
}

/* Der Kontoknopf nimmt im Kopf rund 90 px weg. Ohne diese Regel bricht
   "FV Loebtauer Kickers" auf schmalen Geraeten auf zwei Zeilen (im Test am
   29.08.2026 bei 390 px gesehen). Statt den Namen zu kuerzen wird enger
   gesetzt - der volle Vereinsname ist Max' ausdrueckliche Vorgabe. */
@media (max-width: 430px) {
  .kopf-innen { gap: 6px; padding: 0 12px; }
  .marken-knopf { padding: 4px; }
  /* Seit dem 30.08.2026 steht auch der Quiz-Knopf in dieser Zeile. Bei
     390 px (iPhone 12-15) gehen sich Wappen, Vereinsname, Quiz, Konto und
     Burgermenue nur mit diesen engeren Massen aus - nachgemessen an
     derselben Breite, an der am 29.08.2026 der Vereinsname umbrach. */
  .nav-anmelden { padding: 8px 12px !important; font-size: .78rem; }
  .nav-knopf { width: 40px; height: 40px; }
}

/* ---------- Anmeldefenster ---------- */

/* ============================================================
   iPhone-Korrekturen (30.08.2026)
   ============================================================
   Max: "Der Anmeldebutton, das Fenster sieht halt irgendwie verschoben
   aus ... Allgemein ist irgendwie sehr rangezoomt."

   Drei Ursachen, alle hier behoben:

   1. Das Fenster war senkrecht zentriert und hatte keine Hoehengrenze.
      Sobald die iOS-Tastatur aufgeht, schrumpft nur der sichtbare
      Bereich (visual viewport), nicht der Layout-Bereich - das zentrierte
      Fenster bleibt auf der alten Mitte stehen und rutscht damit unter
      die Tastatur. Es haengt jetzt oben fest und scrollt in sich selbst.
   2. 100vh haette dasselbe Problem: iOS rechnet vh gegen die AUSGEKLAPPTE
      Seitenleiste. Deshalb 100dvh mit vh als Rueckfall fuer aeltere
      Browser.
   3. Die Eingabefelder standen auf .92rem (rund 14.7 px). Unter 16 px
      zoomt iOS Safari beim Antippen ungefragt in die ganze Seite - und
      zoomt danach nicht wieder heraus. Genau das ist das "rangezoomt".
      Die Felder stehen deshalb fest auf 16 px.

   env(safe-area-inset-*) faellt ohne "viewport-fit=cover" auf 0 zurueck;
   das max() haelt den Abstand dann bei 16 px. So bleibt die Regel auch
   dann richtig, wenn das Meta-Tag spaeter erweitert wird. */

.anmeldedialog {
  border: 0; padding: 0; background: transparent;
  max-width: 420px; width: calc(100% - 32px);
  color: var(--text);
  /* Oben verankert statt zentriert - siehe Punkt 1. */
  margin: max(16px, env(safe-area-inset-top)) auto max(16px, env(safe-area-inset-bottom));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.anmeldedialog::backdrop { background: rgba(17, 24, 39, .55); }

.anmelde-karte {
  position: relative;
  background: var(--card);
  border-radius: var(--radius);
  padding: 26px 24px 22px;
  box-shadow: 0 18px 50px rgba(17, 24, 39, .28);
  font-family: var(--font-text);
}

.anmelde-schliessen {
  position: absolute; top: 10px; right: 10px;
  width: 38px; height: 38px;
  border: 0; border-radius: 50%; background: transparent;
  font-size: 1.4rem; line-height: 1; color: var(--muted); cursor: pointer;
}
.anmelde-schliessen:hover { background: var(--marke-lighter); color: var(--text); }

.anmelde-titel { font-family: var(--font-titel); font-size: 1.25rem; margin: 0 34px 4px 0; }
.anmelde-grund { margin: 0 0 4px; color: var(--muted); font-size: .85rem; line-height: 1.5; }
.anmelde-verein {
  margin: 0 0 14px; padding: 8px 12px;
  background: var(--green-light); color: var(--green-dark);
  border-radius: 9px; font-size: .82rem; font-weight: 600;
}

.anmelde-schritt { margin-top: 16px; }
.anmelde-feld { display: block; margin-bottom: 14px; }
/* Auf die Beschriftung eingegrenzt. Vorher traf diese Regel JEDES
   direkte span im Feld - also auch die Zeile mit Eingabefeld und
   "Anzeigen"-Knopf, deren display:flex sie ueberschrieb. Der Knopf
   rutschte dadurch unter das Feld. Gefunden im Test am 29.08.2026. */
.anmelde-feld > .anmelde-bezeichnung { display: block; font-size: .8rem; font-weight: 700; color: var(--marke-hell); margin-bottom: 6px; }
.anmelde-feld input,
.anmelde-feld select {
  box-sizing: border-box; width: 100%; min-height: 46px;
  border: 1px solid var(--border); border-radius: 10px;
  padding: 11px 13px; font: inherit; background: #fff;
  /* 16px ist keine Geschmacksfrage: alles darunter loest auf iOS Safari
     beim Antippen den Auto-Zoom aus (siehe Kopf dieses Abschnitts).
     Feste Pixel statt rem, damit eine geaenderte Grundschriftgroesse den
     Wert nicht unbemerkt wieder unter die Schwelle druecken kann. */
  font-size: 16px;
}
.anmelde-feld input:focus,
.anmelde-feld select:focus { outline: none; border-color: var(--marke-hell); }

.anmelde-merken,
.login-merken {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 4px 0 16px; color: var(--text); cursor: pointer;
}
.anmelde-merken input,
.login-merken input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--green); }
.anmelde-merken span,
.login-merken span { display: grid; gap: 2px; line-height: 1.35; }
.anmelde-merken strong,
.login-merken strong { font-size: .86rem; }
.anmelde-merken small,
.login-merken small { color: var(--muted); font-size: .76rem; }

/* Eingabefeld plus Wortknopf "Anzeigen"/"Verbergen" in einer Zeile. */
.anmelde-eingabezeile { display: flex; gap: 8px; align-items: stretch; }
.anmelde-eingabezeile input { flex: 1; min-width: 0; }
.anmelde-zeigen {
  flex: none; min-height: 46px; padding: 0 13px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--card); color: var(--marke-hell);
  font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer;
}
.anmelde-zeigen:hover { background: var(--marke-lighter); }

.anmelde-haupt {
  width: 100%; min-height: 48px;
  border: 0; border-radius: 999px;
  background: var(--marke); color: #fff;
  font: inherit; font-size: .92rem; font-weight: 700; cursor: pointer;
}
.anmelde-haupt:hover:not(:disabled) { background: var(--marke-dunkel); }
.anmelde-haupt:disabled { opacity: .45; cursor: not-allowed; }

.anmelde-zurueck {
  width: 100%; margin-top: 9px; min-height: 40px;
  border: 0; background: transparent; color: var(--muted);
  font: inherit; font-size: .8rem; cursor: pointer; text-decoration: underline;
}
.anmelde-zurueck:hover { color: var(--text); }

.anmelde-fehler {
  margin: 12px 0 0; padding: 10px 13px;
  background: var(--red-hell); color: #991b1b;
  border-radius: 9px; font-size: .82rem; line-height: 1.5;
}

/* Der Gastweg ist ein echter Knopf, kein Textlink (Max, 29.08.2026:
   "nicht so, dass es nur als Textklickfeld ist, sondern wirklich als
   Button"). Optisch klar zweitrangig, damit die Anmeldung der Hauptweg
   bleibt - aber gleich gross und gleich gut zu treffen. */
.anmelde-gast { margin-top: 18px; }
.anmelde-trenner {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 14px; color: var(--muted); font-size: .74rem;
  text-transform: uppercase; letter-spacing: .06em;
}
.anmelde-trenner::before,
.anmelde-trenner::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.anmelde-gastknopf {
  width: 100%; min-height: 48px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--card); color: var(--marke-dunkel);
  font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer;
}
.anmelde-gastknopf:hover { background: var(--marke-lighter); border-color: var(--marke-hell); }
.anmelde-gasthinweis { margin: 8px 0 0; color: var(--muted); font-size: .76rem; text-align: center; }

.anmelde-hilfe {
  margin: 16px 0 0; padding-top: 14px;
  border-top: 1px solid var(--border);
  color: var(--muted); font-size: .76rem; line-height: 1.5;
}

/* Maskierte Eingabefelder ohne type="password" - dieselbe Begruendung wie
   in style.css (10.08.2026): Safari und iOS blenden bei echten
   Passwortfeldern ungefragt den "Starkes Passwort verwenden"-Vorschlag
   ein und ignorieren autocomplete="off". Fuer eine vierstellige PIN ist
   das nur verwirrend. Kann der Browser -webkit-text-security nicht,
   schaltet masked-input.js die Felder doch auf type="password" um. */
input.maskiert { -webkit-text-security: disc; text-security: disc; }
input.maskiert.sichtbar { -webkit-text-security: none; text-security: none; }