/* Handmade-LiveRock – Farewell page
   Farben und Schriften aus dem bisherigen WordPress-Theme "handmade-liverock-2022" übernommen. */

@font-face {
	font-family: "moanhand";
	src: url("../fonts/moanhand.ttf") format("truetype");
	font-display: swap;
}
@font-face {
	font-family: "M PLUS Rounded 1c";
	font-style: normal;
	font-weight: 300;
	src: url("../fonts/m-plus-rounded-1c-300.woff2") format("woff2");
	font-display: swap;
}
@font-face {
	font-family: "M PLUS Rounded 1c";
	font-style: normal;
	font-weight: 700;
	src: url("../fonts/m-plus-rounded-1c-700.woff2") format("woff2");
	font-display: swap;
}

:root {
	--bg: #1d1d1d;
	--text: #fff9eb;
	--orange: #f39200;
	--darkred: #6c150e;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background-color: var(--bg);
	color: var(--text);
	font-family: "M PLUS Rounded 1c", system-ui, sans-serif;
	font-weight: 300;
	font-size: 1.125rem;
	line-height: 1.6;
	overflow-x: hidden;
	overflow-wrap: break-word;
}

a { color: var(--orange); }
a:hover, a:focus-visible { color: #ffb84d; }

strong { font-weight: 700; }

h1, h3 {
	color: var(--orange);
	font-family: "moanhand", cursive;
	font-weight: normal;
	line-height: 1.2;
}

h1 {
	font-size: calc(2rem + 1.5vw);
	text-align: center;
	width: fit-content;
	margin: 0 auto 2rem;
	padding: 1rem 2rem;
	background: url("../img/title_bg.svg") center / 100% 100% no-repeat;
}

h3 {
	font-size: calc(1.4rem + .6vw);
	margin: 2rem 0 .5rem;
}

/* ---------- Landing ---------- */

/* Proportionen vom Original-Theme übernommen (gemessen bei 1440 × 900):
   Logo = 70 % der Fensterbreite, Höhe 37 % seiner Breite, vertikal zentriert.
   Alle Stempelmaße sind in cqi = 1 % der Logobreite angegeben.
   Der Stempel ragt ca. 8 cqi unter das Logo; ::before/::after reservieren
   diesen Platz oben und unten, damit das Logo mittig bleibt und sich bei
   niedrigen Fenstern nichts mit dem Pfeil überlappt (Breite zusätzlich an
   die Fensterhöhe gekoppelt: Inhalt ist 0,53 × so hoch wie breit). */
.landing {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	min-height: 100svh;
	padding: 5rem 0;
	background: var(--bg);
}

.landing-wrapper {
	position: relative;
	container-type: inline-size;
	width: min(70vw, 1400px, calc((100vh - 10rem) * 1.85));
	width: min(70vw, 1400px, calc((100svh - 10rem) * 1.85));
	min-width: min(88vw, 280px);
}

.landing-wrapper::before,
.landing-wrapper::after {
	content: "";
	display: block;
	height: 8cqi;
}

.landing-logo {
	display: block;
	width: 100%;
	height: auto;
	opacity: 0;
	animation: fadein 2s ease-in .5s forwards;
}

/* Nachbau des bisherigen Slogan-Stempels ("Rock comes to town!"):
   orangefarbene Handschrift auf dunkelrotem Grunge-Hintergrund (title_bg.svg
   hat exakt das Seitenverhältnis des alten Stempels). Original: 30,7 × 13,2 cqi,
   Mittelpunkt bei 32,5 / 34,6 cqi relativ zur Logo-Oberkante, Schrift ≈ 4,9 cqi. */
.landing-slogan {
	position: absolute;
	left: calc(32.5cqi - 30.7cqi / 2);
	top: calc(8cqi + 34.6cqi - 13.2cqi / 2);   /* 8cqi = ::before-Abstand */
	width: 30.7cqi;
	height: 13.2cqi;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "moanhand", cursive;
	font-size: 4.7cqi;
	line-height: 1.05;
	text-align: center;
	white-space: nowrap;
	color: var(--orange);
	background: url("../img/title_bg.svg") center / 100% 100% no-repeat;
	transform: rotate(-15deg);
	transform-origin: center;
	opacity: 0;
	animation: fadein 2s ease-in 2s forwards;
}

.landing-chevron-down {
	position: absolute;
	left: 50%;
	bottom: 0;
	margin-bottom: 1.75rem;
	color: var(--text);
	transform: translateX(-50%);
	opacity: 0;
	animation: fadein 2s ease-in 3s forwards, bounce .8s linear 3s 5 both;
}
.landing-chevron-down:hover, .landing-chevron-down:focus-visible { color: var(--orange); }

@keyframes fadein {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes bounce {
	0%, 100% { transform: translate(-50%, 0); }
	50%      { transform: translate(-50%, -12px); }
}

/* ---------- Abschied ---------- */

.parallax {
	position: relative;
	padding: 4rem 1rem;
	background-color: rgba(29, 29, 29, .6);
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	text-shadow: .15rem .15rem .15rem rgba(29, 29, 29, .8);
}

.bg-stage {
	min-height: 32rem;
	background-image:
		linear-gradient(rgba(29, 29, 29, .55), rgba(29, 29, 29, .55)),
		url("../img/bg-stage.jpg");
}

/* Mobile Browser unterstützen background-attachment: fixed nur schlecht */
@media (hover: none), (max-width: 1366px) {
	.parallax { background-attachment: scroll; }
}

.farewell {
	max-width: 42rem;
	margin: 0 auto;
	padding: 2rem;
	text-align: center;
	font-size: 1.25rem;
	background-color: rgba(29, 29, 29, .55);
	border-radius: .5rem;
}

.farewell p { margin: 0 0 1rem; }

.signature {
	font-family: "moanhand", cursive;
	color: var(--orange);
	font-size: 2rem;
	line-height: 1.3;
	margin-top: 1.5rem !important;
}

/* ---------- Impressum ---------- */

.section-2 {
	padding: 4rem 1rem;
	background-color: var(--bg);
}

.imprint {
	max-width: 42rem;
	margin: 0 auto;
}

.imprint p { margin: 0 0 1rem; }

.imprint .source { font-size: .9rem; opacity: .8; }

/* ---------- Footer ---------- */

.site-footer {
	padding: 1.5rem 1rem 2rem;
	text-align: center;
	font-size: .95rem;
	border-top: 1px solid rgba(255, 249, 235, .1);
}

.site-footer p { margin: 0; }

/* ---------- Kleine Bildschirme ---------- */

@media (max-width: 576px) {
	.landing-wrapper { width: min(88vw, calc((100svh - 10rem) * 1.85)); }
	.farewell { padding: 1.25rem; font-size: 1.1rem; }
	h1 { padding: .75rem 1.5rem; }
}

/* ---------- Bewegung reduzieren ---------- */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.landing-logo, .landing-slogan, .landing-chevron-down {
		animation: none;
		opacity: 1;
	}
}