.fan-instance,
.fan-instance *,
.fan-instance *::before,
.fan-instance *::after {
  box-sizing: border-box;
}

.fan-instance {
  position: relative;
  z-index: 50;
  display: var(--fan-device-enabled, block);
  width: 100%;
  min-height: var(--fan-placeholder-height, auto);
  color: var(--fan-text-color, #242424);
}

.fan-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.fan-nav {
  position: relative;
  width: min(
    var(--fan-max-width, 1180px),
    var(--fan-static-available, calc(100% - var(--fan-open-gutter, 20px) - var(--fan-open-gutter, 20px)))
  );
  margin-left: var(--fan-static-margin-left, auto);
  margin-right: var(--fan-static-margin-right, auto);
}

.fan-nav.is-floating {
  position: fixed;
  top: var(--fan-live-top, auto);
  left: var(--fan-live-left);
  z-index: 9998;
  width: var(--fan-live-width);
  margin: 0;
  transition:
    top var(--fan-duration, 880ms) var(--fan-easing, ease),
    left var(--fan-duration, 880ms) var(--fan-easing, ease),
    width var(--fan-duration, 880ms) var(--fan-easing, ease);
}

.fan-nav.is-animating {
  will-change: top, left, width;
}

/*
 * Animierte Rückkehr per FLIP: Das Menü befindet sich bereits an seiner
 * echten statischen Position und wird nur visuell vom Button dorthin bewegt.
 * Dadurch gibt es am Ende keinen Sprung und keinen Zwischenstopp.
 */
.fan-nav.is-returning {
  transform-origin: top left;
  transform:
    translate(var(--fan-return-x, 0px), var(--fan-return-y, 0px))
    scale(var(--fan-return-scale-x, 1), var(--fan-return-scale-y, 1));
  transition: transform var(--fan-duration, 880ms) var(--fan-easing, ease);
  will-change: transform;
}

.fan-nav.is-returning.is-returning-active {
  transform: translate(0, 0) scale(1, 1);
}

.fan-nav.no-transition,
.fan-nav.no-transition *,
.fan-nav.no-transition *::before,
.fan-nav.no-transition *::after {
  transition: none !important;
}

.fan-box {
  position: relative;
  width: 100%;
  padding: var(--fan-box-padding, 18px);
  overflow: hidden;
  background: var(--fan-box-bg, #fff);
  border: var(--fan-border-width, 1px) solid var(--fan-border-color, #dfeceb);
  border-radius: var(--fan-box-radius, 24px);
  box-shadow: var(--fan-box-shadow, none);
  filter: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition:
    height var(--fan-duration, 880ms) var(--fan-easing, ease),
    padding var(--fan-box-duration, 792ms) var(--fan-easing, ease),
    border-radius var(--fan-list-duration, 458ms) var(--fan-easing, ease),
    background-color 520ms ease,
    border-color 520ms ease,
    box-shadow 520ms ease;
}

/* The box must have two numeric heights while floating so its collapse can
   animate. Its expanded height is measured once, not on every scroll frame. */
.fan-nav.is-floating .fan-box {
  height: var(--fan-expanded-height, auto);
}

.fan-heading {
  margin: 0 0 12px;
  font: inherit;
  color: var(--fan-heading-color, var(--fan-text-color));
  text-align: var(--fan-heading-alignment, center);
}

.fan-list {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: var(--fan-grid-template, repeat(var(--fan-columns, 8), minmax(0, 1fr)));
  justify-content: var(--fan-grid-justify, stretch);
  gap: var(--fan-gap, 4px);
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  opacity: 1;
  transform: translateX(0) scale(1);
  transform-origin: center;
  transition:
    opacity var(--fan-fade-duration, 246ms) ease 60ms,
    transform var(--fan-list-duration, 458ms) var(--fan-easing, ease);
}

.fan-link {
  --fan-current-text: var(--fan-item-custom-text, var(--fan-text-color));
  --fan-current-icon-fill: var(--fan-item-custom-icon-fill, var(--fan-item-custom-icon, var(--fan-icon-fill, var(--fan-icon-color, currentColor))));
  --fan-current-icon-stroke: var(--fan-item-custom-icon-stroke, var(--fan-item-custom-icon, var(--fan-icon-stroke, var(--fan-icon-color, currentColor))));
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: var(--fan-item-min-height, 80px);
  padding: var(--fan-item-padding, 10px 6px);
  color: var(--fan-current-text);
  text-align: center;
  text-decoration: none !important;
  background: var(--fan-item-bg, transparent);
  border: var(--fan-item-border-width, 1px) solid var(--fan-item-border-color, transparent);
  border-radius: var(--fan-item-radius, 16px);
  outline: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.fan-link::after {
  position: absolute;
  right: 29%;
  bottom: 5px;
  left: 29%;
  height: var(--fan-active-line-height, 3px);
  content: "";
  background: var(--fan-active-line, #4f9f9c);
  border-radius: 999px;
  opacity: 0;
  transform: scaleX(0);
  transition: opacity 180ms ease, transform 180ms ease;
}

.fan-link:hover,
.fan-link:focus-visible {
  --fan-current-icon-fill: var(--fan-icon-hover-fill, var(--fan-hover-color, #4f9f9c));
  --fan-current-icon-stroke: var(--fan-icon-hover-stroke, var(--fan-hover-color, #4f9f9c));
  color: var(--fan-hover-color, #4f9f9c);
  background: var(--fan-hover-bg, #edf8f7);
  transform: translateY(-2px);
}

.fan-link.is-active {
  --fan-current-icon-fill: var(--fan-icon-active-fill, var(--fan-active-color, #4f9f9c));
  --fan-current-icon-stroke: var(--fan-icon-active-stroke, var(--fan-active-color, #4f9f9c));
  color: var(--fan-active-color, #4f9f9c);
  background: var(--fan-active-bg, #edf8f7);
}

.fan-link.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

.fan-instance.fan-no-active-tracking .fan-link.is-active {
  --fan-current-icon-fill: var(--fan-item-custom-icon-fill, var(--fan-item-custom-icon, var(--fan-icon-fill, var(--fan-icon-color, currentColor))));
  --fan-current-icon-stroke: var(--fan-item-custom-icon-stroke, var(--fan-item-custom-icon, var(--fan-icon-stroke, var(--fan-icon-color, currentColor))));
  color: var(--fan-current-text);
  background: var(--fan-item-bg, transparent);
}

.fan-instance.fan-no-active-tracking .fan-link.is-active::after {
  opacity: 0;
  transform: scaleX(0);
}

.fan-link:focus-visible {
  outline: 3px solid var(--fan-focus-color, #4f9f9c);
  outline-offset: 2px;
}

.fan-icon {
  display: grid;
  place-items: center;
  width: var(--fan-icon-size, 34px);
  height: var(--fan-icon-size, 34px);
  margin-bottom: var(--fan-icon-gap, 8px);
  color: var(--fan-current-icon-fill);
  flex: 0 0 auto;
  overflow: visible;
}

/*
 * Jede Grafik sitzt zuerst in derselben festen Symbolfläche. Die globale
 * Grafikskalierung verändert nur den sichtbaren Inhalt, nicht das Raster.
 */
.fan-icon-glyph {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: inherit;
  line-height: 1;
  overflow: visible;
  transform: scale(var(--fan-icon-graphic-scale, 1));
  transform-origin: center;
}

/*
 * Die Korrektur pro Menüpunkt liegt auf dem eigentlichen Elementor-Icon.
 * So lassen sich optisch kleine oder asymmetrische Icons angleichen, ohne
 * die Symbolfläche oder den Abstand zur Beschriftung zu verändern.
 */
.fan-icon-glyph > svg,
.fan-icon-glyph > img,
.fan-icon-glyph > i {
  display: block;
  width: 100%;
  height: 100%;
  transform:
    translate(var(--fan-item-icon-x, 0px), var(--fan-item-icon-y, 0px))
    scale(var(--fan-item-icon-scale, 1));
  transform-origin: center;
}

.fan-icon-glyph > i {
  display: grid;
  place-items: center;
  color: var(--fan-current-icon-fill);
  font-size: var(--fan-icon-size, 34px);
  line-height: 1;
}

.fan-icon-glyph > svg {
  overflow: visible;
  color: var(--fan-current-icon-fill);
}

/* Automatisch: Originalstruktur des SVG bleibt erhalten. */
.fan-icon-mode-auto .fan-icon svg[fill]:not([fill="none"]),
.fan-icon-mode-auto .fan-icon svg [fill]:not([fill="none"]) {
  fill: var(--fan-current-icon-fill);
}

.fan-icon-mode-auto .fan-icon svg[stroke]:not([stroke="none"]),
.fan-icon-mode-auto .fan-icon svg [stroke]:not([stroke="none"]) {
  stroke: var(--fan-current-icon-stroke);
}

/* Nur Füllung */
.fan-icon-mode-fill .fan-icon svg path,
.fan-icon-mode-fill .fan-icon svg circle,
.fan-icon-mode-fill .fan-icon svg rect,
.fan-icon-mode-fill .fan-icon svg polygon,
.fan-icon-mode-fill .fan-icon svg ellipse {
  fill: var(--fan-current-icon-fill) !important;
  stroke: none !important;
}

/* Nur Kontur */
.fan-icon-mode-outline .fan-icon svg path,
.fan-icon-mode-outline .fan-icon svg circle,
.fan-icon-mode-outline .fan-icon svg rect,
.fan-icon-mode-outline .fan-icon svg polygon,
.fan-icon-mode-outline .fan-icon svg ellipse,
.fan-icon-mode-outline .fan-icon svg line,
.fan-icon-mode-outline .fan-icon svg polyline {
  fill: none !important;
  stroke: var(--fan-current-icon-stroke) !important;
  stroke-width: var(--fan-icon-stroke-width, 1.65) !important;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* Füllung und Kontur getrennt */
.fan-icon-mode-fill_outline .fan-icon svg path,
.fan-icon-mode-fill_outline .fan-icon svg circle,
.fan-icon-mode-fill_outline .fan-icon svg rect,
.fan-icon-mode-fill_outline .fan-icon svg polygon,
.fan-icon-mode-fill_outline .fan-icon svg ellipse {
  fill: var(--fan-current-icon-fill) !important;
  stroke: var(--fan-current-icon-stroke) !important;
  stroke-width: var(--fan-icon-stroke-width, 1.65) !important;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.fan-icon-mode-fill_outline .fan-icon svg line,
.fan-icon-mode-fill_outline .fan-icon svg polyline {
  fill: none !important;
  stroke: var(--fan-current-icon-stroke) !important;
  stroke-width: var(--fan-icon-stroke-width, 1.65) !important;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* Font-Icons erhalten eine sichtbare Kontur über text-stroke. */
.fan-icon-mode-fill .fan-icon i {
  color: var(--fan-current-icon-fill);
  -webkit-text-stroke-width: 0;
}

.fan-icon-mode-outline .fan-icon i {
  color: transparent;
  -webkit-text-stroke-style: solid;
  -webkit-text-stroke-color: var(--fan-current-icon-stroke);
  -webkit-text-stroke-width: var(--fan-icon-stroke-width, 1.6px);
}

.fan-icon-mode-fill_outline .fan-icon i {
  color: var(--fan-current-icon-fill);
  -webkit-text-stroke-style: solid;
  -webkit-text-stroke-color: var(--fan-current-icon-stroke);
  -webkit-text-stroke-width: var(--fan-icon-stroke-width, 1.6px);
}

.fan-icon-image {
  object-fit: contain;
}

.fan-label {
  display: block;
  font: inherit;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fan-toggle {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: var(--fan-button-size, 54px);
  min-width: var(--fan-button-size, 54px);
  max-width: var(--fan-button-size, 54px);
  height: var(--fan-button-size, 54px);
  min-height: var(--fan-button-size, 54px);
  max-height: var(--fan-button-size, 54px);
  padding: 0;
  aspect-ratio: 1 / 1;
  color: var(--fan-button-color, #fff);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background: var(--fan-button-bg, #4f9f9c);
  border: var(--fan-button-border-width, 1px) solid var(--fan-button-border-color, rgba(255,255,255,.34));
  border-radius: var(--fan-button-radius, 50%);
  outline: none;
  box-shadow: var(--fan-button-shadow, none);
  filter: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  -webkit-tap-highlight-color: transparent;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.9);
  transition: visibility 0s linear, opacity 200ms ease, transform 250ms ease, background-color 180ms ease;
}

.fan-toggle-icon {
  display: grid;
  place-items: center;
  width: 52%;
  height: 52%;
  color: inherit;
  font-size: calc(var(--fan-button-size, 54px) * .52);
  line-height: 1;
  overflow: visible;
}

.fan-toggle-icon > i,
.fan-toggle-icon > svg {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  line-height: 1;
}

.fan-toggle-icon > i {
  display: grid;
  place-items: center;
  font-size: inherit;
}

.fan-toggle-icon > svg {
  fill: currentColor;
  overflow: visible;
}

.fan-toggle-icon > svg [fill]:not([fill="none"]) {
  fill: currentColor;
}

.fan-toggle-icon > svg [stroke]:not([stroke="none"]) {
  stroke: currentColor;
}

.fan-toggle:hover {
  color: var(--fan-button-hover-color, var(--fan-button-color, #fff));
  background: var(--fan-button-hover-bg, #3b8886);
}

.fan-toggle:focus-visible {
  outline: 3px solid var(--fan-focus-color, #4f9f9c);
  outline-offset: 4px;
}

.fan-nav.is-collapsed .fan-box {
  /* Let the outer navigation animate the width. Fixing the child width
     immediately previously made the box snap into a tiny square. */
  width: 100%;
  min-width: 0;
  max-width: none;
  height: var(--fan-button-size, 54px);
  min-height: 0;
  max-height: none;
  padding: 0;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  border-width: 0 !important;
  border-radius: 18px;
  box-shadow: none !important;
  outline: none !important;
  overflow: visible;
}

.fan-nav.is-collapsed .fan-heading,
.fan-nav.is-collapsed .fan-list {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-18px) scale(.97);
}

.fan-nav.is-collapsed .fan-toggle {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
  transition:
    visibility 0s linear var(--fan-button-delay, 581ms),
    opacity var(--fan-button-fade-duration, 238ms) ease var(--fan-button-delay, 581ms),
    transform var(--fan-fade-duration, 246ms) ease var(--fan-button-move-delay, 546ms),
    background-color 180ms ease;
}

.fan-nav.is-collapsed .fan-toggle:hover {
  transform: translate(-50%, -50%) scale(1.045);
}


.fan-editor-notice {
  padding: 12px 16px;
  border: 1px dashed #9aa8a7;
  border-radius: 8px;
  background: #fff;
  color: #4f5a59;
}

@media (min-width: 1025px) {
  .fan-hide-desktop { display: none !important; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .fan-hide-tablet { display: none !important; }
}

@media (max-width: 767px) {
  .fan-hide-mobile { display: none !important; }
  .fan-box { padding: var(--fan-box-padding, 11px); }
  .fan-label { overflow: visible; text-overflow: clip; }
}

@media (prefers-reduced-motion: reduce) {
  .fan-nav,
  .fan-nav *,
  .fan-nav *::before,
  .fan-nav *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
}