/* ===========================================================================
 * Hexe Hub — Design-System
 *
 * Basis-Layer für das konsolidierte Hub-Modul: Design-Tokens, App-Shell,
 * Navigation, alle Core-Primitive aus hexe-hub-core.js und die generischen
 * Bausteine, aus denen die View-Module (listen / angebote / maerkte / radar /
 * alarme / konto) ihre Oberflächen zusammensetzen.
 *
 * Grundsätze:
 *   1. Mobile-first — Basis ist das Handy, @media (min-width) baut nach oben.
 *   2. Alles unter `.hexe-hub*` gescoped. Das Modul lebt in einem fremden
 *      Theme (Divi 5), deshalb keine globalen Resets auf `*` oder `body`.
 *   3. Kein Lila (Projektregel). Akzent ist Hexen-Rot `--hh-accent`.
 *   4. Money-Grün ist Semantik, keine Deko.
 *   5. Dark-Mode ist hier komplett neu — die restliche Seite hat keinen.
 *
 * Vertrag: CONTRACT.md  ·  Core: hexe-hub-core.js
 * =========================================================================== */


/* ===========================================================================
 * 1. TOKENS — LIGHT (Default)
 *
 * Gesetzt auf den Hub-Root UND auf die drei Elemente, die der Core an
 * `document.body` hängt (Backdrop, Toast-Host) bzw. die ohne Hub gerendert
 * werden (Login-Hinweis). Ohne diese Selektoren hätten Sheets und Toasts
 * keine Variablen, weil sie außerhalb von `.hexe-hub` im DOM landen.
 *
 * Namenskonvention:
 *   --hh-<name>        Grundfarbe, auch als Textfarbe lesbar (>= 4.5:1)
 *   --hh-<name>-soft   getönte Fläche für Pillen/Hinweisboxen
 *   --hh-<name>-ink    Vordergrund AUF der gefüllten Grundfarbe (Buttons)
 * Für getönte Flächen gilt: `background: …-soft; color: …;` — die Paarung ist
 * in beiden Themes auf Kontrast geprüft.
 * =========================================================================== */

.hexe-hub[data-hexe-hub],
.hexe-hub-login,
.hexe-hub-backdrop,
.hexe-hub-toasts {

  /* --- Flächen ---------------------------------------------------------- */
  --hh-bg:              #f7f8fa;   /* Grundfläche des Moduls               */
  --hh-bg-elev:         #ffffff;   /* angehoben: Karten, Sheets, Nav       */
  --hh-bg-sunk:         #eef0f4;   /* eingelassen: Inputs, Rails, Tracks   */
  --hh-bg-hover:        #f1f3f6;   /* Hover-Fläche auf hellem Grund        */

  /* --- Text ------------------------------------------------------------- */
  --hh-text:            #1a1d21;
  --hh-text-muted:      #5c666f;
  --hh-text-subtle:     #646e77;   /* 4.89:1 auf --hh-bg, 4.56:1 auf -sunk */

  /* --- Linien ----------------------------------------------------------- */
  --hh-border:          #e3e6ea;
  --hh-border-strong:   #c6ccd3;

  /* --- Akzent (Hexen-Rot) ----------------------------------------------- */
  --hh-accent:          #c00000;
  --hh-accent-strong:   #a00000;   /* Hover/Active auf gefüllten Flächen   */
  --hh-accent-ink:      #ffffff;
  --hh-accent-soft:     #fdecec;

  /* --- Sekundär (Website-Blau) ------------------------------------------ */
  --hh-secondary:       #2271b1;
  --hh-secondary-soft:  #e8f1f9;

  /* --- Semantik --------------------------------------------------------- */
  --hh-success:         #147a38;   /* NUR für echte Ersparnis               */
  --hh-success-soft:    #e7f6ec;
  --hh-success-ink:     #ffffff;

  --hh-warn:            #b45309;
  --hh-warn-soft:       #fdf0dd;
  --hh-warn-ink:        #ffffff;

  --hh-danger:          #c62d24;
  --hh-danger-soft:     #fdeceb;
  --hh-danger-ink:      #ffffff;

  --hh-info:            #1f6ba8;
  --hh-info-soft:       #e8f1f9;
  --hh-info-ink:        #ffffff;

  /* --- Radien ----------------------------------------------------------- *
   * Vier Stufen, vergeben nach der ROLLE des Elements. Die Regel steht im
   * Kopf von hexe-design-tokens.php und gilt für die ganze Seite:
   *   -pill   vom Label bemaßt, zeigt Zustand: Pills, Chips, Badges, Balken
   *   -ctl    wird bedient: Button, Input, Select, Textarea, Segment
   *   -card   trägt Inhalt: Karten, Leisten, Panels, Dropdowns
   *   -sheet  legt sich über alles: Sheets, Modals, Popover
   *   50%     nur echte Kreise: Icon-Buttons, Avatare, Schalterknöpfe        */
  --hh-r-sm:            8px;
  --hh-r-md:            12px;
  --hh-r-lg:            18px;
  --hh-r-pill:          999px;
  --hh-r-ctl:           var(--hh-r-sm);
  --hh-r-card:          var(--hh-r-md);
  --hh-r-sheet:         var(--hh-r-lg);

  /* --- Höhen der Bedienelemente ----------------------------------------- *
   * Zwei Stufen, mehr braucht es nicht. Kompakt gibt es nur mit Maus; auf
   * `pointer: coarse` wird daraus überall das Touch-Maß.                    */
  --hh-ctl-h:           44px;
  --hh-ctl-h-sm:        36px;

  /* --- Schatten (weich, geschichtet) ------------------------------------ */
  --hh-sh-sm:           0 1px 2px rgba(16, 24, 32, .06),
                        0 1px 1px rgba(16, 24, 32, .04);
  --hh-sh-md:           0 2px 6px rgba(16, 24, 32, .07),
                        0 8px 20px rgba(16, 24, 32, .06);
  --hh-sh-lg:           0 4px 12px rgba(16, 24, 32, .09),
                        0 20px 48px rgba(16, 24, 32, .16);

  /* --- Abstände (4er-Raster, deckungsgleich mit --hexe-sp-*) ------------- */
  --hh-sp-1:            4px;
  --hh-sp-2:            8px;
  --hh-sp-3:            12px;
  --hh-sp-4:            16px;
  --hh-sp-5:            24px;
  --hh-sp-6:            32px;
  --hh-sp-7:            48px;

  /* --- Schrift ---------------------------------------------------------- *
   * Open Sans ist die Schrift der Website. Sie liegt lokal (hexe-privacy.php
   * lädt vendor/fonts/hexe-fonts.css) — kein Request an Google, das war ein
   * DSGVO-Blocker. Vorher stand hier die Systemschrift; genau daran hat man
   * dem Hub angesehen, dass er eine fremde App ist.
   * Great Vibes kommt hier NICHT vor: sie ist Marken-Stimme der öffentlichen
   * Seiten, nicht Bedienoberfläche.                                          */
  --hh-font:            "Open Sans", -apple-system, BlinkMacSystemFont,
                        "Segoe UI", Roboto, "Helvetica Neue", Arial,
                        "Noto Sans", sans-serif;
  --hh-fs-xs:           11px;
  --hh-fs-sm:           12.5px;
  --hh-fs-md:           15px;   /* Fließtext                                */
  --hh-fs-lg:           17px;
  --hh-fs-xl:           21px;
  --hh-fs-2xl:          26px;
  --hh-lh-tight:        1.25;
  --hh-lh:              1.5;

  /* --- Überschriften (dieselbe Skala wie außerhalb des Hubs) ------------- */
  --hh-h1:              26px;   /* Seitentitel im Hub — Open Sans, nicht    */
  --hh-h2:              21px;   /* Great Vibes. Der Hub ist Werkzeug.       */
  --hh-h3:              17px;
  --hh-h4:              15px;
  --hh-h-card:          15px;

  /* --- Interaktion ------------------------------------------------------ */
  --hh-touch:           44px;
  --hh-focus:           var(--hh-secondary);
  --hh-t:               .16s ease;      /* schnelle Zustandswechsel         */
  --hh-t-slow:          .24s cubic-bezier(.22, .8, .3, 1);

  /* --- Layout-Maße ------------------------------------------------------ */
  --hh-navbar-h:        62px;           /* Bottom-Tab-Bar auf Mobil         */
  --hh-rail-w:          96px;           /* Icon-Rail auf Desktop            */
  --hh-safe-b:          env(safe-area-inset-bottom, 0px);

  /* --- Z-Ebenen (kompatibel zu --hexe-z-*) ------------------------------ */
  --hh-z-nav:           900;
  --hh-z-modal:         1200;
  --hh-z-toast:         1400;

  /* --- Overlay ---------------------------------------------------------- */
  --hh-scrim:           rgba(16, 22, 28, .48);
  --hh-skel:            #e6e9ee;
  --hh-skel-hi:         #f2f4f7;
}


/* ===========================================================================
 * 2. TOKENS — DARK
 *
 * Der Hub bringt den Dark-Mode selbst mit; das restliche Theme kennt keinen.
 * Alle Text-/Flächenpaare sind auf >= 4.5:1 geprüft. Der Akzent wird im
 * Dunkeln aufgehellt (#ff6257) und bekommt eine dunkle Ink-Farbe — ein
 * gesättigtes #c00 als Fläche mit weißer Schrift kommt im Dark-Mode nicht
 * über 4.5:1 und wäre als Textfarbe auf dunklem Grund unlesbar.
 * =========================================================================== */

.hexe-hub[data-hexe-hub][data-theme="dark"] {
  --hh-bg:              #15181c;
  --hh-bg-elev:         #1d2126;
  --hh-bg-sunk:         #101317;
  --hh-bg-hover:        #252b31;

  --hh-text:            #e9edf1;
  --hh-text-muted:      #9fabb5;
  --hh-text-subtle:     #808d97;

  --hh-border:          #2a3037;
  --hh-border-strong:   #3c454e;

  --hh-accent:          #ff6257;
  --hh-accent-strong:   #ff8078;
  --hh-accent-ink:      #2a0c09;
  --hh-accent-soft:     #331614;

  --hh-secondary:       #6ab7f0;
  --hh-secondary-soft:  #12283a;

  --hh-success:         #4ade80;
  --hh-success-soft:    #14301f;
  --hh-success-ink:     #052e14;

  --hh-warn:            #fbbf24;
  --hh-warn-soft:       #33260c;
  --hh-warn-ink:        #2a1c00;

  --hh-danger:          #ff7a70;
  --hh-danger-soft:     #351816;
  --hh-danger-ink:      #2e0b08;

  --hh-info:            #6ab7f0;
  --hh-info-soft:       #12283a;
  --hh-info-ink:        #06202f;

  --hh-sh-sm:           0 1px 2px rgba(0, 0, 0, .5);
  --hh-sh-md:           0 2px 6px rgba(0, 0, 0, .45),
                        0 8px 22px rgba(0, 0, 0, .38);
  --hh-sh-lg:           0 4px 14px rgba(0, 0, 0, .5),
                        0 22px 52px rgba(0, 0, 0, .55);

  --hh-focus:           #7cc3f7;
  --hh-scrim:           rgba(0, 0, 0, .64);
  --hh-skel:            #262c33;
  --hh-skel-hi:         #333b43;

  color-scheme: dark;
}

/* Backdrop und Toast-Host hängen am <body>, nicht im Hub — deshalb per
 * :has() nachziehen. Bewusst eine EIGENE Regel: falls ein Browser :has()
 * nicht kennt, verwirft er nur diese und nicht den Hub-Block darüber. */
body:has(.hexe-hub[data-hexe-hub][data-theme="dark"]) .hexe-hub-backdrop,
body:has(.hexe-hub[data-hexe-hub][data-theme="dark"]) .hexe-hub-toasts {
  --hh-bg:              #15181c;
  --hh-bg-elev:         #1d2126;
  --hh-bg-sunk:         #101317;
  --hh-bg-hover:        #252b31;
  --hh-text:            #e9edf1;
  --hh-text-muted:      #9fabb5;
  --hh-text-subtle:     #808d97;
  --hh-border:          #2a3037;
  --hh-border-strong:   #3c454e;
  --hh-accent:          #ff6257;
  --hh-accent-strong:   #ff8078;
  --hh-accent-ink:      #2a0c09;
  --hh-accent-soft:     #331614;
  --hh-secondary:       #6ab7f0;
  --hh-secondary-soft:  #12283a;
  --hh-success:         #4ade80;
  --hh-success-soft:    #14301f;
  --hh-success-ink:     #052e14;
  --hh-warn:            #fbbf24;
  --hh-warn-soft:       #33260c;
  --hh-warn-ink:        #2a1c00;
  --hh-danger:          #ff7a70;
  --hh-danger-soft:     #351816;
  --hh-danger-ink:      #2e0b08;
  --hh-info:            #6ab7f0;
  --hh-info-soft:       #12283a;
  --hh-info-ink:        #06202f;
  --hh-sh-sm:           0 1px 2px rgba(0, 0, 0, .5);
  --hh-sh-md:           0 2px 6px rgba(0, 0, 0, .45),
                        0 8px 22px rgba(0, 0, 0, .38);
  --hh-sh-lg:           0 4px 14px rgba(0, 0, 0, .5),
                        0 22px 52px rgba(0, 0, 0, .55);
  --hh-focus:           #7cc3f7;
  --hh-scrim:           rgba(0, 0, 0, .64);
  --hh-skel:            #262c33;
  --hh-skel-hi:         #333b43;
  color-scheme: dark;
}


/* --- 2b. data-theme="auto" folgt dem System ------------------------------ */

@media (prefers-color-scheme: dark) {

  .hexe-hub[data-hexe-hub][data-theme="auto"],
  .hexe-hub-login {
    --hh-bg:              #15181c;
    --hh-bg-elev:         #1d2126;
    --hh-bg-sunk:         #101317;
    --hh-bg-hover:        #252b31;

    --hh-text:            #e9edf1;
    --hh-text-muted:      #9fabb5;
    --hh-text-subtle:     #808d97;

    --hh-border:          #2a3037;
    --hh-border-strong:   #3c454e;

    --hh-accent:          #ff6257;
    --hh-accent-strong:   #ff8078;
    --hh-accent-ink:      #2a0c09;
    --hh-accent-soft:     #331614;

    --hh-secondary:       #6ab7f0;
    --hh-secondary-soft:  #12283a;

    --hh-success:         #4ade80;
    --hh-success-soft:    #14301f;
    --hh-success-ink:     #052e14;

    --hh-warn:            #fbbf24;
    --hh-warn-soft:       #33260c;
    --hh-warn-ink:        #2a1c00;

    --hh-danger:          #ff7a70;
    --hh-danger-soft:     #351816;
    --hh-danger-ink:      #2e0b08;

    --hh-info:            #6ab7f0;
    --hh-info-soft:       #12283a;
    --hh-info-ink:        #06202f;

    --hh-sh-sm:           0 1px 2px rgba(0, 0, 0, .5);
    --hh-sh-md:           0 2px 6px rgba(0, 0, 0, .45),
                          0 8px 22px rgba(0, 0, 0, .38);
    --hh-sh-lg:           0 4px 14px rgba(0, 0, 0, .5),
                          0 22px 52px rgba(0, 0, 0, .55);

    --hh-focus:           #7cc3f7;
    --hh-scrim:           rgba(0, 0, 0, .64);
    --hh-skel:            #262c33;
    --hh-skel-hi:         #333b43;

    color-scheme: dark;
  }

  body:has(.hexe-hub[data-hexe-hub][data-theme="auto"]) .hexe-hub-backdrop,
  body:has(.hexe-hub[data-hexe-hub][data-theme="auto"]) .hexe-hub-toasts {
    --hh-bg:              #15181c;
    --hh-bg-elev:         #1d2126;
    --hh-bg-sunk:         #101317;
    --hh-bg-hover:        #252b31;
    --hh-text:            #e9edf1;
    --hh-text-muted:      #9fabb5;
    --hh-text-subtle:     #808d97;
    --hh-border:          #2a3037;
    --hh-border-strong:   #3c454e;
    --hh-accent:          #ff6257;
    --hh-accent-strong:   #ff8078;
    --hh-accent-ink:      #2a0c09;
    --hh-accent-soft:     #331614;
    --hh-secondary:       #6ab7f0;
    --hh-secondary-soft:  #12283a;
    --hh-success:         #4ade80;
    --hh-success-soft:    #14301f;
    --hh-success-ink:     #052e14;
    --hh-warn:            #fbbf24;
    --hh-warn-soft:       #33260c;
    --hh-warn-ink:        #2a1c00;
    --hh-danger:          #ff7a70;
    --hh-danger-soft:     #351816;
    --hh-danger-ink:      #2e0b08;
    --hh-info:            #6ab7f0;
    --hh-info-soft:       #12283a;
    --hh-info-ink:        #06202f;
    --hh-sh-sm:           0 1px 2px rgba(0, 0, 0, .5);
    --hh-sh-md:           0 2px 6px rgba(0, 0, 0, .45),
                          0 8px 22px rgba(0, 0, 0, .38);
    --hh-sh-lg:           0 4px 14px rgba(0, 0, 0, .5),
                          0 22px 52px rgba(0, 0, 0, .55);
    --hh-focus:           #7cc3f7;
    --hh-scrim:           rgba(0, 0, 0, .64);
    --hh-skel:            #262c33;
    --hh-skel-hi:         #333b43;
    color-scheme: dark;
  }
}


/* ===========================================================================
 * 3. DEFENSIVE BASIS
 *
 * Divi 5 bringt eigene Resets mit, auf die wir uns nicht verlassen. Alles
 * hier ist streng auf unsere Container gescoped — kein globales `*`.
 * =========================================================================== */

.hexe-hub,
.hexe-hub *,
.hexe-hub *::before,
.hexe-hub *::after,
.hexe-hub-backdrop,
.hexe-hub-backdrop *,
.hexe-hub-toasts,
.hexe-hub-toasts *,
.hexe-hub-login,
.hexe-hub-login * {
  box-sizing: border-box;
}

.hexe-hub,
.hexe-hub-backdrop,
.hexe-hub-toasts,
.hexe-hub-login {
  font-family: var(--hh-font);
  font-size: var(--hh-fs-md);
  line-height: var(--hh-lh);
  color: var(--hh-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.hexe-hub {
  background: var(--hh-bg);
  border-radius: var(--hh-r-lg);
  /* Kein overflow:hidden — die Nav ist auf Mobil fixed positioniert. */
  max-width: 100%;
}

/* Typografie-Reset innerhalb des Moduls */
.hexe-hub h1,
.hexe-hub h2,
.hexe-hub h3,
.hexe-hub h4,
.hexe-hub h5,
.hexe-hub p,
.hexe-hub figure,
.hexe-hub blockquote,
.hexe-hub-backdrop h1,
.hexe-hub-backdrop h2,
.hexe-hub-backdrop h3,
.hexe-hub-backdrop p {
  margin: 0;
  padding: 0;
  font-family: inherit;
  color: inherit;
  letter-spacing: normal;
  text-transform: none;
}

/* Ueberschriften-Skala im Hub. Dieselben Stufen wie auf der uebrigen Seite
 * (hexe-design-tokens.php), nur ohne Great Vibes: der Hub ist Werkzeug, nicht
 * Marken-Auftritt. Komponenten duerfen einzelne Stufen ueberschreiben, wenn
 * die Ueberschrift in Wahrheit ein UI-Label ist (Karten-Titel, Abschnitts-
 * Eyebrow) — das ist die dokumentierte Ausnahme, nicht die Regel. */
.hexe-hub h1, .hexe-hub-backdrop h1 { font-size: var(--hh-h1); font-weight: 800; line-height: var(--hh-lh-tight); }
.hexe-hub h2, .hexe-hub-backdrop h2 { font-size: var(--hh-h2); font-weight: 800; line-height: var(--hh-lh-tight); }
.hexe-hub h3, .hexe-hub-backdrop h3 { font-size: var(--hh-h3); font-weight: 700; line-height: var(--hh-lh-tight); }
.hexe-hub h4, .hexe-hub-backdrop h4 { font-size: var(--hh-h4); font-weight: 700; line-height: var(--hh-lh-tight); }

.hexe-hub ul,
.hexe-hub ol,
.hexe-hub-backdrop ul,
.hexe-hub-backdrop ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hexe-hub img,
.hexe-hub svg,
.hexe-hub-backdrop img,
.hexe-hub-backdrop svg {
  max-width: 100%;
  vertical-align: middle;
}

.hexe-hub a,
.hexe-hub-login a {
  color: var(--hh-accent);
  text-decoration: none;
  font-weight: 600;
}

.hexe-hub a:hover,
.hexe-hub-login a:hover {
  text-decoration: underline;
}

.hexe-hub hr {
  border: 0;
  border-top: 1px solid var(--hh-border);
  margin: var(--hh-sp-4) 0;
}

/* Button-Grundreset — Divi setzt großzügig eigene Button-Styles.
 *
 * ACHTUNG: dieser Selektor ist spezifischer (0,1,1) als jede Komponenten-
 * klasse (.hexe-hub-btn = 0,1,0). Ein `border-radius: 0` hier hat deshalb
 * JEDEN Button im Hub eckig gemacht — auch die, die laut ihrer eigenen Regel
 * eine Pille oder weiche Ecken haben sollten. Gemessen: 18 von 22 Buttons
 * kamen mit 0px heraus. Der Radius gehört darum in die Komponente, nicht in
 * den Reset. Divi bringt selbst keinen Radius mit, es gibt nichts zu neutra-
 * lisieren.                                                                */
.hexe-hub button,
.hexe-hub-backdrop button,
.hexe-hub-toasts button {
  font: inherit;
  color: inherit;
  letter-spacing: normal;
  text-transform: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  box-shadow: none;
  text-shadow: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.hexe-hub button::after,
.hexe-hub button::before,
.hexe-hub-backdrop button::after,
.hexe-hub-backdrop button::before {
  content: none !important;   /* Divi hängt Pseudo-Pfeile an Buttons */
}

/* Einheitlicher Fokus-Ring für alles im Modul */
.hexe-hub :focus-visible,
.hexe-hub-backdrop :focus-visible,
.hexe-hub-login :focus-visible {
  outline: 2px solid var(--hh-focus);
  outline-offset: 2px;
  border-radius: var(--hh-r-sm);
}

/* Scroll-Sperre, wenn ein Sheet offen ist (Core setzt die Klasse am body). */
body.hexe-hub-locked {
  overflow: hidden;
  touch-action: none;
}


/* ===========================================================================
 * 4. SHELL & LAYOUT
 * =========================================================================== */

.hexe-hub-shell {
  display: flex;
  flex-direction: column;
  min-height: 320px;
  position: relative;
}

.hexe-hub-main {
  min-width: 0;               /* verhindert Grid-Blowout bei breiten Inhalten */
  padding: var(--hh-sp-4) var(--hh-sp-4)
           calc(var(--hh-navbar-h) + var(--hh-safe-b) + var(--hh-sp-6));
}

.hexe-hub-view {
  display: block;
  min-width: 0;
  animation: hh-view-in .22s ease both;
}

@keyframes hh-view-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Breite Inhalte (Tabellen etc.) niemals die Seite sprengen lassen. */
.hexe-hub-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}


/* ===========================================================================
 * 5. NAVIGATION
 *
 * Drei Ausprägungen desselben Markups:
 *   < 720 px   Bottom-Tab-Bar, fixiert, Safe-Area-tauglich
 *   720–1023   horizontale Tab-Leiste oben, scrollbar
 *   >= 1024    Icon-Rail links (Icon über Label), Content rechts
 * =========================================================================== */

/* --- 5a. Mobil: Bottom-Tab-Bar ------------------------------------------ */

.hexe-hub-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--hh-z-nav);
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0 var(--hh-sp-1) var(--hh-safe-b);
  background: var(--hh-bg-elev);                                   /* Fallback */
  background: color-mix(in srgb, var(--hh-bg-elev) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  backdrop-filter: saturate(1.6) blur(12px);
  border-top: 1px solid var(--hh-border);
  box-shadow: 0 -2px 12px rgba(16, 24, 32, .06);
  /* Nicht-mobile Tabs laufen hier ins horizontale Overflow. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.hexe-hub-nav::-webkit-scrollbar { display: none; }

.hexe-hub-nav-btn {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: var(--hh-touch);
  min-height: var(--hh-navbar-h);
  padding: var(--hh-sp-2) var(--hh-sp-1) var(--hh-sp-2);
  color: var(--hh-text-muted);
  font-size: var(--hh-fs-xs);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: .01em;
  border-radius: var(--hh-r-ctl);
  position: relative;
  transition: color var(--hh-t), background var(--hh-t);
  -webkit-tap-highlight-color: transparent;
}

/* Die fünf Haupt-Tabs teilen sich die Bar-Breite … */
.hexe-hub-nav-btn.is-mobile {
  flex: 1 1 0;
  order: 0;
}

/* … der Rest wandert dahinter ins Overflow: kompakt, nur Icon,
 * per horizontalem Wischen in der Bar erreichbar. */
.hexe-hub-nav-btn:not(.is-mobile) {
  order: 1;
  width: var(--hh-touch);
  opacity: .72;
}

.hexe-hub-nav-btn:not(.is-mobile) .hexe-hub-nav-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.hexe-hub-nav-label {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hexe-hub-nav-btn .hexe-hub-ico {
  transition: transform var(--hh-t);
}

.hexe-hub-nav-btn:hover {
  color: var(--hh-text);
}

.hexe-hub-nav-btn:active .hexe-hub-ico {
  transform: scale(.9);
}

.hexe-hub-nav-btn.is-active {
  color: var(--hh-accent);
  opacity: 1;
}

/* Aktiv-Indikator: kleine Kappe über dem Icon. */
.hexe-hub-nav-btn.is-active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--hh-accent);
}

.hexe-hub-nav-btn.is-active .hexe-hub-ico {
  transform: translateY(-1px);
}

.hexe-hub-nav-btn:focus-visible {
  outline: 2px solid var(--hh-focus);
  outline-offset: -3px;
}


/* --- 5b. Tablet: horizontale Tab-Leiste oben ---------------------------- */

@media (min-width: 720px) {

  .hexe-hub-nav {
    position: sticky;
    top: 0;
    bottom: auto;
    z-index: var(--hh-z-nav);
    gap: var(--hh-sp-1);
    padding: var(--hh-sp-2);
    border-top: 0;
    border-bottom: 1px solid var(--hh-border);
    border-radius: var(--hh-r-lg) var(--hh-r-lg) 0 0;
    box-shadow: var(--hh-sh-sm);
  }

  .hexe-hub-nav-btn,
  .hexe-hub-nav-btn.is-mobile,
  .hexe-hub-nav-btn:not(.is-mobile) {
    flex: 0 0 auto;
    order: 0;
    width: auto;
    opacity: 1;
    flex-direction: row;
    gap: var(--hh-sp-2);
    min-height: var(--hh-touch);
    padding: var(--hh-sp-2) var(--hh-sp-4);
    font-size: var(--hh-fs-sm);
    border-radius: var(--hh-r-pill);
  }

  .hexe-hub-nav-btn:not(.is-mobile) .hexe-hub-nav-label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
  }

  .hexe-hub-nav-btn:hover {
    background: var(--hh-bg-hover);
  }

  .hexe-hub-nav-btn.is-active {
    background: var(--hh-accent-soft);
    color: var(--hh-accent);
  }

  .hexe-hub-nav-btn.is-active::before {
    content: none;
  }

  .hexe-hub-nav-btn.is-active .hexe-hub-ico {
    transform: none;
  }

  .hexe-hub-main {
    padding: var(--hh-sp-5);
  }
}


/* --- 5c. Desktop: Icon-Rail links --------------------------------------- */

@media (min-width: 1024px) {

  .hexe-hub-shell {
    display: grid;
    grid-template-columns: var(--hh-rail-w) minmax(0, 1fr);
    align-items: start;
    /* Schmalere Shell-Rahmung: der gewonnene Platz geht in die Inhaltsspalte,
       die Karten bringen ihre eigene Innenpolsterung ohnehin mit. */
    gap: var(--hh-sp-4);
    padding: var(--hh-sp-4);
  }

  .hexe-hub-nav {
    position: sticky;
    top: var(--hh-sp-5);
    flex-direction: column;
    align-items: stretch;
    gap: var(--hh-sp-1);
    padding: var(--hh-sp-2);
    background: var(--hh-bg-elev);
    border: 1px solid var(--hh-border);
    border-radius: var(--hh-r-lg);
    box-shadow: var(--hh-sh-sm);
    overflow: visible;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .hexe-hub-nav-btn,
  .hexe-hub-nav-btn.is-mobile,
  .hexe-hub-nav-btn:not(.is-mobile) {
    flex: 0 0 auto;
    flex-direction: column;   /* Icon über Label */
    gap: var(--hh-sp-1);
    width: 100%;
    min-height: 64px;
    padding: var(--hh-sp-2) var(--hh-sp-1);
    font-size: var(--hh-fs-xs);
    border-radius: var(--hh-r-md);
  }

  .hexe-hub-nav-btn.is-active {
    background: var(--hh-accent-soft);
  }

  .hexe-hub-main {
    padding: 0;
    max-width: 1120px;
  }
}


/* ===========================================================================
 * 6. BOOT-ZUSTAND (Markup aus hexe-hub.php)
 * =========================================================================== */

.hexe-hub-boot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--hh-sp-3);
  min-height: 260px;
  padding: var(--hh-sp-7) var(--hh-sp-4);
  color: var(--hh-text-muted);
  font-size: var(--hh-fs-sm);
  text-align: center;
}

.hexe-hub-boot-spinner {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid var(--hh-border);
  border-top-color: var(--hh-accent);
  animation: hh-spin .8s linear infinite;
}

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


/* ===========================================================================
 * 7. LOGIN-HINWEIS (Gäste — steht ohne Hub-Root im DOM)
 * =========================================================================== */

.hexe-hub-login {
  max-width: 520px;
  margin: var(--hh-sp-5) auto;
  padding: var(--hh-sp-5);
  background: var(--hh-bg-elev);
  border: 1px solid var(--hh-border);
  border-radius: var(--hh-r-lg);
  box-shadow: var(--hh-sh-sm);
  text-align: center;
}

.hexe-hub-login p {
  margin: 0;
  color: var(--hh-text-muted);
}


/* ===========================================================================
 * 8. ICONS
 * =========================================================================== */

.hexe-hub-ico {
  flex: 0 0 auto;
  display: inline-block;
  color: inherit;
  fill: none;
  stroke: currentColor;
  pointer-events: none;
}


/* ===========================================================================
 * 9. BUTTONS
 *
 * Basis = neutraler Button. Varianten aus H.ui.button():
 *   --primary  --ghost  --danger  --icon   ·  Größe --sm  ·  .is-block
 * =========================================================================== */

.hexe-hub-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hh-sp-2);
  min-height: var(--hh-ctl-h);
  padding: 0 var(--hh-sp-4);
  background: var(--hh-bg-elev);
  color: var(--hh-text);
  border: 1px solid var(--hh-border);
  border-radius: var(--hh-r-ctl);
  font-size: var(--hh-fs-sm);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--hh-t), border-color var(--hh-t),
              color var(--hh-t), box-shadow var(--hh-t), transform .1s ease;
}

.hexe-hub-btn > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.hexe-hub-btn:hover {
  background: var(--hh-bg-hover);
  border-color: var(--hh-border-strong);
}

.hexe-hub-btn:active {
  transform: translateY(1px);
}

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

.hexe-hub-btn[disabled],
.hexe-hub-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
}

/* --- Primär ------------------------------------------------------------- */
.hexe-hub-btn--primary {
  background: var(--hh-accent);
  border-color: var(--hh-accent);
  color: var(--hh-accent-ink);
  box-shadow: var(--hh-sh-sm);
}

.hexe-hub-btn--primary:hover {
  background: var(--hh-accent-strong);
  border-color: var(--hh-accent-strong);
  color: var(--hh-accent-ink);
  box-shadow: var(--hh-sh-md);
}

/* --- Ghost -------------------------------------------------------------- */
.hexe-hub-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--hh-text-muted);
}

.hexe-hub-btn--ghost:hover {
  background: var(--hh-bg-hover);
  border-color: var(--hh-border);
  color: var(--hh-text);
}

/* --- Danger ------------------------------------------------------------- */
.hexe-hub-btn--danger {
  background: var(--hh-danger);
  border-color: var(--hh-danger);
  color: var(--hh-danger-ink);
}

.hexe-hub-btn--danger:hover {
  background: var(--hh-danger);
  border-color: var(--hh-danger);
  color: var(--hh-danger-ink);
  filter: brightness(1.08);
}

/* --- Icon-Button -------------------------------------------------------- */
.hexe-hub-btn--icon {
  width: var(--hh-touch);
  min-width: var(--hh-touch);
  height: var(--hh-touch);
  padding: 0;
  border-radius: 50%;
  background: transparent;
  border-color: transparent;
  color: var(--hh-text-muted);
}

.hexe-hub-btn--icon:hover {
  background: var(--hh-bg-hover);
  border-color: transparent;
  color: var(--hh-text);
}

/* --- Klein -------------------------------------------------------------- */
.hexe-hub-btn--sm {
  min-height: var(--hh-ctl-h-sm);
  padding: 0 var(--hh-sp-3);
  gap: var(--hh-sp-1);
  font-size: var(--hh-fs-xs);
}

.hexe-hub-btn--sm.hexe-hub-btn--icon {
  width: var(--hh-ctl-h-sm);
  min-width: var(--hh-ctl-h-sm);
  height: var(--hh-ctl-h-sm);
}

/* Kompakt gibt es nur mit Maus. Wer tippt, bekommt das volle Touch-Maß —
 * darum hier 44px statt der frueheren 40px.
 * Der Hub definiert die --hh-*-Tokens auf seinem eigenen Teilbaum neu; die
 * Anhebung aus hexe-design-tokens.php (:root) greift hier deshalb nicht und
 * muss wiederholt werden. */
@media (pointer: coarse) {
  .hexe-hub[data-hexe-hub] { --hh-ctl-h-sm: var(--hh-ctl-h); }
  .hexe-hub-btn--sm {
    min-height: var(--hh-ctl-h);
  }
  .hexe-hub-btn--sm.hexe-hub-btn--icon {
    width: var(--hh-ctl-h);
    min-width: var(--hh-ctl-h);
    height: var(--hh-ctl-h);
  }
}

/* --- Vollbreite --------------------------------------------------------- */
.hexe-hub-btn.is-block {
  display: flex;
  width: 100%;
}

/* Button-Reihe (z. B. Sheet-Footer, Kartenaktionen) */
.hexe-hub-btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hh-sp-2);
  align-items: center;
}


/* ===========================================================================
 * 10. KARTEN — der eine Karten-Baustein für alle Views
 * =========================================================================== */

.hexe-hub-card {
  display: block;
  position: relative;
  background: var(--hh-bg-elev);
  border: 1px solid var(--hh-border);
  border-radius: var(--hh-r-md);
  padding: var(--hh-sp-4);
  box-shadow: var(--hh-sh-sm);
  transition: box-shadow var(--hh-t), transform var(--hh-t),
              border-color var(--hh-t);
  min-width: 0;
}

.hexe-hub-card + .hexe-hub-card {
  margin-top: var(--hh-sp-3);
}

.hexe-hub-card.is-clickable {
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.hexe-hub-card.is-clickable:hover {
  box-shadow: var(--hh-sh-md);
  border-color: var(--hh-border-strong);
  transform: translateY(-2px);
}

.hexe-hub-card.is-clickable:active {
  transform: translateY(0);
}

/* Hero-Karte: der Blickfang oben in einer View. */
.hexe-hub-card.is-hero {
  padding: var(--hh-sp-5);
  border-radius: var(--hh-r-card);
  border-color: transparent;
  color: var(--hh-text);
  background:
    radial-gradient(120% 140% at 100% 0%,
      var(--hh-accent-soft) 0%, transparent 62%),
    var(--hh-bg-elev);
  box-shadow: var(--hh-sh-md);
}

.hexe-hub-card.is-hero::after {
  /* dezenter Hexen-Schimmer an der Kante */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--hh-border);                              /* Fallback */
  border-color: color-mix(in srgb, var(--hh-accent) 22%, transparent);
  pointer-events: none;
}

.hexe-hub-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--hh-sp-3);
  margin-bottom: var(--hh-sp-2);
  min-width: 0;
}

.hexe-hub-card-title {
  font-size: var(--hh-fs-lg);
  font-weight: 800;
  line-height: var(--hh-lh-tight);
  color: var(--hh-text);
  min-width: 0;
  overflow-wrap: anywhere;
}

.hexe-hub-card.is-hero .hexe-hub-card-title {
  font-size: var(--hh-fs-xl);
}

.hexe-hub-card-sub {
  margin-top: 2px;
  font-size: var(--hh-fs-sm);
  color: var(--hh-text-muted);
}

.hexe-hub-card-body {
  font-size: var(--hh-fs-md);
  color: var(--hh-text);
  min-width: 0;
}

.hexe-hub-card-media {
  margin: calc(var(--hh-sp-4) * -1) calc(var(--hh-sp-4) * -1) var(--hh-sp-3);
  border-radius: var(--hh-r-md) var(--hh-r-md) 0 0;
  overflow: hidden;
  background: var(--hh-bg-sunk);
  aspect-ratio: 16 / 9;
}

.hexe-hub-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hexe-hub-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hh-sp-2);
  margin-top: var(--hh-sp-3);
  padding-top: var(--hh-sp-3);
  border-top: 1px solid var(--hh-border);
}


/* ===========================================================================
 * 11. PILLEN / BADGES
 * =========================================================================== */

.hexe-hub-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--hh-sp-1);
  max-width: 100%;
  padding: 3px var(--hh-sp-2);
  background: var(--hh-bg-sunk);
  color: var(--hh-text-muted);
  border-radius: var(--hh-r-pill);
  font-size: var(--hh-fs-xs);
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.hexe-hub-pill .hexe-hub-ico {
  width: 13px;
  height: 13px;
}

.hexe-hub-pill.is-success {
  background: var(--hh-success-soft);
  color: var(--hh-success);
}

.hexe-hub-pill.is-warn {
  background: var(--hh-warn-soft);
  color: var(--hh-warn);
}

.hexe-hub-pill.is-info {
  background: var(--hh-info-soft);
  color: var(--hh-info);
}

.hexe-hub-pill.is-muted {
  background: var(--hh-bg-sunk);
  color: var(--hh-text-subtle);
}

.hexe-hub-pill.is-accent {
  background: var(--hh-accent-soft);
  color: var(--hh-accent);
}


/* ===========================================================================
 * 12. FORTSCHRITTSBALKEN  ("9 von 12 Artikeln")
 *
 * Markup: <div class="hexe-hub-bar"><span class="hexe-hub-bar-fill"
 *           style="width:75%"></span></div>
 * =========================================================================== */

.hexe-hub-bar {
  position: relative;
  width: 100%;
  height: 8px;
  background: var(--hh-bg-sunk);
  border-radius: var(--hh-r-pill);
  overflow: hidden;
}

.hexe-hub-bar-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--hh-accent);
  transition: width var(--hh-t-slow);
}

.hexe-hub-bar.is-success .hexe-hub-bar-fill { background: var(--hh-success); }
.hexe-hub-bar.is-warn    .hexe-hub-bar-fill { background: var(--hh-warn); }
.hexe-hub-bar.is-info    .hexe-hub-bar-fill { background: var(--hh-info); }

.hexe-hub-bar.is-lg { height: 12px; }

.hexe-hub-bar-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--hh-sp-2);
  margin-bottom: var(--hh-sp-1);
  font-size: var(--hh-fs-sm);
  color: var(--hh-text-muted);
  font-weight: 600;
}


/* ===========================================================================
 * 13. GRID — responsives Auto-Fill für Karten
 * =========================================================================== */

.hexe-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--hh-sp-3);
  min-width: 0;
}

.hexe-hub-grid > * {
  min-width: 0;
}

/* Karten im Grid stapeln sich nicht — Margin des Card-Stacks zurücknehmen. */
.hexe-hub-grid > .hexe-hub-card + .hexe-hub-card {
  margin-top: 0;
}

/* Unter 480 px zweispaltig statt einspaltig: kompakter Überblick. */
@media (max-width: 479px) {
  .hexe-hub-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--hh-sp-2);
  }
  .hexe-hub-grid.is-single {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1024px) {
  .hexe-hub-grid {
    gap: var(--hh-sp-4);
  }
}


/* ===========================================================================
 * 14. LISTENZEILE — Thumbnail + Text + Aktion
 * =========================================================================== */

.hexe-hub-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--hh-sp-3);
  width: 100%;
  min-height: 56px;
  padding: var(--hh-sp-2) var(--hh-sp-1);
  text-align: left;
  border-radius: var(--hh-r-ctl);
  transition: background var(--hh-t);
}

.hexe-hub-row + .hexe-hub-row {
  border-top: 1px solid var(--hh-border);
}

.hexe-hub-row.is-clickable {
  cursor: pointer;
}

.hexe-hub-row.is-clickable:hover {
  background: var(--hh-bg-hover);
}

.hexe-hub-row.is-done .hexe-hub-row-title {
  text-decoration: line-through;
  color: var(--hh-text-subtle);
}

.hexe-hub-row-main {
  min-width: 0;
}

.hexe-hub-row-title {
  font-size: var(--hh-fs-md);
  font-weight: 600;
  line-height: var(--hh-lh-tight);
  color: var(--hh-text);
  overflow-wrap: anywhere;
}

.hexe-hub-row-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hh-sp-1) var(--hh-sp-2);
  margin-top: 2px;
  font-size: var(--hh-fs-sm);
  color: var(--hh-text-muted);
}

.hexe-hub-row-act {
  display: flex;
  align-items: center;
  gap: var(--hh-sp-1);
  flex: 0 0 auto;
}

/* Preis/Kennzahl rechts in der Zeile */
.hexe-hub-row-value {
  font-size: var(--hh-fs-md);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}


/* ===========================================================================
 * 15. KENNZAHLEN-STRIP
 * =========================================================================== */

.hexe-hub-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: var(--hh-sp-2);
  min-width: 0;
}

.hexe-hub-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--hh-sp-3);
  background: var(--hh-bg-sunk);
  border-radius: var(--hh-r-md);
  min-width: 0;
  text-align: left;
}

.hexe-hub-stat-value {
  font-size: var(--hh-fs-xl);
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--hh-text);
  overflow-wrap: anywhere;
}

.hexe-hub-stat-label {
  font-size: var(--hh-fs-xs);
  font-weight: 600;
  color: var(--hh-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Ersparnis-Kennzahl — Money-Grün nur hier, nie als Deko. */
.hexe-hub-stat.is-success .hexe-hub-stat-value { color: var(--hh-success); }
.hexe-hub-stat.is-warn    .hexe-hub-stat-value { color: var(--hh-warn); }
.hexe-hub-stat.is-accent  .hexe-hub-stat-value { color: var(--hh-accent); }

@media (min-width: 720px) {
  .hexe-hub-stat {
    padding: var(--hh-sp-4);
  }
  .hexe-hub-stat-value {
    font-size: var(--hh-fs-2xl);
  }
}


/* ===========================================================================
 * 16. FORMULARELEMENTE
 * =========================================================================== */

.hexe-hub-field {
  display: flex;
  flex-direction: column;
  gap: var(--hh-sp-1);
  min-width: 0;
}

.hexe-hub-field + .hexe-hub-field {
  margin-top: var(--hh-sp-3);
}

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

.hexe-hub-input {
  display: block;
  width: 100%;
  min-height: var(--hh-ctl-h);
  padding: var(--hh-sp-2) var(--hh-sp-3);
  background: var(--hh-bg-elev);
  color: var(--hh-text);
  border: 1px solid var(--hh-border-strong);
  border-radius: var(--hh-r-ctl);
  font-family: inherit;
  font-size: 16px;   /* verhindert iOS-Auto-Zoom beim Fokus */
  line-height: 1.4;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--hh-t), box-shadow var(--hh-t),
              background var(--hh-t);
}

@media (min-width: 720px) {
  .hexe-hub-input {
    font-size: var(--hh-fs-md);
  }
}

.hexe-hub-input::placeholder {
  color: var(--hh-text-subtle);
  opacity: 1;
}

.hexe-hub-input:hover {
  border-color: var(--hh-text-subtle);
}

.hexe-hub-input:focus,
.hexe-hub-input:focus-visible {
  outline: none;
  border-color: var(--hh-focus);
  box-shadow: 0 0 0 3px rgba(34, 113, 177, .28);                   /* Fallback */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hh-focus) 28%, transparent);
}

.hexe-hub-input[disabled],
.hexe-hub-input:disabled {
  background: var(--hh-bg-sunk);
  color: var(--hh-text-subtle);
  cursor: not-allowed;
}

textarea.hexe-hub-input {
  min-height: 96px;
  resize: vertical;
}

select.hexe-hub-input {
  padding-right: var(--hh-sp-6);
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% + 1px),
    calc(100% - 13px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* Checkbox / Radio auf Touch-Größe bringen */
.hexe-hub-check {
  display: inline-flex;
  align-items: center;
  gap: var(--hh-sp-2);
  min-height: var(--hh-touch);
  cursor: pointer;
  font-size: var(--hh-fs-md);
}

.hexe-hub-check input {
  width: 20px;
  height: 20px;
  accent-color: var(--hh-accent);
  flex: 0 0 auto;
  cursor: pointer;
}

.hexe-hub-field-hint {
  font-size: var(--hh-fs-sm);
  color: var(--hh-text-subtle);
}

.hexe-hub-field.is-error .hexe-hub-input {
  border-color: var(--hh-danger);
}

.hexe-hub-field.is-error .hexe-hub-field-hint {
  color: var(--hh-danger);
  font-weight: 600;
}

/* Eingabezeile mit angehängtem Button (Artikel hinzufügen o. ä.) */
.hexe-hub-inputgroup {
  display: flex;
  gap: var(--hh-sp-2);
  align-items: stretch;
  min-width: 0;
}

.hexe-hub-inputgroup .hexe-hub-input {
  flex: 1 1 auto;
  min-width: 0;
}


/* ===========================================================================
 * 17. THUMBNAIL mit Fallback-Fläche
 * =========================================================================== */

.hexe-hub-thumb {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--hh-r-sm);
  overflow: hidden;
  background: var(--hh-bg-sunk);
  border: 1px solid var(--hh-border);
  color: var(--hh-text-subtle);
}

.hexe-hub-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #fff;   /* Produktfreisteller brauchen weiß, auch im Dark-Mode */
}

.hexe-hub-thumb.is-cover img {
  object-fit: cover;
  background: transparent;
}

/* Fallback: Initiale oder Icon auf getönter Fläche */
.hexe-hub-thumb.is-empty {
  background: var(--hh-bg-sunk);                                   /* Fallback */
  background:
    linear-gradient(140deg,
      var(--hh-bg-sunk) 0%,
      color-mix(in srgb, var(--hh-accent-soft) 70%, var(--hh-bg-sunk)) 100%);
  font-size: var(--hh-fs-lg);
  font-weight: 800;
  color: var(--hh-text-subtle);
  text-transform: uppercase;
}

.hexe-hub-thumb.is-lg {
  width: 72px;
  height: 72px;
  border-radius: var(--hh-r-md);
}

.hexe-hub-thumb.is-sm {
  width: 40px;
  height: 40px;
}


/* ===========================================================================
 * 18. ABSCHNITTE
 * =========================================================================== */

.hexe-hub-section {
  margin-bottom: var(--hh-sp-6);
  min-width: 0;
}

.hexe-hub-section:last-child {
  margin-bottom: 0;
}

.hexe-hub-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hh-sp-3);
  margin-bottom: var(--hh-sp-3);
  min-width: 0;
}

.hexe-hub-section-title {
  display: flex;
  align-items: center;
  gap: var(--hh-sp-2);
  font-size: var(--hh-fs-lg);
  font-weight: 800;
  line-height: var(--hh-lh-tight);
  color: var(--hh-text);
  letter-spacing: -.01em;
  min-width: 0;
}

.hexe-hub-section-title .hexe-hub-ico {
  color: var(--hh-accent);
}

.hexe-hub-section-sub {
  margin-top: 2px;
  font-size: var(--hh-fs-sm);
  color: var(--hh-text-muted);
  font-weight: 400;
}

.hexe-hub-section-act {
  flex: 0 0 auto;
}


/* ===========================================================================
 * 19. SEGMENTED CONTROL (H.ui.segmented)
 * =========================================================================== */

.hexe-hub-seg {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--hh-bg-sunk);
  border-radius: var(--hh-r-pill);
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.hexe-hub-seg::-webkit-scrollbar { display: none; }

.hexe-hub-seg-btn {
  flex: 1 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hh-sp-1);
  min-height: var(--hh-ctl-h-sm);
  padding: 0 var(--hh-sp-3);
  border-radius: var(--hh-r-pill);
  background: transparent;
  color: var(--hh-text-muted);
  font-size: var(--hh-fs-sm);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--hh-t), color var(--hh-t), box-shadow var(--hh-t);
}

.hexe-hub-seg-btn:hover {
  color: var(--hh-text);
}

.hexe-hub-seg-btn.is-active {
  background: var(--hh-bg-elev);
  color: var(--hh-text);
  box-shadow: var(--hh-sh-sm);
}

.hexe-hub-seg-btn:focus-visible {
  outline: 2px solid var(--hh-focus);
  outline-offset: -2px;
}

@media (pointer: coarse) {
  .hexe-hub-seg-btn { min-height: var(--hh-ctl-h); }
}


/* ===========================================================================
 * 20. SKELETONS (H.ui.skeleton — 'card' | 'row' | 'text')
 *
 * Skeletons statt Spinner: das Layout muss sofort stehen.
 * =========================================================================== */

.hexe-hub-skel {
  display: flex;
  flex-direction: column;
  gap: var(--hh-sp-3);
  width: 100%;
}

.hexe-hub-skel-card,
.hexe-hub-skel-row,
.hexe-hub-skel-text {
  position: relative;
  overflow: hidden;
  border-radius: var(--hh-r-md);
  background: var(--hh-skel);
}

.hexe-hub-skel-card {
  height: 116px;
}

.hexe-hub-skel-row {
  height: 56px;
  border-radius: var(--hh-r-sm);
}

.hexe-hub-skel-text {
  height: 13px;
  border-radius: var(--hh-r-pill);
}

/* Textzeilen unterschiedlich lang — wirkt weniger maschinell. */
.hexe-hub-skel-text:nth-child(2n)      { width: 88%; }
.hexe-hub-skel-text:nth-child(3n)      { width: 66%; }
.hexe-hub-skel-text:last-child         { width: 48%; }

.hexe-hub-skel-card::after,
.hexe-hub-skel-row::after,
.hexe-hub-skel-text::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg,
    transparent 0%,
    var(--hh-skel-hi) 50%,
    transparent 100%);
  animation: hh-shimmer 1.4s ease-in-out infinite;
}

@keyframes hh-shimmer {
  to { transform: translateX(100%); }
}

/* Skeletons im Grid füllen die Zelle. */
.hexe-hub-grid > .hexe-hub-skel {
  display: contents;
}


/* ===========================================================================
 * 21. LEERZUSTAND (H.ui.empty)
 * =========================================================================== */

.hexe-hub-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--hh-sp-2);
  padding: var(--hh-sp-6) var(--hh-sp-4);
  text-align: center;
  background: var(--hh-bg-elev);
  border: 1px dashed var(--hh-border-strong);
  border-radius: var(--hh-r-card);
}

.hexe-hub-empty-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--hh-sp-1);
  border-radius: 50%;
  background: var(--hh-accent-soft);
  color: var(--hh-accent);
}

.hexe-hub-empty-title {
  font-size: var(--hh-fs-lg);
  font-weight: 800;
  line-height: var(--hh-lh-tight);
  color: var(--hh-text);
}

.hexe-hub-empty-text {
  max-width: 34em;
  font-size: var(--hh-fs-sm);
  color: var(--hh-text-muted);
}

.hexe-hub-empty-act {
  margin-top: var(--hh-sp-2);
}


/* ===========================================================================
 * 22. FEHLERBOX (H.ui.error)
 * =========================================================================== */

.hexe-hub-error {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--hh-sp-3);
  padding: var(--hh-sp-4);
  background: var(--hh-danger-soft);
  border: 1px solid var(--hh-danger);                              /* Fallback */
  border-color: color-mix(in srgb, var(--hh-danger) 34%, transparent);
  border-radius: var(--hh-r-md);
  color: var(--hh-text);
}

.hexe-hub-error > div {
  flex: 1 1 200px;
  min-width: 0;
}

.hexe-hub-error-ico {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--hh-bg-elev);                                   /* Fallback */
  background: color-mix(in srgb, var(--hh-danger) 18%, transparent);
  color: var(--hh-danger);
}

.hexe-hub-error-title {
  font-size: var(--hh-fs-md);
  font-weight: 800;
  line-height: var(--hh-lh-tight);
  color: var(--hh-text);
}

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

.hexe-hub-error .hexe-hub-btn {
  flex: 0 0 auto;
  background: var(--hh-bg-elev);
  border-color: var(--hh-border);
  color: var(--hh-text);
}


/* ===========================================================================
 * 23. TIER-GATES (H.tier.gate / H.tier.lockPill)
 *
 * Gesperrte Features werden gezeigt, nicht versteckt (Konzept §6).
 * =========================================================================== */

.hexe-hub-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hh-sp-2);
  padding: var(--hh-sp-6) var(--hh-sp-4);
  text-align: center;
  border-radius: var(--hh-r-card);
  border: 1px solid var(--hh-border);
  background:
    radial-gradient(110% 130% at 50% 0%,
      var(--hh-warn-soft) 0%, transparent 60%),
    var(--hh-bg-elev);
  box-shadow: var(--hh-sh-sm);
}

.hexe-hub-gate-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--hh-warn-soft);
  color: var(--hh-warn);
  margin-bottom: var(--hh-sp-1);
}

.hexe-hub-gate-title {
  font-size: var(--hh-fs-xl);
  font-weight: 800;
  line-height: var(--hh-lh-tight);
  color: var(--hh-text);
}

.hexe-hub-gate-text {
  max-width: 34em;
  font-size: var(--hh-fs-sm);
  color: var(--hh-text-muted);
  margin-bottom: var(--hh-sp-2);
}

/* Kleine Schloss-Pille — sitzt inline neben gesperrten Inhalten. */
.hexe-hub-lock {
  display: inline-flex;
  align-items: center;
  gap: var(--hh-sp-1);
  padding: 3px var(--hh-sp-2);
  background: var(--hh-warn-soft);
  color: var(--hh-warn);
  border: 1px solid var(--hh-warn);                                /* Fallback */
  border-color: color-mix(in srgb, var(--hh-warn) 30%, transparent);
  border-radius: var(--hh-r-pill);
  font-size: var(--hh-fs-xs);
  font-weight: 800;
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--hh-t), transform .1s ease;
}

.hexe-hub-lock:hover {
  background: var(--hh-warn-soft);                                 /* Fallback */
  background: color-mix(in srgb, var(--hh-warn) 22%, var(--hh-warn-soft));
}

.hexe-hub-lock:active {
  transform: translateY(1px);
}

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

/* Gesperrter Inhalt hinter der Pille: angedeutet statt versteckt. */
.hexe-hub-blurred {
  filter: blur(4px);
  opacity: .6;
  pointer-events: none;
  user-select: none;
}


/* ===========================================================================
 * 24. SHEET / MODAL (H.ui.sheet, H.ui.confirm)
 *
 * Mobil (< 640 px): Bottom-Sheet mit Grip-Bar, slidet von unten herein.
 * Desktop: zentriertes Modal, skaliert sanft ein.
 * `.is-in` ist der Sichtbar-Zustand — der Core togglet die Klasse.
 * =========================================================================== */

.hexe-hub-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--hh-z-modal);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: var(--hh-scrim);
  opacity: 0;
  transition: opacity var(--hh-t-slow);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  overscroll-behavior: contain;
}

.hexe-hub-backdrop.is-in {
  opacity: 1;
}

.hexe-hub-sheet {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  max-height: min(88vh, 88dvh);
  background: var(--hh-bg-elev);
  color: var(--hh-text);
  border-radius: var(--hh-r-lg) var(--hh-r-lg) 0 0;
  box-shadow: var(--hh-sh-lg);
  padding-bottom: var(--hh-safe-b);
  transform: translateY(100%);
  transition: transform var(--hh-t-slow);
  will-change: transform;
}

.hexe-hub-backdrop.is-in .hexe-hub-sheet {
  transform: translateY(0);
}

/* Grip-Bar — nur im Bottom-Sheet sinnvoll. */
.hexe-hub-sheet-grip {
  flex: 0 0 auto;
  width: 42px;
  height: 4px;
  margin: var(--hh-sp-2) auto 0;
  border-radius: var(--hh-r-pill);
  background: var(--hh-border-strong);
}

.hexe-hub-sheet-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hh-sp-3);
  padding: var(--hh-sp-3) var(--hh-sp-3) var(--hh-sp-3) var(--hh-sp-4);
  border-bottom: 1px solid var(--hh-border);
}

.hexe-hub-sheet-title {
  font-size: var(--hh-fs-lg);
  font-weight: 800;
  line-height: var(--hh-lh-tight);
  color: var(--hh-text);
  min-width: 0;
  overflow-wrap: anywhere;
}

.hexe-hub-sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--hh-sp-4);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.hexe-hub-sheet-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--hh-sp-2);
  padding: var(--hh-sp-3) var(--hh-sp-4) var(--hh-sp-4);
  border-top: 1px solid var(--hh-border);
  background: var(--hh-bg-elev);
  border-radius: 0 0 var(--hh-r-lg) var(--hh-r-lg);
}

/* Auf schmalen Displays Footer-Buttons vollbreit stapeln. */
@media (max-width: 419px) {
  .hexe-hub-sheet-foot {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .hexe-hub-sheet-foot .hexe-hub-btn {
    width: 100%;
  }
}

.hexe-hub-confirm-text {
  font-size: var(--hh-fs-md);
  line-height: var(--hh-lh);
  color: var(--hh-text-muted);
  overflow-wrap: anywhere;
}

/* --- Desktop: zentriertes Modal ---------------------------------------- */

@media (min-width: 640px) {

  .hexe-hub-backdrop {
    align-items: center;
    padding: var(--hh-sp-5);
  }

  .hexe-hub-sheet {
    width: 100%;
    max-width: 560px;
    max-height: min(84vh, 84dvh);
    border-radius: var(--hh-r-lg);
    padding-bottom: 0;
    transform: translateY(12px) scale(.97);
    opacity: 0;
    transition: transform var(--hh-t-slow), opacity var(--hh-t-slow);
  }

  .hexe-hub-backdrop.is-in .hexe-hub-sheet {
    transform: none;
    opacity: 1;
  }

  .hexe-hub-sheet-grip {
    display: none;
  }

  .hexe-hub-sheet-head {
    padding: var(--hh-sp-4) var(--hh-sp-3) var(--hh-sp-4) var(--hh-sp-5);
  }

  .hexe-hub-sheet-body {
    padding: var(--hh-sp-5);
  }

  .hexe-hub-sheet-foot {
    padding: var(--hh-sp-4) var(--hh-sp-5);
  }
}

/* Breite Sheets (Karten, Filter) dürfen mehr Platz nehmen. */
@media (min-width: 900px) {
  .hexe-hub-sheet.is-wide {
    max-width: 780px;
  }
}


/* ===========================================================================
 * 25. TOASTS (H.ui.toast)
 *
 * Mobil unten mittig über der Tab-Bar, Desktop unten rechts.
 * =========================================================================== */

.hexe-hub-toasts {
  position: fixed;
  left: var(--hh-sp-3);
  right: var(--hh-sp-3);
  bottom: calc(var(--hh-navbar-h) + var(--hh-safe-b) + var(--hh-sp-3));
  z-index: var(--hh-z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hh-sp-2);
  pointer-events: none;
}

.hexe-hub-toast {
  display: flex;
  align-items: center;
  gap: var(--hh-sp-2);
  max-width: 100%;
  padding: var(--hh-sp-3) var(--hh-sp-4);
  background: var(--hh-text);
  color: var(--hh-bg-elev);
  border-radius: var(--hh-r-pill);
  box-shadow: var(--hh-sh-lg);
  font-size: var(--hh-fs-sm);
  font-weight: 600;
  line-height: 1.35;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(14px) scale(.96);
  transition: opacity var(--hh-t-slow), transform var(--hh-t-slow);
}

.hexe-hub-toast > span {
  overflow-wrap: anywhere;
}

.hexe-hub-toast.is-in {
  opacity: 1;
  transform: none;
}

.hexe-hub-toast.is-ok {
  background: var(--hh-success);
  color: var(--hh-success-ink);
}

.hexe-hub-toast.is-error {
  background: var(--hh-danger);
  color: var(--hh-danger-ink);
}

@media (min-width: 720px) {
  .hexe-hub-toasts {
    left: auto;
    right: var(--hh-sp-5);
    bottom: var(--hh-sp-5);
    align-items: flex-end;
    max-width: 380px;
  }
}


/* ===========================================================================
 * 26. HILFSKLASSEN
 * =========================================================================== */

/* Nur für Screenreader */
.hexe-hub-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Vertikaler Stapel / horizontales Cluster — spart den Views eigene Utilities */
.hexe-hub-stack {
  display: flex;
  flex-direction: column;
  gap: var(--hh-sp-3);
  min-width: 0;
}

.hexe-hub-stack.is-tight { gap: var(--hh-sp-2); }
.hexe-hub-stack.is-loose { gap: var(--hh-sp-5); }

.hexe-hub-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hh-sp-2);
  min-width: 0;
}

.hexe-hub-spacer {
  flex: 1 1 auto;
}

/* Betrags-/Zahlendarstellung */
.hexe-hub-money {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  white-space: nowrap;
}

.hexe-hub-money.is-saving {
  color: var(--hh-success);   /* Money-Grün: nur echte Ersparnis */
}

.hexe-hub-money.is-strike {
  color: var(--hh-text-subtle);
  font-weight: 600;
  text-decoration: line-through;
}

/* Textfarben */
.hexe-hub-muted  { color: var(--hh-text-muted); }
.hexe-hub-subtle { color: var(--hh-text-subtle); font-size: var(--hh-fs-sm); }

/* Zwei-Zeilen-Klemme für Produkttitel */
.hexe-hub-clamp2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Divider */
.hexe-hub-divider {
  height: 1px;
  background: var(--hh-border);
  margin: var(--hh-sp-4) 0;
  border: 0;
}


/* ===========================================================================
 * 27. BEWEGUNG REDUZIEREN
 *
 * `prefers-reduced-motion: reduce` schaltet sämtliche Transitions und
 * Animationen ab — Sheets/Toasts erscheinen dann hart, bleiben aber
 * vollständig bedienbar. Skeletons werden statisch.
 * =========================================================================== */

@media (prefers-reduced-motion: reduce) {

  .hexe-hub,
  .hexe-hub *,
  .hexe-hub *::before,
  .hexe-hub *::after,
  .hexe-hub-backdrop,
  .hexe-hub-backdrop *,
  .hexe-hub-backdrop *::before,
  .hexe-hub-backdrop *::after,
  .hexe-hub-toasts,
  .hexe-hub-toasts *,
  .hexe-hub-login * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .hexe-hub-skel-card::after,
  .hexe-hub-skel-row::after,
  .hexe-hub-skel-text::after {
    display: none;
  }

  .hexe-hub-boot-spinner {
    border-top-color: var(--hh-accent);
    animation: none;
  }

  .hexe-hub-card.is-clickable:hover {
    transform: none;
  }

  .hexe-hub-sheet {
    transform: none;
  }

  .hexe-hub-view {
    animation: none;
  }
}


/* ===========================================================================
 * 28. HOHER KONTRAST / ERZWUNGENE FARBEN
 * =========================================================================== */

@media (forced-colors: active) {

  .hexe-hub-card,
  .hexe-hub-sheet,
  .hexe-hub-btn,
  .hexe-hub-pill,
  .hexe-hub-lock,
  .hexe-hub-empty,
  .hexe-hub-error,
  .hexe-hub-gate,
  .hexe-hub-nav {
    border: 1px solid CanvasText;
  }

  .hexe-hub-nav-btn.is-active,
  .hexe-hub-seg-btn.is-active {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }

  .hexe-hub-ico {
    forced-color-adjust: auto;
  }
}


/* ===========================================================================
 * 29. DRUCK — der Hub ist eine App, keine Druckseite. Nur den Inhalt lassen.
 * =========================================================================== */

@media print {

  .hexe-hub-nav,
  .hexe-hub-toasts,
  .hexe-hub-backdrop,
  .hexe-hub-boot {
    display: none !important;
  }

  .hexe-hub,
  .hexe-hub-main {
    padding: 0;
    background: #fff;
    color: #000;
  }

  .hexe-hub-card {
    box-shadow: none;
    border: 1px solid #bbb;
    break-inside: avoid;
  }
}

/* ===========================================================================
 * 30. Container-Notbremse
 *
 * Gegenstueck zu fitContainer() in hexe-hub-core.js. Das Divi-Raster stapelt
 * auf Mobil nicht — die Content-Spalte schrumpft bei 390 px Viewport auf rund
 * 120 px. Misst der Core eine unbedienbare Breite, setzt er .is-breakout und
 * spannt den Hub per Inline-Style auf Viewportbreite. Hier bekommt er dafuer
 * den Innenabstand und einen deckenden Hintergrund, damit nichts vom
 * Seiten-Hintergrundbild zwischen den Zeilen durchblitzt.
 * =========================================================================== */

.hexe-hub.is-breakout {
  box-sizing: border-box;
  padding-left: var(--hh-sp-3);
  padding-right: var(--hh-sp-3);
  background: var(--hh-bg);
  position: relative;
  z-index: 1;
}

/* Der Hub bringt seine eigene Flaeche mit — sonst scheint auf Divi-Seiten mit
 * Hintergrundbild die Grafik zwischen den Karten durch (im Audit als "braune
 * Streifen zwischen jeder Artikelzeile" aufgefallen). */
.hexe-hub {
  background: var(--hh-bg);
  color: var(--hh-text);
  border-radius: var(--hh-r-lg);
}

/* ===========================================================================
 * 31. Divi-5-Raster entschaerfen
 *
 * Gemessen auf /einkaufslisten/ bei 390 px Viewport: die Divi-Row rendert
 * `grid-template-columns: 0px 0px 0px 280px`, die Spalte mit unserem Modul
 * ist 120 px breit, ihr Wrapper hat `overflow-x: hidden`, und `max-width:100%`
 * kappt jede Breitenkorrektur. Ergebnis waren 116 px nutzbare Breite.
 *
 * Wir greifen ausschliesslich in die Ahnenkette UNSERES Moduls ein (:has),
 * lassen also fremde Rows derselben Seite unberuehrt. Nur unterhalb des
 * Stapel-Breakpoints — auf dem Desktop bleibt das Seitenlayout wie gebaut.
 * =========================================================================== */

@media (max-width: 980px) {
  .et_pb_row:has(.hexe-hub),
  .et_pb_row_inner:has(.hexe-hub) {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
  }

  .et_pb_column:has(.hexe-hub) {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    margin-right: 0 !important;
  }

  /* Der Code-Modul-Wrapper klemmt den Inhalt sonst per overflow-x ab. */
  .et_pb_module:has(.hexe-hub),
  .et_pb_code:has(.hexe-hub),
  .et_pb_code_inner:has(.hexe-hub) {
    overflow: visible !important;
    width: auto !important;
    max-width: 100% !important;
  }

  /* Nachbarspalten (z. B. die 280-px-Sidebar) rutschen darunter statt
     daneben — sonst bleibt fuer den Hub nichts uebrig. */
  .et_pb_row:has(.hexe-hub) > .et_pb_column {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Die Notbremse in hexe-hub-core.js darf nicht von einem geerbten
   max-width:100% ausgehebelt werden. */
.hexe-hub.is-breakout {
  max-width: none !important;
}

/* ===========================================================================
 * 32. Desktop-Breite zurueckholen
 *
 * Gemessen auf /einkaufslisten/ bei 1440 px: die Divi-Row ist 1296 px breit,
 * der Hub bekommt aber nur 952 px — die Nachbarspalte hielt die ehemalige
 * Topbar und belegt nach deren Entfernung weiter rund 340 px Leerraum.
 *
 * Spalten ohne jedes Modul kollabieren, die Hub-Spalte nimmt die Breite. Nur
 * in Rows, die unser Modul enthalten; fremde Layouts bleiben unberuehrt.
 * =========================================================================== */

@media (min-width: 1024px) {
  .et_pb_row:has(.hexe-hub) > .et_pb_column:not(:has(.et_pb_module)) {
    display: none !important;
  }

  .et_pb_column:has(.hexe-hub) {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
  }
}

/* ===========================================================================
 * 33. Segmented Control: aktive Auswahl deutlich machen
 *
 * Im Live-Test war bei Radius (5/10/20/30/50 km) und Sortierung (Beste Tour /
 * Meiste Treffer / ...) nicht erkennbar, welcher Eintrag aktiv ist — der
 * Unterschied war ein kaum sichtbarer Hintergrundwechsel.
 * =========================================================================== */

.hexe-hub .hexe-hub-seg-btn.is-active {
  background: var(--hh-accent) !important;
  color: var(--hh-accent-ink) !important;
  border-color: var(--hh-accent) !important;
  box-shadow: var(--hh-sh-sm);
  font-weight: 700;
}

.hexe-hub .hexe-hub-seg-btn.is-active .hexe-hub-ico {
  color: var(--hh-accent-ink);
}

/* ===========================================================================
 * 34. Wochen-Achse und Inhaltsbreite (UX v2)
 *
 * Der Wochen-Umschalter lebt in der Shell und gilt in jeder Ansicht. Er
 * beantwortet die Frage, die sonntags alles entscheidet: läuft gerade etwas,
 * oder startet es erst? Konzept: docs/konzept_ux_v2.md §2.1 und §5.1.
 * =========================================================================== */

.hexe-hub-content {
  /* Einspaltig und zentriert. 760 px waren die Gegenreaktion auf die frühere
     Überladung und saßen zu eng — 900 px geben den Blöcken Luft, ohne dass
     eine zweite Spalte entsteht. Der gewonnene Platz geht in Abstände, nicht
     in zusätzliche Elemente. */
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
  min-width: 0;
  padding-inline: var(--hh-sp-3);
  box-sizing: border-box;
}

/* --- Kopfzeile der Shell: Hell/Dunkel ---------------------------------- */

.hexe-hub-topline {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--hh-sp-2);
  padding-top: var(--hh-sp-2);
}

.hexe-hub-themetgl {
  display: inline-flex;
  align-items: center;
  gap: var(--hh-sp-1);
  min-height: var(--hh-touch);
  padding: 0 var(--hh-sp-3);
  border: 1px solid var(--hh-border);
  border-radius: var(--hh-r-pill);
  background: var(--hh-bg-elev);
  color: var(--hh-text-muted);
  font-size: var(--hh-fs-xs);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: color var(--hh-t), border-color var(--hh-t), background var(--hh-t);
}

.hexe-hub-themetgl:hover {
  color: var(--hh-text);
  border-color: var(--hh-border-strong);
  background: var(--hh-bg-hover);
}

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

/* --- „?"-Hilfe ---------------------------------------------------------
 * Optisch 22 px, damit es nichts dominiert; das Tippziel ist per
 * Pseudo-Element trotzdem 44 px groß.
 * ---------------------------------------------------------------------- */

.hexe-hub .hexe-hub-helpbtn {
  border-radius: var(--hh-r-ctl);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Volles Tippziel, aber ohne die Zeile aufzublasen: die negativen Raender
     nehmen den Ueberstand wieder heraus. */
  width: var(--hh-touch);
  height: var(--hh-touch);
  margin: -11px -8px;
  padding: 0 !important;
  border: 0;
  background: none;
  color: var(--hh-text-muted);
  cursor: pointer;
  vertical-align: middle;
}

/* Sichtbar bleibt nur der kleine Kreis. */
.hexe-hub .hexe-hub-helpbtn > span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  opacity: .75;
  transition: color var(--hh-t), background var(--hh-t), opacity var(--hh-t);
}

.hexe-hub .hexe-hub-helpbtn:hover { color: var(--hh-accent); }

.hexe-hub .hexe-hub-helpbtn:hover > span {
  opacity: 1;
  background: var(--hh-accent-soft);
}

.hexe-hub .hexe-hub-helpbtn:focus-visible { outline: 0; }

.hexe-hub .hexe-hub-helpbtn:focus-visible > span {
  outline: 2px solid var(--hh-focus);
  outline-offset: 2px;
  opacity: 1;
}

.hexe-hub-help-p {
  margin: 0 0 var(--hh-sp-3);
  font-size: var(--hh-fs-sm);
  line-height: 1.65;
  color: var(--hh-text);
}

.hexe-hub-help-p:last-child { margin-bottom: 0; }

.hexe-hub-week {
  position: sticky;
  top: 0;
  z-index: var(--hh-z-sticky, 20);
  padding: var(--hh-sp-2) 0 var(--hh-sp-3);
  background: var(--hh-bg);
}

.hexe-hub-week[hidden] { display: none; }

/* Beschriftung der Achse — sagt, worum es geht, und trägt das „?". */
.hexe-hub-week-head {
  display: flex;
  align-items: center;
  gap: var(--hh-sp-2);
  margin-bottom: var(--hh-sp-2);
  font-size: var(--hh-fs-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--hh-text-subtle);
}

/* Einmaliger Hinweis beim ersten Besuch, wegklickbar. */
.hexe-hub-week-hint {
  display: flex;
  align-items: center;
  gap: var(--hh-sp-2);
  margin: var(--hh-sp-2) 0 0;
  padding: var(--hh-sp-1) var(--hh-sp-1) var(--hh-sp-1) var(--hh-sp-3);
  border-radius: var(--hh-r-md);
  background: var(--hh-info-soft);
  color: var(--hh-text);
  font-size: var(--hh-fs-xs);
  line-height: 1.5;
}

.hexe-hub-week-hint > span { flex: 1 1 auto; min-width: 0; }

.hexe-hub-week-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--hh-sp-2);
}

.hexe-hub-week-tab {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: var(--hh-ctl-h);
  padding: var(--hh-sp-2) var(--hh-sp-3);
  border: 1px solid var(--hh-border);
  border-radius: var(--hh-r-ctl);
  background: var(--hh-bg-elev);
  color: var(--hh-text);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

/* Divi setzt Buttons global auf `padding: 0` und gewinnt per Spezifitaet —
   ohne diese Zeile klebt "Jetzt" auf der oberen Kante des Tabs. */
.hexe-hub .hexe-hub-week-tab {
  padding: var(--hh-sp-2) var(--hh-sp-3) !important;
  justify-content: center;
}

.hexe-hub-week-tab:hover:not(:disabled) { border-color: var(--hh-border-strong); }

.hexe-hub-week-tab.is-active {
  border-color: var(--hh-accent);
  background: var(--hh-accent-soft);
  box-shadow: inset 0 0 0 1px var(--hh-accent);
}

.hexe-hub-week-tab:disabled,
.hexe-hub-week-tab.is-empty {
  opacity: .55;
  cursor: default;
}

.hexe-hub-week-title {
  font-weight: 700;
  font-size: var(--hh-fs-sm);
  line-height: 1.25;
}

.hexe-hub-week-tab.is-active .hexe-hub-week-title { color: var(--hh-accent); }

.hexe-hub-week-sub {
  font-size: var(--hh-fs-xs);
  color: var(--hh-text-muted);
  line-height: 1.3;
}

/* Genau eine Erklärzeile, keine Box — sie soll einordnen, nicht dominieren. */
.hexe-hub-week-note {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--hh-sp-1) var(--hh-sp-2);
  margin: var(--hh-sp-2) 0 0;
  font-size: var(--hh-fs-xs);
  color: var(--hh-text-muted);
  line-height: 1.4;
}

.hexe-hub-week-link {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--hh-accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.hexe-hub-week-link:hover { color: var(--hh-accent-strong, var(--hh-accent)); }

/* --- Vier statt sieben Tabs ------------------------------------------- */

@media (max-width: 1023px) {
  /* Alle vier sind gleichwertig und teilen sich die Bar — kein Overflow,
     kein Wischen mehr nötig. */
  .hexe-hub-nav .hexe-hub-nav-btn { flex: 1 1 0; }
}

@media (min-width: 1024px) {
  /* Auf Desktop rahmt bereits die Shell — eine zweite Polsterung hier wuerde
     die Inhaltsspalte nur noch einmal verengen. */
  .hexe-hub-content { padding-inline: 0; }
}