/* Theming */

@import "colors.css";
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap"); /* import font */

/*change 3*/

/* Variables */
:root{


    /*--standard-header-height: 8vmin;*/
    --dynamic-viewport-height: 100vh; /*fallback for older browsers*/
    --dynamic-viewport-height: 100dvh;

    --standard-header-height: clamp(45px, min(10vmin, 5vh), 80px); /*8vh previously, zu groß iphone, zu groß/klein tablet?*/
    --standard-footer-height: clamp(15px, 3vmin, 20px);

    --standalone-bottom-height: 13vmin; /*this applies roughly on 4/3 screens zu hoch beim ipad*/
    --standalone-bottom-icon-height: calc(var(--standalone-bottom-height)/2); /*3:4 screen ratio optimized*/
    --standalone-bottom-caption-size: 2vmin;

    /*--standalone-bottom-height: 20vmin;*/

    /*--standalone-bottom-height: calc(((1vmax*3)/(1vmin*4))*13vmin);*/


    --standard-padding: 10px;
    --font-size: 12px;
    --font-weight: 400;


    font-family: "Roboto", sans-serif;
    font-size: var(--font-size);
    font-weight: var(--font-weight);

    -webkit-user-select: none; /* Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
    text-decoration: none;


    --hover-transition-time: 0s;



}



@media (hover: hover) {
    :root {
        --hover-transition-time: .2s;
    }
}

/*set bottom sizes here for this stupid standalone thing*/
/*so these media queries can moe INTO the root element*/
/* Minimum aspect ratio */








/* Reset */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overscroll-behavior: none;
    -webkit-user-select: none; /* Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
    text-decoration: none;
    /* This is the magic bit for Firefox */
    scrollbar-width: none;
    /* IE and Edge */
    -ms-overflow-style: none;


    
}
*, *::before, *::after {
    box-sizing: border-box;
}

*::-webkit-scrollbar {
    /* This is the magic bit for WebKit */
    display: none;
}

[hidden] {
    display:none !important;
}
.hidden {
    display:none !important;
}


input, select, textarea {
    -webkit-user-select: auto; /* Safari */        
    -moz-user-select: auto; /* Firefox */
    -ms-user-select: auto; /* IE10+/Edge */
    user-select: auto; /* Standard */
}


*:focus {
    outline: none; /* prevent clicked focus in chrome*/
}
a {
    text-decoration: none;
    color:var(--color-content-font-highlight);

    /*prevent link preview*/
    -webkit-touch-callout: none;
    /*touch-action: none;*/
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    /*-webkit-background-clip: content-box;-> makes my sidenav ugly*/
}
a:active {
    /*prevent border around tapped link in safari*/
    background-color: transparent;
    background: transparent;
    -webkit-touch-callout: none;
    /*touch-action: none;*/
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
}
.href {
    color: var(--color-content-font-highlight);
    cursor:pointer;
}
ul{
    list-style: none;
}

img {
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    -moz-user-drag: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

/* stop html from bouncing -> however, this kills the scroll and sticky options... */
html {
    /*overflow: hidden;*/
    overscroll-behavior: none; /*prevent bouncing*/
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
    height: 100vh;
    width: 100%;
}

/* Body - flex relevant for sticky footer */
body{
    position: fixed;
    overflow:hidden;
    overscroll-behavior: none; /*prevent bouncing*/
    background-color: var(--color-ui-frame-bg);
    height: var(--dynamic-viewport-height);
    margin:0;
    flex-direction:column;
    -webkit-overflow-scrolling: touch;
    height: 100vh;
    width: 100%;
}


.prompt {
    position:fixed;
    transform: translate(-50%,-50%);
    top:50%;
    left:50%;
    width:50vw;
    height:30vh;
    border-radius: 5px;
    background-color: grey;
    color:black;
    text-align:center;
    z-index: 10000;
}



/* Header */

.header{
    background-color: rgba(0, 0, 0, 0); /*click trough header in tiny web - reset in big & standalone*/
    position: sticky;
    transform:translateY(-0%);      /* necessary for bottom overwrite in standalone mode */
    bottom: var(--dynamic-viewport-height, 100vh);
    /*min-height:50px;*/
    width: 100%;
    height: var(--standard-header-height);
    z-index: 2;
    pointer-events: none; /*click trough header in tiny web - reset in big & standalone*/
}






main {
    position: relative;
    top: calc(0px - var(--standard-header-height));
    margin-bottom: calc(0px - var(--standard-header-height));     /*for tiny browser, recalc in big & standalone*/
    height: calc(min(var(--dynamic-viewport-height), 100vh) - var(--standard-footer-height));
    background-color: var(--color-content-bg);
    display:flex;
    z-index: 1;
    overflow: hidden;
    max-width: 100vw;
}


main::after {
    /*prevents header from flashing when new screens are loaded*/
    content: '';
    position:fixed;
    top:0px;
    width:100vw;
    height:var(--standard-header-height);
    background-color:var(--color-ui-frame-bg);
}



.screen{
    /*max-height:calc(var(--dynamic-viewport-height) - var(--standard-header-height) - var(--standard-footer-height));*/
    background-color: var(--color-content-bg);
    overflow: scroll;
    display: flex;
    flex-direction: column;
    z-index:4;
    overscroll-behavior:unset;
    overflow-x: hidden;
}

/*custom html tag*/
screen-page {
    flex: 10;
    display:flex;
    overflow:scroll;
    overflow-x:hidden;
    flex-direction:row;
}


.screen article {
    color: var(--color-content-font);
}

footer.status-bar {

    background-color: var(--color-ui-frame-bg);
    color: var(--color-ui-frame-font);
    position: sticky;
    bottom:0px;
    /*min-height:5px;*/
    width: 100%;  
    height:var(--standard-footer-height);
    font-size: calc(var(--standard-footer-height)/2);
    line-height: var(--standard-footer-height);
    vertical-align: middle;
    padding-left: var(--standard-padding);
    padding-right: var(--standard-padding);
    z-index: 2000;
}



span.banner {
    margin-left:1ch;
    margin-right:1ch;
    padding-right:3px;
    padding-left:3px;
    border-radius:3px;
}
.banner.beta {
    text-transform: uppercase;
    background-color: var(--color-ui-beta);
    color:black;
    font-weight: bolder;
}


.primary-nav-icon {
    display: none;
}






/* Logo */
.logo, .secondary-nav-btn {
    display:block;
    position:relative;
    color: var(--color-ui-frame-font);
    background-color: var(--color-ui-frame-bg);
    height: var(--standard-header-height);
    padding: calc(var(--standard-header-height)/10);
    float: left;
    pointer-events: auto;   /*neccessary for click trough header in tiny web */
    z-index:2;
}
/*
.secondary-nav-btn {
    padding: calc(var(--standard-header-height)/8);
}*/
.secondary-nav-btn:hover {
    color: var(--color-ui-frame-font-hover);
    
}
.logo img {
    color: var(--color-ui-frame-font);
    height: 100%;
}



/* Profile */
.primary-nav-icon.profile {
    color: var(--color-ui-frame-font);
    height: var(--standard-header-height);
    padding: min(var(--standard-padding), 0.75vmin);
    padding: clamp(calc(var(--standard-padding)/2), 0.75vmin, var(--standard-padding));
    float: right;
    background-color: var(--color-ui-frame-bg);
}

.primary-nav-caption.profile {
    display: inline;
}



/* Nav menu */
.primary-nav{
    position: fixed;
    width: 100%;
    top:0px;
    height:0vmin;
    
    background-color: var(--color-content-bg);
    overflow: hidden;
    pointer-events: auto;
    z-index:1;


}

.primary-nav-menu{
    display: inline-block;
    background-color: var(--color-ui-frame-bg);
    width: 100vw;

}

.primary-nav-menu li{
    /*font-size: 3.5vmin;*/
    position:relative;

    margin:0;
    padding:0;
    line-height: var(--standard-header-height);
}

.primary-nav-menu-header {
    display:none;
    width: 100%;
    padding-right: var(--standard-header-height);
    padding-left: var(--standard-header-height);
}

.primary-nav-menu-header span{
    display: none;
    width: 100%;
    text-align: center;
    height: var(--standard-header-height);
    line-height: var(--standard-header-height);
    font-size: calc(var(--standard-header-height)/2.5);
    font-weight: bold;
    color: var(--color-ui-frame-font);

}




.primary-nav-menu a{
    display: block;
    color: var(--color-ui-frame-font);
    
    font-size: calc(var(--standard-header-height)/3);
    /*
    padding: calc(var(--standard-header-height)/3.5) 0 calc(var(--standard-header-height)/3.5) 2vmin;
    */
    transition: color var(--hover-transition-time) ease-in-out, background-color var(--hover-transition-time) ease-in-out;

}
@media (hover: hover) and (pointer:fine){
    .primary-nav-menu a:hover{
        background-color: var(--color-ui-frame-font-hover); /*exception: background changes on hover here*/
        
    }
}

.primary-nav-icon, .primary-nav-caption {
    transition: color var(--hover-transition-time) ease-in-out, background-color var(--hover-transition-time) ease-in-out;
}



/* Menu Icon */
.primary-nav-btn{
    position:relative;
    cursor: pointer;
    float: right;
    /*padding: calc(var(--standard-header-height)/2 - var(--standard-header-height)/20) 3vmin 0 0;*/
    padding: calc(var(--standard-header-height)/20);
    height: var(--standard-header-height);
    width: var(--standard-header-height);
    pointer-events: auto;   /*neccessary for click trough header in tiny web */
    z-index:2;
    background-color: var(--color-ui-frame-bg);
}/* Style label tag */
@media (hover: hover) and (pointer:fine){
    .primary-nav-btn:hover .primary-nav-btn-line,
    .primary-nav-btn:hover .primary-nav-btn-line::before,
    .primary-nav-btn:hover .primary-nav-btn-line::after{
        background: var(--color-ui-frame-font-hover); /*exception: background changes on hover here*/
        
    }
}

.primary-nav-btn-line {
    background: var(--color-ui-frame-font);
    display: block;
    height: calc(var(--standard-header-height)/20);
    position: relative;
    transform:translateY(-50%);
    top:50%;
    width: calc(var(--standard-header-height)/1.5);
    transition: background-color var(--hover-transition-time) ease-in-out;
    border-radius: 10px;

} /* Style span tag */

.primary-nav-btn-line::before,
.primary-nav-btn-line::after{
    background-color: var(--color-ui-frame-font);
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: transform var(--hover-transition-time) ease-in-out, background-color var(--hover-transition-time) ease-in-out;
    width: 100%;
    border-radius:10px;
}
.primary-nav-btn-line::before{
    top: calc(var(--standard-header-height)/6);
}
.primary-nav-btn-line::after{
    top: calc(0px - var(--standard-header-height)/6);
}

.primary-nav-check {
    display: none;
} /* Hide checkbox */


/* Toggle menu icon */
.primary-nav-check:checked ~ .primary-nav{
    height: min(var(--dynamic-viewport-height), 100vh); /* - var(--standard-footer-height)*/
}
.primary-nav-check:checked ~ .primary-nav .primary-nav-menu .primary-nav-menu-header{
    display:inline-block;
}
.primary-nav-check:checked ~ .primary-nav .primary-nav-menu .primary-nav-menu-header span{
    display:inline-block;
}
.primary-nav-check:checked ~ .primary-nav .primary-nav-menu a{
    width: 100%;
    text-align: center;
}
.primary-nav-check:checked ~ .primary-nav-btn .primary-nav-btn-line {
    background-color: transparent;
}
.primary-nav-check:checked ~ .primary-nav-btn .primary-nav-btn-line::before {
    transform: rotate(-45deg);
    top:0;
}
.primary-nav-check:checked ~ .primary-nav-btn .primary-nav-btn-line::after {
    transform: rotate(45deg);
    top:0;
}


.network-status {
    position:absolute;
    top:calc(var(--standard-padding)/2 - 2px);
    right:calc(var(--standard-padding)/2 - 2px);
    width:10px;
    height:10px;
    border: 2px solid var(--color-ui-frame-bg);
    border-radius:5px;
    background-color:var(--color-ui-status-offline);
}
.network-status.online{
    background-color: var(--color-ui-status-online);
}




/*SCREEN STUFFF*/


/*screen headers*/

/*.screen {background-color: brown;}*/

/* HEADER with drop-shadow on scroll */


/*HERE NOW*/
.screen header {
    height: var(--standard-header-height);  /* 64 + 16px ==> 10vmin*/
    position: fixed;
    background-color: transparent;
    /* negative top allows for 16 pixels of movement before sticking */
    top: 0px; 
    /* make sure header overlaps main*/
    z-index: 1;


}
  








/* .screen header CONTENT */
.screen header > div {

    width:100%;
    display:flex;
    white-space: nowrap;
    background-color: var(--color-ui-frame-bg);
    color: var(--color-ui-frame-font);

    /*
    position: sticky;
    -webkit-position: sticky;
    */
    position:relative;
    top: 0px;
    z-index: 3;
    padding-left: calc(var(--standard-header-height) + var(--standard-padding));
    padding-right: calc(var(--standard-header-height) + var(--standard-padding));

    background-color: pink;
}

header > div h1 {
    min-width:50px;
    line-height: var(--standard-header-height);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    float: left;
}




/* Back Button */
.back-btn{



    position:relative;

    flex: 1;
    float:left;
    min-width:calc(var(--standard-header-height)/2);
    max-width:calc(var(--standard-header-height)/2);

    /*background-color:purple;*/

    cursor: pointer;
    color: var(--color-ui-frame-font);

    transition: color var(--hover-transition-time) ease-in-out, background-color var(--hover-transition-time) ease-in-out;

    /*margin-right: var(--standard-padding);*/ /*for big screen*/


    margin-right:calc(var(--standard-padding)/2);
    margin-left:calc(0px - var(--standard-padding));

}

.back-btn svg {
    display:block;
    position:relative;
    transform: translate(-50%, -50%);
    top:50%;
    left:50%;
    z-index:2;
    width:60%;
}


.back-btn::after {
    content: '';
    position: absolute;
    transform: translateY(-50%);
    top:50%;
    left:0%;
    width: calc(var(--standard-header-height)/2);
    height: calc(var(--standard-header-height)/2);
    z-index:1;

    background-color: var(--color-ui-frame-bg);
    border-radius: 5px;

    transition: color var(--hover-transition-time) ease-in-out, background-color var(--hover-transition-time) ease-in-out;
}
@media (hover: hover) and (pointer:fine){
    .back-btn:hover::after{
        background-color: var(--color-ui-frame-font-hover); /*exception: backround changes here on hover*/
        
    }
}


/*add fucking stylable svg element here*/


.object-menu {

    flex: 1;
    float: right;
    display: flex;
    justify-content: right;
    overflow:visible;

}

.object-menu span:not(.menu-option):not(.icon) {
    position:relative;
    flex:1;
    float:right;
    height:var(--standard-header-height);
    min-width:calc(var(--standard-header-height)/2.3);
    max-width:calc(var(--standard-header-height)/2.3);
    margin-left:var(--standard-padding);
    overflow:visible;
    cursor:pointer;

}
.object-menu span:last-child:not(.menu-option):not(.icon) {
    margin-right:2vmin;
}
.object-menu span:first-child:not(.menu-option):not(.icon) {
    margin-left:4vmin;
}

.object-menu span:not(.icon) svg {
    position:relative;
    top:0%;
    left:0%;
    z-index:2;
    height:100%;
    width:100%;
}
.object-menu span:not(.icon) svg:hover {
    color: var(--color-ui-frame-font-hover); /*exception, highlight color here*/
    
}





/* submenu */
.submenu, .object-menu span .submenu {

    position: absolute;
    display: none;
    top:60%;
    right:50%;
    /*width:fit-content !important;*/
    min-width:100px;
    height:fit-content !important;
    z-index:3;
    background-color: var(--color-menu-bg);
    /*border-left: .5px solid var(--greyscale-color-darker);*/
    transition: color var(--hover-transition-time) ease-in-out, background-color var(--hover-transition-time) ease-in-out, filter .15s ease-in-out;
    box-shadow: 3px 3px 5px rgb(0 0 0 / 0.2);

    border-radius:5px;
    overflow:hidden;
}

.submenu {
    overflow:visible;
    margin-bottom:35px;
}

.submenu .submenu {
    position:relative;
    top:0px;
    /*right:calc(var(--standard-padding)/2);*/
    width:unset;
    min-width: 100% !important;
    right:0px;
    /*min-width: calc(100% + var(--standard-padding)) !important;*/
    z-index: 3 !important;

    box-shadow:none;

    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    margin-bottom:0px;

    grid-area: extention;
}

/*das li item ist irgendwie größer als das menu option ding*/

.submenu .submenu ul {
    overflow-x:hidden;
}

.submenu li {
    position:relative;
    height:fit-content;
    width:100%;
    left:0px;
    display: grid;
    grid-template-columns: calc(2*var(--standard-padding)) 1fr min-content;
    grid-template-rows: 1fr;
    grid-template-areas:
      "prefix text suffix"
      "extention extention extention";
    grid-auto-flow: row;
    row-gap: 0;
    column-gap: 0;

    background-color: var(--color-menu-bg);

    transition: margin .15s ease-in-out, width .15s ease-in-out, left .15s ease-in-out, box-shadow 0.15s ease-in-out, filter .15s ease-in-out;

    box-shadow: none;

    z-index: 2;

}

.submenu li:first-of-type {
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}

.submenu li:last-of-type, .submenu li:last-of-type + .subslide {
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;  
}



.submenu li.icons-big {
    grid-template-columns: min-content 1fr min-content;
}

.submenu li .label {
    grid-area: text;
    -webkit-text-stroke: .5px transparent;
    -ms-text-stroke: .5px transparent;
    text-stroke: .5px transparent;
    -webkit-transition: -webkit-text-stroke .15s ease-in-out;
    -ms-transition: -ms-text-stroke .15s ease-in-out;
    transition: text-stroke .15s ease-in-out;

}
.submenu li .icon {
    grid-area: prefix;
    color: var(--color-menu-font);
}
.submenu:not(.background) li.hovered:not(.expanded) > .icon {
    color: var(--color-menu-font-hover);
}


.submenu li .icon:not(.after) {
    width:calc(2*var(--standard-padding));
    transform: rotate(0deg);
    padding-left: calc(var(--standard-padding)/2);
    padding-right: calc(var(--standard-padding)/2);
}
.submenu li .icon:not(.after) svg {
    -webkit-transition: -webkit-transform .15s ease-in-out;
    -ms-transition: -ms-transform .15s ease-in-out;
    transition: transform .15s ease-in-out;
}
/*
.submenu li.expanded .icon:not(.after) svg {
    transform: translateY(-50%) rotate(90deg);
}
*/

.counter {

    position:absolute;
    transform: translate(50%, -50%);
    top:0px;
    right:0px;

    line-height: .9rem;
    height: calc(.9rem + 7px);
    min-width: calc(.9rem + 7px);
    width:fit-content;

    padding: 4px;
    border-radius: calc((.9rem + 7px)/2);

    align-items: center;
    margin: auto;

    text-align:center;


    background-color: var(--color-ui-badge);
    color: var(--color-ui-badge-font);

    z-index: 1;
}




.submenu-btn > .counter {
    transform: none;
    right:0px;
    margin-right: calc(var(--standard-padding)*-1)
}


.fieldset-btn:not(.show-counter) > .counter {
    display:none;
}




.submenu li .counter {
    grid-area: suffix;
    margin-top: auto;
    margin-bottom: auto;
    /*margin-right: calc(1.5*var(--standard-padding));*/
    margin-right: calc(1.5*var(--standard-padding) - 1px);
    margin-left: calc(-1.5*var(--standard-padding));

    position:unset;
    transform:none;

}
/*
.submenu .submenu li .counter {
    margin-right: calc(1.5*var(--standard-padding) - 1px);
}
*/

.submenu li:not(.expanded):not(.TESTCLASS) > .delete {
    display:none;
}


.submenu li.expanded > .counter {
    display: none;
}
.submenu li.expanded > .counter.hidden + .icon + .delete {
    display: none;
}



.submenu li:not(.TESTCLASS):not(.delete-hidden) > .counter:not(.hidden) + .icon.after {
    display: none;
}

.submenu li.delete-hidden > .delete {
    display:none;
}

.submenu li .delete {
    color: grey !important;
}



.submenu li.expanded {

    border: none !important;

    background-color: var(--color-menu-bg) !important;
    border-radius: 5px;

    z-index: 3;
}
/*
.submenu li.expanded > .label {
    -webkit-text-stroke: .5px var(--color-menu-font);
    -ms-text-stroke: .5px var(--color-menu-font);
    text-stroke: .5px var(--color-menu-font);
}
*/


.submenu li.expanded li:first-of-type {
    border-top-right-radius: 0px !important;
    border-top-left-radius: 0px !important;
}
.submenu li.expanded li:first-of-type:not(.subslide-item) {
    border-top: 2px solid grey;
}
.submenu li.expanded li:last-of-type {
    border-bottom: none;
}

.submenu li.transitions {
    margin-top: calc(var(--standard-padding)/-2);
    margin-bottom: calc(var(--standard-padding)/-2);
    /*margin-bottom: calc(-50% + 12.5% + var(--standard-padding));*/
    width: calc(100% + var(--standard-padding));
    left: calc(var(--standard-padding)/-2);
    box-shadow: 0px 0px 10px 3px rgb(0 0 0 / 0.5);
}
.submenu li.transitions .icon:not(.after) svg {
    transform: translateY(-50%) rotate(90deg);
}
.submenu li.transitions > .label {
    -webkit-text-stroke: .5px var(--color-menu-font);
    -ms-text-stroke: .5px var(--color-menu-font);
    text-stroke: .5px var(--color-menu-font);
}

.submenu li .icon.big:not(.after) {
    width:2rem;
    margin-left: calc(1.25*var(--standard-padding));
    margin-right: var(--standard-padding);
    padding: 0;
    padding-left: 0;
    padding-right: 0;
}
.submenu li .icon.after {
    grid-area: suffix;
    width:1.25rem;
    margin-right: calc(1.5*var(--standard-padding));
}



.submenu li .icon.after.delete {
    /*
    width: calc(1.25rem + 3*var(--standard-padding));
    padding-right: calc(1.5*var(--standard-padding));
    padding-left: calc(1.5*var(--standard-padding));
    margin-right: 0;
    */

    /*
    width: calc(1.25rem + 1.5*var(--standard-padding));
    padding-right: 0;
    padding-left: calc(1.5*var(--standard-padding));
    margin-right: calc(1.5*var(--standard-padding));
    */

}




.submenu li.unchecked .icon.after {
    display:none;
}
.submenu li .icon svg{
    height: unset;
}

.submenu li:not(.expanded) + li.newgroup:not(.expanded) {
    border-top: 2px solid grey;
}


.submenu li .icon.asc, .submenu li .icon.desc {
    display:none;
}
.submenu li.asc .icon.asc, .submenu li.desc .icon.desc {
    display:unset;
}


.submenu li:not(:first-of-type) {
    border-top: .5px solid grey;
}

.attention svg, .attention > svg{
    color: var(--color-ui-delete) !important;
}

.submenu .menu-option {
    display: block;
    padding: var(--standard-padding);
    padding-left: 0;
    margin:0;
    text-decoration: none;
    z-index: 4;
    max-width: 150px;
    width:100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    /*transition: color var(--hover-transition-time) ease-in-out, background-color var(--hover-transition-time) ease-in-out;*/
}
.submenu .menu-option {
    color: var(--color-menu-font);
}

.submenu:not(.background) li.hovered:not(.expanded){
    color: var(--color-menu-font-hover);
    background-color: var(--color-menu-bg-hover);
}

.submenu:not(.background) li:first-of-type.hovered {
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}
.submenu:not(.background) li:last-of-type.hovered:not(.subslide-item) {
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}


.submenu:not(.background) li.hovered:not(.expanded) > .menu-option.label{
    color: var(--color-menu-font-hover);
}

.submenu > ul > li:not(.expanded){
    filter: brightness(100%); 
}
.submenu.background > ul > li:not(.expanded){
    filter: brightness(var(--filter-menu-bg-brightness));
}


.submenu .menu-option.delete:hover{
    color: var(--font-color-delete) !important;
    background-color: var(--bg-color-delete);
    

    /*this does apply for the bg, however color is ignored...*/
}

.submenu .menu-option.label {
    font: 1.4rem / 1.2 sans-serif;
}



.menu-option.attention, .menu-option.attention {
    color:var(--color-ui-delete) !important;
}




.enlarged {
    width: calc(100% + 2*var(--standard-padding) + 30px) !important;
    left: calc(var(--standard-padding)/-1 - 30px) !important;
    margin-top: calc(var(--standard-padding)/-1.5) !important;
    margin-bottom: calc(var(--standard-padding)/-1.5) !important;
}

/*
.expanded, .enlarged {
    box-shadow: 0px 5px 5px grey !important;
    z-index: 10000000;
}
*/


.submenu li.TESTCLASS {
    z-index:2;
    box-shadow: 0px 5px 5px var(--color-ui-shadow) !important;
}

.submenu li.TESTCLASS + .subslide + li {
    box-shadow: 0px -5px 5px var(--color-ui-shadow) !important;
}


.subslide {
    /*background-color: var(--color-menu-bg-hover);*/

    position:relative;


    grid-area: extention;
    width: 100%;
    max-height:calc(3.3rem * 3);

    /*min-height:calc(3.3rem * 3);*/
    height:calc(3.3rem * 3);


    overflow-y: scroll;

    overscroll-behavior-y:auto;

    padding-left:calc(2*var(--standard-padding));

    scroll-snap-type: y mandatory;

    z-index: 1;

    cursor: auto;


}

.subslide li {
    cursor: pointer;
}

.subslide li.empty {
    display:none;
}

.subslide li:first-of-type:last-of-type.empty {
    display: grid;
    color:grey !important;
    margin:0;
    margin-left:0;
    margin-right:0;
    height:100%;
    width:100% !important;
    padding-right: calc(var(--standard-padding)*2);
}
.subslide li.empty .label {
    color:grey !important;
    text-align: center;
    padding:0 !important;
    margin-left: auto;
    margin-right: auto;
}



/*
approach to align list items vertically - however, it does not work as the thingy things for scrolling are relative

yes, subslide needs a wrapper, replacing subslide
then the subslide can be a flex thing with aligned items center
the scroll covers can be inside the subslide
the scroll buttons are outside the subslide but inside the wrapper

subslide has pointer events none, subslide li has pointer events all


*/

/*
.subslide {
display:flex;
flex-direction: column;


}
.subslide .subslide-item{
    align-self: center;
}
*/

.subslide .scroll-up {
    position:sticky;
    top:0px;

    margin-bottom: -3.25rem;
    width:calc(1.5*var(--standard-padding));
    height:3.25rem;
    /*background-color: red;*/

    margin-left: calc(var(--standard-padding)/-2);

    z-index:-1;

    cursor:pointer;
}
.subslide .scroll-up svg {
    transform: rotate(90deg);
    position:absolute;
    bottom:0px;
    right:0px;
    width:100%;

    color:grey;
}
.subslide .scroll-up-cover {
    position: relative;
    top:0px;

    margin-bottom: -4.75rem;
    /*width:calc(1.5*var(--standard-padding));*/
    height:4.75rem;
    background: var(--color-menu-scroll-up-cover); 

    /*margin-left: calc(var(--standard-padding)/-2);*/

    margin-left: calc(var(--standard-padding)/-1);
    width: calc(2.5*var(--standard-padding));

    z-index:3;
}
.subslide .scroll-down {
    position:sticky;
    bottom:0px;

    margin-top: -3.25rem;
    width:calc(1.5*var(--standard-padding));;
    height:3.25rem;
    /*background-color: green;*/

    margin-left: calc(var(--standard-padding)/-2);

    z-index:2;

    cursor:pointer;
}
.subslide .scroll-down svg {
    transform: rotate(-90deg);
    position:absolute;
    top:0px;
    right:0px;
    width:100%;

    color:grey;
}
.subslide .scroll-down-cover {
    position: relative;
    bottom:0px;

    margin-top: -4.75rem;
    /*width:calc(1.5*var(--standard-padding));*/
    height:4.75rem;
    background: var(--color-menu-scroll-down-cover);

    /*margin-left: calc(var(--standard-padding)/-2);*/

    margin-left: calc(var(--standard-padding)/-1);
    width: calc(2.5*var(--standard-padding));

    z-index:3;
}


.subslide li {

    display: grid;
    grid-template-columns: min-content min-content 1fr min-content;
    grid-template-rows: 1fr;
    grid-template-areas:
      "check prefix text suffix";
    grid-auto-flow: row;
    row-gap: 0;
    column-gap: 0;

    scroll-snap-align: start;

    /*background-color: var(--color-menu-bg-hover);*/

    z-index: 1;

}

.subslide, .subslide li, .subslide li.hovered {
    background-color: var(--color-content-bg) !important;
}

.subslide li.subslide-item {
    width: calc(100% - (2.5*var(--standard-padding)));
    margin-left: calc(2.5*var(--standard-padding));
    border-color: var(--color-menu-sub-borders);
}

.subslide li.subslide-item:first-of-type {
    margin-top:auto;
}
.subslide li.subslide-item:last-of-type {
    margin-bottom:auto;
}

.subslide li .label{
    color: grey !important;
    color: var(--color-content-font) !important;
    font: 1.5rem / 1.356 sans-serif !important;
    font-size: calc(var(--font-size)*1.2) !important;
}

.subslide li .icon:not(.ident) {
    display:none;
    color:grey !important;
}
.subslide li.checked .icon {
    display:unset;
    color:var(--color-content-font-highlight) !important;
}
.subslide li .icon.ident {
    width: 2.1rem;
    padding-left: 0;
}
.subslide li .icon.ident svg {
    transform: translateY(-50%) rotate(0deg) !important;
    color: var(--color-content-font) !important;
}

.subslide li .icon.ident + .label {
    padding-left: calc(var(--standard-padding)/3);
}

.submenu li.TESTCLASS > .counter {
    display: none;
}

.submenu li.TESTCLASS > .counter.hidden + .delete{
    display:none;
}




/* Create Button */
.object-menu-btn {

    cursor: pointer;
    color: var(--color-ui-frame-font);
    display: flex;

    /* floatin version:*/
    position:relative;
    flex: 1;
    float:right;
    transition: color var(--hover-transition-time) ease-in-out, background-color var(--hover-transition-time) ease-in-out;
    max-width: -moz-fit-content;
    max-width: fit-content;
    flex-wrap: nowrap;
    border-radius: 5px;
    
    /*absolute version center
    position:absolute;
    left: 50%;
    transform:translateX(-50%);
    */

    margin-left:var(--standard-padding); /*needs to be value of the other object-menu items*/
    font-size: 120%;



}

.object-menu-btn > svg {
    display:inline-block;
    position:relative;
    left:0;
    z-index:2;
    height:var(--standard-header-height);
    padding:
        calc(var(--standard-padding) + var(--standard-header-height)*0.1)
        var(--standard-padding)
        calc(var(--standard-padding) + var(--standard-header-height)*0.1)
        var(--standard-padding);

    /*floating version:*/
    transform: translateY(-50%);
    top:50%;
    
}

.object-menu-btn span:not(.menu-option):not(.icon), .object-menu-btn div:not(.submenu) {
    display:inline-block;
    line-height: var(--standard-header-height);
    z-index:2;
    margin-left: calc(0px - var(--standard-header-height)*0.1);
    padding-right: var(--standard-padding);
}




.object-menu-btn::after {
    content: '';
    position: absolute;
    transform: translateY(-50%);
    top:50%;
    left:0%;
    width: 100%;
    height: calc(var(--standard-header-height)*0.8);
    z-index:1;
    border-radius: 5px;
    transition: color var(--hover-transition-time) ease-in-out, background-color var(--hover-transition-time) ease-in-out;
}
.object-menu-btn.prominent div:first-letter {
    text-transform: uppercase;
}
.object-menu-btn.prominent::after {
    background-color: var(--color-menu-bg-prominent);
    /*background-color: blue*/;
}


.object-menu-btn.prominent.bg-transition::after {
    -webkit-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    transition: background-color 200ms linear;
}

.object-menu-btn.prominent.hovered::after {
    background-color: grey !important;
}





/*test*/



/* HEADER with drop-shadow on scroll */
.screen .header-shadow {
    height: calc(var(--standard-header-height) + 16px);  /* 64 + 16px ==> 10vmin*/
    min-height: calc(var(--standard-header-height) + 16px);  /* 64 + 16px ==> 10vmin*/
    max-height: calc(var(--standard-header-height) + 16px);  /* 64 + 16px ==> 10vmin*/
    position: sticky;
    -webkit-position: sticky;
    background-color: transparent;
    /* negative top allows for 16 pixels of movement before sticking */
    top: -16px; 
    /* make sure header overlaps main*/
    z-index: 1;
    /* fix weird flickering issue in chrome: https://stackoverflow.com/a/22224884/286685 */
    -webkit-backface-visibility: hidden;

    width:calc(100% + 100px);
    left: -5px;


}
  
/* PSEUDO ELEMENTS to create drop-shadow */
.screen .header-shadow::before,
.screen .header-shadow::after {
    content: '';
    display: block;
    height: 16px;
    /* make pseudo elements sticky as well */
    position: sticky;
    -webkit-position: sticky;
}

/* SHADOW */
.screen .header-shadow::before {
    top: calc(var(--standard-header-height) - 16px); /* shadow is at bottom of element, so at 48 + 16 = 64px */
    box-shadow: 0px 4.5px 4px 0px rgba(0,0,0,0.5); /*0px 2px 5px rgba(0,0,0,0.5); increase second value helps*/
}

/* COVER */
.screen .header-shadow::after {
    /* linear gradient from background color to transparent acts as
        a transition effect so the shadow appears gradually */

    /*THIS IS A PROBLEM WITH DARKMODE*/

    background: var(--color-content-header-shadow);

    top: var(--standard-header-height);
    /* cover should fall over shadow */
    z-index: 2;
}






.screen article {
    flex: 10;
    display: flex;
    flex-wrap: wrap;
}

.screen section {
    flex: 4;
    min-width: min(380px, 100vw);
    padding: var(--standard-padding) var(--standard-padding) var(--standard-padding) var(--standard-padding);
}

.screen section.flex-wide {
    flex:6;
    min-width: 100%;
}
.screen section.flex-narrow {
    flex:2;
}



.screen .title {
    display: inline-block;
    /*max-width: calc(100vw - (4.5*var(--standard-header-height) + 4*var(--standard-padding) + 2.5vw));*/
    overflow:hidden;
    white-space:nowrap;
    font-size: calc(var(--standard-header-height)/3);
    /*padding-left: var(--standard-padding);*/
    text-overflow: ellipsis;
}
















/*
main {
    flex-direction: row-reverse;
}
*/




/* Responsiveness */
@media (min-width: 800px) { /*768*/

    .header {   /*click trough header in tiny web - reset in big & standalone*/    
        /*background:black;
        background-color:black;*/
        pointer-events: auto;
    }




    .primary-nav{
        /*height: 10vh;
        max-height: 10vh;*/
        max-height: var(--standard-header-height);
        top: 0;
        height:var(--standard-header-height);
        position: relative;
        float: left;
        width: fit-content;
        background-color: transparent;
    }





    .primary-nav-menu li{
       float: left;
       padding:0 var(--standard-padding) 0 var(--standard-padding);
    }

    .primary-nav-menu li:last-child{
        float:right;
        padding-right: 0.5vmin;
    }
    .primary-nav-menu li:last-child a{
        float:right;
        padding: 0;
    }
    .primary-nav-icon.profile{
        display: block;
    }
    .primary-nav-icon.profile:hover{
        color:var(--color-ui-frame-font-hover);
        
    }
    .primary-nav-caption.profile {
        display: none;
    }
    @media (hover: hover) and (pointer:fine){
        .primary-nav-menu a:hover{
            background-color: transparent;
            color: var(--color-ui-frame-font-hover);
        }
    }
    .primary-nav-btn{
        display: none;
    }
    .primary-nav-menu-header, .primary-nav-menu-header span {
        display:none;
    }
    .primary-nav-check:checked ~ .primary-nav .primary-nav-menu .primary-nav-menu-header{
        display:none;
    }
    .primary-nav-check:checked ~ .primary-nav .primary-nav-menu .primary-nav-menu-header span{
        display:none;
    }




    .screen header > div {
        background-color: var(--color-content-bg);
        color: var(--color-content-font);
        padding-right: var(--standard-padding); /*for browser big not standalone*/
        padding-left: var(--standard-padding);
    }

    .back-btn {
        margin-left: 0;
    }

    .object-menu {
        color: var(--greyscale-color-dark);
    }

}










*.standalone, *.browser, *.large, *.small{
    display:none !important;
}


footer.imprint {


    background-color: var(--color-ui-frame-bg);
    color: var(--color-ui-frame-font);
    font-size: calc(var(--standard-footer-height)/2);
    line-height: var(--standard-footer-height);
    vertical-align: middle;
    padding-left: var(--standard-padding);
    padding-right: var(--standard-padding);
    /*padding-bottom: 35px;*/
    z-index: 2;
    margin-top: 35px;
    display:flex;
    position:sticky;
    top:100%;

}
footer.imprint .version, footer.status-bar .version {
    margin:0; 
    margin-left:auto;
    width:unset;
}
footer.status-bar {
    display:none;
}
/*GENERAL STYLES, always applicable*/

.secondary-nav-btn { /*will be overwritten in large standalone*/
    display:none;
}


.confirmation-btn .side, .splash-card-wrapper .side {
    display: none;
}







.object-menu-btn:not(.prominent) {
    color: var(--color-content-font);
    color:grey;
}





/* SMALL GENERAL */
@media  (max-width: 799px) {
    .secondary-nav-menu {
        display: none;
    }
    .screen header {
        top: 0px;
        right:0px;
        /*left:0px !important;*/ /*solves orientation change issue, but might become issue with slideover...*/
    }

    .object-menu-btn:not(.prominent) {
        color: var(--color-ui-frame-font);
    }

    .splash-card-wrapper .wide {
        padding: calc(var(--standard-padding)/2);
    }
    .splash-card-wrapper .wide {
        padding-left:0px;
        padding-right:0px;
    }

}
/* LARGE GENERAL */
@media  (min-width: 800px) {


    .screen header {
        /*right: 0px !important;*/ /*still really important*/
    }



    .secondary-nav-btn {
        display:block;
    }
    .primary-nav-icon.secondary-nav-btn {
        display:block;
    }





    .secondary-nav {
        display: block;
        visibility: visible;
        /*max-height:calc(var(--dynamic-viewport-height) - var(--standard-header-height) - var(--standard-footer-height));*/
        min-width: 0px;
        max-width: 0px;
        background-color: var(--color-menu-bg);
        overflow: scroll;
        border-right: none;
        z-index: 5;
        padding-bottom:35px;
    }
    .secondary-nav.js-toggle-width {
        min-width: 160px;
        max-width: 240px; 
        width:20%;
        border-right: .5px solid grey;  
    }


    .secondary-nav li{
        position:relative;
        display: inline-block;
        color: var(--color-menu-font);
        /*background-color: red;*/
        width: 100%;
        font-size: var(--font-size);
        /*height:clamp(30px, 3vmin, 40px);*/
        /*height:clamp(30px, 4vmin, 50px);*/
        height: fit-content;
        vertical-align: middle;
        padding-left: var(--standard-padding);
        padding-right: var(--standard-padding);
        transition: color .2s ease-in-out, background-color .2s ease-in-out;
    }
    .secondary-nav a {
        position:relative;
        display: flex;
        /*background-color: rgb(255, 0, 68);*/
        height: 100%;
        /*line-height: clamp(30px, 3vmin, 40px);*/
        /*line-height: clamp(30px, 4vmin, 50px);*/
        vertical-align: middle;
        transition: color .2s ease-in-out, background-color .2s ease-in-out, border .2s ease-in-out;
        /*background-color: aqua;*/
        padding: calc(var(--standard-padding)/4) var(--standard-padding) calc(var(--standard-padding)/4) var(--standard-padding);
        padding:0;
        /*padding-left: var(--standard-padding);*/
        /*padding-right: var(--standard-padding);*/
        text-decoration: none;
        color: var(--color-menu-font);
        border-top: .5px solid var(--color-content-expand-hover);
    }

    .secondary-nav li:first-of-type a,
    /*.secondary-nav li:hover a,*/
    .secondary-nav li.active a,
    /*.secondary-nav li:hover + li a,*/
    .secondary-nav li.active + li a,
    .secondary-nav li.hovered + li a,
    .secondary-nav li[style*="display:none"] + li a {
        border-top: .5px solid transparent !important;
    }



    .secondary-nav li:hover {
        /*color: var(--color-menu-font-hover);*/
        /*background-color: var(--color-menu-bg-hover);*/
    }
    .secondary-nav li:hover a {
        /*color: var(--color-menu-font-hover);*/
    }

    .secondary-nav li.active {
        color: var(--color-menu-font-hover);
        background-color: var(--color-content-expand-hover);  
    }
    .secondary-nav li.active a{
        color: var(--color-menu-font-hover);
    }


    .secondary-nav-caption {
        /*float: left;*/
        flex: 7;
        overflow: hidden;
        text-overflow: ellipsis;
        /*font-size:120%;*/
        font: 1.2rem / 2.5 sans-serif;
        white-space: nowrap;
    }
    /*
    .secondary-nav-icon {
        position: relative;
        float:right !important;
        flex:1;
        width: fit-content;
        height: 100% !important;

        color: var(--color-menu-icons);
        padding-left: calc(var(--standard-padding)/3);
    }

    .secondary-nav-icon svg {
        float:right;
        opacity: .5;
        height:50% !important;
        position:relative;
        transform:translateY(-50%);
        top:50%;
    } 
    */

    svg.secondary-nav-icon {
        width:1.1rem;
    }




    .screen header {
        top: var(--standard-header-height);
    }
    
    .screen.js-toggle-width {
        width:80%;
        min-width: calc(100vw - 240px);
        max-width: calc(100vw - 160px);
       
       }
    
    .screen header.js-toggle-width {
        width: inherit !important;
        min-width: calc(100vw - 240px);
        max-width: calc(100vw - 160px);
    }

    .confirmation-btn .side, .splash-card-wrapper .side {
        display:block;
        min-width: 0px;
        max-width: 0px;  
    }

    .confirmation-btn .side.js-toggle-width, .splash-card-wrapper .side.js-toggle-width {
        display:block;
        min-width: 160px;
        max-width: 240px; 
        width:20%; 
    }
    .splash-card-wrapper .wide {
        padding-left: calc(var(--standard-padding)/2);
        padding-right: calc(var(--standard-padding)/2);
    }
    .confirmation-btn .wide.js-toggle-width, .splash-card-wrapper .wide.js-toggle-width {
        width:80%;
        min-width: calc(100vw - 240px);
        max-width: calc(100vw - 160px);
    }




    /*THIS WORKS ROUGHLY*/
    /*applied to .secondary-nav, .screen, .screen header on snav toggle*/
    .js-width-transition {
        transition: max-width .3s ease, min-width .3s ease, border-right .1s;
    }



}
/* STANDALONE GENERAL*/
@media (display-mode: standalone), (display-mode: fullscreen){
    /*do not show icon top corner*/
    
    body > header > .logo{
        display: none;
    }
    .primary-nav-btn{
        display: none;
    }

    .secondary-nav-btn {
        padding-left:0;
        padding-right:0;
    }

    .screen {
        padding-bottom: 35px;
    }

}
@media (display-mode: standalone){
    .browser-only {
        display: none !important;
    }
}


/* SMALL BROWSER */
@media  (max-width: 799px) and (display-mode: minimal-ui),
        (max-width: 799px) and (display-mode: browser),
        (max-width: 799px) and (display-mode: window-controls-overlay) {

    /*top nav is burger*/
    /*sidebar is hidden*/
    /*footer is visible below main scrolling*/

    *.browser.small {
        display: unset !important;
    }
    main {
        overflow:scroll;
        flex-direction: column;
        top:0;
        margin-bottom: 0;     /*for tiny browser, recalc in big & standalone*/
        height:calc(min(var(--dynamic-viewport-height), 100vh) - var(--standard-header-height));
        max-width: 100vw;
        overflow-x: hidden;
    }

    .secondary-nav-btn {
        display:none;
    }
    .secondary-nav {
        display:block;
        visibility: visible;
        overflow: visible;
    }

    .screen {
        overflow:visible;
        margin-top: 16px;
        /*min-height: var(--dynamic-viewport-height, 100vh);*/
    }


    .screen {
        height: calc(min(var(--dynamic-viewport-height), 100vh)); /*change in tiny browser*/
    }



    /*############ CORRECTION ###########*/

    main {
        position: relative;
        top: calc(0px - var(--standard-header-height));
        margin-bottom: calc(0px - var(--standard-header-height));     /*for tiny browser, recalc in big & standalone*/
        height: calc(min(var(--dynamic-viewport-height), 100vh));
        background-color: var(--color-content-bg);
        display:flex;
        z-index: 1;
        overflow: scroll;
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    
    /*SCREEN STUFFF*/
    
    .screen {
        margin-top: 0;
    }
    /*screen headers*/
    
    /*.screen {background-color: brown;}*/
    
    /* HEADER with drop-shadow on scroll */
    /*HERE NOW*/
    .screen header {
        height: calc(var(--standard-header-height) + 16px);  /* 64 + 16px ==> 10vmin*/
        position: fixed;
        background-color: transparent;
        /* negative top allows for 16 pixels of movement before sticking */
        top:0px;
        /* make sure header overlaps main*/
        z-index: 1;
        /* fix weird flickering issue in chrome: https://stackoverflow.com/a/22224884/286685 */
        -webkit-backface-visibility: hidden;

    
    
    }
      

    /* .screen header CONTENT */
    .screen header > div {
    
        width:100%;
        display:flex;
        white-space: nowrap;
        background-color: var(--color-ui-frame-bg);
        color: var(--color-ui-frame-font);
    
        /*
        position: sticky;
        -webkit-position: sticky;
        */
        position:relative;
        top: 0px;
        z-index: 3;
        padding-left: calc(var(--standard-header-height) + var(--standard-padding));
        padding-right: calc(var(--standard-header-height) + var(--standard-padding));

    }
    
    header > div h1 {
        min-width:50px;
        line-height: var(--standard-header-height);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        float: left;
        /*background-color: pink;*/
    }
    
    







}
/* SMALL STANDALONE */
@media (max-width: 799px) and (display-mode: standalone), (max-width: 799px) and (display-mode: fullscreen){
/*@media (max-width: 799px) and (display-mode: standalone){*/
    /*topnav is at bottom with icons*/
    /*footer is invisible*/


    /*this header size could be made applicable for small browsers in general for consistency*/
    :root {
        --standard-header-height: clamp(40px, min(9vmin, 5vh), 70px);
    }


    *.standalone.small {
        display: unset !important;
    }



    footer.status-bar, footer.imprint {
        display: none;
    }

    div:not(.splash-screen) > .header, body > .header{
        /*background-color: var(--black);*/
        position: absolute;
        bottom: 0px;
        width: 100%;
        height: var(--standalone-bottom-height);
        pointer-events: auto;
    }



    .primary-nav{
        /*height: 10vh;
        max-height: 10vh;*/
        max-height: var(--standalone-bottom-height);
        top: 0;
        height:var(--standalone-bottom-height);
        position: relative;
        float: left;
        width: fit-content;
        background-color: var(--color-ui-frame-bg);
        z-index:1000;
        overflow: visible; /*necesarry for profile icon move to top*/

    }


    .primary-nav-menu {
        width: 100vw;
        display: flex;
        z-index:1001;
        /*height 100% makes sense*/
    }



    .primary-nav-menu li{
        float: none;
        flex: 1;
        vertical-align: top;
        display: inline-block;
        text-align: center;
        z-index:1002;
    }


    .primary-nav-menu li:last-child{ /*profile element -> not used in standalone*/
        float:none;
        padding-right: 0;
        display:none;
    }
    .primary-nav-menu li:last-child a{
        float:none;
        padding: 0;
    }

    .primary-nav-icon.profile{
        display: block;
        z-index: 2000;
    }
    .primary-nav-caption.profile {
        display: none;
    }
    .primary-nav-menu a{
        padding: 1vmin 0 0 0;
        transition: color .2s ease-in-out, background-color .2s ease-in-out;
    } 
    @media (hover: hover) and (pointer:fine){
        .primary-nav-menu a:hover{
            background-color: transparent;
            color: var(--color-ui-frame-font-hover);
            
        }
    }


    .primary-nav-caption {
        display: block;
        /*what*/
        font-size: var(--standalone-bottom-caption-size);
        line-height: var(--standalone-bottom-caption-size);
    }
    .primary-nav-icon {
        display: inline-block;
        /*height: calc(var(--standalone-bottom-height)/2); */ /*1.75 looks good on iPad (need to be bigger on bigger screens..)*/
        height: var(--standalone-bottom-icon-height);
    }

    .primary-nav-icon.secondary-nav-btn{
        display:none;
    }
    li.secondary-nav-btn {
        display:none;
    }


    .primary-nav-menu li:last-child{ /*profile element link*/
        position:fixed;
        top:0px;
        left:0px;
        display:block;
        z-index: 5;
        float:none;
        padding-right: 0;
    }
    .primary-nav-menu li:last-child a{ /*profile element -> not used in standalone*/
        position:fixed;
        top:calc(var(--standalone-bottom-height) - 100vh); /*this should definitelly be dvh, but does not work in safari*/
        left:calc(100vw - var(--standard-header-height));
        display:block;
        z-index: 5;
        float:none;
        padding: 0;
        z-index:4500;
    }
    .primary-nav-menu li:last-child a svg{
        height: var(--standard-header-height);
        z-index:5000;
    }
    @media (hover: hover) and (pointer:fine){
        .primary-nav-icon.profile:hover{
            color:var(--color-ui-frame-font-hover);
            
        }
    }

    .primary-nav .primary-nav-menu .primary-nav-menu-header{
        display:none;
        visibility: hidden;
        /*okamal  seheny*/
    }

    .primary-nav .primary-nav-menu .primary-nav-menu-header .primary-nav-menu-header span {
        display:none;
        visibility: hidden;
        /*okay*/
    }

    main {
        top:0;
        margin-bottom: 0;     /*for tiny browser, recalc in big & standalone*/
        height:calc(min(var(--dynamic-viewport-height), 100vh) - var(--standalone-bottom-height));
    }

    .screen {
        height: calc(min(var(--dynamic-viewport-height), 100vh) - var(--standalone-bottom-height)); /*change in tiny browser*/
        width:100vw !important;
    }


    .screen header > div {
        background-color: var(--color-ui-frame-bg);
        color: var(--color-ui-frame-font);
        padding-right: calc(var(--standard-header-height) + 1vmin);
        /*padding-left: var(--standard-padding);*/
        padding-left: var(--standard-padding);
    }

    .back-btn {
        margin-left: 0;
    }

    .object-menu {
        color: var(--color-ui-frame-font);
    }

    .secondary-nav-btn{
        display:none;
    }
    .secondary-nav {
        display:none;
    }





}


/*SMALL STANDALONE standard header (bottom) height*/
@media (max-width: 799px) and (display-mode: standalone),
       (max-width: 799px) and (display-mode: fullscreen){
    :root {
        --standalone-bottom-height: max(10vmin, 50px);
        --standalone-bottom-caption-size: calc(var(--standalone-bottom-height)/5)
    }

    .primary-nav-menu a {
        padding-top: calc(var(--standalone-bottom-height)/10);
    }
    .primary-nav-icon {
        padding: calc(var(--standalone-bottom-height)/20);
    }
    .primary-nav-caption {
        padding-left: calc(var(--standard-padding)/3);
        padding-right: calc(var(--standard-padding)/3);
    }
    
}

@media (max-aspect-ratio: 3/5) {    /* narrow screens in portrait mode*/
    :root {
        --standalone-bottom-height: 21vmin;
        --standalone-bottom-icon-height: calc(var(--standalone-bottom-height)/2.9);
        --standalone-bottom-caption-size: 2.5vmin;
    }
    .primary-nav-icon {
        padding: calc(var(--standalone-bottom-height)/35);
    }
    .primary-nav-caption {
        padding-top: calc(var(--standard-padding)/2.5);
    }

    .primary-nav-menu a {
        padding-top: calc(var(--standalone-bottom-height)/20);
    }
}


@media (min-aspect-ratio: 8/5) {    /* narrow screens in landscape mode */
    /*
    :root {
        --standalone-bottom-height: 10vmin; zu niedrig, muss höher, ggf 15
        --standalone-bottom-icon-height: calc(var(--standalone-bottom-height)/3); 3:4 screen ratio optimized
        --standalone-bottom-caption-size: 2.5vmin;
    }
    */
    /*icons in portrait pone smaller*/

}




/*TABLET PORTRAIT? evtl max width löschen um immer mobile app in portrait mode zu zeigen*/
@media (min-width:0px) and (max-width: 799px) and (min-aspect-ratio: 3/5) and (display-mode: standalone),
(min-width:0px) and (max-width: 799px) and (min-aspect-ratio: 3/5) and (display-mode: fullscreen){
    /*1st: width, 2nd: height, 3/4 > 3/5 > 2/4*/
    /*this is some tabled based stuff where the screen is almost a square*/


    .primary-nav-menu a {
        display: flex;
        justify-content:center;
    }
    .primary-nav-caption {
        line-height: var(--standalone-bottom-icon-height);
    }
    .primary-nav-menu-li {
        display:flex;
        justify-content: center;

    }


}

/*targets PHONES in LANDSCAPE STANDALONE*/
@media (min-width:0px) and (max-width: 799px) and (min-aspect-ratio: 8/5) and (display-mode: standalone),
(min-width:0px) and (max-width: 799px) and (min-aspect-ratio: 8/5) and (display-mode: fullscreen){
    .object-menu-btn > svg {
        padding-top: calc(var(--standard-padding)*0.75 + var(--standard-header-height)*0.1) !important;
        padding-right: calc(var(--standard-padding)*0.75) !important;
        padding-bottom: calc(var(--standard-padding)*0.75 + var(--standard-header-height)*0.1) !important;
        padding-left: calc(var(--standard-padding)*0.75) !important;
    }
}

/*targets PHONES in PORTRAIT STANDALONE*/
@media (min-width:0px) and (max-width: 799px) and (max-aspect-ratio: 3/5) and (display-mode: standalone),
(min-width:0px) and (max-width: 799px) and (max-aspect-ratio: 3/5) and (display-mode: fullscreen){
    .object-menu-btn > svg {
        padding-top: calc(var(--standard-padding)*0.75 + var(--standard-header-height)*0.1) !important;
        padding-right: calc(var(--standard-padding)*0.75) !important;
        padding-bottom: calc(var(--standard-padding)*0.75 + var(--standard-header-height)*0.1) !important;
        padding-left: calc(var(--standard-padding)*0.75) !important;
    }

    .object-menu-btn:not(.prominent) {
        margin-left: calc(var(--standard-padding)*0.5);
    }
}







/*
actually, everything is awesome now. 
but i want the header to be smaller roughly in 3/4
whil remaining the current height in 8/5 and

in max 3/5 and min 8/5 !!!

order: max 3/5 - min 3/5 - min 8/5


3/4 > 3/5

-> d.h. standard höhe in standalone kleiner machen
-> während gegenwärtige höhe in max 3/5 und min 8/5 festgesetzt werden muss

SMALL STANDALONE standard header (bottom) height
@media (max-width: 799px) and (display-mode: standalone) {
.primary-nav-menu a -> padding in standalone small dependend o bottom height! (/10)
.primary-nav-icon -> padding in standalone small depending on bottom height (/20)
--standalone-bottom-height: max(10vmin, 60px)
}

bzw. in 8/5 muss ich die nur festsetzen, wenn ich keine sinnvolle angabe finde die bei beidem funktionier

funktionieren könnte etwas basieren auf vmin & vh


min(vmin/vh) in 8/5 -> vh
min(vmin/vh) in 3/4 -> vw

also versuch mit vmin der ungefähr bei 13 vmin rauskommt max(13vmin, )


.primary-nav-menu a -> padding in standalone small dependend o bottom height! (/10)
.primary-nav-icon -> padding in standalone small depending on bottom height (/20)
--standalone-bottom-height: max(10vmin, 60px)
*/



/* LARGE BROWSER */
@media  /*(min-width: 800px) and (display-mode: fullscreen),*/
        (min-width: 800px) and (display-mode: minimal-ui),
        (min-width: 800px) and (display-mode: browser),
        (min-width: 800px) and (display-mode: window-controls-overlay) {

    /*footer is visible in sidebar*/
    /*show sidebar*/



    *.browser.large {
        display: unset !important;
    }
    .primary-nav-menu {
        width: calc(100vw - var(--standard-header-height) - 0.15vmin);
    }
    main {
        top:0;
        margin-bottom: 0;     /*for tiny browser, recalc in big & standalone*/
        height:calc(min(var(--dynamic-viewport-height), 100vh) - var(--standard-header-height));
    }
    .screen {
        /*min-height: calc(min(var(--dynamic-viewport-height), 100vh) - var(--standard-header-height));*/
    }

    .screen {
        height: calc(min(var(--dynamic-viewport-height), 100vh) - var(--standard-header-height)); /*change in tiny browser*/
    }


}
/* LARGE STANDALONE */
@media (min-width: 800px) and (display-mode: standalone), (min-width: 800px) and (display-mode: fullscreen) {
    /*footer is fixed visible bottom of screen*/
    /*show sidebar changer*/
    /*header is where it belongs, no icons*/

    *.standalone.large {
        display: unset !important;
    }

    .logo {
        display:none;
    }


    main {    
        top:0;
        margin-bottom: 0;     /*for tiny browser, recalc in big & standalone*/
        height: calc(min(var(--dynamic-viewport-height), 100vh) - var(--standard-header-height) - var(--standard-footer-height));
    }

    footer.imprint {
        display:none;
    }
    footer.status-bar {
        display: block;
        display: flex;
    }

    .screen {
        height: calc(min(var(--dynamic-viewport-height), 100vh) - var(--standard-header-height) - var(--standard-footer-height)); /*change in tiny browser*/
    }



}




.hovered:not(.object-menu-btn):not(.listheader):not(.fieldset-btn):not(.expanded):not(.submenu.background li) {
    background-color: var(--color-content-expand-hover) !important;
}

.text-align-left {
    text-align: left !important;
}



/*JS classes*/

.active {
    color: var(--contrast-color-normal) !important;
}

/*
.remove:hover{
    color: var(--font-color-remove) !important;
    background-color: var(--bg-color-remove);
}
.remove:hover{
    color: var(--font-color-remove) !important;
    background-color: var(--bg-color-remove);
}
*/


.info:not(fieldset) {
    color: var(--font-color-info) !important;
    background-color: var(--bg-color-info);
}
.warn {
    color: var(--font-color-warn) !important;
    background-color: var(--bg-color-warn);
}
.error {
    color: var(--font-color-error) !important;
    background-color: var(--bg-color-error);
}




/*hide underlying screens*/
/*
div.screen:not(:last-of-type) {
    display: none;
}
*/


div.screen:nth-last-of-type(1n+3) {
    /*other screens should never ever be visible*/
    /*background: red;*/
    visibility: hidden;
}
div.screen:nth-last-of-type(2) {
    /*second screen should be visible below when top slides in / of*/
    /*background: blue;*/
    right: 30vw;
}
div.screen:nth-last-of-type(1) {
    /*first screen should be visible on top*/
    /*background: green;*/
}



.primary-nav-caption, .primary-nav-icon:not(.secondary-nav-btn) {
    pointer-events: none;
}


.screen.js-shadow {
    box-shadow: 0px 0px 100vw var(--color-content-overlay-shadow);
}

.screen.js-shadow-transition {
    transition: box-shadow 0.4s ease-in-out;
}


.screen {
    box-shadow: 0px 0px 100vw rgba(0,0,0,0);
}














/*
.object-menu-btn::after {
    content: '';
    position: absolute;
    transform: translateY(-50%);
    top:50%;
    left:0%;
    width: calc(var(--standard-header-height)*0.8);
    height: calc(var(--standard-header-height)*0.8);
    z-index:1;

    background-color: blue/*var(--color-ui-frame-bg)*//*;
    border-radius: 5px;

    transition: color .2s ease-in-out, background-color .2s ease-in-out;
}
@media (hover: hover) and (pointer:fine){
    .object-menu-btn:hover::after{
        background-color: var(--color-ui-frame-font-hover); /*exception: backround changes here on hover*//*
        
    }
}
*/


/*HERE NOW*/

.screen header {
    position:fixed;
    /*top: var(--standard-header-height);*/
}
.screen {
    width: 100vw;
    max-width: 100vw;
    min-width:100vw;

    position:fixed;
    right:0px;
    overflow:scroll;
    overflow-x:hidden;


    


}
.screen header {
    width: 100vw;
    max-width: 100vw;
    min-width:100vw;
}






.datacount {
    font: 1.5rem / 1.5 sans-serif;
    text-align: center;
    color: grey;
    padding-top: 30px;
}

























div.splash-screen {
    position:fixed;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;

    color:var(--color-ui-frame-font);
    background-color:var(--color-ui-frame-bg);

    z-index:9; 

    display:flex;
    flex-direction:column;
    height:100%;
}
div.splash-screen .title-wrapper {
    /*
    height:100%;
    max-height: calc(0px + 100% - var(--standard-header-height)/3 - min(40vmin, 300px));
    */
}
div.splash-screen .title {
    font-size: calc(var(--standard-header-height)/3);
}
div.splash-screen header {
    pointer-events: all;
}
div.splash-screen header .title {
    padding-left: var(--standard-padding);
}

div.splash-screen .btn {
    cursor:pointer;
    padding: calc(var(--standard-padding)/2 ) var(--standard-padding) calc(var(--standard-padding)/2 ) var(--standard-padding);
    border-radius: 8px;
    font: 1.5rem / 1.8 sans-serif;
    display: inline-block;
    min-width:150px;
}


div.splash-header{
 /*background-color:red;*/
 text-align:center;
 display:flex !important;
 flex-direction:column;
 padding: calc(var(--standard-padding)*2);
 gap: calc(var(--standard-padding)*2);
 height:80%;
 max-height:80%;
}



.splash-header .logo{
    float:none;
    display:inline-block;
    padding:0;
    margin:auto auto;
    /*flex:1;*/
    background-color: transparent;
    max-width: min(40vmin, 300px);
    max-height: min(40vmin, 300px);
    height:40%;
    min-height:40px;
    min-width: 40px;
    /*
    height:40%;
    width:auto;
    min-height:80px;
    min-width:80px;
    */

}


div.splash-main {
 /*background-color:blue;*/
 flex:1;
 margin-top:auto;
 overflow:hidden;
 display:flex;
 flex-direction:column;
 padding: calc(var(--standard-padding)*2) 0 calc(var(--standard-padding)*3) 0;
}


div.splash-main .result svg{
    width:50px;
    height:50px;
    display: inline-block;
    width:100%;
}
div.splash-main .result svg.success{
    color: green;
}
div.splash-main .result svg.fail{
    color: red;
}

div.splash-main .result span{
    display:inline-block;
    width:100%;
    margin-top:var(--standard-padding);
    text-align:center;
}

div.splash-main .status{
    margin: auto;
    text-align:center;
}

div.splash-footer {
    /*background-color:green;*/
    text-align:center;


    height:15%;
    min-height:10px;
    max-height:300px;
    display:flex;
    flex-direction:column;
    gap:var(--standard-padding);
}


div.splash-nav {
    display:inline-block;
    position:relative;
    margin: auto auto;
    min-width:250px;
    max-width:350px;
    width:50%;
}

div.splash-screen .header select, div.splash-screen .splash-header select{
    color: var(--color-ui-frame-font);
    position:fixed;
    top:var(--standard-padding);
    right:var(--standard-padding);
    cursor:pointer;
}




.version {
    margin-bottom: 30px;
    margin-top:auto;
    width:100%;
}




.splash-card-wrapper {
    position:absolute;
    top: 101vh;
    left:0px;
    height: 100vh;
    width: 100vw;
    /*background-color:red;*/

    z-index:1000;

    /*background-image: var(--color-ui-bg-overlay);*/

}

/*
.splash-card-wrapper .side {
    background-color:green;
}
*/
.splash-card-wrapper .wide {
    /*background-color:blue;*/
    overflow-x: hidden;
    /*needs to be darker in dark mode*/
    background-image: var(--color-ui-bg-overlay-splashcard);
}

.splash-card-wrapper .side {
    background-image: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,.65) 100%);
}





.splash-card {
    position: relative;
    top:20vh;
    height:80vh;
    width:100%;


    padding: var(--standard-padding);
    border-radius: 8px 8px 0px 0px;
    background-color: var(--color-content-bg);
    color:var(--color-content-font);


    /*box-shadow: 0px 0px 50px 50px rgba(0,0,0,.55);*/

}


.splash-card-header {
    display:flex;
}
.splash-card h1 {
    flex: 1;
}
.splash-card h1:first-letter {
    text-transform: uppercase;
}
.splash-card-close {
    flex:1;
    margin-left:auto;
}



.splash-card svg {
    max-width:1.3rem;
}
.splash-card svg.close {
    max-width:2rem;
    cursor:pointer;
}





.confirmation-btn {
    position: fixed;
    bottom:-101vh;
    height:100vh;
    width:100vw;

    /*background-color: rgba(0,0,0,0.15);*/
    background-image: var(--color-ui-bg-overlay);

    z-index: 1000;


    padding: 0;
    color:var(--color-content-font); 

    display:block;

}

.confirmation-btn .side, .splash-card-wrapper .side {
    visibility: visible;
    position:absolute;
    top:0px;
    left:0px;
    height:100%;


}






.confirmation-btn .wide {
    padding: calc(var(--standard-padding)/2);
}


.confirmation-btn .wide, .splash-card-wrapper .wide {
    position:absolute;
    top:0px;
    right:0px;
    height:100%;
    display:flex;
    flex-wrap: wrap;
    padding-bottom: calc(var(--standalone-bottom-height) + var(--standard-padding));


    /*WIDTH IS NOW INTERESTING*/
    width: 100vw;
    max-width: 100vw;
    min-width: 100vw;
}














.flex-bottom {
    align-self: flex-end;
    width:100%;
}

.confirmation-btn .set-wrap {
    /*align-self: flex-end;*/
    min-width:100%;
}

.confirmation-btn .set-wrap + .set-wrap{
    margin-top: 10px;
}

.set-wrap:not(.flex) + .list-wrap{
    margin-top: 35px;
}



.confirmation-btn fieldset {
    border-radius: 14px;
}

.confirmation-btn fieldset.full-bars, .confirmation-btn fieldset.full-bars .btn {
    background-color: var(--color-content-card-darker);
}


.btn-context {
    flex:1;
    text-align:center;
    padding: var(--standard-padding);
    font-size: var(--font-size) !important;
}
label .field-wrap .btn-context {
    padding-right:calc(2*var(--standard-padding));
    padding-left:0px;
    color: grey;
}


.cancel .label, .confirm .label {
    font: 1.6rem / 2.8 sans-serif;
}
.cancel .label {
    font-weight: bolder;
}




.grey-font {
    color:grey !important;
}


.info-box .title{
    display: inline-block;
    font: 1.3rem / 1 sans-serif;
    font-weight: bolder;
    padding: var(--standard-padding);
    padding-bottom:0px;
}



.chart-wrap {
    max-height:30vh;
    min-height:180px;
    height:40vmin;
    width:100%;
    padding: var(--standard-padding);
}
canvas {
    pointer-events: all;
}





app-loader {
    position:fixed;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;

    color:var(--color-ui-frame-font);
    background-color:var(--color-ui-frame-bg);

    z-index:9;
}




app-loader img {
    position: absolute;
    transform:translate(-50%, -50%);
    top:40%;
    left:50%;
    height:40%;
    max-height:40vmin;


    -webkit-animation: fadein 1s ease-in 1s;
       -moz-animation: fadein 1s ease-in 1s;
            animation: fadein 1s ease-in 1s;
}

app-loader .title {
    text-align:center;

    position: absolute;
    transform:translate(-50%, -50%);
    top:10%;
    left:50%;

    font: 1.3rem / 1.5 sans-serif;
}

app-loader .status {
    text-align:center;

    position: absolute;
    transform:translate(-50%, -50%);
    top:80%;
    left:50%;

    font: 1.1rem / 1.5 sans-serif;
}

app-loader .login {
    text-align:center;

    position: absolute;
    transform:translate(-50%, -50%);
    top:80%;
    left:50%;
}


app-loader .btn {
    cursor:pointer;
    padding: calc(var(--standard-padding)/2 ) var(--standard-padding) calc(var(--standard-padding)/2 ) var(--standard-padding);
    border-radius: 8px;
    font: 1.5rem / 1.8 sans-serif;
    display: inline-block;
    min-width:150px;
}
app-loader .btn:hover {
    background-color: grey;
}
















.interactions {
    display:flex;
    margin-bottom:30px;
    font: 1.5rem / 1 sans-serif;
}

.interactions div:first-child {
    margin-right:auto;
}

.interactions div {
    color: var(--color-content-font-highlight);
    cursor:pointer;
}











.install-promt {
    position:absolute;
    transform:translate(-50%, -50%);
    left:50%;
    top:50%;
    padding: var(--standard-padding);
    border-radius: 8px;
    background-color: var(--color-content-bg);
    color:var(--color-content-font);
    max-width: 80vw;
    min-width: 300px;
    z-index:1000;
}

.install-promt img {
    position:relative;
    transform:translateX(-50%);
    left:50%;
    max-width:min(80px, 15vmin);
}

figure {
    border-radius: 3px;
    background-color:var(--color-content-card);
    padding: var(--standard-padding);
}

figcaption {
    text-align:center;
}


.install-promt svg {
    max-width:1.3rem;
}
.install-promt svg.close {
    max-width:2rem;
    cursor:pointer;
}
.install-promt svg.highlight {
    color:var(--color-content-font-highlight);
}



.icon.invalid {
    color: var(--color-ui-delete);
    z-index:2;
}

.icon.invalid svg {
    height: 1.5rem;
}



.btn-subtle::first-letter {
    text-transform: uppercase;
}



.pointer {
    cursor: pointer;
}




.context-menu {
    position:fixed;
    width:50px;
    height:50px;
    background-color: red;
}



/*svg.primary-nav-icon.profile*/
/*
a[href="#account"]:after{
    content: 'BETA';
    position: relative;
    display: block;
    left:0px;
    top:0px;
    width:100px;
    height:100px;
    z-index: 1000;
    background-color: turquoise;
    color:black;
}
*/
a[href="#account"] {
    position:relative;
}
a[href="#account"]:before{
    content: 'BETA';
    position: absolute;
    display: block;

    transform:translateX(-50%);
    left:50%;

    bottom:clamp(calc(var(--standard-padding)/2), 0.75vmin, var(--standard-padding));

    z-index: 1000;

    background-color: var(--color-ui-beta);
    color:black;

    margin:0;
    padding-right:3px;
    padding-left:3px;
    border-radius:3px;

    font-weight: bolder;

    font-size: calc(var(--standard-header-height)/4);
    line-height: calc(var(--standard-header-height)/4);
}