der,
.navbar,
.section,
.mainmiddle,
.banner-down,
.footer,
#buttons {
    max-width: 1440px;
    margin-inline: auto;
}

.header {
    position: relative;
    color: whitesmoke;
    text-align: center;
    text-shadow: 1px 1px 2px black, 0 0 25px rgb(255, 72, 0), 0 0 50px darkblue;
    background-image: radial-gradient(black, gold);
}

.logo {
    position: absolute;
    left: 1%;
    bottom: 0;
    width: 12%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo a {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.logo img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 80%;
    object-fit: contain;
}

.logo:hover {
    transform: scale(1.2);
}

.navbar {
    display: flex;
    background-color: #333;
    font-weight: 400;
}

.navlink,
.kundenlink {
    color: antiquewhite;
    text-shadow: 1px 1px 2px black, 0 0 5px rgb(255, 255, 255), 0 0 50px darkblue;
}

.navlink {
    padding: 7px;
}

.kundenlink {
    padding: 7px;
}

.navlink:hover,
.kundenlink:hover {
    color: black;
    text-shadow: 1px 1px 20px red;
}

.dropdown {
    display: inline;
}

.dropdown-content {
    position: absolute;
    z-index: 10;
    display: none;
    min-width: 160px;
    padding: 12px 16px;
    background-image: url("Bilder/texturen/tx_5.jpg");
    box-shadow: 1px 8px 16px rgba(0, 0, 0, 0.2);
    font-size: larger;
    font-weight: 800;
    line-height: 2.8;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.section {
    display: flex;
    justify-content: flex-start;
    margin-top: 30px;
    border-bottom: 3px solid #ac013c;
}

.banner-down {
    min-height: 50px;
    color: whitesmoke;
    text-align: center;
    background-image: radial-gradient(black, gold);
}

.footer {
    padding-top: 20px;
    text-align: center;
    text-shadow: 1px 1px 2px black, 0 0 10px rgb(255, 255, 255), 0 0 50px darkblue;
}

.footerlink {
    padding: 20px;
    color: bisque;
    font-size: larger;
}

.footerlink:hover {
    color: #000;
    text-shadow: 1px 1px 10px red;
}

/* ---------- Einheitliches Formular-Design ---------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="reset"]):not([type="submit"]),
select {
    width: 60%;
    height: 32px;
    padding: 0 10px;
    border: none;
    border-radius: 7px;
    background-color:#373e49;
    color: goldenrod;
    font: inherit;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="reset"]):not([type="submit"]):hover,
select:hover {
    background-color: #373e4949;
    box-shadow: 1px 1px 20px red;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="reset"]):not([type="submit"]):focus,
select:focus {
    outline: none;
    box-shadow: 1px 1px 20px rgb(255, 255, 255);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="reset"]):not([type="submit"]):focus {
    background-color: #373e4949;
}

select:focus {
    background-color: #373e49;
}

.button {
    width: 20%;
    min-width: fit-content;
    height: 40px;
    margin-inline: 10%;
    border: none;
    background-image: radial-gradient(black, grey);
    color: antiquewhite;
    font-size: larger;
    text-align: center;
}

#buttons {
    padding-block: 1%;
    text-align: center;
}

/* Datei-Upload */
#fileUpload,
.file-upload {
    position: relative;
    width: 60%;
    overflow: hidden;
    color: #000;
}

#btn,
.upload-btn {
    width: 100%;
    height: 40px;
    border: 2px solid #333;
    border-radius: 7px;
    background-image: radial-gradient(black, grey);
    color: antiquewhite;
    font-size: 20px;
    cursor: pointer;
}

#btn:hover,
.upload-btn:hover {
    box-shadow: 1px 1px 20px red;
}

#fileUpload input[type="file"],
.file-upload input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    opacity: 0;
    cursor: pointer;
}

/* =========================================================
   STARTSEITE
   ========================================================= */
.page-index .mainmiddle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 24px 5%;
}

.page-index .action-card {
    display: block;
    width: 100%;
    max-width: 512px;
}

.page-index .action-card img {
    display: block;
    width: 100%;
    height: auto;
}

.page-index .action-card:hover {
    box-shadow: 1px 1px 60px red;
}

/* =========================================================
   KUNDE HINZUFÜGEN
   ========================================================= */
.page-add .mainmiddle {
    display: flex;
    justify-content: center;
}

.page-add .form-column {
    width: 100%;
    padding: 5px 30px 40px;
}

.page-add .form-column:first-child {
    padding-left: 10%;
    padding-bottom: 3%;
}

/* =========================================================
   KUNDENÜBERSICHT
   ========================================================= */
.page-overview table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
}

.page-overview td,
.page-overview th {
    padding: 8px;
    border: 1px solid #dddddd;
    text-align: left;
}

.page-overview th {
    background-color: #660101c2;
    color: bisque;
}

.page-overview tr:nth-child(even) {
    background-color: #353131;
}

.page-overview tr:hover {
    background-color: #cec4c473;
    border: 2px solid #f70202;
}

.page-overview .mainmiddle {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.page-overview #kind_links,
.page-overview #kind_rechts {
    width: 100%;
    color: rgb(44, 44, 44);
    background-color: rgba(255, 235, 205, 0.911);
}

.page-overview #kind_links {
    padding: 0;
    background-color: rgba(255, 235, 205, 0.5);
}

.page-overview #kind_rechts {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 32px 24px;
}

.page-overview .enkelrechts {
    padding-bottom: 24px;
    border-bottom: 4px solid grey;
}

.page-overview .enkelrechts h2 {
    margin-bottom: 12px;
}

.page-overview .enkelrechts p {
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* =========================================================
   KUNDENANSICHT + KUNDE BEARBEITEN
   ========================================================= */
.page-customer .mainmiddle,
.page-customer-edit .mainmiddle {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.page-customer #kind_links,
.page-customer-edit #kind_links {
    width: 100%;
    padding: 24px 20px 32px;
    background-color: rgb(255, 235, 205);
    color: rgb(36, 36, 36);
    font-size: larger;
}

.page-customer #kind_rechts,
.page-customer-edit #kind_rechts {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 28px;
    padding: 32px 24px;
    background-color: rgba(255, 235, 205, 0.911);
    color: rgb(36, 36, 36);
}

.page-customer #logofremdfirmacontainer,
.page-customer-edit #logofremdfirmacontainer {
    display: flex;
    justify-content: center;
}

.page-customer #logofremdfirma,
.page-customer-edit #logofremdfirma {
    display: block;
    width: 100%;
    max-width: 300px;
    height: auto;
    border: 2px solid goldenrod;
    object-fit: contain;
}

.page-customer #kundendatencontainer,
.page-customer-edit #kundendatencontainer {
    padding-top: 24px;
}

.page-customer .customer-item,
.page-customer-edit .customer-item {
    margin-bottom: 28px;
}

.page-customer .customer-item:last-child,
.page-customer-edit .customer-item:last-child {
    margin-bottom: 0;
}

.page-customer .customer-item h4,
.page-customer-edit .customer-item h4 {
    margin-bottom: 5px;
}

.page-customer .customer-item p,
.page-customer-edit .customer-item p,
.page-customer .enkelrechts p,
.page-customer-edit .enkelrechts p {
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.page-customer .enkelrechts,
.page-customer-edit .enkelrechts {
    padding-bottom: 24px;
    border-bottom: 4px solid grey;
}

.page-customer .enkelrechts h2,
.page-customer-edit .enkelrechts h2 {
    margin-bottom: 12px;
}

.page-customer .netzwerkplan,
.page-customer-edit .netzwerkplan {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 80%;
    object-fit: contain;
}

.page-customer-edit #tenent_id,
.page-customer-edit .eingabefeld,
.page-customer-edit .anzahl_ms_lizenzen,
.page-customer-edit #fw-modell {
    width: 60%;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* Smartphones */
@media (max-width: 599px) {
    #creator,
    .logo,
    .navbar,
    .banner-down {
        display: none;
    }

    #burgermenue {
        width: 100px;
        padding: 1px 0 10px 5%;
    }

    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="reset"]):not([type="submit"]),
    select {
        height: 36px;
    }

    .button {
        min-width: 140px;
        height: 60px;
    }

    .footerlink,
    h4 {
        font-size: x-large;
    }

    /* Startseite */
    .page-index .mainmiddle {
        gap: 16px;
        padding: 24px 5% 32px;
    }

    .page-index .action-card {
        max-width: 420px;
    }

    /* Add */
    .page-add .mainmiddle {
        flex-direction: column;
        padding-block: 4% 3%;
        text-align: center;
    }

    .page-add .form-column {
        padding: 0;
    }

    .page-add #buttons {
        padding-bottom: 3%;
    }

    .page-add h4 {
        line-height: 1.6;
    }

    /* Übersicht / Kunden */
    .page-overview .mainmiddle,
    .page-customer .mainmiddle,
    .page-customer-edit .mainmiddle {
        margin-top: 24px;
    }

    .page-overview #kind_links,
    .page-customer #kind_links,
    .page-customer-edit #kind_links {
        padding: 24px 8% 32px;
    }

    .page-overview #kind_links {
        padding: 0;
    }

    .page-customer #logofremdfirma,
    .page-customer-edit #logofremdfirma {
        max-width: 220px;
    }

    .page-customer #kundendatencontainer,
    .page-customer-edit #kundendatencontainer {
        max-width: 360px;
        margin-inline: auto;
    }

    .page-overview #kind_rechts,
    .page-customer #kind_rechts,
    .page-customer-edit #kind_rechts {
        gap: 24px;
        padding: 32px 8%;
    }

    .page-customer .enkelrechts h2,
    .page-customer-edit .enkelrechts h2,
    .page-overview .enkelrechts h2 {
        font-size: x-large;
    }
}

/* Smartphone + Tablet Form-Ausrichtung */
@media (max-width: 768px) {
    .page-add .form-column,
    .page-add .form-column:first-child {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .page-add .form-column > label,
    .page-add .form-column > h4,
    .page-add .form-column > input,
    .page-add .form-column > select,
    .page-add .form-column > #fileUpload {
        display: block;
        width: 60%;
        margin-inline: auto;
        text-align: left;
    }

    .page-customer-edit .customer-item > input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    .page-customer-edit .customer-item > select,
    .page-customer-edit .enkelrechts input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="reset"]):not([type="submit"]),
    .page-customer-edit .enkelrechts select,
    .page-customer-edit .file-upload {
        width: 60%;
    }
}

/* Große Smartphones / Tablets */
@media (min-width: 600px) {
    #burgermenue,
    .logo,
    #creator {
        display: none;
    }

    .header {
        margin-top: 2%;
    }

    .navbar {
        flex-wrap: wrap;
        justify-content: space-around;
        font-size: x-large;
    }

    .banner-down {
        margin-top: 2%;
    }

    .page-index .mainmiddle {
        max-width: 640px;
        padding: 32px 20px;
    }

    .page-add .mainmiddle {
        flex-direction: column;
        max-width: 600px;
        padding: 2% 20px 3%;
    }

    .page-add .form-column {
        padding: 0;
    }

    .page-add h4 {
        font-size: larger;
        line-height: 1.5;
    }

    .page-overview .mainmiddle,
    .page-customer .mainmiddle,
    .page-customer-edit .mainmiddle {
        max-width: 600px;
        margin-top: 30px;
    }

    .page-customer #kind_links,
    .page-customer-edit #kind_links {
        padding: 32px 10% 40px;
    }

    .page-overview #kind_links {
        padding: 0;
    }

    .page-customer #kundendatencontainer,
    .page-customer-edit #kundendatencontainer {
        max-width: 440px;
        margin-inline: auto;
    }

    .page-overview #kind_rechts,
    .page-customer #kind_rechts,
    .page-customer-edit #kind_rechts {
        padding: 40px 10%;
    }
}

/* Landscape Tablets */
@media (min-width: 769px) {
    .header {
        padding: 15px 0;
    }

    #creator {
        display: block;
    }

    .navbar {
        font-size: larger;
    }

    .banner-down {
        margin-top: 20px;
    }

    .page-index .mainmiddle {
        flex-direction: row;
        align-items: stretch;
        gap: 0;
        max-width: 100%;
        padding: 0;
        margin-top: 50px;
    }

    .page-index .action-card {
        flex: 1 1 0;
        width: 33.333%;
        max-width: 512px;
    }

    .page-add .mainmiddle {
        flex-direction: row;
        max-width: 100%;
        margin-top: 50px;
    }

    .page-add .form-column:first-child {
        padding-left: 2%;
    }

    .page-overview .mainmiddle,
    .page-customer .mainmiddle,
    .page-customer-edit .mainmiddle {
        max-width: 900px;
        margin-top: 50px;
    }

    .page-overview #kind_links,
    .page-customer #kind_links,
    .page-customer-edit #kind_links {
        padding-inline: 12%;
    }

    .page-overview #kind_links {
        padding: 0;
    }

    .page-overview #kind_rechts,
    .page-customer #kind_rechts,
    .page-customer-edit #kind_rechts {
        padding-inline: 8%;
    }
}

/* Desktop */
@media (min-width: 992px) {
    .header {
        padding: 30px 0 20px;
    }

    .logo {
        display: flex;
    }

    .page-add h4 {
        font-size: medium;
    }

    .page-overview .mainmiddle,
    .page-customer .mainmiddle,
    .page-customer-edit .mainmiddle {
        flex-direction: row;
        max-width: 1200px;
        overflow: visible;
    }

    .page-overview #kind_links,
    .page-customer #kind_links,
    .page-customer-edit #kind_links {
        width: 30%;
        padding: 20px 3% 8%;
    }

    .page-overview #kind_links {
        padding: 0;
    }

    .page-overview #kind_rechts,
    .page-customer #kind_rechts,
    .page-customer-edit #kind_rechts {
        width: 70%;
        justify-content: space-between;
        gap: 32px;
        padding: 5%;
    }

    .page-customer #logofremdfirma,
    .page-customer-edit #logofremdfirma {
        max-width: 260px;
    }

    .page-customer #kundendatencontainer,
    .page-customer-edit #kundendatencontainer {
        max-width: none;
        padding-top: 20px;
    }
}

/* Große Desktops */
@media (min-width: 1200px) {
    .navbar {
        justify-content: flex-start;
    }

    .navlink {
        padding: 10px 20px 10px 10px;
    }

    .page-index .mainmiddle,
    .page-add .mainmiddle,
    .page-overview .mainmiddle,
    .page-customer .mainmiddle,
    .page-customer-edit .mainmiddle {
        max-width: 1200px;
        margin-bottom: 2%;
        box-shadow: 1px 1px 20px white;
    }

    .page-add .mainmiddle {
        padding-inline: 0;
    }

    .page-customer #kind_links,
    .page-customer-edit #kind_links {
        padding-bottom: 10%;
    }

    .page-customer #logofremdfirma,
    .page-customer-edit #logofremdfirma {
        max-width: 300px;
    }
}

@media (min-width: 1440px) {
    .page-index .mainmiddle,
    .page-add .mainmiddle,
    .page-overview .mainmiddle,
    .page-customer .mainmiddle,
    .page-customer-edit .mainmiddle {
        max-width: 1440px;
    }
}


/* =========================================================
   Kundenansicht: integrierter Bearbeitungsmodus
   ========================================================= */
.hidden {
    display: none !important;
}

.edit-only {
    display: none;
}

.page-customer.edit-mode .edit-only {
    display: revert;
}

.page-customer.edit-mode .view-only {
    display: none !important;
}

.page-customer #button_kunde_bearbeiten {
    align-self: center;
    cursor: pointer;
}

.page-customer .customer-field {
    width: 100%;
}

.page-customer .address-fields {
    width: 100%;
}

.page-customer .address-fields h5 {
    margin: 12px 0 5px;
}

.page-customer .address-fields .customer-field {
    width: 100%;
}

.page-customer .edit-panel {
    padding: 24px;
    border: 2px solid #ac013c;
    border-radius: 8px;
    background-color: rgba(255, 235, 205, 0.55);
}

.page-customer .edit-panel h2 {
    margin-bottom: 10px;
}

.page-customer .edit-panel > p {
    margin-bottom: 18px;
}

.documentation-checkboxes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 20px;
}

.documentation-checkboxes label,
.backup-options label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.documentation-checkboxes input[type="checkbox"],
.backup-options input[type="radio"] {
    width: auto;
    height: auto;
}

.edit-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 28px;
}

.edit-actions .button {
    width: auto;
    margin-inline: 0;
    padding-inline: 18px;
    cursor: pointer;
}

.documentation-values {
    margin-top: 15px;
}

.documentation-fields {
    margin-top: 15px;
}

.documentation-fields li {
    margin-bottom: 12px;
}

.documentation-fields input,
.documentation-fields select {
    margin-top: 5px;
}

.page-customer-edit #tenent_id,
.page-customer-edit .eingabefeld,
.page-customer-edit .anzahl_ms_lizenzen,
.page-customer-edit #fw-modell,
.page-customer #tenent_id,
.page-customer .eingabefeld,
.page-customer .anzahl_ms_lizenzen,
.page-customer #fw-modell {
    width: 60%;
}

.firewall-details {
    display: block;
    margin-top: 15px;
}

.backup-options {
    margin-top: 15px;
}

.backup-options h4 {
    margin-bottom: 8px;
}

.backup-options label {
    margin-bottom: 5px;
}

.page-customer #section-network p {
    margin-bottom: 8px;
}

.page-customer #section-network .eingabefeld {
    margin-top: 5px;
}

.network-upload {
    margin-top: 15px;
}

.network-upload .upload-btn {
    font-size: 16px;
}

@media (max-width: 768px) {
    .documentation-checkboxes {
        grid-template-columns: 1fr;
    }

    .page-customer .customer-field,
    .page-customer .address-fields .customer-field,
    .page-customer #tenent_id,
    .page-customer .eingabefeld,
    .page-customer .anzahl_ms_lizenzen,
    .page-customer #fw-modell {
        width: 100%;
    }

    .edit-actions {
        flex-direction: column;
    }

    .edit-actions .button {
        width: 100%;
    }
}


/* =========================================================
   add.html – Korrektur ausschließlich für die beiden Buttons
   ========================================================= */
.page-add #buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20%;
}

.page-add #buttons .button {
    width: 20%;
    min-width: 140px;
    height: 40px;
    margin: 0;
    background-image: radial-gradient(black, grey);
    color: antiquewhite;
    font-size: larger;
    text-align: center;
    cursor: pointer;
}

.page-add #buttons .button:hover {
    box-shadow: 1px 1px 20px red;
}

@media (max-width: 599px) {
    .page-add #buttons {
        gap: 12px;
        padding-inline: 10px;
    }

    .page-add #buttons .button {
        width: calc(50% - 6px);
        min-width: 0;
        height: 60px;
    }
}


/* Firmenlogo im Bearbeitungsmodus */
.page-customer .logo-upload-area {
    margin-top: 20px;
}

.page-customer .logo-upload-area h4 {
    margin-bottom: 8px;
}

.page-customer .logo-upload-area .file-upload {
    width: 100%;
}

.page-customer .logo-upload-area .upload-btn {
    font-size: 16px;
}


/* =========================================================
   PHP-Formularmeldungen auf add.php
   ========================================================= */
.form-message {
    max-width: 1200px;
    margin: 20px auto 0;
    padding: 14px 18px;
    border-radius: 7px;
}

.form-message ul {
    margin: 8px 0 0 20px;
}

.form-error {
    border: 1px solid #d9534f;
    background-color: rgba(217, 83, 79, 0.2);
    color: #ffd5d3;
}

.form-success {
    border: 1px solid #5cb85c;
    background-color: rgba(92, 184, 92, 0.2);
    color: #ddffdd;
}


/* Sonstiges-Feld auf der Kundenansicht */
.page-customer .customer-textarea {
    width: 100%;
    min-height: 100px;
    padding: 10px;
    border: none;
    border-radius: 7px;
    resize: vertical;
    background-color: #373e49;
    color: goldenrod;
    font: inherit;
}

.page-customer .customer-textarea:hover {
    background-color: #373e4949;
    box-shadow: 1px 1px 20px red;
}

.page-customer .customer-textarea:focus {
    outline: none;
    background-color: #373e4949;
    box-shadow: 1px 1px 20px rgb(255, 255, 255);
}


/* =========================================================
   Ansprechpartner – erweiterte Kontaktdaten
   ========================================================= */
.page-add .contact-person {
    margin-bottom: 28px;
    padding-bottom: 22px;
    border-bottom: 2px solid rgba(172, 1, 60, 0.55);
}

.page-add .contact-person:last-child {
    margin-bottom: 0;
}

.page-add .contact-person h3 {
    margin-bottom: 14px;
}

.page-add .contact-person h3 small {
    font-size: 0.7em;
    font-weight: normal;
}

.page-customer .contact-display p {
    margin-bottom: 5px;
}

.page-customer .contact-edit-fields h5 {
    margin: 12px 0 5px;
}

.page-customer .contact-edit-fields .customer-field {
    width: 100%;
}

@media (max-width: 768px) {
    .page-add .contact-person {
        width: 60%;
        margin-inline: auto;
        text-align: left;
    }

    .page-add .contact-person input {
        width: 100%;
    }
}


/* =========================================================
   MySQL-basierte Kundenansicht / Übersicht
   ========================================================= */
.customer-error-page {
    max-width: 1200px;
    margin: 40px auto;
    padding: 30px;
    background-color: rgba(255, 235, 205, 0.9);
    color: #292828;
}

.page-overview #kind_rechts:empty::after {
    content: "";
}

.page-customer .documentation-fields {
    display: none;
}

.page-customer.edit-mode .documentation-fields {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.page-customer .documentation-fields label {
    margin-top: 8px;
    font-weight: bold;
}

.page-customer .disk-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 8px;
}

.page-customer .disk-editor {
    padding: 12px;
    border: 1px solid rgba(44, 44, 44, 0.35);
    border-radius: 7px;
}

.page-customer .disk-editor strong {
    display: block;
    margin-bottom: 8px;
}

.page-customer .disk-editor .eingabefeld,
.page-customer .disk-editor select {
    width: 100%;
    margin-top: 7px;
}

.page-customer .license-list li {
    margin-bottom: 8px;
}

.page-customer .document-export {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.page-customer .document-export .button {
    margin-inline: 0;
}

.page-customer .document-export .button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .page-customer .disk-grid {
        grid-template-columns: 1fr;
    }

    .page-customer .documentation-fields .eingabefeld,
    .page-customer .documentation-fields select,
    .page-customer .documentation-fields textarea {
        width: 100%;
    }
}


/* =========================================================
   add.php – zweispaltiges Formular und Pflichtfelder
   ========================================================= */
.page-add .required-hint {
    max-width: 1200px;
    margin: 16px auto 0;
    padding-inline: 30px;
    text-align: right;
    font-size: 0.9rem;
}

.page-add .required-star {
    color: #ff5a5a;
    font-weight: 700;
}

.page-add .customer-data-column,
.page-add .contact-column {
    flex: 1 1 0;
    width: 50%;
}

.page-add .customer-data-column h3,
.page-add .contact-column > .contact-person:first-child h3 {
    margin-bottom: 18px;
}

.page-add .customer-data-column {
    padding-left: 5%;
}

.page-add .contact-column {
    padding-right: 5%;
}

.page-add .form-message {
    box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.35);
}

.page-add .form-error {
    border: 1px solid #d9534f;
    background-color: rgba(217, 83, 79, 0.2);
    color: #ffd5d3;
}

.page-add .form-success {
    border: 1px solid #5cb85c;
    background-color: rgba(92, 184, 92, 0.2);
    color: #ddffdd;
}

@media (max-width: 768px) {
    .page-add .customer-data-column,
    .page-add .contact-column {
        width: 100%;
        padding-inline: 0;
    }

    .page-add .required-hint {
        max-width: 600px;
        padding-inline: 20px;
    }
}

@media (min-width: 769px) {
    .page-add .mainmiddle {
        align-items: flex-start;
    }
}


/* =========================================================
   Validierung, Flash-Meldung und mehrere VMs
   ========================================================= */
.page-customer:not(.edit-mode) .secondary-contact-empty {
    display: none;
}

.flash-message {
    transition: opacity 0.4s ease;
}

.flash-message-hide {
    opacity: 0;
}

.vm-view-list {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.vm-view-card,
.vm-editor {
    padding: 18px;
    border: 1px solid rgba(44, 44, 44, 0.35);
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.18);
}

.vm-view-card h3,
.vm-editor h3 {
    margin-bottom: 12px;
}

.vm-editor {
    margin-bottom: 24px;
}

.vm-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 15px;
}

.remove-vm-button {
    padding: 8px 12px;
    border: 1px solid #6f0000;
    border-radius: 7px;
    background-color: rgba(150, 0, 0, 0.15);
    color: #6f0000;
    cursor: pointer;
}

.remove-vm-button:hover {
    box-shadow: 1px 1px 15px red;
}

.vm-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
    margin-bottom: 20px;
}

.vm-field-grid label,
.vm-note-label {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.vm-field-grid .eingabefeld {
    width: 100%;
}

.add-vm-button {
    width: auto;
    margin: 8px 0 24px;
    padding-inline: 18px;
}

.network-plan-placeholder {
    margin-top: 24px;
    padding: 36px 24px;
    border: 2px dashed rgba(44, 44, 44, 0.45);
    border-radius: 10px;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.16);
}

.network-plan-placeholder-icon {
    margin-bottom: 8px;
    font-size: 42px;
    line-height: 1;
}

.network-plan-placeholder h3 {
    margin-bottom: 10px;
}

.network-plan-placeholder p {
    max-width: 620px;
    margin-inline: auto;
}

@media (max-width: 768px) {
    .vm-field-grid {
        grid-template-columns: 1fr;
    }

    .vm-editor-header {
        align-items: flex-start;
        flex-direction: column;
    }
}




/* =========================================================
   Kundenarchiv
   ========================================================= */
.archive-customer-area {
    margin-top: 34px;
    padding-top: 22px;
    border-top: 1px solid rgba(184, 134, 11, 0.45);
}

.archive-customer-button {
    margin: 0;
    border: 1px solid goldenrod;
    background-color: rgba(184, 134, 11, 0.18);
    color: goldenrod;
}

.archive-customer-button:hover {
    box-shadow: 1px 1px 18px goldenrod;
    color: #ffffff;
}

.archived-customer-notice {
    margin-bottom: 24px;
    padding: 18px;
    border: 1px solid goldenrod;
    border-radius: 8px;
    background-color: rgba(184, 134, 11, 0.14);
}

.archived-customer-notice strong {
    color: goldenrod;
}

.archived-customer-notice p {
    margin-top: 7px;
}

.customer-archived .edit-only {
    display: none !important;
}

.archive-date {
    margin-top: 5px;
    font-size: 0.85rem;
    opacity: 0.7;
}

/* =========================================================
   DESIGNANPASSUNGEN 15.09.2026
   - Seitenbereiche bis an den linken/rechten Bildschirmrand
   - Startseiten-mainmiddle bleibt unverändert
   - Formularfelder auf 85 % der bisherigen Standardgröße
   - Kundentitel + Aktionsbuttons als sticky Toolbar
   ========================================================= */

/* Header, Navigation, Bereichsüberschriften, Banner und Footer
   sollen nicht mehr durch die bisherige 1440px-Begrenzung eingerückt sein. */
.header,
.navbar,
.section,
.banner-down,
.footer,
#buttons {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* Auf allen Unterseiten darf auch der Hauptinhalt die volle Seitenbreite nutzen.
   .page-index .mainmiddle wird absichtlich NICHT überschrieben. */
.page-add .mainmiddle,
.page-overview .mainmiddle,
.page-customer .mainmiddle,
.page-customer-edit .mainmiddle {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* 85 % der bisherigen Standardbreite (60 % -> 51 %) und Höhe (32px -> ca. 27px). */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="reset"]):not([type="submit"]),
select {
    width: 51%;
    height: 27px;
}

/* Hover und Fokus: Inhalt deutlich lesbar. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="reset"]):not([type="submit"]):hover,
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="reset"]):not([type="submit"]):focus,
select:hover,
select:focus,
textarea:hover,
textarea:focus {
    color: black;
    caret-color: red;
    background-color: rgb(204, 203, 203);
}

/* add.php: alle sichtbaren Formularelemente bleiben einheitlich breit. */
.page-add input::placeholder,
.page-customer .tab-panel input::placeholder,
.page-customer .tab-panel textarea::placeholder,
.page-add #status:invalid,
.page-add #status option[value=""] {
    color: #757575;
    opacity: 1;
}

.page-add #status option:not([value=""]) {
    color: goldenrod;
}

.page-add #status:hover option:not([value=""]),
.page-add #status:focus option:not([value=""]) {
    color: #000;
}

.page-add .form-column > label,
.page-add .form-column > h4,
.page-add .form-column > input,
.page-add .form-column > select,
.page-add .form-column > #fileUpload,
.page-add .contact-person input {
    width: 51%;
}

.page-add .contact-person {
    width: 100%;
}

.page-add .form-column > label,
.page-add .form-column > h4,
.page-add .form-column > input,
.page-add .form-column > select,
.page-add .form-column > #fileUpload {
    display: block;
}

/* kd0000x.php: Eingabefelder im Bearbeitungsmodus einheitlich untereinander. */
.page-customer .customer-field,
.page-customer .address-fields .customer-field,
.page-customer .contact-edit-fields .customer-field,
.page-customer #tenent_id,
.page-customer .eingabefeld,
.page-customer .anzahl_ms_lizenzen,
.page-customer #fw-modell,
.page-customer .documentation-fields .eingabefeld,
.page-customer .documentation-fields select,
.page-customer .customer-textarea,
.page-customer .file-upload,
.page-customer .logo-upload-area .file-upload {
    width: 51%;
}

.page-customer .customer-field,
.page-customer .address-fields .customer-field,
.page-customer .contact-edit-fields .customer-field,
.page-customer #tenent_id,
.page-customer .eingabefeld,
.page-customer .anzahl_ms_lizenzen,
.page-customer #fw-modell,
.page-customer .documentation-fields .eingabefeld,
.page-customer .documentation-fields select,
.page-customer .customer-textarea {
    display: block;
}

.page-customer .customer-textarea {
    min-height: 85px;
}

/* VM-Felder stehen innerhalb ihrer Gruppe untereinander. */
.page-customer .vm-field-grid,
.page-customer .disk-grid {
    grid-template-columns: 1fr;
}

.page-customer .vm-field-grid .eingabefeld,
.page-customer .disk-editor .eingabefeld,
.page-customer .disk-editor select {
    width: 51%;
}

/* Hosting: VM-Daten, Netzwerkadapter und Festplatten passen nebeneinander. */
.page-customer #section-hosting .vm-editor-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    align-items: start;
    gap: 24px;
}

.page-customer #section-hosting .vm-field-group {
    min-width: 0;
    max-width: 350px;
}

.page-customer #section-hosting .vm-field-group > h4 {
    margin-bottom: 12px;
}

.page-customer #section-hosting input:not([type="hidden"]),
.page-customer #section-hosting select,
.page-customer #section-hosting textarea {
    width: 100%;
    max-width: 350px;
}

.page-customer #section-m365 .anzahl_ms_lizenzen {
    width: 8.5%;
    min-width: 64px;
}

/* Kundentitel und Aktionen: links/rechts auf einer Höhe und beim Scrollen sichtbar. */
.page-customer .customer-toolbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 58px;
    padding: 8px 20px;
    background-color: #292828;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}

.page-customer #customer-title {
    flex: 1 1 auto;
    min-width: 0;
}

.page-customer .customer-toolbar-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-left: auto;
}

.page-customer .customer-edit-actions {
    display: none;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.page-customer.edit-mode .customer-toolbar .customer-edit-actions {
    display: flex;
}

.page-customer .customer-toolbar .button {
    width: auto;
    min-width: 145px;
    height: 36px;
    margin: 0;
    padding: 0 14px;
    font-size: 1rem;
    white-space: nowrap;
    cursor: pointer;
}

.page-customer .customer-toolbar .archive-customer-button {
    border: 1px solid goldenrod;
}

/* Die alten Flächen für die inzwischen verschobenen Aktionsbuttons werden nicht mehr benötigt. */
.page-customer .archive-customer-area,
.page-customer .edit-actions {
    margin: 0;
    padding: 0;
    border: 0;
}

@media (max-width: 768px) {
    /* 85 % der bisherigen mobilen Standardbreite 60 % -> 51 % und Höhe 36px -> ca. 31px. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="reset"]):not([type="submit"]),
    select {
        width: 51%;
        height: 31px;
    }

    .page-add .form-column > label,
    .page-add .form-column > h4,
    .page-add .form-column > input,
    .page-add .form-column > select,
    .page-add .form-column > #fileUpload,
    .page-add .contact-person input,
    .page-customer .customer-field,
    .page-customer .address-fields .customer-field,
    .page-customer .contact-edit-fields .customer-field,
    .page-customer #tenent_id,
    .page-customer .eingabefeld,
    .page-customer .anzahl_ms_lizenzen,
    .page-customer #fw-modell,
    .page-customer .documentation-fields .eingabefeld,
    .page-customer .documentation-fields select,
    .page-customer .customer-textarea,
    .page-customer .file-upload,
    .page-customer .logo-upload-area .file-upload,
    .page-customer .vm-field-grid .eingabefeld,
    .page-customer .disk-editor .eingabefeld,
    .page-customer .disk-editor select {
        width: 51%;
    }

    .page-add .contact-person {
        width: 100%;
        margin-inline: 0;
    }

    .page-customer .customer-toolbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
        padding: 8px 12px;
    }

    .page-customer .customer-toolbar-actions,
    .page-customer.edit-mode .customer-toolbar .customer-edit-actions {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .page-customer .customer-toolbar .button {
        width: auto;
        min-width: 0;
        height: 34px;
        padding-inline: 10px;
        font-size: 0.9rem;
    }
}


/* =========================================================
   DESIGNANPASSUNGEN 15.09.2026 – Revision 2
   - Hauptnavigation und Seitentitel-Leiste angeheftet
   - Einheitliche Section-Darstellung auf allen Unterseiten
   - Bearbeitungsmodus-Hinweis mittig in der Kundenleiste
   - edit-only-Felder außerhalb des Bearbeitungsmodus sicher verborgen
   ========================================================= */

:root {
    --sticky-navbar-height: 48px;
    --sticky-toolbar-height: 58px;
}

/* Die Hauptnavigation bleibt beim Scrollen oben sichtbar. */
.navbar {
    position: sticky;
    top: 0;
    z-index: 1200;
    min-height: var(--sticky-navbar-height);
    align-items: center;
    margin-bottom: 0;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}

/* Auf Desktop/Tablet wird nur die Hauptnavigation verwendet. Der unsichtbare
   Burger-Menü-Container erzeugt dadurch keinen Abstand zwischen Navbar und Section. */
@media (min-width: 600px) {
    .navbar {
        height: var(--sticky-navbar-height);
        flex-wrap: nowrap;
    }

    .dropdown {
        display: none;
    }
}

/* Alle Seitentitel-Leisten sehen gleich aus und kleben direkt unter der Navbar. */
.section {
    position: sticky;
    top: var(--sticky-navbar-height);
    z-index: 1100;
    width: 100%;
    max-width: none;
    min-height: var(--sticky-toolbar-height);
    margin: 0;
    padding: 8px 20px;
    align-items: center;
    background-color: #292828;
    border-bottom: 3px solid #ac013c;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}

.section > h1 {
    margin: 0;
}

/* Kundenleiste: Titel links, Aktionsbuttons rechts. */
.page-customer .customer-toolbar {
    top: var(--sticky-navbar-height);
    min-height: var(--sticky-toolbar-height);
    margin: 0;
    padding: 8px 20px;
}

/* Exakt mittiger Hinweis – unabhängig davon, wie breit Titel oder Buttons sind. */
.page-customer .edit-mode-indicator {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 6px 14px;
    border: 1px solid goldenrod;
    border-radius: 7px;
    background-color: rgba(255, 235, 205, 0.95);
    color: #111;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 0 10px rgba(218, 165, 32, 0.45);
}

.page-customer.edit-mode .edit-mode-indicator {
    display: block;
}

/* Wichtige Korrektur: Die allgemeinen Feld-Layoutregeln dürfen edit-only nicht
   sichtbar machen. Außerhalb des Bearbeitungsmodus bleiben diese Elemente verborgen. */
.page-customer:not(.edit-mode) .edit-only {
    display: none !important;
}

/* Die Startseite behält weiterhin ihr bisheriges mainmiddle-Layout. */
.page-index .mainmiddle {
    /* absichtlich keine neue Breiten-/Margin-Regel */
}

@media (max-width: 599px) {
    /* Auf Smartphones ist die Desktop-Navbar ausgeblendet; die Section kann daher
       direkt am oberen Bildschirmrand anheften. */
    .section,
    .page-customer .customer-toolbar {
        top: 0;
    }

    .page-customer .edit-mode-indicator {
        position: static;
        transform: none;
        align-self: stretch;
        order: 2;
        width: 100%;
        margin-top: 4px;
        text-align: center;
    }

    .page-customer .customer-toolbar-actions {
        order: 3;
    }
}

@media (min-width: 600px) and (max-width: 900px) {
    /* Auf schmaleren Tablets bleibt der Hinweis mittig, ohne mit dem Titel zu kollidieren. */
    .page-customer.edit-mode #customer-title {
        max-width: 32%;
    }

    .page-customer.edit-mode .customer-toolbar-actions {
        max-width: 40%;
    }
}


/* =========================================================
   DESIGNANPASSUNGEN 15.09.2026 – Revision 3
   - Startseite wieder ohne Hauptnavigation
   - Bearbeitungsmodus-Hinweis im Meldungsstil gelb/orange
   - Kunde kann in der Entwicklungsphase endgültig gelöscht werden
   - kind_links in der Kundenansicht auf Desktop um 25 % verschmälert
   ========================================================= */

/* Der Bearbeitungsmodus-Hinweis orientiert sich optisch an .form-error,
   verwendet aber eine gelb-orange Warnfarbe. */
.page-customer .edit-mode-indicator {
    padding: 10px 16px;
    border: 1px solid #e5a323;
    border-radius: 7px;
    background-color: rgba(229, 163, 35, 0.22);
    color: #ffe0a3;
    font-weight: 700;
    box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.35);
}

/* Löschen ist absichtlich deutlich destruktiver gestaltet als Archivieren. */
.page-customer .customer-toolbar .delete-customer-button {
    border: 1px solid #d9534f;
    background-color: rgba(145, 26, 26, 0.92);
    color: #fff;
}

.page-customer .customer-toolbar .delete-customer-button:hover,
.page-customer .customer-toolbar .delete-customer-button:focus {
    background-color: #d9534f;
    color: #fff;
    box-shadow: 0 0 12px rgba(217, 83, 79, 0.65);
}

/* Auf Desktop war kind_links bisher 30 % breit. 25 % schmaler = 22,5 %.
   kind_rechts erhält die frei werdende Breite. Mobile Layouts bleiben unverändert. */
@media (min-width: 992px) {
    .page-customer #kind_links,
    .page-customer-edit #kind_links {
        width: 22.5%;
    }

    .page-customer #kind_rechts,
    .page-customer-edit #kind_rechts {
        width: 77.5%;
    }
}

/* Benutzerkonten und Anmeldung */
.page-customer .copy-value { display:inline-flex; align-items:center; gap:5px; max-width:100%; vertical-align:middle; }
.page-customer .copy-value > span { min-width:0; overflow-wrap:anywhere; }
.page-customer .copy-value-button { display:inline-flex; flex:none; align-items:center; justify-content:center; width:26px; height:26px; padding:4px; margin:0; border:1px solid currentColor; border-radius:4px; background:transparent; color:inherit; cursor:pointer; vertical-align:middle; }
.page-customer .copy-value-button svg { fill:none; stroke:currentColor; stroke-width:1.6; }
.page-customer .copy-value-button:hover:not(:disabled) { background:#b38a3930; }
.page-customer .copy-value-button:focus-visible { outline:2px solid #ac013c; outline-offset:2px; }
.page-customer .copy-value-button:disabled { opacity:.3; cursor:default; }
.page-customer.edit-mode .copy-value-button { display:none !important; }
.copy-feedback { position:fixed; z-index:1000; left:50%; bottom:24px; transform:translateX(-50%); max-width:calc(100vw - 32px); padding:12px 18px; border-radius:6px; background:#171717; color:#fff; box-shadow:0 3px 15px #0006; opacity:0; pointer-events:none; }
.copy-feedback.is-visible { opacity:1; }
.page-customer .copy-clipboard-buffer { position:fixed; left:-9999px; top:0; width:1px; height:1px; padding:0; opacity:0; }
.page-customer .customer-summary-panel #logofremdfirma[hidden],
.page-customer #customer-logo-placeholder[hidden] { display:none; }
.page-customer #customer-logo-placeholder { color:#555; font-size:14px; padding:12px 0; }
.page-add #selected-logo-preview { display:block; width:160px; height:100px; object-fit:contain; margin:8px 0; background:#fff; border-radius:6px; }
.page-add #selected-logo-preview[hidden] { display:none; }
.page-add .logo-upload-hint { color:#d0c6b6; font-size:12px; margin:6px 0 14px; }
.admin-nav { position:relative; z-index:50; }
.admin-nav summary { cursor:pointer; }
.navlink[aria-current="page"],
.admin-nav[data-active="true"] > summary,
.admin-nav-mobile[data-active="true"] > summary {
    text-decoration:underline;
    text-decoration-thickness:2px;
    text-underline-offset:5px;
    font-weight:700;
}
.page-auth .auth-role-filter { margin:4px 0 20px; }
.page-auth .auth-role-filter fieldset { display:flex; flex-wrap:wrap; gap:10px 16px; padding:12px; border:1px solid #655437; border-radius:6px; }
.page-auth .auth-role-filter legend { padding:0 5px; font-size:14px; }
.page-auth .auth-role-filter .auth-role-option { display:flex; align-items:center; gap:7px; margin:0; cursor:pointer; }
.page-auth .auth-role-filter .auth-role-option input[type="radio"] { display:inline-block; width:16px; height:16px; min-height:0; padding:0; margin:0; accent-color:#e1b65d; box-shadow:none; }
.page-auth .auth-role-filter button { margin-top:10px; padding:7px 14px; }
.admin-nav-menu { position:absolute; top:100%; left:0; min-width:220px; padding:8px; background:#333; border:1px solid #7b6337; box-shadow:0 8px 16px #0008; }
.admin-nav-menu .navlink { display:block; }
.admin-nav-mobile summary { cursor:pointer; color:antiquewhite; }
.admin-nav-mobile p { padding-left:14px; }
.logs-filter { display:grid; grid-template-columns:2fr 1fr 1fr 1.4fr; gap:16px; align-items:end; }
.page-auth .logs-filter input, .page-auth .logs-filter select { height:auto; min-height:44px; }
.logs-filter-actions { grid-column:1 / -1; display:flex; align-items:center; gap:18px; margin-bottom:16px; }
.logs-filter-actions button { margin-top:0; }
.logs-table { min-width:960px; }
.logs-table td { overflow-wrap:anywhere; max-width:300px; }
.logs-pagination { display:flex; justify-content:space-between; gap:20px; margin-top:20px; }
@media(max-width:900px) { .logs-filter { grid-template-columns:1fr 1fr; } }
@media(max-width:600px) { .logs-filter { grid-template-columns:1fr; } }
.auth-bar { position:relative; z-index:40; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 20px; background:#171717; color:#f6ead7; font-size:14px; border-bottom:1px solid #7b6337; }
.auth-bar-links { display:flex; align-items:center; flex-wrap:wrap; gap:18px; }
.auth-bar a,.page-auth a { color:#f3ce83; }
.auth-bar form { margin:0; }
.auth-bar button { border:1px solid #b28b47; background:transparent; color:#f6ead7; padding:6px 12px; border-radius:5px; cursor:pointer; }
.page-auth { background:#232222; min-height:100vh; }
.auth-header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px max(24px,calc((100vw - 1320px)/2)); background:linear-gradient(120deg,#0c0c0c,#574726); color:#f0dec0; }
.auth-header img { width:200px; height:70px; object-fit:contain; }
.auth-main { max-width:1320px; margin:34px auto; padding:0 24px 40px; }
.auth-main h1 { font-size:30px; margin:0 0 18px; color:#ffe1a9; }
.auth-main h2 { font-size:21px; margin-bottom:16px; }
.auth-main p { line-height:1.55; margin-bottom:16px; }
.auth-card { background:#302f2d; border:1px solid #655437; border-radius:12px; padding:26px; min-width:0; }
.auth-login { max-width:520px; margin:28px auto; }
.auth-columns { display:grid; grid-template-columns:1.2fr 1fr; gap:24px; margin-top:24px; }
.page-auth form label { display:block; font-size:14px; font-weight:bold; margin:18px 0 7px; }
.page-auth form input:not([type=hidden]):not([type=checkbox]),.page-auth form select { display:block; width:100%; max-width:100%; padding:11px; background:#fffaf0; color:#171717; border:1px solid #b5a27b; border-radius:5px; font:inherit; }
.page-auth form select[multiple] { min-height:140px; }
.page-auth form .auth-checkbox { display:flex; gap:10px; align-items:center; }
.page-auth form input[type=checkbox] { width:18px; height:18px; }
.auth-card button { margin-top:22px; background:#e1b65d; color:#17120a; padding:12px 20px; font-weight:bold; border:0; border-radius:6px; cursor:pointer; }
.auth-card button:hover { background:#f2cd80; }
.auth-main :focus-visible,.auth-bar :focus-visible { outline:3px solid #efbd59; outline-offset:3px; }
.auth-error,.auth-success,.auth-notice { padding:14px 16px; border-radius:7px; border:1px solid; }
.auth-error { background:#511f22; color:#ffe0e2; border-color:#c96b71; }
.auth-success { background:#1f4633; color:#d6f6e4; border-color:#629d7e; }
.auth-notice { background:#503c18; color:#ffe3a8; border-color:#ba944e; }
.auth-muted { font-size:13px; color:#d0c6b6; margin-top:14px; }
.auth-table-wrap { overflow:auto; }
.auth-table { width:100%; border-collapse:collapse; color:#f3e8d7; }
.auth-table th,.auth-table td { padding:13px 9px; border-bottom:1px solid #5d5344; text-align:left; vertical-align:top; }
.auth-table small { overflow-wrap:anywhere; }
@media(max-width:900px) { .auth-columns { grid-template-columns:1fr; } }
@media(max-width:600px) { .auth-bar { align-items:flex-start; flex-direction:column; } .auth-header { padding:15px; flex-direction:column; gap:5px; } .auth-main { margin:22px auto; padding-inline:14px; } .auth-card { padding:18px; } .auth-bar-links { gap:12px; } }

/* =========================================================
   KUNDENANSICHT – TACTICAL-RMM-ORIENTIERTES WORKSPACE
   Wiederhergestellt aus dem funktionierenden Stand vom 26.09.2026.
   Benutzerverwaltung v7 wurde darauf aufgesetzt, nicht umgekehrt.
   ========================================================= */

.page-customer .customer-workspace {
    display: grid;
    grid-template-columns: minmax(180px, 15%) minmax(0, 1fr);
    align-items: start;
    width: 100%;
    max-width: none;
    margin: 0;
    overflow: visible;
    background-color: #1f2228;
    box-shadow: none;
}

/* Linke Kundenleiste */
.page-customer #kind_links.customer-sidebar {
    position: sticky;
    top: calc(var(--sticky-navbar-height) + var(--sticky-toolbar-height));
    align-self: start;
    width: 100%;
    max-height: calc(100vh - var(--sticky-navbar-height) - var(--sticky-toolbar-height));
    padding: 0;
    overflow: hidden;
    background-color: #22262d;
    color: #f2e4cb;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 1rem;
}

.page-customer .customer-list-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 54px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    background-color: #191c21;
}

.page-customer .customer-list-heading h2 {
    margin: 0;
    font-size: 1.05rem;
    color: #f6e9d2;
}

.page-customer .customer-list-heading span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 24px;
    padding-inline: 7px;
    border-radius: 12px;
    background-color: rgba(229, 163, 35, 0.2);
    color: #ffd58a;
    font-size: 0.82rem;
    font-weight: 700;
}

.page-customer .customer-list {
    max-height: calc(100vh - var(--sticky-navbar-height) - var(--sticky-toolbar-height) - 54px);
    overflow-y: auto;
    scrollbar-width: thin;
}

.page-customer .customer-list-item {
    display: grid;
    gap: 3px;
    padding: 11px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    color: #eee2ce;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.page-customer .customer-list-item:hover,
.page-customer .customer-list-item:focus-visible {
    background-color: #303641;
    outline: none;
}

.page-customer .customer-list-item.is-current {
    border-left: 4px solid #e5a323;
    padding-left: 12px;
    background-color: #353b46;
}

.page-customer .customer-list-number {
    color: #d9a845;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.page-customer .customer-list-name {
    overflow: hidden;
    color: #f6f1e8;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-customer .customer-list-empty {
    padding: 18px 16px;
    color: rgba(255, 255, 255, 0.62);
}

/* Rechte Arbeitsfläche */
.page-customer #kind_rechts.customer-detail {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 22px;
    background-color: #2b2d31;
    color: #252525;
}

.page-customer .customer-summary-panel,
.page-customer .customer-documentation-workspace {
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    background-color: rgba(255, 235, 205, 0.96);
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.22);
}

.page-customer .customer-summary-panel {
    display: grid;
    grid-template-columns: minmax(190px, 280px) minmax(0, 1fr);
    gap: 20px 12px;
    padding: 20px;
}

.page-customer .customer-summary-heading {
    display: flex;
    grid-column: 1 / -1;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(44, 44, 44, 0.18);
}

.page-customer .customer-summary-heading h2 {
    margin: 3px 0 0;
    color: #242424;
    font-size: 1.4rem;
}

.page-customer .panel-eyebrow {
    color: #7b5a14;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.page-customer .customer-number-badge {
    flex: 0 0 auto;
    padding: 6px 10px;
    border: 1px solid rgba(172, 1, 60, 0.32);
    border-radius: 6px;
    background-color: rgba(172, 1, 60, 0.08);
    color: #660123;
    font-weight: 700;
}

.page-customer .customer-summary-panel #logofremdfirmacontainer {
    grid-column: 1;
    flex-direction: column;
    align-self: start;
    gap: 10px;
    align-items: flex-start;
    justify-content: flex-start;
}

.page-customer .customer-summary-panel #logofremdfirma {
    width: 100%;
    max-width: 280px;
    max-height: 190px;
    border: 1px solid rgba(44, 44, 44, 0.28);
    border-radius: 6px;
    background-color: #fff;
    object-fit: contain;
}

.page-customer .customer-summary-panel .logo-upload-area {
    width: 100%;
    margin-top: 0;
}

.page-customer .customer-summary-panel .logo-upload-area .file-upload {
    width: 100%;
}

.page-customer .customer-summary-panel #kundendatencontainer {
    display: grid;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin-inline: 0;
    grid-column: 2;
    grid-row: 2;
    grid-template-columns: repeat(3, minmax(150px, 1fr));
    gap: 18px 22px;
    align-content: start;
    padding: 0;
}

.page-customer .customer-summary-panel .customer-item {
    min-width: 0;
    margin: 0;
    padding: 12px;
    border: 1px solid rgba(44, 44, 44, 0.13);
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.27);
}

.page-customer .customer-summary-panel .customer-item h4 {
    margin-bottom: 7px;
    color: #553f0d;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.035em;
}

.page-customer .customer-summary-panel .customer-item p {
    margin: 0;
}

.page-customer .customer-summary-panel .contact-display p + p {
    margin-top: 4px;
}

.page-customer .customer-summary-panel .customer-field,
.page-customer .customer-summary-panel .address-fields .customer-field,
.page-customer .customer-summary-panel .contact-edit-fields .customer-field,
.page-customer .customer-summary-panel .customer-textarea {
    width: 100%;
}

/* Bearbeitungsoptionen bleiben oberhalb der Stammdaten. */
.page-customer #kind_rechts.customer-detail > .edit-panel {
    margin: 0 0 22px;
    padding: 18px 20px;
    border: 1px solid rgba(229, 163, 35, 0.55);
    border-radius: 8px;
    background-color: rgba(255, 235, 205, 0.96);
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.22);
}

.page-customer #kind_rechts.customer-detail > .edit-panel > p {
    margin: 8px 0 16px;
}

/* Dokumentations-Tabs */
.page-customer .customer-documentation-workspace {
    margin-top: 22px;
    overflow: visible;
}

.page-customer .customer-tabs {
    position: sticky;
    top: calc(var(--sticky-navbar-height) + var(--sticky-toolbar-height));
    z-index: 900;
    display: flex;
    gap: 0;
    width: 100%;
    overflow-x: auto;
    border-bottom: 1px solid #11151a;
    border-radius: 8px 8px 0 0;
    background-color: #20242b;
    scrollbar-width: thin;
}

.page-customer .customer-tab {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 17px;
    border: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 3px solid transparent;
    background: transparent;
    color: #d9d9d9;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
}

.page-customer .customer-tab:hover,
.page-customer .customer-tab:focus-visible {
    background-color: #2d333d;
    color: #fff;
    outline: none;
}

.page-customer .customer-tab.is-active {
    border-bottom-color: #e5a323;
    background-color: #343a44;
    color: #ffd58a;
}

.page-customer .customer-tab-panels {
    min-height: 260px;
    padding: 22px;
}

/* Das native hidden-Attribut hat Vorrang. So ist immer genau ein Panel sichtbar. */
.page-customer .customer-tab-panels .tab-panel[hidden],
.page-customer .customer-tab[hidden] {
    display: none !important;
}

.page-customer.tabs-enhanced .customer-tab-panels .tab-panel {
    display: none;
}

.page-customer.tabs-enhanced .customer-tab-panels .tab-panel.is-active:not(.hidden):not([hidden]) {
    display: block;
}

.page-customer .customer-tab-panels .enkelrechts {
    padding: 0;
    border: 0;
}

.page-customer .customer-tab-panels .enkelrechts > h2 {
    margin: 0 0 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(44, 44, 44, 0.18);
}

.page-customer .customer-documentation-workspace .document-export {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 0 22px 22px;
}

.page-customer .customer-documentation-workspace .document-export .button {
    width: auto;
    margin: 0;
}

/* Toolbar: kein Ueberschneiden von Titel, Bearbeitungs-Hinweis und Buttons. */
.page-customer .customer-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 18px;
    row-gap: 6px;
}

.page-customer #customer-title {
    grid-column: 1;
    grid-row: 1;
}

.page-customer .customer-toolbar-actions {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}

.page-customer .edit-mode-indicator {
    position: static;
    left: auto;
    top: auto;
    grid-column: 1 / -1;
    grid-row: 2;
    max-width: 100%;
    margin: 0;
    transform: none;
    justify-self: center;
    white-space: normal;
    text-align: center;
}

@media (min-width: 1300px) {
    .page-customer .customer-toolbar {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        grid-template-rows: auto;
    }
    .page-customer #customer-title { grid-column: 1; grid-row: 1; }
    .page-customer .edit-mode-indicator { grid-column: 2; grid-row: 1; }
    .page-customer .customer-toolbar-actions { grid-column: 3; grid-row: 1; justify-self: end; }
}

@media (max-width: 1100px) {
    .page-customer .customer-summary-panel #kundendatencontainer {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }
}

@media (max-width: 991px) {
    .page-customer .customer-workspace { grid-template-columns: 1fr; }
    .page-customer #kind_links.customer-sidebar {
        position: relative;
        top: auto;
        max-height: none;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }
    .page-customer .customer-list {
        display: flex;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
    }
    .page-customer .customer-list-item {
        flex: 0 0 220px;
        border-right: 1px solid rgba(255, 255, 255, 0.08);
        border-bottom: 0;
    }
    .page-customer .customer-list-item.is-current {
        border-left: 0;
        border-bottom: 4px solid #e5a323;
        padding-left: 16px;
        padding-bottom: 7px;
    }
}

@media (max-width: 768px) {
    .page-customer #kind_rechts.customer-detail { padding: 12px; }
    .page-customer .customer-summary-panel { grid-template-columns: 1fr; padding: 14px; }
    .page-customer .customer-summary-heading,
    .page-customer .customer-summary-panel #logofremdfirmacontainer,
    .page-customer .customer-summary-panel .logo-upload-area,
    .page-customer .customer-summary-panel #kundendatencontainer {
        grid-column: 1;
        grid-row: auto;
    }
    .page-customer .customer-summary-panel #logofremdfirmacontainer { align-items: center; }
    .page-customer .customer-summary-panel #kundendatencontainer { grid-template-columns: 1fr; }
    .page-customer .customer-summary-heading { align-items: flex-start; flex-direction: column; }
    .page-customer .customer-tabs { position: relative; top: auto; }
    .page-customer .customer-tab-panels { padding: 16px; }
    .page-customer .customer-documentation-workspace .document-export {
        align-items: stretch;
        flex-direction: column;
        padding: 0 16px 16px;
    }
    .page-customer .customer-documentation-workspace .document-export .button { width: 100%; }
    .page-customer .customer-toolbar {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }
    .page-customer #customer-title,
    .page-customer .edit-mode-indicator,
    .page-customer .customer-toolbar-actions { grid-column: 1; }
    .page-customer #customer-title { grid-row: 1; }
    .page-customer .edit-mode-indicator { grid-row: 2; width: 100%; }
    .page-customer .customer-toolbar-actions { grid-row: 3; }
}

/* Archiv im gleichen Workspace-Design */
.page-archive .archive-list-date {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.76rem;
}

.page-archive .archive-overview-panel {
    padding: 24px;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    background-color: rgba(255, 235, 205, 0.96);
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.22);
}

.page-archive .archive-overview-panel h2 { margin-bottom: 10px; }
.page-archive .archive-overview-panel p { max-width: 760px; line-height: 1.55; }
.page-archive .archive-stat {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding: 10px 14px;
    border: 1px solid rgba(172, 1, 60, 0.25);
    border-radius: 6px;
    background-color: rgba(172, 1, 60, 0.07);
}
.page-archive .archive-stat strong { color: #660123; font-size: 1.15rem; }


/* =========================================================
   KUNDENÜBERSICHT OHNE AUSGEWÄHLTEN KUNDEN – 27.09.2026
   Die Kundenliste bleibt links sichtbar; rechts bleibt der Workspace bewusst leer.
   ========================================================= */
.page-customer .customer-no-selection .customer-detail-empty {
    align-self: stretch;
    min-height: 420px;
}


/* =========================================================
   BENUTZERVERWALTUNG – INTERAKTIVE MASTER/DETAIL-ANSICHT
   27.09.2026
   ========================================================= */
.page-auth .auth-user-management {
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
}

.page-auth .auth-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.page-auth .auth-card-heading h2 {
    margin-bottom: 0;
}

.page-auth .auth-create-user-action,
.page-auth .auth-edit-user-action {
    flex: 0 0 auto;
    margin: 0;
}

.page-auth .auth-create-user-action button,
.page-auth .auth-edit-user-action button,
.page-auth .auth-primary-button,
.page-auth .auth-secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    margin: 0;
    padding: 10px 16px;
    border-radius: 6px;
    font-weight: 700;
    text-decoration: none;
}

.page-auth .auth-primary-button,
.page-auth .auth-create-user-action button,
.page-auth .auth-edit-user-action button {
    border: 0;
    background: #e1b65d;
    color: #17120a;
}

.page-auth .auth-primary-button:hover,
.page-auth .auth-create-user-action button:hover,
.page-auth .auth-edit-user-action button:hover {
    background: #f2cd80;
    color: #17120a;
}

.page-auth .auth-secondary-button {
    border: 1px solid #b28b47;
    background: transparent;
    color: #f3ce83;
}

.page-auth .auth-user-row {
    cursor: pointer;
    transition: background-color .15s ease, box-shadow .15s ease;
}

.page-auth .auth-user-row:hover,
.page-auth .auth-user-row:focus-visible {
    background: rgba(225, 182, 93, 0.12);
    outline: none;
}

.page-auth .auth-user-row.is-selected {
    background: rgba(225, 182, 93, 0.18);
    box-shadow: inset 4px 0 0 #e1b65d;
}

.page-auth .auth-user-detail-card {
    min-height: 360px;
}

.page-auth .auth-user-protocol-heading {
    padding-bottom: 16px;
    border-bottom: 1px solid #5d5344;
}

.page-auth .auth-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: #c7ad7d;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.page-auth .auth-user-identity {
    margin: 6px 0 0;
}

.page-auth .auth-user-detail-card h3 {
    margin: 18px 0 12px;
    color: #ffe1a9;
}

.page-auth .auth-protocol-table td:first-child {
    white-space: nowrap;
}

.page-auth .auth-empty-detail {
    display: flex;
    min-height: 280px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.page-auth .auth-empty-detail p {
    max-width: 560px;
    color: #d0c6b6;
}

.page-auth .auth-form-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 22px;
}

.page-auth .auth-form-actions button {
    margin-top: 0;
}

@media (max-width: 1000px) {
    .page-auth .auth-user-management {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .page-auth .auth-card-heading,
    .page-auth .auth-user-protocol-heading {
        flex-direction: column;
        align-items: stretch;
    }

    .page-auth .auth-create-user-action button,
    .page-auth .auth-edit-user-action button,
    .page-auth .auth-primary-button,
    .page-auth .auth-secondary-button {
        width: 100%;
    }
}

/* =========================================================
   Kundenstammdaten v8 – drei Spalten, Ansprechpartner, Standorte
   ========================================================= */
.page-add .customer-data-column,
.page-add .contact-column,
.page-add .locations-column {
    flex: 1 1 0;
    width: 33.333%;
    min-width: 0;
    padding: 20px 2.5% 40px;
}

.page-add .customer-data-column,
.page-add .contact-column {
    border-right: 1px solid rgba(172, 1, 60, 0.35);
}

.page-add .customer-data-column h3,
.page-add .contact-column > .contact-person:first-child h3,
.page-add .locations-column > h3 {
    margin-bottom: 18px;
}

.page-add .locations-column input,
.page-add .locations-column label,
.page-add .gender-fieldset,
.page-add #selected-logo-name {
    width: 51%;
}

.page-add #selected-logo-name {
    min-height: 1.2em;
    margin-top: 8px;
    overflow-wrap: anywhere;
    color: rgb(110, 105, 119);
    font-size: 0.9rem;
}

.page-add .gender-fieldset,
.page-customer .contact-gender-fieldset {
    margin: 0 0 8px;
    padding: 0;
    border: 0;
}

.page-add .gender-fieldset legend,
.page-customer .contact-gender-fieldset legend {
    margin-bottom: 7px;
    font-weight: 700;
}

.page-add .gender-fieldset label,
.page-customer .contact-gender-fieldset label {
    display: inline-flex;
    width: auto;
    align-items: center;
    gap: 6px;
    margin: 0 16px 5px 0;
    cursor: pointer;
}

.page-add .gender-fieldset input[type="radio"],
.page-customer .contact-gender-fieldset input[type="radio"] {
    width: auto;
    height: auto;
    margin: 0;
}

.page-add .location-card {
    margin-bottom: 24px;
    padding-bottom: 22px;
    border-bottom: 2px solid rgba(172, 1, 60, 0.55);
}

.page-add .location-card-header,
.page-customer .customer-location-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.page-add .remove-location-button,
.page-customer .remove-customer-location-button {
    width: auto;
    padding: 6px 10px;
    border: 1px solid #8c2020;
    border-radius: 6px;
    background: rgba(140, 32, 32, 0.12);
    color: #d34b4b;
    cursor: pointer;
}

.page-add .remove-location-button:hover,
.page-customer .remove-customer-location-button:hover {
    box-shadow: 1px 1px 12px red;
}

.page-add .add-location-button,
.page-customer .add-customer-location-button {
    width: auto;
    min-width: 220px;
    margin: 16px 0 0;
    padding-inline: 14px;
    cursor: pointer;
}

.page-customer .customer-homepage-link {
    color: #8b4b00;
    overflow-wrap: anywhere;
}

.page-customer .contact-gender-fieldset {
    width: 100%;
    margin-top: 12px;
}

.page-customer .customer-location-card {
    margin-top: 15px;
    padding: 14px;
    border: 1px solid rgba(44, 44, 44, 0.28);
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.14);
}

.page-customer .customer-location-card:first-child {
    margin-top: 10px;
}

.page-customer .customer-location-card .address-fields {
    margin-top: 10px;
}

.page-customer .locations-customer-block {
    grid-column: 1 / -1;
}

.page-customer .locations-customer-block #customer-location-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 14px;
}

.page-customer .locations-customer-block .customer-location-card {
    margin-top: 0;
}

.page-customer .customer-location-card .address-fields .customer-field {
    width: 100%;
}

@media (max-width: 991px) {
    .page-add .mainmiddle {
        flex-direction: column;
    }

    .page-add .customer-data-column,
    .page-add .contact-column,
    .page-add .locations-column {
        width: 100%;
        padding: 24px 5% 32px;
        border-right: 0;
        border-bottom: 1px solid rgba(172, 1, 60, 0.35);
    }

    .page-add .locations-column {
        border-bottom: 0;
    }

    .page-customer .locations-customer-block #customer-location-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .page-add .locations-column input,
    .page-add .locations-column label,
    .page-add .gender-fieldset,
    .page-add #selected-logo-name,
    .page-customer .contact-gender-fieldset {
        width: 51%;
    }

    .page-add .location-card-header,
    .page-customer .customer-location-header {
        align-items: flex-start;
        flex-direction: column;
    }
}