/* ============================================
   HEADER THEMING SYSTEM
   Adaptive colors based on background context

   Usage:
   - Default: Dark header for light backgrounds (most pages)
   - .header-on-dark: Light header for dark backgrounds (homepage, tech pages)

   Note: Base design tokens are now in design-tokens.css
   Legacy variables (--kp-*) are mapped there for backwards compatibility
   ============================================ */

/* ============================================
   GLOBAL HEADING RESET - No Uppercase
   Override all text-transform: uppercase from styles.css
   ============================================ */
h1,
h2,
h3,
h4,
h5,
h6,
.main h1,
.main h2,
.main h3,
.main h4,
.blog-intro h1,
.blog-intro h2,
.grid h2,
.parallax h2,
.special1 h2,
.special2__box h2,
.special3 h2,
.stage2 h2,
.waterfall__intro h2,
.masonrygrid__inner h2,
.chessgrid__cell--bg h2,
.chessgrid__cell--img h2 {
  text-transform: none !important;
}

/* ============================================
   PROJECT POST TITLE SIZING (Cases Section)
   ============================================ */
.pjpost__title h2 {
  font-size: 1.375rem;
  line-height: 1.3;
}

/* ============================================
   HERO SECTION - Background Text (Service Keywords)
   Two layers: back (full opacity white) + front (25% opacity)
   Creates subtle depth effect behind the hero image
   ============================================ */
.h24hero__bg .bgtext {
  display: block !important;
  text-transform: uppercase;
  position: absolute;
  left: 50%;
  top: 0;
  color: #ffffff;
  font-weight: 700;
  font-size: 50px;
  width: 80vw;
  max-width: 1400px;
  margin: 0 auto;
  transform: translateX(-50%) translateY(20vh);
  z-index: 0;
  pointer-events: none;
}

.h24hero__bg .bgtext--front {
  opacity: 0.25;
  z-index: 1;
}

.h24hero__bg .bgtext .gradient,
.h24hero__headline .gradient {
  background-color: #2b84ff;
  background-image: linear-gradient(
    135deg,
    #37d0a6,
    #37d0a6 25%,
    #2b84ff 95%,
    #2b84ff
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.h24hero__bg .bgtext .oh {
  overflow: hidden;
}

.h24hero__bg .bgtext .oh span {
  display: inline-block;
  white-space: nowrap;
}

/* ============================================
   HERO ANIMATION SYSTEM
   Phase 1: Headline reveals (left-to-right)
   Phase 2: Crossfade to bgtext keywords
   ============================================ */

/* Base state - headline visible, bgtext hidden (for JS animation) */
.h24hero .h24hero__flex {
  position: relative;
  z-index: 10 !important;
}

.h24hero .h24hero__headline {
  display: block;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
  opacity: 0;
  transition: opacity 0.6s ease-out;
}

.h24hero .h24hero__headline.is-visible {
  opacity: 1;
}

.h24hero .h24hero__headline.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* Headline text reveal - each line slides in from left */
.h24hero .h24hero__headline .oh {
  overflow: hidden;
  display: block;
}

.h24hero .h24hero__headline .oh > *,
.h24hero .h24hero__headline .oh > span {
  display: block;
}

/* Initially translated left and hidden */
.h24hero .h24hero__headline .oh {
  transform: translateX(-100%);
  opacity: 0;
}

/* Animate in when .animate-in class added */
.h24hero .h24hero__headline.animate-in .oh {
  animation: slideInFromLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Staggered delays for each line */
.h24hero .h24hero__headline.animate-in .oh:nth-child(1) {
  animation-delay: 0.1s;
}
.h24hero .h24hero__headline.animate-in .oh:nth-child(2) {
  animation-delay: 0.25s;
}
.h24hero .h24hero__headline.animate-in .oh:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.h24hero .h24hero__text {
  position: relative;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.6s ease-out 0.6s;
}

.h24hero .h24hero__text.is-visible {
  opacity: 1;
}

/* bgtext - hidden initially, fades in during phase 2 */
.h24hero__bg .bgtext {
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}

.h24hero__bg .bgtext.is-visible {
  opacity: 1;
}

.h24hero__bg .bgtext--front {
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}

.h24hero__bg .bgtext--front.is-visible {
  opacity: 0.25;
}

/* Fallback for no-JS: show bgtext as final state */
.no-js .h24hero .h24hero__headline {
  display: none;
}

.no-js .h24hero__bg .bgtext {
  opacity: 1;
}

.no-js .h24hero__bg .bgtext--front {
  opacity: 0.25;
}

.no-js .h24hero .h24hero__text {
  opacity: 1;
}

/* ============================================
   BACKGROUND COLOR UTILITIES
   ============================================ */
.bg-coral {
  background-color: var(--kp-coral);
}

.bg-dark {
  background-color: var(--kp-dark);
}

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

.bg-teal {
  background-color: var(--kp-teal);
}

.bg-gray-light {
  background-color: #f5f5f5;
}

.bg-white {
  background-color: var(--kp-white);
}

.header {
  --header-text: var(--kp-dark);
  --header-logo: var(--kp-dark);
  --header-btn-bg: var(--kp-dark);
  --header-btn-border: var(--kp-dark);
  --header-btn-text: var(--kp-white);
  --header-btn-hover-bg: var(--kp-primary);
  --header-btn-hover-border: var(--kp-primary);
  --header-btn-hover-text: var(--kp-white);
  --headerlinkcolor: var(--kp-dark);
  --headerlinkcolorsticky: var(--kp-dark);
}

.site.header-on-dark .header {
  --header-text: var(--kp-white);
  --header-logo: var(--kp-white);
  --header-btn-bg: var(--kp-white);
  --header-btn-border: var(--kp-white);
  --header-btn-text: var(--kp-primary);
  --header-btn-hover-bg: var(--kp-primary);
  --header-btn-hover-border: var(--kp-primary);
  --header-btn-hover-text: var(--kp-white);
  --headerlinkcolor: var(--kp-white);
  --headerlinkcolorsticky: var(--kp-dark);
}

.site.has-sticky-header .header {
  --header-text: var(--kp-dark);
  --header-logo: var(--kp-dark);
  --header-btn-bg: var(--kp-dark);
  --header-btn-border: var(--kp-dark);
  --header-btn-text: var(--kp-white);
  --header-btn-hover-bg: var(--kp-primary);
  --header-btn-hover-border: var(--kp-primary);
  --header-btn-hover-text: var(--kp-white);
}

.header .logo svg {
  color: var(--header-logo);
  transition: color 0.2s ease;
}

.header .navigation ul li a {
  color: var(--header-text);
  transition: color 0.2s ease;
}

.btn-nav {
  background-color: var(--header-btn-bg);
  border: 2px solid var(--header-btn-border);
  color: var(--header-btn-text);
  transition: all 0.2s ease;
}

.btn-nav:hover {
  background-color: var(--header-btn-hover-bg);
  border-color: var(--header-btn-hover-border);
  color: var(--header-btn-hover-text);
}

/* ============================================
   LEGACY CTA CLASS - Navigation Button Compatibility
   Ensures old .cta class in navigation matches btn-nav styling
   Used in: Blog article pages with inline headers
   ============================================ */
.header .metanav .cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.5rem 1.5rem !important;
  font-size: 1.3125rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-decoration: none !important;
  background-color: var(--header-btn-bg) !important;
  border: 2px solid var(--header-btn-border) !important;
  border-radius: var(--radius-button) !important;
  color: var(--header-btn-text) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  height: auto !important;
  overflow: visible !important;
  position: relative !important;
}

.header .metanav .cta:hover {
  background-color: var(--header-btn-hover-bg) !important;
  border-color: var(--header-btn-hover-border) !important;
  color: var(--header-btn-hover-text) !important;
}

.header .metanav .cta div {
  display: none !important;
}

/* Burgermenu CTA - Mobile only (max-width: 1199px) */
@media (max-width: 1199px) {
  .header .burgermenu .cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.5rem 1.5rem !important;
    font-size: 1.3125rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
    background-color: var(--header-btn-bg) !important;
    border: 2px solid var(--header-btn-border) !important;
    border-radius: var(--radius-button) !important;
    color: var(--header-btn-text) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    height: auto !important;
    overflow: visible !important;
    position: relative !important;
  }

  .header .burgermenu .cta:hover {
    background-color: var(--header-btn-hover-bg) !important;
    border-color: var(--header-btn-hover-border) !important;
    color: var(--header-btn-hover-text) !important;
  }

  .header .burgermenu .cta div {
    display: none !important;
  }
}

/* ============================================
   VIDEO SUCCESS STORY - Form on Dark Background
   External form loaded via JS, styling parent container
   ============================================ */
.page-video-success-story .ccm-custom-style-main-5999 {
  color: #fff;
}

.page-video-success-story .ccm-custom-style-main-5999 label,
.page-video-success-story .ccm-custom-style-main-5999 input,
.page-video-success-story .ccm-custom-style-main-5999 textarea,
.page-video-success-story .ccm-custom-style-main-5999 select {
  color: #fff;
}

.page-video-success-story .ccm-custom-style-main-5999 input::placeholder,
.page-video-success-story .ccm-custom-style-main-5999 textarea::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.page-video-success-story .ccm-custom-style-main-5999 input,
.page-video-success-story .ccm-custom-style-main-5999 textarea,
.page-video-success-story .ccm-custom-style-main-5999 select {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.3);
}

.page-video-success-story .ccm-custom-style-main-5999 input:focus,
.page-video-success-story .ccm-custom-style-main-5999 textarea:focus,
.page-video-success-story .ccm-custom-style-main-5999 select:focus {
  border-color: var(--kp-primary);
  outline: none;
}

/* ============================================
   HEADER NAVIGATION - Optimized Typography
   Best Practice: Comfortable touch targets & readability
   ============================================ */

.header .navigation ul li a {
  font-size: 1.25rem;
  font-weight: 700;
  padding-left: 1rem;
  padding-right: 1rem;
  letter-spacing: -0.01em;
}

@media (min-width: 1200px) {
  .header .navigation ul li a {
    font-size: 1.1rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

@media (min-width: 1400px) {
  .header .navigation ul li a {
    font-size: 1.2rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media (min-width: 1600px) {
  .header .navigation ul li a {
    font-size: 1.3125rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* Dropdown/Flyout menu items */
.header .navigation ul li ul li a {
  font-size: 1.0625rem;
  font-weight: 600;
  padding: 0.625rem 1.25rem;
}

.site.has-sticky-header .header {
  background-color: rgba(255, 255, 255, 0.92) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}

/* Keep dark blue background when menu is open (burger OR flyout), even while scrolling */
.site.has-open-burgermenu .header,
.site.has-open-burgermenu.has-sticky-header .header,
.site.has-open-flyout .header,
.site.has-open-flyout.has-sticky-header .header {
  --header-text: var(--kp-white);
  --header-logo: var(--kp-white);
  --headerlinkcolor: var(--kp-white);
  --headerlinkcolorsticky: var(--kp-white);
  --header-btn-bg: transparent;
  --header-btn-border: var(--kp-white);
  --header-btn-text: var(--kp-white);
  background-color: rgb(1, 17, 35) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

/* Logo must be white when menu is open - override all states */
.site.has-open-burgermenu .header .logo svg,
.site.has-open-burgermenu.has-sticky-header .header .logo svg,
.site.has-open-burgermenu .logo svg,
.site.has-open-burgermenu.has-sticky-header .logo svg,
.site.has-open-flyout .header .logo svg,
.site.has-open-flyout.has-sticky-header .header .logo svg,
.site.has-open-flyout .logo svg,
.site.has-open-flyout.has-sticky-header .logo svg {
  color: var(--kp-white) !important;
}

.site.has-open-burgermenu .hamburger-inner,
.site.has-open-burgermenu .hamburger-inner::before,
.site.has-open-burgermenu .hamburger-inner::after,
.site.has-open-burgermenu.has-sticky-header .hamburger-inner,
.site.has-open-burgermenu.has-sticky-header .hamburger-inner::before,
.site.has-open-burgermenu.has-sticky-header .hamburger-inner::after {
  background-color: var(--kp-white) !important;
}

/* Header nav button - match navigation typography */
.header .metanav .btn,
.header .burgermenu .btn {
  font-size: 1.3125rem;
  font-weight: 700;
  padding: 0.5rem 1.5rem;
}

/* ============================================
   SERVICE INTRO BACKGROUND
   Unified background image for service pages
   ============================================ */
.ccm-custom-style-container.ccm-custom-style-intro-12437 {
  background-image: url(/application/files/3617/3677/5751/bg-square.png);
  background-repeat: no-repeat;
  background-size: auto;
  background-position: right top;
}

/* ============================================
   SERVICE SECTIONS - TEAL BACKGROUND
   Light teal background for service/info sections
   Used on: brand-marketing, webentwicklung, ki-beratung
   ============================================ */
.ccm-custom-style-container.ccm-custom-style-intro-12495,
.ccm-custom-style-container.ccm-custom-style-intro-12501,
.ccm-custom-style-container.ccm-custom-style-intro-12496,
.ccm-custom-style-container.ccm-custom-style-intro-12510,
.ccm-custom-style-container.ccm-custom-style-intro-12524,
.ccm-custom-style-container.ccm-custom-style-intro-12669,
.ccm-custom-style-container.ccm-custom-style-intro-12973,
.ccm-custom-style-container.ccm-custom-style-intro208abstand1-12544,
.ccm-custom-style-container.ccm-custom-style-intro208abstand1-12552 {
  background-color: rgba(214, 243, 245, 1);
}

/* ============================================
   SERVICE ITEMS - BULLET POINT GRAPHIC
   Blue dot/point.svg for service list items
   Used on: webentwicklung, ki-beratung, brand-marketing
   ============================================ */
.ccm-custom-style-container[class*="ccm-custom-style-intro189area1196area1-"],
.ccm-custom-style-container[class*="ccm-custom-style-intro189area2197area1-"],
.ccm-custom-style-container[class*="ccm-custom-style-intro192area1202area1-"],
.ccm-custom-style-container[class*="ccm-custom-style-intro192area2203area1-"],
.ccm-custom-style-container[class*="ccm-custom-style-intro204area1206area1-"],
.ccm-custom-style-container[class*="ccm-custom-style-intro204area2205area1-"],
.ccm-custom-style-container[class*="ccm-custom-style-intro220area1221area1-"],
.ccm-custom-style-container[class*="ccm-custom-style-intro220area2222area1-"] {
  background-image: url(/application/files/8517/3680/3721/point.svg);
  background-repeat: no-repeat;
  background-size: auto;
  background-position: left top;
  padding-right: 22px;
  padding-left: 22px;
}

/* ============================================
   CASE STUDY SECTION - Dark Background
   Video Success Stories page
   ============================================ */
.ccm-custom-style-container.ccm-custom-style-main-6695 {
  background-color: #042a4a;
  padding: 60px 0;
}

/* ============================================
   VIDEO SUCCESS STORIES - CTA Alignment Fixes
   ============================================ */
.ccm-custom-style-container.ccm-custom-style-main243612-6356 {
  text-align: center;
}

.ccm-custom-style-container.ccm-custom-style-main481-9962 {
  margin-top: 40px;
}

.ccm-custom-style-container.ccm-custom-style-main546-6021 {
  text-align: center;
  margin-top: 30px;
}

/* ============================================
   EMAIL MARKETING PAGE - CTA Alignment & Styling
   ============================================ */
.ccm-custom-style-container.ccm-custom-style-main243758-8390 {
  text-align: center;
}

.ccm-custom-style-container.ccm-custom-style-main245342-8150 {
  text-align: center;
}

/* Grenzenlose Möglichkeiten - Background image for parallax section */
.ccm-custom-style-container.ccm-custom-style-main-8036
  [data-stripe-wrapper="parallax"] {
  background-image: url(/application/files/4516/9476/6905/klickpark-newsletter-optionen-2.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* Only the heading container gets blue background */
.ccm-custom-style-container.ccm-custom-style-main768769-8024 {
  background-color: var(--kp-dark);
  padding: 40px 30px;
  border-radius: 8px;
}

/* Email Marketing - Coral background sections */
.ccm-custom-style-container.ccm-custom-style-main-8098,
.ccm-custom-style-container.ccm-custom-style-main-8121 {
  background-color: var(--kp-coral);
}

/* ============================================
   KLICKPARK BUTTON SYSTEM
   Clean .btn classes - no legacy dependencies
   ============================================ */

.btn,
.main .btn,
.main a.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.75rem !important;
  padding: 0.875rem 1.75rem !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  text-decoration: none !important;
  border: 2px solid transparent !important;
  border-radius: var(--radius-button) !important;
  cursor: pointer !important;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease !important;
  white-space: nowrap !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  height: auto !important;
}

.btn:focus-visible {
  outline: 3px solid rgba(5, 110, 255, 0.5) !important;
  outline-offset: 2px !important;
}

.btn:active {
  transform: scale(0.98) !important;
}

.btn__icon,
.btn svg {
  flex-shrink: 0 !important;
  width: 13px !important;
  height: 11px !important;
  transition: transform 0.25s ease !important;
  fill: currentColor !important;
}

.btn:hover .btn__icon,
.btn:hover svg {
  transform: translateX(4px) !important;
}

.btn > div:empty {
  display: none !important;
}

.btn-primary,
.main .btn-primary,
.main a.btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  background-color: var(--kp-primary) !important;
  border-color: var(--kp-primary) !important;
  color: #fff !important;
  text-decoration: none !important;
}

.btn-primary svg,
.main .btn-primary svg {
  width: 1.5rem;
  height: auto;
  flex-shrink: 0;
}

.btn-primary svg path {
  fill: currentColor;
  stroke: currentColor;
}

.btn-primary:hover,
.main .btn-primary:hover,
.main a.btn-primary:hover {
  background-color: #0458cc;
  border-color: #0458cc;
  color: #fff;
}

.btn-primary:active,
.main .btn-primary:active,
.main a.btn-primary:active {
  background-color: #0347a3;
}

/* BEM-style button variants */
.park-btn-primary,
.park-btn-primary:link,
.park-btn-primary:visited {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background-color: var(--kp-dark, #042a4a);
  border-color: var(--kp-dark, #042a4a);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}

.park-btn-primary:hover {
  background-color: #0347ff;
  border-color: #0347ff;
  color: #fff !important;
  text-decoration: none;
}

.park-btn-primary svg {
  width: 13px;
  height: 11px;
  flex-shrink: 0;
  fill: #fff;
}

.park-btn-primary:hover svg {
  fill: #fff;
}

.park-btn-primary-lightblue,
.park-btn-primary-lightblue:link,
.park-btn-primary-lightblue:visited {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background-color: var(--color-blue, #056EFF);
  border-color: var(--color-blue, #056EFF);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}

.park-btn-primary-lightblue:hover {
  background-color: var(--color-blue-dark, #0455CC);
  border-color: var(--color-blue-dark, #0455CC);
  color: #fff !important;
  text-decoration: none;
}

.park-btn-primary-lightblue svg {
  width: 13px;
  height: 11px;
  flex-shrink: 0;
  fill: #fff;
}

.park-btn-primary-lightblue:hover svg {
  fill: #fff;
}

.btn-secondary,
.main .btn-secondary,
.main a.btn-secondary {
  background-color: transparent;
  border-color: #042a4a;
  color: #042a4a;
  text-decoration: none;
}

.btn-secondary:hover,
.main .btn-secondary:hover,
.main a.btn-secondary:hover {
  background-color: #042a4a;
  border-color: #042a4a;
  color: #fff;
}

.btn-secondary:active,
.main .btn-secondary:active,
.main a.btn-secondary:active {
  background-color: #031e35;
  color: #fff;
}

.btn-secondary-light,
.main .btn-secondary-light,
.main a.btn-secondary-light {
  background-color: transparent;
  border-color: #fff;
  color: #fff;
  text-decoration: none;
}

.btn-secondary-light:hover,
.main .btn-secondary-light:hover,
.main a.btn-secondary-light:hover {
  background-color: #fff;
  border-color: #fff;
  color: #042a4a;
}

.btn-secondary-light:active,
.main .btn-secondary-light:active,
.main a.btn-secondary-light:active {
  background-color: rgba(255, 255, 255, 0.9);
  color: #042a4a;
}

.masonrygrid__inner span.btn-secondary-light {
  position: absolute;
  bottom: 0.9375rem;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.25s;
  z-index: 2;
}

.masonrygrid__inner:hover span.btn-secondary-light {
  opacity: 1;
}

.blog-kontakt-bottom .btn,
.blog-kontakt-bottom .park-btn {
  width: 100%;
}

.blog-kontakt-bottom > div {
  padding: 0.5rem 15px;
}

.pjpost--cta__button .btn {
  position: relative;
  overflow: visible;
  height: auto !important;
}

.pjpost--cta__button .btn div:empty {
  display: none !important;
}

.btn-outline {
  background-color: transparent;
  border-color: #042a4a;
  color: #042a4a;
}

.btn-outline:hover {
  background-color: #042a4a;
  color: #fff;
}

.btn-outline-light {
  background-color: transparent;
  border-color: #fff;
  color: #fff;
}

.btn-outline-light:hover {
  background-color: #fff;
  color: #042a4a;
}

.btn-accent {
  background-color: #14b8a6;
  border-color: #14b8a6;
  color: #fff;
}

.btn-accent:hover {
  background-color: #0d9488;
  border-color: #0d9488;
}

.park-btn-white,
.park-btn-white:link,
.park-btn-white:visited {
  background-color: #fff;
  border-color: #fff;
  color: #042a4a;
  text-decoration: none;
  font-weight: 700;
}

.park-btn-white:hover {
  background-color: #0347ff;
  border-color: #0347ff;
  color: #fff;
  text-decoration: none;
}

.park-btn-white:active {
  background-color: #0460e0;
  border-color: #0460e0;
}

.btn-sm {
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  gap: 0.5rem;
}

.btn-sm svg {
  width: 11px;
  height: 9px;
}

.btn-lg {
  padding: 1.125rem 2.25rem;
  font-size: 1.125rem;
  gap: 1rem;
}

.btn-lg svg {
  width: 15px;
  height: 13px;
}

.btn-block {
  width: 100%;
}

.btn:disabled,
.btn.disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

@media (max-width: 575.98px) {
  .btn {
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
  }

  .btn-lg {
    padding: 1rem 1.75rem;
    font-size: 1rem;
  }
}

/* Navigation CTAs - Desktop vs Mobile visibility */
@media (min-width: 1200px) {
  .burgermenu .btn,
  .burgermenu .btn-nav {
    display: none !important;
  }

  .header .metanav,
  .header .metanav ul {
    display: flex !important;
  }
}

@media (max-width: 1199px) {
  .burgermenu .btn,
  .burgermenu .btn-nav {
    display: inline-flex !important;
    margin-top: 1rem;
  }

  .header .metanav,
  .header .metanav ul,
  .header .metanav li {
    display: none !important;
  }
}

/* ===================================
   KLICKPARK FOOTER v6
   Stamp Animation - Simplify. Build. Grow.
   Animation triggers on scroll into view
   =================================== */

:root {
  --kp-blue: #056eff;
  --kp-teal: #14b8a6;
  --kp-gold: #f59e0b;
  --kp-dark: #0f172a;
  --kp-snap: cubic-bezier(0.16, 1, 0.3, 1);
}

.kp-footer {
  background: var(--kp-dark);
  color: #fff;
  padding: 0;
  margin-top: 80px;
  position: relative;
  overflow: visible;
}

/* STAGE - Hero area with claim */
.kp-footer__stage {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 72px 48px 56px;
  max-width: 1400px;
  margin: 0 auto;
  overflow: visible;
}

/* CLAIM - Single row, inline verbs */
.kp-footer__claim {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.5em;
  line-height: 1.05;
  justify-content: flex-start;
}

/* VERBS - Large, bold, stamp effect */
.kp-footer__verb {
  font-size: clamp(2.5rem, 7vw, 5rem);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1;
  text-transform: uppercase;
  opacity: 0;
  transform: scale(1.12);
  transform-origin: center center;
  transition:
    transform 0.25s ease,
    text-shadow 0.25s ease;
}

/* Stamp keyframe - scale overshoot with settle */
@keyframes stampIn {
  0% {
    opacity: 0;
    transform: scale(1.18);
  }
  55% {
    opacity: 1;
    transform: scale(0.96);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* GROW gets special treatment with glow */
@keyframes stampGrow {
  0% {
    opacity: 0;
    transform: scale(1.18);
    text-shadow: 0 0 0 transparent;
  }
  55% {
    opacity: 1;
    transform: scale(0.96);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    text-shadow: 0 0 28px rgba(245, 158, 11, 0.4);
  }
}

/* Animation only triggers when footer is visible */
.kp-footer.is-visible .kp-footer__verb--simplify {
  color: var(--kp-blue);
  animation: stampIn 0.32s var(--kp-snap) 0.1s forwards;
}

.kp-footer.is-visible .kp-footer__verb--build {
  color: #fff;
  animation: stampIn 0.32s var(--kp-snap) 0.35s forwards;
}

.kp-footer.is-visible .kp-footer__verb--grow {
  color: var(--kp-gold);
  animation: stampGrow 0.38s var(--kp-snap) 0.6s forwards;
}

/* Hover states */
.kp-footer__verb:hover {
  transform: scale(1.02);
}

.kp-footer__verb--grow:hover {
  text-shadow: 0 0 45px rgba(245, 158, 11, 0.6);
}

/* KONTAKT COLUMN - Signet + Address + Social */
.kp-footer__nav-col--kontakt {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kp-footer__signet {
  width: 64px;
  height: auto;
  color: #fff;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.kp-footer__signet:hover {
  opacity: 0.8;
}

.kp-footer__address {
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  margin: 0;
}

.kp-footer__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--kp-blue) !important;
  text-decoration: none !important;
  font-size: 17px;
  font-weight: 600;
  margin: 8px 0 24px;
  transition: all 0.2s ease;
}

.kp-footer__cta:hover {
  color: #fff !important;
}

.kp-footer__cta-arrow {
  width: 32px;
  height: auto;
  color: var(--kp-blue);
  transition:
    transform 0.2s ease,
    color 0.2s ease;
}

.kp-footer__cta:hover .kp-footer__cta-arrow {
  transform: translateX(6px);
  color: #fff;
}

.kp-footer__social {
  display: flex;
  flex-direction: row;
  gap: 16px;
  margin-top: 8px;
}

.kp-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: all 0.2s ease;
}

.kp-footer__social-link:hover {
  color: var(--kp-blue);
  transform: scale(1.1);
}

.kp-footer__social-link svg {
  width: 32px;
  height: 32px;
}

/* NAV - Equal Grid */
.kp-footer__nav {
  padding: 48px 40px;
  max-width: 1400px;
  margin: 0 auto;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}

.kp-footer__nav-col h4 {
  font-size: 18px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  color: #ffffff;
  margin: 0 0 16px 0;
}

.kp-footer__nav-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kp-footer__nav-link {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none !important;
  font-size: 16px;
  line-height: 1.25;
  transition: all 0.2s ease;
  display: inline-block;
}

.kp-footer__nav-link:hover {
  color: var(--kp-blue);
  transform: translateX(6px);
}

/* BOTTOM BAR */
.kp-footer__bottom {
  padding: 24px 40px;
  max-width: 1400px;
  margin: 0 auto;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.kp-footer__helpdesk {
  display: flex;
  align-items: center;
  gap: 10px;
}

.kp-footer__helpdesk-label {
  color: rgba(255, 255, 255, 0.5);
  font-size: 15px;
  font-weight: 500;
}

.kp-footer__helpdesk-link {
  color: rgba(255, 255, 255, 0.7) !important;
  text-decoration: none !important;
  font-size: 15px;
  transition: color 0.2s ease;
}

.kp-footer__helpdesk-link:hover {
  color: var(--kp-blue) !important;
}

.kp-footer__helpdesk-divider {
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, 0.2);
}

.kp-footer__email {
  color: var(--kp-blue);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s ease;
}

.kp-footer__email:hover {
  color: var(--kp-teal);
}

.kp-footer__legal {
  display: flex;
  gap: 32px;
  align-items: center;
}

.kp-footer__legal-link {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-size: 15px;
  transition: color 0.2s ease;
}

.kp-footer__legal-link:hover {
  color: #fff;
}

.kp-footer__copyright {
  color: rgba(255, 255, 255, 0.5);
  font-size: 15px;
}

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

@media (max-width: 1024px) {
  .kp-footer__stage {
    gap: 32px;
    padding: 56px 24px 44px;
  }

  .kp-footer__verb {
    font-size: clamp(2rem, 8vw, 4rem);
  }

  .kp-footer__signet {
    width: 48px;
  }

  .kp-footer__nav {
    grid-template-columns: repeat(2, 1fr);
    padding: 40px 24px;
  }
}

@media (max-width: 640px) {
  .kp-footer__stage {
    padding: 44px 20px 36px;
    gap: 24px;
  }

  .kp-footer__verb {
    font-size: clamp(1.8rem, 10vw, 2.8rem);
  }

  .kp-footer__we {
    font-size: clamp(1.6rem, 10vw, 2.5rem);
  }

  .kp-footer__signet-col {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .kp-footer__signet {
    width: 40px;
  }

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

  .kp-footer__bottom {
    flex-direction: column;
    gap: 20px;
    text-align: center;
    padding: 24px 20px;
  }

  .kp-footer__legal {
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }

  .kp-footer__helpdesk {
    justify-content: center;
  }
}

/* ============================================
   LINK-STYLE CTA (.btn-link)
   Text + Arrow inline link for content areas
   ============================================ */

.btn-link,
.main .btn-link,
.main a.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--kp-blue, #056eff);
  text-decoration: none;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.2;
  transition: color 0.2s ease;
}

.btn-link:hover,
.btn-link:focus {
  color: #0347cc;
}

.btn-link__arrow {
  display: inline-block;
  width: 32px;
  height: auto;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.btn-link:hover .btn-link__arrow,
.btn-link:focus .btn-link__arrow {
  transform: translateX(6px);
}

.btn-link--lg {
  font-size: 19px;
  font-weight: 700;
  gap: 20px;
  letter-spacing: 0;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.btn-link--lg .btn-link__arrow {
  width: 90px;
  height: auto;
}

/* Blog Link - Clean card CTA (override legacy styles) */
.blog-link,
.main .blog-link,
.main a.blog-link {
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 8px;
  color: var(--kp-blue, #056eff) !important;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0;
  height: auto;
  position: relative;
  transition: color 0.2s ease;
}

.blog-link:after,
.main .blog-link:after {
  display: none;
}

.blog-link svg {
  position: static;
  transform: none;
  width: 13px;
  height: 11px;
  transition: transform 0.2s ease;
}

.blog-link:hover {
  color: var(--kp-dark-blue, #042a4a) !important;
}

.blog-link:hover svg {
  transform: translateX(4px);
}

/* ============================================
   MARKETING KAMPAGNEN PAGE - Section Styles
   ============================================ */

/* Content Highlight Section - Dark Background ONLY on marketing page */
.page-marketing-kampagnen-landingpages-conversion-rates
  .ccm-block-custom-template-Highlight {
  background-color: #000;
}

.page-marketing-kampagnen-landingpages-conversion-rates .content-highlight {
  background-color: transparent;
  color: #fff;
}

.page-marketing-kampagnen-landingpages-conversion-rates .content-highlight h3,
.page-marketing-kampagnen-landingpages-conversion-rates .content-highlight p {
  color: #fff;
}

.page-marketing-kampagnen-landingpages-conversion-rates
  .content-highlight
  .link-white {
  color: #fff;
}

/* Center CTA buttons in content-highlight */
.content-highlight
  .ccm-custom-style-container[class*="ccm-custom-style-main398-"] {
  text-align: center;
}

/* Icon centering for template "zentriert" */
.ccm-block-custom-template-zentriert {
  text-align: center;
}

.ccm-block-custom-template-zentriert .d-inline-block {
  display: flex !important;
  justify-content: center;
  align-items: center;
}

.ccm-block-custom-template-zentriert img {
  display: block;
  margin: 0 auto;
}

/* "Ihr kostenloses Erstgespräch" Form Section - Light Gray Background */
.ccm-custom-style-container.ccm-custom-style-main-6091 {
  background-color: #f5f5f5;
}

/* Checklist with checkmark icons - matching email-marketing style */
.checklist {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.checklist li {
  padding-left: 40px;
  margin-bottom: 0.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2720%27 height=%2720%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23056EFF%27 stroke-width=%273%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpolyline points=%2720 6 9 17 4 12%27%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 9px;
  background-size: 20px 20px;
}

/* ============================================
   BRANCHEN PAGES - Show Tags
   Override display:none from styles.css
   ============================================ */
.page-template-home-2024.page-software-agentur .pjpost__taglist,
[class*="page-"][class*="-agentur"] .pjpost__taglist,
.page-software-agentur .pjpost__taglist,
.page-healthcare .pjpost__taglist,
.branchen .pjpost__taglist {
  display: flex !important;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.page-template-home-2024.page-software-agentur .pjpost__tag,
[class*="page-"][class*="-agentur"] .pjpost__tag,
.page-software-agentur .pjpost__tag,
.page-healthcare .pjpost__tag,
.branchen .pjpost__tag {
  display: inline-block !important;
  background-color: #fff;
  padding: 0.5rem 0.5rem 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #042a4a;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
  border-radius: 4px;
}

/* Project post content box - light blue background, tags have white */
.page-template-home-2024.page-software-agentur .pjpost__content,
[class*="page-"][class*="-agentur"] .pjpost__content,
.page-software-agentur .pjpost__content,
.page-healthcare .pjpost__content,
.branchen .pjpost__content {
  padding: 1rem;
  background-color: #d6f5f4;
  max-width: 80%;
  position: relative;
  z-index: 1;
  transition: all 0.3s;
}

/* "Ein Auszug unserer Projekte" Section Header */
.ccm-custom-style-container.ccm-custom-style-main-6600 {
  text-align: center;
}

/* CTA Button below slider - center */
.ccm-custom-style-container.ccm-custom-style-main242-6511 {
  text-align: center;
}

/* Icon sections - center images */
.ccm-custom-style-container.ccm-custom-style-main484511-5936,
.ccm-custom-style-container.ccm-custom-style-main484512-5935,
.ccm-custom-style-container.ccm-custom-style-main484513-5934 {
  text-align: center;
}

.ccm-custom-style-container.ccm-custom-style-main484511-5936 img,
.ccm-custom-style-container.ccm-custom-style-main484512-5935 img,
.ccm-custom-style-container.ccm-custom-style-main484513-5934 img {
  display: inline-block;
  max-width: 80px;
  margin-bottom: 20px;
}

/* Text below icons - center */
.ccm-custom-style-container.ccm-custom-style-main484511-5931,
.ccm-custom-style-container.ccm-custom-style-main484512-5932,
.ccm-custom-style-container.ccm-custom-style-main484513-5933 {
  text-align: center;
}

/* Video Success Stories Page - Remove uppercase from all h2 */
.page-kundenreferenzen-video-success-stories h2 {
  text-transform: none;
}

/* Case Study Section - Video Success Stories */
.ccm-custom-style-main-6695 h2 {
  text-transform: none;
}

.ccm-custom-style-main-6695 {
  padding: 60px 0;
}

@media (max-width: 991px) {
  .ccm-custom-style-main-6695 .content.row {
    flex-direction: column;
  }

  .ccm-custom-style-main-6695 .col-lg-5,
  .ccm-custom-style-main-6695 .col-lg-6 {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
  }

  .ccm-custom-style-main-6695 .offset-lg-1 {
    margin-left: 0;
  }

  .ccm-custom-style-main-6695 img {
    margin-top: 30px;
  }
}

/* Förderungen section with gray-white gradient */
.bg-weiss-grau {
  background: linear-gradient(to right, #ffffff 0%, #f5f5f5 100%);
}

/* Blog link styling */
.ccm-block-custom-template-Text .blog-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--kp-dark);
  text-decoration: none;
  font-weight: 500;
}

.ccm-block-custom-template-Text .blog-link svg {
  transition: transform 0.2s ease;
}

.ccm-block-custom-template-Text .blog-link:hover svg {
  transform: translateX(4px);
}

/* Hero/Main section - center text */
.ccm-custom-style-container.ccm-custom-style-main-5525 {
  text-align: center;
}

/* Client logos section - padding */
.ccm-custom-style-container.ccm-custom-style-main243504-5726,
.ccm-custom-style-container.ccm-custom-style-main243505-5727,
.ccm-custom-style-container.ccm-custom-style-main243506-5728 {
  padding-top: 20px;
  text-align: center;
}

/* Light gray background section */
.ccm-custom-style-container.ccm-custom-style-main-6091 {
  background-color: #f6f6f6;
  padding: 40px;
}

/* Black background Highlight section */
.ccm-custom-style-container.ccm-custom-style-main-5853 {
  background-color: var(--kp-dark);
  color: #ffffff;
  padding: 40px;
}

.ccm-custom-style-container.ccm-custom-style-main-5853 h2,
.ccm-custom-style-container.ccm-custom-style-main-5853 h3,
.ccm-custom-style-container.ccm-custom-style-main-5853 p {
  color: #ffffff;
}

/* Content blocks with consistent padding */
.ccm-custom-style-container.ccm-custom-style-main596597-6120,
.ccm-custom-style-container.ccm-custom-style-main596598-6130 {
  padding: 25px 10px;
}

.ccm-custom-style-container.ccm-custom-style-main596597-6129,
.ccm-custom-style-container.ccm-custom-style-main596598-6135 {
  padding: 10px;
}

/* Two-column sections - padding */
.ccm-custom-style-container.ccm-custom-style-main477-5192,
.ccm-custom-style-container.ccm-custom-style-main547-5729 {
  padding-left: 40px;
  padding-right: 40px;
}

/* ============================================
   HAMBURGER MENU - Mobile Navigation Styles
   Sub-items with SVG arrows, proper typography
   ============================================ */

@media (max-width: 1199px) {
  /* First level items - no indentation, larger text, medium weight */
  .navigation.js-burger-collapse > ul > li > a {
    font-weight: 500 !important;
    font-size: 1.5rem !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Sub-menu container - no indentation */
  .navigation.js-burger-collapse > ul > li > ul {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }

  /* Sub-items - regular weight, larger text, flex for SVG */
  .navigation.js-burger-collapse > ul > li > ul > li > a {
    font-weight: 400 !important;
    font-size: 1.125rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    line-height: 1.4 !important;
  }

  /* SVG arrow in sub-items - FORCE visible and properly aligned */
  .navigation.js-burger-collapse > ul > li > ul > li > a svg {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    width: 1em !important;
    height: 1em !important;
    min-width: 1em !important;
    flex-shrink: 0 !important;
    color: currentColor !important;
    align-self: center !important;
    transform: translate(-10px, 34px) !important;
  }

  /* Sub-item text span */
  .navigation.js-burger-collapse > ul > li > ul > li > a span {
    flex: 1;
  }
}

/* ============================================
   CONTAINER SLIM PADDING FIX
   Override Bootstrap's nested container reset
   (.container-fluid .container { padding: 0 })
   ============================================ */

.main .container.container--slim,
.main .container-fluid .container.container--slim,
.container-fluid .container.container--slim {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

@media (min-width: 768px) {
  .main .container.container--slim,
  .main .container-fluid .container.container--slim,
  .container-fluid .container.container--slim {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

@media (min-width: 1200px) {
  .main .container.container--slim,
  .main .container-fluid .container.container--slim,
  .container-fluid .container.container--slim {
    padding-left: 6.25rem !important;
    padding-right: 6.25rem !important;
  }
}

/* ============================================
   CONTACT PAGE - Light Blue Background
   ============================================ */
.page-kontakt .ccm-custom-style-main-10311 {
  background-color: rgb(214, 245, 244);
}

.page-kontakt .blog-p55,
.page-kontakt .pj-font-30,
.page-kontakt .pj-font-30 a,
.page-kontakt h3.text-center {
  font-weight: 700;
}

/* ============================================
   IMPRESSUM & DATENSCHUTZ - Content spacing + bold headlines
   ============================================ */
.page-impressum .main,
.page-datenschutz .main {
  padding-top: 80px;
}

.page-impressum h1,
.page-impressum h2,
.page-impressum h3,
.page-datenschutz h1,
.page-datenschutz h2,
.page-datenschutz h3 {
  font-weight: 700;
}

/* ============================================
   TRIANGLE SVG FIX
   Ensure triangle SVGs display at correct height
   Override conflicting styles.css rules
   ============================================ */
svg.triangle {
  max-width: 1920px !important;
  height: 100px !important;
}

/* ============================================
   NESTED .main FIX
   Some pages have duplicate <div class="main"> from both
   header.php and the page template, causing double padding.
   Reset padding on nested .main to prevent extra scroll space.
   ============================================ */
.main .main {
  padding-top: 0;
}

/* ============================================
   REFOOT PADDING FIX
   .refoot has 64px padding-bottom that extends
   beyond the footer, causing extra scroll space.
   Remove padding to eliminate white space below footer.
   ============================================ */
.refoot {
  padding-bottom: 0 !important;
}

/* ============================================
   SOFTWARE-AGENTUR PAGE - "Komplexes einfach erklären" Section
   Blue background box with white text overlay
   ============================================ */

/* Container with background image "IT SOFTWARE KOMMUNIKATION" */
.ccm-custom-style-container.ccm-custom-style-main-9945 {
  position: relative;
  background-color: rgb(214, 245, 244);
  background-image: url(/application/files/3917/2597/7920/klickpark-it-software-digitale-transformation.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}

/* Blue text box - "Komplexes einfach erklären" */
.ccm-custom-style-container.ccm-custom-style-main49area2-14307 {
  background-color: rgba(3, 109, 255, 0.908) !important;
  padding: 22px !important;
  margin-top: 80px !important;
  border-radius: 0 !important;
}

/* Ensure white text inside the blue box */
.ccm-custom-style-container.ccm-custom-style-main49area2-14307 h2,
.ccm-custom-style-container.ccm-custom-style-main49area2-14307 p,
.ccm-custom-style-container.ccm-custom-style-main49area2-14307 .text--white {
  color: #fff !important;
}

/* Parallax section - Software Keyvisual */
.ccm-custom-style-container.ccm-custom-style-main-9751
  [data-stripe-wrapper="parallax"] {
  background-image: url(/application/files/7817/2416/7154/klickpark-it-software-solutions-marketing-partner-keyvisual-02.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  min-height: 400px;
}

/* ============================================
   USE CASES PAGES - Light Gray Background
   Applied via page class to blog-intro sections
   ============================================ */
.page-use-cases .blog-intro,
.page-type-blog-post.page-template-blog-single .blog-intro {
  background-color: rgba(215, 224, 231, 1);
}

.page-use-cases .ccm-custom-style-container.ccm-custom-style-main-14052 {
  background-color: rgba(215, 224, 231, 1);
  background-image: url(/application/files/8217/6527/7259/klickpark-ki-use-cases.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center bottom;
}

.page-type-blog-post.page-template-blog-single .ccm-custom-style-main-14243,
.page-type-blog-post.page-template-blog-single .ccm-custom-style-main-14268,
.page-type-blog-post.page-template-blog-single .ccm-custom-style-main-14245,
.page-type-blog-post.page-template-blog-single .ccm-custom-style-main-14246,
.page-type-blog-post.page-template-blog-single .ccm-custom-style-main-14247,
.page-type-blog-post.page-template-blog-single .ccm-custom-style-main-14248,
.page-type-blog-post.page-template-blog-single .ccm-custom-style-main-14259,
.page-type-blog-post.page-template-blog-single .ccm-custom-style-main-14260 {
  background-color: rgba(215, 224, 231, 1);
}

/* ============================================
   RF-HELLO CTA Button Fix
   Round contact button with white text
   ============================================ */
.rf-hello,
.rf-hello:link,
.rf-hello:visited,
.rf-hello:hover,
.rf-hello:active,
.rf-hello:focus {
  color: #fff;
  text-decoration: none !important;
  font-size: 1.5rem;
  font-weight: 600;
}

.rf-hello:hover {
  background-color: #0458cc;
}

.rf-hello .lh-tight,
.rf-hello div,
.rf-hello span {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 600;
  text-decoration: none !important;
}

.rf-hello[data-scale="1"] .lh-tight,
.rf-hello[data-scale="1"] div {
  opacity: 1;
}

.rf-hello:hover .lh-tight,
.rf-hello:hover div,
.rf-hello:hover span {
  color: #fff;
  text-decoration: none !important;
}

.rf-hello:hover svg path {
  fill: #fff;
  stroke: #fff;
}

/* ============================================
   REFOOT Section Fix - Override .main a styles
   Fixes underline and font issues on project pages
   where .refoot is nested inside .main
   ============================================ */
.main .refoot,
.refoot {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.main .refoot a,
.main .refoot a:link,
.main .refoot a:visited,
.main .refoot a:hover,
.main .refoot a:active,
.main .refoot a:focus,
.refoot a,
.refoot a:link,
.refoot a:visited,
.refoot a:hover,
.refoot a:active,
.refoot a:focus {
  text-decoration: none !important;
  color: #056eff;
  font-size: inherit;
  font-weight: inherit;
}

/* ============================================
   Refoot CTA - Circular button for project pages
   Matches original rf-hello animation behavior
   ============================================ */
.refoot-cta,
.refoot-cta:link,
.refoot-cta:visited {
  width: 140px;
  aspect-ratio: 1/1;
  color: #fff;
  font-size: 1.3125rem;
  font-weight: 700;
  text-align: center;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-decoration: none !important;
  transform: scale(var(--scale, 0));
  position: relative;
  transition: background 0.4s;
}

.refoot-cta[data-scale="1"],
.refoot-cta[data-scale^="0.7"],
.refoot-cta[data-scale^="0.8"],
.refoot-cta[data-scale^="0.9"] {
  background-color: rgba(4, 42, 74, var(--scale, 1));
}

.refoot-cta:hover,
.refoot-cta:active,
.refoot-cta:focus {
  background-color: #026dff;
  transition: background 0.2s;
}

.refoot-cta__logo {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 44/47;
  opacity: calc(1 - var(--scale, 0) / 1.2);
  transition: opacity 0.4s;
}

.refoot-cta[data-scale="1"] .refoot-cta__logo,
.refoot-cta[data-scale^="0.7"] .refoot-cta__logo,
.refoot-cta[data-scale^="0.8"] .refoot-cta__logo,
.refoot-cta[data-scale^="0.9"] .refoot-cta__logo {
  opacity: 0;
}

.refoot-cta__logo path {
  fill: #042a4a !important;
}

.refoot-cta__text {
  color: #fff !important;
  font-size: 1.3125rem;
  font-weight: 700;
  text-decoration: none !important;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  opacity: 0;
}

.refoot-cta__arrow {
  margin-top: 0.5rem;
  opacity: 0;
}

.refoot-cta__arrow path {
  fill: #fff !important;
  stroke: #fff !important;
}

.refoot-cta:hover .refoot-cta__arrow path {
  fill: #fff !important;
  stroke: #fff !important;
  transition: all 0.2s;
}

.refoot-cta[data-scale="1"] .refoot-cta__text,
.refoot-cta[data-scale="1"] .refoot-cta__arrow {
  opacity: 1;
}

/* Engage Form Spacing */
.html:has(script[src*="engage.klickpark.de"]) {
  margin-top: 25px;
}

/* ============================================
   MAUTIC FORM STYLING
   Best Practices: Google/HubSpot Research
   ============================================ */

.mauticform-wrapper {
  font-family: var(--font-heading, "Campton", system-ui, sans-serif);
}

.mauticform-innerform {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mauticform-row {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 1.25rem;
}

.mauticform-row:first-child {
  margin-top: 0;
}

/* Half-width fields wrapper - use flexbox to avoid whitespace issues */
.mauticform-page-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
}

/* Half-width fields - add class "mauticform-half" to field in Mautic */
.mauticform-row.mauticform-half {
  display: flex;
  flex-direction: column;
  width: calc(50% - 12px) !important;
  flex-shrink: 0;
}

.mauticform-row.mauticform-half + .mauticform-row.mauticform-half {
  margin-top: 0;
}

/* Full-width fields */
.mauticform-row:not(.mauticform-half) {
  width: 100% !important;
  flex-basis: 100% !important;
}

@media (max-width: 600px) {
  .mauticform-row.mauticform-half {
    width: 100%;
    display: flex;
  }

  .mauticform-row.mauticform-half + .mauticform-row.mauticform-half {
    margin-left: 0;
  }
}

.mauticform-label {
  display: block;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-slate-700, #334155);
  margin-bottom: 0.375rem;
}

.mauticform-required .mauticform-label::after {
  content: " *";
  color: var(--color-error, #ef4444);
  font-weight: 600;
}

.mauticform-input,
.mauticform-textarea,
#mauticform_kontakt .mauticform-input,
#mauticform_kontakt .mauticform-textarea,
input.mauticform-input,
textarea.mauticform-textarea {
  width: 100% !important;
  padding: 0.875rem 1rem !important;
  font-size: 1rem !important;
  font-family: inherit !important;
  color: var(--color-slate-900, #0f172a) !important;
  background-color: #fff !important;
  border: 2px solid var(--color-slate-300, #cbd5e1) !important;
  border-radius: var(--radius-md, 12px) !important;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease !important;
  outline: none !important;
  box-sizing: border-box !important;
}

.mauticform-input:hover,
.mauticform-textarea:hover,
#mauticform_kontakt .mauticform-input:hover,
#mauticform_kontakt .mauticform-textarea:hover {
  border-color: var(--color-slate-500, #64748b) !important;
}

.mauticform-input:focus,
.mauticform-textarea:focus,
#mauticform_kontakt .mauticform-input:focus,
#mauticform_kontakt .mauticform-textarea:focus {
  border-color: var(--color-blue, #056eff) !important;
  box-shadow: 0 0 0 3px rgba(5, 110, 255, 0.15) !important;
}

.mauticform-input::placeholder,
.mauticform-textarea::placeholder {
  color: var(--color-slate-500, #64748b);
}

.mauticform-textarea {
  min-height: 120px;
  resize: vertical;
}

.mauticform-errormsg {
  display: none;
  font-size: 0.875rem;
  color: var(--color-error, #ef4444);
  margin-top: 0.375rem;
  padding-left: 0.25rem;
}

.mauticform-has-error .mauticform-errormsg {
  display: block;
}

.mauticform-has-error .mauticform-input,
.mauticform-has-error .mauticform-textarea {
  border-color: var(--color-error, #ef4444);
  background-color: rgba(239, 68, 68, 0.03);
}

.mauticform-has-error .mauticform-input:focus,
.mauticform-has-error .mauticform-textarea:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

/* Checkbox Styling */
.mauticform-checkboxgrp-row,
.mauticform-radiogrp-row {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  cursor: pointer;
}

.mauticform-checkboxgrp-row label,
.mauticform-radiogrp-row label {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  cursor: pointer;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--color-slate-700, #334155);
}

.mauticform-checkboxgrp-row input[type="checkbox"],
.mauticform-radiogrp-row input[type="radio"] {
  position: static !important;
  opacity: 1 !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px;
  /* margin: 0; */
  margin-top: 9px !important;
  cursor: pointer;
  accent-color: var(--color-blue, #056eff);
  flex-shrink: 0;
}

.mauticform-checkboxgrp-row input[type="checkbox"]:focus,
.mauticform-radiogrp-row input[type="radio"]:focus {
  outline: 2px solid var(--color-blue, #056eff);
  outline-offset: 2px;
}

.mauticform-button-wrapper {
  margin-top: 1.75rem;
  justify-content: flex-start;
  align-items: flex-start;
}

.mauticform-button,
#mauticform_kontakt .mauticform-button,
button.mauticform-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 200px !important;
  padding: 1rem 2rem !important;
  font-family: inherit !important;
  font-size: 1.0625rem !important;
  font-weight: 600 !important;
  color: #fff !important;
  background-color: var(--color-blue, #056eff) !important;
  border: 2px solid var(--color-blue, #056eff) !important;
  border-radius: var(--radius-button, 25px) !important;
  cursor: pointer !important;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.15s ease !important;
}

.mauticform-button:hover,
#mauticform_kontakt .mauticform-button:hover,
button.mauticform-button:hover {
  background-color: var(--color-blue-dark, #0455cc) !important;
  border-color: var(--color-blue-dark, #0455cc) !important;
}

.mauticform-button:active {
  transform: scale(0.98);
}

.mauticform-button:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px var(--color-blue, #056eff);
}

.mauticform-message {
  padding: 1rem;
  border-radius: var(--radius-md, 12px);
  font-size: 0.9375rem;
}

.mauticform-message.mauticform-message-success {
  background-color: rgba(34, 197, 94, 0.1);
  color: var(--color-success, #22c55e);
  border: 1px solid var(--color-success, #22c55e);
}

.mauticform-message.mauticform-message-error {
  background-color: rgba(239, 68, 68, 0.1);
  color: var(--color-error, #ef4444);
  border: 1px solid var(--color-error, #ef4444);
}

@media (min-width: 768px) {
  .mauticform-button {
    width: auto;
    min-width: 200px;
  }
}

/* SEO FAQ Box */
.seo-faq-box {
  background-color: #f5f5f5;
  padding: 40px;
  border-radius: 8px;
}

.seo-faq-box h3 {
  color: #0f172a;
  font-weight: 700;
}

/* ============================================
   SERVICE CATEGORY LABEL
   Clean headline for service category sections
   Used on: brand-marketing (Unsere Services grid)
   ============================================ */
.kp-service-label,
h4.kp-service-label {
  display: block;
  font-size: 1.125rem;
  font-weight: 700 !important;
  color: var(--kp-dark, #0f172a);
  margin-bottom: var(--space-md, 16px);
  line-height: 1.3;
}

/* ============================================
   GLOBAL BOX SIZING RESET
   Fixes clipping and overflow issues
   ============================================ */
*, :after, :before {
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
}

/* ============================================
   BLOG META TAGS FIX
   Clean tags without pseudo-element hacks
   ============================================ */
.blog-meta-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
    height: auto !important;
    overflow: visible !important;
}

.blog-meta-tag {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: static !important;
    background-color: #f6f6f6 !important;
    color: #056eff !important;
    padding: 6px 12px !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.6 !important;
    white-space: nowrap !important;
    height: auto !important;
    min-height: 28px !important;
    margin: 0 !important;
    width: auto !important;
    overflow: visible !important;
}

/* Disable existing theme hacks for tags */
.blog-meta-tags > span:after,
[class*="blog-post-box"] .blog-meta-tags > span:after {
    content: none !important;
    display: none !important;
}

/* ============================================
   PARK BUTTON SYSTEM
   New collision-free button classes
   ============================================ */

.park-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.875rem 2.5rem !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.25;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius-button, 25px) !important;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}

.park-btn:focus-visible {
  outline: 3px solid rgba(5, 110, 255, 0.5);
  outline-offset: 2px;
}

.park-btn:active {
  transform: scale(0.98);
}

.park-btn svg {
  flex-shrink: 0;
  width: 13px;
  height: 11px;
  transition: transform 0.25s ease;
  fill: currentColor;
}

.park-btn:hover svg {
  transform: translateX(4px);
}

.park-btn-secondary,
.park-btn-secondary:link,
.park-btn-secondary:visited {
  background-color: transparent;
  border-color: var(--color-slate-900, #0F172A);
  color: var(--color-slate-900, #0F172A);
  text-decoration: none !important;
  font-weight: 700 !important;
}

.park-btn-secondary:hover {
  background-color: var(--color-slate-900, #0F172A);
  border-color: var(--color-slate-900, #0F172A);
  color: #fff !important;
  text-decoration: none !important;
}

.park-btn-secondary:hover svg,
.park-btn-secondary:hover svg path {
  fill: #fff !important;
  stroke: #fff !important;
}

.park-btn-secondary:active {
  background-color: #1e293b;
  border-color: #1e293b;
}

.park-btn-secondary-white,
.park-btn-secondary-white:link,
.park-btn-secondary-white:visited {
  background-color: transparent;
  border-color: #fff;
  color: #fff;
  text-decoration: none !important;
  font-weight: 700 !important;
}

.park-btn-secondary-white:hover {
  background-color: #fff;
  border-color: #fff;
  color: var(--color-slate-900, #0F172A) !important;
  text-decoration: none !important;
}

.park-btn-secondary-white:hover svg,
.park-btn-secondary-white:hover svg path {
  fill: var(--color-slate-900, #0F172A) !important;
  stroke: var(--color-slate-900, #0F172A) !important;
}

.park-btn-secondary-white:active {
  background-color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.9);
}

/* ==========================================================================
   FAQ Component (.park-faq)
   ========================================================================== */

.park-faq {
    max-width: 900px;
    margin: 0 auto;
}

.park-faq__item {
    border-bottom: 1px solid var(--color-slate-300, #e2e8f0);
}

.park-faq__item:first-child {
    border-top: 1px solid var(--color-slate-300, #e2e8f0);
}

.park-faq__question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--color-slate-900, #0f172a);
    transition: color 0.2s ease;
}

.park-faq__question:hover {
    color: var(--color-blue, #056EFF);
}

.park-faq__icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-left: 24px;
    position: relative;
}

.park-faq__icon::before,
.park-faq__icon::after {
    content: '';
    position: absolute;
    background: currentColor;
    transition: transform 0.3s ease;
}

.park-faq__icon::before {
    width: 2px;
    height: 16px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.park-faq__icon::after {
    width: 16px;
    height: 2px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.park-faq__item.is-open .park-faq__icon::before {
    transform: translate(-50%, -50%) rotate(90deg);
}

.park-faq__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.park-faq__answer-inner {
    padding-bottom: 24px;
    color: var(--color-slate-700, #334155);
    line-height: 1.7;
}

.park-faq__item.is-open .park-faq__answer {
    max-height: 500px;
}

@media (max-width: 767px) {
    .park-faq__question {
        padding: 20px 0;
        font-size: 1rem;
    }

    .park-faq__icon {
        width: 20px;
        height: 20px;
        margin-left: 16px;
    }
}

/* ============================================
   PARK-CONTACT - Contact Section Component
   Reusable contact form section with gray background
   ============================================ */

.park-contact {
    background-color: #f6f6f6;
}

.park-contact__inner {
    padding: 80px 0;
}

.park-contact .park-contact__title {
    font-size: 3rem;
    font-weight: 700;
    color: #0F172A;
    line-height: 1.2;
    margin-bottom: 16px;
}

.park-contact .park-contact__subtitle {
    font-size: 1.35rem;
    color: var(--color-slate-700, #334155);
    line-height: 1.3;
    margin-bottom: 32px;
}

.park-contact .park-contact__person-label {
    font-size: 1.8rem;
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 24px;
    text-align: left;
}

.park-contact__person {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.park-contact__person-image {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.park-contact__person-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.park-contact__person-name {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--color-slate-900, #0F172A);
}

.park-contact__person-phone {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    color: var(--color-slate-700, #334155);
}

.park-contact__person-phone img {
    width: 22px;
    height: 22px;
}

@media (max-width: 991px) {
    .park-contact__inner {
        padding: 60px 0;
    }

    .park-contact__title {
        margin-bottom: 12px;
    }

    .park-contact__subtitle {
        margin-bottom: 24px;
    }

    .park-contact__person-image {
        width: 100px;
        height: 100px;
    }
}

@media (max-width: 767px) {
    .park-contact__inner {
        padding: 48px 0;
    }

    .park-contact__person {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}