html {
  line-height: 1.15; /* 1 */
}
body {
  margin: 0;
}
main {
  display: block;
}
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}
a {
  background-color: transparent;
}
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}
b,
strong {
  font-weight: bolder;
}
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
img {
  border-style: none;
}
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}
button,
input { /* 1 */
  overflow: visible;
}
button,
select { /* 1 */
  text-transform: none;
}
button,
[type="button"],
[type="reset"]{
  border-style: none;
  padding: 0;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}
progress {
  vertical-align: baseline;
}
textarea {
  overflow: auto;
}
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}
[type="search"] {
  outline-offset: -2px; /* 2 */
}
details {
  display: block;
}
summary {
  display: list-item;
}
template {
  display: none;
}
h2, h3, h4, h5, h6 {
	font-family: Arial, sans-serif;
	font-weight: bold;
	color: #444;
	margin: 0.5em 0 0.25em 0;
}

body {
	font-family: 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif;
	color: Black;
	background-color: #CCC;
	margin: 1px;
	border-left-width: 0px;
}

.button {
	text-align: center;
	white-space: nowrap;
	border-style: solid;
	border-width: 1px;
	border-color: #888;
	background-color: #AAA;
	padding: 0.2em;
	font-size: 1em;
	line-height: 1.6em;
	border-radius: 6px;
	box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
}

div.dtab {
	display: table;
}

div.dtr {
	display: table-row;
}

div.dtd {
	display: table-cell;
}

div.menue_space {
	display: table-cell;
 	vertical-align:top;
	white-space: nowrap;
	background-color: #444;
	position: relative;
	text-align: center;
}

.persoenlich {
	padding-left:1rem;
	padding-right:1rem;
	padding-bottom:0.5rem;
	margin-bottom:1rem;
	width:calc(100vw - 2rem);
	background:#fff;
}
.uebermich {
	padding-left:1rem;
	padding-right:1rem;
	padding-bottom:0.5rem;
	margin-bottom:1rem;
	background:#fff;
}
.lebenslauf tr,.lebenslauf tr td {
	border: none;
	border-collapse: collapse;
	padding: 0.3rem;
	text-align: left;
	vertical-align:text-top;
}
.lebenslauf tr td:nth-child(2) {
	width:10rem;
	text-align: left;
}
.lebenslauf tr td ul {
	padding: 0rem;
	margin:0rem;
	margin-left:1rem;
}
.kompetenzen tr, .kompetenzen tr td, .kompetenzen tr td li {
	text-align: left;
	vertical-align:text-top;
	padding-bottom: 0.4rem;
}
.kompetenzen {
	text-align: left;
	width:96%;
	padding: 0rem;
	vertical-align:text-top;
}
.kompetenzen tr:nth-child(2) td {
	padding-top:1rem;
}
.resultat tr,.resultat tr td {
	border: none;
	border-collapse: collapse;
	padding: 0rem;
	margin:0;
	text-align: left;
	vertical-align: text-top;
}
.taetigkeit {
	font-weight: bold;
}
td.liste {
	text-align: left;
	vertical-align: middle;
}
td ul {
	margin:0;
	padding-left:1rem;
}
.ort {
	font-style:italic;
	color:rgb(0, 128, 255);
}
.picbutton {
	height:2.2rem;
	display:inline-block;
	border-radius: 1.5rem;
	padding:0.1rem;
}
.buttonpic {
	width:2rem;
	display:inline;
	border: 2px solid #fff;
	border-radius: 2rem;
}
.piccircle {
	height:1.8rem;
	display:inline-block;
	border-radius: 1rem;
	padding:0.1rem;
}
.circlepic {
	width:1.6rem;
	display:inline;
	border: 2px solid #fff;
	border-radius: 1.8rem;
}
.picflag {
	margin-left:-0.6rem;
	height:2.2rem;
	display:inline-block;
	border-radius: 0 1.2rem 1.2rem 0;
	padding:0.1rem;
	padding-left: 1.5rem;
}
#werdegang .picflag, .kompetenzen .picflag {
	margin-left:-1.5rem;
}
.flagpic {
	 width:2rem;
	 display:inline;
	 border-radius: 1.8rem;
	 border: 2px solid #fff;
}
#content {
	font-size: 1rem;	
	background-color: #ddd;
}
.indeximg {
	margin:1rem;
}
.header {
	background-color:#444444;
	top:0;
	position:sticky;
	text-align:center;
	z-index:5;
	max-width:100vw;
}
.headline {
	background-color:#444444;
	color:#0080ff;
	line-height: 4rem;
	font-size: 1.3rem;
	font-weight:bolder;
}
html {
  scroll-behavior: smooth; /* Weiches Scrollen */
}
.ziel-element {
  scroll-margin-top: 6.5rem; /* Offset: Höhe des Fix-Headers */
}

#werdegang {
	padding-left:1rem;
}

.kompetenzen {
	padding-left:1rem;
}
table.persoenlich th, table.persoenlich tr, table.persoenlich tr td {
	padding: 0.3rem;
	padding-left:0.4rem;
	text-align: left;
	width:10rem;
}
table.persoenlich{
	width: 96vw;
}
table.download, table.download th, table.download tr, table.download tr td {
	border: 2px solid darkgray;
	border-collapse: collapse;
	padding: 0.5rem;
	margin:1rem;
	background-color: #fff;
}
table.editdb, table.editdb th, table.editdb tr, table.editdb tr td {
	border: 2px solid darkgray;
	border-collapse: collapse;
	padding: 0.5rem;
	margin:1rem;
	background-image: url('backgrounds/1b.png');
	max-width: 98vw;
}
table.editdb input[type="text"], table.editdb textarea {
	min-width: 60vw;
}
table.editdb1, table.editdb1 th, table.editdb1 tr, table.editdb1 tr td {
	background-color:#ddeedd;
}
table.editdb2, table.editdb2 th, table.editdb2 tr, table.editdb2 tr td {
	background-color:#eedddd;
}
table.editdb3, table.editdb3 th, table.editdb3 tr, table.editdb3 tr td {
	background-color:#ddddee;
}
table.editdb4, table.editdb4 th, table.editdb4 tr, table.editdb4 tr td {
	background-color:#eeeedd;
}
span.frame {
	border-radius: 5px 5px 5px;
	border: 1px solid black;
	background-color: #e0e0e0;	
	padding:0rem 0.3rem 0rem 0.3rem;
	font-weight: bolder
}
/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* Add dots under the hoverable text */
  cursor: pointer;
}

/* Tooltip text */
.tooltiptext {
  visibility: hidden; /* Hidden by default */
  width: 130px;
  background-color: black;
  color: #ffffff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  margin-bottom:4rem;
  margin-left:-2rem;
  z-index: 1; /* Ensure tooltip is displayed above content */
}

/* Show the tooltip text on hover */
.tooltip:hover .tooltiptext {
  visibility: visible;
}
@media (min-width:600px) {
	table.persoenlich{
		width: 22rem;
	}
	table.persoenlich th, table.persoenlich tr, table.persoenlich tr td {
		padding: 0.4rem;
	}
	.picbutton {
		height:3.2rem;
		padding:0.1rem;
	}
	.buttonpic {
		width:3rem;
		border-radius: 3rem;
	}
	.ziel-element {
	  scroll-margin-top: 6.5rem;
	}
	.picflag {
		margin-left:-1.5rem;
		height:3.2rem;
		display:inline-block;
		border-radius: 0 1.6rem 1.6rem 0;
		padding:0.1rem;
		padding-left: 1.5rem;
	}
	.persoenlich {
		width:20rem;
	}
	.persoenlich .picflag {
		margin-left:-0.5rem;
	}
	.uebermich {
		margin-top:1rem;
	}
	.flagpic {
		 width:3rem;
		 display:inline;
		 border-radius: 3rem;
		 border: 2px solid #fff;
	}
	.headline {
		line-height: 4rem;
		font-size: 1.6rem;
	}
	.lebenslauf tr td:nth-child(2) {
		width:9rem;
	}
}
@media (min-width:800px) {
	#content {
		font-size:1.1rem;
	}
	.headline {
		line-height: 4rem;
		font-size: 1.8rem;
	}
	.ziel-element {
	  scroll-margin-top: 7.5rem; /* Offset: Höhe des Fix-Headers */
	}
	.lebenslauf tr td:nth-child(2) {
		width:10rem;
	}
}
@media (min-width:900px) {
	#content {
		font-size:1.2rem;
	}
	.headline {
		line-height: 4rem;
		font-size: 2rem;
	}
	.ziel-element {
	  scroll-margin-top: 7.5rem; /* Offset: Höhe des Fix-Headers */
	}
	.headline {
		line-height: 3.2rem;
		font-size: 1.6rem;
	}
		.lebenslauf tr td:nth-child(2) {
		width:10rem;
	}
	
}
#flex {
	display: inline-block;
	vertical-align:top;
}

#content-flex {
	padding: 1vw;
	margin: auto;
	border: thin none #FFF;
	text-align: center;
	z-index: 4;
	display: flex; 
	flex-wrap: nowrap;	
	justify-content: center;
}

#content-flex2 {
	vertical-align:top;
	padding: 1vw;
	margin: auto;
	border: thin none #FFF;
	text-align: center;
	z-index: 4;
	display: flex; 
	flex-wrap: nowrap;	
	justify-content: center;
}

div.index-flex {
	display: flex;
	flex-direction: row;
	flex-wrap: row wrap;
	justify-content: center;
}

div.flex {
	display: block;
	flex-direction: row;
	flex-wrap: row wrap;
	justify-content: center;	
}

@media (min-width:901px) {
	#content {
		vertical-align:top;
		margin: auto;
		border: thin none #FFF;
		text-align: center;
		z-index: 4;
		min-width: 18em;
		max-width: 48em;
	}
	
	#content-flex {
		padding: 1em;
		flex-wrap: nowrap;	
	}
}

@media (max-width:900px) {
	#content {
		vertical-align:top;
		margin: auto;
		border: thin none #FFF;
		text-align: center;
		z-index: 4;
	}
	
	#content-flex {
		padding: 1vw;
		flex-wrap: nowrap;	
	}
}

@media (max-width:599px) {
	#content-flex {
		padding: 1vw;
		flex-wrap: wrap;	
	}
}