/* =========================================================
   Swiss-Ankauf24 — Heritage Vault
   Dark warm charcoal + champagne gold · serif editorial
   ========================================================= */

:root{
  /* palette */
  --bg:        #100C08;
  --bg-2:      #15100A;
  --surface:   #1C150D;
  --surface-2: #241B11;
  --ivory:     #F4EFE6;
  --ivory-2:   #ECE4D4;
  --ink:       #19130C;

  --gold:      #C9A24B;
  --gold-bright:#E8D9A8;
  --gold-deep: #9A7B3F;
  --bronze:    #7A5F30;

  --text:      #F1EADD;
  --text-soft: #CFC4B1;
  --text-mut:  #9D917C;

  --line:      rgba(201,162,75,.22);
  --line-soft: rgba(244,239,230,.10);
  --line-ink:  rgba(25,19,12,.14);

  /* type */
  --f-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --f-sans:    'Hanken Grotesk', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* metrics */
  --container: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 4px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:84px; }
body{
  font-family:var(--f-sans);
  background:var(--bg);
  color:var(--text);
  font-size:19px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:none; }
select,input,textarea{ font:inherit; color:inherit; }
::selection{ background:var(--gold); color:var(--bg); }

.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }

.skip-link{
  position:fixed; top:-100px; left:16px; z-index:200;
  background:var(--gold); color:var(--bg); padding:10px 18px; border-radius:var(--radius);
  font-weight:600;
}
.skip-link:focus{ top:14px; }

:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:3px; border-radius:2px; }

/* ---------- typography helpers ---------- */
.eyebrow{
  font-family:var(--f-mono);
  font-size:12.5px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:500;
  display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow::before{
  content:""; width:26px; height:1px; background:var(--gold); opacity:.7; display:inline-block;
}

.section{ padding-block:clamp(72px, 9vw, 130px); }
.section__head{ max-width:760px; margin:0 auto clamp(40px,5vw,68px); text-align:center; }
.section__head--left{ margin-inline:0; text-align:left; }
.section__title{
  font-family:var(--f-display);
  font-weight:600;
  font-optical-sizing:auto;
  font-size:clamp(30px, 4.2vw, 50px);
  line-height:1.08;
  letter-spacing:-.01em;
  margin-top:18px;
  color:#fbf6ec;
  text-wrap:balance;
}
/* centered heads get symmetric hairlines around the kicker */
.section__head:not(.section__head--left) .eyebrow::after{
  content:""; width:26px; height:1px; background:var(--gold); opacity:.7; display:inline-block;
}
.section__intro{
  margin-top:18px; color:var(--text-soft); font-size:clamp(17px,1.6vw,19px);
}
.muted{ color:var(--text-mut); }

/* ---------- icons (Lucide line icons via sprite) ---------- */
.icon{
  display:inline-block; vertical-align:middle; flex:none;
  color:var(--gold);
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.icon--xs{ stroke-width:1.8; }
.icon--md{ stroke-width:1.55; }
.icon--lg{ stroke-width:1.35; }

/* ---------- buttons ---------- */
.btn{
  --bw:1px;
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:14px 26px; border-radius:var(--radius);
  font-weight:600; font-size:15.5px; letter-spacing:.01em;
  border:var(--bw) solid transparent;
  transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  will-change:transform;
}
.btn .icon{ color:inherit; }
.btn--lg{ padding:17px 32px; font-size:16.5px; }
.btn--sm{ padding:11px 20px; font-size:14.5px; }
.btn--block{ width:100%; }
.btn--gold{ background:var(--gold); color:#15100A; border-color:var(--gold); }
.btn--gold:hover{ background:var(--gold-bright); border-color:var(--gold-bright); transform:translateY(-2px); }
.btn--ghost{ color:var(--text); border-color:var(--line); background:rgba(244,239,230,.02); }
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold-bright); transform:translateY(-2px); }
.btn--ghost .icon{ transition:transform .25s var(--ease); }
.btn--ghost:hover .icon{ transform:translateX(3px); }

/* =========================================================
   HEADER  (slim utility topbar + clean mainbar)
   ========================================================= */
.site-header{ position:fixed; top:0; left:0; right:0; z-index:100; }

/* --- top utility bar --- */
.topbar{
  height:40px; overflow:hidden;
  background:rgba(11,8,5,.42);
  border-bottom:1px solid var(--line-soft);
  font-family:var(--f-mono); font-size:12px; letter-spacing:.03em; color:var(--text-mut);
  transition:height .4s var(--ease), opacity .35s var(--ease), border-color .35s var(--ease), background .4s var(--ease);
}
.topbar__inner{ display:flex; align-items:center; justify-content:space-between; height:100%; }
.topbar__item{ display:inline-flex; align-items:center; gap:8px; }
.topbar__right{ display:flex; align-items:center; gap:18px; }
.topbar__sep{ width:1px; height:13px; background:var(--line); }
.topbar .icon{ color:var(--gold); }
.topbar__phone{ display:inline-flex; align-items:center; gap:8px; color:var(--text-soft); transition:color .25s var(--ease); }
.topbar__phone:hover{ color:var(--gold-bright); }

/* --- main bar --- */
.mainbar{
  background:transparent; border-bottom:1px solid transparent;
  transition:background .4s var(--ease), border-color .4s var(--ease);
}
.mainbar__inner{ display:flex; align-items:center; gap:28px; height:76px; }

.brand{ display:inline-flex; align-items:center; gap:14px; }
.brand__mark{ color:var(--gold); display:grid; place-items:center; flex:none;
  transition:transform .4s var(--ease); }
.brand:hover .brand__mark{ transform:rotate(45deg); }
.brand__text{ display:flex; flex-direction:column; line-height:1; }
.brand__name{ font-family:var(--f-display); font-weight:600; font-size:22px; letter-spacing:.005em; color:#fbf6ec; }
.brand__num{ color:var(--gold); }
.brand__sub{
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold-deep); margin-top:6px;
}

.nav{ display:flex; gap:30px; margin-left:auto; }
.nav a{
  font-size:15px; font-weight:500; color:var(--text-soft); position:relative; padding-block:8px;
  transition:color .25s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:2px; width:0; height:1px; background:var(--gold);
  transition:width .3s var(--ease);
}
.nav a:hover{ color:var(--gold-bright); }
.nav a:hover::after{ width:100%; }

.mainbar__actions{ display:flex; align-items:center; gap:14px; margin-left:auto; }

.iconbtn{ display:grid; place-items:center; width:46px; height:46px; border-radius:var(--radius); }
.burger{ display:none; position:relative; color:var(--text); }
.burger .icon{ position:absolute; color:currentColor; transition:opacity .25s var(--ease), transform .3s var(--ease); }
.burger__close{ opacity:0; transform:rotate(-90deg) scale(.7); }
.burger.is-open .burger__open{ opacity:0; transform:rotate(90deg) scale(.7); }
.burger.is-open .burger__close{ opacity:1; transform:none; }

/* --- stuck state --- */
.site-header.is-stuck .topbar{ height:0; opacity:0; border-color:transparent; }
.site-header.is-stuck .mainbar{ background:#0d0a06; border-bottom-color:var(--line-soft); }
.site-header.is-stuck .mainbar__inner{ height:68px; transition:height .35s var(--ease); }

/* mobile nav */
.mobile-nav{
  position:fixed; inset:0; z-index:90;
  background:var(--bg-2);
  padding:110px var(--gutter) 40px;
  display:flex; flex-direction:column; justify-content:space-between;
  transform:translateY(-100%); transition:transform .5s var(--ease);
  visibility:hidden;
}
.mobile-nav.is-open{ transform:translateY(0); visibility:visible; }
.mobile-nav nav{ display:flex; flex-direction:column; gap:6px; }
.mobile-nav nav a{
  font-family:var(--f-display); font-size:30px; font-weight:500; padding-block:12px;
  border-bottom:1px solid var(--line-soft); color:#fbf6ec;
}
.mobile-nav__foot{ margin-top:30px; }
.mobile-nav__foot .btn{ width:100%; margin-bottom:14px; }
.mobile-nav__foot p{ font-family:var(--f-mono); font-size:12px; letter-spacing:.12em; color:var(--text-mut); text-align:center; }

/* =========================================================
   HERO
   ========================================================= */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; padding-bottom:clamp(56px,8vh,96px); padding-top:130px; isolation:isolate; }
.hero__media{ position:absolute; inset:0; z-index:-1; overflow:hidden; }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:65% 50%; transform:scale(1.05); }
.hero__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  opacity:0; transition:opacity 1.4s var(--ease);
}
.hero__video.is-active{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .hero__video{ display:none; }
}
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(16,12,8,.93) 0%, rgba(16,12,8,.74) 38%, rgba(16,12,8,.18) 72%, rgba(16,12,8,.42) 100%),
    linear-gradient(0deg, rgba(16,12,8,.92) 0%, rgba(16,12,8,0) 46%);
}
.hero__inner{ position:relative; max-width:830px; }
.hero__title{
  font-family:var(--f-display); font-optical-sizing:auto;
  font-weight:600; font-size:clamp(38px, 6vw, 62px); line-height:1.04; letter-spacing:-.015em;
  margin:22px 0 0; color:#fdf9f0;
  text-wrap:balance;
}
.hero__title em{ font-style:italic; font-weight:500; color:var(--gold-bright); }
.hero__lead{
  margin-top:26px; max-width:610px; font-size:clamp(17px,1.8vw,20px); color:var(--text-soft); line-height:1.6;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.hero__trust{
  margin-top:30px; font-size:14.5px; color:var(--text-mut); display:flex; align-items:center; flex-wrap:wrap; gap:.55em;
}
.hero__trust strong{ color:var(--text); font-weight:600; }
.stars{ color:var(--gold); letter-spacing:.12em; }
.hero__trust .dot{ color:var(--gold-deep); }

/* =========================================================
   TAGESKURS TICKER
   ========================================================= */
.ticker{ background:#0d0a06; border-top:1px solid var(--line-soft); overflow:hidden; padding-block:13px; }
.ticker__track{ display:flex; width:max-content; animation:ticker 70s linear infinite; }
.ticker__set{ display:flex; gap:56px; padding-right:56px; }
.ticker__item{
  display:inline-flex; align-items:center; gap:12px; white-space:nowrap;
  font-family:var(--f-mono); font-size:13px; letter-spacing:.06em; color:var(--text-mut);
}
.ticker__item strong{ color:var(--gold-bright); font-weight:500; font-variant-numeric:tabular-nums; }
.ticker__item::before{ content:""; width:5px; height:5px; background:var(--gold); transform:rotate(45deg); flex:none; opacity:.75; }
.ticker__item--label{ color:var(--gold); letter-spacing:.18em; text-transform:uppercase; font-size:11.5px; }
@keyframes ticker{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .ticker__track{ animation:none; } }

/* =========================================================
   TRUST STRIP
   ========================================================= */
.trust{ background:var(--bg-2); border-block:1px solid var(--line-soft); }
.trust__grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.trust__item{ padding:46px 30px; text-align:center; border-right:1px solid var(--line-soft); transition:background .35s var(--ease); }
.trust__item:last-child{ border-right:none; }
.trust__item .icon{ margin-inline:auto; transition:color .35s var(--ease), transform .35s var(--ease); }
.trust__item:hover{ background:var(--surface); }
.trust__item:hover .icon{ color:var(--gold-bright); transform:translateY(-3px); }
.trust__item h3{ font-family:var(--f-display); font-weight:600; font-size:21px; margin-top:18px; color:#fbf6ec; }
.trust__item p{ margin-top:9px; font-size:15px; color:var(--text-mut); line-height:1.5; }

/* =========================================================
   SERVICES
   ========================================================= */
.services{ background:var(--bg); }
.services__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden; }
.svc{
  background:var(--surface); padding:38px 30px; min-height:215px;
  display:flex; flex-direction:column; transition:background .35s var(--ease);
  position:relative;
}
.svc::after{ content:""; position:absolute; left:0; top:0; width:100%; height:2px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); }
.svc:hover{ background:var(--surface-2); }
.svc:hover::after{ transform:scaleX(1); }
.svc__ico{ color:var(--gold); margin-bottom:auto; transition:color .35s var(--ease), transform .35s var(--ease); }
.svc:hover .svc__ico{ color:var(--gold-bright); transform:translateY(-3px); }
.svc h3{ font-family:var(--f-display); font-weight:600; font-size:22px; margin-top:26px; color:#fbf6ec; }
.svc p{ margin-top:9px; font-size:15px; color:var(--text-mut); line-height:1.5; }

.brands{
  margin-top:clamp(34px,4vw,52px); display:flex; flex-wrap:wrap;
  align-items:baseline; gap:12px 30px;
}
.brands__label{
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold); flex:none;
}
.brands__list{
  font-family:var(--f-display); font-style:italic; font-weight:500;
  font-size:clamp(18px,2.2vw,23px); color:var(--text-soft); line-height:1.5;
}

/* =========================================================
   FULL-BLEED BAND
   ========================================================= */
.band{ position:relative; height:clamp(360px, 52vh, 560px); overflow:hidden; isolation:isolate; }
.band img{ position:absolute; inset:0; width:100%; height:120%; top:-10%; object-fit:cover; object-position:center 40%; }
.band__overlay{ position:absolute; inset:0; display:flex; align-items:center; background:linear-gradient(90deg, rgba(16,12,8,.86) 0%, rgba(16,12,8,.5) 50%, rgba(16,12,8,.2) 100%); }
.band__quote{
  font-family:var(--f-display); font-style:italic; font-weight:400;
  font-size:clamp(24px, 3.4vw, 40px); line-height:1.22; max-width:680px; color:var(--gold-bright);
  text-wrap:balance;
}

/* CTA banner (full-bleed image + centered call to action) */
.band--cta{ height:auto; min-height:clamp(440px, 60vh, 620px); }
.band--cta img{ object-position:center 45%; }
.band__overlay--center{
  justify-content:center; text-align:center;
  background:linear-gradient(0deg, rgba(16,12,8,.84) 0%, rgba(16,12,8,.58) 45%, rgba(16,12,8,.74) 100%);
  padding-block:clamp(56px,8vh,96px);
}
.banner__inner{ max-width:780px; margin-inline:auto; }
.eyebrow--center::after{
  content:""; width:26px; height:1px; background:var(--gold); opacity:.7; display:inline-block;
}
.banner__title{
  font-family:var(--f-display); font-weight:600; letter-spacing:-.01em;
  font-size:clamp(30px,4.4vw,52px); line-height:1.1; color:#fbf6ec;
  margin-top:16px; text-wrap:balance;
}
.banner__lead{
  margin-top:18px; font-size:clamp(16.5px,1.4vw,19px); line-height:1.65;
  color:var(--text-soft); max-width:60ch; margin-inline:auto;
}
.banner__actions{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:34px;
}

/* =========================================================
   GOLDRECHNER
   ========================================================= */
.calc{ background:var(--bg-2); border-block:1px solid var(--line-soft); }
.calc__inner{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,80px); align-items:center; }
.calc__intro .section__title{ margin-top:18px; }
.calc__points{ list-style:none; margin-top:26px; display:flex; flex-direction:column; gap:13px; }
.calc__points li{ display:flex; align-items:center; gap:13px; font-size:16.5px; color:var(--text-soft); }
.calc__points li::before{
  content:""; width:22px; height:22px; flex:none; border-radius:50%;
  border:1px solid var(--gold);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l3.5 3.5L18 7' fill='none' stroke='%23C9A24B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat;
}

.calc__card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:8px; padding:clamp(26px,3vw,40px);
  position:relative;
}
.calc__card::before{
  content:""; position:absolute; inset:0; border-radius:8px; pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(232,217,168,.08);
}
.calc__head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:26px; padding-bottom:16px; border-bottom:1px solid var(--line);
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.22em; text-transform:uppercase;
}
.calc__head-label{ display:inline-flex; align-items:center; gap:10px; color:var(--gold); font-weight:500; }
.calc__dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); animation:calcPulse 2.4s ease-in-out infinite; }
.calc__head-note{ color:var(--text-mut); letter-spacing:.14em; }
@keyframes calcPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
@media (prefers-reduced-motion: reduce){ .calc__dot{ animation:none; } }
.calc__rate{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin-top:10px; font-family:var(--f-mono); font-size:12.5px; letter-spacing:.04em; color:var(--text-mut);
}
.calc__rate output{ color:var(--gold-bright); font-variant-numeric:tabular-nums; }
.field{ margin-bottom:22px; }
.field > label{ display:block; font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--text-mut); margin-bottom:9px; }
.select-wrap{ position:relative; }
.select-wrap svg{ position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--gold); pointer-events:none; }
select, input[type=number], input[type=text], input[type=tel], input[type=email], textarea{
  width:100%; background:var(--bg); border:1px solid var(--line-soft); color:var(--text);
  padding:13px 15px; border-radius:var(--radius); font-size:16px;
  transition:border-color .25s var(--ease), background .25s var(--ease);
  appearance:none;
}
select{ padding-right:42px; }
select:focus, input:focus, textarea:focus{ outline:none; border-color:var(--gold); background:#0d0a06; }
textarea{ resize:vertical; min-height:84px; }

.weight-wrap{ position:relative; }
.weight-unit{ position:absolute; right:16px; top:50%; transform:translateY(-50%); color:var(--text-mut); font-family:var(--f-mono); font-size:14px; pointer-events:none; }
input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:3px; margin-top:18px;
  background:linear-gradient(var(--gold),var(--gold)) no-repeat var(--line-soft);
  background-size:20% 100%; border-radius:3px; cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:var(--gold); border:3px solid var(--bg); box-shadow:0 0 0 1px var(--gold); }
input[type=range]::-moz-range-thumb{ width:18px; height:18px; border:none; border-radius:50%; background:var(--gold); }

.calc__result{
  margin-top:6px; display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:22px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.calc__result-label{ font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-mut); }
.calc__result-value{
  font-family:var(--f-mono); font-weight:600; font-size:clamp(28px,3.4vw,38px); color:var(--gold-bright);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.calc__note{ font-size:13px; color:var(--text-mut); margin:16px 0 22px; line-height:1.5; }

/* =========================================================
   PROCESS (ivory band)
   ========================================================= */
.section--ivory{ background:var(--ivory); color:var(--ink); }
.section--ivory .eyebrow{ color:var(--bronze); }
.section--ivory .eyebrow::before,
.section--ivory .section__head:not(.section__head--left) .eyebrow::after{ background:var(--bronze); }
.section--ivory .section__title{ color:var(--ink); }

.steps{ list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,48px); counter-reset:s; }
.step{ position:relative; padding-top:30px; border-top:1px solid var(--line-ink); }
.step__num{
  display:block; font-family:var(--f-display); font-style:italic; font-weight:500;
  font-size:clamp(38px,4vw,48px); line-height:1; color:var(--bronze);
  font-variant-numeric:tabular-nums;
}
.step h3{ font-family:var(--f-display); font-weight:600; font-size:clamp(22px,2.4vw,28px); margin-top:16px; color:var(--ink); }
.step p{ margin-top:12px; font-size:16.5px; line-height:1.6; color:#4a4031; }

.ways{ margin-top:clamp(48px,6vw,80px); }
.ways__title{ font-family:var(--f-display); font-weight:600; font-size:24px; color:var(--ink); margin-bottom:26px; }
.ways__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.way{ background:var(--ivory-2); border:1px solid var(--line-ink); border-radius:6px; padding:28px 26px; }
.way__ico{ color:var(--bronze); }
.way h4{ font-family:var(--f-display); font-weight:600; font-size:19px; margin-top:14px; color:var(--ink); }
.way p{ margin-top:7px; font-size:15px; color:#5b5142; line-height:1.5; }

/* =========================================================
   WHY / ABOUT
   ========================================================= */
.why{ background:var(--bg); }
.why__inner{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(40px,5vw,80px); align-items:center; }
.why__text p{ margin-top:20px; color:var(--text-soft); font-size:17.5px; line-height:1.7; }
.why__stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:44px; padding-top:34px; border-top:1px solid var(--line); }
.stat__num{ display:block; font-family:var(--f-display); font-weight:600; font-size:clamp(34px,4vw,46px); color:var(--gold-bright); line-height:1; font-variant-numeric:tabular-nums; }
.stat__label{ display:block; margin-top:10px; font-size:13.5px; color:var(--text-mut); line-height:1.4; }
.why__media{ border-radius:8px; overflow:hidden; border:1px solid var(--line); }
.why__media img{ width:100%; aspect-ratio:4/3.4; object-fit:cover; }

/* =========================================================
   GALLERY STRIP
   ========================================================= */
.gallery{ display:grid; grid-template-columns:repeat(4,1fr); }
.gallery--six{ grid-template-columns:repeat(3,1fr); }
.gallery__item{ position:relative; overflow:hidden; aspect-ratio:1/1; }
.gallery__item img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.gallery__item:hover img{ transform:scale(1.06); }
.gallery__item figcaption{
  position:absolute; left:0; bottom:0; right:0; padding:18px 22px;
  font-family:var(--f-display); font-style:italic; font-size:19px; color:var(--gold-bright);
  background:linear-gradient(0deg, rgba(16,12,8,.82), rgba(16,12,8,0));
}

/* =========================================================
   REVIEWS
   ========================================================= */
.reviews{ background:var(--bg-2); border-block:1px solid var(--line-soft); }
.reviews__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.review{ background:var(--surface); border:1px solid var(--line-soft); border-radius:8px; padding:34px 30px; }
.review .stars{ font-size:16px; }
.review p{ margin-top:18px; font-family:var(--f-display); font-style:italic; font-size:19px; line-height:1.55; color:#ece3d2; }
.review footer{ margin-top:22px; font-size:14.5px; color:var(--text-mut); font-family:var(--f-mono); letter-spacing:.02em; }
.review footer strong{ color:var(--gold); font-weight:600; }
.reviews__note{ text-align:center; margin-top:30px; font-size:13px; color:var(--text-mut); font-style:italic; }

/* =========================================================
   REGIONS
   ========================================================= */
.regions{ background:var(--bg); }
.regions__list{
  list-style:none; display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  column-gap:20px; row-gap:16px; max-width:980px; margin-inline:auto;
}
.regions__list li{
  display:inline-flex; align-items:center; gap:20px;
  font-family:var(--f-display); font-weight:500; font-size:clamp(21px,2.6vw,30px);
  line-height:1.15; color:var(--text-soft);
  transition:color .3s var(--ease);
}
.regions__list li::after{
  content:""; width:6px; height:6px; border:1px solid var(--gold-deep);
  transform:rotate(45deg); flex:none;
}
.regions__list li:last-child::after{ display:none; }
.regions__list li:hover{ color:var(--gold-bright); }

/* =========================================================
   FAQ
   ========================================================= */
.faq{ background:var(--bg-2); border-top:1px solid var(--line-soft); }
.faq__inner{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(36px,5vw,70px); align-items:start; }
.faq__list{ display:flex; flex-direction:column; }
.qa{ border-bottom:1px solid var(--line-soft); }
.qa summary{
  list-style:none; cursor:pointer; padding:24px 0; display:flex; align-items:center; justify-content:space-between; gap:24px;
  font-family:var(--f-display); font-weight:500; font-size:clamp(18px,2vw,22px); color:#fbf6ec;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa__plus{ position:relative; width:18px; height:18px; flex:none; }
.qa__plus::before,.qa__plus::after{ content:""; position:absolute; background:var(--gold); transition:transform .3s var(--ease); }
.qa__plus::before{ left:0; top:8px; width:18px; height:1.6px; }
.qa__plus::after{ left:8px; top:0; width:1.6px; height:18px; }
.qa[open] .qa__plus::after{ transform:scaleY(0); }
.qa__body{ overflow:hidden; max-height:0; transition:max-height .4s var(--ease); }
.qa[open] .qa__body{ max-height:520px; }
.qa__body p{ padding-bottom:24px; color:var(--text-soft); font-size:16.5px; line-height:1.65; max-width:64ch; }

/* =========================================================
   CONTACT
   ========================================================= */
.contact{ background:var(--bg); }
.contact__inner{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(40px,5vw,80px); align-items:start; }
.contact__info p{ margin-top:18px; color:var(--text-soft); font-size:17.5px; line-height:1.65; }
.contact__list{ list-style:none; margin-top:34px; display:flex; flex-direction:column; gap:22px; }
.contact__list li{ display:flex; gap:16px; align-items:flex-start; }
.contact__list .icon{ color:var(--gold); margin-top:3px; flex:none; }
.contact__k{ display:block; font-family:var(--f-mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-mut); margin-bottom:4px; }
.contact__list a{ color:var(--text); font-size:18px; transition:color .25s var(--ease); }
.contact__list a:hover{ color:var(--gold-bright); }
.contact__list em{ color:var(--text-mut); font-size:13px; }

.contact__form{ background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:clamp(26px,3vw,40px); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.contact__legal{ margin-top:16px; font-size:12.5px; color:var(--text-mut); line-height:1.5; }
.form-status{ margin-top:14px; font-size:15px; min-height:1.2em; }
.form-status.is-ok{ color:var(--gold-bright); }
.form-status.is-err{ color:#e0a3a3; }
input.invalid, textarea.invalid, select.invalid{ border-color:#a5564f; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background:#0b0805; border-top:1px solid var(--line-soft); padding-top:clamp(56px,6vw,84px); }
.footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; padding-bottom:50px; }
.brand--footer .brand__name{ font-size:20px; }
.footer__brand p{ margin-top:18px; color:var(--text-mut); font-size:15px; line-height:1.6; max-width:38ch; }
.footer__col h4{ font-family:var(--f-mono); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:18px; font-weight:600; }
.footer__col a, .footer__col span{ display:block; color:var(--text-soft); font-size:15px; margin-bottom:11px; transition:color .25s var(--ease); }
.footer__col a:hover{ color:var(--gold-bright); }
.footer__reg{ color:var(--text-mut)!important; font-size:13px!important; line-height:1.5; }
.footer__reg em, .footer__col em{ color:var(--gold-deep); }
.footer__bar{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding-block:24px; border-top:1px solid var(--line-soft); font-size:13px; color:var(--text-mut); }
.footer__made em{ color:var(--gold-deep); }

/* prevent grid/flex children from blowing out tracks (min-content overflow) */
.calc__inner > *, .why__inner > *, .faq__inner > *, .contact__inner > *,
.field, .select-wrap, .weight-wrap{ min-width:0; }
.calc__result{ flex-wrap:wrap; }

/* =========================================================
   REVEAL ANIMATION (IntersectionObserver + CSS)
   ========================================================= */
.reveal-ready [data-reveal]{
  opacity:0; transform:translateY(26px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  will-change:opacity, transform;
}
.reveal-ready [data-reveal].is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal-ready [data-reveal]{ opacity:1!important; transform:none!important; transition:none; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1024px){
  .nav{ display:none; }
  .burger{ display:grid; }
  .header__cta{ display:none; }
  .services__grid{ grid-template-columns:repeat(2,1fr); }
  .trust__grid{ grid-template-columns:repeat(2,1fr); }
  .trust__item:nth-child(2){ border-right:none; }
  .trust__item:nth-child(1),.trust__item:nth-child(2){ border-bottom:1px solid var(--line-soft); }
  .calc__inner{ grid-template-columns:1fr; }
  .why__inner{ grid-template-columns:1fr; }
  .why__media{ order:-1; }
  .faq__inner{ grid-template-columns:1fr; }
  .contact__inner{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  body{ font-size:18px; }
  .topbar{ display:none; }
  .mainbar__inner{ gap:12px; height:66px; }
  .brand__name{ font-size:19px; }
  .brand__sub{ font-size:8.5px; letter-spacing:.2em; }
  .hero{ min-height:auto; padding-top:104px; padding-bottom:64px; }
  .hero__media img{ object-position:60% 50%; }
  .steps{ grid-template-columns:1fr; gap:30px; }
  .ways__grid{ grid-template-columns:1fr; }
  .why__stats{ grid-template-columns:repeat(2,1fr); gap:26px 18px; }
  .reviews__grid{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr 1fr; gap:34px 24px; }
  .field-row{ grid-template-columns:1fr; }
  .band__overlay{ background:linear-gradient(0deg, rgba(16,12,8,.9) 0%, rgba(16,12,8,.45) 100%); }
}
@media (max-width:460px){
  .services__grid{ grid-template-columns:1fr; }
  .trust__grid{ grid-template-columns:1fr; }
  .trust__item{ border-right:none!important; border-bottom:1px solid var(--line-soft); }
  .gallery{ grid-template-columns:1fr 1fr; }
  .footer__grid{ grid-template-columns:1fr; }
  .footer__bar{ flex-direction:column; }
}

/* =========================================================
   NAV DROPDOWN + SUBPAGES (Ankauf category pages)
   ========================================================= */
/* --- desktop dropdown --- */
.nav__group{ position:relative; display:flex; align-items:center; }
.nav__trigger{ display:inline-flex; align-items:center; gap:6px; }
.nav__chev{ width:15px; height:15px; color:var(--gold-deep); transition:transform .3s var(--ease); }
.nav__group:hover .nav__chev,
.nav__group:focus-within .nav__chev{ transform:rotate(180deg); color:var(--gold); }
/* invisible bridge so the menu doesn't close in the gap below the trigger */
.nav__group::after{ content:""; position:absolute; top:100%; left:-12px; right:-12px; height:14px; }
.nav__menu{
  position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(8px);
  min-width:252px; padding:10px;
  background:#0d0a06; border:1px solid var(--line); border-radius:7px;
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .26s var(--ease), transform .26s var(--ease); z-index:120;
}
.nav__group:hover .nav__menu,
.nav__group:focus-within .nav__menu{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.nav__menu a{
  font-size:15px; font-weight:500; color:var(--text-soft);
  padding:10px 14px; border-radius:4px; white-space:nowrap;
  display:flex; align-items:center; gap:12px;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.nav__menu a::after{ display:none; }
.nav__menu .icon{ width:18px; height:18px; color:var(--gold-deep); transition:color .2s var(--ease); }
.nav__menu a:hover{ background:var(--surface); color:var(--gold-bright); }
.nav__menu a:hover .icon{ color:var(--gold); }

/* --- mobile dropdown (native details) --- */
.mobile-nav nav .mnav-group{ border-bottom:1px solid var(--line-soft); }
.mobile-nav nav .mnav-group > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  font-family:var(--f-display); font-size:30px; font-weight:500; padding-block:12px; color:#fbf6ec;
}
.mnav-group > summary::-webkit-details-marker{ display:none; }
.mobile-nav nav .mnav-group__chev{ width:24px; height:24px; color:var(--gold); transition:transform .3s var(--ease); }
.mnav-group[open] .mnav-group__chev{ transform:rotate(180deg); }
.mobile-nav nav .mnav-sub{ display:flex; flex-direction:column; padding:2px 0 14px; }
.mobile-nav nav .mnav-sub a{
  font-family:var(--f-sans); font-size:16px; font-weight:500; color:var(--text-soft);
  padding:8px 0 8px 2px; border-bottom:none;
}

/* --- subpage hero --- */
.subhero{ position:relative; padding-top:clamp(146px,17vh,206px); padding-bottom:clamp(50px,8vh,92px); isolation:isolate; overflow:hidden; }
.subhero__media{ position:absolute; inset:0; z-index:-1; }
.subhero__media img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.subhero__scrim{ position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(16,12,8,.95) 0%, rgba(16,12,8,.76) 46%, rgba(16,12,8,.36) 100%),
    linear-gradient(0deg, rgba(16,12,8,.92) 0%, rgba(16,12,8,0) 64%);
}
.subhero__inner{ position:relative; max-width:780px; }
.subhero__title{
  font-family:var(--f-display); font-optical-sizing:auto; font-weight:600;
  font-size:clamp(34px,5vw,56px); line-height:1.05; letter-spacing:-.015em; margin-top:20px; color:#fdf9f0; text-wrap:balance;
}
.subhero__title em{ font-style:italic; font-weight:500; color:var(--gold-bright); }
.subhero__lead{ margin-top:22px; max-width:620px; font-size:clamp(17px,1.7vw,20px); color:var(--text-soft); line-height:1.62; }
.subhero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }

/* --- breadcrumb --- */
.crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:11px;
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-mut); }
.crumbs a{ color:var(--text-mut); transition:color .25s var(--ease); }
.crumbs a:hover{ color:var(--gold-bright); }
.crumbs [aria-current]{ color:var(--gold); }
.crumbs__sep{ width:4px; height:4px; background:var(--gold-deep); transform:rotate(45deg); flex:none; }

/* --- checklist (reuses gold check bullet) --- */
.checks{ list-style:none; margin-top:28px; display:flex; flex-direction:column; gap:14px; }
.checks li{ display:flex; align-items:flex-start; gap:14px; font-size:16.5px; color:var(--text-soft); line-height:1.5; }
.checks li::before{
  content:""; width:23px; height:23px; flex:none; border-radius:50%; margin-top:1px; border:1px solid var(--gold);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l3.5 3.5L18 7' fill='none' stroke='%23C9A24B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat;
}

/* --- cross-links to other categories --- */
.crosslinks{ background:var(--bg-2); border-top:1px solid var(--line-soft); }
.cl-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden; }
.cl{ background:var(--surface); padding:28px; display:flex; align-items:center; gap:18px; position:relative; transition:background .3s var(--ease); }
.cl:hover{ background:var(--surface-2); }
.cl__ico{ color:var(--gold); flex:none; transition:color .3s var(--ease), transform .3s var(--ease); }
.cl:hover .cl__ico{ color:var(--gold-bright); transform:translateY(-2px); }
.cl__t{ font-family:var(--f-display); font-weight:600; font-size:18.5px; color:#fbf6ec; }
.cl__arrow{ margin-left:auto; color:var(--gold-deep); flex:none; transition:transform .3s var(--ease), color .3s var(--ease); }
.cl:hover .cl__arrow{ transform:translateX(4px); color:var(--gold); }

@media (max-width:1024px){ .cl-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .cl-grid{ grid-template-columns:1fr; } }

/* =========================================================
   CTA — persönlicher Ansprechpartner (Inhaber-Foto)
   ========================================================= */
.band--invite{ min-height:clamp(470px,64vh,650px); }
.band__overlay--invite{
  justify-content:flex-start; align-items:flex-end; text-align:left;
  background:
    linear-gradient(90deg, rgba(16,12,8,.93) 0%, rgba(16,12,8,.8) 44%, rgba(16,12,8,.36) 100%),
    linear-gradient(0deg, rgba(16,12,8,.72) 0%, rgba(16,12,8,0) 58%);
  padding-block:clamp(46px,7vh,88px);
}
.invite{
  display:grid; grid-template-columns:minmax(160px,250px) 1fr;
  gap:clamp(22px,4vw,62px); align-items:end; width:100%;
}
.invite__person{ margin:0; align-self:end; display:flex; flex-direction:column; align-items:center; gap:16px; }
.invite__pic{ position:relative; width:100%; max-width:236px; }
.invite__pic::before{
  content:""; position:absolute; left:50%; top:6%; transform:translateX(-50%);
  width:124%; aspect-ratio:1; border-radius:50%; z-index:0;
  background:radial-gradient(circle at 50% 44%, rgba(201,162,75,.30), rgba(16,12,8,0) 66%);
}
.invite__pic img{
  position:relative; z-index:1; width:100%; height:auto;
  filter:drop-shadow(0 18px 32px rgba(0,0,0,.55));
}
.invite__badge{
  background:#0d0a06; border:1px solid var(--line); border-radius:999px;
  padding:10px 20px; text-align:center;
}
.invite__role{ display:block; font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
.invite__since{ display:block; font-size:11.5px; color:var(--text-mut); margin-top:3px; }
.invite__body{ padding-bottom:clamp(6px,2vh,24px); }
.invite__body .eyebrow{ margin-bottom:6px; }
.band--invite .banner__title{ margin-top:6px; }
.band--invite .banner__lead{ margin-inline:0; }
.banner__actions--left{ justify-content:flex-start; }

@media (max-width:760px){
  .band__overlay--invite{ justify-content:center; text-align:center; align-items:center; }
  .invite{ grid-template-columns:1fr; justify-items:center; gap:30px; }
  .invite__pic{ max-width:min(186px,54vw); }
  .invite__pic::before{ display:none; }
  .band--invite .banner__lead{ margin-inline:auto; }
  .banner__actions--left{ justify-content:center; }
}

/* =========================================================
   FEINGEHALT / KARAT GRID (Kategorie-Detailseiten)
   ========================================================= */
.karat-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line-soft); border:1px solid var(--line-soft);
  border-radius:var(--radius); overflow:hidden; margin-top:8px;
}
.karat{ background:var(--surface); padding:clamp(24px,3vw,34px) 22px; text-align:center; transition:background .35s var(--ease); }
.karat:hover{ background:var(--surface-2); }
.karat__k{ display:block; font-family:var(--f-display); font-weight:600; font-size:clamp(28px,3.6vw,42px); line-height:1; color:var(--gold-bright); font-variant-numeric:tabular-nums; }
.karat__d{ display:block; margin-top:11px; font-family:var(--f-mono); font-size:12px; letter-spacing:.05em; color:var(--text-mut); line-height:1.4; }
@media (max-width:560px){ .karat-grid{ grid-template-columns:repeat(2,1fr); } }

/* single-column FAQ on category pages (full width) */
.faq--solo .faq__inner{ grid-template-columns:1fr; max-width:860px; margin-inline:auto; }
.faq--solo .section__head--left{ margin-bottom:8px; }

/* honeypot (spam-Falle) — für Menschen unsichtbar */
.hp{ position:absolute !important; left:-9999px !important; top:auto; width:1px; height:1px; overflow:hidden; }