/* === 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;

    @media (max-width: 767px) and (orientation: portrait) {
        font-size: 1.4rem;
    }
}

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 row-4-start] auto [row-4-end];
    grid-template-areas: "navigationsleisten-bereich navigationsleisten-bereich navigationsleisten-bereich"
        "optionen-dropdown-container fahrzeugauswahl-container gesamtbilanz-button-container"
        "fahrzeugdaten-bereich eingabeformular-bereich gesamtbilanz-bereich"
        ". monatslisten-bereich gesamtbilanz-bereich"
        ". material-listen-bereich ."
        ". arbeitleistung-listen-bereich ."
        ". dienstleistung-ausgabe-liste-bereich ."
    ;
    gap: 2rem 2rem;
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    transition: background-color 0.3s ease-in-out;

    @media (max-width: 767px) and (orientation: portrait) {
        -ms-grid-columns: [col-1-start] 2rem 1fr 2rem [col-1-end];
        grid-template-columns: [col-1-start] 1fr [col-1-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 row-4-start] auto [row-4-end];
        background-size: auto;
        background-position: top;
        background-repeat: no-repeat;
    }
}

body.login {
    background-image: url("../img/login.png");
    background-size: 110%;
    transition: background-image 0.3s ease-in-out;

    @media (max-width: 767px) and (orientation: portrait) {
        grid-template-areas:
            "eingabeformular-bereich";
        background-attachment: fixed;
        background-image: url('../img/login_smartphone.png');
        background-size: 100%;
        padding: 20px;
    }
}

body.logged-in {
    /* background-image: url('../img/logged_in.jpg'); */
    transition: background-image 0.3s ease-in-out;

    @media (max-width: 767px) and (orientation: portrait) {
        background-attachment: fixed;
        grid-template-areas:
            "navigationsleisten-bereich"
            "optionen-dropdown-container"
            "gesamtbilanz-button-container"
            "gesamtbilanz-bereich"
            "fahrzeugauswahl-container"
            "fahrzeugdaten-bereich"
            "fehlerbox"
            "eingabeformular-bereich"
            "monatslisten-bereich";
    }
}

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;
}

/* === Suchleiste === */
#dienstleistungen-suche-input,
#fahrzeug-suche-input,
#verkaufte-fahrzeuge-suche-input,
#kunden-suche-input{
    width: 100%;
    border: .1rem solid #ced4da;
    border-radius: 1.5rem;
    height: 4rem;
    padding: 1rem;
}

/* === Login Formular === */

#formular-container.login-formular-container {
    padding: 3rem 3rem;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 1.5rem;
    backdrop-filter: blur(2px);
    transition: background-color 0.3s ease-in-out;
}

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

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

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

.login-formular-zeile>.login-ueberschrift {
    @media (max-width: 767px) and (orientation: portrait) {
        text-align: center;
        padding-bottom: 1rem;
    }
}

.benutzername-eingabe-gruppe>input,
.passwort-eingabe-gruppe>input {
    border-right: none;
    border-left: none;
}

button.login-submit {
    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;

    @media (max-width: 767px) and (orientation: portrait) {
        width: 100%;
        display: flex;
        justify-content: center;
    }
}

button.login-submit: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;
}

button.login-submit:hover {
    background-color: #0056b3;
    border-color: #004085;
}

/* === Navigationsleiste === */

#navigationsleiste {
    grid-area: navigationsleisten-bereich;
    display: -webkit-box;
    display: -ms-flexbox;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: ". logo profildaten";
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    background-color: #e9ecef;
    line-height: 3rem;
    transition: background-color 0.3s ease-in-out;

    @media (max-width: 767px) and (orientation: portrait) {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "logo profildaten";
    }
}

.link-mit-logo {
    grid-area: logo;
    display: flex;
    align-items: center;
    padding: 15px 10px;
}

.link-mit-logo img {
    height: 50px;
    width: auto;
    transition: transform 0.3s ease-in-out;

    @media (max-width: 767px) and (orientation: portrait) {
        height: 30px;
    }
}

.link-mit-logo img:hover {
    transform: scale(1.1);
}

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

#profil-container {
    grid-area: profildaten;
    display: flex;
    justify-self: end;
    margin-right: 20px;
}

#profil-benutzername {
    padding: 15px;
}

button.logout-button {
    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;

    @media (max-width: 767px) and (orientation: portrait) {
        max-width: 15rem;
        font-size: 1.4rem;
    }
}

button.logout-button: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;
}

button.logout-button:hover {
    background-color: #0056b3;
    border-color: #004085;
}

/* === Anwendungs Optionen Dropdown === */

#optionen-dropdown-container {
    grid-area: optionen-dropdown-container;
    margin-left: 3rem;

    @media (max-width: 767px) and (orientation: portrait) {
        margin: 1rem;
    }
}

#optionen-dropdown {
    width: 100%;
    height: 3.7rem;
    text-align: center;
    font-size: 1.4rem;
    background-color: #007bff;
    border: .1rem solid #007bff;
    padding: .5rem 0;
    color: #fff;
    border-radius: 1.5rem;
    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;

    @media (max-width: 767px) and (orientation: portrait) {
        font-size: 1.3rem;
        display: flex;
        justify-content: center;
        text-align: center;
        appearance: none;
    }
}

#optionen-dropdown:hover {
    background-color: #0056b3;
    border-color: #004085;
}

/* === Alle Eingabeformulare === */

#formular-container {
    grid-area: eingabeformular-bereich;
    padding: 3rem 3rem;
    background-color: #e9ecef;
    border-radius: 1.5rem;
    transition: background-color 0.3s ease-in-out;

    @media (max-width: 767px) and (orientation: portrait) {
        display: grid;
        grid-template-areas:
            "fehlerbox";
        margin: 1rem;
    }
}

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

    @media (max-width: 767px) and (orientation: portrait) {
        display: grid;
        grid-template-columns: 1fr 2fr;
        row-gap: 10px;
    }
}

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

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

    @media (max-width: 767px) and (orientation: portrait) {
        width: 14rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

[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,
[class$="-eingabe-gruppe"]>select {
    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;

    @media (max-width: 767px) and (orientation: portrait) {
        border-top-right-radius: 1.5rem;
        border-bottom-right-radius: 1.5rem;
    }
}

/* === Fahrzeug Hinzufügen formular === */

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

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

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

.marke-eingabe-gruppe>input,
.modell-eingabe-gruppe>input,
.fahrgestellnummer-eingabe-gruppe>input,
.baujahr-eingabe-gruppe>input,
.motorisierung-eingabe-gruppe>input,
.kaufpreis-eingabe-gruppe>input,
.kaufdatum-eingabe-gruppe>input {
    border-right: none;
    border-left: none;
}

button.fahrzeug-hinzufuegen-submit {
    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;

    @media (max-width: 767px) and (orientation: portrait) {
        width: 100%;
    }
}

button.fahrzeug-hinzufuegen-submit: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;
}

/* === Einkauf Leasing Checkbox im Fahrzeug Hinzufügen Formular === */

.einkaufleasing-eingabe-gruppe {
    display: flex;
    flex-direction: column;
    border: .1rem solid #ced4da;
    border-radius: 1.5rem;
    overflow: hidden;
}

.einkaufleasing-eingabe-gruppe > label {
    width: 100%;
    padding: .5rem 1.8rem;
    background-color: #e9ecef;
    color: #495057;
    text-align: center;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    line-height: 2.5rem;
    border: none;
}

.einkaufleasing-eingabe-gruppe > label > input[type="checkbox"] {
    width: 2rem;
    height: 2rem;
    cursor: pointer;
    margin: 0;
}

.leasing-zusatz-eingabe-gruppe {
    display: flex;
    margin: 0;
}

.leasing-zusatz-eingabe-gruppe > label,
.leasing-zusatz-eingabe-gruppe > input {
    line-height: 2.5rem;
    border: .1rem solid #ced4da;
}

.leasing-zusatz-eingabe-gruppe > label {
    width: 16rem;
    padding: .5rem 1.8rem .5rem 2rem;
    background-color: #e9ecef;
    color: #495057;
    text-align: center;
    border-right: none;
    border-top-left-radius: 1.5rem;
    border-bottom-left-radius: 1.5rem;

    @media (max-width: 767px) and (orientation: portrait) {
        width: 14rem;
    }
}

.leasing-zusatz-eingabe-gruppe > input {
    padding: .375rem .75rem;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    color: #495057;
    border-left: none;
    border-top-right-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;
    -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;
}

/* === Kunden Hinzufügen formular === */

button.kunden-hinzufuegen-submit {
    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;

    @media (max-width: 767px) and (orientation: portrait) {
        width: 100%;
    }
}

button.kunden-hinzufuegen-submit: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;
}

/* === Kunden Bearbeiten formular === */

button.kunden-bearbeiten-submit {
    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;

    @media (max-width: 767px) and (orientation: portrait) {
        width: 100%;
    }
}

button.kunden-bearbeiten-submit: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;
}

/* === Fahrzeug verkaufen / Vertrag bearbeiten Formular === */

#fahrzeug-verkaufen-formular,
#vertrag-bearbeiten-formular {
    @media (max-width: 767px) and (orientation: portrait) {
        display: grid;
        grid-template-columns: 1fr;
        grid-row: repeat(auto);
    }
}

#formular-container>#fahrzeug-verkaufen-formular>.fahrzeug-verkaufen-formular-zeile>.ueberschrift,
#formular-container>#vertrag-bearbeiten-formular>.vertrag-bearbeiten-formular-zeile>.ueberschrift {
    @media (max-width: 767px) and (orientation: portrait) {
        text-align: center;
        padding-bottom: 2rem;
    }
}

#formular-container>#fahrzeug-verkaufen-formular>.fahrzeug-verkaufen-formular-zeile>[class$="eingabe-gruppe"],
#formular-container>#vertrag-bearbeiten-formular>.vertrag-bearbeiten-formular-zeile>[class$="eingabe-gruppe"] {
    display: flex;
    flex-direction: column;
    border: .1rem solid #ced4da;
    border-radius: 1.5rem;
    gap: 0;
}

#formular-container>#fahrzeug-verkaufen-formular>.fahrzeug-verkaufen-formular-zeile label,
#formular-container>#fahrzeug-verkaufen-formular>.fahrzeug-verkaufen-formular-zeile input,
#formular-container>#fahrzeug-verkaufen-formular>.fahrzeug-verkaufen-formular-zeile select,
#formular-container>#vertrag-bearbeiten-formular>.vertrag-bearbeiten-formular-zeile label,
#formular-container>#vertrag-bearbeiten-formular>.vertrag-bearbeiten-formular-zeile input,
#formular-container>#vertrag-bearbeiten-formular>.vertrag-bearbeiten-formular-zeile select {
    width: 100%;
}

#formular-container>#fahrzeug-verkaufen-formular>.fahrzeug-verkaufen-formular-zeile label,
#formular-container>#vertrag-bearbeiten-formular>.vertrag-bearbeiten-formular-zeile label {
    border-top: none;
    border-left: none;
    border-bottom-left-radius: 0;
    border-top-right-radius: 1.5rem;
    text-overflow: unset;
}

#formular-container>#fahrzeug-verkaufen-formular>.fahrzeug-verkaufen-formular-zeile input,
#formular-container>#vertrag-bearbeiten-formular>.vertrag-bearbeiten-formular-zeile input {
    text-align: center;
    font-size: smaller;
    border-bottom-left-radius: 1.5rem;
    border-top-right-radius: 0;
    border: none;
}

#formular-container>#fahrzeug-verkaufen-formular>.fahrzeug-verkaufen-formular-zeile select,
#formular-container>#vertrag-bearbeiten-formular>.vertrag-bearbeiten-formular-zeile select {
    height: 3.25rem;
    padding: 0.375rem 3rem;
    text-align: center;
    font-size: smaller;
    text-overflow: ellipsis;
    border: none;
    border-bottom-left-radius: 1.5rem;
    border-top-right-radius: 0;
    appearance: none;
}

#formular-container>#fahrzeug-verkaufen-formular>.fahrzeug-verkaufen-formular-zeile>.finanzierung-leasing-eingabe-gruppe,
#formular-container>#vertrag-bearbeiten-formular>.vertrag-bearbeiten-formular-zeile>.finanzierung-leasing-eingabe-gruppe {
    border-bottom: unset;
}

#formular-container>#fahrzeug-verkaufen-formular>.fahrzeug-verkaufen-formular-zeile>.finanzierung-leasing-eingabe-gruppe>select,
#formular-container>#vertrag-bearbeiten-formular>.vertrag-bearbeiten-formular-zeile>.finanzierung-leasing-eingabe-gruppe>select {
    border-bottom: .1rem solid #ced4da;
    border-bottom-left-radius: unset;
}

#formular-container>#fahrzeug-verkaufen-formular>.fahrzeug-verkaufen-formular-zeile>.finanzierung-leasing-eingabe-gruppe>input,
#formular-container>#vertrag-bearbeiten-formular>.vertrag-bearbeiten-formular-zeile>.finanzierung-leasing-eingabe-gruppe>input {
    border-bottom: .1rem solid #ced4da;
}

#formular-container>#fahrzeug-verkaufen-formular>.fahrzeug-verkaufen-formular-zeile>.finanzierung-leasing-eingabe-gruppe>label,
#formular-container>#vertrag-bearbeiten-formular>.vertrag-bearbeiten-formular-zeile>.finanzierung-leasing-eingabe-gruppe>label {
    border-bottom-left-radius: 1.5rem;
    border-right: unset;
}

#formular-container>#fahrzeug-verkaufen-formular>.fahrzeug-verkaufen-formular-zeile>.finanzierung-leasing-eingabe-gruppe:has(input[type="checkbox"]:checked) label,
#formular-container>#vertrag-bearbeiten-formular>.vertrag-bearbeiten-formular-zeile>.finanzierung-leasing-eingabe-gruppe:has(input[type="checkbox"]:checked) label {
    border-bottom-left-radius: unset;
}

#formular-container>#fahrzeug-verkaufen-formular>.fahrzeug-verkaufen-formular-zeile>.anzahlung-eingabe-gruppe,
#formular-container>#fahrzeug-verkaufen-formular>.fahrzeug-verkaufen-formular-zeile>.sonstiges-eingabe-gruppe,
#formular-container>#vertrag-bearbeiten-formular>.vertrag-bearbeiten-formular-zeile>.anzahlung-eingabe-gruppe,
#formular-container>#vertrag-bearbeiten-formular>.vertrag-bearbeiten-formular-zeile>.sonstiges-eingabe-gruppe {
    border-bottom: unset;
    border-bottom-left-radius: 1.5rem;
}

#formular-container>#fahrzeug-verkaufen-formular>.fahrzeug-verkaufen-formular-zeile>.anzahlung-eingabe-gruppe>label,
#formular-container>#fahrzeug-verkaufen-formular>.fahrzeug-verkaufen-formular-zeile>.sonstiges-eingabe-gruppe>label,
#formular-container>#vertrag-bearbeiten-formular>.vertrag-bearbeiten-formular-zeile>.anzahlung-eingabe-gruppe>label,
#formular-container>#vertrag-bearbeiten-formular>.vertrag-bearbeiten-formular-zeile>.sonstiges-eingabe-gruppe>label {
    border-bottom-left-radius: 1.5rem;
}

#formular-container>#fahrzeug-verkaufen-formular>.fahrzeug-verkaufen-formular-zeile>.anzahlung-eingabe-gruppe>input,
#formular-container>#fahrzeug-verkaufen-formular>.fahrzeug-verkaufen-formular-zeile>.sonstiges-eingabe-gruppe>input,
#formular-container>#vertrag-bearbeiten-formular>.vertrag-bearbeiten-formular-zeile>.anzahlung-eingabe-gruppe>input,
#formular-container>#vertrag-bearbeiten-formular>.vertrag-bearbeiten-formular-zeile>.sonstiges-eingabe-gruppe>input {
    border-bottom: .1rem solid #ced4da;
}

#formular-container>#fahrzeug-verkaufen-formular>.fahrzeug-verkaufen-formular-zeile>.anzahlung-eingabe-gruppe:has(input[type="checkbox"]:checked) label,
#formular-container>#fahrzeug-verkaufen-formular>.fahrzeug-verkaufen-formular-zeile>.sonstiges-eingabe-gruppe:has(input[type="checkbox"]:checked) label,
#formular-container>#vertrag-bearbeiten-formular>.vertrag-bearbeiten-formular-zeile>.anzahlung-eingabe-gruppe:has(input[type="checkbox"]:checked) label,
#formular-container>#vertrag-bearbeiten-formular>.vertrag-bearbeiten-formular-zeile>.sonstiges-eingabe-gruppe:has(input[type="checkbox"]:checked) label {
    border-bottom-left-radius: unset;
}

#formular-container>#fahrzeug-verkaufen-formular>.fahrzeug-verkaufen-formular-zeile>.fahrzeug-ankauf-eingabe-gruppe,
#formular-container>#vertrag-bearbeiten-formular>.vertrag-bearbeiten-formular-zeile>.fahrzeug-ankauf-eingabe-gruppe {
    border: .1rem solid #ced4da;
}

#formular-container>#fahrzeug-verkaufen-formular>.fahrzeug-verkaufen-formular-zeile>.fahrzeug-ankauf-eingabe-gruppe>label,
#formular-container>#vertrag-bearbeiten-formular>.vertrag-bearbeiten-formular-zeile>.fahrzeug-ankauf-eingabe-gruppe>label {
    border-radius: 1.5rem;
    border-bottom: unset;
}

#formular-container>#fahrzeug-verkaufen-formular>.fahrzeug-verkaufen-formular-zeile>.fahrzeug-ankauf-eingabe-gruppe:has(input[type="checkbox"]:checked) label,
#formular-container>#vertrag-bearbeiten-formular>.vertrag-bearbeiten-formular-zeile>.fahrzeug-ankauf-eingabe-gruppe:has(input[type="checkbox"]:checked) label {
    border-bottom: .1rem solid #ced4da;
    border-bottom-left-radius: unset;
    border-bottom-right-radius: unset;
}

#formular-container>#fahrzeug-verkaufen-formular>.fahrzeug-verkaufen-formular-zeile>.fahrzeug-ankauf-eingabe-gruppe>[class$="eingabe-gruppe"],
#formular-container>#vertrag-bearbeiten-formular>.vertrag-bearbeiten-formular-zeile>.fahrzeug-ankauf-eingabe-gruppe>[class$="eingabe-gruppe"] {
    margin: 0;
}

#formular-container>#fahrzeug-verkaufen-formular>.fahrzeug-verkaufen-formular-zeile>.fahrzeug-ankauf-eingabe-gruppe>[class$="eingabe-gruppe"] input,
#formular-container>#vertrag-bearbeiten-formular>.vertrag-bearbeiten-formular-zeile>.fahrzeug-ankauf-eingabe-gruppe>[class$="eingabe-gruppe"] input {
    padding: .375rem .75rem;
    border-radius: unset;
    border-bottom: .1rem solid #ced4da;
}

#formular-container>#fahrzeug-verkaufen-formular>.fahrzeug-verkaufen-formular-zeile>.fahrzeug-ankauf-eingabe-gruppe:has(input[type="checkbox"]:checked)>:last-child label,
#formular-container>#fahrzeug-ankauf-eingabe-gruppe:has(input[type="checkbox"]:checked)>:last-child input,
#formular-container>#vertrag-bearbeiten-formular>.vertrag-bearbeiten-formular-zeile>.fahrzeug-ankauf-eingabe-gruppe:has(input[type="checkbox"]:checked)>:last-child label,
#formular-container>#vertrag-bearbeiten-formular>.fahrzeug-bearbeiten-formular-zeile>.fahrzeug-ankauf-eingabe-gruppe:has(input[type="checkbox"]:checked)>:last-child input {
    border-bottom: unset;
}

#formular-container>#vertrag-bearbeiten-formular>.vertrag-bearbeiten-formular-zeile>.verkauft-eingabe-gruppe label {
    border-bottom: unset;
}

button.fahrzeug-verkaufen-submit,
button.vertrag-bearbeiten-submit {
    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;

    @media (max-width: 767px) and (orientation: portrait) {
        width: 100%;
    }
}

button.fahrzeug-verkaufen-submit: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;
}

/* === Fahrzeug bearbeiten Formular === */

button.fahrzeug-bearbeiten-submit {
    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;

    @media (max-width: 767px) and (orientation: portrait) {
        width: 100%;
    }
}

button.fahrzeug-verkaufen-bearbeiten: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;
}

/* === Fahrzeug Auswahl === */

#fahrzeugauswahl-container {
    grid-area: fahrzeugauswahl-container;
    display: flex;

    @media (max-width: 767px) and (orientation: portrait) {
        margin: 1rem;
        overflow: hidden;
    }
}

#fahrzeug-formular {
    width: 100%;
}

#fahrzeug-auswahl {
    width: 100%;
    height: 3.7rem;
    text-align: center;
    font-size: 1.4rem;
    background-color: #007bff;
    border: .1rem solid #007bff;
    padding: .5rem 0;
    color: #fff;
    border-radius: 1.5rem;
    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;

    @media (max-width: 767px) and (orientation: portrait) {
        font-size: 1.3rem;
    }
}

/* === Eingabeformular === */

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

#formular-container>#eingabeformular>.eingabeformular-zeile>.ueberschrift {
    @media (max-width: 767px) and (orientation: portrait) {
        text-align: center;
        padding-bottom: 2rem;
    }
}

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

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

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

    @media (max-width: 767px) and (orientation: portrait) {
        border-right: .1rem solid #ced4da;
    }
}

.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;

    @media (max-width: 767px) and (orientation: portrait) {
        width: 100%;
        border-top-left-radius: 1.5rem;
        border-bottom-left-radius: 1.5rem;
        border-left: .1rem solid #c3e6cb;
    }
}

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

    @media (max-width: 767px) and (orientation: portrait) {
        width: 100%;
    }
}

.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;

    @media (max-width: 767px) and (orientation: portrait) {
        border-right: .1rem solid #ced4da;
    }
}

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

    @media (max-width: 767px) and (orientation: portrait) {
        border-left: .1rem solid #ced4da;
        border-top-left-radius: 1.5rem;
        border-bottom-left-radius: 1.5rem;
    }
}

button.standard {
    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;

    @media (max-width: 767px) and (orientation: portrait) {
        width: 100%;
    }
}

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;
}

button.standard:hover {
    background-color: #0056b3;
    border-color: #004085;
}

/* === Fehlerbox === */

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

    @media (max-width: 767px) and (orientation: portrait) {
        grid-area: fehlerbox;
    }
}

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

/* === Monatslisten === */

#monatslisten {
    grid-area: monatslisten-bereich;
}

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

    @media (max-width: 767px) and (orientation: portrait) {
        margin: 0 2rem;
    }
}

.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;

    @media (max-width: 767px) and (orientation: portrait) {
        color: white;
        padding: 10px 0;
        text-overflow: ellipsis;
        overflow: hidden;
    }
}

.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;

    @media (max-width: 767px) and (orientation: portrait) {
        display: grid;
        grid-template-columns: 0.8fr 2fr 0.2fr;
        grid-template-rows: auto auto;
        grid-template-areas: "datum betrag button"
            "titel titel button";
    }
}

.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;

    @media (max-width: 767px) and (orientation: portrait) {
        grid-area: datum;
        border-bottom-left-radius: 0;
        border-bottom: 0;
    }
}

.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;

    @media (max-width: 767px) and (orientation: portrait) {
        grid-area: titel;
        border-bottom-left-radius: 1.5rem;
        background-color: white;
        color: #495057;
        border-right: .1rem solid #ced4da;
        border-top: 0;
    }
}

.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;

    @media (max-width: 767px) and (orientation: portrait) {
        grid-area: betrag;
    }
}

.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;

    @media (max-width: 767px) and (orientation: portrait) {
        grid-area: button;
    }
}

.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;
}

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

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

.monatsliste>ul>li.einnahme>.titel,
.monatsliste>ul>li.ausgabe>.titel {
    @media (max-width: 767px) and (orientation: portrait) {
        background-color: white;
        color: #495057;
        border: .1rem solid #ced4da;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.monatsliste>ul>li.einnahme>.betrag,
.monatsliste>ul>li.ausgabe>.betrag {
    @media (max-width: 767px) and (orientation: portrait) {
        background-color: #e9ecef;
        border-bottom: 0;
        border-top: .1rem solid #ced4da;
        border-right: .1rem solid #ced4da;
        text-align: right;
    }
}

/* === Fahrzeugliste === */

#formular-container>.fahrzeugliste-ueberschrift-container>.ueberschrift {
    @media (max-width: 767px) and (orientation: portrait) {
        text-align: center;
        padding-bottom: 1rem 0;
    }
}

.fahrzeugliste {
    padding: 0;
    margin-bottom: 4rem;
}

.fahrzeugliste>li {
    background-color: white;
    border: .1rem solid #ced4da;
    border-radius: 1.5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-template-areas: "marke-modell-motor marke-modell-motor"
        "erstzulassung-fahrgestellnummer buttons";
    line-height: 2.5rem;
    margin: 2rem 0;

    @media (max-width: 767px) and (orientation: portrait) {

        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        grid-template-areas:
            "marke-modell-motor"
            "erstzulassung-fahrgestellnummer"
            "buttons";
        gap: 10px;
        width: 100%;

    }
}

.fahrzeugliste>li>div {
    padding: .5rem 1rem;
}

.fahrzeugliste>li>.marke-modell-motor-container {
    font-weight: 500;
    display: flex;
    grid-area: marke-modell-motor;
    border-bottom: .1rem solid #ced4da;
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
    background-color: #e9ecef;


    align-items: baseline;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: nowrap;
    flex-direction: row;
}

.fahrzeugliste>li>.marke-modell-motor-container>.marke,
.fahrzeugliste>li>.marke-modell-motor-container>.modell,
.fahrzeugliste>li>.marke-modell-motor-container>.motorisierung {
    padding-right: .5rem;
}

.fahrzeugliste>li>.erstzulassung-container,
.fahrzeugliste>li>.fahrgestellnummer-container {
    display: flex;
    flex-direction: column;
    grid-area: erstzulassung-fahrgestellnummer;
}

.fahrzeugliste>li>.fahrzeugliste-buttons-container {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: stretch;
}

/* Markierung fuer verkaufte Autos mit unvollstaendigem (Platzhalter-)Kaufvertrag */
.fahrzeugliste>li.daten-fehlen {
    border: .2rem solid #dc3545;
}

.marke-modell-motor-container>.daten-fehlen-hinweis {
    color: #dc3545;
    font-weight: 700;
    font-size: 1.4rem;
    margin-top: .5rem;
}

.fahrzeugliste>li>.fahrzeugliste-buttons-container>.verkaufen-button,
.fahrzeugliste>li>.fahrzeugliste-buttons-container>.bearbeiten-button,
.fahrzeugliste>li>.fahrzeugliste-buttons-container>.loeschen-button,
.fahrzeugliste>li>.fahrzeugliste-buttons-container>.vertrag-button,
.fahrzeugliste>li>.fahrzeugliste-buttons-container>.kaufvertrag-button,
.fahrzeugliste>li>.fahrzeugliste-buttons-container>.ankaufvertrag-button,
.fahrzeugliste>li>.fahrzeugliste-buttons-container>.lieferschein-button,
.fahrzeugliste>li>.fahrzeugliste-buttons-container>.eintraege-button {
    line-height: 2.5rem;
    font-size: 1.4rem;
    background-color: #007bff;
    border: .1rem solid #007bff;
    padding: .5rem 2rem;
    color: #e9ecef;
    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;

    @media (max-width: 767px) and (orientation: portrait) {
        line-height: 1.5rem;
        font-size: 1rem;
        padding: .5rem 0;
        display: flex;
        justify-content: center;
        align-items: center;
        justify-items: center;
        flex-direction: column;
        flex-wrap: nowrap;
    }
}

.fahrzeugliste>li>.verkaufen-button:focus,
.fahrzeugliste>li>.bearbeiten-button:focus,
.fahrzeugliste>li>.loeschen-button:focus,
.fahrzeugliste>li>.fahrzeugliste-buttons-container>.kaufvertrag-button:focus,
.fahrzeugliste>li>.fahrzeugliste-buttons-container>.ankaufvertrag-button:focus,
.fahrzeugliste>li>.fahrzeugliste-buttons-container>.lieferschein-button:focus,
.fahrzeugliste>li>.fahrzeugliste-buttons-container>.eintraege-button: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;
}

#verkaufte-fahrzeuge-kalender-input {
    border: .1rem solid #ced4da;
    border-radius: 1.5rem;
    height: 4rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

/* === Kundenliste === */

#formular-container>.kundenliste-ueberschrift-container>.ueberschrift {
    @media (max-width: 767px) and (orientation: portrait) {
        text-align: center;
        padding-bottom: 1rem 0;
    }
}

#formular-container>.kundenliste {
    padding: 0;
}

#formular-container>.kundenliste>li {
    width: 100%;
    height: 210px;
    border: .1rem solid #ced4da;
    border-radius: 1.5rem;
    background-color: white;
    line-height: 2.5rem;
    margin: 2rem 0;
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
        "firma buttons"
        "vorname-nachname buttons"
        "strasse-nr buttons"
        "plz-ort buttons"
        "telefon buttons"
        "email buttons";

    @media (max-width: 767px) and (orientation: portrait) {
        height: auto;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto auto;
        grid-template-areas:
            "firma"
            "vorname-nachname"
            "strasse-nr"
            "plz-ort"
            "telefon"
            "email"
            "buttons";
    }
}

#formular-container>.kundenliste>li>div {
    height: 35px;
    padding: .5rem 1rem;
    display: flex;
}

#formular-container>.kundenliste>li>.kundenliste-firma-container>.firma {
    grid-area: firma;
}

#formular-container>.kundenliste>li>.kundenliste-vorname-nachname-container>.vorname,
#formular-container>.kundenliste>li>.kundenliste-vorname-nachname-container>.nachname {
    padding-right: .5rem;
    grid-area: vorname-nachname;
}

#formular-container>.kundenliste>li>.kundenliste-strasse-hausnummer-container>.strasse,
#formular-container>.kundenliste>li>.kundenliste-strasse-hausnummer-container>.hausnummer {
    padding-right: .5rem;
    grid-area: strasse-nr;
}

#formular-container>.kundenliste>li>.kundenliste-postleitzahl-ort-container>.postleitzahl,
#formular-container>.kundenliste>li>.kundenliste-postleitzahl-ort-container>.ort {
    padding-right: .5rem;
    grid-area: plz-ort;
}

#formular-container>.kundenliste>li>.kundenliste-telefon-container>.telefon {
    grid-area: telefon;
}

#formular-container>.kundenliste>li>.kundenliste-email-container>.email {
    grid-area: email;
}

#formular-container>.kundenliste>li>.kundenliste-buttons-container {
    height: auto;
    grid-area: buttons;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "bearbeiten"
        "loeschen";
    gap: 10px;

    @media (max-width: 767px) and (orientation: portrait) {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "bearbeiten loeschen";
    }
}

#formular-container>.kundenliste>li>.kundenliste-buttons-container>.bearbeiten-button {
    grid-area: bearbeiten;
}

#formular-container>.kundenliste>li>.kundenliste-buttons-container>.loeschen-button {
    grid-area: loeschen;
}

#formular-container>.kundenliste>li>.kundenliste-buttons-container>button>svg {
    margin-right: 10px;

    @media (max-width: 767px) and (orientation: portrait) {
        margin-right: 0;
    }
}

#formular-container>.kundenliste>li>.kundenliste-buttons-container>.bearbeiten-button,
#formular-container>.kundenliste>li>.kundenliste-buttons-container>.loeschen-button {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;

    line-height: 2.5rem;
    font-size: 1.4rem;
    background-color: #007bff;
    border: .1rem solid #007bff;
    padding: .5rem 2rem;
    color: #e9ecef;
    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;

    @media (max-width: 767px) and (orientation: portrait) {
        line-height: 1.5rem;
        font-size: 1rem;
        padding: .5rem 0;
        display: flex;
        justify-content: center;
        align-items: center;
        justify-items: center;
        flex-direction: column;
        flex-wrap: nowrap;
    }
}

#formular-container>.kundenliste>li>.kundenliste-buttons-container>.bearbeiten-button:focus,
#formular-container>.kundenliste>li>.kundenliste-buttons-container>.loeschen-button: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;
}

/* === Monatsabrechnung */

#formular-container>#monatsabrechnung-formular>.monatsabrechnung-formular-zeile>button {
    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;

    @media (max-width: 767px) and (orientation: portrait) {
        width: 100%;
    }
}

#formular-container>#monatsabrechnung-formular>.monatsabrechnung-formular-zeile>button: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;
}


/* === Gesamtbilanz === */

#gesamtbilanz-button-container {
    grid-area: gesamtbilanz-button-container;
    display: flex;
    align-items: center;
}

#gesamtbilanz-button {
    width: 100%;
    margin-right: 3rem;
    line-height: 2.5rem;
    font-size: 1.4rem;
    background-color: #007bff;
    border: .1rem solid #007bff;
    padding: .5rem 0;
    color: #fff;
    border-radius: 1.5rem;
    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;

    @media (max-width: 767px) and (orientation: portrait) {
        margin: 1rem;
        font-size: 1.3rem;
    }
}

#gesamtbilanz-button:hover {
    background-color: #0056b3;
    border-color: #004085;
}

#gesamtbilanz {
    grid-area: gesamtbilanz-bereich;
    padding: 3rem 3rem;
    margin-right: 3rem;

    background-color: #e9ecef;
    border-top-left-radius: 1.5rem;
    border-bottom-left-radius: 1.5rem;
    -ms-grid-row-align: start;
    align-self: start;

    @media (max-width: 767px) and (orientation: portrait) {
        margin: 1rem;
        border-radius: 1.5rem;
    }
}

#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;
}

/* === Fahrzeugdaten === */

#fahrzeugdaten-container {
    grid-area: fahrzeugdaten-bereich;
    padding: 3rem 3rem;
    margin-left: 3rem;

    background-color: #e9ecef;
    border-top-right-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;
    -ms-grid-row-align: start;
    align-self: start;

    @media (max-width: 767px) and (orientation: portrait) {
        margin: 1rem;
        border-radius: 1.5rem;
    }
}

#fahrzeugdaten-container-ueberschrift {
    padding-bottom: 2rem;
}

#fahrzeugdaten-liste {
    list-style-type: none;
    padding-left: 0;
}

#fahrzeugdaten-liste>li {
    padding-bottom: 1rem;
}

#fahrzeugdaten-liste>li>span {
    font-weight: 400;
}

/* === Fahrzeugbilanz === */

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

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

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

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

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

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

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

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

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

/* === Modalfenster === */

#modal-container {
    padding: 1rem 3rem;
    background-color: #f8d7da;
    border: .1rem solid #f5c6cb;
    border-radius: 1.5rem;

    @media (max-width: 767px) and (orientation: portrait) {
        margin: 0 1rem;
    }
}

#modal-container>.modal-inhalt>p {
    text-align: center;
    color: #dc3545;
}

#modal-buttons-div {
    display: flex;
    justify-content: space-evenly;
}

#modal-buttons-div>button {
    max-width: 24rem;
    line-height: 2.5rem;
    font-size: 1.4rem;
    padding: .5rem 2rem;
    border-radius: 1.5rem;
    border: none;
    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;
}

#bestaetigungs-button {
    background-color: #28a745;
    color: #fff;
}

#abbruch-button {
    background-color: #dc3545;
    color: #fff;
}

/* === Feedback === */

.feedback-container {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    position: fixed;
    padding: 10px;
    border-radius: 5px;
    display: none;
}

.feedback-container.show {
    display: block;
    opacity: 1;
}

/* === Dienstleistungen === */

/* === Dienstleistungenliste === */
#formular-container>.dienstleistungenliste-ueberschrift-container>.ueberschrift {
    @media (max-width: 767px) and (orientation: portrait) {
        text-align: center;
        padding-bottom: 1rem 0;
    }
}

#formular-container>.dienstleistungenliste {
    padding: 0;
}

#formular-container>.dienstleistungenliste>li {
    width: 100%;
    height: auto;
    border: .1rem solid #ced4da;
    border-radius: 1.5rem;
    background-color: white;
    line-height: 2.5rem;
    margin: 2rem 0;
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "dienstleistungnummer-datum buttons"
        "kundendaten buttons"
        "fahrzeugdaten buttons";

    @media (max-width: 767px) and (orientation: portrait) {
        height: auto;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto auto;
        grid-template-areas:
            "firma"
            "vorname-nachname"
            "strasse-nr"
            "plz-ort"
            "telefon"
            "email"
            "buttons";
    }
}

#formular-container>.dienstleistungenliste>li>div {
    padding: .5rem 1rem;
}

#formular-container>.dienstleistungenliste>li>.dienstleistungenliste-daten-container>.dienstleistungsnummer-datum-container {
    margin: 1rem 0;
    display: flex;
    flex-direction: column;
    grid-area: dienstleistungnummer-datum;
}

#formular-container>.dienstleistungenliste>li>.dienstleistungenliste-daten-container>.kundendaten-container {
    margin: 1rem 0;
    display: flex;
    flex-direction: column;
    grid-area: kundendaten;
}

#formular-container>.dienstleistungenliste>li>.dienstleistungenliste-daten-container>.fahrzeugdaten-container {
    margin: 1rem 0;
    display: flex;
    flex-direction: column;
    grid-area: fahrzeugdaten;
}

#formular-container>.dienstleistungenliste>li>.dienstleistungenliste-buttons-container {
    height: auto;
    grid-area: buttons;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "bearbeiten"
        "ausgaben"
        "anzeigen"
        "loeschen";
    gap: 10px;

    @media (max-width: 767px) and (orientation: portrait) {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "bearbeiten loeschen";
    }
}

#formular-container>.dienstleistungenliste>li>.dienstleistungenliste-buttons-container>.bearbeiten-button {
    grid-area: bearbeiten;
}

#formular-container>.dienstleistungenliste>li>.dienstleistungenliste-buttons-container>.ausgaben-button {
    grid-area: ausgaben;
}

#formular-container>.dienstleistungenliste>li>.dienstleistungenliste-buttons-container>.anzeigen-button {
    grid-area: anzeigen;
}

#formular-container>.dienstleistungenliste>li>.dienstleistungenliste-buttons-container>.loeschen-button {
    grid-area: loeschen;
}

#formular-container>.dienstleistungenliste>li>.dienstleistungenliste-buttons-container>button>svg {
    margin-right: 10px;

    @media (max-width: 767px) and (orientation: portrait) {
        margin-right: 0;
    }
}

#formular-container>.dienstleistungenliste>li>.dienstleistungenliste-buttons-container>.bearbeiten-button,
#formular-container>.dienstleistungenliste>li>.dienstleistungenliste-buttons-container>.ausgaben-button,
#formular-container>.dienstleistungenliste>li>.dienstleistungenliste-buttons-container>.anzeigen-button,
#formular-container>.dienstleistungenliste>li>.dienstleistungenliste-buttons-container>.loeschen-button,
#formular-container>.dienstleistung-hinzufuegen-button-container>.dienstleistung-hinzufuegen-button {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;

    line-height: 2.5rem;
    font-size: 1.4rem;
    background-color: #007bff;
    border: .1rem solid #007bff;
    padding: .5rem 2rem;
    color: #e9ecef;
    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;

    @media (max-width: 767px) and (orientation: portrait) {
        line-height: 1.5rem;
        font-size: 1rem;
        padding: .5rem 0;
        display: flex;
        justify-content: center;
        align-items: center;
        justify-items: center;
        flex-direction: column;
        flex-wrap: nowrap;
    }
}

#formular-container>.dienstleistungenliste>li>.dienstleistungenliste-buttons-container>.bearbeiten-button:focus,
#formular-container>.dienstleistungenliste>li>.dienstleistungenliste-buttons-container>.ausgaben-button:focus,
#formular-container>.dienstleistungenliste>li>.dienstleistungenliste-buttons-container>.anzeigen-button:focus,
#formular-container>.dienstleistungenliste>li>.dienstleistungenliste-buttons-container>.loeschen-button:focus,
#formular-container>.dienstleistung-hinzufuegen-button-container>.dienstleistung-hinzufuegen-button: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;
}

#formular-container>.dienstleistung-hinzufuegen-button-container>.dienstleistung-hinzufuegen-button {
    width: 100%;
    text-align: center;
}

/* === Dienstleistung Formular === */
#formular-container>#dienstleistungen-formular>.dienstleistungen-formular-zeile>#kunde-hinzufuegen-button {
    width: 4rem;
    border: .1rem #ced4da solid;
    border-left: unset;
    color: #dc3545;
}

#formular-container>#dienstleistungen-formular>.dienstleistungen-formular-zeile>.erstellen-button-total-eingabe-gruppe {
    margin-top: 3rem;
    display: flex;
    justify-content: space-between;
}

#formular-container>#dienstleistungen-formular>.dienstleistungen-formular-zeile>.erstellen-button-total-eingabe-gruppe>.dienstleistungen-berechnung-div {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .5rem;
}

#formular-container>#dienstleistungen-formular>.dienstleistungen-formular-zeile>.erstellen-button-total-eingabe-gruppe>#dienstleistung-submit-button {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;

    line-height: 2.5rem;
    font-size: 1.4rem;
    background-color: #007bff;
    border: .1rem solid #007bff;
    padding: .5rem 2rem;
    color: #e9ecef;
    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;
}

#formular-container>#dienstleistungen-formular>.dienstleistungen-formular-zeile>.erstellen-button-total-eingabe-gruppe>#dienstleistung-submit-button:disabled {
    cursor: unset;
    background-color: #79828b;
    border: .1rem solid #79828b;
}

#material-liste-container {
    grid-area: material-listen-bereich;
    padding: 3rem 3rem;
    background-color: #e9ecef;
    border: .1rem solid #e9ecef;
    border-radius: 1.5rem;
}

#arbeitsleistung-liste-container {
    grid-area: arbeitleistung-listen-bereich;
    padding: 3rem 3rem;
    background-color: #e9ecef;
    border: .1rem solid #e9ecef;
    border-radius: 1.5rem;
}

#material-formular>.dienstleistungen-formular-zeile>.material-preis-eingabe-gruppe>#neues-material-hinzufuegen-button,
#arbeitsleistung-formular>.dienstleistungen-formular-zeile>.arbeitsleistung-preis-eingabe-gruppe>#neue-arbeitsleistung-hinzufuegen-button {
    width: 4rem;
    border-left: unset;
    border-right: unset;
    border-top: .1rem solid #ced4da;
    border-bottom: .1rem solid #ced4da;
    cursor: pointer;
    color: #dc3545;
}

#material-formular>.dienstleistungen-formular-zeile>.rabatt-material-hinzufuegen-eingabe-gruppe>label:nth-of-type(2),
#arbeitsleistung-formular>.dienstleistungen-formular-zeile>.rabatt-arbeitsleistung-hinzufuegen-eingabe-gruppe>label:nth-of-type(2) {
    border-left: unset;
    border-right: unset;
}

#material-formular>.dienstleistungen-formular-zeile>.rabatt-material-hinzufuegen-eingabe-gruppe>#material-hinzufuegen-button,
#arbeitsleistung-formular>.dienstleistungen-formular-zeile>.rabatt-arbeitsleistung-hinzufuegen-eingabe-gruppe>#arbeitsleistung-hinzufuegen-button {
    border: .1rem solid #ced4da;
    border-left: unset;
    cursor: pointer;
}

#material-liste,
#arbeitsleistung-liste {
    list-style-type: none;
    padding-left: 0;
    border: .1rem solid #ced4da;
    border-radius: 1.5rem;
}

#material-liste>.material-liste-kopfzeile,
#arbeitsleistung-liste>.arbeitsleistung-liste-kopfzeile {
    padding-right: 4rem;
}

#material-liste>li,
#arbeitsleistung-liste>li {
    display: flex;
    justify-content: space-between;
    border-bottom: .1rem solid #ced4da;
}

#material-liste>li:nth-child(1),
#arbeitsleistung-liste>li:nth-child(1) {
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
    background-color: #ced4da;
}

#material-liste>li:nth-child(even),
#arbeitsleistung-liste>li:nth-child(even) {
    background-color: white;
}

#material-liste>li:last-child,
#arbeitsleistung-liste>li:last-child {
    border-bottom: unset;
    border-bottom-left-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;
}

#material-liste>li>span,
#arbeitsleistung-liste>li>span {
    padding: .5rem .5rem;
    margin: 1rem;
}

#material-liste>li>.material-liste-index,
#arbeitsleistung-liste>li>.arbeitsleistung-liste-index {
    width: 5rem;
    text-align: center;

}

#material-liste>li>.material-liste-menge,
#arbeitsleistung-liste>li>.arbeitsleistung-liste-menge {
    width: 5rem;
    text-align: center;
}

#material-liste>li>.material-liste-einheit,
#arbeitsleistung-liste>li>.arbeitsleistung-liste-einheit {
    width: 5rem;
    text-align: center;
}

#material-liste>li>.material-liste-bezeichnung,
#arbeitsleistung-liste>li>.arbeitsleistung-liste-bezeichnung {
    width: 30rem;
}

#material-liste>li>.material-liste-preis,
#arbeitsleistung-liste>li>.arbeitsleistung-liste-preis {
    width: 12rem;
    text-align: center;
}

#material-liste>li>.material-liste-rabatt,
#arbeitsleistung-liste>li>.arbeitsleistung-liste-rabatt {
    width: 15rem;
    text-align: center;
}

#material-liste>li>.material-liste-total,
#arbeitsleistung-liste>li>.arbeitsleistung-liste-total {
    width: 12rem;
    text-align: end;
}

#material-liste>li .liste-delete-button:last-child,
#arbeitsleistung-liste>li .liste-delete-button:last-child {
    border: unset;
    border-left: .1rem solid #ced4da;
}

#material-liste>li:last-child .liste-delete-button,
#arbeitsleistung-liste>li:last-child .liste-delete-button {
    border-bottom-right-radius: 1.5rem;
}

#material-liste>.summe-material,
#arbeitsleistung-liste>.summe-arbeitsleistung {
    text-align: end;
    padding-right: 1.5rem;
}

/* === Dienstleistungen Ausgaben Eingabeformular === */
#formular-container>.eingabeformular-zeile {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}

#formular-container>#eingabeformular>.eingabeformular-zeile>.ueberschrift {
    @media (max-width: 767px) and (orientation: portrait) {
        text-align: center;
        padding-bottom: 2rem;
    }
}

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

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

.titel-preis-pro-einheit-eingabe-gruppe>input {
    border-right: none;
    border-left: none;

    @media (max-width: 767px) and (orientation: portrait) {
        border-right: .1rem solid #ced4da;
    }
}

.titel-preis-pro-einheit-eingabe-gruppe>input:nth-of-type(2) {
    max-width: 14rem;

}

.titel-preis-pro-einheit-eingabe-gruppe>label:nth-of-type(2) {
    width: 16rem;
    border-right: none;
    border-left: none;

    @media (max-width: 767px) and (orientation: portrait) {
        width: 100%;
        border-top-left-radius: 1.5rem;
        border-bottom-left-radius: 1.5rem;
        border-left: .1rem solid #c3e6cb;
    }
}

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

    @media (max-width: 767px) and (orientation: portrait) {
        border-right: .1rem solid #ced4da;
    }
}

.menge-einheit-datum-eingabe-gruppe>input:nth-of-type(1) {
    width: 14rem;
    text-align: right;
    border-right: none;
    border-left: none;
}

.menge-einheit-datum-eingabe-gruppe>input:nth-of-type(2) {
    width: 13rem;
}

.menge-einheit-datum-eingabe-gruppe>select {
    max-width: 7rem;
    text-align: center;
    border-left: none;
    border-right: none;
}

.menge-einheit-datum-eingabe-gruppe>label:nth-of-type(2) {
    width: 10rem;
    border-right: none;
    border-left: none;

    @media (max-width: 767px) and (orientation: portrait) {
        border-left: .1rem solid #ced4da;
        border-top-left-radius: 1.5rem;
        border-bottom-left-radius: 1.5rem;
    }
}

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

/* === Dienstleistungen Ausgabenliste === */
#ausgabenliste {
    grid-area: dienstleistung-ausgabe-liste-bereich;
}

#ausgabenliste>.ueberschrift-container {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

#ausgabenliste>.ueberschrift-container>span {
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    font-size: 1.8rem;
    padding: .5rem 1rem;
    color: #fff;
    border-radius: 1.2rem;
    background-color: #dc3545;
}

.dienstleistung-ausgabe-liste {
    list-style: none;
    padding: 0;
    margin-bottom: 4rem;
}

.dienstleistung-ausgabe-liste>li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    line-height: 2.5rem;
    margin: 2rem 0;

    @media (max-width: 767px) and (orientation: portrait) {
        display: grid;
        grid-template-columns: 0.8fr 2fr 0.2fr;
        grid-template-rows: auto auto;
        grid-template-areas: "datum betrag button"
            "titel titel button";
    }
}

.dienstleistung-ausgabe-liste>li>.ausgabe-datum-span {
    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;

    @media (max-width: 767px) and (orientation: portrait) {
        grid-area: datum;
        border-bottom-left-radius: 0;
        border-bottom: 0;
    }
}

.dienstleistung-ausgabe-liste>li>.ausgabe-titel-span {
    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;

    @media (max-width: 767px) and (orientation: portrait) {
        grid-area: titel;
        border-bottom-left-radius: 1.5rem;
        background-color: white;
        color: #495057;
        border-right: .1rem solid #ced4da;
        border-top: 0;
    }
}

.dienstleistung-ausgabe-liste>li>.ausgabe-preis-per-einheit-span,
.dienstleistung-ausgabe-liste>li>.ausgabe-menge-span,
.dienstleistung-ausgabe-liste>li>.ausgabe-einheit-span,
.dienstleistung-ausgabe-liste>li>.ausgabe-gesamt-span {
    min-width: 150px;
    text-align: right;
    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;

    @media (max-width: 767px) and (orientation: portrait) {
        grid-area: betrag;
    }
}

.dienstleistung-ausgabe-liste>li>.ausgabe-menge-span,
.dienstleistung-ausgabe-liste>li>.ausgabe-einheit-span {
    padding: .5rem .5rem .5rem 0;
    flex-grow: unset;
    min-width: 40px;
}

.dienstleistung-ausgabe-liste>li>.ausgabe-loeschen-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;

    @media (max-width: 767px) and (orientation: portrait) {
        grid-area: button;
    }
}

.dienstleistung-ausgabe-liste>li>.ausgabe-loeschen-button>* {
    pointer-events: none;
}

.dienstleistung-ausgabe-liste>li>.ausgabe-loeschen-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;
}

.dienstleistung-ausgabe-liste>li>.ausgabe-titel-span,
.dienstleistung-ausgabe-liste>li>.ausgabe-preis-per-einheit-span,
.dienstleistung-ausgabe-liste>li>.ausgabe-menge-span,
.dienstleistung-ausgabe-liste>li>.ausgabe-einheit-span,
.dienstleistung-ausgabe-liste>li>.ausgabe-gesamt-span {
    background-color: #f8d7da;
    color: #dc3545;
    border-color: #f5c6cb;
}

.dienstleistung-ausgabe-liste>li>.ausgabe-gesamt-span {
    @media (max-width: 767px) and (orientation: portrait) {
        background-color: #e9ecef;
        border-bottom: 0;
        border-top: .1rem solid #ced4da;
        border-right: .1rem solid #ced4da;
        text-align: right;
    }
}

/* === Dialog === */
#dialog {
    min-width: 90rem;
    border-radius: 2rem;
    border: unset;
    padding: 0;
    box-shadow: -1px 0px 18px 14px rgba(0, 0, 0, 0.1), -1px 1px 16px 17px rgba(0, 0, 0, 0.1);
}

#dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
}

/* === Einstellungen === */

#formular-container.einstellungen-container {
    @media (max-width: 767px) and (orientation: portrait) {
        margin: 1rem;
    }
}

.einstellungen-ueberschrift-container>.ueberschrift {
    @media (max-width: 767px) and (orientation: portrait) {
        text-align: center;
        padding-bottom: 2rem;
    }
}

.einstellungen-buttons-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.einstellungen-button {
    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;

    @media (max-width: 767px) and (orientation: portrait) {
        width: 100%;
    }
}

.einstellungen-button: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;
}

.einstellungen-button:hover {
    background-color: #0056b3;
    border-color: #004085;
}

/* === Monatskosten Einstellungen === */

#monatskosten-container {
    padding: 2rem;
    background-color: #f8f9fa;
    border: .1rem solid #ced4da;
    border-radius: 1.5rem;
    margin-top: 2rem;
}

.monatskosten-ueberschrift-container {
    margin-bottom: 2rem;
}

.einstellungen-sub-ueberschrift {
    font-size: 2rem;
    margin: 0;

    @media (max-width: 767px) and (orientation: portrait) {
        text-align: center;
    }
}

.monatskosten-form {
    margin-bottom: 2rem;
}

.monatskosten-eingabe-container {
    display: flex;
    margin-bottom: 1rem;

    @media (max-width: 767px) and (orientation: portrait) {
        flex-direction: column;
    }
}

.monatskosten-label,
.datum-label {
    width: 13rem;
    padding: .5rem 1.8rem .5rem 2rem;
    background-color: #e9ecef;
    color: #495057;
    text-align: center;
    line-height: 2.5rem;
    border: .1rem solid #ced4da;
    border-right: none;
    border-top-left-radius: 1.5rem;
    border-bottom-left-radius: 1.5rem;

    @media (max-width: 767px) and (orientation: portrait) {
        width: 100%;
        border-right: .1rem solid #ced4da;
        border-bottom: none;
        border-bottom-left-radius: 0;
        border-top-right-radius: 1.5rem;
    }
}

.datum-label {
    border-left: none;
    border-top-left-radius: unset;
    border-bottom-left-radius: unset;

    @media (max-width: 767px) and (orientation: portrait) {
        width: 100%;
        border-right: .1rem solid #ced4da;
        border-left: .1rem solid #ced4da;
        border-bottom: none;
        border-bottom-left-radius: 0;
        border-top-right-radius: 1.5rem;
        border-top-left-radius: 1.5rem;
    }
}

.monatskosten-input,
.datum-input {
    padding: .375rem .75rem;
    flex-grow: 1;
    line-height: 2.5rem;
    border: .1rem solid #ced4da;
    border-left: none;
    border-top-right-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;
    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;

    @media (max-width: 767px) and (orientation: portrait) {
        border-left: .1rem solid #ced4da;
        border-top-right-radius: 0;
        border-bottom-left-radius: 1.5rem;
    }
}

.monatskosten-input{
    border-right: none;
    border-top-right-radius: unset;
    border-bottom-right-radius: unset;

    @media (max-width: 767px) and (orientation: portrait) {
    border-right: .1rem solid #ced4da;
    border-bottom-right-radius: 1.5rem;
    margin-bottom: 1.5rem;
}
    
}

.monatskosten-hinzufuegen-button {
    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;

    @media (max-width: 767px) and (orientation: portrait) {
        width: 100%;
    }
}

.monatskosten-hinzufuegen-button: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;
}

.monatskosten-hinzufuegen-button:hover {
    background-color: #0056b3;
    border-color: #004085;
}

.eintraege-liste-container {
    margin-top: 2rem;
}

.monatskosteneintraege-liste {
    width: 100%;
    border-collapse: collapse;
    background-color: white;
    border: .1rem solid #ced4da;
    border-radius: 1.5rem;
    overflow: hidden;
}

.monatskosteneintraege-liste th {
    background-color: #e9ecef;
    color: #495057;
    padding: 1rem;
    text-align: left;
    border-bottom: .1rem solid #ced4da;
    font-weight: 400;
}

.monatskosteneintraege-liste td {
    padding: 1rem;
    border-bottom: .1rem solid #ced4da;
}

.monatskosteneintraege-liste tr:last-child td {
    border-bottom: none;
}

.monatskosteneintraege-liste tr:hover {
    background-color: #f8f9fa;
}

@media (max-width: 767px) and (orientation: portrait) {
    .monatskosteneintraege-liste {
        font-size: 1.3rem;
    }

    .monatskosteneintraege-liste th,
    .monatskosteneintraege-liste td {
        padding: .5rem;
    }
}

/* === Einkaufleasingdepot Einstellungen === */

#einkaufleasingdepot-container {
    padding: 2rem;
    background-color: #f8f9fa;
    border: .1rem solid #ced4da;
    border-radius: 1.5rem;
    margin-top: 2rem;
}

.einkaufleasingdepot-ueberschrift-container {
    margin-bottom: 2rem;
}

.einkaufleasingdepot-form {
    margin-bottom: 2rem;
}

.einkaufleasingdepot-eingabe-container {
    display: flex;
    margin-bottom: 1rem;

    @media (max-width: 767px) and (orientation: portrait) {
        flex-direction: column;
    }
}

.einkaufleasingdepot-label {
    width: 18rem;
    padding: .5rem 1.8rem .5rem 2rem;
    background-color: #e9ecef;
    color: #495057;
    text-align: center;
    line-height: 2.5rem;
    border: .1rem solid #ced4da;
    border-right: none;
    border-top-left-radius: 1.5rem;
    border-bottom-left-radius: 1.5rem;

    @media (max-width: 767px) and (orientation: portrait) {
        width: 100%;
        border-right: .1rem solid #ced4da;
        border-bottom: none;
        border-bottom-left-radius: 0;
        border-top-right-radius: 1.5rem;
    }
}

.einkaufleasingdepot-input {
    padding: .375rem .75rem;
    flex-grow: 1;
    line-height: 2.5rem;
    border: .1rem solid #ced4da;
    border-left: none;
    border-right: none;
    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;

    @media (max-width: 767px) and (orientation: portrait) {
        border-left: .1rem solid #ced4da;
        border-right: .1rem solid #ced4da;
        border-bottom-right-radius: 1.5rem;
        border-bottom-left-radius: 1.5rem;
        margin-bottom: 1.5rem;
    }
}

.einkaufleasingdepot-hinzufuegen-button {
    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;

    @media (max-width: 767px) and (orientation: portrait) {
        width: 100%;
    }
}

.einkaufleasingdepot-hinzufuegen-button: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;
}

.einkaufleasingdepot-hinzufuegen-button:hover {
    background-color: #0056b3;
    border-color: #004085;
}

.einkaufleasingdepoteintraege-liste {
    width: 100%;
    border-collapse: collapse;
    background-color: white;
    border: .1rem solid #ced4da;
    border-radius: 1.5rem;
    overflow: hidden;
}

.einkaufleasingdepoteintraege-liste th {
    background-color: #e9ecef;
    color: #495057;
    padding: 1rem;
    text-align: left;
    border-bottom: .1rem solid #ced4da;
    font-weight: 400;
}

.einkaufleasingdepoteintraege-liste td {
    padding: 1rem;
    border-bottom: .1rem solid #ced4da;
}

.einkaufleasingdepoteintraege-liste tr:last-child td {
    border-bottom: none;
}

.einkaufleasingdepoteintraege-liste tr:hover {
    background-color: #f8f9fa;
}

@media (max-width: 767px) and (orientation: portrait) {
    .einkaufleasingdepoteintraege-liste {
        font-size: 1.3rem;
    }

    .einkaufleasingdepoteintraege-liste th,
    .einkaufleasingdepoteintraege-liste td {
        padding: .5rem;
    }
}

/* === Einkauf Leasing === */

.einkaufleasing-depot-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
    background-color: #e9ecef;
    border: .1rem solid #ced4da;
    border-radius: 1.5rem;
    margin: 2rem 0;

    @media (max-width: 767px) and (orientation: portrait) {
        flex-direction: column;
        text-align: center;
    }
}

.depot-label {
    font-size: 1.8rem;
    font-weight: 400;
    color: #495057;
}

.depot-wert {
    font-size: 2.2rem;
    font-weight: 700;
    color: #007bff;
}

#einkauf-leasing-liste {
    list-style: none;
    padding: 0;
    margin: 0;
}

.einkauf-leasing-liste-eintrag {
    border: .1rem solid #ced4da;
    border-radius: 1.5rem;
    background-color: white;
    margin: 2rem 0;
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-template-areas: "daten buttons";
    overflow: hidden;

    @media (max-width: 767px) and (orientation: portrait) {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "daten"
            "buttons";
    }
}

.einkauf-leasing-liste-eintrag > .fahrzeug-daten-container {
    grid-area: daten;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.einkauf-leasing-liste-eintrag > .fahrzeug-daten-container > .fahrzeug-bezeichnung {
    font-size: 1.8rem;
    font-weight: 400;
    color: #212529;
}

.einkauf-leasing-liste-eintrag > .fahrzeug-daten-container > .fahrzeug-details {
    font-size: 1.4rem;
    color: #6c757d;
}

.einkauf-leasing-liste-eintrag > .fahrzeug-daten-container > .preis-info {
    font-size: 1.5rem;
    color: #495057;
    margin-top: 0.5rem;
}

.einkauf-leasing-liste-eintrag-buttons {
    grid-area: buttons;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1rem;
    padding: 1rem;
    align-items: center;

    @media (max-width: 767px) and (orientation: portrait) {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
        padding: 1rem;
    }
}

.einkauf-leasing-liste-eintrag-buttons > .bearbeiten-button,
.einkauf-leasing-liste-eintrag-buttons > .loeschen-button {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
    line-height: 2.5rem;
    font-size: 1.4rem;
    background-color: #007bff;
    border: .1rem solid #007bff;
    padding: .5rem 2rem;
    color: #e9ecef;
    border-radius: 1.5rem;
    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;

    @media (max-width: 767px) and (orientation: portrait) {
        line-height: 1.5rem;
        font-size: 1rem;
        padding: .5rem 0;
        flex-direction: column;
    }
}

.einkauf-leasing-liste-eintrag-buttons > .bearbeiten-button > svg,
.einkauf-leasing-liste-eintrag-buttons > .loeschen-button > svg {
    margin-right: 10px;

    @media (max-width: 767px) and (orientation: portrait) {
        margin-right: 0;
    }
}

.einkauf-leasing-liste-eintrag-buttons > .bearbeiten-button:focus,
.einkauf-leasing-liste-eintrag-buttons > .loeschen-button: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;
}

.einkauf-leasing-liste-eintrag-buttons > .bearbeiten-button:hover,
.einkauf-leasing-liste-eintrag-buttons > .loeschen-button:hover {
    background-color: #0056b3;
    border-color: #004085;
}