/**
 * BNI Veranstaltungs-Anmeldung - Frontend-Styles
 * Neutral gehalten. Farben ueber die CSS-Variablen unten anpassbar.
 */
.bni-wrap {
	--bni-accent: #c8102e;      /* Akzent, z.B. fuer Buttons */
	--bni-accent-text: #ffffff;
	--bni-border: #e2e2e2;
	--bni-bg: #f7f7f8;
	--bni-radius: 10px;
	max-width: 640px;
	margin: 0 auto;
	font-size: 16px;
	line-height: 1.5;
}

.bni-anmeldung .bni-loading,
.bni-anmeldung .bni-err {
	padding: 12px 0;
	color: #555;
}

.bni-intro {
	margin: 0 0 18px;
}

.bni-form {
	background: var(--bni-bg);
	border: 1px solid var(--bni-border);
	border-radius: var(--bni-radius);
	padding: 20px;
	margin-bottom: 24px;
}

.bni-row {
	margin-bottom: 16px;
}

.bni-label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
}

.bni-name {
	width: 100%;
	padding: 11px 12px;
	border: 1px solid #c9c9c9;
	border-radius: 8px;
	font-size: 16px;
	box-sizing: border-box;
}
.bni-name:focus {
	outline: none;
	border-color: var(--bni-accent);
	box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.12);
}

.bni-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.bni-options {
	border: none;
	padding: 0;
	margin: 0 0 18px;
}
.bni-options legend {
	padding: 0;
	margin-bottom: 8px;
}
.bni-option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 12px;
	border: 1px solid #d5d5d5;
	border-radius: 8px;
	background: #fff;
	margin-bottom: 8px;
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s;
}
.bni-option:hover {
	border-color: var(--bni-accent);
}
.bni-option input {
	width: 18px;
	height: 18px;
	accent-color: var(--bni-accent);
	margin: 0;
	flex: 0 0 auto;
}

.bni-submit {
	display: inline-block;
	background: var(--bni-accent);
	color: var(--bni-accent-text);
	border: none;
	border-radius: 8px;
	padding: 12px 22px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
}
.bni-submit:hover { filter: brightness(0.94); }
.bni-submit:disabled { opacity: .6; cursor: default; }

.bni-msg { margin-top: 12px; font-weight: 500; }
.bni-msg.bni-ok { color: #1a7f37; }
.bni-msg.bni-err { color: #b32d2e; }

.bni-closed {
	background: #fff4f4;
	border: 1px solid #f3caca;
	color: #b32d2e;
	padding: 14px 16px;
	border-radius: 8px;
	margin-bottom: 20px;
}

.bni-paypal {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 24px;
}
.bni-paypal-text { color: #444; }
.bni-paypal-btn {
	display: inline-block;
	background: #ffc439;
	color: #003087;
	text-decoration: none;
	font-weight: 700;
	padding: 10px 20px;
	border-radius: 8px;
}
.bni-paypal-btn:hover { filter: brightness(0.96); }

.bni-list-title {
	font-size: 18px;
	margin: 0 0 12px;
}
.bni-list-head {
	margin-bottom: 12px;
}
.bni-total {
	display: inline-block;
	background: #eef0f2;
	color: #333;
	font-weight: 600;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 14px;
}

.bni-group {
	border: 1px solid var(--bni-border);
	border-radius: var(--bni-radius);
	padding: 14px 16px;
	margin-bottom: 12px;
}
.bni-group-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.bni-group-label { font-weight: 600; }
.bni-group-count {
	background: var(--bni-accent);
	color: #fff;
	font-weight: 700;
	min-width: 26px;
	text-align: center;
	padding: 2px 9px;
	border-radius: 999px;
	font-size: 14px;
}
.bni-names {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.bni-names li {
	background: #eef0f2;
	padding: 4px 10px;
	border-radius: 6px;
	font-size: 14px;
}
.bni-empty {
	margin: 10px 0 0;
	color: #888;
	font-size: 14px;
}

@media (max-width: 480px) {
	.bni-wrap { font-size: 15px; }
	.bni-form { padding: 16px; }
}