@font-face {
font-family: 'FormataBQ MediumCond';
src: url(//feuerwehr-dettingen.de/wp-content/plugins/firebrand-watermark-tool/assets/fonts/FormataBQ-MediumCond.ttf) format('truetype');
font-style: normal;
font-weight: 400;
font-display: swap;
}
.ffms-slider {
--ffms-fit: contain;
--ffms-ratio: 16/9;
position: relative;
width: 100%;
overflow: hidden;
margin: 1.25rem auto;
border-radius: 14px;
background: #111111;
box-shadow: 0 10px 28px rgba(0, 0, 0, .14);
aspect-ratio: var(--ffms-ratio);
}
.ffms-slider.ffms-ratio-auto {
aspect-ratio: auto;
min-height: 240px;
}
.ffms-track {
position: relative;
width: 100%;
height: 100%;
}
.ffms-slide {
position: absolute;
inset: 0;
overflow: hidden;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .45s ease;
}
.ffms-slide.is-active {
z-index: 2;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.ffms-blur-bg {
position: absolute;
inset: -8%;
z-index: 0;
display: block;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
filter: blur(var(--ffms-blur-amount, 24px));
transform: scale(1.12);
opacity: .95;
}
.ffms-slide.has-blur-bg::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background: rgba(0, 0, 0, .16);
}
.ffms-slide.has-solid-bg {
background: var(--ffms-solid-bg-color, #111111);
}
.ffms-slide.has-blur-bg .ffms-media {
position: relative;
z-index: 2;
}
.ffms-blur-video {
position: absolute;
inset: -8%;
z-index: 0;
width: 116%;
height: 116%;
object-fit: cover;
filter: blur(var(--ffms-blur-amount, 24px));
transform: scale(1.12);
opacity: .95;
pointer-events: none;
}
.ffms-media {
display: block;
width: 100%;
height: 100%;
margin: 0;
object-fit: var(--ffms-fit);
background: transparent;
}
.ffms-caption {
position: absolute;
z-index: 6;
max-width: min(72%, 760px);
padding: 14px 16px;
border-radius: 10px;
background: rgba(0, 0, 0, .52);
color: #fff;
pointer-events: none;
box-sizing: border-box;
font-family: 'FormataBQ MediumCond', Arial, Helvetica, sans-serif;
text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}
.ffms-caption--top-left {
top: 18px;
left: 18px;
right: auto;
bottom: auto;
text-align: left;
}
.ffms-caption--top-center {
top: 18px;
left: 50%;
bottom: auto;
transform: translateX(-50%);
text-align: center;
}
.ffms-caption--top-right {
top: 18px;
right: 18px;
left: auto;
bottom: auto;
text-align: right;
}
.ffms-caption--bottom-left {
left: 18px;
right: auto;
bottom: 18px;
text-align: left;
}
.ffms-caption--bottom-center {
left: 50%;
bottom: 18px;
transform: translateX(-50%);
text-align: center;
}
.ffms-caption--bottom-right {
right: 18px;
left: auto;
bottom: 18px;
text-align: right;
}
.ffms-caption-title {
font-size: clamp(20px, 2.4vw, 34px);
line-height: 1.05;
font-weight: 400;
}
.ffms-caption-text {
margin-top: 6px;
font-size: clamp(13px, 1.35vw, 19px);
line-height: 1.3;
font-family: Arial, Helvetica, sans-serif;
}
.ffms-ratio-auto .ffms-track,
.ffms-ratio-auto .ffms-slide {
min-height: 240px;
}
.ffms-arrow {
position: absolute;
top: 50%;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
padding: 0;
border: 0;
border-radius: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, .58);
color: #fff;
font: inherit;
font-size: 34px;
line-height: 1;
cursor: pointer;
}
.ffms-arrow:hover,
.ffms-arrow:focus-visible {
background: rgba(0, 0, 0, .82);
}
.ffms-prev {
left: 14px;
}
.ffms-next {
right: 14px;
}
.ffms-dots {
position: absolute;
left: 50%;
bottom: 14px;
z-index: 10;
display: flex;
gap: 8px;
transform: translateX(-50%);
}
.ffms-dot {
width: 11px;
height: 11px;
padding: 0;
border: 2px solid #fff;
border-radius: 50%;
background: rgba(255, 255, 255, .28);
cursor: pointer;
}
.ffms-dot.is-active {
background: #fff;
}
@media (max-width: 700px) {
.ffms-slider {
border-radius: 10px;
}
.ffms-arrow {
width: 40px;
height: 40px;
font-size: 30px;
}
.ffms-prev {
left: 8px;
}
.ffms-next {
right: 8px;
}
.ffms-caption {
max-width: calc(100% - 24px);
padding: 10px 12px;
border-radius: 8px;
}
.ffms-caption--top-left,
.ffms-caption--bottom-left {
left: 12px;
right: auto;
transform: none;
text-align: left;
}
.ffms-caption--top-center,
.ffms-caption--bottom-center {
left: 50%;
right: auto;
transform: translateX(-50%);
text-align: center;
}
.ffms-caption--top-right,
.ffms-caption--bottom-right {
right: 12px;
left: auto;
transform: none;
text-align: right;
}
.ffms-caption--top-left,
.ffms-caption--top-center,
.ffms-caption--top-right {
top: 12px;
bottom: auto;
}
.ffms-caption--bottom-left,
.ffms-caption--bottom-center,
.ffms-caption--bottom-right {
top: auto;
bottom: 12px;
}
}