<?php
/**
 * Theme Name: tante-else
 * Template:   twentytwentyfour
 */

get_header();

$email = get_theme_mod( 'te_email', 'moin@nadinewachtendorf.de' );
?>


<!-- ========== HERO ========== -->
<section class="te-hero" id="home" style="position:relative;overflow:hidden;">
<canvas id="te-plant-canvas" aria-hidden="true" style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;opacity:0.18;z-index:0;"></canvas>
<div class="te-hero-inner" style="display:flex; flex-direction:column; align-items:center; max-width:1100px; margin:0 auto; padding:1.5rem 5rem 1rem; position:relative; z-index:1;">
<div class="te-hero-content" style="width:100%;">
<div style="display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; width:100%; margin-bottom:1.2rem; padding-bottom:1rem; border-bottom:2px solid rgba(46,61,40,0.15); gap:1rem;">
<div class="te-hero-logo-tag" style="font-family:'Playfair Display',Georgia,serif;font-weight:900;font-size:clamp(5rem,9vw,9rem);line-height:1;letter-spacing:-0.02em;color:#4E6343;flex-shrink:0;white-space:nowrap;">tante <span style="color:#C49A3C;">else.</span></div>
<h1 style="font-size:clamp(2rem,3.5vw,3.2rem);font-weight:500;line-height:1.35;letter-spacing:0.01em;text-transform:lowercase;color:#2E3D28;margin:0;font-family:'Playfair Display',Georgia,serif;text-align:center;" data-slogan>marketing, das <span class="highlight" style="font-style:italic; color:#C49A3C;">wächst</span> – wie die natur.</h1>
</div>
<div style="text-align:center;">
<p class="te-hero-sub" style="text-align:center; max-width:580px; margin:0 auto 2rem;">Gutes Marketing ist wie ein gut gepflegter Garten:<br>Es braucht einen Plan, ein bisschen Geduld <br> - und jemanden, der weiß, wie es geht.</p>
<div style="display:flex; gap:1rem; flex-wrap:wrap; justify-content:center;">
<a href="mailto:<?php echo esc_attr( $email ); ?>" class="te-btn-primary"><span class="te-btn-icon"></span> Kontakt aufnehmen<span class="te-btn-leaf"></span></a>
<a href="#leistungen" class="te-btn-outline"><span class="te-btn-icon"></span> Leistungen</a>
</div>
</div>
</div>
</div>
</section>
<script>
(function(){
var canvas=document.getElementById('te-plant-canvas');if(!canvas)return;
var ctx=canvas.getContext('2d');var plants=[];var W,H;
function resize(){W=canvas.width=canvas.offsetWidth;H=canvas.height=canvas.offsetHeight;}
resize();window.addEventListener('resize',resize);
var COLORS=['#7D9B76','#4E6343','#2E3D28','#C49A3C','#5A7A54'];
function makePlant(x){return{x:x,grown:0,maxH:80+Math.random()*140,speed:0.4+Math.random()*0.7,color:COLORS[Math.floor(Math.random()*COLORS.length)],leafSpacing:22+Math.random()*10,leanX:(Math.random()-0.5)*0.15};}
function spawnPlants(){plants=[];var n=Math.max(12,Math.floor(W/80));for(var i=0;i<n;i++){var p=makePlant(30+(i/n)*(W-60)+(Math.random()-0.5)*40);p.grown=p.maxH*Math.random();plants.push(p);}}
spawnPlants();
function drawLeaf(x,y,dir,size,color){ctx.save();ctx.translate(x,y);ctx.rotate(dir);ctx.beginPath();ctx.ellipse(0,-size*0.5,size*0.28,size*0.6,0,0,Math.PI*2);ctx.fillStyle=color;ctx.fill();ctx.restore();}
function drawStem(p){if(p.grown<=0)return;var baseY=H,tipY=H-p.grown;ctx.beginPath();ctx.moveTo(p.x,baseY);ctx.lineTo(p.x+p.leanX*p.grown,tipY);ctx.strokeStyle=p.color;ctx.lineWidth=1.5+p.maxH/180;ctx.lineCap='round';ctx.stroke();for(var ly=baseY-p.leafSpacing;ly>tipY;ly-=p.leafSpacing){var pr=(baseY-ly)/p.grown;var ls=14*pr*0.8+4;var lx=p.x+p.leanX*(baseY-ly);drawLeaf(lx-ls*0.6,ly,-0.7,ls,p.color);drawLeaf(lx+ls*0.6,ly,0.7,ls,p.color);}}
function animate(){ctx.clearRect(0,0,W,H);for(var i=0;i<plants.length;i++){var p=plants[i];if(p.grown<p.maxH)p.grown+=p.speed;drawStem(p);}if(Math.random()<0.003){var idx=Math.floor(Math.random()*plants.length);plants[idx]=makePlant(30+Math.random()*(W-60));}requestAnimationFrame(animate);}
animate();
})();
</script>

<!-- Hero-to-next gradient -->
<div aria-hidden="true" style="position:relative;height:80px;margin-top:-80px;background:linear-gradient(to bottom, transparent, var(--te-cream, #F5F0E8));z-index:2;pointer-events:none;"></div>
<!-- ========== ÜBER MICH ========== -->
<section id="ueber-mich" style="padding:6rem 4rem; background:var(--te-cream); color:var(--te-dark);">
  <div style="text-align:center; margin-bottom:3rem;">
    <span style="font-style:italic; letter-spacing:.12em; font-size:.75rem; color:#C49A3C; text-transform:uppercase; display:block; margin-bottom:.8rem;">Über mich</span>
    <h2 style="font-family:'Playfair Display',serif; font-size:clamp(2rem,4vw,3rem); font-weight:900; margin:0 0 .8rem; line-height:1.1;">Marketing mit Haltung –<br>und einem <em style="color:#C49A3C;">Lächeln</em></h2>
  </div>
  <div style="display:flex; gap:3rem; align-items:flex-start; max-width:1100px; margin:0 auto; flex-wrap:wrap;">
    <div style="flex:1; min-width:280px;">
      <p style="font-size:1rem; line-height:1.75; margin-bottom:1.2rem;">Ich bin Nadine – Marketingmensch aus Überzeugung, Pflanzenfreundin aus Prinzip. Seit Jahren plane und betreue ich Kampagnen für Unternehmen, die nicht nur verkaufen, sondern auch was sagen wollen. Mein Anspruch: Marketing soll wirken, ohne nervig zu sein. Und es darf gerne auch ein bisschen Spaß machen.</p>
      <p style="font-size:1rem; line-height:1.75;">Was mich antreibt, ist die Überzeugung, dass Sichtbarkeit und Haltung kein Widerspruch sind. Im Gegenteil: Wer ehrlich kommuniziert, bleibt im Kopf. Deshalb arbeite ich für Marken, die mehr im Sinn haben als den nächsten schnellen Klick.</p>
      <div style="display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.5rem;">
        <span class="te-eco-pill">🌱 Klimabewusst</span>
        <span class="te-eco-pill">♻️ Nachhaltig</span>
        <span class="te-eco-pill">💚 Authentisch</span>
        <span class="te-eco-pill">🌍 Regional &amp; Global</span>
      </div>
    </div>
    <div style="display:flex; justify-content:flex-end;">
      <?php
        $pid = get_theme_mod( 'te_profile_image_id', 0 );
        if ( $pid ) {
          echo wp_get_attachment_image( $pid, 'medium', false, array(
            'class' => 'te-profile-image',
            'alt'   => 'Tante Else – Nadine Wachtendorf',
            'style' => 'width:100%;max-width:280px;aspect-ratio:4/5;object-fit:cover;object-position:center top;border-radius:20px;display:block;box-shadow:0 12px 40px rgba(46,61,40,0.15);',
          ) );
        } else {
          echo '<div style="width:100%;max-width:280px;aspect-ratio:4/5;background:rgba(125,155,118,0.12);border-radius:20px;display:flex;align-items:center;justify-content:center;color:#7D9B76;font-size:.95rem;text-align:center;padding:2rem;">Profilbild<br>noch nicht gesetzt</div>';
        }
      ?>
    </div>
  </div>
</section>
<style>
/* === 1. Button "Leistungen": weisse Schrift === */
html body a.te-btn-outline,
html body a.te-btn-outline:link,
html body a.te-btn-outline:visited { color: #ffffff !important; }
a.te-btn-outline .te-btn-icon, a.te-btn-outline .te-btn-leaf { color: #ffffff !important; }

/* === 2. Leistungen-Sektion === */
#leistungen .te-services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  max-width: 1200px;
  margin: 2.5rem auto 0;
}
@media (max-width: 1100px) { #leistungen .te-services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { #leistungen .te-services-grid { grid-template-columns: 1fr; } }

#leistungen .te-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  min-height: 380px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  cursor: pointer;
  border: 0;
}
#leistungen .te-card-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform .5s ease;
}
#leistungen .te-card:hover .te-card-img { transform: scale(1.08); }

#leistungen .te-card-title {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: 26px 22px;
  background: linear-gradient(to top, rgba(20,28,16,.92) 0%, rgba(20,28,16,.55) 55%, rgba(20,28,16,0) 100%);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  z-index: 2;
  transition: opacity .35s ease;
}
#leistungen .te-card:hover .te-card-title { opacity: 0; }

#leistungen .te-card-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px 24px;
  background: linear-gradient(to top, rgba(46,61,40,.96), rgba(46,61,40,.92));
  color: #fff;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .35s ease, transform .35s ease;
}
#leistungen .te-card:hover .te-card-overlay { opacity: 1; transform: translateY(0); }
#leistungen .te-card-overlay h3 {
  margin: 0 0 .6rem;
  font-size: 1.45rem;
  color: #e3b23c;
}
#leistungen .te-card-overlay p {
  margin: 0;
  font-size: .98rem;
  line-height: 1.5;
  color: #f4f1e9;
}
</style>
<!-- ========== LEISTUNGEN ========== -->
<section class="te-services" id="leistungen" style="padding:6rem 4rem; background:#2E3D28; color:#fff;">
  <div style="text-align:center; margin-bottom:1rem;">
    <span style="font-style:italic; letter-spacing:.12em; font-size:.75rem; color:#C49A3C; text-transform:uppercase; display:block; margin-bottom:.8rem;">Leistungen</span>
    <h2 style="font-family:Playfair Display,Georgia,serif; font-weight:900; font-size:clamp(2rem,4vw,3rem); margin:0;">Das kann ich für dich tun</h2>
    <p style="max-width:560px; margin:1rem auto 0; color:#d8e0d0;">Von der Strategie bis zur Umsetzung – alles aus einer Hand.</p>
  </div>
  <div class="te-services-grid">
    <div class="te-card">
      <div class="te-card-img" style="background-image:url(https://nadinewachtendorf.de/wp-content/uploads/2026/05/Google-Ads.jpg);"></div>
      <h3 class="te-card-title">Google Ads</h3>
      <div class="te-card-overlay">
        <h3>Google Ads</h3>
        <p>Du willst genau dann sichtbar sein, wenn jemand nach dir sucht? Ich plane und optimiere deine Google-Kampagnen von A bis Z: Keyword-Recherche, Anzeigentexte, Conversion-Tracking, Zielgruppen-Setup, Monitoring und kontinuierliche Optimierung – damit dein Budget wirklich wirkt und jeder Klick zählt.</p>
      </div>
    </div>

    <div class="te-card">
      <div class="te-card-img" style="background-image:url(https://nadinewachtendorf.de/wp-content/uploads/2026/05/Meta-Ads.jpg);"></div>
      <h3 class="te-card-title">Meta Ads</h3>
      <div class="te-card-overlay">
        <h3>Meta Ads</h3>
        <p>Facebook und Instagram als echte Wachstumshebel nutzen – das ist mein Ding. Ich kümmere mich ums Kampagnen-Setup, erstelle Anzeigen in Bild, Video und Text, führe A/B-Tests durch, steuere das Budget und liefere dir klares Reporting – damit du immer weißt, was dein Geld macht.</p>
      </div>
    </div>

    <div class="te-card">
      <div class="te-card-img" style="background-image:url(https://nadinewachtendorf.de/wp-content/uploads/2026/05/Social-Media.jpg);"></div>
      <h3 class="te-card-title">Social Media</h3>
      <div class="te-card-overlay">
        <h3>Social Media</h3>
        <p>'Irgendwas posten' - is nicht! Wir erstellen Inhalte, die zu dir passen und deine Zielgruppe wirklich erreichen. Von der Content-Planung über Posts, Reels und Storys bis hin zum Community Management und regelmäßigen Auswertungen übernehme ich alles – oder auch nur das, was du brauchst.</p>
      </div>
    </div>

    <div class="te-card">
      <div class="te-card-img" style="background-image:url(https://nadinewachtendorf.de/wp-content/uploads/2026/05/Print-Median.jpg);"></div>
      <h3 class="te-card-title">Print</h3>
      <div class="te-card-overlay">
        <h3>Print</h3>
        <p>Gutes Design hört nicht beim Bildschirm auf. Ob Flyer, Broschüren, Plakate, Visitenkarten oder Anzeigenlayouts – ich gestalte Print-Materialien druckfertig und auf Wunsch mit kompletter Druckabwicklung, damit du dich um nichts kümmern musst.</p>
      </div>
    </div>
  </div>
</section>
<!-- ========== PROZESS ========== -->
<section id="prozess" style="padding:6rem 4rem; background:#3a4e30; color:white;">
  <div style="text-align:center; margin-bottom:4rem;">
    <span style="font-style:italic; letter-spacing:.12em; font-size:.75rem; color:#C49A3C; text-transform:uppercase; display:block; margin-bottom:.8rem;">Wie ich arbeite</span>
    <h2 style="font-family:'Playfair Display',serif; font-size:clamp(2rem,4vw,3rem); font-weight:900; margin:0 0 .8rem;">Von der Idee zur Wirkung</h2>
    <p style="font-size:1rem; opacity:.8; margin:0;">Mein Prozess ist klar und auf euch zugeschnitten.</p>
  </div>
  <div style="max-width:860px; margin:0 auto; position:relative;">
    <div style="position:absolute; left:50%; top:0; bottom:0; width:3px; background:linear-gradient(to bottom,#C49A3C,#7D9B76,#4E6343,#2E3D28); transform:translateX(-50%); border-radius:3px; opacity:0.5;"></div>
    <div style="display:flex; align-items:center; margin-bottom:3.5rem; position:relative;">
      <div style="flex:1; padding-right:2.5rem; text-align:right;">
        <span style="font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; color:#C49A3C; display:block; margin-bottom:.3rem;">Schritt 1</span>
        <h3 style="font-family:'Playfair Display',serif; font-size:1.5rem; font-weight:800; color:white; margin:0 0 .5rem;">Impuls</h3>
        <p style="color:rgba(255,255,255,0.78); font-size:.88rem; line-height:1.72; margin:0;">Die Basis legen. Jedes Projekt beginnt mit echtem Zuhören – ich tauche in euer Business ein, analysiere eure Situation und definiere gemeinsam mit euch Ziele, die wirklich etwas bewegen.</p>
      </div>
      <div style="position:relative; z-index:2; flex-shrink:0; width:56px; height:56px; border-radius:50%; background:#C49A3C; display:flex; align-items:center; justify-content:center; font-size:1.5rem; box-shadow:0 0 0 8px rgba(196,154,60,0.18),0 4px 18px rgba(0,0,0,0.35);">🌱</div>
      <div style="flex:1; padding-left:2.5rem;"></div>
    </div>
    <div style="display:flex; align-items:center; margin-bottom:3.5rem; position:relative;">
      <div style="flex:1; padding-right:2.5rem;"></div>
      <div style="position:relative; z-index:2; flex-shrink:0; width:56px; height:56px; border-radius:50%; background:#7D9B76; display:flex; align-items:center; justify-content:center; font-size:1.5rem; box-shadow:0 0 0 8px rgba(125,155,118,0.18),0 4px 18px rgba(0,0,0,0.35);">🌿</div>
      <div style="flex:1; padding-left:2.5rem; text-align:left;">
        <span style="font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; color:#C49A3C; display:block; margin-bottom:.3rem;">Schritt 2</span>
        <h3 style="font-family:'Playfair Display',serif; font-size:1.5rem; font-weight:800; color:white; margin:0 0 .5rem;">Konzept</h3>
        <p style="color:rgba(255,255,255,0.78); font-size:.88rem; line-height:1.72; margin:0;">Strategie mit Fundament. Ich entwickle ein durchdachtes Konzept, das eure Werte transportiert und eure Zielgruppe im Kern erreicht – klar strukturiert, mit Botschaften, die bleiben.</p>
      </div>
    </div>
    <div style="display:flex; align-items:center; margin-bottom:3.5rem; position:relative;">
      <div style="flex:1; padding-right:2.5rem; text-align:right;">
        <span style="font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; color:#C49A3C; display:block; margin-bottom:.3rem;">Schritt 3</span>
        <h3 style="font-family:'Playfair Display',serif; font-size:1.5rem; font-weight:800; color:white; margin:0 0 .5rem;">Kreation</h3>
        <p style="color:rgba(255,255,255,0.78); font-size:.88rem; line-height:1.72; margin:0;">Ideen Form geben. Kampagnen werden präzise aufgesetzt, Content maßgeschneidert erstellt und Ads kontinuierlich getrackt – damit nichts dem Zufall überlassen wird.</p>
      </div>
      <div style="position:relative; z-index:2; flex-shrink:0; width:56px; height:56px; border-radius:50%; background:#4E6343; display:flex; align-items:center; justify-content:center; font-size:1.5rem; box-shadow:0 0 0 8px rgba(78,99,67,0.18),0 4px 18px rgba(0,0,0,0.35);">🌸</div>
      <div style="flex:1; padding-left:2.5rem;"></div>
    </div>
    <div style="display:flex; align-items:center; position:relative;">
      <div style="flex:1; padding-right:2.5rem;"></div>
      <div style="position:relative; z-index:2; flex-shrink:0; width:56px; height:56px; border-radius:50%; background:#B35C2E; display:flex; align-items:center; justify-content:center; font-size:1.5rem; box-shadow:0 0 0 8px rgba(179,92,46,0.18),0 4px 18px rgba(0,0,0,0.35);">🌻</div>
      <div style="flex:1; padding-left:2.5rem; text-align:left;">
        <span style="font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; color:#C49A3C; display:block; margin-bottom:.3rem;">Schritt 4</span>
        <h3 style="font-family:'Playfair Display',serif; font-size:1.5rem; font-weight:800; color:white; margin:0 0 .5rem;">Entwicklung</h3>
        <p style="color:rgba(255,255,255,0.78); font-size:.88rem; line-height:1.72; margin:0;">Nachhaltiger Erfolg. Marketing braucht Pflege – genau wie eine Pflanze. Wir betrachten die Daten, optimieren Details und sorgen dafür, dass euer Erfolg langfristig wächst.</p>
      </div>
    </div>
  </div>
</section>
<!-- ========== KONTAKT ========== -->
<section id="kontakt" style="padding:6rem 4rem; background:var(--te-cream);">
  <div style="max-width:1100px; margin:0 auto; display:flex; align-items:flex-start; gap:4rem; flex-wrap:wrap;">
    <div style="flex:0.8; min-width:260px; padding-top:1rem;">
      <span style="font-size:.75rem; text-transform:uppercase; letter-spacing:.12em; color:#C49A3C; display:block; margin-bottom:.8rem; font-style:italic;">Bereit?</span>
      <h2 style="font-family:'Playfair Display',serif; font-size:clamp(2rem,4vw,3rem); font-weight:900; color:#2E3D28; margin:0 0 1rem; line-height:1.2;">Lass' Schnacken!</h2>
      <p style="font-size:1rem; color:#4E6343; line-height:1.7; margin:0;">Kein Druck, kein Blabla. Schreib mir einfach! <br>– ich melde mich schnell zurück und wir schauen gemeinsam, was ich für dich tun kann.</p>
    </div>
    <div style="flex:1.4; min-width:420px;">
      <div style="background:white; border-radius:20px; padding:2.5rem; box-shadow:0 8px 40px rgba(46,61,40,0.1);">
        <?php echo do_shortcode('[wpforms id="312"]'); ?>
      </div>
    </div>
  </div>
</section>

<div id="te-plant" aria-hidden="true" style="position:fixed;right:0;bottom:0;width:70px;z-index:10;pointer-events:none;">
  <div id="te-plant-clip">
    <svg viewBox="0 0 56 160" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:56px;overflow:visible;">
    <g class="te-pf-leaf" style="opacity:0;transition:opacity .6s ease .2s;">
      <ellipse cx="28" cy="12" rx="4.5" ry="10" fill="#FDFAF4" transform="rotate(0 28 22)" stroke="#D0D5C8" stroke-width=".5"/>
      <ellipse cx="28" cy="12" rx="4.5" ry="10" fill="#FDFAF4" transform="rotate(45 28 22)" stroke="#D0D5C8" stroke-width=".5"/>
      <ellipse cx="28" cy="12" rx="4.5" ry="10" fill="#FDFAF4" transform="rotate(90 28 22)" stroke="#D0D5C8" stroke-width=".5"/>
      <ellipse cx="28" cy="12" rx="4.5" ry="10" fill="#FDFAF4" transform="rotate(135 28 22)" stroke="#D0D5C8" stroke-width=".5"/>
      <ellipse cx="28" cy="12" rx="4.5" ry="10" fill="#FDFAF4" transform="rotate(180 28 22)" stroke="#D0D5C8" stroke-width=".5"/>
      <ellipse cx="28" cy="12" rx="4.5" ry="10" fill="#FDFAF4" transform="rotate(225 28 22)" stroke="#D0D5C8" stroke-width=".5"/>
      <ellipse cx="28" cy="12" rx="4.5" ry="10" fill="#FDFAF4" transform="rotate(270 28 22)" stroke="#D0D5C8" stroke-width=".5"/>
      <ellipse cx="28" cy="12" rx="4.5" ry="10" fill="#FDFAF4" transform="rotate(315 28 22)" stroke="#D0D5C8" stroke-width=".5"/>
      <circle cx="28" cy="22" r="8" fill="#C49A3C"/>
      <circle cx="28" cy="22" r="5.5" fill="#9D8040"/>
    </g>
    </svg>
    <svg width="58" height="44" viewBox="0 0 56 44" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect x="16" y="0" width="24" height="30" rx="2.5" fill="#B35C2E"/>
      <path d="M14 8 L42 8 L44 44 L12 44 Z" fill="#C46A38"/>
      <ellipse cx="28" cy="8" rx="14" ry="3" fill="#D4784A" opacity=".6"/>
    </svg>
  </div>
</div>
<script>
(function(){
var clip=document.getElementById('te-plant-clip');
var leaves=document.querySelectorAll('#te-plant .te-pf-leaf');
var thresh=[0.15,0.35,0.55,0.72,0.88];
function upd(){var p=Math.min(1,window.scrollY/Math.max(1,document.documentElement.scrollHeight-window.innerHeight));clip.style.height=Math.round(p*160)+'px';leaves.forEach(function(l,i){l.style.opacity=p>=(thresh[i]||0)?'1':'0';});}
window.addEventListener('scroll',upd,{passive:true});upd();
})();
</script>
<script>
(function(){
var toggle=document.querySelector('.te-nav-toggle');
var navList=document.querySelector('.te-nav-list');
if(!toggle||!navList)return;
toggle.addEventListener('click',function(){
var isOpen=navList.classList.toggle('is-open');
toggle.setAttribute('aria-expanded',isOpen?'true':'false');
var spans=toggle.querySelectorAll('span');
if(isOpen){spans[0].style.transform='rotate(45deg) translate(5px,5px)';spans[1].style.opacity='0';spans[2].style.transform='rotate(-45deg) translate(5px,-5px)';}
else{spans[0].style.transform='';spans[1].style.opacity='';spans[2].style.transform='';}
});
navList.querySelectorAll('a').forEach(function(a){a.addEventListener('click',function(){navList.classList.remove('is-open');toggle.setAttribute('aria-expanded','false');var spans=toggle.querySelectorAll('span');spans[0].style.transform='';spans[1].style.opacity='';spans[2].style.transform='';});});
})();
</script>

<?php get_footer(); ?>