.hk-markt-hinweis{position:fixed;z-index:1030;inset-inline-end:var(--hk-space-3,24px);bottom:0;transform:translateY(calc(-1 * (max(var(--hk-leisten-unten-h,0px),env(safe-area-inset-bottom,0px)) + var(--hk-space-3,24px))));box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:start;gap:var(--hk-space-1,8px);width: min(480px,calc(100% - 2 * var(--hk-space-3,24px)));max-height:max(80px,calc(100dvh - max(256px,var(--hk-kopf-h,0px)) - var(--hk-leisten-unten-h,0px) - 48px));overflow:hidden;overscroll-behavior:contain;padding:var(--hk-space-2,16px);border:1px solid var(--hk-line,#ddd);border-radius:var(--hk-radius-m,8px);background:var(--hk-surface-2,#fff);color:var(--hk-ink,#111);box-shadow:var(--hk-shadow-2,0 8px 32px #0003);font-family:inherit;font-size:14px;line-height:1.5;text-align:start}
.hk-markt-hinweis[hidden]{display:none}
.hk-markt-hinweis__texte{min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;overflow-wrap:anywhere}
.hk-markt-hinweis__texte p{margin:0;color:inherit;font:inherit}
.hk-markt-hinweis__texte{display:grid;gap:var(--hk-space-1,8px)}
.hk-markt-hinweis__zu{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:var(--hk-radius-m,8px);background:transparent;color:inherit;font:inherit;font-size:24px;cursor:pointer}
.hk-markt-hinweis__zu[hidden]{visibility:hidden;display:inline-flex}
.hk-markt-hinweis__zu:hover{background:var(--hk-hover-1,#f2f2f2)}
.hk-markt-hinweis__zu:focus-visible{outline:2px solid currentColor;outline-offset:2px}
@media(max-width:767px){.hk-markt-hinweis{inset-inline:var(--hk-space-2,16px);width:auto;max-height:max(80px,calc(100dvh - max(256px,var(--hk-kopf-h,0px)) - var(--hk-leisten-unten-h,0px) - 48px));padding:var(--hk-space-2,16px)}}

/*
 * ST-BUILD – Store-Umschalter Layout A (Meta-Zeile), Drawer-Zeile (D) und
 * Länder-Funnel-Leiste. Quelle; ausgeliefert wird die gehashte Kopie in
 * Resources/public (tools/assets-bauen.php). Eigene Datei statt Theme-Bündel:
 * kein Byte im all.css-Budget, kein theme:compile nötig.
 *
 * Maße und Farben 1:1 aus dashboard.hookain.de/entwurf/store-switcher.html
 * (Layout A, D, Funnel F1). Farben nur über die Relaunch-Tokens (--hk-*), die
 * hell/dunkel am body.hk-relaunch umschalten; Rückfallwerte für den Fall, dass
 * das Theme fehlt.
 */
/* Auswahlfarbe des Entwurfs (Petrol), unabhängig vom neutralen Theme-Akzent (--hk-accent-* ist im
   Relaunch grau/schwarz). Hell/dunkel wie _tokens.scss (data-theme und prefers-color-scheme). */
.hk-ms,.hk-ms__panel,.hk-ms-zeile,.hk-mb{--hk-ms-akzent-bg:#E3F1F2;--hk-ms-akzent-text:#0A6A6F;--hk-ms-akzent:#0F7E84}
html[data-theme="dark"] .hk-ms,html[data-theme="dark"] .hk-ms__panel,html[data-theme="dark"] .hk-ms-zeile,html[data-theme="dark"] .hk-mb{--hk-ms-akzent-bg:#0E2A2B;--hk-ms-akzent-text:#7FD6D9;--hk-ms-akzent:#3FB8BC}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) .hk-ms,html:not([data-theme="light"]) .hk-ms__panel,html:not([data-theme="light"]) .hk-ms-zeile,html:not([data-theme="light"]) .hk-mb{--hk-ms-akzent-bg:#0E2A2B;--hk-ms-akzent-text:#7FD6D9;--hk-ms-akzent:#3FB8BC}}
.hk-ms{position:relative;display:inline-flex;align-items:center}
.hk-ms__ausloeser{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 8px;border:0;border-radius:var(--hk-radius-s,2px);background:transparent;color:inherit;font:inherit;font-size:12px;line-height:1;white-space:nowrap;cursor:pointer}
.hk-ms__ausloeser:hover,.hk-ms__ausloeser[aria-expanded="true"]{background:rgba(255,255,255,.16)}
.hk-ms__ausloeser:focus-visible,.hk-ms-zeile:focus-visible,.hk-ms__panel button:focus-visible,.hk-mb button:focus-visible{outline:2px solid var(--hk-ms-akzent);outline-offset:2px}
.hk-ms__globus,.hk-ms__pfeil{width:14px;height:14px;flex:none}
.hk-ms__text{white-space:nowrap}
.hk-ms__fl{display:inline-block;width:20px;height:14px;flex:none;border-radius:2px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.14);vertical-align:-2px;line-height:0}
.hk-ms__fl svg{display:block;width:100%;height:100%}
.hk-ms__fl--gross{width:28px;height:20px;border-radius:3px}
.hk-ms__kuerzel{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:14px;padding:0 2px;border-radius:2px;background:var(--hk-surface,#F2F2F2);color:var(--hk-ink-2,#4D4D4D);font-size:9px;font-weight:700;letter-spacing:.02em}

.hk-ms__panel{position:absolute;top:calc(100% + 6px);right:0;z-index:1060;width:360px;max-width:calc(100vw - 48px);max-height:min(680px,calc(100vh - var(--hk-ms-oben,60px) - 12px));max-height:min(680px,calc(100dvh - var(--hk-ms-oben,60px) - 12px));display:flex;flex-direction:column;overflow:hidden;background:var(--hk-surface-2,#FFF);color:var(--hk-ink,#000);border:1px solid var(--hk-line,#E0E0E0);border-radius:var(--hk-radius-m,8px);box-shadow:var(--hk-shadow-2,0 8px 32px rgba(0,0,0,.18));font-size:14px;line-height:1.45;text-align:left;white-space:normal;animation:hk-ms-auf .18s var(--hk-ease-out,cubic-bezier(.2,.8,.2,1))}
.hk-ms__panel[hidden]{display:none}
@keyframes hk-ms-auf{from{transform:translateY(-4px);opacity:0}to{transform:none;opacity:1}}
.hk-ms__panel--blatt{position:fixed;inset:0;top:0;right:0;width:100%;max-width:none;max-height:none;height:100%;border:0;border-radius:0;display:flex;flex-direction:column;animation:hk-ms-rein .22s var(--hk-ease-out,cubic-bezier(.2,.8,.2,1));z-index:1070}
@keyframes hk-ms-rein{from{transform:translateX(100%)}to{transform:none}}
.hk-ms__kopf{flex:none;display:flex;align-items:center;gap:8px;padding:14px 16px 8px}
.hk-ms__panel h2.hk-ms__titel{margin:0;flex:1;font-family:inherit;font-size:16px;font-weight:700;line-height:1.3;letter-spacing:normal;text-transform:none;color:inherit}
.hk-ms__zu{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:var(--hk-radius-s,2px);background:transparent;color:var(--hk-ink-2,#4D4D4D);cursor:pointer}
.hk-ms__zu:hover{background:var(--hk-hover-1,#F2F2F2)}
.hk-ms__zu svg{width:18px;height:18px}
.hk-ms__inhalt{min-height:0;overflow:auto;overscroll-behavior:contain;scroll-padding:4px}
.hk-ms__abschnitt{padding:6px 16px 10px}
.hk-ms__panel--blatt .hk-ms__abschnitt--laender{flex:0 1 auto;min-height:0;display:flex;flex-direction:column;align-items:flex-start}
.hk-ms__panel--blatt .hk-ms__abschnitt--laender>*{align-self:stretch}
.hk-ms__panel--blatt .hk-ms__abschnitt--laender>.hk-ms__textknopf{align-self:flex-start}
.hk-ms__panel p.hk-ms__label{margin:6px 0;line-height:1.45;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--hk-ink-3,#6E6E6E)}
.hk-ms__panel ul.hk-ms__liste{list-style:none;margin:0;padding:0;max-height:none;overflow:visible}
.hk-ms__liste>li{margin:0;padding:0}
.hk-ms__panel--blatt ul.hk-ms__liste{max-height:none;flex:0 1 auto;min-height:0}
.hk-ms__zeile{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:6px 10px;border:0;border-radius:var(--hk-radius-xs,4px);background:transparent;color:inherit;font:inherit;font-size:14px;text-align:left;cursor:pointer}
.hk-ms__zeile:hover{background:var(--hk-hover-1,#F2F2F2)}
.hk-ms__zeile[aria-pressed="true"]{background:var(--hk-ms-akzent-bg);color:var(--hk-ms-akzent-text);font-weight:600}
.hk-ms__name{flex:1;min-width:0}
.hk-ms__store{font-size:11px;font-weight:500;color:var(--hk-ink-3,#6E6E6E);white-space:nowrap}
.hk-ms__zeile[aria-pressed="true"] .hk-ms__store{color:inherit}
.hk-ms__haken{width:16px;height:16px;flex:none;opacity:0}
.hk-ms__zeile[aria-pressed="true"] .hk-ms__haken{opacity:1}
.hk-ms__textknopf{height:32px;margin-top:4px;padding:0 6px;border:0;border-radius:var(--hk-radius-s,2px);background:transparent;color:var(--hk-ink,#000);font:inherit;font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.hk-ms__textknopf:hover{background:var(--hk-hover-1,#F2F2F2)}
.hk-ms__segment{display:grid;grid-auto-columns:1fr;grid-auto-flow:column;gap:4px;padding:4px;background:var(--hk-surface,#F2F2F2);border-radius:var(--hk-radius-pill,999px)}
.hk-ms__segment button{height:34px;border:0;border-radius:var(--hk-radius-pill,999px);background:transparent;color:var(--hk-ink-2,#4D4D4D);font:inherit;font-size:14px;font-weight:500;cursor:pointer}
.hk-ms__segment button[aria-pressed="true"]{background:var(--hk-paper,#FFF);color:var(--hk-ink,#000);box-shadow:var(--hk-shadow-1,0 1px 2px rgba(0,0,0,.06),0 2px 8px rgba(0,0,0,.06))}
.hk-ms__hinweise{display:grid;gap:6px;margin:10px 0 0}
.hk-ms__hinweis{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;border-radius:var(--hk-radius-xs,4px);background:var(--hk-warning-bg,#FFF4D6);color:var(--hk-warning-text,#7A5200);font-size:13px;line-height:1.45}
.hk-ms__hinweis svg{width:16px;height:16px;flex:none;margin-top:1px}
.hk-ms__hinweis--info{background:var(--hk-ms-akzent-bg);color:var(--hk-ms-akzent-text)}
.hk-ms__hinweis--ok{background:var(--hk-green-bg,#E6F6EC);color:var(--hk-green-text,#0B7A34)}
.hk-ms__fuss{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px;border-top:1px solid var(--hk-line,#E0E0E0);background:var(--hk-surface,#F2F2F2);border-radius:0 0 var(--hk-radius-m,8px) var(--hk-radius-m,8px)}
.hk-ms__panel--blatt .hk-ms__fuss{border-radius:0;margin-top:auto;padding-bottom:max(calc(var(--hk-space-1) + var(--hk-space-05)),env(safe-area-inset-bottom,0px))}
.hk-ms__fuss .hk-ms-knopf{min-height:44px;flex:none}
.hk-ms__fusstext{font-size:12px;color:var(--hk-ink-2,#4D4D4D)}
.hk-ms-knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:32px;padding:0 12px;border:1px solid transparent;border-radius:var(--hk-radius-s,2px);background:var(--hk-cta,#000);color:var(--hk-on-cta,#FFF);font:inherit;font-size:13px;font-weight:500;white-space:nowrap;cursor:pointer;transition:background-color .15s var(--hk-ease,cubic-bezier(.2,0,0,1))}
.hk-ms-knopf:hover{background:var(--hk-cta-hover,#4D4D4D)}
.hk-ms-knopf--zweit{background:transparent;color:var(--hk-ink,#000);border-color:var(--hk-line-strong,#8F8F8F)}
.hk-ms-knopf--zweit:hover{background:var(--hk-hover-1,#F2F2F2)}
.hk-ms-knopf--text{background:transparent;color:var(--hk-ink,#000);padding:0 6px;text-decoration:underline;text-underline-offset:3px}
.hk-ms-knopf--text:hover{background:var(--hk-hover-1,#F2F2F2)}
.hk-ms__fehler{margin:8px 16px 0;font-size:13px;color:var(--hk-error-text,#A63500)}

/* D · mobil: Zeile im Drawer */
.hk-ms-zeile{display:flex;align-items:center;gap:10px;width:100%;min-height:56px;padding:0 16px;border:0;border-top:1px solid var(--hk-line,#E0E0E0);border-bottom:1px solid var(--hk-line,#E0E0E0);background:var(--hk-surface,#F2F2F2);color:var(--hk-ink,#000);font:inherit;font-size:15px;text-align:left;cursor:pointer}
.hk-ms-zeile__text{flex:1;min-width:0}
.hk-ms-zeile__unter{display:block;font-size:12px;color:var(--hk-ink-3,#6E6E6E)}
.hk-ms-zeile svg.hk-ms__pfeil{width:18px;height:18px}

/* F1 + F2 · Funnel-Leiste über dem Kopf */
.hk-mb{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:12px 52px 12px 20px;background:var(--hk-ms-akzent-bg);color:var(--hk-ink,#000);border-bottom:1px solid var(--hk-line,#E0E0E0);font-size:14px;line-height:1.45;animation:hk-mb-runter .25s var(--hk-ease-out,cubic-bezier(.2,.8,.2,1))}
@keyframes hk-mb-runter{from{transform:translateY(-100%);opacity:0}to{transform:none;opacity:1}}
.hk-mb__text{flex:1;min-width:220px}
.hk-mb__titel{display:block;font-weight:700}
.hk-mb__unter{display:block;margin-top:2px;font-size:12px;color:var(--hk-ink-2,#4D4D4D)}
.hk-mb__knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.hk-mb__zu{position:absolute;top:8px;right:10px;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:var(--hk-radius-s,2px);background:transparent;color:inherit;cursor:pointer}
.hk-mb__zu:hover{background:rgba(127,127,127,.18)}
.hk-mb__zu svg{width:16px;height:16px}
.hk-mb__globus{width:24px;height:24px;flex:none}
@media (max-width:575.98px){.hk-mb{padding:12px 48px 12px 16px}}
@media (prefers-reduced-motion:reduce){.hk-ms__panel,.hk-ms__panel--blatt,.hk-mb{animation:none}}

/* T-0175 (Bert 02.10.) · unter dem Desktop-Umbruch: Vorschlag als Blatt unten (Klasse setzt hk-markt.js per
   matchMedia(max-width:991.98px), gleicher Umbruch wie die Tab-Leiste). Fest positioniert → kein Inhaltssprung (CLS 0).
   Ebenenfolge: Unterleisten (Tab-Leiste 1020, Kaufleiste, Cookie-Band) liegen UNTER dem Blatt im Sinne von „darunter
   angeordnet“ – das Blatt sitzt auf --hk-leisten-unten-h (HookainRelaunch header-state.js) und überlappt sie nie.
   z-Ebene Tab-Leiste + 10: über Seite/Kopf, unter Offcanvas-Hintergrund (1040), Beratung (1050) und dem
   Markt-Blatt „Andere Auswahl“ (1070) – öffnet der Besucher eines davon, liegt es über dem Vorschlag.
   Lage über transform statt bottom: wächst/schrumpft eine Unterleiste (Cookie-Band kommt nach dem Blatt), wandert das
   Blatt mit, ohne Layout-Verschiebung (gemessen: bottom-Variante CLS 0,064–0,068, transform 0).
   Innenabstand unten konstant; die Safe-Area ohne Unterleiste füllt ein Schatten in Blattfarbe unter dem Blatt (keine
   Lücke, keine Größenänderung des Kastens beim Leistenwechsel). Bekannte Grenze: greift die Höhenbegrenzung (sehr
   niedrige Fenster, Querformat) und ändert sich danach eine Unterleiste, ändert sich die Kastenhöhe.
   Höhe begrenzt auf Fenster − Unterleisten − klebender Kopf (--hk-kopf-h, sticky1), damit Titel und × nie unter dem Kopf
   (Ebene 100) liegen. Ohne Unterleiste steht das Blatt auf der Fensterkante; die Safe-Area wird Innenabstand (keine Lücke darunter).
   Platz am Seitenende reserviert hk-markt.js (.hk-mb-platz), --hk-marktblatt-h steht für schwebende Fremd-Elemente. */
.hk-mb.hk-mb--blatt{--hk-mb-unten:var(--hk-leisten-unten-h,0px);position:fixed;left:0;right:0;bottom:0;transform:translateY(calc(-1 * var(--hk-mb-unten)));z-index:calc(var(--hk-shell-layer-mobile-nav,1020) + 10);max-height:calc(100vh - var(--hk-mb-unten) - var(--hk-kopf-h,0px) - var(--hk-space-2));max-height:calc(100dvh - var(--hk-mb-unten) - var(--hk-kopf-h,0px) - var(--hk-space-2));overflow:auto;overscroll-behavior:contain;gap:var(--hk-space-1) var(--hk-space-2);padding:var(--hk-space-2) calc(var(--hk-tap) + var(--hk-space-1) + env(safe-area-inset-right,0px)) var(--hk-space-2) max(var(--hk-space-2),env(safe-area-inset-left,0px));border-bottom:0;border-top:1px solid var(--hk-line);border-radius:var(--hk-radius-btn) var(--hk-radius-btn) 0 0;box-shadow:0 max(0px,env(safe-area-inset-bottom,0px) - var(--hk-mb-unten)) 0 0 var(--hk-ms-akzent-bg),var(--hk-shadow-2);animation:hk-mb-hoch .25s var(--hk-ease-out)}
/* Fokus auf dem Behälter (Dialog-Startpunkt): Ring nur bei :focus-visible (Tastatur; nach einem Tipp zeigt der Browser
   ihn nicht), innen liegend, Akzentfarbe (WCAG 2.4.7). */
.hk-mb.hk-mb--blatt:focus{outline:0}
.hk-mb.hk-mb--blatt:focus-visible{outline:2px solid var(--hk-ms-akzent);outline-offset:-2px}
/* Ruht, solange ein Eingabefeld außerhalb den Fokus hat (Suche: Vorschlagsliste, Bildschirmtastatur). */
.hk-mb.hk-mb--blatt.hk-mb--ruht{visibility:hidden}
@keyframes hk-mb-hoch{from{transform:translateY(100%)}}
.hk-mb--blatt .hk-mb__text{min-width:0;flex-basis:calc(100% - var(--hk-space-6))}
.hk-mb--blatt .hk-mb__knoepfe{flex-basis:100%}
.hk-mb--blatt .hk-ms-knopf{min-height:var(--hk-tap);padding:0 var(--hk-space-2)}
.hk-mb--blatt .hk-ms-knopf--text{min-width:var(--hk-tap);padding:0}
.hk-mb--blatt .hk-ms-knopf--text:hover{background:transparent;text-decoration-thickness:2px}
.hk-mb--blatt .hk-mb__zu{top:var(--hk-space-05);right:calc(var(--hk-space-05) + env(safe-area-inset-right,0px));width:var(--hk-tap);height:var(--hk-tap)}
@media (prefers-reduced-motion:reduce){.hk-mb.hk-mb--blatt{animation:none}}