/* =======================================================================
   Stylesheet der oeffentlichen Seite (serverseitig gerendertes PHP).

   ACHTUNG - Doppelung: frontend/src/styles/theme.css ist eine zweite Kopie
   derselben Regeln, die der React-Admin laedt. Solange das React-Frontend
   parallel laeuft, muessen Aenderungen an gemeinsamen Klassen in BEIDEN
   Dateien passieren. Sobald die oeffentlichen React-Seiten entfallen, wird
   aufgeteilt: oeffentliche Klassen hierher, Admin-Klassen (.ffl-admin-*,
   .ffl-thumb*, .ffl-richtext*, Formulare) nach theme.css.
   ======================================================================= */

:root {
  --ffl-red: #c0272d;
  --ffl-red-dark: #850000;
  --ffl-red-accent: #d93b56;
  --ffl-dark: #262626;
  --ffl-dark-2: #313232;
  --ffl-bg: #f4f4f4;
  --ffl-card-bg: #ffffff;
  --ffl-border: #e0e0e0;
  --ffl-text: #262626;
  --ffl-text-muted: #6b6b6b;
  --ffl-radius: 6px;
  --ffl-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  --ffl-font: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  /* The site's content width. Header banner, navigation and page share it so the three
     stay flush with each other - change it here, never in the individual rules. */
  --ffl-seitenbreite: 1400px;
}

* {
  box-sizing: border-box;
}

html,
body,
#root {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--ffl-font);
  background: var(--ffl-bg);
  color: var(--ffl-text);
}

a {
  color: var(--ffl-red);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font-family: inherit;
}

/* ---------------------------------------------------------------------- */
/* Public layout                                                          */
/* ---------------------------------------------------------------------- */

/* Sticky-footer pattern: this column fills at least the full viewport
   height, and .ffl-page (flex: 1 0 auto below) grows to absorb any extra
   space - the footer sits right after the content and is only pushed to
   the very bottom of the viewport when the page itself is short. On long
   pages it stays in normal flow, appearing only once the content ends. */
.ffl-public-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Flames background from the old site (Flammen.png) instead of the previous
   black-to-red gradient - visible left and right of the banner column. */
.ffl-header {
  background: var(--ffl-red-dark) url('/assets/flammen.png') center / cover no-repeat;
  color: #fff;
}
/* Same max-width/side-padding as .ffl-page, so the banner photo lines up
   exactly with the content column below it. No vertical padding and no
   border-radius on the image - the photo closes flush with the header's
   top and bottom edges. */
.ffl-header-inner {
  max-width: var(--ffl-seitenbreite);
  margin: 0 auto;
  padding: 0 20px;
}
.ffl-header-banner {
  position: relative;
  display: block;
  color: #fff;
}
.ffl-header-banner-img {
  display: block;
  width: 100%;
  height: auto;
}
/* Both text lines sit on the photo itself; the strong shadow keeps them
   readable on top of the busy fleet picture. */
.ffl-header-banner-text {
  position: absolute;
  left: 24px;
  top: 12px;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85), 0 0 3px rgba(0, 0, 0, 0.9);
}
.ffl-header-banner-text small {
  display: block;
  font-size: 0.85rem;
  font-weight: 400;
}

/* Burger button - hidden on desktop, shown only on mobile (see the mobile
   nav rules further down). */
.ffl-nav-toggle {
  display: none;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}

/* Mobile-only compact bar living inside .ffl-nav (the grey/red-underlined
   bar) - "FF Landscha" + the burger button. Hidden on desktop, where the
   full .ffl-header banner is shown instead (see the mobile rules below,
   which hide .ffl-header and show this in its place). */
.ffl-nav-mobile-bar {
  display: none;
}
/* Scoped under .ffl-nav-mobile-bar (not just .ffl-nav-mobile-brand alone) so
   these win the specificity fight against the generic .ffl-nav a rule (2
   classes beats its 1 class + 1 element) - display: flex is what actually
   puts the Florian icon and the text side by side instead of stacked, since
   .ffl-nav a's display: block was winning and forcing the image onto its
   own line above the text. Also keeps it free of the active/hover red
   highlight regular nav links get - it's a logo, not a menu entry. */
.ffl-nav-mobile-bar .ffl-nav-mobile-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.3px;
}
.ffl-nav-mobile-florian {
  height: 28px;
  width: auto;
}
.ffl-nav-mobile-bar .ffl-nav-mobile-brand:hover,
.ffl-nav-mobile-bar .ffl-nav-mobile-brand.active {
  background: none;
  color: #fff;
}

/* "Florian" mascot. Sticky within .ffl-content-wrap (see below): stays
   pinned to the bottom of the viewport while scrolling through the page
   content, then - because its containing block (.ffl-content-wrap) ends
   right where the footer starts - stops there and scrolls away together
   with the footer instead of overlapping it, as if standing on the
   footer's top edge. Hidden on narrower screens (mobile).

   height: 0 is deliberate: a sticky element still reserves its own box's
   height in normal flow (unlike `fixed`), which - at the mascot's full
   height - was shoving the footer down by that much on every page (off
   the bottom of the viewport on short pages, and leaving a mascot-height
   gap above the footer on long ones). With height 0 and overflow left at
   its default (visible), the image still renders in full via
   align-items: flex-end, it just no longer pushes the footer down; only
   the 20px bottom padding remains as real reserved space, which is the
   actual intended gap to the footer. */
.ffl-florian-wrap {
  position: sticky;
  bottom: 0;
  height: 0;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  padding: 0 36px 20px 0;
  pointer-events: none;
  z-index: 1;
}
.ffl-florian {
  width: 225px;
  height: auto;
}
@media (max-width: 860px) {
  .ffl-florian-wrap {
    display: none;
  }
}

.ffl-nav {
  background: var(--ffl-dark-2);
  border-bottom: 3px solid var(--ffl-red);
}
.ffl-nav-inner {
  max-width: var(--ffl-seitenbreite);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  padding: 0 20px;
}
.ffl-nav a,
.ffl-nav-group-toggle {
  display: block;
  padding: 12px 16px;
  color: #eee;
  font-weight: 600;
  font-size: 0.92rem;
}
.ffl-nav a:hover,
.ffl-nav a.active {
  background: var(--ffl-red);
  color: #fff;
  text-decoration: none;
}
.ffl-nav-item {
  position: relative;
}
/* The Information/Service group label - a button (not a link) since it
   toggles the dropdown below it rather than navigating anywhere. */
.ffl-nav-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ffl-nav-group-toggle:hover {
  background: var(--ffl-red);
  color: #fff;
}
/* The caret belongs to the mobile accordion, where it is the only hint that the
   entry expands. On desktop the dropdown opens on hover, so it is hidden there. */
.ffl-nav-group-caret {
  display: none;
  transition: transform 0.15s ease;
}
.ffl-nav-item.open .ffl-nav-group-caret {
  transform: rotate(180deg);
}
.ffl-nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--ffl-dark-2);
  min-width: 200px;
  box-shadow: var(--ffl-shadow);
  z-index: 20;
}
.ffl-nav-item:hover .ffl-nav-dropdown {
  display: block;
}
.ffl-nav-dropdown a {
  white-space: nowrap;
}

/* Mobile nav: the tall .ffl-header banner is replaced by .ffl-nav-mobile-bar
   - a compact "FF Landscha" + burger row living right inside the grey/red-
   underlined .ffl-nav bar, which is now always visible (not just once
   opened). Only .ffl-nav-inner (the actual link list) collapses behind the
   burger button. Submenus (Information/Service) can't rely on :hover on
   touch devices, so on mobile each one is its own accordion instead,
   toggled by .ffl-nav-group-toggle via .ffl-nav-item's "open" state
   (JS-driven, see PublicLayout.jsx) rather than the desktop :hover rule. */
@media (max-width: 860px) {
  .ffl-header {
    display: none;
  }
  .ffl-nav-toggle {
    display: inline-flex;
  }
  .ffl-nav-mobile-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
  }
  .ffl-nav-inner {
    display: none;
    flex-direction: column;
    padding: 8px 20px 16px;
  }
  .ffl-nav.open .ffl-nav-inner {
    display: flex;
  }
  .ffl-nav-dropdown {
    display: none;
    position: static;
    background: rgba(0, 0, 0, 0.15);
    box-shadow: none;
    min-width: 0;
  }
  .ffl-nav-item.open .ffl-nav-dropdown {
    display: block;
  }
  /* inline-block, not inline: a transform is ignored on an inline box, so the
     open-state rotation below only takes effect this way. */
  .ffl-nav-group-caret {
    display: inline-block;
  }
}

/* Wraps the content grid + the sticky Florian mascot so Florian's "sticky"
   containing block ends exactly where the footer begins (see .ffl-florian-wrap
   below) - this div, not .ffl-page, is what grows to fill short pages now. */
.ffl-content-wrap {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

.ffl-page {
  width: 100%;
  max-width: var(--ffl-seitenbreite);
  margin: 24px auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px;
  align-items: start;
  flex: 1 0 auto;
}
@media (max-width: 860px) {
  .ffl-page {
    grid-template-columns: 1fr;
  }
}

/* Homepage: Einsätze (a compact list) beside Aktuelles (headline + photo), the way the
   current site arranges them. minmax(0, …) on both tracks because a grid column
   otherwise refuses to shrink below its content's intrinsic width - a long incident
   title would push the whole row wider than the page. align-items: start keeps each
   card at its own height instead of stretching the shorter one. */
.ffl-home-spalten {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 20px;
  align-items: start;
}
.ffl-home-einsatz {
  border-bottom: 1px solid var(--ffl-border);
  padding: 8px 0;
}
@media (max-width: 860px) {
  .ffl-home-spalten {
    grid-template-columns: 1fr;
  }
}

/* Sidebar (Einsatzstatus/Webcam/Wetter/Unwetterwarnungen/Termine) only
   renders on the home page - every other page gets the single content
   column back. */
.ffl-page-no-sidebar {
  grid-template-columns: 1fr;
}

.ffl-content h1 {
  color: var(--ffl-red-accent);
  font-size: 1.6rem;
  margin-top: 0;
}

.ffl-card {
  background: var(--ffl-card-bg);
  border: 1px solid var(--ffl-border);
  border-radius: var(--ffl-radius);
  box-shadow: var(--ffl-shadow);
  padding: 16px;
  margin-bottom: 16px;
}

.ffl-sidebar-box h3 {
  margin: 0 0 10px;
  font-size: 1rem;
  color: var(--ffl-red-accent);
  text-align: center;
}

.ffl-footer {
  background: var(--ffl-dark);
  color: #ccc;
  text-align: center;
  padding: 18px 12px;
  margin-top: 40px;
  font-size: 0.85rem;
}
.ffl-footer a {
  color: #fff;
}

/* ---------------------------------------------------------------------- */
/* Slideshow                                                              */
/* ---------------------------------------------------------------------- */
/* 16:9 - the brigade's preferred look for the homepage banner. A photo of any other
   ratio still fills the frame completely (object-fit: cover below) and is cropped
   rather than letterboxed. */
.ffl-slideshow {
  position: relative;
  border-radius: var(--ffl-radius);
  overflow: hidden;
  background: #000;
  aspect-ratio: 16 / 9;
  margin-bottom: 20px;
}
.ffl-slideshow-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.ffl-slideshow-slide.active {
  opacity: 1;
}
.ffl-slideshow-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ffl-slideshow-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.75), transparent);
  color: #fff;
  padding: 24px 16px 12px;
  font-weight: 600;
}
.ffl-slideshow-dots {
  position: absolute;
  bottom: 8px;
  right: 12px;
  display: flex;
  gap: 6px;
}
.ffl-slideshow-dots button {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  padding: 0;
}
.ffl-slideshow-dots button.active {
  background: var(--ffl-red);
}

/* ---------------------------------------------------------------------- */
/* Lists / detail                                                         */
/* ---------------------------------------------------------------------- */
/* One Aktuelles article, shared by the home page column and the /aktuelles list
   so both are built the same way: heading, date, picture, (teaser). */
.ffl-beitrag-eintrag {
  padding: 12px 0;
  border-bottom: 1px solid var(--ffl-border);
}
.ffl-beitrag-eintrag h2 {
  font-size: 1.05rem;
  margin: 0 0 4px;
}
.ffl-beitrag-eintrag .ffl-meta {
  color: var(--ffl-text-muted);
  font-size: 0.85rem;
}
/* Full column width with the picture's own proportions kept - same "fit, never
   crop" rule the image pipeline follows, so nothing gets cut off. */
.ffl-beitrag-eintrag img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 8px;
  border-radius: var(--ffl-radius);
}
.ffl-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  background: var(--ffl-red);
}

/* ---------------------------------------------------------------------- */
/* Einsaetze list: filter checkboxes + month-grouped table                */
/* ---------------------------------------------------------------------- */
.ffl-einsatz-filter {
  display: flex;
  gap: 12px;
}
.ffl-einsatz-filter-group {
  position: relative;
  flex: 1 1 0;
}
.ffl-einsatz-filter-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 9px 14px;
  border: 1px solid var(--ffl-border);
  border-radius: var(--ffl-radius);
  background: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.ffl-einsatz-filter-toggle:hover {
  background: var(--ffl-bg);
}
.ffl-einsatz-filter-toggle[aria-expanded='true'] {
  border-color: var(--ffl-red);
  color: var(--ffl-red);
}
/* Floating dropdown panel instead of an always-open inline list, so opening
   one filter doesn't shift the other filter buttons or the table below. Same
   width as the toggle button (its positioned parent, .ffl-einsatz-filter-group,
   is already 100% wide) rather than sizing to its own content. */
.ffl-einsatz-filter-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  max-height: 260px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--ffl-border);
  border-radius: var(--ffl-radius);
  box-shadow: var(--ffl-shadow);
  padding: 8px 12px;
  z-index: 20;
}
.ffl-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: 0.85rem;
  cursor: pointer;
}

/* Month separator row - a full-width <td colSpan> inside the same table/tbody
   as the data rows (not a heading above a separate table), same as the old
   site's own month rows. Background reuses .ffl-table th's own grey so it
   reads as "part of the current design" rather than a new color. */
/* Scoped under .ffl-table (not just .ffl-einsatz-monat alone) so text-align
   wins the specificity fight against the generic .ffl-table td rule (2
   classes beats its 1 class + 1 element) - same pattern as the mobile nav
   brand fix earlier. */
.ffl-table .ffl-einsatz-monat {
  text-align: center;
  background: var(--ffl-bg);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ffl-red-accent);
}
.ffl-einsatz-thumb {
  width: 60px;
  height: 45px;
  object-fit: cover;
  border-radius: var(--ffl-radius);
}
.ffl-table-scroll {
  overflow-x: auto;
}
/* Scoped to this table only (not the shared .ffl-table used elsewhere, e.g.
   admin lists) - every column centered, including the Einsatzart/Ort cell's
   badge and Ort line, the description link, and the photo thumbnail. The
   .ffl-table.ffl-einsatz-table combo (both classes on the same element,
   matching the table's actual className) is deliberate: .ffl-einsatz-table
   th/td alone ties the generic .ffl-table th/td rule's specificity (1 class
   + 1 element each), and that generic rule happens to come later in this
   file, so it would otherwise win on source order. Two classes + one
   element reliably outranks it regardless of order. */
.ffl-table.ffl-einsatz-table th,
.ffl-table.ffl-einsatz-table td {
  text-align: center;
}
/* The row's Einsatzart color now lives on the <td> itself (set inline per
   row in EinsaetzeListPage.jsx), not on a nested .ffl-badge child - a plain
   table-cell background trivially covers its own full box, no height/width
   trickery needed (earlier attempts fighting percentage-height and
   position: absolute on a child were solving the wrong problem). Since the
   badge is no longer positioned/sized to fill anything, it stays normal
   in-flow text and white-space: nowrap on the cell is what keeps the whole
   Einsatzart title on one line - the table's auto column width then grows
   to fit it, same as it would for any other unwrapped cell content. */
.ffl-table .ffl-einsatz-einsatzart-cell {
  white-space: nowrap;
}
.ffl-table .ffl-einsatz-nr-cell {
  font-weight: 700;
  color: #fff;
}
/* The whole data row now navigates to the detail view (not just the
   Beschreibung link), so it needs a pointer cursor - scoped to
   .ffl-einsatz-row specifically so the non-clickable month separator row
   (which has no such class) is unaffected. */
.ffl-table.ffl-einsatz-table tr.ffl-einsatz-row {
  cursor: pointer;
}
.ffl-table .ffl-badge {
  background: none;
  border-radius: 0;
}
/* Der Ort hat eine eigene Spalte (vorher stand er unter der Einsatzart in
   deren eingefärbter Zelle). */
.ffl-table .ffl-einsatz-ort-cell {
  font-size: 0.85rem;
}

@media (max-width: 860px) {
  .ffl-einsatz-filter {
    flex-direction: column;
  }
  .ffl-einsatz-col-hide-mobile {
    display: none;
  }
  /* On a phone only Nr., Einsatzart and Ort remain, so the nowrap that keeps the
     title on one line on desktop would just force the table wider than the screen. */
  .ffl-table .ffl-einsatz-einsatzart-cell {
    white-space: normal;
  }
}

.ffl-mitglieder-hero {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: var(--ffl-radius);
  margin-bottom: 20px;
}
/* 2-column grid (3 tiles left, 3 tiles right), matching the old site's own
   Mitglieder overview layout - collapses to a single column on mobile. */
.ffl-mitglieder-kacheln {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.ffl-mitglieder-kachel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90px;
  padding: 16px;
  border-radius: var(--ffl-radius);
  box-shadow: var(--ffl-shadow);
  background: var(--ffl-red);
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  text-align: center;
  text-decoration: none;
  transition: background 0.15s;
}
.ffl-mitglieder-kachel:hover {
  background: var(--ffl-red-dark);
}
/* Kondolenzliste sits centered below the grid as its own, narrower grey tile
   (same width as one grid column), not stretched full-width - same as the
   old site's own centered single box under the two columns. */
.ffl-mitglieder-kachel-grau {
  background: #6c757d;
  margin: 14px auto 0;
  max-width: calc(50% - 7px);
}
.ffl-mitglieder-kachel-grau:hover {
  background: #565e64;
}
@media (max-width: 600px) {
  .ffl-mitglieder-kacheln {
    grid-template-columns: 1fr;
  }
  .ffl-mitglieder-kachel-grau {
    max-width: none;
  }
}

/* One member per card, on the five function pages and per rank on "Mitglieder
   nach Dienstgrad". auto-fill, not auto-fit: auto-fit collapses the unused
   tracks, which would stretch a lone HBI across the whole page while the 43
   HFM below him sit in normal columns. */
.ffl-mitglieder-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}
.ffl-mitglied-karte {
  margin: 0;
  text-align: center;
}
.ffl-mitglied-karte img {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 12px;
}
.ffl-mitglied-karte h2 {
  font-size: 1.1rem;
  margin: 0 0 4px;
}
.ffl-mitglied-funktion {
  font-weight: 700;
  margin-bottom: 6px;
}
/* A mail address is one long unbreakable word; without this it would either
   overflow the card or force every column wider than the grid intends. */
.ffl-mitglied-karte a {
  overflow-wrap: anywhere;
}
/* One rank block on "Mitglieder nach Dienstgrad". */
.ffl-dienstgrad-gruppe {
  margin-bottom: 24px;
}
.ffl-dienstgrad-gruppe h3 {
  color: var(--ffl-red-accent);
  margin: 0 0 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ffl-border);
}
.ffl-dienstgrad-name {
  margin-left: 8px;
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--ffl-text-muted);
}

/* Year selector above the Uebungen/Veranstaltungen tile grid. */
.ffl-jahr-auswahl {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 18px;
}
.ffl-jahr-btn {
  padding: 6px 14px;
  border: 1px solid var(--ffl-border);
  border-radius: var(--ffl-radius);
  background: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--ffl-text);
}
.ffl-jahr-btn:hover {
  background: var(--ffl-bg);
  border-color: var(--ffl-red);
}
.ffl-jahr-btn.aktiv {
  background: var(--ffl-red);
  border-color: var(--ffl-red);
  color: #fff;
}

/* Tile grid: category image with the caption underneath, like the old site. */
.ffl-kachelraster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.ffl-kachel {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ffl-border);
  border-radius: var(--ffl-radius);
  overflow: hidden;
  background: #fff;
  text-decoration: none;
  color: var(--ffl-text);
  box-shadow: var(--ffl-shadow);
  transition: box-shadow 0.15s, transform 0.15s;
}
.ffl-kachel:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
  transform: translateY(-2px);
}
.ffl-kachel-bild {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ffl-bg);
}
.ffl-kachel-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ffl-kachel-platzhalter {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ffl-border);
  font-size: 2rem;
}
.ffl-kachel-text {
  padding: 10px 12px;
}
.ffl-kachel-datum {
  font-size: 0.8rem;
  color: var(--ffl-text-muted);
}
.ffl-kachel-titel {
  font-weight: 700;
  font-size: 0.95rem;
  margin-top: 2px;
}
/* ---------------------------------------------------------------------- */
/* Ausruestung: breadcrumb + the photo/text sections on a content page     */
/* ---------------------------------------------------------------------- */
.ffl-brotkrumen {
  font-size: 0.85rem;
  color: var(--ffl-text-muted);
  margin-bottom: 6px;
}
.ffl-brotkrumen-trenner {
  margin: 0 6px;
}
.ffl-ausruestung-abschnitt {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 20px 0;
  border-bottom: 1px solid var(--ffl-border);
}
.ffl-ausruestung-abschnitt:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}
/* Photo left, then right, then left again - the alternation the old page built
   by hand with floats, here without tying it to a fixed number of sections. */
.ffl-ausruestung-abschnitt:nth-of-type(even) {
  flex-direction: row-reverse;
}
.ffl-ausruestung-bild {
  flex: 0 0 320px;
}
.ffl-ausruestung-bild img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--ffl-radius);
}
/* min-width: 0 - a flex item refuses to shrink below its content otherwise, and
   a long equipment name would push the photo off the page. */
.ffl-ausruestung-text {
  flex: 1;
  min-width: 0;
}
.ffl-ausruestung-text h2 {
  margin: 0 0 8px;
  font-size: 1.1rem;
}
.ffl-ausruestung-text ul {
  margin: 8px 0 0;
  padding-left: 20px;
}
.ffl-ausruestung-text li {
  margin-bottom: 3px;
}
@media (max-width: 700px) {
  .ffl-ausruestung-abschnitt,
  .ffl-ausruestung-abschnitt:nth-of-type(even) {
    flex-direction: column;
    gap: 12px;
  }
  .ffl-ausruestung-bild {
    flex: none;
    width: 100%;
  }
}

/* On a phone the 220px minimum leaves exactly one tile per row, so a year with 20
   entries becomes a very long scroll - two narrower columns keep it browsable. */
@media (max-width: 600px) {
  .ffl-kachelraster {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .ffl-kachel-titel {
    font-size: 0.85rem;
  }
  .ffl-kachel-text {
    padding: 8px 10px;
  }
}

/* Migrated write-up of an Einsatz/Übung/Veranstaltung. The text is authored HTML
   (headings + paragraphs) from the old site, so it is styled here rather than in the
   markup - the red heading matches how the current site presents these reports. */
.ffl-bericht {
  margin-top: 18px;
  line-height: 1.6;
}
.ffl-bericht h1,
.ffl-bericht h2,
.ffl-bericht h3 {
  color: var(--ffl-red);
  margin: 18px 0 8px;
}
.ffl-bericht h1 {
  font-size: 1.5rem;
}
.ffl-bericht h2 {
  font-size: 1.3rem;
}
.ffl-bericht h3 {
  font-size: 1.1rem;
}
.ffl-bericht p {
  margin: 0 0 10px;
}
.ffl-bericht img {
  max-width: 100%;
  height: auto;
  border-radius: var(--ffl-radius);
}
.ffl-bericht a {
  color: var(--ffl-red);
}

.ffl-gallery-titel {
  margin: 24px 0 0;
  font-size: 1.15rem;
}
.ffl-gallery-anzahl {
  color: var(--ffl-text-muted);
  font-weight: 400;
}
.ffl-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
/* Each tile is a button (keyboard-reachable), styled to look like a plain image. */
.ffl-gallery-item {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: var(--ffl-radius);
  overflow: hidden;
  line-height: 0;
}
.ffl-gallery-item:focus-visible {
  outline: 3px solid var(--ffl-red);
  outline-offset: 2px;
}
.ffl-gallery img {
  width: 100%;
  border-radius: var(--ffl-radius);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.15s;
}
.ffl-gallery-item:hover img {
  transform: scale(1.05);
}

/* Lightbox: full-size photo over a dimmed page. */
.ffl-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.ffl-lightbox-figure {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.ffl-lightbox-figure img {
  max-width: 100%;
  /* Leaves room for the caption line below the photo. */
  max-height: calc(100vh - 110px);
  object-fit: contain;
  border-radius: var(--ffl-radius);
}
.ffl-lightbox-figure figcaption {
  color: #fff;
  font-size: 0.9rem;
  text-align: center;
  display: flex;
  gap: 12px;
  align-items: center;
}
.ffl-lightbox-zaehler {
  opacity: 0.7;
}
.ffl-lightbox-close,
.ffl-lightbox-nav {
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ffl-lightbox-close:hover,
.ffl-lightbox-nav:hover {
  background: var(--ffl-red);
}
.ffl-lightbox-close {
  top: 16px;
  right: 16px;
}
.ffl-lightbox-nav.prev {
  left: 16px;
}
.ffl-lightbox-nav.next {
  right: 16px;
}

/* ---------------------------------------------------------------------- */
/* Forms / buttons (shared public + admin)                                */
/* ---------------------------------------------------------------------- */
.ffl-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--ffl-radius);
  border: 1px solid var(--ffl-border);
  background: #fff;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}
.ffl-btn:hover {
  text-decoration: none;
}
.ffl-btn-primary {
  background: var(--ffl-red);
  border-color: var(--ffl-red);
  color: #fff;
}
.ffl-btn-primary:hover {
  background: var(--ffl-red-dark);
  border-color: var(--ffl-red-dark);
}
.ffl-btn-danger {
  color: var(--ffl-red-dark);
  border-color: var(--ffl-red-dark);
}
.ffl-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---------- Bild-Upload + Ausschnitt ---------- */
/* The file input is hidden rather than removed: it still does the work, the
   label around it just supplies the look. A disabled input can't be clicked,
   so .ffl-btn-disabled only has to mirror how a disabled button reads. */
.ffl-upload {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ffl-upload label {
  cursor: pointer;
}
.ffl-upload input[type='file'] {
  display: none;
}
.ffl-btn-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ffl-upload-datei {
  font-size: 0.85rem;
  color: var(--ffl-text-muted);
  overflow-wrap: anywhere;
}

.ffl-fokus {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.ffl-fokus-rahmen {
  overflow: hidden;
  border: 1px solid var(--ffl-border);
  background: var(--ffl-bg);
  /* none, or a touch drag scrolls the page instead of moving the picture */
  touch-action: none;
  cursor: grab;
}
.ffl-fokus-rahmen:active {
  cursor: grabbing;
}
.ffl-fokus-rund {
  border-radius: 50%;
}
.ffl-fokus-rahmen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
}
.ffl-fokus-hinweis {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--ffl-text-muted);
}

.ffl-field {
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ffl-field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ffl-text-muted);
}
.ffl-field input,
.ffl-field textarea,
.ffl-field select {
  padding: 8px 10px;
  border: 1px solid var(--ffl-border);
  border-radius: var(--ffl-radius);
  font-size: 0.95rem;
  font-family: inherit;
}
.ffl-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

/* ---------- Rich text editor (Seiten-Inhalt etc.) ---------- */
.ffl-richtext {
  border: 1px solid var(--ffl-border);
  border-radius: var(--ffl-radius);
  overflow: hidden;
}
.ffl-richtext-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  background: var(--ffl-bg);
  border-bottom: 1px solid var(--ffl-border);
}
.ffl-richtext-toolbar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--ffl-radius);
  color: var(--ffl-text);
  cursor: pointer;
}
.ffl-richtext-toolbar button:hover {
  background: #fff;
  border-color: var(--ffl-border);
}
.ffl-richtext-toolbar button.active {
  background: var(--ffl-red);
  border-color: var(--ffl-red);
  color: #fff;
}
.ffl-richtext-toolbar button.active:hover {
  background: var(--ffl-red-dark);
  border-color: var(--ffl-red-dark);
}
.ffl-richtext-toolbar-sep {
  width: 1px;
  height: 18px;
  margin: 0 4px;
  background: var(--ffl-border);
  flex-shrink: 0;
}
.ffl-richtext-heading-select {
  padding: 5px 8px;
  border: 1px solid var(--ffl-border);
  border-radius: var(--ffl-radius);
  font-size: 0.85rem;
  font-family: inherit;
  background: #fff;
}
.ffl-richtext-content {
  min-height: 200px;
  padding: 10px 12px;
  outline: none;
  font-weight: 400;
}
/* The editing area also carries .ffl-bericht, so the text looks while you type
   exactly like it will on the page - the two used to have their own heading
   rules and disagreed (h4/h5 were red here, black there). Only the outer margin
   is cancelled: inside the editor box the content starts at the top. */
.ffl-richtext-content.ffl-bericht {
  margin-top: 0;
}
.ffl-richtext-source {
  width: 100%;
  min-height: 200px;
  padding: 10px 12px;
  border: none;
  outline: none;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 0.85rem;
  resize: vertical;
}
/* Lists are deliberately left to the browser defaults here, the same as on the
   public pages - an override would indent them differently while typing. */
.ffl-form-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

/* ---------------------------------------------------------------------- */
/* Admin layout                                                           */
/* ---------------------------------------------------------------------- */
:root {
  --ffl-admin-sidebar-width: 250px;
  --ffl-admin-sidebar-collapsed-width: 64px;
  --ffl-admin-topbar-height: 60px;
}

.ffl-admin {
  display: flex;
  min-height: 100vh;
}

.ffl-admin-sidebar {
  width: var(--ffl-admin-sidebar-width);
  flex-shrink: 0;
  background: var(--ffl-dark-2);
  color: #eee;
  display: flex;
  flex-direction: column;
  transition: width 0.15s ease;
  overflow: hidden;
}

.ffl-admin-sidebar.collapsed {
  width: var(--ffl-admin-sidebar-collapsed-width);
}

.ffl-admin-sidebar-brand {
  height: var(--ffl-admin-topbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  background: var(--ffl-red-dark);
}

.ffl-admin-sidebar.collapsed .ffl-admin-sidebar-brand {
  justify-content: center;
  padding: 0;
}

.ffl-admin-sidebar-title {
  font-weight: 800;
  font-size: 1.05rem;
  color: #fff;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.ffl-admin-sidebar-toggle,
.ffl-admin-sidebar-icon-toggle {
  background: none;
  border: none;
  color: #fff;
  opacity: 0.85;
  cursor: pointer;
  font-size: 1.1rem;
  padding: 4px;
  flex-shrink: 0;
}

.ffl-admin-sidebar-icon-toggle {
  padding: 0;
}

.ffl-admin-sidebar-toggle:hover,
.ffl-admin-sidebar-icon-toggle:hover {
  opacity: 1;
}

.ffl-admin-sidebar-nav {
  display: flex;
  flex-direction: column;
  padding: 12px 0;
  overflow-y: auto;
}

.ffl-admin-sidebar-link {
  display: flex;
  align-items: center;
  padding: 12px 0;
  color: #eee;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  opacity: 0.85;
  border-left: 3px solid transparent;
  white-space: nowrap;
  overflow: hidden;
}

/* Fixed-width icon column (same width as the collapsed sidebar) so the icon
   never moves or resizes when toggling - only the label's opacity changes. */
.ffl-admin-sidebar-icon {
  font-size: 1.1rem;
  flex: 0 0 calc(var(--ffl-admin-sidebar-collapsed-width) - 3px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ffl-admin-sidebar-label {
  opacity: 1;
  transition: opacity 0.1s ease;
}

.ffl-admin-sidebar.collapsed .ffl-admin-sidebar-label {
  opacity: 0;
}

.ffl-admin-sidebar-link:hover {
  background: rgba(255, 255, 255, 0.08);
  opacity: 1;
  text-decoration: none;
}

.ffl-admin-sidebar-link.active {
  background: rgba(0, 0, 0, 0.2);
  border-left-color: var(--ffl-red);
  color: #fff;
  opacity: 1;
}

.ffl-admin-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ffl-admin-topbar {
  height: var(--ffl-admin-topbar-height);
  background: #fff;
  border-bottom: 1px solid var(--ffl-border);
  display: flex;
  align-items: center;
  padding: 0 24px;
  flex-shrink: 0;
}

.ffl-admin-topbar-spacer {
  flex: 1;
}

.ffl-admin-content {
  flex: 1;
  padding: 24px;
}

/* ---------- Admin user menu ---------- */

.ffl-admin-user-menu {
  position: relative;
}

.ffl-admin-user-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ffl-red);
  color: #fff;
  border: none;
  font-weight: 700;
  cursor: pointer;
}

.ffl-admin-user-dropdown {
  position: absolute;
  right: 0;
  top: 44px;
  background: #fff;
  border: 1px solid var(--ffl-border);
  border-radius: var(--ffl-radius);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  min-width: 200px;
  display: flex;
  flex-direction: column;
  z-index: 20;
}

.ffl-admin-user-dropdown-name {
  padding: 12px 16px;
  font-weight: 600;
  border-bottom: 1px solid #eee;
}

.ffl-admin-user-dropdown button {
  background: none;
  border: none;
  text-align: left;
  padding: 10px 16px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--ffl-text);
}

.ffl-admin-user-dropdown button:hover {
  background: var(--ffl-bg);
}

/* ---------- Page title / header row (list pages, mirrors FIMA's layout) ---------- */

.ffl-page-title {
  margin: 0 0 16px;
  font-size: 1.4rem;
  color: var(--ffl-red-accent);
}

/* Title + action button on one line, for admin pages that aren't a searchable
   table (e.g. Slideshow) - kept separate from .ffl-admin-topbar, which is the
   fixed top header bar, not a per-page content row. */
.ffl-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

/* ---------- List page toolbar (New button + search), mirrors FIMA's .fima-toolbar ---------- */

.ffl-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--ffl-border);
}

.ffl-search {
  flex: 0 0 280px;
  padding: 8px 12px;
  border: 1px solid var(--ffl-border);
  border-radius: var(--ffl-radius);
  font-size: 0.9rem;
  font-family: inherit;
}

.ffl-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}
.ffl-table th,
.ffl-table td {
  text-align: left;
  padding: 10px 16px;
  border-bottom: 1px solid var(--ffl-border);
  font-size: 0.9rem;
}
.ffl-table th {
  background: var(--ffl-bg);
  color: var(--ffl-text-muted);
  font-weight: 700;
}

.ffl-table-actions-col {
  width: 48px;
  text-align: center !important;
}

.ffl-table-empty {
  text-align: center !important;
  color: var(--ffl-text-muted);
  padding: 24px !important;
  font-style: italic;
}

.ffl-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--ffl-border);
  border-radius: var(--ffl-radius);
  width: 32px;
  height: 32px;
  cursor: pointer;
  color: var(--ffl-red);
  text-decoration: none;
}
.ffl-edit-btn:hover {
  background: var(--ffl-bg);
  text-decoration: none;
}

.ffl-login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--ffl-dark-2), var(--ffl-red-dark));
}
.ffl-login-card {
  background: #fff;
  padding: 32px;
  border-radius: var(--ffl-radius);
  width: 320px;
  box-shadow: var(--ffl-shadow);
}

/* 200px, not 120: the tile carries three text buttons side by side, which were
   unreadably cramped at the old width. */
.ffl-thumb-upload {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin: 10px 0;
}
.ffl-thumb {
  position: relative;
  border-radius: var(--ffl-radius);
  overflow: hidden;
  /* The transparent border is the same width as the Hauptbild one, so marking a
     picture never nudges the grid. */
  border: 4px solid transparent;
}
.ffl-thumb.hauptbild {
  border-color: var(--ffl-red);
  box-shadow: 0 0 0 2px var(--ffl-red-dark);
}
.ffl-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.ffl-thumb-actions {
  position: absolute;
  inset: auto 0 0 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  gap: 2px;
  padding: 5px 4px;
}
.ffl-thumb-actions button {
  background: none;
  border: none;
  border-radius: 3px;
  padding: 3px 6px;
  color: #fff;
  font-size: 0.78rem;
  line-height: 1.2;
  cursor: pointer;
}
.ffl-thumb-actions button:hover {
  background: rgba(255, 255, 255, 0.2);
}
/* Single year dropdown above the admin Termin list. */
.ffl-jahr-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
}
.ffl-jahr-filter select {
  padding: 6px 10px;
  border: 1px solid var(--ffl-border);
  border-radius: var(--ffl-radius);
  font-family: inherit;
  font-size: 0.9rem;
  background: #fff;
}

/* Slideshow admin: preview the slides in the format they will actually run in,
   so the crop shown here is the crop the visitor sees. */
.ffl-slideshow-kacheln .ffl-thumb {
  background: #fff;
}
/* Only the picture is the drag handle - see SlideshowAdminPage.jsx. */
.ffl-slideshow-griff {
  cursor: grab;
}
.ffl-slideshow-griff:active {
  cursor: grabbing;
}
.ffl-slideshow-kacheln .ffl-thumb img {
  aspect-ratio: 16 / 9;
}
.ffl-slideshow-felder {
  display: flex;
  flex-direction: column;
  /* Room for the actions bar sitting on top of the tile's lower edge. */
  padding: 4px 4px 32px;
  gap: 3px;
}
.ffl-slideshow-felder input {
  width: 100%;
  border: 1px solid var(--ffl-border);
  border-radius: 3px;
  padding: 3px 5px;
  font-size: 0.8rem;
}

.ffl-empty {
  color: var(--ffl-text-muted);
  font-style: italic;
}

/* ---------------------------------------------------------------------- */
/* Server-rendered public site: adjustments to the shared styles           */
/* ---------------------------------------------------------------------- */
/* The filter dropdowns are <details>/<summary> now instead of a button plus
   JavaScript state - the browser does the opening and closing itself, and the
   filter keeps working with scripting switched off. Only the default marker
   triangle has to go, since .ffl-einsatz-filter-toggle draws its own chevron. */
summary.ffl-einsatz-filter-toggle {
  list-style: none;
}
summary.ffl-einsatz-filter-toggle::-webkit-details-marker {
  display: none;
}
details[open] > summary.ffl-einsatz-filter-toggle {
  border-color: var(--ffl-red);
  color: var(--ffl-red);
}
details[open] > summary.ffl-einsatz-filter-toggle .bi-chevron-down {
  transform: rotate(180deg);
}
/* Die ganze Einsatzzeile führt zur Detailseite: jede Zelle trägt einen Link,
   der ihre volle Fläche ausfüllt. Das Polster wandert deshalb von der Zelle
   auf den Link - sonst bliebe ein Rand ringsum, der nicht klickbar ist.
   height: 1px auf der Zelle ist der bekannte Kniff, damit height: 100% des
   Links greift: ohne ihn wäre der Link in einer niedrigeren Zelle nur so hoch
   wie sein Inhalt, und ein Klick darunter ginge ins Leere. */
.ffl-table.ffl-einsatz-table tr.ffl-einsatz-row > td {
  padding: 0;
  height: 1px;
}
.ffl-einsatz-zelle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 100%;
  padding: 10px 16px;
  box-sizing: border-box;
  color: inherit;
  text-decoration: none;
}
.ffl-einsatz-zelle:hover {
  text-decoration: none;
}
/* Die Beschreibung sieht weiter aus wie ein Link - sie war es vorher allein. */
.ffl-einsatz-titel {
  color: var(--ffl-red);
}
/* Rückmeldung beim Überfahren: die Zeile hellt sich auf. Zellen mit eigener
   Einsatzart-Farbe (style-Attribut) behalten ihre Farbe. */
.ffl-einsatz-row:hover > td:not([style]) {
  background: var(--ffl-bg);
}
.ffl-einsatz-row:hover .ffl-einsatz-titel {
  text-decoration: underline;
}
/* Widget images: the width/height attributes reserve the box before the file
   arrives; height:auto keeps the real ratio once it has. */
.ffl-sidebar-box img {
  width: 100%;
  height: auto;
}
/* The inline thumbnail sits under the real photo (see start.php). At 32px scaled
   to full width the browser's own interpolation does the blurring - no filter
   needed, and none is wanted: a filter would blur the sharp photo on top too. */
.ffl-slideshow-slide {
  background-size: cover;
  background-position: center;
}