/* global styles */

body {
  
  color: brown;
  background-color: white;
  font-weight: 500;
  font-size: 16px;
  font-family: Bodoni;
  line-height: 1.5;
  text-decoration: none;
  margin: 0px;
  padding: 1rem;
      margin-top: 0px;
}

html,body {margin:0;}

 .banner {
    padding: 0em 0 0em 0;
    
    height: 30vw;
      max-height: 45vw;
    min-height: 25vh;

    
    border-top: 0;
    margin: 0 0 0 0;

  width: 100vw;
  position: relative;
  
  
  z-index: -4;
  opacity: 1;

  background: url('../images/cc2.webp');
  background-size: 100vw 30vw;
  -ms-background-size: 100vw 30vw;
  -o-background-size: 100vw 30vw;
  -moz-background-size: 100vw 30vw;
  -webkit-background-size: 100vw 30vw;
  background-position: top;
  background-attachment: local;  /* !! */
  background-repeat: no-repeat;
  text-align: center;
  top: 0;
justify-self: stretch;
  align-self: stretch;

}

@font-face {

font-family: Bodoni;

src: url(/fonts/BodoniMT.ttf);

}

/* .img-container1 {
    width: 100%;
    
    height: calc(100vw / (1000/ 293));
    background-image: url(''../images/cc2.webp'');
    background-position: top;
    background-repeat: no-repeat;
    background-size: auto;
    border: 1px solid #000;
}
*/



h1, h2, h3, h4 {
    
    color: orange;
    font-weight: 600;
    text-decoration: none;
}

h4 {
    
    font-size: 1.5rem;
    line-height: .1;
    margin-top: 0;
    margin-bottom: 0;
    
}

.h42 {
    
    font-size: 1.5rem;
    line-height: 1;
    margin-top: 2px;
    padding-top: 2px;
    margin-bottom: 0;
    color: orange;
    font-weight: 600;
    
}

.h43 {
    
    font-size: 1.1rem;
    line-height: 1;
    margin-top: 0px;
    padding-top: 0;
    margin-bottom: 0px;
    font-family: arial;
    
}

h3 {
    
    font-size: 2rem; 
    
}

.banner h3 {
     padding: 1em 0 0.1em 0;
  font-size: 36;
  text-align: center;
  font-weight: 500;
  font-family: Bodoni;
  
  line-height: 26px;
  color: orange;
  z-index: 55;
  border: 0;
  font-size: 7vw;
    
    margin: 0;
   
}  

a { text-decoration: none; }


*, ::after, ::before {
  box-sizing: border-box;
}

ul{
    list-style: none;
}



/* grid styles */

.container { 
  width: 87vw;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  height: 100vh;  /* wichtig fuer Chrome! */
  align-items: center;
  justify-content: center;
  
}

.column {
  --columns: 12; /* number of columns in the grid system */
  --width-default: 0; /* default width, makes it flexible */
  --width: var(--width-mobile, var(--width-default)); /* width of the element */
  
  background-color: rgb(30, 160, 0);
  border: LavenderBlush 0px solid;
  border-radius: 8px;
  padding: 5px 0 0 0;
  flex-basis: calc(var(--width) / var(--columns) * 100%);
}

@media (min-width: 576px) {
  .column {
    --width: var(--width-tablet, var(--width-mobile, var(--width-default)));
  }
  
}

@media (min-width: 800px) {
  .column {
    --width: var(--width-desktop, var(--width-tablet, var(--width-mobile, var(--width-default))));
  }
}

@media (max-width: 576px) {

.container {
    width: 100vw;
  }
}

/* sections */

.header {
  --width-mobile: 12;
  
  height: 30vw;
  max-height: 33vh;
  min-height: 30vw;
  background-color: #d7d5c8;
  color: skyblue;
  z-index: -5;
  border-radius: 5px;
}

.content {
  --width-mobile: 12;
 /* --width-tablet: 10; */
    
  height: 100vh;
  background-color: white;
  color: black;
}

.sidebar {
  --width-mobile: 12;
  /* --width-tablet: 2; */
  height: 4rem;
  background-color: white;
  color: skyblue;
  position: relative;
}






/* Nav Menu 3  "mobile"   */


#menu {
	background: #1EA000;
	height: 37px;
	padding-left: 18px;
	padding-top: 0px;
	border-radius: 10px;
	width: 100vw;
	border: 0;
	font-size: 1rem;
	z-index: 999;
}
#menu ul, #menu li {
	margin: 0 auto;
	padding: 0;
	list-style: none
}
#menu ul {
	width: 100%;
	text-align: left;
}
#menu li {
	display: inline-block;
	position: relative;
}
#menu a {
	display: block;
	line-height: 37px;
	padding: 0 14px;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 1rem;
}
#menu a.dropdown-arrow:after {
	content: "\25BE";
	margin-left: 5px;
}
#menu li a:hover {
	color: #FFAA1D;
	background: #F2F2F2;
}
#menu input {
	display: none;
	margin: 0;
	padding: 0;
	height: 37px;
	width: 100%;
	opacity: 0;
	cursor: pointer
}
#menu label {
	display: none;
	line-height: 37px;
	text-align: center;
	position: absolute;
	left: 35px
}
#menu label:before {
	font-size: 1rem;
	color: #FFFFFF;
	content: "\2261"; 
	margin-left: 20px;
}
#menu ul.sub-menus{
	height: auto;
	overflow: hidden;
	width: 170px;
	background: #C8C8C8;
	position: absolute;
	z-index: 999;
	display: none;
}
#menu ul.sub-menus li {
	display: block;
	text-align: left;
	width: 100%;
}
#menu ul.sub-menus a {
	color: #FFFFFF;
	font-size: 1rem;
}
#menu li:hover ul.sub-menus {
	display: block
}
#menu ul.sub-menus a:hover{
	background: #F2F2F2;
	color: #FFAA1D;
}

#menu .active 
{
	background-color: orange;
	color: white;
}

@media screen and (max-width: 700px){
	#menu {position:relative}
	#menu ul {background:#C8C8C8;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;text-align:left;}
	#menu ul.sub-menus {width:100%;position:static;}
	#menu ul.sub-menus a {padding-left:30px;}
	#menu li {display:block;float:none;width:auto;}
	#menu input, #menu label {position:absolute;top:0;left:0;display:block}
	#menu input {z-index:99}
	#menu input:checked + label {color:#FFFFFF}
	#menu input:checked + label:before {content:"\00d7"}
	#menu input:checked ~ ul {display:block}
}





/* Flex-wrap */


.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  border: 1px solid silver;
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
}

.nowrap  { 
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

.wrap    { 
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}  
.wrap li {
  background: gold;
  align: center;
  width: 100%;
}

.wrap-reverse         { 
  -webkit-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
}  
.wrap-reverse li {
  background: deepskyblue;
}

.flex-item {
  background: tomato;
  padding: 5px;
  width: 100px;
  height: 100px;
  margin: 10px;
  
  line-height: 100px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}










/* Image */

	.image {
		border-radius: 0;
		border: 0;
		display: inline-block;
		position: relative;
		z-index: 0;
	}

		.image img {
			border-radius: 5;
			display: block;
		}

		.image.left, .image.right {
			max-width: 40%;
		}

			.image.left img, .image.right img {
				width: 100%;
			}

		.image.round img {
			border-radius: 100%;
			width: 150%;
		}

		.image.left {
			float: left;
			padding: 0 1.5em 1em 0;
			top: 0.25em;
		}

		.image.right {
			float: right;
			padding: 0 0 1em 1.5em;
			top: 0.25em;
		}

		.image.fit {
			display: block;
			margin: 0 0 2em 0;
			width: 100%;
		}

			.image.fit img {
				width: 100%;
			}

		.image.main {
			display: block;
			margin: 0 0 3em 0;
			width: 100%;
		}

			.image.main img {
				width: 100%;
			}






/* Flex */

	.flex {
		z-index: 962;
		display: -ms-flexbox;
		-ms-flex-wrap: wrap;
		-ms-flex-pack: justify;
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-moz-justify-content: space-around;
		-webkit-justify-content: space-around;
		-ms-justify-content: space-around;
		justify-content: space-around;
		background-color: white;
	}

		.flex.flex-2 article {
			width: 32%;
			z-index: 3;
		}
		
		.flex.flex-4 article {
			width: 50%;
			padding: 10px 10px 0 10px;
			z-index: 3;
		}

		.flex.flex-3 article {
			position: relative;
			width: 28%;
		}

			.flex.flex-3 article:before {
				content: '';
				position: absolute;
				width: 100%;
				height: 100%;
				right: -2em;
				top: 0;
				border-right: 1px solid #dbdbdb;
				pointer-events: none;
			}

			.flex.flex-3 article:last-child:before {
				border: none;
			}



		@media screen and (max-width: 800px) {

			.flex.flex-2 article {
				width: 100%;
				margin-bottom: 3em;
			}

				.flex.flex-2 article:last-child {
					margin-bottom: 0;
				}

			.flex.flex-3 {
				-moz-flex-direction: column;
				-webkit-flex-direction: column;
				-ms-flex-direction: column;
				flex-direction: column;
			}

				.flex.flex-3 article {
					width: 100%;
					border-bottom: 1px solid #dbdbdb;
					padding-bottom: 2.5em;
					margin-bottom: 3em;
				}

					.flex.flex-3 article:last-child {
						border: none;
						padding-bottom: 0;
						margin: 0 0 1em 0;
					}

					.flex.flex-3 article:before {
						display: none;
					}

			.flex.flex-4 article {
				width: 100%;
				margin-bottom: 0;
			}

            .flex.flex-4 article:last-child {
					margin-bottom: 0;
				}


		}

		@media screen and (max-width: 480px) {

			.flex.flex-4 .box {
				width: 100%;
			}

            .flex.flex-2 article {
				width: 100%;
				margin-bottom: 0;
			}

		}
		
		



.flex.flex-2 article2 {
			width: 100%;
		}
		
		.flex.flex-4 article2 {
			width: 50%;
		}

		.flex.flex-3 article2 {
			position: relative;
			width: 28%;
		}

			.flex.flex-3 article2:before {
				content: '';
				position: absolute;
				width: 100%;
				height: 100%;
				right: -2em;
				top: 0;
				border-right: 1px solid #dbdbdb;
				pointer-events: none;
			}

			.flex.flex-3 article2:last-child:before {
				border: none;
			}




		@media screen and (max-width: 980px) {

			.flex.flex-2 article2 {
				width: 80%;
				margin-bottom: 3em;
			}

				.flex.flex-2 article2:last-child {
					margin-bottom: 0;
				}

			.flex.flex-3 {
				-moz-flex-direction: column;
				-webkit-flex-direction: column;
				-ms-flex-direction: column;
				flex-direction: column;
			}

				.flex.flex-3 article2 {
					width: 100%;
					border-bottom: 1px solid #dbdbdb;
					padding-bottom: 2.5em;
					margin-bottom: 3em;
				}

					.flex.flex-3 article2:last-child {
						border: none;
						padding-bottom: 0;
						margin: 0 0 1em 0;
					}

					.flex.flex-3 article2:before {
						display: none;
					}

			.flex.flex-4 article2 {
				width: 98%;
				margin-bottom: 3em;
			}

            .flex.flex-4 article2:last-child {
					margin-bottom: 0;
				}


		}
@media screen and (max-width: 480px) {

			.flex.flex-4 .box {
				width: 100%;
			}

            .flex.flex-2 article2 {
				width: 96%;
				margin-bottom: 0;
			}

		}






		
		
		
		
		
		
		







/* FLEX neu */


* {
  box-sizing: border-box;
}

.flex-container {
  display: flex;
    flex-wrap: wrap;
padding: 1%;
  
}

.flex-item-left {
  flex: 50%;
}

.flex-item-right {
  flex: 50%;
}

/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (max-width: 900px) {
  .flex-container .flex-item-right, .flex-item-left {
    flex: 100%;
  }
}







/* Box */

	.box {
		border: solid 1px #dbdbdb;
		margin-bottom: .5em;
		padding: 1.5em;
		/* overflow-wrap: break-word;
		word-break: normal; */

	}

		.box > :last-child,
		.box > :last-child > :last-child,
		.box > :last-child > :last-child > :last-child {
			margin-bottom: 0;
		}

		.box.alt {
			border: 0;
			border-radius: 0;
			padding: 0;
		}

		.box.person {
			border: solid 1px rgba(255, 255, 255, 0.25);
			padding: 3em 1.5em;
		}

			.box.person h3 {
				margin: 0;
			}

			.box.person .image {
				margin-bottom: 1em;
			}

				.box.person .image img {
					max-width: 100%;
			
			}



.box2 {
    
    height: 95%;
    display: block;
    
    
}

.box3 {
    
    display: block;
    margin-left: 2.5em;
    
}

.box4 {
    
    display: inline;
    margin-left: 1em;
    
}

.box5 {
    display: block;

}


@media (orientation: landscape) {
  
  .box5 {
    display: inline;
    height: 90%;
  }
}
  
  
@media (orientation: portrait) {
  
  .box5 {
    display: block;
    height: auto;
  }

 }



.box6 {
    
    display: inline;
    margin-left: .2em;
    border-color: #5385c1;
			box-shadow: 0 0 0 1px #5385c1;
    
}

.boxthick {
    
    display: inline;
    margin-left: .2em;
    border-color: #999999;
	box-shadow: 0 0 0 2px #f2f2f2; 
	width: 80%;
    
}

@media (max-width: 600px) {
  .boxthick {
      width: 98%;
  }
  
}

.boxbg {
    
    background-color: #f2f2f2;
    width: 100%;
    
}


/* Rounded border */

hr.rounded {
  
  width: 70%;
  border-top: 8px solid #b63d32;
  border-radius: 5px;
  margin-right: 15%;
  margin-left: 15%;
}

.center {
  margin: auto;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  text-align: center;
}





/* Fotos */

  .mholder{
    column-count: 4;
    column-gap: 20px;
    max-width: 1600px;
    margin: 0 auto;
    }
 
 .mholder1{
    column-count: 1;
    column-gap: 20px;
    max-width: 1600px;
    margin: 0 auto;
    }
 
  .mblocks{
    display: inline-block;
    background: lightgray;
    padding: 20px;
    margin: 0 0 20px;
    width: 100%;
    box-sizing: border-box;
    }
 
  .mblocks img{
    width: 100%;
    }
 
  @media screen and (max-width:768px){
    .mholder{
      column-count: 1;
    }
    }
 
  @media screen and (min-width:769px){
    .mholder{
      column-count: 2;
    }
    }
 
  @media screen and (min-width:1080px){
    .mholder{
      column-count: 3;
    }
    }
 
  @media screen and (min-width:1200px){
    .mholder{
      column-count: 4;
    }
    }










.gallery  {
  --s: 100%; /* control the size */
  
  display: grid;
  width: var(--s);
  aspect-ratio: 1;
  overflow: hidden;
  padding: calc(var(--s)/20);
  border-radius: 50%;
  position: relative;
  clip-path: circle(49.5%); /* to avoid a few glitch cause by overflow: hidden */
  justify-self: center;
  align-self: center;
  
  
}
.gallery::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: inherit;
  border-radius: inherit;
  background: repeating-conic-gradient(#789048 0 30deg,#DFBA69 0 60deg);
  -webkit-mask: 
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.gallery > img {
  grid-area: 1/1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  transform-origin: 50% 120.7%;
}
.gallery::after,
.gallery > img {
  animation: m 24s infinite cubic-bezier(.5,-0.2,.5,1.2);
}
.gallery > img:nth-child(2) {animation-delay: -6s}
.gallery > img:nth-child(3) {animation-delay: -12s}
.gallery > img:nth-child(4) {animation-delay: -18s}

@keyframes m {
  0%,3%    {transform: rotate(0)}
  22%,27%  {transform: rotate(-90deg)}
  47%,52%  {transform: rotate(-180deg)}
  72%,77%  {transform: rotate(-270deg)}
  98%,100% {transform: rotate(-360deg)}
}


body {
  margin: 0;
  margin-top: 0;
  display: grid;
  place-content: center;
  background: white;
    min-height: 100vh;

}