.elementor-kit-6{--e-global-color-primary:#E78061;--e-global-color-secondary:#BE634A;--e-global-color-text:#14395A;--e-global-color-accent:#FFC79B;--e-global-typography-primary-font-family:"Prometo";--e-global-typography-primary-font-size:48px;--e-global-typography-primary-font-weight:400;--e-global-typography-primary-line-height:60px;--e-global-typography-secondary-font-family:"Prometo";--e-global-typography-secondary-font-size:40px;--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto Slab";--e-global-typography-text-font-size:23px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:38px;--e-global-typography-accent-font-family:"Roboto Slab";--e-global-typography-accent-font-size:23px;--e-global-typography-accent-font-weight:700;--e-global-typography-155900c-font-family:"Prometo";--e-global-typography-155900c-font-size:30px;--e-global-typography-155900c-font-weight:400;--e-global-typography-c990f66-font-family:"Prometo";--e-global-typography-c990f66-font-size:24px;--e-global-typography-c990f66-font-weight:400;--e-global-typography-c24f51b-font-family:"Prometo";--e-global-typography-c24f51b-font-size:22px;--e-global-typography-c24f51b-font-weight:400;--e-global-typography-57d6d36-font-family:"Prometo";--e-global-typography-57d6d36-font-size:clamp(2rem, 1.848vw + 1.522rem, 3rem);--e-global-typography-57d6d36-font-weight:500;--e-global-typography-57d6d36-line-height:clamp(2.4rem, 5.266vw + 1.038rem, 5.25rem);--e-global-typography-13c49af-font-family:"Roboto Slab";--e-global-typography-13c49af-font-size:20px;--e-global-typography-13c49af-font-weight:700;--e-global-typography-4bf93bd-font-family:"Roboto Slab";--e-global-typography-4bf93bd-font-size:20px;--e-global-typography-4bf93bd-font-weight:400;--e-global-typography-63537f4-font-family:"Roboto Slab";--e-global-typography-63537f4-font-size:clamp(1.125rem, 1.155vw + 0.826rem, 1.75rem);--e-global-typography-63537f4-font-weight:400;--e-global-typography-63537f4-line-height:clamp(1.35rem, 2.032vw + 0.824rem, 2.45rem);background-color:var( --e-global-color-blocksy_palette_8 );}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-6{--e-global-typography-57d6d36-font-size:clamp(1.875rem, 2.079vw + 1.337rem, 3rem);--e-global-typography-57d6d36-line-height:clamp(2.813rem, 2.009vw + 2.293rem, 3.9rem);--e-global-typography-63537f4-font-size:clamp(1.25rem, 0.924vw + 1.011rem, 1.75rem);--e-global-typography-63537f4-line-height:clamp(1.463rem, 1.824vw + 0.99rem, 2.45rem);}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ========== HEADER BASISSTYLES ========== */

.smart-header,
.bgblauheader {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 9999;
  padding-block: 14px;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
  transform: translateY(0);
  transition:
    transform 0.28s ease,
    opacity 0.28s ease,
    padding 0.28s ease;
  overflow: visible; /* wichtig für Pseudo-Elemente */
}

.smart-header > *,
.bgblauheader > * {
  position: relative;
  z-index: 2; /* Inhalt über dem Blur */
}

/* ========== PSEUDO-ELEMENT FÜR BLUR UND HINTERGRUND ========== */

.smart-header::before,
.bgblauheader::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0; /* standardmäßig unsichtbar (smart-header oben) */
  background-color: transparent;
  transition:
    opacity 0.28s ease,
    background-color 0.28s ease,
    -webkit-backdrop-filter 0.28s ease,
    backdrop-filter 0.28s ease;
}

/* ========== SMART-HEADER ZUSTÄNDE ========== */

.smart-header.is-hidden {
  transform: translateY(-100%) !important;
  opacity: 0 !important;
}

.smart-header.is-compact::before,
.smart-header.elementor-sticky--effects::before {
  opacity: 1;
  background-color: rgba(21, 57, 90, 0.8); /* halbtransparent blau */
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}

.smart-header.is-compact,
.smart-header.elementor-sticky--effects {
  padding-block: 10px !important;
}

/* ========== BG-BLAU-HEADER ZUSTÄNDE ========== */

.bgblauheader::before {
  opacity: 1;
  background-color: #15395a; /* oben voll blau */
}

.bgblauheader.is-hidden {
  transform: translateY(-100%) !important;
  opacity: 0 !important;
}

.bgblauheader.is-compact::before,
.bgblauheader.elementor-sticky--effects::before {
  background-color: rgba(21, 57, 90, 0.8); /* halbtransparent + Blur */
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}

.bgblauheader.is-compact,
.bgblauheader.elementor-sticky--effects {
  padding-block: 10px !important;
}

/* ========== LOGO UND NAVIGATION SICHTBARKEIT ========== */

.smart-header .elementor-widget-theme-site-logo img,
.smart-header .elementor-widget-image img,
.bgblauheader .elementor-widget-theme-site-logo img,
.bgblauheader .elementor-widget-image img {
  height: auto !important;
  width: auto !important;
  max-width: 100% !important;
  max-height: 100px !important;
  display: block !important;
  opacity: 1 !important; /* standardmäßig sichtbar */
  transition: max-height .28s ease, transform .28s ease;
}

/* Logo kleiner im kompakten Zustand */
.smart-header.is-compact .elementor-widget-theme-site-logo img,
.smart-header.elementor-sticky--effects .elementor-widget-theme-site-logo img,
.smart-header.is-compact .elementor-widget-image img,
.smart-header.elementor-sticky--effects .elementor-widget-image img,
.bgblauheader.is-compact .elementor-widget-theme-site-logo img,
.bgblauheader.elementor-sticky--effects .elementor-widget-theme-site-logo img,
.bgblauheader.is-compact .elementor-widget-image img,
.bgblauheader.elementor-sticky--effects .elementor-widget-image img {
  max-height: 60px !important;
}



/* ================================
   TAB-SET 1 – Wunschfarben Benutzer
   ================================ */

/* Grundzustand (nicht aktiv) */
.tab-set-1 .tab-trigger {
  background-color: #E78061 !important;
}
.tab-set-1 .tab-trigger * {
  color: #ffffff !important;    /* Text: weiß */
}

/* Aktiver TAB */
.tab-set-1 .tab-trigger.tab-trigger-active {
  background-color: #3A4F66 !important;
}
.tab-set-1 .tab-trigger.tab-trigger-active * {
  color: #E78061 !important;    /* Text: #E78061 */
}

/* Hover-Effekt nur wenn NICHT aktiv */
.tab-set-1 .tab-trigger:not(.tab-trigger-active):hover {
  background-color: #3A4F66 !important; /* optional: gleiche Farbe wie aktiv */
}
.tab-set-1 .tab-trigger:not(.tab-trigger-active):hover * {
  color: #E78061 !important;
}

/* ===============================
   TAB-SET 2 – ZWEITES FARBSCHEMA
   (hier Beispiel-Farben – einfach anpassen)
   =============================== */

/* Grundzustand: z.B. helles Blau */
.tab-set-2 .tab-trigger * {
  color: #F6B590 !important;          /* Grundfarbe inaktiv */
}

/* Aktiver Tab: z.B. Weiß */
.tab-set-2 .tab-trigger.tab-trigger-active * {
  color: #ffffff !important;          /* aktive Schriftfarbe */
}

/* Hover bei nicht aktivem Tab: z.B. etwas dunkleres Blau oder Weiß */
.tab-set-2 .tab-trigger:not(.tab-trigger-active):hover * {
  color: #ffffff !important;          /* Hover-Farbe */
}





/* ===================================== */
/*  GLOBALE VARIABLEN FÜR RESPONSIVE     */
/* ===================================== */

:root {
  /* Größe des großen Kreises:
     max. 900px, sonst knapp unter Bildschirmbreite */
  --circle-size: min(900px, 100vw - 2rem);
  --circle-radius: calc(var(--circle-size) / 2);
}

/* ===================================== */
/*  GLOBALE VARIABLEN (RESPONSIVE)       */
/* ===================================== */

:root {
  /* Größe des großen Kreises:
     max. 900px, sonst unter der Bildschirmbreite */
  --circle-size: min(900px, 100vw - 2rem);
  --circle-radius: calc(var(--circle-size) / 2);
}

/* ===================================== */
/*  GROßER KREIS & MITTLERER CONTENT     */
/* ===================================== */

.circle-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: var(--circle-size);
  padding: 2rem 0; /* etwas Luft auf kleineren Screens */
}

.circle-main {
  position: relative;
  width: var(--circle-size);
  height: var(--circle-size);
  border-radius: 50%;
  border: 1px solid #ffffff;
  background: transparent;
  overflow: visible; /* Kreise dürfen über die Linie hinausragen */
}

/* Mitte des großen Kreises – Content-Container übereinander */
.circle-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: min(80%, 520px); /* auf Mobil nicht zu breit */
  z-index: 1; /* unter den Kreisen */
}

/* alle Content-Container sind unsichtbar */
.circle-center .circle-content {
  display: none !important;
}

/* aktiver Content (Headline, Logo, Subheadline) */
.circle-center .circle-content.active {
  display: flex !important;
  flex-direction: column;
  align-items: center;
}


/* ===================================== */
/*  KLEINE KREISE                        */
/* ===================================== */

.circle-item {
  position: absolute;
  top: 50%;        /* Startpunkt: Mitte des großen Kreises */
  left: 50%;

  /* Größe passt sich dem Viewport an */
  width: clamp(48px, 9vw, 80px);
  height: clamp(48px, 9vw, 80px);

  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;

  /* Faktor in x- und y-Richtung relativ zum Radius */
  --tx: 0;
  --ty: 0;

  /* Start: Mitte, unsichtbar */
  transform: translate(-50%, -50%) translate(0, 0);
  opacity: 0;

  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
  background: #666;
  z-index: 2; /* über dem Text */
}

/* Grundfarben (inaktiv) – deine Farben */
.circle-1 { background: #FFC79B; }
.circle-2 { background: #FFC79B; }
.circle-3 { background: #FFC79B; }
.circle-4 { background: #FFC79B; }

/* ===================================== */
/*  POSITIONEN – FAKTOREN FÜR DEN RADIUS */
/*  Ursprünglicher Radius: 450px         */
/*  Faktor = alter_wert / 450            */
/* ===================================== */

/* Kreis 1 – ca. 9:30 Uhr (x: -434.6, y: -116.5) */
.circle-1 {
  --tx: -0.9658; /* -434.6 / 450 */
  --ty: -0.2589; /* -116.5 / 450 */
}

/* Kreis 2 – ca. 11:00 Uhr (x: -225, y: -389.7) */
.circle-2 {
  --tx: -0.5;    /* -225 / 450 */
  --ty: -0.866;  /* -389.7 / 450 */
}

/* Kreis 3 – ca. 13:00 Uhr (x: 225, y: -389.7) */
.circle-3 {
  --tx: 0.5;
  --ty: -0.866;
}

/* Kreis 4 – ca. 14:30 Uhr (x: 434.6, y: -116.5) */
.circle-4 {
  --tx: 0.9658;
  --ty: -0.2589;
}


/* ===================================== */
/*  ANIMATIONEN                          */
/* ===================================== */

/* Kreise bouncen von innen an die Linie, nie darüber hinaus */
.circle-main.circles-active .circle-item {
  animation: circle-bounce-in 1.4s ease-out forwards;
}

@keyframes circle-bounce-in {
  0% {
    /* Start: Mitte, unsichtbar */
    transform: translate(-50%, -50%) translate(0, 0);
    opacity: 0;
  }

  /* 0–20%: SCHNELL von der Mitte nach innen kurz vor die Linie */
  20% {
    transform: translate(-50%, -50%)
      translate(
        calc(var(--circle-radius) * var(--tx) * 0.85),
        calc(var(--circle-radius) * var(--ty) * 0.85)
      );
    opacity: 1;
  }

  /* 20–28%: kurzer Schlag auf die Linie (1. Aufprall) */
  28% {
    transform: translate(-50%, -50%)
      translate(
        calc(var(--circle-radius) * var(--tx)),
        calc(var(--circle-radius) * var(--ty))
      );
  }

  /* 28–55%: LANGSAMER Rücklauf nach innen (großer erster Bounce) */
  55% {
    transform: translate(-50%, -50%)
      translate(
        calc(var(--circle-radius) * var(--tx) * 0.90),
        calc(var(--circle-radius) * var(--ty) * 0.90)
      );
  }

  /* 55–70%: zurück an die Linie – Ende langsame Phase */
  70% {
    transform: translate(-50%, -50%)
      translate(
        calc(var(--circle-radius) * var(--tx)),
        calc(var(--circle-radius) * var(--ty))
      );
  }

  /* 70–82%: 2. Bounce – kleiner, schneller */
  82% {
    transform: translate(-50%, -50%)
      translate(
        calc(var(--circle-radius) * var(--tx) * 0.95),
        calc(var(--circle-radius) * var(--ty) * 0.95)
      );
  }

  /* 82–90%: schnell wieder an die Linie */
  90% {
    transform: translate(-50%, -50%)
      translate(
        calc(var(--circle-radius) * var(--tx)),
        calc(var(--circle-radius) * var(--ty))
      );
  }

  /* 90–96%: 3. Mini-Bounce – sehr klein & schnell */
  96% {
    transform: translate(-50%, -50%)
      translate(
        calc(var(--circle-radius) * var(--tx) * 0.975),
        calc(var(--circle-radius) * var(--ty) * 0.975)
      );
  }

  /* 96–100%: final an der Linie stehen bleiben */
  100% {
    transform: translate(-50%, -50%)
      translate(
        calc(var(--circle-radius) * var(--tx)),
        calc(var(--circle-radius) * var(--ty))
      );
    opacity: 1;
  }
}

/* Zeitverzögerung für das Hinausfliegen (Bounce) */
.circle-main.circles-active .circle-1 {
  animation-delay: 0s;
}

.circle-main.circles-active .circle-2 {
  animation-delay: 0.2s;
}

.circle-main.circles-active .circle-3 {
  animation-delay: 0.4s;
}

.circle-main.circles-active .circle-4 {
  animation-delay: 0.6s;
}


/* 2) PULSE – aktiver Kreis atmet mit ca. +15% Scale, OHNE Delay */
@keyframes circle-pulse {
  0%, 100% {
    transform: translate(-50%, -50%)
      translate(
        calc(var(--circle-radius) * var(--tx)),
        calc(var(--circle-radius) * var(--ty))
      )
      scale(1);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
  }
  50% {
    transform: translate(-50%, -50%)
      translate(
        calc(var(--circle-radius) * var(--tx)),
        calc(var(--circle-radius) * var(--ty))
      )
      scale(1.15);
    box-shadow: 0 12px 24px rgba(0,0,0,0.25);
  }
}

/* 3) AKTIVER KREIS – Pulse + Bounce */
.circle-main.circles-active .circle-item.active {
  animation: circle-bounce-in 1.2s ease-out forwards,
             circle-pulse 1.4s ease-in-out 0s infinite;
  opacity: 1;
  background: #BE634A;  /* aktive Farbe */
}

/* Hover-Effekt für nicht aktive Kreise (v. a. Desktop) */
.circle-item:not(.active):hover {
  filter: brightness(1.2);
  box-shadow: 0 8px 16px rgba(0,0,0,0./* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Prometo';
	font-style: normal;
	font-weight: 300;
	font-display: auto;
	src: url('https://galion.4kmanagement.de/wp-content/uploads/2025/11/Prometo-Light.woff2') format('woff2');
}
@font-face {
	font-family: 'Prometo';
	font-style: normal;
	font-weight: 500;
	font-display: auto;
	src: url('https://galion.4kmanagement.de/wp-content/uploads/2025/11/Prometo-Medium.woff2') format('woff2');
}
@font-face {
	font-family: 'Prometo';
	font-style: normal;
	font-weight: 100;
	font-display: auto;
	src: url('https://galion.4kmanagement.de/wp-content/uploads/2025/11/Prometo-Thin.woff2') format('woff2');
}
@font-face {
	font-family: 'Prometo';
	font-style: normal;
	font-weight: 800;
	font-display: auto;
	src: url('https://galion.4kmanagement.de/wp-content/uploads/2025/11/Prometo-XBoldItalic.woff2') format('woff2');
}
@font-face {
	font-family: 'Prometo';
	font-style: normal;
	font-weight: 600;
	font-display: auto;
	src: url('https://galion.4kmanagement.de/wp-content/uploads/2025/11/Prometo-Bold.woff2') format('woff2');
}
@font-face {
	font-family: 'Prometo';
	font-style: normal;
	font-weight: 700;
	font-display: auto;
	src: url('https://galion.4kmanagement.de/wp-content/uploads/2025/11/Prometo-Black.woff2') format('woff2');
}
@font-face {
	font-family: 'Prometo';
	font-style: normal;
	font-weight: 400;
	font-display: auto;
	src: url('https://galion.4kmanagement.de/wp-content/uploads/2025/11/Prometo.woff2') format('woff2');
}
/* End Custom Fonts CSS */