{% extends "st_base.html" %}
{% load static %}
{% load st_extratags %}

{% block javascript %}
// Modal Image Gallery


// Change style of navbar on scroll
window.onscroll = function() {myFunction()};
function myFunction() {
    var navbar = document.getElementById("myNavbar");
    if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
        navbar.className = "w3-bar" + " w3-card" + " w3-animate-top" + " st-br";
    } else {
        navbar.className = navbar.className.replace(" w3-card w3-animate-top st-br", "");
    }
}

// Used to toggle the menu on small screens when clicking on the menu button
function toggleFunction() {
    var x = document.getElementById("navDemo");
    if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
    } else {
        x.className = x.className.replace(" w3-show", "");
    }
}


{% endblock %}

{% block style %}

/* Create a Parallax Effect */
.bgimg-1, .bgimg-2, .bgimg-3 {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* First image (Logo. Full height) */
.bgimg-1 {
    background-image: url("{% static 'img/banner.jpg'%}");
  min-height: 100%;
}

/* Second image (Portfolio) */
.bgimg-2 {
  background-image: url("{% static 'img/banner.jpg'%}");
  min-height: 400px;
}

/* Third image (Contact) */
.bgimg-3 {
  background-image: url("{% static 'img/banner.jpg'%}");
  min-height: 400px;
}

.w3-wide {letter-spacing: 10px;}
.w3-hover-opacity {cursor: pointer;}

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1600px) {
  .bgimg-1, .bgimg-2, .bgimg-3 {
    background-attachment: scroll;
    min-height: 400px;
  }
}

{% endblock %}

{% block content %}

<!-- First Parallax Image with Logo Text -->
<div class="bgimg-1 w3-display-container w3-opacity-min" id="top">
  <div class="w3-display-middle" style="white-space:nowrap;">
     <img src="{% static 'img/logo2.png' %}" style="width:100%" alt="Logo"><br>
    <span class="w3-center w3-padding-large w3-black w3-xlarge w3-wide w3-animate-opacity">SINNES TAU</span>
  </div>
</div>

<!-- Container (About Section) -->
<div class="w3-content w3-container w3-padding-64" id="about">
  <h3 class="w3-center">Tanja Sünkel</h3>
  <p class="w3-center">Ich heiße  <em>Tanja Sünkel</em>, wurde 1979 in Kulmbach geboren, habe eine Tochter und wohne in Hinterstöcken bei Kronach.<br>

Nach 18 Jahren Berufserfahrung im Klinikum Kulmbach hat mir mein eigener Lebensweg gezeigt, dass ohne den medizinischen Möglichkeiten, mein Dasein schon zu Ende gewesen wäre, ich aber auch nach all den Erfahrungen immer auf der Suche war, nicht nur Körper, sondern auch Geist und Seele zu heilen. So kam ich dazu, im Januar 2012 ein berufsbegleitendes Studium zur Heilpraktikerin zu machen, welches ich im März 2014 erfolgreich abgeschlossen habe.<br>

Nun möchte ich die beiden Bereiche - Schulmedizin und Naturheilkunde - miteinander verbinden, denn die Veränderungen unserer Zeit erfordern neue Heilmittel und Heilverfahren.<br>
Mein Ziel ist es die Individualität eines jeden einzelnen wahrzunehmen und mit den zur Verfügung stehenden Mitteln ein Wohlbefinden zu erlangen.</p>
  <div class="w3-row">
    <div class="w3-col m6 w3-center w3-padding-large">
      <p><b><i class="fa fa-user w3-margin-right"></i>Tanja Sünkel</b></p><br>
      <img src="{% static 'img/tanja.jpg' %}" class="w3-round w3-image" alt="Photo of Me" width="500" height="333">
    </div>
    <!-- Hide this text on small devices -->
    <div class="w3-col m6 w3-hide-small w3-padding-large">
      <p style="text-align: left;"><span style="text-decoration: underline;">Fort-/Weiterbildungen:</span></p>
      <p style="text-align: left;">- Apitherapie - Honigmassage</p>
      <p style="text-align: left;">- BlütenSeelen-Fachberaterin</p>
      <p style="text-align: left;">- Kinder- und Jugendentspannungspädagogin</p>
      <p style="text-align: left;">- Ohrakupunktur</p>
      <p style="text-align: left;">- 2015 Ausbildung zur Baumweisen (bei Sabine Wehye, www.herzschlag-trommeln.de)</p>
      <p>- 2016 Ausbildung zum Wildnispädagogen (bei Wolfgang Peham, Wildnisschule Wildniswissen)</p>
      <p>- 2017 Ausbildung zum psychologischen &amp; spirituellen Lebensberater + Seminarleiter (bei Gaiatra Rosina Heumann)</p>
      <p style="text-align: left;">Fachvorträge und Workshops habe ich besucht (Dunkelfelddiagnostik; Irisdiagnostik; Idiolektik; EFT; &nbsp;Homöopathie nach der Sehgal-Methode; Ernährung bei Intoleranzen, Unverträglichkeiten und Allergien; Darmsymbiose; Mikronährstoffe; Vitalpilze; Heilkräuter uvm.). Natürlich bin ich stets bemüht mein Wissen durch regelmäßige Fort- und Weiterbildungen zu erweitern.</p>
    </div>
</div>


<!-- Container (Portfolio Section) -->
<div class="w3-content w3-container w3-padding-64" id="portfolio">
  <h3 class="w3-center">Meine Arbeit</h3>
  <p class="w3-center"><em>Ich begleite Sie mit dem Coyote-Teaching bei der Entwicklung eigener Lösungen in den Bereichen:<br

Zusammenarbeit, Kommunikation, nachhaltige Potentialentfaltung, intuitives Verhalten & fördere mentale Fähigkeiten.<br

Ziel ist eine Anregung zur Selbstreflektion und die Überwindung von Konflikten.</em></p>
<h4 class="w3-center">Wildnispädagogik</h4>
<!-- Responsive Grid. Four columns on tablets, laptops and desktops. Will stack on mobile devices/small screens (100% width) -->
<div class="w3-row-padding w3-center">

  <div class="w3-col m3" >
    <a href="{% url 'externereferentin' %}" style="text-decoration: none;" title="mehr zu externe Referentin &amp; Seminarleiterin">
      <img src="{% static 'img/doz_f.jpg' %}" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Referent">    <p>externe Referentin &amp; Seminarleiterin</p>
      </a>
    </div>

    <div class="w3-col m3">
      <a href="{% url 'wildnispaedagogik' %}" style="text-decoration: none;" title="mehr zur Wildnispädagogik">
      <img src="{% static 'img/topf_f.jpg' %}" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Lagerfeuer">
      <p>Wildnispädagogik</p>
       </a>
    </div>

    <div class="w3-col m3">
      <a href="{% url 'lamatour' %}" style="text-decoration: none;" title="mehr zu Lamatouren">
	<img src="{% static 'img/lama_f.jpg' %}" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Lama">
	<p>Lamatour</p>
      </a>
    </div>
    
    <div class="w3-col m3">
      <a href="{% url 'kinderfreizeit' %}" style="text-decoration: none;" title="mehr zu Kinderfreizeiten">
	<img src="{% static 'img/kinder_f.jpg' %}" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Kinder">
	<p>Kinderfreizeit</p>
      </a>
    </div>

</div>
  <h4 class="w3-center">Naturheilpraxis</h4>
  <div class="w3-row-padding w3-center w3-section">

    <div class="w3-col m3">
      <a href="{% url 'honigmassage' %}" style="text-decoration: none;" title="mehr zur Honigmassage">
      <img src="{% static 'img/honig_f.jpg' %}" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Honig">
      <p>Honigmassagen</p>
      </a>
    </div>
    
    <div class="w3-col m3">
      <a href="{% url 'psychologischeberatung' %}" style="text-decoration: none;" title="mehr zur psychologischen Beratung">
	<img src="{% static 'img/beratung_f.jpg' %}" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Psychologische Beratung">
	<p>Psychologische Beratung</p>
      </a>
    </div>

    <div class="w3-col m3">
      <a href="{% url 'pflanzenheilkunde' %}" style="text-decoration: none;" title="mehr zur Pflanzenheilkunde">
	<img src="{% static 'img/pflanzenheilkunde_f.jpg' %}" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Psychologische Beratung">
	<p>Pflanzenheilkunde</p>
	</a>
    </div>
    
    <div class="w3-col m3">
      <a href="{% url 'ohrakupunktur' %}" style="text-decoration: none;" title="mehr zur Ohrakupunktur">
	<img src="{% static 'img/ohr_f.jpg' %}" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Ohrakupunktur">
	<p>Ohrakupunktur</p>
      </a>
    </div>
</div>

 

 <!-- Termine -->
      <div class="w3-white w3-margin w3-padding-64" id="termine">
        <div class="w3-container w3-padding st-br">
          <h4>Termine</h4>
        </div>
        <ul class="w3-ul w3-hoverable w3-white">
	  {% for te in termine %}
	  <a href="{% url 'termin' te.id %}" style="text-decoration: none;">
	    <li class="w3-padding-16">
              <img src="{% static te.bild %}" alt="Image" class="w3-left w3-margin-right" style="width:50px">
	      <span class="w3-text-grey">{{ te.date|deutschesdatum }}</span>
	      <br>
              <span class="w3-large">{{te.titel}}</span>
              <br>
              <span>{{ te.teaser }}</span>
            </li>
	  </a>
	  {% empty %}
	  <li class="w3-padding-16">
            <img src="{% static 'img/lama_f.jpg' %}" alt="Image" class="w3-left w3-margin-right" style="width:50px">
            <span class="w3-large">Zur Zeit keine Termine</span>
          </li>
	  {% endfor %}
        </ul>
      </div>




<!-- Modal -->


<!-- Container (Contact Section) -->
<div class="w3-content w3-container w3-padding-64" id="contact">
  <h3 class="w3-center">Hier finden Sie Sinnes-Tau</h3>
  <p class="w3-center"><em>Haben Sie Fragen, Wünsche oder Anregungen, dann freue ich mich auf eine Nachricht.</em></p>

  <div class="w3-row w3-padding-32 w3-section">
    <div class="w3-col m4 w3-container">
      <iframe width="100%" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=11.337032318115236%2C50.20948281383455%2C11.386299133300783%2C50.22807304448059&amp;layer=mapnik&marker=50.218792564567934%2C11.361665725708008" style="border: 1px solid black"></iframe><br/><small><a href="https://www.openstreetmap.org/?mlat=50.2188&amp;mlon=11.3617#map=15/50.2188/11.3617">Größere Karte anzeigen</a></small>
      
    
    </div>
    <div class="w3-col m8 w3-panel">
      <div class="w3-large w3-margin-bottom">
        <i class="fa fa-map-marker fa-fw w3-hover-text-black w3-xlarge w3-margin-right"></i> Hinterstöcken 26, 96315 
Kronach / Fischbach<br>
        <i class="fa fa-phone fa-fw w3-hover-text-black w3-xlarge w3-margin-right"></i> Phone: 0152/21700463<br>
        <i class="fa fa-envelope fa-fw w3-hover-text-black w3-xlarge w3-margin-right"></i> Email: info@sinnes-tau.de<br>
      </div>
      <p>Komme auf eine Tasse <i class="fa fa-coffee"></i> vorbei, oder hinterlasse mir eine Nachricht:</p>
      {% if form.errors %}
      {% for field in form %}
      {% for error in field.errors %}
      <div class="w3-panel w3-yellow">
	<h3>Eingabefehler!</h3>
	<p>{{ error|escape }}</p>
      </div>  
      
      {% endfor %}
      {% endfor %}
      {% for error in form.non_field_errors %}
      <div class="w3-panel w3-yellow">
	<h3>Eingabefehler!</h3>
	<p>{{ error|escape }}</p>
      </div>
      {% endfor %}
      {% endif %}


      <form action="{% url 'kontakt' %}" method="Post">
	{% csrf_token %} 
	{% for hidden_field in form.hidden_fields %}
	  {{ hidden_field }}
	{% endfor %}
        <div class="w3-row-padding" style="margin:0 -16px 8px -16px">
          <div class="w3-half">
	    {{ form.name }}
          </div>
          <div class="w3-half">
	    {{ form.from_email }}
          </div>
        </div>
	{{ form.message }}
        <button class="w3-button w3-black w3-right w3-section" type="submit">
          <i class="fa fa-paper-plane"></i> ABSENDEN
        </button>
      </form>
    </div>
  </div>
</div>
{% endblock %}