/* josefin-sans-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Josefin Sans';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/josefin-sans-v32-latin/josefin-sans-v32-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
         url('../fonts/josefin-sans-v32-latin/josefin-sans-v32-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
  }
  /* josefin-sans-italic - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Josefin Sans';
    font-style: italic;
    font-weight: 400;
    src: url('../fonts/josefin-sans-v32-latin/josefin-sans-v32-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
         url('../fonts/josefin-sans-v32-latin/josefin-sans-v32-latin-italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
  }
  /* josefin-sans-500 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Josefin Sans';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/josefin-sans-v32-latin/josefin-sans-v32-latin-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
         url('../fonts/josefin-sans-v32-latin/josefin-sans-v32-latin-500.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
  }
  /* josefin-sans-500italic - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Josefin Sans';
    font-style: italic;
    font-weight: 500;
    src: url('../fonts/josefin-sans-v32-latin/josefin-sans-v32-latin-500italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
         url('../fonts/josefin-sans-v32-latin/josefin-sans-v32-latin-500italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
  }
  /* josefin-sans-600 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Josefin Sans';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/josefin-sans-v32-latin/josefin-sans-v32-latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
         url('../fonts/josefin-sans-v32-latin/josefin-sans-v32-latin-600.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
  }
  /* josefin-sans-600italic - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Josefin Sans';
    font-style: italic;
    font-weight: 600;
    src: url('../fonts/josefin-sans-v32-latin/josefin-sans-v32-latin-600italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
         url('../fonts/josefin-sans-v32-latin/josefin-sans-v32-latin-600italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
  }
  /* josefin-sans-700 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Josefin Sans';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/josefin-sans-v32-latin/josefin-sans-v32-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
         url('../fonts/josefin-sans-v32-latin/josefin-sans-v32-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
  }
  /* josefin-sans-700italic - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Josefin Sans';
    font-style: italic;
    font-weight: 700;
    src: url('../fonts/josefin-sans-v32-latin/josefin-sans-v32-latin-700italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
         url('../fonts/josefin-sans-v32-latin/josefin-sans-v32-latin-700italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
  }


body {
    margin: 0;
    font-family:'Josefin Sans', Verdana, Geneva, Tahoma, sans-serif;
    background-color: #EDEDED;
    color: #3A4861;
  }

header {
    background-color: rgba(58,72,97,.5);
}
  
  .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    /* color: white; */
    padding: 10px 20px;
    max-width: 1200px; /* Hinzugefügt: Maximale Breite für die Navigationsleiste */
    margin: 0 auto; 
  }
  
  .logo {

    display: flex;
  align-items: center;
  }

  .desktop-logo {
    display: block;
  }
  
  .mobile-logo {
    display: none;
  }
  

  .title {

    text-align: left;
  }
  
  .menu a {
    text-decoration: none;
    color: #3A4861;
    margin: 0 15px;
    font-size: 20px;
  }
  
  .menu a:hover {
    text-decoration: underline;
  }
  
  /* Neue Regel für die linke Sektion (Logo und Titel) */
  .left-section {
    display: flex;
  align-items: center;
  justify-content: space-between; /* Neues: Elemente gleichmäßig verteilen */
  width: 100%; /* Neues: Volle Breite einnehmen */
  }

  .content {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 20px;
    font-size: 20px;
  }
  
  .content-block {
    display: flex;
  align-items: right;
  flex-wrap: wrap;
  background-color: #EDEDED;
  }

 .listing>li {
  
  margin-top: 20px;
 }
  
  .portrait {
    max-width: 30%;
    margin-right: 20px;
  }

  
  
  .text-block {
    flex: 1;
    font-size: 20px;
    
  }

  .zitat-2 {
    width: 80%;
    margin-left: 20px;
    margin-top: 30px;
  }

  .text-block h2 {
    font-size: 25px;
  }
  
  .text-section {
    margin-top: 60px;
    display:flex;
    flex-direction: column;
  }

  .text-section img {
    max-width: 40%; /* Das Bild passt sich der Container-Breite an */
  height: auto; /* Das Bild passt seine Höhe entsprechend an */
  margin-bottom: 20px;
    margin-left:auto;
  }

  .text-container {
    position: relative;
    padding: 20px; /* Optional: Innenabstand für den Textbereich */
    
  }

  .text-container-contact {
    padding: 20px; 
    margin: 0 auto;
    display: flex;
    justify-content:center;
  }

  .address {
    text-align: left;
    margin-left: 20px;
  }



  .address a {
    color: #3A4861
  }
  
  .contact-part {
display: flex;
align-items: center;
  }

  .inline-pic {
    display: flexbox;
  }

  .top-right-image {

    position: absolute;
    top: 5px;
    right: 5px;
    max-width: 28%; /* Beispiel: Maximalbreite für das Bild festlegen */
    height: auto; /* Das Bild passt seine Höhe entsprechend an */
    /* margin: 10px;  */
  }

  .top-right-image-sex {

    position: absolute;
    top: 5px;
    right: 5px;
    max-width: 20%; /* Beispiel: Maximalbreite für das Bild festlegen */
    height: auto; /* Das Bild passt seine Höhe entsprechend an */
    /* margin: 10px;  */
  }

  .bottom-left-image-sex {

    /* position: absolute; */
    /* top: 5px;
    left: 5px; */
    max-width: 20%; /* Beispiel: Maximalbreite für das Bild festlegen */
    height: auto; /* Das Bild passt seine Höhe entsprechend an */
    /* margin: 10px;  */
    float: left;
    margin-right: 10px;
  }

  .margin-top {
    margin-top: 100px;
    margin-bottom: 30px;
  }
  
  .text-container h3,
  .text-container-contact h3,
  .text-container p {
    margin-bottom: 20px; /* Optional: Abstand zwischen Überschriften und Absätzen */
    
  }

  .zitat {
    position: absolute;
    max-width: 50%;
    margin-top: -150px;
    margin-left: auto;
    right: 10px;
  }

  .zitat-1 {
    position: absolute;
    max-width: 50%;
    margin-top: -80px;
    margin-left: auto;
    right: 20px;
  }

  .logo a {
    text-decoration: none;
    color: #3A4861;
  }

  .text-container h3 a {

    color: #3A4861;
  }
  
  .text-container p.small {
    padding-right: 30%;
  }

  .text-container p.small-img-right {
    padding-right: 25%;
  }
  
  .text-section p {
    margin-bottom: 15px;
    background-color: #EDEDED;
    margin-right: auto;
   /*  width: 50%; */
  }

  .text-section p.narrow {
    margin-bottom: 5px;
  }

  .text-section p.narrow ul {
    margin-bottom: 5px;
  }

  .text-section h3 {
    margin-top: 40px;
    margin-bottom: 10px;
   
   /*  width: 50%; */
  }
  

  .footer {
    display: flex;
    flex-direction: column;
    background-color: #EDEDED;
    margin-top:50px;
  }
  
  .footer-strip {
    height: 10px;
    margin-top: 10px
  }
  
  .footer-text-left,
  .footer-text-right {
    flex: 1;
    text-align: left;
    padding: 10px;
  }

  .footer-text-right {
    text-align: right;
  }

  .footer-text-right a {
    margin-left: 20px;
    color: #3A4861;
  }

  .burger-menu {
    display: none; /* Burger-Menü standardmäßig ausblenden */
    cursor: pointer;
  }
  
  .bar {
    width: 25px;
    height: 3px;
    background-color: white;
    margin: 5px 0;
  }
  
  /* Media Query für kleine Bildschirme (Smartphones) */
  @media only screen and (max-width: 768px) {
    .menu {
      display: none; /* Menü auf kleinen Bildschirmen ausblenden */
    }
  
    .burger-menu {
      display: block; /* Burger-Menü auf kleinen Bildschirmen anzeigen */
    }
  
    /* Anzeigen des Menüs, wenn das Burger-Menü angeklickt wird */
    .menu.show {
      display: flex;
      flex-direction: column;
      position: absolute;
      top: 20px; /* Abstand vom oberen Rand der Seite */
      right: 40px; /* Abstand vom rechten Rand der Seite */
      background-color: #EDEDED;
      padding: 40px 80px 40px 20px;
      text-align: left;
      width: 50%;
      z-index:1;
    }

    .menu.show a {
        margin-top: 20px;
    }

  
    /* Animation für das Burger-Menü-Symbol */
    .burger-menu.active .bar:nth-child(1) {
      transform: rotate(-45deg) translate(-5px, 6px);
    }
  
    .burger-menu.active .bar:nth-child(2) {
      opacity: 0;
    
    }
  
    .burger-menu.active .bar:nth-child(3) {
      transform: rotate(45deg) translate(-5px, -6px);
    }
    
    .desktop-logo {
        display: none;
      }
    
      .mobile-logo {
        display: block;
      }

      .title {
        text-align: left; /* Text links ausrichten */
      }

      .content-block, .text-section, .text-container, .text-container-contact {
        flex-direction: column; /* In Spalten anordnen */

      }

      .text-section p, .text-container p, .text-container-contact div {
        width: 100%; /* Volle Breite einnehmen */
      }
    
      .text-block {
        width: 100%; /* Volle Breite einnehmen */
      }

      .text-container img, .top-right-image {
        max-width: 100%;
        margin-bottom: 20px; /* Abstand zwischen Bild und Text */
        margin-right: 0;
        position:static;
        z-index:2;
      }

      .zitat {
        max-width: 100%;
        margin-bottom: 0; /* Abstand zwischen Bild und Text */
        margin-right: 0;
        margin-top: 0;
        position:static;
        z-index:2;
      }

      .zitat-1 {
        max-width: 100%;
        margin-bottom: 0; /* Abstand zwischen Bild und Text */
        margin-right: 0;
        margin-top: 0;
        position:static;
        z-index:2;
      }

      .content-block img {
        max-width: 100%;
        margin-bottom: 20px; /* Abstand zwischen Bild und Text */
        margin-right: 0;
      }

      .text-container p.small, .text-container p.small-img-right {
        padding:0;
      }
    }