
* {
  box-sizing: border-box;
/*  border: 1px solid red;	*/
  background-color: #12561E;
  margin: 0px;
  padding: 0px;
  color: white;
}

HTML, BODY {
	font-family : Lora, Bitstream Vera Serif, Bitstream Charter, Arial, Helvetica, sans-serif;
	font-size: 12pt;
/*	width: 480px;
	height: 720px;	*/
	text-align: center;
	border: 1px solid blue;
}

H2 {
  border: 1px solid blue;
  padding-top: 5px;
}

UL {
	list-style-type: circle;
	overflow: hidden;
}

LI {
	border-bottom: 1px solid violet;
	font-size: 133%;
}

HR {
  color: 1px solid yellow;
}

AUDIO {
  border: 1px solid magenta;
}

BUTTON {
	padding: 2px;	
}

.footer {
	margin: auto;
}

.hidden {
	display: none;
}

.smallTitleL {
	font-size: 70%;
	text-align: left;
	float: left;
}

.smallTitleC {
	font-size: 70%;
	text-align: center;
}

.smallTitleR {
	font-size: 70%;
	text-align: right;
	float: right;
}

.verybigCont {
	font-size: 407%;
}

.bigCont {
	font-size: 286%;
}

.bigmedCont {
	font-size: 202%;
}

.medCont {
	font-size: 142%;
}

.normCont {
	font-size: 100%;
}

.xCell {
	position: relative;
}

.stickit {
	position: sticky;
	top: 0;
	overflow: hidden;
}

.stickitb {
	position: sticky;
	border-top: 1px solid blue;
	bottom: 0;
	overflow: hidden;
}

.topright {
	position: absolute;
	top: 0;
	right: 0;
}

.topleft {
	position: absolute;
	top: 0;
	left: 0;
}

.bottomleft {
	position: absolute;
	bottom: 0;
	left: 0;
}

.xButton {
	padding-top: 0px;
	padding-bottom: 0px;
}

.x1Button {
	padding: 4px;
}

.center {
	text-align: center;
}

.popImageTop {
	width: 24px;
	float: left;
}

.popImage {
	margin: auto;
	padding-top: 6px;
}

.popup-overlay {
  /* Hintergrund und Positionierung des Overlays */
  position: fixed;
  background-color: rgba(20, 90, 33, 0.15); /* dark green background with opacity */
  top: 0; left: 0; width: 100%; height: 100%;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.popup-content {
  /* Das eigentliche Pop-up-Fenster */
  background-color: rgba(18, 86, 30, 0.85); /* dark green background with opacity */
  padding: 10px;
  border-radius: 8px;
  border: 2px solid magenta;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);

  /* Größe definieren */
  width: 90%; /* Auf Mobilgeräten */
  max-width: 600px; /* Maximalbreite für größere Bildschirme */
  height: auto; /* Höhe passt sich dem Inhalt an */
  max-height: 80vh; /* Maximalhöhe (80% der Viewport-Höhe) */
}

.overlay {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 95%; /* Full width (cover the whole page) */
  height: 96%; /* Full height (cover the whole page) */
  overflow-y: auto;
  margin: auto;
  border: 1px solid green;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1; /* Specify a stack order in case you're using a different order for other elements */
  background-color: rgba(18, 86, 30, 0.85); /* dark green background with opacity */
  cursor: pointer; /* Add a pointer on hover */
}

.ovl1 {
  z-index: 2;
}

.ovl2 {
  z-index: 3;
}

.ovl3 {
  z-index: 4;
}

.ovlE {
  z-index: 5;
}

.ovlm {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  overflow-y: auto;
  margin: auto;
  border: 1px solid red;
  top: 0;
  right: 0;
  text-align: left;
  background-color: rgba(0,0,0,0.85); /* Black background with opacity */
  cursor: pointer; /* Add a pointer on hover */
  z-index: 99;
}

.left {
	float: left;
}

.right {
	float: right;
}

.eingabe {
	background: #eeeeff;
	font-size: 12pt;
	color: black;
}

 /* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid yellow;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  outline: none;
  cursor: pointer;
  font-size: 100%;
  padding: 7px 9px;
  transition: 0.3s;
  border: 1px solid yellow;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #32963E;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #22762E;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
/*  border: 1px solid #ccc;	*/
  border-top: none;
}
