/* MAIN CSS for SAAS Application */

/* Import */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('loading-animation.css');
@import url('animate.css');
@import url('nav.css');
@import url('hero-section.css');
@import url('partner-banner.css');
@import url('testimonal.css');
@import url('problem-section.css');
@import url('about-solution.css');
@import url('solution.css');
@import url('firststeps.css');
@import url('faq.css');
@import url('footer.css');
@import url('saas-design-fix.css');

/* Font Import */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap');

/* General Settings and Variable */

/* ============================================
   ROOT VARIABLES - TYPOGRAPHY SYSTEM
   ============================================ */

:root {
  /* ========== COLOR VARIABLES (existing) ========== */
  --primary-color: #BA8B02;
  --secondary-color: #181818;
  --third-color: #FFFFFF;
  --four-color: #656f7e;

  --primary-gold: #BA8B02;
  --primary-gold-light: #deb74d;
  --primary-gold-dark: #8a6602;
  --secondary-black: #181818;
  --text-white: #FFFFFF;
  --text-gray: #656f7e;
  --bg-light: #f5f5f5;
  --bg-white: #FFFFFF;
  --bg-base: #0d0d0d;
  --accent-purple: #7c3aed;
  --accent-purple-light: #a78bfa;

  /* ========== FONT FAMILIES ========== */
  --font-headline: 'Playfair Display', Georgia, serif;
  --font-headline-alt: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Courier New', monospace;

  /* ========== FONT SIZES - Desktop ========== */
  /* Headlines */
  --font-size-h1: 64px;
  --font-size-h2: 48px;
  --font-size-h3: 36px;
  --font-size-h4: 28px;
  --font-size-h5: 24px;
  --font-size-h6: 20px;

  /* Body */
  --font-size-body-xl: 20px;
  --font-size-body-lg: 18px;
  --font-size-body: 16px;
  --font-size-body-sm: 14px;
  --font-size-body-xs: 12px;

  /* Special */
  --font-size-button: 16px;
  --font-size-label: 12px;

  /* ========== FONT WEIGHTS ========== */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* ========== LINE HEIGHTS ========== */
  --line-height-tight: 1.1;
  --line-height-snug: 1.3;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;
  --line-height-loose: 1.8;

  /* ========== LETTER SPACING ========== */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.05em;
  --letter-spacing-wider: 0.1em;


  /* ======= LAYOUT ============ */
    /* Layout */
    --container-max: min(1400px, 92vw);
    --content-max: min(1200px, 88vw);
    --text-max: min(800px, 85vw);


  /* Spacing System - Responsive wie Dropbox */
  --spacing-unit: clamp(8px, 1vw, 12px);
  --spacing-xs: calc(var(--spacing-unit) * 0.5);   /* 4-6px */
  --spacing-sm: calc(var(--spacing-unit) * 1);     /* 8-12px */
  --spacing-md: calc(var(--spacing-unit) * 2);     /* 16-24px */
  --spacing-lg: calc(var(--spacing-unit) * 3);     /* 24-36px */
  --spacing-xl: calc(var(--spacing-unit) * 4);     /* 32-48px */
  --spacing-2xl: calc(var(--spacing-unit) * 6);    /* 48-72px */
  --spacing-3xl: calc(var(--spacing-unit) * 8);    /* 64-96px */

  /* Section Spacing - Mobile -> Desktop */
  --section-spacing-mobile: clamp(60px, 8vw, 80px);
  --section-spacing-tablet: clamp(80px, 10vw, 100px);
  --section-spacing-desktop: clamp(100px, 12vw, 140px);

  /* Typography - WCAG-konform, hohe Kontraste */
  --text-primary: rgba(255, 255, 255, 1.0);        /* Headlines */
  --text-secondary: rgba(255, 255, 255, 0.90);     /* Body */
  --text-tertiary: rgba(255, 255, 255, 0.75);      /* Captions */
  --text-accent: #BA8B02;                          /* Gold */
  --text-disabled: rgba(255, 255, 255, 0.40);      /* Disabled States */

  /* Background System - Einheitlich */
  --bg-base: #0d0d0d;
  --bg-elevated: #181818;
  --bg-subtle: rgba(255, 255, 255, 0.02);

    /* Gold Accent */
  --accent-primary: #BA8B02;
  --accent-hover: #D4A004;
  --accent-glow: rgba(186, 139, 2, 0.15);

  /* Layout */
  --container-max: min(1400px, 92vw);
  --content-max: min(1200px, 88vw);
  --text-max: min(800px, 85vw);

  /* Animation Timings - wie Dropbox */
  --duration-fast: 200ms;
  --duration-normal: 400ms;
  --duration-slow: 600ms;
  --easing-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --easing-entrance: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-exit: cubic-bezier(0.4, 0, 1, 1);

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Shadows */
  --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);
  --shadow-glow: 0 0 40px var(--accent-glow);

}




/* ========== RESPONSIVE FONT SIZES - Tablet ========== */
@media (max-width: 1024px) {
  :root {
    --font-size-h1: 52px;
    --font-size-h2: 40px;
    --font-size-h3: 32px;
    --font-size-h4: 24px;
    --font-size-h5: 20px;
    --font-size-body-xl: 18px;
  }
}

/* ========== RESPONSIVE FONT SIZES - Mobile ========== */
@media (max-width: 768px) {
  :root {
    --font-size-h1: 40px;
    --font-size-h2: 32px;
    --font-size-h3: 28px;
    --font-size-h4: 22px;
    --font-size-h5: 18px;
    --font-size-body-xl: 17px;
    --font-size-body-lg: 16px;
  }
}

/* ========== RESPONSIVE FONT SIZES - Small Mobile ========== */
@media (max-width: 480px) {
  :root {
    --font-size-h1: 32px;
    --font-size-h2: 28px;
    --font-size-h3: 24px;
    --font-size-h4: 20px;
    --font-size-body-xl: 16px;
  }
}


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

/* ========== FONT FAMILY CLASSES ========== */


/* ----------------------------------------------------------------
   3. TYPOGRAPHY SYSTEM - Professionelle Hierarchie
   ---------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.02em;
}

h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);        /* 40px -> 64px */
  font-weight: 700;
  letter-spacing: -0.03em;
}

h2 {
  font-size: clamp(2rem, 4vw, 3rem);          /* 32px -> 48px */
  font-weight: 600;
}

h3 {
  font-size: clamp(1.5rem, 3vw, 2rem);        /* 24px -> 32px */
}

h4 {
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);   /* 20px -> 24px */
}

p {
  font-size: clamp(1rem, 1.5vw, 1.125rem);    /* 16px -> 18px */
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0;
}

.text-large {
  font-size: clamp(1.125rem, 2vw, 1.25rem);   /* 18px -> 20px */
  color: var(--text-secondary);
}

.text-small {
  font-size: clamp(0.875rem, 1.25vw, 1rem);   /* 14px -> 16px */
  color: var(--text-tertiary);
}

/* ========== HEADING CLASSES ========== */

.heading-1,
.h1 {
  font-family: var(--font-headline);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--text-white);
  margin: 0;
}

.heading-2,
.h2 {
  font-family: var(--font-headline);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--text-white);
  margin: 0;
}

.heading-3,
.h3 {
  font-family: var(--font-headline-alt);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  color: var(--text-white);
  margin: 0;
}

.heading-4,
.h4 {
  font-family: var(--font-headline-alt);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  color: var(--text-white);
  margin: 0;
}

.heading-5,
.h5 {
  font-family: var(--font-headline-alt);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  color: var(--text-white);
  margin: 0;
}

.heading-6,
.h6 {
  font-family: var(--font-headline-alt);
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  color: var(--text-white);
  margin: 0;
}

/* ========== BODY TEXT CLASSES ========== */

.text-xl {
  font-family: var(--font-body);
  font-size: var(--font-size-body-xl);
  line-height: var(--line-height-relaxed);
  color: rgba(255, 255, 255, 0.8);
}

.text-lg {
  font-family: var(--font-body);
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-relaxed);
  color: rgba(255, 255, 255, 0.8);
}

.text-base,
.body-text {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-normal);
  color: rgba(255, 255, 255, 0.8);
}

.text-sm {
  font-family: var(--font-body);
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-normal);
  color: rgba(255, 255, 255, 0.7);
}

.text-xs {
  font-family: var(--font-body);
  font-size: var(--font-size-body-xs);
  line-height: var(--line-height-normal);
  color: rgba(255, 255, 255, 0.6);
}

/* ========== FONT WEIGHT UTILITIES ========== */

.font-light { font-weight: var(--font-weight-light); }
.font-regular { font-weight: var(--font-weight-regular); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }
.font-extrabold { font-weight: var(--font-weight-extrabold); }
.font-black { font-weight: var(--font-weight-black); }

/* ========== TEXT COLOR UTILITIES ========== */

.text-white { color: var(--text-white); }
.text-gray { color: var(--text-gray); }
.text-gold { color: var(--primary-gold); }
.text-black { color: var(--secondary-black); }

/* ========== TEXT ALIGNMENT ========== */

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* ========== SPECIAL STYLES ========== */

.label-text {
  font-family: var(--font-headline-alt);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  color: var(--primary-gold);
}

.button-text {
  font-family: var(--font-headline-alt);
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-normal);
}

.mainHeaderFont{
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.mainBodyFont{
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}


/* ----------------------------------------------------------------
   12. UTILITY CLASSES
   ---------------------------------------------------------------- */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }
.mt-2xl { margin-top: var(--spacing-2xl); }
.mt-3xl { margin-top: var(--spacing-3xl); }

.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }
.mb-2xl { margin-bottom: var(--spacing-2xl); }
.mb-3xl { margin-bottom: var(--spacing-3xl); }

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

/* ----------------------------------------------------------------
   4. SCROLL ANIMATION SYSTEM - Wie Dropbox
   ---------------------------------------------------------------- */
.animate-on-scroll {
  opacity: 0;
  filter: blur(20px);
  transform: translateY(-32px) scale(0.95);
  transition: 
    opacity var(--duration-slow) var(--easing-entrance),
    filter var(--duration-slow) var(--easing-entrance),
    transform var(--duration-slow) var(--easing-entrance);
  will-change: opacity, filter, transform;
}

.animate-on-scroll.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);
}

/* Staggered Animation - Elemente erscheinen nacheinander */
.animate-on-scroll:nth-child(1) { transition-delay: 0ms; }
.animate-on-scroll:nth-child(2) { transition-delay: 100ms; }
.animate-on-scroll:nth-child(3) { transition-delay: 200ms; }
.animate-on-scroll:nth-child(4) { transition-delay: 300ms; }
.animate-on-scroll:nth-child(5) { transition-delay: 400ms; }
.animate-on-scroll:nth-child(6) { transition-delay: 500ms; }

/* Alternative: Fade from bottom */
.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: 
    opacity var(--duration-normal) var(--easing-smooth),
    transform var(--duration-normal) var(--easing-smooth);
}

.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll,
  .fade-up {
    transition: none !important;
    filter: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ----------------------------------------------------------------
   5. SECTION LAYOUT - Responsive Spacing
   ---------------------------------------------------------------- */
.section {
  padding-block: var(--section-spacing-mobile);
  position: relative;
  overflow: hidden;
}

*, html{
    padding: 0px;
    margin: 0px;
}

/* Index-Page */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg-base);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
}

/* -> Main Content */
#mainContent{
  padding: 0;
  margin: 0;
}

/* -> Cookie Settings */
.settings-btn{
  background-color: transparent !important;
  position: fixed; 
  bottom: 0;
  right: 0; 
  margin: 2%; 
  border-radius: 5px; 
  border-color:transparent; 
  font-size: 1.6em; 
  opacity: 0.6;
  z-index: 10000;
}

.settings-btn:hover{
  opacity: 1;
  animation: tilt-shaking 0.20s infinite ease-in;
}

.pm__title{
  color: black !important;
}

.cm__title{
  color: black !important;
}

/* -> Main Navigation */
/* wird über nav.css importiert */


/* -> Main Content -> Partner */
/* wird über hero-section.css importiert  */


/* -> Main Content -> Partner */
/* wird über partner-banner.css importiert  */


/* -> Main Content -> Problem */
/* wird über problem-section.css importiert */


/* -> Main Content -> About-Solution */
/* wird über about-solution.css importiert */


/* -> Main Content -> Solution */
/* wird über solution.css importiert */


/* -> Main Content -> Socialproof */
/* wird über testimonials.css importiert */


/* -> Main Content -> Firststeps */
/* wird über firststeps.css importiert */


/* -> Main Content -> FAQ */
/* wird über faq.css importiert */


/* -> Main Footer */
/* wird über footer.css importiert */

/* SaaS Design Fix  */
/* wird importiert über saas-design-fix.css  */


/* Custom: Additional Animation */

@keyframes tilt-shaking {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  50% { transform: rotate(0eg); }
  75% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

@keyframes tilt-n-move-shaking {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(5px, 5px) rotate(5deg); }
  50% { transform: translate(0, 0) rotate(0eg); }
  75% { transform: translate(-5px, 5px) rotate(-5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}