body {
  background-color: #DDD;
  -webkit-font-smoothing: antialiased;
  scrollbar-width: none;
}


.container-astype {
  margin-left: 0;
  margin-right: 0;
  margin-top: 6;  
  min-width: 580px; 
  max-width: 100%;
}

@media screen and (min-width: 1290px) {
  .container-astype {
      width: 92%;
      margin-left: 4%;
      margin-right: auto;
      margin-top: 10px;
      max-width: 80%;
      min-width: 1281px;
  }
}




a.anim-link {
  display: inline-block;
  position: relative;
  color: currentColor;

}

a.anim-link:after {
  content: '';
  position: absolute;scale: ;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #999;
  transform-origin: bottom left;
  transition: transform 0.12s ease-out;
}

a.anim-link:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}




#claim { opacity: 0.3; }

#logo { opacity: 0.5; transition: opacity 0.9s ease 1s; }
#logo:hover { opacity: 1; transition: opacity 0.2s; }

#stickericonlook { opacity: 0.45; transition: opacity 0.6s ease 0.1s; }
#stickericonlook:hover { opacity: 0.96; transition: opacity 0.2s; }

#stickericonpos { position:relative; bottom:-5px; width:44px; height:50px; border:2px solid rgba(255,255,255,0);}
#stickericonpos:hover { width:48px; height:54px; border:0px solid rgba(255,255,255,0); filter:drop-shadow( -1px 2px 1px rgba(0,0,0,0.15) );}

#single { position:relative; left:-6px; bottom:0px; width:106px; height:36px;  opacity: 0.45;   }
#single:hover { opacity: 1.0; filter:drop-shadow( -1px 3px 1px rgba(0,0,0,0.20) ); }

#pack { position:relative; left:0px; bottom:0px; width:48px; height:42px;  opacity: 0.55;  }
#pack:hover { opacity: 1.00; filter:drop-shadow( -1px 3px 1px rgba(0,0,0,0.20) ); }




#icon, 
#icon::before,
#icon::after {
  box-sizing:content-box;
}


#icon {
  opacity: 0.55; transition: opacity 0.9s ease 1s;
  width: auto; height: 48px; border:2px solid rgba(255,255,255,0); 
  }
#icon:hover {
  opacity: 1; transition: opacity 0.1s;
  width: auto; height: 52px; border:0px solid rgba(255,255,255,0); filter:drop-shadow( -1px 3px 1px rgba(0,0,0,0.10) );
  }



#stickericonpos,
#stickericonpos::before,
#stickericonpos::after {
  box-sizing:content-box;
}


a:active, a:focus {outline: none;}
 
main {
  margin: 3em 1em;
  line-height: 180%;
}





.intro-cover-bg {
	background-image: linear-gradient(180deg, #FFFFFF 49%, #d1d1d1 49%, #fff 98%);
}







/*----- Fontwall Startseite -----*/

#fontwall { font-size: 7rem; line-height: 8.1rem; }

#fontwall a:link, #fontwall a:visited, #fontwall a:active, a {
  color: rgba(10,10,10,0.10);
  text-shadow: 0 0 0 #AAA;
  transition: color 0.4s, text-shadow 0.6s;
  vertical-align: baseline;
}

#fontwall a:hover {
  color: #D54000;
  text-shadow: 0.4vh 0.4rem 0.8rem rgba(200, 200, 200, 0.25);
  text-decoration: none;
}







/*----- Bootstrap Menu -----*/
 

.nav-link, .nav-item  {
	-webkit-font-smoothing: antialiased;
	font-size: 1.2rem;
	letter-spacing: 0.05rem;

}

.navbar {
  padding-top: 0.5rem;
  padding-bottom: 0;
}


.dropdown-menu {
  font-size: 1rem;
  color: #000;
  text-align: left;
  background-color: #EEE;
  background-clip: padding-box;
  border-radius: 0.25rem;
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: 0.25rem 1rem;
  clear: both;
  font-weight: 400;
  color: #000;
  text-align: inherit;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
}
.dropdown-item:hover, .dropdown-item:focus {
  color: #FFF;
  background-color: rgba(200,50,0,0.70); 
}


.megamenu a {
  color: #000;
  text-decoration: none;
}
.megamenu a:hover {
  color: #C30;
  font-weight: 400;
  text-decoration: underline;
}
.megamenu .list-unstyled {
  font-size: 0.96rem;
  line-height: 1.4rem;
  list-style:none;
  margin-left: 0;
  padding-left: 1.2em;
}
.megamenu .list-unstyled li {
  padding-left: 1rem;
  text-indent: -1rem;
}

.megamenu .list-unstyled li:before {
  content: "\2022";
  padding-right: 0.5rem;
}



/*----- Bootstrap Menu End -----*/


/*----- Bootstrap Menu Brand Logo Fix 


@media (min-width: 576px) {
    .navbar-brand img {
        position: absolute;
		width: 200p;
        top: 0.6rem;
    }
}

 Bootstrap Menu Brand Logo Fix -----*/






.stickers {
	position: relative;
	width: 98%;
	margin-left: 1%;
	margin-right: 1%;
	top: -1.4rem;
	min-width: 950px;
	max-width: 90%; /* war 1314 */
	min-height: 80px;
	background-color:transparent;
}


header, section, article, aside, footer, figure {
	display:block;
}


article {
	padding-left: 1em;
}









.content {
	overflow: inherit;
	display: flow-root; */
	display: block; 
	
	-webkit-clip-path: inset(0); /* safari*/
    clip-path: inset(0);
    clip: rect(0px, auto, auto, 0px);
	
	position: relative;
	z-index: 0;
	top: -1.5em;   /* abstand zu menu */
	margin-bottom: 1.1em;
	left: 0px;
	right: 40px;
	min-width: 580px;
	max-width: 100%; /* war 1314, war 1384px */
	min-height: 200px;	
	padding-top: 16px;
	padding-bottom: 10px;
	padding-left: 1.4rem;
	padding-right: 2px;
	background: #fff;
	background-color: #fff;
	opacity: 1;
	transition: opacity 0.9s;

}
	
.content h1 {font-size: 1.8rem; font-weight: bold; line-height: 1.8rem; font-style: normal; position: relative; margin-top:0.7em; margin-bottom:0.7em; top: 4px; text-align: left; z-index: 1; 
	font-smoothing: antialiased; font-feature-settings: 'kern=1'; opacity:0.75; text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.15); }

.content h2 {font-size: 1.7rem; font-weight: normal; line-height: 1.8rem; margin-top:1em; margin-bottom:0.7em; top: 4px; }
.content h3 {font-size: 1.6rem; font-weight: bold; line-height: 1.8; margin-top:0.7em; margin-bottom:0.6em; text-shadow: 2px 2px 1px #D8D8D8; opacity: 0.5 }
.content h4 {font-size: 1.5rem;}
.content h5 {font-size: 1.4rem;}
.content h5 {font-size: 1.2rem; font-weight: normal; line-height: 1.8}
.content h6 {font-size: 1.0rem;}
.content h7 {font-size: 0.9rem;}
.content h8 {font-size: 0.72rem; letter-spacing: +0.05em}


.content p {line-height: 1.8rem; }

.content p2 {font-size: 1.1rem; line-height: 1.5rem; }

.content ul, ol {font-size: 1rem; font-line-height: 2rem; letter-spacing: 0.06rem; margin-left: -1rem; margin-right:0.1em;} /*font-size: 0.86rem; font-line-height: 1.7rem; */

.content ul {list-style:circle;}

.content li {
  /*text-indent: -1rem; */
  list-style-position: outside;
  }

.content th {font-size: 0.72rem; letter-spacing: +0.02em}


.content img         {filter: grayscale(40%) opacity(90%); transition-duration: 0.7s; transition-delay: 0.2s; transition-timing-function: ease-out;}
.content img:hover   {filter: grayscale(0%) opacity(100%); transition-duration: 0.1s; transition-delay: 0.01s; transition-timing-function: ease;}



/*
.content li:before {
  content: "\2022";
  padding-right: 0.68rem;
}
*/

/* fix start page slideshow */

/*
.content .cb-slideshow li:before {
  content: "";
  padding-right: 0.68rem;
}
*/


.content .slides li:before {
  content: "";
  padding-right: 0.68rem;
}


/* fix start page slideshow end */


/* fix bootstrap 5 indicators and fade*/


.carousel-indicators {
  margin-bottom: -2.0rem;
  transition: transform 2s ease-in-out;
}
.carousel-indicators [data-bs-target] {
  opacity: 0.1;
  transition: opacity 2s ease;
}
.carousel-indicators .active {
  opacity: 0.4;
}

.carousel-control-prev {
}


/* rtl:end:ignore */
.carousel-fade .carousel-item {
  opacity: 0;
  transition-property: opacity;
  transform: none;
}
.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-start,
.carousel-fade .carousel-item-prev.carousel-item-end {
  z-index: 1;
  opacity: 1;
  transition: opacity 2.2s 0.6s;
}
.carousel-fade .active.carousel-item-start,
.carousel-fade .active.carousel-item-end {
  z-index: 0;
  opacity: 0;
  transition: opacity 0.8s 0.6s;
}



/* fix bootstrap 5 indicators */



.content a {
color: #C30;
text-decoration: none;
/* font-weight: normal; */
}

.content a:hover {
color: #000;
text-decoration: underline;
/* font-weight: normal; */
}



footer {
	display: block;
	position: relative;
	z-index: 0;
	top: 30px;
	min-width: 580px;
	max-width: 100%; /* war 1314 */
	padding-top: 2px;
	padding-bottom: 30px;
	padding-left: 0px;
	padding-right: 2px;
	/*background-color: transparent; */

	margin-top:21px;
	margin-bottom:24px;	
	
	font-size: 0.6rem;
	letter-spacing: 0.04;
	color: black;
}

#footer_in {
	padding-top: 0em;
}
#footer_in p {
	text-align: left;
	padding-right: 1.6rem;
	font-size: 0.96rem;
    line-height: 1.28rem;
	color: #666;
}
#footer_in span {
float: right;
}
#footer_in a:link, #footer_in a:visited, #footer_in a:active  { color: #999; text-decoration: none; }
#footer_in a:hover { color: #000; text-decoration: none; }

#footer_in_fonts p {
	text-align: left;
	padding-right: 1.6rem;
	font-size: 1.0rem;
    letter-spacing: inherit;
    line-height: 1.7rem;
	color: #666;
}

#footer_in_fonts a:link, #footer_in_fonts a:visited, #footer_in_fonts a:active  { color: #999; text-decoration: none; }
#footer_in_fonts a:hover { color: #000; text-decoration: none; }



h2 {
	text-shadow: 2px 2px 1px #D8D8D8; opacity: 0.85;
}

input {
	margin-top:8px;	
}

.ui-slider {right:-6px; margin-top:13px; width:104px; }



#pic { opacity: 0.80; max-width: 100%;}
#pic:hover{ opacity: 1; transition: opacity 0.1s; }



#ShowFontLink {
	padding-top: 4em;
}

#ShowFontLink a:link, #ShowFontLink a:visited, #ShowFontLink a:active  { color: #444; text-decoration: none; }
#ShowFontLink a:hover { color: #001; text-decoration: none; }





#backfill {
background:#F6F6F6;
border-radius:1rem;
padding: 1.8rem 2rem 1rem 1.5rem;
}

#MainFontMenu {
  background:#F6F6F6;
  border-radius:1rem;
  padding: 0.5rem 0.1rem 0.8rem 1rem;
  color: #666;
  font-size: clamp(2.0rem, 6cqw, 3rem); /* dynamisch von Breite abhängig */
  line-height: clamp(2.1rem, 6cqw, 3.1rem);
  overflow: hidden;
}



/* normale Links */
#MainFontMenu a {
  color: #666;            /* Link-Farbe */
  text-decoration: none;    /* optional */
}

/* Hover */
#MainFontMenu a:hover {
  color: #C30;
  text-decoration: none;
}













/*----- hide slideshow buttons -----*/
.carousel-indicators {display:none;}





@media (prefers-color-scheme: dark) { 


/* claim dark style */
#claim { opacity: 0.7; }
.randomizer { color:#CCC; letter-spacing: 0.1rem; }



	
/*----- Bootstrap Menu -----*/
 

.dropdown-menu {
  font-size: 1rem;
  color: #CCC;
  background-color: #333;
}

.dropdown-item {
  color: #AAA;
}
	
.dropdown-item:hover, .dropdown-item:focus {
  color: #FFF;
  background-color: rgba(200,50,0,0.70); 
}


.megamenu a {
  color: rgba(235,235,235,0.80);
  text-decoration: none;
}
.megamenu a:hover {
  color: #FFAF3D;
}


/*----- Bootstrap Menu End -----*/
	

/*-- globale image settings --*/

img {                filter: invert(90%); }
img:hover {          filter: invert(90%); }
svg {                filter: invert(90%); }

.content img {       filter: invert(90%) grayscale(100%) opacity(72%); }
.content img:hover { filter: invert(100%) grayscale(100%) opacity(100%); }
    

	

.nodarkmode img {                filter: invert(10%); }
.nodarkmode img:hover {          filter: invert(10%); }
.nodarkmode svg {                filter: invert(10%); }

.content .nodarkmode img {       filter: invert(10%) grayscale(50%) opacity(72%); }
.content .nodarkmode img:hover { filter: invert(10%) grayscale(50%) opacity(100%); }
	


	
/*-- globale image settings --*/


.no-invert {
  filter: none !important;
  background: none !important;
}


	
.content {
    color: #FFF;
	background-color: #444;
}
    
h1 { text-shadow: -1px 1px 3px rgba(0, 0, 0, 1); opacity:1; }
h2 { text-shadow: 2px 2px 1px #080808; opacity: 1; }
.content h3 { text-shadow: 2px 2px 1px #080808; opacity: 1; }


.content p {
letter-spacing: 0.04rem;
color:#DDD;
}


.content a {
color: #FFAF3D;
text-decoration: none;
}
    
.content a:hover {
color: #FFF;
text-decoration: underline;
}



    
#icon {
opacity: 0.5; transition: opacity 0.9s ease 1s;
}
    
#icon:hover {
opacity: 1; transition: opacity 0.1s;
filter:drop-shadow( 1px 1px 10px rgba(250,250,250,0.9) );
}  
    
#footer_in a:hover { color: #EEE; text-decoration: none; }

/*** pay button ***/
	
#single { opacity: 1.0;  }
#single:hover { opacity: 1.0; }

#pack { opacity: 1.0;  }
#pack:hover { opacity: 1.0; }


/*** intro about ***/

#backfill {
  background:#060606;
  }
  



/*--- bootstrap arcordion restyle --*/

.accordion-item {
	background-color: transparent;
}

.accordion-body {
	color: #101010;
    background-color: transparent;
}	
	
.accordion {
	color: #101010;
    background-color: transparent;
}
	
.accordion-button:not(.collapsed) {
	color: #ff6600;
    background-color: transparent;
}
	
.accordion-button:link, .accordion-button:visited, .accordion-button:hover, .accordion-button:active  {
	background-color: #C30;
	color:#FFF;
	text-decoration: none;
	border: hidden;
	border-color: #FFF;
	box-shadow: 0px;
}

.accordion-button:focus {
  z-index: 3;
  border-color: #ff6600;
  outline: 0;
  box-shadow: 0 0 0 .25rem #ff6600;
}	
	

	
.accordion-item {
	background-color: transparent;
}	
	
.accordion {
	color: #111;
    background-color: transparent;
}

.accordion-body {
	color: #EEE;
    background-color: #222;
}		
	
.accordion-button:link, .accordion-button:visited, .accordion-button:hover, .accordion-button:active  {
	background-color: #C30;
	color: blue;
	text-decoration: none;
	border: hidden;
	border-color: red;
	box-shadow: 0px;
}	

	
.intro-cover-bg {
	background-image: linear-gradient(180deg, #444444 49%, #4b74a2 49%, #444444 98%); 
}	

#footer_in_fonts a:hover { color: #EEE; text-decoration: none; }


}
	




/* screen settings  */

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

   
/*
.content ul {font-size: 0.71rem; line-height: 1.4rem; }
*/
    
	
#slidepic, .slideshow a img { max-width: 540px; max-height: 100%!important; }
#fullpic { opacity: 0.05; max-width: 900px; height: auto; }
#fullpics { opacity: 0.55; max-width: 900px; height: auto; padding-bottom: 8px; padding-left: 8px; }
#fullpics:hover { opacity: 1; transition: opacity 0.1s; }
#fontpic1 { opacity: 0.80; max-width: 100%; height: auto; padding-bottom: 8px; padding-left: 8px; }
#fontpic1:hover { opacity: 1; transition: opacity 0.1s; }

#halfpics { opacity: 0.55; max-width: 430px; height: auto; padding-bottom: 8px; padding-right: 4px; }
#halfpics:hover{ opacity: 1; transition: opacity 0.1s; }
#halfpics5 { opacity: 0.55; max-width: 430px; height: auto; padding-left: 10px; padding-bottom: 8px; padding-right: 4px; }
#halfpics5:hover{ opacity: 1; transition: opacity 0.1s; }
#fullpic_slideshow { max-width: 99%; height: auto; }
#fullpic_slideshow_pic1 { opacity:0.9; max-width: 99%; height: auto; }
#icon {
width: auto; height: 44px;
}
#icon:hover {
width: auto; height: 48px;
}



/*----- Bigger Text -----*/

.content h1 {font-size: 1.8rem; line-height:2.4rem; }
.content h2 {font-size: 1.7rem; line-height:2.3rem; }
.content h3 {font-size: 1.6rem; line-height:2.2rem; }
.content h4 {font-size: 1.5rem; line-height:2.1rem; }	

.content li {font-size: 1.3rem; line-height:1.8rem; }		
	
.content p { font-size: 1.6rem; line-height:2.1rem; letter-spacing: 0.02em;}
p { font-size: 1.3rem; line-height:1.9rem; letter-spacing: 0.02em;}

.nav-item a {font-size: 1.9rem; line-height:2.2rem; }	


#footer_in p {
	font-size: 1rem;
    line-height: 1.28rem;
}

#footer_in_fonts p {
	font-size: 1.2rem;
    line-height: 1.5rem;
} 



/*----- Fontwall Startseite -----*/
#fontwall { font-size: 3.9rem; line-height: 5.8rem; }


}





/*==== 2K/4K (6:9) Responsive Support ====*/
@media screen and (min-width: 2500px) {


  .content h1 {font-size: 1.8rem; line-height:2.4rem; }
  .content h2 {font-size: 1.7rem; line-height:2.3rem; }
  .content h3 {font-size: 1.6rem; line-height:2.2rem; }
  .content h4 {font-size: 1.5rem; line-height:2.1rem; }	
  
  .content li {font-size: 1.3rem; line-height:1.8rem; }		
    
  .content p { font-size: 1.6rem; line-height:2.1rem; letter-spacing: 0.02em;}
  p { font-size: 1.3rem; line-height:1.9rem; letter-spacing: 0.02em;}
  
  
  .nav-link, .dropdown-item {font-size: 1.3rem; line-height:2.2rem; }
  
  #footer_in p {
    font-size: 1rem;
      line-height: 1.28rem;
  }
  
  #footer_in_fonts p {
    font-size: 1.2rem;
      line-height: 1.5rem;
  } 



}