/* OHB IR Gate – eigenstaendiges Interstitial im Modal-Look (zentrierte Karte
   auf abgedunkeltem Backdrop). Rein optisch; das Gate bleibt serverseitig,
   der geschuetzte Inhalt wird nicht geladen. Akzent ueber --ohb-accent. */
:root {
	--ohb-accent: #0b3d6b;
	--ohb-accent-dark: #082c4d;
	--ohb-ink: #1d2733;
	--ohb-muted: #5b6776;
	--ohb-line: #d9dee5;
	--ohb-backdrop: #17222f; /* abgedunkelter Hintergrund hinter dem Modal */
	--ohb-card: #ffffff;
}

* { box-sizing: border-box; }

body.ohb-gate {
	margin: 0;
	padding: 24px;
	min-height: 100vh;
	display: flex; /* zentriert das Modal */
	background: var(--ohb-backdrop);
	color: var(--ohb-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.6;
}

/* Modal-Panel: margin:auto zentriert und vermeidet Clipping bei langem Text */
.ohb-gate__wrap {
	margin: auto;
	width: 100%;
	max-width: 620px;
	background: var(--ohb-card);
	border-radius: 12px;
	box-shadow: 0 24px 64px rgba(0, 0, 0, .45);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* Titelleiste im Panel */
.ohb-gate__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 28px;
	border-bottom: 1px solid var(--ohb-line);
}

.ohb-gate__brand {
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--ohb-accent);
	font-size: 16px;
}

.ohb-gate__lang {
	border: 1px solid var(--ohb-line);
	background: #fff;
	color: var(--ohb-ink);
	border-radius: 999px;
	padding: 6px 14px;
	font: inherit;
	font-size: 14px;
	cursor: pointer;
}
.ohb-gate__lang:hover { border-color: var(--ohb-accent); color: var(--ohb-accent); }

/* Inhaltsbereich – kein eigenes Karten-Chrome mehr (das Panel ist die Karte) */
.ohb-gate__box { padding: 28px; }

.ohb-gate__title {
	margin: 0 0 16px;
	font-size: 20px;
	line-height: 1.3;
	color: var(--ohb-accent);
	letter-spacing: .01em;
}

.ohb-gate__lead { margin: 0 0 24px; }

.ohb-gate__legal { margin: 0 0 24px; font-size: 14.5px; color: #2a3340; }
.ohb-gate__legal p { margin: 0 0 14px; }
.ohb-gate__legal strong { color: var(--ohb-ink); }

.ohb-gate__form { display: flex; flex-direction: column; gap: 18px; }

.ohb-gate__field { display: flex; flex-direction: column; gap: 6px; }
.ohb-gate__field > span { font-size: 14px; color: var(--ohb-muted); }
.ohb-gate__field select,
.ohb-gate__field input {
	width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--ohb-line);
	border-radius: 6px;
	font: inherit;
	background: #fff;
	color: var(--ohb-ink);
}
.ohb-gate__field select:focus,
.ohb-gate__field input:focus {
	outline: none;
	border-color: var(--ohb-accent);
	box-shadow: 0 0 0 3px rgba(11, 61, 107, .12);
}

.ohb-gate__check {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: 14px;
	border: 1px solid var(--ohb-line);
	border-radius: 6px;
	padding: 14px;
	background: #fafbfc;
}
.ohb-gate__check input { margin-top: 4px; flex: 0 0 auto; width: 18px; height: 18px; }

.ohb-gate__note { font-size: 13.5px; color: var(--ohb-muted); margin: 4px 0 0; }

.ohb-gate__actions {
	display: flex;
	gap: 12px;
	justify-content: flex-end;
	flex-wrap: wrap;
	margin-top: 6px;
}

.ohb-gate__btn {
	appearance: none;
	border: 1px solid var(--ohb-accent);
	background: var(--ohb-accent);
	color: #fff;
	font: inherit;
	font-weight: 600;
	padding: 12px 24px;
	border-radius: 6px;
	cursor: pointer;
}
.ohb-gate__btn:hover { background: var(--ohb-accent-dark); border-color: var(--ohb-accent-dark); }

.ohb-gate__btn--ghost { background: #fff; color: var(--ohb-muted); border-color: var(--ohb-line); }
.ohb-gate__btn--ghost:hover { background: #fff; color: var(--ohb-ink); border-color: var(--ohb-muted); }

.ohb-gate__home { color: var(--ohb-accent); font-weight: 600; }

/* Fussleiste im Panel */
.ohb-gate__foot {
	padding: 14px 28px;
	border-top: 1px solid var(--ohb-line);
	text-align: center;
	font-size: 12px;
	color: var(--ohb-muted);
}

@media (max-width: 560px) {
	body.ohb-gate { padding: 0; }
	.ohb-gate__wrap { max-width: 100%; min-height: 100vh; border-radius: 0; box-shadow: none; }
	.ohb-gate__box { padding: 22px; }
	.ohb-gate__bar, .ohb-gate__foot { padding-left: 22px; padding-right: 22px; }
	.ohb-gate__actions { justify-content: stretch; }
	.ohb-gate__actions .ohb-gate__btn { flex: 1 1 auto; text-align: center; }
}