/* ============================================================
   FF Schwielowsee – user.css für Cassiopeia Extended
   Pfad: /media/templates/site/cassiopeia_extended/css/user.css
   Stand: 2026-04-14
   ============================================================ */

/* RESET / BASIS */
*, *::before, *::after { box-sizing: border-box; }
body { font-family: Arial, Helvetica, sans-serif; background: #F4F4F4; color: #222222; font-size: 15px; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

/* SITE-WRAPPER – zentriert, max 1100px */
#wrapper_r,
.site-grid { max-width: 1100px !important; margin: 0 auto !important; background: #ffffff; }

/* ============================================================
   TOPBAR
   Modul-Position: "topbar" (Custom HTML Modul)
   ============================================================ */
.ff-topbar {
  background: #222222;
  color: #ffffff;
  font-size: 12px;
  padding: 6px 0;
}
.ff-topbar-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ff-topbar a { color: #cccccc; margin-left: 14px; }
.ff-topbar a:hover { color: #ffffff; }

/* ============================================================
   HEADER
   Cassiopeia-Header überschreiben
   ============================================================ */
#header,
.header { background: #BF1A25 !important; padding: 16px 24px !important; }

/* Logo-Box (weißer Hintergrund ums Logo-Icon) */
.navbar-brand img,
.site-logo {
  background: #ffffff !important;
  border-radius: 6px !important;
  padding: 6px !important;
  max-height: 64px !important;
  width: auto !important;
}

/* Site-Name neben Logo */
.navbar-brand .site-name,
.site-name {
  color: #ffffff !important;
  font-size: 20px !important;
  font-weight: bold !important;
  line-height: 1.2 !important;
}

/* Social Icons im Header (rechts) */
.ff-header-social { margin-left: auto; display: flex; gap: 8px; }
.ff-header-social a {
  background: rgba(255,255,255,0.15);
  color: #ffffff;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 12px;
}
.ff-header-social a:hover { background: rgba(255,255,255,0.28); }

/* ============================================================
   SLIDER
   Modul-Position: "banner" (Custom HTML + JS Modul)
   ============================================================ */
.ff-slider { height: 340px; position: relative; overflow: hidden; background: #1a1a1a; }
.ff-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.7s ease; }
.ff-slide.active { opacity: 1; }

.ff-slide-bg {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #555555; font-style: italic;
}
.ff-slide-bg img { width: 100%; height: 100%; object-fit: cover; }

.ff-slide-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.7) 40%, rgba(0,0,0,0.1) 100%);
  display: flex; align-items: center; padding: 0 52px;
}
.ff-slide-content { max-width: 500px; }
.ff-slide-badge {
  display: inline-block; background: #BF1A25; color: #ffffff;
  font-size: 12px; padding: 3px 10px; border-radius: 3px; margin-bottom: 12px;
}
.ff-slide-content h2 { color: #ffffff; font-size: 28px; font-weight: bold; line-height: 1.3; margin-bottom: 10px; }
.ff-slide-content p { color: rgba(255,255,255,0.82); font-size: 14px; line-height: 1.65; margin-bottom: 18px; }

.ff-slide-btn {
  display: inline-block; background: #ffffff; color: #BF1A25;
  font-size: 14px; font-weight: bold; padding: 11px 24px; border-radius: 4px;
}
.ff-slide-btn:hover { background: #f0f0f0; }
.ff-slide-btn.outline {
  background: transparent; color: #ffffff;
  border: 2px solid rgba(255,255,255,0.75);
}
.ff-slide-btn.outline:hover { background: rgba(255,255,255,0.12); }

.ff-slider-dots { position: absolute; bottom: 16px; left: 52px; display: flex; gap: 8px; }
.ff-slider-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255,255,255,0.35); cursor: pointer; border: none; padding: 0;
}
.ff-slider-dot.active { background: #ffffff; }

.ff-slider-arrows {
  position: absolute; top: 50%; right: 20px;
  transform: translateY(-50%); display: flex; flex-direction: column; gap: 6px;
}
.ff-slider-arrow {
  background: rgba(255,255,255,0.15); color: #ffffff; border: none;
  width: 34px; height: 34px; border-radius: 4px; cursor: pointer; font-size: 15px;
}
.ff-slider-arrow:hover { background: rgba(255,255,255,0.3); }

/* ============================================================
   NAVIGATION
   Cassiopeia Menü überschreiben (Position: menu)
   ============================================================ */
/* NAVIGATION */
.container-nav {
  background: #BF1A25 !important;
  padding: 0 !important;
  width: 100% !important;
}
.container-nav ul.nav {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  list-style: none !important;
  padding: 0 16px !important;
  margin: 0 !important;
}
.container-nav ul.nav > li > a {
  display: block !important;
  color: #ffffff !important;
  padding: 14px 15px !important;
  font-size: 14px !important;
  font-weight: bold !important;
  text-decoration: none !important;
}
.container-nav ul.nav > li > a:hover,
.container-nav ul.nav > li.active > a {
  background: #8F1219 !important;
  color: #ffffff !important;
}

/* Dropdown */
.dropdown-menu {
  background: #8F1219 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important;
  min-width: 190px !important;
}
.dropdown-item {
  color: #ffffff !important;
  font-size: 13px !important;
  padding: 10px 15px !important;
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}
.dropdown-item:hover {
  background: #6d0e15 !important;
  color: #ffffff !important;
}

/* ============================================================
   CONTENT-BEREICH – Sidebar entfernen, volle Breite
   ============================================================ */
#content { width: 100% !important; padding: 24px !important; }
#aside { display: none !important; }
.row-fluid [class*="span"] { margin-left: 0 !important; }

/* ============================================================
   LETZTER EINSATZ
   Modul-Position: oberhalb Content (Custom HTML Modul)
   ============================================================ */
.ff-einsatz-bar {
  background: #222222; color: #ffffff;
  padding: 11px 16px;
  display: flex; align-items: center; gap: 12px;
  border-radius: 4px; margin-bottom: 22px; font-size: 14px;
}
.ff-einsatz-bar .ff-label {
  background: #BF1A25; padding: 3px 9px;
  border-radius: 3px; font-size: 12px; font-weight: bold; flex-shrink: 0;
}
.ff-einsatz-bar .ff-ort { flex: 1; }
.ff-einsatz-bar .ff-datum { color: #aaaaaa; font-size: 12px; white-space: nowrap; }
.ff-einsatz-bar a { color: #80b4ff; font-size: 12px; margin-left: 12px; white-space: nowrap; }
.ff-einsatz-bar a:hover { color: #aaccff; }

/* ============================================================
   SECTION TITLE
   ============================================================ */
.ff-section-title {
  font-size: 16px; font-weight: bold; color: #222222;
  margin-bottom: 14px; padding-bottom: 7px;
  border-bottom: 2px solid #BF1A25;
}

/* ============================================================
   ORTSWEHREN-KACHELN
   ============================================================ */
.ff-kacheln {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px; margin-bottom: 26px;
}
.ff-kachel {
  background: #f8f8f8; border: 1px solid #e0e0e0;
  border-radius: 8px; overflow: hidden;
  display: flex; flex-direction: column;
}
.ff-kachel-head { background: #BF1A25; color: #ffffff; padding: 13px 15px; }
.ff-kachel-head h3 { font-size: 15px; font-weight: bold; margin-bottom: 2px; }
.ff-kachel-head span { font-size: 11px; color: #ffcccc; }
.ff-kachel.ferch .ff-kachel-head,
.ff-kachel.geltow .ff-kachel-head { background: #8F1219; }
.ff-kachel-body { padding: 13px 15px; font-size: 13px; color: #444444; line-height: 1.65; flex: 1; }
.ff-kachel-footer { padding: 9px 15px; border-top: 1px solid #e0e0e0; }
.ff-kachel-footer a { font-size: 13px; color: #BF1A25; font-weight: bold; }
.ff-kachel-footer a:hover { color: #8F1219; }

/* ============================================================
   NEUIGKEITEN
   ============================================================ */
.ff-news-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 16px; margin-bottom: 24px;
}
.ff-news-card {
  border: 1px solid #e0e0e0; border-radius: 8px;
  overflow: hidden; background: #ffffff;
}
.ff-news-img {
  height: 160px; background: #dddddd;
  display: flex; align-items: center; justify-content: center;
  color: #aaaaaa; font-size: 13px; font-style: italic; overflow: hidden;
}
.ff-news-img img { width: 100%; height: 100%; object-fit: cover; }
.ff-news-body { padding: 14px; }
.ff-news-body .ff-meta { font-size: 11px; color: #888888; margin-bottom: 5px; }
.ff-news-body h4 { font-size: 14px; font-weight: bold; margin-bottom: 6px; color: #222222; line-height: 1.4; }
.ff-news-body p { font-size: 13px; color: #555555; line-height: 1.55; }
.ff-news-body a { font-size: 13px; color: #BF1A25; display: block; margin-top: 10px; font-weight: bold; }
.ff-news-body a:hover { color: #8F1219; }

/* ============================================================
   FOOTER
   Cassiopeia Footer überschreiben
   ============================================================ */
#footer, footer, .footer {
  background: #222222 !important;
  color: #cccccc !important;
  padding: 24px 24px 16px !important;
}
.ff-footer-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; margin-bottom: 20px;
}
.ff-footer-grid h4 {
  color: #ffffff; font-size: 14px; font-weight: bold;
  margin-bottom: 10px; padding-bottom: 6px;
  border-bottom: 1px solid #444444;
}
.ff-footer-grid p { font-size: 12px; color: #888888; line-height: 1.6; margin-top: 4px; }
.ff-footer-grid ul { list-style: none; padding: 0; margin: 0; }
.ff-footer-grid ul li { margin-bottom: 5px; }
.ff-footer-grid ul li a { color: #aaaaaa; font-size: 13px; }
.ff-footer-grid ul li a:hover { color: #ffffff; }
.ff-footer-bottom {
  border-top: 1px solid #444444; padding-top: 12px;
  font-size: 12px; color: #666666;
  display: flex; justify-content: space-between;
}
.ff-footer-bottom a { color: #666666; }
.ff-footer-bottom a:hover { color: #aaaaaa; }

/* Cassiopeia eigene Footer-Elemente unterdrücken */
.footer .nav, footer .nav { display: none !important; }

/* Topbar-Position reset */
.container-topbar {
  max-width: 100% !important;
  padding: 0 !important;
}
.container-topbar .ff-topbar {
  width: 100%;
}

/* HEADER */
.header .grid-child {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 16px 24px !important;
}
.navbar-brand {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 16px !important;
}
.navbar-brand img {
  width: 64px !important;
  height: 64px !important;
  max-height: 64px !important;
  object-fit: contain !important;
  background: #ffffff !important;
  border-radius: 6px !important;
  padding: 6px !important;
}
.site-name {
  color: #ffffff !important;
  font-size: 20px !important;
  font-weight: bold !important;
  line-height: 1.2 !important;
}

/* NAVIGATION auf Position banner */
.container-banner {
  background: #BF1A25 !important;
  padding: 0 !important;
}
.container-banner .nav-pills,
.container-banner ul.nav {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  padding: 0 16px !important;
  margin: 0 !important;
  list-style: none !important;
}
.container-banner ul.nav > li > a {
  display: block !important;
  color: #ffffff !important;
  padding: 14px 15px !important;
  font-size: 14px !important;
  font-weight: bold !important;
  border-radius: 0 !important;
}
.container-banner ul.nav > li > a:hover,
.container-banner ul.nav > li.active > a {
  background: #8F1219 !important;
  color: #ffffff !important;
}

.container-banner {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.container-banner > div {
  max-width: 100% !important;
  padding: 0 !important;
}