/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/
Description: Child Theme for Hello Elementor.
Author: Your Name
Author URI: https://example.com/
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/


/* === Quform=== */


/* Success Message */

.quform-success-message {
	background-color: transparent;
	border-left: none;
	color: inherit;
	padding: 1.5rem 1rem 1rem 1rem;
	margin: 0;
	max-width: 40rem;
	animation: successFadeIn 0.4s ease;
}

@keyframes successFadeIn {
	from {
		opacity: 0;
		transform: translateY(0.5rem);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
 /*
.quform-success-message::before {
	content: "✓";
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin: 0 0 1rem 0;
	border-radius: 50%;
	background: #2b3655;
	color: #ffffff;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1;
}
*/

@media (min-width: 48rem) {
	.quform-success-message-icon {
    position: absolute;
    left: 1px;
    top: 0;
	margin-right: 5rem;
    margin-top: -15px;
    height: 60px;
    line-height: 60px;
}
   .quform-success-message-icon .fa {
	   color: #2b3655;
	   font: normal normal normal 32px / 1 FontAwesome;
   }
	.quform-success-message {}
}

@media (max-width: 47.9375rem) {
	.quform-success-message {
		padding: 1rem 0;
		margin-left: 0;}
	.quform-success-message-icon {display: none;}
}

/* Progress Tabs */
.quform.quform-1 .quform-page-progress {
	margin-bottom: 1rem !important;
}

.quform.quform-1 .quform-page-progress-tabs {
	display: flex !important;
	gap: 0.375rem;
	width: 100%;
	align-items: center;
}

.quform.quform-1 .quform-page-progress-tab {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	min-height: 1.875rem;
	padding: 0.3125rem 0.5rem;
	border-radius: 999rem;
	background: rgba(45, 60, 106, 0.035);
	border: 0.0625rem solid rgba(45, 60, 106, 0.08);
	font-size: 0.75rem;
	color: rgba(45, 60, 106, 0.7);
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
	box-sizing: border-box;
	white-space: nowrap;
	overflow: hidden;
	cursor: default;
	user-select: none;
}

.quform.quform-1 .quform-page-progress-tab.is-hidden {
	display: none !important;
}

.quform.quform-1 .quform-page-progress-tab.is-complete {
	background: rgba(45, 60, 106, 0.06);
	border-color: rgba(45, 60, 106, 0.14);
	color: rgba(45, 60, 106, 0.9);
}

.quform.quform-1 .quform-page-progress-tab.quform-current-tab {
	background: rgba(45, 60, 106, 0.095);
	border-color: rgba(45, 60, 106, 0.2);
	color: #2d3c6a;
}

.quform.quform-1 .quform-page-progress-tab.is-future {
	opacity: 0.58;
}

.quform.quform-1 .quform-page-progress-tab.is-clickable {
	cursor: pointer;
}

.quform.quform-1 .quform-page-progress-tab.is-clickable:hover {
	background: rgba(45, 60, 106, 0.075);
	border-color: rgba(45, 60, 106, 0.16);
}

.quform.quform-1 .quform-step-dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1rem;
	height: 1rem;
	min-width: 1rem;
	margin-right: 0.3125rem;
	border-radius: 50%;
	background: rgba(45, 60, 106, 0.1);
	font-size: 0.625rem;
	font-weight: 700;
	line-height: 1;
}

.quform.quform-1 .quform-current-tab .quform-step-dot,
.quform.quform-1 .quform-page-progress-tab.is-complete .quform-step-dot {
	background: rgba(45, 60, 106, 0.16);
}

.quform.quform-1 .quform-step-text {
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	line-height: 1;
	vertical-align: middle;
}

/* Buttons: Text optisch exakt zentrieren, Icons separat positionieren */
.quform.quform-1 .quform-button-back > button,
.quform.quform-1 .quform-button-next > button,
.quform.quform-1 .quform-button-submit > button {
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	text-align: center !important;
}

.quform.quform-1 .quform-button-back .quform-button-text,
.quform.quform-1 .quform-button-next .quform-button-text,
.quform.quform-1 .quform-button-submit .quform-button-text {
	display: block !important;
	width: 100% !important;
	text-align: center !important;
	line-height: 1.2 !important;
	padding-left: 1.75rem !important;
	padding-right: 1.75rem !important;
	box-sizing: border-box !important;
}

.quform.quform-1 .quform-button-back .quform-button-icon,
.quform.quform-1 .quform-button-next .quform-button-icon,
.quform.quform-1 .quform-button-submit .quform-button-icon {
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 1 !important;
	pointer-events: none !important;
}

.quform.quform-1 .quform-button-back .quform-button-icon {
	left: 0.875rem !important;
}

.quform.quform-1 .quform-button-next .quform-button-icon,
.quform.quform-1 .quform-button-submit .quform-button-icon {
	right: 0.875rem !important;
}



/* Mobile: nur Zahlen anzeigen */
@media (max-width: 47.9375rem) {
	.quform.quform-1 .quform-page-progress-tabs {
		gap: 0.25rem;
	}

	.quform.quform-1 .quform-page-progress-tab {
		min-height: 1.75rem;
		padding: 0.25rem 0.375rem;
	}

	.quform.quform-1 .quform-step-dot {
		margin-right: 0 !important;
	}

	.quform.quform-1 .quform-step-text {
		display: none !important;
	}
}


/* ============================================================
   1) Design Tokens
============================================================ */
:root,
.elementor-kit-9{

  /* Colors */
  --c-primary: #2b3655;
  --c-soft: #F6F7F8;
  --c-white: #ffffff;

  /* Typography */
  --font-body: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-head: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Elementor Global Typography Overrides */
  --e-global-typography-0476085-font-size: 1rem;
  --e-global-typography-0476085-line-height: 1.5em;
  --e-global-typography-0476085-letter-spacing: 0;

  /* Layout */
  --container-max: 80rem;         
  --gutter: 1.25rem;              
  --section-py-lg: 5rem;
  --section-py-md: 3rem;
  --section-py-sm: 2rem;

  /* Radius */
  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;

  /* Shadows */
  --shadow-card: 0 0.125rem 0.5rem rgba(0,0,0,0.05), 0 0.75rem 2rem rgba(0,0,0,0.06);
  --shadow-card-hover: 0 0.25rem 0.75rem rgba(0,0,0,0.06), 0 1rem 2.25rem rgba(0,0,0,0.08);
  --shadow-header: 0 0.75rem 2rem rgba(0,0,0,0.10);

  /* Focus */
  --focus-ring: 0 0 0 0.1875rem rgba(43, 54, 85, 0.20);
}


/* ============================================================
   2) Base / Global
============================================================ */
html{
  font-size: 100%;
}

body{
  margin: 0;
  padding: 0;
  color: var(--c-primary);
  font-family: var(--font-body);
}

/* Links */
a{
  color: inherit;
  text-decoration: none;
}

a:focus-visible{
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* Optional utility container */
.wp-container{
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}


/* ============================================================
   3) Sections
============================================================ */
.section{
  padding-top: var(--section-py-lg);
  padding-bottom: var(--section-py-lg);
}

@media (max-width: 64rem){
  .section{
    padding-top: var(--section-py-md);
    padding-bottom: var(--section-py-md);
  }
}

@media (max-width: 47.9375rem){
  .section{
    padding-top: var(--section-py-sm);
    padding-bottom: var(--section-py-sm);
  }
}


/* ============================================================
   4) Sticky Header
============================================================ */
.site-header{
  transition: box-shadow 200ms ease;
}

.site-header.sticky-enhanced{
  box-shadow: var(--shadow-header);
  backdrop-filter: saturate(1.02);
}

@media all and (max-width: 1024px) {
	.site-header {box-shadow: var(--shadow-header);}
	}


/* ============================================================
   5) HERO
============================================================ */

@media (min-width: 80rem) {

  .left-hero{
    padding-left: calc((100vw - 1280px) / 2);
    padding-top: 4rem;
    padding-bottom: 4rem;
    padding-right: 4rem;
  }

}

/* Basis */
.right-hero{
  position: relative;
  overflow: hidden;
}

/* Gradient Layer */
.right-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 60% at 75% 25%, rgba(255,255,255,0.08), rgba(255,255,255,0.00) 70%),
    radial-gradient(50% 50% at 20% 80%, rgba(255,255,255,0.05), rgba(255,255,255,0.00) 70%);
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
}

/* Hintergrund-Wording */
.right-hero::after{
  content: "STRUKTUR";
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  font-family: var(--font-head);
  font-size: 7.5rem;
  font-weight: 700;
  color: rgba(255,255,255,0.02);
  letter-spacing: 0.05em;
  line-height: 1;
  pointer-events: none;
  z-index: 1;
}

.right-hero.letsgo::after {content: 'LET’S GO';}
.right-hero.idea::after {content: 'IDEA';}
.right-hero.webdesign::after {content: "BE DESIGN";}
.right-hero.website::after {content: "WEBSITE";}
.right-hero.performance::after{content: "PERFORMANCE";}
.right-hero.seo::after{content: "SEO";}
.right-hero.shop::after{content: "SHOP";}

/* Hero Content über Layer */
.right-hero > *{
  position: relative;
  z-index: 2;
}


/* ============================================================
   Hero zusätzliche Typo Layer
============================================================ */

.right-hero .elementor-widget-icon-list{
  position: relative;
}

/* ÄSTHETIK */
.right-hero .elementor-widget-icon-list::before{
  content: "ÄSTHETIK";
  position: absolute;
  top: -3rem;
  left: 1.5rem;
  font-family: var(--font-head);
  font-size: 4.25rem;
  font-weight: 700;
  color: rgba(255,255,255,0.018);
  letter-spacing: 0.05em;
  line-height: 1;
  pointer-events: none;
  z-index: 1;
}


/* Mobile Anpassungen */

@media (max-width: 47.9375rem){

  .right-hero::after{
    font-size: 3rem;
    bottom: 1.25rem;
    right: 1.25rem;
    letter-spacing: 0.04em;
  }

  .right-hero .elementor-widget-icon-list::before{
    font-size: 2.5rem;
    top: -2rem;
    left: 1.25rem;
  }

  .right-hero .elementor-widget-icon-list::after{
    font-size: 2.25rem;
    left: 60%;
  }

}


/* ============================================================
   6) Buttons
============================================================ */

.elementor-button{
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.elementor-button:hover{
  box-shadow: 0 0.75rem 2rem rgba(0,0,0,0.12);
}


/* ============================================================
   7) Service Cards
============================================================ */

.service-card{
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 2.2vw, 2.25rem);
  background-color: var(--c-white);
  border: 0.0625rem solid rgba(43,54,85,0.10);
  box-shadow: var(--shadow-card);
  transition: box-shadow 180ms ease, border-color 180ms ease;
}

.service-card:hover{
  border-color: rgba(43,54,85,0.18);
  box-shadow: var(--shadow-card-hover);
}

.service-card > *{
  border-radius: inherit;
}


/* ============================================================
   8) Custom Lists
============================================================ */

.custom-list ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

.custom-list ul li{
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 1rem;
}

.custom-list ul li:last-child{
  margin-bottom: 0;
}

.custom-list ul li::before{
  content: '•';
  color: var(--c-primary);
  position: absolute;
  left: 0;
  top: 0;
  line-height: 1.6;
}

/* === Accordions === */
/* =========================================
   Elementor Nested Accordion – Hover + Active Text Color
   Ziel:
   - Hover auf die ganze Title-Bar (summary) färbt Text weiß
   - Open-State (details[open]) färbt Text weiß
========================================= */

/* 1) Hover: Wenn man irgendwo auf die SUMMARY/BOX hovert */
.e-n-accordion-item-title:hover .e-n-accordion-item-title-text,
.e-n-accordion-item-title:focus-visible .e-n-accordion-item-title-text{
  color: #ffffff !important;
}

/* 2) Active/Open: Wenn das <details> geöffnet ist */
.e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-text{
  color: #ffffff !important;
}

/* Optional (empfohlen): auch das H3 selbst absichern,
   falls Elementor direkt dem h3 eine Farbe gibt */
.e-n-accordion-item-title:hover .e-n-accordion-item-title-text,
.e-n-accordion-item-title:hover .e-n-accordion-item-title-text *{
  color: #ffffff !important;
}

.e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-text,
.e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-text *{
  color: #ffffff !important;
}

/* ============================================================
   Bild-Deko – Dot Matrix unten links
============================================================ */

.page-content img {
	border-radius: 2rem;
	box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.15);
}

.img-dots-bl{
  position: relative;
  display: inline-block;
}

.img-dots-bl::after{
  content: "";
  position: absolute;

  /* Position weiter nach unten und links */
  bottom: -4.2rem;
  left: -2.2rem;

  /* Fläche */
  width: 90px;
  height: 180px;

  /* echte Punkte */
  background-image: radial-gradient(circle, #e9e9e9 1px, transparent 1px);

  /* Punktabstand */
  background-size: 6px 6px;

  pointer-events: none;
  z-index: -1;
}

/* === Counter === */
@media all and (max-width: 767px) {
	.elementor-counter-title {text-align: center;}
	}

/* === Counter Ende === */


/* === Leistungen Slider === */
#leistungen .slider .left,
#leistungen .slider .right {}

.elementor-widget-n-carousel.elementor-element :is(.swiper, .swiper-container) ~ .elementor-swiper-button-prev,
.elementor-widget-n-carousel.elementor-element :is(.swiper, .swiper-container) ~ .elementor-swiper-button-next {
    border: 0.0625rem solid #2b3655;
    background:
        radial-gradient(60% 60% at 75% 25%, #2b3655, #384978 85%),
        radial-gradient(50% 50% at 20% 80%, #384978, #2b3655 85%);
    border-radius: 50%;
    padding: 1rem;
    transition: background 0.5s ease, border-color 0.5s ease, transform 0.5s ease;
}

.elementor-widget-n-carousel.elementor-element :is(.swiper, .swiper-container) ~ .elementor-swiper-button-prev {
    left: -2.5%;
}

.elementor-widget-n-carousel.elementor-element :is(.swiper, .swiper-container) ~ .elementor-swiper-button-next {
    right: -2.5%;
}

.elementor-widget-n-carousel.elementor-element :is(.swiper, .swiper-container) ~ .elementor-swiper-button-prev:hover,
.elementor-widget-n-carousel.elementor-element :is(.swiper, .swiper-container) ~ .elementor-swiper-button-next:hover {
    border-color: #283352;
    background:
        radial-gradient(60% 60% at 55% 75%, #2b3655, #384978 85%),
        radial-gradient(50% 50% at 80% 20%, #384978, #2b3655 85%);
		transform: translateY(-50%) scale(1.06);
}

/* === Quform === */

/*Headlines HTML*/
.quform-spacer h2 {
	font-family: var(--e-global-typography-01306bf-font-family), Sans-serif;
    font-size: var(--e-global-typography-01306bf-font-size);
    font-weight: var(--e-global-typography-01306bf-font-weight);
    line-height: var(--e-global-typography-01306bf-line-height);
    letter-spacing: var(--e-global-typography-01306bf-letter-spacing);
    color: var(--e-global-color-primary);
}

/*Tooltip*/
.custom-tooltip{
	background: var(--c-white);
	color: var(--e-global-color-text);
	border-radius: var(--radius-sm);
	border: none;
	padding: 1rem;
	box-shadow: var(--shadow-card);

	font-family: var(--font-body);
	font-weight: 400;
	font-size: 0.875rem;
	line-height: 1.4;
}


/*2 Spalten Zeilen*/
/* Desktop */
.quform-element-row.quform-2-columns {
	display: flex;
	align-items: center;
}

.quform-element-row.quform-2-columns > .quform-element-column{
	float: none;
	display: flex;
	flex-direction: column;
	justify-content: center;
}


/* Tablet / Mobile */
@media (max-width: 1024px){

	.quform-element-row.quform-2-columns{
		display: block;
	}

	.quform-element-row.quform-2-columns > .quform-element-column{
		display: block;
	}

}