/* ============================================================
   CSZ Jobangebote — Einreichungsformular.

   Baut ausschliesslich auf den Tokens aus dem Theme
   (assets/css/tokens.css) auf. Keine eigenen Farben, keine
   eigenen Schriften, keine Hardcodes.
   ============================================================ */

.csz-jobform {
	--field-gap: 1.5rem;

	max-width: 62rem;
	margin-inline: auto;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--ink-900);
}

.csz-jobform * {
	box-sizing: border-box;
}

/* --- Meldungen ------------------------------------------------ */

.csz-jobform__notice {
	margin: 0 0 2rem;
	padding: 1.125rem 1.375rem;
	border: 1px solid var(--color-border);
	background: var(--paper-soft);
	font-size: var(--fs-body);
}

.csz-jobform__notice p {
	max-width: none;
	margin: 0 0 0.6em;
}

.csz-jobform__notice p:last-child {
	margin-bottom: 0;
}

.csz-jobform__notice--error {
	border-top: 3px solid var(--bronze-500);
	color: var(--bronze-700);
	background: var(--bronze-050);
}

.csz-jobform__notice--success {
	border-top: 3px solid var(--color-primary);
	background: var(--blue-050);
}

.csz-jobform__success-title {
	margin: 0 0 0.5em;
	font-size: var(--fs-h1-cta);
	line-height: var(--lh-heading);
	letter-spacing: var(--ls-tight);
}

.csz-jobform__upload-warning {
	margin-top: 1em;
	padding-top: 1em;
	border-top: 1px solid var(--color-border);
	font-size: var(--fs-body-sm);
	color: var(--ink-700);
}

/* --- Honeypot: fuer Menschen und Screenreader unsichtbar ------- */

.csz-jobform__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --- Abschnitte ----------------------------------------------- */

.csz-jobform__section {
	margin: 0 0 3rem;
	padding: 0;
	border: 0;
	border-top: 1px solid var(--color-divider);
}

.csz-jobform__section:first-of-type {
	border-top: 0;
}

.csz-jobform__legend {
	padding: 0;
	margin: 2rem 0 0.25rem;
	font-size: var(--fs-h2);
	line-height: 1.35;
	color: var(--bronze-500);
}

.csz-jobform__section:first-of-type .csz-jobform__legend {
	margin-top: 0;
}

.csz-jobform__intro {
	max-width: var(--measure);
	margin: 0 0 1.75rem;
	font-size: var(--fs-body-sm);
	color: var(--ink-500);
}

/* --- Raster --------------------------------------------------- */

.csz-jobform__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--field-gap);
}

.csz-jobform__field {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	grid-column: span 4;
}

.csz-jobform__field--half {
	grid-column: span 2;
}

.csz-jobform__field--quarter {
	grid-column: span 1;
}

@media (max-width: 640px) {
	.csz-jobform__field--half {
		grid-column: span 4;
	}

	.csz-jobform__field--quarter {
		grid-column: span 2;
	}
}

/* --- Labels und Hilfstexte ------------------------------------ */

.csz-jobform__label {
	display: block;
	padding: 0;
	margin: 0 0 0.4rem;
	font-size: var(--fs-body-sm);
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: var(--ink-700);
}

.csz-jobform__req {
	color: var(--bronze-500);
	margin-left: 0.15em;
}

.csz-jobform__hint {
	max-width: var(--measure);
	margin: 0.45rem 0 0;
	font-size: var(--fs-caption);
	color: var(--ink-500);
}

.csz-jobform__error {
	max-width: var(--measure);
	margin: 0.45rem 0 0;
	font-size: var(--fs-caption);
	color: var(--bronze-700);
}

.csz-jobform__required-note {
	margin: 0 0 1.5rem;
	font-size: var(--fs-caption);
	color: var(--ink-500);
}

/* --- Eingabefelder -------------------------------------------- */

.csz-jobform input[type="text"],
.csz-jobform input[type="email"],
.csz-jobform input[type="tel"],
.csz-jobform input[type="url"],
.csz-jobform input[type="date"],
.csz-jobform select,
.csz-jobform textarea {
	width: 100%;
	padding: 0.7rem 0.85rem;
	font-family: var(--font-family-base);
	font-size: var(--fs-body);
	line-height: 1.45;
	color: var(--ink-900);
	background: var(--paper);
	border: 1px solid var(--ink-300);
	border-radius: var(--radius-sm);
	transition: border-color var(--dur-base) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out);
	appearance: none;
}

.csz-jobform textarea {
	min-height: 8rem;
	resize: vertical;
}

.csz-jobform select {
	background-image: linear-gradient(45deg, transparent 50%, var(--ink-500) 50%),
		linear-gradient(135deg, var(--ink-500) 50%, transparent 50%);
	background-position: calc(100% - 1.1rem) 55%, calc(100% - 0.75rem) 55%;
	background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
	background-repeat: no-repeat;
	padding-right: 2.25rem;
}

.csz-jobform input[type="file"] {
	width: 100%;
	padding: 0.65rem 0.85rem;
	font-family: var(--font-family-base);
	font-size: var(--fs-body-sm);
	color: var(--ink-700);
	background: var(--paper-soft);
	border: 1px dashed var(--ink-300);
	border-radius: var(--radius-sm);
}

.csz-jobform input:hover,
.csz-jobform select:hover,
.csz-jobform textarea:hover {
	border-color: var(--ink-400);
}

.csz-jobform input:focus-visible,
.csz-jobform select:focus-visible,
.csz-jobform textarea:focus-visible {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: var(--focus-ring);
}

.csz-jobform .is-invalid input,
.csz-jobform .is-invalid select,
.csz-jobform .is-invalid textarea {
	border-color: var(--bronze-500);
}

/* --- Checkboxen und Radios ------------------------------------ */

.csz-jobform__options {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
}

.csz-jobform__check {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	font-size: var(--fs-body);
	line-height: 1.45;
	cursor: pointer;
}

.csz-jobform__check input {
	flex: 0 0 auto;
	width: 1.05rem;
	height: 1.05rem;
	margin: 0.2rem 0 0;
	accent-color: var(--color-primary);
	cursor: pointer;
}

.csz-jobform__check--single {
	align-items: flex-start;
	max-width: var(--measure);
	padding: 0.9rem 1.1rem;
	background: var(--paper-soft);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
}

.csz-jobform__check--single span {
	font-size: var(--fs-body-sm);
}

.csz-jobform__check--single a {
	display: inline-block;
	margin-left: 0.35em;
	text-decoration: underline;
	text-decoration-color: var(--blue-500);
	text-underline-offset: 0.16em;
}

.csz-jobform__field--switch .csz-jobform__hint {
	max-width: var(--measure);
	margin-top: 0.6rem;
	padding-left: 1.1rem;
	border-left: 2px solid var(--bronze-300);
}

/* --- Absenden -------------------------------------------------- */

.csz-jobform__actions {
	margin: 0 0 1.25rem;
}

.csz-jobform__submit {
	display: inline-block;
	padding: 0.95rem 2.25rem;
	font-family: var(--font-family-base);
	font-size: var(--fs-body);
	font-weight: 700;
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: var(--paper);
	background: var(--color-primary);
	border: 1px solid var(--color-primary);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: background var(--dur-base) var(--ease-out),
		border-color var(--dur-base) var(--ease-out);
}

.csz-jobform__submit:hover {
	background: var(--color-primary-hover);
	border-color: var(--color-primary-hover);
}

.csz-jobform__submit:active {
	background: var(--color-primary-active);
	border-color: var(--color-primary-active);
}

.csz-jobform__submit:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

.csz-jobform__footnote {
	max-width: var(--measure);
	margin: 0;
	font-size: var(--fs-caption);
	color: var(--ink-500);
}