/* =========================================================
   DIAMANTEN HANS — Landingpage
   Schwarz / Gold · STIG ROCK
   ========================================================= */

:root{
  /* Grundwerte von stig-international.com uebernommen:
     reines Schwarz, Flaechen #0C0C0C, Text #EDEDED */
  --bg:        #000000;
  --bg-2:      #0c0c0c;
  --panel:     #0c0c0c;
  --panel-2:   #141414;
  --line:      rgba(217,180,90,.18);
  --line-soft: rgba(255,255,255,.07);
  --veil:      rgba(0,0,0,.67);   /* Schleier ueber Fotografie, wie im Konzernauftritt */

  --gold:      #d9b45a;
  --gold-2:    #f0d693;
  --gold-deep: #a8853a;

  --text:      #ededed;
  --muted:     #9c9c9c;
  --dim:       #6e6e6e;

  /* STIG-Stahlblau — auf der Konzernseite das Signal fuer Zertifizierung */
  --steel:      #6eadd1;
  --steel-soft: #bcd5e8;

  --up:        #6ddba0;
  --down:      #e8736f;

  /* Anzeigeschrift: Didone mit hohem Strichkontrast — die Schrift der Juwelierhaeuser */
  --serif: "Bodoni Moda", "Bodoni 72", Didot, "Didot LT STD", "Hoefler Text",
           Garamond, "Songti SC", "Noto Serif CJK SC", "Apple SD Gothic Neo", serif;
  /* Werkschrift: geometrische Grotesk, gesperrt als Versalien */
  --sans:  "Jost", "Futura", "Avenir Next", "Century Gothic", -apple-system,
           BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei",
           "Malgun Gothic", Arial, sans-serif;

  --wrap: 1180px;
  --r:    3px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:88px; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:17px;
  font-weight:300;
  line-height:1.78;
  letter-spacing:.004em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

.wrap{ width:min(100% - 40px, var(--wrap)); margin-inline:auto; }
.center{ text-align:center; }
.gold{ color:var(--gold); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--gold); color:#000; padding:10px 16px; font-weight:600;
}
.skip:focus{ left:12px; top:12px; }

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

/* ---------- Typografie ---------- */
h1,h2,h3,
.perf__num,.card__big,.card__price,.hero__facts b,.kpis b,.levels b,.ranks b,
.bonuslist b,.saving__calc td,.steps3 b,.chain__punch,.cycles span,.team b,
.hero__photo strong,.foot__brand,.brand__text strong,.card__no,.way__no,
.tbl thead th,.tbl--ranks tbody th[scope="row"],.chain__title,.fact__kicker,.quote{
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1,"tnum" 1;
}
h1,h2,h3{
  font-family:var(--serif); font-weight:400; font-optical-sizing:auto;
  margin:0 0 .5em; text-wrap:balance;
}
h1{ font-size:clamp(3.1rem, 7.6vw, 5.8rem); line-height:.98; letter-spacing:-.018em; }
h2{ font-size:clamp(2.05rem, 4.6vw, 3.4rem); line-height:1.06; letter-spacing:-.012em; }
h3{ font-size:clamp(1.28rem, 2.1vw, 1.62rem); line-height:1.22; letter-spacing:-.004em; }

.eyebrow{
  font-family:var(--sans); font-size:.66rem; font-weight:500;
  letter-spacing:.42em; text-transform:uppercase; color:var(--gold);
  margin:0 0 1.05rem; text-indent:.42em;
}
.eyebrow::after{
  content:""; display:block; width:56px; height:1px;
  background:linear-gradient(90deg,var(--gold),transparent); margin-top:.85rem;
}
.sec__head .eyebrow::after{ margin-inline:auto; background:linear-gradient(90deg,transparent,var(--gold),transparent); }

.lead{ font-size:clamp(1.06rem,1.6vw,1.22rem); line-height:1.72; color:#cbc8c3;
       max-width:52ch; font-weight:300; }
.lead strong{ font-weight:500; color:var(--text); }
.p{ color:var(--muted); max-width:60ch; margin:0 0 1.15rem; line-height:1.82; }
.p strong{ font-weight:500; color:#c6c3be; }
.p--center{ margin-inline:auto; text-align:center; }
.fineprint{ color:var(--dim); font-size:.82rem; font-style:italic; line-height:1.7;
  margin-top:1.5rem; letter-spacing:.01em; }
.sec__head .fineprint{ text-align:center; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--sans); font-weight:500; font-size:.76rem;
  letter-spacing:.24em; text-indent:.24em; text-transform:uppercase; text-decoration:none;
  padding:1.15rem 2.2rem; border-radius:2px; border:1px solid transparent;
  cursor:pointer; transition:transform .25s ease, box-shadow .3s ease, background .3s ease, color .25s ease;
  white-space:nowrap;
}
.btn--gold{
  background:linear-gradient(180deg,var(--gold-2) 0%,var(--gold) 52%,var(--gold-deep) 100%);
  color:#0d0b07; box-shadow:0 10px 34px rgba(217,180,90,.16);
}
.btn--gold:hover{ transform:translateY(-1px); box-shadow:0 16px 44px rgba(217,180,90,.28); }
.btn--ghost{ border-color:var(--line); color:var(--text); background:transparent; }
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold); background:rgba(217,180,90,.04); }
.btn--sm{ padding:.78rem 1.35rem; font-size:.64rem; letter-spacing:.2em; text-indent:.2em; }
.btn--lg{ padding:1.2rem 2.5rem; }
.btn--xl{ padding:1.35rem 3.2rem; font-size:.82rem; letter-spacing:.26em; text-indent:.26em; }

/* ---------- Navigation ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  background:rgba(8,7,10,.55); border-bottom:1px solid transparent;
  transition:background .3s ease, border-color .3s ease;
}
.nav.is-stuck{ background:rgba(8,7,10,.92); border-bottom-color:var(--line); }
.nav__inner{ display:flex; align-items:center; gap:1.5rem; min-height:72px; }

.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; margin-right:auto; }
.brand__mark{ color:var(--gold); display:grid; place-items:center; }
.brand__text{ display:flex; flex-direction:column; line-height:1.15; }
.brand__text strong{ font-family:var(--serif); font-size:1.06rem; font-weight:500;
  letter-spacing:.24em; text-indent:.24em; white-space:nowrap; }
.brand__text em{ font-style:normal; font-size:.55rem; font-weight:400; letter-spacing:.32em;
  text-indent:.32em; text-transform:uppercase; color:var(--gold); white-space:nowrap; }

.nav__links{ display:flex; gap:1.75rem; }
.nav__links a{
  text-decoration:none; white-space:nowrap;
  font-size:.68rem; font-weight:400; letter-spacing:.2em;
  text-indent:.2em; text-transform:uppercase; color:var(--muted);
  position:relative; padding-block:.35rem; transition:color .25s ease;
}
.nav__links a:hover, .nav__links a.is-active{ color:var(--gold); }
.nav__links a.is-active::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:var(--gold);
}

.burger{ display:none; background:none; border:0; padding:8px; cursor:pointer; }
.burger span{ display:block; width:24px; height:2px; background:var(--text); margin:5px 0; transition:.25s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobilenav{
  display:none; flex-direction:column; gap:.2rem; padding:1rem 20px 1.6rem;
  border-top:1px solid var(--line); background:rgba(8,7,10,.97);
}
.mobilenav a{ text-decoration:none; padding:.7rem 0; color:var(--muted); border-bottom:1px solid var(--line-soft); }
.mobilenav a.btn{ margin-top:1rem; border-bottom:0; color:#0a0a0a; justify-content:center; }

/* ---------- Hero ---------- */
.hero{ position:relative; padding-top:120px; overflow:hidden; }
.hero__glow{
  position:absolute; inset:-25% -10% auto -10%; height:80vh; pointer-events:none;
  background:
    radial-gradient(60% 55% at 30% 25%, rgba(217,180,90,.16), transparent 65%),
    radial-gradient(45% 45% at 82% 12%, rgba(217,180,90,.10), transparent 70%);
}
.hero__grid{
  position:relative; display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,5vw,4.5rem); align-items:center; padding-block:clamp(2rem,6vw,5rem);
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin:2rem 0 2.6rem; }

.hero__facts{
  list-style:none; margin:0; padding:1.6rem 0 0; border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem;
}
.hero__facts li{ display:flex; flex-direction:column; gap:.2rem; }
.hero__facts b{ font-family:var(--serif); font-size:clamp(1.5rem,2.6vw,2rem); color:var(--gold); }
.hero__facts span{ font-size:.64rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dim); line-height:1.55; }

.hero__photo{ margin:0; position:relative; border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line); box-shadow:0 40px 90px rgba(0,0,0,.7); }
.hero__photo img{ width:100%; }
.hero__photo figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:2.6rem 1.6rem 1.3rem;
  background:linear-gradient(transparent, rgba(6,5,8,.92));
  display:flex; flex-direction:column;
}
.hero__photo strong{ font-family:var(--serif); font-size:1.25rem; letter-spacing:.14em; }
.hero__photo span{ font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); }

.trustbar{ border-block:1px solid var(--line); background:rgba(255,255,255,.015); }
.trustbar__inner{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:1.7rem; padding:1.35rem 0;
  font-size:.64rem; font-weight:400; letter-spacing:.34em; text-indent:.34em;
  text-transform:uppercase; color:var(--dim);
}
.trustbar i{ width:4px; height:4px; border-radius:50%; background:var(--gold); opacity:.5; }

/* ---------- Sections ---------- */
.sec{ padding:clamp(4.4rem,10vw,8.5rem) 0; }
.sec--alt{ background:var(--bg-2); border-block:1px solid var(--line-soft); }
.sec__head{ max-width:720px; margin:0 auto clamp(2.8rem,5.5vw,4.6rem); text-align:center; }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.gap-lg{ gap:clamp(1.4rem,3vw,2.2rem); align-items:stretch; margin-top:2rem; }

.shot{ margin:0; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); position:relative; }
.shot img{ width:100%; }
.shot figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:1.6rem 1.2rem .9rem;
  background:linear-gradient(transparent, rgba(6,5,8,.9));
  font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); text-align:center;
}
.shot--tall img{ aspect-ratio:4/5; object-fit:cover; }
.shot--wide{ max-width:920px; margin:0 auto 3rem; }

.quote{
  margin:2.4rem 0 0; padding:1.7rem 1.9rem; border-left:1px solid var(--gold);
  background:transparent; border-radius:0;
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:1.38rem; line-height:1.5; letter-spacing:-.005em; color:#e2ded8;
}
.quote cite{ display:block; margin-top:1.1rem; font-family:var(--sans); font-style:normal;
  font-size:.62rem; font-weight:400; letter-spacing:.34em; text-indent:.34em;
  text-transform:uppercase; color:var(--gold); }

/* ---------- Wege-Vergleich ---------- */
.ways{ list-style:none; margin:0; padding:0; border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden; }
.way{
  display:grid; grid-template-columns:64px 1fr 1.1fr; gap:1.2rem; align-items:center;
  padding:1.3rem 1.6rem; border-bottom:1px solid var(--line-soft); background:var(--panel);
}
.way:last-child{ border-bottom:0; }
.way__no{ font-family:var(--serif); font-size:1.5rem; color:var(--dim); letter-spacing:.1em; }
.way__name{ display:flex; flex-direction:column; font-size:1.14rem; color:var(--gold); }
.way__name em{ font-style:normal; font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--dim); margin-bottom:.25rem; }
.way__risk{ color:var(--muted); font-size:.94rem; text-align:right; }
.way--win{
  background:linear-gradient(90deg, rgba(217,180,90,.10), rgba(217,180,90,.03));
  border:1px solid var(--gold); border-radius:var(--r);
}
.way--win .way__no{ color:var(--gold); }
.way--win .way__name{ color:var(--text); font-size:1.4rem; font-family:var(--serif); }
.way--win .way__risk{ color:var(--gold-2); }

/* ---------- Wertentwicklung ---------- */
.perf{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; }
.perf__card{ background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--r); padding:2rem 1.8rem; }
.perf__label{ font-size:.62rem; letter-spacing:.36em; text-indent:.36em; text-transform:uppercase;
  color:var(--dim); margin:0 0 .8rem; }
.perf__num{ font-family:var(--serif); font-size:clamp(3rem,7vw,4.6rem); line-height:1; margin:0 0 .7rem; }
.perf__card--down .perf__num{ color:var(--down); text-shadow:0 0 40px rgba(232,115,111,.28); }
.perf__card--up   .perf__num{ color:var(--up);   text-shadow:0 0 40px rgba(109,219,160,.28); }
.perf__sub{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dim);
  border-top:1px solid var(--line-soft); padding-top:.7rem; margin:0 0 .5rem; }
.perf__note{ color:var(--muted); font-size:.88rem; margin:0 0 1.4rem; }
.bar{ height:5px; border-radius:99px; background:rgba(255,255,255,.07); overflow:hidden; }
.bar i{ display:block; height:100%; border-radius:99px; }
.perf__card--down .bar i{ background:var(--down); }
.perf__card--up   .bar i{ background:var(--up); }

.sources{ margin-top:2.6rem; padding-top:1.6rem; border-top:1px solid var(--line-soft); font-size:.86rem; color:var(--muted); }
.sources__title{ font-size:.66rem; letter-spacing:.26em; text-transform:uppercase; color:var(--dim); margin:0 0 .9rem; }
.sources p{ margin:.35rem 0; }
.sources a{ color:var(--gold); text-decoration:underline; text-underline-offset:3px; }
.sources__note{ font-style:italic; color:var(--dim); margin-top:.9rem !important; }

/* ---------- Cards ---------- */
.cards{ display:grid; gap:1.3rem; }
.cards--3{ grid-template-columns:repeat(3,1fr); }
.card{
  background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--r);
  padding:2.1rem 1.8rem; transition:border-color .3s ease, transform .3s ease, background .3s ease;
}
.card:hover{ border-color:var(--line); transform:translateY(-4px); background:var(--panel-2); }
.card__no{ font-family:var(--serif); font-size:1.5rem; color:var(--gold); opacity:.55; letter-spacing:.12em; }
.card h3{ margin:.7rem 0 .5rem; }
.card p{ color:var(--muted); margin:0; font-size:.95rem; }
.card .ico{ display:grid; place-items:center; width:44px; height:44px; border-radius:12px;
  border:1px solid var(--line); color:var(--gold); margin-bottom:1rem; }
.card .ico svg{ width:22px; height:22px; }

.card--price{ text-align:center; padding:2.2rem 1.6rem; }
.card__kicker{ font-size:.78rem; color:var(--muted); margin:0 0 1.4rem; }
.card__big{ font-family:var(--serif); font-size:clamp(2.6rem,5vw,3.6rem); margin:0; line-height:1; }
.card__price{ font-family:var(--serif); font-size:1.9rem; color:var(--gold); margin:1.4rem 0 0;
  padding-top:1.2rem; border-top:1px solid var(--line-soft); }
.card--hot{ border-color:var(--gold); background:linear-gradient(180deg, rgba(217,180,90,.09), transparent 60%); }

/* ---------- Marktvolumen-Chart ---------- */
.chart{ margin:0; background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--r); padding:1.8rem; }
.chart svg{ width:100%; height:auto; }
.chart__grid line{ stroke:rgba(255,255,255,.07); stroke-width:1; }
.chart__ylab text, .chart__xlab text{ fill:var(--dim); font-size:12px; font-family:var(--sans); }
.chart__ylab text{ text-anchor:end; }
.chart__xlab text{ text-anchor:middle; letter-spacing:.08em; }
.chart__val text{ fill:var(--text); font-size:13px; font-family:var(--sans); text-anchor:middle; font-weight:600; }
.chart__line{ fill:none; stroke:var(--gold); stroke-width:2.5; stroke-linecap:round;
  filter:drop-shadow(0 0 10px rgba(217,180,90,.45)); }
.chart__dot circle{ fill:var(--gold-2); }
.chart figcaption{ margin-top:1.4rem; padding-top:1.2rem; border-top:1px solid var(--line-soft);
  text-align:center; color:var(--muted); font-size:.95rem; }
.chart figcaption strong{ color:var(--text); }
.chart figcaption em{ display:block; margin-top:.5rem; font-style:normal;
  font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--dim); }

/* ---------- System-Fakten ---------- */
.fact{ margin:2rem 0; padding:1.5rem 1.6rem; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); }
.fact__kicker{ font-family:var(--serif); font-size:1.35rem; color:var(--gold); margin:0 0 .6rem; }
.fact p{ margin:0; color:var(--muted); font-size:.95rem; }

.meta{ margin:0; display:grid; gap:1rem; }
.meta div{ display:grid; grid-template-columns:130px 1fr; gap:1rem; padding-bottom:.9rem; border-bottom:1px solid var(--line-soft); }
.meta dt{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); }
.meta dd{ margin:0; font-size:.93rem; color:var(--muted); }

/* ---------- Wertschöpfungskette ---------- */
.chain{ background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--r); padding:2rem 1.8rem; margin-bottom:1.5rem; }
.chain--win{ border-color:var(--gold); background:linear-gradient(180deg, rgba(217,180,90,.07), transparent 70%); }
.chain__title{ font-family:var(--serif); font-size:1.7rem; margin:0 0 .6rem; }
.chain__desc{ color:var(--muted); margin:0 0 1.6rem; max-width:70ch; font-size:.95rem; }
.chain__row{ list-style:none; margin:0; padding:0; display:grid; gap:.8rem; grid-template-columns:repeat(4,1fr); }
.chain__row--long{ grid-template-columns:repeat(8,1fr); }
.chain__row li{
  background:rgba(255,255,255,.03); border:1px solid var(--line-soft); border-radius:10px;
  padding:.9rem .8rem; display:flex; flex-direction:column; gap:.25rem; text-align:center;
}
.chain__row b{ font-size:.62rem; letter-spacing:.16em; color:var(--dim); font-weight:500; }
.chain__row span{ color:var(--gold); font-size:.92rem; }
.chain__row em{ font-style:normal; font-size:.74rem; color:var(--dim); line-height:1.35; }
.chain--win .chain__row li{ border-color:var(--line); }
.chain--win .chain__desc{ margin:1.6rem 0 .8rem; }
.chain__punch{ font-family:var(--serif); font-size:clamp(1.4rem,3vw,2rem); margin:0; text-align:center; }
.chain__punch .gold{ font-size:1.3em; }

/* ---------- Dual-System ---------- */
.dual{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.dual__card{ background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--r); padding:1.9rem 1.7rem; }
.dual__tag{ font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin:0 0 .8rem; }
.dual__card h3{ margin:0 0 1.4rem; font-size:1.25rem; }
.dual__note{ color:var(--dim); font-size:.82rem; margin:1.2rem 0 0; }

.steps{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.6rem; }
.steps--line li{
  position:relative; padding:.6rem 1.05rem; border:1px solid var(--line-soft); border-radius:2px;
  font-size:.66rem; font-weight:400; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); background:transparent;
}
.steps--line li:last-child{ border-color:var(--gold); color:var(--gold); }

.cycles{ display:flex; gap:.8rem; flex-wrap:wrap; }
.cycles span{
  width:56px; height:56px; display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--gold); color:var(--gold); font-family:var(--serif); font-size:1.1rem;
  box-shadow:inset 0 0 24px rgba(217,180,90,.12);
}

.kpis{ list-style:none; margin:2.4rem 0 0; padding:1.8rem 0 0; border-top:1px solid var(--line-soft);
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; text-align:center; }
.kpis b{ display:block; font-family:var(--serif); font-size:clamp(2rem,4vw,2.8rem); color:var(--gold); }
.kpis span{ font-size:.62rem; letter-spacing:.3em; text-indent:.3em; text-transform:uppercase; color:var(--dim); }

/* ---------- Tabellen ---------- */
.tablewrap{ overflow-x:auto; border:1px solid var(--line-soft); border-radius:var(--r); background:var(--panel); }
.tbl{ width:100%; border-collapse:collapse; min-width:760px; font-size:.9rem; }
.tbl th, .tbl td{ padding:.85rem 1rem; text-align:center; border-bottom:1px solid var(--line-soft); white-space:nowrap; }
.tbl thead th{ font-family:var(--sans); font-size:.72rem; font-weight:500; color:var(--text);
  letter-spacing:.2em; text-indent:.2em; text-transform:uppercase;
  background:rgba(255,255,255,.03); padding-block:1.05rem; }
.tbl tbody th[scope="row"]{ text-align:left; color:var(--dim); font-weight:400; font-size:.7rem;
  letter-spacing:.16em; text-transform:uppercase; white-space:normal; }
.tbl td{ color:var(--muted); }
.tbl .is-hot{ background:rgba(217,180,90,.08); color:var(--gold-2); position:relative; }
.tbl thead .is-hot{ color:var(--gold); }
.tbl thead .is-hot i{ display:block; font-style:normal; font-size:.55rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold); margin-top:.2rem; }
.tbl__total td, .tbl__total th{ background:rgba(217,180,90,.05); color:var(--text); font-weight:600; }
.tbl tbody tr:last-child td, .tbl tbody tr:last-child th{ border-bottom:0; }
.tbl--ranks{ min-width:880px; }
.tbl--ranks tbody th[scope="row"]{ text-transform:none; font-size:.9rem; color:var(--text); font-family:var(--serif); letter-spacing:.04em; }
.tbl--ranks .is-top th, .tbl--ranks .is-top td{ background:rgba(217,180,90,.08); color:var(--gold-2); }

/* ---------- Ersparnis ---------- */
.saving{ margin-top:2.4rem; display:grid; grid-template-columns:1.2fr .8fr; gap:2.4rem; align-items:center;
  background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--r); padding:2.2rem 2rem; }
.saving h3{ margin:0 0 .9rem; }
.saving__calc{ width:100%; border-collapse:collapse; }
.saving__calc th, .saving__calc td{ padding:.85rem 1rem; border-bottom:1px solid var(--line-soft); font-size:.95rem; }
.saving__calc th{ text-align:left; color:var(--muted); font-weight:400; }
.saving__calc td{ text-align:right; font-family:var(--serif); font-size:1.35rem; }
.saving__calc .is-total th{ color:var(--text); }
.saving__calc .is-total td{ color:var(--gold); font-size:1.9rem; }
.saving__calc .is-total th, .saving__calc .is-total td{ border-bottom:0; background:rgba(217,180,90,.06); }

/* ---------- 3 Schritte ---------- */
.steps3{ list-style:none; margin:0 0 3rem; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.steps3 li{ text-align:center; padding:2.2rem 1.5rem; background:var(--panel);
  border:1px solid var(--line-soft); border-radius:var(--r); }
.steps3 b{ display:block; font-family:var(--serif); font-size:3rem; color:var(--gold); opacity:.5; line-height:1; }
.steps3 h3{ margin:1rem 0 .6rem; }
.steps3 p{ margin:0; color:var(--muted); font-size:.93rem; }

/* ---------- Vergütung ---------- */
.bonuslist{ list-style:none; margin:0 0 2.4rem; padding:0; display:grid; gap:.8rem; }
.bonuslist li{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.15rem 1.5rem; background:var(--panel); border:1px solid var(--line-soft); border-radius:12px;
  transition:border-color .25s ease;
}
.bonuslist li:hover{ border-color:var(--line); }
.bonuslist__name{ display:flex; flex-direction:column; font-size:.85rem; letter-spacing:.16em; text-transform:uppercase; }
.bonuslist__name em{ font-style:normal; font-size:.82rem; letter-spacing:normal; text-transform:none;
  color:var(--dim); margin-top:.25rem; }
.bonuslist b{ font-family:var(--serif); font-size:clamp(1.4rem,2.6vw,1.9rem); color:var(--gold); white-space:nowrap; }

.panel{ background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--r); padding:2rem 1.8rem; }
.panel--wide{ margin-top:1.6rem; }
.panel h3{ margin:0 0 1rem; color:var(--gold-2); }

.levels{ list-style:none; margin:1.4rem 0 0; padding:0; display:grid; gap:.6rem; }
.levels li{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.85rem 1.1rem; background:rgba(255,255,255,.03); border-radius:10px; border:1px solid var(--line-soft); }
.levels span{ display:flex; flex-direction:column; font-size:.92rem; }
.levels em{ font-style:normal; font-size:.76rem; color:var(--dim); }
.levels b{ font-family:var(--serif); font-size:1.3rem; color:var(--gold); }
.levels--flat li{ padding:.7rem 1.1rem; }

.ranks{ display:grid; grid-template-columns:repeat(5,1fr); gap:.7rem; margin-top:1.6rem; }
.ranks span{ display:flex; flex-direction:column; gap:.2rem; text-align:center; padding:.9rem .5rem;
  border:1px solid var(--line-soft); border-radius:10px; background:rgba(255,255,255,.02);
  font-size:.72rem; color:var(--dim); }
.ranks b{ font-family:var(--serif); font-size:1.3rem; color:var(--gold); }
.ranks .is-top{ border-color:var(--gold); background:rgba(217,180,90,.08); }

.ticks{ list-style:none; margin:1.4rem 0 0; padding:0; display:grid; gap:.7rem; }
.ticks li{ position:relative; padding-left:1.8rem; color:var(--muted); font-size:.94rem; }
.ticks li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--gold); font-size:.9rem; }

/* ---------- Team ---------- */
.team{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.team li{ background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--r);
  padding:1.6rem 1.4rem; display:flex; flex-direction:column; gap:.3rem; text-align:center; }
.team b{ font-family:var(--serif); font-size:1.2rem; font-weight:400; }
.team span{ font-size:.6rem; letter-spacing:.3em; text-indent:.3em; text-transform:uppercase; color:var(--gold); }
.team a{ font-size:.82rem; color:var(--dim); text-decoration:none; margin-top:.5rem; word-break:break-word; }
.team a:hover{ color:var(--gold); }

/* ---------- Finaler CTA ---------- */
.cta{ position:relative; padding:clamp(5rem,11vw,9rem) 0; overflow:hidden; text-align:center; }
.cta__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(38% 55% at 50% 8%,  rgba(217,180,90,.22), transparent 70%),
    radial-gradient(30% 45% at 12% 82%, rgba(217,180,90,.14), transparent 72%),
    radial-gradient(30% 45% at 88% 78%, rgba(217,180,90,.12), transparent 72%),
    radial-gradient(70% 90% at 50% 50%, #12101a 0%, #0a090d 60%, var(--bg) 100%);
}
.cta__bg::before{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(1.2px 1.2px at 28% 62%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(2px 2px   at 46% 26%, rgba(240,214,147,.85), transparent 60%),
    radial-gradient(1.3px 1.3px at 63% 72%, rgba(255,255,255,.6),  transparent 60%),
    radial-gradient(1.7px 1.7px at 78% 34%, rgba(240,214,147,.7),  transparent 60%),
    radial-gradient(1.2px 1.2px at 88% 60%, rgba(255,255,255,.5),  transparent 60%),
    radial-gradient(1.4px 1.4px at 36% 88%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1.1px 1.1px at 70% 12%, rgba(255,255,255,.5),  transparent 60%);
}
.cta::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, var(--bg-2) 0%, rgba(8,7,10,.55) 35%, rgba(8,7,10,.75) 70%, var(--bg) 100%);
}
.cta__inner{ position:relative; z-index:2; max-width:820px; }
.cta .eyebrow{ text-align:center; }
.cta .eyebrow::after{ margin-inline:auto; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.cta h2{ margin-bottom:1.2rem; }
.cta .btn{ margin-top:1.8rem; }
.cta__hint{ margin:1.2rem 0 0; font-size:.84rem; color:var(--muted); }
.cta__social{ margin-top:3rem; padding-top:1.8rem; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:.4rem; align-items:center; }
.cta__social span{ font-size:.66rem; letter-spacing:.26em; text-transform:uppercase; color:var(--dim); }
.cta__social a{ font-family:var(--serif); font-size:1.3rem; color:var(--text); text-decoration:none; }
.cta__social a:hover{ color:var(--gold); }
.cta__social em{ font-style:normal; font-size:.78rem; letter-spacing:.12em; color:var(--gold); }

/* ---------- Footer ---------- */
.foot{ background:var(--bg-2); border-top:1px solid var(--line); padding:3.5rem 0 5.5rem; }
.foot__top{ display:flex; flex-wrap:wrap; gap:1.6rem; justify-content:space-between; align-items:flex-start;
  padding-bottom:2rem; border-bottom:1px solid var(--line-soft); }
.foot__brand{ font-family:var(--serif); font-size:1.3rem; letter-spacing:.18em; margin:0; }
.foot__sub{ margin:.3rem 0 0; font-size:.78rem; letter-spacing:.1em; color:var(--gold); }
.foot__nav{ display:flex; flex-wrap:wrap; gap:1.2rem; }
.foot__nav a{ font-size:.82rem; color:var(--muted); text-decoration:none; }
.foot__nav a:hover{ color:var(--gold); }

.disclaimer{ margin:2rem 0; padding:1.8rem; background:var(--panel); border:1px solid var(--line-soft);
  border-radius:var(--r); font-size:.86rem; color:var(--muted); }
.disclaimer__title{ font-size:.64rem; letter-spacing:.26em; text-transform:uppercase; color:var(--dim); margin:0 0 1rem; }
.disclaimer p{ margin:0 0 .7rem; }
.disclaimer p:last-child{ margin-bottom:0; }
.disclaimer .gold{ color:var(--gold); }

.foot__logos{ display:flex; flex-wrap:wrap; gap:2.2rem; justify-content:center; padding:1.6rem 0;
  border-block:1px solid var(--line-soft); font-size:.66rem; text-transform:uppercase;
  letter-spacing:.32em; text-indent:.32em; color:var(--dim); }
.foot__copy{ margin:1.6rem 0 0; text-align:center; font-size:.76rem; color:var(--dim); line-height:1.7; }

/* ---------- Mobile Sticky-CTA ---------- */
.fab{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:90; display:none;
  text-align:center; text-decoration:none; padding:1.15rem; border-radius:2px;
  background:linear-gradient(180deg,var(--gold-2) 0%,var(--gold) 52%,var(--gold-deep) 100%);
  color:#0d0b07; font-weight:500; font-size:.7rem; letter-spacing:.24em; text-indent:.24em;
  text-transform:uppercase; box-shadow:0 12px 34px rgba(0,0,0,.6);
}

/* ---------- Scroll-Reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-in{ opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width:1020px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__photo{ order:-1; max-width:520px; margin-inline:auto; }
  .grid-2{ grid-template-columns:1fr; }
  .cards--3{ grid-template-columns:1fr 1fr; }
  .chain__row--long{ grid-template-columns:repeat(4,1fr); }
  .ranks{ grid-template-columns:repeat(3,1fr); }
  .team{ grid-template-columns:1fr 1fr; }
  .saving{ grid-template-columns:1fr; }
  .dual{ grid-template-columns:1fr; }
  .shot--tall img{ aspect-ratio:16/10; }
}

@media (max-width:1200px){
  .nav__links{ display:none; }
  .burger{ display:block; }
  .mobilenav[data-open="true"]{ display:flex; }
}

@media (max-width:760px){
  body{ font-size:16px; }
  .nav__inner .btn--sm{ display:none; }
  .fab{ display:block; }
  .foot{ padding-bottom:6.5rem; }

  .hero{ padding-top:100px; }
  .hero__facts{ grid-template-columns:1fr; gap:.9rem; }
  .cards--3, .steps3{ grid-template-columns:1fr; }
  .perf{ grid-template-columns:1fr; }
  .chain__row, .chain__row--long{ grid-template-columns:1fr 1fr; }
  .ranks{ grid-template-columns:repeat(2,1fr); }
  .team{ grid-template-columns:1fr; }
  .kpis{ grid-template-columns:1fr; }

  .way{ grid-template-columns:44px 1fr; row-gap:.5rem; }
  .way__risk{ grid-column:2; text-align:left; font-size:.86rem; }

  .hero__cta{ flex-direction:column; align-items:stretch; }
  .hero__cta .btn{ width:100%; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
}

/* =========================================================
   MOBILE-FEINSCHLIFF — alles sauber mittig ausgerichtet
   ========================================================= */
@media (max-width:760px){

  .wrap{ width:min(100% - 32px, var(--wrap)); }
  .sec{ padding:clamp(3.2rem,11vw,4.6rem) 0; }
  .sec__head{ margin-bottom:2.2rem; }

  /* ---- Grundsatz: Fließtext zentriert ---- */
  .hero__copy,
  .sec .grid-2 > div,
  .sec__head,
  .panel,
  .fact,
  .saving__copy,
  .sources,
  .disclaimer,
  .chain{ text-align:center; }

  .p, .lead{ margin-inline:auto; }
  .eyebrow::after{ margin-inline:auto; background:linear-gradient(90deg,transparent,var(--gold),transparent); }

  /* ---- Hero ---- */
  .hero{ padding-top:92px; }
  .hero__grid{ gap:2.2rem; }
  .hero__photo{ max-width:420px; }
  .hero__cta{ margin:1.8rem auto 2.2rem; max-width:340px; }
  .hero__facts{ justify-items:center; text-align:center; padding-top:1.4rem; }
  .hero__facts li{ align-items:center; }
  .hero__facts span{ max-width:24ch; }

  /* ---- Trust-Leiste: keine Trennpunkte am Zeilenende ---- */
  .trustbar i{ display:none; }
  .trustbar__inner{ gap:.55rem 1.1rem; padding:.95rem 0; font-size:.64rem; letter-spacing:.18em; }

  /* ---- Zitat: Linie nach oben statt seitlich ---- */
  .quote{
    border-left:0; border-top:2px solid var(--gold);
    border-radius:0 0 var(--r) var(--r); text-align:center; padding:1.4rem 1.2rem;
    font-size:1.1rem; margin-top:1.6rem;
  }

  /* ---- Karten & Listen ---- */
  .card{ text-align:center; }
  .card .ico{ margin-inline:auto; }
  .card__no{ display:block; }

  .way{ grid-template-columns:1fr; justify-items:center; text-align:center; row-gap:.35rem; padding:1.4rem 1.1rem; }
  .way__no{ font-size:1.1rem; }
  .way__name{ align-items:center; }
  .way__risk{ grid-column:auto; text-align:center; max-width:30ch; }

  .bonuslist li{ flex-direction:column; align-items:center; text-align:center; gap:.5rem; padding:1.3rem 1.1rem; }
  .bonuslist__name{ align-items:center; }

  .levels li{ flex-direction:column; align-items:center; text-align:center; gap:.25rem; padding:.9rem 1rem; }
  .levels span{ align-items:center; }
  .levels--flat li{ flex-direction:row; justify-content:space-between; text-align:left; }

  /* ---- Firmendaten ---- */
  .meta div{ grid-template-columns:1fr; gap:.25rem; justify-items:center; text-align:center; }

  /* ---- Wertschöpfungskette ---- */
  .chain{ padding:1.7rem 1.2rem; }
  .chain__desc{ margin-inline:auto; }
  .chain__row, .chain__row--long{ grid-template-columns:1fr 1fr; gap:.6rem; }
  .chain__row li{ padding:.8rem .6rem; }
  .chain__row em{ font-size:.7rem; }

  /* ---- Dual-System / Kennzahlen ---- */
  .dual__card{ text-align:center; padding:1.7rem 1.3rem; }
  .steps{ justify-content:center; }
  .cycles{ justify-content:center; }
  .kpis li{ display:flex; flex-direction:column; align-items:center; }

  /* ---- Ersparnis-Rechnung ---- */
  .saving{ padding:1.8rem 1.2rem; gap:1.6rem; }
  .saving__calc th, .saving__calc td{ padding:.75rem .5rem; }

  /* ---- Vergütung ---- */
  .panel{ padding:1.8rem 1.3rem; }
  .ranks{ gap:.55rem; }

  .ticks{ display:inline-block; text-align:left; }

  /* ---- Tabellen: Scroll-Hinweis ---- */
  .tablewrap{ position:relative; }
  .tablewrap::after{
    content:"Seitlich scrollen für alle Spalten →";
    display:block; position:sticky; left:0;
    padding:.7rem 1rem; font-size:.66rem; letter-spacing:.14em;
    text-transform:uppercase; color:var(--dim); text-align:center;
    border-top:1px solid var(--line-soft);
  }
  .tbl{ font-size:.84rem; }
  .tbl th, .tbl td{ padding:.7rem .8rem; }

  /* ---- Finaler CTA ---- */
  .cta{ padding:clamp(4rem,14vw,6rem) 0; }
  .cta .btn{ width:100%; max-width:340px; }
  .cta__hint{ max-width:30ch; margin-inline:auto; }

  /* ---- Fußzeile ---- */
  .foot{ text-align:center; }
  .foot__top{ flex-direction:column; align-items:center; gap:1.4rem; }
  .foot__nav{ justify-content:center; gap:.9rem 1.1rem; }
  .foot__logos{ gap:1rem 1.6rem; font-size:.9rem; }
  .disclaimer{ padding:1.5rem 1.2rem; }
  .disclaimer p{ margin-inline:auto; max-width:42ch; }

  /* ---- Sticky-Button ---- */
  .fab{ left:14px; right:14px; bottom:14px; padding:.95rem; }
}

/* ---- Sehr schmale Geräte ---- */
@media (max-width:400px){
  .wrap{ width:min(100% - 24px, var(--wrap)); }
  .brand__text strong{ font-size:.92rem; letter-spacing:.12em; }
  .brand__text em{ font-size:.53rem; letter-spacing:.14em; }
  .chain__row, .chain__row--long{ grid-template-columns:1fr; }
  .ranks{ grid-template-columns:1fr 1fr; }
  .hero__facts b{ font-size:1.6rem; }
}

/* ---- Nachtrag: restliche Mittigkeit + Sticky-Button-Verhalten (Mobil) ---- */
@media (max-width:760px){
  .perf__card{ text-align:center; padding:1.7rem 1.3rem; }
  .perf__note{ margin-inline:auto; max-width:34ch; }
  .fineprint, .sec .fineprint{ text-align:center; margin-inline:auto; max-width:44ch; }
  .sources p{ margin-inline:auto; max-width:46ch; }
  .chart{ padding:1.3rem 1rem; }
  .chart figcaption{ text-align:center; }
  .shot figcaption{ text-align:center; }

  /* Sticky-Button blendet sich ein und gibt den finalen CTA frei */
  .fab{
    opacity:0; transform:translateY(140%); pointer-events:none;
    transition:opacity .3s ease, transform .35s cubic-bezier(.2,.7,.3,1);
  }
  .fab.is-visible{ opacity:1; transform:none; pointer-events:auto; }
}

/* ---- Mobiles Menü: mittig ---- */
.mobilenav a{ text-align:center; }
.mobilenav a:not(.btn){ letter-spacing:.06em; }

/* =========================================================
   WEGE-VERGLEICH — Gewinner-Zeile sauber in die Liste eingefügt
   (vorher: doppelte Trennlinie über der goldenen Karte)
   ========================================================= */
.way:nth-last-child(2){ border-bottom:0; }

.way--win{
  border:0;
  border-top:1px solid var(--gold);
  border-radius:0;
  padding-block:1.5rem;
  background:linear-gradient(180deg, rgba(217,180,90,.13), rgba(217,180,90,.03) 70%);
  box-shadow:inset 0 1px 0 rgba(240,214,147,.35), inset 0 -40px 60px -40px rgba(217,180,90,.18);
}
.way--win .way__name em{ color:var(--gold); opacity:.85; }

.way__no--mark{ display:grid; place-items:center; color:var(--gold); }
.way__no--mark svg{ width:28px; height:28px; filter:drop-shadow(0 0 12px rgba(217,180,90,.45)); }

@media (max-width:760px){
  .way--win{ padding:1.6rem 1.1rem 1.7rem; }
  .way__no--mark svg{ width:26px; height:26px; }
  .way--win .way__name{ margin-top:.2rem; }
}

/* =========================================================
   SICHTBARER DIREKTLINK ZUR ANMELDUNG
   (antippbar und kopierbar — auch wenn eine Vorschau-Umgebung
   das Öffnen über die Buttons unterbindet)
   ========================================================= */
.cta__url{
  margin:1.6rem auto 0; display:flex; flex-direction:column;
  align-items:center; gap:.45rem; max-width:100%;
}
.cta__url span{
  font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--dim);
}
.cta__url a{
  color:var(--gold); font-size:.92rem; word-break:break-all;
  text-decoration:underline; text-underline-offset:4px;
  text-decoration-color:rgba(217,180,90,.45); transition:text-decoration-color .2s ease;
}
.cta__url a:hover{ text-decoration-color:var(--gold); }

.foot__link{
  margin:1.5rem 0 0; text-align:center; font-size:.86rem; color:var(--muted);
}
.foot__link a{
  color:var(--gold); word-break:break-all;
  text-decoration:underline; text-underline-offset:3px;
}

@media (max-width:760px){
  .cta__url{ margin-top:1.4rem; }
  .cta__url a{ font-size:.86rem; }
  .foot__link{ font-size:.82rem; }
}

/* =========================================================
   SPRACHUMSCHALTER
   ========================================================= */
.lang{
  display:flex; align-items:center; gap:.45rem;
  border:1px solid var(--line); border-radius:2px;
  padding:.42rem .55rem .42rem .75rem; background:transparent;
  transition:border-color .25s ease;
}
.lang:hover, .lang:focus-within{ border-color:var(--gold); }
.lang__icon{ display:grid; place-items:center; color:var(--gold); }
.lang__icon svg{ width:15px; height:15px; }
.lang__sel{
  appearance:none; -webkit-appearance:none;
  background:transparent; border:0; color:var(--text);
  font-family:var(--sans); font-size:.66rem; font-weight:400;
  letter-spacing:.18em; text-transform:uppercase;
  padding:.1rem 1.1rem .1rem .1rem; cursor:pointer; outline:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),
                   linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:right 7px center, right 3px center;
  background-size:4px 4px, 4px 4px;
  background-repeat:no-repeat;
}
.lang__sel option{ background:#14131a; color:var(--text); }

@media (max-width:1200px){
  .lang{ margin-left:auto; }
}
@media (max-width:760px){
  .lang{ padding:.3rem .45rem .3rem .6rem; }
  .lang__sel{ font-size:.74rem; max-width:6.6rem; }
}
@media (max-width:400px){
  .lang__icon{ display:none; }
  .lang{ padding:.3rem .4rem .3rem .55rem; }
  .lang__sel{ max-width:5.4rem; font-size:.7rem; }
}

/* Kopfzeile mit Sprachwahl: Markenzeile kompakt halten */
@media (max-width:760px){
  .brand__text strong{ white-space:nowrap; }
  .brand__text em{ display:none; }
  .nav__inner{ gap:.7rem; }
}


/* =========================================================
   SCHLEIFEREI-VIDEOS
   ========================================================= */
.videos{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.4rem,3vw,2.2rem); }

.video{ margin:0; }
.video__frame{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  background:#0a090d; border:1px solid var(--line-soft);
  transition:border-color .3s ease;
}
.video:hover .video__frame{ border-color:var(--line); }
.video__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; z-index:1; }

/* Liegt hinter dem Player — sichtbar, solange dieser nicht geladen ist */
.video__fallback{ position:absolute; inset:0; display:grid; place-items:center; z-index:0;
  background:radial-gradient(60% 60% at 50% 45%, rgba(217,180,90,.07), transparent 70%); }
.video__play{
  width:62px; height:62px; display:grid; place-items:center;
  border:1px solid var(--gold); border-radius:50%; color:var(--gold);
}
.video__play svg{ width:22px; height:22px; margin-left:3px; }

.video figcaption{ display:flex; flex-direction:column; gap:.55rem; padding-top:1.15rem; }
.video figcaption b{
  font-family:var(--serif); font-size:1.06rem; font-weight:400;
  letter-spacing:-.004em; color:var(--text);
}
.video figcaption a{
  font-size:.6rem; font-weight:400; letter-spacing:.28em; text-indent:.28em;
  text-transform:uppercase; color:var(--gold); text-decoration:none;
  align-self:flex-start; padding-bottom:.2rem;
  border-bottom:1px solid rgba(217,180,90,.3); transition:border-color .25s ease;
}
.video figcaption a:hover{ border-bottom-color:var(--gold); }

@media (max-width:760px){
  .videos{ grid-template-columns:1fr; gap:2rem; }
  .video figcaption{ align-items:center; text-align:center; padding-top:1rem; }
  .video figcaption a{ align-self:center; }
}

/* Platzhalter ist selbst ein Link — greift, wenn der Player blockiert wird */
.video__fallback{ text-decoration:none; cursor:pointer; }
.video__fallback:hover .video__play{ background:rgba(217,180,90,.1); }
.video__play{ transition:background .25s ease; }


/* =========================================================
   GESTALTUNGSSPRACHE STIG INTERNATIONAL
   Stahlblau steht — wie im Konzernauftritt — ausschliesslich
   fuer Pruefung und Zertifizierung. Gold bleibt die Farbe
   der Marke Diamanten Hans.
   ========================================================= */

/* Pruefsiegel-Leiste unter dem Aufmacher */
.trustbar{ background:#0c0c0c; border-block-color:rgba(255,255,255,.07); }
.trustbar__inner{ color:var(--steel-soft); }
.trustbar i{ background:var(--steel); opacity:.55; }

/* Abschnitt Qualitaet und Sicherheit */
#sicherheit .eyebrow{ color:var(--steel); }
#sicherheit .eyebrow::after{ background:linear-gradient(90deg,transparent,var(--steel),transparent); }
#sicherheit .panel .eyebrow{ color:var(--steel); }
#sicherheit .panel h3{ color:var(--steel-soft); }
#sicherheit .shot{ border-color:rgba(110,173,209,.22); }

/* Haken der Kimberley-Liste */
.ticks li::before{ color:var(--steel); }

/* Quellenangaben sind Nachweise — daher ebenfalls blau */
.sources a{ color:var(--steel); text-decoration-color:rgba(110,173,209,.45); }
.sources a:hover{ text-decoration-color:var(--steel); }

/* Pruefinstitute in der Fusszeile */
.foot__logos{ color:var(--steel-soft); }

/* =========================================================
   VOLLFLAECHIGE DIAMANTFOTOGRAFIE MIT SCHLEIER
   ========================================================= */
.cta__bg{
  background:
    linear-gradient(var(--veil), var(--veil)),
    url("../img/diamanten-roh-brillant.jpg") center/cover no-repeat;
}
.cta__bg::before{
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(2px 2px   at 46% 26%, rgba(240,214,147,.6),  transparent 60%),
    radial-gradient(1.7px 1.7px at 78% 34%, rgba(240,214,147,.5), transparent 60%),
    radial-gradient(1.3px 1.3px at 63% 72%, rgba(255,255,255,.4), transparent 60%);
  opacity:.7;
}
.cta::after{
  background:linear-gradient(180deg, #000 0%, rgba(0,0,0,.45) 30%, rgba(0,0,0,.72) 72%, #000 100%);
}

/* Bildflaechen bekommen denselben ruhigen Rahmen wie im Konzernauftritt */
.shot, .hero__photo, .video__frame{ border-color:rgba(255,255,255,.09); }