/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jun 19 2026 | 09:22:25 */
```css
/* --------------------------------------------------
   Button mit Icon – Hover nur auf dem Button selbst
-------------------------------------------------- */

.buttonmiticon .elementor-button {
  padding-left: 1em !important;
  padding-right: 1em !important;
}

.buttonmiticon .elementor-button-content-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
}

.buttonmiticon .elementor-button-icon {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  margin-left: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  transform: scale(0.6);
  transform-origin: center center;

  transition:
    width 0.25s ease,
    max-width 0.25s ease,
    margin-left 0.25s ease,
    opacity 0.18s ease 0.12s,
    transform 0.22s ease 0.12s;
}

.buttonmiticon .elementor-button:hover .elementor-button-icon {
  width: 1em !important;
  max-width: 1em !important;
  margin-left: 0.35em !important;
  opacity: 1 !important;
  transform: scale(1);
}


/* --------------------------------------------------
   Round Buttons – gemeinsame Form
-------------------------------------------------- */

.roundbutton .elementor-button,
.roundbuttonsvg .elementor-button {
  width: 2.5em !important;
  height: 2.5em !important;
  min-width: 2.5em !important;
  min-height: 2.5em !important;
  max-width: 2.5em !important;
  max-height: 2.5em !important;

  padding: 0 !important;
  border-radius: 50% !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.roundbutton .elementor-button-content-wrapper,
.roundbuttonsvg .elementor-button-content-wrapper {
  width: 100% !important;
  height: 100% !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 0 !important;
}

.roundbutton .elementor-button-text,
.roundbuttonsvg .elementor-button-text {
  display: none !important;
}

.roundbutton .elementor-button-icon,
.roundbuttonsvg .elementor-button-icon {
  width: 1.2em !important;
  height: 1.2em !important;
  min-width: 1.2em !important;
  max-width: 1.2em !important;

  margin: 0 !important;
  padding: 0 !important;

  opacity: 1 !important;
  overflow: visible !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  transform: none !important;
  transition: none !important;
}

.roundbutton .elementor-button-icon svg,
.roundbuttonsvg .elementor-button-icon svg {
  width: 1.2em !important;
  height: 1.2em !important;
}


/* --------------------------------------------------
   Round Button
   Immer grüner Hintergrund, Icon immer weiß
-------------------------------------------------- */

.roundbutton .elementor-button,
.roundbutton .elementor-button:hover,
.roundbutton .elementor-button:focus,
.roundbutton .elementor-button:active {
  background-color: var(--e-global-color-primary) !important;
  color: #ffffff !important;
}

.roundbutton .elementor-button-icon,
.roundbutton .elementor-button-icon svg,
.roundbutton .elementor-button-icon svg *,
.roundbutton .elementor-button:hover .elementor-button-icon,
.roundbutton .elementor-button:hover .elementor-button-icon svg,
.roundbutton .elementor-button:hover .elementor-button-icon svg * {
  color: #ffffff !important;
}

.roundbutton .elementor-button-icon svg * {
  fill: #ffffff !important;
  stroke: #ffffff !important;
}


/* --------------------------------------------------
   Round Button SVG
   Lightmode dunkelblau, Darkmode weiß
   Hintergrund bleibt aus Elementor
-------------------------------------------------- */

.roundbuttonsvg .elementor-button,
.roundbuttonsvg .elementor-button:hover,
.roundbuttonsvg .elementor-button:focus,
.roundbuttonsvg .elementor-button:active {
  color: var(--e-global-color-text) !important;
}

.roundbuttonsvg .elementor-button-icon,
.roundbuttonsvg .elementor-button-icon svg,
.roundbuttonsvg .elementor-button-icon svg *,
.roundbuttonsvg .elementor-button:hover .elementor-button-icon,
.roundbuttonsvg .elementor-button:hover .elementor-button-icon svg,
.roundbuttonsvg .elementor-button:hover .elementor-button-icon svg * {
  color: var(--e-global-color-text) !important;
}

.roundbuttonsvg .elementor-button-icon svg * {
  fill: var(--e-global-color-text) !important;
  stroke: var(--e-global-color-text) !important;
}


/* --------------------------------------------------
   Hover / Focus – Größe beibehalten
-------------------------------------------------- */

.roundbutton .elementor-button:hover .elementor-button-icon,
.roundbuttonsvg .elementor-button:hover .elementor-button-icon,
.roundbutton .elementor-button:focus .elementor-button-icon,
.roundbuttonsvg .elementor-button:focus .elementor-button-icon {
  width: 1.2em !important;
  height: 1.2em !important;
  min-width: 1.2em !important;
  max-width: 1.2em !important;

  margin: 0 !important;
  opacity: 1 !important;
  transform: none !important;
}


/* --------------------------------------------------
   Round Button SVG – Focus nach Klick zurücksetzen
-------------------------------------------------- */

.roundbuttonsvg .elementor-button:focus:not(:hover),
.roundbuttonsvg .elementor-button:active:not(:hover) {
  background-color: transparent !important;
  background-image: none !important;
}

/* Tastatur-Fokus sichtbar lassen */
.roundbuttonsvg .elementor-button:focus-visible {
  outline: 2px solid var(--e-global-color-primary) !important;
  outline-offset: 3px !important;
}


#footerdarkmodeicon .elementor-button-icon,
#footerdarkmodeicon .elementor-button-icon svg,
#footerdarkmodeicon .elementor-button-icon svg * {
color: #ffffff !important;
fill: #ffffff !important;
stroke: #ffffff !important;
}

/* Hover-Farbe weiterhin über die bestehende roundbuttonsvg-Regel */
#footerdarkmodeicon:hover .elementor-button-icon,
#footerdarkmodeicon:hover .elementor-button-icon svg,
#footerdarkmodeicon:hover .elementor-button-icon svg * {
color: var(--e-global-color-text) !important;
fill: var(--e-global-color-text) !important;
stroke: var(--e-global-color-text) !important;
}







/* Footer-Darkmode-Icon:
   Lightmode normal weiß, Hover ursprüngliche blaue SVG-Farbe */

html:not(.darkmode) body:not(.darkmode)
#footerdarkmodeicon img.tsf-darkmode-icon {
  filter: brightness(0) invert(1) !important;
}

/* Beim Hover Filter entfernen – ursprüngliches Dunkelblau anzeigen */
html:not(.darkmode) body:not(.darkmode)
#footerdarkmodeicon:hover img.tsf-darkmode-icon {
  filter: none !important;
}

/* Footer-Darkmode-Button – Border immer gleich */
#footerdarkmodeicon .elementor-button,
#footerdarkmodeicon .elementor-button:hover,
#footerdarkmodeicon .elementor-button:focus,
#footerdarkmodeicon .elementor-button:active {
  border-style: solid !important;
  border-width: 0.2em !important;
  border-color: #FFFFFF24 !important;
}

.roundbutton .elementor-button,
.roundbuttonsvg .elementor-button {
  width: 2.35em !important;
  height: 2.35em !important;
  min-width: 2.35em !important;
  min-height: 2.35em !important;
  max-width: 2.35em !important;
  max-height: 2.35em !important;
}