/**
 * corelaw — Formular-Rückmeldungen (Erfolg/Fehler).
 * Eigene Datei, weil style.css aus dem Demo-Design generiert wird und dieses
 * Feature nur in WordPress existiert.
 */
.corelaw-formnotice {
	margin: 0 0 26px;
	padding: 16px 20px;
	border-left: 3px solid var(--navy, #1b2a4a);
	background: var(--paper-2, #f5f4f1);
	font-size: 15px;
	line-height: 1.55;
	color: var(--ink, #14161a);
}

.corelaw-formnotice--error {
	border-left-color: #9b1c1c;
	background: #fbf1f1;
	color: #7a1616;
}

/* Pflichtfeld-Markierung des Browsers zurückhaltend gestalten */
.cform input:invalid:not(:placeholder-shown),
.cform textarea:invalid:not(:placeholder-shown) {
	border-color: #9b1c1c;
}


/* ============================================================
   Bewerbungsformular (Karriere) — dunkle Sektion
   ============================================================
   Die Sektion „Bewerbung" steht auf #15161a. Die Formularstile in style.css
   sind für hellen Grund gebaut, deshalb hier eine eigene Variante statt
   Änderungen am gemeinsamen Grundstil.
   Farben als Variablen, damit die Upload-Zone auf hellem Grund ebenfalls
   funktioniert, falls das Formular einmal woanders steht. */

.cform-dark {
	--cf-text:  rgba(255,255,255,.88);
	--cf-mute:  rgba(255,255,255,.52);
	--cf-line:  rgba(255,255,255,.24);
	--cf-focus: #fff;
	--cf-flaeche: rgba(255,255,255,.04);
}

.cform-label,
.cform .opt {
	font-family: var(--f-head);
	letter-spacing: .16em;
	text-transform: uppercase;
	font-size: 11px;
	font-weight: 600;
	color: var(--grey-2);
	display: block;
	margin-bottom: 8px;
}
.cform .opt {
	display: inline;
	margin: 0;
	text-transform: none;
	letter-spacing: .02em;
	font-weight: 400;
}

.cform-dark label,
.cform-dark .cform-label { color: var(--cf-mute); }
.cform-dark .opt { color: var(--cf-mute); }

.cform-dark input,
.cform-dark textarea,
.cform-dark select {
	color: var(--cf-text);
	border-bottom-color: var(--cf-line);
	/* background-color, nicht die Kurzschreibweise: „background: transparent"
	   würde auch repeat/position/size zurücksetzen, und der Pfeil des
	   Auswahlfeldes kachelte dann über das ganze Feld. */
	background-color: transparent;
}
.cform-dark input::placeholder,
.cform-dark textarea::placeholder { color: rgba(255,255,255,.3); }
.cform-dark input:focus,
.cform-dark textarea:focus,
.cform-dark select:focus { border-bottom-color: var(--cf-focus); }
.cform-dark select {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23ffffff' stroke-width='1.4'><path d='M1 1.5 6 6.5 11 1.5'/></svg>");
	background-repeat: no-repeat;
	background-position: right 1px center;
	background-size: 12px;
}
/* Der Browser färbt automatisch ausgefüllte Felder weiß ein — auf Dunkel
   wäre die Eingabe danach unlesbar. */
.cform-dark input:-webkit-autofill,
.cform-dark input:-webkit-autofill:focus {
	-webkit-text-fill-color: #fff;
	-webkit-box-shadow: 0 0 0 60px #15161a inset;
	caret-color: #fff;
}

.cform-dark .k-check input { border-color: var(--cf-line); }
.cform-dark .k-check input:checked { background: #fff; border-color: #fff; }
.cform-dark .k-check input:checked::after { border-color: #15161a; }
.cform-dark .k-check input:focus-visible { outline-color: #fff; }
.cform-dark .k-check label { color: var(--cf-mute); }
.cform-dark .k-check a { color: #fff; }

.cform-dark .k-form-foot .note { color: rgba(255,255,255,.42); max-width: 40ch; }

/* Ungültige Eingaben auf dunklem Grund */
.cform-dark input:invalid:not(:placeholder-shown),
.cform-dark textarea:invalid:not(:placeholder-shown) { border-bottom-color: #e08b8b; }

/* Rückmeldung über dem Formular, dunkle Fassung */
.cform-dark-notice .corelaw-formnotice,
.kr-bw-main .corelaw-formnotice {
	background: rgba(255,255,255,.06);
	border-left-color: #fff;
	color: rgba(255,255,255,.9);
}
.kr-bw-main .corelaw-formnotice--error {
	background: rgba(224,139,139,.12);
	border-left-color: #e08b8b;
	color: #f3c9c9;
}

/* Heller Knopf auf dunklem Grund (Gegenstück zu .btn.solid) */
.btn.solid-light {
	background: #fff;
	color: #15161a;
	border-color: #fff;
	--btn-line: #15161a;
}
.btn.solid-light:hover { color: #15161a; }
.btn[disabled] { opacity: .5; pointer-events: none; }


/* ------------------------------------------------------ Upload-Zone ---------- */
/* Das <input type="file"> bleibt im DOM und bedienbar — es liegt nur unsichtbar
   unter dem Label. Ohne JavaScript ist die Zone damit ein normales
   Mehrfach-Dateifeld, mit JavaScript kommen Ablegen und die Liste dazu. */

.uz { position: relative; }

.uz .uz-input {
	position: absolute;
	width: 1px; height: 1px;
	opacity: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
}

.uz .uz-feld {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
	padding: clamp(28px, 4vw, 44px) 24px;
	border: 1px dashed var(--cf-line, var(--line));
	background: var(--cf-flaeche, var(--paper-2));
	cursor: pointer;
	transition: border-color .3s var(--ease), background .3s var(--ease);
	/* die Grundregel .cform label setzt Versalien und Sperrung — hier nicht */
	font-family: var(--f-body);
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
	margin: 0;
}
.uz .uz-feld:hover,
.uz.is-over .uz-feld { border-color: var(--cf-focus, var(--navy)); background: rgba(255,255,255,.07); }
.uz .uz-input:focus-visible + .uz-feld { outline: 2px solid var(--cf-focus, var(--navy)); outline-offset: 3px; }

.uz .uz-icon { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }

.uz .uz-titel { font-size: 15px; color: var(--cf-text, var(--ink)); letter-spacing: .01em; }
.uz .uz-link { text-decoration: underline; text-underline-offset: 3px; }
.uz .uz-hinweis { font-size: 12px; line-height: 1.7; color: var(--cf-mute, var(--grey-2)); max-width: 46ch; }

/* Liste der gewählten Dateien */
.uz .uz-liste { list-style: none; margin: 0; padding: 0; }
.uz .uz-liste:not(:empty) { margin-top: 14px; display: grid; gap: 1px; }
.uz .uz-datei {
	display: flex; align-items: center; gap: 14px;
	padding: 11px 0;
	border-bottom: 1px solid var(--cf-line, var(--line));
	font-size: 13.5px;
	color: var(--cf-text, var(--ink));
}
.uz .uz-datei:first-child { border-top: 1px solid var(--cf-line, var(--line)); }
.uz .uz-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uz .uz-groesse { flex: 0 0 auto; font-size: 12px; color: var(--cf-mute, var(--grey-2)); font-variant-numeric: tabular-nums; }
.uz .uz-weg {
	flex: 0 0 auto;
	width: 26px; height: 26px;
	display: grid; place-items: center;
	border: 0; background: transparent; cursor: pointer;
	color: var(--cf-mute, var(--grey-2));
	transition: color .3s var(--ease);
}
.uz .uz-weg:hover { color: var(--cf-focus, var(--ink)); }
.uz .uz-weg:focus-visible { outline: 2px solid var(--cf-focus, var(--navy)); outline-offset: 1px; }
.uz .uz-weg svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; fill: none; }

.uz .uz-fehler {
	margin: 12px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: #e08b8b;
}
.uz .uz-fehler[hidden] { display: none; }


/* ---------------------------------------- Anordnung in der Sektion „Bewerbung" */

.kr-bw {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: clamp(36px, 5vw, 80px);
	align-items: start;
}
/* .rgw-end p greift sonst bis in die Formularhinweise hinein */
.kr-bw p { max-width: none; margin: 0; font-size: inherit; line-height: inherit; color: inherit; }
.kr-bw-lead { color: rgba(255,255,255,.62); }

.kr-bw-h3 {
	font-family: var(--f-head);
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: .16em;
	font-size: 13px;
	color: #fff;
	margin: 0 0 clamp(24px, 2.6vw, 32px);
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(255,255,255,.14);
}

.kr-bw-side .kr-adr { margin-bottom: clamp(26px, 3vw, 38px); }

@media (max-width: 980px) {
	.kr-bw { grid-template-columns: 1fr; }
	.kr-bw-side { border-top: 1px solid rgba(255,255,255,.14); padding-top: clamp(32px, 6vw, 48px); }
	.kr-bw-side .kr-bw-h3 { border-bottom: 0; padding-bottom: 0; }
}
