/* styles.css */
:root{
  --bg:#1E1E1E;
  --text:#E6E6E6;
  --muted:rgba(230,230,230,.72);
  --line:rgba(230,230,230,.10);
  --gold:#C49A6C;
  --shadow: 0 12px 28px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  background:
    radial-gradient(1200px 520px at 20% -10%, rgba(196,154,108,.12), transparent 55%),
    radial-gradient(900px 520px at 85% 0%, rgba(196,154,108,.08), transparent 55%),
    var(--bg);
  color:var(--text);
}
a{color:inherit;text-decoration:none}
a:hover{opacity:.92}
strong{color:#fff}
.wrap{max-width:1060px;margin:0 auto;padding:0 16px}

/* accessibility */
.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{left:16px;top:16px;width:auto;height:auto;background:#000;padding:10px 12px;border-radius:12px;border:1px solid var(--line);z-index:9999}

/* topbar */
.topbar{
  position:sticky;top:0;z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(17,17,18,.68);
  border-bottom:1px solid var(--line);
}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0;gap:12px}
.brand{display:flex;align-items:center;gap:12px}
.brand__dot{
  width:12px;height:12px;border-radius:999px;
  background:linear-gradient(180deg,var(--gold),rgba(196,154,108,.55));
  box-shadow:0 0 0 6px rgba(196,154,108,.12);
}
.brand__name{font-weight:900;letter-spacing:.2px}
.brand__sub{font-size:12px;color:var(--muted);margin-top:2px}
.nav{display:none;gap:18px;align-items:center}
.nav a{font-size:13px;color:var(--muted)}
.nav a:hover{color:var(--text)}
.menuBtn{
  width:44px;height:44px;border-radius:14px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  display:grid;place-items:center;
}
.menuBtn span{display:block;width:18px;height:2px;background:var(--text);opacity:.85;margin:2px 0;border-radius:2px}
.mobileNav{
  border-top:1px solid var(--line);
  padding:10px 16px 14px;
  display:grid;gap:10px;
  background: rgba(17,17,18,.88);
}
.mobileNav a{color:var(--muted);padding:8px 0}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 14px;border-radius:16px;
  border:1px solid rgba(196,154,108,.35);
  background:rgba(196,154,108,.12);
  color:#fff;font-weight:800;
  box-shadow:0 10px 26px rgba(0,0,0,.28);
}
.btn:hover{background:rgba(196,154,108,.16)}
.btn--ghost{border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--text)}
.btn--small{padding:10px 12px;border-radius:14px;font-size:13px}

/* hero */
.hero{padding:22px 0 10px}
.hero__grid{display:grid;grid-template-columns:1fr;gap:14px;align-items:start}
.pill{
  display:inline-flex;gap:10px;align-items:center;
  padding:10px 12px;border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:var(--muted);
  font-size:12px;
}
h1{margin:12px 0 8px;font-size:32px;line-height:1.06;letter-spacing:-.7px}
.accent{color:var(--gold)}
.lead{margin:0;color:rgba(230,230,230,.88);font-size:14px;line-height:1.48;max-width:62ch}
.trustRow{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px}
.trust{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:999px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.16);
  color:rgba(230,230,230,.88);
  font-size:12px;
}
.trust__k{color:var(--gold);font-weight:1000}
.ctaRow{margin-top:12px;display:flex;flex-wrap:wrap;gap:10px}
.note{
  margin-top:12px;display:flex;gap:10px;align-items:flex-start;
  border:1px solid rgba(196,154,108,.25);
  background:rgba(196,154,108,.08);
  border-radius:18px;padding:12px;
  color:rgba(230,230,230,.86);font-size:13px;line-height:1.4
}
.note__dot{width:10px;height:10px;border-radius:999px;background:var(--gold);margin-top:4px;opacity:.9}
.hero__fade{height:18px;background:linear-gradient(180deg, transparent, rgba(0,0,0,.16))}

/* sections */
.section{padding:26px 0}
.section--dark{
  background:
    radial-gradient(900px 520px at 10% 20%, rgba(196,154,108,.10), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.10));
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.section--soft{background:rgba(255,255,255,.02);border-top:1px solid var(--line)}
.sectionHead h2{margin:0;font-size:24px;letter-spacing:-.4px}
.sectionHead p{margin:8px 0 0;color:var(--muted);font-size:14px;line-height:1.5;max-width:74ch}

/* cards */
.grid3{margin-top:14px;display:grid;grid-template-columns:1fr;gap:12px}
.grid2{margin-top:12px;display:grid;grid-template-columns:1fr;gap:12px}
.card{
  border:1px solid var(--line);
  background:rgba(0,0,0,.18);
  border-radius:18px;
  padding:14px;
}
.card h3{margin:0 0 10px;font-size:16px}
.card ul{margin:0;padding-left:18px;color:rgba(230,230,230,.90)}
.card li{margin:6px 0}
.p{margin:0 0 10px;color:rgba(230,230,230,.88);font-size:14px;line-height:1.5}
.card--dark{background:rgba(0,0,0,.24)}

/* media cards (SMALL CARD) */
.mediaCard{
  border:1px solid var(--line);
  background:rgba(0,0,0,.22);
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.mediaCard img{width:100%;display:block;object-fit:cover}
.mediaCard__caption{
  padding:10px 12px 12px;
  border-top:1px solid var(--line);
  background:rgba(17,17,18,.72);
}
.mediaCard--alt{background:rgba(255,255,255,.03)}
.mediaCard--small{
  max-width:360px;
  margin: 10px auto 0;
}
.mediaCard--small img{
  aspect-ratio: 4 / 5;
  max-height: 420px;
}
.mediaCard--tight .mediaCard__caption{display:none;} /* tight = Bild als Proof, ohne Textblock */

/* price */
.price{display:flex;align-items:baseline;gap:10px}
.price__big{font-size:26px;font-weight:1000;color:var(--gold);letter-spacing:-.4px}
.price__small{color:rgba(230,230,230,.90);font-size:12px}
.chips{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px}
.chip{
  font-size:12px;color:rgba(230,230,230,.85);
  padding:7px 10px;border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
}

/* mini banner */
.miniBanner{
  margin-top:12px;
  border:1px solid rgba(196,154,108,.22);
  background:rgba(196,154,108,.08);
  border-radius:18px;
  padding:14px;
}
.miniBanner__t{font-weight:1000}
.miniBanner__d{margin-top:6px;color:rgba(230,230,230,.86);font-size:13px;line-height:1.45}

/* use flow */
.useFlow{margin-top:14px;display:grid;gap:12px}
.useCard{
  border:1px solid var(--line);
  background:rgba(0,0,0,.16);
  border-radius:18px;
  padding:14px;
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
.useCard__num{
  width:34px;height:34px;border-radius:12px;
  display:grid;place-items:center;
  font-weight:1000;color:#111;
  background:linear-gradient(180deg,var(--gold),rgba(196,154,108,.65));
  box-shadow:0 10px 22px rgba(0,0,0,.35);
}
.useCard__body h3{margin:0 0 8px;font-size:16px;letter-spacing:-.2px}
.useCard__body p{margin:0;color:rgba(230,230,230,.88);font-size:14px;line-height:1.5}
.useList{margin:10px 0 0;padding-left:18px;color:rgba(230,230,230,.86);font-size:13px}
.useList li{margin:6px 0}
.microNote{
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(196,154,108,.22);
  background:rgba(196,154,108,.08);
  color:rgba(230,230,230,.80);
  font-size:12px;
  line-height:1.45;
}

/* callout */
.callout{
  margin-top:12px;
  border:1px solid rgba(196,154,108,.30);
  background:rgba(196,154,108,.10);
  border-radius:18px;
  padding:14px;
}
.callout__title{font-weight:1000}
.callout__text{margin:8px 0 0;color:rgba(230,230,230,.90);font-size:13px;line-height:1.45}

/* banner */
.banner{
  border:1px solid rgba(196,154,108,.30);
  background:linear-gradient(180deg, rgba(196,154,108,.10), rgba(0,0,0,.12));
  border-radius:22px;
  padding:16px;
  display:grid;grid-template-columns:1fr;gap:14px;
  box-shadow:var(--shadow);
}
.banner__buttons{margin-top:12px;display:flex;flex-wrap:wrap;gap:10px}
.micro{margin-top:10px;color:rgba(230,230,230,.70);font-size:12px}
.priceBox{
  border:1px solid var(--line);
  background:rgba(17,17,18,.70);
  border-radius:18px;
  padding:14px;
}
.priceBox__big{font-size:34px;font-weight:1000;color:var(--gold);letter-spacing:-.6px}
.priceBox__sub{font-weight:1000;margin-top:2px}
.priceBox__small{color:var(--muted);font-size:12px;margin-top:4px}
.divider{height:1px;background:var(--line);margin:12px 0}
.priceBox__list{display:grid;gap:8px;color:rgba(230,230,230,.90);font-size:13px}

/* accordion */
.accordion{margin-top:14px;display:grid;gap:10px}
.accBtn{
  width:100%;
  text-align:left;
  border:1px solid var(--line);
  background:rgba(0,0,0,.18);
  color:var(--text);
  padding:14px 14px;
  border-radius:18px;
  font-weight:900;
  display:flex;align-items:center;justify-content:space-between;
}
.accIcon{color:var(--gold);font-weight:1000}
.accPanel{
  border:1px solid var(--line);
  background:rgba(0,0,0,.12);
  border-radius:18px;
  padding:14px 14px;
  margin-top:-6px;
  color:rgba(230,230,230,.90);
}
.accPanel p{margin:0}

/* footer */
.footer{
  border-top:1px solid var(--line);
  background:rgba(0,0,0,.20);
  padding:22px 0 28px;
}
.footer__grid{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
.footer__brand{font-weight:1000}
.footer__sub{color:var(--muted);margin-top:4px}
.footer__links{margin-top:10px;color:rgba(230,230,230,.82)}
.sep{opacity:.5;margin:0 6px}
.footer__mail{margin-top:6px;color:rgba(230,230,230,.82)}
.footer__meta{color:rgba(230,230,230,.85);font-size:13px}
.footer__small{margin-top:10px;color:rgba(230,230,230,.68);font-size:12px}
.footer__toTop{display:flex;justify-content:flex-start}

/* desktop */
@media (min-width: 920px){
  .nav{display:flex}
  .menuBtn{display:none}
  .mobileNav{display:none !important}

  .hero{padding:40px 0 14px}
  .hero__grid{grid-template-columns:1.1fr .9fr;gap:22px}
  h1{font-size:42px}

  .grid3{grid-template-columns:repeat(3,1fr)}
  .grid2{grid-template-columns:repeat(2,1fr)}
  .banner{grid-template-columns:1.2fr .8fr;align-items:stretch}
  .footer__grid{grid-template-columns:1.1fr 1fr .6fr}
  .footer__toTop{justify-content:flex-end}

  .mediaCard--small{margin:0}
  .useCard{grid-template-columns:44px 1.1fr .9fr;align-items:center;gap:16px}
  .useCard__num{align-self:start}
  .useCard__media{display:flex;justify-content:flex-end}
}