/*
   ROHES, INDUSTRIAL & HIGH-END MINIMALISTISCHES DESIGN FÜR 4/4 ZÜRICH
   Fokus: Massives Logo, brutale Kontraste, extreme Hierarchie.
*/

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	background: #000000;
}

body {
	background-color: #000000;
	color: #ffffff;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	padding: 60px 20px;
	overflow-x: hidden;
	letter-spacing: 0.05em;
}

/* Haupt-Container zentriert den gesamten Content */
.main-container {
	width: 100%;
	max-width: 650px;
	text-align: center;
	margin: auto;
}

/* 1. GIGANTISCHES LOGO (Der unübersehbare Monolith) */
.logo-area {
	margin-bottom: 70px;
}

.logo-image {
	display: block;
	height: auto;
	margin: 0 auto;
	max-width: 420px;
	width: 100%;
}

/* 2. TEXT-HIERARCHIE & STRUKTUR */

/* Das exklusive Musik-Versprechen */
.manifesto {
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.4;
	text-transform: uppercase;
	margin-bottom: 50px;
	padding: 0 10px;
	letter-spacing: 0.08em;
}

/* Das Datums- und Orts-Koordinaten-Paket (Harter Block) */
.coordinates-block {
	margin-bottom: 50px;
	text-transform: uppercase;
}

.launch-date {
	font-size: 1.5rem;
	font-weight: 700;
	color: #ffffff;
	margin-bottom: 5px;
	letter-spacing: 0.1em;
}

.local-code {
	font-size: 1.5rem;
	font-weight: 700;
	color: #ffffff;
	letter-spacing: 0.1em;
}

/* Das Kleingedruckte / System-Infos: Winzig, grau, eng zusammen */
.system-info {
	font-size: 0.75rem;
	font-weight: 400;
	color: #777777;
	text-transform: uppercase;
	line-height: 1.8;
	margin-bottom: 60px;
	letter-spacing: 0.12em;
}

/* 3. COMPACT FORMULAR */
.form-container {
	width: 100%;
	max-width: 380px;
	margin: 0 auto;
}

/* Das Eingabefeld: Komplett rahmenlos, nur eine feine Linie unten */
.email-input {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	background: transparent;
	border: none;
	border-bottom: 1px solid #222222;
	border-radius: 0;
	padding: 18px 0;
	color: #ffffff;
	font-family: inherit;
	font-size: 1rem;
	text-align: center;
	outline: none;
	transition: border-color 0.4s ease;
	text-transform: uppercase;
	letter-spacing: 0.15em;
}

/* Fokus-Effekt: Linie wird weiss beim Klicken */
.email-input:focus {
	border-color: #ffffff;
}

/* Platzhalter-Styling (Kalt und minimalistisch) */
.email-input::placeholder {
	color: #333333;
	text-transform: uppercase;
}

/* Der Button: Laut, freistehend, purer Textdruck */
.submit-button {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	border: none;
	color: #ffffff;
	display: inline-block;
	font-family: inherit;
	font-size: 1.25rem;
	font-weight: 900;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	margin-top: 40px;
	padding: 10px 20px;
	transition: transform 0.2s ease, opacity 0.2s ease;
	letter-spacing: 0.05em;
}

/* Hover-Effekt */
.submit-button:hover {
	opacity: 0.7;
	transform: translate(2px, -2px);
}

/* 4. RECHTLICHER FOOTER (DEZENT GANZ UNTEN) */
footer {
	font-size: 0.65rem;
	color: #222222;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-top: 50px;
}

footer a {
	color: #222222;
	text-decoration: none;
	transition: color 0.2s ease;
	margin: 0 12px;
}

footer a:hover {
	color: #555555;
}

/* 5. RECHTSTEXTE (IMPRESSUM / DATENSCHUTZ) */
.legal .logo-area {
	margin-bottom: 40px;
}

.legal .logo-image {
	max-width: 120px;
}

.legal .manifesto {
	margin-bottom: 36px;
}

.legal-section {
	text-align: left;
	margin-bottom: 32px;
}

.legal-section h2 {
	color: #ffffff;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin-bottom: 10px;
	text-transform: uppercase;
}

.legal-section p,
.legal-section li {
	color: #888888;
	font-size: 0.85rem;
	letter-spacing: 0.03em;
	line-height: 1.7;
}

.legal-section p + p {
	margin-top: 10px;
}

.legal-section strong {
	color: #ffffff;
	font-weight: 500;
}

.legal-section a {
	color: #ffffff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Responsive Anpassung für Smartphones (Mobile First) */
@media (max-width: 480px) {
	.logo-image { max-width: 270px; }
	.legal .logo-image { max-width: 100px; }
	.manifesto { font-size: 1.15rem; margin-bottom: 40px; }
	.launch-date, .local-code { font-size: 1.25rem; }
	body { padding: 40px 15px; }
}