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

{% block javascript %}
// Modal Image Gallery
function onClick(element) {
  document.getElementById("img01").src = element.src;
  document.getElementById("modal01").style.display = "block";
  var captionText = document.getElementById("caption");
  captionText.innerHTML = element.alt;
}

// 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", "");
    }
}

document.getElementsByClassName("tablink")[0].click();

function openCity(evt, cityName) {
  var i, x, tablinks;
  x = document.getElementsByClassName("honig");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < x.length; i++) {
    tablinks[i].classList.remove("w3-light-grey");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.classList.add("w3-light-grey");
}

{% 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;
  }
}
.honig {display:none}

{% endblock %}

{% block content %}

<!-- First Parallax Image with Logo Text -->
<div class="bgimg-1 w3-display-container w3-opacity-min" id="home">
  <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 w3-opacity w3-hover-opacity-off" 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>
    </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" onclick="document.getElementById('id02').style.display='block'">
      <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>
    </div>

    <div class="w3-col m3">
      <img src="{% static 'img/topf_f.jpg' %}" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Lagerfeuer">
      <p>Wildnispädagogik</p>
    </div>

    <div class="w3-col m3">
      <img src="{% static 'img/lama_f.jpg' %}" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Lama">
      <p>Lamatour</p>
    </div>

    <div class="w3-col m3">
      <img src="{% static 'img/kinder_f.jpg' %}" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Kinder">
      <p>Kinderfreizeit</p>
    </div>
  </div>
  <h4 class="w3-center">Naturheilpraxis</h4>
  <div class="w3-row-padding w3-center w3-section">
    <div class="w3-col m3" onclick="document.getElementById('id01').style.display='block'">
      <img src="{% static 'img/honig_f.jpg' %}" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Honig">
      <p>Honigmassagen</p>
    </div>
    <div class="w3-col m3">
      <img src="{% static 'img/beratung_f.jpg' %}" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="The mist over the mountains">
      <p>Psychologische Beratung</p>
    </div>

    <div class="w3-col m3">
      <img src="{% static 'img/pflanzenheilkunde_f.jpg' %}" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Coffee beans">
      <p>Pflanzenheilkunde</p>
    </div>
    <div class="w3-col m3">
      <img src="{% static 'img/ohr_f.jpg' %}" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Coffee beans">
      <p>Ohrakupunktur</p>
    </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="img/lama_f.jpg" alt="Image" class="w3-left w3-margin-right" style="width:50px">
            <span class="w3-large">Zur Zeit keine Termin</span>
          </li>
	  {% endfor %}
        </ul>
      </div>




<!-- Modal -->

<div id="id01" class="w3-modal">
 <div class="w3-modal-content w3-card-4 w3-animate-zoom">
  <header class="w3-container st-br"> 
   <span onclick="document.getElementById('id01').style.display='none'" 
   class="w3-button st-br w3-xlarge w3-display-topright">&times;</span>
   <h2>Honigmassage</h2>
  </header>

  <div class="w3-bar w3-border-bottom st-bl">
   <button class="tablink w3-bar-item w3-button st-bl" onclick="openCity(event, 'honigan')">Anwendung</button>
   <button class="tablink w3-bar-item w3-button st-bl" onclick="openCity(event, 'honigpr')">Produkte</button>
   <button class="tablink w3-bar-item w3-button st-bl" onclick="openCity(event, 'honigin')">Indikationen</button>
   <button class="tablink w3-bar-item w3-button st-bl" onclick="openCity(event, 'honigt')">Termin</button>
  </div>

  <div id="honigan" class="w3-container honig">
    <h1>Anwendung</h1>
    <p>Die&nbsp;<strong>Honig-Massage</strong> basiert auf einer Art Schröpftechnik, dabei wird nicht wie üblich in das Gewebe massiert, sondern aus dem Gewebe herausgezogen…</p>
    <ul>
      <li class="firstItem">verwendet wird frischer Honig aus der heimischen Bienenwabe</li>
      <li>es wird am Rücken gearbeitet</li>
      <li>die Massage ernährt und entgiftet - zur Kräftigung und Vitalisierung des ganzen Organismus</li>
      <li>Lymph- und Energiefluss werden verbessert - zur Entgiftung und Entschlackung</li>
      <li>die Selbstheilungskräfte werden aktiviert - wirkt stärkend auf das Immunsystem</li>
      <li>ist durchblutungsfördernd und löst Verklebungen</li>
      <li>zieht Entzündungen aus dem Gewebe</li>
      <li>regt den Stoffwechsel an</li>
      <li class="lastItem">Ablagerungen wie Umwelt-, Nahrungsmittel- und Medikamentengifte werden aus dem Gewebe gezogen</li>
    </ul>
  </div>

  <div id="honigpr" class="w3-container honig">
    <h1>Honigprodukte</h1>
    <p>Bienenprodukte gelten als wertvolle Naturheilmittel die uns Mutter Natur schenkt, wenn man achtsam damit umgeht.<br>Honig, Blütenpollen, Gelee Royal, Propolis uvm. liefern zahlreiche Nähr- und Vitalstoffe. Lebenswichtige Bausteine wie Vitamine, Mineralstoffe, Spurenelemente, Aminosäuren, Enzyme und Flavonoide sind leise Helfer die unser Immunsystem stärken, Körper und Geist kräftigen und Energie spenden.</p>
    <p style="text-align: justify;">Im Oktober 2012 habe ich eine Api-Therapie Ausbildung gemacht, seitdem lässt mich die Faszination Biene nicht mehr los. Durch den behutsamen Umgang mit den eigenen Völkern verstehe ich nach und nach immer mehr, &nbsp;wie in einer bestens organisierten Gemeinschaftsarbeit hervorragende Naturheilmittel entstehen. Beeindruckend ist auch, wie die Biene bei all ihrer emsigen Tätigkeit in keinen anderen Lebensraum störend eingreift.</p>
    <p style="text-align: justify;">Deshalb ist es für mich ein Privileg mit den eigenen Bienenprodukten zu arbeiten und deren kostbares Gut erfahren zu dürfen.<br>Gerne berichte ich ihnen mehr über die Vielfalt der Bienen und deren Produkte.<br><br></p>
  </div>
  
 <div id="honigin" class="w3-container honig">
   <h1>Indikationen</h1>
   <p>Verspannungen, Schmerzen, Herz-Kreislauf-Probleme, Magen-Darm-Störungen, rheumatische Erkrankungen, Atemwegserkrankungen sowie chron. Nasennebenhöhlen-Erkrankungen und chron. Schnupfen, Ein- und Durchschlafstörungen, chron. Müdigkeit, Anspannungen, Stress und Depressionen, Hormonanregend und -ausgleichend, bei Regelstörungen uvm.</p>
  </div>

  <div id="honigt" class="w3-container honig">
   <h1>Termine</h1>
   <p>Hier kommen Sie zu einem Termin.</p><br>
  </div>

  <div class="w3-container w3-light-grey w3-padding">
   <button class="w3-button w3-right w3-white w3-border" 
   onclick="document.getElementById('id01').style.display='none'">Close</button>
  </div>
 </div>
</div>


<div id="id02" class="w3-modal">
  <div class="w3-modal-content">
    <header class="w3-container st-br">
      <span onclick="document.getElementById('id02').style.display='none'"
      class="w3-button w3-display-topright">&times;</span>
      <h2>Honigmassage</h2>
    </header>

    <div class="w3-container">
<p>Die&nbsp;<strong>Honig-Massage</strong> basiert auf einer Art Schröpftechnik, dabei wird nicht wie üblich in das Gewebe massiert, sondern aus dem Gewebe herausgezogen…</p>
<ul>
<li class="firstItem">verwendet wird frischer Honig aus der heimischen Bienenwabe</li>
<li>es wird am Rücken gearbeitet</li>
<li>die Massage ernährt und entgiftet - zur Kräftigung und Vitalisierung des ganzen Organismus</li>
<li>Lymph- und Energiefluss werden verbessert - zur Entgiftung und Entschlackung</li>
<li>die Selbstheilungskräfte werden aktiviert - wirkt stärkend auf das Immunsystem</li>
<li>ist durchblutungsfördernd und löst Verklebungen</li>
<li>zieht Entzündungen aus dem Gewebe</li>
<li>regt den Stoffwechsel an</li>
<li class="lastItem">Ablagerungen wie Umwelt-, Nahrungsmittel- und Medikamentengifte werden aus dem Gewebe gezogen</li>
</ul>
    </div>
  </div>
</div>

<!-- 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>Swing by for a cup of <i class="fa fa-coffee"></i>, or leave me a note:</p>
      <form action="/action_page.php" target="_blank">
        <div class="w3-row-padding" style="margin:0 -16px 8px -16px">
          <div class="w3-half">
            <input class="w3-input w3-border" type="text" placeholder="Name" required name="Name">
          </div>
          <div class="w3-half">
            <input class="w3-input w3-border" type="text" placeholder="Email" required name="Email">
          </div>
        </div>
        <input class="w3-input w3-border" type="text" placeholder="Message" required name="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 %}