diff --git a/README.md b/README.md index e69de29..86cec52 100644 --- a/README.md +++ b/README.md @@ -0,0 +1,73 @@ +# Feuerwehr Stadt Wehlen – Webseite + +## Zwei komplette Design-Varianten (Redesign) + +Die Seite existiert in zwei vollständig eigenständigen Designs mit +identischem Inhalt – zum Vergleich und zur Entscheidungsfindung: + +| Variante | Pfad | Design | +|---|---|---| +| **Rot** | `varianten/rot/` | Dark Theme: schwarz-roter Hintergrund, gelbe Akzente, kantige Shapes, große Hero-Sektion, Zeitleisten-Tabs | +| **Grau** | `varianten/grau/` | Light Theme: hellgrauer Hintergrund, weiße abgerundete Karten, roter Header mit Logo-Muster, Accordion, Kategorie-Filter | + +Jede Variante umfasst 6 Seiten: +`index.html` (Start), `geschichte.html`, `technik.html`, +`fahrzeug.html` (Detailseite, datengetrieben via `?id=lf10` usw.), +`mitglieder.html` (Organigramm), `dienstplan.html`. + +## Struktur + +``` +varianten/ + shared/ ZENTRALE DATENQUELLEN (für beide Designs) + fahrzeuge.js Alle Fahrzeuge/Boote/Anhänger inkl. Technikdaten + geschichte.js Alle 5 Geschichts-Epochen + mitglieder.js Organigramm & Mitgliederlisten + dienste.js CSV-Logik für Dienstplan & Termine + rot/ + index.html, geschichte.html, technik.html, + fahrzeug.html, mitglieder.html, dienstplan.html + assets/ + rot.css Komplettes Dark-Theme + components.js Navbar, Footer, Hero + alle Renderer + grau/ + (gleiche 6 Seiten) + assets/ + grau.css Komplettes Light-Theme + components.js Navbar, Footer, Hero + alle Renderer +``` + +## Prinzip + +- **Inhalte werden nur an EINER Stelle gepflegt**: in `varianten/shared/` + (bzw. `dienstplan/dienstplan.csv` für Termine). Beide Designs rendern + daraus ihr eigenes Markup. +- Navbar, Footer und Hero liegen je Variante zentral in + `assets/components.js` und werden in die Platzhalter + `#site-header`, `#site-footer`, `#site-hero` eingefügt. +- Jede Seite setzt `window.FFW_BASE = "../../"` (Pfad zum Projekt-Root), + damit Bilder und die CSV auch aus den Unterordnern gefunden werden. +- Der aktive Menüpunkt wird über `` gesteuert. + +## Inhalte ändern + +| Was | Wo | +|---|---| +| Termine / Dienstplan | `dienstplan/dienstplan.csv` | +| Fahrzeugdaten, Bilder, Beladung | `varianten/shared/fahrzeuge.js` | +| Geschichtstexte | `varianten/shared/geschichte.js` | +| Mitglieder / Organigramm | `varianten/shared/mitglieder.js` | +| Menü / Footer | `varianten/{rot,grau}/assets/components.js` | +| Farben eines Designs | `varianten/{rot,grau}/assets/*.css` (`:root`-Variablen) | + +## Hinweise + +- Zum lokalen Ansehen einen Server starten (wegen CSV-Fetch): + `python3 -m http.server 8000`, dann + `http://localhost:8000/varianten/rot/` bzw. `.../grau/` öffnen. +- Der ELW 1 hat aktuell keine Detailseite – die Karte ist mit + „Demnächst“ markiert (`inArbeit: true` in `fahrzeuge.js`). +- `index.html` / `index_old.html` im Root sowie die Ordner `geschichte/`, + `technik/`, `mitglieder/` enthalten den ALTEN Stand und können nach + der Design-Entscheidung entfernt werden (die Bilder darin werden vom + Redesign weiterverwendet – vorher Bilder umziehen!). diff --git a/dienstplan/dienstplan.js b/dienstplan/dienstplan.js index 311f77e..ac76698 100644 --- a/dienstplan/dienstplan.js +++ b/dienstplan/dienstplan.js @@ -1,4 +1,6 @@ -const csvPfad = "dienstplan/dienstplan.csv"; +// window.FFW_BASE wird auf Seiten in Unterordnern gesetzt (z.B. "../../"), +// damit der CSV-Pfad von überall funktioniert. Root-Seiten: Standard "". +const csvPfad = (window.FFW_BASE || "") + "dienstplan/dienstplan.csv"; fetch(csvPfad) .then(res => res.text()) diff --git a/varianten/grau/assets/components.js b/varianten/grau/assets/components.js new file mode 100644 index 0000000..d05e0a7 --- /dev/null +++ b/varianten/grau/assets/components.js @@ -0,0 +1,296 @@ +/* ====================================================== + components.js – VARIANTE GRAU (Modern Light Theme) + ------------------------------------------------------ + Rendert alle wiederkehrenden Elemente und die Inhalte + aus den zentralen Daten-Dateien (varianten/shared/). + + Erwartet window.FFW_BASE (Pfad zum Projekt-Root). + Aktiver Navigationspunkt über . + ====================================================== */ + +(function () { + const base = window.FFW_BASE || ""; + const page = document.body.dataset.page || ""; + + /* ====================================================== + NAVIGATION & FOOTER + ====================================================== */ + const NAV = ` + `; + + const FOOTER = ` + `; + + const headerMount = document.getElementById("site-header"); + if (headerMount) headerMount.innerHTML = NAV; + + const footerMount = document.getElementById("site-footer"); + if (footerMount) footerMount.innerHTML = FOOTER; + + /* Aktiven Menüpunkt markieren */ + document.querySelectorAll(`[data-page="${page}"]`).forEach(el => el.classList.add("active")); + + /* ====================================================== + HERO (Startseite) – helle Split-Karte + Statistik + ====================================================== */ + const heroMount = document.getElementById("site-hero"); + if (heroMount) { + heroMount.innerHTML = ` +
+
+
+
+
+ Freiwillige Feuerwehr seit 1901 +

Feuerwehr Stadt Wehlen

+

Ehrenamtlich im Einsatz für Stadt Wehlen und Pötzscha – bei Brand, Hilfeleistung und Wasserrettung auf der Elbe.

+
+ Unsere Technik + Dienstplan & Termine +
+
+
+
+ +
+
+
+ +
+
27
Aktive
+
23
Jugendfeuerwehr
+
9
Passive
+
172
Förderverein
+
+
`; + } + + /* ====================================================== + GESCHICHTE – Accordion + ====================================================== */ + const geschichteMount = document.getElementById("geschichte-inhalt"); + if (geschichteMount && window.FFW_GESCHICHTE) { + const items = window.FFW_GESCHICHTE.map((epoche, i) => { + const inhalt = epoche.eintraege.map(e => { + const bildBtn = e.bild + ? `` + : ""; + return `${e.titel ? `

${e.titel}

` : ""}${e.html}${bildBtn}`; + }).join(""); + + return ` +
+

+ +

+
+
${inhalt}
+
+
`; + }).join(""); + + geschichteMount.innerHTML = ` +
${items}
`; + + /* Modal für den Zeitungsartikel von 1921 */ + document.body.insertAdjacentHTML("beforeend", ` + `); + } + + /* ====================================================== + TECHNIK – Kartenraster mit Kategorie-Filter + ====================================================== */ + const technikMount = document.getElementById("technik-grid"); + if (technikMount && window.FFW_FAHRZEUGE) { + const kategorien = [...new Set(window.FFW_FAHRZEUGE.map(f => f.kategorie))]; + + const filterBtns = [``] + .concat(kategorien.map(k => ``)) + .join(""); + + const karten = window.FFW_FAHRZEUGE.map(f => { + const inner = ` +
+ ${f.name} + ${f.kategorie} + ${f.inArbeit ? `Demnächst` : ""} +
+
${f.name}
→
`; + + return `
+ ${f.inArbeit + ? `
${inner}
` + : `${inner}`} +
`; + }).join(""); + + technikMount.innerHTML = ` +
${filterBtns}
+
${karten}
`; + + technikMount.querySelectorAll(".filter-btn").forEach(btn => { + btn.addEventListener("click", () => { + technikMount.querySelectorAll(".filter-btn").forEach(b => b.classList.remove("active")); + btn.classList.add("active"); + const filter = btn.dataset.filter; + technikMount.querySelectorAll(".tech-item").forEach(item => { + item.classList.toggle("d-none", filter !== "alle" && item.dataset.kategorie !== filter); + }); + }); + }); + } + + /* ====================================================== + FAHRZEUG – Detailseite (datengetrieben via ?id=) + ====================================================== */ + const fzMount = document.getElementById("fahrzeug-detail"); + if (fzMount && window.FFW_FAHRZEUGE) { + const id = new URLSearchParams(location.search).get("id"); + const f = window.FFW_FAHRZEUGE.find(x => x.id === id); + + if (!f || f.inArbeit) { + fzMount.innerHTML = ` +
+

Fahrzeug nicht gefunden

+

Dieses Fahrzeug existiert nicht (mehr) oder die Seite befindet sich im Aufbau.

+ ← Zurück zur Technik-Übersicht +
`; + } else { + document.title = `${f.titel} | Feuerwehr Stadt Wehlen`; + + const specs = f.daten.map(([label, wert]) => + `
  • ${label}${wert}
    • `).join(""); + + const bereiche = (f.bereiche || []).map(b => ` +

    ${b.titel}

    + `).join(""); + + const galerie = f.bilder.length > 1 + ? `` + : `${f.bilder[0].alt}`; + + fzMount.innerHTML = ` +
    +
    +
    + ${f.standort ? `Standort: ${f.standort}` : ""} +

    Fahrzeugdaten

    +
      ${specs}
    + ${bereiche} + ${f.text ? `

    ${f.text}

    ` : ""} +
    +
    +
    + ${galerie} + ${f.hinweis ? `
    ${f.hinweis}
    ` : ""} +
    +
    `; + + const carouselEl = fzMount.querySelector("#fahrzeugCarousel"); + if (carouselEl && window.bootstrap) new bootstrap.Carousel(carouselEl, { interval: 5000 }); + } + } + + /* ====================================================== + MITGLIEDER – Organigramm + ====================================================== */ + const orgMount = document.getElementById("mitglieder-inhalt"); + if (orgMount && window.FFW_MITGLIEDER) { + const M = window.FFW_MITGLIEDER; + const box = (eintrag, klasse = "") => ` +
    + ${eintrag.rolle} + ${eintrag.namen.join("
    ")}     +
    `; + + const ebene = (eintraege, klasse = "") => + `
    ${eintraege.map(e => box(e, klasse)).join("")}
    `; + + const gruppen = M.gruppen.map(g => { + const inhalt = g.abschnitte + ? g.abschnitte.map(a => `${a.label}`).join("") + : ``; + return `

    ${g.titel}

    ${inhalt}
    `; + }).join(""); + + orgMount.innerHTML = ` + ${ebene([M.fuehrung[0]], "fuehrung")} + ${ebene([M.fuehrung[1]], "fuehrung")} + ${ebene(M.stab)} + ${ebene(M.fachwarte)} +
    ${gruppen}
    `; + } +})(); diff --git a/varianten/grau/assets/grau.css b/varianten/grau/assets/grau.css new file mode 100644 index 0000000..57bba30 --- /dev/null +++ b/varianten/grau/assets/grau.css @@ -0,0 +1,642 @@ +/* ====================================================== + grau.css – VARIANTE GRAU ("Modern Light" Theme) + ------------------------------------------------------ + Helles, modernes Design: hellgrauer Hintergrund, weiße + abgerundete Karten mit weichen Schatten, viel Weißraum. + Rot nur als Akzent – der Header trägt das rote + Logo-Muster. Mobile-first. + ====================================================== */ + +:root { + --rot: #b30000; + --rot-dunkel: #8a0000; + --bg: #eef0f4; + --karte: #ffffff; + --text: #2b2f36; + --muted: #6b7280; + --border: #e3e6ea; + --schatten: 0 6px 24px rgba(30, 34, 45, 0.08); + --schatten-hover: 0 14px 34px rgba(30, 34, 45, 0.14); + --radius: 16px; + --pattern: url('../../../bilder/logo2.jpeg'); +} + +* { box-sizing: border-box; } + +html { scroll-behavior: smooth; } + +body { + margin: 0; + background: var(--bg); + color: var(--text); + font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + line-height: 1.65; + min-height: 100vh; + display: flex; + flex-direction: column; + overflow-x: hidden; +} + +main { flex: 1 0 auto; } + +::selection { background: var(--rot); color: #fff; } + +::-webkit-scrollbar { width: 10px; } +::-webkit-scrollbar-track { background: var(--bg); } +::-webkit-scrollbar-thumb { background: #b9bec7; border-radius: 6px; } +::-webkit-scrollbar-thumb:hover { background: var(--rot); } + +/* ------------------------------------------------------ + Typografie + ------------------------------------------------------ */ +h1, h2, h3, h4, h5 { font-weight: 700; color: var(--text); } + +a { color: var(--rot); } +a:hover { color: var(--rot-dunkel); } + +.abschnitt-titel { + font-size: 1.6rem; + margin-bottom: 0.4rem; +} + +.abschnitt-sub { + color: var(--muted); + margin-bottom: 1.8rem; +} + +/* ------------------------------------------------------ + Buttons (abgerundet, Pill-Form) + ------------------------------------------------------ */ +.btn-pill { + display: inline-block; + background: var(--rot); + color: #fff !important; + font-weight: 600; + text-decoration: none; + padding: 0.75rem 1.7rem; + border: none; + border-radius: 999px; + box-shadow: 0 6px 16px rgba(179, 0, 0, 0.28); + transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; +} + +.btn-pill:hover { + background: var(--rot-dunkel); + transform: translateY(-2px); + box-shadow: 0 10px 22px rgba(179, 0, 0, 0.34); +} + +.btn-pill-ghost { + background: #fff; + color: var(--rot) !important; + box-shadow: inset 0 0 0 2px var(--rot); +} + +.btn-pill-ghost:hover { background: var(--rot); color: #fff !important; } + +/* ------------------------------------------------------ + Navbar (rot mit Logo-Muster, weiße Schrift) + ------------------------------------------------------ */ +.gl-navbar { + background-color: var(--rot); + background-image: var(--pattern); + background-size: 9em; + background-repeat: repeat; + background-blend-mode: multiply; + box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22); + padding: 0.9rem 0; +} + +.gl-navbar .navbar-brand { + color: #fff !important; + font-weight: 700; + font-size: 1.25rem; + display: flex; + align-items: center; + gap: 0.6rem; + text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.55); +} + +.gl-navbar .navbar-brand img { height: 2.6em; width: auto; } + +.gl-navbar .nav-link { + color: rgba(255, 255, 255, 0.92) !important; + font-weight: 600; + border-radius: 999px; + padding: 0.45rem 1rem !important; + margin: 0 0.1rem; + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.45); + transition: background 0.2s ease, color 0.2s ease; +} + +.gl-navbar .nav-link:hover { background: rgba(255, 255, 255, 0.18); color: #fff !important; } + +.gl-navbar .nav-link.active { + background: #fff; + color: var(--rot) !important; + text-shadow: none; +} + +.gl-navbar .dropdown-menu { + border: none; + border-radius: 14px; + box-shadow: var(--schatten-hover); + padding: 0.5rem; +} + +.gl-navbar .dropdown-item { border-radius: 10px; font-weight: 500; color: var(--text); } + +.gl-navbar .dropdown-item:hover, +.gl-navbar .dropdown-item.active { background: rgba(179, 0, 0, 0.08); color: var(--rot); } + +.gl-navbar .navbar-toggler { border-color: rgba(255, 255, 255, 0.7); } +.gl-navbar .navbar-toggler-icon { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); +} + +/* ------------------------------------------------------ + Hero (Startseite) – helle Split-Karte + ------------------------------------------------------ */ +.gl-hero { padding: 3rem 0 1rem; } + +.gl-hero-karte { + background: var(--karte); + border-radius: 24px; + box-shadow: var(--schatten); + overflow: hidden; +} + +.gl-hero-text { padding: 2.5rem; } + +.gl-hero-badge { + display: inline-block; + background: rgba(179, 0, 0, 0.09); + color: var(--rot); + font-weight: 700; + font-size: 0.8rem; + letter-spacing: 0.06em; + text-transform: uppercase; + border-radius: 999px; + padding: 0.35rem 1rem; + margin-bottom: 1.1rem; +} + +.gl-hero h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); line-height: 1.15; margin-bottom: 1rem; } +.gl-hero h1 .highlight { color: var(--rot); } +.gl-hero p { color: var(--muted); font-size: 1.08rem; } + +.gl-hero-cta { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.6rem; } + +.gl-hero-bild { + min-height: 260px; + height: 100%; + background: var(--hero-bild) center/cover no-repeat; +} + +/* ------------------------------------------------------ + Statistik-Kacheln (Startseite) + ------------------------------------------------------ */ +.stat-kachel { + background: var(--karte); + border-radius: var(--radius); + box-shadow: var(--schatten); + text-align: center; + padding: 1.4rem 1rem; + height: 100%; + transition: transform 0.2s ease, box-shadow 0.2s ease; +} + +.stat-kachel:hover { transform: translateY(-4px); box-shadow: var(--schatten-hover); } + +.stat-kachel .zahl { font-size: 2rem; font-weight: 800; color: var(--rot); line-height: 1.1; } +.stat-kachel .label { color: var(--muted); font-size: 0.9rem; font-weight: 600; } + +/* ------------------------------------------------------ + Karten (Termine, Quicklinks) + ------------------------------------------------------ */ +.gl-card { + background: var(--karte); + border-radius: var(--radius); + box-shadow: var(--schatten); + padding: 1.6rem; + height: 100%; + transition: transform 0.2s ease, box-shadow 0.2s ease; +} + +a.gl-card { display: block; text-decoration: none; color: inherit; } +.gl-card:hover { transform: translateY(-4px); box-shadow: var(--schatten-hover); } + +.gl-card h3 { font-size: 1.15rem; margin-bottom: 0.9rem; } +.gl-card h3 .icon { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2.2rem; + height: 2.2rem; + border-radius: 12px; + background: rgba(179, 0, 0, 0.09); + margin-right: 0.6rem; + vertical-align: middle; +} + +.gl-card .termin-datum { font-weight: 700; font-size: 1.08rem; margin-bottom: 0.25rem; } +.gl-card .termin-art { color: var(--rot); font-weight: 600; margin-bottom: 0.25rem; } +.gl-card .termin-beschr { color: var(--muted); margin-bottom: 0; } + +.gl-card .mehr { color: var(--rot); font-weight: 600; margin-top: 0.8rem; display: inline-block; } +.gl-card p.beschreibung { color: var(--muted); margin-bottom: 0; } + +/* ------------------------------------------------------ + Seitenkopf (Unterseiten) – rotes Musterband + ------------------------------------------------------ */ +.gl-seitenkopf { + background-color: var(--rot); + background-image: var(--pattern); + background-size: 11em; + background-repeat: repeat; + background-blend-mode: multiply; + color: #fff; + padding: 3.2rem 0; + text-align: center; + box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); +} + +.gl-seitenkopf h1 { color: #fff; font-size: clamp(1.7rem, 4.5vw, 2.6rem); margin: 0; text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.45); } +.gl-seitenkopf .untertitel { color: rgba(255, 255, 255, 0.88); margin: 0.5rem 0 0; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); } +.gl-seitenkopf a { color: #fff; } + +/* ------------------------------------------------------ + Geschichte – Accordion + ------------------------------------------------------ */ +.gl-accordion .accordion-item { + background: var(--karte); + border: none; + border-radius: var(--radius) !important; + box-shadow: var(--schatten); + margin-bottom: 1rem; + overflow: hidden; +} + +.gl-accordion .accordion-button { + font-weight: 700; + font-size: 1.15rem; + color: var(--text); + background: var(--karte); + padding: 1.2rem 1.5rem; +} + +.gl-accordion .accordion-button:not(.collapsed) { + background: var(--rot); + color: #fff; + box-shadow: none; +} + +.gl-accordion .accordion-button:not(.collapsed)::after { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); +} + +.gl-accordion .accordion-button:focus { box-shadow: none; border: none; } + +.gl-accordion .accordion-body { padding: 1.6rem 1.8rem; } + +.gl-accordion .accordion-body h2, +.gl-accordion .accordion-body h3 { + color: var(--rot); + font-size: 1.15rem; + margin-top: 1.4rem; + padding-bottom: 0.35rem; + border-bottom: 1px solid var(--border); +} + +.gl-accordion .accordion-body h2:first-child, +.gl-accordion .accordion-body h3:first-child { margin-top: 0; } + +.gl-accordion blockquote { + border-left: 4px solid var(--rot); + background: #faf5f5; + border-radius: 0 12px 12px 0; + padding: 1rem 1.4rem; + margin: 1.4rem 0; + font-style: italic; + color: #5a3a3a; +} + +/* ------------------------------------------------------ + Technik – Kartenraster mit Kategorie-Filter + ------------------------------------------------------ */ +.filter-leiste { + display: flex; + flex-wrap: wrap; + gap: 0.6rem; + margin-bottom: 2rem; +} + +.filter-btn { + background: var(--karte); + border: 2px solid var(--border); + color: var(--text); + font-weight: 600; + border-radius: 999px; + padding: 0.45rem 1.2rem; + cursor: pointer; + transition: all 0.2s ease; +} + +.filter-btn:hover { border-color: var(--rot); color: var(--rot); } + +.filter-btn.active { + background: var(--rot); + border-color: var(--rot); + color: #fff; + box-shadow: 0 6px 14px rgba(179, 0, 0, 0.3); +} + +.tech-card { + display: block; + background: var(--karte); + border-radius: var(--radius); + box-shadow: var(--schatten); + overflow: hidden; + text-decoration: none; + color: inherit; + height: 100%; + transition: transform 0.25s ease, box-shadow 0.25s ease; +} + +.tech-card:hover { transform: translateY(-6px); box-shadow: var(--schatten-hover); } + +.tech-card .bild-wrap { position: relative; height: 200px; overflow: hidden; } + +.tech-card .bild-wrap img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.35s ease; +} + +.tech-card:hover .bild-wrap img { transform: scale(1.07); } + +.tech-card .kat-chip { + position: absolute; + top: 12px; + left: 12px; + background: rgba(255, 255, 255, 0.94); + color: var(--rot); + font-size: 0.72rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.06em; + border-radius: 999px; + padding: 0.25rem 0.8rem; +} + +.tech-card .bald-chip { + position: absolute; + top: 12px; + right: 12px; + background: var(--rot); + color: #fff; + font-size: 0.72rem; + font-weight: 700; + border-radius: 999px; + padding: 0.25rem 0.8rem; +} + +.tech-card .body { padding: 1.2rem 1.4rem; display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; } +.tech-card .body h5 { margin: 0; font-weight: 700; } +.tech-card .body .pfeil { color: var(--rot); font-weight: 700; transition: transform 0.25s ease; } +.tech-card:hover .body .pfeil { transform: translateX(5px); } + +/* ------------------------------------------------------ + Fahrzeug-Detail + ------------------------------------------------------ */ +.fz-karte { + background: var(--karte); + border-radius: var(--radius); + box-shadow: var(--schatten); + padding: 2rem; +} + +.standort-chip { + display: inline-block; + background: rgba(179, 0, 0, 0.09); + color: var(--rot); + font-weight: 700; + font-size: 0.8rem; + text-transform: uppercase; + letter-spacing: 0.06em; + border-radius: 999px; + padding: 0.3rem 1rem; + margin-bottom: 1.2rem; +} + +.spec-list { list-style: none; padding: 0; margin: 0; } + +.spec-list li { + display: flex; + flex-wrap: wrap; + gap: 0.2rem 1rem; + padding: 0.65rem 0; + border-bottom: 1px solid var(--border); +} + +.spec-list li:last-child { border-bottom: none; } + +.spec-list .spec-label { min-width: 160px; color: var(--muted); font-weight: 600; } + +.fz-sektion { + color: var(--rot); + font-size: 1.05rem; + margin: 1.8rem 0 0.7rem; + padding-bottom: 0.3rem; + border-bottom: 2px solid rgba(179, 0, 0, 0.15); +} + +.fz-punkte { margin: 0; padding-left: 1.2rem; } +.fz-punkte li { padding: 0.2rem 0; } +.fz-punkte li::marker { color: var(--rot); } + +.fz-hinweis { + margin-top: 1.2rem; + padding: 1rem 1.3rem; + background: #fff8f6; + border-left: 4px solid var(--rot); + border-radius: 0 12px 12px 0; + color: #6b4a4a; + font-style: italic; +} + +#fahrzeugCarousel { border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten); } +#fahrzeugCarousel .carousel-item img { max-height: 480px; object-fit: cover; } + +#fahrzeugCarousel .carousel-control-prev-icon, +#fahrzeugCarousel .carousel-control-next-icon { + background-color: rgba(179, 0, 0, 0.85); + background-size: 55%; + border-radius: 50%; + padding: 1.2rem; +} + +.fz-einzelbild { border-radius: var(--radius); box-shadow: var(--schatten); } + +/* ------------------------------------------------------ + Mitglieder / Organigramm + ------------------------------------------------------ */ +.org-ebene { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 1rem; + position: relative; + padding-top: 1.6rem; +} + +.org-ebene + .org-ebene::before { + content: ""; + position: absolute; + top: 0; + left: 50%; + width: 2px; + height: 1.6rem; + background: #c9ccd2; + transform: translateX(-50%); +} + +.org-box { + background: var(--karte); + border-radius: 14px; + box-shadow: var(--schatten); + padding: 1rem 1.5rem; + min-width: 210px; + text-align: center; +} + +.org-box.fuehrung { box-shadow: var(--schatten), inset 0 4px 0 var(--rot); } + +.org-box .rolle { + display: inline-block; + background: rgba(179, 0, 0, 0.09); + color: var(--rot); + border-radius: 999px; + font-size: 0.72rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.07em; + padding: 0.2rem 0.8rem; + margin-bottom: 0.5rem; +} + +.org-box .name { display: block; font-weight: 700; line-height: 1.55; } + +.org-gruppen { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 2.8rem; } + +.org-gruppe { + background: var(--karte); + border-radius: var(--radius); + box-shadow: var(--schatten); + padding: 1.4rem 1.6rem; +} + +.org-gruppe h3 { font-size: 1.05rem; color: var(--rot); margin-bottom: 0.9rem; } +.org-gruppe .label { color: var(--muted); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em; display: block; margin-top: 0.8rem; } +.org-gruppe ul { list-style: none; margin: 0; padding: 0; } +.org-gruppe li { padding: 0.18rem 0; font-size: 0.95rem; } + +/* ------------------------------------------------------ + Dienstplan-Tabelle + ------------------------------------------------------ */ +.termin-tabelle-wrap { + background: var(--karte); + border-radius: var(--radius); + box-shadow: var(--schatten); + overflow: hidden; +} + +.termin-tabelle { width: 100%; border-collapse: collapse; } + +.termin-tabelle th { + background: var(--rot); + color: #fff; + font-size: 0.82rem; + text-transform: uppercase; + letter-spacing: 0.06em; + padding: 1rem 1.2rem; + text-align: left; +} + +.termin-tabelle td { padding: 0.9rem 1.2rem; border-top: 1px solid var(--border); vertical-align: top; } + +.termin-tabelle tbody tr { transition: background 0.15s ease; } +.termin-tabelle tbody tr:hover { background: #faf5f5; } + +.termin-tabelle tr.termin-is-next td { background: rgba(179, 0, 0, 0.05); box-shadow: inset 4px 0 0 var(--rot); font-weight: 600; } + +.termin-badge { + display: inline-block; + background: #eef0f4; + color: var(--text); + font-size: 0.75rem; + font-weight: 700; + border-radius: 999px; + padding: 0.25rem 0.8rem; + white-space: nowrap; +} + +.termin-badge-fest, .termin-badge-feier { background: var(--rot); color: #fff; } +.termin-badge-praxis, .termin-badge-ausbildung { background: #e7ecf5; color: #31517f; } + +@media (max-width: 768px) { + .termin-tabelle-wrap { background: transparent; box-shadow: none; overflow: visible; } + .termin-tabelle thead { display: none; } + .termin-tabelle tr { + display: block; + background: var(--karte); + border-radius: var(--radius); + box-shadow: var(--schatten); + margin-bottom: 1rem; + padding: 0.8rem 0.4rem; + } + .termin-tabelle tr.termin-is-next { box-shadow: var(--schatten), inset 4px 0 0 var(--rot); } + .termin-tabelle td { display: flex; gap: 0.8rem; border: none; padding: 0.3rem 1.2rem; } + .termin-tabelle td::before { + content: attr(data-label); + min-width: 105px; + color: var(--muted); + font-size: 0.75rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.05em; + } +} + +/* ------------------------------------------------------ + Footer (dunkelgrau) + ------------------------------------------------------ */ +.gl-footer { + background: #23272e; + color: #aab0ba; + padding: 2.8rem 0; + margin-top: 4.5rem; + border-top: 5px solid var(--rot); +} + +.gl-footer h6 { + color: #fff; + font-size: 0.9rem; + text-transform: uppercase; + letter-spacing: 0.07em; + margin-bottom: 0.7rem; +} + +.gl-footer p, .gl-footer small { margin-bottom: 0.2rem; } + +.gl-footer .footer-nav { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.3rem; justify-content: center; } +.gl-footer .footer-nav a { color: #d7dbe1; text-decoration: none; font-size: 0.92rem; } +.gl-footer .footer-nav a:hover { color: #fff; text-decoration: underline; } + +/* ------------------------------------------------------ + Modal (Zeitungsartikel etc.) + ------------------------------------------------------ */ +.modal-content { border: none; border-radius: var(--radius); box-shadow: var(--schatten-hover); } +.modal-header { border-bottom: 1px solid var(--border); } +.modal-title { color: var(--rot); font-weight: 700; } diff --git a/varianten/grau/dienstplan.html b/varianten/grau/dienstplan.html new file mode 100644 index 0000000..9d23ee1 --- /dev/null +++ b/varianten/grau/dienstplan.html @@ -0,0 +1,65 @@ + + + + + + Dienstplan & Termine | Feuerwehr Stadt Wehlen + + + + + + + + + + + + +
    +
    +
    +

    Dienstplan & Termine

    +

    Übungen, Dienste und Veranstaltungen der Feuerwehr Stadt Wehlen

    +
    +
    + +
    +
    +
    +
    +

    Nächster Dienst

    +

    Wird geladen …

    +
    +
    +
    +
    +

    Nächste Veranstaltung

    +

    Wird geladen …

    +
    +
    +
    + +

    Alle Termine

    +

    Der nächste Termin ist rot markiert.

    +
    +

    Wird geladen …

    +
    +
    +
    + + + + + + + + + diff --git a/varianten/grau/fahrzeug.html b/varianten/grau/fahrzeug.html new file mode 100644 index 0000000..4c64f99 --- /dev/null +++ b/varianten/grau/fahrzeug.html @@ -0,0 +1,46 @@ + + + + + + Fahrzeug | Feuerwehr Stadt Wehlen + + + + + + + + + + + + +
    +
    +
    +

    Technik im Detail

    +

    ← Zurück zur Technik-Übersicht

    +
    +
    + +
    +
    +
    +
    + + + + + + + + + diff --git a/varianten/grau/geschichte.html b/varianten/grau/geschichte.html new file mode 100644 index 0000000..69c03cc --- /dev/null +++ b/varianten/grau/geschichte.html @@ -0,0 +1,46 @@ + + + + + + Geschichte | Feuerwehr Stadt Wehlen + + + + + + + + + + + + +
    +
    +
    +

    Unsere Geschichte

    +

    Von der Pflichtfeuerwehr 1865 bis zur modernen Freiwilligen Feuerwehr

    +
    +
    + +
    +
    +
    +
    + + + + + + + + + diff --git a/varianten/grau/index.html b/varianten/grau/index.html new file mode 100644 index 0000000..50d708e --- /dev/null +++ b/varianten/grau/index.html @@ -0,0 +1,84 @@ + + + + + + Feuerwehr Stadt Wehlen – Startseite + + + + + + + + + + + + +
    +
    + +
    +

    Termine

    +

    Die nächsten Dienste und Veranstaltungen der Feuerwehr Stadt Wehlen

    +
    +
    +
    +

    Nächster Dienst

    +

    Wird geladen …

    +
    +
    +
    +
    +

    Nächste Veranstaltung

    +

    Wird geladen …

    +
    +
    +
    +
    + +
    +

    Über uns

    +

    Lernen Sie die Feuerwehr Stadt Wehlen kennen

    +
    +
    + +

    Geschichte

    +

    Über 120 Jahre Feuerwehr in Stadt Wehlen – von der Pflichtfeuerwehr bis heute.

    + Mehr erfahren → +     +
    +
    + +

    Technik

    +

    Fahrzeuge, Boote und Anhänger der Wehlen- und Pötzschaer Kameraden.

    + Mehr erfahren → +     +
    +
    + +

    Organigramm

    +

    Struktur und Einsatzabteilung der Feuerwehr Stadt Wehlen.

    + Mehr erfahren → +     +
    +
    +
    +
    + + + + + + + + + diff --git a/varianten/grau/mitglieder.html b/varianten/grau/mitglieder.html new file mode 100644 index 0000000..1ac2f21 --- /dev/null +++ b/varianten/grau/mitglieder.html @@ -0,0 +1,46 @@ + + + + + + Mitglieder & Organigramm | Feuerwehr Stadt Wehlen + + + + + + + + + + + + +
    +
    +
    +

    Unsere Mitglieder

    +

    Struktur und Einsatzabteilung der Stadt Wehlen

    +
    +
    + +
    +
    +
    +
    + + + + + + + + + diff --git a/varianten/grau/technik.html b/varianten/grau/technik.html new file mode 100644 index 0000000..7f82069 --- /dev/null +++ b/varianten/grau/technik.html @@ -0,0 +1,46 @@ + + + + + + Technik | Feuerwehr Stadt Wehlen + + + + + + + + + + + + +
    +
    +
    +

    Unsere Technik

    +

    Einsatzfahrzeuge, Boote und Ausrüstung der Stadt Wehlen

    +
    +
    + +
    +
    +
    +
    + + + + + + + + + diff --git a/varianten/rot/assets/components.js b/varianten/rot/assets/components.js new file mode 100644 index 0000000..05ab62b --- /dev/null +++ b/varianten/rot/assets/components.js @@ -0,0 +1,266 @@ +/* ====================================================== + components.js – VARIANTE ROT (Dark Theme) + ------------------------------------------------------ + Rendert alle wiederkehrenden Elemente und die Inhalte + aus den zentralen Daten-Dateien (varianten/shared/). + + Erwartet window.FFW_BASE (Pfad zum Projekt-Root). + Aktiver Navigationspunkt über . + ====================================================== */ + +(function () { + const base = window.FFW_BASE || ""; + const page = document.body.dataset.page || ""; + + /* ====================================================== + NAVIGATION & FOOTER + ====================================================== */ + const NAV = ` + `; + + const FOOTER = ` + `; + + const headerMount = document.getElementById("site-header"); + if (headerMount) headerMount.innerHTML = NAV; + + const footerMount = document.getElementById("site-footer"); + if (footerMount) footerMount.innerHTML = FOOTER; + + /* Aktiven Menüpunkt markieren */ + document.querySelectorAll(`[data-page="${page}"]`).forEach(el => el.classList.add("active")); + + /* ====================================================== + HERO (Startseite) + ====================================================== */ + const heroMount = document.getElementById("site-hero"); + if (heroMount) { + heroMount.innerHTML = ` +
    +
    +
    +
    Freiwillige Feuerwehr seit 1901
    +

    Feuerwehr
    Stadt Wehlen

    +

    Ehrenamtlich im Einsatz für Stadt Wehlen und Pötzscha – bei Brand, Hilfeleistung und Wasserrettung auf der Elbe.

    +
    + Unsere Technik + Dienstplan & Termine +
    +
    +
    +
    `; + } + + /* ====================================================== + GESCHICHTE – Zeitleiste mit Tabs + ====================================================== */ + const geschichteMount = document.getElementById("geschichte-inhalt"); + if (geschichteMount && window.FFW_GESCHICHTE) { + const tabs = window.FFW_GESCHICHTE.map((epoche, i) => + `` + ).join(""); + + const panels = window.FFW_GESCHICHTE.map((epoche, i) => { + const inhalt = epoche.eintraege.map(e => { + const bildBtn = e.bild + ? `` + : ""; + return `${e.titel ? `

    ${e.titel}

    ` : ""}${e.html}${bildBtn}`; + }).join(""); + return `
    ${inhalt}
    `; + }).join(""); + + geschichteMount.innerHTML = ` +
    ${tabs}
    + ${panels}`; + + geschichteMount.querySelectorAll(".zl-tab").forEach(tab => { + tab.addEventListener("click", () => { + geschichteMount.querySelectorAll(".zl-tab").forEach(t => t.classList.remove("active")); + geschichteMount.querySelectorAll(".zl-panel").forEach(p => p.classList.add("d-none")); + tab.classList.add("active"); + geschichteMount.querySelector(`[data-zl-panel="${tab.dataset.zl}"]`).classList.remove("d-none"); + }); + }); + + /* Modal für den Zeitungsartikel von 1921 */ + document.body.insertAdjacentHTML("beforeend", ` + `); + } + + /* ====================================================== + TECHNIK – Übersicht nach Kategorien gruppiert + ====================================================== */ + const technikMount = document.getElementById("technik-grid"); + if (technikMount && window.FFW_FAHRZEUGE) { + const kategorien = [...new Set(window.FFW_FAHRZEUGE.map(f => f.kategorie))]; + + technikMount.innerHTML = kategorien.map(kat => { + const karten = window.FFW_FAHRZEUGE + .filter(f => f.kategorie === kat) + .map(f => { + const inner = ` + + ${f.inArbeit ? `Demnächst` : ""} + ${f.name}→`; + return `
    + ${f.inArbeit + ? `
    ${inner}
    ` + : `${inner}`} +
    `; + }).join(""); + + return `

    ${kat}

    ${karten}
    `; + }).join(""); + } + + /* ====================================================== + FAHRZEUG – Detailseite (datengetrieben via ?id=) + ====================================================== */ + const fzMount = document.getElementById("fahrzeug-detail"); + if (fzMount && window.FFW_FAHRZEUGE) { + const id = new URLSearchParams(location.search).get("id"); + const f = window.FFW_FAHRZEUGE.find(x => x.id === id); + + if (!f || f.inArbeit) { + fzMount.innerHTML = ` +
    +

    Fahrzeug nicht gefunden

    +

    Dieses Fahrzeug existiert nicht (mehr) oder die Seite befindet sich im Aufbau.

    + ← Zurück zur Technik-Übersicht +
    `; + } else { + document.title = `${f.titel} | Feuerwehr Stadt Wehlen`; + + const specs = f.daten.map(([label, wert]) => + `
  • ${label}${wert}
    • `).join(""); + + const bereiche = (f.bereiche || []).map(b => ` +

    ${b.titel}

    + `).join(""); + + const galerie = f.bilder.length > 1 + ? `` + : `${f.bilder[0].alt}`; + + fzMount.innerHTML = ` +
    +
    +
    + ${f.standort ? `
    Standort: ${f.standort}
    ` : ""} +

    Fahrzeugdaten

    +
      ${specs}
    + ${bereiche} + ${f.text ? `

    ${f.text}

    ` : ""} +
    +
    +
    + ${galerie} + ${f.hinweis ? `
    ${f.hinweis}
    ` : ""} +
    +
    `; + + const carouselEl = fzMount.querySelector("#fahrzeugCarousel"); + if (carouselEl && window.bootstrap) new bootstrap.Carousel(carouselEl, { interval: 5000 }); + } + } + + /* ====================================================== + MITGLIEDER – Organigramm + ====================================================== */ + const orgMount = document.getElementById("mitglieder-inhalt"); + if (orgMount && window.FFW_MITGLIEDER) { + const M = window.FFW_MITGLIEDER; + const box = (eintrag, klasse = "") => ` +
    + ${eintrag.rolle} + ${eintrag.namen.join("
    ")}     +
    `; + + const ebene = (eintraege, klasse = "") => + `
    ${eintraege.map(e => box(e, klasse)).join("")}
    `; + + const gruppen = M.gruppen.map(g => { + const inhalt = g.abschnitte + ? g.abschnitte.map(a => `${a.label}`).join("") + : ``; + return `

    ${g.titel}

    ${inhalt}
    `; + }).join(""); + + orgMount.innerHTML = ` + ${ebene([M.fuehrung[0]], "fuehrung")} + ${ebene([M.fuehrung[1]], "fuehrung")} + ${ebene(M.stab)} + ${ebene(M.fachwarte)} +
    ${gruppen}
    `; + } +})(); diff --git a/varianten/rot/assets/rot.css b/varianten/rot/assets/rot.css new file mode 100644 index 0000000..bff677b --- /dev/null +++ b/varianten/rot/assets/rot.css @@ -0,0 +1,650 @@ +/* ====================================================== + rot.css – VARIANTE ROT ("Einsatz" Dark Theme) + ------------------------------------------------------ + Dunkles, kantiges Feuerwehr-Design: + schwarz-roter Hintergrund, gelbe Akzente, harte Kanten, + große Uppercase-Typografie. Mobile-first. + ====================================================== */ + +:root { + --rot: #b30000; + --rot-hell: #e10600; + --gelb: #ffcc00; + --gelb-hell: #ffe27a; + --bg: #120607; + --surface: #1f0d0e; + --surface-2: #2a1213; + --border: rgba(255, 204, 0, 0.22); + --text: #f5ead9; + --muted: #c7a491; + --pattern: url('../../../bilder/logo2.jpeg'); +} + +* { box-sizing: border-box; } + +html { scroll-behavior: smooth; } + +body { + margin: 0; + background-color: var(--bg); + background-image: linear-gradient(rgba(18, 6, 7, 0.94), rgba(18, 6, 7, 0.96)), var(--pattern); + background-size: auto, 14em; + color: var(--text); + font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + min-height: 100vh; + display: flex; + flex-direction: column; + overflow-x: hidden; +} + +main { flex: 1 0 auto; } + +::selection { background: var(--gelb); color: #1a0a00; } + +::-webkit-scrollbar { width: 10px; } +::-webkit-scrollbar-track { background: var(--bg); } +::-webkit-scrollbar-thumb { background: var(--rot); border-radius: 0; } +::-webkit-scrollbar-thumb:hover { background: var(--gelb); } + +/* ------------------------------------------------------ + Typografie + ------------------------------------------------------ */ +h1, h2, h3, h4, h5 { + text-transform: uppercase; + letter-spacing: 0.04em; + font-weight: 800; +} + +a { color: var(--gelb); } +a:hover { color: var(--gelb-hell); } + +.abschnitt-titel { + display: flex; + align-items: center; + gap: 0.75rem; + margin-bottom: 1.5rem; + color: var(--gelb); +} + +.abschnitt-titel::before { + content: ""; + width: 10px; + height: 1.6em; + background: var(--rot-hell); + transform: skewX(-12deg); + flex: none; +} + +/* ------------------------------------------------------ + Buttons (kantig, abgeschrägte Ecken) + ------------------------------------------------------ */ +.btn-ff { + display: inline-block; + background: var(--gelb); + color: #1a0a00 !important; + font-weight: 800; + text-transform: uppercase; + letter-spacing: 0.06em; + text-decoration: none; + padding: 0.8rem 1.6rem; + border: none; + clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); + transition: transform 0.2s ease, background 0.2s ease; +} + +.btn-ff:hover { background: var(--gelb-hell); transform: translateY(-2px); } + +.btn-ff-outline { + background: transparent; + color: var(--gelb) !important; + box-shadow: inset 0 0 0 2px var(--gelb); +} + +.btn-ff-outline:hover { background: var(--gelb); color: #1a0a00 !important; } + +/* ------------------------------------------------------ + Navbar (sticky, dunkles Glas, gelbe Kante) + ------------------------------------------------------ */ +.ff-navbar { + position: sticky; + top: 0; + z-index: 1030; + background: rgba(15, 5, 6, 0.92); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border-bottom: 3px solid var(--gelb); +} + +.ff-navbar .navbar-brand { + color: var(--gelb) !important; + text-transform: uppercase; + font-weight: 800; + letter-spacing: 0.05em; + display: flex; + align-items: center; + gap: 0.6rem; +} + +.ff-navbar .navbar-brand img { height: 2.6em; width: auto; } + +.ff-navbar .nav-link { + color: var(--text) !important; + text-transform: uppercase; + font-weight: 700; + font-size: 0.9rem; + letter-spacing: 0.05em; + padding: 0.6rem 0.9rem !important; + transition: color 0.2s ease; +} + +.ff-navbar .nav-link:hover, +.ff-navbar .nav-link.active { color: var(--gelb) !important; } + +.ff-navbar .nav-link.active { box-shadow: inset 0 -3px 0 var(--rot-hell); } + +.ff-navbar .dropdown-menu { + background: var(--surface); + border: 1px solid var(--border); + border-top: 3px solid var(--gelb); + border-radius: 0; +} + +.ff-navbar .dropdown-item { + color: var(--text); + text-transform: uppercase; + font-size: 0.85rem; + font-weight: 600; + letter-spacing: 0.04em; +} + +.ff-navbar .dropdown-item:hover, +.ff-navbar .dropdown-item.active { + background: var(--surface-2); + color: var(--gelb); +} + +.ff-navbar .dropdown-divider { border-top-color: var(--border); } + +.ff-navbar .navbar-toggler { border: 2px solid var(--gelb); border-radius: 0; } +.ff-navbar .navbar-toggler-icon { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23FFCC00' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); +} + +/* ------------------------------------------------------ + Hero (Startseite) + ------------------------------------------------------ */ +.ff-hero { + position: relative; + min-height: 78vh; + display: flex; + align-items: center; + isolation: isolate; + overflow: hidden; +} + +.ff-hero::before { + content: ""; + position: absolute; + inset: 0; + z-index: -2; + background: var(--hero-bild) center/cover no-repeat; + transform: scale(1.03); +} + +.ff-hero::after { + content: ""; + position: absolute; + inset: 0; + z-index: -1; + background: linear-gradient(100deg, rgba(18, 6, 7, 0.95) 20%, rgba(18, 6, 7, 0.55) 60%, rgba(179, 0, 0, 0.35)); +} + +.ff-hero-inhalt { padding: 4rem 0; max-width: 720px; } + +.ff-hero-badge { + display: inline-block; + background: var(--rot-hell); + color: #fff; + font-weight: 700; + text-transform: uppercase; + font-size: 0.8rem; + letter-spacing: 0.12em; + padding: 0.35rem 0.9rem; + transform: skewX(-12deg); + margin-bottom: 1.2rem; +} + +.ff-hero-badge > span { display: inline-block; transform: skewX(12deg); } + +.ff-hero h1 { + font-size: clamp(2.2rem, 6vw, 4.2rem); + line-height: 1.05; + color: #fff; + text-shadow: 3px 3px 0 rgba(179, 0, 0, 0.8); + margin-bottom: 1rem; +} + +.ff-hero h1 .highlight { color: var(--gelb); } + +.ff-hero p { color: var(--text); font-size: 1.1rem; max-width: 34em; } + +.ff-hero-cta { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.8rem; } + +/* ------------------------------------------------------ + Karten & Info-Boxen + ------------------------------------------------------ */ +.ff-card { + background: var(--surface); + border: 1px solid var(--border); + border-left: 5px solid var(--gelb); + padding: 1.5rem; + height: 100%; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); +} + +.ff-card h3 { + color: var(--gelb); + font-size: 1.05rem; + margin-bottom: 1rem; +} + +.ff-card .termin-datum { font-weight: 800; font-size: 1.1rem; color: #fff; margin-bottom: 0.4rem; } +.ff-card .termin-art { color: var(--gelb-hell); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.4rem; } +.ff-card .termin-beschr { color: var(--muted); margin-bottom: 0; } + +.ff-link-kachel { + display: block; + background: var(--surface); + border: 1px solid var(--border); + border-left: 5px solid var(--rot-hell); + color: var(--text) !important; + text-decoration: none; + padding: 1.2rem 1.5rem; + font-weight: 800; + text-transform: uppercase; + letter-spacing: 0.05em; + transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease; +} + +.ff-link-kachel:hover { + transform: translateX(6px); + border-left-color: var(--gelb); + background: var(--surface-2); + color: var(--gelb) !important; +} + +.ff-link-kachel .pfeil { float: right; color: var(--gelb); } + +.ff-link-kachel small { + display: block; + text-transform: none; + letter-spacing: 0; + font-weight: 400; + color: var(--muted); + margin-top: 0.3rem; +} + +/* ------------------------------------------------------ + Seitenkopf (Unterseiten) + ------------------------------------------------------ */ +.ff-seitenkopf { + position: relative; + padding: 4rem 0 3rem; + border-bottom: 3px solid var(--gelb); + background: + linear-gradient(rgba(18, 6, 7, 0.88), rgba(18, 6, 7, 0.88)), + var(--pattern) center/12em repeat; + overflow: hidden; +} + +.ff-seitenkopf h1 { + font-size: clamp(1.8rem, 5vw, 3rem); + color: #fff; + text-shadow: 3px 3px 0 rgba(179, 0, 0, 0.8); + margin: 0; +} + +.ff-seitenkopf .untertitel { color: var(--muted); margin: 0.5rem 0 0; } + +/* ------------------------------------------------------ + Zeitleiste (Geschichte) – Tabs + ------------------------------------------------------ */ +.zl-tabs { + display: flex; + gap: 0.5rem; + overflow-x: auto; + padding-bottom: 0.5rem; + margin-bottom: 1.5rem; + scrollbar-width: thin; +} + +.zl-tab { + flex: none; + background: var(--surface); + border: 1px solid var(--border); + color: var(--text); + font-weight: 800; + text-transform: uppercase; + letter-spacing: 0.05em; + padding: 0.7rem 1.2rem; + cursor: pointer; + clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); + transition: background 0.2s ease, color 0.2s ease; +} + +.zl-tab:hover { background: var(--surface-2); color: var(--gelb); } + +.zl-tab.active { + background: var(--gelb); + color: #1a0a00; +} + +.zl-panel { + background: var(--surface); + border: 1px solid var(--border); + border-top: 4px solid var(--rot-hell); + padding: 2rem; +} + +.zl-panel h2, .zl-panel h3 { + color: var(--gelb); + font-size: 1.15rem; + margin-top: 1.5rem; +} + +.zl-panel h2:first-child, .zl-panel h3:first-child { margin-top: 0; } + +.zl-panel p, .zl-panel li { color: var(--text); line-height: 1.8; } + +.zl-panel blockquote { + border-left: 4px solid var(--gelb); + background: var(--surface-2); + padding: 1rem 1.4rem; + margin: 1.4rem 0; + font-style: italic; + color: var(--gelb-hell); +} + +/* ------------------------------------------------------ + Technik-Übersicht + ------------------------------------------------------ */ +.ff-kat-titel { + color: var(--gelb); + border-bottom: 2px solid var(--border); + padding-bottom: 0.4rem; + margin: 2.5rem 0 1.2rem; +} + +.ff-kat-titel:first-of-type { margin-top: 0; } + +.tech-karte { + position: relative; + display: block; + height: 100%; + background: var(--surface); + border: 1px solid var(--border); + text-decoration: none; + overflow: hidden; + transition: transform 0.25s ease, border-color 0.25s ease; +} + +.tech-karte:hover { transform: translateY(-6px); border-color: var(--gelb); } + +.tech-karte .bild { + height: 190px; + background-size: cover; + background-position: center; + filter: saturate(0.9); + transition: transform 0.35s ease, filter 0.35s ease; +} + +.tech-karte:hover .bild { transform: scale(1.06); filter: saturate(1.15); } + +.tech-karte .titel { + display: flex; + justify-content: space-between; + align-items: center; + gap: 0.5rem; + padding: 0.9rem 1.1rem; + color: var(--gelb); + font-weight: 800; + text-transform: uppercase; + letter-spacing: 0.04em; + border-top: 3px solid var(--rot-hell); +} + +.tech-karte .titel .pfeil { transition: transform 0.25s ease; } +.tech-karte:hover .titel .pfeil { transform: translateX(5px); } + +.tech-karte .bald { + position: absolute; + top: 12px; + right: 12px; + background: var(--rot-hell); + color: #fff; + font-size: 0.72rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.08em; + padding: 0.25rem 0.7rem; +} + +/* ------------------------------------------------------ + Fahrzeug-Detail + ------------------------------------------------------ */ +.spec-list { list-style: none; padding: 0; margin: 0; } + +.spec-list li { + display: flex; + flex-wrap: wrap; + gap: 0.25rem 1rem; + padding: 0.6rem 0; + border-bottom: 1px solid var(--border); + color: var(--text); +} + +.spec-list .spec-label { + min-width: 160px; + color: var(--muted); + font-weight: 700; + text-transform: uppercase; + font-size: 0.8rem; + letter-spacing: 0.05em; +} + +.fz-sektion { + color: var(--gelb); + font-size: 1rem; + margin: 1.8rem 0 0.8rem; + padding-left: 0.8rem; + border-left: 4px solid var(--rot-hell); +} + +.fz-punkte { margin: 0; padding-left: 1.2rem; } +.fz-punkte li { color: var(--text); padding: 0.25rem 0; } +.fz-punkte li::marker { color: var(--gelb); } + +.fz-hinweis { + margin-top: 1.2rem; + padding: 0.9rem 1.2rem; + background: var(--surface-2); + border-left: 4px solid var(--gelb); + color: var(--gelb-hell); + font-style: italic; +} + +.standort-badge { + display: inline-block; + background: var(--rot-hell); + color: #fff; + font-weight: 700; + text-transform: uppercase; + font-size: 0.78rem; + letter-spacing: 0.1em; + padding: 0.3rem 0.9rem; + transform: skewX(-12deg); + margin-bottom: 1rem; +} + +.standort-badge > span { display: inline-block; transform: skewX(12deg); } + +#fahrzeugCarousel .carousel-item img { + max-height: 480px; + object-fit: cover; + border: 1px solid var(--border); +} + +#fahrzeugCarousel .carousel-control-prev-icon, +#fahrzeugCarousel .carousel-control-next-icon { + background-color: var(--gelb); + background-size: 55%; + border-radius: 0; +} + +/* ------------------------------------------------------ + Mitglieder / Organigramm + ------------------------------------------------------ */ +.org-ebene { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 1rem; + position: relative; + padding-top: 1.4rem; +} + +.org-ebene + .org-ebene::before { + content: ""; + position: absolute; + top: 0; + left: 50%; + width: 2px; + height: 1.4rem; + background: var(--gelb); + transform: translateX(-50%); +} + +.org-box { + background: var(--surface); + border: 1px solid var(--border); + border-top: 4px solid var(--rot-hell); + padding: 0.9rem 1.4rem; + min-width: 200px; + text-align: center; +} + +.org-box.fuehrung { border-top-color: var(--gelb); } + +.org-box .rolle { + display: block; + color: var(--gelb); + font-size: 0.72rem; + font-weight: 800; + text-transform: uppercase; + letter-spacing: 0.1em; + margin-bottom: 0.3rem; +} + +.org-box .name { color: #fff; font-weight: 700; line-height: 1.5; } + +.org-gruppen { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: 2.5rem; } + +.org-gruppe { + background: var(--surface); + border: 1px solid var(--border); + border-left: 5px solid var(--gelb); + padding: 1.2rem 1.4rem; +} + +.org-gruppe h3 { color: var(--gelb); font-size: 0.95rem; margin-bottom: 0.8rem; } +.org-gruppe .label { color: var(--rot-hell); font-weight: 800; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.08em; display: block; margin-top: 0.7rem; } +.org-gruppe ul { list-style: none; margin: 0; padding: 0; } +.org-gruppe li { color: var(--text); padding: 0.15rem 0; font-size: 0.95rem; } + +/* ------------------------------------------------------ + Dienstplan-Tabelle + ------------------------------------------------------ */ +.termin-tabelle { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); } + +.termin-tabelle th { + background: var(--rot); + color: #fff; + text-transform: uppercase; + font-size: 0.8rem; + letter-spacing: 0.08em; + padding: 0.9rem 1rem; + text-align: left; +} + +.termin-tabelle td { + padding: 0.85rem 1rem; + border-top: 1px solid var(--border); + color: var(--text); + vertical-align: top; +} + +.termin-tabelle tr.termin-is-next td { background: rgba(255, 204, 0, 0.08); box-shadow: inset 3px 0 0 var(--gelb); } + +.termin-badge { + display: inline-block; + background: var(--surface-2); + border: 1px solid var(--border); + color: var(--gelb); + font-size: 0.75rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.06em; + padding: 0.2rem 0.6rem; + white-space: nowrap; +} + +.termin-badge-fest, .termin-badge-feier { background: var(--rot-hell); color: #fff; border-color: var(--rot-hell); } + +@media (max-width: 768px) { + .termin-tabelle thead { display: none; } + .termin-tabelle tr { display: block; border-top: 3px solid var(--border); padding: 0.6rem 0; } + .termin-tabelle tr.termin-is-next { box-shadow: inset 4px 0 0 var(--gelb); } + .termin-tabelle td { display: flex; gap: 1rem; border: none; padding: 0.3rem 1rem; } + .termin-tabelle td::before { + content: attr(data-label); + min-width: 110px; + color: var(--muted); + font-size: 0.75rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.06em; + } +} + +/* ------------------------------------------------------ + Footer + ------------------------------------------------------ */ +.ff-footer { + background: #0d0405; + border-top: 3px solid var(--gelb); + padding: 2.5rem 0; + margin-top: 4rem; + color: var(--muted); +} + +.ff-footer h6 { + color: var(--gelb); + text-transform: uppercase; + letter-spacing: 0.08em; + font-size: 0.85rem; + margin-bottom: 0.6rem; +} + +.ff-footer p, .ff-footer small { color: var(--muted); margin-bottom: 0.2rem; } + +.ff-footer .footer-nav { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; justify-content: center; } +.ff-footer .footer-nav a { color: var(--text); text-decoration: none; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; } +.ff-footer .footer-nav a:hover { color: var(--gelb); } + +/* ------------------------------------------------------ + Modal (Zeitungsartikel etc.) + ------------------------------------------------------ */ +.modal-content { background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--gelb); border-radius: 0; color: var(--text); } +.modal-header { border-bottom-color: var(--border); } +.modal-title { color: var(--gelb); text-transform: uppercase; font-weight: 800; } +.btn-close { filter: invert(1); } diff --git a/varianten/rot/dienstplan.html b/varianten/rot/dienstplan.html new file mode 100644 index 0000000..6cca46a --- /dev/null +++ b/varianten/rot/dienstplan.html @@ -0,0 +1,64 @@ + + + + + + Dienstplan & Termine | Feuerwehr Stadt Wehlen + + + + + + + + + + + + +
    +
    +
    +

    Dienstplan & Termine

    +

    Übungen, Dienste und Veranstaltungen der Feuerwehr Stadt Wehlen

    +
    +
    + +
    +
    +
    +
    +

    Nächster Dienst

    +

    Wird geladen …

    +
    +
    +
    +
    +

    Nächste Veranstaltung

    +

    Wird geladen …

    +
    +
    +
    + +

    Alle Termine

    +
    +

    Wird geladen …

    +
    +
    +
    + + + + + + + + + diff --git a/varianten/rot/fahrzeug.html b/varianten/rot/fahrzeug.html new file mode 100644 index 0000000..a02e0ad --- /dev/null +++ b/varianten/rot/fahrzeug.html @@ -0,0 +1,46 @@ + + + + + + Fahrzeug | Feuerwehr Stadt Wehlen + + + + + + + + + + + + +
    +
    +
    +

    Technik im Detail

    +

    ← Zurück zur Technik-Übersicht

    +
    +
    + +
    +
    +
    +
    + + + + + + + + + diff --git a/varianten/rot/geschichte.html b/varianten/rot/geschichte.html new file mode 100644 index 0000000..b1a3aa7 --- /dev/null +++ b/varianten/rot/geschichte.html @@ -0,0 +1,46 @@ + + + + + + Geschichte | Feuerwehr Stadt Wehlen + + + + + + + + + + + + +
    +
    +
    +

    Unsere Geschichte

    +

    Von der Pflichtfeuerwehr 1865 bis zur modernen Freiwilligen Feuerwehr

    +
    +
    + +
    +
    +
    +
    + + + + + + + + + diff --git a/varianten/rot/index.html b/varianten/rot/index.html new file mode 100644 index 0000000..90fb36c --- /dev/null +++ b/varianten/rot/index.html @@ -0,0 +1,76 @@ + + + + + + Feuerwehr Stadt Wehlen – Startseite + + + + + + + + + + + + +
    +
    + +
    +

    Termine

    +
    +
    +
    +

    Nächster Dienst

    +

    Wird geladen …

    +
    +
    +
    +
    +

    Nächste Veranstaltung

    +

    Wird geladen …

    +
    +
    +
    +
    + +
    +

    Über uns

    +
    +
    + Geschichte → + Über 120 Jahre Feuerwehr in Stadt Wehlen – von der Pflichtfeuerwehr bis heute. + +
    +
    + Technik → + Fahrzeuge, Boote und Anhänger der Wehlen- und Pötzschaer Kameraden. + +
    +
    + Organigramm → + Struktur und Einsatzabteilung der Feuerwehr Stadt Wehlen. + +
    +
    +
    +
    + + + + + + + + + diff --git a/varianten/rot/mitglieder.html b/varianten/rot/mitglieder.html new file mode 100644 index 0000000..d70c556 --- /dev/null +++ b/varianten/rot/mitglieder.html @@ -0,0 +1,46 @@ + + + + + + Mitglieder & Organigramm | Feuerwehr Stadt Wehlen + + + + + + + + + + + + +
    +
    +
    +

    Unsere Mitglieder

    +

    Struktur und Einsatzabteilung der Stadt Wehlen

    +
    +
    + +
    +
    +
    +
    + + + + + + + + + diff --git a/varianten/rot/technik.html b/varianten/rot/technik.html new file mode 100644 index 0000000..a45c434 --- /dev/null +++ b/varianten/rot/technik.html @@ -0,0 +1,46 @@ + + + + + + Technik | Feuerwehr Stadt Wehlen + + + + + + + + + + + + +
    +
    +
    +

    Unsere Technik

    +

    Einsatzfahrzeuge, Boote und Ausrüstung der Stadt Wehlen

    +
    +
    + +
    +
    +
    +
    + + + + + + + + + diff --git a/varianten/shared/dienste.js b/varianten/shared/dienste.js new file mode 100644 index 0000000..e4a58b7 --- /dev/null +++ b/varianten/shared/dienste.js @@ -0,0 +1,85 @@ +/* ====================================================== + dienste.js – ZENTRALE Logik für Dienstplan & Termine + ------------------------------------------------------ + Liest dienstplan/dienstplan.csv (einzige Datenquelle) und + befüllt – je nachdem, was auf der Seite vorhanden ist: + + #nextDienst nächster Dienst (Kurzform, Startseite) + #nextEvent nächste Veranstaltung (Kurzform) + #dienstplan-liste komplette Terminliste (Dienstplan-Seite) + + Das Markup nutzt design-neutrale Klassen (termin-*), + die von der jeweiligen Varianten-CSS gestylt werden. + ====================================================== */ + +(function () { + const csvPfad = (window.FFW_BASE || "") + "dienstplan/dienstplan.csv"; + + fetch(csvPfad) + .then(res => res.text()) + .then(text => { + const today = new Date().setHours(0, 0, 0, 0); + + const termine = text.trim().split(/\r?\n/).slice(1).map(line => { + const [d, tag, zeit, ort, art, beschr] = line.split(line.includes(";") ? ";" : ","); + const [y, m, day] = d.trim().split("-"); + return { + datum: new Date(y, m - 1, day), + tag: tag.trim(), + zeit: zeit.trim(), + ort: ort.trim(), + art: art.trim(), + beschr: beschr.trim() + }; + }) + .filter(t => t.datum >= today) + .sort((a, b) => a.datum - b.datum); + + const istFest = t => /fest|feier/i.test(t.art); + const datumFormatiert = t => t.datum.toLocaleDateString("de-DE"); + + /* ---------- Kurzform: nächster Dienst / Veranstaltung ---------- */ + const renderKurz = (id, filterFn) => { + const el = document.getElementById(id); + if (!el) return; + const t = termine.find(filterFn); + + el.innerHTML = t + ? `

    ${t.tag}., ${datumFormatiert(t)} | ${t.zeit} Uhr

    +

    ${t.art}

    +

    ${t.beschr} (${t.ort})

    ` + : `

    Keine weiteren Termine geplant

    `; + }; + + renderKurz("nextDienst", t => !istFest(t)); + renderKurz("nextEvent", istFest); + + /* ---------- Komplette Terminliste (Dienstplan-Seite) ---------- */ + const liste = document.getElementById("dienstplan-liste"); + if (liste) { + if (!termine.length) { + liste.innerHTML = `

    Aktuell sind keine Termine geplant.

    `; + return; + } + + const naechster = termine[0]; + const zeilen = termine.map(t => ` + + ${t.tag}., ${datumFormatiert(t)} + ${t.zeit} Uhr + ${t.art} + ${t.beschr} + ${t.ort} + `).join(""); + + liste.innerHTML = ` + + + + + ${zeilen} +
    DatumUhrzeitArtBeschreibungOrt
    `; + } + }) + .catch(err => console.error("Fehler beim Laden des Dienstplans:", err)); +})(); diff --git a/varianten/shared/fahrzeuge.js b/varianten/shared/fahrzeuge.js new file mode 100644 index 0000000..f8a881a --- /dev/null +++ b/varianten/shared/fahrzeuge.js @@ -0,0 +1,441 @@ +/* ====================================================== + fahrzeuge.js – ZENTRALE DATENQUELLE für Technik/Fahrzeuge + ------------------------------------------------------ + Wird von BEIDEN Design-Varianten (rot & grau) genutzt. + Pfade sind relativ zum Projekt-Root und werden beim + Rendern mit window.FFW_BASE präfixiert. + + Struktur pro Eintrag: + id – eindeutige Kennung (für fahrzeug.html?id=...) + kategorie – Gruppierung (Fahrzeuge / Boote / Anhänger / Tradition) + karte – Bild für die Technik-Übersicht + name – Kurzname für Karten + titel – voller Titel der Detailseite + standort – optional, wird als Badge angezeigt + bilder – Galerie der Detailseite [{src, alt}] + hinweis – optionaler Untertitel unter der Galerie + text – optionaler Fließtext + daten – Stammdaten [[Label, Wert], ...] + bereiche – weitere Sektionen [{titel, punkte: [...]}] + inArbeit – true = Karte ohne Detailseite (z.B. ELW 1) + ====================================================== */ + +window.FFW_FAHRZEUGE = [ + { + id: "lf10", + kategorie: "Fahrzeuge", + karte: "technik/technikpage/t_lf10_6_1.jpg", + name: "LF 10/6", + titel: "Löschgruppenfahrzeug LF 10/6", + bilder: [ + { src: "technik/lf10/t_lf10_6_1.jpg", alt: "LF 10 Bild 1" }, + { src: "technik/lf10/t_lf10_6_2.jpg", alt: "LF 10 Bild 2" }, + { src: "technik/lf10/t_lf10_6_3.jpg", alt: "LF 10 Bild 3" }, + { src: "technik/lf10/t_lf10_6_4.jpg", alt: "LF 10 Bild 4" }, + { src: "technik/lf10/t_lf10_6_5.jpg", alt: "LF 10 Bild 5" }, + { src: "technik/lf10/t_lf10_6_6.jpg", alt: "LF 10 Bild 6" } + ], + hinweis: "Erstangriffsfahrzeug für Brand & Hilfeleistung", + daten: [ + ["Bezeichnung", "LF 10/6"], + ["Funkrufname", "Florian Stadt Wehlen 42-1"], + ["Fahrgestell", "MB Atego 818 F"], + ["Baujahr", "Juli 2007"], + ["Motorleistung", "180 PS"], + ["Gesamtgewicht", "8.600 kg"] + ], + bereiche: [ + { + titel: "Technische Daten & Ausstattung", + punkte: [ + "Maße: L 6,39m | B 2,32m | H 3,00m", + "Sicherheit: ABS, Differentialsperre hinten", + "Licht/Warn: Martin-Horn (4 Becher), Pneumatik-Lichtmast (2x 1000W)" + ] + }, + { + titel: "Feuerwehrtechnische Beladung", + punkte: [ + "FPN 10-1000-1H Einbaupumpe", + "600 Liter Wassertank", + "Tragkraftspritze TS 8/8", + "Stromerzeuger 6,5 kW (Eisemann)", + "3-teilige Schiebeleiter", + "Lukas Schere/Spreizer Kombi SC 350", + "Wärmebildkamera Bullard Eclipse", + "Defibrillator (AED) \"Zoll\"", + "Sanitätsrucksack & Watthosen", + "Ölbindemittel & Kettensäge" + ] + } + ] + }, + { + id: "tsf", + kategorie: "Fahrzeuge", + karte: "technik/technikpage/t_tsf_01.jpg", + name: "TSF-W", + titel: "Tragkraftspritzenfahrzeug (TSF)", + standort: "Pötzscha", + bilder: [ + { src: "technik/tsf/t_tsf_01.jpg", alt: "TSF Frontansicht" }, + { src: "technik/tsf/t_tsf_02.jpg", alt: "TSF Seitenansicht" }, + { src: "technik/tsf/t_tsf_06.jpg", alt: "TSF Heckansicht" } + ], + hinweis: "Vielseitiges Ersteinsatzfahrzeug der Ortswehr Pötzscha", + daten: [ + ["Funkrufname", "Florian Pötzscha 47-1"], + ["Fahrgestell", "FIAT Ducato MAXI 2.3"], + ["Baujahr", "August 2002"], + ["Besatzung", "1/5 (Staffelbesatzung)"] + ], + bereiche: [ + { + titel: "Technische Details", + punkte: [ + "Leistung: 81 kW (110 PS)", + "Gesamtgewicht: 3.500 kg (B-Führerschein fähig)", + "Maße: L 5,20m | B 2,07m | H 2,39m", + "Sondersignalanlage: Hella RTK 6" + ] + }, + { + titel: "Feuerwehrtechnische Beladung", + punkte: [ + "Tragkraftspritze TS 8/8", + "4 Pressluftatmer (PA)", + "4-teilige Steckleiter", + "Stromerzeuger 3,5 kW", + "Motorsäge & Zubehör", + "Lichtmast (2x 80W LED)", + "Sanitätsrucksack", + "Absicherungsmaterial" + ] + } + ] + }, + { + id: "vrw", + kategorie: "Fahrzeuge", + karte: "technik/technikpage/t_vrw_1.jpg", + name: "VRW Quad", + titel: "Vorausrüstwagen (VRW)", + bilder: [ + { src: "technik/VRW-Quad/t_vrw_1.jpg", alt: "VRW Suzuki KingQuad" } + ], + hinweis: "Extrem geländegängig für schnelle Hilfe in unwegsamem Gelände", + text: "Einsatztaktik: Das Fahrzeug ermöglicht durch seine kompakten Maße einen schnellen Erstzugriff bei Verkehrsunfällen oder im Waldgelände, noch bevor die Großfahrzeuge eintreffen.", + daten: [ + ["Bezeichnung", "VRW (Quad)"], + ["Funkrufname", "Florian Stadt Wehlen 53-1"], + ["Fahrgestell", "Suzuki KingQuad"], + ["Baujahr", "Mai 2006"], + ["Einsatzgewicht", "470 kg"] + ], + bereiche: [ + { + titel: "Technische Daten", + punkte: [ + "Antrieb: 4x4 Allrad / Differentialsperre", + "Sondersignal: Blitzkennleuchte & Martins-Horn", + "Zusatzausstattung: Arbeitsscheinwerfer LED", + "Maße: L 2,20m | B 1,25m | H 2,00m" + ] + }, + { + titel: "Spezialausrüstung: TH-Rettung", + punkte: [ + "Hydraulik: Lukas SC 350 Kombigerät", + "Lukas Kompaktaggregat P 610 OG", + "Lukas Rettungszylinder", + "Medizin: Defibrillator (AED)", + "Sanitätsrucksack & Sauerstoff", + "Löschtechnik: 10L MicroCAFS" + ] + } + ] + }, + { + id: "elw1", + kategorie: "Fahrzeuge", + karte: "technik/technikpage/t_elw1_1.jpg", + name: "ELW 1", + titel: "Einsatzleitwagen ELW 1", + inArbeit: true, + bilder: [], + daten: [], + bereiche: [] + }, + { + id: "rtb1", + kategorie: "Boote", + karte: "technik/technikpage/t_aluboot_rtb1_1.jpg", + name: "Aluboot RTB 1", + titel: "Feuerwehrboot (RTB 1)", + standort: "Pötzscha", + bilder: [ + { src: "technik/rtb1/t_aluboot_rtb1_1.jpg", alt: "RTB 1 auf der Elbe" }, + { src: "technik/rtb1/t_aluboot_rtb1_2.jpg", alt: "RTB 1 Details" } + ], + hinweis: "Speziell optimiert für Elbe-Einsätze und Hochwasserlagen", + text: "Das RTB 1 ist ein extrem vielseitiges Arbeitsmittel. Durch die absenkbare Bugklappe können Personen im Wasser ohne Kraftaufwand direkt aufgenommen werden. Zudem dient es bei Hochwasser als wichtiges Transportmittel für Sandsäcke oder zur Evakuierung in engen Gassen.", + daten: [ + ["Bezeichnung", "Rettungsboot RTB 1"], + ["Norm", "DIN 14961"], + ["Typ", "Barru LGL 400-BKL"], + ["Baujahr", "März 2014"], + ["Zuladung", "550 kg (max. 5 Personen)"] + ], + bereiche: [ + { + titel: "Technische Details", + punkte: [ + "Maße: L 4,13m | B 1,80m | T 0,18m", + "Motorisierung: Suzuki 25 PS (4-Takt)", + "Besonderheit: Absenkbare Bugklappe", + "Zubehör: Hochwasserräder für Landtransport" + ] + } + ] + }, + { + id: "rtb2", + kategorie: "Boote", + karte: "technik/technikpage/t_rtb2_1.jpg", + name: "Rettungsboot RTB 2", + titel: "Feuerwehrboot RTB 2", + bilder: [ + { src: "technik/rtb2/t_rtb2_1.jpg", alt: "RTB 2 Bild 1" }, + { src: "technik/rtb2/t_rtb2_2.jpg", alt: "RTB 2 Bild 2" }, + { src: "technik/rtb2/t_rtb2_3.jpg", alt: "RTB 2 Bild 3" } + ], + hinweis: "Das schnelle \"Buster\" für Einsätze auf der Elbe", + daten: [ + ["Bezeichnung", "Rettungsboot RTB 2"], + ["Funkrufname", "Florian Stadt Wehlen 79-1"], + ["Typ", "Fiskas Buster \"L\" Aluminium"], + ["Zuladung", "590 kg (max. 6 Personen)"] + ], + bereiche: [ + { + titel: "Technische Daten", + punkte: [ + "Maße: L 4,90m | B 1,97m | T 0,29m", + "Motorisierung: Suzuki 40 PS (3-Zyl. 4-Takt)", + "Speed: max. 33 Knoten (~ 61 km/h)" + ] + }, + { + titel: "Ausstattung & Beladung", + punkte: [ + "Sondersignal: Blitzkennleuchte & Martinshorn auf Gerätebügel", + "Beleuchtung: 1x Fest-Suchscheinwerfer, 2x Hand-Suchscheinwerfer", + "Navigation: Echolot zur Tiefen- & Hindernismessung", + "Rettungsmittel: Rettungsbrett & Notfall-Set nach DIN" + ] + } + ] + }, + { + id: "schlauchboot", + kategorie: "Boote", + karte: "technik/technikpage/t_schlauchboot.jpg", + name: "RTB 1 Schlauchboot", + titel: "Schlauchboot RTB 1", + bilder: [ + { src: "technik/rtb1schlauchboot/t_schlauchboot.jpg", alt: "Schlauchboot RTB 1" } + ], + hinweis: "Flexibel für die Wasserrettung", + text: "Das RTB 1 (Schlauchboot) ist unser \"Flitzer\" für kleine Gewässer oder schwer zugängliche Elbufer. Es ist in Sekundenschnelle einsatzbereit und kann aufgrund des geringen Gewichts von einer kleinen Truppe direkt zum Wasser getragen werden, ohne dass eine Slipstelle benötigt wird.", + daten: [ + ["Bezeichnung", "Rettungsschlauchboot RTB 1"], + ["Standort", "Stadt Wehlen"], + ["Baujahr", "Mai 2003"], + ["Gewicht", "33 kg (leicht & mobil)"] + ], + bereiche: [ + { + titel: "Leistungsdaten", + punkte: [ + "Maße: L 3,00m | B 1,20m", + "Sicherheit: 4 separate Luftkammern", + "Zuladung: 570 kg (max. 3 Personen)" + ] + } + ] + }, + { + id: "sta", + kategorie: "Anhänger", + karte: "technik/technikpage/t_sta_1.jpg", + name: "STA Anhänger", + titel: "Schlauchtransportanhänger (STA)", + bilder: [ + { src: "technik/sta/t_sta_1.jpg", alt: "STA Bild 1" }, + { src: "technik/sta/t_sta_2.jpg", alt: "STA Bild 2" } + ], + hinweis: "Einsatzvorteil: Verlegen von ca. 760m B-Leitung direkt während der Fahrt", + daten: [ + ["Bezeichnung", "Schlauchtransportanhänger (STA)"], + ["Standort", "Stadt Wehlen"], + ["Typ", "Humbauer HA75/100"], + ["Baujahr", "Dezember 2004"], + ["Gesamtgewicht", "750 kg"] + ], + bereiche: [ + { + titel: "Technische Details", + punkte: [ + "Maße: L 3,56m | B 1,79m | H 2,35m", + "Ausstattung: Hochplane, Heck-Arbeitsbeleuchtung", + "Besonderheit: Schnellverlege-Vorrichtung" + ] + }, + { + titel: "Feuerwehrtechnische Beladung", + punkte: [ + "38 B-Schläuche (insgesamt 760m), in Buchten gekoppelt", + "2 Tragekörbe mit je 3 x 20m C-Schläuchen", + "Armaturen: Standrohr, Hydrantenschlüssel, 2 C-Strahlrohre, Verteiler, Schlauchbrücken und Kupplungsschlüssel" + ] + } + ] + }, + { + id: "tsa", + kategorie: "Anhänger", + karte: "technik/technikpage/t_tsa_1.jpg", + name: "TSA Anhänger", + titel: "Tragkraftspritzenanhänger (TSA)", + bilder: [ + { src: "technik/TSA-Anhaenger/t_tsa_1.jpg", alt: "TSA Bild 1" }, + { src: "technik/TSA-Anhaenger/t_tsa_2.jpg", alt: "TSA Bild 2" } + ], + hinweis: "Die mobile Pumpeneinheit für die Wasserversorgung", + text: "Der TSA bildet eine eigenständige taktische Einheit für eine Löschgruppe (1/8). Er führt alles mit, was für einen klassischen Löschangriff benötigt wird. Herzstück ist die Tragkraftspritze Magirus (4-Takt-Motor) – zuverlässige Wasserförderung auch bei langen Einsatzstellen.", + daten: [ + ["Bezeichnung", "Tragkraftspritzenanhänger (TSA)"], + ["Standort", "Stadt Wehlen"], + ["Typ", "Ziegler TSA SDAH"], + ["Baujahr", "Februar 2004"] + ], + bereiche: [ + { + titel: "Technische Daten", + punkte: [ + "Maße: L 4,00m | B 1,80m | H 2,00m", + "Gesamtgewicht: 1.200 kg", + "Details: Verstellbare Zugdeichsel, Heckstützen" + ] + }, + { + titel: "Feuerwehrtechnische Beladung", + punkte: [ + "Tragkraftspritze Magirus (4-Takt-Motor)", + "4 Saugschläuche (A), Saugkorb", + "B- und C-Schläuche nach DIN", + "Armaturen: Strahlrohre, Verteiler, Standrohr" + ] + } + ] + }, + { + id: "transportanhaenger", + kategorie: "Anhänger", + karte: "technik/technikpage/t_transportanhaenger.jpg", + name: "Transportanhänger", + titel: "Transportanhänger", + bilder: [ + { src: "technik/Transporthaenger/t_transportanhaenger.jpg", alt: "Transportanhänger FFw Wehlen" } + ], + hinweis: "Vielseitiges Logistikfahrzeug für Ausbildung und Einsatz", + text: "Dieser Anhänger ist unser flexibler Allrounder für Logistikaufgaben. Ob Ausbildung oder Einsatz – der Anhänger passt sich an.", + daten: [ + ["Bezeichnung", "Transportanhänger"], + ["Standort", "Stadt Wehlen"], + ["Typ", "Humbauer H12"], + ["Baujahr", "April 2004"], + ["Gesamtgewicht", "1.200 kg"] + ], + bereiche: [ + { + titel: "Technische Daten", + punkte: [ + "Maße: L 3,75m | B 1,77m | H 2,35m", + "Sicherheit: Feststellbremse", + "Aufbau: Hochplane, Stützrad & Heckstützen" + ] + }, + { + titel: "Nutzung & Beladung", + punkte: [ + "Jugendfeuerwehr: Transport der Übungsausstattung", + "Löschwasser: Mitführung eines TSA-Einschubs mit Tragkraftspritze TS 3", + "Logistik: Transport von Sandsäcken, Ölbindemittel oder verschmutztem Material" + ] + } + ] + }, + { + id: "hydrantenwagen", + kategorie: "Tradition", + karte: "technik/technikpage/t_hydrantenwagen_1.jpg", + name: "Hydrantenwagen (1905)", + titel: "Hydrantenwagen Modell H.I.", + bilder: [ + { src: "technik/Hydrantenwagen/t_hydrantenwagen_1.jpg", alt: "Hydrantenwagen Bild 1" }, + { src: "technik/Hydrantenwagen/t_hydrantenwagen_2.jpg", alt: "Hydrantenwagen Bild 2" } + ], + hinweis: "Historisches Handzug-Gerät aus dem Jahr 1905", + daten: [ + ["Bezeichnung", "Hydrantenwagen Modell H.I."], + ["Stationierung", "Stadt Wehlen"], + ["Hersteller", "C.A. Schöne Fabrik Dresden"], + ["Baujahr", "1905"], + ["Typ", "Historisches Handzug-Gerät"] + ], + bereiche: [ + { + titel: "Feuerwehrtechnische Beladung", + punkte: [ + "Kupferner Hydrantenaufsatz (2 Auslässe)", + "Sächsisches Normalgewinde, Spindelventile", + "Kupferne Normalstrahlrohre (in Leine geflochten)", + "255 m Flachsschlauch (17 Satz à 15 m)", + "17 Paar Patent-Honigkupplungen", + "4 Übersetzungsstücke (Sächs. Normalgewinde)" + ] + } + ] + }, + { + id: "lf1", + kategorie: "Tradition", + karte: "technik/technikpage/t_lf1_1.jpg", + name: "Postfahrrad LF 1", + titel: "Löschfahrzeug LF 1", + bilder: [ + { src: "technik/lf1/t_lf1_2.jpg", alt: "LF 1 Fahrrad" } + ], + hinweis: "Traditionsfahrzeug der Feuerwehr Stadt Wehlen", + text: "Das LF 1 ist unser ganzer Stolz bei Festumzügen. Das ehemalige Postrad wurde in liebevoller Kleinarbeit zum \"kleinsten Löschfahrzeug der Welt\" umgebaut. Es dient primär der Traditionspflege und der Spendensammlung bei Veranstaltungen.", + daten: [ + ["Bezeichnung", "Löschfahrzeug LF 1"], + ["Stationierung", "Stadt Wehlen"], + ["Typ", "Umgebautes Postfahrrad"], + ["Baujahr", "Mai 2003"], + ["Fahrzeugdaten", "26er Herrenfahrrad"] + ], + bereiche: [ + { + titel: "Feuerwehrtechnische Beladung", + punkte: [ + "Sirene mit Handkurbel (akustisches Signal)", + "Blitzleuchte (optisches Signal)", + "Kübelspritze (als Spendenkübel umfunktioniert)", + "C-Schlauch + Strahlrohr (Schnellangriff-Attrappe)" + ] + } + ] + } +]; diff --git a/varianten/shared/geschichte.js b/varianten/shared/geschichte.js new file mode 100644 index 0000000..a69c03e --- /dev/null +++ b/varianten/shared/geschichte.js @@ -0,0 +1,138 @@ +/* ====================================================== + geschichte.js – ZENTRALE DATENQUELLE für die Geschichte + ------------------------------------------------------ + Wird von BEIDEN Design-Varianten genutzt. + Rot rendert daraus eine Zeitleiste mit Tabs, + Grau ein Accordion – Inhalt bleibt identisch. + + zeitraum – Beschriftung (z.B. "1901 – 1945") + eintraege – Blöcke [{titel?, html}] pro Epoche + bild – true: Button für den Zeitungsartikel 1921 + ====================================================== */ + +window.FFW_GESCHICHTE_BILD = { + src: "geschichte/ffw_wehlen_1921.jpeg", + titel: "Zeitungsartikel von 1921", + button: "Zeitungsartikel von 1921 ansehen" +}; + +window.FFW_GESCHICHTE = [ + { + zeitraum: "1865 – 1900", + eintraege: [ + { + titel: "Die Anfänge der Feuerwehr in Stadt Wehlen", + html: ` +

    Die Feuerwehr unseres Wehlstädtchens wird in den Berichten, die heute noch im Archiv lagern, um 1865 zum ersten Mal erwähnt. Damals war es eine Pflichtfeuerwehr, d. h. alle Männer von 18 bis 50 Jahren wurden erfasst und nach einem strengen Gesetz verpflichtet.

    +

    Im Jahr 1899 versuchte man erstmals, die Männer der Pflichtfeuerwehr zu überzeugen, eine Freiwillige Feuerwehr aufzubauen. Der Vorschlag kam von der Feuerwehr Pirna. Doch der damalige Stadtgemeinderat von Stadt Wehlen lehnte ab:

    +
    „... es wäre nicht nötig und außerdem zu kostspielig.“
    ` + } + ] + }, + { + zeitraum: "1901 – 1945", + eintraege: [ + { + titel: "Die Gründung der Freiwilligen Feuerwehr Stadt Wehlen", + html: ` +

    Am 27. Januar 1901 wurde der Wehlener Gemeinderat durch Herrn Branddirektor Jäger angeschrieben und darauf hingewiesen, dass Stadt Wehlen im Bezirk die letzte Stadt sei, die keine freiwillige Feuerwehr besitze. Er bat um Unterstützung und um die Gründung einer Freiwilligen Feuerwehr.

    +

    Am 8. Februar 1901 wurde die noch bestehende Pflichtfeuerwehr in die "Elbterrasse" gerufen und zur Generalversammlung geladen. Bei unentschuldigtem Fehlen wurde Strafe angedroht. Der Abend wurde durch Herrn Branddirektor Jäger genutzt, um über die Vorteile einer Freiwilligen Feuerwehr zu sprechen. Zu diesem Vortrag waren alle Stadträte und Stadtverordneten anwesend, und Herr Bürgermeister Schaale unterstrich die Worte von Herrn Jäger und setzte sich stark für die Gründung einer Freiwilligen Feuerwehr ein.

    +

    Von den 44 anwesenden Herren der Pflichtfeuerwehr erklärten sich 30 bereit, in die Freiwillige Feuerwehr einzutreten. So meldete der Bürgermeister die Mitgliedschaft zum Bezirksverband Sächsischer Feuerwehren an.

    +

    Im Februar 1901 konnte Bürgermeister Schaale den Gemeinden Hohnstein, Gottleuba, Berggießhübel, Neundorf, Rabenau und Siebenlehn vom Entschluss zur Gründung einer Freiwilligen Feuerwehr Mitteilung machen. Er rief die Gemeinden und Städte zur Unterstützung auf.

    ` + }, + { + titel: "Die offizielle Gründung", + html: ` +

    Am 9. März 1901 fand im Hotel "Elbterrasse" die Konstituierung der Freiwilligen Feuerwehr Stadt Wehlen statt. Am 12. März 1901 wurde die Freiwillige Feuerwehr Stadt Wehlen offiziell gegründet.

    +

    Das Grundgesetz der Feuerwehr wurde bekannt gegeben, welches in 14 Paragraphen die Pflichten und Rechte des Feuerwehrmannes beinhaltete. So hieß es in §1:

    +
    "Zweck der Freiwilligen Feuerwehr ist, bei ausbrechenden Bränden im Gemeindebezirk in geordneter Weise rettend und schützend Beistand zu leisten. Bei entstehenden Bränden in den benachbarten Orten und zwar bis 2 Stunden entfernt, leistet die Feuerwehr mit einem Teil der Mannschaft gleichfalls Hilfe."
    ` + }, + { + titel: "Ausrüstung der Feuerwehr", + html: ` + ` + }, + { + titel: "Technische Entwicklung", + html: ` +

    In den Jahren 1903 bis 1904 ließ Herr Ingenieur Mennicke als Geschenk für Stadt Wehlen eine zentrale Wasserleitung errichten. Dies war ein großer Vorteil für die Feuerwehr, denn nun konnten alle Punkte der Stadt mit Löschwasser aus dem zentralen Rohrnetz über 31 Unterflurhydranten und 1 Oberflurhydrant erreicht werden.

    +

    Am 23. Oktober 1921 fand in Stadt Wehlen der 20. Bezirkstag der Feuerwehren statt. Um 10 Uhr trafen 57 Feuerwehren ein, und in der "Elbterrasse" wurde eine Festsitzung abgehalten. Anschließend wurde eine Großübung am Hotel "Sächsische Schweiz" vor über 500 Gästen und Einwohnern durchgeführt. Am Nachmittag folgte ein großer Umzug mit vier Blaskapellen und zwei Spielmannszügen.

    ` + }, + { + titel: "Weitere Meilensteine", + html: ` +

    Am 24. Mai 1925 wurde das Feuerwehrdepot auf der Pirnaer Straße festlich eingeweiht. Hier stand die Feuerwehr unter der Leitung von Dachdeckermeister Otto Israel.

    +

    1934 begann der Kampf um eine Motorspritze. Am 12. Februar 1935 wurde schließlich angeordnet, dass Stadt Wehlen eine Motorspritze beschaffen muss. Im gleichen Jahr erhielt die Feuerwehr eine Motorspritze sowie einen Mannschaftswagen vom Typ Mercedes.

    ` + }, + { + titel: "Die Feuerwehr im Zweiten Weltkrieg", + html: ` +

    Während des Zweiten Weltkriegs (1939–1945) übernahm die Wehr gemeinsam mit einer verpflichteten Frauengruppe den Schutz der Stadt. Unter dem Kommando von Hauptmann Fröde wurde ein straffer Dienst verlangt. Jede Woche wurden ein Dienstappell mit Überprüfung der Uniformen und Gerätschaften sowie zweistündige Übungen durchgeführt.

    `, + bild: true + } + ] + }, + { + zeitraum: "1946 – 1989", + eintraege: [ + { + titel: "Wiederaufbau der Freiwilligen Feuerwehr nach 1949", + html: ` +

    Große Anstrengungen unternahmen die Kameraden nach 1949. Kamerad Weber war damals der Jüngste, der die Wehr als Leiter übernahm. Wir wurden zum Beispiel zur Abholzung von Wäldern aufgerufen, damit die Bürger Feuerholz bekamen. Zur Erneuerung des Sportplatzes leisteten die Kameraden freiwillige Stunden.

    +

    So wurden zur Gründung eines Fanfarenzuges von Bürgern der Stadt Gelder gespendet. Nach einem Jahr konnten wir das erste Mal öffentlich auftreten und marschierten bei Veranstaltungen wie dem 1. Mai an der Spitze mit.

    ` + }, + { + titel: "Der LKW und die Gründung der Löschgruppe Stadt Wehlen II", + html: ` +

    1956 kaufte der Rat der Stadt einen LKW, den die Kameraden als Zugkraftwagen ausbauten. Am 1. April 1956 wurde in Stadt Wehlen II (Pötzscha), unter Führung des Kameraden Böhme, eine Löschgruppe gegründet, da die Brände an der Bahnlinie zunahmen.

    ` + }, + { + titel: "Unwetterkatastrophen und die \"Reinigungswasser-Suppe\"", + html: ` +

    1957 wurden die Kameraden zur Unwetterkatastrophe nach Pirna alarmiert. Dort pumpten wir Wasser aus Kellern und retteten Margarinewürfel. Da wir hungrig waren, schöpften wir aus unbewachten Feldküchen vermeintliche Suppe. Am Morgen stellte sich heraus: Es war heißes Reinigungswasser! Eine Geschichte, die heute noch erzählt wird.

    ` + }, + { + titel: "Der Sparkassenbrand 1963", + html: ` +

    Am 24. Dezember 1963 brannte die Sparkasse am Markt. Bei -20°C und Orkanböen waren die Kameraden auf der Leiter teilweise angefroren. Trotzdem gelang es, die Kirche und die Nachbarhäuser zu retten. 1967 erhielten wir dafür unser erstes typenmäßiges Fahrzeug – das Kleinlöschfahrzeug B 1000.

    ` + }, + { + titel: "Entwicklungen der 70er und 80er", + html: ` +

    1971 bekamen wir das Löschfahrzeug LO 1800. In 20 Abenden wurde dafür eine Fahrzeughalle errichtet. 1980 wurde der erste Bauabschnitt des Gerätehauses an der Kirchstraße abgeschlossen.

    ` + } + ] + }, + { + zeitraum: "1990 – 1994", + eintraege: [ + { + titel: "Nach der Wiedervereinigung 1990", + html: ` +

    Wir konnten preisgünstig Technik erwerben, darunter ein B 1000 für Pötzscha. 1991 feierte die Feuerwehr ihr 90-jähriges Jubiläum mit einem großen Feuerwehrball im Cafe Richter.

    +

    Vom 22. – 23. November 1991 erhielten wir von den Kameraden aus Deuschelried/Wangen ein Löschfahrzeug vom Typ Opel als Geschenk. Die Freundschaft wurde mit einer Dampferfahrt gefestigt. 1993/94 wurde das Gerätehaus in Pötzscha vergrößert.

    ` + } + ] + }, + { + zeitraum: "1995 – heute", + eintraege: [ + { + titel: "Hochwasser 2002", + html: ` +

    Am 13.08.2002 wurden wir nach Pirna gerufen, um Bürger mit dem Schlauchboot zu evakuieren. Zurück in Wehlen begannen die Vorbereitungen gegen das Elbehochwasser. Bürger wie Eckhard, Mike Hofmann, Ronny Roll und Herr Pfeiler unterstützten mit ihren Booten.

    +

    Am 15.08. kam die Schocknachricht: Es sollten noch 2–3 Meter dazu kommen. Die Leitstelle wurde in die Grundschule verlegt. Etwa 70 % der Bürger waren ohne Gas und Strom. In der Nacht zum 17.08. erreichte die Elbe den Höchststand von 12,04 m.

    +

    Hilfe kam von den Feuerwehren aus Trochtelfingen, Wangen und Forst sowie später durch 12 Fahrzeuge aus dem Wartburgkreis. Die Kameraden leisteten tägliche Dienste von 16–18 Stunden, um die Stadt vom Schlamm zu befreien.

    ` + } + ] + } +]; diff --git a/varianten/shared/mitglieder.js b/varianten/shared/mitglieder.js new file mode 100644 index 0000000..66c7ef7 --- /dev/null +++ b/varianten/shared/mitglieder.js @@ -0,0 +1,53 @@ +/* ====================================================== + mitglieder.js – ZENTRALE DATENQUELLE für das Organigramm + ------------------------------------------------------ + Wird von BEIDEN Design-Varianten genutzt. + ====================================================== */ + +window.FFW_MITGLIEDER = { + fuehrung: [ + { rolle: "Wehrleiter", namen: ["Herzog, André"] }, + { rolle: "Stellvertreter", namen: ["Flössel, Markus", "Drechsel, Manuel"] } + ], + stab: [ + { rolle: "Schriftführer", namen: ["Flössel, Markus"] }, + { rolle: "Kassenwart", namen: ["Marder, Uwe"] } + ], + fachwarte: [ + { rolle: "Atemschutz-Gerätewart", namen: ["Reißig, Kersten"] }, + { rolle: "Gerätewart", namen: ["Blümel, Dirk"] }, + { rolle: "Jugendwart", namen: ["Hübsch, Sebastian"] }, + { rolle: "Altersabteilung", namen: ["Dittmann, Frank"] } + ], + gruppen: [ + { + titel: "Atemschutzträger", + namen: [ + "Blümel, Dirk", "Flössel, Markus", "Gottlöber, Heiko", "Herzog, Nico", + "Hübsch, Alexander", "Hübsch, Sebastian", "John, Marko", "Kurze, Steffen" + ] + }, + { + titel: "Maschinisten", + namen: [ + "Blümel, Dirk", "Drechsel, Manuel", "Flössel, Markus", "Herzog, André", + "Hübsch, Alexander", "Hübsch, Sebastian", "John, Marko", "Marder, Uwe" + ] + }, + { + titel: "Führung", + abschnitte: [ + { label: "Zugführer", namen: ["Kurze, Steffen"] }, + { label: "Verbandsführer", namen: ["Mathe, Thomas"] }, + { label: "Gruppenführer", namen: ["Blümel, Dirk", "Drechsel, Manuel", "Flössel, Markus", "Herzog, André"] } + ] + }, + { + titel: "Mannschaft", + abschnitte: [ + { label: "Truppführer", namen: ["Gottlöber, Heiko", "Hübsch, Alexander", "Hübsch, Sebastian", "John, Marko", "Marder, Uwe"] }, + { label: "Truppmann", namen: ["Caspari, Patrick", "Herzog, Nico", "Marder, Lukas", "Mathe, Albert", "Pohl, Michael", "Riedel, Pascal"] } + ] + } + ] +};