@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Yantramanav:wght@100;300;400;500&display=swap');  /* Sans-Serif Font */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&display=swap'); /* Serif Font */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap'); /* Monospaced */ 
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200;300;400;500;600;700;800;900&display=swap'); /* Monospaced */ 


/* VERSION - NEW */ 

/* GENERAL SETTINGS */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
}

html {
    font-size: 100%; /* baseline for all 'rem' values */ 
}

body {
    min-width: 60rem;
    min-height: 100vh;
    background:rgb(0, 70, 90);
    background: linear-gradient(15deg, rgb(0, 69, 82) 0%, rgb(0, 41, 51) 100%);
    font-family: 'Inconsolata', monospace;
    font-size: 1rem; 
    font-weight: 200;
    color: white;
    text-align: center; 
}

div.dummy{
    height: 2rem; 
    padding: 0;
    opacity: 0;
}
div.separator {
    height: .0;
    padding: 0;
    opacity: 0;
}

a.action {
    display: block;
    width: 11.5rem;
    margin: .5rem auto;
    padding: .25rem .5rem;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    color: white;
    border-radius: .25rem;
    transition: .3s ease-in; 
}
a.action:hover {
    background: rgba(255,50,80,1); 
    color: white important!;
    transition: .5s ease-out; 
}

.ctxt { text-align: center !important; }
.ltxt { line-height: 1rem; font-size: 1.25rem; font-weight: 200 !important; }


.span0_1, .span0_2, .span0_3 { display: none; }
.span1, .span1_0, .span1_1, .span1_2 { grid-column-end: span 1; }
.span2, .span2_1 { grid-column-end: span 2; }
.span3, .span3_1, .span3_2 { grid-column-end: span 3; }
.span4, .span4_0, .span4_1, .span4_2 { grid-column-end: span 4; }
.span8 { grid-column-end: span 8; }
.span10 { grid-column-end: span 10; }
.span11 { grid-column-end: span 11; }
.span12 { grid-column-end: span 12; }


/* ACCOUNT ICONS */

#till { background: rgb(218, 23, 95) url('_jpg/till.jpg') center no-repeat; background-size: cover; }
#kath { background: rgb(39, 158, 28) url('_jpg/kath.jpg') center no-repeat; background-size: cover; }
#jako { background: rgb(47, 126, 199) url('_jpg/jako.jpg') center no-repeat; background-size: cover; }
#luis { background: rgb(218, 111, 23) url('_jpg/luis.jpg') center no-repeat; background-size: cover; }


/* LOGIN SECTION */

section#login div#date {
    width: 37.5rem;
    margin: 20vh auto 4rem auto; 
}
section#login h1 {
    font-size: 2rem;
    font-weight: 200;
    text-transform: uppercase;
    letter-spacing: 2px;
}
section#login form {
    display: grid;
    grid-template-columns: 12.5rem 12.5rem 12.5rem;
    margin: 2rem auto;
    width: 37.5rem;
    /* background: rgba(165, 35, 80, .4); */ 
}
section#login form > * {
    margin: .5rem;
    border: none;
    border-radius: .25rem; 
}
section#login label {
    margin: .5rem 0 .5rem .5rem;
    padding: .5rem;
    border-radius: .25rem 0 0 .25rem;
    text-align: right;
    background: rgba(200,200,200,.7); 
}
section#login input[type=password] {
    grid-column-end: span 2;
    margin: .5rem .5rem .5rem 0;
    padding: .5rem 1rem;
    font-size: 1rem;
    border-radius: 0 .25rem .25rem 0; 
}
section#login input[type=submit] {
    height: 2rem;
    width: calc(100% - 1rem);
    padding: .25rem .5rem;
    font-size: 1rem;
    text-align: center;
    color: white;
    background: rgba(200,200,200,.5);
    transition: .3s ease-in; 
}
section#login input[type=submit]:hover, section#login input[type=submit]:active {
    background:crimson;
    transition: .5s ease-out; 
}
section#login .message {
    margin: 4rem 0; 
}

#icons1 {
    display: flex;
    width: 40rem;
    height: 8rem;
    margin: 2rem auto; 
}
#icons1 > .icon {
    flex: 1;
    margin: 1rem 2rem;
    line-height: 6rem;
    border-radius: 3rem;
    border: 2px solid white;
    overflow: hidden;
    filter: grayscale(100%);
    transition: .3s ease-in; 
}   
#icons1 > .icon:hover {
    filter: grayscale(0%);
    transition: .2s ease-out;
    transform: translateY(-.5rem); 
}   
#icons2 {
    display: flex;
    width: 8rem;
    height: 8rem;
    margin: 2rem auto; 
}
#icons2 > .icon {
    flex: 1;
    margin: 0 auto;
    border-radius: 4rem;
    border: 2px solid white;
    overflow: hidden;
    transition: .3s ease-in; 
}


/* IMPRESSUM */

section#impressum {
    display: grid;
    grid-template-columns: 30rem 30rem;
    overflow: hidden;
    margin: 4rem auto;
    padding: 12rem 0 6rem 0;
    width: 60rem;
    color:white;
    font-family: 'Inconsolata', monospace;
    font-weight: 200;
    font-size: 1rem;
    text-align: left; 
}
section#impressum > div {
    padding: 1rem 2rem; 
}
section#impressum p {
    padding: .5rem 0 1rem 0; 
}
section#impressum h2 {
    font-weight: 500;
    font-size: 1rem;
    margin: .5rem 0; 
}
section#impressum a {    
    display: inline;
    line-height: 2.5rem;
    width: 14rem;
    padding: .5rem 1rem;
    text-decoration: none;
    color: rgba(255,50,80,1); 
}
section#impressum a:hover {    
    color: white; 
}


/* HAUPTMENÜ */

    /* section#header */

div#account {
    z-index: 2;
    position: absolute;
    right: 0;
    padding: 1rem;
    color: rgb(226, 149, 177);
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: right; 
}    
div#account h2 {
    display: inline-block;
    margin: 0 1rem;
    font-size: 1rem;
    text-align: center;
    text-decoration: none;
    letter-spacing: 1px;
    color:  rgba(255,50,80,1);
}
div#account a {
    display: inline-block;
    margin: 0 1rem;
    text-align: center;
    text-decoration: none;
    letter-spacing: 1px;
    color: white;
    transition: .3s ease-in; 
}
div#account a:hover {
    color:rgb(255,50,80);
    letter-spacing: 1px;
    transition: .3s ease-in; 
}

div#path {
    z-index: 2;
    position: absolute;
    padding: 1rem;
    color: rgba(255,50,80,1);
    font-family: 'Inconsolata', monospace;
    font-weight: 500;
    font-size: 1.0rem;
    text-transform: uppercase;
    letter-spacing: 1px; 
    text-align: left; 
}
div#path a {
    display: relative;
    margin: 0 .75rem;
    padding: 0 .25rem;
    text-decoration: none;
    text-align: center;
    color: white;
    transition: .3s ease-in; 
}
div#path a:hover {
    background: rgba(255,50,80,1);
    transition: .5s ease-out;
    border-radius: .25rem;
}

    /* section#menu */

section#menu {
    position: relative;
    display: flex; 
    flex-direction: row;    /* alt: row-reverse, column, column-reverse */
    flex-wrap: wrap;    /* alt: nowrap, wrap, wrap-reverse */
    justify-content: flex-start;  /* horizontal alignment */
    align-items: flex-start;   /* vertical alignment */
    align-content: flex-start; /* box container alignment */ 
    margin: 6rem 2rem;
    padding: 20vh 0;
    text-align: center;
    min-height: 60vh;
}
section#menu a.action {
    position: absolute;
    top: 20rem;
    right: calc(50vw - 7.5rem);
    width: 15rem;
}
section#menu > h1 {
    z-index:-1;
    display: block;
    position: fixed;
    top: 20vh;
    left: 4vw;
    width: 100%;
    margin: 0;
    font-family: 'Yantramanav', sans-serif;
    font-size: 18vw;
    font-weight: 100;
    letter-spacing: -0.75vw;
    text-transform: lowercase;
    text-align: left;
    color: black;
    opacity: .05;
}
section#menu > div.optn {
    flex: 1 1 20rem;
    margin: 0 .5rem .5rem 0;
    font-family: 'Inconsolata', monospace;
    font-size: 2rem;
    text-transform: uppercase;
    line-height: 8rem;
}
section#menu > div.back {
    flex: 0 1 12rem;
    margin: 0 .5rem .5rem 0;
    font-family: 'Inconsolata', monospace;
    font-size: 2rem;
    text-transform: uppercase;
    line-height: 8rem;
}
section#menu > div.optn a, section#menu > div.back a {
    display: block;
    background: rgba(0,20,30,.3);
    color: white;
    font-weight: 200;
    text-decoration: none;
    border-radius: .5rem;
    opacity: .7;
    transition: .3s ease-in;
}
section#menu > div.optn a:active, section#menu > div.optn a:hover {
    opacity: 1;
    background:rgba(200,20,60,.4);
    letter-spacing: .25rem;
    transition: .5s ease-out;
}
section#menu > div.back a:active, section#menu > div.back a:hover {
    opacity: 1;
    background:rgba(40, 170, 150, 0.4);
    letter-spacing: .25rem;
    transition: .5s ease-out;
}


/* FOOTER */

div#footer {
    z-index: 2;
    display: block;
    padding: 2rem 0 4rem 0;
    height: auto;
    width: 100%;
    font-size: .875rem;
    letter-spacing: 2px;
    line-height: 1.5rem;
    text-align: center;
    text-transform: uppercase; 
}


/* +++ DEFAULT CONTENT +++ */

.content {
    padding: 5rem 1rem;
}

/* TITLE */
.content h1 {
    margin: 0 auto;
    padding: 1rem 0;
    text-align: center;
    font-size: 2.25rem;
    font-weight: 200;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: white;
} 
.content h2 {
    text-align: center;
    font-size: 1rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: .5rem 0;
    margin-top: 1.5rem;
}

/* FORM */

.content > form {
    padding: .25rem;
    font-weight: 300;
    font-size: .875rem;
    text-align: right;
    background: rgba(0,0,0,.2);
    border: 1px solid white;
}
.content > form > * {
    position: relative;
    margin: 0 1px 1px 0;
    padding: .25rem;
    background: rgba(255,255,255,.25);
}
.content > form > div {
    padding: .5rem .25rem;
    font-weight: 400;
    text-align: right;
    color: white;
}
.content > form a {
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    padding: .5rem 0;
    text-align: center;
    text-decoration: none;
    color: white;

}
.content > form a:active, .content form a:hover {
    background: rgba(255,50,80,1);
}
.content > form label {
    display: inline;
    background: rgba(255,255,255,.5);
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.6rem;
}
.content > form input[type=text] {
    font-family: 'Inconsolata', monospace;
    width: auto;
    padding: 0 .75rem;
    margin: 0 1px 1px 0;
    border: none;
    border-radius: 0;
    letter-spacing: 1px;
    font-size: 1em;
    font-weight: 400;
    text-align: right;
    color: rgb(200, 50, 80);
    background: rgba(255,255,255,.7);
    opacity: .6;
}
.content > form input[type=text]:hover, .content form input[type=text]:focus {
    outline: none !important;
    opacity: 1;
}
.content > form input[type=range] {
    -webkit-appearance: none;
    height: 2px;
    padding: .25rem 0;
    width: 100%;
    background: rgba(255,255,255,.6);
    border-radius: .125rem;
    opacity: .6;
    overflow: visible !important;
}
.content > form input[type=range]:hover, .content form input[type=range]:active {
    opacity: 1;
}
.content > form input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    padding: 0;
    width: 3.5rem;
    height: 1rem;
    border-radius: .25rem;
    border: 1px solid white;
    background: rgba(255,50,80,1);
}
.content > form input[type=range]::-moz-range-thumb {
    margin: 0;
    padding: 0;
    width: 3.5rem;
    height: 1rem;
    border-radius: .25rem;
    border: 1px solid white;
    background: rgba(255,50,80,1);
}
.content > form input[type=submit] {
    margin: 0 .25rem 0 0rem;
    height: 2.4rem;
    width: calc(100% - 2px);
    font-family: 'Inconsolata', monospace;
    font-size: 1rem;
    color:white;
    border: none;
    border-radius: .25rem;
}
.content > form input[type=submit] + input[type=submit] {
    margin-left: 2px;
}
.content > form input[type=submit]:hover {
    background: rgba(255,50,80,1);
}
.content > form textarea {
    min-height: 6rem;
    margin: 1px;
    padding: .25rem .75rem;
    font-family: 'Inconsolata', monospace;
    font-size: 1rem; 
    font-weight: 200;
    text-align: left;
    line-height: 1.5rem;
    color: white;
    background: rgba(255,255,255,.1);
    border: none;
    resize: none;
}
.content > form textarea:active {
    border: none;
} 
.content > form select {
    width: 100%;
}
.content > form input.dlist {
    padding: 0;
}



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


/* +++ SPECIAL CONTENT +++ */

/* DASHBOARD */

div.dashboard {
    display: grid;
    grid-template-columns: auto auto auto auto;
    max-width: 90rem;
    margin: 2rem auto;
    padding: 1rem 0;
    border: 1px solid white;
}
div.dashboard > div:nth-of-type(odd) {
    max-width: 22.5rem;
    padding: .5rem 2rem;
    font-weight: 200;
    text-align: left;
    font-size: 1rem;
}
div.dashboard > div:nth-of-type(even) {
    max-width: 22.5rem;
    padding: .5rem 2rem;
    font-weight: 400;
    text-align: right;
    font-size: 1.25rem;
}


/* SELECTION BOX (sbox) */

div.sbox {
    max-width: 90rem;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: space-between;
    justify-content: center;
}
div.sbox > * {
    /*border: 1px solid white;*/
    flex: 1 0 20rem;
}
div.sbox form {
    padding: 0 2rem;
    text-align: center;
}
div.sbox label {
    display: block;
    margin: 1rem;
}
div.sbox select {
    display: block;
    height: 2.25rem;
    width: 100%;
    font-family: 'Inconsolata', monospace;
    font-size: 1rem;
    color: white;
    background: crimson;
}


/* MENU */

.content > div.menu {
    text-align: center;
    margin: 0 auto;
    padding: 1rem 0 !important;
    max-width: 90rem;
    color: rgb(225, 150, 175);
    font-weight: 500;
}
.content > div.menu > * {
    margin: 0 1rem;
    padding: .25rem 1rem;
    text-align: center;
    display: inline;
}



/* ID Objects */

form#dataRechnung {
    display: grid;
    /*                     ID------ VP------ KRED---- REF---- RDATUM-- FÄLLIG-- BETRAG-- STATUS-- OFFEN------------ ERSTATT---------- AKTIONEN---------- */
    grid-template-columns: 2.800rem 3.200rem auto     auto    6.000rem 6.000rem 6.000rem 4.500rem 6.000rem 6.000rem 6.000rem 4.000rem 3.000rem 3.000rem;
    margin: 1rem auto 2rem auto;
    max-width: 90rem;
    
}
form#neuerDatensatz, form#editRechnung {
    display: grid;
    /*                     01  02  03  04   05  06   */
    grid-template-columns: auto 10rem 10rem 10rem;
    margin: 1rem auto 2rem auto;
    width: 42rem;
}

form#showEigentum {
    display: grid;
    /*                     ID---- BEZ--- GRS--- ZST---- PNI--- MTLK-- RBW--- ------ AKTIONEN---------- */
    grid-template-columns: 3.5rem auto   auto   6.50rem 4.5rem 6.5rem 6.5rem 6.5rem 6.5rem 3.000rem 3.000rem;
    margin: 1rem auto 2rem auto;
    max-width: 90rem;
    
}
form#editEigentum {
    display: grid;
    grid-template-columns: 12rem 12rem 12rem 12rem;
    margin: 1rem auto 2rem auto;
    width: 48.5rem;
}
form#showKonto {
    display: grid;
    /*                     DATE-- TYP--- VOL--- BEZ--- STAND- AKTIONEN---------- */
    grid-template-columns: 6.0rem 6.0rem 7.5rem auto   7.5rem 3.000rem 3.000rem;
    margin: 1rem auto 2rem auto;
    max-width: 90rem;
    
}





div.bbar {
    display: flex;  /* Flexbox */
    flex-direction: row;    /* alt: row, row-reverse, column, column-reverse */
    flex-wrap: nowrap;    /* alt: nowrap, wrap, wrap-reverse */
    justify-content: space-around;  /* horizontal alignment */
    align-items: center;   /* vertical alignment */
    align-content: flex-start; /* box container alignment */ 
    margin: 1.5rem 0 .5rem 0;
    background: rgba(0,0,0,0);
}

div.bbar > * {
    flex: 0.2 1 9rem; /* flex-grow [0], flex-shrink [1], flex-basis [-] */
    background: rgba(255,50,80,1);
    opacity: .7;    
}

div.bbar > *:hover, div.bbar > *:active {
    opacity: 1;
}

/* B: 160x75rem */
@media (max-width: 60rem) { 

    body {
        /* background: rgb(160, 130, 40);*/
        min-width: 20rem;
    }

    section#impressum {
        grid-template-columns: 100%;
        margin: 0;
        padding: 2rem 0;
        width: 20rem;
        font-size: 1rem;
        text-align: left; 
    }
   
    div#account {
        position: relative;
        display: flex;
        flex-direction: column-reverse;
    }
    div#account > * {
        flex: 1 1 4rem;
    }
    div#path {
        display: none;
    }
    section#menu {
        padding: 0;
    } 
    section#menu > h1 {
        font-size: 8rem;
        top: 12rem;
    }
    section#menu > div.optn, section#menu > div.back {
        flex: 1 1 100%;
    }
    
    
    form#neuerDatensatz, form#editRechnung {
        display: grid;
        grid-template-columns: 30vw 66vw;
        width: 96vw;
    }

}