/* heute.pro – gesetzt wie die app: sf pro rounded, die uhrzeit in martian
   mono, papier und tinte. die maße stammen aus ios/App (EintragZeile,
   Hauptansicht, Uhrzeitschrift); ein pt der app ist hier ein px. */

@font-face {
	font-family: "Martian Mono";
	src: url("/schriften/MartianMono.ttf") format("truetype");
	font-weight: 100 800;
	font-stretch: 75% 112.5%;
	font-display: swap;
}

:root {
	/* die systemfarben von ios: label, secondaryLabel, tertiaryLabel */
	--papier: #ffffff;
	--tinte: #000000;
	--zweit: rgba(60, 60, 67, 0.6);
	--dritt: rgba(60, 60, 67, 0.3);
	--hauch: rgba(0, 0, 0, 0.07);
	--erledigt: rgba(60, 60, 67, 0.3);
	--uhrzeit: rgba(0, 0, 0, 0.72);
	--rot: #ff3b30;
	--glas: rgba(255, 255, 255, 0.7);
	--glas-rand: rgba(0, 0, 0, 0.06);
	--schatten: 0 8px 28px rgba(0, 0, 0, 0.09), 0 1px 3px rgba(0, 0, 0, 0.05);
	/* die mulde der beispielliste: etwas tiefer als das papier */
	--mulde: #f4f4f6;
	--mulde-schatten: inset 0 1px 3px rgba(0, 0, 0, 0.06);
	color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
	:root {
		--papier: #000000;
		--tinte: #ffffff;
		--zweit: rgba(235, 235, 245, 0.6);
		--dritt: rgba(235, 235, 245, 0.3);
		--hauch: rgba(255, 255, 255, 0.07);
		/* auf schwarz ist tertiaryLabel für ganze sätze zu blass */
		--erledigt: rgba(235, 235, 245, 0.45);
		--uhrzeit: rgba(255, 255, 255, 0.72);
		--rot: #ff453a;
		--glas: rgba(44, 44, 46, 0.66);
		--glas-rand: rgba(255, 255, 255, 0.1);
		--schatten: 0 8px 28px rgba(0, 0, 0, 0.55);
		--mulde: #0e0e10;
		--mulde-schatten: inset 0 1px 3px rgba(0, 0, 0, 0.6);
	}
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--papier);
	color: var(--tinte);
	/* die app ist ganz in sf pro rounded gesetzt. safari kennt ui-rounded;
	   wo es fehlt, bleibt die systemschrift. */
	font-family: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 15px;
	line-height: 1.3;
	-webkit-font-smoothing: antialiased;
}

a { color: inherit; }
p { margin: 0; }

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.blatt {
	max-width: 520px;
	margin: 0 auto;
	/* der fuß steht unten am bildschirm, auch wenn die seite kurz ist */
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	padding: max(12px, env(safe-area-inset-top)) 20px max(32px, env(safe-area-inset-bottom));
}

/* ── oben: knöpfe aus glas ────────────────────────────── */

.leiste {
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: 36px;
	margin-bottom: 6px;
}

.glas {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 0 14px;
	border-radius: 999px;
	background: var(--glas);
	border: 0.5px solid var(--glas-rand);
	box-shadow: var(--schatten);
	backdrop-filter: blur(24px) saturate(1.8);
	-webkit-backdrop-filter: blur(24px) saturate(1.8);
	text-decoration: none;
	font-size: 14px;
}


/* ── der kopf: dachzeile über dem tag ─────────────────── */

/* oben steht kein knopf mehr – der kopf braucht selbst luft */
/* der inhalt steht mittig im blatt: der kopf nimmt oben so viel luft wie der
   fuß unten (beide margin auto), der fuß bleibt am unteren rand */
.kopf { padding-top: 28px; margin-top: auto; }

.dachzeile {
	color: var(--zweit);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	min-height: 14px;
}

.kopf h1 {
	margin: 2px 0 0;
	font-size: 34px;
	font-weight: 700;
	line-height: 1.12;
}

/* der eine satz unter dem tag: worum es geht */
.leitsatz {
	margin-top: 8px;
	color: var(--zweit);
	font-size: 17px;
	line-height: 1.35;
}

/* ── die liste ────────────────────────────────────────── */

/* die beispielliste liegt vertieft, die bläschen darunter schweben darüber */
.mulde {
	margin-top: 22px;
	padding: 10px 18px;
	border-radius: 22px;
	background: var(--mulde);
	box-shadow: var(--mulde-schatten);
}

.mulde .liste { margin-top: 0; }
/* in der mulde etwas mehr luft zwischen den beispielen */
.mulde .zeile { padding: 10px 0; }
/* die zeile deckt beim wischen die knöpfe darunter ab – in der mulde mit
   deren farbe */
.mulde .zeile { background: var(--mulde); }

.liste {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
}

.eintrag {
	position: relative;
	/* die weggeschobene zeile ragt nicht aus dem blatt */
	overflow: clip;
	transition: opacity 0.25s ease;
}

.eintrag.unter { margin-left: 31px; }
/* unteraufgaben rücken an ihren eintrag heran; nach dem block wieder luft */
.eintrag.unter .zeile { padding-top: 3px; }
.eintrag.unter + .eintrag:not(.unter) { margin-top: 8px; }
.eintrag.geht { opacity: 0; }

.zeile {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	padding: 7px 0;
	background: var(--papier);
	position: relative;
	transform: translateX(var(--x, 0px));
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
}

.eintrag:not(.zieht) .zeile { transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }

/* das kästchen der app: „square“ in title2, medium – mittig zur x-höhe der
   ersten zeile */
.kaestchen {
	flex: none;
	width: 22px;
	height: 22px;
	position: relative;
}

.kaestchen::before {
	content: "";
	position: absolute;
	left: 3px;
	top: 3.5px;
	width: 16px;
	height: 16px;
	border: 1.7px solid var(--zweit);
	border-radius: 4px;
}

/* der rand bleibt durchsichtig: rand und fläche übereinander wären dunkler
   als die fläche allein */
.erledigt .kaestchen::before { border-color: transparent; background: var(--erledigt); }

.erledigt .kaestchen::after {
	content: "";
	position: absolute;
	left: 9px;
	top: 6.5px;
	width: 4px;
	height: 8.5px;
	border: solid var(--papier);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* der text steht 2 px tiefer, damit er mittig neben dem kästchen sitzt */
.inhalt { flex: 1; min-width: 0; position: relative; top: 2px; }

.titel {
	font-size: 17px;
	font-weight: 700;
	line-height: 22px;
	overflow-wrap: anywhere;
}

/* erledigtes wird nicht durchgestrichen: das kästchen füllt sich, der text
   verblasst */
.erledigt .text { color: var(--erledigt); }

/* die uhrzeit: martian mono, dünn und schmal, so groß, dass die ziffern
   auf der x-höhe des titels stehen – in einer eckigen pille */
.pille {
	display: inline-block;
	margin-right: 7px;
	padding: 1px 5px;
	border-radius: 4px;
	background: var(--hauch);
	color: var(--uhrzeit);
	font-family: "Martian Mono", ui-monospace, monospace;
	font-size: 11px;
	font-weight: 200;
	font-stretch: 75%;
	font-variation-settings: "wght" 200, "wdth" 75;
	line-height: 1.2;
	position: relative;
	top: -1.5px;
}

.erledigt .pille { color: var(--erledigt); }

.notiz {
	margin-top: 4px;
	color: var(--dritt);
	font-size: 16px;
	line-height: 21px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* die optionen unter der zeile fahren mit dem finger herein */
.option {
	position: absolute;
	top: 0;
	bottom: 0;
	display: flex;
	overflow: hidden;
	padding: 4px 0;
}

.option.morgen { left: 0; width: max(0px, var(--x, 0px)); justify-content: flex-end; }
.option.loeschen { right: 0; width: max(0px, calc(-1 * var(--x, 0px))); justify-content: flex-start; }
.eintrag:not(.zieht) .option { transition: width 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }

.option button {
	flex: none;
	width: 84px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
}

.option.morgen button { margin-right: 8px; background: var(--tinte); color: var(--papier); }
.option.loeschen button {
	margin-left: 8px;
	background: var(--rot);
	color: #fff;
	display: grid;
	place-items: center;
}

.beispiel {
	margin: 10px 0 0 42px;
	color: var(--dritt);
	font-size: 13px;
}

:focus-visible { outline: 2px solid var(--zweit); outline-offset: 3px; border-radius: 6px; }

/* ── haltungen: vier bläschen aus glas ─────────────────── */

.haltungen {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-top: 14px;
}

.haltung {
	padding: 13px 14px 14px;
	border-radius: 18px;
	background: var(--glas);
	border: 0.5px solid var(--glas-rand);
	box-shadow: var(--schatten);
}

.haltung .zeichen {
	display: block;
	margin: 2px 0 12px;
	color: var(--tinte);
}

.haltung h2 {
	margin: 0 0 3px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
}

.haltung p {
	color: var(--zweit);
	/* schmale kacheln: lange wörter dürfen sich trennen */
	-webkit-hyphens: auto;
	hyphens: auto;
	font-size: 13px;
	line-height: 1.35;
}

/* sehr schmal: untereinander */
@media (max-width: 340px) {
	.haltungen { grid-template-columns: 1fr; }
}

/* ── banner: die app laden ────────────────────────────── */

/* wie apples app-banner im browser: symbol, name, knopf – eine zeile */
.banner {
	display: flex;
	align-items: center;
	gap: 11px;
	margin-top: 28px;
	padding: 10px 12px;
	border-radius: 16px;
	background: var(--glas);
	border: 0.5px solid var(--glas-rand);
	box-shadow: var(--schatten);
}

.banner img {
	display: block;
	border-radius: 9px;
	/* das symbol ist weiß – auf dem hellen banner braucht es einen rand */
	box-shadow: 0 0 0 0.5px var(--glas-rand), 0 1px 3px rgba(0, 0, 0, 0.12);
}

.banner-text { flex: 1; min-width: 0; line-height: 1.25; }
.banner-text strong { display: block; font-size: 15px; font-weight: 700; }
.banner-text span {
	display: block;
	color: var(--zweit);
	font-size: 13px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* noch nicht im store: ein leises schild statt eines knopfs */
.banner-bald {
	flex: none;
	padding: 4px 11px;
	border-radius: 999px;
	background: var(--hauch);
	color: var(--zweit);
	font-size: 13px;
	font-weight: 600;
}

.banner-knopf {
	flex: none;
	padding: 6px 16px;
	border-radius: 999px;
	background: var(--tinte);
	color: var(--papier);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

/* ── hinweis: „verschoben · rückgängig“ ───────────────── */

.hinweis {
	position: fixed;
	left: 50%;
	bottom: max(20px, env(safe-area-inset-bottom));
	transform: translateX(-50%);
	display: flex;
	gap: 14px;
	align-items: center;
	padding: 9px 15px;
	border-radius: 999px;
	background: var(--glas);
	border: 0.5px solid var(--glas-rand);
	box-shadow: var(--schatten);
	backdrop-filter: blur(24px) saturate(1.8);
	-webkit-backdrop-filter: blur(24px) saturate(1.8);
	font-size: 13px;
	white-space: nowrap;
	z-index: 2;
}

.hinweis[hidden] { display: none; }
.rueckgaengig { font-weight: 600; }

/* ── texte und fuß ────────────────────────────────────── */

.text-seite h1 { font-size: 28px; font-weight: 700; margin: 8px 0 6px; }
.text-seite h2 { font-size: 16px; font-weight: 700; margin: 24px 0 4px; }
.text-seite p, .text-seite li { color: var(--tinte); line-height: 1.45; }
.text-seite p { margin: 0 0 12px; }
.text-seite .vorspann { color: var(--zweit); }
/* der name der app steht im text fett und in voller tinte */
.text-seite strong { color: var(--tinte); font-weight: 700; }
.text-seite ul { padding-left: 1.2em; }

.fuss {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	justify-content: center;
	margin-top: auto;
	padding-top: 32px;
	font-size: 12px;
}

.fuss a { color: var(--zweit); text-decoration: none; }
.fuss a:hover { color: var(--tinte); }

@media (prefers-reduced-motion: reduce) {
	.eintrag, .eintrag:not(.zieht) .zeile, .eintrag:not(.zieht) .option { transition: none; }
}