) */
.blog-items.ff-aktuelles-page > .blog-item figure.item-image.left,
.blog-items.ff-aktuelles-page > .blog-item figure.item-image{
float: none !important;
margin: 0 !important;
width: 100% !important;
}
/* Bild: nicht verzerren, nicht riesig */
.blog-items.ff-aktuelles-page > .blog-item figure.item-image img{
width: 100% !important;
height: auto !important;
max-height: 260px !important; /* <- hier stellst du die Bildhöhe im
Listing ein */
object-fit: contain !important; /* unbeschnitten */
display: block !important;
border-radius: 12px !important;
background: #fff !important;
}
/* Mobile: untereinander */
@media (max-width: 900px){
.blog-items.ff-aktuelles-page > .blog-item{
grid-template-columns: 1fr !important;
}
.blog-items.ff-aktuelles-page > .blog-item figure.item-image img{
max-height: 360px !important;
}
}
/* =========================================================
AKTUELLES – VOLLE BREITE, BILD LINKS (BREIT), TEXT RECHTS
========================================================= */
/* gesamte Blog-Seite volle Breite */
.com-content-category-blog.blog,
.com-content-category-blog__items.blog-items{
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
/* EIN Beitrag pro Zeile */
.blog-items{
display: grid !important;
grid-template-columns: 1fr !important;
gap: 24px !important;
}
/* Blog-Karte */
.blog-item{
display: grid !important;
grid-template-columns: 55% 45% !important; /* BILD BREIT */
gap: 24px !important;
align-items: start !important;
background: #fff;
border-radius: 16px;
box-shadow: 0 6px 18px rgba(0,0,0,.08);
padding: 20px;
}
/* FLOAT von Joomla endgültig killen */
.blog-item figure.item-image,
.blog-item figure.left{
float: none !important;
margin: 0 !important;
width: 100% !important;
}
/* BREITES Bild – NICHT verzerrt */
.blog-item figure img{
width: 100% !important;
height: auto !important;
max-height: 320px; /* Panorama-Höhe */
object-fit: contain; /* KEIN Abschneiden */
display: block;
border-radius: 14px;
background: #fff;
}
/* Text sauber ausrichten */
.blog-item .item-content{
display: flex;
flex-direction: column;
justify-content: center;
}
/* Weiterlesen unten */
.blog-item .readmore{
margin-top: 16px;
}
/* =========================
MOBILE: untereinander
========================= */
@media (max-width: 900px){
.blog-item{
grid-template-columns: 1fr !important;
}
.blog-item figure img{
max-height: 420px;
}
}
/* =========================================
AKTUELLES – Weiterlesen Button rot
========================================= */
.blog-items.ff-aktuelles-page .readmore a,
.blog-items.ff-aktuelles-page .btn-secondary{
background: var(--rot) !important;
color: #fff !important;
border: none !important;
border-radius: 999px;
font-weight: 900;
padding: 10px 18px;
}
.blog-items.ff-aktuelles-page .readmore a:hover{
background: var(--rot2) !important;
}
/* =========================================
AKTUELLES – Einleitungsbilder einheitlich
========================================= */
.blog-items.ff-aktuelles-page > .blog-item figure.item-image img{
width: 100% !important;
height: 240px !important; /* EINHEITLICHE HÖHE */
object-fit: contain !important; /* kein Abschneiden */
background: #fff;
display: block;
border-radius: 12px;
}
@media (max-width: 900px){
.blog-items.ff-aktuelles-page > .blog-item figure.item-image img{
height: auto !important;
max-height: 320px !important;
}
}
/* =========================================================
AKTUELLES – EINZELBEITRAG (nach "Weiterlesen")
Fix: Bild immer mittig + auf Mobile sichtbar
========================================================= */
/* Bild-Wrapper sauber machen (Joomla nutzt oft figure/div.item-image +
left/right) */
.com-content-article .item-image,
.com-content-article figure.item-image,
.com-content-article .item-image.left,
.com-content-article .item-image.right,
.com-content-article figure.item-image.left,
.com-content-article figure.item-image.right{
float: none !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 0 16px 0 !important;
text-align: center !important;
}
/* Bild selbst: zentriert, nie verzerrt, immer sichtbar */
.com-content-article .item-image img,
.com-content-article figure.item-image img{
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: auto !important;
max-width: 100% !important;
height: auto !important;
margin: 0 auto !important; /* mittig */
object-fit: contain !important; /* keine Verzerrung */
}
/* Optional: auf großen Screens eine maximale Höhe, damits nicht
riesig wird */
@media (min-width: 901px){
.com-content-article .item-image img,
.com-content-article figure.item-image img{
max-height: 520px !important;
}
}
/* Mobile: extra Sicherheit, falls irgendwo etwas "versteckt" wird */
@media (max-width: 900px){
.com-content-article .item-image,
.com-content-article figure.item-image{
overflow: visible !important;
}
.com-content-article .item-image img,
.com-content-article figure.item-image img{
max-height: 360px !important; /* optional, kann auch weg */
}
}
/* =========================================
FIX: Einzelbeitrag – Bild auf Mobile nicht rechts raus
========================================= */
@media (max-width: 900px){
/* Wrapper darf NICHT seitlich versetzen */
.com-content-article .item-image,
.com-content-article figure.item-image{
float: none !important;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
left: auto !important;
right: auto !important;
transform: none !important;
position: relative !important;
text-align: center !important;
}
/* Bild IMMER innerhalb des Containers halten */
.com-content-article .item-image img,
.com-content-article figure.item-image img{
display: block !important;
float: none !important;
width: 100% !important; /* <- wichtig: nicht "auto" */
max-width: 100% !important;
height: auto !important;
margin: 0 auto !important;
object-fit: contain !important;
}
}
/* MOBILE FIX: Content-Bilder niemals aus dem Viewport schieben */
@media (max-width: 900px){
/* alle möglichen Float-/Align-Reste killen */
.com-content-article img,
.com-content-article figure,
.com-content-article p img{
float: none !important;
clear: both !important;
}
/* Bild wirklich auf Viewport-Breite begrenzen und mittig */
.com-content-article img{
display: block !important;
width: 100% !important; /* <- wichtig */
max-width: calc(100vw - 32px) !important; /* <- verhindert rechts
raus
*/
height: auto !important;
margin: 16px auto !important;
object-fit: contain !important;
object-position: center !important;
}
/* Wrapper/Absatz darf das Bild nicht verschieben */
.com-content-article p,
.com-content-article figure{
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
}
/* =========================================
BEITRAGSSEITE – Bild volle Breite (DESKTOP)
========================================= */
@media (min-width: 901px){
/* Beitragsbild über gesamte Content-Breite */
.com-content-article img{
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin: 24px auto !important;
object-fit: contain !important;
}
/* Float aus TinyMCE sicher entfernen */
.com-content-article img.float-start,
.com-content-article img.float-end{
float: none !important;
}
}
/* =========================================
BEITRAGSSEITE – großes Abschlussbild (Desktop)
========================================= */
@media (min-width: 901px){
.com-content-article img{
display: block !important;
width: 100% !important;
max-width: 100% !important;
/* HIER kommt die Größe */
min-height: 70vh; /* füllt den unteren Bildschirm */
max-height: 90vh;
object-fit: contain !important; /* nichts abschneiden */
margin: 40px auto 0 !important;
}
/* TinyMCE-Floats neutralisieren */
.com-content-article img.float-start,
.com-content-article img.float-end{
float: none !important;
}
}
/* =========================================
Artikelbild: groß, unten, volle Breite (Desktop)
+ Mobile: nie rechts abgeschnitten
========================================= */
.com-content-article img.ff-article-bottom-image{
display:block;
width:100%;
max-width:100%;
height:auto;
margin: 18px 0 0;
border-radius: 14px;
}
/* Desktop: soll unten
bildschirmfüllend
wirken */
@media (min-width: 901px){
.com-content-article img.ff-article-bottom-image{
height: min(520px, 60vh); /* füllt unten sichtbar den Screen */
object-fit: cover; /* groß &
füllend
(kann minimal beschneiden) */
object-position: center;
}
}
/* Mobile: niemals abschneiden/rechts raus */
@media (max-width: 900px){
.com-content-article img.ff-article-bottom-image{
float:none !important;
margin: 14px auto 0 !important;
height:auto !important;
object-fit: contain !important; /* kein Abschneiden */
object-position:center !important;
}
/* verhindert seitliches Ãœberlaufen durch alte Floats/Margins */
.com-content-article p{ overflow:hidden; }
}
/* HERO muss Referenz sein */
.ff-hero{ position: relative; }
/* LF exakt positionierbar */
.ff-hero-vehicle-lf{
position:absolute;
z-index:35;
/* HIER kommen die EXAKTEN Werte rein */
left: 72.6%;
top: 24.2%;
width: 47.6%;
transform: translate(-50%, 0); /* zum feinjustieren */
background: none !important;
box-shadow: none !important;
display:block;
}
.ff-hero-vehicle-lf img{
width:100%;
height:auto;
display:block;
background:transparent;
}
.ff-hero-overlay{
position:absolute;
inset:0;
background: linear-gradient(
90deg,
rgba(0,0,0,.12),
rgba(0,0,0,.04)
);
}
.ff-hero-vehicle{
position: absolute;
bottom: 0;
right: 120px;
z-index: 30;
transition:
filter 0.22s ease,
opacity 0.22s ease;
}
/* Hover: kräftiger, aber ohne Glow & ohne Bewegung */
.ff-hero-vehicle:hover{
filter:
contrast(1.18)
saturate(1.18)
brightness(1.05)
drop-shadow(0 -8px 14px rgba(0,0,0,.35)); /* nur Tiefe nach oben */
}
.ff-hero-vehicle-hit{
position:absolute;
top:0;
left:0;
right:0;
/* HIER der entscheidende Fix */
bottom:56px; /* Höhe des roten Balkens */
z-index:5;
pointer-events:auto;
}
/* ===== START: HITBOX-BLOCKER (Welcome-Bar liegt über dem Fahrzeug)
===== */
/* Welcome-Bar MUSS über dem Fahrzeug liegen */
.ff-welcome-bar{
position: relative;
z-index: 5000;
}
/* Das Fahrzeug liegt darunter (bleibt sichtbar, aber Balken blockt
Klicks) */
.ff-hero-vehicle{
position: absolute;
z-index: 3000; /* unter Welcome-Bar */
}
/* Optional: damit es NIE den Balken "überklickt" */
.ff-welcome-bar,
.ff-welcome-bar *{
pointer-events: auto;
}
/* (Wichtig) Dein Fahrzeug-Link ist im das macht extra Abstand.
Entfernt den Layout-Offset, ohne irgendwas zu skalieren. */
p:has(> a.ff-hero-vehicle){
margin: 0 !important;
padding: 0 !important;
}
/* ===== END: HITBOX-BLOCKER ===== */
/* ===== HERO als "Schnittkante": nichts darf in Widgets/Main klickbar
reinragen ===== */
.ff-hero{
position: relative;
overflow: visible; /* <- schneidet LF/Hitbox sauber am Hero-Ende ab */
}
/* Welcome-Bar liegt über dem LF (blockt Klicks im Balkenbereich) */
.ff-welcome-bar{
position: relative;
z-index: 4000;
}
/* Wappen MUSS über dem roten Balken bleiben */
.ff-hero-badge{
position: absolute;
z-index: 6000; /* <- über Welcome-Bar */
pointer-events: auto; /* wenn du es hoverbar/klickbar willst */
}
/* Fahrzeug unter dem Balken, aber über Hero-Hintergrund */
.ff-hero-vehicle{
position: absolute;
z-index: 3000; /* <- unter Welcome-Bar, unter Wappen */
display: block;
}
/* LF Bild sauber */
.ff-hero-vehicle img{
width: 100%;
height: auto;
display: block;
}
/* Falls irgendwo noch ein Wrapper-Abstand existiert */
.ff-hero-vehicle-wrap{
position: absolute;
inset: 0;
overflow: hidden; /* NUR hier begrenzen */
pointer-events: none;
}
.ff-hero-vehicle-wrap a{
pointer-events: auto;
}
/* =========================================
STARTSEITE: LF-Ausschnitt auf Mobile ausblenden
========================================= */
@media (max-width: 900px){
.ff-hero-vehicle-wrap,
.ff-hero-vehicle-lf{
display: none !important;
}
}
/* =========================================
ÜBER-UNS KACHELN – Text IMMER schwarz
========================================= */
/* Die Kachel selbst ist ein Link Textfarbe festsetzen */
.ff-about-tiles .ff-about-tile{
color: #000 !important;
text-decoration: none !important;
font-weight: 900;
}
/* Hover & Focus: bleibt schwarz */
.ff-about-tiles .ff-about-tile:hover,
.ff-about-tiles .ff-about-tile:focus,
.ff-about-tiles .ff-about-tile:visited{
color: #000 !important;
text-decoration: none !important;
}
/* Sicherheit: auch für evtl. eingebettete Elemente */
.ff-about-tiles .ff-about-tile *{
color: #000 !important;
}
/* =========================================
ÜBER-UNS KACHELN – Text mittig & größer
========================================= */
.ff-about-tiles .ff-about-tile{
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center; /* horizontal mittig */
text-align: center; /* Text mittig */
font-size: 1.15rem; /* größerer Text */
font-weight: 900;
line-height: 1.25;
}
/* Abstand zwischen Bild und Text */
.ff-about-tiles .ff-about-tile img{
margin-bottom: 12px;
}
/* Mobile: Text noch etwas größer */
@media (max-width: 900px){
.ff-about-tiles .ff-about-tile{
font-size: 1.25rem;
}
}
/* =========================================
TECHNIK – Kachel-Übersicht (Editor-HTML)
========================================= */
.ff-tech-grid{
display:grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap:18px;
margin: 8px 0 22px;
}
.ff-tech-card{
display:block;
text-decoration:none;
background: var(--card);
border-radius: 16px;
box-shadow: var(--shadow);
overflow:hidden;
transition: transform .18s ease, box-shadow .18s ease;
color: var(--text);
}
.ff-tech-card:hover{
transform: translateY(-4px);
box-shadow: 0 14px 32px rgba(0,0,0,.18);
}
.ff-tech-img img{
width:100%;
height:220px; /* einheitliche Höhe */
object-fit: cover; /* sauber, ohne Verzerrung */
display:block;
}
.ff-tech-body{
padding:14px 14px 16px;
}
.ff-tech-body h3{
margin:0 0 6px 0;
font-weight: 900;
color:#000;
}
.ff-tech-body p{
margin:0 0 12px 0;
color: var(--muted);
}
.ff-tech-cta{
display:inline-block;
font-weight: 900;
color: var(--rot);
}
@media (max-width: 900px){
.ff-tech-grid{
grid-template-columns: 1fr;
}
.ff-tech-img img{
height: 240px;
}
}
/* HERO als echtes Bild (stabil skalierbar) */
.ff-hero{
position: relative;
width: 100%;
height: clamp(320px, 45vw, 520px);
overflow: hidden;
}
/* ersetzt background-image */
.ff-hero .ff-hero-bg{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover; /* exakt wie background-size:cover */
object-position: center; /* ggf. später anpassen */
display: block;
filter: brightness(1.18) contrast(1.02); /* falls du das brauchst */
}
/* Overlay hängt am Hero-Koordinatensystem */
.ff-hero-vehicle-lf{
position: absolute;
z-index: 3000;
/* DEINE Werte – bleiben jetzt auf allen Geräten konsistent */
left: 72.6%;
top: 24.2%;
width: 47.6%;
transform: translate(-50%, 0);
}
.ff-hero-vehicle-lf img{
width: 100%;
height: auto;
display: block;
}
/* Mobile: Overlay ausblenden */
@media (max-width: 900px){
.ff-hero-vehicle-lf{ display:none !important; }
}
/* HERO: echtes Bild statt background-image -> stabil auf allen Geräten
*/
.ff-hero{
position: relative;
width: 100%;
height: clamp(320px, 45vw, 520px);
overflow: hidden;
background: none !important;
filter: brightness(1.18) contrast(1.02); /* wie vorher */
}
.ff-hero-img{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center; /* falls nötig später auf 60% center o.ä. */
display: block;
}
/* LF Overlay im Hero begrenzen */
.ff-hero-vehicle-wrap{
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}
/* Mobile: LF ausblenden */
/* HERO: Bild als echtes ![]()
, nicht als background */
.ff-hero{
position: relative;
overflow: hidden; /* wichtig, damit nichts "wandert" */
display: block;
height: clamp(320px, 45vw, 520px); /* kannst du so lassen */
}
/* Hintergrundbild skaliert wie vorher "cover" */
.ff-hero-bg{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover; /* wie background-size: cover */
object-position: center; /* wie background-position: center */
display: block;
filter: brightness(1.18) contrast(1.02);
}
/* Wrap begrenzt Klickfläche sauber auf den Hero */
.ff-hero-vehicle-wrap{
position: absolute;
inset: 0;
overflow: hidden;
}
/* Basis-Style darf dir nicht reinfunken */
.ff-hero-vehicle{
position: absolute;
bottom: auto;
right: auto;
}
/* LF: NUR mit % positionieren (jetzt stabil, weil BG + Overlay gleich
skalieren) */
.ff-hero-vehicle-lf{
left: 72.6%;
top: 24.2%;
width: 47.6%;
transform: translateX(-50%);
z-index: 35;
}
/* Hover (ohne Bewegung nach unten) */
@media (hover:hover) and (pointer:fine){
.ff-hero-vehicle-lf:hover{
filter: contrast(1.18) saturate(1.18) brightness(1.05)
drop-shadow(0 -8px 14px rgba(0,0,0,.35));
}
}
/* Mobile: LF ausblenden */
/* =========================================================
HERO + LF Overlay – FIX (NUR nötige Änderungen)
-> ganz unten in template.css einfügen
========================================================= */
/* 1) Hero ist der einzige Bezugspunkt + schneidet alles am Hero-Ende ab
*/
.ff-hero{
position: relative !important;
overflow: hidden !important; /* <- verhindert Click/Hover in Widgets
darunter */
}
/* 2) LF-Wrapper deckt EXAKT den Hero ab */
.ff-hero-vehicle-wrap{
position: absolute !important;
inset: 0 !important;
overflow: hidden !important; /* <- Hitbox endet am Hero */
pointer-events: none !important; /* <- nur der Link selbst ist klickbar
*/
}
/* Link klickbar machen */
.ff-hero-vehicle-wrap a{
pointer-events: auto !important;
}
/* 3) Alte bottom/right Positionierung komplett neutralisieren */
.ff-hero-vehicle{
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
transform: none !important;
}
/* 4) LF: nur diese Prozentwerte sind gültig -> stabil bei jeder Breite
*/
.ff-hero-vehicle-lf{
position: absolute !important;
z-index: 3000 !important;
left: 72.6% !important;
top: 24.2% !important;
width: 47.6% !important;
transform: translateX(-50%) !important; /* nur X zentrieren */
margin: 0 !important;
padding: 0 !important;
background: none !important;
box-shadow: none !important;
}
/* LF Bild sauber */
.ff-hero-vehicle-lf img{
width: 100% !important;
height: auto !important;
display: block !important;
background: transparent !important;
}
/* 5) Roter Balken blockt Klicks immer (liegt über dem Fahrzeug) */
.ff-welcome-bar{
position: relative !important;
z-index: 5000 !important;
}
/* 6) Wappen bleibt über dem roten Balken */
.ff-hero-badge{
position: absolute !important;
z-index: 6000 !important;
}
/* 7) Mobile bleibt wie aktuell: Overlay aus */
/* =========================================================
FIX: LF Overlay rutscht hoch -> von UNTEN statt TOP ankern
(nur nötige Overrides, Mobile bleibt wie jetzt)
========================================================= */
.ff-hero{
position: relative !important;
overflow: hidden !important; /* nichts darf in Widgets klicken/hovern */
}
.ff-hero-vehicle-wrap{
position: absolute !important;
inset: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
}
/* Alte bottom/right/top/left Regeln neutralisieren */
.ff-hero-vehicle,
.ff-hero-vehicle-lf{
top: auto !important;
right: auto !important;
left: auto !important;
bottom: auto !important;
transform: none !important;
}
/* LF: an den unteren Rand
nageln
(stabil bei jeder Fensterbreite) */
.ff-hero-vehicle-lf{
position: absolute !important;
z-index: 3000 !important;
left: 72.6% !important;
bottom: 0% !important; /* <- Hauptfix: nicht mehr nach oben rutschen */
width: 47.6% !important;
transform: translateX(-50%) !important;
margin: 0 !important;
padding: 0 !important;
background: none !important;
box-shadow: none !important;
}
/* Welcome-Bar blockt Klicks immer */
/* Wappen bleibt über dem roten Balken */
/* Mobile bleibt wie aktuell: Overlay aus */
/* FIX: LF Overlay – stabil bei Breitenänderung (Desktop/Tablet) */
.ff-hero-vehicle-lf{
left: 72.6% !important;
width: 47.6% !important;
transform: translateX(-50%) !important;
/* dynamisch: bei schmalerem Fenster höher, bei breiterem tiefer */
bottom: clamp(12px, calc(150px - 6vw), 72px) !important;
}
/* Mobile bleibt wie jetzt (Overlay aus) */
/* ================================
FIX: Hero-Ausschnitt stabil -> LF wandert nicht mehr
================================ */
/* 1) Hero bekommt ein festes Seitenverhältnis (bitte ggf. 1920/650
anpassen) */
.ff-hero{
height: auto !important; /* killt clamp-Höhe */
aspect-ratio: 1920 / 650; /* <-- HIER ggf. an dein Banner anpassen */
max-height: 520px !important; /* behält dein Maximum */
overflow: hidden !important;
background-size: cover !important;
background-position: center !important; /* kann später feinjustiert
werden (z.B. center 55%) */
}
/* 2) LF wieder
normal
prozentual am Hero festnageln */
.ff-hero-vehicle-lf{
position: absolute !important;
left: 72.6% !important;
top: 24.2% !important;
width: 47.6% !important;
transform: translateX(-50%) !important;
bottom: auto !important; /* wichtig: alte bottom-Spielereien aushebeln
*/
right: auto !important;
}
/* Mobile bleibt wie jetzt: Overlay aus */
/* ================================
MOBILE: Wappen kleiner, weniger verdeckend
================================ */
@media (max-width: 900px){
.ff-hero-badge{
width: 92px !important; /* kleiner (war ~130px) */
top: 58px !important; /* etwas höher */
right: 12px !important; /* etwas weiter rechts */
}
}
/* ================================
MOBILE: Burger-Menü immer über Welcome-Bar
================================ */
@media (max-width: 980px){
.ff-header .ff-nav-panel{
z-index: 99999 !important; /* über allem, auch Welcome-Bar */
}
}
/* Wrapped PDF auf Mobile: nicht zu breit + vernünftige Höhe */
@media (max-width: 900px){
.wrapped,
.mod-wrapped,
.moduletable.wrapped,
.moduletable.mod-wrapped{
max-width: 100% !important;
}
.wrapped iframe,
.mod-wrapped iframe,
.moduletable.wrapped iframe,
.moduletable.mod-wrapped iframe{
width: 100% !important;
height: 75vh !important;
max-width: 100% !important;
}
}
/* Ausbildungskalender: 2 Module steuern */
.ff-cal-desktop { display: block; }
.ff-cal-mobile { display: none; }
@media (max-width: 900px){
.ff-cal-desktop { display: none; }
.ff-cal-mobile { display: block; }
}
/* Optional: im Wrapped-Modul iframe immer sauber */
.ff-cal-desktop iframe,
.ff-cal-mobile iframe{
width:100% !important;
height:800px !important;
border:0 !important;
}
@media (max-width: 900px){
.ff-cal-mobile iframe{
height:70vh !important;
}
}
/* FOOTER MENÜ FIX – garantiert Abstand */
.ff-footer .mod-menu ul,
.ff-footer ul.menu {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-wrap: wrap !important;
gap: 14px !important;
}
.ff-footer .mod-menu li,
.ff-footer ul.menu li {
display: inline-block !important;
margin: 0 !important;
}
.ff-footer .mod-menu a,
.ff-footer ul.menu a {
display: inline-block !important;
padding: 6px 12px !important;
text-decoration: none !important;
font-weight: 700;
}
/* =========================================================
FEUERWEHRVEREIN – MOBILE OPTIMIERUNG (nur <=900px)
Desktop bleibt unverändert (2er Grid bleibt auf Desktop)
========================================================= */
@media (max-width: 900px){
/* HERO: Text volle Breite, Bild darunter */
.ff-verein-hero-inner{
display:block !important;
padding:16px !important;
}
.ff-verein-hero-text{
width:100% !important;
max-width:none !important;
}
/* Buttons: nebeneinander (2 Spalten) */
.ff-verein-actions{
display:grid !important;
grid-template-columns: 1fr 1fr !important;
gap:10px !important;
align-items:stretch !important;
margin-top:12px !important;
}
.ff-verein-actions .ff-verein-btn{
width:100% !important;
justify-content:center !important;
text-align:center !important;
padding:12px 14px !important;
border-radius:999px !important;
white-space:nowrap; /* bleibt einzeilig */
}
/* Falls es auf sehr kleinen Geräten doch nicht passt: */
@media (max-width: 380px){
.ff-verein-actions{
grid-template-columns: 1fr !important;
}
.ff-verein-actions .ff-verein-btn{
white-space:normal;
}
}
/* Hero Bild: NICHT verzerren, volle Breite, moderate Höhe */
.ff-verein-hero-media{
margin-top:14px !important;
}
.ff-verein-hero-media img{
width:100% !important;
height:220px !important; /* feste, ruhige Höhe */
object-fit:cover !important; /* keine Verzerrung */
border-radius:16px !important;
display:block !important;
}
/* OBEN (Was wir machen / Mitmachen): mobil 1 Spalte */
.ff-verein-grid-2{
display:grid !important;
grid-template-columns: 1fr !important;
gap:14px !important;
}
/* EVENTS: mobil 1 Spalte (Desktop bleibt 2er Grid) */
.ff-verein-events{
grid-template-columns: 1fr !important;
gap:16px !important;
margin-top:20px !important;
}
/* Event Bilder einheitlich, nicht verzerrt */
.ff-verein-widget-img img{
width:100% !important;
height:200px !important;
object-fit:cover !important;
display:block !important;
}
/* Satzung: Summary als Button volle Breite */
#satzung details > summary{
display:block !important;
width:100% !important;
text-align:center !important;
padding:12px 14px !important;
}
}
/* =========================================================
BURGER-MENU – FINAL OVERRIDE (ganz ans Ende!)
========================================================= */
@media (max-width: 980px){
/* Burger immer sichtbar (weiß) und über dem Panel */
.ff-header .ff-burger{
position: relative !important;
z-index: 99999 !important;
background: transparent !important;
}
.ff-header .ff-burger span{
background: #fff !important; /* <- falls es "weiß" war und verschwunden
ist */
opacity: 1 !important;
}
/* Panel als Vollbild-Overlay ab Bildschirmrand */
.ff-header .ff-nav-panel{
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100vw !important;
height: 100vh !important;
margin: 0 !important;
border-radius: 0 !important;
transform: none !important;
background: var(--rot) !important;
/* Platz, damit Links NICHT unter Burger starten */
padding: 76px 14px 18px !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
z-index: 99998 !important;
display: none !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 10px !important;
}
/* Nur wenn offen */
.ff-header .ff-nav.is-open .ff-nav-panel{
display: flex !important;
}
/* Links im Panel */
.ff-header .ff-nav-panel ul{
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
}
.ff-header .ff-nav-panel a{
color: #fff !important;
width: 100% !important;
padding: 14px !important;
border-radius: 12px !important;
}
}
/* =========================
BURGER PANEL: nur so hoch wie Inhalt
========================= */
@media (max-width: 980px){
/* Panel nicht "bis unten", sondern Inhaltshöhe */
.ff-header .ff-nav-panel{
height: auto !important;
max-height: calc(100vh - 92px) !important; /* bleibt im Viewport, ohne
ganz runter */
overflow: auto !important; /* falls viel Menü */
}
/* Optional: falls irgendwo min-height gesetzt ist */
.ff-header .ff-nav-panel{
min-height: 0 !important;
}
}
/* =========================================================
BURGER – Menü unter Header, Header bleibt sichtbar
========================================================= */
@media (max-width: 980px){
/* Header bleibt immer sichtbar */
.ff-header{
position: relative;
z-index: 10000;
}
/* Panel startet UNTER dem Header */
.ff-header .ff-nav-panel{
position: absolute !important;
top: 100% !important; /* direkt unter Header */
left: 0;
right: 0;
height: auto !important; /* nur so hoch wie Inhalt */
max-height: 70vh !important; /* nicht bis ganz unten */
overflow-y: auto !important;
background: var(--rot);
border-radius: 0 0 16px 16px;
padding: 16px 14px 20px !important;
z-index: 9999;
}
/* Panel sichtbar nur wenn offen */
.ff-header .ff-nav.is-open .ff-nav-panel{
display: block !important;
}
/* Links sauber untereinander */
.ff-header .ff-nav-panel ul{
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
padding: 0;
margin: 0;
list-style: none;
}
.ff-header .ff-nav-panel a{
display: block;
padding: 12px 14px;
border-radius: 12px;
color: #fff !important;
}
}
/* =========================================================
MOBILE HEADER SCHMALER + BURGER SLIDE-DOWN (<= 980px)
========================================================= */
@media (max-width: 980px){
/* 1) Header-Balken etwas schmaler */
.ff-header-inner{
padding: 10px 0 !important; /* war 16px */
}
.ff-logo{
width: 46px !important; /* war 56px */
height: 46px !important;
}
.ff-brand-text{
font-size: 1.05rem !important; /* leicht kleiner */
line-height: 1.1 !important;
}
/* Burger Button minimal kleiner, bleibt gut klickbar */
.ff-burger{
width: 52px !important; /* war 58px */
height: 52px !important;
border-radius: 14px !important;
}
.ff-burger span{
width: 24px !important;
height: 3px !important;
}
/* 2) Menü unter Header, Header bleibt sichtbar */
.ff-header{
position: relative;
z-index: 10000;
}
.ff-header .ff-nav-panel{
position: absolute !important;
top: 100% !important; /* direkt unter Header */
left: 0;
right: 0;
height: auto !important; /* nur so hoch wie Inhalt */
max-height: 70vh !important; /* nicht bis ganz unten */
overflow-y: auto !important;
background: var(--rot);
border-radius: 0 0 16px 16px;
padding: 14px 14px 18px !important;
box-shadow: 0 18px 40px rgba(0,0,0,.25);
z-index: 9999;
/* Slide-Down Animation */
display: block !important; /* wichtig: wir animieren, daher nicht
display:none */
opacity: 0;
transform: translateY(-10px);
pointer-events: none;
visibility: hidden;
transition: opacity .22s ease, transform .22s ease, visibility 0s linear
.22s;
}
/* Offen */
.ff-header .ff-nav.is-open .ff-nav-panel{
opacity: 1;
transform: translateY(0);
pointer-events: auto;
visibility: visible;
transition: opacity .22s ease, transform .22s ease, visibility 0s;
}
/* Links untereinander */
.ff-header .ff-nav-panel ul{
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
}
.ff-header .ff-nav-panel a{
display: block !important;
padding: 12px 14px !important;
border-radius: 12px !important;
color: #fff !important;
}
}
/* =========================================================
STARTSEITE (home-left): Ausbildungsplan unter Waldbrand
Modul: #mod-custom149
========================================================= */
@media (min-width: 901px){
/* Dein home-left ist bereits ein 2-Spalten-Grid – wir nutzen das */
.ff-home-col-left #mod-custom149{
grid-column: 1 / -1; /* volle Breite (beide Spalten) */
grid-row: 4; /* unter Wetter/Waldbrand (nach Zeile 3) */
margin-top: 16px;
max-width: none !important;
width: 100%;
}
/* Desktop: die beiden Bilder untereinander, volle Modulbreite */
.ff-home-col-left #mod-custom149 .ff-ausbildung-mobile{
display: flex;
flex-direction: column;
gap: 24px;
}
.ff-home-col-left #mod-custom149 .ff-ausbildung-page{
display: block;
width: 100%;
max-width: 100%;
margin: 0;
}
.ff-home-col-left #mod-custom149 .ff-ausbildung-page img{
width: 100%;
height: auto;
display: block;
border-radius: 14px;
box-shadow: 0 6px 18px rgba(0,0,0,.08);
background: #fff;
}
}
/* Mobile bleibt Slider wie gehabt */
@media (max-width: 900px){
.ff-home-col-left #mod-custom149 .ff-ausbildung-mobile{
display:flex !important;
gap:14px !important;
overflow-x:auto !important;
-webkit-overflow-scrolling: touch !important;
scroll-snap-type: x mandatory !important;
padding: 8px 12px !important;
max-width: 100% !important;
}
.ff-home-col-left #mod-custom149 .ff-ausbildung-page{
flex: 0 0 auto !important;
width: min(78vw, 360px) !important;
scroll-snap-align: start !important;
}
.ff-home-col-left #mod-custom149 .ff-ausbildung-page img{
width:100% !important;
height:auto !important;
object-fit: contain !important;
border-radius: 12px !important;
box-shadow: 0 6px 18px rgba(0,0,0,.08) !important;
background:#fff !important;
}
}
/* =========================================
FF-WETTER MODUL – FINAL FIX
========================================= */
/* Modul volle Breite in home-left */
.ff-home-col-left > .ff-wetter{
grid-column: 1 / -1 !important;
width: 100% !important;
max-width: 100% !important;
}
/* Innenlayout */
.ff-wetter .ff-left-widgets{
display: flex;
flex-direction: column;
gap: 18px;
width: 100%;
}
.ff-wetter .ff-left-top{
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 18px;
align-items: start;
width: 100%;
}
.ff-wetter .ff-widget{
min-width: 0 !important;
width: 100%;
background: #fff;
border-radius: 14px;
box-shadow: 0 6px 18px rgba(0,0,0,.08);
padding: 14px;
}
/* Titel dürfen NIE rausreißen */
.ff-wetter .ff-widget-title,
.ff-wetter .ff-wbs-title{
margin: 0 0 10px 0;
font-weight: 900;
color: #000;
white-space: normal !important;
overflow-wrap: anywhere !important;
word-break: break-word !important;
line-height: 1.15;
}
/* DWD */
.ff-wetter .ff-dwd-img{
display: block;
width: 100%;
height: auto;
border-radius: 10px;
}
/* Waldbrand */
.ff-wetter .ff-waldbrand-widget{
min-width: 0 !important;
}
.ff-wetter .ff-wbs-head{
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 10px;
margin-bottom: 10px;
}
.ff-wetter .ff-wbs-region{
color: #666;
font-size: .92rem;
text-align: right;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
}
.ff-wetter .ff-wbs-map{
display: block;
width: 100%;
height: auto;
border-radius: 10px;
margin-bottom: 12px;
}
.ff-wetter .ff-wbs-body{
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
}
.ff-wetter .ff-wbs-circle{
width: 60px;
height: 60px;
min-width: 60px;
min-height: 60px;
border-radius: 999px;
background: #F5A623;
display: flex !important;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: 900;
color: #111;
flex: 0 0 60px;
}
.ff-wetter .ff-wbs-scale{
min-width: 0;
flex: 1 1 auto;
font-weight: 700;
color: #222;
white-space: normal !important;
overflow-wrap: anywhere !important;
word-break: break-word !important;
line-height: 1.25;
}
.ff-wetter .ff-wbs-source{
display: block;
margin-top: 10px;
font-weight: 700;
color: #b30000;
text-decoration: none;
}
.ff-wetter .ff-wbs-source:hover{
text-decoration: underline;
}
/* Wetter unten */
.ff-wetter .ff-weather-widget iframe{
width: 100%;
border: 0;
display: block;
border-radius: 10px;
}
/* =========================================
AUSBILDUNGSPLAN
Desktop: nebeneinander
Mobile: Slider
========================================= */
/* Desktop */
@media (min-width: 901px){
.ff-ausbildung-mobile{
display:grid !important;
grid-template-columns: 1fr 1fr !important;
gap:18px !important;
overflow:visible !important;
padding:0 !important;
}
.ff-ausbildung-page{
width:100% !important;
max-width:100% !important;
flex:none !important;
}
.ff-ausbildung-page img{
width:100% !important;
height:auto !important;
display:block !important;
border-radius:12px !important;
}
}
/* Mobile */
@media (max-width: 900px){
.ff-ausbildung-mobile{
display:flex !important;
flex-direction:row !important;
gap:14px !important;
overflow-x:auto !important;
overflow-y:hidden !important;
-webkit-overflow-scrolling:touch !important;
scroll-snap-type:x mandatory !important;
padding:8px 12px !important;
}
.ff-ausbildung-mobile::-webkit-scrollbar{
display:none !important;
}
.ff-ausbildung-page{
flex:0 0 auto !important;
width:min(78vw, 360px) !important;
max-width:none !important;
scroll-snap-align:start !important;
}
.ff-ausbildung-page img{
width:100% !important;
height:auto !important;
display:block !important;
border-radius:12px !important;
}
}
/* =================================
WETTER / WALDBRAND – RESPONSIVE
================================= */
/* DESKTOP */
@media (min-width: 901px){
/* Karten nebeneinander */
.ff-wetter .ff-left-top{
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
}
/* Waldbrandkarte sichtbar */
.ff-wetter .ff-wbs-map{
display:block;
}
/* Ausbildungsplan nebeneinander */
.ff-ausbildung-mobile{
display:grid !important;
grid-template-columns:1fr 1fr;
gap:18px;
overflow:visible;
padding:0;
}
}
/* MOBILE */
@media (max-width: 900px){
/* Karten untereinander */
.ff-wetter .ff-left-top{
grid-template-columns:1fr !important;
}
/* Waldbrandkarte ausblenden */
.ff-wetter .ff-wbs-map{
display:none !important;
}
/* Kreis sichtbar lassen */
.ff-wetter .ff-wbs-circle{
display:flex !important;
}
/* Ausbildungsplan Slider */
.ff-ausbildung-mobile{
display:flex !important;
flex-direction:row !important;
gap:14px;
overflow-x:auto;
overflow-y:hidden;
scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
}
.ff-ausbildung-page{
flex:0 0 auto;
width:min(78vw,360px);
scroll-snap-align:start;
}
}
/* =========================================
TECHNIK-KARTEN
========================================= */
#ff-tech-cards .ff-tech-grid{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:20px;
}
#ff-tech-cards .ff-tech-card{
display:block;
background:#fff;
border-radius:14px;
box-shadow:0 6px 18px rgba(0,0,0,.08);
overflow:hidden;
text-decoration:none;
color:#000;
}
#ff-tech-cards .ff-tech-img img{
width:100%;
height:260px;
object-fit:cover;
display:block;
}
#ff-tech-cards .ff-tech-body{
padding:16px;
}
#ff-tech-cards .ff-tech-body h3{
margin:0 0 6px 0;
font-size:1.2rem;
font-weight:900;
}
#ff-tech-cards .ff-tech-body p{
margin:0;
color:#555;
font-weight:600;
}
/* Auf Einzelbeiträgen ausblenden */
body.view-article #ff-tech-cards{
display:none !important;
}
/* Mobil untereinander */
@media (max-width:900px){
#ff-tech-cards .ff-tech-grid{
grid-template-columns:1fr;
}
}
/* Karten Grid */
.ff-about-tiles{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
}
/* Karte */
.ff-about-tile{
display:flex;
flex-direction:column;
text-decoration:none;
border-radius:16px;
overflow:hidden;
background:#ffffff;
box-shadow:0 6px 18px rgba(0,0,0,.08);
transition:transform .2s ease, box-shadow .2s ease;
}
/* Bild */
.ff-tile-img{
width:100%;
aspect-ratio:5 / 4;
object-fit:cover;
display:block;
}
/* Text unter dem Bild */
.ff-tile-button{
display:block;
padding:14px;
text-align:center;
font-weight:700;
font-size:16px;
color:#111 !important;
background:#ffffff;
}
/* Hover */
.ff-about-tile:hover{
transform:translateY(-3px);
box-shadow:0 12px 28px rgba(0,0,0,.15);
}
/* Tablet */
@media (max-width:1024px){
.ff-about-tiles{
grid-template-columns:repeat(2,1fr);
}
}
/* Mobile */
@media (max-width:600px){
.ff-about-tiles{
grid-template-columns:1fr;
}
}
.ff-left-row-full{
margin-top:20px;
}
/* =========================================================
WETTER / WALDBRAND / KALENDER – FINAL CLEAN BLOCK
========================================================= */
/* Gesamtaufbau */
.ff-left-widgets{
display:flex;
flex-direction:column;
gap:20px;
width:100%;
}
.ff-left-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
align-items:start;
width:100%;
}
.ff-left-row-full{
width:100%;
}
/* Gemeinsame Widget-Karten */
.ff-left-widgets .ff-widget{
width:100%;
min-width:0;
background:#fff;
border-radius:14px;
box-shadow:0 6px 18px rgba(0,0,0,.08);
padding:14px;
overflow:hidden;
}
.ff-left-widgets .ff-widget-title{
margin:0 0 10px 0;
font-weight:900;
color:#000;
line-height:1.15;
white-space:normal;
overflow-wrap:anywhere;
word-break:break-word;
}
/* Wetterwarnungen */
.ff-dwd-img{
display:block;
width:100%;
height:auto;
border-radius:12px;
}
.ff-waldbrand-widget .ff-wbs-body{
display:flex;
align-items:center;
justify-content:flex-start;
gap:18px;
padding:8px 0 12px;
}
.ff-waldbrand-widget .ff-wbs-circle{
width:90px;
height:90px;
min-width:90px;
min-height:90px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
flex:0 0 90px;
font-size:34px;
font-weight:900;
background:#ddd;
color:#111;
box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.ff-waldbrand-widget #ff-wbs-level{
line-height:1;
}
.ff-waldbrand-widget .ff-wbs-meta{
display:flex;
flex-direction:column;
gap:6px;
min-width:0;
}
.ff-waldbrand-widget #ff-wbs-stand{
font-size:14px;
color:#666;
}
.ff-waldbrand-widget #ff-wbs-scale{
font-size:18px;
font-weight:700;
color:#111;
line-height:1.25;
white-space:normal;
overflow-wrap:anywhere;
word-break:break-word;
}
.ff-waldbrand-widget .ff-wbs-source{
display:block;
margin-top:8px;
font-weight:700;
color:#b30000;
text-decoration:none;
}
.ff-waldbrand-widget .ff-wbs-source:hover{
text-decoration:underline;
}
/* Wetter */
.ff-weather-widget{
width:100%;
}
.ff-weather-widget iframe,
.ff-weather-frame{
display:block;
width:100% !important;
border:0 !important;
border-radius:12px;
}
/* Kalender */
.ff-calendar-widget{
width:100%;
}
.ff-calendar-scroll{
width:100%;
overflow-x:auto;
overflow-y:hidden;
-webkit-overflow-scrolling:touch;
border-radius:12px;
}
.ff-calendar-frame{
display:block;
width:100%;
min-width:900px;
min-height:900px;
border:1px solid #777;
border-radius:12px;
background:#fff;
}
/* Mobile */
@media (max-width: 900px){
.ff-left-row{
grid-template-columns:1fr;
}
.ff-waldbrand-widget .ff-wbs-body{
flex-direction:column;
align-items:flex-start;
}
.ff-waldbrand-widget .ff-wbs-circle{
width:78px;
height:78px;
min-width:78px;
min-height:78px;
flex:0 0 78px;
font-size:30px;
}
.ff-waldbrand-widget #ff-wbs-scale{
font-size:16px;
}
.ff-calendar-frame{
min-width:700px;
min-height:780px;
}
}
/* Waldbrandkarte NUR Desktop */
.ff-wbs-map{
width:100%;
height:auto;
border-radius:12px;
margin-bottom:12px;
display:block;
}
/* MOBILE Karte ausblenden */
@media (max-width: 900px){
.ff-wbs-map{
display:none;
}
}
.ff-calendar-scroll{
width:100%;
overflow:hidden; /* KEIN Scroll mehr */
border-radius:12px;
}
.ff-calendar-frame{
display:block;
width:100%;
height:800px;
border:0;
border-radius:12px;
}
/* Mobile */
@media (max-width: 900px){
.ff-calendar-frame{
min-width:0;
height:600px;
}
}
.ff-wbs-map{
display:block !important;
width:100%;
height:auto;
border-radius:12px;
margin-bottom:12px;
}
/* =========================================================
WETTER / WALDBRAND / KALENDER – CLEAN FINAL
========================================================= */
.ff-left-widgets .ff-widget{
width:100%;
min-width:0;
background:#fff;
border-radius:16px;
box-shadow:0 6px 18px rgba(0,0,0,.08);
padding:16px;
overflow:hidden;
}
.ff-left-widgets .ff-widget-title{
margin:0 0 12px 0;
font-weight:900;
color:#000;
line-height:1.15;
}
/* Wetterwarnungen */
.ff-dwd-widget{
display:flex;
flex-direction:column;
}
.ff-dwd-img{
display:block;
width:100%;
height:auto;
max-height:420px;
object-fit:contain;
border-radius:12px;
}
/* Waldbrand kompakt */
.ff-waldbrand-widget{
display:flex;
flex-direction:column;
}
.ff-wbs-card{
position:relative;
background:linear-gradient(180deg,#fff,#fafafa);
border:1px solid rgba(0,0,0,.06);
border-radius:14px;
padding:16px;
}
.ff-wbs-icon{
position:absolute;
top:12px;
right:12px;
font-size:20px;
line-height:1;
opacity:.9;
}
.ff-wbs-body{
display:flex;
align-items:center;
gap:16px;
min-width:0;
}
.ff-wbs-circle{
width:84px;
height:84px;
min-width:84px;
min-height:84px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
flex:0 0 84px;
font-size:32px;
font-weight:900;
color:#111;
background:#ddd;
border:4px solid rgba(255,255,255,.85);
box-shadow:
0 6px 18px rgba(0,0,0,.08),
inset 0 4px 12px rgba(255,255,255,.22);
transition:transform .2s ease, box-shadow .2s ease;
}
.ff-wbs-card:hover .ff-wbs-circle{
transform:scale(1.04);
}
#ff-wbs-level{
line-height:1;
}
.ff-wbs-meta{
display:flex;
flex-direction:column;
gap:6px;
min-width:0;
flex:1 1 auto;
}
#ff-wbs-stand{
font-size:14px;
color:#666;
}
#ff-wbs-scale{
font-size:18px;
font-weight:900;
color:#111;
line-height:1.2;
white-space:normal;
overflow-wrap:anywhere;
word-break:break-word;
}
.ff-wbs-hint{
margin-top:4px;
padding:10px 12px;
border-radius:12px;
background:#f3f3f3;
color:#333;
font-size:14px;
font-weight:700;
line-height:1.35;
}
.ff-wbs-source{
display:block;
margin-top:10px;
font-weight:700;
color:#b30000;
text-decoration:none;
}
.ff-wbs-source:hover{
text-decoration:underline;
}
/* Farben je Stufe */
.ff-wbs-circle.wbs-1{ background:#fff4b3; color:#222; }
.ff-wbs-circle.wbs-2{ background:#ffd24a; color:#222; }
.ff-wbs-circle.wbs-3{ background:#f5a623; color:#111; }
.ff-wbs-circle.wbs-4{ background:#e74c3c; color:#fff; }
.ff-wbs-circle.wbs-5{ background:#7a1e2c; color:#fff; }
.ff-wbs-hint.hint-1{ background:#f6f6f6; }
.ff-wbs-hint.hint-2{ background:#fff7d6; }
.ff-wbs-hint.hint-3{ background:#fff0d9; }
.ff-wbs-hint.hint-4{ background:#fde3df; }
.ff-wbs-hint.hint-5{ background:#f3d8de; color:#4b0c18; }
/* Pulsieren bei 4 und 5 */
.ff-wbs-circle.wbs-4,
.ff-wbs-circle.wbs-5{
animation:wbsPulse 1.8s infinite;
}
@keyframes wbsPulse{
0%{
box-shadow:
0 0 0 0 rgba(231,76,60,.35),
0 6px 18px rgba(0,0,0,.08),
inset 0 4px 12px rgba(255,255,255,.22);
}
70%{
box-shadow:
0 0 0 16px rgba(231,76,60,0),
0 6px 18px rgba(0,0,0,.08),
inset 0 4px 12px rgba(255,255,255,.22);
}
100%{
box-shadow:
0 0 0 0 rgba(231,76,60,0),
0 6px 18px rgba(0,0,0,.08),
inset 0 4px 12px rgba(255,255,255,.22);
}
}
/* Wetter */
.ff-weather-frame{
display:block;
width:100% !important;
border:0 !important;
border-radius:12px;
}
/* Kalender */
.ff-calendar-scroll{
width:100%;
overflow:hidden;
border-radius:12px;
}
.ff-calendar-frame{
display:block;
width:100%;
height:760px;
border:0;
border-radius:12px;
background:#fff;
}
/* Mobile */
@media (max-width:900px){
.ff-left-row{
grid-template-columns:1fr;
}
.ff-wbs-body{
flex-direction:column;
align-items:flex-start;
}
.ff-wbs-circle{
width:76px;
height:76px;
min-width:76px;
min-height:76px;
flex:0 0 76px;
font-size:30px;
}
#ff-wbs-scale{
font-size:16px;
}
.ff-calendar-frame{
height:600px;
}
}
/* =========================================================
WETTER / WALDBRAND / KALENDER – CLEAN FINAL
========================================================= */
/* Wetterwarnungen */
/* =========================
WALDBRAND WIDGET
========================= */
.ff-waldbrand-widget{
display:flex;
flex-direction:column;
justify-content:space-between;
min-height:100%;
}
.ff-wbs-main{
display:flex;
align-items:center;
gap:20px;
margin:6px 0 14px;
}
/* =========================
KREIS
========================= */
.ff-wbs-circle{
width:96px;
height:96px;
min-width:96px;
min-height:96px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:38px;
font-weight:900;
color:#111;
background:#ddd;
border:5px solid rgba(255,255,255,.85);
box-shadow:
0 8px 22px rgba(0,0,0,.12),
inset 0 6px 16px rgba(255,255,255,.25);
transition:transform .2s ease, box-shadow .2s ease;
position:relative;
}
.ff-waldbrand-widget:hover .ff-wbs-circle{
transform:scale(1.05);
}
/* =========================
TEXT
========================= */
.ff-wbs-text{
display:flex;
flex-direction:column;
gap:8px;
min-width:0;
flex:1 1 auto;
}
.ff-wbs-scale{
font-size:20px;
font-weight:900;
line-height:1.25;
color:#111;
}
.ff-wbs-stand{
font-size:14px;
color:#666;
}
.ff-wbs-hint{
margin-top:6px;
padding:12px 14px;
border-radius:12px;
background:#f3f3f3;
font-size:14px;
font-weight:700;
line-height:1.4;
}
.ff-wbs-source{
display:block;
margin-top:12px;
font-weight:700;
color:#b30000;
text-decoration:none;
}
/* =========================
FARBEN
========================= */
/* =========================
PULSIEREN
========================= */
/* Stufe 4 – moderat */
.ff-wbs-circle.wbs-4{
animation:wbsPulse 1.8s infinite;
}
/* Stufe 5 – intensiv */
.ff-wbs-circle.wbs-5{
animation:wbsPulseStrong 1.1s infinite;
}
/* Standard-Puls */
@keyframes wbsPulse{
0%{
box-shadow:
0 0 0 0 rgba(231,76,60,.35),
0 8px 22px rgba(0,0,0,.12),
inset 0 6px 16px rgba(255,255,255,.25);
}
70%{
box-shadow:
0 0 0 18px rgba(231,76,60,0),
0 8px 22px rgba(0,0,0,.12),
inset 0 6px 16px rgba(255,255,255,.25);
}
100%{
box-shadow:
0 0 0 0 rgba(231,76,60,0),
0 8px 22px rgba(0,0,0,.12),
inset 0 6px 16px rgba(255,255,255,.25);
}
}
/* Stufe 5 – stärker + größer */
@keyframes wbsPulseStrong{
0%{
transform: scale(1);
box-shadow:
0 0 0 0 rgba(122,30,44,.7),
0 10px 26px rgba(0,0,0,.18),
inset 0 6px 16px rgba(255,255,255,.25);
}
50%{
transform: scale(1.08);
box-shadow:
0 0 0 22px rgba(122,30,44,0),
0 12px 30px rgba(0,0,0,.22),
inset 0 6px 16px rgba(255,255,255,.25);
}
100%{
transform: scale(1);
box-shadow:
0 0 0 0 rgba(122,30,44,0),
0 10px 26px rgba(0,0,0,.18),
inset 0 6px 16px rgba(255,255,255,.25);
}
}
/* zusätzlicher Alarm-Ring */
.ff-wbs-circle.wbs-5::after{
content:"";
position:absolute;
inset:0;
border-radius:50%;
background:rgba(122,30,44,.35);
animation:wbsRing 1.1s infinite;
z-index:-1;
}
@keyframes wbsRing{
0%{
transform:scale(1);
opacity:.6;
}
70%{
transform:scale(1.6);
opacity:0;
}
100%{
transform:scale(1.6);
opacity:0;
}
}
/* =========================
ALARMMODUS KARTE
========================= */
#ff-wbs-card.level-5{
background:linear-gradient(180deg,#fff4f6,#ffe9ee);
border:1px solid rgba(122,30,44,.28);
}
/* Wetter */
/* Kalender */
/* Mobile */
@media (max-width:900px){
.ff-left-row{
grid-template-columns:1fr;
}
.ff-wbs-main{
flex-direction:column;
align-items:flex-start;
gap:12px;
}
.ff-wbs-circle{
width:80px;
height:80px;
min-width:80px;
min-height:80px;
font-size:30px;
}
.ff-wbs-scale{
font-size:17px;
}
.ff-calendar-frame{
height:600px;
}
}
/* =========================================
EINSÄTZE – ALS RICHTIGES WIDGET
========================================= */
.ff-start-einsaetze{
position:relative;
/* DAS FEHLT AKTUELL */
background:#fff;
border-radius:14px;
box-shadow:0 6px 18px rgba(0,0,0,.08);
padding:14px;
overflow:hidden;
}
/* Titel sauber im Widget */
.ff-start-einsaetze .ff-start-einsaetze-item{
background:transparent;
box-shadow:none;
border-radius:0;
padding:10px 0;
}
/* =========================================
LF 10 – Feuerwehrkarten Design
========================================= */
.ff-lf-page{
margin-top:18px;
}
.ff-lf-hero-box{
background:linear-gradient(135deg, #b30000 0%, #8f0000 100%);
color:#fff;
border-radius:18px;
padding:24px;
box-shadow:0 10px 26px rgba(0,0,0,.16);
margin-bottom:22px;
}
.ff-lf-badge{
display:inline-block;
padding:6px 12px;
border-radius:999px;
background:rgba(255,255,255,.14);
font-weight:800;
font-size:13px;
margin-bottom:12px;
}
.ff-lf-hero-box h3{
margin:0 0 10px 0;
font-size:1.7rem;
font-weight:900;
color:#fff;
}
.ff-lf-hero-box p{
margin:0;
font-size:1rem;
line-height:1.6;
color:#fff;
}
.ff-lf-grid{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:20px;
}
.ff-lf-card{
background:#fff;
border-radius:16px;
padding:20px;
box-shadow:0 6px 18px rgba(0,0,0,.08);
border-top:5px solid #b30000;
}
.ff-lf-card h3{
margin:0 0 14px 0;
color:#000;
font-weight:900;
font-size:1.2rem;
}
.ff-lf-card p{
margin:0 0 12px 0;
color:#222;
line-height:1.6;
}
.ff-lf-list{
margin:0;
padding-left:18px;
}
.ff-lf-list li{
margin-bottom:8px;
line-height:1.55;
color:#222;
}
.ff-lf-wide{
margin-top:22px;
}
@media (max-width: 900px){
.ff-lf-grid{
grid-template-columns:1fr;
}
.ff-lf-hero-box{
padding:18px;
}
.ff-lf-hero-box h3{
font-size:1.35rem;
}
.ff-lf-card{
padding:16px;
}
}
/* =========================================
LF 10 – Bild oben (Hero)
========================================= */
.ff-lf-image-box{
margin:18px 0 22px 0;
border-radius:18px;
overflow:hidden;
position:relative;
/* Rahmen + Schatten */
box-shadow:0 12px 28px rgba(0,0,0,.18);
border:4px solid #fff;
}
/* Bild selbst */
.ff-lf-image-box img{
display:block;
width:100%;
height:auto;
}
/* leichter Overlay für Tiefe */
.ff-lf-image-box::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(to top, rgba(0,0,0,.25), transparent 60%);
pointer-events:none;
}
/* =========================================
EHREN-STIL (dezent & wertig)
========================================= */
.ff-ehren-hero{
background:linear-gradient(135deg,#3a3a3a,#6b5b3e); /* grau-gold */
}
.ff-ehren-image img{
filter:contrast(1.05) brightness(0.98);
}
/* Badge etwas ruhiger */
.ff-ehren-hero .ff-lf-badge{
background:#e8e0c8;
color:#5a4b2c;
}
/* Karten minimal edler */
.ff-ehren-hero + .ff-lf-grid .ff-lf-card{
border:1px solid rgba(0,0,0,.08);
background:linear-gradient(180deg,#fff,#f9f8f5);
}
/* =========================
GRID
========================= */
.ff-about-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
/* =========================
CARD
========================= */
.ff-about-card {
text-decoration: none;
color: inherit;
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
border-radius: 16px;
background: #fff;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* =========================
IMAGE (5:4 überall!)
========================= */
.ff-about-img {
width: 100%;
aspect-ratio: 5 / 4;
overflow: hidden;
}
.ff-about-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}
/* =========================
TEXT
========================= */
.ff-about-card h3 {
padding: 16px 18px;
margin: 0;
font-size: 18px;
font-weight: 700;
}
/* =========================
HOVER (ruhig wie LF)
========================= */
.ff-about-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 24px rgba(0,0,0,0.12);
}
.ff-about-card:hover img {
transform: scale(1.03);
}
/* =========================
RESPONSIVE
========================= */
/* Tablet 2 Spalten */
@media (max-width: 900px) {
.ff-about-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Mobile 1 Spalte */
@media (max-width: 600px) {
.ff-about-grid {
grid-template-columns: 1fr;
}
}
/* ==========================================================
Über-uns-Seiten – Bildbox ohne Rand
========================================================== */
.ff-about-image{
margin:0 0 30px;
padding:0;
line-height:0;
overflow:hidden;
border-radius:18px;
background:transparent;
box-shadow:none;
}
.ff-about-image img{
display:block;
width:100%;
height:auto;
margin:0;
padding:0;
border:0;
border-radius:18px;
}
/* =========================================================
LETZTE EINSÄTZE – KOMPLETT FINAL
Modulklasse: ff-start-einsaetze-table
Desktop: 1 Einsatz sichtbar + Pfeile
Mobile: 1 Einsatz sichtbar + Swipe
Kein Widget-im-Widget-Effekt
========================================================= */
/* ÄUSSERES JOOMLA-MODUL = EINZIGE KARTE */
.ff-start-einsaetze-table{
position:relative;
width:100%;
min-width:0;
background:#fff;
border-radius:16px;
box-shadow:0 6px 18px rgba(0,0,0,.08);
padding:18px;
margin:0;
overflow:hidden;
}
/* Alte innere Modulboxen neutralisieren */
.ff-start-einsaetze-table .mod-custom,
.ff-start-einsaetze-table .custom,
.ff-start-einsaetze-table .ff-einsatz-home,
.ff-start-einsaetze-table .ff-einsatz-home-viewport{
width:100%;
max-width:100%;
margin:0;
padding:0;
background:transparent !important;
border:0 !important;
border-radius:0 !important;
box-shadow:none !important;
overflow:visible;
}
/* Alte leere Ãœberschriften aus Custom-Modul verstecken */
.ff-start-einsaetze-table .ff-einsatz-home > h3:empty{
display:none !important;
}
/* Joomla-Modultitel / neuer JS-Titel */
.ff-start-einsaetze-table > h3,
.ff-start-einsaetze-table .ff-einsatz-widget-title{
margin:0 0 16px 0 !important;
padding:0 !important;
color:#111 !important;
font-size:1.3rem;
font-weight:900;
line-height:1.2;
text-align:left;
}
/* Sichtfenster */
.ff-start-einsaetze-table .ff-einsatz-viewport{
display:block;
position:relative;
width:100%;
min-width:0;
margin:0;
padding:0;
overflow:hidden;
}
/* Track */
.ff-start-einsaetze-table .ff-start-einsaetze-track{
display:flex !important;
flex-direction:row !important;
flex-wrap:nowrap !important;
width:100% !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
gap:0 !important;
overflow-x:auto;
overflow-y:hidden;
scroll-behavior:smooth;
scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
transform:none !important;
}
/* Scrollbar ausblenden */
.ff-start-einsaetze-table .ff-start-einsaetze-track::-webkit-scrollbar{
display:none;
width:0;
height:0;
}
.ff-start-einsaetze-table .ff-start-einsaetze-track{
scrollbar-width:none;
-ms-overflow-style:none;
}
/* EINZELNER EINSATZ */
.ff-start-einsaetze-table .ff-einsatz-table-item{
box-sizing:border-box;
flex:0 0 100% !important;
width:100% !important;
min-width:100% !important;
max-width:100% !important;
margin:0 !important;
padding:30px 60px !important;
display:flex !important;
flex-direction:column !important;
justify-content:center !important;
align-items:center !important;
text-align:center !important;
background:transparent !important;
border:0 !important;
border-radius:0 !important;
box-shadow:none !important;
scroll-snap-align:start;
scroll-snap-stop:always;
}
/* Einsatznummer */
.ff-start-einsaetze-table .ff-einsatz-number{
display:inline-flex;
align-items:center;
justify-content:center;
width:auto !important;
margin:0 0 10px 0 !important;
padding:5px 11px !important;
border-radius:999px;
background:#f2f2f2;
color:#666;
font-size:.85rem;
font-weight:800;
line-height:1.2;
text-align:center !important;
}
/* Stichwort */
.ff-start-einsaetze-table .ff-einsatz-keyword{
display:block;
width:100% !important;
margin:0 !important;
padding:0 !important;
color:#111 !important;
font-size:clamp(1.3rem,2.3vw,1.75rem);
font-weight:900;
line-height:1.2;
text-align:center !important;
white-space:normal;
overflow-wrap:anywhere;
}
/* Datum */
.ff-start-einsaetze-table .ff-einsatz-date{
display:block;
width:100% !important;
margin:10px 0 0 0 !important;
padding:0 !important;
color:#666;
font-size:.95rem;
font-weight:700;
line-height:1.2;
text-align:center !important;
}
/* =========================================================
PFEILE DESKTOP
========================================================= */
.ff-start-einsaetze-table .ff-einsatz-arrow{
position:absolute;
top:58%;
transform:translateY(-50%);
width:42px;
height:42px;
display:flex;
align-items:center;
justify-content:center;
padding:0;
border:0;
border-radius:50%;
background:rgba(0,0,0,.62);
color:#fff;
font-size:20px;
line-height:1;
cursor:pointer;
z-index:20;
transition:
background-color .2s ease,
opacity .2s ease,
transform .2s ease;
}
.ff-start-einsaetze-table .ff-einsatz-prev{
left:18px;
}
.ff-start-einsaetze-table .ff-einsatz-next{
right:18px;
}
.ff-start-einsaetze-table .ff-einsatz-arrow:hover{
background:rgba(0,0,0,.78);
}
.ff-start-einsaetze-table .ff-einsatz-arrow:disabled{
opacity:.22;
cursor:default;
}
/* Alte Home-Pfeile komplett weg */
.ff-start-einsaetze-table .ff-einsatz-home-arrow{
display:none !important;
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width:900px){
/* Startseiten-Reihenfolge */
.ff-home-col-left{
display:flex !important;
flex-direction:column !important;
width:100% !important;
}
/* Letzte Einsätze GANZ OBEN */
.ff-home-col-left > .ff-start-einsaetze-table{
order:1 !important;
width:100% !important;
margin:0 0 20px 0 !important;
}
/* Wetterbereich danach */
.ff-home-col-left > .ff-wetter{
order:2 !important;
width:100% !important;
margin:0 !important;
}
/* Modul kompakter */
.ff-start-einsaetze-table{
padding:14px;
}
/* Ãœberschrift */
.ff-start-einsaetze-table > h3,
.ff-start-einsaetze-table .ff-einsatz-widget-title{
margin-bottom:12px !important;
font-size:1.15rem;
text-align:left !important;
}
/* Viewport */
.ff-start-einsaetze-table .ff-einsatz-viewport{
width:100%;
overflow:hidden;
}
/* Track: exakt 1 Slide sichtbar */
.ff-start-einsaetze-table .ff-start-einsaetze-track{
width:100% !important;
gap:0 !important;
overflow-x:auto !important;
scroll-snap-type:x mandatory !important;
}
/* Ganz wichtig:
100% statt 88% -> kein Rand des nächsten Einsatzes sichtbar */
.ff-start-einsaetze-table .ff-einsatz-table-item{
flex:0 0 100% !important;
width:100% !important;
min-width:100% !important;
max-width:100% !important;
padding:24px 16px !important;
justify-content:center !important;
align-items:center !important;
text-align:center !important;
scroll-snap-align:start !important;
}
.ff-start-einsaetze-table .ff-einsatz-number,
.ff-start-einsaetze-table .ff-einsatz-keyword,
.ff-start-einsaetze-table .ff-einsatz-date{
text-align:center !important;
}
.ff-start-einsaetze-table .ff-einsatz-keyword{
font-size:1.35rem;
}
/* Mobil nur Swipe */
.ff-start-einsaetze-table .ff-einsatz-arrow{
display:none !important;
}
}
/* =========================================================
STARTSEITE – WETTERBEREICH OHNE GROSSE HINTERGRUNDKARTE
Einzelne Widgets bleiben eigene Karten
========================================================= */
/* ÄUSSERER WRAPPER: keine Karte mehr */
.ff-home-col-left > .ff-wetter{
background:transparent !important;
border:0 !important;
border-radius:0 !important;
box-shadow:none !important;
padding:0 !important;
overflow:visible !important;
}
/* Innerer Custom-Wrapper ebenfalls neutral */
.ff-home-col-left > .ff-wetter > .mod-custom,
.ff-home-col-left > .ff-wetter > .custom,
.ff-home-col-left > .ff-wetter .ff-left-widgets{
background:transparent !important;
border:0 !important;
border-radius:0 !important;
box-shadow:none !important;
padding:0 !important;
margin:0 !important;
}
/* =========================================
EINZELNE WIDGETS
========================================= */
.ff-home-col-left .ff-left-widgets .ff-widget{
background:#fff !important;
border:0 !important;
border-radius:16px !important;
box-shadow:0 6px 18px rgba(0,0,0,.08) !important;
padding:16px !important;
overflow:hidden;
}
/* Abstand zwischen den Reihen */
.ff-home-col-left .ff-left-widgets{
display:flex;
flex-direction:column;
gap:20px;
width:100%;
}
/* Wetterwarnung + Waldbrand nebeneinander */
.ff-home-col-left .ff-left-row{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:20px;
width:100%;
align-items:stretch;
}
/* Wetter / Kalender volle Breite */
.ff-home-col-left .ff-left-row-full{
width:100%;
margin:0 !important;
}
/* =========================================
MOBILE
========================================= */
@media (max-width:900px){
/* Wetterwarnung und Waldbrand untereinander */
.ff-home-col-left .ff-left-row{
grid-template-columns:1fr !important;
gap:18px !important;
}
/* Einzelkarten */
.ff-home-col-left .ff-left-widgets .ff-widget{
width:100% !important;
padding:14px !important;
margin:0 !important;
}
/* Abstand zwischen allen Karten */
.ff-home-col-left .ff-left-widgets{
gap:18px !important;
}
}
/* ======================================================
Einsatztabelle
====================================================== */
.ff-einsatz-tabelle{
width:min(100%,900px);
margin:40px auto !important;
border-collapse:collapse;
border-spacing:0;
background:#fff;
border-radius:16px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.ff-einsatz-tabelle thead tr,
.ff-einsatz-tabelle tbody tr:first-child{
background:#b30000;
}
.ff-einsatz-tabelle th,
.ff-einsatz-tabelle td{
padding:14px 18px;
border-bottom:1px solid #ececec;
}
.ff-einsatz-tabelle tbody tr:first-child td{
color:#fff;
font-weight:700;
border:none;
}
.ff-einsatz-tabelle tbody tr:nth-child(even){
background:#fafafa;
}
/* Hover nur ab der zweiten Zeile */
.ff-einsatz-tabelle tbody tr:not(:first-child):hover{
background:#fff3f3;
}
.ff-einsatz-tabelle td:nth-child(2),
.ff-einsatz-tabelle td:nth-child(3){
text-align:center;
white-space:nowrap;
}
.ff-einsatz-tabelle td:nth-child(3){
font-weight:700;
color:#b30000;
}
@media (max-width:900px){
.ff-einsatz-tabelle{
width:100%;
margin:25px auto;
font-size:.92rem;
}
.ff-einsatz-tabelle td,
.ff-einsatz-tabelle th{
padding:10px 8px;
}
}
/* =========================================================
EINSATZSEITE – BLOGSPALTE AUF VOLLE BREITE
Nur wenn die Einsatztabelle vorhanden ist
========================================================= */
/* Das Joomla-3-Spalten-Layout auf dieser Seite aufheben */
.com-content-category-blog__items.masonry-3:has(.ff-einsatz-tabelle){
display:block !important;
width:100% !important;
}
/* Einsatz-Beitrag über die komplette verfügbare Breite */
.com-content-category-blog__item:has(.ff-einsatz-tabelle){
display:block !important;
width:100% !important;
max-width:100% !important;
margin:0 !important;
}
/* Inhaltsbereich ebenfalls volle Breite */
.com-content-category-blog__item:has(.ff-einsatz-tabelle) .item-content{
width:100% !important;
max-width:100% !important;
}
/* Tabelle sauber mittig */
.ff-einsatz-tabelle{
display:table;
width:min(900px, 100%) !important;
max-width:900px !important;
margin:40px auto !important;
float:none !important;
clear:both;
}
/* MOBILE */
@media (max-width:700px){
.ff-einsatz-tabelle{
width:100% !important;
max-width:100% !important;
margin:24px auto !important;
}
}
/* Einsatznummer auf der Startseite */
.ff-start-einsaetze-table .ff-einsatz-number{
display:inline-block;
padding:6px 12px;
margin-bottom:14px;
background:#b30000;
color:#fff;
border-radius:999px;
font-size:.85rem;
font-weight:700;
letter-spacing:.3px;
}
html,
body{
min-height:100%;
}
body{
min-height:100vh;
display:flex;
flex-direction:column;
}
.ff-main{
flex:1;
}
.ff-footer{
margin-top:auto;
}
/* =========================================================
SIGPLUS GALERIE – FINAL
Originalformat, keine weißen Boxen
========================================================= */
.sigplus-gallery{
width:100% !important;
max-width:1200px !important;
margin:30px auto !important;
padding:0 !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
height:auto !important;
min-height:0 !important;
overflow:visible !important;
}
/* Listen-Grid */
.sigplus-gallery ul{
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:18px !important;
width:100% !important;
height:auto !important;
margin:0 !important;
padding:0 !important;
list-style:none !important;
background:transparent !important;
}
/* Einzelne Galerie-Zelle */
.sigplus-gallery li,
.sigplus-gallery .slideplus-slot{
display:block !important;
position:static !important;
width:100% !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
aspect-ratio:auto !important;
margin:0 !important;
padding:0 !important;
background:transparent !important;
border:0 !important;
border-radius:0 !important;
box-shadow:none !important;
overflow:visible !important;
}
/* Bild-Link */
.sigplus-gallery a.sigplus-image{
display:block !important;
width:100% !important;
height:auto !important;
margin:0 !important;
padding:0 !important;
background:transparent !important;
border:0 !important;
border-radius:0 !important;
box-shadow:none !important;
overflow:visible !important;
}
/* DAS BILD SELBST */
.sigplus-gallery img.sigplus-preview{
display:block !important;
width:100% !important;
max-width:100% !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
aspect-ratio:auto !important;
object-fit:contain !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
border-radius:12px !important;
box-shadow:0 6px 18px rgba(0,0,0,.12) !important;
background:transparent !important;
}
/* ALLE SlidePlus-Hüllen neutralisieren */
.sigplus-gallery .slideplus,
.sigplus-gallery .slideplus-viewport,
.sigplus-gallery .slideplus-content,
.sigplus-gallery .slideplus-stripe{
display:block !important;
position:static !important;
width:100% !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
margin:0 !important;
padding:0 !important;
transform:none !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
overflow:visible !important;
}
/* Navigation von SlidePlus weg */
.sigplus-gallery .slideplus-navigation,
.sigplus-gallery .slideplus-prev,
.sigplus-gallery .slideplus-next{
display:none !important;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width:900px){
.sigplus-gallery ul{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
}
/* =========================================================
HANDY
========================================================= */
@media (max-width:600px){
.sigplus-gallery ul{
grid-template-columns:1fr !important;
gap:14px !important;
}
.sigplus-gallery img.sigplus-preview{
width:100% !important;
height:auto !important;
}
}
/* ==========================================
Galerie Bildunterschriften
========================================== */
.ff-galerie-caption{
margin-top:8px;
padding:0 6px;
color:#444;
font-size:.95rem;
font-weight:600;
line-height:1.35;
text-align:center;
}
/* ==========================================
Galerie-Bildunterschriften mobil sichtbar
========================================== */
.ff-galerie-caption{
display:block !important;
width:100% !important;
margin:10px 0 0 !important;
padding:0 6px 4px !important;
color:#333 !important;
background:transparent !important;
font-size:15px !important;
font-weight:600 !important;
line-height:1.4 !important;
text-align:center !important;
opacity:1 !important;
visibility:visible !important;
position:static !important;
z-index:auto !important;
}
/* MOBILE */
@media (max-width:600px){
.sigplus-gallery li{
display:block !important;
height:auto !important;
overflow:visible !important;
margin-bottom:22px !important;
}
.sigplus-gallery a.sigplus-image{
display:block !important;
height:auto !important;
overflow:visible !important;
}
.ff-galerie-caption{
display:block !important;
color:#222 !important;
font-size:16px !important;
margin-top:10px !important;
padding:0 8px 6px !important;
text-align:center !important;
}
}
/* ==========================================
Wappen im Hero höher und etwas weiter rechts
========================================== */
.ff-hero-badge{
transform: translateY(-50px);
margin-left: 30px;
}
@media (max-width:900px){
.ff-hero-badge{
transform: translateY(-32px);
margin-left: 15px;
}
}
/* =========================================================
EINSATZABTEILUNG – FINAL
========================================================= */
.ff-einsatz-hero-image{
margin:0 0 35px;
}
.ff-einsatz-hero-image img{
width:100%;
display:block;
border-radius:18px;
}
/* =========================================================
INHALTSBEREICH
========================================================= */
.ff-einsatz-content{
width:95%;
max-width:1250px;
margin:0 auto 40px;
background:#fff;
padding:55px 65px;
border-radius:18px;
box-shadow:0 8px 24px rgba(0,0,0,.08);
line-height:1.8;
}
/* Hauptüberschrift */
.ff-einsatz-content h1{
margin:0 0 10px;
font-size:3.2rem;
font-weight:900;
line-height:1.1;
color:#111;
}
/* Untertitel */
.ff-einsatz-subtitle{
margin:0 0 35px;
color:#b30000;
font-size:1.3rem;
font-weight:700;
}
/* =========================================================
ABSCHNITTSÃœBERSCHRIFTEN
========================================================= */
.ff-einsatz-content h2{
display:flex;
align-items:center;
margin:48px 0 18px;
color:#111;
font-size:1.8rem;
font-weight:800;
line-height:1.25;
}
.ff-einsatz-content h2::before{
content:"";
flex:0 0 auto;
width:6px;
height:32px;
margin-right:14px;
border-radius:20px;
background:#b30000;
}
/* =========================================================
FLIESSTEXT
========================================================= */
.ff-einsatz-content p{
max-width:1050px;
margin:0 0 18px;
}
/* =========================================================
EINLEITUNG
========================================================= */
.ff-einsatz-content blockquote{
max-width:1050px;
margin:0 0 38px;
padding:20px 26px;
border-left:5px solid #b30000;
background:#fafafa;
border-radius:0 12px 12px 0;
font-size:1.08rem;
line-height:1.7;
}
/* =========================================================
FIRST RESPONDER
========================================================= */
.ff-highlight{
margin:45px 0;
padding:30px;
background:#fff5f5;
border-left:6px solid #b30000;
border-radius:14px;
}
.ff-highlight h2{
margin-top:0;
}
/* =========================================================
AKTIONSBOXEN
Ausbildungsplan / Kontakt
========================================================= */
.ff-action-box{
max-width:900px;
margin:28px 0 36px;
padding:22px 24px;
background:#fcfcfc;
border:1px solid #e4e4e4;
border-radius:14px;
box-shadow:0 3px 10px rgba(0,0,0,.035);
}
.ff-action-box p{
margin:0 0 16px;
}
.ff-action-box .ff-btn{
display:inline-block;
margin:0;
border:1px solid rgba(179,0,0,.22);
box-shadow:0 2px 7px rgba(0,0,0,.06);
transition:
transform .2s ease,
box-shadow .2s ease;
}
.ff-action-box .ff-btn:hover{
transform:translateY(-1px);
box-shadow:0 5px 12px rgba(0,0,0,.10);
}
/* =========================================================
ANSPRECHPARTNER
========================================================= */
.ff-einsatz-contact{
max-width:700px;
margin:22px 0;
padding:18px 22px;
background:#f7f7f7;
border-radius:12px;
border:1px solid #ececec;
}
/* =========================================================
ABSCHLUSSBILD
========================================================= */
.ff-einsatz-team{
display:block;
width:100%;
height:auto;
margin-top:45px;
border-radius:16px;
}
/* =========================================================
ABSCHLUSSSATZ
========================================================= */
.ff-einsatz-schluss{
justify-content:center;
margin-top:26px !important;
text-align:center;
color:#111 !important;
}
.ff-einsatz-schluss::before{
display:none;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width:1000px){
.ff-einsatz-content{
width:96%;
padding:40px;
}
.ff-einsatz-content h1{
font-size:2.7rem;
}
}
/* =========================================================
HANDY
========================================================= */
@media (max-width:768px){
.ff-einsatz-hero-image{
margin-bottom:24px;
}
.ff-einsatz-hero-image img{
border-radius:14px;
}
.ff-einsatz-content{
width:100%;
max-width:100%;
padding:24px 18px;
border-radius:14px;
}
.ff-einsatz-content h1{
font-size:2.25rem;
}
.ff-einsatz-subtitle{
font-size:1.1rem;
margin-bottom:26px;
}
.ff-einsatz-content h2{
margin-top:36px;
font-size:1.4rem;
}
.ff-einsatz-content h2::before{
width:5px;
height:26px;
margin-right:11px;
}
.ff-einsatz-content blockquote{
padding:16px 18px;
font-size:1rem;
}
.ff-highlight{
margin:34px 0;
padding:20px 18px;
}
.ff-action-box{
padding:18px;
margin:22px 0 30px;
}
.ff-action-box .ff-btn{
width:100%;
text-align:center;
}
.ff-einsatz-contact{
padding:16px 18px;
}
.ff-einsatz-team{
margin-top:34px;
border-radius:12px;
}
}
/* =========================================================
VEREIN – SATZUNG SICHTBAR UND AUFKLAPPBAR
========================================================= */
.ff-satzung{
display:block !important;
width:100%;
max-width:100%;
margin:24px 0 10px;
background:#fff;
border:1px solid #dddddd;
border-radius:14px;
box-shadow:0 4px 14px rgba(0,0,0,.06);
overflow:hidden;
visibility:visible !important;
opacity:1 !important;
}
/* Klickbare Kopfzeile */
.ff-satzung summary{
display:block !important;
position:relative;
padding:16px 54px 16px 20px;
background:#b30000;
color:#fff;
font-size:1rem;
font-weight:800;
cursor:pointer;
list-style:none;
visibility:visible !important;
opacity:1 !important;
}
/* Standard-Dreieck ausblenden */
.ff-satzung summary::-webkit-details-marker{
display:none;
}
/* Eigenes Plus */
.ff-satzung summary::after{
content:"+";
position:absolute;
right:20px;
top:50%;
transform:translateY(-50%);
font-size:1.6rem;
font-weight:400;
color:#fff;
}
/* Bei geöffnetem Bereich Minus */
.ff-satzung[open] summary::after{
content:"";
}
/* Inhalt */
.ff-satzung-content{
display:block !important;
padding:24px;
background:#fff;
color:#222;
line-height:1.7;
visibility:visible !important;
opacity:1 !important;
}
/* Ãœberschriften innerhalb der Satzung */
.ff-satzung-content h3{
margin:28px 0 10px;
color:#b30000;
font-size:1.2rem;
font-weight:800;
}
/* erster Paragraph */
.ff-satzung-content > :first-child{
margin-top:0;
}
/* MOBILE */
@media (max-width:700px){
.ff-satzung summary{
padding:14px 48px 14px 16px;
}
.ff-satzung-content{
padding:18px 16px;
}
}
.ff-spec-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
gap:24px;
margin:30px 0;
}
.ff-spec-box{
padding:24px;
background:#fafafa;
border:1px solid #e5e5e5;
border-radius:16px;
box-shadow:0 4px 12px rgba(0,0,0,.05);
}
.ff-spec-box h2{
margin-top:0;
}
.ff-spec-box ul{
margin:0;
padding-left:20px;
line-height:1.8;
}
/* =========================================================
NÄCHSTE TERMINE – IM LINKEN STARTSEITENMODUL
========================================================= */
.ff-termine-widget{
width:100%;
box-sizing:border-box;
}
.ff-termine-intro{
margin:0 0 18px;
color:#666;
font-size:.95rem;
}
.ff-termine-columns{
display:grid;
grid-template-columns:1fr 1fr;
gap:22px;
}
.ff-termine-column{
min-width:0;
}
.ff-termine-column h4{
margin:0 0 12px;
padding-left:10px;
border-left:4px solid #c1121f;
font-size:1.05rem;
font-weight:800;
color:#222;
}
.ff-termine-placeholder{
padding:14px;
background:#f8f8f8;
border-radius:10px;
color:#666;
font-size:.9rem;
}
/* Mobil */
@media(max-width:700px){
.ff-termine-columns{
grid-template-columns:1fr;
gap:18px;
}
}
/* =========================================================
NÄCHSTE TERMINE
========================================================= */
.ff-termine-widget{
width:100%;
}
/* Intro */
.ff-termine-intro{
margin:0 0 20px;
color:#666;
font-size:.95rem;
}
/* Zwei Spalten */
.ff-termine-columns{
display:grid;
grid-template-columns:
minmax(0,1fr)
minmax(0,1fr);
gap:28px;
width:100%;
}
/* Spalte */
/* Spaltenüberschrift */
.ff-termine-column h4{
margin:0 0 14px;
padding-left:11px;
border-left:5px solid #c1121f;
color:#222;
font-size:1.08rem;
font-weight:900;
}
/* Vereinsseite andere Farbe */
.ff-termine-column:nth-child(2) h4{
border-left-color:#555;
}
/* Terminliste */
.ff-termine-list{
display:flex;
flex-direction:column;
gap:10px;
}
/* Einzelner Termin */
.ff-termin-card{
display:grid;
grid-template-columns:62px 1fr;
gap:14px;
align-items:center;
min-height:72px;
padding:10px 14px;
background:#f8f8f8;
border-radius:11px;
border-left:4px solid #c1121f;
}
/* Verein */
.ff-termin-verein{
border-left-color:#555;
}
/* Datum */
.ff-termin-date{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
}
.ff-termin-date strong{
color:#111;
font-size:1.45rem;
font-weight:900;
line-height:1;
}
.ff-termin-date span{
margin-top:4px;
color:#777;
font-size:.68rem;
font-weight:800;
letter-spacing:.7px;
}
/* Informationen */
.ff-termin-info{
display:flex;
flex-direction:column;
min-width:0;
}
.ff-termin-title{
color:#222;
font-size:.95rem;
font-weight:800;
line-height:1.25;
}
.ff-termin-time,
.ff-termin-location{
margin-top:3px;
color:#666;
font-size:.80rem;
}
/* Leer / Laden */
.ff-termine-loading,
.ff-termine-empty{
padding:18px;
background:#f8f8f8;
border-radius:10px;
color:#777;
font-size:.88rem;
}
/* =========================================================
HANDY
========================================================= */
@media(max-width:700px){
.ff-termine-columns{
grid-template-columns:1fr;
gap:28px;
}
.ff-termin-card{
grid-template-columns:55px 1fr;
padding:10px 12px;
}
.ff-termin-date strong{
font-size:1.3rem;
}
}
/* =========================================================
EINSATZSEITE – GOOGLE SHEETS
========================================================= */
.ff-einsaetze-page {
width: 100%;
margin-top: 25px;
}
.ff-einsaetze-komplett {
width: 100%;
overflow-x: auto;
}
/* Tabelle */
.ff-einsaetze-table {
width: 100%;
border-collapse: collapse;
background: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 14px rgba(0,0,0,.06);
}
/* Tabellenkopf */
.ff-einsaetze-table thead {
background: #c1121f;
}
.ff-einsaetze-table th {
padding: 15px 18px;
color: #fff;
text-align: left;
font-size: .95rem;
font-weight: 800;
}
/* Tabellenzeilen */
.ff-einsaetze-table td {
padding: 14px 18px;
border-bottom: 1px solid #eee;
color: #333;
font-size: .95rem;
}
.ff-einsaetze-table tbody tr:last-child td {
border-bottom: 0;
}
.ff-einsaetze-table tbody tr:hover {
background: #f8f8f8;
}
/* Stichwort */
.ff-einsaetze-stichwort {
font-weight: 700;
}
/* Datum */
.ff-einsaetze-datum {
white-space: nowrap;
}
/* Nummer */
.ff-einsaetze-nummer {
white-space: nowrap;
font-weight: 700;
color: #666 !important;
}
/* =========================================================
HANDY
========================================================= */
@media (max-width: 700px) {
.ff-einsaetze-table th,
.ff-einsaetze-table td {
padding: 11px 9px;
font-size: .82rem;
}
.ff-einsaetze-table th:nth-child(1) {
width: 50%;
}
.ff-einsaetze-table th:nth-child(2) {
width: 28%;
}
.ff-einsaetze-table th:nth-child(3) {
width: 22%;
}
}
/* =========================================================
EINSATZSEITE
========================================================= */
.ff-einsaetze-seite {
width: 100%;
max-width: none;
margin: 0;
padding: 0;
}
#ff-einsaetze-komplett {
width: 100%;
margin-top: 25px;
}
.ff-einsaetze-table {
width: 100%;
border-collapse: collapse;
table-layout: auto;
}
/* Tabellenkopf */
.ff-einsaetze-table th {
padding: 14px 16px;
color: #fff;
text-align: left;
font-weight: 800;
}
/* Tabellenzellen */
.ff-einsaetze-table td {
padding: 13px 16px;
border-bottom: 1px solid #ddd;
color: #222;
}
/* Stichwort bekommt den meisten Platz */
.ff-einsaetze-table th:nth-child(1),
.ff-einsaetze-table td:nth-child(1) {
width: 60%;
}
/* Datum */
.ff-einsaetze-table th:nth-child(2),
.ff-einsaetze-table td:nth-child(2) {
width: 25%;
white-space: nowrap;
}
/* Nummer */
.ff-einsaetze-table th:nth-child(3),
.ff-einsaetze-table td:nth-child(3) {
width: 15%;
white-space: nowrap;
}
/* Zeilen */
.ff-einsaetze-table tbody tr:nth-child(even) {
background: #f7f7f7;
}
.ff-einsaetze-table tbody tr:hover {
background: #f1f1f1;
}
/* =========================================================
HANDY
========================================================= */
@media (max-width: 700px) {
.ff-einsaetze-table th,
.ff-einsaetze-table td {
padding: 10px 7px;
font-size: .82rem;
}
.ff-einsaetze-table th:nth-child(1),
.ff-einsaetze-table td:nth-child(1) {
width: 48%;
}
.ff-einsaetze-table th:nth-child(2),
.ff-einsaetze-table td:nth-child(2) {
width: 30%;
}
.ff-einsaetze-table th:nth-child(3),
.ff-einsaetze-table td:nth-child(3) {
width: 22%;
}
}
/* Einsätze-Kategorie immer einspaltig */
.com-content-category-blog .blog-items.masonry-3 {
display: grid !important;
grid-template-columns: 1fr !important;
}
.com-content-category-blog .blog-item,
.com-content-category-blog .item-content {
width: 100% !important;
max-width: none !important;
}
#ff-einsaetze-komplett,
#ff-einsaetze-komplett .ff-einsaetze-table {
width: 100% !important;
max-width: none !important;
}
/* =========================================================
TERMINE – 3ER SLIDER
========================================================= */
.ff-termine-slider{
width:100%;
min-width:0;
}
.ff-termine-slider-viewport{
width:100%;
overflow:hidden;
}
.ff-termine-slider-track{
display:flex;
flex-wrap:nowrap;
width:100%;
transform:translateX(0);
transition:transform .45s ease;
}
.ff-termine-slider-page{
flex:0 0 100%;
width:100%;
min-width:100%;
display:flex;
flex-direction:column;
gap:10px;
box-sizing:border-box;
}
/* Navigation */
.ff-termine-slider-nav{
display:flex;
align-items:center;
justify-content:center;
gap:14px;
margin-top:14px;
}
/* Pfeile */
.ff-termine-slider-arrow{
display:flex;
align-items:center;
justify-content:center;
width:32px;
height:32px;
padding:0;
border:0;
border-radius:50%;
background:#f1f1f1;
color:#333;
font-size:17px;
font-weight:900;
line-height:1;
cursor:pointer;
transition:
background .2s ease,
transform .2s ease;
}
.ff-termine-slider-arrow:hover{
background:#e2e2e2;
transform:scale(1.06);
}
/* Seitenanzeige 1 / 3 */
.ff-termine-slider-indicator{
min-width:42px;
color:#777;
text-align:center;
font-size:.78rem;
font-weight:700;
}
/* Handy */
@media(max-width:700px){
.ff-termine-slider-page{
gap:9px;
}
.ff-termine-slider-nav{
margin-top:12px;
}
.ff-termine-slider-arrow{
width:34px;
height:34px;
}
}
/* =========================================================
LF 10 – FAHRZEUGSEITE
FREIWILLIGE FEUERWEHR SCHMERZKE
========================================================= */
/* =========================================================
GESAMTE SEITE
========================================================= */
.ff-lf-page {
width: 100%;
max-width: 1600px;
margin: 0 auto;
padding:
36px
24px
70px;
box-sizing: border-box;
}
/* =========================================================
KOPFBEREICH
========================================================= */
.ff-lf-head {
margin-bottom: 30px;
}
.ff-lf-kicker {
display: block;
margin-bottom: 7px;
color: #c1121f;
font-size: .76rem;
font-weight: 800;
letter-spacing: .1em;
}
.ff-lf-head h1 {
margin: 0;
color: #1d1d1d;
font-size:
clamp(2.2rem, 3.5vw, 3.4rem);
line-height: 1.06;
}
.ff-lf-head p {
margin:
9px
0
0;
color: #666;
font-size: 1.08rem;
line-height: 1.5;
}
/* =========================================================
KENNZAHLEN OBEN
========================================================= */
.ff-lf-facts {
display: grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap: 14px;
width: 100%;
margin:
0
0
22px;
}
.ff-lf-fact {
display: flex;
align-items: center;
gap: 17px;
min-height: 96px;
padding:
17px
20px;
box-sizing: border-box;
background: #fff;
border:
1px
solid
#e3e3e3;
border-radius: 13px;
box-shadow:
0 4px 16px rgba(0,0,0,.045);
transition:
transform .18s ease,
box-shadow .18s ease,
border-color .18s ease;
}
.ff-lf-fact:hover {
transform:
translateY(-2px);
border-color: #d5d5d5;
box-shadow:
0 7px 20px rgba(0,0,0,.065);
}
/* Roter Kreis */
.ff-lf-fact-icon {
display: flex;
align-items: center;
justify-content: center;
flex:
0
0
52px;
width: 52px;
height: 52px;
background: #c1121f;
color: #fff;
border-radius: 50%;
box-shadow:
0 4px 12px rgba(193,18,31,.18);
}
.ff-lf-fact-icon span {
font-size: .92rem;
font-weight: 800;
line-height: 1;
}
/* Textbereich */
.ff-lf-fact-content {
display: flex;
flex-direction: column;
min-width: 0;
}
.ff-lf-fact-label {
display: block;
margin-bottom: 4px;
color: #888;
font-size: .66rem;
font-weight: 800;
letter-spacing: .09em;
line-height: 1.2;
}
.ff-lf-fact-content strong {
display: block;
color: #222;
font-size: 1.18rem;
font-weight: 700;
line-height: 1.2;
}
.ff-lf-fact-content small {
display: block;
margin-top: 3px;
color: #777;
font-size: .79rem;
line-height: 1.3;
}
/* =========================================================
INTERAKTIVER FAHRZEUGBEREICH
========================================================= */
.ff-lf-interactive {
display: grid;
grid-template-columns:
minmax(0, 3fr)
minmax(280px, 1fr);
gap: 32px;
align-items: start;
width: 100%;
padding:
30px
28px
24px;
box-sizing: border-box;
background: #f7f7f7;
border: 1px solid #e2e2e2;
border-top: 4px solid #c1121f;
border-radius: 17px;
box-shadow:
0 7px 25px rgba(0,0,0,.04);
}
/* =========================================================
FAHRZEUGSPALTE
========================================================= */
.ff-lf-vehicle-column {
display: flex;
flex-direction: column;
justify-content: flex-start;
width: 100%;
min-width: 0;
}
/* =========================================================
FAHRZEUG + HOTSPOTS
========================================================= */
.ff-lf-image-stage {
position: relative;
width: 100%;
max-width: 1120px;
margin:
0
auto;
line-height: 0;
}
.ff-lf-vehicle-image {
display: block;
width: 100%;
height: auto;
max-width: none;
margin: 0;
object-fit: contain;
}
/* =========================================================
HOTSPOTS
========================================================= */
.ff-lf-hotspot {
position: absolute;
width: 31px;
height: 31px;
padding: 0;
transform:
translate(-50%, -50%);
background: #c1121f;
border:
4px
solid
#fff;
border-radius: 50%;
box-shadow:
0 0 0 3px rgba(193,18,31,.25),
0 4px 11px rgba(0,0,0,.22);
cursor: pointer;
z-index: 10;
transition:
transform .18s ease,
box-shadow .18s ease,
background .18s ease;
}
.ff-lf-hotspot::before {
content: "";
position: absolute;
inset: -9px;
border:
1px
solid
rgba(193,18,31,.38);
border-radius: 50%;
}
.ff-lf-hotspot::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 6px;
height: 6px;
transform:
translate(-50%, -50%);
background: #fff;
border-radius: 50%;
}
.ff-lf-hotspot:hover,
.ff-lf-hotspot:focus-visible {
transform:
translate(-50%, -50%)
scale(1.17);
outline: none;
}
.ff-lf-hotspot.is-active {
background: #8e0c16;
transform:
translate(-50%, -50%)
scale(1.17);
box-shadow:
0 0 0 5px rgba(193,18,31,.22),
0 4px 14px rgba(0,0,0,.25);
}
/* =========================================================
HINWEIS UNTER DEM LF
========================================================= */
.ff-lf-image-help {
margin:
15px
0
0;
color: #777;
text-align: center;
font-size: .84rem;
line-height: 1.45;
}
/* =========================================================
INFOBEREICH RECHTS
========================================================= */
.ff-lf-info-panel {
position: relative;
width: 100%;
height: auto;
box-sizing: border-box;
background: transparent;
border: 0;
box-shadow: none;
}
/* =========================================================
STARTANZEIGE DER INFOBOX
========================================================= */
.ff-lf-info-placeholder {
width: 100%;
padding: 27px;
box-sizing: border-box;
background: #fff;
border-radius: 14px;
box-shadow:
0 5px 18px rgba(0,0,0,.055);
}
.ff-lf-info-symbol {
display: flex;
align-items: center;
justify-content: center;
width: 43px;
height: 43px;
margin-bottom: 18px;
background: #c1121f;
color: #fff;
border-radius: 50%;
font-size: 1.5rem;
font-weight: 300;
box-shadow:
0 4px 12px rgba(193,18,31,.22);
}
.ff-lf-info-placeholder > span {
display: block;
margin-bottom: 6px;
color: #c1121f;
font-size: .68rem;
font-weight: 800;
letter-spacing: .09em;
}
.ff-lf-info-placeholder h2 {
margin:
0
0
10px;
color: #222;
font-size: 1.4rem;
line-height: 1.25;
}
.ff-lf-info-placeholder p {
margin: 0;
color: #606060;
font-size: .92rem;
line-height: 1.6;
}
/* =========================================================
GEÖFFNETE INFOBOX
========================================================= */
.ff-lf-info-content {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
max-height: 570px;
padding: 27px;
box-sizing: border-box;
overflow: hidden;
background: #fff;
border-radius: 14px;
box-shadow:
0 5px 18px rgba(0,0,0,.055);
}
.ff-lf-info-content[hidden] {
display: none !important;
}
/* Kategorie */
.ff-lf-info-category {
display: block;
flex: 0 0 auto;
margin-bottom: 7px;
padding-right: 42px;
color: #c1121f;
font-size: .68rem;
font-weight: 800;
letter-spacing: .09em;
}
/* Titel */
.ff-lf-info-title {
flex: 0 0 auto;
margin:
0
42px
12px
0;
color: #222;
font-size: 1.45rem;
line-height: 1.2;
}
/* Text */
.ff-lf-info-text {
flex: 0 0 auto;
margin: 0;
color: #555;
font-size: .92rem;
line-height: 1.6;
}
/* =========================================================
SCHLIESSEN-BUTTON
========================================================= */
.ff-lf-info-close {
position: absolute;
top: 15px;
right: 15px;
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
background: #f0f0f0;
color: #444;
border: 0;
border-radius: 50%;
font-size: 1.3rem;
cursor: pointer;
z-index: 5;
transition:
background .18s ease,
transform .18s ease;
}
.ff-lf-info-close:hover {
background: #e3e3e3;
transform: scale(1.06);
}
/* =========================================================
DETAILBILD DES HOTSPOTS – DESKTOP
========================================================= */
.ff-lf-info-image-wrap {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 0;
margin-top: 20px;
padding: 0;
box-sizing: border-box;
overflow: hidden;
background: transparent;
border: 0;
border-radius: 11px;
box-shadow:
0 4px 14px rgba(0,0,0,.09);
}
.ff-lf-info-image-wrap[hidden] {
display: none !important;
}
.ff-lf-info-image {
display: block;
width: 100%;
height: auto;
max-width: 100%;
max-height: 300px;
margin: 0;
object-fit: contain;
object-position: center;
background: transparent;
border-radius: 11px;
}
/* =========================================================
ZAHLEN · DATEN · FAKTEN
========================================================= */
.ff-lf-data {
margin-top: 48px;
}
.ff-lf-section-head {
margin-bottom: 20px;
padding-left: 15px;
border-left:
4px
solid
#c1121f;
}
.ff-lf-section-head span {
display: block;
margin-bottom: 4px;
color: #777;
font-size: .7rem;
font-weight: 800;
letter-spacing: .09em;
}
.ff-lf-section-head h2 {
margin: 0;
color: #222;
font-size: 1.7rem;
}
/* =========================================================
DATENTABELLE
========================================================= */
.ff-lf-data-table {
display: grid;
grid-template-columns:
repeat(2, minmax(0,1fr));
gap:
10px
15px;
}
.ff-lf-data-row {
display: grid;
grid-template-columns:
minmax(155px,.7fr)
minmax(0,1.3fr);
gap: 17px;
align-items: center;
min-height: 57px;
padding:
13px
17px;
box-sizing: border-box;
background: #f7f7f7;
border:
1px
solid
#e2e2e2;
border-radius: 9px;
transition:
background .16s ease,
border-color .16s ease;
}
.ff-lf-data-row:hover {
background: #f1f1f1;
border-color: #d6d6d6;
}
.ff-lf-data-row strong {
min-width: 0;
color: #555;
font-size: .87rem;
line-height: 1.3;
}
.ff-lf-data-row span {
min-width: 0;
color: #222;
font-size: .92rem;
line-height: 1.3;
}
/* =========================================================
MOBILE ELEMENTE AUF DESKTOP AUS
========================================================= */
.ff-lf-mobile-overlay,
.ff-lf-mobile-sheet {
display: none;
}
/* =========================================================
GROSSE DESKTOPS
========================================================= */
@media (min-width: 1400px) {
.ff-lf-interactive {
grid-template-columns:
minmax(0, 1fr)
330px;
gap: 38px;
padding:
34px
32px
26px;
}
.ff-lf-image-stage {
max-width: 1180px;
}
}
/* =========================================================
MITTELGROSSE DESKTOPS
========================================================= */
@media (max-width: 1200px) {
.ff-lf-page {
padding-left: 18px;
padding-right: 18px;
}
.ff-lf-interactive {
grid-template-columns:
minmax(0, 1fr)
300px;
gap: 22px;
padding: 23px;
}
.ff-lf-info-placeholder,
.ff-lf-info-content {
padding: 23px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 900px) {
.ff-lf-page {
padding:
26px
14px
55px;
}
.ff-lf-interactive {
grid-template-columns:
minmax(0, 1fr)
270px;
gap: 16px;
padding: 18px;
}
.ff-lf-hotspot {
width: 25px;
height: 25px;
border-width: 3px;
}
.ff-lf-info-placeholder,
.ff-lf-info-content {
padding: 20px;
}
.ff-lf-info-title {
font-size: 1.3rem;
}
.ff-lf-info-text {
font-size: .86rem;
}
.ff-lf-data-table {
grid-template-columns: 1fr;
}
/* Kennzahlen */
.ff-lf-facts {
gap: 9px;
margin-bottom: 17px;
}
.ff-lf-fact {
gap: 11px;
min-height: 82px;
padding: 13px;
}
.ff-lf-fact-icon {
flex-basis: 43px;
width: 43px;
height: 43px;
}
.ff-lf-fact-content strong {
font-size: 1rem;
}
}
/* =========================================================
HANDY
========================================================= */
@media (max-width: 680px) {
.ff-lf-page {
width: 100%;
padding:
20px
7px
48px;
}
/* =======================================================
KOPF
======================================================= */
.ff-lf-head {
margin-bottom: 19px;
padding:
0
5px;
}
.ff-lf-kicker {
font-size: .66rem;
}
.ff-lf-head h1 {
font-size: 1.8rem;
}
.ff-lf-head p {
margin-top: 6px;
font-size: .9rem;
}
/* =======================================================
KENNZAHLEN
======================================================= */
.ff-lf-facts {
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap: 6px;
margin:
0
0
14px;
}
.ff-lf-fact {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
gap: 8px;
min-height: 115px;
padding:
12px
5px;
text-align: center;
border-radius: 10px;
}
.ff-lf-fact-icon {
flex:
0
0
38px;
width: 38px;
height: 38px;
}
.ff-lf-fact-icon span {
font-size: .72rem;
}
.ff-lf-fact-label {
margin-bottom: 3px;
font-size: .55rem;
letter-spacing: .06em;
}
.ff-lf-fact-content strong {
font-size: .82rem;
line-height: 1.2;
}
.ff-lf-fact-content small {
margin-top: 3px;
font-size: .67rem;
line-height: 1.2;
}
/* =======================================================
FAHRZEUG
======================================================= */
.ff-lf-interactive {
display: block;
width: 100%;
padding:
18px
2px
15px;
background: #f7f7f7;
border-radius: 13px;
}
.ff-lf-info-panel {
display: none;
}
.ff-lf-vehicle-column {
width: 100%;
}
.ff-lf-image-stage {
width: 100%;
max-width: none;
margin: 0;
}
.ff-lf-vehicle-image {
display: block;
width: 100%;
height: auto;
max-width: none;
margin: 0;
object-fit: contain;
}
/* =======================================================
HOTSPOTS HANDY
======================================================= */
.ff-lf-hotspot {
width: 21px;
height: 21px;
border-width: 3px;
box-shadow:
0 0 0 2px rgba(193,18,31,.25),
0 2px 7px rgba(0,0,0,.22);
}
.ff-lf-hotspot::before {
inset: -6px;
}
.ff-lf-hotspot::after {
width: 4px;
height: 4px;
}
.ff-lf-image-help {
margin-top: 12px;
padding:
0
10px;
font-size: .72rem;
}
/* =======================================================
DATEN
======================================================= */
.ff-lf-data {
margin-top: 32px;
padding:
0
4px;
}
.ff-lf-section-head {
margin-bottom: 15px;
}
.ff-lf-section-head h2 {
font-size: 1.42rem;
}
.ff-lf-data-table {
grid-template-columns: 1fr;
gap: 7px;
}
/*
Wichtig:
Beide Spalten dürfen schrumpfen.
Dadurch überschneiden sich z.B.
Höchstgeschwindigkeit und 100 km/h nicht mehr.
*/
.ff-lf-data-row {
display: grid;
grid-template-columns:
minmax(0, 42%)
minmax(0, 58%);
gap: 12px;
align-items: center;
min-height: 50px;
padding:
11px
12px;
}
.ff-lf-data-row strong {
min-width: 0;
color: #555;
font-size: .8rem;
line-height: 1.25;
overflow-wrap: anywhere;
word-break: normal;
}
.ff-lf-data-row span {
min-width: 0;
color: #222;
font-size: .82rem;
line-height: 1.3;
overflow-wrap: anywhere;
word-break: normal;
}
/* =======================================================
MOBILE OVERLAY
======================================================= */
.ff-lf-mobile-overlay {
position: fixed;
inset: 0;
display: block;
background:
rgba(0,0,0,.47);
opacity: 0;
visibility: hidden;
z-index: 9998;
transition:
opacity .25s ease,
visibility .25s ease;
}
.ff-lf-mobile-overlay.is-open {
opacity: 1;
visibility: visible;
}
/* =======================================================
MOBILE BOTTOM SHEET
======================================================= */
.ff-lf-mobile-sheet {
position: fixed;
left: 0;
right: 0;
bottom: 0;
display: block;
width: 100%;
max-height: 90vh;
padding:
36px
17px
calc(22px + env(safe-area-inset-bottom));
box-sizing: border-box;
overflow-x: hidden;
overflow-y: auto;
background: #fff;
border-radius:
22px
22px
0
0;
box-shadow:
0 -14px 42px rgba(0,0,0,.24);
transform:
translateY(105%);
transition:
transform .3s ease;
z-index: 9999;
}
.ff-lf-mobile-sheet.is-open {
transform:
translateY(0);
}
/* Griff oben */
.ff-lf-mobile-handle {
position: absolute;
top: 10px;
left: 50%;
width: 44px;
height: 4px;
transform:
translateX(-50%);
background: #cfcfcf;
border-radius: 10px;
}
/* Schließen */
.ff-lf-mobile-close {
position: absolute;
top: 17px;
right: 17px;
display: flex;
align-items: center;
justify-content: center;
width: 39px;
height: 39px;
padding: 0;
background: #f1f1f1;
color: #444;
border: 0;
border-radius: 50%;
font-size: 1.4rem;
cursor: pointer;
}
/* Kategorie */
.ff-lf-mobile-category {
display: block;
padding-right: 55px;
margin-bottom: 7px;
color: #c1121f;
font-size: .68rem;
font-weight: 800;
letter-spacing: .09em;
}
/* Titel */
.ff-lf-mobile-title {
margin:
0
52px
12px
0;
color: #222;
font-size: 1.5rem;
line-height: 1.2;
}
/* Text */
.ff-lf-mobile-text {
margin: 0;
color: #555;
font-size: .94rem;
line-height: 1.62;
}
/* =======================================================
FOTO IM MOBILE SHEET
======================================================= */
.ff-lf-mobile-image-wrap {
display: block;
width: 100%;
margin-top: 20px;
padding: 0;
box-sizing: border-box;
overflow: hidden;
background: transparent;
border: 0;
border-radius: 12px;
box-shadow:
0 5px 16px rgba(0,0,0,.1);
}
.ff-lf-mobile-image-wrap[hidden] {
display: none !important;
}
.ff-lf-mobile-image {
display: block;
width: 100%;
height: auto;
max-width: 100%;
max-height: none;
margin: 0;
object-fit: contain;
background: transparent;
border-radius: 12px;
}
}
/* =========================================================
SEHR KLEINE HANDYS
========================================================= */
@media (max-width: 420px) {
.ff-lf-page {
padding-left: 4px;
padding-right: 4px;
}
.ff-lf-interactive {
padding-left: 0;
padding-right: 0;
}
.ff-lf-hotspot {
width: 19px;
height: 19px;
}
.ff-lf-data-row {
grid-template-columns:
minmax(0, 44%)
minmax(0, 56%);
gap: 10px;
padding:
10px
9px;
}
.ff-lf-data-row strong {
font-size: .76rem;
}
.ff-lf-data-row span {
font-size: .79rem;
}
.ff-lf-mobile-sheet {
padding-left: 15px;
padding-right: 15px;
}
}
/* =========================================================
MTW – FAHRZEUGSPEZIFISCHE ANPASSUNGEN
========================================================= */
/*
Der MTW hat andere Proportionen als das LF.
Dadurch kann er etwas kompakter im Bildbereich sitzen.
*/
.ff-mtw-page .ff-lf-image-stage {
max-width: 1050px;
}
/*
Fahrzeugbild vollständig darstellen
*/
.ff-mtw-page .ff-lf-vehicle-image {
width: 100%;
height: auto;
object-fit: contain;
}
/*
MTW-Schrift im roten Kennzahlen-Kreis
etwas kleiner, damit sie sauber hineinpasst.
*/
.ff-mtw-page .ff-lf-fact-icon span {
font-size: .76rem;
}
/* =========================================================
MTW HANDY
========================================================= */
@media (max-width: 680px) {
.ff-mtw-page .ff-lf-image-stage {
width: 100%;
max-width: none;
}
.ff-mtw-page .ff-lf-vehicle-image {
width: 100%;
height: auto;
}
.ff-mtw-page .ff-lf-fact-icon span {
font-size: .6rem;
}
}
/* =========================================================
TECHNIK – FAHRZEUGÜBERSICHT
========================================================= */
#ff-tech-cards {
width: 100%;
max-width: 1450px;
margin: 0 auto;
padding:
20px
20px
0;
box-sizing: border-box;
}
/* =========================================================
ABSCHNITTE
========================================================= */
.ff-tech-section {
margin-bottom: 58px;
}
.ff-tech-section-head {
margin-bottom: 22px;
padding-left: 15px;
border-left:
4px
solid
#c1121f;
}
.ff-tech-kicker {
display: block;
margin-bottom: 4px;
color: #777;
font-size: .7rem;
font-weight: 800;
letter-spacing: .1em;
}
.ff-tech-section-head h2 {
margin: 0;
color: #222;
font-size:
clamp(1.7rem, 2.5vw, 2.2rem);
line-height: 1.2;
}
.ff-tech-section-head p {
margin:
7px
0
0;
color: #666;
font-size: .95rem;
line-height: 1.5;
}
/* =========================================================
GRID
========================================================= */
.ff-tech-grid {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 24px;
}
/* =========================================================
FAHRZEUGKARTE
========================================================= */
.ff-tech-card {
display: flex;
flex-direction: column;
min-width: 0;
overflow: hidden;
color: inherit;
text-decoration: none;
background: #fff;
border:
1px
solid
#e2e2e2;
border-radius: 16px;
box-shadow:
0 6px 22px rgba(0,0,0,.055);
transition:
transform .2s ease,
box-shadow .2s ease,
border-color .2s ease;
}
.ff-tech-card:hover {
transform:
translateY(-4px);
border-color:
#d6d6d6;
box-shadow:
0 10px 28px rgba(0,0,0,.08);
}
/* =========================================================
BILDBEREICH
========================================================= */
/*
WICHTIG:
kein cover, kein Abschneiden.
*/
.ff-tech-img {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
aspect-ratio: 16 / 10;
padding:
24px
26px
14px;
box-sizing: border-box;
overflow: hidden;
background:
#f7f7f7;
}
.ff-tech-img img {
display: block;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: contain;
object-position: center;
transition:
transform .25s ease;
}
.ff-tech-card:hover .ff-tech-img img {
transform:
scale(1.025);
}
/* =========================================================
KARTENINHALT
========================================================= */
.ff-tech-body {
position: relative;
padding:
20px
22px
23px;
border-top:
1px
solid
#ececec;
}
.ff-tech-body h3 {
margin:
6px
0
5px;
color: #222;
font-size: 1.45rem;
line-height: 1.2;
}
.ff-tech-body p {
margin: 0;
color: #666;
font-size: .93rem;
line-height: 1.5;
}
/* =========================================================
STATUS
========================================================= */
.ff-tech-status {
display: inline-flex;
align-items: center;
min-height: 24px;
padding:
4px
9px;
box-sizing: border-box;
border-radius: 20px;
font-size: .61rem;
font-weight: 800;
letter-spacing: .08em;
line-height: 1;
}
/* Im Dienst */
.ff-tech-status-active {
color: #15713a;
background:
#eaf6ee;
}
/* Außer Dienst */
.ff-tech-status-retired {
color: #666;
background:
#eeeeee;
}
/* =========================================================
AUSSER-DIENST-BEREICH
========================================================= */
.ff-tech-section-retired {
margin-top: 66px;
}
.ff-tech-section-retired .ff-tech-section-head {
border-left-color:
#888;
}
.ff-tech-section-retired .ff-tech-kicker {
color: #888;
}
/*
Ehemalige Fahrzeuge bewusst etwas ruhiger darstellen,
aber NICHT ausgegraut.
*/
.ff-tech-card-retired {
background:
#fbfbfb;
}
.ff-tech-card-retired .ff-tech-img {
background:
#f3f3f3;
}
/* =========================================================
FOOTER ABSTAND
========================================================= */
.ff-tech-footer-space {
height: 120px;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 900px) {
#ff-tech-cards {
padding-left: 14px;
padding-right: 14px;
}
.ff-tech-grid {
gap: 16px;
}
.ff-tech-img {
aspect-ratio: 16 / 11;
padding:
18px
18px
10px;
}
.ff-tech-body {
padding:
17px
18px
19px;
}
.ff-tech-body h3 {
font-size: 1.3rem;
}
}
/* =========================================================
HANDY
========================================================= */
@media (max-width: 680px) {
#ff-tech-cards {
padding:
10px
7px
0;
}
.ff-tech-section {
margin-bottom: 42px;
}
.ff-tech-section-retired {
margin-top: 46px;
}
.ff-tech-section-head {
margin-bottom: 15px;
padding-left: 11px;
}
.ff-tech-section-head h2 {
font-size: 1.55rem;
}
.ff-tech-section-head p {
font-size: .85rem;
}
/*
Mobil untereinander.
*/
.ff-tech-grid {
grid-template-columns: 1fr;
gap: 14px;
}
/*
Fahrzeug bekommt auch mobil viel Platz,
bleibt aber vollständig sichtbar.
*/
.ff-tech-img {
aspect-ratio: 16 / 10;
padding:
16px
14px
8px;
}
.ff-tech-img img {
width: 100%;
height: 100%;
object-fit: contain;
}
.ff-tech-body {
padding:
15px
17px
18px;
}
.ff-tech-body h3 {
margin-top: 5px;
font-size: 1.25rem;
}
.ff-tech-body p {
font-size: .86rem;
}
.ff-tech-footer-space {
height: 80px;
}
}
/* =========================================================
TSF-W – FAHRZEUGSPEZIFISCH
========================================================= */
.ff-tsfw-page .ff-lf-image-stage {
max-width: 1080px;
}
.ff-tsfw-page .ff-lf-vehicle-image {
width: 100%;
height: auto;
object-fit: contain;
}
/* Außer-Dienst-Karte etwas ruhiger */
.ff-tsfw-page .ff-tsfw-status-icon {
background: #777;
box-shadow:
0 4px 12px rgba(0,0,0,.12);
}
/*
Der historische Status darf sich optisch
leicht von den aktiven Fahrzeugen absetzen.
*/
.ff-tsfw-page .ff-tsfw-status-card {
background: #fafafa;
}
/* =========================================================
HANDY
========================================================= */
@media (max-width: 680px) {
.ff-tsfw-page .ff-lf-image-stage {
width: 100%;
max-width: none;
}
.ff-tsfw-page .ff-lf-vehicle-image {
width: 100%;
height: auto;
}
.ff-tsfw-page .ff-tsfw-status-icon span {
font-size: .62rem;
}
}
/* =========================================================
TECHNIK – FAHRZEUGBILDER
Fahrzeuge vollständig anzeigen
========================================================= */
.ff-tech-img {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 440px;
padding: 45px 35px;
box-sizing: border-box;
background: #f7f7f7;
overflow: hidden;
}
/* Fahrzeug niemals beschneiden */
.ff-tech-img img {
display: block;
width: auto !important;
height: auto !important;
max-width: 92% !important;
max-height: 350px !important;
margin: auto;
object-fit: contain !important;
object-position: center center !important;
transform: none;
}
/* Beim Hover NICHT vergrößern,
sonst können Räder/Blaulichter wieder abgeschnitten werden */
.ff-tech-card:hover .ff-tech-img img {
transform: none;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 900px) {
.ff-tech-img {
min-height: 370px;
padding: 35px 25px;
}
.ff-tech-img img {
max-width: 92% !important;
max-height: 300px !important;
}
}
/* =========================================================
HANDY
========================================================= */
@media (max-width: 680px) {
.ff-tech-img {
min-height: 290px;
padding: 28px 18px;
}
.ff-tech-img img {
width: auto !important;
height: auto !important;
max-width: 94% !important;
max-height: 235px !important;
object-fit: contain !important;
}
}
/* =========================================================
KLEINE HANDYS
========================================================= */
@media (max-width: 420px) {
.ff-tech-img {
min-height: 245px;
padding: 24px 14px;
}
.ff-tech-img img {
max-width: 94% !important;
max-height: 195px !important;
}
}
.ff-back-button {
position: fixed;
left: 22px;
bottom: 22px;
z-index: 9999;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 18px;
color: #fff;
background: #c1121f;
border: 0;
border-radius: 999px;
font-size: .92rem;
font-weight: 700;
box-shadow: 0 6px 18px rgba(0,0,0,.18);
cursor: pointer;
transition:
transform .2s ease,
box-shadow .2s ease,
background .2s ease;
}
.ff-back-button:hover {
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(0,0,0,.22);
background: #a90f1a;
}
@media (max-width: 680px) {
.ff-back-button {
left: 14px;
bottom: 14px;
padding: 10px 14px;
font-size: .84rem;
}
}
/* =========================================================
LF 10 – INFO-MODALS: BESATZUNG / FUNKRUFNAME / FAHRZEUGTYP
Gemeinsame Basis, spezifische Inhalte getrennt
========================================================= */
/* Klickbare Kennzahlenkarten */
.ff-crew-trigger,
.ff-radio-trigger,
.ff-type-trigger {
position: relative;
cursor: pointer;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s
ease;
}
.ff-crew-trigger:hover,
.ff-radio-trigger:hover,
.ff-type-trigger:hover {
transform: translateY(-3px);
border-color: rgba(193,18,31,.28);
box-shadow: 0 9px 25px rgba(0,0,0,.09);
}
.ff-crew-hint,
.ff-radio-hint,
.ff-type-hint {
display: block;
margin-top: 5px;
color: #c1121f;
font-size: .65rem;
font-weight: 700;
letter-spacing: .03em;
}
/* Gemeinsames Overlay */
.ff-crew-overlay,
.ff-radio-overlay,
.ff-type-overlay {
position: fixed;
inset: 0;
z-index: 20000;
display: flex;
align-items: center;
justify-content: center;
padding: 25px;
box-sizing: border-box;
background: rgba(0,0,0,.58);
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
opacity: 0;
visibility: hidden;
transition: opacity .3s ease, visibility .3s ease;
}
.ff-crew-overlay.is-open,
.ff-radio-overlay.is-open,
.ff-type-overlay.is-open {
opacity: 1;
visibility: visible;
}
/* Gemeinsame Modal-Basis */
.ff-crew-modal,
.ff-radio-modal,
.ff-type-modal {
position: relative;
width: 100%;
padding: 45px 40px 38px;
box-sizing: border-box;
text-align: center;
background: #fff;
border-top: 5px solid #c1121f;
border-radius: 18px;
box-shadow: 0 25px 70px rgba(0,0,0,.25);
opacity: 0;
transform: translateY(25px) scale(.96);
}
.ff-crew-modal { max-width: 950px; }
.ff-radio-modal { max-width: 850px; }
.ff-type-modal { max-width: 1050px; }
.ff-crew-overlay.is-open .ff-crew-modal,
.ff-radio-overlay.is-open .ff-radio-modal,
.ff-type-overlay.is-open .ff-type-modal {
animation: ffLfModalOpen .45s ease forwards;
}
@keyframes ffLfModalOpen {
from { opacity: 0; transform: translateY(25px) scale(.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Schließen */
.ff-crew-close,
.ff-radio-close,
.ff-type-close {
position: absolute;
top: 15px;
right: 17px;
width: 38px;
height: 38px;
padding: 0;
color: #555;
background: #f1f1f1;
border: 0;
border-radius: 50%;
font-size: 1.6rem;
line-height: 1;
cursor: pointer;
transition: background .2s ease, color .2s ease, transform .2s ease;
}
.ff-crew-close:hover,
.ff-radio-close:hover,
.ff-type-close:hover {
color: #fff;
background: #c1121f;
transform: rotate(90deg);
}
/* Kicker + Ãœberschriften */
.ff-crew-kicker,
.ff-radio-kicker,
.ff-type-kicker {
display: block;
margin-bottom: 7px;
color: #c1121f;
font-size: .68rem;
font-weight: 800;
letter-spacing: .12em;
}
.ff-crew-modal h2,
.ff-radio-modal h2,
.ff-type-modal > h2 {
margin: 0 0 38px;
color: #222;
font-size: clamp(1.6rem,3vw,2.3rem);
line-height: 1.2;
}
/* Gemeinsame Ergebniszeile */
.ff-crew-result,
.ff-radio-result,
.ff-type-result {
margin-top: 35px;
padding-top: 22px;
border-top: 1px solid #e5e5e5;
opacity: 0;
transform: translateY(8px);
}
.ff-crew-result > span,
.ff-radio-result > span,
.ff-type-result > span {
display: block;
margin-bottom: 5px;
color: #888;
font-size: .72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
}
.ff-crew-result > strong,
.ff-radio-result > strong,
.ff-type-result > strong {
color: #222;
font-size: 1.05rem;
line-height: 1.4;
}
/* =========================================================
FUNKRUFNAME – DESKTOP
========================================================= */
.ff-radio-code {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 18px;
width: 100%;
}
.ff-radio-part {
flex: 1 1 0;
max-width: 210px;
opacity: 0;
transform: translateY(20px);
}
.ff-radio-part > strong {
display: flex;
align-items: center;
justify-content: center;
width: 92px;
height: 92px;
margin: 0 auto;
color: #fff;
background: #c1121f;
border-radius: 50%;
font-size: 2rem;
font-weight: 800;
box-shadow: 0 8px 20px rgba(193,18,31,.23);
}
.ff-radio-separator {
padding-top: 24px;
color: #999;
font-size: 1.7rem;
font-weight: 700;
opacity: 0;
}
.ff-radio-line {
display: block;
width: 2px;
height: 34px;
margin: 0 auto;
background: #c1121f;
transform: scaleY(0);
transform-origin: top;
}
.ff-radio-description {
min-height: 105px;
padding: 12px 8px;
box-sizing: border-box;
opacity: 0;
transform: translateY(8px);
}
.ff-radio-description b,
.ff-radio-description span { display: block; }
.ff-radio-description b {
margin-bottom: 4px;
color: #c1121f;
font-size: .64rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.ff-radio-description span {
color: #333;
font-size: .82rem;
line-height: 1.35;
}
.ff-radio-overlay.is-open .ff-radio-part-1 { animation: ffLfPartIn .4s
.35s ease forwards; }
.ff-radio-overlay.is-open .ff-radio-part-2 { animation: ffLfPartIn .4s
.65s ease forwards; }
.ff-radio-overlay.is-open .ff-radio-part-3 { animation: ffLfPartIn .4s
.95s ease forwards; }
.ff-radio-overlay.is-open .ff-radio-separator { animation: ffLfFade .3s
.55s ease forwards; }
.ff-radio-overlay.is-open .ff-radio-part-1 .ff-radio-line { animation:
ffLfLine .3s .65s ease forwards; }
.ff-radio-overlay.is-open .ff-radio-part-2 .ff-radio-line { animation:
ffLfLine .3s .95s ease forwards; }
.ff-radio-overlay.is-open .ff-radio-part-3 .ff-radio-line { animation:
ffLfLine .3s 1.25s ease forwards; }
.ff-radio-overlay.is-open .ff-radio-part-1 .ff-radio-description {
animation: ffLfText .35s .85s ease forwards; }
.ff-radio-overlay.is-open .ff-radio-part-2 .ff-radio-description {
animation: ffLfText .35s 1.15s ease forwards; }
.ff-radio-overlay.is-open .ff-radio-part-3 .ff-radio-description {
animation: ffLfText .35s 1.45s ease forwards; }
.ff-radio-overlay.is-open .ff-radio-result { animation: ffLfText .4s
1.75s ease forwards; }
/* =========================================================
BESATZUNG – DESKTOP
========================================================= */
.ff-crew-code {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 12px;
width: 100%;
}
.ff-crew-part {
flex: 1 1 0;
max-width: 190px;
opacity: 0;
transform: translateY(20px);
}
.ff-crew-part > strong {
display: flex;
align-items: center;
justify-content: center;
width: 82px;
height: 82px;
margin: 0 auto;
color: #fff;
background: #c1121f;
border-radius: 50%;
font-size: 2rem;
font-weight: 800;
box-shadow: 0 8px 20px rgba(193,18,31,.23);
}
.ff-crew-separator {
padding-top: 22px;
color: #999;
font-size: 1.5rem;
font-weight: 700;
opacity: 0;
}
.ff-crew-line {
display: block;
width: 2px;
height: 32px;
margin: 0 auto;
background: #c1121f;
transform: scaleY(0);
transform-origin: top;
}
.ff-crew-description {
min-height: 105px;
padding: 12px 8px;
box-sizing: border-box;
opacity: 0;
transform: translateY(8px);
}
.ff-crew-description b,
.ff-crew-description span { display: block; }
.ff-crew-description b {
margin-bottom: 4px;
color: #c1121f;
font-size: .62rem;
font-weight: 800;
letter-spacing: .07em;
text-transform: uppercase;
}
.ff-crew-description span {
color: #333;
font-size: .8rem;
line-height: 1.35;
}
.ff-crew-overlay.is-open .ff-crew-part-1 { animation: ffLfPartIn .4s
.30s ease forwards; }
.ff-crew-overlay.is-open .ff-crew-part-2 { animation: ffLfPartIn .4s
.55s ease forwards; }
.ff-crew-overlay.is-open .ff-crew-part-3 { animation: ffLfPartIn .4s
.80s ease forwards; }
.ff-crew-overlay.is-open .ff-crew-part-4 { animation: ffLfPartIn .4s
1.05s ease forwards; }
.ff-crew-overlay.is-open .ff-crew-separator { animation: ffLfFade .3s
.48s ease forwards; }
.ff-crew-overlay.is-open .ff-crew-part-1 .ff-crew-line { animation:
ffLfLine .3s .58s ease forwards; }
.ff-crew-overlay.is-open .ff-crew-part-2 .ff-crew-line { animation:
ffLfLine .3s .83s ease forwards; }
.ff-crew-overlay.is-open .ff-crew-part-3 .ff-crew-line { animation:
ffLfLine .3s 1.08s ease forwards; }
.ff-crew-overlay.is-open .ff-crew-part-4 .ff-crew-line { animation:
ffLfLine .3s 1.33s ease forwards; }
.ff-crew-overlay.is-open .ff-crew-part-1 .ff-crew-description {
animation: ffLfText .35s .78s ease forwards; }
.ff-crew-overlay.is-open .ff-crew-part-2 .ff-crew-description {
animation: ffLfText .35s 1.03s ease forwards; }
.ff-crew-overlay.is-open .ff-crew-part-3 .ff-crew-description {
animation: ffLfText .35s 1.28s ease forwards; }
.ff-crew-overlay.is-open .ff-crew-part-4 .ff-crew-description {
animation: ffLfText .35s 1.53s ease forwards; }
.ff-crew-overlay.is-open .ff-crew-result { animation: ffLfText .4s 1.8s
ease forwards; }
/* =========================================================
FAHRZEUGTYP LF 10 – DESKTOP
========================================================= */
.ff-type-intro {
margin: -28px 0 32px;
color: #777;
font-size: .9rem;
}
.ff-type-grid {
display: grid;
grid-template-columns: repeat(3,minmax(0,1fr));
gap: 16px;
}
.ff-type-item {
min-width: 0;
padding: 24px 19px 20px;
box-sizing: border-box;
text-align: center;
background: #f7f7f7;
border: 1px solid #ececec;
border-radius: 14px;
opacity: 0;
transform: translateY(24px);
}
.ff-type-number {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 88px;
height: 88px;
margin: 0 auto 17px;
box-sizing: border-box;
color: #fff;
background: #c1121f;
border-radius: 50%;
font-size: 1.55rem;
font-weight: 800;
line-height: 1;
box-shadow: 0 8px 20px rgba(193,18,31,.23);
}
.ff-type-number small {
display: block;
margin-top: 4px;
color: rgba(255,255,255,.9);
font-size: .54rem;
font-weight: 700;
text-transform: uppercase;
}
.ff-type-item-label {
display: block;
margin-bottom: 5px;
color: #c1121f;
font-size: .61rem;
font-weight: 800;
letter-spacing: .09em;
}
.ff-type-item h3 {
margin: 0 0 10px;
color: #222;
font-size: 1.05rem;
line-height: 1.25;
}
.ff-type-item p {
margin: 0 0 15px;
color: #666;
font-size: .83rem;
line-height: 1.5;
}
.ff-type-item-content > strong {
display: block;
padding-top: 12px;
color: #333;
border-top: 1px solid #ddd;
font-size: .76rem;
line-height: 1.4;
}
.ff-type-overlay.is-open .ff-type-item-1 { animation: ffLfPartIn .45s
.30s ease forwards; }
.ff-type-overlay.is-open .ff-type-item-2 { animation: ffLfPartIn .45s
.55s ease forwards; }
.ff-type-overlay.is-open .ff-type-item-3 { animation: ffLfPartIn .45s
.80s ease forwards; }
.ff-type-overlay.is-open .ff-type-result { animation: ffLfText .4s 1.1s
ease forwards; }
/* Gemeinsame Keyframes */
@keyframes ffLfPartIn {
to { opacity: 1; transform: translateY(0); }
}
@keyframes ffLfFade {
to { opacity: 1; }
}
@keyframes ffLfLine {
to { transform: scaleY(1); }
}
@keyframes ffLfText {
to { opacity: 1; transform: translateY(0); }
}
/* =========================================================
MOBILE – ALLE DREI INFO-MODALS
========================================================= */
@media (max-width: 680px) {
.ff-crew-overlay,
.ff-radio-overlay,
.ff-type-overlay {
align-items: flex-end;
padding: 6px;
}
.ff-crew-modal,
.ff-radio-modal,
.ff-type-modal {
width: 100%;
max-width: 100%;
max-height: 94vh;
padding: 32px 12px 22px;
overflow-x: hidden;
overflow-y: auto;
border-radius: 18px 18px 10px 10px;
}
.ff-crew-modal h2,
.ff-radio-modal h2,
.ff-type-modal > h2 {
margin: 0 30px 25px;
font-size: 1.35rem;
line-height: 1.25;
}
.ff-crew-kicker,
.ff-radio-kicker,
.ff-type-kicker {
font-size: .58rem;
letter-spacing: .09em;
}
/* Besatzung: breite Zeilen statt gequetschter Spalten */
.ff-crew-code {
display: flex;
flex-direction: column;
gap: 8px;
}
.ff-crew-part {
display: grid;
grid-template-columns: 58px minmax(0,1fr);
align-items: center;
gap: 14px;
width: 100%;
max-width: none;
padding: 9px;
box-sizing: border-box;
background: #f7f7f7;
border-radius: 12px;
opacity: 0;
transform: translateX(-15px);
}
.ff-crew-part > strong {
width: 52px;
height: 52px;
margin: 0;
font-size: 1.3rem;
}
.ff-crew-line,
.ff-crew-separator { display: none; }
.ff-crew-description {
width: auto;
min-width: 0;
min-height: 0;
padding: 0;
text-align: left;
opacity: 1;
transform: none;
}
.ff-crew-description b {
margin-bottom: 3px;
font-size: .68rem;
line-height: 1.2;
letter-spacing: .04em;
}
.ff-crew-description span {
font-size: .82rem;
font-weight: 600;
line-height: 1.35;
}
.ff-crew-overlay.is-open .ff-crew-part-1 { animation: ffLfMobileRow .4s
.25s ease forwards; }
.ff-crew-overlay.is-open .ff-crew-part-2 { animation: ffLfMobileRow .4s
.45s ease forwards; }
.ff-crew-overlay.is-open .ff-crew-part-3 { animation: ffLfMobileRow .4s
.65s ease forwards; }
.ff-crew-overlay.is-open .ff-crew-part-4 { animation: ffLfMobileRow .4s
.85s ease forwards; }
/* Funkrufname: drei kompakte Spalten */
.ff-radio-code {
display: grid;
grid-template-columns: minmax(0,1fr) 12px minmax(0,1fr) 12px
minmax(0,1fr);
gap: 3px;
align-items: start;
}
.ff-radio-part {
width: 100%;
min-width: 0;
max-width: none;
}
.ff-radio-part > strong {
width: 58px;
height: 58px;
font-size: 1.35rem;
}
.ff-radio-separator {
width: 12px;
padding-top: 16px;
text-align: center;
font-size: 1.1rem;
}
.ff-radio-line { height: 22px; }
.ff-radio-description {
width: 100%;
min-width: 0;
min-height: 90px;
padding: 9px 3px;
overflow: hidden;
}
.ff-radio-description b {
font-size: .49rem;
letter-spacing: 0;
overflow-wrap: anywhere;
}
.ff-radio-description span {
font-size: .64rem;
line-height: 1.25;
overflow-wrap: anywhere;
}
/* Fahrzeugtyp: drei breite Zeilen */
.ff-type-intro {
margin: -17px 0 22px;
font-size: .78rem;
}
.ff-type-grid {
display: flex;
flex-direction: column;
gap: 9px;
}
.ff-type-item {
display: grid;
grid-template-columns: 66px minmax(0,1fr);
gap: 13px;
align-items: center;
width: 100%;
padding: 11px;
text-align: left;
border-radius: 12px;
transform: translateX(-15px);
}
.ff-type-number {
width: 60px;
height: 60px;
margin: 0;
font-size: 1.05rem;
}
.ff-type-number small { font-size: .44rem; }
.ff-type-item-content { min-width: 0; }
.ff-type-item-label { margin-bottom: 2px; font-size: .52rem; }
.ff-type-item h3 { margin-bottom: 4px; font-size: .9rem; }
.ff-type-item p { margin-bottom: 6px; font-size: .7rem; line-height:
1.35; }
.ff-type-item-content > strong { padding-top: 6px; font-size: .65rem;
line-height: 1.3; }
.ff-type-overlay.is-open .ff-type-item-1 { animation: ffLfMobileRow .4s
.25s ease forwards; }
.ff-type-overlay.is-open .ff-type-item-2 { animation: ffLfMobileRow .4s
.45s ease forwards; }
.ff-type-overlay.is-open .ff-type-item-3 { animation: ffLfMobileRow .4s
.65s ease forwards; }
.ff-crew-result,
.ff-radio-result,
.ff-type-result {
margin-top: 20px;
padding-top: 17px;
}
.ff-crew-result > span,
.ff-radio-result > span,
.ff-type-result > span { font-size: .61rem; }
.ff-crew-result > strong,
.ff-radio-result > strong,
.ff-type-result > strong {
display: block;
font-size: .84rem;
line-height: 1.4;
}
}
@keyframes ffLfMobileRow {
from { opacity: 0; transform: translateX(-15px); }
to { opacity: 1; transform: translateX(0); }
}
@media (max-width: 380px) {
.ff-crew-modal,
.ff-radio-modal,
.ff-type-modal {
padding-left: 8px;
padding-right: 8px;
}
.ff-radio-code {
grid-template-columns: minmax(0,1fr) 9px minmax(0,1fr) 9px
minmax(0,1fr);
gap: 2px;
}
.ff-radio-part > strong {
width: 52px;
height: 52px;
font-size: 1.2rem;
}
.ff-radio-separator {
width: 9px;
padding-top: 14px;
font-size: .95rem;
}
}
@media (prefers-reduced-motion: reduce) {
.ff-crew-modal,
.ff-radio-modal,
.ff-type-modal,
.ff-crew-part,
.ff-radio-part,
.ff-type-item,
.ff-crew-separator,
.ff-radio-separator,
.ff-crew-line,
.ff-radio-line,
.ff-crew-description,
.ff-radio-description,
.ff-crew-result,
.ff-radio-result,
.ff-type-result {
animation-duration: .01ms !important;
animation-delay: 0s !important;
}
}
/* =========================================================
FAHRZEUGE – GEMEINSAMES INFO-MODAL
LF 10 / MTW / TSF-W
========================================================= */
/* =========================================================
KLICKBARER INFO-BLOCK
========================================================= */
.ff-vehicle-trigger {
position: relative;
cursor: pointer;
transition:
transform .2s ease,
box-shadow .2s ease,
border-color .2s ease;
}
.ff-vehicle-trigger:hover {
transform: translateY(-3px);
border-color:
rgba(193,18,31,.28);
box-shadow:
0 9px 25px rgba(0,0,0,.09);
}
.ff-vehicle-trigger:focus-visible {
outline:
3px solid rgba(193,18,31,.22);
outline-offset: 3px;
}
.ff-vehicle-hint {
display: block;
margin-top: 5px;
color: #c1121f;
font-size: .65rem;
font-weight: 700;
}
/* =========================================================
OVERLAY
========================================================= */
.ff-vehicle-modal-overlay {
position: fixed;
inset: 0;
z-index: 20000;
display: flex;
align-items: center;
justify-content: center;
padding: 25px;
box-sizing: border-box;
background:
rgba(0,0,0,.58);
backdrop-filter:
blur(7px);
-webkit-backdrop-filter:
blur(7px);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity .3s ease,
visibility .3s ease;
}
.ff-vehicle-modal-overlay.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* =========================================================
MODAL
========================================================= */
.ff-vehicle-modal {
position: relative;
width: 100%;
max-width: 1000px;
max-height: 92vh;
padding:
45px
40px
36px;
box-sizing: border-box;
overflow-y: auto;
text-align: center;
background: #fff;
border-top:
5px solid #c1121f;
border-radius: 18px;
box-shadow:
0 25px 70px rgba(0,0,0,.25);
opacity: 0;
transform:
translateY(25px)
scale(.96);
}
.ff-vehicle-modal-overlay.is-open
.ff-vehicle-modal {
animation:
ffVehicleModalOpen
.45s
ease
forwards;
}
@keyframes ffVehicleModalOpen {
from {
opacity: 0;
transform:
translateY(25px)
scale(.96);
}
to {
opacity: 1;
transform:
translateY(0)
scale(1);
}
}
/* =========================================================
SCHLIESSEN
========================================================= */
.ff-vehicle-modal-close {
position: absolute;
top: 15px;
right: 17px;
width: 38px;
height: 38px;
padding: 0;
color: #555;
background: #f1f1f1;
border: 0;
border-radius: 50%;
font-size: 1.6rem;
line-height: 1;
cursor: pointer;
transition:
background .2s ease,
color .2s ease,
transform .2s ease;
}
.ff-vehicle-modal-close:hover {
color: #fff;
background: #c1121f;
transform:
rotate(90deg);
}
/* =========================================================
KOPF
========================================================= */
.ff-vehicle-modal-kicker {
display: block;
margin-bottom: 7px;
color: #c1121f;
font-size: .68rem;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
}
.ff-vehicle-modal h2 {
margin: 0;
color: #222;
font-size:
clamp(1.6rem,3vw,2.3rem);
line-height: 1.2;
}
.ff-vehicle-modal-intro {
max-width: 760px;
margin:
8px auto 30px;
color: #777;
font-size: .9rem;
line-height: 1.5;
}
/* =========================================================
FAKTEN
========================================================= */
.ff-vehicle-modal-grid {
display: grid;
grid-template-columns:
repeat(3,minmax(0,1fr));
gap: 15px;
width: 100%;
}
.ff-vehicle-modal-grid.cols-4 {
grid-template-columns:
repeat(4,minmax(0,1fr));
}
.ff-vehicle-modal-item {
min-width: 0;
padding:
22px 18px 20px;
box-sizing: border-box;
background: #f7f7f7;
border:
1px solid #ececec;
border-radius: 14px;
opacity: 0;
transform:
translateY(20px);
}
/* =========================================================
ROTES KENNZEICHEN
========================================================= */
.ff-vehicle-modal-badge {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 92px;
min-width: 92px;
height: 72px;
margin:
0 auto 16px;
padding:
0 10px;
box-sizing: border-box;
color: #fff;
background: #c1121f;
border-radius: 999px;
font-size: 1.55rem;
font-weight: 800;
line-height: 1;
box-shadow:
0 8px 20px rgba(193,18,31,.23);
}
.ff-vehicle-modal-badge.wide {
width: 112px;
min-width: 112px;
font-size: 1.15rem;
}
.ff-vehicle-modal-badge small {
display: block;
margin-top: 4px;
color:
rgba(255,255,255,.9);
font-size: .5rem;
font-weight: 700;
text-transform: uppercase;
}
/* =========================================================
TEXTE
========================================================= */
.ff-vehicle-modal-label {
display: block;
margin-bottom: 5px;
color: #c1121f;
font-size: .61rem;
font-weight: 800;
letter-spacing: .09em;
text-transform: uppercase;
}
.ff-vehicle-modal-item h3 {
margin:
0 0 9px;
color: #222;
font-size: 1rem;
line-height: 1.3;
}
.ff-vehicle-modal-item p {
margin: 0;
color: #555;
font-size: .82rem;
line-height: 1.5;
}
.ff-vehicle-modal-note {
display: block;
margin-top: 12px;
padding-top: 11px;
color: #333;
border-top:
1px solid #ddd;
font-size: .75rem;
line-height: 1.4;
}
/* =========================================================
ANIMATION
========================================================= */
.ff-vehicle-modal-overlay.is-open
.ff-vehicle-modal-item:nth-child(1) {
animation:
ffVehicleItemIn
.42s
.25s
ease
forwards;
}
.ff-vehicle-modal-overlay.is-open
.ff-vehicle-modal-item:nth-child(2) {
animation:
ffVehicleItemIn
.42s
.45s
ease
forwards;
}
.ff-vehicle-modal-overlay.is-open
.ff-vehicle-modal-item:nth-child(3) {
animation:
ffVehicleItemIn
.42s
.65s
ease
forwards;
}
.ff-vehicle-modal-overlay.is-open
.ff-vehicle-modal-item:nth-child(4) {
animation:
ffVehicleItemIn
.42s
.85s
ease
forwards;
}
@keyframes ffVehicleItemIn {
from {
opacity: 0;
transform:
translateY(20px);
}
to {
opacity: 1;
transform:
translateY(0);
}
}
/* =========================================================
ERGEBNIS
========================================================= */
.ff-vehicle-modal-result {
margin-top: 27px;
padding-top: 20px;
border-top:
1px solid #e5e5e5;
opacity: 0;
transform:
translateY(8px);
}
.ff-vehicle-modal-overlay.is-open
.ff-vehicle-modal-result {
animation:
ffVehicleResultIn
.4s
1.05s
ease
forwards;
}
@keyframes ffVehicleResultIn {
to {
opacity: 1;
transform:
translateY(0);
}
}
.ff-vehicle-modal-result > span {
display: block;
margin-bottom: 5px;
color: #888;
font-size: .65rem;
font-weight: 800;
letter-spacing: .09em;
text-transform: uppercase;
}
.ff-vehicle-modal-result > strong {
color: #222;
font-size: 1rem;
line-height: 1.4;
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width:680px) {
.ff-vehicle-modal-overlay {
align-items: flex-end;
padding: 6px;
}
.ff-vehicle-modal {
width: 100%;
max-width: 100%;
max-height: 94vh;
padding:
34px
15px
22px;
overflow-x: hidden;
overflow-y: auto;
border-radius:
18px 18px 10px 10px;
}
.ff-vehicle-modal-kicker {
padding:
0 30px;
font-size: .56rem;
}
.ff-vehicle-modal h2 {
padding:
0 28px;
font-size: 1.35rem;
}
.ff-vehicle-modal-intro {
margin:
6px auto 20px;
font-size: .76rem;
}
.ff-vehicle-modal-grid,
.ff-vehicle-modal-grid.cols-4 {
display: flex;
flex-direction: column;
gap: 8px;
}
.ff-vehicle-modal-item {
display: grid;
grid-template-columns:
76px minmax(0,1fr);
gap: 12px;
align-items: center;
width: 100%;
padding: 10px;
text-align: left;
transform:
translateX(-15px);
}
.ff-vehicle-modal-badge,
.ff-vehicle-modal-badge.wide {
grid-row:
1 / span 4;
width: 68px;
min-width: 68px;
height: 58px;
margin: 0;
padding:
0 5px;
font-size: 1rem;
}
.ff-vehicle-modal-badge.wide {
font-size: .8rem;
}
.ff-vehicle-modal-label {
margin-bottom: 2px;
font-size: .52rem;
}
.ff-vehicle-modal-item h3 {
margin-bottom: 3px;
font-size: .88rem;
}
.ff-vehicle-modal-item p {
font-size: .7rem;
line-height: 1.35;
}
.ff-vehicle-modal-note {
margin-top: 5px;
padding-top: 5px;
font-size: .64rem;
}
.ff-vehicle-modal-result {
margin-top: 18px;
padding-top: 15px;
}
.ff-vehicle-modal-result > strong {
display: block;
font-size: .78rem;
line-height: 1.4;
}
}
/* =========================================================
BARRIEREARM
========================================================= */
@media (prefers-reduced-motion:reduce) {
.ff-vehicle-modal,
.ff-vehicle-modal-item,
.ff-vehicle-modal-result {
animation-duration:
.01ms !important;
animation-delay:
0s !important;
}
}
/* =========================================================
ÜBER UNS – NEUE ÜBERSICHT
========================================================= */
.ff-about-page {
width:100%;
max-width:1500px;
margin:0 auto;
padding:36px 24px 75px;
box-sizing:border-box;
}
/* =========================================================
KOPF
========================================================= */
.ff-about-head {
max-width:900px;
margin:0 auto 42px;
text-align:center;
}
.ff-about-kicker {
display:block;
margin-bottom:10px;
color:#c1121f;
font-size:.78rem;
font-weight:900;
letter-spacing:.16em;
text-transform:uppercase;
}
.ff-about-head h1 {
margin:0;
color:#171717;
font-size:clamp(2.2rem,5vw,4.2rem);
font-weight:900;
line-height:1.05;
letter-spacing:-.035em;
}
.ff-about-head p {
margin:15px 0 0;
color:#666;
font-size:1.05rem;
font-weight:600;
}
/* =========================================================
EINLEITUNG
========================================================= */
.ff-about-intro {
max-width:930px;
margin:0 auto 65px;
text-align:center;
}
.ff-about-intro blockquote {
position:relative;
margin:0 0 25px;
padding:25px 32px;
background:#f7f7f7;
border:0;
border-left:4px solid #c1121f;
border-radius:0 14px 14px 0;
color:#222;
font-size:clamp(1.05rem,2vw,1.25rem);
font-weight:700;
line-height:1.65;
text-align:left;
}
.ff-about-intro p {
max-width:800px;
margin:0 auto;
color:#555;
font-size:1rem;
line-height:1.75;
}
/* =========================================================
ABSCHNITTSKOPF
========================================================= */
.ff-about-sections {
margin-bottom:55px;
}
.ff-about-section-head {
margin-bottom:25px;
}
.ff-about-section-head > span {
display:block;
margin-bottom:7px;
color:#c1121f;
font-size:.73rem;
font-weight:900;
letter-spacing:.14em;
}
.ff-about-section-head h2 {
margin:0;
color:#171717;
font-size:clamp(1.65rem,3vw,2.35rem);
font-weight:900;
line-height:1.15;
}
.ff-about-section-head p {
margin:9px 0 0;
color:#666;
line-height:1.6;
}
/* =========================================================
KARTEN
========================================================= */
.ff-about-new-grid {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
}
.ff-about-new-card {
position:relative;
display:block;
min-height:340px;
overflow:hidden;
background:#222;
border-radius:17px;
box-shadow:0 7px 24px rgba(0,0,0,.09);
text-decoration:none !important;
isolation:isolate;
}
.ff-about-new-card-large {
grid-column:span 2;
}
.ff-about-new-image {
position:absolute;
inset:0;
z-index:0;
}
.ff-about-new-image img {
display:block;
width:100%;
height:100%;
object-fit:cover;
object-position:center;
transition:transform .55s ease;
}
.ff-about-new-overlay {
position:absolute;
inset:0;
z-index:1;
background:
linear-gradient(
to top,
rgba(0,0,0,.84) 0%,
rgba(0,0,0,.55) 40%,
rgba(0,0,0,.08) 78%,
rgba(0,0,0,.02) 100%
);
}
.ff-about-new-content {
position:absolute;
left:0;
right:0;
bottom:0;
z-index:2;
padding:27px;
color:#fff;
}
.ff-about-new-content > span {
display:block;
margin-bottom:6px;
color:#fff;
font-size:.69rem;
font-weight:900;
letter-spacing:.14em;
opacity:.78;
}
.ff-about-new-content h3 {
margin:0;
color:#fff;
font-size:clamp(1.35rem,2.2vw,1.85rem);
font-weight:900;
line-height:1.12;
}
.ff-about-new-content p {
max-width:500px;
margin:9px 0 15px;
color:rgba(255,255,255,.88);
font-size:.91rem;
line-height:1.5;
}
.ff-about-new-content > strong {
display:inline-flex;
align-items:center;
gap:8px;
color:#fff;
font-size:.84rem;
font-weight:800;
}
.ff-about-new-content > strong b {
color:#ff3945;
font-size:1.1rem;
transition:transform .25s ease;
}
/* HOVER */
.ff-about-new-card:hover .ff-about-new-image img {
transform:scale(1.045);
}
.ff-about-new-card:hover .ff-about-new-content > strong b {
transform:translateX(5px);
}
/* =========================================================
CHRONIK FEATURE
========================================================= */
.ff-about-history-feature {
position:relative;
display:grid;
grid-template-columns:minmax(220px,.75fr) minmax(0,1.6fr);
gap:50px;
align-items:center;
margin:65px 0 25px;
padding:50px 55px;
overflow:hidden;
background:#f7f7f7;
border:1px solid #e3e3e3;
border-top:4px solid #c1121f;
border-radius:18px;
box-shadow:0 7px 25px rgba(0,0,0,.04);
}
.ff-about-history-number {
color:#c1121f;
font-size:clamp(5rem,11vw,9rem);
font-weight:950;
line-height:.8;
letter-spacing:-.07em;
opacity:.11;
user-select:none;
}
.ff-about-history-text {
position:relative;
z-index:2;
}
.ff-about-history-kicker {
display:block;
margin-bottom:8px;
color:#c1121f;
font-size:.72rem;
font-weight:900;
letter-spacing:.15em;
}
.ff-about-history-text h2 {
margin:0 0 17px;
color:#171717;
font-size:clamp(1.7rem,3vw,2.5rem);
font-weight:900;
line-height:1.15;
}
.ff-about-history-text p {
max-width:750px;
margin:0 0 12px;
color:#555;
line-height:1.7;
}
.ff-about-history-link {
display:inline-flex;
align-items:center;
gap:13px;
margin-top:15px;
padding:13px 20px;
background:#c1121f;
color:#fff !important;
border-radius:999px;
font-size:.9rem;
font-weight:800;
text-decoration:none !important;
transition:
transform .2s ease,
box-shadow .2s ease,
background .2s ease;
}
.ff-about-history-link b {
font-size:1.15rem;
transition:transform .2s ease;
}
.ff-about-history-link:hover {
background:#a90f1a;
transform:translateY(-2px);
box-shadow:0 7px 18px rgba(193,18,31,.2);
}
.ff-about-history-link:hover b {
transform:translateX(4px);
}
/* =========================================================
ABSCHLUSS
========================================================= */
.ff-about-final {
margin-top:55px;
padding:45px 25px;
text-align:center;
}
.ff-about-final > span {
display:block;
margin-bottom:8px;
color:#c1121f;
font-size:.72rem;
font-weight:900;
letter-spacing:.17em;
}
.ff-about-final h2 {
margin:0;
color:#171717;
font-size:clamp(1.8rem,4vw,3rem);
font-weight:900;
line-height:1.1;
}
.ff-about-final p {
margin:10px 0 0;
color:#777;
font-size:1rem;
font-weight:600;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width:1000px) {
.ff-about-new-grid {
grid-template-columns:repeat(2,minmax(0,1fr));
}
.ff-about-new-card-large {
grid-column:span 2;
}
.ff-about-history-feature {
grid-template-columns:180px minmax(0,1fr);
gap:30px;
padding:42px 35px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width:680px) {
.ff-about-page {
padding:25px 14px 55px;
}
.ff-about-head {
margin-bottom:30px;
}
.ff-about-head p {
font-size:.91rem;
line-height:1.5;
}
.ff-about-intro {
margin-bottom:45px;
}
.ff-about-intro blockquote {
padding:20px 20px;
font-size:.98rem;
}
/* Karten bleiben zweispaltig */
.ff-about-new-grid {
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
}
.ff-about-new-card,
.ff-about-new-card-large {
grid-column:span 1;
min-height:235px;
border-radius:13px;
}
.ff-about-new-content {
padding:16px 14px;
}
.ff-about-new-content > span {
margin-bottom:4px;
font-size:.57rem;
}
.ff-about-new-content h3 {
font-size:1.02rem;
}
.ff-about-new-content p {
margin:6px 0 10px;
font-size:.74rem;
line-height:1.35;
}
.ff-about-new-content > strong {
font-size:.7rem;
}
/* Chronik */
.ff-about-history-feature {
display:block;
margin-top:45px;
padding:30px 22px;
}
.ff-about-history-number {
margin-bottom:20px;
font-size:5rem;
}
.ff-about-history-text h2 {
font-size:1.55rem;
}
.ff-about-history-text p {
font-size:.91rem;
}
.ff-about-history-link {
width:100%;
justify-content:center;
box-sizing:border-box;
}
.ff-about-final {
margin-top:30px;
padding:35px 15px 15px;
}
}
/* =========================================================
SEHR KLEINE DISPLAYS
========================================================= */
@media (max-width:420px) {
.ff-about-new-card,
.ff-about-new-card-large {
min-height:215px;
}
.ff-about-new-content p {
display:none;
}
.ff-about-new-content h3 {
font-size:.94rem;
}
.ff-about-new-content > strong {
margin-top:8px;
}
}
/* =========================================================
FEUERWEHR SCHMERZKE
CHRONIK – SCROLL-ZEITREISE
inkl. Wehrführer + 2024 → 2025 Flip
========================================================= */
/* =========================================================
1. ÜBER-UNS-KARTE „CHRONIK“
========================================================= */
.ff-about-chronik {
grid-column: 1 / -1;
}
.ff-about-chronik-img {
display: flex;
align-items: center;
justify-content: center;
min-height: 230px;
background:
linear-gradient(
135deg,
#fafafa 0%,
#eeeeee 100%
);
}
.ff-about-chronik-year {
color: #c1121f;
font-size: clamp(4.5rem, 10vw, 8rem);
font-weight: 900;
line-height: 1;
letter-spacing: -.06em;
opacity: .14;
}
/* =========================================================
2. GRUNDLAYOUT
========================================================= */
.ff-chronik-page {
width: 100%;
max-width: 1450px;
margin: 0 auto;
padding: 36px 24px 80px;
box-sizing: border-box;
color: #222;
}
/* =========================================================
3. KOPFBEREICH
========================================================= */
.ff-chronik-head {
max-width: 950px;
margin: 0 auto 28px;
text-align: center;
}
.ff-chronik-kicker {
display: block;
margin-bottom: 10px;
color: #c1121f;
font-size: .76rem;
font-weight: 900;
letter-spacing: .17em;
text-transform: uppercase;
}
.ff-chronik-head h1 {
margin: 0;
color: #171717;
font-size: clamp(2.2rem, 5vw, 4.1rem);
font-weight: 900;
line-height: 1.05;
letter-spacing: -.035em;
}
.ff-chronik-head p {
max-width: 720px;
margin: 16px auto 0;
color: #666;
font-size: 1.05rem;
line-height: 1.6;
}
/* =========================================================
4. EINLEITUNG
========================================================= */
.ff-chronik-intro {
max-width: 930px;
margin: 0 auto 38px;
}
.ff-chronik-intro blockquote {
position: relative;
margin: 0;
padding: 25px 30px;
box-sizing: border-box;
background: #f7f7f7;
border: 1px solid #e5e5e5;
border-left: 4px solid #c1121f;
border-radius: 0 14px 14px 0;
color: #292929;
font-size: clamp(1rem, 2vw, 1.18rem);
font-weight: 650;
line-height: 1.7;
}
/* =========================================================
5. KENNZAHLEN
========================================================= */
.ff-chronik-facts {
display: grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap: 14px;
max-width: 930px;
margin: 0 auto 80px;
}
.ff-chronik-facts > div {
position: relative;
padding: 23px 18px;
box-sizing: border-box;
overflow: hidden;
background: #fff;
border: 1px solid #e4e4e4;
border-radius: 14px;
text-align: center;
color: #666;
font-size: .82rem;
font-weight: 700;
line-height: 1.35;
box-shadow:
0 5px 18px rgba(0,0,0,.045);
}
.ff-chronik-facts > div::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 3px;
background: #c1121f;
}
.ff-chronik-facts strong {
display: block;
margin-bottom: 4px;
color: #c1121f;
font-size: clamp(1.7rem, 4vw, 2.5rem);
font-weight: 900;
line-height: 1;
}
/* =========================================================
6. ZEITREISE
========================================================= */
.ff-timejourney {
position: relative;
max-width: 1120px;
margin: 0 auto 100px;
}
/* =========================================================
7. STARTKARTE
========================================================= */
.ff-timejourney-start {
position: relative;
padding: 65px 45px;
overflow: hidden;
background:
linear-gradient(
135deg,
#fafafa 0%,
#f1f1f1 100%
);
border: 1px solid #e2e2e2;
border-top: 4px solid #c1121f;
border-radius: 18px;
text-align: center;
box-shadow:
0 7px 25px rgba(0,0,0,.05);
}
.ff-timejourney-start::before {
content: "1924";
position: absolute;
left: 50%;
top: 50%;
color: #c1121f;
font-size: clamp(9rem, 22vw, 18rem);
font-weight: 950;
line-height: 1;
opacity: .035;
transform: translate(-50%, -50%);
pointer-events: none;
}
.ff-timejourney-start-kicker {
position: relative;
z-index: 2;
display: block;
margin-bottom: 8px;
color: #c1121f;
font-size: .7rem;
font-weight: 900;
letter-spacing: .16em;
}
.ff-timejourney-start h2 {
position: relative;
z-index: 2;
margin: 0;
color: #171717;
font-size: clamp(2rem, 4vw, 3.2rem);
font-weight: 900;
line-height: 1.1;
}
.ff-timejourney-start p {
position: relative;
z-index: 2;
max-width: 620px;
margin: 15px auto 25px;
color: #666;
line-height: 1.65;
}
/* =========================================================
8. SCROLL-HINWEIS
========================================================= */
.ff-timejourney-scroll-hint {
position: relative;
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
margin-top: 28px;
color: #777;
font-size: .65rem;
font-weight: 850;
letter-spacing: .13em;
text-align: center;
}
.ff-timejourney-scroll-mouse {
position: relative;
width: 25px;
height: 39px;
border: 2px solid #c1121f;
border-radius: 999px;
}
.ff-timejourney-scroll-mouse::after {
content: "";
position: absolute;
left: 50%;
top: 8px;
width: 4px;
height: 7px;
background: #c1121f;
border-radius: 99px;
transform: translateX(-50%);
animation:
ffChronikScrollHint 1.7s ease-in-out infinite;
}
@keyframes ffChronikScrollHint {
0% {
opacity: 0;
transform: translate(-50%,0);
}
30% {
opacity: 1;
}
70% {
opacity: 1;
}
100% {
opacity: 0;
transform: translate(-50%,12px);
}
}
/* =========================================================
9. ROUTE / ZEITLINIE
========================================================= */
.ff-timejourney-route {
position: relative;
display: block !important;
max-width: 960px;
margin: 60px auto 0;
padding: 20px 0 60px;
overflow: visible;
}
.ff-timejourney-route::before {
content: "";
position: absolute;
left: 50px;
top: 20px;
bottom: 40px;
width: 3px;
background: #ececec;
border-radius: 99px;
z-index: 0;
}
.ff-timejourney-route::after {
content: "";
position: absolute;
left: 50px;
top: 20px;
width: 3px;
height: var(--ff-journey-progress, 0%);
max-height: calc(100% - 60px);
background: #c1121f;
border-radius: 99px;
z-index: 1;
transition:
height .08s linear;
}
/* =========================================================
10. STATIONEN
========================================================= */
.ff-timejourney-step {
position: relative;
display: block !important;
margin: 0 0 75px;
padding-left: 105px;
box-sizing: border-box;
opacity: 0;
transform:
translateY(65px)
scale(.97);
filter: blur(3px);
transition:
opacity .8s cubic-bezier(.2,.75,.25,1),
transform .9s cubic-bezier(.2,.75,.25,1),
filter .8s ease;
will-change:
opacity,
transform,
filter;
}
.ff-timejourney-step.is-scroll-visible {
opacity: 1;
transform:
translateY(0)
scale(1);
filter: blur(0);
}
.ff-timejourney-step.is-scroll-past {
opacity: .74;
transform:
translateY(0)
scale(.988);
filter: blur(0);
}
.ff-timejourney-step.is-scroll-current .ff-timejourney-card,
.ff-timejourney-step.is-scroll-current .ff-timejourney-leader-inner,
.ff-timejourney-step.is-scroll-current .ff-timejourney-finish-inner {
border-color:
rgba(193,18,31,.35);
box-shadow:
0 16px 45px rgba(0,0,0,.10),
0 0 0 3px rgba(193,18,31,.05);
}
/* =========================================================
11. ZEITLINIEN-PUNKT
========================================================= */
.ff-timejourney-marker {
position: absolute;
left: 0;
top: 34px;
width: 100px;
height: 20px;
z-index: 5;
pointer-events: none;
}
.ff-timejourney-marker::after {
content: "";
position: absolute;
left: 43px;
top: 0;
width: 10px;
height: 10px;
box-sizing: content-box;
background: #c1121f;
border: 4px solid #fff;
border-radius: 50%;
box-shadow:
0 0 0 3px rgba(193,18,31,.14);
transition:
background-color .35s ease,
box-shadow .35s ease,
transform .35s ease;
}
.ff-timejourney-step:not(.is-scroll-visible)
.ff-timejourney-marker::after {
background: #d8d8d8;
box-shadow:
0 0 0 3px rgba(0,0,0,.035);
}
.ff-timejourney-step.is-scroll-current
.ff-timejourney-marker::after {
background: #c1121f;
transform: scale(1.22);
box-shadow:
0 0 0 5px rgba(193,18,31,.12),
0 4px 10px rgba(0,0,0,.10);
}
/* =========================================================
12. JAHRESZAHLEN
========================================================= */
.ff-timejourney-year {
display: block;
width: fit-content;
margin: 0 0 22px;
color: #c1121f;
font-family:
Georgia,
"Times New Roman",
serif;
font-size: clamp(2rem,3vw,2.7rem);
font-weight: 700;
font-style: italic;
line-height: 1;
letter-spacing: -.045em;
white-space: nowrap;
opacity: 0;
transform:
translateY(14px);
transition:
opacity .6s ease .05s,
transform .75s cubic-bezier(.2,.75,.25,1) .05s;
}
.ff-timejourney-event.is-scroll-visible
.ff-timejourney-year,
.ff-timejourney-leader.is-scroll-visible
.ff-timejourney-year,
.ff-timejourney-finish.is-scroll-visible
.ff-timejourney-year {
opacity: 1;
transform:
translateY(0);
}
.ff-timejourney-year::after {
content: "";
display: block;
width: 42px;
height: 2px;
margin-top: 9px;
background: #c1121f;
border-radius: 99px;
opacity: .4;
}
.ff-timejourney-memory
.ff-timejourney-year {
font-family: inherit;
font-size: .78rem;
font-weight: 900;
font-style: normal;
letter-spacing: .14em;
text-transform: uppercase;
}
/* =========================================================
13. EREIGNISKARTEN
========================================================= */
.ff-timejourney-card {
position: relative;
padding: 30px 32px;
overflow: hidden;
box-sizing: border-box;
background: #fff;
border: 1px solid #e2e2e2;
border-radius: 16px;
box-shadow:
0 6px 22px rgba(0,0,0,.055);
transition:
box-shadow .6s ease,
border-color .6s ease,
transform .6s ease;
}
.ff-timejourney-card::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: #c1121f;
}
.ff-timejourney-kicker {
display: block;
margin-bottom: 6px;
color: #c1121f;
font-size: .67rem;
font-weight: 900;
letter-spacing: .14em;
text-transform: uppercase;
}
.ff-timejourney-card h2 {
margin: 0 0 13px;
color: #191919;
font-size: clamp(1.3rem,2.5vw,1.8rem);
font-weight: 900;
line-height: 1.2;
}
.ff-timejourney-card p {
margin: 0 0 10px;
color: #575757;
font-size: .94rem;
line-height: 1.7;
}
.ff-timejourney-card p:last-of-type {
margin-bottom: 0;
}
.ff-timejourney-card small {
display: block;
margin-top: 18px;
padding-top: 14px;
border-top:
1px solid #e7e7e7;
color: #858585;
font-size: .75rem;
line-height: 1.55;
}
/* =========================================================
14. WEHRFÃœHRER-STATIONEN
========================================================= */
.ff-timejourney-leader {
position: relative;
margin-top: 55px;
margin-bottom: 75px;
opacity: 1;
visibility: visible;
transform: none;
}
/* =========================================================
KARTE
========================================================= */
.ff-timejourney-leader-inner {
position: relative;
width: 100%;
padding: 28px;
box-sizing: border-box;
background:
linear-gradient(
135deg,
#f8f8f8 0%,
#ffffff 100%
);
border: 1px solid rgba(193,18,31,.14);
border-top: 4px solid #c1121f;
border-radius: 17px;
box-shadow:
0 8px 30px rgba(0,0,0,.07);
transition:
box-shadow .6s ease,
border-color .6s ease;
}
/* Aktive Karte */
.ff-timejourney-step.is-scroll-current
.ff-timejourney-leader-inner {
border-color: rgba(193,18,31,.35);
box-shadow:
0 16px 45px rgba(0,0,0,.10),
0 0 0 3px rgba(193,18,31,.05);
}
/* =========================================================
ÃœBERSCHRIFT
========================================================= */
.ff-timejourney-leader-kicker {
display: block;
margin-bottom: 18px;
color: #c1121f;
font-size: .67rem;
font-weight: 900;
letter-spacing: .15em;
text-transform: uppercase;
}
/* =========================================================
BILD + TEXT
========================================================= */
.ff-timejourney-leader-single {
display: grid;
grid-template-columns:
150px minmax(0,1fr);
gap: 28px;
align-items: center;
}
/* =========================================================
BILD
NATÃœRLICHES FORMAT
KEIN ZOOM / KEIN CROPPING
========================================================= */
.ff-timejourney-leader-photo {
position: relative;
display: block;
width: 150px;
height: fit-content !important;
min-height: 0 !important;
max-height: none !important;
margin: 0;
padding: 0;
overflow: hidden;
background: transparent;
border-radius: 14px;
line-height: 0;
box-shadow:
0 5px 16px rgba(0,0,0,.10);
align-self: center;
}
.ff-timejourney-leader-photo img {
position: static !important;
display: block !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
object-fit: initial !important;
object-position: initial !important;
transform: none !important;
}
/* Aktives Portrait */
.ff-timejourney-leader.is-scroll-current
.ff-timejourney-leader-photo {
box-shadow:
0 10px 28px rgba(0,0,0,.16);
}
/* =========================================================
TEXT
========================================================= */
.ff-timejourney-leader-info {
min-width: 0;
}
.ff-timejourney-leader-info
.ff-timejourney-year {
margin: 0 0 8px;
opacity: 1;
transform: none;
}
.ff-timejourney-leader-info h2,
.ff-timejourney-leader-info h3 {
margin: 0 0 8px;
color: #191919;
font-size: clamp(1.35rem,3vw,2rem);
font-weight: 900;
line-height: 1.1;
}
.ff-timejourney-leader-info p {
margin: 0;
color: #5d5d5d;
font-size: .91rem;
line-height: 1.6;
}
/* =========================================================
AKTUELL-BADGE
========================================================= */
.ff-timejourney-current-badge {
position: absolute;
top: 8px;
right: 8px;
z-index: 4;
padding: 5px 8px;
background: #c1121f;
color: #fff;
border-radius: 999px;
font-size: .55rem;
font-weight: 900;
letter-spacing: .08em;
line-height: 1.2;
}
/* =========================================================
MOBIL
========================================================= */
@media (max-width:680px) {
.ff-timejourney-leader {
margin-top: 38px;
margin-bottom: 58px;
}
.ff-timejourney-leader-inner {
padding: 20px;
}
.ff-timejourney-leader-kicker {
margin-bottom: 14px;
}
.ff-timejourney-leader-single {
grid-template-columns:
90px minmax(0,1fr);
gap: 17px;
align-items: center;
}
.ff-timejourney-leader-photo {
width: 90px;
height: fit-content !important;
min-height: 0 !important;
max-height: none !important;
border-radius: 11px;
}
.ff-timejourney-leader-photo img {
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
transform: none !important;
}
.ff-timejourney-leader-info
.ff-timejourney-year {
margin-bottom: 8px;
font-size: 1.8rem;
}
.ff-timejourney-leader-info h2,
.ff-timejourney-leader-info h3 {
font-size: 1.05rem;
}
.ff-timejourney-leader-info p {
font-size: .82rem;
}
}
/* =========================================================
15. WEHRFÃœHRER-ÃœBERGABE
========================================================= */
.ff-timejourney-handover-grid {
display: grid;
grid-template-columns:
1fr 70px 1fr;
gap: 18px;
align-items: center;
max-width: 650px;
margin: 0 auto;
}
/* Person */
.ff-timejourney-handover-person {
display: flex;
flex-direction: column;
align-items: center;
min-width: 0;
text-align: center;
color: #c1121f;
font-size: .67rem;
font-weight: 900;
letter-spacing: .08em;
}
/* =========================================================
BILD
Container nimmt NUR die Bildhöhe ein
========================================================= */
.ff-timejourney-handover-person
.ff-timejourney-leader-photo {
display: block;
position: relative;
width: 150px;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 auto 12px;
padding: 0;
overflow: hidden;
background: transparent;
border-radius: 14px;
line-height: 0;
box-shadow:
0 5px 16px rgba(0,0,0,.10);
}
/* Bild bestimmt selbst die Höhe */
.ff-timejourney-handover-person
.ff-timejourney-leader-photo img {
display: block !important;
position: static !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
object-fit: initial !important;
object-position: initial !important;
border: 0 !important;
transform: none !important;
}
/* Name */
.ff-timejourney-handover-person h3 {
margin: 4px 0 0;
color: #191919;
font-size: 1.05rem;
font-weight: 850;
}
/* Pfeil */
.ff-timejourney-handover-arrow {
align-self: center;
color: #c1121f;
font-size: 2.5rem;
font-weight: 300;
text-align: center;
}
/* Beschreibung */
.ff-timejourney-handover-text {
max-width: 650px;
margin: 25px auto 0;
color: #555;
line-height: 1.65;
text-align: center;
}
/* =========================================================
MOBIL
========================================================= */
@media (max-width:680px) {
.ff-timejourney-handover-grid {
grid-template-columns:
1fr 30px 1fr;
gap: 7px;
align-items: center;
}
.ff-timejourney-handover-person
.ff-timejourney-leader-photo {
width: 90px;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
}
.ff-timejourney-handover-person
.ff-timejourney-leader-photo img {
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
object-fit: initial !important;
transform: none !important;
}
.ff-timejourney-handover-arrow {
font-size: 1.5rem;
}
.ff-timejourney-handover-person h3 {
font-size: .82rem;
}
.ff-timejourney-handover-text {
font-size: .84rem;
}
}
/* =========================================================
16. FAHRZEUGE
========================================================= */
.ff-timejourney-vehicle-step
.ff-timejourney-card {
overflow: hidden;
}
.ff-timejourney-vehicle {
position: relative;
max-width: 720px;
margin: 30px auto 10px;
padding: 20px 25px 5px;
}
.ff-timejourney-vehicle::before {
content: "";
position: absolute;
left: 50%;
bottom: 5px;
width: 75%;
height: 22px;
background:
rgba(0,0,0,.09);
border-radius: 50%;
filter: blur(12px);
transform:
translateX(-50%);
z-index: 0;
}
.ff-timejourney-vehicle img {
position: relative;
z-index: 1;
display: block;
width: 100%;
max-height: 330px;
object-fit: contain;
opacity: 0;
transform:
translateX(50px)
scale(.94);
transition:
opacity 1s ease .15s,
transform 1.1s cubic-bezier(.2,.75,.25,1) .15s;
}
.ff-timejourney-vehicle-step.is-scroll-visible
.ff-timejourney-vehicle img {
opacity: 1;
transform:
translateX(0)
scale(1);
}
.ff-timejourney-vehicle-caption {
display: flex;
align-items: baseline;
justify-content: center;
gap: 10px;
margin-top: 8px;
color: #777;
font-size: .75rem;
font-weight: 650;
text-align: center;
}
.ff-timejourney-vehicle-caption strong {
color: #c1121f;
font-size: .9rem;
font-weight: 900;
}
/* =========================================================
17. 100 JAHRE
========================================================= */
.ff-timejourney-anniversary
.ff-timejourney-card {
padding-top: 42px;
padding-bottom: 45px;
text-align: center;
}
.ff-timejourney-anniversary
.ff-timejourney-card::before {
width: 100%;
height: 4px;
bottom: auto;
}
.ff-timejourney-anniversary
.ff-timejourney-year {
margin-left: auto;
margin-right: auto;
}
.ff-timejourney-anniversary
.ff-timejourney-year::after {
margin-left: auto;
margin-right: auto;
}
.ff-timejourney-big-number {
display: block;
margin-top: 28px;
color: #c1121f;
font-size:
clamp(5rem,13vw,9rem);
font-weight: 950;
line-height: .8;
letter-spacing: -.06em;
opacity: 0;
transform:
scale(.7);
transition:
opacity .8s ease .15s,
transform 1s cubic-bezier(.15,.8,.2,1.2) .15s;
}
.ff-timejourney-anniversary.is-scroll-visible
.ff-timejourney-big-number {
opacity: 1;
transform:
scale(1);
}
.ff-timejourney-big-label {
display: block;
margin-top: 14px;
color: #777;
font-size: .67rem;
font-weight: 900;
letter-spacing: .15em;
}
/* =========================================================
18. 2024 → 2025 FLIP
========================================================= */
.ff-timejourney-step.ff-timejourney-flip {
opacity: 0;
transform: none !important;
filter: none !important;
margin-bottom: 75px;
}
.ff-timejourney-step.ff-timejourney-flip.is-scroll-visible {
opacity: 1;
transform: none !important;
filter: none !important;
}
.ff-timejourney-step.ff-timejourney-flip.is-scroll-current,
.ff-timejourney-step.ff-timejourney-flip.is-scroll-past {
transform: none !important;
filter: none !important;
}
.ff-timejourney-flip-stage {
position: relative;
width: 100%;
perspective: 1800px;
-webkit-perspective: 1800px;
}
.ff-timejourney-flip-inner {
position: relative;
width: 100%;
height:
var(--ff-flip-height, auto);
min-height: 0 !important;
transform:
rotateY(0deg);
-webkit-transform:
rotateY(0deg);
transform-style:
preserve-3d;
-webkit-transform-style:
preserve-3d;
transition:
transform 1.25s cubic-bezier(.22,.61,.36,1),
height .55s cubic-bezier(.2,.75,.25,1);
will-change:
transform,
height;
}
.ff-timejourney-flip-face {
width: 100%;
min-height: 0 !important;
box-sizing: border-box;
backface-visibility:
hidden !important;
-webkit-backface-visibility:
hidden !important;
transform-style:
preserve-3d;
-webkit-transform-style:
preserve-3d;
}
.ff-timejourney-flip-face
.ff-timejourney-card {
min-height: 0 !important;
}
.ff-timejourney-flip-front {
position: relative;
z-index: 2;
transform:
rotateY(0deg);
-webkit-transform:
rotateY(0deg);
pointer-events: auto;
}
.ff-timejourney-flip-back {
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 100%;
transform:
rotateY(180deg);
-webkit-transform:
rotateY(180deg);
pointer-events: none;
}
.ff-timejourney-flip.is-flipped
.ff-timejourney-flip-inner {
transform:
rotateY(180deg) !important;
-webkit-transform:
rotateY(180deg) !important;
}
.ff-timejourney-flip.is-flipped
.ff-timejourney-flip-back {
pointer-events: auto;
}
.ff-timejourney-flip.is-flipped
.ff-timejourney-flip-front {
pointer-events: none;
}
.ff-timejourney-flip.is-scroll-visible
.ff-timejourney-year {
opacity: 1;
transform:
translateY(0);
}
.ff-timejourney-flip.is-scroll-current
.ff-timejourney-card {
border-color:
rgba(193,18,31,.35);
box-shadow:
0 16px 45px rgba(0,0,0,.10),
0 0 0 3px rgba(193,18,31,.05);
}
/* =========================================================
19. 2025 JUBILÄUM
========================================================= */
.ff-timejourney-jubilee-card {
padding:
38px 34px 34px !important;
background:
linear-gradient(
135deg,
#fff 0%,
#fafafa 100%
);
text-align: center;
}
.ff-timejourney-jubilee-card
.ff-timejourney-year {
margin-left: auto;
margin-right: auto;
}
.ff-timejourney-jubilee-card
.ff-timejourney-year::after {
margin-left: auto;
margin-right: auto;
}
.ff-timejourney-jubilee-images {
display: grid !important;
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
gap: 18px !important;
margin:
28px 0 0 !important;
padding: 0 !important;
align-items: start !important;
}
.ff-timejourney-jubilee-images figure {
display: grid !important;
grid-template-rows:
auto auto !important;
align-self: start !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
background: #f5f5f5;
border: 1px solid #e2e2e2;
border-radius: 14px;
box-shadow:
0 5px 18px rgba(0,0,0,.055);
}
.ff-timejourney-jubilee-images
figure img {
position: static !important;
display: block !important;
width: 100% !important;
height: auto !important;
aspect-ratio: 1 / 1 !important;
margin: 0 !important;
padding: 0 !important;
object-fit: cover !important;
object-position: center center !important;
border: 0 !important;
transform: none !important;
}
.ff-timejourney-jubilee-images
figure figcaption {
position: static !important;
display: block !important;
width: auto !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding:
11px 13px 13px !important;
background: #f5f5f5;
color: #666;
font-size: .76rem;
font-weight: 700;
line-height: 1.4;
text-align: left;
}
/* =========================================================
20. ABSCHLUSS
========================================================= */
.ff-timejourney-finish {
margin-top: 100px;
margin-bottom: 20px;
padding-left: 105px;
}
.ff-timejourney-finish-inner {
padding: 50px 40px;
background: #f7f7f7;
border: 1px solid #e2e2e2;
border-top: 4px solid #c1121f;
border-radius: 18px;
text-align: center;
box-shadow:
0 7px 25px rgba(0,0,0,.05);
color: #c1121f;
font-size: .7rem;
font-weight: 900;
letter-spacing: .16em;
}
.ff-timejourney-finish h2 {
margin: 10px 0 20px;
color: #171717;
font-size:
clamp(1.8rem,4vw,2.8rem);
font-weight: 900;
}
.ff-timejourney-finish blockquote {
max-width: 680px;
margin: 0 auto 27px;
padding: 0;
border: 0;
color: #444;
font-size:
clamp(1.05rem,2.2vw,1.3rem);
font-weight: 700;
line-height: 1.6;
letter-spacing: 0;
}
.ff-timejourney-finish p {
max-width: 680px;
margin: 0 auto 12px;
color: #5d5d5d;
font-size: 1rem;
font-weight: 400;
line-height: 1.65;
letter-spacing: 0;
}
/* =========================================================
21. ABSCHLUSSZITAT
========================================================= */
.ff-chronik-quote {
position: relative;
max-width: 1100px;
margin:
20px auto 90px;
padding:
58px 50px;
box-sizing: border-box;
overflow: hidden;
background: #f6f6f6;
border-top:
4px solid #c1121f;
border-radius: 17px;
color: #c1121f;
font-size: .69rem;
font-weight: 900;
letter-spacing: .15em;
text-align: center;
box-shadow:
0 6px 22px rgba(0,0,0,.045);
}
.ff-chronik-quote::before {
content: "1924";
position: absolute;
left: 50%;
top: 50%;
color: #c1121f;
font-size:
clamp(7rem,17vw,13rem);
font-weight: 950;
line-height: 1;
opacity: .045;
transform:
translate(-50%,-50%);
pointer-events: none;
}
.ff-chronik-quote blockquote {
position: relative;
z-index: 2;
max-width: 800px;
margin:
14px auto 0;
padding: 0;
color: #222;
font-size:
clamp(1.35rem,3vw,2.25rem);
font-weight: 850;
line-height: 1.35;
letter-spacing: 0;
border: 0;
}
/* =========================================================
22. WEHRFÃœHRER-GESAMTÃœBERSICHT
========================================================= */
.ff-chronik-leaders {
max-width: 1180px;
margin:
0 auto 95px;
}
.ff-chronik-section-head {
max-width: 850px;
margin:
0 auto 48px;
color: #c1121f;
font-size: .72rem;
font-weight: 900;
letter-spacing: .15em;
text-align: center;
text-transform: uppercase;
}
.ff-chronik-section-head h2 {
margin: 8px 0 0;
color: #171717;
font-size:
clamp(1.8rem,4vw,2.8rem);
font-weight: 900;
line-height: 1.1;
letter-spacing: -.02em;
text-transform: none;
}
.ff-chronik-section-head p {
max-width: 720px;
margin:
12px auto 0;
color: #666;
font-size: .98rem;
font-weight: 400;
line-height: 1.65;
letter-spacing: 0;
text-transform: none;
}
/* =========================================================
23. WEHRFÃœHRER-GRID
========================================================= */
.ff-chronik-leader-grid {
display: grid;
grid-template-columns:
repeat(4,minmax(0,1fr));
gap: 18px;
align-items: start;
}
/* Karte */
.ff-chronik-leader {
position: relative;
overflow: hidden;
background: #fff;
border:
1px solid #e3e3e3;
border-radius: 15px;
box-shadow:
0 5px 18px rgba(0,0,0,.05);
transition:
transform .25s ease,
box-shadow .25s ease;
}
.ff-chronik-leader:hover {
transform:
translateY(-4px);
box-shadow:
0 10px 27px rgba(0,0,0,.085);
}
/* =========================================================
24. WEHRFÃœHRER-ÃœBERSICHT
NATÃœRLICHES ORIGINALFORMAT
========================================================= */
.ff-chronik-leader-image {
position: relative;
width: 100%;
height: auto;
margin: 0;
padding: 0;
overflow: hidden;
background: transparent;
line-height: 0;
}
/*
ENTSCHEIDEND:
- KEIN aspect-ratio
- KEINE feste Höhe
- KEIN object-fit:cover
- KEIN scale()
- KEINE absolute Positionierung
Das Bild bestimmt selbst seine Höhe.
*/
.ff-chronik-leader-image img {
display: block;
position: static;
width: 100%;
height: auto;
max-width: 100%;
margin: 0;
padding: 0;
border: 0;
object-fit: initial;
object-position: initial;
filter:
saturate(.92);
transform: none;
}
.ff-chronik-leader:hover
.ff-chronik-leader-image img {
filter:
saturate(1);
}
/* Aktuell-Badge */
.ff-chronik-leader-badge {
position: absolute;
top: 8px;
right: 8px;
z-index: 4;
padding:
5px 8px;
background: #c1121f;
color: #fff;
border-radius: 999px;
font-size: .55rem;
font-weight: 900;
letter-spacing: .08em;
line-height: 1.2;
}
/* Text */
.ff-chronik-leader-text {
position: relative;
z-index: 2;
padding:
13px 14px 15px;
background: #fff;
color: #c1121f;
font-size: .63rem;
font-weight: 900;
letter-spacing: .1em;
}
/* =========================================================
25. TABLET
========================================================= */
@media (max-width:1000px) {
.ff-chronik-leader-grid {
grid-template-columns:
repeat(3,minmax(0,1fr));
}
}
/* =========================================================
26. SMARTPHONE
========================================================= */
@media (max-width:680px) {
.ff-about-chronik-img {
min-height: 170px;
}
.ff-about-chronik-year {
font-size: 4.5rem;
}
.ff-chronik-page {
padding:
26px 14px 60px;
}
.ff-chronik-head {
margin-bottom: 23px;
}
.ff-chronik-head p {
font-size: .92rem;
}
.ff-chronik-intro {
margin-bottom: 25px;
}
.ff-chronik-intro blockquote {
padding: 20px;
font-size: .95rem;
}
.ff-chronik-facts {
gap: 8px;
margin-bottom: 58px;
}
.ff-chronik-facts > div {
padding:
17px 8px;
font-size: .67rem;
}
.ff-chronik-facts strong {
font-size: 1.6rem;
}
.ff-timejourney {
margin-bottom: 65px;
}
.ff-timejourney-start {
padding:
45px 20px;
}
.ff-timejourney-scroll-hint {
font-size: .58rem;
}
.ff-timejourney-route {
margin-top: 40px;
padding-top: 20px;
padding-bottom: 40px;
}
.ff-timejourney-route::before,
.ff-timejourney-route::after {
left: 15px;
}
.ff-timejourney-step,
.ff-timejourney-finish {
padding-left: 43px;
}
.ff-timejourney-step {
margin-bottom: 58px;
transform:
translateY(48px)
scale(.98);
filter:
blur(2px);
}
.ff-timejourney-step.is-scroll-visible {
transform:
translateY(0)
scale(1);
filter:
blur(0);
}
.ff-timejourney-step.is-scroll-past {
transform:
translateY(0)
scale(.993);
}
.ff-timejourney-marker {
left: 0;
top: 28px;
width: 30px;
height: 18px;
}
.ff-timejourney-marker::after {
left: 8px;
top: 0;
width: 8px;
height: 8px;
border-width: 3px;
}
.ff-timejourney-year {
margin-bottom: 19px;
font-size: 1.8rem;
}
.ff-timejourney-year::after {
width: 32px;
margin-top: 7px;
}
.ff-timejourney-card {
padding:
24px 19px 22px;
border-radius: 13px;
}
.ff-timejourney-card h2 {
font-size: 1.15rem;
}
.ff-timejourney-card p {
font-size: .86rem;
}
/* =======================================================
WEHRFÃœHRER MOBIL
======================================================= */
.ff-timejourney-leader {
margin-top: 38px;
margin-bottom: 58px;
opacity: 1;
visibility: visible;
transform: none;
}
.ff-timejourney-leader-inner {
padding: 20px;
}
.ff-timejourney-leader-single {
grid-template-columns:
90px minmax(0,1fr);
gap: 17px;
}
/* Auch mobil natürliches Seitenverhältnis */
.ff-timejourney-leader-photo {
width: 90px;
height: auto;
border-radius: 11px;
}
.ff-timejourney-leader-photo img {
display: block;
width: 100%;
height: auto;
max-width: 100%;
object-fit: initial;
object-position: initial;
transform: none;
}
.ff-timejourney-leader-info
.ff-timejourney-year {
margin-bottom: 8px;
font-size: 1.8rem;
}
.ff-timejourney-leader-info h2,
.ff-timejourney-leader-info h3 {
font-size: 1.05rem;
}
.ff-timejourney-leader-info p {
font-size: .82rem;
}
/* Ãœbergabe */
.ff-timejourney-handover-grid {
grid-template-columns:
1fr 30px 1fr;
gap: 7px;
}
.ff-timejourney-handover-person
.ff-timejourney-leader-photo {
width: 90px;
height: auto;
}
.ff-timejourney-handover-arrow {
font-size: 1.5rem;
}
.ff-timejourney-handover-person h3 {
font-size: .82rem;
}
.ff-timejourney-handover-text {
font-size: .84rem;
}
/* Fahrzeuge */
.ff-timejourney-vehicle {
margin-top: 20px;
padding:
10px 5px 3px;
}
.ff-timejourney-vehicle img {
max-height: 210px;
transform:
translateY(30px)
scale(.95);
}
.ff-timejourney-vehicle-step.is-scroll-visible
.ff-timejourney-vehicle img {
transform:
translateY(0)
scale(1);
}
.ff-timejourney-vehicle-caption {
flex-direction: column;
align-items: center;
gap: 2px;
}
/* Flip */
.ff-timejourney-flip-stage {
perspective: 1200px;
-webkit-perspective: 1200px;
}
.ff-timejourney-flip-inner,
.ff-timejourney-flip-face,
.ff-timejourney-flip-face
.ff-timejourney-card {
min-height: 0 !important;
}
.ff-timejourney-flip {
margin-bottom: 58px;
}
/* 2025 */
.ff-timejourney-jubilee-card {
padding:
27px 19px 22px !important;
}
.ff-timejourney-jubilee-images {
grid-template-columns:
1fr !important;
gap: 12px !important;
margin-top:
22px !important;
}
.ff-timejourney-jubilee-images
figure img {
width: 100% !important;
height: auto !important;
aspect-ratio:
1 / 1 !important;
max-height: none !important;
object-fit:
cover !important;
}
.ff-timejourney-finish {
margin-top: 70px;
}
.ff-timejourney-finish-inner {
padding:
35px 20px;
}
.ff-chronik-quote {
margin-bottom: 60px;
padding:
42px 22px;
}
.ff-chronik-quote blockquote {
font-size: 1.3rem;
}
/* =======================================================
WEHRFÃœHRERÃœBERSICHT MOBIL
======================================================= */
.ff-chronik-leaders {
margin-bottom: 65px;
}
.ff-chronik-section-head {
margin-bottom: 32px;
}
.ff-chronik-leader-grid {
grid-template-columns:
repeat(2,minmax(0,1fr));
gap: 10px;
}
.ff-chronik-leader {
border-radius: 12px;
}
/*
Auch hier:
KEIN aspect-ratio
KEINE feste Höhe
*/
.ff-chronik-leader-image {
width: 100%;
height: auto;
line-height: 0;
}
.ff-chronik-leader-image img {
display: block;
width: 100%;
height: auto;
max-width: 100%;
object-fit: initial;
object-position: initial;
transform: none;
}
.ff-chronik-leader-text {
padding:
11px 10px 13px;
font-size: .59rem;
}
.ff-chronik-leader-text h3 {
font-size: .88rem;
}
.ff-chronik-leader-text p {
font-size: .68rem;
}
.ff-chronik-leader-badge {
top: 8px;
right: 8px;
padding:
5px 7px;
font-size: .53rem;
}
}
/* =========================================================
27. SEHR KLEINE SMARTPHONES
========================================================= */
@media (max-width:400px) {
.ff-chronik-page {
padding-left: 10px;
padding-right: 10px;
}
.ff-chronik-facts > div {
padding-left: 5px;
padding-right: 5px;
}
.ff-chronik-facts strong {
font-size: 1.4rem;
}
.ff-timejourney-year {
font-size: 1.6rem;
}
.ff-timejourney-leader-info
.ff-timejourney-year {
font-size: 1.6rem;
}
.ff-chronik-leader-text h3 {
overflow-wrap: anywhere;
}
}
/* =========================================================
28. REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion:reduce) {
.ff-timejourney-step,
.ff-timejourney-leader,
.ff-timejourney-leader-photo,
.ff-timejourney-vehicle img,
.ff-timejourney-big-number,
.ff-timejourney-year {
transition: none !important;
filter: none !important;
}
.ff-timejourney-scroll-mouse::after {
animation: none !important;
}
}
/* =========================================================
FIX – WEHRFÜHRER-GESAMTÜBERSICHT
Bildcontainer exakt so hoch wie das Originalbild
KEIN ZOOM / KEIN CROPPING / KEINE LEERRÄUME
========================================================= */
/* Grid */
.ff-chronik-leader-grid {
display: grid;
grid-template-columns:
repeat(4, minmax(0, 1fr));
gap: 18px;
align-items: start !important;
}
/* =========================================================
KARTE
========================================================= */
.ff-chronik-leader {
position: relative;
display: block !important;
width: 100%;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0;
padding: 0;
overflow: hidden;
background: #fff;
border: 1px solid #e3e3e3;
border-radius: 15px;
box-shadow:
0 5px 18px rgba(0,0,0,.05);
align-self: start !important;
transition:
transform .25s ease,
box-shadow .25s ease;
}
.ff-chronik-leader:hover {
transform: translateY(-4px);
box-shadow:
0 10px 27px rgba(0,0,0,.085);
}
/* rote Linie unten */
.ff-chronik-leader::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 3px;
background: #c1121f;
}
/* =========================================================
BILDBEREICH
NUR SO HOCH WIE DAS BILD
========================================================= */
.ff-chronik-leader-image {
position: relative !important;
display: block !important;
width: 100% !important;
height: fit-content !important;
min-height: 0 !important;
max-height: none !important;
aspect-ratio: auto !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden;
background: transparent;
line-height: 0 !important;
}
/* =========================================================
BILD
Originales Seitenverhältnis
========================================================= */
.ff-chronik-leader-image img {
position: static !important;
display: block !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
object-fit: initial !important;
object-position: initial !important;
transform: none !important;
filter: saturate(.92);
}
.ff-chronik-leader:hover
.ff-chronik-leader-image img {
filter: saturate(1);
}
/* =========================================================
TEXT DIREKT UNTER DAS BILD
========================================================= */
.ff-chronik-leader-text {
position: relative !important;
display: block !important;
z-index: 2;
width: auto;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding:
13px 14px 15px;
background: #fff;
color: #c1121f;
font-size: .63rem;
font-weight: 900;
letter-spacing: .1em;
line-height: 1.35;
}
.ff-chronik-leader-text h3 {
margin:
4px 0 3px;
color: #191919;
font-size: 1rem;
font-weight: 850;
line-height: 1.2;
letter-spacing: 0;
}
.ff-chronik-leader-text p {
margin: 0;
color: #777;
font-size: .76rem;
font-weight: 400;
line-height: 1.35;
letter-spacing: 0;
}
/* =========================================================
AKTUELL-BADGE
========================================================= */
.ff-chronik-leader-badge {
position: absolute;
top: 8px;
right: 8px;
z-index: 5;
padding:
5px 8px;
background: #c1121f;
color: #fff;
border-radius: 999px;
font-size: .55rem;
font-weight: 900;
letter-spacing: .08em;
line-height: 1.2;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width:1000px) {
.ff-chronik-leader-grid {
grid-template-columns:
repeat(3, minmax(0,1fr));
}
}
/* =========================================================
SMARTPHONE
========================================================= */
@media (max-width:680px) {
.ff-chronik-leader-grid {
grid-template-columns:
repeat(2, minmax(0,1fr));
gap: 10px;
}
.ff-chronik-leader {
height: auto !important;
min-height: 0 !important;
border-radius: 12px;
}
.ff-chronik-leader-image {
height: fit-content !important;
min-height: 0 !important;
aspect-ratio: auto !important;
}
.ff-chronik-leader-image img {
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
transform: none !important;
}
.ff-chronik-leader-text {
height: auto !important;
min-height: 0 !important;
padding:
11px 10px 13px;
font-size: .59rem;
}
.ff-chronik-leader-text h3 {
font-size: .88rem;
}
.ff-chronik-leader-text p {
font-size: .68rem;
}
}
/* =========================================================
ZURÜCK-BUTTON – KLEIN OBEN LINKS
========================================================= */
.ff-back-button {
position: fixed !important;
top: 90px !important;
left: 16px !important;
right: auto !important;
bottom: auto !important;
z-index: 999 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
width: auto !important;
min-width: 0 !important;
max-width: max-content !important;
height: 30px !important;
min-height: 0 !important;
max-height: 30px !important;
margin: 0 !important;
padding: 0 9px !important;
box-sizing: border-box !important;
background: rgba(255, 255, 255, .92) !important;
color: #555 !important;
border: 1px solid #ddd !important;
border-radius: 7px !important;
box-shadow: 0 2px 8px rgba(0,0,0,.08) !important;
font-family: inherit !important;
font-size: 12px !important;
font-weight: 700 !important;
line-height: 1 !important;
text-transform: none !important;
letter-spacing: 0 !important;
cursor: pointer !important;
}
.ff-back-button .ff-back-arrow {
display: inline !important;
margin: 0 !important;
padding: 0 !important;
font-size: 15px !important;
line-height: 1 !important;
}
.ff-back-button:hover {
background: #f5f5f5 !important;
color: #c1121f !important;
border-color: #ccc !important;
}
@media (max-width: 680px) {
.ff-back-button {
top: 76px !important;
left: 10px !important;
width: auto !important;
height: 28px !important;
max-height: 28px !important;
padding: 0 8px !important;
font-size: 11px !important;
}
.ff-back-button .ff-back-arrow {
font-size: 14px !important;
}
}
/* =========================================================
FAHRZEUGE – FINALE BILD-/HOTSPOT-GEOMETRIE
========================================================= */
/* =========================================================
INTERAKTIVER BEREICH
========================================================= */
.ff-lf-interactive {
display: grid !important;
grid-template-columns: minmax(0, 1fr) 330px !important;
gap: 28px !important;
align-items: start !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* =========================================================
FAHRZEUGSPALTE
========================================================= */
.ff-lf-vehicle-column {
grid-column: 1 !important;
grid-row: 1 !important;
display: block !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* =========================================================
ÄUSSERE IMAGE-STAGE
========================================================= */
.ff-lf-image-stage {
position: relative !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
box-sizing: border-box !important;
}
/* =========================================================
BILD + HOTSPOTS
Der Wrapper entspricht immer exakt dem Fahrzeugbild.
========================================================= */
.ff-vehicle-image-map {
position: relative !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
box-sizing: border-box !important;
}
/* =========================================================
FAHRZEUGBILD
Wichtig:
keine feste Höhe
kein aspect-ratio
kein transform
========================================================= */
.ff-vehicle-image-map > .ff-lf-vehicle-image {
position: relative !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
aspect-ratio: auto !important;
object-fit: initial !important;
object-position: initial !important;
transform: none !important;
box-sizing: border-box !important;
}
/* =========================================================
HOTSPOTS
========================================================= */
.ff-vehicle-image-map > .ff-lf-hotspot {
position: absolute !important;
right: auto !important;
bottom: auto !important;
margin: 0 !important;
transform: translate(-50%, -50%) !important;
z-index: 20 !important;
}
/* Hotspot selbst darf nicht durch andere Button-Regeln
gestreckt werden */
.ff-vehicle-image-map > button.ff-lf-hotspot {
width: 24px !important;
min-width: 24px !important;
max-width: 24px !important;
height: 24px !important;
min-height: 24px !important;
max-height: 24px !important;
padding: 0 !important;
border-radius: 50% !important;
box-sizing: border-box !important;
}
/* =========================================================
INFOBOX
========================================================= */
.ff-lf-info-panel {
position: relative !important;
grid-column: 2 !important;
grid-row: 1 !important;
width: 100% !important;
max-width: 330px !important;
min-width: 0 !important;
height: auto !important;
margin: 0 !important;
align-self: start !important;
transform: none !important;
box-sizing: border-box !important;
}
.ff-lf-info-placeholder,
.ff-lf-info-content {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* =========================================================
MITTLERE BILDSCHIRME
========================================================= */
@media (max-width: 1050px) {
.ff-lf-interactive {
grid-template-columns: minmax(0, 1fr) 280px !important;
gap: 20px !important;
}
.ff-lf-info-panel {
max-width: 280px !important;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 760px) {
.ff-lf-interactive {
grid-template-columns: minmax(0, 1fr) !important;
gap: 18px !important;
}
.ff-lf-vehicle-column {
grid-column: 1 !important;
grid-row: 1 !important;
}
.ff-lf-info-panel {
grid-column: 1 !important;
grid-row: 2 !important;
width: 100% !important;
max-width: none !important;
}
.ff-lf-image-stage,
.ff-vehicle-image-map {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
}
.ff-vehicle-image-map > .ff-lf-vehicle-image {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
aspect-ratio: auto !important;
transform: none !important;
}
.ff-vehicle-image-map > button.ff-lf-hotspot {
width: 22px !important;
min-width: 22px !important;
max-width: 22px !important;
height: 22px !important;
min-height: 22px !important;
max-height: 22px !important;
}
}
/* =========================================================
FAHRZEUG INTERAKTIV – DESKTOP LAYOUT FIX
Bild links / Infobox rechts
========================================================= */
.ff-lf-interactive {
display: grid !important;
/* Fahrzeug | Infobox */
grid-template-columns: minmax(0, 1fr) 320px !important;
gap: 32px !important;
align-items: center !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 25px 0 !important;
box-sizing: border-box !important;
}
/* =========================================================
FAHRZEUG LINKS
========================================================= */
.ff-lf-vehicle-column {
grid-column: 1 !important;
grid-row: 1 !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* =========================================================
IMAGE-STAGE
========================================================= */
.ff-lf-image-stage {
position: relative !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
width: 100% !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
/* =========================================================
FAHRZEUG-HOTSPOTS – STABILE BASIS
========================================================= */
/* ---------------------------------------------------------
1. IMAGE-STAGE
Die Stage besitzt exakt die Breite des Fahrzeugbildes.
Ihre Höhe entsteht automatisch durch das Bild.
--------------------------------------------------------- */
.ff-lf-image-stage {
position: relative !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
box-sizing: border-box !important;
line-height: 0 !important;
}
/* ---------------------------------------------------------
2. FAHRZEUGBILD
Das Bild füllt die Stage vollständig in der Breite.
height:auto erhält IMMER das originale Seitenverhältnis.
--------------------------------------------------------- */
.ff-lf-image-stage > .ff-lf-vehicle-image {
position: static !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
aspect-ratio: auto !important;
object-fit: initial !important;
object-position: initial !important;
transform: none !important;
box-sizing: border-box !important;
}
/* ---------------------------------------------------------
3. HOTSPOTS
left/top beziehen sich jetzt ausschließlich auf
.ff-lf-image-stage und damit auf dieselbe Fläche
wie das Fahrzeugbild.
--------------------------------------------------------- */
.ff-lf-image-stage > .ff-lf-hotspot {
position: absolute !important;
right: auto !important;
bottom: auto !important;
width: 24px !important;
min-width: 24px !important;
max-width: 24px !important;
height: 24px !important;
min-height: 24px !important;
max-height: 24px !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
transform: translate(-50%, -50%) !important;
z-index: 20 !important;
}
/* ---------------------------------------------------------
4. MOBILE
Kein anderes Bezugssystem.
Nur Hotspots etwas kleiner.
--------------------------------------------------------- */
@media (max-width: 680px) {
.ff-lf-image-stage {
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
}
.ff-lf-image-stage > .ff-lf-vehicle-image {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
max-height: none !important;
}
.ff-lf-image-stage > .ff-lf-hotspot {
width: 20px !important;
min-width: 20px !important;
max-width: 20px !important;
height: 20px !important;
min-height: 20px !important;
max-height: 20px !important;
}
}
/* =========================================================
FAHRZEUGE – MOBILE HOTSPOT FIX
Desktop bleibt unverändert
========================================================= */
@media (max-width: 680px) {
/* Fahrzeugspalte */
.ff-lf-page .ff-lf-vehicle-column {
display: block !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
/* -------------------------------------------------------
BILD-STAGE
Wichtig: DAS ist das Bezugssystem der Hotspots
------------------------------------------------------- */
.ff-lf-page .ff-lf-image-stage {
position: relative !important;
display: block !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 auto !important;
padding: 0 !important;
overflow: visible !important;
line-height: 0 !important;
box-sizing: border-box !important;
}
/* -------------------------------------------------------
FAHRZEUGBILD
exakt so groß wie die Stage
------------------------------------------------------- */
.ff-lf-page .ff-lf-image-stage > .ff-lf-vehicle-image {
position: static !important;
display: block !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
aspect-ratio: auto !important;
object-fit: initial !important;
object-position: initial !important;
transform: none !important;
box-sizing: border-box !important;
}
/* -------------------------------------------------------
HOTSPOTS
Position weiterhin über left/top aus dem HTML
------------------------------------------------------- */
.ff-lf-page .ff-lf-image-stage > .ff-lf-hotspot {
position: absolute !important;
display: block !important;
right: auto !important;
bottom: auto !important;
width: 18px !important;
min-width: 18px !important;
max-width: 18px !important;
height: 18px !important;
min-height: 18px !important;
max-height: 18px !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 50% !important;
transform: translate(-50%, -50%) !important;
z-index: 50 !important;
visibility: visible !important;
opacity: 1 !important;
box-sizing: border-box !important;
}
/* -------------------------------------------------------
INTERAKTIVER BEREICH
------------------------------------------------------- */
.ff-lf-page .ff-lf-interactive {
display: block !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
overflow: visible !important;
}
/* Desktop-Infobox auf dem Handy nicht zwischen
Fahrzeug und Mobile-Sheet quetschen */
.ff-lf-page .ff-lf-info-panel {
display: none !important;
}
/* Hilfetext */
.ff-lf-page .ff-lf-image-help {
display: block !important;
width: 100% !important;
margin: 12px 0 0 !important;
line-height: 1.4 !important;
}
}
/* =========================================================
ÜBER UNS – CHRONIK BREIT UND FLACH
========================================================= */
.ff-about-chronik-wide {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: 92px;
margin: 0 0 24px;
padding: 17px 24px;
box-sizing: border-box;
background: #fff;
border: 1px solid #e3e3e3;
border-radius: 15px;
box-shadow: 0 5px 18px rgba(0,0,0,.05);
color: #111;
text-decoration: none;
transition:
transform .2s ease,
box-shadow .2s ease,
border-color .2s ease;
}
.ff-about-chronik-wide:hover {
transform: translateY(-2px);
border-color: rgba(193,18,31,.3);
box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
/* LINKER TEIL */
.ff-about-chronik-wide-left {
min-width: 0;
}
.ff-about-chronik-wide-kicker {
display: block;
margin: 0 0 3px;
color: #c1121f;
font-size: .65rem;
font-weight: 900;
letter-spacing: .12em;
line-height: 1.2;
}
.ff-about-chronik-wide-title {
margin: 0;
color: #111;
font-size: 1.45rem;
font-weight: 900;
line-height: 1.1;
}
.ff-about-chronik-wide p {
margin: 4px 0 0;
color: #666;
font-size: .86rem;
line-height: 1.3;
}
/* RECHTER TEIL */
.ff-about-chronik-wide-right {
display: flex;
align-items: center;
flex-shrink: 0;
gap: 11px;
margin-left: 25px;
}
.ff-about-chronik-wide-year {
color: #c1121f;
font-size: 2.35rem;
font-weight: 900;
line-height: 1;
letter-spacing: -.05em;
}
.ff-about-chronik-wide-arrow {
color: #bbb;
font-size: 1.35rem;
font-weight: 700;
}
.ff-about-chronik-wide-today {
color: #333;
font-size: .78rem;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 680px) {
.ff-about-chronik-wide {
min-height: 78px;
margin-bottom: 18px;
padding: 14px 16px;
border-radius: 13px;
}
.ff-about-chronik-wide-kicker {
font-size: .58rem;
}
.ff-about-chronik-wide-title {
font-size: 1.2rem;
}
.ff-about-chronik-wide p {
margin-top: 3px;
font-size: .74rem;
}
.ff-about-chronik-wide-right {
gap: 7px;
margin-left: 12px;
}
.ff-about-chronik-wide-year {
font-size: 1.65rem;
}
.ff-about-chronik-wide-arrow {
font-size: 1rem;
}
.ff-about-chronik-wide-today {
display: none;
}
}
/* =========================================================
EINSÄTZE – SEITENKOPF
========================================================= */
.ff-einsaetze-page {
width: 100%;
}
.ff-einsaetze-head {
margin: 0 0 30px;
}
.ff-einsaetze-kicker,
.ff-einsaetze-social-kicker,
.ff-einsaetze-section-head > span {
display: block;
margin-bottom: 6px;
color: #c1121f;
font-size: .68rem;
font-weight: 900;
letter-spacing: .12em;
line-height: 1.2;
}
.ff-einsaetze-head h1 {
margin: 0 0 8px;
color: #111;
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 900;
line-height: 1.05;
}
.ff-einsaetze-head p {
max-width: 700px;
margin: 0;
color: #666;
font-size: 1rem;
line-height: 1.55;
}
/* =========================================================
SOCIAL MEDIA
========================================================= */
.ff-einsaetze-social {
margin: 0 0 42px;
padding: 24px;
background: #fff;
border: 1px solid #e4e4e4;
border-radius: 16px;
box-shadow: 0 5px 18px rgba(0,0,0,.05);
}
.ff-einsaetze-social-text {
margin-bottom: 20px;
}
.ff-einsaetze-social-text h2 {
margin: 0 0 6px;
color: #111;
font-size: 1.45rem;
font-weight: 900;
line-height: 1.15;
}
.ff-einsaetze-social-text p {
max-width: 720px;
margin: 0;
color: #666;
font-size: .92rem;
line-height: 1.5;
}
/* LINKS */
.ff-einsaetze-social-links {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.ff-einsaetze-social-link {
display: grid;
grid-template-columns: 42px minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
min-width: 0;
padding: 13px 15px;
background: #f7f7f7;
border: 1px solid #e6e6e6;
border-radius: 12px;
color: #111;
text-decoration: none;
transition:
transform .2s ease,
background .2s ease,
border-color .2s ease,
box-shadow .2s ease;
}
.ff-einsaetze-social-link:hover {
transform: translateY(-2px);
background: #fff;
border-color: rgba(193,18,31,.35);
box-shadow: 0 6px 18px rgba(0,0,0,.07);
color: #111;
text-decoration: none;
}
/* ICON */
.ff-einsaetze-social-icon {
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
background: #c1121f;
border-radius: 50%;
color: #fff;
font-size: .72rem;
font-weight: 900;
}
/* TEXT */
.ff-einsaetze-social-content small {
margin-bottom: 1px;
color: #777;
font-size: .68rem;
line-height: 1.2;
}
.ff-einsaetze-social-content strong {
color: #111;
font-size: .95rem;
font-weight: 900;
line-height: 1.2;
}
/* PFEIL */
.ff-einsaetze-social-arrow {
color: #c1121f;
font-size: 1.25rem;
font-weight: 800;
transition: transform .2s ease;
}
.ff-einsaetze-social-link:hover .ff-einsaetze-social-arrow {
transform: translateX(3px);
}
/* =========================================================
EINSATZLISTE
========================================================= */
.ff-einsaetze-list-section {
margin-top: 0;
}
.ff-einsaetze-section-head {
margin-bottom: 18px;
}
.ff-einsaetze-section-head h2 {
margin: 0;
color: #111;
font-size: 1.65rem;
font-weight: 900;
line-height: 1.15;
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 760px) {
.ff-einsaetze-head {
margin-bottom: 22px;
}
.ff-einsaetze-social {
margin-bottom: 32px;
padding: 18px;
border-radius: 14px;
}
.ff-einsaetze-social-links {
grid-template-columns: 1fr;
gap: 9px;
}
.ff-einsaetze-social-link {
padding: 11px 13px;
}
.ff-einsaetze-social-icon {
width: 38px;
height: 38px;
}
}
/* =========================================================
HEADER – WAPPEN NUR MOBILE
========================================================= */
/* Desktop ausblenden */
@media (max-width: 680px) {
.ff-mobile-header-logo {
display: flex !important;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
margin-left: auto;
margin-right: 12px;
flex: 0 0 42px;
text-decoration: none;
}
.ff-mobile-header-logo img {
display: block;
width: 38px;
height: 38px;
object-fit: contain;
margin: 0;
padding: 0;
}
}
/* =========================================================
MOBILE – WAPPEN NUR IM HEADER
========================================================= */
.ff-mobile-header-logo {
display: none;
}
@media (max-width: 680px) {
/* Wappen unter dem Hero auf dem Handy komplett entfernen */
.ff-hero-badge {
display: none !important;
}
/* Wappen oben zwischen Schriftzug und Burger */
.ff-mobile-header-logo {
display: flex !important;
align-items: center;
justify-content: center;
width: 64px !important;
height: 64px !important;
margin-left: auto !important;
margin-right: 8px !important;
flex: 0 0 64px !important;
text-decoration: none !important;
}
.ff-mobile-header-logo img {
display: block !important;
width: 60px !important;
height: 60px !important;
max-width: 60px !important;
max-height: 60px !important;
object-fit: contain !important;
margin: 0 !important;
padding: 0 !important;
}
/* Burger direkt rechts neben dem Wappen */
.ff-nav {
flex: 0 0 auto !important;
}
}
/* =========================================================
LETZTE EINSÄTZE – LINK UND WISCHHINWEIS
========================================================= */
.ff-einsatz-more {
display: flex !important;
align-items: center;
justify-content: flex-end;
gap: 7px;
width: fit-content;
margin: 12px 0 0 auto;
color: #c1121f !important;
text-decoration: none !important;
font-size: .82rem;
font-weight: 800;
position: relative;
z-index: 20;
}
.ff-einsatz-more:hover {
text-decoration: none !important;
}
.ff-einsatz-more span {
font-size: 1.05rem;
}
/* Standard: Hinweis verstecken */
.ff-einsatz-swipe-hint {
display: none;
}
/* =========================================================
HANDY
========================================================= */
@media (max-width: 680px) {
.ff-einsatz-swipe-hint {
display: flex !important;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
margin: 9px 0 0;
color: #888;
font-size: .68rem;
font-weight: 600;
line-height: 1.3;
position: relative;
z-index: 20;
}
.ff-einsatz-swipe-hint span {
color: #c1121f;
font-size: .9rem;
}
.ff-einsatz-more {
justify-content: center;
width: 100%;
margin: 7px 0 0;
font-size: .78rem;
}
}
/* =========================================================
EINSATZSLIDER – LINK-UNTERSTREICHUNG ENTFERNEN
========================================================= */
.ff-start-einsaetze-track .ff-einsatz-table-item,
.ff-start-einsaetze-track .ff-einsatz-table-item:link,
.ff-start-einsaetze-track .ff-einsatz-table-item:visited,
.ff-start-einsaetze-track .ff-einsatz-table-item:hover,
.ff-start-einsaetze-track .ff-einsatz-table-item:active,
.ff-start-einsaetze-track .ff-einsatz-table-item:focus {
text-decoration: none !important;
color: inherit !important;
}
/* Alle Inhalte im Link ebenfalls ohne Unterstreichung */
.ff-start-einsaetze-track .ff-einsatz-table-item *,
.ff-start-einsaetze-track .ff-einsatz-table-item:hover *,
.ff-start-einsaetze-track .ff-einsatz-table-item:focus * {
text-decoration: none !important;
}
/* Stichwort */
.ff-start-einsaetze-track .ff-einsatz-keyword {
color: #111 !important;
text-decoration: none !important;
}
/* Datum */
.ff-start-einsaetze-track .ff-einsatz-date {
color: inherit !important;
text-decoration: none !important;
}
/* Einsatznummer */
.ff-start-einsaetze-track .ff-einsatz-number {
text-decoration: none !important;
}
/* =========================================================
EINSATZSEITE – SOCIAL MEDIA MIT BILDERN
========================================================= */
.ff-einsaetze-social-link {
grid-template-columns: 58px minmax(0, 1fr) auto !important;
min-height: 78px;
}
/* Bildfläche */
.ff-einsaetze-social-image img {
display: block;
width: 42px;
height: 42px;
max-width: 42px;
max-height: 42px;
object-fit: contain;
margin: 0;
padding: 0;
}
/* echtes Social-Media-Bild */
.ff-einsaetze-social-image {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 58px;
height: 58px;
flex: 0 0 58px;
border-radius: 13px;
background: #fff;
overflow: hidden;
}
/* WhatsApp Ersatzfläche */
.ff-einsaetze-social-image-wa {
background: #f1f1f1;
color: #111;
font-size: .78rem;
font-weight: 900;
}
/* Textbereich */
.ff-einsaetze-social-content {
display: flex;
flex-direction: column;
min-width: 0;
}
.ff-einsaetze-social-content small {
margin-bottom: 1px;
color: #777;
font-size: .66rem;
line-height: 1.2;
}
.ff-einsaetze-social-content strong {
color: #111;
font-size: 1rem;
font-weight: 900;
line-height: 1.2;
}
.ff-einsaetze-social-content > span {
margin-top: 4px;
color: #777;
font-size: .72rem;
line-height: 1.3;
}
/* Hover */
.ff-einsaetze-social-link:hover .ff-einsaetze-social-image {
transform: scale(1.04);
}
.ff-einsaetze-social-image {
transition: transform .2s ease;
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 680px) {
.ff-einsaetze-social-link {
grid-template-columns: 52px minmax(0, 1fr) auto !important;
min-height: 70px;
}
.ff-einsaetze-social-image {
width: 52px;
height: 52px;
border-radius: 11px;
}
.ff-einsaetze-social-content strong {
font-size: .95rem;
}
.ff-einsaetze-social-content > span {
font-size: .68rem;
}
}
/* =========================================================
EINSATZSEITE – SOCIAL ICONS SAUBER AUSRICHTEN
========================================================= */
.ff-einsaetze-social-image {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 58px !important;
height: 58px !important;
flex: 0 0 58px !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
border-radius: 13px;
background: #fff;
}
/* Allgemein */
.ff-einsaetze-social-image img {
display: block !important;
width: 44px !important;
height: 44px !important;
max-width: 44px !important;
max-height: 44px !important;
object-fit: contain !important;
margin: 0 !important;
padding: 0 !important;
position: relative;
}
/* =========================================================
INSTAGRAM
========================================================= */
.ff-einsaetze-social-link:nth-child(1)
.ff-einsaetze-social-image img {
width: 46px !important;
height: 46px !important;
transform: translateY(-1px);
}
/* =========================================================
FACEBOOK
========================================================= */
.ff-einsaetze-social-link:nth-child(2)
.ff-einsaetze-social-image img {
width: 46px !important;
height: 46px !important;
transform: translateY(-1px);
}
/* =========================================================
WHATSAPP
========================================================= */
.ff-einsaetze-social-image-wa {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 58px !important;
height: 58px !important;
flex: 0 0 58px !important;
margin: 0 !important;
padding: 0 !important;
background: #f4f4f4;
border-radius: 13px;
}
.ff-einsaetze-social-image-wa span {
display: block;
margin: 0 !important;
padding: 0 !important;
color: #111;
font-size: .78rem;
font-weight: 900;
line-height: 1;
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 680px) {
.ff-einsaetze-social-image,
.ff-einsaetze-social-image-wa {
width: 52px !important;
height: 52px !important;
flex: 0 0 52px !important;
}
.ff-einsaetze-social-image img {
width: 40px !important;
height: 40px !important;
}
.ff-einsaetze-social-link:nth-child(1)
.ff-einsaetze-social-image img,
.ff-einsaetze-social-link:nth-child(2)
.ff-einsaetze-social-image img {
width: 42px !important;
height: 42px !important;
}
}
/* =========================================================
CHRONIK – WEHRFÜHRER "AKTUELL" MOBILE FIX
========================================================= */
@media (max-width: 680px) {
/* Aktuell-Kennung darf das Portrait nicht überdecken */
.ff-timejourney-leader-current,
.ff-timejourney-current-badge,
.ff-wehrfuehrer-current,
.ff-wehrfuehrer-aktuell {
position: static !important;
display: inline-flex !important;
width: fit-content !important;
margin: 8px 0 0 !important;
transform: none !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
z-index: auto !important;
}
}
/* =========================================================
EINSATZSTATISTIK
========================================================= */
.ff-einsatz-statistik {
margin: 0 0 42px;
padding: 24px;
background: #fff;
border: 1px solid #e4e4e4;
border-radius: 16px;
box-shadow:
0 5px 18px rgba(0, 0, 0, .05);
}
.ff-einsatz-statistik-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 20px;
}
.ff-einsatz-statistik-head h2 {
margin: 0;
color: #111;
font-size: 1.45rem;
font-weight: 900;
line-height: 1.15;
}
.ff-einsatz-statistik-head h2 span {
color: #777;
font-weight: 700;
}
/* =========================================================
KARTEN
========================================================= */
.ff-einsatz-statistik-cards {
display: grid;
grid-template-columns:
repeat(5, minmax(0, 1fr));
gap: 10px;
}
.ff-stat-card {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
min-height: 118px;
padding: 16px;
background: #f7f7f7;
border:
1px solid #e8e8e8;
border-radius: 13px;
}
.ff-stat-card-main {
background: #c1121f;
border-color: #c1121f;
}
.ff-stat-symbol {
display: block;
margin-bottom: 7px;
font-size: 1.15rem;
line-height: 1;
}
.ff-stat-value {
display: block;
color: #111;
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-weight: 900;
line-height: 1;
}
.ff-stat-label {
display: block;
margin-top: 7px;
color: #777;
font-size: .72rem;
font-weight: 700;
line-height: 1.25;
}
.ff-stat-card-main .ff-stat-value,
.ff-stat-card-main .ff-stat-label {
color: #fff;
}
/* =========================================================
BALKEN
========================================================= */
.ff-stat-bars {
display: grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap: 20px;
margin-top: 24px;
}
.ff-stat-bar-row {
min-width: 0;
}
.ff-stat-bar-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 7px;
color: #555;
font-size: .72rem;
font-weight: 700;
}
.ff-stat-bar-head strong {
color: #111;
font-weight: 900;
}
.ff-stat-bar-track {
position: relative;
width: 100%;
height: 7px;
overflow: hidden;
background: #ececec;
border-radius: 999px;
}
.ff-stat-bar-fill {
display: block;
width: 0;
height: 100%;
background: #c1121f;
border-radius: 999px;
transition:
width .8s cubic-bezier(.22, 1, .36, 1);
}
/* =========================================================
EINSATZSTÄRKE IN LISTE
========================================================= */
.ff-einsatz-strength {
display: inline-flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}
.ff-einsatz-strength-icon {
font-size: .85em;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 900px) {
.ff-einsatz-statistik-cards {
grid-template-columns:
repeat(3, minmax(0, 1fr));
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 680px) {
.ff-einsatz-statistik {
margin-bottom: 32px;
padding: 18px;
border-radius: 14px;
}
.ff-einsatz-statistik-head {
margin-bottom: 16px;
}
.ff-einsatz-statistik-head h2 {
font-size: 1.3rem;
}
.ff-einsatz-statistik-cards {
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 8px;
}
.ff-stat-card {
min-height: 104px;
padding: 13px;
border-radius: 11px;
}
/*
* Gesamtzahl über volle Breite
*/
.ff-stat-card-main {
grid-column: 1 / -1;
min-height: 95px;
}
/*
* Durchschnitt ebenfalls
* über volle Breite
*/
.ff-stat-card-strength {
grid-column: 1 / -1;
}
.ff-stat-value {
font-size: 1.8rem;
}
.ff-stat-bars {
grid-template-columns: 1fr;
gap: 14px;
margin-top: 20px;
}
.ff-stat-bar-track {
height: 6px;
}
}
document.addEventListener("DOMContentLoaded", () => {
initBurger();
initEinsaetzeSlider();
initEinsaetzeSeite();
initWaldbrandLive();
initTermineLive();
initGalerieCaptions();
initLF10();
initMTW();
initTSFW();
initVehicleModals();
initChronikZeitreise();
});
/* =========================================================
JOOMLA – BASISPFAD
========================================================= */
function ffBasePath() {
const base =
document.body?.dataset?.base || "";
return base.replace(/\/$/, "");
}
/* =========================================================
BURGER
========================================================= */
function initBurger() {
const nav =
document.querySelector(".ff-nav");
const btn =
document.querySelector(".ff-burger");
const panel =
document.querySelector("#ff-nav-panel");
if (!nav || !btn || !panel) {
return;
}
const open = () => {
nav.classList.add(
"is-open"
);
btn.setAttribute(
"aria-expanded",
"true"
);
};
const close = () => {
nav.classList.remove(
"is-open"
);
btn.setAttribute(
"aria-expanded",
"false"
);
};
btn.addEventListener(
"click",
(event) => {
event.stopPropagation();
nav.classList.contains(
"is-open"
)
? close()
: open();
}
);
document.addEventListener(
"click",
(event) => {
if (
!nav.classList.contains(
"is-open"
)
) {
return;
}
if (
panel.contains(
event.target
) ||
btn.contains(
event.target
)
) {
return;
}
close();
}
);
document.addEventListener(
"keydown",
(event) => {
if (
event.key ===
"Escape"
) {
close();
}
}
);
const mqDesktop =
window.matchMedia(
"(min-width: 981px)"
);
window.addEventListener(
"resize",
() => {
if (
mqDesktop.matches
) {
close();
}
}
);
}
/* =========================================================
STARTSEITE – LETZTE 10 EINSÄTZE
========================================================= */
function initEinsaetzeSlider() {
const widget =
document.querySelector(
".ff-start-einsaetze-table"
);
if (!widget) {
return;
}
if (
widget.dataset.sliderInit === "1"
) {
return;
}
widget.dataset.sliderInit =
"1";
fetch(
ffBasePath() +
"/templates/tpl_ffschmerzke/einsaetze-proxy.php",
{
cache: "no-store"
}
)
.then((response) => {
if (!response.ok) {
throw new Error(
"Einsatzdaten konnten nicht geladen werden: " +
response.status
);
}
return response.json();
})
.then((data) => {
if (
!data.ok ||
!Array.isArray(
data.letzte10
)
) {
throw new Error(
"Ungültige Einsatzdaten"
);
}
if (
data.letzte10.length === 0
) {
throw new Error(
"Keine Einsätze vorhanden"
);
}
buildEinsaetzeSlider(
widget,
data.letzte10
);
})
.catch((error) => {
console.error(
"Einsatz-Slider Fehler:",
error
);
showEinsatzError(
widget
);
});
}
/* =========================================================
STARTSEITE – EINSATZSLIDER AUFBAU
========================================================= */
function buildEinsaetzeSlider(
widget,
einsaetze
) {
widget.innerHTML =
"";
widget.classList.add(
"ff-start-einsaetze"
);
widget.style.position =
"relative";
const title =
document.createElement(
"h3"
);
title.className =
"ff-einsatz-widget-title";
title.textContent =
"Letzte Einsätze";
widget.appendChild(
title
);
const viewport =
document.createElement(
"div"
);
viewport.className =
"ff-einsatz-viewport";
const track =
document.createElement(
"div"
);
track.className =
"ff-start-einsaetze-track";
const einsatzPageUrl =
ffBasePath() +
"/index.php/einsaetze";
einsaetze.forEach(
(einsatz) => {
const keyword =
String(
einsatz.stichwort || ""
).trim();
const date =
String(
einsatz.datum || ""
).trim();
const number =
String(
einsatz.nummer || ""
).trim();
if (
!keyword ||
!date
) {
return;
}
const slide =
document.createElement(
"a"
);
slide.className =
"ff-einsatz-table-item";
slide.href =
einsatzPageUrl;
slide.setAttribute(
"aria-label",
"Zur vollständigen Einsatzübersicht"
);
slide.innerHTML = `
${
number
? `Einsatz ${escapeHtml(number)}`
: "Einsatz"
}
${escapeHtml(keyword)}
${escapeHtml(date)}
`;
track.appendChild(
slide
);
}
);
if (
!track.children.length
) {
showEinsatzError(
widget
);
return;
}
viewport.appendChild(
track
);
widget.appendChild(
viewport
);
initEinsaetzeAutoSlider(
widget,
track,
viewport
);
injectHideScrollbarCSS();
}
/* =========================================================
STARTSEITE – EINSATZSLIDER
========================================================= */
function initEinsaetzeAutoSlider(
widget,
track,
viewport
) {
viewport.style.width =
"100%";
viewport.style.overflow =
"hidden";
track.style.display =
"flex";
track.style.flexWrap =
"nowrap";
track.style.width =
"100%";
track.style.gap =
"0";
track.style.overflowX =
"auto";
track.style.overflowY =
"hidden";
track.style.scrollBehavior =
"smooth";
track.style.scrollSnapType =
"x mandatory";
track.style.webkitOverflowScrolling =
"touch";
track.style.transform =
"none";
const slides =
Array.from(
track.children
);
slides.forEach(
(slide) => {
slide.style.flex =
"0 0 100%";
slide.style.width =
"100%";
slide.style.minWidth =
"100%";
slide.style.scrollSnapAlign =
"start";
slide.style.cursor =
"pointer";
}
);
const count =
slides.length;
/* =====================================================
MOBILE – WISCH-HINWEIS
===================================================== */
if (
count > 1 &&
!widget.querySelector(
".ff-einsatz-swipe-hint"
)
) {
const swipeHint =
document.createElement(
"div"
);
swipeHint.className =
"ff-einsatz-swipe-hint";
swipeHint.innerHTML =
"↔ Wischen für weitere Einsätze";
viewport.insertAdjacentElement(
"afterend",
swipeHint
);
}
if (
count <= 1
) {
return;
}
/* =====================================================
PFEILE
===================================================== */
const prev =
document.createElement(
"button"
);
prev.type =
"button";
prev.className =
"ff-einsatz-arrow ff-einsatz-prev";
prev.setAttribute(
"aria-label",
"Vorheriger Einsatz"
);
prev.innerHTML =
"❮";
const next =
document.createElement(
"button"
);
next.type =
"button";
next.className =
"ff-einsatz-arrow ff-einsatz-next";
next.setAttribute(
"aria-label",
"Nächster Einsatz"
);
next.innerHTML =
"❯";
widget.appendChild(
prev
);
widget.appendChild(
next
);
/* =====================================================
STATUS
===================================================== */
let index = 0;
let timer = null;
let scrollTimer = null;
let touchStartX = 0;
let touchStartY = 0;
let didSwipe = false;
/* =====================================================
SLIDE ANZEIGEN
===================================================== */
function showSlide(
newIndex,
smooth = true
) {
if (
newIndex < 0
) {
newIndex =
count - 1;
}
if (
newIndex >= count
) {
newIndex =
0;
}
index =
newIndex;
const slideWidth =
viewport.clientWidth;
track.scrollTo({
left:
index *
slideWidth,
behavior:
smooth
? "smooth"
: "auto"
});
}
/* =====================================================
AUTOMATISCHER WECHSEL
===================================================== */
function startTimer() {
clearInterval(
timer
);
timer =
setInterval(
() => {
showSlide(
index + 1
);
},
6000
);
}
function stopTimer() {
clearInterval(
timer
);
timer =
null;
}
/* =====================================================
PFEILE
===================================================== */
prev.addEventListener(
"click",
(event) => {
event.preventDefault();
event.stopPropagation();
showSlide(
index - 1
);
startTimer();
}
);
next.addEventListener(
"click",
(event) => {
event.preventDefault();
event.stopPropagation();
showSlide(
index + 1
);
startTimer();
}
);
/* =====================================================
MANUELLES SCROLLEN
===================================================== */
track.addEventListener(
"scroll",
() => {
clearTimeout(
scrollTimer
);
scrollTimer =
setTimeout(
() => {
const width =
viewport.clientWidth;
if (
width > 0
) {
index =
Math.round(
track.scrollLeft /
width
);
index =
Math.max(
0,
Math.min(
index,
count - 1
)
);
}
},
120
);
}
);
/* =====================================================
DESKTOP – PAUSE BEI HOVER
===================================================== */
widget.addEventListener(
"mouseenter",
stopTimer
);
widget.addEventListener(
"mouseleave",
startTimer
);
/* =====================================================
MOBILE – TOUCH
===================================================== */
track.addEventListener(
"touchstart",
(event) => {
stopTimer();
if (
!event.touches ||
!event.touches.length
) {
return;
}
touchStartX =
event.touches[0].clientX;
touchStartY =
event.touches[0].clientY;
didSwipe =
false;
},
{
passive: true
}
);
track.addEventListener(
"touchmove",
(event) => {
if (
!event.touches ||
!event.touches.length
) {
return;
}
const currentX =
event.touches[0].clientX;
const currentY =
event.touches[0].clientY;
const diffX =
Math.abs(
currentX -
touchStartX
);
const diffY =
Math.abs(
currentY -
touchStartY
);
if (
diffX > 10 &&
diffX > diffY
) {
didSwipe =
true;
}
},
{
passive: true
}
);
slides.forEach(
(slide) => {
slide.addEventListener(
"click",
(event) => {
if (
!didSwipe
) {
return;
}
event.preventDefault();
event.stopPropagation();
didSwipe =
false;
}
);
}
);
track.addEventListener(
"touchend",
() => {
const width =
viewport.clientWidth;
if (
width > 0
) {
index =
Math.round(
track.scrollLeft /
width
);
index =
Math.max(
0,
Math.min(
index,
count - 1
)
);
}
startTimer();
setTimeout(
() => {
didSwipe =
false;
},
450
);
},
{
passive: true
}
);
/* =====================================================
FENSTERGRÖSSE
===================================================== */
window.addEventListener(
"resize",
() => {
track.scrollTo({
left:
index *
viewport.clientWidth,
behavior:
"auto"
});
}
);
/* =====================================================
SICHTBARKEIT
===================================================== */
document.addEventListener(
"visibilitychange",
() => {
if (
document.hidden
) {
stopTimer();
} else {
startTimer();
}
}
);
showSlide(
0,
false
);
startTimer();
}
/* =========================================================
STARTSEITE – EINSATZ FEHLER
========================================================= */
function showEinsatzError(
widget
) {
widget
.querySelectorAll(
"ul, .newsflash, .mod-articles, .mod-articlesnews, .ff-einsatz-viewport, .ff-start-einsaetze-track, .ff-einsatz-arrow"
)
.forEach(
(element) => {
element.remove();
}
);
let title =
widget.querySelector(
".module-title, .moduletitle, h2, h3, h4"
);
if (
!title
) {
title =
document.createElement(
"h3"
);
title.textContent =
"Letzte Einsätze";
widget.prepend(
title
);
}
const error =
document.createElement(
"div"
);
error.className =
"ff-einsatz-loading";
error.textContent =
"Einsätze können momentan nicht geladen werden.";
title.insertAdjacentElement(
"afterend",
error
);
}
/* =========================================================
KOMPLETTE EINSATZSEITE
========================================================= */
function initEinsaetzeSeite() {
const container =
document.getElementById(
"ff-einsaetze-komplett"
);
if (
!container
) {
return;
}
fetch(
ffBasePath() +
"/templates/tpl_ffschmerzke/einsaetze-proxy.php",
{
cache: "no-store"
}
)
.then((response) => {
if (
!response.ok
) {
throw new Error(
"Einsatzdaten konnten nicht geladen werden: " +
response.status
);
}
return response.json();
})
.then((data) => {
if (
!data.ok ||
!Array.isArray(
data.einsaetze
)
) {
throw new Error(
"Ungültige Einsatzdaten"
);
}
/* =================================================
STATISTIK
================================================= */
if (
data.statistik
) {
renderEinsatzStatistik(
data.statistik
);
}
/* =================================================
EINSATZLISTE
================================================= */
renderEinsaetzeSeite(
container,
data.einsaetze
);
})
.catch((error) => {
console.error(
"Einsatzseite Fehler:",
error
);
container.innerHTML = `
Einsätze können momentan nicht geladen werden.
`;
});
}
/* =========================================================
EINSATZSEITE – TABELLE
========================================================= */
function renderEinsaetzeSeite(
container,
einsaetze
) {
if (
!Array.isArray(
einsaetze
) ||
einsaetze.length === 0
) {
container.innerHTML = `
Aktuell sind keine Einsätze eingetragen.
`;
return;
}
const table =
document.createElement(
"table"
);
table.className =
"ff-einsaetze-table";
table.innerHTML = `
|
Stichwort
|
Datum
|
Nummer
|
Stärke
|
`;
const tbody =
table.querySelector(
"tbody"
);
einsaetze.forEach(
(einsatz) => {
const keyword =
String(
einsatz.stichwort || ""
).trim();
const date =
String(
einsatz.datum || ""
).trim();
const number =
String(
einsatz.nummer || ""
).trim();
const strength =
Number(
einsatz.staerke || 0
);
const type =
String(
einsatz.art ||
"sonstige"
)
.trim()
.toLowerCase();
const row =
document.createElement(
"tr"
);
row.classList.add(
"ff-einsatz-art-" +
type
);
row.innerHTML = `
${escapeHtml(keyword)}
|
${escapeHtml(date)}
|
${escapeHtml(number)}
|
${
strength > 0
? `
👨🚒
${strength}
Einsatzkräfte
`
: `
–
`
}
|
`;
tbody.appendChild(
row
);
}
);
container.innerHTML =
"";
container.appendChild(
table
);
}
/* =========================================================
EINSATZSTATISTIK
========================================================= */
function renderEinsatzStatistik(
statistik
) {
if (
!statistik
) {
return;
}
/* =====================================================
TEXT SETZEN
===================================================== */
const setText =
(id, value) => {
const element =
document.getElementById(
id
);
if (
element
) {
element.textContent =
value;
}
};
/* =====================================================
ZAHL FORMATIEREN
===================================================== */
const formatNumber =
(value) => {
const number =
Number(
value || 0
);
return number.toLocaleString(
"de-DE",
{
maximumFractionDigits: 1
}
);
};
/* =====================================================
HAUPTZAHLEN
===================================================== */
setText(
"ff-stat-jahr",
statistik.jahr || ""
);
setText(
"ff-stat-gesamt",
statistik.gesamt || 0
);
setText(
"ff-stat-brand",
statistik.brand || 0
);
setText(
"ff-stat-hilfe",
statistik.hilfeleistung || 0
);
setText(
"ff-stat-sonstige",
statistik.sonstige || 0
);
setText(
"ff-stat-staerke",
formatNumber(
statistik.durchschnittliche_staerke
)
);
/* =====================================================
PROZENTWERTE
===================================================== */
const brandPercent =
Number(
statistik.brand_prozent || 0
);
const hilfePercent =
Number(
statistik.hilfeleistung_prozent || 0
);
const sonstigePercent =
Number(
statistik.sonstige_prozent || 0
);
setText(
"ff-stat-brand-prozent",
formatNumber(
brandPercent
) +
" %"
);
setText(
"ff-stat-hilfe-prozent",
formatNumber(
hilfePercent
) +
" %"
);
setText(
"ff-stat-sonstige-prozent",
formatNumber(
sonstigePercent
) +
" %"
);
/* =====================================================
BALKEN
===================================================== */
const brandBar =
document.getElementById(
"ff-stat-brand-bar"
);
const hilfeBar =
document.getElementById(
"ff-stat-hilfe-bar"
);
const sonstigeBar =
document.getElementById(
"ff-stat-sonstige-bar"
);
if (
brandBar
) {
brandBar.style.width =
"0%";
}
if (
hilfeBar
) {
hilfeBar.style.width =
"0%";
}
if (
sonstigeBar
) {
sonstigeBar.style.width =
"0%";
}
window.setTimeout(
() => {
if (
brandBar
) {
brandBar.style.width =
Math.min(
100,
Math.max(
0,
brandPercent
)
) +
"%";
}
if (
hilfeBar
) {
hilfeBar.style.width =
Math.min(
100,
Math.max(
0,
hilfePercent
)
) +
"%";
}
if (
sonstigeBar
) {
sonstigeBar.style.width =
Math.min(
100,
Math.max(
0,
sonstigePercent
)
) +
"%";
}
},
120
);
}
/* =========================================================
HTML ESCAPEN
========================================================= */
function escapeHtml(
value
) {
const div =
document.createElement(
"div"
);
div.textContent =
String(
value ?? ""
);
return div.innerHTML;
}
/* =========================================================
SCROLLBAR VERSTECKEN
========================================================= */
function injectHideScrollbarCSS() {
if (
document.getElementById(
"ff-hide-scrollbar-css"
)
) {
return;
}
const style =
document.createElement(
"style"
);
style.id =
"ff-hide-scrollbar-css";
style.textContent = `
.ff-start-einsaetze-track::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
.ff-start-einsaetze-track {
scrollbar-width: none;
-ms-overflow-style: none;
}
`;
document.head.appendChild(
style
);
}
/* =========================================================
INSTAGRAM
========================================================= */
(function () {
function loadInstagramScript(
callback
) {
if (
window.instgrm &&
window.instgrm.Embeds
) {
callback();
return;
}
if (
document.querySelector(
'script[src*="instagram.com/embed.js"]'
)
) {
setTimeout(
callback,
200
);
return;
}
const script =
document.createElement(
"script"
);
script.async =
true;
script.src =
"https://www.instagram.com/embed.js";
script.onload =
callback;
document.body.appendChild(
script
);
}
function processEmbeds() {
if (
window.instgrm &&
window.instgrm.Embeds
) {
window.instgrm.Embeds.process();
}
}
document.addEventListener(
"DOMContentLoaded",
function () {
if (
!document.querySelector(
"blockquote.instagram-media"
)
) {
return;
}
loadInstagramScript(
processEmbeds
);
}
);
})();
/* =========================================================
WALDBRAND LIVE
========================================================= */
function initWaldbrandLive() {
const box =
document.querySelector(
".ff-waldbrand-live"
);
if (
!box
) {
return;
}
const cardEl =
document.getElementById(
"ff-wbs-card"
);
const standEl =
document.getElementById(
"ff-wbs-stand"
);
const circleEl =
document.getElementById(
"ff-wbs-circle"
);
const levelEl =
document.getElementById(
"ff-wbs-level"
);
const scaleEl =
document.getElementById(
"ff-wbs-scale"
);
const hintEl =
document.getElementById(
"ff-wbs-hint"
);
if (
!cardEl ||
!standEl ||
!circleEl ||
!levelEl ||
!scaleEl ||
!hintEl
) {
return;
}
fetch(
ffBasePath() +
"/templates/tpl_ffschmerzke/wbs-proxy.php",
{
cache: "no-store"
}
)
.then((response) => {
if (
!response.ok
) {
throw new Error(
"Proxy antwortet nicht"
);
}
return response.json();
})
.then((data) => {
if (
!data.ok
) {
throw new Error(
data.error ||
"Unbekannter Fehler"
);
}
const level =
Number(
data.level
);
const labels = {
1:
"sehr geringe Gefahr",
2:
"geringe Gefahr",
3:
"mittlere Gefahr",
4:
"hohe Gefahr",
5:
"sehr hohe Gefahr"
};
const hints = {
1:
"Sehr geringe Waldbrandgefahr. Allgemeine Vorsicht im Wald beachten. Offenes Feuer ist nur auf ausgewiesenen Plätzen erlaubt. Im Notfall: Bei Rauch oder Feuer sofort die 112 wählen.",
2:
"Geringe Waldbrandgefahr. Offenes Feuer und Rauchen möglichst vermeiden. Zufahrten und Wege für Einsatzkräfte freihalten. Im Notfall: Brand sofort über 112 melden und Standort möglichst genau angeben.",
3:
"Mittlere Waldbrandgefahr. Offenes Feuer, Grillen und Rauchen im Wald unterlassen. Fahrzeuge nicht auf trockenem Gras abstellen. Im Notfall: Feuerwehr über 112 alarmieren und den Bereich verlassen.",
4:
"Hohe Waldbrandgefahr. Aufenthalte im Wald möglichst vermeiden. Keine Zündquellen mitführen und Zufahrten unbedingt freihalten. Im Notfall: 112 wählen, andere warnen und sich zügig aus dem Gefahrenbereich entfernen.",
5:
"Sehr hohe Waldbrandgefahr. Wälder möglichst nicht betreten. Offenes Feuer, Rauchen und jegliche Zündquellen strikt vermeiden. Hinweise der Behörden beachten. Im Notfall: sofort 112 alarmieren, Abstand halten und den Gefahrenbereich umgehend verlassen."
};
standEl.textContent =
`${data.region} · Stand: ${data.date}`;
levelEl.textContent =
level;
scaleEl.textContent =
`Stufe ${level} – ${
labels[level] ||
data.label ||
""
}`;
hintEl.textContent =
hints[level] ||
"Bitte aktuelle Hinweise beachten.";
circleEl.classList.remove(
"wbs-1",
"wbs-2",
"wbs-3",
"wbs-4",
"wbs-5"
);
hintEl.classList.remove(
"hint-1",
"hint-2",
"hint-3",
"hint-4",
"hint-5"
);
cardEl.classList.remove(
"level-1",
"level-2",
"level-3",
"level-4",
"level-5"
);
circleEl.classList.add(
`wbs-${level}`
);
hintEl.classList.add(
`hint-${level}`
);
cardEl.classList.add(
`level-${level}`
);
})
.catch((error) => {
console.error(
"Waldbrand Live Fehler:",
error
);
standEl.textContent =
"Brandenburg an der Havel";
levelEl.textContent =
"–";
scaleEl.textContent =
"Aktualisierung momentan nicht verfügbar";
hintEl.textContent =
"Bitte Hinweise des Landes Brandenburg beachten.";
circleEl.classList.remove(
"wbs-1",
"wbs-2",
"wbs-3",
"wbs-4",
"wbs-5"
);
hintEl.classList.remove(
"hint-1",
"hint-2",
"hint-3",
"hint-4",
"hint-5"
);
cardEl.classList.remove(
"level-1",
"level-2",
"level-3",
"level-4",
"level-5"
);
});
}
/* =========================================================
GALERIE BILDUNTERSCHRIFTEN
========================================================= */
function initGalerieCaptions() {
const gallery =
document.querySelector(
".sigplus-gallery"
);
if (
!gallery
) {
return;
}
const captions = {
"einsatzabteilung.jpg":
"Einsatzabteilung der Freiwilligen Feuerwehr Schmerzke (Juni 2024)",
"hexenabend2025.png":
"Unser Hexenabend/Tanz in den Mai im Jahr 2025",
"IMG_5324.png":
"Das LF 10 geschmückt zum Adventsmarkt im Jahr 2025"
};
const links =
gallery.querySelectorAll(
"a.sigplus-image"
);
links.forEach(
(link) => {
const href =
link.getAttribute(
"href"
) ||
"";
const filename =
href
.split("/")
.pop();
const text =
captions[filename];
if (
!text
) {
return;
}
const caption =
document.createElement(
"div"
);
caption.className =
"ff-galerie-caption";
caption.textContent =
text;
link.insertAdjacentElement(
"afterend",
caption
);
}
);
}
/* =========================================================
TERMINE LIVE
========================================================= */
function initTermineLive() {
const ausbildung =
document.getElementById(
"ff-ausbildung-list"
);
const verein =
document.getElementById(
"ff-verein-list"
);
if (
!ausbildung ||
!verein
) {
return;
}
fetch(
ffBasePath() +
"/templates/tpl_ffschmerzke/termine-proxy.php",
{
cache: "no-store"
}
)
.then((response) => {
if (
!response.ok
) {
throw new Error(
"Termine konnten nicht geladen werden: " +
response.status
);
}
return response.json();
})
.then((data) => {
if (
!data.ok
) {
throw new Error(
"Terminkalender nicht verfügbar"
);
}
renderTermine(
ausbildung,
data.ausbildung,
"ausbildung"
);
renderTermine(
verein,
data.verein,
"verein"
);
})
.catch((error) => {
console.error(
"Termine Fehler:",
error
);
ausbildung.innerHTML = `
Termine momentan nicht verfügbar.
`;
verein.innerHTML = `
Termine momentan nicht verfügbar.
`;
});
}
/* =========================================================
TERMINE – 3 PRO SEITE
========================================================= */
function renderTermine(
container,
events,
type
) {
container.innerHTML =
"";
if (
!Array.isArray(
events
) ||
events.length === 0
) {
container.innerHTML = `
Aktuell keine Termine eingetragen.
`;
return;
}
const slider =
document.createElement(
"div"
);
slider.className =
"ff-termine-slider";
const viewport =
document.createElement(
"div"
);
viewport.className =
"ff-termine-slider-viewport";
const track =
document.createElement(
"div"
);
track.className =
"ff-termine-slider-track";
const pageSize =
3;
for (
let i = 0;
i < events.length;
i += pageSize
) {
const page =
document.createElement(
"div"
);
page.className =
"ff-termine-slider-page";
const pageEvents =
events.slice(
i,
i + pageSize
);
pageEvents.forEach(
(event) => {
const start =
new Date(
event.start
);
const day =
start.toLocaleDateString(
"de-DE",
{
day:
"2-digit"
}
);
const month =
start
.toLocaleDateString(
"de-DE",
{
month:
"short"
}
)
.replace(
".",
""
)
.toUpperCase();
let time =
"";
if (
!event.allDay
) {
time =
start.toLocaleTimeString(
"de-DE",
{
hour:
"2-digit",
minute:
"2-digit"
}
) +
" Uhr";
}
const item =
document.createElement(
"article"
);
item.className =
`ff-termin-card ff-termin-${type}`;
item.innerHTML = `
${day}
${month}
${escapeTerminHtml(
event.title
)}
${
time
? `
${time}
`
: ""
}
${
event.location
? `
${escapeTerminHtml(
event.location
)}
`
: ""
}
`;
page.appendChild(
item
);
}
);
track.appendChild(
page
);
}
viewport.appendChild(
track
);
slider.appendChild(
viewport
);
container.appendChild(
slider
);
const pages =
track.children.length;
if (
pages <= 1
) {
return;
}
const navigation =
document.createElement(
"div"
);
navigation.className =
"ff-termine-slider-nav";
const prev =
document.createElement(
"button"
);
prev.type =
"button";
prev.className =
"ff-termine-slider-arrow ff-termine-slider-prev";
prev.setAttribute(
"aria-label",
"Vorherige Termine"
);
prev.innerHTML =
"❮";
const indicator =
document.createElement(
"span"
);
indicator.className =
"ff-termine-slider-indicator";
const next =
document.createElement(
"button"
);
next.type =
"button";
next.className =
"ff-termine-slider-arrow ff-termine-slider-next";
next.setAttribute(
"aria-label",
"Nächste Termine"
);
next.innerHTML =
"❯";
navigation.appendChild(
prev
);
navigation.appendChild(
indicator
);
navigation.appendChild(
next
);
slider.appendChild(
navigation
);
let currentPage =
0;
let timer =
null;
function showPage(
pageNumber,
smooth = true
) {
if (
pageNumber < 0
) {
pageNumber =
pages - 1;
}
if (
pageNumber >= pages
) {
pageNumber =
0;
}
currentPage =
pageNumber;
track.style.transition =
smooth
? "transform .45s ease"
: "none";
track.style.transform =
`translateX(-${currentPage * 100}%)`;
indicator.textContent =
`${currentPage + 1} / ${pages}`;
}
function startTimer() {
clearInterval(
timer
);
timer =
setInterval(
() => {
showPage(
currentPage + 1
);
},
6000
);
}
function stopTimer() {
clearInterval(
timer
);
timer =
null;
}
prev.addEventListener(
"click",
() => {
showPage(
currentPage - 1
);
startTimer();
}
);
next.addEventListener(
"click",
() => {
showPage(
currentPage + 1
);
startTimer();
}
);
slider.addEventListener(
"mouseenter",
stopTimer
);
slider.addEventListener(
"mouseleave",
startTimer
);
document.addEventListener(
"visibilitychange",
() => {
if (
document.hidden
) {
stopTimer();
} else {
startTimer();
}
}
);
showPage(
0,
false
);
startTimer();
}
/* =========================================================
HTML FÜR TERMINE ESCAPEN
========================================================= */
function escapeTerminHtml(
value
) {
const div =
document.createElement(
"div"
);
div.textContent =
String(
value || ""
);
return div.innerHTML;
}
/* =========================================================
LF 10
========================================================= */
function initLF10() {
const page =
document.querySelector(
".ff-lf-page:not(.ff-mtw-page):not(.ff-tsfw-page):not(.ff-yoshi-page)"
);
if (
!page
) {
return;
}
const points = {
blaulicht: {
category:
"WARNTECHNIK",
title:
"Blaulichtanlage",
text:
"Das blaue Blinklicht warnt vor Einsatzstellen und signalisiert in Kombination mit der akustischen Signalanlage den Vorrang im Straßenverkehr durch Sonder- und Wegerechte."
},
horn: {
category:
"WARNTECHNIK",
title:
"Martin-Horn",
text:
"Das Martin-Horn (Akustische Warnanlage) dient zusammen mit der optischen Sondersignalanlage zur Warnung anderer Verkehrsteilnehmer und dem Wahrnehmen von Sonder- und Wegerechten."
},
fahrerhaus: {
category:
"FAHRZEUG",
title:
"Fahrerhaus",
text:
"Im Fahrerhaus befinden sich Maschinisten- und Gruppenführerplatz sowie die Bedienelemente für Fahrzeug, Funk und Sondersignalanlage. Der Maschinist führt das Einsatzfahrzeug und bedient technische Einrichtungen. Der Gruppenführer führt die Gruppe mit insgesamt 9 Einsatzkräften durch den Einsatz."
},
mannschaft: {
category:
"FAHRZEUG",
title:
"Mannschaftsraum",
text:
"Im Mannschaftsraum sitzen die drei Trupps: Angriffstrupp, Wassertrupp und Schlauchtrupp. Zwischen dem Angriffstrupp sitzt der Melder. In der Mannschaftskabine kann sich der Angriffstrupp mit schwerem Atemschutz ausrüsten."
},
frontblitzer: {
category:
"WARNTECHNIK",
title:
"Frontblitzer",
text:
"Die zusätzlichen Frontblitzer erhöhen die Wahrnehmbarkeit des Einsatzfahrzeuges insbesondere im Straßenverkehr."
},
fahrgestell: {
category:
"FAHRZEUGTECHNIK",
title:
"Fahrgestell",
text:
"Das LF 10 basiert auf einem Mercedes-Benz Atego 1327 AFE mit einer Motorleistung von 272 PS."
},
geraeteraum: {
category:
"BELADUNG",
title:
"Geräteraum",
text:
"In den Geräteräumen befindet sich die feuerwehrtechnische Beladung für Brandbekämpfung, technische Hilfeleistung und weitere Einsatzaufgaben. Die Ausrüstung ist verteilt auf sechs Geräteräume."
},
tank: {
category:
"LÖSCHTECHNIK",
title:
"Löschwassertank",
text:
"Das LF 10 führt einen Löschwasservorrat von 1.200 Litern mit. Dadurch kann unmittelbar nach dem Eintreffen mit der Brandbekämpfung begonnen werden."
},
pumpe: {
category:
"LÖSCHTECHNIK",
title:
"Feuerlöschkreiselpumpe",
text:
"Die Feuerlöschkreiselpumpe FPN 10-2000 dient der Wasserversorgung und Brandbekämpfung. Sie fördert bei 10 Bar bis zu 2000L/min."
},
lichtmast: {
category:
"BELEUCHTUNG",
title:
"LED-Lichtmast",
text:
"Mit dem LED-Lichtmast können Einsatzstellen bei Dunkelheit großflächig ausgeleuchtet werden. Zudem ist der Lichtmast mit einem weiteren blauen Blinklicht ausgestattet."
},
dachbox: {
category:
"DACHBELADUNG",
title:
"Dachbox",
text:
"Auf dem Fahrzeugdach befindet sich eine zusätzliche Dachbox mit Werkzeugen zur Brandbekämpfung. Ausserdem befindet sich auf dem Dach die vierteilige Steckleiter sowie Saugelängen zur Wasserentnahme aus offenen Gewässern."
},
umfeld: {
category:
"BELEUCHTUNG",
title:
"LED-Umfeldbeleuchtung",
text:
"Die LED-Umfeldbeleuchtung sorgt rund um das Fahrzeug für eine gleichmäßige Ausleuchtung des Arbeitsbereiches."
},
warnanlage: {
category:
"WARNTECHNIK",
title:
"Heckwarneinrichtung",
text:
"Die Heckwarneinrichtung erhöht die Sicherheit an Einsatzstellen im Straßenverkehr und insbesondere bei Einsätzen auf der Bundesautobahn A2. Helle Blitzleuchten erhöhen die Sichtbarkeit enorm."
},
bschlauch: {
category:
"LÖSCHTECHNIK",
title:
"300 Meter B-Schlauch",
text:
"Im Heck des LF 10 werden 300 Meter B-Schlauch mitgeführt. Damit kann auch über größere Entfernungen eine Wasserversorgung aufgebaut werden. Die 300m Schlauch können während der Fahrt abgerollt werden."
}
};
initVehicleHotspotPage(
page,
points,
"point",
"LF10"
);
}
/* =========================================================
MTW
========================================================= */
function initMTW() {
const page =
document.querySelector(
".ff-mtw-page"
);
if (
!page
) {
return;
}
const points = {
blaulicht: {
category:
"WARNTECHNIK",
title:
"Blaulichtanlage",
text:
"Die Blaulichtanlage auf dem Fahrzeugdach sorgt dafür, dass der Mannschaftstransportwagen auf Einsatzfahrten und an Einsatzstellen deutlich wahrgenommen wird."
},
funk: {
category:
"KOMMUNIKATION",
title:
"Funktechnik",
text:
"Der Mannschaftstransportwagen verfügt über Funktechnik zur Kommunikation mit der Leitstelle und weiteren Einsatzfahrzeugen."
},
fahrerhaus: {
category:
"FAHRZEUG",
title:
"Innenraum-vorne",
text:
"Im vorderen Fahrzeugbereich befinden sich Fahrer- und Beifahrerplatz sowie die Bedienelemente für Fahrzeug, Funk und Sondersignalanlage."
},
mannschaft: {
category:
"MANNSCHAFT",
title:
"Innenraum-hinten",
text:
"Der Mannschaftstransportwagen dient vor allem der Beförderung von Einsatzkräften zu Einsätzen, Ausbildungen und weiteren Veranstaltungen."
},
beladung: {
category:
"BELADUNG",
title:
"Stauraum und Beladung",
text:
"Im hinteren Fahrzeugbereich steht Stauraum für persönliche Ausrüstung und weitere Materialien zur Verfügung."
},
fahrgestell: {
category:
"FAHRZEUGTECHNIK",
title:
"Fahrgestell",
text:
"Der Mannschaftstransportwagen basiert auf einem Renault Trafic und verbindet kompakte Abmessungen mit ausreichend Platz für Mannschaft und Ausrüstung."
},
warnbeklebung: {
category:
"SICHERHEIT",
title:
"Warnbeklebung",
text:
"Die auffällige Feuerwehrbeklebung und reflektierenden Elemente erhöhen die Sichtbarkeit des Fahrzeuges im Straßenverkehr und an Einsatzstellen."
},
front: {
category:
"FAHRZEUG",
title:
"Fahrzeugfront",
text:
"Die Fahrzeugfront trägt die gut sichtbare Feuerwehrkennzeichnung und ist Teil des einheitlichen Erscheinungsbildes des MTW."
}
};
initVehicleHotspotPage(
page,
points,
"mtwPoint",
"MTW"
);
}
/* =========================================================
TSF-W
========================================================= */
function initTSFW() {
const page =
document.querySelector(
".ff-tsfw-page"
);
if (
!page
) {
return;
}
const points = {
blaulicht: {
category:
"WARNTECHNIK",
title:
"Blaulichtanlage",
text:
"Die Blaulichtanlage auf dem Fahrzeugdach machte das TSF-W auf Einsatzfahrten und an Einsatzstellen deutlich erkennbar."
},
warntechnik: {
category:
"WARNTECHNIK",
title:
"Warntechnik",
text:
"Zusammen mit der optischen Warnanlage verfügte das Fahrzeug über die notwendige Sondersignalanlage für Einsatzfahrten."
},
fahrerhaus: {
category:
"FAHRZEUG",
title:
"Fahrerhaus",
text:
"Im vorderen Fahrzeugbereich befanden sich Maschinisten-Platz, Gruppenführer-Platz und die zur Fahrzeugführung erforderlichen Bedienelemente."
},
mannschaft: {
category:
"MANNSCHAFT",
title:
"Mannschaftsraum",
text:
"Das TSF-W mit Staffelbesatzung bot auf der Rückbank Platz für Angriffstrupp und Wassertrupp."
},
geraeteraum: {
category:
"BELADUNG",
title:
"Geräteraum",
text:
"Im Geräteaufbau wurde die feuerwehrtechnische Beladung für Brandbekämpfung und weitere Einsatzaufgaben mitgeführt. Durch den Schwerpunkt Bundesautobahn 2, war das TSF-W mit einem Hydraulischen Rettungssatz ausgestattet."
},
fahrgestell: {
category:
"FAHRZEUGTECHNIK",
title:
"Mercedes-Benz 612 D",
text:
"Das ehemalige TSF-W basiert auf einem Mercedes-Benz 612 D Fahrgestell."
},
pumpe: {
category:
"LÖSCHTECHNIK",
title:
"Tragkraftspritze",
text:
"Als Tragkraftspritzenfahrzeug verfügte das Fahrzeug über eine Tragkraftspritze (kurz: TS) zur Wasserversorgung."
},
wasser: {
category:
"LÖSCHTECHNIK",
title:
"Löschwasservorrat",
text:
"Das TSF-W führte einen eigenen Löschwasservorrat mit und ermöglichte dadurch einen schnellen ersten Löschangriff mittels Schnellangriffeinrichtung. Die Hochdruckanlage arbeitete Wassersparend, sodass man selbst mit 750L einen Moment Puffer hatte."
},
aufbau: {
category:
"FAHRZEUGTECHNIK",
title:
"Schmitz-Aufbau",
text:
"Der feuerwehrtechnische Aufbau des Fahrzeuges stammt von Schmitz und bot Stauraum für die mitgeführte Einsatztechnik. Am Heck gab es eine große Klappe anstelle eines Rolltores."
},
front: {
category:
"FAHRZEUG",
title:
"Fahrzeugfront",
text:
"Die markante Front des Mercedes-Benz 612 D mit Feuerwehrschriftzug prägte über viele Jahre das Erscheinungsbild des Fahrzeuges."
}
};
initVehicleHotspotPage(
page,
points,
"tsfwPoint",
"TSF-W"
);
}
/* =========================================================
GEMEINSAME FAHRZEUG-HOTSPOT-LOGIK
========================================================= */
function initVehicleHotspotPage(
page,
points,
datasetKey,
vehicleName
) {
const datasetAttribute =
datasetKey === "point"
? "data-point"
: datasetKey === "mtwPoint"
? "data-mtw-point"
: "data-tsfw-point";
const hotspots =
Array.from(
page.querySelectorAll(
`.ff-lf-hotspot[${datasetAttribute}]`
)
);
const placeholder =
page.querySelector(
".ff-lf-info-placeholder"
);
const info =
page.querySelector(
".ff-lf-info-content"
);
const infoCategory =
page.querySelector(
".ff-lf-info-category"
);
const infoTitle =
page.querySelector(
".ff-lf-info-title"
);
const infoText =
page.querySelector(
".ff-lf-info-text"
);
const infoImageWrap =
page.querySelector(
".ff-lf-info-image-wrap"
);
const infoImage =
page.querySelector(
".ff-lf-info-image"
);
const infoClose =
page.querySelector(
".ff-lf-info-close"
);
const overlay =
page.querySelector(
".ff-lf-mobile-overlay"
);
const sheet =
page.querySelector(
".ff-lf-mobile-sheet"
);
const mobileCategory =
page.querySelector(
".ff-lf-mobile-category"
);
const mobileTitle =
page.querySelector(
".ff-lf-mobile-title"
);
const mobileText =
page.querySelector(
".ff-lf-mobile-text"
);
const mobileImageWrap =
page.querySelector(
".ff-lf-mobile-image-wrap"
);
const mobileImage =
page.querySelector(
".ff-lf-mobile-image"
);
const mobileClose =
page.querySelector(
".ff-lf-mobile-close"
);
function isMobile() {
return window.matchMedia(
"(max-width: 680px)"
).matches;
}
function setImage(
wrap,
imageElement,
imagePath,
title
) {
if (
!wrap ||
!imageElement
) {
return;
}
if (
!imagePath
) {
wrap.hidden =
true;
imageElement.removeAttribute(
"src"
);
imageElement.alt =
"";
return;
}
let finalPath =
String(
imagePath
).trim();
if (
!finalPath.startsWith("/") &&
!finalPath.startsWith("http://") &&
!finalPath.startsWith("https://")
) {
finalPath =
ffBasePath() +
"/" +
finalPath.replace(
/^\/+/,
""
);
}
wrap.hidden =
true;
imageElement.onload =
function () {
wrap.hidden =
false;
};
imageElement.onerror =
function () {
console.error(
`${vehicleName} Bild konnte nicht geladen werden:`,
finalPath
);
wrap.hidden =
true;
};
imageElement.alt =
title;
imageElement.src =
finalPath +
(
finalPath.includes("?")
? "&"
: "?"
) +
"v=" +
Date.now();
}
function setActiveHotspot(
selected
) {
hotspots.forEach(
(hotspot) => {
hotspot.classList.toggle(
"is-active",
hotspot === selected
);
}
);
}
function showPoint(
hotspot
) {
const key =
hotspot.dataset[
datasetKey
];
const point =
points[key];
if (
!point
) {
console.error(
`Unbekannter ${vehicleName}-Hotspot:`,
key
);
return;
}
const imagePath =
hotspot.dataset.image ||
"";
setActiveHotspot(
hotspot
);
if (
isMobile()
) {
if (
mobileCategory
) {
mobileCategory.textContent =
point.category;
}
if (
mobileTitle
) {
mobileTitle.textContent =
point.title;
}
if (
mobileText
) {
mobileText.textContent =
point.text;
}
setImage(
mobileImageWrap,
mobileImage,
imagePath,
point.title
);
if (
sheet
) {
sheet.classList.add(
"is-open"
);
sheet.setAttribute(
"aria-hidden",
"false"
);
}
if (
overlay
) {
overlay.classList.add(
"is-open"
);
}
document.body.style.overflow =
"hidden";
return;
}
if (
placeholder
) {
placeholder.hidden =
true;
}
if (
info
) {
info.hidden =
false;
}
if (
infoCategory
) {
infoCategory.textContent =
point.category;
}
if (
infoTitle
) {
infoTitle.textContent =
point.title;
}
if (
infoText
) {
infoText.textContent =
point.text;
}
setImage(
infoImageWrap,
infoImage,
imagePath,
point.title
);
}
function clearHotspots() {
hotspots.forEach(
(hotspot) => {
hotspot.classList.remove(
"is-active"
);
}
);
}
function closeDesktopInfo() {
if (
info
) {
info.hidden =
true;
}
if (
placeholder
) {
placeholder.hidden =
false;
}
clearHotspots();
}
function closeMobileInfo() {
if (
sheet
) {
sheet.classList.remove(
"is-open"
);
sheet.setAttribute(
"aria-hidden",
"true"
);
}
if (
overlay
) {
overlay.classList.remove(
"is-open"
);
}
document.body.style.overflow =
"";
clearHotspots();
}
hotspots.forEach(
(hotspot) => {
hotspot.addEventListener(
"click",
() => {
showPoint(
hotspot
);
}
);
}
);
infoClose?.addEventListener(
"click",
closeDesktopInfo
);
mobileClose?.addEventListener(
"click",
closeMobileInfo
);
overlay?.addEventListener(
"click",
closeMobileInfo
);
document.addEventListener(
"keydown",
(event) => {
if (
event.key !==
"Escape"
) {
return;
}
if (
isMobile()
) {
closeMobileInfo();
} else {
closeDesktopInfo();
}
}
);
window.addEventListener(
"resize",
() => {
if (
!isMobile()
) {
closeMobileInfo();
}
}
);
}
/* =========================================================
FAHRZEUG MODALS
========================================================= */
function initVehicleModals() {
const triggers =
document.querySelectorAll(
"[data-vehicle-modal]"
);
if (
!triggers.length
) {
return;
}
function closeAllVehicleModals() {
document
.querySelectorAll(
".ff-vehicle-modal-overlay.is-open"
)
.forEach(
(overlay) => {
overlay.classList.remove(
"is-open"
);
overlay.setAttribute(
"aria-hidden",
"true"
);
}
);
document.body.style.overflow =
"";
}
function openVehicleModal(
id
) {
const overlay =
document.getElementById(
id
);
if (
!overlay
) {
return;
}
closeAllVehicleModals();
void overlay.offsetWidth;
overlay.classList.add(
"is-open"
);
overlay.setAttribute(
"aria-hidden",
"false"
);
document.body.style.overflow =
"hidden";
}
triggers.forEach(
(trigger) => {
trigger.addEventListener(
"click",
() => {
openVehicleModal(
trigger.dataset.vehicleModal
);
}
);
trigger.addEventListener(
"keydown",
(event) => {
if (
event.key === "Enter" ||
event.key === " "
) {
event.preventDefault();
openVehicleModal(
trigger.dataset.vehicleModal
);
}
}
);
}
);
document
.querySelectorAll(
".ff-vehicle-modal-close"
)
.forEach(
(button) => {
button.addEventListener(
"click",
closeAllVehicleModals
);
}
);
document
.querySelectorAll(
".ff-vehicle-modal-overlay"
)
.forEach(
(overlay) => {
overlay.addEventListener(
"click",
(event) => {
if (
event.target ===
overlay
) {
closeAllVehicleModals();
}
}
);
}
);
document.addEventListener(
"keydown",
(event) => {
if (
event.key ===
"Escape"
) {
closeAllVehicleModals();
}
}
);
}
/* =========================================================
CHRONIK – ZEITREISE
========================================================= */
function initChronikZeitreise() {
const page =
document.querySelector(
".ff-timejourney-page"
);
if (
!page
) {
return;
}
const route =
page.querySelector(
".ff-timejourney-route"
);
if (
!route
) {
return;
}
const steps =
Array.from(
route.querySelectorAll(
".ff-timejourney-step"
)
);
if (
!steps.length
) {
return;
}
const flipCard =
route.querySelector(
".ff-timejourney-flip"
);
const flipInner =
flipCard
?.querySelector(
".ff-timejourney-flip-inner"
);
const flipFront =
flipCard
?.querySelector(
".ff-timejourney-flip-front"
);
const flipBack =
flipCard
?.querySelector(
".ff-timejourney-flip-back"
);
let flipDone =
false;
function getFlipFaceHeight(
face
) {
if (
!face
) {
return 0;
}
const card =
face.querySelector(
".ff-timejourney-card"
);
const element =
card ||
face;
return Math.ceil(
element
.getBoundingClientRect()
.height
);
}
function syncFlipHeight() {
if (
!flipCard ||
!flipInner ||
!flipFront ||
!flipBack
) {
return;
}
const frontHeight =
getFlipFaceHeight(
flipFront
);
const backHeight =
getFlipFaceHeight(
flipBack
);
const maxHeight =
Math.max(
frontHeight,
backHeight
);
if (
!maxHeight
) {
return;
}
flipInner.style.setProperty(
"--ff-flip-height",
`${maxHeight}px`
);
flipInner.style.height =
`${maxHeight}px`;
flipCard.style.minHeight =
`${maxHeight}px`;
}
if (
flipCard &&
flipInner &&
flipFront &&
flipBack
) {
flipCard.classList.remove(
"is-flipped"
);
flipDone =
false;
window.requestAnimationFrame(
() => {
syncFlipHeight();
window.requestAnimationFrame(
() => {
syncFlipHeight();
}
);
}
);
const flipImages =
flipCard.querySelectorAll(
"img"
);
flipImages.forEach(
(img) => {
if (
img.complete
) {
window.requestAnimationFrame(
syncFlipHeight
);
return;
}
img.addEventListener(
"load",
() => {
window.requestAnimationFrame(
syncFlipHeight
);
},
{
once: true
}
);
img.addEventListener(
"error",
() => {
window.requestAnimationFrame(
syncFlipHeight
);
},
{
once: true
}
);
}
);
}
route.hidden =
false;
steps.forEach(
(step) => {
step.hidden =
false;
step.classList.remove(
"is-visible",
"is-current",
"is-past",
"is-scroll-visible",
"is-scroll-current",
"is-scroll-past"
);
}
);
const revealObserver =
new IntersectionObserver(
(entries) => {
entries.forEach(
(entry) => {
if (
!entry.isIntersecting
) {
return;
}
entry.target.classList.add(
"is-scroll-visible"
);
if (
entry.target ===
flipCard
) {
window.requestAnimationFrame(
syncFlipHeight
);
}
}
);
},
{
root:
null,
rootMargin:
"0px 0px -12% 0px",
threshold:
0.12
}
);
steps.forEach(
(step) => {
revealObserver.observe(
step
);
}
);
function checkFlipProgress() {
if (
!flipCard ||
!flipInner ||
!flipFront ||
!flipBack ||
flipDone
) {
return;
}
const rect =
flipCard.getBoundingClientRect();
const triggerLine =
window.innerHeight *
0.18;
if (
rect.top <=
triggerLine &&
rect.bottom > 0
) {
flipDone =
true;
syncFlipHeight();
window.requestAnimationFrame(
() => {
flipCard.classList.add(
"is-flipped"
);
window.requestAnimationFrame(
syncFlipHeight
);
}
);
}
}
function updateCurrentStep() {
const viewportFocus =
window.innerHeight *
0.48;
let currentIndex =
-1;
steps.forEach(
(step, index) => {
const rect =
step.getBoundingClientRect();
const stepCenter =
rect.top +
Math.min(
rect.height / 2,
180
);
if (
stepCenter <=
viewportFocus
) {
currentIndex =
index;
}
}
);
if (
currentIndex === -1 &&
steps[0]
.getBoundingClientRect()
.top <
window.innerHeight *
0.8
) {
currentIndex =
0;
}
steps.forEach(
(step, index) => {
step.classList.remove(
"is-scroll-current",
"is-scroll-past"
);
if (
index <
currentIndex
) {
step.classList.add(
"is-scroll-past"
);
}
if (
index ===
currentIndex
) {
step.classList.add(
"is-scroll-current"
);
}
}
);
checkFlipProgress();
}
function updateTimelineProgress() {
const routeRect =
route.getBoundingClientRect();
const focus =
window.innerHeight *
0.5;
const travelled =
focus -
routeRect.top;
const available =
Math.max(
1,
routeRect.height -
60
);
let percent =
(
travelled /
available
) *
100;
percent =
Math.max(
0,
Math.min(
100,
percent
)
);
route.style.setProperty(
"--ff-journey-progress",
`${percent}%`
);
}
let ticking =
false;
function updateJourney() {
updateCurrentStep();
updateTimelineProgress();
ticking =
false;
}
function requestJourneyUpdate() {
if (
ticking
) {
return;
}
ticking =
true;
window.requestAnimationFrame(
updateJourney
);
}
window.addEventListener(
"scroll",
requestJourneyUpdate,
{
passive: true
}
);
let resizeTimer =
null;
window.addEventListener(
"resize",
() => {
window.clearTimeout(
resizeTimer
);
resizeTimer =
window.setTimeout(
() => {
syncFlipHeight();
requestJourneyUpdate();
},
120
);
},
{
passive: true
}
);
window.addEventListener(
"load",
() => {
syncFlipHeight();
requestJourneyUpdate();
},
{
once: true
}
);
if (
document.fonts &&
document.fonts.ready
) {
document.fonts.ready.then(
() => {
syncFlipHeight();
requestJourneyUpdate();
}
);
}
syncFlipHeight();
requestJourneyUpdate();
}
/* =========================================================
SOCIAL MEDIA
========================================================= */
.ff-einsaetze-social-links {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin: 26px 0 14px;
}
.ff-einsaetze-social-link {
display: grid;
grid-template-columns: 54px minmax(0, 1fr) 38px;
align-items: center;
gap: 14px;
min-width: 0;
min-height: 96px;
padding: 15px 15px 15px 16px;
color: #111 !important;
text-decoration: none !important;
background: #fff !important;
border: 1px solid #e2e2e2;
border-radius: 15px;
box-shadow:
0 3px 12px rgba(0, 0, 0, .04);
transition:
transform .2s ease,
box-shadow .2s ease,
border-color .2s ease;
}
.ff-einsaetze-social-link:hover {
background: #fff !important;
border-color: rgba(193, 18, 31, .4);
box-shadow:
0 8px 22px rgba(0, 0, 0, .07);
transform: translateY(-2px);
}
.ff-einsaetze-social-image {
display: flex;
align-items: center;
justify-content: center;
width: 54px;
height: 54px;
overflow: hidden;
background: #fff;
border-radius: 13px;
}
.ff-einsaetze-social-image img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.ff-einsaetze-social-image-wa {
color: #fff;
background: #25d366;
}
.ff-einsaetze-social-image-wa svg {
width: 31px;
height: 31px;
}
.ff-einsaetze-social-content {
display: flex;
flex-direction: column;
min-width: 0;
}
.ff-einsaetze-social-topline {
margin-bottom: 2px;
color: #888;
font-size: .66rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .06em;
}
.ff-einsaetze-social-content strong {
overflow: hidden;
color: #111;
font-size: .96rem;
font-weight: 900;
line-height: 1.2;
white-space: nowrap;
text-overflow: ellipsis;
}
.ff-einsaetze-social-description {
margin-top: 4px;
overflow: hidden;
color: #666;
font-size: .75rem;
white-space: nowrap;
text-overflow: ellipsis;
}
.ff-einsaetze-social-arrow {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
color: #c1121f;
background: #f5f5f5;
border-radius: 50%;
font-size: 1.15rem;
font-weight: 900;
transition:
color .2s ease,
background .2s ease,
transform .2s ease;
}
.ff-einsaetze-social-link:hover
.ff-einsaetze-social-arrow {
color: #fff;
background: #c1121f;
transform: translateX(2px);
}
/* =========================================================
STATISTIK CONTAINER
========================================================= */
.ff-einsatz-statistik {
margin: 0 0 42px;
padding: 24px;
background: #fff;
border: 1px solid #e4e4e4;
border-radius: 16px;
box-shadow:
0 5px 18px rgba(0, 0, 0, .05);
}
.ff-einsatz-statistik-head {
margin-bottom: 20px;
}
.ff-einsatz-statistik-head h2 {
margin: 0;
color: #111;
font-size: 1.45rem;
font-weight: 900;
}
.ff-einsatz-statistik-head h2 span {
color: #777;
}
/* =========================================================
STATISTIK KARTEN
========================================================= */
.ff-einsatz-statistik-cards {
display: grid;
grid-template-columns:
repeat(5, minmax(0, 1fr));
gap: 10px;
}
.ff-stat-card {
appearance: none;
-webkit-appearance: none;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
width: 100%;
min-width: 0;
min-height: 118px;
margin: 0;
padding: 16px;
color: #111;
text-align: left;
background: #f7f7f7;
border: 1px solid #e8e8e8;
border-radius: 13px;
font: inherit;
}
button.ff-stat-card {
cursor: pointer;
}
.ff-stat-filter {
transition:
transform .18s ease,
border-color .18s ease,
box-shadow .18s ease,
background .18s ease;
}
.ff-stat-filter:hover {
transform: translateY(-2px);
border-color: #c1121f;
box-shadow:
0 5px 14px rgba(0, 0, 0, .07);
}
.ff-stat-card-main,
.ff-stat-filter.is-active {
color: #fff;
background: #c1121f;
border-color: #c1121f;
}
.ff-stat-filter.is-active .ff-stat-value,
.ff-stat-filter.is-active .ff-stat-label,
.ff-stat-card-main .ff-stat-value,
.ff-stat-card-main .ff-stat-label {
color: #fff;
}
.ff-stat-card-main:not(.is-active) {
color: #111;
background: #f7f7f7;
border-color: #e8e8e8;
}
.ff-stat-card-main:not(.is-active)
.ff-stat-value {
color: #111;
}
.ff-stat-card-main:not(.is-active)
.ff-stat-label {
color: #777;
}
.ff-stat-symbol {
display: block;
margin-bottom: 7px;
font-size: 1.15rem;
}
.ff-stat-value {
display: block;
color: #111;
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-weight: 900;
line-height: 1;
}
.ff-stat-label {
display: block;
margin-top: 7px;
color: #777;
font-size: .72rem;
font-weight: 700;
}
/* =========================================================
NEUE VERTEILUNG
========================================================= */
.ff-stat-distribution {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid #ededed;
}
.ff-stat-distribution-title {
margin-bottom: 13px;
color: #777;
font-size: .69rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .06em;
}
/* =========================================================
EINE VERTEILUNGSZEILE
========================================================= */
.ff-stat-distribution-row {
appearance: none;
-webkit-appearance: none;
display: grid;
grid-template-columns:
180px minmax(0, 1fr) 64px;
align-items: center;
gap: 18px;
width: 100%;
min-height: 42px;
margin: 0;
padding: 4px 0;
color: #111;
text-align: left;
background: transparent;
border: 0;
font: inherit;
cursor: pointer;
}
.ff-stat-distribution-row +
.ff-stat-distribution-row {
margin-top: 3px;
}
/* =========================================================
LABEL
========================================================= */
.ff-stat-distribution-label {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
color: #444;
font-size: .78rem;
font-weight: 800;
}
.ff-stat-distribution-icon {
width: 20px;
flex: 0 0 20px;
text-align: center;
}
/* =========================================================
TRACK
========================================================= */
.ff-stat-distribution-track {
position: relative;
display: block;
width: 100%;
height: 10px;
overflow: hidden;
background: #ededed;
border-radius: 999px;
}
/* =========================================================
ROTE FÜLLUNG
WICHTIG:
width kommt aus JS.
21,4 % = exakt 21,4 % rot
========================================================= */
.ff-stat-distribution-fill {
position: absolute;
top: 0;
bottom: 0;
left: 0;
display: block;
width: 0;
background: #c1121f;
border-radius: 999px;
transition:
width .8s cubic-bezier(.22, 1, .36, 1);
}
/* =========================================================
PROZENTZAHL
========================================================= */
.ff-stat-distribution-percent {
display: block;
min-width: 64px;
color: #111;
font-size: .8rem;
font-weight: 900;
text-align: right;
white-space: nowrap;
}
/* =========================================================
HOVER
========================================================= */
.ff-stat-distribution-row:hover
.ff-stat-distribution-label {
color: #c1121f;
}
.ff-stat-distribution-row:hover
.ff-stat-distribution-track {
background: #e5e5e5;
}
/* =========================================================
FILTER INFO
========================================================= */
.ff-einsatz-filter-info {
margin-top: 17px;
padding: 10px 13px;
color: #555;
background: #f7f7f7;
border-radius: 9px;
font-size: .78rem;
font-weight: 700;
}
.ff-einsatz-filter-info strong {
color: #c1121f;
}
/* =========================================================
EINSATZÜBERSICHT KOPF
========================================================= */
.ff-einsaetze-section-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
margin-bottom: 14px;
}
.ff-einsaetze-section-head h2 {
margin: 2px 0 0;
color: #111;
font-size: 1.35rem;
font-weight: 900;
}
.ff-einsatz-filter-reset {
appearance: none;
-webkit-appearance: none;
padding: 9px 14px;
color: #c1121f;
background: #fff;
border: 1px solid #c1121f;
border-radius: 999px;
font-size: .75rem;
font-weight: 800;
cursor: pointer;
}
.ff-einsatz-filter-reset:hover {
color: #fff;
background: #c1121f;
}
/* =========================================================
STÄRKE
========================================================= */
.ff-einsatz-strength {
display: inline-flex;
align-items: center;
gap: 5px;
white-space: nowrap;
}
.ff-einsatz-strength strong {
font-weight: 900;
}
.ff-einsatz-strength-text {
font-weight: 500;
}
.ff-einsatz-strength-empty {
color: #aaa;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 900px) {
.ff-einsaetze-social-links {
grid-template-columns: 1fr;
gap: 9px;
}
.ff-einsatz-statistik-cards {
grid-template-columns:
repeat(3, minmax(0, 1fr));
}
.ff-stat-distribution-row {
grid-template-columns:
155px minmax(0, 1fr) 58px;
gap: 12px;
}
}
/* =========================================================
HANDY
========================================================= */
@media (max-width: 680px) {
/* SOCIAL */
.ff-einsaetze-social-links {
margin-top: 20px;
}
.ff-einsaetze-social-link {
grid-template-columns:
46px minmax(0, 1fr) 32px;
gap: 11px;
min-height: 78px;
padding: 12px;
background: #fff !important;
border-radius: 13px;
}
.ff-einsaetze-social-image {
width: 46px;
height: 46px;
}
.ff-einsaetze-social-image-wa svg {
width: 27px;
height: 27px;
}
.ff-einsaetze-social-arrow {
width: 30px;
height: 30px;
}
/* STATISTIK */
.ff-einsatz-statistik {
margin-bottom: 32px;
padding: 16px;
border-radius: 14px;
}
.ff-einsatz-statistik-head {
margin-bottom: 15px;
}
.ff-einsatz-statistik-head h2 {
font-size: 1.3rem;
}
.ff-einsatz-statistik-cards {
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 8px;
}
.ff-stat-card {
min-height: 102px;
padding: 13px;
border-radius: 11px;
}
.ff-stat-card-main {
grid-column: 1 / -1;
min-height: 90px;
}
.ff-stat-card-strength {
grid-column: 1 / -1;
}
.ff-stat-value {
font-size: 1.8rem;
}
/* VERTEILUNG MOBILE */
.ff-stat-distribution {
margin-top: 20px;
padding-top: 17px;
}
.ff-stat-distribution-title {
margin-bottom: 10px;
}
.ff-stat-distribution-row {
display: grid;
grid-template-columns:
minmax(0, 1fr) auto;
gap: 7px 12px;
padding: 8px 0;
}
.ff-stat-distribution-label {
grid-column: 1;
grid-row: 1;
font-size: .76rem;
}
.ff-stat-distribution-percent {
grid-column: 2;
grid-row: 1;
min-width: 52px;
font-size: .76rem;
}
.ff-stat-distribution-track {
grid-column: 1 / -1;
grid-row: 2;
height: 8px;
}
/* EINSATZÜBERSICHT */
.ff-einsaetze-section-head {
align-items: flex-start;
flex-direction: column;
gap: 10px;
}
#ff-einsaetze-komplett {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.ff-einsaetze-table {
min-width: 650px;
}
}
/* =========================================================
DATENSCHUTZ-BANNER
========================================================= */
#ff-cookie-banner[hidden] {
display: none !important;
}
.ff-cookie-banner {
position: fixed;
left: 20px;
right: 20px;
bottom: 20px;
z-index: 99999;
max-width: 980px;
margin: 0 auto;
background: #ffffff;
border: 1px solid #e5e5e5;
border-top: 4px solid #c1121f;
border-radius: 14px;
box-shadow:
0 10px 35px rgba(0, 0, 0, 0.18);
}
.ff-cookie-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
padding: 20px 22px;
}
.ff-cookie-text {
flex: 1;
}
.ff-cookie-text strong {
display: block;
margin-bottom: 6px;
color: #111;
font-size: 1rem;
font-weight: 900;
}
.ff-cookie-text p {
margin: 0;
color: #555;
font-size: 0.85rem;
line-height: 1.55;
}
.ff-cookie-actions {
display: flex;
flex-shrink: 0;
gap: 10px;
}
.ff-cookie-btn {
min-height: 44px;
padding: 10px 17px;
border-radius: 9px;
border: 1px solid transparent;
font: inherit;
font-size: 0.82rem;
font-weight: 800;
cursor: pointer;
transition:
background 0.15s ease,
border-color 0.15s ease,
transform 0.15s ease;
}
.ff-cookie-btn:hover {
transform: translateY(-1px);
}
.ff-cookie-btn-primary {
color: #ffffff;
background: #c1121f;
border-color: #c1121f;
}
.ff-cookie-btn-primary:hover {
background: #a90f1a;
border-color: #a90f1a;
}
.ff-cookie-btn-secondary {
color: #222222;
background: #ffffff;
border-color: #d6d6d6;
}
.ff-cookie-btn-secondary:hover {
background: #f5f5f5;
}
/* HANDY */
@media (max-width: 700px) {
.ff-cookie-banner {
left: 10px;
right: 10px;
bottom: 10px;
}
.ff-cookie-inner {
display: block;
padding: 18px;
}
.ff-cookie-actions {
display: grid;
grid-template-columns: 1fr;
margin-top: 15px;
}
.ff-cookie-btn {
width: 100%;
}
}
/* =========================================================
FOOTER – DATENSCHUTZ-EINSTELLUNGEN
========================================================= */
.ff-footer-privacy {
margin-top: 10px;
margin-bottom: 8px;
}
.ff-footer-privacy-link {
appearance: none;
border: 0;
background: transparent;
padding: 0;
margin: 0;
font: inherit;
color: inherit;
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
opacity: 0.85;
}
.ff-footer-privacy-link:hover,
.ff-footer-privacy-link:focus-visible {
opacity: 1;
}
.ff-footer-privacy-link:focus-visible {
outline: 2px solid currentColor;
outline-offset: 4px;
border-radius: 3px;
}
/* =========================================================
DATENSCHUTZ – AUSWAHLOPTIONEN
========================================================= */
.ff-cookie-options {
display: grid;
gap: 10px;
margin-top: 16px;
}
.ff-cookie-option {
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
}
.ff-cookie-option input {
margin-top: 4px;
flex: 0 0 auto;
}
.ff-cookie-option span {
display: grid;
gap: 2px;
}
.ff-cookie-option small {
line-height: 1.4;
opacity: 0.8;
}
/* =========================================================
WETTER – NOCH KEINE EINWILLIGUNG
========================================================= */
.ff-weather-consent {
padding: 24px 18px;
text-align: center;
}
.ff-weather-consent p {
margin: 0 0 16px;
line-height: 1.55;
}
.ff-weather-consent-btn {
appearance: none;
border: 0;
border-radius: 8px;
padding: 10px 16px;
background: #c1121f;
color: #fff;
font: inherit;
font-weight: 600;
cursor: pointer;
}
.ff-weather-consent-btn:hover {
filter: brightness(0.92);
}
.ff-weather-consent-btn:focus-visible {
outline: 2px solid #c1121f;
outline-offset: 3px;
}
.ff-weather-frame[hidden] {
display: none;
}
/* =========================================================
MTW – KENNZAHLEN AUF MOBILE
========================================================= */
@media (max-width: 680px) {
.ff-mtw-page .ff-lf-facts {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
width: 100%;
}
.ff-mtw-page .ff-lf-fact {
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
.ff-mtw-page .ff-lf-fact-content {
width: 100%;
min-width: 0;
max-width: 100%;
text-align: center;
}
.ff-mtw-page .ff-lf-fact-content strong,
.ff-mtw-page .ff-lf-fact-content small,
.ff-mtw-page .ff-vehicle-hint,
.ff-mtw-page .ff-lf-fact-label {
display: block;
width: 100%;
max-width: 100%;
white-space: normal !important;
overflow-wrap: anywhere;
word-break: normal;
box-sizing: border-box;
}
}
/* =========================================================
WILLKOMMEN-POPUP
========================================================= */
.ff-welcome-overlay {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(0, 0, 0, 0.45);
}
.ff-welcome-overlay[hidden] {
display: none;
}
.ff-welcome-modal {
position: relative;
width: 100%;
max-width: 620px;
max-height: calc(100vh - 40px);
overflow-y: auto;
padding: 32px;
box-sizing: border-box;
background: #fff;
border-radius: 16px;
box-shadow:
0 20px 60px
rgba(0, 0, 0, 0.25);
}
.ff-welcome-close {
position: absolute;
top: 14px;
right: 16px;
width: 40px;
height: 40px;
border: 0;
border-radius: 50%;
background: #f2f2f2;
color: #333;
font-size: 26px;
line-height: 1;
cursor: pointer;
}
.ff-welcome-kicker {
display: block;
margin-bottom: 8px;
color: #c1121f;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.14em;
}
.ff-welcome-modal h2 {
margin:
0
45px
18px
0;
font-size: 30px;
line-height: 1.15;
}
.ff-welcome-modal p {
line-height: 1.6;
color: #555;
}
.ff-welcome-help {
margin-top: 22px;
padding: 18px;
border-left: 4px solid #c1121f;
border-radius: 8px;
background: #f8f8f8;
}
.ff-welcome-help strong {
display: block;
margin-bottom: 5px;
color: #222;
font-size: 17px;
}
.ff-welcome-help p {
margin: 0;
}
.ff-welcome-thanks {
margin-bottom: 0;
font-weight: 600;
}
.ff-welcome-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 24px;
}
.ff-welcome-btn {
appearance: none;
border-radius: 9px;
padding: 11px 17px;
font: inherit;
font-weight: 600;
cursor: pointer;
}
.ff-welcome-btn-primary {
border: 1px solid #c1121f;
background: #c1121f;
color: #fff;
}
.ff-welcome-btn-secondary {
border: 1px solid #ccc;
background: #fff;
color: #333;
}
/* =========================================================
WILLKOMMEN – MOBILE
========================================================= */
@media (max-width: 680px) {
.ff-welcome-overlay {
align-items: flex-end;
padding: 12px;
}
.ff-welcome-modal {
max-height: 88vh;
padding:
28px
20px
22px;
border-radius: 16px;
}
.ff-welcome-modal h2 {
font-size: 25px;
}
.ff-welcome-actions {
display: grid;
grid-template-columns: 1fr;
}
.ff-welcome-btn {
width: 100%;
}
}
/* =========================================================
WILLKOMMEN-POPUP
========================================================= */
.ff-welcome-overlay {
position: fixed;
inset: 0;
z-index: 100000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(0, 0, 0, 0.48);
}
.ff-welcome-overlay[hidden] {
display: none;
}
.ff-welcome-modal {
position: relative;
width: 100%;
max-width: 620px;
max-height: calc(100vh - 40px);
overflow-y: auto;
padding: 34px;
box-sizing: border-box;
background: #fff;
border-radius: 16px;
box-shadow:
0 22px 70px
rgba(0, 0, 0, 0.28);
}
.ff-welcome-close {
position: absolute;
top: 14px;
right: 14px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 50%;
background: #f1f1f1;
color: #333;
font-size: 26px;
line-height: 1;
cursor: pointer;
}
.ff-welcome-close:hover {
background: #e7e7e7;
}
.ff-welcome-kicker {
display: block;
margin-bottom: 8px;
color: #c1121f;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.14em;
}
.ff-welcome-modal h2 {
margin:
0
46px
18px
0;
color: #222;
font-size: 30px;
line-height: 1.2;
}
.ff-welcome-modal > p {
margin:
0
0
15px;
color: #555;
line-height: 1.6;
}
.ff-welcome-help {
margin:
22px
0
18px;
padding: 18px;
border-left: 4px solid #c1121f;
border-radius: 8px;
background: #f7f7f7;
}
.ff-welcome-help strong {
display: block;
margin-bottom: 6px;
color: #222;
font-size: 17px;
}
.ff-welcome-help p {
margin: 0;
color: #555;
line-height: 1.55;
}
.ff-welcome-thanks {
font-weight: 600;
}
.ff-welcome-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 24px;
}
.ff-welcome-btn {
appearance: none;
padding: 11px 18px;
border-radius: 9px;
font: inherit;
font-weight: 600;
cursor: pointer;
}
.ff-welcome-btn-primary {
border: 1px solid #c1121f;
background: #c1121f;
color: #fff;
}
.ff-welcome-btn-primary:hover {
filter: brightness(0.93);
}
.ff-welcome-btn-secondary {
border: 1px solid #ccc;
background: #fff;
color: #333;
}
/* =========================================================
WILLKOMMEN-POPUP – MOBILE
========================================================= */
@media (max-width: 680px) {
.ff-welcome-overlay {
align-items: flex-end;
padding: 10px;
}
.ff-welcome-modal {
max-height: 90vh;
padding:
28px
20px
20px;
border-radius: 16px;
}
.ff-welcome-modal h2 {
margin-right: 38px;
font-size: 25px;
}
.ff-welcome-actions {
display: grid;
grid-template-columns: 1fr;
}
.ff-welcome-btn {
width: 100%;
}
}
/* =========================================================
WILLKOMMEN-POPUP
========================================================= */
.ff-welcome-overlay {
position: fixed;
inset: 0;
z-index: 100000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(0, 0, 0, 0.48);
}
.ff-welcome-overlay[hidden] {
display: none;
}
.ff-welcome-modal {
position: relative;
width: 100%;
max-width: 620px;
max-height: calc(100vh - 40px);
overflow-y: auto;
padding: 34px;
box-sizing: border-box;
background: #fff;
border-radius: 16px;
box-shadow:
0 22px 70px
rgba(0, 0, 0, 0.28);
}
.ff-welcome-close {
position: absolute;
top: 14px;
right: 14px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 50%;
background: #f1f1f1;
color: #333;
font-size: 26px;
line-height: 1;
cursor: pointer;
}
.ff-welcome-close:hover {
background: #e7e7e7;
}
.ff-welcome-kicker {
display: block;
margin-bottom: 8px;
color: #c1121f;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.14em;
}
.ff-welcome-modal h2 {
margin:
0
46px
18px
0;
color: #222;
font-size: 30px;
line-height: 1.2;
}
.ff-welcome-modal > p {
margin:
0
0
15px;
color: #555;
line-height: 1.6;
}
.ff-welcome-help {
margin:
22px
0
18px;
padding: 18px;
border-left: 4px solid #c1121f;
border-radius: 8px;
background: #f7f7f7;
}
.ff-welcome-help strong {
display: block;
margin-bottom: 6px;
color: #222;
font-size: 17px;
}
.ff-welcome-help p {
margin: 0;
color: #555;
line-height: 1.55;
}
.ff-welcome-thanks {
font-weight: 600;
}
.ff-welcome-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 24px;
}
.ff-welcome-btn {
appearance: none;
padding: 11px 18px;
border-radius: 9px;
font: inherit;
font-weight: 600;
cursor: pointer;
}
.ff-welcome-btn-primary {
border: 1px solid #c1121f;
background: #c1121f;
color: #fff;
}
.ff-welcome-btn-primary:hover {
filter: brightness(0.93);
}
.ff-welcome-btn-secondary {
border: 1px solid #ccc;
background: #fff;
color: #333;
}
/* =========================================================
FEHLERMELDEFORMULAR
========================================================= */
.ff-error-report-overlay {
position: fixed;
inset: 0;
z-index: 100100;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(0, 0, 0, 0.5);
}
.ff-error-report-overlay[hidden] {
display: none;
}
.ff-error-report-modal {
position: relative;
width: 100%;
max-width: 620px;
max-height: calc(100vh - 40px);
overflow-y: auto;
padding: 34px;
box-sizing: border-box;
background: #fff;
border-radius: 16px;
box-shadow:
0 22px 70px
rgba(0, 0, 0, 0.3);
}
.ff-error-report-close {
position: absolute;
top: 14px;
right: 14px;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 0;
border-radius: 50%;
background: #f1f1f1;
color: #333;
font-size: 26px;
line-height: 1;
cursor: pointer;
}
.ff-error-report-close:hover {
background: #e7e7e7;
}
.ff-error-report-kicker {
display: block;
margin-bottom: 8px;
color: #c1121f;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.14em;
}
.ff-error-report-modal h2 {
margin:
0
45px
10px
0;
color: #222;
font-size: 30px;
line-height: 1.2;
}
.ff-error-report-intro {
margin-bottom: 24px;
color: #555;
line-height: 1.55;
}
.ff-error-report-field {
display: grid;
gap: 7px;
margin-bottom: 18px;
}
.ff-error-report-field label {
color: #222;
font-weight: 600;
}
.ff-error-report-field label > span {
color: #c1121f;
}
.ff-error-report-field label small {
color: #777;
font-weight: 400;
}
.ff-error-report-field input,
.ff-error-report-field select,
.ff-error-report-field textarea {
width: 100%;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 8px;
padding: 11px 12px;
background: #fff;
color: #222;
font: inherit;
}
.ff-error-report-field textarea {
min-height: 130px;
resize: vertical;
}
.ff-error-report-field input:focus,
.ff-error-report-field select:focus,
.ff-error-report-field textarea:focus {
outline: 2px solid rgba(193, 18, 31, 0.18);
border-color: #c1121f;
}
.ff-error-report-field input[readonly] {
background: #f6f6f6;
color: #666;
}
.ff-error-report-field small {
color: #777;
line-height: 1.4;
}
.ff-error-report-privacy {
margin-top: 6px;
padding: 12px 14px;
border-radius: 8px;
background: #f6f6f6;
}
.ff-error-report-privacy p {
margin: 0;
color: #666;
font-size: 13px;
line-height: 1.5;
}
.ff-error-report-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 22px;
}
.ff-error-report-btn {
appearance: none;
padding: 11px 18px;
border-radius: 9px;
font: inherit;
font-weight: 600;
cursor: pointer;
}
.ff-error-report-btn-primary {
border: 1px solid #c1121f;
background: #c1121f;
color: #fff;
}
.ff-error-report-btn-primary:hover {
filter: brightness(0.93);
}
.ff-error-report-btn-secondary {
border: 1px solid #ccc;
background: #fff;
color: #333;
}
.ff-error-report-btn:disabled {
opacity: 0.6;
cursor: wait;
}
/* =========================================================
FEHLERMELDUNG – STATUS
========================================================= */
.ff-error-report-status {
margin-bottom: 18px;
padding: 13px 15px;
border-radius: 8px;
line-height: 1.45;
}
.ff-error-report-status.is-success {
border: 1px solid #badabd;
background: #edf7ee;
color: #235c2a;
}
.ff-error-report-status.is-error {
border: 1px solid #efc1c4;
background: #fff0f0;
color: #8a1d25;
}
/* =========================================================
WEB3FORMS BOTCHECK
========================================================= */
.ff-error-report-botcheck {
position: absolute !important;
left: -9999px !important;
width: 1px !important;
height: 1px !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 680px) {
.ff-welcome-overlay,
.ff-error-report-overlay {
align-items: flex-end;
padding: 10px;
}
.ff-welcome-modal,
.ff-error-report-modal {
max-height: 92vh;
padding:
28px
20px
20px;
border-radius: 16px;
}
.ff-welcome-modal h2,
.ff-error-report-modal h2 {
margin-right: 38px;
font-size: 25px;
}
.ff-welcome-actions,
.ff-error-report-actions {
display: grid;
grid-template-columns: 1fr;
}
.ff-welcome-btn,
.ff-error-report-btn {
width: 100%;
}
}
/* =========================================================
FEHLER MELDEN – FESTER BUTTON
========================================================= */
.ff-error-report-fab {
position: fixed;
right: 18px;
bottom: 22px;
z-index: 90000;
display: flex;
align-items: center;
gap: 9px;
height: 48px;
padding:
0
15px
0
7px;
border: 0;
border-radius: 999px;
background: #c1121f;
color: #fff;
font: inherit;
font-weight: 600;
box-shadow:
0 5px 18px
rgba(0, 0, 0, 0.22);
cursor: pointer;
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}
.ff-error-report-fab:hover {
transform: translateY(-2px);
box-shadow:
0 8px 24px
rgba(0, 0, 0, 0.28);
}
.ff-error-report-fab-icon {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
flex: 0 0 34px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.18);
color: #fff;
font-size: 21px;
font-weight: 800;
line-height: 1;
}
.ff-error-report-fab-text {
white-space: nowrap;
}
/* =========================================================
FEHLERBUTTON – MOBILE
========================================================= */
@media (max-width: 680px) {
.ff-error-report-fab {
right: 12px;
bottom: 14px;
width: 48px;
height: 48px;
padding: 7px;
justify-content: center;
}
.ff-error-report-fab-text {
display: none;
}
.ff-error-report-fab-icon {
width: 34px;
height: 34px;
flex-basis: 34px;
}
}
/* FF Schmerzke · isolated Joomla login presentation, version 1.0.0 */
.ff-auth {
--auth-red: #c1121f;
--auth-ink: var(--text, #222);
--auth-muted: var(--muted, #666);
width: 100%;
padding: clamp(24px, 5vw, 64px) 16px 64px;
color: var(--auth-ink);
font-family: inherit;
line-height: 1.5;
}
.ff-auth, .ff-auth * { box-sizing: border-box; }
.ff-auth .ff-auth-card {
width: 100%;
max-width: 500px;
margin: 0 auto;
padding: clamp(24px, 4vw, 40px);
border: 1px solid #e8e8e8;
border-top: 4px solid var(--auth-red);
border-radius: var(--radius, 14px);
background: var(--card, #fff);
box-shadow: var(--shadow, 0 6px 18px rgba(0, 0, 0, .08));
overflow-wrap: anywhere;
}
.ff-auth .ff-auth-intro { margin-bottom: 28px; }
.ff-auth .ff-auth-emblem {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
margin-bottom: 18px;
border-radius: 14px;
background: #fff0f1;
color: var(--auth-red);
}
.ff-auth .ff-auth-emblem svg { width: 28px; height: 28px; }
.ff-auth .ff-auth-eyebrow {
margin: 0 0 8px;
font-size: .75rem;
font-weight: 750;
letter-spacing: .035em;
color: var(--auth-red);
}
.ff-auth #ff-auth-title {
margin: 0 0 10px;
font-size: clamp(1.6rem, 4vw, 2rem);
font-weight: 800;
line-height: 1.2;
letter-spacing: -.025em;
color: var(--auth-ink);
}
.ff-auth .ff-auth-description { margin: 0; color: var(--auth-muted); font-size: .95rem; }
/* The wrapper supplies the page heading; preserve Joomla descriptions and fields. */
.ff-auth .com-users-login > .page-header,
.ff-auth .com-users-logout > .page-header { display: none; }
.ff-auth form, .ff-auth fieldset {
display: block;
min-width: 0;
width: 100%;
padding: 0;
margin: 0;
border: 0;
background: transparent;
box-shadow: none;
}
.ff-auth .control-group { display: block; margin: 0 0 18px; }
.ff-auth .control-label, .ff-auth .controls { float: none; width: 100%; margin: 0; padding: 0; }
.ff-auth .control-label label { display: block; margin-bottom: 7px; font-weight: 650; font-size: .9rem; }
.ff-auth .form-control {
display: block;
width: 100%;
min-width: 0;
min-height: 48px;
padding: 11px 13px;
border: 1px solid #cdd0d4;
border-radius: 10px;
background: #fff;
color: var(--auth-ink);
font: inherit;
font-size: 16px;
box-shadow: none;
}
.ff-auth .form-control:focus { border-color: var(--auth-red); outline: 3px solid #c1121f26; outline-offset: 1px; }
.ff-auth .form-control[aria-invalid="true"], .ff-auth .form-control.invalid { border-color: #a20e19; }
.ff-auth .form-control-feedback { display: block; color: #a20e19; font-size: .85rem; }
.ff-auth .input-group { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 8px; width: 100%; }
.ff-auth .input-group > .form-control { flex: 1 1 0; }
.ff-auth .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
max-width: 100%;
min-height: 48px;
height: auto;
padding: 12px 16px;
border: 1px solid #d5d7da;
border-radius: 10px;
background: #f7f7f7;
color: var(--auth-ink);
font: inherit;
font-weight: 700;
line-height: 1.4;
text-decoration: none;
white-space: normal;
cursor: pointer;
box-shadow: none;
}
.ff-auth .btn-primary { color: #fff; background: var(--auth-red); border-color: var(--auth-red); }
.ff-auth .btn:hover { background: #ededed; }
.ff-auth .btn-primary:hover { background: #a70f1b; border-color: #a70f1b; }
.ff-auth .btn:focus-visible, .ff-auth a:focus-visible { outline: 3px solid #a70f1b; outline-offset: 3px; }
/* Plugin-provided SVGs may have no intrinsic size; never let them fill the page. */
.ff-auth .btn svg, .ff-auth .btn img, .ff-auth .btn .icon {
display: inline-block !important;
width: 22px !important;
height: 22px !important;
max-width: 22px !important;
max-height: 22px !important;
flex: 0 0 22px;
object-fit: contain;
}
.ff-auth .btn svg { fill: currentColor; }
.ff-auth .input-group > .input-password-toggle { flex: 0 0 auto; width: auto; max-width: 112px; padding: 8px 10px; font-size: .75rem; }
/* Use Joomla's own changing label, readable even without an icon font. */
.ff-auth .input-password-toggle > [aria-hidden="true"] { display: none; }
.ff-auth .input-password-toggle .visually-hidden {
position: static !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
clip: auto !important;
clip-path: none !important;
white-space: normal !important;
}
.ff-auth .com-users-login__remember { margin: 0 0 22px; }
.ff-auth .form-check { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; padding: 0; }
.ff-auth .form-check-input { float: none; flex: 0 0 18px; width: 18px; height: 18px; margin: 0; accent-color: var(--auth-red); }
.ff-auth .form-check-label { margin: 0; font-size: .9rem; cursor: pointer; }
.ff-auth .com-users-login__options { display: grid; gap: 2px; margin-top: 22px; padding: 16px 0 0; border-top: 1px solid #ededed; }
.ff-auth .com-users-login__options a { display: flex; align-items: center; min-height: 44px; padding: 6px 0; border: 0; background: transparent; color: var(--auth-red); font-size: .875rem; text-decoration: none; }
.ff-auth .com-users-login__options a:hover { text-decoration: underline; }
.ff-auth .login-description { margin-bottom: 20px; }
.ff-auth .login-image { max-width: 100%; height: auto; border-radius: 10px; }
.ff-auth .ff-auth-note { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid #ededed; color: var(--auth-muted); font-size: .75rem; }
@media (max-width: 680px) {
.ff-auth { padding: 24px 0 72px; }
.ff-auth .ff-auth-card { padding: 24px 20px; }
}