/* ============================================================
   Eppis Taxizentrale – Custom CSS
   Tailwind übernimmt den Großteil; hier nur was Tailwind nicht kann
   ============================================================ */

/* Smooth Scroll */
html {
    scroll-behavior: smooth;
}

/* Scroll-Offset für sticky Header bei Anchor-Links */
[id] {
    scroll-margin-top: 70px;
}

/* Focus-Ring in Taxi-Gelb */
*:focus-visible {
    outline: 2px solid #FFCC00;
    outline-offset: 2px;
}

/* Hero – Gradient-Overlay */
.hero-overlay {
    background: linear-gradient(
        to bottom,
        rgba(26, 26, 26, 0.65) 0%,
        rgba(26, 26, 26, 0.45) 60%,
        rgba(26, 26, 26, 0.80) 100%
    );
}

/* Karte (SVG Einsatzgebiet) – responsiv */
.region-map {
    width: 100%;
    height: auto;
    max-width: 700px;
    display: block;
    margin: 0 auto;
}

/* Formulare */
.form-input {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 0.95rem;
    transition: border-color 0.15s, box-shadow 0.15s;
    background: #fff;
    color: #1A1A1A;
}

.form-input:focus {
    outline: none;
    border-color: #FFCC00;
    box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.2);
}

/* Animierter Telefon-Puls im Hero */
@keyframes pulse-ring {
    0%   { box-shadow: 0 0 0 0   rgba(255, 204, 0, 0.5); }
    70%  { box-shadow: 0 0 0 12px rgba(255, 204, 0, 0);   }
    100% { box-shadow: 0 0 0 0   rgba(255, 204, 0, 0);    }
}
.btn-pulse {
    animation: pulse-ring 2s infinite;
}

/* Leistungskarten – Hover-Lift */
.service-card {
    transition: transform 0.2s, box-shadow 0.2s;
}
.service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
}

/* ============================================================
   Hero Hintergrundbild
   ============================================================ */
.hero-bg {
    background-color: #1A1A1A; /* Fallback falls Bild nicht lädt */
    background-image: url('/assets/img/eppis-taxizentrale-nachtaufnahme.jpg'); /* JPG-Fallback für Chrome/Windows */
    background-image: -webkit-image-set(
        url('/assets/img/eppis-taxizentrale-nachtaufnahme.webp') 1x,
        url('/assets/img/eppis-taxizentrale-nachtaufnahme.jpg') 1x
    );
    background-image: image-set(
        url('/assets/img/eppis-taxizentrale-nachtaufnahme.webp') type('image/webp') 1x,
        url('/assets/img/eppis-taxizentrale-nachtaufnahme.jpg') type('image/jpeg') 1x
    );
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* Mobile: Bild rechtsbündig */
@media (max-width: 767px) {
    .hero-bg {
        background-position: right center;
    }
    .hero-textbox {
        padding: 1.25rem 1.25rem 1rem !important;
        width: 100%;
        box-sizing: border-box;
    }
    .hero-textbox .flex a {
        font-size: 0.85rem;
        padding: 0.6rem 1rem;
        white-space: nowrap;
    }
}