/*
 Theme Name: Divi-Mastermind-Child-Theme
 Theme URI: https://www.divimastermind.com/
 Description: Dies ist ein <b>ready-to-start</b> Child-Theme f&uuml;r Divi. Entwickelt und bereitgestellt von den Divi Masterminds. Dieses Theme beinhaltet alle notwendigen Dateien, um den schnellen und einfach Start zu erm&ouml;glichen.
 Author: Divi Mastermind - Benny Hozjan und Frank Oschatz
 Author URI: https://divimastermind.com/
 Template: Divi
 Version: 1.0.0
 Tag: divi, child-theme, rawbone, easy-to-use, mastermind, german-group, 
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/


/*  ==================================================================
	STANDARD CSS =====================================================
	==================================================================  */

html { font-size: 16px; } /* Default root size */

h1 {
    font-size: clamp(2rem, -0.65rem + 5.5vi, 3.75rem);
    line-height: 1.4;
}

h2 {
    font-size: clamp(1rem, 0.1rem + 3vi, 2.5rem);
    line-height: 1.4;
}

h3 {
    font-size: clamp(1rem, 0.475rem + 1.75vi, 1.875rem);
    line-height: 1.4;
}

h4 {
    font-size: clamp(1rem, 0.663rem + 1.125vi, 1.563rem);
    line-height: 1.4;
}

h5 {
    font-size: clamp(1rem, 0.85rem + 0.5vi, 1.25rem);
    line-height: 1.4;
}

h6 {
    font-size: clamp(1rem, 0.925rem + 0.25vi, 1.125rem);
    line-height: 1.4;
}

p, body, a {
    font-size: clamp(1rem, 0.925rem + 0.25vi, 1.125rem);
    line-height: 1.4;
}







.reloop-icon:before {
  display: inline-flex;
  position: relative;
  transition: none;
}

.reloop-icon:hover:before  {
  animation: icon-reloop 0.8s ease forwards;
}

@keyframes icon-reloop {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  30% {
    transform: translateX(10px);
    opacity: 0;
  }
  31% {
    transform: translateX(-10px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}





.tooltip {
  position: relative;
  cursor: pointer;
  text-decoration: underline;
}

.tooltip .tooltiptext {
  visibility: hidden;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 5px 10px;
  position: absolute;
  z-index: 1;
  bottom: 125%; /* Position above the text */
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
  white-space: nowrap;

}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}







    .custom-cursor-follower {
        width: 600px;
        height: 600px;
        background-color: #5341d5;
        border-radius: 50%;
        position: fixed;
        transform: translate(-50%, -50%); 
        pointer-events: none;
        z-index: 9999;
        mix-blend-mode: normal;
        display: flex;
        justify-content: center;
        align-items: center;

        /* ----- WICHTIGE ÄNDERUNGEN ----- */
        opacity: 0; /* 1. Cursor standardmäßig ausblenden */
        transition: width 0.3s ease, 
                    height 0.3s ease, 
                    background-color 0.3s ease,
                    mix-blend-mode 0.3s ease,
                    opacity 0.3s ease; /* Übergang für Deckkraft hinzufügen */
    }
    
    /* Diese Klasse sorgt dafür, dass der Zeiger angezeigt wird. */
    .custom-cursor-follower.is-visible {
        opacity: 0.5;
        
         background: 
                radial-gradient(
                    circle at center,
                    rgba(83, 65, 213, 0.1) 0%,
                    rgba(83, 65, 213, 0.1) 30%,
                    rgba(83, 65, 213, 0.05) 50%,
                    rgba(83, 65, 213, 0) 70%
                );
    }

    /* -----  STANDARD-WACHSTUMSEFFEKT ----- */
    .custom-cursor-follower.grow {
        width: 80px;
        height: 80px;
        background-color: #FFFFFF;
        mix-blend-mode: difference;
    }

    /* ----- NEUER „VIEW“-EFFEKT ----- */
    .custom-cursor-follower.view-mode {
        width: 90px;
        height: 90px;
        background-color: rgba(0, 0, 0, 0.7);
        mix-blend-mode: normal !important;
    }
    
    /* Verwenden Sie das Pseudo-Element ::before, um das Wort „Anzeigen“ zu erstellen. */
    .custom-cursor-follower.view-mode::before {
        content: 'Anzeigen';
        color: white;
        font-family: sans-serif;
        font-size: 16px;
        font-weight: 600;
        opacity: 1;
        transition: opacity 0.3s ease;
    }
    
    /* Die Schaltfläche „Ansicht“ ausblenden, wenn sich das Programm nicht im Ansichtsmodus befindet */
     .custom-cursor-follower::before {
        opacity: 0;
        content: 'View';
    }


    @media (max-width: 1024px) {
        .custom-cursor-follower {
            display: none;
        }
    }
    
    
/****************Seiten Überblendung ***********/
/****************Seiten Überblendung ***********/
/****************Seiten Überblendung ***********/
    
 	html {
  background: #0b1419 !important;
}

/* Overlay für Übergangsanimationen */
.page-transition {
  position: fixed;
  inset: 0;
  background: #0b1419;
  z-index: 999999;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 500ms ease;
  will-change: opacity;
}

/* versteckt overlay */
.page-transition.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Inhalt einblenden ohne Transformation auf body */
body {
  opacity: 0;
  transition: opacity 500ms ease;
  will-change: opacity;
}

/* nach dem Laden der Seite*/
body.loaded {
  opacity: 1;
}

/* Fade-out nur Overlay, Body hat keine Transformation */
body.fade-out {
  /* Wir bewegen den Körper nicht. */
}  

/****************Seiten Überblendung ENDE ***********/
/****************Seiten Überblendung ENDE ***********/
/****************Seiten Überblendung ENDE ***********/