/*================================================================
01 DEBUG
Bei Bedarf aktivieren, um Layout-Überläufe zu finden.
================================================================*/

/*
* {
  outline: 2px solid rgba(255, 0, 0, 0.5);
  background-color: rgba(255, 0, 0, 0.1);
}
*/

.der-pilz,
.goods-stage-mobile,
.anzeige-mobile {
  overflow-x: hidden;
}

/*================================================================
AVATAR BUTTON
================================================================*/

/*
div#unframe-bubble-uy1zaHHFrf {
  width: 80px !important;
    height: 80px !important;
}
*/

a{
  overflow-wrap: break-word;
}

/* main#content {
  overflow-x: hidden;
} */

/*================================================================
02 ACCESSIBILITY / SCREENREADER
================================================================*/

.fa-sr-only,
.fa-sr-only-focusable:not(:focus),
.sr-only,
.sr-only-focusable:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}


/*================================================================
03 GLOBAL BASE
================================================================*/

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto;
  max-width: 100%;
  accent-color: var(--e-global-color-primary);
}

main#content,
.page-content,
.elementor,
.elementor-section,
.e-con,
.e-con-inner {
  max-width: 100%;
}


/*================================================================
04 ELEMENTOR DEFAULT CONTAINER PADDING
================================================================*/

main#content > div.page-content > div > div.elementor-element:not(.e-con-full) {
  padding: 0 32px;
}

@media screen and (max-width: 1024px) {
  main#content > div.page-content > div > div.elementor-element:not(.e-con-full) {
    padding: 0 24px;
  }
}

@media screen and (max-width: 767px) {
  main#content > div.page-content > div > div.elementor-element:not(.e-con-full) {
    padding: 0 16px;
  }
}


/*================================================================
05 FORM BASE
================================================================*/

input {
  border: 0;
  outline: none;
  letter-spacing: 0.01em;
  padding: 12px 24px;
  caret-color: var(--e-global-color-primary);
  caret-shape: block;
}


/*================================================================
06 CHECKBOX / RADIO BASE
================================================================*/

input[type="checkbox"],
input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  min-width: 26px;
  height: 26px;
  margin: 8px 8px 8px 0;
  border: 1px solid #cfcfcf;
  background: #f7f7f7;
  display: inline-grid !important;
  padding: 10px;
  place-content: center;
  vertical-align: middle;
  cursor: pointer;
  position: relative;
  box-sizing: border-box;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

input[type="radio"] {
  border-radius: 50%;
}

input[type="checkbox"] {
  border-radius: 4px;
}

input[type="checkbox"]::before,
input[type="radio"]::before {
  content: "";
  display: block;
  transform: scale(0);
  transition: transform 0.12s ease;
}

input[type="radio"]::before {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--e-global-color-primary);
}

input[type="checkbox"]::before {
  width: 7px;
  height: 14px;
  border-right: 2px solid var(--e-global-color-primary);
  border-bottom: 2px solid var(--e-global-color-primary);
  transform: rotate(45deg) scale(0);
  transform-origin: center;
  margin-top: -2px;
}

input[type="radio"]:checked::before {
  transform: scale(1);
}

input[type="checkbox"]:checked::before {
  transform: rotate(45deg) scale(1);
}

input[type="checkbox"]:hover,
input[type="radio"]:hover {
  border-color: #b8b8b8;
  background: #f3f3f3;
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: 2px solid #f28c28;
  outline-offset: 2px;
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}


/*================================================================
07 SOCIAL LINKS
================================================================*/

div#social_links,
div#social_links_footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}

div#social_links .l2-social_icon img {
  filter: brightness(1);
  transition: filter 0.3s ease-in-out;
}

div#social_links .l2-social_icon:hover img {
  filter: brightness(0);
}

div#social_links_footer .l2-social_icon img {
  filter: brightness(0.5);
}

div#social_links_footer .l2-social_icon:hover img {
  filter: brightness(0);
  transition: filter 0.3s ease-in-out;
}


/*================================================================
08 STORY 01 - FIBER GAP STICKY STAGE
================================================================*/

:root {
  --fiber-visual-size: clamp(160px, 22vw, 250px);
  --fiber-visual-gap: 72px;
}

.story-stage {
  position: relative !important;
  min-height: 700vh !important;
  width: 100% !important;
  background: #ffffff !important;
}

.story-sticky {
  position: sticky !important;
  top: 0 !important;
  height: 100vh !important;
  width: 100% !important;
  overflow: hidden !important;
  display: block !important;
}

.story-slide {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(32px, 6vw, 96px) !important;
  text-align: center !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(20px) scale(0.985) !important;
  pointer-events: none !important;
  transition:
    opacity 450ms ease,
    transform 450ms ease,
    visibility 0s linear 450ms !important;
}

.story-slide.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto !important;
  transition:
    opacity 500ms ease,
    transform 500ms ease,
    visibility 0s linear 0s !important;
}

.story-slide.is-exiting {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-20px) scale(0.985) !important;
  pointer-events: none !important;
}

.story-slide,
.story-slide * {
  box-sizing: border-box;
}

.story-slide .elementor-heading-title {
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  letter-spacing: 0 !important;
}


/*================================================================
09 STORY 01 - VISUALS / 30G / SEGMENT
================================================================*/

.story-visual {
  width: var(--fiber-visual-size) !important;
  height: var(--fiber-visual-size) !important;
  margin: 0 auto var(--fiber-visual-gap) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.fiber-badge {
  width: var(--fiber-visual-size) !important;
  height: var(--fiber-visual-size) !important;
  aspect-ratio: 1 !important;
  border-radius: 50% !important;
  background: #00a85a !important;
  color: #ffffff !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  font-size: clamp(56px, 9vw, 130px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.fiber-segment {
  width: var(--fiber-visual-size) !important;
  height: var(--fiber-visual-size) !important;
  aspect-ratio: 1 !important;
  margin: 0 !important;
  color: #00995a !important;
  background: none !important;
  border-radius: 0 !important;
  transform: scaleX(-1) !important;
  transform-origin: center center !important;
  transition:
    color 520ms ease,
    transform 520ms ease !important;
}

.fiber-segment svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
  transform: scale(1.06) !important;
  transform-origin: center center !important;
}

.fiber-segment path {
  fill: currentColor !important;
}

@keyframes fiber-segment-alert {
  0%, 100% {
    fill: #d91505;
    opacity: 1;
  }

  50% {
    fill: #ff2a12;
    opacity: 0.45;
  }
}

.story-gap-green .fiber-segment {
  opacity: 0 !important;
  clip-path: inset(0 100% 0 0) !important;
  transform: scaleX(-1) !important;
  transform-origin: center center !important;
  transition:
    opacity 180ms ease,
    clip-path 420ms cubic-bezier(0.33, 1, 0.68, 1),
    color 520ms ease,
    transform 520ms ease !important;
}

.story-gap-green.is-visible .fiber-segment {
  opacity: 1 !important;
  clip-path: inset(0 0 0 0) !important;
  transform: scaleX(-1) !important;
}

.story-gap-green.is-red-state .fiber-segment {
  color: #d91505 !important;
  transform: scaleX(-1) scale(1.04) !important;
  clip-path: inset(0 0 0 0) !important;
}

.story-gap-green.is-red-state .fiber-segment path {
  fill: #d91505 !important;
  animation: fiber-segment-alert 750ms ease-in-out infinite !important;
}


/*================================================================
10 STORY 01 - PACKSHOT
================================================================*/

.story-packshot img {
  max-width: min(70vw, 520px) !important;
  margin-top: 48px !important;
  transform: translateY(70px) !important;
  transition: transform 600ms ease !important;
}

.story-packshot.is-visible img {
  transform: translateY(0) !important;
}


/*================================================================
11 ELEMENTOR EDITOR FALLBACK - STORY 01
================================================================*/

body.elementor-editor-active .story-stage {
  min-height: auto !important;
}

body.elementor-editor-active .story-sticky {
  position: relative !important;
  height: auto !important;
  overflow: visible !important;
}

body.elementor-editor-active .story-slide {
  position: relative !important;
  inset: auto !important;
  height: auto !important;
  min-height: 70vh !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
  outline: 1px dashed rgba(0, 0, 0, 0.18);
}


/*================================================================
12 STORY 02 - GOODS STICKY STAGE
================================================================*/

.goods-stage {
  position: relative !important;
  min-height: 750vh !important;
  width: 100% !important;
  background: #ffffff !important;
  z-index: 1 !important;
}

.goods-sticky {
  position: sticky !important;
  top: 0 !important;
  height: 100vh !important;
  width: 100% !important;
  overflow: hidden !important;
  display: block !important;
}

.goods-slide {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(32px, 6vw, 96px) !important;
  text-align: center !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(20px) scale(0.985) !important;
  pointer-events: none !important;
  transition:
    opacity 450ms ease,
    transform 450ms ease,
    visibility 0s linear 450ms !important;
}

.goods-slide.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto !important;
  transition:
    opacity 500ms ease,
    transform 500ms ease,
    visibility 0s linear 0s !important;
}

.goods-slide.is-exiting {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-20px) scale(0.985) !important;
  pointer-events: none !important;
}


/*================================================================
13 ELEMENTOR EDITOR FALLBACK - GOODS
================================================================*/

body.elementor-editor-active .goods-stage {
  min-height: auto !important;
}

body.elementor-editor-active .goods-sticky {
  position: relative !important;
  height: auto !important;
  overflow: visible !important;
}

body.elementor-editor-active .goods-slide {
  position: relative !important;
  inset: auto !important;
  height: auto !important;
  min-height: 70vh !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
  outline: 1px dashed rgba(0, 0, 0, 0.18);
}


/*================================================================
14 GOODS COMBINED STORY - BASE LAYOUT
================================================================*/

.goods-combined-story {
  --nugget-y: -220px;
  --nugget-opacity: 0;
  --nugget-rotate: -8deg;
  --nugget-scale: 0.92;
}

.goods-combined-story > .e-con-inner,
.goods-combined-story > .elementor-container,
.goods-combined-story > .elementor-widget-wrap {
  position: relative !important;
  width: min(92vw, 1180px) !important;
  max-width: 1180px !important;
  min-height: 70vh !important;
  padding: 0 !important;
}

.goods-combined-story .goods-fiber-shortage,
.goods-combined-story .goods-fastfood-morph {
  width: 100% !important;
  max-width: 100% !important;
}


/*================================================================
15 GOODS COMBINED - SHORTAGE / PERSONEN
================================================================*/

.goods-fiber-shortage {
  transition:
    opacity 520ms ease,
    transform 620ms ease !important;
}

.goods-fiber-shortage .goods-shortage-people {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: clamp(18px, 3vw, 48px) !important;
  margin-bottom: clamp(28px, 4vw, 56px) !important;
}

.goods-shortage-person,
.goods-shortage-person .elementor-widget-container,
.goods-shortage-person svg {
  transform-origin: bottom center !important;
  transition:
    transform 620ms ease,
    filter 520ms ease,
    opacity 520ms ease !important;
}

.goods-fiber-shortage .goods-shortage-person {
  opacity: 0 !important;
  color: #00a85a !important;
  transform: translateY(24px) scale(0.96) !important;
  filter: none !important;
}

.goods-fiber-shortage .goods-shortage-person.is-person-visible {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

.goods-shortage-person svg,
.goods-shortage-person svg * {
  fill: #00a85a !important;
  color: #00a85a !important;
  transition:
    fill 520ms ease,
    color 520ms ease !important;
}

.goods-shortage-copy {
  opacity: 0 !important;
  transform: translateY(24px) !important;
  transition:
    opacity 500ms ease 180ms,
    transform 500ms ease 180ms !important;
}

.goods-fiber-shortage.phase-people .goods-shortage-copy,
.goods-combined-story.phase-people .goods-shortage-copy {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.goods-fiber-shortage.phase-shortage .goods-shortage-person,
.goods-combined-story.phase-shortage .goods-shortage-person {
  opacity: 1 !important;
}

.goods-fiber-shortage.phase-shortage .goods-shortage-person:not(.is-last),
.goods-combined-story.phase-shortage .goods-shortage-person:not(.is-last) {
  transform: scale(0.72) !important;
  filter: grayscale(1) brightness(0.1) !important;
}

.goods-fiber-shortage.phase-shortage .goods-shortage-person:not(.is-last) svg,
.goods-fiber-shortage.phase-shortage .goods-shortage-person:not(.is-last) svg *,
.goods-combined-story.phase-shortage .goods-shortage-person:not(.is-last) svg,
.goods-combined-story.phase-shortage .goods-shortage-person:not(.is-last) svg * {
  fill: #111111 !important;
  color: #111111 !important;
}

.goods-fiber-shortage.phase-shortage .goods-shortage-person.is-last,
.goods-combined-story.phase-shortage .goods-shortage-person.is-last {
  transform: scale(1) !important;
  filter: none !important;
}

.goods-fiber-shortage.phase-shortage .goods-shortage-person.is-last svg,
.goods-fiber-shortage.phase-shortage .goods-shortage-person.is-last svg *,
.goods-combined-story.phase-shortage .goods-shortage-person.is-last svg,
.goods-combined-story.phase-shortage .goods-shortage-person.is-last svg * {
  fill: #00a85a !important;
  color: #00a85a !important;
}


/*================================================================
16 GOODS COMBINED - TRANSITION UFO / NUGGET
================================================================*/

.goods-fiber-shortage .goods-transition-ufo {
  position: absolute !important;
  top: clamp(80px, 11vh, 150px) !important;
  left: clamp(80px, 16vw, 240px) !important;
  width: clamp(90px, 10vw, 150px) !important;
  opacity: 0 !important;
  transform: translateY(-12px) rotate(-2deg) scale(0.98) !important;
  pointer-events: none !important;
  z-index: 8 !important;
  transition:
    opacity 420ms ease,
    transform 620ms ease !important;
}

.goods-combined-story.is-visible .goods-transition-ufo {
  opacity: 1 !important;
  transform: translateY(0) rotate(0deg) scale(1) !important;
}

.goods-combined-story.phase-shortage .goods-transition-ufo,
.goods-combined-story.phase-good .goods-transition-ufo,
.goods-combined-story.phase-packshot .goods-transition-ufo,
.goods-combined-story.phase-our-goods .goods-transition-ufo {
  opacity: 0 !important;
  transform: translateY(-24px) rotate(4deg) scale(0.94) !important;
}

.goods-fastfood-morph .goods-nugget {
  position: absolute !important;
  top: 0 !important;
  right: clamp(24px, 5vw, 90px) !important;
  width: clamp(90px, 10vw, 160px) !important;
  opacity: var(--nugget-opacity, 0) !important;
  transform:
    translateY(var(--nugget-y, -220px))
    rotate(var(--nugget-rotate, -8deg))
    scale(var(--nugget-scale, 0.92)) !important;
  pointer-events: none !important;
  will-change: transform, opacity !important;
}


/*================================================================
17 GOODS COMBINED - FASTFOOD PERSONEN
================================================================*/

.goods-fastfood-morph .goods-demand-row,
.goods-fastfood-morph .goods-fastfood-people,
.goods-fastfood-morph .goods-people-row {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: clamp(18px, 3vw, 48px) !important;
  margin-bottom: clamp(32px, 5vw, 72px) !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition:
    opacity 520ms ease,
    transform 620ms ease !important;
}

.goods-fastfood-morph .goods-demand-person,
.goods-fastfood-morph .goods-demand-row .elementor-widget-image,
.goods-fastfood-morph .goods-fastfood-people .elementor-widget-image,
.goods-fastfood-morph .goods-people-row .elementor-widget-image {
  transform-origin: bottom center !important;
  color: #111111 !important;
  filter: brightness(0) !important;
  width: clamp(52px, 5.2vw, 108px) !important;
  max-width: clamp(52px, 5.2vw, 108px) !important;
  transition:
    opacity 520ms ease,
    transform 620ms ease,
    filter 520ms ease !important;
}

.goods-fastfood-morph .goods-demand-person svg,
.goods-fastfood-morph .goods-demand-person svg *,
.goods-fastfood-morph .goods-demand-row svg,
.goods-fastfood-morph .goods-demand-row svg *,
.goods-fastfood-morph .goods-fastfood-people svg,
.goods-fastfood-morph .goods-fastfood-people svg * {
  fill: #111111 !important;
  color: #111111 !important;
}

.goods-fastfood-morph .goods-demand-person img,
.goods-fastfood-morph .goods-demand-row img,
.goods-fastfood-morph .goods-fastfood-people img,
.goods-fastfood-morph .goods-people-row img {
  width: 100% !important;
  max-width: 100% !important;
  filter: brightness(0) !important;
}


/*================================================================
18 GOODS COMBINED - FASTFOOD TEXT
================================================================*/

.goods-fastfood-copy,
.goods-text-wrap {
  position: relative !important;
  text-align: left !important;
  width: min(90vw, 1100px) !important;
  margin: 0 auto !important;
}

.goods-want,
.goods-the-good,
.goods-fast,
.goods-fastfood-subcopy,
.goods-our-goods-title {
  transition:
    opacity 520ms ease,
    transform 520ms ease,
    max-height 520ms ease,
    margin 520ms ease !important;
}

.goods-want,
.goods-fast {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.goods-the-good {
  opacity: 0 !important;
  transform: translateY(18px) !important;
  height: auto !important;
  max-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.goods-fastfood-subcopy {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.goods-our-goods-title {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  opacity: 0 !important;
  transform: translateY(20px) !important;
  color: #00a85a !important;
  pointer-events: none !important;
}


/*================================================================
19 GOODS COMBINED - PACKSHOT
================================================================*/

.goods-fastfood-morph .goods-packshot-img {
  opacity: 0 !important;
  transform: translateY(140px) scale(0.96) !important;
  transition:
    opacity 560ms ease 180ms,
    transform 760ms ease 180ms !important;
}


/*================================================================
20 GOODS COMBINED - PHASES
================================================================*/

.goods-fastfood-morph.phase-good .goods-demand-row,
.goods-fastfood-morph.phase-good .goods-fastfood-people,
.goods-fastfood-morph.phase-good .goods-people-row,
.goods-combined-story.phase-good .goods-demand-row,
.goods-combined-story.phase-good .goods-fastfood-people,
.goods-combined-story.phase-good .goods-people-row {
  opacity: 0 !important;
  transform: translateY(-44px) scale(0.96) !important;
}

.goods-fastfood-morph.phase-good .goods-the-good,
.goods-combined-story.phase-good .goods-the-good {
  opacity: 1 !important;
  transform: translateY(0) !important;
  height: auto !important;
  max-height: 260px !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

.goods-fastfood-morph.phase-good .goods-fastfood-subcopy,
.goods-combined-story.phase-good .goods-fastfood-subcopy {
  opacity: 0 !important;
  transform: translateY(18px) !important;
}




.goods-fastfood-morph.phase-packshot .goods-want,
.goods-combined-story.phase-packshot .goods-want {
  opacity: 0 !important;
  transform: translateY(-16px) !important;
}

.goods-fastfood-morph.phase-packshot .goods-packshot-img,
.goods-combined-story.phase-packshot .goods-packshot-img {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

.goods-fastfood-morph.phase-our-goods .goods-want,
.goods-fastfood-morph.phase-our-goods .goods-the-good,
.goods-fastfood-morph.phase-our-goods .goods-fast,
.goods-combined-story.phase-our-goods .goods-want,
.goods-combined-story.phase-our-goods .goods-the-good,
.goods-combined-story.phase-our-goods .goods-fast {
  opacity: 0 !important;
  transform: translateY(-16px) !important;
}

.goods-fastfood-morph.phase-our-goods .goods-our-goods-title,
.goods-combined-story.phase-our-goods .goods-our-goods-title {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

.goods-fastfood-morph.phase-our-goods .goods-packshot-img,
.goods-combined-story.phase-our-goods .goods-packshot-img {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}


/*================================================================
21 FIBER GAP PACKAGING - UNDERLINE CLIP REVEAL
================================================================*/

.fiber-gap-packaging .underline {
  opacity: 1 !important;
  clip-path: none !important;
}

html.has-underline-js .fiber-gap-packaging .underline {
  clip-path: inset(0 100% 0 0) !important;
  transition: clip-path 950ms cubic-bezier(0.33, 1, 0.68, 1) !important;
}

html.has-underline-js .fiber-gap-packaging.is-underline-visible .underline {
  clip-path: inset(0 0 0 0) !important;
}


/*================================================================
22 FIBER GAP INTRO - NON STICKY TEXT REVEAL
================================================================*/

.was-ist-der-fiber-gap {
  position: relative !important;
  overflow: visible !important;
  --fiber-gap-open: 0px;
}

.was-ist-der-fiber-gap .fibergap-txt1,
.was-ist-der-fiber-gap .fibergap-txt2,
.was-ist-der-fiber-gap .fibergap-fiber,
.was-ist-der-fiber-gap .fibergap-gap {
  opacity: 0 !important;
  transform: none !important;
  transition: opacity 520ms ease !important;
  will-change: opacity !important;
}

.was-ist-der-fiber-gap.is-txt1-visible .fibergap-txt1,
.was-ist-der-fiber-gap.is-txt2-visible .fibergap-txt2,
.was-ist-der-fiber-gap.is-fiber-visible .fibergap-fiber {
  opacity: 1 !important;
  transform: none !important;
}

.was-ist-der-fiber-gap.is-gap-visible .fibergap-gap {
  opacity: 1 !important;
  transform: translateX(var(--fiber-gap-open)) !important;
}


/*================================================================
23 FIBER GAP INTRO - GREEN GAP GRAPHIC
================================================================*/

.fiber-gap-mobile {
  display: none !important;
}

.was-ist-der-fiber-gap .fiber-gap {
  opacity: 0 !important;
  transform: none !important;
  clip-path: inset(0 calc((1 - var(--fiber-gap-reveal, 0)) * 100%) 0 0) !important;
  transform-origin: left center !important;
  transition: opacity 180ms ease !important;
  will-change: clip-path, opacity !important;
}

.was-ist-der-fiber-gap.is-gap-graphic-visible .fiber-gap {
  opacity: 1 !important;
}


/*================================================================
24 EUROPE PROBLEM INTRO - NON STICKY TEXT REVEAL
================================================================*/

.europe-problem {
  position: relative !important;
  overflow: visible !important;
  --europe-ufo-y: -200px;
  --europe-ufo-opacity: 0;
  --europe-ufo-rotate: -8deg;
}

.europe-problem .txt-europe,
.europe-problem .txt-wegota,
.europe-problem .txt-fiberproblem {
  opacity: 0 !important;
  transform: none !important;
  transition: opacity 420ms ease !important;
  will-change: opacity !important;
}

.europe-problem.is-europe-visible .txt-europe {
  opacity: 1 !important;
}

.europe-problem.is-wegota-visible .txt-wegota {
  opacity: 1 !important;
}

.europe-problem.is-fiberproblem-visible .txt-fiberproblem {
  opacity: 1 !important;
}


/*================================================================
25 EUROPE PROBLEM INTRO - NUGGET UFO
================================================================*/

.europe-problem .nugget-ufo-europe {
  position: relative !important;
  z-index: 10 !important;
  opacity: var(--europe-ufo-opacity, 0) !important;
  transform:
    translateY(var(--europe-ufo-y, -200px))
    rotate(var(--europe-ufo-rotate, -8deg)) !important;
  will-change: transform, opacity !important;
  pointer-events: none !important;
}

.europe-problem .nugget-ufo-europe img {
  display: block !important;
}


/*================================================================
26 FORM - FIBER FORM CUSTOM CHECKBOX
================================================================*/

.fiber-form .elementor-field-subgroup {
  font-size: 11px !important;
  line-height: 20px !important;
}

.fiber-form input[type="checkbox"] {
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  padding: 0 !important;
  margin: 4px 8px 0 0 !important;
}

.fiber-form input[type="checkbox"]::before {
  width: 4px !important;
  height: 8px !important;
  border-right-width: 2px !important;
  border-bottom-width: 2px !important;
  margin-top: -1px !important;
}


/*================================================================
27 ELEMENTOR EDITOR FALLBACK - EUROPE PROBLEM
================================================================*/

body.elementor-editor-active .europe-problem .txt-europe,
body.elementor-editor-active .europe-problem .txt-wegota,
body.elementor-editor-active .europe-problem .txt-fiberproblem,
body.elementor-editor-active .europe-problem .nugget-ufo-europe {
  opacity: 1 !important;
  transform: none !important;
}


/*================================================================
28 TABLET / MOBILE HORIZONTAL WIDTH LIMIT
Kein overflow-x auf body, damit sticky mobil nicht bricht.
================================================================*/

@media (max-width: 1024px) {
  main#content,
  .page-content,
  .elementor,
  .elementor-section,
  .e-con,
  .e-con-inner {
    max-width: 100vw;
  }

  img,
  svg,
  video,
  canvas {
    max-width: 100%;
  }

  .was-ist-der-fiber-gap,
  .europe-problem,
  .fiber-gap-packaging {
    max-width: 100vw !important;
    overflow-x: clip !important;
  }
}


/*================================================================
29 FIBER GAP INTRO - MOBILE VERTICAL GAP
================================================================*/

@media (max-width: 767px) {
  .was-ist-der-fiber-gap .fiber-gap {
    display: none !important;
  }

  .was-ist-der-fiber-gap .fiber-gap-mobile {
    display: block !important;
    opacity: 0 !important;
    width: 28px !important;
    max-width: 28px !important;
    height: calc(var(--fiber-gap-reveal, 0) * 225px) !important;
    margin-top: 18px !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    overflow: hidden !important;
    align-self: flex-start !important;
    transition: opacity 180ms ease !important;
  }

  .was-ist-der-fiber-gap.is-gap-graphic-visible .fiber-gap-mobile {
    opacity: 1 !important;
  }

  .was-ist-der-fiber-gap .fiber-gap-mobile img,
  .was-ist-der-fiber-gap .fiber-gap-mobile svg {
    width: 28px !important;
    height: 225px !important;
    max-width: none !important;
    display: block !important;
    object-fit: fill !important;
  }

  .was-ist-der-fiber-gap .fibergap-gap {
    margin-left: 0 !important;
    margin-top: -20px !important;
    align-self: flex-start !important;
  }

  .was-ist-der-fiber-gap.is-gap-visible .fibergap-gap {
    transform: translateY(var(--fiber-gap-open)) !important;
  }
}


/*================================================================
30 MOBILE STORY OPTIMIZATION
================================================================*/

@media (max-width: 767px) {
  :root {
    --fiber-visual-size: clamp(150px, 48vw, 220px);
    --fiber-visual-gap: 28px;
    --mobile-sticky-height: 100svh;
  }

  @supports (height: 100dvh) {
    :root {
      --mobile-sticky-height: 100dvh;
    }
  }

  .story-sticky,
  .goods-sticky {
    height: var(--mobile-sticky-height) !important;
    min-height: var(--mobile-sticky-height) !important;
    overflow: hidden !important;
  }

  .story-slide,
  .goods-slide {
    height: var(--mobile-sticky-height) !important;
    min-height: var(--mobile-sticky-height) !important;
    padding: 0 22px 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  .story-slide:first-child {
    padding-top: 32px !important;
  }

  .story-slide > .e-con-inner,
  .story-slide > .elementor-container,
  .story-slide > .elementor-widget-wrap,
  .goods-slide > .e-con-inner,
  .goods-slide > .elementor-container,
  .goods-slide > .elementor-widget-wrap {
    max-height: calc(var(--mobile-sticky-height) - 100px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    overflow: visible !important;
  }

  .story-stage {
    min-height: 260vh !important;
  }

  .goods-stage {
    min-height: 420vh !important;
  }

  .story-visual {
    margin-bottom: 28px !important;
  }

  .fiber-badge,
  .fiber-segment {
    width: clamp(140px, 50vw, 210px) !important;
    height: clamp(140px, 50vw, 210px) !important;
  }

  .fiber-badge {
    font-size: clamp(52px, 17vw, 84px) !important;
  }

  .story-slide .elementor-spacer,
  .story-slide .elementor-spacer-inner,
  .goods-slide .elementor-spacer,
  .goods-slide .elementor-spacer-inner {
    height: 0 !important;
    min-height: 0 !important;
  }

  .story-slide .elementor-heading-title,
  .goods-slide .elementor-heading-title {
    line-height: 1.08 !important;
  }
}


/*================================================================
31 30G BADGE SCALE + TEXT DELAY
================================================================*/

.story-slide .fiber-badge {
  transform: scale(var(--fiber-badge-scale, 1)) !important;
  transform-origin: center center !important;
  will-change: transform !important;
}

.story-30g .elementor-widget-heading {
  opacity: var(--fiber-badge-copy-opacity, 0) !important;
  transform: translateY(var(--fiber-badge-copy-y, 18px)) !important;
  transition: none !important;
  will-change: opacity, transform !important;
}

@media (max-width: 767px) {
  .story-slide .fiber-badge {
    width: clamp(190px, 68vw, 300px) !important;
    height: clamp(190px, 68vw, 300px) !important;
    font-size: clamp(72px, 22vw, 118px) !important;
  }
}


/*================================================================
32 GOODS COMBINED - VISIBILITY / CLIPPING FIX
================================================================*/

.goods-combined-story,
.goods-combined-story.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
}

.goods-combined-story,
.goods-combined-story * {
  box-sizing: border-box;
}

.goods-combined-story > .e-con-inner,
.goods-combined-story > .elementor-container,
.goods-combined-story > .elementor-widget-wrap,
.goods-combined-story .e-con,
.goods-combined-story .e-con-inner,
.goods-combined-story .elementor-container,
.goods-combined-story .elementor-widget-wrap {
  max-height: none !important;
  overflow: visible !important;
}

.goods-combined-story .goods-fiber-shortage,
.goods-combined-story .goods-fastfood-morph {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  min-height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(20px) !important;
  transition:
    opacity 420ms ease,
    transform 520ms ease,
    visibility 0s linear 420ms !important;
}

.goods-combined-story .goods-fiber-shortage {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
  transition:
    opacity 420ms ease,
    transform 520ms ease,
    visibility 0s linear 0s !important;
}

.goods-combined-story.phase-fastfood .goods-fiber-shortage,
.goods-combined-story.phase-good .goods-fiber-shortage,
.goods-combined-story.phase-packshot .goods-fiber-shortage,
.goods-combined-story.phase-our-goods .goods-fiber-shortage {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-20px) !important;
}

.goods-combined-story.phase-fastfood .goods-fastfood-morph,
.goods-combined-story.phase-good .goods-fastfood-morph,
.goods-combined-story.phase-packshot .goods-fastfood-morph,
.goods-combined-story.phase-our-goods .goods-fastfood-morph {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
  transition:
    opacity 420ms ease,
    transform 520ms ease,
    visibility 0s linear 0s !important;
}


/*================================================================
33 GOODS MOBILE STATIC VISIBILITY
================================================================*/

/* @media (max-width: 767px) {
  .goods-stage {
    display: none !important;
  }

  .goods-stage-mobile,
  .goods-mobile-static {
    display: block !important;
  }
}

@media (min-width: 768px) {
  .goods-stage-mobile,
  .goods-mobile-static {
    display: none !important;
  }
} */


/*================================================================
34 MOBILE SECTION SPACING - EUROPE TO GOODS
================================================================*/

@media (max-width: 767px) {
  .europe-problem {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
}


/*================================================================
35 FIBER GAP INTRO - MOBILE COMPACT START
================================================================*/

@media (max-width: 767px) {
  .was-ist-der-fiber-gap {
    margin-top: 0 !important;
    padding-top: 16px !important;
    padding-bottom: 48px !important;
    min-height: auto !important;
  }

  .was-ist-der-fiber-gap .e-con,
  .was-ist-der-fiber-gap .e-con-inner,
  .was-ist-der-fiber-gap .elementor-container,
  .was-ist-der-fiber-gap .elementor-widget-wrap {
    gap: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .was-ist-der-fiber-gap .elementor-widget-spacer,
  .was-ist-der-fiber-gap .elementor-spacer,
  .was-ist-der-fiber-gap .elementor-spacer-inner {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
  }

  .was-ist-der-fiber-gap .fiber-gap {
    display: none !important;
  }

  .was-ist-der-fiber-gap .fiber-gap-mobile {
    display: block !important;
    opacity: 0 !important;
    width: 28px !important;
    max-width: 28px !important;
    height: calc(var(--fiber-gap-reveal, 0) * 225px) !important;
    margin-top: 10px !important;
    margin-bottom: 0 !important;
    overflow: hidden !important;
    transition: opacity 180ms ease !important;
  }

  .was-ist-der-fiber-gap.is-gap-graphic-visible .fiber-gap-mobile {
    opacity: 1 !important;
  }

  .was-ist-der-fiber-gap .fiber-gap-mobile img,
  .was-ist-der-fiber-gap .fiber-gap-mobile svg {
    width: 28px !important;
    height: 225px !important;
    max-width: none !important;
    display: block !important;
    object-fit: fill !important;
  }

  .was-ist-der-fiber-gap .fibergap-gap {
    margin-top: -16px !important;
  }
}


/*================================================================
36 LOTTIE FIBER DESKTOP - STICKY TEXT REVEAL
================================================================*/

.lottie-fiber-stage {
  position: relative !important;
  min-height: 320vh !important;
  background: #ffffff !important;
}

.lottie-fiber-sticky {
  position: sticky !important;
  top: 0 !important;
  min-height: 100vh !important;
  height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding-top: clamp(72px, 10vh, 120px) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.lottie-fiber-sticky > .e-con-inner,
.lottie-fiber-sticky > .elementor-container,
.lottie-fiber-sticky > .elementor-widget-wrap {
  width: min(92vw, 1180px) !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: clamp(24px, 4vh, 48px) !important;
}

.fiber-lottie-scroll {
  position: relative !important;
  width: min(58vw, 420px) !important;
  max-width: 420px !important;
  margin: 0 auto !important;
  z-index: 99999 !important;
}

.fiber-lottie-scroll svg,
.fiber-lottie-scroll canvas {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

.lottie-text-1,
.lottie-text-2 {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(18px) !important;
  transition:
    opacity 420ms ease,
    transform 520ms ease,
    visibility 0s linear 420ms !important;
  will-change: opacity, transform !important;
}

.lottie-fiber-stage.is-text-1-visible .lottie-text-1,
.lottie-fiber-stage.is-text-2-visible .lottie-text-2 {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  transition:
    opacity 420ms ease,
    transform 520ms ease,
    visibility 0s linear 0s !important;
}

@media (min-width: 1377px) {
  .fiber-lottie-scroll {
    width: min(58vw, 420px) !important;
    max-width: 420px !important;
  }
}

@media (min-width: 768px) and (max-width: 1376px) {
  .fiber-lottie-scroll {
    width: min(48vw, 360px) !important;
    max-width: 360px !important;
    margin-bottom: -12px !important;
  }

  .lottie-fiber-sticky {
    padding-top: clamp(56px, 8vh, 88px) !important;
  }

  .lottie-fiber-sticky > .e-con-inner,
  .lottie-fiber-sticky > .elementor-container,
  .lottie-fiber-sticky > .elementor-widget-wrap {
    gap: 12px !important;
  }

  .lottie-text-1 {
    margin-top: 0 !important;
  }

  .lottie-text-2 {
    margin-top: clamp(-130px, -10vh, -72px) !important;
  }
}


/*================================================================
37 LOTTIE FIBER MOBILE - SEPARATE STICKY
================================================================*/

.lottie-fiber-stage-mobile {
  display: none !important;
}

@media (max-width: 767px) {
  .lottie-fiber-stage {
    display: none !important;
  }

  .lottie-fiber-stage-mobile {
    display: block !important;
    position: relative !important;
    min-height: 280vh !important;
    height: auto !important;
    background: #ffffff !important;
    overflow: visible !important;
    overflow-x: clip !important;
  }

  .lottie-fiber-sticky-mobile {
    position: sticky !important;
    position: -webkit-sticky !important;
    top: 0 !important;
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
    padding: 24px 16px 44px !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    align-items: center !important;
    justify-items: center !important;
    overflow: hidden !important;
    z-index: 2 !important;
  }

  @supports (height: 100dvh) {
    .lottie-fiber-sticky-mobile {
      height: 100dvh !important;
      min-height: 100dvh !important;
      max-height: 100dvh !important;
    }
  }

  .fiber-lottie-scroll-mobile {
    grid-row: 1 !important;
    width: min(86vw, 360px) !important;
    max-width: calc(100vw - 32px) !important;
    justify-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .fiber-lottie-scroll-mobile .e-lottie__container,
  .fiber-lottie-scroll-mobile svg,
  .fiber-lottie-scroll-mobile canvas {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  .lottie-mobile-text-1,
  .lottie-mobile-text-2 {
    position: absolute !important;
    left: 16px !important;
    right: 16px !important;
    bottom: -140px !important;
    width: auto !important;
    max-width: calc(100vw - 32px) !important;
    margin: 0 !important;
    text-align: center !important;
    z-index: 5 !important;

    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(16px) !important;
    transition:
      opacity 420ms ease,
      transform 520ms ease,
      visibility 0s linear 420ms !important;
  } 

  .lottie-mobile-text-2{
    bottom: -155px !important;
  }


  .lottie-fiber-stage-mobile.is-text-1-visible .lottie-mobile-text-1,
  .lottie-fiber-stage-mobile.is-text-2-visible .lottie-mobile-text-2 {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    transition:
      opacity 420ms ease,
      transform 520ms ease,
      visibility 0s linear 0s !important;
  }
}

@media (min-width: 768px) {
  .lottie-fiber-stage-mobile {
    display: none !important;
  }
}


/*================================================================
38 LANG SWITCHER
================================================================*/

ul li.wpml-ls-item a {
  font-size: 18px !important;
}


/*================================================================
39 MOBILE LOTTIE - SMALL PHONES 320-360
================================================================*/

@media screen and (max-width: 375px) {
  .lottie-fiber-stage-mobile .fiber-lottie-scroll-mobile {
    width: min(76vw, 290px) !important;
    max-width: calc(100vw - 32px) !important;
  }

  .lottie-fiber-stage-mobile .lottie-mobile-text-1 .elementor-heading-title,
  .lottie-fiber-stage-mobile .lottie-mobile-text-2 .elementor-heading-title {
    font-size: clamp(22px, 7vw, 28px) !important;
    line-height: 1.05 !important; 
  }

  .lottie-mobile-text-1,
  .lottie-mobile-text-2 {
    bottom: -90px !important;
  }

  .lottie-mobile-text-2 {
    bottom: -90px !important;
  }

  .headline-fiber-gap{
    font-size: 32px !important;
  }
} 



/*================================================================
40 Tab Styling
================================================================*/

.elementor .e-tab-base.e--selected {
    border-color: #009755 !important;
    background-color: #CCEADD !important;
}

.elementor .e-tab-base:hover, .elementor .e-tab-base:focus-visible {
    background-color: #CCEADD !important;
}


/*================================================================
GOODS SHORTAGE - LEFT NUGGET SCROLL IN
================================================================*/

.goods-combined-story {
  --shortage-nugget-y: -260px;
  --shortage-nugget-opacity: 0;
  --shortage-nugget-rotate: -8deg;
  --shortage-nugget-scale: 0.94;
}

.goods-fiber-shortage .goods-shortage-nugget-left {
  position: absolute !important;
  left: clamp(56px, 2vw, 76px) !important;
  top: 50% !important;
  width: clamp(100px, 24vw, 220px) !important;
  max-width: 32vw !important;
  opacity: var(--shortage-nugget-opacity, 0) !important;
  visibility: visible !important;
  transform:
    translateY(calc(-38% + var(--shortage-nugget-y, -400px)))
    rotate(var(--shortage-nugget-rotate, -8deg))
    scale(var(--shortage-nugget-scale, 0.94)) !important;
  pointer-events: none !important;
  z-index: 6 !important;
  will-change: transform, opacity !important;
}

.goods-fiber-shortage .goods-shortage-nugget-left img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}