/* Volunteer form ("Mitmachen"). Logical properties only, so the same file
   serves German and Arabic without an RTL build. */
.vol-wrap{--vol-accent:#1e5faf;--vol-accent-dark:#123a6b;--vol-soft:#eaf3ff;--vol-line:#dbe8f7;--vol-muted:#5a7391;--vol-error:#b42318;max-width:680px}
.vol-wrap h2{font-size:1.5rem;margin-bottom:1rem}
.vol-wrap h2:focus{outline:0}
.vol-lead{color:var(--vol-muted);margin-bottom:1.5rem}
.vol-wrap .btn-outline-primary{color:var(--vol-accent);border-color:var(--vol-accent)}
.vol-wrap .btn-outline-primary:hover,.vol-wrap .btn-outline-primary:focus-visible{background:var(--vol-accent);border-color:var(--vol-accent);color:#fff}
.vol-wrap fieldset{margin-bottom:1rem}
.vol-wrap legend{float:none;font-size:1rem;margin-bottom:.5rem}

/* Stepper. Only meaningful once the script splits the form into steps. */
.vol-steps{display:none;list-style:none;margin:0 0 2rem;padding:0;justify-content:center;gap:.5rem}
.js .vol-steps{display:flex}
.vol-steps__item{display:flex;align-items:center;gap:.5rem;color:#8ea9c9;font-weight:500}
.vol-steps__item:not(:last-child)::after{content:"";inline-size:2rem;block-size:2px;background:var(--vol-line);margin-inline:.25rem}
.vol-steps__num{display:inline-flex;align-items:center;justify-content:center;inline-size:2rem;block-size:2rem;border-radius:50%;border:2px solid currentColor;font-weight:700;line-height:1}
.vol-steps__item.is-current{color:var(--vol-accent)}
.vol-steps__item.is-current .vol-steps__num{background:var(--vol-accent);border-color:var(--vol-accent);color:#fff}
.vol-steps__item.is-done{color:var(--vol-accent-dark)}
.vol-steps__item.is-done .vol-steps__num{background:var(--vol-soft);border-color:var(--vol-accent-dark)}

/* Steps: all on one page without JS, one at a time with it. */
.vol-step+.vol-step{margin-block-start:2rem;padding-block-start:2rem;border-block-start:1px solid var(--vol-line)}
.js .vol-step+.vol-step{margin-block-start:0;padding-block-start:0;border:0}
.js .vol-step:not(.is-current){display:none}

/* Text inputs with an icon at the start. */
.vol-input{position:relative}
.vol-input__icon{position:absolute;inset-block:0;inset-inline-start:0;display:flex;align-items:center;padding-inline:.75rem;color:var(--vol-muted);pointer-events:none}
.vol-input .form-control,.vol-input .form-select{padding-inline-start:2.5rem}
/* Email and phone stay LTR in Arabic, so the icon sits at their end, not their start. */
[dir="rtl"] .vol-input .form-control[dir="ltr"]{padding-left:.75rem;padding-right:2.5rem}
.vol-wrap .form-control[aria-invalid="true"],.vol-wrap .form-select[aria-invalid="true"]{border-color:var(--vol-error)}

/* Segmented buttons: a visually hidden input with its label as the button. */
.vol-seg{display:flex;flex-wrap:wrap;gap:.5rem}
.vol-seg--stack{flex-direction:column}
.vol-seg__input,.vol-chip__input{position:absolute;opacity:0;inline-size:1px;block-size:1px;overflow:hidden}
.vol-seg__btn{flex:1 1 0;min-inline-size:6rem;padding:.55rem 1rem;border:1px solid var(--vol-line);border-radius:8px;background:#fff;color:var(--vol-accent-dark);text-align:center;cursor:pointer;transition:background-color .15s,border-color .15s}
.vol-seg--stack .vol-seg__btn{text-align:start}
.vol-seg__btn:hover{border-color:var(--vol-accent)}
.vol-seg__input:checked+.vol-seg__btn{background:var(--vol-accent);border-color:var(--vol-accent);color:#fff}
.vol-seg__input:focus-visible+.vol-seg__btn,.vol-chip__input:focus-visible+.vol-chip__btn{outline:3px solid #8ab4ea;outline-offset:2px}
.vol-seg__input[type="checkbox"]+.vol-seg__btn::before{content:"\F584";font-family:"bootstrap-icons";margin-inline-end:.5em}
.vol-seg__input[type="checkbox"]:checked+.vol-seg__btn::before{content:"\F26C"}

/* Area chips. */
.vol-chips{display:flex;flex-direction:column;gap:.5rem}
.vol-chip{position:relative}
.vol-chip__btn{display:flex;align-items:center;gap:.6em;inline-size:100%;padding:.75rem 1rem;border:1px solid var(--vol-line);border-radius:8px;background:#fff;color:var(--vol-accent-dark);font-weight:500;cursor:pointer;transition:background-color .15s,border-color .15s}
.vol-chip__btn .bi{font-size:1.15rem;color:var(--vol-accent)}
/* Empty circle at the end of each row, filled with a check when chosen. */
.vol-chip__btn::after{content:"\F28A";font-family:"bootstrap-icons";margin-inline-start:auto;color:#8ea9c9}
.vol-chip__btn:hover{border-color:var(--vol-accent)}
.vol-chip__input:checked+.vol-chip__btn{background:var(--vol-accent);border-color:var(--vol-accent);color:#fff}
.vol-chip__input:checked+.vol-chip__btn .bi,.vol-chip__input:checked+.vol-chip__btn::after{color:#fff}
.vol-chip__input:checked+.vol-chip__btn::after{content:"\F26A"}
/* Step 2 reads as a list: every answer button on its own line too. */
.vol-step[data-step="2"] .vol-seg{flex-direction:column}
.vol-step[data-step="2"] .vol-seg__btn{text-align:start}

/* Description and follow-up questions of the chosen area. */
.vol-desc,.vol-branch,.vol-subbranch,.vol-only{display:none}
.vol-desc{margin-block-end:1rem;padding:1rem 1.25rem;border-inline-start:4px solid var(--vol-accent);border-radius:8px;background:#fff}
.vol-desc__title{margin:0 0 .25rem;font-weight:700;color:var(--vol-accent)}
.vol-desc__text{margin:0}
.vol-branch{padding:1.25rem;border-radius:8px;background:#fff;margin-block-end:1rem}
.vol-branch fieldset:last-child{margin-block-end:0}

.vol-form:has(#area-unterricht:checked) .vol-desc[data-area="unterricht"],
.vol-form:has(#area-betreuung:checked) .vol-desc[data-area="betreuung"],
.vol-form:has(#area-veranstaltungen:checked) .vol-desc[data-area="veranstaltungen"],
.vol-form:has(#area-it:checked) .vol-desc[data-area="it"],
.vol-form:has(#area-organisation:checked) .vol-desc[data-area="organisation"],
.vol-form:has(#area-oeffentlichkeit:checked) .vol-desc[data-area="oeffentlichkeit"],
.vol-form:has(#area-unterricht:checked) .vol-branch[data-branch="unterricht"],
.vol-form:has(#area-betreuung:checked) .vol-branch[data-branch="kinder"],
.vol-form:has(#area-veranstaltungen:checked) .vol-branch[data-branch="kinder"],
.vol-form:has(#area-veranstaltungen:checked) .vol-only[data-only-area="veranstaltungen"],
.vol-form:has(#teaching-mode-unterrichten:checked) .vol-subbranch[data-subbranch="unterrichten"]{display:block}

/* Errors: from the server, or written by the script. */
.vol-error{color:var(--vol-error);font-size:.875rem;margin-block-start:.25rem}
.vol-error:empty{display:none}

/* Summary on the last step. */
.vol-summary{margin-block-end:1.5rem;padding:1rem 1.25rem;border-radius:8px;background:#fff}
.vol-summary__title{font-size:1.125rem;margin-block-end:.75rem}
.vol-summary dl{display:grid;grid-template-columns:max-content 1fr;gap:.35rem 1rem;margin:0}
.vol-summary dt{font-weight:500;color:var(--vol-muted)}
.vol-summary dd{margin:0;text-align:start;overflow-wrap:anywhere}

/* Step buttons. "Weiter"/"Zurück" only exist once the script runs. */
.vol-nav{display:flex;gap:.75rem;justify-content:flex-end;margin-block-start:1.5rem}
.vol-nav--center{justify-content:center}
.vol-nav [data-goto]{display:none}
.js .vol-nav [data-goto]{display:inline-block}
.vol-nav__back{margin-inline-end:auto}
.vol-nav__submit[aria-busy="true"]{opacity:.7;cursor:progress}

/* Honeypot: off-screen for people, still in the form for bots. */
.vol-hp{position:absolute;inset-inline-start:-9999px;inline-size:1px;block-size:1px;overflow:hidden}

/* Thank-you page. */
.vol-thanks__icon{display:inline-flex;align-items:center;justify-content:center;inline-size:4rem;block-size:4rem;margin-block-end:1rem;border-radius:50%;background:#e4f5ef;color:#0d7a5f;font-size:2.25rem}

@media (max-width:575.98px){
	.vol-wrap{padding:1.75rem 1rem}
	.vol-steps__label{font-size:.8125rem}
	.vol-steps__item:not(:last-child)::after{inline-size:.75rem}
	.vol-summary dl{grid-template-columns:1fr}
	.vol-summary dd{margin-block-end:.35rem}
}