/* ============================================================= Page Index ====================== */

/* ======================================= Desktop Ansicht =============================== */
@media screen and (min-width:1200px) {

    #Index-Page-Child-Container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 50px;
        padding: 10px;
    }
    
    #Index-Page-Child-Container2 ul li {
        list-style: none;
        padding: 15px;
        margin-top: 5px;
        border-radius: 25px;
        background-color:  var(--primary-color);
        text-align: center;
        color: white;
        text-transform: uppercase;
    }

    #Index-Page-Child-Container-Text1 {
        font-size: 1.5em;
        line-height: 1.5em;
    }

    #Index-Page-Child-Container-Text2 {
        margin-top: 20px;
    }

    #Index-Page-Child-Container-Text3 {
        margin-top: 15px;
    }

    #Index-Page-Child-Container-Text4{
        margin-top: 15px;
    }

    #Index-Page-Chiild-Container-Picture{
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #Index-Page-Child-Container2 {
        margin-top: 30px;
        display: flex;
        justify-content: center; /* schiebt Inhalt nach rechts */
    }

    #Index-Page-Child-Container2 ul{
        display: flex;
        gap:20px;
    }

    #Index-Page-Child-Container2 ul li a {
        color: white;
    }

    #Index-Page-Child-Container2 ul li a:hover {
        text-decoration: none;
        cursor: pointer;
    }

    #Personendaten-Container {
        display: grid;
        gap: 1rem;
        grid-template-columns: repeat(2, 2fr);
        max-width: 500px;
	    margin-left: 1.5rem;
        grid-template-areas:    
                                "anrede ."
                                "vorname nachname"
                                "geburtsdatum telefon";
    }

    #Anrede-Container {
        grid-area: anrede;
    }

    #Vorname-Container {
        grid-area: vorname;
    }

    #Nachname-Container {
        grid-area: nachname;
    }

    #Geburtsdatum-Container {
        grid-area: geburtsdatum;
    }

    #Telefon-Container {
        grid-area: telefon;
    }

    #IstPatientDerPraxis-Container {
        margin-top: 1rem;
	    margin-left: 1.5rem;
    }

    #Submitbutton-Container {
        margin-top: 3rem;
    }

    .FormSectionTitle {
        margin-bottom: 0.75rem;
    }
    
    .LableFormPair {
        display: grid;
        grid-auto-rows: max-content;
        row-gap: 0.25rem;
        margin-right: 1rem;
        margin-bottom: 1.5rem;
    }

    .Inline {
        display: flex;
        gap: 0.3rem;
    }

    .TextBox {
        width: 15rem;
        height: 1.5rem;
    }

    .Combobox {
        height: 1.745rem;
    }

    .CheckBox-Container {
        display: flex;
        gap: 0.5rem;
    }

    .CheckBox {
        width: 1rem;
        height: 1rem;
    }

    .TextArea {
        max-width: 62rem;
        height: 8rem;
    }

    .preview-thumb {
        width: 20px;              /* feste Vorschaubreite */
        height: 20px;             /* feste Vorschauhöhe */
        object-fit: cover;         /* zentraler Zuschnitt, hält das Format stabil */
        border-radius: 6px;
        border: 1px solid #ddd;
    }

}

/* ============================================================= END Page Index ====================== */

/* ============================================================= Leistung Page ======================= */

@media screen and (min-width:1200px) {
    #Leistung-Page-Container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 50px;
    }
}

/* ============================================================= END Leistung Page ======================= */

/* ============================================================= Impressum Page ========================== */
@media screen and (min-width:1200px) {
    
    #Impressunm-Container h3 {
        color: var(--secondary-color);
    }

    #Impressunm-Container > section {
        margin-top: 25px;
    }
}

/* ============================================================= END Impressum Page ========================== */

/* ============================================================= Datenschutz Page ========================== */

@media screen and (min-width:1200px) {
    
    #Datenschutz-Container ul {
        margin-left: 35px;
    }
}

/* ============================================================= END Datenschutz Page ========================== */

/* ============================================================= Rezeptbestellung Page ========================== */

@media screen and (min-width:1200px) {
    
    #Rezeptbestellung-Info > p {
        margin-bottom: 1.25rem;
    }

    #Rezeptbestellung-Formulare-Container {
        margin-top: 4rem;
    }

    #MedicinDaten-Section{
        margin-top: 3rem;
    }

    #MedicinDatenTitle {
        display: flex;
        align-items: center;
    }

    #MedicinDaten-Info {
        margin-bottom: 1.5rem;
    }

    #MedicinDaten-Container {
        margin-left:2.5rem;
    }

    #MedicinDaten-Container > ol > li {
        margin-bottom: 1.5rem;
    }

    #MedicinDaten-Container > ol > li::marker {
        font-weight: bold;
    }

    #AddMoreMedicin{
        font-size: 16px;
        padding: 0 12px;
        margin-top: 0.25rem;
    }

    .MedicinItem {
        display: flex;
    }

    .MedicinItemRemoveButton {
        display: flex;
        align-items: center;
        margin-top: 0.25rem;
    }
}

/* ============================================================= END Rezeptbestellung Page ========================== */

/* ============================================================= Überweisung Page ========================== */
@media screen and (min-width:1200px) {
    
    #Ueberweisung-Info > p {
        margin-bottom: 1.25rem;
    }

    #Ueberweisung-Formulare-Container {
        margin-top: 4rem;
    }

    #Ueberweisungsgrund-Section {
        margin-top: 3rem;
    }

    #Ueberweisungsgrund-Container {
        margin-left: 1.5rem;
    }
}

/* ============================================================= Überweisung Page ========================== */

/* ============================================================= Kontaktformular Page ====================== */

@media screen and (min-width:1200px) {
    
    #Kontaktformular-Info > p {
        margin-bottom: 1.25rem;
    }

    #Kontaktformular-Formulare-Container {
        margin-top: 4rem;
    }

    #Kontaktformular-Section {
        margin-top: 3rem;
    }

    #Kontaktformular-Container {
        margin-left: 1.5rem;
    }

    #Kontaktformular-Anhaenge-Container{
        margin-top: 1rem;
        margin-bottom: 1.5rem;
    }

    #Kontaktformular-FilePreview {
        margin-left: 1.5rem;
        margin-top: 1rem;
    }

    #Kontaktformular-FilePreview > li > div {
        display: flex;
        line-height: 1.5rem;
    }

    #Kontaktformular-FilePreview > li > div > a {
        margin-left: 1.5rem;
    }
}

/* ============================================================= END Kontaktformular Page ====================== */


/* ============================================================= Success Pages ============================= */
@media screen and (min-width:1200px) {
    
    #Success-Container {
        margin:auto;
        width: 500px;
        display: flex;
        justify-content: center;
    }
}

/* ============================================================= Error Page ================================ */
@media screen and (min-width:1200px) {
    
    #Error-Container {
        margin:auto;
        width: 500px;
        display: flex;
        justify-content: center;
    }
}