/*
 Theme Name:   Vivayu
 Template:     hello-elementor
 Author:       Benjamin Bergmann
 Version:      1.0.0
*/

/* Gemeinsame Definition für die Schriftfamilie 'Goodly' */

/* 1. ExtraLight (200/300) */
@font-face {
    font-family: 'Goodly';
    src: url('assets/fonts/GoodlyExtraLight.eot');
    src: url('assets/fonts/GoodlyExtraLight.eot?#iefix') format('embedded-opentype'),
    url('assets/fonts/GoodlyExtraLight.woff2') format('woff2'),
    url('assets/fonts/GoodlyExtraLight.woff') format('woff'),
    url('assets/fonts/GoodlyExtraLight.ttf') format('truetype'),
    url('assets/fonts/GoodlyExtraLight.svg#GoodlyExtraLight') format('svg');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

/* 2. Regular (400) */
@font-face {
    font-family: 'Goodly';
    src: url('assets/fonts/GoodlyRegular.eot');
    src: url('assets/fonts/GoodlyRegular.eot?#iefix') format('embedded-opentype'),
    url('assets/fonts/GoodlyRegular.woff2') format('woff2'),
    url('assets/fonts/GoodlyRegular.woff') format('woff'),
    url('assets/fonts/GoodlyRegular.ttf') format('truetype'),
    url('assets/fonts/GoodlyRegular.svg#GoodlyRegular') format('svg');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* 3. Medium (500) */
@font-face {
    font-family: 'Goodly';
    src: url('assets/fonts/GoodlyMedium.eot');
    src: url('assets/fonts/GoodlyMedium.eot?#iefix') format('embedded-opentype'),
    url('assets/fonts/GoodlyMedium.woff2') format('woff2'),
    url('assets/fonts/GoodlyMedium.woff') format('woff'),
    url('assets/fonts/GoodlyMedium.ttf') format('truetype'),
    url('assets/fonts/GoodlyMedium.svg#GoodlyMedium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* 4. Semibold (600) */
@font-face {
    font-family: 'Goodly';
    src: url('assets/fonts/GoodlySemibold.eot');
    src: url('assets/fonts/GoodlySemibold.eot?#iefix') format('embedded-opentype'),
    url('assets/fonts/GoodlySemibold.woff2') format('woff2'),
    url('assets/fonts/GoodlySemibold.woff') format('woff'),
    url('assets/fonts/GoodlySemibold.ttf') format('truetype'),
    url('assets/fonts/GoodlySemibold.svg#GoodlySemibold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* 5. Bold (700) */
@font-face {
    font-family: 'Goodly';
    src: url('assets/fonts/GoodlyBold.eot');
    src: url('assets/fonts/GoodlyBold.eot?#iefix') format('embedded-opentype'),
    url('assets/fonts/GoodlyBold.woff2') format('woff2'),
    url('assets/fonts/GoodlyBold.woff') format('woff'),
    url('assets/fonts/GoodlyBold.ttf') format('truetype'),
    url('assets/fonts/GoodlyBold.svg#GoodlyBold') format('svg');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'RobotoLocal'; /* Eigener Name, um Konflikte zu vermeiden */
    src: url('assets/fonts/Roboto-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'RobotoLocal';
    src: url('assets/fonts/Roboto-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}



:root {
    --e-global-color-primary: var(--wp--preset--color--primary);
    --e-global-color-secondary: var(--wp--preset--color--accent);
    --e-global-color-text: var(--wp--preset--color--apricot);
    --e-global-color-accent: var(--wp--preset--color--yellow);
    --e-global-color-accentb: var(--wp--preset--color--yellowtrans);
    --e-global-color-magenta: var(--wp--preset--color--magenta);
    --e-global-box_background_dark: var(--wp--preset--color--brown);
    --e-global-box_background_light: var(--wp--preset--color--brownlight);
	--e-a-border-color: var(--wp--preset--color--magenta);
	
}

body {
}
.unused {
    color: #FE347E;
    color: #FDFC60;
    color: #AA9E97;
    color: #ff5733;
    color: #1a1a1a;

}

.container-light-bg {
    background: var(--wp--preset--color--brownlight) !important;
}

.header-light-bg h1,
.header-light-bg h2,
.header-light-bg h3,
.header-light-bg h4,
.header-light-bg h5
{
    background: var(--wp--preset--color--brownlight) !important;
}

.container-dark-bg {
    background: var(--wp--preset--color--brown) !important;
}

.header-dark-bg h1,
.header-dark-bg h2,
.header-dark-bg h3,
.header-dark-bg h4,
.header-dark-bg h5
{
    background: var(--wp--preset--color--brown) !important;
}

/* Base Font definitions */

/*html, body, p, i, b, em, strong {*/
html, body {
    font-family: 'RobotoLocal', sans-serif;
}


.elementor-widget-text-editor {
    font-family: 'RobotoLocal', sans-serif;
}

body {
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 2rem;
    color: var(--e-global-color-primary);
}

h1, h2, h3, h4, h5, h6 {
    font-family: "GoodlyBold", Sans-serif;
    font-weight: 600;
	line-height: 1.2 !important;
	margin-bottom: 20px !important;
}


.e-con p:last-child {
	margin-bottom:0 !important;
	padding-bottom: 0 !important;
}



/* Menu Style definitions */



/* Special definitions */




footer .elementor-nav-menu--dropdown {
    background-color: transparent;
}


.sub-menu {
    background-color: var(--wp--preset--color--yellowtrans);
}



.current_page_item,
.current_page_parent {
    /*background: var(--wp--preset--color--yellowtrans);*/
    border-radius: 15px;
}

.current_page_parent a {
    font-weight:bold;
}


.menu-item > * {
    font-family: "GoodlyBold", Sans-serif !important;
    font-weight: 600;
    color: black !important;
}
.elementor-nav-menu .sub-arrow {
    color: black !important;
    fill: black !important;
}

.elementor-nav-menu--main .elementor-nav-menu a,
.elementor-nav-menu--main .elementor-nav-menu a.highlighted,
.elementor-nav-menu--main .elementor-nav-menu a:focus,
.elementor-nav-menu--main .elementor-nav-menu a:hover {
    /*padding: 0.5rem 1rem !important;*/
}

.current-menu-item a {
    font-weight: 600 !important;
}

ul .current-menu-ancestor > a {
    background: var(--wp--preset--color--yellowtrans);
}
ul .current-menu-item > a {
    background: var(--wp--preset--color--yellowtrans);
}


ul.elementor-nav-menu > li:first-child.current-menu-parent > a {
    border-top-left-radius: 15px !important;
    border-bottom-left-radius: 15px !important;
}
ul.elementor-nav-menu > li:last-child.current-menu-parent > a {
    border-top-right-radius: 15px !important;
    border-bottom-right-radius: 15px !important;
}

ul.elementor-nav-menu > li:first-child.current-menu-item > a {
    border-top-left-radius: 15px !important;
    border-bottom-left-radius: 15px !important;
}
ul.elementor-nav-menu > li:last-child.current-menu-item > a {
    border-top-right-radius: 15px !important;
    border-bottom-right-radius: 15px !important;
}



.sub-menu {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

.sub-menu a {
    padding: 0.4rem 1rem !important;
    font-size: 1.4rem !important;
    line-height: 1.4rem !important;
}


.current_page_parent .current_page_item {
    font-weight: bold;
    /*background: var(--wp--preset--color--yellowtrans) !important;*/
}

/*.sub-menu .menu-item a {*/
/*    padding: 0.4rem 1rem;*/
/*    font-size: 1.2rem;*/
/*}*/





.colored_list ul {
    list-style: none;
    padding-left: 0;
}

.colored_list ul li {
    background: white;
    color: fuchsia;
    border-radius: 10px;
    display:table;
    margin-bottom:10px;
    padding:5px 10px;
    font-weight:bold;

    width:auto;
}


body .icon_box img {
    max-height: 100px;
}

body .icon_box h2 {
    color: var(--wp--preset--color--magenta) !important;
    font-family: "GoodlyBold", Sans-serif !important;
    font-weight: 600 !important;
    font-size: 1.5rem !important;
}

body .icon_box .elementor-widget-text-editor,
body .icon_box .elementor-text-editor,
body .icon_box * {
    font-family: "GoodlyBold", Sans-serif !important;
    color: black;
    font-size: 1rem !important;
    line-height: 1.5rem !important;
}

.box_title h2,
.box_title h3,
.box_title h4 {
    /*background: #B9B9B9 !important;*/
    border-radius: 1rem !important;
    padding: 0.5rem 1rem !important;
    font-size: 1.4rem !important;
    line-height: 2rem !important;
    color: #FFFFFF !important;
    display: inline-block;
    margin-bottom: 1.5rem;
}

div.box_badge {
    position:absolute;
    top:0rem !important;
    right:2rem !important;
    transform:translateY(-50%);
    width: auto;
    height: auto;
    border-radius: 50% !important;
    background: var(--wp--preset--color--magenta) !important;
    padding: 0.5rem 1rem !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    color: #FFFFFF !important;
    aspect-ratio: 1 / 1 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding:0.5rem !important;
}
.box_badge * {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    display: inline-block !important; /* Sorgt dafür, dass Zentrierung greift */
    text-align: center !important;
    width: auto !important;
}




.adhs-step {
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 0px;
    background: white;
    border-radius: 20px;
    color: black;
	font-weight: 500;
	
    display: inline-flex !important;
    padding-right: 20px;
}

.adhs-step a {
	display:contents;
}



/* Der gelbe Kreis */
.step-circle {
    width: 40px;
    height: 40px;
    background: var(--wp--preset--color--yellow);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    z-index: 3;
    flex-shrink: 0;
    border: 0;
    color: black;
}

.step-icon {
    margin-left: 10px;
    margin-right: 10px;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1rem;
    z-index: 3;
}

.step-textblock {
    margin-top: 0px;
    margin-left: 70px;
    padding: 15px;
    font-size: 1.2rem;
    line-height: 1.7rem;
    z-index: 2;
    color: black;
}




.leftright_big ,
.leftright_small {
	padding-left:1rem !important;
	padding-right:1rem !important;
}

.leftright_big .e-con-inner .e-child,
.leftright_small .e-con-inner .e-child {
	/*padding-left: 0rem !important;
	padding-right: 0rem !important;*/
}

.right_big,
.right_small {
    padding-right:1rem !important;
}

.left_big,
.left_small {
	padding-left:1rem !important;
}


.elementor-widget-text-editor > p > img {
	border:0px solid black !important;
	border-radius: 2rem !important;
	margin-left: 2rem !important;
	margin-bottom: 2rem !important;
}

.vy_container {
	margin-bottom: 5rem;
}


.vy_container h1,
.vy_container h2 {
    /*text-transform: uppercase !important;*/
	font-weight: 800;
}

.vy_container h1 ~ h1,
.vy_container * + h1,
.vy_container h2 ~ h2,
.vy_container * + h2 {
    /* Hier setzt du die Styles für alle NACHFOLGENDEN h1 wieder zurück,
       falls sie sich wie normale h1 verhalten sollen */
}


.elementor-button-link {
	font-size: 1.4rem;
}

.meeterGoButton {	
    font-family: "GoodlyBold", Sans-serif !important;
}




@media (min-width: 750px) {
	
	
.e-con-inner > .e-child {
	margin-left: 2rem !important;
    margin-right: 2rem !important;
    width: auto;
}
	
	
.leftright_big {
    padding-left:8rem !important;
    padding-right:8rem !important;

}
.leftright_small {
    padding-left:4rem !important;
    padding-right:4rem !important;

}
.left_big {
    padding-left:8rem !important;
}
.left_small {
    padding-left:4rem !important;
}
.right_big {
    padding-right:8rem !important;
}
.right_small {
    padding-right:4rem !important;
}
}