/* Die Vorschau der App: Liste, Zeitfenster, Karte. Innen gelten die Farben und Maße der App
   und nicht die der Seite — es soll aussehen wie ein Telefon, das jemand in der Hand hält.
   Der Inhalt kommt aus appDemo.js, hier steht nur, wie er sich bewegt.

   Geladen von der Gemeindeseite und der Startseite, jeweils im Kopf. Das Stylesheet, das
   appDemo.js zur Laufzeit nachhängt, kommt danach und darf hier nichts vorfinden, was es
   überschreiben müsste. */

.app-demo {
	display: flex;
	justify-content: center;
	/* Der Platz wird freigehalten, weil appDemo.js erst nach dem ersten Rendering baut:
	   sonst schiebt das Telefon beim Erscheinen alles darunter nach unten. */
	min-height: 620px;
}

.app-demo .phone {
	background: #1d1d1b;
	border-radius: 20px;
	padding: 10px;
	box-shadow: var(--shadow-soft);
}

.app-demo .win {
	width: 310px;
	height: 600px;
	overflow: hidden;
	border-radius: 12px;
	position: relative;
	background: #eceff8;
}

/* Wann sich hier was bewegt, steht nicht hier: appDemo.js rechnet den Ablauf aus der Länge
   der Texte und hängt die Keyframes als eigenes Stylesheet nach. */
.app-demo .track {
	display: flex;
	width: 930px;
	height: 100%;
}

.app-demo .scr {
	width: 310px;
	flex: 0 0 310px;
	height: 100%;
	display: flex;
	flex-direction: column;
	background: #eceff8;
	position: relative;
	overflow: hidden;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	color: #1d1d1b;
	text-align: left;
}

/* Bewegt wird nur, was im Bild ist — siehe den Beobachter in appDemo.js. Angehalten werden
   die Animationen dort, wo sie entstehen: in dem Stylesheet, das appDemo.js nachhängt. Diese
   Regel wiegt eine Klasse mehr und hebt das wieder auf. */
.app-demo.is-playing .track,
.app-demo.is-playing .tap,
.app-demo.is-playing .bubble {
	animation-play-state: running;
}

/* Vor dem Start läuft gar keine Animation: angehalten stünde der Film auf seinem ersten
   Schlüsselbild, und das blendet aus dem Nichts ein — das Gerät bliebe leer. Ohne sie steht
   das erste Bild da, wo es ohne Bewegung hingehört. Wiegt eine Klasse mehr als die Regel im
   nachgehängten Stylesheet und gewinnt deshalb gegen deren `animation`. */
.app-demo:not(.is-playing) .track {
	animation: none;
}

/* Kopf und Statusleiste */

.app-demo .hd {
	flex: 0 0 auto;
	background: #ee6520;
	color: #fff;
	padding-bottom: 9px;
}

.app-demo .sb {
	height: 34px;
	display: flex;
	align-items: center;
	padding: 0 14px;
	position: relative;
}

.app-demo .sbt {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.2px;
}

.app-demo .isl {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 5px;
	width: 66px;
	height: 21px;
	border-radius: 11px;
	background: #000;
}

.app-demo .sbi {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 5px;
}

.app-demo .dots {
	font-size: 9px;
	opacity: 0.55;
	letter-spacing: -1px;
}

.app-demo .wifi {
	width: 13px;
	height: 10px;
	background: #fff;
	-webkit-mask: radial-gradient(circle at 50% 100%, #000 62%, transparent 63%);
	mask: radial-gradient(circle at 50% 100%, #000 62%, transparent 63%);
}

.app-demo .bat {
	width: 20px;
	height: 10px;
	border: 1.3px solid #fff;
	border-radius: 3px;
	position: relative;
}

.app-demo .bat::after {
	content: '';
	position: absolute;
	inset: 1.5px;
	background: #fff;
	border-radius: 1px;
}

.app-demo .nav {
	display: flex;
	align-items: center;
	padding: 0 12px;
	gap: 8px;
}

.app-demo .nav .ttl {
	flex: 1;
	text-align: center;
}

.app-demo .hdsub {
	font-size: 11.5px;
	opacity: 0.95;
}

.app-demo .chev {
	width: 11px;
	height: 11px;
	border-left: 2.6px solid #fff;
	border-bottom: 2.6px solid #fff;
	transform: rotate(45deg);
	margin-left: 3px;
}

.app-demo .icirc {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	color: #ee6520;
	font-size: 14px;
	font-weight: 700;
	font-style: italic;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: Georgia, serif;
}

/* Fuß */

.app-demo .body {
	flex: 1 1 auto;
	padding: 8px;
	overflow: hidden;
}

.app-demo .tab {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 52px;
	background: #fff;
	border-top: 0.5px solid #d8dae3;
	display: flex;
	align-items: center;
	justify-content: space-around;
	padding-bottom: 8px;
}

.app-demo .tab svg {
	display: block;
}

.app-demo .home {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 5px;
	width: 104px;
	height: 4px;
	border-radius: 2px;
	background: #1d1d1b;
	opacity: 0.75;
}

/* Erstes Bild: die Liste */

.app-demo .card {
	background: #fff;
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 10px;
}

.app-demo .card img,
.app-demo .card-placeholder {
	width: 100%;
	height: 96px;
	object-fit: cover;
	display: block;
	background: var(--muted);
}

.app-demo .cpad {
	padding: 9px 11px 11px;
}

.app-demo .rname {
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 7px;
}

.app-demo .meta {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 12.5px;
}

.app-demo .blue {
	color: #1b2fa8;
	font-weight: 500;
}

.app-demo .strike {
	color: #8e8e93;
	text-decoration: line-through;
}

.app-demo .chips {
	display: flex;
	gap: 8px;
	margin-top: 9px;
}

.app-demo .chip {
	background: #e7eaf5;
	border-radius: 7px;
	padding: 5px 9px;
	font-size: 12px;
}

/* Zweites Bild: die Zeitfenster */

.app-demo .pcard {
	background: #7e8fcd;
	border-radius: 10px;
	padding: 11px 13px;
	color: #fff;
	margin-bottom: 11px;
}

.app-demo .pcard b {
	font-size: 19px;
	display: block;
	line-height: 1.25;
}

.app-demo .pcard span {
	font-size: 12.5px;
}

.app-demo .slot {
	background: #fff;
	border-radius: 10px;
	padding: 12px 13px;
	margin-bottom: 11px;
}

.app-demo .slrow {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}

.app-demo .sltime {
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -0.3px;
}

.app-demo .sluntil {
	font-size: 12.5px;
	color: #8e8e93;
}

.app-demo .slsub {
	font-size: 12.5px;
	color: #6e6e73;
	margin-top: 5px;
}

/* Ein Punkt je Platz im Zeitfenster. Die Reihe schrumpft auf ihre Punkte, sonst liefe der
   Ring, der um sie gezogen wird, bis zum Kartenrand. */
.app-demo .dots-required {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 8px 0 9px;
}

.app-demo .d {
	width: 11px;
	height: 11px;
	border-radius: 50%;
}

.app-demo .dg {
	background: #008000;
}

.app-demo .do {
	border: 1.4px solid #c7c7cc;
}

.app-demo .pill {
	border-radius: 7px;
	padding: 8px 9px;
	font-size: 12px;
	line-height: 1.35;
	display: flex;
	gap: 7px;
	align-items: flex-start;
}

.app-demo .pico {
	flex: 0 0 auto;
	margin-top: 1px;
}

.app-demo .pg {
	background: #e6f2e6;
	color: #0a7a0a;
}

.app-demo .po {
	background: #fdf0e9;
	color: #e2600f;
}

/* Drittes Bild: die Karte */

.app-demo .sect {
	background: #7e8fcd;
	color: #fff;
	font-size: 14.5px;
	font-weight: 700;
	border-radius: 9px;
	padding: 9px 12px;
	margin-bottom: 9px;
}

.app-demo .mi {
	background: #fff;
	border-radius: 9px;
	padding: 10px 12px;
	margin-bottom: 9px;
	position: relative;
}

.app-demo .mi b {
	font-size: 14px;
	display: block;
	padding-right: 18px;
}

.app-demo .mprice {
	color: #ee6520;
	font-size: 13px;
	font-weight: 600;
	margin: 4px 0;
}

.app-demo .mdesc {
	font-size: 12px;
	color: #8a8a8e;
	line-height: 1.35;
}

.app-demo .plus {
	position: absolute;
	right: 11px;
	top: 9px;
	color: #1b2fa8;
	font-size: 20px;
	line-height: 1;
}

/* Die Speisekarte hat statt der Leiste den Warenkorb über der ganzen Breite: die Liste
   scrollt dahinter weiter, der Knopf bleibt stehen. */
.app-demo .footer {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background: #eceff8;
	border-top: 0.5px solid #d8dae3;
	padding: 10px 12px 22px;
}

.app-demo .cta {
	background: #1b2fa8;
	color: #fff;
	text-align: center;
	border-radius: 22px;
	padding: 12px;
	font-size: 13.5px;
}

/* Was in diesem Bild passiert, steht kurz darin — und ist wieder weg, bevor der Finger tippt.
   Über der Leiste statt daneben: dort verdeckt sie nichts, worum es gerade geht. */

/* Der ganze Bildschirm legt sich dabei zurück: Dämpfer und Kasten sind ein Element, damit
   beide zusammen kommen und gehen — und der Satz nicht mit dem Bild darunter konkurriert. */
.app-demo .bubble {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	padding: 14px 14px 66px;
	background: rgba(20, 20, 18, 0.45);
	opacity: 0;
}

/* Über dem Schatten des Rings: der liegt als positioniertes Geschwister sonst darüber
   und graut die Zeile ein. Weiß auf dem abgedunkelten Bild, damit sie so hell steht wie
   die Stelle, auf die sie zeigt. */
.app-demo .bubble span {
	position: relative;
	z-index: 1;
	width: 100%;
	background: #fff;
	color: #1d1d1b;
	border-radius: 12px;
	padding: 13px 15px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	text-align: center;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

/* Statt des flächigen Dämpfers zeigt ein Ring auf eine einzelne Stelle: der riesige Schatten
   um ihn herum verdunkelt alles andere und lässt genau sie hell stehen. Der Bildschirm
   schneidet ihn ab. Deshalb hier kein eigener Hintergrund. */
.app-demo .spotlight {
	background: none;
}

.app-demo .spot {
	position: absolute;
	border-radius: 7px;
	outline: 2px solid #ee6520;
	box-shadow: 0 0 0 9999px rgba(20, 20, 18, 0.55);
}

/* Ein Pfeil vom Kasten bis an den Ring: sonst steht der Satz irgendwo im Bild und man sucht
   die Stelle, die er meint. Strich und Spitze werden in appDemo.js gesetzt, die Maße der
   Spitze stehen dort deshalb auch. */
.app-demo .stem {
	position: absolute;
	z-index: 2;
	background: #fff;
}

.app-demo .tip {
	position: absolute;
	z-index: 2;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
}

.app-demo .tip-down {
	border-top: 9px solid #fff;
}

.app-demo .tip-up {
	border-bottom: 9px solid #fff;
}

/* Der Fingertipp, der die Bilder weiterschaltet */

.app-demo .tap {
	position: absolute;
	left: 127px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #ee6520;
	opacity: 0;
	pointer-events: none;
}

.app-demo .tap-a {
	top: 158px;
}

.app-demo .tap-b {
	top: 180px;
}

/* Unter 365px passt das Telefon nicht mehr neben den Seitenrand. Der negative Abstand nimmt
   die Höhe zurück, die das Verkleinern übrig lässt — sonst klafft darunter eine Lücke. */
@media (max-width: 365px) {
	.app-demo .phone {
		transform: scale(0.85);
		transform-origin: top center;
		margin-bottom: -93px;
	}

	.app-demo {
		min-height: 530px;
	}
}

/* Wer Bewegung abbestellt hat, bekommt dieselben drei Bilder zum Wischen und alle
   Zeilen dauerhaft. Ein Film, der nicht laufen darf, zeigte sonst nur sein erstes Bild.
   Angehalten werden muss hier nichts: appDemo.js hängt seine Keyframes nur unter
   `no-preference` ein, hier läuft also von vornherein nichts. */
@media (prefers-reduced-motion: reduce) {
	.app-demo .win {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
	}

	.app-demo .scr {
		scroll-snap-align: start;
	}

	.app-demo .tap {
		display: none;
	}

	/* Ohne Film gibt es kein „kurz": jedes Bild trägt seine Erklärung dauerhaft. Der Dämpfer
	   fällt dabei weg — was er sonst für zwei Sekunden zurücknimmt, bliebe hier verdeckt. */
	.app-demo .bubble {
		opacity: 1;
		background: none;
	}

	/* Ohne Dämpfer steht der weiße Kasten auf hellem Grund — der Rand hält ihn vom Bild
	   dahinter getrennt. */
	.app-demo .bubble span {
		border: 1px solid #d3d7e4;
	}

	/* Mehrere Ringe gleichzeitig, also ohne den Schatten, der sonst alles andere verdunkelt —
	   übereinander bliebe vom Bild nichts übrig. Ihre Zeilen stapelt appDemo.js darunter. */
	.app-demo .spot {
		box-shadow: none;
	}

	/* Und ohne Pfeile: gestapelt zeigten sie von verschobenen Kästen auf die falsche Stelle. */
	.app-demo .stem,
	.app-demo .tip {
		display: none;
	}
}