/* ==========================================================================
   ffwsite.css – zentrale Stylesheets der Feuerwehr Waldkirch-Website
   Konsolidiert alle ehemals inline in <style>-Blöcken definierten Regeln
   sowie die ehemals separaten Dateien bs-theme-overrides.css,
   Hero-Carousel-images.css und Navbar-With-Button-icons.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Bootstrap-Theme-Overrides (ehemals bs-theme-overrides.css)
   -------------------------------------------------------------------------- */
:root,
[data-bs-theme=light] {
  --bs-body-font-family: Roboto, sans-serif;
}

/* --------------------------------------------------------------------------
   @font-face – Roboto (ehemals inline <style> in base.html)
   -------------------------------------------------------------------------- */
@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/roboto-v30-latin-regular.15d9f621c3bd.woff2") format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'roboto-bold';
  font-style: bold;
  font-weight: 700;
  src: url("../fonts/roboto-v30-latin-700.e9f5aaf547f1.woff2") format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: bold;
  font-weight: 700;
  src: url("../fonts/roboto-v30-latin-700.e9f5aaf547f1.woff2") format('woff2');
}

/* --------------------------------------------------------------------------
   Globale Elemente (ehemals inline <style> in base.html)
   -------------------------------------------------------------------------- */
h1 {
  font-family: "Josefin";
  color: red;
}

body {
  font-family: Roboto;
  background-color: #f5f5f5;
}

b {
  font-family: roboto-bold;
  font-weight: 700;
}

a {
  color: #e30513;
}

ul.dropdown-menu.show {
  border: none;
  color: black;
  border-radius: unset;
}

ul.dropdown-menu.show:hover {
  border: none;
  color: #65c1c2;
  border-radius: unset;
}

a.dropdown-item:hover {
  background-color: unset;
  color: var(--bs-link-color);
  border-radius: unset;
}

/* --------------------------------------------------------------------------
   Navigation (ehemals inline <style> in base.html)
   -------------------------------------------------------------------------- */
.menu_active {
  font-weight: bold;
  color: #00687c !important;
}

.menu_inactive:hover {
  color: #65c1c2 !important;
}

/* --------------------------------------------------------------------------
   Hero-Carousel-Images (ehemals Hero-Carousel-images.css)
   -------------------------------------------------------------------------- */
.fit-cover {
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Navbar-Button-Icons (ehemals Navbar-With-Button-icons.css)
   -------------------------------------------------------------------------- */
.bs-icon {
  --bs-icon-size: .75rem;
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: var(--bs-icon-size);
  width: calc(var(--bs-icon-size) * 2);
  height: calc(var(--bs-icon-size) * 2);
  color: var(--bs-primary);
}

.bs-icon-xs {
  --bs-icon-size: 1rem;
  width: calc(var(--bs-icon-size) * 1.5);
  height: calc(var(--bs-icon-size) * 1.5);
}

.bs-icon-sm {
  --bs-icon-size: 1rem;
}

.bs-icon-md {
  --bs-icon-size: 1.5rem;
}

.bs-icon-lg {
  --bs-icon-size: 2rem;
}

.bs-icon-xl {
  --bs-icon-size: 2.5rem;
}

.bs-icon.bs-icon-primary {
  color: var(--bs-white);
  background: var(--bs-primary);
}

.bs-icon.bs-icon-primary-light {
  color: var(--bs-primary);
  background: rgba(var(--bs-primary-rgb), .2);
}

.bs-icon.bs-icon-semi-white {
  color: var(--bs-primary);
  background: rgba(255, 255, 255, .5);
}

.bs-icon.bs-icon-rounded {
  border-radius: .5rem;
}

.bs-icon.bs-icon-circle {
  border-radius: 50%;
}

/* --------------------------------------------------------------------------
   Service-Listen (ehemals inline <style> in home_page.html,
   contact_page.html, content_page.html, sub_page.html,
   aboutus_index_page.html, departments_index_page.html,
   department_sub_page.html)
   -------------------------------------------------------------------------- */
ul.service li {
  color: #202020;
  list-style: none;
}

ul.service li:before {
  color: #ed0000;
  content: "\25AA";
  font-size: 1.5em;
  padding-right: .25em;
  position: relative;
  top: .1em;
}

ul.service {
  padding-left: 0px;
}

/* --------------------------------------------------------------------------
   Content-Listen (ehemals inline <style> in two_column_page.html,
   jobs_page.html)
   -------------------------------------------------------------------------- */
div.content ul {
  list-style-position: outside;
  padding-left: 0px;
}

div.content ul li {
  color: #202020;
  list-style: none;
  padding-bottom: 0.5em;
}

div.content ul li:before {
  color: #ed0000;
  content: "\25AA";
  font-size: 1.5em;
  padding-right: .25em;
  position: relative;
  top: .1em;
}

div#tasks ul li,
div#profile ul li,
div#offerings ul li {
  padding-bottom: .5em;
}

/* --------------------------------------------------------------------------
   TCP-Listen (ehemals inline <style> in two_column_page.html)
   -------------------------------------------------------------------------- */
.tcp ul {
  list-style-type: none;
}

.tcp ul li::before {
  color: #ed0000;
  content: "\25AA";
  padding-right: 0.75em;
  position: relative;
}

/* --------------------------------------------------------------------------
   Rechte Spalte – Listen in two_column_page (ehemals inline <style>)
   -------------------------------------------------------------------------- */
ul.list-block li::before {
  color: #ed0000;
  content: "\25AA";
}

/* --------------------------------------------------------------------------
   Carousel – responsive Höhen (ehemals inline <style> in home_page.html,
   two_column_page.html, jobs_page.html, contact_page.html,
   content_page.html, sub_page.html, aboutus_index_page.html,
   departments_index_page.html, department_sub_page.html)
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 576px) {
  .hero-carousel { height: 200px; }
}

@media only screen and (min-width: 576px) {
  .hero-carousel { height: 250px; }
}

@media only screen and (min-width: 768px) {
  .hero-carousel { height: 300px; }
}

@media only screen and (min-width: 992px) {
  .hero-carousel { height: 400px; }
}

@media only screen and (min-width: 1200px) {
  .hero-carousel { height: 500px; }
}

@media only screen and (min-width: 1400px) {
  .hero-carousel { height: 600px; }
}

/* --------------------------------------------------------------------------
   PS-Carousel (Multi-Item) – responsive Höhen (ehemals inline <style>
   in sub_page.html, aboutus_index_page.html,
   departments_index_page.html, department_sub_page.html)
   -------------------------------------------------------------------------- */
.ps-carousel {
  position: relative;
}

@media only screen and (max-width: 576px) {
  .ps-carousel { height: 100px; }
}

@media only screen and (min-width: 576px) {
  .ps-carousel { height: 200px; }
}

@media only screen and (min-width: 768px) {
  .ps-carousel { height: 200px; }
}

@media only screen and (min-width: 992px) {
  .ps-carousel { height: 200px; }
}

@media only screen and (min-width: 1200px) {
  .ps-carousel { height: 200px; }
}

@media only screen and (min-width: 1400px) {
  .ps-carousel { height: 200px; }
}

/* --------------------------------------------------------------------------
   Multi-Item-Carousel – Sliding (ehemals inline <style> in
   aboutus_index_page.html, departments_index_page.html,
   department_sub_page.html)
   Gilt nur für .ps-carousel, nicht für .hero-carousel.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .ps-carousel .carousel-inner .carousel-item > div {
    display: none;
  }
  .ps-carousel .carousel-inner .carousel-item > div:first-child {
    display: block;
  }
}

.ps-carousel .carousel-inner .carousel-item.active,
.ps-carousel .carousel-inner .carousel-item-next,
.ps-carousel .carousel-inner .carousel-item-prev {
  display: flex;
}

@media (min-width: 768px) {
  .ps-carousel .carousel-inner .carousel-item-end.active,
  .ps-carousel .carousel-inner .carousel-item-next {
    transform: translateX(25%);
  }

  .ps-carousel .carousel-inner .carousel-item-start.active,
  .ps-carousel .carousel-inner .carousel-item-prev {
    transform: translateX(-25%);
  }
}

.ps-carousel .carousel-inner .carousel-item-end,
.ps-carousel .carousel-inner .carousel-item-start {
  transform: translateX(0);
}

/* --------------------------------------------------------------------------
   Accordion (ehemals inline <style> in sub_page.html,
   aboutus_index_page.html, departments_index_page.html,
   department_sub_page.html)
   -------------------------------------------------------------------------- */
button.fs-4.accordion-button {
  color: #ed0000;
  background-color: white;
}

button.fs-4.accordion-button.collapsed {
  color: black;
  background-color: white;
}

.accordion-button:not(.collapsed)::after {
  color: #ed0000;
}

/* --------------------------------------------------------------------------
   Kontakt-Karten (ehemals inline <style> in contact_page.html)
   -------------------------------------------------------------------------- */
.contact-grid > [class*="col-"] {
  display: flex;
}

.contact-card {
  width: 100%;
  height: 100%;
}

.contact-card .row.g-0 {
  height: 100%;
}

.contact-card .card-body {
  display: flex;
  align-items: stretch;
}

.contact-card .card-text {
  margin-bottom: 0;
}

.contact-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}