/*!
Theme Name: TH Coaching Theme
Theme URI: https://nordisch-vital.de/
Author: Nordisch Vital GmbH
Author URI: https://nordisch-vital.de/
Description: Das offizielle TH Coaching Theme für Wordpress.
Version: 1.0.0
*/

:root {
    --_colors---brand: #529bbb;
    --_colors---background: #04080e;
    --_colors---fontprimary: white;
    --_colors---fontsecondary: #70777a;
    --_colors---bordercards: #ffffff1a;

    --_layout---maxcontentwidth: 1520px;

    --_layout---borderradiuscard: 15px;

    --_layout---gap-s: 10px;
    --_layout---gap-m: 20px;
    --_layout---gap-l: 40px;
    --_layout---gap-xl: 60px;
    --_layout---gap-xxl: 120px;

    --_layout---padding-s: 10px;
    --_layout---padding-m: 20px;
    --_layout---padding-l: 40px;
    --_layout---padding-xl: 60px;
}

* {
 box-sizing: border-box;
	margin: 0;
}

body, html {
	margin: 0;
	width: 100%;
	height: 100%;
}

html {
	background: var(--_colors---background);
	color: var(--_colors---fontprimary);
}

body {
	font-size: 16px;
	position: relative;
	font-family: Arial;
}

a {
	text-decoration: none;
}

header {
	position: fixed;
	width: 100%;
	border-bottom: 1px solid var(--_colors---bordercards);
	-webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    background-color: #0003;
}

.container {
	max-width: 1560px;
	padding: var(--_layout---padding-m) var(--_layout---padding-xl);
}

header .container {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.menu {
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}
.sub-menu {
	opacity: 0;
	position: absolute;
	background: var(--_colors---bordercards);
}
.menu-item:hover .sub-menu {
	opacity: 1;
}
.menu-item {
	list-style-type: none;
	display: block;
}
.menu-item a {
	color: var(--_colors---fontprimary);
	transition: color .2s;
	padding: var(--_layout---gap-s) var(--_layout---padding-m);
    letter-spacing: .2em;
    text-transform: capitalize;
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
    transition: color .3s;
    display: block;
}
.menu-item:hover>a {
	color: var(--_colors---brand)
}

main.container {
	padding-top: calc(93px + var(--_layout---padding-xl));
}

.cta-button {
	padding: 1px;
	margin-left: var(--_layout---gap-s);
}

.cta-button a {
	text-transform: uppercase;
    background-color: rgb(28, 53, 66);
    font-weight: 800;
    line-height: 1.2rem;
    border: 2px solid var(--_colors---brand);
    white-space: nowrap;
    border-radius: 15px;
    padding: 16px 24px;
}

.cta-button:hover {
	transform: scale(1.05);
}
.cta-button:hover a {
	color: var(--_colors---fontprimary);
}

footer.container {
    padding-top: var(--_layout---padding-xl);
    padding-bottom: var(--_layout---padding-xl);
    grid-column-gap: var(--_layout---gap-l);
    grid-row-gap: var(--_layout---gap-l);
    min-height: 320px;
    position: relative;
    overflow: hidden;
}