/* =========================================================
   PROFIL (Bootstrap-first)
   Keep mobile spacing as before (90% width, 5% margins).
   Desktop: cleaner centered layout like other pages.
   ========================================================= */

.profil-page {
    width: 100%;
}

/* Wrapper that controls page horizontal spacing */
.profil-pad {
    width: 90%;
    margin: 0 5%;
    padding-top: 1.25rem; /* space from navbar on all sizes */
    padding-bottom: 2.5rem;
}

/* Desktop: keep project rule (10% left/right) and a professional max width */
@media (min-width: 992px) {
    .profil-pad {
        width: auto;
        margin: 0;
        padding-left: 10% !important;
        padding-right: 10% !important;
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
        padding-top: 2rem; /* a bit more breathing room on desktop */
    }
}

/* Title: match other pages (Leistungen/Preise/Referenzen) */
.profil-title {
    font-size: 26px;
    font-weight: 600;
}

/* Image: subtle professional frame */
.profil-img {
    width: 100%;
    height: auto;
    display: block;
    border: 8px solid #ffffff;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* Text */
.profil-text {
    text-align: justify;
    line-height: 1.65;
}

@media (min-width: 992px) {
    .profil-img {
        max-width: 520px;
    }

    /* slightly improve long-text readability next to a larger image */
    .profil-text {
        font-size: 1.02rem;
    }
}