:root {
  --purple: #6f38c2;
  --purple-dark: #171f4e;
  --purple-soft: #f3edf9;
  --line: rgba(111, 56, 194, 0.12);
  --teal: #65d7ea;
  --muted: #697188;
  --shadow-soft: 0 18px 40px rgba(42, 23, 86, 0.08);
  --shadow-card: 0 24px 72px rgba(42, 23, 86, 0.12);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  color: var(--purple-dark);
  background: #fff;
  overflow-x: hidden;
}
a { color: var(--purple); text-decoration: none; }
a:hover { color: #532996; }
img { max-width: 100%; display: block; }
.site-shell { width: min(100% - 48px, 1520px); margin: 0 auto; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 1100;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(23, 31, 78, 0.04);
}
.header-inner {
  min-height: 124px;
  display: grid;
  grid-template-columns: 290px 1fr;
  align-items: center;
  gap: 32px;
}
.brand {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}
.brand img { width: 252px; height: auto; }
.nav-desktop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}
.nav-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0 auto;
  padding: 14px 24px;
  min-height: 64px;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(111,56,194,.08);
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
}
.nav-pill a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 22px;
  border-radius: 999px;
  color: var(--purple-dark);
  font-weight: 800;
  font-size: 1rem;
}
.nav-pill a:hover { background: rgba(111,56,194,.05); }
.nav-pill i { color: var(--purple); }
.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 230px;
  padding: 18px 34px;
  border-radius: 999px;
  color: #fff;
  font-weight: 800;
  background: linear-gradient(135deg, #6f38c2 0%, #8342d3 100%);
  box-shadow: 0 18px 34px rgba(111,56,194,.22);
}
.header-cta:hover { color: #fff; }
.navbar-toggler {
  justify-self: end;
  border: 0;
  box-shadow: none !important;
}
.navbar-toggler-icon {
  width: 2rem;
  height: 2rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28111,56,194,0.95%29' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.hero-section {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg,
      rgba(238, 248, 251, 0.92) 0%,
      rgba(245, 243, 251, 0.84) 28%,
      rgba(245, 239, 251, 0.50) 48%,
      rgba(245, 239, 251, 0.12) 66%,
      rgba(245, 239, 251, 0.02) 100%
    ),
    url('images/hero-composite-clean.png') right center / cover no-repeat;
}
.hero-shell {
  position: relative;
  padding: 18px 0 18px;
}
.hero-watermark {
  position: absolute;
  inset: 0;
  background: url('images/logo-clean.png') 42% 72% / 520px auto no-repeat;
  opacity: .035;
  transform: rotate(-12deg);
  pointer-events: none;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  min-height: 500px;
}
.eyebrow {
  display: inline-flex;
  padding: 13px 22px;
  border-radius: 999px;
  background: rgba(111,56,194,.09);
  color: var(--purple);
  font-weight: 800;
  font-size: .98rem;
  margin-bottom: 18px;
}
.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 510px;
  padding: 10px 0 10px;
}
.hero-copy h1 {
  margin: 0;
  font-size: clamp(2.75rem, 3.8vw, 4rem);
  line-height: 1.03;
  letter-spacing: -0.045em;
  font-weight: 900;
  color: #101a48;
}
.hero-copy h1 span { color: var(--purple); }
.hero-copy p {
  max-width: 500px;
  margin: 18px 0 20px;
  color: var(--muted);
  font-size: .97rem;
  line-height: 1.55;
}
.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 15px 24px;
  border-radius: 999px;
  font-weight: 800;
  font-size: .96rem;
  border: 0;
}
.hero-btn-primary {
  color: #fff;
  background: linear-gradient(135deg, #6f38c2 0%, #8342d3 100%);
  box-shadow: 0 18px 34px rgba(111,56,194,.2);
}
.hero-btn-primary:hover { color: #fff; }
.hero-btn-secondary {
  color: var(--purple);
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(111,56,194,.1);
  box-shadow: 0 10px 24px rgba(24,19,38,.05);
}
.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.hero-chips span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(111,56,194,.08);
  box-shadow: 0 8px 18px rgba(29,19,48,.04);
  font-weight: 700;
  font-size: .94rem;
}
.hero-chips i { color: var(--teal); }
.hero-visual-wrap, .hero-visual, .scene-bg, .water, .spark, .hero-person, .ingredient-badge { display:none !important; }

.surface-section {
  background: #f4f0f7;
  padding: 26px 0 34px;
  border-top: 1px solid rgba(111,56,194,.05);
}
.surface-panel {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 28px;
  align-items: center;
}
.surface-title {
  color: var(--purple-dark);
  font-size: 1rem;
  line-height: 1.32;
  font-weight: 800;
}
.surface-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0,1fr));
  gap: 18px;
}
.surface-item { text-align: center; }
.surface-item span {
  width: 76px;
  height: 76px;
  margin: 0 auto 10px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(111,56,194,.16);
  color: var(--purple);
  font-size: 1.6rem;
}
.surface-item small {
  display: block;
  color: #41455a;
  font-size: .98rem;
  font-weight: 500;
}

.content-section { padding: 86px 0; }
.alt-bg { background: #f7f3fb; }
.section-heading { max-width: 860px; margin: 0 auto 48px; }
.section-heading h2,
.content-title {
  margin: 0 0 12px;
  font-size: clamp(2.1rem, 3.1vw, 3.15rem);
  line-height: 1.08;
  letter-spacing: -.04em;
  font-weight: 900;
}
.section-heading p,
.content-copy,
.contact-box p,
.legal-content p,
.contact-form .form-check-label {
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.72;
}
.gallery-card,
.product-card,
.contact-box,
.contact-form,
.legal-modal-content {
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(111,56,194,.08);
  border-radius: 28px;
  box-shadow: var(--shadow-card);
}
.gallery-card,
.product-card { overflow: hidden; }
.gallery-card img,
.product-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.contact-box,
.contact-form { padding: 36px; }
.contact-box h3 {
  font-size: 1.45rem;
  font-weight: 800;
  margin-bottom: 18px;
}
.info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
}
.info-box {
  padding: 20px 22px;
  border-radius: 22px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(111,56,194,.08);
}
.info-box span {
  display: block;
  color: var(--muted);
  margin-bottom: 5px;
  font-size: .96rem;
}
.info-box strong {
  font-size: 1.12rem;
  color: var(--purple-dark);
}
.form-control {
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(111,56,194,.16);
}
.form-control:focus {
  box-shadow: 0 0 0 .2rem rgba(111,56,194,.12);
  border-color: rgba(111,56,194,.4);
}
.honeypot { display: none; }

.site-footer {
  background: #171f4e;
  color: rgba(255,255,255,.84);
  padding: 46px 0;
}
.footer-inner {
  display: flex;
  gap: 28px;
  justify-content: space-between;
  align-items: center;
}
.footer-logo { width: 180px; margin-bottom: 12px; }
.footer-copy { margin: 0; }
.footer-links { display: flex; gap: 22px; }
.footer-links a { color: #fff; font-weight: 700; }

.cookie-banner {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  width: min(100% - 32px, 1440px);
  z-index: 1200;
  display: grid;
  grid-template-columns: 78px 1.35fr 1fr;
  gap: 22px;
  align-items: center;
  padding: 28px 34px;
  background: rgba(255,255,255,.97);
  border: 1px solid rgba(111,56,194,.08);
  border-radius: 28px;
  box-shadow: 0 24px 60px rgba(33, 22, 65, 0.16);
  transition: opacity .25s ease, visibility .25s ease, transform .25s ease;
}
.cookie-banner.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(18px);
}
.cookie-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 2px solid rgba(111,56,194,.24);
  color: var(--purple);
  font-size: 1.65rem;
}
.cookie-copy h3 {
  margin: 0 0 10px;
  color: var(--purple);
  font-size: 1.05rem;
  font-weight: 900;
}
.cookie-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
}
.cookie-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.cookie-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: 0 24px;
  border-radius: 22px;
  font-weight: 800;
  border: 1px solid rgba(111,56,194,.14);
  background: #fff;
  color: var(--purple);
}
.cookie-btn-primary {
  background: linear-gradient(135deg, #6f38c2 0%, #8342d3 100%);
  color: #fff;
  border: 0;
  min-width: 170px;
}
.cookie-legal-links {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  color: var(--purple);
}
.cookie-legal-links a { color: var(--purple); }

.legal-modal-dialog { max-width: 1100px; }
.legal-modal-content { border: 0; }
.legal-modal-content .modal-header,
.legal-modal-content .modal-body { padding: 28px 32px; }
.legal-modal-content .modal-title {
  font-weight: 900;
  color: var(--purple-dark);
}

@media (max-width: 1399px) {
  .site-shell { width: min(100% - 24px, 1380px); }
  .header-inner { grid-template-columns: 280px 1fr; }
  .brand img { width: 240px; }
  .hero-grid { min-height: 470px; }
  .cookie-banner { grid-template-columns: 64px 1.2fr 1fr; }
  .surface-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

@media (max-width: 1199px) {
  .header-inner {
    grid-template-columns: 1fr auto;
    min-height: 104px;
  }
  .brand img { width: 220px; }
  .nav-desktop {
    position: absolute;
    left: 12px;
    right: 12px;
    top: calc(100% - 6px);
    background: #fff;
    border-radius: 24px;
    border: 1px solid rgba(111,56,194,.08);
    box-shadow: var(--shadow-card);
    padding: 18px;
    flex-direction: column;
    align-items: stretch;
  }
  .nav-pill {
    width: 100%;
    box-shadow: none;
    padding: 8px;
    flex-direction: column;
    border-radius: 22px;
  }
  .nav-pill a { width: 100%; justify-content: flex-start; }
  .header-cta { width: 100%; }

  .hero-section {
    background:
      linear-gradient(180deg,
        rgba(238, 248, 251, 0.95) 0%,
        rgba(245, 243, 251, 0.84) 32%,
        rgba(245, 239, 251, 0.32) 100%
      ),
      url('images/hero-composite-clean.png') 70% center / cover no-repeat;
  }
  .hero-grid {
    min-height: 430px;
  }
  .hero-copy {
    max-width: 470px;
    padding: 8px 0 12px;
  }
  .hero-copy h1 { font-size: clamp(2.5rem, 5.2vw, 3.4rem); }

  .surface-panel { grid-template-columns: 1fr; }
  .surface-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }

  .cookie-banner {
    width: min(100% - 20px, 980px);
    grid-template-columns: 1fr;
    justify-items: start;
  }
  .cookie-actions,
  .cookie-legal-links { justify-content: flex-start; }
}

@media (max-width: 767px) {
  .site-shell { width: min(100% - 18px, 100%); }
  .site-header { position: static; }
  .header-inner { min-height: 92px; }
  .brand img { width: 190px; }
  .hero-shell { padding-top: 18px; padding-bottom: 18px; }
  .eyebrow { font-size: .92rem; padding: 12px 18px; }
  .hero-grid { min-height: 390px; }
  .hero-copy { max-width: 100%; }
  .hero-copy h1 {
    font-size: clamp(2.2rem, 9vw, 3rem);
    line-height: 1.02;
  }
	.hero-copy h1 {
  font-size: clamp(2.4rem, 3vw, 3.2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 900;
}
	.hero-copy {
  max-width: 620px;
}
  .hero-copy p { font-size: .95rem; }
  .hero-actions { gap: 12px; }
  .hero-btn { width: 100%; }
  .hero-chips span { width: 100%; justify-content: flex-start; }
  .surface-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .info-grid { grid-template-columns: 1fr; }
  .contact-box,
  .contact-form { padding: 24px; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .cookie-banner {
    left: 9px;
    right: 9px;
    bottom: 9px;
    width: auto;
    transform: none;
    padding: 20px;
  }
  .cookie-banner.is-hidden { transform: translateY(18px); }
  .cookie-btn { width: 100%; }
}



/* =========================================================
   FINAL FIX: Product symmetry + working inline icons
   ========================================================= */

/* Inline SVG icons instead of missing FontAwesome glyphs */
.icon-svg {
  width: 1.08em;
  height: 1.08em;
  display: inline-block;
  flex: 0 0 auto;
  vertical-align: -0.16em;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-svg-teal {
  color: var(--teal);
}

.nav-pill .icon-svg {
  color: var(--purple);
  width: 18px;
  height: 18px;
}

.hero-btn .icon-svg {
  width: 19px;
  height: 19px;
}

.hero-chips .icon-svg {
  width: 17px;
  height: 17px;
}

/* Surface icon row: stable circles and visible purple symbols */
.surface-grid {
  display: grid !important;
  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: start !important;
}

.surface-item {
  text-align: center !important;
}

.surface-item span {
  width: 76px !important;
  height: 76px !important;
  margin: 0 auto 10px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.95) !important;
  border: 1px solid rgba(111,56,194,.16) !important;
  color: var(--purple) !important;
  box-shadow: 0 8px 18px rgba(29,19,48,.04) !important;
}

.surface-svg {
  width: 42px;
  height: 42px;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.surface-item small {
  display: block !important;
  color: #41455a !important;
  font-size: .98rem !important;
  font-weight: 600 !important;
}

/* The three application images: equal, clean cards */
#anwendung .gallery-card {
  width: 100%;
  height: 313px;
  border-radius: 28px;
  overflow: hidden;
}

#anwendung .gallery-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Product section: make image column and right text column visually symmetric */
.product-section .row {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.product-section .row > [class*="col-"] {
  display: flex;
}

.product-section .product-card {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

.product-section .product-card img {
  width: 100%;
  height: 100%;
  min-height: 430px;
  object-fit: cover;
  object-position: center;
}

.product-section .product-content {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
}

.product-section .info-grid {
  margin-top: 26px;
}

/* Avoid product image being affected by gallery dimensions */
.product-card img {
  max-height: none;
}

/* Responsive */
@media (max-width: 1199px) {
  .surface-grid {
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  }

  .product-section .row > [class*="col-"] {
    display: block;
  }

  .product-section .product-card img {
    height: auto;
    min-height: 0;
    object-fit: contain;
  }
}

@media (max-width: 767px) {
  .surface-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }

  #anwendung .gallery-card {
    height: 260px;
  }
}


/* =========================================================
   FINAL TWEAK: Hero Headline 3 Lines + Cropped Banner Look
   ========================================================= */

/* keep header compact */
.header-inner {
  min-height: 104px !important;
}

.brand img {
  width: 215px !important;
}

/* remove milky/double overlays */
.hero-watermark,
.hero-section::before,
.hero-section::after {
  display: none !important;
  content: none !important;
}

/* closer hero crop like reference image 3, but not overly tall */
.hero-section {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg,
      rgba(238, 248, 251, 0.96) 0%,
      rgba(245, 243, 251, 0.90) 25%,
      rgba(245, 239, 251, 0.66) 41%,
      rgba(245, 239, 251, 0.24) 56%,
      rgba(245, 239, 251, 0.03) 72%,
      rgba(245, 239, 251, 0.00) 100%
    ),
    url('images/hero-composite-clean.png') right 44% / auto 148% no-repeat !important;
}

.hero-shell {
  padding: 16px 0 !important;
}

.hero-grid {
  min-height: 430px !important;
}

/* force calm 3-line headline */
.hero-copy {
  max-width: 670px !important;
  padding: 6px 0 8px !important;
}

.hero-copy h1 {
  margin: 0 !important;
  font-size: clamp(2.25rem, 2.85vw, 3.15rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.025em !important;
  font-weight: 900 !important;
  color: #101a48 !important;
}

.hero-copy h1 span {
  color: var(--purple) !important;
}

.hero-copy p {
  max-width: 530px !important;
  margin: 16px 0 18px !important;
  font-size: .95rem !important;
  line-height: 1.55 !important;
}

.hero-actions {
  margin-bottom: 18px !important;
}

.hero-btn {
  padding: 13px 22px !important;
  font-size: .94rem !important;
}

.hero-chips span {
  padding: 10px 15px !important;
  font-size: .92rem !important;
}

/* keep icon row clean */
.surface-panel {
  display: grid !important;
  grid-template-columns: 250px 1fr !important;
  gap: 28px !important;
  align-items: center !important;
}

.surface-grid {
  display: grid !important;
  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

@media (max-width: 1399px) {
  .header-inner {
    min-height: 100px !important;
  }

  .brand img {
    width: 205px !important;
  }

  .hero-section {
    background:
      linear-gradient(90deg,
        rgba(238, 248, 251, 0.96) 0%,
        rgba(245, 243, 251, 0.90) 27%,
        rgba(245, 239, 251, 0.66) 43%,
        rgba(245, 239, 251, 0.22) 60%,
        rgba(245, 239, 251, 0.00) 100%
      ),
      url('images/hero-composite-clean.png') right 44% / auto 144% no-repeat !important;
  }

  .hero-grid {
    min-height: 420px !important;
  }

  .hero-copy h1 {
    font-size: clamp(2.15rem, 3vw, 2.95rem) !important;
  }
}

@media (max-width: 1199px) {
  .hero-section {
    background:
      linear-gradient(180deg,
        rgba(238, 248, 251, 0.97) 0%,
        rgba(245, 243, 251, 0.92) 36%,
        rgba(245, 239, 251, 0.45) 100%
      ),
      url('images/hero-composite-clean.png') 72% center / cover no-repeat !important;
  }

  .hero-grid {
    min-height: 410px !important;
  }

  .hero-copy {
    max-width: 540px !important;
  }

  .hero-copy h1 {
    font-size: clamp(2.15rem, 4.7vw, 3rem) !important;
  }
}

@media (max-width: 767px) {
  .brand img {
    width: 185px !important;
  }

  .hero-grid {
    min-height: 390px !important;
  }

  .hero-copy h1 {
    font-size: clamp(2.05rem, 9vw, 2.8rem) !important;
    line-height: 1.03 !important;
  }

  .surface-panel {
    grid-template-columns: 1fr !important;
  }

  .surface-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}
/* =========================================================
   Anwendung Layout (Text links / Bilder rechts)
   ========================================================= */

.usage-section {
  display: grid;
  grid-template-columns: 1fr 1fr; /* WICHTIG */
  gap: 40px;
  align-items: center;
}

/* TEXT */
.usage-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 520px;
}

.usage-text h2 {
  font-size: clamp(2rem, 2.8vw, 2.6rem);
  margin-bottom: 18px;
  line-height: 1.2;
}

.usage-text p {
  color: var(--muted);
  line-height: 1.7;
}

/* BILDER */
.usage-images {
  display: grid;
  grid-template-rows: 220px 160px; /* FIXE HÖHE */
  gap: 20px;
}

/* großes Bild */
.img-large {
  height: 100%;
}

.img-large img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 20px;
}

/* kleine Bilder */
.img-small {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.img-small img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 20px;
}

/* MOBILE */
@media (max-width: 991px) {
  .usage-section {
    grid-template-columns: 1fr;
  }

  .usage-images {
    margin-top: 30px;
  }
}
/* Produktbereich: Bild und Textblock symmetrisch */
.product-section .row {
  align-items: stretch !important;
}
.product-section .col-lg-5,
.product-section .col-lg-7 {
  width: 100%;
}
.product-section .product-card {
  width: 100%;
  max-height: 620px;
}

.product-section .product-content {
  width: 100%;
  min-height: 620px;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
}

.product-section .content-title {
  font-size: clamp(2.3rem, 3vw, 3.6rem);
  line-height: 1.05;
  margin-bottom: 22px;
}

.product-section .content-copy {
  max-width: 820px;
  margin-bottom: 34px;
}

.product-section .info-grid {
  margin-top: 0;
  gap: 22px;
}

.product-section .info-box {
  min-height: 110px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* FINAL FIX – Produktbild komplett sichtbar + sauber ausgerichtet */

.product-section .row {
  align-items: stretch !important;
}

/* Bild links */
.product-section .product-card {
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 600px;
}

/* WICHTIG: kein Abschneiden mehr */
.product-section .product-card img {
  width: 100%;
  height: auto;
  max-height: 560px;
  object-fit: contain; /* <-- DAS IST DER GAMECHANGER */
  border-radius: 24px;
}

/* Text rechts */
.product-section .product-content {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  min-height: 560px;
}

/* =========================================================
   FINAL PRODUCT IMAGE FIX
   Portrait image fills the box without white side gaps.
   Important: the card must be a portrait-friendly box.
   ========================================================= */

@media (min-width: 992px) {
  .product-section .row {
    display: grid !important;
    grid-template-columns: minmax(420px, 560px) 1fr !important;
    gap: 56px !important;
    align-items: center !important;
  }

  .product-section .row > [class*="col-"] {
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
  }

  .product-section .product-card {
    width: 100% !important;
    max-width: 560px !important;
    height: 640px !important;
    max-height: none !important;
    display: block !important;
    overflow: hidden !important;
    border-radius: 28px !important;
    background: rgba(255,255,255,.95) !important;
  }

  .product-section .product-card img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    object-fit: cover !important;
    object-position: center bottom !important;
    border-radius: 28px !important;
  }

  .product-section .product-content {
    width: 100% !important;
    min-height: 640px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  .product-section .info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px !important;
  }

  .product-section .info-box {
    min-height: 112px !important;
  }
}

@media (max-width: 991px) {
  .product-section .product-card {
    height: auto !important;
    max-height: none !important;
  }

  .product-section .product-card img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  .product-section .product-content {
    min-height: 0 !important;
  }
}
.product-info-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 18px !important;
  margin-top: 30px !important;
}

.product-info-grid .info-box {
  min-height: 120px !important;
  padding: 20px !important;
}

.info-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 12px;
  color: var(--purple);
  stroke: currentColor;
  fill: none;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.product-section .content-copy {
  max-width: 850px;
  margin-bottom: 28px;
}

@media (max-width: 991px) {
  .product-info-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 575px) {
  .product-info-grid {
    grid-template-columns: 1fr !important;
  }
}
/* Produktbereich: 6 Kacheln kompakter, damit rechts zur Bildhöhe passt */
.product-info-grid {
  gap: 14px !important;
  margin-top: 24px !important;
}

.product-info-grid .info-box {
  min-height: 92px !important;
  padding: 16px 18px !important;
}

.product-info-grid .info-icon {
  width: 20px !important;
  height: 20px !important;
  margin-bottom: 8px !important;
}

.product-info-grid .info-box span {
  font-size: .9rem !important;
  margin-bottom: 4px !important;
}

.product-info-grid .info-box strong {
  font-size: 1rem !important;
}

.product-section .content-title {
  font-size: clamp(2.1rem, 2.7vw, 3.1rem) !important;
  margin-bottom: 16px !important;
}

.product-section .content-copy {
  margin-bottom: 20px !important;
  line-height: 1.6 !important;
}
/* =========================================================
   Kontaktbereich Layout FIX
   ========================================================= */

/* Row sauber ausrichten */
#kontakt .row {
  align-items: flex-start; /* NICHT mehr stretch */
}

/* Linke Seite (Text + Box) */
#kontakt .col-lg-5 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Rechte Seite (Formular) */
#kontakt .col-lg-7 {
  display: flex;
}

/* Formular darf Höhe bestimmen */
#kontakt .contact-form {
  flex: 1;
}

/* =========================================================
   Kontaktbox links
   ========================================================= */

#kontakt .contact-box {
  position: relative;
  overflow: hidden;
  padding: 22px 24px; /* 👈 PERFEKT BALANCE */
  margin-top: 20px;
  border-radius: 20px;
  background: #fff;
}

/* Logo im Hintergrund (zentriert + unten leicht versetzt) */
#kontakt .contact-box::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/custom/images/logo-clean.png") no-repeat center 80%;
  background-size: 240px;
  opacity: 0.05;
  pointer-events: none;
}

/* Inhalt über dem Logo */
#kontakt .contact-box * {
  position: relative;
  z-index: 1;
}

/* =========================================================
   Formular Styling
   ========================================================= */

/* Select wie Input aussehen lassen */
.contact-form select.form-control {
  appearance: none;
  background-color: #fff;
}

/* Optional: schöner Abstand unten */
#kontakt {
  padding-bottom: 80px;
}

/* =========================================================
   Mobile Fix
   ========================================================= */

@media (max-width: 991px) {
  #kontakt .col-lg-7 {
    margin-top: 30px;
  }

  #kontakt .contact-box::after {
    background-size: 180px;
    opacity: 0.04;
  }
}
/* Kontaktbereich Premium */
#kontakt .row {
  align-items: flex-start !important;
}

.contact-box-premium {
  position: relative;
  overflow: hidden;
  padding: 34px 36px;
}

.contact-box-premium::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  width: 300px;
  height: 170px;
  background: url("images/logo-clean.png") center / contain no-repeat;
  opacity: 0.045;
  pointer-events: none;
}

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

.contact-benefits {
  display: grid;
  gap: 14px;
  margin-top: 28px;
}

.contact-benefits div {
  padding: 15px 18px;
  border-radius: 18px;
  background: rgba(111,56,194,.045);
  border: 1px solid rgba(111,56,194,.06);
}

.contact-benefits strong {
  display: block;
  margin-bottom: 4px;
  color: var(--purple-dark);
  font-size: .98rem;
}

.contact-benefits span {
  display: block;
  color: var(--muted);
  font-size: .93rem;
  line-height: 1.45;
}

.contact-form select.form-control {
  appearance: none;
  background-color: #fff;
}
.site-footer {
  background: #171f4e;
  color: rgba(255,255,255,.82);
  padding: 56px 0 26px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr .7fr;
  gap: 48px;
  align-items: start;
}

.footer-logo {
  width: 170px;
  margin-bottom: 18px;
}

.site-footer h4 {
  color: #fff;
  font-size: 1.05rem;
  margin-bottom: 16px;
  font-weight: 800;
}

.site-footer p {
  margin: 0 0 14px;
  line-height: 1.65;
}

.site-footer a {
  color: #fff;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 8px;
}

.footer-nav a {
  display: block;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  margin-top: 34px;
  padding-top: 22px;
}

.footer-bottom p {
  margin: 0;
  font-size: .95rem;
  color: rgba(255,255,255,.7);
}

@media (max-width: 767px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}
/* =========================================================
   FINAL FOOTER + NEWSLETTER + COOKIE FIX
   ========================================================= */

/* Cookie banner: verhindert kurzes Aufblitzen beim Laden */
.cookie-banner {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateX(-50%) translateY(18px) !important;
  pointer-events: none !important;
}

.cookie-banner.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(0) !important;
  pointer-events: auto !important;
}

.cookie-banner.is-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateX(-50%) translateY(18px) !important;
  pointer-events: none !important;
}

.cookie-icon .icon-svg,
.cookie-btn .icon-svg {
  width: 1.25em;
  height: 1.25em;
}

/* Footer Premium: dunkler Lila/Pink-Verlauf statt flachem Blau */
.site-footer.footer-premium {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 25%, rgba(142, 67, 211, .28) 0%, rgba(142, 67, 211, 0) 34%),
    radial-gradient(circle at 84% 18%, rgba(236, 98, 180, .18) 0%, rgba(236, 98, 180, 0) 32%),
    linear-gradient(135deg, #141c4d 0%, #241851 48%, #441b68 100%);
  color: rgba(255,255,255,.86);
  padding: 62px 0 28px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr .65fr;
  gap: 42px;
  align-items: start;
}

.footer-brand {
  max-width: 430px;
}

.footer-logo {
  width: 250px;
  max-width: 100%;
  margin-bottom: 20px;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.16));
}

.site-footer h4 {
  color: #fff;
  font-size: 1.05rem;
  margin: 0 0 16px;
  font-weight: 900;
}

.site-footer p {
  margin: 0 0 14px;
  line-height: 1.65;
}

.site-footer a {
  color: #fff;
  font-weight: 800;
  text-decoration: none;
}

.site-footer a:hover {
  color: #eddcff;
}

.footer-nav a {
  display: block;
  margin-bottom: 10px;
}

.footer-newsletter p {
  color: rgba(255,255,255,.72);
  max-width: 340px;
}

.newsletter-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-top: 16px;
  max-width: 430px;
}

.newsletter-form input[type="email"] {
  width: 100%;
  min-height: 52px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color: #fff;
  outline: 0;
}

.newsletter-form input[type="email"]::placeholder {
  color: rgba(255,255,255,.72);
}

.newsletter-form input[type="email"]:focus {
  border-color: rgba(255,255,255,.45);
  background: rgba(255,255,255,.14);
}

.newsletter-form button {
  min-height: 52px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-weight: 900;
  background: linear-gradient(135deg, #7d3bd4 0%, #a847d8 100%);
  box-shadow: 0 14px 30px rgba(111,56,194,.32);
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.14);
  margin-top: 38px;
  padding-top: 22px;
}

.footer-bottom p {
  margin: 0;
  font-size: .95rem;
  color: rgba(255,255,255,.72);
}

/* Kontaktbox Logo-Pfad korrigieren */
#kontakt .contact-box::after,
.contact-box-premium::after {
  background-image: url("images/logo-clean.png") !important;
}

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

@media (max-width: 767px) {
  .site-footer.footer-premium {
    padding: 46px 0 24px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .footer-logo {
    width: 210px;
  }

  .newsletter-form {
    grid-template-columns: 1fr;
  }

  .newsletter-form button {
    width: 100%;
  }

  .cookie-banner,
  .cookie-banner.is-visible,
  .cookie-banner.is-hidden {
    left: 9px !important;
    right: 9px !important;
    bottom: 9px !important;
    width: auto !important;
    transform: translateY(18px) !important;
  }

  .cookie-banner.is-visible {
    transform: translateY(0) !important;
  }
}


/* =========================================================
   FINAL FOOTER HEIGHT FIX
   Entfernt den leeren dunklen Balken unten im Footer
   ========================================================= */

.site-footer.footer-premium {
  padding: 48px 0 0 !important;
}

.site-footer.footer-premium .footer-grid {
  padding-bottom: 28px !important;
}

.site-footer.footer-premium .footer-bottom {
  margin-top: 0 !important;
  padding: 20px 0 !important;
  border-top: 1px solid rgba(255,255,255,.14) !important;
}

.site-footer.footer-premium .footer-bottom p {
  margin: 0 !important;
}

.site-footer.footer-premium::after {
  content: none !important;
  display: none !important;
}

html,
body {
  margin: 0 !important;
  padding: 0 !important;
}

body {
  background: #fff !important;
}

@media (max-width: 767px) {
  .site-footer.footer-premium {
    padding: 38px 0 0 !important;
  }

  .site-footer.footer-premium .footer-grid {
    padding-bottom: 22px !important;
  }

  .site-footer.footer-premium .footer-bottom {
    padding: 18px 0 !important;
  }
}

/* =========================================================
   FINAL CLEANUP 24.04: Hero background + Footer bottom bar
   ========================================================= */

.hero-section {
  background:
    linear-gradient(90deg,
      rgba(238,248,251,.97) 0%,
      rgba(245,243,251,.92) 26%,
      rgba(245,239,251,.68) 42%,
      rgba(245,239,251,.26) 57%,
      rgba(245,239,251,.04) 74%,
      rgba(245,239,251,0) 100%
    ),
    url('images/hero-composite-clean.png') right center / cover no-repeat !important;
}

.site-footer.footer-premium {
  padding: 52px 0 0 !important;
  margin: 0 !important;
}

.site-footer.footer-premium .footer-grid {
  padding-bottom: 30px !important;
}

.site-footer.footer-premium .footer-bottom {
  margin-top: 0 !important;
  padding: 20px 0 !important;
  border-top: 1px solid rgba(255,255,255,.14) !important;
}

.site-footer.footer-premium .footer-bottom p {
  margin: 0 !important;
}

html, body {
  margin: 0 !important;
  padding: 0 !important;
}

body {
  background: #fff !important;
}

@media (max-width: 1199px) {
  .hero-section {
    background:
      linear-gradient(180deg,
        rgba(238,248,251,.97) 0%,
        rgba(245,243,251,.90) 36%,
        rgba(245,239,251,.46) 100%
      ),
      url('images/hero-composite-clean.png') 68% center / cover no-repeat !important;
  }
}

@media (max-width: 767px) {
  .site-footer.footer-premium {
    padding: 42px 0 0 !important;
  }
}
/* HERO: Bild sauber, vollst�ndig sichtbar */
.hero-section {
  background:
    linear-gradient(90deg,
      rgba(238, 248, 251, 0.96) 0%,
      rgba(245, 243, 251, 0.90) 25%,
      rgba(245, 239, 251, 0.66) 41%,
      rgba(245, 239, 251, 0.24) 56%,
      rgba(245, 239, 251, 0.03) 72%,
      rgba(245, 239, 251, 0.00) 100%
    ),
    url("images/hero-composite-clean.png") right center / cover no-repeat !important;
}

/* H�he leicht erh�hen ? mehr Platz f�r Bild */
.hero-grid {
  min-height: 520px !important;
}

/* bisschen Luft oben/unten */
.hero-shell {
  padding: 24px 0 24px !important;
}

/* =========================================================
   FINAL HERO FIX - Frau kleiner, Bild über volle Fläche,
   kein weißer Bereich unten
   ========================================================= */

.hero-section {
  position: relative !important;
  overflow: hidden !important;
  background:
    linear-gradient(90deg,
      rgba(238,248,251,.97) 0%,
      rgba(245,243,251,.92) 24%,
      rgba(245,239,251,.72) 39%,
      rgba(245,239,251,.36) 54%,
      rgba(245,239,251,.08) 70%,
      rgba(245,239,251,0) 100%
    ),
    url("images/hero-composite-clean.png") right center / auto 118% no-repeat !important;
}

.hero-shell {
  padding: 18px 0 0 !important;
}

.hero-grid {
  min-height: 440px !important;
}

/* verhindert, dass unter dem Hero-Bild ein weißer Streifen entsteht */
.hero-section .site-shell,
.hero-section .hero-shell {
  position: relative !important;
}

@media (max-width: 1399px) {
  .hero-section {
    background:
      linear-gradient(90deg,
        rgba(238,248,251,.97) 0%,
        rgba(245,243,251,.92) 26%,
        rgba(245,239,251,.72) 42%,
        rgba(245,239,251,.34) 58%,
        rgba(245,239,251,.06) 74%,
        rgba(245,239,251,0) 100%
      ),
      url("images/hero-composite-clean.png") right center / auto 116% no-repeat !important;
  }

  .hero-grid {
    min-height: 430px !important;
  }
}

@media (max-width: 1199px) {
  .hero-section {
    background:
      linear-gradient(180deg,
        rgba(238,248,251,.98) 0%,
        rgba(245,243,251,.92) 36%,
        rgba(245,239,251,.55) 100%
      ),
      url("images/hero-composite-clean.png") 68% center / cover no-repeat !important;
  }

  .hero-grid {
    min-height: 410px !important;
  }
}

@media (max-width: 767px) {
  .hero-grid {
    min-height: 390px !important;
  }

  .hero-shell {
    padding: 18px 0 !important;
  }
}

/* =========================================================
   FINAL FOOTER FIX - keinen Zusatzbalken unter Footer
   ========================================================= */

.site-footer.footer-premium {
  margin: 0 !important;
  padding: 52px 0 0 !important;
  background:
    radial-gradient(circle at 15% 25%, rgba(142, 67, 211, .28) 0%, rgba(142, 67, 211, 0) 34%),
    radial-gradient(circle at 84% 18%, rgba(236, 98, 180, .18) 0%, rgba(236, 98, 180, 0) 32%),
    linear-gradient(135deg, #141c4d 0%, #241851 48%, #441b68 100%) !important;
}

.site-footer.footer-premium .footer-grid {
  padding-bottom: 30px !important;
}

.site-footer.footer-premium .footer-bottom {
  margin: 0 !important;
  padding: 20px 0 !important;
  border-top: 1px solid rgba(255,255,255,.14) !important;
}

html,
body {
  margin: 0 !important;
  padding: 0 !important;
}

body {
  background: #fff !important;
}

/* =========================================================
   FINAL HERO IMAGE REPLACEMENT 24.04
   Uses the new wide hero image as a contained right-side image.
   ========================================================= */
.hero-section {
  position: relative !important;
  overflow: hidden !important;
  background:
    linear-gradient(90deg,
      rgba(238,248,251,.97) 0%,
      rgba(245,243,251,.94) 26%,
      rgba(245,239,251,.78) 44%,
      rgba(245,239,251,.42) 58%,
      rgba(245,239,251,.10) 72%,
      rgba(245,239,251,0) 100%
    ),
    url("images/hero-composite-clean.png") right center / auto 100% no-repeat !important;
}

.hero-shell {
  padding: 0 !important;
}

.hero-grid {
  min-height: 500px !important;
}

.footer-logo {
  width: 280px !important;
  max-width: 100% !important;
}

@media (max-width: 1399px) {
  .hero-section {
    background:
      linear-gradient(90deg,
        rgba(238,248,251,.97) 0%,
        rgba(245,243,251,.94) 28%,
        rgba(245,239,251,.78) 46%,
        rgba(245,239,251,.42) 62%,
        rgba(245,239,251,.10) 76%,
        rgba(245,239,251,0) 100%
      ),
      url("images/hero-composite-clean.png") right center / auto 100% no-repeat !important;
  }
  .hero-grid { min-height: 490px !important; }
}

@media (max-width: 1199px) {
  .hero-section {
    background:
      linear-gradient(180deg,
        rgba(238,248,251,.98) 0%,
        rgba(245,243,251,.92) 38%,
        rgba(245,239,251,.58) 100%
      ),
      url("images/hero-composite-clean.png") 70% center / cover no-repeat !important;
  }
  .hero-grid { min-height: 430px !important; }
}

/* =========================================================
   FINAL ABSCHLUSS-FIX 24.04
   Hero-Banner: echtes breites Bannerbild, keine abgeschnittene Fläche.
   Kontaktlogo weiter rechts. Footer bündig + Logo kleiner.
   ========================================================= */

.hero-section {
  position: relative !important;
  overflow: hidden !important;
  background:
    linear-gradient(90deg,
      rgba(238,248,251,.98) 0%,
      rgba(245,243,251,.94) 25%,
      rgba(245,239,251,.68) 42%,
      rgba(245,239,251,.30) 58%,
      rgba(245,239,251,.05) 74%,
      rgba(245,239,251,0) 100%
    ),
    url("images/hero-banner-final.jpg") center center / cover no-repeat !important;
}

.hero-shell {
  padding: 0 !important;
}

.hero-grid {
  min-height: 500px !important;
}

#kontakt .contact-box::after,
.contact-box-premium::after {
  content: "" !important;
  position: absolute !important;
  left: 68% !important;
  top: 26% !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  width: 260px !important;
  height: 150px !important;
  background: url("images/logo-clean.png") center / contain no-repeat !important;
  opacity: .035 !important;
  pointer-events: none !important;
}

.site-footer.footer-premium .footer-logo,
.footer-logo {
  width: 230px !important;
  max-width: 100% !important;
}

.site-footer.footer-premium .footer-bottom {
  width: min(100% - 48px, 1520px) !important;
  margin: 0 auto !important;
  padding: 20px 0 !important;
  border-top: 1px solid rgba(255,255,255,.14) !important;
}

.site-footer.footer-premium .footer-bottom p {
  margin: 0 !important;
}

.cookie-banner:not(.is-visible) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 1399px) {
  .hero-section {
    background:
      linear-gradient(90deg,
        rgba(238,248,251,.98) 0%,
        rgba(245,243,251,.94) 27%,
        rgba(245,239,251,.70) 45%,
        rgba(245,239,251,.32) 62%,
        rgba(245,239,251,.06) 76%,
        rgba(245,239,251,0) 100%
      ),
      url("images/hero-banner-final.jpg") center center / cover no-repeat !important;
  }
  .hero-grid { min-height: 490px !important; }
}

@media (max-width: 1199px) {
  .hero-section {
    background:
      linear-gradient(180deg,
        rgba(238,248,251,.98) 0%,
        rgba(245,243,251,.92) 38%,
        rgba(245,239,251,.58) 100%
      ),
      url("images/hero-banner-final.jpg") 66% center / cover no-repeat !important;
  }
  .hero-grid { min-height: 430px !important; }
}

@media (max-width: 767px) {
  .site-footer.footer-premium .footer-bottom {
    width: min(100% - 18px, 100%) !important;
  }
  .site-footer.footer-premium .footer-logo,
  .footer-logo { width: 200px !important; }
}


/* =========================================================
   FINAL MOBILE FIX: Produktbereich wirklich responsive
   ========================================================= */

@media (max-width: 991px) {
  .product-section {
    overflow: hidden !important;
    padding: 56px 0 !important;
  }

  .product-section .row {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    align-items: stretch !important;
  }

  .product-section .row > [class*="col-"],
  .product-section .col-lg-5,
  .product-section .col-lg-7 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    display: block !important;
  }

  .product-section .product-card {
    width: 100% !important;
    max-width: 520px !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 auto 8px !important;
    display: block !important;
    overflow: hidden !important;
    border-radius: 24px !important;
  }

  .product-section .product-card img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 24px !important;
  }

  .product-section .product-content {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    display: block !important;
  }

  .product-section .eyebrow {
    width: auto !important;
    max-width: 100% !important;
    margin-bottom: 16px !important;
  }

  .product-section .content-title {
    font-size: clamp(2rem, 9vw, 2.8rem) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.035em !important;
    margin-bottom: 16px !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  .product-section .content-copy {
    max-width: 100% !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    margin-bottom: 22px !important;
  }

  .product-info-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin-top: 22px !important;
  }

  .product-info-grid .info-box {
    min-height: 104px !important;
    padding: 16px !important;
  }
}

@media (max-width: 575px) {
  .product-section {
    padding: 46px 0 !important;
  }

  .product-section .product-card {
    max-width: 100% !important;
  }

  .product-section .content-title {
    font-size: clamp(1.85rem, 10vw, 2.45rem) !important;
  }

  .product-section .content-copy {
    font-size: .96rem !important;
  }

  .product-info-grid {
    grid-template-columns: 1fr !important;
  }
}
/* Dropdown Pfeil f�r Select */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-image: url("data:image/svg+xml;utf8,<svg fill='%236b5cff' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;

  padding-right: 40px; /* Platz f�r Pfeil */
  cursor: pointer;
}
/* Dropdown Pfeil f�r Select */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-image: url("data:image/svg+xml;utf8,<svg fill='%236b5cff' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;

  padding-right: 40px; /* Platz f�r Pfeil */
  cursor: pointer;
}

/* =========================================================
   FINAL FIX: Select-Pfeil + Footer-Logo
   ========================================================= */

/* Select-Wrapper statt nativer Select-Hintergrund, damit der Pfeil sicher sichtbar ist */
.contact-form .select-wrap {
  position: relative !important;
  display: block !important;
  width: 100% !important;
}

.contact-form .select-wrap::after {
  content: "" !important;
  position: absolute !important;
  right: 18px !important;
  top: 50% !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 6px solid transparent !important;
  border-right: 6px solid transparent !important;
  border-top: 7px solid #6f38c2 !important;
  transform: translateY(-45%) !important;
  pointer-events: none !important;
  z-index: 5 !important;
}

.contact-form .select-wrap select.form-control {
  width: 100% !important;
  padding-right: 52px !important;
  background-image: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  cursor: pointer !important;
}

/* Safari/iOS: nativen Pfeil ausblenden */
.contact-form .select-wrap select.form-control::-ms-expand {
  display: none !important;
}

/* Footer Logo final klein halten */
.site-footer.footer-premium img.footer-logo-small,
.site-footer.footer-premium .footer-logo.footer-logo-small {
  width: 150px !important;
  max-width: 150px !important;
  height: auto !important;
}


/* =========================================================
   FINAL FIX 2026-04: Desktop Header, Mobile Menu, Modal Links,
   Dropdown Arrow, Footer Logo, Contact Badge Removal
   ========================================================= */

/* Desktop: niemals aufgeklappten mobilen Menüblock anzeigen */
@media (min-width: 1200px) {
  .navbar-toggler {
    display: none !important;
  }

  #mainNav,
  #mainNav.collapse,
  #mainNav.collapse.show {
    display: flex !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  #mainNav .nav-pill {
    flex-direction: row !important;
  }
}

/* Mobile Menü sauber als Dropdown unter Header */
@media (max-width: 1199px) {
  .navbar-toggler {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 18px !important;
    background: rgba(111,56,194,.06) !important;
    border: 1px solid rgba(111,56,194,.10) !important;
    z-index: 1300 !important;
  }

  .navbar-toggler-icon {
    background-image: none !important;
    position: relative !important;
    width: 26px !important;
    height: 2px !important;
    background: var(--purple) !important;
    border-radius: 999px !important;
    transition: background .2s ease !important;
  }

  .navbar-toggler-icon::before,
  .navbar-toggler-icon::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    width: 26px !important;
    height: 2px !important;
    background: var(--purple) !important;
    border-radius: 999px !important;
    transition: transform .22s ease, top .22s ease !important;
  }

  .navbar-toggler-icon::before { top: -8px !important; }
  .navbar-toggler-icon::after { top: 8px !important; }

  .navbar-toggler.is-active .navbar-toggler-icon {
    background: transparent !important;
  }

  .navbar-toggler.is-active .navbar-toggler-icon::before {
    top: 0 !important;
    transform: rotate(45deg) !important;
  }

  .navbar-toggler.is-active .navbar-toggler-icon::after {
    top: 0 !important;
    transform: rotate(-45deg) !important;
  }

  #mainNav.nav-desktop {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 12px !important;
    right: 12px !important;
    z-index: 1250 !important;
    padding: 16px !important;
    background: rgba(255,255,255,.98) !important;
    border: 1px solid rgba(111,56,194,.10) !important;
    border-radius: 24px !important;
    box-shadow: 0 24px 72px rgba(42,23,86,.16) !important;
  }

  #mainNav:not(.show) {
    display: none !important;
  }

  #mainNav.show {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  #mainNav .nav-pill {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
    gap: 8px !important;
  }

  #mainNav .nav-pill a,
  #mainNav .header-cta {
    width: 100% !important;
    justify-content: flex-start !important;
  }
}

/* Kontakt-Badge ist im HTML entfernt; dieser Abstand zieht die Überschrift sauber nach oben */
#kontakt .col-lg-5 > .content-title:first-child {
  margin-top: 0 !important;
}

/* Dropdown-Pfeil: zuverlässig sichtbar per Wrapper */
.select-wrap {
  position: relative !important;
  width: 100% !important;
}

.select-wrap::after {
  content: "" !important;
  position: absolute !important;
  right: 18px !important;
  top: 50% !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 6px solid transparent !important;
  border-right: 6px solid transparent !important;
  border-top: 7px solid var(--purple) !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.select-wrap select.form-control,
.contact-form select.form-control {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: none !important;
  padding-right: 48px !important;
  cursor: pointer !important;
}

/* Footer Logo final klein */
.site-footer.footer-premium img.footer-logo-small,
.footer-brand img.footer-logo-small {
  width: 150px !important;
  max-width: 150px !important;
  height: auto !important;
}

/* Modal muss immer über allem liegen */
.modal {
  z-index: 2000 !important;
}
.modal-backdrop {
  z-index: 1990 !important;
}


/* =========================================================
   ABSOLUTE FINAL FIX: Mobile Menu + Custom Modals
   ========================================================= */

/* Desktop header: mobile menu must never render as a giant block */
@media (min-width: 1200px) {
  #mainNav,
  #mainNav.collapse,
  #mainNav.collapse.show {
    display: flex !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .navbar-toggler {
    display: none !important;
  }
}

/* Mobile menu */
@media (max-width: 1199px) {
  .header-inner {
    position: relative !important;
  }

  #mainNav {
    display: none !important;
  }

  #mainNav.show {
    display: flex !important;
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 3000 !important;
    flex-direction: column !important;
    gap: 14px !important;
    padding: 18px !important;
    background: #fff !important;
    border: 1px solid rgba(111,56,194,.12) !important;
    border-radius: 24px !important;
    box-shadow: 0 24px 72px rgba(42,23,86,.18) !important;
  }

  #mainNav .nav-pill {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  #mainNav .nav-pill a,
  #mainNav .header-cta {
    width: 100% !important;
    justify-content: flex-start !important;
  }

  .navbar-toggler {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 18px !important;
    background: rgba(111,56,194,.06) !important;
    border: 1px solid rgba(111,56,194,.10) !important;
    z-index: 3100 !important;
  }

  .navbar-toggler-icon {
    background-image: none !important;
    position: relative !important;
    width: 26px !important;
    height: 2px !important;
    background: var(--purple) !important;
    border-radius: 999px !important;
  }

  .navbar-toggler-icon::before,
  .navbar-toggler-icon::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    width: 26px !important;
    height: 2px !important;
    background: var(--purple) !important;
    border-radius: 999px !important;
    transition: transform .22s ease, top .22s ease !important;
  }

  .navbar-toggler-icon::before { top: -8px !important; }
  .navbar-toggler-icon::after { top: 8px !important; }

  .navbar-toggler.is-active .navbar-toggler-icon {
    background: transparent !important;
  }

  .navbar-toggler.is-active .navbar-toggler-icon::before {
    top: 0 !important;
    transform: rotate(45deg) !important;
  }

  .navbar-toggler.is-active .navbar-toggler-icon::after {
    top: 0 !important;
    transform: rotate(-45deg) !important;
  }
}

/* Custom modal display, independent from Bootstrap JS */
.modal.show {
  display: block !important;
  z-index: 5000 !important;
}

.modal-backdrop.show {
  z-index: 4990 !important;
}

body.modal-open {
  overflow: hidden !important;
}

/* Dropdown arrow */
.select-wrap {
  position: relative !important;
  width: 100% !important;
}

.select-wrap::after {
  content: "" !important;
  position: absolute !important;
  right: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  border-left: 6px solid transparent !important;
  border-right: 6px solid transparent !important;
  border-top: 7px solid var(--purple) !important;
  pointer-events: none !important;
  z-index: 3 !important;
}

.select-wrap select.form-control {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: none !important;
  padding-right: 48px !important;
}

/* Footer logo final */
.site-footer.footer-premium img.footer-logo-small {
  width: 150px !important;
  max-width: 150px !important;
  height: auto !important;
}


/* FINAL FIX: hide modals by default */
.modal {
  display: none !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 5000 !important;
}

.modal.show {
  display: block !important;
}

.modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.5) !important;
  z-index: 4990 !important;
}


/* =========================================================
   FINAL MOBILE RESPONSIVE + MENU FIX
   ========================================================= */

html,
body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

body {
  position: relative !important;
}

main,
section,
.site-header,
.site-footer {
  max-width: 100vw !important;
  overflow-x: clip !important;
}

img,
svg,
video {
  max-width: 100% !important;
}

/* Mobile: mehr Innenabstand, kein seitliches Abschneiden */
@media (max-width: 767px) {
  .site-shell {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .content-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .content-title,
  .product-section .content-title,
  .hero-copy h1 {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    max-width: 100% !important;
  }

  .product-section .content-title {
    font-size: clamp(2rem, 9vw, 2.55rem) !important;
    line-height: 1.08 !important;
  }

  .product-section .content-copy {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }

  .product-section .product-content,
  .product-section .row,
  .product-section .row > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .product-info-grid,
  .info-grid {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
  }

  .info-box {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Desktop Navigation normal erzwingen */
@media (min-width: 1200px) {
  .navbar-toggler {
    display: none !important;
  }

  #mainNav,
  #mainNav.collapse,
  #mainNav.collapse.show {
    display: flex !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  #mainNav .nav-pill {
    flex-direction: row !important;
  }
}

/* Mobile Menü: sichtbar über dem Content */
@media (max-width: 1199px) {
  .header-inner {
    position: relative !important;
  }

  #mainNav {
    display: none !important;
  }

  #mainNav.show {
    display: flex !important;
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 20px !important;
    right: 20px !important;
    z-index: 9999 !important;
    flex-direction: column !important;
    gap: 14px !important;
    padding: 18px !important;
    background: #fff !important;
    border: 1px solid rgba(111,56,194,.12) !important;
    border-radius: 24px !important;
    box-shadow: 0 24px 72px rgba(42,23,86,.20) !important;
  }

  #mainNav .nav-pill {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #mainNav .nav-pill a,
  #mainNav .header-cta {
    width: 100% !important;
    justify-content: flex-start !important;
  }

  .navbar-toggler {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 18px !important;
    background: rgba(111,56,194,.06) !important;
    border: 1px solid rgba(111,56,194,.10) !important;
    z-index: 10000 !important;
  }

  .navbar-toggler-icon {
    background-image: none !important;
    position: relative !important;
    width: 26px !important;
    height: 2px !important;
    background: var(--purple) !important;
    border-radius: 999px !important;
  }

  .navbar-toggler-icon::before,
  .navbar-toggler-icon::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    width: 26px !important;
    height: 2px !important;
    background: var(--purple) !important;
    border-radius: 999px !important;
    transition: transform .22s ease, top .22s ease !important;
  }

  .navbar-toggler-icon::before { top: -8px !important; }
  .navbar-toggler-icon::after { top: 8px !important; }

  .navbar-toggler.is-active .navbar-toggler-icon {
    background: transparent !important;
  }

  .navbar-toggler.is-active .navbar-toggler-icon::before {
    top: 0 !important;
    transform: rotate(45deg) !important;
  }

  .navbar-toggler.is-active .navbar-toggler-icon::after {
    top: 0 !important;
    transform: rotate(-45deg) !important;
  }
}

/* Modals sicher versteckt, bis sie geöffnet werden */
.modal {
  display: none !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 5000 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.modal.show {
  display: block !important;
}

.modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 4990 !important;
  background: rgba(10, 12, 34, .58) !important;
}

/* Dropdown-Pfeil */
.select-wrap {
  position: relative !important;
  width: 100% !important;
}

.select-wrap::after {
  content: "" !important;
  position: absolute !important;
  right: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  border-left: 6px solid transparent !important;
  border-right: 6px solid transparent !important;
  border-top: 7px solid var(--purple) !important;
  pointer-events: none !important;
  z-index: 3 !important;
}

.select-wrap select.form-control {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: none !important;
  padding-right: 48px !important;
}


/* MOBILE MENU FIX */
#mainNav { display:none; }
#mainNav.show { display:flex !important; flex-direction:column; }