239 lines
10 KiB
HTML
239 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Mitglieder & Struktur | FFw Stadt Wehlen</title>
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="../css/nav.css">
|
|
|
|
<style>
|
|
:root {
|
|
--fw-rot: #900000;
|
|
--fw-rot-hell: #b30000;
|
|
--text-dunkelrot: #3d0000;
|
|
--bg-light: #f8f9fa;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--bg-light);
|
|
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
|
margin: 0;
|
|
color: #333;
|
|
}
|
|
|
|
/* NAVBAR (mit logo2 Pattern) */
|
|
.navbar-custom {
|
|
background-color: var(--fw-rot-hell) !important;
|
|
background-image: url('../bilder/logo2.jpeg') !important;
|
|
background-size: 7em !important;
|
|
background-repeat: repeat !important;
|
|
padding: 1rem 0;
|
|
border-bottom: 2px solid var(--text-dunkelrot);
|
|
}
|
|
|
|
.navbar-custom .navbar-brand,
|
|
.navbar-custom .nav-link {
|
|
color: #ffffff !important;
|
|
text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.navbar-custom .nav-link:hover,
|
|
.navbar-custom .dropdown-item:hover,
|
|
.navbar-custom .nav-link.active,
|
|
.navbar-custom .dropdown-item.active {
|
|
color: #ffffff !important;
|
|
background-color: var(--text-dunkelrot) !important;
|
|
}
|
|
|
|
.navbar-custom .dropdown-menu {
|
|
background-color: var(--fw-rot) !important;
|
|
background-image: url('../bilder/logo2.jpeg') !important;
|
|
background-size: 9em !important;
|
|
border: 1px solid var(--text-dunkelrot);
|
|
}
|
|
|
|
.navbar-custom .dropdown-item { color: #ffffff !important; }
|
|
|
|
/* PAGE-HEADER */
|
|
.page-header {
|
|
position: relative;
|
|
text-align: center;
|
|
padding: 60px 0;
|
|
background-color: #fff;
|
|
overflow: hidden;
|
|
border-bottom: 1px solid #dee2e6;
|
|
}
|
|
|
|
.header-bg-icon {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
height: 120%;
|
|
opacity: 0.07;
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.page-header h1 {
|
|
position: relative;
|
|
z-index: 1;
|
|
color: var(--fw-rot);
|
|
font-weight: 800;
|
|
text-transform: uppercase;
|
|
margin-bottom: 0.5rem;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.page-header p {
|
|
position: relative;
|
|
z-index: 1;
|
|
font-size: 1.1rem;
|
|
color: #6c757d;
|
|
}
|
|
|
|
/* Organigramm Styling */
|
|
.detail-card {
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
|
|
border-left: 5px solid var(--fw-rot);
|
|
padding: 40px 20px;
|
|
margin: 40px auto 60px auto;
|
|
max-width: 1100px;
|
|
text-align: center;
|
|
}
|
|
|
|
.box {
|
|
border: 2px solid var(--fw-rot);
|
|
background: #fff;
|
|
padding: 12px;
|
|
width: 220px;
|
|
display: inline-block;
|
|
border-radius: 4px;
|
|
z-index: 5;
|
|
position: relative;
|
|
}
|
|
|
|
.role { display: block; font-size: 0.75rem; color: var(--text-dunkelrot); font-weight: bold; text-transform: uppercase; margin-bottom: 3px; }
|
|
.name { font-weight: bold; font-size: 1.05rem; color: #111; }
|
|
.vline { width: 2px; background-color: var(--fw-rot); height: 30px; margin: 0 auto; }
|
|
|
|
.stab-wrapper { position: relative; width: 540px; margin: 0 auto; display: flex; justify-content: space-between; }
|
|
.line-h-stab { position: absolute; top: 50%; left: 110px; right: 110px; height: 2px; background: var(--fw-rot); z-index: 1; }
|
|
.line-v-stab { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--fw-rot); margin-left: -1px; }
|
|
|
|
.fachwart-wrapper { position: relative; width: 100%; max-width: 930px; margin: 0 auto; }
|
|
.line-h-fach { position: absolute; top: 0; left: 110px; right: 110px; height: 2px; background: var(--fw-rot); }
|
|
.fachwart-grid { display: flex; justify-content: space-between; flex-wrap: wrap; }
|
|
.fach-col { display: flex; flex-direction: column; align-items: center; }
|
|
.stich { width: 2px; height: 20px; background-color: var(--fw-rot); }
|
|
|
|
.footer-lists { margin-top: 60px; border-top: 2px solid var(--fw-rot); padding-top: 40px; text-align: center; }
|
|
.l-head { color: var(--text-dunkelrot); font-weight: bold; margin-bottom: 15px; display: block; font-size: 1.1rem; border-bottom: 1px solid #eee; padding-bottom: 5px; }
|
|
.name-list { text-align: left; display: inline-block; font-size: 0.9rem; line-height: 1.7; color: #444; }
|
|
strong { color: var(--fw-rot); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<nav class="navbar navbar-expand-lg navbar-custom">
|
|
<div class="container-fluid">
|
|
<a class="navbar-brand d-flex align-items-center" href="../index.html">
|
|
<img src="../bilder/ffw_transp_72.gif" alt="Logo" style="height: 3em; margin-right: 10px;">
|
|
<span>Feuerwehr Stadt Wehlen</span>
|
|
</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
<ul class="navbar-nav ms-auto">
|
|
<li class="nav-item"><a class="nav-link" href="#">Aktuelles</a></li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown">Über uns</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="../geschichte/Geschichte.html">Geschichte</a></li>
|
|
<li><a class="dropdown-item" href="../technik/technik.html">Technik</a></li>
|
|
<li><hr class="dropdown-divider"></li>
|
|
<li><a class="dropdown-item active" href="Organigramm.html">Organigramm</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item"><a class="nav-link" href="#">Veranstaltungen</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="#">Kontakt/Impressum</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="page-header">
|
|
<img src="../bilder/ffw_transp_72.gif" class="header-bg-icon" alt="BG-Icon">
|
|
<h1>Unsere Mitglieder</h1>
|
|
<p class="lead">Struktur und Einsatzabteilung der Stadt Wehlen</p>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="detail-card shadow-lg">
|
|
|
|
<div class="box"><span class="role">Wehrleiter</span><span class="name">Herzog, André</span></div>
|
|
<div class="vline"></div>
|
|
<div class="box"><span class="role">Stellvertreter</span><span class="name">Flössel, Markus<br>Drechsel, Manuel</span></div>
|
|
<div class="vline"></div>
|
|
|
|
<div class="stab-wrapper">
|
|
<div class="line-h-stab"></div><div class="line-v-stab"></div>
|
|
<div class="box"><span class="role">Schriftführer</span><span class="name">Flössel, Markus</span></div>
|
|
<div class="box"><span class="role">Kassenwart</span><span class="name">Marder, Uwe</span></div>
|
|
</div>
|
|
|
|
<div class="vline"></div>
|
|
|
|
<div class="fachwart-wrapper">
|
|
<div class="line-h-fach"></div>
|
|
<div class="fachwart-grid">
|
|
<div class="fach-col"><div class="stich"></div><div class="box"><span class="role">Atemschutz-Gerätewart</span><span class="name">Reißig, Kersten</span></div></div>
|
|
<div class="fach-col"><div class="stich"></div><div class="box"><span class="role">Gerätewart</span><span class="name">Blümel, Dirk</span></div></div>
|
|
<div class="fach-col"><div class="stich"></div><div class="box"><span class="role">Jugendwart</span><span class="name">Hübsch, Sebastian</span></div></div>
|
|
<div class="fach-col"><div class="stich"></div><div class="box"><span class="role">Altersabteilung</span><span class="name">Dittmann, Frank</span></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-lists">
|
|
<div class="row">
|
|
<div class="col-md-3 mb-4">
|
|
<span class="l-head">Atemschutzträger</span>
|
|
<div class="name-list">
|
|
Blümel, Dirk<br>Flössel, Markus<br>Gottlöber, Heiko<br>Herzog, Nico<br>Hübsch, Alexander<br>Hübsch, Sebastian<br>John, Marko<br>Kurze, Steffen
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3 mb-4">
|
|
<span class="l-head">Maschinisten</span>
|
|
<div class="name-list">
|
|
Blümel, Dirk<br>Drechsel, Manuel<br>Flössel, Markus<br>Herzog, André<br>Hübsch, Alexander<br>Hübsch, Sebastian<br>John, Marko<br>Marder, Uwe
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3 mb-4">
|
|
<span class="l-head">Führung</span>
|
|
<div class="name-list">
|
|
<strong>Zugführer:</strong><br>Kurze, Steffen<br><br>
|
|
<strong>Verbandsführer:</strong><br>Mathe, Thomas<br><br>
|
|
<strong>Gruppenführer:</strong><br>Blümel, Dirk<br>Drechsel, Manuel<br>Flössel, Markus<br>Herzog, André
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3 mb-4">
|
|
<span class="l-head">Mannschaft</span>
|
|
<div class="name-list">
|
|
<strong>Truppführer:</strong><br>Gottlöber, Heiko<br>Hübsch, Alexander<br>Hübsch, Sebastian<br>John, Marko<br>Marder, Uwe<br><br>
|
|
<strong>Truppmann:</strong><br>Caspari, Patrick<br>Herzog, Nico<br>Marder, Lukas<br>Mathe, Albert<br>Pohl, Michael<br>Riedel, Pascal
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
</body>
|
|
</html> |