/* ==========================================================================
   Polch Oberfläche – die Anmeldeseite (src/anmeldung.php)

   Links die Stadt auf tiefem Blau mit der Silhouette aus der Fußzeile der
   Website, rechts Logo und Formular auf Weiß. Unter 800 Pixel steht die
   Stadt als Band über dem Formular.
   ========================================================================== */

body.login {
  --of-blau:      #2E7EA5;
  --of-blau-tief: #1F5F80;
  --of-strich:    #E1E8ED;
  --of-strich-2:  #C4D1DA;
  --of-schrift:   #16202A;
  --of-schrift-3: #566876;

  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(22rem, 1fr);
  grid-template-rows: 1fr auto;
  min-height: 100vh;
  margin: 0;
  background: #FFFFFF;
  color: var(--of-schrift);
  font-family: "Polch Rubik", Rubik, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
body.login > * { grid-column: 2; }

/* ---- Die Stadt -------------------------------------------------------- */
body.login > .polch-buehne {
  grid-column: 1;
  grid-row: 1 / -1;
}
.polch-buehne {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 6vw, 5rem);
  background: linear-gradient(135deg, #18506C 0%, #1F5F80 50%, #2A7299 100%);
  color: #FFFFFF;
  isolation: isolate;
}
.polch-buehne__text { max-width: 30rem; }
.polch-buehne__dach {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.polch-buehne__titel {
  margin: 0;
  font-size: clamp(2.4rem, 1.6rem + 3vw, 4.25rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.polch-buehne__satz {
  margin: 1.25rem 0 0;
  font-size: 1.1rem;
  line-height: 1.5;
}
/* Die Silhouette der Stadt, weiß und leise am unteren Rand. Darüber ein
   Streifen in den Farben des Zeichens – Orange, Blau, Grün. */
.polch-buehne__silhouette {
  position: absolute;
  z-index: -1;
  inset: auto 0 0 0;
  height: 32%;
  background: #FFFFFF;
  opacity: 0.1;
  -webkit-mask: url("bild/silhouette.svg") bottom / 160% auto no-repeat;
  mask: url("bild/silhouette.svg") bottom / 160% auto no-repeat;
}
.polch-buehne::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: linear-gradient(90deg, #F7A800 0 33.3%, #3592BE 33.3% 66.6%, #8FA300 66.6%);
}

/* ---- Formular ----------------------------------------------------------- */
#login {
  align-self: center;
  justify-self: center;
  box-sizing: border-box;
  width: min(100%, 24rem);
  margin: 0;
  padding: 3rem 1.5rem;
}
#login h1 { margin-bottom: 1.75rem; text-align: left; }
#login h1 a {
  width: 190px;
  height: 61px;
  margin: 0;
  background: url("bild/logo-polch.svg") left center / contain no-repeat;
}
#login h1 a:focus { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--of-blau); border-radius: 6px; }

.login form {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}
.login label {
  color: var(--of-schrift);
  font-size: 14px;
  font-weight: 500;
}
.login form .input,
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
  min-height: 46px;
  margin: 6px 0 18px;
  padding: 0 14px;
  border: 1px solid var(--of-strich-2);
  border-radius: 12px;
  background: #FFFFFF;
  color: var(--of-schrift);
  font-size: 16px;
  box-shadow: none;
}
.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus {
  border-color: var(--of-blau);
  box-shadow: 0 0 0 3px rgb(46 126 165 / 22%);
  outline: 2px solid transparent;
}
.login .wp-pwd { margin-bottom: 0; }
.login .button.wp-hide-pw {
  min-height: 46px;
  height: 46px;
  margin-top: 6px;
  color: var(--of-schrift-3);
  border-radius: 0 12px 12px 0;
}
.login .button.wp-hide-pw:focus { box-shadow: 0 0 0 2px var(--of-blau); border-color: transparent; }
.login .forgetmenot { float: none; margin-bottom: 1.25rem; }
.login input[type="checkbox"] { border-radius: 5px; border-color: var(--of-strich-2); }
.login input[type="checkbox"]:focus { border-color: var(--of-blau); box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--of-blau); }

.login .submit { display: block; }
.wp-core-ui.login .button-primary,
.login .button-primary {
  float: none;
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--of-blau);
  border-radius: 999px;
  background: var(--of-blau);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 500;
  box-shadow: none;
  text-shadow: none;
}
.wp-core-ui.login .button-primary:hover,
.wp-core-ui.login .button-primary:focus,
.login .button-primary:hover,
.login .button-primary:focus {
  border-color: var(--of-blau-tief);
  background: var(--of-blau-tief);
  color: #FFFFFF;
}
.wp-core-ui.login .button-primary:focus { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--of-blau); }

.login #nav,
.login #backtoblog {
  margin: 1.25rem 0 0;
  padding: 0;
  font-size: 14px;
  text-align: center;
}
.login #nav a,
.login #backtoblog a,
.login .privacy-policy-page-link a {
  color: var(--of-blau-tief);
}
.login #nav a:hover,
.login #backtoblog a:hover { color: var(--of-blau); }
.login #backtoblog { margin-top: 0.5rem; }

/* Meldungen: falsches Passwort, abgemeldet */
.login .message,
.login .notice,
.login .success,
.login #login_error {
  margin: 0 0 1.25rem;
  padding: 12px 14px;
  border: 1px solid var(--of-strich);
  border-left: 4px solid var(--of-blau);
  border-radius: 12px;
  box-shadow: none;
}
.login #login_error,
.login .notice-error { border-left-color: #9B2C20; }
.login .success { border-left-color: #2E7D46; }

.login .privacy-policy-page-link { margin: 0 0 1.5rem; text-align: center; }
.login .language-switcher {
  grid-row: 2;
  justify-self: center;
  padding: 0 1rem 1.5rem;
}
.login .language-switcher select,
.login .language-switcher .button { border-radius: 999px; }

/* ---- Schmal: die Stadt als Band über dem Formular ------------------------ */
@media (max-width: 800px) {
  body.login {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
  }
  body.login > * { grid-column: 1; }
  body.login > .polch-buehne { grid-row: 1; }
  .polch-buehne { padding: 2.25rem 1.5rem 2.5rem; }
  .polch-buehne__titel { font-size: 2.25rem; }
  .polch-buehne__satz { font-size: 1rem; margin-top: 0.75rem; }
  .polch-buehne__silhouette { height: 45%; }
  #login { grid-row: 2; padding-top: 2rem; }
  .login .language-switcher { grid-row: 3; }
}