<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}ComputerSchaf{% endblock %}</title>
    <meta name="description" content="ComputerSchaf - Ihr Rundum-Computerservice in Innsbruck & Rum. Ob persönliche Beratung, Datenrettung oder Reparatur, ich helfe Ihnen gerne!">
    <link rel="stylesheet" href="static/styles.css">
    <link rel="stylesheet" href="static/fonts/LatoLatin/LatoLatin.css">
    <link rel="icon" href="static/img/favicon.ico" type="image/icon type">
    {% block assets %}{% endblock %}
  </head>

  <body>
    <div class="header-contact">
      <div class="header-content">
        <span>
          <img width="16" height="16" class="text-icon" src="static/img/icons/telephone.svg" alt="Telefon">
          <a href="tel:+436641240214">+43 664 1240214</a>
        </span>
        <span>
          <img width="16" height="16" class="text-icon" src="static/img/icons/mail.svg" alt="Email">
          <a href="mailto:office@computerschaf.at">office@computerschaf.at</a>
        </span>
      </div>
    </div>
    <header class="header-nav">
      <nav class="header-content">
        <a href="index.html" class="header-title">
            <img src="static/img/logo.svg" alt="" class="logo-img" height="48" width="48" alt="">
            ComputerSchaf
        </a>
        <span class="header-spacer"></span>
        <span>
          <a href="index.html" class="nav-item link-button">Leistungen</a>
        </span>
        <span>
          <a href="bedingungen.html" class="nav-item link-button">Bedingungen</a>
        </span>
        <span>
          <a href="#kontakt" class="nav-item link-button">Kontakt</a>
        </span>
      </nav>
    </header>
    {% block main %}
    <main>
    </main>
    {% endblock %}
    <footer>
      <div class="footer-content">
        <div class="footer-address">
          <h2 id="kontakt">Kontakt</h2>
          <img width="16" height="16" class="text-icon" src="static/img/icons/telephone.svg" alt="Telefon">
          <a href="tel:+436641240214">+43 664 1240214</a><br>
          <img width="16" height="16" class="text-icon" src="static/img/icons/mail.svg" alt="Email">
          <a href="mailto:office@computerschaf.at">office@computerschaf.at</a><br>
          Adresse (nur nach Terminvereinbarung):<br>
          Ulmenstraße 65, 6063 Rum
        </div>
        <div class="footer-sep"></div>
        <div class="footer-social">
          <h2>Soziale Medien</h2>
          <a href="https://www.facebook.com/people/ComputerSchaf/100090257378708/" aria-label="Computerschaf auf Facebook" class="social-media" target=" _blank">
            <img width="48" height="48" class="social-icon" src="static/img/icons/facebook.svg" alt="Facebook">
          </a>
          <a href="https://www.instagram.com/ComputerSchaf/" class="social-media" aria-label="Computerschaf auf Instagram" target=" _blank">
            <img width="48" height="48" class="social-icon" src="static/img/icons/instagram.svg" alt="Instagram">
          </a>
          <a href="https://www.youtube.com/channel/UCocc5i1jn2y8plvUp5SM8vQ" aria-label="Computerschaf auf Youtube" class="social-media" target=" _blank">
            <img width="48" height="48" class="social-icon" src="static/img/icons/youtube.svg" alt="Youtube">
          </a>
        </div>
        <div class="footer-sep"></div>
        <div class="footer-info">
          <h2>Informationen</h2>
          <div>
            <a href="impressum.html">Impressum</a><br>
            <a href="datenschutz.html">Datenschutz</a>
          </div>
          <br>
          <div class="credits">
            Webdesign von <a href="https://gabrielhuber.at">Gabriel Huber</a><br>
            Icons von <a href="https://theresagrossalber.at/">Theresa Grossalber</a>
          </div>
        </div>
      </div>
    </footer>
  </body>
</html>
