p.info {
	font-family: arial, sans-serif;
	line-height: 150%;
	margin-left: 2em;
	padding: 1em;
	border: 3px solid red;
	background-color: #f3f3ee;
	display: inline-block;
}
p.info span {
	font-weight: bold;
}
p.info span::after {
	content: ": ";
}

a.greenhead:link {
    color: white;
}

/* visited link */
a.greenhead:visited {
    color: white;
}

/* mouse over link */
a.greenhead:hover {
    color: hotpink;
}

/* selected link */
a.greenhead:active {
    color: yellow;
    }
a.greenhead { text-decoration: none; } /* Unterstreichung entfernen */


a.whitehead:link {
    color: green;
}

/* visited link */
a.whitehead:visited {
    color: green;
}

/* mouse over link */
a.whitehead:hover {
    color: red;
}

/* selected link */
a.whitehead:active {
    color: red;
    }
a.whitehead { text-decoration: none; } /* Unterstreichung entfernen */


a.whiteheadgross:link {
    color: green;
}

/* visited link */
a.whiteheadgross:visited {
    color: green;
}

/* mouse over link */
a.whiteheadgross:hover {
    color: red;
}

/* selected link */
a.whiteheadgross:active {
    color: red;
    }
a.whiteheadgross { text-decoration: none; } /* Unterstreichung entfernen */

a.redhead:link {
    color: white;
}

/* visited link */
a.redhead:visited {
    color: white;
}

/* mouse over link */
a.redhead:hover {
    color: black;
}

/* selected link */
a.redhead:active {
    color: white;
    }
a.redhead { text-decoration: none; } /* Unterstreichung entfernen */

a.greydown:link {
    color: black;
}

/* visited link */
a.greydown:visited {
    color: black;
}

/* mouse over link */
a.greydown:hover {
    color: grey;
}

/* selected link */
a.greydown:active {
    color: black;
    }
a.redhead { text-decoration: none; } /* Unterstreichung entfernen */




.greenhead {
            font-family: Arial;
            font-size: 16px;
            color: #ffffff;
            line-height: 20px;
        }
.whitehead {
            font-family: Arial;
            font-size: 22px;
            color: #ffffff;
            line-height: 40px;
        }
.whiteheadgross {
            font-family: Arial;
            font-size: 30px;
            color: #ffffff;
            line-height: 40px;
        }
        
.redhead {
            font-family: Arial;
            font-size: 16px;
            color: #ffffff;
            line-height: 20px;
        }
        

        
.greydown {
            font-family: Arial;
            font-size: 12px;
            color: #000000;
            line-height: 20px;
        }
        
        
p.tafelbox {
width: 200px;
height: 130px;
	font-family: arial, sans-serif;
	line-height: 150%;
	margin-left: 2em;
	padding: 1em;
	border: 0px solid red;
  text-align: center;
	background-color: #ffffe1;
	display: inline-block;
}
p.tafelbox span {
	font-weight: bold;
}
p.tafelbox span::after {
	content: ": ";
}

p.buttongruen {
width: 100%;
height: auto;
	font-family: arial, sans-serif;
	line-height: 150%;
	margin-left: 0em;
	padding: 1em;
	border: 0px solid red;
  text-align: justify;
 	background-color: #008800;
	display: inline-block;
            font-size: 20px;
            color: #000000;
            line-height: 20px;
}
p.buttongruen span {
	font-weight: bold;
}
p.buttongruen span::after {
	content: ": ";
}
p.buttonred {
width: 100%;
height: auto;
	font-family: arial, sans-serif;
	line-height: 150%;
	margin-left: 0em;
	padding: 1em;
	border: 0px solid red;
  text-align: justify;
 	background-color: #ff0000;
	display: inline-block;
            font-size: 20px;
            color: #000000;
            line-height: 20px;
}
p.buttongruen span {
	font-weight: bold;
}
p.buttongruen span::after {
	content: ": ";
}
p.steckbriefinfo {
width: 90%;
height: auto;
	font-family: arial, sans-serif;
	line-height: 150%;
	margin-left: 0em;
	padding: 1em;
	border: 0px solid red;
  text-align: justify;
 	background-color: #ffffe1;
	display: inline-block;
            font-size: 20px;
            color: #000000;
            line-height: 20px;
}
p.steckbriefinfo span {
	font-weight: bold;
}
p.steckbriefinfo span::after {
	content: ": ";
}

p.trefferlisteh {
width: 50%;
height: auto;
	font-family: arial, sans-serif;
	line-height: 150%;
	margin-left: 0em;
	padding: 1em;
	border: 0px solid red;
  text-align: justify;
 	background-color: #ffffe1;
	display: inline-block;
            font-size: 10px;
            color: #000000;
            line-height: 10px;
}
p.trefferlisteh span {
	font-weight: bold;
}
p.trefferlisteh span::after {
	content: ": ";
}



p.namenrechnertafel {
width: 90%;
height: 200px;
	font-family: arial, sans-serif;
	line-height: 150%;
  height: auto;
	margin-left: 0em;
	padding: 1em;
	border: 0px solid red;
  text-align: center;
 	background-color: #ffffe1;
	display: inline-block;
            font-size: 20px;
            color: #000000;
            line-height: 20px;
}
p.steckbriefinfo span {
	font-weight: bold;
}
p.steckbriefinfo span::after {
	content: ": ";
}


a.tafel:link {
    color: black;
    font-weight: bold;
}

/* visited link */
a.tafel:visited {
    color: black;
}

/* mouse over link */
a.tafel:hover {
    color: hotpink;
}

/* selected link */
a.tafel:active {
    color: yellow;
    }
a.tafel { text-decoration: none; } /* Unterstreichung entfernen */


.tafel {
            font-family: Arial;
            font-size: 18px;
            color: #ffffff;
            line-height: 18px;
        }
        


p.navibox {

	font-family: arial, sans-serif;
	line-height: 100%;
	margin-left: 2em;
	padding: 1em;
	border: 0px solid red;
  text-align: center;
	background-color: #ffffe1;
	display: inline-block;
}
p.navibox span {
	font-weight: bold;
}
p.navibox span::after {
	content: ": ";
}

a.navibox:link {
    color: black;
    font-weight: bold;
}

/* visited link */
a.navibox:visited {
    color: black;
}

/* mouse over link */
a.navibox:hover {
    color: hotpink;
}

/* selected link */
a.navibox:active {
    color: yellow;
    }
a.navibox { text-decoration: none; } /* Unterstreichung entfernen */


.navibox {
            font-family: Arial;
            font-size: 16px;
            color: #000000;
            line-height: 18px;
        }
        
        
        
        
        
        
        
        
        
        
        
        
        
        
p.bestellbutton {

	font-family: arial, sans-serif;
	line-height: 100%;
	margin-left: 2em;
	padding: 1em;
	border: 0px solid red;
  border-radius: 12px;
  text-align: center;
	background-color: #009136;
	display: inline-block;
}
p.bestellbutton span {
	font-weight: bold;
}
p.bestellbutton span::after {
	content: ": ";
}
        
        
a.bestellbutton:link {
    color: white;
}

/* visited link */
a.bestellbutton:visited {
    color: white;
}

/* mouse over link */
a.bestellbutton:hover {
    color: hotpink;
}

/* selected link */
a.bestellbutton:active {
    color: yellow;
    }
a.bestellbutton { text-decoration: none; } /* Unterstreichung entfernen */


.bestellbutton {
            font-family: Arial;
            font-size: 16px;
            color: #ffffff;
            line-height: 20px;
        }
        
        
p.textnormal16 {
            font-family: Arial;
            font-size: 16px;
            color: #000000;
            line-height: 20px;
        }
        
 p.kastenlinks {
width: 90%;
height: auto;
	font-family: arial, sans-serif;
	line-height: 150%;
	margin-left: 0em;
	padding: 1em;
	border: 0px solid red;
  text-align: left;
 	background-color: #ffffe1;
	display: inline-block;
            font-size: 20px;
            color: #000000;
            line-height: 20px;
}
p.kastenlinks span {
	font-weight: bold;
}
p.kastenlinks span::after {
	content: ": ";
}
       
        
        
        
input[type=text], select {
    width: auto;
    padding: 8px 20px;
    margin: 8px 0;
    display: inline-block;
    font-family: arial, sans-serif;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
input[type=password], select {
    width: auto;
    padding: 8px 20px;
    margin: 8px 0;
    display: inline-block;
    font-family: arial, sans-serif;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type=submit] {
    width: auto;
    background-color: #4CAF50;
    font-family: arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: white;
    padding: 8px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #45a049;
}

divdrag {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}

      #divdrag1, #divdrag2 {
        float:left;
        width:200px;
        height:150px;
        margin:10px;
        padding:10px;
        border:1px solid black;
       }
       
     #divdrag3, #divdrag4 {
        float:left;
        width:200px;
        height:150px;
        margin:10px;
        padding:10px;
        border:1px solid black;
       }
       
        

div.scroll {
      width:500px;
      overflow-x:scroll;
      height:35px;
}

