/* === Fonts === */

@font-face {
    font-family: "Amatic SC";
    font-style: normal;
    font-weight: 400;
    src: local("Amatic SC Regular"), local("AmaticSC-Regular"),
        url("./../fonts/amatic-sc/amatic-sc-v13-latin-regular.woff2") format("woff2"),
        url("./../fonts/amatic-sc/amatic-sc-v13-latin-regular.woff") format("woff");
}

@font-face {
    font-family: "Oswald";
    font-style: normal;
    font-weight: 300;
    src: local(""),
        url("./../fonts/oswald/oswald-v31-latin-300.woff2") format("woff2"),
        url("./../fonts/oswald/oswald-v31-latin-300.woff") format("woff");
}

@font-face {
    font-family: "Oswald";
    font-style: normal;
    font-weight: 400;
    src: local(""),
        url("./../fonts/oswald/oswald-v31-latin-regular.woff2") format("woff2"),
        url("./../fonts/oswald/oswald-v31-latin-regular.woff") format("woff");
}

@font-face {
    font-family: "Oswald";
    font-style: normal;
    font-weight: 700;
    src: local(""),
        url("./../fonts/oswald/oswald-v31-latin-700.woff2") format("woff2"),
        url("./../fonts/oswald/oswald-v31-latin-700.woff") format("woff");
}

/* === Allgemeines CSS === */

html {
    font-size: 62.5%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

*,
*:before,
*:after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}

body,
input,
textarea,
button,
select,
option {
    font-family: "Oswald", Helvetica, sans-serif;
    font-weight: 300;
    font-size: 1.5rem;
    line-height: 1.5rem;
    letter-spacing: .2rem;
}

body {
    margin: 0;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: [col-1-start] 2rem 1fr 2rem [col-1-end 2rem col-2-start] 2rem 2fr 2rem [col-2-end 2rem col-3-start] 2rem 1fr 2rem [col-3-end];
    grid-template-columns: [col-1-start] 1fr [col-1-end col-2-start] 2fr [col-2-end col-3-start] 1fr [col-3-end];
    -ms-grid-rows: [row-1-start] 2rem auto 2rem [row-1-end 2rem row-2-start] 2rem auto 2rem [row-2-end 2rem row-3-start] 2rem auto 2rem [row-3-end];
    grid-template-rows: [row-1-start] auto [row-1-end row-2-start] auto [row-2-end row-3-start] auto [row-3-end];
    grid-template-areas: "navigationsleisten-bereich navigationsleisten-bereich navigationsleisten-bereich"
        ". eingabeformular-bereich gesamtbilanz-bereich"
        ". monatslisten-bereich gesamtbilanz-bereich";
    gap: 2rem 2rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 400;
}

:focus {
    border-color: #80bdff;
    outline: 0;
    -webkit-box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
    box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
    z-index: 1;
}

::placeholder,
::-webkit-input-placeholder,
::-moz-placeholder,
:-ms-input-placeholder,
::-ms-input-placeholder {
    color: #495057;
}

/* === Navigationsleiste === */

#navigationsleiste {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 5;
    grid-area: navigationsleisten-bereich;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: #343a40;
    line-height: 8rem;
}

#navigationsleiste>a {
    text-decoration: none;
}

#markenname {
    font-size: 5rem;
    text-transform: uppercase;
    color: #fff;
    font-family: "Amatic SC", cursive;
    line-height: inherit;
    vertical-align: bottom;
}

#markenname>[class*="fa-"] {
    font-size: 4rem;
    vertical-align: baseline;
    margin-right: 1rem;
}

/* === Eingabeformular === */

#eingabeformular-container {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
    grid-area: eingabeformular-bereich;
    padding: 3rem 3rem;
    background-color: #e9ecef;
    border-radius: 1.5rem;
}

#eingabeformular-container>.eingabeformular-zeile {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}

#eingabeformular-container>.eingabeformular-zeile>* {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

#eingabeformular-container>.eingabeformular-zeile:last-of-type {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

[class$="-eingabe-gruppe"] {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 1rem 0;
}

[class$="-eingabe-gruppe"]>label,
[class$="-eingabe-gruppe"]>input {
    line-height: 2.5rem;
    border: .1rem solid #ced4da;
}

[class$="-eingabe-gruppe"]>label {
    width: 8.2rem;
    padding: .5rem 1.8rem .5rem 2rem;
    background-color: #e9ecef;
    color: #495057;
    text-align: center;
    cursor: text;
}

[class$="-eingabe-gruppe"]>:first-child {
    border-right: none;
    border-top-left-radius: 1.5rem;
    border-bottom-left-radius: 1.5rem;
}

[class$="-eingabe-gruppe"]>:last-child {
    border-left: none;
    border-top-right-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;
}

[class$="-eingabe-gruppe"]>input {
    padding: .375rem .75rem;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    color: #495057;
    -webkit-transition: color .15s ease-in-out, background-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
    -o-transition: color .15s ease-in-out, background-color .15s ease-in-out, box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
}

.titel-typ-eingabe-gruppe>input {
    border-right: none;
    border-left: none;
}

.titel-typ-eingabe-gruppe>label:nth-of-type(2) {
    width: 12rem;
    background-color: #d4edda;
    color: #28a745;
    border-color: #c3e6cb;
    border-right: none;
    border-left: none;
}

.titel-typ-eingabe-gruppe>label:nth-of-type(3) {
    width: 12rem;
    background-color: #f8d7da;
    color: #dc3545;
    border-color: #f5c6cb;
    border-left: none;
}

.titel-typ-eingabe-gruppe>input[type=radio] {
    display: none;
}

.titel-typ-eingabe-gruppe>input[type=radio]:checked+label {
    color: #fff;
    z-index: 1;
}

.titel-typ-eingabe-gruppe>input[type=radio]:nth-of-type(2):checked+label {
    background-color: #28a745;
    -webkit-box-shadow: 0 0 0 .2rem rgba(72, 180, 97, .5);
    box-shadow: 0 0 0 .2rem rgba(72, 180, 97, .5);
}

.titel-typ-eingabe-gruppe>input[type=radio]:nth-of-type(3):checked+label {
    background-color: #dc3545;
    -webkit-box-shadow: 0 0 0 .2rem rgba(225, 83, 97, .5);
    box-shadow: 0 0 0 .2rem rgba(225, 83, 97, .5);
}

.betrag-datum-eingabe-gruppe>input:nth-of-type(1) {
    border-right: none;
    border-left: none;
}

.betrag-datum-eingabe-gruppe>label:nth-of-type(2) {
    border-right: none;
    border-left: none;
}

.kategorie-eingabe-gruppe>select {
    padding: .375rem .75rem;
    border: .1rem solid #ced4da;
    color: #495057;
    border-top-right-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

.kategorie-eingabe-gruppe>label {
    width: 12rem;
    min-width: 12rem;
}

#eingabeformular-container>.kategorie-verwaltung-zeile,
#eingabeformular-container>.kategorie-filter-zeile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 1rem;
    margin-top: .4rem;
}

#eingabeformular-container>.kategorie-verwaltung-zeile>* ,
#eingabeformular-container>.kategorie-filter-zeile>* {
    width: 100%;
}

#eingabeformular-container>.kategorie-verwaltung-zeile>input {
    border: .1rem solid #ced4da;
    border-radius: 1.5rem;
    line-height: 2.5rem;
    padding: .375rem .75rem;
    color: #495057;
}

#eingabeformular-container>.kategorie-verwaltung-zeile>button {
    margin: 0;
    max-width: none;
}

#eingabeformular-container>.kategorie-filter-zeile>label {
    min-width: 0;
    padding: .5rem 0;
    font-size: 1.8rem;
    background-color: transparent;
    color: #495057;
    border: none;
    border-radius: 0;
    text-align: right;
}

#eingabeformular-container>.kategorie-filter-zeile>select {
    border: .1rem solid #ced4da;
    border-radius: 1.5rem;
    padding: .375rem .75rem;
    line-height: 2.5rem;
    color: #495057;
    background-color: #fff;
}

#eingabeformular-container>.kategorie-sortierung-zeile {
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

#eingabeformular-container>.kategorie-sortierung-zeile>* {
    flex-grow: 0;
}

#sortierung-datum-button,
#sortierung-kategorie-button {
    margin: 0;
    max-width: none;
    white-space: nowrap;
}

button.standard {
    max-width: 24rem;
    line-height: 2.5rem;
    font-size: 1.4rem;
    background-color: #007bff;
    border: .1rem solid #007bff;
    padding: .5rem 2rem;
    color: #fff;
    border-radius: 1.5rem;
    margin: 1rem 0;
    cursor: pointer;
    -webkit-transition: color .15s ease-in-out, background-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
    -o-transition: color .15s ease-in-out, background-color .15s ease-in-out, box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
}

button.standard:focus {
    border-color: #0062cc;
    outline: 0;
    -webkit-box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, .5);
    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, .5);
    z-index: 1;
}

.fehlerbox {
    background-color: #f8d7da;
    color: #dc3545;
    border: .1rem solid #f5c6cb;
    border-radius: 1.5rem;
    padding: 1.5rem 2rem;
    margin-bottom: 1rem;
}

.fehlerbox>ul {
    margin: .75rem 0 0;
}

/* === MONATSLISTEN === */

#monatslisten {
    -ms-grid-row: 5;
    -ms-grid-column: 3;
    grid-area: monatslisten-bereich;
}

.monatsliste {
    margin: 1rem 3rem 0;
    border-bottom: .1rem solid #ced4da;
}

.monatsliste>h2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.monatsliste>h2>.monat-jahr {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

.monatsliste>h2>.monatsbilanz {
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    font-size: 1.8rem;
    padding: .5rem 1rem;
    color: #fff;
    border-radius: 1.2rem;
}

.monatsliste>h2>.monatsbilanz.positiv {
    background-color: #28a745;
}

.monatsliste>h2>.monatsbilanz.negativ {
    background-color: #dc3545;
}

.monatsliste>ul {
    list-style: none;
    padding: 0;
    margin-bottom: 4rem;
}

.monatsliste>ul>li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    line-height: 2.5rem;
    margin: 2rem 0;
}

.monatsliste>ul>li.kategorie-trenner {
    margin-top: 4rem;
}

.monatsliste>ul>li.kategorie-summe {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.monatsliste>ul>li.kategorie-summe>.titel {
    font-style: italic;
}

.monatsliste>ul>li.kategorie-summe>.betrag {
    font-weight: 400;
}

.monatsliste>ul>li>.entfernen-platzhalter {
    width: 4.5rem;
    border-top: .1rem solid #ced4da;
    border-right: .1rem solid #ced4da;
    border-bottom: .1rem solid #ced4da;
    border-left: none;
    border-bottom-right-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
    background-color: #e9ecef;
}

.monatsliste>ul>li>.datum {
    padding: .5rem 1.8rem .5rem 2rem;
    border-top: .1rem solid #ced4da;
    border-right: none;
    border-bottom: .1rem solid #ced4da;
    border-left: .1rem solid #ced4da;
    border-bottom-left-radius: 1.5rem;
    border-top-left-radius: 1.5rem;
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    background-color: #e9ecef;
    color: #495057;
    width: 12rem;
}

.monatsliste>ul>li>.titel {
    padding: .5rem 2rem;
    border-top: .1rem solid #ced4da;
    border-right: none;
    border-bottom: .1rem solid #ced4da;
    border-left: none;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    min-width: 0;
}

.monatsliste>ul>li>.kategorie {
    padding: .5rem 2rem;
    border-top: .1rem solid #ced4da;
    border-right: none;
    border-bottom: .1rem solid #ced4da;
    border-left: none;
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-preferred-size: 18rem;
    flex-basis: 18rem;
    background-color: #e9ecef;
    color: #495057;
    min-width: 18rem;
    width: 18rem;
    text-align: right;
    padding-right: 1rem;
}

.monatsliste>ul>li>.betrag {
    padding: .5rem 2rem;
    border-top: .1rem solid #ced4da;
    border-right: none;
    border-bottom: .1rem solid #ced4da;
    border-left: none;
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
}

.monatsliste>ul>li>.entfernen-button {
    color: #495057;
    width: 4.5rem;
    background-color: #e9ecef;
    padding: .5rem 1rem;
    border-top: .1rem solid #ced4da;
    border-right: .1rem solid #ced4da;
    border-bottom: .1rem solid #ced4da;
    border-left: none;
    border-bottom-right-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
}

.monatsliste>ul>li>.entfernen-button>* {
    pointer-events: none;
}

.monatsliste>ul>li>.entfernen-button:focus {
    border-color: #80bdff;
    outline: 0;
    -webkit-box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
    box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
    z-index: 1;
}

/* edit button styling (pencil) */
.monatsliste>ul>li>.bearbeiten-button {
    color: #495057;
    width: 4.5rem;
    background-color: #e9ecef;
    padding: .5rem 1rem;
    border-top: .1rem solid #ced4da;
    border-right: .1rem solid #ced4da;
    border-bottom: .1rem solid #ced4da;
    border-left: none;
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
}
.monatsliste>ul>li>.bearbeiten-button>* {
    pointer-events: none;
}
.monatsliste>ul>li>.bearbeiten-button:focus {
    border-color: #80bdff;
    outline: 0;
    -webkit-box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
    box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
    z-index: 1;
}

.monatsliste>ul>li.editing {
    outline: 2px dashed #007bff;
}

.monatsliste>ul>li.ausgabe>.titel,
.monatsliste>ul>li.ausgabe>.kategorie,
.monatsliste>ul>li.ausgabe>.betrag {
    background-color: #f8d7da;
    color: #dc3545;
    border-color: #f5c6cb;
}

.monatsliste>ul>li.einnahme>.titel,
.monatsliste>ul>li.einnahme>.kategorie,
.monatsliste>ul>li.einnahme>.betrag {
    background-color: #d4edda;
    color: #28a745;
    border-color: #c3e6cb;
}

.monatsliste.ausgeblendet-durch-filter,
.monatsliste>ul>li.ausgeblendet-durch-filter {
    display: none;
}

/* === Gesamtbilanz === */

#gesamtbilanz {
    -ms-grid-row: 3;
    -ms-grid-row-span: 3;
    -ms-grid-column: 5;
    grid-area: gesamtbilanz-bereich;
    padding: 3rem 3rem;
    background-color: #e9ecef;
    border-top-left-radius: 1.5rem;
    border-bottom-left-radius: 1.5rem;
    -ms-grid-row-align: start;
    align-self: start;
}

#gesamtbilanz>.gesamtbilanz-zeile {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    line-height: 2.5rem;
}

#gesamtbilanz>.gesamtbilanz-zeile>span:nth-of-type(1) {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

#gesamtbilanz>.gesamtbilanz-zeile>span:nth-of-type(2) {
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    padding: .2rem .75rem;
}

#gesamtbilanz>.bilanz {
    margin-top: 1rem;
}

#gesamtbilanz>.ausgaben>span:nth-of-type(2) {
    border-bottom: .1rem solid #ced4da;
}

#gesamtbilanz>.bilanz>span:nth-of-type(1) {
    font-weight: 400;
}

#gesamtbilanz>.bilanz>span:nth-of-type(2) {
    color: #fff;
    border-radius: 1.2rem;
}

#gesamtbilanz>.bilanz>span:nth-of-type(2).positiv {
    background-color: #28a745;
}

#gesamtbilanz>.bilanz>span:nth-of-type(2).negativ {
    background-color: #dc3545;
}

/* === Seitenanpassungen === */

#navigationsleiste-inhalt {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

#hilfe-button {
    max-width: none;
    margin: 0;
    line-height: 2rem;
    padding: .4rem 1.6rem;
}

#markenname {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    line-height: 1;
}

#markenname .markenname-sub {
    font-size: 2.2rem;
    margin-top: .2rem;
}

#hilfe-popup-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(52, 58, 64, .65);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999;
    padding: 2rem;
}

#hilfe-popup-overlay.ist-offen {
    display: flex;
}

#hilfe-popup {
    width: 100%;
    max-width: 64rem;
    background-color: #e9ecef;
    border-radius: 1.5rem;
    padding: 2.4rem;
    box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .2);
}

#hilfe-popup h2 {
    margin-top: 0;
    margin-bottom: 1.5rem;
}

#hilfe-popup .hilfe-wichtig {
    line-height: 3rem;
    margin-top: 0;
    margin-bottom: 1.5rem;
}

#hilfe-popup ul {
    margin-top: 0;
    margin-bottom: 2rem;
    padding-left: 2rem;
    line-height: 2.2rem;
}

#hilfe-popup .hilfe-aktion {
    display: flex;
    justify-content: flex-end;
}

#eingabeformular-container>.formular-aktion {
    justify-content: center;
}

#eingabeformular-container>.formular-aktion>* {
    flex-grow: 0;
}

#eingabeformular-container>.eingabeformular-zeile.formular-tools,
#eingabeformular-container>.eingabeformular-zeile.formular-tools:last-of-type {
    justify-content: center !important;
    gap: 1rem;
    margin-top: 1.5rem;
}

#eingabeformular-container>.formular-tools>* {
    flex-grow: 0 !important;
}