@charset "UTF-8";




:root{
    --dropdown_menu_button_button_width: 26px;
    --dropdown_menu_button_position_top: 15px;
    --dropdown_menu_button_position_right: 11px;
    
    --up_button_position_top: 43px;
    --up_button_size_symbol: 14px;

    --dropdown_menu_button_border_radius: 4px;
    
/*  --menu_color_01: rgba(255, 255,  55, 1.0); */ /* light yellow */    
    --menu_color_01: rgba(255, 255,   0, 1.0);    /* 100%  yellow */
}






/* ------------------------------ */
/* -- UP (back to top - button -- */
/* ------------------------------ */
.container_top{
    z-index: 2;
    width: 100%; 
    height: 0px;
    top: var(--up_button_position_top);                                                 /* -- space between UP button - and top border -- */
    right: var(--dropdown_menu_button_position_right);
    position: sticky;}

.button_top{	
    border: 0px;  
    background-color: var(--menu_color_01); 
    padding: 6px 0px 14px 0px;                                                          /* -- size UP button - is determined - by padding & height (height is determined in the next code line below this line -- */
    height: 3px;                                                                        /* -- height - of yellow box - of UP button -- */
    width: var(--dropdown_menu_button_button_width);                                    /* -- width -- of yellow box - of UP button -- */                      
    font-family: Arial, Helvetica, sans-serif; 
    border-radius: var(--dropdown_menu_button_border_radius);
    font-size: var(--up_button_size_symbol);                                            /* -- size od UP SYMBOL -- on UP button - */
    top: var(--up_button_position_top);                                                 /* -- absolute position of UP button box -- from top - */
    right: var(--dropdown_menu_button_position_right);                                  /* -- absolute position of UP button box -- from right */
    position: sticky;
    text-align: center;
    vertical-align: middle;
 /* position: -webkit-sticky; */
    box-shadow:  
    1px 0px 2px 0px rgba(255,200, 55,0.2), inset  0px  2px 2px 0px rgba(255,255, 55,0.5),   /*top*/
    0px 1px 2px 0px rgba(255,255,220,0.2), inset  3px  0px 3px 0px rgba(255,255,120,0.6), /*left*/
    1px 0px 2px 0px rgba(100,100,100,0.2), inset -1px  0px 2px 0px rgba(255,190,  0,0.3),  /*right*/
    0px 1px 2px 0px rgba(100,100,100,0.2), inset  0px -1px 1px 0px rgba(255,170,  0,0.4);  /*bottom*/
    color: var(--text_color_01);
    margin-left: auto;
}

.up_arrow_on_button{
    display: grid;
    justify-content:center;
    line-height: 80%; /* -- "UP" button moves up --*/
}





/* -------------- */
/* --- HEADER --- */
/* -------------- */
.header {    
    background-color: rgba(0,0,0,0);
    top: 0px;
    right: 0px;
    position: fixed;
    width: 100%;
    z-index: 3;}
.header ul {         
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    background-color: var(--menu_color_01)}
.header li a {           
    cursor:default;
    display: block;
    padding: 11px 0px ;                                       /* -- text line height (space between links) -- in dropdown menu -- */
    text-decoration:none;}
.header li a:hover,
.header .CHECK_BOX:hover {
    background-color: var(--menu_color_01);}







/* ------------------------------------------------ */
/* -- MENU -- first: invisible - then: unfolding -- */
/* ------------------------------------------------ */
.header .menu {
/* fest oben */    
    padding-top: 0px;
    padding-bottom: 0px;
    text-align: center;
    position: fixed;
    width: 100%;
    max-height: 0%;
    top: 0px;
    right: 0px;
    font-size: 15px;    letter-spacing: 0.3px;                /* -- font size -- links -- in dropdown menu -- */
/* visibility */
/* clear: both; */
    transition: 0.6s ease-out;
    font-family: 'RobotoCondensed-Bold', sans-serif;}







/* ------------------ */
/* -- BOX around X -- */
/* ------------------ */
.kasten {
    animation-name: animation_little_yellow_box;
    animation-duration: 875ms;
    animation-delay: 0ms;
    position: absolute;

    top: var(--dropdown_menu_button_position_top);            /* -- absolute position of HAMBURGER box -- from top - */
    right: var(--dropdown_menu_button_position_right);        /* -- absolute position of HAMBURGER box -- from right */
    
    padding-left: 4px;                                        /* -- space between menu lines - and left border - of (yellow) box  */
    padding-top: 11px;                                        /* -- space between menu lines - and top border - of (yellow) box - */

    border-radius: var(--dropdown_menu_button_border_radius); /* border radius "shadow" must be changed as well */

    box-shadow: inset  0px  2px 2px 0px rgba( 255, 255,  55, 0.5),   /* --- top ----- */
                inset  3px  0px 3px 0px rgba( 255, 255, 120, 0.6),   /* --- left ---- */
                inset -1px  0px 2px 0px rgba( 255, 190,   0, 0.3),   /* --- right --- */
                inset  0px -1px 1px 0px rgba( 255, 170,   0, 0.4);   /* --- bottom -- */

    background-color: var(--menu_color_01);
    
    
        
/* -- GOLDEN GRADIENTS -- */    

    /*background: rgb(6,5,0);
    background: linear-gradient(0deg, rgba(6,5,0,1) 0%, rgba(204,165,21,1) 34%, rgba(255,207,73,1) 46%, rgba(255,207,13,1) 61%, rgba(255,242,195,1) 81%, rgba(223,192,14,1) 100%);  */  

    /*background: rgb(97,70,6);
    background: linear-gradient(0deg, rgba(97,70,6,1) 0%, rgba(208,174,70,1) 17%, rgba(244,230,160,1) 30%, rgba(252,244,192,1) 50%, rgba(232,193,39,1) 70%, rgba(173,144,40,1) 90%, rgba(164,126,16,1) 96%, rgba(112,84,3,1) 100%);  */  

    /*background: rgb(43,34,21);
    background: linear-gradient(-94deg, rgba(43,34,21,1) 0%, rgba(130,94,36,1) 17%, rgba(208,148,49,1) 33%, rgba(236,182,47,1) 41%, rgba(255,224,66,1) 52%, rgba(255,228,81,1) 69%, rgba(255,248,222,1) 80%, rgba(244,232,104,1) 88%, rgba(148,87,3,1) 100%);  */

    /*background: rgb(43,34,21);
    background: linear-gradient(94deg, rgba(43,34,21,1) 0%, rgba(208,148,49,1) 34%, rgba(236,182,47,1) 42%, rgba(255,228,81,1) 69%, rgba(255,248,222,1) 80%, rgba(244,232,104,1) 89%, rgba(148,87,3,1) 100%);  */

    /*background: rgb(85,64,35);
    background: linear-gradient(0deg, rgba(85,64,35,1) 0%, rgba(201,152,70,1) 30%, rgba(236,182,47,1) 42%, rgba(255,228,81,1) 69%, rgba(255,248,222,1) 80%, rgba(244,232,104,1) 89%, rgba(148,87,3,1) 100%);  */

    /*background: rgb(85,64,35);
    background: linear-gradient(0deg, rgba(85,64,35,1) 0%, rgba(201,152,70,1) 40%, rgba(226,181,65,1) 52%, rgba(255,228,81,1) 69%, rgba(255,248,222,1) 79%, rgba(244,232,104,1) 90%, rgba(152,128,17,1) 100%);  */  

/* -- end of GOLDEN GRADIENTS -- */   
    
    
    
    
    border: 0px solid var(--menu_color_01);
    width: 22px;                                              /* -- width - of yellow box --- */
    height: 12px;                                             /* -- height - of yellow box -- */
    z-index: 9;
    transition-timing-function: ease-in-out;}

    @keyframes animation_little_yellow_box{
from{top:-41px;
    right:var(--dropdown_menu_button_position_right)}
  to{top: var(--dropdown_menu_button_position_top); 
    right: var(--dropdown_menu_button_position_right)}}










/* menu icon */
/* -- LABEL -- */
.header .LABEL_FOR_BOX {
    z-index: 10;
    cursor: pointer;
    float: right;
    padding: 0px 0px;
    position: relative;
    user-select: none;
    background-color: transparent;}

/* -- STRICH (X) -- */
.header .LABEL_FOR_BOX .STRICH {
    z-index: 10;
    background: var(--text_color_01);
    display: block;
    position: relative;
    transition: background .2s ease-out;
    height: 1px;                                              /* -- BLACK LINE (hight) -- in hamburger menu -- */
    width: 18px;                                              /* -- BLACK LINE (width) -- in hamburger menu -- */
}



/* ----------------- */                                       /* ".STRICH:before" & ".STRICH:after " -- are created here -- */
/* -- 2 little lines */
/* ----------------- */
.header .LABEL_FOR_BOX .STRICH:before, .header .LABEL_FOR_BOX .STRICH:after {
    z-index: 10;
    background: var(--text_color_01);
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;}
.header .LABEL_FOR_BOX .STRICH:before {
    top: 5px;                                                 /* -- distance -- middle line to top line -- */
}
.header .LABEL_FOR_BOX .STRICH:after {
    top: -5px;                                                /* -- distance -- middle line to bottom line -- */
}



/* -------------------------------------------------------------- */
/* -- BUTTON - if: "checked" - then: fade out (to transparent) -- */
/* -------------------------------------------------------------- */
.header .CHECK_BOX {
    display: none;}
.header .CHECK_BOX:checked ~ .menu {
    width: 100%;
    max-height: 100vh;                                                                         
    overflow: scroll; 
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
    border-radius: 0px 0px 15px 15px;}
.header .CHECK_BOX:checked ~ .menu::-webkit-scrollbar{
    display: none;}
.header .CHECK_BOX:checked ~ .menu::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */}
.header .CHECK_BOX:checked ~ .LABEL_FOR_BOX .STRICH {
    background: transparent;}

.header .CHECK_BOX:checked ~ .LABEL_FOR_BOX .STRICH:before {
    transform: rotate(-45deg); 
    background: var(--text_color_01);
    top: 0;}
.header .CHECK_BOX:checked ~ .LABEL_FOR_BOX .STRICH:after {
    transform: rotate(45deg); 
    background: var(--text_color_01);
    top: 0;}




/* ------------------------------------ */
/* -- SHADOW - of the box (around X) -- */
/* ------------------------------------ */
.kasten::before {
    content: "";
    transform: scale(1.0);
    position: absolute;
    left: 0px;
    top: 0px;
    width: 26px;                                              /* -- SHADOW - width - for box --- */
    height: 23px;                                             /* -- SHADOW - height - for box -- */
    z-index: 20;
    box-shadow: 1px 0px 2px 0px rgba( 255, 200,  55, 0.20),   /*top*/
                0px 1px 2px 0px rgba( 255, 255, 220, 0.20),   /*left*/
                1px 0px 2px 0px rgba( 100, 100, 100, 0.20),   /*right*/
                0px 1px 2px 0px rgba( 100, 100, 100, 0.20);   /*bottom*/
    
    border-radius: var(--dropdown_menu_button_border_radius);}/* -- SHADOW - border radius -- must be same value as border radius for - " .kasten " -- */

.header .CHECK_BOX:checked ~ .LABEL_FOR_BOX .kasten {
    transition: background(color); 
    background-color: var(--menu_color_01); 
    border-color: var(--menu_color_01);
    box-shadow: 0px 0px 0px 0px rgba( 255, 255,  55, 0.00);}

.header .CHECK_BOX:checked ~ .LABEL_FOR_BOX .kasten::before { /* -- SHADOW - fade out - to transparent -- */
    box-shadow: 0px 0px 0px 0px rgba( 255, 255,  55, 0.00);} 





/* -------------------------------------------- */
/* -------------------------------------------- */
/* -------------------------------------------- */
/* -------------------------------------------- */

/* -------------------------------------------- */
/* -- social media icons -- in dropdown menu -- */
/* -------------------------------------------- */
.iconimg_dropdown{
    display: inline;
    position: relative;
    left:-5px;
    padding: 0px 6px 0px 6px;}