/*
 Theme Name:   Vison K Child Theme
 Theme URI:    https://vision.sascha-kohler.at
 Description:  Custom Child Theme for Vison K - Divi 5 Migration
 Author:       Vison Entfaltet
 Author URI:   https://vision.sascha-kohler.at
 Template:     Divi
 Version:      1.1.1
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  vison-k-child
*/

/* ============================================
   CSS VARIABLES - DESIGN SYSTEM
   ============================================ */

:root {
  /* === BRAND COLORS === */
  --color-background: #0a0a0a;
  --color-foreground: #ededed;
  --color-primary: #f59e0b; /* Amber - warme Hauptfarbe */
  --color-primary-light: #fbbf24; /* Hell-Amber */
  --color-secondary: #004e89;
  --color-accent: #f59e0b; /* Amber - warmer Akzent */
  --color-muted: #1a1a1a;
  --color-purple: #9b59b6;
  --color-orange: #f59e0b; /* Jetzt Amber statt Orange */

  /* === KLARE BRANDING COLORS === */
  --klare-k: #6366f1; /* K - Indigo */
  --klare-l: #8b5cf6; /* L - Violet */
  --klare-a: #ec4899; /* A - Pink */
  --klare-r: #f59e0b; /* R - Amber */
  --klare-e: #10b981; /* E - Emerald */

  /* === GRAYS === */
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;

  /* === SPACING === */
  --spacing-xs: 0.25rem; /* 4px */
  --spacing-sm: 0.5rem; /* 8px */
  --spacing-md: 1rem; /* 16px */
  --spacing-lg: 1.5rem; /* 24px */
  --spacing-xl: 2rem; /* 32px */
  --spacing-xxl: 3rem; /* 48px */
  --spacing-xxxl: 4rem; /* 64px */
  --spacing-xxxxl: 6rem; /* 96px */

  /* === TYPOGRAPHY === */
  --font-sans:
    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Courier New", Courier, monospace;

  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-base: 1rem; /* 16px */
  --text-lg: 1.125rem; /* 18px */
  --text-xl: 1.25rem; /* 20px */
  --text-xxl: 1.5rem; /* 24px */
  --text-xxxl: 1.875rem; /* 30px */
  --text-xxxxl: 2.25rem; /* 36px */
  --text-xxxxxl: 3rem; /* 48px */
  --text-xxxxxxl: 3.75rem; /* 60px */
  --text-xxxxxxxl: 4.5rem; /* 72px */

  /* === BORDER RADIUS === */
  --radius-sm: 0.375rem; /* 6px */
  --radius-md: 0.5rem; /* 8px */
  --radius-lg: 0.75rem; /* 12px */
  --radius-xl: 1rem; /* 16px */
  --radius-xxl: 1.5rem; /* 24px */
  --radius-xxxl: 2rem; /* 32px */
  --radius-full: 9999px;

  /* === SHADOWS === */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  --shadow-xxl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-primary: 0 10px 30px -5px rgba(245, 158, 11, 0.5); /* Amber Shadow */
  --shadow-accent: 0 10px 30px -5px rgba(245, 158, 11, 0.5); /* Amber Shadow */

  /* === TRANSITIONS === */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;
  --transition-all: all 300ms ease;

  /* === Z-INDEX === */
  --z-base: 1;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal: 1040;
  --z-popover: 1050;
  --z-tooltip: 1060;

  /* === GRADIENTS === */
  /* KLARE-Gradient: Warm (Amber zu Emerald) für Text */
  --gradient-klare-text: linear-gradient(
    135deg,
    var(--klare-k) 0%,
    #fbbf24 0%,
    var(--klare-e) 100%
  );

  /* Primary: Amber zu Hell-Amber */
  --gradient-primary: linear-gradient(to right, var(--klare-r), #fbbf24);

  /* Text Gradient: Amber zu Emerald - warm & einladend */
  --gradient-text: linear-gradient(
    135deg,
    var(--klare-r) 0%,
    #fbbf24 50%,
    var(--klare-e) 100%
  );

  --gradient-bg: linear-gradient(
    to bottom right,
    var(--color-background),
    #1a1a2e,
    var(--color-background)
  );
}

/* ============================================
   GLOBAL STYLES
   ============================================ */

body {
  font-family: var(--font-sans);
  background-color: var(--color-background);
  color: var(--color-foreground);
}

/* ============================================
   HEADER STYLES
   ============================================ */

.wk7-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-fixed);
  background: transparent;
  transition: all 0.3s ease;
}

.wk7-header.scrolled {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.wk7-header-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo with Initials Box */
.wk7-header-logo {
  flex-shrink: 0;
}

.wk7-logo-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  transition: var(--transition-base);
}

.wk7-logo-box {
  width: 40px;
  height: 40px;
  border-radius: 0.5rem;
  background: var(--klare-r);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: white;
  font-size: 1rem;
}

.wk7-logo-text-wrapper {
  display: flex;
  flex-direction: column;
}

.wk7-logo-name {
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.2;
  color: var(--color-foreground);
  transition: color 0.3s ease;
}

.wk7-logo-link:hover .wk7-logo-name {
  color: var(--color-primary);
}

.wk7-logo-subtitle {
  font-size: 0.75rem;
  color: var(--color-gray-400);
  line-height: 1;
}

.wk7-header-logo img {
  height: 40px;
  width: auto;
}

/* Desktop Navigation */
.wk7-header-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-left: auto;
}

.wk7-nav-menu {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wk7-nav-menu li {
  margin: 0;
  padding: 0;
}

/* Override desktop flex for mobile menu */
@media (max-width: 768px) {
  .wk7-mobile-nav .wk7-nav-menu,
  #wk7-mobile-nav .wk7-nav-menu {
    display: block !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  .wk7-mobile-nav .wk7-nav-menu li,
  #wk7-mobile-nav .wk7-nav-menu li {
    display: block !important;
    width: 100% !important;
  }
}

.wk7-nav-menu a {
  color: var(--color-foreground);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.875rem;
  transition: color 0.3s ease;
}

.wk7-nav-menu a:hover {
  color: var(--color-primary);
}

.wk7-nav-menu .current-menu-item a,
.wk7-nav-menu .current_page_item a {
  color: var(--color-primary);
}

/* CTA Button in Nav */
.wk7-nav-cta {
  padding: 0.5rem 1.5rem;
  background: var(--gradient-primary);
  color: white;
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: 0.5rem;
  text-decoration: none;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.wk7-nav-cta:hover {
  box-shadow: var(--shadow-primary);
  transform: translateY(-2px);
}

/* Mobile Toggle */
.wk7-mobile-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  color: var(--color-foreground);
  transition: color 0.3s ease;
}

.wk7-mobile-toggle:hover {
  color: var(--color-primary);
}

.wk7-menu-icon {
  display: block;
}

.wk7-close-icon {
  display: none;
}

.wk7-mobile-toggle.active .wk7-menu-icon {
  display: none;
}

.wk7-mobile-toggle.active .wk7-close-icon {
  display: block;
}

/* Mobile Navigation Dropdown */
.wk7-mobile-nav {
  display: none;
  background: rgba(10, 10, 10, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--z-dropdown);
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}

.wk7-mobile-nav.active {
  display: block;
  animation: slideDown 0.3s ease;
}

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

.wk7-mobile-nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.5rem;
}

/* Mobile Menu - Force Vertical Layout */
.wk7-mobile-nav .wk7-mobile-menu,
.wk7-mobile-nav ul.wk7-mobile-menu,
#wk7-mobile-nav .wk7-mobile-menu,
#wk7-mobile-nav ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  width: 100% !important;
  flex-direction: column !important;
}

.wk7-mobile-nav .wk7-mobile-menu li,
.wk7-mobile-nav ul.wk7-mobile-menu li,
#wk7-mobile-nav .wk7-mobile-menu li,
#wk7-mobile-nav ul li {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  display: block !important;
  float: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  clear: both !important;
}

.wk7-mobile-nav .wk7-mobile-menu li:last-child,
#wk7-mobile-nav ul li:last-child {
  border-bottom: none;
}

.wk7-mobile-nav .wk7-mobile-menu a,
.wk7-mobile-nav ul.wk7-mobile-menu a,
#wk7-mobile-nav .wk7-mobile-menu a,
#wk7-mobile-nav ul li a {
  color: var(--color-foreground) !important;
  text-decoration: none !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  display: block !important;
  padding: 1rem 0 !important;
  transition: all 0.3s ease !important;
  width: 100% !important;
  position: relative;
  min-height: 44px;
  float: none !important;
  clear: both !important;
  box-sizing: border-box !important;
}

.wk7-mobile-menu a:hover,
.wk7-mobile-menu a:focus {
  color: var(--color-primary) !important;
  padding-left: 0.5rem !important;
}

.wk7-mobile-menu .current-menu-item a,
.wk7-mobile-menu .current_page_item a {
  color: var(--color-primary) !important;
  font-weight: 600 !important;
}

/* Mobile CTA Button */
.wk7-mobile-cta {
  display: block !important;
  margin-top: 1.5rem !important;
  padding: 1rem 1.5rem !important;
  background: var(--gradient-primary) !important;
  color: white !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  border-radius: var(--radius-lg) !important;
  text-decoration: none !important;
  text-align: center !important;
  transition: all 0.3s ease !important;
  width: 100% !important;
  box-sizing: border-box !important;
  /* Ensure minimum touch target size */
  min-height: 48px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.wk7-mobile-cta:hover,
.wk7-mobile-cta:focus {
  box-shadow: var(--shadow-primary) !important;
  transform: translateY(-2px) !important;
}

/* Additional overrides for WordPress menu system */
.wk7-mobile-nav .wk7-mobile-menu li,
.wk7-mobile-nav ul li {
  display: block !important;
  float: none !important;
  clear: both !important;
}

/* Prevent inline-block from WordPress */
#wk7-mobile-nav ul li {
  display: block !important;
}

/* Prevent flex-row from theme */
.wk7-mobile-nav ul,
#wk7-mobile-nav ul {
  display: block !important;
  flex-direction: column !important;
}

/* Responsive */
@media (max-width: 768px) {
  .wk7-header-nav {
    display: none;
  }

  .wk7-mobile-toggle {
    display: block;
  }

  /* Extra mobile menu fixes */
  .wk7-mobile-nav .wk7-mobile-menu,
  #wk7-mobile-nav ul {
    display: block !important;
    width: 100% !important;
  }

  .wk7-mobile-nav .wk7-mobile-menu li,
  #wk7-mobile-nav ul li {
    display: block !important;
    width: 100% !important;
    float: none !important;
  }

  .wk7-logo-name {
    font-size: 1rem;
  }

  .wk7-logo-subtitle {
    font-size: 0.625rem;
  }
}

/* ============================================
   GLASSMORPHISM EFFECTS
   ============================================ */

.glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-dark {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ============================================
   GRADIENT TEXT
   ============================================ */

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

.gradient-klare-text {
  background: var(--gradient-klare-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
/* ============================================
   CUSTOM BUTTONS
   ============================================ */

.btn-primary {
  background: var(--gradient-primary);
  color: white;
  padding: var(--spacing-md) var(--spacing-xl);
  border-radius: var(--radius-lg);
  font-weight: 600;
  transition: var(--transition-all);
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  border: none;
  cursor: pointer;
}

.btn-primary:hover {
  box-shadow: var(--shadow-primary);
  transform: scale(1.05);
}

.btn-glass {
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: white !important;
  padding: var(--spacing-md) var(--spacing-xl) !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  font-weight: 600 !important;
  transition: var(--transition-all) !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  text-decoration: none !important;
}

.btn-glass:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* ============================================
   DIVI BUTTON OVERRIDES
   ============================================ */

.et_pb_button {
  background: var(--gradient-primary) !important;
  border-radius: var(--radius-lg) !important;
  transition: var(--transition-all) !important;
  border: none !important;
}

.et_pb_button:hover {
  box-shadow: var(--shadow-primary) !important;
  transform: scale(1.05) !important;
}

/* ============================================
   CONTAINERS
   ============================================ */

.container-custom {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--spacing-xl);
}

/* ============================================
   CUSTOM SCROLLBAR
   ============================================ */

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--color-background);
}

::-webkit-scrollbar-thumb {
  background: var(--klare-r); /* Amber */
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-secondary);
}

/* ============================================
   ANIMATIONS
   ============================================ */

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

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Scroll Animation Support - Base State */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
}

/* Animation Classes - Only trigger when .animated is added */
.animate-on-scroll.animated.animate-fade-in-up {
  animation: fadeInUp 0.8s ease forwards;
}

.animate-on-scroll.animated.animate-fade-in {
  animation: fadeIn 0.8s ease forwards;
}

.animate-on-scroll.animated.animate-slide-in-left {
  animation: slideInLeft 0.8s ease forwards;
}

.animate-on-scroll.animated.animate-slide-in-right {
  animation: slideInRight 0.8s ease forwards;
}

.animate-on-scroll.animated.animate-scale-in {
  animation: scaleIn 0.8s ease forwards;
}

/* Fallback: Simple fade-in if no specific animation class */
.animate-on-scroll.animated {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

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

/* ============================================
   STORY SECTION - IRONMAN GRID FIX
   ============================================ */

.wk7-ironman-section {
  width: 100%;
}

.wk7-ironman-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 32px !important;
  align-items: center !important;
}

.wk7-ironman-left,
.wk7-ironman-right {
  width: 100% !important;
  min-width: 0 !important; /* Prevent grid blowout */
}

.wk7-ironman-right {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.wk7-stat-card {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

/* Mobile Responsive */
@media (max-width: 980px) {
  .wk7-ironman-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .wk7-ironman-section {
    padding: 32px 24px !important;
  }
}

@media (max-width: 768px) {
  .wk7-ironman-grid {
    gap: 20px !important;
  }

  .wk7-ironman-section {
    padding: 24px 16px !important;
  }
}

.bg-gradient-primary {
  background: var(--gradient-primary);
}

.bg-gradient-bg {
  background: var(--gradient-bg);
}

/* ============================================
   HERO SPECIFIC ANIMATIONS
   ============================================ */

/* Pulse Animation */
@keyframes wk7-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

.wk7-pulse {
  animation: wk7-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Scale Pulse Animation */
@keyframes wk7-scale-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.wk7-scale-pulse {
  animation: wk7-scale-pulse 2s ease-in-out infinite;
}

/* Float Animations */
@keyframes wk7-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

.wk7-float-1 {
  animation: wk7-float 3s ease-in-out infinite;
}

.wk7-float-2 {
  animation: wk7-float 4s ease-in-out infinite;
  animation-delay: 0.5s;
}

.wk7-float-3 {
  animation: wk7-float 3.5s ease-in-out infinite;
  animation-delay: 1s;
}

/* Hero Background Blobs */
.wk7-hero-blob-1 {
  background: var(--klare-r); /* Amber - warm & energetic */
  opacity: 0.3;
  animation: wk7-pulse 3s ease-in-out infinite;
}

.wk7-hero-blob-2 {
  background: var(--klare-e); /* Emerald - growth & clarity */
  opacity: 0.3;
  animation: wk7-pulse 3s ease-in-out infinite;
  animation-delay: 1s;
}

/* Scroll Indicator */
@keyframes wk7-bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px);
  }
}

.wk7-scroll-indicator {
  animation: wk7-bounce 1.5s ease-in-out infinite;
}

/* ============================================
   KLARE METHODE COMPONENT
   ============================================ */

/* Klare Methode Section - Ensure no overflow */
.wk7-klare-methode {
  overflow: visible !important;
}

/* Detail Column - Sticky Positioning */
.klare-detail-column {
  position: sticky !important;
  top: 100px !important; /* Reduced to give more space at top */
  align-self: flex-start !important;
  max-height: calc(100vh - 120px); /* Adjusted for new top value */
  overflow-y: auto;
  overflow-x: visible; /* Prevent horizontal clipping */
  padding-top: 20px; /* Add space at top for hover effects */
  margin-top: -20px; /* Compensate for padding */
}

/* Smooth scrolling for detail column */
.klare-detail-column {
  scroll-behavior: smooth;
}

/* Hide scrollbar but keep functionality */
.klare-detail-column::-webkit-scrollbar {
  width: 4px;
}

.klare-detail-column::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 2px;
}

.klare-detail-column::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
}

.klare-detail-column::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Step Container - Ensure proper cursor and transitions */
.klare-step {
  cursor: pointer;
  transition: all 0.3s ease;
  will-change: transform, background, border-color;
}

.klare-step:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

.klare-step:focus {
  outline: none; /* Kein Outline - border-left zeigt bereits die Farbe */
}

/* Detail Module - Smooth transitions */
.klare-detail-module {
  transition: opacity 0.3s ease;
}

/* ============================================
   RESPONSIVE UTILITIES
   ============================================ */

@media (max-width: 768px) {
  .container-custom {
    padding: 0 var(--spacing-md);
  }

  /* Hide floating elements on mobile */
  .wk7-float-1,
  .wk7-float-2,
  .wk7-float-3 {
    display: none;
  }

  /* === KLARE METHODE MOBILE === */

  /* Disable sticky on mobile */
  .klare-detail-column {
    position: relative !important;
    top: auto !important;
    max-height: none;
    overflow-y: visible;
    margin-top: 24px;
  }

  /* Step Container - Reduced sizes */
  .klare-step {
    padding: 16px !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
  }

  /* Step Badge - Smaller on mobile */
  .step-badge {
    width: 48px !important;
    height: 48px !important;
    font-size: 20px !important;
    border-radius: 10px !important;
  }

  /* Step Icons - Smaller */
  .klare-step svg {
    width: 16px !important;
    height: 16px !important;
  }

  /* Step Titles - Smaller */
  .klare-step h3 {
    font-size: 22px !important;
  }

  /* Step Description - Smaller */
  .klare-step p {
    font-size: 14px !important;
  }

  /* Detail Module - Reduced padding */
  .klare-detail {
    padding: 24px !important;
    border-radius: 16px !important;
  }

  /* Detail Icon Container */
  .klare-detail > div:first-child {
    width: 60px !important;
    height: 60px !important;
    margin-bottom: 16px !important;
  }

  /* Detail Icon */
  .klare-detail svg {
    width: 30px !important;
    height: 30px !important;
  }

  /* Detail Title */
  .klare-detail h3 {
    font-size: 28px !important;
    margin-bottom: 12px !important;
  }

  /* Detail Description */
  .klare-detail > p:first-of-type {
    font-size: 16px !important;
    margin-bottom: 16px !important;
  }

  /* Detail Text */
  .klare-detail > p:last-of-type {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  /* Progress Bar Container */
  .klare-detail > div:last-child {
    margin-top: 24px !important;
    padding-top: 24px !important;
  }

  /* Kongruenz Section */
  .wk7-klare-methode .glass {
    padding: 24px !important;
  }

  .wk7-klare-methode .glass h3 {
    font-size: 24px !important;
    margin-bottom: 16px !important;
  }

  .wk7-klare-methode .glass p {
    font-size: 16px !important;
    margin-bottom: 16px !important;
  }

  .wk7-klare-methode .glass blockquote {
    font-size: 20px !important;
  }

  /* Ensure touch targets are large enough */
  .klare-step {
    min-height: 44px;
    touch-action: manipulation;
  }

  /* Reduce animations on mobile for performance */
  .klare-step,
  .klare-detail-module {
    transition: opacity 0.2s ease !important;
  }

  :root {
    --text-xxxxxl: 2rem; /* 32px on mobile */
    --text-xxxxxxl: 2.5rem; /* 40px on mobile */
    --text-xxxxxxxl: 3rem; /* 48px on mobile */
  }
}

/* Tablet specific adjustments (768px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .klare-step {
    padding: 20px !important;
  }

  .step-badge {
    width: 56px !important;
    height: 56px !important;
    font-size: 24px !important;
  }

  .klare-detail {
    padding: 36px !important;
  }

  .klare-detail-column {
    top: 100px !important;
  }
}

.wk7-contact-card {
  cursor: pointer;
}

a.wk7-contact-card:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

a.wk7-contact-card:active {
  transform: translateY(0);
}

.wk7-contact-icon {
  transition: transform 0.3s ease;
}

a.wk7-contact-card:hover .wk7-contact-icon {
  transform: scale(1.1);
}

/* ============================================
   FORM INPUT FOCUS STYLES
   ============================================ */

/* Remove browser default outline and box-shadow on focus, set primary border */
input:focus,
textarea:focus,
select:focus,
button:focus,
.et_pb_contact_field input:focus,
.et_pb_contact_field textarea:focus,
.et_pb_contact_form_container input:focus,
.et_pb_contact_form_container textarea:focus,
.et_pb_contact_form_container select:focus,
.et_pb_contact input[type="text"]:focus,
.et_pb_contact input[type="email"]:focus,
.et_pb_contact input[type="tel"]:focus,
.et_pb_contact textarea:focus {
  outline: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  border-color: var(--color-primary) !important;
  transition: border-color 0.3s ease !important;
}

/* ============================================
   FOOTER STYLES - React/Next.js Design
   ============================================ */

/* Brand Section */
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 28rem;
}

.footer-brand-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.footer-logo {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.footer-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.footer-brand-info {
  display: flex;
  flex-direction: column;
}

.footer-brand-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-foreground);
  line-height: 1.2;
}

.footer-brand-subtitle {
  font-size: 0.875rem;
  color: rgba(156, 163, 175, 1);
  line-height: 1.4;
}

.footer-brand-description {
  font-size: 1rem;
  color: rgba(156, 163, 175, 1);
  line-height: 1.6;
  margin: 0;
}

/* Social Links */
.footer-social {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.footer-social-link {
  width: 40px;
  height: 40px;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-foreground);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
}

.footer-social-link:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.1);
}

.footer-social-link svg {
  width: 20px;
  height: 20px;
}

/* Navigation Section */
.footer-nav,
.footer-contact {
  display: flex;
  flex-direction: column;
}

.footer-heading {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-foreground);
  margin: 0 0 1rem 0;
}

.footer-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-nav-link {
  font-size: 0.875rem;
  color: rgba(156, 163, 175, 1);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-nav-link:hover {
  color: var(--color-primary);
}

/* Contact Section */
.footer-contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: rgba(156, 163, 175, 1);
}

.footer-contact-item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.footer-contact-link {
  font-size: 0.875rem;
  color: rgba(156, 163, 175, 1);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-contact-link:hover {
  color: var(--color-primary);
}

/* Bottom Bar */
.footer-copyright,
.footer-legal,
.footer-made {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  color: rgba(156, 163, 175, 1);
}

.footer-copyright p {
  margin: 0;
}

.footer-legal {
  justify-content: center;
  gap: 1.5rem;
}

.footer-legal-link {
  color: rgba(156, 163, 175, 1);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-legal-link:hover {
  color: var(--color-primary);
}

.footer-made {
  justify-content: flex-end;
  gap: 0.5rem;
}

.footer-made svg {
  width: 16px;
  height: 16px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .footer-brand-header {
    flex-direction: row;
  }

  .footer-logo {
    width: 40px;
    height: 40px;
  }

  .footer-brand-name {
    font-size: 1.125rem;
  }

  .footer-brand-subtitle {
    font-size: 0.8125rem;
  }

  .footer-brand-description {
    font-size: 0.875rem;
  }

  .footer-copyright,
  .footer-legal,
  .footer-made {
    justify-content: center;
    text-align: center;
  }

  .footer-legal {
    flex-direction: column;
    gap: 1rem;
  }
}

/* ============================================
   LEGAL PAGES STYLING (Impressum, Datenschutz, AGB)
   ============================================ */

/* Legal Page Container */
.wk7-legal-page {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--spacing-xxxxl) var(--spacing-xl);
  color: var(--color-foreground);
}

/* Legal Page Title */
.wk7-legal-page h1 {
  font-size: var(--text-xxxxxl);
  font-weight: 700;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: var(--spacing-xxl);
  line-height: 1.2;
}

/* Section Headings */
.wk7-legal-page h2 {
  font-size: var(--text-xxxl);
  font-weight: 600;
  color: var(--color-foreground);
  margin-top: var(--spacing-xxl);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-sm);
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.wk7-legal-page h3 {
  font-size: var(--text-xxl);
  font-weight: 600;
  color: var(--color-primary);
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-md);
}

.wk7-legal-page h4 {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-foreground);
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-sm);
}

/* Paragraphs */
.wk7-legal-page p {
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--color-gray-400);
  margin-bottom: var(--spacing-md);
}

/* Strong/Bold Text */
.wk7-legal-page strong {
  color: var(--color-foreground);
  font-weight: 600;
}

/* Links */
.wk7-legal-page a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.3s ease;
  border-bottom: 1px solid transparent;
}

.wk7-legal-page a:hover {
  color: var(--color-primary-light);
  border-bottom-color: var(--color-primary-light);
}

/* Lists */
.wk7-legal-page ul,
.wk7-legal-page ol {
  margin: var(--spacing-md) 0;
  padding-left: var(--spacing-xl);
  color: var(--color-gray-400);
}

.wk7-legal-page li {
  margin-bottom: var(--spacing-sm);
  line-height: 1.8;
}

.wk7-legal-page li strong {
  color: var(--color-foreground);
}

/* Horizontal Rules */
.wk7-legal-page hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin: var(--spacing-xxl) 0;
}

/* Contact Info Box */
.wk7-legal-contact {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xl);
  padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
}

.wk7-legal-contact p {
  margin-bottom: var(--spacing-sm);
}

.wk7-legal-contact p:last-child {
  margin-bottom: 0;
}

/* Info Box (for important notices) */
.wk7-legal-info {
  background: rgba(245, 158, 11, 0.1);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
}

.wk7-legal-info p {
  color: var(--color-foreground);
  margin-bottom: 0;
}

/* Table Styling (for structured data) */
.wk7-legal-page table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--spacing-xl) 0;
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.wk7-legal-page th,
.wk7-legal-page td {
  padding: var(--spacing-md);
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.wk7-legal-page th {
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-foreground);
  font-weight: 600;
}

.wk7-legal-page td {
  color: var(--color-gray-400);
}

.wk7-legal-page tr:last-child td {
  border-bottom: none;
}

/* Blockquote */
.wk7-legal-page blockquote {
  border-left: 4px solid var(--color-primary);
  padding-left: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
  font-style: italic;
  color: var(--color-gray-300);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .wk7-legal-page {
    padding: var(--spacing-xxl) var(--spacing-md);
  }

  .wk7-legal-page h1 {
    font-size: var(--text-xxxxl);
    margin-bottom: var(--spacing-xl);
  }

  .wk7-legal-page h2 {
    font-size: var(--text-xxl);
    margin-top: var(--spacing-xl);
  }

  .wk7-legal-page h3 {
    font-size: var(--text-xl);
  }

  .wk7-legal-page h4 {
    font-size: var(--text-lg);
  }

  .wk7-legal-page p,
  .wk7-legal-page li {
    font-size: var(--text-sm);
  }

  .wk7-legal-contact,
  .wk7-legal-info {
    padding: var(--spacing-md);
  }

  .wk7-legal-page table {
    font-size: var(--text-sm);
  }

  .wk7-legal-page th,
  .wk7-legal-page td {
    padding: var(--spacing-sm);
  }
}

/* ============================================
   FOUNDING MEMBERS SECTION
   ============================================ */

/* Section Base */
.wk7-founding-section {
  position: relative;
}

/* ===== INTRO BLOCK ===== */
.fm-intro-block {
  text-align: center;
}

/* Badge */
.fm-intro-block > div:first-child {
  display: inline-block;
  padding: 10px 24px;
  background: linear-gradient(135deg, #004e89, #0064b4);
  border-radius: 50px;
  box-shadow: 0 4px 20px rgba(0, 78, 137, 0.5);
  margin-bottom: 24px;
}

.fm-intro-block > div:first-child span {
  color: white;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
}

/* Headline */
.fm-intro-block h2 {
  font-size: 48px;
  font-weight: bold;
  line-height: 1.2;
  margin: 0 0 24px 0;
  color: white;
}

.fm-intro-block h2 span {
  background: linear-gradient(135deg, #2a9d8f, #21867a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Intro Text */
.fm-intro-block > p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 20px;
  line-height: 1.7;
  margin: 0;
}

.fm-intro-block > p strong {
  color: white;
  font-weight: 700;
}

/* ===== PREIS-BOX ===== */
.fm-price-module > div {
  padding: 40px;
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.15), rgba(33, 134, 122, 0.05));
  border-radius: 20px;
  border: 2px solid rgba(42, 157, 143, 0.4);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.fm-price-module > div::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(42, 157, 143, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

.fm-price-module > div > * {
  position: relative;
  z-index: 1;
}

/* Old Price Label */
.fm-price-module p[data-label="old"] {
  color: #9ca3af;
  font-size: 18px;
  margin: 0 0 8px 0;
}

/* Old Price */
.fm-price-module p[data-price="old"] {
  color: #9ca3af;
  font-size: 18px;
  text-decoration: line-through;
  margin: 0 0 16px 0;
}

/* Current Price Wrapper */
.fm-price-module div[data-wrapper="current"] {
  margin: 16px 0;
}

/* Current Price Label */
.fm-price-module p[data-label="main"] {
  color: white;
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 8px 0;
}

/* Current Price */
.fm-price-module p[data-price="current"] {
  color: #2a9d8f;
  font-size: 64px;
  font-weight: 900;
  line-height: 1;
  margin: 0;
}

/* Savings Badge */
.fm-price-module div[data-savings] {
  display: inline-block;
  padding: 12px 24px;
  background: rgba(255, 107, 53, 0.2);
  border-radius: 30px;
  margin: 16px 0;
}

.fm-price-module div[data-savings] span {
  color: #ff6b35;
  font-size: 20px;
  font-weight: 700;
}

/* Payment Options */
.fm-price-module p[data-payment] {
  color: #9ca3af;
  font-size: 15px;
  margin: 24px 0 0 0;
}

/* Countdown */
.fm-price-module div[data-countdown] {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.fm-price-module div[data-countdown] p[data-main] {
  color: #ff6b35;
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px 0;
}

.fm-price-module div[data-countdown] p[data-sub] {
  color: #9ca3af;
  font-size: 14px;
  margin: 0;
}

/* Price Box Animation */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(42, 157, 143, 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(42, 157, 143, 0.6);
  }
}

.fm-price-module > div {
  animation: pulse-glow 3s ease-in-out infinite;
}

/* ===== BENEFIT CARDS (TEXT MODULE) ===== */
.fm-benefit-card {
  transition: all 0.3s ease;
}

/* Main Benefits - Grün */
.fm-main-benefit > div {
  padding: 24px;
  background: rgba(42, 157, 143, 0.05);
  border: 2px solid rgba(42, 157, 143, 0.3);
  border-radius: 12px;
  height: 100%;
  min-height: 200px;
}

.fm-main-benefit div[data-icon] {
  font-size: 48px;
  margin-bottom: 16px;
  display: block;
}

.fm-main-benefit h3 {
  color: #2a9d8f;
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 12px 0;
}

.fm-main-benefit p {
  color: #d1d5db;
  font-size: 15px;
  line-height: 1.8;
  margin: 0;
}

.fm-main-benefit strong {
  color: white;
}

/* Bonus Benefits - Orange */
.fm-bonus-benefit > div {
  padding: 24px;
  background: rgba(255, 107, 53, 0.05);
  border: 2px solid rgba(255, 107, 53, 0.3);
  border-radius: 12px;
  height: 100%;
  min-height: 200px;
}

.fm-bonus-benefit div[data-icon] {
  font-size: 48px;
  margin-bottom: 16px;
  display: block;
}

.fm-bonus-benefit h3 {
  color: #ff6b35;
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 12px 0;
}

.fm-bonus-benefit p {
  color: #d1d5db;
  font-size: 15px;
  line-height: 1.8;
  margin: 0;
}

.fm-bonus-benefit strong {
  color: white;
}

/* Hover Effects */
.fm-benefit-card:hover {
  transform: translateY(-5px);
}

.fm-main-benefit:hover > div {
  background: rgba(42, 157, 143, 0.08);
  border-color: rgba(42, 157, 143, 0.5);
}

.fm-bonus-benefit:hover > div {
  background: rgba(255, 107, 53, 0.08);
  border-color: rgba(255, 107, 53, 0.5);
}

/* ===== GUARANTEE CARDS (TEXT MODULE) ===== */
.fm-guarantee-card > div {
  padding: 32px;
  background: rgba(42, 157, 143, 0.08);
  border: 2px solid rgba(42, 157, 143, 0.4);
  border-radius: 16px;
  text-align: center;
  height: 100%;
  min-height: 220px;
  transition: all 0.3s ease;
}

.fm-guarantee-card div[data-icon] {
  font-size: 48px;
  margin-bottom: 16px;
  display: block;
}

.fm-guarantee-card h3 {
  color: #2a9d8f;
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 16px 0;
}

.fm-guarantee-card p {
  color: #d1d5db;
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
}

.fm-guarantee-card:hover > div {
  background: rgba(42, 157, 143, 0.12);
  border-color: rgba(42, 157, 143, 0.6);
  transform: translateY(-5px);
}

/* ===== TRANSPARENCY BOX ===== */
.fm-transparency-module > div {
  padding: 32px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 16px;
  border-left: 4px solid #2a9d8f;
}

.fm-transparency-module h3 {
  color: #2a9d8f;
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 20px 0;
}

.fm-transparency-module p {
  color: #d1d5db;
  font-size: 16px;
  line-height: 1.8;
  margin: 0 0 16px 0;
}

.fm-transparency-module > div > p:last-of-type {
  margin-bottom: 24px;
}

.fm-transparency-module strong {
  color: white;
}

/* Win-Win Box */
.fm-transparency-module div[data-win-win] {
  padding: 20px;
  background: rgba(42, 157, 143, 0.1);
  border-radius: 12px;
  text-align: center;
}

.fm-transparency-module div[data-win-win] p {
  color: #2a9d8f;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

/* ===== CREDENTIALS ===== */
.fm-credentials-module {
  text-align: center;
}

.fm-credentials-module p:first-child {
  color: #9ca3af;
  font-size: 15px;
  line-height: 1.8;
  margin: 0 0 12px 0;
}

.fm-credentials-module p:last-child {
  color: #6b7280;
  font-size: 14px;
  margin: 0;
}

/* ===== CTA SECTION ===== */
.fm-cta-button .et_pb_button {
  transition: all 0.3s ease;
}

.fm-cta-button .et_pb_button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 40px rgba(42, 157, 143, 0.6) !important;
}

/* CTA Footer */
.fm-cta-footer-module {
  text-align: center;
}

.fm-cta-footer-module p[data-urgency] {
  color: #ff6b35;
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 12px 0;
}

.fm-cta-footer-module p[data-guarantee] {
  color: #9ca3af;
  font-size: 14px;
  margin: 0 0 16px 0;
}

.fm-cta-footer-module p[data-faq] {
  color: #6b7280;
  font-size: 13px;
  margin: 0;
}

.fm-cta-footer-module a {
  color: #2a9d8f;
  text-decoration: underline;
  transition: color 0.3s ease;
}

.fm-cta-footer-module a:hover {
  color: #21867a;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 980px) {
  .fm-intro-block h2 {
    font-size: 36px !important;
  }
  
  .fm-price-module p[data-price="current"] {
    font-size: 48px !important;
  }
  
  .wk7-founding-section .et_pb_row {
    padding: 80px 32px !important;
  }
}

@media (max-width: 767px) {
  .fm-intro-block h2 {
    font-size: 28px !important;
  }
  
  .fm-intro-block > p {
    font-size: 18px !important;
  }
  
  .fm-price-module p[data-price="current"] {
    font-size: 36px !important;
  }
  
  .fm-price-module > div {
    padding: 32px 24px !important;
  }
  
  .wk7-founding-section .et_pb_row {
    padding: 60px 24px !important;
  }
  
  .fm-transparency-module > div {
    padding: 24px !important;
  }
  
  .fm-transparency-module h3 {
    font-size: 20px !important;
  }
  
  .fm-transparency-module p {
    font-size: 15px !important;
  }
}

/* ========================================
   PROJEKTE PORTFOLIO SECTION
   ======================================== */

/* Section */
.vk-projekte-section {
  position: relative;
}

/* Header Headline Module */
.vk-projekte-headline-module h2 {
  font-size: var(--text-xxxxxl);
  font-weight: 700;
  margin: 0;
  text-align: center;
  color: var(--color-foreground);
  line-height: 1.2;
}

/* Subline Module */
.vk-projekte-subline-module p {
  color: var(--color-gray-400);
  font-size: var(--text-lg);
  margin: 0;
  text-align: center;
  line-height: 1.6;
}

.vk-projekte-subline-module p span {
  color: var(--klare-e);
  font-weight: 600;
}

/* Projekt Cards - Base */
.vk-projekt-card > div {
  padding: var(--spacing-xl);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid;
  border-radius: var(--radius-xl);
  transition: var(--transition-all);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.vk-projekt-card:hover > div {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

/* Projekt Card Variants */
.vk-projekt-primary > div {
  border-color: rgba(16, 185, 129, 0.3);
}

.vk-projekt-primary:hover > div {
  border-color: rgba(16, 185, 129, 0.6);
}

.vk-projekt-secondary > div {
  border-color: rgba(245, 158, 11, 0.3);
}

.vk-projekt-secondary:hover > div {
  border-color: rgba(245, 158, 11, 0.6);
}

.vk-projekt-tertiary > div {
  border-color: rgba(155, 89, 182, 0.3);
}

.vk-projekt-tertiary:hover > div {
  border-color: rgba(155, 89, 182, 0.6);
}

.vk-projekt-accent > div {
  border-color: rgba(99, 102, 241, 0.3);
}

.vk-projekt-accent:hover > div {
  border-color: rgba(99, 102, 241, 0.6);
}

/* Projekt Title */
.vk-projekt-card h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-foreground);
  margin: 0 0 var(--spacing-md) 0;
}

/* Projekt Link Wrapper */
.vk-projekt-card > div > div:nth-child(2) {
  margin-bottom: var(--spacing-md);
}

/* Projekt Link */
.vk-projekt-card a {
  color: var(--klare-e);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--text-base);
  transition: var(--transition-fast);
}

.vk-projekt-secondary a {
  color: var(--color-accent);
}

.vk-projekt-tertiary a {
  color: var(--color-purple);
}

.vk-projekt-accent a {
  color: var(--klare-k);
}

.vk-projekt-card a:hover {
  text-decoration: underline;
  opacity: 0.8;
}

/* Projekt Description */
.vk-projekt-card p {
  color: var(--color-gray-300);
  line-height: 1.6;
  margin: 0 0 var(--spacing-md) 0;
  font-size: var(--text-sm);
  flex-grow: 1;
}

/* Projekt Tags */
.vk-projekt-card div[data-tags] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.vk-projekt-card div[data-tags] span {
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
}

/* Tag Colors by Card Variant */
.vk-projekt-primary div[data-tags] span {
  background: rgba(16, 185, 129, 0.2);
  color: var(--klare-e);
}

.vk-projekt-secondary div[data-tags] span {
  background: rgba(245, 158, 11, 0.2);
  color: var(--color-accent);
}

.vk-projekt-tertiary div[data-tags] span {
  background: rgba(155, 89, 182, 0.2);
  color: var(--color-purple);
}

.vk-projekt-accent div[data-tags] span {
  background: rgba(99, 102, 241, 0.2);
  color: var(--klare-k);
}

/* Tech Stack Module */
.vk-tech-stack-module > div {
  text-align: center;
  padding: var(--spacing-xl);
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.vk-tech-stack-module p[data-label] {
  color: var(--color-gray-400);
  font-size: var(--text-sm);
  margin: 0 0 var(--spacing-lg) 0;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.vk-tech-stack-module div[data-tags] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  justify-content: center;
}

.vk-tech-stack-module div[data-tags] span {
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  border: 1px solid;
}

/* Tech Tag Colors */
.vk-tech-stack-module span[data-color="1"] {
  background: rgba(16, 185, 129, 0.1);
  color: var(--klare-e);
  border-color: rgba(16, 185, 129, 0.3);
}

.vk-tech-stack-module span[data-color="2"] {
  background: rgba(245, 158, 11, 0.1);
  color: var(--color-accent);
  border-color: rgba(245, 158, 11, 0.3);
}

.vk-tech-stack-module span[data-color="3"] {
  background: rgba(155, 89, 182, 0.1);
  color: var(--color-purple);
  border-color: rgba(155, 89, 182, 0.3);
}

.vk-tech-stack-module span[data-color="4"] {
  background: rgba(99, 102, 241, 0.1);
  color: var(--klare-k);
  border-color: rgba(99, 102, 241, 0.3);
}

/* Responsive */
@media (max-width: 980px) {
  .vk-projekte-headline-module h2 {
    font-size: var(--text-xxxxl);
  }
  
  .vk-projekte-section .et_pb_row {
    padding: 60px 32px !important;
  }
}

@media (max-width: 767px) {
  .vk-projekte-headline-module h2 {
    font-size: var(--text-xxxl);
  }
  
  .vk-projekte-section .et_pb_row {
    padding: 40px 24px !important;
  }
  
  .vk-projekt-card {
    margin-bottom: var(--spacing-lg);
  }
}