/*
 * Kontakt-FAQ (kontaktFaq()) und Meldung einer Stellenanzeige (meldungFormular())
 * - 29.09.2026. Farben aus style.css: Orange-Rot der Senden-Knoepfe (#FFA42D/#D14836),
 * Gruen/Rot der Hinweise (.ekhtar_s / .ekhtar).
 */

/* ---------- Kontakt-FAQ ---------- */
.kontakt-faq {
    margin: 18px 0 22px 0;
    max-width: 680px;
}

.kontakt-faq-titel {
    font-family: vfont, Arial, Helvetica, sans-serif;
    font-size: 17px;
    color: #333;
    margin: 0 0 10px 0;
}

.faq-eintrag {
    border: 1px solid #ddd;
    border-radius: 3px;
    background: #fff;
    margin: 0 0 6px 0;
}

.faq-eintrag summary {
    cursor: pointer;
    padding: 9px 12px 9px 30px;
    font-weight: bold;
    color: #333;
    position: relative;
    list-style: none;
    line-height: 1.35;
}

.faq-eintrag summary::-webkit-details-marker {
    display: none;
}

.faq-eintrag summary:before {
    content: "+";
    position: absolute;
    left: 10px;
    top: 7px;
    font-size: 16px;
    color: #D14836;
}

.faq-eintrag[open] summary:before {
    content: "\2212";
}

.faq-eintrag summary:hover,
.faq-eintrag[open] summary {
    background: #FFF6EC;
}

.faq-antwort {
    padding: 4px 12px 11px 30px;
    color: #444;
    line-height: 1.5;
}

.faq-antwort a {
    color: #1439A7;
}

.kontakt-faq-rest {
    margin: 12px 0 0 0;
    color: #555;
}

/* ---------- Meldung einer Stellenanzeige ---------- */
.meldung {
    margin: 10px 0;
    clear: both;
}

.meldung-knopf {
    background: #fff;
    border: 1px solid #D14836;
    color: #D14836;
    border-radius: 2px;
    padding: 4px 12px;
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
}

.meldung-knopf:hover,
.meldung-knopf[aria-expanded="true"] {
    background: #D14836;
    color: #fff;
}

.meldung-box {
    margin: 8px 0 0 0;
    padding: 12px 14px;
    border: 1px solid #ddd;
    border-radius: 3px;
    background: #fafafa;
    max-width: 420px;
}

.meldung-titel {
    font-weight: bold;
    font-size: 15px;
    margin: 0 0 6px 0;
}

.meldung-hinweis {
    font-size: 12px;
    color: #666;
    margin: 0 0 10px 0;
}

.meldung-feld {
    display: block;
    margin: 0 0 9px 0;
    font-size: 13px;
    color: #333;
}

.meldung-feld span {
    color: red;
}

.meldung-feld select,
.meldung-feld textarea,
.meldung-feld input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 3px 0 0 0;
    padding: 4px;
    height: auto;
    min-height: 28px;
    line-height: 1.3;
    font-size: 13px;
    direction: ltr;
    text-align: left;
}

/* Honeypot: fuer Menschen unsichtbar, fuer Bots ein normales Feld */
.meldung-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.meldung-aktionen {
    margin: 4px 0 0 0;
}

.meldung-senden {
    background: linear-gradient(#FFA42D, #D14836);
    border: 0;
    color: #fff;
    border-radius: 2px;
    font-size: 14px;
    padding: 5px 15px 6px;
    cursor: pointer;
}

.meldung-senden[disabled] {
    opacity: .6;
    cursor: default;
}

.meldung-abbrechen {
    background: none;
    border: 0;
    color: #666;
    text-decoration: underline;
    cursor: pointer;
    margin-left: 10px;
    font-size: 13px;
}

.meldung-ergebnis {
    margin: 8px 0 0 0;
    font-size: 13px;
}

.meldung-ergebnis.ok {
    border: 1px solid #093;
    background: #ECFFEC;
    color: #093;
    padding: 4px 6px;
}

.meldung-ergebnis.fehler {
    border: 1px solid #F00;
    background: #FFF2F2;
    color: #F00;
    padding: 4px 6px;
}

/* In good.php steht der Knopf in .leftb (90px breit, float) - das Formular
   deshalb als ueberlagernde Box statt im Fluss */
.meldung {
    position: relative;
}

.leftb .meldung-box {
    position: absolute;
    z-index: 50;
    top: 28px;
    left: 0;
    width: 360px;
    max-width: 88vw;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .18);
}