:root {
    --clr-jacobs01: #536c2b;
    --clr-jacobs02: #ffcc33;
    --clr-jacobs03: rgb(255,51,51);
    --clr-jacobs04: rgb(153,153,153);
    --clr-jacobs05: rgb(182, 180, 109);
    --shd-Box: 6px 6px 15px 1px #000000;
    --rad-Box: 10px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-family: Arial, Helvetica, Geneva, Sans-serif;
    font-size: 14px;
}

body {
    scroll-behavior: smooth;
    background-color: rgb(182, 180, 109);
}

a {
    text-decoration: none;
}

p {
    margin-left: 7px;
    margin-right: 7px;
}

h1 {
    font-size: 18px;
    font-weight: normal;
    background-color: var(--clr-jacobs01);
    color: var(--clr-jacobs05);
    text-align: center;
    border-radius: 10px 10px 0 0;
}

h2 {
    font-size: 24px;
    letter-spacing: 1px;
}

h6 {
    font-size: 5em;
    text-align: center;
}

.container{
        margin-top: 15px;
}

.centerheader {
    display: flex;
    justify-content: center;
    border-radius: var(--rad-Box);
    -webkit-box-shadow: var(--shd-Box);
    -moz-box-shadow: var(--shd-Box);
    box-shadow: var(--shd-Box);
    background: #536C2B;
    background: linear-gradient(180deg, rgba(83, 108, 43, 1) 0%, #4b2f1d 100%);
}

.bannerheadline {
    display: block;
    position: absolute;
    color: #4a2f1c;
    text-shadow: 2px 2px 2px #b6b46d, -2px -2px 2px #b6b46d;
    border-radius: 10px 10px 0 0;
}

.bannertext {
    position: absolute;
    color: var(--clr-jacobs05);
    text-shadow: 1px 1px 1px #000000;
}

header h1 {
    background-color: transparent;
    color: black;
    font-size: 48px;
}

header h2 {
    font-size: 24px;
    letter-spacing: 1px;
    text-align: center;
}

/*********************************   allgemeine Definitionen   ************************/

.sliderpic img{
    border-radius: var(--rad-Box);
    height:250px;
    -webkit-box-shadow: var(--shd-Box); 
    -moz-box-shadow: var(--shd-Box);
    box-shadow: var(--shd-Box);
}

.box-logo{
    background-color: transparent;
}

.box-logo img{
    filter:drop-shadow(6px 6px 6px darkgrey);
        border-radius: 10px;
        -webkit-box-shadow: var(--shd-Box); 
    -moz-box-shadow: var(--shd-Box);
    box-shadow: var(--shd-Box)
}

#piconbar img {
    background-color: var(--clr-jacobs05);
    margin-top: 2px;
    height: 50px;
    padding-left: 0px;
    margin-right: 5px;
    margin-left: 5px;
    border-radius: var(--rad-Box);
    -webkit-box-shadow: var(--shd-Box);
    -moz-box-shadow: var(--shd-Box);
    box-shadow: var(--shd-Box);
    overflow: hidden;
    grid-area: piconbar;
}

.meldunghead {
    background-color: crimson;
    color: white;
    width: 100%;
    margin: auto;
    text-align: center;
    font-weight: bold;
    border-radius: 10px 10px 0 0;
}

.meldungtext {
    background-color: crimson;
    color: white;
    width: 100%;
    margin: auto;
    text-align: center;
}

/********************************************************* smartboxen **************************************/
.smartbox-01 p,
.smartbox-02 p,
.smartbox-03 p,
.smartbox-04 p,
.smartbox-05 p,
.smartbox-06 p,
.smartbox-07 p,
.smartbox-08 p,
.smartbox-09 p,
.smartbox-10 p,
.smartbox-11 p,
.smartbox-12 p,
.smartbox-13 p,
.smartbox-14 p,
.smartbox-15 p,
.smartbox-16 p,
.smartbox-17 p,
.smartbox-18 p,
.smartbox-19 p,
.smartbox-20 p {
    margin-left: 7px;
}
.smartbox-01,
.smartbox-03 a {
	text-decoration: none
}
	
/********************************************************* Ende smartboxen **************************************/

/********************************************************* boxen 230 ********************************************/

.box230-01{
    background-color: #ebeb37;
    grid-area: box230-01;
}

.box230-02{
    background-color: #ebeb37;
    grid-area: box230-02;
}

.box230-03{
    background-color: #ebeb37;
    grid-area: box230-03;
}

.box230-04{
    background-color: #ebeb37;
    grid-area: box230-04;
}

.box230-05{
    background-color: #ebeb37;
    grid-area: box230-05;
}

.box230-06{
    background-color: #ebeb37;
    grid-area: box230-06;
}

.box230-07{
    background-color: #ebeb37;
    grid-area: box230-07;
}

.box230-08{
    background-color: #ebeb37;
    grid-area: box230-08;
}

.box230-09{
    background-color: #ebeb37;
    grid-area: box230-09;
}

.box230-10 {
    background-color: #ebeb37;
    grid-area: box230-10;
}

.box230-11 {
    background-color: #ebeb37;
    grid-area: box230-11;
}

.box230-12 {
    background-color: #ebeb37;
    grid-area: box230-12;
}

.box230-13 {
    background-color: #ebeb37;
    grid-area: box230-13;
}

.box230-14 {
    background-color: #ebeb37;
    grid-area: box230-14;
}

.box230-15 {
    background-color: #ebeb37;
    grid-area: box230-15;
}

.box230-16 {
    background-color: #ebeb37;
    grid-area: box230-16;
}

.box230-17 {
    background-color: #ebeb37;
    grid-area: box230-17;
}

.box230-18 {
    background-color: #ebeb37;
    grid-area: box230-18;
}

.box230-19 {
    background-color: #ebeb37;
    grid-area: box230-19;
}

.box230-20 {
    background-color: #ebeb37;
    grid-area: box230-20;
}

.box230-01,
.box230-02,
.box230-03,
.box230-04,
.box230-05,
.box230-06,
.box230-07,
.box230-08,
.box230-09,
.box230-10,
.box230-11,
.box230-12,
.box230-13,
.box230-14,
.box230-15,
.box230-16,
.box230-17,
.box230-18,
.box230-19,
.box230-20 {
    width: 230px;
    height: 230px;
    margin-top: 10px;
    border-radius: 10px;
    background-color: var(--clr-jacobs05);
    -webkit-box-shadow: var(--shd-Box);
    -moz-box-shadow: var(--shd-Box);
    box-shadow: var(--shd-Box);
}

.box230-01 img,
.box230-02 img,
.box230-03 img,
.box230-04 img,
.box230-05 img,
.box230-06 img,
.box230-07 img,
.box230-08 img,
.box230-09 img {
    width: 230px;
    border-radius: 10px;
}

.box230-01 p,
.box230-02 p,
.box230-03 p,
.box230-04 p,
.box230-05 p,
.box230-06 p,
.box230-07 p,
.box230-08 p,
.box230-09 p,
.box230-10 p,
.box230-11 p,
.box230-12 p,
.box230-13 p,
.box230-14 p,
.box230-15 p,
.box230-16 p,
.box230-17 p,
.box230-18 p,
.box230-19 p,
.box230-20 p {
    margin-left: 7px;
    text-align: left;
}

/********************************************************* Ende boxen 230 **************************************/

.footer-left{
    width: 50%;
    text-align: left;
    margin-top: 10px;
    margin-left: 10px;
}

.footer-left a:link{
    color: var(--clr-jacobs05);
}

.footer-right{
    width: 50%;
    text-align: right;
    margin-top: 40px;
    margin-right: 10px;
}

.footer-right a {
    text-decoration: none;
    color: var(--clr-jacobs05);
}

.footer-right a:hover {
    text-shadow: 2px 2px 2px var(--clr-jacobs05), -2px -2px 2px var(--clr-jacobs05);
    color: var(--clr-jacobs05);
}

/*********************************  Ende allgemeine Definitionen   ************************/