/* CSS Name: Bildschirmanzeige - Magische Feste 
Description: Website von Marco Faller - Zauberei, Entertainment, Schauspiel
Author: Marco Faller 
Author URL: magische-feste.de 
Version: 1.0 Datum: 2025-02-28 */ 

/*-------------------------------------------Allgemeine Angaben*/ 
:root{
--back-col-white: #ffffff;
--back-col-rot: #580004;
--acc-col-bronze: #d58936;
--acc-col-smoke: #f5f5f5;
--text-col-grey: #303030;
--navbar-height70px: 70px;
--header-height120px: 120px;
--con-width-large65percent: 65%;
--con-width-medium96vw: 96vw;
--con-width-small90vw: 90vw;
} 

@font-face {
font-family: 'Timesss';
src: url('/fonts/Times/TIMESS__.ttf') format('truetype'), Georgia,'Times New Roman', serif;
font-display: fallback;
} 

@font-face {
font-family: 'Lexend';
src: url('/fonts/Lexend/LexendDeca-VariableFont_wght.ttf') format('truetype'), Verdana, Geneva, Tahoma, sans-serif;
font-display: fallback;
} 

*{
margin: 0;
padding: 0;
} 

html, body {
height: 100vh;
width: 100vw;
font-size: 100%;
background-color: var(--back-col-white);
scroll-behavior: smooth;
scroll-padding-top: 120px;
} 

.position::before {
display: block;
content: "";
height:120px;
margin-top: -120px;
visibility: hidden;
} 

h1{
font-family: Timesss;
font-size: clamp(1.69rem, 0.1227rem + 7.8364vw, 6rem);
font-weight: 600;
} 

h2{
font-family: Timesss;
color: var(--text-col-grey);
font-size: clamp(1.7rem, 1.1329rem + 2.8354vw, 4.5rem);
font-weight: 400;
margin: 2vh 0 1.5vh 0;
} h3{
font-family: Timesss;
color: var(--text-col-grey);
font-size: clamp(1.6rem, 1.0909rem + 2.5455vw, 3rem);
font-weight: 400;
margin: 2vh 0 1.5vh 0;
} 
p{
font-family: Lexend;
color: var(--text-col-grey);
font-size: clamp(1.2rem, 0.9091rem + 1.4545vw, 2rem);
font-weight: 220;
line-height: 1.75;
margin-bottom: 2vh;
} .position-zaubershow-h1 h1{
color: var(--acc-col-bronze);
} .position-hochzeitsentertainment-h1 h1, .position-uebermarco-h1 h1{
color: var(--acc-col-smoke);
} .liste h2, .liste-zylinder h2, .kontakt h2{
color: var(--acc-col-bronze);
margin-bottom: 1.75vh;
} .liste p, .cta p, .kontakt p{
color: var(--acc-col-smoke);
margin-bottom: 1.75vh;
} .liste-headline p{
color: var(--acc-col-bronze);
font-weight: 300;
margin-bottom: 2vh;
} .liste-headline-start p{
color: var(--acc-col-bronze);
font-weight: 400;
margin: 5vh 0 1vh 0;
} .liste-einleitung p{
color: var(--acc-col-bronze);
font-size: clamp(1.2rem, 0.9091rem + 1.4545vw, 2rem);
font-weight: 600;
margin-bottom: 2vh;
} .liste-zylinder p{
color: var(--acc-col-smoke);
padding-left: 40px;
margin-bottom: 7vh;
} .liste-zylinder-headline p{
color: var(--acc-col-bronze);
font-weight: 400;
padding: 0;
margin: 0;
} .liste-headline{
display:flex;
} .liste-headline-start{
display: flex;
} .liste-zylinder-headline{
display: flex;
flex-direction: row;
align-items: center;
} .programm-headline{
display: flex;
flex-direction: column;
align-items: center;
} .argumente p{
margin-bottom: 1.5vh;
padding-top: 0;
} .frage p{
padding: 0;
margin-bottom: 0;
font-weight: 400;
} .antwort p{
margin-top: -0.5vh;
margin-bottom: 1vh;
} .kontaktdaten{
padding: 2vh 0 2vh 0;
} .kontaktdaten p, .kontaktdaten a{
font-family: Timesss;
color: var(--acc-col-bronze);
font-size: clamp(1.9rem, 1.5rem + 2vw, 3rem);
font-weight: 250;
font-weight: 400;
text-decoration: none;
} .rechtliches h1{
font-size: clamp(2rem, 0.9091rem + 5.4545vw, 5rem);
font-weight: 600;
color: var(--text-col-grey);
} .rechtliches h2{
font-size: clamp(1.75rem, 0.9318rem + 4.0909vw, 4rem);
font-weight: 600;
margin-top: 2vh;
} .rechtliches h3{
font-size: clamp(1.5rem, 0.9545rem + 2.7273vw, 3rem);
font-weight: 600;
margin-top: 2vh;
} .rechtliches h4{
font-family: Timesss, Georgia,'Times New Roman', serif;
color: var(--text-col-grey);
font-size: clamp(1.25rem, 0.9773rem + 1.3636vw, 2rem);
font-weight: 600;
text-decoration: none;
text-align: left;
margin-top: 2vh;
} .rechtliches li{
font-family: Lexend;
color: var(--text-col-grey);
font-size: clamp(1.2rem, 0.9091rem + 1.4545vw, 2rem);
font-weight: 200;
line-height: 1.5;
text-decoration: none;
text-align: left;
list-style-position: inside;
} .rechtliches a{
color: var(--back-col-rot);
font-weight: 300;
text-decoration: none;
} img{
max-width: 100%;
font-family: Lexend;
color: var(--text-col-grey);
font-size: clamp(1.2rem, 0.9091rem + 1.4545vw, 2rem);
font-weight: 300;
line-height: 1.75;
} /*-----------------------------------------------------------------------------------SMALL (max. width 1699px)*/ .parent-box{
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
background-color: var(--back-col-white);
scroll-snap-align: start;
} /*------------------------------------------------------------------------HEADER*/ header{
height: var(--header-height120px);
width: 100%;
box-sizing: border-box;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 3;
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
background-color: rgba(255, 255, 255, 0.096);
backdrop-filter: blur(10px);
} nav{
height: var(--navbar-height70px);
width: clamp(320px, 96%, 1920px);
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
margin: 0vw 1vw;
text-shadow: 0px -1px 10px #f5f5f581;
} nav .logo{
font-family: Lexend;
color: black;
box-sizing: border-box;
width: clamp(250px, 20%, 315px);
} nav .logo img{
filter: drop-shadow(0px -0.5px 1px #f5f5f5b6);
} /*-----------------------Hauptmenü - Hamburger-Menü*/ @media (max-width: 1699px){
nav input[type="checkbox"]{
display: none;
} .toggle_button{
width: 30px;
height: 23px;
position: absolute;
top: 45px;
right: 5vw;
display: none;
flex-direction: column;
justify-content: space-between;
} .bar{
height: 4px;
width: 100%;
background-color: black;
border-radius: 100px;
filter: drop-shadow(0px -0.5px 0.5px #f5f5f5b6);
} .toggle_button{
display: flex;
} nav ul{
height: 100vw;
width: 100vw;
top: var(--header-height120px);
right: 0;
left: 0;
display: none;
position: absolute;
font-family: Lexend;
font-size: clamp(1.125rem, 2.503vw + 0.624rem, 2.5rem);
font-weight: 300;
list-style-type: none;
padding: 3vh 0;
background-color: var(--back-col-white);
} nav li{
height: 13vh;
display: flex;
flex-direction: column;
align-items: center;
background-color: var(--back-col-white);
} nav ul a{
height: min-content;
text-decoration: none;
color: var(--text-col-grey);
} #toggle_button:checked ~ ul{
display: block;
}
} /*------------------------------------------------------------------------CONTENT*/ .content{
width: clamp(320px, 96%, 1920px);
height: min-content;
box-sizing: border-box;
} .pre-content{
height: var(--header-height120px);
width: 100%;
background-color: var(--back-col-white);
} .content img{
margin-top: -1vh;
margin-bottom: 0.5vh;
} /*-----------------------------------------------------------------------Startseite*/ .hero-start{
min-height: min-content;
max-height: 62vh;
width: 100%;
left: 0;
right: 0;
position: relative;
background-color: var(--acc-col-smoke);
overflow: hidden;
} .start-overlay{
z-index: 1;
color: var(--acc-col-smoke);
display: flex;
flex-direction: column;
justify-content: center;
position: absolute;
inset: 50% 0 0.5% 0;
} .position-start-h1{
text-shadow: 3px 3px 15px rgb(30,30,30);
background-color: #d5883659;
text-align: center;
margin-bottom: 1%;
margin-left: auto;
margin-right: auto;
} .layout-ze, .rechtliches{
height: min-content;
box-sizing: border-box;
padding: 1vh 2vw;
text-align: left;
} .layout-ze img{
width: 62%;
height: auto;
margin: 0vh 19% 1vh 19%;
} .content-info{
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: var(--back-col-rot);
} .liste, .liste-zylinder{
width: clamp(320px, 96%, 1920px);
height: min-content;
box-sizing: border-box;
padding: 7vh 3vw 7vh 3vw;
text-align: left;
} .umrandungs-button {
font-family: Lexend;
font-size: clamp(1.2rem, 0.9091rem + 1.4545vw, 2rem);
font-weight: 300;
padding: 1.3rem 1.5rem;
margin-top: 6vh;
margin-bottom: 1vh;
cursor: pointer;
background-color: var(--back-col-rot);
color: var(--acc-col-bronze);
border: 2px solid var(--acc-col-bronze);
transition: color 250ms linear;
} .umrandungs-button:hover{
color: #b87227;;
} .layout-li, .layout-re{
height: min-content;
width: 100%;
box-sizing: border-box;
display: grid;
grid-template-columns: 100%;
grid-template-rows: auto;
justify-content: center;
gap: 2vw;
text-align: left;
padding: 1vh 2vw;
grid-template-areas: "bild" "text";
} .textspalte{
grid-area: text;
height: min-content;
} .bildspalte{
grid-area: bild;
height: min-content;
} .testimonials{
text-align: center;
} video{
width: 96%;
aspect-ratio: 16/9;
align-items: center;
padding-top: 0.5vh;
padding-bottom: 1.5vh;
} .cta{
width: clamp(320px, 96%, 1920px);
box-sizing: border-box;
text-align: center;
align-items: center;
padding: 0vh 2vw 2vh 2vw;
} /*-----------------------------------------------------------------------Zaubershow*/ .hero-zaubershow{
min-height: min-content;
max-height: 62vh;
width: 100%;
left: 0;
right: 0;
position: relative;
background-color: var(--back-col-rot);
overflow: hidden;
} .zaubershow-overlay{
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
position: absolute;
inset: 50% 0 0.5% 0;
} .position-zaubershow-h1{
text-shadow: 3px 3px 15px rgb(30,30,30);
background-color: #58000494;
text-align: center;
margin-bottom: 1%;
margin-left: auto;
margin-right: auto;
} .programm-headline img{
padding-top: 0.5vh;
} .button {
font-family: Lexend;
font-size: clamp(1.2rem, 0.9091rem + 1.4545vw, 2rem);
font-weight: 300;
padding: 1rem 2rem;
margin-top: 1vh;
margin-bottom: 3vh;
cursor: pointer;
background-color: var(--back-col-rot);
color: var(--acc-col-bronze);
border: none;
transition: color 250ms linear;
} .button:hover{
color: #b87227;
} /*-----------------------------------------------------------------------Hochzeitsentertainment*/ .hero-hochzeitsentertainment{
min-height: min-content;
max-height: 62vh;
width: 100%;
left: 0;
right: 0;
position: relative;
background-color: var(--acc-col-smoke);
overflow: hidden;
} .hochzeitsentertainment-overlay{
z-index: 1;
color: var(--acc-col-smoke);
display: flex;
flex-direction: column;
justify-content: center;
position: absolute;
inset: 50% 0 0.5% 0;
} .position-hochzeitsentertainment-h1{
text-shadow: 3px 3px 15px rgb(30,30,30);
background-color: #58000494;
text-align: right;
margin-bottom: 1%;
margin-left: auto;
margin-right: auto;
} .testimonials-hochzeit{
text-align: center;
} .prosundcons{
height: min-content;
width: 100%;
box-sizing: border-box;
display: grid;
grid-template-columns: 100%;
grid-template-rows: auto;
justify-content: center;
gap: 2vw;
text-align: left;
padding: 1vh 2vw;
grid-template-areas: "headline" "pro" "contra";
} .pro-con-headline{
grid-area: headline;
height: min-content;
} .pros{
grid-area: pro;
height: min-content;
padding-top: 1vh;
} .cons{
grid-area: contra;
height: min-content;
padding-top: 1vh;
} .argumente{
display: flex;
justify-content: flex-start;
align-items: center;
} .cons a{
color: var(--back-col-rot);
text-decoration: underline;
} /*-----------------------------------------------------------------------Über Marco*/ .hero-uebermarco{
min-height: min-content;
max-height: 62vh;
width: 100%;
left: 0;
right: 0;
position: relative;
background-color: var(--acc-col-smoke);
overflow: hidden;
} .uebermarco-overlay{
z-index: 1;
color: var(--acc-col-smoke);
display: flex;
flex-direction: column;
justify-content: center;
position: absolute;
inset: 50% 0 0.5% 0;
} .position-uebermarco-h1{
text-shadow: 3px 3px 15px rgb(30,30,30);
background-color: #58000494;
text-align: center;
margin-bottom: 1%;
margin-left: auto;
margin-right: auto;
} .steckbrief{
height: min-content;
width: 100%;
box-sizing: border-box;
display: grid;
grid-template-columns: 100%;
grid-template-rows: auto;
justify-content: center;
gap: 2vw;
padding: 1vh 2vw;
grid-template-areas: "links1" "rechts1" "links2" "rechts2" "links3" "rechts3" "links4" "rechts4" "links5" "rechts5" "links6" "rechts6";
} .frage{
display: flex;
justify-content: center;
align-items: center;
text-align: center;
} .antwort{
display: flex;
justify-content: center;
align-items: center;
text-align: center;
} .steckbrief-li-01{
grid-area: links1;
} .steckbrief-li-02{
grid-area: links2;
} .steckbrief-li-03{
grid-area: links3;
} .steckbrief-li-04{
grid-area: links4;
} .steckbrief-li-05{
grid-area: links5;
} .steckbrief-li-06{
grid-area: links6;
} .steckbrief-re-01{
grid-area: rechts1;
} .steckbrief-re-02{
grid-area: rechts2;
} .steckbrief-re-03{
grid-area: rechts3;
} .steckbrief-re-04{
grid-area: rechts4;
} .steckbrief-re-05{
grid-area: rechts5;
} .steckbrief-re-06{
grid-area: rechts6;
} /*-----------------------------------------------------------------------Kontakt*/ .kontakt {
width: clamp(320px, 96%, 1920px);
height: min-content;
box-sizing: border-box;
padding: 6vh 2vw;
text-align: center;
} /*-----------------------------------------------------------------------FOOTER*/ footer{
height: min-content;
width: 100%;
left: 0;
right: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: var(--back-col-rot);
} .footer-kurzbio{
height: min-content;
width: 100%;
box-sizing: border-box;
display: grid;
grid-template-columns: 100%;
grid-template-rows: auto;
justify-content: center;
gap: 2vw;
padding: 1vh 3vw;
margin: 4vh 0 2vh 0;
grid-template-areas: "bio-bild" "bio-text";
} .kurzbio-text{
grid-area: bio-text;
} .kurzbio-bild{
grid-area: bio-bild;
display: flex;
justify-content: center;
align-items: center;
} .footer-inhalt{
height: min-content;
width: clamp(320px, 96%, 1920px);
margin: 0 2vw;
padding: 2vw 0;
box-sizing: border-box;
display: grid;
grid-template-columns: 100%;
grid-template-rows: auto;
justify-content: center;
gap: 2vw;
grid-template-areas: "footerbox-logo" "footerbox-kontakt" "footer-menu";
} .footerbox-kontakt{
grid-area: footerbox-kontakt;
text-align: center;
padding: 2vh 2vw;
} .footerbox-logo{
grid-area: footerbox-logo;
align-items: center;
text-align: center;
} .footerbox-logo img{
max-width: 90%;
height: auto;
padding: 1vh 2vw 0.75vh 2vw;
} .footerbox-menu{
grid-area: footer-menu;
} .footer-inhalt p, .footer-inhalt a{
font-family: Lexend;
font-size: clamp(1.2rem, 0.9091rem + 1.4545vw, 2rem);
font-weight: 400;
color: var(--acc-col-smoke);
text-decoration: none;
} /*-------------------------------------Footer-Menü*/ .footer-menu{
height: min-content;
display: flex;
justify-content: space-evenly;
align-items: center;
background-color: var(--back-col-rot);
} .footer-menu ul{
height: min-content;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
list-style-type: none;
} .footer-menu li{
height: 100%;
width: auto;
margin: 8%;
text-align: center;
} .footer-menu ul a{
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
color: var(--acc-col-bronze);
font-family: Lexend;
font-size: 4vw;
font-weight: 300;
text-decoration: none;
transition: color 250ms linear;
} /*-----------------------------------------------------------------------------------größere Viewports*/ @media (min-width: 512px){
.programm-headline{
flex-direction: row;
}
} @media (min-width: 1024px){
.hero-zaubershow{
max-height: 100vh;
} .zaubershow-overlay{
inset: 60% 0.5% 0.5% -30%;
} .bildspalte{
margin-left: auto;
margin-right: auto;
}
} @media screen and (min-width: 1200px){
.layout-ze img{
width: 40%;
margin: 0 30% 0 30%;
}
} @media (min-width: 1600px){
.hero-hochzeitsentertainment{
max-height: 100vh;
} .hochzeitsentertainment-overlay{
inset: 40% 0.5% 0.5% 0%;
} .hero-uebermarco{
max-height: 100vh;
} .uebermarco-overlay{
inset: -33% 0.5% 0.5% -23%;
}
} @media screen and (min-width: 1700px){
nav ul{
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
list-style-type: none;
} nav li{
height: 100%;
width: auto;
margin: 15px;
text-align: center;
} nav a:hover{
color: var(--back-col-rot);
} nav ul a{
display: flex;
align-items: center;
justify-content: center;
color: black;
font-family: Lexend;
text-decoration: none;
font-size: 2rem;
font-weight: 300;
transition: color 250ms linear;
} nav input[type="checkbox"]{
display: none;
} .bildspalte{
margin: 0;
} .liste{
margin-top: 5vh;
margin-bottom: 5vh;
} .liste-headline p{
margin-top: 7.5vh;
margin-bottom: 7.5vh;
} .liste-headline-start p{
margin-top: 10vh;
margin-bottom: 0;
} .liste-zylinder{
margin-top: 4vh;
margin-bottom: 10vh;
} .liste-zylinder-headline{
margin-top: 10vh;
} .umrandungs-button{
margin-top: 7.5vh;
margin-bottom: 5vh;
} .layout-ze{
text-align: center;
} .layout-li{
grid-template-columns: 38.2% 61.8%;
grid-template-areas: "text bild";
} .layout-re{
grid-template-columns: 61.8% 38.2%;
grid-template-areas: "bild text";
} .layout-ze, .layout-li, .layout-re{
margin-top: 4vh;
margin-bottom: 4vh;
} .layout-ze img{
width: 40%;
margin: 1vh 30% 1.5vh 30%;
} .testimonials{
margin-top: 4vh;
margin-bottom: 10vh;
} .testimonials p{
margin-top: 8vh;
} video{
width: 61%;
margin-top: 2vh;
} .prosundcons{
grid-template-columns: 50% 50%;
grid-template-areas: "headline headline" "pro contra" "cta cta";
} .steckbrief{
grid-template-columns: 50% 50%;
grid-template-areas: "links1 rechts1" "links2 rechts2" "links3 rechts3" "links4 rechts4" "links5 rechts5" "links6 rechts6";
} .frage{
justify-content: flex-end;
text-align: right;
padding: 0;
margin: 0;
} .antwort{
justify-content: flex-start;
text-align: left;
padding: 0;
margin-top: 7px;
} .kontakt{
padding-top: 8vh;
padding-bottom: 10vh;
} .kontakt p{
margin-top: 5vh;
} .kontaktdaten {
margin-top: 5vh;
} .rechtliches{
text-align: left;
} .footer-kurzbio{
grid-template-columns: 50% 50%;
grid-template-areas: "bio-bild bio-text";
} .kurzbio-bild{
justify-content: flex-end;
} .footer-inhalt{
margin: 2vh 2vw;
grid-template-columns: 50% 50%;
grid-template-areas: "footerbox-kontakt footerbox-logo" "footer-menu footer-menu";
} .footerbox-kontakt{
padding: 0 2vw;
} .footer-menu ul{
flex-direction: row;
justify-content: center;
align-items: center;
list-style-type: none;
} .footer-menu li{
width: auto;
margin: 2.5%;
} .footer-menu a:hover {
color: #b87227;
} .footer-menu ul a{
font-size: 1.7rem;
}
} @media (min-width: 1800px){
.start-overlay{
inset: 40% 0.5% 0.5% 30%;
} .position-start-h1{
text-align: right;
} .hochzeitsentertainment-overlay{
inset: 40% 0.5% 0.5% 20%;
}
} @media (min-width: 2300px){
.uebermarco-overlay{
inset: -30% 0.5% 0.5% -28%;
}
}