/* Login-Formular vor dem Editor. Bewusst NICHT an die Kundenfarben angepasst (wie die
   Inline-Editoren) - immer schwarz/weiss/grau, egal fuer welchen Kunden.
   Gilt fuer alle drei Zustaende (Anmelden / Passwort vergessen / neues Passwort), siehe
   auth.js - ein Vokabular fuer alle drei, keine eigene Optik je Zustand. */

/* ============================================================================
   DIE KARTE (23.07.2026 zurueckgebaut auf gestapelte Felder). Strukturell HIER
   (nicht in login-panel.css), weil auch eigenstaendige helle Seiten
   (demo-supabase.html) nur auth.css laden, keine Konsole - das Layout muss ohne
   die dunkle Konsolen-Schicht funktionieren. login-panel.css setzt nur noch die
   dunklen FARBEN obendrauf (siehe dort, "Scoped Overrides").

   E-Mail- und Passwortfeld stehen untereinander wie in jedem vertrauten Login -
   kein zweiphasiger "Weiter"-Ablauf mehr (siehe auth.js). Die Karte ist ein
   eigenes Element neben der Bearbeiten-Leiste, sie muss keine Zeile sein. */
.ga-hint {
  /* Rechts/links DIESELBEN Masse wie .ga-bar (1.5rem) - sonst startet der Hinweistext an einer
     anderen Kante als die Formularfelder darunter (live gefunden: 0.9rem vs. 1.5rem sah
     "eingequetscht" aus, nicht wie Teil derselben Karte). Rechts zusaetzlich Platz fuer den ×
     -Knopf reserviert (siehe .cms-console-close), damit der Text nie darunter verschwindet. */
  margin: 1.4rem 3rem 0 1.5rem;
  font-size: 0.85rem;
  line-height: 1.4;
  color: #666;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}
/* Anker fuer den ×-Knopf (siehe .cms-console-close): deckt Hinweistext UND Formular gemeinsam
   ab, damit das × wirklich in der Ecke der KARTE sitzt - nicht als Zeilen-Nachbar des ersten
   Feldes (das sah wie ein Teil des E-Mail-Felds aus, war aber Zufall der Flex-Reihenfolge). */
/* display:flow-root ist hier PFLICHT, nicht nur position:relative: ohne das faltet der Browser
   den margin-top von .ga-hint (Margin Collapsing) durch diesen Anker nach AUSSEN durch - der
   Anker rutscht dadurch selbst nach unten, und das × (relativ dazu positioniert) rutscht exakt
   um diesen Betrag mit tiefer, obwohl "top: 0.9rem" im Code steht (live gefunden: × sass immer
   noch spuerbar zu tief, obwohl absolute+top/right bereits gesetzt waren - die Ursache war nicht
   die Position selbst, sondern ein falscher Nullpunkt). flow-root stoppt das Durchfalten, ohne
   sonst irgendetwas am Layout zu aendern. */
.ga-bar-mount { position: relative; display: flow-root; }
.ga-bar {
  padding: 1.5rem 1.5rem 1.75rem;
}
.ga-bar-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.9rem;
  min-width: 0;
}
.ga-error,
.ga-hinweis { padding: 0; }

/* Schliess-Knopf (nur vorhanden, wenn eine Konsole ihn braucht - siehe auth.js
   konsoleSchliessenFn). Auf hellem Grund ebenso denkbar (z.B. ein eigenstaendiges Panel
   mit eigenem Schliessen), deshalb hier als Basis, dunkle Farb-Variante in login-panel.css. */
.cms-console-close {
  /* ECHTE Kartenecke (23.07.2026 gefixt): frueher ein Flex-Nachbar des ersten Formularfelds
     (align-items:flex-start in .ga-bar) - dadurch haengte das × optisch am E-Mail-Feld statt
     an der Karte selbst (live gefunden, Kilian: "wieso ist das direkt neben der E-Mail").
     position:absolute relativ zu .ga-bar-mount (siehe dort) loest das × komplett aus dem
     Formular-Fluss - es sitzt jetzt IMMER oben rechts an der Karte, egal wie das Formular
     darunter aussieht. Bleibt trotzdem Anker fuer die eigenen ::before/::after-Striche. */
  /* top per calc() auf die Mitte der Hinweis-Textzeile ausgerichtet, nicht auf einen festen
     Abstand vom Kartenrand: .ga-hint hat margin-top 1.4rem + line-height 1.4 auf 0.85rem
     Schrift (= 1.19rem Zeilenhoehe) - deren Mitte liegt bei 1.4rem + 1.19rem/2 vom Kartenrand.
     Der Knopf (44px) wird so zentriert, dass GENAU diese Mitte auch seine eigene Mitte ist -
     rechnet sich automatisch mit, wenn Schrift/Zeilenhoehe sich mal aendern (fester Wert wie
     zuvor 0.9rem war Zufallstreffer, keine echte Ausrichtung). */
  position: absolute;
  top: calc(1.4rem + 0.595rem - var(--wz-ziel, 44px) / 2);
  right: 0.9rem;
  /* var(--wz-ziel, 44px) = dieselbe Mindest-Tippflaeche wie jeder andere Knopf im System
     (editor-shell.css "The Enforced Tap Target Rule"). Explizit auf width/height gesetzt,
     nicht nur min-width/min-height: sonst zieht eine Kundenseite mit eigenem generischen
     "button{min-width:44px}"-Tippflaechen-Reset (z.B. Rollsport style.css) den Kreis
     unbeabsichtigt groesser als hier deklariert - lieber dieselbe Groesse ABSICHTLICH
     tragen als sie zufaellig von der Kundenseite geliehen zu bekommen. Das Kreuz selbst
     (::before/::after, 15px) bleibt klein - Tinte statt Flaeche skalieren, wie ueberall
     sonst im System (DESIGN.md 5d). */
  width: var(--wz-ziel, 44px);
  height: var(--wz-ziel, 44px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 50%;
  font-size: 0;
  line-height: 1;
  cursor: pointer;
  color: #888;
  font-family: inherit;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.cms-console-close::before,
.cms-console-close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}
.cms-console-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.cms-console-close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.cms-console-close:hover { background: rgba(0, 0, 0, 0.06); color: #111; }
.cms-console-close:focus-visible { outline: none; box-shadow: 0 0 0 2px #000; color: #111; }

.ga-field-label {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #888;
  margin-bottom: 0.3rem;
  display: block;
}

/* Wrap um ein Feld (siehe auth.js feldWrap). Feste Hoehe = exakt die Feldhoehe (44px), damit
   sich der absolut positionierte Augen-Knopf (top:50%) immer exakt auf der Feldmitte zentriert,
   unabhaengig von Zeilenabstand-Eigenheiten des <input>. */
/* border-radius+overflow:hidden HIER (nicht nur am Feld selbst): zwingt alles - auch den
   Autofill-Schatten-Trick in login-panel.css - in eine sauber berechnete Rundung. Ein
   riesiger inset-box-shadow rundet seine eigenen Ecken bei extremen Werten leicht ungenau
   (sichtbarer heller Rest genau in der Kurve); eine normale overflow-Klammer schneidet
   zuverlaessiger. Der Augen-Knopf bleibt unberuehrt - er sitzt mit Abstand vom Rand, nie AUF
   der Kante. */
.ga-input-wrap { position: relative; display: block; height: 44px; border-radius: 14px; overflow: hidden; }
.ga-toggle-pw {
  position: absolute;
  right: 0.6rem;
  top: 50%;
  /* +3px statt exakt rechnerischer Mitte: Schloss (Span, kein Padding) und Auge (Button, hat
     Padding) sind beide korrekt auf 50% zentriert - rechnerisch identisch. Ein rundes/
     organisches Symbol wie das Auge wirkt bei EXAKT geometrischer Mitte trotzdem leicht zu
     hoch (bekannter optischer Effekt bei runden Formen) - der Versatz gleicht das aus. */
  transform: translateY(calc(-50% + 1px));
  display: flex;
  align-items: center; /* ohne das rutscht das SVG an der Standard-Ausrichtung (stretch) hoch,
     weil der Knopf durch sein padding hoeher ist als das SVG. */
  justify-content: center;
  background: none;
  border: none;
  padding: 0.4rem;
  color: #888;
  cursor: pointer;
  transition: color 0.15s ease, box-shadow 0.15s ease;
}
.ga-toggle-pw:hover { color: #111; }
.ga-toggle-pw:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #000; border-radius: 4px; }
/* Kein :active-Zustand mehr: sowohl der fruehere scale()-Effekt als auch die reine
   Farbvertiefung wirkten wie "wird dicker/rutscht hoch" - optische Taeuschung durch hoeheren
   Kontrast, nicht durch echte Groessenaenderung. Einfacher, ohne den Effekt ganz weglassen. */

.ga-input {
  /* Browser legen ueber eigene Eingabefelder oft eine native Optik (leichter 3D-Rand/Schatten),
     die sich NICHT allein durch "border" entfernen laesst - appearance:none schaltet das ab,
     damit unser eigenes Aussehen (background/border/radius) das einzige ist, was zu sehen ist. */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem;
  /* Gleicher Innenrand links/rechts - kein fuehrendes Icon mehr, das links Platz braeuchte.
     Nur Passwortfelder bekommen rechts extra Platz fuers Augen-Symbol (siehe unten). */
  padding: 0.7rem 0.9rem;
  border: 1px solid #ccc;
  border-radius: 14px;
  width: 100%;
  height: 44px; /* Tippflaeche - fest statt min-height, damit .ga-input-wrap exakt passt */
  box-sizing: border-box;
  color: #111;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* box-shadow statt outline: outline+border-radius rundet sich in manchen Browsern/
   Bildschirm-Skalierungen nicht sauber (sichtbare Kerbe/Ring an den Ecken). box-shadow folgt
   dem border-radius zuverlaessig. */
.ga-input:focus { outline: none; box-shadow: inset 0 0 0 2px #000; }
.ga-input[type="password"] { padding-right: 2.6rem; }

/* Edge/Chromium blendet bei type="password" einen eigenen "Passwort anzeigen"-Knopf ein
   (::-ms-reveal), der mit unserem eigenen .ga-toggle-pw kollidiert - eigener runder
   Hover-Kreis, eigene Position. Sichtbar als weisser Kreis nur beim Passwort-Feld und als
   Augen-Symbol, das nicht auf Hoehe des Schloss-Icons sitzt. Nativen Knopf abschalten, dann
   bleibt nur unser eigenes, bereits korrekt zentriertes Auge uebrig. */
.ga-input[type="password"]::-ms-reveal,
.ga-input[type="password"]::-ms-clear {
  display: none;
}

/* Chrome/Edge blenden bei erkannten gespeicherten Zugangsdaten ein EIGENES rundes Icon
   direkt IM Feld ein (E-Mail: Kontakt-Vorschlag, Passwort: Passwort-Vorschlag) - erst sobald
   Inhalt/eine Uebereinstimmung erkannt wird, nicht vorher. Das Icon liegt ueber dem Text
   (verdeckt die letzten Zeichen einer E-Mail-Adresse unabhaengig von der Feldbreite) und
   kollidiert beim Passwort mit unserem eigenen .ga-toggle-pw-Augen-Knopf. Beide nativen
   Icons abschalten, dann bleibt nur unser eigenes Aussehen sichtbar. */
.ga-input::-webkit-contacts-auto-fill-button,
.ga-input::-webkit-credentials-auto-fill-button {
  visibility: hidden;
  display: none !important;
  pointer-events: none;
  position: absolute;
  right: 0;
}
.ga-input::placeholder { color: #999; }

/* Angemeldet-bleiben-Haekchen + Passwort-vergessen-Link in einer Reihe. */
.ga-reihe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 0.85rem;
}
.ga-merken {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #444;
  cursor: pointer;
}
/* accent-color: faerbt das Haekchen selbst (ohne das ist es Browser-Standard-Blau, egal vom
   Fokus-Ring) - #111 passt zum Rest der Optik, die dunkle Konsole (login-panel.css) faerbt
   auf weiss um. */
.ga-merken input { width: 16px; height: 16px; cursor: pointer; accent-color: #111; transition: box-shadow 0.15s ease; }
/* Ohne das zeigt der Browser hier seinen eigenen blauen Standard-Fokusring - passt nicht ins
   rein schwarz/weiss/graue Vokabular dieses Bausteins. Gleiche box-shadow-Technik wie bei
   .ga-input/.ga-toggle-pw (siehe dort: outline rundet sich bei border-radius nicht ueberall
   sauber). Gilt fuer JEDES interaktive Element hier (Haken, Links, Knoepfe), nicht nur die
   zwei, die zuerst auffielen. */
.ga-merken input:focus-visible { outline: none; box-shadow: 0 0 0 2px #000; border-radius: 3px; }

.ga-link {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 0.85rem;
  background: none;
  border: none;
  color: #444;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s ease, box-shadow 0.15s ease;
}
.ga-link:hover { color: #111; }
.ga-link:focus-visible { outline: none; box-shadow: 0 0 0 2px #000; border-radius: 4px; }
.ga-link-zurueck { margin-top: 1rem; align-self: flex-start; }

.ga-submit {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  background: #111;
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 0.7rem 1rem;
  min-height: 44px; /* Tippflaeche */
  box-sizing: border-box;
  cursor: pointer;
  /* Volle Breite (Apple-Sheet-Konvention, DESIGN.md 5 "Primary"): der Knopf steht jetzt
     UNTER den gestapelten Feldern, nicht mehr daneben in einer Zeile - keine feste
     Mindestbreite noetig, die Breite des Feld-Stapels traegt die Wackel-Sicherheit von selbst. */
  width: 100%;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.ga-submit:hover { background: #000; }
.ga-submit:active:not(:disabled) { transform: scale(0.98); }
.ga-submit:disabled { background: #aaa; cursor: default; }
.ga-submit:focus-visible { outline: none; box-shadow: 0 0 0 2px #000; }

.ga-error {
  color: #B00020;
  font-size: 0.85rem;
  /* Bewusst KEIN min-height mehr: das reservierte Platz auch ohne Fehlermeldung, wodurch der
     Abstand unterm "Anmelden"-Knopf groesser wirkte als der Abstand oben zum Titel - lieber
     im (seltenen) Fehlerfall einen minimalen Sprung als im Normalfall dauerhaft schief. */
  margin: 0;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Faedet ein statt hart reinzuspringen, sobald Text drinsteht. */
  opacity: 0;
  transition: opacity 0.2s ease;
}
.ga-error:not(:empty) { opacity: 1; }
/* Erfolgs-/Status-Hinweis (z.B. "Link ist unterwegs") - gleiche Stelle wie ga-error, andere
   Farbe, damit es nicht wie ein Fehler aussieht. */
.ga-hinweis {
  color: #1a7a3d;
  font-size: 0.85rem;
  min-height: 1.2em;
  margin: 0;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.ga-hinweis:not(:empty) { opacity: 1; }

.ga-logout {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 0.8rem;
  background: none;
  border: 1px solid #ccc;
  color: #444;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.ga-logout:hover { border-color: #000; color: #000; }
.ga-logout:focus-visible { outline: none; box-shadow: 0 0 0 2px #000; }
/* Fehlte komplett - der Knopf wird waehrend des Speicherns per JS gesperrt, sah aber genauso
   klickbar aus wie sonst (kein sichtbares Feedback, dass der Klick angekommen ist). */
.ga-logout:disabled { color: #aaa; border-color: #ddd; cursor: default; }

/* Barrierefreiheit: alle oben ergaenzten Uebergaenge fast auf null, statt sie komplett zu
   entfernen - :not(:empty)-Sichtbarkeit von ga-error/ga-hinweis bleibt so ohne Sprung-Bug
   funktionsfaehig, nur eben ohne wahrnehmbare Bewegung. */
@media (prefers-reduced-motion: reduce) {
  .ga-toggle-pw,
  .ga-input,
  .ga-merken input,
  .ga-link,
  .ga-submit,
  .ga-logout,
  .ga-error,
  .ga-hinweis {
    transition-duration: 0.01ms;
  }
  .ga-submit:active:not(:disabled) { transform: none; }
}