/* ===== Dark Theme Grundstil bleibt ===== */
.stellenanzeigen-block {
    margin: 4rem 0;
    background: #000;
    color: #fff;
    padding: 3rem 25px;
}

.stellenanzeigen-block .stelle {
    border-bottom: 1px solid #222;
    padding: 1.5rem 0;
}

.stellenanzeigen-block .stelle-header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    cursor: pointer;
}

.stellenanzeigen-block .stelle-header h3 {
    font-weight: 700;
    margin: 0;
    color: #fff;
}

.stellenanzeigen-block .stelle-header .stellenteaser {
    color: #ccc;
    margin: 0;
}

.stellenanzeigen-block .stellen-toggle-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: none;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    padding: 0.5rem 0;
    transition: 0.3s;
}

.stellenanzeigen-block .stellen-toggle-btn:hover { }
.stellenanzeigen-block .stellen-toggle-btn i { transition: transform 0.3s; }
.stellenanzeigen-block .stellen-toggle-btn[aria-expanded="true"] i { transform: rotate(180deg); }

.stellenanzeigen-block .stelle-details {
    margin-top: 1.5rem;
    animation: fadeIn 0.3s ease-in-out;
}

/* ======== GRID mit echtem Gap, Bootstrap-sicher ======== */
/* Dein Markup nutzt wahrscheinlich: <div class="row aufgaben-grid"> */
.stellenanzeigen-block .aufgaben-grid {
    /* Bootstrap-Row neutralisieren */
    margin-left: 0 !important;
    margin-right: 0 !important;

    /* Grid aktivieren */
    display: grid;
    grid-template-columns: 1fr;      /* default: 1 Spalte */
    gap: 1.5rem;                      /* das ist dein „Gap“ */
}

/* Ab Tablet (Bootstrap md ~768px): 2 Spalten */
@media (min-width: 768px) {
    .stellenanzeigen-block .aufgaben-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Falls deine .stelle-col noch Bootstrap-Flexbreiten hat, killen wir die hier */
.stellenanzeigen-block .aufgaben-grid > .stelle-col {
    max-width: none !important;
    flex: initial !important;
    width: auto !important;
    padding: 0; /* Padding macht die Kachel selbst */
}

/* ======== Kachel-Design ======== */
.stellenanzeigen-block .stelle-details .stelle-col {
    margin: 0; /* Gap übernimmt Abstand */
    background: #111; /* sehr dunkles Anthrazit */
    border-radius: 8px;
    padding: 1.5rem;
    color: #fff;
    transition: background 0.3s ease;
}

.stellenanzeigen-block .stelle-details .stelle-col:hover { background: #151515; }

.stellenanzeigen-block .stelle-details .stelle-col h4 {
    color: #fff;
    margin-bottom: 0.5rem;
}

.stellenanzeigen-block .stelle-details .stelle-col p {
    margin-bottom: 0.5rem;
    color: #ddd;
}

/* Outro */
.stellenanzeigen-block .stellen-outro {
    margin-top: 3rem;
    text-align: center;
    font-size: 1.1rem;
    color: #fff;
}

/* Ansprechpartner */
.stellenanzeigen-block .stellen-ansprechpartner {
    margin-top: 4rem;
    text-align: center;
    color: #fff;
}


.stellenanzeigen-block .stellen-ansprechpartner .kontakt-row { margin: 0.5rem 0; }
.stellenanzeigen-block .stellen-ansprechpartner .kontakt-row a {
    color: #fff;
    text-decoration: none;
}
.stellenanzeigen-block .stellen-ansprechpartner .kontakt-row a:hover {  }

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