.elementor-kit-8{--e-global-color-primary:#3B82F6;--e-global-color-secondary:#A78BFA;--e-global-color-text:#E4E4E7;--e-global-color-accent:#10B981;--e-global-color-bd2ea9f:#09090B;--e-global-color-b200b33:#18181B;--e-global-color-624ab45:#27272A;--e-global-color-d807b24:#A1A1AA;--e-global-color-d982be5:#FFFFFF0F;--e-global-color-12c44d6:#FFFFFF0A;--e-global-color-ba28c4b:#F59E0B;--e-global-color-917d870:#18181B4D;background-color:#09090B;}.elementor-kit-8 e-page-transition{background-color:var( --e-global-color-d982be5 );}.site-footer{background-color:var( --e-global-color-bd2ea9f );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1152px;}.e-con{--container-max-width:1152px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .footer-inner{width:1152px;max-width:100%;}footer .footer-inner .site-navigation a{font-family:"Inter", Sans-serif;font-size:12px;font-weight:500;}@media(max-width:1280px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1152px;}.e-con{--container-max-width:1152px;}}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:100%;}.e-con{--container-max-width:100%;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:100%;}.e-con{--container-max-width:100%;}}/* Start custom CSS *//* =========================================================
   VERITY – GLOBAL CSS (CLEAN + SMOOTH REVEAL)
   Base + Utilities + Reveal + Hover System
   Header Glass + CTA
   Mobile Nested Menu (PHONE ONLY)
========================================================= */

/* =========================
   Base / Tokens
========================= */
:root{
  --mouse-x: 50%;
  --mouse-y: 50%;
  --header-h: 72px;
}
html{ scroll-padding-top: var(--header-h); }
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:#09090B;
  color:#E4E4E7;
  overflow-x:hidden;
}
::selection{ background: rgba(59,130,246,.30); color:#fff; }

/* Scrollbar */
::-webkit-scrollbar{ width:6px; }
::-webkit-scrollbar-track{ background:#09090B; }
::-webkit-scrollbar-thumb{ background:#27272A; border-radius:3px; }

/* =========================
   Utilities
========================= */
.font-quicksand{ font-family: Quicksand, system-ui, sans-serif !important; }
.text-gradient{
  background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-image: linear-gradient(135deg, #3B82F6, #818CF8, #A78BFA);
}
.maxw-520{ max-width:520px; }
.intro-672{
  max-width: 672px;
  margin-right: auto;
  margin-left: 0;
}

/* =========================
   Reveal Animation System
========================= */
.reveal-hidden{
  opacity:0;
  transform: translate3d(0,24px,0);
  filter: blur(4px);
  transition-property: opacity, transform, filter;
  transition-duration: 900ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, filter;
}
.reveal-visible{
  opacity:1;
  transform: translate3d(0,0,0);
  filter: blur(0);
}

/* Delays */
.delay-100{ transition-delay:100ms !important; }
.delay-200{ transition-delay:200ms !important; }
.delay-300{ transition-delay:300ms !important; }
.delay-400{ transition-delay:400ms !important; }

/* Elementor Editor FIX */
body.elementor-editor-active .reveal-hidden{
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
  transition: none !important;
}

/* =========================
   Overlays
========================= */
.gaze-spotlight{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background: radial-gradient(
    600px circle at var(--mouse-x) var(--mouse-y),
    rgba(59,130,246,0.03),
    transparent 40%
  );
}
.noise-overlay{
  position:fixed;
  inset:0;
  z-index:50;
  opacity:0.025;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body.elementor-editor-active .gaze-spotlight,
body.elementor-editor-active .noise-overlay{
  display:none !important;
}

/* =========================
   Card Hover – Prototype (Header-CTA geschützt)
========================= */
.card-hover{
  position: relative;
  isolation: isolate;
}

/* Hover-Transition NUR für echte Cards */
.card-hover:not(.reveal-hidden):not(.nav-cta),
.card-hover.reveal-visible:not(.nav-cta){
  transition-property: transform;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4,0,0.2,1);
}

.card-hover:hover{
  transform: translateY(-2px);
}

/* Standard Glow (wird bei Ratgeber-Cards überschrieben) */
.card-hover::after{
  content:"";
  position:absolute;
  inset:0;
  border: 1px solid transparent;
  border-radius: inherit;
  pointer-events:none;
  transition:
    border-color 300ms cubic-bezier(0.4,0,0.2,1),
    box-shadow 300ms cubic-bezier(0.4,0,0.2,1);
}
.card-hover:hover::after{
  border-color: rgba(59,130,246,0.30);
  box-shadow:
    0 0 0 1px rgba(59,130,246,0.18),
    0 0 24px rgba(59,130,246,0.10);
}

/* =========================
   Header Glass + NAV CTA
========================= */
.glass-panel{
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 9999;
}

.logo-sm{ display:block; }
.logo-md{ display:none; }
@media (min-width: 640px){
  .logo-sm{ display:none; }
  .logo-md{ display:block; }
}

/* NAV CTA */
.nav-cta .elementor-button,
.elementor-nav-menu .nav-cta > a,
a.nav-cta{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px 20px;
  border-radius:8px;
  overflow:hidden;
  isolation:isolate;
  text-decoration:none !important;
  color:#fff !important;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-size:14px;
  font-weight:500;
  letter-spacing:-0.01em;
  background:transparent;
  border:0;
  box-shadow: 0 0 20px -5px rgba(59,130,246,0.50);
  cursor:pointer;
  transition:
    transform 700ms cubic-bezier(.16,1,.3,1),
    box-shadow 650ms cubic-bezier(.16,1,.3,1);
}

.nav-cta .elementor-button::before,
.elementor-nav-menu .nav-cta > a::before,
a.nav-cta::before{
  content:"";
  position:absolute;
  inset:-600%;
  z-index:0;
  background: conic-gradient(
    from 90deg at 50% 50%,
    #3B82F6 0%,
    #9333EA 50%,
    #3B82F6 100%
  );
  animation: navCtaSpin 3s linear infinite;
}

.nav-cta .elementor-button::after,
.elementor-nav-menu .nav-cta > a::after,
a.nav-cta::after{
  content:"";
  position:absolute;
  inset:1px;
  z-index:1;
  border-radius:7px;
  background: rgba(24,24,27,0.95);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 0 25px rgba(59,130,246,0.50);
  backdrop-filter: blur(64px);
  -webkit-backdrop-filter: blur(64px);
  pointer-events:none;
  transition:
    background-color 480ms cubic-bezier(.16,1,.3,1),
    box-shadow 700ms cubic-bezier(.16,1,.3,1);
}

.nav-cta .elementor-button *,
.elementor-nav-menu .nav-cta > a *,
a.nav-cta > *{
  position:relative;
  z-index:2;
}

.nav-cta .elementor-button:hover,
.elementor-nav-menu .nav-cta > a:hover,
a.nav-cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 0 30px -5px rgba(147,51,234,0.60);
}

.nav-cta .elementor-button:hover::after,
.elementor-nav-menu .nav-cta > a:hover::after,
a.nav-cta:hover::after{
  background: rgba(39,39,42,0.95);
  box-shadow: 0 0 35px rgba(147,51,234,0.60);
}

.nav-cta .elementor-button:focus-visible,
.elementor-nav-menu .nav-cta > a:focus-visible,
a.nav-cta:focus-visible{
  outline: 2px solid rgba(59,130,246,0.65);
  outline-offset: 2px;
}

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

@media (prefers-reduced-motion: reduce){
  .nav-cta .elementor-button::before,
  .elementor-nav-menu .nav-cta > a::before,
  a.nav-cta::before{
    animation: none !important;
  }
}
body.elementor-editor-active .nav-cta .elementor-button::before,
body.elementor-editor-active .elementor-nav-menu .nav-cta > a::before,
body.elementor-editor-active a.nav-cta::before{
  animation: none !important;
}

@media (max-width: 639px){
  .nav-cta{ display:none !important; }
}

/* =========================
   Leistungen Tiles Hover
========================= */
.leistungen-cards .card-hover .elementor-heading-title{
  transition: color 200ms ease;
}
.leistungen-cards .card-hover:hover .elementor-heading-title{
  color:#3B82F6 !important;
}
.leistungen-cards .tile-arrow,
.leistungen-cards .tile-arrow .elementor-icon,
.leistungen-cards .tile-arrow .elementor-icon-wrapper{
  color:#3f3f46 !important;
  transition: color 200ms ease, transform 200ms ease;
}
.leistungen-cards .card-hover:hover .tile-arrow,
.leistungen-cards .card-hover:hover .tile-arrow .elementor-icon,
.leistungen-cards .card-hover:hover .tile-arrow .elementor-icon-wrapper{
  color:#3B82F6 !important;
  transform: translate(1px,-1px);
}

/* =========================
   MOBILE MENU
========================= */
@media (max-width: 767px){
  .mobile-nav button[id^="menu-toggle-"],
  .mobile-nav .e-n-menu-toggle{
    width: 36px !important;
    height: 36px !important;
    padding: 8px !important;
    border-radius: 8px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  .mobile-nav button[id^="menu-toggle-"]:hover,
  .mobile-nav .e-n-menu-toggle:hover{
    background: rgba(255,255,255,0.05) !important;
  }
  .mobile-nav .e-n-menu-wrapper,
  .e-n-menu-wrapper[aria-labelledby^="menu-toggle-"]{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: var(--header-h) !important;
    width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;
    max-height: calc(100vh - var(--header-h)) !important;
    overflow-y: auto !important;
    padding: 16px 24px !important;
    background: rgba(9,9,11,0.95) !important;
    border-top: 1px solid rgba(255,255,255,0.05) !important;
    box-shadow: none !important;
    z-index: 99999 !important;
    --stretch-width: 100vw !important;
    --stretch-left: 0px !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .mobile-nav .e-n-menu-heading,
  .e-n-menu-wrapper[aria-labelledby^="menu-toggle-"] .e-n-menu-heading{
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .mobile-nav .e-n-menu-item,
  .mobile-nav .e-n-menu-title,
  .e-n-menu-wrapper[aria-labelledby^="menu-toggle-"] .e-n-menu-item,
  .e-n-menu-wrapper[aria-labelledby^="menu-toggle-"] .e-n-menu-title{
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  .mobile-nav .e-n-menu-title-container,
  .e-n-menu-wrapper[aria-labelledby^="menu-toggle-"] .e-n-menu-title-container{
    display: block !important;
    padding: 6px 0 !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    color: #A1A1AA !important;
    -webkit-text-fill-color: #A1A1AA !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    transition: color 200ms ease !important;
  }
  .mobile-nav .e-n-menu-title-text{
    background: transparent !important;
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
  }
  .mobile-nav .e-n-menu-title-container::before,
  .mobile-nav .e-n-menu-title-container::after,
  .mobile-nav .e-n-menu-title::before,
  .mobile-nav .e-n-menu-title::after{
    content: none !important;
  }
  .mobile-nav .e-n-menu-title-container:hover,
  .mobile-nav .e-n-menu-title-container:focus{
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: transparent !important;
  }
  .mobile-nav .e-n-menu-title-container[data-focus-index="6"],
  .mobile-nav .e-n-menu-title-container[data-focus-index="6"] .e-n-menu-title-text,
  .mobile-nav .e-n-menu-title-container[href*="/kontakt"],
  .mobile-nav .e-n-menu-title-container[href*="/kontakt"] .e-n-menu-title-text{
    color: #3B82F6 !important;
    -webkit-text-fill-color: #3B82F6 !important;
    font-weight: 500 !important;
  }
  .mobile-nav .e-n-menu-title-container[data-focus-index="6"]:hover,
  .mobile-nav .e-n-menu-title-container[data-focus-index="6"]:hover .e-n-menu-title-text{
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
  }
}

/* =========================
   Reusable Fixes + CTA Form
========================= */
.step-icon{
  width:32px !important;
  height:32px !important;
  min-height:32px !important;
  flex: 0 0 32px !important;
  border-radius:999px !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
}
.step-icon .elementor-icon-wrapper,
.step-icon .elementor-icon{
  line-height:1 !important;
}
.about-pill p{ margin: 0 !important; }
.about-pill .elementor-widget-text-editor p{ line-height: 1.4 !important; }

.cta-inner{ max-width:576px; margin-left:auto; margin-right:auto; }
.cta-form label{
  display:block;
  margin-bottom:6px;
  font-size:12px;
  font-weight:400;
  color:#71717A;
}
.cta-form input[type="text"],
.cta-form input[type="email"],
.cta-form input[type="url"],
.cta-form select,
.cta-form textarea{
  width:100% !important;
  background:#09090B !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,0.08) !important;
  border-radius:8px !important;
  padding:10px 14px !important;
  font-size:14px !important;
  outline:none !important;
  box-shadow:none !important;
}
.cta-form textarea{ resize:none; }
.cta-form ::placeholder{ color:#3f3f46 !important; opacity:1; }
.cta-form input:focus,
.cta-form select:focus,
.cta-form textarea:focus{
  border-color:#3B82F6 !important;
  box-shadow:0 0 0 1px #3B82F6 !important;
}
.cta-form button[type="submit"],
.cta-form input[type="submit"]{
  width:100% !important;
  background:#3B82F6 !important;
  color:#fff !important;
  border:none !important;
  border-radius:8px !important;
  padding:12px 16px !important;
  font-size:14px !important;
  font-weight:400 !important;
  cursor:pointer;
  transition: background-color 200ms ease, box-shadow 200ms ease;
  box-shadow: 0 10px 25px rgba(30,58,138,0.15);
}
.cta-form button[type="submit"]:hover,
.cta-form input[type="submit"]:hover{
  background:#2563EB !important;
  box-shadow: 0 12px 30px rgba(30,58,138,0.30);
}

/* =========================
   SCOPE CHECK – Divider
========================= */
.scope-check{
  position: relative;
}
.scope-check .prozess-divider-scope{
  position: absolute;
  top: 28px;
  left: 8%;
  right: 8%;
  height: 1px;
  background: rgba(255,255,255,0.05);
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.scope-check .prozess-divider-scope::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(59,130,246,0) 20%,
    rgba(59,130,246,0.40) 50%,
    rgba(147,51,234,0.40) 80%,
    transparent 100%
  );
  width: 30%;
  animation: scopeDividerFlow 4s cubic-bezier(0.4,0,0.2,1) infinite;
}
@keyframes scopeDividerFlow{
  0% { transform: translateX(-150%); }
  100% { transform: translateX(400%); }
}
@media (max-width: 1024px){
  .scope-check .prozess-divider-scope{ left: 8%; right: 8%; }
}
@media (max-width: 767px){
  .scope-check .prozess-divider-scope{ left: 6%; right: 6%; top: 22px; }
}
body.elementor-editor-active .scope-check .prozess-divider-scope::after{
  animation: none !important;
  background: rgba(59,130,246,0.20);
}
.scope-check .scope-grid{
  position: relative;
  z-index: 1;
}

/* =========================
   RATGEBER – Dynamic Accent System
========================= */
.ratgeber-card{ --accent:#3B82F6; --accent-rgb:59,130,246; }

.ratgeber-card.is-blue   { --accent:#3B82F6; --accent-rgb:59,130,246; }
.ratgeber-card.is-purple { --accent:#9333EA; --accent-rgb:147,51,234; }
.ratgeber-card.is-amber  { --accent:#F59E0B; --accent-rgb:245,158,11; }
.ratgeber-card.is-green  { --accent:#10B981; --accent-rgb:16,185,129; }
.ratgeber-card.is-red    { --accent:#EF4444; --accent-rgb:239,68,68; }

/* Icon-Box & Headlines Transition */
.ratgeber-card .ratgeber-icon,
.ratgeber-card .elementor-heading-title,
.ratgeber-card .guide-cta {
    transition: all 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* HOVER STATE: Die Magie */

/* 1. Headline färben */
.ratgeber-card:hover .elementor-heading-title {
    color: var(--accent) !important;
}

/* 2. Icon-Hintergrund verstärken & skalieren */
.ratgeber-card:hover .ratgeber-icon {
    background: rgba(var(--accent-rgb), 0.20) !important;
    transform: scale(1.05);
}

/* 3. CTA (Link + Icon) färben */
.ratgeber-card:hover .guide-cta,
.ratgeber-card:hover .guide-cta iconify-icon,
.ratgeber-card:hover .guide-cta .elementor-icon {
    color: var(--accent) !important;
}

/* 4. Glow-Effekt (übernimmt Accent-Farbe) */
.ratgeber-card.card-hover:hover::after {
    border-color: rgba(var(--accent-rgb), 0.30) !important;
    box-shadow: 
        0 0 0 1px rgba(var(--accent-rgb), 0.18),
        0 0 24px rgba(var(--accent-rgb), 0.10) !important;
}

/* Erzwungener Farbwechsel für alle Varianten */
.ratgeber-card .guide-cta * {
    transition: color 300ms ease !important;
}

.ratgeber-card:hover .guide-cta * {
    color: var(--accent) !important;
    -webkit-text-fill-color: var(--accent) !important; /* Wichtig für Safari */
}

/* CTA färbt Text + Icon gemeinsam */
.ratgeber-card .ratgeber-cta{
  color: #fff;
  transition: color 300ms cubic-bezier(.16,1,.3,1);
}
.ratgeber-card:hover .ratgeber-cta{
  color: var(--accent) !important;
}

/* Elementor Icon Widget: zwinge SVG auf currentColor */
.ratgeber-card .ratgeber-cta .elementor-icon{
  color: inherit !important;
}

/* Line-Icons (stroke) */
.ratgeber-card .ratgeber-cta .elementor-icon svg *,
.ratgeber-card .ratgeber-cta .elementor-icon svg{
  stroke: currentColor !important;
}

/* Falls dein Pfeil Flächen füllt (fill) */
.ratgeber-card .ratgeber-cta .elementor-icon svg [fill]:not([fill="none"]){
  fill: currentColor !important;
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: auto;
	src: url('https://verity-webdesign.com/wp-content/uploads/2026/02/Inter_18pt-Regular-1.ttf') format('truetype');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	font-display: auto;
	src: url('https://verity-webdesign.com/wp-content/uploads/2026/02/Inter_18pt-Medium-1.ttf') format('truetype');
}
/* End Custom Fonts CSS */