<style>
  @font-face {
    font-family: 'Gloss and Bloom';
    src: url('fonts/GlossAndBloom-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }

    html, body {
      display: flex;
      flex-direction: column;
      height: 100vh;
      margin: 0;
      padding: 0;
      background-color: #888;
      background-image: url('../hintergruende/bgleinen_mittelgrau_1920-1080.jpg'); /* Optionales Musterbild */
      background-size: auto;
      background-position: center;
      font-family: sans-serif;
    }

  #zurueck-alpha {
  position: absolute;
  top: 15px;
  left: 10px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#zurueck-alpha a {
  background: rgba(0, 0, 255, 0.2);
  padding: 4px 8px;
  border-radius: 6px;
  text-decoration: none;
  color: white;
  font-size: 13px;
  font-weight: bold;
  transition: background-color 0.2s;
}

#zurueck-alpha a:hover {
 background: rgba(0, 0, 255, 0.8);
}

 #zurueck-chrono {
  position: absolute;
  top: 45px;
  left: 10px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#zurueck-chrono a {
  background: rgba(0, 255, 0, 0.1);
  padding: 4px 8px;
  border-radius: 6px;
  text-decoration: none;
  color: white;
  font-size: 13px;
  font-weight: bold;
  transition: background-color 0.2s;
}

#zurueck-chrono a:hover {
  background: rgba(0, 255, 0, 0.6);
}







    header {
      text-align: center;
      padding: 10px;
      background: rgba(0, 0, 0, 0.3);
      color: white;
      text-shadow: 1px 1px 3px black;
    }

    header h1 {
      font-family: 'Gloss And Bloom', cursive;
      font-size: 38px;
      margin: 0;
    }

    header p {
      font-size: 12px;
      margin: 8px 0 0;
      font-weight: normal;
    }

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}

.urheber {
  position: absolute;
  top: 15px;
  right: 10px;
  text-align: right;
  font-size: 10px;
  font-family: sans-serif;
  line-height: 1.4;!--
  color: white;
  text-shadow: 1px 1px 2px black;
<!--  background: rgba(0, 0, 0, 0.2); -->
  padding: 6px 10px;
  border-radius: 8px;
}

.urheber p {
  font-size: 10px;
  margin: 0;
  color: #CCCCCC;
}

    .container {
      width: 100vw;
      flex: 1 0 auto;
      overflow: hidden;
      position: relative;
      cursor: grab;
    }

    .container:active {
      cursor: grabbing;
    }

    img {
      max-width: none;
      user-select: none;
      pointer-events: none;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(1);
      transition: transform 0.1s ease;
    }

    #controls {
      position: absolute;
      bottom: 10px;
      right: 10px;
      z-index: 10;
      display: flex;
      gap: 8px;
    }

    #controls button {
      padding: 6px 10px;
      border: none;
      background-color: rgba(255, 255, 255, 0.7);
      border-radius: 6px;
      font-size: 16px;
      cursor: pointer;
      transition: background-color 0.2s;
    }

    #controls button:hover {
      background-color: #ddd;
    }

    #hinweis {
      text-align: center;
      padding: 10px;
      font-size: 14px;
      color: #bbbbbb;
      background: rgba(0, 0, 0, 0.4);
      text-shadow: 1px 1px 2px black;
    }

.nav-arrow {
  position: fixed;
  font-size: 1.2em;
  text-decoration: none;
  padding: 0.2em 0.4em;
  border-radius: 0.4em;
  background: rgba(255, 255, 255, 0.7);
  z-index: 99999;
  color: black;
}
.left.alpha { top: 45%; left: 10px; color: #3366cc; }
.left.chrono { top: 50%; left: 10px; color: #339966; }
.right.alpha { top: 45%; right: 10px; color: #3366cc; }
.right.chrono { top: 50%; right: 10px; color: #339966; }


