@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100;200;300;400;500;600;700&display=swap');






/* =========================================================
   GLOBAL PAGE BACKGROUND
   ========================================================= */

/* Desktop */
body:not(.home),
body:not(.home) #wrapper,
body:not(.home) #main {
  background-color: var(--mandy-dark-surface-page) !important;
}

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

  /* Hintergrund hinter dem Header bleibt hell */
  body:not(.home),
  body:not(.home) #wrapper {
    background-color: var(--mandy-light-surface-page) !important;
  }

  /* Eigentlicher Seiteninhalt bleibt dunkel */
  body:not(.home) #main {
    background-color: var(--mandy-dark-surface-page) !important;
  }

}








/* =========================================================
   HOME PAGE BACKGROUND – TABLET & MOBILE
   ========================================================= */

@media (max-width: 1026px) {
		
body.home,
body.home #wrapper,
body.home #main {
    background-color:
      var(--mandy-light-surface-page) !important;
  }

}






/* =========================================================
   MOBILE STATUS BAR BACKGROUND
   ========================================================= */

@media (max-width: 1026px) {

  html.mandy-status-color {
    background-color:
      var(--mandy-light-surface-page) !important;
  }

  html.mandy-status-color.is-dark,
  html.mandy-status-color.is-dark body:not(.home),
  html.mandy-status-color.is-dark body:not(.home) #wrapper {
    background-color:
      var(--mandy-dark-surface-page) !important;
  }

}














/* =========================================================
   PREVENT VERTICAL OVERSCROLL
   ========================================================= */

html {
  overscroll-behavior-y: none;
}





/* =========================================================
   MANDY COLOR TOKENS
   ========================================================= */

:root {

  /* =======================================================
     CORPORATE TOKENS
     ======================================================= */


  /* Focus */

  --mandy-focus-blue: #256AFF;


  /* Primary */

  --mandy-primary-50: #E1DCE9;
  --mandy-primary-100: #E2D9F8;
  --mandy-primary-200: #D5C6FF;
  --mandy-primary-300: #BEACFF;
  --mandy-primary-400: #A07DFF;
  --mandy-primary-500: #552CC5;
  --mandy-primary-600: #4B2BAA;


  /* Neutral */

  --mandy-neutral-0: #FFFFFF;
  --mandy-neutral-100: #FAF7FF;
  --mandy-neutral-200: #EEEDF7;
  --mandy-neutral-300: #D8D5DC;
  --mandy-neutral-400: #BCC1C6;
  --mandy-neutral-500: #A09EAB;
  --mandy-neutral-600: #6F697A;


  /* Navy */

  --mandy-navy-100: #7899B3;
	--mandy-navy-200: #718FA8;
  --mandy-navy-300: #4A5C6A;
  --mandy-navy-400: #253A4B;
  --mandy-navy-500: #1E2F3D;
  --mandy-navy-600: #182732;
  --mandy-navy-700: #141617;


  /* Highlights */

  --mandy-highlight-green: #61E3A2;
  --mandy-highlight-yellow: #FFCB3C;
  --mandy-highlight-red: #FB5A6D;


  /* Yellow */

  --mandy-yellow-500: #E5BE6E;
  --mandy-yellow-800: #6C5932;


  /* Peach */

  --mandy-peach-500: #FFB791;
  --mandy-peach-800: #7C5642;


  /* Coral */

  --mandy-coral-500: #FF826F;
  --mandy-coral-800: #783A31;


  /* Lilac */

  --mandy-lilac-500: #A59AD4;
  --mandy-lilac-600: #9693B7;
  --mandy-lilac-800: #4D4766;


  /* Blue */

  --mandy-blue-500: #8CC6D3;
  --mandy-blue-800: #435E65;


  /* Ocean */

  --mandy-ocean-500: #82D5C8;
  --mandy-ocean-800: #3A625C;


  /* Green */

  --mandy-green-500: #8ED3B1;
  --mandy-green-800: #416352;


  /* Opacity */

  --mandy-opacity-white-32: rgba(255, 255, 255, 0.32);
  --mandy-opacity-white-8: rgba(255, 255, 255, 0.08);
  --mandy-opacity-white-4: rgba(255, 255, 255, 0.04);
  --mandy-opacity-black-8: rgba(32, 36, 44, 0.08);
  --mandy-opacity-primary-10: rgba(85, 44, 197, 0.10);


		
		
		
		
		
		
		
		
		
		
		
		

  /* =======================================================
    CONTEXT TOKENS
 		CONTEXT TOKENS
 		CONTEXT TOKENS
 		CONTEXT TOKENS    
		CONTEXT TOKENS
 		CONTEXT TOKENS
 		CONTEXT TOKENS
 		CONTEXT TOKENS
     ======================================================= */
		
		
		

  /* =========================================================
   Dark Surfaces
   ========================================================= */

  --mandy-dark-surface-page:
    var(--mandy-navy-600);

  --mandy-dark-surface-container:
    var(--mandy-navy-500);

  --mandy-dark-surface-container-muted:
    var(--mandy-navy-400);

		
		

  /* Light Surfaces */

  --mandy-light-surface-page:
    var(--mandy-neutral-200);

  --mandy-light-surface-container:
    var(--mandy-neutral-0);

  --mandy-light-surface-container-muted:
    var(--mandy-primary-50);
		
		
		
				
		/* Tooltip Surface */

--mandy-surface-qtip:
  var(--mandy-navy-700);
		
		
		
  /* =========================================================
   Dark Foregrounds
   ========================================================= */

  --mandy-dark-foreground-primary:
    var(--mandy-neutral-200);

  --mandy-dark-foreground-secondary:
    var(--mandy-neutral-400);

  --mandy-dark-foreground-tertiary:
    var(--mandy-navy-200);

  --mandy-dark-foreground-on-color-primary:
    var(--mandy-navy-700);

  --mandy-dark-foreground-on-color-secondary:
    var(--mandy-navy-400);

  --mandy-dark-foreground-on-brand-primary:
    var(--mandy-neutral-200);

  --mandy-dark-foreground-on-brand-secondary:
    var(--mandy-primary-200);



  /* Light Foregrounds */

  --mandy-light-foreground-primary:
    var(--mandy-navy-600);

  --mandy-light-foreground-secondary:
    var(--mandy-neutral-600);

  --mandy-light-foreground-on-color-primary:
    var(--mandy-navy-700);

  --mandy-light-foreground-on-color-secondary:
    var(--mandy-navy-400);

  --mandy-light-foreground-on-brand-primary:
    var(--mandy-neutral-200);

  --mandy-light-foreground-on-brand-secondary:
    var(--mandy-primary-200);





		
		
		
		
		
  /* =========================================================
   Dark Actions
   ========================================================= */

  --mandy-dark-action-focus-ring:
    var(--mandy-focus-blue);

  --mandy-dark-action-primary-surface:
    var(--mandy-neutral-200);

  --mandy-dark-action-primary-foreground:
    var(--mandy-navy-500);

  --mandy-dark-action-secondary-surface:
    var(--mandy-opacity-white-8);

  --mandy-dark-action-secondary-foreground:
    var(--mandy-neutral-200);

  --mandy-dark-action-hover-surface:
    var(--mandy-primary-500);

  --mandy-dark-action-hover-foreground:
    var(--mandy-neutral-200);



  /* Light Actions */

  --mandy-light-action-focus-ring:
    var(--mandy-focus-blue);

  --mandy-light-action-primary-surface:
    var(--mandy-navy-500);

  --mandy-light-action-primary-foreground:
    var(--mandy-neutral-200);

  --mandy-light-action-secondary-surface:
    var(--mandy-opacity-black-8);

  --mandy-light-action-secondary-foreground:
    var(--mandy-navy-500);

  --mandy-light-action-hover-surface:
    var(--mandy-primary-500);

  --mandy-light-action-hover-foreground:
    var(--mandy-neutral-200);






		
		

  /* =========================================================
   Dark Pills
   ========================================================= */


  --mandy-dark-pill-primary-surface:
    var(--mandy-opacity-white-4);

  --mandy-dark-pill-secondary-surface:
    var(--mandy-opacity-primary-10);

  --mandy-dark-pill-primary-foreground:
    var(--mandy-neutral-500);

  --mandy-dark-pill-secondary-foreground:
    var(--mandy-lilac-600);
		
		
		
  /* Light Pills */

  --mandy-light-pill-primary-surface:
    var(--mandy-opacity-white-32);
		
		/* Light Pills – on White */

--mandy-light-pill-on-white-surface:
  var(--mandy-neutral-200);

--mandy-light-pill-on-white-foreground:
  var(--mandy-neutral-600);

}

/* =========================================================
ENDE ROOT   ========================================================= */








/* =========================================================
   color token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mappingcolor token mapping
   ========================================================= */


/* =========================================================
   DARK SURFACES 🌚
   ========================================================= */


/* Ganze Seitenbereiche / Avada-Container */

.mandy-dark-surface-page {
  background-color:
    var(--mandy-dark-surface-page) !important;
}


/* Einzelne Boxen / Avada-Spalten */

.fusion-layout-column.mandy-dark-surface-container
> .fusion-column-wrapper {
  background-color:
    var(--mandy-dark-surface-container) !important;
}

.fusion-layout-column.mandy-dark-surface-container-muted
> .fusion-column-wrapper {
  background-color:
    var(--mandy-dark-surface-container-muted) !important;
}


/* =========================================================
   LIGHT SURFACES 🌞
   ========================================================= */


/* Ganze Seitenbereiche / Avada-Container */

.mandy-light-surface-page {
  background-color:
    var(--mandy-light-surface-page) !important;
}


/* Einzelne Boxen / Avada-Spalten */

.fusion-layout-column.mandy-light-surface-container
> .fusion-column-wrapper {
  background-color:
    var(--mandy-light-surface-container) !important;
}

.fusion-layout-column.mandy-light-surface-container-muted
> .fusion-column-wrapper {
  background-color:
    var(--mandy-light-surface-container-muted) !important;
}



/* =========================================================
   CORPORATE COLOR SURFACES
   ========================================================= */

.fusion-layout-column.mandy-surface-yellow-500
> .fusion-column-wrapper {
  background-color: var(--mandy-yellow-500) !important;
}

.fusion-layout-column.mandy-surface-peach-500
> .fusion-column-wrapper {
  background-color: var(--mandy-peach-500) !important;
}

.fusion-layout-column.mandy-surface-coral-500
> .fusion-column-wrapper {
  background-color: var(--mandy-coral-500) !important;
}

.fusion-layout-column.mandy-surface-lilac-500
> .fusion-column-wrapper {
  background-color: var(--mandy-lilac-500) !important;
}

.fusion-layout-column.mandy-surface-blue-500
> .fusion-column-wrapper {
  background-color: var(--mandy-blue-500) !important;
}

.fusion-layout-column.mandy-surface-ocean-500
> .fusion-column-wrapper {
  background-color: var(--mandy-ocean-500) !important;
}

.fusion-layout-column.mandy-surface-green-500
> .fusion-column-wrapper {
  background-color: var(--mandy-green-500) !important;
}



.fusion-layout-column.mandy-surface-grey-500
> .fusion-column-wrapper {
  background-color: var(--mandy-neutral-400) !important;
}








.mandy-surface-qtip,
.mandy-surface-qtip > .fusion-column-wrapper {
  background-color:
    var(--mandy-surface-qtip) !important;
}











/* =========================================================
   DARK FOREGROUNDS
   ========================================================= */


.mandy-dark-foreground-primary,
.mandy-dark-foreground-primary .fusion-title-heading,
.mandy-dark-foreground-primary * {
  color:
    var(--mandy-dark-foreground-primary) !important;
}

.mandy-dark-foreground-secondary,
.mandy-dark-foreground-secondary .fusion-title-heading,
.mandy-dark-foreground-secondary * {
  color:
    var(--mandy-dark-foreground-secondary) !important;
}

.mandy-dark-foreground-tertiary,
.mandy-dark-foreground-tertiary .fusion-title-heading,
.mandy-dark-foreground-tertiary * {
  color:
    var(--mandy-dark-foreground-tertiary) !important;
}

.mandy-dark-foreground-on-color-primary,
.mandy-dark-foreground-on-color-primary .fusion-title-heading,
.mandy-dark-foreground-on-color-primary * {
  color:
    var(--mandy-dark-foreground-on-color-primary) !important;
}

.mandy-dark-foreground-on-color-secondary,
.mandy-dark-foreground-on-color-secondary .fusion-title-heading,
.mandy-dark-foreground-on-color-secondary * {
  color:
    var(--mandy-dark-foreground-on-color-secondary) !important;
}

.mandy-dark-foreground-on-brand-primary,
.mandy-dark-foreground-on-brand-primary .fusion-title-heading,
.mandy-dark-foreground-on-brand-primary * {
  color:
    var(--mandy-dark-foreground-on-brand-primary) !important;
}

.mandy-dark-foreground-on-brand-secondary,
.mandy-dark-foreground-on-brand-secondary .fusion-title-heading,
.mandy-dark-foreground-on-brand-secondary * {
  color:
    var(--mandy-dark-foreground-on-brand-secondary) !important;
}






/* =========================================================
   HIGHLIGHT FOREGROUNDS
   ========================================================= */

.mandy-highlight-green,
.mandy-highlight-green * {
  color: var(--mandy-highlight-green) !important;
}

.mandy-highlight-yellow,
.mandy-highlight-yellow * {
  color: var(--mandy-highlight-yellow) !important;
}

.mandy-highlight-red,
.mandy-highlight-red * {
  color: var(--mandy-highlight-red) !important;
}


/* =========================================================
   YELLOW FOREGROUNDS
   ========================================================= */

.mandy-foreground-yellow-500,
.mandy-foreground-yellow-500 * {
  color: var(--mandy-yellow-500) !important;
}

.mandy-foreground-yellow-800,
.mandy-foreground-yellow-800 * {
  color: var(--mandy-yellow-800) !important;
}


/* =========================================================
   PEACH FOREGROUNDS
   ========================================================= */

.mandy-foreground-peach-500,
.mandy-foreground-peach-500 * {
  color: var(--mandy-peach-500) !important;
}

.mandy-foreground-peach-800,
.mandy-foreground-peach-800 * {
  color: var(--mandy-peach-800) !important;
}


/* =========================================================
   CORAL FOREGROUNDS
   ========================================================= */

.mandy-foreground-coral-500,
.mandy-foreground-coral-500 * {
  color: var(--mandy-coral-500) !important;
}

.mandy-foreground-coral-800,
.mandy-foreground-coral-800 * {
  color: var(--mandy-coral-800) !important;
}


/* =========================================================
   LILAC FOREGROUNDS
   ========================================================= */

.mandy-foreground-lilac-500,
.mandy-foreground-lilac-500 * {
  color: var(--mandy-lilac-500) !important;
}

.mandy-foreground-lilac-600,
.mandy-foreground-lilac-600 * {
  color: var(--mandy-lilac-600) !important;
}

.mandy-foreground-lilac-800,
.mandy-foreground-lilac-800 * {
  color: var(--mandy-lilac-800) !important;
}


/* =========================================================
   BLUE FOREGROUNDS
   ========================================================= */

.mandy-foreground-blue-500,
.mandy-foreground-blue-500 * {
  color: var(--mandy-blue-500) !important;
}

.mandy-foreground-blue-800,
.mandy-foreground-blue-800 * {
  color: var(--mandy-blue-800) !important;
}


/* =========================================================
   OCEAN FOREGROUNDS
   ========================================================= */

.mandy-foreground-ocean-500,
.mandy-foreground-ocean-500 * {
  color: var(--mandy-ocean-500) !important;
}

.mandy-foreground-ocean-800,
.mandy-foreground-ocean-800 * {
  color: var(--mandy-ocean-800) !important;
}


/* =========================================================
   GREEN FOREGROUNDS
   ========================================================= */

.mandy-foreground-green-500,
.mandy-foreground-green-500 * {
  color: var(--mandy-green-500) !important;
}

.mandy-foreground-green-800,
.mandy-foreground-green-800 * {
  color: var(--mandy-green-800) !important;
}



/* =========================================================
   navy FOREGROUNDS
   ========================================================= */
.mandy-foreground-navy-300 {
color: var(--mandy-navy-300) !important;
}


/* =========================================================
   LIGHT FOREGROUNDS
   ========================================================= */

.mandy-light-foreground-primary,
.mandy-light-foreground-primary .fusion-title-heading,
.mandy-light-foreground-primary * {
  color: var(--mandy-light-foreground-primary) !important;
}

.mandy-light-foreground-secondary,
.mandy-light-foreground-secondary .fusion-title-heading,
.mandy-light-foreground-secondary * {
  color: var(--mandy-light-foreground-secondary) !important;
}

.mandy-light-foreground-on-color-primary,
.mandy-light-foreground-on-color-primary .fusion-title-heading,
.mandy-light-foreground-on-color-primary * {
  color: var(--mandy-light-foreground-on-color-primary) !important;
}

.mandy-light-foreground-on-color-secondary,
.mandy-light-foreground-on-color-secondary .fusion-title-heading,
.mandy-light-foreground-on-color-secondary * {
  color: var(--mandy-light-foreground-on-color-secondary) !important;
}

.mandy-light-foreground-on-brand-primary,
.mandy-light-foreground-on-brand-primary .fusion-title-heading,
.mandy-light-foreground-on-brand-primary * {
  color: var(--mandy-light-foreground-on-brand-primary) !important;
}

.mandy-light-foreground-on-brand-secondary,
.mandy-light-foreground-on-brand-secondary .fusion-title-heading,
.mandy-light-foreground-on-brand-secondary * {
  color: var(--mandy-light-foreground-on-brand-secondary) !important;
}




/* =========================================================
🚨   DARK ACTIONS 
🚨   DARK ACTIONS 
   ========================================================= */

.mandy-dark-action-primary-surface {
  background-color:
    var(--mandy-dark-action-primary-surface) !important;
}

.mandy-dark-action-primary-foreground,
.mandy-dark-action-primary-foreground .fusion-title-heading {
  color:
    var(--mandy-dark-action-primary-foreground) !important;
}

.mandy-dark-action-secondary-surface {
  background-color:
    var(--mandy-dark-action-secondary-surface) !important;
}

.mandy-dark-action-secondary-foreground,
.mandy-dark-action-secondary-foreground .fusion-title-heading {
  color:
    var(--mandy-dark-action-secondary-foreground) !important;
}

.mandy-dark-action-hover-surface:hover {
  background-color:
    var(--mandy-dark-action-hover-surface) !important;
}

.mandy-dark-action-hover-foreground:hover,
.mandy-dark-action-hover-foreground:hover .fusion-title-heading {
  color:
    var(--mandy-dark-action-hover-foreground) !important;
}

.mandy-dark-action-focus-ring:focus-visible {
  outline:
    3px solid var(--mandy-dark-action-focus-ring) !important;

  outline-offset: 2px;
}




/* =========================================================
   LIGHT ACTIONS
   ========================================================= */

.mandy-light-action-primary-surface {
  background-color:
    var(--mandy-light-action-primary-surface) !important;
}

.mandy-light-action-primary-foreground,
.mandy-light-action-primary-foreground .fusion-title-heading {
  color:
    var(--mandy-light-action-primary-foreground) !important;
}

.mandy-light-action-secondary-surface {
  background-color:
    var(--mandy-light-action-secondary-surface) !important;
}

.mandy-light-action-secondary-foreground,
.mandy-light-action-secondary-foreground .fusion-title-heading {
  color:
    var(--mandy-light-action-secondary-foreground) !important;
}

.mandy-light-action-hover-surface:hover {
  background-color:
    var(--mandy-light-action-hover-surface) !important;
}

.mandy-light-action-hover-foreground:hover,
.mandy-light-action-hover-foreground:hover .fusion-title-heading {
  color:
    var(--mandy-light-action-hover-foreground) !important;
}

.mandy-light-action-focus-ring:focus-visible {
  outline:
    3px solid var(--mandy-light-action-focus-ring) !important;

  outline-offset: 2px;
}











/* =========================================================
🏷️   DARK PILLS 
🏷️   DARK PILLS 
🏷️   DARK PILLS 
   ========================================================= */

.mandy-dark-pill-primary-surface {
  background-color:
    var(--mandy-dark-pill-primary-surface) !important;
}

.mandy-dark-pill-primary-foreground,
.mandy-dark-pill-primary-foreground .fusion-title-heading {
  color:
    var(--mandy-dark-pill-primary-foreground) !important;
}

.mandy-dark-pill-secondary-surface {
  background-color:
    var(--mandy-dark-pill-secondary-surface) !important;
}

.mandy-dark-pill-secondary-foreground,
.mandy-dark-pill-secondary-foreground .fusion-title-heading {
  color:
    var(--mandy-dark-pill-secondary-foreground) !important;
}


/* =========================================================
   LIGHT PILLS
   ========================================================= */

.mandy-light-pill-primary-surface {
  background-color:
    var(--mandy-light-pill-primary-surface) !important;
}
































/* =========================================================
 Mandy COMPONENTS
 Mandy COMPONENTS
 Mandy COMPONENTS
 Mandy COMPONENTS
 Mandy COMPONENTS
 Mandy COMPONENTS
   ========================================================= */










/* =========================================================
   MANDY YEAR PICK
   ========================================================= */

.mandy-year-pick {
  position: relative;
  z-index: 60;

  width: 108px;
  min-height: 52px;

  box-sizing: border-box;
}


/* =========================================================
   YEAR PICKER – CLOSED FIELD
   ========================================================= */

.mandy-year-pick__trigger {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 108px;
  height: 52px;

  margin: 0;
  padding: 0 16px;

  box-sizing: border-box;

  /* Default: unsichtbarer Border,
     damit beim Hover nichts springt */
  border:
    3px solid
    transparent;

  border-radius: 14px;

  background-color:
    var(--mandy-light-surface-container);

  color:
    var(--mandy-light-foreground-primary);

  font-family:
    "Raleway",
    sans-serif;

  font-size: 16px;
  font-style: normal;
  font-weight: 800;
  line-height: 24px;

  text-align: center;

  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;

  -webkit-tap-highlight-color: transparent;
}


/* Hover */

@media (hover: hover) and (pointer: fine) {

  .mandy-year-pick__trigger:hover {
    border-color:
      var(--mandy-primary-500);
  }

}


/* Keyboard Focus */

.mandy-year-pick__trigger:focus-visible {
  outline:
    3px solid
    var(--mandy-focus-blue);

  outline-offset:
    3px;
}



/* =========================================================
   OPEN

   Das kleine Feld verschwindet.
   Der Picker nimmt exakt dessen Position ein.
   ========================================================= */

.mandy-year-pick.is-open
.mandy-year-pick__trigger {
  visibility: hidden;
  pointer-events: none;
}


/* =========================================================
   OPEN PANEL
   ========================================================= */

.mandy-year-pick__panel {
  position: absolute;

  top: 0;
  right: 0;

  z-index: 2;

  width: 108px;

  padding: 8px;

  box-sizing: border-box;

  border:
    3px solid
    var(--mandy-focus-blue);

  border-radius: 14px;

  background-color:
    var(--mandy-light-surface-container);

  box-shadow:
    0 10px 30px var(--mandy-opacity-black-8),
    0 2px 8px var(--mandy-opacity-black-8);
}


/* =========================================================
   YEAR SCROLLER

   5 sichtbare Jahre:
   2 oben
   1 aktiv
   2 unten
   ========================================================= */

/* =========================================================
   YEAR SCROLLER
   ========================================================= */

.mandy-year-pick__scroller {
  display: flex;
  flex-direction: column;

  gap: 4px;

  width: 100%;
  height: 256px;

  margin: 0;
  padding: 0;

  box-sizing: border-box;

  overflow-x: hidden;
  overflow-y: auto;

  overscroll-behavior: contain;

  scroll-snap-type: y mandatory;

  -webkit-overflow-scrolling: touch;

  scrollbar-width: none;
}

.mandy-year-pick__scroller::-webkit-scrollbar {
  display: none;
}

.mandy-year-pick__scroller {
  height: 256px;
}





/* =========================================================
   YEAR
   ========================================================= */


.mandy-year-pick__year {
  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 48px;

  width: 100%;
  height: 48px;

  margin: 0;
  padding: 0 8px;

  box-sizing: border-box;

  border: 0;
  border-radius: 11px;

  background-color: transparent;

  color:
    var(--mandy-light-foreground-primary);

  font-family:
    "Raleway",
    sans-serif;

  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;

  text-align: center;

  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;

  scroll-snap-align: center;
  scroll-snap-stop: normal;

  transition:
    background-color 160ms ease,
    color 160ms ease,
    font-weight 160ms ease;

  -webkit-tap-highlight-color: transparent;
}

/* =========================================================
   HOVER
   wie Explore my Journey
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

  .mandy-year-pick__year:not(.is-active):hover {
    background-color:
      var(--mandy-primary-100);

    color:
      var(--mandy-light-foreground-on-color-primary);

    font-weight: 700;
  }

}


/* =========================================================
   ACTIVE YEAR
   ========================================================= */

.mandy-year-pick__year.is-active {
  background-color:
    var(--mandy-dark-surface-container);

  color:
    var(--mandy-dark-foreground-primary);

  font-weight: 700;
}







/* =========================================================
   KEYBOARD FOCUS
   ========================================================= */

/* =========================================================
   KEYBOARD FOCUS
   ========================================================= */

.mandy-year-pick__year:focus-visible {
  outline:
    none !important;

  box-shadow:
    inset 0 0 0 3px
    var(--mandy-focus-blue) !important;
}

/* Avada darf Picker nicht abschneiden */

.fusion-layout-column:has(#year_pick),
.fusion-column-wrapper:has(#year_pick) {
  overflow: visible !important;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .mandy-year-pick__year {
    transition: none;
  }

}












/* 🚨MANDY /* =========================================================
   BUTTONS 
   MANDY BUTTONS
   ========================================================= */
/* =========================================================
   BUTTONS 
   MANDY BUTTONS
   ========================================================= */


/* =========================================================
   MANDY BUTTON – BASE
   ========================================================= */

.mandy-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;

  width: fit-content !important;
  max-width: 100%;
  min-width: 0;

  align-self: flex-start;
  flex: 0 0 auto;

  max-height: 32px;
  padding: 4px 4px 4px 12px;

  box-sizing: border-box;

  border: 0;
  border-radius: 7px;

  appearance: none;
  -webkit-appearance: none;

  font-family: "Roboto Mono", monospace !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 24px !important;
  letter-spacing: 0.04em !important;

  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap;

  cursor: pointer;

  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}


/* Avada / innere Elemente übernehmen exakt die Component-Typografie */

.mandy-button span,
.mandy-button .fusion-button-text {
  font: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
  color: inherit !important;
}





@media (max-width: 700px) {

  /* Normale Seiten */
  body:not(.single-avada_portfolio) .mandy-button span,
  body:not(.single-avada_portfolio) .mandy-button .fusion-button-text {
    transform: translateY(1px) !important;
  }

  /* Avada Portfolio */
  body.single-avada_portfolio .mandy-button span,
  body.single-avada_portfolio .mandy-button .fusion-button-text {
    transform: none !important;
  }

}

















/* =========================================================
   SIZE – XL
   ========================================================= */

.mandy-button--xl {
  width: 100%;
  max-width: none;
  max-height: none;
  min-height: 64px;

  padding: 20px 0 20px 12px;

  border-radius: 20px;

  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.05em;
}


/* =========================================================
   LIGHT PRIMARY
   ========================================================= */

.mandy-button--light-primary {
  background-color:
    var(--mandy-light-action-primary-surface) !important;

  color:
    var(--mandy-light-action-primary-foreground) !important;
}


/* =========================================================
   LIGHT SECONDARY
   ========================================================= */

.mandy-button--light-secondary {
  background-color:
    var(--mandy-light-action-secondary-surface) !important;

  color:
    var(--mandy-light-action-secondary-foreground) !important;
}


/* =========================================================
   DARK PRIMARY
   ========================================================= */

.mandy-button--dark-primary {
  background-color:
    var(--mandy-dark-action-primary-surface) !important;

  color:
    var(--mandy-dark-action-primary-foreground) !important;
}


/* =========================================================
   DARK SECONDARY
   ========================================================= */

.mandy-button--dark-secondary {
  background-color:
    var(--mandy-dark-action-secondary-surface) !important;

  color:
    var(--mandy-dark-action-secondary-foreground) !important;
}


/* =========================================================
   LIGHT HOVER / PRESS
   ========================================================= */

.mandy-button--light-primary:hover,
.mandy-button--light-primary:active,
.mandy-button--light-secondary:hover,
.mandy-button--light-secondary:active {
  background-color:
    var(--mandy-light-action-hover-surface) !important;

  color:
    var(--mandy-light-action-hover-foreground) !important;
}


/* =========================================================
   DARK HOVER / PRESS
   ========================================================= */

.mandy-button--dark-primary:hover,
.mandy-button--dark-primary:active,
.mandy-button--dark-secondary:hover,
.mandy-button--dark-secondary:active {
  background-color:
    var(--mandy-dark-action-hover-surface) !important;

  color:
    var(--mandy-dark-action-hover-foreground) !important;
}


/* =========================================================
   LIGHT KEYBOARD FOCUS
   ========================================================= */

.mandy-button--light-primary:focus-visible,
.mandy-button--light-secondary:focus-visible {
  outline:
    3px solid var(--mandy-light-action-focus-ring) !important;

  outline-offset: 2px;
}


/* =========================================================
   DARK KEYBOARD FOCUS
   ========================================================= */

.mandy-button--dark-primary:focus-visible,
.mandy-button--dark-secondary:focus-visible {
  outline:
    3px solid var(--mandy-dark-action-focus-ring) !important;

  outline-offset: 2px;
}


/* =========================================================
   CONTENT
   ========================================================= */

.mandy-button__label {
  color: inherit !important;
}


/* =========================================================
   ICON
   ========================================================= */

.mandy-button__icon {
  display: block;

  width: 24px;
  height: 24px;
  flex: 0 0 24px;

  color: inherit;

  pointer-events: none;
}

.mandy-button__icon path {
  stroke: currentColor;
}

.mandy-button--xl .mandy-button__icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}











/* =========================================================
   MANDY ICON BUTTONS
   ========================================================= */

.mandy-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;
  border: 0;
  border-radius: 50px;

  text-decoration: none !important;
  cursor: pointer;

  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.mandy-icon-button:link,
.mandy-icon-button:visited {
  text-decoration: none !important;
}


/* =========================================================
   SIZES
   ========================================================= */

.mandy-icon-button--large {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;

  padding: 12px;
  flex: 0 0 48px;
}

.mandy-icon-button--small {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;

  padding: 4px;
  flex: 0 0 32px;
}


/* =========================================================
   LIGHT PRIMARY
   ========================================================= */

.mandy-icon-button--light-primary {
  background-color:
    var(--mandy-light-action-primary-surface) !important;

  color:
    var(--mandy-light-action-primary-foreground) !important;
}


/* =========================================================
   LIGHT SECONDARY
   ========================================================= */

.mandy-icon-button--light-secondary {
  background-color:
    var(--mandy-light-action-secondary-surface) !important;

  color:
    var(--mandy-light-action-secondary-foreground) !important;
}


/* =========================================================
   DARK PRIMARY
   ========================================================= */

.mandy-icon-button--dark-primary {
  background-color:
    var(--mandy-dark-action-primary-surface) !important;

  color:
    var(--mandy-dark-action-primary-foreground) !important;
}


/* =========================================================
   DARK SECONDARY
   ========================================================= */

.mandy-icon-button--dark-secondary {
  background-color:
    var(--mandy-dark-action-secondary-surface) !important;

  color:
    var(--mandy-dark-action-secondary-foreground) !important;
}


/* =========================================================
   LIGHT HOVER / PRESS
   ========================================================= */

.mandy-icon-button--light-primary:hover,
.mandy-icon-button--light-primary:active,
.mandy-icon-button--light-secondary:hover,
.mandy-icon-button--light-secondary:active {
  background-color:
    var(--mandy-light-action-hover-surface) !important;

  color:
    var(--mandy-light-action-hover-foreground) !important;
}


/* =========================================================
   DARK HOVER / PRESS
   ========================================================= */

.mandy-icon-button--dark-primary:hover,
.mandy-icon-button--dark-primary:active,
.mandy-icon-button--dark-secondary:hover,
.mandy-icon-button--dark-secondary:active {
  background-color:
    var(--mandy-dark-action-hover-surface) !important;

  color:
    var(--mandy-dark-action-hover-foreground) !important;
}


/* =========================================================
   LIGHT KEYBOARD FOCUS
   ========================================================= */

.mandy-icon-button--light-primary:focus-visible,
.mandy-icon-button--light-secondary:focus-visible {
  outline:
    3px solid var(--mandy-light-action-focus-ring) !important;

  outline-offset: 2px;
}


/* =========================================================
   DARK KEYBOARD FOCUS
   ========================================================= */

.mandy-icon-button--dark-primary:focus-visible,
.mandy-icon-button--dark-secondary:focus-visible {
  outline:
    3px solid var(--mandy-dark-action-focus-ring) !important;

  outline-offset: 2px;
}


/* =========================================================
   ICON
   ========================================================= */

.mandy-icon-button__icon {
  display: block;

  width: 24px;
  height: 24px;
  flex: 0 0 24px;

  color: inherit;
  pointer-events: none;
}

.mandy-icon-button__icon path {
  stroke: currentColor;
}











/* =========================================================
   MANDY PILLS
   ========================================================= */


/* =========================================================
   PILL LIST
   ========================================================= */

.mandy-pill-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;

  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;
}


/* =========================================================
   PILL BASE
   ========================================================= */

.mandy-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: fit-content !important;
  flex: 0 0 auto !important;
  align-self: flex-start;

  padding: 4px 16px !important;

  box-sizing: border-box !important;
  border: 0 !important;
  border-radius: 18px !important;

  font-family: "Raleway", sans-serif !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 24px!important;

  white-space: nowrap !important;
  text-decoration: none !important;

  cursor: default !important;
  user-select: text !important;
}


/* =========================================================
   DARK PILL PRIMARY
   ========================================================= */

.mandy-pill--dark-primary {
  background-color:
    var(--mandy-dark-pill-primary-surface) !important;

  color:
    var(--mandy-dark-pill-primary-foreground) !important;
}


/* =========================================================
   DARK PILL SECONDARY
   ========================================================= */

.mandy-pill--dark-secondary {
  background-color:
    var(--mandy-dark-pill-secondary-surface) !important;

  color:
    var(--mandy-dark-pill-secondary-foreground) !important;
}


/* =========================================================
   LIGHT PILLS – SHARED SURFACE
   ========================================================= */

.mandy-pill--light-yellow,
.mandy-pill--light-peach,
.mandy-pill--light-coral,
.mandy-pill--light-lilac,
.mandy-pill--light-blue,
.mandy-pill--light-ocean,
.mandy-pill--light-green,
.mandy-pill--light-neutral {
  background-color:
    var(--mandy-light-pill-primary-surface) !important;
}



/* =========================================================
   LIGHT PILL – ON WHITE
   ========================================================= */

.mandy-pill--light-on-white {
  background-color:
    var(--mandy-light-pill-on-white-surface) !important;

  color:
    var(--mandy-light-pill-on-white-foreground) !important;
}




/* =========================================================
   LIGHT PILL – YELLOW
   ========================================================= */

.mandy-pill--light-yellow {
  color:
    var(--mandy-yellow-800) !important;
}


/* =========================================================
   LIGHT PILL – PEACH
   ========================================================= */

.mandy-pill--light-peach {
  color:
    var(--mandy-peach-800) !important;
}


/* =========================================================
   LIGHT PILL – CORAL
   ========================================================= */

.mandy-pill--light-coral {
  color:
    var(--mandy-coral-800) !important;
}


/* =========================================================
   LIGHT PILL – LILAC
   ========================================================= */

.mandy-pill--light-lilac {
  color:
    var(--mandy-lilac-800) !important;
}


/* =========================================================
   LIGHT PILL – BLUE
   ========================================================= */

.mandy-pill--light-blue {
  color:
    var(--mandy-blue-800) !important;
}


/* =========================================================
   LIGHT PILL – OCEAN
   ========================================================= */

.mandy-pill--light-ocean {
  color:
    var(--mandy-ocean-800) !important;
}


/* =========================================================
   LIGHT PILL – GREEN
   ========================================================= */

.mandy-pill--light-green {
  color:
    var(--mandy-green-800) !important;
}


/* =========================================================
   LIGHT PILL – NEUTRAL
   ========================================================= */

.mandy-pill--light-neutral {
  color:
    var(--mandy-navy-300) !important;
}







/* Mandy Pill auf hellem Entry-Experience-Hintergrund */

#mandy-entry-v2 .mev2-callout .mandy-pill--light-yellow {
  background-color: color-mix(
    in srgb,
    var(--mandy-highlight-yellow) 60%,
    white
  ) !important;
}


#mandy-entry-v2 .mev2-callout a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#mandy-entry-v2 .mev2-callout a:hover,
#mandy-entry-v2 .mev2-callout a:focus-visible {
  color: var(--mandy-primary-500);
}

/* Callout vor Primary-Absatz: Secondary-Text */

#mandy-entry-v2 .mev2-callout.mev2-callout--secondary {
  color: var(--mandy-light-foreground-secondary);
}

/* Abstand zum folgenden Primary-Absatz */

#mandy-entry-v2 .mev2-callout + .mev2-primary {
  display: block;
  margin-top: 16px;
}



/* ENTRY EXPERIENCE – PILL OHNE ZUSÄTZLICHE ZEILENHÖHE */

#mandy-entry-v2 .mev2-callout .mandy-pill {
  vertical-align: middle;
  margin-top: -3px;
  margin-bottom: -3px;
margin-right: 4px;
		  position: relative;
  top: -2px;
}


/* ENTRY EXPERIENCE V2 – ERSTER CALLOUT OHNE EXTRA-ABSTAND */

#mandy-entry-v2 .mev2-intro > :first-child:empty + .mev2-callout {
  margin-top: 0;
}



/* =========================================================
   MANDY LANGUAGE SELECTOR
   ========================================================= */

.mandy-language-selector {
  --mandy-language-selector-x: 0px;

  position: relative;

  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;

  width: 93px;
  height: 42px;

  box-sizing: border-box;

  background-color:
    var(--mandy-light-surface-page);

  border-radius: 50px;

  overflow: visible;

  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}


/* EN position */

.mandy-language-selector[data-active="en"] {
  --mandy-language-selector-x: 0px;
}


/* DE position */

.mandy-language-selector[data-active="de"] {
  --mandy-language-selector-x: 45px;
}


/* Active selector */

.mandy-language-selector::before {
  content: "";

  position: absolute;
  top: 0;
  left: 0;

  width: 48px;
  height: 42px;

  border-radius: 50px;

  background-color:
    var(--mandy-light-action-primary-surface);

  transform:
    translateX(var(--mandy-language-selector-x));

  opacity: 0;

  pointer-events: none;
}


/* Animation erst nach Initialisierung */

.mandy-language-selector.is-ready::before {
  opacity: 1;

  transition:
    transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
}


/* Beim Ziehen direkt dem Pointer folgen */

.mandy-language-selector.is-dragging::before {
  transition: none;
}


/* Links */

.mandy-language-selector > a {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 42px;

  padding: 0;

  box-sizing: border-box;

  border: 0;
  border-radius: 50px;

  background: transparent;

  color:
    var(--mandy-light-foreground-secondary);

  font-family: "Raleway", sans-serif !important;
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: 24px !important;

  text-decoration: none !important;
  text-transform: uppercase;
  white-space: nowrap;

  cursor: pointer;

  transition:
    color 180ms ease;
}


.mandy-language-selector > a:link,
.mandy-language-selector > a:visited {
  color:
    var(--mandy-light-foreground-secondary);
}


/* EN visually active */

.mandy-language-selector[data-active="en"]
> a[hreflang="en"] {
  color:
    var(--mandy-light-action-primary-foreground) !important;
}


/* DE visually active */

.mandy-language-selector[data-active="de"]
> a[hreflang="de"] {
  color:
    var(--mandy-light-action-primary-foreground) !important;
}


/* Inactive language */

.mandy-language-selector[data-active="en"]
> a[hreflang="de"],
.mandy-language-selector[data-active="de"]
> a[hreflang="en"] {
  color:
    var(--mandy-light-foreground-secondary) !important;
}


/* Keyboard focus */

.mandy-language-selector > a:focus-visible {
  outline:
    3px solid var(--mandy-light-action-focus-ring) !important;

  outline-offset: 2px;
}


/* Reduced motion */

@media (prefers-reduced-motion: reduce) {

  .mandy-language-selector.is-ready::before,
  .mandy-language-selector > a {
    transition: none;
  }

}



















/* =========================================================
   MANDY SLIDER
   ========================================================= */

.mandy-slider {

  /* ---------------------------------------------------------
     SLIDER SETTINGS
     --------------------------------------------------------- */

  --mandy-slider-preview-offset: 64%;
  --mandy-slider-motion: 1000ms;


  /* ---------------------------------------------------------
     ALL GAPS
     NUR HIER ÄNDERN
     --------------------------------------------------------- */

  --mandy-slider-card-gap: 22px;
  --mandy-slider-card-gap-mobile: 18px;
  --mandy-slider-card-gap-inactive: 0px;

  --mandy-slider-body-gap: 20px;
  --mandy-slider-body-gap-mobile: 16px;

  --mandy-slider-copy-gap-dark: 12px;
  --mandy-slider-copy-gap-light: 8px;

  --mandy-slider-footer-gap: 20px;
  --mandy-slider-footer-gap-mobile: 12px;

  --mandy-slider-pill-gap: 8px;


  /* ---------------------------------------------------------
     BASE
     --------------------------------------------------------- */

  position: relative;

  width: 100%;
  max-width: 1360px;

  margin-inline: auto;

  box-sizing: border-box;

  outline: none;

  overflow: visible !important;
}


/* =========================================================
   3-CARD SIDE SWAP FIX
   ========================================================= */

.mandy-slider-card.is-side-swap {
  transition: none !important;
  opacity: 0 !important;
}


/* =========================================================
   LOAD STATE
   ========================================================= */

.mandy-slider.is-loading {
  opacity: 0;
  visibility: hidden;
}

.mandy-slider.is-ready {
  opacity: 1;
  visibility: visible;

  transition:
    opacity 180ms ease;
}


/* =========================================================
   AVADA CLIPPING FIX
   ========================================================= */

.fusion-fullwidth:has(.mandy-slider),
.fusion-builder-row:has(.mandy-slider),
.fusion-layout-column:has(.mandy-slider),
.fusion-column-wrapper:has(.mandy-slider) {
  overflow: visible !important;
}


/* =========================================================
   VIEWPORT
   ========================================================= */

.mandy-slider__viewport {
  position: relative;

  width: 100%;

  overflow: visible !important;

  padding:
    32px 0
    180px;

  box-sizing: border-box;
}









/* =========================================================
   STAGE
   ========================================================= */

.mandy-slider__stage {
  position: relative;

  width: 100%;
  min-height: 400px;

  overflow: visible !important;

  touch-action:
    pan-y;

  overscroll-behavior-x:
    none;

  user-select:
    none;

  -webkit-user-select:
    none;

  cursor:
    grab;

  transition:
    height 300ms ease;
}


.mandy-slider__stage:active {
  cursor:
    grabbing;
}


/* =========================================================
   DRAGGED SLIDER CARD
   ========================================================= */

.mandy-slider-card.is-dragging-card {
  translate:
    var(--mandy-slider-card-drag-x, 0px)
    0;

  transition:
    none !important;

  cursor:
    grabbing;

  will-change:
    translate;
}










/* =========================================================
   SLIDER NAVIGATION BUTTONS
   ========================================================= */

.mandy-slider__nav-button {
  position:
    absolute !important;

  z-index:
    8;

  margin:
    0 !important;
}


.mandy-slider__nav-button--prev
.mandy-icon-button__icon {
  transform:
    rotate(180deg);
}


.mandy-slider__nav-button:disabled {
  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;
}




/* =========================================================
   SLIDER CARD — BASE
   ========================================================= */

.mandy-slider-card {
  position: absolute;

  top: 0;
  left: 50%;

  width:
    min(
      568px,
      calc(100% - 48px)
    );

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  gap:
    var(--mandy-slider-card-gap);

  padding:
    24px 24px 42px;

  box-sizing: border-box;

  border: 0;
  border-radius: 38px;

  overflow: hidden;

  background-color:
    var(--mandy-dark-surface-container) !important;

  color:
    var(--mandy-dark-foreground-primary) !important;

  pointer-events: none;

  transform-origin: center top;

  transition:
    transform
      var(--mandy-slider-motion)
      cubic-bezier(0.45, 0, 0.55, 1),

    opacity
      var(--mandy-slider-motion)
      ease,

    box-shadow
      var(--mandy-slider-motion)
      ease,

    filter
      var(--mandy-slider-motion)
      ease,

    gap
      700ms
      cubic-bezier(0.22, 1, 0.36, 1);

  will-change:
    transform,
    opacity;

  container-type: inline-size;
}


/* Preview Card */

.mandy-slider-card:not(.is-active) {
  gap:
    var(--mandy-slider-card-gap-inactive);
}


/* =========================================================
   ACTIVE CARD
   ========================================================= */

.mandy-slider-card.is-active {
  opacity: 1;
  visibility: visible;

  pointer-events: auto;

  z-index: 4;

  transform:
    translateX(-50%)
    translateY(0)
    scale(1);

  box-shadow:
    0 424px 119px 0 rgba(0, 0, 0, 0),
    0 271px 108px 0 rgba(0, 0, 0, 0.01),
    0 152px 91px 0 rgba(0, 0, 0, 0.05),
    0 68px 68px 0 rgba(0, 0, 0, 0.09),
    0 17px 37px 0 rgba(0, 0, 0, 0.10);

  filter:
    brightness(1)
    blur(0);
}


.mandy-slider-card.is-active
.mandy-slider-card__image,
.mandy-slider-card.is-active
.mandy-slider-card__video {
  object-position: center top;
}


/* =========================================================
   PREVIOUS CARD
   ========================================================= */

.mandy-slider-card.is-prev {
  opacity: 1;
  visibility: visible;

  pointer-events: auto;

  z-index: 2;

  transform:
    translateX(
      calc(
        -50%
        - var(--mandy-slider-preview-offset)
      )
    )
    translateY(18px)
    scale(0.92);

  box-shadow: none;

  cursor: pointer;

  filter:
    brightness(0.78);
}


/* =========================================================
   NEXT CARD
   ========================================================= */

.mandy-slider-card.is-next {
  opacity: 1;
  visibility: visible;

  pointer-events: auto;

  z-index: 2;

  transform:
    translateX(
      calc(
        -50%
        + var(--mandy-slider-preview-offset)
      )
    )
    translateY(18px)
    scale(0.92);

  box-shadow: none;

  cursor: pointer;

  filter:
    brightness(0.78);
}


/* =========================================================
   HIDDEN CARD — LEFT
   ========================================================= */

.mandy-slider-card.is-before {
  opacity: 0;
  visibility: visible;

  z-index: 1;

  transform:
    translateX(
      calc(
        -50%
        - var(--mandy-slider-preview-offset)
        - 38%
      )
    )
    translateY(18px)
    scale(0.88);
}


/* =========================================================
   HIDDEN CARD — RIGHT
   ========================================================= */

.mandy-slider-card.is-after {
  opacity: 0;
  visibility: visible;

  z-index: 1;

  transform:
    translateX(
      calc(
        -50%
        + var(--mandy-slider-preview-offset)
        + 38%
      )
    )
    translateY(18px)
    scale(0.88);
}


/* =========================================================
   MEDIA
   ========================================================= */

.mandy-slider-card__media {
  position: relative;

  width: 100%;

  aspect-ratio: 16 / 9;

  flex: 0 0 auto;

  box-sizing: border-box;

  border:
    10px solid
    var(--mandy-navy-400);

  border-radius: 20px;

  overflow: hidden;

  background-color:
    var(--mandy-neutral-300);

  background-image:
    var(--mandy-slider-image, none);

  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  transition:
    aspect-ratio
      900ms
      cubic-bezier(0.4, 0, 0.2, 1);
}


/* Preview = 4:3 */

.mandy-slider-card:not(.is-active)
.mandy-slider-card__media {
  aspect-ratio: 4 / 3;
}


/* =========================================================
   IMAGE
   ========================================================= */

.mandy-slider-card__image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


/* =========================================================
   VIDEO
   ========================================================= */

.mandy-slider-card__video {
  position: absolute;

  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  border: 0;

  pointer-events: none;
}


/* =========================================================
   IMAGE DARKENING
   ========================================================= */

.mandy-slider-card__media::after {
  content: "";

  position: absolute;

  inset: 0;

  background-color:
    var(--mandy-dark-surface-page);

  opacity: 0;

  pointer-events: none;

  transition:
    opacity
      var(--mandy-slider-motion)
      ease;
}


.mandy-slider-card.is-prev
.mandy-slider-card__media::after,
.mandy-slider-card.is-next
.mandy-slider-card__media::after {
  opacity: 0.42;
}


.mandy-slider-card.is-before
.mandy-slider-card__media::after,
.mandy-slider-card.is-after
.mandy-slider-card__media::after {
  opacity: 0.55;
}


.mandy-slider-card.is-active
.mandy-slider-card__media::after {
  opacity: 0;
}


/* =========================================================
   BODY

   WICHTIG:
   KEINE feste/maximale Höhe mehr.
   Der Body wächst vollständig mit seinem Inhalt.
   ========================================================= */

.mandy-slider-card__body {
  display: flex;
  flex-direction: column;

  width: 100%;

  gap:
    var(--mandy-slider-body-gap);

  padding:
    0 20px;

  box-sizing: border-box;

  max-height: none;

  opacity: 1;

  overflow: visible;

  transition:
    opacity
      350ms
      ease
      180ms;
}


/* Preview Body einklappen */

.mandy-slider-card:not(.is-active)
.mandy-slider-card__body {
  max-height: 0;

  opacity: 0;

  overflow: hidden;

  pointer-events: none;

  transition:
    opacity
      200ms
      ease;
}


/* =========================================================
   COPY
   ========================================================= */

.mandy-slider-card__copy {
  display: flex;
  flex-direction: column;

  width: 100%;

  flex:
    0 0 auto;

  gap:
    var(--mandy-slider-copy-gap-dark);
}


/* =========================================================
   TITLE
   ========================================================= */

.mandy-slider-card__title {
  margin: 0 !important;
text-align: left !important;

  flex:
    0 0 auto;

  color:
    var(--mandy-dark-foreground-primary) !important;

  font-family:
    "Raleway",
    sans-serif !important;

  font-size:
    20px !important;

  font-style:
    normal !important;

  font-weight:
    600 !important;

  line-height:
    1.6 !important;

  letter-spacing:
    0 !important;

  text-transform:
    none !important;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.mandy-slider-card__description {
  margin: 0 !important;

  flex:
    0 0 auto;

  color:
    var(--mandy-dark-foreground-secondary) !important;

  font-family:
    "Raleway",
    sans-serif !important;

  font-size:
    16px !important;

  font-style:
    normal !important;

  font-weight:
    400 !important;

  line-height:
    160% !important;

  display:
    -webkit-box;

  -webkit-box-orient:
    vertical;

  -webkit-line-clamp:
    3;

  line-clamp:
    3;

  overflow:
    hidden;
}


/* =========================================================
   FOOTER
   ========================================================= */

.mandy-slider-card__footer {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  width: 100%;

  flex:
    0 0 auto;

  gap:
    var(--mandy-slider-footer-gap);
}


/* =========================================================
   PILLS
   ========================================================= */

.mandy-slider-card__pill-groups {
  display: flex;
  flex-direction: column;

  min-width: 0;
touch-action: auto;

  flex:
    1 1 auto;

  gap:
    var(--mandy-slider-pill-gap);
}


.mandy-slider .is-pill-scrollable,
.mandy-slider .is-pill-scrollable .mandy-pill {
  cursor: grab !important;
}

.mandy-slider .is-pill-dragging,
.mandy-slider .is-pill-dragging .mandy-pill {
  cursor: grabbing !important;
}



/* =========================================================
   CTA
   ========================================================= */

.mandy-slider-card__action {
  flex:
    0 0 auto;

  align-self:
    flex-end;
}


/* Preview Card:
   Klick aktiviert Card,
   nicht den Link */

.mandy-slider-card:not(.is-active)
.mandy-slider-card__action {
  pointer-events: none;
}






/* =========================================================
   SLIDER CARD — KEYBOARD FOCUS
   ========================================================= */

.mandy-slider-card:focus-visible {
  outline:
    3px solid
    var(--mandy-focus-blue) !important;

  outline-offset:
    4px !important;
}





/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

  .mandy-slider {
    --mandy-slider-preview-offset:
      70%;
  }

}
















/* =========================================================
   MOBILE — BASE SLIDER
   ========================================================= */

@media (max-width: 753px),
       (min-width: 1024px) and (max-width: 1140px) {

  .mandy-slider {
    --mandy-slider-preview-offset:
      82%;
  }


  .mandy-slider__viewport {
    padding:
      20px 0
      120px;
  }


  .mandy-slider-card {
    width:
      min(80.5vw, 450px);

    padding:
      12px 0 16px;

    gap:
      var(--mandy-slider-card-gap-mobile);

    border-radius:
      44px;
  }


  .mandy-slider-card:not(.is-active) {
    gap:
      var(--mandy-slider-card-gap-inactive);
  }


  .mandy-slider-card.is-prev,
  .mandy-slider-card.is-next {
    transform:
      translateX(
        calc(
          -50%
          + var(--mandy-slider-side, 0%)
        )
      )
      translateY(12px)
      scale(0.92);
  }


  .mandy-slider-card.is-prev {
    --mandy-slider-side:
      calc(
        var(--mandy-slider-preview-offset) * -1
      );
  }


  .mandy-slider-card.is-next {
    --mandy-slider-side:
      var(--mandy-slider-preview-offset);
  }


  .mandy-slider-card__media {
    width:
      calc(100% - 40px);

    margin-inline:
      20px;

    border-width:
      10px;

    border-radius:
      30px;
  }


  .mandy-slider-card__body {
    padding:
      0 20px;

    gap:
      var(--mandy-slider-body-gap-mobile);
  }


  .mandy-slider-card__title {
    font-size:
      16px !important;

    line-height:
      160% !important;
  }


  .mandy-slider-card__description {
    font-size:
      14px !important;

    line-height:
      160% !important;
  }


  .mandy-slider-card__footer {
    gap:
      var(--mandy-slider-footer-gap-mobile);
  }



.mandy-slider__nav-button {
  display: none !important;
}

}









/* =========================================================
   MOBILE — VITA START POSITION
   ========================================================= */

@media (max-width: 753px),
       (min-width: 1024px) and (max-width: 1140px) {

  /* Aktive Start-Card nach rechts */

  .mandy-slider[data-mandy-slider-start="last"]
  .mandy-slider-card:last-of-type.is-active {
    transform:
      translateX(calc(-50% + 5.75vw))
      translateY(-50%)
      scale(1);
  }


  /* Linke Preview exakt 12px daneben */

  .mandy-slider[data-mandy-slider-start="last"]
  .mandy-slider-card:nth-last-of-type(2).is-prev {
    transform:
      translateX(calc(-150% + 5.75vw - 12px))
      translateY(-50%)
      scale(1);
  }

}









/* =========================================================
   MOBILE — VITA END POSITION
   ========================================================= */

@media (max-width: 753px),
       (min-width: 1024px) and (max-width: 1140px) {

  /* Erste Card aktiv:
     aktive Card nach links */

  .mandy-slider[data-mandy-slider-start="last"]
  .mandy-slider-card:first-of-type.is-active {
    transform:
      translateX(calc(-50% - 5.75vw))
      translateY(-50%)
      scale(1);
  }


  /* Rechte Preview exakt 12px daneben */

  .mandy-slider[data-mandy-slider-start="last"]
  .mandy-slider-card:nth-of-type(2).is-next {
    transform:
      translateX(calc(50% - 5.75vw + 12px))
      translateY(-50%)
      scale(1);
  }

}















/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .mandy-slider-card,
  .mandy-slider-card__media,
  .mandy-slider-card__media::after,
  .mandy-slider__stage,
  .mandy-slider-card__body {
    transition:
      none !important;
  }

}


/* =========================================================
   MANDY CASE SLIDER — LIGHT
   ========================================================= */


/* =========================================================
   LIGHT CARD
   ========================================================= */

.mandy-case-slider--light
.mandy-slider-card {
  width:
    min(
      608px,
      calc(100% - 48px)
    );

  padding:
    20px 20px 40px;

  background-color:
    var(--mandy-light-surface-container) !important;

  color:
    var(--mandy-light-foreground-primary) !important;
}


/* =========================================================
   LIGHT PREVIEW CARD
   ========================================================= */

.mandy-case-slider--light
.mandy-slider-card:not(.is-active) {
  padding:
    16px;

  gap:
    var(--mandy-slider-card-gap-inactive);
}


/* =========================================================
   LIGHT MEDIA

   Innenradius = Außenradius.
   ========================================================= */

.mandy-case-slider--light
.mandy-slider-card__media {
  border:
    0;

  border-radius:
    inherit;

  overflow:
    hidden;
}


/* =========================================================
   LIGHT COPY

   Titel → Subline = IMMER 8px.
   Anzahl der Titelzeilen spielt keine Rolle.
   ========================================================= */

.mandy-case-slider--light
.mandy-slider-card__copy {
  gap:
    var(--mandy-slider-copy-gap-light);
}


/* =========================================================
   LIGHT TITLE
   ========================================================= */

.mandy-case-slider--light
.mandy-slider-card__title {
  color:
    var(--mandy-light-foreground-primary) !important;

  line-height:
    1.6 !important;
}


/* =========================================================
   LIGHT DESCRIPTION
   ========================================================= */

.mandy-case-slider--light
.mandy-slider-card__description {
  color:
    var(--mandy-light-foreground-secondary) !important;
}


/* Aktive Light Card:
   kompletter Text,
   keine Ellipsis */

.mandy-case-slider--light
.mandy-slider-card.is-active
.mandy-slider-card__description {
  display:
    block !important;

  max-height:
    none !important;

  overflow:
    visible !important;

  white-space:
    normal !important;

  text-overflow:
    clip !important;

  -webkit-line-clamp:
    unset !important;

  line-clamp:
    unset !important;

  -webkit-box-orient:
    initial !important;
}


/* =========================================================
   LIGHT BODY

   Keine Höhenbegrenzung.
   Description → Pills = 20px Desktop.
   ========================================================= */

.mandy-case-slider--light
.mandy-slider-card__body {
  max-height:
    none;

  overflow:
    visible;

  gap:
    var(--mandy-slider-body-gap);
}





/* CASE STUDIES — TITLE + CTA */

.mandy-case-slider--light:not(.mandy-vita-slider):not(.mandy-image-slider)
.mandy-slider-card__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title action"
    "description description"
    "pills pills";
  column-gap: 30px !important;
  row-gap: var(--mandy-slider-copy-gap-light) !important;
}

.mandy-case-slider--light:not(.mandy-vita-slider):not(.mandy-image-slider)
.mandy-slider-card__copy,
.mandy-case-slider--light:not(.mandy-vita-slider):not(.mandy-image-slider)
.mandy-slider-card__footer {
  display: contents;
}

.mandy-case-slider--light:not(.mandy-vita-slider):not(.mandy-image-slider)
.mandy-slider-card__title {
  grid-area: title;
  min-width: 0;
  align-self: center;
}

.mandy-case-slider--light:not(.mandy-vita-slider):not(.mandy-image-slider)
.mandy-slider-card__action {
  grid-area: action;
  align-self: center;
  justify-self: end;
}

.mandy-case-slider--light:not(.mandy-vita-slider):not(.mandy-image-slider)
.mandy-slider-card__description {
  grid-area: description;
  margin-bottom: 12px !important;
}

.mandy-case-slider--light:not(.mandy-vita-slider):not(.mandy-image-slider)
.mandy-pill-list {
  grid-area: pills;
}


/* =========================================================
   LIGHT FOCUS
   ========================================================= */


/* =========================================================
   LIGHT CASE SLIDER — MOBILE
   ========================================================= */

@media (max-width: 753px),
       (min-width: 1024px) and (max-width: 1140px) {

  .mandy-case-slider--light
  .mandy-slider-card {
    width:
      min(80.5vw, 450px);

    max-width:
      450px;
  }


  .mandy-case-slider--light
  .mandy-slider-card.is-active {
    padding:
      12px 0 16px;
  }


.mandy-case-slider--light
.mandy-slider-card__media {
  width:
    calc(100% - 24px);

  margin-inline:
    12px;

  border-radius:
    30px;
}


  .mandy-case-slider--light
  .mandy-slider-card__title {
    font-size:
      16px !important;

    line-height:
      160% !important;
  }


  .mandy-case-slider--light
  .mandy-slider-card__body {
    max-height:
      none;

    overflow:
      visible;

    gap:
      var(--mandy-slider-body-gap-mobile);
  }


  .mandy-case-slider--light
  .mandy-slider-card:not(.is-active)
  .mandy-slider-card__body {
    max-height:
      0;

    overflow:
      hidden;
  }

}
















@media (max-width: 767px) {

  .mandy-slider-card__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title action"
      "description description"
      "pills pills";
    column-gap: 16px;
  }

  .mandy-slider-card__copy,
  .mandy-slider-card__footer {
    display: contents;
  }

  .mandy-slider-card__title {
    grid-area: title;
    margin: 0;
   align-self: stretch;
width: 100%;
text-align: left !important;
  }

  .mandy-slider-card__description {
    grid-area: description;
  }

 .mandy-slider .mandy-pill-list {
  grid-area: pills;
}

  .mandy-slider-card__action {
    grid-area: action;
    align-self: center;
    justify-self: end;
  }

}










/* =========================================================
   LIGHT CASE SLIDER — COMPACT GRID FIX
   1024–1140px ONLY
   ========================================================= */

@media (min-width: 1024px) and (max-width: 1140px) {

  .mandy-case-slider--light:not(.mandy-vita-slider):not(.mandy-image-slider)
  .mandy-slider-card__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title action"
      "description description"
      "pills pills";
    column-gap: 16px;
  }

  .mandy-case-slider--light:not(.mandy-vita-slider):not(.mandy-image-slider)
  .mandy-slider-card__copy,
  .mandy-case-slider--light:not(.mandy-vita-slider):not(.mandy-image-slider)
  .mandy-slider-card__footer {
    display: contents;
  }

  .mandy-case-slider--light:not(.mandy-vita-slider):not(.mandy-image-slider)
  .mandy-slider-card__title {
    grid-area: title;
    align-self: stretch;
    width: 100%;
    text-align: left !important;
  }

  .mandy-case-slider--light:not(.mandy-vita-slider):not(.mandy-image-slider)
  .mandy-slider-card__description {
    grid-area: description;
  }

  .mandy-case-slider--light:not(.mandy-vita-slider):not(.mandy-image-slider)
  .mandy-slider-card__pill-groups,
  .mandy-case-slider--light:not(.mandy-vita-slider):not(.mandy-image-slider)
  .mandy-pill-list {
    grid-area: pills;
  }

  .mandy-case-slider--light:not(.mandy-vita-slider):not(.mandy-image-slider)
  .mandy-slider-card__action {
    grid-area: action;
    align-self: center;
    justify-self: end;
  }

}








/* =========================================================
   MOBILE — HORIZONTAL PILLS
   ========================================================= */

@media (max-width: 753px),
       (min-width: 1024px) and (max-width: 1140px) {

  /* DARK SLIDER:
     eigener Wrapper ist der Scroll-Container */

  .mandy-slider
  .mandy-slider-card__pill-groups {
    grid-area: pills;

    display: flex;
    flex-direction: row;
    align-items: center;

    width: calc(100% + 40px);
    height: 48px;

    margin-left: -20px;
    padding: 0 20px;

    box-sizing: border-box;

    overflow-x: auto;
    overflow-y: hidden;

    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }


  .mandy-slider
  .mandy-slider-card__pill-groups::-webkit-scrollbar {
    display: none;
  }


  .mandy-slider
  .mandy-slider-card__pill-groups
  .mandy-pill-list {
    flex-wrap: nowrap !important;
    flex: 0 0 auto;
  }


  /* LIGHT + VITA:
     dort liegt die Pill-List direkt im Footer */

  .mandy-case-slider--light
  .mandy-pill-list,

  .mandy-vita-slider
  .mandy-pill-list {
    grid-area: pills;

    width: calc(100% + 40px);
    height: 48px;

    margin-left: -20px !important;
    padding: 0 20px !important;

    box-sizing: border-box;

    flex-wrap: nowrap !important;

    overflow-x: auto;
    overflow-y: hidden;

    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }


  .mandy-case-slider--light
  .mandy-pill-list::-webkit-scrollbar,

  .mandy-vita-slider
  .mandy-pill-list::-webkit-scrollbar {
    display: none;
  }

}









/* =========================================================
   VITA SLIDER
   ========================================================= */


/* =========================================================
   VITA PILL SURFACE TOKENS

   Ausschließlich aus bestehenden Mandy Tokens abgeleitet.
   ========================================================= */

:root {

  --mandy-vita-pill-ux-surface:
    color-mix(
      in srgb,
      var(--mandy-highlight-yellow) 60%,
      transparent
    );

  --mandy-vita-pill-frontend-surface:
    color-mix(
      in srgb,
      var(--mandy-yellow-500) 60%,
      transparent
    );

  --mandy-vita-pill-print-surface:
    color-mix(
      in srgb,
      var(--mandy-coral-500) 40%,
      transparent
    );

  --mandy-vita-pill-brand-surface:
    color-mix(
      in srgb,
      var(--mandy-highlight-red) 45%,
      transparent
    );

  --mandy-vita-pill-motion-surface:
    color-mix(
      in srgb,
      var(--mandy-peach-500) 60%,
      transparent
    );

  --mandy-vita-pill-iconography-surface:
    var(--mandy-primary-100);

  --mandy-vita-pill-ui-library-surface:
    var(--mandy-primary-50);

  --mandy-vita-pill-design-system-surface:
    color-mix(
      in srgb,
      var(--mandy-navy-100) 20%,
      transparent
    );

  --mandy-vita-pill-research-surface:
    color-mix(
      in srgb,
      var(--mandy-focus-blue) 18%,
      transparent
    );

  --mandy-vita-pill-web-surface:
    color-mix(
      in srgb,
      var(--mandy-blue-500) 60%,
      transparent
    );

  --mandy-vita-pill-visual-surface:
    color-mix(
      in srgb,
      var(--mandy-ocean-500) 55%,
      transparent
    );

  --mandy-vita-pill-illustration-surface:
    color-mix(
      in srgb,
      var(--mandy-green-500) 50%,
      transparent
    );

  --mandy-vita-pill-infographic-surface:
    color-mix(
      in srgb,
      var(--mandy-highlight-green) 60%,
      transparent
    );

}



/* =========================================================
   VITA PILL – SHARED FOREGROUND
   ========================================================= */

.mandy-vita-pill {
  color:
    var(--mandy-light-foreground-primary) !important;
}


/* Zusatztext in einer Pill:
   z.B. (WordPress) / (AI-assisted)
   bleibt exakt dieselbe Textfarbe. */

.mandy-vita-pill span {
  color:
    inherit !important;

  font:
    inherit !important;
}



/* =========================================================
   VITA PILL COLORS
   ========================================================= */

.mandy-vita-pill--ux {
  background-color:
    var(--mandy-vita-pill-ux-surface) !important;
}


.mandy-vita-pill--frontend {
  background-color:
    var(--mandy-vita-pill-frontend-surface) !important;
}


.mandy-vita-pill--print {
  background-color:
    var(--mandy-vita-pill-print-surface) !important;
}


.mandy-vita-pill--brand {
  background-color:
    var(--mandy-vita-pill-brand-surface) !important;
}


.mandy-vita-pill--motion {
  background-color:
    var(--mandy-vita-pill-motion-surface) !important;
}


.mandy-vita-pill--iconography {
  background-color:
    var(--mandy-vita-pill-iconography-surface) !important;
}


.mandy-vita-pill--ui-library {
  background-color:
    var(--mandy-vita-pill-ui-library-surface) !important;
}


.mandy-vita-pill--design-system {
  background-color:
    var(--mandy-vita-pill-design-system-surface) !important;
}


.mandy-vita-pill--research {
  background-color:
    var(--mandy-vita-pill-research-surface) !important;
}


.mandy-vita-pill--web {
  background-color:
    var(--mandy-vita-pill-web-surface) !important;
}


/* Visual Design + Editorial Design */

.mandy-vita-pill--visual {
  background-color:
    var(--mandy-vita-pill-visual-surface) !important;
}


/* Illustration + Scribbles */

.mandy-vita-pill--illustration {
  background-color:
    var(--mandy-vita-pill-illustration-surface) !important;
}


.mandy-vita-pill--infographic {
  background-color:
    var(--mandy-vita-pill-infographic-surface) !important;
}

/* =========================================================
   VITA SLIDER – MEDIA FORMAT

   Nur dieser Slider.
   Normale Slider bleiben 16:9 / 4:3.
   ========================================================= */

.mandy-vita-slider
.mandy-slider-card__media {
  aspect-ratio:
    861 / 744;
}


/* Auch Preview bleibt im Vita-Format */

.mandy-vita-slider
.mandy-slider-card:not(.is-active)
.mandy-slider-card__media {
  aspect-ratio:
    861 / 744;
}



/* =========================================================
   VITA FOOTER
   ========================================================= */

.mandy-vita-slider
.mandy-slider-card__footer {
  align-items:
    flex-start;

  justify-content:
    flex-start;
}



/* =========================================================
   VITA TEXT LINK
   ========================================================= */

.mandy-vita-slider__text-link,
.mandy-vita-slider__text-link:link,
.mandy-vita-slider__text-link:visited {
  color:
    inherit !important;

  text-decoration:
    underline !important;

  text-underline-offset:
    3px;
}




/* =========================================================
   VITA SLIDER — TITLE + CTA + TEXT
   ALL BREAKPOINTS
   ========================================================= */

.mandy-vita-slider
.mandy-slider-card__body {
  display:
    grid !important;

  grid-template-columns:
    minmax(0, 1fr) auto !important;

  grid-template-areas:
    "title action"
    "description description"
    "pills pills";

  column-gap:
    16px;

  row-gap:
    var(--mandy-slider-body-gap-mobile);

  width:
    100% !important;
}


.mandy-vita-slider
.mandy-slider-card__copy,
.mandy-vita-slider
.mandy-slider-card__footer {
  display:
    contents !important;
}


/* TITLE — 16px */

.mandy-vita-slider
.mandy-slider-card__title {
  grid-area:
    title;

  align-self:
    stretch;

  width:
    100%;

  font-size:
    16px !important;

  line-height:
    160% !important;

  text-align:
    left !important;
}


/* DESCRIPTION — 14px */

.mandy-vita-slider
.mandy-slider-card__description {
  grid-area:
    description;

  font-size:
    14px !important;

  line-height:
    160% !important;
}



/* PILLS */

.mandy-vita-slider
.mandy-pill-list {
  grid-area:
    pills;
}




/* CTA TOP RIGHT — 32px */

.mandy-vita-slider
.mandy-slider-card__action {
  grid-area:
    action;

  align-self:
    center;

  justify-self:
    end;

  width: 32px !important;
  height: 32px !important;

  min-width: 32px !important;
  min-height: 32px !important;

  max-width: 32px !important;
  max-height: 32px !important;

  padding: 4px;

  flex: 0 0 32px;
}











/* =========================================================
   MOBILE — PREVIEW CARD LOGIC
   ========================================================= */

@media (max-width: 753px),
       (min-width: 1024px) and (max-width: 1140px) {

					 
					 
					 
					 
					 
					 
					 
  /* =========================================================
   MOBILE — HORIZONTAL CARD TRACK
   ========================================================= */



					 
					 
/* Alle Cards benutzen dieselbe vertikale Achse */

.mandy-slider
.mandy-slider-card {
  top: 50%;
}


/* ACTIVE */

.mandy-slider
.mandy-slider-card.is-active {
  transform:
    translateX(-50%)
    translateY(-50%)
    scale(1);
}


/* PREVIOUS — 12px links */

.mandy-slider
.mandy-slider-card.is-prev {
  transform:
    translateX(calc(-150% - 12px))
    translateY(-50%)
    scale(1);
}


/* NEXT — 12px rechts */

.mandy-slider
.mandy-slider-card.is-next {
  transform:
    translateX(calc(50% + 12px))
    translateY(-50%)
    scale(1);
}


/* HIDDEN LEFT */

.mandy-slider
.mandy-slider-card.is-before {
  transform:
    translateX(calc(-250% - 24px))
    translateY(-50%)
    scale(1);
}


/* HIDDEN RIGHT */

.mandy-slider
.mandy-slider-card.is-after {
  transform:
    translateX(calc(150% + 24px))
    translateY(-50%)
    scale(1);
}
					 
					 

					 
					 
					 
/* =========================================================
   MOBILE — DRAG WHOLE CARD TRACK
   ========================================================= */

.mandy-slider.is-dragging-slider
.mandy-slider-card {
  translate:
    var(--mandy-slider-drag-x, 0px)
    0;

  transition:
    none !important;
}					 
					 
					 
					 
			/* =========================================================
   MOBILE — SETTLE CARD TRACK
   ========================================================= */

.mandy-slider.is-settling-slider
.mandy-slider-card {
  translate:
    var(--mandy-slider-drag-x, 0px)
    0;

  transition:
    transform 320ms cubic-bezier(0.32, 0.72, 0, 1),
    translate 320ms cubic-bezier(0.32, 0.72, 0, 1) !important;
}		 
					 
		
					 
					 
/* =========================================================
   MOBILE — PREVIEW SAME AS ACTIVE
   ========================================================= */

.mandy-slider
.mandy-slider-card.is-prev,

.mandy-slider
.mandy-slider-card.is-next {
  padding:
    12px 0 16px;

  gap:
    var(--mandy-slider-card-gap-mobile);

  filter:
    none;

  box-shadow:
    none;
}					 
					 
					 
					 
		/* =========================================================
   MOBILE — PREVIEW DESCRIPTION SAME AS ACTIVE
   ========================================================= */

.mandy-case-slider--light
.mandy-slider-card.is-prev
.mandy-slider-card__description,

.mandy-case-slider--light
.mandy-slider-card.is-next
.mandy-slider-card__description,

.mandy-vita-slider
.mandy-slider-card.is-prev
.mandy-slider-card__description,

.mandy-vita-slider
.mandy-slider-card.is-next
.mandy-slider-card__description {
  display:
    block !important;

  max-height:
    none !important;

  overflow:
    visible !important;

  white-space:
    normal !important;

  text-overflow:
    clip !important;

  -webkit-line-clamp:
    unset !important;

  line-clamp:
    unset !important;

  -webkit-box-orient:
    initial !important;
}			 
					 
					 
					 
					 
					 
					 

  /* Preview Body NICHT mehr einklappen */

  .mandy-slider
  .mandy-slider-card.is-prev
  .mandy-slider-card__body,

  .mandy-slider
  .mandy-slider-card.is-next
  .mandy-slider-card__body {
    max-height:
      none !important;

    opacity:
      1 !important;

    overflow:
      visible !important;

    pointer-events:
      none;
  }


  /* Preview-Bild behält dasselbe Format wie Active */

  .mandy-slider
  .mandy-slider-card.is-prev
  .mandy-slider-card__media,

  .mandy-slider
  .mandy-slider-card.is-next
  .mandy-slider-card__media {
    aspect-ratio:
      16 / 9;
  }


  .mandy-vita-slider
  .mandy-slider-card.is-prev
  .mandy-slider-card__media,

  .mandy-vita-slider
  .mandy-slider-card.is-next
  .mandy-slider-card__media,

  .mandy-image-slider
  .mandy-slider-card.is-prev
  .mandy-slider-card__media,

  .mandy-image-slider
  .mandy-slider-card.is-next
  .mandy-slider-card__media {
    aspect-ratio:
      861 / 744;
  }


  /* Alte Bild-Abdunklung aus */

  .mandy-slider
  .mandy-slider-card.is-prev
  .mandy-slider-card__media::after,

  .mandy-slider
  .mandy-slider-card.is-next
  .mandy-slider-card__media::after {
    opacity:
      0 !important;
  }

					 
					 
					 
					 
					 
					 

  /* Ganze Preview Card abdunkeln:
     Navy 500 / 80% */

  .mandy-slider
.mandy-slider-card::after {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 20;

  border-radius:
    inherit;

  background-color:
    color-mix(
      in srgb,
      var(--mandy-navy-500) 80%,
      transparent
    );

  opacity: 1;

  pointer-events:
    none;

  transition:
    opacity 320ms ease;
}


.mandy-slider
.mandy-slider-card.is-active::after {
  opacity: 0;
}
					 
					 
					 
					 
					 
					 
					 

  /* Normale Slider:
     nur nächste Card rechts zeigen */

  .mandy-slider:not([data-mandy-slider-start="last"])
  .mandy-slider-card.is-prev {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }






}







/* =========================================================
   MOBILE — LIGHT CASE CAROUSEL
   ========================================================= */

@media (max-width: 753px),
       (min-width: 1024px) and (max-width: 1140px) {

  
/* Alle Light-Carousel-Cards behalten immer dasselbe Bildformat */

.mandy-case-slider--light:not(.mandy-vita-slider):not(.mandy-image-slider)
.mandy-slider-card__media {
  aspect-ratio:
    16 / 9 !important;

  transition:
    none !important;
}
					 
					 /* Bild immer oben ausrichten */

.mandy-case-slider--light:not(.mandy-vita-slider):not(.mandy-image-slider)
.mandy-slider-card__image {
  object-position:
    center top !important;
}


/* Nach dem Start:
     linke UND rechte Preview sichtbar */

  .mandy-case-slider--light:not(.mandy-vita-slider)
  .mandy-slider-card.is-prev {
    opacity:
      1 !important;

    visibility:
      visible !important;

    pointer-events:
      auto !important;
  }


  /* =======================================================
     ERSTE STARTPOSITION
     Links nichts, nächste Card rechts
     ======================================================= */

  .mandy-case-slider--light:not(.mandy-vita-slider)
  .is-slider-start:not(.has-left-start)
  .mandy-slider-card.is-active {
    transform:
      translateX(calc(-50% - 5.75vw))
      translateY(-50%)
      scale(1);
  }


  .mandy-case-slider--light:not(.mandy-vita-slider)
  .is-slider-start:not(.has-left-start)
  .mandy-slider-card.is-next {
    transform:
      translateX(calc(50% - 5.75vw + 12px))
      translateY(-50%)
      scale(1);
  }


  /* Linke Loop-Card nur beim ALLERERSTEN Zustand verstecken */

  .mandy-case-slider--light:not(.mandy-vita-slider)
  .is-slider-start:not(.has-left-start)
  .mandy-slider-card.is-prev {
    opacity:
      0 !important;

    visibility:
      hidden !important;

    pointer-events:
      none !important;
  }

}











/* =========================================================
   MOBILE — DARK MANDY SLIDER
   ========================================================= */

@media (max-width: 753px),
       (min-width: 1024px) and (max-width: 1140px) {
					 
					 
					 
					 /* =======================================================
   DARK SLIDER — ALLE CARDS IDENTISCHE GEOMETRIE
   ======================================================= */

.mandy-slider:not(.mandy-case-slider--light):not(.mandy-image-slider)
.mandy-slider-card {
  gap:
    var(--mandy-slider-card-gap-mobile) !important;
}


/* Bildformat ändert sich NIEMALS */

/* Bild / Media verändert sich in keinem Card-State */

.mandy-slider:not(.mandy-case-slider--light):not(.mandy-image-slider)
.mandy-slider-card__media {
  width:
    calc(100% - 40px) !important;

  margin-inline:
    20px !important;

  aspect-ratio:
    16 / 9 !important;

  border-width:
    10px !important;

  border-style:
    solid !important;

  border-color:
    var(--mandy-navy-400) !important;

  border-radius:
    30px !important;

  overflow:
    hidden !important;
		
		-webkit-clip-path:
  inset(0 round 30px);

clip-path:
  inset(0 round 30px);

-webkit-backface-visibility:
  hidden;

backface-visibility:
  hidden;

transform:
  translateZ(0);

  background-position:
    center top !important;

  background-size:
    cover !important;

  background-repeat:
    no-repeat !important;

  transition:
    none !important;
}


/* Auch echte IMG- und Video-Elemente immer oben */

.mandy-slider:not(.mandy-case-slider--light):not(.mandy-image-slider)
.mandy-slider-card__image,

.mandy-slider:not(.mandy-case-slider--light):not(.mandy-image-slider)
.mandy-slider-card__video {
  object-position:
    center top !important;
}


/* Die kommende Nachbar-Card fährt bereits mit der Schiene herein */

.mandy-slider:not(.mandy-case-slider--light):not(.mandy-image-slider)
.mandy-slider-card.is-swipe-future-neighbor {
  opacity:
    1 !important;

  visibility:
    visible !important;

  pointer-events:
    none !important;
}
					 
					 
					 
					 
					 

/* Body bleibt auch bei nachrückenden Cards vollständig bestehen */

.mandy-slider:not(.mandy-case-slider--light):not(.mandy-image-slider)
.mandy-slider-card__body {
  max-height:
    none !important;

  opacity:
    1 !important;

  overflow:
    visible !important;
}

  /* =======================================================
     LINKS + RECHTS PREVIEW IMMER SICHTBAR
     ======================================================= */

  .mandy-slider:not(.mandy-case-slider--light):not(.mandy-image-slider)
  .mandy-slider-card.is-prev,

  .mandy-slider:not(.mandy-case-slider--light):not(.mandy-image-slider)
  .mandy-slider-card.is-next {
    opacity:
      1 !important;

    visibility:
      visible !important;
  }


  /* =======================================================
     TEXT SCHARF
     Abdunklung kommt ausschließlich über den Overlay
     ======================================================= */

  .mandy-slider:not(.mandy-case-slider--light):not(.mandy-image-slider)
  .mandy-slider-card {
    filter:
      none !important;
  }


  
}





/* =======================================================
     TITLE + BUTTON OBEN
     ======================================================= */

  .mandy-slider:not(.mandy-case-slider--light):not(.mandy-image-slider)
  .mandy-slider-card__body {
    display:
      grid !important;

    grid-template-columns:
      minmax(0, 1fr) auto !important;

    grid-template-areas:
      "title action"
      "description description"
      "pills pills";

    column-gap:
      16px;
  }


  .mandy-slider:not(.mandy-case-slider--light):not(.mandy-image-slider)
  .mandy-slider-card__copy,

  .mandy-slider:not(.mandy-case-slider--light):not(.mandy-image-slider)
  .mandy-slider-card__footer {
    display:
      contents !important;
  }


  .mandy-slider:not(.mandy-case-slider--light):not(.mandy-image-slider)
  .mandy-slider-card__title {
    grid-area:
      title;
  }


  .mandy-slider:not(.mandy-case-slider--light):not(.mandy-image-slider)
  .mandy-slider-card__description {
    grid-area:
      description;
  }


  .mandy-slider:not(.mandy-case-slider--light):not(.mandy-image-slider)
  .mandy-slider-card__pill-groups {
    grid-area:
      pills;
  }


  .mandy-slider:not(.mandy-case-slider--light):not(.mandy-image-slider)
  .mandy-slider-card__action {
    grid-area:
      action;

    align-self:
      center;

    justify-self:
      end;
  }








/* =========================================================
   MANDY IMAGE SLIDER
   Uses existing Mandy Slider mechanics
   ========================================================= */

.mandy-image-slider
.mandy-slider-card__media {
  aspect-ratio: 861 / 744;
}


/* Preview darf NICHT wieder auf 4:3 wechseln */

.mandy-image-slider
.mandy-slider-card:not(.is-active)
.mandy-slider-card__media {
  aspect-ratio: 861 / 744;
}


/* Weniger Platz, weil kein Footer / keine Pills / kein CTA */

.mandy-image-slider
.mandy-slider-card__body {
  gap: 0;
}


/* Copy kompakt */

.mandy-image-slider
.mandy-slider-card__copy {
  gap: 8px;
}


/* Optional etwas weniger Bottom Padding */

.mandy-image-slider
.mandy-slider-card {
  padding-bottom: 28px;
}









/* =========================================================
   MOBILE — IMAGE SLIDER POSITION + BOTTOM PADDING
   ========================================================= */

@media (max-width: 753px),
       (min-width: 1024px) and (max-width: 1140px) {

  /* 20px mehr Bottom Padding */

  .mandy-image-slider
  .mandy-slider-card {
    padding-bottom:
      48px !important;
  }


  /* Alte Regel überschreiben:
     Image Slider darf links UND rechts Preview zeigen */

  .mandy-image-slider
  .mandy-slider-card.is-prev,

  .mandy-image-slider
  .mandy-slider-card.is-next {
    opacity:
      1 !important;

    visibility:
      visible !important;
  }


  /* START:
     erste Card nach links */

  .mandy-image-slider
  .mandy-slider-card:first-of-type.is-active {
    transform:
      translateX(calc(-50% - 5.75vw))
      translateY(-50%)
      scale(1);
  }


  /* Rechte Preview 12px daneben */

  .mandy-image-slider
  .mandy-slider-card:nth-of-type(2).is-next {
    transform:
      translateX(calc(50% - 5.75vw + 12px))
      translateY(-50%)
      scale(1);
  }


  /* ENDE:
     letzte Card nach rechts */

  .mandy-image-slider
  .mandy-slider-card:last-of-type.is-active {
    transform:
      translateX(calc(-50% + 5.75vw))
      translateY(-50%)
      scale(1);
  }


  /* Linke Preview 12px daneben */

  .mandy-image-slider
  .mandy-slider-card:nth-last-of-type(2).is-prev {
    transform:
      translateX(calc(-150% + 5.75vw - 12px))
      translateY(-50%)
      scale(1);
  }

}


  




/* =========================================================
   MOBILE — ALL SLIDERS STABLE CARDS + CLEAN OVERLAY
   ACTIVE + INACTIVE = IDENTISCHE GEOMETRIE
   ========================================================= */

@media (max-width: 753px),
       (min-width: 1024px) and (max-width: 1140px) {

  /* =======================================================
     CARD

     Kein Unterschied mehr zwischen
     active / prev / next / before / after.
     ======================================================= */

  .mandy-slider
  .mandy-slider-card {
    padding:
      12px 0 16px !important;

    gap:
      var(--mandy-slider-card-gap-mobile) !important;

    filter:
      none !important;

    isolation:
      isolate;

    -webkit-backface-visibility:
      hidden;

    backface-visibility:
      hidden;
  }


  /* Image Slider behält nur sein eigenes
     größeres Bottom Padding */

  .mandy-image-slider
  .mandy-slider-card {
    padding-bottom:
      48px !important;
  }


  /* =======================================================
     BODY

     Inhalt bleibt in JEDEM Zustand vollständig bestehen.
     Keine Card klappt beim Rein-/Rausfahren zusammen.
     ======================================================= */

  .mandy-slider
  .mandy-slider-card__body {
    max-height:
      none !important;

    opacity:
      1 !important;

    overflow:
      visible !important;
  }


  /* =======================================================
     DESCRIPTION

     Light + Vita benutzen in jedem Zustand
     denselben vollständigen Text.
     ======================================================= */

  .mandy-case-slider--light
  .mandy-slider-card__description,

  .mandy-vita-slider
  .mandy-slider-card__description {
    display:
      block !important;

    max-height:
      none !important;

    overflow:
      visible !important;

    white-space:
      normal !important;

    text-overflow:
      clip !important;

    -webkit-line-clamp:
      unset !important;

    line-clamp:
      unset !important;

    -webkit-box-orient:
      initial !important;
  }


  /* =======================================================
     MEDIA — GEMEINSAM

     Größe, Radius und Bildausschnitt verändern sich
     beim State-Wechsel niemals.
     ======================================================= */

  .mandy-slider
  .mandy-slider-card__media {
    aspect-ratio:
      16 / 9 !important;

    border-radius:
      30px !important;

    overflow:
      hidden !important;

    background-position:
      center top !important;

    background-size:
      cover !important;

    background-repeat:
      no-repeat !important;

    transition:
      none !important;

    -webkit-clip-path:
      inset(0 round 30px);

    clip-path:
      inset(0 round 30px);

    -webkit-backface-visibility:
      hidden;

    backface-visibility:
      hidden;
  }


  /* Vita + Image Slider behalten ihr eigenes Bildformat,
     ebenfalls in JEDEM State */

  .mandy-vita-slider
  .mandy-slider-card__media,

  .mandy-image-slider
  .mandy-slider-card__media {
    aspect-ratio:
      861 / 744 !important;
  }


  /* Echte Bilder + Videos:
     Ausschnitt immer identisch und oben ausgerichtet */

  .mandy-slider
  .mandy-slider-card__image,

  .mandy-slider
  .mandy-slider-card__video {
    object-position:
      center top !important;
  }


  /* =======================================================
     ALTE BILD-ABDUNKLUNG KOMPLETT AUS

     Abdunklung passiert mobil ausschließlich
     über den Overlay der gesamten Card.
     ======================================================= */

  .mandy-slider
  .mandy-slider-card__media::after {
    opacity:
      0 !important;

    transition:
      none !important;
  }


  /* =======================================================
     GANZE CARD — OVERLAY

     Überdeckt auch Safari-Antialiasing-Kanten,
     damit keine weißen Blitzer entstehen.
     ======================================================= */

  .mandy-slider
  .mandy-slider-card::after {
    inset:
      -2px !important;

    border-radius:
      inherit;

    box-shadow:
      inset 0 0 0 2px
      var(--mandy-navy-500);
  }

}














/* =========================================================
   LARGE SLIDERS — UNIFIED PREVIEW
   ========================================================= */

@media (min-width: 754px) and (max-width: 1023px),
       (min-width: 1141px) {
					 
					 
					 
					 


/* =======================================================
   VITA ONLY — COMPACT LARGE CARD
   ======================================================= */

.mandy-vita-slider
.mandy-slider-card {
  width:
    min(547.2px, calc(90% - 43.2px));

  padding-bottom:
    12px;
}


/* Titel/CTA → Subline: 8px */

.mandy-vita-slider
.mandy-slider-card__body {
  row-gap:
    8px;
}


/* Subline → Pills: insgesamt 16px */

.mandy-vita-slider
.mandy-slider-card__description {
  margin-bottom:
    8px !important;
}




  /* =======================================================
     PREVIEW CARDS VERTIKAL ZENTRIEREN
     ======================================================= */

.mandy-slider
.mandy-slider-card {
  top:
    50%;

  transform-origin:
    center center;
}


/* Active bleibt auf derselben vertikalen Achse */

.mandy-slider
.mandy-slider-card.is-active {
  transform:
    translateX(-50%)
    translateY(-50%)
    scale(1);
}


  .mandy-slider
  .mandy-slider-card.is-prev {
    transform:
      translateX(
        calc(
          -50% -
          var(--mandy-slider-preview-offset)
        )
      )
      translateY(-50%)
      scale(0.92);
  }


  .mandy-slider
  .mandy-slider-card.is-next {
    transform:
      translateX(
        calc(
          -50% +
          var(--mandy-slider-preview-offset)
        )
      )
      translateY(-50%)
      scale(0.92);
  }


  .mandy-slider
  .mandy-slider-card.is-before {
    transform:
      translateX(
        calc(
          -50% -
          var(--mandy-slider-preview-offset) -
          38%
        )
      )
      translateY(-50%)
      scale(0.88);
  }


  .mandy-slider
  .mandy-slider-card.is-after {
    transform:
      translateX(
        calc(
          -50% +
          var(--mandy-slider-preview-offset) +
          38%
        )
      )
      translateY(-50%)
      scale(0.88);
  }


  /* =======================================================
     EINHEITLICHER 80%-OVERLAY
     Keine zusätzliche Brightness / Bild-Abdunklung
     ======================================================= */

  .mandy-slider
  .mandy-slider-card.is-prev,

  .mandy-slider
  .mandy-slider-card.is-next {
    filter:
      none !important;
  }


  .mandy-slider
  .mandy-slider-card__media::after {
    opacity:
      0 !important;
  }


  .mandy-slider
  .mandy-slider-card::after {
    content:
      "";

    position:
      absolute;

    inset:
      -2px;

    z-index:
      20;

    border-radius:
      inherit;

    background-color:
      color-mix(
        in srgb,
        var(--mandy-navy-500) 90%,
        transparent
      );

    box-shadow:
      inset 0 0 0 2px
      var(--mandy-navy-500);

    opacity:
      1;

    pointer-events:
      none;

    transition:
      opacity 320ms ease;
  }


  .mandy-slider
  .mandy-slider-card.is-active::after {
    opacity:
      0;
  }


  
/* =======================================================
   VITA ONLY — FULL WIDTH PILL SCROLLER
   ======================================================= */

.mandy-vita-slider
.mandy-pill-list {
  grid-area: pills;

  display: flex !important;
  align-items: center;

  flex-wrap: nowrap !important;

  min-width: 0;
  max-width: none !important;

  width: calc(100% + 80px);
  height: 48px;

  margin-left: -40px !important;
  padding: 0 40px !important;

  box-sizing: border-box;

  overflow-x: auto;
  overflow-y: hidden;

  overscroll-behavior-x: contain;

  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}


.mandy-vita-slider
.mandy-pill-list::-webkit-scrollbar {
  display: none;
}




}








/* =========================================================
   MANDY SLIDER — UNIFIED CTA ARROW
   All slider cards
   ========================================================= */

/* Altes CTA-Icon ausblenden */

.mandy-slider
.mandy-slider-card__action
.mandy-icon-button__icon {
  display: none !important;
}


/* Neues SVG als 24 × 24 Icon */

.mandy-slider
.mandy-slider-card__action::before {
  content: "";

  display: block;

  width: 24px;
  height: 24px;
  flex: 0 0 24px;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5.5 12L18 12' stroke='%23EEEDF7' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M12.3638 5.63574L18.0206 11.2926C18.4111 11.6831 18.4111 12.3163 18.0206 12.7068L12.3638 18.3637' stroke='%23EEEDF7' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");

  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px 24px;

  pointer-events: none;
}























/* =========================================================
   CONTACT BUTTON – AVADA HOVER MOVEMENT RESET
   ========================================================= */

#formovic .mandy-form-submit .fusion-button {
  column-gap: 4px !important;
}


/* Avadas verschiebbaren Text festsetzen */

#formovic .mandy-form-submit .fusion-button-text,
#formovic .mandy-form-submit .awb-button__text {
  position: static !important;
  inset: auto !important;

  display: inline-block !important;
  width: auto !important;

  opacity: 1 !important;
  visibility: visible !important;

  transform: none !important;
  transition: none !important;
}


/* Eventuell vorhandenen Hover-Text vollständig ausblenden */

#formovic
.mandy-form-submit
.awb-button__text--hover {
  display: none !important;
}


/* Keine zusätzliche Avada-Grafik */

#formovic .mandy-form-submit .fusion-button::before {
  content: none !important;
  display: none !important;
}


/* Unser Chevron bleibt an derselben Position */

#formovic .mandy-form-submit .fusion-button::after,
#formovic .mandy-form-submit .fusion-button:hover::after,
#formovic .mandy-form-submit .fusion-button:focus::after,
#formovic .mandy-form-submit .fusion-button:active::after {
  position: static !important;
  margin: 0 !important;

  transform: none !important;
  transition: none !important;
}


/* Auch beim Klick keine Bewegung des gesamten Inhalts */

#formovic .mandy-form-submit .fusion-button:active {
  transform: none !important;
}












/* =========================================================
   CONTACT FORM – PRIMARY XL SUBMIT BUTTON
   ========================================================= */

#formovic .mandy-form-submit {
  width: 100% !important;
  margin: 0 !important;
}


/* Avada Submit Button */

#formovic .mandy-form-submit button[type="submit"],
#formovic .mandy-form-submit .fusion-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;

  width: 100% !important;
  min-height: 64px !important;
  padding: 20px 12px !important;

  box-sizing: border-box !important;

  border: 0 !important;
  border-radius: 20px !important;

  background: var(--mandy-light-action-primary-surface) !important;
  background-image: none !important;

  color: var(--mandy-light-action-primary-foreground) !important;

  font-family: "Roboto Mono", monospace !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 24px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;

  box-shadow: none !important;
  outline: none !important;
  transform: none !important;

  cursor: pointer !important;

  transition:
    background-color 0.2s ease,
    color 0.2s ease !important;
}


/* Avada-Text übernimmt die Buttonfarbe */

#formovic .mandy-form-submit .fusion-button-text {
  color: inherit !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
}










/* Dekorativer Chevron:
   24 × 24 px Icon-Container
   sichtbarer Pfeil 6 × 10 px */

#formovic .mandy-form-submit button[type="submit"]::after,
#formovic .mandy-form-submit .fusion-button::after {
  content: "" !important;

  display: block !important;
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;

  background-color: currentColor !important;

  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='10' viewBox='0 0 6 10' fill='none'%3E%3Cpath d='M0.292892 0.292892C0.683416 -0.0976299 1.31643 -0.0976312 1.70695 0.292892L5.35344 3.93938L5.45598 4.05363C5.9364 4.64277 5.90253 5.51132 5.35344 6.06047L1.70695 9.70695C1.31645 10.0974 0.683411 10.0974 0.292892 9.70695C-0.0975844 9.31644 -0.0975854 8.68341 0.292892 8.29289L3.58586 4.99992L0.292892 1.70695C-0.09763 1.31643 -0.0976311 0.683414 0.292892 0.292892Z' fill='black'/%3E%3C/svg%3E") !important;

  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='10' viewBox='0 0 6 10' fill='none'%3E%3Cpath d='M0.292892 0.292892C0.683416 -0.0976299 1.31643 -0.0976312 1.70695 0.292892L5.35344 3.93938L5.45598 4.05363C5.9364 4.64277 5.90253 5.51132 5.35344 6.06047L1.70695 9.70695C1.31645 10.0974 0.683411 10.0974 0.292892 9.70695C-0.0975844 9.31644 -0.0975854 8.68341 0.292892 8.29289L3.58586 4.99992L0.292892 1.70695C-0.09763 1.31643 -0.0976311 0.683414 0.292892 0.292892Z' fill='black'/%3E%3C/svg%3E") !important;

  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;

  -webkit-mask-position: center !important;
  mask-position: center !important;

  -webkit-mask-size: 6px 10px !important;
  mask-size: 6px 10px !important;
}







/* Hover */

#formovic .mandy-form-submit button[type="submit"]:hover,
#formovic .mandy-form-submit .fusion-button:hover {
  background: var(--mandy-light-action-hover-surface) !important;
  background-image: none !important;

  color: var(--mandy-light-action-hover-foreground) !important;

  box-shadow: none !important;
  transform: none !important;
}


/* Sichtbarer Tastaturfokus */

#formovic .mandy-form-submit button[type="submit"]:focus-visible,
#formovic .mandy-form-submit .fusion-button:focus-visible {
  outline: 3px solid var(--mandy-light-action-focus-ring) !important;
  outline-offset: -3px !important;

  box-shadow: none !important;
}


/* Gedrückter Zustand */

#formovic .mandy-form-submit button[type="submit"]:active,
#formovic .mandy-form-submit .fusion-button:active {
  transform: translateY(1px) !important;
}


/* Disabled / laufender Versand */

#formovic .mandy-form-submit button[type="submit"]:disabled,
#formovic .mandy-form-submit .fusion-button:disabled,
#formovic .mandy-form-submit .fusion-button[aria-disabled="true"] {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
}




/* =========================================================
   MESSAGE TEXTAREA – FESTE LABEL-FLÄCHE BEIM SCROLLEN
   ========================================================= */

#formovic
.fusion-form-textarea-field.form-field-floating {
  isolation: isolate;
}


/* Weiße Fläche über dem scrollenden Text */

#formovic
.fusion-form-textarea-field.form-field-floating::before {
  content: "";

  position: absolute;
  top: 0;
  left: 0;
  right: 0;

  height: 46px;

  background-color: var(--neutral-0, #FFFFFF);
  border-radius: 30px 30px 0 0;
		
		box-shadow: 0 8px 12px -12px rgba(24, 39, 50, 0.35);

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

  opacity: 0;
}


/* Abdeckung anzeigen, sobald das Label sichtbar ist */

/* Weiße Label-Fläche nur bei Fokus oder ausgefülltem Feld */

#formovic
.fusion-form-textarea-field.form-field-floating:has(
  textarea:focus
)::before,

#formovic
.fusion-form-textarea-field.form-field-floating:has(
  textarea:valid
)::before {
  opacity: 1 !important;
}

/* Label bleibt über der weißen Fläche */

#formovic
.fusion-form-textarea-field.form-field-floating
label[for="message"] {
  z-index: 2 !important;
}












@media (max-width: 700px) {
  .h4_title_features {
    font-size: 24px!important;
  }
}

@media (max-width: 700px) {
  .h3_title_features {
    font-size: 20px !important;
  }
}

@media (max-width: 480px) {
  .h3_title_features {
    font-size: 16px !important;
  }
}

@media (max-width: 700px) {
  .h2_title {
    font-size: 24px!important;
  }
}

@media (max-width: 700px) {
  .p3 {
    font-size: 16px!important;
  }
}

@media (max-width: 700px) {
  .p2 {
    font-size: 20px!important;
  }
}

@media (max-width: 700px) {
  .p1 {
    font-size: 24px!important;
  }
}

html.avada-is-100-percent-template #main.width-100 {
  margin: 0px 0px 0px 0px;
}

/* Media Queries für die headline */

@media screen and (max-width: 1550px) {
  .headline_kiss {
    font-size: 60px !important;
  }
}

@media screen and (max-width: 1550px) {
  .headline_kiss {
    font-size: 50px !important;
  }
}

@media screen and (max-width: 768px) {
  .headline_kiss {
    font-size: 40px !important;
  }
}

@media screen and (max-width: 480px) {
  .headline_kiss {
    font-size: 25px !important;
  }
}

/* Media Queries für die subline */

@media screen and (min-width: 1301px) {
  .subline_h2 {
    font-size: 40px !important;
  }
}

@media screen and (max-width: 1300px) {
  .subline_h2 {
    max-width: 747px;
    font-size: 32px !important;
  }
}

@media screen and (max-width: 900px) {
  .subline_h2 {
    font-size: 24px !important;
  }
}

@media screen and (max-width: 768px) {
  .subline_h2 {
    font-size: 16px !important;
  }
}

@media screen and (max-width: 480px) {
  .subline_h2 {
    font-size: 14px !important;
  }
}

.typewriter-intro,
.middle-text,
.typewriter-outro {
  opacity: 0;
}

.subline_h2_mobile {
  font-size: 20px !important;
  line-height: 150% !important;
}

.subline_h2_mobile .typewriter-intro,
.subline_h2_mobile .middle-text,
.subline_h2_mobile .typewriter-outro {
  font-size: inherit !important;
  line-height: inherit !important;
}

.subline_h2_tablet {
  font-size: 24px !important;
  line-height: 160% !important;
  margin-top: 20px !important;
}

.subline_h2_tablet .typewriter-intro,
.subline_h2_tablet .middle-text,
.subline_h2_tablet .typewriter-outro {
  font-size: inherit !important;
  line-height: inherit !important;
}

/* Media Queries für die mission_sub */

@media screen and (max-width: 1700px) {
  .mission_sub {
    font-size: 20px !important;
  }
}

@media screen and (max-width: 1410px) {
  .mission_sub {
    font-size: 18px !important;
  }
}

@media screen and (max-width: 768px) {
  .mission_sub {
    font-size: 16px !important;
  }
}

@media screen and (max-width: 480px) {
  .mission_sub {
    font-size: 14px !important;
  }
}







/* Hero-Teaser fixiert auf die volle Höhe */

#hero-teaser {
  height: 100vh;
  width: 100%;
  position: fixed;
  /* NICHT fixed */
  background-size: cover;
  background-position: center;
  pointer-events: none;
  /* Verhindert, dass der Hero-Teaser die Mausinteraktionen blockiert */
  z-index: 10;
  /* Der Teaser bleibt vorne */
}









/* Entfernt die untere Linie der inputs & setzt einen einheitlichen Rand */

.fusion-layout-column {
  --awb-border-bottom: 0px !important;
  --awb-border-color-hover: var(--awb-border-color) !important;
}

/* =========================================================
   CONTACT FORM – INPUT SYSTEM
   Formular-ID: formovic
   ========================================================= */


/* ---------------------------------------------------------
   FORMULARABSTÄNDE
   --------------------------------------------------------- */

#formovic .fusion-form-field {
  margin: 0 !important;
  padding: 0 !important;
}

#formovic .fusion-layout-column {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

/* Unter dem Submit-Button kein zusätzlicher Abstand */

#formovic .fusion-layout-column:has(.fusion-form-submit-field) {
  margin-bottom: 0 !important;
}

#formovic .fusion-form-submit-field {
  margin: 0 !important;
  padding: 0 !important;
}


/* ---------------------------------------------------------
   FIELD WRAPPER
   Klasse liegt auf Name, Company, Email und Message
   --------------------------------------------------------- */

#formovic .form-field-floating {
  position: relative !important;
  overflow: visible !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* ---------------------------------------------------------
   ECHTES LABEL IM FELD

   Es bleibt für Screenreader vorhanden.
   Default visuell unsichtbar.
   --------------------------------------------------------- */

#formovic
.form-field-floating
.fusion-form-label-wrapper {
  position: absolute !important;
  top: 16px !important;
  left: 30px !important;
  z-index: 2 !important;

  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;

  opacity: 0 !important;
  pointer-events: none !important;

  transition:
    opacity 0.16s ease !important;
}

#formovic
.form-field-floating
.fusion-form-label-wrapper label {
  margin: 0 !important;
  padding: 0 !important;

  color: var(--foreground-secondary, #797385) !important;

  font-family: "Roboto Mono", monospace !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: 130% !important;
  letter-spacing: normal !important;
  text-transform: uppercase !important;
}


/* ---------------------------------------------------------
   INPUT – DEFAULT

   86 px hoch
   30 px Padding
   weiß
   kein sichtbarer Border
   --------------------------------------------------------- */

#formovic
.form-field-floating
.fusion-form-input {
  box-sizing: border-box !important;

  display: block !important;
  width: 100% !important;
  height: 86px !important;
  min-height: 86px !important;

  margin: 0 !important;
  padding: 30px !important;

  background-color: var(--neutral-0, #FFFFFF) !important;
  background-image: none !important;

  color: var(--foreground-primary, #182732) !important;
  caret-color: var(--foreground-primary, #182732) !important;

  font-family: "Raleway", sans-serif !important;
  font-size: 20px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: 130% !important;

  border: 0 !important;
  border-radius: 30px !important;

  outline: none !important;
  box-shadow: none !important;

  transition:
    background-color 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease !important;
}


/* ---------------------------------------------------------
   PLACEHOLDER – DEFAULT
   --------------------------------------------------------- */

#formovic
.form-field-floating
.fusion-form-input::placeholder {
  color: var(--foreground-secondary, #797385) !important;
  opacity: 1 !important;

  font-family: "Raleway", sans-serif !important;
  font-size: 20px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: 130% !important;

  text-overflow: ellipsis !important;
}


/* ---------------------------------------------------------
   HOVER

   Nur für Geräte mit echter Maus-/Trackpad-Hoverfunktion.
   --------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {

  #formovic
  .form-field-floating
  .fusion-form-input:hover {
    background-color:
      var(--input-hover, #E2D9F8) !important;
  }

  #formovic
  .form-field-floating
  .fusion-form-input:hover::placeholder {
    color:
      var(--foreground-primary, #182732) !important;
  }
}


/* ---------------------------------------------------------
   LABEL SICHTBAR

   1. Feld hat Fokus
   2. Feld enthält Text
   3. Browser hat Autofill verwendet

   Ein leeres Error-Feld zeigt weiterhin nur den roten
   Placeholder, genau wie in deinem Figma-State.
   --------------------------------------------------------- */

#formovic
.form-field-floating:focus-within
.fusion-form-label-wrapper,

#formovic
.form-field-floating:has(
  .fusion-form-input:not(:placeholder-shown)
)
.fusion-form-label-wrapper,

#formovic
.form-field-floating:has(
  .fusion-form-input:-webkit-autofill
)
.fusion-form-label-wrapper {
  opacity: 1 !important;
}


/* ---------------------------------------------------------
   FOCUS UND FILLED LAYOUT

   Label:
   16 px Abstand oben

   Abstand Label zu Text:
   4 px

   Feldhöhe bleibt 86 px.
   --------------------------------------------------------- */

#formovic
.form-field-floating:focus-within
.fusion-form-input,

#formovic
.form-field-floating:has(
  .fusion-form-input:not(:placeholder-shown)
)
.fusion-form-input,

#formovic
.form-field-floating:has(
  .fusion-form-input:-webkit-autofill
)
.fusion-form-input {
  padding-top: 42px !important;
  padding-right: 30px !important;
  padding-bottom: 18px !important;
  padding-left: 30px !important;
}











/* ---------------------------------------------------------
   FOCUS

   Weißer Hintergrund
   3 px äußerer Focus Ring
   kein Layout Shift
   --------------------------------------------------------- */

#formovic
.form-field-floating
.fusion-form-input:focus,

#formovic
.form-field-floating
.fusion-form-input:focus-visible {
  background-color: var(--neutral-0, #FFFFFF) !important;

  outline: none !important;

  box-shadow:
    0 0 0 3px
    var(--action-focus-ring, #246BFD) !important;
}

#formovic
.form-field-floating
.fusion-form-input:focus::placeholder {
  color:
    var(--foreground-secondary, #797385) !important;
}


/* ---------------------------------------------------------
   FILLED TEXT
   --------------------------------------------------------- */

#formovic
.form-field-floating
.fusion-form-input:not(:placeholder-shown) {
  color:
    var(--foreground-primary, #182732) !important;
}


/* ---------------------------------------------------------
   TEXTAREA – MESSAGE
richtext

   Die bisherige Mindesthöhe bleibt vorerst erhalten.
   --------------------------------------------------------- */






#formovic
.form-field-floating
textarea.fusion-form-input {
  height: auto !important;
  min-height: 220px !important;

 padding: 30px !important;

  font-family: "Raleway", sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 130% !important;

  resize: vertical !important;
}

#formovic
.form-field-floating:focus-within
textarea.fusion-form-input,

#formovic
.form-field-floating:has(
  textarea.fusion-form-input:not(:placeholder-shown)
)
textarea.fusion-form-input,

#formovic
.form-field-floating:has(
  textarea.fusion-form-input:-webkit-autofill
)
textarea.fusion-form-input {
  padding-top: 58px !important;
  padding-right: 30px !important;
  padding-bottom: 30px !important;
  padding-left: 30px !important;
}



















/* ---------------------------------------------------------
   ERROR STATE

   Der rote Rahmen wird als innerer Shadow gezeichnet.
   Dadurch verändert sich die Feldgröße nicht.
   --------------------------------------------------------- */

#formovic
.form-field-floating
.fusion-form-input[aria-invalid="true"],

#formovic
.form-field-floating
.fusion-form-input.error,

#formovic
.form-field-floating
.fusion-form-input:user-invalid {
  background-color: var(--neutral-0, #FFFFFF) !important;

  color: var(--highlight-red, #FB5A6D) !important;

  box-shadow:
    inset 0 0 0 2px
    var(--highlight-red, #FB5A6D) !important;
}


/* Roter Placeholder */

#formovic
.form-field-floating
.fusion-form-input[aria-invalid="true"]::placeholder,

#formovic
.form-field-floating
.fusion-form-input.error::placeholder,

#formovic
.form-field-floating
.fusion-form-input:user-invalid::placeholder {
  color:
    var(--highlight-red, #FB5A6D) !important;
}


/* Rotes Label bei Error + Fokus oder Error + Inhalt */

#formovic
.form-field-floating:has(
  .fusion-form-input[aria-invalid="true"]
)
.fusion-form-label-wrapper label,

#formovic
.form-field-floating:has(
  .fusion-form-input.error
)
.fusion-form-label-wrapper label,

#formovic
.form-field-floating:has(
  .fusion-form-input:user-invalid
)
.fusion-form-label-wrapper label {
  color:
    var(--highlight-red, #FB5A6D) !important;
}


/* ---------------------------------------------------------
   ERROR + FOCUS

   2 px roter innerer Rahmen
   3 px blauer äußerer Focus Ring
   --------------------------------------------------------- */

#formovic
.form-field-floating
.fusion-form-input[aria-invalid="true"]:focus,

#formovic
.form-field-floating
.fusion-form-input.error:focus,

#formovic
.form-field-floating
.fusion-form-input:user-invalid:focus {
  box-shadow:
    inset 0 0 0 2px
    var(--highlight-red, #FB5A6D),

    0 0 0 3px
    var(--action-focus-ring, #246BFD) !important;
}


/* ---------------------------------------------------------
   BROWSER AUTOFILL
   --------------------------------------------------------- */

#formovic
.form-field-floating
.fusion-form-input:-webkit-autofill {
  -webkit-text-fill-color:
    var(--foreground-primary, #182732) !important;

  box-shadow:
    0 0 0 1000px
    var(--neutral-0, #FFFFFF) inset !important;

  transition:
    background-color 9999s ease-out 0s !important;
}


/* Autofill + Fokus */

#formovic
.form-field-floating
.fusion-form-input:-webkit-autofill:focus {
  box-shadow:
    0 0 0 1000px
    var(--neutral-0, #FFFFFF) inset,

    0 0 0 3px
    var(--action-focus-ring, #246BFD) !important;
}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  #formovic
  .form-field-floating
  .fusion-form-input,

  #formovic
  .form-field-floating
  .fusion-form-label-wrapper {
    transition: none !important;
  }
}






/* =========================================================
   AVADA TEXTAREA – DIREKTES LABEL
   ========================================================= */

#formovic .form-field-floating label[for="message"] {
  position: absolute !important;
  top: 16px !important;
  left: 30px !important;
  z-index: 2 !important;

  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;

  color: var(--foreground-secondary, #797385) !important;

  font-family: "Roboto Mono", monospace !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: 130% !important;
  letter-spacing: normal !important;
  text-transform: uppercase !important;

  opacity: 0 !important;
  pointer-events: none !important;

  transition:
    opacity 0.16s ease,
    color 0.16s ease !important;
}


/* Unterstreichung des Required-Sternchens entfernen */

#formovic
.form-field-floating
label[for="message"]
.fusion-form-element-required {
  text-decoration: none !important;
}


/* Label bei Fokus oder Inhalt anzeigen */

#formovic
.form-field-floating:focus-within
label[for="message"],

#formovic
.form-field-floating:has(
  textarea#message:not(:placeholder-shown)
)
label[for="message"] {
  opacity: 1 !important;
}


/* Label im Error State rot */

#formovic
.form-field-floating:has(
  textarea#message[aria-invalid="true"]
)
label[for="message"],

#formovic
.form-field-floating:has(
  textarea#message.error
)
label[for="message"],

#formovic
.form-field-floating:has(
  textarea#message:user-invalid
)
label[for="message"] {
  color: var(--highlight-red, #FB5A6D) !important;
}







/* =========================================================
   FORM ERROR TOOLTIP – ACCESSIBILITY
   ========================================================= */

/* Fehlertext bleibt für Screenreader im DOM */

.mandy-form-error-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* Visueller qTip */

.mandy-form-error-tooltip {
  z-index: 99999 !important;
  pointer-events: none !important;
}

.mandy-form-error-tooltip .qtip-content {
  max-width: 280px !important;
}













.burger_menu_custom:hover {
  color: #ffffff !important;
  /* Icon wird beim Hover weiß */
  background-color: #552CC5 !important;
  /* Behalte Border-Größe für Layout-Stabilität */
}

.menu_button_tablet:hover {
  color: #ffffff !important;
  /* Icon wird beim Hover weiß */
  background-color: #552CC5 !important;
  /* Behalte Border-Größe für Layout-Stabilität */
}

.karusell_logos .swiper-slide {
  width: fit-content !important;
  height: 45px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px !important;
  /* 8px mehr Abstand als vorher */
}

.karusell_logos .fusion-carousel-item-wrapper,
.karusell_logos .fusion-image-wrapper {
  height: 45px !important;
  width: fit-content !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  margin: 0 !important;
}

.karusell_logos img {
  height: 45px !important;
  width: auto !important;
  max-height: 45px !important;
}

/* Überschreibt die Größe des Icons */

.icon_WID {
  width: auto !important;
  /* Entfernt die festgelegte Breite */
  height: auto !important;
  /* Entfernt die festgelegte Höhe */
}

/* Fügt allen Tooltip-Klassen eine 1px Linie unten hinzu */

.illu_tooltip,
.visualdesign,
.barriere_tooltip,
.UIUX_tooltip {
  border-bottom: 1px solid #DEDBDB;
  /* 1px dicke Linie in der Farbe #BDBDBD */
}

.card_design_m {
  max-width: 400px!important;
  background-color: white!important;
  margin: 20px;
}

.card_design_m:hover .button_card_m {
  background-color: #552CC5 !important;
  /* Ändert die Hintergrundfarbe des Buttons */
  border-color: #552CC5 !important;
  color: white !important;
}

.button_card_m {
  background-color: initial;
  /* Setzt den Standard-Hintergrund zurück (oder nach Bedarf) */
}

.highlight_faceliftengage {
  color: #ffffff;
}

/* Contact form abstand unten ab tablet */

@media (max-width: 1024px) {
  .form_contact {
    padding-bottom: 5%;
  }
}






/* erfolgsmeldung errormeldung */

:root {
  --success_bg_color:
    var(--mandy-highlight-green) !important;

  --success_accent_color:
    var(--mandy-light-foreground-on-color-primary) !important;

  --danger_bg_color:
    var(--mandy-highlight-red) !important;

  --danger_accent_color:
    var(--mandy-light-foreground-on-color-primary) !important;
}

















/* Standard Button - Schwarz */

#formbutton {
  background-color: #232327;
  color: white;
  /* Textfarbe weiß */
  transition: background-color 0.3s, border-color 0.3s;
  /* Sanfte Übergänge für Hover-Effekte */
  border-radius: 30px;
}

/* Hover-Effekt - Button wird lila */

#formbutton:hover {
  background-color: #552CC5;
  /* Lila Hintergrund beim Hover */
  color: white;
  /* Text bleibt weiß */
}

/* Entfernt den Rand der Box */

.fusion-alert {
  border-width: 0 !important;
  /* Entfernt den Rand */
  border-color: transparent !important;
  /* Entfernt die Randfarbe */
  font-size: 20px !important;
  /* Setzt die Textgröße auf 20px */
  border-radius: 30px !important;
  /* Setzt den Border Radius auf 20px */
}

/* Entfernt den Close Button */

.fusion-alert.awb-alert-close-boxed .close {
  display: none !important;
  /* Schließt den Schließbutton */
}

/* Entfernt den Border des Back-Buttons beim Hover */

.backbutton_contact:hover {
  border: none !important;
  /* Entfernt den Border beim Hover */
}

/* Ändert die Farbe des Back-to-Home-Buttons beim Hover */

.backtohomebutton:hover {
  background-color: #552CC5 !important;
  /* Setzt die Hintergrundfarbe beim Hover */
  color: white !important;
  /* Optional: Textfarbe ändern, um den Kontrast zu erhöhen */
}

/* Spezifische Anpassungen beim Hover */

.fusion-form-form-wrapper .fusion-form-field .fusion-form-checkbox:hover label:before {
  border-color: #552CC5 !important;
  /* Ändert den Rahmen der Checkbox bei Hover */
}

.closebutton_menu:hover {
  background-color: #552CC5 !important;
}

/* Stile für den Text in der custom-date-Klasse */

.custom-date {
  font-family: 'Roboto Mono', monospace;
  /* Schriftart Roboto Mono */
  font-size: 14px;
  /* Schriftgröße 14px */
}

/* Stile für den Text in der custom-date-Klasse */

.custom-date {
  font-family: 'Roboto Mono', monospace;
  /* Schriftart Roboto Mono */
  font-size: 14px;
  /* Schriftgröße 14px */
}

/* Stile für die Links (Legal Notice und Privacy Policy) */

.footer-link {
  font-family: 'Roboto Mono', monospace;
  /* Schriftart Roboto Mono */
  font-size: 14px;
  /* Schriftgröße 14px */
  color: #007CC5;
  /* Linkfarbe */
  text-decoration: underline;
  /* Links unterstreichen */
}

.illu_tooltip,
.visualdesign,
.barriere_tooltip,
.UIUX_tooltip {
  border-bottom: 0px solid #DEDBDB;
  /* 1px dicke Linie in der Farbe #DEDBDB */
}

/* Hover-Effekt für .icon_WID */

.icon_WID:hover {
  color: #552CC5 !important;
  /* Textfarbe des Icons wird lila */
}

/* Wenn es sich um ein SVG-Icon handelt, könnte das Füllen der Farbe erforderlich sein */

.icon_WID:hover svg {
  fill: #552CC5 !important;
  /* SVG-Icon wird beim Hover lila */
}

.iconback_about:hover {
  border: none !important;
  /* Entfernt den Border beim Hover */
}

.highlight-hola {
  color: #FFC248 !important;
  /* Die Farbe, die du für das Ausrufezeichen möchtest */
}

.button_about_book:hover {
  border-color: #452894 !important;
}

@media (max-width: 1024px) and (min-width: 642px) {
  .imageblock,
  .textblock_about {
    --awb-spacing-left-medium: 10.8% !important;
    --awb-spacing-right-medium: 10.8% !important;
  }
}

/* Hover-Effekt mit Leuchten */

.fusion-form-form-wrapper .fusion-form-field .fusion-form-checkbox input[type="checkbox"]:hover + label:before {
  box-shadow: 0 0 8px rgba(85, 44, 197, 0.5);
}

.fusion-form-form-wrapper .fusion-form-field .fusion-form-checkbox input:checked + label:before {
  border: 2px solid var(--awb-form-focus-border-color) !important;
}

.fusion-form-form-wrapper .fusion-form-field .fusion-form-checkbox input:checked+label:after {
  top: 10px !important;
  /* Stellt sicher, dass der Punkt innerhalb der Checkbox bleibt */
  left: 10px !important;
  /* Stellt sicher, dass der Punkt innerhalb der Checkbox bleibt */
  transform: none !important;
  /* Entfernt die Verschiebung, da sie das Problem verursacht */
}

.accepttext {
  font-family: 'Raleway', sans-serif;
  /* Setzt die Schriftart auf Raleway */
  font-size: 16px;
  /* Schriftgröße anpassen */
  font-weight: 500;
  /* Medium-Gewicht (500) */
  color: #333;
  /* Schriftfarbe */
}

label[for="message"] {
  font-size: 14px !important;
  /* Schriftgröße auf 14px ändern */
}

.hola-text {
  font-family: 'Baloo Bhai 2', sans-serif;
  font-weight: bold;
  font-size: 64px;
}

.exclamation {
  font-size: 64px;
  font-family: 'Baloo Bhai 2', sans-serif;
  font-weight: bold;
  color: #FFC248;
  /* Gelbes Ausrufezeichen */
}

.description {
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
  font-size: 24px;
  margin-top: 10px;
}












/* =========================================================
   UX/UI TEASER CARD
   ========================================================= */


/* Card */

.video-bg-column,
.video-bg-column-tablet {
  position: relative !important;
  width: 360px;
  height: 490px;
  overflow: hidden;
  box-sizing: border-box;
  margin-bottom: 10px;
  margin-left: 5px;
  border-radius: 10px;
}


/* Background video */

.video-bg-column .video-bg,
.video-bg-column-tablet .video-bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: calc(100% + 2px) !important;
  object-fit: cover !important;
  pointer-events: none !important;
  z-index: 1;
}


/* The entire teaser is one accessible link */

.video-bg-column .teaser-overlay-link,
.video-bg-column-tablet .teaser-overlay-link {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  z-index: 30 !important;
  pointer-events: auto !important;
}


/* Headline and visual button stay above the card link */

.video-bg-column .content-overlay,
.video-bg-column-tablet .content-overlay {
  position: relative !important;
  z-index: 40 !important;
  pointer-events: none !important;
}



/* Decorative visual button */



.video-bg-column .teaser-visual-button,

.video-bg-column-tablet .teaser-visual-button {

  position: relative !important;

  z-index: 40 !important;

  pointer-events: none !important;

}


/* Replay button remains independently clickable */

.video-bg-column .play_button,
.video-bg-column-tablet .play_button {
  position: relative !important;
  z-index: 50 !important;
  pointer-events: auto !important;
}


/* Keyboard focus for the real teaser link */

.video-bg-column .teaser-overlay-link:focus-visible,
.video-bg-column-tablet .teaser-overlay-link:focus-visible {
  outline: 3px solid var(--mandy-light-action-focus-ring) !important;
  outline-offset: -6px !important;
  border-radius: 10px;
}


/* Visual button hover when the card link is hovered or focused */

.video-bg-column .teaser-overlay-link:hover ~ * .teaser-visual-button,
.video-bg-column .teaser-overlay-link:focus-visible ~ * .teaser-visual-button,
.video-bg-column-tablet .teaser-overlay-link:hover ~ * .teaser-visual-button,
.video-bg-column-tablet .teaser-overlay-link:focus-visible ~ * .teaser-visual-button {
  background-color: var(--mandy-light-action-hover-surface) !important;
  color: var(--mandy-light-action-hover-foreground) !important;
}













/* Titel-Container */

#titel_ux {
  flex-grow: 1 !important;
  margin: 0 !important;
  max-width: 240px;
  color: white;
}

/* Titel-Text (h2) */

#titel_ux h2 {
  line-height: 1.3;
  margin: 0;
  white-space: normal;
  font-weight: 700;
}

/* Button-Container */

#button_ux {
  flex: 0 0 auto !important;
}

/* Button selbst */

#button_ux button {
  align-self: flex-start;
  margin-top: 0;
}

.teaser_logo_tablet {
  height: 255px;
  min-height: 255px;
  max-width: 260px;
}

.about_teaser_header_tablet {
  height: 255px;
  min-height: 255px;
  max-width: 380px;
}

.header_tablet .teaser_logo_tablet {
  order: 1;
}

.header_tablet .video-bg-column-tablet {
  order: 2;
}

.header_tablet .about_teaser_header_tablet {
  order: 3;
}

.header_tablet .services-tablet {
  order: 4;
}

/* 1) Container: exakt 400×255, keine Abenteuer mehr */

.video-bg-column-tablet {
  position: relative;
  width: 372px;
  height: 255px;
  overflow: hidden;
  border-radius: 20px;
  box-sizing: border-box;
}

/* 2) Video wird 2px höher als der Container, so dass es unten sauber absägt */

.video-bg-column-tablet .video-bg {
  position: absolute;
  top: -1px;
  /* 1px nach oben verschieben */
  left: 0;
  width: 100%;
  height: calc(100% + 2px);
  /* 2px extra Höhe */
  object-fit: cover;
  pointer-events: none;
  z-index: 1;
}

.video-bg-column-tablet .video-bg {
  position: absolute;
  /* 1px nach unten verschieben: */
  top: 1px;
  /* 1px nach links, damit links und rechts je 1px extra reinfliegt */
  left: -1px;
  /* Gesamtbreite um 2px vergrößern (je 1px rechts und links) */
  width: calc(100% + 2px);
  /* Gesamthöhe um 2px vergrößern (je 1px oben und unten) */
  height: calc(100% + 2px);
  object-fit: cover;
  pointer-events: none;
  z-index: 1;
}

/* Container */

.services-tablet {
  position: relative !important;
  height: 255px !important;
  min-height: 255px !important;
  max-width: 688px !important;
  width: 100% !important;
  /* füllt bis zur max-width */
  box-sizing: border-box !important;
}





/* Tablet Hero */

#hero-teaser-tablet {
  height: calc(100vh - 220px) !important;
  min-height: calc(100vh - 220px) !important;



  position: fixed !important;
  left: 0 !important;
  right: 0 !important;

  background-size: cover !important;
  background-position: center !important;

  pointer-events: none !important;
  z-index: 10 !important;
  overflow: hidden !important;
}












@media (max-width: 720px) {
  .textblock_tablet {
    margin-top: 20% !important;
  }
}

@media (max-width: 650px) {
  .headline_kiss_tablet {
    font-size: 32px !important;
  }

  .subline_h2_tablet {
    max-width: 1200px;
  }
}



li.fusion-layout-column.fusion_builder_column {
  background: transparent !important;
  margin-bottom: 50px !important;
  /* sorgt für Abstand zur nächsten Card */
}

.awb-menu__main-a::after {
  content: "👉";
  margin-left: 8px;
  font-size: 0.6em;
  /* kannst du kleiner oder größer machen */
  vertical-align: middle;
}

ul.fusion-filters li a {
  display: inline-block !important;
  /* Link nur so breit wie Text */
  padding: 0 4px !important;
  /* etwas Luft links/rechts */
}

ul.fusion-filters li a.fusion-active {
  background-color: transparent !important;
  /* falls Avada einen Hintergrund setzt */
  border-bottom: 2px solid #552CC5 !important;
  /* dein Lila Balken */
  width: auto !important;
  /* Breite auf Text beschränken */
}

ul.fusion-filters {
  display: flex !important;
  flex-wrap: wrap !important;
  margin: -5px !important;
  /* gleicht die inneren Abstände aus */
  padding: 0 !important;
  list-style: none !important;
}

ul.fusion-filters li {
  flex: 0 0 auto !important;
  margin: 5px !important;
  /* Abstand zwischen den Elementen */
}

.button_menu_box {
  position: absolute !important;
  /* raus aus dem normalen Flow */
  top: 20px !important;
  /* Abstand nach oben */
  right: 20px !important;
  /* Abstand nach rechts */
  width: auto !important;
  height: auto !important;
  z-index: 9999 !important;
  /* immer über den anderen Elementen */
}

.menu_desktop {
  position: relative !important;
  /* Referenz für absolute Positionierung */
}

.menu_desktop {
  max-height: 100vh !important;
  /* nicht höher als der Bildschirm */
  overflow-y: auto !important;
  /* vertikales Scrollen erlauben */
  -webkit-overflow-scrolling: touch !important;
  /* smooth scrolling auf iOS */
  padding-bottom: 20px !important;
  /* optional, Platz am Ende */
}

.menu_desktop {
  margin-left: 2% !important;
  margin-right: 2%  !important;
}








/* Home Hero: KISS Note */
/* Eine gemeinsame KISS Note für Desktop, Tablet und Mobile */
/* Pro Breakpoint ändern wir nur Position und Größe. */

body.home .kiss-toggle {
  position: absolute !important;
  top: 70px !important;
  left: 10% !important;
  bottom: auto !important;
  right: auto !important;

  z-index: 20 !important;
  pointer-events: auto !important;

  display: block !important;
}

body.home .kiss-toggle__input {
  display: none !important;
}



body.home .kiss-toggle__note {
  max-width: 50px !important;
  width: auto !important;
  height: auto !important;

  cursor: pointer !important;
  transform-origin: bottom left !important;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease !important;
animation: pulseZoom 6.4s ease-in-out -1.3s infinite, floaty3 11.7s ease-in-out -4.1s infinite !important;
}




/* Geöffnet: immer dieselbe Desktop/Default SVG */

body.home .kiss-toggle__input:checked + .kiss-toggle__note {
  content: url("/wp-content/uploads/2026/02/note_kiss_default2.svg") !important;
  max-width: 350px !important;
  transform-origin: bottom left !important;

  animation: none !important;
  transform: none !important;
}

/* Geöffnet + Hover: immer dieselbe Hover SVG */

body.home .kiss-toggle__input:checked + .kiss-toggle__note:hover {
  content: url("/wp-content/uploads/2026/02/note_kiss_hover2.svg") !important;
}

/* Tablet: 700px – 1020px */
/* Nur Position und Größe anpassen */

@media screen and (min-width: 700px) and (max-width: 1020px) {
  body.home .kiss-toggle {
    position: fixed !important;
    top: 500px !important;
    left: 70px !important;
    bottom: auto !important;
    right: auto !important;
  }

  body.home .kiss-toggle__note {
    max-width: 40px !important;
  }

  body.home .kiss-toggle__input:checked + .kiss-toggle__note {
    max-width: 320px !important;
  }
}

/* Mobile */
/* Nur Position und Größe anpassen */

@media screen and (max-width: 699px) {
  body.home .kiss-toggle {
    position: absolute !important;
    top: auto !important;
    bottom: 65% !important;
    left: 7% !important;
    right: auto !important;
  }

  body.home .kiss-toggle__note {
    max-width: 40px !important;
  }

  body.home .kiss-toggle__input:checked + .kiss-toggle__note {
    max-width: 220px !important;
  }
}



/* ======================================================
   NOTE FLOAT — SHARP VERSION
   Ohne scale(), damit die kleinen SVGs scharf bleiben
   ====================================================== */

@keyframes noteFloatThinkingSharp {
  0% {
    top: 0;
    left: 0;
  }

  50% {
    top: -6px;
    left: 2px;
  }

  100% {
    top: 0;
    left: 0;
  }
}

@keyframes noteFloatKissSharp {
  0% {
    top: 0;
    left: 0;
  }

  35% {
    top: 4px;
    left: -2px;
  }

  70% {
    top: -6px;
    left: 3px;
  }

  100% {
    top: 0;
    left: 0;
  }
}






/* Thinking Note (Safari Fix) */

.thinking-toggle {
  position: fixed;
  bottom: 35%;
  /* Position vom unteren Rand */
  right: 10%;
  /* Position vom rechten Rand */
  z-index: 6000;
  pointer-events: auto;
}









/* Learnings Note */

.learnings-toggle {
  position: fixed;
  bottom: 15%;
  /* Position wie Thinking Note */
  right: 15%;
  /* rechtsbündig platzieren */
  z-index: 20;
  pointer-events: auto;
}

#learningsToggle {
  display: none;
  /* Checkbox unsichtbar */
}

#learningsNote {
  max-width: 50px;
  transition: transform 0.2s ease-in-out, all 0.3s ease;
  cursor: pointer;
}

#learningsToggle:checked + #learningsNote {
  content: url("/wp-content/uploads/2026/02/note_mindset_default5.svg");
  max-width: 800px;
  transform-origin: bottom right;
}

/* NOTE – OPEN + HOVER = Hover-SVG */

#learningsToggle:checked + #learningsNote:hover {
  content: url("/wp-content/uploads/2026/02/note_mindset_hover5.svg");
}

/* 📱 Ab Tabletgröße (z.B. ab 768px) */

@media (min-width: 768px) {
  #learningsToggle:checked + #learningsNote {
    max-width: 700px;
  }
}

/* Learnings Note Tablet */

.learnings-toggle-tablet {
  position: fixed;
  bottom: 15%;
  /* Position nach Wunsch anpassen */
  right: 5%;
  /* rechtsbündig platzieren */
  z-index: 20;
  pointer-events: auto;
}

#learningsToggleTablet {
  display: none;
  /* Checkbox unsichtbar */
}

#learningsNoteTablet {
  max-width: 40px;
  /* kleiner für Tablet */
  transition: transform 0.2s ease-in-out, all 0.3s ease;
  cursor: pointer;
}

#learningsToggleTablet:checked + #learningsNoteTablet {
  content: url("https://mandyullmann.com/wp-content/uploads/2026/02/note_mindset.svg");
  max-width: 630px;
  /* kleinere Größe für Tablet */
  transform-origin: top right;
  /* Aufklappen nach links unten */
}

/* LEARNINGS Note Mobile */

.learnings-toggle-mobile {
  position: fixed;
  bottom: 10%;
  right: 5%;
  z-index: 20;
  pointer-events: auto;
}

#learningsToggleMobile {
  display: none;
}

#learningsNoteMobile {
  max-width: 40px;
  transition: transform 0.3s ease-in-out, all 0.3s ease;
  cursor: pointer;
}

#learningsToggleMobile:checked + #learningsNoteMobile {
  content: url("/wp-content/uploads/2026/02/note_mindset.svg");
  max-width: 300px;
  transform-origin: top left;
}

/* Alle Notizen: Pulsieren + individuelle Schwebe */

#kissNote,
#kissNoteTablet,
#kissNoteMobile {
  animation: pulseZoom 4s ease-in-out infinite, floaty1 8s ease-in-out infinite;
}

#thinkingNote,
#thinkingNoteMobile {
  animation: pulseZoom 5s ease-in-out infinite, floaty3 10s ease-in-out infinite;
}

#learningsNote,
#learningsNoteTablet,
#learningsNoteMobile {
  animation: pulseZoom 5.5s ease-in-out infinite, floaty4 11s ease-in-out infinite;
}

/* Pulsieren verstärkt */

@keyframes pulseZoom {
  0%, 100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.20);
  }
}

/* Schweben sanft */

@keyframes floaty1 {
  0%, 100% {
    transform: translate(0,0);
  }

  25% {
    transform: translate(10px,-8px);
  }

  50% {
    transform: translate(0,-14px);
  }

  75% {
    transform: translate(-10px,-8px);
  }
}

@keyframes floaty2 {
  0%, 100% {
    transform: translate(0,0);
  }

  25% {
    transform: translate(-9px,9px);
  }

  50% {
    transform: translate(8px,14px);
  }

  75% {
    transform: translate(5px,-10px);
  }
}

@keyframes floaty3 {
  0%, 100% {
    transform: translate(0,0);
  }

  25% {
    transform: translate(12px,6px);
  }

  50% {
    transform: translate(-8px,12px);
  }

  75% {
    transform: translate(-12px,-8px);
  }
}

@keyframes floaty4 {
  0%, 100% {
    transform: translate(0,0);
  }

  25% {
    transform: translate(9px,-10px);
  }

  50% {
    transform: translate(-7px,16px);
  }

  75% {
    transform: translate(-11px,6px);
  }
}

/* Animation stoppen, wenn geöffnet */

#kissToggle:checked + #kissNote,
#kissToggleTablet:checked + #kissNoteTablet,
#kissToggleMobile:checked + #kissNoteMobile,
#thinkingToggle:checked + #thinkingNote,

#thinkingToggleMobile:checked + #thinkingNoteMobile,
#learningsToggle:checked + #learningsNote,
#learningsToggleTablet:checked + #learningsNoteTablet,
#learningsToggleMobile:checked + #learningsNoteMobile {
  animation: none !important;
  transform: none;
}

/* Standardzustand: Pulsieren + Schweben */

#kissNote,
#smartNote,
#thinkingNote,
#learningsNote,
#kissNoteTablet,

#learningsNoteTablet,
#kissNoteMobile,
#thinkingNoteMobile,
#learningsNoteMobile {
  animation: pulseZoom 4s ease-in-out infinite, floaty1 8s ease-in-out infinite;
  transition: transform 0.2s ease-in-out;
}

/* Standardzustand: jede Note mit eigener Animation */

#kissNote,
#kissNoteTablet,
#kissNoteMobile {
  animation: pulseZoom 4s ease-in-out infinite, floaty1 8s ease-in-out infinite;
  display: inline-block;
}

#thinkingNote,
#thinkingNoteTablet,
#thinkingNoteMobile {
  animation: pulseZoom 5s ease-in-out infinite, floaty3 10s ease-in-out infinite;
  display: inline-block;
}

#learningsNote,
#learningsNoteTablet,
#learningsNoteMobile {
  animation: pulseZoom 5.5s ease-in-out infinite, floaty4 11s ease-in-out infinite;
  display: inline-block;
}

/* ======================================================
   GLOBAL NOTE OVERLAY (scharf, ohne Blur)
   ====================================================== */

/* ======================================================
   NOTE LAYER SYSTEM
   Reihenfolge:
   2000 = normale floating Notes
   2005 = dunkles Overlay
   2010 = geöffnete/geportalte Note
   2011 = Animations-Cursor
   ====================================================== */

/* ======================================================
   GLOBAL NOTE OVERLAY (scharf, ohne Blur)
   ====================================================== */

#noteOverlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 47, 64, 0.9);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity .20s ease,
    visibility 0s linear .20s;
  z-index: 6000;
}

#noteOverlay.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity .20s ease,
    visibility 0s linear 0s;
}


















/* geschlossene / normale Notes */

.kiss-toggle,
.kiss-toggle-tablet,
.kiss-toggle-mobile,
.smart-toggle,
.smart-toggle-tablet,
.smart-toggle-mobile,
.thinking-toggle,

.learnings-toggle,
.learnings-toggle-tablet,
.learnings-toggle-mobile {
  z-index: 2000 !important;
}

/* geöffnete Notes: werden per JS in den Body verschoben */

.note-portal-active {
  position: fixed !important;
  z-index: 6000 !important;
}

/* KISS bleibt Sonderfall */

.kiss-toggle.note-portal-active {
  position: fixed !important;
}

/* Cursor der Checklist-Animation */

.fake-cursor {
  position: fixed !important;
  z-index: 2011 !important;
  pointer-events: none;
}

/* ======================================================
   OPEN STATE – ALLE NOTES: Avada Hover komplett AUS
   (Closed bleibt unverändert!)
   ====================================================== */

.kiss-toggle:has(#kissToggle:checked):hover,
.kiss-toggle-tablet:has(#kissToggleTablet:checked):hover,
.kiss-toggle-mobile:has(#kissToggleMobile:checked):hover,
.smart-toggle:has(#smartToggle:checked):hover,
.smart-toggle-tablet:has(#smartToggleTablet:checked):hover,
.smart-toggle-mobile:has(#smartToggleMobile:checked):hover,
.thinking-toggle:has(#thinkingToggle:checked):hover,


.learnings-toggle:has(#learningsToggle:checked):hover,
.learnings-toggle-tablet:has(#learningsToggleTablet:checked):hover,
.learnings-toggle-mobile:has(#learningsToggleMobile:checked):hover,
.kiss-toggle:has(#kissToggle:checked):hover *,
.kiss-toggle-tablet:has(#kissToggleTablet:checked):hover *,
.kiss-toggle-mobile:has(#kissToggleMobile:checked):hover *,
.smart-toggle:has(#smartToggle:checked):hover *,
.smart-toggle-tablet:has(#smartToggleTablet:checked):hover *,
.smart-toggle-mobile:has(#smartToggleMobile:checked):hover *,
.thinking-toggle:has(#thinkingToggle:checked):hover *,


.learnings-toggle:has(#learningsToggle:checked):hover *,
.learnings-toggle-tablet:has(#learningsToggleTablet:checked):hover *,
.learnings-toggle-mobile:has(#learningsToggleMobile:checked):hover * {
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

@media (max-width: 686px) {
  .softskill {
    font-size: 24px !important;
    line-height: 150% !important;
    margin-top: 40px !important;
    margin-left: 40px !important;
    margin-right: 40px !important;
    margin-bottom: 16px !important;
  }
}

@media (max-width: 686px) {
  .usp_box .fusion-column-wrapper {
    border-radius: 30px 60px 60px 10px !important;
    overflow: hidden;
  }
}

/* Globale Anker-Polsterung – ggf. zusätzlich zum A-Ansatz */

html {
  scroll-padding-top: 120px;
}

/* Falls ein Container (z. B. #wrapper) der Scroller ist, ergänzen: */

#wrapper {
  scroll-padding-top: 120px;
}

.video-wrapper {
  overflow: hidden;
  /* versteckt alles, was übersteht */
  height: auto;
  display: inline-block;
}

.video-wrapper video {
  display: block;
  margin: 0;
  transform: translateY(1px);
  /* schiebt das Video 1px runter */
}





/* =========================================================
   PRODUCT DESIGN EXPERIENCE PILLS
   ========================================================= */

.skill-chip-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;

  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;
}

.skill-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 4px 16px !important;
  border: 0 !important;
  border-radius: 18px !important;

  background-color:
    var(--mandy-dark-pill-primary-surface) !important;


  color:
    var(--mandy-dark-pill-primary-foreground) !important;

  font-family: "Raleway", sans-serif !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 24px !important;

  cursor: default !important;
  user-select: text !important;
}


/* Optionale Akzentvariante */

.skill-chip--accent {
 background-color:
    var(--mandy-dark-pill-surface-accent) !important;

  color:
    var(--mandy-dark-pill-foreground-accent) !important;
}
.skill-chip {
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}









/* Nur für Screenreader sichtbar */

.mandy-sr-only {
  position: absolute !important;

  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;

  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}















/* Off-Canvas immer vollflächig */

.awb-off-canvas-wrap .awb-off-canvas {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
}

/* Innenleben bündig */

.awb-off-canvas-wrap .awb-off-canvas-inner {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* Scroll nur blockieren, wenn Off-Canvas offen ist */

body.fusion-off-canvas-open,
body.awb-off-canvas-open {
  overflow: hidden !important;
  /* verhindert Scrollen im Hintergrund */
}

/* --- Einheitliche Höhe + kein internes Padding --- */

.image_slider_workdetails .fusion-image-wrapper {
  height: 160px !important;
  /* gewünschte Kartenhöhe */
  padding: 0 !important;
  /* Avada-Default-Padding killen */
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  /* optional */
  border-radius: 12px;
  /* optional */
}

/* Bild selbst: nicht beschneiden, Attributwerte übersteuern */

.image_slider_workdetails .fusion-image-wrapper img,
.image_slider_workdetails img.attachment-portfolio-two.size-portfolio-two {
  height: 160px !important;
  /* override auf Bild */
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  /* kein Crop */
  display: block;
  border-radius: 12px;
  /* optisch passend */
  background: #efe7ff;
  /* Letterbox-Hintergrund (optional) */
}

/* Avadas max-height 115px überstimmen */

.image_slider_workdetails .fusion-image-carousel-fixed .awb-swiper .fusion-image-wrapper img {
  max-height: none !important;
}

/* Gleichmäßige Abstände zwischen Slides */

.image_slider_workdetails .awb-swiper .swiper-slide,
.image_slider_workdetails .fusion-carousel .fusion-carousel-item {
  padding: 0 12px !important;
  /* konstanter horizontaler Abstand */
  box-sizing: border-box;
}

/* Vertikal mittig im Slide ausrichten */

.image_slider_workdetails .awb-swiper .swiper-wrapper {
  align-items: center;
  /* falls Flex aktiv ist */
}

/* job subline */

@media (max-width: 768px) {
  .subline_job {
    font-size: 24px !important;
    color: var(--mandy-dark-foreground-secondary) !important;
  }
}

@media (max-width: 768px) {
  .job_headline {
    font-size: 32px !important;
  }
}

@media (max-width: 568px) {
  .job_headline {
    font-size: 24px !important;
  }
}

/* ROW: counter_box  → Counter links, kein Border, kein Seiten-Padding */

.counter_box.fusion-columns-4 > .fusion-column:first-child {
  margin: 0 !important;
}

.counter_box .fusion-counter-box {
  /* die Box in deiner Row */
  padding: 0 !important;
  /* killt Avada 0 7/15px */
  text-align: left !important;
  border: none !important;
}

.counter_box .counter-box-container {
  /* Innencontainer */
  padding: 20px 0 !important;
  /* nur top/bottom */
  border: none !important;
}

.counter_box .content-box-percentage.content-box-counter {
  line-height: 50% !important;
}

/* ROW: counter_box_2 → Counter rechts, ebenfalls ohne Border/Seiten-Padding */

.counter_box_2.fusion-columns-4 > .fusion-column:first-child {
  margin: 0 !important;
}

.counter_box_2 .fusion-counter-box {
  padding: 0 !important;
  text-align: right !important;
  border: none !important;
}

.counter_box_2 .counter-box-container {
  padding: 20px 0 !important;
  border: none !important;
}

.counter_box_2 .content-box-percentage.content-box-counter {
  line-height: 50% !important;
}

/* Avada setzt in Breakpoints gern wieder Padding/Textzentrierung → nur für DEINE Rows erneut überschreiben */

@media (max-width:1180px), (max-width:800px) {
  .counter_box   .fusion-counter-box,
  .counter_box_2 .fusion-counter-box {
    padding: 0 !important;
    border: none !important;
  }

  .counter_box   .fusion-counter-box {
    text-align: left !important;
  }

  .counter_box_2 .fusion-counter-box {
    text-align: right !important;
  }
}

/* DESKTOP: nur für die Row mit class="counter_box_2" */

.counter_box_2.fusion-counters-box .fusion-counter-box.counter-box-wrapper {
  text-align: right !important;
  /* statt center */
  padding: 0 !important;
  /* killt 0 7px */
  border: none !important;
}

/* Innencontainer gleich wie oben: nur top/bottom, kein Rand */

.counter_box_2 .counter-box-container {
  padding: 20px 0 !important;
  border: none !important;
}

/* Höhe nur so groß wie die Zahl */

.counter_box_2 .content-box-percentage.content-box-counter {
  line-height: 50% !important;
}

/* Klasse direkt am Button setzen: btn-left */

.fusion-button.btn-left {
  display: block!important;
  /* nicht mehr inline/inline-block */
  width: max-content!important;
  /* so breit wie der Button-Inhalt */
  margin-left: 0!important;
  margin-bottom: 20px!important;
  margin-right: auto!important;
  /* schiebt nach links */
  text-align: left!important;
  /* Inhalt im Button links */
  margin-top: 20px!important;
}

.btn-left:hover {
  border-color: #452894 !important;
}

@media only screen and (max-width: 1180px) {
  .counter_box.fusion-columns-4 .fusion-column:first-child {
    margin: 0;
  }
}

.offcanvas-backtotop {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  background: #223649;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  font-size: 20px;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.3s;
}

.offcanvas-backtotop:hover {
  opacity: 1;
}

.highlight_note {
  font-weight: 900;
  /* optional, falls du noch mehr Betonung willst */
}

.highlight_red {
  color: #F17461;
  /* Textfarbe rot */
}

/* Jede Slide gleich hoch */

.carousel_services .swiper-slide,
.carousel_services .fusion-carousel-item-wrapper,
.carousel_services .fusion-image-wrapper {
  height: 440px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Bilder passen sich in der Höhe an, Breite bleibt automatisch */

.carousel_services .fusion-image-wrapper img {
  max-height: 100% !important;
  width: auto !important;
  object-fit: contain;
}

/* ========= 1) FORM: anpassung 
Globaler Tastatur-Fokus-Ring ========= */

:root {
  --focus-ring: #1a73e8;
  /* Blau für die Umrandung */
  --focus-ring-w: 3px;
  /* Stärke */
  --focus-ring-offset: 3px;
  /* Abstand zur Komponente */
}

/* Falls dein Theme irgendwo outline entfernt hat, überschreiben wir das gezielt für Keyboard-Fokus */

:where(a,
button,
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select,
summary,
[role="button"],
[tabindex]:not([tabindex="-1"])):focus-visible {
  outline: var(--focus-ring-w) solid var(--focus-ring) !important;
  outline-offset: var(--focus-ring-offset) !important;
  /* optional – dezente Aura:
  box-shadow: 0 0 0 calc(var(--focus-ring-w) + 1px) rgba(26,115,232,.25) !important; */
}

/* Links in Menüs oder Off-Canvas (falls nötig etwas stärker) */

.fusion-menu a:focus-visible,
.offcanvas a:focus-visible,
.offcanvas button:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus-ring) !important;
  outline-offset: var(--focus-ring-offset) !important;
}

/* Formularfelder des Avada/Fusion-Forms */

.fusion-form-form-wrapper .fusion-form-input:focus-visible,
.fusion-form-form-wrapper textarea:focus-visible,
.fusion-form-form-wrapper select:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus-ring) !important;
  outline-offset: var(--focus-ring-offset) !important;
}

/* Checkboxes & Radios – Fokus-Ring auf der „Fake-Box“ am Label */

.fusion-form-form-wrapper .fusion-form-checkbox input:focus-visible + label::before,
.fusion-form-form-wrapper .fusion-form-radio input:focus-visible + label::before {
  /* outline wird bei pseudo-elements gern abgeschnitten → Box-Shadow als Ring */
  box-shadow: 0 0 0 3px var(--focus-ring) !important;
}

/* ========= 2) Checkbox bei Fehler NICHT rot umranden ========= */

/* Dein aktuelles CSS färbt im Fehlerzustand die Box rot.
   Wir überschreiben nur den Rahmen der Box, lassen den Label-Text rot. */

/* Setz dir eine neutrale Standardfarbe, falls das Theme keine Variable hat */

:root {
  --checkbox-border: #9aa1a6;
}

/* Rahmen der Checkbox im Fehlerzustand zurück auf neutral */

.fusion-form-form-wrapper .fusion-form-field.error
.fusion-form-checkbox input + label::before {
  border-color: var(--checkbox-border) !important;
}

/* (Optional) Wenn du die ungecheckte Checkbox im Fehlerfall leicht betonen willst,
   aber ohne „Rot-Konflikt“, nimm nur den Hintergrund ganz dezent: */

.fusion-form-form-wrapper .fusion-form-field.error
.fusion-form-checkbox input:not(:checked) + label::before {
  background-image: linear-gradient(transparent, transparent),
                    linear-gradient(#f7f7f8, #f7f7f8);
  /* sehr mildes Highlight */
}

/* Der Text/Label bleibt rot – das hast du schon:
   .fusion-form-form-wrapper .fusion-form-field.error label { color:#e22831 !important; } */

/* Sicherstellen, dass der sichtbare Tastatur-Fokus nie global abgeschaltet wird */

*:focus {
  outline: none;
}

/* ← falls es sowas im Theme gibt, am besten LÖSCHEN. */

/* Wenn du es nicht löschen kannst, sorge dafür, dass :focus-visible weiter gewinnt (s.o.). */










/* ==========================================================
   MANDY DROPDOWN
   ========================================================== */


/* ==========================================================
   WRAPPER
   ========================================================== */

.mandy-dropdown {
  position: sticky;
  top: 20px;

  z-index: 50;

  width: 220px;

  margin-left: 12px;
}


@media (max-width: 686px) {

  .mandy-dropdown {
    top: 0 !important;
  }

}


/* ==========================================================
   TRIGGER
   ========================================================== */

.mandy-dropdown__trigger {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 8px;

  width: 100%;

  padding: 12px 12px 12px 16px;

  box-sizing: border-box;

  border:
    2px solid transparent;

  border-radius: 12px;

  background-color:
    var(--mandy-light-surface-container);

  color:
    var(--mandy-light-foreground-primary);

  font-family:
    "Raleway",
    sans-serif;

  font-size: 16px;
  font-weight: 700;
  line-height: 24px;

  cursor: pointer;

  box-shadow:
    0 20px 50px var(--mandy-opacity-black-8),
    0 8px 24px var(--mandy-opacity-black-8),
    0 2px 8px var(--mandy-opacity-black-8);
}


/* ==========================================================
   CARET
   ========================================================== */

.mandy-dropdown__caret {
  flex: 0 0 24px;

  transition:
    transform 0.2s ease;
}


.mandy-dropdown__trigger[aria-expanded="true"] {
  border-color:
    var(--mandy-focus-blue);
}


.mandy-dropdown__trigger[aria-expanded="true"]
.mandy-dropdown__caret {
  transform:
    rotate(180deg);
}


/* ==========================================================
   KEYBOARD FOCUS
   ========================================================== */

.mandy-dropdown__trigger:focus-visible {
  outline:
    3px solid var(--mandy-focus-blue);

  outline-offset:
    2px;
}


/* ==========================================================
   MENU
   ========================================================== */
.mandy-dropdown__menu {
  position: absolute;

  left: 0;
  top: 100%;

  display: none;

  width:
    min(
      400px,
      calc(100vw - 65px)
    );

  margin:
    16px 0 0;

  padding: 16px;

  box-sizing: border-box;

  border-radius: 16px;

  background-color:
    var(--mandy-light-surface-container);

  box-shadow:
    0 10px 30px var(--mandy-opacity-black-8),
    0 2px 8px var(--mandy-opacity-black-8);

  list-style: none;

  /* Höhe begrenzen + Scrollen */
  max-height:
    min(
      620px,
      calc(100dvh - 120px)
    );

  overflow-x: hidden;
  overflow-y: auto;

  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;

  scrollbar-width: thin;
  scrollbar-color:
    var(--mandy-neutral-400)
    transparent;
}


.mandy-dropdown.is-open
.mandy-dropdown__menu {
  display: flex;

  flex-direction: column;

  align-items: stretch;

  gap: 8px;
}


/* Scrollbar – Chrome / Safari / Edge */

.mandy-dropdown__menu::-webkit-scrollbar {
  width: 8px;
}

.mandy-dropdown__menu::-webkit-scrollbar-track {
  background: transparent;
}

.mandy-dropdown__menu::-webkit-scrollbar-thumb {
  background-color:
    var(--mandy-neutral-400);

  border-radius: 999px;

  border:
    2px solid
    var(--mandy-light-surface-container);
}

.mandy-dropdown__menu::-webkit-scrollbar-thumb:hover {
  background-color:
    var(--mandy-neutral-500);
}



/* ==========================================================
   SECTION LABEL
   ========================================================== */

.mandy-dropdown__section {
  padding: 4px 16px 8px;

  margin-top: 10px;
  margin-bottom: 2px;

  color: #767676;

  font-family:
    "Raleway",
    sans-serif;

  font-size: 13px;
  font-weight: 600;
  line-height: 16px;

  text-transform: uppercase;
  letter-spacing: 0.04em;
}


/* ==========================================================
   ENTRY – DEFAULT
   ========================================================== */

.mandy-dropdown__entry,
.mandy-dropdown__entry:link,
.mandy-dropdown__entry:visited {
  display: flex;

  align-items: center;

  width: 100%;

  min-width: 0;
  max-width: 100%;

  padding: 12px 16px;

  box-sizing: border-box;

  border-radius: 11px;

  background-color:
    transparent;

  color:
    var(--mandy-light-foreground-primary);

  font-family:
    "Raleway",
    sans-serif;

  font-size: 16px;
  font-weight: 500;
  line-height: 24px;

  text-decoration: none;

  -webkit-tap-highlight-color: transparent;

  transition:
    background-color 0.16s ease,
    color 0.16s ease;
}


/* ==========================================================
   ENTRY – HOVER

   Surface:
   Primary 100

   Foreground:
   Light On Color Primary

   Typography:
   Bold
   ========================================================== */

@media (hover: hover) and (pointer: fine) {

  .mandy-dropdown__entry:not(.is-active):hover {
    background-color:
      var(--mandy-primary-100);

    color:
      var(--mandy-light-foreground-on-color-primary);

    font-weight:
      700;
  }

}


/* ==========================================================
   ENTRY – ACTIVE

   Surface:
   Dark Surface Container

   Foreground:
   Dark Foreground Primary

   Typography:
   Bold
   ========================================================== */

.mandy-dropdown__entry.is-active,
.mandy-dropdown__entry.is-active:link,
.mandy-dropdown__entry.is-active:visited,
.mandy-dropdown__entry.is-active:hover {
  background-color:
    var(--mandy-dark-surface-container);

  color:
    var(--mandy-dark-foreground-primary);

  font-weight:
    700;
}


/* ==========================================================
   ENTRY – KEYBOARD FOCUS
   ========================================================== */

.mandy-dropdown__entry:focus-visible {
  outline:
    none !important;

  box-shadow:
    inset 0 0 0 3px
    var(--mandy-focus-blue) !important;

  background-color:
    var(--mandy-primary-100);

  color:
    var(--mandy-light-foreground-on-color-primary);

  font-weight:
    700;
}


/* ==========================================================
   MOBILE ENTRY
   ========================================================== */

@media (max-width: 480px) {

  .mandy-dropdown__entry {
    display: block;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;
  }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  .mandy-dropdown__caret,
  .mandy-dropdown__entry {
    transition: none;
  }

}


/* ==========================================================
   CASE STUDY LAYOUT SWITCH
   ========================================================== */

@media (max-width: 1525px) {

  .sprungmarken_column {
    display:
      none !important;
  }

  .case_teaser {
    width:
      100% !important;

    max-width:
      100% !important;

    flex:
      0 0 100% !important;
  }

}


/* ==========================================================
   ACCESSIBILITY UTILITY
   ========================================================== */

.visually-hidden {
  position: absolute;

  width: 1px;
  height: 1px;

  margin: -1px;
  padding: 0;

  border: 0;

  overflow: hidden;

  clip:
    rect(0 0 0 0);

  clip-path:
    inset(50%);

  white-space:
    nowrap;
}


/* ==========================================================
   ENTRY – PRESSED / TOUCH
   ========================================================== */

@media (hover: none), (pointer: coarse) {

  .mandy-dropdown__entry:active,
  .mandy-dropdown__entry.is-active:active {
    background-color:
      var(--mandy-primary-100) !important;

    color:
      var(--mandy-light-foreground-on-color-primary) !important;

    font-weight:
      700 !important;
  }

}








/* Use the ID you already set */

.fl_challenge {
  display: flex!important;
  align-items: center!important;
  /* vertical align */
  flex-wrap: wrap;
  /* allows wrapping on small screens */
}

.fl_challenge .fusion-title-heading {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
}

.fl_challenge p {
  margin: 0!important;
  display: flex!important;
}



@media (max-width:1180px) {
  .fl_challenge_text {
    font-size: 16px!important;
  }
}



@media (max-width:1180px) {
  .fl_challenge {
    font-size: 24px!important;
  }
}

.fl_challenge .fusion-title-heading img.fl-logo {
  display: block !important;

  width: 24px !important;
  height: 24px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  max-width: 24px !important;
  max-height: 24px !important;

  flex: 0 0 24px !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: contain !important;
}








@media (max-width: 730px) {
  .fusion-builder-column-24 > .fusion-column-wrapper {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
  }
}

/* Mobile fix für #product: volle Breite + saubere Ränder */

@media (max-width: 1025px) {
  /* Avada-Row weitet sich mobil gern über 100% aus → neutralisieren */

  #product {
    width: 100% !important;
  }
}






/* Home Hero: Me Bubble */
/* Eine gemeinsame Klasse für Desktop, Tablet und Mobile */

body.home .me_bubble {
  position: fixed !important;
  top: 15% !important;
  right: 10% !important;
  bottom: auto !important;
  left: auto !important;

  width: 155px !important;
  height: auto !important;

  z-index: 20 !important;
  pointer-events: auto !important;

  display: block !important;






  transition: transform 0.25s ease !important;
  transform-origin: center !important;
}

body.home .me_bubble:hover {
  transform: scale(1.08) !important;
}

body.home .me_bubble img,
body.home .me_bubble .me_bubble__image {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}


/* Desktop kleiner / Laptop */
@media screen and (max-width: 1236px) and (min-width: 1024px) {
  body.home .me_bubble {
    top: 10% !important;
    right: 7% !important;
    bottom: auto !important;
    width: 155px !important;
  }
}


/* Tablet: 700px – 1024px */
@media screen and (min-width: 700px) and (max-width: 1024px) {
  body.home .me_bubble {
    top: 350px !important;
    right: 3% !important;
    bottom: auto !important;
    width: 170px !important;
  }
}

/* Mobile */
@media screen and (max-width: 699px) {
  body.home .me_bubble {
    top: auto !important;
    right: 15% !important;
    bottom: 1% !important;
    width: 100px !important;
  }
}



body.home .me_bubble img,
body.home .me_bubble .me_bubble__image {
  display: block !important;

  width: 100% !important;
  height: auto !important;

  filter:
    drop-shadow(7px 16px 7px rgba(0, 0, 0, 0.01))
    drop-shadow(4px 9px 6px rgba(0, 0, 0, 0.05))
    drop-shadow(2px 4px 4px rgba(0, 0, 0, 0.09))
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.10));
}













.toggle-icon {
  position: relative;
  display: inline-block;
  width: 155px;
  height: 126px;
}

.toggle-icon img {
  position: absolute;
  inset: 0;
  width: 155px;
  height: 126px;
  display: block;
}

/* Nur ein Bild anzeigen */

.icon-hover {
  display: none;
}

.hyp_box {
  min-width: 350px !important;
  height: auto !important;
  min-height: unset !important;
  align-self: stretch !important;
}

.fusion-row:has(.hyp_box) {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
}

.hyp_box .fusion-column-wrapper {
  height: auto !important;
  min-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

@media (max-width: 1270px) {
  .hyp_box {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

.replay_button {
  cursor: pointer;
  z-index: 30;
  /* sicher über dem Overlay-Link */
  background: none;
  border: none;
  padding: 0;
}

.large_headlines {
  font-size: 24px;
}

@media (max-width: 700px) {
  .large_headlines {
    font-size: 32px;
  }
}

.proto-wrapper {
  width: 100%;
  overflow: hidden;
  /* schneidet links/rechts ab */
  position: relative;
}

.proto-frame {
  width: 160%;
  /* größer als der sichtbare Frame */
  height: 150vh;
  /* genug Höhe für den Inhalt */
  border: none;
  transform: scale(1.6);
  /* Vergrößert den sichtbaren Inhalt */
  transform-origin: top left;
}

.column-list {
  margin: 0;
  padding: 0;
  list-style-position: outside;
}

.column-list li {
  break-inside: avoid-column;
  -webkit-column-break-inside: avoid;
  margin-bottom: 1.5em;
}

/* =====================================================
   Vorhang nur auf Unterseiten (Startseite ausgeschlossen)
   ===================================================== */

/* Overlay AUS auf Startseite */

/* Overlay AUS auf Startseite und 404-Seite */

body.home #headervorhang::after,
body.front-page #headervorhang::after,
body.error404 #headervorhang::after {
  content: none !important;
}

/* Overlay AN auf allen anderen Seiten */

body:not(.home):not(.front-page) #headervorhang {
  position: relative !important;
  z-index: 5;
}

body:not(.home):not(.front-page) #headervorhang::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(26,47,64,0.8);
  opacity: 1;
  /* wichtig: sorgt dafür, dass der Vorhang wirklich über dem Header liegt */
  z-index: 9999;
  /* Klicks sollen durchgehen */
  pointer-events: none;
  /* Animation */
  transition: opacity 250ms ease;
  /* falls rounded corners */
  border-radius: inherit;
}

/* Hover -> Vorhang weg */

body:not(.home):not(.front-page) #headervorhang:hover::after {
  opacity: 0;
}








/* =========================================================
   JOURNEY SLIDER
   ========================================================= */


/* ---------------------------------------------------------
   Scrollbereich
   --------------------------------------------------------- */

.journey .journey-scroller {
  overflow-x: auto;
  overflow-y: visible;
		cursor: grab;

  padding: 24px 0 56px;

  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}



.journey .journey-card__year {
  cursor: inherit !important;
}


.journey .journey-scroller:active {
  cursor: grabbing;
}

.journey .journey-scroller::-webkit-scrollbar {
  display: none;
}

.journey .journey-scroller:focus-visible {
  outline: 3px solid var(--mandy-focus-blue);
  outline-offset: 2px;
}


/* ---------------------------------------------------------
   Timeline-Liste
   --------------------------------------------------------- */

.journey .journey-track {
  display: flex;
  align-items: stretch;
  gap: 16px;

  width: max-content;

  margin: 0;
  padding: 0;

  list-style: none;
}

.journey .journey-track::before,
.journey .journey-track::after {
  content: "";
  flex: 0 0 clamp(24px, 12vw, 210px);
}


/* ---------------------------------------------------------
   Kartenbasis
   --------------------------------------------------------- */





.journey .journey-card {
  position: relative;

  display: flex;
  flex: 0 0 clamp(252px, 65vw, 378px);

  box-sizing: border-box;

  list-style: none;

  transition:
    transform 180ms ease;
}

.journey .journey-card__surface {
  position: relative;

  display: flex;
  flex-direction: column;

  width: 100%;
  min-height: 520px;

  box-sizing: border-box;

  padding: 28px;

  overflow: hidden;

  border-radius: 34px;

  background-color: var(--journey-card-surface);
  color: var(--mandy-light-foreground-on-color-primary);

  box-shadow: 0 18px 44px var(--mandy-opacity-black-8);

 transition:
  box-shadow 180ms ease;
}


/* ---------------------------------------------------------
   Farbvarianten
   --------------------------------------------------------- */

.journey .journey-card--green {
  --journey-card-surface:
    var(--mandy-green-500);

  --journey-year-foreground:
    var(--mandy-green-800);
}

.journey .journey-card--ocean {
  --journey-card-surface:
    var(--mandy-ocean-500);

  --journey-year-foreground:
    var(--mandy-ocean-800);
}

.journey .journey-card--blue {
  --journey-card-surface:
    var(--mandy-blue-500);

  --journey-year-foreground:
    var(--mandy-blue-800);
}

.journey .journey-card--neutral {
  --journey-card-surface:
    var(--mandy-neutral-400);

  --journey-year-foreground:
    var(--mandy-navy-300);
}

.journey .journey-card--yellow {
  --journey-card-surface:
    var(--mandy-yellow-500);

  --journey-year-foreground:
    var(--mandy-yellow-800);
}


.journey .journey-card--lilac {
  --journey-card-surface: var(--mandy-lilac-500);
}

.journey .journey-card--peach {
  --journey-card-surface: var(--mandy-peach-500);
}


/* ---------------------------------------------------------
   Jahres-Pill

   Gleiche transparente Fläche auf allen Karten.
   Nur die Textfarbe richtet sich nach der Kartenfarbe.
   --------------------------------------------------------- */

.journey .journey-card__year {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  align-self: flex-start;

  min-width: 52px;

  padding: 4px 16px;

  border-radius: 18px;

  background-color:
    var(--mandy-light-pill-primary-surface);

  color:
    var(--journey-year-foreground);

  font-family: "Raleway", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;

  text-decoration: none;
}


/* ---------------------------------------------------------
   Karteninhalt
   --------------------------------------------------------- */

.journey .journey-card__title {
  margin: 20px 0 16px;

  color:
    var(--mandy-light-foreground-on-color-primary);

  font-family: "Raleway", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 800;
  line-height: 130%;
}

.journey .journey-card__text,
.journey .journey-card__closing {
  margin: 0;

  color:
    var(--mandy-light-foreground-on-color-primary);

  font-family: "Raleway", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
}

.journey .journey-card__closing {
  margin-top: 8px;
}

.journey .journey-card__text strong,
.journey .journey-card__closing strong {
  font-weight: 700;
}


/* ---------------------------------------------------------
   Card Action Button
   --------------------------------------------------------- */

.journey .journey-card__visual-action {
  align-self: flex-end;

  margin-top: auto;

  pointer-events: auto;
}



/* ---------------------------------------------------------
   Hover und Fokus
   --------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {

  .journey .journey-card:not(.is-disabled):has(
    .journey-card__visual-action:hover
  ),
  .journey .journey-card:not(.is-disabled):focus-within {
    transform: translateY(-8px);
  }

  .journey .journey-card:not(.is-disabled):has(
    .journey-card__visual-action:hover
  ) .journey-card__surface,
  .journey .journey-card:not(.is-disabled):focus-within
  .journey-card__surface {
    box-shadow: 0 22px 48px var(--mandy-opacity-black-8);
  }

}

		
		
		
		
		
		
		
/* ---------------------------------------------------------
   Coming-soon-Status

   Der bestehende Light Secondary Surface Token entspricht
   aktuell 8 % Schwarz, nicht 5 %.
   --------------------------------------------------------- */

.journey .journey-card__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  align-self: flex-end;

  margin-top: auto;

  padding: 4px 12px;

  border-radius: 7px;

  background-color:
    var(--mandy-light-action-secondary-surface);

  color:
    var(--mandy-navy-400);

  font-family: "Roboto Mono", monospace;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}


/* ---------------------------------------------------------
   Disabled Card
   --------------------------------------------------------- */

.journey .journey-card.is-disabled {
  cursor: inherit;
}

.journey
.journey-card.is-disabled
.journey-card__surface {
  transform: none;
}


/* ---------------------------------------------------------
   Reduced Motion
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .journey .journey-card,
  .journey .journey-card__surface {
    transition:
      none;
  }

  .journey
  .journey-card:not(.is-disabled):hover,

  .journey
  .journey-card:not(.is-disabled):focus-within {
    transform:
      none;
  }
}









@media (max-width: 1024px) {

  .journey-full-width {
    --awb-spacing-left-medium: 0px !important;
    --awb-spacing-right-medium: 0px !important;
    --awb-spacing-left-small: 0px !important;
    --awb-spacing-right-small: 0px !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .journey-full-width > .fusion-column-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}




@media (max-width: 700px) {

  .journey .journey-scroller {
    scroll-padding-inline: 16px;

    overscroll-behavior-x: none;
  }

  .journey .journey-track {
    gap: 12px;

    margin-right: 0 !important;
    padding-right: 0 !important;
  }

  .journey .journey-track::before {
    flex: 0 0 16px;
  }

  .journey .journey-track::after {
    content: none !important;
    display: none !important;

    width: 0 !important;

    flex: 0 0 0 !important;
  }

  .journey .journey-card {
    flex: 0 0 calc(100vw - 32px);
  }
}













/* =========================================================
   JOURNEY – ILLUSTRATED CARD VARIANT
   ========================================================= */

/* Card ohne äußeres Padding */

.journey--illustrated .journey-card__surface {
  padding: 0;
  isolation: isolate;
}


/* Randabfallendes Bild mit Multiply */

.journey--illustrated .journey-card__image {
  display: block;
  width: 100%;
  height: 220px;

  object-fit: cover;
  object-position: center;

  mix-blend-mode: multiply;
}


/* Textbereich */

.journey--illustrated .journey-card__content {
  padding: 24px 28px 32px;
  box-sizing: border-box;
}


/* Titelabstand */

.journey--illustrated .journey-card__title {
  margin: 0 0 16px;
}








/* =========================================================
   JOURNEY – CONTAINER PADDING BREAKOUT
   Gleicht 12 % Container-Padding aus
   ========================================================= */

.journey-breakout {
  width: 131.579% !important;
  max-width: none !important;
  flex: 0 0 131.579% !important;

  margin-left: -15.7895% !important;
  margin-right: -15.7895% !important;

  left: auto !important;
  transform: none !important;
}

.journey-breakout > .fusion-column-wrapper {
  padding-left: 0 !important;
  padding-right: 0 !important;
}













/* THINKING – OPEN: komplett stabil (kein Zittern) */

#thinkingToggle:checked + #thinkingNote {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  display: block;
}

.fusion-tagcloud-element {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.fusion-tagcloud-element a.tag-cloud-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px 16px !important;
  border: 0 !important;
  border-radius: 18px !important;
  min-height: 0 !important;
  line-height: 24px !important;
  background: #E0DCE9 !important;
  color: #4B2BAA !important;
  font-family: Roboto, Inter, Arial, Helvetica, sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  text-decoration: none !important;
}

.fusion-tagcloud-element a.tag-cloud-link:hover {
  background: #4B2BAA !important;
  color: #fff !important;
}

.fusion-tagcloud-element a.tag-cloud-link .tag-link-count {
  margin-left: .25em !important;
}

.fusion-tagcloud-element.style-arrows a.tag-cloud-link {
  height: auto !important;
  line-height: 24px !important;
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.fusion-tagcloud-element.style-arrows a.tag-cloud-link .text {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px 16px !important;
  border-radius: 18px !important;
  background: #E0DCE9 !important;
  color: #4B2BAA !important;
}

.fusion-tagcloud-element.style-arrows a.tag-cloud-link:hover .text {
  background: #4B2BAA !important;
  color: #fff !important;
}

.fusion-tagcloud-element.style-arrows a.tag-cloud-link .arrow {
  display: none !important;
}

/* SPRUNGMARKEN */

/* 1) Box selbst bleibt linksbündig */

.sprungmarken_box {
  text-align: left !important;
}

/* 2) Liste: Bullets weg + Einzüge neutralisieren */

.sprungmarken_box ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

/* 3) Zeilen: sauberer vertikaler Abstand */

.sprungmarken_box li {
  margin: 12px 0 !important;
}

/* 4) Link: Text + Chevron in einer Zeile mittig */

.sprungmarken_box li a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px;
  text-decoration: none !important;
  color: #d7eafc !important;
  white-space: nowrap;
}

/* 5) Chevron direkt hinter dem Text */

.sprungmarken_box li a::after {
  content: "›";
  line-height: 1;
  color: #d7eafc !important;
}

/* 6) Hover */

.sprungmarken_box li a:hover,
.sprungmarken_box li a:focus {
  color: #90DFB6 !important;
}

/* --------- Breakpoint 1140px --------- */

@media (max-width: 1140px) {
  .sprungmarken {
    font-size: 14px !important;
  }

  .sprungmarken_box {
    width: 200px !important;
    max-width: 200px !important;
    flex-basis: 200px !important;
  }
}

/* --------- MOBIL: ≤ 686px --------- */

@media (max-width: 686px) {
  .fusion-sticky-column,
  .fusion-sticky-container {
    top: 20px !important;
  }

  .fusion-layout-column.awb-sticky-small,
  .awb-sticky-small {
    top: 0px !important;
  }

  .sprungmarken_box {
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 100% !important;
    box-sizing: border-box !important;
    padding: 20px !important;
    border-radius: 0 0 20px 20px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    background: #E4BC6B !important;
    background-color: #E4BC6B !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
  }

  .sprungmarken_box ul {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    align-content: flex-start !important;
    gap: 4px 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    list-style: none !important;
  }

  .sprungmarken_box li {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .sprungmarken_box li a {
    white-space: normal !important;
    gap: 12px !important;
    padding: 0 !important;
    color: #223445 !important;
    font-weight: 700 !important;
    font-size: 15px;
  }

  .sprungmarken_box li a::after {
    content: "›";
    line-height: 1;
    color: #223445 !important;
  }

  .sprungmarken_box li a:hover,
  .sprungmarken_box li a:focus {
    color: #223445 !important;
  }

  .sprungmarken_box li a:hover::after,
  .sprungmarken_box li a:focus::after {
    color: #223445 !important;
  }
}

/* Column Padding Fix mobil */

@media (max-width: 686px) {
  .fusion-layout-column.fusion_builder_column {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Wrapper Fix nur für diese Column */

@media (max-width: 686px) {
  .fusion-builder-column-24 > .fusion-column-wrapper,
  .fusion-layout-column.column-24 > .fusion-column-wrapper {
    background: transparent !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }
}

@media (max-width: 686px) {
  .sprungmarken_box li a::after {
    content: "›";
    font-size: 1.5em !important;
    line-height: 1 !important;
    color: #223445 !important;
    position: relative;
    top: -3px;
  }
}

.projects-button {
  margin-top: 8px;
}

.menu_button_tablet {
  margin-top: 8px !important;
}

.header-button {
  margin-top: 16px !important;
}

/* Media Queries für das emojis-bild mit Left-Margin-Anpassung */

@media screen and (min-width: 1921px) {
  .emojis_image {
    width: 90% !important;
    height: auto !important;
    /* Beibehaltung des Seitenverhältnisses */
    margin-left: -200px !important;
    margin-top: 100px !important;
    /* Startwert für volle Breite */
  }
}

@media screen and (max-width: 1550px) {
  .emojis_image {
    width: 90% !important;
    height: auto !important;
    margin-left: -100px !important;
    margin-top: 0px !important;
  }
}

@media screen and (max-width: 1310px) {
  .emojis_image {
    width: 90% !important;
    height: auto !important;
    margin-left: 60px !important;
    margin-top: 0px !important;
  }
}

@media screen and (max-width: 768px) {
  .emojis_image {
    width: 70% !important;
    height: auto !important;
    margin-left: -160px !important;
    /* Reduziert auf -160px */
  }
}

.subline_h2 {
  max-width: 747px;
}

/* Smart Note desktop */

.smart-toggle {
  position: absolute;
  top: 70%;
  /* Position anpassen, bis sie sitzt */
  left: 20%;
  /* Position anpassen, bis sie sitzt */
  z-index: 20;
  pointer-events: auto;
}

#smartToggle {
  display: none;
}

#smartNote {
  max-width: 50px;
  transition: all 0.3s ease;
  cursor: pointer;
  transform-origin: top left;
  /* Wachstums-Anker oben links */
  vertical-align: top;
  /* verhindert Verschieben nach unten */
}

#smartNote:hover {
  transform: scale(1.05);
}

#smartToggle:checked + #smartNote {
  content: url("https://mandyullmann.com/wp-content/uploads/2025/07/note_smart_open2.svg");
  max-width: 393px;
}

/* Smart Note Tablet */

.smart-toggle-tablet {
  position: absolute;
  top: 50%;
  /* Position nach Wunsch anpassen */
  left: 150px;
  /* Position nach Wunsch anpassen */
  z-index: 20;
  pointer-events: auto;
}

#smartToggleTablet {
  display: none;
  /* Checkbox unsichtbar */
}

#smartNoteTablet {
  max-width: 40px;
  transition: all 0.3s ease;
  cursor: pointer;
  transform-origin: top left;
  /* Wachstums-Anker oben links wie Desktop */
  vertical-align: top;
  /* verhindert Safari-Bug mit Verschieben */
  display: block;
  /* wichtig für Safari */
}

#smartNoteTablet:hover {
  transform: scale(1.05);
}

#smartToggleTablet:checked + #smartNoteTablet {
  content: url("https://mandyullmann.com/wp-content/uploads/2025/07/note_smart_open.svg");
  max-width: 334px;
}

/* SMART Note Mobile */

.smart-toggle-mobile {
  position: absolute;
  bottom: 20%;
  left: 15%;
  z-index: 20;
  pointer-events: auto;
}

#smartToggleMobile {
  display: none;
}

#smartNoteMobile {
  max-width: 40px;
  transition: transform 0.3s ease-in-out, all 0.3s ease;
  cursor: pointer;
}

#smartNoteMobile:hover {
  transform: scale(1.05);
}

#smartToggleMobile:checked + #smartNoteMobile {
  content: url("https://mandyullmann.com/wp-content/uploads/2025/07/note_smart_mobile.svg");
  max-width: 334px;
  /* 50% von Desktop */
  transform-origin: top left;
}

.projects-button {
  margin-top: 8px;
  /* passe den Wert an */
}

.menu_button_tablet {
  margin-top: 8px !important;
  /* passe den Wert an */
}

.header-button {
  margin-top: 16px !important;
}

.contact_hello_mobile {
  margin-top: 16px !important;
}

.services-tablet .fusion-flex-content-wrap {
  flex-wrap: wrap !important;
}

.services-tablet .fusion-flex-content-wrap {
  flex-wrap: wrap !important;
}

.services-tablet .service_item {
  flex: 0 0 50% !important;
  max-width: 50% !important;
  box-sizing: border-box;
}

.services-tablet .service_item:nth-child(4) {
  clear: left;
}

.services-tablet {
  width: 600px !important;
}

.services-tablet {
  width: 600px !important;
}

/* theme abstand mobile wegmachen hero */

@media screen and (max-width: 768px) {
  #mobile-hero {
    padding-left: 0 !important;
    padding-right: 0 !important;
    position: relative;
    /* Wichtig, damit das Konfetti sich auf diesen Block bezieht */
    overflow: hidden;
    /* nichts scrollt.. der hero sitzt fest */
  }
}

/* Auf Unterseiten wieder scrollbar machen */

@media screen and (max-width: 768px) {
  body:not(.home) #mobile-hero {
    overflow: visible;
    /* oder auto, wenn nötig */
  }
}

.footer_mobile {
  height: 255px !important;
}

.service_item {
  margin-bottom: 4px !important;
}

/* Gesamter Bereich Impressum & Datenschutzerklärung */

.impressum-datenschutz {
  font-family: "Raleway", sans-serif !important;
  font-size: 20px !important;
  line-height: 1.6 !important;
  color: var(--mandy-dark-foreground-secondary) !important;
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
}

/* Fließtext */

.impressum-datenschutz p,
.impressum-datenschutz span {
  color: var(--mandy-dark-foreground-secondary) !important;
}

/* Headlines */

.impressum-datenschutz h2,
.impressum-datenschutz h3 {
  font-family: "Raleway", sans-serif !important;
  font-size: 32px !important;
  font-weight: 600 !important;
  margin-top: 30px;
  margin-bottom: 15px;
  color: var(--mandy-dark-foreground-primary) !important;
}

/* Fettgedruckte Zwischenüberschriften */

.impressum-datenschutz b,
.impressum-datenschutz strong {
  color: var(--mandy-dark-foreground-primary) !important;
}

/* Links */

.impressum-datenschutz a {
  color: var(--mandy-primary-300) !important;
}

/* Absatzabstände */

.impressum-datenschutz p {
  margin-bottom: 20px;
}

/* Opt-out Shortcode Styling */

.impressum-datenschutz .matomo-opt-out {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 18px !important;
}






.team_setup_heading h2.fusion-title-heading {
  line-height: 1.0 !important;
  /* engerer Zeilenabstand */
}

/* Container: Chips nebeneinander, sauberer Abstand */

.fusion-tagcloud-element {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  /* Abstand zwischen Chips */
  margin: 0 !important;
  padding: 0 !important;
}

/* Standard-Chip (kein Arrow-Stil) */

.fusion-tagcloud-element a.tag-cloud-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px 16px !important;
  border: 0 !important;
  border-radius: 18px !important;
  min-height: 0 !important;
  line-height: 24px !important;
  background: #E0DCE9 !important;
  color: #4B2BAA !important;
  font-family: Roboto, Inter, Arial, Helvetica, sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  text-decoration: none !important;
}

.fusion-tagcloud-element a.tag-cloud-link:hover {
  background: #4B2BAA !important;
  color: #fff !important;
}

.fusion-tagcloud-element a.tag-cloud-link .tag-link-count {
  margin-left: .25em !important;
}

/* ARROWS-Variante wie normale Pills aussehen lassen */

.fusion-tagcloud-element.style-arrows a.tag-cloud-link {
  height: auto !important;
  line-height: 24px !important;
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.fusion-tagcloud-element.style-arrows a.tag-cloud-link .text {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px 16px !important;
  border-radius: 18px !important;
  background: #E0DCE9 !important;
  color: #4B2BAA !important;
}

.fusion-tagcloud-element.style-arrows a.tag-cloud-link:hover .text {
  background: #4B2BAA !important;
  color: #fff !important;
}

.fusion-tagcloud-element.style-arrows a.tag-cloud-link .arrow {
  display: none !important;
}

/* Wrapper */

.chip-list {
  display: flex !important;
  flex-wrap: wrap !important;
  margin: 12px 0 0 0 !important;
  /* Abstand zur Überschrift */
  padding: 0 !important;
  gap: 8px !important;
  list-style: none !important;
}

/* Wrapper */

.chip-list_2 {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  /* Alles nach rechts */
  margin: 12px 0 0 0 !important;
  /* Abstand zur Überschrift */
  padding: 0 !important;
  gap: 8px !important;
  list-style: none !important;
}

/* Pill */

.chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px 16px !important;
  /* wie im Screenshot */
  line-height: 24px !important;
  border-radius: 18px !important;
  background-color: #223649 !important;
  /* Hintergrund */
  color: #ACBFD1 !important;
  /* Textfarbe */
  cursor: default !important;
  user-select: text !important;
  /* Text kopierbar */
  font-family: "Raleway", sans-serif !important;
  font-style: normal !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

/* =========================================================
   🔧 RESTORE BLOCK – FEHLENDE TEILE AUS CODE 2
   (Chips, Sprungmarken, Utilities, Smart Notes, Tagcloud etc.)
========================================================= */

.highlight_fl_leader {
  color: var(--mandy-green-500) !important;
  font-weight: 400 !important;
}

.research_gif {
  width: 300px !important;
  /* oder gewünschte feste Breite */
  height: auto !important;
  /* Höhe automatisch proportional */
  max-width: none !important;
  /* überschreibt evtl. Avada-Responsive-Styles */
}









@media screen and (min-width: 390px) and (max-width: 1024px) {
  body.home {
    overflow: hidden !important;
    height: 100vh !important;
  }






  body.home .menu_desktop {
    max-height: 100vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  }


/* dii Für alles kleiner als 390px: wieder scrollbar */

@media screen and (max-width: 389px) {
  body.home {
    overflow: visible !important;
    height: auto !important;
  }
}















/* Default: über 1224px → 24px */

.fusion-accordian .fusion-panel,
.fusion-accordian .fusion-panel .panel-title a,
.fusion-accordian .fusion-panel .panel-body.toggle-content,
.fusion-accordian .fusion-panel .fusion-toggle-content {
  padding-left: 24px;
  padding-right: 24px;
}

/* Bis 1224px → 16px */

@media (max-width: 1224px) {
  .fusion-accordian .fusion-panel,
  .fusion-accordian .fusion-panel .panel-title a,
  .fusion-accordian .fusion-panel .panel-body.toggle-content,
  .fusion-accordian .fusion-panel .fusion-toggle-content {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* SPRUNGMARKEN */

/* 1) Box selbst bleibt linksbündig */

.sprungmarken_box {
  text-align: left !important;
  /* WICHTIG: Avada Hover-Background komplett deaktivieren */
  --awb-bg-color-hover: transparent !important;
}

/* optional: falls Avada direkt background auf hover setzt */

.sprungmarken_box:hover,
.sprungmarken_box:focus,
.sprungmarken_box:active {
  background: inherit !important;
  background-color: inherit !important;
}

/* 2) Liste: Bullets weg + Einzüge neutralisieren */

.sprungmarken_box ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

/* 3) Zeilen: sauberer vertikaler Abstand */

.sprungmarken_box li {
  margin: 12px 0 !important;
  /* anpassen nach Bedarf */
}

/* 4) Link: Text + Chevron in einer Zeile mittig */

.sprungmarken_box li a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px;
  text-decoration: none !important;
  color: #d7eafc !important;
  white-space: nowrap;
  /* Standard: Desktop/Tablet nicht umbrechen */
}

/* 5) Chevron direkt hinter dem Text */

.sprungmarken_box li a::after {
  content: "›";
  line-height: 1;
  color: #d7eafc !important;
}

/* --------- Breakpoint 1140px wie bei dir --------- */

@media (max-width: 1140px) {
  .sprungmarken {
    font-size: 14px !important;
  }

  .sprungmarken_box {
    width: 200px !important;
    max-width: 200px !important;
    flex-basis: 200px !important;
  }
}

/* --------- MOBIL: ≤ 686px --------- */

@media (max-width: 686px) {
  /* Sticky Column Offset mobil – bleibt wie im Original */

  .fusion-sticky-column,
  .fusion-sticky-container {
    top: 20px !important;
  }

  .fusion-layout-column.awb-sticky-small,
  .awb-sticky-small {
    top: 0px !important;
  }

  .sprungmarken_box {
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 100% !important;
    box-sizing: border-box !important;
    /* innen weiter 20px */
    padding: 20px !important;
    /* oben KEINE Rundung, unten wie gehabt */
    border-radius: 0 0 20px 20px !important;
    /* volle Breite: außen links/rechts kein Abstand */
    margin-left: 0 !important;
    margin-right: 0 !important;
    /* HINTERGRUND */
    background: #E4BC6B !important;
    background-color: #E4BC6B !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
    /* Avada Hover-Background auch mobil killen */
    --awb-bg-color-hover: #E4BC6B !important;
  }

  /* falls irgendein Parent/Wrapper hover reinfunkt */

  .sprungmarken_box:hover,
  .sprungmarken_box:focus,
  .sprungmarken_box:active {
    background: #E4BC6B !important;
    background-color: #E4BC6B !important;
  }

  .sprungmarken_box ul {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    align-content: flex-start !important;
    gap: 4px 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    list-style: none !important;
  }

  .sprungmarken_box li {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .sprungmarken_box li a {
    /* mobil darf umbrechen */
    white-space: normal !important;
    gap: 12px !important;
    padding: 0 !important;
    color: #223445 !important;
    font-weight: 700 !important;
    font-size: 15px;
  }

  .sprungmarken_box li a::after {
    content: "›";
    line-height: 1;
    color: #223445 !important;
  }
}

/* Dein zweiter Mobile-Block (Padding der Column) bleibt unverändert */

@media (max-width: 686px) {
  .fusion-layout-column.fusion_builder_column {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 686px) {
  /* NUR die Spalte mit den Sprungmarken: Wrapper transparent + keine Rundung */

  .fusion-builder-column-24 > .fusion-column-wrapper,
  .fusion-layout-column.column-24 > .fusion-column-wrapper {
    background: transparent !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }
}

@media (max-width: 686px) {
  .sprungmarken_box li a::after {
    content: "›";
    font-size: 1.5em !important;
    line-height: 1 !important;
    color: #223445 !important;
    position: relative;
    top: -3px;
  }
}

.lovable-chat {
  max-width: 1100px;
  height: 600px;
  margin: 0 auto;
  padding: 40px 80px;
  background: #1B1B1B;
  border-radius: 60px;
  font-family: 'Raleway', sans-serif;
  color: #EEDFD7;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

/* HEADER */

.chat-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20px;
  flex-shrink: 0;
}

/* LOGO */

.logo {
  display: flex;
  align-items: center;
  margin-left: -40px;
}

.logo img {
  height: 70px;
  width: auto;
}

/* ZEIT */

.time {
  font-size: 16px;
  color: #8ed4b1;
}

/* 👉 ERSTE CHAT-TIME RECHTS */

.chat-time:first-of-type {
  width: 100%;
  text-align: right;
}

/* STANDARD CHAT-TIME */

.chat-time {
  font-size: 16px;
  color: #8ed4b1;
  margin: 10px 0;
}

/* CHAT */

.chat-row {
  display: flex;
  margin-bottom: 32px;
}

.chat-row.right {
  justify-content: flex-end;
}

.chat-row.left {
  justify-content: flex-start;
}

/* BUBBLES */

.bubble,
.text {
  width: 75%;
  max-width: 75%;
}

.bubble {
  padding: 14px 18px;
  border-radius: 20px;
  background: rgba(255,255,255,0.06);
  font-size: 20px;
  line-height: 1.6;
  font-weight: 400;
}

.text.ai {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.6;
}

.chat-time {
  font-size: 16px;
  color: #8ed4b1;
  margin: 10px 0;
}

.start-time {
  width: 100%;
  text-align: right;
}

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

/* TABLET */

@media (max-width: 768px) {
  .logo img {
    height: 50px;
  }

  .bubble,
  .text {
    width: 75%;
    max-width: 75%;
  }

  .text.ai {
    font-size: 18px;
  }

  .lovable-chat {
    height: 70vh;
  }

  .lovable-chat {
    padding: 40px 60px;
    border-radius: 30px;
  }
}

/* MOBILE */

@media (max-width: 500px) {
  .logo img {
    height: 40px;
  }

  .bubble,
  .text {
    width: 75%;
    max-width: 75%;
    font-size: 16px;
  }

  .text.ai {
    font-size: 16px;
  }

  .lovable-chat {
    height: 80vh;
    padding: 30px 40px;
    border-radius: 30px;
  }
}

.chat-row.full .bubble.large,
.chat-row.full .text.ai.large {
  width: 100%;
  max-width: 100%;
}

/* USER (grauer Kasten) */

.bubble.large.user {
  padding: 18px 22px;
  border-radius: 20px;
  background: rgba(255,255,255,0.06);
  font-weight: 400;
}

/* LOVABLE (clean, kein Kasten) */

.text.ai.large {
  padding: 0;
  background: none;
  font-weight: 700;
}

.bubble.large.sm,
.text.ai.large.sm {
  font-size: 16px;
  line-height: 1.6;
}

.bubble.large,
.text.ai.large {
  font-size: 20px;
  line-height: 1.6;
}

.bubble.large,
.text.ai.large {
  font-size: 20px;
  line-height: 1.6;
}

.bubble,
.bubble.large,
.text,
.text.ai.large {
  overflow-wrap: anywhere;
}

.fusion-content-tb.fusion-content-tb-1 {
  min-height: 100vh;
}

.fusion-content-tb.fusion-content-tb-1 .post-password-form {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}

/* qTip Tooltip – komplett überschrieben auf dein Design */

/* =========================================================
   GLOBAL TOOLTIP DESIGN
   ========================================================= */

.qtip,
.qtip-default,
.mandy-tooltip,
.journey .journey-card__overlay-link::after {
background:
  var(--mandy-surface-qtip) !important;

color:
  var(--mandy-neutral-0) !important;

  border: none !important;
  border-radius: 10px;

  box-shadow: none !important;
  outline: none !important;

  padding: 10px 14px;

  font-family: "Raleway", sans-serif !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;

  text-align: center !important;
}

.qtip-content {
  color: #fff !important;

  padding: 0 !important;

  font-family: "Raleway", sans-serif !important;
  font-size: 14px !important;
  text-align: center !important;

  max-width: 230px !important;
}

.qtip-tip canvas {
  display: none !important;
}

.qtip,
.mandy-tooltip {
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}








/* MAGIC CONNECTION */

#thinkingToggle:checked ~ .decision-modal {
  opacity: 1;
  pointer-events: auto;
}











/* ===============================
MODAL / POPOVER POSITION
================================ */

.decision-modal {
  position: fixed;
  bottom: 90px;
  right: 10%;
  opacity: 0;
  pointer-events: none;
  transition: 0.3s ease;
  z-index: 30;
}

#thinkingToggle:checked ~ .decision-modal {
  opacity: 1;
  pointer-events: auto;
}

/* ===============================
BUBBLE AUSBLENDEN
================================ */

#thinkingNote {
  transition: all 0.3s ease;
}

#thinkingToggle:checked + #thinkingNote {
  transform: scale(0.6);
  opacity: 0;
  pointer-events: none;
}

/* ===============================
DECISION BOX
================================ */

.decision-box {
  width: 436px;
  padding: 38px 46px 30px;
  border-radius: 30px 30px 4px 30px;
  border: 8px solid #E2D9F8;
  background: #fff;
  font-family: "Raleway", sans-serif;
  position: relative;
  /* 💥 DEIN FIGMA SHADOW */
  box-shadow: 41px 298px 84px 0 rgba(0, 0, 0, 0.00),
    26px 191px 77px 0 rgba(0, 0, 0, 0.02),
    15px 107px 65px 0 rgba(0, 0, 0, 0.08),
    7px 48px 48px 0 rgba(0, 0, 0, 0.14),
    2px 12px 26px 0 rgba(0, 0, 0, 0.16);
}

/* ===============================
HEADER
================================ */

.decision-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.decision-box h2 {
  font-size: 28px;
  font-weight: 800;
  line-height: 130%;
  color: #141617;
  margin: 0;
}

/* ===============================
CLOSE BUTTON
================================ */

.decision-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: #EDEAF6;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.decision-close::before {
  content: "×";
  font-size: 20px;
  font-weight: 500;
  color: #281561;
}

.decision-close:hover {
  background: rgba(40, 21, 97, 0.12);
  transform: scale(1.05);
}

/* ===============================
LIST
================================ */

.checklist {
  list-style: none;
  padding: 0;
  margin-top: 20px;
}

/* ===============================
LIST ITEMS
================================ */

.checklist li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-radius: 11px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: #262829;
  position: relative;
  transition: all 0.3s ease;
}

/* ===============================
ICON (default)
================================ */

.checklist li::before {
  content: "";
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #EAEAEA;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

/* ===============================
ACTIVE STATE (lila)
================================ */

.checklist li.active {
  background: #E2D9F8;
  color: #281561;
  font-weight: 800;
}

/* ===============================
CHECKED STATE (blau)
================================ */

.checklist li.checked::before {
  background: #346AEA;
  border-color: #346AEA;
}

/* ===============================
✔️ CHECK ICON (SVG)
================================ */

.checklist li.checked.show-check::before {
  background-color: #346AEA;
  border-color: #346AEA;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M5 12l4 4 10-10'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
}

/* ===============================
TEXT WRAPPER (WICHTIG!)
================================ */

.text {
  display: inline;
  position: relative;
  width: fit-content;
  max-width: fit-content;
}

/* ===============================
HAND-DRAWN LINE (JS controlled)
================================ */

.draw-line {
  position: absolute;
  left: 0;
  bottom: 1em;
  /* 💥 DAS ist der Schlüssel */
  height: 8px;
  pointer-events: none;
}

.fake-cursor {
  position: fixed;
  left: 100px;
  /* 💥 Startposition sichtbar */
  top: 100px;
  width: 32px;
  height: 32px;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
}

/* 👉 echte Hand (klar sichtbar) */

.fake-cursor::before {
  content: "👆";
  font-size: 28px;
  display: block;
}

/* NUR Checkbox Hover */

.checklist li.hover-checkbox::before {
  border-color: #B5B5B5;
  transform: scale(1.05);
}

/* ========================= */

/* HEADER ANIMATION BASE */

/* ========================= */

.animation-bg-column {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  z-index: 1;
  background: url('https://mandyullmann.com/wp-content/uploads/2026/04/bg_licht3.svg') center / cover no-repeat;
}

/* ========================= */

/* GRID */

/* ========================= */

.animation-grid {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: repeating-linear-gradient(
      to right,
      rgba(255,255,255,0.4) 0px,
      rgba(255,255,255,0.1) 2px,
      transparent 2px,
      transparent 100px
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.4) 0px,
      rgba(255,255,255,0.1) 2px,
      transparent 2px,
      transparent 100px
    );
  pointer-events: none;
}

/* ========================= */

/* CONTENT */

/* ========================= */

.animation-content {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 20px;
}

/* ========================= */

/* 🗒️ NOTE BASE */

/* ========================= */

.note_ha {
  position: absolute;
  width: 205px;
  min-height: 170px;
  padding: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  background: #EEEBF6;
  box-shadow: 0 30px 50px rgba(0, 0, 0, 0.05),
    0 8px 16px rgba(0, 0, 0, 0.04),
    0 2px 4px rgba(0, 0, 0, 0.03);
  /* WICHTIG: sichtbar */
  opacity: 1;
  transition: all 0.3s ease;
}

/* ========================= */

/* TEXT */

/* ========================= */

.note_ha__content {
  font-family: "Raleway", sans-serif;
  font-size: 15px;
  line-height: 150%;
}

.note_ha__content strong {
  font-weight: 700;
  color: #000;
}

.note_ha__content .text-regular {
  font-weight: 400;
  color: #5C5C5C;
}

/* ========================= */

/* STATES */

/* ========================= */

.note_ha--state-default {
  /* base state */
}

.note_ha--state-dragging {
  box-shadow: 0 30px 50px rgba(0, 0, 0, 0.05),
    0 8px 16px rgba(0, 0, 0, 0.04),
    0 2px 4px rgba(0, 0, 0, 0.03);
  position: relative;
}

.note_ha--state-dragging::after {
  content: "";
  position: absolute;
  inset: -12px;
  border: 3px solid #3959FE;
  border-radius: 6px;
  pointer-events: none;
}

.note_ha--state-placing {
  box-shadow: 0 30px 50px rgba(0, 0, 0, 0.05),
    0 8px 16px rgba(0, 0, 0, 0.04),
    0 2px 4px rgba(0, 0, 0, 0.03);
}

.note-selection {
  position: absolute;
  inset: -12px;
  border: 3px solid #3959FE;
  border-radius: 4px;
  z-index: 10;
  pointer-events: none;
  display: none;
}

/* NUR im placing sichtbar */

.note_ha--state-placing .note-selection {
  display: block;
}

/* Dragging = keine Handles */

.note_ha--state-dragging .handle {
  display: none;
}

/* BASE */

.handle {
  position: absolute;
}

/* SIDE (blau) */

.handle--top,
.handle--right,
.handle--bottom,
.handle--left {
  width: 10px;
  height: 10px;
  background: #395AFD;
  border: 2px solid #FFF;
  border-radius: 50%;
}

/* POSITION */

.handle--top {
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
}

.handle--bottom {
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
}

.handle--left {
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
}

.handle--right {
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
}

/* CORNER (weiß) */

.handle--tl,
.handle--tr,
.handle--bl,
.handle--br {
  width: 16px;
  height: 16px;
  background: #FFF;
  border: 2px solid #B4B4B4;
  border-radius: 50%;
}

/* CORNER POSITION */

.handle--tl {
  top: -9px;
  left: -10px;
}

.handle--tr {
  top: -9px;
  right: -10px;
}

.handle--bl {
  bottom: -9px;
  left: -10px;
}

.handle--br {
  bottom: -9px;
  right: -10px;
}

/* ========================= */

/* POSITIONS */

/* ========================= */

.note_ha--back {
  z-index: 1;
  transform: translate(0px, 35px);
}

.note_ha--middle {
  z-index: 2;
  transform: translate(115px, -75px);
}

.note_ha--front {
  z-index: 3;
  transform: translate(100px, 160px);
}

/* ========================= */

/* CURSOR */

/* ========================= */

.ha-cursor {
  position: absolute;
  z-index: 20;
  top: 250px;
  right: 90px;
  width: 80px;
  pointer-events: none;
}

.ha-cursor img {
  width: 100%;
  height: auto;
  display: block;
}

/* ========================= */

/* animation start  */

/* ========================= */

.note_ha--back {
  transform: translate(400px, 35px);
}

.note_ha--middle {
  transform: translate(400px, 35px);
}

.note_ha--front {
  transform: translate(400px, 35px);
}

/* ========================= */

/* USE CASE CTA ARROW */

/* ========================= */

.ha-usecase-arrow {
  position: absolute;
  /* ca. 85px höher als vorher */
  top: 30px;
  right: 32px;
  width: 130px;
  height: auto;
  z-index: 30;
  opacity: 0;
  transform: translate(18px, 18px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.ha-usecase-arrow.is-visible {
  opacity: 1;
  animation: haUsecaseArrowPulse 0.82s cubic-bezier(0.22, 1, 0.36, 1) 2 both;
}

@keyframes haUsecaseArrowPulse {
  0% {
    transform: translate(18px, 18px) scale(0.96);
  }

  45% {
    transform: translate(4px, 4px) scale(1.09);
  }

  72% {
    transform: translate(10px, 10px) scale(0.99);
  }

  100% {
    transform: translate(18px, 18px) scale(0.96);
  }
}

/* ========================= */

/* HEADER ANIMATION COMPACT */

/* Tablet + Mobile */

/* ========================= */

/* ========================= */

/* HEADER ANIMATION COMPACT */

/* Tablet + Mobile */

/* ========================= */

/* ========================= */

/* HEADER ANIMATION COMPACT */

/* Tablet + Mobile */

/* ========================= */

/* ========================= */

/* HEADER ANIMATION COMPACT */

/* Tablet + Mobile */

/* ========================= */

/* ========================= */

/* HEADER ANIMATION COMPACT */

/* Tablet + Mobile */

/* ========================= */

/* ========================= */

/* HEADER ANIMATION COMPACT – FINAL CARD SIZE */

/* ========================= */

.animation-bg-column--compact .note_ha {
  box-sizing: border-box !important;
  width: 131px !important;
  min-height: 112px !important;
  padding: 12px !important;
  border-radius: 4px !important;
  background: #EEEBF6 !important;
  box-shadow: 0 22px 34px rgba(0, 0, 0, 0.06),
    0 8px 16px rgba(0, 0, 0, 0.05),
    0 2px 4px rgba(0, 0, 0, 0.03) !important;
}

.animation-bg-column--compact .note_ha--middle {
  min-height: 122px !important;
}

.animation-bg-column--compact .note_ha--front {
  min-height: 150px !important;
}

.animation-bg-column--compact .note_ha__content {
  font-size: 11px !important;
  line-height: 1.42 !important;
}

.animation-bg-column--compact .note_ha__content strong {
  font-weight: 700 !important;
}

.animation-bg-column--compact .note_ha__content .text-regular {
  font-weight: 400 !important;
}

/* Selection compact */

.animation-bg-column--compact .note-selection {
  inset: -8px !important;
  border-width: 2px !important;
  border-radius: 4px !important;
}

.animation-bg-column--compact .handle--top,
.animation-bg-column--compact .handle--right,
.animation-bg-column--compact .handle--bottom,
.animation-bg-column--compact .handle--left {
  width: 8px !important;
  height: 8px !important;
  border-width: 2px !important;
}

.animation-bg-column--compact .handle--tl,
.animation-bg-column--compact .handle--tr,
.animation-bg-column--compact .handle--bl,
.animation-bg-column--compact .handle--br {
  width: 12px !important;
  height: 12px !important;
  border-width: 2px !important;
}

/* Cursor / Arrow compact */

.animation-bg-column--compact .ha-cursor {
  width: 54px !important;
z-index: 120 !important;
}

.animation-bg-column--compact .ha-usecase-arrow {
  width: 82px !important;
}

.responsive-iframe-wrapper {
  width: 100%;
  aspect-ratio: 1827 / 1100;
  overflow: visible;
  position: relative;
}

.responsive-iframe-wrapper iframe {
  position: absolute;
  top: -80px;
  /* hier feinjustieren */
  left: 0;
  width: 100%;
  height: calc(100% + 160px);
  /* doppelt so viel wie top */
  border: none;
}

















/*  
UX CARDS ----------------------------------------------------------------------
UX CARDS ----------------------------------------------------------------------
UX CARDS ----------------------------------------------------------------------
UX CARDS ----------------------------------------------------------------------
UX CARDS ---------------------------------------------------------------------- */


/* =========================================================
   UX DECISION CARDS
   ========================================================= */


/* =========================================================
   MAIN CARD
   ========================================================= */

.solution-hover-card {
  position: relative;

  display: flex;
  width: 100%;
  max-width: 1356px;

  padding: 24px;

  flex-direction: column;
  align-items: flex-start;
  gap: 40px;

  box-sizing: border-box;
  overflow: visible;

  border-radius: 20px;

  background-color:
    var(--mandy-dark-surface-container) !important;

  color:
    var(--mandy-dark-foreground-primary) !important;

  container-type: inline-size;
}


/* =========================================================
   GLOBAL BACKDROP
   ========================================================= */

.shc-global-backdrop {
  position: fixed;
  inset: 0;

  z-index: 4990;

  background-color:
    var(--mandy-dark-surface-page) !important;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 180ms ease,
    visibility 180ms ease;
}

.shc-global-backdrop.is-visible {
  opacity: 0.78;

  visibility: visible;
  pointer-events: auto;
}


/* =========================================================
   HEADER
   ========================================================= */

.solution-hover-card .shc-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  width: 100%;
  align-self: stretch;

  gap: 24px;
}

.solution-hover-card .shc-header-row {
  display: flex;
  align-items: center;

  width: 100%;

  gap: 24px;
}


/* =========================================================
   CARD NUMBER
   ========================================================= */

.solution-hover-card .shc-main-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 70px;
  height: 70px;

  min-width: 70px;
  min-height: 70px;

  max-width: 70px;
  max-height: 70px;

  flex: 0 0 70px;

  box-sizing: border-box;

  border: 0 !important;
  border-radius: 50% !important;

  background-color:
    var(--mandy-dark-surface-container-muted) !important;

  color:
    var(--mandy-dark-foreground-secondary) !important;

  box-shadow: none !important;
}


/* Ursprüngliches Feature-SVG nicht mehr anzeigen */

.solution-hover-card .shc-main-icon svg {
  display: none !important;
}


/* =========================================================
   TITLE WRAPPER
   ========================================================= */

.solution-hover-card .shc-title-wrap {
  display: flex;
  flex-direction: column;

  min-width: 0;

  gap: 8px;
}


/* =========================================================
   TITLE
   ========================================================= */

.solution-hover-card .shc-title {
  margin: 0 !important;

  color:
    var(--mandy-dark-foreground-primary) !important;

  font-family:
    "Raleway", sans-serif !important;

  font-size:
    28px !important;

  font-style:
    normal !important;

  font-weight:
    600 !important;

  line-height:
    1.15 !important;

  letter-spacing:
    0 !important;

  text-transform:
    none !important;
}

.solution-hover-card .shc-title-nowrap {
  white-space: nowrap;
}


/* =========================================================
   CATEGORY
   ========================================================= */

.solution-hover-card .shc-category {
  margin: 0 !important;

  color:
    var(--mandy-navy-100) !important;

  font-family:
    "Raleway", sans-serif !important;

  font-size:
    18px !important;

  font-style:
    normal !important;

  font-weight:
    600 !important;

  line-height:
    150% !important;

  text-transform:
    uppercase !important;
}


/* =========================================================
   OLD DIVIDER
   ========================================================= */

.solution-hover-card .shc-divider {
  display: none !important;
}


/* =========================================================
   TAB ROW

   3 Tabs:
   User Pain · Solution · Impact
   ========================================================= */

.solution-hover-card .shc-tabs {
  position: relative;

  display: grid;

  width: 100%;

  grid-template-columns:
    repeat(3, minmax(max-content, 1fr));

  align-items: stretch;

  gap: 24px;
}

.solution-hover-card .shc-tab {
  position: relative;

  display: flex;

  min-width: 0;
}


/* =========================================================
   TAB BUTTON – BASE

   Schutzabstand:
   24px · Icon · 10px · Text · 24px
   ========================================================= */

.solution-hover-card .shc-tab-button {
  position: relative !important;

  display: flex;
  align-items: center;
  justify-content: flex-start;

  width: 100%;

  min-width: max-content;
  min-height: 56px;

  gap: 10px;

  padding:
    12px 24px;

  box-sizing: border-box;

  border:
    3px solid transparent !important;

  border-radius:
    16px;

  background-color:
    var(--mandy-dark-surface-container-muted) !important;

  color:
    var(--mandy-dark-foreground-primary) !important;

  font-family:
    "Raleway", sans-serif !important;

  font-size:
    16px !important;

  font-style:
    normal !important;

  font-weight:
    600 !important;

  line-height:
    150% !important;

  text-align:
    left !important;

  text-transform:
    uppercase !important;

  white-space:
    nowrap;

  word-break:
    keep-all;

  overflow-wrap:
    normal;

  cursor:
    pointer;

  box-shadow:
    none !important;

  transform:
    none !important;

  transition:
    background-color 180ms ease,
    color 180ms ease,
    border-color 180ms ease !important;
}

.solution-hover-card
.shc-tab-button
span:last-child {
  min-width: 0;

  white-space:
    nowrap;

  word-break:
    keep-all;

  overflow-wrap:
    normal;
}


/* =========================================================
   TAB ICON WRAPPER
   ========================================================= */

.solution-hover-card .shc-tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 32px;
  height: 32px;

  min-width: 32px;
  min-height: 32px;

  max-width: 32px;
  max-height: 32px;

  flex: 0 0 32px;

  box-sizing: border-box;

  border-radius: 50%;

  transition:
    background-color 180ms ease,
    color 180ms ease;
}

.solution-hover-card
.shc-tab-icon svg {
  display: block;

  width: 20px;
  height: 20px;

  color:
    inherit !important;
}

.solution-hover-card
.shc-tab-icon svg * {
  stroke:
    currentColor !important;
}


/* =========================================================
   USER PAIN – ICON
   ========================================================= */

.solution-hover-card
.shc-tab--pain
.shc-tab-icon {
  background-color:
    var(--mandy-coral-500) !important;

  color:
    var(--mandy-light-foreground-on-color-primary) !important;
}


/* =========================================================
   SOLUTION – ICON
   ========================================================= */

.solution-hover-card
.shc-tab--solution
.shc-tab-icon {
  background-color:
    var(--mandy-green-500) !important;

  color:
    var(--mandy-light-foreground-on-color-primary) !important;
}


/* =========================================================
   IMPACT – ICON
   ========================================================= */

.solution-hover-card
.shc-tab--impact
.shc-tab-icon {
  background-color:
    var(--mandy-blue-500) !important;

  color:
    var(--mandy-light-foreground-on-color-primary) !important;
}


/* =========================================================
   HOVER

   Nur geschlossene Tabs.
   Icon-Kreis verschmilzt vollständig mit der Fläche.
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

  .solution-hover-card
  .shc-tab:not(.is-active)
  .shc-tab-button:hover {
    background-color:
      var(--mandy-dark-action-hover-surface) !important;

    color:
      var(--mandy-dark-action-hover-foreground) !important;

    border-color:
      transparent !important;

    box-shadow:
      none !important;

    transform:
      none !important;
  }


  .solution-hover-card
  .shc-tab:not(.is-active)
  .shc-tab-button:hover
  .shc-tab-icon {
    background-color:
      var(--mandy-dark-action-hover-surface) !important;

    color:
      var(--mandy-dark-foreground-on-brand-primary) !important;
  }

}


/* =========================================================
   ACTIVE / OPEN

   Dark Surface Container Muted
   Light Foreground
   Blue Active Border
   ========================================================= */

.solution-hover-card
.shc-tab.is-active
.shc-tab-button {
  background-color:
    var(--mandy-dark-surface-container-muted) !important;

  color:
    var(--mandy-dark-foreground-primary) !important;

  border-color:
    var(--mandy-dark-action-focus-ring) !important;

  border-radius:
    30px !important;

  box-shadow:
    none !important;

  transform:
    none !important;
}


/* Active Icon-Kreis verschmilzt mit der Button-Fläche */

.solution-hover-card
.shc-tab.is-active
.shc-tab-icon {
  background-color:
    var(--mandy-dark-surface-container-muted) !important;

  color:
    var(--mandy-dark-foreground-primary) !important;
}


/* Active bleibt auch bei Hover unverändert */

@media (hover: hover) and (pointer: fine) {

  .solution-hover-card
  .shc-tab.is-active
  .shc-tab-button:hover {
    background-color:
      var(--mandy-dark-surface-container-muted) !important;

    color:
      var(--mandy-dark-foreground-primary) !important;

    border-color:
      var(--mandy-dark-action-focus-ring) !important;

    border-radius:
      30px !important;
  }


  .solution-hover-card
  .shc-tab.is-active
  .shc-tab-button:hover
  .shc-tab-icon {
    background-color:
      var(--mandy-dark-surface-container-muted) !important;

    color:
      var(--mandy-dark-foreground-primary) !important;
  }

}







  .solution-hover-card
  .shc-tab.is-active
  .shc-tab-button:hover
  .shc-tab-icon {
    background-color:
      var(--mandy-light-surface-page) !important;

    color:
      var(--mandy-light-foreground-primary) !important;
  }

}


/* =========================================================
   PRESS – CLOSED
   ========================================================= */

.solution-hover-card
.shc-tab:not(.is-active)
.shc-tab-button:active {
  background-color:
    var(--mandy-dark-action-hover-surface) !important;

  color:
    var(--mandy-dark-action-hover-foreground) !important;
}

.solution-hover-card
.shc-tab:not(.is-active)
.shc-tab-button:active
.shc-tab-icon {
  background-color:
    var(--mandy-dark-action-hover-surface) !important;

  color:
    var(--mandy-dark-foreground-on-brand-primary) !important;
}


/* =========================================================
   KEYBOARD FOCUS
   ========================================================= */

.solution-hover-card
.shc-tab-button:focus-visible {
  outline:
    3px solid var(--mandy-dark-action-focus-ring) !important;

  outline-offset:
    2px !important;
}







/* =========================================================
   TOOLTIP BASE

   Alle Tooltips bewusst einheitlich.
   ========================================================= */

.shc-tooltip {
  position: fixed;
  z-index: 2147483600;

  display: block;
  box-sizing: border-box;
		
overflow: hidden;

max-height: min(530px, calc(100dvh - 32px));

  width: min(560px, calc(100vw - 32px));
  padding: 40px;

  border-radius: 30px;
  border: 0;

  background:
    rgba(238, 237, 247, 0.62) !important;

  -webkit-backdrop-filter:
    blur(24px) saturate(120%);

  backdrop-filter:
    blur(24px) saturate(120%);

  box-shadow:
    -44px 54px 20px 0 rgba(19, 21, 21, 0),
    -28px 35px 18px 0 rgba(19, 21, 21, 0.03),
    -16px 19px 15px 0 rgba(19, 21, 21, 0.12),
    -7px 9px 11px 0 rgba(19, 21, 21, 0.20),
    -2px 2px 6px 0 rgba(19, 21, 21, 0.23);

  color:
    var(--mandy-light-foreground-primary) !important;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform:
    translateY(8px) scale(0.985);

  transform-origin:
    top center;

  transition:
    opacity 180ms ease,
    transform 180ms ease,
    visibility 180ms ease;
}








/* =========================================================
   TOOLTIP – INNER SCROLL AREA
   ========================================================= */
/* =========================================================
   TOOLTIP – INNER SCROLL AREA
   ========================================================= */

.shc-tooltip__scroll {
  width: calc(100% + 18px);

  margin-right: -18px;
  padding-right: 18px;

  max-height:
    calc(min(530px, calc(100dvh - 32px)) - 58px);

  overflow-x: hidden;
  overflow-y: auto;

  overscroll-behavior: contain;

  -webkit-overflow-scrolling: touch;

  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color:
    rgba(255, 255, 255, 0.34)
    transparent;
}


/* =========================================================
   GLASS SCROLLBAR – CHROME / SAFARI / EDGE
   ========================================================= */

.shc-tooltip__scroll::-webkit-scrollbar {
  width: 10px;
}


.shc-tooltip__scroll::-webkit-scrollbar-track {
  background: transparent;

  border: 0;
  box-shadow: none;
}


.shc-tooltip__scroll::-webkit-scrollbar-thumb {
  background:
    rgba(255, 255, 255, 0.34);

  border: 1px solid
    rgba(255, 255, 255, 0.38);

  border-radius: 999px;

  box-shadow:
    0 2px 10px
    rgba(0, 0, 0, 0.08);
}


.shc-tooltip__scroll::-);
}


.shc-tooltip__scroll::-webkit-scrollbar-thumb:hover {
  background:
    rgba(255, 255, 255, 0.46);
}





/* Gradient nur auf dem 3px Border */

.shc-tooltip::after {
  content: "";

  position: absolute;
  inset: 0;

  padding: 3px;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      var(--mandy-neutral-0) 0%,
      var(--mandy-blue-500) 32%,
      var(--mandy-primary-200) 100%
    );

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

  -webkit-mask-composite: xor;

  mask-composite: exclude;

  pointer-events: none;
}





/* =========================================================
   TOOLTIP MEASURING
   ========================================================= */

.shc-tooltip.is-measuring {
  opacity: 0 !important;

  visibility:
    hidden !important;

  pointer-events:
    none !important;

  transform:
    translateY(8px) !important;

  transition:
    none !important;
}


/* =========================================================
   TOOLTIP OPEN
   ========================================================= */

.shc-tooltip.is-open {
  opacity: 1;

  visibility: visible;
  pointer-events: auto;

  transform:
    translateY(0);
}


/* =========================================================
   TOOLTIP ICON
   ========================================================= */

.shc-tooltip .shc-tooltip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 24px;
  height: 24px;

  flex: 0 0 24px;

  margin-bottom: 16px;

  color:
    inherit !important;
}

.shc-tooltip
.shc-tooltip-icon svg {
  display: block;

  width: 24px;
  height: 24px;

  color:
    inherit !important;
}

.shc-tooltip
.shc-tooltip-icon svg * {
  stroke:
    currentColor !important;
}


/* =========================================================
   TOOLTIP TEXT
   ========================================================= */

.shc-tooltip p,
.shc-tooltip li {
  margin: 0;

  color:
    inherit !important;

  font-family:
    "Raleway", sans-serif;

  font-size:
    16px;

  font-style:
    normal;

  font-weight:
    500;

  line-height:
    170%;
}

.shc-tooltip ul {
  margin:
    12px 0 0;

  padding-left:
    20px;
}

.shc-tooltip li + li {
  margin-top:
    4px;
}


/* =========================================================
   HIGHLIGHTED TEXT
   ========================================================= */

.solution-hover-card .sd-em,
.shc-tooltip .sd-em {
  color:
    inherit !important;

  font-family:
    "Raleway", sans-serif;

  font-size:
    inherit;

  font-style:
    normal;

  font-weight:
    700;

  line-height:
    inherit;
}


/* =========================================================
   AUTOMATIC NUMBERING
   ========================================================= */

body {
  counter-reset:
    mandy-ux-card;
}

.solution-hover-card {
  counter-increment:
    mandy-ux-card;
}

.solution-hover-card
.shc-main-icon::before {
  content:
    counter(
      mandy-ux-card,
      decimal-leading-zero
    );

  color:
    inherit;

  font-family:
    "Raleway", sans-serif;

  font-size:
    28px;

  font-style:
    normal;

  font-weight:
    700;

  line-height:
    1;
}


/* =========================================================
   RESPONSIVE – SLIGHTLY TIGHTER
   ========================================================= */

@media (max-width: 1500px) {

  .solution-hover-card .shc-tabs {
    gap:
      16px;
  }

}


/* =========================================================
   RESPONSIVE – STACK

   Sobald für drei Tabs inklusive Schutzabstand
   nicht mehr genug Platz vorhanden ist:
   direkt 3 untereinander.
   Kein 2 + 1 Layout.
   ========================================================= */

@container (max-width: 700px) {

  .solution-hover-card .shc-tabs {
    grid-template-columns:
      1fr;

    gap:
      12px;
  }

  .solution-hover-card
  .shc-tab-button {
    width:
      100%;

    min-width:
      0;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .solution-hover-card {
    padding:
      20px;

    gap:
      20px;
  }


  .solution-hover-card
  .shc-header-row {
    align-items:
      center;

    gap:
      16px;
  }


  .solution-hover-card
  .shc-main-icon {
    width:
      56px;

    height:
      56px;

    min-width:
      56px;

    min-height:
      56px;

    max-width:
      56px;

    max-height:
      56px;

    flex:
      0 0 56px;
  }


  .solution-hover-card
  .shc-main-icon::before {
    font-size:
      24px;
  }


  .solution-hover-card
  .shc-title {
    font-size:
      24px !important;

    font-weight:
      700 !important;
  }


  .solution-hover-card
  .shc-category {
    font-size:
      14px !important;

    font-weight:
      600 !important;
  }


  .solution-hover-card
  .shc-tabs {
    grid-template-columns:
      1fr;

    gap:
      12px;
  }


  .solution-hover-card
  .shc-tab-button {
    width:
      100%;

    min-width:
      0;

    min-height:
      48px;

    padding:
      10px 16px;

    gap:
      8px;

    border-radius:
      12px;

    font-size:
      14px !important;
  }


  .solution-hover-card
  .shc-tab-icon {
    width:
      32px;

    height:
      32px;

    min-width:
      32px;

    min-height:
      32px;

    max-width:
      32px;

    max-height:
      32px;

    flex:
      0 0 32px;
  }


  .solution-hover-card
  .shc-tab-icon svg {
    width:
      20px;

    height:
      20px;
  }


  .shc-tooltip {
    padding:
      28px 22px;

    border-radius:
      16px;
  }


  .shc-tooltip
  .shc-tooltip-icon {
    width:
      20px;

    height:
      20px;

    flex:
      0 0 20px;

    margin-bottom:
      14px;
  }


  .shc-tooltip
  .shc-tooltip-icon svg {
    width:
      20px;

    height:
      20px;
  }


  .shc-tooltip p,
  .shc-tooltip li {
    font-size:
      14px;

    font-weight:
      500;

    line-height:
      170%;
  }


  .shc-tooltip ul {
    margin-top:
      10px;
  }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {

  .solution-hover-card
  .shc-title {
    font-size:
      22px !important;
  }


  .solution-hover-card
  .shc-category {
    font-size:
      12px !important;
  }


  .solution-hover-card
  .shc-tab-button {
    min-height:
      48px;

    padding:
      10px 16px;

    font-size:
      14px !important;
  }


  .shc-tooltip {
    padding:
      24px 18px;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .solution-hover-card
  .shc-tab-button,

  .solution-hover-card
  .shc-tab-icon,

  .shc-tooltip,

  .shc-global-backdrop {
    transition:
      none !important;
  }

}










/* =========================================================
   TOOLTIP HEADER
   ========================================================= */

.shc-tooltip-header {
  display: flex !important;
  align-items: center !important;

  gap: 10px;

  margin: 0 0 20px 0 !important;
  padding: 0 !important;
}


.shc-tooltip-header
.shc-tooltip-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 24px;
  height: 24px;
  flex: 0 0 24px;

  margin: 0 !important;
  padding: 0 !important;
}


.shc-tooltip-header
.shc-tooltip-icon svg {
  display: block;

  width: 24px;
  height: 24px;

  margin: 0 !important;
}


.shc-tooltip-header strong {
  display: block;

  margin: 0 !important;
  padding: 0 !important;

  color:
    var(--mandy-light-foreground-primary) !important;

  font-family:
    "Raleway", sans-serif !important;

  font-size:
    16px !important;

  font-style:
    normal !important;

  font-weight:
    700 !important;

  line-height:
    24px !important;

  text-transform:
    uppercase !important;
}

























/* =========================================================
   PASSWORD GATE
   Aus deinem bisherigen Block beibehalten
   ========================================================= */

.mandy-password-gate {
  margin-left: 60px;
}





















/* =========================================================
   ENTRY EXPERIENCE V2 — SHARED CODE HIGHLIGHTS
   ========================================================= */

.personal-entry-code {
  display: inline;
  padding: 0 6px;
  border-radius: 8px;

  background-color:
    rgba(120, 153, 179, 0.2);

  background-color:
    color-mix(in srgb, var(--mandy-navy-100) 20%, transparent);

  color: var(--mandy-navy-400) !important;

  font-family: "Roboto Mono", monospace !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  letter-spacing: 0.0em !important;

  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;

  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

@media screen and (max-width: 700px) {
  .personal-entry-code {
    padding: 0 5px;
  }
}





/* =========================================================
   ENTRY EXPERIENCE V2 — TEST (AGPUBLIC)
   Nur V2: Alle visuellen Regeln im Custom CSS.
   V1 / .personal-entry-card bleiben unangetastet.
   ========================================================= */

#mandy-entry-v2,
#mandy-entry-v2 *,
#mandy-entry-v2 *::before,
#mandy-entry-v2 *::after {
  box-sizing: border-box;
}

#mandy-entry-v2 {
  font-family: Raleway, Arial, Helvetica, sans-serif;
}

/* BACKDROP */

#mandy-entry-v2 .mev2-backdrop {
  position: fixed;
  inset: 0;
  z-index: 4990;
  background: var(--mandy-dark-surface-page);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, visibility 180ms ease;
}

#mandy-entry-v2[data-open="yes"] .mev2-backdrop {
  opacity: .3;
  visibility: visible;
  pointer-events: auto;
}

/* CARD — ORIGINALVERLAUF UND SHADOW AUS V1 */

#mandy-entry-v2 .mev2-card {
  position: fixed;
  right: clamp(24px, 3.2vw, 50px);
  bottom: clamp(24px, 3.2vw, 50px);
  z-index: 5000;

width: min(700px, calc(100vw - 48px));
  max-height: calc(
    100dvh - clamp(24px, 3.2vw, 50px) - 16px
  );

  border: 10px solid transparent;
  border-radius: 30px 30px 4px 30px;

  background:
    linear-gradient(
      68deg,
      var(--mandy-light-surface-container) 0%,
      var(--mandy-light-surface-container) 58%,
      var(--mandy-neutral-100) 58%,
      var(--mandy-neutral-100) 100%
    ) padding-box,

    linear-gradient(
      250deg,
      var(--mandy-primary-400) 0%,
      var(--mandy-primary-400) 25%,
      var(--mandy-primary-100) 25%,
      var(--mandy-primary-100) 85%,
      var(--mandy-primary-200) 85%,
      var(--mandy-primary-200) 94%,
      var(--mandy-coral-500) 94%,
      var(--mandy-coral-500) 100%
    ) border-box;

  box-shadow:
    41px 298px 84px 0 rgba(0, 0, 0, 0.00),
    26px 191px 77px 0 rgba(0, 0, 0, 0.02),
    15px 107px 65px 0 rgba(0, 0, 0, 0.08),
    7px 48px 48px 0 rgba(0, 0, 0, 0.14),
    2px 12px 26px 0 rgba(0, 0, 0, 0.16);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translateY(18px) scale(.96);

  cursor: grab;

  transition:
    opacity 420ms ease,
    transform 420ms cubic-bezier(.22, 1, .36, 1),
    visibility 0ms linear 420ms;
}

#mandy-entry-v2[data-open="yes"] .mev2-card {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transform: translateY(0) scale(1);

  transition:
    opacity 420ms ease,
    transform 420ms cubic-bezier(.22, 1, .36, 1),
    visibility 0ms;
}

/* INNERER CONTAINER */

#mandy-entry-v2 .mev2-sheet {
  display: flex;
  flex-direction: column;

  min-height: 0;

  max-height: calc(
    100dvh - clamp(24px, 3.2vw, 50px) - 36px
  );

  padding: 30px 32px 32px;

  overflow: hidden;

  background: transparent;

  color: var(--mandy-light-foreground-primary);
}

/* =========================================================
   TOUR-HEADER — 48 PX INKLUSIVE PROGRESS-BAR
   ========================================================= */

#mandy-entry-v2 .mev2-progress-header {
  position: relative;
  flex: 0 0 48px;

  display: flex;
  flex-direction: column;

  height: 48px;
}

#mandy-entry-v2 .mev2-progress-headline {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;

  gap: 14px;
  height: 48px;
  min-height: 48px;

  font-size: 16px;
  line-height: 1.3;
}

#mandy-entry-v2 .mev2-progress-headline .mev2-close {
  margin-left: auto;
}




/* ENTRY EXPERIENCE V2 – MINIMIEREN-ICON SPIEGELN */

#mandy-entry-v2 .mev2-close .mandy-icon-button__icon {
  transform: scaleX(-1);
}



/* ENTRY EXPERIENCE V2 – MINIMIEREN GRÜN */

#mandy-entry-v2 .mev2-close:not(:hover):not(:active) {
  background-color: var(--mandy-highlight-green) !important;
  color: var(--mandy-navy-700) !important;
}



/* ENTRY EXPERIENCE V2 – MINIMIEREN TOOLTIP */

#mandy-entry-v2 .mev2-close {
  position: relative;
}

#mandy-entry-v2 .mev2-close-tooltip {
  position: absolute;
  z-index: 20;

  right: calc(100% + 16px);
  top: 50%;

  width: max-content;
  white-space: nowrap;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translateY(-50%);
}

/* Hover und Tastaturfokus */

#mandy-entry-v2 .mev2-close:hover .mev2-close-tooltip,
#mandy-entry-v2 .mev2-close:focus-visible .mev2-close-tooltip {
  opacity: 1;
  visibility: visible;
}



#mandy-entry-v2 .mev2-progress-name {
  font-weight: 500;
  white-space: nowrap;
}

#mandy-entry-v2 .mev2-count {
  font-weight: 700;
  white-space: nowrap;
}

#mandy-entry-v2 .mev2-mobile-name {
  display: none;
}

/* ZURÜCK-BUTTON — EXISTIERENDE MANDY-KOMPONENTE */

#mandy-entry-v2 .mev2-back:disabled {
  opacity: .3;
  cursor: default;
  pointer-events: none;
}

/* PROGRESS-BAR */

#mandy-entry-v2 .mev2-track {
  position: absolute;
  left: 0;
  bottom: 0;
border-radius: 999px;

width: calc(100% - 64px);
  height: 6px;

background: var(--mandy-light-surface-container-muted);
  overflow: hidden;
}

#mandy-entry-v2 .mev2-progress-fill {
  display: block;
border-radius: inherit;

  height: 100%;

  background: var(--mandy-highlight-green);

  transition: width 220ms ease;
}






/* Dynamischer Fortschritt für jede Tour-Länge */

#mandy-entry-v2[data-progress] .mev2-progress-fill {
  width: var(--mandy-tour-progress, 0%);
}








/* =========================================================
   FIXIERTER TITELBEREICH
   ========================================================= */

#mandy-entry-v2 .mev2-heading {
  display: grid;

 grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;

  flex: none;

  gap: 20px;
  margin: 32px 0 20px;
}

#mandy-entry-v2 .mev2-logo {
  display: block;

  width: 48px;
  height: 48px;

  border-radius: 4px;

  object-fit: contain;

  transform: translateY(4px);
}

#mandy-entry-v2 .mev2-title {
  min-width: 0;
  max-width: 420px;

  margin: 0;

font-family: "Raleway", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;

  white-space: pre-line;
  overflow-wrap: anywhere;

  color: var(--mandy-light-foreground-primary);
}

/*
  Zurück und Minimieren verwenden beide:
  .mandy-icon-button
  .mandy-icon-button--small
  .mandy-icon-button--light-secondary

  Hover, Active und Fokus kommen ausschließlich
  aus den bereits vorhandenen Mandy-Komponenten.
*/

/* =========================================================
   SCROLLBARER TEXTBEREICH
   ========================================================= */

#mandy-entry-v2 .mev2-intro {
  flex: 1 1 auto;

  min-height: 0;
  max-height: min(305px, 42dvh);

  overflow-y: auto;
  overscroll-behavior-y: contain;

  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;

  padding-right: 10px;
  margin: 0;

font-family: "Raleway", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.7;

  color: var(--mandy-light-foreground-secondary);
}

#mandy-entry-v2 .mev2-primary,
#mandy-entry-v2 .mev2-secondary {
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
  line-height: inherit;
 letter-spacing: normal;
}

#mandy-entry-v2 .mev2-primary {
  color: var(--mandy-light-foreground-primary);
}



#mandy-entry-v2 .mev2-secondary {
  color: var(--mandy-light-foreground-secondary);
}



/* ENTRY EXPERIENCE V2 – AUSRICHTUNG UNABHÄNGIG VON TEXTFARBE */

#mandy-entry-v2 .mev2-intro > .mev2-align-right {
  display: block;
  margin-top: 16px;
  text-align: right;
}

/* ==========================================
   ENTRY EXPERIENCE V2 – CALLOUT
   ========================================== */

#mandy-entry-v2 .mev2-callout {
  display: block;
  margin-top: 16px;
  padding-left: 16px;

border-left: 4px solid color-mix(
  in srgb,
  var(--mandy-highlight-yellow) 60%,
  transparent
);

  color: var(--mandy-light-foreground-primary);
}

/* Fettschriften innerhalb des Callouts */

#mandy-entry-v2 .mev2-callout strong {
  font-weight: 700;
}

/* Abschließender Secondary-Text, rechtsbündig */

#mandy-entry-v2 .mev2-callout + .mev2-secondary,
#mandy-entry-v2 .mev2-intro > .mev2-secondary:last-child {
  display: block;
  margin-top: 16px;
  text-align: right;
}





/* MOBILE — CODE HIGHLIGHTS */

#mandy-entry-v2 .mev2-intro .personal-entry-code {
  font-size: 15px !important;
}


/* MOBILE — BOLD TEXT */

#mandy-entry-v2 .mev2-primary strong {
  font-weight: 700;
}




/* Abstand zwischen allen Textblöcken */

#mandy-entry-v2 .mev2-intro
> :is(.mev2-primary, .mev2-secondary):has(> br + br)
+ :is(.mev2-primary, .mev2-secondary) {
  display: block;
  margin-top: -12px;
}




/*
  Die Code-Highlights verwenden direkt
  die bereits bestehende Klasse:

  .personal-entry-code

  Keine zusätzliche Farbdefinition für V2.
*/

/* PAUSIERTE TOUR — OHNE BESCHREIBUNG */

#mandy-entry-v2[data-mode="paused"] .mev2-intro {
  display: none;
}

/* =========================================================
   FIXIERTER CTA-BEREICH
   ========================================================= */

#mandy-entry-v2 .mev2-actions {
  display: flex;
  flex: none;

  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;

  margin-top: 16px;
  padding-top: 16px;
}



/* Trennlinie nur bei scrollbareren Tour-Texten */

#mandy-entry-v2[data-mode="tour"][data-scrollable="yes"] .mev2-actions {
  border-top: 2px solid var(--mandy-neutral-200);

}



#mandy-entry-v2 .mev2-cta,
#mandy-entry-v2 .mev2-restart {
  align-self: center;
}

#mandy-entry-v2 .mev2-restart[hidden] {
  display: none !important;
}






/*
  CTA verwendet die bestehenden Komponenten:

  .mandy-button
  .mandy-button--light-primary
  .mandy-button__label
  .mandy-button__icon
*/

/* =========================================================
   MINIMIERTE CARD
   ========================================================= */

#mandy-entry-v2 .mev2-mini {
  position: fixed;

  z-index: 5000;

  right: clamp(24px, 3.2vw, 50px);
  bottom: clamp(24px, 3.2vw, 50px);

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 12px;

  border: 10px solid transparent;
  border-radius: 30px 24px 4px 30px;

  cursor: pointer;

  background:
    linear-gradient(
      var(--mandy-light-surface-container),
      var(--mandy-light-surface-container)
    ) padding-box,

    linear-gradient(
      225deg,
      var(--mandy-highlight-yellow) 0%,
      var(--mandy-highlight-yellow) 29%,
      var(--mandy-primary-100) 29%,
      var(--mandy-primary-100) 70%,
      var(--mandy-primary-200) 70%,
      var(--mandy-primary-200) 100%
    ) border-box;

  box-shadow:
    41px 298px 84px 0 rgba(0, 0, 0, 0.00),
    26px 191px 77px 0 rgba(0, 0, 0, 0.02),
    15px 107px 65px 0 rgba(0, 0, 0, 0.08),
    7px 48px 48px 0 rgba(0, 0, 0, 0.14),
    2px 12px 26px 0 rgba(0, 0, 0, 0.16);
}

#mandy-entry-v2 .mev2-mini img {
  display: block;

  width: 24px;
  height: 24px;

  object-fit: contain;

  border-radius: 4px;
}

#mandy-entry-v2[data-ready="no"] .mev2-mini,
#mandy-entry-v2[data-open="yes"] .mev2-mini {
  display: none;
}

#mandy-entry-v2 .mev2-mini:focus-visible {
  outline:
    3px solid var(--mandy-light-action-focus-ring);

  outline-offset: 2px;
}








/* ENTRY EXPERIENCE V2 – MINI TOOLTIP */

#mandy-entry-v2 .mev2-mini-tooltip {
  position: absolute;
  z-index: 10;

right: calc(100% + 28px);
  top: 50%;
  bottom: auto;

  width: max-content;
  white-space: nowrap;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translateY(-50%);
}

/* Hover, Tastaturfokus und automatische Anzeige */

#mandy-entry-v2 .mev2-mini:hover .mev2-mini-tooltip,
#mandy-entry-v2 .mev2-mini:focus-visible .mev2-mini-tooltip,
#mandy-entry-v2 .mev2-mini.is-peeking .mev2-mini-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%);
}








/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 700px) {

  #mandy-entry-v2 .mev2-card {
    right: 12px;
    bottom: 12px;

  width: calc(100vw - 36px);
    max-height: calc(100dvh - 24px);

    transform-origin: bottom right;

    cursor: default;
  }

  #mandy-entry-v2 .mev2-sheet {
    max-height: calc(100dvh - 44px);
    padding: 24px;
  }

  #mandy-entry-v2 .mev2-progress-headline {
    gap: 8px;
  }

  #mandy-entry-v2 .mev2-desktop-name {
    display: none;
  }

  #mandy-entry-v2 .mev2-mobile-name {
    display: inline;
  }

  #mandy-entry-v2 .mev2-heading {
    grid-template-columns: 42px minmax(0, 1fr);

    gap: 12px;
    margin: 24px 0 16px;
  }

  #mandy-entry-v2 .mev2-logo {
    width: 42px;
    height: 42px;
  }

  #mandy-entry-v2 .mev2-title {
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: 0.0em;
  }

 /* MOBILE — PRIMARY & SECONDARY */

#mandy-entry-v2 .mev2-intro {
  max-height: min(300px, 40dvh);

  font-size: 15px;
  line-height: 1.6;
}

#mandy-entry-v2 .mev2-primary,
#mandy-entry-v2 .mev2-secondary {
  font-weight: 500;
}

#mandy-entry-v2 .mev2-secondary {
  font-size: 15px;
  line-height: 1.6;
}
		
		
		
  #mandy-entry-v2 .mev2-mini {
    right: 7%;
    bottom: 1%;
  }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  #mandy-entry-v2 .mev2-card,
  #mandy-entry-v2 .mev2-backdrop,
  #mandy-entry-v2 .mev2-progress-fill {
    transition: none !important;
  }
}









/* Zurück-Button: Transparent, normaler Mandy-Hover bleibt */

#mandy-entry-v2 .mev2-back:not(:hover):not(:active) {
  background-color: transparent !important;
}





/* ENTRY EXPERIENCE V2 – Silbentrennung DE & EN */

#mandy-entry-v2 .mev2-intro,
#mandy-entry-v2 .mev2-title {
  -webkit-hyphens: auto;
  hyphens: auto;

  hyphenate-limit-chars: 10 4 6;

  /* Safari / iOS */
  -webkit-hyphenate-limit-before: 4;
  -webkit-hyphenate-limit-after: 6;

  word-break: normal;
  overflow-wrap: normal;
}









/* ==========================================================
   OUTCOMES
   ==========================================================

   Outcome-spezifisch:
   - Card Layout
   - Card Surfaces
   - Expand / Collapse
   - Cutline
   - Positionierung verschachtelter Components

   Globale Components:
   - .mandy-pill
   - .mandy-icon-button
   - .mandy-button

   Diese werden hier NICHT visuell nachgestylt.
   ========================================================== */


/* ==========================================================
   WRAPPER + CONFETTI
   ========================================================== */

.outcomes-wrap {
  position: relative !important;
  overflow: visible !important;

  width: 800px !important;
  max-width: 100% !important;

  margin-left: auto !important;
  margin-right: auto !important;
}


.outcomes-wrap::before {
  content: "" !important;

  position: absolute !important;
  top: 30px !important;
  left: 0 !important;
  right: 0 !important;

  height: 420px !important;

  background:
    url("/wp-content/uploads/2026/02/konfetti.svg")
    no-repeat
    top center !important;

  background-size: contain !important;

  pointer-events: none !important;

  z-index: 0 !important;
}


.outcomes-wrap > * {
  position: relative !important;
  z-index: 1 !important;
}


/* ==========================================================
   CARDS CONTAINER
   ========================================================== */

.outcomes-cards {
  display: flex !important;
  flex-direction: column !important;

  gap: 16px !important;

  width: 100% !important;

  padding: 16px !important;

  box-sizing: border-box !important;

  position: relative !important;
}


/* Section collapsed */

.outcomes-wrap.is-collapsed
.outcomes-cards {
  max-height: 560px !important;

  padding-bottom: 0 !important;

  overflow: hidden !important;
}


/* Section expanded */

.outcomes-wrap.is-expanded
.outcomes-cards {
  max-height: none !important;

  padding-bottom: 16px !important;

  overflow: visible !important;
}


/* ==========================================================
   OUTCOME CARD
   ========================================================== */

.outcome-card {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    auto !important;

  column-gap: 32px !important;
  row-gap: 16px !important;

  align-items: start !important;

  width: 100% !important;

  padding: 24px 40px !important;

  margin: 0 !important;

  border-radius: 20px !important;

  box-sizing: border-box !important;

  color:
    var(--mandy-light-foreground-on-color-primary) !important;
}


/* ==========================================================
   CARD COLOR VARIANTS
   ========================================================== */

.outcome-card--ocean {
  background-color:
    var(--mandy-ocean-500) !important;
}


.outcome-card--green {
  background-color:
    var(--mandy-green-500) !important;
}


.outcome-card--blue {
  background-color:
    var(--mandy-blue-500) !important;
}


/* ==========================================================
   PILLS
   Nur Positionierung.
   Styling kommt ausschließlich aus .mandy-pill.
   ========================================================== */

.outcome-card__pills {
  grid-column: 1 !important;
  grid-row: 1 !important;

  display: flex !important;
  flex-wrap: wrap !important;

  gap: 8px !important;

  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* ==========================================================
   MANDY ICON BUTTON
   Nur Positionierung + Plus/Minus-State.
   ========================================================== */

[data-outcome-toggle] {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;

  justify-self: end !important;
  align-self: start !important;
}


/*
 * Das SVG ist im geschlossenen Zustand ein Plus.
 * Beim Öffnen wird nur der vertikale Strich ausgeblendet.
 */

[data-outcome-toggle][aria-expanded="true"]
.mandy-icon-button__icon
path:last-child {
  display: none;
}


/* ==========================================================
   TITLE
   ========================================================== */

.outcome-card__title {
  grid-column: 1 !important;
  grid-row: 2 !important;

  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  color:
    var(--mandy-light-foreground-on-color-primary) !important;

  font-family:
    "Raleway",
    Arial,
    Helvetica,
    sans-serif !important;

  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 150% !important;

  text-transform: none !important;
  letter-spacing: 0 !important;
}


/* ==========================================================
   BULLETS
   ========================================================== */

.outcome-card__bullets {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;

  width: 100% !important;

  margin: 0 !important;

  padding-left: 22px !important;

  box-sizing: border-box !important;
}


.outcome-card__bullets li {
  margin-bottom: 6px !important;

  color:
    var(--mandy-light-foreground-on-color-primary) !important;

  font-family:
    "Raleway",
    Arial,
    Helvetica,
    sans-serif !important;

  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 150% !important;
}


.outcome-card__bullets li:last-child {
  margin-bottom: 0 !important;
}


/* Einzelne Card collapsed */

.outcome-card.is-card-collapsed
.outcome-card__bullets {
  display: none !important;
}


/* Einzelne Card expanded */

.outcome-card.is-card-expanded
.outcome-card__bullets {
  display: block !important;
}


/* ==========================================================
   CUTLINE
   ========================================================== */

.outcomes-divider {
  position: relative !important;

  z-index: 10 !important;

  width: 100% !important;
  height: 8px !important;

  border: 0 !important;
  border-radius: 999px !important;

  background-color:
    var(--mandy-neutral-0) !important;

  box-shadow: none !important;
}


.outcomes-wrap.is-expanded
.outcomes-divider {
  display: none !important;
}


.outcomes-wrap.is-collapsed
.outcomes-divider {
  margin-top: -8px !important;
  margin-bottom: 40px !important;
}


.outcomes-wrap hr {
  display: none !important;
}


/* ==========================================================
   SHOW MORE / SHOW LESS
   ==========================================================

   Der Button selbst ist ausschließlich die globale:
   .mandy-button
   .mandy-button--dark-primary

   Outcome kümmert sich nur um die Zentrierung.
   ========================================================== */

.outcomes-actions {
  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
}


/* ==========================================================
   SECTION EXPAND / COLLAPSE
   ========================================================== */

.outcomes-wrap.is-animating
.outcomes-cards {
  transition:
    max-height 450ms
    cubic-bezier(0.22, 1, 0.36, 1) !important;
}


.outcomes-wrap.is-animating.is-expanded
.outcomes-divider {
  transition:
    opacity 250ms ease,
    transform 450ms
    cubic-bezier(0.22, 1, 0.36, 1) !important;

  opacity: 0 !important;

  transform:
    translateY(-10px) !important;
}


/* ==========================================================
   TABLET ≤ 768px
   ========================================================== */

@media (max-width: 768px) {

  .outcomes-wrap {
    max-width: 100% !important;
  }


  .outcomes-cards {
    padding: 8px !important;

    gap: 14px !important;
  }


  .outcomes-wrap.is-collapsed
  .outcomes-cards {
    max-height: 520px !important;

    padding-bottom: 0 !important;

    overflow: hidden !important;
  }


  .outcomes-wrap.is-expanded
  .outcomes-cards {
    max-height: none !important;

    padding-bottom: 8px !important;

    overflow: visible !important;
  }
}


/* ==========================================================
   outcome_MOBILE ≤ 640px
   ========================================================== */

@media (max-width: 640px) {

  .outcomes-cards {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }


  .outcome-card {
    column-gap: 16px !important;
    row-gap: 16px !important;

    padding: 20px 24px !important;
  }


  /*
   * Mobile:
   *
   * Pill(s)                 Icon Button
   * Title über volle Breite
   * Bullets über volle Breite
   */

  [data-outcome-toggle] {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }


  .outcome-card__title {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;

    width: 100% !important;

    font-size: 18px !important;
    line-height: 145% !important;
  }


  .outcome-card__bullets {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;

    width: 100% !important;

    padding-left: 18px !important;
  }


  .outcome-card__bullets li {
    font-size: 16px !important;
    line-height: 145% !important;
  }


  .outcomes-wrap.is-collapsed
  .outcomes-divider {
    margin-bottom: 24px !important;
  }
}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  .outcomes-wrap.is-animating
  .outcomes-cards,

  .outcomes-wrap.is-animating.is-expanded
  .outcomes-divider {
    transition: none !important;
  }
}













/* ==========================================================
   hotspot 
========================================================== */

.awb-image-hotspots-hotspot {
  background-color: #FFFC37 !important;
  color: #000000 !important;
  font-family: "Raleway", sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  border-radius: 50% !important;
  text-decoration: none !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14) !important;
}

/* Popover container */

.popover {
  background: #FFFC37 !important;
  background-color: #FFFC37 !important;
  border: 2px solid #FFFC37 !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16) !important;
}

/* Popover text area */

.popover .popover-body,
.popover .popover-content {
  font-family: "Raleway", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: #000000 !important;
  background: #FFFC37 !important;
  background-color: #FFFC37 !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
}

/* Popover arrow */

.popover .arrow::before,
.popover .arrow::after,
.popover-arrow::before,
.popover-arrow::after {
  border-top-color: #FFFC37 !important;
  border-bottom-color: #FFFC37 !important;
  border-left-color: #FFFC37 !important;
  border-right-color: #FFFC37 !important;
}

/* Optional: remove any white inner outline/shadow if Avada adds one */

.popover * {
  border-color: #FFFC37 !important;
}

/* passwortschutz page */

/* passwortschutz page */

/* passwortschutz page */

/* passwortschutz page */

/* passwortschutz page */

/* passwortschutz page */

/* passwortschutz page */

/* passwortschutz page */

/* passwortschutz page */

/* passwortschutz page */

/* passwortschutz page */

/* passwortschutz page */

/* passwortschutz page */

/* passwortschutz page */

/* passwortschutz page */

/* passwortschutz page */

/* passwortschutz page */

/* passwortschutz page */

/* Fix: Avada/WordPress adds empty paragraphs inside outcome cards in the private gate */

.mandy-private-gate-facelift .outcomes-cards > p,
.mandy-private-gate-facelift .outcome-card > p,
.mandy-private-gate-facelift .outcome-card__header > p,
.mandy-private-gate-facelift .outcome-card__content-head > p {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  line-height: 0 !important;
}

/* Keep Show More visible when Avada wraps the button in a paragraph */

.mandy-private-gate-facelift .outcomes-wrap > p {
  display: flex !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mandy-private-gate-facelift .outcomes-wrap.is-collapsed .outcomes-cards {
  max-height: 720px !important;
}

@media (max-width: 768px) {
  .mandy-private-gate-facelift .outcomes-wrap.is-collapsed .outcomes-cards {
    max-height: 640px !important;
  }
}

@media (max-width: 568px) {
  .mandy-private-gate-facelift .outcomes-wrap.is-collapsed .outcomes-cards {
    max-height: 400px !important;
  }
}

.center_headline {
  display: flex !important;
  justify-content: center !important;
  padding-left: 10px;
  padding-right: 10px;
}

@media (max-width: 768px) {
  .center_headline {
    font-size: 32px !important;
  }
}

@media (max-width: 568px) {
  .center_headline {
    font-size: 24px !important;
  }
}

.mandy-logo a {
  transition: color 0.2s ease, opacity 0.2s ease !important;
}

.mandy-logo a:hover,
.mandy-logo a:focus-visible {
  color: #552CC5 !important;
  opacity: 1 !important;
}














/* =========================================================
   PRIVATE GATE – MOBILE SLIDER LAYOUT FIX
   ========================================================= */

@media (max-width: 768px) {

  .mandy-private-gate-wrapper
  .mandy-slider-card__body {
    display: flex !important;
    flex-direction: column !important;

    grid-template-columns: none !important;
    grid-template-rows: none !important;

    width: 100% !important;

    align-items: stretch !important;
  }


  .mandy-private-gate-wrapper
  .mandy-slider-card__copy {
    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;

    position: static !important;
  }


  .mandy-private-gate-wrapper
  .mandy-slider-card__footer {
    display: flex !important;

    width: 100% !important;

    position: static !important;
  }


  .mandy-private-gate-wrapper
  .mandy-slider-card__pill-groups {
    display: flex !important;
    flex-direction: column !important;

    min-width: 0 !important;

    position: static !important;
  }


  .mandy-private-gate-wrapper
  .mandy-pill-list {
    position: static !important;
  }

}







/* =========================================================
   CONTACT TEASER CARD
   ========================================================= */

.contact-teaser-card {
  position: relative !important;
  cursor: pointer;

  --awb-bg-color-hover:
    var(--mandy-highlight-green) !important;
}


/* Unsichtbarer echter Button über der gesamten Card */

.contact-teaser-card .contact-overlay-link {
  position: absolute !important;
  inset: 0 !important;

  display: block !important;
  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;

  background: transparent !important;
  appearance: none;
  -webkit-appearance: none;

  cursor: pointer;
  pointer-events: auto !important;
  z-index: 30 !important;
}


/* Tastaturfokus auf der gesamten Card */

.contact-teaser-card .contact-overlay-link:focus-visible {
  outline:
    3px solid var(--mandy-light-action-focus-ring) !important;

  outline-offset: -6px !important;
  border-radius: 10px;
}


/* Sichtbarer Button bleibt über dem Overlay-Button */

.contact-teaser-card .teaser-visual-button {
  position: relative !important;
  z-index: 40 !important;
  pointer-events: none !important;
}


/* Schrift und Icon übernehmen die Buttonfarbe */

.contact-teaser-card .teaser-visual-button * {
  color: inherit !important;
}


/* Hover und Tastaturfokus */

.contact-teaser-card:hover .teaser-visual-button,
.contact-teaser-card:focus-within .teaser-visual-button {
  background-color:
    var(--mandy-light-action-hover-surface) !important;

  border-color:
    var(--mandy-light-action-hover-surface) !important;

  color:
    var(--mandy-light-action-hover-foreground) !important;
}








.note_ha__title {
  font-weight: 700 !important;
}

/* screen readyer optimierung*/

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}















/* Home Hero Subline */
/* Home Hero Intro */
/* Semantisch ist das Element ein . */

body.home .hero-intro {
  font-family: "Raleway", sans-serif !important;
  font-weight: 500 !important;
  line-height: 160% !important;
  letter-spacing: 0.01em !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.home .hero-intro .typewriter-intro,
body.home .hero-intro .middle-text,
body.home .hero-intro .typewriter-outro {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
}

body.home .hero-intro .typewriter-intro {
  font-weight: 600 !important;
}

body.home .hero-intro .middle-text {
  font-weight: 500 !important;
}

body.home .hero-intro .typewriter-intro,
body.home .hero-intro .middle-text,
body.home .hero-intro .typewriter-outro {
  opacity: 0;
}

/* Desktop groß */
@media screen and (min-width: 1301px) {
  body.home .hero-intro {
    font-size: 32px !important;
    line-height: 160% !important;
  }
}

/* Desktop kleiner / Laptop */
@media screen and (max-width: 1300px) {
  body.home .hero-intro {
    max-width: 747px !important;
    font-size: 28px !important;
    line-height: 160% !important;
  }
}

/* Tablet */
@media screen and (max-width: 900px) {
  body.home .hero-intro {
    font-size: 28px !important;
			margin-top:20px !important;
    line-height: 160% !important;
  }
}

/* Mobile */
@media screen and (max-width: 550px) {
  body.home .hero-intro {
    font-size: 20px !important;
    line-height: 150% !important;
  }
}

/* Small Mobile */
@media screen and (max-width: 480px) {
  body.home .hero-intro {
    font-size: 18px !important;
    line-height: 150% !important;
  }
}






/* ======================================================
   HOME HERO: THINKING / DECISION TOGGLE
   Klassenbasiert, ohne IDs
   Für Desktop, Tablet und Mobile mehrfach nutzbar
   ====================================================== */


/* ======================================================
   DESKTOP DESKTOP DESKTOP
   Base / Default
   ====================================================== */

/* DESKTOP: Position der kleinen Thinking-Note */

body.home .thinking-toggle {
  position: fixed !important;
  bottom: 35% !important;
  right: 10% !important;

  z-index: 2000 !important;
  pointer-events: auto !important;
}

/* DESKTOP: Label / Trigger */

body.home .thinking-toggle__trigger {
  display: block !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* DESKTOP: Checkbox bleibt zugänglich, aber visuell unsichtbar */

body.home .thinking-toggle__input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* DESKTOP: Kleine Thinking-Note */

body.home .thinking-toggle__note {
  max-width: 50px !important;
  width: auto !important;
  height: auto !important;

  display: inline-block !important;
  cursor: pointer !important;

  transition: transform 0.3s ease-in-out, opacity 0.3s ease !important;
  animation: pulseZoom 5s ease-in-out infinite, floaty3 10s ease-in-out infinite;
}

/* DESKTOP: Tastatur-Fokus auf sichtbare Note */

body.home .thinking-toggle__input:focus-visible + .thinking-toggle__note {
  outline: 3px solid #1a73e8 !important;
  outline-offset: 6px !important;
  border-radius: 12px !important;
}

/* DESKTOP: Modal geschlossen */

body.home .thinking-toggle .decision-modal {
  position: fixed !important;
  bottom: 90px !important;
  right: 10% !important;

  opacity: 0 !important;
  pointer-events: none !important;

  transition: opacity 0.3s ease !important;
  z-index: 6010 !important;
}

/* DESKTOP: Modal geöffnet */

body.home .thinking-toggle.is-open {
  z-index: 6010 !important;
}

body.home .thinking-toggle.is-open .decision-modal {
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 6010 !important;
}

/* DESKTOP: Kleine Note ausblenden, wenn Modal offen ist */

body.home .thinking-toggle.is-open .thinking-toggle__note {
  transform: scale(0.6) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  animation: none !important;
}

/* DESKTOP: Fake Cursor über der Decision Box */

body.home .thinking-toggle .fake-cursor {
  position: fixed !important;
  z-index: 6011 !important;
  pointer-events: none !important;
}












/*
 * 
 * 
  ======================================================
   TABLET TABLET TABLET
   700px – 1020px
   ====================================================== */

@media screen and (min-width: 700px) and (max-width: 1020px) {

  /* TABLET: Position der kleinen Thinking-Note */

  body.home .thinking-toggle {
    bottom: 8% !important;
    right: 10% !important;
  }

  /* TABLET: Größe der kleinen Thinking-Note */

  body.home .thinking-toggle__note {
    max-width: 40px !important;
  }

  /* TABLET: Position der geöffneten Decision Box */

  body.home .thinking-toggle .decision-modal {
    bottom: 80px !important;
    right: 5% !important;
  }

  /* TABLET: Größe / Innenabstand der Decision Box */

  body.home .thinking-toggle .decision-box {
    width: 390px !important;
    max-width: calc(100vw - 40px) !important;
    box-sizing: border-box !important;
    padding: 32px 38px 26px !important;
  }

  /* TABLET: Headline */

  body.home .thinking-toggle .decision-box h2 {
    font-size: 24px !important;
    line-height: 130% !important;
  }

  /* TABLET: Checklist Items */

  body.home .thinking-toggle .checklist li {
    font-size: 15px !important;
    padding: 12px !important;
  }
}











/* ======================================================
   MOBILE MOBILE MOBILE
   bis 699px
   ====================================================== */

@media screen and (max-width: 699px) {

  /* MOBILE: Position der kleinen Thinking-Note */
  /* HIER kommst du an die kleine Note ran. */

  body.home .thinking-toggle {
    bottom: 50% !important;
    right: 25% !important;
  }

  /* MOBILE: Größe der kleinen Thinking-Note */

  body.home .thinking-toggle__note {
    max-width: 40px !important;
  }

  /* MOBILE: Position der geöffneten Decision Box */
  /* Die Box nutzt fast die volle Handybreite, aber mit sicherem Rand. */

  body.home .thinking-toggle .decision-modal {
    left: 14px !important;
    right: 14px !important;
    bottom: 74px !important;

    width: auto !important;
    max-width: none !important;

    transform: none !important;
    transform-origin: bottom right !important;
  }

  /* MOBILE: Größe / Innenabstand der Decision Box */

  body.home .thinking-toggle .decision-box {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;

    padding: 24px 22px 20px !important;
    border-width: 6px !important;
    border-radius: 24px 24px 4px 24px !important;
  }

  /* MOBILE: Headline */

  body.home .thinking-toggle .decision-box h2 {
    font-size: 20px !important;
    line-height: 130% !important;
  }

  /* MOBILE: Close Button */

  body.home .thinking-toggle .decision-close {
    width: 30px !important;
    height: 30px !important;
    border-radius: 8px !important;
  }

  body.home .thinking-toggle .decision-close::before {
    font-size: 18px !important;
  }

  /* MOBILE: Checklist Abstand */

  body.home .thinking-toggle .checklist {
    margin-top: 16px !important;
  }

  /* MOBILE: Checklist Items */

  body.home .thinking-toggle .checklist li {
    gap: 8px !important;
    padding: 10px !important;
    border-radius: 9px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  /* MOBILE: Checkbox-Kreis */

  body.home .thinking-toggle .checklist li::before {
    width: 20px !important;
    height: 20px !important;
    border-width: 2px !important;
  }

  /* MOBILE: Checkmark */

  body.home .thinking-toggle .checklist li.checked.show-check::before {
    background-size: 14px 14px !important;
  }

  /* MOBILE: Durchstreich-Linie */

  body.home .thinking-toggle .draw-line {
    height: 6px !important;
  }

  /* MOBILE: Fake Cursor */

  body.home .thinking-toggle .fake-cursor {
    width: 26px !important;
    height: 26px !important;
  }

  body.home .thinking-toggle .fake-cursor::before {
    font-size: 22px !important;
  }
}







a.mandy-logo-home {
  font-family: "Raleway", sans-serif !important;
  font-size: 35px;
  font-weight: 900 !important;
  font-variation-settings: "wght" 800;
  line-height: 90%;
  letter-spacing: 0.8px;
  color: var(--mandy-light-foreground-primary);
  text-decoration: none;
}

a.mandy-logo-home:hover,
a.mandy-logo-home:focus-visible {
  color: var(--mandy-light-action-hover-surface);
}














#mandy-thread-map {
  position: relative;
  width: 100%;
  min-height: 650px;
  overflow: hidden;
  isolation: isolate;
}

#mandy-thread-map .mandy-thread-map__threads {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}

#mandy-thread-map .mandy-thread-map__stage {
  position: relative;
  width: min(100%, 1300px);
  height: 650px;
  margin: 0 auto;
  z-index: 2;
}

#mandy-thread-map .mandy-thread-note {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;

  min-height: 72px;
  padding: 20px 25px;

  color: #1B2D40;
  background: #E1DCE9;

  border: 1px solid rgba(216, 213, 220, 0.85);
  border-radius: 3px;

  box-shadow:
    0 3px 4px rgba(20, 22, 23, 0.14),
    0 10px 22px rgba(20, 22, 23, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);

  transform-origin: center;
transition: none;
}


#mandy-thread-map .mandy-thread-note {
  transition:
    left 500ms cubic-bezier(0.22, 1, 0.36, 1),
    top 500ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}





#mandy-thread-map .mandy-thread-note::before {
  content: "";
  position: absolute;
  inset: 4px;
  pointer-events: none;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.15),
      rgba(188, 193, 198, 0.08)
    );

  border-radius: 2px;
}

#mandy-thread-map .mandy-thread-note--small {
  width: 135px;
}

#mandy-thread-map .mandy-thread-note--medium {
  width: 175px;
}

#mandy-thread-map .mandy-thread-note--large {
  width: 220px;
}

#mandy-thread-map .mandy-thread-note__text {
  position: relative;
  z-index: 2;

  font-family: "Roboto Mono", monospace;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

#mandy-thread-map .mandy-thread-note__hole {
  position: absolute;
  z-index: 4;

  width: 13px;
  height: 13px;

  background: #182732;
  border: 2px solid #BCC1C6;
  border-radius: 50%;

  box-shadow:
    inset 1px 1px 2px rgba(20, 22, 23, 0.7),
    0 1px 1px rgba(255, 255, 255, 0.45);
}

#mandy-thread-map .mandy-thread-note__hole--left {
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
}

#mandy-thread-map .mandy-thread-note__hole--right {
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
}

#mandy-thread-map .mandy-thread-note__hole--top {
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
}

#mandy-thread-map .mandy-thread-note__hole--bottom {
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
}

#mandy-thread-map .mandy-thread-line-shadow {
  fill: none;
  stroke: rgba(120, 58, 49, 0.42);
  stroke-width: 5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: blur(1.5px);
}

#mandy-thread-map .mandy-thread-line-main {
  fill: none;
  stroke: #FB5A6D;
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#mandy-thread-map .mandy-thread-line-highlight {
  fill: none;
  stroke: #FF98A4;
  stroke-width: 0.9px;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.75;
}

@media (max-width: 900px) {
  #mandy-thread-map {
    min-height: 820px;
  }

  #mandy-thread-map .mandy-thread-map__stage {
    height: 820px;
  }

  #mandy-thread-map .mandy-thread-note--small {
    width: 125px;
  }

  #mandy-thread-map .mandy-thread-note--medium {
    width: 155px;
  }

  #mandy-thread-map .mandy-thread-note--large {
    width: 185px;
  }

  #mandy-thread-map .mandy-thread-note__text {
    font-size: 13px;
  }
}

@media (max-width: 600px) {
  #mandy-thread-map {
    min-height: 1280px;
  }

  #mandy-thread-map .mandy-thread-map__stage {
    height: 1280px;
  }

  #mandy-thread-map .mandy-thread-note {
    min-height: 64px;
    padding: 17px 18px;
  }

  #mandy-thread-map .mandy-thread-note--small {
    width: 118px;
  }

  #mandy-thread-map .mandy-thread-note--medium {
    width: 138px;
  }

  #mandy-thread-map .mandy-thread-note--large {
    width: 165px;
  }

  #mandy-thread-map .mandy-thread-note__text {
    font-size: 12px;
    letter-spacing: 0.045em;
  }

  #mandy-thread-map .mandy-thread-line-shadow {
    stroke-width: 4px;
  }

  #mandy-thread-map .mandy-thread-line-main {
    stroke-width: 2.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #mandy-thread-map .mandy-thread-note {
    transition: none;
  }
}



#mandy-thread-map .mandy-thread-note__hole--right-top {
  right: -6px;
  top: 22%;
  transform: translateY(-50%);
}




.fusion-title-heading:has(.dekotext) {
  font-size: 48px !important;
  line-height: 1.1 !important;
}


.mandy-typewriter {
  display: inline;
}

.mandy-typewriter.is-typing::after {
  content: "";
  display: inline-block;
  width: 0.08em;
  height: 0.85em;
  margin-left: 0.08em;
  vertical-align: -0.05em;
  background-color: currentColor;
  animation: mandy-typewriter-cursor 0.75s steps(1) infinite;
}

@keyframes mandy-typewriter-cursor {
  0%,
  49% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mandy-typewriter.is-typing::after {
    display: none;
  }
}















/* =========================================================
   ABOUT ME FACTS
   ========================================================= */

.mandy-facts {
  --mandy-facts-portrait-size: 250px;
  --mandy-facts-portrait-half: 125px;
  --mandy-facts-border-size: 10px;

  --mandy-facts-card-width: 829px;
  --mandy-facts-card-min-height: 250px;

  --mandy-facts-stage-width:
    calc(
      var(--mandy-facts-portrait-half) +
      var(--mandy-facts-card-width)
    );

  --mandy-facts-handle-size: 72px;
  --mandy-facts-handle-core-size: 52px;

  --mandy-facts-active-surface:
    var(--mandy-primary-400);

  --mandy-facts-ease:
    cubic-bezier(0.22, 1, 0.36, 1);

  --mandy-facts-open-duration: 760ms;
  --mandy-facts-height-duration: 520ms;
  --mandy-facts-content-duration: 220ms;

  position: relative;

  width: 100%;

  color:
    var(
      --mandy-light-foreground-on-color-primary,
      var(--mandy-navy-700)
    );
}


/* =========================================================
   ACTIVE SURFACE
   ========================================================= */

.mandy-facts[data-active="0"] {
  --mandy-facts-active-surface:
    var(--mandy-primary-400);
}

.mandy-facts[data-active="1"] {
  --mandy-facts-active-surface:
    var(--mandy-primary-200);
}

.mandy-facts[data-active="2"] {
  --mandy-facts-active-surface:
    var(--mandy-primary-300);
}

.mandy-facts[data-active="3"] {
  --mandy-facts-active-surface:
    var(--mandy-blue-500);
}

.mandy-facts[data-active="4"] {
  --mandy-facts-active-surface:
    var(--mandy-ocean-500);
}

.mandy-facts[data-active="5"] {
  --mandy-facts-active-surface:
    var(--mandy-green-500);
}

.mandy-facts[data-active="6"] {
  --mandy-facts-active-surface:
    var(--mandy-yellow-500);
}

.mandy-facts[data-active="7"] {
  --mandy-facts-active-surface:
    var(--mandy-highlight-yellow);
}

.mandy-facts[data-active="8"] {
  --mandy-facts-active-surface:
    var(--mandy-coral-500);
}


/* =========================================================
   STAGE

   Die Höhe wird durch JavaScript auf den aktuellen Zustand
   gesetzt und kann dadurch sauber auf- und zuklappen.
   ========================================================= */

.mandy-facts__stage {
  position: relative;

  width:
    min(
      100%,
      var(--mandy-facts-stage-width)
    );

  height:
    var(--mandy-facts-portrait-size);

  min-height:
    var(--mandy-facts-portrait-size);

  margin-inline: auto;

  overflow: visible;

  transition:
    height
    var(--mandy-facts-height-duration)
    var(--mandy-facts-ease);

  will-change:
    height;
}


/* =========================================================
   CARD SHELL

   Desktop und Tablet:
   Beginn exakt in der vertikalen Mitte des Portraits.
   ========================================================= */

.mandy-facts__card-shell {
  position: absolute;
  z-index: 1;

  top: 0;
  right: 0;
  left:
    var(--mandy-facts-portrait-half);

  height:
    var(--mandy-facts-card-min-height);

  min-height:
    var(--mandy-facts-card-min-height);

  overflow: hidden;

  border-radius:
    0 60px 60px 30px;

  background:
    var(--mandy-facts-active-surface);

  clip-path:
    inset(
      0 100% 0 0
      round 0 60px 60px 30px
    );

  visibility: hidden;

  pointer-events: none;

  transition:
    clip-path
    var(--mandy-facts-open-duration)
    var(--mandy-facts-ease),

    height
    var(--mandy-facts-height-duration)
    var(--mandy-facts-ease),

    background-color
    320ms
    ease,

    visibility
    0s
    linear
    var(--mandy-facts-open-duration);

  will-change:
    clip-path,
    height;
}

.mandy-facts.is-open
.mandy-facts__card-shell {
  clip-path:
    inset(
      0 0 0 0
      round 0 60px 60px 30px
    );

  visibility: visible;

  pointer-events: auto;

  transition:
    clip-path
    var(--mandy-facts-open-duration)
    var(--mandy-facts-ease),

    height
    var(--mandy-facts-height-duration)
    var(--mandy-facts-ease),

    background-color
    320ms
    ease,

    visibility
    0s
    linear
    0s;
}


/* =========================================================
   CARDS

   Kein Space-between mehr.
   Zwischen Header und Text bleibt genau ein fester Abstand.
   Die Card wächst bei Bedarf ausschließlich nach unten.
   ========================================================= */

.mandy-facts__card {
  position: absolute;

  top: 0;
  left: 0;

display: grid;
grid-template-rows:
  auto
  minmax(32px, 1fr)
  auto;

align-items: stretch;

gap: 0;

  width: 100%;

  min-height:
    var(--mandy-facts-card-min-height);

  padding:
    30px
    60px
    30px
    172px;

  box-sizing: border-box;

  color:
    var(
      --mandy-light-foreground-on-color-primary,
      var(--mandy-navy-700)
    );

  opacity: 0;

  transform:
    translateX(12px);

  visibility: hidden;

  pointer-events: none;

  transition:
    opacity
    var(--mandy-facts-content-duration)
    ease,

    transform
    var(--mandy-facts-content-duration)
    var(--mandy-facts-ease),

    visibility
    0s
    linear
    var(--mandy-facts-content-duration);
}




.mandy-facts__card-header {
  grid-row: 1;
}

.post-content .mandy-facts__text {
  grid-row: 3;

  align-self: end;

  margin: 0 !important;
}




.mandy-facts__card.is-active {
  visibility: visible;

  transition:
    opacity
    var(--mandy-facts-content-duration)
    ease,

    transform
    var(--mandy-facts-content-duration)
    var(--mandy-facts-ease),

    visibility
    0s
    linear
    0s;
}

.mandy-facts__card.is-active.is-content-visible {
  opacity: 1;

  transform:
    translateX(0);

  pointer-events: auto;
}


/* =========================================================
   HEADER

   Pill und Close-Button liegen in derselben Zeile.
   Header und Text besitzen dieselbe Inhaltsbreite.
   ========================================================= */

.mandy-facts__card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 24px;

  width: 100%;

  flex: 0 0 auto;
}


/* Nur Positionierung der zentralen Komponenten.
   Keine neue Button- oder Pill-Gestaltung. */

.mandy-facts__card-header
.mandy-pill {
  flex: 0 0 auto;
}

.mandy-facts__close {
  flex: 0 0 32px;
}


/* =========================================================
   TEXT
   ========================================================= */

.mandy-facts__text {
  width: 100%;

  margin: 0!important;

  color:
    var(
      --mandy-light-foreground-on-color-primary,
      var(--mandy-navy-700)
    );

  font-family:
    "Raleway",
    sans-serif;

  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.6;
}


/* =========================================================
   PORTRAIT

   Bleibt auf allen Breakpoints 250 × 250 px.
   ========================================================= */

.mandy-facts__portrait {
  position: absolute;
  z-index: 3;

  top: 0;
  left: 50%;

  width:
    var(--mandy-facts-portrait-size);

  height:
    var(--mandy-facts-portrait-size);

  transform:
    translateX(-50%);

  transition:
    left
    var(--mandy-facts-open-duration)
    var(--mandy-facts-ease),

    transform
    var(--mandy-facts-open-duration)
    var(--mandy-facts-ease);

  will-change:
    left,
    transform;
}

.mandy-facts.is-open
.mandy-facts__portrait,
.mandy-facts.is-closing
.mandy-facts__portrait {
  left: 0;

  transform:
    translateX(0);
}


/* =========================================================
   PORTRAIT RING
   ========================================================= */

.mandy-facts__portrait-ring {
  position: relative;

  width: 100%;
  height: 100%;

  padding:
    var(--mandy-facts-border-size);

  box-sizing: border-box;

  border-radius: 50%;

  background:
    conic-gradient(
      from 225deg,

      var(--mandy-primary-200) 0%,
      var(--mandy-primary-400) 10%,
      var(--mandy-blue-500) 24%,
      var(--mandy-ocean-500) 36%,
      var(--mandy-green-500) 50%,
      var(--mandy-yellow-500) 62%,
      var(--mandy-highlight-yellow) 73%,
      var(--mandy-coral-500) 94%,
      var(--mandy-primary-200) 100%
    );
}


/* =========================================================
   PORTRAIT IMAGE
   ========================================================= */

.mandy-facts__portrait-image {
  width: 100%;
  height: 100%;

  border-radius: 50%;

  background-color:
    var(--mandy-navy-600);

  background-image:
    url("/wp-content/uploads/2026/10/me_about04.jpg");

  background-repeat:
    no-repeat;

  background-position:
    center center;

  background-size:
    cover;
}


/* =========================================================
   HANDLE
   ========================================================= */

.mandy-facts__handle {
  --mandy-facts-handle-x: -62px;
  --mandy-facts-handle-y: 107px;

  position: absolute;
  z-index: 8;

  top:
    calc(
      50% +
      var(--mandy-facts-handle-y)
    );

  left:
    calc(
      50% +
      var(--mandy-facts-handle-x)
    );

  width:
    var(--mandy-facts-handle-size);

  height:
    var(--mandy-facts-handle-size);

  padding: 0;

  overflow: visible;

  border: 0;
  border-radius: 50%;

  background:
    transparent;

  transform:
    translate(-50%, -50%);

  cursor:
    grab;

  touch-action:
    none;

  user-select:
    none;

  -webkit-user-select:
    none;

  transition:
    top
    620ms
    var(--mandy-facts-ease),

    left
    620ms
    var(--mandy-facts-ease),

    transform
    220ms
    var(--mandy-facts-ease);

  will-change:
    top,
    left,
    transform;
}

.mandy-facts__handle:hover {
  transform:
    translate(-50%, -50%)
    scale(1.035);
}

.mandy-facts__handle:active,
.mandy-facts__handle.is-dragging {
  cursor:
    grabbing;

  transform:
    translate(-50%, -50%)
    scale(1.06);
}

.mandy-facts__handle.is-dragging {
  transition:
    transform
    160ms
    ease;
}

.mandy-facts__handle:focus-visible {
  outline:
    3px solid
    var(--mandy-focus-blue);

  outline-offset:
    5px;
}


/* =========================================================
   TOOLTIP
   ========================================================= */

/* =========================================================
   ABOUT-ME TOOLTIP POSITION UND VERHALTEN
   Das visuelle Design kommt aus .mandy-tooltip.
   ========================================================= */

.mandy-facts__handle-tooltip {
  position: absolute;
  z-index: 20;

  left: 50%;
  bottom: calc(100% + 12px);

  width: max-content;
  max-width: 230px;

  box-sizing: border-box;

  white-space: nowrap;

  opacity: 0;
  visibility: hidden;

  pointer-events: none;

  transform:
    translate(-50%, 6px);

  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0s linear 0.2s;
}


/* Nur im vollständig geschlossenen Zustand anzeigen */

.mandy-facts:not(.is-open):not(.is-closing)
.mandy-facts__handle:hover
.mandy-facts__handle-tooltip,

.mandy-facts:not(.is-open):not(.is-closing)
.mandy-facts__handle:focus-visible
.mandy-facts__handle-tooltip {
  opacity: 1;
  visibility: visible;

  transform:
    translate(-50%, 0);

  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0s linear 0s;
}


/* Beim Öffnen und während des Schließens sicher ausblenden */

.mandy-facts.is-open
.mandy-facts__handle-tooltip,

.mandy-facts.is-closing
.mandy-facts__handle-tooltip {
  opacity: 0 !important;
  visibility: hidden !important;

  transform:
    translate(-50%, 6px) !important;

  pointer-events: none !important;
}

/* Tooltip beim automatischen Öffnen kurz einblenden */
.mandy-facts.is-open
.mandy-facts__handle.is-intro-hint-visible
.mandy-facts__handle-tooltip {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate(-50%, 0) !important;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0s !important;
}




/* =========================================================
   GLASS LAYERS
   ========================================================= */

.mandy-facts__glass {
  position: absolute;

  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  border-radius: 50%;

  pointer-events: none;
}

.mandy-facts__glass--hard {
  background:
    var(--mandy-opacity-black-8);

  opacity:
    0.4;

  mix-blend-mode:
    hard-light;

  backdrop-filter:
    blur(8px)
    saturate(145%);

  -webkit-backdrop-filter:
    blur(8px)
    saturate(145%);

  box-shadow:
    inset 1px 1px 1px
    var(--mandy-opacity-white-32),

    inset -8px -8px 20px
    var(--mandy-opacity-black-8);
}

.mandy-facts__glass--soft {
  inset:
    3px;

  width:
    calc(100% - 6px);

  height:
    calc(100% - 6px);

  background:
    radial-gradient(
      circle at 30% 26%,

      var(--mandy-opacity-white-32) 0%,
      var(--mandy-opacity-white-8) 30%,
      transparent 62%
    );

  opacity:
    0.4;

  mix-blend-mode:
    soft-light;

  backdrop-filter:
    blur(5px);

  -webkit-backdrop-filter:
    blur(5px);
}

.mandy-facts__glass--light {
  inset:
    -1px;

  width:
    calc(100% + 2px);

  height:
    calc(100% + 2px);

  background:
    var(--mandy-opacity-white-8);

  border:
    1px solid
    var(--mandy-opacity-white-32);

  box-shadow:
    0 0 0 1px
    var(--mandy-opacity-white-5),

    0 10px 24px
    var(--mandy-opacity-black-8),

    inset 8px 7px 15px
    var(--mandy-opacity-white-8),

    inset -8px -8px 18px
    var(--mandy-opacity-black-8);
}


/* =========================================================
   HANDLE CORE
   ========================================================= */

.mandy-facts__handle-core {
  position: absolute;
  z-index: 3;

  top: 50%;
  left: 50%;

  width:
    var(--mandy-facts-handle-core-size);

  height:
    var(--mandy-facts-handle-core-size);

  border:
    4px solid
    var(--mandy-facts-active-surface);

  border-radius:
    50%;

  background:
    linear-gradient(
      160deg,

      transparent 11.99%,
      var(--mandy-opacity-white-32) 86.46%
    ),
    var(--mandy-facts-active-surface);

  transform:
    translate(-50%, -50%);

  filter:
    drop-shadow(
      1px 1px 3px
      var(--mandy-opacity-black-8)
    )
    drop-shadow(
      2px 6px 6px
      var(--mandy-opacity-black-8)
    );

  transition:
    border-color
    380ms
    ease,

    background
    380ms
    ease,

    transform
    220ms
    var(--mandy-facts-ease);
}








/* =========================================================
   INITIALER BEWEGUNGSHINWEIS
   Regler bewegt sich zweimal Richtung Korallrot
   und zurück, ohne eine Card zu öffnen.
   ========================================================= */

.mandy-facts.is-idle-hint:not(.is-open):not(.is-closing)
.mandy-facts__handle {
  animation:
    mandy-facts-hint-move
    1.55s
    ease-in-out
    2;
}

.mandy-facts.is-idle-hint:not(.is-open):not(.is-closing)
.mandy-facts__handle-core {
  animation:
    mandy-facts-hint-color
    1.55s
    ease-in-out
    2;
}

@keyframes mandy-facts-hint-move {
  0%, 100% {
    left: calc(50% + var(--mandy-facts-handle-x));
    top: calc(50% + var(--mandy-facts-handle-y));
  }

  50% {
    left: calc(50% + var(--mandy-facts-handle-x) + 60px);
    top: calc(50% + var(--mandy-facts-handle-y) + 16px);
  }
}

@keyframes mandy-facts-hint-color {
  0%, 100% {
    border-color: var(--mandy-primary-400);
    background-color: var(--mandy-primary-400);
  }

  50% {
    border-color: var(--mandy-coral-500);
    background-color: var(--mandy-coral-500);
  }
}









/* =========================================================
   BOOK A CALL
   ========================================================= */

#book-a-call {
  transition:
    opacity
    320ms
    ease,

    visibility
    320ms
    ease,

    transform
    320ms
    var(--mandy-facts-ease);
}

#book-a-call.mandy-facts-covered {
  opacity:
    0 !important;

  visibility:
    hidden !important;

  pointer-events:
    none !important;

  transform:
    translateY(8px);
}


/* =========================================================
   SCREENREADER
   ========================================================= */

.mandy-facts__sr-only {
  position:
    absolute !important;

  width:
    1px !important;

  height:
    1px !important;

  padding:
    0 !important;

  margin:
    -1px !important;

  overflow:
    hidden !important;

  clip:
    rect(0, 0, 0, 0) !important;

  white-space:
    nowrap !important;

  border:
    0 !important;
}


/* =========================================================
   MOBILE

   Portrait bleibt 250 × 250 px.
   Die Card beginnt auf halber Portrait-Höhe und wächst
   von dort nach unten.
   ========================================================= */

@media (max-width: 700px) {
		
		.mandy-facts__card {
  grid-template-rows:
    auto
    auto;

  align-content:
    start;

  row-gap:
    26px;
}

.mandy-facts__card-header {
  grid-row:
    1;
}

.post-content .mandy-facts__text {
  grid-row:
    2;

  align-self:
    start;

  margin:
    0 !important;
}

  .mandy-facts {
    --mandy-facts-card-width:
      100%;

    --mandy-facts-border-size:
      10px;
  }

  .mandy-facts__stage {
    width:
      100%;
  }

  .mandy-facts__portrait,
  .mandy-facts.is-open
  .mandy-facts__portrait {
    top:
      0;

    left:
      50%;

    transform:
      translateX(-50%);
  }

  .mandy-facts__card-shell {
    top:
      var(--mandy-facts-portrait-half);

    right:
      0;

    left:
      0;

    width:
      100%;

    min-height:
      var(--mandy-facts-card-min-height);

    border-radius:
      0 0 40px 40px;

    clip-path:
      inset(
        0 0 100% 0
        round 0 0 40px 40px
      );
  }

  .mandy-facts.is-open
  .mandy-facts__card-shell {
    clip-path:
      inset(
        0 0 0 0
        round 0 0 40px 40px
      );
  }

  .mandy-facts__card {
    gap:
      32px;

    min-height:
      var(--mandy-facts-card-min-height);

    padding:
      calc(
        var(--mandy-facts-portrait-half) +
        30px
      )
      30px
      30px;
  }

  .mandy-facts__text {
    font-size:
      17px;

    line-height:
      1.55;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .mandy-facts *,
  .mandy-facts *::before,
  .mandy-facts *::after {
    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;
  }
}







/* ---------------------------------------------------------
   Journey Link Tooltips
   Das visuelle Design kommt aus dem globalen Tooltip-Block.
   --------------------------------------------------------- */

.journey .journey-card__overlay-link::after {
  content:
    attr(data-tooltip);

  position:
    absolute;

  right:
    28px;

  bottom:
    76px;

  z-index:
    5;

  width:
    max-content;

  max-width:
    calc(100% - 56px);

  box-sizing:
    border-box;

  white-space:
    normal;

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

  transform:
    translateY(6px);

  transition:
    opacity 180ms ease,
    transform 180ms ease,
    visibility 0s linear 180ms;
}


@media (hover: hover) and (pointer: fine) {

  .journey
  .journey-card__overlay-link:hover::after {
    opacity:
      1;

    visibility:
      visible;

    transform:
      translateY(0);

    transition:
      opacity 180ms ease,
      transform 180ms ease,
      visibility 0s linear 0s;
  }
}


.journey
.journey-card__overlay-link:focus-visible::after {
  opacity:
    1;

  visibility:
    visible;

  transform:
    translateY(0);

  transition:
    opacity 180ms ease,
    transform 180ms ease,
    visibility 0s linear 0s;
}







/* ========================= */
/* COMPACT TYPEWRITER FLOW STACK */
/* ========================= */

.animation-bg-column--compact .ha-typewriter-flow {
  position: absolute !important;

  left: 20px !important;
  top: 128px !important;

  width: 333px !important;
  height: 110px !important;
  max-height: 110px !important;

  padding: 12px !important;
  box-sizing: border-box !important;

  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.18) !important;

  z-index: 8 !important;

  pointer-events: auto !important;
  touch-action: pan-x !important;
  user-select: none !important;
  -webkit-user-select: none !important;

  opacity: 0;
  transform: translateY(8px);

  overflow: hidden !important;
  scroll-behavior: smooth !important;
}

.animation-bg-column--compact .ha-typewriter-flow.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.35s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.animation-bg-column--compact .ha-typewriter-flow.is-leaving {
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 0.35s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.animation-bg-column--compact .ha-typewriter-flow.is-paused {
  background: rgba(255, 255, 255, 0.24) !important;
}

.animation-bg-column--compact .ha-flow-stack {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px !important;

  width: 100% !important;
  box-sizing: border-box !important;

  padding-right: 28px !important;
}

.animation-bg-column--compact .ha-flow-card {
  width: 100% !important;
  box-sizing: border-box !important;

  padding: 14px !important;

  border-radius: 16px !important;
  border: 2px solid var(--mandy-highlight-yellow, #FFCB3C) !important;
  background: rgba(255, 203, 60, 0.53) !important;

  opacity: 0;
  transform: translateY(10px);

  transition:
    opacity 0.3s ease,
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.animation-bg-column--compact .ha-flow-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.animation-bg-column--compact .ha-flow-card__text {
  margin: 0 !important;

  font-family: "Roboto Mono", monospace !important;
  font-size: 14px !important;
  line-height: 145% !important;
  font-weight: 400 !important;
  font-style: normal !important;

  color: var(--mandy-yellow-800) !important;

  white-space: pre-wrap !important;
  word-break: normal !important;

  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}


/* ========================= */
/* COMPACT PROGRESSBAR */
/* ========================= */

.animation-bg-column--compact .ha-flow-scrollbar {
  position: absolute !important;

  top: 140px !important;
  right: 28px !important;

  width: 16px !important;
  height: 120px !important;

  border-radius: 16px !important;
  background: rgba(255, 203, 60, 0.28) !important;

  z-index: 80 !important;
  pointer-events: none !important;

  display: block !important;
  opacity: 1 !important;
  overflow: hidden !important;
}

.animation-bg-column--compact .ha-flow-scrollbar__thumb {
  position: absolute !important;

  top: 0 !important;
  left: 0 !important;

  width: 16px !important;
  height: 24px !important;

  border-radius: 16px !important;
  background: rgba(255, 203, 60, 0.90) !important;

  transform: translateY(0);
  transition: transform 0.08s linear !important;

  display: block !important;
  opacity: 1 !important;
}


/* ========================= */
/* COMPACT FINAL NOTE */
/* ========================= */

.animation-bg-column--compact [data-ha-final-note] {
  width: 184px !important;
  min-height: 170px !important;
  padding: 18px !important;
  z-index: 18 !important;
}

.animation-bg-column--compact [data-ha-final-note] .note_ha__content {
  font-size: 16px !important;
  line-height: 1.4 !important;
}

.animation-bg-column--compact [data-ha-final-note] .note_ha__title {
  font-size: 17px !important;
  line-height: 1.35 !important;
}


/* ========================= */
/* COMPACT MANDY CURSOR */
/* ========================= */

.animation-bg-column--compact .ha-cursor {
  width: 80px !important;
  z-index: 120 !important;
}


/* ========================= */
/* PLAY BUTTON WÄHREND ANIMATION AUSBLENDEN */
/* ========================= */

.animation-bg-column--compact .play_button.is-animation-hidden,
.play_button.is-animation-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.25s ease !important;
}




















/* ========================= */
/* DESKTOP TYPEWRITER FLOW */
/* ========================= */

.animation-bg-column--desktop .ha-typewriter-flow {
  position: absolute !important;

  left: 24px !important;
  top: 146px !important;
  right: 24px !important;
  bottom: 24px !important;

  width: auto !important;
  height: auto !important;
  max-height: none !important;

  padding: 16px !important;
  box-sizing: border-box !important;

  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.18) !important;

  z-index: 8 !important;

  /* wichtig für Mouse-Interaktion */
  pointer-events: auto !important;
  cursor: grab !important;

  user-select: none !important;
  -webkit-user-select: none !important;

  opacity: 0;
  transform: translateY(10px);

  overflow: hidden !important;
  scroll-behavior: smooth !important;
}

.animation-bg-column--desktop .ha-typewriter-flow:active {
  cursor: grabbing !important;
}

.animation-bg-column--desktop .ha-typewriter-flow.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition:
    opacity 0.45s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.animation-bg-column--desktop .ha-typewriter-flow.is-leaving {
  opacity: 0 !important;
  transform: translateY(-10px) !important;
  transition:
    opacity 0.45s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}


/* ========================= */
/* DESKTOP FLOW STACK */
/* ========================= */

.animation-bg-column--desktop .ha-flow-stack {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 16px !important;

  width: 100% !important;
  box-sizing: border-box !important;

  user-select: none !important;
  -webkit-user-select: none !important;
}

.animation-bg-column--desktop .ha-flow-card {
  width: 100% !important;
  box-sizing: border-box !important;

  padding: 20px !important;

  border-radius: 16px !important;
  border: 2px solid var(--mandy-highlight-yellow, #FFCB3C) !important;
  background: rgba(255, 203, 60, 0.53) !important;

  opacity: 0;
  transform: translateY(12px);

  transition:
    opacity 0.35s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);

  user-select: none !important;
  -webkit-user-select: none !important;
}

.animation-bg-column--desktop .ha-flow-card.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.animation-bg-column--desktop .ha-flow-card__text {
  margin: 0 !important;

  font-family: "Roboto Mono", monospace !important;
  font-size: 14px !important;
  line-height: 150% !important;
  font-weight: 400 !important;
  font-style: normal !important;

  color: var(--mandy-yellow-800) !important;

  white-space: pre-wrap !important;
  word-break: normal !important;

  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;

  user-select: none !important;
  -webkit-user-select: none !important;
}












/* =========================================================
   EXPANDABLE PILL LIST
   ========================================================= */

.mandy-pill-list-container:not(.is-expanded)
.mandy-pill--overflow {
  display: none !important;
}


/* Etwas Abstand zwischen Pills und Toggle */

.mandy-pill-list-toggle {
  margin-top: 12px !important;
}


/* Plus wird bei geöffnetem Zustand zum Minus */

.mandy-pill-list-toggle__vertical {
  transition: opacity 0.2s ease;
}

.mandy-pill-list-container.is-expanded
.mandy-pill-list-toggle__vertical {
  opacity: 0;
}









/* ==========================================================
   MANDY ACCORDION – ICON BUTTON
   48px Button / 24px Custom SVG
   ========================================================== */


/* ==========================================================
   BUTTON BASE
   ========================================================== */

.mandy-accordion .fusion-toggle-icon-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;

  flex: 0 0 48px !important;

  border: 0 !important;
  border-radius: 50px !important;

  background-color:
    var(--mandy-light-action-secondary-surface) !important;

  color:
    var(--mandy-light-action-secondary-foreground) !important;

  box-shadow: none !important;

  line-height: 0 !important;

  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}


/* ==========================================================
   AVADA ICONS KOMPLETT AUSBLENDEN
   ========================================================== */

.mandy-accordion
.fusion-toggle-icon-wrapper
.fa-fusion-box,

.mandy-accordion
.fusion-toggle-icon-wrapper
.active-icon,

.mandy-accordion
.fusion-toggle-icon-wrapper
.inactive-icon {
  display: none !important;
}


/* ==========================================================
   CUSTOM PLUS – DEFAULT
   ========================================================== */

.mandy-accordion
.fusion-toggle-icon-wrapper::before {
  content: "" !important;

  display: block !important;

  width: 24px !important;
  height: 24px !important;

  flex: 0 0 24px !important;

  background-color:
    currentColor !important;

  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12H12M12 12H19M12 12V5M12 12V19' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12H12M12 12H19M12 12V5M12 12V19' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-position: center;
  mask-position: center;

  -webkit-mask-size: 24px 24px;
  mask-size: 24px 24px;
}


/* ==========================================================
   CUSTOM MINUS – OPEN
   ========================================================== */

.mandy-accordion
.panel-title
a[aria-expanded="true"]
.fusion-toggle-icon-wrapper::before {
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12H12H19' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12H12H19' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* ==========================================================
   HOVER – NUR CLOSED
   ========================================================== */

@media (hover: hover) and (pointer: fine) {

  .mandy-accordion
  .panel-title
  a[aria-expanded="false"]:hover
  .fusion-toggle-icon-wrapper {
    background-color:
      var(--mandy-light-action-hover-surface) !important;

    color:
      var(--mandy-light-action-hover-foreground) !important;
  }

}


/* ==========================================================
   OPEN / ACTIVE
   ========================================================== */

.mandy-accordion
.panel-title
a[aria-expanded="true"]
.fusion-toggle-icon-wrapper {
  background-color:
    var(--mandy-dark-surface-container) !important;

  color:
    var(--mandy-dark-foreground-primary) !important;
}


/* ==========================================================
   PRESS / TOUCH – NUR CLOSED
   ========================================================== */

.mandy-accordion
.panel-title
a[aria-expanded="false"]:active
.fusion-toggle-icon-wrapper {
  background-color:
    var(--mandy-light-action-hover-surface) !important;

  color:
    var(--mandy-light-action-hover-foreground) !important;
}


/* ==========================================================
   TITLE BLEIBT NAVY
   ========================================================== */

.mandy-accordion
.panel-title
a:hover
.fusion-toggle-heading,

.mandy-accordion
.panel-title
a[aria-expanded="true"]
.fusion-toggle-heading {
  color:
    var(--mandy-light-foreground-primary) !important;
}


/* ==========================================================
   KEYBOARD FOCUS
   ========================================================== */

.mandy-accordion
.panel-title
a:focus-visible
.fusion-toggle-icon-wrapper {
  outline:
    3px solid var(--mandy-light-action-focus-ring) !important;

  outline-offset:
    2px;
}





/* ==========================================================
   MANDY ACCORDION – AVADA ORIGINAL ICON KILL
   ========================================================== */

.mandy-accordion
.panel-title
a
.fusion-toggle-icon-wrapper
> i,

.mandy-accordion
.panel-title
a
.fusion-toggle-icon-wrapper
> .fa-fusion-box,

.mandy-accordion
.panel-title
a
.fusion-toggle-icon-wrapper
> .active-icon,

.mandy-accordion
.panel-title
a
.fusion-toggle-icon-wrapper
> .inactive-icon {
  display: none !important;
}


/* Avada-Pseudo-Icons ebenfalls sicher entfernen */

.mandy-accordion
.panel-title
a
.fusion-toggle-icon-wrapper
> i::before,

.mandy-accordion
.panel-title
a
.fusion-toggle-icon-wrapper
> i::after {
  content: none !important;
  display: none !important;
}











/* ==========================================================
   ACCORDION – TEXT
   ========================================================== */


/* Headline */

.mandy-accordion .fusion-toggle-heading {
  color:
    var(--mandy-light-foreground-primary) !important;

  font-family:
    "Raleway", sans-serif !important;

  font-size:
    20px !important;

  line-height:
    150% !important;
}


/* Inhalt */

.mandy-accordion .panel-body,
.mandy-accordion .panel-body p,
.mandy-accordion .panel-body li,
.mandy-accordion .panel-body span,
.mandy-accordion .panel-body strong {
  font-family:
    "Raleway", sans-serif !important;

  font-size:
    16px !important;

  line-height:
    170% !important;
}


/* Mobile */

@media (max-width: 700px) {

  .mandy-accordion .fusion-toggle-heading {
    font-size:
      18px !important;
  }

  .mandy-accordion .panel-body,
  .mandy-accordion .panel-body p,
  .mandy-accordion .panel-body li,
  .mandy-accordion .panel-body span,
  .mandy-accordion .panel-body strong {
    font-size:
      15px !important;

    line-height:
      160% !important;
  }

}








/* Accordion Title-Zeile: Text und Icon vertikal zentrieren */

.mandy-accordion .panel-title a {
  align-items: center !important;
}

.mandy-accordion .fusion-toggle-heading {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.mandy-accordion .fusion-toggle-icon-wrapper {
  align-self: center !important;
  margin-left: auto !important;
}









/* Weniger Abstand zwischen geöffnetem Title und Content */

.mandy-accordion .panel-body.toggle-content {
  padding-top: 8px !important;
}

.mandy-accordion .panel-body.toggle-content > :first-child {
  margin-top: 0 !important;
}










/* =========================================================
   PRIVATE GATE – AVADA AUTO MARKUP FIX
   Gilt für ALLE Private Gates
   ========================================================= */

/* ---------------------------------------------------------
   Automatisch eingefügte P-Wrapper neutralisieren
   --------------------------------------------------------- */

.mandy-private-gate-wrapper .mandy-button > p,

.mandy-private-gate-wrapper .outcomes-cards > p,
.mandy-private-gate-wrapper .outcome-card > p,
.mandy-private-gate-wrapper .outcome-card__pills > p,
.mandy-private-gate-wrapper .outcome-card__header > p,
.mandy-private-gate-wrapper .outcome-card__content-head > p,
.mandy-private-gate-wrapper .outcomes-actions > p,

.mandy-private-gate-wrapper .mandy-slider > p,
.mandy-private-gate-wrapper .mandy-slider__viewport > p,
.mandy-private-gate-wrapper .mandy-slider__stage > p,
.mandy-private-gate-wrapper .mandy-slider-card > p,
.mandy-private-gate-wrapper .mandy-slider-card__body > p,
.mandy-private-gate-wrapper .mandy-slider-card__copy > p:not(.mandy-slider-card__description),
.mandy-private-gate-wrapper .mandy-slider-card__footer > p,
.mandy-private-gate-wrapper .mandy-slider-card__pill-groups > p {
  display: contents !important;
}


/* ---------------------------------------------------------
   Komplett leere Auto-Paragraphs entfernen
   --------------------------------------------------------- */

.mandy-private-gate-wrapper p:empty {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* ---------------------------------------------------------
   Leere Avada-Spans entfernen
   --------------------------------------------------------- */

.mandy-private-gate-wrapper span:empty {
  display: none !important;
}














#toTop.fusion-to-top-active:not(:hover) {
  background-color: var(--mandy-primary-200) !important;
  opacity: 1 !important;
}

#toTop.fusion-to-top-active:not(:hover)::before {
  color: var(--mandy-navy-700) !important;
}



/* AVADA SCROLL TO TOP – unter Entry Experience halten */

#toTop.fusion-to-top-active:not(:hover) {
  background-color: var(--mandy-primary-200) !important;
  opacity: 1 !important;
}

#toTop.fusion-to-top-active:not(:hover)::before {
  color: var(--mandy-navy-700) !important;
}




#toTop {
  /* Horizontal zentrieren */
  left: 50% !important;
  right: auto !important;
  translate: -50% 0;

  /* Abstand zum unteren Bildschirmrand */
  --totop_spacing_bottom: 50px;

  /* Über der Entry Experience */
  z-index: 5010 !important;
}
    






/* =========================================================
   AVADA LIGHTBOX – MANDY FULLSCREEN
   ========================================================= */


/* ---------------------------------------------------------
   LIGHTBOX OVERLAY
   --------------------------------------------------------- */

.ilightbox-overlay.dark {
  background:
    var(--mandy-dark-surface-page) !important;

  opacity: 0.97 !important;
}


/* ---------------------------------------------------------
   LIGHTBOX TOOLBAR
   --------------------------------------------------------- */

.ilightbox-toolbar.dark {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  gap: 8px !important;

  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  overflow: visible !important;
}


/* ---------------------------------------------------------
   AVADA FULLSCREEN BUTTON

   Bleibt technisch vorhanden, damit Avada selbst
   seinen Fullscreen ausführen kann.
   Für den User ist er danach aber unsichtbar.
   --------------------------------------------------------- */

.ilightbox-toolbar.dark
a.ilightbox-fullscreen {
  position: absolute !important;

  width: 1px !important;
  height: 1px !important;

  margin: -1px !important;
  padding: 0 !important;

  overflow: hidden !important;

  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;

  white-space: nowrap !important;

  border: 0 !important;
}


/* ---------------------------------------------------------
   CLOSE BUTTON

   Der Look kommt weiterhin aus:
   .mandy-icon-button
   .mandy-icon-button--large
   .mandy-icon-button--dark-primary
   --------------------------------------------------------- */

.ilightbox-toolbar.dark
a.ilightbox-close.mandy-icon-button {
  float: none !important;

  margin: 0 !important;

  border: 0 !important;
  border-radius: 50px !important;

  background-image: none !important;
  background-position: initial !important;
  background-repeat: no-repeat !important;
  background-size: auto !important;

  box-shadow: none !important;

  text-indent: 0 !important;

  overflow: hidden !important;
}


/* Avadas altes Close-Icon entfernen */

.ilightbox-toolbar.dark
a.ilightbox-close.mandy-icon-button::before,
.ilightbox-toolbar.dark
a.ilightbox-close.mandy-icon-button::after {
  content: none !important;
}


/* ---------------------------------------------------------
   MANDY CLOSE ICON
   --------------------------------------------------------- */

.ilightbox-toolbar.dark
a.ilightbox-close
.mandy-icon-button__icon {
  display: block !important;

  width: 24px !important;
  height: 24px !important;

  flex: 0 0 24px !important;

  color: inherit !important;

  pointer-events: none !important;
}


/* SVG übernimmt Button-Farbe */

.ilightbox-toolbar.dark
a.ilightbox-close
.mandy-icon-button__icon path {
  stroke: currentColor;
}


/* ---------------------------------------------------------
   KEYBOARD FOCUS
   --------------------------------------------------------- */

.ilightbox-toolbar.dark
a.ilightbox-close.mandy-icon-button:focus-visible {
  outline:
    3px solid var(--mandy-dark-action-focus-ring) !important;

  outline-offset: 2px !important;
}













/* Safari Bottom Bar auf Home und 404 */
@media (max-width: 1026px) {
  body.home,
  body.error404 {
    background-color: var(--mandy-primary-600) !important;
  }
}

/* Safari: helle obere Statusleiste auf Home und 404 */
@media (max-width: 1026px) {

  body.home #mandy-safari-top-tint,
  body.error404 #mandy-safari-top-tint {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background-color: var(--mandy-light-surface-page);
    pointer-events: none;
    z-index: 5999;
  }

}






.mandy-content-max-800 {
max-width: 800px !important;

}






.apple-emoji {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
  font-style: normal!important;
  font-weight: normal!important;
}











/* VITA SLIDER – SHARP RENDERING */

.mandy-vita-slider .mandy-slider-card {
  will-change: auto;
}

.mandy-vita-slider .mandy-slider-card.is-active {
  filter: none !important;
}






/* =========================================================
   CERTIFICATES BEFORE / AFTER – KEYBOARD FOCUS
   ========================================================= */

.mandy-certificates-compare
.fusion-image-before-after-handle:focus-visible {
  outline:
    3px solid var(--mandy-focus-blue) !important;

  outline-offset: 5px !important;
}