:root{
  --bg:#1b1d2e;
  --bg-alt:#14151f;
  --ink:#f4f1e6;
  --muted:#9496ae;
  --accent:#f2b705;
  --accent2:#e1523d;
  --line:rgba(244,241,230,0.14);
}
*{box-sizing:border-box;}
html,body{ margin:0; background:var(--bg); color:var(--ink); font-family:'Work Sans', sans-serif; }

/* ---------- Site nav (shared across all pages) ---------- */
.site-nav{
  position:fixed;
  top:5vh; right:5vw;
  z-index:20;
  display:flex;
  gap:2px;
  padding:6px;
  background:rgba(20,21,31,0.6);
  border:1px solid var(--line);
  border-radius:999px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.site-nav a{
  display:inline-block;
  padding:9px 16px;
  border-radius:999px;
  color:var(--muted);
  text-decoration:none;
  font-size:13.5px;
  font-weight:600;
  letter-spacing:.01em;
  transition:color .25s ease, background .25s ease;
  white-space:nowrap;
}
.site-nav a:hover{ color:var(--ink); }
.site-nav a[aria-current="page"]{ background:var(--accent); color:#1b1d2e; }
.site-nav a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

@media (max-width:880px){
  .site-nav{ top:auto; bottom:3vh; left:50%; right:auto; transform:translateX(-50%); }
  .site-nav a{ padding:8px 12px; font-size:12px; }
}

/* ---------- Subpage shell ---------- */
body.subpage{ overflow-x:hidden; }

.page{
  max-width:1040px;
  margin:0 auto;
  padding:6.5vh 6vw 14vh;
}

.page-head{ max-width:62ch; margin-bottom:6vh; }

.brand-small{
  font-family:'Anton', sans-serif;
  font-weight:400;
  font-size:clamp(18px, 1.8vw, 22px);
  letter-spacing:.01em;
  margin-bottom:3.5vh;
}
.brand-small a{ color:var(--ink); text-decoration:none; }
.brand-small span{ color:var(--accent); }

.eyebrow{
  color:var(--accent2);
  font-size:14px;
  letter-spacing:.02em;
  margin:0 0 10px 0;
}
.page-head h1{
  font-family:'Anton', sans-serif;
  font-weight:400;
  font-size:clamp(34px, 5vw, 58px);
  line-height:1.02;
  margin:0 0 18px 0;
}
.page-head p{
  font-size:16.5px;
  line-height:1.7;
  color:var(--muted);
  margin:0;
}

.section-label{
  font-family:'Anton', sans-serif;
  font-size:13px;
  color:var(--muted);
  letter-spacing:.08em;
  text-transform:uppercase;
  margin:0 0 20px 0;
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
}

/* ---------- Filter tabs (Galerie / Empfehlungen) ---------- */
.filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:4vh;
}
.filters button{
  padding:9px 18px;
  border-radius:999px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--muted);
  font-family:'Work Sans', sans-serif;
  font-size:13.5px;
  font-weight:500;
  cursor:pointer;
  transition:background .25s, color .25s, border-color .25s;
}
.filters button:hover{ color:var(--ink); border-color:var(--muted); }
.filters button.active{ background:var(--accent); border-color:var(--accent); color:#1b1d2e; font-weight:600; }

/* ---------- Card grid ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:18px;
}

/* Gallery placeholder tile */
.tile{
  aspect-ratio:4/3;
  border:1px dashed var(--line);
  border-radius:6px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:var(--muted);
  background:var(--bg-alt);
}
.tile svg{ width:30px; height:30px; opacity:.55; }
.tile span{ font-size:12.5px; letter-spacing:.02em; }
.tile .cat{ font-size:11px; color:var(--accent2); text-transform:uppercase; letter-spacing:.06em; }

/* Vorstand card */
.person{
  border:1px solid var(--line);
  border-radius:6px;
  padding:22px;
  background:var(--bg-alt);
}
.person .avatar{
  width:52px; height:52px;
  border-radius:50%;
  background:linear-gradient(145deg, var(--accent), var(--accent2));
  display:flex; align-items:center; justify-content:center;
  font-family:'Anton', sans-serif;
  color:#1b1d2e;
  font-size:18px;
  margin-bottom:16px;
}
.person .role{
  font-family:'Anton', sans-serif;
  font-weight:400;
  font-size:17px;
  margin:0 0 6px 0;
}
.person .name{
  color:var(--muted);
  font-size:14px;
  margin:0;
}
.person .badge{
  display:inline-block;
  margin-top:12px;
  padding:3px 9px;
  font-size:10.5px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--accent2);
  border:1px solid rgba(225,82,61,.4);
  border-radius:999px;
}

/* Product card (Empfehlungen) */
.product{
  border:1px solid var(--line);
  border-radius:6px;
  padding:22px;
  background:var(--bg-alt);
  display:flex;
  flex-direction:column;
}
.product .cat{
  font-size:11px;
  color:var(--accent2);
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:10px;
}
.product h3{
  font-family:'Anton', sans-serif;
  font-weight:400;
  font-size:19px;
  margin:0 0 10px 0;
}
.product p{
  font-size:14px;
  line-height:1.6;
  color:var(--muted);
  margin:0 0 16px 0;
  flex:1;
}
.product .row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.product .price{ font-size:13px; color:var(--muted); }
.product .buy{
  display:inline-block;
  padding:9px 16px;
  background:var(--accent);
  color:#1b1d2e;
  font-weight:600;
  font-size:13.5px;
  text-decoration:none;
  border-radius:999px;
  cursor:not-allowed;
  opacity:.9;
}
.product .soon{
  display:block;
  margin-top:8px;
  font-size:11px;
  color:var(--muted);
}

.note{
  margin-top:5vh;
  padding-top:3vh;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:13px;
  line-height:1.7;
  max-width:62ch;
}

.site-footer{
  max-width:1040px;
  margin:0 auto;
  padding:0 6vw 6vh;
  color:var(--muted);
  font-size:13px;
}
.site-footer a{ color:var(--muted); }