@media (min-width: 1024px) {
    * {
        margin: 0;
        padding: 0;
        font-family: "Inter";
        font-weight: 400;
    }
    body {
        position: relative;
        margin-left: 15vh;
        margin-right: 15vh;
        background-color: #ffedc7;
    }
    h2 {
        font-family: "Sora";
        font-size: 3.875em;
        color: #4d386b;
    }
    .überschrift {
        margin-bottom: 5vh;
    }
    .übermichtext {
        margin-bottom: 5vh;
    
    }
    .logo {
        max-width: 100%;
        height: 150px;
        margin-left: 135vh;
        margin-bottom: 15vh;
        position: sticky;
    }
    .start {
        margin-top: 25vh;
        position: relative;
        text-align: center;
        overflow: hidden;
    }
    .background-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 50vh;
        overflow: hidden;
        z-index: -1;
    }
    .backgroundbildtextjpeg {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.5;
        z-index: -1;
    }
    .susi {
        font-family: "Sora";
        margin-top: 4vh;
        font-size: 5.875em;
        margin-bottom: 4vh;
    }
    .susitext {
        font-size: 1.875em;
        font-family: "Inter";
    }
    #susitextbot {
        margin-bottom: 50vh;
    }
    .susitext, .susi {
        position: relative;
        z-index: 1;
        color: #4d386b;
        margin-top: 6vh;
    }
    .PageBody {
        margin-left: auto;
        display: block;
    }
    .bullet {
        margin-left: 1vh;
        list-style: none;
        margin-bottom: 5vh;
    }
    li::before {
        content: "";
        display: inline-block;
        width: 30px;
        height: 30px;
        background-image: url("images/blümchen.png");
        background-size: contain;
        background-repeat: no-repeat;
        margin-right: 1vh;
    }
    .haarentfernung {
        font-size: 1.875em;
        font-family: "Inter";
        text-align: center;
        margin-bottom: 3vh;
    }
    .pricing-table {
        width: 70%;
        margin: 0 auto;
        border-collapse: collapse;
    }
    .pricing-table th, .pricing-table td {
        border: 1px solid #ccc;
        padding: 10px;
        text-align: left;
    }
    .pricing-table th {
        background-color: #a699b5;
        color: white;
    }
    .pricing-table th:nth-child(2) {
        background-color: #a699b5;
    }
    .pricing-table th:nth-child(3) {
        background-color: #50b3c1;
    }
    .pricing-table td:nth-child(2),
    .pricing-table td:nth-child(3) {
        text-align: center;
    }
    .pricing-table tbody tr:nth-child(odd) {
        background-color: #ede5f1;
    }
    .pricing-table tbody tr:nth-child(even) {
        background-color: #f8f6fa;
    }
    .haarentfernungtext {
        margin-bottom: 5vh;
        margin-top: 5vh;
        font-size: 1.0em;
    }
    .link {
        text-decoration: none;
        text-align: center;
        margin-bottom: 5vh;
        display: block;
    }
    .footer {
        text-align: center;
        margin: 10vh;
        margin-top: 15vh;
    }
    p {
        font-size: 1.875em;
        margin-left: 2vh;
    }
    li {
        font-size: 1.875em;
    }
    .kontakt {
        text-align: center;
    }
    .kontakttext {
        margin-bottom: 2vh;
    }
    .tabellenkont {
        position: relative;
    }
    #fußbild {
        position: absolute;
        z-index: -1;
    }
    #tabelle {
        margin-left: 50vh;
    }
    #termin {
        margin-top: 10vh;
        margin-bottom: 10vh;
        text-align: center;
    }
    #haarirritationen {
        font-weight: 600;
    }
    #keinproblem {
        font-weight: 600;
    }
    #aaa {
        margin-bottom: 15vh;
    }
    #tabelleuntertext {
        text-align: center;
        margin-top: 10vh;
    }
    #preisunten {
        margin-bottom: 15vh;
    }
    #haarx {
        text-align: center;
    }
    #link {
        text-decoration: none;
        color: #4d386b;
        margin-left: 124vh;
    }
    #davidseimudda {
        font-weight: 700;
        font-size: 40px;
    }
}







/* _________________________________________________________________________________________________________________
_________________________________________________________________________________________________________________
_________________________________________________________________________________________________________________
_________________________________________________________________________________________________________________
                            PHONE DISPLAY STYLE BELOW
_________________________________________________________________________________________________________________
_________________________________________________________________________________________________________________
________________________________________________________________________________________________________________*/









@media (max-width: 768px) {
    * {
        margin: 0;
        padding: 0;
        font-family: "Inter";
        font-weight: 400;
    }

    html, body {
        min-height: 100vh;
        min-width: 100vw;
        transform: scale(1); /* Scale content appropriately */
        transform-origin: top left; /* Anchor scaling */
        overflow-x: hidden; /* Prevent horizontal scrolling */
    }

    body {
        position: relative;
        background-color: #ffedc7;
        margin: 0; /* Ensure no extra margins */
    }

    h2 {
        font-family: "Sora";
        font-size: 3.875em;
        color: #4d386b;
    }

    .überschrift {
        margin-bottom: 5vh;
        margin-left: 3vh;
    }

    .überschrift1 {
        margin-bottom: 5vh;
        margin-left: 1vh;
    }

    .überschrift2 {
        margin-bottom: 5vh;
        margin-left: 12vh;
    }

    .überschrift3 {
        margin-bottom: 5vh;
        margin-left: 1vh;
        font-size: 1.5em;
    }

    .überschrift4 {
        margin-bottom: 0vh;
        margin-left: 7.2vh;
        font-size: 2.8em;
        text-align: center; /* Centers the text inside the element */
        margin: 0 auto; /* Centers the entire element horizontally */
    }

    .überschrift5 {
        margin-bottom: 5vh;
        margin-left: 3vh;
        font-size: 2.8em;
        text-align: center; /* Centers the text inside the element */
        margin: 0 auto; /* Centers the entire element horizontally */
    }

    .übermichtext {
        margin-bottom: 0vh;
        font-size: 1.1em;
        text-align: center;
        margin: 0 auto; /* Center horizontally */
        font-weight: 700;
    }

    .übermichtext2 {
        margin-bottom: 0vh;
        font-size: 1.1em;
        text-align: center;
        margin: 0 auto;
        font-weight: 700;
    }

    .übermichtext4 {
        margin-right: 2px;
        font-size: 1.1em;
        text-align: center;
        margin: 0 auto;
        font-weight: 700;
        margin-bottom: 44vh;
    }

    .logo {
        max-width: 100%;
        height: 150px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 15vh;
        position: sticky;
    }

    .start {
        margin-top: 20vh;
        position: relative;
        text-align: center;
        overflow: hidden;
    }

    .background-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 50vh;
        overflow: hidden;
        z-index: -1;
    }

    .backgroundbildtextjpeg {
        width: 100%; /* Ensure no horizontal overflow */
        height: 100%;
        object-fit: cover;
        opacity: 0.5;
        z-index: -1;
    }

    .susi {
        font-family: "Sora";
        margin-top: 6vh;
        font-size: 2.875em;
        margin-bottom: 4vh;
    }

    .susitext {
        font-size: 1.875em;
        font-family: "Inter";
    }

    #susitextbot {
        margin-bottom: 60vh;
    }

    .susitext, .susi {
        position: relative;
        z-index: 1;
        color: #4d386b;
        margin-top: 3vh;
    }

    .PageBody {
        margin-left: auto;
        margin-right: auto; /* Center the body content */
        display: block;
    }

    .bullet {
        font-size: 0.5em;
        margin-left: 1vh;
        list-style: none;
        margin-bottom: 5vh;
    }

    #endbullet {
        margin-bottom: 0vh;
    }

    li::before {
        content: "";
        display: inline-block;
        width: 30px;
        height: 30px;
        background-image: url("images/blümchen.png");
        background-size: contain;
        background-repeat: no-repeat;
        margin-right: 1vh;
    }

    .haarentfernung {
        font-size: 1.3em;
        font-family: "Inter";
        text-align: center;
        margin-bottom: 3vh;
    }

    .pricing-table {
        width: 70%;
        margin: 0 auto;
        border-collapse: collapse;
    }

    .pricing-table th, .pricing-table td {
        border: 1px solid #ccc;
        padding: 10px;
        text-align: left;
    }

    .pricing-table th {
        background-color: #a699b5;
        color: white;
    }

    .pricing-table th:nth-child(2) {
        background-color: #a699b5;
    }

    .pricing-table th:nth-child(3) {
        background-color: #50b3c1;
    }

    .pricing-table td:nth-child(2),
    .pricing-table td:nth-child(3) {
        text-align: center;
    }

    .pricing-table tbody tr:nth-child(odd) {
        background-color: #ede5f1;
    }

    .pricing-table tbody tr:nth-child(even) {
        background-color: #f8f6fa;
    }

    .haarentfernungtext {
        margin-bottom: 5vh;
        margin-top: 5vh;
    }

    .link {
        text-decoration: none;
        text-align: center;
        margin-bottom: 5vh;
        display: block;
    }

    .footer {
        text-align: center;
        margin: 10vh auto;
    }

    p {
        font-size: 1.875em;
        margin: 0 auto; /* Center text */
    }

    #haarbegone {
        font-size: 1.0em;
        text-align: center;
        margin: 0 auto;
    }

    #haarbegone2 {
        font-size: 1.0em;
        text-align: center;
        margin: 0 auto;
        font-weight: 700;
        margin-bottom: 44vh;
        margin-top: 5vh;
    }
    #stupidtext{
        margin-top: 9vh;
    }

    li {
        font-size: 1.875em;
        font-weight: 700;
    }

    .kontakt {
        text-align: center;
        font-size: 1em;
    }

    .kontakttext {
        margin-bottom: 2vh;
    }

    .tabellenkont {
        position: relative;
    }

    #fußbild {
        visibility: hidden;
        position: absolute;
        z-index: -1;
    }

    #tabelle {
        margin-left: auto;
        margin-right: auto;
    }

    #termin {
        margin-top: 10vh;
        margin-bottom: 10vh;
        text-align: center;
        font-size: 50px;
    }

    #haarirritationen, #keinproblem {
        font-weight: 600;
    }

    #tabelleuntertext {
        text-align: center;
        margin-top: 10vh;
    }

    #preisunten {
        margin-bottom: 60vh;
    }

    #link {
        text-decoration: none;
        color: #4d386b;
        margin-left: auto;
        margin-right: auto;
    }

    #davidseimudda {
        font-weight: 700;
        font-size: 40px;
    }
}