body {
	font-family: sans-serif;
	margin: 0;
	padding: 0;
	background: #0000aa; /* Blauer Hintergrund */
	color: #333;         /* Standardtextfarbe */
}

.container {
	width: 100$;          /* feste Breite */
	max-width: 550px;      /* nicht breiter als 550px */
	margin: 1em auto;      /* zentriert, mit 1em Abstand nach oben/unten */
	background: #fff;      /* weißer Hintergrund */
	padding: 0.5em;        /* Innenabstand */
	border-radius: 0.5em;  /* abgerundete Ecken */
	display: block;        /* Blockelement */
	margin-bottom: 1em;    /* Abstand nach unten */
}

/* Container für Tabs (Buttons nebeneinander) */
.tabs {
	display: flex;         /* Buttons in einer Reihe */
	gap: 10px;              /* Abstand zwischen den Buttons */
	margin-bottom: 0.5em;  /* kleiner Abstand nach unten, reduziert von vorher */
}

/* Tab-Buttons (für Navigation oder Aktionen) */
.tab {
	width: 270px;          /* feste Breite */
	padding: 0.5em;        /* Innenabstand */
	border: none;          /* keine Umrandung */
	border-radius: 0.5em;  /* abgerundete Ecken */
	background: #cccccc;   /* hellgrauer Hintergrund */
	font-size: 20px;       /* Schriftgröße */
	cursor: pointer;       /* Mauszeiger zeigt Hand */
}

/* Markierter Tab */
.active {
	background: #2d7d2d; /* dunkelgrün */
	color: white;        /* weiße Schrift */
}
#time {
	background: transparent;   /* Hintergrund wie Container (weiß) */
	border: 4px solid #2d7d2d; /* dicker Rahmen in Dunkelgrün */
	color: #2d7d2d;            /* Schriftfarbe passend zum Rahmen */
}
/* Eingabefelder */
input {
	width: 550px;          /* volle Containerbreite */
	margin: 0.5em auto;    /* kleiner Abstand nach oben/unten, mittig */
	padding: 0.25em;       /* Innenabstand */
	border-radius: 0.25em; /* leicht abgerundete Ecken */
	border: 1px solid #aaa;/* grauer Rahmen */
	font-size: 40px;       /* große Schrift */
	box-sizing: border-box;/* Padding zur Breite zählen */
}

/* Zusätzlicher Abstand vor einer neuen .tabs-Zeile unter den Eingaben */
.tab-content input:last-of-type {
	margin-bottom: 1em; /* mehr Abstand vor den Buttons darunter */
}

/* Allgemeine Buttons (nicht Tabs) */
.button {
	width: 520px;
	padding: 0.5em;
	border: none;
	border-radius: 0.5em;
	background: #2d7d2d;
	color: white;
	font-size: 25px;
	cursor: pointer;
}

input,
.tab,
.button {
	width: 100%;               /* volle Containerbreite */
	box-sizing: border-box;    /* Padding & Border zur Breite zählen */
}

/* Listen */
ul {
	list-style: none; /* keine Aufzählungspunkte */
	padding: 0;       /* kein Innenabstand */
}

li {
	padding: 0.25em 0;          /* vertikaler Innenabstand */
	border-bottom: 1px solid #ddd; /* graue Trennlinie */
}

/* Modal-Hintergrund */
.modal {
	position: fixed;              /* bleibt beim Scrollen fix */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5); /* halbtransparenter schwarzer Hintergrund */
	display: flex;                 /* Inhalt zentrieren */
	justify-content: center;
	align-items: center;
}

/* Modal-Inhalt */
.modal-content {
	background: white;
	padding: 1em;
	border-radius: 0.5em;
	width: 300px;
}

/* Modal-Header-Buttons */
.modal-header button {
	margin: 0 0.5em 1em 0; /* Abstand rechts und nach unten */
	padding: 0.5em;
	border: none;
	background: #eee;
	cursor: pointer;
}

/* Aktiver Button im Modal-Header */
.modal-header .active {
	background: #2d7d2d;
	color: white;
}

/* Modal-Footer mit zwei Buttons nebeneinander */
.modal-footer {
	margin-top: 1em;
	display: flex;
	justify-content: space-between;
}

/* Buttons im Modal-Footer */
.modal-footer button {
	padding: 0.5em 1em;
	border: none;
	border-radius: 0.25em;
	background: #2d7d2d;
	color: white;
	cursor: pointer;
}

/* Zeitwahl im Modal */
.zeitwahl {
	text-align: center;
}