/**
 * HypeBites – Ultimate Member: Profil, Konto, Mitglieder
 * ============================================================================
 *
 * Deckt ab: Login, Registrierung, Passwort-Reset, Konto-Bereich, Profilseite
 * (/user/), Mitgliederverzeichnis (/members/) und das UM-Formular im
 * Dashboard-Reiter „Mein Konto".
 *
 * Geladen über hb_enqueue_um_assets() und hb_enqueue_dashboard_assets() in der
 * functions.php, jeweils mit Priorität 20 -- diese Datei muss NACH dem
 * Stylesheet von Ultimate Member greifen.
 *
 * ----------------------------------------------------------------------------
 * ZUM !important
 * ----------------------------------------------------------------------------
 * Die vielen !important sind kein Schlamperei-Rest, sondern notwendig und
 * bleiben bewusst stehen. Ultimate Member und Divi setzen ihre Werte sehr
 * spezifisch und teilweise inline; ohne !important gewinnen sie. Was sich
 * dagegen aufräumen liess, ist die REDUNDANZ: doppelte Selektorlisten,
 * dieselbe Regel in zwei Blöcken, feste Farbwerte an dreissig Stellen.
 * Farben, Radien und Rahmenstärken liegen jetzt ausschliesslich in den
 * Variablen ganz oben.
 *
 * ----------------------------------------------------------------------------
 * AUFBAU
 * ----------------------------------------------------------------------------
 *   1  Design-Token (hier pflegen, sonst nirgends)
 *   2  Grundlagen: Container, Typografie
 *   3  Formularfelder
 *   4  Buttons und Links
 *   5  Auswahlfelder und Meldungen
 *   6  Seiten-Hintergrund auf UM-Seiten
 *   7  Profil-Kopf  (vorbereitet für Gamification-Badges)
 *   8  Reiter-Navigation  (vorbereitet für „Meine Listen" / „Meine Restaurants")
 *   9  Profilinhalt und Mitgliederverzeichnis
 *  10  Konto-Bereich
 *  11  Bausteine für kommende Features
 *  12  Login- und Registrierungsseite
 *  13  Mobil
 */

/* ============================================================================
   1  DESIGN-TOKEN

   Alles Gestalterische hier ändern. Die Blöcke darunter greifen
   ausschliesslich auf diese Variablen zu.
   ============================================================================ */

:root {
  /* --- Flächen ------------------------------------------------------------ */
  --hb-ink:        #121212;   /* Seitengrund */
  --hb-surface:    #1c1c1e;   /* Karten, Kacheln */
  --hb-surface-2:  #2c2c2e;   /* Eingabefelder, Pills */
  --hb-line:       #3a3a3c;   /* Rahmen, Trennlinien */

  /* --- Schrift ------------------------------------------------------------ */
  --hb-text:       #ffffff;
  --hb-text-soft:  #d1d1d6;
  --hb-muted:      #8e8e93;
  --hb-placeholder: #6b6b70;

  /* --- Akzente ------------------------------------------------------------
     Acid ist die Leitfarbe. Punch, Cool und Sun sind die Funk-Begleiter --
     sie geben Badges, Kacheln und Zuständen Unterscheidbarkeit, ohne dass
     die Marke ihre Leitfarbe verliert. Sparsam einsetzen: knallig wirkt
     nur, solange es die Ausnahme bleibt. */
  --hb-acid:       #ccff00;
  --hb-acid-hi:    #e2ff00;   /* Hover, heller */
  --hb-punch:      #ff3d7f;   /* Magenta */
  --hb-cool:       #00e5ff;   /* Cyan */
  --hb-sun:        #ff9f43;   /* Orange */
  --hb-error:      #ff5722;

  /* --- Form --------------------------------------------------------------- */
  --hb-radius:     18px;      /* Karten */
  --hb-radius-sm:  12px;      /* Felder, Buttons */
  --hb-radius-pill: 999px;    /* Reiter, Badges */

  /* Dicke Rahmen sind das Rückgrat des Funk-Looks. Wer es ruhiger will,
     stellt --hb-border auf 1px -- der Rest zieht automatisch nach. */
  --hb-border:     3px;
  --hb-border-thin: 1px;

  /* Harter, versetzter Schatten statt weichem Verlauf. Auf dunklem Grund
     braucht er reines Schwarz, sonst verschwindet er. */
  --hb-shadow:     4px 4px 0 #000;
  --hb-shadow-sm:  3px 3px 0 #000;
  --hb-shadow-lg:  6px 6px 0 #000;
  --hb-shadow-off: 0 0 0 #000;      /* Knopf sitzt auf -- für :active */

  /* --- Typografie ---------------------------------------------------------
     Divi drückt gern 'Anton' samt Textschatten und gestauchter Laufweite
     durch. Anton hat nur einen Schnitt -- fett darauf erzeugt künstlichen
     Fettdruck, der glänzend und gequetscht aussieht. Deshalb überall eine
     saubere System-Schrift. */
  --hb-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             Helvetica, Arial, sans-serif;

  --hb-ease: .15s ease;
}

/* ============================================================================
   2  GRUNDLAGEN
   ============================================================================ */

/* UM bringt eigene Rahmen, Schatten und Hintergründe mit -- alles weg.
   Gestaltet wird ausschliesslich hier. */
.um,
.um .um-form,
.um .um-form form,
.um .um-misc-form,
.um-account .um-account-side,
.um-account .um-account-main,
.um-profile,
.um-profile-body,
.um-profile-nav,
.um-profile-header,
.um-members,
.um-members-wrapper,
.um-search,
.um-members-pagi {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

.um {
  max-width: 520px;
  margin-left: auto !important;
  margin-right: auto !important;
}

.um,
.um *,
.um-account,
.um-account *,
.um-profile,
.um-profile * {
  font-family: var(--hb-font) !important;
  font-weight: 400 !important;
  font-stretch: normal !important;
  letter-spacing: normal !important;
  text-shadow: none !important;
  -webkit-font-smoothing: antialiased;
}

.um h1, .um h2, .um h3, .um h4,
.um .um-form-title,
.um-account h1, .um-account h2, .um-account h3,
.um-profile h1, .um-profile h2, .um-profile h3 {
  color: var(--hb-text) !important;
  font-weight: 800 !important;
  text-transform: none !important;
  letter-spacing: -.02em !important;
}

/* Halbfett für alles, was Struktur gibt -- nie gestaucht */
.um .um-field-label label,
.um .um-button,
.um-profile-nav-item a,
.um-member-name { font-weight: 700 !important; }

/* UM-Kopfbild und Cover brauchen wir nicht */
.um .um-header,
.um .um-cover,
.um .um-profile-photo-overlay { display: none !important; }

/* ============================================================================
   3  FORMULARFELDER
   ============================================================================ */

.um .um-field { padding: 0 0 18px !important; }
.um .um-field-block { margin: 0 !important; }

.um .um-field-label,
.um .um-field-label label,
.um .um-field-label > label {
  color: var(--hb-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
  padding: 0 !important;
  border: none !important;
}

.um .um-field-label .um-field-label-icon,
.um .um-field-icon { display: none !important; }

/* Eine Selektorliste für alle Eingabetypen.
   Die frühere Dopplung .um .um-form input[...] war überflüssig:
   .um-form liegt innerhalb von .um, .um input[...] trifft es also bereits. */
.um input[type=text],
.um input[type=email],
.um input[type=password],
.um input[type=tel],
.um input[type=number],
.um input[type=search],
.um input[type=url],
.um input[type=date],
.um textarea,
.um select {
  background: var(--hb-surface-2) !important;
  background-image: none !important;
  border: var(--hb-border-thin) solid var(--hb-line) !important;
  border-radius: var(--hb-radius-sm) !important;
  color: var(--hb-text) !important;
  font-size: 15px !important;
  padding: 14px 16px !important;
  box-shadow: none !important;
  height: auto !important;
  line-height: 1.4 !important;
  transition: border-color var(--hb-ease), box-shadow var(--hb-ease);
}

.um input::placeholder,
.um textarea::placeholder { color: var(--hb-placeholder) !important; }

/* Fokus: der Rahmen wird dick und leuchtet -- das ist der Funk-Moment */
.um input:focus,
.um textarea:focus,
.um select:focus {
  border-color: var(--hb-acid) !important;
  box-shadow: 0 0 0 3px rgba(204, 255, 0, .18) !important;
  outline: none !important;
}

/* Chrome überschreibt ausgefüllte Felder sonst mit hellblauem Grund */
.um input:-webkit-autofill,
.um input:-webkit-autofill:hover,
.um input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--hb-text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--hb-surface-2) inset !important;
  caret-color: var(--hb-text);
}

/* Passwort-Auge dezent halten */
.um .um-field-area i,
.um i.um-icon-android-eye,
.um .um-toggle-pass { color: var(--hb-muted) !important; }

/* ============================================================================
   4  BUTTONS UND LINKS
   ============================================================================ */

.um .um-button,
.um a.um-button,
.um input[type=submit],
.um-account .um-button {
  display: inline-block !important;
  background: var(--hb-acid) !important;
  background-image: none !important;
  border: var(--hb-border) solid var(--hb-ink) !important;
  border-radius: var(--hb-radius-sm) !important;
  box-shadow: var(--hb-shadow) !important;
  color: var(--hb-ink) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
  text-decoration: none !important;
  padding: 14px 28px !important;
  height: auto !important;
  line-height: 1.2 !important;
  width: 100% !important;
  cursor: pointer;
  transition: background var(--hb-ease), transform .1s ease, box-shadow .1s ease;
}

.um .um-button:hover,
.um a.um-button:hover,
.um input[type=submit]:hover {
  background: var(--hb-acid-hi) !important;
  color: var(--hb-ink) !important;
}

/* Der Knopf sinkt auf seinen Schatten -- typische Funk-Geste */
.um .um-button:active,
.um input[type=submit]:active {
  transform: translate(3px, 3px);
  box-shadow: var(--hb-shadow-off) !important;
}

/* Sekundär (Abbrechen o.ä.): gleiche Form, zurückhaltende Füllung */
.um .um-button.um-alt,
.um a.um-button.um-alt {
  background: transparent !important;
  border-color: var(--hb-line) !important;
  box-shadow: none !important;
  color: var(--hb-muted) !important;
  font-weight: 700 !important;
}

.um .um-button.um-alt:hover {
  background: transparent !important;
  border-color: var(--hb-acid) !important;
  color: var(--hb-text) !important;
}

.um a,
.um .um-link,
.um .um-col-alt a,
.um .um-center a {
  color: var(--hb-muted) !important;
  text-decoration: none !important;
  transition: color var(--hb-ease);
}

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

/* Der Button ist selbst ein <a> -- die Linkfarbe darf ihn nicht treffen */
.um a.um-button,
.um a.um-button:hover { color: var(--hb-ink) !important; }

.um .um-col-alt,
.um .um-col-alt-b,
.um .um-center { background: transparent !important; }

/* ============================================================================
   5  AUSWAHLFELDER UND MELDUNGEN
   ============================================================================ */

.um .um-field-checkbox i,
.um .um-field-radio i {
  color: var(--hb-muted) !important;
  border-color: var(--hb-line) !important;
}

.um .um-field-checkbox.active i,
.um .um-field-radio.active i { color: var(--hb-acid) !important; }

.um .um-field-checkbox-option,
.um .um-field-radio-option { color: var(--hb-text-soft) !important; }

.um .um-field-error,
.um .um-error-block {
  background: transparent !important;
  border: none !important;
  color: var(--hb-error) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 7px 0 0 !important;
}

.um .um-field-error::before,
.um .um-error-block::before { display: none !important; }

.um .um-notice.success,
.um .um-notice.err {
  background: var(--hb-surface) !important;
  border: var(--hb-border) solid var(--hb-acid) !important;
  border-radius: var(--hb-radius-sm) !important;
  box-shadow: var(--hb-shadow-sm) !important;
  color: var(--hb-text) !important;
  font-weight: 700 !important;
  padding: 14px 16px !important;
}

.um .um-notice.err {
  border-color: var(--hb-error) !important;
  color: var(--hb-error) !important;
}

/* ============================================================================
   6  SEITEN-HINTERGRUND AUF UM-SEITEN

   Die Formulare selbst waren schon transparent -- weiss war der
   Divi-Container DAHINTER. Ultimate Member setzt eigene Body-Klassen
   (um-page-login, um-page-register, um-page-account, um-page-user,
   um-page-members), daran hängt der Dark Mode.
   ============================================================================ */

body[class*="um-page-"],
body[class*="um-page-"] #page-container,
body[class*="um-page-"] #et-main-area,
body[class*="um-page-"] #main-content,
body[class*="um-page-"] .et_pb_section,
body[class*="um-page-"] .et_pb_row,
body[class*="um-page-"] .entry-content,
body[class*="um-page-"] article,
body[class*="um-page-"] .page {
  background: var(--hb-ink) !important;
  background-image: none !important;
  color: var(--hb-text) !important;
}

body[class*="um-page-"] h1,
body[class*="um-page-"] h2,
body[class*="um-page-"] h3,
body[class*="um-page-"] .entry-title { color: var(--hb-text) !important; }

body[class*="um-page-"] p,
body[class*="um-page-"] li { color: var(--hb-muted) !important; }

body[class*="um-page-"] .et_pb_text_inner,
body[class*="um-page-"] .et_pb_module { background: transparent !important; }

/* ============================================================================
   7  PROFIL-KOPF

   Als Grid mit benannten Bereichen angelegt, nicht als starre Zeile.
   Der Bereich „badges" liegt schon im Raster: Sobald du unter dem
   Profilbild deine Achievement-Grafiken ausgibst, rutschen sie an ihren
   Platz, ohne dass hier etwas nachgezogen werden muss. Solange dort
   nichts steht, fällt die Spur auf 0 zusammen -- ein leerer Bereich
   kostet in Grid keine Höhe.
   ============================================================================ */

.um-profile-header {
  display: grid !important;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "photo meta"
    "badges badges";
  gap: 18px 22px;
  align-items: center;
  padding: 22px !important;
  margin-bottom: 22px;
  background: var(--hb-surface) !important;
  border: var(--hb-border) solid var(--hb-line) !important;
  border-radius: var(--hb-radius) !important;
  box-shadow: var(--hb-shadow) !important;
}

.um-profile-photo { grid-area: photo; margin: 0 !important; }
.um-profile-meta,
.um-profile-header .um-name,
.um-profile-header .um-meta { grid-area: meta; }

/* Hier landen später die Badges (siehe Abschnitt 11) */
.um-profile-header .hb-badges { grid-area: badges; }

.um-member-photo img,
.um-profile-photo img {
  display: block;
  border-radius: 50% !important;
  border: var(--hb-border) solid var(--hb-acid) !important;
  box-shadow: var(--hb-shadow-sm) !important;
}

.um-member-name,
.um-member-name a,
.um-profile .um-name,
.um-profile .um-name a {
  color: var(--hb-text) !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  text-decoration: none !important;
}

.um-member-name a:hover,
.um-profile .um-name a:hover { color: var(--hb-acid) !important; }

.um-member-meta,
.um-member-tagline,
.um-profile .um-meta,
.um-profile .um-meta span,
.um-member-less,
.um-member-more { color: var(--hb-muted) !important; }

/* Ab Tablet stehen die Badges rechts neben den Profildaten statt darunter */
@media (min-width: 900px) {
  .um-profile-header {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "photo meta badges";
  }
}

/* ============================================================================
   8  REITER-NAVIGATION

   Ausgelegt auf WACHSTUM. Heute „Über mich" und „Beiträge", morgen
   zusätzlich „Meine Listen" und „Meine Restaurants".

   Deshalb bewusst KEIN flex-wrap und keine gleichmässige Verteilung:
   Beides bricht, sobald ein Reiter dazukommt -- die Leiste würde
   umklappen oder die Beschriftungen zerquetschen. Stattdessen eine
   Zeile, die bei Bedarf horizontal scrollt und einrastet. Das skaliert
   von zwei bis zehn Reitern, ohne dass hier etwas zu ändern ist.
   ============================================================================ */

.um-profile-nav {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0 12px !important;
  margin-bottom: 18px;
  /* Scrollbalken weg -- die angeschnittene nächste Kachel zeigt ohnehin,
     dass es weitergeht */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.um-profile-nav::-webkit-scrollbar { display: none; }

.um-profile-nav-item {
  flex: 0 0 auto !important;
  scroll-snap-align: start;
  margin: 0 !important;
  background: transparent !important;
}

.um-profile-nav-item a {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  padding: 10px 18px !important;
  background: var(--hb-surface) !important;
  border: var(--hb-border) solid var(--hb-line) !important;
  border-radius: var(--hb-radius-pill) !important;
  color: var(--hb-muted) !important;
  font-size: 14px !important;
  text-decoration: none !important;
  transition: background var(--hb-ease), border-color var(--hb-ease),
              color var(--hb-ease), transform .1s ease;
}

.um-profile-nav-item a:hover {
  border-color: var(--hb-acid) !important;
  color: var(--hb-text) !important;
}

.um-profile-nav-item.active a,
.um-profile-nav-item a.current {
  background: var(--hb-acid) !important;
  border-color: var(--hb-ink) !important;
  box-shadow: var(--hb-shadow-sm) !important;
  color: var(--hb-ink) !important;
  font-weight: 800 !important;
}

/* Zähler im Reiter, z.B. „Meine Listen 4".
   Als eigenes <span class="hb-tab-count"> im Reiter ausgeben. */
.hb-tab-count {
  display: inline-block;
  min-width: 20px;
  padding: 1px 7px;
  background: var(--hb-surface-2);
  border-radius: var(--hb-radius-pill);
  color: var(--hb-muted);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.um-profile-nav-item.active a .hb-tab-count {
  background: rgba(0, 0, 0, .22);
  color: var(--hb-ink);
}

/* Premium-Reiter („Meine Restaurants") hebt sich von den übrigen ab,
   ohne die Leitfarbe für sich zu beanspruchen. Klasse am <li> setzen. */
.um-profile-nav-item.hb-tab-premium a {
  border-color: var(--hb-punch) !important;
  color: var(--hb-punch) !important;
}

.um-profile-nav-item.hb-tab-premium.active a {
  background: var(--hb-punch) !important;
  border-color: var(--hb-ink) !important;
  color: var(--hb-text) !important;
}

/* ============================================================================
   9  PROFILINHALT UND MITGLIEDERVERZEICHNIS
   ============================================================================ */

/* Feldwerte im Profil als abgesetzte Zeilen statt weisser Karten */
.um-profile .um-field {
  background: var(--hb-surface) !important;
  border: none !important;
  border-bottom: var(--hb-border-thin) solid var(--hb-line) !important;
  border-radius: 0 !important;
  padding: 15px 18px !important;
}

.um-profile .um-field:first-child {
  border-top-left-radius: var(--hb-radius) !important;
  border-top-right-radius: var(--hb-radius) !important;
}

.um-profile .um-field:last-child {
  border-bottom: none !important;
  border-bottom-left-radius: var(--hb-radius) !important;
  border-bottom-right-radius: var(--hb-radius) !important;
}

.um-profile .um-field-value,
.um-profile .um-field-area { color: var(--hb-text) !important; }

/* Mitgliederkarten */
.um-member {
  background: var(--hb-surface) !important;
  border: var(--hb-border) solid var(--hb-line) !important;
  border-radius: var(--hb-radius) !important;
  box-shadow: var(--hb-shadow) !important;
  padding: 20px !important;
  color: var(--hb-text) !important;
  transition: border-color var(--hb-ease), transform .1s ease;
}

.um-member:hover {
  border-color: var(--hb-acid) !important;
  transform: translateY(-2px);
}

.um-search input[type=text],
.um-members-intro input[type=text] {
  background: var(--hb-surface-2) !important;
  border: var(--hb-border-thin) solid var(--hb-line) !important;
  border-radius: var(--hb-radius-sm) !important;
  color: var(--hb-text) !important;
}

.um-members-pagi a,
.um-members-pagi span {
  background: var(--hb-surface) !important;
  border: var(--hb-border-thin) solid var(--hb-line) !important;
  border-radius: var(--hb-radius-sm) !important;
  color: var(--hb-muted) !important;
  font-weight: 700 !important;
}

.um-members-pagi a:hover,
.um-members-pagi .current {
  background: var(--hb-acid) !important;
  border-color: var(--hb-acid) !important;
  color: var(--hb-ink) !important;
}

/* ============================================================================
   10  KONTO-BEREICH
   ============================================================================ */

.um-account .um-account-tab,
.um-account .um-account-nav a {
  background: transparent !important;
  border: none !important;
  color: var(--hb-muted) !important;
}

.um-account .um-account-nav a.current,
.um-account .um-account-nav a:hover { color: var(--hb-acid) !important; }

/* Im Dashboard-Reiter sitzt das Formular bereits in einer Karte --
   dort keine zweite Rahmung und keine Zentrierung. */
.hb-dash-account .um {
  margin: 0 !important;
  max-width: 100%;
}

/* ============================================================================
   11  BAUSTEINE FÜR KOMMENDE FEATURES

   Diese Klassen greifen noch nirgends -- sie stehen bereit, damit die
   drei geplanten Bausteine nur noch Markup brauchen und nicht wieder
   eine CSS-Runde. Sie sind absichtlich NICHT an UM-Selektoren gebunden:
   dadurch funktionieren sie genauso im Dashboard oder auf einer
   Divi-Seite.
   ============================================================================ */

/* --- 11.1  Gamification-Badges ------------------------------------------
   Erwartetes Markup:

     <div class="hb-badges">
       <span class="hb-badge is-earned" title="Iss in 5 Städten">
         <img src="..." alt="">
         <span class="hb-badge-label">5 Städte</span>
       </span>
       <span class="hb-badge is-locked"> … </span>
     </div>

   Die Reihe wächst nach rechts und scrollt, statt umzubrechen -- damit
   der Profilkopf bei zwanzig Achievements nicht in die Höhe schiesst. */

.hb-badges {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 2px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.hb-badges::-webkit-scrollbar { display: none; }

.hb-badge {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 78px;
  text-align: center;
  text-decoration: none;
}

/* Der Kreis trägt den Rahmen, nicht die Grafik -- so sitzt eine
   handgezeichnete Illustration mit Transparenz sauber darin. */
.hb-badge img,
.hb-badge .hb-badge-art {
  display: block;
  width: 62px;
  height: 62px;
  object-fit: contain;
  padding: 8px;
  box-sizing: border-box;
  background: var(--hb-surface-2);
  border: var(--hb-border) solid var(--hb-line);
  border-radius: 50%;
  transition: border-color var(--hb-ease), transform .12s ease;
}

.hb-badge-label {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--hb-muted);
}

/* Freigeschaltet: Rahmen in der Leitfarbe, Schatten, voller Kontrast */
.hb-badge.is-earned img,
.hb-badge.is-earned .hb-badge-art {
  border-color: var(--hb-acid);
  box-shadow: var(--hb-shadow-sm);
}

.hb-badge.is-earned .hb-badge-label { color: var(--hb-text); }
.hb-badge.is-earned:hover img { transform: rotate(-4deg) scale(1.06); }

/* Noch nicht verdient: sichtbar, aber deutlich zurückgenommen.
   Bewusst nicht ausgeblendet -- ein sichtbares Ziel motiviert mehr
   als eine leere Fläche. */
.hb-badge.is-locked img,
.hb-badge.is-locked .hb-badge-art {
  filter: grayscale(1);
  opacity: .35;
}

.hb-badge.is-locked .hb-badge-label { opacity: .5; }

/* Stufen für seltenere Achievements. Klasse zusätzlich zu .is-earned
   setzen -- so bleibt Acid die Normalstufe und die selteneren heben
   sich ab, ohne dass die Leitfarbe an Bedeutung verliert. */
.hb-badge.is-earned.is-rare img,
.hb-badge.is-earned.is-rare .hb-badge-art   { border-color: var(--hb-cool); }
.hb-badge.is-earned.is-epic img,
.hb-badge.is-earned.is-epic .hb-badge-art   { border-color: var(--hb-punch); }
.hb-badge.is-earned.is-legend img,
.hb-badge.is-earned.is-legend .hb-badge-art { border-color: var(--hb-sun); }

/* --- 11.2  Listen-Raster („Meine Listen") --------------------------------
   Nimmt beliebig viele Listenkacheln auf. Die Farbe je Liste kommt aus
   hb_get_list_color() und wird als Inline-Variable gesetzt:

     <a class="hb-listcard" style="--hb-list-color:var(--hb-punch, #ff3d7f)"> … </a> */

.hb-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}

.hb-listcard {
  --hb-list-color: var(--hb-acid);

  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
  background: var(--hb-surface);
  border: var(--hb-border) solid var(--hb-list-color);
  border-radius: var(--hb-radius);
  box-shadow: var(--hb-shadow);
  color: var(--hb-text);
  text-decoration: none;
  transition: transform .1s ease, box-shadow .1s ease;
}

.hb-listcard:hover { transform: translate(-2px, -2px); box-shadow: var(--hb-shadow-lg); }
.hb-listcard:active { transform: translate(3px, 3px); box-shadow: var(--hb-shadow-off); }

.hb-listcard-name { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.hb-listcard-count { font-size: 13px; color: var(--hb-muted); }

/* --- 11.3  B2B-Kacheln („Meine Restaurants") -----------------------------
   Kachel-Layout für Kennzahlen wie Profilaufrufe und Speicherungen.
   auto-fit + minmax heisst: zwei Kacheln füllen die Breite, sechs
   brechen von allein um. Beim Hinzufügen einer Kennzahl ist hier
   nichts zu ändern.

     <div class="hb-biz-grid">
       <div class="hb-biz-tile">
         <span class="hb-biz-value">1.284</span>
         <span class="hb-biz-label">Profilaufrufe</span>
         <span class="hb-biz-trend is-up">+12 %</span>
       </div>
     </div> */

.hb-biz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}

.hb-biz-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px;
  background: var(--hb-surface);
  border: var(--hb-border) solid var(--hb-line);
  border-radius: var(--hb-radius);
  box-shadow: var(--hb-shadow);
}

/* Hervorgehobene Kachel -- für die eine Zahl, die wirklich zählt */
.hb-biz-tile.is-key {
  border-color: var(--hb-acid);
  background: linear-gradient(160deg, rgba(204, 255, 0, .10), transparent 62%), var(--hb-surface);
}

.hb-biz-value {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--hb-text);
  /* Ziffern gleich breit: sonst zappeln die Kacheln bei Live-Werten */
  font-variant-numeric: tabular-nums;
}

.hb-biz-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--hb-muted);
}

.hb-biz-trend { font-size: 12px; font-weight: 700; }
.hb-biz-trend.is-up   { color: var(--hb-acid); }
.hb-biz-trend.is-down { color: var(--hb-error); }
.hb-biz-trend.is-flat { color: var(--hb-muted); }

/* Hinweisleiste für noch nicht freigeschaltete Gastronomen */
.hb-biz-locked {
  padding: 22px;
  background: var(--hb-surface);
  border: var(--hb-border) dashed var(--hb-punch);
  border-radius: var(--hb-radius);
  color: var(--hb-muted);
  text-align: center;
}

/* ============================================================================
   12  LOGIN- UND REGISTRIERUNGSSEITE

   Header und Footer fallen weg: die Seite ist ein eigener Schirm.
   Hängt an den Body-Klassen, die Ultimate Member selbst setzt -- gilt
   also nicht auf Konto, Profil oder Mitgliederliste.
   ============================================================================ */

body.um-page-login #main-header,
body.um-page-login #top-header,
body.um-page-login .et-l--header,
body.um-page-login #et-boc .et-l--header,
body.um-page-login #main-footer,
body.um-page-login .et-l--footer,
body.um-page-register #main-header,
body.um-page-register #top-header,
body.um-page-register .et-l--header,
body.um-page-register #et-boc .et-l--header,
body.um-page-register #main-footer,
body.um-page-register .et-l--footer {
  display: none !important;
}

/* Divi reserviert oben Platz für den jetzt entfernten Header */
body.um-page-login #page-container,
body.um-page-register #page-container {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Formular vertikal mittig statt oben angeklebt */
body.um-page-login #et-main-area,
body.um-page-register #et-main-area {
  min-height: 100vh;
  min-height: 100dvh;   /* iOS: sichtbare Höhe statt Layout-Höhe */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 0 calc(24px + env(safe-area-inset-bottom));
  box-sizing: border-box;
}

/* Das Formular selbst als Karte -- auf einem leeren Schirm braucht es
   eine Kante, sonst schwebt es haltlos. */
body.um-page-login .um-login .um-form,
body.um-page-register .um-register .um-form {
  padding: 28px !important;
  background: var(--hb-surface) !important;
  border: var(--hb-border) solid var(--hb-line) !important;
  border-radius: var(--hb-radius) !important;
  box-shadow: var(--hb-shadow) !important;
}

/* ============================================================================
   13  MOBIL
   ============================================================================ */

@media (max-width: 767px) {
  .um { max-width: 100%; }

  /* 16px verhindert, dass iOS beim Fokus in ein Feld hineinzoomt */
  .um input[type=text],
  .um input[type=email],
  .um input[type=password],
  .um input[type=tel],
  .um input[type=number],
  .um textarea,
  .um select { font-size: 16px !important; }

  .um-profile-header { padding: 18px !important; gap: 14px 16px; }
  .um-profile .um-name { font-size: 20px !important; }

  /* Reiter und Badges bis an den Bildschirmrand scrollen lassen */
  .um-profile-nav,
  .hb-badges {
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .hb-biz-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .hb-biz-value { font-size: 26px; }
}

/* Wer weniger Bewegung möchte, bekommt sie auch nicht */
@media (prefers-reduced-motion: reduce) {
  .um .um-button,
  .um-member,
  .hb-listcard,
  .hb-badge img { transition: none !important; }

  .um .um-button:active,
  .hb-listcard:hover,
  .hb-listcard:active,
  .hb-badge.is-earned:hover img { transform: none !important; }
}

/* ============================================================================
   14  KONTO-SEITE: DESKTOP-LAYOUT

   Ultimate Member liefert auf breiten Schirmen drei nebeneinander stehende
   Spalten aus, die vertikal nicht zueinander ausgerichtet sind: Die
   Navigation links steht versetzt, das Profilbild darüber hängt in der Luft.
   Ursache ist, dass UMs Spalten mit float und eigenen Höhen arbeiten statt
   mit einem gemeinsamen Raster.

   Hier wird daraus ein zweispaltiges Grid mit gemeinsamer Oberkante --
   Seitenleiste links, Formular rechts, beides oben bündig.
   ============================================================================ */

@media (min-width: 900px) {

  /* WICHTIG: Das Raster gehört auf das <form>, NICHT auf .um-form.

     Ultimate Member baut <div class="um-form"><form> … </form></div>.
     Seitenleiste und Formularspalte liegen also IM <form>, nicht direkt
     in .um-form. Stand das Raster auf .um-form, hatte es genau ein Kind
     -- das <form> -- und steckte dieses komplett in die 260px-Spalte.
     Ergebnis: beide Spalten untereinander und 206px breite Eingabefelder
     auf einem 1440px-Schirm. Die Regel sah richtig aus und tat nichts. */
  .um-account .um-form {
    max-width: 880px;
    margin: 0 auto !important;
  }

  .um-account .um-form > form {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    /* start statt stretch: Ohne das zieht das Grid die kurze Seitenleiste
       auf die Höhe des langen Formulars, und die Reiter stehen mittig
       im Nichts. */
    align-items: start;
    gap: 32px;
  }

  .um-account .um-account-side,
  .um-account .um-account-main {
    float: none !important;
    /* minmax(0, 1fr) oben und width:auto hier gehören zusammen: Ohne die
       0 als Untergrenze wächst die Spalte mit ihrem breitesten Inhalt --
       ein langes Wort im Hinweistext hätte das Raster gesprengt. */
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Seitenleiste als eigene Kachel -- so hat sie eine Kante und das
     Profilbild darüber wirkt nicht mehr verloren. */
  .um-account .um-account-side {
    background: var(--hb-surface) !important;
    border: var(--hb-border-thin) solid var(--hb-line) !important;
    border-radius: var(--hb-radius) !important;
    padding: 20px 16px !important;
    overflow: hidden;
  }

  .um-account .um-account-main {
    background: var(--hb-surface) !important;
    border: var(--hb-border-thin) solid var(--hb-line) !important;
    border-radius: var(--hb-radius) !important;
    padding: 26px !important;
  }

  /* Reiter untereinander als Liste statt als schwebende Zeile */
  .um-account .um-account-side ul,
  .um-account .um-account-side li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    float: none !important;
  }

  .um-account .um-account-side li a {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 11px 12px !important;
    border-radius: var(--hb-radius-sm) !important;
    color: var(--hb-muted) !important;
    font-size: 14px !important;
    transition: background var(--hb-ease), color var(--hb-ease);
  }

  .um-account .um-account-side li a:hover {
    background: var(--hb-surface-2) !important;
    color: var(--hb-text) !important;
  }

  .um-account .um-account-side li.current a,
  .um-account .um-account-side li a.current {
    background: var(--hb-acid) !important;
    color: var(--hb-ink) !important;
    font-weight: 700 !important;
  }

  /* Profilbild über der Navigation zentrieren, damit es zur Kachel gehört
     statt darüber zu schweben */
  .um-account .um-account-side .um-account-profile-link,
  .um-account .um-account-side .um-account-meta,
  .um-account .um-account-heading-photo {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px !important;
    padding: 0 0 18px !important;
    border-bottom: var(--hb-border-thin) solid var(--hb-line) !important;
    text-align: center;
  }

  .um-account .um-account-side img {
    width: 92px !important;
    height: 92px !important;
    object-fit: cover;
    border-radius: 50% !important;
  }

  /* Das Formular darf im Grid nicht ausbrechen */
  .um-account .um-account-main .um-account-tab { max-width: 100%; }
}

/* ============================================================================
   15  UNVERÄNDERLICHE FELDER

   Der Benutzername lässt sich in WordPress nachträglich nicht ändern.
   Das Feld muss also aussehen wie das, was es ist -- sonst tippt jemand
   hinein, drückt speichern und wundert sich, warum nichts passiert.

   Das readonly-Attribut setzt hb-um-account.js; hier kommt nur die Optik
   dazu. Beides gehört zusammen: CSS allein könnte die Eingabe nicht
   verhindern, das Attribut allein wäre optisch nicht erkennbar.
   ============================================================================ */

.um input.hb-um-readonly,
.um input[readonly] {
  background: #171717 !important;
  border-color: #2a2a2a !important;
  color: var(--hb-muted) !important;
  cursor: not-allowed !important;
}

.um input.hb-um-readonly:focus,
.um input[readonly]:focus {
  border-color: #2a2a2a !important;
  box-shadow: none !important;
}

.hb-um-readonly-note {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--hb-muted);
}

/* ============================================================================
   16  ANZEIGENAME UND BIOGRAFIE

   Zwei Felder, die Ultimate Member nicht mitbringt (siehe
   inc/hb-um-account-fields.php). Das Markup ist bewusst UMs eigenes
   (.um-field / .um-field-area) -- deshalb greifen die Feld-Styles der
   Abschnitte oben schon. Hier steht nur, was dazukommt: der erklärende
   Hinweis und der Zeichenzähler.
   ============================================================================ */

.hb-um-hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--hb-muted);
}

/* Das Textfeld erbt vom Input-Styling, braucht aber eine Mindesthöhe --
   sonst ist es eine Zeile hoch und sieht nicht wie ein Textfeld aus. */
.um textarea.um-form-field,
.um-account textarea {
  min-height: 96px;
  resize: vertical;
  line-height: 1.5;
}

.hb-um-counter {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;   /* Zahl springt beim Tippen nicht */
  color: var(--hb-muted);
}

/* Kurz vor dem Anschluss warnen, nicht erst danach. */
.hb-um-counter.is-tight { color: var(--hb-acid, var(--hb-acid, #e2ff00)); }