<!DOCTYPE html>
<html class="no-js" lang="en" dir="ltr">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="x-ua-compatible" content="ie=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Ferienprogramm</title>
  <link rel="stylesheet" href="css/foundation.css" />
  <link rel="stylesheet" href="css/app.css" />
  <link href="https://marcapo-static.s3.eu-central-1.amazonaws.com/static/webdesign/gfonts/Handlee/stylesheet.css" rel="stylesheet" />
  <link href="https://marcapo-static.s3.eu-central-1.amazonaws.com/static/webdesign/gfonts/BalooThambi/stylesheet.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
  <link rel="stylesheet" href="css/customstyles.css" />
</head>

<body>
  <header class="row expanded header show-for-large" data-equalizer="header">
    <div class="medium-2 columns" data-equalizer-watch="header">
      <a href="index.html"><img src="images/logo_gross.png" alt="Ferienprogramm Logo" style="height: auto;" /></a>
    </div>
    <div class="medium-8 columns" data-equalizer-watch="header">
      <div style="text-align: center;">
        <ul class="menu">
          <li>
            <a href="index.html"><i class="fa fa-home fa-2x"></i></a>
          </li>
          <li><a href="bilder.cfm">Bilder</a></li>
          <li><a href="anmeldung.cfm">Anmelden</a></li>
          <li><a href="kontakt.html">Kontakt</a></li>
          <li><a href="informationen.html">Informationen</a></li>
          <li><a href="sponsoren.html">Sponsoren</a></li>
          <li><a href="abenteuerbericht.html">Abenteuerbericht</a></li>
          <li><a href="faq.html">Fragen</a></li>
          <li><a href="impressum.html">Impressum</a></li>
          <li><a href="datenschutz.html">Datenschutz</a></li>
        </ul>
      </div>
    </div>
    <div class="medium-2 columns" data-equalizer-watch="header">
      <a href="http://www.marcapo.com" target="_blank"><img src="images/marcapo_logo.png" alt="marcapo logo" class="float-right marcapo" /></a>
    </div>
  </header>
  <div class="show-for-large  margin"></div>
  <!-- Nur für kleinen Bildschirm -->
  <div class="row expanded hide-for-large" data-equalizer="header">
    <div class="medium-3 small-3 columns" data-equalizer-watch="header">
      <a href="index.html"><img src="images/logo_klein.png" alt="Ferienprogramm Logo" /></a>
    </div>
    <div class="medium-9 small-9 columns" data-equalizer-watch="header">
      <a href="http://www.marcapo.com" target="_blank" class="float-right"><img src="images/marcapo_m.png" alt="marcapo logo" /></a>
    </div>
    <div class="medium-12 columns" style="margin-top: 1rem;">
      <span data-responsive-toggle="responsive-menu" data-hide-for="large">
        <button class="menu-icon dark" type="button" data-toggle></button>
      </span>
      <div id="responsive-menu" data-animate="hinge-in-from-top spin-out">
        <ul class="menu vertical">
          <li>
            <a href="index.html"><i class="fa fa-home"></i></a>
          </li>
          <li><a href="bilder.cfm">Bilder</a></li>
          <li><a href="anmeldung.cfm">Anmelden</a></li>
          <li><a href="kontakt.html">Kontakt</a></li>
          <li><a href="informationen.html">Informationen</a></li>
          <li><a href="sponsoren.html">Sponsoren</a></li>
          <li><a href="abenteuerbericht.html">Abenteuerbericht</a></li>
          <li><a href="faq.html">Fragen</a></li>
          <li><a href="impressum.html">Impressum</a></li>
          <li><a href="datenschutz.html">Datenschutz</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="row expanded" data-equalizer="mainarea">
    <div class="medium-12 columns boxmargin" data-equalizer-watch="mainarea">
      <img src="images/logo_schrift.png" alt="Integratives Ferienabenteuer" />
      <br /><br /><br />
      <div class="wappen"><img src="images/wappen.png" alt="wappen" /></div>
    </div>
    <div class="medium-3 show-for-small-only columns boxmargin" data-equalizer-watch="mainarea">
      <div class="infobox">
        <ul>
          <li>
            Ferienabenteuer in den
            <span class="coloured-orange">Oster-, Pfingst- und Sommerferien</span>
          </li>
          <li>
            Das Ferienabenteuer richtet sich an alle berufstätigen Eltern mit
            <span class="coloured-orange">Kindern im Alter von 6 - 12 Jahren,</span>
            die im Verwaltungsbereich der Stadt Ebern, der Gemeinde
            Rentweinsdorf, Pfarrweisach, Maroldsweisach, Untermerzbach wohnen
            oder in den unterstützenden Unternehmen arbeiten.
          </li>
          <li>
            Für
            <span class="coloured-orange">ausführliche Informationen</span>
            stehen Ihnen die AWO-Mitarbeiter (Tel. 09531/6384) und die
            Mitarbeiterin der VG Ebern, Frau Thomann (Tel. 09531/629-19) zur
            Verfügung
          </li>
        </ul>
      </div>
    </div>
  </div>

  <div class="reveal" id="hinweismodal" data-reveal>
    <h1>Wichtiger Hinweis</h1>
    <h3>Zur besseren Planung haben wir die Anmeldefristen vorverlegt. Anmeldeschluss ist der <b>21.03.2023</b></h3>
    <button class="close-button" data-close aria-label="Close modal" type="button">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>


  <script type="text/javascript" src="js/vendor/jquery.js"></script>
  <script type="text/javascript" src="js/vendor/what-input.js"></script>
  <script type="text/javascript" src="js/vendor/foundation.js"></script>
  <script type="text/javascript" src="js/app.js"></script>
  <script type="text/javascript" src="js/classie.js"></script>

  <script>
    function init() {
      window.addEventListener("scroll", function (e) {
        var distanceY =
          window.pageYOffset || document.documentElement.scrollTop,
          shrinkOn = 100,
          header = document.querySelector("header");
        if (distanceY > shrinkOn) {
          classie.add(header, "small");
        } else {
          if (classie.has(header, "small")) {
            classie.remove(header, "small");
          }
        }
      });
    }
    window.onload = init();
    $(document).foundation();
  </script>

  <script>
    jQuery(document).ready(function() {
      $("#hinweismodal").foundation("open");
    });
  </script>

</body>

</html>
