<head lang="de">
  <meta charset="utf-8" />
  <title>
    {% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}
  </title>
  <meta name="description" content="{{ site.description }}">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="canonical" href="{{ page.url | replace:'index.html','' | absolute_url }}">
  <script src="{{ "/bootstrap/js/jquery-3.7.1.min.js" | relative_url }}" type="text/javascript"></script>
  <script src="{{ "/bootstrap/js/bootstrap.min.js" | relative_url }}" type="text/javascript"></script>
  <link rel="stylesheet" type="text/css" href="{{ "/bootstrap/css/bootstrap.css" | relative_url }}">
  <link href="{{ "/css/all.css" | relative_url }}" rel="stylesheet">
  <link rel="stylesheet" href="{{ "/css/main.css" | relative_url }}">

  <link rel="preload" href="/webfonts/fa-regular-400.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="preload" href="/webfonts/fa-solid-900.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="preload" href="/fonts/ShareTech-Regular.woff2" as="font" type="font/woff2" crossorigin>

  <link rel="alternate" type="application/rss+xml" href="{{ "/feed.xml" | relative_url }}">
  <link rel="apple-touch-icon" sizes="57x57" href="/favicon/apple-touch-icon-57x57.png">
  <link rel="apple-touch-icon" sizes="60x60" href="/favicon/apple-touch-icon-60x60.png">
  <link rel="apple-touch-icon" sizes="72x72" href="/favicon/apple-touch-icon-72x72.png">
  <link rel="apple-touch-icon" sizes="76x76" href="/favicon/apple-touch-icon-76x76.png">
  <link rel="apple-touch-icon" sizes="114x114" href="/favicon/apple-touch-icon-114x114.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/favicon/apple-touch-icon-120x120.png">
  <link rel="apple-touch-icon" sizes="144x144" href="/favicon/apple-touch-icon-144x144.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/favicon/apple-touch-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon-180x180.png">
  <link rel="manifest" href="/manifest.webmanifest">
  <meta name="theme-color" content="#d2d4bc">

  <style>
html {
    margin: 0;
    padding: 0;
    background-color: #d2d4bc; /* Hintergrundfarbe der Webseite */
}

.safe-area {
    position: relative;
    padding-top: env(safe-area-inset-top);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    background-color: inherit; /* Hintergrundfarbe der Webseite */
}

/* Spezifische Anpassungen für Safari auf iOS */
@media screen and (max-device-width: 480px) {
    /* iPhone */
    .safe-area {
        padding-top: constant(safe-area-inset-top);
        padding-right: constant(safe-area-inset-right);
        padding-bottom: constant(safe-area-inset-bottom);
        padding-left: constant(safe-area-inset-left);
    }
}
</style>

</head>
