/* Baffo Nero 2.0: Sperrseite «Hier entsteht Baffo Nero» */
@font-face { font-family: Jost; src: url("../assets/fonts/jost-latin-wght-normal.woff2") format("woff2"); font-weight: 200 500; font-display: swap; }
@font-face { font-family: Newsreader; src: url("../assets/fonts/newsreader-latin-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Newsreader; src: url("../assets/fonts/newsreader-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
:root { color-scheme: dark; --gelb: #e8b23a; --grau: #c8c8c8; --grau-dunkel: #a3a3a3; --linie: #6e6e6e; --nacht: #1a1a1a; --rand: clamp(20px, 5vw, 72px); }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; background: #000; color: #fff; font: 400 clamp(1.125rem, 1.08rem + .15vw, 1.1875rem)/1.65 Newsreader, Georgia, serif; -webkit-font-smoothing: antialiased; overflow-x: clip; }
.sperre { width: 100%; max-width: calc(90rem + 2 * var(--rand)); margin: 0 auto; padding: clamp(32px, 6vw, 96px) var(--rand); display: grid; gap: clamp(32px, 4vw, 56px); align-content: center; min-height: 100vh; min-height: 100dvh; }
.logo-linie { position: relative; width: 100%; max-width: 620px; aspect-ratio: 1160 / 560; }
.logo-linie svg { display: block; width: 100%; height: auto; overflow: visible; }
.logo-linie::before { content: ""; position: absolute; right: 100%; width: 100vw; top: calc(474 / 560 * 100%); border-top: 1.5px solid var(--linie); margin-top: -.75px; }
.logo-linie::after { content: ""; position: absolute; top: -4%; bottom: -4%; right: -2%; left: -100vw; background: #000; transform: scaleX(0); transform-origin: right center; pointer-events: none; }
h1 { margin: 0; font: 300 clamp(2.375rem, 1.4rem + 3vw, 4rem)/1.06 Jost, "Century Gothic", sans-serif; letter-spacing: -.022em; }
.sperre__text { max-width: 36em; }
.sperre__text p { margin: 16px 0 0; color: var(--grau); }
.unterzeile { font-style: italic; font-size: clamp(1.25rem, 1.1rem + .45vw, 1.5rem); line-height: 1.45; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px !important; }
.knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border: 1.5px solid currentColor; border-radius: 999px; background: transparent; color: #fff; font: 450 1rem/1.2 Jost, sans-serif; letter-spacing: .005em; text-decoration: none; cursor: pointer; font-variant-numeric: tabular-nums; transition: background-color .2s, color .2s; }
.knopf--anrufen { background: var(--gelb); border-color: var(--gelb); color: #000; }
.knopf--anrufen:hover { text-decoration: underline; text-underline-offset: .2em; }
.knopf--kontur:hover, .knopf--weiss { background: #fff; color: #000; }
.knopf--weiss:hover { background: var(--grau); }
.sperre__form { max-width: 30rem; border-top: 1px solid var(--nacht); padding-top: 24px; }
label { display: block; margin-bottom: 8px; font: 450 1rem/1.3 Jost, sans-serif; color: var(--grau-dunkel); }
.zeile { display: flex; gap: 8px; }
input[type=password] { flex: 1; min-width: 0; min-height: 52px; padding: 0 20px; border: 1.5px solid var(--linie); border-radius: 999px; background: transparent; color: #fff; font: 400 1.0625rem/1 Jost, sans-serif; }
.fehler { margin: 0 0 12px; color: var(--gelb); }
.sperre__fuss { margin: 0; font: 400 .9375rem/1.5 Jost, sans-serif; color: var(--grau-dunkel); }
.sperre__fuss a { display: inline-flex; align-items: center; min-height: 44px; margin-right: 20px; color: var(--grau); }
:focus-visible { outline: 2px solid var(--gelb); outline-offset: 3px; }
@media (min-width: 1024px) {
	.sperre { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: calc(24px + 8.333%); align-items: end; }
	.sperre__marke { grid-column: 1 / -1; }
	.sperre__fuss { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: no-preference) {
	.logo-linie::after { animation: deckel 1.1s cubic-bezier(.65, 0, .35, 1) .1s both; }
	.logo-linie .punkt { transform-box: fill-box; transform-origin: center; animation: punkt .24s cubic-bezier(.16, .84, .24, 1) .96s both; }
}
@keyframes deckel { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes punkt { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }