/*
   ════════════════════════════════════════════════════════════════
   TECHBOYS.DE — Elementor Overrides
   Lädt via wp_enqueue_scripts mit Dependency 'elementor-frontend'
   → gewinnt automatisch Spezifität gegen Elementor-CSS
   Stand: März 2026
   ════════════════════════════════════════════════════════════════

   INHALT:
   1. Header Glass (Elementor Container 3041d68c)
   2. List-Small-2 Boxen (Elementor Widgets)
   3. Section-Headings (Elementor 1814)
   4. Footer Glass + Newsletter Button Pulse (Elementor 2016 / 61fa50aa)
   5. Elementor Headlines (3407, 4237)
   6. Comment Button (#dcl_comment_btn)

   ════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════
   1. HEADER — Glassmorphism
   Elementor Ruby Template, Container-ID: 3041d68c
   ════════════════════════════════════════════════════════════════ */

/* Light Mode */
.elementor-element-3041d68c {
  background: var(--frost-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border-bottom: 1px solid var(--frost-border) !important;
  transition: background 0.3s ease !important;
}

.elementor-element-3041d68c.e-section-sticky,
.elementor-element-3041d68c.is-sticky,
.elementor-element-3041d68c.sticky-on {
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  box-shadow: var(--frost-shadow) !important;
}

/* Dark Mode */
[data-theme="dark"] .elementor-element-3041d68c {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border-bottom: 1px solid var(--glass-border) !important;
}

[data-theme="dark"] .elementor-element-3041d68c.e-section-sticky,
[data-theme="dark"] .elementor-element-3041d68c.is-sticky,
[data-theme="dark"] .elementor-element-3041d68c.sticky-on {
  background: rgba(0, 0, 0, 0.7) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  box-shadow: var(--glass-shadow) !important;
}


/* ════════════════════════════════════════════════════════════════
   2. LIST-SMALL-2 BOXEN — Hero-Seitenleisten & Beliebt
   Elementor Widgets mit inline-Background
   ════════════════════════════════════════════════════════════════ */

/* Light Mode */
.elementor-widget-foxiz-list-small-2[data-id="7351d8f6"],
.elementor-widget-foxiz-list-small-2[data-id="15c1e834"],
.elementor-widget-foxiz-list-small-2[data-id="2897b370"] {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border: 1px solid rgba(67, 56, 202, 0.08) !important;
  box-shadow:
    0 4px 24px rgba(67, 56, 202, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

/* Dark Mode */
[data-theme="dark"] .elementor-widget-foxiz-list-small-2[data-id="7351d8f6"],
[data-theme="dark"] .elementor-widget-foxiz-list-small-2[data-id="15c1e834"],
[data-theme="dark"] .elementor-widget-foxiz-list-small-2[data-id="2897b370"] {
  background: #0B1321 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}


/* ════════════════════════════════════════════════════════════════
   3. SECTION-HEADINGS — Akzent-Unterstrich
   Elementor Startseite ID 1814
   ════════════════════════════════════════════════════════════════ */

.elementor-1814 .heading-title {
  position: relative !important;
  padding-bottom: 8px !important;
}

.elementor-1814 .heading-title::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 40px !important;
  height: 3px !important;
  border-radius: 2px !important;
}


/* ════════════════════════════════════════════════════════════════
   4. FOOTER — Glass + Newsletter Button Pulse
   Container: 61fa50aa, Template: 2016, Button: 8d86252
   ════════════════════════════════════════════════════════════════ */

/* Footer Trenner */
.elementor-element-61fa50aa {
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Newsletter Glass-Box */
.elementor-element-61fa50aa .foxiz-newsletter-3 .newsletter-box,
.elementor-element-61fa50aa .foxiz-newsletter-3 .nl-wrap {
  background: rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
}

/* Social Icons Hover */
.elementor-element-61fa50aa .social-item:hover {
  color: var(--tb-cyan) !important;
}

/* Newsletter Button — Pulse-Keyframes */
@keyframes tb-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(67, 56, 202, 0.5); }
  70%  { box-shadow: 0 0 0 14px rgba(67, 56, 202, 0); }
  100% { box-shadow: 0 0 0 0   rgba(67, 56, 202, 0); }
}

@keyframes tb-pulse-dark {
  0%   { box-shadow: 0 0 0 0   rgba(102, 252, 241, 0.4); }
  70%  { box-shadow: 0 0 0 14px rgba(102, 252, 241, 0); }
  100% { box-shadow: 0 0 0 0   rgba(102, 252, 241, 0); }
}

/* Light Mode Button */
.elementor-2016 .elementor-element.elementor-element-8d86252 input[type="submit"],
.elementor-2016 .elementor-element.elementor-element-8d86252 input[type="submit"]:not(:hover) {
  background: linear-gradient(135deg, #4338ca, #6366f1) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 16px 40px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  animation: tb-pulse 2s infinite !important;
}

.elementor-2016 .elementor-element.elementor-element-8d86252 input[type="submit"]:hover {
  transform: translateY(-2px) scale(1.03) !important;
  background: linear-gradient(135deg, #5a4fd9, #7c7cf7) !important;
  animation: none !important;
}

/* Dark Mode Button */
[data-theme="dark"] .elementor-2016 .elementor-element.elementor-element-8d86252 input[type="submit"],
[data-theme="dark"] .elementor-2016 .elementor-element.elementor-element-8d86252 input[type="submit"]:not(:hover) {
  background: linear-gradient(135deg, rgba(102, 252, 241, 0.2), rgba(99, 102, 241, 0.25)) !important;
  color: var(--tb-cyan) !important;
  border: 1px solid rgba(102, 252, 241, 0.4) !important;
  animation: tb-pulse-dark 2s infinite !important;
}

[data-theme="dark"] .elementor-2016 .elementor-element.elementor-element-8d86252 input[type="submit"]:hover {
  background: linear-gradient(135deg, rgba(102, 252, 241, 0.3), rgba(99, 102, 241, 0.35)) !important;
  animation: none !important;
}


/* ════════════════════════════════════════════════════════════════
   5. ELEMENTOR HEADLINES
   Spezifische Elementor-Widget-Selektoren
   ════════════════════════════════════════════════════════════════ */

.elementor-3407 .elementor-element.elementor-element-f970445 .entry-title {
  font-size: 36px;
  line-height: 1.05em;
  letter-spacing: -.025em;
}

.elementor-4237 .elementor-element.elementor-element-97b57d0 .newsletter-title {
  font-family: 'Reddit Sans', sans-serif;
}

.elementor-button span {
  text-decoration: inherit;
  font-family: 'Reddit Sans';
}


/* ════════════════════════════════════════════════════════════════
   6. COMMENT BUTTON (#dcl_comment_btn)
   Glassmorphism-Style für DCL Comment Button Plugin
   ════════════════════════════════════════════════════════════════ */

#dcl_comment_btn.dcl-comment {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto !important;
  max-width: 320px;
  margin: 2rem auto 0;
  padding: 0.7rem 2.5rem;
  background: linear-gradient(135deg, rgba(67, 56, 202, 0.85), rgba(99, 102, 241, 0.9)) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 50px;
  color: #ffffff !important;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(67, 56, 202, 0.3);
}

[data-theme='dark'] #dcl_comment_btn.dcl-comment {
  background: rgba(11, 19, 33, 0.85) !important;
  border: 1px solid rgba(102, 252, 241, 0.3) !important;
  color: #66fcf1 !important;
  box-shadow: 0 4px 15px rgba(102, 252, 241, 0.15);
}

#dcl_comment_btn.dcl-comment:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(67, 56, 202, 0.4);
  background: linear-gradient(135deg, rgba(79, 70, 220, 0.95), rgba(110, 115, 250, 1)) !important;
}

[data-theme='dark'] #dcl_comment_btn.dcl-comment:hover {
  box-shadow: 0 8px 25px rgba(102, 252, 241, 0.3);
  border-color: rgba(102, 252, 241, 0.5) !important;
}