/* ==========================================================================
   WAHL FINANCE — Redesign 2026
   Farbwelt: Schwarz / Weiss / Gold (#C9A84C)
   Typografie: Fraunces (Display) + Inter (Text)
   ========================================================================== */

:root {
  --bg:      #0C0C0E;
  --bg-2:    #0C0C0E;   /* einheitlicher Seitenhintergrund – kein Hell-Dunkel-Wechsel mehr */
  --bg-3:    #17171A;
  --card:    #1A1A1F;
  --card-2:  #212127;
  --line:    rgba(255,255,255,.11);
  --line-2:  rgba(201,168,76,.32);
  --gold:    #C9A84C;
  --gold-2:  #E3C87E;
  --gold-dim:rgba(201,168,76,.13);
  --txt:     #F6F4EE;
  --mut:     #B4B0A8;
  --mut-2:   #8D8A83;
  --green:   #7FB98A;
  --fd: 'Fraunces', 'Times New Roman', serif;
  --fs: 'Inter', -apple-system, 'Helvetica Neue', sans-serif;
  --ez: cubic-bezier(.22,.8,.28,1);
  --r:  14px;
  --r-sm: 9px;
  --nav-h: 76px;
  --shadow-gold: 0 8px 40px -12px rgba(201,168,76,.35);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body {
  background:var(--bg);
  color:var(--txt);
  font-family:var(--fs);
  font-size:16px;
  line-height:1.65;
  font-weight:350;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img { max-width:100%; display:block }
a { color:inherit; text-decoration:none }
ul { list-style:none }
button { font-family:inherit; cursor:pointer }
::selection { background:var(--gold); color:#000 }

/* Tastatur-Navigation: sichtbarer goldener Fokus-Ring (WCAG) */
:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:4px;
}
/* Schnellere Tap-Reaktion auf Touch-Geräten (kein 300ms-Delay) */
a, button { touch-action:manipulation }

.W { width:min(1200px, 92%); margin-inline:auto }

/* ── Typography ──────────────────────────────────────────────────────── */
.eyebrow {
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.72rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold);
  margin-bottom:1.1rem;
}
.eyebrow::before { content:''; width:26px; height:1px; background:var(--gold) }

.HD {
  font-family:var(--fd);
  font-weight:340;
  font-size:clamp(1.9rem, 4vw, 3rem);
  line-height:1.12;
  letter-spacing:-.01em;
  margin-bottom:1.1rem;
}
.HD em { font-style:italic; color:var(--gold-2); font-weight:380 }

.sub  { color:var(--mut); font-size:1.02rem; max-width:56ch }
.bd   { color:var(--mut); margin-bottom:1rem; max-width:62ch }
.bd--em { color:var(--txt); font-weight:450 }
.bd strong { color:var(--txt) }

.sect-head { text-align:center; margin-bottom:3.2rem }
.sect-head .sub { margin-inline:auto }
.sect-head--left { text-align:left }
.sect-head--left .sub { margin-inline:0 }

section { padding:clamp(4.5rem, 8vw, 7.5rem) 0; position:relative }
/* Sektionen transparent: der Seitenhintergrund (inkl. Hintergrund-Motiv) scheint durch */
.sect--dk  { background:transparent }
.sect--line { border-top:1px solid var(--line) }

.rule { width:44px; height:2px; background:var(--gold); margin-bottom:1.6rem }

/* ── Lebendiger Hintergrund hinter den Inhalten (Weiss/Silber) ───────────
   Fixe Ebene ganz hinten. Weiches, kühles Licht wandert beim Scrollen langsam
   durch die dunklen Bereiche. Weiss führt, kein Gold – sehr dezent, seriös. */
.ambient { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden }
.amb-glow { position:absolute; border-radius:50%; filter:blur(80px); will-change:transform }
.amb-glow--1 {
  width:68vw; height:68vw; left:-14vw; top:2%;
  background:radial-gradient(circle, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 66%);
}
.amb-glow--2 {
  width:54vw; height:54vw; right:-12vw; top:42%;
  background:radial-gradient(circle, rgba(214,222,235,.055) 0%, rgba(214,222,235,0) 66%);
}
.amb-glow--3 {
  width:42vw; height:42vw; left:32vw; top:70%;
  background:radial-gradient(circle, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 68%);
}
@media (max-width: 860px){ .amb-glow{ filter:blur(56px) } }

/* ── Cinematische 3D-Ebene (Three.js) ────────────────────────────────── */
canvas.bgfx3d {
  position:fixed; inset:0; z-index:0;
  width:100%; height:100%;
  pointer-events:none;
  opacity:0; animation:bgfx3dIn 1.8s ease .3s forwards;
}
@keyframes bgfx3dIn { to { opacity:.62 } }
body.gl-on .bgfx { display:none }   /* SVG-Linien nur als Fallback ohne WebGL */
@media (max-width: 860px) {
  canvas.bgfx3d { animation-name:bgfx3dInMobile }
  @keyframes bgfx3dInMobile { to { opacity:.45 } }
}

/* ── Hintergrund-Motive (zeichnen sich beim Scrollen, sehr dezent) ───── */
.bgfx {
  position:fixed; inset:0; z-index:0;
  pointer-events:none; user-select:none;
}
.bgfx svg { width:100%; height:100%; display:block }
.bgfx [data-draw] {
  fill:none;
  stroke:rgba(201,168,76,.14);
  stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.bgfx .bgfx-dot { fill:rgba(201,168,76,.18) }
.bgfx g[data-scene] { transform-origin:60% 50%; will-change:opacity, transform }
@media (max-width: 860px) { .bgfx [data-draw] { stroke-width:1.4 } }
@media (prefers-reduced-motion: reduce) {
  .bgfx g[data-scene] { opacity:1 !important; transform:none !important }
}

/* ── Reveal animations ───────────────────────────────────────────────── */
.rv { opacity:0; transform:translateY(28px); transition:opacity .9s var(--ez), transform .9s var(--ez) }
.rv.in { opacity:1; transform:none }
.rv.d1 { transition-delay:.12s }
.rv.d2 { transition-delay:.24s }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity:1; transform:none; transition:none }
  html { scroll-behavior:auto }
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.BG {
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:.55rem;
  background:linear-gradient(135deg, var(--gold) 0%, #B8963D 100%);
  color:#0B0B0C; font-weight:600; font-size:.9rem; letter-spacing:.01em;
  padding:.95rem 1.7rem; border-radius:var(--r-sm); border:none;
  transition:transform .35s var(--ez), box-shadow .35s var(--ez);
  box-shadow:0 4px 22px -8px rgba(201,168,76,.45);
}
.BG:hover { transform:translateY(-2px); box-shadow:var(--shadow-gold) }
.BG::after {
  content:''; position:absolute; top:0; left:-80%;
  width:50%; height:100%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-20deg);
  transition:left .6s var(--ez);
}
.BG:hover::after { left:130% }
.BG--lg { padding:1.1rem 2.1rem; font-size:.97rem }
.BG--nav { padding:.68rem 1.15rem; font-size:.82rem }

.BO {
  display:inline-flex; align-items:center; gap:.5rem;
  color:var(--txt); font-weight:500; font-size:.9rem;
  padding:.95rem 1.5rem; border-radius:var(--r-sm);
  border:1px solid var(--line);
  transition:border-color .3s, background .3s, transform .35s var(--ez);
  background:rgba(255,255,255,.02);
}
.BO:hover { border-color:var(--line-2); background:var(--gold-dim); transform:translateY(-2px) }

/* ── Navigation ──────────────────────────────────────────────────────── */
/* Navigation: von Anfang an komplett sichtbar (Glas-Optik, nicht erst beim Scrollen) */
#nav {
  position:fixed; inset:0 0 auto 0; z-index:900;
  height:var(--nav-h);
  display:flex; align-items:center;
  background:rgba(10,10,12,.82);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid var(--line);
}
.nw { display:flex; align-items:center; justify-content:space-between; gap:2rem }
.logo img { height:34px; width:auto }
.nl { display:flex; gap:2rem; align-items:center }
.nl a {
  font-size:.86rem; font-weight:450; color:var(--mut);
  transition:color .25s; position:relative; padding:.3rem 0;
}
.nl a::after {
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--gold); transition:width .35s var(--ez);
}
.nl a:hover { color:var(--txt) }
.nl a:hover::after { width:100% }

.ham { display:none; background:none; border:none; width:40px; height:40px; flex-direction:column; justify-content:center; gap:5px; align-items:center }
.ham span { width:22px; height:1.6px; background:var(--txt); transition:transform .35s var(--ez), opacity .3s }
.ham.op span:nth-child(1){ transform:translateY(6.6px) rotate(45deg) }
.ham.op span:nth-child(2){ opacity:0 }
.ham.op span:nth-child(3){ transform:translateY(-6.6px) rotate(-45deg) }

.mn {
  position:fixed; inset:var(--nav-h) 0 auto 0; z-index:890;
  background:rgba(7,7,8,.97); backdrop-filter:blur(20px);
  display:flex; flex-direction:column; padding:1rem 6% 2rem;
  transform:translateY(-110%); transition:transform .5s var(--ez);
  border-bottom:1px solid var(--line);
}
.mn.op { transform:none }
.mn a { padding:1rem 0; border-bottom:1px solid var(--line); font-size:1rem; color:var(--txt) }
.mn a:last-child { border-bottom:none; color:var(--gold); font-weight:600 }

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero { min-height:100svh; display:flex; align-items:center; padding-top:var(--nav-h); overflow:hidden }
.hero-layer { position:absolute; inset:0; pointer-events:none }

.hero-bg--index {
  background:
    radial-gradient(ellipse 60% 70% at 75% 28%, rgba(201,168,76,.09) 0%, transparent 60%),
    linear-gradient(rgba(4,4,5,.62), rgba(7,7,8,.86)),
    url('../images/matterhornschweiz.jpg') center / cover no-repeat #080808;
  filter:saturate(.7);
}
.hero-bg--immobilien {
  background:
    radial-gradient(ellipse 55% 65% at 80% 30%, rgba(201,168,76,.08) 0%, transparent 60%),
    linear-gradient(to right, rgba(4,4,5,.88) 0%, rgba(4,4,5,.82) 42%, rgba(4,4,5,.5) 100%),
    url('../images/immobiliendunkeldeutschland.jpg') center / cover no-repeat #080808;
  filter:saturate(.7);
}
.hero-bg--edelmetalle {
  background:
    radial-gradient(ellipse 60% 70% at 70% 25%, rgba(201,168,76,.1) 0%, transparent 58%),
    linear-gradient(to right, rgba(4,4,5,.88) 0%, rgba(4,4,5,.82) 42%, rgba(4,4,5,.5) 100%),
    url('../images/matterhornschweiz.jpg') center / cover no-repeat #080808;
  filter:saturate(.7);
}
.hero-grid {
  background-image:
    linear-gradient(rgba(201,168,76,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,.025) 1px, transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse 70% 70% at 55% 40%, black 0%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 55% 40%, black 0%, transparent 80%);
}
.hero-fade { background:linear-gradient(transparent 78%, var(--bg) 100%) }

.hero-inner { position:relative; z-index:2; padding-block:90px 70px }
.hero-inner--cols { display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center }

.hero-badge {
  display:inline-flex; align-items:center; gap:.55rem;
  border:1px solid var(--line-2); border-radius:99px;
  background:rgba(201,168,76,.07);
  padding:.45rem 1rem; font-size:.75rem; font-weight:500; letter-spacing:.08em;
  color:var(--gold-2); margin-bottom:1.6rem;
}
.hero-badge .dot { width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 0 rgba(201,168,76,.5); animation:pulse 2.4s infinite }
@keyframes pulse {
  0%   { box-shadow:0 0 0 0 rgba(201,168,76,.45) }
  70%  { box-shadow:0 0 0 9px rgba(201,168,76,0) }
  100% { box-shadow:0 0 0 0 rgba(201,168,76,0) }
}

.hero-h1 {
  font-family:var(--fd); font-weight:330;
  font-size:clamp(2.4rem, 5.6vw, 4.3rem);
  line-height:1.06; letter-spacing:-.015em;
  margin-bottom:1.4rem;
}
.hero-h1 em { font-style:italic; color:var(--gold-2) }
.hero-p { color:var(--mut); font-size:clamp(1rem, 1.4vw, 1.13rem); max-width:56ch; margin-bottom:1.6rem }

.hero-quote {
  border-left:2px solid var(--gold);
  padding:.35rem 0 .35rem 1.1rem;
  font-family:var(--fd); font-style:italic; font-size:1.08rem; color:var(--txt);
  margin-bottom:2rem; max-width:52ch;
}
.h-act { display:flex; flex-wrap:wrap; gap:.9rem; align-items:center; margin-bottom:2.6rem }

.hero-trust { display:flex; flex-wrap:wrap; gap:1.4rem 2rem; margin-bottom:2.4rem }
.hero-trust span { display:inline-flex; align-items:center; gap:.5rem; font-size:.8rem; color:var(--mut) }
.hero-trust svg { color:var(--gold); flex:none }

.hero-stats {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; max-width:820px;
}
.hero-stat { background:rgba(10,10,12,.72); backdrop-filter:blur(8px); padding:1.15rem 1.2rem }
.hero-stat-n { font-family:var(--fd); font-size:1.55rem; font-weight:420; color:var(--txt); line-height:1.1 }
.hero-stat-n span { color:var(--gold); font-size:1.05rem }
.hero-stat-l { font-size:.73rem; color:var(--mut-2); margin-top:.3rem; letter-spacing:.02em }

/* ── Detail-Karte (Hero rechts, Unterseiten) ─────────────────────────── */
.detail-card {
  position:relative; background:linear-gradient(160deg, var(--card-2), var(--card));
  border:1px solid var(--line); border-radius:var(--r);
  padding:1.9rem 1.7rem 1.4rem; overflow:hidden;
}
.detail-card::before {
  content:''; position:absolute; inset:0 0 auto 0; height:2px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.detail-card-tag {
  display:inline-block; font-size:.68rem; font-weight:650; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); background:var(--gold-dim); border:1px solid var(--line-2);
  padding:.3rem .7rem; border-radius:99px; margin-bottom:1rem;
}
.detail-card-title { font-family:var(--fd); font-style:italic; font-size:1.25rem; line-height:1.3; margin-bottom:1.3rem }
.detail-row {
  display:flex; align-items:center; gap:.8rem;
  padding:.72rem 0; border-top:1px solid var(--line);
  font-size:.88rem;
}
.detail-row-icon { flex:none; width:30px; height:30px; border-radius:8px; background:var(--gold-dim); display:flex; align-items:center; justify-content:center }
.detail-row-icon svg { width:14px; height:14px; stroke:var(--gold); fill:none; stroke-width:1.8 }
.detail-row-key { color:var(--mut); flex:1 }
.detail-row-val { font-weight:550 }
.detail-row-val--gold  { color:var(--gold-2) }
.detail-row-val--green { color:var(--green) }
.detail-note { font-size:.72rem; color:var(--mut-2); padding-top:.9rem }

.mini-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; margin-top:.9rem }
.mini-stat { background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm); padding:.85rem .9rem }
.mini-stat-tag { font-size:.65rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mut-2) }
.mini-stat-n { font-family:var(--fd); font-size:1.15rem; margin-top:.15rem }
.mini-stat-sub { font-size:.7rem }
.mini-stat-sub--green { color:var(--green) }
.mini-stat-sub--gold  { color:var(--gold-2) }

/* ── Trust-Stripe ────────────────────────────────────────────────────── */
.ts { border-block:1px solid var(--line); background:transparent; padding:1.4rem 0; position:relative }
.tsi { display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem }
.ti { display:flex; gap:.9rem; align-items:center }
.tic { flex:none; width:42px; height:42px; border-radius:11px; border:1px solid var(--line-2); background:var(--gold-dim); display:flex; align-items:center; justify-content:center }
.tic svg { width:19px; height:19px; stroke:var(--gold); fill:none; stroke-width:1.7 }
.tit { display:flex; flex-direction:column; gap:.1rem }
.tit strong { font-size:.85rem; font-weight:600 }
.tit span { font-size:.74rem; color:var(--mut-2) }

/* ── Identification (Das bist du / Nicht für dich) ───────────────────── */
.id-in { display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; max-width:1000px; margin-inline:auto }
.id-y, .id-n { border-radius:var(--r); padding:1.9rem 1.8rem; border:1px solid var(--line) }
.id-y { background:linear-gradient(170deg, rgba(201,168,76,.08), rgba(201,168,76,.02) 55%), var(--card); border-color:var(--line-2) }
.id-n { background:var(--card) }
.id-lbl { font-size:.72rem; font-weight:650; letter-spacing:.2em; text-transform:uppercase; margin-bottom:1.2rem }
.id-y .id-lbl { color:var(--gold) }
.id-n .id-lbl { color:var(--mut-2) }
.id-row { display:flex; gap:.75rem; padding:.6rem 0; font-size:.92rem; color:var(--txt); border-top:1px solid var(--line); align-items:baseline }
.id-n .id-row { color:var(--mut) }
.id-ic { flex:none; font-size:.8rem }
.id-y .id-ic { color:var(--gold) }
.id-n .id-ic { color:var(--mut-2) }

/* ── Problem / Einwände ──────────────────────────────────────────────── */
.pr-in { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start }
.agit {
  border:1px solid var(--line-2); border-radius:var(--r);
  background:linear-gradient(150deg, rgba(201,168,76,.09), transparent 60%);
  padding:1.6rem 1.7rem; margin-top:2rem;
}
.agit-q { font-family:var(--fd); font-style:italic; font-size:1.18rem; line-height:1.4 }
.agit-q em { color:var(--gold-2) }
.agit-s { font-size:.74rem; color:var(--mut-2); margin-top:.9rem; letter-spacing:.05em }

.pr-cards { display:flex; flex-direction:column; gap:.9rem }
.pr-c {
  display:flex; gap:1.2rem; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); padding:1.3rem 1.4rem;
  transition:border-color .35s, transform .35s var(--ez), background .35s;
}
.pr-c:hover { border-color:var(--line-2); transform:translateX(6px); background:var(--card-2) }
.pr-n { font-family:var(--fd); font-size:1.05rem; color:var(--gold); flex:none; opacity:.85 }
.pr-c h4 { font-size:.98rem; font-weight:600; margin-bottom:.3rem }
.pr-c p { font-size:.87rem; color:var(--mut) }

/* ── Split-Screen Slider (Immobilien ↔ Edelmetalle) ──────────────────── */
.h-splitter-box {
  display:flex; flex-direction:column;
  height:min(78vh, 720px); min-height:520px;
  border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line);
  position:relative;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.8);
}
.h-panel { position:relative; flex:1; min-height:0; overflow:hidden; cursor:pointer }
.h-panel__bg {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.06);
  transition:transform 6s var(--ez), filter .8s;
  filter:saturate(.8) brightness(.85);
}
.h-panel:hover .h-panel__bg, .h-panel.is-expanded .h-panel__bg { transform:scale(1.0); filter:saturate(.95) brightness(.95) }
.h-panel__overlay { position:absolute; inset:0; background:linear-gradient(to right, rgba(4,4,5,.9) 0%, rgba(4,4,5,.62) 48%, rgba(4,4,5,.25) 100%) }
.h-panel__content {
  position:relative; z-index:2; height:100%;
  display:flex; flex-direction:column; justify-content:center;
  padding:2.2rem clamp(1.4rem, 5vw, 3.5rem);
  max-width:640px;
}
.h-panel__eyebrow {
  font-size:.68rem; font-weight:650; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold-2); margin-bottom:.55rem; display:flex; align-items:center; gap:.6rem;
}
.h-panel__eyebrow::before { content:''; width:22px; height:1px; background:var(--gold) }
.h-panel__title { font-family:var(--fd); font-weight:360; font-size:clamp(1.5rem, 3vw, 2.3rem); line-height:1.12 }
.h-panel__details {
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .8s var(--ez), opacity .7s var(--ez), margin .8s var(--ez);
}
.h-panel.is-expanded .h-panel__details { max-height:420px; opacity:1; margin-top:1.1rem }
.h-panel__sub { color:rgba(244,241,234,.82); font-size:.93rem; max-width:52ch; margin-bottom:.9rem }
.h-panel__list { margin-bottom:1.2rem }
.h-panel__list li {
  position:relative; padding:.32rem 0 .32rem 1.5rem;
  font-size:.86rem; color:rgba(244,241,234,.75);
}
.h-panel__list li::before {
  content:''; position:absolute; left:0; top:.78em;
  width:14px; height:1.5px; background:var(--gold);
}
.h-panel__btn {
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--gold); color:#0B0B0C; font-weight:600; font-size:.85rem;
  padding:.8rem 1.4rem; border-radius:var(--r-sm);
  transition:transform .3s var(--ez), box-shadow .3s;
}
.h-panel__btn:hover { transform:translateY(-2px); box-shadow:var(--shadow-gold) }
.h-panel__hint {
  position:absolute; right:1.6rem; bottom:1.2rem; z-index:3;
  display:flex; align-items:center; gap:.45rem;
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(244,241,234,.7);
  transition:opacity .5s;
  pointer-events:none;
}
.h-panel__hint--up { bottom:auto; top:1.2rem }

.h-divider { position:relative; z-index:5; height:0; cursor:row-resize; touch-action:none }
.h-divider__line {
  position:absolute; left:0; right:0; top:-1px; height:2px;
  background:linear-gradient(90deg, transparent, var(--gold) 18%, var(--gold) 82%, transparent);
  box-shadow:0 0 18px rgba(201,168,76,.5);
}
.h-divider__handle {
  position:absolute; left:50%; top:0; transform:translate(-50%,-50%);
  width:52px; height:52px; border-radius:50%;
  background:#0C0C0E; border:1px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 6px rgba(7,7,8,.55), 0 0 26px rgba(201,168,76,.4);
  transition:transform .3s var(--ez);
}
.h-divider:hover .h-divider__handle { transform:translate(-50%,-50%) scale(1.08) }
.h-divider__icon svg { display:block; stroke:var(--gold) }

/* ── Team / Journey ──────────────────────────────────────────────────── */
.jo-in { display:grid; grid-template-columns:1.1fr .9fr; gap:4rem; align-items:center }
.jo-portrait { position:relative; border-radius:var(--r); overflow:hidden; border:1px solid var(--line) }
.jo-portrait img { width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ez) }
.jo-portrait:hover img { transform:scale(1.03) }
.jo-portrait-veil { position:absolute; inset:0; background:linear-gradient(200deg, transparent 55%, rgba(7,7,8,.65)); pointer-events:none }
.jo-caption {
  position:absolute; left:1.3rem; bottom:1.1rem; z-index:2;
  font-size:.8rem; color:rgba(244,241,234,.9); letter-spacing:.04em;
}
.jo-caption strong { display:block; font-family:var(--fd); font-size:1.05rem; font-weight:450 }

/* ── Proof / Testimonials ────────────────────────────────────────────── */
.pf-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-bottom:2.6rem }
.pf-c {
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:1.7rem 1.6rem; display:flex; flex-direction:column; gap:1rem;
  transition:transform .4s var(--ez), border-color .4s;
}
.pf-c:hover { transform:translateY(-5px); border-color:var(--line-2) }
.pf-stars { color:var(--gold); letter-spacing:.18em; font-size:.85rem }
.pf-t { font-size:.95rem; color:var(--txt); font-style:italic; line-height:1.6; flex:1 }
.pf-who { font-size:.78rem; color:var(--mut-2) }
.pf-who strong { color:var(--mut); font-weight:600 }

.pf-nums {
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
}
.pn { background:var(--bg-2); padding:1.5rem 1.2rem; text-align:center }
.pn-n { font-family:var(--fd); font-size:1.7rem; color:var(--gold-2) }
.pn-l { font-size:.75rem; color:var(--mut-2); margin-top:.3rem }

/* ── Future 2035 ─────────────────────────────────────────────────────── */
.fu-in { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center }
.fu-box {
  position:relative; border:1px solid var(--line-2); border-radius:var(--r);
  background:linear-gradient(160deg, rgba(201,168,76,.1), transparent 55%), var(--card);
  padding:2.2rem 2rem; overflow:hidden;
}
.fu-yr {
  position:absolute; top:-1.4rem; right:.6rem;
  font-family:var(--fd); font-size:7rem; font-weight:300; color:rgba(201,168,76,.1);
  pointer-events:none; line-height:1;
}
.fu-sc h3 { font-family:var(--fd); font-weight:380; font-size:1.5rem; line-height:1.25; margin-bottom:1.4rem }
.fu-sc h3 em { font-style:italic; color:var(--gold-2) }
.fu-ck { position:relative; padding:.55rem 0 .55rem 2rem; font-size:.9rem; color:var(--mut); border-top:1px solid var(--line) }
.fu-ck::before {
  content:'✓'; position:absolute; left:.2rem; top:.5rem;
  color:var(--gold); font-size:.9rem; font-weight:700;
}

/* ── Offer / Leistungen ──────────────────────────────────────────────── */
.of-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin-bottom:1.2rem }
.of-c {
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:1.8rem 1.5rem;
  transition:transform .4s var(--ez), border-color .4s, background .4s;
}
.of-c:hover { transform:translateY(-6px); border-color:var(--line-2); background:var(--card-2) }
.of-ic {
  width:46px; height:46px; border-radius:12px;
  background:var(--gold-dim); border:1px solid var(--line-2);
  display:flex; align-items:center; justify-content:center; margin-bottom:1.1rem;
}
.of-ic svg { width:20px; height:20px; stroke:var(--gold); fill:none; stroke-width:1.7 }
.of-c { min-width:0 }
.of-c h3 { font-size:1rem; font-weight:600; margin-bottom:.5rem; overflow-wrap:break-word; hyphens:auto }
.of-c p { font-size:.85rem; color:var(--mut) }

.of-full {
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  border:1px solid var(--line-2); border-radius:var(--r);
  background:linear-gradient(120deg, rgba(201,168,76,.09), transparent 60%), var(--card);
  padding:1.9rem 2rem;
}
.of-full h3 { font-family:var(--fd); font-weight:420; font-size:1.35rem; margin-bottom:.4rem }
.of-full p { font-size:.9rem; color:var(--mut); max-width:60ch }

/* adv grid = 3 Spalten Variante */
.adv-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem }
.adv-grid .of-c h3 { font-size:1.02rem }

/* ── Produkte (Edelmetalle) ──────────────────────────────────────────── */
.prod-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-bottom:1.2rem }
.prod-card {
  position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:2rem 1.7rem; overflow:hidden;
  transition:transform .4s var(--ez), border-color .4s;
}
.prod-card:hover { transform:translateY(-6px); border-color:var(--line-2) }
.prod-card--hl { border-color:var(--line-2); background:linear-gradient(165deg, rgba(201,168,76,.1), transparent 60%), var(--card) }
.prod-card-tag {
  display:inline-block; font-size:.64rem; font-weight:650; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); background:var(--gold-dim); border:1px solid var(--line-2);
  padding:.28rem .65rem; border-radius:99px; margin-bottom:1rem;
}
.prod-card-title { font-family:var(--fd); font-size:1.7rem; font-weight:400; margin-bottom:.5rem }
.prod-card-p { font-size:.87rem; color:var(--mut) }
.prod-card-icon { margin-bottom:1.1rem }
.prod-card-icon svg { stroke:var(--gold); fill:none; stroke-width:1.5 }

/* ── Prozess-Schritte ────────────────────────────────────────────────── */
.steps { display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; counter-reset:step }
.step {
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:1.5rem 1.2rem; position:relative;
  transition:border-color .4s, transform .4s var(--ez);
}
.step:hover { border-color:var(--line-2); transform:translateY(-4px) }
.step-n { font-family:var(--fd); font-size:2rem; color:var(--gold); opacity:.55; line-height:1; margin-bottom:.7rem }
.step h4 { font-size:.9rem; font-weight:600; margin-bottom:.35rem }
.step p { font-size:.78rem; color:var(--mut) }

/* ── Events & Sponsoring ─────────────────────────────────────────────── */
.ev-wrap { display:grid; grid-template-columns:1.15fr .85fr; gap:3.2rem; align-items:center }
.ev-video {
  position:relative; aspect-ratio:16/9; border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line-2);
  background:
    radial-gradient(ellipse 70% 90% at 50% 0%, rgba(201,168,76,.14), transparent 65%),
    linear-gradient(160deg, #141416, #0B0B0D);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:1.1rem;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.85);
}
.ev-video::before {
  content:''; position:absolute; inset:12px; border-radius:10px;
  border:1px dashed rgba(201,168,76,.3); pointer-events:none;
}
.ev-play {
  width:76px; height:76px; border-radius:50%;
  background:rgba(201,168,76,.12); border:1px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  transition:transform .4s var(--ez), background .4s;
  animation:pulse 3s infinite;
}
.ev-video:hover .ev-play { transform:scale(1.1); background:rgba(201,168,76,.22) }
.ev-play svg { margin-left:4px }
.ev-video-note { font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mut-2) }
.ev-video-note strong { color:var(--gold-2); font-weight:600 }
.ev-badges { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.6rem }
.ev-badge {
  font-size:.72rem; letter-spacing:.08em; color:var(--mut);
  border:1px solid var(--line); border-radius:99px; padding:.4rem .9rem;
  background:rgba(255,255,255,.02);
}
.ev-copy-ph {
  border-left:2px solid var(--gold); background:var(--gold-dim);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:1.1rem 1.3rem; margin-top:1.4rem;
  font-size:.85rem; color:var(--mut); font-style:italic;
}

/* ── Urgency ─────────────────────────────────────────────────────────── */
.sect--urg { padding:0; background:var(--bg-2); border-block:1px solid var(--line) }
.urg { display:flex; gap:1.4rem; align-items:center; padding:1.8rem 0 }
.urg-ic { flex:none; width:52px; height:52px; border-radius:14px; background:var(--gold-dim); border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center }
.urg-ic svg { width:23px; height:23px; stroke:var(--gold); fill:none; stroke-width:1.7 }
.urg-t strong { display:block; font-size:1rem; margin-bottom:.2rem }
.urg-t span { font-size:.85rem; color:var(--mut) }

/* ── Risk-Reversal Karten ────────────────────────────────────────────── */
.rsk-in { display:grid; grid-template-columns:1fr 1.1fr; gap:4rem; align-items:center }
.rsk-cards { display:grid; grid-template-columns:1fr 1fr; gap:1rem }
.rsk-c {
  display:flex; gap:1rem; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); padding:1.4rem 1.3rem;
  transition:border-color .4s, transform .4s var(--ez);
}
.rsk-c:hover { border-color:var(--line-2); transform:translateY(-4px) }
.rsk-ic { flex:none; width:38px; height:38px; border-radius:10px; background:var(--gold-dim); display:flex; align-items:center; justify-content:center }
.rsk-ic svg { width:17px; height:17px; stroke:var(--gold); fill:none; stroke-width:1.7 }
.rsk-c h4 { font-size:.92rem; font-weight:600; margin-bottom:.3rem }
.rsk-c p { font-size:.8rem; color:var(--mut) }

/* ── Bonus ───────────────────────────────────────────────────────────── */
.bn-in { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem }
.bn-c { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:1.8rem 1.6rem; transition:border-color .4s, transform .4s var(--ez) }
.bn-c:hover { border-color:var(--line-2); transform:translateY(-5px) }
.bn-badge {
  display:inline-block; font-size:.64rem; font-weight:650; letter-spacing:.18em; text-transform:uppercase;
  color:#0B0B0C; background:var(--gold); padding:.3rem .7rem; border-radius:99px; margin-bottom:1rem;
}
.bn-c h3 { font-size:1.02rem; font-weight:600; margin-bottom:.5rem }
.bn-c p { font-size:.85rem; color:var(--mut) }

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.fq-w { display:grid; grid-template-columns:.8fr 1.2fr; gap:4rem; align-items:start }
.fq-s { position:sticky; top:calc(var(--nav-h) + 2rem) }
.fq-s p { color:var(--mut); margin-bottom:1.6rem }
.fql { display:flex; flex-direction:column; gap:.8rem }
.fqi { background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; transition:border-color .4s }
.fqi.open { border-color:var(--line-2) }
.fqq {
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  background:none; border:none; color:var(--txt); text-align:left;
  font-size:.97rem; font-weight:550; padding:1.25rem 1.4rem;
}
.fqic { flex:none; width:26px; height:26px; border-radius:8px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; transition:transform .45s var(--ez), border-color .3s }
.fqic svg { width:12px; height:12px; stroke:var(--gold); stroke-width:2; fill:none }
.fqi.open .fqic { transform:rotate(45deg); border-color:var(--line-2) }
.fqa {
  max-height:0; overflow:hidden; padding:0 1.4rem;
  color:var(--mut); font-size:.9rem;
  transition:max-height .6s var(--ez), padding .5s var(--ez);
}
.fqi.open .fqa { max-height:320px; padding:0 1.4rem 1.3rem }

/* ── CTA-Section ─────────────────────────────────────────────────────── */
.sect--cta { background:var(--bg) }
.cta-b {
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:1.2fr .8fr; gap:3rem; align-items:center;
  border:1px solid var(--line-2); border-radius:calc(var(--r) + 4px);
  background:
    radial-gradient(ellipse 60% 100% at 85% 0%, rgba(201,168,76,.16), transparent 60%),
    linear-gradient(160deg, var(--card-2), var(--card));
  padding:clamp(2.2rem, 5vw, 3.8rem);
}
.cta-b::before {
  content:''; position:absolute; inset:0 0 auto 0; height:2px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.cta-b h2 { font-family:var(--fd); font-weight:350; font-size:clamp(1.7rem, 3.4vw, 2.6rem); line-height:1.15; margin-bottom:.9rem }
.cta-b h2 em { font-style:italic; color:var(--gold-2) }
.cta-b p { color:var(--mut); font-size:.97rem; max-width:52ch }
.cta-r { display:flex; flex-direction:column; align-items:flex-start; gap:1rem }
.cta-note { font-size:.8rem; color:var(--mut-2); line-height:1.5 }
.cta-note strong { display:block; color:var(--mut); letter-spacing:.04em }
.cta-b--center { grid-template-columns:1fr; text-align:center }
.cta-b--center p { margin-inline:auto }
.cta-b--center .cta-acts { justify-content:center }
.cta-acts { display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.4rem }
.cta-sub { font-size:.78rem; color:var(--mut-2); margin-top:1rem }

/* ── Footer ──────────────────────────────────────────────────────────── */
footer { background:transparent; border-top:1px solid var(--line); padding:4rem 0 2rem; position:relative }
.fg { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.5rem; margin-bottom:3rem }
.fbr p { font-size:.85rem; color:var(--mut); margin:1.1rem 0 1.3rem; max-width:34ch }
.GH { color:var(--gold-2); font-size:.88rem; font-weight:550; transition:color .3s }
.GH:hover { color:var(--gold) }
.fc h5 { font-size:.72rem; font-weight:650; letter-spacing:.2em; text-transform:uppercase; color:var(--mut-2); margin-bottom:1rem }
.fc li { margin-bottom:.55rem }
.fc a { font-size:.88rem; color:var(--mut); transition:color .25s }
.fc a:hover { color:var(--txt) }
.fbot {
  display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
  border-top:1px solid var(--line); padding-top:1.6rem;
}
.fcopy { font-size:.76rem; color:var(--mut-2) }
.fleg { display:flex; gap:1.4rem }
.fleg a { font-size:.76rem; color:var(--mut-2); transition:color .25s }
.fleg a:hover { color:var(--mut) }

/* ── Sticky Mobile CTA ───────────────────────────────────────────────── */
.sticky-cta {
  position:fixed; left:0; right:0; bottom:0; z-index:880;
  display:none;
  padding:.7rem 5% calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(7,7,8,.92); backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
  transform:translateY(110%); transition:transform .5s var(--ez);
}
.sticky-cta.show { transform:none }
.sticky-cta .BG { width:100%; justify-content:center }

/* ── Social-Media-Icons ──────────────────────────────────────────────── */
.socials { display:flex; gap:.6rem; flex-wrap:wrap }
.soc {
  width:38px; height:38px; border-radius:10px;
  border:1px solid var(--line); background:rgba(255,255,255,.03);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--mut);
  transition:color .3s, border-color .3s, transform .35s var(--ez), box-shadow .35s;
}
.soc:hover { color:var(--gold-2); border-color:var(--line-2); transform:translateY(-3px); box-shadow:0 8px 22px -10px rgba(201,168,76,.4) }
.soc svg { width:17px; height:17px; fill:currentColor }
.soc--ph { opacity:.45; cursor:default }
.soc--ph:hover { transform:none; box-shadow:none; color:var(--mut); border-color:var(--line) }

.team-socs { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1rem }
.team-soc {
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:1.1rem 1.2rem;
}
.team-soc strong { display:block; font-family:var(--fd); font-weight:450; font-size:1.02rem; margin-bottom:.1rem }
.team-soc span { display:block; font-size:.72rem; color:var(--mut-2); margin-bottom:.7rem }

/* ── Gelddrucken-Popup ───────────────────────────────────────────────── */
.mp-ov {
  position:fixed; inset:0; z-index:950;
  background:rgba(4,4,5,.78); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center; padding:1rem;
  opacity:0; pointer-events:none; transition:opacity .6s var(--ez);
}
.mp-ov.vis { opacity:1; pointer-events:all }
.mp {
  position:relative; max-width:620px; width:100%; text-align:center;
  background:linear-gradient(165deg, var(--card-2), var(--card));
  border:1px solid var(--line-2); border-radius:var(--r);
  padding:2.8rem 2.2rem 2.2rem; overflow:hidden;
  transform:translateY(28px) scale(.98); transition:transform .6s var(--ez);
  box-shadow:0 40px 100px -30px rgba(0,0,0,.9);
}
.mp-ov.vis .mp { transform:none }
.mp::before {
  content:''; position:absolute; inset:0 0 auto 0; height:2px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.mp-x {
  position:absolute; top:.9rem; right:.9rem;
  width:34px; height:34px; border-radius:9px;
  background:none; border:1px solid var(--line); color:var(--mut);
  font-size:1rem; display:flex; align-items:center; justify-content:center;
  transition:color .25s, border-color .25s;
}
.mp-x:hover { color:var(--txt); border-color:var(--line-2) }
.mp-h { font-family:var(--fd); font-weight:350; font-size:clamp(1.5rem, 3.4vw, 2.1rem); line-height:1.15; margin-bottom:1.4rem }
.mp-counters { display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; margin-bottom:1.3rem }
.mp-c {
  flex:1; min-width:150px; max-width:185px;
  background:rgba(201,168,76,.06); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:.95rem .8rem;
}
.mp-c-n { font-family:var(--fd); font-size:1.35rem; color:var(--gold-2); font-variant-numeric:tabular-nums; white-space:nowrap }
.mp-c-l { font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--mut-2); margin-top:.25rem }
.mp-sub { font-family:var(--fd); font-style:italic; font-size:1.05rem; margin-bottom:1.2rem }
.mp-p { color:var(--mut); font-size:.88rem; max-width:52ch; margin:0 auto 1.3rem }
.mp-src { font-size:.68rem; letter-spacing:.08em; color:var(--mut-2) }

/* ── Gelddrucken-Widget (sticky) ─────────────────────────────────────── */
.mw {
  position:fixed; left:1rem; bottom:1rem; z-index:860;
  background:rgba(10,10,12,.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line); border-radius:12px;
  padding:.6rem .9rem .65rem;
  display:none; flex-direction:column; gap:.1rem;
  pointer-events:none; user-select:none;
  opacity:0; transform:translateY(12px);
  transition:opacity .7s var(--ez), transform .7s var(--ez);
}
.mw.show { display:flex }
.mw.vis { opacity:1; transform:none }
.mw-t { font-size:.56rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mut-2); margin-bottom:.2rem }
.mw-row { display:flex; justify-content:space-between; gap:.9rem; font-size:.7rem; color:var(--mut); font-variant-numeric:tabular-nums; line-height:1.5 }
.mw-row b { color:var(--gold-2); font-weight:600; font-variant-numeric:tabular-nums }

/* ── Floating Desktop-CTA (dezent, unten rechts) ─────────────────────── */
.float-cta {
  position:fixed; right:1.4rem; bottom:1.4rem; z-index:865;
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(10,10,12,.78); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line-2); border-radius:99px;
  color:var(--txt); font-size:.82rem; font-weight:550;
  padding:.75rem 1.3rem;
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .6s var(--ez), transform .6s var(--ez), border-color .3s, box-shadow .4s;
  box-shadow:0 12px 40px -12px rgba(0,0,0,.7);
}
.float-cta.show { opacity:1; transform:none; pointer-events:all }
.float-cta:hover { border-color:var(--gold); box-shadow:0 12px 44px -10px rgba(201,168,76,.35) }
.float-cta .dot { width:7px; height:7px; border-radius:50%; background:var(--gold); animation:pulse 2.4s infinite }
@media (max-width: 860px) { .float-cta { display:none } }

/* ── Events-Seite ────────────────────────────────────────────────────── */
.ev-hero { min-height:62svh; display:flex; align-items:center; padding-top:var(--nav-h) }

.ev-video--wide { max-width:960px; margin-inline:auto }

.partner {
  display:flex; align-items:center; justify-content:center; gap:2.2rem; flex-wrap:wrap;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--card); padding:1.8rem 2.4rem;
  max-width:860px; margin-inline:auto;
}
.partner-logo {
  display:block; background:#F3F0EA; border-radius:12px; padding:.9rem 1.4rem;
  transition:transform .35s var(--ez), box-shadow .35s;
}
.partner-logo:hover { transform:translateY(-3px); box-shadow:0 12px 34px -14px rgba(201,168,76,.45) }
.partner-logo img { height:58px; width:auto; display:block }
.partner-txt { max-width:40ch }
.partner-txt strong { display:block; font-family:var(--fd); font-weight:450; font-size:1.15rem; margin-bottom:.25rem }
.partner-txt span { font-size:.85rem; color:var(--mut) }
.partner-txt a { color:var(--gold-2); font-size:.85rem; font-weight:550 }
.partner-txt a:hover { color:var(--gold) }

.ev-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem }
.ev-card-img { position:relative; aspect-ratio:16/10; border-radius:10px; overflow:hidden; margin-bottom:1.2rem; border:1px solid var(--line) }
.ev-card-img img { width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ez) }
.ev-card:hover .ev-card-img img { transform:scale(1.05) }
.ev-card-img--ph {
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:.5rem;
  background:linear-gradient(160deg, var(--card-2), var(--bg-3));
  color:var(--mut-2); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
}
.ev-card-img--ph::before { content:''; position:absolute; inset:8px; border:1px dashed rgba(201,168,76,.3); border-radius:7px }

/* Event-Teaser Startseite: nur Bild + Überschrift + Link */
.ev-teaser { max-width:820px; margin-inline:auto; text-align:center }
.ev-teaser-img {
  display:block; position:relative; border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line-2);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.85);
}
.ev-teaser-img img { width:100%; aspect-ratio:16/9; object-fit:cover; object-position:center 30%; transition:transform 1.4s var(--ez); display:block }
.ev-teaser-img:hover img { transform:scale(1.04) }
.ev-teaser-img .veil { position:absolute; inset:0; background:linear-gradient(200deg, transparent 50%, rgba(7,7,8,.55)); pointer-events:none }
.ev-teaser-img .ev-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) }
.ev-teaser-img:hover .ev-play { transform:translate(-50%,-50%) scale(1.1); background:rgba(201,168,76,.22) }
.ev-card {
  position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:1.9rem 1.7rem; overflow:hidden;
  transition:transform .4s var(--ez), border-color .4s;
}
.ev-card:hover { transform:translateY(-6px); border-color:var(--line-2) }
.ev-card--hl { border-color:var(--line-2); background:linear-gradient(165deg, rgba(201,168,76,.1), transparent 60%), var(--card) }
.ev-card-tag {
  display:inline-block; font-size:.62rem; font-weight:650; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); background:var(--gold-dim); border:1px solid var(--line-2);
  padding:.28rem .65rem; border-radius:99px; margin-bottom:1rem;
}
.ev-card h3 { font-family:var(--fd); font-weight:420; font-size:1.35rem; margin-bottom:.5rem }
.ev-card p { font-size:.87rem; color:var(--mut) }
.ev-card-meta { display:flex; gap:1.2rem; margin-top:1.1rem; padding-top:1rem; border-top:1px solid var(--line); font-size:.74rem; color:var(--mut-2) }
.ev-thumb { display:block; position:relative; cursor:pointer }
.ev-thumb:hover .ev-play { transform:scale(1.1); background:rgba(201,168,76,.22) }

@media (max-width: 860px) {
  .ev-cards { grid-template-columns:1fr }
  .team-socs { grid-template-columns:1fr }
  .mw { left:.7rem; bottom:calc(64px + env(safe-area-inset-bottom) + .8rem) }
  .soc { width:44px; height:44px }
}

/* ── Events: Editorial-Layout (Magazin-Stil) ─────────────────────────── */
.evx-hero {
  position:relative; min-height:92svh; overflow:hidden;
  display:flex; align-items:flex-end;
  padding:calc(var(--nav-h) + 3rem) 0 clamp(3.5rem, 8vh, 6rem);
}
/* Echtes Event-Foto als Hero-Hintergrund mit langsamem Zoom + dunklem Verlauf */
.evx-hero-photo { position:absolute; inset:0; z-index:0; overflow:hidden }
.evx-hero-photo::before {
  content:''; position:absolute; inset:-8%;
  background:url('../images/hero-event.jpg') center / cover no-repeat #0A0A0C;
  filter:saturate(1.2) brightness(1.32) contrast(1.04);   /* heller & farbiger, damit man das Event sieht */
  animation:heroKen 28s ease-in-out infinite alternate;
  will-change:transform;
}
.evx-hero-photo::after {
  content:''; position:absolute; inset:0;
  /* nur links/unten abdunkeln (für Text), rechts bleibt das Bild sichtbar */
  background:
    linear-gradient(90deg, rgba(8,8,10,.82) 0%, rgba(8,8,10,.5) 42%, rgba(8,8,10,.12) 100%),
    linear-gradient(rgba(8,8,10,0) 62%, var(--bg) 99%);
}
@media (prefers-reduced-motion: reduce){ .evx-hero-photo::before{ animation:none; transform:scale(1.05) } }

.evx-perk {
  display:inline-flex; align-items:center; gap:.6rem;
  margin-top:1.9rem; max-width:60ch;
  font-size:.86rem; line-height:1.45; color:var(--gold-2);
  border:1px solid var(--line-2); background:rgba(201,168,76,.06);
  border-radius:14px; padding:.7rem 1.1rem;
}
.evx-perk svg { flex:none; color:var(--gold) }
.evx-hero-bg {
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 55% 60% at 82% 12%, rgba(201,168,76,.16) 0%, transparent 60%),
    radial-gradient(ellipse 40% 45% at 8% 90%, rgba(201,168,76,.08) 0%, transparent 55%),
    linear-gradient(165deg, #101012 0%, #0A0A0C 55%, #0C0C0E 100%);
}
.evx-hero-lines {
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(201,168,76,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,.04) 1px, transparent 1px);
  background-size:110px 110px;
  mask-image:radial-gradient(ellipse 75% 75% at 60% 30%, black 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 75% 75% at 60% 30%, black 0%, transparent 78%);
}
.evx-hero-word {
  position:absolute; right:-1.5vw; top:14%;
  font-family:var(--fd); font-style:italic; font-weight:300;
  font-size:clamp(6rem, 17vw, 15rem); line-height:1;
  color:transparent; -webkit-text-stroke:1px rgba(201,168,76,.14);
  pointer-events:none; user-select:none; white-space:nowrap;
}
.evx-kicker {
  display:flex; align-items:center; gap:1.1rem;
  font-size:.72rem; font-weight:600; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1.6rem;
}
.evx-kicker::before, .evx-kicker::after { content:''; height:1px; background:rgba(201,168,76,.4); flex:none; width:52px }
.evx-h1 {
  font-family:var(--fd); font-weight:320;
  font-size:clamp(2.8rem, 7vw, 5.4rem);
  line-height:1.02; letter-spacing:-.015em;
  max-width:14ch;
}
.evx-h1 em { font-style:italic; color:var(--gold-2) }
.evx-hero-foot {
  display:flex; align-items:flex-end; justify-content:space-between; gap:2.5rem; flex-wrap:wrap;
  margin-top:2.4rem;
}
.evx-hero-foot p { color:var(--mut); font-size:1rem; max-width:46ch }

/* Partner-Zeile: schmal, editorial */
.evx-partner {
  border-block:1px solid var(--line); background:var(--bg-2);
  padding:2.2rem 0;
}
.evx-partner-in { display:flex; align-items:center; justify-content:center; gap:2.4rem; flex-wrap:wrap; text-align:left }
.evx-partner-in .partner-logo img { height:74px }

/* Feature-Blöcke: grosszügig, abwechselnd */
.evx-feature {
  display:grid; grid-template-columns:1.04fr .96fr;
  gap:clamp(2.4rem, 6vw, 5.5rem); align-items:center;
  padding-block:clamp(3.5rem, 8vw, 6.5rem);
}
.evx-feature + .evx-feature { border-top:1px solid var(--line) }
.evx-feature--flip .evx-media { order:2 }
.evx-media { position:relative }
.evx-media::before {
  content:''; position:absolute; inset:22px -22px -22px 22px;
  border:1px solid rgba(201,168,76,.32); border-radius:var(--r);
  pointer-events:none;
}
.evx-feature--flip .evx-media::before { inset:22px 22px -22px -22px }
.evx-media-frame {
  position:relative; border-radius:var(--r); overflow:hidden; z-index:1;
  box-shadow:0 40px 90px -35px rgba(0,0,0,.9);
}
.evx-media-frame img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; transition:transform 1.6s var(--ez); filter:saturate(.88) }
.evx-media-frame:hover img { transform:scale(1.04) }
.evx-media-veil { position:absolute; inset:0; background:linear-gradient(200deg, transparent 55%, rgba(7,7,8,.5)); pointer-events:none }
.evx-media-frame .ev-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2 }
.evx-media-frame:hover .ev-play { transform:translate(-50%,-50%) scale(1.08); background:rgba(201,168,76,.22) }
.evx-media-cap {
  position:absolute; left:1.2rem; bottom:1rem; z-index:2;
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(246,244,238,.85);
}

.evx-idx { font-family:var(--fd); font-style:italic; font-size:1rem; color:var(--gold); margin-bottom:1rem; display:flex; align-items:center; gap:.9rem }
.evx-idx::after { content:''; width:44px; height:1px; background:rgba(201,168,76,.4) }
.evx-meta {
  display:flex; flex-wrap:wrap; gap:.4rem 1.4rem;
  font-size:.7rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--mut-2); margin-bottom:1.1rem;
}
.evx-meta b { color:var(--gold-2); font-weight:600 }
.evx-title {
  font-family:var(--fd); font-weight:340;
  font-size:clamp(1.9rem, 3.8vw, 3rem); line-height:1.08; letter-spacing:-.01em;
  margin-bottom:1.2rem;
}
.evx-title em { font-style:italic; color:var(--gold-2) }
.evx-txt { color:var(--mut); max-width:52ch; margin-bottom:1.6rem }

/* Kommende Anlässe: schlichte editoriale Liste, beliebig erweiterbar */
.evx-list { border-top:1px solid var(--line) }
.evx-row {
  display:grid; grid-template-columns:120px 1fr auto; gap:1.5rem; align-items:baseline;
  padding:1.6rem .2rem; border-bottom:1px solid var(--line);
  transition:background .3s;
}
.evx-row:hover { background:rgba(201,168,76,.03) }
.evx-row-date { font-family:var(--fd); font-style:italic; font-size:1.05rem; color:var(--gold-2) }
.evx-row-t strong { display:block; font-family:var(--fd); font-weight:430; font-size:1.25rem; margin-bottom:.15rem }
.evx-row-t span { font-size:.82rem; color:var(--mut-2) }
.evx-row-loc { font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--mut-2) }

@media (max-width: 860px) {
  .evx-hero { min-height:74svh }
  .evx-hero-word { top:8%; font-size:22vw }
  .evx-feature { grid-template-columns:1fr; gap:2.2rem }
  .evx-feature--flip .evx-media { order:0 }
  .evx-media::before, .evx-feature--flip .evx-media::before { inset:14px -10px -14px 10px }
  .evx-row { grid-template-columns:1fr; gap:.3rem }
}

/* ── Logo-Intro (nur Startseite, einmal pro Besuch) ──────────────────── */
.intro {
  position:fixed; inset:0; z-index:2000;
  background:#FFFFFF;
  display:flex; align-items:center; justify-content:center;
  transition:background .8s ease-in-out, opacity .7s ease-in-out;
}
.intro__logo {
  height:78px; width:auto;
  filter:invert(1);              /* weisses Logo → schwarz auf weissem Grund */
  transform:scale(.86);
  transition:transform 1s ease-in-out, filter .8s ease-in-out;
  will-change:transform;
}
.intro.inv { background:#0C0C0E }
.intro.inv .intro__logo { filter:invert(0) }   /* Invertierung: Logo wieder weiss */
.intro.done { opacity:0; pointer-events:none }
html.intro-lock { overflow:hidden }
@media (prefers-reduced-motion: reduce) { .intro { display:none } }

/* ── Rechtsseiten ────────────────────────────────────────────────────── */
.legal { padding-top:calc(var(--nav-h) + 3rem); min-height:70vh }
.legal h1 { font-family:var(--fd); font-weight:350; font-size:clamp(2rem, 4vw, 2.8rem); margin-bottom:2rem }
.legal .legal-body { max-width:76ch; color:var(--mut); font-size:.93rem }
.legal .legal-body h2, .legal .legal-body h3 { color:var(--txt); font-family:var(--fs); font-size:1.05rem; font-weight:600; margin:1.8rem 0 .6rem }
.legal .legal-body p { margin-bottom:.9rem }
.legal .legal-body ul { list-style:disc; padding-left:1.3rem; margin-bottom:.9rem }
.legal .legal-body li { margin-bottom:.35rem }
.legal pre { white-space:pre-line; font-family:inherit }

/* ══ Responsive ═══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .of-grid { grid-template-columns:repeat(2,1fr) }
  .steps { grid-template-columns:repeat(3,1fr) }
  .hero-inner--cols { grid-template-columns:1fr; gap:3rem }
  .tsi { grid-template-columns:repeat(2,1fr) }
}

@media (max-width: 860px) {
  .nl, .BG--nav { display:none }
  .ham { display:flex }
  .pr-in, .jo-in, .fu-in, .rsk-in, .fq-w, .ev-wrap { grid-template-columns:1fr; gap:2.6rem }
  .fq-s { position:static }
  .id-in { grid-template-columns:1fr }
  .pf-grid, .adv-grid, .prod-cards, .bn-in { grid-template-columns:1fr }
  .pf-nums, .hero-stats { grid-template-columns:repeat(2,1fr) }
  .of-full { flex-direction:column; align-items:flex-start }
  .rsk-cards { grid-template-columns:1fr }
  .steps { grid-template-columns:1fr 1fr }
  .cta-b { grid-template-columns:1fr }
  .sticky-cta { display:block }
  body { padding-bottom:0 }
  .jo-in .jo-portrait-col { order:-1 }
  .h-splitter-box { height:76vh; min-height:560px }
  .h-panel__hint { right:1rem }
  .fu-yr { font-size:5rem }
  .fg { grid-template-columns:1fr 1fr }
}

@media (max-width: 480px) {
  .steps { grid-template-columns:1fr }
  .of-grid { grid-template-columns:1fr }
  .fg { grid-template-columns:1fr; gap:1.8rem }
  .tsi { grid-template-columns:1fr }
  .hero-stats { grid-template-columns:repeat(2,1fr) }
  .h-act .BO { width:100%; justify-content:center }
  .h-act .BG { width:100%; justify-content:center }
}