/*Anmerkungen:*/
/*typisches Rot: #FFA6A6*/
/*hinterster Hintergrund: #a7c1c7#*/
/*regulärer Hintergrund: #c2d4d8*/
/*Hintergrund Menü und Dreiergespräch #dbe9b8*/

/*aus Vorlage https://codepen.io/shieldsma91/pen/zLpbLX übernommen*/
/*Beginn; stark Eingerücktes von mir geändert.+++++++++++++++++++++++++*/
body {
		background-color: #a7c1c7; /*#f9f9f9; hinterster Hintergrund*/
  margin: 0;
  padding: 0;
		font-family:"Veracruz Serial";
}
/*	a {
	text-decoration: none;
	color: #1E1E23;
	opacity:1;
	font-family: 'work sans', sans serif;
	font-size: 1.5em;
	font-weight: 400;
	transition: 200ms;
}
a:hover {
  opacity:0.5;
}
*/
ul {
  padding: 0;
  list-style-type: none;
}



.container {
  margin-top: 50px; 
  Display: flex;
  justify-content: center;
  align-items: center;
}
.phone {
  background-color: #36383F;
  border-radius: 40px;
  width: 300px;
  height: 600px;
  Display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 30px 50px 100px #85888C;
}
.content {  /*Korpus*/
		border: 0.1em/*1px*/ solid #FFA6A6; /*#36383F;*/
  border-radius: 20px;
		width: 100 %; /*94%;*/
		height: 98%; /*91%;*/
		background-color: #c2d4d8; /*#F5F6FA; das ist der Korpus*/
		position:relative;
		overflow:auto;/*overflow: hidden;*/
}
nav {
		background-color: #1E1E23; /*#dbe9b8; */
  height: 65px;
}


#menuToggle {
  display: flex;
  flex-direction: column;
  position: relative;
  top: 25px;
  left: 25px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle input
{
  display: flex;
  width: 40px;
  height: 32px;
  position: absolute;
  cursor: pointer;
  opacity: 0;
  z-index: 2;
}

#menuToggle span
{
  display: flex;
  width: 29px;
  height: 2px;
  margin-bottom: 5px;
  position: relative;
  background: #ffffff;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 5px 0px;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-3px, -1px);
  background: #36383F;
}
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

#menu
{
  position: absolute;
  width: 180px;
  height: 400px;
  box-shadow: 0 0 10px #85888C;
  margin: -50px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  background-color: #F5F6FA;
  -webkit-font-smoothing: antialiased;
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
  padding: 10px 0;
  transition-delay: 2s;
}

#menuToggle input:checked ~ ul
{
  transform: none;
}
/*aus Vorlage https://codepen.io/shieldsma91/pen/zLpbLX übernommen*/
/*Ende; stark Eingerücktes von mir geändert.+++++++++++++++++++++++++*/

/*Eigenes+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*Allgemein+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

h1 {
	text-align: center;
}

h2 {
	text-align: center;
}

h2.rottitel {
	text-align: center;
	/*font-size:2em;*/
	color: red; /*#FFA6A6;*/
}

h3 {
	text-align: center;
}

h4 {
	text-align: center;
}

.htypa {
	text-align: center;
	letter-spacing: 0.07em;
	word-spacing: 0.07em;
}

h5 {
	text-align: center;
}

h6 {
	text-align: center;
}

p {
	margin-left: 0.5em;
	margin-right: 0.5em;
	hyphens: auto;
	line-height: 110%;
	letter-spacing: 0.07em;
	font-size: 0.9em;
}

p.vara {
	margin-left: 0.3em;
	margin-right: 0.3em;
	hyphens: auto;
	line-height: 110%;
	letter-spacing: 0.07em;
	font-size: 0.9em;
}

p.vard { /*geeignet für  ... gelauscht*/
	font-family: "Veracruz Serial"; /*"Roundest Serial Light";*/
	font-size: 1.1em; /*Schriftgröße*/
	font-weight: normal;
    font-style: normal;
	line-height: 115%;
	letter-spacing: 0.15em;
	hyphens: auto;
	text-align: justify;
	text-align-last: left;
	color: black;
	text-indent: 0em;
	padding-left: 0.5em;
	padding-right: 0.5em;
}

p.varf { /*geeignet für Stichwortliste im Archiv*/
	font-family: "Veracruz Serial"; /*"Roundest Serial Light";*/
	font-size: 0.95em; /*Schriftgröße*/
	font-weight: normal;
    font-style: normal;
	line-height: 100%;
	letter-spacing: 0.15em;
	hyphens: auto;
	text-align: justify;
	text-align-last: left;
	color: black;
	text-indent: 0em;
	padding-left: 0.5em;
	padding-right: 0.5em;
}



p.datum {
	margin-left: 0.2em;
	margin-right: 0.2em;
	hyphens: auto;
	text-align: right;
}

.date {
	font-size: 1.1em;
	letter-spacing: 0.2em;
	word-spacing: 0.2em;
	text-align: right;
	padding-right: 0.4em;
	padding-bottom: 0.5em;
}

a.menu {
	text-decoration: none;
	color: #1E1E23;
	opacity:1;
	font-family: 'work sans', sans serif;
	font-size: 1.5em;
	font-weight: 400;
	transition: 200ms;
}
a:hover {
  opacity:0.5;
}

.dreiergespraech {			/*normale Textform*/
	background-color: #dbe9d8; /*yellow;*/
	max-width: 92.5%;
	margin-left: auto;
	margin-right:auto;
	border-radius: 15px; /*sorgt für abgerundete Ecken*/
	border-color: #FFA6A6; /*Farbe des Rahmens*/
	border-width: 0.5px; /*Rahmenstärke*/
	border-style: solid; /*Rahmenart, hier durchgezogen*/
}

.typa {
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	padding-left: 0.6em;
	padding-right: 0.6em;	
	border-left: magenta 0.2em solid;
	border-right: magenta 0.2em solid;	
	width: 90%;
}

.typb {
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	padding-left: 0.6em;
	padding-right: 0.6em;	
	border-left: darkgreen 0.2em solid;
	border-right: darkgreen 0.2em solid;	
	width: 90%;
}

.typc {
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	padding-left: 0.6em;
	padding-right: 0.6em;	
	border-left: darkblue 0.2em solid;
	border-right: darkblue 0.2em solid;	
	width: 90%;
}



/*Beginn Formatierung Eingabeformular Home*/
/*++++++++++++++++++++++++++++++++++++++++++++*/

.eingaben {
	margin-top: 0px;
	margin-left: 1em;
	margin-right: 1em;
}

.textfeld {		/*regelt die Formatierung von textarea und input*/
	resize: vertical; /*verhindert die horizontale Ausweitung des Textfeldes*/
	font-size: 0.8em;
	text-align: left;
	background-color: #FBFBEF;
	border-radius: 0.5em;
	border-color: #FFA6A6;
	border-style: solid;
	border-width: 0.08em;
	width: 100%;
	min-height: 5.5em;
	height: auto;
	padding-left: 0.2em;
	padding-right: 0.2em;
}

.textfelda {		/*regelt die Formatierung von textarea und input*/
	resize: vertical; /*verhindert die horizontale Ausweitung des Textfeldes*/
	font-size: 0.8em;
	text-align: left;
	background-color: #FBFBEF;
	border-radius: 0.5em;
	border-color: #FFA6A6;
	border-style: solid;
	border-width: 0.08em;
	width: 100%;
	min-height: 2.5em;
	height: auto;
	padding-left: 0.2em;
	padding-right: 0.2em;
}

.textfeldb {		/*regelt die Formatierung von textarea und input*/
	resize: vertical; /*verhindert die horizontale Ausweitung des Textfeldes*/
	font-size: 0.8em;
	text-align: left;
	background-color: #FBFBEF;
	border-radius: 0.5em;
	border-color: #FFA6A6;
	border-style: solid;
	border-width: 0.08em;
	width: 100%;
	min-height: 3.75em;
	height: auto;
	padding-left: 0.2em;
	padding-right: 0.2em;
}


.textfeldsicherung {
	text-align: center;
	font-size: 0.5em;
	background-color: #FBFBEF;
	border-radius: 0.5em;
	border-color: #FFA6A6;
	border-style: solid;
	border-width: 0.08em;
	width: 96%;
	height: auto;
	margin-right: auto;
	margin-left: auto;
}

.
.normLink {
	font-family: "Veracruz Serial";
	color: #000070; 
	text-decoration:none;
	border-bottom: 0.8px solid #FFA6A6;
	hyphens: auto;
	line-height: 110%;
	letter-spacing: 0.07em;
	font-size: 0.9em;
	}
	
ul.normal {
	list-style-type: disc;
	list-style-position: outside;
	padding-left: 1.2em;
}

/*######mehr zu lesendes anzeigen*/
.verstecktes {
  overflow: hidden;
  height: 0em;
  line-height: 1.2em;
  width: 100%; /*200px;*/
}

.mehr:checked + div {
  height: auto;
}