@font-face {
    font-family: 'Alpina';
    src: url('GT-Alpina-Typewriter-Light.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
          font-optical-sizing: auto;
        font-variation-settings: "opsz" 30; 
  }
  
  body {
    font-family: 'Alpina', Times, serif;
    margin: 0;
    padding: 0;
    background-color: rgb(240, 240, 240);
    color: black;
  font-size: 2vw;
      font-variant-ligatures: normal;
  font-variant-ligatures: no-discretionary-ligatures;
-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

  }

  html { -webkit-text-size-adjust: 100%; }

.site-container {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

  p {
    margin: 0;
  }
    
  main {
    padding: 40px;
      overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  }

  .top {
    margin-bottom: 1em;
  }
  
.contact {
    text-align: center;
}

a[href^="mailto:"] {
  text-decoration: none;
  color: inherit;
  text-decoration-line: underline;
  text-decoration-style: none;
  text-decoration-color: black;
  text-decoration-thickness: 0px;
  text-underline-offset: 10px;
  }

  .container {
    display: flex;
    justify-content: center;
    gap: 60px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  
  .column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
  }
  
  .text-container {
    display: flex;
    gap: 40px; /* Abstand zwischen den Absätzen */
    padding: 0;
  }
  
  .textabschnitt {
    flex: 1; /* gleichmäßige Verteilung */
    box-sizing: border-box;
    font-size: 0.5em;
    margin-top: 2em;
    margin-bottom: 2em;
  }

  label {
    background-color: none;
    padding: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
    text-align: center;
  }
  
  label:hover {
    background-color: none;
  }


  footer {
    padding-bottom: 20px;
    text-align: center;
  }

a {
  text-decoration: none;
  color: black;
}

a:visited {
  text-decoration: none;
  color: black;
}

a:hover {
  text-decoration: none;
}

a:active {
  text-decoration: none;
}

  .underline-big {
      text-decoration-line: underline;
  text-decoration-style: none;
  text-decoration-color: black;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.38vw;
  }


  .underline-small {
      text-decoration-line: underline;
  text-decoration-color: black;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.17vw;
  
  }
  
  .overlay-toggle {
    display: none;
  }

  .overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px); /* wichtig für Safari */
  background-color: rgba(255, 255, 255, 0.2); /* Fallback für Nicht-Support */
  }
  
  .overlay img {
    max-width: 90vw;
    max-height: 90vh;
  }

/* Wackel-Effekt nur auf .blue innerhalb von Labels */
label:hover .blue {
  animation: shake 0.6s ease-in-out infinite;
  display: inline-block;
}

/* Animation definieren */
@keyframes shake {
  0% { transform: translateX(0); }
  20% { transform: translateX(-2px); }
  40% { transform: translateX(2px); }
  60% { transform: translateX(-1px); }
  80% { transform: translateX(1px); }
  100% { transform: translateX(0); }
}


/* CAPTIONS */

.overlay-figure {
  margin: 0;            /* kein zusätzlicher Abstand */
  text-align: center;   /* Untertitel mittig */
}

.overlay-figure img {
  max-width: 90vw;
  max-height: 90vh;
}

.overlay-figure figcaption {
  margin-top: 0.5rem;
  font-size: 0.5em;
  color: black;
}

/* Caption Ende*/



  .blue {
    color: black;
    text-align: center;  
  }
  
  .overlay-background {
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
  
  .overlay-content {
    position: relative;
    z-index: 1001;
  }
  
  .overlay-toggle:checked + .overlay {
    display: flex;
  }


  /* IMPRESSUM */

.impressum-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: none;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px); /* wichtig für Safari */
  background-color: rgba(255, 255, 255, 0.2); /* Fallback für Nicht-Support */
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

#impressum-toggle:checked + .impressum-overlay {
  display: flex;
  opacity: 1;
}

/* Textbox-Styling */
.impressum-box {
  padding: 40px;
  color: black;
  border-radius: 8px;
  text-align: left;
  max-width: 1240px;
  max-height: 100vh;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.impressum-link {
  cursor: pointer;
  color: black;
  display: block;
  width: fit-content;
  margin: 0 auto;
  padding:0;
}

a, a:link, a:visited {
  text-decoration: none !important;
}

  /* Breakpoint: unter XXX → Spalten werden untereinander angezeigt */
@media (max-width: 1366px) {
  body {
    font-family: 'Alpina', Times, serif;
    margin: 0;
    padding: 0;
    background-color: rgb(240, 240, 240);
    color: black;
  font-size: 2.5vw;
      font-variant-ligatures: normal;
  font-variant-ligatures: no-discretionary-ligatures;
  -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  p {
  -webkit-hyphens: none; /* Safari/Chrome (WebKit) */
  -moz-hyphens: none;    /* Firefox */
  -ms-hyphens: none;     /* Internet Explorer */
  hyphens: none;         /* Standard */
}

.impressum-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: none;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px); /* wichtig für Safari */
  background-color: rgba(255, 255, 255, 0.2); /* Fallback für Nicht-Support */
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

#impressum-toggle:checked + .impressum-overlay {
  display: flex;
  opacity: 1;
}

/* Textbox-Styling */
.impressum-box {
  padding: 0;
  color: black;
  border-radius: 8px;
  text-align: left;
  max-width: 1000px;
  max-height: 100vh;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
    text-decoration-style: none;
  text-decoration-color: black;
  text-decoration-thickness: none;
}

a, a:link, a:visited {
  text-decoration: none !important;
}


  .underline-big {
      text-decoration-line: underline;
  text-decoration-style: none;
  text-decoration-color: black;
  text-decoration-thickness: 1.75px;
  text-underline-offset: 0.43vw;
  }


  .underline-small {
      text-decoration-line: underline;
  text-decoration-color: black;
  text-decoration-thickness: 0.75px;
  text-underline-offset: 0.2vw;
  }


  }

  /* Breakpoint: unter 768px → Spalten werden untereinander angezeigt */
@media (max-width: 768px) {
    .container {
    display: flex;
    justify-content: center;
    gap: 60px;
    padding: 0 0;
  }
  

  .underline-big {
      text-decoration-line: underline;
  text-decoration-style: none;
  text-decoration-color: black;
  text-decoration-thickness: 1.75px;
  text-underline-offset: 0.43vw;
  }


  .underline-small {
      text-decoration-line: underline;
  text-decoration-color: black;
  text-decoration-thickness: 0.75px;
  text-underline-offset: 0.5vw;
  }


  .site-container {
  width: 100%;
  margin: 0 auto;
}

  .container {
    display: flex;
    justify-content: center;
    gap: 60px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
  }

    main {
    padding: 15px;
      overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  }


  .underline-big {
  text-decoration-line: underline;
  text-decoration-style: none;
  text-decoration-color: black;
  text-decoration-thickness: 0.7px;
  text-underline-offset: 3px;
  }


  .underline-small {
      text-decoration-line: underline;
  text-decoration-style:solid;
  text-decoration-color: black;
  text-decoration-thickness: 0.1px;
    text-underline-offset: 1.2px;

  }

  a[href^="mailto:"] {
    text-decoration: none;
    color: inherit;
          text-decoration-line: underline;
  text-decoration-style: none;
  text-decoration-color: black;
  text-decoration-thickness: none;
  }


  a, a:link, a:visited {
  text-decoration: none !important;
}

  .column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  
  .text-container {
    display: flex;
    gap: 10px; /* Abstand zwischen den Absätzen */
    padding: 0;
  }
  
  .textabschnitt {
    flex: 1; /* gleichmäßige Verteilung */
    box-sizing: border-box;
    font-size: 0.65em; /* kleinere Schrift */
    margin-top: 2em;
    margin-bottom: 2em;

  }

    body {
        font-family: 'Alpina', Times, serif;
        margin: 0;
        padding: 0;
        background-color: rgb(240, 240, 240);
        color: black;
        font-size: 0.9em;
        -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
      }

      p {
        -webkit-hyphens: none; /* Für Safari und andere WebKit-Browser */
        -moz-hyphens: none;   /* Für Firefox */
        -ms-hyphens: none;    /* Für Internet Explorer (veraltet) */
        hyphens: none;        /* Für moderne Browser */
      }

      .container {
        flex-direction: column;
        align-items: center;
        gap: 10px;
      }

      .column {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: none;
      }

      .impressum-box {
  padding: 2rem;
  color: black;
  border-radius: 8px;
  text-align: left;
  max-width: 70vw;
  max-height: 90vh;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}


}


  /* Breakpoint: unter 387px → Spalten werden untereinander angezeigt */
@media (max-width: 387px) {

  body {
        font-family: 'Alpina', Times, serif;
        margin: 0;
        padding: 0;
        background-color: rgb(240, 240, 240);
        color: black;
        font-size: 0.86em;
        -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
      }


  }