/*
 Theme Name:   Hello Child
 Theme URI:    -
 Description:  Child Theme f�r Hello Elementor
 Author:       Felix Lenz
 Author URI:   -
 Template:     hello-elementor
 Version:      1.0.0
*/

.site-title,
.site-description {
    display: none;
}

#site-header {
    display: none;
}

#site-footer {
    display: none;
}

html {
  scroll-behavior: smooth;
}

.hero-nav a {
  color: #fff;
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  padding: 10px 15px;
  position: relative;
  transition: color 0.3s ease;
}

.hero-nav a::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 15px;
  right: 15px;
  height: 2px;
  background-color: #ffffff;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.hero-nav a:hover::after,
.hero-nav a.active::after {
  transform: scaleX(1);
}

.hero-headline-glow {
  animation: glow-pulse 3s ease-in-out infinite;
  text-shadow: 
    0 0 10px rgba(255, 255, 255, 0.8),
    0 0 20px rgba(255, 255, 255, 0.6),
    0 0 30px rgba(247, 201, 35, 0.4),
    0 0 40px rgba(247, 201, 35, 0.3);
  letter-spacing: 1px;
}

@keyframes glow-pulse {
  0%, 100% {
    text-shadow: 
      0 0 10px rgba(255, 255, 255, 0.8),
      0 0 20px rgba(255, 255, 255, 0.6),
      0 0 30px rgba(247, 201, 35, 0.4),
      0 0 40px rgba(247, 201, 35, 0.3);
  }
  50% {
    text-shadow: 
      0 0 20px rgba(255, 255, 255, 1),
      0 0 30px rgba(255, 255, 255, 0.8),
      0 0 40px rgba(247, 201, 35, 0.6),
      0 0 50px rgba(247, 201, 35, 0.5),
      0 0 60px rgba(247, 201, 35, 0.4);
  }
}

/* Fade-in beim Laden */
.hero-headline-glow {
  animation: glow-pulse 3s ease-in-out infinite, fadeInDown 1s ease-out;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   SUB-HEADLINE - FADE IN
   ============================================ */

.hero-subheadline {
  animation: fadeIn 1.5s ease-out 0.3s both;
  opacity: 0.95;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 0.95;
    transform: translateY(0);
  }
}

/* ============================================
   CTA BUTTON - HOVER ANIMATIONEN
   ============================================ */

#hero-cta-button {
  animation: fadeInUp 1.5s ease-out 0.6s both;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Fade-in Animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hover Effekt - Lift & Glow */
#hero-cta-button:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(247, 201, 35, 0.5);
  background-color: #f7c923 !important;
  color: #000 !important;
}

/* Wellen-Effekt beim Klick */
#hero-cta-button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(247, 201, 35, 0.5);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

#hero-cta-button:active::before {
  width: 300px;
  height: 300px;
}

/* Pulsierender Effekt (optional - subtil) */
#hero-cta-button {
  animation: 
    fadeInUp 1.5s ease-out 0.6s both,
    pulse-subtle 2s ease-in-out 2s infinite;
}

@keyframes pulse-subtle {
  0%, 100% {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  }
  50% {
    box-shadow: 0 4px 25px rgba(247, 201, 35, 0.4);
  }
}

/* Mobile Anpassungen */
@media (max-width: 768px) {
  .hero-headline-glow {
    font-size: 28px !important;
    text-shadow: 
      0 0 8px rgba(255, 255, 255, 0.8),
      0 0 15px rgba(247, 201, 35, 0.4);
  }
  
  #hero-subheadline {
    font-size: 16px !important;
    padding: 0 15px;
  }
  
  #hero-cta-button {
    font-size: 16px !important;
    padding: 15px 30px !important;
  }
}

/* ===============================
    Contact Form
=============================== */

/* Contact Form 7 Styling */
#contact-form {
  max-width: 600px;
  margin: 0 auto;
}

/* Labels und Text in Weiß */
#contact-form label,
#contact-form p {
  color: #ffffff;
  font-weight: 500;
  margin-bottom: 8px;
  display: block;
}

/* Input-Felder Styling */
#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form input[type="tel"],
#contact-form input[type="url"],
#contact-form input[type="number"],
#contact-form input[type="date"],
#contact-form textarea,
#contact-form select {
  width: 100%;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  color: #ffffff;
  font-size: 16px;
  transition: all 0.3s ease;
  margin-bottom: 16px;
  backdrop-filter: blur(10px);
}

/* Placeholder Text */
#contact-form input::placeholder,
#contact-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

/* Focus State */
#contact-form input:focus,
#contact-form textarea:focus,
#contact-form select:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

/* Textarea spezifisch */
#contact-form textarea {
  min-height: 120px;
  resize: vertical;
}

/* Submit Button */
#contact-form input[type="submit"],
#contact-form button[type="submit"] {
  width: 100%;
  padding: 14px 32px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 8px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

#contact-form input[type="submit"]:hover,
#contact-form button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

#contact-form input[type="submit"]:active,
#contact-form button[type="submit"]:active {
  transform: translateY(0);
}

/* Checkbox und Radio Buttons */
#contact-form input[type="checkbox"],
#contact-form input[type="radio"] {
  margin-right: 8px;
  accent-color: #667eea;
}

/* Fehlermeldungen */
#contact-form .wpcf7-not-valid-tip {
  color: #ff6b6b;
  font-size: 14px;
  margin-top: -12px;
  margin-bottom: 12px;
}

/* Erfolgsmeldung */
#contact-form .wpcf7-response-output {
  padding: 12px 16px;
  border-radius: 8px;
  margin-top: 16px;
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
}

#contact-form .wpcf7-mail-sent-ok {
  background: rgba(72, 187, 120, 0.2);
  border-color: rgba(72, 187, 120, 0.5);
}

#contact-form .wpcf7-validation-errors {
  background: rgba(255, 107, 107, 0.2);
  border-color: rgba(255, 107, 107, 0.5);
}