/* ---------------------------------------------------------------------------
   Startseite des Lageplans.
   Eigene Gestalt, eigenes Stylesheet – sie teilt mit der Verwaltung nur die
   Markenfarben. Sie ist für die meisten das Erste und Einzige, was sie von
   dieser Seite sehen, und läuft auf einem Telefon mit zwei Balken Empfang.
   Deshalb: keine geladene Schrift, keine fremde Bibliothek, ein Bild.
--------------------------------------------------------------------------- */

:root {
	--rot: #C1002B;
	--rot-dunkel: #9E0023;
	--grau: #A9AAAC;
	--tinte: #16181C;
	--gedaempft: #5B6068;
	--linie: #E3E5E8;
	--flaeche: #FFFFFF;
	--grund: #F4F5F7;
	--schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	/* Alle Zeitangaben laufen im Zeichensatz mit fester Breite – wie auf einem
	   Fahrplan. Datumsangaben untereinander fluchten dadurch. */
	--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--schrift);
	font-size: 15px;
	line-height: 1.55;
	color: var(--tinte);
	background: var(--grund);
	-webkit-font-smoothing: antialiased;
}

a { color: var(--rot); }

/* ---------- Kopfzeile ---------- */

.s-kopf {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 22px;
	max-width: 1120px;
	margin: 0 auto;
}
.s-marke { display: flex; align-items: baseline; gap: 10px; text-decoration: none; }
.wm { font-size: 19px; font-weight: 700; letter-spacing: -.015em; }
.wm .team { color: var(--grau); }
.wm .flex { color: var(--rot); font-style: italic; }
.s-marke-zusatz { font-size: 13px; color: var(--gedaempft); }

.s-kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 13px; }
.s-kopf-rechts a { color: var(--gedaempft); text-decoration: none; }
.s-kopf-rechts a:hover { color: var(--tinte); }
.s-kopf-rechts .s-anmelden {
	padding: 7px 14px;
	border: 1px solid var(--linie);
	border-radius: 999px;
	background: var(--flaeche);
	color: var(--tinte);
}
.s-kopf-rechts .s-anmelden:hover { border-color: var(--grau); }

/* ---------- Bühne ---------- */

.s-buehne { max-width: 1120px; margin: 0 auto; padding: 0 22px 60px; }

.s-eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--grau);
	margin: 10px 0 6px;
}

.s-titel {
	margin: 0 0 6px;
	font-size: clamp(34px, 6vw, 56px);
	line-height: .95;
	letter-spacing: -.035em;
	font-weight: 800;
}
.s-unterzeile {
	margin: 0 0 24px;
	font-size: clamp(15px, 2.2vw, 17px);
	color: var(--gedaempft);
	max-width: 34em;
}

/* ---------- Gelände und Liste nebeneinander ----------
   Die Karte ist das Motiv, aber die Liste ist der Zweck der Seite. Nebenein-
   ander steht beides ohne Scrollen da – und man sieht, dass die roten Häuser
   und die oberste Kachel dasselbe meinen. */

.s-raster {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(268px, 1fr);
	gap: 26px;
	align-items: start;
}

/* ---------- Die Karte als Motiv ----------
   Das Bild liegt ruhig darunter, die Hallen liegen als SVG darüber und bauen
   sich beim Laden nacheinander auf. Das ist die eine Bewegung der Seite. */

.s-karte {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	background: #EFEFEA;
	border: 1px solid var(--linie);
	box-shadow: 0 1px 2px rgba(16,18,22,.04), 0 18px 44px rgba(16,18,22,.07);
}
.s-karte img {
	display: block;
	width: 100%;
	height: auto;
	opacity: 0;
	animation: s-grund-auf 900ms ease-out 120ms forwards;
}
.s-karte svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.s-halle {
	fill: #C9CCD2;
	fill-opacity: .55;
	stroke: #A7ACB4;
	stroke-width: .12;
	opacity: 0;
	animation: s-halle-auf 520ms cubic-bezier(.2,.7,.3,1) forwards;
}
/* Belegt heißt: Dort steht heute jemand. Das ist die einzige Farbe auf dem
   Gelände – und der Grund, warum die Karte hier steht. */
.s-halle.belegt {
	fill: var(--rot);
	fill-opacity: .3;
	stroke: var(--rot);
	stroke-width: .2;
}

@keyframes s-grund-auf {
	from { opacity: 0; transform: scale(1.015); }
	to   { opacity: 1; transform: scale(1); }
}
@keyframes s-halle-auf {
	from { opacity: 0; transform: translateY(1.2px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Auf der Karte sagt eine Zeile, was dort zu sehen ist. */
.s-karte-fuss {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	font-size: 12px;
	color: #fff;
	background: linear-gradient(to top, rgba(16,18,22,.72), rgba(16,18,22,0));
	opacity: 0;
	animation: s-grund-auf 700ms ease-out 900ms forwards;
}
.s-karte-fuss .punkt {
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--rot);
	box-shadow: 0 0 0 4px rgba(193,0,43,.3);
}

/* ---------- Liste der Karten ---------- */

.s-abschnitt {
	margin-top: 2px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--grau);
	margin: 0 0 12px;
}

.s-karten { display: grid; gap: 10px; }

.s-kachel {
	display: block;
	position: relative;
	padding: 18px 20px;
	background: var(--flaeche);
	border: 1px solid var(--linie);
	border-radius: 14px;
	text-decoration: none;
	color: inherit;
	opacity: 0;
	animation: s-kachel-auf 460ms cubic-bezier(.2,.7,.3,1) forwards;
	transition: border-color .16s, transform .16s, box-shadow .16s;
}
.s-kachel:hover {
	border-color: var(--grau);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(16,18,22,.08);
}
.s-kachel:focus-visible { outline: 2px solid var(--rot); outline-offset: 3px; }

@keyframes s-kachel-auf {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.s-kachel .name { display: block; font-size: 19px; font-weight: 700; letter-spacing: -.015em; }
.s-kachel .zeit { display: block; margin-top: 3px; font-family: var(--mono); font-size: 13px; color: var(--gedaempft); }
.s-kachel .pfeil { display: block; margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--gedaempft); }
.s-kachel:hover .pfeil { color: var(--rot); }

/* Die laufende Veranstaltung ist die, die fast jeder sucht. */
.s-kachel.heute { border-color: rgba(193,0,43,.35); }
.s-kachel.heute .name { color: var(--rot-dunkel); }
.s-kachel.heute .pfeil { color: var(--rot); }
.s-kachel.vorbei { opacity: .62; }
.s-kachel.vorbei:hover { opacity: 1; }

.s-lage {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--gedaempft);
}
.s-kachel.heute .s-lage { color: var(--rot); }
.s-lage .punkt { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.s-kachel.heute .s-lage .punkt { animation: s-puls 2.4s ease-in-out infinite; }

@keyframes s-puls {
	0%, 100% { box-shadow: 0 0 0 0 rgba(193,0,43,.45); }
	50%      { box-shadow: 0 0 0 5px rgba(193,0,43,0); }
}

/* Noch nicht freigegeben – sehen nur die, die sie pflegen. */
.s-kachel.entwurf { border-style: dashed; }
.s-kachel.entwurf .s-lage { color: var(--grau); }

/* ---------- Leerer Zustand ---------- */

.s-leer {
	padding: 34px 24px;
	background: var(--flaeche);
	border: 1px solid var(--linie);
	border-radius: 14px;
	text-align: center;
}
.s-leer p { margin: 0 0 6px; }
.s-leer .klein { font-size: 13px; color: var(--gedaempft); }

/* ---------- Fuß ---------- */

.s-fuss {
	max-width: 1120px;
	margin: 0 auto;
	padding: 22px;
	border-top: 1px solid var(--linie);
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	font-size: 12px;
	color: var(--gedaempft);
}
.s-fuss a { color: var(--gedaempft); }

/* ---------- Telefon ---------- */

@media (max-width: 900px) {
	.s-raster { grid-template-columns: 1fr; gap: 22px; }
	/* Auf dem Telefon zuerst die Karten, dann das Gelände: Wer die Seite
	   öffnet, will auf seine Karte – das Geländebild füllte vorher den
	   ganzen ersten Bildschirm, und „Karte öffnen“ lag darunter. */
	.s-raster > :last-child { order: -1; }
}

/* Der App-Hinweis schwebt unten – die Seite bekommt Platz dafür. */
body.mit-app-hinweis { padding-bottom: 150px; }

@media (max-width: 620px) {
	.s-kopf { padding: 14px 16px; }
	.s-buehne { padding: 0 16px 44px; }
	.s-karte { border-radius: 12px; }
}

/* ---------- Ruhe, wenn gewünscht ----------
   Wer Bewegung abgestellt hat, bekommt dieselbe Seite ohne Aufbau. */

@media (prefers-reduced-motion: reduce) {
	.s-karte img,
	.s-halle,
	.s-kachel,
	.s-karte-fuss {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	.s-lage .punkt { animation: none !important; }
}

/* ---------------------------------------------------------------------------
   Hinweis „Als App speichern“.
   Erscheint nur auf dem Telefon, nur wenn die Seite noch nicht als App läuft,
   und nach dem Wegtippen für zwei Wochen nicht wieder. Siehe inc/app.php.
--------------------------------------------------------------------------- */

.app-hinweis {
	position: fixed;
	left: 12px;
	right: 12px;
	bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	z-index: 90;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid var(--linie);
	border-radius: 14px;
	box-shadow: 0 6px 28px rgba(16, 18, 22, .16);
	font-size: 13px;
	line-height: 1.4;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .2s ease, transform .2s ease;
}
.app-hinweis.da { opacity: 1; transform: translateY(0); }
.app-hinweis img { border-radius: 9px; flex: none; }
.app-text { flex: 1; }
.app-ja {
	flex: none;
	padding: 9px 15px;
	border: 0;
	border-radius: 999px;
	background: var(--rot);
	color: #fff;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}
.app-ja:hover { background: var(--rot-dunkel); }
.app-zu {
	flex: none;
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--gedaempft);
	font-size: 19px;
	line-height: 1;
	cursor: pointer;
}
.app-zu:hover { background: var(--grund); color: var(--tinte); }

/* Auf dem Rechner gibt es den Hinweis gar nicht – dort ist eine App vom
   Startbildschirm keine Hilfe. Die Regel ist trotzdem da, falls ein Tablet
   im Querformat hereinkommt. */
@media (min-width: 900px) {
	.app-hinweis { left: auto; right: 16px; max-width: 420px; }
}

/* Auf schmalen Telefonen bekommt der Text die volle Breite und der Knopf
   rutscht darunter – sonst quetscht er den Text auf sechs Zeilen. */
@media (max-width: 560px) {
	.app-hinweis { flex-wrap: wrap; }
	.app-text { flex: 1 1 100%; order: 2; }
	.app-hinweis img { order: 1; }
	.app-ja { order: 3; margin-left: auto; }
	.app-zu { order: 1; margin-left: auto; }
}