/* INCLUSIFY Landing Page - Custom Styles */

/* Tailwind Config Override */
@layer base {
  :root {
    --color-background: #0a0a0a;
    --color-primary: #00D9FF;
    --color-secondary: #10b981;
    --color-danger: #ef4444;
    --color-warning: #f59e0b;
  }

  body {
    background-color: var(--color-background);
  }
}

/* Overlay-Problem gelöst - max-width calc Regeln entfernt */

/* CRITICAL MOBILE FIXES - HIGHEST PRIORITY */
/* These must override ALL other styles including inline styles */

/* Prevent horizontal scrolling - ABSOLUTE */
html {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
}

body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
  position: relative !important;
}

/* Fix extreme margins/padding - TARGET INLINE STYLES */
@media (max-width: 768px) {
  [style*="margin: 0 -9999px"],
  [style*="padding"][style*="9999px"] {
    margin: 0 !important;
    padding: 60px 20px !important;
    max-width: 100vw !important;
    overflow: hidden !important;
  }
}

/* Force freebee bar visibility and fix positioning */
.freebee-bar {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important; /* Don't use right: 0 with width: 100% */
  width: 100vw !important; /* Use vw instead of % */
  max-width: 100vw !important;
  z-index: 9999 !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 10px !important;
}

.freebee-bar-text {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #ffffff !important;
}

/* Parallax sections - Desktop */
.parallax-section {
  position: relative;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  width: 100%;
  overflow: hidden;
}

/* Override: Early Freebee section should be transparent to show hero background */
.parallax-section:has(.freebee-early) {
  background: transparent !important;
  background-image: none !important;
}

/* Ensure no pseudo-elements add backgrounds */
.parallax-section:has(.freebee-early)::before,
.parallax-section:has(.freebee-early)::after {
  display: none !important;
}

.hero-section {
  position: relative;
  width: 100%;
}

/* Cookie banner positioning fix */
.cookie-banner {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: auto !important; /* Don't use right: 0 with width: 100% */
  width: 100vw !important; /* Use vw instead of % */
  max-width: 100vw !important;
  z-index: 10000 !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 20px !important;
}

@media (max-width: 768px) {
  /* ABSOLUTE overflow prevention */
  * {
    max-width: 100vw !important;
  }
  
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    position: relative !important;
  }
  
  /* Remove all horizontal scroll triggers */
  section, div, article, aside, header, footer, main {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  
  /* Fix specific problematic elements */
  .value-stack-bg {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow: hidden !important;
  }
  
  /* Parallax sections - Mobile */
  .parallax-section {
    background-attachment: scroll !important;
    background-size: cover !important;
    background-position: center top !important;
    padding: 40px 20px !important;
    max-width: 100vw !important;
    margin: 0 !important;
  }

  /* Keep Early Freebee section transparent on mobile too */
  .parallax-section:has(.freebee-early) {
    background: transparent !important;
    background-image: none !important;
  }
  
  /* Cookie banner mobile */
  .cookie-banner {
    padding: 15px !important;
  }
  
  /* Fix specific text sizes */
  h1, .text-5xl, .text-6xl {
    font-size: 28px !important;
    line-height: 1.2 !important;
  }
  
  h2, .text-4xl {
    font-size: 24px !important;
    line-height: 1.2 !important;
  }
  
  h3, .text-3xl {
    font-size: 20px !important;
    line-height: 1.2 !important;
  }
  
  /* Fix specific problematic text */
  .value-hero p,
  .hero-description,
  [class*="text-xl"] {
    font-size: 16px !important;
    line-height: 1.4 !important;
  }
}

/* Gradient Backgrounds */
.bg-gradient-radial {
  background: radial-gradient(circle at center, rgba(0, 217, 255, 0.15), transparent);
}

/* Buttons */
.btn-primary {
  @apply inline-flex items-center justify-center px-6 py-3 text-base font-medium text-white rounded-lg;
  background: linear-gradient(135deg, #00D9FF, #0099cc);
  @apply hover:shadow-lg hover:-translate-y-0.5 transform transition-all duration-200;
  @apply disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:translate-y-0;
}

.btn-secondary {
  @apply inline-flex items-center justify-center px-6 py-3 text-base font-medium text-white rounded-lg;
  background: linear-gradient(135deg, #10b981, #059669);
  @apply hover:shadow-lg hover:-translate-y-0.5 transform transition-all duration-200;
}

/* Gradient Border */
.gradient-border {
  position: relative;
  background: linear-gradient(#0a0a0a, #0a0a0a) padding-box,
             linear-gradient(135deg, #00D9FF, #0099cc) border-box;
  border: 2px solid transparent;
}

/* Stack Items */
.stack-item {
  transition: all 0.3s ease;
}

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

.animate-pulse {
  animation: pulse-scale 3s ease-in-out infinite;
}

/* Assessment Modal Styles */
.assessment-question {
  animation: fadeIn 0.3s ease-in;
}

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

/* Checkbox Styling */
input[type="checkbox"] {
  @apply w-5 h-5 accent-cyan-400 cursor-pointer;
}

/* Form Inputs */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"] {
  @apply w-full p-3 bg-gray-800 border-2 border-gray-700 rounded-lg text-white placeholder-gray-500;
  @apply focus:outline-none focus:border-cyan-400 transition-colors;
}

input[type="text"]:disabled,
input[type="email"]:disabled,
input[type="tel"]:disabled,
input[type="number"]:disabled {
  @apply opacity-50 cursor-not-allowed;
}

/* Radio Buttons as Cards */
.radio-card {
  @apply w-full p-4 text-left rounded-lg border-2 transition-all cursor-pointer;
  @apply border-gray-700 hover:border-gray-600 text-gray-300 hover:text-white;
}

.radio-card.selected {
  @apply border-cyan-400 bg-cyan-400/10 text-white;
}

/* Legal Footer */
.legal-footer a {
  @apply transition-colors duration-200;
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
}

/* Loading States */
.loading {
  @apply opacity-50 pointer-events-none;
}

.spinner {
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-top-color: #00D9FF;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 0.8s linear infinite;
}

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

/* Mobile Overrides - MERGED WITH NEW FIXES */
@media (max-width: 768px) {
  /* Fix horizontal scrolling - PRIORITY 1 */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
    position: relative !important;
  }
  
  /* Container & Spacing */
  .container {
    @apply px-4;
    padding-top: 80px !important; /* Account for fixed freebee bar */
    padding-bottom: 40px !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Fix content boxes margins - USING REAL CLASSES */
  .shock-value,
  .loss-item,
  .total-section,
  .actual-price,
  .gradient-bg > div,
  [style*="background-color"],
  [style*="background: linear-gradient"]:not([style*="position: absolute"]) {
    margin-left: 15px !important;
    margin-right: 15px !important;
    max-width: calc(100% - 30px) !important;
    box-sizing: border-box !important;
  }
  
  /* Explizit: Overlays sollen KEINE margins oder max-width haben */
  [style*="position: absolute"][style*="background: linear-gradient"],
  [style*="position: absolute"][style*="background: rgba"] {
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
  }
  
  /* Fix word breaks for long words like "Wissensmanagement" */
  h1, h2, h3, h4, h5, h6, p {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
    -moz-hyphens: auto !important;
  }
  
  /* Freebee bar mobile specific */
  .freebee-bar {
    height: auto !important;
    padding: 10px 15px !important;
  }
  
  .freebee-bar-content {
    max-width: 100% !important;
    padding: 0 !important;
  }

  /* Typography */
  h1 {
    @apply text-4xl;
  }

  h2 {
    @apply text-3xl;
  }

  /* Hero Section */
  .value-hero h1 {
    font-size: 32px !important;
    line-height: 1.2 !important;
  }

  .value-hero p {
    font-size: 18px !important;
  }

  /* Loss Counter */
  .shock-number {
    font-size: 48px !important;
  }

  .loss-amount {
    font-size: 36px !important;
  }

  /* Grid/Flex Layouts - Force stacking on mobile using REAL selectors */
  .loss-overview,
  [style*="display: grid"],
  [style*="display:grid"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Force flex containers to stack */
  [style*="display: flex"],
  [style*="display:flex"],
  .total-section,
  .actual-price {
    flex-direction: column !important;
    gap: 20px !important;
  }
  
  /* Specific stacking for investment boxes */
  .total-section > div,
  .actual-price > div {
    width: 100% !important;
    margin-bottom: 15px !important;
  }

  /* Buttons - Ensure proper tap targets */
  .btn-primary,
  .btn-secondary,
  .freebee-bar-button,
  .cta-button,
  .assessment-button,
  button {
    @apply text-sm px-4 py-2;
    min-height: 44px !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Freebee Bar - Fix visibility and layout */
  .freebee-bar {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    padding: 10px 0 !important;
  }
  
  .freebee-bar-content {
    flex-direction: column !important;
    gap: 10px !important;
    text-align: center !important;
    padding: 0 15px !important;
    max-width: 100% !important;
  }

  .freebee-bar-text {
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: #ffffff !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  .freebee-bar-text strong {
    color: #00D9FF !important;
    font-weight: 700 !important;
  }
  
  .freebee-bar-button {
    font-size: 14px !important;
    padding: 8px 20px !important;
    white-space: nowrap !important;
  }

  /* Stack Items & Cards - Fix alignment */
  .stack-item {
    padding: 20px !important;
    flex-direction: column !important;
    text-align: left !important;
    align-items: flex-start !important;
  }
  
  .stack-content {
    text-align: left !important;
    width: 100% !important;
  }
  
  .stack-value {
    margin-top: 15px !important;
    text-align: left !important;
    min-width: unset !important;
    width: 100% !important;
  }
  
  .stack-title,
  .stack-description,
  .stack-benefit {
    text-align: left !important;
  }

  .stack-item:hover {
    transform: translateX(0) translateY(-2px) !important;
  }

  .freebee-early {
    padding: 30px 20px !important;
  }

  /* Hero Image */
  .hero-image-placeholder {
    height: 300px !important;
  }

  /* Section Headers */
  .stack-header h2,
  .text-5xl {
    @apply text-3xl;
  }

  .text-6xl {
    @apply text-4xl;
  }

  /* Reduce large spacing */
  .py-20 {
    @apply py-12;
  }

  .py-16 {
    @apply py-10;
  }

  .py-12 {
    @apply py-8;
  }

  .px-8 {
    @apply px-4;
  }

  .gap-8 {
    @apply gap-4;
  }
  
  /* Fix section spacing - especially Klaus section */
  section + section {
    margin-top: 40px !important;
  }
  
  /* Fix yellow warning icon size */
  .text-yellow-400,
  .text-yellow-500 {
    font-size: 48px !important; /* Reduce from likely 72px or larger */
  }
  
  /* Specific fix for warning icon if it uses text-7xl or larger */
  .text-7xl,
  .text-8xl,
  .text-9xl {
    @apply text-5xl !important;
  }
  
  /* Investment/Gewinn boxes should stack */
  [class*="Investition"],
  [class*="Gewinn"] {
    width: 100% !important;
    margin-bottom: 20px !important;
  }
  
  /* Fix sections with title + content having too little margin */
  .mx-auto {
    margin-left: 15px !important;
    margin-right: 15px !important;
  }

  /* Fix parallax images on mobile */
  [data-bg],
  .hero-section,
  .bg-fixed,
  [style*="background-attachment: fixed"],
  [style*="background: center/cover fixed"] {
    background-attachment: scroll !important;
    background-size: cover !important;
    background-position: center !important;
  }
  
  /* Fix sections with extreme negative margins */
  [style*="margin: 0 -9999px"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  
  /* Fix gradient overlays with negative positioning */
  [style*="left: -9999px"][style*="right: -9999px"] {
    left: 0 !important;
    right: 0 !important;
  }
  
  /* Fix parallax section heights */
  [style*="height: 400px"] {
    height: auto !important;
    min-height: 300px !important;
  }
  
  /* Fix value-stack background */
  .value-stack-bg {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }

  /* Modal Adjustments */
  .assessment-content,
  .modal-content {
    width: 95% !important;
    max-width: 100% !important;
    margin: 10px !important;
    padding: 20px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }
  
  /* NEUE FIXES für die verbleibenden 4 Probleme */
  
  /* 1. Absolute positionierte Overlays ohne Margins */
  div[style*="position: absolute"][style*="top: 0"][style*="left: 0"][style*="right: 0"][style*="bottom: 0"] {
    margin: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }
  
  /* 2. Force Investment/Gewinn Boxen zu stapeln - spezifischer Selektor */
  div[style*="display: grid"][style*="grid-template-columns: 1fr 1fr"][style*="gap: 40px"],
  div[style*="display:grid"][style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 0 15px !important;
  }
  
  /* 3. Fix für grüne "MIT INCLUSIFY" und rote "OHNE INCLUSIFY" Boxen */
  div[style*="background: rgba(16, 185, 129, 0.1)"],
  div[style*="background: rgba(239, 68, 68, 0.1)"]:not([style*="position: absolute"]),
  div[style*="transform: scale(1.05)"] {
    margin: 0 15px !important;
    transform: scale(1) !important;
    width: calc(100% - 30px) !important;
    max-width: calc(100% - 30px) !important;
    box-sizing: border-box !important;
  }
  
  /* 4. Modal margins - spezifischer für Alpine.js x-show */
  div[x-show="assessmentOpen"],
  div[x-show="foundingPartnerOpen"] {
    padding: 10px !important;
  }
  
  div[x-show="assessmentOpen"] > div,
  div[x-show="foundingPartnerOpen"] > div {
    margin: 10px !important;
    width: calc(100% - 20px) !important;
    max-width: calc(100vw - 20px) !important;
  }

  /* Form Inputs - Prevent iOS zoom */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  select,
  textarea {
    font-size: 16px !important;
    padding: 15px !important;
  }

  /* Radio Cards */
  .radio-card {
    padding: 12px !important;
    font-size: 14px !important;
  }

  /* Assessment Navigation */
  .assessment-navigation {
    flex-direction: column-reverse !important;
    gap: 10px !important;
  }

  .assessment-navigation button {
    width: 100% !important;
  }

  /* Footer */
  footer .flex-wrap {
    flex-direction: column !important;
    text-align: center !important;
  }

  footer .space-x-4 {
    display: flex;
    flex-direction: column;
    gap: 10px !important;
    margin-left: 0 !important;
  }
  
  footer .space-x-4 > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Comprehensive overflow prevention */
  * {
    max-width: 100vw !important;
  }
  
  body {
    overflow-x: hidden !important;
    position: relative !important;
  }
  
  /* Ensure all sections respect viewport */
  section,
  div[class*="section"],
  .hero-section,
  [style*="position: relative"] {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  
  /* Fix any wide content */
  img,
  video,
  iframe {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Fixed elements */
  .fixed {
    position: fixed !important;
  }

  /* Counter sections */
  .text-7xl {
    @apply text-5xl;
  }

  /* Performance - Reduce animations on mobile */
  @media (prefers-reduced-motion: reduce) {
    * {
      animation: none !important;
      transition: none !important;
    }
  }
}

/* Global mobile fixes - outside media query to ensure higher specificity */
@media screen and (max-width: 768px) {
  /* Critical overflow fix */
  html {
    overflow-x: hidden !important;
    position: relative !important;
  }
  
  body {
    overflow-x: hidden !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
  
  /* Prevent any element from causing horizontal scroll */
  body * {
    max-width: 100vw !important;
  }
  
  /* Zentriere das Warnsymbol in der "Letzte Chance" Section bei Mobile */
  div[style*="font-size: 80px"][style*="animation: pulse"] {
    top: -40px !important;
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 auto !important;
  }
}

/* Extra small devices (phones < 480px) */
@media (max-width: 480px) {
  /* Even smaller typography */
  .value-hero h1 {
    font-size: 28px !important;
  }

  .shock-number {
    font-size: 36px !important;
  }

  .loss-amount {
    font-size: 28px !important;
  }

  h1, .text-4xl {
    @apply text-3xl;
  }

  h2, .text-3xl {
    @apply text-2xl;
  }

  /* Smaller buttons on very small screens */
  .btn-primary,
  .btn-secondary {
    @apply text-xs px-3;
  }

  /* Stack all columns */
  .md\:grid-cols-2,
  .lg\:grid-cols-3,
  .xl\:grid-cols-4 {
    grid-template-columns: 1fr !important;
  }
  
  /* Zentriere das Warnsymbol in der "Letzte Chance" Section bei Mobile */
  div[style*="font-size: 80px"][style*="animation: pulse"] {
    top: -40px !important;
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 auto !important;
  }

  /* Reduce padding further */
  .container {
    @apply px-3;
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }

  .stack-item {
    padding: 15px !important;
  }

  /* Modal full screen on very small devices */
  .assessment-content,
  .modal-content {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
}

/* Print Styles */
@media print {
  .no-print {
    display: none !important;
  }
}

/* Cookie Banner */
.cookie-banner {
  backdrop-filter: blur(10px);
}

/* Focus Styles for Accessibility */
*:focus {
  outline: 2px solid #00D9FF;
  outline-offset: 2px;
}

button:focus,
a:focus {
  outline-offset: 4px;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #1a1a1a;
}

::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #444;
}