/* ===== CB Photo Design-Fixes v2 ===== */

/* 1. Logo: absolut eckig */
.nav-logo img, .logo-img, .navbar .logo-img, .footer-logo-img,
img[alt*="Logo"], img[alt*="logo"], img[src*="logo"] {
  border-radius: 0 !important;
}

/* 2. ALLE Boxen/Karten: 2px (kaum sichtbar) */
.bento-card,
.card-icon-box,
.about-image-box,
.about-badge,
.portfolio-bento-item,
.testimonial-card,
.video-card,
.review-card,
.portfolio-card,
.cta-card,
.success-screen,
#form-card,
.studio-card,
.pricing-card,
.about-card,
.hero-card,
.contact-card,
.dropdown-content,
.dropdown-link,
.service-card,
[class*="service-card"],
.card,
[class*="card"],
.dropdown-content,
.dropdown-link,
[class*="dropdown"] {
  border-radius: 2px !important;
}

/* Badges/Pills: auch nur 2px */
.badge-pill,
.badge,
[class*="badge"],
[class*="pill"] {
  border-radius: 2px !important;
}

/* Inline-Styles mit border-radius überschreiben */
[style*="border-radius"] {
  border-radius: 2px !important;
}

/* 3. Buttons: minimal abgerundet (2px), kein Pill-Look */
.btn, .btn-primary, .btn-secondary, .btn-gold, .btn-outline-white,
.btn-submit, [class*="btn"], button[class] {
  border-radius: 2px !important;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.btn-primary, .btn-submit {
  background: #1a1a1a; color: #f8f5f0; border: 2px solid #1a1a1a;
}
.btn-primary:hover, .btn-submit:hover {
  background: #c9a86c; color: #1a1a1a; border-color: #c9a86c;
  transform: translateY(-2px); box-shadow: 0 6px 20px rgba(201,168,108,0.25);
}
.btn-secondary, .btn-outline-white {
  background: transparent; border: 2px solid #1a1a1a; color: #1a1a1a;
}
.btn-secondary:hover, .btn-outline-white:hover {
  background: #1a1a1a; color: #f8f5f0;
}
.btn-gold {
  background: #c9a86c; color: #1a1a1a; border: 2px solid #c9a86c;
}
.btn-gold:hover {
  background: #1a1a1a; color: #c9a86c; border-color: #1a1a1a;
}

/* Footer Logo: Größe begrenzen */
.footer-logo-img {
  width: 60px !important;
  height: auto !important;
  border-radius: 0 !important;
}

/* 4. Headings: Days One Font + mehr Abstand */
h1, h2, h3, h4 {
  font-family: 'Days One', 'DM Sans', sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 0.5em !important;
  line-height: 1.15 !important;
}
/* Footer-H3s: normale DM Sans, Bold erlaubt */
.footer-col h3,
.footer h3 {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}
.section-title::before {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background: #c9a86c;
  margin-bottom: 14px;
}
.section-title-wrap {
  margin-bottom: 48px;
}

/* Heading-Animation: Blitz-Flash + Text-Aufbau */
@keyframes flashStreak {
  0% {
    left: -100%;
    opacity: 0;
    width: 0;
  }
  15% {
    left: -100%;
    opacity: 1;
    width: 120%;
  }
  25% {
    left: 20%;
    opacity: 1;
    width: 40%;
  }
  40% {
    left: 120%;
    opacity: 0;
    width: 0;
  }
  100% {
    left: 120%;
    opacity: 0;
    width: 0;
  }
}

@keyframes textBuild {
  0% {
    opacity: 0;
    transform: translateX(-40px);
    filter: blur(8px);
  }
  30% {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}

.section-title-wrap {
  position: relative;
  overflow: visible;
}

/* Blitz-Linie */
.section-title-wrap.reveal.active::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #c9a86c, #fff, #c9a86c, transparent);
  box-shadow: 0 0 12px rgba(201,168,108,0.8), 0 0 30px rgba(201,168,108,0.4);
  animation: flashStreak 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  pointer-events: none;
  z-index: 10;
}

/* Text erscheint nach Blitz */
.section-title-wrap.reveal.active .section-title {
  animation: textBuild 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
}

/* Generische Heading-Animation für alle Seiten */
.reveal.active h1, .reveal.active h2, .reveal.active h3 {
  animation: textBuild 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
}
.reveal h1, .reveal h2, .reveal h3 {
  opacity: 0;
  transform: translateX(-40px);
}