/*
  startseite.css — Styles für den Inhalt der Tanzsport-Startseite.
  Gehostet unter https://www.ssvulm1846.de/fileadmin/website/abteilungen/tanzen/dokumente/startseite.css
  und von startseite.html per <link> eingebunden.
  Der Trainingskalender hat sein eigenes Stylesheet (siehe calendar.html) — hier
  nur die Styles für Intro, Navigations-Kacheln und CTA-Banner.
  Benötigt die Google Font "Merriweather" (siehe Import unten).
*/
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap');

:root{--bg:#EDF2F7;--fg:#1f2623;--accent:#475853;--accent2:#5b8075;--muted:#5c6b64;}

.intro-top{max-width:900px;margin:0 auto;padding:46px 6% 8px;text-align:center;}
.intro-top p{font-size:1.15rem;line-height:1.6;color:#2b332f;font-family:'Merriweather',serif;}

.nav-tiles{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,200px);gap:10px;padding:34px 6% 60px;max-width:1300px;margin:0 auto;}
.nav-tiles .cell{border-radius:6px;position:relative;overflow:hidden;background-size:cover;background-repeat:no-repeat;display:flex;align-items:flex-end;}
.nav-tiles .cell::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg, rgba(37,48,45,.85), rgba(37,48,45,.25));}
.nav-tiles .cell.flat::before{background:linear-gradient(135deg, rgba(71,88,83,.94), rgba(91,128,117,.86));}
.t1{background-image:url('/fileadmin/website/banner/BannerTanzsport.jpg');background-position:center 25%;}
.t3{background-image:url('/fileadmin/website/banner/BannerTanzsport.jpg');background-position:right 55%;}
.t4{background-image:url('/fileadmin/website/banner/BannerTanzsport.jpg');background-position:left 70%;}
.t6{background-image:url('/fileadmin/website/banner/BannerTanzsport.jpg');background-position:center 10%;}
.overlay-text{position:relative;z-index:2;padding:22px;color:#fff;width:100%;}
.overlay-text .eyebrow{font-size:.7rem;letter-spacing:2px;text-transform:uppercase;opacity:.9;}
.overlay-text h3{font-family:'Merriweather',serif;font-size:1.3rem;line-height:1.25;margin-top:6px;}
.overlay-text span.arrow{position:absolute;top:18px;right:20px;font-size:1.1rem;opacity:.85;}

.section{max-width:1300px;margin:0 auto;padding:60px 6%;}
.section-title{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:36px;border-bottom:2px solid var(--fg);padding-bottom:14px;}
.section-title h2{font-size:1.6rem;font-family:'Merriweather',Georgia,serif;}
.section-title span{color:var(--accent2);font-size:.85rem;text-transform:uppercase;letter-spacing:1px;}

.banner{background:var(--accent);color:#fff;text-align:center;padding:70px 6%;}
.banner h2{font-size:1.8rem;margin-bottom:18px;font-family:'Merriweather',Georgia,serif;}
.banner p{color:#d9e2de;max-width:560px;margin:0 auto 30px;}
.banner a{background:#fff;color:var(--accent);padding:14px 32px;border-radius:4px;text-decoration:none;font-weight:700;}

@media(max-width:900px){.nav-tiles{grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,160px);}}