:root {
	--primary: #55bf21;
	--secondary: #ff6500;
}

@font-face {
    font-family: 'Outfit';
    src: url('/wp-content/themes/gs/assets/fonts/Outfit-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: transparent;
}
body {
    font-family: "Outfit", sans-serif;
    font-weight: 300;
    color: #333;
    line-height: 1.6;
    font-size: 1.125rem;
    word-wrap: break-word;
}
section {
    overflow: hidden;
}
.pointer:hover {
    cursor: pointer;
}
.slide-in-left, .slide-in-right {
    opacity: 0;
    transition: transform .5s ease-out, opacity .5s ease-out;
}
.slide-in-left {
    transform: translateX(-100%);
}
.slide-in-left.visible, .slide-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}
.slide-in-right {
    transform: translateX(100%);
}
@media (max-width:1024px) {
    .slide-in-left, .slide-in-right {
    transition: none;
    transform: none;
}
}

.sticky-nav {
	position: sticky;
	top: 0;
	z-index: 9999;
	animation-name: nav-scroll;
	animation-duration: .5s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.sticky-nav .navbar {
	background-color: rgba(248, 249, 250, 0.97) !important;
}
@keyframes nav-scroll {
	0% {top: -96px;}
	100% {top: 0;}
}

a {
    text-decoration: none;
	color: var(--primary);
}
a:hover {
    color: #ff6500;
}

.custom-text-primary {
	color: var(--primary);
}
.custom-text-grey {
    color: #444;
}
.custom-text-green {
    color: #55bf21;
}
.custom-text-orange {
    color: #ff6500;
}
.custom-fs-0875 {
    font-size: .875rem!important;
}
.custom-fs-1 {
    font-size: 1rem!important;
}
.custom-fs-1125 {
    font-size: 1.25rem!important;
}
.custom-fs-15 {
    font-size: 1.5rem!important;
}
.custom-fs-2 {
    font-size: 2rem!important;
}
.custom-fs-3 {
    font-size: 3rem!important;
}
.custom-fs-5 {
	font-size: 5rem!important;
}
.fs-24, .h4, h4 {
    font-size: 1.5rem;
}
.custom-lh-1 {
    line-height: 1!important;
}
.custom-lh-15 {
    line-height: 1.5!important;
}
.h1, .h2, .h3, .h4, .h5, h1, h2, h3, h4, h5 {
    line-height: 1.4;
    hyphens: auto;
}
.h1, h1 {
    font-size: 2.625rem;
}
.h2, h2 {
    font-size: 2rem;
}
.h3, h3 {
    font-size: 2.25rem;
}
h5 {
	font-size: 1.3rem;
}
.custom-lead {
    font-size: 1.5rem;
    color: #444;
}
@media (max-width:1200px) {
    .h1, h1 {
    font-size: 2.5rem;
}
.h2, h2 {
    font-size: 1.5rem;
}
.h3, h3 {
    font-size: 2rem;
}
h4 {
    font-size: 1.125rem;
}
.custom-lead {
    font-size: 1.25rem;
}
}#benefits, .custom-mt--60 {
    margin-top: -60px;
}
.custom-headline {
    padding: 80px 0;
}
.custom-my-80 {
    margin: 80px 0;
}
.custom-py-60 {
    padding: 60px 0;
}
@media (max-width:991.98px) {
    #top {
    font-size: 1rem;
}
}.custom-bg-grey {
    background-color: #f5f7fa;
}
.custom-bg-green {
    background-color: #082e17;
}
.custom-bg-dark-green {
    background-color: #041c0d;
}
.custom-bg-light-green {
    background-color: #55bf21;
}
.custom-btn {
	line-height:1.4!important;
    text-align: center!important;
    display: block!important;
    font-size: 24px!important;
    font-weight: 700;
    padding: 14px 24px!important;
	border-width: 1px!important;
	border-style: solid!important;
    border-radius: 5px!important;
    transition: .15s ease-in!important;
	height:auto!important;
	color: #fff;
}

.nav-btn > a {
    font-weight: inherit!important;
    font-size: inherit!important;
    padding: 6px 10px !important;
    line-height:1.4!important;
    text-align: center!important;
    display: block!important;
    border-width: 1px!important;
    border-style: solid!important;
    border-radius: 5px!important;
    transition: .15s ease-in!important;
    height:auto!important;
    color: #fff;
    background-color: #ff6500!important;
    border-color: #ff6500!important;
}

.nav-btn:hover > a {
    color: #ff6500;
    background-color: #fff!important;
    border-color: #ff6500!important;
}

.custom-btn-primary {
    background-color: #ff6500!important;
	border-color: #ff6500!important;
    box-shadow: 0 1px 10px rgba(255,101,0,.45);
}
.custom-btn-primary:hover, 
.custom-btn-transparent:hover {
    background-color: white!important;
    color: #ff6500!important;
}
.custom-btn-primary-sm {
	font-size: 1rem !important;
	font-weight: normal;
    background-color: #ff6500;
	border-color: #ff6500;
	color: #fff;
	width: fit-content;
	padding: 10px 32px !important;
}
.custom-btn-primary-sm:hover {
	background-color: #fff;
	color: #ff6500;
}
.custom-btn-transparent {
    background-color: rgba(255, 255, 255, .45);
}
.custom-btn-white {
    background-color: #fff!important;
    color: #ff6500;
    opacity: .9;
}
.custom-btn-white:hover {
    color: #fff!important;
    background-color: #ff6500!important;
    opacity: 1;
}
.custom-btn-outline-primary{
    color: #ff6500;
    background-color: #fff;
    border-color: #FF6500;
}
.custom-btn-outline-primary:hover{
    color: #fff;
    background-color: #FF6500;
    border-color: #FF6500;
}
/*  HEADER */

#menu-main-menu > li {
    padding-right: 5px;
}
#menu-main-menu > li:last-child {
    padding-right: 0;
}


header a, header p {
    font-size: 18px;
    padding: 5px 0;
}

.nav-logo {
	max-width: 25%;
	float: inline-end;
}

.nav-link{
    color: #222;
}

.nav-link:hover {
	color: #55bf21;
}
.current_page_item a {
	font-weight: 500;
	color: #000;
}
.nav-link.dropdown-toggle.show {
	border-radius: 5px 5px 0 0;
	color: #55bf21;
}
.dropdown-menu.show {
	margin: 0;
 	border-radius: 0 0 5px 5px;
	border: none;
	box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
	/*width: 100%;*/
}
.modal-video {
    width: 100%;
    max-width: 100%;
    height: auto;
}
.hero-bg {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    min-width: 100%;
    padding: 90px 0 140px;
}
.header-logo {
    width: 58%}
.sub-h1 {
    margin: 15px 0 60px;
    font-size: 24px;
}
.hover-scale {
    transition: .5s;
}
.hover-scale:hover {
    scale: 1.05;
    transition: .5s;
}
.headline-icon {
    width: 85px;
}
.anklicken {
    background-color: #55bf21;
    padding: 4px 15px;
    width: fit-content;
    border-radius: 5px;
    top: -10px;
    left: 0;
    font-size: 16px;
}
.square-img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
}
#FAQ button {
    font-size: 1.5rem;
    font-weight: inherit;
}
.accordion-body {
    font-size: 1.25rem;
}
@media (max-width:768px) {
    .h1, h1 {
    font-size: 2rem;
}
#hero h1 {
    line-height: 1.1!important;
}
#hero .h3 {
    line-height: 1.2!important;
}
.h2, .h3, h2, h3 {
    font-size: 1.5rem;
}
.custom-fs-5 {
	font-size: 4.5rem;
}
.custom-headline {
    padding: 30px 0;
}
.custom-btn {
    padding: 12px 24px;
}
.header_top_text {
    overflow: hidden;
    white-space: nowrap;
    padding-left: 25px;
    background-color: #041c0d;
    position: relative;
}
.header_top_text>* {
    display: inline-block;
    position: relative;
    animation: 10s linear infinite move;
}
@keyframes move {
    0% {transform: translateX(0);}
	100% {transform: translateX(-100%);}
}#benefits {
    margin-top: 0;
}
.anklicken {
    top: -5px;
    left: 5px;
}
#FAQ button {
    font-size: 1.125rem;
}
.accordion-body {
    font-size: 1rem;
}
}
.accordion {
    --bs-accordion-border-width: 0;
    --bs-accordion-inner-border-radius: none;
}
.accordion-button {
    border-top: 1px solid #000;
}
.accordion-button:not(.collapsed) {
    color: #fff;
    background-color: #55bf21;
    border-radius: 5px!important;
    border: none;
}

/* FOOTER */
footer a, footer p {
    color: #fff;
}

.footer-linklist {
	list-style: none;
}

/* KOSTEN */
.tiny-square {
	width: 25px;
	height: 25px
}
.custom-border-black {
	border-color: #000 !important;
}
.price-bar {
	background: linear-gradient(to right, #55bf21 65%, #fff 0%);
}

code{
	color:black!important;
	font-family: Outfit;
}

.custom-btn-layout {
	width: fit-content;
	padding: 17px 90px;
	margin: 0 auto;
}

.flat-layout {
	align-items: center;
}
.row.flat-layout img {
	object-fit: cover;
	max-height: 350px;
}

/* RATINGS */

.ratings-timestamp {
	font-size: 0.9rem;
}
.review-text {  
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Verstecke die ursprüngliche Checkbox */
#wpforms-476-field_15_1 {
    display: none;
}

/* Button-Styling für das Label */
#wpforms-476-field_15_1 + label {
    display: block;
    width: fit-content;
    margin: 0 auto; /* Zentriert den Button */
    padding: 17px 24px;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    color: #fff;
    background-color: #ff6500;
    border: 1px solid #ff6500 !important;
    border-radius: 5px;
    cursor: pointer;
    transition: .3s ease-in;
}

/* Hover-Effekt */
#wpforms-476-field_15_1 + label:hover {
    background-color: #fff;
    color: #ff6500;
}

/* Button aktivieren, wenn Checkbox angeklickt wird */
#wpforms-476-field_15_1:checked + label {
    background-color: #fff;
    color: #ff6500;
}
#wpforms-476-field_18-container{
	padding-top:30px;
}

#wpforms-476-field_37-container .wpforms-price,
#wpforms-476-field_38-container .wpforms-price{
	font-size:2rem;
}
#wpforms-476-field_36-container,
#wpforms-476-field_37-container,
#wpforms-476-field_38-container{
	text-align:center!important;
}
#wpforms-476-field_36-container .wpforms-price{
	font-size:3rem;
	color:green!important;
}
.cstm-navbar-brand {
	width: 10%;
	height: 80px!important;
    margin-right: var(--bs-navbar-brand-margin-end);
    font-size: var(--bs-navbar-brand-font-size);
    color: var(--bs-navbar-brand-color);
    text-decoration: none;
    white-space: nowrap;
}

.cstm-nav-logo {
	object-fit: contain!important;
	object-position: 100% 0%!important;
	width: 100%!important;
	height: 90%!important;
}

@media (max-width: 992px) {
	.cstm-navbar-brand {
		width: 20%;
	}
}

@media (max-width: 768px) {
	.custom-btn {
		font-size: 20px;
	}
}

@media (max-width: 576px) {
	.cstm-navbar-brand {
		width: 30%;
	}
}

.h1-block h1 {
	font-size: 5rem;
	border-bottom: var(--primary) 2px solid;
	margin: 0 auto;
	width: fit-content;
}
.h1-block h2 {
	font-weight: inherit;
	font-size: 2rem;
}
@media (max-width: 1200px) {
	.h1-block h1 {
		font-size: 4rem
	}
}
@media (max-width: 768px) {
	.h1-block h1 {
		font-size: 3rem;
		margin: 0;
	}
	.h1-block {
		width: revert;
	}
}
@media (max-width: 576px) {
	.h1-block h1 {
		font-size: 1.9rem
	}
}

/* Padding Row Fix */
@media (min-width: 576px) {
	.custom-px-75 {
		padding: 0.75rem;
	}	
}

#wpforms-476-field_1 {
	justify-content: center;
}

.video-player {
	width: 100%;
	aspect-ratio: 16/9;
}

/*------------------------- BLOG -------------------------*/

.post-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--bs-border-radius);
	transition: 0.5s;
	transform-origin: left;
}
@media (max-width: 768px) {
	.post-thumbnail img {
		height: auto;
		aspect-ratio: 25/14;
	}
}
.article-prev:hover .post-thumbnail img {
	scale: 1.05;
	transition: 0.5s;
	margin-left: -5px;
}
.post-desc {
	border-bottom: solid 1px #f8f9fa;
}
.post-divider {
	border-bottom: solid 1px #efefef;
}

article h1 {
	border-bottom: var(--primary) 2px solid;
}
@media (min-width: 992px) {
	.post-content-container {
		max-width: 90%;
		margin: 0 auto;
	}
}

.calculator-icon a {
    position: relative;
    padding-left:32px!important;
}

.calculator-icon a::before {
    content: "";
    position: absolute;
    left:5px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 20px;

    -webkit-mask: url('/wp-content/themes/gs/assets/icons/calculator.svg') no-repeat center / contain;
    mask: url('/wp-content/themes/gs/assets/icons/calculator.svg') no-repeat center / contain;

    background-color: currentColor;
    opacity: 0.85;
    transition: background-color 0.2s ease;
}