/* ==============================================================
            "sa" = "SonderAktion" (z.B. Weihnachts-Special)
   ============================================================== */


/* ================================================================================================================ */
/*              Sonderaktion_Overlay, Typ 1 (Overlay scrollt nicht mit, ist also immer penetrant zu sehen)          */
/* ================================================================================================================ */

.sa_Overlay__Typ_1__div_1
{
    z-index:4500; /* ### ACK #015 ### (nicht T-ACK !) */
    
    display:flex;
    
    position:fixed; 
    width:100%;
    /* height:100%; */ 
    top:calc(100px + 3vw + 5vh); left:0px; 

    justify-content: center; /* ganzen Overlay horizontal zentrieren */
    align-items: center; /* vertikal zentrieren (geht nur, wenn "height" auf 100% gesetzt wird) */ 
    
    /* Nicht aktivieren (### ACK #016 ###)) */
    /* overflow: scroll; */
}

.sa_Overlay__Typ_1__div_2
{ 
    width:90%; max-width:1600px;
    
    /* margin-left:50px; margin-right:50px; */
    border:1px solid #eeeeee;
}

/* ================================================================================================================ */
/*                 Sonderaktion_Overlay, Typ 2 (Overlay scrollt mit, ist also weniger penetrant)                ,   */
/* ================================================================================================================ */

.sa_Overlay__Typ_2__div_1
{     
    z-index:4500; /* ### ACK #015 ### (nicht T-ACK !) */
    position: relative; 
    width:100%;
    
}

.sa_Overlay__Typ_2__div_2
{ 
    z-index:4501; /* ### ACK #015 ### (nicht T-ACK !) */
    
    position: absolute;
     
    width:90%; max-width:1600px;
    top:calc(100px + 3vw + 5vh);
    
    /* für horizontale Zentrierung beide Zeilen nötig: */
    left:0; right:0;
    margin-left:auto; margin-right:auto;
    
    
    border:1px solid #eeeeee;
}



/* ================================================================================================================ */
/*                                                      Flexbox                                                     */
/* ================================================================================================================ */

.sa_Flexbox { display:flex; }

.sa_Spalte_1 { flex: 0 0 32%; }
.sa_Spalte_2 { flex: 1 1 auto; padding:calc(30px + 1.5vw) calc(30px + 1.5vw) calc(30px + 1.5vw) calc(30px + 1.5vw); }



/* ================================================================================================================ */
/*                                             Hintergrundfarben bzw. Bilder                                        */
/* ================================================================================================================ */
.sa_bg__WeihnachtsSpecial { background: #333333 url('../img/gans.jpg') left top / cover no-repeat; }

.sa_bg_color_1 { background-color: rgba(0,0,0, 0.8); }
.sa_bg_color_2 { background-color: rgba(28,42,34, 0.9); } /* dunkel-gruen */
.sa_bg_color_3 { background-color: rgba(42,30,28, 0.9); } /* braun */


/* ================================================================================================================ */
/*                                                      Header                                                      */
/* ================================================================================================================ */
.sa_header 
{ 
    color: #fbe4bb;
    font-family: var(--font_4); font-size:calc(20px + 1vw); font-weight:400; text-align: center; 
}



/* ================================================================================================================ */
/*                                                      Table                                                       */
/* ================================================================================================================ */
.sa_table
{ 
    display: table;
    padding-top:30px; padding-left:4px;
    
    font-family: var(--font_3);
    font-size: calc(12px + 0.33vw);
}

.sa_tr { display: table-row; }


/* zur Breite der ersten Spalte: ##### ACK #009_c ##### */
.sa_td_1 { display: table-cell; padding: 10px 0px 11px 0px; font-weight:300; word-break: break-word; color: #ffffff; }
.sa_td_2 { display: table-cell; padding: 10px 0px 11px 2vw; white-space: nowrap; word-break: keep-all; font-weight:400; color: #fbe4bb; text-align: left; }

.sa_td_leer { height:20px; } /* für die Spalten von Leerzeilen */


/* ================================================================================================================ */
/*                                               Schliessen-Button                                                  */
/* ================================================================================================================ */
.sa_SchliessenButton_div_1 { text-align:center; padding-top:40px; }
.sa_SchliessenButton_div_2 { display:inline-block; padding:10px 20px 10px 20px; border:1px solid #999999; color:#ffffff; cursor: pointer; }




/* ================================================================================================================ */
/*                                               Media-Queries                                                      */
/* ================================================================================================================ */
@media only screen and (min-width: 1px) and (max-width: 1000px) 
{
    .sa_Overlay__Typ_1__div_1 { top:calc(75px + 2vw + 1vh); }
    .sa_Overlay__Typ_2__div_2 { top:calc(75px + 2vw + 1vh); }
    
    .sa_bg_color_1 { background-color: rgba(0,0,0, 1); }
    .sa_bg_color_2 { background-color: rgba(28,42,34, 1); } /* dunkel-gruen */
    .sa_bg_color_3 { background-color: rgba(42,30,28, 1); } /* braun */
    
    
    .sa_Flexbox  { flex-wrap: wrap; } 
    
    .sa_Spalte_1 { flex: 0 1 100%; height:100px; }
    .sa_Spalte_2 { flex: 0 1 100%; padding:calc(20px + 1vw) 20px calc(20px + 1vw) 20px; }
    
    
    .sa_bg__WeihnachtsSpecial { background: #333333 url('../img/gans.jpg') left 5% / cover no-repeat; }
    
    .sa_header { font-size:calc(13px + 1vw); text-align: center; }
    
    .sa_table { padding-top:10px; }
    .sa_td_1 { padding: 4px 0px 5px 0px; }
    .sa_td_2 { padding: 4px 0px 5px 2vw; }
    .sa_td_leer { height:5px; }
    
    .sa_SchliessenButton_div_1 { padding-top:15px; }
    .sa_SchliessenButton_div_2 { padding:5px 20px 5px 20px; }
}