/*
Theme Name: alexanderczasny
Author: Alexander Czasny
Version: 1.0

*/
/* Include Font
-------------------------------------------------------------- */
    @font-face {
      font-family: 'Roboto';
      src: url('fonts/Roboto-Regular.ttf') format('truetype');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Roboto';
      src: url('fonts/Roboto-Bold.ttf') format('truetype');
      font-weight: 700;
      font-style: normal;
      font-display: swap;
    }
    /* Montserrat */
    @font-face {
      font-family: 'Montserrat';
      src: url('fonts/Montserrat-Regular.ttf') format('truetype');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Montserrat';
      src: url('fonts/Montserrat-Bold.ttf') format('truetype');
      font-weight: 700;
      font-style: normal;
      font-display: swap;
    }




    
:root {
  --color-lila: #331E4E;
  --color-orange: #E7441C;
  --color-violett: rgb(88,93,127);
  --color-flieder: rgb(128,127,155);
  --color-schwarz: rgb(0,0,0);
  --color-anthrazit: rgb(65,65,65);
  --color-mittelgrau: rgb(114,114,114);
  --color-grau: rgb(180,180,180);
  --color-hellgrau: rgb(236,236,236);
  --color-white: rgb(255, 255, 255);
	
  --color-apricot:     #FFD6A5;
  --color-pastel-olive: #D3E4CD;
  --color-mauve:        #E4C1F9;
  --color-taupe:        #FFF1E6;
  --color-coral:        #FFA69E;
  --color-smoky-blue:   #9CADCE;
  --color-dark-gray:    #3D3D3D;
  --color-white: #ffffff;

}

/* styles
-------------------------------------------------------------- */

body {
  color:  var(--color-dark-gray);
  font-family: 'Roboto', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}

.background-lila {
background-color: var(--color-lila);
    color: #fff;
    clip-path: polygon(0% 12%, 100% 0%, 100% 100%, 0% 90%);
    padding-bottom: 10rem !important;
    position: relative;
    padding-top: 10rem !important;
    z-index: 1;
    margin-block-end: -10rem;
}


.background-pastel-olive {
background-color: var(--color-pastel-olive);
    color: var(color-dark-gray);
    clip-path: polygon(0% 12%, 100% 0%, 100% 100%, 0% 95%);
    padding-bottom: 10rem !important;
    position: relative;
    padding-top: 15rem !important;
    z-index: 1;
    margin-block-end: -10rem;
}

#content {
	overflow:hidden;
}

.font-bold {
	font-weight:bold;
}

.background-orange {
  background-color: var(--color-orange);
  color:#fff;
}

.background-flieder {
  background-color: var(--color-flieder);
  color: #fff;
  clip-path: polygon(0% 10%, 100% 0%, 100% 100%, 0% 100%);
  padding-bottom: 10rem !important;
  padding-top: 15rem !important;
  z-index: 0;
  margin-block-start: 0rem;
}


.background-smoky-blue {
  background-color: var(--color-smoky-blue);
  color: var(--color-dark-gray);
  clip-path: polygon(0% 10%, 100% 0%, 100% 100%, 0% 100%);
  padding-bottom: 10rem !important;
  padding-top: 20rem !important;
  z-index: 0;
  margin-block-start: 0rem;
}

.gradient-text-olive-green {
    background: linear-gradient(90deg, #9CADCE, #D3E4CD);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
	
  background: linear-gradient(90deg, #9CADCE, #D3E4CD, #9CADCE);
    background-size: 200% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    animation: gradient-animation-olive 18s linear infinite;	
}


@keyframes gradient-animation-olive {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.navbar {
  left: 0;
  z-index: 2;
  position: fixed;
  top: 5rem;
	height:0;
}

.text-highlight {
  margin-top: 10rem;
  text-align: center;
  margin-bottom: 10rem;
  font-size: 2.5rem;
  line-height: 165%;
  color: var(--color-dark-grey);
}

.highlight_arrow {
    display: inline-block;

}

.smallname {
    position: fixed;
    left: 2rem;
    bottom: calc(50vh);
    font-size: 11px;
    transform: rotate(-90deg) translateY(100%);
    transform-origin: left bottom;
    white-space: nowrap;
    z-index: 2;
    color: rgba(33, 37, 41, 0.4) !important;
}

.left::after {
  position: absolute;
  width: 25px;
  background-color: var(--color-white);
  height: 5px;
  content: "";
  left: -35px;
   top: -10px;
}

.right::after {
  position: absolute;
  width: 25px;
  background-color: var(--color-white);
  height: 5px;
  content: "";
  right: -35px;
  top: -10px;
}



#uebermich {
  overflow-x: hidden;
}
/* Entferne die float-Animation */
#uebermich .row {
  transition: transform 0.2s ease-out; /* sanfte Bewegung beim Scrollen */
}

.hero-section {
    position: relative;
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5rem;
    
    /* Gradient als background-image, nicht background */
    background-image: linear-gradient(90deg, #9CADCE, #D3E4CD, #9CADCE);
    background-size: 200% auto;
    background-position: 0% center;

    animation: gradientFlow 18s linear infinite;
}

@keyframes gradientFlow {
    0% {
        background-position: 0% center;
    }
    80% {
        background-position: -200% center; /* Animation läuft */
    }
    100% {
        background-position: -200% center; /* Pause am Ende */
    }
}
.hero-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 7px;
    background: linear-gradient(90deg, #D3E4CD, #9CADCE, #D3E4CD);
    background-size: 200% auto;
    animation: gradientFlow 6s linear infinite;
}

@keyframes gradientFlow {
    0% {
        background-position: 0% center;
    }
    80% {
        background-position: -200% center;
    }
    100% {
        background-position: -200% center; /* bleibt stehen für Pause */
    }
}

/* Klasse, die die Linie auf volle Breite skaliert */
.hero-section.animate-border::after {
  transform: translateX(-50%) scaleX(1); /* Skaliert auf 100% */
}

    .hero-content {
      position: relative;
      z-index: 1;
      color: #f8f9fa;
    }




.highlight {
    position: relative;
    display: inline;
    font-weight: 600; /* fw-semibold */
    color: inherit; /* Textfarbe bleibt normal */
    
    /* Marker-Hintergrund vorbereiten */
    background-image: linear-gradient(
        to right,
        var(--color-pastel-olive) 0%,
        var(--color-pastel-olive) 100%
    );
    background-repeat: no-repeat;
    background-size: 0% 0.4em; /* Start: Marker nicht sichtbar */
    background-position: 0 85%; /* Unter dem Text */
    transition: background-size 2s ease-out;
}

.highlight.animate {
    background-size: 100% 0.4em;
    transition: background-size 2s ease-out 0.5s; /* 0.5s Verzögerung */
}

#mouse-coordinates {
  position: fixed;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 12px;
  border-radius: 4px;
  pointer-events: none; /* Maus geht durch */
  display: none; /* Erstmal verstecken */
  z-index: 9999;
}


    .btn-primary {
    background-color: var(--color-smoky-blue);
    border-color: var(--color-white);
		color: var(--color-dark-gray);
    }

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary.active,
    .show > .btn-primary.dropdown-toggle {
    background-color: var(--color-pastel-olive);
    border-color: var(--color-white);
		color: var(--color-dark-gray);
		
    }

    .btn-primary:disabled,
    .btn-primary.disabled {
    background-color: #331E4E;
    border-color: #331E4E;
    }    


 .btn-secondary {
  background-color: var(--color-pastel-olive);
  border-color: var(--color-pastel-olive);
	 color:var(--color-dark-gray);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary.active,
.show > .btn-secondary.dropdown-toggle {
  background-color: var(--color-smoky-blue); /* leicht dunkler Ton für Hover/Active */
  border-color: var(--color-white);
}

.btn-secondary:disabled,
.btn-secondary.disabled {
  background-color: #E7441C;
  border-color: #E7441C;
}

/* Weißer Rahmen */
.navbar-toggler {
    position: relative;
	width: 2rem;
    height: 2rem;
    /* margin-top: 1rem; */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

/* Linien */
.navbar-toggler-icon {
  background: none; /* Bootstrap-Icon deaktivieren */
  position: relative;
  width: 100%;
  height: 100%;
}
.menu-label {
  margin-left: 0.5em;
  font-size: 1rem;    /* Optional */
  color: #fff;     /
  user-select: none;  
  vertical-align: middle; /* Vertikale Ausrichtung zum Icon */
}


  /* Standard-Toggler-Icon: weiß */
  #menuToggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  }




/* Basis-Styling (optional) */
.navbar-toggler-icon {
  background: none;
  position: relative;
  width: 100%;
  height: 100%;
}


.navbar-toggler {
  border: none !important;
}

/* Obere Linie */
.navbar-toggler-icon::before {
  top: 0.4em;
}

/* Untere Linie */
.navbar-toggler-icon::after {
  top: 0.9em;
}

/* Animation wenn NICHT collapsed (=wenn offen) */
.navbar-toggler:not(.collapsed) .navbar-toggler-icon::before {
  transform: rotate(45deg);
  top: 0.65em;
}
.navbar-toggler:not(.collapsed) .navbar-toggler-icon::after {
  transform: rotate(-45deg);
  top: 0.65em;
}
#mainNavbar {
  transition: height 0.3s ease;
}
nav#mainNavbar {
  background-color: #331E4E;
}

header.position-fixed::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30%;
  height: 1px;
  background-color: white;
}

header.position-fixed.bg-active::after {
  display: none;
}

.ani_logo {
	width:80px;
	height:auto;
}

.ani_logo path {
  stroke-dasharray: 200; /* Länge des Pfades */
  stroke-dashoffset: 200;
  animation: draw 2s forwards;
}

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

.logo-header {
	position: relative;
    z-index: 1;
}

.logo-header img{
	width: 96px;
    height: auto;
    text-align: center;
}

header.bg-active {
  background-color: var(--color-violett);
  transition: background-color 0.6s ease;
}
header a {
  color: inherit;       
  text-decoration: none; 
}

#mainNavbar.bg-active {
	background-color: var(--color-violett);
}


header a:hover,
header a:focus {
  color: var(--color-smoky-blue);        
  text-decoration: none;
}

.nav-link {
        padding: 0.25rem 2rem 2rem 2rem;
        color: #fff;
  transition: all .2s ease-in;
      }

.nav-item > a:nth-child(1) {
    padding-top: 1rem;
}


.image-wrapper {
    position: relative;
    width: 100%;
    max-width: 400px;
    overflow: hidden;
}


.image-wrapper:hover img {
    transform: rotateY(0deg);

}


#floatingImage {
    position: relative;

}


.image-inner img {
    display: block;
    width: 100%;
    height: auto;
}

#floatingContainer {
	    transition: transform 0.6s ease;
    clip-path: polygon(
        0 5%,
        100% 0,
        100% 95%,
        0 100%
    );
transition: transform 2s ease;

}

.overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(156, 173, 206, 0.3), rgba(211, 228, 205, 0.3));
    pointer-events: none;
}

.nav-link:hover {
  color: var(--color-orange);
}


#mainNavbar {
	display: flex;
	justify-content: center;
	background-color: rgba(51, 30, 78, 1);
	padding: 1rem;
	border-radius: 0;
	width: 100vw;

	transform: translateX(-100%);
	opacity: 0;
	transition: transform 0.3s ease, opacity 0.3s ease;
	z-index: 1050;

	flex-direction: row;
	flex-wrap: nowrap;

	background: rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

	pointer-events: none; /* <- NEU: blockiert Interaktion im versteckten Zustand */
}

/* Wenn das Menü aktiv ist, soll es reinfahren und sichtbar + interaktiv sein */
#mainNavbar.show {
	transform: translateX(0);
	opacity: 1;
	pointer-events: auto; /* <- NEU: erlaubt Klicks bei sichtbarem Menü */
}

#mainNavbar.collapsing {
	height: auto !important;
	transition: none;
}


.close-menu {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--color-pastel-olive);
    color: #fff;
    border: none;
    font-size: 24px;
    font-weight: bold;
    line-height: 40px;
    cursor: pointer;
    display: flex; 
	align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    user-select: none;
}

.navbar-nav {
	display: flex;
    flex-direction: row;
}

.navbar-nav {
	list-style-type:none;
}

.navbar-nav li a {
    padding-left: 4rem;
    color: #fff;
    transition: all .2s ease-in;	
	display:inline-block;
	text-decoration:none;
	font-size:1.3rem;
}

.navbar-nav li a:hover {
	color: var(--color-pastel-olive);
}


.navbar-toggler:focus {
  box-shadow: none;
}

.owl-carousel .owl-stage {
    display: flex;
    align-items: center;
}

.owl-carousel .item {
    display: flex;
    justify-content: center;
}

.kunden_wrapper {
  margin-top: 5rem;
  margin-bottom: 5rem;
}

.kunden_image {
  filter: grayscale(1);
  width: 60% !important;
  transition: all .4s ease-in;
}

.kunden_image:hover {
  filter: none;
}
.schnellkontakt_column svg {
	fill: var(--color-pastel-olive);
}

.text-pastel-olive {
	color: var(--color-pastel-olive);
}



#leistungen .leistung {
  position: relative;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

#leistungen h2 {
	margin:0;
	padding:0
}


#leistungen .leistung:nth-of-type(even) {
	padding-top:7rem;
	padding-bottom:7rem;
}

#leistungen .leistung:nth-of-type(even)::before {
  content: "";
  position: absolute;
  inset: 0;                  /* top, right, bottom, left = 0 */
  width: 100vw;              /* volle Viewport-Breite */
  left: 50%;                 /* mittig ausrichten */
  transform: translateX(-50%);
  background-color: var(--color-pastel-olive);
  clip-path: polygon(0% 12%, 100% 0%, 100% 100%, 0% 100%);
  z-index: -1;               /* Hintergrund hinter den Inhalt */
}


#leistungen .leistung:nth-child(even) .row {
  flex-direction: row-reverse;
}

#leistungen .leistung:nth-child(even) .col-md-7 {
  margin-left: 0;       /* offset entfernen */
  margin-right: 8.333%; /* Offset nach rechts */
}




@keyframes fadeSlideUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


.service-list li h3 {
    display: inline-block !important; /* überschreibt Bootstrap */
    font-weight: bold;
    margin-bottom: 0.5rem;
    opacity: 0;
    animation: fadeSlideUp 0.6s forwards;
}

/* nacheinander auflisten */
.service-list li:nth-child(1) h3 { animation-delay: 0.2s; }
.service-list li:nth-child(2) h3 { animation-delay: 0.4s; }
.service-list li:nth-child(3) h3 { animation-delay: 0.6s; }
.service-list li:nth-child(4) h3 { animation-delay: 0.8s; }
.service-list li:nth-child(5) h3 { animation-delay: 1s; }
.service-list li:nth-child(6) h3 { animation-delay: 1.2s; }

footer {
	background-color: var(--color-pastel-olive);
	color: var(--color-dark-gray);
	clip-path:polygon(0% 12%, 100% 0%, 100% 100%, 0% 100%);
	padding-top:10rem;
}
footer a {
	color: var(--color-dark-gray);
}

footer a:hover {
	color: var(--color-smoky-blue);
}


.pb-10 {
	padding-bottom:10rem !important;
}

@media screen and (max-width:992px) {

  body {
    overflow-x: hidden;
  }

  header {
        flex-direction: column !important
  }

  .hero-section {
        height: 100vh !important
   }

  .nav-inner {
      flex-direction: column-reverse;
  }

    .schnellkontakt {
      font-size: 0.8rem;
    }


  .schnellkontakt_column {
    display: flex;
    align-items: center;
    gap: 0.25em;
  }


  .reverse {
    flex-direction: column-reverse;
  }
    
  .background-lila {
    clip-path: polygon(0% 2%, 100% 0%, 100% 100%, 0% 92%);
  }
  
  .background-flieder {
    clip-path:polygon(0% 0%, 100% 2%, 100% 92%, 0% 100%)
  }

	#mainNavbar.show {
		    width: 100vw;
    height: 100vh;
	}
	
  #mainNavbar {
	flex-direction: column;
	justify-content: flex-start;
	padding-top:9rem;
	top: 0;
    position: fixed;
	background-color:rgba(211,228,205, 0.8);
  }
	
	.navbar-toggler {
		display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
		top:0.5em;
	}
	
	.navbar-nav {
	flex-direction: column;	
		gap:5rem;
		text-align: center;
	}
	.close-menu {
	top: 0;
	}
	
	.bg-active .navbar-nav li a { 
		color: var(--color-white);
	}
	
	.navbar-nav li a {
		padding:0;
		color:var(--color-dark-gray);
	}
	
	.left::after,
	.right::after{
		display:none
	}
	.hero-overlay {
		background-size: unset;
	}
	
	.image-wrapper {
	perspective: unset;
    display: inline-block;
}

 .image-wrapper img {
	display: block;
    transform: none;
    transform-origin: left center;
    transition: transform 0.5s ease;
	}

	.image-wrapper:hover img {
		transform: rotateY(0deg);

	}

	#floatingImage.active {
		transform: rotateY(0);
	}
	
	.smallname {
		display:none;
	}


		.logo-header img {
		width: 50px;
		height: auto;
		text-align: center;
	}
	header.position-fixed::after {
		display:none;
	}
	
	.background-pastel-olive {
		clip-path:polygon(0% 2%, 100% 0%, 100% 100%, 0% 95%);
		padding-top:10rem;
	}


}