@font-face {
    font-family: 'Montserrat';
    src: url('montserrat-v26-latin-regular.woff2') format('woff');
    /* WOFF Format für moderne Browser */
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'Montserrat', sans-serif;
    background-color: #fff;
}

.image-shadow {
    box-shadow: 0px 12px 18px -6px rgba(37, 55, 70, 0.2);
}

.custom-header {
    background-color: #00786F;
    color: #fff;
    font-weight: bold;
}

.custom-header h1 {
    font-weight: bold;
}

.custom-hero h1 {
    color: #ffff !important;
    font-weight: bold;
}

.custom-hero h2 {
    color: #ffff !important;
}

h3 {
    color: #D70060 !important;
    font-weight: bold;
}

p {
    font-size: 1.4rem;
}

ul {
    font-size: 1.4rem;
}

.bg-custom-grey {
    background-color: #E6E6E6;
}

.bg-custom-white {
    background-color: #fff;
}

.bg-custom-green {
    background-color: #00786F !important;
}

.bg-custom-lightgreen {
    background-color: #e1efef !important;
}

.bg-custom-linear-pink{
    background-color: #d7809a !important;
}

.custom-btn {
    background-color: #D70060;
    /* Ersetzen Sie dies durch den genauen Farbcode Ihrer Marke */
    color: #fff;
    font-size: 1.5rem;
    font-weight: lighter;
    border-radius: .7rem;
    padding: 10px;
}

.custom-btn:hover {
    background-color: #d70061c0;
    /* Ersetzen Sie dies durch den genauen Farbcode Ihrer Marke */
    color: #fff;
}

.iphone-mockup {
height: 100%;
}

.custom-footer {
    background-color: #00786F;
    color: #fff;
}

.custom-footer a{
    color: #fff;
    text-decoration: none;
}

/* Container für das zuschneidende Bild */
.image-crop-container {
    width: 100%;
    height: 400px;
    /* Standardmäßig wird overflow auf hidden gesetzt, um sicherzustellen, dass nichts überläuft */
    overflow: hidden; 
    position: relative; /* Erlaubt absolute Positionierung innerhalb des Containers */
}

/* Bild, das zentriert werden soll */
.cropped-image {
    height: 100%;
    position: absolute; /* Absolute Positionierung relativ zum Container */
    left: 30%; /* Startet das Bild in der Mitte des Containers */
    transform: translateX(-50%); /* Zentriert das Bild genau */
    /* Entfernt object-fit und object-position, da translateX verwendet wird */
    margin-top: 30px;
}


/* Datenschutztext kleiner und Zeilenumbruch für lange Wörter/Links */
.rechts-text p,
.rechts-text ul {
    font-size: 1rem !important;
    word-wrap: break-word;
}

/* Media Query für Desktop-Bildschirme */
@media (min-width: 992px) {
    .image-crop-container {
        /* Erlaubt, dass Inhalte über den Container hinaus sichtbar sind */
        overflow: visible; 
        height: 600px;
    }
  
    .cropped-image {
        /* Nur für Desktop: Verschiebt das Bild 30% seiner Breite nach links */
        margin-top: 0;
        transform: translateX(-70%);
    }

}

/* Media Query für Mobilgeräte */
@media (max-width: 767px) {
    .custom-footer{
        font-size: .8rem !important;
    }
}