*, ::before, ::after { box-sizing: border-box }

body
{
	margin: 0;
	font-family: Calibri, sans-serif;
}

.tagesansicht
{
	--start: 1;
	--end: -1;
	min-height: 100vh;
	padding: 1em;
	display: grid;
	grid-template-rows:
		[h1000] 1fr
        [h1100] 1fr
		[h1115] 1fr
		[h1130] 1fr
		[h1145] 1fr
		[h1200] 1fr
		[h1215] 1fr
		[h1230] 1fr
		[h1245] 1fr
		[h1300] 1fr
		[h1315] 1fr
		[h1330] 1fr
		[h1345] 1fr
		[h1400] 1fr
		[h1415] 1fr
		[h1430] 1fr
		[h1445] 1fr
		[h1500] 1fr
		[h1515] 1fr
		[h1530] 1fr
		[h1545] 1fr
		[h1600] 1fr
		[h1615] 1fr
		[h1630] 1fr
		[h1645] 1fr
		[h1700] 1fr
		[h1715] 1fr
		[h1730] 1fr
		[h1745] 1fr
		[h1800] 1fr
		[h1815] 1fr
		[h1830] 1fr
		[h1845] 1fr
		[h1900] 1fr
		[h1915] 1fr
		[h1930] 1fr
		[h1945] 1fr
		[h2000] 1fr
		[h2015] 1fr
		[h2030] 1fr
		[h2045] 1fr
		[h2100] 1fr
		[h2115] 1fr
		[h2130] 1fr
		[h2145] 1fr
		[h2200];
	grid-template-columns:
		[label-start] 4em
		[label-end] repeat(auto-fit, minmax(8em, 1fr));
	grid-gap: 0 0.5em;
}

.label
{
	grid-column: label;
	grid-row: var(--start) / -1;
	border-top: thin solid silver;
}

.event
{
	grid-row-start: var(--start);	
	grid-row-end: var(--end);	
	border: thin solid;
	background: lightblue;
	padding: 0.25em 0.5em;
}

form label{font-weight:bold;display:block}
form input.text{width:100%}