/* venta.css */

.mainstyle { font-family: Arial, sans-serif; line-height: 1.2; color: #555; max-width: 700px; margin: auto; padding: 20px; }
.head1 { font-size: 28px; color: #bd8d3b; font-weight: 600; }

.head1slogan1 { font-size: 24px; color: #555; font-weight: 600; }
.head1slogan2 { font-size: 24px; color: #acbd3b; font-weight: 600; }
.head1slogan3 { font-size: 24px; color: #bd8d3b; font-weight: 600; }

.head2 { font-size: 24px; color: #acbd3b; font-weight: 700; }
.head3 { font-size: 24px; background-color: #acbd3b; color: #fff; font-weight: 700; padding: 5px; }
.subhead1 { font-size: 20px; background-color: #acbd3b; color: #fff; font-weight: 700; padding: 5px; }
.subhead2 { font-size: 20px; color: #acbd3b; font-weight: 700; }
.text1 { font-size: 18px; }
.text2 { font-size: 20px; color: #acbd3b; }
.text3 { font-size: 20px; color: #bd8d3b; }
.text4 { font-size: 20px; color: #bd4c3b; }
.arrow { font-size: 24px; color: #bd8d3b; font-weight: 600; }


.whatsapp-bar {
  position: relative;
  background-color: #acbd3b;
  color: white;
  text-align: center;
  padding: 60px 15px 30px 15px;
  font-size: 20px;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 60px;
  transition: background-color 0.3s ease;
  overflow: visible; /* WICHTIG für sichtbares Logo */
}

.whatsapp-bar:hover {
  background-color: #c3d33f;
}

.whatsapp-bar a {
  color: white;
  text-decoration: none;
  display: block;
  width: 100%;
}

/* ✅ Profilfoto-Wrapper */
.whatsapp-photo-wrapper {
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  border: 3px solid white;
  border-radius: 50%;
  overflow: visible; /* ⚠️ geändert von 'hidden' zu 'visible' */
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  background: #fff;
  transition: transform 0.3s ease;
  z-index: 2; /* Vorsichtshalber über dem Container */
}

.whatsapp-photo-wrapper:hover {
  transform: translateX(-50%) scale(1.1);
}

.whatsapp-photo-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* ✅ Company Logo */
.logo-badge {
  position: absolute;
  bottom: -5px;
  left: -25px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: white;
  padding: 3px;
  box-shadow: 0 0 6px rgba(0,0,0,0.2);
  z-index: 3; /* Sicherstellen, dass es über allem liegt */
}

.logo-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}