/* ==========================================================================
   Five Stars – Kopfzeile + Menü aller Seiten (Design der Startseite 10/2026)
   Markup: tools/lib_homenav.cjs (aus tools/partials/header.html, eingesetzt von tools/patch_shared.cjs).
   Steuerung: js/hx-nav.js. Schriften: css/home-fonts.css (Manrope, Raleway, Instrument Serif), Icons: css/icons.css.
   Wird auf JEDER Seite nach style.css geladen; auf der Startseite zusätzlich css/home.css (nutzt die Tokens unten).
   Startseite (<html class="hx">): Leiste liegt fest über dem Einstiegsbild. Unterseiten: Leiste klebt oben (sticky)
   und schiebt den Inhalt nicht unter sich.
   ========================================================================== */

:root {
  --hx-bg: #0b0a09;
  --hx-foot: #080706;
  --hx-card: #141210;
  --hx-card2: #131110;
  --hx-ph: #181513;
  --hx-tx: #f4ecde;
  --hx-tx2: rgba(244, 236, 222, .76);
  --hx-tx3: rgba(244, 236, 222, .64);
  --hx-line: rgba(244, 236, 222, .1);
  --hx-line2: rgba(244, 236, 222, .16);
  --hx-gold: #d6b16a;
  --hx-gold2: #e2c07c;
  --hx-gold3: #e8c987;
  --hx-grad: linear-gradient(180deg, #e4c482, #c99d4f);
  --hx-on-gold: #1a1206;
  --hx-wa: #25d366;
  --hx-on-wa: #04210f;
  --hx-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --hx-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --hx-brand: 'Raleway', 'Manrope', sans-serif;
  --hx-pad-x: clamp(20px, 5vw, 64px);
  --hx-ease: cubic-bezier(.2, .8, .2, 1);
  --hx-stage-h: 100vh;
}
@supports (height: 100svh) { :root { --hx-stage-h: 100svh; } }

/* Icons (.hx-i, Schrift): css/icons.css */
html.hx-menu-open, html.hx-menu-open body { overflow: hidden !important; }

.hx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hx-chips a { display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; border-radius: 99px; background: var(--hx-card); border: 1px solid var(--hx-line);
  color: var(--hx-tx); font: 500 13.5px/1 var(--hx-sans); text-decoration: none; transition: border-color .25s; }
.hx-chips a:hover { border-color: var(--hx-gold); }
.hx-chips .hx-i { font-size: 17px; color: var(--hx-gold); }

/* ==========================================================================
   KOPFZEILE (Topbar + Leiste) & MENÜ
   ========================================================================== */
.hx-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; color: var(--hx-tx); font-family: var(--hx-sans); border-bottom: 1px solid transparent;
  transition: background-color .4s, border-color .4s, transform .45s var(--hx-ease); }
.hx-header.is-scrolled { background: rgba(11, 10, 9, .9); border-bottom-color: rgba(244, 236, 222, .08); }
@media (min-width: 900px) and (pointer: fine) {
  .hx-header.is-scrolled { background: rgba(11, 10, 9, .74); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); }
}
.hx-topbar { display: none; justify-content: space-between; align-items: center; gap: 20px; padding: 10px clamp(20px, 4vw, 56px);
  font: 500 12.5px/1 var(--hx-sans); color: rgba(244, 236, 222, .74); border-bottom: 1px solid rgba(244, 236, 222, .07); transition: opacity .3s; }
.hx-topbar-l, .hx-topbar-r { display: flex; gap: 22px; align-items: center; white-space: nowrap; }
@media (max-width: 1399px) { .hx-topbar-l, .hx-topbar-r { gap: 16px; } .hx-topbar .topbar-badge { display: none !important; } }
#sxNav .hx-topbar a { color: inherit; text-decoration: none; display: inline-flex; gap: 7px; align-items: center; background: none; border: 0; padding: 0; font-size: inherit; }
#sxNav .hx-topbar a:hover { color: var(--hx-gold); }
.hx-topbar .hx-i { font-size: 16px; }
#sxNav .hx-topbar .topbar-badge { display: inline-flex; gap: 6px; align-items: center; padding: 5px 11px; border: 1px solid rgba(244, 236, 222, .12); border-radius: 99px; background: none; color: inherit; font-size: inherit; }
.hx-topbar .topbar-badge .hx-i { color: var(--hx-gold); font-size: 15px; }
#sxNav .hx-topbar .topbar-rating, #sxNav .hx-topbar .topbar-highlight { color: var(--hx-gold); font-weight: 600; }
#sxNav .hx-topbar .topbar-login-btn { padding: 6px 12px; border-radius: 99px; border: 1px solid rgba(214, 177, 106, .45); color: var(--hx-tx); font-weight: 600; }
#sxNav .hx-topbar .topbar-login-btn:hover { background: rgba(214, 177, 106, .12); color: var(--hx-tx); }
.hx-topbar .topbar-login-btn .hx-i { color: var(--hx-gold); font-size: 15px; }
.hx-header.is-scrolled .hx-topbar { opacity: 0; pointer-events: none; }
@media (min-width: 1180px) {
  .hx-topbar { display: flex; }
  .hx-header.is-scrolled { transform: translateY(calc(-1 * var(--hx-tb, 34px))); }
}
.hx-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px clamp(16px, 4vw, 56px); }
.hx-brand { display: flex; align-items: center; gap: 12px; color: var(--hx-tx) !important; text-decoration: none; flex: none; min-width: 0; }
.hx-brand img { width: 34px; height: 34px; filter: invert(1) brightness(1.2); }
.hx-brand-txt { display: flex; flex-direction: column; gap: 5px; }
.hx-brand-txt b { font: 300 18px/1 var(--hx-brand); letter-spacing: .26em; white-space: nowrap; }
.hx-brand-txt small { font: 600 9.5px/1 var(--hx-sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(244, 236, 222, .62); white-space: nowrap; }
.hx-nav { display: none; gap: 4px; align-items: center; font: 500 14px/1 var(--hx-sans); }
.hx-nav-a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 99px; color: var(--hx-tx) !important; text-decoration: none; transition: color .2s; white-space: nowrap; }
.hx-nav-a:hover { color: var(--hx-gold) !important; }
.hx-nav-a .hx-i { font-size: 17px; color: var(--hx-gold); }
.hx-nav-a .hx-dd-caret { font-size: 16px; color: rgba(244, 236, 222, .5); margin-left: -2px; transition: transform .25s; }
.hx-dd { position: relative; }
.hx-dd-panel { position: absolute; top: calc(100% + 8px); left: 50%; width: 330px; padding: 10px; border-radius: 18px; background: #11100e; border: 1px solid var(--hx-line);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .85); opacity: 0; visibility: hidden; transform: translate(-50%, 6px); transition: opacity .2s, transform .2s, visibility 0s .2s; z-index: 5; }
.hx-dd-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.hx-dd:hover .hx-dd-panel, .hx-dd:focus-within .hx-dd-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.hx-dd:hover .hx-dd-caret, .hx-dd:focus-within .hx-dd-caret { transform: rotate(180deg); }
.hx-dd-panel ul, .hx-mg-panel ul { list-style: none; margin: 0; padding: 0; }
.hx-dd-panel a, .hx-mg-panel a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: var(--hx-tx) !important; text-decoration: none; font: 600 14px/1.25 var(--hx-sans); }
.hx-dd-panel a:hover, .hx-mg-panel a:hover { background: rgba(214, 177, 106, .08); }
.hx-li-ic { color: var(--hx-gold); font-size: 20px; width: 22px; text-align: center; }
.hx-li-txt { display: flex; flex-direction: column; gap: 3px; }
.hx-li-txt small { font: 500 12.5px/1.3 var(--hx-sans); color: rgba(244, 236, 222, .6); }
.hx-actions { display: flex; gap: 8px; align-items: center; flex: none; }
.hx-cta { display: none; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 99px; background: var(--hx-grad); color: var(--hx-on-gold) !important; font: 700 13.5px/1 var(--hx-sans); text-decoration: none; }
.hx-cta:hover { filter: brightness(1.08); }
#sxNav .hx-cart, .hx-menu-btn { display: inline-flex; align-items: center; gap: 7px; height: 42px; min-height: 42px !important; padding: 0 14px; border-radius: 99px; border: 1px solid var(--hx-line2);
  background: transparent; color: var(--hx-tx); font: 600 13px/1 var(--hx-sans); cursor: pointer; transition: border-color .25s; }
#sxNav .hx-cart:hover, .hx-menu-btn:hover { border-color: var(--hx-gold); }
.hx-cart .hx-i { font-size: 19px; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; }
#sxNav .hx-cart .cart-btn-label { display: none !important; font-weight: 600 !important; }
.hx-menu-btn { padding: 0 16px; gap: 8px; }
.hx-menu-btn .hx-i { font-size: 20px; }
@media (min-width: 900px) {
  .hx-cta { display: inline-flex; }
  #sxNav .hx-cart .cart-btn-label { display: inline !important; }
}
@media (min-width: 1180px) { .hx-nav { display: flex; } }
/* 1180–1439 px: Leiste kompakter, damit Bereiche + Anfrage + Warenkorb + Menü in eine Zeile passen */
@media (min-width: 1180px) and (max-width: 1439px) {
  .hx-bar { gap: 14px; padding-left: 28px; padding-right: 28px; }
  .hx-brand-txt small { display: none; }
  .hx-nav { gap: 0; font-size: 13.5px; }
  .hx-nav-a { padding: 10px 9px; gap: 4px; }
  .hx-nav-a .hx-dd-caret { display: none; }
  #sxNav .hx-cart .cart-btn-label { display: none !important; }
}
.hx-prog { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--hx-gold); transform-origin: 0 50%; transform: scaleX(0); }

/* Menü-Dialog: öffnet als Kreis vom Menü-Knopf aus */
.hx-menu { position: fixed; inset: 0; z-index: 1100; background: var(--hx-bg); color: var(--hx-tx); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  clip-path: circle(0% at var(--hx-mx, calc(100% - 70px)) var(--hx-my, 46px)); transition: clip-path .9s cubic-bezier(.7, 0, .2, 1); font-family: var(--hx-sans); }
.hx-menu.is-open { clip-path: circle(150% at var(--hx-mx, calc(100% - 70px)) var(--hx-my, 46px)); }
.hx-menu[hidden] { display: none; }
.hx-static .hx-menu { transition: none; }
.hx-menu-close { position: absolute; top: 22px; right: clamp(16px, 4vw, 56px); width: 48px; height: 48px; min-height: 48px !important; border-radius: 50%; border: 1px solid rgba(214, 177, 106, .5) !important;
  display: grid; place-items: center; color: var(--hx-gold); background: transparent; cursor: pointer; z-index: 2; }
.hx-menu-close .hx-i { font-size: 24px; }
.hx-menu-in { max-width: 1320px; margin: 0 auto; padding: 110px var(--hx-pad-x) 60px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 56px; }
.hx-menu-col { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.hx-menu-big { display: flex; flex-direction: column; }
.hx-mg-row { display: flex; align-items: center; gap: 14px; }
.hx-mg-a { font: 400 clamp(44px, 6vw, 80px)/1.08 var(--hx-serif); color: var(--hx-tx) !important; text-decoration: none; transition: color .25s; }
.hx-mg-a:hover { color: var(--hx-gold) !important; }
.hx-mg--accent .hx-mg-a { font-style: italic; color: var(--hx-gold2) !important; }
.hx-mg--accent .hx-mg-a:hover { color: var(--hx-tx) !important; }
.hx-mg-btn { width: 40px; height: 40px; min-height: 40px !important; border-radius: 50%; border: 1px solid var(--hx-line2) !important; color: var(--hx-gold); background: transparent; display: grid; place-items: center; cursor: pointer; flex: none; margin-top: .25em; }
.hx-mg-btn .hx-i { font-size: 22px; transition: transform .3s var(--hx-ease); }
.hx-mg-btn[aria-expanded="true"] .hx-i { transform: rotate(180deg); }
.hx-mg-panel { padding: 4px 0 18px; }
.hx-mg-panel ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 2px 10px; }
.hx-menu-title { display: flex; gap: 6px; align-items: center; font: 600 11px/1 var(--hx-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--hx-gold); margin: 0 0 14px; }
.hx-menu-title .hx-i { font-size: 16px; }
.hx-menu-five-links { display: flex; gap: 24px; flex-wrap: wrap; font: 500 17px/1 var(--hx-sans); }
.hx-menu-five-links a { color: var(--hx-tx) !important; text-decoration: none; }
.hx-menu-five-links a:hover { color: var(--hx-gold) !important; }
.hx-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hx-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px; border-radius: 18px; background: var(--hx-card); border: 1px solid var(--hx-line) !important;
  color: var(--hx-tx) !important; text-decoration: none; text-align: left; cursor: pointer; font-family: var(--hx-sans); transition: border-color .25s; min-height: 0 !important; }
.hx-tile:hover { border-color: rgba(214, 177, 106, .5) !important; }
.hx-tile .hx-i { font-size: 26px; color: var(--hx-gold); }
.hx-tile strong { font: 700 15px/1.1 var(--hx-sans); }
.hx-tile span:not(.hx-i) { font: 500 13px/1.2 var(--hx-sans); color: rgba(244, 236, 222, .65); }
.hx-tile--wa { background: var(--hx-wa); border-color: transparent !important; color: var(--hx-on-wa) !important; }
.hx-tile--wa .hx-i { color: var(--hx-on-wa); }
.hx-menu-pills { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
#sxMenu .hx-menu-pills .topbar-login-btn, .hx-pill { display: inline-flex; gap: 8px; align-items: center; padding: 12px 18px; border-radius: 99px; border: 1px solid var(--hx-line2); color: var(--hx-tx) !important;
  font: 600 14px/1 var(--hx-sans); text-decoration: none; background: none; }
#sxMenu .hx-menu-pills .topbar-login-btn { border-color: rgba(214, 177, 106, .45); }
.hx-menu-pills .hx-i { font-size: 18px; color: var(--hx-gold); }
.hx-menu-info { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; padding-top: 22px; border-top: 1px solid var(--hx-line); font: 500 13.5px/1.4 var(--hx-sans); color: rgba(244, 236, 222, .72); }
.hx-menu-info .topbar-right { display: inline-flex; flex-wrap: wrap; gap: 10px 22px; }
#sxMenu .hx-menu-info a { color: var(--hx-gold) !important; font-weight: 600; text-decoration: none; background: none; border: 0; padding: 0; font-size: inherit; display: inline-flex; gap: 6px; align-items: center; }
#sxMenu .hx-menu-info .topbar-badge { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; display: inline-flex; gap: 6px; align-items: center; }
.hx-menu-info .hx-i { font-size: 16px; color: var(--hx-gold); }
@media (max-width: 899px) {
  .hx-bar { padding: max(10px, env(safe-area-inset-top)) 14px 10px 16px; gap: 10px; }
  .hx-brand-txt small { display: none; }
  .hx-brand-txt b { font-size: 16px; letter-spacing: .22em; }
  #sxNav .hx-cart { padding: 0 12px; }
  .hx-menu { transition-duration: .6s; }
  .hx-menu-in { padding-top: 84px; gap: 36px; }
  .hx-menu-close { top: max(14px, env(safe-area-inset-top)); }
  .hx-mg-a { font-size: clamp(40px, 11vw, 56px); }
  .hx-menu-col { gap: 26px; }
}
@media (max-width: 400px) { .hx-menu-btn-txt { display: none; } .hx-menu-btn { padding: 0 12px; } }
@media (max-width: 339px) { .hx-brand-txt { display: none; } }

/* Saison-Lichterkette (js/main.js setzt body.fs-xmas + --fs-garland) an der Leiste */
body.fs-xmas .hx-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 14px; pointer-events: none;
  background: var(--fs-garland); background-size: 150px 14px; background-repeat: repeat-x; filter: drop-shadow(0 0 4px rgba(255, 220, 150, .7)); animation: fsLights 2.4s steps(2) infinite; }
@media (max-width: 899px) { body.fs-xmas .hx-header::after { filter: none; } }
.hx-static body.fs-xmas .hx-header::after { animation: none; }
@media (prefers-reduced-motion: reduce) { body.fs-xmas .hx-header::after { animation: none; } }

/* Unterseiten: Leiste im Fluss (klebt oben) statt über dem Inhalt; Hintergrund von Anfang an */
html:not(.hx) .hx-header { position: sticky; background: var(--hx-bg); }
/* style.css setzt overflow-x:hidden auf html UND body – dann scrollt body selbst nicht, sticky klebt nicht. clip schneidet, ohne Scroll-Container zu sein. */
html:not(.hx), html:not(.hx) body { overflow-x: visible !important; overflow-x: clip !important; }
html:not(.hx) .hx-header.is-scrolled { background: rgba(11, 10, 9, .94); }
/* Klebende Unter-Leisten (Leistungsseiten, Portfolio) direkt unter der Leiste: 70 px (Desktop eingeklappt), Handy 62 px */
html:not(.hx) { --hx-sticky-top: 70px; --svc-nav-top: var(--hx-sticky-top); }
@media (max-width: 899px) { html:not(.hx) { --hx-sticky-top: 62px; } }
html:not(.hx) .portfolio-jump-nav { top: var(--hx-sticky-top); }
@media (prefers-reduced-motion: reduce) { .hx-menu { transition: none; } }
@media print { .hx-header, .hx-menu { display: none !important; } }