/*
 Theme Name:   BeTheme Child – TrueUmut
 Theme URI:    https://trueumut.de
 Description:  Child Theme für BeTheme – Digitale Visitenkarte & Portfolio von Umut
 Author:       Umut
 Author URI:   https://trueumut.de
 Template:     betheme
 Version:      3.2.0
 Text Domain:  betheme-child
*/

/* ==========================================================================
   Global Performance: pause animations on off-screen sections
   ========================================================================== */
.mcb-section.anim-paused,
.mcb-section.anim-paused *,
.mcb-section.anim-paused *::before,
.mcb-section.anim-paused *::after {
  animation-play-state: paused !important;
}

/* ==========================================================================
   Mobile Nav: Dark Mode Override
   ========================================================================== */
[data-theme="dark"] #Side_slide,
[data-theme="dark"] .mfn-off-canvas {
  background: var(--color-bg) !important;
}
[data-theme="dark"] #Side_slide a,
[data-theme="dark"] #Side_slide .menu-item a,
[data-theme="dark"] .mfn-off-canvas a {
  color: var(--color-text) !important;
}
[data-theme="dark"] #Side_slide .menu-item a:hover,
[data-theme="dark"] .mfn-off-canvas a:hover {
  color: var(--color-primary) !important;
}

/* ==========================================================================
   CSS Custom Properties (Light Mode Default)
   ========================================================================== */

:root {
  --color-primary: #6C63FF;
  --color-primary-rgb: 108, 99, 255;
  --color-secondary: #FF6584;
  --color-secondary-rgb: 255, 101, 132;
  --color-accent: #43E97B;
  --color-accent-rgb: 67, 233, 123;
  --color-warning: #FFB347;
  --color-warning-rgb: 255, 179, 71;
  --color-bg: #F5F4F0;
  --color-surface: #FEFEFE;
  --color-text: #2D2D2D;
  --color-text-muted: #6B6B6B;
  --color-gradient: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  --color-gradient-reverse: linear-gradient(315deg, var(--color-primary), var(--color-secondary));
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 50%;
  --transition: 0.3s ease;
  --glass-bg: rgba(255, 255, 255, 0.95);
  --glass-border: rgba(0, 0, 0, 0.06);
}

/* ==========================================================================
   Dark Mode Variables
   ========================================================================== */

[data-theme="dark"] {
  --color-primary: #8B83FF;
  --color-primary-rgb: 139, 131, 255;
  --color-secondary: #FF8FA3;
  --color-secondary-rgb: 255, 143, 163;
  --color-accent: #5FFFAA;
  --color-accent-rgb: 95, 255, 170;
  --color-warning: #FFC96B;
  --color-warning-rgb: 255, 201, 107;
  --color-bg: #121212;
  --color-surface: #1E1E2E;
  --color-text: #E8E8E8;
  --color-text-muted: #A0A0A0;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --glass-bg: rgba(30, 30, 46, 0.7);
  --glass-border: rgba(139, 131, 255, 0.15);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-primary: #8B83FF;
    --color-primary-rgb: 139, 131, 255;
    --color-secondary: #FF8FA3;
    --color-secondary-rgb: 255, 143, 163;
    --color-accent: #5FFFAA;
    --color-accent-rgb: 95, 255, 170;
    --color-warning: #FFC96B;
    --color-warning-rgb: 255, 201, 107;
    --color-bg: #121212;
    --color-surface: #1E1E2E;
    --color-text: #E8E8E8;
    --color-text-muted: #A0A0A0;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --glass-bg: rgba(30, 30, 46, 0.7);
    --glass-border: rgba(139, 131, 255, 0.15);
  }
}

/* ==========================================================================
   Full-Width Override + Smooth Scroll
   ========================================================================== */

#Wrapper {
  max-width: 100% !important;
}

html {
  scroll-behavior: smooth;
}

/* ==========================================================================
   Global Transitions for Dark/Light Switch
   ========================================================================== */

body,
#Wrapper,
#Header,
#Footer,
.section,
.column,
.mcb-section,
.mcb-wrap,
.mcb-column {
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

/* ==========================================================================
   Keyframe Animations
   ========================================================================== */

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes float-delay {
  0%, 100% { transform: translateY(0) rotate(2deg); }
  50% { transform: translateY(-8px) rotate(-2deg); }
}

@keyframes pop-in {
  0% { transform: scale(0.8); opacity: 0; }
  60% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes blink-cursor {
  0%, 100% { border-color: var(--color-primary); }
  50% { border-color: transparent; }
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 200%; }
}

@keyframes ring-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes bounce-sm {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

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

@keyframes wave-float {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50% { transform: translateY(-5px) scaleY(1.03); }
}

@keyframes star-twinkle {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

@keyframes bounce-scroll {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50% { transform: translateY(10px); opacity: 1; }
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes ripple-anim {
  to { transform: scale(4); opacity: 0; }
}

@keyframes icon-pop {
  0% { transform: scale(0.5) rotate(-10deg); opacity: 0; }
  60% { transform: scale(1.1) rotate(3deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

@keyframes ring-pulse {
  0% { transform: scale(0.8); opacity: 0.6; }
  100% { transform: scale(1.4); opacity: 0; }
}

@keyframes gentle-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px) rotate(-1deg); }
  75% { transform: translateX(3px) rotate(1deg); }
}

@keyframes border-rotate {
  from { --angle: 0deg; }
  to { --angle: 360deg; }
}

@keyframes text-glow-pulse {
  0%, 100% { text-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.3), 0 0 40px rgba(var(--color-primary-rgb), 0.1); }
  50% { text-shadow: 0 0 30px rgba(var(--color-primary-rgb), 0.5), 0 0 60px rgba(var(--color-primary-rgb), 0.2); }
}

@keyframes spin-border {
  to { transform: rotate(360deg); }
}

[data-theme="dark"] .service-box::after {
  opacity: 0.5;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto !important; }
  .reveal, .text-reveal { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .hero-particle-canvas { display: none !important; }
  .marquee-swiper .swiper-wrapper { transition: none !important; }
  .portfolio-swiper .swiper-wrapper { transition: none !important; }
  .scroll-indicator { display: none !important; }
}

/* ==========================================================================
   Splash Loading Screen
   ========================================================================== */

.splash-screen {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: linear-gradient(-45deg, #6C63FF, #FF6584, #43E97B, #FFB347);
  background-size: 400% 400%;
  animation: gradient-shift 4s ease infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.splash-screen.splash-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.splash-content {
  text-align: center;
}

.splash-logo {
  font-family: Poppins, sans-serif;
  font-weight: 800;
  font-size: clamp(2.5rem, 8vw, 5rem);
  color: #fff;
  margin-bottom: 24px;
}

.splash-letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px) scale(0.5);
  animation: splash-letter-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: calc(var(--i) * 0.08s + 0.2s);
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
}

.splash-letter--space {
  width: 0.3em;
}

@keyframes splash-letter-in {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.splash-bar {
  width: 200px;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  margin: 0 auto 16px;
  overflow: hidden;
}

.splash-bar-fill {
  height: 100%;
  width: 0;
  background: #fff;
  border-radius: 2px;
  animation: splash-fill 1.8s 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes splash-fill {
  to { width: 100%; }
}

.splash-tagline {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1rem;
  font-weight: 500;
  opacity: 0;
  animation: pop-in 0.5s 1.2s ease forwards;
}

/* ==========================================================================
   Achievement Toast
   ========================================================================== */

.achievement-toast {
  position: fixed;
  bottom: 90px;
  right: 24px;
  z-index: 9997;
  padding: 14px 24px;
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg), 0 0 20px rgba(var(--color-primary-rgb), 0.15);
  border-left: 4px solid var(--color-primary);
  font-family: Poppins, sans-serif;
  font-weight: 600;
  font-size: 14px;
  transform: translateX(120%) scale(0.9);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  pointer-events: none;
}

.achievement-toast.toast-show {
  transform: translateX(0) scale(1);
  opacity: 1;
}

@media (max-width: 768px) {
  .achievement-toast {
    right: 16px;
    bottom: 80px;
    font-size: 13px;
    padding: 12px 18px;
  }
}

/* ==========================================================================
   Playful: Rainbow Cursor Blink
   ========================================================================== */

@keyframes rainbow-blink {
  0%, 100% { border-color: #6C63FF; opacity: 1; }
  14% { border-color: #FF6584; }
  28% { border-color: #43E97B; }
  42% { border-color: #FFB347; }
  56% { border-color: #FF8FA3; }
  70% { border-color: #5FFFAA; }
  84% { border-color: #6C63FF; }
  50% { opacity: 0; }
}

.hero-typing::after {
  animation: rainbow-blink 1.2s step-end infinite !important;
}

/* ==========================================================================
   Playful: Profile Wobble on Hover
   ========================================================================== */

@keyframes wobble {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(-3deg); }
  30% { transform: rotate(2deg); }
  45% { transform: rotate(-2deg); }
  60% { transform: rotate(1deg); }
  75% { transform: rotate(-0.5deg); }
}

.profile-ring-container:hover .profile-img {
  animation: wobble 0.6s ease;
}

/* ==========================================================================
   Playful: WhatsApp Button Wiggle Idle
   ========================================================================== */

@keyframes wiggle-idle {
  0%, 90%, 100% { transform: rotate(0); }
  92% { transform: rotate(-3deg); }
  94% { transform: rotate(3deg); }
  96% { transform: rotate(-2deg); }
  98% { transform: rotate(1deg); }
}

.btn-cta-whatsapp svg {
  animation: wiggle-idle 4s ease-in-out infinite;
}

/* ==========================================================================
   Scroll Progress Bar
   ========================================================================== */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: var(--color-gradient);
  z-index: 99999;
  transition: width 0.1s linear;
}

/* ==========================================================================
   Scroll Reveal System
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* ==========================================================================
   BeTheme Dark Mode Overrides
   ========================================================================== */

[data-theme="dark"] #Wrapper,
[data-theme="dark"] body {
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
}

[data-theme="dark"] #Header,
[data-theme="dark"] #Header .header_wrapper,
[data-theme="dark"] #Top_bar,
[data-theme="dark"] .sticky-dark #Top_bar,
[data-theme="dark"] #Top_bar .top_bar_left {
  background-color: var(--color-surface) !important;
}

[data-theme="dark"] #Top_bar .menu > li > a span.span-menu {
  color: var(--color-text) !important;
}

[data-theme="dark"] #Top_bar .menu > li.current-menu-item > a span.span-menu,
[data-theme="dark"] #Top_bar .menu > li > a:hover span.span-menu {
  color: var(--color-primary) !important;
}

/* Light Mode Header – explicitly bright */
#Header,
#Header .header_wrapper,
#Top_bar,
#Top_bar .top_bar_left {
  background-color: #fff !important;
}

[data-theme="dark"] #Footer,
[data-theme="dark"] #Footer .widgets_wrapper,
[data-theme="dark"] #Footer .footer_copy {
  background-color: var(--color-surface) !important;
  color: var(--color-text-muted) !important;
}

[data-theme="dark"] .mcb-section:not([style*="background-color"]):not(.hero-section):not(.cta-section) {
  background-color: var(--color-bg) !important;
}
[data-theme="dark"] .mcb-section.section-surface {
  background-color: var(--color-surface) !important;
}

[data-theme="dark"] .column_attr h1,
[data-theme="dark"] .column_attr h2,
[data-theme="dark"] .column_attr h3,
[data-theme="dark"] .column_attr h4,
[data-theme="dark"] .column_attr h5,
[data-theme="dark"] .column_attr h6,
[data-theme="dark"] h1, [data-theme="dark"] h2,
[data-theme="dark"] h3, [data-theme="dark"] h4 {
  color: var(--color-text) !important;
}

[data-theme="dark"] .column_attr p,
[data-theme="dark"] .column_attr,
[data-theme="dark"] p,
[data-theme="dark"] span:not(.dark-mode-toggle span):not(.toggle-star) {
  color: var(--color-text) !important;
}

/* ==========================================================================
   Scene-Based Dark Mode Toggle (2027)
   ========================================================================== */

/* ==========================================================================
   Theme Picker (replaces dark-mode-toggle)
   ========================================================================== */

.theme-picker {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
}

.theme-picker-btn {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  border: 2px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
  padding: 0;
  font-size: 22px;
  line-height: 1;
}

.theme-picker-btn:hover {
  transform: scale(1.1);
  box-shadow: var(--shadow-lg), 0 0 24px rgba(var(--color-primary-rgb), 0.25);
}

.theme-picker-popup {
  position: absolute;
  bottom: 64px;
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  transform: translateY(8px) scale(0.95);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  min-width: 160px;
}

.theme-picker.open .theme-picker-popup {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.theme-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.2s ease;
  font-size: 14px;
  font-family: Inter, sans-serif;
  color: var(--color-text);
  white-space: nowrap;
}

.theme-option:hover {
  background: rgba(var(--color-primary-rgb), 0.08);
}

.theme-option.active {
  background: rgba(var(--color-primary-rgb), 0.12);
  font-weight: 600;
}

.theme-option-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.theme-option[data-hero="splashes"] .theme-option-icon {
  background: linear-gradient(135deg, #F5F0EB, #e8ddd5);
  box-shadow: inset 0 0 8px rgba(108,99,255,0.3), inset 0 0 8px rgba(255,101,132,0.2);
}
.theme-option[data-hero="space"] .theme-option-icon {
  background: linear-gradient(135deg, #0B0D2E, #1a1145);
}
.theme-option[data-hero="hamburg"] .theme-option-icon {
  background: linear-gradient(135deg, #E8F4FD, #F0E8DD);
}
.theme-option[data-hero="dark"] .theme-option-icon {
  background: linear-gradient(135deg, #1a1640, #2d1525);
}

/* ==========================================================================
   Theme Chooser Overlay (first visit)
   ========================================================================== */

.theme-chooser {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: chooser-in 0.5s ease both;
}

.theme-chooser--out {
  animation: chooser-out 0.5s ease both;
}

@keyframes chooser-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes chooser-out {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.05); }
}

.theme-chooser-inner {
  text-align: center;
  max-width: 700px;
  padding: 48px 32px;
  animation: chooser-content-in 0.6s 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes chooser-content-in {
  0% { opacity: 0; transform: translateY(30px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.theme-chooser-eyebrow {
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 12px;
}

.theme-chooser-title {
  font-family: Poppins, sans-serif;
  font-weight: 800;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: #fff;
  margin-bottom: 8px;
}

.theme-chooser-sub {
  font-size: 15px;
  color: rgba(255,255,255,0.55);
  margin-bottom: 40px;
}

.theme-chooser-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

@media (max-width: 640px) {
  .theme-chooser-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.theme-chooser-card {
  background: rgba(255,255,255,0.08);
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  padding: 20px 12px 16px;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s ease, background 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-family: Inter, sans-serif;
}

.theme-chooser-card:hover {
  transform: translateY(-6px) scale(1.03);
  border-color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.12);
}

.theme-chooser-card:active {
  transform: scale(0.97);
}

.theme-chooser-preview {
  width: 100%;
  height: 70px;
  border-radius: var(--radius-sm);
  margin-bottom: 4px;
}

.theme-chooser-preview--splashes {
  background: #FAF7F2;
  position: relative;
  overflow: hidden;
}
.theme-chooser-preview--splashes::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle 18px at 20% 30%, rgba(220,30,30,0.6) 0%, transparent 100%),
    radial-gradient(circle 15px at 75% 25%, rgba(0,100,220,0.5) 0%, transparent 100%),
    radial-gradient(circle 14px at 30% 75%, rgba(0,180,50,0.5) 0%, transparent 100%),
    radial-gradient(circle 16px at 80% 70%, rgba(255,210,0,0.6) 0%, transparent 100%);
}

.theme-chooser-preview--space {
  background: linear-gradient(160deg, #050714, #1a1145);
  position: relative;
}
.theme-chooser-preview--space::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle 2px at 20% 30%, #fff 0%, transparent 2px),
    radial-gradient(circle 1px at 50% 20%, rgba(255,255,255,0.7) 0%, transparent 1px),
    radial-gradient(circle 2px at 80% 40%, #fff 0%, transparent 2px),
    radial-gradient(circle 1px at 35% 65%, rgba(255,255,255,0.5) 0%, transparent 1px),
    radial-gradient(circle 12px at 75% 55%, rgba(255,101,132,0.5) 0%, transparent 100%);
}

.theme-chooser-preview--hamburg {
  background: linear-gradient(180deg, #D6EAF8 0%, #F0E8DD 100%);
}

.theme-chooser-preview--dark {
  background: linear-gradient(-45deg, #1a1640, #2d1525, #0d2618);
  background-size: 200% 200%;
}

.theme-chooser-icon {
  font-size: 28px;
  line-height: 1;
}

.theme-chooser-card strong {
  font-size: 15px;
  font-weight: 700;
}

.theme-chooser-card small {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}

/* Theme switch page wipe (radial glow from toggle position) */
html::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background: radial-gradient(circle at calc(100% - 52px) calc(100% - 52px),
    rgba(var(--color-primary-rgb), 0.1), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
html.theme-wipe::after {
  opacity: 1;
}

/* Prefers dark scheme fallback */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sky-top { stop-color: #0C1445; }
  :root:not([data-theme="light"]) .sky-bot { stop-color: #1A1A3E; }
  :root:not([data-theme="light"]) .sc-body { fill: #E8E8E8; transform: translateY(-3px); }
  :root:not([data-theme="light"]) .moon-cut { cx: 22; }
  :root:not([data-theme="light"]) .sc-rays { opacity: 0; transform: scale(0.5) rotate(30deg); }
  :root:not([data-theme="light"]) .sc-star { opacity: 1; animation: star-twinkle 2.5s ease-in-out infinite; }
  :root:not([data-theme="light"]) .sc-cloud { opacity: 0; transform: translateX(10px); }
  :root:not([data-theme="light"]) .sc-ground { fill: #1A1A2E; }
  :root:not([data-theme="light"]) .dark-mode-toggle { border-color: rgba(139, 131, 255, 0.3); }
}

/* ==========================================================================
   Header Scroll Transformation
   ========================================================================== */

body.hero-page #Header {
  position: absolute;
  width: 100%;
  z-index: 999;
  background: transparent !important;
}

body.hero-page #Top_bar,
body.hero-page #Header .header_wrapper,
body.hero-page #Top_bar .top_bar_left {
  background: transparent !important;
  transition: background 0.4s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease;
}

body.hero-page #Header.header-scrolled #Top_bar,
body.hero-page #Header.header-scrolled .header_wrapper,
body.hero-page #Header.header-scrolled #Top_bar .top_bar_left {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow-sm);
}

body.hero-page #Top_bar .menu > li > a span.span-menu {
  color: #fff !important;
  transition: color 0.3s ease;
}

/* Light hero themes: dark menu text */
[data-hero-theme="splashes"] body.hero-page #Top_bar .menu > li > a span.span-menu,
:root:not([data-hero-theme]) body.hero-page #Top_bar .menu > li > a span.span-menu,
[data-hero-theme="hamburg"] body.hero-page #Top_bar .menu > li > a span.span-menu {
  color: #2D2D2D !important;
}
[data-hero-theme="splashes"] body.hero-page #Top_bar .menu > li.current-menu-item > a span.span-menu,
:root:not([data-hero-theme]) body.hero-page #Top_bar .menu > li.current-menu-item > a span.span-menu,
[data-hero-theme="hamburg"] body.hero-page #Top_bar .menu > li.current-menu-item > a span.span-menu,
[data-hero-theme="splashes"] body.hero-page #Top_bar .menu > li > a:hover span.span-menu,
:root:not([data-hero-theme]) body.hero-page #Top_bar .menu > li > a:hover span.span-menu,
[data-hero-theme="hamburg"] body.hero-page #Top_bar .menu > li > a:hover span.span-menu {
  color: var(--color-primary) !important;
}

body.hero-page #Header.header-scrolled #Top_bar .menu > li > a span.span-menu {
  color: var(--color-text) !important;
}

body.hero-page #Header.header-scrolled #Top_bar .menu > li.current-menu-item > a span.span-menu,
body.hero-page #Header.header-scrolled #Top_bar .menu > li > a:hover span.span-menu {
  color: var(--color-primary) !important;
}

/* ==========================================================================
   Gradient Text Utility
   ========================================================================== */

.gradient-text {
  background: var(--color-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-text-glow {
  background: var(--color-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: text-glow-pulse 3s ease-in-out infinite;
}

[data-theme="dark"] .gradient-text-glow {
  animation: text-glow-pulse 2.5s ease-in-out infinite;
}

/* ==========================================================================
   Scroll Down Indicator
   ========================================================================== */

.scroll-indicator {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  animation: bounce-scroll 2s ease-in-out infinite;
  transition: opacity 0.4s ease;
  cursor: pointer;
}

.scroll-indicator.hidden {
  opacity: 0;
  pointer-events: none;
}

.scroll-indicator svg {
  width: 32px;
  height: 32px;
  stroke: rgba(255, 255, 255, 0.7);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ==========================================================================
   Text Reveal Animation
   ========================================================================== */

.text-reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}

.text-reveal.revealed {
  clip-path: inset(0 0 0 0);
}

/* ==========================================================================
   Hero Section v2
   ========================================================================== */

/* @property mesh vars removed – mesh-move animation disabled for performance */

@keyframes mesh-move {
  0% { --mx1: 20%; --my1: 30%; --mx2: 80%; --my2: 20%; --mx3: 40%; --my3: 80%; --mx4: 70%; --my4: 50%; }
  33% { --mx1: 50%; --my1: 60%; --mx2: 30%; --my2: 40%; --mx3: 70%; --my3: 30%; --mx4: 20%; --my4: 70%; }
  66% { --mx1: 80%; --my1: 20%; --mx2: 60%; --my2: 70%; --mx3: 20%; --my3: 50%; --mx4: 50%; --my4: 30%; }
  100% { --mx1: 20%; --my1: 30%; --mx2: 80%; --my2: 20%; --mx3: 40%; --my3: 80%; --mx4: 70%; --my4: 50%; }
}

.hero-section {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* === THEME: Farb-Kleckse (Default Light) – Art Attack Style === */
[data-hero-theme="splashes"] .hero-section,
:root:not([data-hero-theme]) .hero-section {
  background:
    /* Soft warm-to-cool gradient like a painted canvas */
    radial-gradient(ellipse 80% 60% at 30% 20%, rgba(255, 230, 210, 0.5) 0%, transparent 70%),
    radial-gradient(ellipse 70% 50% at 70% 80%, rgba(210, 225, 255, 0.4) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 50%, rgba(255, 250, 230, 0.3) 0%, transparent 70%),
    /* Base: warm off-white with slight texture feel */
    linear-gradient(135deg, #FDF8F3 0%, #F5F0EB 30%, #F0EDE8 50%, #F2F0F5 70%, #FDF8F3 100%);
}

/* Subtle animated color wash behind content */
[data-hero-theme="splashes"] .hero-section::before,
:root:not([data-hero-theme]) .hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 40% 35% at 20% 30%, rgba(220, 30, 30, 0.06) 0%, transparent 70%),
    radial-gradient(ellipse 35% 40% at 80% 20%, rgba(0, 100, 220, 0.05) 0%, transparent 70%),
    radial-gradient(ellipse 38% 32% at 40% 80%, rgba(0, 180, 50, 0.04) 0%, transparent 70%),
    radial-gradient(ellipse 32% 38% at 70% 50%, rgba(255, 210, 0, 0.06) 0%, transparent 70%);
  z-index: 0;
}

[data-hero-theme="splashes"] .hero-section::after,
:root:not([data-hero-theme]) .hero-section::after {
  content: none;
}

/* Paint splatter SVGs */
[data-hero-theme="splashes"] .hero-splashes,
:root:not([data-hero-theme]) .hero-splashes { display: block; }
.hero-splashes {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}

.paint-splat {
  position: absolute;
  opacity: 0;
  animation: splat-throw 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.1));
}

/* Positioning – pushed to edges, away from text center */
.paint-splat--red-tl    { width: 140px; top: -3%;  left: -4%;  animation-delay: 0.3s; transform: rotate(-20deg); }
.paint-splat--blue-tr   { width: 130px; top: -2%;  right: -5%; animation-delay: 0.6s; transform: rotate(15deg); }
.paint-splat--green-bl  { width: 120px; bottom: 0%; left: -3%;  animation-delay: 0.9s; transform: rotate(-10deg); }
.paint-splat--yellow-br { width: 130px; bottom: -2%; right: -4%; animation-delay: 1.2s; transform: rotate(8deg); }
.paint-splat--red-mid   { width: 70px;  top: 50%;  left: -1%;  animation-delay: 1.5s; transform: rotate(25deg); }
.paint-splat--blue-mid  { width: 75px;  top: 38%;  right: -1%; animation-delay: 1.7s; transform: rotate(-15deg); }

@keyframes splat-throw {
  0%  { opacity: 0; transform: scale(0.2) rotate(var(--r, 0deg)); }
  40% { opacity: 1; transform: scale(1.15) rotate(var(--r, 0deg)); }
  60% { transform: scale(0.95) rotate(var(--r, 0deg)); }
  100% { opacity: 1; transform: scale(1) rotate(var(--r, 0deg)); }
}

[data-hero-theme="splashes"] .hero-content,
:root:not([data-hero-theme]) .hero-content {
  color: var(--color-text);
}
[data-hero-theme="splashes"] .hero-content h1,
[data-hero-theme="splashes"] .hero-content h1 *,
:root:not([data-hero-theme]) .hero-content h1,
:root:not([data-hero-theme]) .hero-content h1 * {
  color: #1a1a1a !important;
  background: none !important;
  -webkit-text-fill-color: #1a1a1a !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
}

[data-hero-theme="hamburg"] .hero-content h1,
[data-hero-theme="hamburg"] .hero-content h1 * {
  color: #2D2D2D !important;
  background: none !important;
  -webkit-text-fill-color: #2D2D2D !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
}
[data-hero-theme="splashes"] .hero-content p,
:root:not([data-hero-theme]) .hero-content p {
  color: #4a4a4a;
}

/* ============================================================================
   THEME: Space – Immersive Cosmos
   ============================================================================ */
[data-hero-theme="space"] .hero-section {
  background: linear-gradient(160deg, #050714 0%, #0B0D2E 20%, #1a1145 45%, #0d1a3a 70%, #080520 100%);
}

/* Nebula glow layers */
[data-hero-theme="space"] .hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Nebula cloud 1 - purple */
    radial-gradient(ellipse 50% 40% at 20% 30%, rgba(108, 99, 255, 0.2) 0%, transparent 70%),
    /* Nebula cloud 2 - pink */
    radial-gradient(ellipse 40% 50% at 75% 60%, rgba(255, 101, 132, 0.15) 0%, transparent 70%),
    /* Nebula cloud 3 - teal */
    radial-gradient(ellipse 45% 35% at 60% 20%, rgba(67, 233, 170, 0.1) 0%, transparent 70%),
    /* Stars layer */
    radial-gradient(circle 2px at 5% 12%, #fff 0%, transparent 2px),
    radial-gradient(circle 1.5px at 15% 8%, #fff 0%, transparent 2px),
    radial-gradient(circle 1px at 25% 22%, rgba(255,255,255,0.7) 0%, transparent 1px),
    radial-gradient(circle 2px at 35% 5%, #fff 0%, transparent 2px),
    radial-gradient(circle 1px at 42% 18%, rgba(255,255,255,0.5) 0%, transparent 1px),
    radial-gradient(circle 1.5px at 55% 8%, rgba(255,255,255,0.8) 0%, transparent 2px),
    radial-gradient(circle 2px at 65% 15%, #fff 0%, transparent 2px),
    radial-gradient(circle 1px at 75% 5%, rgba(255,255,255,0.6) 0%, transparent 1px),
    radial-gradient(circle 1.5px at 82% 20%, #fff 0%, transparent 2px),
    radial-gradient(circle 1px at 90% 10%, rgba(255,255,255,0.7) 0%, transparent 1px),
    radial-gradient(circle 2px at 95% 25%, #fff 0%, transparent 2px),
    radial-gradient(circle 1px at 10% 35%, rgba(255,255,255,0.5) 0%, transparent 1px),
    radial-gradient(circle 1.5px at 30% 42%, rgba(255,255,255,0.6) 0%, transparent 2px),
    radial-gradient(circle 1px at 50% 38%, rgba(255,255,255,0.4) 0%, transparent 1px),
    radial-gradient(circle 2px at 70% 45%, #fff 0%, transparent 2px),
    radial-gradient(circle 1px at 88% 40%, rgba(255,255,255,0.6) 0%, transparent 1px),
    radial-gradient(circle 1px at 8% 55%, rgba(255,255,255,0.4) 0%, transparent 1px),
    radial-gradient(circle 1.5px at 22% 60%, rgba(255,255,255,0.7) 0%, transparent 2px),
    radial-gradient(circle 1px at 40% 52%, rgba(255,255,255,0.5) 0%, transparent 1px),
    radial-gradient(circle 2px at 58% 58%, #fff 0%, transparent 2px),
    radial-gradient(circle 1px at 78% 50%, rgba(255,255,255,0.6) 0%, transparent 1px),
    radial-gradient(circle 1.5px at 92% 62%, rgba(255,255,255,0.8) 0%, transparent 2px),
    radial-gradient(circle 1px at 12% 72%, rgba(255,255,255,0.5) 0%, transparent 1px),
    radial-gradient(circle 2px at 32% 78%, rgba(255,255,255,0.7) 0%, transparent 2px),
    radial-gradient(circle 1px at 48% 70%, rgba(255,255,255,0.4) 0%, transparent 1px),
    radial-gradient(circle 1.5px at 62% 75%, rgba(255,255,255,0.6) 0%, transparent 2px),
    radial-gradient(circle 1px at 85% 72%, rgba(255,255,255,0.5) 0%, transparent 1px),
    radial-gradient(circle 1px at 18% 88%, rgba(255,255,255,0.4) 0%, transparent 1px),
    radial-gradient(circle 2px at 45% 92%, rgba(255,255,255,0.7) 0%, transparent 2px),
    radial-gradient(circle 1px at 72% 85%, rgba(255,255,255,0.5) 0%, transparent 1px),
    radial-gradient(circle 1.5px at 95% 90%, rgba(255,255,255,0.6) 0%, transparent 2px);
  z-index: 0;
  animation: nebula-drift 30s ease-in-out infinite;
}

/* Shooting star */
[data-hero-theme="space"] .hero-section::after {
  content: '';
  position: absolute;
  top: 18%;
  left: -5%;
  width: 100px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent);
  border-radius: 2px;
  z-index: 1;
  animation: shooting-star 6s ease-in-out infinite;
  opacity: 0;
}

@keyframes nebula-drift {
  0%, 100% { filter: hue-rotate(0deg); }
  50% { filter: hue-rotate(15deg); }
}

@keyframes shooting-star {
  0%, 85%, 100% { opacity: 0; transform: translateX(0) translateY(0) rotate(-25deg); }
  90% { opacity: 1; transform: translateX(600px) translateY(150px) rotate(-25deg); }
  95% { opacity: 0; transform: translateX(900px) translateY(225px) rotate(-25deg); }
}

[data-hero-theme="space"] .hero-content h1,
[data-hero-theme="space"] .hero-content p,
[data-hero-theme="space"] .hero-content {
  color: #fff;
}

/* Space decorations: Planets, UFO, Comet */
[data-hero-theme="space"] .hero-deco { display: block; }
.hero-deco { display: none; position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

.hero-deco-planet {
  position: absolute;
  top: 10%;
  right: 7%;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF6584 20%, #FFB347 80%);
  box-shadow: inset -15px -10px 25px rgba(0,0,0,0.35), 0 0 60px rgba(255,101,132,0.3), 0 0 120px rgba(255,101,132,0.1);
  animation: planet-float 8s ease-in-out infinite;
}

/* Planet surface details */
.hero-deco-planet::before {
  content: '';
  position: absolute;
  top: 25%;
  left: 20%;
  width: 20px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
}

.hero-deco-planet::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -25%;
  width: 150%;
  height: 20px;
  border: 2.5px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  transform: translateY(-50%) rotateX(72deg);
  box-shadow: 0 4px 0 rgba(255,255,255,0.08);
}

.hero-deco-planet-sm {
  position: absolute;
  bottom: 18%;
  left: 5%;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6C63FF 30%, #43E97B 100%);
  box-shadow: inset -8px -6px 14px rgba(0,0,0,0.3), 0 0 30px rgba(108,99,255,0.25), 0 0 60px rgba(67,233,123,0.1);
  animation: planet-float 6s ease-in-out 1s infinite;
}

/* Moon orbiting small planet */
.hero-deco-planet-sm::after {
  content: '';
  position: absolute;
  top: -8px;
  right: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #E8E8E8;
  box-shadow: inset -3px -2px 4px rgba(0,0,0,0.2);
  animation: moon-orbit 4s linear infinite;
}

@keyframes moon-orbit {
  0% { transform: rotate(0deg) translateX(20px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(20px) rotate(-360deg); }
}

.hero-deco-ufo {
  position: absolute;
  top: 22%;
  left: 10%;
  animation: ufo-float 10s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(95,255,170,0.3));
}

/* UFO beam */
.hero-deco-ufo::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 40px;
  background: linear-gradient(180deg, rgba(95,255,170,0.4), transparent);
  border-radius: 0 0 50% 50%;
  animation: beam-pulse 2s ease-in-out infinite;
}

@keyframes beam-pulse {
  0%, 100% { opacity: 0.4; height: 40px; }
  50% { opacity: 0.8; height: 60px; }
}

@keyframes planet-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-16px); }
}

@keyframes ufo-float {
  0%, 100% { transform: translate(0, 0) rotate(-2deg); }
  25% { transform: translate(20px, -10px) rotate(2deg); }
  50% { transform: translate(10px, 5px) rotate(-1deg); }
  75% { transform: translate(-10px, -8px) rotate(1deg); }
}

/* ============================================================================
   THEME: Hamburg – Norddeutsche Liebe
   ============================================================================ */
[data-hero-theme="hamburg"] .hero-section {
  background: linear-gradient(180deg, #D6EAF8 0%, #E8F4FD 20%, #F5F0EB 50%, #F0E8DD 80%, #E5DDD3 100%);
}

/* Soft clouds */
[data-hero-theme="hamburg"] .hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 25% 12% at 15% 15%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(ellipse 20% 10% at 35% 10%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(ellipse 30% 14% at 70% 12%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(ellipse 18% 9% at 85% 18%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(ellipse 22% 11% at 50% 8%, rgba(255,255,255,0.65) 0%, transparent 100%);
  animation: clouds-drift 40s linear infinite;
  z-index: 0;
}

@keyframes clouds-drift {
  0% { transform: translateX(0); }
  100% { transform: translateX(30px); }
}

[data-hero-theme="hamburg"] .hero-content h1,
[data-hero-theme="hamburg"] .hero-content {
  color: #2D2D2D;
}
[data-hero-theme="hamburg"] .hero-content p {
  color: #4a4a4a;
}

/* Hamburg Skyline (bottom of hero) */
[data-hero-theme="hamburg"] .hero-skyline { display: block; }
.hero-skyline {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  pointer-events: none;
}

/* Elbe water with animated shimmer */
[data-hero-theme="hamburg"] .hero-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 18%;
  background:
    linear-gradient(180deg, transparent 0%, rgba(100, 160, 200, 0.12) 40%, rgba(70, 130, 180, 0.2) 100%);
  z-index: 0;
}

/* Seagull animations */
[data-hero-theme="hamburg"] .hero-gulls { display: block; }
.hero-gulls {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.hero-gull {
  position: absolute;
  animation: gull-fly linear infinite;
}

.hero-gull--1 { top: 15%; left: -5%; animation-duration: 18s; animation-delay: 0s; }
.hero-gull--2 { top: 22%; left: -8%; animation-duration: 22s; animation-delay: 4s; }
.hero-gull--3 { top: 10%; left: -3%; animation-duration: 16s; animation-delay: 8s; }

@keyframes gull-fly {
  0% { transform: translateX(0) translateY(0); opacity: 0; }
  5% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateX(110vw) translateY(-30px); opacity: 0; }
}

.hero-gull svg {
  width: 24px;
  height: 12px;
}

/* ============================================================================
   THEME: Dark – Deep Immersive Night
   ============================================================================ */
[data-hero-theme="dark"] .hero-section {
  background:
    radial-gradient(ellipse 60% 60% at 20% 30%, rgba(108, 99, 255, 0.25) 0%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 80% 20%, rgba(255, 101, 132, 0.2) 0%, transparent 70%),
    radial-gradient(ellipse 55% 55% at 40% 80%, rgba(67, 233, 123, 0.15) 0%, transparent 70%),
    radial-gradient(ellipse 45% 45% at 70% 50%, rgba(255, 179, 71, 0.2) 0%, transparent 70%),
    linear-gradient(-45deg, #1a1640, #2d1525, #0d2618, #2d2010, #1a1640);
}

/* Subtle grid overlay for depth */
[data-hero-theme="dark"] .hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  z-index: 0;
}

/* Glowing orb accent */
[data-hero-theme="dark"] .hero-section::after {
  content: '';
  position: absolute;
  top: 15%;
  right: 10%;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(108,99,255,0.15) 0%, transparent 70%);
  filter: blur(40px);
  animation: orb-pulse 6s ease-in-out infinite;
  z-index: 0;
}

@keyframes orb-pulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.3); opacity: 0.8; }
}

[data-hero-theme="dark"] .hero-content h1,
[data-hero-theme="dark"] .hero-content p,
[data-hero-theme="dark"] .hero-content {
  color: #fff;
}

.hero-particle-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 720px;
  padding: 40px 24px;
}

/* Marker highlight effect on key words – only on splashes/default */
.highlight-word {
  position: relative;
  display: inline-block;
}

.highlight-word::after {
  content: none;
}

/* Only show marker underlines on Farbkleckse theme */
[data-hero-theme="splashes"] .highlight-word::after,
:root:not([data-hero-theme]) .highlight-word::after {
  content: '';
  position: absolute;
  left: -4px;
  right: -4px;
  bottom: 8%;
  height: 35%;
  background: rgba(108, 99, 255, 0.18);
  z-index: -1;
  border-radius: 2px 4px 3px 4px;
  transform: rotate(-0.5deg);
}

[data-hero-theme="splashes"] .highlight-word--alt::after,
:root:not([data-hero-theme]) .highlight-word--alt::after {
  background: rgba(255, 101, 132, 0.18);
  transform: rotate(0.5deg);
}

/* Space/Dark/Hamburg themes: no underline, just color */
[data-hero-theme="space"] .highlight-word,
[data-hero-theme="dark"] .highlight-word {
  color: #fff;
}

[data-hero-theme="space"] .highlight-word--alt::after,
[data-hero-theme="dark"] .highlight-word--alt::after {
  background: rgba(255, 143, 163, 0.25);
}

/* Hamburg: warm marker */
[data-hero-theme="hamburg"] .highlight-word::after {
  background: rgba(100, 160, 200, 0.2);
}
[data-hero-theme="hamburg"] .highlight-word--alt::after {
  background: rgba(255, 179, 71, 0.25);
}

.hero-eyebrow {
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 12px;
  opacity: 0;
  animation: pop-in 0.6s 0.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

[data-hero-theme="splashes"] .hero-eyebrow,
:root:not([data-hero-theme]) .hero-eyebrow,
[data-hero-theme="hamburg"] .hero-eyebrow {
  color: var(--color-primary) !important;
}

.hero-content h1 {
  font-family: Poppins, sans-serif;
  font-weight: 800;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  background: linear-gradient(135deg, #fff 0%, #FFB347 50%, #FF6584 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
  animation: pop-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  filter: none;
}

.hero-typing-wrapper {
  font-family: Poppins, sans-serif;
  font-weight: 600;
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  color: rgba(255, 255, 255, 0.9) !important;
  min-height: 2.4em;
  margin-bottom: 20px;
}

.hero-typing {
  display: inline;
  border-right: 3px solid var(--color-primary);
  padding-right: 4px;
  animation: blink-cursor 0.8s step-end infinite;
}

.hero-content p.hero-intro {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 1.1rem;
  line-height: 1.7;
  max-width: 540px;
  margin: 0 auto 32px;
  animation: pop-in 0.8s 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  animation: pop-in 0.8s 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-buttons .btn-hero {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 36px;
  border-radius: var(--radius-lg);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none !important;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
  border: none;
}

.btn-hero-primary {
  background: #fff;
  color: var(--color-primary) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.btn-hero-primary:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
  letter-spacing: 0.5px;
}

.btn-hero-outline {
  background: rgba(255, 255, 255, 0.15);
  color: #fff !important;
  border: 2px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
}

.btn-hero-outline:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: #fff;
  transform: translateY(-3px) scale(1.03);
  letter-spacing: 0.5px;
}

/* Light hero themes: adjust button colors */
[data-hero-theme="splashes"] .btn-hero-primary,
:root:not([data-hero-theme]) .btn-hero-primary,
[data-hero-theme="hamburg"] .btn-hero-primary {
  background: var(--color-gradient);
  color: #fff !important;
  box-shadow: 0 4px 20px rgba(var(--color-primary-rgb), 0.3);
}
[data-hero-theme="splashes"] .btn-hero-outline,
:root:not([data-hero-theme]) .btn-hero-outline,
[data-hero-theme="hamburg"] .btn-hero-outline {
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-text) !important;
  border: 2px solid rgba(0, 0, 0, 0.15);
  backdrop-filter: none;
}
[data-hero-theme="splashes"] .btn-hero-outline:hover,
:root:not([data-hero-theme]) .btn-hero-outline:hover,
[data-hero-theme="hamburg"] .btn-hero-outline:hover {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.3);
}

/* Light hero themes: all text overrides */
[data-hero-theme="splashes"] .social-proof-text,
:root:not([data-hero-theme]) .social-proof-text,
[data-hero-theme="hamburg"] .social-proof-text {
  color: var(--color-text-muted) !important;
}
[data-hero-theme="splashes"] .hero-typing-wrapper,
:root:not([data-hero-theme]) .hero-typing-wrapper,
[data-hero-theme="hamburg"] .hero-typing-wrapper {
  color: #3a3a3a !important;
}
[data-hero-theme="splashes"] .hero-content p.hero-intro,
:root:not([data-hero-theme]) .hero-content p.hero-intro,
[data-hero-theme="hamburg"] .hero-content p.hero-intro {
  color: #5a5a5a !important;
}
[data-hero-theme="splashes"] .social-proof-stars,
:root:not([data-hero-theme]) .social-proof-stars,
[data-hero-theme="hamburg"] .social-proof-stars {
  color: #FFB347 !important;
}

/* ==========================================================================
   Wave Section Dividers
   ========================================================================== */

.wave-divider {
  position: relative;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  margin: -1px 0;
}

.wave-divider svg {
  display: block;
  width: 100%;
  height: auto;
  min-height: 40px;
}

.wave-divider.wave-top {
  transform: rotate(180deg);
}

.wave-divider svg path {
  fill: var(--color-bg);
  transition: fill var(--transition);
}

.wave-divider.wave-surface svg path {
  fill: var(--color-surface);
}

/* ==========================================================================
   Skills Marquee / Ticker
   ========================================================================== */

/* Marquee Swiper with edge fade overlays */
.marquee-swiper {
  overflow: hidden;
  padding: 24px 0;
  position: relative;
}
.marquee-swiper::before,
.marquee-swiper::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  z-index: 2;
  pointer-events: none;
}
.marquee-swiper::before {
  left: 0;
  background: linear-gradient(to right, var(--color-bg), transparent);
}
.marquee-swiper::after {
  right: 0;
  background: linear-gradient(to left, var(--color-bg), transparent);
}
.marquee-swiper .swiper-wrapper {
  transition-timing-function: linear !important;
}
.marquee-slide-item {
  width: auto !important;
  flex-shrink: 0;
}

.marquee-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  background: var(--glass-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border);
  border-radius: 40px;
  font-family: Poppins, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text);
  white-space: nowrap;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.marquee-pill:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-md);
}

.marquee-pill svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ==========================================================================
   Ripple Effect
   ========================================================================== */

.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  animation: ripple-anim 0.6s ease-out forwards;
  pointer-events: none;
}

/* ==========================================================================
   Glassmorphism Service Boxes
   ========================================================================== */

/* Force equal height on service wraps */
.mcb-section-inner:has(.service-box) {
  align-items: stretch !important;
}
.mcb-wrap:has(.service-box) {
  align-self: stretch !important;
}
.mcb-wrap:has(.service-box),
.mcb-wrap:has(.service-box) .mcb-wrap-inner,
.mcb-wrap:has(.service-box) .column.mcb-column,
.mcb-wrap:has(.service-box) .mcb-column-inner,
.mcb-wrap:has(.service-box) .column_attr {
  height: 100% !important;
}

.service-box {
  text-align: center;
  padding: 40px 28px;
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-sm);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease;
  will-change: transform;
  transform-style: preserve-3d;
  position: relative;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Clean hover: subtle border glow */
.service-box:hover {
  border-color: rgba(var(--color-primary-rgb), 0.3);
}

/* Staggered entrance (stronger than default reveal) */
.service-box.reveal {
  opacity: 0;
  transform: translateY(60px) scale(0.9);
}

.service-box.reveal.revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Blitzit-style gradient overlay on each card */
.service-box::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0.06;
  transition: opacity 0.5s ease;
  z-index: 0;
  pointer-events: none;
}

.service-box:hover::before {
  opacity: 0.14;
}

.service-box--design::before { background: linear-gradient(135deg, #6C63FF 0%, #43E97B 100%); }
.service-box--branding::before { background: linear-gradient(135deg, #FF6584 0%, #FFB347 100%); }
.service-box--local::before { background: linear-gradient(135deg, #43E97B 0%, #FFB347 100%); }

/* Top accent bar */
.service-box::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  opacity: 0;
  transition: opacity var(--transition);
  z-index: 1;
}
.service-box:hover::after { opacity: 1; }
.service-box--design::after { background: var(--color-primary); }
.service-box--branding::after { background: var(--color-secondary); }
.service-box--local::after { background: var(--color-accent); }

.service-box:hover {
  box-shadow: var(--shadow-lg), 0 0 40px rgba(var(--color-primary-rgb), 0.08);
  transform: translateY(-4px);
}

/* Light Mode: Individual tinted card backgrounds */
:root:not([data-theme="dark"]) .service-box--design {
  background: rgba(108, 99, 255, 0.04);
  border-color: rgba(108, 99, 255, 0.12);
}
:root:not([data-theme="dark"]) .service-box--branding {
  background: rgba(255, 101, 132, 0.04);
  border-color: rgba(255, 101, 132, 0.12);
}
:root:not([data-theme="dark"]) .service-box--local {
  background: rgba(67, 233, 123, 0.04);
  border-color: rgba(67, 233, 123, 0.12);
}

/* Dark Mode: Glass + enhanced gradient overlays */
[data-theme="dark"] .service-box {
  background: rgba(30, 30, 46, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
[data-theme="dark"] .service-box::before {
  opacity: 0.12;
}
[data-theme="dark"] .service-box:hover::before {
  opacity: 0.22;
}
[data-theme="dark"] .service-box:hover {
  border-color: rgba(139, 131, 255, 0.3);
  box-shadow: 0 0 30px rgba(139, 131, 255, 0.1), var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Subtle underline animation on heading hover */
.service-box h3 {
  position: relative;
  display: inline-block;
}

.service-box h3::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--color-primary);
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1), left 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 1px;
}

.service-box--design h3::after { background: var(--color-primary); }
.service-box--branding h3::after { background: var(--color-secondary); }
.service-box--local h3::after { background: var(--color-accent); }

.service-box:hover h3::after {
  width: 100%;
  left: 0;
}

.service-box > * { position: relative; z-index: 1; }

.service-box .service-icon {
  font-size: 48px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55), background 0.3s ease;
}

.service-box .service-icon svg {
  width: 36px;
  height: 36px;
}

.service-box--design .service-icon { background: rgba(108, 99, 255, 0.1); color: var(--color-primary); }
.service-box--branding .service-icon { background: rgba(255, 101, 132, 0.1); color: var(--color-secondary); }
.service-box--local .service-icon { background: rgba(67, 233, 123, 0.1); color: var(--color-accent); }

[data-theme="dark"] .service-box--design .service-icon { background: rgba(139, 131, 255, 0.15); }
[data-theme="dark"] .service-box--branding .service-icon { background: rgba(255, 143, 163, 0.15); }
[data-theme="dark"] .service-box--local .service-icon { background: rgba(95, 255, 170, 0.12); }

.service-box:hover .service-icon {
  transform: scale(1.15) translateY(-4px);
}

.service-box h3 {
  font-family: Poppins, sans-serif;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--color-text);
}

.service-box p {
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.7;
}

/* ==========================================================================
   About Section – Profile Ring & Stat Badges
   ========================================================================== */

.profile-ring-container {
  position: relative;
  width: 180px;
  height: 180px;
  margin: 0 auto 24px;
}

.profile-ring {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 192px;
  height: 192px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--color-primary);
  border-right-color: var(--color-secondary);
  border-bottom-color: var(--color-accent);
  border-left-color: var(--color-warning);
  animation: ring-rotate 4s linear infinite;
}

.profile-ring-container .profile-img {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--color-surface);
  box-shadow: var(--shadow-md);
  margin: 0;
  display: block;
  position: relative;
  z-index: 1;
}

.stat-badge {
  position: absolute;
  padding: 8px 14px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  z-index: 2;
  color: var(--color-text) !important;
  cursor: default;
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55), box-shadow 0.3s ease;
}

.stat-badge:hover {
  transform: scale(1.08) !important;
  box-shadow: var(--shadow-lg);
}

.stat-badge--projects {
  top: -10px;
  right: -40px;
  animation: float 3s ease-in-out infinite;
  border-left: 3px solid var(--color-primary);
}

.stat-badge--passion {
  bottom: -10px;
  left: -50px;
  animation: float-delay 3s ease-in-out infinite;
  border-left: 3px solid var(--color-secondary);
}

.about-text h2 {
  font-family: Poppins, sans-serif;
  font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
}

.about-text p {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--color-text-muted);
}

/* ==========================================================================
   Device Mockup (Projekt Showcase)
   ========================================================================== */

.device-mockup {
  position: relative;
  max-width: 500px;
  margin: 0 auto;
  padding: 16px 16px 40px;
  background: var(--color-surface);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.device-mockup:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.device-mockup-dots {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  padding-left: 4px;
}

.device-mockup-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.device-mockup-dots span:nth-child(1) { background: #FF5F57; }
.device-mockup-dots span:nth-child(2) { background: #FFBD2E; }
.device-mockup-dots span:nth-child(3) { background: #28CA41; }

.device-mockup-dots span {
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  cursor: default;
}

.device-mockup:hover .device-mockup-dots span:nth-child(1) { transform: scale(1.3); }
.device-mockup:hover .device-mockup-dots span:nth-child(2) { transform: scale(1.3); transition-delay: 0.05s; }
.device-mockup:hover .device-mockup-dots span:nth-child(3) { transform: scale(1.3); transition-delay: 0.1s; }

.device-mockup-screen {
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.device-mockup-screen img {
  width: 100%;
  display: block;
  transition: transform 0.4s ease;
}

.device-mockup:hover .device-mockup-screen img {
  transform: scale(1.02);
}

.device-mockup-bar {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 4px;
  background: var(--color-text-muted);
  border-radius: 2px;
  opacity: 0.3;
}

.btn-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  background: var(--color-gradient);
  color: #fff !important;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none !important;
  transition: transform var(--transition), box-shadow var(--transition);
  border: none;
  cursor: pointer;
}

.btn-live:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-live .arrow {
  transition: transform var(--transition);
  display: inline-block;
}

.btn-live:hover .arrow {
  transform: translateX(6px);
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* Pulsing dot indicator on live button */
.btn-live::before {
  content: '';
  width: 8px;
  height: 8px;
  background: #43E97B;
  border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(67, 233, 123, 0.4); }
  50% { opacity: 0.8; box-shadow: 0 0 0 6px rgba(67, 233, 123, 0); }
}

/* ==========================================================================
   CTA Section
   ========================================================================== */

.cta-section {
  background: var(--color-gradient) !important;
  position: relative;
  overflow: hidden;
}

.cta-section * {
  color: #fff !important;
}

.cta-section h2 {
  font-family: Poppins, sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3rem);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
}

.cta-section .btn-cta-whatsapp {
  font-size: 17px;
  padding: 18px 40px;
  box-shadow: 0 4px 24px rgba(37, 211, 102, 0.3);
}

.btn-cta-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 36px;
  background: #25D366;
  color: #fff !important;
  border-radius: var(--radius-lg);
  font-weight: 700;
  font-size: 17px;
  text-decoration: none !important;
  transition: transform var(--transition), box-shadow var(--transition);
  border: none;
  cursor: pointer;
}

.btn-cta-whatsapp:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 30px rgba(37, 211, 102, 0.4);
  letter-spacing: 0.3px;
}

/* WhatsApp icon sizing + wiggle on hover */
.btn-cta-whatsapp svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.btn-cta-whatsapp:hover svg {
  transform: rotate(-10deg) scale(1.1);
}

/* ==========================================================================
   Linktree-Style Buttons (Enhanced)
   ========================================================================== */

.linktree-section {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 20px;
}

.linktree-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 18px 24px;
  margin-bottom: 16px;
  background: var(--color-surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  text-decoration: none !important;
  color: var(--color-text) !important;
  font-size: 17px;
  font-weight: 600;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow var(--transition), border-color var(--transition);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.linktree-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  transition: none;
}

.linktree-btn:hover::after {
  animation: shimmer 0.8s ease-out;
}

.linktree-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: var(--shadow-md);
}

.linktree-btn:active {
  transform: scale(0.98);
}

/* Farbige linke Border-Akzente */
.linktree-btn--instagram { border-left: 4px solid #E1306C; }
.linktree-btn--whatsapp { border-left: 4px solid #25D366; }
.linktree-btn--mutbaer { border-left: 4px solid var(--color-warning); }
.linktree-btn--portfolio { border-left: 4px solid var(--color-primary); }
.linktree-btn--kontakt { border-left: 4px solid var(--color-secondary); }

.linktree-btn .btn-icon {
  font-size: 24px;
  width: 32px;
  text-align: center;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.linktree-btn .btn-icon svg {
  width: 24px;
  height: 24px;
}

.linktree-btn .btn-label { flex: 1; }

.linktree-btn .btn-arrow {
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity var(--transition), transform var(--transition);
  color: var(--color-text-muted);
}

.linktree-btn:hover .btn-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Icon bounce on hover */
.linktree-btn .btn-icon {
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.linktree-btn:hover .btn-icon {
  transform: scale(1.2) rotate(-5deg);
}

/* Subtle border-left thickening on hover */
.linktree-btn:hover {
  border-left-width: 6px;
}

/* Linktree Profile Header */
.linktree-header {
  text-align: center;
  padding: 40px 20px 24px;
  max-width: 560px;
  margin: 0 auto;
}

.linktree-header h1 {
  font-family: Poppins, sans-serif;
  font-weight: 800;
  font-size: 1.8rem;
  margin-bottom: 4px;
}

.linktree-header p {
  color: var(--color-text-muted);
  font-size: 1rem;
}

.linktree-footer {
  text-align: center;
  padding: 32px 20px;
  color: var(--color-text-muted) !important;
  font-size: 13px;
  max-width: 560px;
  margin: 0 auto;
}

/* ==========================================================================
   Portfolio Cards Enhancement
   ========================================================================== */

.portfolio_group .portfolio-item .portfolio-item-fw-wrapper,
.portfolio_group .portfolio-item .portfolio-item-content {
  transition: transform var(--transition), box-shadow var(--transition);
}

.portfolio_group .portfolio-item:hover .portfolio-item-fw-wrapper {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .portfolio_group .portfolio-item .portfolio-item-content {
  background-color: var(--color-surface) !important;
}

[data-theme="dark"] .portfolio_group .portfolio-item .portfolio-item-content h3 a,
[data-theme="dark"] .portfolio_group .portfolio-item .portfolio-item-content .desc {
  color: var(--color-text) !important;
}

/* ==========================================================================
   48h Delivery Section
   ========================================================================== */

.delivery-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  font-family: Poppins, sans-serif;
  font-weight: 800;
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--color-text);
  margin-bottom: 16px;
}

.delivery-badge .badge-icon {
  font-size: 1.6em;
  line-height: 1;
}

.delivery-badge .badge-number {
  background: var(--color-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ==========================================================================
   Process Steps
   ========================================================================== */

.process-step {
  text-align: center;
  padding: 32px 24px;
  position: relative;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
  height: 100%;
  box-sizing: border-box;
}

.process-step:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.process-step-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  color: #fff;
  margin: 0 auto 20px;
  position: relative;
}

.process-step-circle svg {
  width: 26px;
  height: 26px;
  stroke: #fff;
}

.process-step--1 .process-step-circle { background: var(--color-primary); }
.process-step--2 .process-step-circle { background: var(--color-secondary); }
.process-step--3 .process-step-circle { background: var(--color-accent); }
.process-step--3 .process-step-circle svg { stroke: #1a1a1a; }

.process-step-num {
  font-family: Poppins, sans-serif;
  font-weight: 800;
  font-size: 48px;
  color: var(--color-text);
  opacity: 0.06;
  margin-top: 16px;
  line-height: 1;
  user-select: none;
}

/* Desktop: connector line between step cards */
@media (min-width: 769px) {
  .process-step::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -18px;
    width: 36px;
    height: 2px;
    background: var(--color-gradient);
    transform: translateY(-50%);
    border-radius: 1px;
  }
  .process-step--3::after {
    display: none;
  }
}

.process-step h3 {
  font-family: Poppins, sans-serif;
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 8px;
  color: var(--color-text);
}

.process-step p {
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.6;
  max-width: 260px;
  margin: 0 auto;
}

/* Connector line between steps */
.process-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 28px;
}

.process-connector svg {
  width: 32px;
  height: 32px;
  color: var(--color-text-muted);
  opacity: 0.4;
}

@media (max-width: 768px) {
  .process-connector {
    display: none;
  }

  .process-step {
    padding: 20px 16px;
  }
}

/* Equal Height: handled via JS equalizeHeight() in functions.php */

/* ==========================================================================
   WordPress Section
   ========================================================================== */

.wp-feature {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--glass-border);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
  box-sizing: border-box;
}

.wp-feature:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.wp-feature-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: 20px;
}

.wp-feature h4 {
  font-family: Poppins, sans-serif;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 4px;
  color: var(--color-text);
}

.wp-feature p {
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

/* ==========================================================================
   Buttons (Global)
   ========================================================================== */

.btn-primary {
  display: inline-block;
  padding: 14px 32px;
  background: var(--color-accent);
  color: #1a1a1a !important;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none !important;
  transition: transform var(--transition), box-shadow var(--transition);
  border: none;
  cursor: pointer;
}

.btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: var(--shadow-md), 0 0 20px rgba(var(--color-accent-rgb), 0.2);
  letter-spacing: 0.3px;
}

.btn-outline {
  display: inline-block;
  padding: 14px 32px;
  background: transparent;
  color: #fff !important;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none !important;
  transition: transform var(--transition), background var(--transition), border-color var(--transition);
  cursor: pointer;
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: #fff;
  transform: translateY(-2px);
}

/* ==========================================================================
   Profile Image (Legacy fallback)
   ========================================================================== */

.profile-img {
  width: 140px;
  height: 140px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 4px solid var(--color-primary);
  box-shadow: var(--shadow-md);
  margin: 0 auto 20px;
  display: block;
}

/* ==========================================================================
   Section Helpers
   ========================================================================== */

.section-surface {
  background-color: var(--color-surface) !important;
}

.section-bg {
  background-color: var(--color-bg) !important;
}

/* ==========================================================================
   Header & Footer Cleanup
   ========================================================================== */

#Top_bar .logo img {
  display: none !important;
}

#Top_bar .logo h1,
#Top_bar .logo a {
  font-family: Poppins, sans-serif !important;
  font-weight: 800 !important;
  font-size: 24px !important;
  background: var(--color-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

#Top_bar .action_button,
.header-action-button,
#Top_bar .top_bar_right .action_button {
  display: none !important;
}

#Footer .widgets_wrapper {
  display: none !important;
}

#Footer .footer_copy .one {
  visibility: hidden;
}

#Footer .footer_copy .one::after {
  content: '\00A9 2026 TrueUmut \2013 Handgemacht mit Liebe';
  visibility: visible;
  display: block;
  color: var(--color-text-muted);
  font-size: 13px;
}

#Content {
  padding-top: 0 !important;
}

.the_content_wrapper {
  max-width: 100% !important;
  padding: 0 !important;
}

.page .sections_group {
  padding: 0 !important;
}

/* Hide empty BeTheme default sections (page-pager, empty the_content_wrapper) */
.section > .section_wrapper > .the_content_wrapper:empty {
  display: none;
}

.section:has(> .section_wrapper > .the_content_wrapper:empty):not(:has(.mcb-wrap)) {
  display: none !important;
}

.page-pager {
  display: none !important;
}

.section:has(.page-pager) {
  display: none !important;
}

/* ==========================================================================
   FAQ Accordion
   ========================================================================== */

.faq-container {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq-item:hover {
  border-color: rgba(var(--color-primary-rgb), 0.2);
  box-shadow: 0 4px 20px rgba(var(--color-primary-rgb), 0.06);
  transform: translateY(-1px);
}

.faq-item.faq-open {
  background: var(--glass-bg);
  border-color: rgba(var(--color-primary-rgb), 0.3);
  box-shadow: 0 4px 24px rgba(var(--color-primary-rgb), 0.08);
}

[data-theme="dark"] .faq-item {
  background: rgba(30, 30, 46, 0.6);
  border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .faq-item:hover {
  background: rgba(30, 30, 46, 0.8);
  border-color: rgba(108, 99, 255, 0.2);
}

[data-theme="dark"] .faq-item.faq-open {
  background: rgba(30, 30, 46, 0.8);
  border-color: rgba(108, 99, 255, 0.3);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px 24px;
  border: none !important;
  background: transparent !important;
  cursor: pointer;
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--color-text) !important;
  text-align: left;
  gap: 16px;
  transition: color 0.2s ease;
  border-radius: var(--radius-md) !important;
}

.faq-question:hover {
  color: var(--color-primary) !important;
  background: transparent !important;
}

.faq-question:focus,
.faq-question:active {
  background: transparent !important;
  outline: none;
}

.faq-chevron {
  flex-shrink: 0;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--color-text-muted);
  width: 20px;
  height: 20px;
  background: rgba(var(--color-primary-rgb), 0.08);
  border-radius: 50%;
  padding: 4px;
  box-sizing: content-box;
}

.faq-open .faq-chevron {
  transform: rotate(180deg);
  color: var(--color-primary);
  background: rgba(var(--color-primary-rgb), 0.15);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-answer-inner {
  padding: 0 24px 20px;
  color: var(--color-text-muted);
  line-height: 1.8;
  font-size: 15px;
}

/* ==========================================================================
   Portfolio Grid
   ========================================================================== */

/* Portfolio Swiper with edge fade overlays */
.portfolio-swiper {
  overflow: hidden;
  padding: 8px 0 24px;
  position: relative;
  /* Break out of section_wrapper, ~80% viewport */
  width: 80vw;
  margin-left: calc(-40vw + 50%);
}
.portfolio-swiper::before,
.portfolio-swiper::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 180px;
  z-index: 10;
  pointer-events: none;
}
.portfolio-swiper::before {
  left: 0;
  background: linear-gradient(to right, var(--color-bg) 0%, var(--color-bg) 15%, transparent 100%);
}
.portfolio-swiper::after {
  right: 0;
  background: linear-gradient(to left, var(--color-bg) 0%, var(--color-bg) 15%, transparent 100%);
}
.portfolio-swiper .swiper-wrapper {
  transition-timing-function: linear !important;
}
.portfolio-slide {
  width: min(380px, 85vw) !important;
  flex-shrink: 0;
  height: auto !important;
}

.portfolio-swiper .swiper-wrapper {
  align-items: stretch;
}

.portfolio-slide .portfolio-card {
  height: 100%;
}

.portfolio-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow var(--transition), border-color var(--transition);
  position: relative;
  display: flex;
  flex-direction: column;
}

.portfolio-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(var(--color-primary-rgb), 0.3);
}

/* Subtle gradient overlay on hover */
.portfolio-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(var(--color-primary-rgb), 0.03));
  opacity: 0;
  transition: opacity 0.4s ease;
  border-radius: inherit;
  z-index: 1;
  pointer-events: none;
}
.portfolio-card:hover::before {
  opacity: 1;
}

.portfolio-card .device-mockup {
  border-radius: 0;
  border: none;
  box-shadow: none;
  margin: 0;
}

.portfolio-card .device-mockup-screen {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.portfolio-card .device-mockup-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.portfolio-card .device-mockup-bar {
  display: none;
}

.portfolio-card-info {
  padding: 20px 24px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.portfolio-card-info p {
  flex: 1;
}

.portfolio-card-info .btn-live {
  margin-top: auto;
  align-self: flex-start;
}

.portfolio-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-primary);
  margin-bottom: 6px;
}

.portfolio-card-info h3 {
  font-family: Poppins, sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--color-text);
  margin-bottom: 6px;
}

.portfolio-card-info p {
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 12px;
}

/* CTA placeholder screen (same size as real screenshots) */
.portfolio-cta-screen {
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: var(--color-gradient) !important;
}

.portfolio-cta-content {
  text-align: center;
  color: #fff;
}

.portfolio-cta-content span {
  font-size: 40px;
  display: block;
  margin-bottom: 8px;
}

.portfolio-cta-content strong {
  font-family: Poppins, sans-serif;
  font-size: 18px;
  font-weight: 700;
}

.btn-live--sm {
  font-size: 13px;
  padding: 9px 22px;
  font-weight: 600;
  background: var(--color-gradient) !important;
  color: #fff !important;
  border-radius: 999px;
  box-shadow: 0 2px 12px rgba(var(--color-primary-rgb), 0.2) !important;
  display: inline-flex !important;
  width: auto !important;
}
.btn-live--sm::before {
  display: none !important;
}
.btn-live--sm:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 18px rgba(var(--color-primary-rgb), 0.3) !important;
}
.btn-live--sm .arrow {
  color: #fff;
}

.portfolio-placeholder-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  background: var(--color-gradient);
  position: relative;
}

.portfolio-placeholder-icon {
  font-size: 48px;
  margin-bottom: 8px;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.2));
}

.portfolio-placeholder-text {
  font-family: Poppins, sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #fff;
}

/* ==========================================================================
   Micro-Animations & Interactions
   ========================================================================== */

/* Service-Box Icon Pop on Reveal */
.service-box .service-icon {
  opacity: 0;
}
.service-box.revealed .service-icon {
  animation: icon-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.service-box.reveal-delay-2.revealed .service-icon { animation-delay: 0.1s; }
.service-box.reveal-delay-3.revealed .service-icon { animation-delay: 0.2s; }

/* Process Step Number – Pulse Ring */
.process-step-circle::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0;
}
.process-step.revealed .process-step-circle::after {
  animation: ring-pulse 0.8s ease-out 0.3s both;
}

/* Delivery Badge Hover Shake */
.delivery-badge {
  cursor: default;
}
.delivery-badge:hover {
  animation: gentle-shake 0.4s ease;
}

/* FAQ Chevron Spring */
/* Marquee Pill Hover – Glow + Lift */
.marquee-pill:hover {
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 4px 20px rgba(var(--color-primary-rgb), 0.15);
}

/* Portfolio Card – Image Zoom on Hover */
.portfolio-card .device-mockup-screen img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.portfolio-card:hover .device-mockup-screen img {
  transform: scale(1.05);
}

/* Stat Badges – Entrance Bounce */
.stat-badge {
  opacity: 0;
  transform: scale(0.5);
}
.reveal.revealed .stat-badge {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.reveal.revealed .stat-badge--projects { transition-delay: 0.4s; }
.reveal.revealed .stat-badge--passion { transition-delay: 0.6s; }

/* Button Shimmer Effect */
.btn-hero-primary, .btn-cta-whatsapp {
  position: relative;
  overflow: hidden;
}
.btn-hero-primary::after, .btn-cta-whatsapp::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  transition: none;
}
.btn-hero-primary:hover::after, .btn-cta-whatsapp:hover::after {
  animation: shimmer 0.8s ease-out;
}

/* Scroll Progress Bar – Gradient */
.scroll-progress {
  background: var(--color-gradient) !important;
}

/* WP Feature Cards – Hover Icon Lift */
.wp-feature:hover .wp-feature-icon {
  transform: scale(1.1) translateY(-2px);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ==========================================================================
   Bento Grid Override for Services
   ========================================================================== */

/* Bento Grid removed – using default BeTheme 3-column layout */

/* ==========================================================================
   Full-Width Numbers Section
   ========================================================================== */

.numbers-strip {
  display: flex;
  justify-content: center;
  gap: clamp(32px, 6vw, 80px);
  padding: 40px 20px;
}

.number-item {
  text-align: center;
}

.number-value {
  font-family: Poppins, sans-serif;
  font-weight: 800;
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: 1;
  background: var(--color-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.03em;
}

.number-label {
  font-size: 14px;
  color: var(--color-text-muted);
  margin-top: 8px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 600;
}

/* Horizontal Portfolio Scroll removed – using default BeTheme 3-column layout */

/* ==========================================================================
   Animated Service Icon Idles
   ========================================================================== */

/* Code lines typing animation */
@keyframes code-type {
  0%, 100% { stroke-dashoffset: 0; }
  50% { stroke-dashoffset: 18; }
}

.service-box--design .code-line {
  stroke-dasharray: 18;
  animation: code-type 3s ease-in-out infinite;
}
.service-box--design .code-line:nth-child(6) { animation-delay: 0.3s; }
.service-box--design .code-line:nth-child(7) { animation-delay: 0.6s; }

/* Map Pin bounce */
@keyframes pin-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.service-icon--animated-pin svg {
  animation: pin-bounce 2s ease-in-out infinite;
}

.pin-shadow {
  animation: pin-shadow-pulse 2s ease-in-out infinite;
}

@keyframes pin-shadow-pulse {
  0%, 100% { rx: 6; opacity: 0.15; }
  50% { rx: 4; opacity: 0.25; }
}

/* Brush swirl idle */
@keyframes brush-paint {
  0%, 100% { stroke-dashoffset: 0; opacity: 0.5; }
  50% { stroke-dashoffset: 8; opacity: 0.8; }
}

.brush-swirl {
  stroke-dasharray: 20;
  animation: brush-paint 4s ease-in-out infinite;
}

/* ==========================================================================
   2027: SVG Draw Animation (Service Icons)
   ========================================================================== */

.service-box .service-icon svg path,
.service-box .service-icon svg circle,
.service-box .service-icon svg rect {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  transition: stroke-dashoffset 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}

.service-box.revealed .service-icon svg path,
.service-box.revealed .service-icon svg circle,
.service-box.revealed .service-icon svg rect {
  stroke-dashoffset: 0;
}

.service-box.reveal-delay-2.revealed .service-icon svg * { transition-delay: 0.35s; }
.service-box.reveal-delay-3.revealed .service-icon svg * { transition-delay: 0.5s; }

/* Marquee Soft Fade: defined on .marquee-swiper above */

/* ==========================================================================
   2027: Portfolio Cards 3D Perspective Reveal
   ========================================================================== */

.portfolio-card.reveal {
  opacity: 0;
  transform: perspective(800px) rotateX(8deg) translateY(40px);
  transform-origin: bottom center;
}

.portfolio-card.reveal.revealed {
  opacity: 1;
  transform: perspective(800px) rotateX(0) translateY(0);
  transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.portfolio-card.reveal-delay-2 { transition-delay: 0.15s; }
.portfolio-card.reveal-delay-3 { transition-delay: 0.3s; }

/* ==========================================================================
   2027: CTA Floating Particles (CSS-only)
   ========================================================================== */

.cta-section::after {
  content: '';
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  top: 20%;
  left: 10%;
  animation: float 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

.cta-section .section_wrapper::before {
  content: '';
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  bottom: 15%;
  right: 8%;
  animation: float-delay 7s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

/* ==========================================================================
   2027: About Section – Profile Hover Glow
   ========================================================================== */

.profile-ring-container:hover .profile-ring {
  filter: drop-shadow(0 0 12px rgba(var(--color-primary-rgb), 0.4));
  animation-duration: 2s;
}

.profile-ring-container:hover .profile-img {
  transform: scale(1.05);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ==========================================================================
   2027: Footer Heart Pulse
   ========================================================================== */

@keyframes heart-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

#Footer .footer_copy .one::after {
  /* The heart emoji in the pseudo-content pulses via animation on the whole element */
}

/* Process Steps hover polish (merged into main .process-step block) */
.process-step:hover .process-step-number {
  transform: scale(1.1);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 20px rgba(var(--color-primary-rgb), 0.2);
}

/* ==========================================================================
   2027: WP Features – Staggered Border Accent
   ========================================================================== */

.wp-feature {
  border-left: 3px solid transparent;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.wp-feature:nth-child(1) { border-left-color: var(--color-primary); }
.wp-feature:nth-child(2) { border-left-color: var(--color-secondary); }
.wp-feature:nth-child(3) { border-left-color: var(--color-accent); }

.wp-feature:hover {
  border-left-width: 5px;
}

/* ==========================================================================
   2027: Kinetic Hero Typography
   ========================================================================== */

.hero-content h1 .word {
  display: inline-block;
  will-change: transform;
  background: inherit;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: inherit;
}

@supports (animation-timeline: scroll()) {
  @keyframes word-drift {
    from { transform: translateY(0) translateX(0); opacity: 1; }
    to { transform: translateY(calc(var(--dy, 40) * 1px)) translateX(calc(var(--dx, 0) * 1px)); opacity: 0.2; }
  }

  .hero-content h1 .word {
    animation: word-drift linear both;
    animation-timeline: scroll();
    animation-range: 15vh 60vh;
  }
  .hero-content h1 .word:nth-child(odd) { --dy: 50; --dx: -12; }
  .hero-content h1 .word:nth-child(even) { --dy: 35; --dx: 16; }
  .hero-content h1 .word:nth-child(3n) { --dy: 60; --dx: -6; }
}

/* ==========================================================================
   2027: Scroll-Driven Animations
   ========================================================================== */

@supports (animation-timeline: view()) {
  @keyframes scroll-reveal {
    from { opacity: 0; transform: translateY(40px) scale(0.97); filter: blur(3px); }
    to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  }

  .reveal {
    transition: none;
    animation: scroll-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
  }

  .reveal.revealed { /* scroll animation handles it */ }

  /* Stagger for service boxes */
  .service-box.reveal-delay-2 { animation-range: entry 5% entry 40%; }
  .service-box.reveal-delay-3 { animation-range: entry 10% entry 45%; }

  /* Section headings slide from left */
  @keyframes heading-drift {
    from { transform: translateX(-20px); opacity: 0.4; }
    to { transform: translateX(0); opacity: 1; }
  }

  .reveal > h2,
  .about-text h2 {
    animation: heading-drift linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }
}

/* ==========================================================================
   2027: Tactile Buttons (Elastic Press + Fill Wipe)
   ========================================================================== */

/* Directional fill wipe on hover (replaces shimmer) */
.btn-hero-primary::after,
.btn-cta-whatsapp::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.12);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 0;
  border-radius: inherit;
}

.btn-hero-primary:hover::after,
.btn-cta-whatsapp:hover::after {
  transform: scaleX(1);
}

/* Elastic press */
.btn-hero:active,
.btn-cta-whatsapp:active,
.btn-live:active {
  transform: scale(0.94) translateY(1px) !important;
  transition-duration: 0.08s !important;
}

/* CTA WhatsApp breathing glow */
@keyframes btn-breathe {
  0%, 100% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.2); }
  50% { box-shadow: 0 4px 30px rgba(37, 211, 102, 0.45); }
}

.btn-cta-whatsapp {
  animation: btn-breathe 3s ease-in-out infinite;
}

/* Hero primary button stronger hover */
.btn-hero-primary:hover {
  box-shadow: 0 12px 40px rgba(108, 99, 255, 0.2);
}

/* ==========================================================================
   2027: Section Flow Transitions
   ========================================================================== */

/* Gradient bleed between alternating sections */
.section-surface {
  position: relative;
}

.section-surface::before {
  content: '';
  position: absolute;
  top: -60px;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to bottom, var(--color-bg), var(--color-surface));
  pointer-events: none;
  z-index: 0;
}

.section-bg + .section-bg {
  /* Same bg – no divider needed */
}

/* ==========================================================================
   Light Mode Visual Polish
   ========================================================================== */

/* Subtle dot pattern on light mode section backgrounds */
:root:not([data-theme="dark"]) .section-bg {
  position: relative;
}

:root:not([data-theme="dark"]) .section-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(108, 99, 255, 0.02) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}

/* Section heading gradient underline accent */
.reveal > h2::after,
.about-text h2::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: var(--color-gradient);
  border-radius: 2px;
  margin: 12px auto 0;
}

.about-text h2::after {
  margin-left: 0;
}

/* Service boxes – stronger shadow in light mode */
:root:not([data-theme="dark"]) .service-box {
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
}

/* Marquee pills – visible in light mode */
:root:not([data-theme="dark"]) .marquee-pill {
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
  background: rgba(255, 255, 255, 0.9);
}

/* FAQ items – clean minimal style */

/* Portfolio cards – more depth in light mode */
:root:not([data-theme="dark"]) .portfolio-card {
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
}

/* CTA section grain overlay */
.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.06;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  z-index: 0;
}

.cta-section > * {
  position: relative;
  z-index: 1;
}

/* WP Feature icons – colored backgrounds */
:root:not([data-theme="dark"]) .wp-feature {
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.05);
}

.wp-feature-icon {
  background: rgba(108, 99, 255, 0.08);
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   Desktop Section Spacing (harmonize BeTheme inline paddings)
   ========================================================================== */

.sections_group .section {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}

/* Light Mode: alternating warm section backgrounds */
:root:not([data-theme="dark"]) .sections_group .section.section-bg:nth-of-type(even) {
  background-color: #F0EFE9 !important;
}

/* Hero: no extra padding */
.sections_group .section.hero-section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Wave-divider sections (legacy): collapse */
.sections_group .section:has(.wave-divider) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Marquee: tighter padding */
.sections_group .section:has(.marquee-swiper) {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

/* ==========================================================================
   Dark Mode: Glass Top-Highlight (blitzit-style)
   ========================================================================== */

[data-theme="dark"] .service-box,
[data-theme="dark"] .portfolio-card,
[data-theme="dark"] .wp-feature,
[data-theme="dark"] .process-step {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--shadow-sm);
}

/* Delivery Badge: gradient ring */
.delivery-badge {
  position: relative;
}
.delivery-badge::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: var(--color-gradient);
  opacity: 0.12;
  z-index: -1;
}

/* ==========================================================================
   Pricing Section – Native BeBuilder pricing_item Overrides
   ========================================================================== */

/* Reset BeTheme defaults that clash with our design */
.pricing-section .mcb-column-inner,
.pricing-section .mcb-item-pricing_item-inner {
  background: transparent !important;
}
.pricing-section .pricing-box {
  background: none;
  border: none;
  box-shadow: none;
  margin: 0;
}
.pricing-section .pricing-box .plan-header {
  border: none;
  padding: 0;
  margin-bottom: 8px;
}
.pricing-section .pricing-box .plan-header .price {
  border: none;
  margin: 0;
  padding: 0;
}
.pricing-section .pricing-box .plan-header hr.hr_color {
  display: none;
}
.pricing-section .pricing-box .plan-inside {
  border: none;
  padding: 0;
  margin: 0 0 24px;
}
.pricing-section .pricing-box .plan-footer {
  border: none;
  padding: 0;
  margin-top: auto;
}

/* Desktop: equal-height cards via flex on wrap level */
.pricing-section .mcb-section-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.pricing-section .mcb-wrap-inner {
  height: 100%;
}
.pricing-section .pricing_item {
  height: 100%;
}

/* ---- Card: Glassmorphism (matches service-box, wp-feature, etc.) ---- */
.pricing-section .pricing-box {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  text-align: center;
  position: relative;
  overflow: visible;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.pricing-section .pricing-box:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* ---- Featured card (Business) – animated glow border ---- */
/* glow-spin replaced by GPU-friendly spin-border (defined above) */

.pricing-section .pricing-box.pricing-box-featured,
.pricing-section .pricing-box-box.pricing-box-featured {
  transform: scale(1.04);
  z-index: 1;
  border: 2px solid transparent !important;
  background: var(--glass-bg) !important;
  color: var(--color-text) !important;
}
/* Force all featured card text colors back (BeTheme sets white on blue bg) */
.pricing-section .pricing-box.pricing-box-featured .title,
.pricing-section .pricing-box.pricing-box-featured .plan-header .price > span {
  color: var(--color-text) !important;
}
.pricing-section .pricing-box.pricing-box-featured .subtitle,
.pricing-section .pricing-box.pricing-box-featured .subtitle big {
  color: var(--color-text-muted) !important;
}
.pricing-section .pricing-box.pricing-box-featured .plan-inside ul li {
  color: var(--color-text) !important;
}
/* "Beliebt" badge */
.pricing-section .pricing-box.pricing-box-featured::after {
  content: 'Beliebt';
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-gradient);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 20px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
  z-index: 2;
}
.pricing-section .pricing-box.pricing-box-featured::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary), var(--color-accent));
  z-index: -1;
  opacity: 0.6;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 2px;
}
.pricing-section .pricing-box.pricing-box-featured:hover {
  transform: scale(1.04) translateY(-4px);
  box-shadow: 0 0 40px rgba(var(--color-primary-rgb), 0.15), var(--shadow-lg);
}

/* ---- Typography ---- */
.pricing-section .pricing-box .title {
  font-family: Poppins, sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--color-text);
  margin-bottom: 8px;
}
.pricing-section .pricing-box .plan-header .price {
  font-family: Poppins, sans-serif !important;
  font-weight: 800;
  margin: 4px 0 12px;
}
.pricing-section .pricing-box .plan-header .price > span {
  font-size: clamp(2rem, 4vw, 2.8rem) !important;
  line-height: 1.2 !important;
  color: var(--color-text);
}
.pricing-section .pricing-box .plan-header .price sup.currency,
.pricing-section .pricing-box .plan-header .price sup.period {
  background: var(--color-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: var(--color-primary);
}
.pricing-section .pricing-box .subtitle {
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.6;
}

/* ---- Feature list ---- */
.pricing-section .pricing-box .plan-inside ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0;
  text-align: left;
  flex: 1;
}
.pricing-section .pricing-box .plan-inside ul li {
  padding: 8px 0;
  color: var(--color-text);
  font-size: 14px;
  border-bottom: 1px solid var(--glass-border);
  list-style: none !important;
}
.pricing-section .pricing-box .plan-inside ul li::before {
  content: '\2713';
  margin-right: 8px;
  color: var(--color-primary);
  font-weight: 600;
}
.pricing-section .pricing-box .plan-inside ul li:last-child {
  border-bottom: none;
}

/* ---- Button ---- */
.pricing-section .pricing-box .plan-footer .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 32px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 15px;
  color: var(--color-text);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  transition: all 0.3s ease;
  text-decoration: none;
}
.pricing-section .pricing-box .plan-footer .button:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-2px);
}
/* Featured button: gradient fill */
.pricing-section .pricing-box.pricing-box-featured .plan-footer .button {
  background: var(--color-gradient);
  color: #fff;
  border-color: transparent;
}
.pricing-section .pricing-box.pricing-box-featured .plan-footer .button:hover {
  box-shadow: 0 4px 20px rgba(var(--color-primary-rgb), 0.3);
  color: #fff;
}

/* ---- Dark mode ---- */
/* Dark mode: nuke ALL BeTheme backgrounds in pricing */
[data-theme="dark"] .pricing-section .mcb-column-inner,
[data-theme="dark"] .pricing-section .mcb-item-pricing_item-inner,
[data-theme="dark"] .pricing-section .mcb-wrap-inner {
  background: transparent !important;
}
[data-theme="dark"] .pricing-section .pricing-box,
[data-theme="dark"] .pricing-section .pricing-box.pricing-box-box {
  background: rgba(30, 30, 46, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
[data-theme="dark"] .pricing-section .pricing-box .plan-header .price > span {
  color: var(--color-text) !important;
}
[data-theme="dark"] .pricing-section .pricing-box .plan-header .price sup.currency,
[data-theme="dark"] .pricing-section .pricing-box .plan-header .price sup.period {
  color: var(--color-primary) !important;
  -webkit-text-fill-color: transparent;
}
[data-theme="dark"] .pricing-section .pricing-box.pricing-box-featured,
[data-theme="dark"] .pricing-section .pricing-box-box.pricing-box-featured {
  background: rgba(30, 30, 46, 0.8) !important;
  box-shadow: 0 0 30px rgba(108, 99, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
[data-theme="dark"] .pricing-section .pricing-box.pricing-box-featured .title,
[data-theme="dark"] .pricing-section .pricing-box.pricing-box-featured .plan-header .price > span {
  color: var(--color-text) !important;
}
[data-theme="dark"] .pricing-section .pricing-box.pricing-box-featured .subtitle,
[data-theme="dark"] .pricing-section .pricing-box.pricing-box-featured .subtitle big {
  color: var(--color-text-muted) !important;
}
[data-theme="dark"] .pricing-section .pricing-box .plan-footer .button {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--color-text);
}
[data-theme="dark"] .pricing-section .pricing-box .plan-footer .button:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
[data-theme="dark"] .pricing-section .pricing-box.pricing-box-featured .plan-footer .button {
  background: var(--color-gradient);
  color: #fff;
  border-color: transparent;
}

/* ---- Mobile Swiper ---- */

/* Swiper container: hidden on desktop (JS creates it on mobile) */
.pricing-swiper-mobile {
  display: none;
}

/* Pagination dots */
.pricing-pagination {
  text-align: center;
  margin-top: 24px;
  display: none;
}
.pricing-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: var(--color-text-muted);
  opacity: 0.3;
  margin: 0 5px;
  border-radius: 50%;
  cursor: pointer;
  transition: opacity 0.3s ease, background 0.3s ease, transform 0.3s ease;
}
.pricing-pagination .swiper-pagination-bullet-active {
  opacity: 1;
  background: var(--color-primary);
  transform: scale(1.2);
}

@media (max-width: 960px) {
  /* Hide only the 1/3 pricing wraps, NOT the header wrap */
  .pricing-section .mcb-wrap.one-third {
    display: none !important;
  }
  .pricing-swiper-mobile {
    display: block;
    overflow: visible;
    width: 100%;
    padding: 16px 0 8px;
  }
  .pricing-swiper-mobile .swiper-wrapper {
    align-items: stretch;
  }
  .pricing-swiper-mobile .swiper-slide {
    width: 85vw;
    max-width: 340px;
    height: auto !important;
  }
  .pricing-swiper-mobile .swiper-slide .pricing-box {
    height: auto;
    min-height: 100%;
    padding: 28px 20px;
    overflow: visible;
  }
  .pricing-swiper-mobile .pricing-box.pricing-box-featured {
    transform: none;
  }
  .pricing-swiper-mobile .pricing-box.pricing-box-featured::before {
    display: none;
  }
  .pricing-pagination {
    display: block;
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
  .dark-mode-toggle {
    bottom: 16px;
    right: 16px;
    width: 48px;
    height: 48px;
  }

  .linktree-btn {
    padding: 14px 18px;
    font-size: 15px;
  }

  .service-box {
    padding: 28px 18px;
  }

  .profile-ring-container {
    width: 140px;
    height: 140px;
  }

  .profile-ring {
    width: 152px;
    height: 152px;
  }

  .profile-ring-container .profile-img {
    width: 140px;
    height: 140px;
  }

  .stat-badge {
    font-size: 11px;
    padding: 6px 10px;
  }

  .stat-badge--projects { right: -20px; }
  .stat-badge--passion { left: -20px; }

  .hero-section {
    min-height: 100svh;
  }

  .device-mockup {
    max-width: 100%;
  }

  /* Text-reveal: use fade instead of clip-path on mobile to avoid whitespace */
  .text-reveal {
    clip-path: none;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  .text-reveal.revealed {
    clip-path: none;
    opacity: 1;
    transform: translateY(0);
  }

  /* Tighter section spacing on mobile */
  .sections_group .section {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  /* Wave-divider sections: no extra padding */
  .sections_group .section:has(.wave-divider) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Hero needs no extra padding (has own layout) */
  .sections_group .section.hero-section {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Wave SVG smaller on mobile */
  .wave-divider svg {
    min-height: 24px;
    max-height: 60px;
  }

  /* Delivery badge compact */
  .delivery-badge {
    padding: 12px 20px;
    font-size: clamp(1.2rem, 4vw, 1.6rem);
  }

  /* WP features stack better */
  .wp-feature {
    padding: 16px;
  }

  /* Marquee pills slightly smaller */
  .marquee-pill {
    padding: 8px 18px;
    font-size: 13px;
  }

  /* FAQ compact */
  .faq-question {
    padding: 16px 20px;
    font-size: 15px;
  }

  .faq-answer-inner {
    padding: 0 20px 16px;
    font-size: 14px;
  }

  /* Portfolio cards */
  .portfolio-card-info {
    padding: 18px;
  }

  .portfolio-placeholder-screen {
    min-height: 180px;
  }

  /* Portfolio Swiper: adjust breakout + edge fades for mobile */
  .portfolio-swiper {
    width: 96vw;
    margin-left: calc(-48vw + 50%);
  }
  .portfolio-swiper::before,
  .portfolio-swiper::after {
    width: 40px;
  }
  .portfolio-swiper::before {
    background: linear-gradient(to right, var(--color-bg), transparent);
  }
  .portfolio-swiper::after {
    background: linear-gradient(to left, var(--color-bg), transparent);
  }

  /* Marquee edge fades smaller on mobile */
  .marquee-swiper::before,
  .marquee-swiper::after {
    width: 48px;
  }

  /* === Mobile Optimierungen === */

  /* Numbers strip: stack vertically on mobile */
  .numbers-strip {
    flex-wrap: wrap;
    gap: 24px 40px;
    padding: 32px 16px;
  }

  .number-value {
    font-size: clamp(2.5rem, 12vw, 3.5rem);
  }

  /* Hero: more side padding, better spacing */
  .hero-content {
    padding: 32px 20px;
  }

  .hero-content h1 {
    font-size: clamp(2rem, 8vw, 3rem);
    line-height: 1.15;
  }

  .hero-typing-wrapper {
    font-size: clamp(1rem, 4vw, 1.3rem);
    min-height: 2em;
  }

  .hero-content p.hero-intro {
    font-size: 0.95rem;
    margin-bottom: 24px;
  }

  .hero-eyebrow {
    font-size: 12px;
    letter-spacing: 1.5px;
  }

  /* Social proof: tighter on mobile */
  .social-proof {
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 8px;
  }

  .social-proof-text {
    font-size: 13px;
  }

  .social-proof-avatars img {
    width: 30px;
    height: 30px;
  }

  /* Theme picker: slightly smaller on mobile */
  .theme-picker {
    bottom: 16px;
    right: 16px;
  }

  .theme-picker-btn {
    width: 46px;
    height: 46px;
    font-size: 20px;
  }

  .theme-picker-popup {
    bottom: 56px;
    min-width: 140px;
  }

  .theme-option {
    padding: 8px 12px;
    font-size: 13px;
  }

  /* Process steps: tighter card spacing */
  .process-step {
    padding: 20px 16px;
  }

  .process-step-circle {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
  }

  .process-step-circle svg {
    width: 22px;
    height: 22px;
  }

  .process-step-num {
    font-size: 36px;
    margin-top: 12px;
  }

  /* Delivery badge: full-width on small screens */
  .delivery-badge {
    width: 100%;
    justify-content: center;
  }

  /* Service box headings: smaller */
  .service-box h3 {
    font-size: 18px;
  }

  .service-box p {
    font-size: 14px;
  }

  /* About section: center text */
  .about-text {
    text-align: center;
  }

  .about-text h2 {
    font-size: clamp(1.4rem, 5vw, 1.8rem);
  }

  .about-text h2::after {
    margin-left: auto;
    margin-right: auto;
  }

  /* CTA section: tighter */
  .cta-section h2 {
    font-size: clamp(1.6rem, 6vw, 2.2rem);
  }

  .btn-cta-whatsapp {
    padding: 14px 28px;
    font-size: 15px;
    width: 100%;
    justify-content: center;
  }

  /* Scroll indicator: smaller */
  .scroll-indicator svg {
    width: 26px;
    height: 26px;
  }

  /* WP features: tighter icon */
  .wp-feature-icon {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }

  /* Testimonials: smaller padding */
  .testimonial-card {
    padding: 24px;
  }

  .testimonial-quote {
    font-size: 14px;
  }

  /* Nb-grid (Projekte page): full-width cards */
  .nb-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .nb-card-body h3 {
    font-size: 20px;
  }

  /* Achievement toast: wider on mobile */
  .achievement-toast {
    right: 12px;
    left: 12px;
    bottom: 72px;
    text-align: center;
  }

  /* Section heading underline: centered on mobile */
  .reveal > h2::after {
    margin-left: auto;
    margin-right: auto;
  }

}

@media (max-width: 480px) {
  .hero-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-buttons .btn-hero {
    justify-content: center;
    padding: 14px 24px;
    font-size: 15px;
  }

  .toggle-star {
    display: none;
  }

  /* Numbers strip: single column on very small screens */
  .numbers-strip {
    flex-direction: column;
    gap: 20px;
    align-items: center;
  }

  .number-value {
    font-size: clamp(2rem, 15vw, 3rem);
  }

  /* Hero: even tighter */
  .hero-content h1 {
    font-size: clamp(1.8rem, 9vw, 2.5rem);
  }

  .hero-typing-wrapper {
    font-size: clamp(0.9rem, 4.5vw, 1.2rem);
  }

  /* Social proof: stack avatars and text */
  .social-proof {
    flex-direction: column;
    gap: 6px;
  }

  /* Process step connector: hide completely */
  .process-step::after {
    display: none !important;
  }

  /* Service icon: smaller */
  .service-box .service-icon {
    width: 60px;
    height: 60px;
    font-size: 40px;
  }

  .service-box .service-icon svg {
    width: 30px;
    height: 30px;
  }

  /* Theme chooser grid: 2x2 */
  .theme-chooser-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .theme-chooser-card {
    padding: 16px 10px 12px;
  }

  .theme-chooser-icon {
    font-size: 24px;
  }

  .theme-chooser-title {
    font-size: clamp(1.4rem, 5vw, 2rem);
  }

  .theme-chooser-inner {
    padding: 32px 20px;
  }
}

/* ==========================================================================
   Gradient Word (Hero Accent)
   ========================================================================== */

.gradient-word {
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary), var(--color-accent));
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 4s ease infinite;
}

/* ==========================================================================
   Social Proof (Hero)
   ========================================================================== */

.social-proof {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 24px 0 8px;
}

.social-proof-avatars {
  display: flex;
}

.social-proof-avatars img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--color-surface);
  margin-left: -10px;
  object-fit: cover;
}
.social-proof-avatars img:first-child { margin-left: 0; }

[data-theme="dark"] .social-proof-avatars img {
  border-color: var(--color-bg);
}

.social-proof-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-muted);
}

.social-proof-stars {
  color: var(--color-warning);
  letter-spacing: 1px;
}

/* ==========================================================================
   Testimonial Grid
   ========================================================================== */

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}

.testimonial-card {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 32px;
  text-align: left;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative;
}

.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(var(--color-primary-rgb), 0.2);
}

.testimonial-card--featured {
  grid-column: span 1;
  background: linear-gradient(135deg, rgba(108, 99, 255, 0.06), rgba(255, 101, 132, 0.06));
  border-color: rgba(var(--color-primary-rgb), 0.15);
}

[data-theme="dark"] .testimonial-card {
  background: rgba(30, 30, 46, 0.6);
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .testimonial-card--featured {
  background: linear-gradient(135deg, rgba(108, 99, 255, 0.12), rgba(255, 101, 132, 0.08));
}

[data-theme="dark"] .testimonial-card:hover {
  border-color: rgba(139, 131, 255, 0.3);
  box-shadow: 0 0 30px rgba(139, 131, 255, 0.08), var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.testimonial-stars {
  color: var(--color-warning);
  font-size: 16px;
  letter-spacing: 2px;
  margin-bottom: 16px;
}

.testimonial-quote {
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text);
  margin-bottom: 20px;
  font-style: italic;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.testimonial-author img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.testimonial-author strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.testimonial-author span {
  font-size: 12px;
  color: var(--color-text-muted);
}

@media (max-width: 768px) {
  .testimonial-grid {
    grid-template-columns: 1fr;
  }
}

/* (Old pricing-grid/pricing-card CSS removed – now using native BeBuilder pricing_item) */

/* ==========================================================================
   Gumroad-Style Project Cards (Projekte Page)
   ========================================================================== */

.nb-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  max-width: 1100px;
  margin: 0 auto;
}

.nb-card {
  background: var(--color-surface);
  border: 3px solid var(--color-text);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 5px 5px 0px var(--color-text);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}

.nb-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0px var(--color-text);
}

/* Accent stripe at top */
.nb-card-accent {
  height: 6px;
  flex-shrink: 0;
}
.nb-card--orange .nb-card-accent { background: var(--color-warning); }
.nb-card--green .nb-card-accent { background: var(--color-accent); }
.nb-card--purple .nb-card-accent { background: var(--color-primary); }
.nb-card--pink .nb-card-accent { background: var(--color-secondary); }

/* Screenshot area */
.nb-card-screen {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-bottom: 2px solid var(--color-text);
  position: relative;
}
.nb-card-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.nb-card:hover .nb-card-screen img {
  transform: scale(1.04);
}

/* Card body */
.nb-card-body {
  padding: 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Tag pill — Gumroad-style: filled background, rounded */
.nb-tag {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 20px;
  font-family: Poppins, sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 14px;
  width: fit-content;
}
.nb-card--orange .nb-tag { background: rgba(255, 179, 71, 0.15); color: var(--color-warning); }
.nb-card--green .nb-tag { background: rgba(67, 233, 123, 0.15); color: var(--color-accent); }
.nb-card--purple .nb-tag { background: rgba(108, 99, 255, 0.12); color: var(--color-primary); }
.nb-card--pink .nb-tag { background: rgba(255, 101, 132, 0.12); color: var(--color-secondary); }

/* Project title — bold like Gumroad */
.nb-card-body h3 {
  font-family: Poppins, sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: var(--color-text);
  margin: 0 0 10px;
}

/* Description */
.nb-card-body p {
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
}

/* Tech stack pills — Gumroad-style: subtle rounded pills */
.nb-tech-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 20px;
  list-style: none !important;
}
.nb-tech {
  padding: 5px 12px;
  border: 2px solid var(--glass-border);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  background: transparent;
  list-style: none !important;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.nb-card:hover .nb-tech {
  border-color: rgba(var(--color-primary-rgb), 0.3);
  color: var(--color-primary);
}

/* Live link — Gumroad-style: bold with arrow */
.nb-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: Poppins, sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--color-primary) !important;
  text-decoration: none !important;
  margin-top: 20px;
  transition: gap 0.3s ease;
}
.nb-link:hover {
  gap: 10px;
}
.nb-link .arrow {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.nb-link:hover .arrow {
  transform: translateX(4px);
}

/* CTA card (spans full width) — Gumroad-style: clean rounded */
.nb-cta {
  grid-column: 1 / -1;
  border: 3px dashed var(--color-primary);
  border-radius: 16px;
  padding: 48px 32px;
  text-align: center;
  box-shadow: 5px 5px 0px rgba(var(--color-primary-rgb), 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: var(--color-surface);
}
.nb-cta:hover {
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0px rgba(var(--color-primary-rgb), 0.25);
}
.nb-cta-icon {
  font-size: 52px;
  margin-bottom: 16px;
  display: block;
}
.nb-cta h3 {
  font-family: Poppins, sans-serif;
  font-weight: 800;
  font-size: 24px;
  color: var(--color-text);
  margin: 0 0 8px;
}
.nb-cta p {
  color: var(--color-text-muted);
  font-size: 16px;
  margin: 0 0 28px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* CTA Button — neubrutalism with offset shadow */
.nb-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 36px;
  background: var(--color-primary);
  color: #fff !important;
  border: 3px solid var(--color-text);
  border-radius: 12px;
  font-family: Poppins, sans-serif;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none !important;
  box-shadow: 4px 4px 0px var(--color-text);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}
.nb-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px var(--color-text);
}
.nb-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px var(--color-text);
}

/* Page header for projekte */
.nb-page-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}
.nb-page-header h1 {
  font-family: Poppins, sans-serif;
  font-weight: 800;
  font-size: clamp(2.2rem, 6vw, 3.5rem);
  color: var(--color-text);
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}
.nb-page-header p {
  color: var(--color-text-muted);
  font-size: 1.1rem;
  line-height: 1.7;
}
.nb-page-header .nb-underline {
  display: inline-block;
  width: 60px;
  height: 4px;
  background: var(--color-gradient);
  border-radius: 2px;
  margin-top: 16px;
}

/* Dark Mode */
[data-theme="dark"] .nb-card {
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 5px 5px 0px rgba(255, 255, 255, 0.07);
}
[data-theme="dark"] .nb-card:hover {
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 8px 8px 0px rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .nb-card-screen {
  border-bottom-color: rgba(255, 255, 255, 0.18);
}
[data-theme="dark"] .nb-tech {
  border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .nb-cta {
  border-color: var(--color-primary);
  box-shadow: 5px 5px 0px rgba(var(--color-primary-rgb), 0.2);
}
[data-theme="dark"] .nb-cta:hover {
  box-shadow: 8px 8px 0px rgba(var(--color-primary-rgb), 0.25);
}
[data-theme="dark"] .nb-btn {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 4px 4px 0px rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .nb-btn:hover {
  box-shadow: 6px 6px 0px rgba(255, 255, 255, 0.15);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nb-card {
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 5px 5px 0px rgba(255, 255, 255, 0.07);
  }
  :root:not([data-theme="light"]) .nb-card:hover {
    box-shadow: 8px 8px 0px rgba(255, 255, 255, 0.1);
  }
  :root:not([data-theme="light"]) .nb-card-screen {
    border-bottom-color: rgba(255, 255, 255, 0.18);
  }
  :root:not([data-theme="light"]) .nb-btn {
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 4px 4px 0px rgba(255, 255, 255, 0.1);
  }
}

/* Mobile */
@media (max-width: 768px) {
  .nb-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .nb-card-body {
    padding: 20px;
  }
  .nb-cta {
    padding: 32px 20px;
  }
  .nb-card {
    box-shadow: 4px 4px 0px var(--color-text);
  }
  .nb-card:hover {
    transform: none;
    box-shadow: 4px 4px 0px var(--color-text);
  }
  [data-theme="dark"] .nb-card {
    box-shadow: 4px 4px 0px rgba(255, 255, 255, 0.07);
  }
}

/* ============================================================================
   THEME-SPECIFIC SECTION STYLES (Clean & Professional)
   ============================================================================ */

/* --- SPACE: Dezente kosmische Akzente --- */
[data-hero-theme="space"] .section-bg {
  position: relative;
}

[data-hero-theme="space"] .section-bg::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(139, 131, 255, 0.25) 20%,
    rgba(255, 143, 163, 0.15) 50%,
    rgba(95, 255, 170, 0.2) 80%,
    transparent 100%);
  z-index: 2;
  pointer-events: none;
}

[data-hero-theme="space"] .service-box:hover {
  border-color: rgba(139, 131, 255, 0.2) !important;
  box-shadow: 0 8px 32px rgba(139, 131, 255, 0.08), var(--shadow-md) !important;
}

[data-hero-theme="space"] .process-step-circle {
  background: linear-gradient(135deg, #8B83FF 0%, #5FFFAA 50%, #FF8FA3 100%) !important;
  box-shadow: 0 4px 16px rgba(var(--color-primary-rgb), 0.25);
}

[data-hero-theme="space"] .process-step {
  border-color: rgba(139, 131, 255, 0.08) !important;
}

[data-hero-theme="space"] .btn-live--sm {
  background: linear-gradient(135deg, #8B83FF, #5FFFAA) !important;
  box-shadow: 0 2px 12px rgba(139, 131, 255, 0.2) !important;
}

[data-hero-theme="space"] .btn-live--sm:hover {
  box-shadow: 0 4px 20px rgba(139, 131, 255, 0.3) !important;
}

[data-hero-theme="space"] .testimonial-card {
  border-color: rgba(139, 131, 255, 0.08) !important;
}

[data-hero-theme="space"] .testimonial-card--featured {
  box-shadow: 0 4px 24px rgba(139, 131, 255, 0.08) !important;
}

[data-hero-theme="space"] .marquee-pill:hover {
  border-color: rgba(139, 131, 255, 0.2) !important;
}

[data-hero-theme="space"] .scroll-indicator svg polyline {
  stroke: rgba(139, 131, 255, 0.7);
}

[data-hero-theme="space"] #Footer { position: relative; }
[data-hero-theme="space"] #Footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139, 131, 255, 0.3) 30%, rgba(95, 255, 170, 0.2) 70%, transparent);
}

/* --- HAMBURG: Warme, nordische Akzente --- */
[data-hero-theme="hamburg"] .section-bg {
  position: relative;
}

[data-hero-theme="hamburg"] .section-bg::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(58, 124, 165, 0.2) 20%,
    rgba(123, 197, 214, 0.25) 50%,
    rgba(58, 124, 165, 0.2) 80%,
    transparent 100%);
  z-index: 2;
  pointer-events: none;
}

[data-hero-theme="hamburg"] .service-box:hover {
  border-color: rgba(58, 124, 165, 0.15) !important;
  box-shadow: 0 8px 32px rgba(58, 124, 165, 0.08), var(--shadow-md) !important;
}

[data-hero-theme="hamburg"] .process-step-circle {
  background: linear-gradient(135deg, #3A7CA5 0%, #7BC5D6 50%, #1A4E6E 100%) !important;
  box-shadow: 0 4px 16px rgba(58, 124, 165, 0.2);
}

[data-hero-theme="hamburg"] .process-step {
  border-color: rgba(58, 124, 165, 0.08) !important;
}

[data-hero-theme="hamburg"] .btn-live--sm {
  background: linear-gradient(135deg, #3A7CA5, #7BC5D6) !important;
  box-shadow: 0 2px 12px rgba(58, 124, 165, 0.15) !important;
}

[data-hero-theme="hamburg"] .btn-live--sm:hover {
  box-shadow: 0 4px 20px rgba(58, 124, 165, 0.25) !important;
}

[data-hero-theme="hamburg"] .testimonial-card {
  border-color: rgba(58, 124, 165, 0.08) !important;
}

[data-hero-theme="hamburg"] .marquee-pill:hover {
  border-color: rgba(58, 124, 165, 0.2) !important;
}

[data-hero-theme="hamburg"] .scroll-indicator svg polyline {
  stroke: rgba(58, 124, 165, 0.6);
}

[data-hero-theme="hamburg"] #Footer { position: relative; }
[data-hero-theme="hamburg"] #Footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(58, 124, 165, 0.25) 30%, rgba(200, 149, 108, 0.2) 70%, transparent);
}

/* --- DARK: Elegantes Glas & dezente Glows --- */
[data-hero-theme="dark"] .section-bg {
  position: relative;
}

[data-hero-theme="dark"] .section-bg::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(108, 99, 255, 0.2) 20%,
    rgba(255, 101, 132, 0.12) 50%,
    rgba(67, 233, 123, 0.15) 80%,
    transparent 100%);
  z-index: 2;
  pointer-events: none;
}

/* Glassmorphism on cards (this is good, keep it) */
[data-hero-theme="dark"] .service-box,
[data-hero-theme="dark"] .process-step,
[data-hero-theme="dark"] .testimonial-card,
[data-hero-theme="dark"] .portfolio-card,
[data-hero-theme="dark"] .wp-feature {
  background: rgba(30, 30, 46, 0.6) !important;
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Glass reflection highlight (subtle top edge) */
[data-hero-theme="dark"] .service-box::before,
[data-hero-theme="dark"] .testimonial-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent 10%, rgba(255, 255, 255, 0.08) 50%, transparent 90%);
  z-index: 1;
  pointer-events: none;
}

[data-hero-theme="dark"] .service-box:hover {
  border-color: rgba(139, 131, 255, 0.15) !important;
  box-shadow: 0 8px 32px rgba(108, 99, 255, 0.1), var(--shadow-md) !important;
}

[data-hero-theme="dark"] .process-step-circle {
  box-shadow: 0 4px 16px rgba(var(--color-primary-rgb), 0.3);
}

[data-hero-theme="dark"] .process-step {
  border-color: rgba(255, 255, 255, 0.04) !important;
}

[data-hero-theme="dark"] .btn-live--sm {
  background: linear-gradient(135deg, #8B83FF, #FF8FA3) !important;
  box-shadow: 0 2px 14px rgba(139, 131, 255, 0.2) !important;
}

[data-hero-theme="dark"] .btn-live--sm:hover {
  box-shadow: 0 4px 22px rgba(139, 131, 255, 0.35) !important;
}

[data-hero-theme="dark"] .testimonial-card {
  border-color: rgba(255, 255, 255, 0.04) !important;
}

[data-hero-theme="dark"] .testimonial-card--featured {
  box-shadow: 0 4px 24px rgba(108, 99, 255, 0.06) !important;
}

[data-hero-theme="dark"] .marquee-pill:hover {
  border-color: rgba(139, 131, 255, 0.15) !important;
}

[data-hero-theme="dark"] .scroll-indicator svg polyline {
  stroke: rgba(139, 131, 255, 0.7);
}

[data-hero-theme="dark"] #Footer { position: relative; }
[data-hero-theme="dark"] #Footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(108, 99, 255, 0.2) 30%, rgba(255, 101, 132, 0.15) 70%, transparent);
}

/* --- SPLASHES: Bunte Akzente, aber clean --- */
[data-hero-theme="splashes"] .section-bg,
:root:not([data-hero-theme]) .section-bg {
  position: relative;
}

[data-hero-theme="splashes"] .section-bg::after,
:root:not([data-hero-theme]) .section-bg::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(220, 30, 30, 0.3) 0%,
    rgba(0, 100, 220, 0.25) 25%,
    rgba(0, 180, 50, 0.25) 50%,
    rgba(255, 210, 0, 0.3) 75%,
    rgba(220, 30, 30, 0.2) 100%);
  z-index: 2;
  pointer-events: none;
}

[data-hero-theme="splashes"] .service-box:hover,
:root:not([data-hero-theme]) .service-box:hover {
  border-color: rgba(var(--color-primary-rgb), 0.2) !important;
  box-shadow: var(--shadow-lg) !important;
}

[data-hero-theme="splashes"] .btn-live--sm,
:root:not([data-hero-theme]) .btn-live--sm {
  background: linear-gradient(135deg, #FF6B6B, #FFB347) !important;
  box-shadow: 0 2px 10px rgba(255, 107, 107, 0.15) !important;
}

[data-hero-theme="splashes"] .btn-live--sm:hover,
:root:not([data-hero-theme]) .btn-live--sm:hover {
  box-shadow: 0 4px 18px rgba(255, 107, 107, 0.25) !important;
}

[data-hero-theme="splashes"] .marquee-pill:hover,
:root:not([data-hero-theme]) .marquee-pill:hover {
  border-color: rgba(var(--color-primary-rgb), 0.2) !important;
}

[data-hero-theme="splashes"] .scroll-indicator svg polyline,
:root:not([data-hero-theme]) .scroll-indicator svg polyline {
  stroke: var(--color-primary);
}

[data-hero-theme="splashes"] .profile-ring,
:root:not([data-hero-theme]) .profile-ring {
  border-color: var(--color-primary) !important;
}

[data-hero-theme="splashes"] #Footer,
:root:not([data-hero-theme]) #Footer { position: relative; }

[data-hero-theme="splashes"] #Footer::before,
:root:not([data-hero-theme]) #Footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg,
    rgba(220, 30, 30, 0.4),
    rgba(0, 100, 220, 0.3) 25%,
    rgba(0, 180, 50, 0.3) 50%,
    rgba(255, 210, 0, 0.4) 75%,
    rgba(220, 30, 30, 0.3));
}

/* --- Saubere Text-Akzent Unterstreichung (wie BePsychologist4) --- */
.text-accent {
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
  text-decoration-skip-ink: auto;
}

.text-accent--secondary {
  text-decoration-color: var(--color-secondary);
}

.text-accent--accent {
  text-decoration-color: var(--color-accent);
}