/* Royal Dance Niederrhein e. V. – Cassiopeia Child-Template
   Stand 2026-10-18 | Diese Datei ersetzt die bisherige user.css vollständig.
   Voraussetzung: Menümodul in Position menu mit Layout Cassiopeia – Collapsible Dropdown.
*/
:root {
  --royal-green: #00532e;
  --royal-green-hover: #003d22;
  --royal-light: #b5e99d;
  --royal-dark: #282828;
  --royal-white: #fff;
}

body { color: var(--royal-dark); background: #fff; }
a { color: var(--royal-green); }
a:hover { color: var(--royal-green-hover); }
h1, h2, h3 { color: var(--royal-dark); }

/* Header: die originale Cassiopeia-Struktur wird als Raster angeordnet. */
.container-header {
  display: grid;
  grid-template-columns: minmax(20px, 1fr) minmax(200px, 350px) minmax(0, 850px) minmax(20px, 1fr);
  grid-template-areas: '. logo nav .';
  align-items: center;
  gap: 0;
  min-height: 110px;
  padding: 8px 0;
  background: var(--royal-white);
  background-image: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
}
.container-header .grid-child:has(.navbar-brand) { grid-area: logo; min-width: 0; width: 100%; margin: 0; }
.container-header .navbar-brand { margin: 0; display: flex; align-items: center; }
.container-header .navbar-brand img { display: block; width: 230px; max-width: 100%; height: auto; object-fit: contain; }
.container-header .container-nav { grid-area: nav; min-width: 0; width: 100%; margin: 0; display: flex; justify-content: flex-end; align-items: center; }
.container-header .mod-menu { align-items: center; justify-content: flex-end; gap: .25rem; }
.container-header .mod-menu a { color: var(--royal-dark); text-decoration: none; }
.container-header .mod-menu a:hover,
.container-header .mod-menu .active > a { color: var(--royal-green); }
.container-header .mod-menu a.royal-join-button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .75rem 1.25rem;
  border-radius: 999px; background: var(--royal-green);
  color: #fff; font-weight: 600; text-decoration: none;
}
.container-header .mod-menu a.royal-join-button:hover,
.container-header .mod-menu a.royal-join-button:focus { background: var(--royal-green-hover); color: #fff; }
.container-header .navbar-toggler { color: var(--royal-green); border-color: #dce5dc; }

/* Hero auf der Startseite */
.royal-hero {
  min-height: 620px;
  display: flex;
  align-items: center;
  padding: 5rem clamp(1.5rem, 6vw, 6rem);
  color: #fff;
  background-color: #202820;
  background-image:
    linear-gradient(90deg, rgba(12,18,15,.92) 0%, rgba(12,18,15,.80) 25%, rgba(12,18,15,.48) 55%, rgba(12,18,15,.10) 100%),
    url('/images/royaldance/hero-royaldance.webp');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.royal-hero__inner { max-width: 1200px; width: 100%; margin: 0 auto; }
.royal-hero__label { color: var(--royal-light); font-size: .85rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.royal-hero h1 { color: #fff; max-width: 650px; font-size: clamp(3rem, 5.5vw, 5rem); line-height: 1.1; margin: 1rem 0; }
.royal-hero__accent { color: var(--royal-light); }
.royal-hero__text { color: #fff; max-width: 550px; font-size: 1.2rem; line-height: 1.55; }
.royal-hero__buttons { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.royal-hero__buttons .btn { border-radius: 999px; padding: .9rem 1.7rem; font-weight: 600; text-decoration: none; }
.royal-hero .btn-primary { background: var(--royal-green); border: 2px solid var(--royal-green); color: #fff; }
.royal-hero .btn-primary:hover,
.royal-hero .btn-primary:focus { background: var(--royal-green-hover); border-color: var(--royal-green-hover); color: #fff; }
.royal-hero .btn-outline-light { background: transparent; border: 2px solid #fff; color: #fff; }
.royal-hero .btn-outline-light:hover,
.royal-hero .btn-outline-light:focus { background: #fff; color: #26332e; }

/* Tablet und Smartphone: derselbe Breakpoint wie Cassiopeias kollabierendes Menü */
@media (max-width: 991.98px) {
  .container-header {
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-areas: 'logo nav';
    min-height: 82px;
    padding: 10px 18px;
    position: relative;
  }
  .container-header .grid-child:has(.navbar-brand) { width: auto; }
  .container-header .navbar-brand img { width: min(190px, 54vw); height: auto; }
  .container-header .container-nav { width: auto; min-width: 0; justify-content: flex-end; }
  .container-header .navbar-toggler { margin: 0; background-color: #fff; }
  .container-header .navbar-collapse.show,
  .container-header .navbar-collapse.collapsing {
    position: absolute;
    z-index: 1000;
    top: 100%; left: 0; right: 0;
    background: #fff;
    padding: 1rem 1.25rem;
    box-shadow: 0 12px 22px rgba(0,0,0,.12);
  }
  .container-header .navbar-collapse.show .mod-menu { align-items: stretch; }
  .royal-hero {
    min-height: 600px;
    align-items: flex-end;
    padding: 3rem 1.5rem;
    background-image:
      linear-gradient(180deg, rgba(12,18,15,.16) 0%, rgba(12,18,15,.55) 40%, rgba(12,18,15,.94) 100%),
      url('/images/royaldance/hero-royaldance.webp');
    background-position: center top;
  }
  .royal-hero h1 { font-size: clamp(2.6rem, 9vw, 3.7rem); }
  .royal-hero__text { font-size: 1rem; }
}
@media (max-width: 575.98px) {
  .royal-hero__buttons { flex-direction: column; }
  .royal-hero__buttons .btn { width: 100%; }
}