:root{
  /* === SBR-Network Sunset Palette (aus deinem Logo) === */
  --sun-1: #F3B33E; /* gelb */
  --sun-2: #EA7A3B; /* orange */
  --sun-3: #D95A4A; /* rot */
  --sun-4: #C53C4E; /* magenta/rose */
  --cream: #F9EFD9; /* helle Rahmenfarbe im Logo */
  --charcoal: #0E1110; /* fast schwarz (Berge) */

  /* Theme-Neutral */
  --bg: #0B0D0E;          
  --card: #131618;        
  --text: #F3EEE5;        
  --muted: #BEB7AB;       
  --ring: rgba(243,179,62,.35);  
  --shadow: 0 12px 30px rgba(0,0,0,.35);
  --radius: 18px;

  /* Akzente / Gradients */
  --accent: var(--sun-2);
  --accent-2: var(--sun-4);
  --accent-grad: linear-gradient(135deg, var(--sun-1), var(--sun-2), var(--sun-3), var(--sun-4));
}

@media (prefers-color-scheme: light){
  :root{
    --bg:#FFF8EA; /* creme wie Logo-Rand */
    --card:#FFF2D9;
    --text:#1A1613;
    --muted:#6D6459;
    --shadow:0 10px 30px rgba(0,0,0,.08);
    --ring:rgba(197,60,78,.35)
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; 
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text); 
  background:
    radial-gradient(900px 480px at 80% -10%, rgba(234,122,59,.18), transparent 60%),
    radial-gradient(700px 420px at 10% -15%, rgba(197,60,78,.16), transparent 60%),
    var(--bg);
  line-height:1.6;
}
a{color:inherit; text-decoration:none}
.container{max-width:1100px; margin:0 auto; padding:0 20px}

/* Nav */
.nav{position:sticky; top:0; z-index:50; backdrop-filter: blur(8px); background:linear-gradient(180deg, rgba(11,15,20,.85), rgba(11,15,20,.55)); border-bottom:1px solid rgba(255,255,255,.06)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; gap:12px; align-items:center}
.logo{display:grid; place-items:center; width:38px; height:38px; border-radius:12px; background:#FFF4DE; box-shadow:var(--shadow)}
.logo img{width:80%; height:80%; object-fit:contain; display:block}
.brand h1{font-size:1.05rem; letter-spacing:.4px; margin:0}
.nav-links{display:flex; gap:14px}
.nav-links a{padding:8px 12px; border-radius:999px; color:var(--muted)}
.nav-links a:hover{background:rgba(255,255,255,.06); color:var(--text)}
.cta{display:flex; gap:10px}
.btn{display:inline-flex; align-items:center; gap:10px; padding:10px 16px; border-radius:12px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.02); color:var(--text); box-shadow:var(--shadow); transition:transform .06s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--accent-grad); color:#0b0f14; border:none}
.btn-ghost{background:transparent}

/* Hero */
.hero{position:relative; padding:80px 0 50px}
.hero h2{font-size:clamp(2rem, 4vw + .8rem, 3.2rem); line-height:1.05; margin:0 0 14px; letter-spacing:.2px}
.hero h2 span{background:var(--accent-grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero p{color:var(--muted); max-width:800px; margin:0 0 26px}
.hero-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:28px}
.card{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); box-shadow:var(--shadow)}
.card-inner{padding:22px}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:14px}
.stat{padding:14px; border-radius:14px; background:rgba(255,255,255,.04); text-align:center}
.stat .num{font-size:1.4rem; font-weight:800}

/* Features */
.section{padding:64px 0}
.section h3{font-size:1.6rem; margin:0 0 16px}
.features{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.feature{padding:18px; border-radius:16px; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08)}
.feature h4{margin:8px 0 6px; font-size:1.05rem}
.badge{display:inline-block; padding:6px 10px; border-radius:999px; font-size:.78rem; letter-spacing:.3px; background:rgba(243,179,62,.18); color:#FFE3A7; border:1px solid rgba(243,179,62,.35)}
.muted{color:var(--muted)}

/* Galerie */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  align-items: start;
  margin-top: 12px;
}
.tile {position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background:linear-gradient(135deg, var(--sun-2), var(--sun-4))}
.tile > img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transform:translateZ(0); transition:transform .3s ease}
.tile:hover > img {transform: scale(1.05);}
.tile > span {position:absolute; left:8px; right:8px; bottom:8px; font-size:.85rem; color:#fff; background:rgba(0,0,0,.45); padding:4px 8px; border-radius:8px; line-height:1.2}

/* Timeline */
.timeline{display:grid; grid-template-columns: 6px 1fr; gap:18px; align-items:start}
.timeline .rail{background:linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.02)); border-radius:8px}
.mile{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:14px}

/* Staff */
.staff{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.person{padding:16px; border-radius:16px; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08)}
.avatar{width:56px; height:56px; border-radius:14px; background:var(--accent-grad); display:grid; place-items:center; font-weight:800; color:#0b0f14; box-shadow:var(--shadow)}
.avatar img{width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit;}

/* FAQ */
details{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:14px 16px}
details + details{margin-top:10px}
summary{cursor:pointer; font-weight:600}

/* Footer */
footer{padding:40px 0 60px; color:var(--muted)}
.foot{display:flex; gap:20px; justify-content:space-between; align-items:center; flex-wrap:wrap}

/* Responsive */
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .features{grid-template-columns:1fr 1fr}
  .staff{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 620px){
  .features{grid-template-columns:1fr}
  .staff{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .cta{flex-wrap:wrap}
}

/* micro animations */
.float{animation:float 8s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}