/**
 * Hexe Hub — View "konto"
 *
 * Nur View-eigenes Markup (Präfix .hexe-hub-account-*). Farben, Radien und
 * Abstände ausschließlich über die --hh-*-Variablen aus hexe-hub.css, damit
 * der Dark-Mode automatisch mitläuft. Mobile-first, Touch ≥ 44 px.
 *
 * WICHTIG zur Paarung: `--hh-X-ink` ist der Vordergrund AUF der gefüllten
 * Farbe (`background: var(--hh-X)`). Auf getönten Flächen (`--hh-X-soft`)
 * ist die Textfarbe `--hh-X` — niemals `-ink`, das wäre Weiß auf Hell.
 */

.hexe-hub-account { display: flex; flex-direction: column; gap: var(--hh-sp-5); }

/* ===================================================================
 * Aufklappbare Abschnitte: Meine Märkte · Meine Preisalarme
 *
 * Beide waren eigene Hauptansichten. Lieblingsmärkte und Preisalarme setzt
 * man einmal und nie wieder — Einstellungs-Charakter, kein tägliches Ziel
 * (docs/konzept_ux_v2.md §4). Der Inhalt lädt erst beim Aufklappen.
 * =================================================================== */

.hexe-hub-account-sec {
  padding: 0;
  overflow: hidden;
  /* Eigene Hash-Route scrollt hierher — unter der sticky Kopfzeile. */
  scroll-margin-top: 96px;
}

.hexe-hub-account-sec-head {
  display: flex;
  align-items: center;
  gap: var(--hh-sp-3);
  width: 100%;
  min-height: var(--hh-touch);
  padding: var(--hh-sp-4);
  border: 0;
  background: none;
  color: var(--hh-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}

.hexe-hub-account-sec-head:hover { background: var(--hh-bg-hover); }

.hexe-hub-account-sec-head:focus-visible {
  outline: 2px solid var(--hh-focus);
  outline-offset: -2px;
}

.hexe-hub-account-sec-ico {
  display: flex; align-items: center; flex: 0 0 auto;
  color: var(--hh-text-subtle);
  transition: transform var(--hh-t);
}

.hexe-hub-account-sec-head.is-open .hexe-hub-account-sec-ico { transform: rotate(90deg); }

.hexe-hub-account-sec-text { flex: 1 1 auto; min-width: 0; }

.hexe-hub-account-sec-title {
  display: block;
  font-size: var(--hh-fs-lg); font-weight: 700; line-height: var(--hh-lh-tight);
  color: var(--hh-text);
}

.hexe-hub-account-sec-sub {
  display: block; margin-top: 2px;
  font-size: var(--hh-fs-sm); line-height: 1.4; color: var(--hh-text-muted);
}

.hexe-hub-account-sec-count {
  flex: 0 0 auto;
  min-width: 24px; padding: 2px var(--hh-sp-2);
  border-radius: var(--hh-r-pill);
  background: var(--hh-bg-sunk); color: var(--hh-text-muted);
  font-size: var(--hh-fs-sm); font-weight: 800; text-align: center;
  font-variant-numeric: tabular-nums;
}

.hexe-hub-account-sec-count:empty { display: none; }

.hexe-hub-account-sec-body {
  padding: var(--hh-sp-4);
  border-top: 1px solid var(--hh-border);
  min-width: 0;
}

.hexe-hub-account-sec-body[hidden] { display: none; }

/* Die eingehängten Module bringen ihre eigene sticky Filterleiste mit — im
   Abschnitt darf die nicht über dem Konto-Kopf kleben. */
.hexe-hub-account-sec-body .hexe-hub-offers-bar { position: static; }

.hexe-hub-account-sec-fail {
  margin: 0 0 var(--hh-sp-3);
  font-size: var(--hh-fs-sm); line-height: 1.5; color: var(--hh-text-muted);
}

.hexe-hub-account-subhead {
  margin: 0 0 var(--hh-sp-2);
  font-size: var(--hh-fs-lg); font-weight: 700; color: var(--hh-text);
}

.hexe-hub-account-hint {
  margin: 0 0 var(--hh-sp-4);
  font-size: var(--hh-fs-sm); line-height: 1.5; color: var(--hh-text-muted);
}

/* ===================================================================
 * 1) Kopf — wer bin ich
 * =================================================================== */

.hexe-hub-account-ident {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--hh-sp-3); margin-bottom: var(--hh-sp-5);
}

.hexe-hub-account-avatar {
  flex: 0 0 auto; width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--hh-r-pill);
  background: var(--hh-accent-soft); color: var(--hh-accent);
}

.hexe-hub-account-ident-text { flex: 1 1 160px; min-width: 0; }

.hexe-hub-account-name {
  margin: 0; font-size: var(--hh-fs-xl); font-weight: 700;
  color: var(--hh-text); overflow-wrap: anywhere;
}

.hexe-hub-account-mail {
  margin: 2px 0 0; font-size: var(--hh-fs-sm);
  color: var(--hh-text-muted); overflow-wrap: anywhere;
}

.hexe-hub-account-tier {
  flex: 0 0 auto; padding: var(--hh-sp-2) var(--hh-sp-4);
  border: 1px solid var(--hh-border); border-radius: var(--hh-r-pill);
  font-size: var(--hh-fs-md); font-weight: 700;
  background: var(--hh-bg-sunk); color: var(--hh-text-muted);
}
.hexe-hub-account-tier[data-tier="sparfuchs"] { background: var(--hh-accent-soft); color: var(--hh-accent); border-color: transparent; }
.hexe-hub-account-tier[data-tier="geizhals"]  { background: var(--hh-warn-soft); color: var(--hh-warn); border-color: transparent; }
.hexe-hub-account-tier[data-tier="dagobert"]  { background: var(--hh-success-soft); color: var(--hh-success); border-color: transparent; }

/* --- Kontingente --- */

.hexe-hub-account-quotas { display: grid; grid-template-columns: 1fr; gap: var(--hh-sp-4); }

.hexe-hub-account-quota {
  padding: var(--hh-sp-3);
  border: 1px solid var(--hh-border); border-radius: var(--hh-r-md);
  background: var(--hh-bg-sunk);
}

.hexe-hub-account-quota-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--hh-sp-2); margin-bottom: var(--hh-sp-2);
}

.hexe-hub-account-quota-label { font-size: var(--hh-fs-sm); font-weight: 600; color: var(--hh-text); }

.hexe-hub-account-quota-value {
  flex: 0 0 auto; font-size: var(--hh-fs-sm); font-weight: 700;
  color: var(--hh-text); font-variant-numeric: tabular-nums;
}
.hexe-hub-account-quota-value.is-unlimited { color: var(--hh-success); }
.hexe-hub-account-quota-value.is-locked { color: var(--hh-text-subtle); font-weight: 600; }

.hexe-hub-account-meter {
  position: relative; display: block; width: 100%; height: 8px;
  border-radius: var(--hh-r-pill); background: var(--hh-border); overflow: hidden;
}
.hexe-hub-account-meter-fill {
  display: block; height: 100%; min-width: 2px; border-radius: inherit;
  background: var(--hh-accent); transition: width .3s ease;
}
.hexe-hub-account-meter.is-high .hexe-hub-account-meter-fill { background: var(--hh-warn); }
.hexe-hub-account-meter.is-full .hexe-hub-account-meter-fill { background: var(--hh-danger); }

.hexe-hub-account-quota-note {
  margin: var(--hh-sp-2) 0 0;
  font-size: var(--hh-fs-xs); line-height: 1.45; color: var(--hh-text-muted);
}

.hexe-hub-account-quota-lock {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--hh-sp-2);
  font-size: var(--hh-fs-xs); color: var(--hh-text-muted);
}

.hexe-hub-account-head-cta { margin-top: var(--hh-sp-4); }

/* ===================================================================
 * 2) Profil — PLZ / Ort / Radius
 * =================================================================== */

.hexe-hub-account-form-grid { display: grid; grid-template-columns: 1fr; gap: var(--hh-sp-3); }
.hexe-hub-account-field { display: flex; flex-direction: column; gap: var(--hh-sp-1); }

.hexe-hub-account-input {
  width: 100%; min-height: var(--hh-touch);
  padding: var(--hh-sp-2) var(--hh-sp-3);
  font-size: var(--hh-fs-md); color: var(--hh-text); background: var(--hh-bg);
  border: 1px solid var(--hh-border-strong); border-radius: var(--hh-r-ctl);
}
.hexe-hub-account-input:focus-visible {
  outline: 2px solid var(--hh-accent); outline-offset: 1px; border-color: var(--hh-accent);
}

.hexe-hub-account-field-radius { margin-top: var(--hh-sp-4); }

.hexe-hub-account-range-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--hh-sp-2);
}
.hexe-hub-account-range-out {
  font-size: var(--hh-fs-md); font-weight: 700;
  color: var(--hh-accent); font-variant-numeric: tabular-nums;
}

.hexe-hub-account-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: var(--hh-touch); margin: 0;
  background: transparent; cursor: pointer;
}
.hexe-hub-account-range::-webkit-slider-runnable-track { height: 6px; border-radius: var(--hh-r-pill); background: var(--hh-border); }
.hexe-hub-account-range::-moz-range-track { height: 6px; border-radius: var(--hh-r-pill); background: var(--hh-border); }
.hexe-hub-account-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; margin-top: -10px; border-radius: 50%;
  background: var(--hh-accent); border: 3px solid var(--hh-bg); box-shadow: var(--hh-sh-sm);
}
.hexe-hub-account-range::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--hh-accent); border: 3px solid var(--hh-bg); box-shadow: var(--hh-sh-sm);
}
.hexe-hub-account-range:focus-visible { outline: 2px solid var(--hh-accent); outline-offset: 4px; }

.hexe-hub-account-range-scale {
  display: flex; justify-content: space-between;
  font-size: var(--hh-fs-xs); color: var(--hh-text-subtle);
}

.hexe-hub-account-form-actions {
  display: flex; flex-wrap: wrap; gap: var(--hh-sp-2); margin-top: var(--hh-sp-4);
}

.hexe-hub-account-form-status {
  margin: var(--hh-sp-3) 0 0; min-height: 1.2em;
  font-size: var(--hh-fs-sm); line-height: 1.45; color: var(--hh-text-muted);
}
.hexe-hub-account-form-status.is-ok { color: var(--hh-success); }
.hexe-hub-account-form-status.is-error { color: var(--hh-danger); }

/* ===================================================================
 * 3) Darstellung
 * =================================================================== */

.hexe-hub-account-theme-seg { width: 100%; }

/* ===================================================================
 * 4) Premium
 * =================================================================== */

.hexe-hub-account-premium { scroll-margin-top: var(--hh-sp-5); }
.hexe-hub-account-premium-head { margin-bottom: var(--hh-sp-4); }

.hexe-hub-account-cycle-wrap { margin-bottom: var(--hh-sp-4); }
.hexe-hub-account-cycle { width: 100%; }
.hexe-hub-account-cycle-note {
  margin: var(--hh-sp-2) 0 0; font-size: var(--hh-fs-xs); color: var(--hh-text-muted);
}

/* Kein negatives Margin: sonst schiebt der Scroller bei 360 px die ganze
   Seite horizontal auf. Gescrollt wird ausschließlich hier drin. */
.hexe-hub-account-plans-scroll {
  margin: 0; padding: var(--hh-sp-2) 0 var(--hh-sp-3);
  overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory;
}
.hexe-hub-account-plans {
  display: flex; align-items: stretch; gap: var(--hh-sp-3); min-width: min-content;
}

.hexe-hub-account-plan {
  flex: 0 0 84%; max-width: 340px; scroll-snap-align: center;
  display: flex; flex-direction: column; padding: var(--hh-sp-4);
  border: 1px solid var(--hh-border); border-radius: var(--hh-r-card);
  background: var(--hh-bg-elev);
}
.hexe-hub-account-plan.is-popular { border-color: var(--hh-accent); box-shadow: var(--hh-sh-md); }
.hexe-hub-account-plan.is-current { border-color: var(--hh-success); }
.hexe-hub-account-plan.is-lower { opacity: .6; }
.hexe-hub-account-plan.is-upsell,
.hexe-hub-account-life.is-upsell { outline: 2px solid var(--hh-accent); outline-offset: 2px; }
.hexe-hub-account-plan.is-upsell-flash { animation: hexe-hub-account-flash 1.2s ease-in-out 2; }

@keyframes hexe-hub-account-flash {
  0%, 100% { box-shadow: var(--hh-sh-md); }
  50% { box-shadow: 0 0 0 6px var(--hh-accent-soft); }
}

.hexe-hub-account-plan-badges {
  display: flex; flex-wrap: wrap; gap: var(--hh-sp-1);
  min-height: 22px; margin-bottom: var(--hh-sp-2);
}
.hexe-hub-account-badge-pop,
.hexe-hub-account-badge-cur {
  padding: 2px var(--hh-sp-2); border-radius: var(--hh-r-pill);
  font-size: var(--hh-fs-xs); font-weight: 700;
}
.hexe-hub-account-badge-pop { background: var(--hh-accent); color: var(--hh-accent-ink); }
.hexe-hub-account-badge-cur { background: var(--hh-success-soft); color: var(--hh-success); }

.hexe-hub-account-plan-name { margin: 0; font-size: var(--hh-fs-xl); font-weight: 700; color: var(--hh-text); }
.hexe-hub-account-plan-claim {
  margin: 2px 0 var(--hh-sp-3); min-height: 2.6em;
  font-size: var(--hh-fs-xs); line-height: 1.45; color: var(--hh-text-muted);
}

.hexe-hub-account-price {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--hh-sp-1);
  padding-bottom: var(--hh-sp-3); margin-bottom: var(--hh-sp-3);
  border-bottom: 1px solid var(--hh-border);
}
.hexe-hub-account-price-main {
  font-size: var(--hh-fs-2xl); font-weight: 800; line-height: 1.1;
  color: var(--hh-text); font-variant-numeric: tabular-nums;
}
.hexe-hub-account-price-unit { font-size: var(--hh-fs-sm); color: var(--hh-text-muted); }
.hexe-hub-account-price-sub { flex: 1 0 100%; font-size: var(--hh-fs-xs); color: var(--hh-text-muted); }
.hexe-hub-account-price-save {
  padding: 1px var(--hh-sp-2); border-radius: var(--hh-r-pill);
  background: var(--hh-success-soft); color: var(--hh-success);
  font-size: var(--hh-fs-xs); font-weight: 700;
}

.hexe-hub-account-feats {
  flex: 1 1 auto; list-style: none; margin: 0 0 var(--hh-sp-4); padding: 0;
  display: flex; flex-direction: column; gap: var(--hh-sp-2);
}
.hexe-hub-account-feats li {
  display: flex; align-items: flex-start; gap: var(--hh-sp-2);
  font-size: var(--hh-fs-sm); line-height: 1.4; color: var(--hh-text);
}
.hexe-hub-account-feats li .hexe-hub-ico { flex: 0 0 auto; margin-top: 2px; }
.hexe-hub-account-feats li.is-yes .hexe-hub-ico { color: var(--hh-success); }
.hexe-hub-account-feats li.is-no,
.hexe-hub-account-feats li.is-no .hexe-hub-ico { color: var(--hh-text-subtle); }

.hexe-hub-account-plan-act { margin-top: auto; }
.hexe-hub-account-plan-note {
  margin: 0; padding: var(--hh-sp-2) 0; text-align: center;
  font-size: var(--hh-fs-xs); color: var(--hh-text-muted);
}

/* Anker, die als Button auftreten (Checkout-Link, Impressum, Logout). */
a.hexe-hub-account-plan-btn,
a.hexe-hub-account-life-btn,
a.hexe-hub-account-soon-contact,
a.hexe-hub-account-logout {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--hh-sp-2); min-height: var(--hh-touch); text-decoration: none;
}
a.hexe-hub-account-plan-btn { width: 100%; }

/* --- Lifetime-Banner --- */

.hexe-hub-account-life {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--hh-sp-3);
  margin-top: var(--hh-sp-4); padding: var(--hh-sp-4);
  border: 1px solid var(--hh-warn); border-radius: var(--hh-r-card);
  background: var(--hh-warn-soft);
}
.hexe-hub-account-life-ico { flex: 0 0 auto; color: var(--hh-warn); }
.hexe-hub-account-life-text { flex: 1 1 220px; min-width: 0; }
.hexe-hub-account-life-title {
  margin: 0 0 var(--hh-sp-1);
  font-size: var(--hh-fs-lg); font-weight: 700; color: var(--hh-warn);
}
.hexe-hub-account-life-desc {
  margin: 0; font-size: var(--hh-fs-sm); line-height: 1.5; color: var(--hh-text);
}
.hexe-hub-account-life-seats {
  margin: var(--hh-sp-2) 0 0;
  font-size: var(--hh-fs-xs); line-height: 1.5; color: var(--hh-text-muted);
}
.hexe-hub-account-life-act {
  flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--hh-sp-3);
}
.hexe-hub-account-life-price { display: flex; flex-direction: column; }

/* --- Vertrauen / Downgrade --- */

.hexe-hub-account-trust {
  list-style: none; display: flex; flex-wrap: wrap;
  gap: var(--hh-sp-2) var(--hh-sp-4); margin: var(--hh-sp-4) 0 0; padding: 0;
}
.hexe-hub-account-trust li {
  display: flex; align-items: center; gap: var(--hh-sp-1);
  font-size: var(--hh-fs-xs); color: var(--hh-text-muted);
}
.hexe-hub-account-trust .hexe-hub-ico { color: var(--hh-success); }

.hexe-hub-account-downgrade {
  margin: var(--hh-sp-3) 0 0;
  font-size: var(--hh-fs-xs); line-height: 1.5; color: var(--hh-text-muted);
}

/* --- FAQ --- */

.hexe-hub-account-faq { margin-top: var(--hh-sp-5); }
.hexe-hub-account-faq-item { border-bottom: 1px solid var(--hh-border); }

.hexe-hub-account-faq-q {
  position: relative; display: flex; align-items: center;
  min-height: var(--hh-touch); padding: var(--hh-sp-2) var(--hh-sp-5) var(--hh-sp-2) 0;
  cursor: pointer; list-style: none;
  font-size: var(--hh-fs-sm); font-weight: 600; color: var(--hh-text);
}
.hexe-hub-account-faq-q::-webkit-details-marker { display: none; }
.hexe-hub-account-faq-q::after {
  content: ""; position: absolute; right: var(--hh-sp-2); width: 8px; height: 8px;
  border-right: 2px solid var(--hh-text-muted); border-bottom: 2px solid var(--hh-text-muted);
  transform: rotate(45deg); transition: transform .2s ease;
}
.hexe-hub-account-faq-item[open] .hexe-hub-account-faq-q::after { transform: rotate(-135deg); }
.hexe-hub-account-faq-a {
  margin: 0 0 var(--hh-sp-3); padding-right: var(--hh-sp-4);
  font-size: var(--hh-fs-sm); line-height: 1.55; color: var(--hh-text-muted);
}

/* --- Sheet "Bald verfügbar" --- */

.hexe-hub-account-soon-lead {
  margin: 0 0 var(--hh-sp-3);
  font-size: var(--hh-fs-md); line-height: 1.5; color: var(--hh-text);
}
.hexe-hub-account-soon-list {
  list-style: none; margin: 0 0 var(--hh-sp-4); padding: 0;
  display: flex; flex-direction: column; gap: var(--hh-sp-2);
}
.hexe-hub-account-soon-list li {
  display: flex; align-items: flex-start; gap: var(--hh-sp-2);
  font-size: var(--hh-fs-sm); line-height: 1.45; color: var(--hh-text-muted);
}
.hexe-hub-account-soon-list .hexe-hub-ico { flex: 0 0 auto; margin-top: 2px; color: var(--hh-success); }
.hexe-hub-account-soon-act { display: flex; flex-wrap: wrap; gap: var(--hh-sp-2); }
.hexe-hub-account-soon-note {
  margin: var(--hh-sp-3) 0 0;
  font-size: var(--hh-fs-xs); line-height: 1.5; color: var(--hh-text-muted);
}

/* ===================================================================
 * 5) Daten & Datenschutz · 6) Admin
 * =================================================================== */

.hexe-hub-account-privacy-act { margin-bottom: var(--hh-sp-4); }
.hexe-hub-account-legal { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--hh-border); }

.hexe-hub-account-legal-link,
.hexe-hub-account-admin-link {
  display: flex; align-items: center; justify-content: space-between; gap: var(--hh-sp-2);
  min-height: var(--hh-touch); padding: var(--hh-sp-2) 0;
  border-bottom: 1px solid var(--hh-border);
  font-size: var(--hh-fs-sm); color: var(--hh-text); text-decoration: none;
}
.hexe-hub-account-legal-link:hover,
.hexe-hub-account-admin-link:hover { color: var(--hh-accent); }
.hexe-hub-account-legal-link .hexe-hub-ico { color: var(--hh-text-subtle); }

.hexe-hub-account-logout-wrap { margin-top: var(--hh-sp-4); }

.hexe-hub-account-admin-links { display: flex; flex-direction: column; }
.hexe-hub-account-admin-link { justify-content: flex-start; color: var(--hh-text-muted); }
.hexe-hub-account-admin-link .hexe-hub-ico { color: var(--hh-info); }

/* ===================================================================
 * Größere Viewports
 * =================================================================== */

@media (min-width: 560px) {
  .hexe-hub-account-quotas { grid-template-columns: 1fr 1fr; }
  .hexe-hub-account-form-grid { grid-template-columns: 1fr 1fr; }
  .hexe-hub-account-plan { flex: 0 0 300px; }
  .hexe-hub-account-legal { grid-template-columns: 1fr 1fr; column-gap: var(--hh-sp-5); }
  .hexe-hub-account-life-act { flex: 0 0 auto; flex-direction: column; align-items: flex-start; }
}

@media (min-width: 900px) {
  .hexe-hub-account-plans-scroll { padding: var(--hh-sp-2) 0 var(--hh-sp-3); overflow-x: visible; }
  .hexe-hub-account-plans { display: grid; grid-template-columns: repeat(3, 1fr); }
  .hexe-hub-account-plan { flex: 1 1 auto; max-width: none; }
  .hexe-hub-account-plan.is-popular { transform: translateY(-6px); }
  .hexe-hub-account-theme-seg { max-width: 420px; }
  .hexe-hub-account-cycle { max-width: 360px; }
}

@media (prefers-reduced-motion: reduce) {
  .hexe-hub-account-meter-fill,
  .hexe-hub-account-faq-q::after { transition: none; }
  .hexe-hub-account-plan.is-upsell-flash { animation: none; }
  .hexe-hub-account-plan.is-popular { transform: none; }
}