* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* DESKTOP*/
/*Breite Desktop*/
.container {
  max-width: 1200px; /* Maximale Breite der gesamten Seite */
  margin: 0 auto; /* Zentriert den Inhalt */
  padding: 0 20px; /* Innenabstand */
  box-sizing: border-box; /* Padding wird in max-width eingerechnet */
}
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto.woff2') format('woff2'),
       url('../fonts/roboto.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/*Generelles Design*/
      body {
        font-family: 'Roboto', sans-serif;
        color: #000000;
        background-color: #edf6f9;
        margin: 0;
        padding: 0;
        hyphens: auto;
      }
/*Computer*/      
/*Design für Inhalte*/
       section {
        width: 100%;
        margin: 0 auto;
        padding: 40px 0;
        text-align: center;
        box-sizing: border-box;
      }
/*Hintergrundfarben fuer verschiedene Blöcke*/      
       .teal-bg {
        background-color: #028090;
        color: #ffffff;
      }
      .light-bg {
        background-color: #edf6f9;
        color: #000000;
      }
/*Regeln*/ 
/*I. Header*/
/*1. Sticky Header*/
/*1a. E-Mail+/
        /* Stil für das E-Mail-Symbol */
       .icon-link {
  font-family: 'Roboto', sans-serif;
  color: #000000;
  text-decoration: none;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 12px; /* Abstand zwischen den Icons */
  cursor: pointer;
  transition: color 0.3s, opacity 0.3s; /* Weicher Übergang */
}

.icon-link:hover {
  color: #028090; /* Farbe des Textes und Icons bei Hover */
  opacity: 0.8;   /* Leichter Transparenzeffekt */
}

.icon-link:hover svg {
  fill: #028090; /* Farbe des Symbols bei Hover */
}

/* Sticky Header */
.sticky-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background-color: #edf6f9;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  border-bottom: 3px solid rgba(2, 128, 144, 0.2);
}
/*2. normaler Header*/
/*2a. Design*/
      header {
        background-color: #edf6f9;
        color: #000000;
        text-align: center;
        padding: 0;
        box-sizing: border-box;
        align-items: center;
        margin-top: 50px;
        margin-bottom: 10px;
      }
/*2b. Design Überschrift*/      
/*@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');
        header h1 {
        font-family: 'Dancing Script', cursive;/*Neue Schrift
        margin: 0;
        font-weight: 500;
        font-size: 24px;
        text-align: left;
      }*/
/*Logo und Schrift genau parallel*/      
      .header_logo {
        margin: 0; 
        display: flex; 
        padding-left:0; 
        align-items: center;
        justify-content: flex-start;
  width: 100%; /* Keine Begrenzung der Breite */
  height: auto; /* Keine Begrenzung der Höhe */
        }
.logo {
  width: 250px;/* Automatische Breite basierend auf der Höhe */
  height: auto;
  object-fit: contain; /* Bild anpassen, ohne es zu verzerren */
  max-width: 100%; /* Maximale Breite für alle Bildschirmgrößen */
  margin: 0;
}
/*     .header_text{
      margin: 0;
      display: flex; 
      align-items: center;
      line-height: 1.5;
      height: 65px;
       }*/

/*I. Ende Header*/
/*II. Welcome */
       .content {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        text-align: center; /* Zentriert den Text in jedem Element */
        padding: 0;
        }    
      h1{
      margin-top: 0px;
      margin-bottom: 20px;          
      }
      h2, h3, h4 {
      margin-top: 40px;
      margin-bottom: 10px;    
}
    
/*VII. Footer*/
     footer {
     background-color: #edf6f9;
     color: #008080;
     text-align: center;
     margin: 20px;
      }
/*VII. Ende Footer*/      

/*Mobil*/
/*Breite Smartphone*/
@media (max-width: 768px) {
  .container {
  max-width: 100%; /* Füllt die Bildschirmbreite */
  margin: auto; /* Zentriert den Inhalt */
  padding: 0 15px; /* Innenabstand */
  box-sizing: border-box; /* Padding wird in max-width eingerechnet */
  }
  body {
    font-family: 'Roboto', sans-serif;
    color: #000000;
    background-color: #edf6f9;
    margin: 0;
    padding: 0;
    hyphens: auto;
  }
  /* Sektionen ohne seitliche Ränder */
  section {
    width: 100%;
    padding: 15px 0;
  margin: 15px 0; /* Füge hier einen Abstand hinzu */
  text-align: center;
    box-sizing: border-box;
   }
  .teal-bg, .light-bg {
    margin: 0; /* Entfernt äußere Abstände */
  }
/*Sticky Header*/
  .icon-link span {
    display: none; /* Versteckt den Text auf Mobilgeräten */
  }
  .icon-link {
    margin-right: 12px; /* Geringerer Abstand zwischen den Symbolen */
  }
  
  /* Header */
  .sticky-header {
    height: 40px;
    font-size: 14px;
  }
/* Header für mobile Ansicht */
header {
  margin-top: 50px; /* Geringerer Abstand nach oben */
  margin-bottom: 10px; /* Einheitlicher Abstand nach unten */
  text-align: center;
        background-color: #edf6f9;
        color: #000000;
        text-align: center;
        padding: 0;
        box-sizing: border-box;
        align-items: center;
      }
      .header_logo {
        margin: 0; 
        display: flex; 
        padding-left:0; 
        align-items: center;
        justify-content: flex-start;
  width: 100%; /* Keine Begrenzung der Breite */
  height: auto; /* Keine Begrenzung der Höhe */
        }
.logo {
  width: 150px;/* Automatische Breite basierend auf der Höhe */
  height: auto;
  object-fit: contain; /* Bild anpassen, ohne es zu verzerren */
  max-width: 100%; /* Maximale Breite für alle Bildschirmgrößen */
  margin: 0;
}
.content {
  display: flex;
  flex-direction: column; /* Text und Bild untereinander */
  align-items: flex-start;
  gap: 15px;
  margin-bottom: -80px; /* Kleinere Abstände */
  margin-top: 0px;
  padding: 0;
}
    .mobile-line-break {
    display: block; /* Setzt das Span-Element in eine neue Zeile */
  }
  /* Footer */
  footer {
    margin: 10px;
    font-size: 14px;
  }
}
/*Ende Mobil*/