/* Safari-spezifische Fixes für SVG-Darstellung */

/* Verbesserte Darstellung der Hero-Shape für Safari */
.hero-shape {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 166px;
    z-index: 10;
    overflow: visible; /* Ändert overflow zu visible für Safari */
    line-height: 0; /* Verhindert unerwünschte Abstände */
}

.hero-shape svg {
    display: block; /* Wichtig für Safari */
    width: 100%;
    height: 100%;
    margin-bottom: -1px; /* Verhindert Lücken am unteren Rand */
}

/* Safari-spezifischer Fix mit @supports */
@supports (-webkit-touch-callout: none) {
    .hero-shape {
        transform: translateZ(0); /* Aktiviert Hardware-Beschleunigung in Safari */
    }
    
    .hero-shape svg {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
    }
}