/* global */
*, *::before, *::after {
    box-sizing: border-box;
  }
  
  .Me {
      display: flex;
      gap: 50px;
      justify-content: flex-start;
      align-items: flex-start;
      margin: 0 auto; /* mittig */
      max-width: 1200px; /* max Breite Container */
      height: auto;
      padding: 0;  /* Abstand zum Fensterrand */
  }
  
  .Me-Text,
  .Me-Bild {
      width: 50%;
      padding: 0;
  }
  
  .Me-Text {
      display: flex;
      flex-direction: column;
      gap: 30px;
      align-items: flex-start;
      margin-left: 10px;
      margin-bottom: 20px;
      
      

  }
  
  .Me-Text1 {
      background-color: #BFD0E1;
      padding: 30px;
      border-radius: 30px;
      align-self: flex-start;
      border-width: 5px;
      box-shadow: 0px 0px 10px gray;
  }
  
  .Me-Text2 {
      width: 100%;
      height: auto;
      border-radius: 30px;
      border-style: solid;
      border-width: 5px;
      border-color: #BFD0E1;
      overflow: hidden;
      background-color: #BFD0E1;
      text-align: right;
      box-shadow: 0px 0px 10px gray;

  }
  
  .Bild-Auto {
      width: 100%;
      height: auto;
      box-shadow: 0px 0px 10px gray;
      
      
      
      justify-content: center;
      align-items: center;
  }
  
  .Me-Bild {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 30px;
      
      
  }
  
  /* Desktop-Bild */
  .desktop-img {
      display: block;
      max-height: 520px;
      height: 95%;
      margin: 0 auto;
      border-radius: 30px;
      border-style: solid;
      border-width: 5px;
      border-color: #BFD0E1;
      margin-bottom: 10px;
      box-shadow: 0px 0px 10px gray;
  }
  
  /* Mobil-Bild */
  .mobile-img {
      display: none;
      box-shadow: 0px 0px 10px gray;
  }
  
  /* ======= RESPONSIVE ======= */
  
  /* Tablet: geringere Abstände */
  @media screen and (max-width: 900px) {
      .Me {
          gap: 30px;
          padding: 0 15px; /* auch Padding verkleinern */
      }
  
      .Me-Text,
      .Me-Bild {
          padding: 15px;
      }
  
      .Me-Text1 {
          padding: 20px;
      }
  }
  
  /* Mobile: Layoutwechsel, Bild oben, Bildtausch */
  @media screen and (max-width: 840px) {
      .Me {
          flex-direction: column-reverse;
          align-items: center;
          gap: 20px;
          padding: 0 10px;
      }
  
      .Me-Text,
      .Me-Bild {
          width: 90%;
          padding: 10px;
      }
  
      .Me-Text1 {
          padding: 15px;
      }
  
      .desktop-img {
          display: none;
      }
  
      .mobile-img {
          display: block;
          width: 100%;
          height: auto;
          margin: 0 auto;
          border-radius: 30px;
          border-style: solid;
          border-width: 5px;
          border-color: #BFD0E1;
      }
  }