:root{
    --bg:#0f0e0d;          /* dunkler Hintergrund */
    --card:#1a1816;        /* Karten */
    --brand:#d6a354;       /* warmes Gold */
    --text:#f6f3ee;
    --muted:#cfc7bd;
    --accent:#7c4a1f;      /* CTA Hover */
}
*{box-sizing:border-box}
body{
    margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    background: radial-gradient(1200px 800px at 70% -10%, #2a251d 0, var(--bg) 60%);
    color:var(--text); line-height:1.5;
}
.container{max-width:1100px; margin:0 auto; padding:24px}
header.hero{
    display:grid; gap:20px; align-items:center;
    grid-template-columns: 1.1fr 0.9fr; padding:32px 24px 8px;
}
@media (max-width:900px){ header.hero{grid-template-columns:1fr} }
.badge{display:inline-block; padding:6px 10px; border:1px solid var(--brand); color:var(--brand); border-radius:999px; font-weight:600; letter-spacing:.3px}
h1{font-size: clamp(28px, 4.2vw, 44px); margin:.3em 0}
p.lead{font-size: clamp(16px, 2.2vw, 20px); color:var(--muted); margin:.6em 0 1em}
.cta{
    display:inline-flex; align-items:center; gap:10px; padding:14px 18px; background:var(--brand);
    color:#1b140b; border-radius:10px; text-decoration:none; font-weight:700; box-shadow:0 10px 20px rgba(214,163,84,.15);
    transition:.2s transform, .2s background;
}
.cta:hover{ transform:translateY(-1px); background:#920003; }
.hero-img{ border-radius:14px; overflow:hidden; border:1px solid #2b2723; box-shadow:0 22px 40px rgba(0,0,0,.35) }
.hero-img img{ width:100%; height:auto; display:block; }

.trust{ display:flex; gap:16px; flex-wrap:wrap; margin-top:12px; color:var(--muted); font-size:14px }
.trust span{ display:inline-flex; gap:8px; align-items:center; background:#201c18; padding:8px 10px; border:1px solid #2b2723; border-radius:8px }

.grid{ display:grid; gap:18px; grid-template-columns: 1fr 1fr; margin-top:28px }
@media (max-width:900px){ .grid{ grid-template-columns:1fr } }

.card{
    background:var(--card); border:1px solid #2b2723; border-radius:14px; overflow:hidden;
}
.card .media{ aspect-ratio:16/9; background:#2b2723; }
.card .media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Banner: 2:1-Rahmen, nichts beschneiden -> Letterboxing ok */
.card .media.media--banner{ aspect-ratio:2/1; }
.card .media.media--banner img{ object-fit:contain; background:#2b2723; }
.card .content{ padding:16px 16px 18px }
.card h3{ margin:0 0 6px; font-size:20px }
.meta{ color:var(--muted); font-size:14px; display:flex; gap:10px; flex-wrap:wrap; margin-bottom:8px }
.summary{ color:#e9e3da; margin:8px 0 14px; }
.price{ font-weight:700; color:var(--brand); margin-right:8px }
.btn-row{ display:flex; gap:10px; flex-wrap:wrap }
.btn{ text-decoration:none; padding:10px 12px; border-radius:10px; font-weight:700; }
.btn.primary{ background:var(--brand); color:#1b140b }
.btn.primary:hover{ background:#e3b869 }
.btn.ghost{ border:1px solid #3a332d; color:var(--muted) }
footer{ color:#9b9186; padding:40px 24px 60px; text-align:center; }

/* „Sticky“ Mini-CTA am unteren Rand auf Mobile */
.sticky-cta{
    position:sticky; bottom:0; background:linear-gradient(180deg, rgba(15,14,13,0) 0%, var(--bg) 30%);
    padding:18px 0 12px; margin-top:18px;
}
.sticky-cta .bar{
    display:flex; gap:12px; flex-wrap:wrap;
    background:#1a1816; border:1px solid #2b2723; border-radius:12px; padding:10px 12px;
    align-items: center;
    justify-content: center;
}

/* Sanfter Scroll & weniger Animation für User-Wunsch */
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition:none !important; }
}