/**
 * HypeBites – Anmelden, Registrieren, Passwort vergessen
 * ============================================================================
 *
 * Gebaut nach Florians Entwürfen. Gilt nur auf diesen drei Seiten
 * (inc/hb-auth.php lädt die Datei sonst nirgends) und liegt NACH
 * hb-um-forms.css -- die dortigen Formularregeln werden hier für den
 * Anmeldeschirm zurückgenommen.
 *
 * DER AUFBAU
 * ----------
 * Ab 1024px zwei Spalten: links Marke, Text und der Ausstieg, rechts das
 * Formular. Darunter untereinander und mittig. Die Passwort-Seite bleibt
 * auf jeder Breite einspaltig -- dort gibt es nichts zu erzählen, und zwei
 * halbleere Spalten wären schlechter als eine volle.
 *
 * WARUM :has(.hb-auth) STATT DER BODY-KLASSEN VON UM
 * --------------------------------------------------
 * Die Regeln greifen genau dort, wo unser Block tatsächlich gerendert
 * wurde -- nicht dort, wo wir es vermuten. Eine Liste von Seiten-Klassen
 * übersieht zuverlässig die vierte Seite, die jemand irgendwann anlegt
 * (und hat beim ersten Anlauf schon die Passwort-Seite übersehen).
 * Bleibt der Block einmal aus, bleibt auch der Header stehen: unschön,
 * aber bedienbar. Umgekehrt wäre es ein leerer schwarzer Schirm.
 */

/* ============================================================
   0  DIE SEITE DRUMHERUM

   Diese drei Seiten sind ein eigener Schirm: kein Website-Header,
   kein Footer, keine Seitenleiste. Wer hier steht, hat genau eine
   Aufgabe, und alles andere hält ihn davon ab.
   ============================================================ */

body:has(.hb-auth) #main-header,
body:has(.hb-auth) #top-header,
body:has(.hb-auth) .et-l--header,
body:has(.hb-auth) #et-boc .et-l--header,
body:has(.hb-auth) #main-footer,
body:has(.hb-auth) .et-l--footer,
body:has(.hb-auth) #footer-bottom {
  display: none !important;
}

body:has(.hb-auth) #page-container {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Divis Standard-Seitenleiste. Auf einer Anmeldeseite ein Suchfeld
   anzubieten heisst, jemanden mitten im Vorgang woanders hinzuschicken.
   Die senkrechte Linie daneben ist Divis Trenner -- sie hängt an
   .container::before und bliebe sonst als Strich im Nichts stehen. */
body:has(.hb-auth) #sidebar { display: none !important; }
body:has(.hb-auth) #main-content .container::before { display: none !important; }

body:has(.hb-auth) #left-area {
  width: 100% !important;
  max-width: 100% !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  float: none !important;
}

body:has(.hb-auth) #main-content .container {
  width: 100% !important;
  max-width: 100% !important;
  padding-top: 0 !important;
}

/* Divis Seitentitel -- unsere Überschrift steht direkt darunter, zweimal
   dasselbe untereinander liest sich wie ein Anzeigefehler. */
body:has(.hb-auth) .entry-title { display: none !important; }

body:has(.hb-auth) {
  background: var(--hb-ink, #121212) !important;
}

body:has(.hb-auth) #et-main-area {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

body:has(.hb-auth) .et_pb_section,
body:has(.hb-auth) .et_pb_row,
body:has(.hb-auth) .et_pb_column,
body:has(.hb-auth) .et_pb_module {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: transparent !important;
}

/* ============================================================
   1  DAS RASTER
   ============================================================ */

.hb-auth {
  display: grid;
  gap: var(--hb-space-xl, 46px);
  align-items: center;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--hb-space-xl, 46px) var(--hb-gutter, 20px);
  box-sizing: border-box;
  font-family: var(--hb-font);
  color: var(--hb-text, #fff);
}

.hb-auth * { box-sizing: border-box; }

/* ------------------------------------------------------------
   Divis Schrifteffekte zurücknehmen

   Die Überschriften wirkten überstrahlt und zu fett. Das war nicht
   die Schriftgrösse, sondern ein Textschatten samt Kontur, den Divi
   global auf Überschriften legt -- dieselbe Quelle wie die
   Glitch-Optik auf den alten UM-Seiten. Ein Schatten auf heller
   Schrift vor dunklem Grund lässt Buchstaben dicker erscheinen, als
   sie sind, und nimmt ihnen die Kanten.

   Bewusst auf ALLES im Block angewandt und nicht nur auf h1: Der
   Effekt sass auch auf den fetten Aufzählungszeilen.
   ------------------------------------------------------------ */
.hb-auth,
.hb-auth h1,
.hb-auth h2,
.hb-auth h3,
.hb-auth p,
.hb-auth li,
.hb-auth span,
.hb-auth a,
.hb-auth label,
.hb-auth input,
.hb-auth button {
  font-family: var(--hb-font) !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  text-transform: none !important;
}

.hb-auth-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

/* --- Logo --- */

.hb-auth-logo {
  display: block;
  margin-bottom: var(--hb-space-lg, 30px);
  line-height: 0;              /* kein Leerraum unter dem Bild */
}

.hb-auth-logo img {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
}

/* --- Text --- */

.hb-auth-title {
  margin: 0 0 12px;
  /* 36 statt 44 und Gewicht 600 statt 800: Auf dunklem Grund wirkt
     helle Schrift ohnehin schwerer, als sie gesetzt ist. Ein Grad
     weniger Fett liest sich ruhiger, ohne an Präsenz zu verlieren. */
  font-size: clamp(26px, 5vw, 36px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.015em;
  /* Nicht reines Weiss: #f2f2ee nimmt dem Kontrast die Härte, ohne
     dass es grau aussieht. */
  color: #f2f2ee;
  text-wrap: balance;
}

.hb-auth-sub {
  margin: 0;
  font-size: clamp(15px, 2vw, 17px);
  font-weight: 400;
  line-height: 1.6;
  color: #a8a9a2;
}

/* --- Die drei Punkte mit dem Wegpunkt --- */

.hb-auth-points {
  list-style: none;
  margin: var(--hb-space-lg, 30px) 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
  text-align: left;
  width: 100%;
}

.hb-auth-points li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  align-items: start;
}

/* Der Wegpunkt sitzt eine Spur tiefer als die Oberkante der Schrift --
   sonst schwebt er über der Zeile statt neben ihr. */
.hb-auth-pin {
  width: 22px;
  height: auto;
  margin-top: 2px;
}

/* Aufzählungen tragen die Aussage über den Inhalt, nicht über die
   Strichstärke. Fett war hier dreimal dieselbe Betonung und damit
   gar keine. */
.hb-auth-points li span {
  font-size: clamp(15px, 2vw, 16px);
  font-weight: 500;
  line-height: 1.5;
  color: #dcdcd6;
}

.hb-auth-note {
  margin: var(--hb-space-lg, 30px) 0 0;
  font-size: clamp(14px, 2vw, 15px);
  line-height: 1.6;
  color: #8d8e87;
  text-align: left;
  width: 100%;
}

/* --- Der Ausstieg --- */

.hb-auth-back {
  margin: var(--hb-space-lg, 30px) 0 0;
  width: 100%;
}

.hb-auth-back a {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: clamp(14px, 2vw, 16px);
  font-weight: 500;
  color: #c8c9c2 !important;
  text-decoration: none !important;
  transition: color .15s ease;
}

.hb-auth-back a:hover { color: var(--hb-acid, #e2ff00) !important; }

/* Dreieck aus Rahmen statt Zeichen: ein "◀" fällt je nach Gerät
   unterschiedlich gross aus und sitzt selten auf der Grundlinie. */
.hb-auth-back-arrow {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 9px solid var(--hb-acid, #e2ff00);
  transition: transform .15s ease;
}

.hb-auth-back a:hover .hb-auth-back-arrow { transform: translateX(-3px); }

/* ============================================================
   2  DIE KARTE
   ============================================================ */

.hb-auth-form { width: 100%; }

.hb-auth-form .um {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
}

.hb-auth-form .um-form {
  padding: var(--hb-space-lg, 30px) !important;
  /* Eine Spur heller als der Grund, dazu eine Haarlinie: Die Karte
     hebt sich dadurch ab, ohne dass eine Kante ins Auge springt.
     Ein deutlicher Rahmen wirkt auf dunklem Grund immer wie ein
     Kasten, nicht wie eine Fläche. */
  background: #1e1e1c !important;
  border: 1px solid rgba(255, 255, 255, .07) !important;
  border-radius: 22px !important;
  /* Kein harter Versatz-Schatten aus dem Formularstil, sondern ein
     weiter, weicher -- er hebt die Karte an, statt sie zu umranden. */
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45) !important;
}

/* Der Erklärtext im Passwort-Formular */
.hb-auth-form .um-form > p,
.hb-auth-form .um-field-block {
  margin: 0 0 var(--hb-space-lg, 30px) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: #a8a9a2 !important;
  text-align: center;
}

/* ============================================================
   3  FELDER
   ============================================================ */

.hb-auth .um-field { margin-bottom: var(--hb-space-md, 20px) !important; }
.hb-auth .um-field:last-of-type { margin-bottom: 0 !important; }

.hb-auth .um-field-label,
.hb-auth .um-field-label label,
.hb-auth .um-field-label > label {
  /* Gemischte Schreibung statt Versalien: "BENUTZERNAME ODER
     E-MAIL-ADRESSE" brauchte zwei Zeilen und schrie dabei. */
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #97988f !important;
  margin-bottom: 9px !important;
  line-height: 1.3 !important;
}

.hb-auth .um input[type=text],
.hb-auth .um input[type=email],
.hb-auth .um input[type=password],
.hb-auth .um input[type=tel],
.hb-auth .um input[type=number],
.hb-auth .um input[type=search] {
  width: 100% !important;
  padding: 16px 18px !important;
  background: #262624 !important;
  border: 1px solid rgba(255, 255, 255, .06) !important;
  border-radius: 13px !important;
  color: var(--hb-text, #fff) !important;
  /* 16px: darunter zoomt iOS beim Hineintippen in das Feld hinein. */
  font-size: 16px !important;
  font-family: var(--hb-font) !important;
  line-height: 1.3 !important;
  box-shadow: none !important;
  transition: border-color .15s ease, background .15s ease;
}

/* Fokus: ein weicher Schein statt einer harten Kante. Der Ring zeigt
   deutlich, wo man tippt, ohne dass das Feld die Farbe wechselt. */
.hb-auth .um input:focus {
  outline: none !important;
  border-color: rgba(226, 255, 0, .55) !important;
  background: #2b2b28 !important;
  box-shadow: 0 0 0 3px rgba(226, 255, 0, .12) !important;
}

.hb-auth .um input::placeholder { color: var(--hb-muted, #8e8e93) !important; }

/* --- Auge im Passwortfeld (assets/js/hb-auth.js) --- */

.hb-auth .hb-auth-pw { position: relative; }

.hb-auth .hb-auth-pw input { padding-right: 56px !important; }

.hb-auth-eye {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--hb-acid, #e2ff00);
  cursor: pointer;
  transition: background .15s ease;
}

.hb-auth-eye:hover { background: rgba(226, 255, 0, .12); }

/* --- "Angemeldet bleiben" --- */

.hb-auth .um-field-checkbox,
.hb-auth .um-field-checkbox-option,
.hb-auth .um-field-type_checkbox label {
  color: var(--hb-text-soft, #c9c9ce) !important;
  font-size: 15px !important;
}

/* ============================================================
   4  KNÖPFE

   Zwei nebeneinander, wie im Entwurf: einer führt, einer begleitet.
   Ultimate Member setzt sie mit float und Prozentbreiten -- beides
   wird hier auf Flex umgestellt, sonst stehen sie je nach Sprache
   unterschiedlich breit nebeneinander.
   ============================================================ */

.hb-auth .um-col-alt,
.hb-auth .um-center {
  display: flex !important;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: var(--hb-space-lg, 30px) !important;
  clear: both;
}

.hb-auth .um-col-alt > div,
.hb-auth .um-center > div,
.hb-auth .um-left,
.hb-auth .um-right,
.hb-auth .um-half {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  flex: 1 1 150px;
}

.hb-auth .um .um-button,
.hb-auth .um input[type=submit] {
  display: block !important;
  width: 100% !important;
  padding: 16px 24px !important;
  background: var(--hb-acid, #e2ff00) !important;
  border: none !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  color: var(--hb-ink, #121212) !important;
  font-family: var(--hb-font) !important;
  font-size: 15px !important;
  /* 700 statt 800: Schwarz auf Acid ist der stärkste Kontrast auf der
     Seite. Die Fläche trägt die Betonung, die Schrift muss nicht
     nachlegen. */
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  text-align: center !important;
  transition: background .15s ease, transform .12s ease;
}

.hb-auth .um .um-button:hover,
.hb-auth .um input[type=submit]:hover {
  background: var(--hb-acid-hi, #ccff00) !important;
  transform: translateY(-1px);
}

.hb-auth .um .um-button:active,
.hb-auth .um input[type=submit]:active {
  transform: translateY(0) scale(.99);
}

/* Der zweite Knopf: gleiche Form, ruhige Fläche. Im Entwurf ist er
   gefüllt und nicht umrandet -- ein Rahmen um einen Knopf neben einem
   gefüllten Knopf wirkt wie ein deaktivierter Knopf. */
.hb-auth .um .um-button.um-alt,
.hb-auth .um a.um-button.um-alt {
  background: rgba(255, 255, 255, .07) !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  color: #e6e7e0 !important;
  font-weight: 600 !important;
}

.hb-auth .um .um-button.um-alt:hover,
.hb-auth .um a.um-button.um-alt:hover {
  background: rgba(255, 255, 255, .11) !important;
  color: #fff !important;
}

/* "Passwort vergessen?" -- rechtsbündig und leise */
.hb-auth .um-col-alt-b {
  display: block !important;
  margin-top: 10px !important;
  text-align: right;
}

.hb-auth .um-col-alt-b a,
.hb-auth .um-link-alt {
  font-size: 14px !important;
  color: #97988f !important;
  text-decoration: none !important;
}

.hb-auth .um-col-alt-b a:hover { color: var(--hb-acid, #e2ff00) !important; }

/* Meldungen (falsches Passwort, Feld vergessen) */
.hb-auth .um-field-error,
.hb-auth .um-notice.err {
  background: rgba(255, 87, 34, .12) !important;
  border: 1px solid var(--hb-danger, #ff5722) !important;
  border-radius: 12px !important;
  color: #ffb9a3 !important;
  font-size: var(--hb-text-sm, 13px) !important;
  padding: 12px 14px !important;
  margin-top: 8px !important;
}

.hb-auth .um-notice.success {
  background: rgba(226, 255, 0, .1) !important;
  border: 1px solid var(--hb-acid, #e2ff00) !important;
  border-radius: 12px !important;
  color: var(--hb-text, #fff) !important;
  padding: 14px 16px !important;
}

/* ============================================================
   5  TABLET
   ============================================================ */

@media (min-width: 768px) {
  .hb-auth { padding: var(--hb-space-xl, 46px) var(--hb-gutter, 28px); }

  .hb-auth-logo img { max-width: 380px; }

  .hb-auth-form .um-form { padding: 38px !important; }

  .hb-auth-form { max-width: 560px; margin: 0 auto; }
}

/* ============================================================
   6  DESKTOP: zwei Spalten

   Erst ab hier. Darunter stünde die Marke neben einem zu schmalen
   Formular -- beides zu eng, nichts gewonnen.
   ============================================================ */

@media (min-width: 1024px) {
  .hb-auth {
    grid-template-columns: minmax(0, 1fr) 500px;
    gap: 80px;
    align-items: center;
  }

  .hb-auth-intro {
    align-items: flex-start;
    text-align: left;
    max-width: 560px;
    margin: 0;
  }

  .hb-auth-logo {
    margin-bottom: clamp(40px, 9vh, 110px);
  }

  .hb-auth-logo img { max-width: 440px; }

  .hb-auth-form { max-width: none; margin: 0; }

  .hb-auth-form .um-form { padding: 40px !important; }

  /* Im Entwurf steht der Ausstieg unten links, mit Abstand zum Text --
     er ist der letzte Ausweg, nicht das nächste Angebot. */
  .hb-auth-login .hb-auth-back,
  .hb-auth-register .hb-auth-back {
    margin-top: clamp(40px, 8vh, 90px);
  }
}

/* Die Passwort-Seite bleibt einspaltig und mittig: Logo, Rückweg, Karte.
   Mehr steht dort nicht, und eine leere zweite Spalte ist kein Layout. */
.hb-auth-password-reset {
  grid-template-columns: minmax(0, 520px) !important;
  justify-content: center;
  gap: var(--hb-space-lg, 30px) !important;
}

.hb-auth-password-reset .hb-auth-intro {
  align-items: center !important;
  text-align: center !important;
  margin: 0 auto !important;
}

.hb-auth-password-reset .hb-auth-logo { margin-bottom: 18px !important; }

.hb-auth-password-reset .hb-auth-back {
  margin-top: 0 !important;
  text-align: center;
}

.hb-auth-password-reset .hb-auth-form { max-width: none; }

/* ============================================================
   7  KLEINE TELEFONE
   ============================================================ */

@media (max-width: 380px) {
  .hb-auth { padding-left: 16px; padding-right: 16px; }
  .hb-auth-form .um-form { padding: 24px 18px !important; }
  .hb-auth-logo img { max-width: 240px; }

  /* Zwei Knöpfe nebeneinander werden hier zu zwei Zeilen -- sonst
     bricht die Beschriftung mitten im Wort. */
  .hb-auth .um-col-alt > div,
  .hb-auth .um-left,
  .hb-auth .um-right,
  .hb-auth .um-half { flex: 1 1 100%; }
}

/* Wer weniger Bewegung möchte, bekommt sie auch nicht */
@media (prefers-reduced-motion: reduce) {
  .hb-auth .um .um-button,
  .hb-auth .um input[type=submit],
  .hb-auth-back-arrow { transition: none !important; }

  .hb-auth .um .um-button:hover,
  .hb-auth .um input[type=submit]:hover,
  .hb-auth-back a:hover .hb-auth-back-arrow { transform: none; }
}