/* Googlefont Poppins CDN Link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins', "Trebuchet MS", Arial, sans-serif;
}
body{
	min-height: 100vh;
}
body {
	background-color : #eee;
	margin-left: 20px;
	margin-right: 20px;
	margin-top: 0px;					/* margin-top = Pixel Abstand zwischen Fensterrand und Inhalt oben */
	margin-bottom: 10px;				/* margin-bottom = Pixel Abstand zwischen Fensterrand und Inhalt unten */
	background-repeat: no-repeat;
	background-position: 10%;
	background-attachment: fixed;
	color : #000;
	line-height : 1.3em;
	font-size : 1.1em;
}

/* icon properties Web Icons from  https://boxicons.com/ */
/* included with generic_meta.inc in PHP page headers */
.webIcon {
	font-size: 1.1em;
}

/* sticky page header */
.pageHeader {
	padding: 0px 20px;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	background-color: #626262;
	z-index: 100;
}

.pageHeaderSticky {
	position: fixed;
	left: 0;
	top: 0;
}

.zoomable {
  cursor: zoom-in;
}

/* DIVs next to each other in screen view and below each other in the mobile view */
/* https://www.w3schools.com/code/tryit.asp?filename=GO6TDGLXZ6RX */
 @media all {
	.pageContent {
		padding-top: 70px;
		width: 100%;
		max-width: 1600px;
		margin: auto;
		/* to test
		border-style: solid;
		border-width: 1px;
		border-color: green;
		*/
	}
	.centerContainer {
		margin: auto;
		width: fit-content;
		padding: 5px 10px 5px 10px;
		/* to test
		border-style: solid;
		border-width: 1px;
		border-color: orange;
		*/
	}
	.pageContainer {
		width: 100%;
		margin: 5px;
		/* to test
		border-style: solid;
		border-width: 1px;
		border-color: red;
		*/
	}
	/* breakdown and number of columns */
	.gridFrames100 {grid-template-columns: 1fr;}
	.gridFrames110 {grid-template-columns: 1fr 1fr;}
	.gridFrames111 {grid-template-columns: 1fr 1fr 1fr;}
	.gridFrames120 {grid-template-columns: 1fr 2fr;}
	.gridFrames130 {grid-template-columns: 1fr 3fr;}
	.gridFrames210 {grid-template-columns: 2fr 1fr;}
	.gridFrames310 {grid-template-columns: 3fr 1fr;}
	.gridContent {
		margin: 5px;
		/* to test
		border-style: solid;
		border-width: 1px;
		border-color: blue;
		 */
	}
}

/*###### no PC - DIVs next to each other (otherwise below each other) ###### */
@media (min-width:1201px){
	.pageContainer {
		display: grid;
	}
}

/*###### Phone - different display sequence for mobile phone if necessary ###### */
/* https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_order */
@media (max-width:1200fpx){
	/* Safari 6.1+ */
	.phoneOrder1 {-webkit-order: 1;}
	.phoneOrder2 {-webkit-order: 2;}
	.phoneOrder3 {-webkit-order: 3;}
	.phoneOrder4 {-webkit-order: 4;}
	.phoneOrder5 {-webkit-order: 5;}
	/* Standard syntax */
	.phoneOrder1 {order: 1;}
	.phoneOrder2 {order: 2;}
	.phoneOrder3 {order: 3;}
	.phoneOrder4 {order: 4;}
	.phoneOrder5 {order: 5;}
}

/* paragraph */
p {
	margin-bottom : 0px;
	margin-top : 0px;
}

/* general class - indented */
*.indent {
	margin-left : 15px;
}

/* Header */
h1 {
	font-size:1.8em;
	font-style: italic;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 22px;
	padding-bottom: 18px;
	white-space: nowrap;
}
h2 {
	font-size:1.6em;
	font-style: italic;
	margin-top : 0px;
	margin-bottom : 0px;
	padding-top : 20px;
	padding-bottom : 6px;
	white-space: nowrap;
}
h3 {
	font-size:1.4em;
	font-style: italic;
	margin-top : 0px;
	margin-bottom : 0px;
	padding-top : 16px;
	padding-bottom : 6px;
	white-space: nowrap;
}
h4 {
	font-size:1.2em;
	font-style: italic;
	margin-top : 0px;
	margin-bottom : 0px;
	padding-top : 13px;
	padding-bottom : 4px;
	white-space: nowrap;
}
h5 {
	font-size:1em;
	font-style: italic;
	margin-top : 0px;
	margin-bottom : 0px;
	padding-top : 9px;
	padding-bottom : 0px;
	white-space: nowrap;
}

/* separator --> <hr> with text --> <span class="separator">my text</span>*/
.separator {
	display: flex;
	align-items: center;
	text-align: center;
}

.separator::before,
.separator::after {
	content: '';
	flex: 1;
	border-bottom: 1px solid #000;
}

.separator:not(:empty)::before {
	margin-right: .5em;
}

.separator:not(:empty)::after {
	margin-left: .5em;
}

/* class to highlight elements in longer texts for example when referring menu or button names */
.highlightElement {
  color: #165982;
  font-style: italic;
  }

/* highlight elements by fading in and out background color */
/* Note: class must be reset, if the same element should be handled again */
.bgFadeInOut {
  animation-name: bgFadeInOut;
  animation-fill-mode: forwards;
  animation-duration: 4s;
  animation-delay: 0s;
}
@keyframes bgFadeInOut {
  0% {background-color:transparent;}
  25% {background-color:#f71e2bc4;}
  100% {background-color:transparent;}
}

/* normale Tabelle */
table {
	border-collapse: collapse;
}

table.table_full {
	border-collapse: collapse;
	width : 98%;
	border : None;
}

th {
	font-size: 1.0em;
	white-space: nowrap;
	vertical-align: top;
	background-color: #e2101d;
	color: #FFF;
	padding-bottom : 2px;
	padding-left : 5px;
	padding-right : 5px;
	padding-top : 2px;
	empty-cells: show;
	text-align: center;
}

th a:link    {color : #fff;}
th a:visited {text-decoration: underline; color: #fff;}
th a:active  {text-decoration: underline; color: #fff;}

td {
	font-size: 1.0em;
	border: none;
	vertical-align:top;
	background-color: transparent;
	padding-bottom: 2px;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 2px;
	empty-cells: show;
	text-align: left;
}

.bold {
	font-weight: bold;
}

.solid,
.solid tr td,
.solid tr th {
	border-right : thin solid Silver;
	border-left : thin solid Silver;
	border-top : thin solid Silver;
	border-bottom : thin solid Silver;
}

.solidRowOnly tr{
	border-right : thin solid Silver;
	border-left : thin solid Silver;
	border-top : thin solid Silver;
	border-bottom : thin solid Silver;
}

.solidleft {
	border-left : thin solid Silver;
	border-top : thin solid Silver;
	border-bottom : thin solid Silver;
}

.solidmiddle {
	border-top : thin solid Silver;
	border-bottom : thin solid Silver;
}

.solidright,
.solidright tr td,
.solidright tr th {
	border-right : thin solid Silver;
	border-top : thin solid Silver;
	border-bottom : thin solid Silver;
}

.solidtop,
.solidtop tr td,
.solidtop tr th {
	border-right : thin solid Silver;
	border-left : thin solid Silver;
	border-top : thin solid Silver;
}

.solidbottom,
.solidbottom tr td,
.solidbottom tr th {
	border-right : thin solid Silver;
	border-left : thin solid Silver;
	border-bottom : thin solid Silver;
}

.solidleftright,
.solidleftright tr td,
.solidleftright tr th {
	border-right : thin solid Silver;
	border-left : thin solid Silver;
}

/* to be used in TR to prevent wrap for the whole row */
.tr_nowrap td {
    white-space: nowrap;
}

td.center, th.center {
	text-align : center;
}

td.left, th.left {
	text-align : left;
}

td.right, th.right {
	text-align : right;
}

/* classes to show 3 DIV elements inside a TD tag, where the 2nd is centered, the 1st right and the 3rd is left aligned*/
/* Example:
<div class='center3-container'>
	<span class='center3-1st'>Text 1</span>
	<span class='center3-2nd'>-</span>
	<span class='center3-3rd'>Text 2</span>
</div>
*/
.center3-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  white-space: nowrap;
}

.center3-1st {
  flex: 1;
  text-align: right;
  padding-right: 5px;
}

.center3-2nd {
  flex: 0;
  text-align: center;
  padding-left: 5px;
  padding-right: 5px;
}

.center3-3rd {
  flex: 1;
  text-align: left;
  padding-left: 5px;
}


/* style for progress bar elements
the following HTML snippet must exist in the document
<div class='center3-container'>
	<span class='center3-1st'>Text 1</span>
	<span class='center3-2nd'>-</span>
	<span class='center3-3rd'>Text 2</span>
</div>
*/
#progress-bar {
    width: 100%;
    min-width: 400px;
    background-color: #f3f3f3;
    border: 1px solid silver;
    height: 24px;
    position: relative;
    text-align: center;
    line-height: 23px;
    font-weight: bold;
    color: #000;
    border-radius: 4px; /* Runde Kanten für moderneren Look */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 2px 5px rgba(0, 0, 0, 0.2);
}

#progress-bar-inner {
    height: 100%;
    width: 0%;
    background-color: #e2000e;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    border-radius: 4px; /* Passend zu #progress-bar */
    box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.5), inset 0 1px 1px rgba(0, 0, 0, 0.2);
}

#progress-bar span {
    position: relative;
    z-index: 2;
    color: #000;
    font-size: 14px;
}

/* highlight final and wrong results */
.finalResult {
	background-color: #6495ed2e;
}
.wrongResult {
	background-color: #e2000e;
	color: #fff;
}

/* forms with Field Sets und Label*/
input, textarea, select{
	line-height: 1.1em;
	font-size: 1.0em;
	font-family: "Poppins", "Trebuchet MS", Arial, sans-serif;
	padding-left: 5px;
	background-color: #fcfcfc;
}

input.radio {
	height: 13px;
	vertical-align: inherit;
}

fieldset {
	background: #ededed;
	padding: 10px;
	border: 1px solid #fff;
	border-color: #fff #666661 #666661 #fff;
	margin-bottom: 36px;
	max-width: 800px;
}

fieldset.action{
	background:#9da2a6;
	border-color:#e5e5e5 #797c80 #797c80 #e5e5e5;
	margin-top:-20px;
}

label{
	line-height: 1.1em;
	font-size: 1.0em;
	padding-left: 8px;
	color: #000;
}

label.opt{
	font-weight:normal;
}

button{
	font-weight: bold;
	font-size: 1.0em;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 1px;
	padding-bottom: 1px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 5px;
	margin-right: 5px;
	background-color: #ffde00;
	color: #000000;
	cursor: pointer;
}

/* lists */
ul {padding-left:20px; padding-top:0px; margin-top:1px;}
ol {padding-left:20px; padding-top:0px; margin-top:1px;}
li {padding-top: 1px;}

/* preformatierter Text und nicht-proportionale Schrift - blau */
pre { font-family:Courier New,Courier; font-size:1.1em; color:#0000C0; }
tt { font-family:Courier New,Courier; font-size:1.1em; color:#0000C0; }

/* layout elements with light grey background */
/* usage i tags z.B. <table class="doc" ...> */
.doc { background-color:#EEEEEE; }

/* a:link = links to pages not yet visited */
/* a:visited = links to pages that have already been visited */
/* a:active = links that are currently being clicked */
/* underline = underlined, default value, none = not underlined */
a:link    {text-decoration: underline; color: #000;}
a:visited {text-decoration: underline; color: #000;}
a:active  {text-decoration: underline; color: #000;}

/* class for pull downs appearing on mouse over */
/* Example:
<span class="dropdown">
	<span>Header Item</span>
	<div class="dropdown-content">
		<a href="javascript:void(0);" onclick="alert(1);">row 1</a>
		<a href="javascript:void(0);" onclick="alert(2);">row 2</a>
		<a href="javascript:void(0);" onclick="alert(1);">row 3</a>
	</div>
	</span>
*/
.dropdown {
	position: relative;
	display: inline-block;
	width: 100%;
}
.dropdown-content {
	display: none;
	position: absolute;
	background-color: #f1f1f1;
	min-width: 300px;
	white-space: nowrap;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
	text-align: left;
	font-weight: normal;
	padding: 2px 15px 2px 8px;
	margin-left: 25px;
	cursor: pointer;
}
.dropdown-content a {
	color: black;
	text-decoration: none;
	height: 25px;
	display: block;
}
.dropdown-content p {
	color: black;
	cursor: pointer;
	padding: 3px 0px 0px 2px;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown-content a:link {
	text-decoration: none;
	color: black;
}
.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content {
	display: block;
}

/* prn => special classes for the print view */
body.prn {
	background-color : #ffffff;
	color : #030303;
}

a:link.prn    {color : #030303;}
a:visited.prn {color : #030303;}
a:active.prn  {color : #030303;}

/* rowselect => special classes for the RowSelection function */
*.rowselect {
	background-color : #ddd;
	color : #000;
}

.rowselect a:link    {color : #000;}
.rowselect a:visited {color : #000;}
.rowselect a:active  {color : #000;}

*.rowselect2 {
	background-color : #e2101d;
	color : #FFF;
}

.rowselect2 a:link    {color : #fff;}
.rowselect2 a:visited {color : #fff;}
.rowselect2 a:active  {color : #fff;}

/* form field: https://www.osulzer.at/blog/spambot-bekampfung-ohne-captcha-abfrage */
.noeyes {
 	display: none;
}

/* Flex image gallery with hover effecthttps://codepen.io/cycosta/pen/wvMeNoJ */
/* https://codepen.io/cycosta/pen/wvMeNoJ */
.gallery {
  display: flex;
  padding: 2px;
  transition: 3.3s;
}
.gallery:hover .gallery__image {
  filter: grayscale(1);
}
.gallery__column {
  display: flex;
  flex-direction: column;
  width: 25%;
}
.gallery__link {
  margin: 2px;
  overflow: hidden;
}
.gallery__link:hover .gallery__image {
  filter: grayscale(0);
}
.gallery__link:hover .gallery__caption {
  opacity: 1;
}
.gallery__thumb {
  position: relative;
}
.gallery__image {
  display: block;
  width: 100%;
  transition: 0.3s;
}
.gallery__image:hover {
  transform: scale(1.1);
}
.gallery__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 25px 15px 15px;
  width: 100%;
  font-size: 1.2em;
  color: white;
  opacity: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
  transition: 0.8s;
}