@charset "utf-8";
/* Tageszeit: the day/evening buttons top right of the home page. Loaded only on the home pages, after style.css. */

.tageszeit {
	position: fixed;
	top: calc(env(safe-area-inset-top, 0px) + var(--rand));
	right: calc(env(safe-area-inset-right, 0px) + var(--rand));
	z-index: 3;
	display: flex;
	--polster: 0.3rem;
	gap: var(--polster);
	padding: var(--polster); /* a ring of purple around the white disc */
	border-radius: calc(var(--knopf) / 2 + var(--polster)); /* ends round around the buttons */
	background: var(--lila);
	box-shadow: 0 6px 24px rgb(40 0 40 / 0.25);
	transition: opacity 1.2s ease;
}
.tageszeit[hidden] { display: none; }

/* Off: the symbol alone, dimmed. On: a white disc behind it, so the state does not rely on color alone. */
.tageszeit .knopf { color: rgb(255 255 255 / 0.72); }
.tageszeit .knopf:hover { color: var(--weiss); }
.tageszeit .knopf[aria-pressed="true"] { background: var(--weiss); color: var(--lila); }
.tageszeit .knopf[aria-disabled="true"] { cursor: default; }
.tageszeit .knopf svg { width: 1.35rem; height: 1.35rem; }

/* Idle: fades out with the menu band and the date, unless a button has the keyboard focus. */
.ist-ruhig .tageszeit:not(:focus-within) { opacity: 0; pointer-events: none; }

/* Narrow screens: the text panel spans the width, so it starts below the buttons. */
@media (max-width: 40rem) {
	:root { --tafel-oben: calc(var(--knopf) + 1.4rem); } /* buttons, 2 × 0.3rem padding, 0.8rem air */
}