/* Z-Index definition der einzelnen Bereiche */
.leistungen-container{
    z-index: 3;
}

.ablaufueberschrift-container{
    z-index: 4;
}

.Ablauf-container{
    z-index: 4;
}

.cta-container{
    z-index: 2;
}

/* Text outline der Hero Section */
.hero-outline {
    text-shadow:
        -2px -2px 0 var(--e-global-color-secondary),
        2px -2px 0 var(--e-global-color-secondary),
        -2px 2px 0 var(--e-global-color-secondary),
        2px 2px 0 var(--e-global-color-secondary);
}

/* Leistunge Teil */
.sticky-titel-leistungen{
    position: sticky;
    top: 40%;
    z-index: 0;
}

.blur{
    backdrop-filter: blur(15px);
}

/* Call to Action bereich Animation */
.custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    width: 120px;
    height: 120px;
    font-family: 'Roboto', sans-serif;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    font-weight: bold;
    font-size: 15px;
    text-align: center;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.15s ease, opacity 0.15s ease;
    opacity: 0;
    z-index: 999;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.custom-cursor.active {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

:root {
  --circle-animation-speed: 0.5s; /* Geschwindigkeit der Kreis-Animation */
}

/* Von der Idee zu deinem Projekt-Teil */
.scroll-circle-container {
  position: relative;
  z-index: 3;
}

/* Von der Idee zu deinem Projekt-Teil dort wird ein Kreis beim scrollen gezeigt als animation*/
.scroll-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background-color:transparent; /*#CF8768CC oder  #86a1b5 (standard)*/
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.5s ease-out, height var(--circle-animation-speed) ease-out;
  z-index: 9998;
  pointer-events: none;
}

@keyframes openCircle {
  0% {
    width: 0;
    height: 0;
  }
  100% {
    width: 300vmin; /* Maximale Größe */
    height: 300vmin;
  }
}

@keyframes closeCircle {
  0% {
    width: 300vmin; /* Maximale Größe */
    height: 300vmin;
  }
  100% {
    width: 0;
    height: 0;
  }
}

/* Kontaktformular Name Textfeld */
.name-kontaktformular {
  width: 100%;
  height: 50px;
  padding-left: 25px; /* Platz für Text */
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.2;
  color: #1D1D1F;

  /* orange Streifen innen + weißer Hintergrund */
  background: 
    linear-gradient(to right, #E34F0E 10px, transparent 10px) no-repeat,
    #fff;
  background-origin: border-box;
  background-clip: padding-box;

  /* sanfter Übergang */
  transition: background 0.4s ease-in-out, border-color 0.3s ease;
}

/* Streifen ausblenden beim Fokus */
.name-kontaktformular:focus {
  background: #fff; /* Streifen wird sanft weiß überblendet */
  border-color: #E34F0E;
}

/* Streifen ausblenden, wenn Text im Feld steht */
.name-kontaktformular:not(:placeholder-shown) {
  background: #fff;
  border-color: #E34F0E;
}

/* Kontaktformular E-Mail Textfeld */
.email-kontaktformular {
  width: 100%;
  height: 50px;
  padding-left: 25px; /* Platz für Text */
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.2;
  color: #1D1D1F;

  /* orange Streifen innen + weißer Hintergrund */
  background: 
    linear-gradient(to right, #E34F0E 10px, transparent 10px) no-repeat,
    #fff;
  background-origin: border-box;
  background-clip: padding-box;

  /* sanfter Übergang */
  transition: background 0.4s ease-in-out, border-color 0.3s ease;
}

/* Streifen ausblenden beim Fokus */
.email-kontaktformular:focus {
  background: #fff; /* Streifen wird sanft weiß überblendet */
  border-color: #E34F0E;
}

/* Streifen ausblenden, wenn Text im Feld steht */
.email-kontaktformular:not(:placeholder-shown) {
  background: #fff;
  border-color: #E34F0E;
}

/* Kontaktformular Nachricht Textfeld */
.nachricht-kontaktformular {
  width: 100%;
  height: 200px;
  padding-left: 25px; /* Platz für Text */
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.2;
  color: #1D1D1F;

  /* orange Streifen innen + weißer Hintergrund */
  background: 
    linear-gradient(to right, #E34F0E 10px, transparent 10px) no-repeat,
    #fff;
  background-origin: border-box;
  background-clip: padding-box;
}

/* Streifen ausblenden beim Fokus */
.nachricht-kontaktformular:focus {
  background: #fff; /* Streifen wird sanft weiß überblendet */
  border-color: #E34F0E;
}

/* Streifen ausblenden, wenn Text im Feld steht */
.nachricht-kontaktformular:not(:placeholder-shown) {
  background: #fff;
  border-color: #E34F0E;
}

/* Anpassen der scrollbar */
::-webkit-scrollbar {
  width: 10px;              /* Breite der Scrollleiste */
}

::-webkit-scrollbar-track {
  background: #f1f1f1;      /* Hintergrund der Leiste */
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background-color: #E34F0E; /* Der eigentliche "Griff" */
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #c63f0b; /* Etwas dunkler beim Hover */
}

/* Für Firefox */
html {
  scrollbar-color: #E34F0E #f1f1f1; /* Grifffarbe | Hintergrundfarbe */
  scrollbar-width: auto;            /* „auto“ oder „thin“ */
}