/* Allgemeine Stile (bleiben größtenteils gleich) */
body {
    background-color: #f7f7f7;
    color: #1c1c1c;
    font-family: 'Roboto', Arial, Helvetica, 'Nimbus Sans L', sans-serif;
    font-size: 13px;
    margin: 0; /* Entferne Standard-Margins */
    padding: 0;
    box-sizing: border-box; /* Wichtig für responsives Verhalten */
}

.remove_link,
.remove_link:link,
.remove_link:visited,
.remove_link:hover,
.remove_link:focus,
.remove_link:active {
    color: inherit;
    text-decoration: none;
}

/* Header */
#header {
    position: relative; /* Bleibt relativ positioniert */
    width: 100%;
    height: 40px;
    background-color: #ebebeb;
    box-shadow: 0px -1px 0px 0px #dadada inset;
    /* Kein margin-top/left mehr, da 100% Breite */
}

#header_buttons_wrapper {
    position: relative;
    margin: 0 auto; /* Zentriert den Inhalt horizontal */
    max-width: 840px; /* Maximale Breite für größere Bildschirme */
    display: flex; /* Flexbox für einfachere Anordnung */
    justify-content: space-around; /* Verteilt die Buttons gleichmäßig */
}

.header_buttons {
    /* float: left;  Entfernt, da Flexbox verwendet wird */
    line-height: 40px;
    text-align: center;
    /* width: 70px;  Entfernt, Buttons passen sich an */
    flex: 1; /* Jeder Button nimmt gleich viel Platz ein */
    cursor: pointer;
    padding: 0 10px; /* Etwas Padding für bessere Touch-Bedienung */
    transition: background-color 0.2s; /* Sanfter Übergang */
}

.header_buttons[data-active="yes"] {
    background-color: #ffffff;
    box-shadow: 1px 0px 0px 0px #dadada inset, -1px 0px 0px 0px #dadada inset;
}

/* Hauptbereich */
#main {
    min-height: calc(100vh - 240px); /* Verwendet vh für volle Höhe */
    overflow: hidden;
    padding: 20px; /* Padding für mobilen Abstand */
    box-sizing: border-box;
}

.main_field {
    max-width: 840px;
    margin: 50px auto; /* Zentriert und mit Abstand oben/unten */
    background-color: #ffffff;
    position: relative;
    overflow: hidden;
    padding: 20px;
    border-radius: 10px;
    padding-bottom: 40px;
    box-shadow: 1px 1px 6px -3px #000000;
    display: none;
}

.main_field[data-id="ausweis"] {
    display: block;
}

.main_field_title {
    font-size: 25px;
    margin-left: 0;      /*Entferne margin-left*/
    margin-top: 0;       /*Entferne margin-top*/
    color: #0071bb;
    text-align: center; /* Zentriert den Titel */
}

.main_field_title_description {
    font-size: 20px;
    margin-left: 0;   /*Entferne margin-left*/
    margin-top: 10px;
    margin-bottom: 35px;
    text-align: center; /* Zentriert die Beschreibung */
}

/* Ausweis-spezifische Stile */
#ausweis_parts_wrapper {
    width: 100%;
    height: auto;       /*Entferne fixe höhe*/
    box-shadow: 0px 1px 0px 0px #ececec, 0px -1px 0px 0px #ececec;
    display: flex;      /*Verwende Flexbox*/
    flex-wrap: wrap;    /*Erlaube Zeilenumbruch*/
}

.ausweis_parts {
    /* height: 50px;  Entfernt, passt sich dem Inhalt an */
    width: 100%;     /*Volle Breite auf kleinen Bildschirmen*/
    /* float: left;  Entfernt */
    text-align: center;
    /* line-height: 50px;  Entfernt, da Höhe automatisch */
    font-size: 20px;
    cursor: pointer;
    padding: 15px 0;  /*Vertikales Padding*/
    box-sizing: border-box;
}
.ausweis_parts:nth-child(odd){
    border-right: 1px solid #ececec;
}

/* Media Query für größere Bildschirme */
@media (min-width: 600px) {
    .ausweis_parts {
        width: 33.333%; /* 1/3 Breite auf größeren Bildschirmen */

    }
    .ausweis_parts:nth-child(odd){
        border-right: none;
    }
}

.ausweis_parts[data-active="yes"] {
    color: #0071bb;
    font-weight: bold;
}


.ausweis_parts_inner {
    padding: 0 30px; /* Links/Rechts-Padding */
    display: none;
    width: 100%;     /*Volle Breite*/
    box-sizing: border-box;
}

.ausweis_parts_inner[data-id="person"] {
    display: block;
}

.ausweis_parts_inner_input {
    min-height: 60px;
    margin-top: 30px;
    width: 100%;       /*Volle Breite auf kleinen Bildschirmen*/
    /* float: left;  Entfernt */
    box-sizing: border-box;

}
/* Media Query für größere Bildschirme */
@media (min-width: 600px) {
    .ausweis_parts_inner_input{
        width: 50%;
        float: left;
    }
}
.inputs {
    margin-top: 10px;
    border: 1px solid #cccccc;
    border-radius: 6px;
    height: 40px;
    width: 100%;      /*Volle Breite*/
    max-width: 300px;  /*Maximale Breite*/
    padding: 10px;
    line-height: 40px;
    box-sizing: border-box;
}

.button {
    display: block;
    height: 40px;
    width: 100%;      /*Volle Breite*/
    max-width: 300px;
    background-color: #0071bb;
    color: #ececec;
    border-radius: 10px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
}

.button_second {
    background-color: #db6623;
}
#current_persons, #payment_contact_data, #payment_overview {

    text-align: center; /* Zentriert den Inhalt */
}
#current_persons{
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Zentriert horizontal */
    gap: 10px; /* Abstand zwischen den Elementen */
    width: 100%; /* Volle Breite */
}

.current_persons_inner {
    background-color: #0071bb;
    color: #ffffff;
    padding: 10px;
    padding-right: 30px;
    border-radius: 6px;
    /* display: inline-block;  Nicht mehr benötigt */
    position: relative;
    /* margin-bottom: 5px; Entfernt, da gap verwendet wird */
    line-height: 20px;
}

.current_persons_inner_remove {
    height: 35px;
    width: 30px;
    position: absolute;
    top: 0;
    right: 0;
    text-align: center;
    line-height: 35px;
    font-weight: bold;
    cursor: pointer;
}

.payment_person_inner {
    background-color: #ffffff;
    box-shadow: 1px 1px 6px -3px #000000;
    color: #1c1c1c;
    padding: 10px;
    padding-right: 30px;
    border-radius: 6px;
    /* display: inline-block; Nicht mehr benötigt */
    position: relative;
    /*  margin-bottom: 5px;  Entfernt, da gap verwendet wird */
    line-height: 20px;
}

#payment_contact_data,
#payment_overview
{
    margin-bottom: 10px;
    box-shadow: 1px 1px 6px -3px #000000;
    padding: 10px 15px;
    display: block;

    border-radius: 10px;
    line-height: 25px;
    width: 100%;
    box-sizing: border-box;
}

#payment_overview_info {
    margin-top: 10px;
    margin-bottom: 20px;
    text-align: center;
}


.payment_titles {
    position: relative;
    margin-left: 0;     /*Entferne margin-left*/
    font-size: 16px;
    margin-bottom: 10px;
    margin-top: 20px;
    font-weight: bold;
    text-align: center;
}

#payment_alert {
    background-color: #e1f7ff;
    border: 1px solid #a2ebff;
    padding: 10px;
    border-radius: 10px;
    text-align: center;
}

.checkboxes_wrapper {
    padding: 10px;
    line-height: 20px;
    text-align: left;
}

#sign_name{
    text-align: center;
    font-weight: bold;
}

#signature_pad {
    background-color: #f0f0f0;
    width: 100%;      /*Volle Breite*/
    max-width: 600px;  /*Maximale Breite*/
    height: auto;     /*Automatische Höhe*/
    display: block;
    margin: 0 auto;
}

#clear_signature {
    margin-top: 5px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
}

/* Footer */
#footer {
    position: relative;
    width: 100%;
    height: auto;       /*Entferne fixe Höhe*/
    min-height: 200px;
    background-color: #252525;
    color: #ececec;
    padding: 20px;        /*Padding für Inhalt*/
    box-sizing: border-box;
    display: flex;
    flex-direction: column; /* Elemente untereinander */
    align-items: center;
    justify-content: space-between;
}

#footer_company {
    color: #acacac;
    font-size: 15px;
    /* position: absolute;
     bottom: 25px;
     left: 25px;  Entfernt, da Flexbox verwendet wird */
    order: 2;       /*Unten anzeigen*/
    margin-top: 20px;  /*Abstand nach oben*/
}

#footer_wrapper {
    /* position: absolute;
    right: 25px;
    bottom: 25px; Entfernt */
    order: 1;   /*Oben anzeigen*/
    display: flex; /* Flexbox für Links */
    flex-wrap: wrap; /* Umbruch bei Bedarf */
    justify-content: center; /* Zentriert die Links */
    gap: 10px; /* Abstand zwischen den Links */
}

.footer_inner {
    /* position: relative;
       float: left; Entfernt */
    color: #acacac;
    font-size: 15px;
    /* margin-left: 10px;
     margin-right: 10px;  Entfernt, da gap verwendet wird */

}
/*Zusätzliche Verbesserungen*/

/* Bessere Schriftgrößen-Skalierung */
body {
    font-size: 16px; /* Basisgröße */
}

@media (max-width: 768px) {
    body {
        font-size: 14px; /* Kleinere Schrift auf kleineren Bildschirmen */
    }
}

/* Verbesserte Button-Hover-Effekte */
.button:hover {
    opacity: 0.9; /* Leicht transparenter beim Hover */
    transition: opacity 0.2s;
}

/* Allgemeine Verbesserungen */
*, *::before, *::after {
    box-sizing: inherit; /* Vererbt box-sizing */
}

#payment_person_data {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}