/*-----------------------------------------------------------*/
/*	@Import Google Fonts
/*-----------------------------------------------------------*/

/*-----------------------------------------------------------*/
/*	Global Variables
/*-----------------------------------------------------------*/
:root {
    --main-background: #FFFFFF;
    --main-transition: all 0.2s ease-in-out;

    /* Dialog box styles */
    --dialog-background: #ffffff;
    --dialog-font: 'Arial', 'Helvetica', 'sans-serif';
    --dialog-font-size: 2.3rem;
    --dialog-text: #000;
    --dialog-line-height: initial;
    --dialog-padding: 1rem;
    --dialog-border: 1px solid transparent;
    --dialog-border-radius: 0ps;

    /* Dialog button styles */
    --button-background-1: #E39EAE;
    --button-background-2: #E39EAE;
    --button-background-1-hover: #CEDEDD;
    --button-background-2-hover: #CEDEDD;
    --button-font: 'Arial', 'Helvetica', 'sans-serif';
    --button-text: #fff;
    --button-text-hover: #fff;
    --button-border: 0px solid transparent;
    --button-border-radius: 15px;
}
/*-----------------------------------------------------------*/
/*  Global
/*-----------------------------------------------------------*/
html, body {
    background-color:#CEDEDD!important;
    height: 100%;
    background-image: url('../img/Landingpage_standart_bg2.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center -200px ;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}


@media (max-width: 767px) {
    html, body {
        overflow: hidden; /* Verhindert das Scrollen */
        height: 100%; /* Stellt sicher, dass der Inhalt den gesamten Bildschirm ausfüllt */
    }
}

/*-----------------------------------------------------------*/
/*  Landingpage
/*-----------------------------------------------------------*/
.container{
    min-height: 76%; 
    display: flex;
    flex-direction: column; 
    justify-content: center;
}


.logo img {
    width: 90%; 
    max-width: 90%;
    padding: 10px 0 0 0;
}


.flexbox {
    display: flex !important;
}
.hidden {
    display: none !important;
}
.dialog-box {
    font-family: var(--dialog-font);
    padding: var(--dialog-padding);
    border: var(--dialog-border);
    border-radius: var(--dialog-border-radius);
    width: 100%;

}

.boxbg-01 {
    background-color: #ffffff00;
}

.boxbg-02 {
    background-color: var(--dialog-background);
}

.boxbg-03 {
    background-color: #F4F4F4;
    border-top:5px solid #E39EAE;
}

.dialog-text {
    color: var(--dialog-text);
    font-size: var(--dialog-font-size);
    line-height: var(--dialog-line-height);
}
.dialog-button {
    color: var(--button-text);
    background-image: linear-gradient(20deg, var(--button-background-1) 60%, var(--button-background-2) 60%);
    border: var(--button-border);
    border-radius: var(--button-border-radius);
    margin-bottom: 2vh;
    padding: 0 4vh;
}
.dialog-button:hover,
.dialog-button:active {
    color: var(--button-text-hover);
    background-image: linear-gradient(20deg, var(--button-background-1-hover) 60%, var(--button-background-2-hover) 60%);
}


#dialog-1 {
    
    margin-top:18%;
    
}


/*-----------------------------------------------------------*/
/*  Media Querys
/*-----------------------------------------------------------*/
@media (max-width: 1200px) {
    body {
    background-color:#DAF6EF;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('../img/Landingpage_standart_bg2.jpg');
    background-position: top center ;

    }
    .dialog-text {
        font-size: calc(var(--dialog-font-size) / 1.2) !important;
    }
}
@media (max-width: 992px) {
    .dialog-text {
        font-size: calc(var(--dialog-font-size) / 1.2) !important;
        margin-bottom: 0.8rem;
    }
 
}
@media (max-width: 768px) {
    .dialog-text  {
        font-size: calc(var(--dialog-font-size) / 1.4) !important;
    }
}
@media (max-width: 575px) {
    .dialog-text  {
        font-size: calc(var(--dialog-font-size) / 1.8) !important;
        margin-bottom: 0.5rem;
    }
}


@media (min-width: 1024px) { /* Ab einer Breite von 1024px (Desktopansicht) */
    .logo img {
        width: 600px;
        margin: 0px 0px -200px 0px;
        padding-top: 30px;
    }
    
    .boxbg-01 {
    background-color: #ffffff !important;
}
    .boxbg-03 {
    background-color: #ffffff !important;
    border-top:0px !important;
}
    
    .container{
    min-height: 100%; 
}
    #dialog-1 {
    
    margin-top:0%;
    
}
}