/* ---------- Page Sections / Layout ---------- */

/* Hero (nur Struktur/Optik; KEINE Höhe hier!) */
.hero{
  position:relative; display:grid; place-items:center; text-align:center;
}
.hero-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(50% 60% at 50% 40%, rgba(0,44,84,.45) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.75) 100%),
    url('/assets/images/herobackground.jpg') center/cover no-repeat;
}
.hero-inner{position:relative; z-index:1; padding:2rem}
.hero h1{font-size:clamp(1.8rem, 2vw + 1rem, 2.4rem)}
.hero p{color:var(--muted)}

/* Abschnittsfarben / Strips */
#progress{display:none} /* eigener Strip, daher hidden im Flow */
#team{background:var(--bg)}
#streams{background:var(--bg-2)}
#apply{background:var(--bg)}

/* Footer */
.site-footer{background:var(--surface); margin-top:3rem}
.footer-inner{
  display:flex; justify-content:space-between; align-items:center;
  max-width:var(--container); margin:0 auto; padding:1.5rem 1rem; color:var(--muted)
}
.footer-inner a{color:var(--accent)}

/* Intro-Raster + Feature-Karte */
.intro-grid{ display:grid; grid-template-columns:2fr 1.2fr; gap:24px; }
.feature-card{ composes: card; padding:18px; align-self:start; }
.feature-card h3{ margin-bottom:.6rem; }

/* Zwei Spalten Abschnitt – nutzt generische grid-2 */
.two-col{ composes: grid-2; }

/* schmaler Band-Abschnitt */
.section-band{
  background: linear-gradient(180deg, rgba(239,181,9,.06), transparent 35%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.band-grid{ composes: grid-3; }
.band-item{ composes: card; padding:14px; }
.band-item h4{ margin-bottom:.4rem; }

/* ---------- Home Layout (scoped) ---------- */
.home-intro__grid{ display:grid; gap:24px; grid-template-columns:2fr 1.2fr; }
.home-card{ composes: card; padding:18px; align-self:start; }
.home-two{ composes: grid-2; }
.home-band{ background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.home-band__grid{ composes: grid-3; }
.home-tile{ composes: card; padding:14px; }
.home-schedule p{ margin:.2rem 0; }
.home-schedule h3{ margin-bottom:.4rem; }

/* Responsive */
@media (max-width: 1024px){
  .home-intro__grid, .intro-grid{ grid-template-columns:1fr; }
}
@media (max-width: 900px){
  .home-two{ grid-template-columns:1fr; }
  .home-band__grid, .band-grid{ grid-template-columns:1fr; }
}