/* 
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+                                                             +
+   Credits: Website programmed & developed                   +
+            IVANMAN - Ivan Mandzukic                         +
+            im@ivanman.com                                   +
+                                                             +
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/
/* Standard-Stile bleiben erhalten */
@font-face {
    font-family: 'RobotoMono-Bold';
    src: url('fonts/RobotoMono-Bold.woff2') format('woff2'),
         url('fonts/RobotoMono-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

a, button, input, select, h1, h2, h3, h4, h5, * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: none;
    text-decoration: none;
    background: none;
    -webkit-font-smoothing: antialiased;
    font-family: 'RobotoMono-Bold', monospace;
    cursor: none !important;
}

menu, ol, ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'RobotoMono-Bold', monospace;
    cursor: none !important;
}

.home-index {
    background: #ffffff;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: none !important;
}

.bw-1-1-index {
    width: 771px;
    height: 771px;
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    position: relative;
}

.benc-in-arch-index {
    color: #000aff;
    text-align: left;
    font-size: 220px;
    font-weight: 700;
    position: absolute;
    left: 27px;
    top: 55px;
    width: 1437px;
    height: auto;
    line-height: 1.2;
    max-width: 90vw;
    cursor: none !important;
}

.rectangle-4-index {
    background: #000aff;
    width: 45vw;
    height: 28px;
    position: absolute;
    bottom: 30%;
    right: 5%;
    max-width: 100vw;
    cursor: none !important;
}

.cursor-plus-index {
    position: fixed;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 9999;
}

/* Plus-Kreuz (horizontaler Balken) */
.cursor-plus-index::before,
.cursor-plus-index::after {
    content: "";
    position: absolute;
    background: #000AFF;
}

/* Horizontale Linie */
.cursor-plus-index::before {
    width: 50px;
    height: 3px;
}

/* Vertikale Linie */
.cursor-plus-index::after {
    width: 3px;
    height: 50px;
}

/* Anpassungen für verschiedene Bildschirmgrößen */
/* 4K Displays (3840x2160) */
@media (max-width: 3840px) {
    .benc-in-arch-index {
        font-size: 460px;
    }
    .rectangle-4-index {
        background: #000aff;
        width: 45vw;
        height: 28px;
        position: absolute;
        bottom: 40%;
        right: 5%;
        max-width: 100vw;
    }
    .cursor-plus-index {
        width: 50px;
        height: 50px;
    }
    .cursor-plus-index::before {
        width: 50px;
        height: 3px;
    }
    .cursor-plus-index::after {
        width: 3px;
        height: 50px;
    }
}

/* MacBook Pro 14" (3024 x 1964) */
@media (max-width: 3024px) {
    .benc-in-arch-index {
        font-size: 200px;
    }
    .rectangle-4-index {
        width: 40vw;
    }
}

/* MacBook Pro 16" (3456 x 2234) */
@media (max-width: 3456px) {
    .benc-in-arch-index {
        font-size: 220px;
    }
    .rectangle-4-index {
        width: 42vw;
    }
}

/* Standard Laptop-Bildschirme */
@media (max-width: 1920px) {
    .benc-in-arch-index {
        font-size: 180px;
    }
    .rectangle-4-index {
        width: 38vw;
        right: -2%;
    }
}

/* Kleinere Laptops (15" & 13") */
@media (max-width: 1366px) {
    .benc-in-arch-index {
        font-size: 160px;
    }
    .rectangle-4-index {
        width: 35vw;
    }
}



/* iPhone 14 Pro Max (430px x 932px) */
@media (min-width: 413px) and (max-width: 430px) {
    .benc-in-arch-index {
        font-size: 23vw; /* Skalierung für bessere Lesbarkeit */
        left: 3vw;
        top: 4vh;
        line-height: 1.1; /* Engere Zeilenhöhe für bessere Darstellung */
        max-width: 85vw;
    }
    .rectangle-4-index {
        width: 50%; /* Breiter für bessere Optik */
        height: 17px;
        bottom: 37%;
        right: -3%;
    }
    .bw-1-1-index {
        width: 80vw; /* Maximale Breite, ohne dass es zu groß wird */
        height: auto; /* Automatische Skalierung */
        max-width: 90vw;
        max-height: 80vh;
    }
    /* Cursor auf iPhone verkleinern */
    .cursor-plus-index {
        width: 40px;
        height: 40px;
    }
    .cursor-plus-index::before {
        width: 40px;
        height: 2px;
    }
    .cursor-plus-index::after {
        width: 2px;
        height: 40px;
    }
}

/* Samsung Galaxy A51 (412px x 915px) */
@media (max-width: 412px) {
    .benc-in-arch-index {
        font-size: 29vw; /* Beispielwert – anpassen, wie gewünscht */
        left: 4vw;      /* Beispielwert */
        top: 5vh;       /* Beispielwert */
        line-height: 1.2;
        max-width: 80vw;
    }
    .rectangle-4-index {
        width: 50%;     /* Beispielwert – anpassen */
        height: 15px;
        bottom: 37%;
        right: -2%;
    }
    .bw-1-1-index {
        width: 85vw;
        height: auto;
        max-width: 90vw;
        max-height: 80vh;
    }
    /* Angepasster Cursor für Galaxy A51 */
    .cursor-plus-index {
        width: 38px;
        height: 38px;
    }
    .cursor-plus-index::before {
        width: 38px;
        height: 2px;
    }
    .cursor-plus-index::after {
        width: 2px;
        height: 38px;
    }
}