:root {
            --petrol-deep: #004d4d;
            --petrol-main: #008080;
            --petrol-light: #20b2aa;
            --petrol-soft: #e0f2f1;
            --white: #ffffff;
        }

        body {
            font-family: 'Montserrat', sans-serif;
            background-color: #f4f7f7;
            color: #2c3e50;
        }
        /* Verhindert, dass der Text bei extrem kleinen Handys rausfällt */
            @media (max-width: 576px) {
                .brand-text {
                    font-size: 0.9rem !important;
                }
            }

        h1, h2, h3 {
            font-family: 'Playfair Display', serif;
            font-weight: 700;
        }

        /* --- Custom Navbar --- */
        .navbar {
            background: rgba(255, 255, 255, 0.85) !important;
            backdrop-filter: blur(15px);
            padding: 1rem 0;
            border-bottom: 1px solid var(--petrol-soft);
        }

        .navbar-brand {
            color: var(--petrol-deep) !important;
            font-weight: 700;
            letter-spacing: 1px;
        }

        /* --- Hero Section --- */
        .hero {
            background: linear-gradient(135deg, var(--petrol-deep) 0%, var(--petrol-main) 100%);
            color: var(--white);
            padding: 100px 0 160px 0;
            clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%);
            margin-bottom: -50px;
        }

        .hero-img-container {
            position: relative;
        }

        .hero-img-container img {
            border-radius: 40px;
            box-shadow: 0 25px 50px rgba(0,0,0,0.2);
            border: 8px solid rgba(255,255,255,0.1);
        }

        /* --- Service Cards --- */
        .card-modern {
            border: none;
            border-radius: 30px;
            background: var(--white);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            overflow: hidden;
            box-shadow: 0 15px 35px rgba(0, 77, 77, 0.05);
        }

        .card-modern:hover {
            transform: translateY(-12px);
            box-shadow: 0 25px 50px rgba(0, 128, 128, 0.15);
        }

        .card-modern .icon-circle {
            width: 70px;
            height: 70px;
            background: var(--petrol-soft);
            color: var(--petrol-main);
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 20px;
            font-size: 1.8rem;
            margin-bottom: 20px;
        }

        /* --- Petrol Accents --- */
        .text-petrol { color: var(--petrol-main); }
        .bg-petrol-soft { background-color: var(--petrol-soft); }
        
        .btn-main {
            background: var(--white);
            color: var(--petrol-deep);
            border-radius: 50px;
            padding: 12px 35px;
            font-weight: 600;
            border: none;
            transition: 0.3s;
        }

        .btn-main:hover {
            background: var(--petrol-light);
            color: var(--white);
            transform: scale(1.05);
        }

        .section-title {
            position: relative;
            display: inline-block;
            margin-bottom: 40px;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 60%;
            height: 4px;
            background: var(--petrol-main);
            border-radius: 2px;
        }

        /* --- Kontakt Badge --- */
        .contact-card {
            background: var(--white);
            border-left: 8px solid var(--petrol-main);
            padding: 30px;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        }

        .link-petrol {
    color: var(--petrol-main);
    text-decoration: none;
    position: relative;
    font-weight: 600;
    transition: color 0.3s ease;
}

/* Der animierte Strich unter dem Link */
.link-petrol::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: var(--petrol-light);
    transition: width 0.3s ease;
}

/* Hover-Zustand */
.link-petrol:hover {
    color: var(--petrol-deep);
}

.link-petrol:hover::after {
    width: 100%;
}

/* Ergänzendes Design */
    .bg-petrol-soft { background-color: rgba(0, 102, 102, 0.1); }
    .text-petrol { color: #006666; }
    .btn-petrol { background-color: #006666; color: white; border: none; }
    .btn-petrol:hover { background-color: #004d4d; color: white; }
    
    .icon-circle-small {
        width: 45px;
        height: 45px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
    }

    .mb-n3 { margin-bottom: -1rem !important; }
    .me-n3 { margin-right: -1rem !important; }


    /* Styling-Ergänzungen */
    .bg-petrol-soft { background-color: rgba(0, 102, 102, 0.1); }
    .bg-warning-soft { background-color: rgba(255, 193, 7, 0.1); }
    .bg-info-soft { background-color: rgba(13, 202, 240, 0.1); }
    .text-petrol { color: #006666; }
    .border-petrol { border-color: #006666 !important; }
    
    .card-modern {
        transition: transform 0.3s ease, shadow 0.3s ease;
        border-radius: 20px;
    }
    
    .card-modern:hover {
        transform: translateY(-10px);
        box-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important;
    }

    .icon-circle {
        width: 50px;
        height: 50px;
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
    }


    #datenschutzModal .modal-content {
    background: #fff;
    
    }

    #datenschutzModal .modal-body h1,
    #datenschutzModal .modal-body h2,
    #datenschutzModal .modal-body h3,
    #datenschutzModal .modal-body h4 {
        color: #212529;
        margin-top: 1.25rem;
    }

    #datenschutzModal .modal-body p,
    #datenschutzModal .modal-body li {
        color: #6c757d;
        line-height: 1.7;
    }

    #datenschutzModal .modal-body a {
        word-break: break-word;
    }