/*
 Theme Name:   YOOtheme Child
 Template:     yootheme
 Author:       webfactor
 Description:  YOOtheme Child Theme
 Version:      1.0.0
 Text Domain:  webfactor yootheme
*/


/*------- Allgemein --------*/
.big-text {font-size:22px;}


/*Background secondary Verlauf*/
.uk-section-secondary {
    background: linear-gradient(45deg, #601e80 0%, #00a49d 100%);
}

/*=================================Navbar================================*/
/* Sticky-Zustand: weißer Hintergrund + dunkles Logo */
.tm-header .uk-navbar-container.uk-navbar-sticky {
  background-color: #fff;
  border-bottom: 1px solid rgba(0,0,0,.08);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Sticky: dunkles Logo*/
.tm-header .uk-navbar-container.uk-navbar-sticky .uk-logo img {
  content: url('/wp-content/uploads/2025/11/webfactor-Logo-lok-prinzip-lila-verlauf-black.png');
  height: 46px;
  width:auto;
  transition: height 0.3s ease;
}

/* Sticky: Navigationspunkte schwarz*/
.tm-header .uk-navbar-container.uk-navbar-sticky .uk-navbar-nav > li > a {
  color: #111111;
}

/*Linie sticky in wf-verlauf*/
.tm-header .uk-navbar-container.uk-navbar-sticky .uk-navbar-nav > li > a:hover,
.tm-header .uk-navbar-container.uk-navbar-sticky .uk-navbar-nav > li.uk-active > a {
  background-color: #fff;
  border-bottom: none;
  background-image: linear-gradient(
    to right,
    rgba(96, 30, 128, 0.8),
    rgba(0, 164, 157, 0.8)
  );
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% 2px; /* 2px Höhe = klar sichtbar, aber elegant */
  transition: background-size 0.2s ease, background-image 0.2s ease;
}
/* Sticky: lila Button mit weißer Schrift */
.tm-header .uk-navbar-container.uk-navbar-sticky .uk-navbar-right .uk-button,
.tm-header .uk-navbar-container.uk-navbar-sticky .uk-navbar-right .contact-cta {
  background-color: #601e80;
  color: #ffffff;
  border-color: #601e80;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* Sticky Hover */
.tm-header .uk-navbar-container.uk-navbar-sticky .uk-navbar-right .uk-button:hover,
.tm-header .uk-navbar-container.uk-navbar-sticky .uk-navbar-right .contact-cta:hover {
  background-color: #51196b;
  border-color: #51196b;
  color: #ffffff;
}

/* Designelemente*/

/*Divider*/
.divider-verlauf {
    border: 2px solid;
    /*border-image: linear-gradient(45deg, transparent 0%, #601e80 10%, #00a49d 90%, transparent) 0.8;*/
  border-style: solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(
    90deg,
    rgba(0,0,0,0) 0%,
    #601e80 15%,
    #00a49d 85%,
    rgba(0,0,0,0) 100%
  );
}

.divider-width {
    width: 30%;
}

/* =================================Leistungsseiten================================= */
.feature-list {
    padding: 0 3rem;
}
ul.feature-list li div div svg {
    margin-right: 1.7rem;
	margin-left:0.9rem;
}

.leistungen-grid .el-meta {
    margin-top: -50px !important;
    background: white;
    margin: 7rem;
}

.leistungen-grid-4 .el-meta {
    margin-top: -50px !important;
    background: white;
    margin: 2rem;
}

.leistungen-grid-3 .el-meta {
    margin-top: -50px !important;
    background: white;
    margin: 3rem;
}

@media (max-width: 960px) {
	.leistungen-titel {
     margin-top: 2rem;
	}
	.leistungen-img img.el-image {
    	max-width: 60%;
    	margin-bottom: 2rem;
	}
	
	.feature-card .uk-card-default {
    	padding: 2rem 0.3rem;
	}
	.feature-list {
    	padding: 0 0rem;
	}
	ul.feature-list li div div svg {
    	margin-right: 0.1rem;
		margin-left:0.1rem;
	}
	
	.leistungen-grid .el-meta {
    	margin: 4rem;
	}

	.leistungen-grid .uk-first-column .el-item:not(.first-item), .leistungen-grid-4 .uk-first-column .el-item:not(.first-item), .leistungen-grid-3 .uk-first-column .el-item:not(.first-item) {
  		margin-bottom: 2rem;
	}
	.button-break .el-content {
    	line-height: 1.1rem;
    	padding: 1.4rem;
	}
}
/* =================================Kontakt RWD ================================= */


/*=================================Footer RWD ================================*/
@media (max-width: 960px) {
	.footer-bg .uk-background-norepeat.uk-background-bottom-left.uk-section.uk-flex.uk-flex-middle {
    	min-height: 140px;
    	background-size: auto 140px !important;
	}
	h2.footer-titel.uk-margin-xlarge {
        margin-bottom: 1rem;
        padding: 0px 1rem;
    }
	hr.hr-center.uk-margin.uk-margin-remove-top  {
    	width: 60%;
	}
}

/*------- Effekte --------*/

/*------Tile Default mit Pixeln oben links -----*/
.uk-tile-default {
  position: relative;
  overflow: visible;
}

/* Erste Gruppe Quadrate */
.uk-tile-default::before {
  content: "";
  position: absolute;
  top: -20px;
  left: -30px;
  width: 10px;
  height: 10px;
  background: rgba(255,255,255,0.6);
  box-shadow:
    -20px -12px rgba(255,255,255,0.6),
    -48px -32px rgba(255,255,255,0.6),
    -78px -8px rgba(255,255,255,0.6),
    -115px -44px rgba(255,255,255,0.6),
    -150px -18px rgba(255,255,255,0.6),
    -185px -52px rgba(255,255,255,0.6),
    -225px -26px rgba(255,255,255,0.6);
  transform: rotate(6deg);
}

/* Zweite Gruppe Quadrate */
.uk-tile-default::after {
  content: "";
  position: absolute;
  top: -35px;
  left: -15px;
  width: 10px;
  height: 10px;
  background: rgba(255,255,255,0.6);
  box-shadow:
    -32px -20px rgba(255,255,255,0.6),
    -62px -40px rgba(255,255,255,0.6),
    -92px -14px rgba(255,255,255,0.6),
    -130px -50px rgba(255,255,255,0.6),
    -168px -28px rgba(255,255,255,0.6),
    -210px -58px rgba(255,255,255,0.6);
  transform: rotate(-9deg);
}
/* sanftes Schweben für das ::before-Layer */
.uk-tile-default::before {
  animation: floatBefore 6s ease-in-out infinite alternate;
}

/* sanftes Schweben für das ::after-Layer */
.uk-tile-default::after {
  animation: floatAfter 7s ease-in-out infinite alternate;
}

/* Keyframes: kleines Driften nach oben links */
@keyframes floatBefore {
  0%   { transform: translate(0, 0) rotate(6deg); }
  100% { transform: translate(-10px, -15px) rotate(12deg); }
}

@keyframes floatAfter {
  0%   { transform: translate(0, 0) rotate(-9deg); }
  100% { transform: translate(-12px, -18px) rotate(-15deg); }
}


/*------Tile Default mit Pixeln oben links -----*/
.pixel.uk-card-secondary.uk-card-body {
  position: relative;
  overflow: visible;
}

/* Erste Gruppe Quadrate */
.pixel.uk-card-secondary.uk-card-body::before {
  content: "";
  position: absolute;
  bottom: 21px;
  right: -60px;
  width: 10px;
  height: 10px;
  background: rgba(255,255,255,0.6);
  box-shadow:
    -20px -12px rgba(255,255,255,0.6),
    -48px -32px rgba(255,255,255,0.6),
    -78px -8px rgba(255,255,255,0.6),
    -115px -44px rgba(255,255,255,0.6),
    -150px -18px rgba(255,255,255,0.6),
    -185px -52px rgba(255,255,255,0.6),
    -225px -26px rgba(255,255,255,0.6);
  transform: rotate(6deg);
}

/* Zweite Gruppe Quadrate */
.pixel.uk-card-secondary.uk-card-body::after {
  content: "";
  position: absolute;
  top: 5px;
  left: -15px;
  width: 10px;
  height: 10px;
  background: rgba(255,255,255,0.6);
  box-shadow:
    -32px -20px rgba(255,255,255,0.6),
    -62px -40px rgba(255,255,255,0.6),
    -92px -14px rgba(255,255,255,0.6),
    -130px -50px rgba(255,255,255,0.6),
    -168px -28px rgba(255,255,255,0.6),
    -210px -58px rgba(255,255,255,0.6);
  transform: rotate(-9deg);
}
/* sanftes Schweben für das ::before-Layer */
.pixel.uk-card-secondary.uk-card-body::before {
  animation: floatBefore 6s ease-in-out infinite alternate;
}

/* sanftes Schweben für das ::after-Layer */
.pixel.uk-card-secondary.uk-card-body::after {
  animation: floatAfter 7s ease-in-out infinite alternate;
}

/* Keyframes: kleines Driften nach oben links */
@keyframes floatBefore {
  0%   { transform: translate(0, 0) rotate(6deg); }
  100% { transform: translate(-10px, -15px) rotate(12deg); }
}

@keyframes floatAfter {
  0%   { transform: translate(0, 0) rotate(-9deg); }
  100% { transform: translate(-12px, -18px) rotate(-15deg); }
}