/* ============================================================
   mitarbeitergewinnung.css – Page-specific styles for mitarbeitergewinnung.html
   ============================================================ */

p { line-height: 1.8; margin-bottom: 1.2rem; }

/* ── PAGE HERO ── */
.page-hero {
    padding: 160px 0 80px;
    background-color: #000;
    text-align: center;
}

.page-hero h1 { font-size: 54px; margin-bottom: 16px; }
.page-hero p { font-size: 18px; color: #ccc; max-width: 650px; margin: 0 auto; }

/* ── MAIN TEXT ── */
#main-content {
    background-color: #000;
    padding: 60px 0 80px;
}

.content-text {
    max-width: 820px;
    margin: 0 auto;
    color: #ccc;
    font-size: 16px;
}

.content-text p { color: #ccc; }

/* ── HIGHLIGHTS ── */
#highlights {
    background-color: #111;
    padding: 80px 0;
}

#highlights h2 {
    font-size: 32px;
    text-align: center;
    margin-bottom: 50px;
}

.highlight-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 30px;
}

.highlight-item {
    background-color: #000;
    padding: 36px 28px;
    border: 1px solid #222;
    text-align: center;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.highlight-item.animate { opacity: 1; transform: translateY(0); }
.highlight-item .icon { font-size: 32px; margin-bottom: 16px; }
.highlight-item h3 { font-size: 18px; margin-bottom: 10px; }
.highlight-item p { font-size: 14px; color: #aaa; margin: 0; }

/* ── FAQ ── */
#faq-mg {
    background-color: #000;
    padding: 80px 0;
}

#faq-mg h2 {
    font-size: 32px;
    text-align: center;
    margin-bottom: 50px;
}

.faq-list { max-width: 820px; margin: 0 auto; }

/* ── CTA ── */
.mg-cta {
    background-color: #111;
    padding: 80px 0;
    text-align: center;
}

.mg-cta h2 { font-size: 36px; margin-bottom: 16px; }
.mg-cta p { font-size: 17px; color: #ccc; margin-bottom: 30px; max-width: 600px; margin-left: auto; margin-right: auto; }

/* ── RESPONSIVE ── */
@media screen and (max-width: 768px) {
    .page-hero { padding: 120px 0 50px; }
    .page-hero h1 { font-size: 30px; }
    .page-hero p { font-size: 15px; }
    #main-content, #faq-mg { padding: 50px 0; }
    #highlights { padding: 50px 0; }
    #highlights h2, #faq-mg h2 { font-size: 26px; }
    .mg-cta h2 { font-size: 26px; }
}

@media (max-width: 480px) {
    .page-hero h1 { font-size: 26px; }
    .btn-solid { width: 100%; text-align: center; }
}