.u-section-1 {
  min-height: 790px;
}

.u-section-1 .u-text-1 {
  font-weight: 700;
  margin: 60px auto 0;
}

.u-section-1 .u-text-2 {
  font-weight: 400;
  font-size: 1.5rem;
  margin: 33px auto 0;
}

.u-section-1 .u-shape-1 {
  height: 193px;
  background-image: none;
  margin: 101px 0 0;
}

.u-section-1 .u-list-1 {
  grid-template-rows: repeat(2, auto);
  width: 427px;
  margin: -262px auto 60px;
}

.u-section-1 .u-repeater-1 {
  grid-template-columns: repeat(1, 100%);
  min-height: 469px;
  --gap: 30px;
  grid-auto-columns: 100%;
}

.u-section-1 .u-container-layout-1 {
  padding: 20px;
}

.u-section-1 .u-image-1 {
  width: 180px;
  height: 180px;
  background-image: url("images/won_oo.jpg");
  background-position: 50% 50%;
  box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4);
  margin: 8px auto 0;
}

.u-section-1 .u-text-3 {
  font-weight: 700;
  font-size: 1.25rem;
  margin: 15px auto 0;
}

.u-section-1 .u-text-4 {
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 3px;
  font-weight: 400;
  margin: 16px auto 0;
}

.u-section-1 .u-text-5 {
  margin: 20px 0 0;
}

@media (max-width: 1399px) {
  .u-section-1 .u-shape-1 {
    margin-right: initial;
    margin-left: initial;
  }

  .u-section-1 .u-repeater-1 {
    grid-template-columns: 100%;
  }
}

@media (max-width: 1199px) {
  .u-section-1 .u-text-1 {
    margin-top: 84px;
  }

  .u-section-1 .u-repeater-1 {
    grid-gap: 30px;
    grid-auto-columns: calc(100% - 0px);
  }
}

@media (max-width: 991px) {
  .u-section-1 .u-text-1 {
    margin-top: 60px;
  }

  .u-section-1 .u-list-1 {
    margin-left: calc(((100% - 720px) / 2));
    margin-right: calc(((100% - 720px) / 2));
  }
}

@media (max-width: 767px) {
   .u-section-1 {
    min-height: 1155px;
  }

  .u-section-1 .u-text-1 {
    width: auto;
    margin-top: 50px;
    margin-left: 9px;
    margin-right: 9px;
  }

  .u-section-1 .u-text-2 {
    width: auto;
    font-size: 1.25rem;
    margin-top: 39px;
    margin-left: 0;
    margin-right: 0;
  }

  .u-section-1 .u-shape-1 {
    margin-top: 112px;
    margin-right: initial;
    margin-left: initial;
  }

  .u-section-1 .u-list-1 {
    margin-left: calc(((100% - 540px) / 2));
    margin-right: calc(((100% - 540px) / 2));
  }

  .u-section-1 .u-repeater-1 {
    grid-auto-columns: 100%;
  }
}

@media (max-width: 575px) {
   .u-section-1 {
    min-height: 744px;
  }

  .u-section-1 .u-text-1 {
    margin-top: 48px;
    margin-left: 0;
    margin-right: 0;
  }

  .u-section-1 .u-text-2 {
    margin-top: 34px;
    margin-left: auto;
    margin-right: auto;
  }

  .u-section-1 .u-shape-1 {
    margin-top: 111px;
    margin-right: initial;
    margin-left: initial;
  }

  .u-section-1 .u-list-1 {
    width: 340px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 48px;
  }

  .u-section-1 .u-container-layout-1 {
    padding-left: 10px;
    padding-right: 10px;
  }
}/* 1. Container und Fixierung (Vertikal Zentriert) */
.floating-buttons {
    /* Fixiert den Container am rechten Bildschirmrand */
    position: fixed;
    right: 30px; /* Etwas größerer Abstand vom rechten Rand */
    
    /* Vertikale Zentrierung */
    top: 50%;
    transform: translateY(-50%); 
    
    z-index: 999; 
    display: flex; 
    flex-direction: column; 
    gap: 12px; /* Etwas geringerer Abstand zwischen den Buttons */
}
/* 2. Styling der einzelnen Buttons */
.floating-buttons .btn {
    display: flex; 
    justify-content: center;
    align-items: center;
    width: 55px; /* Etwas größere Buttons */
    height: 55px;
    border-radius: 8px; /* Leicht abgerundete Ecken (nicht ganz rund) */
    color: white; 
    font-size: 26px; /* Größeres Icon */
    text-decoration: none; 
    
    /* Dezenter, "schwebender" Schatten */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); 
    
    /* Sanfte Übergänge für alle Effekte */
    transition: all 0.3s ease; 
}
/* 3. Standard-Farben (Dezenter) */
.floating-buttons .phone {
    background-color: #3b5998; /* Dunkelblau (Facebooks Blau-Ton) */
}
.floating-buttons .whatsapp {
    background-color: #075E54; /* Dunkleres WhatsApp-Grün */
}
.floating-buttons .email {
    background-color: #DC4A38; /* Dunkleres Rot (ähnlich Gmail) */
}
/* 4. Hover-Effekt (Fokus auf Farbe und Tiefe) */
.floating-buttons .btn:hover {
    /* Bewegt den Button leicht nach oben */
    transform: translateY(-5px) scale(1.05); 
    /* Erhöht den Schatten, um mehr "Tiefe" zu erzeugen */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    
    /* Farben beim Hover werden heller und satter */
}
.floating-buttons .phone:hover {
    background-color: #4c70ba; 
}
.floating-buttons .whatsapp:hover {
    background-color: #25D366; 
}
.floating-buttons .email:hover {
    background-color: #EA4335; 
}
/* 5. Responsivität: Anpassung für kleinere Bildschirme */
@media (max-width: 600px) {
    .floating-buttons {
        right: 15px; /* Etwas näher an den Rand */
        top: 50%;
        transform: translateY(-50%);
        gap: 8px; 
    }
    .floating-buttons .btn {
        width: 48px; /* Kleiner auf Mobilgeräten */
        height: 48px;
        font-size: 22px;
        border-radius: 6px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
    }
}