@font-face {
    font-family: 'roboto';
    src: url('Roboto-Regular-webfont.woff') format('woff');
    /*font-weight: 600;*/
    font-style: normal;
    font-display: swap; /* Verhindert das unsichtbare Laden der Schrift */
}

h1 {
	color: #1e3a5f;
	font-size: 2em;
}

h2 {
	text-align: center;
	vertical-align: baseline;
	font-size: 4em;
}

h3 {
	color: #1e3a5f;
	margin-bottom: 0;
}

p{
	font-size: 12pt;
}

body {
	margin: 0;
	padding: 0;
	background-color: #f8fafc;
	font-family: 'roboto', sans-serif;
}

section {
	max-width: 900px;
	padding-left: 5%;
	padding-right: 5%;
	margin-left:auto;
	margin-right:auto;
	margin-bottom: 75pt;
	text-shadow: 1px 1px 5px rgba(100,100,100, 0.1);
}

ul{
	font-size: 12pt;
}

li{
	padding-bottom: 4pt;
}

.gridContainer{
	display: grid;
	grid-template-columns: 40% 60%;
	/*place-items: center;*/
	padding:0;
	margin: 0;
}

.banderole{
	background-color: #1e3a5f;
	height: 75pt;
	margin-bottom: 40pt;
	padding-left: 5%;
	padding-right: 5%;
}

#gridText{
margin:0;
}

#headerBG{
	background-color: #1e3a5f;
	/*height: 80pt;*/
	height: 11vh;
	margin-bottom: 40pt;
}

#headerDiv{
	max-width: 900px;
	margin-left:auto;
	margin-right:auto;
	padding-left: 5%;
	padding-right: 5%;
	margin-bottom: 40pt;
}

#headline{
	height: auto;
	width: 100%;
	display: block;
  margin-left: auto;
  margin-right: auto;
  padding-top: 16pt;
}

#headerText{
	text-align: center;
	vertical-align: baseline;
	font-size: 4em;
	margin:0;
	padding:0;
	padding-top: 2vh;
	text-shadow: none;
	color:white;
	-webkit-text-stroke-color:black;
	text-stroke-color:black;
	-webkit-text-stroke-width:2px;
	text-stroke-width:2px;
}

#thomasImg { 
	width: 100%; 
	box-shadow: 3px 3px 5px rgba(100,100,100,0.6);
	border: 4px solid #1e3a5f;
	border-radius: 3pt 50pt 3pt 50pt;
	margin-bottom: 10pt;
}

#contactCard{
	position: relative;
	width: 100%;
	margin-left: auto; 
	margin-right: auto;
}

#contactCardImg{
	width: 100%;
	border-radius: 3pt 50pt 3pt 50pt;
	border: 4px solid #1e3a5f;
	box-shadow: 3px 3px 5px rgba(100,100,100,0.6);
}

#contactGradient{
	position: absolute;
	height: 100%;
	width: 70%;
	top:0;	
	background-image: linear-gradient(to right, rgba(0,0,0,0.9), rgba(0,0,0,0.7), rgba(0,0,0,0));
	border-radius: 3pt 50pt 3pt 50pt;
	container-type: inline-size;
	container-name: contactInfoContainer;
}

#contactText{
	position: absolute;
	top: 10%;
	left: 7%;
	font-size: 20pt;
	color: white;
	text-shadow: 0px 0px 10px black, 1px 1px 3px black;
	line-height: 1.3;
}


@container contactInfoContainer (width<600px) {
  #contactText {
    font-size: 15pt;
  }
}

@container contactInfoContainer (width<450px) {
  #contactText {
    font-size: 11pt;
  }