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

/*   ================ Mobile Ansicht ============== */
@media screen and (max-width:1199.9999999999999999999999999px) {
    
    #Index-Page-Container {
        width: 100%;
        max-width: var(--Mobile-Width);
    }

    #Index-Page-Child-Container {
        display: block;
        padding: 10px;
            
    }

    #Index-Page-Child-Container > div:nth-of-type(2){
        margin-top: 30px;
    }

    #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: 20px;
        display: flex;
        justify-content: center; /* schiebt Inhalt nach rechts */
    }

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

    @media screen and (max-width:600px){
        #Personendaten-Container {
            display: flex;
            gap: 1rem;
            margin-left: 1.5rem;
            flex-wrap: wrap;
        }

        #Anrede-Container {
            width: 240px;
        }
    }
    

    #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-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 {
        min-width: 15rem;
        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 (max-width:1199.9999999999999999999999999px) {
    #Leistung-Page-Container {
        display: block;
    }

    #Leistung-Page-Container > section.Card {
        margin: 25px 20px;
    }
}

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

/* ============================================================= Impressum Page ========================== */
@media screen and (max-width:1199.9999999999999999999999999px) {
    
    #Impressunm-Container {
        margin-left: 25px;
    }

    #Impressunm-Container h3 {
        color: var(--secondary-color);
    }

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

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

/* ============================================================= Datenschutz Page ========================== */
@media screen and (max-width:1199.9999999999999999999999999px) {
    
    #Datenschutz-Container {
        margin: 0 25px;
    }

   #Datenschutz-Container ul {
        margin-left: 35px;
    }
}

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

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

@media screen and (max-width:1199.9999999999999999999999999px) {
    
    #Rezeptbestellung-Container{
        margin: 1.5rem;
    }
    
    #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;
    }

    .MedicinItemRemoveButton{
        display: flex;
        justify-content: flex-end;
        width: 15rem;
    }
}

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

/* ============================================================= Überweisung Page ========================== */
@media screen and (max-width:1199.9999999999999999999999999px) {
    
    #Ueberweisung-Container {
        margin: 1.5rem;
    }

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

/* ============================================================= Kontakformular Page ======================= */
@media screen and (max-width:1199.9999999999999999999999999px) {
    #Kontakt-Container {
        margin: 1.5rem;
    }

    #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;
        flex-wrap: wrap;
        line-height: 1.5rem;
    }

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

/* ============================================================= END Kontakformular Page ======================= */

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

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