/* Passwortseite der Vorschau – gleiche Sprache wie die Seite: Navy, Rot aus dem Logo, schräge Schnitte, Kursivschrift */
@font-face { font-family: "Saira"; font-style: normal; font-weight: 100 900; font-stretch: 75% 125%; font-display: swap; src: url("../fonts/Saira-normal-100_900.woff2") format("woff2"); }
@font-face { font-family: "Saira"; font-style: italic; font-weight: 100 900; font-stretch: 75% 125%; font-display: swap; src: url("../fonts/Saira-italic-100_900.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("../fonts/HankenGrotesk-normal-300_800.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/IBMPlexMono-normal-500.woff2") format("woff2"); }

:root {
	--navy-950: #050f1f; --navy-900: #081529; --navy-800: #0d2240; --navy-700: #132f57;
	--mist: #b0b7c1; --steel: #8fa5c2; --white: #fff; --red: #b72c3c; --red-hot: #e23a4f;
	--f-display: "Saira", "Arial Narrow", system-ui, sans-serif;
	--f-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
	--f-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;
	--ease: cubic-bezier(.2, .8, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: dark; }
body.gate {
	position: relative; margin: 0; min-height: 100vh; min-height: 100svh; display: grid; place-items: center;
	padding: clamp(24px, 5vw, 48px) 22px; overflow-x: clip; color: #dbe4ef; font: 400 17px/1.6 var(--f-body);
	background:
		linear-gradient(112deg, transparent 0 58%, rgba(226, 58, 79, .13) 58% 58.4%, transparent 58.4%),
		radial-gradient(900px 520px at 78% 8%, rgba(25, 57, 97, .75), transparent 70%),
		radial-gradient(760px 480px at 8% 100%, rgba(226, 58, 79, .14), transparent 70%),
		var(--navy-950);
}
::selection { background: var(--red-hot); color: #fff; }
:focus-visible { outline: 3px solid var(--red-hot); outline-offset: 3px; }
h1, p { margin: 0; }

.gate-wrap { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.gate-card {
	position: relative; width: min(100%, 540px); padding: clamp(28px, 5vw, 44px) clamp(22px, 5vw, 44px) clamp(30px, 5vw, 42px);
	background: linear-gradient(180deg, rgba(19, 47, 87, .55), rgba(8, 21, 41, .92));
	border: 1px solid rgba(143, 165, 194, .28); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
}
.gate-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--red-hot); }
.gate-logo { display: block; width: auto; height: clamp(54px, 9vw, 70px); }
.gate-eyebrow { display: flex; align-items: center; gap: .7em; margin-top: 26px; font: 500 .76rem/1.3 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--steel); }
.gate-eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--red-hot); flex: none; transform: skewX(-30deg); }
h1 { margin-top: 12px; font: italic 800 clamp(2.1rem, 8.4vw, 3.2rem)/1 var(--f-display); text-transform: uppercase; letter-spacing: -.005em; color: #fff; text-wrap: balance; }
h1 em { font-style: italic; color: var(--red-hot); }
.gate-text { margin-top: 14px; color: var(--mist); }

.gate-form { margin-top: 26px; }
.gate-form label { display: block; margin-bottom: 9px; font: 500 .76rem/1.3 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--steel); }
.gate-field { display: flex; border: 2px solid rgba(143, 165, 194, .45); background: rgba(5, 15, 31, .85); transition: border-color .2s, box-shadow .2s; }
.gate-field:focus-within { border-color: var(--red-hot); box-shadow: 0 0 0 4px rgba(226, 58, 79, .18); }
.gate-field input { flex: 1; width: 100%; min-width: 0; border: 0; border-radius: 0; background: transparent; padding: .85em 1em; outline: 0; font: 500 1.1rem/1.2 var(--f-mono); letter-spacing: .05em; color: #fff; }
.gate-eye { flex: none; width: 54px; display: grid; place-items: center; border: 0; border-left: 2px solid rgba(143, 165, 194, .3); background: rgba(19, 47, 87, .5); color: var(--mist); cursor: pointer; transition: background .2s, color .2s; }
.gate-eye:hover, .gate-eye[aria-pressed="true"] { background: var(--red); color: #fff; }
.gate-eye:focus-visible { outline-offset: -6px; }
.gate-hint, .gate-error { margin: 14px 0 22px; font-size: .92rem; line-height: 1.45; color: var(--steel); }
.gate-error { padding: 10px 12px; border-left: 4px solid var(--red-hot); background: rgba(226, 58, 79, .14); color: #ffd3d8; font-weight: 600; }
.gate-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .7em; padding: .95em 1.6em; border: 0; cursor: pointer;
	background: var(--red-hot); color: #fff; font: italic 800 1.02rem/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase;
	clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); transition: background .2s, transform .2s var(--ease);
}
.gate-btn svg { transition: transform .25s var(--ease); }
.gate-btn:hover { background: var(--red); }
.gate-btn:hover svg { transform: translateX(5px); }
.gate-btn:active { transform: translateY(2px); }
.gate-foot { font: 500 .72rem/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: #5f77a0; text-align: center; }

@media (max-width: 480px) { .gate-btn { width: 100%; } }
@keyframes gate-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-10px); } 40% { transform: translateX(9px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(4px); } }
@keyframes gate-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
	.gate-card { animation: gate-in .6s var(--ease) both; }
	.gate-card.is-bad { animation: gate-shake .5s var(--ease); }
}