/*
 * TTV Ense – Cassiopeia user.css (Joomla 6)
 * Vereinsfarben: Rot #a3183e | Nav #222222
 */

/* ── Variablen ────────────────────────────────────────── */
:root {
  --ttv-primary:   #a3183e;
  --ttv-primary-d: #7d1130;
  --ttv-nav:       #222222;
  --ttv-nav-hover: #3a3a3a;
  --ttv-text:      #2c2c2c;
  --ttv-muted:     #666666;
  --ttv-border:    #e0e0e0;
  --ttv-bg:        #f0f0f0;
  --ttv-card:      #ffffff;
  --ttv-radius:    6px;
  --ttv-shadow:    0 2px 8px rgba(0,0,0,0.09);
}

/* Schriftgröße der Navigation anpassen */
.navbar-nav .nav-link, 
.mod-menu .nav-item a {
    font-size: 20px !important;
}

/* Schriftzug "TTV Ense" ausblenden */
.navbar-brand, .brand {
    display: none !important;
}
/* Menü-Position anpassen */
.navbar, .mod-menu {
    margin-top: 90px !important; /* Passe den Wert (50px) nach Belieben an */
}
/* ── Basis ────────────────────────────────────────────── */
body {
  background-color: #a2cdfd !important;
  background-image: url('/images/TTBaelle-1.png') !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  background-attachment: fixed !important;
  color: var(--ttv-text);
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
}

/* ── Header ───────────────────────────────────────────── */
.header,
header.header {
  background-color: var(--ttv-primary) !important;
  background-image: url('/images/Kopfbild-2014-ttv.png') !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-width: 100% !important; /* Macht das Bild über die volle Breite */
  background-margin-top: -10px !important;
  padding: 0.1rem 0.1rem !important;
}

.header .site-name,
.header .site-name a,
.header a.brand {
  color: #fff !important;
  font-size: 1.4rem;
  font-weight: 700;
  text-decoration: none;
}

.header img {
  image: url('/images/Kopfbild-2014-ttv.png') !important;
  max-height: 60px;
  width: auto;
}

/* ── Navigation ───────────────────────────────────────── */
.navbar,
.cassiopeia-navbar,
nav.navbar {
  background-color: var(--ttv-nav) !important;
}

.navbar .nav-link,
.navbar .nav-item > a {
  color: #ddd !important;
  font-size: 0.92rem;
  font-weight: 500;
  padding: 0.8rem 1rem !important;
  transition: background 0.15s, color 0.15s;
}

.navbar .nav-link:hover,
.navbar .nav-item.active > .nav-link,
.navbar .nav-item > a:hover {
  background-color: var(--ttv-primary) !important;
  color: #fff !important;
}

/* Dropdown */
.navbar .dropdown-menu {
  background-color: #2e2e2e;
  border: none;
  border-radius: 0 0 var(--ttv-radius) var(--ttv-radius);
  padding: 0;
  margin: 0;
}

.navbar .dropdown-item {
  color: #bbb;
  padding: 0.55rem 1rem;
  font-size: 0.88rem;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  background-color: var(--ttv-primary);
  color: #fff;
}

/* Hamburger */
.navbar-toggler {
  border-color: rgba(255,255,255,0.4);
}
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.8%29' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* ── Seiten-Container ─────────────────────────────────── */
#sp-main-body,
.site-grid,
main {
  padding-top: 1.5rem;
  padding-bottom: 2rem;
}

/* ── Blog-Artikel als Karten ──────────────────────────── */
/* Joomla 6: <div class="com-content-category-blog__item blog-item"> */
.com-content-category-blog__item,
.blog-item {
  background: var(--ttv-card);
  border: 1px solid var(--ttv-border);
  border-radius: var(--ttv-radius);
  box-shadow: var(--ttv-shadow);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  transition: box-shadow 0.2s;
}

.com-content-category-blog__item:hover,
.blog-item:hover {
  box-shadow: 0 4px 18px rgba(0,0,0,0.13);
}

/* Artikel-Titel: .page-header h2 a */
.com-content-category-blog__item .page-header h2 a,
.blog-item .page-header h2 a {
  color: var(--ttv-primary) !important;
  font-size: 1.2rem;
  font-weight: 700;
  text-decoration: none;
}

.com-content-category-blog__item .page-header h2 a:hover,
.blog-item .page-header h2 a:hover {
  color: var(--ttv-primary-d) !important;
  text-decoration: underline;
}

/* Meta-Infos (Datum) */
dl.article-info,
.article-info,
.com-content-category-blog-item__info {
  font-size: 0.82rem;
  color: var(--ttv-muted);
  margin-bottom: 0.6rem;
}

dl.article-info dt { display: none; }

/* Artikel-Inhalt */
.com-content-category-blog-item__body,
.item-content,
.com-content-article__body {
  font-size: 0.97rem;
  line-height: 1.75;
  color: var(--ttv-text);
}

/* Weiterlesen-Button: Joomla 6 nutzt btn-secondary */
.readmore a,
p.readmore a,
a.btn.btn-secondary {
  background-color: var(--ttv-primary) !important;
  border-color: var(--ttv-primary) !important;
  color: #fff !important;
  padding: 0.4rem 1rem;
  border-radius: var(--ttv-radius);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  margin-top: 0.6rem;
  transition: background 0.15s;
}

.readmore a:hover,
p.readmore a:hover,
a.btn.btn-secondary:hover {
  background-color: var(--ttv-primary-d) !important;
  border-color: var(--ttv-primary-d) !important;
}

/* ── Einzelartikel-Seite ──────────────────────────────── */
.com-content-article {
  background: var(--ttv-card);
  border: 1px solid var(--ttv-border);
  border-radius: var(--ttv-radius);
  box-shadow: var(--ttv-shadow);
  padding: 1.5rem 2rem;
}

.com-content-article h1,
.com-content-article .page-header h1,
.item-page h1 {
  color: var(--ttv-primary);
  font-weight: 700;
  font-size: 1.6rem;
  border-bottom: 3px solid var(--ttv-primary);
  padding-bottom: 0.4rem;
  margin-bottom: 1rem;
}

/* ── Kategorie-Seitenüberschrift ──────────────────────── */
.page-header h1,
.com-content-category-blog__title {
  color: var(--ttv-primary);
  font-weight: 700;
  font-size: 1.5rem;
  border-bottom: 3px solid var(--ttv-primary);
  padding-bottom: 0.4rem;
  margin-bottom: 1.25rem;
}

/* ── Bilder ───────────────────────────────────────────── */
.com-content-category-blog-item__body img,
.com-content-article__body img,
.item-content img,
article img {
  max-width: 100%;
  height: auto;
  border-radius: var(--ttv-radius);
  display: block;
  margin: 0.5rem 0;
}

/* ── Links ────────────────────────────────────────────── */
a { color: var(--ttv-primary); }
a:hover { color: var(--ttv-primary-d); }

/* ── Pagination ───────────────────────────────────────── */
.pagination .page-link { color: var(--ttv-primary); }
.pagination .active .page-link {
  background-color: var(--ttv-primary);
  border-color: var(--ttv-primary);
}

/* ── Footer ───────────────────────────────────────────── */
.footer,
footer.footer,
#sp-footer {
  background: var(--ttv-nav);
  color: #aaa;
  font-size: 0.87rem;
  padding: 1.5rem 1rem;
  text-align: center;
  margin-top: 2rem;
}

.footer a { color: #ccc; }

/* ── Dropdown-Menü (CSS-only, Cassiopeia Joomla 6) ───── */
/* Klassen: .nav-item.deeper.parent → Kind-ul einblenden */
.mod-menu .nav-item.deeper.parent {
  position: relative;
}

.mod-menu .nav-item.deeper.parent > ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 9999;
  min-width: 190px;
  background-color: #2e2e2e;
  list-style: none;
  padding: 0.25rem 0;
  margin: 0;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
  border-radius: 0 0 var(--ttv-radius) var(--ttv-radius);
}

.mod-menu .nav-item.deeper.parent:hover > ul,
.mod-menu .nav-item.deeper.parent:focus-within > ul {
  display: block;
}

.mod-menu .nav-item.deeper.parent > ul li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mod-menu .nav-item.deeper.parent > ul li a {
  color: #bbb !important;
  padding: 0.5rem 1rem;
  display: block;
  text-decoration: none;
  font-size: 0.88rem;
  white-space: nowrap;
}

.mod-menu .nav-item.deeper.parent > ul li a:hover {
  background-color: var(--ttv-primary) !important;
  color: #fff !important;
}

/* ── Mobil ────────────────────────────────────────────── */
@media (max-width: 767px) {
  body { font-size: 15px; }

  article.com-content-category-blog__item,
  article.com-content-article,
  .com-content-article {
    padding: 1rem;
    margin-bottom: 1rem;
  }

  .com-content-category-blog-item__title a {
    font-size: 1.05rem;
  }

  .com-content-category-blog-item__body img,
  article img {
    width: 100%;
  }
}

@media (max-width: 480px) {
  article.com-content-category-blog__item {
    border-radius: 0;
    border-left: none;
    border-right: none;
    margin-bottom: 0.75rem;
  }
}