/*allgemeine Vorgaben Corporate-Identity*/
body {
        font-family: Arial;
        color: #005292;
      }
/* Formatierung der Label zu den Eingaben als "Fieldsetlabel*/
.fancy-input {
	margin: 1em 0 1em 0;
	position: relative;
}

.fancy-input label {
	position: absolute;
	color: #666;
	background: #fff;
	padding: 0 .5em;
	font-size: .8em;
	top: -.6em;
	left: .5em;
}

.fancy-input input {
	padding: .5em;
}

.fancy-input select {
	padding: .5em;
}

div.subField{
	/*background-color: yellow;*/
	display: grid;
	grid-column: 1 / 3;
	grid-template-columns: subgrid;
}

/*Formatierung für die Ausgabe in der eMail und bei Aufruf von ***.php*/
table {
    border-spacing: 1em;
    
    td.fancy-input {
    	position: relative;
    	border: 1px solid black;
    	border-radius: 0.5rem;
    	vertical-align: top;
    	background: #eee;
    }
    .fancy-input span {
    	position: absolute;
    	color: #666;
    	background: #fff;
    	padding: 0 .5em;
    	font-size: .8em;
    	top: -.6em;
    	left: .5em;
        border-radius: 0.5rem;
        box-shadow: 0 0 0.2rem #888;
    	margin: 0 0.5em 0 0.5em;
    }
    .fancy-input div {
    	padding: .5em;
    }
    div.ueberschrift{
        width: fit-content;
        height: fit-content;
		font-weight: bold;
		/*background: gold;*/
      	background: #ffdc00;
		border: 1px thin solid #999;
    	border-radius: 5rem;
    	box-shadow: 0 0 0.5rem #888;
    	padding: 0.5rem 1rem;
    }
}
/*Formatierung für das Formular zum Eingeben*/
form {
	#h2 {
		font-size: 125%;
		font-weight: bold;
		/*background-color: gold;*/
      	background-color: #ffdc00;
	}
	fieldset {
		background: #eee;
		display: grid;
    	grid-template-columns: minmax(280px, 40vw) minmax(280px, 40vw);
		padding: 1em;
    	border: 1px solid black;
    	border-radius: 0.5em;
    	margin: 0 0 1rem 0;
    	width: fit-content;
	}
	fieldset.subField{
		background: #eee;
		display: grid;
    	/*grid-template-columns: 38vw 38vw;*/
        /*grid-template-columns: minmax(260px, 38vw) minmax(260px, 38vw);*/
        grid-template-columns: max(260px, 38vw) max(260px, 38vw);
		padding: 1em;
    	border: 1px solid black;
    	border-radius: 0.5em;
    	margin: 0 0 1rem 0;
        /*minimale Breite klappt nicht. Skaliert immer weiter runter*/
    	/*width: 80%;*/
        /*width: fit-content;*/
        /*width: max(700px, 80%);*/
        /*min-width: 700px;*/
		/*background-color: yellow;*/
	}
	legend {
		margin-top: 1em;
		font-weight: bold;
		/*background: gold;*/
      	background: #ffdc00;
		border: 1px thin solid #999;
    	border-radius: 0.5rem;
    	box-shadow: 0 0 0.5rem #888;
    	padding: 0.5rem 1rem;
	}
	label {
		text-align: right;
		border: 1px thin solid #999;
    	border-radius: 0.5rem;
		margin: 0 0.5em 0 0.5em;
    	/*padding-left: 1em;*/
	}
	input[type="radio"] {
		/*width: fit-content;
		height: fit-Content;*/
		width: 1em;
		height: 1em;
      	box-shadow: none;
		margin: 0;
	}
	input[type="radio"]:hover {
      	box-shadow: 0 0 0.5rem #888;
	}
	.rot input[type="radio"]:hover {
      	box-shadow: none;
	}
	input[type="radio"] + label {
		text-align: left;
		margin: 0;
	}
	input {
		margin: 0 0 1em .5em;
		padding: .2em .5em;
		width: 80%;
		background-color: white;
		border: thin solid grey;
    	box-shadow: 0 0 0.5rem #888;
	}
	select {
		margin: 0 0 1em .5em;
		padding: .2em .5em;
		width: 82%;
		background-color: white;
		border: thin solid grey;
    	box-shadow: 0 0 0.5rem #888;
	}
	button {
		margin-top: 1.5em;
		margin-left: 10%;
		width: fit-content;
	}
  /* required-Felder formatieren: 
  noch leer Rot mit *
  schon gefüllt: grün mit ✔*/

	input:required + label::after {
		content: " ★ ";
		color: red;
	}
	input:required:valid + label::after {
		content: " ✔ ";
		color: green;
	}
	select:required + label::after {
		content: " ★ ";
		color: red;
	}
	select:required:valid + label::after {
		content: " ✔ ";
		color: green;
	}
}

/*Formatierung für die Terminwahl*/
.termin {
  /*background-color: yellow; */
  vertical-align: top;
  text-align: center;
  margin: 0;
  padding: 10px;
}
.gruen {
  background: lightgreen;
  vertical-align: middle;
  /* Für bessere Treffsicherheit auf Touchscreens: */
  display: inline-block;
  line-height: 1em;
  width: fit-content;
  height: fit-content;
  text-align: center;
  padding: 10px;
  border: 0;
  border-radius: 2em;
  		margin: 0;
		box-shadow: 0;
}
.gruen:hover {
  text-decoration: underline;
  background: white;
}
.orange {
  background-color: peachpuff;
  display: inline-block;
 /* Für bessere Treffsicherheit auf Touchscreens: */
  display: inline-block;
  line-height: 1em;
  width: fit-content;
  height: fit-content;
  text-align: center;
  padding: 10px;
  border: 0 0 0;
  border-radius: 2em;
}
.orange:hover{
  text-decoration: underline;
  background: white;
}
.rot {
  background-color: lightcoral;
  display: inline-block;
 /* Für bessere Treffsicherheit auf Touchscreens: */
  display: inline-block;
  line-height: 1em;
  width: fit-content;
  height: fit-content;
  text-align: center;
  padding: 10px;
  border: 0 0 0;
  border-radius: 2em;
}
/*.rot:hover{
  text-decoration: underline;
  background: white;
}*/