/*
Theme Name: LSG Booking
Description: Schlankes Theme für das Reservierungsportal der Laienspielgruppe Maihingen – im Erscheinungsbild der Vereinsseite lsg-maihingen.de. Gedacht für das Plugin „LSG Reservierung“.
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.0
Author: Laienspielgruppe Maihingen e.V.
Text Domain: lsg-booking
*/

@font-face { font-family: Fraunces; font-style: normal; font-display: swap; font-weight: 100 900; src: url("assets/fonts/fraunces-latin-opsz-normal.woff2") format("woff2"); }
@font-face { font-family: Fraunces; font-style: italic; font-display: swap; font-weight: 100 900; src: url("assets/fonts/fraunces-latin-opsz-italic.woff2") format("woff2"); }
@font-face { font-family: Figtree; font-style: normal; font-display: swap; font-weight: 300 900; src: url("assets/fonts/figtree-latin-wght-normal.woff2") format("woff2"); }

:root {
	color-scheme: dark;
	--nacht: #040d09;
	--tann: #0a2218;
	--samt: #12382a;
	--moos: #1d5540;
	--licht: #f5f8f3;
	--leise: rgba(245, 248, 243, .74);
	--hauch: rgba(245, 248, 243, .07);
	--rampe: #ecc97a;
	--display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
	--text: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--gutter: clamp(20px, 5vw, 64px);
	--mass: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--nacht);
	color: var(--licht);
	font-family: var(--text);
	font-size: 17px;
	line-height: 1.7;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
}
a { color: inherit; }
img { max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--display); font-weight: 340; line-height: 1.08; margin: 0; text-wrap: balance; letter-spacing: -.01em; }
h1 em, h2 em { font-style: italic; font-weight: 300; color: var(--rampe); }
:focus-visible { outline: 2px solid var(--rampe); outline-offset: 4px; border-radius: 8px; }

/* Ruhiger Vorhang-Schein hinter dem Seitenkopf, läuft weich in die Nacht aus. */
.schein {
	position: absolute; inset: 0 0 auto 0; height: min(760px, 110svh); z-index: -1; pointer-events: none;
	background:
		radial-gradient(55% 60% at 50% 0%, rgba(236, 201, 122, .13), transparent 62%),
		repeating-linear-gradient(90deg, #08211a 0, #16483a 2.6%, #0b2a20 5.4%, #1c5744 8.4%, #0a251c 11.6%, #124033 14%, #08211a 16.6%);
	-webkit-mask-image: linear-gradient(#000 0%, rgba(0, 0, 0, .55) 45%, transparent 100%);
	mask-image: linear-gradient(#000 0%, rgba(0, 0, 0, .55) 45%, transparent 100%);
	opacity: .62;
}

.sprung { position: absolute; left: -9999px; top: 10px; z-index: 50; background: var(--licht); color: var(--tann); padding: 10px 18px; border-radius: 99px; }
.sprung:focus { left: var(--gutter); }

/* Kopfleiste */
.leiste {
	position: fixed; top: 0; left: 0; right: 0; z-index: 30;
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
	padding: calc(env(safe-area-inset-top, 0px) + 14px) var(--gutter) 34px;
}
.leiste::before {
	content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .6s;
	background: linear-gradient(rgba(4, 13, 9, .97) 0%, rgba(4, 13, 9, .9) 50%, rgba(4, 13, 9, 0) 100%);
	-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
	-webkit-mask-image: linear-gradient(#000 0%, #000 55%, transparent 100%); mask-image: linear-gradient(#000 0%, #000 55%, transparent 100%);
}
.leiste.unterwegs::before { opacity: 1; }
.admin-bar .leiste { top: 32px; }
.marke { display: flex; align-items: center; gap: 12px; min-width: 0; margin-right: auto; text-decoration: none; font-family: var(--display); font-size: 1.05rem; letter-spacing: .01em; white-space: nowrap; }
.marke img { width: 38px; height: 38px; display: block; }
.marke span { overflow: hidden; text-overflow: ellipsis; }
.marke .kurz { display: none; }
.wege { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; }
.wege a { position: relative; display: block; padding: 6px 0; font-size: .86rem; letter-spacing: .06em; text-decoration: none; color: var(--leise); transition: color .3s; }
.wege a::after {
	content: ""; position: absolute; left: 50%; bottom: -3px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%;
	background: var(--rampe); box-shadow: 0 0 12px 2px rgba(236, 201, 122, .6); opacity: 0; transform: scale(.3); transition: opacity .35s, transform .35s;
}
.wege a:hover, .wege a.hier { color: var(--licht); }
.wege a.hier::after { opacity: 1; transform: none; }
.wege .aussen a { color: var(--rampe); }
.knopf-menue { display: none; flex: 0 0 auto; min-height: 44px; font: inherit; font-size: .86rem; letter-spacing: .06em; color: var(--licht); background: var(--hauch); border: 0; border-radius: 99px; padding: 8px 18px; cursor: pointer; }

/* Inhalt */
.blatt { flex: 1; width: 100%; max-width: 980px; margin-inline: auto; padding: 150px var(--gutter) 60px; }
.blatt > h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); margin-bottom: 28px; }
.blatt .inhalt > p, .blatt .inhalt > ul, .blatt .inhalt > ol { color: var(--leise); max-width: 68ch; margin: 0 0 18px; }
.blatt .inhalt > h2 { font-size: 1.8rem; margin: 44px 0 14px; }
.blatt .inhalt a { text-decoration-color: rgba(236, 201, 122, .6); text-underline-offset: 3px; }
.blatt .inhalt a:hover { color: var(--rampe); }

/* Fuß */
.fuss { padding: clamp(50px, 8vw, 90px) var(--gutter) 46px; text-align: center; display: grid; justify-items: center; gap: 16px; color: var(--leise); font-size: .9rem; }
.fuss img { width: 74px; height: auto; opacity: .85; }
.fuss p { margin: 0; }
.fuss a { text-decoration: none; transition: color .3s; }
.fuss a:hover { color: var(--licht); }
.fuss nav a { display: inline-block; padding: 10px 8px; }

@media (max-width: 860px) {
	.leiste { gap: 12px; }
	.knopf-menue { display: block; }
	.wege {
		position: absolute; top: calc(100% - 22px); right: var(--gutter); flex-direction: column; align-items: stretch; gap: 2px;
		min-width: 230px; padding: 14px 22px; border-radius: 26px; background: rgba(8, 28, 20, .94);
		-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
		opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .35s, transform .35s, visibility .35s;
	}
	.leiste.offen .wege { opacity: 1; visibility: visible; transform: none; }
	.wege a { padding: 9px 0; font-size: .95rem; }
	.wege a::after { display: none; }
	.wege a.hier { color: var(--rampe); }
	.blatt { padding-top: 124px; }
}
@media (max-width: 782px) { .admin-bar .leiste { top: 46px; } }
@media (max-width: 600px) { .admin-bar .leiste { position: absolute; } }
@media (max-width: 430px) {
	.marke .lang { display: none; }
	.marke .kurz { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { transition-duration: .01ms !important; }
}
@media print {
	.leiste, .fuss, .schein { display: none; }
	body { background: #fff; color: #000; }
	.blatt { padding-top: 0; }
}