/*
 * FF Oelsnitz: Design auf Basis von Cassiopeia (Child-Template).
 * Nachbau des bisherigen Templates pri_simple (Preset 2): Rot #bf1212, Fußzeile #494949,
 * "boxed" 1170 px vor festem Hintergrundfoto, Überschriften in Lato.
 * Lato wird lokal eingebunden (nicht von Google), siehe ../fonts/OFL.txt.
 */

/* Inhalts-Styles aus dem alten Template (Einsatzkomponente, Kacheln, Galerie …) */
@import url("inhalte.css");
/* Bootstrap-2-Spaltenklassen (span1…span12 usw.) aus alten Beiträgen */
@import url("bs2-kompat.css");
/* Knopf-Stile der Einsatzkomponente 3.44, in 4.0.07 entfallen, von den eigenen Layouts genutzt */
@import url("eiko-kompat.css");
/* Bildergalerie unter Beiträgen (Ersatz für DI) und vergrößerte Ansicht */
@import url("galerie.css");
/* Kontaktformular „Nachricht an den Wehrleiter“ (com_contact) im Aussehen des früheren Moduls */
@import url("kontakt.css");

@font-face { font-family: "Lato"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/lato-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/lato-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/lato-latin-700-normal.woff2") format("woff2"); }
/* Das alte Template lud nur Lato Light (300), setzte Überschriften aber auf 600 (nhochdrei.css): Der Browser
   hat Light künstlich fett gerechnet. Diese Familie kennt nur Light, damit das Schriftbild gleich bleibt. */
@font-face { font-family: "Lato Light"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/lato-latin-300-normal.woff2") format("woff2"); }

:root {
  --ffo-rot: #bf1212;
  --ffo-rot-hell: #e91b1b; /* Fußzeilen-Links aus pri_simple preset2 */
  --ffo-grau: #494949;
  --ffo-grau-dunkel: #3d3d3d;
  --ffo-breite: 1170px;
  --cassiopeia-color-primary: var(--ffo-rot);
  --cassiopeia-color-link: #620909; /* Linkfarbe aus pri_simple preset2 */
  --cassiopeia-color-hover: var(--ffo-rot);
  --cassiopeia-font-family-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --cassiopeia-font-family-headings: "Lato", "Helvetica Neue", Arial, sans-serif;
  --cassiopeia-font-weight-headings: 300;
  --ffo-font-ueberschrift: "Lato Light", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Grundgerüst: Kasten 1170 px vor Hintergrundfoto ---------- */

body.site {
  background: #2b1a10 url("../../../../../images/feuerwehr_test_077.jpg") center top / cover no-repeat fixed;
  font-size: 0.875rem;
  color: #333;
}

.container-header,
.site-grid,
.container-footer {
  width: 100%;
  max-width: var(--ffo-breite);
  margin-inline: auto;
  background: #fff;
}

/* Kein Spaltenabstand im Raster, damit Bänder (Startbild, Fakten, Brotkrumen) die volle Kastenbreite nutzen */
.site-grid {
  column-gap: 0;
  grid-template-columns: [full-start] 0 [main-start] repeat(4, minmax(0, 1fr)) [main-end] 0 [full-end];
}

/* Typografie wie im alten Template (Bootstrap 2 + pri_simple): Text 14/20 px, Überschriften Lato Light fett gerechnet */
body.site {
  line-height: 20px;
}

h1, h2, h3, h4, h5, h6, .card-header, .page-header h1 {
  font-family: var(--ffo-font-ueberschrift);
  font-weight: 600 !important;
  line-height: 140% !important;
  margin: 0;
}

h1 { font-size: 38.5px; }
h2 { font-size: 31.5px; }
h3 { font-size: 24.5px; }
h4 { font-size: 17.5px; }
h5 { font-size: 14px; }
h6 { font-size: 11.9px; }

p {
  margin: 0 0 10px;
}

/* "Aktuelles" auf der Startseite mit Aufzählungspunkten wie bisher */
.container-top-b .mod-articlescategory {
  list-style: disc;
  padding-left: 1.2rem;
}

/* Fußzeile direkt nach dem Inhalt (Cassiopeia schiebt sie sonst an den Fensterrand) */
body.site .container-footer {
  margin-top: 0 !important;
}

body.site .site-grid {
  flex-grow: 0;
  margin-bottom: 0;
}

.container-bottom-a,
.container-bottom-b {
  margin: 0;
}

.container-bottom-a > *,
.container-bottom-b > * {
  margin-bottom: 0;
}

/* ---------- Kopf: Logo links, Menü rechts ---------- */

.container-header {
  background-image: none;
  background-color: #fff;
  box-shadow: none;
  border-bottom: 1px solid #e5e5e5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.75rem;
}

.container-header .grid-child {
  max-width: none;
  margin: 0;
  padding: 0;
  width: auto;
}

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

.container-header .brand-logo img {
  height: 46px;
  width: auto;
}

.container-header .container-nav {
  padding: 0;
}

.container-header .mod-menu,
.container-header .metismenu {
  color: #333;
}

.container-header .metismenu > li > a,
.container-header .metismenu > li > button,
.container-header .mod-menu > li > a {
  color: #333;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 1.15rem 0.6rem 1rem;
  border-top: 3px solid transparent;
  text-decoration: none;
}

.container-header .metismenu > li.active > a,
.container-header .metismenu > li > a:hover,
.container-header .metismenu > li.mm-active > a,
.container-header .metismenu > li.active > button,
.container-header .metismenu > li > button:hover,
.container-header .metismenu > li.mm-active > button {
  color: var(--ffo-rot);
  border-top-color: var(--ffo-rot);
  background: transparent;
}

.container-header .metismenu > li > button::before {
  color: #333;
}

.container-header .metismenu .mm-collapse {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-top: 3px solid var(--ffo-rot);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

.container-header .metismenu .mm-collapse a {
  color: #333;
  font-size: 0.8125rem;
  padding: 0.45rem 1rem;
}

.container-header .metismenu .mm-collapse a:hover {
  color: var(--ffo-rot);
}

.container-header .navbar-toggler {
  color: #333;
  border-color: #ccc;
}

/* ---------- Roter Seitentitel-Balken (Modul mod_ffo_seitentitel, Position banner) ---------- */

.ffo-seitentitel {
  background: var(--ffo-rot);
  color: #fff;
  text-align: center;
  padding: 2.1rem 1rem;
}

/* roter Balken: im alten Template keine Überschrift (div.pri-title), daher echtes Light */
.ffo-seitentitel h1 {
  margin: 0;
  font-family: var(--cassiopeia-font-family-headings);
  font-weight: 300 !important;
  font-size: 2.25rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #fff;
}

.container-banner {
  margin-bottom: 0;
}

/* ---------- Startbild (eigenes HTML-Modul auf der Startseite, Position banner) ----------
   Maße und Bildunterschrift wie beim alten Slider (mod_reslider + nhochdrei.css): 400 px hoch,
   Bildausschnitt etwas unterhalb der Mitte, Text fett auf dunklem Band mittig im Bild. */

.ffo-startbild {
  position: relative;
  height: 400px;
  overflow: hidden;
  background: #222;
}

.ffo-startbild figure {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  animation: ffo-wechsel 24s infinite;
}

.ffo-startbild figure:nth-child(2) { animation-delay: 8s; }
.ffo-startbild figure:nth-child(3) { animation-delay: 16s; }

.ffo-startbild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 44%;
}

.ffo-startbild figcaption {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  margin-top: -6%;
  padding: 2%;
  background: rgba(0, 0, 0, 0.3);
  text-align: center;
  color: #fff;
  font-family: var(--ffo-font-ueberschrift);
  font-weight: 800;
  font-size: 44.8px;
  line-height: 115%;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}

@keyframes ffo-wechsel {
  0% { opacity: 0; }
  4% { opacity: 1; }
  33% { opacity: 1; }
  37% { opacity: 0; }
  100% { opacity: 0; }
}

@media (max-width: 767.98px) {
  .ffo-startbild { height: 220px; }
  .ffo-startbild figcaption { font-size: 1.3rem; top: auto; bottom: 0; margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ffo-startbild figure { animation: none; }
  .ffo-startbild figure:first-child { opacity: 1; }
}

/* Seitenüberschrift nicht zusätzlich zum roten Balken zeigen (im alten Template auskommentiert).
   Nur ausblenden, wenn danach noch der Beitragstitel folgt: Ohne Seitenüberschrift gibt Joomla 4
   den Beitragstitel selbst als h1 aus, der muss sichtbar bleiben. */
.com-content-article > .page-header:has(> h1):has(+ .page-header),
.com-content-category-blog > .page-header:has(> h1),
.com-content-category > .page-header:has(> h1) {
  display: none;
}

/* Beitrags- und Blog-Titel wie im alten Template: dunkelgrau, als Link (Titel verlinken) in Linkfarbe,
   Lato Light, feine Linie darunter */
.com-content-article .page-header,
.blog-item .page-header {
  border-bottom: 1px solid #eee;
  margin-bottom: 0.4rem;
}

/* Titel wie in Joomla 3 immer in h2-Größe (31,5 px), auch wenn Joomla 4 ihn als h1 ausgibt */
.com-content-article .page-header h1,
.com-content-article .page-header h2,
.blog-item .page-header h2 {
  font-size: 31.5px;
  color: #333;
  margin: 0;
}

.com-content-article .page-header h1 a,
.com-content-article .page-header h2 a,
.blog-item .page-header h2 a {
  color: var(--cassiopeia-color-link);
  text-decoration: none;
}

.com-content-article .page-header h1 a:hover,
.com-content-article .page-header h2 a:hover,
.blog-item .page-header h2 a:hover {
  color: var(--ffo-rot);
}

/* Einleitungsbild mit Abstand zum Text (alt: .pull-left > img 15px, Blog-Bilder 10px unten);
   "Weiterlesen" ohne Pfeil-Symbol wie bisher (Knopfstil in bs2-kompat.css) */
.item-image.left {
  margin: 0 15px 10px 0;
}

.item-image.right {
  margin: 0 0 10px 15px;
}

/* In Blog-Listen hat das Bild selbst schon 10 px Abstand nach unten (inhalte.css, ".blog > div > div img",
   aus dem alten Template); der Rahmen braucht dort keinen zusätzlichen, sonst 20 statt 10 px */
.blog .item-image.left,
.blog .item-image.right {
  margin-bottom: 0;
}

.readmore .btn [class^="icon-"] {
  display: none;
}

/* Infozeile „Details  Veröffentlicht: …“ einzeilig, klein und grau */
.article-info {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.6rem;
  margin: 0 0 0.8rem;
  font-size: 11px;
  color: #999;
}

.article-info .article-info-term {
  font-weight: 700;
  color: #777;
}

.article-info dd {
  margin: 0;
}

.article-info [class^="icon-"],
.article-info [class*=" icon-"] {
  display: none;
}

/* Schlagwörter zeigte das alte Template in Blog-Übersichten nicht an */
.blog-item .tags {
  display: none;
}

.blog-item {
  margin-bottom: 2rem;
}

/* Kurzcode [testimonial] (plg_content_ffokurzcodes): Zitat mit großem Anführungszeichen links */
.ffo-zitat {
  display: grid;
  grid-template-columns: 56px 1fr;
  column-gap: 0.5rem;
  margin: 0 0 1.25rem;
}

.ffo-zitat-zeichen {
  font-size: 48px;
  color: #333;
  line-height: 1;
}

.ffo-zitat-text {
  font-style: italic;
}

.ffo-zitat-text p:last-child {
  margin-bottom: 0.3rem;
}

.ffo-zitat-autor {
  grid-column: 2;
}

/* Kurzcode [accordion] (plg_content_ffokurzcodes): aufklappbare Einträge im Stil von Bootstrap 2 */
.ffo-aufklapper {
  margin: 0 0 1.5rem;
}

.ffo-aufklapper-eintrag {
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  margin-bottom: 2px;
}

.ffo-aufklapper-eintrag > summary {
  padding: 8px 15px;
  color: var(--ffo-rot);
  cursor: pointer;
  list-style: none;
}

.ffo-aufklapper-eintrag > summary::-webkit-details-marker {
  display: none;
}

.ffo-aufklapper-eintrag > summary:hover,
.ffo-aufklapper-eintrag > summary:focus-visible {
  text-decoration: underline;
}

.ffo-aufklapper-inhalt {
  padding: 9px 15px;
  border-top: 1px solid #e5e5e5;
}

/* Startseite: kein Beitragstext, nur Module (wie bisher). Der Menüpunkt "Start" zeigt "Hauptbeiträge"
   mit 0 Beiträgen; diese Ansicht gibt es nur auf der Startseite. (Nicht über die Itemid ausblenden:
   Joomla ordnet auch Seiten ohne eigenen Menüpunkt, z. B. Schlagwörter, der Startseite zu.) */
body.view-featured .container-component {
  display: none;
}

/* Startseiten-Module (Startbild, drei Spalten, Fakten) hängen an Menüpunkt 112 und würden sonst auch auf
   Seiten ohne eigenen Menüpunkt erscheinen, die Joomla diesem Menüpunkt zuordnet */
body.itemid-112:not(.view-featured) .container-banner,
body.itemid-112:not(.view-featured) .container-top-b,
body.itemid-112:not(.view-featured) .container-bottom-a {
  display: none;
}

/* Schlagwort-Seiten (z. B. /component/tags/tag/nachruf): früher schmaler roter Streifen statt Titelbalken */
body.view-tag .container-banner {
  display: block !important;
  height: 30px;
  overflow: hidden;
  background: var(--ffo-rot);
}

body.view-tag .container-banner > * {
  display: none;
}

/* Schlagwort-Seite wie bisher: Suchfeld und "Anzeige #" mit sichtbarer Beschriftung, Liste als Aufzählung */
.com-tags__items form .btn-group {
  display: inline-flex;
  align-items: center;
}

.com-tags__items form label {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 4px 0 0 !important;
  clip: auto !important;
  overflow: visible !important;
  white-space: nowrap;
  font-size: 12px;
}

.com-tags__items .inputbox {
  width: 220px;
  padding: 4px 6px;
  font-size: 14px;
  line-height: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.com-tags__items form .btn {
  flex: 0 0 auto;
  padding: 4px 10px;
  font-size: 12px;
  line-height: 20px;
  color: #333;
  background: #fff !important;
  background-image: none !important;
  border: 1px solid #ccc;
  border-radius: 0;
  text-shadow: none;
}

.com-tags__items #limit {
  width: auto;
  min-width: 64px;
  padding: 2px 28px 2px 8px;
  font-size: 12px;
  line-height: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.com-tags-tag__category.list-group {
  display: block;
  margin: 15px 0;
  padding-left: 25px;
  list-style: disc;
  border: 0;
  border-radius: 0;
}

.com-tags-tag__category .list-group-item {
  display: list-item;
  padding: 0;
  color: #333;
  background: transparent;
  border: 0;
}

.com-tags-tag__category .list-group-item h3 {
  margin: 8px 0;
  font-size: 24.5px;
}

.com-tags-tag__category .list-group-item h3 a {
  color: var(--cassiopeia-color-link);
  text-decoration: none;
}

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

.site-grid {
  padding-top: 0;
  padding-bottom: 0;
}

.site-grid > .container-component,
.site-grid > .container-top-a,
.site-grid > .container-top-b,
.site-grid > .container-sidebar-left,
.site-grid > .container-sidebar-right {
  padding: 1.5rem 1.75rem;
}

/* Letzte Einsätze: kleine Vorschaubilder wie bisher (Bildbreite steht im Modul fest auf 90 %) */
.eiko_last .eiko_last_image {
  width: 45px !important;
  height: 35px !important;
  object-fit: cover;
  float: left;
  margin: 3px 10px 0 0;
}

.eiko_last .aktuelle_beitraege {
  margin-left: 0 !important;
  clear: both;
  min-height: 46px;
}

.eiko_last .aktuelle_beitraege p {
  margin: 0;
}

.eiko_last .category-module {
  padding-left: 0;
}

/* Abstand unter dem roten Balken wie bisher: kein zusätzlicher Außenabstand am Inhalt, und der erste
   Blog-Titel ohne den Innenabstand, den inhalte.css (.blog .page-header) für die Folgeeinträge setzt */
.container-component > main {
  margin-top: 0;
}

.blog-items > .blog-item:first-child .page-header {
  padding-top: 0 !important;
}

/* Mehrspaltige Blogs (ab 992 px, darunter einspaltig): ganze erste Zeile ohne Abstand, sonst stehen die
   Titel versetzt; Reihenfolge "abwärts" spaltenweise mit bündigen Zeilen (Override category/blog.php) */
@media (min-width: 992px) {
  .blog-items > .blog-item.ffo-erste-zeile .page-header {
    padding-top: 0 !important;
  }

  .blog-items.ffo-abwaerts {
    grid-auto-flow: column;
    grid-template-rows: repeat(var(--ffo-zeilen), auto);
  }
}

/* Links wie im alten Template nicht unterstrichen (Cassiopeia unterstreicht alle "a:not([class])") */
a,
a:not([class]) {
  color: var(--cassiopeia-color-link);
  text-decoration: none;
}

a:hover,
a:focus {
  color: var(--ffo-rot);
  text-decoration: underline;
}

/* Drei Spalten auf der Startseite (Aktuelles, Letzte Einsätze, Nächste Termine) */
.container-top-b .card,
.container-top-a .card {
  border: 0;
  box-shadow: none;
  background: transparent;
}

.container-top-b .card-header,
.container-top-a .card-header {
  background: transparent;
  border: 0;
  padding: 0 0 10px;
  font-size: 26px;
  color: #333;
}

/* "Senden" im Kontaktformular (mod_super_simple_contact_form): Maße der alten Absende-Knöpfe (pri_simple),
   Rahmen/Farbe aus inhalte.css (.contact_form_custom .rf_submit) */
.contact_form_custom .rf_submit {
  padding: 5px 10px;
  font-size: 14px;
  line-height: 20px;
  background: #fff;
}

/* Modul-Überschriften wie im alten Template (.module h3: 26 px, 10 px Abstand) */
.moduletable > h3 {
  font-size: 26px;
  margin: 0 0 10px;
}

.container-top-b .card-body,
.container-top-a .card-body {
  padding: 0;
}

/* ---------- Fakten (Modul mod_ffo_fakten, Position bottom-a) ---------- */

.container-bottom-a {
  grid-column: full-start / full-end;
  padding: 0;
}

.ffo-fakten {
  background: #0b1626 url("../../../../../images/nachthimmel,-baum-silhouetten,-sterne-185946.jpg") center / cover no-repeat;
  padding: 2.2rem 1.75rem 3rem;
  text-align: center;
}

.ffo-fakten h2 {
  color: #fff;
  font-size: 1.9rem;
  margin: 0 0 1.5rem;
}

.ffo-fakten-kacheln {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.ffo-fakten-kachel {
  display: block;
  padding: 2rem 0.5rem;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  text-decoration: none;
  transition: background 0.2s;
}

.ffo-fakten-kachel:hover,
.ffo-fakten-kachel:focus {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.ffo-fakten-kachel .ffo-fakten-icon {
  font-size: 2.6rem;
  display: block;
}

.ffo-fakten-kachel strong {
  display: block;
  font-size: 2.6rem;
  line-height: 1.2;
}

.ffo-fakten-kachel span {
  font-size: 1.15rem;
}

@media (max-width: 767.98px) {
  .ffo-fakten-kacheln { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Brotkrumen als roter Balken (Position bottom-b) ---------- */

.container-bottom-b {
  grid-column: full-start / full-end;
  padding: 0;
}

.container-bottom-b .mod-breadcrumbs__wrapper,
.container-bottom-b nav[aria-label] {
  background: var(--ffo-rot);
  margin: 0;
  padding: 0.45rem 1.75rem;
}

.container-bottom-b .breadcrumb {
  margin: 0;
  padding: 0;
  background: transparent;
  font-family: var(--cassiopeia-font-family-headings);
  font-size: 0.8125rem;
}

.container-bottom-b .breadcrumb,
.container-bottom-b .breadcrumb a,
.container-bottom-b .breadcrumb-item + .breadcrumb-item::before,
.container-bottom-b .breadcrumb-item.active {
  color: #fff;
}

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

.container-footer {
  background: var(--ffo-grau);
  color: #fff;
  margin-top: 0;
  margin-bottom: 2rem;
}

.container-footer .grid-child {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  padding: 1.75rem;
  max-width: none;
  align-items: start;
}

.container-footer .grid-child > * {
  margin: 0;
}

.container-footer h3 {
  color: #fff;
  font-size: 24px; /* #sp-footer-wrapper .header */
  margin: 0 0 10px;
}

.container-footer p {
  margin: 0 0 5px;
  font-size: 14px;
  line-height: 20px;
}

/* :not(.btn) wie Cassiopeias ".footer a:not(.btn)" (sonst weiß); ohne Unterstrich wie bisher */
.container-footer a:not(.btn),
.container-footer .mod-menu a {
  color: var(--ffo-rot-hell);
  text-decoration: none;
}

.container-footer a:not(.btn):hover,
.container-footer .mod-menu a:hover {
  color: #f27878;
}

.container-footer .mod-menu {
  list-style: none;
  padding: 0;
  font-size: 0.8125rem;
}

.container-footer .mod-menu > li > a {
  padding: 0;
}

/* Liste eng wie bisher (20 px je Zeile), aktuelle Seite nicht unterstrichen (Cassiopeia: .mod-list li) */
.container-footer .mod-list li {
  padding: 0;
}

.container-footer .mod-list li.active > a {
  text-decoration: none;
}

/* Copyright-Zeile über volle Breite (Modul mit Klasse ffo-copyright) */
.container-footer .ffo-copyright {
  grid-column: 1 / -1;
  margin: 0 -1.75rem -1.75rem;
  padding: 0.65rem 1.75rem;
  background: var(--ffo-grau-dunkel);
  font-size: 14px;
}

/* wie früher: Text links (span9), Symbole rechts daneben (span3) */
.container-footer .ffo-copyright > .mod-custom {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 30px;
  align-items: center;
}

.container-footer .ffo-copyright-text a {
  color: #fff;
  text-decoration: none;
}

.container-footer .ffo-copyright-social a {
  color: #fff;
  display: inline-flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  background: #5a5a5a;
  text-decoration: none;
}

.container-footer .ffo-copyright-social a:hover {
  background: var(--ffo-rot);
}

@media (max-width: 767.98px) {
  .container-footer .ffo-copyright > .mod-custom {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
}

@media (max-width: 767.98px) {
  .container-footer .grid-child { grid-template-columns: 1fr; }
  .container-header { justify-content: center; }
}