/* ======================================== */
/* MAIN SITE - CSS Variables              */
/* Color palette and theme settings       */
/* ======================================== */
:root {
  --rqc-night: #101828;
  --rqc-night-soft: #213255;
  --rqc-teal: #47a7c8;
  --rqc-green: #00a63d;
  --rqc-violet: #7051a7;
  --rqc-blue: #165dfb;
  --rqc-snow: #f4f7fb;
  /* Dark text color for body content */
  --rqc-ink: #101828;
  --rqc-muted: #61708f;
  --rqc-border: rgba(21, 35, 63, 0.1);
  --rqc-shadow: 0 24px 70px rgba(16, 28, 51, 0.14);
  --bs-body-color: #31405d;
  --bs-body-bg: #e6e9f0;
  --bs-primary: #47a7c8;
  --bs-link-color: #1d4f77;
  --bs-link-hover-color: #0e3053;
  scroll-behavior: smooth;
}

/* ======================================== */
/* MAIN SITE - Global Styles              */
/* HTML & Body base styles                */
/* Navigation, links and buttons          */
/* ======================================== */

html {
  scroll-padding-top: 88px;
}

  body {
    font-family: "Avenir Next", "Segoe UI", "Trebuchet MS", sans-serif;
    color: var(--bs-body-color);
    background:
      linear-gradient(180deg, #f5f7fa 0%, #eef2f7 100%);
  }

a {
  text-decoration: none;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: calc(1000 + (1100 - 1000) * clamp(min(768 / 1920, 1), 0, 1));
  padding: 0.75rem 1rem;
  color: #fff;
  background: var(--rqc-night);
  border-radius: 0.75rem;
}

.site-navbar {
  padding: clamp(0.75rem, 4vh, 1.25rem) clamp(2rem, 8vw, 3rem);
  background: #101828;
  backdrop-filter: blur(calc(10px + (18px - 10px) * (1 - clamp(min(768 / 1920, 1), 0, 1))));
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: padding 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.site-navbar .navbar-brand {
  margin-right: auto;
}

.site-navbar .navbar-toggler {
  margin-left: auto;
}

.site-navbar.navbar-scrolled {
  padding: clamp(0.6rem, 3vh, 1rem) clamp(2rem, 8vw, 3rem);
  background: #101828;
}

.site-navbar.navbar-scrolled .navbar-brand img {
  height: clamp(1.6rem, 5vw, 2.4rem);
}

.navbar-brand img,
.footer-brand img {
  width: auto;
  height: clamp(2rem, 7vw, 3rem);
  transition: height 0.25s ease;
}

.navbar-brand {
  margin-left: 0;
}

.navbar-toggler {
  color: #fff;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.nav-link {
  position: relative;
  margin: 0 0.75rem;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.nav-link:hover,
.nav-link:focus,
.nav-link.active {
  color: #fff;
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
  color: #fff !important;
}

.nav-link.active::after {
  content: "";
  position: absolute;
  left: clamp(1rem, 3vw, 1.5rem);
  right: clamp(1rem, 3vw, 1.5rem);
  bottom: 0.15rem;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--rqc-green), var(--rqc-teal));
}

.btn-language {
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  font-weight: 600;
}

.btn-language:hover,
.btn-language:focus {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.btn-language::after {
    display: none;
  }

/* Flag icons for language button */
.flag {
    width: 1.25rem;
    height: 0.875rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    margin-right: 0.375rem;
}

.flag.flag-de {
    /* German flag - Black, Red, Gold horizontal stripes */
    background-image: linear-gradient(to bottom,
        #000000 0%, #000000 33.33%,
        #dd0000 33.33%, #dd0000 66.67%,
        #ffcc00 66.67%, #ffcc00 100%);
}

.flag.flag-en {
    /* Union Jack flag */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%2300247D' d='M512 256c0 141.4-114.6 256-256 256S0 397.4 0 256s114.6-256 256-256 256 114.6 256 256zm-89.4-89.4c0 49.7-40.3 89.4-89.4 89.4s-89.4-39.7-89.4-89.4 40.3-89.4 89.4-89.4 89.4 39.7 89.4 89.4z'/%3E%3Cpath fill='%23CF142B' d='M512 256c0 141.4-114.6 256-256 256S0 397.4 0 256s114.6-256 256-256 256 114.6 256 256zm-89.4-89.4c0 49.7-40.3 89.4-89.4 89.4s-89.4-39.7-89.4-89.4 40.3-89.4 89.4-89.4 89.4 39.7 89.4 89.4z'/%3E%3Cpath fill='%23FFFFFF' d='M512 256c0 141.4-114.6 256-256 256S0 397.4 0 256s114.6-256 256-256 256 114.6 256 256z'/%3E%3C/svg%3E");
}

/* Language switcher button styles - Minimal & Clean Design */
.btn-language {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    font-weight: 600;
    transition: all 0.2s ease;
}

.flag-icon {
    width: 1.25rem;
    height: auto;
    margin-right: 0.375rem;
}

.btn-language:hover,
.btn-language:focus {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
}

.dropdown-item.lang-switch-btn:hover,
.dropdown-item.lang-switch-btn:focus {
    background-color: rgba(71, 167, 200, 0.2);
    transform: translateY(-1px);
}

/* Active language button */
.dropdown-item.lang-switch-btn.active {
    font-weight: 600;
    background-color: rgba(71, 167, 200, 0.35);
}

/* Inactive (non-active) language buttons - muted but readable */
.dropdown-item.lang-switch-btn:not(.active):not(:hover):not(:focus) {
    color: rgba(255, 255, 255, 0.7);
}

/* Disabled language button */
.dropdown-item.lang-switch-btn.disabled {
    color: rgba(255, 255, 255, 0.4) !important;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Smooth dropdown container for language switcher */
.dropdown-menu.lang-switch-container {
  padding: 0.75rem 0;
  border-radius: 1rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  background-color: #1a1a2e;
  backdrop-filter: blur(8px);
}

/* Dropdown item spacing */
.dropdown-item.lang-switch-btn {
  margin-bottom: 0.1rem;
}

/* Language switch buttons - high contrast text */
.dropdown-menu.lang-switch-container .lang-switch-btn {
  color: #ffffff;
  font-weight: 600;
}

.btn-accent {
  color: #fff;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--rqc-green), var(--rqc-teal));
  transition: transform 0.2s ease;
}

.btn-accent:hover,
.btn-accent:focus {
  color: #fff;
  transform: translateY(-1px);
}

.btn-cta {
  color: #fff;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--rqc-green), var(--rqc-violet));
  padding: 0.4rem 0.9rem;
  margin-right: 0.5vw;
  font-size: clamp(0.85rem, 1.2vw, 1rem);
  font-weight: 700;
}

.btn-cta:hover,
.btn-cta:focus {
  color: #fff;
  transform: translateY(-1px);
}

.btn-outline-light,
.btn-ghost,
.btn-outline-dark,
.btn-light,
.btn-accent {
  font-weight: 650;
}

.btn-ghost {
  color: #fff;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(calc(8px + (12px - 8px) * clamp(min(375 / 768, 1), 0, 1)));
}

.btn-ghost:hover,
.btn-ghost:focus {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
}

.hero-section {
  position: relative;
  min-height: clamp(60vh, 50vw, 80vh);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: clamp(6rem, 18vh, 10rem) 0 0;
  background:
    /* Deep night gradient base */
    linear-gradient(145deg, rgba(16, 24, 40, 0.96), rgba(16, 24, 40, 0.88)),
    /* Animated multi-color radial glows in company colors */
    radial-gradient(circle at 10% 85%, rgba(71, 167, 200, 0.12) 0%, transparent 35%),
    radial-gradient(circle at 90% 15%, rgba(112, 81, 167, 0.12) 0%, transparent 35%),
    radial-gradient(circle at 50% 50%, rgba(88, 197, 113, 0.08) 0%, transparent 45%),
    /* Subtle grid pattern overlay */
    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: 100% 100%, 100% 100%, clamp(48rem, 60vw, 72rem) clamp(48rem, 60vw, 72rem), clamp(32px, 1.5vw, 48px) clamp(32px, 1.5vw, 48px), clamp(32px, 1.5vw, 48px) clamp(32px, 1.5vw, 48px);
  animation: hero-bg-shift 20s ease-in-out infinite;
}

.hero-section .kontakt-hero {
  min-height: clamp(60vh, 50vw, 80vh);
  align-content: center;
}

/* Full-screen hero for kontakt page with background image */
.hero-section.contact-hero {
  min-height: 100vh;
  background-image: url("assets/background_kontakt.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Semi-transparent blurred box around kontakt hero content */
.kontakt-hero-wrapper {
  position: relative;
  margin-bottom: clamp(3rem, 8vw, 6rem);
  margin-left: -clamp(4rem, 10vw, 6rem);
  padding: clamp(2.5rem, 5vw, 3.5rem) clamp(3rem, 8vw, 5rem);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4),
              inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Responsive adjustments for smaller screens */
@media (max-width: 991px) {
  .kontakt-hero-wrapper {
    margin-left: -clamp(2rem, 5vw, 3rem);
    padding: clamp(2rem, 4vw, 3rem) clamp(2.5rem, 6vw, 4rem);
  }
}

@media (max-width: 767px) {
  .kontakt-hero-wrapper {
    margin-left: -clamp(1rem, 3vw, 2rem);
    padding: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 5vw, 3rem);
  }
}

/* Wider box for screens between 992px and 1200px */
@media (min-width: 992px) and (max-width: 1200px) {
  .kontakt-hero-wrapper {
    padding: clamp(0.5rem, 2vw, 3.5rem) clamp(3rem, 8vw, 1rem);
  }
}

/* Kontaktwege section with dark background and glow effects */
.kontaktwege_style {
  position: relative;
  padding: clamp(4rem, 8vw, 6rem) 0;
  background:
    /* Deep night gradient base */
    linear-gradient(135deg, rgba(16, 24, 40, 0.95), rgba(10, 15, 30, 0.98)),
    /* Company colors radial glows */
    radial-gradient(circle at 10% 70%, rgba(71, 167, 200, 0.15) 0%, transparent 40%),
    radial-gradient(circle at 90% 30%, rgba(88, 197, 113, 0.15) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(112, 81, 167, 0.12) 0%, transparent 50%),
    /* Subtle grid pattern */
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, clamp(48rem, 60vw, 72rem) clamp(48rem, 60vw, 72rem),
                   clamp(32px, 1.5vw, 48px) clamp(32px, 1.5vw, 48px),
                   clamp(32px, 1.5vw, 48px) clamp(32px, 1.5vw, 48px);
  animation: kontaktwege-bg-shift 20s ease-in-out infinite;
}

/* Animated background shift for kontaktwege section */
@keyframes kontaktwege-bg-shift {
  0%, 100% {
    background-position: 0% 50%, 0% 70%, 50% 50%, 0 0, 0 0;
  }
  25% {
    background-position: 2% 48%, 2% 68%, 52% 48%, clamp(8px, 0.4vw, 12px) clamp(8px, 0.4vw, 12px),
                        clamp(8px, 0.4vw, 12px) clamp(8px, 0.4vw, 12px);
  }
  50% {
    background-position: 4% 52%, 4% 72%, 48% 52%, clamp(16px, 0.8vw, 24px) clamp(16px, 0.8vw, 24px),
                        clamp(16px, 0.8vw, 24px) clamp(16px, 0.8vw, 24px);
  }
  75% {
    background-position: 6% 50%, 6% 70%, 54% 50%, clamp(12px, 0.6vw, 18px) clamp(12px, 0.6vw, 18px),
                        clamp(12px, 0.6vw, 18px) clamp(12px, 0.6vw, 18px);
  }
}

/* Animated background shift for dynamic feel */
@keyframes hero-bg-shift {
  0%, 100% {
    background-position: 0% 50%, 0% 85%, 50% 50%, 0 0, 0 0;
  }
  25% {
    background-position: 2% 48%, 2% 83%, 52% 48%, clamp(8px, 0.4vw, 12px) clamp(8px, 0.4vw, 12px), clamp(8px, 0.4vw, 12px) clamp(8px, 0.4vw, 12px);
  }
  50% {
    background-position: 4% 52%, 4% 87%, 48% 52%, clamp(16px, 0.8vw, 24px) clamp(16px, 0.8vw, 24px), clamp(16px, 0.8vw, 24px) clamp(16px, 0.8vw, 24px);
  }
  75% {
    background-position: 6% 50%, 6% 85%, 54% 50%, clamp(12px, 0.6vw, 18px) clamp(12px, 0.6vw, 18px), clamp(12px, 0.6vw, 18px) clamp(12px, 0.6vw, 18px);
  }
}

/* Enhanced glow effects for unser-vorgehen page */
.unser-vorgehen-page .unser-vorgehen-hero-section {
  background:
    linear-gradient(145deg, rgba(16, 24, 40, 0.96), rgba(16, 24, 40, 0.88)),
    radial-gradient(circle at 10% 85%, rgba(71, 167, 200, 0.12) 0%, transparent 35%),
    radial-gradient(circle at 90% 15%, rgba(112, 81, 167, 0.12) 0%, transparent 35%),
    radial-gradient(circle at 50% 50%, rgba(88, 197, 113, 0.08) 0%, transparent 45%),
    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: 100% 100%, 100% 100%, clamp(48rem, 60vw, 72rem) clamp(48rem, 60vw, 72rem), clamp(32px, 1.5vw, 48px) clamp(32px, 1.5vw, 48px), clamp(32px, 1.5vw, 48px) clamp(32px, 1.5vw, 48px);
}

/* ======================================== */
/* UNSER-VORGEHEN HERO SECTION            */
/* Dynamic Overlay Design                 */
/* Elegant, modern hero with image overlay */
/* ======================================== */

.unser-vorgehen-hero-section {
  position: relative;
  min-height: clamp(50vh, 45vw, 70vh);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 0;
}

/* ======================================== */
/* RQC HERO SECTION - UNSER VORGEHEN     */
/* Background image with glassmorphism   */
/* ======================================== */

.rqc-hero-section-overlay {
  position: relative;
  min-height: clamp(75vh, 65vw, 100vh);
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Ambient glow effects - teal/green on left, violet/blue on right */
.rqc-glow-effect {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.35;
  z-index: 2;
  animation: rqc-pulse-glow 8s ease-in-out infinite;
}

.rqc-glow-left {
  left: -15vw;
  top: 15%;
  width: 45vw;
  height: 45vw;
  background: radial-gradient(circle, rgba(71, 167, 200, 0.3), transparent 60%);
}

.rqc-glow-right {
  right: -15vw;
  bottom: 15%;
  width: 48vw;
  height: 48vw;
  background: radial-gradient(circle, rgba(112, 81, 167, 0.3), transparent 60%);
}

@keyframes rqc-pulse-glow {
  0%, 100% { opacity: 0.25; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(1.05); }
}

/* Full-width background image layer - covers complete hero section */
.rqc-hero-background-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  min-height: clamp(75vh, 65vw, 100vh);
}

.rqc-hero-bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Subtle gradient overlay for text readability - much lighter */
.rqc-hero-gradient-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(135deg, rgba(16, 24, 40, 0.4) 0%, rgba(16, 24, 40, 0.25) 50%, rgba(16, 24, 40, 0.35) 100%);
}

/* Hero content container with glassmorphism effect */
.rqc-hero-row {
  position: relative;
  z-index: 3;
  width: 100%;
  display: flex;
  justify-content: flex-start;
}

/* Semi-transparent card with blurred background showing the image behind - centered vertically, positioned left */
.rqc-hero-content-card {
  max-width: 100%;
  padding: clamp(3rem, 7vw, 0.5rem);
  margin-right: clamp(3rem, 8vw, 6rem);
  margin-top: clamp(4rem, -10vw, -6rem);
  border-radius: 28px;
  backdrop-filter: blur(5px);
  box-shadow: inset 0 0px 20px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Section kicker styling */
.rqc-section-kicker {
  display: inline-block;
  margin-bottom: 1rem;
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Hero title with gradient subtitle */
.rqc-hero-title {
  margin-bottom: 1.5rem;
  color: #fff;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.rqc-subtitle-gradient {
  display: block;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.7) 50%, #fff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rqc-gradient-flow 4s ease-in-out infinite;
}

@keyframes rqc-gradient-flow {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}

/* Hero description paragraph */
.rqc-hero-description {
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 2rem;
}

/* Button group with glassmorphism */
.rqc-btn-primary {
  display: inline-block;
  padding: 1rem 2rem;
  border-radius: 999px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.85rem;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, var(--rqc-teal), var(--rqc-green));
  color: #fff;
  border: none;
  box-shadow: 0 8px 24px rgba(71, 167, 200, 0.3);
}

.rqc-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(71, 167, 200, 0.45);
}

.rqc-btn-secondary {
  display: inline-block;
  padding: 1rem 2rem;
  border-radius: 999px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.85rem;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8px);
}

.rqc-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

/* Responsive adjustments */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .rqc-hero-content-card {
    margin-top: clamp(8rem, 5vw, 3rem);
    max-width: 100%;
    margin-right: clamp(0rem, 0vw, 6rem);
  }
}

@media (max-width: 991.98px) {
  .process-card {
    margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
  }

  .rqc-hero-content-card {
    padding: clamp(2rem, 5vw, 3rem);
    margin-right: clamp(1.5rem, 4vw, 3rem);
    max-width: 80%;
  }
  
  .rqc-glow-left,
  .rqc-glow-right {
    width: 38vw;
    height: 38vw;
  }
}

@media (max-width: 767.98px) {
    .process-card-wrapper {
      flex-direction: column;
      align-items: stretch;
      gap: clamp(1rem, 3vh, 2rem);
    }

    .process-card-wrapper span:first-child {
      display: none;
    }

    .process-card {
      text-align: center;
    }

    .process-image {
      min-height: auto;
      margin-bottom: 0;
      width: 100%;
      aspect-ratio: 16 / 9;
    }

    .process-step {
      position: static;
      margin-bottom: clamp(0.5rem, 2vh, 1rem);
    }

  .rqc-hero-section-overlay {
    padding: calc(2rem + (3rem - 2rem) * clamp(min(375 / 768, 1), 0, 1));
  }

  .rqc-hero-content-card {
    padding: clamp(1.5rem, 4vw, 2.5rem);
    margin-right: clamp(0rem, 3vw, 2rem);
    max-width: 100%;
  }

  .rqc-glow-left,
  .rqc-glow-right {
    width: 35vw;
    height: 35vw;
  }
}
.rv-gradient-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(135deg, rgba(71, 167, 200, 0.08) 0%, rgba(88, 197, 113, 0.08) 50%, rgba(112, 81, 167, 0.08) 100%),
    radial-gradient(circle at 20% 80%, rgba(71, 167, 200, 0.15), transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(88, 197, 113, 0.15), transparent 40%);
  background-size: 200% 200%;
  animation: rv-gradient-shift 15s ease-in-out infinite;
}

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

/* Ambient glow effects for depth */
.rv-glow-effect {
  position: absolute;
  border-radius: 50%;
  filter: calc(24px + (40px - 24px) * clamp(min(375 / 768, 1), 0, 1));
  opacity: 0.6;
  z-index: 1;
  animation: rv-pulse-glow 8s ease-in-out infinite;
}

.rv-glow-ambient-left {
  left: calc(-1 * clamp(8vw, 12rem, 15rem));
  top: clamp(10%, 15vh, 20%);
  width: clamp(20vw, 35rem, 45rem);
  height: clamp(20vw, 35rem, 45rem);
  background: radial-gradient(circle, rgba(71, 167, 200, 0.3), transparent 60%);
}

.rv-glow-ambient-right {
  right: calc(-1 * clamp(8vw, 12rem, 15rem));
  bottom: clamp(10%, 15vh, 20%);
  width: clamp(20vw, 36rem, 48rem);
  height: clamp(20vw, 36rem, 48rem);
  background: radial-gradient(circle, rgba(88, 197, 113, 0.3), transparent 60%);
}

@keyframes rv-pulse-glow {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.05); }
}

/* Hero content container - main wrapper */
.rv-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: clamp(60vh, 50vw, 80vh);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Background image layer - positioned behind text */
.rv-image-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.rv-hero-img {
  width: 100%;
  height: clamp(250px, 40vh, 600px);
  object-fit: cover;
  opacity: calc(0.9 + (0.85 - 0.9) * clamp(min(375 / 1920, 1), 0, 1));
}


/* Foreground text overlay - positioned on top of image */
.rv-text-overlay {
  position: relative;
  z-index: 4;
  width: 55%;
}


.rv-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--rqc-teal);
  animation: rv-blink 2s ease-in-out infinite;
}

@keyframes rv-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

/* Main heading with animated gradient text */
.rv-hero-heading {
  margin-bottom: 1.2rem;
  line-height: calc(0.97 + (1.1 - 0.97) * clamp(min(375 / 768, 1), 0, 1));
}

.rv-line {
  display: block;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: 0.6rem;
  text-shadow: 0 calc(1px + (2px - 1px) * clamp(min(375 / 768, 1), 0, 1)) calc(10px + (20px - 10px) * clamp(min(375 / 768, 1), 0, 1)) rgba(0, 0, 0, 0.3);
}

.rv-gradient-text-animated {
  display: block;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 700;
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.8) 50%, #fff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rv-gradient-flow 4s ease-in-out infinite;
}

@keyframes rv-gradient-flow {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}

/* Hero description paragraph */
.rv-hero-description {
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 2rem;
  max-width: 60ch;
}

/* Call to action buttons group */
.rv-cta-group {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.rv-btn-primary,
.rv-btn-secondary {
  padding: 1rem 2rem;
  border-radius: 999px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.85rem;
  transition: all 0.3s ease;
}

.rv-btn-primary {
  background: linear-gradient(135deg, var(--rqc-teal), var(--rqc-green));
  color: #fff;
  border: none;
  box-shadow: 0 8px 24px rgba(71, 167, 200, 0.3);
}

.rv-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(71, 167, 200, 0.45);
}

.rv-btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: calc(8px + (10px - 8px) * clamp(min(375 / 768, 1), 0, 1));
}

.rv-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}


.rv-float svg {
  width: clamp(2.5rem, 8vw, 4rem);
  height: clamp(2.5rem, 8vw, 4rem);
  color: rgba(255, 255, 255, 0.8);
}

/* Scroll indicator with animation */
.rv-scroll-indicator {
  position: absolute;
  bottom: clamp(4rem, 10vh, 6rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.5rem, 2vh, 1rem);
  opacity: 0.7;
}

.rv-scroll-text {
  font-size: clamp(0.65rem, 1.8vw, 0.9rem);
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

.rv-scroll-indicator svg {
  width: clamp(1.2rem, 4vw, 2rem);
  height: clamp(1.2rem, 4vw, 2rem);
  color: rgba(255, 255, 255, 0.9);
  animation: rv-scroll-bounce 2s ease-in-out infinite;
}

@keyframes rv-scroll-bounce {
  0%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(clamp(6px, 3vh, 12px)); }
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
  .unser-vorgehen-hero-section {
    padding: calc(3.2rem + (4rem - 3.2rem) * clamp(min(375 / 768, 1), 0, 1)) 0 calc(1.6rem + (2rem - 1.6rem) * clamp(min(375 / 768, 1), 0, 1));
  }

  .rv-glow-ambient-left,
  .rv-glow-ambient-right {
    width: clamp(28rem, 50vw, 35rem);
    height: clamp(28rem, 50vw, 35rem);
  }

  .rv-float svg {
    width: clamp(2.4rem, 6vw, 4rem);
    height: clamp(2.4rem, 6vw, 4rem);
  }

  /* Kontakt hero bottom margin for smaller screens */
  .kontakt-hero {
    margin-bottom: 2vh;
  }

  /* Navbar responsive adjustments - reduce horizontal padding on smaller screens */
  .site-navbar {
    padding: clamp(0.75rem, 4vh, 1.25rem) clamp(1.5rem, 6vw, 2.5rem);
  }

  .site-navbar.navbar-scrolled {
    padding: clamp(0.6rem, 3vh, 1rem) clamp(1.5rem, 6vw, 2.5rem);
  }
}

@media (max-width: 767.98px) {
  .unser-vorgehen-hero-section {
    padding: calc(2.4rem + (3rem - 2.4rem) * clamp(min(375 / 768, 1), 0, 1)) 0 calc(1.2rem + (1.5rem - 1.2rem) * clamp(min(375 / 768, 1), 0, 1));
  }

  .rv-image-layer {
    position: relative;
    min-height: 40vh;
  }

  .rv-hero-img {
    height: clamp(200px, 25vw, 300px);
  }

  .rv-text-overlay {
    margin-top: clamp(-100px, -30vh, -150px);
  }

  .rv-scroll-indicator {
    bottom: clamp(0.75rem, 4vh, 1.25rem);
  }
}

.section-kicker {
  display: inline-block;
  margin-bottom: 1rem;
  color: var(--rqc-teal);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero-title {
  margin-bottom: 2.5rem;
  color: #fff;
  font-weight: 800;
  line-height: 0.97;
  letter-spacing: -0.03em;
}

.text-gradient {
  background: linear-gradient(90deg, #ffffff, #9fe2ef);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-copy {
  max-width: 36rem;
  margin-bottom: 1.5rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.1rem;
  line-height: 1.8;
}

/* Hero section box wrapper - only for einsatzmoeglichkeiten.html */
.hero-box-wrapper {
  position: relative;
  margin-top: clamp(1rem, 3.5vw, 2rem);
  padding: clamp(2rem, 6vw, 4rem);
  border-radius: 24px;
  background: rgba(32, 9, 68, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(20px);
}

/* Responsive top margin adjustments */
@media (max-width: 767.98px) {
  .hero-box-wrapper {
    margin-top: clamp(0.5rem, 2vw, 1rem);
    padding: clamp(1.5rem, 4vw, 2.5rem);
  }

  /* Responsive text sizing for hero content on mobile */
  .hero-box-wrapper .hero-title {
    font-size: clamp(1.75rem, 6vw, 2.5rem) !important;
    line-height: 1.2;
  }

  .hero-box-wrapper .display-6 {
    font-size: clamp(1.1rem, 3vw, 1.4rem) !important;
  }

  .hero-box-wrapper .hero-copy {
    font-size: clamp(0.95rem, 2vw, 1.1rem);
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .hero-box-wrapper {
    margin-top: clamp(0.75rem, 2.5vw, 1.5rem);
    padding: clamp(1.75rem, 5vw, 3rem);
  }

  /* Responsive text sizing for hero content on tablet */
  .hero-box-wrapper .hero-title {
    font-size: clamp(2rem, 6.5vw, 3rem) !important;
    line-height: 1.15;
  }

  .hero-box-wrapper .display-6 {
    font-size: clamp(1.3rem, 3.5vw, 1.7rem) !important;
  }

  .hero-box-wrapper .hero-copy {
    font-size: clamp(1rem, 2.2vw, 1.15rem);
  }
}

@media (min-width: 992px) {
  .hero-box-wrapper {
    margin-top: clamp(1rem, 3.5vw, 2rem);
    padding: clamp(2rem, 6vw, 4rem);
  }

  /* Responsive text sizing for hero content on desktop */
  .hero-box-wrapper .hero-title {
    font-size: clamp(2.5rem, 7vw, 3.5rem) !important;
    line-height: 1.1;
  }

  .hero-box-wrapper .display-6 {
    font-size: clamp(1.5rem, 4vw, 2rem) !important;
  }

  .hero-box-wrapper .hero-copy {
    font-size: clamp(1.05rem, 2.3vw, 1.2rem);
  }
}

.hero-subtitle {
  display: block;
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
  color: var(--rqc-ink);
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  line-height: 1.4;
  font-weight: 600;
}

.hero-badges,
.hero-actions {
  margin-bottom: 1.6rem;
}

.badge-chip {
  display: inline-flex;
  align-items: center;
  margin: 0 0.65rem 0.65rem 0;
  padding: 0.55rem 0.85rem;
  color: #fff;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.92rem;
  font-weight: 700;
}

.hero-proof {
  max-width: 25rem;
  padding: 1.1rem 1.2rem;
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

#heroCarousel .carousel-inner {
  display: flex;
  transition: transform 0.6s ease;
  justify-content: flex-start; /* Align carousel items to the left */
}

#heroCarousel .carousel-item {
  background: transparent;
  border-radius: 0.5rem;
  border: none;
  min-height: clamp(40vh, 45vw, 60vh);
  padding-top: calc(2.4rem + (3rem - 2.4rem) * clamp(min(375 / 768, 1), 0, 1));
  padding-bottom: calc(1.6rem + (2rem - 1.6rem) * clamp(min(375 / 768, 1), 0, 1));
}

#heroCarousel .carousel-item img {
  max-width: none; /* Remove image constraints */
}

#heroCarousel .carousel-control-prev,
#heroCarousel .carousel-control-next {
  width: 6%;
  opacity: 0.8;
  position: absolute;
  bottom: calc(clamp(1rem, 2vh, 1.5rem) + (clamp(0.75rem, 1.5vw, 1.25rem) * clamp(min(375 / 768, 1), 0, 1)));
  z-index: 1; /* Lower z-index to be behind text */
}

#heroCarousel .carousel-control-prev {
  left: calc(clamp(-5rem, -3vw, 0rem)); /* Positioned from the left edge of carousel */
}

#heroCarousel .carousel-control-next {
  right: calc(clamp(0rem, -1vw, 0rem)); /* Positioned from the right edge of carousel */
}

#heroCarousel .carousel-control-prev-icon,
#heroCarousel .carousel-control-next-icon {
  width: clamp(2.5rem, 5vw, 3.5rem);
  height: clamp(2.5rem, 5vw, 3.5rem);
}

.hero-proof-wide {
  background: transparent;
  border: none;
  text-align: center;
  margin-top: calc(-1 * (clamp(2rem, 4vw, 3rem) + (clamp(1.5rem, 3vw, 2rem) * clamp(min(375 / 768, 1), 0, 1))));
  padding: calc(clamp(2rem, 4vw, 3rem) + (clamp(1rem, 2vw, 1.5rem) * clamp(min(375 / 768, 1), 0, 1))) calc(clamp(1rem, 3vw, 2rem) + (clamp(0.75rem, 2vw, 1.5rem) * clamp(min(375 / 768, 1), 0, 1)));
}

.hero-proof-wide p {
  margin: 0rem;
  padding-bottom: calc(clamp(0.4rem, 0.8vh, 0.7rem) + (clamp(0.2rem, 0.3vw, 0.5rem) * clamp(min(375 / 768, 1), 0, 1)));
}

/* Scroll indicator inside hero-proof-wide */
.hero-proof-wide .scroll-indicator {
  margin-top: calc(clamp(0.5rem, 1vw, 1rem) + (clamp(0.25rem, 0.5vw, 0.75rem) * clamp(min(375 / 768, 1), 0, 1)));
}

.hero-proof-wide .scroll-indicator svg {
  opacity: calc(0.7 + (0.9 - 0.7) * clamp(min(375 / 768, 1), 0, 1));
}

/* ======================================== */
/* MODELLIERUNG HERO SECTION              */
/* Larger hero section for modellierung page only */
/* ======================================== */

.modellierung-hero-section {
  position: relative;
  min-height: clamp(75vh, 60vw, 100vh);
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    /* Deep night gradient base */
    linear-gradient(145deg, rgba(16, 24, 40, 0.96), rgba(16, 24, 40, 0.88)),
    /* Animated multi-color radial glows in company colors */
    radial-gradient(circle at 10% 85%, rgba(71, 167, 200, 0.12) 0%, transparent 35%),
    radial-gradient(circle at 90% 15%, rgba(112, 81, 167, 0.12) 0%, transparent 35%),
    radial-gradient(circle at 50% 50%, rgba(88, 197, 113, 0.08) 0%, transparent 45%),
    /* Subtle grid pattern overlay */
    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: 100% 100%, 100% 100%, clamp(48rem, 60vw, 72rem) clamp(48rem, 60vw, 72rem), clamp(32px, 1.5vw, 48px) clamp(32px, 1.5vw, 48px), clamp(32px, 1.5vw, 48px) clamp(32px, 1.5vw, 48px);
  animation: hero-bg-shift 20s ease-in-out infinite;
}

/* Hero left content - the text/content side of hero section */
.hero-left-content {
  width: 50%;
  margin-top: -2%;
}

.hero-right-content {
  width: 50%;
  margin-top: 3%;
}

/* Responsive stacking order for hero section below 992px only */
@media (max-width: 991.98px) {
  .hero-left-content {
    margin-bottom: clamp(3rem, 6vh, 5rem);
    width: 100%;
  }

  /* Ensure codebox appears below text content on mobile */
  .hero-right-content {
    order: 2;
    width: 100%;
  }

  .hero-left-content {
    order: 1;
  }
}

/* Fix navbar overlap on small height screens */
.modellierung-page .modellierung-hero-section {
  padding-top: calc(clamp(6rem, 8vh, 10rem) + (clamp(3rem, 4vh, 5rem) * clamp(min(375 / 768, 1), 0, 1)));
}

/* Ensure hero content has proper spacing from navbar */
.modellierung-page .modellierung-hero-section .container {
  margin-top: calc(clamp(2rem, 3vh, 4rem) + (clamp(1rem, 1.5vh, 2rem) * clamp(min(375 / 768, 1), 0, 1)));
}

/* Add bottom padding for laptop sizes */
@media (min-width: 992px) {
  .modellierung-page .modellierung-hero-section .container {
    margin-bottom: clamp(4rem, 5vw, 6rem);
  }
}

/* Adjust glow positioning for small height screens */
@media (max-height: 600px) {
  .modellierung-page .hero-glow-left {
    top: 8%;
  }
  
  .modellierung-page .hero-glow-right {
    top: 48%;
  }
}

/* Ensure minimum height on very small screens */
@media (max-height: 500px) and (orientation: portrait) {
  .modellierung-hero-section {
    min-height: clamp(65vh, 55vw, 95vh);
  }
  
  /* Reduce glow sizes on very small screens */
  .hero-glow-left,
  .hero-glow-right {
    width: clamp(12vw, 18%, 20vw);
    height: clamp(12vw, 18%, 20vw);
  }
}

/* ======================================== */
/* Optimization subsite - reduce hero padding */
.optimization-page .hero-section {
  padding: 1rem 0 0.75rem;
}

/* Remove section-kicker margin for einsatzmoeglichkeiten page */
.einsatzmoeglichkeiten-page .section-kicker {
  margin-bottom: 0;
}

/* Move hero row up by 10rem on einsatzmoeglichkeiten page */
.einsatzmoeglichkeiten-page .hero-section .container {
  margin-top: -10rem;
}

/* ======================================== */
/* EINSAZMOEGELICHKEITEN HERO SECTION     */
/* Full-height hero covering top of page  */
/* ======================================== */

/* Increase hero height for einsatzmoeglichkeiten page (no top padding) */
.einsatzmoeglichkeiten-page .hero-section {
  min-height: clamp(100vh, 50vw, 100vh);
}


/* Ensure hero content has proper spacing from navbar on larger screens */
@media (min-width: 992px) {
  .einsatzmoeglichkeiten-page .hero-section .container {
    margin-bottom: clamp(4rem, 5vw, 6rem);
  }
}

/* ======================================== */
/* MODEL ROW STYLES                       */
/* Custom row with margin-bottom utility  */
/* ======================================== */

.model_row {
  margin-bottom: 1.5rem; /* Same as Bootstrap's mb-4 */
}

.hero-visual-container {
  min-height: clamp(40vh, 45vw, 60vh);
  padding-top: calc(2rem + (3rem - 2rem) * clamp(min(375 / 768, 1), 0, 1));
}

.scroll-indicator {
  display: flex;
  justify-content: center;
  margin-top: calc(-1 * clamp(4rem, 6vw, 8rem));
  animation: bounce 2s infinite;
}

.scroll-indicator svg {
  opacity: 0.7;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

/* ======================================== */
/* HERO BACKGROUND IMAGE LAYER STYLES     */
/* Full-width background image behind content */
/* ======================================== */

/* Hero section wrapper for background image layer */
.hero-background-wrapper {
  position: relative;
}

/* Background image layer - positioned behind carousel and text */
.hero-background-image-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  min-height: clamp(60vh, 50vw, 80vh);
}

/* Full-width background image with cover fit */
.hero-background-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: calc(0.85 + (0.9 - 0.85) * clamp(min(375 / 768, 1), 0, 1));
  position: absolute;
  top: 0;
  left: 0;
}

/* Hero carousel column - positioned above background */
.hero-carousel-column {
  position: relative;
  z-index: 2;
  margin-right: auto;
  max-width: clamp(50vw, 48rem, 60rem); /* Half of the webpage width */
}

/* ======================================== */
/* MAIN SITE - Hero Section Glow Effects  */
/* Animated company color glows           */
/* ======================================== */

/* Left ambient glow - teal to green gradient */
.hero-glow-left {
  position: absolute;
  left: calc(-1 * clamp(0vw, 7%, 15vw));
  top: 6%;
  width: clamp(15vw, 20%, 25vw);
  height: clamp(15vw, 20%, 25vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(71, 167, 200, 0.35) 0%, rgba(88, 197, 113, 0.25) 40%, transparent 70%);
  filter: blur(calc(36px + (60px - 36px) * clamp(min(1920 / 2560, 1), 0, 1)));
  opacity: 0.6;
  z-index: 0;
  animation: hero-glow-pulse-left 8s ease-in-out infinite;
}

/* Right ambient glow - violet to blue gradient */
.hero-glow-right {
  position: absolute;
  right: calc(-1 * clamp(0vw, 7%, 15vw));
  top: 63%;
  width: clamp(15vw, 20%, 25vw);
  height: clamp(15vw, 20%, 25vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(112, 81, 167, 0.35) 0%, rgba(22, 93, 251, 0.25) 40%, transparent 70%);
  filter: blur(calc(36px + (60px - 36px) * clamp(min(1920 / 2560, 1), 0, 1)));
  opacity: 0.6;
  z-index: 0;
  animation: hero-glow-pulse-right 8s ease-in-out infinite;
}

/* Bottom ambient glow - green accent */
.hero-glow-bottom {
  position: absolute;
  bottom: calc(-1 * clamp(12vh, 15%, 15rem));
  left: 50%;
  transform: translateX(-50%);
  width: clamp(45vw, 60%, 70vw);
  height: clamp(25vh, 30%, 40vh);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(88, 197, 113, 0.2) 0%, transparent 60%);
  filter: blur(calc(48px + (80px - 48px) * clamp(min(1920 / 2560, 1), 0, 1)));
  opacity: 0.4;
  z-index: 0;
}

/* Corner accent glows */
.hero-glow-corner {
  position: absolute;
  border-radius: 50%;
  filter: blur(calc(24px + (40px - 24px) * clamp(min(1920 / 2560, 1), 0, 1)));
  opacity: 0.35;
  z-index: 0;
  animation: hero-glow-float 12s ease-in-out infinite;
}

.hero-glow-corner-top-left {
  top: calc(-1 * clamp(6vh, 8%, 8rem));
  left: calc(-1 * clamp(4vw, 6%, 6rem));
  width: clamp(15vw, 20%, 24vw);
  height: clamp(15vw, 20%, 24vw);
  background: radial-gradient(circle, rgba(71, 167, 200, 0.3) 0%, transparent 55%);
}

.hero-glow-corner-top-right {
  top: calc(-1 * clamp(6vh, 8%, 8rem));
  right: calc(-1 * clamp(4vw, 6%, 6rem));
  width: clamp(14vw, 18%, 22vw);
  height: clamp(14vw, 18%, 22vw);
  background: radial-gradient(circle, rgba(112, 81, 167, 0.3) 0%, transparent 55%);
}

.hero-glow-corner-bottom-left {
  bottom: calc(-1 * clamp(6vh, 8%, 8rem));
  left: calc(-1 * clamp(4vw, 6%, 6rem));
  width: clamp(15vw, 20%, 20vw);
  height: clamp(15vw, 20%, 20vw);
  background: radial-gradient(circle, rgba(88, 197, 113, 0.25) 0%, transparent 50%);
}

.hero-glow-corner-bottom-right {
  bottom: calc(-1 * clamp(6vh, 8%, 8rem));
  right: calc(-1 * clamp(4vw, 6%, 6rem));
  width: clamp(15vw, 20%, 20vw);
  height: clamp(15vw, 20%, 20vw);
  background: radial-gradient(circle, rgba(22, 93, 251, 0.25) 0%, transparent 50%);
}

/* Animated glow pulse effect */
@keyframes hero-glow-pulse-left {
  0%, 100% {
    opacity: 0.45;
    transform: scale(1) translateX(clamp(-2px, -0.5vw, 0));
  }
  25% {
    opacity: 0.65;
    transform: scale(1.08) translateX(calc(-1rem + (clamp(4px, 1vw, 8px))));
  }
  50% {
    opacity: 0.55;
    transform: scale(1) translateX(calc(0.5rem - (clamp(2px, 0.5vw, 4px))));
  }
  75% {
    opacity: 0.6;
    transform: scale(1.05) translateX(calc(-0.8rem + (clamp(3px, 0.75vw, 6px))));
  }
}

@keyframes hero-glow-pulse-right {
  0%, 100% {
    opacity: 0.45;
    transform: scale(1) translateX(clamp(-2px, -0.5vw, 0));
  }
  25% {
    opacity: 0.65;
    transform: scale(1.08) translateX(calc(1rem - (clamp(4px, 1vw, 8px))));
  }
  50% {
    opacity: 0.55;
    transform: scale(1) translateX(calc(-0.5rem + (clamp(2px, 0.5vw, 4px))));
  }
  75% {
    opacity: 0.6;
    transform: scale(1.05) translateX(calc(0.8rem - (clamp(3px, 0.75vw, 6px))));
  }
}

@keyframes hero-glow-float {
  0%, 100% {
    opacity: 0.3;
    transform: translateY(clamp(-2px, -0.5vw, 0)) rotate(0deg);
  }
  25% {
    opacity: 0.45;
    transform: translateY(calc(-1rem + (clamp(4px, 1vw, 8px)))) rotate(clamp(1deg, 0.3vw, 2deg));
  }
  50% {
    opacity: 0.35;
    transform: translateY(calc(0.5rem - (clamp(2px, 0.5vw, 4px)))) rotate(calc(-1deg + (clamp(0.5deg, 0.1vw, 1deg))));
  }
  75% {
    opacity: 0.4;
    transform: translateY(calc(-0.8rem + (clamp(3px, 0.75vw, 6px)))) rotate(clamp(0.5deg, 0.2vw, 1deg));
  }
}

/* ======================================== */
/* MAIN SITE - Hero Section Visuals       */
/* Hero image wrapper and decorations     */
/* ======================================== */

.hero-visual {
  position: relative;
  min-height: clamp(25vh, 30rem, 40rem);
}

.hero-image-wrapper {
  position: relative;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow:
    0 calc(24px + (60px - 24px) * (1 - clamp(min(1920 / 2560, 1), 0, 1))) rgba(0, 0, 0, 0.18);
  background: linear-gradient(135deg, rgba(71, 167, 200, 0.15), rgba(96, 125, 139, 0.1));
}

.hero-image {
  width: 100%;
  height: auto;
  display: block;
  z-index: 1;
}

/* Edge blend pattern - creates a subtle gradient fade at edges */
.hero-image-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: 
    /* Top-left corner fade with teal glow */
    radial-gradient(ellipse 120% 80% at 0% 0%, rgba(71, 167, 200, 0.35) 0%, transparent 70%),
    /* Top-right corner fade with violet glow */
    radial-gradient(ellipse 120% 80% at 100% 0%, rgba(112, 81, 167, 0.35) 0%, transparent 70%),
    /* Bottom-left corner fade with green glow */
    radial-gradient(ellipse 120% 80% at 0% 100%, rgba(88, 197, 113, 0.3) 0%, transparent 70%),
    /* Bottom-right corner fade with blue glow */
    radial-gradient(ellipse 120% 80% at 100% 100%, rgba(22, 93, 251, 0.3) 0%, transparent 70%),
    /* Center highlight for depth */
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(255, 255, 255, 0.12) 0%, transparent 45%);
}

/* Animated border glow effect around image wrapper */
.hero-image-wrapper {
  position: relative;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 
    0 24px 60px rgba(0, 0, 0, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  background: linear-gradient(135deg, rgba(71, 167, 200, 0.15), rgba(96, 125, 139, 0.1));
}

/* Animated border gradient */
.hero-image-wrapper::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 1.5rem;
  background: linear-gradient(45deg, 
    rgba(71, 167, 200, 0.3), 
    rgba(88, 197, 113, 0.3), 
    rgba(112, 81, 167, 0.3),
    rgba(22, 93, 251, 0.3)
  );
  background-size: 400% 400%;
  z-index: -1;
  opacity: calc(0.5 + (0.6 - 0.5) * clamp(min(375 / 768, 1), 0, 1));
  filter: calc(6px + (8px - 6px) * clamp(min(375 / 768, 1), 0, 1));
  animation: hero-border-glow 6s ease-in-out infinite;
}

@keyframes hero-border-glow {
  0%, 100% { background-position: 0% 50%; }
  25% { background-position: 50% 50%; }
  50% { background-position: 100% 50%; }
  75% { background-position: 50% 100%; }
}

/* Decorative edge pattern overlay - subtle grid/mesh effect */
.hero-image-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: 
    /* Top-left corner fade with teal glow */
    radial-gradient(ellipse 120% 80% at 0% 0%, rgba(71, 167, 200, 0.35) 0%, transparent 70%),
    /* Top-right corner fade with violet glow */
    radial-gradient(ellipse 120% 80% at 100% 0%, rgba(112, 81, 167, 0.35) 0%, transparent 70%),
    /* Bottom-left corner fade with green glow */
    radial-gradient(ellipse 120% 80% at 0% 100%, rgba(88, 197, 113, 0.3) 0%, transparent 70%),
    /* Bottom-right corner fade with blue glow */
    radial-gradient(ellipse 120% 80% at 100% 100%, rgba(22, 93, 251, 0.3) 0%, transparent 70%),
    /* Center highlight for depth */
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(255, 255, 255, 0.12) 0%, transparent 45%);
}

/* Decorative edge pattern overlay - subtle grid/mesh effect */
.hero-image-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: 
    /* Fine diagonal grid pattern for visual interest at edges */
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 2px,
      rgba(71, 167, 200, 0.03) 2px,
      rgba(71, 167, 200, 0.03) 4px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 2px,
      rgba(96, 125, 139, 0.03) 2px,
      rgba(96, 125, 139, 0.03) 4px
    );
}

/* Edge glow effect - subtle colored glows at corners */
.hero-image-wrapper .edge-glow {
  position: absolute;
  border-radius: 50%;
  filter: calc(16px + (20px - 16px) * clamp(min(375 / 768, 1), 0, 1));
  opacity: 0.6;
  z-index: -1;
}

.hero-image-wrapper .edge-glow-top-left {
  top: calc(-1 * clamp(4vh, 6rem, 6rem));
  left: calc(-1 * clamp(3vw, 4rem, 4rem));
  width: clamp(12vw, 18rem, 18rem);
  height: clamp(12vw, 18rem, 18rem);
  background: radial-gradient(circle, rgba(88, 197, 113, 0.25), transparent 60%);
}

.hero-image-wrapper .edge-glow-top-right {
  top: calc(-1 * clamp(4vh, 6rem, 6rem));
  right: calc(-1 * clamp(3vw, 4rem, 4rem));
  width: clamp(11vw, 16rem, 16rem);
  height: clamp(11vw, 16rem, 16rem);
  background: radial-gradient(circle, rgba(112, 81, 167, 0.25), transparent 60%);
}

.hero-image-wrapper .edge-glow-bottom-left {
  bottom: calc(-1 * clamp(3vh, 4rem, 4rem));
  left: calc(-1 * clamp(4vw, 6rem, 6rem));
  width: clamp(9vw, 14rem, 14rem);
  height: clamp(9vw, 14rem, 14rem);
  background: radial-gradient(circle, rgba(88, 197, 113, 0.2), transparent 65%);
}

.hero-image-wrapper .edge-glow-bottom-right {
  bottom: calc(-1 * clamp(3vh, 4rem, 4rem));
  right: calc(-1 * clamp(4vw, 6rem, 6rem));
  width: clamp(9.5vw, 15rem, 15rem);
  height: clamp(9.5vw, 15rem, 15rem);
  background: radial-gradient(circle, rgba(112, 81, 167, 0.2), transparent 65%);
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .hero-image-wrapper {
    border-radius: 1rem;
  }
  
  .hero-image-wrapper::before {
    background: 
      radial-gradient(ellipse 80% 60% at 0% 0%, rgba(21, 35, 63, 0.3) 0%, transparent 65%),
      radial-gradient(ellipse 80% 60% at 100% 0%, rgba(21, 35, 63, 0.3) 0%, transparent 65%),
      radial-gradient(ellipse 80% 60% at 0% 100%, rgba(21, 35, 63, 0.3) 0%, transparent 65%),
      radial-gradient(ellipse 80% 60% at 100% 100%, rgba(21, 35, 63, 0.3) 0%, transparent 65%),
      radial-gradient(ellipse 40% 30% at 50% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 40%);
  }
  
  .hero-image-wrapper::after {
    background-image: 
      repeating-linear-gradient(
        45deg,
        transparent,
        transparent 1px,
        rgba(71, 167, 200, 0.02) 1px,
        rgba(71, 167, 200, 0.02) 3px
      ),
      repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 1px,
        rgba(96, 125, 139, 0.02) 1px,
        rgba(96, 125, 139, 0.02) 3px
      );
  }
}

@media (max-width: 768px) {
  .service-card {
    height: auto;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
  }
  
  .hero-image-wrapper {
    border-radius: clamp(0.6rem, 2vw, 1rem);
  }
  
  .hero-image-wrapper::before {
    background:
      radial-gradient(ellipse 60% 40% at 0% 0%, rgba(21, 35, 63, 0.25) 0%, transparent 60%),
      radial-gradient(ellipse 60% 40% at 100% 0%, rgba(21, 35, 63, 0.25) 0%, transparent 60%),
      radial-gradient(ellipse 60% 40% at 0% 100%, rgba(21, 35, 63, 0.25) 0%, transparent 60%),
      radial-gradient(ellipse 60% 40% at 100% 100%, rgba(21, 35, 63, 0.25) 0%, transparent 60%),
      radial-gradient(ellipse 30% 25% at 50% 50%, rgba(255, 255, 255, 0.06) 0%, transparent 35%);
  }
  
  .hero-image-wrapper::after {
    background: none;
  }
}

/* ======================================== */
/* UNSER-VORGEHEN PAGE - Hero Image Enhancement */
/* Larger hero image for unser-vorgehen page only */

/* Hero visual container - larger height and padding */
.unser-vorgehen-page .hero-visual {
  min-height: clamp(32vh, 40rem, 50rem);
}

/* Hero image wrapper - larger size with more prominent display */
.unser-vorgehen-page .hero-image-wrapper {
  border-radius: 2rem;
  overflow: hidden;
  box-shadow:
    0 calc(36px + (80px - 36px) * (1 - clamp(min(1920 / 2560, 1), 0, 1))) rgba(0, 0, 0, 0.25);
  background: linear-gradient(135deg, rgba(71, 167, 200, 0.2), rgba(96, 125, 139, 0.1));
}

/* Hero image - larger and covers more area */
.unser-vorgehen-page .hero-image {
  width: 100%;
  height: auto;
  min-height: clamp(28vh, 35rem, 45rem);
  object-fit: cover;
  display: block;
}

/* Edge glows - slightly larger for the enhanced visual */
.unser-vorgehen-page .hero-image-wrapper .edge-glow-top-left {
  top: -5rem;
  left: -4rem;
  width: 22rem;
  height: 22rem;
}

.unser-vorgehen-page .hero-image-wrapper .edge-glow-top-right {
  top: -5rem;
  right: -4rem;
  width: 20rem;
  height: 20rem;
}

.unser-vorgehen-page .hero-image-wrapper .edge-glow-bottom-left {
  bottom: -4rem;
  left: -5rem;
  width: 18rem;
  height: 18rem;
}

.unser-vorgehen-page .hero-image-wrapper .edge-glow-bottom-right {
  bottom: -4rem;
  right: -5rem;
  width: 19rem;
  height: 19rem;
}

/* Responsive adjustments for larger image */
@media (max-width: 992px) {
  .unser-vorgehen-page .hero-visual {
    min-height: 28rem;
  }

  .unser-vorgehen-page .hero-image-wrapper {
    border-radius: 1.5rem;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.2);
  }

  .unser-vorgehen-page .hero-image {
    min-height: 24rem;
  }

  .unser-vorgehen-page .hero-image-wrapper .edge-glow-top-left,
  .unser-vorgehen-page .hero-image-wrapper .edge-glow-bottom-left {
    width: 18rem;
    height: 18rem;
  }

  .unser-vorgehen-page .hero-image-wrapper .edge-glow-top-right,
  .unser-vorgehen-page .hero-image-wrapper .edge-glow-bottom-right {
    width: 16rem;
    height: 16rem;
  }
}

@media (max-width: 768px) {
  .unser-vorgehen-page .hero-visual {
    min-height: 24rem;
  }

  .unser-vorgehen-page .hero-image-wrapper {
    border-radius: 1.25rem;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.15);
  }

  .unser-vorgehen-page .hero-image {
    min-height: 20rem;
  }

  .unser-vorgehen-page .hero-image-wrapper .edge-glow-top-left,
  .unser-vorgehen-page .hero-image-wrapper .edge-glow-bottom-left {
    width: 14rem;
    height: 14rem;
  }

  .unser-vorgehen-page .hero-image-wrapper .edge-glow-top-right,
  .unser-vorgehen-page .hero-image-wrapper .edge-glow-bottom-right {
    width: 12rem;
    height: 12rem;
  }
}

/* ======================================== */
/* HERO CODE BOX STYLES                  */
/* Dark-themed code display for hero     */
/* ======================================== */

.hero-code-wrapper {
  position: relative;
  min-height: auto;
  border-radius: 1.25rem;
  margin-top: inherit;
  margin-bottom: 5vh;
}

.hero-code-box {
  background-color: #0d1117;
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow:
    0 calc(4px + (8px - 4px) * clamp(min(375 / 768, 1), 0, 1)) calc(16px + (32px - 16px) * clamp(min(375 / 768, 1), 0, 1)) rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Terminal title bar */
.hero-code-box .terminal-title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(0.675rem, 0.5vh, 0.625rem) clamp(1rem, 4vw, 1.5rem);
  background-color: #161b22;
  border-bottom-width: clamp(1px, 0.5vw, 2px);
  border-bottom-style: solid;
  border-bottom-color: rgba(84, 88, 90, 0.4);
}

/* Terminal window controls */
.hero-code-box .terminal-controls {
  display: flex;
  gap: clamp(0rem, 0.2vw, 0.5rem);
  margin-left: 0.7rem;
  margin-top: -1.15rem;
}

.hero-code-box .terminal-control {
  width: clamp(10px, 3vw, 13px);
  height: clamp(10px, 3vw, 13px);
  border-radius: 50%;
}

.hero-code-box .terminal-close {
  background-color: #ff5f56;
}

.hero-code-box .terminal-minimize {
  background-color: #ffbd2e;
}

.hero-code-box .terminal-maximize {
  background-color: #27ca40;
}

/* Terminal prompt line */
.hero-code-box .terminal-prompt-line {
  display: flex;
  align-items: center;
  padding: clamp(0.4rem, 1vh, 0.6rem) clamp(0.8rem, 2vw, 1.2rem);
  font-family: "Fira Code", "Consolas", "Monaco", monospace;
  font-size: 0.95rem;
}

.hero-code-box .terminal-prompt {
  color: #27ca40; /* Green prompt */
  margin-right: 0.5rem;
}

.hero-code-box .prompt-text {
  color: #e6edf3;
  font-weight: 500;
}

/* Code content area with terminal-like styling */
.hero-code-box pre {
  margin: 0;
  padding: clamp(1rem, 0vw, 1.5rem);
  overflow-x: auto;
  background-color: transparent;
}

/* Terminal corner decorations */
.hero-code-wrapper .edge-glow {
  display: none;
}

.hero-code-wrapper .edge-glow-top-left {
  top: -4rem;
  left: -3rem;
  width: 18rem;
  height: 18rem;
  background: radial-gradient(circle, rgba(88, 197, 113, 0.25), transparent 60%);
}

.hero-code-wrapper .edge-glow-top-right {
  top: -4rem;
  right: -3rem;
  width: 16rem;
  height: 16rem;
  background: radial-gradient(circle, rgba(112, 81, 167, 0.25), transparent 60%);
}

.hero-code-wrapper .edge-glow-bottom-left {
  bottom: -3rem;
  left: -4rem;
  width: 14rem;
  height: 14rem;
  background: radial-gradient(circle, rgba(88, 197, 113, 0.2), transparent 65%);
}

.hero-code-wrapper .edge-glow-bottom-right {
  bottom: -3rem;
  right: -4rem;
  width: 15rem;
  height: 15rem;
  background: radial-gradient(circle, rgba(112, 81, 167, 0.2), transparent 65%);
}

.hero-code-box::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 1.25rem;
  background: 
    radial-gradient(ellipse 120% 80% at 0% 0%, rgba(71, 167, 200, 0.3) 0%, transparent 70%),
    radial-gradient(ellipse 120% 80% at 100% 0%, rgba(112, 81, 167, 0.3) 0%, transparent 70%),
    radial-gradient(ellipse 120% 80% at 0% 100%, rgba(88, 197, 113, 0.25) 0%, transparent 70%),
    radial-gradient(ellipse 120% 80% at 100% 100%, rgba(22, 93, 251, 0.25) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 45%);
}

.hero-code-box::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 1.25rem;
  background: linear-gradient(45deg, 
    rgba(71, 167, 200, 0.3), 
    rgba(88, 197, 113, 0.3), 
    rgba(112, 81, 167, 0.3),
    rgba(22, 93, 251, 0.3)
  );
  background-size: 400% 400%;
  z-index: -1;
  opacity: calc(0.4 + (0.5 - 0.4) * clamp(min(375 / 768, 1), 0, 1));
  filter: calc(6px + (8px - 6px) * clamp(min(375 / 768, 1), 0, 1));
  animation: hero-code-border-glow 6s ease-in-out infinite;
}

@keyframes hero-code-border-glow {
  0%, 100% { background-position: 0% 50%; }
  25% { background-position: 50% 50%; }
  50% { background-position: 100% 50%; }
  75% { background-position: 50% 100%; }
}

.hero-code-box code {
  font-family: "Fira Code", "Consolas", "Monaco", monospace;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #e2e8f0;
}

/* Syntax highlighting colors matching the image */
.hero-code-box .token.keyword-from {
  color: #6ee7b7;   
  margin-left: 2rem;
}

.hero-code-box .token.keyword-import {
  color: #6ee7b7; 
}

.hero-code-box .token.keyword-class {
  color: #a78bfa; 
}

.hero-code-box .token.keyword-ServicePlan {
  color: #fbbf24; 
}

.hero-code-box .token.keyword-IntegerVar {
  color: #ffd770; 
}

.hero-code-box .token.number {
  color: #fd7b30; 
}

.hero-code-box .token.keyword-minimize {
  color: #61fff2; 
  margin-left: 2rem;
}

.hero-code-box .token.keyword-maximize {
  color: #61fff2; 
  margin-left: 2rem;
}

.hero-code-box .token.keyword-satisfaction {
  color: #4f60ff; 
}

.hero-code-box .token.keyword-cost {
  color: #58f87b; 
}

.hero-code-box .token.keyword-return {
  color: #a78bfa; 
  margin-left: 2rem;
}

.hero-code-box .token.keyword-def {
  color: #a78bfa; 
  margin-left: 2rem;
}



/* Edge glow effects for code box corners */
.hero-code-wrapper .edge-glow {
  display: none;
}

.hero-code-wrapper .language-python {
  margin-left: -2rem;
} 

.hero-code-wrapper .edge-glow-top-left {
  top: calc(-1 * clamp(3rem, 8vw, 6rem));
  left: calc(-1 * clamp(2.25rem, 4vw, 4rem));
  width: clamp(10rem, 18vw, 16rem);
  height: clamp(10rem, 18vw, 16rem);
  background: radial-gradient(circle, rgba(88, 197, 113, 0.25), transparent 60%);
}

.hero-code-wrapper .edge-glow-top-right {
  top: calc(-1 * clamp(3rem, 8vw, 6rem));
  right: calc(-1 * clamp(2.25rem, 4vw, 4rem));
  width: clamp(9rem, 17vw, 15rem);
  height: clamp(9rem, 17vw, 15rem);
  background: radial-gradient(circle, rgba(112, 81, 167, 0.25), transparent 60%);
}

.hero-code-wrapper .edge-glow-bottom-left {
  bottom: calc(-1 * clamp(2.25rem, 4vw, 3.75rem));
  left: calc(-1 * clamp(3rem, 6vw, 5rem));
  width: clamp(8rem, 16vw, 14rem);
  height: clamp(8rem, 16vw, 14rem);
  background: radial-gradient(circle, rgba(88, 197, 113, 0.2), transparent 65%);
}

.hero-code-wrapper .edge-glow-bottom-right {
  bottom: calc(-1 * clamp(2.25rem, 4vw, 3.75rem));
  right: calc(-1 * clamp(3rem, 6vw, 5rem));
  width: clamp(8.5rem, 17vw, 15rem);
  height: clamp(8.5rem, 17vw, 15rem);
  background: radial-gradient(circle, rgba(112, 81, 167, 0.2), transparent 65%);
}

/* Ensure glow effects are visible on smaller screens */
@media (max-width: 992px) {
  .hero-code-wrapper .edge-glow-top-left {
    width: clamp(8rem, 14vw, 12rem);
    height: clamp(8rem, 14vw, 12rem);
  }

  .hero-code-wrapper .edge-glow-top-right {
    width: clamp(7rem, 13vw, 11rem);
    height: clamp(7rem, 13vw, 11rem);
  }

  .hero-code-wrapper .edge-glow-bottom-left {
    width: clamp(6rem, 12vw, 10rem);
    height: clamp(6rem, 12vw, 10rem);
  }

  .hero-code-wrapper .edge-glow-bottom-right {
    width: clamp(6.5rem, 13vw, 11rem);
    height: clamp(6.5rem, 13vw, 11rem);
  }
}

@media (max-width: 768px) {
  .hero-code-wrapper .edge-glow-top-left {
    width: clamp(6rem, 12vw, 9rem);
    height: clamp(6rem, 12vw, 9rem);
  }

  .hero-code-wrapper .edge-glow-top-right {
    width: clamp(5.5rem, 11vw, 8rem);
    height: clamp(5.5rem, 11vw, 8rem);
  }

  .hero-code-wrapper .edge-glow-bottom-left {
    width: clamp(5rem, 10vw, 7rem);
    height: clamp(5rem, 10vw, 7rem);
  }

  .hero-code-wrapper .edge-glow-bottom-right {
    width: clamp(5.2rem, 11vw, 8rem);
    height: clamp(5.2rem, 11vw, 8rem);
  }
}
/* Responsive adjustments for code box between 992px and 1200px */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .hero-code-wrapper {
    min-height: auto;
    min-width: fit-content;
    margin-top: clamp(0.75rem, 2vw, 1.25rem);
    margin-bottom: clamp(0.75rem, 2vw, 1.25rem);
  }

  /* Scale the code box to fit medium screens - make it wider */
  .hero-code-box {
    width: 100%;
    max-width: none;
    border-radius: clamp(1.1rem, 1.8vw, 1.25rem);
  }

  /* Adjust terminal title bar for medium screens - more padding */
  .hero-code-box .terminal-title-bar {
    padding: clamp(0.4rem, 0.6vh, 0.75rem) clamp(1.5rem, 3vw, 2rem);
    border-bottom-width: clamp(1px, 0.8vw, 2px);
  }

  /* Adjust terminal prompt line for medium screens - more padding */
  .hero-code-box .terminal-prompt-line {
    padding: clamp(0.5rem, 1vh, 0.75rem) clamp(1.5rem, 3vw, 2rem);
    font-size: clamp(0.95rem, 1.1vw, 1rem);
  }

  .hero-code-box pre {
    padding: clamp(1rem, 0.8vw, 1.4rem);
    overflow-x: auto;
  }

  /* Adjust terminal title bar for medium screens */
  .hero-code-box .terminal-title-bar {
    padding: clamp(0.4rem, 0.6vh, 0.75rem) clamp(1rem, 3vw, 1.4rem);
    border-bottom-width: clamp(1px, 0.8vw, 2px);
  }

  /* Adjust terminal prompt line for medium screens */
  .hero-code-box .terminal-prompt-line {
    padding: clamp(0.5rem, 1vh, 0.75rem) clamp(1rem, 2.5vw, 1.3rem);
    font-size: clamp(0.95rem, 1.1vw, 1rem);
  }

  .hero-code-box pre {
    padding: clamp(1rem, 0.5vw, 1.4rem);
    overflow-x: auto;
  }

  /* Adjust glow effects for medium screens */
  .hero-code-wrapper .edge-glow-top-left {
    width: clamp(9rem, 16vw, 13rem);
    height: clamp(9rem, 16vw, 13rem);
  }

  .hero-code-wrapper .edge-glow-top-right {
    width: clamp(8.5rem, 15vw, 12rem);
    height: clamp(8.5rem, 15vw, 12rem);
  }

  .hero-code-wrapper .edge-glow-bottom-left {
    width: clamp(7.5rem, 14vw, 11rem);
    height: clamp(7.5rem, 14vw, 11rem);
  }

  .hero-code-wrapper .edge-glow-bottom-right {
    width: clamp(8rem, 15vw, 12rem);
    height: clamp(8rem, 15vw, 12rem);
  }

  /* Adjust background gradients for medium screens */
  .hero-code-box::before {
    background:
      radial-gradient(ellipse 90% 60% at 0% 0%, rgba(71, 167, 200, 0.2) 0%, transparent 65%),
      radial-gradient(ellipse 90% 60% at 100% 0%, rgba(112, 81, 167, 0.2) 0%, transparent 65%),
      radial-gradient(ellipse 90% 60% at 0% 100%, rgba(88, 197, 113, 0.18) 0%, transparent 65%),
      radial-gradient(ellipse 90% 60% at 100% 100%, rgba(22, 93, 251, 0.18) 0%, transparent 65%),
      radial-gradient(ellipse 50% 40% at 50% 50%, rgba(255, 255, 255, 0.07) 0%, transparent 40%);
  }

  .hero-code-box::after {
    opacity: calc(0.38 + (0.48 - 0.38) * clamp(min(992 / 1200, 1), 0, 1));
    filter: calc(5px + (7px - 5px) * clamp(min(992 / 1200, 1), 0, 1));
  }

  .hero-code-box code {
    font-size: clamp(0.9rem, 1vw, 0.95rem);
  }
}

/* Responsive adjustments for code box below 768px */
@media (max-width: 768px) {
  .hero-code-wrapper {
    min-height: auto;
    margin-top: clamp(0.5rem, 2vw, 1.25rem);
    margin-bottom: clamp(0.5rem, 2vw, 1.25rem);
  }

  .hero-code-box::before {
    background: linear-gradient(45deg,
      rgba(71, 167, 200, 0.19),
      rgba(88, 197, 113, 0.19),
      rgba(112, 81, 167, 0.19),
      rgba(22, 93, 251, 0.19)
    );
  }

  .hero-code-box pre {
    padding: clamp(0.5rem, 2vw, 1rem);
  }

  .hero-code-box code {
    font-size: 0.875rem;
  }
}
/* Responsive adjustments for modellierung hero section glow effects */
@media (max-width: 992px) {
  .modellierung-page .hero-glow-left,
  .modellierung-page .hero-glow-right {
    width: clamp(14vw, 18%, 20vw);
    height: clamp(14vw, 18%, 20vw);
  }
}

@media (max-width: 768px) {
  .modellierung-page .hero-glow-left,
  .modellierung-page .hero-glow-right {
    width: clamp(12vw, 15%, 18vw);
    height: clamp(12vw, 15%, 18vw);
  }
  
  /* Ensure glow effects don't overlap with navbar on mobile */
  .modellierung-page .hero-glow-left {
    top: 7%;
  }
  
  .modellierung-page .hero-glow-right {
    top: 45%;
  }
}

@media (max-height: 600px) {
  /* Reduce glow sizes on very small screens */
  .modellierung-page .hero-glow-left,
  .modellierung-page .hero-glow-right {
    width: clamp(10vw, 12%, 15vw);
    height: clamp(10vw, 12%, 15vw);
  }
  
  /* Adjust glow positioning for small height screens */
  .modellierung-page .hero-glow-left {
    top: 8%;
  }
  
  .modellierung-page .hero-glow-right {
    top: 46%;
  }
}

/* Ensure hero content stays below navbar on all screen sizes */
@media (max-height: 500px) and (orientation: portrait) {
  .modellierung-hero-section .container {
    margin-top: calc(clamp(1.5rem, 2vh, 3rem) + (clamp(0.75rem, 1vh, 1.5rem) * clamp(min(375 / 768, 1), 0, 1)));
  }
}
/* Overlay panels and card components     */
/* ======================================== */

.visual-panel {
  position: absolute;
  border-radius: 1.75rem;
  overflow: hidden;
  box-shadow: 0 calc(16px + (32px - 16px) * clamp(min(375 / 768, 1), 0, 1)) calc(35px + (70px - 35px) * clamp(min(375 / 768, 1), 0, 1)) rgba(5, 11, 23, 0.35);
}

.visual-panel::before {
  content: "";
  position: absolute;
  inset: 0;
}

.visual-panel-main {
  position: relative;
  padding: clamp(1.5rem, 4vw, 2rem);
  margin-right: auto;
  width: clamp(35%, 45rem, 60%);
}

.visual-panel-main::before {
  background:
    linear-gradient(135deg, rgba(21, 35, 63, 0.42), rgba(21, 35, 63, 0.64)),
    url("assets/grid_image.jpg") center/cover;
}

.visual-panel-secondary {
  position: relative;
  width: clamp(18vw, 22rem, 28rem);
  padding: clamp(1.1rem, 3vh, 1.35rem);
  margin-left: auto;
}

.visual-panel-secondary::before {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(241, 246, 252, 0.95));
}

.visual-panel-note {
  position: relative;
  width: clamp(18vw, 20rem, 24rem);
  padding: clamp(1rem, 2.5vh, 1.25rem);
  margin-right: auto;
}

.visual-panel-note::before {
  background:
    linear-gradient(145deg, rgba(89, 197, 113, 0.96), rgba(71, 167, 200, 0.9));
}

.visual-copy,
.visual-panel-secondary,
.visual-panel-note {
  position: relative;
  z-index: 1;
}

.visual-eyebrow,
.stat-label {
  display: inline-block;
  margin-bottom: 0.75rem;
  font-size: clamp(0.7rem, 1vw, 0.8rem);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.visual-eyebrow {
  color: rgba(255, 255, 255, 0.84);
}

.visual-copy h2 {
  max-width: 18rem;
  margin-bottom: 0.9rem;
  color: #fff;
  font-size: clamp(1.8rem, 2.5vw, 2.5rem);
  font-weight: 800;
}

.visual-copy p {
  max-width: 22rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  line-height: calc(1.4 + (1.7 - 1.4) * clamp(min(375 / 768, 1), 0, 1));
}

.visual-panel-secondary strong {
  display: block;
  position: relative;
  z-index: 1;
  color: var(--rqc-ink);
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  line-height: 1.55;
}

.stat-label {
  position: relative;
  z-index: 1;
  color: var(--rqc-teal);
}

.visual-panel-note,
.visual-panel-note p,
.visual-panel-note small {
  color: #fff;
}

.visual-panel-note p {
  margin: 0 0 0.3rem;
  font-size: 1.2rem;
  font-weight: 800;
}

.step-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  font-weight: 800;
}

.intro-strip {
  position: relative;
  margin-top: calc(clamp(3rem, 6vh, 5rem) + (clamp(2rem, 4vw, 3rem) * clamp(min(375 / 768, 1), 0, 1)));
  z-index: 2;
  padding-bottom: calc(clamp(2.5rem, 5vh, 4rem) + (clamp(1.5rem, 3vw, 2.5rem) * clamp(min(375 / 768, 1), 0, 1)));
}

.intro-card {
  height: 100%;
  padding: clamp(0.5rem, 1vw, 1rem);
}

.intro-card,
.service-card,
.product-card,
.process-card,
.contact-aside,
.contact-card,
.legal-card {
  background: rgba(255, 255, 255, 0.9);
  border: clamp(1px, 0.05vw, 2px) solid rgba(71, 167, 200, 0.3);
  border-radius: clamp(1.2rem, 3vw, 1.8rem);
  box-shadow: 0 calc(6px + (12px - 6px) * clamp(min(375 / 768, 1), 0, 1)) calc(16px + (32px - 16px) * clamp(min(375 / 768, 1), 0, 1)) rgba(16, 28, 51, 0.12);
  backdrop-filter: blur(calc(9px + (14px - 9px) * clamp(min(375 / 768, 1), 0, 1)));
}

.service-card {
  padding: clamp(1rem, 4vh, 1.9rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.4rem, 3vw, 1.2rem);
  text-align: center;
}

.service-icon {
  width: clamp(3rem, 8vw, 5rem);
  height: clamp(3rem, 8vw, 5rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: clamp(2.25rem, 4vw, 1.75rem);
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 clamp(4px, 1vw, 8px) clamp(6px, 2vw, 12px) rgba(16, 28, 51, 0.12);
}

.service-icon-img {
  max-width: 70%;
  max-height: 70%;
  object-fit: contain;
}

.service-buzzwords {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.35rem, 1vw, 0.25rem);
  color: rgba(33, 37, 41, 0.75);
  font-size: clamp(0.95rem, 1.8vw, 0.85rem);
  line-height: 1.4;
}

.service-buzzwords li {
  text-align: left;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.service-buzzwords li::before {
  content: "•";
  margin-right: clamp(0.5rem, 2vw, 0.35rem);
  color: rgba(71, 167, 200, 0.9);
}

.intro-number {
  display: inline-flex;
  margin-bottom: clamp(0.9rem, 2vh, 0.75rem);
  color: var(--rqc-teal);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: clamp(0.14em, 0.2vw, 0.1em);
}

.intro-card h2,
.service-card h3,
.product-card h3,
.industry-card h3,
.process-card h3,
.contact-aside h3,
.legal-card h2 {
  color: var(--rqc-ink);
  font-weight: 800;
}

.intro-card p,
.service-card p,
.product-card p,
.industry-card p,
.process-card p {
  color: var(--bs-body-color);
  font-size: clamp(0.95rem, 1.8vw, 0.85rem);
  line-height: 1.6;
}

.service-icon-img {
  max-width: 70%;
  max-height: 70%;
  object-fit: contain;
}

.service-buzzwords {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  color: rgba(33, 37, 41, 0.75);
  font-size: clamp(0.875rem, 1.3vw, 0.95rem);
  line-height: 1.4;
}

.service-buzzwords li {
  text-align: left;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.service-buzzwords li::before {
  content: "•";
  margin-right: clamp(0.4rem, 1vw, 0.6rem);
  color: rgba(71, 167, 200, 0.9);
}

.intro-number {
  display: inline-flex;
  margin-bottom: calc(0.7rem + (0.9rem - 0.7rem) * clamp(min(375 / 768, 1), 0, 1));
  color: var(--rqc-teal);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 800;
  letter-spacing: 0.14em;
}

.intro-card h2,
.service-card h3,
.product-card h3,
.industry-card h3,
.process-card h3,
.contact-aside h3,
.legal-card h2 {
  color: var(--rqc-ink);
  font-weight: 800;
}

.intro-card p,
.service-card p,
.product-card p,
.industry-card p,
.process-card p,
.contact-aside p,
.section-heading p,
.legal-card p,
.legal-card li,
.legal-card dd {
  color: var(--rqc-night);
  line-height: calc(1.4 + (1.75 - 1.4) * clamp(min(375 / 768, 1), 0, 1));
}

/* ======================================== */
/* MAIN SITE - Content Sections           */
/* Services, products, industry cards     */
/* Process steps and contact forms        */
/* ======================================== */

/* Override for info-value to use regular body text color */
.info-value {
  color: var(--bs-body-color) !important;
}

.content-section {
  padding: calc(2.7rem + (3.5rem - 2.7rem) * clamp(min(375 / 768, 1), 0, 1)) clamp(1.5rem, 6vw, 3rem);
  background-image: url("assets/background_arrow_style.jpg");
  background-repeat: repeat;
  background-size: cover;
  background-position: center top;
  background-attachment: scroll;
}

/* Modern Kontaktwege Section - Centered */
.kontaktwege_style {
  position: relative;
  background-color: #f8fafc;
  padding-top: calc(2.4rem + (3rem - 2.4rem) * clamp(min(375 / 768, 1), 0, 1));
  padding-bottom: calc(2.4rem + (3rem - 2.4rem) * clamp(min(375 / 768, 1), 0, 1));
}

/* Parallax background effect with subtle gradient overlay */
.kontaktwege_style::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(7, 29, 60, 0.03) 0%, rgba(71, 167, 200, 0.05) 50%, rgba(88, 197, 113, 0.03) 100%);
  z-index: 1;
}

  /* Container alignment - centered */
  #kontaktwege .container {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center !important;
    align-items: baseline;
    max-width: clamp(90%, 1400px, 1200px);
    padding-left: clamp(0.75rem, 1.5vw, 1rem);
    padding-right: clamp(0.75rem, 1.5vw, 1rem);
  }

/* Contact info grid styling - centered */
.kontaktwege_style .contact-info-grid {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: calc(1.6rem + (2rem - 1.6rem) * clamp(min(375 / 768, 1), 0, 1));
  align-items: normal;
  justify-content: center !important;
  margin-top: calc(1.5rem + (2.5rem - 1.5rem) * clamp(min(375 / 768, 1), 0, 1));
}

/* Contact item card with hover effects */
.kontaktwege_style .contact-item {
    position: relative;
    background: #ffffff;
    border-radius: 16px;
    padding: clamp(0.75rem, 3vw, 1rem) clamp(0.875rem, 2.5vw, 1rem);
    box-shadow:
      0 clamp(3px, 2vw, 5px) rgba(7, 29, 60, 0.08),
      0 clamp(1px, 0.5vw, 2px) rgba(7, 29, 60, 0.12);
    transition: all 0.3s ease;
    border-left-width: clamp(4px, 1vw, 6px);
    border-left-style: solid;
    border-left-color: transparent;
    width: clamp(20rem, 28vw, 24rem);
    flex: none;
    max-width: 30%;
  }

.kontaktwege_style .contact-item > div:first-child {
  display: flex;
  align-items: center;
}

.kontaktwege_style .contact-icon {
    width: clamp(3rem, 6vw, 4rem);
    height: clamp(3rem, 6vw, 4rem);
  border-radius: 12px;
  flex-shrink: 0;
}

.kontaktwege_style .contact-details {
  padding-left: clamp(1.5rem, 3vw, 2rem);
}

/* Hover effect for contact items */
.kontaktwege_style .contact-item:hover {
  transform: translateY(clamp(-8px, -3vw, -12px)) scale(1.02);
  border-left-color: #47a7c8;
}

/* Contact icon styling */
.kontaktwege_style .contact-icon {
  width: clamp(5rem, 10vw, 1rem);
  height: clamp(5rem, 10vw, 1rem);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.6); /* Semi-transparent white background */
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.kontaktwege_style .contact-item:hover .contact-icon {
  transform: scale(clamp(1.1, 1.05, 1.2)) rotate(calc(-3deg * clamp(min(1920 / 2560, 1), 0, 1)));
}

/* Contact details typography */
.kontaktwege_style .contact-details h4 {
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  font-weight: 700;
  color: #0a1325;
  margin-bottom: clamp(0.4rem, 1vh, 0.5rem);
  letter-spacing: -0.02em;
}

.kontaktwege_style .contact-details p {
  font-size: clamp(1rem, 2vw, 1.125rem);
  color: var(--rqc-night-soft);
  margin-bottom: calc(0.5rem + (0.6rem - 0.5rem) * clamp(min(375 / 768, 1), 0, 1));
  line-height: calc(1.3 + (1.6 - 1.3) * clamp(min(375 / 768, 1), 0, 1));
}

/* Contact link styling */
.kontaktwege_style .contact-link-green {
  display: inline-flex;
  align-items: center;
  color: #47a7c8;
  font-weight: 600;
  text-decoration: none;
  position: relative;
  transition: all 0.3s ease;
}

.kontaktwege_style .contact-link-green::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #47a7c8, #58c571);
  transition: width 0.3s ease;
}

   /* Responsive contact items - always one row above 992px */
   @media (min-width: 992px) {
     .kontaktwege_style .contact-info-grid {
       display: flex;
       gap: clamp(1.5rem, 3vw, 2rem);
       justify-content: center;
     }

     .kontaktwege_style .contact-item {
       max-width: none;
       width: auto;
       flex: 0 0 auto;
       margin-left: 0;
       margin-right: 0;
     }
   }

  @media (max-width: 991px) {
    .kontaktwege_style .contact-info-grid {
      flex-direction: column;
      align-items: center;
    }

    .kontaktwege_style .contact-item {
      max-width: 100%;
      width: 100%;
      padding: clamp(1.5rem, 6vw, 2rem) clamp(1rem, 3vw, 1.5rem);
    }

    .kontaktwege_style .contact-icon {
      width: clamp(3rem, 12vw, 4rem);
      height: clamp(3rem, 12vw, 4rem);
    }

    .kontaktwege_style .contact-details {
      padding-left: 0;

    }
  }

  @media (max-width: 768px) {
    .kontaktwege_style .contact-info-grid {
      flex-direction: column;
      align-items: center;
    }

    .kontaktwege_style .contact-item {
      max-width: 100%;
      width: 100%;
      padding: clamp(1.5rem, 6vw, 2rem) clamp(1rem, 3vw, 1.5rem);
    }

    .kontaktwege_style .contact-icon {
      width: clamp(3rem, 12vw, 4rem);
      height: clamp(3rem, 12vw, 4rem);
    }

    .kontaktwege_style .contact-details {
      padding-left: 0;
      margin-right: -1rem;
    }
  }

  @media (max-width: 576px) {
    .kontaktwege_style .contact-item {
      max-width: 100%;
      width: 100%;
      padding: clamp(1.25rem, 5vw, 1.75rem);
    }

    .kontaktwege_style .contact-icon {
      width: clamp(3rem, 15vw, 4rem);
      height: clamp(3rem, 15vw, 4rem);
    }
  }

.kontaktwege_style .contact-link-green:hover {
  color: #0a1325;
}

.kontaktwege_style .contact-link-green:hover::after {
  width: 100%;
}

/* Section heading for Kontaktwege */
#kontaktwege h2.section-heading {
  text-align: center !important;
  margin-bottom: 3rem;
  max-width: none;
}

/* Responsive design */
@media (max-width: 992px) {
  .kontaktwege_style .contact-item {
    flex: 1 1 clamp(calc(33.333% - 2rem), (30vw - 4rem), calc(33.333% - 4rem));
  }
  
  #kontaktwege h2.section-heading {
    text-align: center !important;
  }
}

@media (max-width: 768px) {
  .kontaktwege_style {
    padding-top: clamp(2rem, 8vh, 3rem);
    padding-bottom: clamp(2rem, 8vh, 3rem);
  }
  
  .kontaktwege_style .contact-item {
    flex: 1 1 100%;
    min-width: auto;
  }
  
  #kontaktwege h2.section-heading {
    text-align: center !important;
  }

}

@media (max-width: 480px) {
  .kontaktwege_style .contact-item {
    padding: clamp(1.5rem, 5vh, 1.75rem) clamp(1rem, 3vw, 1.25rem);
  }
  
  .kontaktwege_style .contact-icon {
    width: clamp(4.5rem, 10vw, 60px);
    height: clamp(4.5rem, 10vw, 60px);
  }
}

/* Subtle floating animation for icons */
@keyframes floatIcon {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.kontaktwege_style .contact-icon svg {
  transition: all 0.4s ease;
}

.kontaktwege_style .contact-item:hover .contact-icon svg {
  filter: drop-shadow(0 calc(4px + (8px - 4px) * (1 - clamp(min(1920 / 2560, 1), 0, 1))) rgba(71, 167, 200, 0.3));
}

.kontaktwege-section {
  background-color: #ffffff !important;
}

.section-soft {
  background-image: url("assets/background_arrow_style.jpg");
  background-repeat: repeat;
  background-size: cover;
  background-position: center top;
  background-attachment: scroll;
}

.timeline-section .section-heading h2 {
  margin-bottom: clamp(0.4rem, 1vh, 0.5rem);
  text-align: left;
  font-size: clamp(1.7rem, 2.5vw, 2.3rem);
  max-width: clamp(28rem, 60%, 40rem);
}

.timeline-section .section-heading > * + * {
  margin-bottom: clamp(15rem, 40vh, 17rem) !important;
  text-align: left;
}

.timeline-section .section-heading p {
  margin-top: 0;
  margin-bottom: 0;
}

.timeline-section .section-heading h2 {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: clamp(0.8rem, 3vh, 1rem);
  color: var(--rqc-ink);
  
  /* Gradient text effect */
  background: linear-gradient(315deg, #0a1325 0%, #47a7c8 50%, #00a63d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.timeline-section .section-heading p {
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  line-height: calc(1.4 + (1.7 - 1.4) * clamp(min(375 / 768, 1), 0, 1));
  margin-top: 0;
  margin-bottom: 0;
  color: var(--rqc-night-soft);
}

.timeline-section .section-heading {
  margin-left: clamp(2rem, 8vw, 4rem);
  margin-top: -1.5rem;
}

.section-heading {
  max-width: clamp(30%, 46rem, 70%);
  margin: 0 auto 3rem;
  margin-top: 1rem;
}

/* ======================================== */
/* TIMELINE SECTION - Horizontal Layout   */
/* Alternating above/below placeholders    */
/* ======================================== */

.timeline-section {
  padding: calc(0.6rem + (0.8rem - 0.6rem) * clamp(min(375 / 768, 1), 0, 1)) 0 calc(12rem + (15rem - 12rem) * clamp(min(375 / 768, 1), 0, 1));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(71, 167, 200, 0.03)),
             linear-gradient(180deg, rgba(249, 251, 255, 0.6) 0%, rgba(243, 247, 252, 0.8) 100%);
}

/* Add more space above timeline section for separation from hero */
.timeline-section {
  margin-top: clamp(6rem, 15vh, 10rem);
}

.timeline-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0rem;
  position: relative;
  padding-left: clamp(4rem, 12vw, 5rem); /* Expand line further to the left */
  padding-right: clamp(4rem, 12vw, 5rem); /* Expand line further to the right */
  border-top: calc(3px + (6px - 3px) * (1 - clamp(min(1920 / 2560, 1), 0, 1))) solid var(--rqc-teal);
  width: 100%;
  min-width: 100%;
}

.timeline-item {
  flex: 0 0 calc(25% - 2rem);
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 4vw, 1.5rem);
  min-width: 0; /* Allow items to shrink below their content size */
}

/* Extend timeline line further to the right using a pseudo-element without content */


.timeline-item {
  flex: 0 0 calc(25% - 2rem);
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 4vw, 1.5rem);
}

/* Move timeline-above items (numbers 1 and 3) even higher */
.timeline-item.timeline-above {
  margin-top: calc(-10rem + (-5rem - (-10rem)) * (1 - clamp(min(1920 / 2560, 1), 0, 1)));
  position: relative;
}

/* Vertical line connecting above items to the horizontal timeline */
.timeline-item.timeline-above::after {
  content: '';
  position: absolute;
  top: calc(50% + clamp(1.25rem, 3vw, 1.5rem)); /* Start from bottom of placeholder */
  right: calc(100% + clamp(1.25rem, 3vw, 1.5rem)); /* Position at center of placeholder */
  width: calc(3px + (6px - 3px) * (1 - clamp(min(1920 / 2560, 1), 0, 1))); /* Same as horizontal border width */
  height: clamp(3rem, 8vh, 0rem); /* Extend down to timeline line */
  background: var(--rqc-teal);
}

/* Move timeline-below items (numbers 2 and 4) lower down */
.timeline-item.timeline-below {
  margin-bottom: calc(-6rem + (-3rem - (-6rem)) * (1 - clamp(min(1920 / 2560, 1), 0, 1)));
  position: relative;
}

/* Vertical line connecting below items to the horizontal timeline */
.timeline-item.timeline-below::after {
  content: '';
  position: absolute;
  top: calc(50% - clamp(1.25rem, 3vw, 1.5rem)); /* Start from top of placeholder */
  right: calc(100% + clamp(1.25rem, 3vw, 1.5rem)); /* Position at center of placeholder */
  width: calc(3px + (6px - 3px) * (1 - clamp(min(1920 / 2560, 1), 0, 1))); /* Same as horizontal border width */
  height: clamp(3rem, 8vh, 4rem); /* Extend up to timeline line */
  background: var(--rqc-teal);
}

/* Connector line removed - timeline items now stand independently */
.timeline-section::before {
  content: "";
  display: none;
}

.timeline-number {
  width: clamp(36px, 8vw, 56px);
  height: clamp(36px, 8vw, 56px);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rqc-green), var(--rqc-teal));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  flex-shrink: 0;
}

/* Alternating placeholder positions - above or below the timeline */
.timeline-above {
  align-self: center;
}

.timeline-below {
  align-self: center;
}

.timeline-placeholder {
  padding: clamp(0.5rem, 6vw, -0.5rem) clamp(1.25rem, 4vw, 1rem);
  background: hsl(0, 0%, 100%);
  border-radius: clamp(0.8rem, 2vw, 1.2rem);
  border: 1px solid rgba(34, 48, 78, 0.06);
  min-width: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Position placeholder above or below the timeline line */
.timeline-above .timeline-placeholder {
  margin-top: calc(-7rem + (-3.5rem - (-7rem)) * (1 - clamp(min(1920 / 2560, 1), 0, 1))); /* Pull up to sit above the timeline */
}

.timeline-below .timeline-placeholder {
  margin-bottom: calc(-7rem + (-3.5rem - (-7rem)) * (1 - clamp(min(1920 / 2560, 1), 0, 1))); /* Push down to sit below the timeline */
}

.step-title {
  color: var(--bs-body-color);
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  font-weight: 600;
  margin: 0 0 clamp(0.4rem, 1vh, 0.5rem) 0;
}

.step-description {
  color: var(--bs-body-color);
  font-size: clamp(0.875rem, 2vw, 0.95rem);
  line-height: calc(1.2 + (1.5 - 1.2) * clamp(min(375 / 768, 1), 0, 1));
  margin: 0;
}

/* Mobile timeline boxes - only visible below 992px */
.timeline-mobile-boxes {
  display: none;
}

/* Hide mobile timeline elements above 992px to prevent them from showing */
@media (min-width: 992px) {
  .timeline-mobile-item,
  .timeline-mobile-number,
  .timeline-mobile-content {
    display: none !important;
  }

  /* Remove margin between section-heading and timeline for higher resolutions */
  .timeline-section .section-heading > * + *:not(.timeline-row) {
    margin-bottom: clamp(15rem, 40vh, 17rem) !important;
  }
}

/* Below 992px - remove the large gap between section heading and mobile timeline */
@media (max-width: 991.98px) {
  .timeline-section .section-heading > * + *:not(.timeline-row) {
    margin-bottom: 0 !important;
  }
}

/* Responsive adjustments for timeline between 768px and 992px to prevent horizontal overflow */
@media (min-width: 768px) and (max-width: 991.98px) {
  .timeline-row {
    padding-left: clamp(2rem, 5vw, 3rem);
    padding-right: clamp(2rem, 5vw, 3rem);
  }

  .timeline-item {
    flex: 0 0 calc(33.33% - 1.5rem);
  }
}

/* Prevent horizontal overflow on tablets by constraining the timeline width */
@media (min-width: 768px) and (max-width: 991.98px) {
  .timeline-row {
    padding-left: clamp(2rem, 5vw, 3rem);
    padding-right: clamp(2rem, 5vw, 3rem);
  }

  .timeline-item {
    flex: 0 0 calc(40% - 1.5rem); /* Show 2 items per row on tablets */
  }
}

/* Responsive adjustments for timeline below 992px - vertical layout with specific order */
@media (max-width: 991.98px) {
  /* Hide the original horizontal timeline */
  .timeline-row {
    display: none;
    overflow-x: visible !important;
  }

  /* Show mobile timeline boxes instead */
  .timeline-mobile-boxes {
    display: flex !important;
    flex-direction: column;
    gap: clamp(2rem, 2vh, 3rem);
  }

  /* Each mobile timeline item as a styled box */
  .timeline-mobile-item {
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 2rem);
    padding: clamp(1.5rem, 3vh, 2rem) clamp(2rem, 5vw, 3rem);
    background: rgba(255, 255, 255, 0.8);
    border-radius: clamp(1rem, 2vw, 1.5rem);
    box-shadow: var(--bs-box-shadow-sm);
    border: 1px solid rgba(34, 48, 78, 0.06);
  }

  /* Mobile timeline number circle */
  .timeline-mobile-number {
    width: clamp(50px, 10vw, 70px);
    height: clamp(50px, 10vw, 70px);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--rqc-green), var(--rqc-teal));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: clamp(1.2rem, 3vw, 1.6rem);
    flex-shrink: 0;
  }

  /* Mobile timeline content box */
  .timeline-mobile-content {
    flex: 1;
    min-width: 0;
  }

  .step-title {
    color: var(--bs-body-color);
    font-size: clamp(1.25rem, 3vw, 1.5rem);
    font-weight: 600;
    margin-bottom: clamp(0.4rem, 1vh, 0.5rem);
  }

  .step-description {
    color: var(--bs-body-color);
    font-size: clamp(0.875rem, 2vw, 0.95rem);
    line-height: calc(1.2 + (1.5 - 1.2) * clamp(min(375 / 768, 1), 0, 1));
    margin: 0;
  }

  /* Order items correctly: Definieren (1), Kompilieren (2), Lösen (3), Integrieren (4) */
  .timeline-mobile-item:nth-child(1) { order: 1; }
  .timeline-mobile-item:nth-child(2) { order: 2; }
  .timeline-mobile-item:nth-child(3) { order: 3; }
  .timeline-mobile-item:nth-child(4) { order: 4; }
}

/* Media breakpoint for resolutions below 1400px */
@media (max-width: 1399.98px) {
  .timeline-placeholder {
    min-width: 100%;
  }
}

@media (max-width: 767.98px) {
  .step-title {
    font-size: clamp(1.25rem, 4vw, 1.5rem);
  }

  .step-description {
    font-size: clamp(0.9rem, 1.3vw, 1rem);
  }

  .timeline-number {
    width: clamp(4vw, 6%, 8vw);
    height: clamp(4vw, 6%, 8vw);
    font-size: clamp(0.85rem, 2vw, 1.1rem);
  }

  .timeline-placeholder {
    min-width: auto;
    width: 100%;
    text-align: left;
    padding: clamp(1.25rem, 4vw, 2rem) clamp(1rem, 3vw, 1.5rem);
  }

  .timeline-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(1.5rem, 6vw, 2.5rem);
  }

  .timeline-section {
    padding: clamp(3rem, 8vh, 4rem) 0;
    margin-top: clamp(0rem, 0vh, 0rem);
  }
}

.section-heading-left {
  max-width: 40rem;
  margin: 0 0 1.5rem;
}

.section-heading h2 {
  margin-bottom: clamp(2rem, 8vh, 3rem);
  color: var(--rqc-ink);
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.service-card {
  height: 100%;
  padding: clamp(1.5rem, 5vh, 1.7rem);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.service-card:hover,
.service-card:focus-within,
.product-card:hover,
.product-card:focus,
.process-card:hover {
  transform: translateY(-6px);
}

.icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(2.5rem, 8vw, 3.5rem);
  height: clamp(2.5rem, 8vw, 3.5rem);
  margin-bottom: calc(0.6rem + (0.75rem - 0.6rem) * clamp(min(375 / 768, 1), 0, 1));
  border-radius: 1rem;
  color: var(--rqc-night);
  background: linear-gradient(135deg, rgba(88, 197, 113, 0.28), rgba(71, 167, 200, 0.26));
  font-weight: 800;
}

.feature-list {
  display: grid;
  gap: clamp(0.75rem, 3vw, 1.5rem);
}

/* Add bottom padding for laptop and larger sizes */
@media (min-width: 992px) {
  .feature-list {
    margin-bottom: clamp(2rem, 4vw, 3rem);
  }
}

/* Add bottom padding for smaller screens */
@media (max-width: 991px) {
  .feature-list {
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  }
}

.feature-item {
  display: grid;
  gap: clamp(0.2rem, 0.5vw, 0.15rem);
  padding: clamp(0.875rem, 2.5vh, 1rem) clamp(0.9rem, 2.5vw, 1.1rem);
  border-left-width: clamp(4px, 1vw, 6px);
  border-radius: 0 1rem 1rem 0;
  background: rgba(255, 255, 255, 0.78);
}

.feature-item strong {
  color: var(--rqc-ink);
}

.feature-item span {
  color: var(--rqc-muted);
}

.product-grid {
  display: grid;
  gap: clamp(0.75rem, 3vw, 1.5rem);
}

.product-card {
  display: block;
  padding: clamp(1.25rem, 4vw, 2rem);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.product-card:hover,
.product-card:focus {
  border-color: rgba(71, 167, 200, 0.25);
}

.product-card-primary {
  color: #fff;
  background:
    linear-gradient(140deg, rgba(21, 35, 63, 0.93), rgba(33, 50, 85, 0.92)),
    url("assets/grid_image2.jpg") center/cover;
}

.product-card-primary h3,
.product-card-primary p,
.product-card-primary .product-link,
.product-card-primary .product-pill {
  color: #fff;
}

.product-pill,
.industry-tag,
.aside-label {
  display: inline-flex;
  margin-bottom: clamp(0.75rem, 2vh, 1rem);
  padding: calc(0.4rem + (0.6rem - 0.4rem) * (1 - clamp(min(1920 / 2560, 1), 0, 1))) calc(0.7rem + (0.8rem - 0.7rem) * (1 - clamp(min(1920 / 2560, 1), 0, 1)));
  border-radius: clamp(999px * (min(1 / 1920, 1)), 999px * (min(768 / 1920, 1)), 999px);
  font-size: clamp(0.75rem, 1.5vw, 0.78rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.product-pill {
  color: var(--rqc-teal);
  background: rgba(71, 167, 200, 0.12);
}

.product-card-primary .product-pill {
  background: rgba(255, 255, 255, 0.14);
}

/* Product label for comparison cards */
.product-label {
  display: inline-block;
  margin-bottom: clamp(0.4rem, 1vh, 0.5rem);
  padding-left: 0;
  font-size: clamp(0.625rem, 1vw, 0.7rem);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Open Source label - subtle dark text on white background */
.comparison-card-core .product-label {
  color: var(--rqc-night);
}

/* Commercial label - subtle light text on dark gradient background */
.comparison-card-pro .product-label {
  color: rgba(255, 255, 255, 0.85);
}

.product-link {
  color: var(--rqc-ink);
  font-weight: 800;
}

/* Product card background styling for better contrast */
.product-card,
.product-card-primary {
  border-radius: 1rem;
}

.product-card:hover,
.product-card:focus,
.product-card-primary:hover,
.product-card-primary:focus {
  border-color: rgba(71, 167, 200, 0.35);
  box-shadow:
    0 calc(5px + (10px - 5px) * clamp(min(375 / 768, 1), 0, 1)) rgba(16, 28, 51, 0.22);
}

/* Product card button styles - makes buttons more visible with branding colors */
.product-card .product-link,
.product-card-primary .product-link {
  display: inline-block;
}

.product-card .btn-outline-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--rqc-green), var(--rqc-teal));
  border-color: transparent;
  box-shadow:
    0 calc(1px + (2px - 1px) * clamp(min(375 / 768, 1), 0, 1)) rgba(71, 167, 200, 0.2);
}

.product-card .btn-outline-primary:hover,
.product-card .btn-outline-primary:focus {
  color: #fff;
  background: linear-gradient(135deg, var(--rqc-green), var(--rqc-teal));
  border-color: transparent;
  box-shadow:
    0 calc(1.5px + (3px - 1.5px) * clamp(min(375 / 768, 1), 0, 1)) rgba(71, 167, 200, 0.3);
  transform: translateY(calc(-1 * calc(1px + (2px - 1px) * clamp(min(375 / 768, 1), 0, 1))));
}

.product-card-primary .btn-outline-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--rqc-green), var(--rqc-teal));
  border-color: transparent;
  box-shadow:
    0 calc(1px + (2px - 1px) * clamp(min(375 / 768, 1), 0, 1)) rgba(71, 167, 200, 0.2);
}

.product-card-primary .btn-outline-primary:hover,
.product-card-primary .btn-outline-primary:focus {
  color: #fff;
  background: linear-gradient(135deg, var(--rqc-green), var(--rqc-teal));
  border-color: transparent;
  box-shadow:
    0 calc(1.5px + (3px - 1.5px) * clamp(min(375 / 768, 1), 0, 1)) rgba(71, 167, 200, 0.3);
  transform: translateY(calc(-1 * calc(1px + (2px - 1px) * clamp(min(375 / 768, 1), 0, 1))));
}

/* ======================================== */
/* INDUSTRY CARDS - 3D Flip Effect        */
/* ======================================== */

.industry-card {
  perspective: 100vw;
  aspect-ratio: 4 / 3;
  min-height: clamp(0vw, 20vw, 35vh);
  border-radius: clamp(1.3rem, 3vw, 1.9rem);
  box-shadow: 0.5vw 0.5vw 6vw 4vw rgba(16, 28, 51, 0.14);
  max-width: 20vw;
}

/* Industry cards row - centered with responsive layout */
.industry-cards-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}

.industry-cards-row {
  --bs-gutter-x: clamp(1.5vw, 2%, 3vw) !important;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: calc(4rem + (6rem - 4rem) * clamp(min(375 / 768, 1), 0, 1));
}


/* Main styling class for all industry card elements */
.industry-card-element {
  perspective: 100vw;
  width: 360px;
  height: 360px;
  border-radius: 1.6rem;
  box-shadow: 4.8px 4.8px 96px 57.6px rgba(16, 28, 51, 0.14);
}

/* Responsive layout for devices below 1024px */
@media (max-width: 1023px) {
  .industry-cards-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }
  
  .industry-card-element {
    margin-bottom: 0 !important;
  }
}

/* ======================================== */
/* INDUSTRY CARDS - Small Mobile Breakpoint (576px) */
/* ======================================== */

@media (max-width: 575.98px) {
  /* Add horizontal margins for proper spacing on small screens */
  .industry-card-element {
    margin-left: clamp(0.5rem, 2vw, 1rem);
    margin-right: clamp(0.5rem, 2vw, 1rem);
  }

  /* Allow height to dynamically expand downwards based on content */
  .industry-card-element {
    min-height: auto;
    aspect-ratio: unset;
  }

  /* Hide front side - only show back side below this resolution */
  .card-front {
    display: none !important;
  }

  /* Remove hover interaction on small screens */
  .industry-card-element:hover .card-inner {
    transform: none !important;
  }

  /* Ensure card-back is always visible and properly styled */
  .card-back {
    transform: none !important;
    backface-visibility: visible !important;
  }

  /* Adjust tag positioning for smaller screens */
  .front-industry-tag,
  .back-industry-tag {
    position: static;
    margin-bottom: clamp(0.5rem, 1vw, 0.75rem);
  }
}

/* Base layout for larger screens - horizontal row */
.industry-cards-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 2vw;
  flex-wrap: wrap;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 1.5s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}

.industry-card-element:hover .card-inner {
  transform: rotateY(-180deg);
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 1.6rem;
  overflow: hidden;
}

.card-front {
  background-size: cover;
  background-position: center;
  z-index: 2;
}

/* Base card-back with default image */
.card-back {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  padding: 2rem;
  background-size: cover;
  background-position: center;
  /* Grid image as base with gradient overlay for text readability */
  background-image:
    linear-gradient(135deg, rgba(24, 60, 86, 0.9), rgba(24, 60, 86, 0.7)),
    url("assets/grid_image.jpg");
  color: #fff;
}

/* Individual card variants */
.industry-energy .card-back {
  background-image:
    linear-gradient(135deg, rgba(24, 60, 86, 0.9), rgba(24, 60, 86, 0.7)),
    url("assets/grid_image.jpg");
}

.industry-industry .card-back {
  background-image:
    linear-gradient(135deg, rgba(24, 60, 86, 0.9), rgba(24, 60, 86, 0.7)),
    url("assets/grid_image2.jpg");
}

.industry-infra .card-back {
  background-image:
    linear-gradient(135deg, rgba(24, 60, 86, 0.9), rgba(24, 60, 86, 0.7)),
    url("assets/grid_image3.jpg");
}

/* Card-back text styling */
.card-back h3 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
  line-height: 1.3;
}

.card-back p {
  font-size: 0.875rem;
  line-height: 1.5;
  margin-top: auto;
  flex-grow: 1;
}

.card-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  position: relative;
}

.industry-energy .card-front {
  background-image:
    linear-gradient(135deg, rgba(88, 197, 113, 0.2), rgba(71, 167, 200, 0.2)),
    url("assets/card_electric.jpg");
}

.industry-industry .card-front {
  background-image:
    linear-gradient(135deg, rgba(88, 197, 113, 0.2), rgba(112, 81, 167, 0.24)),
    url("assets/card_industry.jpg");
}

.industry-infra .card-front {
  background-image:
    linear-gradient(135deg, rgba(71, 167, 200, 0.2), rgba(112, 81, 167, 0.26)),
    url("assets/card_infrastructure.jpg");
}

/* Finance industry card */
.industry-finance .card-front {
  background-image:
    linear-gradient(135deg, rgba(71, 167, 200, 0.2), rgba(112, 81, 167, 0.24)),
    url("assets/background_finance.jpg");
}

.industry-finance .card-back {
  background-image:
    linear-gradient(135deg, rgba(24, 60, 86, 0.9), rgba(24, 60, 86, 0.7)),
    url("assets/background_finance.jpg");
}

.industry-card h3,
.industry-card p {
  color: #fff;
}

/* ======================================== */
/* INDUSTRY TAG - POSITIONING VARIANTS    */
/* ======================================== */

/* Base tag styles (shared) */
.front-industry-tag,
.back-industry-tag,
.middle-industry-tag {
  display: inline-flex;
  margin-bottom: clamp(0.75rem, 2vh, 1rem);
  padding: calc(0.4rem + (0.6rem - 0.4rem) * (1 - clamp(min(1920 / 2560, 1), 0, 1))) calc(0.7rem + (0.8rem - 0.7rem) * (1 - clamp(min(1920 / 2560, 1), 0, 1)));
  border-radius: clamp(999px * (min(1 / 1920, 1)), 999px * (min(768 / 1920, 1)), 999px);
  font-size: clamp(0.75rem, 1.5vw, 0.78rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Front card tag - top-left position with enhanced visibility */
.front-industry-tag {
  color: #fff;
  background: linear-gradient(135deg, rgba(71, 167, 200, 0.9), rgba(88, 197, 113, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.4);
  margin-bottom: 0;
  position: absolute;
  top: calc(0.65rem + (0.8rem - 0.65rem) * clamp(min(375 / 768, 1), 0, 1));
  left: calc(0.65rem + (0.8rem - 0.65rem) * clamp(min(375 / 768, 1), 0, 1));
  box-shadow:
    0 calc(4px + (12px - 4px) * (1 - clamp(min(1920 / 2560, 1), 0, 1))) rgba(0, 0, 0, 0.3);
}

/* Back card tag - default top-left positioning */
.back-industry-tag {
  color: #fff;
  background: linear-gradient(135deg, rgba(71, 167, 200, 0.9), rgba(88, 197, 113, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.4);
  margin-bottom: calc(0.5rem + (0.6rem - 0.5rem) * clamp(min(375 / 768, 1), 0, 1));
  box-shadow:
    0 calc(4px + (12px - 4px) * (1 - clamp(min(1920 / 2560, 1), 0, 1))) rgba(0, 0, 0, 0.3);
  max-width: 18rem;
  align-self: flex-start;
}

/* Middle tag utility class for centering */
.middle-industry-tag {
  position: absolute;
  top: clamp(48%, 50% - 2vh, 50%);
  left: clamp(48%, 50% - 2vw, 50%);
  transform: translate(-50%, -50%);
}

@media (max-width: 991px) {
  .front-industry-tag,
  .middle-industry-tag {
    margin-bottom: clamp(0.75rem, 2vh, 1rem);
    transform: none;
  }
  
  .back-industry-tag {
    margin-bottom: clamp(0.4rem, 1vh, 0.5rem);
  }
}

@media (max-width: 575px) {
  .front-industry-tag,
  .middle-industry-tag {
    font-size: clamp(0.65rem, 2vw, 0.78rem);
    padding: calc(0.3rem + (0.4rem - 0.3rem) * (1 - clamp(min(1920 / 2560, 1), 0, 1))) calc(0.6rem + (0.7rem - 0.6rem) * (1 - clamp(min(1920 / 2560, 1), 0, 1)));
  }
  
  .back-industry-tag {
    margin-bottom: clamp(0.3rem, 1vh, 0.4rem);
  }
}

/* ======================================== */
/* USE CASES GRID - Modern Elegant Design
/* ======================================== */

.use-cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: clamp(1.25rem, 0vw, 2.5rem);
  margin-top: clamp(1.75rem, 5vh, 2rem);
  padding-bottom: clamp(3rem, 10vh, 4rem);
}

.use-case-card {
  position: relative;
  background: #fff;
  padding: calc(1.25rem + (1.5rem - 1.25rem) * clamp(min(375 / 768, 1), 0, 1)) clamp(1.8rem, 4vw, 2.5rem) calc(1rem + (1.25rem - 1rem) * clamp(min(375 / 768, 1), 0, 1));
  min-height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right-width: clamp(3px, 0.5vw, 6px);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
  overflow: hidden;
}

.use-case-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(4px, 2vh, 6px);
  background: linear-gradient(90deg, #1a2b4d 0%, #3b5bdb 100%);
  transform: scaleX(0);
  transition: transform 0.4s ease;
}

.use-case-card:hover::before {
  transform: scaleX(1);
}

.use-case-card:last-child {
  border-right: none;
}

.use-case-card:nth-child(3n) {
  border-right: none;
}

.card-icon-wrapper {
  top: clamp(1rem, 5vw, 1.5rem);
  right: clamp(2rem, 8vw, 3rem);
  width: clamp(4vh, 6vw, 2vh);
  height: clamp(4vh, 6vw, 2vh);
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-icon {
  width: 100%;
  height: 100%;
  color: #3b5bdb;
  transition: transform 0.4s ease, color 0.3s ease;
}

.use-case-card:hover .card-icon {
  transform: scale(1.1) rotate(5deg);
  color: #1a2b4d;
}

.use-case-card h3 {
  margin-bottom: 0.5rem;
  color: var(--rqc-ink);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
  position: relative;
}

.use-case-card p {
  margin: 0;
  color: var(--bs-body-color);
  font-size: 0.875rem;
  line-height: 1.4;
  opacity: 0.8;
  position: relative;
}

/* Animated background pattern */
.use-case-card::after {
  content: '';
  position: absolute;
  bottom: calc(-50px + (-30px - (-50px)) * (1 - clamp(min(1920 / 2560, 1), 0, 1)));
  right: calc(-50px + (-30px - (-50px)) * (1 - clamp(min(1920 / 2560, 1), 0, 1)));
  width: calc(100px + (180px - 100px) * (1 - clamp(min(1920 / 2560, 1), 0, 1)));
  height: calc(100px + (180px - 100px) * (1 - clamp(min(1920 / 2560, 1), 0, 1)));
  opacity: 0.03;
  background-image: radial-gradient(circle, #1a2b4d 1px, transparent 1px);
  background-size: calc(20px + (30px - 20px) * (1 - clamp(min(1920 / 2560, 1), 0, 1))) calc(20px + (30px - 20px) * (1 - clamp(min(1920 / 2560, 1), 0, 1)));
  pointer-events: none;
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .use-cases-grid {
    grid-template-columns: repeat(2, 1fr);
  }


  .card-icon-wrapper {
    top: clamp(1.25rem, 4vh, 1.5rem);
    right: clamp(2rem, 8vw, 3rem);
    width: clamp(36px, 7vw, 40px);
    height: clamp(36px, 7vw, 40px);
  }

  .use-case-card h3 {
    font-size: clamp(1.05rem, 2.5vw, 1.1rem);
  }

  .use-case-card p {
    font-size: clamp(0.875rem, 2vw, 0.9rem);
  }
}

@media (max-width: 576px) {
  .use-cases-grid {
    grid-template-columns: 1fr;
  }
  
  .use-case-card {
    padding: calc(1.25rem + (1.5rem - 1.25rem) * clamp(min(375 / 768, 1), 0, 1)) clamp(1.25rem, 3vw, 2rem) calc(1rem + (1.25rem - 1rem) * clamp(min(375 / 768, 1), 0, 1));
    min-height: auto;
  }
  
  .use-case-card:last-child,
  .use-case-card:nth-child(3n) {
    border-right: none;
  }

  .card-icon-wrapper {
    position: static;
    margin-bottom: clamp(0.75rem, 2vh, 1rem);
    width: clamp(48px, 12vw, 60px);
    height: clamp(48px, 12vw, 60px);
  }

  .use-case-card h3 {
    font-size: clamp(1.1rem, 3vw, 1.25rem);
  }

  .use-case-card p {
    font-size: clamp(0.9rem, 2.5vw, 1rem);
  }
}

.process-card-wrapper {
  display: flex;
  align-items: flex-start;
  gap: clamp(0.75rem, 2vw, 1.5rem);
}

.process-card-wrapper span:first-child {
  display: none;
}

.process-card {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: clamp(22rem, 25vh, 20rem);
  flex: 1;
  min-width: 0;
  padding: 1.35rem 1.4rem 1.6rem;
}

.process-image {
  min-height: 8rem;
  margin-bottom: -2rem;
  border-radius: 1.25rem;
  background-size: cover;
  background-position: center;
}

.process-card p {
  margin-top: 1rem;
  margin-bottom: 0;
}

.process-image-one {
  background-image:
    linear-gradient(135deg, rgba(21, 35, 63, 0.18), rgba(88, 197, 113, 0.1)),
    url("assets/background_analyse.jpg");
}

.process-image-two {
  background-image:
    linear-gradient(135deg, rgba(21, 35, 63, 0.12), rgba(71, 167, 200, 0.12)),
    url("assets/background_programming.png");
}

.process-image-three {
  background-image:
    linear-gradient(135deg, rgba(21, 35, 63, 0.12), rgba(112, 81, 167, 0.12)),
    url("assets/background_growth.jpg");
}

.process-card-wrapper span:first-child {
  display: none;
}

.process-step {
  left: clamp(1rem, 5vw, 2rem);
  top: calc(clamp(28vh, 35rem, 45rem) - clamp(2.5rem, 7vh, 3rem));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(28px, 6vw, 40px);
  height: clamp(28px, 6vw, 40px);
  color: #fff;
  border-radius: 0.25rem;
  background: linear-gradient(135deg, var(--rqc-night), var(--rqc-green));
  font-size: clamp(0.875rem, 2vw, 1rem);
  font-weight: 600;
 } 

.contact-section {
  padding: clamp(3rem, 12vh, 6rem) 0;
}

.cta-panel {
  max-width: 76rem;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: calc(1.8rem + (2.25rem - 1.8rem) * clamp(min(375 / 768, 1), 0, 1)) clamp(1.9rem, 4vw, 2.5rem) calc(0.9rem + (1.1rem - 0.9rem) * clamp(min(375 / 768, 1), 0, 1));
  border-radius: 2rem;
  background: linear-gradient(135deg, var(--rqc-green) 0%, var(--rqc-night-soft) 50%, var(--rqc-violet) 100%);
  margin-top: clamp(2rem, 8vh, 5rem);
  margin-bottom: clamp(2rem, 8vh, 5rem);
}

.cta-panel h2 {
  margin-bottom: clamp(0.6rem, 2vh, 0.8rem);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  line-height: 1.2;
  color: #fff;
}

.cta-panel p {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
}

/* Map placeholder */
.map-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  min-height: clamp(200px, 40vh, 350px);
  background: rgba(71, 167, 200, 0.04);
  border-radius: 1.5rem;
  margin-bottom: clamp(1.5rem, 5vh, 1.75rem);
}

.map-placeholder svg {
  opacity: 0.8;
  margin-bottom: clamp(0.6rem, 2vh, 0.75rem);
}

.map-placeholder span {
  font-size: clamp(0.9rem, 1.5vw, 0.95rem);
  color: var(--rqc-muted);
  font-weight: 600;
}

/* Modern contact form */
.contact-form {
  padding-top: clamp(1.25rem, 4vh, 1.75rem);
  border-top: 1px solid rgba(71, 167, 200, 0.1);
}

/* Contact form section - visual box with shadow */
.contact-form-section {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 249, 250, 0.95) 100%);
  border-radius: 1rem;
  padding: clamp(1rem, 1vw, 3rem);
  margin-top: 0vh;
}


/* Add top highlight for visual depth */
.contact-form-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(80%, 40vw, 120%);
  height: clamp(1px, 0.5vh, 2px);
  background: linear-gradient(90deg, transparent, rgba(71, 167, 200, 0.4), transparent);
}

/* Add spacing between contact form and contact info */
.kontaktwege_style {
  background-position: left center !important; /* Align texture to left */
}

/* Mobile responsive styles for kontaktwege section */
@media (max-width: 991px) {
  .kontaktwege_style {
    background-position: left top !important;
    min-height: 400px;
  }
  
  .kontaktwege_style .container {
    padding-left: clamp(1rem, 3vw, 2rem);
    padding-right: clamp(1rem, 3vw, 2rem);
  }
  
  .kontaktwege_style .row.g-4.contact-info-grid {
    margin-top: -10px;
  }
}

.kontaktwege_style + * {
  margin-top: clamp(3rem, 5vh, 5rem) !important;
}

.form-group {
  margin-bottom: clamp(1.2rem, 4vh, 1.35rem);
}

.contact-form label {
  display: block;
  font-size: clamp(0.825rem, 1.5vw, 0.85rem);
  font-weight: 700;
  color: var(--rqc-ink);
  letter-spacing: 0.02em;
  margin-bottom: clamp(0.4rem, 1vh, 0.45rem);
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: calc(0.6rem + (0.75rem - 0.6rem) * clamp(min(375 / 768, 1), 0, 1)) clamp(0.8rem, 2vw, 1.2rem);
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  line-height: calc(1.2 + (1.5 - 1.2) * clamp(min(375 / 768, 1), 0, 1));
  color: var(--rqc-ink);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(71, 167, 200, 0.22);
  border-radius: 0.9rem;
  transition: all 0.25s ease;
  font-family: inherit;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--rqc-muted);
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--bs-primary);
  background: rgba(255, 255, 255, 0.98);
  box-shadow:
    0 0 clamp(4px, 3vw, 6px) rgba(71, 167, 200, 0.12),
    0 calc(8px + (18px - 8px) * (1 - clamp(min(1920 / 2560, 1), 0, 1))) rgba(71, 167, 200, 0.15);
}

.contact-form textarea {
  resize: vertical;
  min-height: clamp(100px, 8vh, 180px);
}

/* Form group styling */
.form-group {
  margin-bottom: clamp(1.2rem, 4vh, 1.5rem);
}

.contact-form label {
  display: block;
  font-size: clamp(0.825rem, 1.5vw, 0.85rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--rqc-ink);
  margin-bottom: clamp(0.5rem, 1.5vh, 0.6rem);
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: clamp(0.75rem, 3vw, 1.25rem) clamp(1rem, 4vw, 1.5rem);
  border-radius: calc(0.6rem + (0.75rem - 0.6rem) * clamp(min(375 / 768, 1), 0, 1));
  border: calc(2px + (3px - 2px) * (1 - clamp(min(1920 / 2560, 1), 0, 1))) solid rgba(34, 48, 78, 0.12);
  background: rgba(255, 255, 255, 0.96);
  font-size: clamp(0.9rem, 1.5vw, 1rem);
  color: var(--rqc-ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--bs-primary);
  background: rgba(255, 255, 255, 0.98);
  box-shadow:
    0 0 calc(2px + (4px - 2px) * clamp(min(375 / 768, 1), 0, 1)) rgba(71, 167, 200, 0.12),
    0 calc(4px + (8px - 4px) * clamp(min(375 / 768, 1), 0, 1)) rgba(71, 167, 200, 0.15);
}

.btn-send {
  width: 100%;
  padding: calc(0.6rem + (0.75rem - 0.6rem) * clamp(min(375 / 768, 1), 0, 1)) clamp(1rem, 6vw, 1.8rem);
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Contact info panel */
.contact-info {
  display: grid;
  gap: calc(1.2rem + (1.5rem - 1.2rem) * clamp(min(375 / 768, 1), 0, 1));
}

.contact-item {
  display: flex;
  align-items: center;
  gap: calc(0.8rem + (1rem - 0.8rem) * clamp(min(375 / 768, 1), 0, 1));
  margin-left: 2rem;
}

.contact-icon {
  width: clamp(3rem, 8vw, 1rem);
  height: clamp(3rem, 8vw, 1rem);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(clamp(3rem, 8vw, 5rem) * 0.25);
  background: linear-gradient(135deg, rgba(88, 197, 113, 0.24), rgba(71, 167, 200, 0.2));
}

.faq-questions {
  margin-top: 3vh;
}

.contact-icon svg {
  width: clamp(18px, 4vw, 28px);
  height: clamp(18px, 4vw, 28px);
}

.contact-details strong {
  display: block;
  font-size: clamp(0.75rem, 1.5vw, 0.8rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--rqc-muted);
  text-transform: uppercase;
}

.contact-link-green {
  font-size: clamp(1.05rem, 2vw, 1.1rem) !important;
  font-weight: 600 !important;
  color: var(--rqc-green) !important;
}

.contact-link-green:hover {
  color: #008a2f !important;
}

/* Kontaktwege Text fett */
.contact-bold-text {
  font-weight: 600 !important;
}

.bold-text {
  font-weight: 700 !important;
}

/* Kontaktformular Text fett */
#kontaktformular p,
#kontaktformular label,
#kontaktformular select,
#kontaktformular textarea {
  font-weight: 600;
}

.map-placeholder {
  width: 100%;
  height: clamp(26vh, 30vw, 480px);
  border-radius: 1.5rem;
  background: linear-gradient(180deg, rgba(71, 167, 200, 0.06), rgba(88, 197, 113, 0.04));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: calc(1.2rem + (1.5rem - 1.2rem) * clamp(min(375 / 768, 1), 0, 1));
}

.map-placeholder svg {
  width: clamp(3rem, 10vw, 6rem);
  height: clamp(3rem, 10vw, 6rem);
  opacity: calc(0.7 + (0.6 - 0.7) * clamp(min(375 / 1920, 1), 0, 1));
}

.map-placeholder span {
  display: block;
  margin-top: calc(0.8rem + (1rem - 0.8rem) * clamp(min(375 / 768, 1), 0, 1));
  font-size: clamp(0.9rem, 1.5vw, 0.95rem);
  color: var(--rqc-muted);
}

/* Contact aside panel */
.contact-aside {
  padding: calc(1.4rem + (1.75rem - 1.4rem) * clamp(min(375 / 768, 1), 0, 1));
}

.aside-label {
  color: var(--rqc-teal);
  background: rgba(71, 167, 200, 0.12);
}

.aside-checks {
  margin: 0;
  padding-left: clamp(1rem, 3vw, 1.2rem);
}

.aside-checks li + li {
  margin-top: clamp(0.6rem, 2vh, 0.7rem);
}

.site-footer {
  padding-top: calc(2.4rem + (3rem - 2.4rem) * clamp(min(375 / 768, 1), 0, 1));
  padding-bottom: calc(1.6rem + (2rem - 1.6rem) * clamp(min(375 / 768, 1), 0, 1));
  background: var(--rqc-night);
  color: rgba(255, 255, 255, 0.78);
}

.site-footer h3 {
  margin-bottom: calc(0.2rem + (0.25rem - 0.2rem) * clamp(min(375 / 768, 1), 0, 1));
  color: #fff;
  font-size: clamp(0.875rem, 1.5vw, 1rem);
  font-weight: 800;
}

.footer-copy {
  max-width: min(40ch, 90%);
  margin-top: calc(0.25rem + (0.3rem - 0.25rem) * clamp(min(375 / 768, 1), 0, 1));
}

.footer-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links li + li {
  margin-top: calc(0.2rem + (0.25rem - 0.2rem) * clamp(min(375 / 768, 1), 0, 1));
}

.footer-links a,
.footer-links li {
  color: rgba(255, 255, 255, 0.72);
}

.footer-links a:hover,
.footer-links a:focus {
  color: #fff;
}

.footer-bottom {
  margin-top: clamp(0.5rem, 2vh, 1rem);
  padding-top: calc(0.32rem + (0.4rem - 0.32rem) * clamp(min(375 / 768, 1), 0, 1));
  padding-bottom: calc(1.2rem + (1.5rem - 1.2rem) * clamp(min(375 / 768, 1), 0, 1));
  border-top-width: clamp(1px, 0.5vw, 2px);
  border-top-style: solid;
  border-top-color: rgba(255, 255, 255, 0.08);
}

.back-to-top {
  position: fixed;
  right: clamp(1rem, 4vw, 1.5rem);
  bottom: clamp(1rem, 5vh, 2rem);
  z-index: 1020;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(3rem, 8vw, 4rem);
  height: clamp(3rem, 8vw, 4rem);
  color: #fff;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--rqc-green), var(--rqc-teal));
  box-shadow: #72a9e463 3px calc(2px + (12px - 4px) * (1 - clamp(min(1920 / 2560, 1), 0, 1))) calc(8px + (24px - 8px) * (1 - clamp(min(1920 / 2560, 1), 0, 1)));
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(4px + (8px - 4px) * clamp(min(375 / 768, 1), 0, 1)));
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.legal-page {
  min-height: clamp(60vh, 50vw, 80vh);
  padding-top: clamp(6rem, 15vh, 10rem);
}

.legal-card {
  padding: clamp(1.2rem, 2vw, 7.5rem);
}

.legal-card h1 {
  margin-bottom: calc(0.6rem + (1rem - 0.6rem) * clamp(min(375 / 768, 1), 0, 1));
  color: var(--rqc-ink);
  font-size: clamp(1.7rem, 3.5vw, 2.9rem);
  font-weight: 800;
}

.legal-card .section-title {
  margin-top: calc(1.4rem + (2rem - 1.4rem) * clamp(min(375 / 768, 1), 0, 1));
  margin-bottom: clamp(1rem, 1.5vh, 1.5rem);
  font-size: clamp(1.1rem, 3vw, 1.6rem);
}

.legal-card h3 {
  margin-top: calc(0.7rem + (1rem - 0.7rem) * clamp(min(375 / 768, 1), 0, 1));
  color: var(--rqc-ink);
  font-size: clamp(0.95rem, 1.8vw, 1.05rem);
  font-weight: 800;
}

.legal-card dl {
  display: grid;
  gap: clamp(0.9rem, 1vh, 1.2rem);
}

.legal-card dt {
  color: var(--rqc-ink);
  font-weight: 800;
}

.legal-card dd {
  margin: 0;
}

@media (max-width: 1199.98px) {
  .site-navbar {
    background: rgba(21, 35, 63, 0.96);
  }

  #mainNav {
    margin-top: calc(0.65rem + (0.75rem - 0.65rem) * clamp(min(375 / 768, 1), 0, 1));
  }

  .nav-link.active::after {
    left: 0;
    right: auto;
    width: clamp(2.5rem, 6vw, 3.5rem);
    bottom: -0.1rem;
  }
}

@media (max-width: 991px) {
  .hero-section {
    min-height: auto;
    padding-top: calc(6rem + (7.5rem - 6rem) * clamp(min(375 / 768, 1), 0, 1));
  }

  /* Modellierung hero section keeps its larger height on mobile */
  .modellierung-hero-section {
    min-height: clamp(70vh, 55vw, 90vh);
    padding-top: calc(8rem + (10rem - 8rem) * clamp(min(375 / 768, 1), 0, 1));
  }

  .hero-visual {
    min-height: calc(20rem + (26rem - 20rem) * clamp(min(375 / 768, 1), 0, 1));
  }

  /* Mobile: switch visual panels to relative positioning */
  .visual-panel-main,
  .visual-panel-secondary,
  .visual-panel-note {
    position: relative !important;
    inset: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    top: auto !important;
    width: 100% !important;
    margin-bottom: calc(0.8rem + (1rem - 0.8rem) * clamp(min(375 / 768, 1), 0, 1));
  }

}

@media (max-width: 767px) {
  html {
    scroll-padding-top: clamp(76px, 8vh, 100px);
  }

  .hero-title {
    font-size: clamp(2.5rem, 14vw, 4rem);
  }

  .content-section {
    padding: clamp(4.5rem, 7vh, 7rem) 0;
  }

  .visual-panel-main,
  .visual-panel-secondary,
  .visual-panel-note {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    margin-bottom: clamp(1rem, 2vh, 2rem);
  }

  .hero-visual {
    display: grid;
    gap: clamp(1rem, 3vw, 2rem);
    min-height: auto;
  }

  .visual-panel-main {
    min-height: clamp(25rem, 40vw, 35rem);
  }

  .visual-panel-note {
    left: auto;
  }

  .intro-strip {
    margin-top: -0.5rem;
  }

  .process-step {
    position: static;
    margin-bottom: calc(0.8rem + (1rem - 0.8rem) * clamp(min(375 / 768, 1), 0, 1));
  }

  .cta-panel,
  .legal-card {
    padding: clamp(2.5rem, 0vh, 0rem);
  }

  /* Contact Section - Modern Minimalist Design */
  .contact-section {
    position: relative;
    overflow: hidden;
  }

  .contact-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: clamp(12rem, 8vw, 16rem);
    background: linear-gradient(180deg, rgba(71, 167, 200, 0.04), transparent);
    z-index: 0;
  }

  .contact-section::after {
    content: "";
    position: absolute;
    bottom: -3rem;
    right: -5%;
    width: clamp(30rem, 25vw, 48rem);
    height: clamp(30rem, 25vw, 48rem);
    background: radial-gradient(circle, rgba(88, 197, 113, 0.06), transparent 60%);
    border-radius: 50%;
    z-index: 0;
  }

  .contact-section > div {
    position: relative;
    z-index: 1;
  }

  /* Compact container sizing */
  .container.contact-container {
    max-width: clamp(1200px, 85vw, 1400px);
  }

  .contact-info {
    padding: clamp(2rem, 6vw, 3.5rem);
    background: rgba(255, 255, 255, 0.94);
    border-width: clamp(1px, 0.5vw, 2px);
    border-style: solid;
    border-color: rgba(71, 167, 200, 0.18);
    border-radius: clamp(1.5rem, 3vw, 2rem);
    box-shadow:
      0 clamp(18px, 12vw, 36px) rgba(16, 28, 51, 0.13),
      0 clamp(6px, 4vw, 12px) rgba(71, 167, 200, 0.1);
    backdrop-filter: blur(clamp(16px, 3vw, 24px));
  }

  .contact-info::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: clamp(200%, 150vw, 300%);
    height: clamp(200%, 150vw, 300%);
    background: radial-gradient(circle at center, rgba(71, 167, 200, 0.03), transparent 60%);
    border-radius: 999px;
    pointer-events: none;
  }

  .contact-item {
    display: grid;
    gap: clamp(0.8rem, 1.5vw, 1.2rem);
    padding: clamp(1.25rem, 3vw, 2rem) clamp(1.4rem, 3vw, 2rem);
    margin-bottom: clamp(1rem, 1.5vw, 1.5rem);
    border-radius: clamp(1.25rem, 2.5vw, 1.75rem);
    background: rgba(71, 167, 200, 0.04);
    border-width: clamp(1px, 0.5vw, 2px);
    border-style: solid;
    border-color: rgba(71, 167, 200, 0.12);
    transition: all 0.25s ease;
  }

  .contact-item:hover {
    background: rgba(71, 167, 200, 0.08);
    border-color: rgba(71, 167, 200, 0.24);
    transform: translateY(-2px);
    box-shadow:
      0 clamp(8px, 6vw, 18px) rgba(71, 167, 200, 0.15);
  }

  .contact-item:last-child {
    margin-bottom: 0;
  }

  .contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(3.8rem, 6vw, 5rem);
    height: clamp(3.8rem, 6vw, 5rem);
    border-radius: clamp(1rem, 2vw, 1.5rem);
    background: linear-gradient(135deg, rgba(88, 197, 113, 0.24), rgba(71, 167, 200, 0.2));
    box-shadow:
      0 6px 14px rgba(71, 167, 200, 0.18);
    flex-shrink: 0;
  }

  .contact-icon svg {
    width: clamp(20px, 3vw, 30px);
    height: clamp(20px, 3vw, 30px);
  }

  .contact-details strong {
    display: block;
    font-size: clamp(0.85rem, 1.2vw, 1rem);
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--rqc-muted);
    text-transform: uppercase;
    margin-bottom: clamp(0.25rem, 0.6vw, 0.4rem);
  }

  .contact-details a,
  .contact-details span {
    font-size: clamp(1.05rem, 1.8vw, 1.2rem);
    font-weight: 600;
    color: var(--rqc-ink);
    line-height: 1.4;
  }

  .contact-details a:hover {
    color: var(--bs-primary);
  }

  /* Map placeholder with gradient overlay */
  .map-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 1vw, 2rem);
    padding: clamp(2.5rem, 4vh, 4rem);
    border-radius: clamp(1.5rem, 2vw, 2rem);
    background: linear-gradient(135deg, rgba(71, 167, 200, 0.06), rgba(88, 197, 113, 0.04));
    border-width: clamp(1px, 0.5vw, 2px);
    border-style: solid;
    border-color: rgba(71, 167, 200, calc(0.1 + (0.15 - 0.1) * clamp(min(375 / 768, 1), 0, 1)));
    margin-bottom: calc(1.6rem + (2rem - 1.6rem) * clamp(min(375 / 768, 1), 0, 1));
  }

  .map-placeholder svg {
    width: clamp(48px, 3vw, 70px);
    height: clamp(48px, 3vw, 70px);
    opacity: 0.9;
  }

  .map-placeholder span {
    font-size: calc(0.85rem + (0.95rem - 0.85rem) * clamp(min(375 / 768, 1), 0, 1));
    color: var(--rqc-muted);
    font-weight: 600;
  }

  /* Modern contact form */
  .contact-form {
    padding-top: calc(1rem + (1.25rem - 1rem) * clamp(min(375 / 768, 1), 0, 1));
    border-top-width: clamp(1px, 0.5vw, 2px);
    border-top-style: solid;
    border-top-color: rgba(71, 167, 200, 0.1);
  }

  .form-group {
    margin-bottom: calc(1.2rem + (1.35rem - 1.2rem) * clamp(min(375 / 768, 1), 0, 1));
  }

  .contact-form label {
    display: block;
    font-size: calc(0.75rem + (0.85rem - 0.75rem) * clamp(min(375 / 768, 1), 0, 1));
    font-weight: 700;
    color: var(--rqc-ink);
    letter-spacing: 0.02em;
    margin-bottom: calc(0.4rem + (0.45rem - 0.4rem) * clamp(min(375 / 768, 1), 0, 1));
  }

  .contact-form input,
  .contact-form textarea {
    width: 100%;
    padding: calc(0.75rem + (0.9rem - 0.75rem) * clamp(min(375 / 768, 1), 0, 1)) clamp(0.9rem, 0.8vw, 1.4rem);
    font-size: clamp(1rem, 0.9vw, 1.2rem);
    line-height: 1.5;
    color: var(--rqc-ink);
    background: rgba(255, 255, 255, 0.85);
    border-width: clamp(1px, 0.5vw, 2px);
    border-style: solid;
    border-color: rgba(71, 167, 200, 0.22);
    border-radius: calc(0.75rem + (0.9rem - 0.75rem) * clamp(min(375 / 768, 1), 0, 1));
    transition: all 0.25s ease;
    font-family: inherit;
  }

  .contact-form input::placeholder,
  .contact-form textarea::placeholder {
    color: var(--rqc-muted);
  }

  .contact-form input:focus,
  .contact-form textarea:focus {
    outline: none;
    border-color: var(--bs-primary);
    background: rgba(255, 255, 255, 0.98);
    box-shadow:
      0 0 calc(4px + (6px - 4px) * (1 - clamp(min(1920 / 2560, 1), 0, 1))) rgba(71, 167, 200, 0.12),
      0 calc(8px + (18px - 8px) * (1 - clamp(min(1920 / 2560, 1), 0, 1))) rgba(71, 167, 200, 0.15);
  }

  .contact-form textarea {
    resize: vertical;
    min-height: calc(100px + (180px - 100px) * (1 - clamp(min(1920 / 2560, 1), 0, 1)));
  }

  .btn-send {
    width: 100%;
    padding: calc(0.75rem + (0.9rem - 0.75rem) * clamp(min(375 / 768, 1), 0, 1)) clamp(1.3rem, 1vw, 2rem);
    font-size: clamp(1rem, 0.9vw, 1.2rem);
    font-weight: 700;
    letter-spacing: 0.02em;
  }

  /* Contact aside panel */
  .contact-aside {
    background: linear-gradient(145deg, rgba(21, 35, 63, 0.98), rgba(33, 50, 85, 0.96));
    border-radius: clamp(1.75rem, 2vw, 2.5rem);
    padding: clamp(2.5rem, 3vh, 3.5rem);
    box-shadow:
      0 calc(12px + (24px - 12px) * clamp(min(375 / 768, 1), 0, 1)) rgba(10, 19, 37, 0.28),
      0 calc(4px + (8px - 4px) * clamp(min(375 / 768, 1), 0, 1)) rgba(71, 167, 200, 0.15);
    position: relative;
    overflow: hidden;
  }

  .contact-aside::before {
    content: "";
    position: absolute;
    top: calc(-1 * clamp(12%, 15vh, 18%));
    right: -8%;
    width: clamp(20rem, 16vw, 32rem);
    height: clamp(20rem, 16vw, 32rem);
    background: radial-gradient(circle, rgba(71, 167, 200, 0.12), transparent 60%);
    border-radius: 50%;
    opacity: 0.3;
  }

  .contact-aside h3 {
    color: #fff;
    font-size: calc(1.2rem + (1.4rem - 1.2rem) * clamp(min(375 / 768, 1), 0, 1));
    line-height: 1.5;
    margin-bottom: clamp(1rem, 1vh, 1.5rem);
    font-weight: 700;
  }

  .contact-aside p {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.7;
    margin-bottom: calc(1.2rem + (1.5rem - 1.2rem) * clamp(min(375 / 768, 1), 0, 1));
  }

  /* Aside label with gradient */
  .aside-label {
    display: inline-block;
    padding: calc(0.35rem + (0.4rem - 0.35rem) * clamp(min(375 / 768, 1), 0, 1)) clamp(0.75rem, 0.6vw, 1.1rem);
    background: linear-gradient(135deg, rgba(88, 197, 113, 0.2), rgba(71, 167, 200, 0.2));
    border-width: clamp(1px, 0.5vw, 2px);
    border-style: solid;
    border-color: rgba(71, 167, 200, 0.25);
    color: var(--rqc-teal);
    font-size: calc(0.7rem + (0.78rem - 0.7rem) * clamp(min(375 / 768, 1), 0, 1));
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: 999px;
    margin-bottom: calc(1rem + (1.25rem - 1rem) * clamp(min(375 / 768, 1), 0, 1));
  }

  /* Aside checks list */
  .aside-checks {
    margin: 0;
    padding-left: 0;
    list-style: none;
  }

  .aside-checks li {
    position: relative;
    padding-left: calc(1.4rem + (1.75rem - 1.4rem) * clamp(min(375 / 768, 1), 0, 1));
    color: rgba(255, 255, 255, 0.85);
    line-height: calc(1.4 + (1.65 - 1.4) * clamp(min(375 / 768, 1), 0, 1));
    margin-bottom: calc(0.75rem + (0.9rem - 0.75rem) * clamp(min(375 / 768, 1), 0, 1));
    font-size: clamp(0.95rem, 0.8vw, 1.1rem);
  }

  .aside-checks li::before {
    content: "✓";
    position: absolute;
    left: 0;
    width: clamp(18px, 1.5vw, 30px);
    height: clamp(18px, 1.5vw, 30px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rqc-green);
    font-weight: 800;
    font-size: clamp(0.9rem, 0.8vw, 1.2rem);
  }

  .aside-checks li + li {
    margin-top: calc(0.4rem + (0.5rem - 0.4rem) * clamp(min(375 / 768, 1), 0, 1));
  }

  /* Contact aside buttons */
  .contact-aside .btn-accent {
    background: linear-gradient(135deg, rgba(88, 197, 113, 0.2), rgba(71, 167, 200, 0.2));
    border-width: clamp(1px, 0.5vw, 2px);
    border-style: solid;
    border-color: rgba(71, 167, 200, 0.4);
    color: #fff;
    padding: calc(0.65rem + (0.8rem - 0.65rem) * clamp(min(375 / 768, 1), 0, 1)) clamp(1.1rem, 1vw, 1.8rem);
    font-size: clamp(0.95rem, 0.8vw, 1.1rem);
    transition: all 0.25s ease;
  }

  .contact-aside .btn-accent:hover,
  .contact-aside .btn-accent:focus {
    background: linear-gradient(135deg, rgba(88, 197, 113, 0.3), rgba(71, 167, 200, 0.3));
    border-color: var(--rqc-teal);
    transform: translateY(-1px);
    box-shadow:
      0 calc(4px + (8px - 4px) * clamp(min(375 / 768, 1), 0, 1)) rgba(71, 167, 200, 0.25);
  }

  .contact-aside .btn-outline-dark {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.08);
    padding: calc(0.65rem + (0.8rem - 0.65rem) * clamp(min(375 / 768, 1), 0, 1)) clamp(1.1rem, 1vw, 1.8rem);
    font-size: clamp(0.95rem, 0.8vw, 1.1rem);
    transition: all 0.25s ease;
  }

  .contact-aside .btn-outline-dark:hover,
  .contact-aside .btn-outline-dark:focus {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-1px);
  }

  /* Contact section container */
  .contact-section {
    background: linear-gradient(180deg, rgba(249, 251, 255, 0) 0%, rgba(71, 167, 200, 0.03) 100%);
  }

  /* Contact info container */
  .contact-info {
    padding: calc(1.6rem + (2rem - 1.6rem) * clamp(min(375 / 768, 1), 0, 1));
  }

  /* Contact item with icon and details */
  .contact-item {
    display: flex;
    align-items: flex-start;
    gap: calc(1rem + (1.25rem - 1rem) * clamp(min(375 / 768, 1), 0, 1));
  }

  .contact-icon {
    width: clamp(48px, 3vw, 70px);
    height: clamp(48px, 3vw, 70px);
    border-radius: clamp(1.25rem, 1vw, 1.75rem);
    background: linear-gradient(135deg, rgba(88, 197, 113, 0.18), rgba(71, 167, 200, 0.16));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
      0 calc(4px + (8px - 4px) * clamp(min(375 / 768, 1), 0, 1)) rgba(16, 28, 51, 0.1);
    flex-shrink: 0;
  }

  .contact-details {
    display: flex;
    flex-direction: column;
    gap: calc(0.25rem + (0.3rem - 0.25rem) * clamp(min(375 / 768, 1), 0, 1));
  }

  .contact-details strong {
    color: var(--rqc-ink);
    font-size: clamp(0.95rem, 0.8vw, 1.1rem);
    font-weight: 700;
  }

  .contact-details a,
  .contact-details span {
    color: var(--bs-link-color);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
  }

  .contact-details a:hover {
    color: var(--rqc-teal);
  }

  /* Contact form */
  .contact-form {
    padding: calc(1.4rem + (1.75rem - 1.4rem) * clamp(min(375 / 768, 1), 0, 1));
    background: rgba(255, 255, 255, 0.6);
    border-radius: calc(1.2rem + (1.5rem - 1.2rem) * clamp(min(375 / 768, 1), 0, 1));
    border-width: clamp(1px, 0.5vw, 2px);
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.35);
  }

  .form-group {
    margin-bottom: calc(1.2rem + (1.4rem - 1.2rem) * clamp(min(375 / 768, 1), 0, 1));
  }

  .form-group label {
    display: block;
    color: var(--rqc-ink);
    font-weight: 600;
    margin-bottom: calc(0.42rem + (0.5rem - 0.42rem) * clamp(min(375 / 768, 1), 0, 1));
    font-size: clamp(0.95rem, 0.8vw, 1.1rem);
  }

  .contact-form input,
  .contact-form textarea {
    width: 100%;
    padding: calc(0.7rem + (0.85rem - 0.7rem) * clamp(min(375 / 768, 1), 0, 1)) clamp(0.9rem, 0.8vw, 1.4rem);
    border-radius: calc(0.6rem + (0.75rem - 0.6rem) * clamp(min(375 / 768, 1), 0, 1));
    border-width: clamp(1px, 0.5vw, 2px);
    border-style: solid;
    border-color: rgba(21, 35, 63, 0.14);
    background: rgba(255, 255, 255, 0.8);
    font-family: inherit;
    font-size: clamp(1rem, 0.9vw, 1.2rem);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .contact-form input:focus,
  .contact-form textarea:focus {
    outline: none;
    border-color: var(--rqc-teal);
    box-shadow:
      0 0 clamp(3px, 2vw, 5px) rgba(71, 167, 200, 0.15);
  }

  /* Responsive adjustments */
  @media (max-width: 991.98px) {
    .contact-info {
      padding: clamp(2rem, 2vh, 3rem);
    }

    .map-placeholder {
      padding: clamp(2rem, 2vh, 3rem);
    }

    .contact-aside {
      padding: calc(1.8rem + (2rem - 1.8rem) * clamp(min(375 / 768, 1), 0, 1));
    }

    .aside-label {
      font-size: clamp(0.75rem, 0.7vw, 1rem);
      padding: clamp(0.35rem, 0.3vh, 0.6rem) clamp(0.8rem, 0.7vw, 1.3rem);
    }
  }

  @media (max-width: 767.98px) {
    .contact-section > div {
      flex-direction: column !important;
    }

    .col-lg-6,
    .col-md-4 {
      width: 100% !important;
    }

    .contact-info {
      padding: calc(1.4rem + (1.75rem - 1.4rem) * clamp(min(375 / 768, 1), 0, 1));
    }

    .map-placeholder {
      padding: clamp(1.75rem, 2vh, 2.5rem);
    }

    .contact-form input,
    .contact-form textarea {
      font-size: clamp(0.95rem, 0.8vw, 1.1rem);
      padding: clamp(0.85rem, 0.7vh, 1.2rem) clamp(1rem, 0.9vw, 1.4rem);
    }

    .btn-send {
      padding: clamp(0.85rem, 0.7vh, 1.2rem) clamp(1.4rem, 1.3vw, 2rem);
    }

    .contact-aside h3 {
      font-size: calc(1.25rem + (1.5rem - 1.25rem) * (1 - clamp(min(1920 / 2560, 1), 0, 1)));
    }

    .contact-aside p {
      font-size: calc(0.95rem + (1.1rem - 0.95rem) * (1 - clamp(min(1920 / 2560, 1), 0, 1)));
    }

    .aside-checks li {
      padding-left: clamp(1.5rem, 1.3vw, 2.2rem);
      font-size: clamp(0.9rem, 0.8vw, 1.05rem);
    }

    .aside-checks li::before {
      left: -2px;
      width: clamp(16px, 1vw, 28px);
      height: clamp(16px, 1vw, 28px);
      font-size: clamp(0.85rem, 0.7vw, 1.1rem);
    }
  }
}

/* ======================================== */
/* COMPARISON CARDS SECTION               */
/* Core vs Pro comparison layout          */
/* ======================================== */

.comparison-section {
  padding-top: clamp(3rem, 4vh, 5rem);
  background: linear-gradient(180deg, rgba(249, 251, 255, 0.6) 0%, rgba(243, 247, 252, 0.8) 100%);
}

.comparison-section > div:first-child {
  margin-bottom: 0 !important;
}

.comparison-container {
  display: flex;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: stretch;
  padding-bottom: clamp(3rem, 5vh, 5rem);
}

.comparison-card {
  flex: 1;
  padding: clamp(0rem, 2vw, 2.5rem);
  border-radius: clamp(1.5rem, 4vw, 2rem);
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.07),
    0 8px 16px rgba(0, 0, 0, 0.12),
    0 24px 48px rgba(16, 28, 51, 0.1);
  display: flex;
  flex-direction: column;
}

.comparison-card-core {
  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e0 50%, #e6edf3 100%);
  color: #fff;
  border-width: clamp(1px, 0.5vw, 2px);
  border-style: solid;
  border-color: rgba(71, 167, 200, 0.18);
}

.comparison-card-core h3 {
  color: #ffffff;
}

.comparison-card-core .comparison-list li {
  color: rgba(255, 255, 255, 0.92);
}

.comparison-card-core .comparison-icon {
  color: rgba(71, 167, 200, 0.9);
}

.card-buttons {
  display: flex;
  gap: clamp(0.75rem, 0.6vw, 1.2rem);
  padding-top: clamp(0rem, 1vh, 1.8rem);
}

.card-buttons .btn {
  flex: 0 0 auto;
  text-align: center;
  font-weight: 500;
  padding: clamp(0.5rem, 1vh, 0.8rem) clamp(1rem, 0.9vw, 1.4rem);
  font-size: clamp(0.85rem, 1vw, 1rem);
  white-space: nowrap;
}

.card-buttons .btn:first-child {
  margin-left: 0;
}

/* Pro card - cta-panel gradient with star icons */
.comparison-card-pro {
  background: linear-gradient(135deg, #00a63d 0%, #213255 50%, #7051a7 100%);
}

.comparison-card-pro h3 {
  color: #fff;
}

.comparison-card-pro .comparison-list li {
  color: rgba(255, 255, 255, 0.92);
}

.comparison-card-pro .comparison-icon {
  color: #ffffff;
}

.comparison-card h3 {
  margin-bottom: clamp(1.5rem, 4vh, 2rem);
  font-size: clamp(1.75rem, 4vw, 2.4rem);
  font-weight: 700;
  color: #fff;
}

.comparison-list {
  list-style: none;
  padding: 0;
  margin: 0;
  flex-grow: 1;
}

.comparison-list li {
  position: relative;
  padding-left: clamp(2rem, 4vw, 3rem);
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
  margin-bottom: clamp(0.375rem, 1vh, 0.6rem);
}

.comparison-list li + li {
  margin-top: 0;
}

/* Core card - light subtle gradient inspired by cta-panel */
.comparison-card-core {
    background: linear-gradient(155deg, #e9f2ffe6 0%, #ccd0d5 50%, #bfd1df 100%);
    color: var(--rqc-ink);
    border-width: clamp(1px, 0.5vw, 2px);
    border-style: solid;
    border-color: rgba(71, 167, 200, 0.18);
}

.comparison-card-core h3 {
  color: var(--rqc-night);
}

.comparison-card-core .comparison-list li {
  color: var(--rqc-night);
}

.comparison-card-core .comparison-icon {
  color: rgba(71, 167, 200, 0.9);
}

/* Pro card - cta-panel gradient with star icons */
.comparison-card-pro {
  background: linear-gradient(135deg, #00a63d 0%, #213255 50%, #7051a7 100%);
}

.comparison-card-pro h3 {
  color: #fff;
}

.comparison-card-pro .comparison-list li {
  color: rgba(255, 255, 255, 0.92);
}

.comparison-card-pro .comparison-icon {
  color: #ffffff;
}

/* Comparison icons */
.comparison-icon {
  position: absolute;
  left: 0;
  width: clamp(24px, 2vw, 36px);
  height: clamp(24px, 2vw, 36px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: clamp(1rem, 0.9vw, 1.4rem);
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
  .comparison-container {
    flex-direction: column;
  }
  
  .comparison-card {
    padding: calc(2rem + (3rem - 2rem) * (1 - clamp(min(1920 / 2560, 1), 0, 1)));
  }
}

@media (max-width: 767.98px) {
  .comparison-section {
    padding: clamp(3rem, 4vh, 5rem) 0;
  }
  
  .comparison-container {
    gap: calc(1.2rem + (1.5rem - 1.2rem) * clamp(min(375 / 768, 1), 0, 1));
  }
  
  .comparison-card {
    padding: clamp(1.75rem, 2vh, 2.5rem);
  }
  
  .comparison-card h3 {
    font-size: calc(1.2rem + (1.4rem - 1.2rem) * clamp(min(375 / 768, 1), 0, 1));
  }
}

/* ======================================== */
/* LEGAL PAGE - Impressum Section         */
/* Company info and legal disclaimers    */
/* ======================================== */

.missing-info {
  background-color: #dc3545 !important;
  color: white !important;
  border-radius: calc(0.6rem + (0.75rem - 0.6rem) * clamp(min(375 / 768, 1), 0, 1));
  padding: calc(0.85rem + (1rem - 0.85rem) * clamp(min(375 / 768, 1), 0, 1)) clamp(1rem, 0.9vw, 1.5rem);
  font-weight: 600;
  text-align: center;
}

.missing-info::before {
  content: "⚠️";
  margin-right: calc(0.42rem + (0.5rem - 0.42rem) * clamp(min(375 / 768, 1), 0, 1));
}

.legal-header {
  text-align: center;
  padding-bottom: calc(1.6rem + (2rem - 1.6rem) * clamp(min(375 / 768, 1), 0, 1));
  margin-bottom: calc(2.4rem + (3rem - 2.4rem) * clamp(min(375 / 768, 1), 0, 1));
}

.section-title {
  font-size: calc(1.3rem + (1.5rem - 1.3rem) * clamp(min(375 / 768, 1), 0, 1));
  color: var(--rqc-ink);
  font-weight: 700;
  margin-bottom: calc(1.2rem + (1.5rem - 1.2rem) * clamp(min(375 / 768, 1), 0, 1));
  padding-bottom: calc(0.62rem + (0.75rem - 0.62rem) * clamp(min(375 / 768, 1), 0, 1));
  border-bottom-width: calc(1.5px + (2px - 1.5px) * clamp(min(375 / 768, 1), 0, 1));
}

.info-grid {
  display: grid;
  gap: calc(1.2rem + (1.5rem - 1.2rem) * clamp(min(375 / 768, 1), 0, 1));
}

/* ======================================== */
/* MAIN SITE - High Resolution Fix        */
/* Adjust hero layout for 4K+ screens     */
/* ======================================== */

@media (min-width: 2560px) {
  .hero-visual-container {
    padding-top: calc(14rem + (18.5rem - 14rem) * clamp(min(375 / 768, 1), 0, 1));
  }

  .hero-proof-wide {
    margin-top: calc(4rem + (5rem - 4rem) * clamp(min(375 / 768, 1), 0, 1));
  }

  .scroll-indicator {
    margin-top: calc(-1.2rem + (-1.5rem - (-1.2rem)) * clamp(min(375 / 768, 1), 0, 1));
  }
}

@media (min-width: 992px) {
  .info-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

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

.info-item {
  padding: calc(1rem + (1.25rem - 1rem) * clamp(min(375 / 768, 1), 0, 1));
  background: rgba(255, 255, 255, 0.7);
  border-radius: clamp(0.875rem, 0.7vw, 1.2rem);
  border-width: clamp(1px, 0.5vw, 2px);
  border-style: solid;
  border-color: rgba(34, 48, 78, 0.08);
}

.info-label {
  display: block;
  font-size: calc(0.75rem + (0.85rem - 0.75rem) * clamp(min(375 / 768, 1), 0, 1));
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rqc-muted);
  margin-bottom: calc(0.42rem + (0.5rem - 0.42rem) * clamp(min(375 / 768, 1), 0, 1));
  font-weight: 600;
}

.info-value {
  margin: 0;
  color: var(--bs-body-color);
  line-height: 1.6;
}

.disclaimer-item {
  padding: calc(1rem + (1.25rem - 1rem) * clamp(min(375 / 768, 1), 0, 1));
  background: rgba(244, 247, 251, 0.8);
  border-radius: clamp(0.875rem, 0.7vw, 1.2rem);
  margin-bottom: calc(0.85rem + (1rem - 0.85rem) * clamp(min(375 / 768, 1), 0, 1));
}

.disclaimer-label {
  display: block;
  font-size: clamp(0.85rem, 0.7vw, 1rem);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rqc-ink);
  margin-bottom: calc(0.62rem + (0.75rem - 0.62rem) * clamp(min(375 / 768, 1), 0, 1));
  font-weight: 600;
}

.disclaimer-item p {
  margin: 0;
  padding-left: calc(1rem + (1.25rem - 1rem) * clamp(min(375 / 768, 1), 0, 1));
}

.legal-footer {
  text-align: center;
  padding-top: calc(1.6rem + (2rem - 1.6rem) * clamp(min(375 / 768, 1), 0, 1));
}

/* ======================================== */