/* ==========================================================================
   Five Stars – Startseite (Design 10/2026, Handoff „design_handoff_startseite“)
   Gehört zu js/home-fx.js (Scroll-Effekte, Menü, Sternenstaub) und js/home-3d.js (three.js, lädt erst bei Bedarf).
   Schriften: css/home-fonts.css. style.css wird davor geladen (Warenkorb, Cookie-Hinweis, Dialoge) – hier überschrieben,
   was die Startseite anders braucht (alles unter html.hx).

   Modi (setzt ein Inline-Skript im <head> vor dem ersten Zeichnen):
     html.hx-on      Scroll-Effekte aktiv (klebende Szenen, Parallax, 3D)
     html.hx-static  „Bewegung reduzieren“ bzw. ?bewegung=aus: ruhige Darstellung, alles steht untereinander
     (ohne JavaScript gilt die ruhige Darstellung ebenfalls – Effekte hängen immer an .hx-on)
   Animiert werden nur transform/opacity; Werte pro Bild setzt js/home-fx.js direkt am Element (nie am <html>).
   Handy (< 900 px): kein Weichzeichner (backdrop-filter), kein Sternenstaub, weniger Bilder im Tunnel, kürzere Szenen.
   ========================================================================== */


/* Tokens (--hx-*), Icons (.hx-i), Kopfzeile + Menü: css/hx-nav.css (wird davor geladen, gilt für alle Seiten) */

/* style.css-Grundwerte für die Startseite umstellen (Warenkorb/Cookie-Hinweis übernehmen Schriften und Gold) */
html.hx {
  --font-serif: var(--hx-serif);
  --font-sans: var(--hx-sans);
  --accent-gold: #d6b16a;
  --accent-gold-light: #e8c987;
  --bg-primary: #0b0a09;
  --bg-card: #141210;
  --border-gold: rgba(214, 177, 106, .35);
  scroll-behavior: auto;
}
/* style.css setzt overflow-x:hidden auf html/body – das schaltet position:sticky ab. clip schneidet, ohne Scroll-Container zu sein. */
html.hx, html.hx body { overflow-x: visible !important; overflow-x: clip !important; }
html.hx body { margin: 0; background: var(--hx-bg); color: var(--hx-tx); font-family: var(--hx-sans); line-height: 1.6; -webkit-font-smoothing: antialiased; padding-bottom: 0 !important; }
html.hx body::before { display: none; }
html.hx ::selection { background: var(--hx-gold); color: var(--hx-on-gold); }
html.hx img { max-width: 100%; }
html.hx a { color: inherit; }
html.hx main p { margin: 0; }

.hx-gold { color: var(--hx-gold); }

/* Überschriften: eine Regel mit !important, damit die mobilen Größen aus style.css (h1–h3 !important) nicht greifen */
html.hx .hx-hd { font-family: var(--hx-serif) !important; font-weight: 400; color: var(--hx-tx); margin: 0; letter-spacing: -.01em;
  font-size: var(--fs) !important; line-height: var(--lh, 1) !important; text-wrap: balance; }
.hx-hd em, .hx-hd .hx-h1-sub { font-style: italic; color: var(--hx-gold2); }
.hx-h1 { --fs: clamp(32px, min(4.5vw, 7.4vh), 78px); --lh: .98; }
.hx-h1-sub { display: block; margin-top: .3em; font-size: .55em; line-height: 1; }
.hx-h2 { --fs: clamp(44px, 5.6vw, 90px); --lh: .96; }
.hx-h2--xl { --fs: clamp(44px, 6.4vw, 100px); }
.hx-h2--md { --fs: clamp(40px, 5.2vw, 82px); --lh: .98; }
.hx-h2--sm { --fs: clamp(40px, 4.6vw, 74px); --lh: .98; }
.hx-h2--contact { --fs: clamp(52px, 7.4vw, 124px); --lh: .92; letter-spacing: -.015em; }
.hx-h3 { --fs: clamp(34px, 3.6vw, 56px); --lh: 1; }
.hx-h3--md { --fs: clamp(32px, 3.4vw, 52px); }
.hx-h3--price { --fs: 40px; }
.hx-h3--avail { --fs: clamp(30px, 3vw, 44px); --lh: 1.05; display: flex; gap: 14px; align-items: flex-start; }
.hx-h3--avail .hx-i { font-size: 36px; color: var(--hx-gold); margin-top: 2px; }
.hx-h3--panel { --fs: 36px; --lh: 1.05; }
.hx-h3--lg { --fs: clamp(36px, 3.6vw, 56px); }
.hx-h3--prod { --fs: 32px; }
.hx-h3--shop { --fs: 34px; }

/* ---------- Bausteine ---------- */
.hx-wrap { max-width: 1320px; margin: 0 auto; }
.hx-sec { padding: clamp(80px, 10vw, 160px) var(--hx-pad-x); position: relative; }
.hx-stack { display: flex; flex-direction: column; gap: 26px; }
.hx-stack--sm { gap: 18px; } .hx-stack--xs { gap: 8px; } .hx-stack--lg { gap: 32px; }
.hx-eyebrow { display: flex; align-items: center; gap: 14px; font: 600 12px/1.2 var(--hx-sans); letter-spacing: .22em; text-transform: uppercase; color: rgba(244, 236, 222, .74); }
.hx-eyebrow b { color: var(--hx-gold); font-weight: 700; }
.hx-eyebrow i { width: 40px; height: 1px; background: rgba(214, 177, 106, .5); flex: none; }
.hx-eyebrow--light { color: rgba(244, 236, 222, .86); }
.hx-body { font: 400 16.5px/1.7 var(--hx-sans); color: var(--hx-tx2); max-width: 56ch; text-wrap: pretty; }
.hx-body strong { color: var(--hx-gold3); font-weight: 700; }
.hx-body--lg { font-size: clamp(16px, 1.25vw, 19px); max-width: 54ch; }
.hx-body--sm { font-size: 15px; }
.hx-body--w60 { max-width: 60ch; }
.hx-label { font: 700 11px/1.2 var(--hx-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--hx-gold); }
.hx-label--mute { color: rgba(244, 236, 222, .6); letter-spacing: .2em; }
.hx-quote-line { font: italic 400 clamp(28px, 3vw, 46px)/1.08 var(--hx-serif); color: var(--hx-tx); text-wrap: balance; }
.hx-quote-line--lg { font-size: clamp(32px, 3.8vw, 60px); line-height: 1.04; }
.hx-quote-line--xl { font-size: clamp(36px, 5vw, 80px); line-height: 1.02; }
.hx-stars { color: var(--hx-gold); letter-spacing: .14em; }
.hx-center { display: flex; justify-content: center; margin-top: 40px; text-align: center; }
.hx-push { margin-top: auto; }
.hx-media { position: relative; overflow: hidden; border-radius: 22px; background: var(--hx-card); }
.hx-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hx-ar-45 { aspect-ratio: 4 / 5; }

/* Knöpfe & Links */
.hx-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.hx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 24px; border-radius: 99px; font: 700 15px/1 var(--hx-sans);
  text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: filter .25s, border-color .25s, background .25s, transform .25s; }
.hx-btn .hx-i { font-size: 19px; }
.hx-btn--gold { background: var(--hx-grad); color: var(--hx-on-gold) !important; }
.hx-btn--gold:hover { filter: brightness(1.08); }
.hx-btn--glow { box-shadow: 0 14px 40px -14px rgba(214, 177, 106, .7); }
.hx-btn--wa { background: var(--hx-wa); color: var(--hx-on-wa) !important; padding: 16px 22px; gap: 9px; }
.hx-btn--wa:hover { filter: brightness(1.06); }
.hx-btn--ghost { border-color: rgba(244, 236, 222, .22); color: var(--hx-tx) !important; font-size: 14.5px; }
.hx-btn--ghost:hover { border-color: var(--hx-gold); }
.hx-btn--outline { border-color: rgba(214, 177, 106, .55); color: var(--hx-gold2) !important; padding: 15px 24px; font-size: 14.5px; }
.hx-btn--block { display: flex; width: 100%; margin-top: auto; }
.hx-btn--fit { width: fit-content; }
.hx-btn--lg { padding: 18px 28px; font-size: 16px; }
.hx-link { display: inline-flex; align-items: center; gap: 10px; width: fit-content; padding-bottom: 6px; border-bottom: 1px solid rgba(214, 177, 106, .45);
  font: 700 14px/1.3 var(--hx-sans); letter-spacing: .02em; color: var(--hx-gold2) !important; text-decoration: none; transition: border-color .25s, color .25s; }
.hx-link .hx-i { font-size: 18px; transition: transform .3s var(--hx-ease); }
.hx-link:hover { border-color: var(--hx-gold2); }
.hx-link:hover .hx-i, .hx-more:hover .hx-i { transform: translateX(4px); }
.hx-link--light { color: var(--hx-gold3) !important; border-color: rgba(214, 177, 106, .5); }
.hx-more { display: inline-flex; align-items: center; gap: 8px; font: 700 14px/1 var(--hx-sans); color: var(--hx-gold2); }
.hx-more .hx-i { font-size: 18px; transition: transform .3s var(--hx-ease); }
.hx-badge { padding: 7px 13px; border-radius: 99px; border: 1px solid rgba(214, 177, 106, .5); font: 700 11px/1 var(--hx-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--hx-gold2); }
.hx-check { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font: 500 15px/1.4 var(--hx-sans); color: var(--hx-tx); }
.hx-check li { display: flex; gap: 10px; }
.hx-check li::before { content: 'check'; font-family: 'Material Symbols Rounded'; font-size: 19px; font-weight: 400; line-height: 1.05; letter-spacing: 0; text-transform: none; color: var(--hx-gold); flex: none; font-feature-settings: 'liga'; }
.hx-round-ic { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: rgba(214, 177, 106, .14); color: var(--hx-gold2); flex: none; }
.hx-round-ic .hx-i { font-size: 28px; }
.hx-round-ic--lg { width: 64px; height: 64px; } .hx-round-ic--lg .hx-i { font-size: 30px; }

/* Fokus sichtbar (Tastatur) */
html.hx :focus-visible { outline: 2px solid var(--hx-gold3) !important; outline-offset: 3px; border-radius: 6px; }
html.hx .skip-link { position: fixed; left: 16px; top: -70px; z-index: 100001; padding: 12px 18px; border-radius: 10px; background: var(--hx-gold); color: var(--hx-on-gold); font: 700 14px/1 var(--hx-sans); }
html.hx .skip-link:focus { top: 16px; }

/* Sternenstaub-Cursor */
.hx-dust { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1200; display: none; }
.hx-on .hx-dust.is-on { display: block; }


/* ==========================================================================
   HERO: Objektiv
   ========================================================================== */
.hx-hero { position: relative; min-height: var(--hx-stage-h); }
.hx-on .hx-hero { height: 340vh; }
.hx-hero-stage { position: relative; height: var(--hx-stage-h); min-height: 560px; overflow: hidden; background: var(--hx-bg); }
.hx-on .hx-hero-stage { position: sticky; top: 0; }
/* Foto im Kreis (clip-path; mit Effekten setzt js/home-fx.js Kreis und Bild-Zoom je Bild, das Bild ist eine eigene Ebene) */
.hx-hero-photo { position: absolute; inset: 0; clip-path: circle(min(20vw, 30vh) at 72% 56%); }
.hx-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); }
.hx-on .hx-hero-img { will-change: transform; }
.hx-hero-shade { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(11, 10, 9, .3), rgba(11, 10, 9, .82)); opacity: 0; }
.hx-hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hx-hero-words { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3vh; pointer-events: none; text-align: center; }
.hx-hero-five, .hx-hero-stars { font: 100 clamp(96px, 21vw, 360px)/.8 var(--hx-brand); letter-spacing: .05em; color: var(--hx-tx); opacity: 0; will-change: transform, opacity; }
.hx-hero-tag { display: flex; flex-direction: column; align-items: center; gap: 12px; opacity: 0; }
.hx-hero-tag .hx-stars { letter-spacing: .35em; font-size: 18px; }
.hx-hero-tag span:last-child { font: italic 400 clamp(24px, 2.8vw, 44px)/1 var(--hx-serif); color: var(--hx-tx); }
.hx-hero-text { position: absolute; inset: 0; display: flex; align-items: center; padding: 96px clamp(20px, 6vw, 96px) 0; pointer-events: none; }
.hx-hero-inner { width: 100%; max-width: min(600px, 40vw); pointer-events: auto; display: flex; flex-direction: column; gap: clamp(12px, 2vh, 22px); }
.hx-kicker { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font: 600 11.5px/1.3 var(--hx-sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(244, 236, 222, .8); }
.hx-kicker b { color: var(--hx-gold); letter-spacing: .16em; font-weight: 700; }
.hx-hero-loc { display: flex; align-items: center; gap: 8px; font: 500 13px/1.4 var(--hx-sans); color: rgba(244, 236, 222, .74); }
.hx-hero-loc .hx-i { font-size: 17px; color: var(--hx-gold); }
.hx-hero-lead { font: 400 clamp(15px, 1.1vw, 18px)/1.6 var(--hx-sans); color: rgba(244, 236, 222, .82); max-width: 46ch; text-wrap: pretty; }
.hx-hero-inner .hx-btns { margin-top: 4px; }
.hx-hero-chips { display: flex; flex-wrap: wrap; gap: 8px 18px; font: 500 12.5px/1.3 var(--hx-sans); color: rgba(244, 236, 222, .72); }
.hx-hero-chips > span { display: flex; gap: 6px; align-items: center; }
.hx-hero-chips .hx-i { font-size: 16px; color: var(--hx-gold); }
.hx-hero-hint { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px;
  font: 600 10px/1 var(--hx-sans); letter-spacing: .32em; text-transform: uppercase; color: rgba(244, 236, 222, .6); }
.hx-hero-hint i { width: 1px; height: 38px; background: linear-gradient(var(--hx-gold), transparent); }
@media (max-width: 899px) {
  .hx-hero-photo { clip-path: circle(min(34vw, 18vh) at 50% 28%); }
  .hx-hero-text { align-items: flex-end; padding: 0 20px calc(102px + env(safe-area-inset-bottom)); }
  .hx-hero-inner { max-width: 100%; gap: 12px; }
  .hx-hero-hint { display: none; }
  .hx-hero-chips { flex-wrap: nowrap; overflow-x: auto; gap: 14px; font-size: 12px; white-space: nowrap; scrollbar-width: none; margin-right: -20px; padding-right: 20px; }
  .hx-hero-chips::-webkit-scrollbar { display: none; }
  .hx-hero-lead { font-size: 15px; line-height: 1.55; }
  .hx-hero .hx-btn { padding: 14px 20px; font-size: 14.5px; }
}
@media (max-width: 899px) and (max-height: 740px) { .hx-hero-lead { font-size: 14px; } .hx-hero-inner { gap: 9px; } }

/* ==========================================================================
   01 / 02 / Laufband
   ========================================================================== */
.hx-s01 { padding: clamp(100px, 14vw, 200px) var(--hx-pad-x) clamp(60px, 8vw, 120px); }
.hx-s01-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(40px, 6vw, 96px); align-items: end; }
.hx-s01-txt { gap: 28px; padding-bottom: 4vw; }
.hx-rv-mask { overflow: hidden; padding-bottom: .1em; }
.hx-s02 { padding-top: 0; padding-bottom: clamp(80px, 10vw, 140px); }
.hx-s02-box { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 16 / 8; min-height: 480px; background: var(--hx-card); }
.hx-s02-box > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hx-s02-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 10, 9, .88), rgba(11, 10, 9, .35) 55%, rgba(11, 10, 9, 0)); }
.hx-s02-txt { position: absolute; left: 0; bottom: 0; padding: clamp(28px, 4.5vw, 72px); max-width: 680px; display: flex; flex-direction: column; gap: 24px; }
@media (max-width: 640px) { .hx-s02-box { aspect-ratio: auto; min-height: 520px; } .hx-s02-shade { background: linear-gradient(180deg, rgba(11, 10, 9, .1) 20%, rgba(11, 10, 9, .9)); } }

.hx-marq { padding: clamp(22px, 3vw, 40px) 0; border-top: 1px solid rgba(244, 236, 222, .08); border-bottom: 1px solid rgba(244, 236, 222, .08); overflow: hidden; }
.hx-marq-track { display: flex; width: max-content; will-change: transform; }
.hx-marq-set { display: flex; align-items: center; gap: clamp(20px, 3vw, 48px); padding-right: clamp(20px, 3vw, 48px); white-space: nowrap; }
.hx-marq-head { display: flex; align-items: center; gap: 8px; font: 700 12px/1 var(--hx-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--hx-gold); }
.hx-marq-head .hx-i { font-size: 18px; }
.hx-marq-pl { font: 400 clamp(44px, 6.4vw, 104px)/1.05 var(--hx-serif); color: var(--hx-tx); }
.hx-marq-dot { color: var(--hx-gold); font-size: clamp(18px, 2vw, 30px); }
html:not(.hx-on) .hx-marq-track { width: auto; padding: 0 var(--hx-pad-x); }
html:not(.hx-on) .hx-marq-set { flex-wrap: wrap; white-space: normal; row-gap: 6px; }
html:not(.hx-on) .hx-marq-set + .hx-marq-set { display: none; }

/* ==========================================================================
   03 SHOOTING-BUILDER (Linse) – Zeilen erzeugt js/shooting-builder.js (data-sb-layout="lens")
   ========================================================================== */
.hx-builder { padding: clamp(100px, 12vw, 180px) var(--hx-pad-x); }
.hx-builder-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: clamp(48px, 6vw, 96px); align-items: center; }
.hx-builder-txt { gap: 28px; }
#shootingBuilderWizard { min-height: 420px; }
.sbl-h { font: 600 12px/1.3 var(--hx-sans); letter-spacing: .18em; text-transform: uppercase; color: rgba(244, 236, 222, .74); margin: 0 0 6px; }
.sbl-lead { font: 400 14.5px/1.6 var(--hx-sans); color: var(--hx-tx3); margin: 0 0 18px; max-width: 56ch; }
.sbl-list { display: flex; flex-direction: column; border-top: 1px solid var(--hx-line); }
.sbl-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px 14px; border-bottom: 1px solid var(--hx-line);
  color: var(--hx-tx) !important; text-decoration: none; transition: background .35s; }
.sbl-row:hover, .sbl-row.is-on { background: rgba(214, 177, 106, .08); }
.sbl-num { font: 700 12px/1 var(--hx-sans); color: var(--hx-gold); letter-spacing: .1em; }
.sbl-name { display: flex; align-items: center; gap: 14px; font: 400 clamp(21px, 2.1vw, 30px)/1.15 var(--hx-serif); transition: color .35s; }
.sbl-row.is-on .sbl-name { color: var(--hx-gold3); }
.sbl-name .hx-i { font-size: 22px; color: var(--hx-gold); font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; }
.sbl-go { color: rgba(244, 236, 222, .5); font-size: 20px; transition: transform .3s var(--hx-ease), color .3s; }
.sbl-row:hover .sbl-go, .sbl-row.is-on .sbl-go { color: var(--hx-gold); transform: translateX(4px); }
.sbl-note { font: 400 13px/1.55 var(--hx-sans); color: var(--hx-tx3); margin: 16px 0 0; }
.hx-lens { position: relative; aspect-ratio: 1; width: 100%; max-width: 600px; justify-self: center; }
.hx-lens-ring, .hx-portrait-ring { position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(244, 236, 222, .26) 0deg .5deg, transparent .5deg 3deg);
  -webkit-mask: radial-gradient(closest-side, transparent 89%, #000 89.4% 97%, transparent 97.4%); mask: radial-gradient(closest-side, transparent 89%, #000 89.4% 97%, transparent 97.4%);
  transition: transform 1.3s var(--hx-ease); }
.hx-lens-r1 { position: absolute; inset: 1%; border-radius: 50%; border: 1px solid rgba(214, 177, 106, .35); }
.hx-lens-r2, .hx-portrait-r { position: absolute; inset: 7.5%; border-radius: 50%; border: 1px solid rgba(214, 177, 106, .55); }
.hx-lens-glass, .hx-portrait-glass { position: absolute; inset: 9%; border-radius: 50%; overflow: hidden; background: var(--hx-card); box-shadow: 0 50px 120px -30px rgba(0, 0, 0, .9); }
.hx-lens-glass img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.12); transition: opacity .9s, transform 1.6s var(--hx-ease); }
.hx-lens-glass img.is-on { opacity: 1; transform: none; }
.hx-lens-shine { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .14), transparent 42%), radial-gradient(closest-side, transparent 62%, rgba(0, 0, 0, .5)); pointer-events: none; }
.hx-lens-cta { position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%); white-space: nowrap; padding: 16px 26px; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7); }
.hx-lens-cta .hx-i { font-size: 20px; }
@media (max-width: 899px) { .hx-lens { max-width: 440px; } .hx-builder-grid { gap: 40px; } #shootingBuilderWizard { min-height: 0; } }

/* ==========================================================================
   04 ÜBER MICH
   ========================================================================== */
.hx-about { padding: clamp(60px, 8vw, 120px) var(--hx-pad-x) clamp(100px, 12vw, 160px); }
.hx-about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: clamp(48px, 6vw, 104px); align-items: start; }
.hx-about-media { position: relative; padding: 0 10% 14% 0; }
.hx-about-small { position: absolute; right: 0; bottom: 0; width: 46%; aspect-ratio: 3 / 4; border-radius: 18px; border: 6px solid var(--hx-bg); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .8); }
.hx-about-badge { position: absolute; left: -2%; bottom: 8%; max-width: 230px; padding: 18px 20px; border-radius: 16px; background: rgba(19, 17, 16, .9); border: 1px solid rgba(214, 177, 106, .32); display: flex; flex-direction: column; gap: 6px; }
@media (min-width: 900px) and (pointer: fine) { .hx-about-badge { background: rgba(19, 17, 16, .86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } }
.hx-about-badge b { font: 400 46px/1 var(--hx-serif); color: var(--hx-gold2); }
.hx-about-badge > span { font: 500 13px/1.45 var(--hx-sans); color: rgba(244, 236, 222, .82); }
.hx-about-txt { gap: 24px; }
.hx-about-lead { font: 400 clamp(19px, 1.6vw, 24px)/1.5 var(--hx-sans); color: var(--hx-tx); text-wrap: pretty; }
.hx-about-txt .hx-body { font-size: 16px; line-height: 1.75; max-width: none; }
.hx-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 12px; margin-top: 6px; }
.hx-point { display: flex; gap: 14px; padding: 18px; border-radius: 16px; background: var(--hx-card2); border: 1px solid rgba(244, 236, 222, .08); }
.hx-point-ic { width: 30px; height: 30px; border-radius: 50%; background: rgba(214, 177, 106, .14); color: var(--hx-gold); display: grid; place-items: center; font-size: 18px; }
.hx-point > span:last-child { display: flex; flex-direction: column; gap: 5px; }
.hx-point b { font: 700 15px/1.3 var(--hx-sans); }
.hx-point b + span { font: 400 13.5px/1.5 var(--hx-sans); color: rgba(244, 236, 222, .7); }
.hx-author { display: flex; align-items: center; gap: 16px; padding: 14px 16px 14px 14px; border-radius: 99px; background: var(--hx-card2); border: 1px solid rgba(244, 236, 222, .08); width: fit-content; max-width: 100%; margin-top: 8px; }
.hx-author img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(214, 177, 106, .5); flex: none; }
.hx-author-txt { display: flex; flex-direction: column; gap: 4px; }
.hx-author-txt b { font: 700 15px/1 var(--hx-sans); }
.hx-author-txt span { font: 500 13px/1.2 var(--hx-sans); color: rgba(244, 236, 222, .66); }
.hx-author-btn { margin-left: 8px; padding: 10px 16px; border-radius: 99px; background: rgba(214, 177, 106, .14); color: var(--hx-gold2) !important; font: 700 13px/1 var(--hx-sans); text-decoration: none; }

/* ==========================================================================
   KENNZAHLEN + 3D-LOGO
   ========================================================================== */
.hx-stats { position: relative; }
.hx-on .hx-stats { height: 230vh; }
.hx-stats-stage { position: relative; min-height: var(--hx-stage-h); overflow: hidden; display: flex; align-items: center; padding: 90px var(--hx-pad-x) 30px; }
.hx-on .hx-stats-stage { position: sticky; top: 0; height: var(--hx-stage-h); }
.hx-stats-glow { position: absolute; inset: 0; background: radial-gradient(ellipse 45% 50% at 50% 52%, rgba(214, 177, 106, .14), transparent 70%); }
.hx-stats-grid { position: relative; width: 100%; max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 40px); align-items: center; }
.hx-stats-col { display: flex; flex-direction: column; gap: clamp(16px, 4vh, 48px); }
.hx-stat { display: flex; flex-direction: column; gap: 8px; padding-top: 18px; border-top: 1px solid rgba(214, 177, 106, .35); }
.hx-stat-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.hx-stat-num { font: 400 clamp(52px, 6.6vw, 112px)/.9 var(--hx-serif); color: var(--hx-tx); }
.hx-stat-row .hx-stars { font-size: clamp(13px, 1.2vw, 18px); letter-spacing: .12em; }
.hx-stat-strong { font: 700 clamp(13px, 1.1vw, 16px)/1.35 var(--hx-sans); }
.hx-stat-sub { font: 400 13px/1.5 var(--hx-sans); color: rgba(244, 236, 222, .64); }
.hx-stat-txt { font: 400 13.5px/1.5 var(--hx-sans); color: rgba(244, 236, 222, .74); }
.hx-stat-unit { font: italic 400 clamp(22px, 2vw, 32px)/1 var(--hx-serif); color: var(--hx-gold2); }
.hx-stats-logo { position: relative; height: 70vh; max-height: 720px; }
.hx-3d { position: absolute; inset: 0; }
.hx-3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hx-3d-fallback { position: absolute; object-fit: contain; transition: opacity .8s; }
.hx-3d-fallback--logo { inset: 12%; width: 76%; height: 76%; filter: invert(1) sepia(.35) saturate(1.4) brightness(.95); opacity: .85; }
.hx-3d.is-3d .hx-3d-fallback { opacity: 0; }
@media (max-width: 899px) {
  .hx-stats-grid { grid-template-columns: 1fr 1fr; }
  .hx-stats-logo { grid-column: 1 / -1; order: -1; height: 24vh; min-height: 160px; max-height: 260px; }
  .hx-stats-stage { padding: 72px 20px calc(100px + env(safe-area-inset-bottom)); align-items: center; }
  .hx-stats-grid { gap: 14px 16px; }
  .hx-stat { padding-top: 12px; gap: 6px; }
  .hx-stat-num { font-size: clamp(44px, 12vw, 64px); }
  .hx-stats-col { gap: 18px; }
}

/* ==========================================================================
   05 PORTFOLIO: Querlauf
   ========================================================================== */
.hx-hs { position: relative; }
.hx-hs-stage { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.hx-on .hx-hs-stage { position: sticky; top: 0; height: var(--hx-stage-h); }
.hx-hs-track { display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); padding: 60px clamp(20px, 6vw, 96px) 0; width: max-content; perspective: 1400px; will-change: transform; }
.hx-hs-intro { width: min(500px, 84vw); flex: none; display: flex; flex-direction: column; gap: 26px; }
.hx-hs-hint { display: flex; align-items: center; gap: 10px; font: 600 11px/1 var(--hx-sans); letter-spacing: .24em; text-transform: uppercase; color: rgba(244, 236, 222, .55); }
.hx-hs-hint .hx-i { font-size: 18px; color: var(--hx-gold); }
.hx-hcard { margin: 0; flex: none; width: clamp(280px, 56vw, 760px); height: min(68vh, 640px); position: relative; border-radius: 22px; overflow: hidden; background: var(--hx-card); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9); }
.hx-hcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.25); }
.hx-hcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 10, 9, 0) 50%, rgba(11, 10, 9, .85)); pointer-events: none; }
.hx-hcard figcaption { position: absolute; z-index: 1; left: clamp(20px, 2.4vw, 32px); right: clamp(20px, 2.4vw, 32px); bottom: clamp(20px, 2.4vw, 30px); display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.hx-hcard figcaption > span { display: flex; flex-direction: column; gap: 8px; }
.hx-hcard figcaption b { font: italic 400 clamp(26px, 2.6vw, 40px)/1.05 var(--hx-serif); color: var(--hx-tx); }
.hx-hcard figcaption b + span { font: 500 13px/1.3 var(--hx-sans); color: rgba(244, 236, 222, .78); }
.hx-hcard figcaption i { font: 700 12px/1 var(--hx-sans); font-style: normal; letter-spacing: .14em; color: var(--hx-gold); }
.hx-hs-end { width: min(380px, 80vw); flex: none; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.hx-hs-bar { position: absolute; left: clamp(20px, 6vw, 96px); right: clamp(20px, 6vw, 96px); bottom: 5vh; height: 1px; background: rgba(244, 236, 222, .12); }
.hx-hs-bar i { display: block; height: 100%; background: var(--hx-gold); transform-origin: 0 50%; transform: scaleX(0); }
/* ruhig: Wischen statt Querlauf */
html:not(.hx-on) .hx-hs-stage { padding: 100px 0 60px; }
html:not(.hx-on) .hx-hs-track { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 20px; perspective: none; }
html:not(.hx-on) .hx-hs-track > * { scroll-snap-align: start; }
html:not(.hx-on) .hx-hcard img { transform: none; }
html:not(.hx-on) .hx-hs-bar, html:not(.hx-on) .hx-hs-hint { display: none; }
@media (max-width: 899px) { .hx-hcard { width: 84vw; height: min(62vh, 520px); } .hx-hs-track { padding-top: 70px; } }

/* ==========================================================================
   HOCHZEITSFILM (Block .fs-film-section aus build_service_pages.cjs)
   ========================================================================== */
.hx-film { padding: clamp(100px, 12vw, 180px) var(--hx-pad-x); }
html.hx .hx-film .section { padding: 0; background: none; }
html.hx .hx-film .container { max-width: 1320px; padding: 0; }
html.hx .hx-film .svc-head { display: flex; flex-direction: column; align-items: center; gap: 26px; text-align: center; margin: 0 0 50px; }
html.hx .hx-film .section-tag, html.hx .hx-rg .section-tag { display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; margin: 0; font: 600 12px/1 var(--hx-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--hx-gold); box-shadow: none; }
html.hx .hx-film .section-tag::before { content: 'movie'; font-family: 'Material Symbols Rounded'; font-size: 18px; font-weight: 400; letter-spacing: 0; text-transform: none; animation: none; font-feature-settings: 'liga'; }
html.hx .hx-film .section-title, html.hx .hx-rg .section-title { font-family: var(--hx-serif) !important; font-weight: 400; font-size: clamp(44px, 6vw, 96px) !important; line-height: .96 !important; letter-spacing: -.01em; color: var(--hx-tx); margin: 0; }
html.hx .hx-film .section-subtitle, html.hx .hx-rg .section-subtitle { font: 400 16px/1.7 var(--hx-sans); color: rgba(244, 236, 222, .74); max-width: 52ch; margin: 0 auto; }
html.hx .hx-film .fs-film { max-width: none; margin: 0; transform-origin: 50% 0; will-change: transform; }
html.hx .hx-film .fs-film-stage { border: 0; border-radius: 20px; background: #000; box-shadow: 0 60px 140px -40px rgba(0, 0, 0, .95); }
html.hx .hx-film .fs-film-poster img { filter: none; }
html.hx .hx-film .fs-film-poster::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(11, 10, 9, .15), rgba(11, 10, 9, .7)); pointer-events: none; }
html.hx .hx-film .fs-film-play { z-index: 1; width: clamp(84px, 9vw, 128px); height: clamp(84px, 9vw, 128px); margin: 0; transform: translate(-50%, -50%); background: rgba(11, 10, 9, .55);
  border: 1px solid rgba(214, 177, 106, .7); box-shadow: 0 0 0 12px rgba(214, 177, 106, .08); transition: background .3s; display: grid; place-items: center; }
@media (min-width: 900px) and (pointer: fine) { html.hx .hx-film .fs-film-play { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); background: rgba(11, 10, 9, .45); } }
html.hx .hx-film .fs-film-poster:hover .fs-film-play { background: rgba(214, 177, 106, .25); }
html.hx .hx-film .fs-film-play svg { width: 44%; height: 44%; fill: var(--hx-gold2); margin-left: 6%; }
html.hx .hx-film .fs-film-title { z-index: 1; background: none; padding: 0; left: clamp(18px, 3vw, 36px); bottom: clamp(16px, 3vw, 32px); font: 600 14px/1 var(--hx-sans); color: var(--hx-tx); }
html.hx .hx-film .fs-film-consent { z-index: 3; background: rgba(8, 7, 6, .94); }
html.hx .hx-film .fs-film-consent p { color: rgba(244, 236, 222, .8); font-family: var(--hx-sans); }
html.hx .hx-film .fs-film-btns .btn { border-radius: 99px; font-family: var(--hx-sans); }
html.hx .hx-film .svc-actions { display: flex; justify-content: center; margin-top: 34px; }
html.hx .hx-film .svc-actions .btn { display: inline-flex; align-items: center; gap: 10px; padding: 0 0 6px; background: none; border: 0; border-bottom: 1px solid rgba(214, 177, 106, .45); border-radius: 0; box-shadow: none;
  font: 700 14px/1.3 var(--hx-sans); color: var(--hx-gold2); min-height: 0 !important; }
html.hx .hx-film .svc-actions .btn::before, html.hx .hx-film .svc-actions .btn::after { display: none; }

/* ==========================================================================
   06 PAARE (Kreis) · TUNNEL
   ========================================================================== */
.hx-circ { position: relative; }
.hx-on .hx-circ { height: 230vh; }
.hx-circ-stage { position: relative; height: var(--hx-stage-h); min-height: 560px; overflow: hidden; }
.hx-on .hx-circ-stage { position: sticky; top: 0; }
.hx-circ-img { position: absolute; inset: 0; }
.hx-circ-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hx-circ-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 10, 9, .05) 30%, rgba(11, 10, 9, .82)); }
.hx-on .hx-circ-img { clip-path: circle(13% at 50% 50%); }
.hx-on .hx-circ-img img { transform: scale(1.4); will-change: transform; }
.hx-circ-ring { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; transform: translate(-50%, -50%); border-radius: 50%; border: 1px dashed rgba(214, 177, 106, .65); pointer-events: none; opacity: 0; will-change: transform, opacity; }
.hx-circ-txt { position: absolute; left: 0; bottom: 0; padding: clamp(28px, 6vw, 96px); display: flex; flex-direction: column; align-items: flex-start; gap: 22px; max-width: 960px; }
.hx-on .hx-circ-txt { opacity: 0; }

.hx-tunnel { display: none; position: relative; }
.hx-on .hx-tunnel { display: block; height: 460vh; }
.hx-tunnel-stage { position: sticky; top: 0; height: var(--hx-stage-h); overflow: hidden; perspective: 1000px; perspective-origin: 50% 50%; }
.hx-tunnel-mark { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; transform: translate(-50%, -50%); filter: invert(1); opacity: .14; }
.hx-tun { position: absolute; left: 50%; top: 50%; width: clamp(190px, 23vw, 400px); aspect-ratio: 4 / 5; height: auto; object-fit: cover; border-radius: 14px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .85); opacity: 0; visibility: hidden; will-change: transform, opacity; backface-visibility: hidden; }
@media (max-width: 899px) {
  .hx-on .hx-tunnel { height: 320vh; }
  .hx-tun:nth-child(n+11) { display: none; }   /* Handy: 9 statt 15 Bilder */
  .hx-tun { box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .8); }
}

/* ==========================================================================
   07 LEISTUNGEN: gestapelte Karten
   ========================================================================== */
.hx-services { padding: clamp(100px, 12vw, 180px) var(--hx-pad-x) clamp(60px, 8vw, 100px); }
.hx-head2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 28px 64px; align-items: end; }
.hx-cards { margin-top: 64px; display: flex; flex-direction: column; gap: 28px; }
.hx-card { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); min-height: min(560px, 74vh); background: var(--hx-card); border: 1px solid rgba(244, 236, 222, .09);
  border-radius: 24px; overflow: hidden; color: var(--hx-tx) !important; text-decoration: none; transform-origin: 50% 0; box-shadow: 0 -24px 60px -30px rgba(0, 0, 0, .9); transition: border-color .3s; position: relative; }
.hx-card:hover { border-color: rgba(214, 177, 106, .4); }
.hx-card-dim { position: absolute; inset: 0; z-index: 3; background: #000; opacity: 0; pointer-events: none; border-radius: inherit; }
.hx-on .hx-card { position: sticky; }
.hx-on .hx-card:nth-child(1) { top: 96px; } .hx-on .hx-card:nth-child(2) { top: 112px; } .hx-on .hx-card:nth-child(3) { top: 128px; }
.hx-on .hx-card:nth-child(4) { top: 144px; } .hx-on .hx-card:nth-child(5) { top: 160px; } .hx-on .hx-card:nth-child(6) { top: 176px; }
.hx-card-img { position: relative; min-height: 260px; overflow: hidden; }
.hx-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hx-card-body { padding: clamp(26px, 3.6vw, 56px); display: flex; flex-direction: column; gap: 20px; justify-content: center; }
.hx-card-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.hx-card-num { font: 700 12px/1 var(--hx-sans); letter-spacing: .14em; color: rgba(244, 236, 222, .45); }
.hx-card-body > p { font: 400 15.5px/1.7 var(--hx-sans); color: rgba(244, 236, 222, .76); text-wrap: pretty; }
.hx-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.hx-tags span { padding: 8px 12px; border-radius: 99px; background: rgba(244, 236, 222, .06); font: 600 12.5px/1 var(--hx-sans); color: rgba(244, 236, 222, .86); }
.hx-card-price { font: 500 14.5px/1.5 var(--hx-sans); color: rgba(244, 236, 222, .8); }
.hx-card-price strong { color: var(--hx-gold3); font-weight: 800; }
.hx-allcard { margin-top: 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 24px 48px; align-items: center; padding: clamp(28px, 4vw, 56px); border-radius: 24px;
  border: 1px solid rgba(214, 177, 106, .35); background: radial-gradient(ellipse at 100% 0%, rgba(214, 177, 106, .12), transparent 60%), #100e0d; }
.hx-allcard .hx-btn { justify-self: start; }
@media (max-width: 899px) {
  .hx-card { min-height: 0; }
  .hx-card-img { min-height: 220px; aspect-ratio: 16 / 10; }
  /* Handy: Karten sind oft höher als der Bildschirm – nicht stapeln, sonst verdeckt die nächste Karte Preis und Link */
  .hx-on .hx-card:nth-child(n) { position: relative; top: auto; }
  .hx-card-body { padding: 24px 22px 28px; gap: 16px; }
}

/* 08/09 */
.hx-duo { padding: clamp(60px, 8vw, 120px) var(--hx-pad-x); }
.hx-duo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(48px, 6vw, 96px); }
.hx-duo-item { display: flex; flex-direction: column; gap: 22px; }
.hx-duo-item .hx-eyebrow { margin-top: 8px; }
@media (min-width: 900px) { .hx-duo-item--low { padding-top: clamp(0px, 10vw, 180px); } }

/* Filmstreifen */
.hx-strips { padding: 30px 0 clamp(90px, 10vw, 150px); overflow: hidden; }
.hx-strips-rot { transform: rotate(-4deg); display: flex; flex-direction: column; gap: 24px; margin: 40px -6vw; }
.hx-strip-row { background: #050404; padding: 26px 0; position: relative; overflow: hidden; }
.hx-strip-row::before, .hx-strip-row::after { content: ""; position: absolute; left: 0; right: 0; height: 10px; background: repeating-linear-gradient(90deg, rgba(244, 236, 222, .16) 0 14px, transparent 14px 30px); }
.hx-strip-row::before { top: 8px; } .hx-strip-row::after { bottom: 8px; }
.hx-strip { display: flex; gap: 12px; width: max-content; position: relative; left: 50%; transform: translateX(-50%); will-change: transform; }
.hx-strip img { flex: none; width: clamp(200px, 22vw, 340px); aspect-ratio: 3 / 2; height: auto; object-fit: cover; border-radius: 3px; }
@media (max-width: 899px) { .hx-strip img { width: 46vw; } }

/* ==========================================================================
   10 PREISE · 11 ABLAUF · 12 TREUE (Karten mit Spotlight)
   ========================================================================== */
.hx-head-center { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; }
.hx-head-center .hx-body { margin: 0 auto; }
.hx-grid3 { margin-top: 64px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 20px; align-items: stretch; }
[data-spot] { position: relative; overflow: hidden; }
[data-spot]::before { content: ""; position: absolute; inset: 0; background: radial-gradient(440px circle at var(--mx, -500px) var(--my, -500px), rgba(214, 177, 106, .16), transparent 60%); pointer-events: none; z-index: 0; }
[data-spot] > * { position: relative; z-index: 1; }
.hx-price { border-radius: 24px; padding: clamp(28px, 3vw, 40px); background: var(--hx-card); border: 1px solid var(--hx-line); display: flex; flex-direction: column; gap: 18px; }
.hx-price--hi { background: linear-gradient(180deg, #1c1813, #121010); border-color: rgba(214, 177, 106, .55); box-shadow: 0 40px 100px -40px rgba(214, 177, 106, .35); }
.hx-price-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 24px; }
.hx-pop { padding: 7px 12px; border-radius: 99px; background: var(--hx-gold); color: var(--hx-on-gold); font: 800 10.5px/1 var(--hx-sans); letter-spacing: .14em; text-transform: uppercase; }
.hx-cat { font: italic 400 18px/1 var(--hx-serif); color: var(--hx-gold2); }
.hx-amount { display: flex; align-items: baseline; gap: 10px; }
.hx-amount small { font: 600 14px/1 var(--hx-sans); color: rgba(244, 236, 222, .62); }
.hx-amount span { font: 400 76px/.9 var(--hx-serif); color: var(--hx-tx); }
.hx-cb { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: rgba(214, 177, 106, .1); font: 600 13px/1.35 var(--hx-sans); color: var(--hx-gold3); }
.hx-cb .hx-i { font-size: 17px; }
.hx-price-sub { font: 500 13.5px/1.6 var(--hx-sans); color: rgba(244, 236, 222, .68); }

.hx-steps-sec .hx-head-left { max-width: 860px; gap: 24px; }
.hx-steps-grid { margin-top: 64px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: clamp(40px, 6vw, 96px); align-items: start; }
.hx-steps { position: relative; }
.hx-steps-line { position: absolute; left: 23.5px; top: 40px; bottom: 40px; width: 1px; background: rgba(244, 236, 222, .12); }
.hx-steps-line i { position: absolute; inset: 0; background: var(--hx-grad); transform-origin: 50% 0; transform: scaleY(0); }
html:not(.hx-on) .hx-steps-line i { transform: none; }
.hx-steps ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.hx-steps li { position: relative; display: flex; gap: 22px; align-items: center; padding: 14px 0; transition: opacity .5s; }
.hx-on .hx-steps li { opacity: .42; }
.hx-on .hx-steps li.is-on { opacity: 1; }
.hx-step-dot { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--hx-gold); display: grid; place-items: center; font: 400 22px/1 var(--hx-serif); color: var(--hx-gold); background: var(--hx-bg);
  transition: background .5s, color .5s, box-shadow .5s; }
.hx-steps li.is-on .hx-step-dot, html:not(.hx-on) .hx-step-dot { background: var(--hx-gold); color: var(--hx-on-gold); box-shadow: 0 0 0 6px rgba(214, 177, 106, .14), 0 0 34px rgba(214, 177, 106, .45); }
.hx-steps li > span:last-child { font: 400 clamp(16px, 1.3vw, 19px)/1.45 var(--hx-sans); color: rgba(244, 236, 222, .84); }
.hx-steps strong { color: var(--hx-tx); font-weight: 800; }
.hx-avail { position: sticky; top: 110px; border-radius: 24px; padding: clamp(28px, 3.4vw, 48px); background: radial-gradient(ellipse at 0% 0%, rgba(214, 177, 106, .14), transparent 55%), var(--hx-card);
  border: 1px solid rgba(214, 177, 106, .3); display: flex; flex-direction: column; gap: 20px; }
.hx-live { display: flex; align-items: center; gap: 8px; font: 700 11px/1 var(--hx-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--hx-wa); }
.hx-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--hx-wa); box-shadow: 0 0 0 4px rgba(37, 211, 102, .2); }

.hx-loyal { background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(214, 177, 106, .08), transparent 70%); }
.hx-panel { border-radius: 24px; padding: clamp(28px, 3vw, 40px); background: var(--hx-card); border: 1px solid var(--hx-line); display: flex; flex-direction: column; gap: 18px; transition: border-color .3s; }
.hx-panel--link { color: var(--hx-tx) !important; text-decoration: none; gap: 16px; }
.hx-panel--link:hover { border-color: rgba(214, 177, 106, .45); }
.hx-panel-top { display: flex; justify-content: space-between; align-items: center; }
.hx-panel-ic { font-size: 34px; color: var(--hx-gold); font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 40; }
[data-tilt] { transition: transform .5s var(--hx-ease); }
.adj-mark { color: var(--hx-gold3); font-weight: 700; background: rgba(214, 177, 106, .12); padding: 1px 5px; border-radius: 4px; }

/* ==========================================================================
   13 PRODUKTE (3D-Silhouette)
   ========================================================================== */
.hx-prod-grid { margin-top: 56px; display: flex; flex-wrap: wrap; gap: 20px; }
.hx-sil { flex: 2 1 560px; min-height: 640px; position: relative; border-radius: 24px; overflow: hidden; background: radial-gradient(ellipse at 50% 38%, #2c251d, #0f0d0c 70%);
  border: 1px solid var(--hx-line); display: flex; flex-direction: column; justify-content: flex-end; }
.hx-3d--sil { inset: 0 0 26% 0; touch-action: pan-y; }
.hx-3d--sil.is-3d { cursor: grab; }
.hx-3d--sil.is-drag { cursor: grabbing; }
.hx-3d-fallback--sil { inset: 6% 20%; width: 60%; height: 88%; filter: invert(1) sepia(.5); mix-blend-mode: screen; opacity: .7; }
.hx-sil-hint { position: absolute; top: 20px; left: 20px; display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 99px; background: rgba(11, 10, 9, .7); border: 1px solid rgba(244, 236, 222, .12);
  font: 600 12px/1 var(--hx-sans); color: rgba(244, 236, 222, .86); pointer-events: none; opacity: 0; transition: opacity .6s; }
.hx-sil-hint .hx-i { font-size: 18px; color: var(--hx-gold); }
.hx-sil.is-3d .hx-sil-hint { opacity: 1; }
@media (min-width: 900px) and (pointer: fine) { .hx-sil-hint { background: rgba(11, 10, 9, .6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } }
.hx-sil-body { position: relative; padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 12px; background: linear-gradient(180deg, rgba(15, 13, 12, 0), rgba(15, 13, 12, .92) 40%); pointer-events: none; }
.hx-sil-body a { pointer-events: auto; margin-top: 6px; }
.hx-sil-body .hx-body { max-width: 52ch; }
.hx-prod-side { flex: 1 1 320px; display: flex; flex-direction: column; gap: 20px; }
.hx-prod { flex: 1; display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; background: var(--hx-card); border: 1px solid var(--hx-line); color: var(--hx-tx) !important; text-decoration: none; transition: border-color .3s, transform .5s var(--hx-ease); }
.hx-prod:hover { border-color: rgba(214, 177, 106, .45); }
.hx-prod-img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--hx-ph); }
.hx-prod-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--hx-ease); }
.hx-prod:hover .hx-prod-img img { transform: scale(1.05); }
.hx-prod-body { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 10px; }
.hx-prod-body p { font: 400 14.5px/1.65 var(--hx-sans); color: rgba(244, 236, 222, .74); }
.hx-prod-body .hx-more { margin-top: 4px; }
.hx-shop { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; padding: clamp(26px, 3vw, 40px); border-radius: 24px;
  background: radial-gradient(ellipse at 0% 50%, rgba(214, 177, 106, .14), transparent 55%), var(--hx-card); border: 1px solid rgba(214, 177, 106, .3); color: var(--hx-tx) !important; text-decoration: none; transition: border-color .3s; }
.hx-shop:hover { border-color: var(--hx-gold); }
.hx-shop-l { display: flex; align-items: center; gap: 22px; flex: 1 1 420px; }
.hx-shop .hx-body { max-width: none; }
@media (max-width: 899px) { .hx-sil { min-height: 560px; flex-basis: 100%; } .hx-shop-l { flex-basis: 100%; align-items: flex-start; } }

/* ==========================================================================
   14 KUNDENSTIMMEN
   ========================================================================== */
.hx-rating-line { font: 600 14px/1.5 var(--hx-sans); color: var(--hx-gold); }
.hx-quote { margin: clamp(48px, 6vw, 88px) 0 0; max-width: 1120px; }
.hx-quote-mark { font: 400 clamp(120px, 14vw, 200px)/.5 var(--hx-serif); color: var(--hx-gold); height: .45em; }
.hx-quote-text { margin: 0; font: 400 clamp(24px, 2.7vw, 42px)/1.3 var(--hx-serif); color: var(--hx-tx); }
.hx-quote-text p { margin: 0 0 .7em !important; }
.hx-quote-text p:last-child { margin-bottom: 0 !important; }
.hx-w { display: inline; opacity: .16; transition: opacity .25s linear; }
.hx-w.is-on { opacity: 1; }
.hx-quote-by { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.hx-avatar { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: rgba(214, 177, 106, .14); border: 1px solid rgba(214, 177, 106, .5); font: 400 24px/1 var(--hx-serif); color: var(--hx-gold2); }
.hx-quote-who { display: flex; flex-direction: column; gap: 6px; }
.hx-quote-who strong { font: 700 16px/1 var(--hx-sans); }
.hx-quote-who > span { display: flex; align-items: center; gap: 6px; font: 500 13px/1.2 var(--hx-sans); color: rgba(244, 236, 222, .64); }
.hx-quote-who .hx-i { font-size: 16px; }
.hx-review-cards { margin-top: clamp(56px, 7vw, 96px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 20px; align-items: start; }
.hx-review { margin: 0; padding: clamp(26px, 3vw, 40px); border-radius: 24px; background: var(--hx-card); border: 1px solid var(--hx-line); display: flex; flex-direction: column; gap: 22px; }
.hx-review-text { margin: 0; display: flex; flex-direction: column; gap: 14px; font: 400 15.5px/1.7 var(--hx-sans); color: rgba(244, 236, 222, .86); }
.hx-review-text--big { font: 400 clamp(22px, 2vw, 30px)/1.3 var(--hx-serif); color: var(--hx-tx); }
.hx-review .hx-quote-who strong { font-size: 15px; }
.hx-review-all { margin-top: 36px; }

/* ==========================================================================
   15 KUNDEN · RATGEBER (Block aus build_ratgeber.cjs) · 16 FAQ · 17 KONTAKT
   ========================================================================== */
.hx-cust { padding: clamp(80px, 10vw, 140px) var(--hx-pad-x); }
.hx-rg { padding: clamp(60px, 8vw, 120px) var(--hx-pad-x); }
html.hx .hx-rg .section { padding: 0; background: none; }
html.hx .hx-rg .container { max-width: 1320px; padding: 0; }
html.hx .hx-rg .text-center { text-align: left; display: flex; flex-direction: column; gap: 22px; margin-bottom: 48px !important; }
html.hx .hx-rg .section-tag::before { content: 'menu_book'; font-family: 'Material Symbols Rounded'; font-size: 18px; font-weight: 400; letter-spacing: 0; text-transform: none; animation: none; font-feature-settings: 'liga'; }
html.hx .hx-rg .section-title { font-size: clamp(40px, 5vw, 80px) !important; line-height: .98 !important; }
html.hx .hx-rg .section-subtitle { margin: 0 !important; }
html.hx .hx-rg .rg-grid { gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
html.hx .hx-rg .rg-card { display: flex; flex-direction: column; border-radius: 22px; background: var(--hx-card); border: 1px solid var(--hx-line); color: var(--hx-tx); transform: none; }
html.hx .hx-rg .rg-card:hover { border-color: rgba(214, 177, 106, .45); transform: none; }
html.hx .hx-rg .rg-card img { aspect-ratio: 3 / 2; height: auto; transition: transform 1.2s var(--hx-ease); }
html.hx .hx-rg .rg-card:hover img { transform: scale(1.06); }
html.hx .hx-rg .rg-card .rg-card-body { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 12px; position: relative; background: var(--hx-card); }
html.hx .hx-rg .rg-card .section-tag { font-size: 11px !important; letter-spacing: .2em; }
html.hx .hx-rg .rg-card .section-tag::before { display: none; }
html.hx .hx-rg .rg-card h3 { font: 400 28px/1.1 var(--hx-serif) !important; color: var(--hx-tx); margin: 0; text-wrap: balance; }
html.hx .hx-rg .rg-card p { font: 400 14.5px/1.65 var(--hx-sans); color: rgba(244, 236, 222, .72); }
html.hx .hx-rg .text-center + .rg-grid + p, html.hx .hx-rg .rg-grid + p { text-align: left !important; margin-top: 32px !important; }
html.hx .hx-rg .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 99px; border: 1px solid rgba(244, 236, 222, .2); background: none; color: var(--hx-tx); font: 700 14px/1 var(--hx-sans); box-shadow: none; }
html.hx .hx-rg .btn:hover { border-color: var(--hx-gold); }

.hx-faq { padding: clamp(80px, 10vw, 140px) var(--hx-pad-x); }
.hx-faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: clamp(40px, 6vw, 96px); align-items: start; }
@media (min-width: 900px) { .hx-faq-head { position: sticky; top: 120px; } }
.hx-faq-head { gap: 24px; }
.hx-faq-list { border-top: 1px solid rgba(244, 236, 222, .12); }
.hx-faq-list details { border-bottom: 1px solid rgba(244, 236, 222, .12); }
.hx-faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 26px 0; font: 400 clamp(21px, 2vw, 28px)/1.25 var(--hx-serif); color: var(--hx-tx); transition: color .25s; }
.hx-faq-list summary::-webkit-details-marker { display: none; }
.hx-faq-list summary:hover { color: var(--hx-gold3); }
.hx-faq-plus { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(214, 177, 106, .5); display: grid; place-items: center; color: var(--hx-gold); transition: transform .45s var(--hx-ease); }
.hx-faq-plus .hx-i { font-size: 22px; }
.hx-faq-list details[open] .hx-faq-plus { transform: rotate(45deg); }
.hx-faq-list details p { margin: 0 0 28px !important; max-width: 68ch; font: 400 16px/1.75 var(--hx-sans); color: rgba(244, 236, 222, .78); }
.hx-chips--faq a { font-weight: 600; font-size: 13px; }

.hx-contact { padding: clamp(100px, 12vw, 180px) var(--hx-pad-x); overflow: hidden; }
.hx-contact-glow { position: absolute; inset: 0; background: radial-gradient(ellipse 50% 60% at 80% 50%, rgba(214, 177, 106, .12), transparent 70%); }
.hx-contact-grid { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: clamp(48px, 6vw, 96px); align-items: center; }
.hx-contact .hx-stack { gap: 28px; }
html.hx .hx-h2--contact { color: var(--hx-gold3); background: url(/images/portfolio/paar-sonnenuntergang-640.webp) center 50% / cover; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
@media (min-width: 900px) { html.hx .hx-h2--contact { background-image: url(/images/portfolio/paar-sonnenuntergang.webp); } }
.hx-contact-lines { display: flex; flex-wrap: wrap; gap: 12px 28px; font: 500 14.5px/1.4 var(--hx-sans); color: rgba(244, 236, 222, .8); }
.hx-contact-lines > span { display: flex; align-items: center; gap: 8px; }
.hx-contact-lines a { color: inherit; text-decoration: none; }
.hx-contact-lines a:hover { color: var(--hx-gold2); }
.hx-contact-lines .hx-i { font-size: 19px; }
.hx-portrait { position: relative; aspect-ratio: 1; width: 100%; max-width: 560px; justify-self: center; }
.hx-portrait-ring { --r: .24; background: repeating-conic-gradient(from 0deg, rgba(244, 236, 222, .24) 0deg .5deg, transparent .5deg 3deg); transition: none; will-change: transform; }
.hx-portrait-glass img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }

/* ==========================================================================
   FUSSZEILE (footer.html über tools/lib_homenav.cjs) · HANDY-LEISTE · WHATSAPP
   ========================================================================== */
html.hx .hx-footer { border-top: 1px solid rgba(244, 236, 222, .08); padding: clamp(64px, 8vw, 110px) var(--hx-pad-x) 120px; background: var(--hx-foot); overflow: hidden; margin: 0; color: var(--hx-tx); }
html.hx .hx-footer .container { max-width: 1320px; padding: 0; display: flex; flex-direction: column; gap: 56px; }
html.hx .hx-footer .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 40px 32px; margin: 0; padding: 0; border: 0; }
@media (min-width: 1100px) { html.hx .hx-footer .footer-grid { grid-template-columns: minmax(0, 1.25fr) repeat(4, minmax(0, 1fr)); } }
html.hx .hx-footer .footer-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
html.hx .hx-footer .footer-col:first-child { gap: 18px; }
html.hx .hx-footer .footer-col:first-child > div:first-child { display: flex; align-items: center; gap: 12px; }
html.hx .hx-footer .footer-col:first-child img { width: 40px; height: 40px; object-fit: contain; filter: invert(1) brightness(1.2); }
html.hx .hx-footer .brand-title { font: 300 16px/1.2 var(--hx-brand) !important; letter-spacing: .2em; color: var(--hx-tx); }
html.hx .hx-footer .brand-title span { color: inherit; font: inherit; }
html.hx .hx-footer .footer-col:first-child > p { margin: 0; font: 400 14px/1.65 var(--hx-sans); color: rgba(244, 236, 222, .68); }
html.hx .hx-footer .footer-col h2 { margin: 0 0 4px; font: 700 11px/1 var(--hx-sans) !important; letter-spacing: .24em; text-transform: uppercase; color: var(--hx-gold); }
html.hx .hx-footer .footer-links { display: flex; flex-direction: column; gap: 12px; }
html.hx .hx-footer .footer-links a { display: flex; align-items: center; gap: 8px; font: 500 14px/1.35 var(--hx-sans); color: rgba(244, 236, 222, .78); text-decoration: none; transform: none; }
html.hx .hx-footer .footer-col:first-child .footer-links a { color: var(--hx-tx); }
html.hx .hx-footer .footer-links a:hover { color: var(--hx-gold2); transform: none; }
html.hx .hx-footer .footer-links .hx-i { font-size: 17px; color: var(--hx-gold); }
html.hx .hx-footer .footer-links a[href*="wa.me"] .hx-i { color: var(--hx-wa); }
html.hx .hx-footer .hx-foot-hl { color: var(--hx-gold2) !important; font-weight: 700 !important; }
html.hx .hx-footer .footer-social-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
html.hx .hx-footer .social-icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 99px; border: 1px solid rgba(244, 236, 222, .14); background: none; color: rgba(244, 236, 222, .86); transition: border-color .25s, color .25s; }
html.hx .hx-footer .social-icon-btn:hover { border-color: var(--hx-gold); color: var(--hx-gold2); transform: none; }
html.hx .hx-footer .social-icon-btn svg { width: 16px; height: 16px; }
html.hx .hx-footer .seo-cloud { order: 1; margin: 0; padding: 28px 0 0; border-top: 1px solid rgba(244, 236, 222, .08); font: 400 13px/1.9 var(--hx-sans); color: rgba(244, 236, 222, .62); text-align: left; background: none; }
html.hx .hx-footer .seo-cloud strong { color: rgba(244, 236, 222, .86); }
html.hx .hx-footer .seo-cloud a { color: rgba(244, 236, 222, .74); text-decoration: none; }
html.hx .hx-footer .seo-cloud a:hover { color: var(--hx-gold2); }
html.hx .hx-footer .container::after { content: "FIVE STARS"; order: 2; font: 100 clamp(64px, 17vw, 280px)/.8 var(--hx-brand); letter-spacing: .06em; color: rgba(244, 236, 222, .07); white-space: nowrap; text-align: center; pointer-events: none; }
html.hx .hx-footer .footer-bottom { order: 3; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin: 0; padding: 0; border: 0; font: 500 13px/1.4 var(--hx-sans); color: rgba(244, 236, 222, .6); }
html.hx .hx-footer .footer-bottom a { display: inline-flex; align-items: center; gap: 6px; color: rgba(244, 236, 222, .78) !important; font-size: 13px !important; font-weight: 500 !important; text-decoration: none; }
html.hx .hx-footer .footer-bottom a .hx-i { color: var(--hx-gold); font-size: 16px; }
html.hx .hx-footer .footer-bottom a:hover { color: var(--hx-gold2) !important; }

/* Handy-Leiste (mobile-bar.html) im neuen Design – nur < 900 px; Desktop: WhatsApp-Knopf */
html.hx .mobile-bottom-bar { display: none !important; }
html.hx .floating-whatsapp { position: fixed; right: 24px; bottom: 24px; z-index: 900; display: inline-flex !important; align-items: center; gap: 9px; padding: 15px 20px; border-radius: 99px; background: var(--hx-wa);
  color: var(--hx-on-wa) !important; font: 700 14.5px/1 var(--hx-sans); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7); animation: none; transition: transform .25s; }
html.hx .floating-whatsapp:hover { transform: translateY(-2px); background: var(--hx-wa); }
html.hx .floating-whatsapp svg { width: 20px; height: 20px; }
@media (max-width: 899px) {
  html.hx body { padding-bottom: calc(86px + env(safe-area-inset-bottom)) !important; }
  html.hx .floating-whatsapp { display: none !important; }
  html.hx .mobile-bottom-bar { display: block !important; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); width: auto; padding: 6px; border-radius: 20px; z-index: 950;
    background: rgba(19, 17, 16, .96); -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid rgba(244, 236, 222, .1); box-shadow: 0 20px 50px -10px rgba(0, 0, 0, .8); transition: transform .35s var(--hx-ease); }
  html.hx .mobile-bottom-nav-grid { grid-template-columns: repeat(4, 1fr); gap: 4px; }
  html.hx .mobile-bottom-btn { min-height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: 14px; padding: 0; background: none; border: 0;
    color: var(--hx-tx); font: 700 11px/1 var(--hx-sans); box-shadow: none; }
  html.hx .mobile-bottom-btn svg { width: 21px; height: 21px; color: var(--hx-gold); }
  html.hx .mobile-bottom-btn.highlight-wa { background: var(--hx-wa); color: var(--hx-on-wa); }
  html.hx .mobile-bottom-btn.highlight-wa svg { color: var(--hx-on-wa); }
  html.hx .mobile-bottom-btn.highlight-builder { background: var(--hx-grad); color: var(--hx-on-gold); }
  html.hx .mobile-bottom-btn.highlight-builder svg { color: var(--hx-on-gold); }
  html.hx-menu-open .mobile-bottom-bar { transform: translateY(140%); }
}

/* Saison-Elemente aus js/main.js über der Handy-Leiste */
@media (max-width: 899px) { html.hx .fs-advent-pill { bottom: calc(100px + env(safe-area-inset-bottom)); } }

/* ==========================================================================
   EINBLENDEN & PARALLAX (nur mit Effekten; Startzustand setzt js/home-fx.js, damit ohne JS alles sichtbar bleibt)
   ========================================================================== */
.hx-on [data-rv].hx-rv-pre { opacity: 0; transform: translate3d(0, var(--rv-y, 48px), 0); }
.hx-on [data-rv].hx-rv-in { opacity: 1; transform: none; transition: opacity 1s cubic-bezier(.2, .7, .2, 1) var(--rv-d, 0ms), transform 1.2s cubic-bezier(.2, .7, .2, 1) var(--rv-d, 0ms); }
.hx-on [data-par] { will-change: transform; }

/* ==========================================================================
   RUHIGE DARSTELLUNG (Bewegung reduzieren / ?bewegung=aus / ohne JS)
   ========================================================================== */
html:not(.hx-on) .hx-hero-photo { clip-path: circle(min(20vw, 30vh) at 72% 56%); }
@media (max-width: 899px) { html:not(.hx-on) .hx-hero-photo { clip-path: circle(min(34vw, 18vh) at 50% 28%); } }
html:not(.hx-on) .hx-hero-img { transform: scale(1.05); }
html:not(.hx-on) .hx-circ-txt { opacity: 1; }
html.hx-static *, html.hx-static *::before, html.hx-static *::after { scroll-behavior: auto !important; }
@media print { .hx-header, .hx-menu, .hx-dust, .hx-hero-canvas, .mobile-bottom-bar, .floating-whatsapp { display: none !important; } .hx-on .hx-hero, .hx-on .hx-stats, .hx-on .hx-circ, .hx-on .hx-tunnel { height: auto; } }