/* ================= Busy Overlay ================= */
/* Wird angezeigt, wenn das Formular im "Warten"-Zustand ist */
body.is-busy, body.is-busy * { cursor: wait !important; }

#busyOverlay {
  position: fixed;           /* Overlay über gesamte Seite */
  inset: 0;                  /* alle Ränder = 0 (oben/rechts/unten/links) */
  display: none;             /* Standard: ausgeblendet, per JS auf 'grid' */
  place-items: center;       /* Inhalt mittig horizontal/vertikal */
  background: rgba(255,255,255,.75); /* halbtransparent weißer Hintergrund */
  z-index: 9999;             /* ganz oben über allem */
  font: 16px/1.4 Arial, sans-serif;
}

.overlay-content { text-align: center; }

.spinner {
  width: 48px; height: 48px;
  border: 4px solid #ccc;    /* grauer Ring */
  border-top-color: #333;    /* oberes Segment dunkler → Animation sichtbar */
  border-radius: 50%;        /* runder Kreis */
  animation: spin .9s linear infinite; /* Endlos-Rotation */
  margin-bottom: 12px;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ================= Sprach-Umschalter ================= */
/* Container für die Sprach-Kürzel (DE / EN) */
.lang-switch {
  display: flex;
  gap: 8px;                  /* Abstand zwischen den Buttons */
  justify-content: flex-end; /* rechtsbündig ausgerichtet */
  margin-bottom: 10px;
}

.lang-pill {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 14px;
  border: 1px solid #ccc;
  text-decoration: none;
  font-family: Arial, sans-serif;
  font-size: 12px;
  background: #f7f7f7;
}

/* aktive Sprache optisch hervorheben */
.lang-pill.active {
  border-color: #2E8B57;     /* grün */
  box-shadow: 0 0 0 2px rgba(46,139,87,.15) inset;
  font-weight: bold;
}
.lang-switch a:hover { filter: brightness(0.97); }

/* ================= Login-Fenster ================= */
.login-container {
  width: 260px;              /* feste Breite (kompakte Box) */
  margin: 100px auto;        /* Abstand nach oben + mittig horizontal */
  padding: 20px;
  border: 3px solid #888888;
  border-radius: 10px;
  background-color: #cccccc; /* hellgrauer Hintergrund */
  box-shadow: 12px 12px 30px rgba(0, 0, 0, 0.3); /* Schatten */
  text-align: center;
}

/* Logo- bzw. Markenzeile */
.brand-title {
  font-size: 12px;
  font-family: Verdana, sans-serif;
  color: #777;
  margin-bottom: 5px;
}

/* Titel „Bitte einloggen“ */
.login-title {
  font-size: 16px;
  font-family: Verdana, sans-serif;
  color: #333;
  margin-bottom: 15px;
}

/* ================= Formular ================= */
.login-form {
  display: flex;
  flex-direction: column;
  gap: 20px;                 /* Abstand zwischen allen Feldern */
}

.field { width: 100%; }

/* Eingabefelder Benutzer/Passwort */
.login-form input[type="text"],
.login-form input[type="password"] {
  font-family: Verdana, sans-serif;
  width: 100%;
  padding: 10px;
  border: 2px solid #444;
  border-radius: 5px;
  font-size: 16px;
  background-color: #f9f9f9;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
}

/* Extra-Abstand nur zwischen Name- und Passwortfeld */
#user_input {
  margin-bottom: 10px; /* Wert hier steuert gezielt nur diesen Abstand */
}

/* Hover-Effekt Eingabefelder */
.login-form input[type="text"]:hover,
.login-form input[type="password"]:hover {
  border-color: #1a73e8;
  box-shadow: 0 0 8px rgba(26,115,232,0.6);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* ================= Passwort-Eye ================= */
/* Container für Passwortfeld + Auge */
.password-field { position: relative; width: 100%; }
.password-input  { width: 100%; padding-right: 40px; box-sizing: border-box; }
.password-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 16px;
  color: #555;
}

/* ================= Buttons nebeneinander ================= */
/* Zwei gleich breite Buttons nebeneinander, exakt ausgerichtet */
.button-row {
  display: grid;
  grid-template-columns: 1fr 1fr;  /* zwei gleich große Spalten */
  gap: 10px;
  width: 100%;
  margin-top: 4px;                 /* Abstand nach oben */
  align-items: stretch;            /* gleiche Höhe erzwingen */
}

/* Normalisierung, falls globale Styles stören */
.button-row a.standardbutton,
.button-row button.standardbutton,
.button-row input[type="submit"] {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 28px;
  max-height: 28px;
  box-sizing: border-box;
  padding: 10px 16px !important;
  text-align: center !important;
  margin: 0 !important;
  background-position: center center !important;
  background-repeat: no-repeat;
}

/* Falls Buttons ein ::before-Icon haben */
.button-row a.standardbutton::before,
.button-row button.standardbutton::before {
  position: static !important;
  margin-right: 5px;
  transform: none !important;
}

/* Für zusätzliche <input type="submit">-Buttons */
.login-form input[type="submit"] {
  width: 100%;
  padding: 10px 14px;
  box-sizing: border-box;
}

/* ================= Fehlermeldung ================= */
.message {
  margin-top: 8px;
  font-size: 14px;
  font-family: Arial, sans-serif;
  color: red;
  font-weight: bold;
  background-color: #ffe6e6;
  padding: 10px;
  border-radius: 5px;
  display: inline-block;
}

/* ================= Optional: Immer mittig ================= */
/* Body-Klasse 'login-centered' → Login-Box wird immer mittig angezeigt */
body.login-centered {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;   /* horizontal */
  align-items: center;       /* vertikal */
}