/*
Theme Name: Mobiles Pflegeteam MP
Description: Custom Theme mit Tailwind CSS und ACF
Author: BlueTreeMotion
Version: 1.0
*/

/* ==========================================================================
   1. BASIS-ANIMATIONEN (aus dem Original-Design)
   ========================================================================== */

body {
    animation: fadeIn 0.4s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Hamburger Animation (Mobile Navigation) */
.hamburger-line { 
    transition: all 0.3s ease-in-out; 
    transform-origin: center; 
}
.hamburger.open .line-1 { transform: translateY(8px) rotate(45deg); }
.hamburger.open .line-2 { opacity: 0; }
.hamburger.open .line-3 { transform: translateY(-8px) rotate(-45deg); }

/* Karussell Animation (Startseite Slider) */
.carousel-slide { 
    transition: opacity 1s ease-in-out; 
}


/* ==========================================================================
   2. ACF STELLENANGEBOTE: LISTEN-STYLING (WYSIWYG-Editor Override)
   ========================================================================== */

/* Setzt die Standard-Formatierung von WordPress/Tailwind für diese Listen zurück */
.job-list-styling ul {
    list-style-type: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important; /* Das sorgt für den schönen Abstand zwischen den Zeilen */
}

/* Das Layout für den einzelnen Listenpunkt */
.job-list-styling ul li {
    position: relative !important;
    padding-left: 2rem !important; /* Schafft Platz für unser SVG-Icon */
    margin: 0 !important; /* Margin wird vom 'gap' oben geregelt */
    line-height: 1.5 !important;
    text-align: left !important;
    color: #9ca3af !important; /* Tailwind text-gray-400 */
}

/* Falls der WordPress-Editor heimlich <p>-Tags in die Aufzählung packt, zähmen wir sie hiermit */
.job-list-styling ul li p {
    margin: 0 !important;
    padding: 0 !important;
    display: inline !important; 
}

/* --- DAS PFEIL-ICON (Das bringst du mit) --- */
.job-list-styling.voraussetzungen-liste ul li::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0.125rem !important; /* Leicht nach unten gerückt, damit es mittig zum Text sitzt */
    width: 1.25rem !important; 
    height: 1.25rem !important; 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%239E1B47' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

/* --- DAS HAKEN-ICON (Wir bieten dir) --- */
.job-list-styling.angebote-liste ul li::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0.125rem !important;
    width: 1.25rem !important; 
    height: 1.25rem !important; 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%239E1B47' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}