:root{
            --accent:#de559f;
        }

        body{
            font-family: system-ui, -apple-system, sans-serif;
            background:#0f0f12;
            color:#fff;
        }

        .navbar {
            background: #0f0f12;
        }

        .hero{
            min-height:90vh;
            display:flex;
            align-items:center;
            background:
                linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.85)),
                url('/files/img/24h-website-hero.jpg') center/cover;
        }
        
        .hero-p i,
        .trust-area i {
        color: #00dba7;
        }

        .border-accent {
            border: 1px solid #00dba7!important;
        }

        .accent{ color:var(--accent); }

        .btn-accent{
            background:var(--accent);
            color:black;
            border:none;
            border-radius:5px;
        }

        .btn-accent:hover{
            background:#c84b8e;
        }

        .btn-fw {
            background: #00dba7;
            color:black;
            border:none;
            border-radius:5px;
        }

        .btn-fw:hover {
            background: white;
            color:black;
        }

        .section-title{
            font-weight:900;
            font-size:2.2rem;
        }

        .card-dark{
            background:#15151a;
            border:none;
            border-radius:18px;
            overflow:hidden;
        }

        .card-dark img{
            width:100%;
            height:180px;
            object-fit:cover;
        }

        .template-icon{
            font-size:24px;
            color:var(--accent);
        }

        .whatsapp-float{
            position:fixed;
            bottom:18px;
            right:18px;
            background:#00dba7;
            color:#15151a;
            width:54px;
            height:54px;
            border-radius:50%;
            display:flex;
            align-items:center;
            justify-content:center;
            font-size:24px;
            z-index:999;
            text-decoration:none;
            box-shadow:0 10px 25px rgba(0,0,0,.2);
            opacity:0.9;
            transition: bottom 0.3s ease;
        }

        footer{
            background:#0b0b0e;
            color:#777;
        }
    
        /* FAQ Styling - brand (green accent) */
        .accordion-item{
            background:#15151a;
            border:1px solid rgba(255,255,255,.08);
        }

        .accordion-button{
            background:#15151a;
            color:#fff;
            box-shadow:none;
        }

        .accordion-button:not(.collapsed){
            background:rgba(0,219,167,.12);
            color:#fff;
        }

        .accordion-button:focus{
            box-shadow:0 0 0 .25rem rgba(0,219,167,.25);
        }

        .accordion-button::after{
            filter: invert(73%) sepia(67%) saturate(410%) hue-rotate(110deg);
        }

        /* Trust icons */
        .py-4.bg-dark i{
            color:#00dba7;
        }

        /* Template headings */
        .card-dark h3{
            color:#00dba7;
        }

        /* Template Preview Hover Cards */
        .card-dark{
            transition: all .25s ease;
            position:relative;
            cursor:pointer;
        }

        .card-dark:hover{
            transform: translateY(-8px) scale(1.02);
            box-shadow: 0 20px 45px rgba(0,0,0,.45);
        }

        .card-dark img{
            transition: transform .4s ease;
        }

        .card-dark:hover img{
            transform: scale(1.08);
        }

        /* Preview Badge nur im Templates Bereich */
        #templates .card-dark::after{
            content:"Preview ansehen";
            position:absolute;
            top:12px;
            right:12px;
            background:rgba(0,219,167,.9);
            color:#000;
            font-size:12px;
            padding:6px 10px;
            border-radius:999px;
            opacity:0;
            transform:translateY(-5px);
            transition:.25s ease;
        }

        #templates .card-dark:hover::after{
            opacity:1;
            transform:translateY(0);
        }

        footer {
            background: #0f0f12;
        }

        .social-icon {
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(255,255,255,0.3);
            border-radius: 50%;
            color: #00dba7;
            transition: all 0.3s ease;
            text-decoration: none;
            background: #15151a;
        }

        .social-icon:hover {
            background: #00dba7;
            color: #15151a;
            transform: translateY(-3px);
        }