/* ==========================================================================
   user.css – Individuelle Anpassungen für Joomla 6 Template "Cassiopeia"
   ==========================================================================
   Diese Datei gehört in: /templates/cassiopeia/css/user.css
   (bzw. bei Verwendung eines Kind-Templates entsprechend anpassen)

   Vorteil: Änderungen hier überleben Joomla-Updates des Templates,
   da user.css nicht von Update-Paketen überschrieben wird.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) Eigene Farb- und Design-Variablen
   Cassiopeia nutzt CSS-Variablen (Custom Properties). Überschreibe sie
   hier zentral, statt einzelne Selektoren zu jagen.
   -------------------------------------------------------------------------- */
:root {
  --template-bg-light: #ffffff;
  --template-bg-dark: #1a1a1a;
  --template-text-color: #222222;
  --template-link-color: #0b5ed7;
  --template-link-hover-color: #08417a;
  --template-accent-color: #e63946;
  --template-font-family: "Segoe UI", system-ui, sans-serif;
}

body {
  font-family: var(--template-font-family);
  color: var(--template-text-color);
}

a {
  color: var(--template-link-color);
}
a:hover,
a:focus {
  color: var(--template-link-hover-color);
}

/* --------------------------------------------------------------------------
   2) Logo / Header
   -------------------------------------------------------------------------- */
#header-logo {
  padding: 1rem 0;
}
#header-logo img {
  max-height: 70px;
  width: auto;
}

/* --------------------------------------------------------------------------
   3) Hauptnavigation
   -------------------------------------------------------------------------- */
.nav-main .nav-item > .nav-link {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.nav-main .nav-item > .nav-link:hover {
  color: var(--template-accent-color);
}

/* --------------------------------------------------------------------------
   4) Buttons
   -------------------------------------------------------------------------- */
.btn-primary {
  background-color: var(--template-accent-color);
  border-color: var(--template-accent-color);
}
.btn-primary:hover {
  filter: brightness(0.9);
}

/* --------------------------------------------------------------------------
   5) Artikel / Content-Bereich
   -------------------------------------------------------------------------- */
.item-page h2,
.item-page h3 {
  font-weight: 700;
}
.item-page img {
  border-radius: 6px;
}

/* --------------------------------------------------------------------------
   6) Footer
   -------------------------------------------------------------------------- */
#footer {
  background-color: var(--template-bg-dark);
  color: #ffffff;
  padding: 2rem 0;
}
#footer a {
  color: #dddddd;
}
#footer a:hover {
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   7) Dark Mode Feinschliff (Cassiopeia unterstützt prefers-color-scheme)
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  body {
    background-color: var(--template-bg-dark);
    color: #eeeeee;
  }
}

/* --------------------------------------------------------------------------
   8) Responsive Anpassungen
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  #header-logo img {
    max-height: 50px;
  }
  .nav-main .nav-item > .nav-link {
    font-size: 0.9rem;
  }
}

/* --------------------------------------------------------------------------
   Eigene Ergänzungen ab hier einfügen:
   -------------------------------------------------------------------------- */