/* ============================================================
   Login
   Eigenes Vollbild statt der App-Chrome: vor der Anmeldung gibt es
   keine Navigation zum Zeigen, deshalb ueberschreibt login.html den
   ganzen {% block body %}, nicht nur {% block content %}.
   ============================================================ */
.login-wrap {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  min-height: 100dvh;
}

/* Selektor .login-wrap .login-panel statt nur .login-panel: die Regel
   [class*="panel"] weiter unten trifft "login-panel" per Teilstring-
   Zufall und erzwingt mit !important Weiss und einen Rahmen - derselbe
   Fund wie bei [class*="stat"] und .status-badge in Schritt 6. Bei
   gleicher Spezifitaet und beiderseits !important entscheidet sonst nur
   die Position im Quelltext; die zusaetzliche Klasse hebt die
   Spezifitaet an, damit die Reihenfolge keine Rolle mehr spielt. */
.login-wrap .login-panel {
  background: var(--taupe) !important;
  border: 0 !important;
  display: flex;
  align-items: center;
  padding: var(--s7);
}

/* Auch "login-panel-inner" enthaelt "panel" und wird von derselben
   Wildcard-Regel getroffen (weisser Hintergrund, Rahmen) - gleicher
   Grund, gleiche Loesung wie beim Elternelement oben. */
.login-wrap .login-panel-inner {
  background: transparent !important;
  border: 0 !important;
  margin: auto 0;
  text-align: left;
}

/* Beschnittenes SVG: die linke Konturkante liegt exakt bei 0, dadurch
   fluchtet die Wortmarke mit dem Text darunter. */
.login-logo svg {
  width: min(360px, 78%);
  height: auto;
  display: block;
}

.login-claim {
  margin: 18px 0 0;
  font-family: var(--f-body);
  font-size: 1.5rem;
  color: #ffffff;
  letter-spacing: 0.01em;
}

.login-form-side {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s7);
}

.login-form {
  width: 100%;
  max-width: 360px;
}

.login-form h1 {
  margin-bottom: var(--s2);
}

.login-intro {
  margin-bottom: var(--s5);
}

.login-form .messages {
  margin-bottom: var(--s4);
}

.login-hint {
  margin: var(--s4) 0 0;
  font-size: 0.84rem;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 860px) {
  .login-wrap {
    grid-template-columns: 1fr;
  }

  .login-panel {
    padding: var(--s6);
    min-height: 220px;
  }

  .login-form-side {
    padding: var(--s6);
  }
}

/* ---------- Formularfeld Login ----------
   Bewusst auf .login-form beschraenkt, nicht als bare .field: die Klasse
   "field" existiert schon in entry_form.html mit eigener Bedeutung
   (Grid-Spalte, kein margin-bottom). Eine ungerichtete Regel haette dort
   ungewollt zusaetzlichen Abstand in ein bestehendes Grid-Layout
   eingeschleust. */
.login-form .field {
  margin-bottom: var(--s4);
}

.login-form .field label {
  display: block;
  margin-bottom: 6px;
}

/* ---------- Buttons: Primaer und Block ---------- */
.btn-primary {
  background: var(--taupe-dark);
  color: #ffffff;
}

.btn-primary:hover {
  background: var(--taupe-hover);
}

.btn-block {
  display: block;
  width: 100%;
  text-align: center;
}

.main-nav a,
.nav-dropdown summary {
  color: var(--agsta-text) !important;
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
}

.main-nav a:hover,
.nav-dropdown summary:hover {
  color: var(--taupe-dark) !important;
}

.nav-right a {
  color: var(--agsta-muted) !important;
}

/* Dropdown Verwaltung */

.nav-dropdown summary {
  list-style: none;
}

.nav-dropdown summary::-webkit-details-marker {
  display: none;
}

.nav-dropdown summary::after {
  font-size: 0.85em;
  color: var(--agsta-muted);
}

.nav-dropdown[open] summary::after {
  content: " ↑";
}

.nav-dropdown-menu a {
  display: block;
  padding: 14px 16px;
  border-bottom: 1px solid var(--agsta-border);
  white-space: nowrap;
}

.nav-dropdown-menu a:last-child {
  border-bottom: 0;
}

/* Hauptbereich: weiß und ohne beige Grundfläche */
main.container {
  background: #ffffff !important;
}

/* Runde Rahmen zurücknehmen */
section,
table,
input,
select,
textarea,
button,
a.button,
a.btn {
  border-radius: 0 !important;
}

/* Karten/Boxen ruhiger: keine weichen beige Flächen */
section {
  background: #ffffff;
  border-color: var(--agsta-border);
  box-shadow: none;
}