body,table,tr,div,h1,h2,h3,h4,ul,header {color:#334d4d; background-color:#b3e6cb}

@font-face {
  font-family: "Titel";
  src: url(../../MasonRegular.woff2) format("woff2");
}

@font-face {
  font-family: "Text";
  src: url(../../BaskervilleOldFace.woff2) format("woff2");
}

h1,h2,h3,header                     {font-family: "Titel", Batang, Times New Roman, serif;
                                     text-align: center}
body,div,p,pre,ul                   {font-family: "Text", Arial, Helvetica, sans-serif;
                                     font-size: 20px; text-align: left}
table,td                            {font-family: "Text", Arial, Helvetica, sans-serif;
                                     font-size: 20px; text-align: center; vertical-align: middle}

img {vertical-align: middle}
.index {background-color: #900000}
.kopf {background-color: #FFFFFF; color: #000000}

header {font-size: 49px; vertical-align: middle}

h1 {font-size: 49px; vertical-align: middle}
h2 {font-size: 34px}
h3 {font-size: 23px}

.uex1   {background-image:url(../Bilder/x.png);    background-size: 150px; background-repeat:no-repeat; width: 150px; height: 75px; background-position: center; vertical-align: middle; font-family: "Titel", Batang, Times New Roman, serif; text-align: center; font-size: 45px; vertical-align: middle; font-weight: bold}
.uex2   {background-image:url(../Bilder/x.png);    background-size: 150px; background-repeat:no-repeat; width: 150px; height: 75px; background-position: center; vertical-align: middle; font-family: "Titel", Batang, Times New Roman, serif; text-align: center; font-size: 45px; vertical-align: middle; font-weight: bold}
.uexx1  {background-image:url(../Bilder/xx.png);   background-size: 150px; background-repeat:no-repeat; width: 150px; height: 75px; background-position: center; vertical-align: middle; font-family: "Titel", Batang, Times New Roman, serif; text-align: center; font-size: 45px; vertical-align: middle; font-weight: bold}
.uexx2  {background-image:url(../Bilder/xx2.png);  background-size: 150px; background-repeat:no-repeat; width: 150px; height: 75px; background-position: center; vertical-align: middle; font-family: "Titel", Batang, Times New Roman, serif; text-align: center; font-size: 45px; vertical-align: middle; font-weight: bold}
.uexxx1 {background-image:url(../Bilder/xxx.png);  background-size: 150px; background-repeat:no-repeat; width: 150px; height: 75px; background-position: center; vertical-align: middle; font-family: "Titel", Batang, Times New Roman, serif; text-align: center; font-size: 45px; vertical-align: middle; font-weight: bold}
.uexxx2 {background-image:url(../Bilder/xxx2.png); background-size: 150px; background-repeat:no-repeat; width: 150px; height: 75px; background-position: center; vertical-align: middle; font-family: "Titel", Batang, Times New Roman, serif; text-align: center; font-size: 45px; vertical-align: middle; font-weight: bold}

.wuerfel1 {background-image:url(../Bilder/wuerfel1.png); background-repeat:no-repeat; width: 100px; height: 100px;  background-position: center; vertical-align: middle}
.wuerfel2 {background-image:url(../Bilder/wuerfel2.png); background-repeat:no-repeat; width: 100px; height: 100px;  background-position: center; vertical-align: middle}
.wuerfel3 {background-image:url(../Bilder/wuerfel3.png); background-repeat:no-repeat; width: 100px; height: 100px;  background-position: center; vertical-align: middle}

.px20 {font-weight: bold; font-size: 24px}
.px14w {font-weight: bold; font-size: 18px; color:#FFFFFF}
.px13 {font-size: 17px}
.px10 {font-size: 13px; text-align: center}
.links {background-color:#900000; font-size: 24px; font-weight: bold; cursor:hand}
.px12 {font-size: 18px}
.rueck {text-align: left; text-indent: -2em; margin-left: 2em}
.schwarz {color: #000000}
.beige   {color:#FFF088}
.ohneSF {color:#A40000}

a		{font-size: 19px; text-decoration: none; font-weight: bold}
.left 	{text-align: left}
.right	{text-align: right}
.center	{text-align: center}

a:link    {color:#993300}
a:visited {color:#993300}
a:active  {color:#993300}
a:hover   {color:#E00000}

.buttonlink {
	background-color: transparent; 
	border: none;
	color: #993300;
	padding: 2px 2px;
	text-align: left;
	text-decoration: none;
	display: inline-block;
	font-size: 19px;
	font-weight: bold;
	transition: 0.3s;}

.buttonlink:hover {
	color:#E10000;
	cursor: pointer;
} 

table tr.buttoninventar{
	color: #993300 !important;
}
table tr.buttoninventar:hover {
	color:#E10000 !important;
	cursor: pointer;
} 

.tabelleu  {color: #FFFFFF; vertical-align: top; font-weight: bold; font-size: 14px; border-bottom: 2px solid; border-color: #878787}
.tabelleul {text-align: left; vertical-align: top; color: #FFFFFF; font-weight: bold; font-size: 14px; border-bottom: 2px solid; border-color: #878787}
.tabelleur {text-align: right; vertical-align: top; color: #FFFFFF; font-weight: bold; font-size: 14px; border-bottom: 2px solid; border-color: #878787}
.tabellel  {text-align: left; border-bottom: 1px solid; border-color: #A7A7A7}
.tabeller  {text-align: right; vertical-align: top; font-size: 13px; border-bottom: 1px solid; border-color: #A7A7A7}
.tabellez  {font-size: 13px; border-bottom: 1px solid; border-color: #A7A7A7}
.tabelled  {color: #FFFFFF; vertical-align: top; font-size: 13px; border-bottom: 1px solid; border-color: #A7A7A7; font-weight: bold}
.tabellel2 {text-align: left; vertical-align: top; font-size: 13px; border-bottom: 2px solid; border-color: #A7A7A7}
.tabellez2 {vertical-align: top; font-size: 13px; border-bottom: 2px solid; border-color: #A7A7A7}
.tabellelv {text-align: left; vertical-align: middle; font-size: 13px; border-bottom: 1px solid; border-color: #A7A7A7}
.tabellegi {text-align: left; vertical-align: top; font-size: 13px; border-bottom: 1px solid; border-left: 1px solid; border-color: #A7A7A7}

.nav {
  height: 100%;
  width: 0px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  overflow-x: hidden;
  padding-top: 20px;
  background-color: #d9f2e6;
  transition: 0.5s;
}

.contentLdS {
	position: relative; /* Ermöglicht die absolute Positionierung von Kind-Elementen */
	padding-top: 0px; /* Platz für den überlagernden Text */
}

.overlay-textLdS {
	position: absolute; /* Absolute Positionierung für den Text */
	top: -50px; /* Verschiebt den Text 50px nach oben */
	left: 0; /* Links im Container */	
	width: 200px;
	background: url('../Bilder/LdS.png') no-repeat; /* Bildhintergrund */
	padding: 10px; /* Etwas Abstand im Text */
	z-index: 10; /* Stellt sicher, dass der Text über anderen Elementen liegt */
}

#inhalt {
  transition: margin-left .5s;
  padding: 16px;
}


.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

.col-16 {
  float: left;
  width: 16%;
  margin-top: 6px;
}

.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}

.col-33 {
  float: left;
  width: 33%;
  margin-top: 6px;
}

.col-50 {
  float: left;
  width: 50%;
  margin-top: 6px;
}

.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

.col-100 {
  float: left;
  width: 100%;
  margin-top: 6px;
}

.ll {
	float: left;
	width: 2em;
}


/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

#toggleRahmen{
  		display:none;
}  

/* Responsive layout - when the screen is less than 1200px wide, make the two columns stack on top of each other instead of next to each other */
@media only screen and (max-width: 1200px) {
  .col-25, .col-33, .col-50, .col-75, .col-100 input[type=submit] {
    width: 100%;
    margin-top: 6px;
    font-size: 66px;
  }

  .buttonlink {
  background-color: transparent; 
  border: none;
  /*border-bottom: 5px solid darkred;*/  
  padding: 30px 2px;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  font-size: 62px;
  font-weight: bold;
  transition: 0.3s;}

  .nav {
        /*display: none; /* Verberge Hauptnavigation */
        display:block;
        /*width: 0px !important;
        max-width: 0px !important;*/
  }

  #inhalt {
  transition: none;
  padding: 0px;
  margin-left: 5px !important;
  margin-right: 5px !important;

	}

  header {font-size: 99px; vertical-align: middle}

  h1 {font-size: 99px; vertical-align: middle}
  h2 {font-size: 77px}
  h3 {font-size: 44px}

  input {font-size: 50px}

  body,div,p,pre,ul                   {font-family: "Text", Arial, Helvetica, sans-serif;
                                     font-size: 44px; text-align: left}
  table,td                            {font-family: "Text", Arial, Helvetica, sans-serif;
                                     font-size: 20px; text-align: center; vertical-align: middle}


	.wuerfel1 {background-image:url(../Bilder/wuerfel1.png); background-size: 200px 200px; background-repeat:no-repeat; width: 200px; height: 200px;  background-position: center; vertical-align: middle; font-size: 50px;}
	.wuerfel2 {background-image:url(../Bilder/wuerfel2.png); background-size: 200px 200px; background-repeat:no-repeat; width: 200px; height: 200px;  background-position: center; vertical-align: middle; font-size: 50px;}
	.wuerfel3 {background-image:url(../Bilder/wuerfel3.png); background-size: 200px 200px; background-repeat:no-repeat; width: 200px; height: 200px;  background-position: center; vertical-align: middle; font-size: 50px;}

	.overlay-textLdS {
			font-size: 20px;
	}

	#Rahmen{  
      position:fixed;  
      top:0;  
      left:-85%;            /* ausserhalb des Bildschirms verstecken   */  
      width:85%;            /* nimmt 85 % der Breite, Höhe 100 %        */  
      height:100%;        
      overflow-y:auto;  
      box-shadow:3px 0 10px rgba(0,0,0,.4);  
      transition:left .3s ease;  
      z-index:1000;  
  }  
  /* wenn geöffnet (per JS Klasse „open“), nach innen schieben */  
  #Rahmen.open{ left:0; }  
  
  /* der Hamburger-Knopf                                       */  
  #toggleRahmen{
  		display:none;
      position:fixed;  
      top:10px;  
      left:10px;  
      font-size:26px;  
      background: rgba(255,255,255,.15);
      backdrop-filter: brightness(100%) blur(8px);
      box-shadow: 0 0 3px rgba(0,0,0,.25) inset;
      border:none;  
      color:#444;  
      z-index:1001;  
      cursor:pointer;  
  }
  
  /* alle Checkboxen vergrößern */  
  input[type="checkbox"]{  
        transform: scale(2.5) translateY(-3px);
        transform-origin: left center;
        vertical-align: middle;   
          
        margin-right: .6em;  
        cursor:pointer;  
  }  
}