/*
 * Crafting – Interessentenliste
 * Alle Regeln sind auf .dw3dc beschränkt und verändern den Rest der Website nicht.
 * Mobile first: Basis = Smartphone, ab 600px etwas mehr Luft.
 */

.dw3dc {
	--dw3dc-accent: #1d5fa8;
	--dw3dc-accent-hover: #164a84;
	--dw3dc-text: inherit;
	--dw3dc-border: #8a8f98;
	--dw3dc-error: #b3261e;
	--dw3dc-error-bg: #fdecea;
	--dw3dc-success: #1e6b34;
	--dw3dc-success-bg: #e8f5ec;
	--dw3dc-info-bg: #eef3fa;
	--dw3dc-warning: #7a4a00;
	--dw3dc-warning-bg: #fff4e0;
	--dw3dc-radius: 8px;

	box-sizing: border-box;
	width: 100%;
	max-width: 36rem;
	margin: 0 auto 2rem;
	color: var(--dw3dc-text);
	line-height: 1.55;
	overflow-wrap: break-word;
	word-break: normal;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

.dw3dc *,
.dw3dc *::before,
.dw3dc *::after {
	box-sizing: inherit;
}

.dw3dc p {
	margin: 0 0 0.9em;
}

.dw3dc__intro {
	margin-bottom: 1.5rem;
}

.dw3dc__headline {
	margin: 0 0 0.75rem;
	font-size: 1.5rem;
	line-height: 1.25;
}

.dw3dc__note {
	font-weight: 600;
}

/* Formular */
.dw3dc__form {
	margin: 0;
}

.dw3dc__field {
	margin: 0 0 1.25rem;
}

.dw3dc__label {
	display: block;
	margin: 0 0 0.35rem;
	font-weight: 600;
}

.dw3dc__required {
	font-weight: 400;
	font-size: 0.875em;
	opacity: 0.8;
}

/* 16px verhindert das automatische Heranzoomen in iOS Safari. */
.dw3dc .dw3dc__input {
	display: block;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 0.65rem 0.8rem;
	font: inherit;
	font-size: 16px;
	line-height: 1.4;
	color: #1a1a1a;
	background: #fff;
	border: 2px solid var(--dw3dc-border);
	border-radius: var(--dw3dc-radius);
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

.dw3dc .dw3dc__input:focus {
	border-color: var(--dw3dc-accent);
	outline: 3px solid rgba(29, 95, 168, 0.35);
	outline-offset: 1px;
}

.dw3dc__field--error .dw3dc__input {
	border-color: var(--dw3dc-error);
}

.dw3dc__error {
	margin: 0.35rem 0 0 !important;
	color: var(--dw3dc-error);
	font-size: 0.95rem;
	font-weight: 600;
}

/* Einwilligung: große Tippfläche */
.dw3dc__check {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}

.dw3dc .dw3dc__checkbox {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin: 0.1rem 0 0;
	accent-color: var(--dw3dc-accent);
	cursor: pointer;
}

.dw3dc .dw3dc__checkbox:focus-visible {
	outline: 3px solid var(--dw3dc-accent);
	outline-offset: 2px;
}

.dw3dc__check label {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.1rem 0;
	cursor: pointer;
}

.dw3dc__field--error .dw3dc__check {
	padding: 0.6rem;
	border: 2px solid var(--dw3dc-error);
	border-radius: var(--dw3dc-radius);
}

.dw3dc__privacy {
	margin: 0.5rem 0 0 calc(24px + 0.75rem) !important;
	font-size: 0.925rem;
}

.dw3dc a {
	color: var(--dw3dc-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.dw3dc a:focus-visible {
	outline: 3px solid var(--dw3dc-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Button: volle Breite auf dem Handy, mindestens 48px hoch */
.dw3dc .dw3dc__button {
	display: block;
	width: 100%;
	min-height: 52px;
	margin: 0.5rem 0 0;
	padding: 0.8rem 1.25rem;
	font: inherit;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
	text-align: center;
	text-transform: none;
	letter-spacing: normal;
	background: var(--dw3dc-accent);
	border: 0;
	border-radius: var(--dw3dc-radius);
	box-shadow: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	touch-action: manipulation;
}

.dw3dc .dw3dc__button:hover {
	background: var(--dw3dc-accent-hover);
}

.dw3dc .dw3dc__button:focus-visible {
	outline: 3px solid var(--dw3dc-accent);
	outline-offset: 3px;
}

.dw3dc .dw3dc__button[disabled] {
	opacity: 0.7;
	cursor: wait;
}

/* Meldungen */
.dw3dc__notice {
	margin: 0 0 1.25rem;
	padding: 1rem;
	border-left: 5px solid var(--dw3dc-accent);
	border-radius: var(--dw3dc-radius);
	background: var(--dw3dc-info-bg);
	color: #1a1a1a;
}

.dw3dc__notice:focus {
	outline: 3px solid var(--dw3dc-accent);
	outline-offset: 2px;
}

.dw3dc__notice p:last-child,
.dw3dc__notice ul:last-child {
	margin-bottom: 0;
}

.dw3dc__notice ul {
	margin: 0 0 0 1.2rem;
	padding: 0;
}

.dw3dc__notice-title {
	font-weight: 700;
	font-size: 1.1rem;
}

.dw3dc__notice--success {
	border-left-color: var(--dw3dc-success);
	background: var(--dw3dc-success-bg);
}

.dw3dc__notice--warning {
	border-left-color: var(--dw3dc-warning);
	background: var(--dw3dc-warning-bg);
}

.dw3dc__notice--error {
	border-left-color: var(--dw3dc-error);
	background: var(--dw3dc-error-bg);
}

.dw3dc__notice--error a {
	color: var(--dw3dc-error);
}

/* Honeypot und Screenreader-Text */
.dw3dc .dw3dc__hp {
	position: absolute !important;
	left: -10000px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.dw3dc .dw3dc__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Tablet / Desktop */
@media (min-width: 600px) {
	.dw3dc__headline {
		font-size: 1.75rem;
	}

	.dw3dc .dw3dc__button {
		display: inline-block;
		width: auto;
		min-width: 16rem;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.dw3dc .dw3dc__button {
		transition: background-color 0.15s ease;
	}
}