/* ----------------------- */
/* --- commonstyle.css --- */
/* ----------------------- */
@import 'normalize.css';

/* --- RESET --- */ 

* {
	font-family: 'Lato', sans-serif;
	font-weight: 400;
	font-size: 1.0em;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	list-style-type: none;
	text-decoration: none;
}
/* von stickytest start */
body {
  display:flex;
  font-size: 1rem;
	line-height: 1.25 !important;
  min-height: 100vh;
  flex-direction: column;
}
article{
	flex:5;
	display:flex;
	flex-direction:column;
	align-items:stretch;
	order:2;
	background-color:white
}

dialog::backdrop { 
  background: rgba(0,0,0,0.4);
}

/*
article {
	flex:1 0 auto;
  display: flex;
  min-height: 100%;
  flex-direction: column;
	line-height: 1.15;
	background-color:yellow;
}
*/
/*
main {
  flex:1 0 auto;
	background-color:green;
}
*/

/*html,body{font-family:'Lato', sans-serif;height:100%;margin:0}*/

/* --- BASE STYLES --- */
strong{font-size:1.0em;font-weight:bold;color:inherit}
.bold{font-weight:900 !important;}
     
.content ul, 
.content li {
	list-style: square;
	margin-left: 1.0em;
	padding-left: 0.5em;
	color: gray;
}

img{width:100%;height:auto}
.imglinks{margin-bottom:1.0rem;width:100%;height:auto}
.imgtextmittig{float:left;vertical-align:middle;width:32px;height:auto}
.imgtextmittiglinks{vertical-align:middle}

.hvv-image{vertical-align:middle;width:75px;height:auto;margin-left:1rem;background-color:white}
.db-image{vertical-align:middle;width:30px;height:auto;margin-left:1rem;background-color:white}
#daegfa-logo{margin:2px;background-color:white;text-align:center}

#marker h3{font-size:1.2em;font-weight:700;margin-left:0;margin-bottom:0em;padding-left:0em;color:rgb(85,119,174)}
#marker h4{font-size:1.0em;font-weight:700;margin-bottom:0em;color:black}
#marker p{font-size:1.0em;font-weight:600;color:black}

h1 {
	font-weight:900;
	font-size:3vw;
	color:white;
}
h2 {font-weight:700;
	font-size:2vw;
	color:white;
}
h3 {
	font-weight:700;
	font-size:1.4rem;
	padding-left:1.0em;
	margin-bottom:0.5em;
	color:rgb(85,119,174);
}
h4 {
	font-weight:700;
	font-size:1.1rem;
	padding-left:1.0em;
	padding-top:0.5em;
	margin-bottom:0.5em;
	color:rgb(85,119,174);
}
h5 {
	font-weight:700;
	font-size:1.0rem;
	padding-left:1.0em;
	color:rgb(85,119,174);
}

/* aus style.css start */
foto-container {
	display:flex;
	flex-direction:column;
	padding-top: 2em;
	padding-left: 1em;
	padding-right: 1em;
	padding-bottom: 1em;
	max-width: 100%;
	height: auto;
}

foto-image {
	/*flex: 1;*/
	width:30%;
	height:auto;
}

foto-description {
	/*flex: 3;*/
	width:70%;
	/*padding-left: 2em;*/
}
/* aus style.css ende */

article h1 {
	font-weight: 700;
	font-size: 1.5em;
	line-height: 1.5em;
	padding-left: 1.0em;
	margin-top: 1.5em;
	margin-bottom: 1.0em;
	color: rgb(85,119,174);
}

article h2 {
	font-weight: 700;
	font-size: 1.5em;
	line-height: 1.5em;
	padding-left: 1.0em;
	margin-top: 1.5em;
	margin-bottom: 1.0em;
	color: rgb(85,119,174);
}

article h3 {
	font-weight: 700;
	font-size: 1.2em;
	line-height: 1.0em;
	margin-top: 1.0em;
	margin-bottom: 1.0em;
	padding-left: 1.0em;
	padding-right: 1.0em;
	color: rgb(85,119,174);
}

article  p {
	font-weight: 400;
	font-size: inherit;
	padding-left: 1.0em;
	padding-right: 1.0em;
	/*text-align: justify;*/
	text-align:start; /* 26.6.22*/
	float:left; /* 26.6.22*/
	color: gray;
}

article  a {
	font-weight: 400;
	font-size: inherit;
	padding-left: 2.0em;
	padding-right: 2.0em;
	text-align: justify;
	color: gray;
}

 a.menu-button {
	font-weight:900;
	font-size:inherit;
	padding-left:0.0em;
	padding-right:0.0em;
	color:yellow;
}
.pdflinks {
	float:left;
	vertical-align:middle;
	width:32px;
	height:32px;
	margin-left:1.0em;
	margin-bottom:1.0em;
	margin-top:1.0em;
} 
/* 29.5.2025
a[href^="./"],a[href^="https://"] {
	font-weight: inherit;
	font-size: inherit;
	padding-left: 0em;
	padding-right: 0em;
  padding-top: 1.0em;
  margin-top: 1.0em;
	color: royalblue;
}
*/
/***testweise auskommentiert 29.5.2025
a[href^="./"]:hover {
	font-weight: inherit;
	font-size: inherit;
	text-decoration: underline;
	text-align: left;
	color: crimson;
}
***/
a[href^="./"]:focus {
	font-weight: inherit;
	font-size: inherit;
	text-decoration: none; /*underline;*/
	text-align: left;
	color: purple;
}

a[href^="/"]{
	font-weight: inherit;
	font-size: inherit;
	padding-left: 0em;
	padding-right: 0em;
	color: royalblue;
}

a[href^="/"]:visited {
	font-weight: inherit;
	font-size: inherit;
	text-decoration: underline;
	text-align: left;
	color: purple;
}

a[href^="/"]:hover {
	font-weight: inherit;
	font-size: inherit;
	text-decoration: underline;
	text-align: left;
	color: green;
}

a[href^="/"]:visited:hover {
	font-weight: inherit;
	font-size: inherit;
	text-decoration: underline;
	text-align: left;
	color: crimson;
}

a[href^="/"]:focus {
	font-weight: inherit;
	font-size: inherit;
	text-decoration: underline;
	text-align: left;
	color: black;
}

a[href^="http"], a[href^="https"] {
	font-weight: inherit;
	font-size: inherit;
	padding-left: 0em;
	padding-right: 0em;
	color: royalblue;
}
/* 29.5.2025
a[href^="http"]:hover, a[href^="https"]:hover {
	font-weight: inherit;
	font-size: inherit;
	text-decoration: underline;
	text-align: left;
	color: crimson;
}
*/
a[href^="mailto"] {
	font-weight: inherit;
	font-size: inherit;
	text-decoration: underline;
	text-align: left;
	color: royalblue;
}

a[href^="mailto"]:hover {
	font-weight: inherit;
	font-size: inherit;
	text-decoration: underline;
	text-align: left;
	color: crimson;
}

a[href^="mailto"]:focus {
	font-weight: inherit;
	font-size: inherit;
	text-decoration: underline;
	text-align: left;
	color: purple;
}

a[href^="http"]:focus {
	font-weight: inherit;
	font-size: inherit;
	text-decoration: underline;
	text-align: left;
	color: purple;
}

aside-left > div h2,
aside-right > div h2{
	font-size:1.0em;
	font-weight:700;
	padding-left:1.0em;
	padding-right:0.5em;
	margin-bottom:0;
	line-height:1.15;
	color:rgb(85,119,174);
}

aside-right > div h3{
	font-size:1.0em;
	font-weight:700;
	padding-left:1.0em;
	padding-right:0.5em;
	padding-top:1.0em;
	color:rgb(85,119,174);
}
aside-left > div h4{font-size:0.8em;font-weight:700;padding-left:1.0em;padding-right:0.5em;padding-top:0.5em;padding-bottom:0em;color:black}
aside-left > div h5{font-size:0.8em;font-weight:700;padding-left:1.0em;padding-top:0.5em;color:gray}
aside-left strong{font-size:0.9em;font-weight:700;padding-left:1.0em;padding-top:2.5em;padding-bottom:1.0em;color:crimson}

aside-left > div a{
	font-size:0.9em;
	padding-left:1.0em;
	color:gray;
}
aside-right p{
	font-size:0.9em;
	padding-left:1.0em;
	padding-top:0.5em;
	padding-bottom:0.3em;
	margin-bottom:0;
	color:gray;
}
aside-right > div a{
	font-size:0.9em;
	padding-left:1.0em;
	color:gray;
}
aside-left a,
aside-right a,
foto-description a,
foto-image a{
	font-size:0.9em;
	padding-left:1.0em;
	color:gray !important;
}
aside-right table,
aside-left table{
	width:auto;
	padding-left:1.0em;
	table-layout:fixed;
	empty-cells: show;
	border: none !important;
	border-collapse:separate;
}
aside-right table td,
aside-left table td{
	font-weight:400;
	font-size:0.9em;
	padding-right:0.1em;
	color:gray;
}

td a {
	font-weight:400;
	font-size:inherit;
	width:100%;
	text-align:left;
	color:rgb(85,119,174);
}

.abcde-table{font-size:1.0em;margin-left:1em;margin-right:1rem;margin-bottom:1em;border:1px solid gray;border-collapse:collapse}
.abcde-tr{font-size:1em;border:1px solid gray;border-collapse:collapse}
.abcde-td{font-size:1em;border:1px solid gray;border-collapse:collapse;padding:1em}

.leftFloat{float:left}
.rightFloat{float:right}

.tooltip{position:relative;display:inline-block;color:rgb(85,119,174);font-weight:bold}
.tooltip .tooltiptext{visibility:hidden;background-color:rgb(85,119,174);width:300px;color:#fff;text-align:left;border-radius:6px;padding:10px;position:absolute;z-index:1;bottom:125%;left:50%;margin-left:-60px;opacity:0;transition:opacity 0.3s}
.tooltip .tooltiptext::after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:#555 transparent transparent transparent}
.tooltip:hover .tooltiptext{visibility:visible;opacity:1}

/*
.footer p{
	font-size:0.9em;
	padding-left:0.5em;
	color: white;
	text-align:center;
}
*/
.instagram-link {
            display: flex;               /* Aktiviert Flexbox */
            align-items: center;         /* Vertikale Zentrierung */
            justify-content: center;     /* Horizontale Zentrierung */
            padding: 10px 15px;         /* Innenabstände */
            background-color: #e1306c;  /* Hintergrundfarbe von Instagram */
            color: white;                /* Schriftfarbe */
            border: none;                /* Rahmen entfernen */
            border-radius: 5px;         /* Abgerundete Ecken */
            cursor: pointer;             /* Zeiger-Cursor */
            width: auto;                /* Breite des Buttons */
        }

.instagram-link:hover {
  background-color: yellow;
}

.instagram-img img {
  width: 24px;                 /* Breite des Instagram-Icons */
  height: 24px;                /* Höhe des Icons */
  margin-right: 10px;          /* Abstand zwischen Bild und Text */
}

.instagram-link a {
	font-size:1.0em;
	padding:1.0em;
	color:white;
	text-align:center;
}

footer{
  display: flex;
  align-items: center !important;
  justify-content: center !important;
  width: 100%;
  height: 8vh;
  background-image:linear-gradient(315deg,rgb(85,119,174), lightblue,cornflowerblue,rgb(85,119,174));
}

/*
footer {
  display: flex;   
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  color: white;
}
*/
/* Copyright-Information */
.left-items {
  text-align: left;            /* Rechtfertigung des Copyright-Textes */
	margin-right: auto;           /* Erstes Item nach links schieben */
	color:white;
}

.right-items {
  margin-left: auto;           /* Schiebt die nachfolgenden Items nach rechts */
  display: flex;               /* Aktiviere Flexbox für die rechten Items */
  gap: 1em;                   /* Abstand zwischen den rechten Items */
	color:white;
}

.right-items a {
	font-size:1.0em;
	padding:1.0em;
	text-decoration:underline;
	color:white;
	text-align:center;
	justify-content: right;
}
.right-items > .active{
	color:red;
}

#map{width:100%;height:500px;margin-top:2em;margin-bottom:2em}

/* --- PAGE LAYOUT STYLES --- */
.wrapper{
	min-height:95%;
	display:flex;
	flex-direction:column;
	align-items:stretch;
	flex-grow:1;
}
header{
	flex:none;
	min-height:15%;
	background-color:rgb(85,119,174);
}
aside-left{
	flex:1;
	min-width:17em;
	min-height:auto;
	order:1;
	background-color:#fffbf0;
	border-right:1px solid silver;
}
aside-right{
	flex:1;
	min-width:17em;
	min-height:auto;
	order:3;
	background-color:#fffbf0;
	border-left:1px solid silver;
}
/*
article{
	flex:5;
	display:flex;
	flex-direction:column;
	align-items:stretch;
	min-width:auto;
	min-height:auto;
	order:2;
	background-color:white
}
*/
@supports (position: sticky){nav{position:sticky;top:0;background:silver}}

.content{
	flex: 1 0 auto;
	display:flex;
	align-items:stretch;
	max-height:80%;
	background-color:white;
	border-bottom:1px solid gray;
	/*flex-grow:1;*/
}


.pdf-container{flex:1 1 auto;align-items:stretch;display:flex}

iframe{height:100%;width:100%}

foto-container{
	display:flex;
	flex-direction: row;
	border-bottom: 1px solid silver;
	padding-top: 2em;
	padding-left: 1em;
	padding-right: 1em;
	padding-bottom:1em;
  max-width:100%;
  height:auto
}

foto-image{flex:1}
foto-description{flex:1;padding-left:2em}

.bahn {display:block;margin-left:auto;margin-right:auto;background-color:red}

/* --- FOOTER AREA --- */
.footer input{
	background-color:rgb(85,119,174);
	color:white;
	box-sizing:border-box;
	border:none;
	font-size:1.0em;
	padding-left:0.5em;
}

/* --- HEADER AREA --- */
/*
über 1024 Pixel
bis zu 1024 Pixel (1024 : 16 = 64em)
bis zu 800 Pixel (800 : 16 = 50em)
bis zu 480 Pixel (480 : 16 = 30em)
*/
header h1{
	font-weight:900;
	font-size:5vw;
	line-height:3vw;
	color:white;
	padding-top:2vw;
	padding-bottom:2vw;
	margin:auto
}
header h2{
	font-weight:600;
	font-size:2vw;
	line-height:2vw;
	padding-top:1.5em;
	color:white;
}
header h3{
	font-weight:600;
	font-size:2vw;
	line-height:2vw;
	padding-bottom:1.5em;
	color:white;
}

header{
	flex:none;
	width:100%;
	height:15%;
	background-image:linear-gradient(315deg,rgb(85,119,174), lightblue,cornflowerblue,rgb(85,119,174));
}
#header-content{
	display:grid;
	grid-template-columns:17vw auto 30vw;
	grid-template-rows:17vw;
	grid-template-areas:"logo text photo"
}
.logo{
	grid-area:logo;
	display:flex
}
.logo > img{
	border-top-right-radius:50% 50%;
	border-bottom-right-radius:50% 50%;
	border-top-left-radius:50% 50%;
	border-bottom-left-radius:50% 50%;
	object-fit:cover;
	width:100%;
	height:auto
}
.text{
	grid-area:text;
	justify-self:center;
	align-self:center;
	justify-items:center;
}
.text > a{
	text-align:center
}
.photo{
	grid-area: photo;
	display:flex
}
.photo > img{
	object-fit:cover;
	width:100%;
	height:auto;
	border-radius:10% 10% 10% 10%;
}

/* --- STANDARD --- */
div > a > button {
	margin-left:1.0em;
	border:1px solid #0066cc;
	background-color:rgb(85,119,174);
	color:white;
	padding:5px 10px;
	border-radius:10px;
	height:2em;
	width:10em;
}

button{
  border:1px solid #0066cc;
  background-color:#0099cc;
  color:#ffffff;
  padding:5px 10px;
  border-radius:10px;
  height:2em;
  width:10em;
}
/* 29.5.2025
button:hover{
  border:1px solid #0099cc;
  background-color:#00aacc;
  color:#ffffff;
  padding:5px 10px;
  border-radius:10px;
  height:2em;
  width:10em;
}
*/
button:disabled,
button[disabled]{
  border:1px solid #999999;
  background-color:#cccccc;
  color:#666666;
  border-radius: 10px;
  height: 2em;
  width: 10em;
}

.right-items a:hover,
.right-items a:active,
.right-items a.focus {
	color:red
}
a.button {
	text-decoration:none;
	color:initial;
}

/* --- BACK-BUTTON --- */
#back-button {
	display:inline-block;
	background-color:rgb(85,119,174);
	width:40px;
	height:40px;
	text-align:center;
	border-radius:4px;
	position:fixed;
	bottom:40px;
	right:20px;
	transition:background-color .3s,opacity .5s,visibility .5s;
	opacity:0;
	visibility:hidden;
	z-index:1000;
}
#back-button:after {
	content:"\f077";
	font-family:FontAwesome;
	font-weight:normal;
	font-style:normal;
	font-size:2em;
	line-height:40px;
	color:#fff;
}
#back-button:hover {
	cursor:pointer;
	background-color:red;
}
#back-button:active {
	background-color:red;
}
#back-button.show {opacity:1;
	visibility:visible;
}   

/* --- MEDIA QUERIES --- */
@media (min-width: 918px){
	/* --- large screens --- */
	#back-button{
		margin:30px;
	}
	footer{
		height:auto;
		width:100%;
		background-image:linear-gradient(315deg,rgb(85,119,174), lightblue,cornflowerblue,rgb(85,119,174));
	}
	footer ul {
		display:flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-top:1em;
		margin-bottom:1em;
		margin-right:1em;
		margin-left:1em;
		/*height:5vw;*/
	}
	footer ul li:nth-child(1) {
		margin-right: auto;
	}
	footer ul li:nth-child(2) {
		margin-left:auto;
	}
	.footer-text a{
		font-size:1.0em;
		padding:1.0em;
		text-decoration:none;
		color:white;
		/*text-align:center;*/
	}
	.footer-button a{
		font-size:1.0em;
		padding:1.0em;
		text-decoration:underline;
		color:white;
		/*text-align:center;*/
	}
	.footer-button > .active{
		color:red;
	}
}
@media (max-width: 918px){
	/* --- small screens --- */
	 h1{font-size:1.0em}
	 h2{font-size:0.8em}
	 
	.content{
		width:100%;
		order:1;
		flex-direction:column;
		padding:0;
		border:0;
		border-top:0.2rem solid gray
	}

  .content > aside-left{
		order:2;
		border:0;
		border-top:0.2rem solid gray
	}	

  .content > aside-right{
		order:3;
		border:0;
		border-top:0.2rem solid gray
	}  
  
	footer{
		height:auto;
		width:100%;
		background-image:linear-gradient(315deg,rgb(85,119,174), lightblue,cornflowerblue,rgb(85,119,174));
	}
	footer ul {
		display:flex;
		flex-direction: column;
		align-items: center;
		margin-top:1em;
		margin-bottom:1em;
	}
	.footer-text a{
		font-size:1.0em;
		padding:1.0em;
		text-decoration:none;
		color:white;
		text-align:center;
	}
	.footer-button a{
		font-size:1.0em;
		padding:1.0em;
		text-decoration:underline;
		color:white;
		text-align:center;
	}
	.footer-button > .active{
		color:red;
	}
}