/* ==========================================================================
HOME FAVORITEN SWIPER ANPASSUNG
========================================================================== */
.ce_image_text_box_v2 .image_container {
margin-bottom: 20px;
overflow: hidden;
border-radius: 30px;
position: relative;
z-index: 1;
transition: transform .8s cubic-bezier(.05, .2, .1, 1);
}

.image_container {
position: relative;
padding: 0;
line-height: 0;
}

.ce_image_text_box_v2:hover .image_container {
transform: scale(1.05);
}

/* 1. Resize the main container and adjust centering offset */
.ce_swiper-slider-start .circle {
    width: 60px !important;
    height: 60px !important;
    transform: translateX(-30px) translateY(-30px) scale(0.1) !important;
}

/* 2. Resize background and the flex wrapper (span) */
.ce_swiper-slider-start .circle .circle-bg,
.ce_swiper-slider-start .circle span {
    width: 60px !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 3. FIX: Reset the hardcoded margin that causes off-centering */
.ce_swiper-slider-start .circle span i {
    margin: 0 !important;
}

/* 4. Add a smaller, proportional gap between the arrows */
.ce_swiper-slider-start .circle span i.fa-angle-left {
    margin-right: 20px !important; /* Adjust this value for the gap width */
}

/* 5. Ensure the active hover state maintains centering */
.ce_swiper-slider-start:hover .circle {
    transform: translateX(-30px) translateY(-30px) scale(1) !important;
}

@media (min-width: 768px) and (max-width: 1024px) {
.ce_swiper-slider-start .swiper-wrapper .swiper-slide {
max-width: calc(33.333% - 17px) !important;
min-width: calc(33.333% - 17px) !important;
flex-shrink: 0 !important;
}

.ce_swiper-slider-start .swiper-wrapper {
display: flex !important;
}

.ce_swiper-slider-start .ce_image_text_box_v2 {
min-height: 100% !important;
height: auto !important;
}
}


/* Fancy-Boxes auf Tablet & Mobile Scrollbar machen */
@media (max-width: 991px) {
    .atropos-rotate-touch {
        touch-action: pan-y !important;
    }
}

/* ==========================================================================
PRODUKTKACHEL (Custom Element) - APPLE LIQUID GLASS EDITION
========================================================================== */

/* Der fließende Aurora-Hintergrund für die Sektion */
.bg-aurora {
background-color: #f0f4f8;
background-image:
radial-gradient(at 80% 0%, rgba(254, 228, 229, 0.8) 0px, transparent 50%),
radial-gradient(at 0% 50%, rgba(64, 208, 198, 0.15) 0px, transparent 50%),
radial-gradient(at 80% 100%, rgba(168, 182, 219, 0.4) 0px, transparent 50%),
radial-gradient(at 0% 0%, rgba(255, 255, 255, 0.8) 0px, transparent 50%);
background-size: 200% 200%;
animation: auroraMotion 30s ease-in-out infinite;
padding: 80px 0;
}

@keyframes auroraMotion {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}

/* 1. Die Kachel (Der Glas-Effekt) */
.product-tile {
position: relative;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.25) 100%);
background-color: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-top: 1px solid rgba(255, 255, 255, 0.8);
border-left: 1px solid rgba(255, 255, 255, 0.8);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
border-right: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 30px;
overflow: hidden;
transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease, background 0.4s ease;
box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.05), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
display: flex;
flex-direction: column;
/*height: fit-content; sorgt dafür, dass Kacheln nur so groß wie jeweiliger Content in Kachel*/
height: 100%;
}

.product-tile:hover {
transform: translateY(-5px);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.35) 100%);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.product-image {
padding: 30px 30px 10px 30px;
text-align: center;
margin: 0;
mix-blend-mode: multiply;
}

.product-image img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}

.ce_image.image figure.image_container img {
display: block;
border-radius: 20px;
}

.ce_image.product-tile {
    height: auto !important;
}

.product-content {
padding: 0 30px 30px 30px;
display: flex;
flex-direction: column;
flex-grow: 1;
}

.product-title {
font-size: 22px;
font-weight: bold;
color: #1d1d1f;
margin-top: 0;
margin-bottom: 8px;
line-height: 1.2;
}

.product-description {
  line-height: 1.4;
  margin-bottom: 10px;
}

.product-price {
  margin-top: 0;
  margin-bottom: 0;
}

.product-link {
font-size: 18px;
font-weight: bold;
color: #76b4b1;
text-decoration: none;
position: static;
margin-top: 5px;
}

.product-tile .product-link::after {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: 10;
cursor: pointer;
}

.product-tile:hover .product-link {
opacity: 0.8;
}

.product-badge {
position: absolute;
width: 250px;
top: 25px;
right: -80px;
background-color: rgba(40, 46, 104, 0.85);
color: #fff;
font-size: 16px;
font-weight: bold;
text-align: center;
padding: 4px 0;
transform: rotate(45deg);
z-index: 5;
pointer-events: none;
letter-spacing: 2px;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Kleine Info-Kacheln über der Produktüberschrift */
.product-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px 6px; /* vertical horizontal */
  margin-bottom: 8px;
  font-size: 0;
  line-height: 1;
}

.product-tag {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 4px 10px;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  border-radius: 30px;
  border: none;
  color: #fff;
  background: #4f5482;
  margin: 0;
}
.product-tag:nth-child(2n) {
  background: #76b4b1;
}
.product-tag:nth-child(3n) {
  background: #db6d83;
}

/* Zeile mit aktuellem Preis + Streichpreis */
.product-price-row {
  gap: 8px;
}

.product-price-current {
  font-size: 21px;
  font-weight: 630;
  color: #252525;
  margin-right: 8px;
}

.product-price-old {
  font-size: 18px;
  font-weight: 500;
  color: #6e6e73;
  text-decoration: line-through;
}

.product-price-rate {
  font-size: 19px;
  font-weight: 500;
  color: #252525;
  margin-top: -2px;
	line-height: 1.2;
}
.product-price-rate strong {
  font-weight: 610;
}

/* Optional: kompakterer Zeilenabstand für einzelne Kacheln */
.tight-lineheight .product-description {
  line-height: 1.3;
}

/* ==========================================================================
ALLGEMEINE LAYOUT-FIXES
========================================================================== */

/* Verhindert den horizontalen Scroll-Spalt rechts auf der gesamten Seite */
body, html {
overflow-x: hidden;
}

.bg-aurora {
max-width: 100%;
/* overflow: hidden; WICHTIG: Auskommentiert, sonst funktioniert der Bleed-Trick nicht! */
}

/* ==========================================================================
DER ULTIMATIVE SPALT-FIX (Bleed & Z-Index Überlagerung)
========================================================================== */

/* 1. Allgemeine Bereinigung des Contao-Wrappers (#main) */
#main {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}

/* 2. MOBILE (Bis 767px): Bleed & Stack Trick */
@media (max-width: 767px) {
.bg-aurora {
/* Wir machen den Container künstlich länger, um den Spalt zu übermalen.
Die 80px sind dein normales Padding + 60px für den Spalt. */
padding-bottom: 140px !important;

/* Wir ziehen den Footer hoch (wie von dir mit -90px getestet, aber hier ggf. weniger nötig) */
margin-bottom: -90px !important;

/* Das ist der Schlüssel: Hebt den Aurora-Container über das Theme... */
position: relative;
z-index: 10 !important;
}

/* ...und zwingt den Footer wiederum ÜBER den Aurora-Container! */
footer, #footer, .custom-footer, .bg-aurora + * {
position: relative;
z-index: 20 !important;
}
}

/* 3. DESKTOP (Ab 768px): Dein funktionierender Fix */
@media (min-width: 768px) {
.bg-aurora {
padding-bottom: 80px !important;
margin-bottom: -60px !important;
}

.bg-aurora + * {
margin-top: 0 !important;
}
}



/* ==========================================================================
NAVIGATION - PURE LIQUID GLASS EDITION (Apple Style, Fine-Tuned)
========================================================================== */

/* 1. Die Haupt-Leiste (Desktop Default) */
#header {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.15) 100%) !important;

/* Perfekte Reflexion für den Desktop */
backdrop-filter: blur(24px) saturate(250%) !important;
-webkit-backdrop-filter: blur(24px) saturate(250%) !important;

border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05) !important;
}

/* Zwingende Transparenz für innere Contao-Elemente */
#header .inside,
#header .wrapper,
#header .mod_navigation {
background: transparent !important;
background-color: transparent !important;
}

/* 2. Sticky-Zustand (Transparenter beim Scrollen für alle Geräte) */
#header.sticky,
#header.fixed,
#header.is-fixed {
/* Viel transparenter als vorher! Wir senken die Deckkraft beider Verlaufspunkte */
background: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.05) 100%) !important;

/* Die Sättigung bleibt hoch, damit die Farben durch das sehr transparente Glas stark leuchten */
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08) !important;
}

/* 3. Mobile Anpassungen (Bis 767px) */
@media (max-width: 767px) {
/* Wir drosseln die Farb-Reflexion für den normalen Header auf dem Handy */
#header {
/* Etwas weniger Sättigung (180%), damit es nicht so extrem leuchtet */
backdrop-filter: blur(20px) saturate(180%) !important;
-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}

/* Falls Sticky-Klasse auch auf Mobile greift, ebenfalls Sättigung drosseln */
#header.sticky,
#header.fixed,
#header.is-fixed {
backdrop-filter: blur(20px) saturate(180%) !important;
-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}

/* Das Mobile Aufklapp-Menü */
.mobile-menu,
#menu,
.mmenu-wrapper {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.2) 100%) !important;
/* Auch hier: Moderater Sättigungs-Boost für entspanntere Farben */
backdrop-filter: blur(24px) saturate(180%) !important;
-webkit-backdrop-filter: blur(24px) saturate(180%) !important;
border-right: 1px solid rgba(255, 255, 255, 0.4) !important;
}
}


/* ==========================================================================
Mobile Wrapper Styling
========================================================================== */
.wrapper-padding {
padding: 1% 10%;
}

@media (max-width: 1023px) {
.wrapper-padding {
padding: 1% 7%;
}
}




/* ==========================================================================
Mobile Product Tile Font Styling
========================================================================== */
.product-content {
font-size: 1rem;
}

@media (max-width: 991px) {
.product-content {
font-size: 0.95rem;
gap: 0.4rem;
}

.product-title {
font-size: 1.1rem;
line-height: 1.2;
margin-bottom: 0.35rem;
}

.product-description {
font-size: 0.95rem;
line-height: 1.5;
margin-bottom: 0.45rem;
}

.product-price {
font-size: 0.92rem;
margin-bottom: 0.45rem;
}

.product-link {
font-size: 0.92rem;
margin-top: 0.15rem;
}

  .product-price-current {
    font-size: 17px;
    margin-right: 6px;
  }

  .product-price-old {
    font-size: 14px;
  }

  .product-price-rate {
    font-size: 14px;
  }

  .product-tag {
    font-size: 10px;
    padding: 3px 8px;
  }
}

/* ==========================================================================
Bild/Text Box v2 als Produktkachel: Feintuning nur für dieses Template
========================================================================== */

/* Mehr Abstand zwischen Überschrift und Tags */
.ce-image-text-product .product-tags {
  margin-top: 8px;
}

/* Monatliche Rate etwas kleiner (vorher 19px) */
.ce-image-text-product .product-price-rate {
  font-size: 16px;
}

/* Mobile und Tablet (vorher 14px) */
@media (max-width: 991px) {
  .ce-image-text-product .product-price-rate {
    font-size: 14px;
  }
}


/* =============================================================================
 * form style liquid glass
 * ========================================================================== */

/* Fix für abgeschnittene Schatten durch übergeordnete Container */
.ce_form,
.ce_form .pct_edit_container,
.ce_form form.liquid-glass,
.ce_form form.liquid-glass .formbody {
	overflow: visible !important;
}

/* Optionaler Platz für Schatten, falls ein äußerer Wrapper trotzdem clippt */
.ce_form form.liquid-glass {
	position: relative;
	z-index: 1;
	padding-left: 10px;
	padding-right: 10px;
	margin-left: -10px;
	margin-right: -10px;
}

/* Basisfelder */
form.liquid-glass input:not(.submit):not([type="submit"]),
form.liquid-glass select,
form.liquid-glass textarea {
	background: linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.60) 0%,
		rgba(255, 255, 255, 0.25) 100%
	);
	background-color: rgba(255, 255, 255, 0.70);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);

	border-top: 1px solid rgba(255, 255, 255, 0.80);
	border-left: 1px solid rgba(255, 255, 255, 0.80);
	border-right: 1px solid rgba(255, 255, 255, 0.30);
	border-bottom: 1px solid rgba(255, 255, 255, 0.30);

	font-size: 0.9rem;
	line-height: 1.4;
	padding: 20px;
	border-radius: 20px;
	color: inherit;
	appearance: none;
	-webkit-appearance: none;
	outline: 1px solid transparent;
	box-sizing: border-box;

	box-shadow:
		0 6px 16px rgba(0, 0, 0, 0.06),
		inset 0 0 0 1px rgba(255, 255, 255, 0.38);

	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease,
		background 0.25s ease,
		border-color 0.25s ease;
}

/* Hover und Focus */
form.liquid-glass input:not(.submit):not([type="submit"]):hover,
form.liquid-glass select:hover,
form.liquid-glass textarea:hover,
form.liquid-glass input:not(.submit):not([type="submit"]):focus,
form.liquid-glass select:focus,
form.liquid-glass textarea:focus {
	background: linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.70) 0%,
		rgba(255, 255, 255, 0.35) 100%
	);
	box-shadow:
		0 10px 22px rgba(0, 0, 0, 0.09),
		inset 0 0 0 1px rgba(255, 255, 255, 0.46);
	transform: translateY(-1px);
	outline: none;
}

/* Placeholder */
form.liquid-glass input::placeholder,
form.liquid-glass textarea::placeholder {
	color: rgba(0, 0, 0, 0.45);
}

/* Textarea */
form.liquid-glass textarea {
	min-height: 160px;
	resize: vertical;
}

/* Select */
form.liquid-glass select {
	height: auto;
	min-height: 59px;
	padding-top: 18px;
	padding-bottom: 18px;
	line-height: 1.4;
	box-sizing: border-box;
}

/* Senden-Button in #282e68 mit definierter Hover-Aufhellung */
form.liquid-glass input.submit,
form.liquid-glass button.submit,
form.liquid-glass input[type="submit"] {
	height: auto;
	padding: 20px 28px;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	color: #fff;
	border-radius: 20px;
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;

	background: linear-gradient(180deg, #2d336f 0%, #282e68 100%);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);

	border-top: 1px solid rgba(255, 255, 255, 0.22);
	border-left: 1px solid rgba(255, 255, 255, 0.14);
	border-right: 1px solid rgba(0, 0, 0, 0.10);
	border-bottom: 1px solid rgba(0, 0, 0, 0.18);

	box-shadow:
		0 8px 18px rgba(40, 46, 104, 0.28),
		inset 0 1px 0 rgba(255, 255, 255, 0.12);

	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease,
		filter 0.25s ease,
		background 0.25s ease;
}

form.liquid-glass input.submit:hover,
form.liquid-glass button.submit:hover,
form.liquid-glass input[type="submit"]:hover,
form.liquid-glass input.submit:focus,
form.liquid-glass button.submit:focus,
form.liquid-glass input[type="submit"]:focus {
	background: linear-gradient(180deg, #313877 0%, #2a306c 100%);
	box-shadow:
		0 12px 24px rgba(40, 46, 104, 0.32),
		inset 0 1px 0 rgba(255, 255, 255, 0.14);
	transform: translateY(-1px);
	outline: none;
}


/* =============================================================================
 * Section Buttons in Kategorien
 * ========================================================================== */

.category-nav {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 40px 0;
}

.category-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 140px;
  margin: 0 auto;
  text-align: center;
  text-decoration: none;
  color: #1d1d1f;
  font-size: 15px;
  font-weight: 600;
}

.category-tile {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.25) 100%);
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.8);
  border-left: 1px solid rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  border-right: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.05), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.category-tile img,
.category-tile figure,
.category-tile .image_container,
.category-tile .ce_image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: inherit !important;
}

.category-btn span {
  margin-top: 10px;
  line-height: 1.2;
}

/* Animierte Border */
@property --sweep {
  syntax: '<percentage>';
  initial-value: 0%;
  inherits: false;
}

.category-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 2px;
  background: conic-gradient(from 225deg, #4f5482 var(--sweep), transparent var(--sweep));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  --sweep: 0%;
  transition: --sweep 0.6s ease;
  pointer-events: none;
}

.category-btn:hover .category-tile::after {
  --sweep: 100%;
}

html {
  scroll-behavior: smooth;
}

[id="opg"], [id="dvt"], [id="intraoral"], [id="folienscanner"], [id="sensoren"] {
  scroll-margin-top: 160px;
}

/* MOBILE & TABLET (Bis 768px) */
@media (max-width: 768px) {
  /* Altes 5er-Grid (.category-nav) */
  .category-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 10px;
    padding: 8px 16px 24px;
  }

  /* Neues 6er-Grid (.category-row aus AutoGrid) */
  .category-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px 10px !important;
    margin-bottom: 14px !important;
  }

  .category-row > .column {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    flex: none !important;
  }

  .category-btn {
    max-width: 105px;
    font-size: 11px;
    width: 100%;
  }

  .category-btn span {
    margin-top: 6px;
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    width: 100%;
    display: block;
  }

  .category-tile {
    border-radius: 16px;
  }

  .category-tile::after {
    border-radius: 16px;
  }
}



/* ==========================================================================
   BERATUNG WIZARD STYLING
   ========================================================================== */

/* Reserviert dauerhaft Platz für die Scrollbar, damit der Hover-Effekt
   des Weiter-Buttons (translateY) nie mehr Inhalte verschiebt */
html {
  scrollbar-gutter: stable;
}

.beratung-wizard {
  max-width: 560px;
  margin: 0 auto;
  padding: 40px 20px;
  text-align: center;
}

.wizard-avatar {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 20px;
  display: block;
  border: 3px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.wizard-subline {
  color: #6e6e73;
  font-size: 0.95rem;
  margin: 0 0 8px 0;
}

.wizard-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #1d1d1f;
  margin: 0 0 24px 0;
  line-height: 1.3;
}

.btn-weiter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: auto;
  padding: 20px 28px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  border-radius: 20px;
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  cursor: pointer;

  background: linear-gradient(180deg, #2d336f 0%, #282e68 100%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  border-top: 1px solid rgba(255, 255, 255, 0.22);
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  border-right: 1px solid rgba(0, 0, 0, 0.10);
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);

  box-shadow:
    0 8px 18px rgba(40, 46, 104, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    filter 0.25s ease,
    background 0.25s ease;

  margin-bottom: 30px;
}

.btn-weiter:hover,
.btn-weiter:focus {
  background: linear-gradient(180deg, #313877 0%, #2a306c 100%);
  box-shadow:
    0 12px 24px rgba(40, 46, 104, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transform: translateY(-1px);
  outline: none;
}

/* Bubbles: Breite orientiert sich am Inhalt, Text bleibt einzeilig */
.wizard-hilfe-boxen {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: stretch;
  gap: 12px;
}

/* Kundendienst und WhatsApp bekommen dieselbe feste Breite, damit sie
   sich unabhängig von der Textlänge exakt spiegeln. Die E-Mail-Bubble
   bleibt dazwischen automatisch in der Mitte, weil die Gruppe als
   Ganzes zentriert wird und links/rechts gleich breit sind. */
.wizard-hilfe-boxen .hilfe-box:nth-child(1),
.wizard-hilfe-boxen .hilfe-box:nth-child(3) {
  flex: 0 0 auto;
  width: 220px;
}

.wizard-hilfe-boxen .hilfe-box:nth-child(2) {
  flex: 0 0 auto;
  width: auto;
}

@media (max-width: 600px) {
  .wizard-hilfe-boxen {
    flex-wrap: wrap;
  }

  .wizard-hilfe-boxen .hilfe-box:nth-child(1),
  .wizard-hilfe-boxen .hilfe-box:nth-child(3) {
    width: auto;
    max-width: 100%;
  }
}

.hilfe-box {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.25) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 16px 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.5);
  text-align: center;
}

.hilfe-label {
  display: block;
  font-size: 0.85rem;
  color: #6e6e73;
  margin-bottom: 4px;
  font-weight: 600;
  white-space: nowrap;
}

.hilfe-box a {
  display: block;
  color: #1d1d1f;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

/* Prozess-Erklärung: ebenfalls immer zentriert nebeneinander */
.wizard-process {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 30px;
  justify-content: center;
  align-items: flex-start;
  margin-top: 50px;
  text-align: center;
}

.process-step {
  flex: 1 1 0;
  min-width: 0;
  max-width: 220px;
}

.process-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #1d1d1f;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  font-weight: 700;
  color: #1d1d1f;
}

.process-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1d1d1f;
  margin: 0 0 8px 0;
}

.process-text {
  font-size: 0.9rem;
  color: #6e6e73;
  line-height: 1.4;
  margin: 0;
}

/* ==========================================================================
   FORMULAR-WIZARD (Schritt 1 und 2)
   ========================================================================== */

.ce_form form.liquid-glass.wizard-form {
  max-width: 560px;
  margin: 0 auto;
  padding: 40px 20px;
  display: none;
}

.ce_form form.liquid-glass.wizard-form.js-visible {
  display: block;
}

.ce_form form.liquid-glass.wizard-form .widget {
  margin-bottom: 16px;
}

.ce_form form.liquid-glass .widget {
  margin-bottom: 16px;
}

.schritt2-headline {
  text-align: center;
}

.danke-personalisiert {
  text-align: center;
  font-size: 1.05rem;
  color: #1d1d1f;
  margin-bottom: 20px;
}

.submit.btn-weiter-step2 {
  display: block;
  width: 100%;
  margin-top: 10px;
}

/* Da die Bubbles jetzt am Inhalt orientiert sind und nicht mehr schrumpfen,
   erlauben wir auf kleinen Bildschirmen den Umbruch untereinander, damit
   nichts horizontal abgeschnitten wird oder die Seite verbreitert. */
@media (max-width: 600px) {
  .wizard-hilfe-boxen,
  .wizard-process {
    flex-wrap: wrap;
  }

  .process-step {
    max-width: none;
    flex: 1 1 100%;
  }
}

/* Größerer Abstand zwischen Weiter-Button und dem Text/den Bubbles darunter */
.btn-weiter {
  margin-bottom: 50px;
}

/* Feature-Block: exakt wie die Bubbles als eine Reihe nebeneinander */
.wizard-features {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 30px;
  justify-content: center;
  align-items: flex-start;
  margin-bottom: 50px;
  text-align: center;
}

.feature-item {
  flex: 1 1 0;
  min-width: 280px;
  max-width: none;
}

.feature-icon {
  font-size: 2rem;
  color: #1d1d1f;
  margin-bottom: 12px;
  display: block;
}

.feature-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1d1d1f;
  margin: 0 0 8px 0;
}

.feature-text {
  font-size: 0.9rem;
  color: #6e6e73;
  line-height: 1.5;
  margin: 0;
}

.wizard-erreichbar-label {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  color: #6e6e73;
  font-size: 0.9rem;
  margin: 0 0 16px 0;
}
@media (max-width: 600px) {
  .wizard-erreichbar-label {
    font-size: 0.8rem;
  }
}

/* Danke-Bildschirm nach dem Absenden */
.wizard-danke-screen {
  text-align: center;
}

.danke-final {
  margin-bottom: 10px;
}

.wizard-so-geht-es-weiter {
  color: #6e6e73;
  font-size: 0.9rem;
  margin: 0 0 8px 0;
}

.wizard-danke-screen .wizard-process {
  margin-top: 30px;
}

@media (max-width: 600px) {
  .wizard-features {
    flex-wrap: wrap;
    gap: 30px;
  }

  .feature-item {
    max-width: none;
    flex: 1 1 100%;
  }
}



/* ==========================================================================
   AI-Badge
   ========================================================================== */
   
/* Container als Ankerpunkt, ohne das bestehende Layoutmodell zu stören */
.ai-badge {
    position: relative;
}

/* Badge bleibt absolut verankert */
.ai-badge::after {
    content: "";
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 28px;
    height: 28px;
    background-image: url("/files/Superdenta_files_3.0/Global/LABEL_AI_white_transparent.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 2;
}