/* ==========================================================================
   Ki.Ste. – Demo-Seiten im Stil von webkiste.net
   Datei: media/templates/site/cassiopeia_extended/css/user.css
   (Joomla: System → Site-Templates → Cassiopeia_extended Details und Dateien → Neue Datei)
   ========================================================================== */

:root {
  --rot: #d7141a;
  --rot-dunkel: #a80f14;
  --text: #1f2328;
  --text-hell: #5b6470;
  --hell: #f4f5f7;
  --rand: #e3e6ea;
  --cassiopeia-color-primary: #16191d;
  --cassiopeia-color-link: #d7141a;
  --cassiopeia-color-hover: #a80f14;
  --cassiopeia-font-family-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cassiopeia-font-family-headings: var(--cassiopeia-font-family-body);
  --cassiopeia-font-weight-headings: 800;
}

body {
  font-family: var(--cassiopeia-font-family-body);
  color: var(--text);
  background: var(--hell);
}

/* ---------- Kopf: Titelbild wie auf webkiste.net ---------- */

.container-header {
  background:
    linear-gradient(100deg, rgba(10, 12, 15, .9) 0%, rgba(10, 12, 15, .65) 60%, rgba(10, 12, 15, .4) 100%),
    url("/images/_mg_8702kopieentzerrt2schnittbestes60-original_189285_by-juergen_laufer_piqs_de-u131-fr.png") center / cover no-repeat;
  box-shadow: none;
}

.container-header .navbar-brand { padding: 2.2rem 0 2rem; }

.container-header .brand-logo {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
}

/* kleine rote Zeile über dem Titel */
.container-header .navbar-brand::before {
  content: "Ki.Ste. – Joomla-Erweiterungen";
  display: block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #ff8a8e;
  margin-bottom: .4rem;
}

.container-header .site-description {
  color: rgba(255, 255, 255, .85);
  font-size: 1.1rem;
  max-width: 40rem;
}

/* ---------- Inhalt ---------- */

.site-grid { padding-top: 1.5rem; }

.container-component,
.container-sidebar-right > .card,
.container-sidebar-right .moduletable {
  background: #fff;
  border: 1px solid var(--rand);
  border-radius: 10px;
}

.container-component { padding: 1.5rem 1.75rem; }

.container-component h1,
.container-component .page-header h1,
.container-component .page-header h2 { font-weight: 800; letter-spacing: -.01em; }

.breadcrumb { background: transparent; padding-left: 0; font-size: .9rem; }

.container-sidebar-right .card-header,
.container-sidebar-right h3 {
  background: transparent;
  border-bottom: 2px solid var(--rot);
  font-weight: 700;
}

/* Menü in der Seitenleiste als Pillen */
.container-sidebar-right .mod-menu a {
  display: block;
  padding: .45rem .9rem;
  border-radius: 999px;
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
}
.container-sidebar-right .mod-menu a:hover { background: var(--hell); }
.container-sidebar-right .mod-menu .current > a,
.container-sidebar-right .mod-menu .active > a { background: var(--rot); color: #fff; }

/* Schaltflächen */
.btn-primary {
  background: var(--rot);
  border-color: var(--rot);
  border-radius: 999px;
}
.btn-primary:hover,
.btn-primary:focus { background: var(--rot-dunkel); border-color: var(--rot-dunkel); }

/* ---------- Fuß ---------- */

.container-footer { background: #16191d; }
.container-footer a { color: #fff; }