/*
Theme Name: Schwules Sommercamp
Template: twentytwentyfive
Author: Nils Schaffernicht
Author URI: https://www.nilsschaffernicht.de
Description: 
Version: 1.0.0
*/


/* Schwulessommercamp.info - Screen-Style-Definitionen */

*
{
 outline: none !important;
}

html
{
	height: 100%;
	width: 100%;
	z-index: 0;
  font-family: Arial, Helvetica, sans-serif;
	overflow: -moz-scrollbars-vertical;
	 font-size: 16px;
}

body {
	background-color:#fff;
	 hyphens: auto;
  }

/* schwules sommercamp - Allgemeine Format-Definitionen */



/* Beginn Basics */


*
{

 font-family: Arial, Helvetica, sans-serif;
}


/* Schriften allgemein */


p,h3,li,em,u,blockquote,legend,label {font-size: 1em;}
p.small {font-size: 0.5em; margin:0em;}

/*erste Üerschrift: Oben an der Spalte */
h1       {font-size: 3em;}

/*zweite Üerschrift: Hauptfenster-Einträge */
h2       {font-size: 1.4em; margin-bottom: 0.125em; }

/*dritte Üerschrift: Einträge im kleinen Fenster */
h3       {font-size: 1.2em; margin: 0em;}

/*vierte Üerschrift: Datum etc. als Kopfzeile zu Einträgen bei Dates auf der Startseite*/
h4       {font-size: 1.15em; font-weight: normal; margin:0em;}

/*vierte Üerschrift: Datum etc. als Kopfzeile zu Einträgen bei Dates auf der Startseite*/
h4.small {font-size: 0.8em; font-weight: bold; margin:0em;}



/*Positionierungen*/

#content
{
 font-size:2em;
 color: black;
 padding: 0em;
 margin: 0em;
}

footer
{

 font-size: 1em;
 color: #666;
 margin-left:1.875em;
 padding-bottom: 1em;
}

.external-link::before {
content: "\f08e"; }

.video-link::before {
content: "\f1c8"; }

.comments-link::before {
content: "\f0e6"; }


#link-home::before {
	content: "\f015";}

#link-camp::before {
	content: "\f03e";}

#link-infos::before {
	content: "\f277";}

#link-kontakt::before {
	content: "\f086";}
	
#link-anmelden::before {
	content: "\f0a9";}	
	
.friendly-notice h3::before,	  	
.icon-info::before {
	content: "\f05a";
       color: #003395;}		

.success-notice h3::before,	   
.icon-check::before {
	content: "\f00c";
       color: #green;}	

.error-notice h3::before,	   
.icon-error::before {
	content: "\f06a";	   
	color: #dc172a;}
	   
.icon-smilie::before {
content: "\f118"; }

.icon-bulb::before {
	content: "\f0eb";}		
	   
	   
	 
.friendly-notice h3::before,	  	
.error-notice h3::before,	  	
.success-notice h3::before,	  	
.external-link::before,
.video-link::before,
.comments-link::before,
.menu_main > a::before,
.icon::before,
#breadcrumb a:first-child::before
{
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
 padding-right: 0.3em;
}


.promobox_btm
{
 font-size:1em;
 color: black;
 padding: 0em;
 margin: 0em;
}

.fa-facebook-official
{
 color: #365899;
}

.white
{
 color: #fff;
}

.red
{
 color: #dc172a;
}

h1, h2, h3
        {
         text-transform:uppercase;
         color: #000000;
         clear:both;
  }

#content h2.hot,
#content a,
.backlink::before,
.forwardlink::after
{
 color:#dc172a;
}

#content h2.img_space
{
 margin-left:5.0625em;
}

/*vereinfacht. ohne #content */

h3, p
{
 margin: 0.9375em 0em;
}

img.side_img
{
 margin-top:0.3125em;
}

/*vereinfacht. ohne #content */

.preview,
.teammember
{
 width:17em;
}

.teammember
{
 float:right;
 margin-bottom: 0em;
}

h1.wp-block-post-title + .entry-content h1{
	display: none;
	}

.page-id-22	.kachel img,
.parent-pageid-22 .entry-content .kachel.rechts img
  {
  max-width:100%;
  margin-bottom: -0.5em;
  }	

.parent-pageid-22 .entry-content .kachel {
	width: 13em;
	position: absolute;
	}

#sidecontainer h2 {
	font-size: 1.75em;
	}


.kachel a
{
 font-size: 0.7em;
}

.backlink::before {
	content: "«";
	padding-right:0.3em;
	}
	
.forwardlink::after {
	content: "»";
	padding-left:0.3em;
	}	

input.small,
input.medium,
input.big,
textarea,
select
{
 border: 0.0625em solid #000;
 /*! margin: 0.125em; */
 font-size: 1em;
}

input.small,
select.small
{
 width: 5em;
       height:2.5em;
}

input.medium,
select.medium
{
  width: 9.375em;
}

input.big,
select.big
{
  width: 12.5em;
}


textarea
{
 width: 18.75em;
 height:3.125em;
}
textarea.small
{
 height:1.875em;
}

textarea.big
{
  height: 5.625em;
}

form fieldset
{
 border: 0.0625em solid #000;
}

form table th
{
 font-size: 1em;
 font-weight: bold;
 text-align:right;
}

form table td
{
 margin: 0.125em;
 font-size: 1em;
}

form table td.extra label
{
 font-size:1em;
}

#Ermaessigung
{
 margin-left:0.3125em;
}

form table *.extra
{
 font-size: 1em;
 font-weight: normal;
}

input[type="submit"]
{
       min-height:3em;
       min-width:11em;
       font-weight: bold;
}

#finalsend {
min-height: 7em;
border: 2px solid black;
}

div.success-notice,
div.friendly-notice,
div.error-notice {
	padding: 0.6em;
	margin: 0.6em 0;
	border-radius: 0.8em;
	}


em.alert,	
em.neutral,
em.ok,
em.notiz {
	border-radius: 4px;
}

	
div.error-notice,
em.alert {
	background-color:lightpink;
	}	
	
em.alert {
	padding: 0;
	}
	
div.friendly-notice,
em.neutral  {
	background-color:lightblue;
	}
		
div.success-notice,
em.ok {
	background-color:lightgreen;
	}

em.notiz {
	background-color:yellow;
	}	
	
	
form span.notice
{
 color:#dc172a;
 font-weight:bold;
 font-size:1em;
}

input.notice,
#content table.facts.large input.notice,
select.notice
{
 border-color:#dc172a;
}



*.kasten
{
 background-color:#ffffff;
 border: 0.0625em dotted #999999;
}

div.kasten
{
 position:relative;
 margin:-3.25em -0.625em 1.25em 0em;
 padding: 0em;
 background-repeat:no-repeat;
 background-position:center left;
 width: 33.125em;
 /*max-width: 33.125em;*/
 float:right;


}



div.kasten p
{
 margin: 0.625em 0.3125em;
}

#content a
  {
         text-decoration: none;
  }


details h2
{
 font-size:0.8em;
}

table.facts
{
 border-collapse:collapse;
 background-color:white;
 border:none;
 padding: 0em;
 font-size: 0.6em;
 margin: 0.125em;
 color: #000;
}

table.facts tr
{
 padding: 0.0625em;
 margin:0.125em;
}

table.facts tr th
{
 vertical-align:top;
 padding:0.25em;
}


table.facts.large tr td
{
 vertical-align:top;
 padding:0.25em;
}


table.facts.large input
{
 border: 0.0625em solid #000;
}


table.facts tr,
table.facts tr td,
table.facts tr th
{
 border-top:0.0625em #000 solid;
 border-bottom:0.0625em #000 solid;
}

table.facts tr.partner,
table.facts tr.partner td,
table.facts tr.partner th
{
 border-top:none;
 border-bottom:none;
}


table.facts tr td,
table.facts tr td ul li
{
 font-size: 1em;
}

table.facts tr td ul
{
 padding: 0.125em 0em 0.125em 1em;
/* margin: 0.5em 0.3125em;*/
}

table.facts tr td ul li
{
 padding: 0.125em;
 list-style-type:square;
 list-style-position:outside;
 /*margin: 0.5em 0.3125em;*/
}

div.side, /*DPRC*/
aside
{
 position:relative;
 /*! float:right; */
 margin: 0.125em 0em 0.125em 0.625em;
}


div.pics
{
 position:relative;
 margin: 0em;
}

div.side h2,
div.side h3,
/*DPRC*/
aside h2,
aside h3
{
 padding:0em;
 margin: 0 0 0.3125em 0;
}

h2.tabhead
{
 border-bottom:0.0625em solid #000;
 margin:0.625em 0em;
}


#homelink img
{
 left: 0.5em;
}

/*Listenformat*/

article ol, article ul
 {
  margin: 0.1875em;
        padding: 0em;
 }

article li
 {

  margin: 0.3125em 0.1875em 0.3125em 0.9375em;
        padding-left:0.3125em;
        list-style-type:disc;
 }


article ul li ul li h3
 {
        color:#006699;
 }

article ul.none li
 {
        list-style-type:none;
 }

article ul.none li span
 {
        position:absolute;
        left:13.75em;
 }

table.select td
{
 padding:0.3125em 0.625em;
}


.perlen ol,
.perlen ol li
{
 padding: 0em;
 margin: 0 1.5em 0 0;
}

.perlen-xxl ol li
{
	margin-right: 0.5em;
}

.perlen ol li:last-child
{
 margin-right:0;
}

.perlen h3
{
 font-size: 1em;
 text-transform: none;
 font-weight:normal;
}

.perlen input,
.perlen button {

    display:inline-block;
    min-width:2em;
    min-height:2em;
    line-height:1em;
    border: 2px solid #f5f5f5;
    border-radius: 50%;
    color:#f5f5f5;
    text-align:center;
    text-decoration:none;
    background: #464646;
    box-shadow: 0 0 3px gray;
    font-size:1em;
    font-weight:bold;
}

.perlen input.active,
.perlen button.active{
    background: #dc172a;
}

.perlen input:hover,
.perlen button:hover {
    background: #262626;
}

.perlen hgroup,
.perlen hgroup h1,
.perlen hgroup h2 {
font-size: 1em;
text-transform: none;
}

.perlen hgroup h1,
.perlen hgroup h2 {
 display: inline-block;
}

.perlen h3 {padding-top: 0.3em;}

/*
.perlen hgroup h1
{
 padding-right: 0.3em;
}

.perlen hgroup h1::before
{
 content: "Anmeldung";
 padding-right: 0.3em;
}*/


/*
.perlen hgroup h2 {
font-weight: normal;
}*/

/*Listenformat*/

ul {margin:0em;
    padding:0em;}

u  {text-decoration:underline}


/*Spezialformate*/

 ol {display:block; background-color:#fff;  padding-left:1.25em;  padding-bottom:0.5em; list-style-type:decimal;}
 
 .perlen ol {
 height:1.2em;
 }
 /*
 ol li{float:left; margin: 0em 1.875em 0.25em 0em; font-size: 0.875em; text-transform:uppercase; }
 ol li.grau{color:grey;}
 ol li.step{color:#dc172a; font-weight:bold;}
 #content ol li a{color:black; text-decoration:none;}
 #content ol li a:link{color:black; text-decoration:none;}*/


 fieldset {border: 0.0625em solid black; padding:0.3125em; background-color:#fff;}
 fieldset legend {font-size: 0.875em; text-transform:uppercase; font-weight:bold;}

/*Verkleinerte Abstände*/
*.nixob  {margin-top: 0em;}
*.nixunt {margin-bottom: 0em;}
*.nixnix {margin-top: 0em; margin-bottom: 0em;}

/*Mehr Abstand*/
*.abstand {margin-top: 0.3125em;}

*.solo {margin-bottom:0.9375em;}


/* ohne Umbruch */
.nowrap, .morelink, .external-link, .video-link
 { white-space:nowrap;}

/* neue Zeile, umgebrochen*/
*.clear  {clear:both; white-space: normal;}

/*Zentriert*/
*.cen {text-align: center;}

/*Fette Schrift*/
*.fett {font-weight: bold;}

/*Schwarz*/
*.black {color:black;}


/*Allgemeine formatierungen*/

div {
   margin: 0em;
         padding: 0em;
  }

h1, h2, h3
{
 font-weight:bold;
}  
  

/*Tabellenangaben */
table     {border:none; border-spacing:0.625em; margin-top: 0.625em;
/*color:#ffffff;  IE 6 */}
th        {/*font-size: 1em; font-weight: bold; */text-align:left;}
td        {font-size: 0.875em; }
td.black {background-color: grey; margin-bottom: 3.125em;}


/*Links im Fließtext*/
p a:link,
#breadcrumb a:link   {color: #006699; font-weight: bold; text-decoration: underline}
p a:active ,
p a:visited,
p a:hover   {color: #000000; font-weight: bold; text-decoration: underline}

/*Links sonstwo*/
a,
a:link,   
a:active,  
a:visited, 
a:hover   {color: #000000; text-decoration: none}




.fa.fa-instagram {
  color: transparent;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  background: -webkit-radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  background-clip: text;
  -webkit-background-clip: text;
  transform: scale(1.12);
}




  #fade {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #000;
    opacity: 0.5; 
    z-index: -1;
}
  
#homelink {
 display: block;
	height: 100%;
	width: 100%;
}



html.no-js #fallback-nav { display: block; }
html.no-js #fade { display: none; }
html.no-js #navicon { display: none; }
html.js #fallback-nav { display: none; }


#container,
header{
		width: 90%;
		max-width:140em;
	  z-index: 10;
  position:relative;
	margin: auto;
	padding: 0em;	
	text-align:left;
	background-color:#ffde13; /*Camp-Gelb*/

  } 	

  #container
  {
   min-height:42.5em;
}

  
#main_text, #sidecontainer
{
 font-size: 1.4rem;
}

form #main_text
{
 padding-top: 1em;
}


#menu_toggle.closed
{
	display: none;
}

#menu_toggle
{		
	font-size:2em;
	margin:0.8em 0.65em;
	background-color:#ffde13; /*Camp-Gelb*/
	z-index:10221;
	outline: none !important;
	position: absolute;
}

  
.wp-block-site-logo img
{
display: block;
  background-color: #ffde13;
  width: 18.15em;
  height: 5.1em;
  z-index: 100;
  margin-top: 1.2em;
  padding-right: 1em;
}  
  
#logo img
{
	position:relative;
	margin: 0.5em 1.1em 0 0.8em;
	width: 93%;
}

#banner_xxl {
	background: radial-gradient(#ffde13,rgba(255,255,255,0));
	padding-bottom: 2.5em;
	width: 14em;
	margin-left: 0.4em;
	}
	
#banner_xxl img {
	width: 11em;
	box-shadow: 0.1em 0.1em 0.3em #111;
}

#banner_xxl::before {
	content: "+ ";
	font-weight: bold;
	}	

#logos
{
  min-width: 20rem;
	min-height: 100%;
	max-width:10%;
	position:absolute;
	right:1em;
	background-image:url('layout/logos.svg');
	background-position:98% 3%;
	background-repeat: no-repeat;
	background-size:100%;
	top:1.5em;
	z-index: 100;
}

#menu { /* Navigation */
  			  position:relative;
					z-index:200;
					margin:0em;
					padding:0em;
					top:0;
			 background-color:#fff;
				border:0.2em;              
					border-color:#fff;
				border-style:solid;
	 box-shadow: 0.1em 0.1em 0.3em #111;
				 }

				 
#menu ul, #menu ul li ul, #breadcrumb ul, .perlen ul, .perlen li
				 {
				  list-style-type: none;
				 }				 

#menu li
{
 display:block;
 text-transform:uppercase;
 /*! font-family: "Myriad Web Pro", "Myriad", Arial, Helvetia, Sans-Serif, Sans; */
 font-size:100%;
 padding:0.23em 0em;
 font-weight:900;
 color:#000;
 border-bottom: 1px solid #000;
	letter-spacing:-0.01em;
 line-height: 1.55em;
}

#menu a,
.perlen input
{
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  display:block;
  padding: 0;
}  

#menu li a.select
{
 color: #dc172a;
}


#menu a:hover,
.perlen input.active
{
  -webkit-animation-name: pulse;
  animation-name: pulse;
    -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
  
#menu li:first-child				 
{
 border-top:none;
}

#menu li:last-child				 
{
 border-bottom:none;
 padding-bottom:0; 
}

/* Nav-Icons */
#menu i
{
 display: inline-block;
 width: 1em;
 margin-right: 0.5em;
}

.submenu,
.submenu li
{
 display:none;
}

#menu .submenu li,
#menu .subselect li
{
 padding-left: 2em;
}

@keyframes einblenden {
  from {
    opacity: 0;
  }

  to {
	opacity: 1;
  }
}


#menu li:hover .submenu
{
 display:block; 
 -webkit-animation-duration: .75s;
  animation-duration: .75s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
    -webkit-animation-name: einblenden;
  animation-name: einblenden;
    -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

				
#content
	{
		display: block;
	 position: relative;
	 padding: 3.5em 1em 5em 7.5em; 
		margin-left: 1em;
	 z-index: 0;	
	 margin-right: 2em;
		
		

 background-image:url('layout/items_vertikal.png');
 background-repeat: repeat-y;
 background-size:6em;
		
		
	 background-position: 3.5em 1.72em;
	 background-attachment: fixed;
	 
	 
	 
  }

  
  #content img
  {
  max-width:100%;
  }
 
 
 
 
 
 
 /* Pic als Container */
 
 
 .pic {
  border: 0;  
  height: 10.750em;
  width:100%;
  margin: 0;
  overflow: hidden;

}

/* Vereinfacht von : #content h3.overlay-text */
.overlay-text
{
	
 max-inline-size: 100%;
 color:#fff;
   -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
 
background-color: #777; /* Fallback */
background:no-repeat scroll 100px 50px; /* Fallback */

background: no-repeat scroll 100px 50px, -moz-linear-gradient(top, rgba(255,255,255,0), black); /* FF 3.6+ */
background: no-repeat scroll 100px 50px, -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,255,255,0)), to(black)); /* Safari 4+, Chrome 2+ */
background: no-repeat scroll 100px 50px, -webkit-linear-gradient(top, rgba(255,255,255,0), black); /* Safari 5.1+, Chrome 10+ */
background: no-repeat scroll 100px 50px, -o-linear-gradient(top, rgba(255,255,255,0), black); /* Opera 11.10 */
background: no-repeat scroll 100px 50px, linear-gradient(to bottom, rgba(255,255,255,0), black); /* Standard, IE10 */
opacity: 1;
 position: relative;

 padding: 1.5em 7em 1.5em 2em;
 width: 100%;

 height: 2em;
 top: 6.8em;
 font-size: 1em;
}


/* Vereinfacht: #content .grow:hover h3.overlay-text entfernt */



 
 
 .grow {
  margin-top:0em;
  min-width: min( 100%, 32.25em );
 
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
 
  background-repeat: no-repeat;
  background-size: 94%;
}

.upzoom{
 background-position: -4em 0em;
}

.downzoom {
 background-position: -3em -7em;
 background-size: 80%;
}

.middlezoom{
  background-position: -3em -4em;
}

.zoomout {
 background-position: -7em -2em;
 background-size: 100%;
}

 

summary{
	cursor: pointer;
  margin-bottom: 1em;}

summary::-webkit-details-marker {
  display: none
}


details .fa-chevron-circle-up ,
details .fa-angle-double-up{
  display: none;
}

details[open] .fa-chevron-circle-up,
details[open] .fa-angle-double-up {
  display: inline;
}


details[open] .fa-chevron-circle-down,
details[open] .fa-angle-double-down  {
  display: none;
}



details[open] .additional{
/*-webkit-animation-name: fadeInUp;
   -webkit-animation-duration: 1s;
   -webkit-animation-fill-mode: both;
    animation-name: fadeInUp;
    animation-duration: 1s;
	animation-fill-mode: both;*/
}



.morelink
{
 border: 1px solid black;
 border-radius: 1em;
 padding: 0.2em 0.5em;
}

details[open] .morelink{
 color:#ccc;
	border-color:#ccc;
}


details .morelink::before{
 content: 'Mehr erfahren... ';
 font-size: 1.1em;
 font-weight: bold;
}

details[open] .morelink::before{
 content: 'Details ausblenden ';
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
   /* IE10+ specific styles go here */
   details .morelink {
   display: none;
   }
}

section a
{
 font-size: 1em;
}

section p a,
section summary a
{
 font-size: 1em;
}


summary
{
 font-size: 1em;
}

details
{
 margin: 1.5em 0 0 0;
} 

section
{
 margin-bottom: 1.5em;
} 

details h4
{
 margin: 1em 0 0.4em 0;
} 
	
 h1 /* Alle Abweichungen sollten mit Klasse definiert werden */
 {
  font-size: 2.2em;
 }
 
 .contentbox
 {
	 
  background: white;
  padding: 1em;
  box-shadow: 0.1em 0.1em 0.3em #111;
  display: block;
 }

#maincontent
{
	max-width: 69%;
	position: relative;
	display: inline-block;
	top: 0em;
	margin-top: 1em;
}

#main_text
{
 margin-top: 0.5em;
 min-height: 13vw;
}
 
#sidecontainer
{
	display: inline-block;
	max-width: 23em;
	top: 8.9em;
	position: absolute;
}

#sidecontainer blockquote 
{
   color: grey;
   font-size: 0.9em;
   font-style: italic;
   border: none;
   margin-bottom: 0.2em;
}


#sidecontainer a span
{
 display:none;
}

#sidecontainer a:hover span
{
 display:block;
}

blockquote::before
{
 content:"»";
}
blockquote::after
{
 content:"«";
}
 
header
{
 top:0;
 /*! width: 100%; */
 height:10em;
 background-color: #ffde13;
 border-top: 1.2rem solid #fff;

}

#top_items
{
 width:100%;
 height:100%;
 display:inline-block;
 background-image:url('layout/items_top.png');
 background-size:60em;
 background-repeat:repeat-x;
 z-index: -1;
 top: 1em;
 margin-top: 0;
 left: 2em;
 position: absolute;
 background-position-x: -2em;
}

	#sticky_upside
	{
position: sticky;
top: 4em;
width: 100%;
z-index: 10;
padding: 0.5em 0 0 0;
margin: -1em 0 0 0em;
	}

form {
padding: 0;
margin: 0;
text-indent: 0;
font-size: 1em;
/*background-color: green;*/
}



#breadcrumb,
.perlen
{
 display: block;
 z-index:100000000;
 position: relative;
 margin-top: -0.7em; 
	left: -2em;
 padding: 0.5em 0.5em 0.5em 1.6em;
 font-size: 0.5em;
 background: #fff;
 width: calc(100% + 4em);
 border-bottom: 0.1em dotted #000;
 margin-bottom: 1em;
}

.perlen
{
 /*background-color: green;
 width: calc(100% + 4em);
 */ margin-bottom: -2.4em;
 background-color: #eee;
	padding: 0.4em 0 0 2em;
 margin-top: -1em;
}



.perlen ol
{
 width: 100%;
 table-layout: fixed;
	background: none;
}

.perlen li
{
 display: inline-block;
 width: calc( ( 100% / 6 ) - 1.6em );
}


.perlen input
{
 width: 1em;
}

.perlen li:last-child
{
 width: 1em;
}

.basisline
{
 border-top: 2px dotted #aaa;
 width: calc(95%);
 margin-top: -0.4em;
}

.statusline
{
 display: none;
 border-top: 1px solid #000;
}

/* Formular-Switches */


#xxl-alternate-tipp {
	color:black;
	}

#wieoftselect {
	height: 15em;
	max-width: 30em;	
	}

.partnerinfo {
		max-width: 30em;
}

#einwilligungstext {
	display: block;
}

#einwilligung {
    float: left;
    margin-right: 0.5em;
}

#radio-switch {
	height: 20em;
	}
	
.switch label {
	padding: 0.1em;
	line-height: 1em;
}



.switch div {
	margin: 2% 0;
}


@media only screen and (min-width:1300.01px) {
	.switch div {
	margin-top: 1em;
}
}

#radio-switch div {
	margin-top: 1em;
	}

.switch .detail {
	display: block;
	font-size: 0.8em;
	color: inherit;
	}

.candy.campgelb .slide-button {
		background-color: #f5e560;
	}

 .switch-campgelb a {
    background-color: #ffde13; }
	
 .switch-camprot a {
	background-color: #dc172a; }

.switch-light span
{
 max-width: 25em;
}
	
	
#breadcrumb ul
{
 display: inline-block;
}

#breadcrumb a,
#breadcrumb a:link
{
	color: black;
	text-decoration: none;
}

#breadcrumb i
{
 width: 1em;
 margin-right:0.5em;
}

#breadcrumb li,
#breadcrumb span
{
 float:left;
 font-size: 1em;
  margin:0;
 padding:0;
 margin-left:0.4em;
		 line-height: 1.2em;
}

#breadcrumb li::before
{
 content: '» ';
}

#breadcrumb li:first-child::before
{
 content: '';
}


#kachel_uebersicht
{
  text-align: center; 
        -webkit-colums: 6 8.4em;
        -moz-column-count: 6;
        -moz-column-width: 8.4em;
        columns: 6 8.4em;
		padding-right:1em;
		
	display: flex;
	flex-wrap: wrap;	
    }

	

	
.checkout_data,
.checkout_data-big
{
text-align: left; 
}

.checkout_data legend,
.checkout_data-big legend
{
	text-align: center; 
	width: initial;
	margin-top:1em;
	padding: 0 1em;
}
	
	
	
.checkout_data input[type="submit"],
.checkout_data-big input[type="submit"]
{
 width: 100%;
 white-space: normal;
 text-align: center;
 /*! bottom: 1em; */
 /*! position: static; */
}

.break {
    white-space: normal;
	}

fieldset legend {
	font-size: 1em;
	margin-bottom: 0.5em;
}

.checkout-zeile {

	display: table-row;
}

.checkout-label,
.checkout-value {
	display: table-cell;

}



.checkout-label {
	padding-right: 1em;
	text-align: right;
	hyphens: manual;
}

#menu .menu_main > a {
	hyphens: manual;
	display: inline-flex;
	}

.menu_main > a::before {
	display: inline-flex;
	padding-top: 0.25em;
	}
	
.checkout-value,
.checkout-fett
 {
	font-weight: bold;
}


.kachel
{
  -webkit-filter: brightness(100%);
   -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
	   box-shadow: 0.1em 0.1em 0.1em #111;
	   border: 0;
	   background: white;
	   -webkit-backface-visibility: hidden;  
}

#content .kachel a
{
 padding: 0em;
 margin: auto;
 display: block;
 color: black;
 text-align: center;
 font-size: 1em;
}

#kachel_uebersicht .kachel:hover,
.kachel.rechts
{
  -webkit-transform: rotate(-7deg);
     -moz-transform: rotate(-7deg);
       -o-transform: rotate(-7deg);
      -ms-transform: rotate(-7deg);
          transform: rotate(-7deg);
		  
  -webkit-filter: brightness(120%);	
}


aside .kachel.rechts
{
  -webkit-transform: none;
     -moz-transform: none;
       -o-transform: none;
      -ms-transform: none;
          transform: none;
		  
  -webkit-filter: none;
}


#nav_container
{
 position:fixed;
 top:13.85em;
 left: 6.8em;
 width: 12.5em;
 /*! min-width: 10em; */
	height: 19.0em;

}

.promobox_btm
{
 margin-top:1em;
 border-top: 1px solid #000;
}

.sliderschiene {
overflow:scroll;
max-height: 10em;
display: inline;
}

.sliderschiene img{
display: inline-block;
max-height: 20em;
float:left;
}

#highlights h3
{
 margin-bottom: 0;
}

#highlights p
{
 margin-top: 0.125em;
}

.eindruecke {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-evenly;	
	}
	
.eindruecke > div {
	
	}	

.extrapad {
	padding-bottom: 2em;
	}

.inhaltbox,
.imgbox  {
padding: 0.5em;
background-color: #ccc;
margin: 0.2em 0;
width: 100%;
}


.imgbox {
	min-height: 16em;
	background-size: 100%;
	color:#fff;
    display: inline-block;
	padding: 0;
	background-repeat:no-repeat;
	background-position: center top;
	vertical-align: top;
}		

.imgbox section {
	font-size: 1em;
	padding: 12% 0.5em 0.5em 0.5em;
	margin: 0;
	min-height: 16em;
    /*background-color: rgba(0,0,0,0.3);*/
    color: #fff;
	overflow: visible;
	
	background-color: #777; /* Fallback */
background:no-repeat scroll 100px 50px; /* Fallback */

background: no-repeat scroll 100px 50px, -moz-linear-gradient(top, rgba(0,0,0,0), black); /* FF 3.6+ */
background: no-repeat scroll 100px 50px, -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0,0,0,0)), to(black)); /* Safari 4+, Chrome 2+ */
background: no-repeat scroll 100px 50px, -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.1), black); /* Safari 5.1+, Chrome 10+ */
background: no-repeat scroll 100px 50px, -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.1), black); /* Opera 11.10 */
background: no-repeat scroll 100px 50px, linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.1), black); /* Standard, IE10 */
opacity: 1;

 font-size: 1em;
	
}

.short section{
padding-top: 39%;
}

.medium section{
padding-top: 24%;
}

.pano {
background-size: 114%;
background-color: unset;
}

.blur {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
 
.blur:hover {
  -webkit-filter: blur(2px);
}

.blur:hover section {
  -webkit-filter: blur(0px);
}


.black {
background-color:black;
}



.imgbox h3 {
 color: #fff;
 background: none;
 font-size:1.4em;

}

.imgbox p,
.imgbox h3 {

	vertical-align: bottom;
}
		
figure.kachel
{
 display:inline-block;
 /*! height:100%; */
 width:8em;
margin: 0 2.4em 1.6em 0.8em;

}


.spalten3  {
        -webkit-colums: 3 200px;
        -moz-column-count: 3;
        -moz-column-width: 200px;
        columns: 3 200px;
}

.spalten2  {
        -webkit-colums: 2 200px;
        -moz-column-count: 2;
        -moz-column-width: 200px;
        columns: 2 200px;
}


/* Formular 
 #anmeldung ausgeklammert */

 
label,
input,
select,
.lb_label,
textarea
{
font-size: 1.2em;
 max-width: 100%;

}





input[type=text],
input[type=email],
input[type=tel],
input[type=number],
#geb_datum  {
 width: 20em;
 margin: 1.5em 0em 0.75em 0; 
 
	}


	
	
label {
    cursor: pointer;
    font-weight: 400;
	min-width: 5.5em;
	}

select,
textarea{
 margin: 0 0 1em 0; 
}

select, textarea {
 width: 20em;
}

textarea {
 height: 10em;
}

.formfield {

max-width:100%;
}
	

.error
{
 color:#dc172a;
 border: 1px solid #dc172a;;
  
}

label.error {
width: 27em;  
border: none;
}

#einwilligung-error
{
    border: 1px solid red;
    border-radius: 0.3em;
    padding: 0.2em;
}


.valid
{
 color:green;
 border: 1px solid green;
}


label.error::before {
content: "\f071";
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
 padding-right: 0.3em;
}

.switch-light {
max-width: 100%;
}	
	
.no-js .formfield label,
.no-js .formfield input,
.no-js .formfield select
{
 margin: 0.6em 0.3em 0 0.3em;
}



.js .ersatz {
 display:none;
}


@keyframes LabelEinblenden {
  from {
    opacity: 0;
	top: 0em;
  }

  to {
    opacity: 1;
	top: -2em;
	}
}	


@keyframes LabelAusblenden {
  from {
	opacity: 1;
	top: -2em;
  }

  to {
    opacity: 0;
	top: 0em;
	}
}	

.lb_label {
 white-space: nowrap;
    -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  animation-fill-mode: both;
    -webkit-animation-name: LabelEinblenden;
  animation-name: LabelEinblenden;
 /* top: -2em;*/
position: absolute;
}

/*
.lb_label .active {
   -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}*/


.ui-datepicker-append
{
 font-size:0.7em;
}


/* :not(input[type=submit]) */



/* ------------------------------------------
CSS TOGGLE SWITCHES (IonuÈ› Colceriu)
Licensed under Unlicense 
https://github.com/ghinda/css-toggle-switch
------------------------------------------ */

/* Hide by default */

.switch .slide-button,
.toggle p span {
	display: none;
}

/* Toggle Switches */

/* We can't test for a specific feature,
 * so we only target browsers with support for media queries.
 */
@media only screen {
	


	/* Checkbox
	 */
	.toggle {
		position: relative;
		padding: 0;
		margin-left: 100px;
	}

	/* Position the label over all the elements, except the slide-button
	 * Clicking anywhere on the label will change the switch-state
	 */
	.toggle label {
		position: relative;
		z-index: 3;
		display: block;
		width: 100%;
	}

	/* Don't hide the input from screen-readers and keyboard access
	 */
	.toggle input {
		position: absolute;
		opacity: 0;
		z-index: 5;
	}
	
	.toggle p {
		position: absolute;
		left: -100px;
		
		width: 100%;
		margin: 0;
		padding-right: 100px;
		
		text-align: left;
	}
	
	.toggle p span {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 5;
		
		display: block;
		width: 50%;
		margin-left: 100px;
		
		text-align: center;
	}
	
	.toggle p span:last-child {
		left: 50%;
	}

	.toggle .slide-button {
		position: absolute;
		right: 0;
		top: 0;
		z-index: 4;
		
		display: block;
		width: 50%;
		height: 100%;
		padding: 0;
	}

	/* Radio Switch
	 */
	.switch {
		position: relative;
		padding: 0;
	}
	
	.switch input {
		position: absolute;
		opacity: 0;
	}
	
	.switch label {
		position: relative;
		z-index: 2;
        display: block;
		
		margin: 0;
		text-align: center;
	}

	.switch .slide-button {
		position: absolute;
		top: 0;
		left: 0;
		padding: 0;
		z-index: 1;
		
		width: 100%;
	}

	.switch input:last-of-type:checked ~ .slide-button {
		//left: 50%;
	}

	/* Switch with 3 items */
	.switch.switch-three label,
	.switch.switch-three .slide-button {
        height: 33%;
	}

	.switch.switch-three input:checked:nth-of-type(2) ~ .slide-button {	
		top: 33.3%;
	}

	.switch.switch-three input:checked:last-of-type ~ .slide-button {
		top: 66.6%;
        left: 0;
	}
	
	/* Switch with 4 items */
	.switch.switch-four label,
	.switch.switch-four .slide-button {
		height: 25%;
	}

	.switch.switch-four input:checked:nth-of-type(2) ~ .slide-button {	
		top: 25%;
	}
	
	.switch.switch-four input:checked:nth-of-type(3) ~ .slide-button {	
		top: 50%;
	}

	.switch.switch-four input:checked:last-of-type ~ .slide-button {
		top: 75%;
	}
	
	/* Switch with 5 items */
	.switch.switch-five label,
	.switch.switch-five .slide-button {
		height: 20%;
	}

	.switch.switch-five input:checked:nth-of-type(2) ~ .slide-button {	
		top: 20%;
	}
	
	.switch.switch-five input:checked:nth-of-type(3) ~ .slide-button {	
		top: 40%;
	}
	
	.switch.switch-five input:checked:nth-of-type(4) ~ .slide-button {	
		top: 60%;
	}

	.switch.switch-five input:checked:last-of-type ~ .slide-button {
		top: 80%;
	}

	/* Shared */
	.toggle,
	.switch {
		display: block;
	}
	
	.switch *,
	.toggle * {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
		-o-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	.switch .slide-button,
	.toggle .slide-button {
		display: block;
		
		-webkit-transition: all 0.3s ease-out;
		-moz-transition: all 0.3s ease-out;
		-ms-transition: all 0.3s ease-out;
		-o-transition: all 0.3s ease-out;
		transition: all 0.3s ease-out;
	}
	
	.toggle label,
	.toggle p,
	.switch label {
		line-height: 21px;
		vertical-align: middle;
	}
	
	.toggle input:checked ~ .slide-button {
		right: 50%;
	}
	
	/* Outline the toggles when the inputs are focused */
	.toggle input:focus ~ .slide-button,
	.switch input:focus + label {
		outline: 1px dotted #888;
	}
	
	/* Bugfix for older Webkit, including mobile Webkit. Adapted from:
	 * http://css-tricks.com/webkit-sibling-bug/
	 */
	.switch, .toggle {
		-webkit-animation: bugfix infinite 1s;
	}
	
	@-webkit-keyframes bugfix { from { position: relative; } to { position: relative; } }


	/* Standalone Themes */


	/* Candy Theme
	 * Based on the "Sort Switches / Toggles (PSD)" by Ormal Clarck
	 * http://www.premiumpixels.com/freebies/sort-switches-toggles-psd/
	 */
	 
	.candy {
		background-color: #2d3035;
		
		color: #fff;
		font-weight: bold;
		text-align: center;
		text-shadow: 1px 1px 1px #191b1e;
			
		border-radius: 3px;	
		
		box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3), 0 1px 0px rgba(255, 255, 255, 0.2);
	}

	.candy input:checked + label {
		color: #333;
		text-shadow: 0 1px 0 rgba(255,255,255,0.5);
	}
		
	.candy .slide-button {
		border: 1px solid #333;

		background-color: #70c66b;
		
		background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0));
		background-image:    -moz-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0));
		background-image:     -ms-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0));
		background-image:      -o-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0));
		background-image:         linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0));
		
		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.45);
		
		border-radius: 3px;
	}

	.candy p {
		color: #333;
		
		text-shadow: none;
	}

	.candy span {
		color: #fff;
	}

	.candy.blue .slide-button {
		background-color: #70c66b;
	}

	

	/* Android Theme
	 * Based on Holo
	 */
	 
	.android {
		background-color: #b6b6b6;
		
		color: #fff;
	}

	.android.toggle {
		border: 2px solid #b6b6b6;
	}

	.android.switch {
		overflow: hidden;
	}
		
	.android.switch .slide-button {
		background-color: #279fca;
		
		-webkit-transform: skew(20deg) translateX(10px);
		-moz-transform: skew(20deg) translateX(10px);
		-ms-transform: skew(20deg) translateX(10px);
		-o-transform: skew(20deg) translateX(10px);
		transform: skew(20deg) translateX(10px);
	}

	.android.toggle .slide-button {
		border-radius: 2px;
		
		background-color: #848484;
	}

	/* Selected ON toggle */
	.android.toggle input:first-of-type:checked ~ .slide-button {
		background-color: #279fca;
	}

	.android.switch input:first-of-type:checked ~ .slide-button {
		-webkit-transform: skew(20deg) translateX(-10px);
		-moz-transform: skew(20deg) translateX(-10px);
		-ms-transform: skew(20deg) translateX(-10px);
		-o-transform: skew(20deg) translateX(-10px);
		transform: skew(20deg) translateX(-10px);
	}

	.android p {
		color: #333;
	}

	.android span {
		color: #fff;
	}

	.android.switch,
	.android span {
		text-transform: uppercase;
	}

	/* Fix Android/Holo Theme in firefox - force absolute position */
	.android.switch input {
		top: 0;
		left: 0;
	}

	/* iOS Theme
	 * Similar to iOS but more accessible
	 */ 

	.ios {
		background: -webkit-linear-gradient(top, #cfcfcf, #efefef 50%, #f9f9f9 50%, #fefefe);
		background: -moz-linear-gradient(top, #cfcfcf, #efefef 50%, #f9f9f9 50%, #fefefe);
		background: -o-linear-gradient(top, #cfcfcf, #efefef 50%, #f9f9f9 50%, #fefefe);
		background: -ms-linear-gradient(top, #cfcfcf, #efefef 50%, #f9f9f9 50%, #fefefe);
		background: linear-gradient(top, #cfcfcf, #efefef 50%, #f9f9f9 50%, #fefefe);
		
		-webkit-box-shadow: inset 0 2px 2px #b6b6b6, inset 3px 0 3px #b6b6b6;
		box-shadow: inset 0 2px 2px #b6b6b6, inset 3px 0 3px #b6b6b6;

		border: 1px solid #efefef;
		border-radius: 3px;
		
		color: #7f7f7f;
		font: bold 14px sans-serif; 
		text-align: center;
		text-shadow: none;
	}

	.ios.toggle .slide-button {
		border: 1px solid #919191;
		background: -webkit-linear-gradient(top, #cdcdcd, #fbfbfb);
		background: -moz-linear-gradient(top, #cdcdcd, #fbfbfb);
		background: -o-linear-gradient(top, #cdcdcd, #fbfbfb);
		background: -ms-linear-gradient(top, #cdcdcd, #fbfbfb);
		background: linear-gradient(top, #cdcdcd, #fbfbfb);
		
		border-radius: 3px;
		
		-webkit-box-shadow: inset 0 1px 0 #f0f0f0;
		box-shadow: inset 0 1px 0 #f0f0f0;
	}

	/* Selected ON toggle */
	.ios.toggle input:first-of-type:checked ~ p span:first-child,
	.ios.switch input:checked + label {
		color: #fff;
		text-shadow: 0 -1px 0 #1b3b6f;
	}

	.ios.toggle input:first-of-type:checked ~ .slide-button,
	.ios.switch .slide-button {
		background: -webkit-linear-gradient(top, #3672dc, #4085ec 50%, #4d8fef 50%, #76adfc);
		background: -moz-linear-gradient(top, #3672dc, #4085ec 50%, #4d8fef 50%, #76adfc);
		background: -o-linear-gradient(top, #3672dc, #4085ec 50%, #4d8fef 50%, #76adfc);
		background: -ms-linear-gradient(top, #3672dc, #4085ec 50%, #4d8fef 50%, #76adfc);
		background: linear-gradient(top, #3672dc, #4085ec 50%, #4d8fef 50%, #76adfc);
		
		border-radius: 3px;
		border: 1px solid #1654b5;
		
		text-align: center;
		color: #fff;
		
		font: bold 14px sans-serif; 
		text-shadow: 0 -1px 0 #1b3b6f;
	}
	
	.ios.toggle p span {
		color: #7f7f7f;
	}
	
}


/* Ende: Formular */	


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

header{
 position:fixed;
	min-height: 5em;
	}
}


@media only screen and (max-width:1200px) 
{
 /* Kleinere Auflösungen ohne Seitenspalte */
  
#maincontent
{
 position:relative;
 max-width: 100%;
 display:block;
}
 
#sidecontainer{
 position:relative;
 max-width:100%;
 display:block;
 margin-top: 2.5em;
 margin-left: 0;
 top: 0em;
 }
	
}


@media only screen and (min-width:1200.01px)
{

/*
.grow:hover {

background-size: 109%;

}

.grow:hover .overlay-text
{
	padding: 1em; top: 7em;
}*/



}

@media only screen and (min-width:1600.01px)
{

/* Layout mit weißem Rand */
#content {top: 0.6em;}
	
	#sticky_upside{top:4.8em;}

	#sidecontainer {top:7.2em;}
	
	
header{
  padding-left:1.1em;
	}	
	
	#top_items{
		margin-left:1.1em;
	} 
	
	#maincontent
	{ margin-top: 0.3em;}
	
	#sidecontainer
	{ margin-top: 0.4em}
}


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

/*Standard-Layout ohne weiße Ränder*/

#container{
	width:100%;
	border-top:0;
	margin: 0;
	position: absolute;
	top:0;
	min-height:100%;
	margin:0;
	}

header{
	width:100%;
	border-top:0;
	margin: 0;
	height: 8.4em;
	}	

#content
{
	background-position: 0.6em 7.1em;
}	

#content,
	footer
{
	margin:0 0.5em 0.5em 0.5em;
}



 #logo img
 {
	/*! margin-left:0; */
 }

#nav_container
{
 left:0;
 padding-left:1.2em;
}




}


@media only screen and (min-width:1000.01px) and (max-width:1200px),
(min-width:1300.01px) {
	/*Mehrspaltiger Checkout*/
	.inhaltbox,
	.imgbox,
	.leerbox,
	.checkout_data {
		display: inline-block;
		width: 48%;
		min-height: 16em;
		}

.inhaltbox,
	.checkout_data {		
			vertical-align: top;
		}
		
	.inhaltbox-big,
	.checkout_data-big {
		width: 97%;
	}	
	
	
		
	#checkout_uebersicht {
	display: table-row;
	}


	}
	
@media only screen and (min-width:1900.01px) {

.inhaltbox,
	.imgbox {
		width: 31%;
		}


}
	
	

@media only screen and (min-width:650.01px)
{
 /*Workaround: Logo-Darstellung bei Änderung Größe Browserfenster und geöffnetem Menü */
#logo.open
{
 margin-left:1.8em;
	padding-right:3em;
 width: 26.2em;
}
}




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

  header{
		height: 8.3em;
		margin-top: -1em;
	}
/* Logos */

 
 #logos
 {
 background-size:70%;
 } 
 
 #logo
 {
 position:absolute;
 top:0em;
 margin-left:1.8em;
 height: 4em;
 padding-right: 0;
 left: 1em;
 }
 

 #banner_xxl {
	position: absolute;
	left: 18.9em;
	top: 2.1em;
	margin: 0;
 padding: 0;
 background: initial;
	}
	
#logo {
background-color: initial;
}	
	
#banner_xxl img {
 margin: 0;
 padding: 0;
}

 
 #menu_toggle.closed
{
	display: block;
}
	
	#sticky_upside
	{
top: 3.6em;
left: 0em;
width: 100%; 
z-index: 10;
padding-top: 0em;
		margin-top:0em;
	}
	
	#breadcrumb,
	.perlen
{
 width: calc(100% + 4em); 
padding: 0.6em 0.2em 0.3em 1.4em;
left: -2em;
}



 #nav_container
{
 display:block;
 top: 7em;
 left: -12.9em;
 margin: 0;
 padding: 0;
 position: absolute;
 width: 12.8em;
} 

 #menu
  {
  box-shadow: none;  
  }
  

#content
{
 margin-left:0.5em;
 padding-left:0em;
 padding-top: 2.8em;
 background:none;
 /*! margin-top: 0em; */
 padding-bottom: 2em;
}

 
 #logo img
 {
  width:60%; 

 }
 
  #maincontent
  {margin-top:0.0em; }
  
#content
	{width:100%;}
 
}

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

/* make space for xxl anounce banner */
#content {
padding-top: 3.8em;
}

#banner_xxl{
	top: 5.8em;
	left: 6.8em;
	}
	

}

@media only screen and (min-width:400.01px) and (max-width:650px)
{

	.perlen
{
padding: 0 0 0 1.8em;
	}
	
	

	}

@media only screen and (max-width:480px)
{
/* Logos */




 #logos
 {
 background-size:50%;
 } 	
 
 
 
 input[type=text],
input[type=email],
input[type=tel],
input[type=number],
#geb_datum  {
 max-width: 100%;
 
	}

 
}

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

/* Logos */



header {
height: 5.5em;
}

.imgbox {
	background-size: 22em;
}


	#sticky_upside{
	position:fixed;
	top:3.7em;
	width: 100vw;
	height: 2em;
	left: 0;
	}
	
	

 
 #logo img
 {
  width:55%; 
 }
 
 
  #logos
 { 
 right: 0.5em;
 background-size: 40%;
 } 
 
 
  #content
{
padding: 0;
	margin: 0;
}
 
#maincontent
{
 padding: 0;
	margin:0;
	margin-top: 4.4em;
}


#main_text {
 margin-top: 0; 
}


	form #breadcrumb {
	display: none;
	}
	
	#breadcrumb {
	left: -1em;
	margin-top: -4.1em;
	border-top: 4em solid #ffde13;
	}
	
	#banner_xxl {
		top: 5.5em;
		left: 5.6em;
	}
	
	.perlen {
	font-size:0.5em;
	left: 0em;
	width: 100%;
	padding: 0.6em 1em 0.4em 0.6em;
	height: 5.7em;
}

.perlen-xxl {
padding: 2.6em 1em 3.4em 0.6em;
height: 7.7em;
margin-top: -3em;
}
	
.perlen hgroup h1 {
 display: none;
}
	
	.perlen h3 {
	padding-right: 0.2em;}	
	
.perlen h3 span {
 font-weight: bold;
}

.perlen h3::before {
 content: "Camp-Anmeldung";
 padding-right: 0.3em;
}
	

	
	.contentbox
	{box-shadow: none; }
	
	
	#copyright{ margin-top: 2.5em;}
	
	input, textarea, select
{
 max-width: 100%;
}

.checkout-zeile,
.checkout-label,
.checkout-value {
	display: block;
	text-align: left;
	padding: 0;	
}



.checkout-zeile {
	margin: 0.5em 0.2em;
}
	
	
.formfield {
width: calc(100% - 2em) ;
}	
	
	
	
}


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

 #logos
 { 
 display:none;
 } 
 
 	#copyright{
		padding: 0 0 5em 0;
		background: url('layout/logos.svg') no-repeat bottom right;
	}
 
 
}

@media only screen and (max-width:336px)
{
 figure.kachel{
 width: 10em; }
}


/* ++++++++++++++++++  Kosmetik ++++++++++++ */


/* Custom Einblendbreiten für Top Items (inkl. Position Logos und Fixed Nav) */


/* Kopfhörer */
@media only screen and (min-width:2220.01px) 
{
#top_items
{
 width:123em;
} 
	
}

/* Altmodisches Handy */
@media only screen and (min-width:2150.01px) and (max-width:2220px)
{
	#top_items{
		width:118em;
	} 


}

/* Uhr */
@media only screen and (min-width:2108.01px) and (max-width:2150px)
{
	#top_items{
		width:116em;
	} 
	

}

/* Knipser */
@media only screen and (min-width:2072.01px) and (max-width:2108px)
{
	#top_items{
		width:114em;
	} 
		

}

/* Schlüsselsicherheitsnadel */
@media only screen and (min-width:2052.01px) and (max-width:2072px)
{
	#top_items{
		width:112em;
	} 
	

}

/* M&Bauer */
@media only screen and (min-width:2032.01px) and (max-width:2052px)
{
	#top_items{
		width:109em;
	} 
	

}

/* Käferpin */
@media only screen and (min-width:1982.01px) and (max-width:2032px)
{
	#top_items{
		width:107.5em;
	} 
	

}

/*Scherestecker*/
@media only screen and (min-width:1952.01px) and (max-width:1982px)
{
	#top_items{
		width:105.8em;
	} 
		

}

/* Säge */
@media only screen and (min-width:1858.01px) and (max-width:1952px)
{
	#top_items{
		width:100em;
	} 
	

}

/* Herzbatterie */
@media only screen and (min-width:1828.01px) and (max-width:1858px)
{
	#top_items
	{
		width:98em;
	} 
	

}

/* Runde Items */
@media only screen and (min-width:1775.01px) and (max-width:1828px)
{
	#top_items{
	width:95em;
	} 
	

}

/* Lampe */
@media only screen and (min-width:1730.01px) and (max-width:1775px)
{
	#top_items{
		width:92em;
	} 
	

}

/* Taschenmesserpin */
@media only screen and (min-width:1626.01px) and (max-width:1730px) 
{
#top_items
{
 width:85.8em;
} 

}

/* Hammer */
@media only screen and (min-width:1600.01px) and (max-width:1626px)
{
#top_items
{
 width:82.5em;
} 

}

/* <--- Umschaltpunkt: oben: weißer Rand, unten Hintergrund gelb ---> */


/* Taschenmesserpin */
@media only screen and (min-width:1525.01px) and (max-width:1600px) /* war 1730px*/
{
#top_items
{
 width:85.8em;
} 

}

/* Hammer */
@media only screen and (min-width:1477.01px) and (max-width:1525px)
{
#top_items
{
 width:82.5em;
} 

}

/* Schlüssel mit Anhänger */
@media only screen and (min-width:1441.01px) and (max-width:1477px)
{
#top_items
{
 width:80.18em;
} 

}

/* Waldhorn */
@media only screen and (min-width:1404.01px) and (max-width:1441px)
{
#top_items
{
 width:78em;
} 

}

/* Wäscheklammer */
@media only screen and (min-width:1318.01px) and (max-width:1404px)
{
#top_items
{
 width:72em;
} 

}

/* Kuhglocke */
@media only screen and (min-width:1280.01px) and (max-width:1318px)
{
#top_items
{
 width:70em;
} 
	

}

/* Stift */
@media only screen and (min-width:1224.01px) and (max-width:1280px)
{
#top_items
{
 width:67em;
} 

}

/* Schnörkelschlüssel */
@media only screen and (min-width:1199.01px) and (max-width:1224px)
{
#top_items
{
 width:65em;
} 

}

/* Kopfhörer */
@media only screen and (min-width:1166.01px) and (max-width:1199px)
{
#top_items
{
 width:63em;
} 

}

/* Altmodisches Handy */
@media only screen and (min-width:1094.01px) and (max-width:1166px)
{
#top_items
{
 width:58em;
} 

}

/* Uhr */
@media only screen and (min-width:1048.01px) and (max-width:1094px)
{
#top_items
{
 width:56em;
} 

}

/* Knipser */
@media only screen and (min-width:1013.01px) and (max-width:1048px)
{
#top_items
{
 width:54em;
} 

}

/* Schlüsselsicherheitsnadel */
@media only screen and (min-width:982.01px) and (max-width:1013px)
{
#top_items
{
 width:52em;
} 

}

/* M&Bauer */
@media only screen and (min-width:949.01px) and (max-width:982px)
{
#top_items
{
 width:49em;
}

	
}


/* Käferpin */
@media only screen and (min-width:923.01px) and (max-width:949px)
{
#top_items
{
 width:47.5em;
} 
}

/*Scherestecker*/
@media only screen and (min-width:909.01px) and (max-width:923px)
{
#top_items
{
 width:45.8em;
} 
}

/* Säge */
@media only screen and (min-width:818.01px) and (max-width:909px)
{
#top_items
	{
		width:40em;
	} 
}

/* Herzbatterie */
@media only screen and (min-width:793.01px) and (max-width:818px)
{
	#top_items
	{
		width:38em;
	} 	
}

/* Runde Items */
@media only screen and (min-width:749.01px) and (max-width:793px)
{
	#top_items
	{
		width:35em;
	} 	
}


/* Wunderlampe */
@media only screen and (min-width:710.01px) and (max-width:749px)
{
	#top_items
	{
		width:32em;
	} 	
}


/* Keine Items  */
@media only screen and (max-width:710px)
{
#top_items
	{
		background-image:none;
	}
	
}





	
/* Navi fix*/

/* Enormous Big Screens */
@media only screen and (min-width:2200.01px) 
{
#nav_container
{
 left: 2.4em;
	top: 14.3em;
	margin-top: 0em;
	width: 12em;
	padding-top: 0em;
	z-index: 0;
	border-top: 0.6em solid #ffde13; /*Camp-Gelb*/
	border-bottom: 0.6em solid #ffde13; /*Camp-Gelb*/
 position: absolute;

}
	
	header{
	width: 100%;
	}
	
	#menu
	{
	 top: 0;
	}

	
#content
	{
 background-position: 0.249em 0 ;
		background-attachment: scroll;
		padding-top:0.5em;
	}
	
  #maincontent
  {
   margin-top: -1em;
  }
  
  
#sidecontainer
	{top:0.4em;}
	
	
	#breadcrumb,
	.perlen
	{
	 margin-top: 0;
		/*!  */
	}
	
	#header
	{
	 position:absolute;
	 top:0em;
	}
	
	
	
}




@media only screen and (min-width:1600.01px) and (max-width:1620px) { #nav_container{ left: 7.9285714285714em; } #content{ background-position-x: 4.0711307962857em; } }
@media only screen and (min-width:1620.01px) and (max-width:1640px) { #nav_container{ left: 8em; } #content{ background-position-x: 4.106845084em; } }
@media only screen and (min-width:1640.01px) and (max-width:1660px) { #nav_container{ left: 8.0714285714286em; } #content{ background-position-x: 4.1425593717143em; } }
@media only screen and (min-width:1660.01px) and (max-width:1680px) { #nav_container{ left: 8.1428571428571em; } #content{ background-position-x: 4.1782736594286em; } }
@media only screen and (min-width:1680.01px) and (max-width:1700px) { #nav_container{ left: 8.2142857142857em; } #content{ background-position-x: 4.2139879471429em; } }
@media only screen and (min-width:1700.01px) and (max-width:1720px) { #nav_container{ left: 8.2857142857143em; } #content{ background-position-x: 4.2497022348571em; } }
@media only screen and (min-width:1720.01px) and (max-width:1740px) { #nav_container{ left: 8.3571428571429em; } #content{ background-position-x: 4.2854165225714em; } }
@media only screen and (min-width:1740.01px) and (max-width:1760px) { #nav_container{ left: 8.4285714285714em; } #content{ background-position-x: 4.3211308102857em; } }
@media only screen and (min-width:1760.01px) and (max-width:1780px) { #nav_container{ left: 8.5em; } #content{ background-position-x: 4.356845098em; } }
@media only screen and (min-width:1780.01px) and (max-width:1800px) { #nav_container{ left: 8.5714285714286em; } #content{ background-position-x: 4.3925593857143em; } }
@media only screen and (min-width:1800.01px) and (max-width:1820px) { #nav_container{ left: 8.6428571428571em; } #content{ background-position-x: 4.4282736734286em; } }
@media only screen and (min-width:1820.01px) and (max-width:1840px) { #nav_container{ left: 8.7142857142857em; } #content{ background-position-x: 4.4639879611429em; } }
@media only screen and (min-width:1840.01px) and (max-width:1860px) { #nav_container{ left: 8.7857142857143em; } #content{ background-position-x: 4.4997022488571em; } }
@media only screen and (min-width:1860.01px) and (max-width:1880px) { #nav_container{ left: 8.8571428571429em; } #content{ background-position-x: 4.5354165365714em; } }
@media only screen and (min-width:1880.01px) and (max-width:1900px) { #nav_container{ left: 8.9285714285714em; } #content{ background-position-x: 4.5711308242857em; } }
@media only screen and (min-width:1900.01px) and (max-width:1920px) { #nav_container{ left: 9em; } #content{ background-position-x: 4.606845112em; } }
@media only screen and (min-width:1920.01px) and (max-width:1940px) { #nav_container{ left: 9.0714285714286em; } #content{ background-position-x: 4.6425593997143em; } }
@media only screen and (min-width:1940.01px) and (max-width:1960px) { #nav_container{ left: 9.1428571428571em; } #content{ background-position-x: 4.6782736874286em; } }
@media only screen and (min-width:1960.01px) and (max-width:1980px) { #nav_container{ left: 9.2142857142857em; } #content{ background-position-x: 4.7139879751429em; } }
@media only screen and (min-width:1980.01px) and (max-width:2000px) { #nav_container{ left: 9.2857142857143em; } #content{ background-position-x: 4.7497022628571em; } }
@media only screen and (min-width:2000.01px) and (max-width:2020px) { #nav_container{ left: 9.3571428571429em; } #content{ background-position-x: 4.7854165505714em; } }
@media only screen and (min-width:2020.01px) and (max-width:2040px) { #nav_container{ left: 9.4285714285714em; } #content{ background-position-x: 4.8211308382857em; } }
@media only screen and (min-width:2040.01px) and (max-width:2060px) { #nav_container{ left: 9.5em; } #content{ background-position-x: 4.856845126em; } }
@media only screen and (min-width:2060.01px) and (max-width:2080px) { #nav_container{ left: 9.5714285714286em; } #content{ background-position-x: 4.8925594137143em; } }
@media only screen and (min-width:2080.01px) and (max-width:2100px) { #nav_container{ left: 9.6428571428571em; } #content{ background-position-x: 4.9282737014286em; } }
@media only screen and (min-width:2100.01px) and (max-width:2120px) { #nav_container{ left: 9.7142857142857em; } #content{ background-position-x: 4.9639879891429em; } }
@media only screen and (min-width:2120.01px) and (max-width:2140px) { #nav_container{ left: 9.7857142857143em; } #content{ background-position-x: 4.9997022768571em; } }
@media only screen and (min-width:2140.01px) and (max-width:2160px) { #nav_container{ left: 9.8571428571429em; } #content{ background-position-x: 5.0354165645714em; } }
@media only screen and (min-width:2160.01px) and (max-width:2180px) { #nav_container{ left: 9.9285714285714em; } #content{ background-position-x: 5.0711308522857em; } }
@media only screen and (min-width:2180.01px) and (max-width:2200px) { #nav_container{ left: 10em; } #content{ background-position-x: 5.10684514em; } }

/* Sinnvolle Breiten für den Content */


/*
.pic {height: 12.75em; }

.pic {height: 48vw; }

.overlay-text { top: 38vw;}
*/

.upzoom,
.downzoom,
.middlezoom,
.zoomout {
 background-position: 0 0;
}


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

.grow{ background-size: calc( 100vw - 1em ); }
.pic {height: 48vw; }

.overlay-text { 
	top: calc( 50vw - 4em );
	padding: 0em 0em 7vw 2em;
	border-bottom: 1em solid #000;
	font-size: 1.2em;
	}

}		

.candy .shortcut,
.candy .xshortcut,
.candy .shortened,
.candy .xshortened,
.candy .shortaddich,
.candy .detail_und_oderhead {
color: inherit;
}

.detail_und_oderhead{
	display: inline-block;
	line-height: 17px;
}

@media only screen and (max-width:460px) {
	.overlay-text {
		padding-top: 0.8em;
		font-size: 1em;
		}
		
	.shortcut {
		display: none;
		}
	.shortened::after{
		content: '.';
		display: inline;
		}		
		
	.shortaddich::after{
		content: ' ich';
		display: inline;
		color: inherit;
		}			
	}	

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

.overlay-text { 
	/*top: 36vw;*/
	font-size: 0.9em;
	text-align: center;
	padding-left: 0;
	padding-top: 1em;
	}

	.xshortcut {
		display: none;
		}
	.xshortened::after{
		content: '.';
		display: inline;
		}	


	}
	


	
@media only screen and (min-width:650.01px) and (max-width:1200px) {

.grow{ background-size: 100%; }

.pic {height: calc( 40vw - 4.75em )} /*21em*/

.overlay-text { 
	top:0;
	font-size: 1.2em;
	margin-top: calc( 37vw - 4.75em );
	padding: 0em 0em 3em 2em;
	}

}	

@media only screen and (min-width:1000.01px) {
.overlay-text { 
	margin-top: calc( 37vw - 3.5625em );
	font-size: 1.5em;
}
}


@media only screen and (min-width:1200.01px) {

.grow{ background-size: 100%; }

.pic {
	height: 27vw;
	max-height: 48em;
	} 

.overlay-text { 
	top:0;
/*	font-size: 1.8em;*/
	margin-top: 24vw;
	padding: 0em 0em 3em 2em;
	}

}	


@media only screen and (min-width:1600.01px) { 
	.pic { 
		height: 34em;
		} 
	
	.overlay-text { 
		margin-top: 20em;
		}
	}	
	
	
@media only screen and (min-width:2050.01px) { 
	.pic { 
		height: 43em;
		} 
	
	.overlay-text { 
		margin-top: 26em;
		}
	}		
 

 

@media only print {


#logo {
 width: 6cm;
}

#maincontent {

margin-top: 2.5cm;
}

#sticky_upside{
	display:none;
}

h1 {
font-size: 18pt;
}

h2, aside h2 {
font-size: 16pt;
}

h3 {
font-size: 14pt;
}

h4 {
font-size: 12pt;
}

h5 {
font-size: 11pt;
}


p,a,a:link, ol, ul, li {
font-size: 10pt;
}

}

#businesscard 
{
display:block;
margin: 1.5em 0.5em;
 -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}