/*
 * app.css — Die Schale.
 *
 * Nur das, was zur Anwendung als Ganzes gehört: der Rahmen um die
 * Ansichten, der Ladezustand, der Übergang zwischen Routen. Alles
 * Fachliche steht im CSS des jeweiligen Moduls.
 */

.app {
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
}

.app__inhalt {
	flex: 1;
	width: min(96rem, 100%);
	margin-inline: auto;
	padding: max(var(--raum-4), env(safe-area-inset-top)) var(--raum-4)
		max(var(--raum-5), env(safe-area-inset-bottom));
}

.app__inhalt:focus {
	outline: none;
}

/* ------------------------------------------------------------------
 * Ladezustand vor dem ersten Zeichnen
 * ------------------------------------------------------------------ */
.app__laedt {
	display: grid;
	place-items: center;
	min-height: 60dvh;
	color: var(--text-still);
}

.app__laedt-marke {
	font-family: var(--schrift-display);
	font-size: var(--grad-klein);
	text-transform: uppercase;
	letter-spacing: var(--laufweite-etikett);
	position: relative;
	padding-left: 1.4em;
}

.app__laedt-marke::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 0.7em;
	height: 0.7em;
	margin-top: -0.35em;
	border-radius: var(--kante-rund);
	background: var(--signal);
	animation: puls 1.1s var(--kurve-aus) infinite;
}

/* ------------------------------------------------------------------
 * Ohne JavaScript
 * ------------------------------------------------------------------ */
.app__ohne-js {
	max-width: 44rem;
	margin: var(--raum-7) auto;
}

/* ------------------------------------------------------------------
 * Update-Hinweis der PWA
 * ------------------------------------------------------------------ */
.app__update {
	position: fixed;
	left: 50%;
	bottom: max(var(--raum-4), env(safe-area-inset-bottom));
	transform: translateX(-50%);
	z-index: var(--ebene-meldung);
	animation: hochsteigen var(--zeit-ruhig) var(--kurve-schwung);
}

/* ------------------------------------------------------------------
 * Routenwechsel — View Transitions, wo der Browser sie kann.
 * Ohne Unterstützung passiert schlicht nichts (Progressive
 * Enhancement, → `15`).
 * ------------------------------------------------------------------ */
@view-transition {
	navigation: auto;
}

::view-transition-old(root) {
	animation: ausblenden var(--zeit-flink) var(--kurve-ein) forwards;
}

::view-transition-new(root) {
	animation: hochsteigen var(--zeit-normal) var(--kurve-aus);
}

/* ------------------------------------------------------------------
 * Gemeinsame Seitenkopf-Form für alle Ansichten
 * ------------------------------------------------------------------ */
.seitenkopf {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--raum-4);
	margin-bottom: var(--raum-5);
	padding-bottom: var(--raum-4);
	border-bottom: 1px solid var(--linie);
}

.seitenkopf__titel {
	display: flex;
	flex-direction: column;
	gap: var(--raum-1);
}