:root{
  --bg: #0b0c0e;
  --text: #e9eef3;
  --muted: #b7c2cc;
  --card: #121418;
  --accent: #ccff66;
  --accent-2: #7bd389;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 18px;
  --gap: clamp(14px, 2vw, 22px);
  --container: min(1100px, 92vw);
}
@media (prefers-color-scheme: light){
  :root{
    --bg: #f8fafb;
    --text: #0d1117;
    --muted: #5b6770;
    --card: #ffffff;
    --shadow: 0 6px 18px rgba(0,0,0,.12);
  }
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Raleway', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg); color:var(--text); line-height:1.6;
}
.container{width:var(--container); margin-inline:auto; padding: calc(var(--gap)*1.5) 0;}

/* --- HERO (angepasst): halb so hoch, heller, Titel oben rechts --- */
.site-hero{
  position:relative;
  height: clamp(140px, 21vw, 260px); /* vorher: clamp(280px, 42vw, 520px) */
  overflow:hidden;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}
.hero-slides, .hero-slides img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero-slides img{
  opacity:0;
  transition:opacity 900ms ease-in-out;
  filter: saturate(1.08) brightness(1.06); /* etwas leuchtender */
}
.hero-slides img.active{opacity:1}
.hero-overlay{
  position:absolute; inset:0;
  /* deutlich weniger Abdunklung */
  background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.12));
  /* Titel/Untertitel oben rechts */
  display:flex; flex-direction:column; align-items:flex-end; justify-content:flex-start;
  text-align:right;
  padding: clamp(12px, 3vw, 28px);
  gap: 4px;
}
.site-title{
  color:#fff;
  text-shadow: 0 1px 6px rgba(0,0,0,.18);
  margin: 6px 0 2px;
  font-size: clamp(22px, 4vw, 40px);
}
.site-tag{
  color:#eef5ff;
  opacity:.95;
  text-shadow: 0 1px 4px rgba(0,0,0,.16);
  font-size: clamp(12px, 1.8vw, 16px);
}

/* Cards */
.cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap: var(--gap); margin-top: calc(var(--gap)*1.5);}
.card{background:var(--card); padding: clamp(16px, 2.2vw, 24px); border-radius: var(--radius); box-shadow: var(--shadow); display:flex; flex-direction:column; gap:12px}
.card-icon{font-size: 26px; opacity:.9}
.card-title{margin:0; font-size: clamp(18px, 2.4vw, 24px)}
.card-subtitle{margin:.2rem 0 .6rem; color:var(--muted)}
.card-link{align-self:flex-start; text-decoration:none; font-weight:600; background: var(--accent); color:#000; padding:10px 14px; border-radius: 999px; box-shadow: var(--shadow)}
.card-link:hover{filter: brightness(0.95)}

/* Tile grid for Musik */
.tile-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
}
.tile{
  background: rgba(255,255,255,.04);
  border-radius: 16px;
  text-decoration:none;
  color: var(--text);
  display:flex; flex-direction:column; align-items:center;
  padding:12px;
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
  transition: transform .15s ease, background .15s ease;
}
.tile:hover{ transform: translateY(-2px); background: rgba(255,255,255,.08);}
.tile-media{
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow:hidden;
  display:grid; place-items:center;
  background: #0b0c0e;
}
.tile-media img{ width:100%; height:100%; object-fit: cover; display:block; }
.tile-placeholder{ font-size: 36px; }
.tile-label{
  margin-top:10px;
  text-align:center;
  font-weight:600;
  font-size: 14px;
}

/* Footer */
.site-footer{padding: 28px 0; border-top: 1px solid rgba(255,255,255,.08); margin-top: calc(var(--gap)*2)}
.site-footer .container{display:flex; align-items:center; justify-content:space-between}
.footer-nav{display:flex; gap:16px}
.footer-nav a{color:var(--muted); text-decoration:none}
.footer-nav a:hover{color:var(--text)}
@media (max-width: 560px){
  .site-footer .container{flex-direction:column; gap:10px}
}
/* Titel & Untertitel: rechtsbündig, hell */
.hero-overlay{
  display:flex !important;
  flex-direction:column;
  align-items:flex-end;   /* rechts ausrichten */
  text-align:right;       /* Text rechtsbündig */
}

.site-title{
  color:#ffffff !important;            /* weiß/hell */
  text-shadow:0 1px 6px rgba(0,0,0,.18);
  margin:6px 0 2px;
}

.site-tag{
  color:#eef5ff !important;            /* helles Weiß-Blau für Kontrast */
  opacity:.95;
  text-shadow:0 1px 4px rgba(0,0,0,.16);
}
/* --- Tiles: feinere Typo + Untertitel --- */
.tile-text{ width:100%; margin-top:8px; display:flex; flex-direction:column; align-items:center; gap:2px }
.tile-label{
  margin:0;
  text-align:center;
  font-weight:500;                /* feiner als 600 */
  font-size: 13px;                /* etwas kleiner */
  letter-spacing: .2px;
}
.tile-subtitle{
  margin:0;
  text-align:center;
  color: var(--muted);            /* zurückhaltend */
  font-weight: 400;
  font-size: 12px;
  line-height: 1.3;
}

/* --- Card media (optional thumb image for nav cards) --- */
.card-media{
  display:block;
  width:100%;
  border-radius: 14px;
  overflow:hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
  margin: 8px 0 10px;
}
.card-media img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio: 3 / 2;    /* harmoniert mit halbhohem Hero */
  object-fit: cover;
}

/* Single-tile layout (for a lone tile in a nav card) */
.tile-grid--single{
  grid-template-columns: 1fr !important;
}
/* Icon + Titel in einer Zeile (statt untereinander) */
.cards .card{
  display: grid !important;
  grid-template-columns: clamp(20px, 2.2vw, 26px) 1fr; /* Icon | Titel */
  column-gap: 10px;
  row-gap: 8px;
  align-items: center;
}

.cards .card .card-icon{
  grid-column: 1; grid-row: 1;
  margin: 0;
  font-size: clamp(18px, 2.2vw, 22px);
  opacity: .9;
}

.cards .card .card-title{
  grid-column: 2; grid-row: 1;
  margin: 0;                /* kein zusätzlicher Abstand */
}

.cards .card .card-subtitle{
  grid-column: 1 / -1;      /* unter Icon+Titel über volle Breite */
  grid-row: 2;
  margin: .2rem 0 .4rem;
}

/* Nachfolgende Inhalte (Button, Tiles, Bild) über volle Breite */
.cards .card .card-link,
.cards .card .tile-grid,
.cards .card .card-media{
  grid-column: 1 / -1;
}
/* Icon + Titel in einer Zeile — alles oben ausrichten */
.cards .card{
  display: grid !important;
  grid-template-columns: clamp(20px, 2.2vw, 26px) 1fr; /* Icon | Titel */
  column-gap: 10px;
  row-gap: 8px;

  /* Wichtig: vertikal oben statt zentriert */
  align-items: start;      /* statt: center */
  align-content: start;
}

.cards .card .card-icon{
  grid-column: 1; grid-row: 1;
  margin: 0;
  font-size: clamp(18px, 2.2vw, 22px);
  opacity: .9;
  align-self: start;       /* Sicherheitshalber auch das Icon oben pinnen */
}

.cards .card .card-title{
  grid-column: 2; grid-row: 1;
  margin: 0;
  align-self: start;
}

.cards .card .card-subtitle{
  grid-column: 1 / -1;     /* volle Breite unter Icon+Titel */
  grid-row: 2;
  margin: .2rem 0 .4rem;
  align-self: start;
}

/* Nachfolgende Inhalte (Button, Tiles, Bild) über volle Breite */
.cards .card .card-link,
.cards .card .tile-grid,
.cards .card .card-media{
  grid-column: 1 / -1;
}
.cards .card .card-subtitle{
  grid-column: 2 / -1;   /* unter dem Titel, nicht unter dem Icon */
  margin: .2rem 0 .4rem;
  align-self: start;
}