.hero {
  height: 100vh;
  width: 100%; /* das ist eigentlich nicht nötig, da durch container-fluid schon width 100% ist */
  background-image: url("./images/images_normal/hero_image_bearbeitet.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  /* für parallax-effekt */
  background-attachment: fixed;
}

/* Spezielle Korrektur für Touch-Geräte/iOS; Dieser Befehl erkennt Geräte mit "ungerauer" Eingabe – also fast alle Smartphones und Tablets (Touchscreens). Auf diesen Geräten wird background-attachment auf scroll zurückgesetzt. */
@media (pointer: coarse) {
  .hero {
    /* Hebt den Parallax-Effekt auf, damit das Bild auf dem iPhone scharf ist */
    background-attachment: scroll;
  }
}

/* notwendig für font */
/* latin */
@font-face {
  font-family: "Permanent Marker";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Fh4uPib9Iyv2ucM6pGQMWimMp004La2Cfw.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

.zitatbackground {
  background-image: linear-gradient(
    350deg,
    rgba(34, 215, 24, 1) 0%,
    rgba(255, 255, 255, 1) 60%
  );
}

/* Effekt für bewegenden Pfeil */
@keyframes obenuntenbewegen {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(20px);
  }
}
.bewegenderPfeil {
  animation-name: obenuntenbewegen;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: 2.8s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: none;
}

/* das ist sehr wichtig, da aufgrund der slide-left und slide-right-klassen side-scrolling entstehen würde */
section {
  overflow-x: hidden;
}

.zitatbackground2 {
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-image: url("./images/images_normal/zitatbackground_mobile.svg");
}

/* gilt ab breakpoint lg; die anderen eigenschaften sind weiterhin aktiv */
@media (min-width: 992px) {
  .zitatbackground2 {
    background-image: url("./images/images_normal/zitatbackground.svg");
  }
}

/* für zoom-wrapper-effekt */
.zoom-wrapper {
  overflow: hidden;
}
/* wie es gelesen wird: Das Bild innerhalb eines Carousel-Items, das in einem Zoom-Wrapper liegt */
.zoom-wrapper .carousel-item img {
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
/* wie es gelesen wird: Sobald der Mauszeiger über dem Element mit der Klasse zoom-wrapper schwebt, dann suche innerhalb dieses gehoverten Wrappers nach einem Element mit der Klasse carousel-item und nimm dort das Bild (img) und wende die folgenden CSS-Regeln darauf an.*/
.zoom-wrapper:hover .carousel-item img {
  transform: scale(1.1);
}
/* Suche alle Bilder (img), die sich innerhalb eines Elements mit der Klasse .zoom-wrapper befinden und wende diese Regel an: Wenn sich eine Eigenschaft ändert (z. B. durch :hover), dann springe nicht sofort zum Zielwert, sondern nimm dir Zeit für den Übergang */
.zoom-wrapper img {
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.zoom-wrapper img:hover {
  transform: scale(1.05); /* Zoom direkt auf das Bild */
}

.leistungsportfoliobackground {
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-image: url("./images/images_normal/leistungsportfoliobackground.svg");
}

/* Versteckt die Füllung und die Linien, bevor die Animation startet */
#ueberschrift {
  fill: transparent;
}
#ueberschrift path {
  stroke: transparent !important;
}

.start-animation-svg #ueberschrift path {
  /* Wenn die Animation startet, muss die Linie wieder sichtbar werden */
  stroke: black !important;
}

/* wie die regel zu verstehen ist: Wende dieses Design nur auf #ueberschrift an, wenn es sich irgendwo innerhalb eines Elements befindet, das die Klasse .start-animation hat. */
.start-animation-svg #ueberschrift {
  animation: ueberschriftausfuellen 1.5s ease forwards 2.8s;
}

.start-animation-svg #ueberschrift path:nth-child(1) {
  stroke-dasharray: 474;
  stroke-dashoffset: 474;
  animation: ueberschriftanimation 2s ease forwards 1.2s;
}

.start-animation-svg #ueberschrift path:nth-child(2) {
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  animation: ueberschriftanimation 2s ease forwards 1.2s;
}

.start-animation-svg #ueberschrift path:nth-child(3) {
  stroke-dasharray: 465;
  stroke-dashoffset: 465;
  animation: ueberschriftanimation 2s ease forwards 0s;
}

.start-animation-svg #ueberschrift path:nth-child(4) {
  stroke-dasharray: 474;
  stroke-dashoffset: 474;
  animation: ueberschriftanimation 2s ease forwards 0.7s;
}

.start-animation-svg #ueberschrift path:nth-child(5) {
  stroke-dasharray: 421;
  stroke-dashoffset: 421;
  animation: ueberschriftanimation 2s ease forwards 0.5s;
}

.start-animation-svg #ueberschrift path:nth-child(6) {
  stroke-dasharray: 441;
  stroke-dashoffset: 441;
  animation: ueberschriftanimation 2s ease forwards 0.3s;
}

.start-animation-svg #ueberschrift path:nth-child(7) {
  stroke-dasharray: 435;
  stroke-dashoffset: 435;
  animation: ueberschriftanimation 2s ease forwards 0.2s;
}

.start-animation-svg #ueberschrift path:nth-child(8) {
  stroke-dasharray: 394;
  stroke-dashoffset: 394;
  animation: ueberschriftanimation 2s ease forwards 0.2s;
}

.start-animation-svg #ueberschrift path:nth-child(9) {
  stroke-dasharray: 296;
  stroke-dashoffset: 296;
  animation: ueberschriftanimation 2s ease forwards 0.2s;
}

.start-animation-svg #ueberschrift path:nth-child(10) {
  stroke-dasharray: 345;
  stroke-dashoffset: 345;
  animation: ueberschriftanimation 2s ease forwards 0.2s;
}

.start-animation-svg #ueberschrift path:nth-child(11) {
  stroke-dasharray: 460;
  stroke-dashoffset: 460;
  animation: ueberschriftanimation 2s ease forwards 0.2s;
}

.start-animation-svg #ueberschrift path:nth-child(12) {
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  animation: ueberschriftanimation 2s ease forwards 0.1s;
}

.start-animation-svg #ueberschrift path:nth-child(13) {
  stroke-dasharray: 296;
  stroke-dashoffset: 296;
  animation: ueberschriftanimation 2s ease forwards 0.1s;
}

.start-animation-svg #ueberschrift path:nth-child(14) {
  stroke-dasharray: 394;
  stroke-dashoffset: 394;
  animation: ueberschriftanimation 2s ease forwards 0s;
}

.start-animation-svg #ueberschrift path:nth-child(15) {
  stroke-dasharray: 441;
  stroke-dashoffset: 441;
  animation: ueberschriftanimation 2s ease forwards 0s;
}

@keyframes ueberschriftanimation {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes ueberschriftausfuellen {
  to {
    fill: white;
  }
}

.eigener-cursor-groß {
  font-size: 3.3rem;
  color: #397348;
  width: 3px;
  animation: blinkingcursor 0.5s step-end infinite alternate;
}

.eigener-cursor-klein {
  font-size: 2rem;
  color: #397348;
  width: 2px;
  animation: blinkingcursor 0.5s step-end infinite alternate;
}

@keyframes blinkingcursor {
  50% {
    color: transparent;
  }
}

.hidden {
  opacity: 0;
  transition: all 2s;
}

@media (prefers-reduced-motion) {
  .hidden {
    transition: none; /* Stoppt Animation UND Delay sofort */
  }
}

.show {
  opacity: 1;
}

.hero-hidden {
  opacity: 0;
  transition: opacity 2s ease;
  transition-delay: 2.8s; /* Hier greift jetzt dein gewünschtes Delay! */
}

.start-animation-svg .hero-hidden {
  opacity: 1;
}

.delay-beginn-2 {
  transition-delay: 1s;
}

.highlight-container {
  position: relative;
  z-index: 1;
}

.highlight-effekt {
  position: absolute;
  background: #397348;
  height: 100%;
  z-index: -1;
  /* für den Marker-Look */
  /* Der "unordentliche" Look durch ungleichmäßige Ecken */
  border-top-left-radius: 255px 15px;
  border-top-right-radius: 15px 225px;
  border-bottom-right-radius: 225px 15px;
  border-bottom-left-radius: 15px 255px;

  /* Startzustand */
  width: 0;

  /* Folgende Transition ist eigentlich nicht notwendig, da die Klasse .hidden bereits transition all hat*/
  transition: width 1.5s ease-out;
}

/* Wende diese CSS-Regeln nur dann auf ein Element an, wenn es sowohl die Klasse highlight-effekt als auch die Klasse show gleichzeitig besitzt.“ */
.highlight-effekt.show {
  width: 105%; /* Etwas breiter als das Wort für den Marker-Look */
}

.slide-left {
  transform: translateX(-100px);
  /* hier muss all stehen, denn diese transition-anweisung die komplette transition-anweisung von der .hidden-klasse überschreibt*/
  transition: all 1s ease;
}

.slide-left.show {
  transform: translateX(0);
}

.slide-right {
  transform: translateX(+100px);
  transition: all 1s ease;
}

.slide-right.show {
  transform: translateX(0);
}

/* die folgenden zwei css-Klassen sind für die Leistungsportfolio-Buttons zuständig; die transform-Eigenschaft ist notwendig für zoom-wrapper-effekt*/
#imgLeistungsportfolioRow {
  transition:
    opacity 0.5s ease-in-out,
    transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  opacity: 1;
}

/* Diese Klasse nutzen wir für den Moment des Bildwechsels; Eine ID PLUS eine Klasse ist stärker/hat mehr Punkte als nur eine ID, deswegen ist !important nicht notwendig; Wie die Klasse zu verstehen ist: Wende diese Regeln nur an, wenn ein Element die ID imgLeistungsportfolioRow besitzt UND gleichzeitig die Klasse fade-out-leistungsportfolio hat.*/
#imgLeistungsportfolioRow.fade-out-leistungsportfolio {
  opacity: 0;
}

/* diese Klassen sind für die Delays der einzelnen Attribute */
/* wie es zu verstehen ist: Suche innerhalb der Sektion eigenschaften-delays nach dem ersten/zweiten/dritten Kind (Ignoriere Enkelkinder oder tiefere Verschachtelungen.) */
.eigenschaften-delays > div:nth-child(1) {
  transition-delay: 200ms;
}

/* Die zweite Spalte (Mitte) */
.eigenschaften-delays > div:nth-child(3) {
  transition-delay: 400ms;
}

/* Die dritte Spalte (Rechts) */
.eigenschaften-delays > div:nth-child(5) {
  transition-delay: 600ms;
}