/* Gemeinsames Aussehen fuer die Uebersicht (index.html) und die
   Set-Seiten (set.php). EINE Datei, damit eine Aenderung nicht an
   zwei Stellen nachgezogen werden muss. */
:root{
  --navy:#07162a;--navy2:#0b2747;--orange:#ff9700;--blue:#1687e8;
  --white:#f7f9fc;--muted:#aebcd0;--card:#0c213a;--line:#214361;
  --green:#33c780;--shadow:0 18px 55px rgba(0,0,0,.30)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:
  radial-gradient(circle at 82% 8%,rgba(22,135,232,.18),transparent 28rem),
  radial-gradient(circle at 15% 25%,rgba(255,151,0,.10),transparent 24rem),
  linear-gradient(145deg,#050d19,var(--navy) 45%,#061326);
  color:var(--white);font-family:Inter,Segoe UI,Arial,sans-serif;min-height:100vh}
a{color:inherit}
.wrap{width:min(1180px,calc(100% - 32px));margin:auto}
header{padding:22px 0;border-bottom:1px solid rgba(255,255,255,.08);
  position:sticky;top:0;z-index:10;background:rgba(5,13,25,.86);backdrop-filter:blur(14px)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:22px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand img{width:74px;height:74px;object-fit:contain;filter:drop-shadow(0 8px 18px rgba(0,0,0,.35))}
.brand strong{font-size:1.18rem;display:block}.brand small{color:var(--muted)}
nav{display:flex;gap:10px;flex-wrap:wrap}
nav a,.button{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  border:1px solid var(--line);border-radius:999px;padding:10px 16px;font-weight:750;
  background:rgba(255,255,255,.035);transition:.2s}
nav a:hover,.button:hover{transform:translateY(-1px);border-color:var(--orange)}
.hero{padding:74px 0 48px;display:grid;grid-template-columns:1.25fr .75fr;gap:34px;align-items:center}
.eyebrow{color:var(--orange);font-weight:900;letter-spacing:.16em;text-transform:uppercase;font-size:.78rem}
h1{font-size:clamp(2.6rem,7vw,5.6rem);line-height:.91;margin:14px 0 22px;letter-spacing:-.055em}
.hero p{color:var(--muted);font-size:1.13rem;line-height:1.7;max-width:720px}
.hero-card{background:linear-gradient(145deg,rgba(12,33,58,.95),rgba(7,22,42,.92));
  border:1px solid var(--line);border-radius:28px;padding:26px;box-shadow:var(--shadow)}
.hero-card b{color:var(--orange)}.hero-card p{font-size:.98rem;margin:.5rem 0}
.socials{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.socials a{border-color:rgba(255,151,0,.45)}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:30px 0 20px}
h2{font-size:clamp(1.8rem,4vw,3rem);margin:0}
#search{width:min(350px,100%);background:#061426;border:1px solid var(--line);color:white;
  border-radius:14px;padding:13px 15px;font-size:1rem}
.sets{display:grid;gap:26px;padding-bottom:80px}
.set-card{background:linear-gradient(145deg,rgba(12,33,58,.96),rgba(7,22,42,.96));
  border:1px solid var(--line);border-radius:28px;overflow:hidden;box-shadow:var(--shadow)}
.set-main{display:grid;grid-template-columns:390px 1fr;min-height:330px}
.product-image{background:white;min-height:310px;display:flex;align-items:center;justify-content:center;padding:18px}
.product-image img{width:100%;height:100%;max-height:340px;object-fit:contain}
.set-copy{padding:30px}
.meta{color:var(--orange);font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.set-copy h3{font-size:clamp(1.65rem,4vw,2.65rem);margin:8px 0 8px}
.pieces{color:var(--muted);font-weight:700}.description{color:var(--muted);line-height:1.6}
.video-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.button.primary{background:var(--orange);color:#171006;border-color:var(--orange)}
/* auto-fit: auf der Uebersicht steht nur das Hauptangebot und darf
   die volle Breite nehmen, auf der Set-Seite stehen alle drei
   nebeneinander. Eine Regel fuer beide Seiten. */
.offers{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  gap:14px;padding:0 24px 24px}
/* Verweis auf die Set-Seite, wenn es dort noch mehr Angebote gibt. */
.mehr{display:block;padding:0 24px 22px;margin-top:-6px}
.mehr a{color:var(--orange);font-weight:800;text-decoration:none;
  border-bottom:1px solid transparent}
.mehr a:hover{border-bottom-color:var(--orange)}
.set-copy h3 a{color:inherit;text-decoration:none}
.set-copy h3 a:hover{color:var(--orange)}
.offer{border:1px solid var(--line);border-radius:18px;padding:20px;background:rgba(4,16,31,.58);
  display:flex;flex-direction:column;align-items:flex-start}
.offer .badge{font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;
  border-radius:999px;padding:5px 9px;background:rgba(255,151,0,.13);color:var(--orange)}
.offer h4{font-size:1.15rem;margin:13px 0 7px}.offer p{color:var(--muted);line-height:1.5;margin:0 0 18px}
.offer .button{margin-top:auto;width:100%}
.checked{font-size:.78rem;color:var(--muted);padding:0 28px 24px}
footer{border-top:1px solid rgba(255,255,255,.08);padding:34px 0 54px;color:var(--muted);line-height:1.6}
.empty{padding:40px;border:1px dashed var(--line);border-radius:20px;color:var(--muted)}
@media(max-width:850px){
  .hero,.set-main{grid-template-columns:1fr}.hero{padding-top:46px}.hero-card{display:none}
  .product-image{min-height:260px}.offers{grid-template-columns:1fr}.topbar{align-items:flex-start}
}
@media(max-width:620px){
  nav{display:none}.brand img{width:58px;height:58px}.section-head{align-items:stretch;flex-direction:column}
  .set-copy{padding:22px}.offers{padding:0 16px 16px}.wrap{width:min(100% - 22px,1180px)}
}