@font-face {
font-family: 'Titillium Web';
font-style: normal;
font-weight: 400;
src: url('https://www.friedrich-training.de/webfonts/titillium-web-v8-latin-regular.eot');
src: local('Titillium Web Regular'), local('TitilliumWeb-Regular'),
url('https://www.friedrich-training.de/webfonts/titillium-web-v8-latin-regular.eot?#iefix') format('embedded-opentype'),
url('https://www.friedrich-training.de/webfonts/titillium-web-v8-latin-regular.woff2') format('woff2'),
url('https://www.friedrich-training.de/webfonts/titillium-web-v8-latin-regular.woff') format('woff'),
url('https://www.friedrich-training.de/webfonts/titillium-web-v8-latin-regular.ttf') format('truetype'),
url('https://www.friedrich-training.de/webfonts/titillium-web-v8-latin-regular.svg#TitilliumWeb') format('svg');
}

@font-face {
font-family: 'Titillium Web';
font-style: normal;
font-weight: 700;
src: url('https://www.friedrich-training.de/webfonts/titillium-web-v8-latin-700.eot');
src: local('Titillium Web Bold'), local('TitilliumWeb-Bold'),
url('https://www.friedrich-training.de/webfonts/titillium-web-v8-latin-700.eot?#iefix') format('embedded-opentype'),
url('https://www.friedrich-training.de/webfonts/titillium-web-v8-latin-700.woff2') format('woff2'),
url('https://www.friedrich-training.de/webfonts/titillium-web-v8-latin-700.woff') format('woff'),
url('https://www.friedrich-training.de/webfonts/titillium-web-v8-latin-700.ttf') format('truetype'),
url('https://www.friedrich-training.de/webfonts/titillium-web-v8-latin-700.svg#TitilliumWeb') format('svg');
}

html {
}

body {
margin: 0;
padding: 0;
font-family: 'Titillium Web', sans-serif;
font-size: 4.5vw;
line-height: 1.6em;
text-align: center;
color: #3C3C3B;
background-color: #FFFFFF;
}

h1.hlstart {
font-size: 6.9vw;
line-height: 1.3em;
font-weight: 700;
margin: 0;
padding: 0;
margin-top: 60px;
margin-bottom: 20px;
color: #3C3C3B;
display: inline-block;
position: relative;
}

h1.hlstart span {
opacity: 0;
display: inline-block;
animation: typing 0.05s forwards;
}

@keyframes typing {
to {
opacity: 1;
}
}

.hlstart::after {
content: "";
position: absolute;
bottom: 0;
left: 0.6em;
width: 0%;
height: 5px;
background: linear-gradient(to right, #EBF0B2, #BCCE00);
transform: skewX(-20deg);
z-index: -1;
transition: all .8s ease-out;
}

h1.hlstart.underline::after {
width: 90%;
}

h2, h3 {
font-size: 1.6em;
line-height: 1.3em;
font-weight: 700;
margin: 0;
padding: 0;
margin-top: 60px;
margin-bottom: 45px;
color: #3C3C3B;
text-align: center;
}

h2.hltop {
margin-top: 0;
}

h3.hlref {
font-size: 100%;
line-height: 1.3em;
margin-top: 10px;
margin-bottom: 0;
color: #BCCE00;
}

a {
color: #BCCE00;
text-decoration: none;
font-weight: bold;
}

a:hover {
text-decoration: underline;
}

a.anchor {
position: relative;
top: -10px;
padding: 0;
}

img {
border: none;
display: block;
}

.imgsize {
max-width: 100%;
height: auto;
}

.imgsizemax {
width: 100%;
height: auto;
}

.imgcenter {
margin-left: auto;
margin-right: auto;
}

.imgrund {
width: 250px;
height: 250px;
border-radius: 125px 125px 125px 125px;
margin:0 auto;
margin-bottom: 20px;
}

input, select {
font-family: 'Titillium Web', sans-serif;
font-size: 100%;
color: #3C3C3B;
border: 1px solid #3C3C3B;
padding: 10px 20px;
box-sizing: border-box;
width: 100%;
margin-bottom: 10px;
background-color: #FFFFFF;
transition: all .2s ease-out;
}

select {
-webkit-appearance: none;
}

input[type='checkbox'] {
padding: 0;
margin: 0;
width: 20px;
height: 20px;
cursor: pointer;
}

input:hover, textarea:hover {
border: 1px solid #BCCE00;
}

.button {
font-family: 'Titillium Web', sans-serif;
font-size: 100%;
color: #FFFFFF;
background-color: #BCCE00;
padding: 10px 50px;
margin-top: 20px;
box-sizing: border-box;
width: 100%;
cursor: pointer;
transition: all .2s ease-out;
font-weight: bold;
text-transform: uppercase;
border: 1px solid #BCCE00;
white-space: normal;
}

.button:hover {
background-color: #4C5255;
text-decoration: none;
border: 1px solid #FFFFFF;
}

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

.liste ul > li {
margin-bottom: 0.5em;
padding-left: 2em;
clear: left;
}

.liste ul > li::before {
content: "";
height: 1.5rem;
width: 1.5rem;
display: block;
float: left;
margin-left: -2em;
background-position: center;
background-repeat: no-repeat;
background-size: 100%:;
background-image: url('https://www.friedrich-training.de/bestform-erreichen/img/layout/check.svg');
background-size: cover;
background-position: left top;
}

ul.bxsliderzitate, ul.bxsliderzitate li {
padding: 0;
margin: 0;
}

.bx-wrapper {
font-size: inherit !important;
}

.wehinweis, .formsubject {
display: none;
}

/**************************************************************************************/

#container {
width: 90%;
margin-left: 5%;
text-align: left;
}

#containercenter {
width: 90%;
margin-left: 5%;
text-align: center;
}

.fade {
opacity: 0;
transform: translateY(50px);
transition: opacity 0.6s ease-out 0.3s, transform 0.6s ease-out 0.3s;
}

.fade.visible {
opacity: 1;
transform: translateY(0);
}

/**************************************************************************************/

#center {
text-align: center;
}

#headerbild {
position: relative;
text-align: center;
aspect-ratio: 1 / 1;
background: url('https://www.friedrich-training.de/bestform-erreichen/img/layout/bestform-beruf-sport-lernen-familie.png') no-repeat center center / contain;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}

.logo {
width: 90%;
opacity: 0;
transform: scale(0.8);
animation: zoomIn 6s ease-out 0.3s forwards;
}

@keyframes zoomIn {
to {
transform: scale(1);
opacity: 1;
}
}

@media (prefers-reduced-motion: reduce) {
.logo {
animation: none !important;
transform: scale(1);
}
}

#pfeildown {
font-size: 8vw;
color: #BCCE00;
position: absolute;
bottom: 10px;
left: 0;
right: 0;
margin: auto;
z-index:10;
opacity: 0;
animation: pulseDown 2.5s ease-in-out infinite;
}

@keyframes pulseDown {
0% {
transform: translateY(0);
opacity: 0;
}
30% {
transform: translateY(10px);
opacity: 1;
}
60% {
transform: translateY(0);
opacity: 0;
}
80% {
transform: translateY(0);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 0;
}
}

#bg {
position: relative;
background-color: #E6E6E6;
padding: 30px 0;
overflow: hidden;
}

#bg::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-image: url('https://www.friedrich-training.de/bestform-erreichen/img/layout/tensegrity.svg');
background-repeat: no-repeat;
background-position: left top;
background-size: auto;
opacity: 0.05;
z-index: 0;
}

#btn {
margin-top: 30px;
text-align: center;
}

.btn {
display: inline-block;
background-color: #BCCE00;
font-weight: normal;
padding: 10px 55px;
text-decoration: none;
transition: all .2s ease-out;
color: #FFFFFF;
text-transform: uppercase;
border: none;
}

.btn:hover {
background-color: #4C5255;
text-decoration: none;
}

.margtop {
margin-top: 30px;
}

.margbot {
margin-bottom: 20px;
}

video {
width: 100%;
height: auto;
}

#testimonialeinzel {
text-align: center;
}

#tabzweier {
display: -ms-grid;
display: grid;
gap: 30px;
}

#tabzweier > div:nth-child(2n + 1) {
-ms-grid-column: 1;
-ms-grid-row: 1;
}

#tabzweier > div:nth-child(2n + 2) {
-ms-grid-column: 1;
-ms-grid-row: 2;
}

/**************************************************************************************/

#slider {
position: relative;
}

#siegelicon {
position: absolute;
top: -30px;
left: 30px;
width: 20%;
}

.slider {
position: relative;
width: 100%;
aspect-ratio: 3 / 2;
overflow: hidden;
user-select: none;
}

.slides {
display: flex;
height: 100%;
transition: transform 0.8s ease;
}

.slides img {
width: 100%;
flex-shrink: 0;
object-fit: cover;
pointer-events: none;
}

button.prev, button.next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0,0,0,0.1);
color: #FFFFFF;
border: none;
padding: 10px;
font-size: 3.5vw;
cursor: pointer;
z-index: 1;
transition: all .2s ease-out;
}

.prev {
left: 0;
}

.next {
right: 0;
}

button.prev:hover, button.next:hover {
background-color: rgba(0,0,0,0.4);
}

/**************************************************************************************/

footer {
font-size: 60%;
line-height: 1.6em;
padding: 10px 0;
background-color: #5E6366;
color: #6D6D6C;
text-transform: uppercase;
}

footer a {
color: #94979A;
font-weight: normal;
}

/****************************************************************************************************************************************************************************/

@media (min-width : 900px) {
/**************************************************************************************/

body {
font-size: 1.9vw;
line-height: 1.7em;
}

h1.hlstart {
font-size: 2.4vw;
line-height: 1.3em;
}

h1.hlstart.underline::after {
width: 100%;
}

h2, h3 {
font-size: 2.0em;
line-height: 1.3em;
margin-top: 120px;
margin-bottom: 45px;
}

#headerbild {
margin-left: 20%;
width: 60%;
}

#headerbildbg {
background-image: url('https://www.friedrich-training.de/bestform-erreichen/img/layout/bg-headerbild.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

#pfeildown {
font-size: 4vw;
}

.margtop {
margin-top: 120px;
}

#bg {
padding: 120px 0;
}

button.prev, button.next {
font-size: 1.2vw;
}

#tabzweier {
grid-template-columns: 1fr 1fr;
gap: 60px;
}

#tabzweier > div:nth-child(2n + 1) {
-ms-grid-column: 1;
-ms-grid-row: 1;
}

#tabzweier > div:nth-child(2n + 2) {
-ms-grid-column: 2;
-ms-grid-row: 1;
}

/**************************************************************************************/
}

@media (min-width : 1300px) {
/**************************************************************************************/

body {
font-size: 1.1vw;
line-height: 1.7em;
}

#container, #containercenter {
margin: 0em auto;
width: 1300px;
}

video, #testimonialeinzel {
width: 50%;
margin-left: 25%;
}

/**************************************************************************************/
}