@font-face {
    font-family: Comfortaa;
    src: url(../fonts/Comfortaa/Comfortaa-VariableFont_wght.ttf);
  }



:root{
    --BGmain:rgb(249, 248, 217);
    --BGhtml:rgb(249, 248, 217) ;
    --BGnav:rgb(250, 142, 232);
    --BGnavH:rgb(185, 143, 29);


    --color:rgb(73, 41, 3);
    --colorPink:rgb(68, 48, 5);
    --colorPinkDark:rgb(107, 77, 12);
    --colorPinkLight:rgb(121, 7, 62);


    
    
    --font:Arial, Helvetica, sans-serif;
    --fontsize:14px;
    --fontcolor:var(--color);


    --h1size:42px;
    --h1margin:20px;
    --h1padding:15px;
    --h1font:'Comfortaa', cursive, sans-serif;
    --h1BG:rgba(248, 207, 96, 0.651);
    --h1color:var(--color);


    --h2size:18px;
    --h2margin:20px 0;
    --h2color:var(--color);

    --h3size:14px;
    --h3margin:10px 0;
    --h3color:var(--color);

    --navFont:var(--h1font);
    --navFsize: 32px;
    --navcolor:rgb(53, 22, 4) ;
    

    --seitenSize:1200px;
    --marSeite: 0px 5% 0px 5%;
    --margin:20px;
  
    /* Header  */
    --logoPadding: 20px;
    --headerHeight:150px;
 


    /* Bilder */
    --imgMargin:30px;


    /* Footer  */
    --footerPadding:20px;
    --footerLink:black;
    --footerHover:#fff;

    /* Spalten */
    --mar-l:0px;
    --mar-r:0px;
    --pad-l:0px;
    --pad-r:0px;
    --border:0px;
}

html{
    background:var(--BGhtml);
    
}
body{
    font-family:var(--font);
    color:var(--fontcolor);
    background:var(--BGhtml);
    font-size:var(--fontsize);
    line-height: 150%;
    
}

.wrapper{
    position:relative;
    max-width: var(--seitenSize);
    margin: 0 auto;
    background:var(--BGmain);
    border-top: 5px double var(--colorPink);
    border-bottom: 5px double var(--colorPink);
    background-image: url(../img/BGmain.png); 
    box-shadow: 10px 10px 10px  silver;
	border-radius: 20px;

}

#content{
    border-top: 5px double var(--colorPink);
    border-bottom: 5px double var(--colorPink);
}

main{
    /* margin-top: 5em; */
    padding: 20px;
    min-height: 300px;
    text-align: center;
}



.webdesign article{text-align: left;}
.list{margin-left: 12em;}



main li{list-style-type: disc;}

header{
    margin:auto;
    padding: 20px;
    text-align: center;
   
}

h1, h2{
    background: var(--h1BG);
    text-align: center;
    margin: var(--h1margin);
    padding: var(--h1padding);
    border:3px solid var(--h1color);
    border-radius: 25px;
    line-height: 125%;

}
h1{
    display: inline-block;
    font-size: var(--h1size);
    font-family: var(--h1font);
    color:var(--h1color);
    text-shadow: 0.1em 0.1em 0.05em silver;
    text-align: center;
}
h2{
    --h1color:var(--colorPinkDark);
    font-size: var(--h2size);
    margin: var(--h2margin);
    color: var(--colorPinkDark);
}

/* Navigation oben  */
.navoben{
    /* margin-right: 40px; */
    background: var(--BGhtml);
    color:var(--navcolor);
}

.navoben li{
    padding:5px;
    margin-right: 2px;
}


/* Navigation */
/* nav{
    font-family: var(--font);
    font-size: var(--navFsize);
    line-height: 150%;
    width: 180px;
    margin-right: 10px;
    
    
} */
.navheader{
    margin-top: 20px;
    margin-left: 20px;
    color: var(--colorPinkDark);
    font-weight: bold;
    min-width: 100px;
}
.mainmenu{
    margin-top: 10px;
    margin-bottom: 10px;
    border:2pt solid var(--colorPinkDark);
    border-radius: 25px;
    background: var(--h1BG);
    font-size: var(--h2size);
    line-height:200%;
}

ul{
    list-style-type: none;
}
a{
    color:var(--headercolor);
    /* font-weight: bold; */
    text-decoration: none;
}
a:hover,
a:focus-within{
    color:var(--colorPinkDark);
    }
.active :before{
    content: "\25BA" " " ;
}

main{
    --pad-l:5px;
    --pad-r:5px;
    --mar-l:5px;
    --mar-r:5px;
    --border:22px;
    
}

.mitte{
    width:100%;
    margin-top: 10px;
    /* background: yellow; */
}
.mitte, 
.links,
.rechts{text-align: left;}

/* Spalten */
.col-66{ width: calc(100% / 3 * 2 - var(--mar-l) - var(--mar-r)  - var(--pad-l) - var(--pad-r));}
.col-33 {
    width: calc(100% / 3 - var(--mar-l) - var(--mar-r)  - var(--pad-l) - var(--pad-r) );}

.col-100 {width: calc(100% - var(--mar-l) - var(--mar-r)  - var(--pad-l) - var(--pad-r));}
.col-80 {width: calc(80% - var(--mar-l) - var(--mar-r)  - var(--pad-l) - var(--pad-r) - 2 * var(--border));}
.col-20 {width: calc(20% - var(--mar-l) - var(--mar-r)  - var(--pad-l) - var(--pad-r) - 2 * var(--border));}
.col-40 {width: calc(40% - var(--mar-l) - var(--mar-r)  - var(--pad-l) - var(--pad-r) - 2 * var(--border));}
.col-50 {width: calc(50% - var(--mar-l) - var(--mar-r)  - var(--pad-l) - var(--pad-r) - 2 * var(--border));}

footer{
   
    border-radius: 20px;
    background: var(--h1BG);
    width:100%;
    --pad-l:5px;
    --pad-r:5px;
    --mar-l:5px;
    --mar-r:5px;
    --border:30px;
}
address{
    margin:0 var(--mar-l) 0 var(--mar-r);

}

.abstand{margin-top: 21px;}


.center{text-align: center;}

/* schatten */
.schatten{
    box-shadow: 5px 5px 10px rgb(158, 158, 158);
    border-radius: 20px;
    margin-right: 30px;
}
img{width:100%}
.impressum{margin: 20px;}
.irbd-logo{max-height: 340px; width: auto;}

/* flex und float  */
.flex{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-wrap:wrap;
        flex-wrap:wrap;
}
.justify-right{justify-content: flex-end;}
.justify-center{justify-content: center;}
.justify-space-around{justify-content: space-around;}
.justify-space-between{justify-content: space-around;}
.directionC{flex-direction: column;}
.grow{flex-grow: 1;}

.floatL{
    float:left;
  }
.floatR{
    float:right;
}

.clearfix:after{
    content:"";
    display: table;    /* damit kein Platz gebraucht wird */
    clear:both;
}