/* #region GENERAL */
@font-face {
    font-family: "Noto Sans Display";
    src: url('../ass/fonts/Noto/NotoSansDisplay-VariableFont_wdth,wght.ttf') format('truetype');
}

:root{
    --color_red: #FD2826;
    --color_red_dark: #b5211f;
    --color_blue: #1E4588;
    --color_blue_light: #1e45881a;
    --color_orange: #FF6600;
    --color_yellow: #FFCC00;
    --color_yellow_dark: #dfb200;
    --color_green: #33CC00;
    --color_cyan: #00CCCC;
    --color_grey: #676767;
    --color_grey_light: #d3d3d3;
    --color_grey_dark: #525252;
    --color_black: #000000;
    --color_white: #FFFFFF;

    --ui_scale_smartphone_xs: 0.9;
    --ui_scale_smartphone: 0.95;
    --ui_scale_tablet: 1.0;
    --ui_scale_notebook: 1.03;
    --ui_scale_desktop: 1.06;
}

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-family: "Noto Sans Display", Verdana, sans-serif;
    font-optical-sizing: auto; /* automatic optical sizing for variable fonts */
    font-weight: 400;
    font-style: normal;
    font-size: 1.0rem;
    color: var(--color_grey_dark);
    font-variation-settings:
      "wdth" 70;
    scroll-behavior: smooth; 
}

.not_selectable { /* Makes text unselectable and sets the default cursor (arrow) */
    cursor: default; 
    user-select: none;
}

strong {
    font-weight: 590;
}
/* #endregion */

/* #region BODY */
.body_container {
    max-width: 85rem;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    min-height: 100vH;
    row-gap: 0.0rem;
    column-gap: 0.0rem;
    padding: 0.0rem; /* Media Query */
    margin: 0 auto;
 }
/* #endregion */

/* #region HEADER */
.header_container {
    grid-area: hed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--color_blue);
    color: var(--color_white);
    font-size: 1.5rem;
    font-weight: 500;
}

.header_logo {
    display: block;
    width: auto;
    height: 4.0rem;
}
/* #endregion */

/* #region NAVBAR */
.navbar_container {
    grid-area: nav;
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 5.0rem;
}

.navbar_link {
    display: flex;
    align-items: center;
    color: var(--color_blue);
    text-decoration: none;
    font-size: 1.3rem;
    font-variant: small-caps;
}
/* #endregion */

/* #region BURGER_MENU*/
.burger_container {
    grid-area: bur;
    margin: 0.5rem auto;
    padding: 0.5rem;
    z-index: 1000;
    /* further formation in main.py */  
}

.burger_menu_item {
    display: block;
    margin: 0.5rem auto;
    background-image: url('../ass/icons/burger_menu.svg');
    background-repeat: no-repeat;    
    background-position: center;
    background-color: white;
    padding: 1.3rem;
    border-width: 1px;
    border-radius: 50%;
    border-style: solid;
    border-color: var(--color_blue);
    cursor: pointer;
}

.burger_menu_navbar {
    display: none;
    list-style-type: none;
    text-align: center;
    padding-inline-start: 0px;
}

.burger_menu_navitem {
    color: var(--color_white);
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 3.0rem;
    text-decoration: none;    
}
/* #endregion */

/* #region CONTENT */
.content_container {
    grid-area: con;
    margin: 0.0rem 0.5rem 1.0rem 0.5rem;
}
/* #endregion */

/* #region FOOTER */
.footer_container {
    grid-area: fot;
    display: flex;
    justify-content: space-around;
    background-color: var(--color_blue);
    color: var(--color_white);
}

.footer_link {
    display: flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
    font-size: 0.9rem;
}

.footer_icon {
    height: 1.8rem;
    width: 1.8rem;
    margin: 0.5rem 0.3rem;
}

.ui_container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.ui_button {
    color: var(--color_white);
}

.ui_img {
    height: 1.8rem;
    width: 1.8rem;
}
/* #endregion */

/* #region MODAL */
.modal_container {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    justify-content: center;
    align-items: center;
}

.modal_content {
    background-color: var(--color_white);
    padding: 20px;
    border-radius: 8px;
    width: 80%;
    max-width: 500px;
    position: relative;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    max-height: 60vh;
    overflow: hidden;
}

.modal_scroll_content {
    margin-top: 2.0rem;
    margin-bottom: 1.0rem;
    max-height: 40vh;
    overflow-y: auto;
    padding-right: 20px;
}

.close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    cursor: pointer;
    color: #aaa;
}

.close:hover {
    color: #000;
}

.imprint_text {
    margin-top: 0.0rem;
    text-align: justify;
}

.imprint_list_intro {
    margin-bottom: 0.0rem;
}

.imprint_h1 {
    color: var(--color_red);
    margin-top: 2.0rem;
    margin-bottom: 1.5rem;
    font-size: 1.3rem;
    font-weight: 540;
}

.imprint_h2 {
    color: var(--color_grey_dark);
    font-size: 1.1rem;
    font-weight: 540;
    margin-top: 1.0rem;
}

/* #endregion */

/* #region SMARTPHONE_XS */
@media screen and (min-width: 0rem) {

    html {
        font-size: calc(1.0rem * var(--ui_scale_smartphone_xs))
    }

    .body_container {
        grid-template-areas:
        "hed hed hed hed hed hed hed hed hed hed hed hed"
        "bur bur bur bur bur bur bur bur bur bur bur bur"
        "con con con con con con con con con con con con"
        "fot fot fot fot fot fot fot fot fot fot fot fot";
        grid-template-rows: auto auto 1fr auto;    
    }

    .navbar_container {
        display: none;
    }

    .burger_container {
        display: block;
    }
}
/* #endregion */

/* #region SMARTPHONE */
@media screen and (min-width: 24rem) { /* 384 px */

    html {
        font-size: calc(1.0rem * var(--ui_scale_smartphone))
    }
}
/* #endregion */

/* #region TABLET */
@media screen and (min-width: 48rem) { /* 768px */

    html {
        font-size: calc(1.0rem * var(--ui_scale_tablet))
    }

    .body_container {
        grid-template-areas:
        "hed hed hed hed hed hed hed hed hed hed hed hed"
        "nav nav nav nav nav nav nav nav nav nav nav nav"
        "con con con con con con con con con con con con"
        "fot fot fot fot fot fot fot fot fot fot fot fot";
        grid-template-rows: auto auto 1fr auto;    
    }

    .navbar_link:hover {
        text-decoration: underline;
        text-decoration-thickness: 2px;
    }

    .burger_menu_navitem:hover {
        text-decoration: underline;
        text-decoration-thickness: 2px;
    }

    .navbar_container {
        display: flex;
    }

    .burger_container {
        display: none;
    }

    .footer_link:hover {
        text-decoration: underline;
        text-decoration-thickness: 1px;
    }

    .ui_button:hover {
        filter: drop-shadow(2.0px 2.0px 2.0px rgb(0, 0, 0));
        cursor: pointer;
    }
    
    .imprint_h1 {
        font-weight: 590;
    }

    .imprint_h2 {
        font-weight: 650;
    }
    
    strong {
        font-weight: 650;
    }

    .content_container {
        margin: 0.0rem 1.0rem 1.0rem 1.0rem;
    }
}
/* #endregion */

/* #region NOTEBOOK */
@media screen and (min-width: 62rem) { /* 992 px */

    html {
        font-size: calc(1.0rem * var(--ui_scale_notebook))
    }
}
/* #endregion */

/* #region DESKTOP */
@media screen and (min-width: 75rem) { /* 1.200 px */

    html {
        font-size: calc(1.0rem * var(--ui_scale_desktop))
    }
}
/* #endregion */