/* Global Styles */
body, html {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #000;
color: white;
overflow-x: hidden; /* Verhindert horizontales Scrollen */
margin: 0;
}
/* Section-Styles */
main {
margin: 0;
}
@font-face {
font-family: 'LouisGeorgeCafe';
src: url(LouisGeorgeCafe.ttf) format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'hellony';
src: url(Hello\ Newyork.otf) format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Avenirroman';
src: url(AvenirLTStd-Roman.otf) format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Avenirmedium';
src: url(AvenirLTStd-Medium.otf) format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Avenirlight';
src: url(AvenirLTStd-Light.otf) format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Beauty';
src: url(BeautyDemo.otf) format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Avenirheavy';
src: url(AvenirLTStd-Heavy.otf) format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Louisgeorgecafebold';
src: url(LouisGeorgeCafeBold.ttf) format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'LEMONMILKBOLD';
src: url(LEMONMILK-Bold.otf) format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'LEMONMILKLIGHT';
src: url(LEMONMILK-Light.otf) format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'LEMONMILKLight';
src: url(LEMONMILK-Light.otf) format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'LexendBold';
src: url( Lexend-Bold.ttf ) format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'SignatureDecember';
src: url( SignatureDecember.otf ) format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Autobiography';
src: url(Autobiography.otf) format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Lexendlight';
src: url( LexendLight.ttf ) format('truetype');
font-weight: normal;
font-style: normal;
}
.section-1 {
background-color: #0f0f0f;
padding: 400px 0; /* Oben und unten Abstand */
position: relative;
box-shadow: 0 -20px 40px
}
.bfq-video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
transform: translate(-50%, -50%);
object-fit: cover;
z-index: 0;
}
.NULNEBLA-container {
flex-direction: column;
align-items: center;
cursor: pointer;
position: absolute;
top: 4%;
left: 4%;
z-index: 1;
}
/* Bild-Wrapper */
.NULNEBLA-wrapper {
position: relative;
width: 30%; /* frei skalierbar */
height: auto;
}
.icon {
width: 100%;
height: auto;
position: absolute;
top: 20%;
top: 0;
left: 0;
}
.icon.hover {
opacity: 0;
}
.NULNEBLA-container:hover .icon.default {
opacity: 0;
}
.NULNEBLA-container:hover .icon.hover {
opacity: 1;
}
/* Text */
.NULNEBLA-text {
text-align: left;
margin-top: 3%;
margin-left: 33%;
font-size: clamp(48px, 8vw, 54px);
font-family: 'LEMONMILKBOLD', sans-serif;
color: #f5f5f5;
max-width: 520px;
}
.NULNEBLA-container:hover .NULNEBLA-text {
display: inline-block;
color: #0e0e0e; }
.wordlinkfirmentop
{
margin-top: 3%;
margin-left: 33%;
font-size: clamp(48px, 8vw, 54px);
font-family: 'LEMONMILKBOLD', sans-serif;
color: #f5f5f5;
max-width: 520px;
}
.section-2 {
z-index: 1;
background-color: #CDD1DC;
padding: 783px 0; /* Oben und unten Abstand */
position: relative;
box-shadow: 0 20px -50px 30px rgba(0, 0, 0, 0.6); /* Schatten nach unten */
/* -------------------------------
Box-Shadow erklärt:
0 → Kein horizontaler Versatz (bleibt zentriert)
20px → Vertikaler Versatz nach unten (Schatten fällt nach unten)
40px → Weichzeichner-Radius (wie verschwommen der Schatten wirkt)
-10px → Ausbreitung (negativ = kompakter)
rgba(0, 0, 0, 0.6) → Farbe: halbtransparenter Schwarzton
-------------------------------- */
z-index: 1; /* Damit der Schatten über dem oberen Bereich liegt */
}
/* Text unterhalb */
.sectiontwoone-text {
top: 1%;
left: 4%;
font-family: 'SignatureDecember', sans-serif;
font-size: clamp(29px, 7vw, 31px);
color: #090909;
line-height: 1;
position: absolute;
}
/* Beim Hover sichtbar & orange */
.highlightsectiontwoone{
color: #090909;
font-family: 'Avenirheavy', sans-serif;
font-size: clamp(26px, 7vw, 32px);
}
.sectiontwotitle-text {
top: 7%;
left: 4%;
font-family: 'LEMONMILKBOLD', sans-serif;
font-size: clamp(41px, 7vw, 43px);
color: #d21c6b;
line-height: 1;
position: absolute;
}
.sectiontwotwo-text {
top: 13%;
left: 4%;
position: absolute;
max-width: 80%;
font-family: 'Avenirlight', sans-serif;
font-size: clamp(16px, 4vw, 19px);
color: #0c0c0c;
line-height: 1.2;
}
.highlightsectiontwothtwo {
font-family: 'LexendBold', sans-serif;
font-size: clamp(16px, 4vw, 19px);
}
.highlightsectiontwoththree {
font-family: 'LexendBold', sans-serif;
font-size: clamp(16px, 4vw, 19px);
}
.highlightsectiontwothasd {
font-family: 'LexendBold', sans-serif;
font-size: clamp(16px, 4vw, 19px);
}
.highlightsectiontwothsad {
font-family: 'LexendBold', sans-serif;
font-size: clamp(16px, 4vw, 19px);
color: #d21c6b;
}
/* Text unterhalb */
.sectiontwotitlethree-text {
top: 49%;
left: 4%;
position: absolute;
font-family: 'Beauty', sans-serif;
font-size: clamp(76px, 7vw, 82px);
color: #d21c6b;
line-height: 0.2;
z-index: 3;
}
/* Beim Hover sichtbar & orange */
.highlightsectiontwotitlesectiontwotitlethree{
color: #090909;
font-family: 'LEMONMILKBOLD', sans-serif;
font-size: clamp(20px, 5vw, 22px);
text-decoration-line: underline;
text-decoration-color: #d21c6b ;
text-decoration-thickness: 6px;
}
.section-between{
background-color: #0f0f0f;
padding: 320px 0; /* Oben und unten Abstand */
position: relative;
box-shadow: 0 -20px 40px
}
.bfq2-video {
position: absolute;
top: 70%;
left: 50%;
min-width: 100%;
min-height: 100%;
transform: translate(-50%, -50%);
object-fit: cover;
z-index: 0;
}
.section-3 {
z-index: 2;
background-color: #0f0f0f;
padding: 400px 0; /* Oben und unten Abstand */
position: relative;
box-shadow: 0 20px -30px 30px rgba(0, 0, 0, 0.6); /* Schatten nach unten */
box-shadow: 0 20px 30px 30px rgba(0, 0, 0, 0.6); /* Schatten nach unten */
/* -------------------------------
Box-Shadow erklärt:
0 → Kein horizontaler Versatz (bleibt zentriert)
20px → Vertikaler Versatz nach unten (Schatten fällt nach unten)
40px → Weichzeichner-Radius (wie verschwommen der Schatten wirkt)
-10px → Ausbreitung (negativ = kompakter)
rgba(0, 0, 0, 0.6) → Farbe: halbtransparenter Schwarzton
-------------------------------- */
}
.sectionthreetitle-text {
top: 1%;
left: 4%;
font-family: 'Beauty', sans-serif;
font-size: clamp(76px, 7vw, 82px);
color: #ebebeb;
line-height: 0.6;
position: absolute;
}
.sectionthreeone-text {
top: 20%;
left: 4%;
position: absolute;
max-width: 60%;
font-family: 'Avenirlight', sans-serif;
font-size: clamp(16px, 4vw, 19px);
color: #ebebeb;
line-height: 1.2;
}
/* Beim Hover sichtbar & orange */
.highlightsectionthreeonepunkt{
color: #d21c6b;
line-height: 1.2;
font-family: 'hellony', sans-serif;
font-size: clamp(32px, 3.4vw, 34px);
}
.highlightsectionthreeonepunktone{
color: #ebebeb;
background-color: #d21c6b;
}
.highlightsectionthreeonepunkttwo{
color: #ebebeb;
background-color: #d21c6b;
font-family: 'LexendBold', sans-serif;
}
/* Beim Hover sichtbar & orange */
.highlightsectionthreeonetwo{
color: #ebebeb;
background-color: #d21c6b;
}
/* Beim Hover sichtbar & orange */
.highlightsectionthreeoneone{
color: #ebebeb;
font-family: 'LexendBold', sans-serif;
}
.threeone-text {
font-family: 'Avenirlight', sans-serif;
font-size: clamp(18px, 2.4vw, 18px);
max-width: 700px;
color: #0e0e0e;
position: absolute;
top: 15%;
left: 4%;
line-height: 1.4;
}
.highlightthreeoneone {
color: #4d0035;
font-size: clamp(32px, 3.2vw, 26px);
font-weight: bold;
font-family: 'SignatureDecember', sans-serif;
}
.highlightthreeonetwo {
color: #0f0f0f;
font-weight: bold;
font-family: 'LEMONMILKBOLD', sans-serif;
}
.highlightthreeonethree {
color: #0e0e0e;
font-size: clamp(18px, 2.4vw, 18px);
font-weight: bold;
font-family: 'Avenirmedium', sans-serif;
line-height: 1.0;
}
.section-4 {
z-index: 1;
background-color: #CDD1DC;
padding: 1000px 0; /* Oben und unten Abstand */
position: relative;
box-shadow: 0 20px -50px 30px rgba(0, 0, 0, 0.6); /* Schatten nach unten */
/* -------------------------------
Box-Shadow erklärt:
0 → Kein horizontaler Versatz (bleibt zentriert)
20px → Vertikaler Versatz nach unten (Schatten fällt nach unten)
40px → Weichzeichner-Radius (wie verschwommen der Schatten wirkt)
-10px → Ausbreitung (negativ = kompakter)
rgba(0, 0, 0, 0.6) → Farbe: halbtransparenter Schwarzton
-------------------------------- */
z-index: 1; /* Damit der Schatten über dem oberen Bereich liegt */
}
.highlightsectionfourtitle {
font-family: 'Beauty', sans-serif;
font-size: clamp(76px, 7vw, 82px);
color: #090909;
left: 50%; transform: translate(-50%, -50%);
}
/* Beim Hover sichtbar & orange */
.sectionfourtitle{
color: #090909;
top: 5%;
left: 50%; transform: translate(-50%, -50%);
text-align: center;
font-family: 'LEMONMILKBOLD', sans-serif;
font-size: clamp(26px, 5vw, 32px);
position: absolute;
line-height: 1;
}
.scroll-trigger {
position: absolute;
bottom: 14%;
left: 8%;
cursor: pointer;
z-index: 10;
}
.scroll-trigger .arrow {
width: 30%;
transition: opacity 0.3s ease;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%);
}
.scroll-trigger .hover {
opacity: 0;
}
.scroll-trigger:hover .default {
opacity: 0;
}
.scroll-trigger:hover .hover {
opacity: 1;
}
.scroll-trigger p1 {
font-family: 'LEMONMILKBOLD', sans-serif;
font-size: clamp(14px, 1.5vw, 20px);
color: #d21c6b;
margin-top: 80%;
transition: color 0.3s ease;
}
.scroll-trigger:hover p1 {
color: #f3f3f3;
}
.moderat-container {
flex-direction: column;
align-items: center;
cursor: pointer;
position: absolute;
bottom: 2%;
left: 40%;
z-index: 1;
}
/* Bild-Wrapper */
.moderat-wrapper {
position: relative;
width: 320px; /* frei skalierbar */
height: auto;
}
.icon {
width: 100%;
height: auto;
position: absolute;
top: 20%;
top: 0;
left: 0;
transition: opacity 0.3s ease-in-out;
}
.icon.hover {
opacity: 0;
}
.moderat-container:hover .icon.default {
opacity: 0;
}
.moderat-container:hover .icon.hover {
opacity: 1;
}
/* Text */
.moderat-text {
text-align: center;
position: relative;
left: -20%;
margin-top: 440px;
font-size: clamp(30px, 3.5vw, 38px);
font-family: 'LEMONMILKBOLD', sans-serif;
color: #ffffff;
transition: color 0.3s ease-in-out;
max-width: 500px;
line-height: 1;
}
.moderat-container:hover .moderat-text {
display: inline-block;
background: linear-gradient(90deg, #21040d, #771836, #C4BCAD);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent; }
.leicht-container {
flex-direction: column;
align-items: center;
cursor: pointer;
position: absolute;
bottom: 2%;
left: 10%;
z-index: 1;
}
/* Bild-Wrapper */
.leicht-wrapper {
position: relative;
width: 320px; /* frei skalierbar */
height: auto;
}
.icon {
width: 100%;
height: auto;
position: absolute;
top: 20%;
top: 0;
left: 0;
transition: opacity 0.3s ease-in-out;
}
.icon.hover {
opacity: 0;
}
.leicht-container:hover .icon.default {
opacity: 0;
}
.leicht-container:hover .icon.hover {
opacity: 1;
}
/* Text */
.leicht-text {
text-align: center;
position: relative;
left: -20%;
margin-top: 440px;
font-size: clamp(30px, 3.5vw, 38px);
font-family: 'LEMONMILKBOLD', sans-serif;
color: #ffffff;
transition: color 0.3s ease-in-out;
max-width: 500px;
line-height: 1;
}
.leicht-container:hover .leicht-text {
display: inline-block;
background: linear-gradient(90deg, #9ea21a, #70a974, #5abece);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent; }
.intense-container {
flex-direction: column;
align-items: center;
cursor: pointer;
position: absolute;
bottom: -1%;
right: 3%;
z-index: 1;
}
/* Bild-Wrapper */
.intense-wrapper {
position: relative;
width: 320px; /* frei skalierbar */
height: auto;
}
.icon {
width: 100%;
height: auto;
position: absolute;
top: 20%;
top: 0;
left: 0;
transition: opacity 0.3s ease-in-out;
}
.icon.hover {
opacity: 0;
}
.intense-container:hover .icon.default {
opacity: 0;
}
.intense-container:hover .icon.hover {
opacity: 1;
}
/* Text */
.intense-text {
text-align: center;
position: relative;
left: -20%;
margin-top: 440px;
font-size: clamp(30px, 3.5vw, 38px);
font-family: 'LEMONMILKBOLD', sans-serif;
color: #ffffff;
transition: color 0.3s ease-in-out;
max-width: 500px;
line-height: 1;
}
.intense-container:hover .intense-text {
display: inline-block;
background: linear-gradient(90deg, #5E4E37, #A99670, #9DB1B4);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent; }
.trigger-wrapper {
position: relative;
display: inline-block;
left: 7%;
}
.trigger-image{
width: 7%;
}
/* Zielbilder übereinander legen */
.zielbild {
position: absolute;
top: 0;
margin-top: 10%;
width: 100%;
left: 150px; /* Abstand vom Triggerbild */
transition: opacity 0.3s ease;
}
.zielbild.hover {
opacity: 0;
}
.trigger-wrapper:hover .zielbild.default {
opacity: 0;
}
.trigger-wrapper:hover .zielbild.hover {
opacity: 1;
}
/* Text standardmäßig ausblenden */
.hover-text {
opacity: 0;
transition: opacity 0.3s ease;
margin-top: 1%;
margin-left: 4%;
}
.trigger-wrapper:hover .hover-text {
opacity: 1;
}
.leicht2-container {
flex-direction: column;
align-items: center;
cursor: pointer;
position: absolute;
top: 11%;
left: 10%;
}
/* Bild-Wrapper */
.leicht2-wrapper {
position: relative;
width: 39%; /* frei skalierbar */
left: 50%;
transform: translateX(-50%);
height: auto;
transition: color 0.8s ease-in-out;
}
.icon {
height: auto;
position: absolute;
top: 20%;
top: 0;
left: 0;
transition: opacity 0.3s ease-in-out;
}
.icon.hover {
opacity: 0;
}
.leicht2-container:hover .icon.default {
opacity: 0;
}
.leicht2-container:hover .icon.hover {
opacity: 1;
}
/* Text */
.leicht2-text {
text-align: center;
margin-top: 47%;
font-size: clamp(10px, 1.5vw, 18px);
text-align: center;
font-family: 'LEMONMILKBOLD', sans-serif;
color: #a6a6a6;
transition: color 1.2s ease-in-out;
}
.leicht2-container:hover .leicht2-text {
display: inline-block;
background: linear-gradient(90deg, #b4a38a, #A99670, #7caa9a);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent; }
.moderat2-container {
flex-direction: column;
align-items: center;
cursor: pointer;
position: absolute;
top: 11%;
left: 50%;
transform: translateX(-50%);
}
/* Bild-Wrapper */
.moderat2-wrapper {
position: relative;
width: 35%; /* frei skalierbar */
left: 50%;
transform: translateX(-50%);
height: auto;
transition: color 0.8s ease-in-out;
}
.icon {
height: auto;
position: absolute;
top: 20%;
top: 0;
left: 0;
transition: opacity 0.3s ease-in-out;
}
.icon.hover {
opacity: 0;
}
.moderat2-container:hover .icon.default {
opacity: 0;
}
.moderat2-container:hover .icon.hover {
opacity: 1;
}
/* Text */
.moderat2-text {
text-align: center;
margin-top: 42%;
font-size: clamp(10px, 1.5vw, 18px);
text-align: center;
font-family: 'LEMONMILKBOLD', sans-serif;
color: #a6a6a6;
transition: color 1.2s ease-in-out;
}
.moderat2-container:hover .moderat2-text {
display: inline-block;
background: linear-gradient(90deg, #5E4E37, #A99670, #9DB1B4);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent; }
.intense2-container {
flex-direction: column;
align-items: center;
cursor: pointer;
position: absolute;
top: 11%;
right: 10%;
}
/* Bild-Wrapper */
.intense2-wrapper {
position: relative;
width: 33.5%; /* frei skalierbar */
left: 50%;
transform: translateX(-50%);
height: auto;
transition: color 0.8s ease-in-out;
}
.icon {
height: auto;
position: absolute;
top: 20%;
top: 0;
left: 0;
transition: opacity 0.3s ease-in-out;
}
.icon.hover {
opacity: 0;
}
.intense2-container:hover .icon.default {
opacity: 0;
}
.intense2-container:hover .icon.hover {
opacity: 1;
}
/* Text */
.intense2-text {
text-align: center;
margin-top: 37%;
font-size: clamp(10px, 1.5vw, 18px);
text-align: center;
font-family: 'LEMONMILKBOLD', sans-serif;
color: #a6a6a6;
transition: color 1.2s ease-in-out;
}
.intense2-container:hover .intense2-text {
display: inline-block;
background: linear-gradient(90deg, #300101, #717171, #798c82);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent; }
.key-container {
flex-direction: column;
align-items: center;
cursor: pointer;
position: absolute;
transform: translateX(-50%);
top: 21%;
left: 50%;
}
/* Bild-Wrapper */
.key-wrapper {
position: relative;
width: 13%; /* frei skalierbar */
left: 50%;
transform: translateX(-50%);
height: auto;
transition: color 0.8s ease-in-out;
}
.icon {
height: auto;
position: absolute;
top: 20%;
top: 0;
left: 0;
transition: opacity 0.3s ease-in-out;
}
.icon.hover {
opacity: 0;
}
.key-container:hover .icon.default {
opacity: 0;
}
.key-container:hover .icon.hover {
opacity: 1;
}
/* Text */
.key-text {
text-align: left
;
margin-top: 4%;
margin-left: -16%; font-size: clamp(10px, 1.5vw, 18px);
text-align: center;
font-family: 'LEMONMILKBOLD', sans-serif;
color: #080808;
}
.key-container:hover .key-text {
color: #d21c6b; }
.kreis-overlay {
width: 5%;
top: 23%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
display: block;
border-radius: 8px;
z-index: 2; /* Damit der Schatten über dem oberen Bereich liegt */
}
.ruhig-hover-container {
position: absolute;
width: 80%; /* gewünschte Breite */
top: 27%;
left: 50%;
transform: translate(-50%, -50%);
height: auto;
cursor: pointer;
}
.ruhig-hover-container .image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
transition: opacity 0.3s ease-in-out;
}
.ruhig-hover-container .hover {
opacity: 0;
}
.ruhig-hover-container:hover .default {
opacity: 0;
}
.ruhig-hover-container:hover .hover {
opacity: 1;
}
.inform-hover-container {
position: absolute;
width: 80%; /* gewünschte Breite */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: auto;
cursor: pointer;
}
.inform-hover-container .image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
transition: opacity 0.3s ease-in-out;
}
.inform-hover-container .hover {
opacity: 0;
}
.inform-hover-container:hover .default {
opacity: 0;
}
.inform-hover-container:hover .hover {
opacity: 1;
}
.beast-hover-container {
position: absolute;
width: 80%; /* gewünschte Breite */
bottom: 27%;
left: 50%;
transform: translate(-50%, -50%);
height: auto;
cursor: pointer;
}
.beast-hover-container .image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
transition: opacity 0.3s ease-in-out;
}
.beast-hover-container .hover {
opacity: 0;
}
.beast-hover-container:hover .default {
opacity: 0;
}
.beast-hover-container:hover .hover {
opacity: 1;
}
.restaurant-container {
flex-direction: column;
align-items: center;
cursor: pointer;
position: absolute;
top: 17%;
left: 4%;
}
/* Bild-Wrapper */
.restaurant-wrapper {
position: relative;
width: 11%; /* frei skalierbar */
height: auto;
}
.icon {
width: 100%;
height: auto;
position: absolute;
top: 20%;
top: 0;
left: 0;
}
.icon.hover {
opacity: 0;
}
.restaurant-container:hover .icon.default {
opacity: 0;
}
.restaurant-container:hover .icon.hover {
opacity: 1;
}
/* Text */
.restaurant-text {
text-align: left;
margin-top: 0%;
margin-left: 13%;
font-size: clamp(14px, 2vw, 18px);
font-family: 'Avenirlight', sans-serif;
color: #f4f4f4;
max-width: 520px;
}
.restaurant-container .highlightrestaurantone-text {
display: inline-block;
font-family: 'LEMONMILKBOLD', sans-serif;
color: #f4f4f4; }
.restaurant-container:hover .restaurant-text {
display: inline-block;
color: #e73092; }
.restaurant-container:hover .highlightrestaurantone-text {
display: inline-block;
color: #e73092;
}
.erreichbarkeit-container {
flex-direction: column;
align-items: center;
cursor: pointer;
position: absolute;
top: 47%;
left: 4%;
}
/* Bild-Wrapper */
.erreichbarkeit-wrapper {
position: relative;
width: 11%; /* frei skalierbar */
height: auto;
}
.icon {
width: 100%;
height: auto;
position: absolute;
top: 20%;
top: 0;
left: 0;
}
.icon.hover {
opacity: 0;
}
.erreichbarkeit-container:hover .icon.default {
opacity: 0;
}
.erreichbarkeit-container:hover .icon.hover {
opacity: 1;
}
/* Text */
.erreichbarkeit-text {
text-align: left;
margin-top: 0%;
margin-left: 13%;
font-size: clamp(14px, 2vw, 18px);
font-family: 'Avenirlight', sans-serif;
color: #f4f4f4;
max-width: 520px;
}
.erreichbarkeit-container .highlightverreichbarkeitone-text {
display: inline-block;
font-family: 'LEMONMILKBOLD', sans-serif;
color: #f4f4f4; }
.erreichbarkeit-container:hover .erreichbarkeit-text {
display: inline-block;
color: #e73092; }
.erreichbarkeit-container:hover .highlightverreichbarkeitone-text {
display: inline-block;
color: #e73092;
}
.exercise-container {
flex-direction: column;
align-items: center;
cursor: pointer;
position: absolute;
top: 26%;
left: 4%;
}
/* Bild-Wrapper */
.exercise-wrapper {
position: relative;
width: 11%; /* frei skalierbar */
height: auto;
}
.icon {
width: 100%;
height: auto;
position: absolute;
top: 20%;
top: 0;
left: 0;
}
.icon.hover {
opacity: 0;
}
.exercise-container:hover .icon.default {
opacity: 0;
}
.exercise-container:hover .icon.hover {
opacity: 1;
}
/* Text */
.exercise-text {
text-align: left;
margin-top: 0%;
margin-left: 13%;
font-size: clamp(14px, 2vw, 18px);
font-family: 'Avenirlight', sans-serif;
color: #f4f4f4;
max-width: 520px;
}
.exercise-container .highlightexerciseone-text {
display: inline-block;
font-family: 'LEMONMILKBOLD', sans-serif;
color: #f4f4f4;
line-height: 1;
}
.exercise-container:hover .exercise-text {
display: inline-block;
color: #e73092; }
.exercise-container:hover .highlightexerciseone-text {
display: inline-block;
color: #e73092;
}
.videocall-container {
flex-direction: column;
align-items: center;
cursor: pointer;
position: absolute;
top: 36%;
left: 4%;
}
/* Bild-Wrapper */
.videocall-wrapper {
position: relative;
width: 11%; /* frei skalierbar */
height: auto;
}
.icon {
width: 100%;
height: auto;
position: absolute;
top: 20%;
top: 0;
left: 0;
}
.icon.hover {
opacity: 0;
}
.videocall-container:hover .icon.default {
opacity: 0;
}
.videocall-container:hover .icon.hover {
opacity: 1;
}
/* Text */
.videocall-text {
text-align: left;
margin-top: 0%;
margin-left: 13%;
font-size: clamp(14px, 2vw, 18px);
font-family: 'Avenirlight', sans-serif;
color: #f4f4f4;
max-width: 520px;
}
.videocall-container .highlightvideocallone-text {
display: inline-block;
font-family: 'LEMONMILKBOLD', sans-serif;
color: #f4f4f4;
line-height: 1;
}
.videocall-container:hover .videocall-text {
display: inline-block;
color: #e73092; }
.videocall-container:hover .highlightvideocallone-text {
display: inline-block;
color: #e73092;
}
.socialm-container {
flex-direction: column;
align-items: center;
cursor: pointer;
position: absolute;
top: 58%;
left: 4%;
}
/* Bild-Wrapper */
.socialm-wrapper {
position: relative;
width: 11%; /* frei skalierbar */
height: auto;
}
.icon {
width: 100%;
height: auto;
position: absolute;
top: 20%;
top: 0;
left: 0;
}
.icon.hover {
opacity: 0;
}
.socialm-container:hover .icon.default {
opacity: 0;
}
.socialm-container:hover .icon.hover {
opacity: 1;
}
/* Text */
.socialm-text {
text-align: left;
margin-top: 0%;
margin-left: 13%;
font-size: clamp(14px, 2vw, 18px);
font-family: 'Avenirlight', sans-serif;
color: #f4f4f4;
max-width: 520px;
}
.socialm-container .socialmLINK {
font-family: 'LexendBold', sans-serif;
color: #f4f4f4;
line-height: 1;
}
.socialm-container .highlightsocialmone-text {
display: inline-block;
font-family: 'LEMONMILKBOLD', sans-serif;
color: #f4f4f4;
line-height: 1;
}
.socialm-container:hover .socialmLINK {
color: #e73092; }
.socialm-container:hover .socialm-text {
display: inline-block;
color: #e73092; }
.socialm-container:hover .highlightsocialmone-text {
display: inline-block;
color: #e73092;
}
.section-10 {
background-color: #CDD1DC;
padding: 750px 0; /* Oben und unten Abstand */
position: relative;
z-index: 0; /* Damit der Schatten über dem oberen Bereich liegt */
}
.tenonetitle-text {
font-family: 'SignatureDecember', sans-serif;
font-size: clamp(34px, 3.2vw, 42px);
color: #d21c6b;
position: absolute;
top: 6.1%;
left: 4%;
line-height: 0.9;
z-index: 1;
}
.highlighttenoneone-text {
font-family: 'SignatureDecember', sans-serif;
text-decoration: underline;
text-underline-offset: 10px;
font-size: clamp(34px, 3.2vw, 42px);
backdrop-filter:#d21c6b ;
color: #ffffff;
line-height: 0.9;
}
.tentwotitle-text {
color: #0d0d0d;
position: absolute;
top: 12%;
left: 4%;
max-width: 720px;
font-family: 'LEMONMILKLIGHT', sans-serif;
font-size: clamp(18px, 2vw, 21px);
line-height: 0.8;
z-index: 0;
}
.highlightirgendwas-text {
color: #0d0d0d;
font-family: 'LEMONMILKBOLD', sans-serif;
}
.tenoneone-text {
color: #d21c6b;
position: absolute;
top: 17%;
left: 4%;
max-width: 720px;
font-family: 'Avenirlight', sans-serif;
font-size: clamp(18px, 2.4vw, 18px);
z-index: 0;
line-height: 1.1;
}
.highlighttentwoone-text {
color: #d21c6b;
font-weight: bold;
font-family: 'Avenirmedium', sans-serif;
font-size: clamp(18px, 2.4vw, 18px);
z-index: 0;
}
.highlighttentwothree-text {
color: #0d0d0d;
font-weight: bold;
font-family: 'Avenirmedium', sans-serif;
font-size: clamp(18px, 2.4vw, 18px);
z-index: 0;
}
.highlighttentwofour-text {
color: #0d0d0d;
font-weight: bold;
text-decoration-line: underline;
text-decoration-color: #d21c6b ;
font-family: 'Avenirmedium', sans-serif;
font-size: clamp(18px, 2.4vw, 18px);
z-index: 0;
}
.highlighttentwofive-text {
color: #0d0d0d;
font-weight: bold;
font-family: 'Beauty', sans-serif;
font-size: clamp(47px, 5.1vw, 51px);
z-index: 0;
}
.section-5 {
background-color: #0f0f0f;
padding: 90px 0; /* Oben und unten Abstand */
position: relative;
box-shadow: 0 40px -50px -30px rgba(0, 0, 0, 0.6); /* Schatten nach unten */
box-shadow: 0 40px 50px 30px rgba(0, 0, 0, 0.6); /* Schatten nach unten */
z-index: 4;
}
.section-6 {
background-color: #0f0f0f;
padding: 350px 0; /* Oben und unten Abstand */
position: relative;
box-shadow: 0 -20px 40px ;
overflow: hidden; z-index: 0;
}
.bfq-video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
transform: translate(-50%, -50%);
object-fit: cover;
z-index: 0;
}
.bfq1-video {
position: absolute;
top: 70%;
left: 50%;
min-width: 100%;
min-height: 100%;
transform: translate(-50%, -50%);
object-fit: cover;
z-index: 0;
}
.section-7 {
background-color: #0f0f0f;
padding: 400px 0; /* Oben und unten Abstand */
position: relative;
box-shadow: 0 20px 50px 30px rgba(0, 0, 0, 0.6); /* Schatten nach unten */
z-index: 2;
}
/* Text unterhalb */
.seventitle-text {
top: 2%;
left: 50%;
transform: translateX(-50%);
text-align: center;
font-size: clamp(26px, 3vw, 32px);
position: absolute;
color: #d21c6b;
font-family: 'Louisgeorgecafebold', sans-serif;
line-height: 0.6; z-index: 1;
}
/* Beim Hover sichtbar & orange */
.higlightseventitleone{
font-family: 'Beauty', sans-serif;
color: #f4f4f4;
z-index: 3;
font-size: clamp(86px, 7vw, 92px);
}
.MDMA-container {
flex-direction: column;
align-items: center;
cursor: pointer;
position: absolute;
top: 12%;
left: 20%;
}
/* Bild-Wrapper */
.MDMA-wrapper {
position: relative;
width: 11%; /* frei skalierbar */
height: auto;
}
.icon {
width: 100%;
height: auto;
position: absolute;
top: 20%;
top: 0;
left: 0;
}
.icon.hover {
opacity: 0;
}
.MDMA-container:hover .icon.default {
opacity: 0;
}
.MDMA-container:hover .icon.hover {
opacity: 1;
}
/* Text */
.MDMA-text {
text-align: left;
margin-top: 0%;
margin-left: 13%;
font-size: clamp(12px, 1.2vw, 13px);
font-family: 'Avenirlight', sans-serif;
color: #ececec;
max-width: 520px;
line-height: 1.4;
}
.MDMA-container .highlightMDMAone {
display: inline-block;
font-family: 'LEMONMILKBOLD', sans-serif;
font-size: clamp(18px, 1.8vw, 21px);
color:#ececec; }
.MDMA-container .highlightboldlex {
display: inline-block;
font-family: 'LexendBold', sans-serif;
font-size: clamp(12px, 1.2vw, 13px);
color:#ececec; }
.MDMA-container:hover .MDMA-text {
display: inline-block;
color: #d21c6b; }
.MDMA-container:hover .highlightMDMAone {
display: inline-block;
color: #d21c6b; }
.MDMA-container:hover .highlightboldlex {
display: inline-block;
color: #d21c6b; }
.Bewegungs-container {
flex-direction: column;
align-items: center;
cursor: pointer;
position: absolute;
top: 12%;
right: 20%;
}
/* Bild-Wrapper */
.Bewegungs-wrapper {
position: relative;
width: 11%; /* frei skalierbar */
height: auto;
}
.icon {
width: 100%;
height: auto;
position: absolute;
top: 20%;
top: 0;
left: 0;
}
.icon.hover {
opacity: 0;
}
.Bewegungs-container:hover .icon.default {
opacity: 0;
}
.Bewegungs-container:hover .icon.hover {
opacity: 1;
}
/* Text */
.Bewegungs-text {
text-align: left;
margin-top: 0%;
margin-left: 13%;
font-size: clamp(12px, 1.2vw, 13px);
font-family: 'Avenirlight', sans-serif;
color: #ececec;
max-width: 520px;
line-height: 1.4;
}
.Bewegungs-container .highlightBewegungsone {
display: inline-block;
font-family: 'LEMONMILKBOLD', sans-serif;
font-size: clamp(18px, 1.8vw, 21px);
color:#ececec; }
.Bewegungs-container .highlightboldlex {
display: inline-block;
font-family: 'LexendBold', sans-serif;
font-size: clamp(12px, 1.2vw, 13px);
color:#ececec; }
.Bewegungs-container:hover .Bewegungs-text {
display: inline-block;
color: #d21c6b; }
.Bewegungs-container:hover .highlightBewegungsone {
display: inline-block;
color: #d21c6b; }
.Bewegungs-container:hover .highlightboldlex {
display: inline-block;
color: #d21c6b; }
.Mentaltraining-container {
flex-direction: column;
align-items: center;
cursor: pointer;
position: absolute;
bottom: 43%;
left: 20%;
}
/* Bild-Wrapper */
.Mentaltraining-wrapper {
position: relative;
width: 13%; /* frei skalierbar */
height: auto;
}
.icon {
width: 100%;
height: auto;
position: absolute;
top: 20%;
top: 0;
left: 0;
}
.icon.hover {
opacity: 0;
}
.Mentaltraining-container:hover .icon.default {
opacity: 0;
}
.Mentaltraining-container:hover .icon.hover {
opacity: 1;
}
/* Text */
.Mentaltraining-text {
text-align: left;
margin-top: 0%;
margin-left: 16%;
font-size: clamp(12px, 1.2vw, 13px);
font-family: 'Avenirlight', sans-serif;
color: #ececec;
max-width: 520px;
line-height: 1.4;
}
.Mentaltraining-container .highlightMentaltrainingsone {
display: inline-block;
font-family: 'LEMONMILKBOLD', sans-serif;
font-size: clamp(18px, 1.8vw, 21px);
color:#ececec; }
.Mentaltraining-container .highlightboldlex {
display: inline-block;
font-family: 'LexendBold', sans-serif;
font-size: clamp(12px, 1.2vw, 13px);
color:#ececec; }
.Mentaltraining-container:hover .Mentaltraining-text {
display: inline-block;
color: #d21c6b; }
.Mentaltraining-container:hover .highlightMentaltrainingsone {
display: inline-block;
color: #d21c6b; }
.Mentaltraining-container:hover .highlightboldlex {
display: inline-block;
color: #d21c6b; }
.handbuch-container {
flex-direction: column;
align-items: center;
cursor: pointer;
position: absolute;
bottom: 13%;
right: 20%;
}
/* Bild-Wrapper */
.handbuch-wrapper {
position: relative;
width: 13%; /* frei skalierbar */
height: auto;
}
.icon {
width: 100%;
height: auto;
position: absolute;
top: 20%;
top: 0;
left: 0;
}
.icon.hover {
opacity: 0;
}
.handbuch-container:hover .icon.default {
opacity: 0;
}
.handbuch-container:hover .icon.hover {
opacity: 1;
}
/* Text */
.handbuch-text {
text-align: left;
margin-top: 0%;
margin-left: 16%;
font-size: clamp(12px, 1.2vw, 13px);
font-family: 'Avenirlight', sans-serif;
color: #ececec;
max-width: 520px;
line-height: 1.4;
}
.handbuch-container .highlighthandbuchone {
display: inline-block;
font-family: 'LEMONMILKBOLD', sans-serif;
font-size: clamp(18px, 1.8vw, 21px);
color:#ececec; }
.handbuch-container .highlightboldlex {
display: inline-block;
font-family: 'LexendBold', sans-serif;
font-size: clamp(12px, 1.2vw, 13px);
color:#ececec; }
.handbuch-container:hover .handbuch-text {
display: inline-block;
color: #d21c6b; }
.handbuch-container:hover .highlighthandbuchone {
display: inline-block;
color: #d21c6b; }
.handbuch-container:hover .highlightboldlex {
display: inline-block;
color: #d21c6b; }
.digitalknow-container {
flex-direction: column;
align-items: center;
cursor: pointer;
position: absolute;
bottom: 13%;
left: 20%;
}
/* Bild-Wrapper */
.digitalknow-wrapper {
position: relative;
width: 11%; /* frei skalierbar */
height: auto;
}
.icon {
width: 100%;
height: auto;
position: absolute;
top: 20%;
top: 0;
left: 0;
}
.icon.hover {
opacity: 0;
}
.digitalknow-container:hover .icon.default {
opacity: 0;
}
.digitalknow-container:hover .icon.hover {
opacity: 1;
}
/* Text */
.digitalknow-text {
text-align: left;
margin-top: 0%;
margin-left: 13%;
font-size: clamp(12px, 1.2vw, 13px);
font-family: 'Avenirlight', sans-serif;
color: #ececec;
max-width: 520px;
line-height: 1.4;
}
.digitalknow-container .highlightdigitalknowone {
display: inline-block;
font-family: 'LEMONMILKBOLD', sans-serif;
font-size: clamp(18px, 1.8vw, 21px);
color:#ececec; }
.digitalknow-container .highlightboldlex {
display: inline-block;
font-family: 'LexendBold', sans-serif;
font-size: clamp(12px, 1.2vw, 13px);
color:#ececec; }
.digitalknow-container:hover .digitalknow-text {
display: inline-block;
color: #d21c6b; }
.digitalknow-container:hover .highlightdigitalknowone {
display: inline-block;
color: #d21c6b; }
.digitalknow-container:hover .highlightboldlex {
display: inline-block;
color: #d21c6b; }
.section-8 {
z-index: 1;
background-color: #CDD1DC;
padding: 430px 0; /* Oben und unten Abstand */
position: relative;
box-shadow: 0 20px 50px 30px rgba(0, 0, 0, 0.6); /* Schatten nach unten */
/* -------------------------------
Box-Shadow erklärt:
0 → Kein horizontaler Versatz (bleibt zentriert)
20px → Vertikaler Versatz nach unten (Schatten fällt nach unten)
40px → Weichzeichner-Radius (wie verschwommen der Schatten wirkt)
-10px → Ausbreitung (negativ = kompakter)
rgba(0, 0, 0, 0.6) → Farbe: halbtransparenter Schwarzton
-------------------------------- */
z-index: 1; /* Damit der Schatten über dem oberen Bereich liegt */
}
.eightitleone{
font-family: 'Beauty', sans-serif;
color: #0e0e0e;
z-index: 1;
position: absolute;
top: 1%;
left: 4%;
font-size: clamp(86px, 7vw, 92px);
}
.avenir {
text-align: left;
position: absolute;
top: 22%;
left: 7%;
font-size: clamp(14px, 2vw, 18px);
font-family: 'Avenirlight', sans-serif;
color: #0c0c0c;
max-width: 25%;
}
.highlightboldlexb1 {
text-align: left;
font-size: clamp(11px, 2vw, 13x);
font-family: 'LexendBold', sans-serif;
color: #d21c6b;
}
.highlightboldlexb {
text-align: left;
font-size: clamp(11px, 2vw, 13x);
font-family: 'LexendBold', sans-serif;
}
.highlightboldlexu {
text-align: left;
text-decoration: underline
; text-decoration-color: #d21c6b ;
text-decoration-thickness: 5px;
font-size: clamp(11px, 2vw, 182x);
font-family: 'LexendBold', sans-serif;
}
.highlightx {
font-size: clamp(126px, 7vw, 130px);
font-family: 'Beauty', sans-serif;
top: 3%;
left: 4%;
color: #0c0c0c;
position: absolute;
}
.avenirtwo {
text-align: left;
position: absolute;
top: 31%;
left: 7%;
font-size: clamp(14px, 2vw, 18px);
font-family: 'Avenirlight', sans-serif;
color: #0c0c0c;
max-width: 30%;
}
.highlightxtwo {
font-size: clamp(126px, 7vw, 130px);
font-family: 'Beauty', sans-serif;
top: 12%;
left: 4%;
color: #0c0c0c;
position: absolute;
}
.avenirthree {
text-align: left;
position: absolute;
top: 41%;
left: 7%;
font-size: clamp(14px, 2vw, 18px);
font-family: 'Avenirlight', sans-serif;
color: #0c0c0c;
max-width: 30%;
}
.highlightxthree {
font-size: clamp(126px, 7vw, 130px);
font-family: 'Beauty', sans-serif;
top: 23%;
left: 4%;
color: #0c0c0c;
position: absolute;
}
.avenirfour{
text-align: left;
position: absolute;
top: 53%;
left: 7%;
font-size: clamp(14px, 2vw, 18px);
font-family: 'Avenirlight', sans-serif;
color: #0c0c0c;
max-width: 30%;
}
/* Beim Hover sichtbar & orange */
.fivetitle{
color: #e9e9e9;
top: 4%;
left: 4%;
font-family: 'LEMONMILKBOLD', sans-serif;
font-size: clamp(26px, 5vw, 32px);
position: absolute;
line-height: 0.6;
}
.ghfivet{
color: #d21c6b;
font-family: 'Beauty', sans-serif;
font-size: clamp(76px, 5vw, 82px);
}
.section-9 {
z-index: 1;
background-color: #0f0f0f;
padding: 130px 0; /* Oben und unten Abstand */
position: relative;
box-shadow: 0 20px 50px 30px rgba(0, 0, 0, 0.6); /* Schatten nach unten */
box-shadow: 0 20px -50px 30px rgba(0, 0, 0, 0.6); /* Schatten nach unten */
/* -------------------------------
Box-Shadow erklärt:
0 → Kein horizontaler Versatz (bleibt zentriert)
20px → Vertikaler Versatz nach unten (Schatten fällt nach unten)
40px → Weichzeichner-Radius (wie verschwommen der Schatten wirkt)
-10px → Ausbreitung (negativ = kompakter)
rgba(0, 0, 0, 0.6) → Farbe: halbtransparenter Schwarzton
-------------------------------- */
z-index: 3; /* Damit der Schatten über dem oberen Bereich liegt */
}
.afour-overlay {
width: 27%;
bottom: 0%;
right: 20%;
position: absolute;
display: block;
border-radius: 8px;
z-index: 4; /* Damit der Schatten über dem oberen Bereich liegt */
}
.bowl-overlay {
width: 24%;
bottom: 10%;
right: 4%;
position: absolute;
display: block;
border-radius: 8px;
z-index: 2; /* Damit der Schatten über dem oberen Bereich liegt */
}
.topf-overlay {
width: 27%;
bottom: 0%;
right: 37%;
position: absolute;
display: block;
border-radius: 8px;
z-index: 2; /* Damit der Schatten über dem oberen Bereich liegt */
}
.ninetitle{
color: #e9e9e9;
position: absolute;
top: 12%;
left: 4%;
max-width: 45%;
font-family: 'LEMONMILKLIGHT', sans-serif;
font-size: clamp(32px, 4.2vw, 34px);
line-height: 1;
z-index: 0;
}
.hgnine {
color: #d21c6b;
font-family: 'LEMONMILKBOLD', sans-serif;
line-height: 0.8;
}
.section-10 {
z-index: 1;
background-color: #CDD1DC;
padding: 730px 0; /* Oben und unten Abstand */
position: relative;
box-shadow: 0 20px 50px 30px rgba(0, 0, 0, 0.6); /* Schatten nach unten */
overflow: hidden;
/* -------------------------------
Box-Shadow erklärt:
0 → Kein horizontaler Versatz (bleibt zentriert)
20px → Vertikaler Versatz nach unten (Schatten fällt nach unten)
40px → Weichzeichner-Radius (wie verschwommen der Schatten wirkt)
-10px → Ausbreitung (negativ = kompakter)
rgba(0, 0, 0, 0.6) → Farbe: halbtransparenter Schwarzton
-------------------------------- */
z-index: 1; /* Damit der Schatten über dem oberen Bereich liegt */
}
.tentitle{
color: #080808;
position: absolute;
top: 4%;
left: 4%;
font-family: 'LEMONMILKLIGHT', sans-serif;
font-size: clamp(32px, 4.2vw, 34px);
line-height: 1;
z-index: 0;
}
.hgten {
font-size: clamp(96px, 7vw, 100px);
font-family: 'Beauty', sans-serif; line-height: 0.8;
}
.avenirten{
text-align: left;
position: absolute;
top: 22%;
left: 4%;
font-size: clamp(14px, 2vw, 18px);
font-family: 'Avenirlight', sans-serif;
color: #0c0c0c;
max-width: 30%;
}
.highlightboldles {
text-align: left;
font-size: clamp(9px, 2vw, 11x);
font-family: 'LexendBold', sans-serif;
}
.iphonekompetenz-overlay {
width: 22%;
bottom: 5%;
right: 5%;
position: absolute;
display: block;
z-index: 4; /* Damit der Schatten über dem oberen Bereich liegt */
}
.iPad-overlay {
width: 55%;
bottom: 35%;
right: 5%;
position: absolute;
display: block;
z-index: 3; /* Damit der Schatten über dem oberen Bereich liegt */
}
.pad2-overlay {
width: 59%;
bottom: 0%;
left: 5%;
position: absolute;
display: block;
z-index: 2; /* Damit der Schatten über dem oberen Bereich liegt */
}
.scroll-button1 {
position: absolute;
left: 4%;
padding: 12px 28px;
font-size: clamp(14px, 1.8vw, 22px);
font-family: 'Avenirmedium', sans-serif;
color: #efefef; /* Schriftfarbe = Rahmenfarbe */
background-color: #e73092;
border-radius: 12px;
text-decoration: none;
transition: all 0.3s ease;
cursor: pointer;
bottom: 50%;
}
.scroll-button1:hover {
background-color: #3e0035;
color: white;
}
.section-11 {
z-index: 3;
background-color: #0f0f0f;
padding: 730px 0; /* Oben und unten Abstand */
position: relative;
box-shadow: 0 30px -50px 30px rgba(66, 66, 66, 0.6); /* Schatten nach unten */
box-shadow: 0 -30px 40px 20px rgba(60, 60, 60, 0.6); /* Schatten nach unten */
/* -------------------------------
Box-Shadow erklärt:
0 → Kein horizontaler Versatz (bleibt zentriert)
20px → Vertikaler Versatz nach unten (Schatten fällt nach unten)
40px → Weichzeichner-Radius (wie verschwommen der Schatten wirkt)
-10px → Ausbreitung (negativ = kompakter)
rgba(0, 0, 0, 0.6) → Farbe: halbtransparenter Schwarzton
-------------------------------- */
z-index: 3; /* Damit der Schatten über dem oberen Bereich liegt */
}
.eleventitle{
color: #f0f0f0;
position: absolute;
top: 4%;
left: 4%;
font-family: 'LEMONMILKBOLD', sans-serif;
font-size: clamp(32px, 4.2vw, 34px);
line-height: 1;
z-index: 0;
}
.hgeleven {
font-size: clamp(96px, 7vw, 100px);
font-family: 'Beauty', sans-serif; line-height: 0.8;
color: #e73092;
}
.ep1-overlay {
width: 42%;
top: 33%;
right: 20%;
position: absolute;
display: block;
border-radius: 8px;
z-index: 3; /* Damit der Schatten über dem oberen Bereich liegt */
}
.sweet-overlay {
width: 31%;
top: 13%;
right: 7%;
position: absolute;
display: block;
border-radius: 8px;
z-index: 2; /* Damit der Schatten über dem oberen Bereich liegt */
}
.mito-overlay {
width: 17%;
top: 15%;
right: 49%;
position: absolute;
display: block;
border-radius: 8px;
z-index: 1; /* Damit der Schatten über dem oberen Bereich liegt */
}
.sport-overlay {
width: 22%;
top: 29%;
right: 7%;
position: absolute;
display: block;
border-radius: 8px;
z-index: 4; /* Damit der Schatten über dem oberen Bereich liegt */
}
.FETTLEBER-overlay {
width: 17%;
bottom: 5%;
right: 7%;
position: absolute;
display: block;
border-radius: 8px;
z-index: 4; /* Damit der Schatten über dem oberen Bereich liegt */
}
.b-overlay {
width: 37%;
bottom: 5%;
right: 27%;
position: absolute;
display: block;
border-radius: 8px;
z-index: 4; /* Damit der Schatten über dem oberen Bereich liegt */
}
.section-12 {
background-color: #ad236c;
padding: 90px 0; /* Oben und unten Abstand */
position: relative;
box-shadow: 0 30px -50px 30px rgba(0, 0, 0, 0.6); /* Schatten nach unten */
box-shadow: 0 30px 50px 30px rgba(0, 0, 0, 0.6); /* Schatten nach unten */
/* -------------------------------
Box-Shadow erklärt:
0 → Kein horizontaler Versatz (bleibt zentriert)
20px → Vertikaler Versatz nach unten (Schatten fällt nach unten)
40px → Weichzeichner-Radius (wie verschwommen der Schatten wirkt)
-10px → Ausbreitung (negativ = kompakter)
rgba(0, 0, 0, 0.6) → Farbe: halbtransparenter Schwarzton
-------------------------------- */
z-index: 3; /* Damit der Schatten über dem oberen Bereich liegt */
}
.twelvetitle{
color: #e9e9e9;
position: absolute;
top: 12%;
left: 4%;
max-width: 45%;
font-family: 'LEMONMILKLIGHT', sans-serif;
font-size: clamp(32px, 4.2vw, 34px);
line-height: 1;
z-index: 0;
}
.hgtwelvetitle {
font-family: 'LEMONMILKBOLD', sans-serif;
line-height: 0.8;
}
.section-13 {
background-color: #500e31;
padding: 830px 0; /* Oben und unten Abstand */
position: relative;
box-shadow: 0 30px -50px 30px rgba(0, 0, 0, 0.6); /* Schatten nach unten */
/* -------------------------------
Box-Shadow erklärt:
0 → Kein horizontaler Versatz (bleibt zentriert)
20px → Vertikaler Versatz nach unten (Schatten fällt nach unten)
40px → Weichzeichner-Radius (wie verschwommen der Schatten wirkt)
-10px → Ausbreitung (negativ = kompakter)
rgba(0, 0, 0, 0.6) → Farbe: halbtransparenter Schwarzton
-------------------------------- */
z-index: 1; /* Damit der Schatten über dem oberen Bereich liegt */
}
.mpg-container {
flex-direction: column;
align-items: center;
cursor: pointer;
position: absolute;
top: 8%;
left: 42%;
}
/* Bild-Wrapper */
.mpg-wrapper {
position: absolute;
width: 70%; /* frei skalierbar */
height: auto;
}
.mpg-wrapper2 {
position: absolute;
width: 11%; /* frei skalierbar */
height: auto;
left: -62%;
}
.icon {
width: 100%;
height: auto;
position: absolute;
top: 0;
left: 0;
transition: opacity 0.3s ease-in-out;
border-radius: 11px;
}
.icon.hover {
opacity: 0;
}
.mpg-container:hover .icon.default {
opacity: 0;
}
.mpg-container:hover .icon.hover {
opacity: 1;
}
/* Text */
.mpg-text {
text-align: left;
margin-top: 0%;
margin-left: -47%;
font-size: clamp(10px, 1.5vw, 18px);
font-family: 'Avenirlight', sans-serif;
color: #202020;
transition: color 0.3s ease-in-out;
max-width: 40%;
}
.mpg-container .hgmpg{
text-align: left;
font-family: 'LEMONMILKBOLD', sans-serif;
color: #202020;
font-size: clamp(18px, 2.2vw, 22px);
transition: color 0.3s ease-in-out;
}
.mpg-container:hover .hgmpg{
text-align: left;
color: #ffffff;
transition: color 0.3s ease-in-out;
}
.mpg-container:hover .mpg-text {
color: #ffffff;
}
.ebook2-container {
flex-direction: column;
align-items: center;
cursor: pointer;
position: absolute;
top: 40%;
left: 42%;
}
/* Bild-Wrapper */
.ebook2-wrapper {
position: absolute;
width: 70%; /* frei skalierbar */
height: auto;
}
.ebook2-wrapper2 {
position: absolute;
width: 11%; /* frei skalierbar */
height: auto;
left: -62%;
}
.icon {
width: 100%;
height: auto;
position: absolute;
top: 0;
left: 0;
transition: opacity 0.3s ease-in-out;
border-radius: 11px;
}
.icon.hover {
opacity: 0;
}
.ebook2-container:hover .icon.default {
opacity: 0;
}
.ebook2-container:hover .icon.hover {
opacity: 1;
}
/* Text */
.ebook2-text {
text-align: left;
margin-top: 0%;
margin-left: -47%;
font-size: clamp(10px, 1.5vw, 18px);
font-family: 'Avenirlight', sans-serif;
color: #202020;
transition: color 0.3s ease-in-out;
max-width: 40%;
}
.ebook2-container .hgebook2{
text-align: left;
font-family: 'LEMONMILKBOLD', sans-serif;
color: #202020;
font-size: clamp(18px, 2.2vw, 22px);
transition: color 0.3s ease-in-out;
}
.ebook2-container:hover .hgebook2{
text-align: left;
color: #ffffff;
transition: color 0.3s ease-in-out;
}
.ebook2-container:hover .ebook2-text {
color: #ffffff;
}
.reci2-container {
flex-direction: column;
align-items: center;
cursor: pointer;
position: absolute;
bottom: 0%;
left: 42%;
}
/* Bild-Wrapper */
.reci2-wrapper {
position: relative;
width: 70%; /* frei skalierbar */
height: auto;
}
.reci2-wrapper2 {
position: relative;
width: 11%; /* frei skalierbar */
height: auto;
left: -62%;
}
.icon {
width: 100%;
height: auto;
position: absolute;
top: 0;
left: 0;
transition: opacity 0.3s ease-in-out;
border-radius: 11px;
}
.icon.hover {
opacity: 0;
}
.reci2-container:hover .icon.default {
opacity: 0;
}
.reci2-container:hover .icon.hover {
opacity: 1;
}
/* Text */
.reci2-text {
text-align: left;
margin-top: 0%;
margin-left: -47%;
font-size: clamp(10px, 1.5vw, 18px);
font-family: 'Avenirlight', sans-serif;
color: #202020;
transition: color 0.3s ease-in-out;
max-width: 40%;
}
.reci2-container .hgereci2{
text-align: left;
font-family: 'LEMONMILKBOLD', sans-serif;
color: #202020;
font-size: clamp(18px, 2.2vw, 22px);
transition: color 0.3s ease-in-out;
}
.reci2-container:hover .hgereci2{
text-align: left;
color: #ffffff;
transition: color 0.3s ease-in-out;
}
.reci2-container:hover .reci2-text {
color: #ffffff;
}
.section-14 {
background-color: #ad236c;
padding: 510px 0; /* Oben und unten Abstand */
position: relative;
box-shadow: 0 30px -50px 30px rgba(0, 0, 0, 0.6); /* Schatten nach unten */
box-shadow: 0 30px 50px 30px rgba(0, 0, 0, 0.6); /* Schatten nach unten */
overflow: hidden;
/* -------------------------------
Box-Shadow erklärt:
0 → Kein horizontaler Versatz (bleibt zentriert)
20px → Vertikaler Versatz nach unten (Schatten fällt nach unten)
40px → Weichzeichner-Radius (wie verschwommen der Schatten wirkt)
-10px → Ausbreitung (negativ = kompakter)
rgba(0, 0, 0, 0.6) → Farbe: halbtransparenter Schwarzton
-------------------------------- */
z-index: 3; /* Damit der Schatten über dem oberen Bereich liegt */
}
.est-button {
display: inline-block;
position: absolute;
top: 37%;
left: 4%;
padding: 14px 58px; /* ↑↓ ←→ Abstand */
font-size: clamp(14px, 1.4vw, 18px); /* Skalierbare Größe */
font-family: 'LexendBold', sans-serif;
color: #ad236c;
background-color: #fafafa;
border: none;
border-radius: 8px;
text-decoration: none;
z-index: 6;
}
.est-button:hover {
background-color: #363636;
color: #d21c6b;
}
.fourteentitle{
color: #e9e9e9;
position: absolute;
top: 4%;
left: 4%;
max-width: 45%;
font-family: 'LEMONMILKBOLD', sans-serif;
font-size: clamp(32px, 4.2vw, 34px);
line-height: 1;
z-index: 0;
}
.hgfourteentitle {
color: #f3f3f3;
font-family: 'LEMONMILKLIGHT', sans-serif;
font-size: clamp(22px, 3vw, 25px);
line-height: 0.8;
}
.btfourteentitle {
font-size: clamp(96px, 7vw, 100px);
font-family: 'Beauty', sans-serif; line-height: 0.8;
color: #f4f4f4;
}
.instalap-overlay {
width: 51%;
bottom: -2%;
position: absolute;
display: block;
left: 3%;
}
.Krankheitserfassung-overlay {
width: 23%;
bottom: 7%;
position: absolute;
display: block;
right: 3%;
}
.instaway-overlay {
width: 23%;
bottom: 0%;
position: absolute;
display: block;
right: 29%;
}
.instafi-overlay {
position: absolute;
bottom: 12%;
left: 12%;
width: 30%;
max-width: 420px;
height: auto;
overflow: hidden;
}
/* Standardbild (sichtbar bei Start) */
.instafi-overlay img.default {
width: 100%; /* Passt sich dem Container an */
height: auto;
transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}
/* Hover-Effekt: Das Bild wird zum weißen Icon */
.instafi-overlay:hover img.default {
opacity: 0; /* Standardbild wird unsichtbar */
}
/* Weißes Icon (ersetzt das Standardbild) */
.instafi-overlay img.hover {
width: 100%; /* Passt sich dem Container an */
height: auto; /* Behält das Seitenverhältnis bei */
position: absolute; /* Position innerhalb des Containers */
top: 0; /* Position oben im Container */
left: 0; /* Position links im Container */
opacity: 0; /* Startet unsichtbar */
transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}
/* Hover-Effekt: Das weiße Bild wird sichtbar */
.instafi-overlay:hover img.hover {
opacity: 1; /* Weißes Bild wird sichtbar */
}
.avenirft{
text-align: left;
position: absolute;
top: 22%;
left: 4%;
font-size: clamp(14px, 2vw, 18px);
font-family: 'Avenirlight', sans-serif;
color: #e6e6e6;
max-width: 30%;
}
.highlightboldft {
text-align: left;
font-size: clamp(9px, 2vw, 11x);
font-family: 'LexendBold', sans-serif;
}
.section-15 {
background-color: #1a1a1a;
padding: 610px 0; /* Oben und unten Abstand */
position: relative;
overflow: hidden;
/* -------------------------------
Box-Shadow erklärt:
0 → Kein horizontaler Versatz (bleibt zentriert)
20px → Vertikaler Versatz nach unten (Schatten fällt nach unten)
40px → Weichzeichner-Radius (wie verschwommen der Schatten wirkt)
-10px → Ausbreitung (negativ = kompakter)
rgba(0, 0, 0, 0.6) → Farbe: halbtransparenter Schwarzton
-------------------------------- */
z-index: 3; /* Damit der Schatten über dem oberen Bereich liegt */
}
.df-overlay {
width: 51%;
top: 0%;
transform: translateX(-50%);
position: absolute;
display: block;
left: 50%;
}
.vbv-overlay {
width: 51%;
bottom: 0%;
transform: translateX(-50%);
position: absolute;
display: block;
left: 50%;
}
/* Wordlinks */
.wordlinkhome,
.wordlinkfirmentop,
.wordlink1-1top,
.wordlinküberNULNEBLAtop,
.wordlinkknowhowtop,
.wordlinkkontakttop {
color: white;
font-size: 20px;
margin: 10px;
text-decoration: none;
z-index: 2;
position: relative;
}
/* Mobilfreundlich */
@media (max-width: 768px) {
.bg-section h2 {
font-size: 28px;
}
.bg-section p {
font-size: 16px;
}
.btn {
font-size: 16px;
}
}
/* Erste Klasse */
.wordlinkfirmentop, .wordlink1-1top, .wordlinküberNULNEBLAtop, .wordlinkknowhowtop, .wordlinkkontakttop {
font-family: 'Avenirmedium', sans-serif;
font-size: 20px;
color: #ffffff;
top: 53px; /* Position oben anpassen */
text-decoration: none;
position: absolute;
}
/* Hover-Effekt */
.wordlinkfirmentop:hover, .wordlink1-1top:hover, .wordlinküberNULNEBLAtop:hover, .wordlinkknowhowtop:hover, .wordlinkkontakttop:hover {
color: #1a000a;
font-family: 'Avenirheavy', sans-serif;}
/* Dynamische Unterstreichung */
.wordlinkfirmentop:after, .wordlink1-1top:after, .wordlinküberNULNEBLAtop:after, .wordlinkknowhowtop:after, .wordlinkkontakttop:after {
position: relative;
left: 0;
bottom: -12px;
width: 0%;
height: 8px;
background-color: #ffffff;
transition: width 0.3s ease-in-out;
}
/* Hover-Effekt für die Unterstreichung */
.wordlinkfirmentop:hover:after, .wordlink1-1top:hover:after, .wordlinküberNULNEBLAtop:hover:after, .wordlinkknowhowtop:hover:after, .wordlinkkontakttop:hover:after {
width: 100%;
}
.wordlinkfirmentop {
left: 46%; /* Position von links anpassen */
transform: translateX(-50%);
transition: color 0.3s ease-in-out;
}
.wordlink1-1top {
left: 56%; /* Position von links anpassen */
transform: translateX(-50%);
transition: color 0.3s ease-in-out;
}
.wordlinküberNULNEBLAtop {
left: 66%; /* Position von links anpassen */
transform: translateX(-50%);
transition: color 0.3s ease-in-out;
}
.wordlinkknowhowtop {
left: 76%; /* Position von links anpassen */
transform: translateX(-50%);
transition: color 0.3s ease-in-out;
}
.wordlinkkontakttop {
left: 84%; /* Position von links anpassen */
transform: translateX(-50%);
transition: color 0.3s ease-in-out;
}
.knowhow-overlay {
width: 31%;
top:2%;
right: 7%;
position: absolute;
display: block;
border-radius: 8px;
z-index: 1; /* Damit der Schatten über dem oberen Bereich liegt */
}
.padrecipe-overlay {
width: 63%;
top:51%;
right: 7%;
position: absolute;
display: block;
border-radius: 8px;
z-index: 2; /* Damit der Schatten über dem oberen Bereich liegt */
}
.mikroguide-overlay {
width: 28%;
top:57%;
left: 6%;
position: absolute;
display: block;
border-radius: 8px;
z-index: 13; /* Damit der Schatten über dem oberen Bereich liegt */
clip-path: inset(0 0 34.55% 0);
}
.last-section {
background-color: #1a1a1a;
padding: 320px 0; /* Oben und unten Abstand */
position: relative;
z-index: 2; /* Damit der Schatten über dem oberen Bereich liegt */
.twotitlelast-text {
font-family: 'LEMONMILKBOLD', sans-serif;
font-size: clamp(32px, 4.2vw, 38px);
max-width: 900px;
color: #1a000a;
position: absolute;
bottom: 0.3%;
left: 4%;
line-height: 0.9;
}
.twosubtitleforelast-text {
font-family: 'LEMONMILKLight', sans-serif;
font-size: clamp(20px, 2.8vw, 26px);
color: #1a000a;
position: absolute;
bottom: 3%;
left: 4%;
line-height: 1.0;
}
}
.wordlinkIMPRESSUM, .wordlinkCOOKIES, .wordlinkAGBs, .wordlinkdisclaimer {
font-family: 'LEMONMILKLIGHT', sans-serif;
font-size: clamp(12px, 1.6vw, 30px);
text-align: left;
color: #f0f0f0;
text-decoration: none;
position: absolute;
bottom: 4%;
transform: translateX(-50%);
transition: color 0.3s ease-in-out;
}
/* Hover-Effekt */
.wordlinkIMPRESSUM:hover, .wordlinkCOOKIES:hover, .wordlinkAGBs:hover, .wordlinkdisclaimer:hover {
color: #9b006f;
}
/* Dynamische Unterstreichung */
.wordlinkIMPRESSUM::after, .wordlinkCOOKIES::after, .wordlinkAGBs::after, .wordlinkdisclaimer::after {
content: '';
position: absolute;
left: 0;
bottom: -12px;
width: 0%;
height: 12px;
background-color: #9b006f;
transition: width 0.3s ease-in-out;
}
/* Hover-Effekt für die Unterstreichung */
.wordlinkIMPRESSUM:hover::after, .wordlinkCOOKIES:hover::after, .wordlinkAGBs:hover::after, .wordlinkdisclaimer:hover::after{
width: 100%;
}
.wordlinkCOOKIES {
left: 42%; /* Weiter nach rechts verschoben */
}
.wordlinkdisclaimer{
left: 8%;
}
.wordlinkIMPRESSUM{
left: 20%;
}
.wordlinkAGBs{
left: 34%;
}
.wordlinksPRIVATCOACHING, .wordlinksfirmenbottom, .wordlinksNULNEBLA, .wordlinksknowhow {
font-family: 'LEMONMILKBOLD', sans-serif;
font-size: clamp(8px, 1.6vw, 24px);
color: #f0f0f0;
text-decoration: none;
text-align: left;
top: 5%;
position: absolute;
transition: color 0.3s ease-in-out;
z-index: 10; /* Über andere Elemente */
}
.wordlinksPRIVATCOACHING:hover, .wordlinksfirmenbottom:hover, .wordlinksNULNEBLA:hover, .wordlinksknowhow:hover {
color: #9b006f;
}
.wordlinksPRIVATCOACHING::after, .wordlinksfirmenbottom::after, .wordlinksNULNEBLA:after, .wordlinksknowhow::after {
content: '';
position: absolute;
left: 0;
bottom: -4px;
width: 0%;
height: 8px; /* Kleinere Unterstreichungshöhe */
background-color: #9b006f;
transition: width 0.3s ease-in-out;
}
.wordlinksPRIVATCOACHING:hover:after, .wordlinksfirmenbottom:hover:after, .wordlinksNULNEBLA:hover:after, .wordlinksknowhow:hover:after {
width: 100%;
}
.wordlinksPRIVATCOACHING {
left: 22%;
}
.wordlinksfirmenbottom {
left: 2%;
}
.wordlinksknowhow {
left: 42%;
}
.wordlinksNULNEBLA {
left: 62%;
}
.wordlinksFirmenseminare, .wordlinksleistungen, .wordlinks1-1firmencoaching, .wordlinksKonzeptErnährung,
.wordlinksKonzeptBewegung, .wordlinksKonzeptEigenkompetenz, .wordlinksquinfinity {
font-family: 'Avenirmedium';
font-size: clamp(4px, 1.6vw, 18px);
color: #f0f0f0;
text-decoration: none;
text-align: left;
position: absolute;
left: 2%; /* Zentrierung des Containers */
width: 300px; /* Feste Breite, z. B. 300px */
transition: color 0.3s ease-in-out;
z-index: 10; /* Über andere Elemente */
}
.wordlinksFirmenseminare:hover, .wordlinksleistungen:hover, .wordlinks1-1firmencoaching:hover, .wordlinksKonzeptErnährung:hover,
.wordlinksKonzeptBewegung:hover, .wordlinksKonzeptEigenkompetenz:hover, .wordlinksquinfinity:hover {
color: #9b006f;
font-family: 'Avenirheavy', sans-serif;
}
.wordlinksFirmenseminare {
top: 14%;
}
.wordlinksleistungen
{
top: 18%;
}
.wordlinks1-1firmencoaching{
top: 25%;
}
.wordlinksKonzeptErnährung{
top: 28%;
}
.wordlinksKonzeptBewegung{
top: 31%;
}
.wordlinksKonzeptEigenkompetenz{
top: 34%;
}
.wordlinksquinfinity{
top: 37%;
}
.wordlinksprivatleistungenbottom, .wordlinkserstgespräch {
font-family: 'Avenirmedium', sans-serif;
font-size: clamp(4px, 1.6vw, 18px);
color: #f0f0f0;
text-decoration: none;
text-align: left;
position: absolute;
left: 22%; /* Zentrierung des Containers */
width: 300px; /* Feste Breite, z. B. 300px */
transition: color 0.3s ease-in-out;
z-index: 10; /* Über andere Elemente */
}
.wordlinksprivatleistungenbottom:hover, .wordlinkserstgespräch:hover {
color: #9b006f;
font-family: 'Avenirheavy', sans-serif;
}
.wordlinkserstgespräch{
top: 14%;
}
.wordlinksprivatleistungenbottom{
top: 18%;
}
.wordlinkseminare, .wordlinksblog {
font-family: 'Avenirmedium', sans-serif;
font-size: clamp(4px, 1.6vw, 18px);
color: #f0f0f0;
text-decoration: none;
text-align: left;
position: absolute;
left: 42%; /* Zentrierung des Containers */
width: 300px; /* Feste Breite, z. B. 300px */
transition: color 0.3s ease-in-out;
z-index: 10; /* Über andere Elemente */
}
.wordlinkseminare:hover, .wordlinksblog:hover {
color: #9b006f;
font-family: 'Avenirheavy', sans-serif;
}
.wordlinkseminare{
top: 14%;
}
.wordlinksblog{
top: 18%;
}
.wordlinksmail {
font-size: clamp(4px, 1.6vw, 18px);
color: #f0f0f0;
text-decoration: none;
text-align: left;
position: absolute;
left: 2%; /* Zentrierung des Containers */
width: 300px; /* Feste Breite, z. B. 300px */
transition: color 0.3s ease-in-out;
z-index: 10; /* Über andere Elemente */
}
.wordlinksmail:hover {
color: #9b006f;
}
.wordlinknulneblahome {
font-family: 'LEMONMILKBOLD', sans-serif; /* Schriftart anwenden */
font-size: clamp(28px, 3.2vw, 34px); /* Schriftgröße */
color: #f0f0f0; /* Standardfarbe */
text-decoration: none; /* Keine Unterstreichung im Normalzustand */
position: absolute; /* Absolut positioniert */
bottom:4%; /* Platzierung des Textes nach oben - anpassbar */
right: 4.5%; /* Horizontal zentrieren */
transition: color 0.3s ease-in-out; /* Sanfter Übergang für Farbe */
}
/* Hover-Effekt */
.wordlinknulneblahome:hover {
color: #9b006f; /* Farbänderung beim Hover */
}
.logo-overlay {
width: 3%; /* oder z. B. 300px für feste Breite */
bottom: 3%;
right: 16%;
position: absolute;
display: block; /* Verhindert Lücken unter dem Bild */
}
.fusszeile-text {
font-family: 'Lexendlight', sans-serif;
font-size: clamp(4px, 1.8vw, 14px);
max-width: 400px;
color: #f0f0f0;
position: absolute;
bottom: 10%;
right: 8%;
line-height: 1.0;
}
.back-to-top {
position: fixed;
bottom: 30px;
left: 50%;
text-decoration: none;
background-color: #b60046;
color: white;
font-size: 30px;
padding: 10px 18px;
border-radius: 50%;
transition: background-color 0.3s ease;
z-index: 999;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}
.back-to-top:hover {
background-color: #500024;
color: #ffffff;
}