/* ===================================================================
 * paricon karriere CSS — loaded on job listing pages only
 * Migrated from Kit #9 custom CSS field — Batch 6
 * =================================================================== */

/* === Hidden Stellenanzeigen cards (Phase 1, 2026-04-13) ===
 * Performance Marketing Manager (f727aac) and
 * Content & Growth Marketing Manager (f362e1a) — hidden per Julia's request.
 * To reactivate: remove these rules and set the pages back to published.
 */
.elementor-element-f727aac,
.elementor-element-f362e1a {
    display: none !important;
}

/* A19: Epic Bewerbungs CTA */
@keyframes a19-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.5); }
    50% { box-shadow: 0 0 24px 8px rgba(255,255,255,0.25); }
}
[data-id="a0bb4b3"] {
    position: relative;
    box-shadow: 0 8px 40px rgba(2,203,255,0.2), 0 4px 20px rgba(2,203,255,0.15);
}
[data-id="a0bb4b3"]::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 26px;
    background: linear-gradient(135deg, #0A1628, #02CBFF);
    z-index: -1;
    opacity: 0.6;
    filter: blur(12px);
}
.a19-cta-pulse .elementor-button {
    animation: a19-pulse 2.5s ease-in-out infinite;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}
.a19-cta-pulse .elementor-button:hover {
    animation: none;
    transform: scale(1.06);
    box-shadow: 0 0 30px rgba(255,255,255,0.4);
}

/* A19 fix: button text color override */
[data-id="a0bb4b3"] .elementor-button {
    color: #0d1625 !important;
    background: #FFFFFF !important;
    padding: 16px 48px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    border-radius: 50px !important;
    letter-spacing: 0.5px;
    text-decoration: none !important;
}
[data-id="a0bb4b3"] .elementor-button:hover {
    color: #FFFFFF !important;
    background: #0d1625 !important;
}

/* A19 fix: CTA heading white */
[data-id="a0bb4b3"] .elementor-widget-text-editor {
    color: #FFFFFF !important;
}
[data-id="a0bb4b3"] .elementor-widget-text-editor p {
    color: #FFFFFF !important;
}

/* ===================================================================
 * "5 Gründe für paricon" — Custom HTML replacement
 * Old Elementor widgets hidden; new .gruende-* markup injected.
 * =================================================================== */

/* Hide original gradient circle pseudo-element */
.elementor-element[data-id="213f95a2"]:before {
    display: none !important;
}

/* Section wrapper */
.gruende-section {
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px 20px 80px;
    text-align: center;
}

/* Title above circle */
.gruende-title { margin-bottom: 40px; }
.gruende-title h2 {
    font-size: clamp(48px, 8vw, 120px);
    font-weight: 800;
    text-transform: uppercase;
    line-height: 0.95;
    letter-spacing: -2px;
    color: #fff;
    font-family: 'Barlow', Arial, sans-serif;
}
.gruende-title h2 span {
    display: block;
    font-size: clamp(32px, 4.5vw, 72px);
    text-transform: none;
    font-weight: 700;
    letter-spacing: 0;
    margin-top: 10px;
}

/* Gradient circle */
.gruende-circle {
    position: relative;
    width: min(1100px, 90vw);
    aspect-ratio: 1;
    margin: 0 auto;
    border-radius: 50%;
    background: linear-gradient(135deg, #00cbff 0%, #ff0071 100%);
    overflow: hidden;
}

/* Each item: horizontal (circle left, text right) */
.gruende-item {
    position: absolute;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
    width: 28%;
}

/* Numbered circle */
.gruende-num {
    flex-shrink: 0;
    width: clamp(60px, 8vw, 110px);
    height: clamp(60px, 8vw, 110px);
    border: 4px solid #ff0071;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(28px, 4vw, 56px);
    font-weight: 700;
    color: #fff;
    font-family: 'Barlow', Arial, sans-serif;
    background: rgba(255,255,255,0.06);
}

/* Description text */
.gruende-text {
    font-size: clamp(12px, 1.4vw, 16px);
    line-height: 1.45;
    color: #fff;
    padding-top: 6px;
    font-family: 'Barlow', Arial, sans-serif;
}
.gruende-text strong { font-weight: 700; }

/* Diagonal positions — spread across full circle */
.gruende-item:nth-child(1) { left: 18%; top: 14%; }
.gruende-item:nth-child(2) { left: 28%; top: 27%; }
.gruende-item:nth-child(3) { left: 36%; top: 40%; }
.gruende-item:nth-child(4) { left: 44%; top: 53%; }
.gruende-item:nth-child(5) { left: 52%; top: 65%; }

/* Tablet */
@media (max-width: 1024px) {
    .gruende-item { width: 32%; }
    .gruende-text { font-size: 11px; }
}

/* Mobile: vertical list */
@media (max-width: 768px) {
    .gruende-circle {
        width: 100%;
        aspect-ratio: auto;
        border-radius: 24px;
        padding: 32px 16px;
        display: flex;
        flex-direction: column;
        gap: 24px;
        overflow: visible;
    }
    .gruende-item {
        position: static;
        width: 100%;
        gap: 16px;
    }
    .gruende-num { width: 52px; height: 52px; font-size: 26px; }
    .gruende-text { font-size: 14px; padding-top: 8px; }
}

/* === Square portrait cards — Stellenangebote grid on main Karriere page (/karriere/ post 944) ===
 * The job-listing cards in the Stellenangebote section use CSS background-image for employee
 * portraits. Wrapper: data-id="3f890c31" (unique to post 944, not present on any sub-page).
 * Direct children are all 9 portrait cards (6c480e2, 310bb62, 44fc9a1, cdb7059, 26da99c,
 * f727aac, 3b6794c, f362e1a, 43a95df). Two cards (f727aac, f362e1a) are already hidden above.
 * Elementor sets min-height:50vh on each card — overridden here so aspect-ratio wins.
 * background-size:cover (set by Elementor) handles the fill; background-position stays per-card.
 * Matches: 9 containers on post 944. Zero matches on all other karriere-family pages. */
.elementor-element-3f890c31 > .e-con {
    aspect-ratio: 1 / 1;
    min-height: 0;
}

/* === Square portrait — "Ansprechpartnerin" contact photo on Stellenanzeige sub-pages ===
 * The contact person portrait (Nina Fischinger, wp-image-2416) is a 2560×1707 <img> tag
 * inside widget data-id="8e17cdd". Present on 4 sub-pages that load karriere.css:
 * sap-produktentwickler, sap-solution-consultant, sap-implementation-consultant,
 * sap-business-consultant. Matches exactly 1 img per sub-page. Not present on post 944. */
.elementor-element-8e17cdd img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center top;
    width: 100%;
    display: block;
}