ff-melle-web/index.html

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Feuerwehr Melle</title>
<meta name="description" content="Demo-Webseite der Feuerwehr Melle">
<meta name="theme-color" content="#c8102e">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="utilitybar">
  <div class="wrap">
    <a href="#/kontakt" data-nav><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 5h4l2 5-2.5 1.5a11 11 0 0 0 5 5L13 14l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 7a2 2 0 0 1 0-2Z"/></svg>Notruf 112</a>
    <a href="#/kontakt" data-nav><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="5.5" width="18" height="13" rx="2"/><path d="m3.5 7 8.5 6 8.5-6"/></svg>Kontakt</a>
    <a href="#/suche" data-nav><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.6-3.6"/></svg>Suche</a>
  </div>
</div>

<header class="site">
  <div class="wrap headrow">
    <a href="#/" data-nav class="brand" aria-label="Feuerwehr Melle – Startseite">
      <svg class="flame" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12.963 2.286a.75.75 0 0 0-1.071-.136 9.742 9.742 0 0 0-3.539 6.176 7.547 7.547 0 0 1-1.705-1.715.75.75 0 0 0-1.152-.082A9 9 0 1 0 15.68 4.534a7.46 7.46 0 0 1-2.717-2.248ZM15.75 14.25a3.75 3.75 0 1 1-7.313-1.172c.628.465 1.35.81 2.133 1a5.99 5.99 0 0 1 1.925-3.546 3.75 3.75 0 0 1 3.255 3.718Z"/></svg>
      <span class="word"><span class="l1">FEUERWEHR</span><span class="l2">MELLE</span></span>
    </a>
    <span class="tagline">Unsere Stadt.<br>Unsere Sicherheit.</span>

    <nav class="primary" aria-label="Hauptnavigation">
      <a href="#/einsaetze" data-nav>Einsätze</a>
      <a href="#/aktuelles" data-nav>Aktuelles</a>
      <a href="#/ortsfeuerwehren" data-nav>Ortsfeuerwehren</a>
      <a href="#/jugendfeuerwehr" data-nav>Kinder- und Jugendfeuerwehren</a>
      <a href="#/termine" data-nav>Termine</a>
      <a href="#/ueber-uns" data-nav>Über uns</a>
    </nav>

    <a href="#/kontakt" data-nav class="btn-notruf">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M3 5h4l2 5-2.5 1.5a11 11 0 0 0 5 5L13 14l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 7a2 2 0 0 1 0-2Z"/></svg>
      <span class="lbl-long">112 NOTRUF</span><span class="lbl-short">112</span>
    </a>

    <button class="burger" id="burgerBtn" aria-label="Menü öffnen" aria-expanded="false">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M3.5 7h17M3.5 12h17M3.5 17h17"/></svg>
    </button>
  </div>
</header>

<div class="menu-scrim" id="menuScrim"></div>
<nav class="menu-panel" id="menuPanel" aria-label="Menü">
  <div class="menu-top">
    <a href="#/" data-nav class="brand on-red">
      <svg class="flame" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12.963 2.286a.75.75 0 0 0-1.071-.136 9.742 9.742 0 0 0-3.539 6.176 7.547 7.547 0 0 1-1.705-1.715.75.75 0 0 0-1.152-.082A9 9 0 1 0 15.68 4.534a7.46 7.46 0 0 1-2.717-2.248ZM15.75 14.25a3.75 3.75 0 1 1-7.313-1.172c.628.465 1.35.81 2.133 1a5.99 5.99 0 0 1 1.925-3.546 3.75 3.75 0 0 1 3.255 3.718Z"/></svg>
      <span class="word"><span class="l1">FEUERWEHR</span><span class="l2">MELLE</span></span>
    </a>
    <button class="menu-close" id="menuCloseBtn" aria-label="Menü schließen">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M6 6l12 12M18 6 6 18"/></svg>
    </button>
  </div>
  <div class="menu-scroll">
    <ul id="menuList"></ul>
    <div class="menu-divider"></div>
    <div class="menu-util">
      <a href="#/kontakt" data-nav><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 5h4l2 5-2.5 1.5a11 11 0 0 0 5 5L13 14l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 7a2 2 0 0 1 0-2Z"/></svg>112 – Notruf</a>
      <a href="#/kontakt" data-nav><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 21s-7-6.1-7-11.5A7 7 0 0 1 19 9.5C19 14.9 12 21 12 21Z"/><circle cx="12" cy="9.5" r="2.4"/></svg>Kontakt</a>
      <a href="#/suche" data-nav><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.6-3.6"/></svg>Suche</a>
    </div>
  </div>
  <div class="menu-foot">
    <div class="menu-scene" aria-hidden="true">
      <svg viewBox="0 0 400 190" width="400" height="190">
        <defs>
          <!-- weiche Uebergaenge: Himmel hellt nach unten auf, Boden laeuft nach unten aus -->
          <linearGradient id="ms-sky" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stop-color="#fff" stop-opacity="0"/>
            <stop offset=".6" stop-color="#fff" stop-opacity=".04"/>
            <stop offset="1" stop-color="#fff" stop-opacity=".06"/>
          </linearGradient>
          <linearGradient id="ms-ground" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stop-color="#000" stop-opacity=".13"/>
            <stop offset=".5" stop-color="#000" stop-opacity=".07"/>
            <stop offset="1" stop-color="#000" stop-opacity="0"/>
          </linearGradient>
          <linearGradient id="ms-sil" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stop-color="#000" stop-opacity=".11"/>
            <stop offset="1" stop-color="#000" stop-opacity=".145"/>
          </linearGradient>
        </defs>

        <path d="M0 0 H400 V126 C260 130 130 114 0 120 Z" fill="url(#ms-sky)"/>

        <!-- Dorf-Silhouette: Baeume, Haeuser, Kirche (Grundlinie y=134) -->
        <g fill="url(#ms-sil)">
          <rect x="25" y="112" width="6" height="22" rx="2"/>
          <circle cx="28" cy="92" r="20"/><circle cx="11" cy="104" r="13.5"/><circle cx="44" cy="103" r="14"/><circle cx="30" cy="78" r="12"/>

          <rect x="74" y="116" width="5" height="18" rx="2"/>
          <circle cx="76" cy="104" r="14"/><circle cx="65" cy="111" r="10.5"/><circle cx="87" cy="111" r="10.5"/>

          <rect x="100" y="102" width="46" height="32"/>
          <path d="M94 103 123 80 152 103Z"/>
          <rect x="137" y="75" width="9" height="16"/>

          <rect x="150" y="109" width="27" height="25"/>
          <path d="M144 110 163 94 182 110Z"/>

          <rect x="198" y="108" width="7" height="26" rx="2"/>
          <circle cx="202" cy="92" r="22"/><circle cx="182" cy="103" r="14"/><circle cx="222" cy="102" r="14"/><circle cx="203" cy="73" r="11"/>

          <path d="M258 58 268 8 278 58Z"/>
          <rect x="256" y="56" width="24" height="78"/>
          <rect x="281" y="92" width="36" height="42"/>
          <path d="M275 93 298 78 321 93Z"/>

          <rect x="330" y="114" width="6" height="20" rx="2"/>
          <circle cx="333" cy="98" r="17"/><circle cx="319" cy="107" r="12"/><circle cx="347" cy="106" r="12"/>

          <rect x="382" y="114" width="6" height="20" rx="2"/>
          <circle cx="385" cy="98" r="19"/><circle cx="369" cy="107" r="12.5"/><circle cx="399" cy="106" r="12"/>
        </g>

        <!-- Schallfenster im Kirchturm -->
        <g fill="rgba(255,255,255,.05)">
          <rect x="260" y="66" width="7" height="13" rx="3.5"/>
          <rect x="269" y="66" width="7" height="13" rx="3.5"/>
        </g>

        <!-- Huegel im Vordergrund, laeuft nach unten transparent aus -->
        <path d="M0 120 C130 114 260 130 400 126 V190 H0Z" fill="url(#ms-ground)"/>
        <path d="M0 120 C130 114 260 130 400 126" fill="none" stroke="rgba(255,255,255,.06)" stroke-width="1"/>
      </svg>
    </div>

    <p class="claim">Gemeinsam. Stark.<br>Für Melle.</p>
    <div class="menu-rule"></div>
    <div class="menu-social">
      <a href="#" aria-label="Facebook"><svg viewBox="0 0 32 32" aria-hidden="true"><mask id="mf-fb"><rect width="32" height="32" fill="#000"/><circle cx="16" cy="16" r="13.4" fill="#fff"/><path d="M17.3 25.2v-7.9h2.4l.45-3.05h-2.85v-1.8c0-.88.27-1.45 1.55-1.45h1.45V8.26c-.25-.03-1.12-.1-2.14-.1-2.22 0-3.66 1.32-3.66 3.78v2.31h-2.4v3.05h2.4v7.9Z" fill="#000"/></mask><rect width="32" height="32" fill="#fff" mask="url(#mf-fb)"/></svg></a>
      <a href="#" aria-label="Instagram"><svg viewBox="0 0 32 32" fill="none" stroke="#fff" stroke-width="1.7" aria-hidden="true"><rect x="3.6" y="3.6" width="24.8" height="24.8" rx="7.6"/><circle cx="16" cy="16" r="5.7"/><circle cx="22.9" cy="9.1" r="1.3" fill="#fff" stroke="none"/></svg></a>
      <a href="#" aria-label="YouTube"><svg viewBox="0 0 32 32" aria-hidden="true"><mask id="mf-yt"><rect width="32" height="32" fill="#000"/><circle cx="16" cy="16" r="13.4" fill="#fff"/><path d="M13.7 11.9v8.2l7.1-4.1Z" fill="#000"/></mask><rect width="32" height="32" fill="#fff" mask="url(#mf-yt)"/></svg></a>
    </div>
  </div>
</nav>

<main id="main" class="wrap"></main>

<footer class="site">
  <div class="wrap footgrid">
    <div class="footcol">
      <div class="brand on-red" style="align-items:center">
        <svg class="flame" viewBox="0 0 24 24" fill="currentColor" style="width:36px;height:36px" aria-hidden="true"><path d="M12.963 2.286a.75.75 0 0 0-1.071-.136 9.742 9.742 0 0 0-3.539 6.176 7.547 7.547 0 0 1-1.705-1.715.75.75 0 0 0-1.152-.082A9 9 0 1 0 15.68 4.534a7.46 7.46 0 0 1-2.717-2.248ZM15.75 14.25a3.75 3.75 0 1 1-7.313-1.172c.628.465 1.35.81 2.133 1a5.99 5.99 0 0 1 1.925-3.546 3.75 3.75 0 0 1 3.255 3.718Z"/></svg>
        <span class="word"><span class="l1" style="font-size:12px">FEUERWEHR</span><span class="l2" style="font-size:22px">MELLE</span></span>
      </div>
    </div>
    <div class="footcol">
      <div class="footlist">
        <div class="row"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 5h4l2 5-2.5 1.5a11 11 0 0 0 5 5L13 14l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 7a2 2 0 0 1 0-2Z"/></svg>112 – Notruf</div>
        <a href="#/kontakt" data-nav><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="5.5" width="18" height="13" rx="2"/><path d="m3.5 7 8.5 6 8.5-6"/></svg>Kontakt</a>
        <div class="row"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 21s-7-6.1-7-11.5A7 7 0 0 1 19 9.5C19 14.9 12 21 12 21Z"/><circle cx="12" cy="9.5" r="2.4"/></svg><span>Feuerwehr Melle<br>Hermannstraße 29<br>49324 Melle</span></div>
      </div>
    </div>
    <div class="footcol">
      <h5>Schnellzugriff</h5>
      <div class="footlist">
        <a href="#/einsaetze" data-nav>Einsätze</a>
        <a href="#/aktuelles" data-nav>Aktuelles</a>
        <a href="#/ortsfeuerwehren" data-nav>Ortsfeuerwehren</a>
        <a href="#/jugendfeuerwehr" data-nav>Kinder- und Jugendfeuerwehren</a>
      </div>
    </div>
    <div class="footcol">
      <h5>Folgen Sie uns</h5>
      <div class="footsocial">
        <a href="#" aria-label="Facebook"><svg viewBox="0 0 32 32" fill="currentColor"><circle cx="16" cy="16" r="13"/><path d="M17.4 25V16.6h2.3l.4-3h-2.7v-1.8c0-.8.3-1.4 1.5-1.4h1.3V7.7c-.3 0-1.2-.1-2.2-.1-2.2 0-3.7 1.3-3.7 3.8v2.2h-2.4v3h2.4V25Z" fill="var(--red-bar)"/></svg></a>
        <a href="#" aria-label="Instagram"><svg viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="5" width="22" height="22" rx="6.5"/><circle cx="16" cy="16" r="5.2"/><circle cx="22.6" cy="9.5" r="1.4" fill="currentColor" stroke="none"/></svg></a>
        <a href="#" aria-label="YouTube"><svg viewBox="0 0 32 32" fill="currentColor"><rect x="3.5" y="7.5" width="25" height="17" rx="5.5"/><path d="M13.6 12.4v7.2l6.2-3.6Z" fill="var(--red-bar)"/></svg></a>
      </div>
    </div>
  </div>
  <div class="wrap footbottom">
    <div class="left">
      <span>© 2026 Feuerwehr Melle</span><span class="sep">|</span>
      <a href="#/impressum" data-nav>Impressum</a><span class="sep">|</span>
      <a href="#/datenschutz" data-nav>Datenschutz</a>
    </div>
    <span>Gemeinsam. Stark. Für Melle.</span>
  </div>
</footer>

<nav class="tabbar" id="tabbar" aria-label="Schnellnavigation">
  <button data-tab="/" class="is-active"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 11 12 4l8 7"/><path d="M6.5 9.6V20h11V9.6"/></svg>Start</button>
  <button data-tab="/einsaetze"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 4a5 5 0 0 1 5 5v4H7V9a5 5 0 0 1 5-5Z"/><path d="M4.5 13h15v3a2 2 0 0 1-2 2h-11a2 2 0 0 1-2-2Z"/><path d="M12 4V2M5.5 6.5 4 5M18.5 6.5 20 5"/></svg>Einsätze</button>
  <button data-tab="/aktuelles"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3.5" y="4.5" width="17" height="15" rx="2"/><path d="M7 9h10M7 13h10M7 17h6"/></svg>News</button>
  <button id="tabMenuBtn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg>Menü</button>
</nav>
<script src="assets/js/app.js"></script>
</body>
</html>